angular bootstrap is giving error on angular 13 project

Question

I am trying to install Angular bootstrap in my Angular 13 project like this:

ng add @ng-bootstrap/ng-bootstrap

But I get an error as soon as I press Y on this statement

The package @ng-bootstrap/[email protected] will be installed and executed. Would you like to proceed? Yes

Error is below:

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: @angular/[email protected] npm ERR! node_modules/@angular/compiler npm ERR! @angular/compiler@"~13.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @angular/compiler@"13.1.3" from @angular/[email protected] npm ERR! node_modules/@angular/localize npm ERR! peer @angular/localize@"^13.0.0" from @ng-bootstrap/[email protected] npm ERR! node_modules/@ng-bootstrap/ng-bootstrap npm ERR! @ng-bootstrap/ng-bootstrap@"11.0.0" 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 /Users/asifhameed/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/asifhameed/.npm/_logs/2022-01-25T04_11_31_152Z-debug.log ✖ Package install failed, see above.

Here are the dependencies and devdependencies from my project.json file.

"dependencies": {
    "@angular/animations": "~13.0.0",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.4",
    "@angular/cli": "~13.0.4",
    "@angular/compiler-cli": "~13.0.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.4.3"
  }

Answer 1

First try this command

npm config set legacy-peer-deps true 

the above command allows to install legacy packages as stated in the error also

if you're a Linux user try using sudo in the beginning

After this command then run the following command

npm i @ng-bootstrap/ng-bootstrap

Answer 2

I wanted to use ngboostrap with boostrap v5.1.3. I finally managed to do it but by using the non stable version version as recommended by ngbootstrap website: https://ng-bootstrap.github.io/#/home

Beta support for Bootstrap 5 is available with 12.0.0-beta.X You can install it via the npm install @ng-bootstrap/ng-bootstrap@bootstrap5

So how i fixed such an issue.

First, let's proceed with some cleanup:

• remove the current bootstrap version, remove the node_modules folder, run a cleanup of the npm cache and reinstall all the node modules:

Commands:

npm uninstall bootstrap
npm cache clean --force
npm install

• Proceed now with the manual installation recommended by ngbootstrap: https://ng-bootstrap.github.io/#/getting-started

Install bootstrap (this will install the last version):

npm install bootstrap

In case you use CSS, put the css file reference in the angular.json file:

"yourApp": {   "architect": {
    "build": {
      "options": {
        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ]
      }
    }   } }

• If you're using Angular ≥ 9.0.0 and ng-bootstrap ≥ 6.0.0, you also have to install the @angular/localize polyfill:

Command

ng add @angular/localize

And finally the install the ngbootstrap beta version by using legacy-peer-deps option in order to bypass peerDependency auto-installation -> it tells npm to ignore peer deps and proceed with the installation in all cases.

npm install @ng-bootstrap/ng-bootstrap@bootstrap5 --legacy-peer-deps

Your package.json file should look like

...
"@ng-bootstrap/ng-bootstrap": "^12.0.0-beta.4",
"bootstrap": "^5.1.3",
...

In the app module you need to import the NgbModule:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  imports: [... NgbModule ...

Now if you serve your app (ng serve), you will get this error in case you have not popperjs/core module installed ! This goes against what is said in the official documentation of ngbootstrap as they say (...Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code.) Error:

./node_modules/@ng-bootstrap/ng-bootstrap/fesm2020/ng-bootstrap.mjs:9:0-88 - Error: Module not found: Error: Can't resolve '@popperjs/core' in '/Users/youssef/GitHub/trainings/oshop/node_modules/@ng-bootstrap/ng-bootstrap/fesm2020'

Error: node_modules/@ng-bootstrap/ng-bootstrap/util/positioning.d.ts:1:55 - error TS2307: Cannot find module '@popperjs/core' or its corresponding type declarations.

1 import { Placement as PopperPlacement, Options } from '@popperjs/core';
              

So to fix that, you need to install the popperjs/core:

npm i @popperjs/core

I believe ngbootstrap team needs to consider this issue for the next version.

Now have fun:

  <ul
    class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"
  >
    <li><a href="#" class="nav-link px-2 text-secondary" [routerLink]="['/']" >Home</a></li>
    <li><a href="#" class="nav-link px-2" [routerLink]="['/shopping-cart']" >Shopping Cart</a></li>
    <li ngbDropdown class="nav-item dropdown">
        <a ngbDropdownToggle class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
        <ul ngbDropdownMenu class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
    </li>
  </ul>