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:
- Node.js
- Ionic Framework
- Angular
- Existing Ionic 4
- Terminal or Node Command Line
- 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.gitStep #2. Go to the newly cloned Ionic app.
cd ionic-tutorialStep #3. Install all require NPM and run every required NPM command.
npm i
npm fund
npm audit fix
npm audit fix --forceStep #4. Run this Ionic app to check everything is working.
ionic serve -lStep #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 androidStep #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 ionicStep #2. Update the @ionic/angular for this project.
npm i @ionic/angularStep #3. If required run this NPM command.
npm fundStep #4. Upgrade the Ionic 4 to Ionic 5.
npm install @ionic/angular@nextStep #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 -lStep #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 -lYou will see a rotating image on the details page. Next, run to the Android and iOS device or simulator.
ionic run android
ionic run iosHere 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.
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:
- IONIC 4 Design Hybrid Mobile Applications IOS & Android
- Wordpress Rest API and Ionic 4 (Angular) App With Auth
- Mobile App from Development to Deployment - IONIC 4
- Ionic 4 Crash Course with Heartstone API & Angular
- Ionic 4 Mega Course: Build 10 Real World Apps
Thanks!
