How to update angular local and global packages with updated package.json file

1. Introduction:

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:

OR

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: 

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.

#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:

OR

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:

6. Conclusion

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.

Views