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

Question

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

默认语言是en-US. 在构建过程中，会创建可以正常工作的翻译版本。

但是，在所有构建中，LOCALE_ID始终是en-US. 所以我不能依赖管道等中的语言环境。它没有使用构建配置中设置的语言环境进行更新。

在编译每个语言环境时，我也收到此警告（此处为德语）：

找不到“de-DE”的语言环境数据。此语言环境将不包含任何语言环境数据。

---

这是构建配置在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在角默认设置。但它不会改变行为。

---

我是否必须app.module.ts用不同的值替换registerLocaleData？这将是 20 种语言的巨大开销。

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

我错过了一些配置吗？

Answer 1

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

Angular 9 中 i18n 的配置是不同的，我通过检查文件的模式找到了解决angular.json方案./node_modules/@angular/cli/lib/config/schema.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最后，这具有始终设置正确值的效果。