In my previous blog, I covered the list of new features that Angular 6 is offering. As Angular 6 is offering many of the interesting features, there is an imperative need to migrate an existing application(s) from the current version (4 or 5) to Angular 6.
In this article, I will be covering detailed steps to migrate the Angular 4/5 application to Angular 6 application. The angular framework did automate many of the tedious tasks hence migration steps are simple and straight forward
Here are the high-level steps we need to follow while migrating the application:
Globally upgrade Angular CLI from 1.x to 6
Upgrade Angular CLI version in project
Identify the packages that need an upgrade
Solve peer dependency issues
Step 1: Globally upgrade Angular CLI from 1.x to 6
- Install the angular-cli 6 globally using below command:
npm install -g @angular/cli
- If the above command throws permission denied error then run the following command:
sudo npm install -g @angular/cli
Note: Ensure Node.js V8+ is already installed as mentioned in prerequisites. Lower version of Node.js will cause issues while upgradation of cli version, however, while execution of cli you will see errors.
Step 2: Upgrade Angular CLI version in project
- Go to project the source directory
- Run the following command to install latest angular/cli at project level:
npm install @angular/cli@latest
- Run the following command to upgrade the angular-cli at the project:
ng update @angular/cli
Step 3: Identify the packages that need an upgrade
- Run the below command to identify the packages that are needed to be upgraded:
- Above command produced output like below. It gives package name along with current and new version. Kindly note that It may give different results for your application:
Step 4: Upgrade packages
- Run all the below-listed commands to upgrade the packages:
ng update @angular/core
ng update @angular/material
ng update rxjs
- Do not worry if upgrade throws an error. If you get an error, kindly skip this step and move on to next step.
- You may have to repeat this step after finishing the next step.
Notes: Kindly note that above commands may change based on the application you are trying to upgrade
Step 5: Solve peer dependency issues
- If there are no errors in the previous step, then you don’t need to anything in this step
- In case of an error, kindly read the error carefully to identify the packages that need to be upgraded before we upgrade the specific library. Below is the snapshot of errors I encountered
- In my case, I found codelyzer, @angular/flex-layout and typescript@ packages added need upgradation
- Install codelyzer, @angular/flex-layout to the latest version and typescript@ to 2.6.2 with following commands:
npm install codelyzer@latest
npm install @angular/flex-layout@latest
npm install typescript@ 2.6.2
- After this run ‘Upgrade packages’ again. These two steps i.e. ‘Upgrade packages’ and ‘Solve peer dependency issues’ will be repeated until all the dependencies are resolved.
After finishing all the 5 steps we are done with the upgrade of an application to Angular6!
More info on commands
|Command||What it does|
ng update @angular/cli
|ng update @angular/core||Updates the angular core library packages and their references in the application|
| ng update @angular/material
|Updates the angular material library packages and their references in the application|
|ng update rxjs||
Updates the rxjs library packages and their references in the application
In this article, we have learned steps on how to upgrade the Angular 4/5 project to Angular 6.
At WalkingTree we are excited about the possibilities that Angular6 brings in for the new age applications. Hope this article will save a good amount of time for you when you come across this kind of need.
If you want your thoughts or proof of concepts around Angular or any technology to be validated by the industry experts? We will be excited to guide you!