Angular 11迁移至12/13/14后启动本地服务器JS堆内存溢出求助

以下是针对Error [ERR_WORKER_OUT_OF_MEMORY]问题的具体排查和解决步骤：

• 调整Angular CLI构建并行配置
  Angular 12+默认启用了多线程并行构建，资源有限的环境下容易触发内存溢出。修改angular.json中的构建配置，限制并行线程数：

  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "parallel": false,
            "maxWorkers": 1,
            // 保留其他原有配置
          }
        }
      }
    }
  }
  

  可根据本地CPU核心数调整maxWorkers，比如双核机器设为1，四核设为2，避免过度占用内存。

• 清理依赖树并统一Angular版本
  迁移后可能残留旧版本依赖或存在版本冲突，导致构建时额外内存消耗：

  1. 执行npm ls检查依赖树，移除Angular 11遗留的@angular/*旧包或不再使用的第三方依赖
  2. 运行npm dedupe合并重复依赖，减少内存占用
  3. 确保所有@angular/core、@angular/cli等核心包版本完全一致，避免混合版本引发的编译异常

• 确保Node内存参数生效
  直接在npm脚本中传递内存参数，避免Angular CLI子进程无法继承环境变量：
  修改package.json中的start命令：

  "scripts": {
    "start": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve"
  }
  

  可根据实际情况调整内存值（比如8192即8GB），本地内存不足时也可尝试6144（6GB）。

• 排查Sass编译的内存消耗
  即使移除了font-awesome，其他Sass文件的低效写法也可能导致内存暴涨：

  1. 在angular.json的build.options中添加Sass verbose日志：

     "sassOptions": {
       "verbose": true
     }
     

     启动构建后查看日志，定位到编译时消耗内存最多的Sass文件
  2. 简化Sass结构：合并重复的变量、混合宏，减少深层嵌套，避免不必要的@import循环

• 升级Angular CLI到同分支最新补丁版
  当前使用的Angular CLI 12.2.18可能存在已知的内存泄漏问题，升级到该分支的最新补丁版：

  npm install @angular/cli@12.2.x --save-dev
  

  迁移到Angular 13/14时，同样需要确保CLI版本与核心框架版本匹配并更新到最新补丁。

内容的提问来源于stack exchange，提问作者Ravi Nag's