How can I set the Android build version in an Ionic app?

Question

I have an Ionic app (v5/angular) which I'm building for Android. I'm trying to set config.xml widget properties such as version and android-versionCode , but my config.xml is overwritten each time I build the app. Based on extensive googling, I think there should be some way to set up my package.json so that it sets the widget properties in my config.xml , but I'm struggling to figure out how to do that.

My build script is: ng build && npx cap copy

Generated config.xml :

<?xml version='1.0' encoding='utf-8'?>
<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <access origin="*" />
  
  
</widget>

Desired config.xml :

<?xml version='1.0' encoding='utf-8'?>
<widget
  version="2.0.0"
  android-versionCode="2"
  xmlns="http://www.w3.org/ns/widgets"
  xmlns:cdv="http://cordova.apache.org/ns/1.0">

  <access origin="*" />

</widget>

My ionic.config.json :

{
  "name": "tutorial",
  "integrations": {
    "capacitor": {}
  },
  "type": "angular"
}

My capacitor.config.json :

{
  "appId": "com.me.app",
  "appName": "Tutorial",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {}
}

My package.json :

{
  "name": "tutorial",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-mobile": "ng build && npx cap copy",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "^0.803.24",
    "@angular/common": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@capacitor/android": "^2.4.0",
    "@capacitor/core": "2.4.0",
    "@capacitor/ios": "^2.4.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/geolocation": "^5.23.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "@ionic/storage": "2.2.0",
    "@microsoft/applicationinsights-web": "^2.5.6",
    "@okta/okta-auth-js": "^3.0.0",
    "@types/lodash": "^4.14.149",
    "angular-oauth2-oidc": "^9.0.1",
    "core-js": "^2.5.4",
    "lodash": "^4.17.15",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular/cli": "~8.3.23",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@capacitor/cli": "2.4.0",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/node": "~8.9.4",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project"
}

Answer 1

As far as I can tell, the generated config.xml isn't actually used with a Capacitor build and the version and build number are actually set in build.gradle :

apply plugin: 'com.android.application'

android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    defaultConfig {
        applicationId "com.me.app"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 2
        versionName "2.0.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

...

Answer 2

I'll offer what might be new information to help scenarios like this. The latest Ionic extension for VS Code has an option to easily update the version for your app. Once you use that it'll update a few locations for both iOS and Android automatically.