How to update angular local and global packages with updated package.json file
By: Rajat Kumar | Last Updated: April 15, 2023
Hi techie, today in this article we are going to learn how we can update angular local and global packages with updated package.json file using ‘ncu’ utility.
2. What we can learn?
This tutorial will solve your common questions like: How to keep Angular local and global packages updated? How to update Angular Packages? How to upgrade Angular CLI to the latest version? how to check the latest version of packages in package.json file?
Sometimes you may face the following type of errors/warnings: Global and Local angular/ionic CLI versions mismatch.
3. What is the solution?
We usually update the latest angular CLI by running following NPM command:
npm install -g @angular/cli
ng update @angular/cli @angular/core
It updates the global version of packages that are not accessible by your local projects/directories.
To see the difference run the
ng --version command globally and on the other hand open your projects package.json file. You will see the clear version mismatch of Angular CLI. Additionally, when we try to create/run a new Angular project by running the command as follows:
ng new demoProject
It shows the warning message:
Your global Angular CLI version (8.2.12) is greater than your local
version (8.0.1). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
4. Other Fast and Efficient Solution:
We all know that angular uses the project local node_module packages folder as dependencies and these packages version listed in package.json file of a local project. So, we need to update those versions to the latest and then run
npm update or
npm install command to update node_modules folder with the latest packages.
How we can do that?
Changing the package.json file to the latest version list is a little hard to write because we need to find every single package available latest version on the NPM directory site and update the package.json manually.
But wait, there is a fastest and simple way to do this by using an NPM utility package called “npm-check-updates”.
To update pacakge.json to the latest version we will use this utility npm-check-updates, this checks the latest version for a package then upgrade the package.json to the latest version. Then we only need to run npm install to update our local node_module packages.
In simple terms, npm-check-updates only modifies your package.json file. Run npm install to update your installed packages and package-lock.json.
Steps to upgrade using ncu:
local Angular project package.json file to latest versions and install/update new package dependencies in "node_modules".
#1 - Install npm-check-updates to run the following npm command.
npm i -g npm-check-updates
#2 - Run npm-check-updates with -u, will upgrade package.json file
#3 - Install updated packages
Cheers! Your angular project is updated/installed to the latest dependencies packages with an updated package.json file.
5. Additional Note
Additionally, to check the new package of the version available in local package.json file run this following command:
To check new version for global packages run this following command:
For more information check all available options in the npm-check-updates utility official npm page.
Note: If you face the following error:
ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.6.0 but 3.6.3 was found instead.
Then install stable Typescript version 3.5.3 by running following NPM command:
npm install email@example.com
Today we have learned how to update local and global packages in a simple way without spending so much time to run npm install for each package to update.
Hope this will help you as like did to me. Have a good day see you on the next topic.