Welcome to today’s post.
In today’s post I will be discussing the upgrade of Angular application from version 9.x to 10.x.
In a previous post I showed how to upgrade an Angular application from version 8.x to 9.x.
In today’s post I will be showing which CLI commands are used to prepare the application for upgrade and the commands that will be used to execute the upgrade of application packages. I will also discuss and recommend resolutions to common issues that will occur during the upgrade. In addition, I will look at how to upgrade the Angular Material package to version 10.x.
Preparing to Upgrade
Before we can upgrade Angular from version 9.x to 10.x, we will require our version of Node.js to be at least 12.14.1. To check the version Node.js we run the following command:
node -v
Upgrading the Code Base to Support Version 10
Unlike version 9, for a version 10 upgrade there are no additional changes to the source to get the project ready for upgrade.
The first tasks we will perform are to update the existing Angular core library packages to the latest minor version. This is done by running the following CLI command on the command terminal:
ng update @angular/core@10 @angular/cli@10
If you get a peer dependency error
Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
And detailed errors such as the following:
Package "@ng-bootstrap/ng-bootstrap" has an incompatible peer dependency to "@angular/common" (requires "^8.0.0" (extended), would install "10.2.5").
Package "@fortawesome/angular-fontawesome" has an incompatible peer dependency to "@angular/core" (requires "^8.0.0-rc.5" (extended), would install "10.2.5").
Package "@ng-bootstrap/ng-bootstrap" has an incompatible peer dependency to "@angular/forms" (requires "^8.0.0" (extended), would install "10.2.5").
...
then you can force the upgrade as follows:
ng update @angular/core@10 @angular/cli@10 --force
Forcing the upgrade of core packages will advance the core versions to the next stable Angular libraries:
…
Updating package.json with dependency @angular-devkit/build-angular @ "0.1002.3" (was "0.901.15")...
Updating package.json with dependency @angular/cli @ "10.2.3" (was "9.1.15")...
Updating package.json with dependency @angular/compiler-cli @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/language-service @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency typescript @ "4.0.8" (was "3.8.3")...
Updating package.json with dependency @angular/animations @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/common @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/compiler @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/core @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/forms @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/localize @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/platform-browser @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/platform-browser-dynamic @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/router @ "10.2.5" (was "9.1.13")...
UPDATE package.json (2173 bytes)
Packages successfully installed.
which should bring you to version 10 of Angular.
Upgrading to a Compatible Version of the Angular Material Libraries
Run the following command to upgrade to the next higher version of Material compatible with Angular 10:
ng update @angular/material@10
If you get the following peer dependency errors:
Fetching dependency metadata from registry...
Package "@swimlane/ngx-charts" has an incompatible peer dependency to "@angular/cdk" (requires "7.x || 8.x", would install "10.2.7").
× 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.
Then force the upgrade of Material packages using the following:
ng update @angular/material@10 –force
The upgrade of Material libraries will include upgrades to the Angular CDK and Angular Material libraries as shown:
Updating package.json with dependency @angular/cdk @ "10.2.7" (was "8.2.3")...
Updating package.json with dependency @angular/material @ "10.2.7" (was "8.2.3")...
Our package.json will be updated to the Angular version 10 packages as shown:
"dependencies": {
"@angular/animations": "~10.2.5",
"@angular/cdk": "~10.2.7",
"@angular/common": "~10.2.5",
"@angular/compiler": "~10.2.5",
"@angular/core": "~10.2.5",
"@angular/forms": "~10.2.5",
"@angular/localize": "^10.2.5",
"@angular/material": "^10.2.7",
"@angular/platform-browser": "~10.2.5",
"@angular/platform-browser-dynamic": "~10.2.5",
"@angular/router": "~10.2.5",
"@fortawesome/angular-fontawesome": "^0.5.0",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@material/chips": "^9.0.0",
"@ng-bootstrap/ng-bootstrap": "^5.3.1",
"@swimlane/ngx-charts": "^11.2.0",
"bootstrap": "^4.5.3",
"karma-teamcity-reporter": "^1.1.0",
"rxjs": "~6.6.7",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
Testing the Upgraded Application
We want to run our application to see how it responds to the changes, and any runtime errors that might show in the console terminal.
Build the application:
ng build
The build should succeed without issues.
Now run the application using ng serve and test it runs without console errors and functions as expected.
You can see that the upgrade from Angular 9 to 10 is more straightforward than the upgrade from Angular 8 to 9. As the long-term support for Angular 9 ends on 06/08/2021, and that for Angular 10 ends on 24/12/2021, it is important to upgrade your Angular applications at least every six months until you reach the latest version or the prior version to the latest.
Failure to keep up with the upgrade cycle will result in code that will have long term support and compatibility issues with many of the core library and third-party packages including those in Node.js, Angular Framework and RxJS deprecating features with each major release.
In addition, upgrading by jumping more than one major version (for example, from Angular 5 to 8, or from Angular 7 to 10) can cause considerably more pain in code rework, library compatibilities, development re-work, and regression testing, so, the recommended practice is to upgrade up to the next major version at a time as the amount of remediation and re-testing is kept to a minimum.
That is all for today’s post.
I hope you found this post useful and informative.
Andrew Halil is a blogger, author and software developer with expertise of many areas in the information technology industry including full-stack web and native cloud based development, test driven development and Devops.
