Angular 7 Component Inheritance using a global injector

Question

I've been using the approach described in an MSDN blog post to simplify extending components without needing to provide all the dependencies in the super() call. However this has stopped working in Angular 7 with Typescript 3.

So what's happening is that after bootstrapping, I'm trying to store the injector in a service and afterwards I try to retrieve it.

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
  // Store module's injector in the AppInjector class
  console.log('Expected #1: storing app injector');
  AppInjector.setInjector(ref.injector);
})

and then in the base component I fetch the stored injector

export class BaseComponent {
  constructor() {
    console.log('Expected #2: retrieving stored injector');
    const injector = AppInjector.getInjector();
  }
}

However looking at the console, the order is reversed – first the BaseComponent's constructor is called whichafter the promise of boostrapModule() is resolved.

I'm not sure if bootstrapping is behaving differently now in Angular 7, as the console logs hint. The very same solution used to work in Angular 6 with Typescript 2, but with version 7 it has stopped working. Here's a stackblitz of the broken app based on the MSDN article: https://stackblitz.com/edit/component-inheritance-angular-7

So the fundamental question is – how to guarantee that AppInjector.setInjector() happens before AppInjector.getInjector()?

Would that bother you to do it in the bootstraped component ? Seems to work : stackblitz.com/edit/… — user4676340
– user4676340, Commented Nov 7, 2018 at 8:13
Use AppModule constructor stackblitz.com/edit/component-inheritance-angular-7-dfd2wr — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Nov 7, 2018 at 8:26

Muhammed Albarmavi · Accepted Answer · 2018-11-07 08:27:58Z

7

I have set the injector service in AppModule and that mean I will inject Injector and set it in the constractor of AppModule and store the injector service in global object

export class AppModule { 
  constructor(injector:Injector){
  // Store module's injector in the AppInjector class
  console.log('Expected #1: storing app injector');
  AppInjector.setInjector(injector);
  }
}

demo

edited Nov 7, 2018 at 8:27

answered Nov 7, 2018 at 8:15

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lightheaded Over a year ago

Thanks, this seems to be working. Althought I went for storing the injector in the AppComponent instead of AppModule as per trichetriche's comment, I will mark your answer as accepted, as it works too. Feels somewhat hacky to do so, but as long as it works, right? :)

Muhammed Albarmavi Over a year ago

Both are acceptable but if the you extend AppComponent with base class AppModule will be the place to set injector because AppModule is create before AppComponent.

Rasshu Over a year ago

Can you send the full final example to plunkr?

Muhammed Albarmavi Over a year ago

@rsb2097 this live example stackblitz.com/edit/…

Collectives™ on Stack Overflow

Angular 7 Component Inheritance using a global injector

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related