UI-Router doesn't wait for App_Initializer

UI-Router triggers route change as defined in config section before App_Initializer function is executed. In the below example home state’s resolveFn is triggered before App_Initialzer's resolves

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    routingComponents
  ],
  imports: [
    BrowserModule,
    UIRouterModule.forRoot(
      { states: appRoutes, 
        useHash: true ,
        config: uiRouterConfigFn
      }
    ),
  ],
  providers: [
    {
        provide: APP_INITIALIZER,
        useFactory: test,
        multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

function test(): Function {
  return () => delay();
}

function delay(){
  var deferred = new Deferred<any>();
  console.log("Initialization started: " + new Date());
  setTimeout(() => {
    console.log("Initialization Done: " + new Date());
    deferred.resolve();
  }, 5000); // Wait 3s then resolve.
  return deferred.promise;
}

app.routes.ts

export const routingComponents = [
    HomeComponent
  ];


let home = {
    name: 'home',
    url: '/home',
    component: HomeComponent,
    resolve:[
      {
        token: 'te',
        resolveFn:($state: StateService) =>{
          var deferred = new Deferred<any>();
          console.log("testing Home Component");
          deferred.resolve();
          return deferred.promise;
        }
      }
    ]
  }
  
  export const appRoutes = [
    home
  ];
  
  export function uiRouterConfigFn(router: UIRouter, injector: Injector) { 
    // If no URL matches, go to the `hello` state by default
    router.urlService.rules.otherwise({ state: 'home' });
  }

Have attached the full project for reference.

test.zip

[christopherthielen]

As a workaround you can use deferIntercept In the router configuration function and manually call listen and sync after your initializer is done

[jensbodal]

Can also load the config in main.ts and provide the config.

fetch('/app-config-url').then(data => data.json().then((appConfig) => {
  platformBrowserDynamic(
    [{ provide: 'AppConfig', useValue: appConfig }]
  )
  .bootstrapModule(AppModule)

This is just a simple example using fetch and without typesafety.