Ionic community recently released it's latest version Ionic 5 in the market. Today, in this article we will understand how can we upgrade an existing Ionic 4 application to Ionic 5.
We will run this migration in 5 easy steps.
- Install Ionic 5 CLI globally
- Updating the app to Ionic 4 last release (Version 4.11.10)
- Upgrade to Ionic 5
- Upgrade Angular Version (Upgrade to Angular 9)
- Run and Test upgraded Ionic app
Step 1: Install Ionic 5 CLI globally
First of all, install Ionic 5 CLI globally. Run below command.
npm install -g ionic@latest
Once you update the CLI to the latest version, you can verify it by running the below command.
Step 2 - Updating the app to Ionic 4 last release (Version 4.11.10)
As Ionic recommends that before you jump to directly upgrade your app to Ionic 5, you should first bring your app to the latest Ionic 4 release (4.11.10). And then you should run the application to see any deprecation warnings in the developer console. You should fix those warnings and then move forward to update the app to Ionic 5.
Run below command to update the Ionic 4 app to version 4.11.10.
npm install @email@example.com --save
Run below command to verify that the app has been upgraded to 4.11.10 version.
Before you move forward, please run and test the application by running it via
ionic serve and ensure that the app has been successfully upgraded to
4.11.10 version and there is no deprecation warning in the developer console.
Step 3: Upgrade to Ionic 5
@ionic/angular-toolkit packages to the latest releases by running below command.
npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save
Again verify the versions by running the below command.
Step 4: Upgrade Angular Version (Upgrade to Angular 9)
So far, we have updated
@ionic/angular-toolkit packages only, but still, we have not updated the angular and it's dependencies that are used by the Ionic app.
As Ionic 5 supports Angular 9, so we should update angular libraries used in the Ionic App to the latest version of Angular (That is Angular 9 as of now).
For this, I would recommend going through Angular's own website, where they clearly explain how to migrate from one version to another. Here is the link to their website - https://update.angular.io.
ionic infocommand to check the current Angular version of the Ionic app.
Step 5: Run and Test upgraded Ionic app
Run below command to launch the upgraded Ionic 5 app in the browsers.
Go through all the screens and test the upgraded application.
This is how we can migrate an Ionic 4 application to the latest Ionic 5 application in 5 easy steps. Please let me know your feedback, suggestions in below comment box.