Check Ionic 5 App Version Name, Package Name, Version Code and Number using Ionic Native Plugin

Last updated on by Digamber

This is a comprehensive Ionic 5, and Angular tutorial is dedicated to quickly check the Ionic application version, package name, package ID, version number, and version code using Ionic Native and Cordova plugins.

We will go one step further and learn to update the version of the Ionic app for an upcoming production build.

You must know that there are some values updates dynamically every time you evoke a build, and this is not an easy task to manage it manually. This is helpful from the end user’s perspective to understand the existing version and application updates.

Here comes the Ionic Native and Cordova plugins in rescue; you can attain the Ionic update or current version related values dynamically. So, get ready because we are going to see how to check the Ionic native application version.

Ionic 5 is a profound typescript-based framework, power, and flexibility implied in its core. It makes the application development holistically effortless and quenches your thirst for creating user-centric high-end mobile applications.

Install Ionic/Angular Application

Ionic CLI is a tool that lets you create new Ionic application. So, install the latest Ionic CLI:

npm install -g @ionic/cli

Next up, install the new Ionic app on your development system.

ionic start ionic-demo-app blank --type=angular

Get inside the project:

cd ionic-demo-app=angular

Start the project using below command:

ionic serve

Install Cordova Plugin App Version and Native App Version Plugins

Next, we have to install the Cordova and Ionic Native plugins simultaneously for finding out the app version.

ionic cordova plugin add cordova-plugin-app-version

npm install @ionic-native/app-version

Head over to app.module.ts file, import the AppVersion from ‘@ionic-native/app-version/ngx’ package, and register the AppVersion service in providers array.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';


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


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    AppVersion
  ],
  bootstrap: [AppComponent]
})

export class AppModule {}

Check Ionic App Name, Package Name, Version Number & Code

Everything has been set, now head over to home.page.ts file and add the following code to find out the Ionic App Name, Package Name, Version Number & Version Code.

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { AppVersion } from '@ionic-native/app-version/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  ionAppName: string;
  ionPackageName: string;
  ionVersionNumber: string;
  ionVersionCode: string|number;

  constructor(
    platform: Platform,
    private appVersion: AppVersion
  ) {
      platform.ready().then(() => {
          this.appVersion.getAppName().then(res => {
            this.ionAppName = res;
          }).catch(error => {
            alert(error);
          });

          this.appVersion.getPackageName().then(res => {
            this.ionPackageName = res;
          }).catch(error => {
            alert(error);
          });

          this.appVersion.getVersionNumber().then(res => {
            this.ionVersionNumber = res;
          }).catch(error => {
            alert(error);
          });

          this.appVersion.getVersionCode().then(res => {
            this.ionVersionCode = res;
          }).catch(error => {
            alert(error);
          });
      });
  }

}

Add the following code in home.page.html file.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Check Ionic App Name, Version Code & Number 
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div id="container">
    <strong>App Name:</strong> {{ ionAppName }} <br>
    <strong>Pacakge name:</strong> {{ ionPackageName }} <br>
    <strong>Version number:</strong> {{ ionVersionNumber }} <br>
    <strong>Version code:</strong> {{ ionVersionCode }}
  </div>
</ion-content>

Manually Update Ionic App Version

You probably don’t know how to update the existing version of the Ionic project. But we will let you know this, head over to config.xml, and as you can see inside the widget tag just right after the id version="0.0.1". Just change the version number here; this much easy it is.

Manually Update Ionic App Version

Run Ionic Application

Run the following command to add the devices.

ionic cordova platform add ios
ionic cordova platform add android

Start the app on the real or emulator device.

# Android
ionic cordova run android

# iOS
ionic cordova run ios

Output:

Check Ionic 5 App Version Name, Package Name, Version Code and Number using Ionic Native Plugin

Summary

Eventually, we have seen how to get Ionic application information easily using Ionic Native and Cordova plugins. It can be used to show to the user about the Ionic application information such as app name, package name, version name and number.