Error when installing ng add @ng-bootstrap/ng-bootstrap

Question

There comes an error when installing ng-bootstrap to my Angular-CLI(11.0.4). When

ng add @ng-bootstrap/ng-bootstrap

And my log file

[error] Error: 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@"~11.0.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"11.1.1" from @angular/[email protected]
npm ERR! node_modules/@angular/localize
npm ERR!   peer @angular/localize@"^11.0.0" from @ng-bootstrap/[email protected]
npm ERR!   node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!     @ng-bootstrap/ng-bootstrap@"*" 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 /home/damika/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/damika/.npm/_logs/2021-02-02T16_41_53_338Z-debug.log
Package install failed, see above.
    at Object.installPackage (/home/damika/Desktop/CACHE/School/Front/node_modules/@angular/cli/utilities/install-package.js:40:15)
    at AddCommand.run (/home/damika/Desktop/CACHE/School/Front/node_modules/@angular/cli/commands/add-impl.js:149:31)
    at async AddCommand.validateAndRun (/home/damika/Desktop/CACHE/School/Front/node_modules/@angular/cli/models/command.js:139:28)
    at async Object.runCommand (/home/damika/Desktop/CACHE/School/Front/node_modules/@angular/cli/models/command-runner.js:204:24)
    at async default_1 (/home/damika/Desktop/CACHE/School/Front/node_modules/@angular/cli/lib/cli/index.js:80:31)

Error in terminal

An unhandled exception occurred: 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@"~11.0.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"11.1.1" from @angular/[email protected]
npm ERR! node_modules/@angular/localize
npm ERR!   peer @angular/localize@"^11.0.0" from @ng-bootstrap/[email protected]
npm ERR!   node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!     @ng-bootstrap/ng-bootstrap@"*" 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 /home/damika/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/damika/.npm/_logs/2021-02-02T16_38_17_817Z-debug.log
Package install failed, see above.
See "/tmp/ng-qJ50sG/angular-errors.log" for further details.
(base) damika@damiboy:~/Desktop/CACHE/School/Front/src/app$ ng update
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 28 dependencies.
    Invalid response body while trying to fetch https://registry.npmjs.org/@angular%2fcommon: aborted
    We analyzed your package.json, there are some packages to update:
    
      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cli                       11.0.7 -> 11.1.2         ng update @angular/cli
      @angular/core                      11.0.9 -> 11.1.1         ng update @angular/core
    
    There might be additional packages which don't provide 'ng update' capabilities that are outdated.
    You can update the additional packages by running the update command of your package manager.
(base) damika@damiboy:~/Desktop/CACHE/School/Front/src/app$ ng add @ng-bootstrap/ng-bootstrap 
Installing packages for tooling via npm.
An unhandled exception occurred: 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@"~11.0.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"11.1.1" from @angular/[email protected]
npm ERR! node_modules/@angular/localize
npm ERR!   peer @angular/localize@"^11.0.0" from @ng-bootstrap/[email protected]
npm ERR!   node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!     @ng-bootstrap/ng-bootstrap@"*" 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 /home/damika/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/damika/.npm/_logs/2021-02-02T16_41_53_338Z-debug.log
Package install failed, see above.
See "/tmp/ng-ySkXlt/angular-errors.log" for further details.

Anyone can help me; thanks for the help :)

I just did an upgrade before trying again.. ng update @angular/cli @angular/core — Francis Batista
– Francis Batista, Commented Jan 25, 2023 at 17:00

Hossein Mousavi · Accepted Answer · 2021-02-03 12:33:48Z

59

Try using this

npm config set legacy-peer-deps true

this allows for installing legacy packages

If you are a Linux user. try adding sudo at the beginning of your command

answered Feb 3, 2021 at 12:33

Hossein Mousavi

4,0144 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ronnovič Rigel Toth · Accepted Answer · 2022-03-28 02:54:15Z

17

ng update @angular/cli @angular/core

You just have to update angular, it works for me, but you'll need to commit before, then just do again, it's not the same "npm i" to "ng add" the second has schematics,so that makes easier installation

ng add @ng-bootstrap/ng-bootstrap

edited Mar 28, 2022 at 2:54

answered Mar 26, 2022 at 16:26

Ronnovič Rigel Toth

2013 silver badges8 bronze badges

2 Comments

