How to Display Version number on Ionic iOS and Android Builds

Published in

Appseed IO

4 min readOct 17, 2018

In this post, you will learn how to read the version of your app from the target build settings and display it inside of Ionic’s iOS and Android builds. At the end of this tutorial, we will present a working build displaying the app’s version number. For this, we will:

Use the Supermodular2 starter app and set it all up and running.
Use Ionic’s plugin App Version.
Build the app and display the version number

Note: The complete source code of this tutorial is available in the ionic-display-version Github repository.

Download code

Prerequisites

To follow along with this tutorial, you will need:

Supermodular2: This is a free starter template that allows you to start a new Ionic 3 project quickly offering some basic features commonly used in recent mobile applications. We are going to use it in order to build a basic Ionic 3 app with an extremely modular architecture and best software development practices applied. In the next section, we will go through all the steps needed for downloading and running the app.
App Version, a necessary Ionic plugin

Step 1: Clone GitHub Repo

Visit http://github.com/appseed-io/supermodular2 and download or clone the Supermodular 2 app:

$git clone https://github.com/appseed-io/supermodular2.git

Alternatively, it is recommended that you fork the repository since, later, you will be able to push any code you will add to this project straight to your own project repository.

Step 2: Install Libraries

Open a terminal window and navigate to the supermodular2 local folder. Install the NodeJS dependencies:

$npm install

Step 3: Run the Starter App

In your terminal, make sure you are located in the supermodular2 folder and run the command:

$ionic serve --lab

or for a web preview:

$ionic serve

From the Platforms menu you can toggle between the available platforms(iOS, Android, Windows Phone).

Step 4: Install App Version plugin

In your terminal, navigate to the supermodular2 folder and run the command:

$ ionic cordova plugin add cordova-plugin-app-version

answer ‘yes’ to the dialogs that pop up and then run the command:

$ npm install --save @ionic-native/app-version

Step 5: Display Version Number in Sidemenu

ADD VERSION NUMBER IN MARKUP

Inside the file src/app/app.html we add the following code

And the webview looks like this:

IMPORT APP VERSION PLUGIN TO APP.MODULE.TS

We need to import the plugin by adding the following code to the src/app.module.ts file

USE APP VERSION PLUGIN FROM APP.COMPONENT.TS

We add the following code under src/app.component.ts

In line 48, we call the getVersionNumber() method provided by the App Version plugin. It returns with our app’s version or an error message in console, if anything went wrong.

DISPLAY APP VERSION IN VIEW

In a previous step we added the App Version label in our HTML code. Now it is time to bind it with the actual data by adding the following code: {{ app_version }}

CHANGING THE APP VERSION

Our app’s version number is located in config.xml file in the project’s folder, as shown below.
For this demo we will leave the default value.

Important note : This plugin reads the version from the target build settings so it is not available in the webview. We must build the project, install the app and try it in a real device, as we will demonstrate.

Step 6: Build and Use the App

Navigate to the project’s folder with the command line and run the following command:

$ ionic cordova build android

An installation file has been created. Find it at:

platform/android/build/outputs/apk/android-debug.apk

Now a few changes should be made in your device’s settings. If using USB cable for the transfer, make sure you have USB Debbuging enabled. Also, from security settings allow Unknown Sources to be installed in the device. Install and launch the app.

Important: If having a server timeout error during launch, add the following line in your config.xml file and build it again following the steps described previously.