Issue
I am trying to install bootstrap in a new angular app but it doesn't work
ng add @ng-bootstrap/ng-bootstrap
I get this error below, what do I need to do to fix this?
The package @ng-bootstrap/ng-bootstrap@10.0.0 will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: how-to-test@0.0.0
npm ERR! Found: @angular/compiler@12.1.5
npm ERR! node_modules/@angular/compiler
npm ERR! @angular/compiler@"~12.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"12.2.0" from @angular/localize@12.2.0
npm ERR! node_modules/@angular/localize
npm ERR! peer @angular/localize@"^12.0.0" from @ng-bootstrap/ng-bootstrap@10.0.0
npm ERR! node_modules/@ng-bootstrap/ng-bootstrap
npm ERR! @ng-bootstrap/ng-bootstrap@"10.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 C:\Users\Andrew\AppData\Local\npm-cache\eresolve-report.txt for a
full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Andrew\AppData\Local\npm-cache\_logs\2021-08-04T19_50_44_840Z-debug.log
✖ Package install failed, see above.
my angular version details are as follows
Angular CLI: 12.1.4
Node: 15.8.0 (Unsupported)
Package Manager: npm 7.20.3
OS: win32 x64
Angular: 12.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1201.4
@angular-devkit/build-angular 12.1.4
@angular-devkit/core 12.1.4
@angular-devkit/schematics 12.1.4
@angular/cli 12.1.4
@schematics/angular 12.1.4
rxjs 6.6.7
typescript 4.3.5
Can anyone help with a good answer? as all of this seems to work one day they doesn't the next.
Update 05/08/2021
I still cant get it working, I tried these steps.
npm uninstall -g @angular/cli
npm install -g @angular/cli@12.0.0
I uninstalled and re-installed node.js as well, version 14.17.4
npm uninstall --save-dev @angular/cli
npm install --save-dev @angular/cli@12.0.0
npm install
running
ng version
give me this:
Angular CLI: 12.2.0
Node: 14.17.4
Package Manager: npm 7.20.3
OS: win32 x64
Angular: 12.0.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1200.5
@angular-devkit/build-angular 12.0.5
@angular-devkit/core 12.0.5
@angular-devkit/schematics 12.2.0
@angular/cli 12.2.0
@schematics/angular 12.2.0
rxjs 6.6.7
typescript 4.2.4
Then again when I run this
ng add @ng-bootstrap/ng-bootstrap
I get a similar issue with the @angular/compiler. This is located in the package-lock.json file. Why does it say 12.0.5 when I installed 12.0.0. (ruddy confusing)?
The package @ng-bootstrap/ng-bootstrap@10.0.0 will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: how-to-test@0.0.0
npm ERR! Found: @angular/compiler@12.0.5
npm ERR! node_modules/@angular/compiler
npm ERR! @angular/compiler@"~12.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"12.2.0" from @angular/localize@12.2.0
npm ERR! node_modules/@angular/localize
npm ERR! peer @angular/localize@"^12.0.0" from @ng-bootstrap/ng-bootstrap@10.0.0
npm ERR! node_modules/@ng-bootstrap/ng-bootstrap
npm ERR! @ng-bootstrap/ng-bootstrap@"10.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!
Solution
First way: Install bootstrap
in your angular 12
app like below. This is only for css
importing.
npm install bootstrap --save
Now you need to import bootstrap css
in style.css
file like this:
@import "~bootstrap/dist/css/bootstrap.css";
Second way: Install bootstrap
with jquery
and popper js
like below and thus you can import bootstrap css
and bootstrap js
function.
npm install bootstrap --save
npm install jquery --save
npm install popper.js --save
After successfully run the above commands import it in angular.json
file like this:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Now you can easily use bootstrap class, css, js as expected :)
Answered By - Salahuddin Ahmed
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.