Dan-codes-frontend Over a year ago

It is possible to run into dirty/not clean repository problems this way, I believe

CJCHRIST777 Over a year ago

Nice! This worked

Raphael Marques · Accepted Answer · 2021-02-02 17:05:47Z

13

Try to use the npm i @ng-bootstrap/ng-bootstrap and it will solve your problem

answered Feb 2, 2021 at 17:05

Raphael Marques

7694 silver badges16 bronze badges

1 Comment

Eliseo Over a year ago

npm i @angular/localize, ng-bootstrap need it

Pasindu Jayasinghe · Accepted Answer · 2022-04-15 04:19:09Z

9

Execute the following command. This was the solution to my problem.

npm i @ng-bootstrap/ng-bootstrap --legacy-peer-deps

answered Apr 15, 2022 at 4:19

Pasindu Jayasinghe

1011 silver badge4 bronze badges

Comments

Suraj Rao · Accepted Answer · 2022-06-23 13:04:52Z

4

Hope this will help someone

npm i  --save @ng-bootstrap/ng-bootstrap --legacy-peer-deps

it solve my problem

edited Jun 23, 2022 at 13:04

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Jun 23, 2022 at 13:01

Soy Diabs

1422 bronze badges

Comments

Muhammad Junaid Khalid · Accepted Answer · 2022-04-11 09:21:33Z

2

Run below commands sequentially to update angular CLI and install ng-bootstrap in your project.

ng update @angular/cli @angular/core

npm install --save @ng-bootstrap/ng-bootstrap

edited Apr 11, 2022 at 9:21

Muhammad Junaid Khalid

1,2224 gold badges24 silver badges43 bronze badges

answered Apr 10, 2022 at 3:07

Abhishek kumar

512 bronze badges

Comments

phil · Accepted Answer · 2022-04-12 10:03:10Z

2

I had this problem with @angular-eslint/schematics recently. I solved it by installing the package with npm, then installing the deps with ng:

npm install @angular-eslint/schematics --legacy-peer-deps
ng add @angular-eslint/schematics

answered Apr 12, 2022 at 10:03

phil

3131 gold badge4 silver badges15 bronze badges

Comments

zeroquaranta · Accepted Answer · 2023-09-26 09:36:20Z

1

I solved most dependencies nightmares issues by doing the following:

npm install
check the name of the package which is causing problems, because of wrong (obsolete) version
npm uninstall --legacy-peer-deps
npm install

This should install the compatible version and the corresponding line in package.json should be update with the right version.

Repeat this for all the packages causing an ERR or a WARN.

If everything goes right at the end you should be able to launch npm install without having any issue.

I followed this while upgrading from Angular 14 to Angular 16 and it worked.

Thomas

answered Sep 26, 2023 at 9:36

zeroquaranta

4127 silver badges20 bronze badges

Comments

André · Accepted Answer · 2023-05-05 13:40:04Z

0

Add this command and your problem will solved:
npm i @ng-bootstrap/ng-bootstrap --legacy-peer-deps

edited May 5, 2023 at 13:40

André

2,06810 gold badges20 silver badges39 bronze badges

answered May 4, 2023 at 6:23

ashish

11 bronze badge

Comments

QuartZ · Accepted Answer · 2023-10-04 09:59:09Z

0

I'm on Angular 16.2.5. What works for me is using npm i bootstrap in the project CLI. Then add the bootstrap CSS to your CSS file by linking it to the bootstrap CSS file.

edited Oct 4, 2023 at 9:59

answered Oct 4, 2023 at 9:52

QuartZ

1643 silver badges12 bronze badges

Comments

David Molina · Accepted Answer · 2024-05-20 23:21:25Z

0

In my case. The solution was following these two steps

ng add @angular/localize
npm i @ng-bootstrap/ng-bootstrap

answered May 20, 2024 at 23:21

David Molina

617 bronze badges

Comments

Rahul · Accepted Answer · 2021-09-16 20:21:16Z

-1

npm install @ng-bootstrap/ng-bootstrap@next , would work just fine

answered Sep 16, 2021 at 20:21

Rahul

11

2 Comments

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Yunnosch Over a year ago

Welcome to Stack Overflow! While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.

Collectives™ on Stack Overflow

Error when installing ng add @ng-bootstrap/ng-bootstrap

12 Answers 12

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related