Angular 7 Component Inheritance using a global injector
up vote
2
down vote
favorite
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()
?
angular typescript inheritance angular7
add a comment |
up vote
2
down vote
favorite
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()
?
angular typescript inheritance angular7
1
Would that bother you to do it in the bootstraped component ? Seems to work : stackblitz.com/edit/…
– trichetriche
Nov 7 at 8:13
Use AppModule constructor stackblitz.com/edit/component-inheritance-angular-7-dfd2wr
– malbarmawi
Nov 7 at 8:26
Thanks! Both suggestions help circumvent the problem :)
– Lightheaded
Nov 8 at 12:08
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
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()
?
angular typescript inheritance angular7
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()
?
angular typescript inheritance angular7
angular typescript inheritance angular7
edited Nov 10 at 9:50
Goncalo Peres
7771311
7771311
asked Nov 7 at 7:38
Lightheaded
374316
374316
1
Would that bother you to do it in the bootstraped component ? Seems to work : stackblitz.com/edit/…
– trichetriche
Nov 7 at 8:13
Use AppModule constructor stackblitz.com/edit/component-inheritance-angular-7-dfd2wr
– malbarmawi
Nov 7 at 8:26
Thanks! Both suggestions help circumvent the problem :)
– Lightheaded
Nov 8 at 12:08
add a comment |
1
Would that bother you to do it in the bootstraped component ? Seems to work : stackblitz.com/edit/…
– trichetriche
Nov 7 at 8:13
Use AppModule constructor stackblitz.com/edit/component-inheritance-angular-7-dfd2wr
– malbarmawi
Nov 7 at 8:26
Thanks! Both suggestions help circumvent the problem :)
– Lightheaded
Nov 8 at 12:08
1
1
Would that bother you to do it in the bootstraped component ? Seems to work : stackblitz.com/edit/…
– trichetriche
Nov 7 at 8:13
Would that bother you to do it in the bootstraped component ? Seems to work : stackblitz.com/edit/…
– trichetriche
Nov 7 at 8:13
Use AppModule constructor stackblitz.com/edit/component-inheritance-angular-7-dfd2wr
– malbarmawi
Nov 7 at 8:26
Use AppModule constructor stackblitz.com/edit/component-inheritance-angular-7-dfd2wr
– malbarmawi
Nov 7 at 8:26
Thanks! Both suggestions help circumvent the problem :)
– Lightheaded
Nov 8 at 12:08
Thanks! Both suggestions help circumvent the problem :)
– Lightheaded
Nov 8 at 12:08
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
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
Thanks, this seems to be working. Althought I went for storing the injector in theAppComponent
instead ofAppModule
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? :)
– Lightheaded
Nov 8 at 11:56
1
Both are acceptable but if the you extendAppComponent
with base classAppModule
will be the place to set injector becauseAppModule
is create beforeAppComponent
.
– malbarmawi
Nov 9 at 7:54
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
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
Thanks, this seems to be working. Althought I went for storing the injector in theAppComponent
instead ofAppModule
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? :)
– Lightheaded
Nov 8 at 11:56
1
Both are acceptable but if the you extendAppComponent
with base classAppModule
will be the place to set injector becauseAppModule
is create beforeAppComponent
.
– malbarmawi
Nov 9 at 7:54
add a comment |
up vote
1
down vote
accepted
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
Thanks, this seems to be working. Althought I went for storing the injector in theAppComponent
instead ofAppModule
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? :)
– Lightheaded
Nov 8 at 11:56
1
Both are acceptable but if the you extendAppComponent
with base classAppModule
will be the place to set injector becauseAppModule
is create beforeAppComponent
.
– malbarmawi
Nov 9 at 7:54
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
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
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 at 8:27
answered Nov 7 at 8:15
malbarmawi
4,45031131
4,45031131
Thanks, this seems to be working. Althought I went for storing the injector in theAppComponent
instead ofAppModule
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? :)
– Lightheaded
Nov 8 at 11:56
1
Both are acceptable but if the you extendAppComponent
with base classAppModule
will be the place to set injector becauseAppModule
is create beforeAppComponent
.
– malbarmawi
Nov 9 at 7:54
add a comment |
Thanks, this seems to be working. Althought I went for storing the injector in theAppComponent
instead ofAppModule
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? :)
– Lightheaded
Nov 8 at 11:56
1
Both are acceptable but if the you extendAppComponent
with base classAppModule
will be the place to set injector becauseAppModule
is create beforeAppComponent
.
– malbarmawi
Nov 9 at 7:54
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? :)– Lightheaded
Nov 8 at 11:56
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? :)– Lightheaded
Nov 8 at 11:56
1
1
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
.– malbarmawi
Nov 9 at 7:54
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
.– malbarmawi
Nov 9 at 7:54
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53185211%2fangular-7-component-inheritance-using-a-global-injector%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
1
Would that bother you to do it in the bootstraped component ? Seems to work : stackblitz.com/edit/…
– trichetriche
Nov 7 at 8:13
Use AppModule constructor stackblitz.com/edit/component-inheritance-angular-7-dfd2wr
– malbarmawi
Nov 7 at 8:26
Thanks! Both suggestions help circumvent the problem :)
– Lightheaded
Nov 8 at 12:08