Angular 8 APP_INITIALIZER service start before loading config file

Question

I'm having trouble loading config file with Angular APP_INITIALIZER.

Its seem the service started loading with APP_INTIALIZER so the config file is not reach to the service, and its causing error before config file need to set something before service start fire.

this is AppModule

export function load(http: HttpClient, config: AppConfigurationService):
(() => Promise<boolean>) {
return (): Promise<boolean> => {
    return new Promise<boolean>((resolve, reject): void => {
        http.get('/assets/config/config.json').
            pipe(
                map((res: AppConfigurationService) => {
                    config.defaultLanguage = res.defaultLanguage;
                    config.languages = res.languages;
                    config.title = res.title;
                    config.logo = res.logo;
                    resolve(true);
                }), catchError((error: { status: number }, caught: Observable<void>): ObservableInput<{}> => {
                    reject('could not download webpages duo to the application maintenance');
                    return of(error);
                })
            ).subscribe();
    }).then(res => {
        if (res) {
            return new Promise<boolean>((resolve, reject): void => {
                if (config) {
                    console.log(config, ' config is being produced?');
                    resolve(true);
                } else {
                    reject('Not Found')
                }
            });
        }
    });
};} 
     @NgModule({
declarations: [
    AppComponent,
    RootComponent,
],
imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    TransferHttpCacheModule,
    AppRoutingModule,
    SharedModule,
],
providers: [
    {
        provide: APP_INITIALIZER,
        useFactory: load,
        multi: true,
        deps: [
            HttpClient,
            AppConfigurationService
        ]
    }
],
bootstrap: [AppComponent],
entryComponents: [
    DialogServiceComponent
],}) export class AppModule { }

This is where it went wrong

In the AppRoutingModule i'm using CanActive to check if user is allow to pass with some condition

    {
        path: 'home',
        component: homeComponent,
        canActivate: [CheckUserService]
    },

CheckUserService is going to check some certain condition on user that logged in the page if not match the MatDialog will appear

if (isLoggedIn) {
        if(!userCondition){
              this.openDialog();
              return true;
           }
           return true;
        }
    } else {
        return true;
    }

     openDialog() {
    const dialogRef = 
        this.dialog.open(DialogServiceComponent, {
        width: '1000px',
        panelClass: 'my-dialog',
        disableClose: true
    });

    dialogRef.afterClosed().subscribe(result => {
        console.log(`Dialog result: ${result}`);
    });
}

And in DialogServiceComponent is going to get a config file on AppConfig before it can fire out to API but since the app_initializer is not finished, the error appear because of a config file is not yet done processing.

How do i solve this, i'm quite unsure if this is the proper way to write APP_INITIALIZER

Answer 1

I fix the problem by remove initialNavigation out of AppRoutingModule

the line is added automatically if you upgrade angular version 7 -> 8.

You can read more problem here https://github.com/angular/universal/issues/1623

@NgModule({
imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled',
    // initialNavigation: 'enabled'
})],
exports: [RouterModule]
 })
export class AppRoutingModule { }