Angular v15与@ng-bootstrap/ng-bootstrap的NPM对等依赖冲突排查

问题背景 #

我在使用NPM时遇到了Angular v15与@ng-bootstrap/ng-bootstrap的对等依赖冲突问题，我认为ng-bootstrap 14.x.x要求@angular/*版本为^15.0.0，而我的@angular/*版本是^15.2.x，二者应该兼容，想请教为何会出现这个问题？

根package.json依赖 #

"dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/cdk": "^15.2.9",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/material": "^15.2.9",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "@ng-select/ng-select": "^10.0.4",
    "@ng-bootstrap/ng-bootstrap": "^14.0.0",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.3",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.8.2",
    "pdfkit": "^0.14.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  }

@ng-bootstrap/ng-bootstrap对等依赖 #

"peerDependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/localize": "^15.0.0",
    "@popperjs/core": "^2.11.6",
    "rxjs": "^6.5.3 || ^7.4.0"
  }

报错信息 #

Could not resolve dependency:
npm ERR! @ng-bootstrap/ng-bootstrap@"^14.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/core@15.2.10
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"15.2.10" from @angular/forms@15.2.10
npm ERR!   node_modules/@angular/forms
npm ERR!     @angular/forms@"^15.2.0" from the root project
npm ERR!     peer @angular/forms@"^15.0.0" from @ng-bootstrap/ng-bootstrap@14.2.0
npm ERR!     node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!       @ng-bootstrap/ng-bootstrap@"^14.0.0" from the root project

问题原因与解决办法 #

核心原因 #

冲突本质不是^15.0.0和15.2.x不兼容——^15.0.0本身允许15.x系列所有小版本，包括15.2.x。真正问题在于：

1. 根项目中@angular/forms指定版本为^15.2.0，npm会自动拉取该范围下的最新版（15.2.10），而@angular/forms@15.2.10对@angular/core的依赖是精确的15.2.10，而非范围版本。
2. npm v7及以上版本对等依赖检查更严格，解析@ng-bootstrap/ng-bootstrap@14.2.0的依赖时，会因@angular/core被@angular/forms锁定为精确版本，误判为冲突。
3. 根项目缺失@angular/localize依赖，该包是@ng-bootstrap/ng-bootstrap@14.x明确要求的对等依赖，也会加剧解析冲突。

解决步骤 #

1. 安装缺失的@angular/localize

   npm install @angular/localize@^15.2.0
   

2. 统一Angular包版本
   将所有@angular/*包的版本锁定为精确的15.2.10（或你需要的具体小版本），避免npm自动拉取不同小版本，修改根package.json中的对应依赖：

   "@angular/animations": "15.2.10",
   "@angular/common": "15.2.10",
   "@angular/compiler": "15.2.10",
   "@angular/core": "15.2.10",
   "@angular/forms": "15.2.10",
   "@angular/platform-browser": "15.2.10",
   "@angular/platform-browser-dynamic": "15.2.10",
   "@angular/router": "15.2.10"
   

3. 清理并重新安装依赖

   rm -rf node_modules package-lock.json
   npm install
   

4. 若仍有问题，绕过严格对等依赖检查
   确认版本兼容的前提下，可使用以下命令暂时绕过检查：

   npm install --legacy-peer-deps
   

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