Install ngBootstrap error: Could not resolve dependency

Viewed 3084

I want to install ng-Bootstrap and use the command ng add @ng-bootstrap/ng-bootstrap@11.0.0-beta.2 to get the latest beta version compatible with bootstrap 5 and angular 12.

But when running this command, those error messages pop up in the console:

ℹ Using package manager: npm
✔ Package information loaded.
 
The package @ng-bootstrap/ng-bootstrap@11.0.0-beta.2 will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: simplefileshare@0.0.0
npm ERR! Found: @angular/core@12.2.7
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.2.7" from @angular/animations@12.2.7
npm ERR!   node_modules/@angular/animations
npm ERR!     peerOptional @angular/animations@"12.2.7" from @angular/platform-browser@12.2.7
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"12.2.7" from @angular/forms@12.2.7
npm ERR!       node_modules/@angular/forms
npm ERR!         @angular/forms@"~12.2.0" from the root project
npm ERR!       3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!     @angular/animations@"~12.2.0" from the root project
npm ERR!   peer @angular/core@"12.2.7" from @angular/common@12.2.7
npm ERR!   node_modules/@angular/common
npm ERR!     peer @angular/common@"12.2.7" from @angular/forms@12.2.7
npm ERR!     node_modules/@angular/forms
npm ERR!       @angular/forms@"~12.2.0" from the root project
npm ERR!     peer @angular/common@"12.2.7" from @angular/platform-browser@12.2.7
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"12.2.7" from @angular/forms@12.2.7
npm ERR!       node_modules/@angular/forms
npm ERR!         @angular/forms@"~12.2.0" from the root project
npm ERR!       3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!     3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!   5 more (@angular/forms, @angular/platform-browser, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! @ng-bootstrap/ng-bootstrap@"11.0.0-beta.2" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/core@12.2.8
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.2.8" from @angular/forms@12.2.8
npm ERR!   node_modules/@angular/forms
npm ERR!     @angular/forms@"~12.2.0" from the root project
npm ERR!     peer @angular/forms@"^12.0.0" from @ng-bootstrap/ng-bootstrap@11.0.0-beta.2
npm ERR!     node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!       @ng-bootstrap/ng-bootstrap@"11.0.0-beta.2" 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.
npm ERR! 
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-10-04T08_36_31_463Z-debug.log
✖ Package install failed, see above.

What do I miss here? I did install bootstrap 5 with npm and added it to the angular.json. Is there something else I need to do?

Edit:

Those are all my dependencies:

"dependencies": {
    "-": "^0.0.1",
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "@popperjs/core": "^2.10.1",
    "bootstrap": "^5.0.0-beta3",
    "rxjs": "~6.6.0",
    "save": "^2.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  }
2 Answers

I had the same issue. This looks like the dependencies in the ng-bootstrap package are somewhat incorrect, as they do not allow Angular > 12.0.x.

What worked for me:

npm update
npm install --save --legacy-peer-deps @ng-bootstrap/ng-bootstrap
ng add @ng-bootstrap/ng-bootstrap

This will ensure all dependencies are up to date before forcing the installation of the package. Once the package is installed, we still run the schematic to ensure all app files are correctly patched.

try with

npm install --legacy-peer-deps

then try to run

ng add @ng-bootstrap/ng-bootstrap@11.0.0-beta.2
Related