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: [email protected]
npm ERR! Found: [email protected]
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 [email protected]
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?
CodePudding user response：
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: [email protected]
npm ERR! Found: [email protected]
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 [email protected]
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.