Upgrading is crucial for keeping the Angular applications up-to-date with the latest features, improvements, and security fixes.
To upgrade the current version of Angular, you can use the ng update command. This command serves as an easy tool for upgrading to the latest versions of Angular and its dependencies. By running ng update, developers can ensure that their Angular projects stay current with the latest features, bug fixes, and security patches. This command automatically updates the packages listed in the project’s package.json file to their latest compatible versions, following the version ranges specified in the dependencies.
Syntax
ng update
The ng update command displays lists of available updates and also highlights potential breaking changes that might occur when updating packages.
Example of output:
Using package manager: npm
Collecting installed dependencies...
Found 38 dependencies.
We analyzed your package.json, there are some packages to update:
Name Version Command to update
-----------------------------------------------------------------------------
@angular-eslint/schematics 17.3.0 -> 17.5.1 ng update @angular-eslint/schematics
@angular/cli 17.3.4 -> 18.0.1 ng update @angular/cli
@angular/core 17.3.4 -> 18.0.0 ng update @angular/core
There might be additional packages which don't provide 'ng update' capabilities that are outdated.
You can update the additional packages by running the update command of your package manager.Check for outdated packages
You can use npm outdated to identify outdated packages in your project. This command lists packages that have newer versions available, along with the current version, the desired version (according to your package.json), and the latest version available. It’s a helpful tool for keeping your project dependencies up-to-date and ensuring compatibility with the latest features and bug fixes.
Syntax
npm outdated
Package Current Wanted Latest Location Depended by
@angular-devkit/build-angular 17.3.4 17.3.8 18.0.1 node_modules/@angular-devkit/build-angular testcases
@angular-eslint/builder 17.3.0 17.3.0 17.5.1 node_modules/@angular-eslint/builder testcases
@angular-eslint/eslint-plugin 17.3.0 17.3.0 17.5.1 node_modules/@angular-eslint/eslint-plugin testcases
@angular-eslint/eslint-plugin-template 17.3.0 17.3.0 17.5.1 node_modules/@angular-eslint/eslint-plugin-template testcases
@angular-eslint/schematics 17.3.0 17.3.0 17.5.1 node_modules/@angular-eslint/schematics testcases
@angular-eslint/template-parser 17.3.0 17.3.0 17.5.1 node_modules/@angular-eslint/template-parser testcases
@angular/animations 17.3.4 17.3.10 18.0.0 node_modules/@angular/animations testcases
@angular/cli 17.3.4 17.3.8 18.0.1 node_modules/@angular/cli testcases
@angular/common 17.3.4 17.3.10 18.0.0 node_modules/@angular/common testcases
@angular/compiler 17.3.4 17.3.10 18.0.0 node_modules/@angular/compiler testcases
@angular/compiler-cli 17.3.4 17.3.10 18.0.0 node_modules/@angular/compiler-cli testcases
@angular/core 17.3.4 17.3.10 18.0.0 node_modules/@angular/core testcases
@angular/forms 17.3.4 17.3.10 18.0.0 node_modules/@angular/forms testcases
@angular/platform-browser 17.3.4 17.3.10 18.0.0 node_modules/@angular/platform-browser testcases
@angular/platform-browser-dynamic 17.3.4 17.3.10 18.0.0 node_modules/@angular/platform-browser-dynamic testcases
@angular/platform-server 17.3.4 17.3.10 18.0.0 node_modules/@angular/platform-server testcases
@angular/router 17.3.4 17.3.10 18.0.0 node_modules/@angular/router testcases
@angular/ssr 17.3.4 17.3.8 18.0.1 node_modules/@angular/ssr testcases
@types/node 18.19.31 18.19.33 20.12.12 node_modules/@types/node testcases
@typescript-eslint/eslint-plugin 7.6.0 7.10.0 7.10.0 node_modules/@typescript-eslint/eslint-plugin testcases
@typescript-eslint/parser 7.6.0 7.10.0 7.10.0 node_modules/@typescript-eslint/parser testcases
eslint 8.57.0 8.57.0 9.3.0 node_modules/eslint testcases
express 4.18.2 4.19.2 4.19.2 node_modules/express testcases
karma 6.4.2 6.4.3 6.4.3 node_modules/karma testcases
typescript 5.3.3 5.3.3 5.4.5 node_modules/typescript testcases
zone.js 0.14.4 0.14.6 0.14.6 node_modules/zone.js testcasesUpdate specific packages
To update a specific package, you can use the following syntax:
ng update <package-name>
Replace <package-name> with the name of the package you want to update. This command will update only the specified package to its latest version, while leaving other dependencies unchanged.
Example
ng update @angular/cli
ng update @angular/core
or
ng update @angular/cli @angular/core
Example of output:
The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 18.0.1 to perform the update.
✔ Packages successfully installed.
Using package manager: npm
Collecting installed dependencies...
Found 38 dependencies.
Fetching dependency metadata from registry...
Package "@angular-eslint/schematics" has an incompatible peer dependency to "@angular/cli" (requires ">= 17.0.0 < 18.0.0", would install "18.0.1").
✖ 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 "/tmp/ng-1BogLn/angular-errors.log" for further details.Incompatible peer dependency
When incompatible peer dependencies are found during an update, peer dependency warnings are displayed. Peer dependency warnings mean that those dependencies might not work correctly together (different packages may conflict with each other). Resolving these warnings may involve updating or adjusting the versions of affected packages to ensure compatibility. Paying attention to peer dependency warnings is important for maintaining a stable and functional project environment.
You can use the ‘--force‘ option to ignore incompatible peer dependencies.
Example
ng update @angular/cli --force
Update other dependencies
Updating other Angular dependencies using the ng update command ensures that all parts of your Angular application ecosystem are kept up-to-date and compatible with each other.
You can update other Angular dependencies, such as Angular Material or ngx-translate, using the ng update command provided by Angular CLI.
Example
ng update @angular/material
Run the Application and Tests
After updating, run the application and tests to ensure everything works correctly:
ng serve
ng test
Upgrading Angular using ng update vs. npm update
The npm update command will update the packages listed in your package.json file to the latest versions within their specified version ranges. However, it might not upgrade Angular to a new major version if the version range specified in package.json does not allow it. For example, if your package.json specifies “@angular/core": "^16.0.0“, npm update will update to the latest minor or patch version of Angular 16, but it will not update to Angular 17 or later.
To upgrade Angular to a new major version, it’s recommended to use the Angular CLI’s ng update command, which is specifically designed to handle Angular upgrades. The ng update command not only updates the dependencies but also applies necessary code migrations to ensure compatibility with the new version.
To update locally installed packages use the following command:
npm update
To update globally installed packages use the following command:
npm update -g
Conclusion
Using ng update helps keep the Angular applications up-to-date with the latest features, improvements, and security fixes while managing necessary changes and ensuring a smooth transition between versions.
