CODEWITHSUNDEEP
angularangular-cliangular-devkit
alext
alext

Reputation: 812

Angular 17.0.X update to 17.3.3 failing - issue with dependencies

We have an Angular app that we have upgraded to 17.0.X and now we want to get it running to the latest version as of the time of writing - 17.3.X. We have updated the dependencies but we are seeing strange issues from transitive dependencies being pulled.

Before upgrade package.json:

{
  "name": "ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.0.5",
    "@angular/cdk": "^17.0.2",
    "@angular/common": "^17.0.5",
    "@angular/compiler": "^17.0.5",
    "@angular/core": "^17.0.5",
    "@angular/forms": "^17.0.5",
    "@angular/localize": "^17.0.5",
    "@angular/material": "^17.0.2",
    "@angular/material-moment-adapter": "^17.0.2",
    "@angular/platform-browser": "^17.0.5",
    "@angular/platform-browser-dynamic": "^17.0.5",
    "@angular/router": "^17.0.5",
    "@ngx-dropzone/cdk": "^17.1.0",
    "@ngx-dropzone/material": "^17.1.0",
    "chart.js": "^4.2.0",
    "file-saver": "^2.0.5",
    "jwt-decode": "^3.0.0",
    "moment-timezone": "^0.5.33",
    "ng2-charts": "^4.1.1",
    "ngx-mat-select-search": "^7.0.5",
    "ngx-mat-timepicker": "^17.0.1",
    "ol": "^7.4.0",
    "rxjs": "^7.8.1",
    "tslib": "^2.0.0",
    "uuid": "^8.2.0",
    "vis-data": "^7.1.9",
    "vis-timeline": "^7.7.3",
    "vis-util": "^5.0.7",
    "zone.js": "^0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.5",
    "@angular/cli": "^17.0.5",
    "@angular/compiler-cli": "^17.0.5",
    "@types/jasmine": "~5.1.4",
    "@types/jasminewd2": "~2.0.13",
    "@types/node": "^20.10.2",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~5.1.1",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "5.2.2"
  }
}

After upgrade package.json:

{
  "name": "ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.3",
    "@angular/cdk": "^17.3.3",
    "@angular/common": "^17.3.3",
    "@angular/compiler": "^17.3.3",
    "@angular/core": "^17.3.3",
    "@angular/forms": "^17.3.3",
    "@angular/localize": "^17.3.3",
    "@angular/material": "^17.3.3",
    "@angular/material-moment-adapter": "^17.3.3",
    "@angular/platform-browser": "^17.3.3",
    "@angular/platform-browser-dynamic": "^17.3.3",
    "@angular/router": "^17.3.3",
    "@ngx-dropzone/cdk": "^17.3.0",
    "@ngx-dropzone/material": "^17.3.0",
    "chart.js": "^4.2.0",
    "file-saver": "^2.0.5",
    "jwt-decode": "^3.0.0",
    "moment-timezone": "^0.5.33",
    "ng2-charts": "^4.1.1",
    "ngx-mat-select-search": "^7.0.5",
    "ngx-mat-timepicker": "^17.1.0",
    "ol": "^7.4.0",
    "rxjs": "^7.8.1",
    "tslib": "^2.0.0",
    "uuid": "^8.2.0",
    "vis-data": "^7.1.9",
    "vis-timeline": "^7.7.3",
    "vis-util": "^5.0.7",
    "zone.js": "^0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.3",
    "@angular/cli": "^17.3.3",
    "@angular/compiler-cli": "^17.3.3",
    "@types/jasmine": "~5.1.4",
    "@types/jasminewd2": "~2.0.13",
    "@types/node": "^20.10.2",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~5.1.1",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "5.2.2"
  }
}

The error that we are getting is

'Log files:
C:\Users\user\AppData\Local\npm-cache\_logs\2024-04-09T17_39_16_916Z-debug-0.log

# npm resolution error report

While resolving: [email protected]
Found: @angular-devkit/[email protected]
node_modules/@angular-devkit/build-angular
  dev @angular-devkit/build-angular@"^17.3.3" from the root project

Could not resolve dependency:
dev @angular-devkit/build-angular@"^17.3.3" from the root project

Conflicting peer dependency: @angular/[email protected]
node_modules/@angular/compiler
  peer @angular/compiler@"17.3.3" from @angular/[email protected]
  node_modules/@angular/localize
    @angular/localize@"^17.3.3" from the root project
    peerOptional @angular/localize@"^17.0.0" from @angular-devkit/[email protected]
    node_modules/@angular-devkit/build-angular
      dev @angular-devkit/build-angular@"^17.3.3" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Upvotes: 1

Views: 1807

Answers (1)

M G
M G

Reputation: 629

Your versions seem correct. Try to remove node_modules folder and run npm install again. You can also try with flag --legacy-peer-deps, but that shouldnt be required

Upvotes: 0

Related Questions