Ionic 6 Show App Version Name, Version Code, Package Name

Throughout this quick tutorial, we will find out how to check Ionic’s application version name, version number, version code, package name, and application id with the help of Ionic native and Cordova plugins.

You will also ascertain how to modify the Ionic application’s version.

When you work on some application, you must be aware of the application name, package name and their versions, version number, and version code.

Ideally, unquestionably sometimes, some of the package’s version numbers dynamically update regularly; it is a tedious job to manage them manually.

Luckily Ionic native and Cordova simultaneously provide us with a simple solution to manage to get ionic application current version name and code number.

Create Ionic Project

Before you invoke ionic development ensure you have Node and NPM installed on system. Then, swiftly open the terminal and execute given below command to install Ionic CLI:

npm install -g @ionic/cli

You can type given below command to install a blank Ionic Angular app;

ionic start ionic-demo blank --type=angular

Enter into the project folder:

cd ionic-demo=angular

You have reached into the app, now you need to run the command to evoke the app:

ionic serve

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Install App Version Plugin

In further step, use recommended commands to add Ionic native and Cordova app version plugin in ionic application.

ionic cordova plugin add cordova-plugin-app-version

npm install @ionic-native/app-version

Update App Version in App Module

Subsequently, you require registering the AppVersion module into Angular’s main app module class, due to which app version plugin’s methods will be available throughout the application.

Update app.module.ts file:

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

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: [
    AppVersion,
    { 
      provide: RouteReuseStrategy, 
      useClass: IonicRouteStrategy 
    }
  ],
  bootstrap: [AppComponent],
})

export class AppModule {}

Check Ionic App Information

You need to import platform and AppVersion modules into the TypeScript template; now, you can quickly get or check Ionic application’s information such as package name, application name, version number and version code.

Check Ionic Application Name

You have imported and injected the AppVersion module into the constructor, and now ionic app information methods are available in our ionic app. Hence access the getAppName() method, and it will display the application name on the view.

this.appVersion.getAppName().then(response => {
  this.appName = response;
}).catch(err => {
  alert(err);
});

Check Ionic Version Number

To get the version number of the application, access the getVersionNumber() method.

this.appVersion.getVersionNumber().then(response => {
   this.versionNumber = response;
}).catch(err => {
   alert(err);
});

Check Ionic Application Version Code

To get the application version of the Ionic application you must access the getVersionCode() method, it will fetch the version code of ionic app.

this.appVersion.getVersionCode().then(response => {
    this.versionCode = response;
  }).catch(err => {
    alert(err);
});

Check Ionic Application Pacakage Name

Lastly, access the getPackageName() method it will get the package name of the ionic app.

this.appVersion.getPackageName().then(response => {
    this.packageName = response;
  }).catch(err => {
    alert(err);
});

Final Example Code

We have collected all the functions at once hence following will be the final code that you need to add into the home.page.ts file:

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 {

  appName: string;
  versionNumber: string;
  versionCode: string|number;  
  packageName: string;

  constructor(
    platform: Platform,
    private appVersion: AppVersion
  ) {
      platform.ready().then(() => {
          this.appVersion.getAppName().then(response => {
            this.appName = response;
          }).catch(err => {
            alert(err);
          });

          this.appVersion.getVersionNumber().then(response => {
            this.versionNumber = response;
          }).catch(err => {
            alert(err);
          });

          this.appVersion.getVersionCode().then(response => {
            this.versionCode = response;
          }).catch(err => {
            alert(err);
          });

          this.appVersion.getPackageName().then(response => {
            this.packageName = response;
          }).catch(err => {
            alert(err);
          });          
      });
  }

}

Verily, now you can easily display App name, Pacakage name, Version code, and version number of an Ionic application, hence update the home.page.html file:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic App Version Demo
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <strong>Application name:</strong> {{ appName }}<br>
  <strong>Version number:</strong> {{ versionNumber }}<br>
  <strong>Version code:</strong> {{ versionCode }}<br>
  <strong>Pacakge name:</strong> {{ packageName }}
</ion-content>

Test Ionic Project

You can eventually test the ionic app version information, consequently you need to run the app on the emulator or actual device.

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

# Windows
ionic cordova platform add windows

Further, use command to create the build:

# iOS
ionic cordova build ios

# Android
ionic cordova build android

# Windows
ionic cordova build windows

Now, execute command to run the app:

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

# Windows
ionic cordova run windows -l

Ionic Get App Information

Summary

Ionic Angular get app version tutorial is over; in this comprehensive tutorial, we shared a simple method to find out how to get Application Version Code, Package ID and Package Name in the Ionic Angular application.

We have added one more weapon to our ionic development arsenal; now, you can easily show the ionic application’s current version on any application page. Similarly, you can effortlessly find out whether your ionic application’s current version is the latest.