APP_INITIALIZER blank page

Question

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?

Answer 1

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();