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.

Upgrading existing Ionic 4.x app to Ionic 5.x

We will run this migration in 5 easy steps.

  1. Install Ionic 5 CLI globally
  2. Updating the app to Ionic 4 last release (Version 4.11.10)
  3. Upgrade to Ionic 5
  4. Upgrade Angular Version (Upgrade to Angular 9)
  5. 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.

ionic --version

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 @ionic/angular@4.11.10 --save

Run below command to verify that the app has been upgraded to 4.11.10 version.

ionic info

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

Update @ionic/angular and @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.

ionic info

Step 4: Upgrade Angular Version (Upgrade to Angular 9)

So far, we have updated @ionic/angular and @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.

Note: Use ionic info command 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.

ionic serve

Go through all the screens and test the upgraded application.

Conclusion

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.

Reference - https://ionicframework.com/docs/building/migration