如何在无应用上下文的NX独立Angular库中实现翻译？

问题梳理 #

你当前在NX monorepo的独立Angular库中使用$localize标记翻译文本，但遇到核心问题：

• 库中无main.ts文件，无法初始化@angular/localize
• 缺少应用上下文，nx extract-i18n无法识别并提取库内翻译文本至.xlf文件
• 同时疑问：若库发布为附带.xlf文件的npm包，应用是否需要合并自身与库的翻译文件

解决方案 #

1. 初始化Angular Localize（无需main.ts） #

无需单独的main.ts，直接在库的入口文件（通常是public-api.ts或index.ts）中导入@angular/localize/init，确保库编译和运行时能识别$localize标记：

// public-api.ts
import '@angular/localize/init';

// 导出库的公共API
export * from './lib/your-library.module';
export * from './lib/your-translated-service';

2. 配置NX提取库的翻译文本 #

NX默认extract-i18n目标针对应用，需给库的project.json添加自定义提取目标，指定使用Angular的翻译提取构建器：
打开库的project.json，在targets节点下添加：

"extract-i18n": {
  "executor": "@angular-devkit/build-angular:extract-i18n",
  "options": {
    "buildTarget": "your-library-name:build",
    "outputPath": "./i18n",
    "format": "xlf" // 可指定xlf、xliff2等格式
  }
}

执行以下命令提取库的翻译：

nx extract-i18n your-library-name

执行后会在库目录的i18n文件夹下生成包含所有$localize标记文本的.xlf文件。

3. 库发布后与应用的翻译合并 #

当库以npm包形式发布并附带.xlf文件时，应用需合并自身与库的翻译文件，官方推荐两种方式：

• 使用Angular的xi18n-merge命令：将库的.xlf文件合并到应用主翻译文件中，避免ID冲突。执行示例：

ng xi18n-merge src/locale/messages.xlf node_modules/your-library/i18n/messages.xlf --output src/locale/messages.merged.xlf

（NX环境下可替换为nx xi18n-merge）

• 给库的翻译ID加命名空间前缀：为避免ID冲突，给库内所有$localize的ID添加专属前缀，比如：

return $localize`:@@your-lib-inspection-order:Inspection order`;

应用也可通过加载多个翻译文件的方式实现翻译，但合并方式更便于统一管理。

关键说明 #

Angular的$localize机制完全支持独立库，只是默认的NX/Angular CLI配置更偏向应用场景。通过上述配置，你可以完全控制库内的翻译文本提取、管理和发布流程，符合官方翻译规范。

内容的提问来源于stack exchange，提问作者Jeppe Nielsen