angular 生产中的 i18n 翻译不工作

Question

在我的开发环境中，代码运行良好。但是一旦我构建它并投入生产，它就无法将应用程序编译成正确的语言

console.log(environment);

if (environment.production) {
   enableProdMode();
   window.console.log = function () { };   // disable any console.log debugging statements in production mode
}


declare const require;
var translations;

let locationSplit = window.location.hostname.split(".");
console.log(locationSplit);

if (locationSplit[0] == environment.chinese) {

  translations = require(`raw-loader!./locale/translatedChinese.zh-Hans.xlf`);
}
else {

  translations = null;
}


platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    { provide: TRANSLATIONS, useValue: translations },
    { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }
  ]
});

我正在控制台记录翻译文件，它就在那里。但是......它没有这样做。是的，逻辑没问题。我已经测试过了。就像我说的，当运行在本地使用 webpack 时，一切都很好。所以我对问题可能是什么感到困惑。文件在那里，逻辑是正确的，但它仍然以英文显示:(

Answer 1

angular i18n 不适用于 aot。尝试像这样构建确保关闭 aot：

 ng build --aot=false

Answer 2

似乎可以使用 AOT 编译器来完成。

来自 Angular 文档：

当您使用 AOT 编译器进行国际化时，您必须 pre-build 为每种语言创建一个单独的应用程序包，并根据 server-side 语言检测或 url 参数。要指示 AOT 编译器使用您的翻译配置，请在 angular.json 文件中设置三个 "i18n" 构建配置选项。

i18nFile：翻译文件的路径。
i18nFormat: 翻译文件的格式。
i18nLocale：语言环境 ID。

您还应该通过设置 outputPath 配置选项将输出定向到 locale-specific 文件夹，以使其与应用程序的其他语言环境版本分开。

"build": {
  ...
  "configurations": {
    ...
    "fr": {
      "aot": true,
      "outputPath": "dist/my-project-fr/",
      "i18nFile": "src/locale/messages.fr.xlf",
      "i18nFormat": "xlf",
      "i18nLocale": "fr",
      ...
    }
  }
},
"serve": {
  ...
  "configurations": {
    ...
    "fr": {
      "browserTarget": "*project-name*:build:fr"
    }
  }
}

然后您可以将此配置传递给 ng serve 或 ng build 命令。下面的示例显示了如何提供在本指南前面部分中创建的法语文件：

ng serve --configuration=fr

对于生产构建，您在 CLI 配置文件中定义一个单独的 production-fr 构建配置，angular.json.

...
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": { ... },
    "configurations": {
      "fr": {
        "aot": true,
        "outputPath": "dist/my-project-fr/",
        "i18nFile": "src/locale/messages.fr.xlf",
        "i18nFormat": "xlf",
        "i18nLocale": "fr",
        "i18nMissingTranslation": "error",
      }
// ...
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "my-project:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "my-project:build:production"
    },
    "fr": {
      "browserTarget": "my-project:build:fr"
    }
  }
},

也可以通过 CLI 使用您现有的生产配置提供相同的配置选项。

ng build --prod --i18n-file src/locale/messages.fr.xlf --i18n-format xlf --i18n-locale fr

更多信息在这里： https://angular.io/guide/i18n#merge-with-the-aot-compiler

angular 生产中的 i18n 翻译不工作

angular i18n translation in production not working

angular-i18n

angular

angular5