The Angular Team release a new version of the Angular at regular intervals. To keep up with the latest version, we need to update or upgrade our Angular Application. Since Angular 6, upgrading or updating Angular applications has become much simpler.
Table of Contents
Why is Updating Angular Important?
Angular is continuously evolving, with new features, performance improvements, security updates, and bug fixes in each release. Staying up to date ensures:
- Better Performance – New versions often include optimizations for speed and efficiency.
- Security Fixes – Updates address vulnerabilities, making applications more secure.
- New Features – Each release brings enhancements and new APIs that improve development.
- Long-term Support – Older versions eventually become unsupported, making upgrades necessary.
However, manually updating an Angular application can be complex and time-consuming, especially when handling dependencies, breaking changes, and migration steps.
How ng update Helps
Starting from Angular 6, the Angular CLI introduced the ng update command to automate much of the upgrade process. This tool:
- Automatically updates dependencies to compatible versions.
- Modifies configuration files like
angular.jsonandtsconfig.jsonas needed. - Runs migration scripts to apply necessary code changes for breaking updates.
- Detects deprecated APIs and suggests replacements.
With ng update, upgrading Angular is faster, safer, and less error-prone compared to manual updates.
ng update
The Angular CLI Command ng update. makes it easier to update the application and its dependencies
1 2 3 | ng update [options] |
| OPTION | Alias | Default | DESCRIPTION |
|---|---|---|---|
--help=true|false| json| JSON | false | Shows a help message for this command in the console. | |
--force=true|false | false | If true, forces the update even if the installed packages are incompatible with the update. if false, packages are not updated and the error message is shown | |
--next=true|false | false | Use the largest version, including beta and RCs. | |
--migrateOnly=true|false | false | Only perform a migration, does not update the installed version. | |
--name=name | empty string | The name of the migration to run. Only available when a single package is updated | |
--from=from | Version from which to migrate from. Only available with a single package being updated, and only on migration only. | ||
--to=to | Version up to which to apply migrations. Only available with a single package being updated, and only on migrations only. Requires from to be specified. Default to the installed version detected. | ||
--allow-dirty=true|false | false | Whether to allow updating when the repository contains modified or untracked files | |
--verbose=true|false | false | Display additional details about internal operations during execution. | |
--create-commits=true|false | false | Create source control commits for updates and migrations. | |
--all=true|false | ***Removed in newver version | false | selecting true will update all packages in package.json. |
--packageManager=npm|yarn | ***Removed in newver version | npm | The preferred package manager configuration files to use for registry settings |
--packages | ***Removed in newver version | The names of package(s) to update | |
--registry=registry | ***Removed in newver version | The NPM registry to use. |
Find out what changed
Before upgrading, you need to know the features that have changed, new features added, and breaking changes introduced. Please take a look at the Angular Changelog for details.
Find out what needs to be changed
Once you know the list of changes, the next step is to find out what needs to be changed in your app so that you can safely upgrade to the next version. This you can find out from the Angular Update Guide.
Once you open the above site, you need to follow these steps and the guide will list you the changes required
- Choose the Current version Angular and the version you wish to upgrade
- Select the App Complexity as
Advanced - Choose other dependencies
- Choose your package manager
- Click on
Show me how to update
The Application tells you the steps needed to upgrade.
The guide provides a structured list of changes required in three phases: Before Update, During the Update, and After Update.
Upgrading using ng update
The steps mentioned above should be sufficient to upgrade the application. This section explains the upgrade process using ng update.
This section explains the steps involved in upgrading the Angular app using ng update
- Update Node.js to the latest version.
- Install Angular CLI Globally & Locally
- Run
ng update @angular/clito update configuration files - Update the Core Packages & Dependencies
Update Node.js to the latest version
Run the following command to update Node.js:
1 2 3 | npm update -g //Updates Node |
Install Angular CLI Globally & Locally
Install the latest Angular CLI version:Â
1 2 3 4 | npm install -g @angular/cli@latest // Global installation npm install @angular/cli@latest --save-dev // Local installation |
Verify that Angular CLI is Installed correctly by inspecting the package.json file. The "@angular/cli": "^X.X.X" must be listed under the "devDependencies" node. If it appears under the "dependencies", or an older version still exists, remove it. If the version is not the latest, then you can change it and then run npm install to update it.
You can also install the older version of Angular CLI by appending the version no as shown below
1 2 3 4 | npm install -g @angular/cli@6.2 npm install @angular/cli@6.2 --save-dev |
If you are upgrading to an older version of Angular, for example, version 6, then it is better to install the corresponding Angular CLI Version
Since, the Angular Version 6, the Angular CLI follows the same Version No as the Angular. Hence for Angular 7, the corresponding version of the Angular CLI is 7.
The Angular CLI version 1.7 was for Angular 5 and Angular CLI 1.4 was for Angular 4
Run ng update to update configuration files
The next step is to update the various configuration files like angular.json, karma.conf.js etc. This is done by running the following command
1 2 3 | ng update @angular/cli |
Update core packages & dependencies
The next step is to update the Angular Core packages & Dependencies. The following command updates the Angular core packages & rxjs.
1 2 3 4 | ng update @angular/core ng update rxjs |
The Following gives you the list of packages (not all) that needs to be updated along with the command.
1 2 3 | ng update |
You can force Angular to update all the dependencies by using --all & --force flag
1 2 3 | ng update --all --force |
And if you encounter an error after running the above steps, then you can remove the node_modules folder & package-lock.json file and run npm install
Tips to upgrade
Update to the Latest Version Regularly
Angular releases major versions every six months, with minor updates and bug fixes more frequently. Updating once a month or two helps keep changes minimal and manageable.
Keep an Eye on Deprecated Features
Major Angular versions may introduce breaking changes and deprecate some APIs. Check the Angular Changelog regularly. Deprecated features are usually supported for at least two major versions, giving developers time to make necessary updates.
Read More
