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
First try this commandnpm 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 commandnpm i @ng-bootstrap/ng-bootstrap
First try this commandnpm 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 commandnpm 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 beginningAfter 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
- 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/[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.