angular-cli: Dependency Injection failing when a second decorator is in class

[x ] bug report => search github for a similar issue or PR before submitting

Current behavior I have a class which I want to inject within it’s constructor properties, they are classes too with @Injection() decorator,

@Injectable()
@remotedev({ name: 'STORE', onlyActions: true })
export class Store {
constructor(
    public alerts: AlertsStore,
    public client: ClientStore,
    public search: SearchStore,
    public searchListing: SearchListingStore
  ) {}

the other classes just have @Injectable() decorator and not a second decorator, my index.ts to put the providers in the app module has the right order

export * from './alerts.store';
export * from './client.store';
export * from './search.store';
export * from './search-listing.store'
export * from './store';

and the providers looks like this

  providers: [
    AlertsStore,
    ClientStore,
    SearchStore,
    SearchListingStore,
    Store
  ],

and every property on the constructor is undefined. which is weird because on ionic 2 which is using @angular 2.2.1 is working normally without problems, but a project generated with ng cli is not working which is beta 32, and has angular ^2.4.0, so I’m not sure why this is working in ionic 2 and this not.

Expected behavior Inject each class on the constructor

Minimal reproduction of the problem with instructions https://github.com/Jonatthu/angular-dependency-injection-failing

What is the motivation / use case for changing the behavior? Works fine on ionic 2 and this should work as well, without problems.

Angular version: 2.0.X Angular CLI beta.32.2, ionic has angular 2.2.1 and @angular from angular-cli is 2.4.2
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Language: TypeScript
Node (for AoT issues): node --version = 6.9.2

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16 (9 by maintainers)

Most upvoted comments

Seems like the issue happens for any extended class. Here’s a generic decorator to replicate the issue:

function extendClass(target: typeof Store): typeof Store {
  return class extends target {
  };
}

Using it instead of remotedev decorator in that repo also causes loosing _http value:

@Injectable()
@extendClass
export class Store {

    @observable
    public id: number = 1;

    constructor(
        public _http: Http
    ) {
        console.log(this._http); // it's undefined
    }
}

Let me know if there’s something we can do from our side.

zalmoxisus on Mar 14, 2017

@sumitarora @zalmoxisus Is there another way to make it work with angular knowing this? https://github.com/angular/angular-cli/issues/4994#issuecomment-288123993

Jonatthu on Mar 21, 2017

Thanks @zalmoxisus for investigating

sumitarora on Mar 14, 2017