Angular项目执行ng serve遇Watchpack权限错误及内存溢出求助

1. 限制Watchpack扫描范围（核心解决方向） #

Watchpack会默认向上遍历目录到根节点，误扫系统目录导致权限报错和内存占用飙升。可以通过两种方式限制：

• 自定义Webpack配置：如果项目没启用自定义Webpack，先执行这两条命令开启：

  ng config projects.[你的项目名称].architect.build.builder @angular-builders/custom-webpack:browser
  ng config projects.[你的项目名称].architect.serve.builder @angular-builders/custom-webpack:dev-server
  

  然后在项目根目录新建webpack.config.js，添加忽略规则：

  module.exports = {
    watchOptions: {
      ignored: ['/usr/lib/mysql/**', '/var/cache/**', 'node_modules/**', '/**/.git/**']
    }
  };
  

• 命令行直接指定忽略目录：修改package.json里的serve脚本：

  "scripts": {
    "serve": "ng serve --watch --watch-ignored=\"/usr/lib/mysql/**,/var/cache/**\""
  }
  

  之后执行npm run serve启动项目。

2. 修复项目目录权限 #

确保当前用户拥有项目目录的完整读写权限，避免权限不足问题：

sudo chown -R $USER:$USER /你的项目绝对路径

注意：不要用root用户运行ng serve，root会让Watchpack无差别扫描更多系统目录，加重问题。

3. 临时提升Node内存限制 #

已经触发堆溢出的情况下，临时增加Node的内存分配：

NODE_OPTIONS="--max-old-space-size=8192" ng serve

4. 重置项目依赖 #

可能本地依赖存在隐性损坏，执行以下步骤重置：

rm -rf node_modules package-lock.json
npm install

同时确认@angular/cli版本和项目匹配，执行ng version查看，若版本不一致，安装对应版本：

npm install @angular/cli@12.1.3 --save-dev

5. 确认inotify配置生效 #

虽然你已经设置了fs.inotify.max_user_watches，但可以验证是否生效：

cat /proc/sys/fs/inotify/max_user_watches

如果没生效，临时生效命令：

sudo sysctl -w fs.inotify.max_user_watches=524288

要永久生效，编辑/etc/sysctl.conf，添加fs.inotify.max_user_watches=524288，然后执行sudo sysctl -p。

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