Using index.ts file to export class causes undefined in injected constructor

Question

Im using an index.ts file to encapsulate exports as mentioned in the angular 2 style guide (https://github.com/mgechev/angular2-style-guide/blob/master/old/README.md#directory-structure).
This worked fine across the app Im writing, but for some reason in one service that im trying to inject into another service this causes a strange Error.

The exported class:

import {Injectable} from "angular2/core";
@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 index.ts file:

export {Midiate} from "./midiate.service/midiate.service";
export {HttpRest} from "./http_rest.service/http_rest.service";
export {UserIds} from "./user_ids.service/user_ids.service"

The code that caused the Error (the importing file):

import {UserIds} from "../index";
import {Http} from 'angular2/http';
@Injectable()
export class HttpRest{
 constructor(
    public _http: Http,
    public userIdsx: UserIds
 ){}
...
}

The Error thrown by the browser:

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

As you can see the UserIds class is undefined in the params of the constructor.

Changing the UserIds import to the source file fixed the problem:

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

Still I want to keep the older style on this using the index.ts as all other services and components in my app, and also understand why did this happen.

Answer 1

Looks like the order you put your exports in the index.ts does matter! Not sure if it's a bug or not but anyway...

Classes decorated with metadata should be at the top of the index.ts If one of them injects another, the "another" should be above the "one".

Answer 2

In Minko Gechev's style guide he is referencing the file by name. I also ran into this issue and simply moved my facade file up a folder and then referenced that file by name. I also renamed the folder to avoid a name conflict with the facade file because the paths got confused since there is no file extension in the path

I came across this question which asks about creating an index.ts file in the folder and they are having the same issue you are having.

From

| shared
    | services
        | login.service.ts
        | blog.service.ts

To

| shared
    | _services
        | login.service.ts
        | blog.service.ts
    | services.ts

Where services.ts contains

export {LoginService} from './_services/login.service'
export * from './_services/blog.service'

I then reference my services with the following import

import {LoginService, BlogService} from './shared/services'