I got a problem using APP_INITIALIZER. Everything seems to work fine, function hits endpoint and returs and executes resolve(true). The problem is that after all I can see only blank screen. 0 errors in console. Here is the code:
export function initApplication(store: Store<fromRoot.State>){//() => Observable<any> {
return (): Promise<any> => {
return new Promise(resolve => {
store.dispatch(AppActions.StartAppInitializer());
store.dispatch(AppActions.LoadUserSettings());
store.select(fromRoot.getUserSettingsLoaded)
.pipe(
tap(userSettingsLoaded => console.log(userSettingsLoaded)),
filter(userSettingsLoaded => userSettingsLoaded == true),
take(1)
)
.subscribe((userSettingsLoaded) => {
store.dispatch(AppActions.FinishAppInitializer());
resolve(true);
})})}
}
Here code in @NgModule in app.module.ts in providers section
{
provide: APP_INITIALIZER,
useFactory: initApplication,
multi: true,
deps: [Store]
}
Any suggestions?
It came out the problem were guards firing at same time as APP_INITIALIZER. They were not waiting for app_init to finish and they needed result of action from app_init. That's why page wasn't appearing - guards were blocking them. For me the solution was to add in app.routing.module.ts
initialNavigation: 'disabled'
and then enabling it in constructor of app.component.ts
router.initialNavigation();