Inject token into the header of all http requests

Question

I am trying to create a general method to insert a token in all my http requests. I don’t know much about angular 2 but I did it the way below:

Filing cabinet generic-service.ts

import {Http, Headers} from '@angular/http';
import {Injectable} from '@angular/core';
import {Session} from '@enterpiseCustomLib';
import 'rxjs/Rx';

@Injectable()
export class GenericService {
  public urlWs: string = 'http://trix.example.com:8090/';
  private http: Http;
  constructor(http: Http) {
    this.http = http;
  }

  get(method) {
    return this.http.get(this.urlWs + method, {
      headers: this.getHeaders()
    }).map(res => res.json());
  }

  post(method, data) {
    return this.http.post(this.urlWs + method, data, {
      headers: this.getHeaders()
    }).map(res => res.json());
  }

  getHeaders() {
    try {
      let user = Session.get('loginModel');
      let defaultHeaders: Headers = new Headers();
      defaultHeaders.append('Token', user.token);
      return defaultHeaders;
    } catch (ex) {
      return new Headers();
    }
  }

}

Filing cabinet login-service.ts

import {GenericService} from './generic-service';
import {LoginModel} from '../model/login-model';

export class LoginService {

  private gs: GenericService;

  constructor(gs:GenericService) {
    this.gs = gs;
  }

  public verificaUsuario (usuario: LoginModel) {
    return this.gs.post('login/autenticar', JSON.stringify(usuario));
  }

}

Filing cabinet login.ts

import {Component} from '@angular/core';
import {LoginModel} from '../../model/login-model';
import {LoginService} from '../../services/login-service';
import {NavController} from 'ionic-angular';
import {Alertar} from '@enterpiseCustomLib';

@Component({
  templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
  constructor(private navCtrl: NavController, private loginService: LoginService) {
    this.login = new LoginModel();
    this.login.email = '[email protected]';
    this.login.senha = '123';
  }

  startLogin() {
    this.loginService.verificaUsuario(this.login).subscribe(resposta => {
      console.log(resposta);
    });
  }
}

By the time I do the tests I have the error below:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: No provider for LoginService!
ORIGINAL STACKTRACE:
Error: DI Exception
    at NoProviderError.BaseException [as constructor] (http://localhost:8100/build/js/app.bundle.js:1691:23)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:8100/build/js/app.bundle.js:26882:16)
    at new NoProviderError (http://localhost:8100/build/js/app.bundle.js:26919:16)
    at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/js/app.bundle.js:27907:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/js/app.bundle.js:27935:25)
    at ReflectiveInjector_._getByKey (http://localhost:8100/build/js/app.bundle.js:27898:25)
    at ReflectiveInjector_.get (http://localhost:8100/build/js/app.bundle.js:27707:21)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:29281:48)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:29281:48)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/js/app.bundle.js:27932:24)
ERROR CONTEXT:
[object Object]

Answer 1

I think one of the problems is that your Loginservice service is not using dependency injection Annotation, and you don’t instantiate it anywhere on your Component.

import { Injectable } from '@angular/core';

    @Injectable()
    export class LoginService {
    }