繁体   English   中英

Angular 8 APP_INITIALIZER 服务在加载配置文件之前启动

[英]Angular 8 APP_INITIALIZER service start before loading config file

我在使用 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 的正确方法

我通过从 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 { }

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM