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 are able to 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 that is a lot easier. The ng update command has made it easy for developers to update to 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 version.
How To Update Angular To Version 9?
In order to update Angular to version, the @angualr/core and @angular/cli must be updated to the latest version.
|ng update @angular/[email protected] @angular/[email protected] –force|
Then start the code to get Angular 9 update easily.
|ng update @angular/cli @angular/core –next|
The pre-release version is new as 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 error that might pop up. Start with pull request and production deploy 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 specifying 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 jump. 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 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 unclean repository so make sure to stash it up and use 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 in a smooth manner. If you are not careful then it is possible that the update will not work properly.
Co-Founder and AVP Technology at Appventurez Mobitech. A tech enthusiast who has broad expertise in delivering end to end software solutions. He is an expert technocrat ho has in-depth knowledge and is highly experienced in delivering solutions for Android, Xamarin, Ethereum Smart Contracts, ASP.net.
⚡️ by Appventurez
Hey there! This is Anand, author of this blog. Leave your email address and we'll keep you posted on what we're up to.
This will subscribe you to Appventurez once-a-month newsletter. You can unsubscribe anytime. And we promise not to pester you or share your data :)