Disclaimer: this is based on another answer in which was not accepted as the right answer because there was a simpler and easier way to do what the OP needed.
You can use the APP_INITIALIZER
injection token to run initialization code before any of your other application code runs.
APP_INITIALIZER
is defined in @angular/core
and you include it like this:
import { APP_INITIALIZER } from '@angular/core';
APP_INITIALIZER
is an OpaqueToken
that references the
multi provider ApplicationInitStatus
service. It supports multiple dependencies and you can use it in your providers list multiple times, e.g.:
@NgModule({
providers: [
MyService,
{
provide: APP_INITIALIZER,
useFactory: (service: MyService) => function() { return service.init(); },
deps: [MyService],
multi: true
}]
})
export class AppModule { }
This provider declaration is telling the ApplicationInitStatus
class to run the MyService.init()
method. init()
returns a Promise
and ApplicationInitStatus
blocks the app startup until the Promise
resolves.
export class MyService {
// omitted other methods for brevity
init(): Promise<any> {
// start some observers, do the stuff you need
// you can even request something via http
return this.httpClient
.get('https://someurl.com/example')
.toPromise()
}
}
In that way, anything inside init will run and block the application load until the Promise
resolves.
Be aware that this can increase the up-front load time for you app by however long the init()
method takes. For loading content before openning a route you should use a resolver instead.
Sources: