Upgrade to Ionic 5 and New Features

Upgrade to Ionic 5 and New Features

In this post, we'll learn how to upgrade an existing Ionic 4 project to the latest Ionic 5 version but before that let's see the new features brought with this version of Ionic.

Ionic 5 New Features

This new release many new features such as:

  • iOS 13 design updates,
  • a new API for creating custom animations,
  • revamped Ionicons,
  • updated Ionic colors,
  • full support for Ivy, Angular’s new renderer,
  • new starter designs, and more!

How to Upgrade to Ionic 5

We recommend updating to the latest Ionic 4 release (4.11.10) before updating to Ionic 5.

Cloning and Setting up the Ionic 4 App

Open a new command-line interface and clone the Ionic 4 app repository as follows:

git clone https://github.com/techiediaries/ionic-todo-app.git

Next, navigate to your project's folder and install the dependencies:

cd ionic-todo-app
npm i

Next, run the Ionic 4 app to verify that is working.

ionic serve -l

Upgrading to Ionic 5

Let's get started by installing Ionic 5 CLI globally in our system:

npm i -g ionic

Next, update the @ionic/angular:

npm i @ionic/angular@latest --save

Next, simply go to the breaking changes document and see if there are any other changes that you need to make in your app.

Running the Upgraded Ionic 5 App

Simply run the following command:

ionic serve

Next, run in the Android or iOS device/simulator:

ionic run android
ionic run ios