Angular 17构建失败：Maximum call stack size exceeded问题求助

报错详情 #

√ Browser application bundle generation complete.

Initial chunk files   | Names         |  Raw size
styles.css, styles.js | styles        | 531.96 kB |
scripts.js            | scripts       | 282.56 kB |
polyfills.js          | polyfills     | 228.53 kB |
vendor.js             | vendor        | 227.83 kB |
runtime.js            | runtime       |   6.52 kB |
main.js               | main          | 876 bytes |

                      | Initial total |   1.25 MB

Build at: 2024-05-16T10:20:58.313Z - Hash: 1f386b80c55bca7b - Time: 42309ms

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Maximum call stack size exceeded

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Maximum call stack size exceeded



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

问题原因分析 #

该报错是Ivy编译过程中触发无限递归导致的，常见触发场景包括：

• 项目存在循环引用（模块、组件或服务之间互相导入）
• TypeScript配置与Angular 17的要求不兼容
• 依赖版本不一致（混合不同版本的Angular包或TypeScript）
• 增量构建缓存损坏
• Polyfills文件包含冗余或错误的导入逻辑

解决方案 #

1. 清理缓存与重构依赖

先清理构建缓存并重新安装依赖，排除缓存损坏问题：

ng cache clean
rm -rf node_modules package-lock.json
npm install

2. 排查并修复循环引用

使用工具排查循环依赖：

# TypeScript自带命令检查文件引用关系
tsc --noEmit --listFiles
# 或用madge可视化依赖（需先安装：npm install -g madge）
madge --circular src/

找到循环引用后，重构代码打破循环（比如提取公共模块、调整导入逻辑）。

3. 同步TypeScript与Angular配置

确保tsconfig.json和tsconfig.app.json符合Angular 17的要求：

• tsconfig.json 核心配置示例：

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "declaration": false,
    "downlevelIteration": true,
    "allowSyntheticDefaultImports": true
  },
  "angularCompilerOptions": {
    "enableIvy": true,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

• tsconfig.app.json 确保正确排除测试文件：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "exclude": ["src/test.ts", "src/**/*.spec.ts"]
}

4. 统一Angular依赖版本

检查package.json中所有@angular/*包版本是否为17.x.x，避免混合不同版本：

"dependencies": {
  "@angular/animations": "^17.3.0",
  "@angular/common": "^17.3.0",
  "@angular/compiler": "^17.3.0",
  "@angular/core": "^17.3.0",
  "@angular/forms": "^17.3.0",
  "@angular/platform-browser": "^17.3.0",
  "@angular/platform-browser-dynamic": "^17.3.0",
  "@angular/router": "^17.3.0"
},
"devDependencies": {
  "@angular-devkit/build-angular": "^17.3.0",
  "@angular/cli": "^17.3.0",
  "@angular/compiler-cli": "^17.3.0",
  "typescript": "~5.2.2"
}

版本不一致时，手动修改后重新安装依赖。

5. 临时禁用增量构建

打开angular.json，将build.options.incremental设为false，排除增量缓存影响：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "incremental": false,
          // 其他配置
        }
      }
    }
  }
}

6. 简化Polyfills配置

Angular 17不再需要大量旧版polyfills，检查src/polyfills.ts，移除冗余导入：

// 仅保留必要的polyfill
import 'zone.js'; // Angular必需的zone.js
// 移除core-js旧版导入（如core-js/es6/...）

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