Ionic 4 > Ionic 5 Project Upgrade

Introduction

From now on, you are free to not only create separate Ionic 4 and Ionic 5 apps but also migrate your Ionic 4 project(s) to their Ionic 5 version with keeping both apps active.

Benefits of Upgrading to Ionic 5

If you are still hesitant about whether you should evaluate the advantages Ionic 5 can bring to your project, we have outlined some of them to consider:

  • Ionic 5 applications look very modern, run faster, and are much more reliable;
  • The latest Ionic version follows the modern Material Design Guidelines and Human Interface Guidelines from Apple;
  • Conversion and adoption rates are extremely favorable;
  • With Ionic 5, you are guaranteed to enjoy working with the top-notch framework, efficiently collaborate with the Ionic community, and get access to the latest Ionic and Angular UI components;
  • Custom animations, revamped Ionicons, updated Ionic colors, new starter designs, improvements to component customization (including but not limited to iOS 13 design updates), and more are available.
    We are happy that our users will now be able to enjoy highly engaging development practices while creating native experiences on the most advanced mobile device versions.

So, if you choose to migrate to Ionic 5 but still have some questions about the upgrade process, please read the information below for more details.

Upgrade Process

Actually, all you need to do to upgrade is accept the offer right from under your Apps page:

and then confirm the action in the modal window:

In just a moment, you will find yourself inside a newly created Ionic 5 application which is actually a clone of the corresponding Ionic 4 project. To check, note the __Ionic5 extension in the project name:

🚧

Note on App Versioning!

After the upgrade is complete, an old Ionic 4 app will be kept safe including all its app versions.
However, the new Ionic 5 app version will have no versions created.

If you compare the apps' structure and all the associated data, you will see that both projects are identical:

Congratulations! As you can see, the app is all set and ready to work with! Moreover, you are now free to use both versions independently.

But once you realize you are ready to go with the updated app version, you can delete the original Ionic 4 project (or create its backup in case you once need the recreated Ionic 4 version).

Possible Changes You Need to be Aware of (Breaking Changes)

The main focus of this upgrade is to introduce a smooth conversion from Ionic 4 to Ionic 5. However, there are few issues that may require you to make changes to your upgraded application in order to avoid disruption to your integration.

The following are the changes that might be considered breaking:

Changes to some existing UI components
Changes to some existing icons and introducing new ones
Changes to app styles
Modification of the Drag and Drop plug-in
Changes to the Observable ( RxJs 6) request

So, if you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make some changes to your new application:

Changes to some existing UI components

If your Ionic 4 project uses some of the UI components listed below, make sure their appearance and/or behavior was not impacted by the possible changes.

For more details about what UI component's properties were removed/modified, check the component's corresponding documentation sections:

Changes to some existing icons and introducing new ones

Many app icons were updated and the icon selection has been grouped for better performance:

  • All
  • Outline
  • Filled
  • Sharp
  • Logo:

Changes to app styles

  • Global style variables have been modified
  • UI components now inherit the mode of their parent:
  • Styles of some UI components have been modified:

Modification of the Drag and Drop plug-in

Currently, the Appery.io Drag and Drop plug-in works with Angular 8 only and will stop working after upgrading to Ionic 5 (Angular 11) leading to preview error.
But our team is currently working on resolving this conflict and the updated Drag and Drop plug-in will be introduced for Ionic 5 soon.

Changes to the Observable ( RxJs 6) Request