CODEWITHSUNDEEP
node.jsangularnpmbootstrap-4node-modules
Isaac Lyne
Isaac Lyne

Reputation: 300

Why cant i install Angular Bootstrap?

Angular CLI: 14.2.3
Node: 16.15.1
Package Manager: npm 8.12.1 
OS: darwin x64

I am installing angular bootstrap (trying to) getting the following error from NPM

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"14.2.2" from @angular/[email protected]
npm ERR!   node_modules/@angular/animations
npm ERR!     peer @angular/animations@"^14.0.0 || ^15.0.0" from @angular/[email protected]
npm ERR!     node_modules/@angular/material
npm ERR!       @angular/material@"^14.2.2" from the root project
npm ERR!     peerOptional @angular/animations@"14.2.2" from @angular/[email protected]
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"^12.0.0 || ^13.0.0 || ^14.0.0" from @angular/[email protected]
npm ERR!       node_modules/@angular/fire
npm ERR!         @angular/fire@"^7.4.1" from the root project
npm ERR!       6 more (@angular/forms, @angular/material, ...)
npm ERR!     2 more (@swimlane/ngx-charts, the root project)
npm ERR!   peer @angular/core@"^14.0.0 || ^15.0.0" from @angular/[email protected]
npm ERR!   node_modules/@angular/cdk
npm ERR!     peer @angular/cdk@"14.2.2" from @angular/[email protected]
npm ERR!     node_modules/@angular/material
npm ERR!       @angular/material@"^14.2.2" from the root project
npm ERR!     peer @angular/cdk@">=12.0.0" from @swimlane/[email protected]
npm ERR!     node_modules/@swimlane/ngx-charts
npm ERR!       @swimlane/ngx-charts@"^20.1.0" from the root project
npm ERR!     2 more (ng2-charts, the root project)
npm ERR!   16 more (@angular/common, @angular/compiler, @angular/fire, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! @ng-bootstrap/ng-bootstrap@"13.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"14.2.6" from @angular/[email protected]
npm ERR!   node_modules/@angular/forms
npm ERR!     @angular/forms@"^14.2.0" from the root project
npm ERR!     peer @angular/forms@"^14.1.0" from @ng-bootstrap/[email protected]
npm ERR!     node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!       @ng-bootstrap/ng-bootstrap@"13.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 errors and how these are stated is not my strong suit of understanding, would love if someone could help me out and point me in the right direction here.

Thanks!

Heres my package.json file aswell, im assuming its something in there by the way the error is formed/stated.

{
  "name": "tractapp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/cdk": "^14.2.2",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/fire": "^7.4.1",
    "@angular/forms": "^14.2.0",
    "@angular/material": "^14.2.2",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "@fortawesome/angular-fontawesome": "^0.11.1",
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@stripe/stripe-js": "^1.37.0",
    "@sweetalert2/ngx-sweetalert2": "^12.0.1",
    "@swimlane/ngx-charts": "^20.1.0",
    "aos": "^2.3.4",
    "apexcharts": "^3.35.5",
    "chart.js": "^3.9.1",
    "ng-apexcharts": "^1.7.1",
    "ng2-charts": "^4.0.1",
    "ngx-print": "^1.2.1",
    "ngx-stripe": "^14.1.0",
    "rxjs": "~7.5.0",
    "stripe": "^10.11.0",
    "sweetalert2": "^11.5.1",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.3",
    "@angular/cli": "~14.2.3",
    "@angular/compiler-cli": "^14.2.0",
    "@types/d3": "^7.4.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }
}

Upvotes: 1

Views: 1243

Answers (4)

korbyvk
korbyvk

Reputation: 11

npm update was perfect to me :D

Upvotes: 1

Allen L.
Allen L.

Reputation: 1

I had the same problem when I added @angular/service-worker to my ionic project. The angular version required by @angular/service-worker is different from the version installed at the beginning, and they conflict. package-lock.json retains the version of angular that was originally installed So, you can try to delete package-lock.json and rerun npm install

Upvotes: 0

Burhan Hyder
Burhan Hyder

Reputation: 31

Run npm update before installing ng bootstrap in your vs code terminal, that will fix it

Upvotes: 0

sinanspd
sinanspd

Reputation: 2734

Moving the comment to an answer per OP's request and so that the question can be marked resolved.

Looking at the Github releases page (accessed on 10/12/22 for v 13.0.0) the maximum support for the library currently is Angular 14.1, where as you are using 14.2.2. This seems to be a version compatibility issue (essentially the library is trying to pull an older version of Angular and you are getting a conflict)

You either have to downgrade you Angular version or use something else

Upvotes: 4

Related Questions