Home > Blockchain >  Ionic, "cordova" not included in platforms, native plugins not working
Ionic, "cordova" not included in platforms, native plugins not working

Time:02-28

I have inherited an Ionic 5 project with Angular and Cordova - not Capacitor. It is using a couple of native plugins, namely QR Scanner and In-app Browser. The application works fine when launching in the Android emulator using:

ionic cordova run android

Now I want to build an APK that I can distribute to a few testers to give the application a try. This APK has to be built using a specific configuration to connect to a pre-production environment (using Firebase, but that shouldn't matter I guess). The process I am using is:

ionic build --prod --platform=android --configuration=preprod
ionic cordova prepare android --no-build --prod
ionic cordova build android --no-build --release
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore <PATH_TO_KS> <PATH_TO_APK> <KEY_NAME>
zipalign -v 4 <PATH_TO_APK> <PATH_TO_SIGNED_APK>

Now the signed APK installs correctly to the emulator and the application starts AND connects to the pre-production environment. But the native plugins (e.g. QR Scanner) do not work. The error I am getting is Native: tried calling QRScanner.prepare, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator. It seems that Cordova is not active because when printing the platforms, they do not include the "cordova" string:

import { Platform } from '@ionic/angular';

constructor(private platform: Platform) {...}

ngOnInit() {
  this.platforms = this.platform.platforms().join(',');
}

The result of this.platforms is android,phablet,cordova,desktop,hybrid when running with ionic cordova run android, but is just android,phablet,desktop when installing the APK I built with the process above.

Do you have any ideas why? I am quite new to mobile development, so you can absolutely assume I have made newbie mistakes. And if you feel that any other information would be useful, please let me know and I will happily add it.


EDIT: In order to support the preprod configuration, I added the following sections in angular.json:

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "configurations": {
            "preprod": {
              ...
}}}}}}}

Building with just ionic cordova build android yields the following error:

> ng run app:ionic-cordova-build:preprod --platform=android
An unhandled exception occurred: Configuration 'preprod' is not set in the workspace.

This is why I am building in 3 phases, ionic build ... --configuration=preprod, ionic cordova prepare ..., ionic cordova build android --no-build. My intention is for the first to build the app in the correct configuration, the second to update the Android project with the web files built with the configuration and the third to build the final APK.

CodePudding user response:

The simple normal way of building a new app for debug (apk) is just calling

ionic cordova build android

This calls prepare internally, so no need for another call. It will produce an apk file that you can use for testing on devices (and possibly emulators depending on functionality).

When it's time to release to the store, considering this is a new app and Google's requirements have changed, you need to build a .aab file. The following will do that:

ionic cordova build android --release

As for signing, you need to provide the key to Google and they will sign it for you via the .aab provided. This is explained in more detail here:

https://ionicframework.com/blog/google-play-android-app-bundle-requirement-for-new-apps/

Now, if you need to create a custom configuration (what you're referring as preprod) because you have some very specific angular environment changes or requirements, outside of what the defaults have to offer, as you found out in the comments, you will need to edit the angular.json file to add it.

Ionic by default provides a structure for environment variables, which can be found in src/environments. More details about how this works can be found here:

https://medium.com/swlh/environment-variables-in-angular-ionic-8aa1698f2cc5

  • Related