Upgrading Angular solution from v11.0.5 to v15.0.5 - node.js

Question

TL;DR: What is the fastest way to upgrade a legacy Angular (eg v11) to the latest version (eg v15)?
I have an Angular 11 solution which has this packages.json file:
{
"name": "my-first-app",
"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": "^11.0.5",
"#angular/common": "^11.0.5",
"#angular/compiler": "^11.0.5",
"#angular/core": "^11.0.5",
"#angular/forms": "^11.0.5",
"#angular/platform-browser": "^11.0.5",
"#angular/platform-browser-dynamic": "^11.0.5",
"#angular/router": "^11.0.5",
"bootstrap": "3.3.7",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.0.0",
"tslib": "^2.0.3",
"zone.js": "^0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1100.4",
"#angular/cli": "^11.0.4",
"#angular/compiler-cli": "^11.0.5",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.19.9",
"codelyzer": "^6.0.1",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.4",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}
npm install in the solution folder produces this:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-first-app#0.0.0
npm ERR! Found: jasmine-core#3.6.0
npm ERR! node_modules/jasmine-core
npm ERR! dev jasmine-core#"~3.6.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core#">=3.8" from karma-jasmine-html-reporter#1.7.0
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR! dev karma-jasmine-html-reporter#"^1.5.4" 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!
npm ERR! For a full report see:
npm ERR! C:\Users\xxx\AppData\Local\npm-cache\_logs\2023-01-25T20_36_55_645Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxx\AppData\Local\npm-cache\_logs\2023-01-25T20_36_55_645Z-debug-0.log
I then run npm install --legacy-peer-deps, which produces a lot of WARN statements and then shows this:
added 1597 packages, and audited 1598 packages in 1m
118 packages are looking for funding
run `npm fund` for details
27 vulnerabilities (5 moderate, 21 high, 1 critical)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
So, I run npm audit fix --force which produces this:
added 143 packages, removed 694 packages, changed 122 packages, and audited 1047 packages in 20s
86 packages are looking for funding
run `npm fund` for details
# npm audit report
minimatch <3.0.5
Severity: high
minimatch ReDoS vulnerability - https://github.com/advisories/GHSA-f8q6-p94x-37v3
fix available via `npm audit fix`
node_modules/minimatch
1 high severity vulnerability
To address all issues, run:
npm audit fix
So, I run npm audit fix --force again, and it shows this:
removed 1 package, changed 1 package, and audited 1046 packages in 3s
86 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Now, if I run ng serve I get this:
Your global Angular CLI version (15.0.5) is greater than your local version (11.1.2). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
This version of CLI is only compatible with Angular versions ^15.0.0,
but Angular version 11.2.14 was found instead.
Please visit the link below to find instructions on how to update Angular.
https://update.angular.io/
I visit https://update.angular.io/ and select from v11 to v12, as it also states
You can't run ng update to update Angular applications more than one
major version at a time.
So, from https://update.angular.io/?v=11.0-12.0 I run ng update #angular/core#12 #angular/cli#12, which produces:
The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 12.2.18 to perform the update.
√ Packages successfully installed.
Using package manager: 'npm'
Collecting installed dependencies...
Found 31 dependencies.
Fetching dependency metadata from registry...
Package "#angular-devkit/build-angular" has an incompatible peer dependency to "#angular/compiler-cli" (requires "^15.0.0" (extended), would install "12.2.17").
Package "#angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=4.8.2 <5.0", would install "4.3.5").
× Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
See "C:\Users\xxx\AppData\Local\Temp\ng-7soZ7i\angular-errors.log" for further details.
So I run ng update #angular/core#12 #angular/cli#12 --force which produces a lot of output, but appears to work.
Next, I moved to https://update.angular.io/?v=12.0-13.0 which states I should run ng update #angular/core#13 #angular/cli#13 and produces:
The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 13.3.10 to perform the update.
√ Packages successfully installed.
Using package manager: 'npm'
Collecting installed dependencies...
Found 31 dependencies.
Fetching dependency metadata from registry...
Package "#angular-devkit/build-angular" has an incompatible peer dependency to "#angular/compiler-cli" (requires "^15.0.0" (extended), would install "13.3.12").
Package "#angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=4.8.2 <5.0", would install "4.6.4").
× Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
See "C:\Users\xxx\AppData\Local\Temp\ng-p47IAP\angular-errors.log" for further details.
So I run it like this: ng update #angular/core#13 #angular/cli#13 --force which also produces a lot of output but finally appears to complete successfully.
This moves me to https://update.angular.io/?v=13.0-14.0 which states I should run ng update #angular/core#14 #angular/cli#14. I see this:
The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 14.2.10 to perform the update.
√ Packages successfully installed.
Using package manager: npm
Collecting installed dependencies...
Found 31 dependencies.
Fetching dependency metadata from registry...
Package "#angular-devkit/build-angular" has an incompatible peer dependency to "#angular/compiler-cli" (requires "^15.0.0" (extended), would install "14.2.12").
× Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
See "C:\Users\xxx\AppData\Local\Temp\ng-wQ5M5Z\angular-errors.log" for further details.
So I run ng update #angular/core#14 #angular/cli#14 --force which, again, appears to complete successfully.
This leads me to https://update.angular.io/?v=14.0-15.0 and running the command ng update #angular/core#15 #angular/cli#15 which appears to complete, as well - fortunately, this time, without the need for --force.
Running ng serve works.
Is this the best way to upgrade a legacy Angular project to the latest version?

Answer 1

Yes, the ng update command is the recommended path to update angular applications.
With the latest CLI Versions, you can update only one version at a time (in the past, you could bump two or more versions at once). The idea behind this is to be able to run all the needed migrations when updating to a newer version without the risk of conflicts. The CLI runs the migrations for you.
The errors you got, like:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-first-app#0.0.0
npm ERR! Found: jasmine-core#3.6.0
npm ERR! node_modules/jasmine-core
npm ERR! dev jasmine-core#"~3.6.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core#">=3.8" from karma-jasmine-html-reporter#1.7.0
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR! dev karma-jasmine-html-reporter#"^1.5.4" from the root project
Are not related to Angular, but to npm (I guess you are using npm 7+). Newer npm versions will check that peer dependencies versions are respected and throw an error in case of a wrong version (as you are getting). From npm 7 release docs:
npm 7 will block installations if an upstream dependency conflict is
present that cannot be automatically resolved.
You have the option to retry with --force to bypass the conflict or
--legacy-peer-deps command to ignore peer dependencies entirely (this behavior is similar to versions 4-6).
In general, I would advise avoiding using --force while updating your dependencies and trying to find the right combination of versions between the libraries.