Dependency Injection failing when a second decorator is in class

[Jonatthu]

[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

[filipesilva]

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

[filipesilva]

#3583 might be related (and I think it should have fixed it at the time).

[Jonatthu]

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

[sumitarora]

@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.

[filipesilva]

Closing as answered.

[Jonatthu]

@filipesilva @sumitarora
https://github.com/zalmoxisus/mobx-remotedev/blob/master/src/dev.js#L18-L23
zalmoxisus/mobx-remotedev#20 (comment)
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

[sumitarora]

@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.

[zalmoxisus]

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.

[sumitarora]

Thanks @zalmoxisus for investigating

[Jonatthu]

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

[sumitarora]

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

[sumitarora]

@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.

[hansl]

You can also refer to this issue for a similar use case (inheriting from a function call): angular/angular#13436

[Jonatthu]

@sumitarora @zalmoxisus Is there another way to make it work with angular knowing this?
#4994 (comment)

[bhaidar]

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

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}