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

Created on 24 Feb 2017 · 16Comments · Source: angular/angular-cli

[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

investigation 3 (nice to have) bufix

Source

Jonatthu

Most helpful comment

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 14 Mar 2017

👍2

All 16 comments

This sounds like a bug. Thanks for setting up the repro, we will investigate.

filipesilva on 14 Mar 2017

https://github.com/angular/angular-cli/pull/3583 might be related (and I think it should have fixed it at the time).

filipesilva on 14 Mar 2017

@filipesilva I forgot to mention that you need to install redux-remote dev chrome extension too

Jonatthu on 14 Mar 2017

@Jonatthu This seems to be an issue with the https://github.com/zalmoxisus/mobx-remotedev chrome extension. It works perfectly without it as soon as you enable extension it breaks the flow.

sumitarora on 14 Mar 2017

Closing as answered.

filipesilva on 14 Mar 2017

@filipesilva @sumitarora
https://github.com/zalmoxisus/mobx-remotedev/blob/master/src/dev.js#L18-L23
https://github.com/zalmoxisus/mobx-remotedev/issues/20#issuecomment-286476697
Is there a way that this code is not allowing the dependency injection system inject the http paramater
https://github.com/Jonatthu/angular-dependency-injection-failing/blob/master/src/app/store/store.ts#L15

Jonatthu on 14 Mar 2017

@Jonatthu It could be that as they are extending class and then assigning it back which might be affecting the constructor parameters. Still, it would require running the app as well as dev tools running simultaneously both in dev mode to check what is exactly causing this behavior.

sumitarora on 14 Mar 2017

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 14 Mar 2017

👍2

Thanks @zalmoxisus for investigating

sumitarora on 14 Mar 2017

👍1

@sumitarora So this has a possible solution on angular-cli webpack config or it needs another external solution?

Jonatthu on 14 Mar 2017

@Jonatthu Will have to investigate what is exactly causing this issue.

sumitarora on 15 Mar 2017

@Jonatthu After investigation current behavior is expected and appropriate. Extending class is decorator is not supported as we do don't support class-level decorators.
Using extend we lost the type information which causes this behavior and gets everything undefined.

sumitarora on 21 Mar 2017

You can also refer to this issue for a similar use case (inheriting from a function call): https://github.com/angular/angular/issues/13436

hansl on 21 Mar 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 21 Mar 2017

👍1

Is there a solution in here? My case is with a Class Decorator. Once I added that to a Component, all dependencies are undefined now.

Thanks