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

Answer 2

From the comments it sounds like it is the filter condition that isnt evaluated correctly. Im wondering if your select is the reason it's not working, can you try and remove the pipe() surrounding the select?

Change this:

store.pipe(select(fromRoot.getUserSettingsLoaded))

to this:

select(fromRoot.getUserSettingsLoaded)