Install ngBootstrap error: Could not resolve dependency

Question

I want to install ng-Bootstrap and use the command ng add @ng-bootstrap/[email protected] 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/[email protected] 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: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.2.7" from @angular/[email protected]
npm ERR!   node_modules/@angular/animations
npm ERR!     peerOptional @angular/animations@"12.2.7" from @angular/[email protected]
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"12.2.7" from @angular/[email protected]
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/[email protected]
npm ERR!   node_modules/@angular/common
npm ERR!     peer @angular/common@"12.2.7" from @angular/[email protected]
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/[email protected]
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"12.2.7" from @angular/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.2.8" from @angular/[email protected]
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/[email protected]
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"
  }

Answer 1

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.

Answer 2

I too had the same issue.

What worked for me: npm update ng add @ng-bootstrap/ng-bootstrap