Multiple angular app initializers

Question

We know that in root module provider we can set an APP_INITIALIZER that bootstrap some dependencies in the backend and then loads the first component

{
    provide: APP_INITIALIZER,
    useFactory: configLoader,
    multi: true,
    deps: [ConfigService]
}

I will load my user configs before the app starts in the above way, but I want to do somehing more, like connect websocket before my app starts.

I know that I can do in in configLoader function that I wrote, that first load configs and then connect websocket in that configLoader function, but for some reasons, I can't do that right now, so I need do in in someway like this:

{
    provide: APP_INITIALIZER,
    useFactory: [configLoader, websocketLoader],
    multi: true,
    deps: [ConfigService, WebsocketService]
}

But unfortunately, it won't work. So is there any way to load multiple app initializers?

multi:true allows creating as many providers as like under the same token. You may find the following articles helpful as well Hooking into the Angular bootstrap process and How to manually bootstrap an Angular application — Max Koretskyi
– Max Koretskyi, Commented Aug 3, 2017 at 7:49

Günter Zöchbauer · Accepted Answer · 2017-08-03 07:46:20Z

45

useFactory isn't supposed to be an array

{
    provide: APP_INITIALIZER,
    useFactory: websocketLoader,
    multi: true,
    deps: [ConfigService, WebsocketService]
},
{
    provide: APP_INITIALIZER,
    useFactory: configLoader,
    multi: true,
    deps: [ConfigService, WebsocketService]
}

With multi: true providing multiple providers with the same key (APP_INITIALIZER) won't override the previous one (behavior with multi: false), but DI will collect them in an array itself.

answered Aug 3, 2017 at 7:46

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

4 Comments

meshkati Over a year ago

Thanks, this works, but can we define orders to these initializers? like configLoader loads completely and then websocketLoader starts?

Günter Zöchbauer Over a year ago

No, you can't define an order, but you can register a 3rd factory that injects ConfigService and WebSocketService, calls the initialization method on the first one and when completed calls the initialization method of the other one (you need to move the initialization code out of the constructor to a method where they are explicitly called by your factory).

sarora Over a year ago

When you say you need to create a 3rd factory, does that mean in lieu of the other two, which should be removed as APP_INITIALIZERs but just listed in the deps array? Altnerately, if you are saying to ADD a 3rd but keep the other two, am trying to understand how will the 3rd factory be able to inject the other 2 if you can't guarantee sequence? Or is there a trick that somehow ensures the 3rd will run only after the other two have loaded? Appreciate any insight. Thanks.

Günter Zöchbauer Over a year ago

Not exactly sure what the question is. The sequence is determined by what service depends on what other service. If you need a sequence different from that you need to synchronize yourself, like providing observables so that one service can subscribe on an observable from an injected service and waits for this service to notify that it is ready before you access its methods (or other means to get such synchronization)

Collectives™ on Stack Overflow

Multiple angular app initializers

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related