Angular 14升级至15后出现$localize运行时错误求助

问题描述 #

升级Angular应用从14.0.4到15.1.3后，编译无报错但运行时触发以下错误：

Uncaught Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global $localize() function that needs to be loaded.
Please run ng add @angular/localize from the Angular CLI.
(For non-CLI projects, add import '@angular/localize/init'; to your polyfills.ts file.
For server-side rendering applications add the import to your main.server.ts file.)

此前已完成i18n配置，Angular 14及更早版本运行正常；重新执行ng add @angular/localize仅在tsconfig的types数组中添加了@angular/localize，问题仍未解决。

应用中$localize的使用场景：

• 组件内直接使用：

  private readonly onLabel = $localize`:@@common_onLabel:`;
  

• 共享代码中模块加载时执行：

  export const i18nD = $localize`:@@components_timeDisplay_shortDaysFormat:` as 'd';
  

排查思路与解决方案 #

1. 调整@angular/localize/init的导入顺序 #

共享代码中的$localize调用会在模块加载阶段执行，必须确保localize初始化代码在这些代码之前加载：

• 将import '@angular/localize/init';移至main.ts的最顶部（优先于任何模块导入、zone.js导入），确保全局$localize函数提前注册。
• 若为SSR应用，同步在main.server.ts的最顶部添加该导入。

2. 检查依赖版本一致性 #

确认@angular/localize版本与Angular核心包（@angular/core、@angular/cli等）版本完全一致（15.1.3）：

• 查看package.json中的版本号，若不一致，执行命令更新：

  npm install @angular/localize@15.1.3 --save
  

3. 完善tsconfig配置 #

• 检查tsconfig.app.json（而非仅根tsconfig.json）的compilerOptions.types数组，确保包含"@angular/localize"：

  {
    "compilerOptions": {
      "types": ["@angular/localize"]
    }
  }
  

• 若项目使用了多个tsconfig文件（如tsconfig.spec.json），确保相关配置同步。

4. 清理缓存并重新构建 #

缓存可能导致旧代码残留，执行以下步骤：

1. 删除node_modules和锁文件：

   rm -rf node_modules package-lock.json
   

2. 重新安装依赖：

   npm install
   

3. 清理Angular缓存：

   ng cache clean
   

4. 重新构建项目：

   ng build
   

5. 排查第三方依赖的i18n冲突 #

部分第三方依赖可能未适配Angular 15的i18n机制，可临时移除可疑依赖测试，或查看其官方文档确认Angular 15适配说明。

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