Angular 5：提取 i18n 并在没有 angular-cli 的情况下创建 messages.xlf答案

【问题标题】：Angular 5: Extract i18n and create messages.xlf without angular-cliAngular 5：提取 i18n 并在没有 angular-cli 的情况下创建 messages.xlf
【发布时间】：2018-07-03 17:48:29
【问题描述】：

我目前正在开发一个 Angular 4.4 项目，该项目是使用 angular-cli 创建但从 angular-cli 弹出的。在我们的 webpack.config 中，我们使用 @ngtools/webpack 中的 AOTPlugin 和 ExtractI18nPlugin 来使用 angulars Ahead of Time 编译并根据我们的 i18n-Html-Attributes 提取 messages.xlf。每次我们使用这个 webpack 配置运行构建任务时，messages.xlf 都会更新。

更新到 Angular 5.2.1 后，我们将 AOTPlugin 替换为 AngularCompilerPlugin，如 @ngtools/webpack 的自述文件中所述：https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack。工作得很好。

但是，没有提及如何从 ExtractI18nPlugin 迁移，这似乎也已被弃用。如果我们将它留在 webpack.config 中，构建任务将失败并显示错误消息： 请更新@angular/cli。 Angular 5+ 至少需要 Angular CLI 1.5+。当然，我们所有的依赖项都是最新的，并且已经完全重新安装了好几次（包括我们不用于构建任务的 angular-cli）

新的AngularCompilerPlugin在接口AngularCompilerPluginOptions中定义了一些关于i18n的选项：

  ...
  i18nInFile?: string;
  i18nInFormat?: string;
  i18nOutFile?: string;
  i18nOutFormat?: string;
  locale?: string;
  ...

https://github.com/angular/angular-cli/blob/master/packages/%40ngtools/webpack/src/angular_compiler_plugin.ts#L57

但是它们（似乎）没有效果，并且没有关于如何使用它们的文档。

在寻找解决方案时，我发现这个示例项目展示了我们当前的场景，但它只在 angular 5 beta 之前有效。现在有一个 github issue 描述了我们的确切问题：https://github.com/ocombe/i18n-demo-no-cli

关于如何使用 angular 5.X 让我们的 i18n 提取再次运行有什么想法吗？

【问题讨论】：

标签： javascript angular webpack internationalization angular-cli

【解决方案1】：

找到解决方案：如果选项 skipCodeGeneration（禁用 AOT 编译）设置为 true，AngularCompilerPlugin 将跳过 i18n 提取。

i18n 提取的工作配置现在如下所示：

new AngularCompilerPlugin({
  mainPath: 'src/main.ts',
  i18nOutFile: path.join('src', 'i18n', 'messages.xlf'),
  i18nOutFormat: 'xlf',
  locale: 'en',
  sourceMap: true,
  tsConfigPath: 'tsconfig.json',
  skipCodeGeneration: false,
  compilerOptions: {}
})

【讨论】：