Angular 5.x非CLI环境下i18n提取功能恢复方案求助

我之前也遇到过几乎一模一样的情况——在eject后的Angular 4项目升级到5.2.1后，旧的ExtractI18nPlugin直接报错，新的AngularCompilerPlugin的i18n选项又找不到可用文档，折腾了好一阵才搞定，给你分享下具体的解决步骤：

1. 彻底移除废弃的ExtractI18nPlugin #

首先把webpack配置里所有和ExtractI18nPlugin相关的代码全部删掉：

• 删掉顶部的const ExtractI18nPlugin = require('@ngtools/webpack').ExtractI18nPlugin;导入语句
• 删掉plugins数组里的new ExtractI18nPlugin(...)实例代码

这个插件在Angular 5+已经被完全废弃，哪怕你升级了所有依赖，留着它只会触发那个恼人的版本不匹配报错。

2. 配置AngularCompilerPlugin实现I18n提取 #

你需要创建一个单独的webpack配置文件（比如命名为webpack.i18n.config.js）来专门处理i18n提取任务，避免和常规构建任务冲突。下面是完整的提取配置示例：

const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const path = require('path');

module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'dummy.js' // 提取时会生成这个临时文件，后续可以删掉
  },
  module: {
    rules: [
      {
        test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
        loader: '@ngtools/webpack'
      }
    ]
  },
  plugins: [
    new AngularCompilerPlugin({
      tsConfigPath: './tsconfig.json',
      entryModule: './src/app/app.module#AppModule', // 替换成你的项目根模块路径
      i18nOutFile: 'messages.xlf', // 提取后的翻译文件名
      i18nOutFormat: 'xlf', // 输出格式，支持xlf、xliff、xmb等
      // 注意：提取阶段不要设置i18nInFile和locale，这两个是编译多语言版本时用的
    })
  ]
};

3. 调整tsconfig.json的编译选项 #

确保你的tsconfig.json里包含正确的Angular编译配置，这是i18n提取正常工作的关键：

{
  "compilerOptions": {
    // 保留你原有的常规编译配置（比如target、module、outDir等）
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false, // 使用新的messageId格式，避免冗余
    "skipMetadataEmit": true,
    "strictInjectionParameters": true
  }
}

4. 添加提取I18n的npm脚本 #

在package.json里添加一个专门的脚本，方便一键执行提取操作：

"scripts": {
  // 保留你原有的其他脚本
  "extract-i18n": "webpack --config webpack.i18n.config.js && rm dist/dummy.js"
}

执行npm run extract-i18n后，就能在项目根目录（或你指定的output路径）生成更新后的messages.xlf文件了。

5. 排查版本匹配问题 #

如果还是遇到版本报错，一定要检查这几点：

• @ngtools/webpack的版本必须和Angular版本匹配：Angular 5.x对应@ngtools/webpack@1.x（比如1.10.2），不要安装2.x及以上版本（那是给Angular 6+准备的）
• 所有@angular/*依赖的版本统一为5.2.1，避免版本不一致导致的隐性问题
• 彻底删除node_modules和package-lock.json（或yarn.lock）后重新安装依赖

额外说明 #

AngularCompilerPlugin的i18n选项文档确实很匮乏，核心逻辑其实很简单：

• 当**不设置i18nInFile**时，插件会执行提取操作，生成你指定的i18nOutFile
• 当**设置i18nInFile和locale**时，插件会用指定的翻译文件编译对应语言的应用

拆分配置后，提取和多语言编译就能分开正常工作了，我用这个方案在多个eject后的Angular 5项目里都成功恢复了i18n提取功能。

内容的提问来源于stack exchange，提问作者Maximilian Ochs