升级Angular 15后安装ngx-build-plus@15遇Invariant Violation错误求助

可行解决方案 #

• 彻底清理依赖环境后重装

  1. 卸载现有ngx-build-plus：

     npm uninstall ngx-build-plus
     # 或 yarn 命令
     yarn remove ngx-build-plus
     

  2. 清空包管理器缓存：

     npm cache clean --force
     # 或 yarn 命令
     yarn cache clean
     

  3. 删除本地依赖文件夹：

     rm -rf node_modules # Linux/macOS
     # Windows 命令
     rmdir /s /q node_modules
     

  4. 重新安装ngx-build-plus@15：

     npm install ngx-build-plus@15 --save-dev
     # 或 yarn 命令
     yarn add ngx-build-plus@15 --dev
     

• 对齐Angular核心依赖版本
  检查package.json中@angular-devkit/build-angular的版本，确保其与Angular 15的主版本完全一致（例如Angular 15.2.x对应@angular-devkit/build-angular@~15.2.0）。手动指定后重新执行安装：

  {
    "dependencies": {
      // ... 其他依赖
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~15.2.0",
      "ngx-build-plus": "^15.0.0"
    }
  }
  

• 切换包管理器尝试
  不同包管理器的依赖解析逻辑可能导致问题，尝试切换工具：

  1. 删除yarn.lock、package-lock.json和node_modules
  2. 使用另一包管理器执行安装：

     npm install ngx-build-plus@15 --save-dev
     # 或之前用npm现在换yarn
     yarn add ngx-build-plus@15 --dev
     

• 显式指定webpack相关依赖版本
  错误提示指向webpack依赖链，可在package.json中添加兼容Angular 15的webpack系列版本：

  {
    "devDependencies": {
      // ... 其他依赖
      "webpack": "^5.76.0",
      "webpack-dev-server": "^4.11.1",
      "webpack-dev-middleware": "^6.0.1"
    }
  }
  

  添加后执行npm install或yarn install

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