Angular 9 is launched and has come up as a treat for the developers. The latest upgrade includes some exciting features of Angular in terms of ivy that was released on 7th February 2020.
The Angular 9 all-new features are more than enough to keep the audience hooked and work efficiently in the Angular ecosystem. The shaking features can save size in terms of large bundles and there are small improvements for developers.
Developers are all set to update the CLI version to the latest Angular 9 which is a lot easier. The ng update command has made it easy for developers to update dependencies and specific versions.
Read more: Introduction to Angular
What Is ng Update Command?
This command is used to update the application along with its dependencies in Angular CLI. With the help of this command, it is easy to update different package.json files. To do so, the –all option is used that takes false or true or even –package option for specific Angular versions.
How To Update Angular To Version 9?
To update Angular to version, the @angualr/core and @angular/cli must be updated to the latest version.
| ng update @angular/core@8 @angular/cli@8 –force |
Then start the code to get Angular 9 update easily.
| ng update @angular/cli @angular/core –next |
The pre-release version is new compared to the Angular CLI version. Hence, install a temporary version to ensure that updates perform in a better way.
Use yarn to install the package, use ‘yarn’ for the package manager. In the end, collect installed dependencies to finalize the update.
Once done, start the local machine and open the app. Make sure to keep an eye on any errors that might pop up. Start with the pull request and production deployment to get started with the build process.
Or you can follow the GitHub approach for v7 to v9 as mentioned below:
1. Use GitHub To Clone The Project
In the GitHub repository, clone Angular 7 and run the command
| $ git clone https://github.com/techiediaries/angular-portfolio |
Once done, navigate it to the folder and use:
| $ cd angular-portfolio$ npm install |
2. Identify The Angular Version Used In The Projects
Then follow the command
| $ ng version |
An output will pop up showing the details of its packages and versions including CLI v7.1.4 and local versions installed in the system.
3. Follow The Upgrade Process
Follow Up the upgrade process with the help of the Angular Update Guide to specify the update to v9. Tap on the Show me how to Update and move to v9 from v7.
Select the project, in case of a warning, move to v8 instead of 9 to avoid multiple version jumps. Start with the upgrade of the project.
4. Update It To v8
It is best to make sure that Node 10 is used to improve type checking. Use the command-line
| $ ng update |
This will help in analyzing package.json and a list of packages will pop up as the outcome.
Start with the core framework update to v8.2.14 or v8.3.19 with the help of
| $ ng update @angular/cli @angular/core |
You will be updated successfully to Angular 9 from CLI. After this, use the command
| $ ng –version |
This will send out the outcome of different packages that are installed successfully in the system. However, if you are using any low version then make sure to go one step at a time and update any version to Angular version 9.
5. Follow It With the Pre-Release Of Angular 9 Version
After this is done, update to Angular 9 with the help of the command line:
| Using package manager: ‘npm’Collecting installed dependencies…Found 32 dependencies. We analyzed your package.json and everything seems to be in order. Good work! |
This is due to the pre-release version of 9 and to get it to use the command:
| $ ng update –next |
As a rest, you will get the version of @angular/cli and @angular/core. Follow it up with the command
| $ ng update @angular/cli @angular/core –next |
It is possible to get an error after this, due to an unclean repository so make sure to stash it up and use the flag to proceed forward.
| $ ng update @angular/cli @angular/core –next –allow-dirty |
This will update the app to Angular 9 successfully.
6. Serve The App
Now, since the app is upgraded to the latest version make sure to check its working with:
| $ ng serve |
Make sure to follow the guidelines to ensure that they work smoothly. If you are not careful then it is possible that the update will not work properly.
Anand Prakash
One of the Co-founders at Appventurez
Anand specializes in sales and business development as its VP - Sales and Presales. He supervises the pre-sales process by upscaling on establishing client relationships. He skillfully deploys instruments such as cloud computing, automation, data centers, information storage, and analytics to evaluate clients’ business activities.
