angular bootstrap is giving error on angular 13 project

We Are Going To Discuss About angular bootstrap is giving error on angular 13 project. So lets Start this Angular Article.

angular bootstrap is giving error on angular 13 project

How to solve angular bootstrap is giving error on angular 13 project

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

angular bootstrap is giving error on angular 13 project

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

Solution 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

Original Author Am_ai Of This Content

Solution 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/[email protected]

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

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/[email protected] --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> 

                        

Original Author Youssef Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

ittutorial team

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment