Issues with Initializing a New Ionic 4 Android App

February 22nd 2019 Ionic 4 Cordova Android

The final release of Ionic 4 is a good incentive for migrating existing Ionic 2/3 applications to Ionic 4. Because of many changes required, the migration guide suggests moving the code to a new project instead of upgrading the project in-place.

The official documentation lists the required steps for creating the project and adding Android support to it:

ionic start project-name blank
cd ./project-name
ionic cordova prepare android
ionic cordova run android

The last command will build and run the application on a connected Android device or emulator. If you're using Cordova 8+, then the application will run fine. But if you're still using Cordova 7.1.0 (e.g. because of plugin-related breaking changes in Cordova 8), you'll only be greeted by a white screen when the application starts. If you look in the browser console, you'll find a bunch of errors for missing files:

Failed to load resource: net::ERR_FILE_NOT_FOUND

This is caused by the cordova-plugin-ionic-webview plugin which requires Android platform 6.4+ to work properly. Cordova 7.1.0 still installs version 6.3.0 of cordova-android platform, so the plugin doesn't work. The fix is quite simple - upgrade the Android platform to 6.4.0 (or any later version if all other plugins you depend on work with it):

ionic cordova platform remove android
ionic cordova platform add android@6.4.0

It's too bad that I haven't found the Cordova/Android version requirement mentioned anywhere in the Ionic 4 documentation. I spent a significant amount of time troubleshooting this issue because of that. I don't think it's safe to assume that most developers use the latest version of Cordova. It simply introduces too many breaking changes in every major version to make this feasible if you are maintaining projects for a longer time.

Copyright
Creative Commons License