Recently, I have been following a method outlined in a blog post on MSDN to simplify the extension of components without having to include all dependencies in the super() call. However, this approach seems to have ceased working in Angular 7 with Typescript 3.
The issue arises when I attempt to store the injector in a service after bootstrapping and then later retrieve it for use:
platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
// Save the module's injector in the AppInjector class
console.log('Expected #1: saving app injector');
AppInjector.setInjector(ref.injector);
})
Subsequently, in the base component, I try to access the stored injector:
export class BaseComponent {
constructor() {
console.log('Expected #2: retrieving saved injector');
const injector = AppInjector.getInjector();
}
}
However, upon reviewing the console logs, it appears that the order is mixed up – the BaseComponent's constructor is executed before the resolution of the boostrapModule() promise.
I am uncertain if there has been a change in how bootstrapping works in Angular 7 based on the console output. While this solution functioned correctly in Angular 6 with Typescript 2, it no longer does so with version 7. A broken app exemplifying this issue can be found on StackBlitz, following the principles mentioned in the MSDN article: https://stackblitz.com/edit/component-inheritance-angular-7
Therefore, the key question at hand is – how can we ensure that AppInjector.setInjector() occurs prior to AppInjector.getInjector()?