GuidesAPI ReferenceLatest UpdatesBlogVideosStart Building Apps
API Reference

Ionic 4 > Ionic Project Upgrade

Introduction

🚧

Important Note!

Note that the option of creating new apps with the Ionic 4 framework was removed and we no longer support the projects that were created with it earlier.
Moreover, you are free to effortlessly migrate your Ionic 4 project(s) to their Ionic version with keeping both apps active.
Please check this page to learn how to do it.

Benefits of Upgrading to Ionic

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

  • Ionic 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, 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 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:

1635

and then confirm the action in the modal window:

739

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

1918

🚧

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 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:

1919

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.

🚧

Important: Republishing the Upgraded App Version

Please note that if you choose to upgrade your Ionic 4 project that was previously published to the stores (App Store or Google Play) to its Ionic version, the project will be assigned a new GUID and you will need to resubmit its upgraded version.

This is also true for the project with the automatic app update feature enabled: after upgrading to Ionic the autoupdate URL will be changed and the old URL will no longer work.

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. 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, 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:
807

Changes to app styles

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

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 (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 soon.

Changes to the Observable ( RxJs 6) Request

629