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

shared-resolve.ts

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

是的，这是v8.x.x中的Ivy i18n问题。我已将其发布在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]
    }
    ...
]
...

Answer 2

我们在项目中所做的是，实际上我们为每个（lang）突变或“市场”都有了延迟加载的模块。这意味着您使用Angular路由和依赖项注入将与i18n相关的内容分离到<lang>.module.ts中，因此每个与“站点”相关的内容都由site.module.ts处理，而该内容实际上是由应用程序本身保存的。

您可以在此处看到解决方案（尽管它不包括LOCALE_ID提供，但是您可以在此处轻松添加它）

https://stackblitz.com/github/vmasek/angular-typed-translations-demo

我写了一篇有关此i18n替代方法并键入翻译的博客文章。您可以在这里https://blog.angularindepth.com/angular-typed-translations-29353f0a60bc

了解更多信息

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

2 个答案: