How To Update Angular Local And Global Packages With Updated Package.json File

Rajat Kumar (Tech Head)   |   Last Updated: February 06, 2020   |  
  • 519 Views
  • 28 Author Credit


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

    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.

     

    1. 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. 

     

    2. What is the solution?

    We usually update the latest angular CLI by running following NPM command:

    npm install -g @angular/cli
    Enter text or code snippet...

    OR

    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".

     

    3. Here is the 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.

    So 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 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

    ncu -u

    #3 - Install updated packages

    npm install

     

    Cheers! Your angular project is updated/installed to the latest dependencies packages with an updated package.json file.

     

    4. Additional Note

    Additionally, to check the new package of the version available in local package.json file run this following command:

    ncu

    OR

    To check new version for global packages run this following command:

    ncu -g

    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 typescript@3.5.3

     

    5. 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.


    0 Comments   |   0 Kudos

    • Related Articles

    • Currently no related articles

    Comments (0)

    No comments

    SUBSCRIBE OUR COMMUNITY

    Join our mailing list to receive updates on the latest article posts and other cool things.



    ×

    Write Comment

    (Maximum 5000 characters)