Angular 14升级至15后构建报错：Found non-callable @@iterator

问题描述 #

升级Angular从14到15后执行构建，出现以下错误：

./angular/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Found non-callable @@iterator

./angular/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Found non-callable @@iterator

✖ Failed to compile.

polyfills.ts和main.ts与默认实现差异极小，官方升级指南未提及需修改这两个文件。

排查与解决方案 #

1. 检查第三方依赖兼容性 #

报错大概率是项目中第三方库与Angular 15不兼容导致，重点排查以下依赖：

• @datx/core：确认其版本是否支持Angular 15，升级到适配Angular 15的最新版本。
• @sentry/angular & @sentry/tracing：确保这两个包的版本支持Angular 15，建议升级到最新稳定版。

2. 清理依赖缓存与重新安装 #

执行以下命令清理缓存并重新安装依赖，避免缓存导致的版本冲突：

# 清理npm缓存并重新安装
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

# Angular CLI缓存清理
ng cache clean

3. 确认Node.js版本符合要求 #

Angular 15要求Node.js版本为 14.20+、16.13+ 或 18.10+，使用以下命令检查当前Node.js版本：

node -v

若版本不符合，升级到上述兼容版本后重新尝试构建。

4. 验证Zone.js版本兼容性 #

Angular 15对Zone.js版本有特定要求，确保package.json中zone.js的版本为兼容版本（如0.12.x及以上），可直接升级：

npm install zone.js@latest --save

5. 排查非默认导入代码 #

临时注释main.ts中非Angular默认的导入和代码（如@datx/core和Sentry初始化代码），重新执行构建：

// 注释掉以下代码测试
// import '@datx/core/disable-mobx';
// import {init} from '@sentry/angular';
// import {Integrations as TracingIntegrations} from '@sentry/tracing';
// ...
// init({...});

若注释后构建正常，说明问题出在被注释的依赖上，针对性升级该依赖即可。

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