Upgrade the existing Ionic app to the Latest Ionic and Add New Feature

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

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

1. Node.js
2. Ionic Framework
3. Angular
4. Existing Ionic
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 app

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

Step #1. Clone the existing Ionic 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 required 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 that everything is working.

ionic serve -l

Step #5. Add the platforms and run to the device after stopping the running Ionic lab by pressing CTRL + C.

ionic cordova platform add ios
ionic cordova platform add android

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

ionic cordova run ios
ionic cordova run android

 
Upgrade to the Latest Ionic

We will upgrade everything that is related to Ionic, including updating the Ionic CLI and Angular. Follow these steps to upgrade to Ionic 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 Ionic to the Latest Ionic.

npm install @ionic/angular@next

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

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 the newly upgraded Ionic App.

ionic serve -l

Step #3. It seems everything is working, except the list-icon disappears. That's because the new Ionicons version deleted the list-box. So, we need to change that icon to this icon that was renamed in the new Ionicons version by opening and editing "src/app/tab1/tab1.page.html", then replacing 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 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 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> 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 Feature

One of the key improvements of Ionic 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 imports.

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 into 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 app can now be tested using a browser by typing this command.

ionic serve -l

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

ionic run android
ionic run ios

Here are the final Ionic apps on Android and iOS.

That it's, upgrade the existing Ionic app to Ionic and add a 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 - Full Starter App and save development and design time. Android, iOS, and PWA, 100+ Screens and Components, the most complete and advanced Ionic Template.

That's just the basics. If you need more deep learning about Ionic, Angular, and TypeScript, you can take the following cheap course:

• IONIC Design Hybrid Mobile Applications IOS & Android
• WordPress Rest API and Ionic (Angular) App With Auth
• Mobile App from Development to Deployment - IONIC 
• Ionic Crash Course with Heartstone API & Angular
• Ionic Mega Course: Build 10 Real World Apps

Thanks!