启动时从Angular 8应用程序中的API延迟加载并在运行时设置LOCALE_ID

Question

我们提供了一种从API延迟加载和设置Angular应用程序的LOCALE_ID的方法（通过在启动时加载用户配置文件数据）。这在Angular 7上效果很好，但是当我升级到Angular 8时，它停止了工作。调用localeFactory时（​​参见下文）localeService.getLocale()，它是未定义的，尚未被初始化。我们将初始化SharedResolver为，SharedModule其中的包含在的中，其中包含在中AppModule。在Angular 8中执行此操作的正确方法是什么？在更改文档中没有看到与此相关的任何内容，因此我想这是间接的。我在这里应该采取什么方法的任何意见？谢谢

请参见下面的相关代码：

app.module.ts

export function localeFactory(localeService: LocaleService) {
    console.log('locale factory called');
    // This is `undefined` here now for some reason
    console.log(localeService.getLocale());

    return localeService.getLocale() || 'en';
}

...
const APP_LOCALE_ID = {
    provide: LOCALE_ID,
    deps: [LocaleService],
    useFactory: localeFactory
};

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        SharedModule.forRoot(), // <- in this module we have the SharedResolver
        AccountModule,
        ApiModule,
        GenesysSubprojectModule
    ],
    declarations: [AppComponent],
    providers: [
        AppRouteGuard,
        BreadcrumbService,
        {
            provide: APP_INITIALIZER,
            useFactory: appInitializerFactory,
            deps: [PlatformLocation, BootstrapService],
            multi: true
        },
        { provide: ErrorHandler, useClass: GlobalErrorHandler },
        AppRouteGuard,
        BreadcrumbService,
        // TODO - This doesn't work anymore!
        APP_LOCALE_ID
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

共享解析

export class SharedResolve implements Resolve<any> {
    ...

    resolve(route: ActivatedRouteSnapshot) {
       ...

        const observables = forkJoin(
            this.authService.getPermissions(),
            this.authService.getCurrentProfileFromApi(),
            this.languageApi.getActiveLanguages(), // TODO - cache
            this.tenantSettingsApi.getLogo(logoLastModificationTime),
            this.dashboardApi.getDashboardSettings(),
            this.reportApi.getReportSettings(),
            this.publicSettingsApi.getSettings(),
            this.tenantSettingsApi.getInitializationSettings()
        ) as Observable<any[]>;

        return observables
            .pipe(
                flatMap(result => {
                    ...
                    const profile: CurrentUserProfileExtEditDto = result[1];
                    ...
                    const languageName =
                        profile.languageName || navigator.language; // browser default language
                    console.log('Set locale to languageName=' + languageName);
                    this.storageService.setLocale(languageName);
                    this.localeService.setLocale(languageName);

Answer 1

是的，这是的常春藤i18n问题v8.x.x。我已将其发布在Angular仓库中，并已得到@Ocombe（正在研究Ivy i18n的作者）的确认。

如果您急于解决此问题，可以执行以下操作：

当Ivy正在搜索运行时语言环境时，您可以AppModule像这样简单地提供默认语言，然后提供APP_INITIALIZER：

...
providers: [
    ...
    { provide: LOCALE_ID, useValue: 'en' }
    {
        provide: APP_INITIALIZER,
        useFactory: initializeAppSettings,
        deps: [AppInitializerService],
        multi: true
    }
    ...
]
...

这将首先设置默认语言环境，然后运行您的APP_INITIALIZER。接下来，在您的服务器CoreModule（仅加载一次）中，只需提供LOCALE_ID从后端获取的新文件：

...
providers: [
    ...
    {
        provide: LOCALE_ID,
        useFactory: (localeService: LocaleService) => localeService.getCurrentLocale(),
        deps: [LocaleService]
    }
    ...
]
...