0

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

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 在本地运行时，一切都很好。所以我对问题可能是什么感到困惑。文件在那里，逻辑是正确的，但它仍然以英文显示:(

4

2 回答 2

4

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

 ng build --aot=false
于 2018-04-24T17:00:56.763 回答
0

使用 AOT 编译器似乎可以做到这一点。

来自 Angular 文档：

当您使用 AOT 编译器进行国际化时，您必须为每种语言预先构建一个单独的应用程序包，并根据服务器端语言检测或 url 参数提供适当的包。要指示 AOT 编译器使用您的翻译配置，请在 angular.json 文件中设置三个“i18n”构建配置选项。

  1. i18nFile：翻译文件的路径。
  2. i18nFormat：翻译文件的格式。
  3. i18nLocale：区域设置 ID。

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

"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 配置文件 angular.json 中定义单独的 production-fr 构建配置。

...
"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

于 2019-07-11T08:56:18.323 回答