Providing from inheritor to constructor of base component doesn't work in Angular 4

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

After updating to Angular 4 code below throws errors (Cannot read property 'instance' of undefined). It was working without any problems before update:

export` const entity = new InjectionToken<string>('entity');

export class BaseComponent {
   protected entity<string>;
   constructor(injector: Injector) {
       ...
       this.entity = injector.get(entity)
   }
}

@Component({
   ...
   providers: [{provide: entity, useValue: 'whoCares'}]
})
export class InheritorComponent {
    constructor(injector: Injector) {
        super(injector)
    }
}

Expected behavior

I excepted InheritorComponent to be initialized with provided data via token.

Minimal reproduction of the problem with instructions

Here is working example:
http://plnkr.co/edit/CQLX3D5WWjixnzV5zQgN?p=preview
Here is unwoking (to brake it uncomment 26 line of app.ts)
http://plnkr.co/edit/5yeUn0j1VxASsAD0657n?p=preview

Code is similar. The only difference is angular version.

Please tell us about your environment:

Angular version: 4.0.X

Browser: [all ]

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

Doesn't work even without inheritance http://plnkr.co/edit/h4WlNJ6jwOVlCjVYXAIL?p=preview

@tbosch

cc @tbosch

same here. On Angular 2.4.x it was possible to inject all providers inside the constructor, since 4.0.x its not possible.
Here one example:
http://plnkr.co/edit/byWUOe?p=preview

Note: This is a general bug when using Injector and eager providers (useValue is always eager)

Doesn't work either with useClass. I have encountered this issue on upgrade to Angular 4.

I have some issue. Do we have any work around so that we can use Angular 4?

We use something like this as workaround:

@Component({
   ...
   providers: [{provide: entity, useValue: 'whoCares'}]
})
export class InheritorComponent {
    constructor(injector: Injector, @Inject(entity) _: string) {
        super(injector)
    }
}

There is one another workaround:

export class BaseComponent implements OnInit {
    constructor(private injector: Injector) {
    }

    ngOnInit() {
        this.entity = this.injector.get(entity);
    }
}

@Component({
   ...
   providers: [{provide: entity, useValue: 'whoCares'}]
})
export class InheritorComponent implements OnInit {
    constructor(private injector: Injector) {
        super(this.injector);
    }

    ngOnInit() {
        super.ngOnInit();
    }
}

@ivanpadavan

@ivanpadavan Does your work around work for regular Angular class instead of Angular component?

Will ngOnInit() be called in Angular class who implements OnInit?

@ivanpadavan

@ivanpadavan I tried your work around. It doesn't work. this.injector in BaseComponent is undefined when its ngOnInit is called.

@ivanpadavan

@ivanpadavan I used your work around to fix the issue in http://plnkr.co/edit/5yeUn0j1VxASsAD0657n?p=preview
(to brake it uncomment 26 line of app.ts). I got the following error:

VM6686 App_Host.ngfactory.js:5 ERROR ReferenceError: injector is not defined
at App.Base.ngOnInit (VM6533 app.ts!transpiled:39)
at App.ngOnInit (VM6533 app.ts!transpiled:52)

@CindySLiu

@CindySLiu in stead of
useValue: 'Nice to meet you'
use this
useFactory: () => 'Nice to meet you!'

Duplicate of #15501, already fixed by #19558 in 4.4.5.

@ivanpadavan

It looks to me like this issue can be closed, since it has been fixed. Can you close it please @ivanpadavan

I am using different approach.

From app.module.ts constructor i am calling service setter, which one needs to include that other service.

export class AppModule {
  constructor(private wampService: WampService) {
    this.wampService.setErrorHandler(WampErrorHandler);
  }
}

Bur in WampService setErrorHandlermethod looks like this:

    setErrorHandler(handler) {
        this.wampErrorHandler = this.injector.get(handler)
    };

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

Navigation Menu

Repository navigation

Providing from inheritor to constructor of base component doesn't work in Angular 4 #15615

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Providing from inheritor to constructor of base component doesn't work in Angular 4 #15615

Description

Activity

DzmitryShylovich commented on Mar 30, 2017

DzmitryShylovich commented on Mar 30, 2017

moohkooh commented on Apr 4, 2017

tbosch commented on Apr 10, 2017

CSchulz commented on Apr 20, 2017

CindySLiu commented on Jun 4, 2017

shelacek commented on Jun 13, 2017

ivanpadavan commented on Jun 13, 2017

CindySLiu commented on Jul 10, 2017

CindySLiu commented on Jul 10, 2017

CindySLiu commented on Jul 10, 2017

huntering commented on Jul 12, 2017

trotyl commented on Feb 13, 2018

wbhob commented on Jul 6, 2018

andzejsw commented on Aug 22, 2019

angular-automatic-lock-bot commented on Sep 22, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions