How to Upgrade from Ionic 4 Apps to Ionic 5

How to Upgrade from Ionic 4 Apps to Ionic 5

In this Ionic 5 tutorial, we will show you an upgrade process of existing Ionic 4 and Ionic 5 with the latest Angular 8 update. 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.

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:

  • Prepare the Ionic 4 app
  • Upgrade to Ionic 5
  • Check the Upgraded Ionic App
  • Add a New Core Ionic 5 Feature
  • Run and Test the Upgraded Ionic App

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

*Step #5* Give a padding to the content.

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

*Step #6* Change the text in to wrapped text by 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 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.


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.

Thanks!

ECommerce Mobile App Development | Ecommerce Mobile App Development Services

We are leading ecommerce mobile application development company. Hire our ecommerce mobile app developer for your custom Ecommerce project at competitive rates. **Know about [Top ECommerce Mobile App Development...

We are leading ecommerce mobile application development company. Hire our ecommerce mobile app developer for your custom Ecommerce project at competitive rates.

Know about Top ECommerce Mobile App Development Company

Top Mobile App Development Agency in Massachusetts

Top Mobile App Development Agency in Massachusetts

**Looking for Top Mobile App Development Agency at reasonable rates?** AppClues Studio is one of the top Mobile App Development Agencies in Massachusetts. We offer user-oriented mobile solutions to our clients globally. We offer Mobile app...

Looking for Top Mobile App Development Agency at reasonable rates?

AppClues Studio is one of the top Mobile App Development Agencies in Massachusetts. We offer user-oriented mobile solutions to our clients globally.

We offer Mobile app development services like iOS app development, Android app development, M-commerce development, Cross-Platform mobile app development, AR & VR app development, IoT app development, Wallet app development, Hybrid app development etc.

Why Choose AppClues Studio?
• Domain Expertise
• On-time Delivery
• 24/7 Support
• Aesthetic Designs
• Agile Development
• Smooth Handover

If you looking for your mobile application development, then get in touch with us!
Visit: https://appcluesstudio.com/mobile-applications-development-company-massachusetts
Email: [email protected]
Contact No.: +1-978-309-9910

Mobile App Development in New York

Mobile App Development in New York

Looking for the best services of **[Mobile App Development in New York](https://www.appcluesinfotech.com/ "Mobile App Development in New York")**? Then you have come to the right place AppClues Infotech is offering the top-notch Mobile App...

Looking for the best services of Mobile App Development in New York? Then you have come to the right place AppClues Infotech is offering the top-notch Mobile App Development service in New York at an affordable cost.

We have extensive experience in developing mobile app development for multiple platforms like iOS, Android & Windows. We have a dedicated team of developers that have excellent strength in developing any type of mobile apps.

Our Mobile App Development Service:
• iOS App Development
• Android App Development
• Flutter App Development
• Windows App Development
• React Native App Development
• Ionic App Development

For more info:
Visit: https://www.appcluesinfotech.com/
Email: [email protected]
Call: +1-978-309-9910