Inserting multiple services into a service - angular2

Question

I am trying to inject a self created service & the angular2 Http service into my custom HttpRest service.

using

@Inject(Http) public _http: Http

worked fine, but when I try to inject another self made service i get following Error:

EXCEPTION: Cannot resolve all parameters for 'HttpRest'(Http @Inject(Http), undefined @Inject(undefined)). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'HttpRest' is decorated with Injectable.

For some reason UserIds is undefined, even though the import is succesful. My custom service:

@Injectable()
export class UserIds{
   private _signature_id:string;
   private _role_id:number;
   get signature_id():string{
      return this._signature_id;
   }
   set signature_id(id:string){
      this._signature_id = id;
   }
   get role_id():number{
      return this._role_id;
   }
   set role_id(id:number){
      this._role_id = id;
   }
} 

The Custom HttpRest service im injecting both Http & UserIds into:

@Injectable()
export class HttpRest{
    groups;
    constructor(
        @Inject(Http) public _http: Http,
        @Inject(UserIds) public _ids: UserIds
    ){}
...
}

NOTE! when I remove

,
@Inject(UserIds) public _ids: UserIds

I dont get the Error.
What am I missing ?

UPDATE The problem is actually that UserIds is undefined in the constructor params for some unknown reason that im trying to understand, so the title of this question becomes irrelevant. It should be "Imported service is undefined in constructors params".
Please reffer to my answer on this question further down this post.

UPDATE:
Please reffer to a question that discusses this issue. Using index.ts file to export class causes undefined in injected constructor

Answer 1

@Inject(...) in @Inject(Http) public _http: Http is redundant when the parameter to @Inject() is the same as the type of the parameter.

@Injectable()
export class HttpRest{
    groups;
    constructor(public _http: Http, public _ids: UserIds
    ){}
...
}

You need to provide Http and UserIds so DI is able to resolve the dependency. Http is included in HTTP_PROVIDERS

@Component({
  selector: '...',
  providers: [HTTP_PROVIDERS, UserIds],
  template: ...
})
export class AppComponent {

}

Ensure you have everything imported correctly

import {HTTP_PROVIDERS, Http} from 'angular2/http';

Answer 2

Ok so I found the problem, and it has not to do with Inject. The problem was that im using an index file to export services, as mentioned in the angular 2 style guide (https://github.com/mgechev/angular2-style-guide/blob/master/old/README.md#directory-structure), and for some reason importing this specific service from the index causes an undefined value when injected into the constructor. When I reffernced the source directly and not trough the index file, for some reason that is unknown to, resolved the Error.

The import before the fix looked like this:

import {UserIds} from "../index"; 

Which worked with all other services and components.

The import using the direct source file:

import {UserIds} from "../user_ids/user_ids.service";

For some reason this solved my problem, but i want to stay consistent with the index.ts encapsulation.

If anyone has an idea why this could happen I'll be happy for updates.

Answer 3

You need to register your UserIds service at the root level (main.ts) or in the app.component.ts, which is the highest level in the hierarchy:

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>',
    providers: [ UserIds ]
})
export class AppComponent { }