Angular12如何配置非组件类使用$locale并正常提取i18n字符串

首先纠正一处笔误：你提到的$locale实际是Angular i18n提供的**$localize**全局标签模板函数，这个函数本身没有“仅组件类内可用”的限制，ng extract-i18n提取不到非组件类里的标记，基本都是配置或写法不符合静态扫描要求导致的，没有专门的“开启非组件支持”的特殊配置项，按下面的步骤排查即可：

• 第一步：确认$localize全局启用正确
  先执行ng add @angular/localize，该命令会自动在polyfills.ts中添加import '@angular/localize/init'的全局引入，这是$localize能正常工作、能被提取器识别的基础。

  注意：不要在单个模型类文件中单独从@angular/localize导入$localize，这种写法容易被静态提取器漏识别，全局引入后直接裸用$localize即可。

• 第二步：确保$localize写法符合静态分析规则
  i18n提取器是做静态代码扫描的，不会运行业务代码，以下写法会导致识别失败：

  // 错误1：将$localize赋值给变量后再调用
  const translate = $localize;
  const msg = translate`待翻译内容`;
  
  // 错误2：模板内传入动态变量作为待翻译主文本
  const tipText = '待翻译提示';
  const tip = $localize`${tipText}`;
  

  正确写法必须是直接调用$localize，后接静态字符串模板，自定义id、描述等元信息也要直接写在模板内：

  // 普通模型类中可直接正常使用
  export class OrderModel {
    statusPending = $localize`:@@orderStatusPending:订单待支付`;
  }
  

• 第三步：检查提取路径配置是否覆盖模型类文件
  打开项目根目录的angular.json，找到对应项目下的extract-i18n配置节点，检查include字段的路径规则：如果之前自定义过规则只包含*.component.ts、*.component.html类的组件文件，需要把你存放模型类的路径补充进去，通用配置可以直接覆盖所有业务TS、HTML文件：

  "extract-i18n": {
    "builder": "@angular-devkit/build-angular:extract-i18n",
    "options": {
      "browserTarget": "your-project-name:build",
      "include": [
        "src/app/**/*.ts",
        "src/app/**/*.html"
      ]
    }
  }
  

• 第四步：配置调整后可执行带详细日志的提取命令验证：ng extract-i18n --verbose，从日志中可以确认提取器是否扫描到了你的模型类文件，是否存在解析报错。

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