Npm config for upgrading from Angular 15 to Angular 16

Question

I'm trying to upgrade from Angular 15 to Angular 16.

I had this config for version 15:

{
  "name": "name",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.4",
    "@angular/common": "~15.0.4",
    "@angular/compiler": "~15.0.4",
    "@angular/core": "~15.0.4",
    "@angular/forms": "~15.0.4",
    "@angular/localize": "~15.0.4",
    "@angular/platform-browser": "~15.0.4",
    "@angular/platform-browser-dynamic": "~15.0.4",
    "@angular/router": "~15.0.4",
    "@ng-bootstrap/ng-bootstrap": "^14.0.0",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.0",
    "ngx-spinner": "^15.0.1",
    "ngx-toastr": "^15.0.0",
    "rxjs": "~7.5.5",
    "tslib": "^2.4.0",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.5",
    "@angular-eslint/builder": "15.1.0",
    "@angular-eslint/eslint-plugin": "15.1.0",
    "@angular-eslint/eslint-plugin-template": "15.1.0",
    "@angular-eslint/schematics": "^15.1.0",
    "@angular-eslint/template-parser": "15.1.0",
    "@angular/cli": "^15.0.5",
    "@angular/compiler-cli": "~15.0.4",
    "@types/jasmine": "~4.0.3",
    "@types/node": "^17.0.30",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "eslint": "^8.28.0",
    "eslint-plugin-jsdoc": "^39.2.9",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.19",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "karma-junit-reporter": "^2.0.1",
    "typescript": "~4.8.4"
   }
 }

This is my first attempt for the new config (in order to run Angular 16):

{
  "name": "name",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "test-ci": "ng test --watch=false --browsers=ChromeHeadless",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.4",
    "@angular/common": "16.0.0",
    "@angular/compiler": "^16.0.0",
    "@angular/core": "16.0.0",
    "@angular/forms": "~15.0.4",
    "@angular/localize": "~15.0.4",
    "@angular/platform-browser": "~15.0.4",
    "@angular/platform-browser-dynamic": "~15.0.4",
    "@angular/router": "~15.0.4",
    "@ng-bootstrap/ng-bootstrap": "^14.0.0",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.0",
    "ngx-spinner": "^15.0.1",
    "ngx-toastr": "^15.0.0",
    "rxjs": "~7.5.5",
    "tslib": "^2.4.0",
    "zone.js": "~0.13.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "16.0.0",
    "@angular-eslint/builder": "16.0.0",
    "@angular-eslint/eslint-plugin": "16.0.0",
    "@angular-eslint/eslint-plugin-template": "16.0.0",
    "@angular-eslint/schematics": "^16.0.0",
    "@angular-eslint/template-parser": "16.0.0",
    "@angular/cli": "16.0.0",
    "@angular/compiler-cli": "16.0.0",
    "@types/jasmine": "~4.0.3",
    "@types/node": "^18.0.30",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "eslint": "^8.28.0",
    "eslint-plugin-jsdoc": "^39.2.9",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.19",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "karma-junit-reporter": "^2.0.1",
    "typescript": "~4.9.4"
  }
}

However, this is what I'm getting when I run "npm install":

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: name@0.0.0
npm ERR! Found: @angular-devkit/build-angular@15.0.5
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"16.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"16.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler-cli@16.0.0
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^16.0.0" from @angular-devkit/build-angular@16.0.0
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"16.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.

Please guide me to get this to work. It could work with "--force" but I guess that's not what you want.

It's been a bit since I've done Angular but don't you have to manually install version 16 locally then you can run your config to update your application? — edjm, Jun 28 '23 at 10:00
@Pieterjan do you mean all "@angular*", "@angular-devkit", "@angular-eslint" ? — Jojje, Jun 28 '23 at 11:43
@Jojje don't ignore the first two comments, those are the valid answers. — MGX, Jun 28 '23 at 12:55
@jonrsharpe thanks, but that page doesn't really help you with the package.json config that much..? — Jojje, Jun 28 '23 at 12:59
Also for updating packages you might want to look at https://stackoverflow.com/questions/58167892/how-do-i-find-which-packages-are-dependent-on-angular-versions-higher-than-6-x — edjm, Jun 28 '23 at 16:40

score 1 · Answer 1 · answered Jun 29 '23 at 11:13

I followed the advice of @edjm , i.e I installed a separate Angular 16 app and compared the package versions. I used the versions provided in the new Angular 16 installation.

{
  "name": "name",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/common": "^16.1.0",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.1.0",
    "@angular/forms": "^16.1.0",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.1.0",
    "@ng-bootstrap/ng-bootstrap": "^15.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.0",
    "ngx-spinner": "^16.0.2",
    "ngx-toastr": "^15.0.0",
    "zone.js": "^0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~16.0.0",
    "@angular-eslint/builder": "~16.0.0",
    "@angular-eslint/eslint-plugin": "~16.0.0",
    "@angular-eslint/eslint-plugin-template": "~16.0.0",
    "@angular-eslint/schematics": "~16.0.0",
    "@angular-eslint/template-parser": "~16.0.0",
    "@angular/cli": "~16.1.2",
    "@angular/compiler-cli": "^16.1.0",
    "@types/jasmine": "~4.0.3",
    "@types/node": "^18.0.30",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "eslint": "^8.43.0",
    "eslint-plugin-jsdoc": "^46.4.2",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.19",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "karma-junit-reporter": "^2.0.1",
    "typescript": "~4.9.4"
  }
}

Npm config for upgrading from Angular 15 to Angular 16

1 Answers1