Upgrade the existing Ionic 4 app to Ionic 5 and Add New Feature

by Didin J. on Feb 10, 2020 Upgrade the existing Ionic 4 app to Ionic 5 and Add New Feature

The comprehensive step by step upgrade process of the existing Ionic 4 and Ionic 5 with the latest Angular 8 update

In this tutorial, we will show you an upgrade process of existing Ionic 4 and Ionic 5 with the latest Angular 8 update. You will see what will change and what still use after the upgrade completes. Also, we will add the new core update feature of Ionic 5 to the upgraded Ionic apps. While this tutorial was written, the Ionic 5 still in the RC version.

Table of Contents:

The following tools, frameworks, libraries, and modules are required for this tutorial:

  1. Node.js
  2. Ionic Framework
  3. Angular
  4. Existing Ionic 4
  5. Terminal or Node Command Line
  6. Text Editor or IDE

You can watch and follow the practical guide on our YouTube channel. Please like, share, comment and subscribe to our channel.


Prepare the Ionic 4 app

We will use the working apps that created from the last Ionic tutorial. Here are the steps to prepare the Ionic 4 app before upgrading to Ionic 5:

Step #1. Clone the existing Ionic 4 app.

git clone https://github.com/didinj/ionic-tutorial.git

Step #2. Go to the newly cloned Ionic app.

cd ionic-tutorial

Step #3. Install all require NPM and run every required NPM command.

npm i
npm fund
npm audit fix
npm audit fix --force

Step #4. Run this Ionic app to check everything is working.

ionic serve -l

Step #5. Add the platforms and run to the device after stop the running Ionic 4 lab by press CTRL + C.

ionic cordova platform add ios
ionic cordova platform add android

Step #6. Run iOS and Android to device or emulator.

ionic cordova run ios
ionic cordova run android

Upgrade the existing Ionic 4 app to Ionic 5 and Add New Feature - Ionic Demo

 
Upgrade to Ionic 5

We will upgrade everything that related to Ionic 5 including updating the Ionic CLI and Angular. Follow these steps to upgrade to Ionic 5 and the latest stable Angular:

Step #1. Update the Ionic CLI globally.

sudo npm i -g ionic

Step #2. Update the @ionic/angular for this project.

npm i @ionic/angular

Step #3. If required run this NPM command.

npm fund

Step #4. Upgrade the Ionic 4 to Ionic 5.

npm install @ionic/[email protected]

Step #5. Open this Ionic app using your IDE or text editor. To use VSCode type this.

code .


Check the Upgraded Ionic App

We need to check the upgraded Ionic app to make sure everything is working as expected. Follow these steps to checks:

Step #1. Open the package.json with your IDE or Text Editor and see if there is the latest version of @ionic/angular.
 
 

  "dependencies": {
    ...
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0-rc.3",
    ...
  },

Step #2. Run again the newly upgraded Ionic App.

ionic serve -l

Step #3. It seems everything is working, except the list-icon disappears. That because the new Ionicons version deleted the list-box. So, we need to change that icon to this icon that renamed in the new Ionicons version by open and edit "src/app/tab1/tab1.page.html" then replace the list-box icon with this.

<ion-icon slot="icon-only" name="newspaper"></ion-icon>

Step #4. Centering the header content using the new Ionic 5 CSS utilities. Add this CSS class to every tab page header and <ion-card>.

<ion-header class="ion-text-center">
...
<ion-card [routerLink]="['/tabs/tab2/', p.id]" class="ion-text-center">

Step #5. Give a padding to the <ion-card> content.

<img src="{{p.photo}}" class="ion-padding" />
<ion-card-header class="ion-padding">

Step #6. Change the text in <ion-list-header> to wrapped text by <ion-label> in order to get the proper styling of the new design.

<ion-list-header>
    <ion-label>Premier League Legend</ion-label>
</ion-list-header> 


Add a New Core Ionic 5 Feature

One of the key improvements of Ionic 5 is Public Animations and Gesture API. Now, we will implement the Animation to the image in the detail tab. Do these steps to add the animation:

Step #1. Open and edit "src/app/tab2/tab2.page.ts" then add or modify these import.

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { AnimationController } from '@ionic/angular';

Step #2. Declare elements that will animate using @ViewChild.

@ViewChild('avatar', { read: ElementRef, static: true }) avatar: ElementRef;

Step #3. Inject the AnimationController to the constructor.

  constructor(
    public route: ActivatedRoute,
    public router: Router,
    public animationCtrl: AnimationController) {}

Step #4. Add this animation API to the NgOnInit function.

  ngOnInit() {
    ...
    const animatedAvatar = this.animationCtrl
      .create()
      .addElement(this.avatar.nativeElement)
      .duration(3000)
      .iterations(Infinity)
      .direction('alternate')
      .fromTo('transform', 'rotate(0deg)', 'rotate(360deg)');

    animatedAvatar.play();

  }

Step #5. Open and edit "src/app/tab2/tab2.page.html" then replace the <img> tag with this.

<img #avatar src="{{details.photo}}" class="ion-padding" />


Run and Test the Upgraded Ionic App

This new Ionic 5 apps now can test using browser by type this command.

ionic serve -l

You will see a rotating image on the details page. Next, run to the Android and iOS device or simulator.

ionic run android
ionic run ios

Here they are the final Ionic 5 apps on Android and iOS.

Upgrade the existing Ionic 4 app to Ionic 5 and Add New Feature - iOS Demo
Upgrade the existing Ionic 4 app to Ionic 5 and Add New Feature - Android Demo

That it's, upgrade the existing Ionic 4 app to Ionic 5 and Add New Feature. You can get the full source code from our GitHub.

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ionic 4 - Full Starter App and save development and design time. Android, iOS, and PWA, 100+ Screens and Components, the most complete and advance Ionic Template.

That just the basic. If you need more deep learning about Ionic, Angular, and Typescript, you can take the following cheap course:

Thanks!

Loading…