如何在 Angular 9 中构建期间动态更新国际化站点的 localeData 和 LOCALE_ID？

Question

我正在尝试构建一个支持多种语言的应用程序——实际上最多支持 20 种语言。

默认语言是en-US。在构建过程中创建了翻译版本，效果很好。

但是，在所有版本中，LOCALE_ID 始终是 en-US。所以我不能依赖管道等中的语言环境。它不会随着构建配置中设置的语言环境而更新。

我在为每个语言环境编译期间也收到此警告（此处针对德语）：

Locale data for 'de-DE' cannot be found. No locale data will be included for this locale.

这是构建配置在 angular.json:

中的样子

"production-de": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "6kb"
    }
  ],
  "outputPath": "dist/de",
  "baseHref": "/de/",
  "i18nLocale": "de-DE",
  "i18nFile": "src/locale/messages/messages.de.xlf",
  "i18nFormat": "xlf"
},

应用程序是使用此命令构建的：

ng build configuration=production-de

这是我的 app.module.ts 的样子：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, LOCALE_ID } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';
import { registerLocaleData } from '@angular/common';

import localeEn from '@angular/common/locales/en';
import localeEnExtra from '@angular/common/locales/extra/en';

registerLocaleData(localeEn, 'en-US', localeEnExtra);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: LOCALE_ID,
      useValue: 'en-US'
    }
  ],
  bootstrap: [
    AppComponent
  ]
})

export class AppModule { }

似乎 registerLocaleData 以及 LOCALE_ID 的提供者在构建期间没有更新。

我已经尝试删除 registerLocaleData 和 LOCALE_ID 提供程序，因为 en-US 是 Angular 中的默认设置。但它不会改变行为。

我是否也必须将 app.module.ts 替换为 registerLocaleData 的不同值？对于 20 种语言，这将是一个巨大的开销。

或者是否有不同但正确的方法以多种语言部署应用程序？

我是不是缺少一些配置？

Answer 1

您可以在供应商上使用工厂

providers: [
    {
      provide: LOCALE_ID,
      useFactory: langServiceFactory,
      deps: []
    }
  ],

有关工厂的更多信息 https://angular.io/guide/dependency-injection-providers

Answer 2

在的帮助下，我发现配置中存在多个错误，因为部分内容取自 Angular 8 项目。

Angular9 中 i18n 的配置不同，我通过检查 ./node_modules/@angular/cli/lib/config/schema.json.

中 angular.json 文件的架构找到了解决方案

现在只有一种通用构建配置，我在实际项目设置中添加了 i18n 选项。这是我添加到 angular.json:

"projects": {
  "app": {
    "i18n": {
      "sourceLocale": "en",
      "locales": {
        "de": "src/locale/messages/messages.de.xlf"
      }
    },
    "architect": {
      "build": {
        "configurations": {
          "de": {
            "localize": ["de"]
          }
        }
      },
      "serve": {
        "configurations": {
          "de": {
            "browserTarget": "app:build:de"
          }
        }
      },

现在我可以使用 CLI 以任何语言提供我的应用程序：

ng serve --configuration=de

我可以使用以下方法构建所有包：

ng build --prod --localize

最后，LOCALE_ID 始终设置为正确的值。

如何在 Angular 9 中构建期间动态更新国际化站点的 localeData 和 LOCALE_ID？

How to update localeData and LOCALE_ID for i18n sites dynamically during build in Angular 9?

angular

typescript

internationalization

angular9

angular-i18n