angular - 如何在 Angular 9 中构建期间动态更新 i18n 站点的 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

在 David's comment 的帮助下我发现配置中有多个错误，因为部分来自 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 的效果始终设置正确的值。