Angular 8 APP_INITIALIZER 服務在加載配置文件之前啟動

Question

我在使用 Angular APP_INITIALIZER 加載配置文件時遇到問題。

它似乎是服務開始加載 APP_INTIALIZER 所以配置文件無法到達服務，並且在配置文件需要在服務啟動之前設置一些東西之前它會導致錯誤。

這是 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 { }

這是哪里出錯了

在 AppRoutingModule 中，我使用 CanActive 檢查是否允許用戶在某些條件下通過

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

CheckUserService 將檢查登錄頁面的用戶的某些特定條件，如果不匹配，將出現 MatDialog

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}`);
    });
}

在 DialogServiceComponent 中，在它可以觸發到 API 之前，將在 AppConfig 上獲取一個配置文件，但是由於 app_initializer 尚未完成，因此由於配置文件尚未完成處理而出現錯誤。

我該如何解決這個問題，我不確定這是否是編寫 APP_INITIALIZER 的正確方法

Answer 1

我通過從 AppRoutingModule 中刪除 initialNavigation 來解決問題

如果您升級 angular 版本 7 -> 8，則會自動添加該行。

你可以在這里閱讀更多問題https://github.com/angular/universal/issues/1623

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