Angular 16如何扩展构建器实现编译时翻译文件转换任务？

1. 实现.properties转JSON并集成到Angular构建流程的合理方案 #

推荐以下几种实用方案，按实现复杂度从低到高排序：

方案一：npm脚本 + 文件监听工具（最易实现） #

• 第一步：安装依赖，用于解析.properties文件和监听文件变化：

  npm install properties chokidar-cli --save-dev
  

• 第二步：编写Node.js转换脚本（示例路径：scripts/translate-props-to-json.js）：

  const fs = require('fs');
  const path = require('path');
  const properties = require('properties');
  
  // 配置源文件目录和目标JSON输出目录
  const srcDir = path.resolve(__dirname, '../src/assets/i18n/props');
  const destDir = path.resolve(__dirname, '../src/assets/i18n/json');
  
  // 确保目标目录存在
  if (!fs.existsSync(destDir)) fs.mkdirSync(destDir, { recursive: true });
  
  // 单个文件转换逻辑
  function convertFile(filePath) {
    const fileName = path.basename(filePath, '.properties');
    properties.parse(fs.readFileSync(filePath, 'utf8'), { namespaces: true }, (err, obj) => {
      if (err) throw err;
      fs.writeFileSync(path.join(destDir, `${fileName}.json`), JSON.stringify(obj, null, 2));
      console.log(`已转换：${filePath} → ${fileName}.json`);
    });
  }
  
  // 支持单次批量转换或监听触发的单个文件转换
  if (process.argv[2]) {
    convertFile(process.argv[2]);
  } else {
    fs.readdirSync(srcDir).forEach(file => {
      if (file.endsWith('.properties')) convertFile(path.join(srcDir, file));
    });
  }
  

• 第三步：在package.json中添加脚本，实现并行监听与构建：

  "scripts": {
    "convert-i18n": "node scripts/translate-props-to-json.js",
    "watch-i18n": "chokidar 'src/assets/i18n/props/*.properties' -c 'npm run convert-i18n {path}'",
    "start:build": "npm run convert-i18n && concurrently \"npm run watch-i18n\" \"ng build <project> --watch\""
  }
  

• 用法：运行npm run start:build，即可同时实现.properties文件变更自动转换、Angular项目监听构建。

方案二：扩展Angular DevKit构建器（深度集成） #

如果需要将转换逻辑完全嵌入ng build命令，可自定义构建器：

• 基于@angular-devkit/schematics创建构建器模块，在构建和监听的钩子中添加.properties转JSON逻辑：
  • 构建阶段：先批量转换所有.properties文件，再执行默认Angular构建流程
  • 监听模式：监听.properties文件变化，触发转换后通知构建器重新打包
• 在angular.json中配置使用自定义构建器替代默认的@angular-devkit/build-angular:browser

方案三：Webpack插件（适合熟悉Webpack的场景） #

利用Angular底层的Webpack机制，编写自定义插件：

• 在Webpack的beforeCompile或emit钩子中，扫描指定目录的.properties文件，转换为JSON后写入目标目录或添加到打包资源中
• 在angular.json的projects.<project>.architect.build.options.customWebpackConfig中引入该插件，开启watch模式时Webpack会自动监听.properties文件变化

2. 是否应该使用自定义TranslateLoader？ #

不推荐。自定义TranslateLoader需要在应用运行时（每次加载）解析.properties文件，对于较大的语言文件，会明显增加首屏加载时间，影响用户体验，尤其是在网络环境较差的场景下。

更优的方式是在构建阶段完成转换（如上述方案），直接生成Angular翻译系统（如@ngx-translate）可直接读取的JSON文件，运行时仅需加载现成的JSON，性能开销极小。

内容的提问来源于stack exchange，提问作者Stanislav Stoyanov