Check Ionic App Version, Package Name, Version, Number

Last Updated on March 4, 2024 by Digamber in Ionic

This is a comprehensive Ionic, 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 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:

sudo 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

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

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.

npm i cordova-plugin-app-version --legacy-peer-deps

npm install @ionic-native/app-version --legacy-peer-deps

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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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


@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    AppVersion,
    { 
      provide: RouteReuseStrategy, 
      useClass: IonicRouteStrategy 
    }
  ],
  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.

Run Ionic Application

Run the following command to add the devices.

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

# Windows
ionic cordova platform add windows

Execute following command to build app:

# iOS
ionic cordova build ios

# Android
ionic cordova build android

# Windows
ionic cordova build windows

Start the app in the device.

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

# Windows
ionic cordova run windows -l

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.