/ ionic

Getting the App Version of an Ionic 3 Application

I recently had a request from a viewer over at YouTube to cover getting the version of an Ionic project programmatically. This article/video stems from that and can be done with both Ionic Native and the accompanying Cordova plugin.

The application metadata can be found and set within config.xml, which is located inside the root of your project.

Creating a new Ionic project

We can start off by creating a new Ionic project and adding both the Cordova plugin and the Ionic wrapper. Let's get started:

# Create a new project
$ ionic start app-version blank

# Navigate to the project
$ cd app-version

Install dependencies

Now, we can add the Cordova and Ionic Native wrapper:

# Add the Cordova plugin
$ ionic cordova plugin add cordova-plugin-app-version

# Add the Ionic Native wrapper
$ npm install @ionic-native/app-version

Add 'AppVersion' as a provider

We’ll then need to add AppVersion as a provider inside of our app.module.ts:

import { AppVersion } from '@ionic-native/app-version';
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AppVersion
  ]
})
export class AppModule {}
HomePage template
<ion-header>
  <ion-navbar>
    <ion-title>
      App Version
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  <button ion-button (click)="getAppName()">Get App Name</button>
  <button ion-button (click)="getPackageName()">Get Package Name</button>
  <button ion-button (click)="getVersionNumber()">Get Version Number</button>
  <button ion-button (click)="getVersionCode()">Get Version Code</button>
</ion-content>
Implementation
import { Component } from '@angular/core';
import { AppVersion } from '@ionic-native/app-version';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  constructor(private app: AppVersion) {}
  
}

Application name

We can get the name of the application (i.e. as it appears on the device):

async getAppName(){
  const appName = await this.app.getAppName();
  console.log(appName);
}

Package name

We can get the package name (i.e. the bundle ID):

async getPackageName() {
  const packageName = await this.app.getPackageName();
  console.log(packageName);
}

Version number

We can get the package name (i.e. the bundle ID):

async getVersionNumber() {
  const versionNumber = await this.app.getVersionNumber();
  console.log(versionNumber);
}

Version code

And finally, the version code. This is the final number inside of our version number (i.e. the patch SEMVER number):

async getVersionCode() {
  const versionCode = await this.app.getVersionCode();
  console.log(versionCode);
}

Conclusion

We can get the version number of our applications with Ionic Native and the Cordova plugin named cordova-plugin-app-version. This proves useful when looking to quickly find a version number of your application whether in development or production.

Paul Halliday

Progress Telerik Developer Expert. Course author with students in 110+ countries. BSc (Hons) Computer Science @ UoS. Google accredited Mobile Site professional.

Read More