Angular 12运行ng serve报JavaScript堆内存不足错误该如何解决？

报错信息：FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

问题原因 #

Angular 12 相比 8 版本默认启用了更多编译优化能力，编译时内存占用大幅提升，你尝试的第二条命令存在路径拼写错误（node modules应为node_modules），导致内存参数未生效。 #

分步解决方案 #

1. 直接使用修正后的启动命令 #

将内存上限调整到 8G 及以上，根据你的设备配置可适当调高，修正后的命令如下：

node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve

如果设备内存充足，可将8192调整为16384（16G）进一步降低溢出概率。

2. 配置全局 Node 内存参数（永久生效） #

无需每次启动都输入长命令，可通过配置环境变量全局生效：

• Windows 系统：
  • 临时生效：CMD 执行 set NODE_OPTIONS=--max_old_space_size=8192；PowerShell 执行 $env:NODE_OPTIONS="--max_old_space_size=8192"
  • 永久生效：在系统环境变量中新增变量名为NODE_OPTIONS，值为--max_old_space_size=8192，配置完成后重启终端生效
• Mac/Linux 系统：
  • 临时生效：终端执行 export NODE_OPTIONS=--max_old_space_size=8192
  • 永久生效：将上述命令添加到~/.bashrc或~/.zshrc文件中，执行source ~/.bashrc或source ~/.zshrc生效

3. 调整 Angular 开发模式编译配置 #

修改项目根目录下的angular.json文件，关闭开发模式下不必要的优化项，降低内存占用：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "configurations": {
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "aot": false
            }
          }
        },
        "serve": {
          "configurations": {
            "development": {
              "browserTarget": "你的项目名称:build:development"
            }
          },
          "defaultConfiguration": "development"
        }
      }
    }
  }
}

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

旧版本残留的依赖缓存也可能引发内存异常，执行以下命令重置依赖：

# Windows 可手动删除 node_modules、package-lock.json、yarn.lock 文件
rm -rf node_modules package-lock.json yarn.lock
npm cache clean --force
npm install

5. 校验 Node 版本兼容性 #

Angular 12 要求 Node 版本为 12.20.x、14.15.x 或 16.10.x 及以上的 LTS 版本，版本不兼容也可能导致内存占用异常，可使用 nvm 切换适配的 Node 版本。 #

内容的提问来源于stack exchange，提问作者Jay Patel