Angular项目执行ng serve时出现Error: Maximum call stack size exceeded错误

环境信息 #

• Node版本：v14.17.5
• NPM版本：v6.14.14

项目依赖配置 #

"dependencies": {
    "@angular-material-components/datetime-picker": "^5.1.0",
    "@angular/animations": "^12.2.9",
    "@angular/cdk": "^12.2.9",
    "@angular/common": "^12.2.9",
    "@angular/compiler": "^12.2.9",
    "@angular/core": "^12.2.9",
    "@angular/forms": "^12.2.9",
    "@angular/http": "^7.2.15",
    "@angular/material": "^11.2.9",
    "@angular/platform-browser": "^12.2.9",
    "@angular/platform-browser-dynamic": "^12.2.9",
    "@angular/platform-server": "^12.2.9",
    "@angular/router": "^12.2.9",
    "@ngui/datetime-picker": "^0.16.2",
    "@types/moment": "^2.13.0",
    "angular-ng-autocomplete": "^2.0.4",
    "angular2-datatable": "^0.6.0",
    "bootstrap": "^4.3.1",
    "core-js": "^3.1.3",
    "exceljs": "^4.2.1",
    "faker": "^5.5.3",
    "file-saver": "^2.0.5",
    "jquery": "^3.4.1",
    "jspdf": "^2.3.1",
    "jspdf-autotable": "^3.5.14",
    "material-tooltip": "^1.0.1",
    "ngx-mask": "^11.1.5",
    "ngx-smart-popover": "^1.4.0",
    "rimraf": "^5.0.1",
    "rxjs": "^6.5.0",
    "rxjs-compat": "^6.5.2",
    "symbol-observable": "^1.2.0",
    "tslib": "^1.14.1",
    "typescript": "~4.3.5",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1100.1",
    "@angular/cli": "^12.2.9",
    "@angular/compiler-cli": "^12.2.9",
    "@angular/language-service": "^12.2.9",
    "@types/jasmine": "^3.6.2",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "html-webpack-plugin": "^4.5.1",
    "jasmine-core": "^3.6.0",
    "jasmine-spec-reporter": "^6.0.0",
    "karma": "^5.2.3",
    "karma-chrome-launcher": "^3.1.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^1.4.3",
    "karma-jasmine": "^4.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "^7.0.0",
    "rxjs-tslint": "^0.1.8",
    "ts-node": "~4.1.0",
    "tslint": "^6.1.3",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.3.1",
    "webpack-dev-middleware": "^4.0.4",
    "webpack-dev-server": "^3.11.2"
  }

已尝试的无效操作 #

• 删除node_modules、package-lock.json文件
• 清理npm缓存并重新安装依赖

解决方案建议 #

1. 统一Angular核心与Material版本 #

Angular Material必须与Angular核心版本严格匹配，当前项目Angular为12.2.9，但Material为11.2.9，版本不兼容是核心问题之一：

# 卸载旧版本Material
npm uninstall @angular/material
# 安装匹配版本
npm install @angular/material@12.2.9

同时@angular/http是Angular 7的弃用包，Angular 12已改用@angular/common/http的HttpClient服务，建议卸载并替换：

npm uninstall @angular/http

之后修改项目中相关请求代码，切换为HttpClient实现。

2. 升级Zone.js版本 #

Angular 12推荐使用zone.js@~0.11.4，当前版本~0.10.2可能存在兼容性问题：

npm install zone.js@~0.11.4

3. 排查循环依赖 #

最大调用栈溢出常由代码循环依赖导致：

• 执行ng build --stats-json生成打包分析文件，借助webpack-bundle-analyzer工具查看依赖关系
• 手动检查组件、服务之间是否存在互相导入的情况（如组件A导入服务B，服务B又导入组件A）

4. 升级第三方组件版本 #

部分第三方组件版本与Angular 12不兼容，例如ngx-mask@11.1.5，建议升级到适配版本：

npm install ngx-mask@12.0.0

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