Nx monorepo工作区安装Angular Material遇依赖冲突及模块问题

我在Nx monorepo工作区中同时维护Angular和React项目，计划使用Angular v16版本，但执行npm i @angular/material时触发依赖树解析错误，错误信息如下：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: jua-code@0.0.0
npm ERR! Found: @angular/animations@15.2.9
npm ERR! node_modules/@angular/animations
npm ERR!   @angular/animations@"~15.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/animations@"^16.0.0 || ^17.0.0" from @angular/material@16.1.1
npm ERR! node_modules/@angular/material
npm ERR!   @angular/material@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

当前项目的package.json内容：

{
  "name": "jua-code",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {},
  "private": true,
  "devDependencies": {
    "@angular-devkit/build-angular": "~15.2.0",
    "@angular-devkit/core": "~15.2.0",
    "@angular-devkit/schematics": "~15.2.0",
    "@angular-eslint/eslint-plugin": "~15.0.0",
    "@angular-eslint/eslint-plugin-template": "~15.0.0",
    "@angular-eslint/template-parser": "~15.0.0",
    "@angular/cli": "~15.2.0",
    "@angular/compiler-cli": "~15.2.0",
    "@angular/language-service": "~15.2.0",
    "@babel/preset-react": "^7.14.5",
    "@nrwl/angular": "^16.0.0",
    "@nrwl/react": "^16.0.0",
    "@nx/cypress": "16.0.0",
    "@nx/eslint-plugin": "16.0.0",
    "@nx/jest": "16.0.0",
    "@nx/js": "16.0.0",
    "@nx/linter": "16.0.0",
    "@nx/react": "16.0.0",
    "@nx/web": "16.0.0",
    "@nx/webpack": "16.0.0",
    "@nx/workspace": "^16.0.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "@schematics/angular": "~15.2.0",
    "@svgr/webpack": "^6.1.2",
    "@swc/cli": "~0.1.62",
    "@swc/core": "~1.3.51",
    "@testing-library/react": "14.0.0",
    "@types/jest": "^29.4.0",
    "@types/node": "18.14.2",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "@types/react-router-dom": "5.3.3",
    "@typescript-eslint/eslint-plugin": "^5.58.0",
    "@typescript-eslint/parser": "^5.58.0",
    "babel-jest": "^29.4.1",
    "cypress": "^12.2.0",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.27.5",
    "eslint-plugin-jsx-a11y": "6.7.1",
    "eslint-plugin-react": "7.32.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-preset-angular": "~13.0.0",
    "nx": "16.0.0",
    "nx-cloud": "latest",
    "prettier": "^2.6.2",
    "react-refresh": "^0.10.0",
    "react-test-renderer": "18.2.0",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "~4.9.5",
    "url-loader": "^4.1.1"
  },
  "dependencies": {
    "@angular/animations": "~15.2.0",
    "@angular/common": "~15.2.0",
    "@angular/compiler": "~15.2.0",
    "@angular/core": "~15.2.0",
    "@angular/fire": "^7.5.0",
    "@angular/forms": "~15.2.0",
    "@angular/platform-browser": "~15.2.0",
    "@angular/platform-browser-dynamic": "~15.2.0",
    "@angular/router": "~15.2.0",
    "@swc/helpers": "~0.5.0",
    "blurhash": "^2.0.5",
    "bootstrap": "^5.3.0",
    "bootstrap-icons": "^1.10.5",
    "dotenv": "^16.0.3",
    "firebase": "^9.21.0",
    "framer-motion": "^10.12.16",
    "react": "18.2.0",
    "react-blurhash": "^0.3.0",
    "react-dom": "18.2.0",
    "react-router-dom": "^6.11.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  }
}

核心问题分析 #

项目中Angular核心包版本为15.2.x，但安装的@angular/material@16.1.1要求Angular版本必须是^16.0.0 || ^17.0.0，直接导致依赖冲突。同时Nx版本为16.0.0，与Angular15不匹配，也会引发额外问题。

解决步骤 #

1. 升级所有Angular核心包到16.x版本 #

执行Nx迁移命令统一升级Angular依赖：

npx nx migrate @angular/core@16

或手动修改package.json中所有Angular相关包的版本为~16.2.0（稳定版），包括：

• @angular/animations、@angular/common等生产依赖
• @angular/cli、@angular-devkit/build-angular等开发依赖

2. 清理并重新安装依赖 #

修改版本后执行：

rm -rf node_modules package-lock.json
npm install

3. 安装匹配版本的Angular Material #

Angular核心包升级完成后，安装对应版本的Material：

npm install @angular/material@16

或直接使用Nx schematics命令自动完成安装和配置（无需手动先装包）：

npx nx g @angular/material:ng-add --project=my-project-name

4. 解决cannot find module adapter/compat错误 #

该错误通常因@angular/fire版本与Angular16不兼容导致，升级到适配版本：

npm install @angular/fire@7.6.1

同时将firebase版本升级到^9.23.0以上。

验证安装 #

执行以下命令检查依赖树是否正常：

npm ls @angular/core @angular/material

确认两个包版本一致且无冲突。

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