How to Display Version info on Ionic Apps

How to Display Version info on Ionic Apps

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, Android and Windows builds. At the end of this tutorial, we will present a working build displaying the app’s version number app's name, app's package name and app's version code.

Step 1 Install ionic app

ionic start TestApp sidebar

ionic serve

Step 2 Install app version plugin

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

$ npm install @ionic-native/app-version

Step 3 Display app version in sidebar

ADD VERSION NUMBER IN MARKUP

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

<ion-item>
	<p>App Version:</p>
</ion-item>

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

import { AppVersion } from '@ionic-native/app-version/ngx';


providers: [
    //...
    AppVersion
],

USE APP VERSION PLUGIN FROM APP.COMPONENT.TS

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

import { AppVersion } from '@ionic-native/app-version/ngx';


protected app_version: string;

  constructor(
    private appVersion: AppVersion
  ) {
    this.initializeApp();
  }


initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.showAppVersion(); //load version number when page is ready
    });
  }

//getting version number
showAppVersion() {
    this.appVersion.getVersionNumber().then(
      (versionNumber) => {
        this.app_version = versionNumber;
      },
      (error) => {
        console.log(error);
      });
  }

Step 4 Display version number in sidebar

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 }}

<ion-item>
  <p>App Version: {{ app_version }}</p>
</ion-item>

Step 5 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.

<widget id="com.tjd.studio" version="0.1.13" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

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 5 Build your app

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.

<preference name="loadUrlTimeoutValue" value="700000" />

For getting other values such as app name, package name and version code you can use sample codes provided in official documents in ionic website.

Leave a comment

Enjoy this?

Subscribe our newsletter and get latest updates straight to your inbox.