NX Monorepo 14.3.6 组件内$localize翻译无法提取问题问询

• 执行npx create-nx-workspace@latest安装版本号为14.3.6的NX Monorepo，完成后执行npm install @angular/localize添加Angular本地化依赖。此时模板中添加的i18n属性（例如<title i18n>Title</title>）可正常识别，对应翻译键能正常提取到messages.xlf文件中。
• 异常现象：在组件TS代码中使用$localize标记翻译内容时，执行流程无任何报错，但运行ng extract-i18n test-app命令生成的messages.xlf为无翻译条目的空文件。
• 对照验证：同版本原生Angular应用中$localize提取功能正常，可确认问题仅存在于NX环境侧。

复现代码 #

组件TS代码示例：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = $localize`my-app`;
}

生成的空白messages.xlf内容：

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en-US" datatype="plaintext" original="ng2.template">
    <body>
    </body>
  </file>
</xliff>

核心疑问 #

NX Monorepo是否支持在TS代码中使用$localize？是否为project.json缺少相关配置导致该问题？

NX Monorepo完全支持TS代码中$localize标记的提取，该问题是NX 14.x版本默认配置裁剪导致：默认配置下extract-i18n流程仅扫描模板文件中的i18n属性，未开启TS文件内$localize标记的扫描规则，手动补全配置即可修复：

1. 打开对应应用目录下的project.json文件，定位到extract-i18n对应的target配置段
2. 在配置的options节点下新增"extractTs": true参数，参考配置如下：

{
  "targets": {
    // 其余target配置保持不变
    "extract-i18n": {
      "executor": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "test-app:build",
        "outputPath": "apps/test-app/src/locale",
        "extractTs": true
      }
    }
  }
}

3. 保存配置后重新执行ng extract-i18n test-app命令，即可正常提取TS代码中的$localize翻译条目。

补充说明：NX 15及以上版本已默认开启extractTs配置，无需手动添加。如果高版本仍出现提取失败问题，检查项目根目录tsconfig.json的compilerOptions.types数组中是否包含@angular/localize类型声明，缺失时手动补全即可。

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