Adding bootstrap to angular 12.1.4 - unable to resolve dependency tree

Question

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/[email protected] 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: [email protected]
npm ERR! Found: @angular/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/localize
npm ERR!   peer @angular/localize@"^12.0.0" from @ng-bootstrap/[email protected]
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/[email protected]

I uninstalled and re-installed node.js as well, version 14.17.4

npm uninstall --save-dev @angular/cli
npm install --save-dev @angular/[email protected]

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/[email protected] 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: [email protected]
npm ERR! Found: @angular/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/localize
npm ERR!   peer @angular/localize@"^12.0.0" from @ng-bootstrap/[email protected]
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!

Answer 1

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 :)