Angular 12项目ng serve命令突然失效求助

问题场景 #

• Angular版本：12.2.12
• 执行ng serve --live-reload=false时，浏览器应用包生成成功后抛出错误，错误栈指向memory-fs的pathToArray方法及webpack的CleanPlugin：

  × ｢wdm｣: Error: invalid argument
      at pathToArray (app_path\node_modules\memory-fs\lib\MemoryFileSystem.js:44:10)
      at MemoryFileSystem.readdirSync (app_path\node_modules\memory-fs\lib\MemoryFileSystem.js:122:13)
      at MemoryFileSystem.<computed> [as readdir] (app_path\node_modules\memory-fs\lib\MemoryFileSystem.js:279:34)
      at app_path\node_modules\webpack\lib\CleanPlugin.js:65:7     
      at symbolIterator (app_path\node_modules\neo-async\async.js:3482:9)
      at timesSync (app_path\node_modules\neo-async\async.js:2297:7)
      at Object.eachLimit (app_path\node_modules\neo-async\async.js:3463:5)
      at getDiffToFs (app_path\node_modules\webpack\lib\CleanPlugin.js:61:11)
      at app_path\node_modules\webpack\lib\CleanPlugin.js:352:6    
      at Hook.eval [as callAsync] (eval at create (app_path\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:12:1)
  

• 仅修改过angular.json中build/outputPath的值（已改回原值），无其他代码或配置变更
• ng build命令可正常执行

可能原因 #

1. live-reload关闭后的文件系统逻辑冲突：开启live-reload时，dev server的内存文件系统处理逻辑与关闭时不同，CleanPlugin在无热重载场景下尝试清理不存在的路径，或路径格式不符合memory-fs的解析规则
2. 配置缓存残留：即使改回outputPath原值，Angular或webpack的缓存中仍残留错误的路径配置，导致CleanPlugin读取到无效参数
3. 依赖版本不兼容：项目中memory-fs版本与Angular 12对应的webpack版本不匹配，引发路径解析异常

解决方案 #

• 清理缓存：
  清除Angular和webpack的缓存，避免残留配置干扰：

  ng cache clean
  # Linux/macOS
  rm -rf node_modules/.cache
  # Windows
  rmdir /s/q node_modules\.cache
  

• 禁止清理输出目录：
  执行命令时添加--no-delete-output-path参数，跳过CleanPlugin的清理逻辑：

  ng serve --live-reload=false --no-delete-output-path
  

• 重新安装依赖：
  删除依赖目录和锁文件，重新安装确保版本兼容：

  rm -rf node_modules package-lock.json
  npm install
  

• 检查outputPath格式：
  确保angular.json中build/outputPath为相对路径，无特殊字符或绝对路径：

  "build": {
    "options": {
      "outputPath": "dist/your-project-name",
      // 其他配置...
    }
  }
  

• 临时禁用CleanPlugin（排查用）：
  在angular.json的serve配置中添加webpack配置，临时跳过CleanPlugin：

  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-project-name:build",
      "liveReload": false,
      "webpackConfig": {
        "plugins": [() => {}]
      }
    }
  }
  

  注：此为临时排查方案，生产环境请勿使用

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