Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 758
Damika Avatar asked Feb 02 '21 16:02

Damika


People also ask

Does ng bootstrap need bootstrap?

The goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery. It is not necessary and might interfere with ng-bootstrap code.

What is Ng bootstrap ng bootstrap?

ng-bootstrap is a set of components and directives that wrap the latest version of Bootstrap ( v4. 0.0 alpha 6 at the time of this writing). This makes it easy to use Bootstrap in your Angular apps. Angular 4+ is required to use ng-bootstrap.


6 Answers

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

like image 135
Hossein Mousavi Avatar answered Nov 16 '22 02:11

Hossein Mousavi


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

like image 28
Raphael Marques Avatar answered Nov 16 '22 03:11

Raphael Marques


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
like image 28
Ronnovič Rigel Toth Avatar answered Nov 16 '22 03:11

Ronnovič Rigel Toth


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

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

like image 38
Pasindu Jayasinghe Avatar answered Nov 16 '22 04:11

Pasindu Jayasinghe


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

like image 43
Abhishek kumar Avatar answered Nov 16 '22 02:11

Abhishek kumar


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
like image 33
phil Avatar answered Nov 16 '22 02:11

phil