Angular 6升级至16后启动报JavaScript堆内存不足错误求助

问题背景 #

项目从Angular 6升级至Angular 16后，Windows环境（40GB内存）下用Angular CLI 16启动时触发堆内存溢出：

⠏ Generating browser application bundles (phase: sealing)...
<--- Last few GCs --->

[32040:0496B8F8] 25141 ms: Mark-sweep (reduce) 688.7 (790.4) -> 688.6 (748.6) MB, 424.9 / 0.1 ms (average mu = 0.511, current mu = 0.002) last resort GC in old space requested
[32040:0496B8F8] 25548 ms: Mark-sweep (reduce) 688.6 (748.6) -> 688.7 (740.9) MB, 406.3 / 0.0 ms (average mu = 0.335, current mu = 0.000) last resort GC in old space requested
<--- JS stacktrace --->

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

已尝试设置NODE_OPTIONS=--max-old-space-size=4096，问题未解决。项目package.json如下：

{
  "name": "angular-16pro",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --configuration production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.2.12",
    "@angular/cdk": "^11.2.3",
    "@angular/common": "^16.2.12",
    "@angular/compiler": "^16.2.12",
    "@angular/core": "^16.2.12",
    "@angular/forms": "^16.2.12",
    "@angular/http": "^5.2.11",
    "@angular/localize": "^16.2.12",
    "@angular/material": "^16.2.13",
    "@angular/platform-browser": "^16.2.12",
    "@angular/platform-browser-dynamic": "^16.2.12",
    "@angular/router": "^16.2.12",
    "@circlon/angular-tree-component": "^10.0.4",
    "@ng-bootstrap/ng-bootstrap": "^5.3.1",
    "@ng-select/ng-select": "^1.5.2",
    "@ngx-pwa/local-storage": "^6.0.0",
    "angular-2-dropdown-multiselect": "^1.8.0",
    "angular-chosen-localytics": "^1.8.0",
    "angular-local-storage": "^0.7.1",
    "angular-localstorage": "^1.1.5",
    "angular-tree-component": "^7.0.2-beta1",
    "angular-webstorage-service": "^1.0.2",
    "angular2-multiselect-dropdown": "^2.9.0",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.7",
    "export-to-csv": "^0.2.1",
    "file-saver": "^2.0.5",
    "moment": "^2.22.2",
    "ng-lz-string": "^1.5.3",
    "ng-multiselect-dropdown": "^0.3.9",
    "ng-pick-datetime": "^5.2.6",
    "ng2-ion-range-slider": "^2.0.0",
    "ng2-nouislider": "^1.8.3",
    "ng5-slider": "^1.2.6",
    "ngx-csv": "^0.3.2",
    "ngx-daterangepicker-material": "^2.4.2",
    "ngx-pagination": "^3.2.0",
    "nouislider": "^15.7.1",
    "raw-loader": "^4.0.2",
    "rxjs": "^6.5.4",
    "xlsx": "^0.17.5",
    "zone.js": "~0.13.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.13",
    "@angular/cli": "^16.2.13",
    "@angular/compiler-cli": "^16.2.12",
    "@angular/language-service": "^16.2.12",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ngx-typeahead": "^0.2.1",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "^4.9.3"
  }
}

修复步骤 #

1. 解决依赖版本冲突与冗余 #

package.json中大量依赖版本不兼容或重复，是内存溢出的核心原因之一：

• @angular/cdk版本11.2.3与Angular 16不兼容，升级至^16.2.13（与@angular/material版本对齐）
• @angular/http是Angular 5弃用包，替换为@angular/common/http并删除旧包
• 移除重复的本地存储包：保留@ngx-pwa/local-storage并升级至Angular 16兼容版本（^16.x），删除angular-local-storage、angular-localstorage、angular-webstorage-service
• 升级UI组件至Angular 16兼容版本：如@ng-select/ng-select升级至^16.x，angular2-multiselect-dropdown、ng-multiselect-dropdown替换为维护中的新版本或同类兼容组件
• rxjs升级至^7.8.1（Angular 16要求rxjs 7.x）
• core-js升级至^3.30.2

2. 直接在启动脚本中指定更大内存 #

绕过环境变量生效问题，修改package.json的start脚本：

"start": "node --max-old-space-size=16384 ./node_modules/@angular/cli/bin/ng serve"

（40GB内存可设置为16384或更高，根据实际情况调整）

3. 启用开发模式AOT编译 #

在angular.json中开启开发模式的AOT与构建优化，减少编译时内存占用：

"projects": {
  "angular-16pro": {
    "architect": {
      "build": {
        "configurations": {
          "development": {
            "aot": true,
            "buildOptimizer": true,
            "optimization": false,
            "sourceMap": true
          }
        }
      }
    }
  }
}

4. 彻底清理依赖缓存 #

执行以下命令重置依赖：
Windows系统：

rd /s /q node_modules
del package-lock.json
npm cache clean --force
npm install

5. 检查TypeScript配置 #

确保tsconfig.json的target设置为ES2020或更高，避免不必要的编译降级，减少编译负载。

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