[Ionic v4] Blank screen when running tabs project on Android without changing code

[basvdijk]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : android 6.3.0

System:

   ios-deploy : 1.9.2
   ios-sim    : 5.1.0
   NodeJS     : v9.9.0 (/usr/local/bin/node)
   npm        : 6.2.0
   OS         : macOS Sierra
   Xcode      : Xcode 9.2 Build version 9C40b

Environment:

   ANDROID_HOME : not set

Describe the Bug
Unable to build Android app from tabs starter

Steps to Reproduce
Steps to reproduce the behavior:

This works and shows the app running in my browser

ionic start myApp tabs --type=angular
cd myApp/
ionic serve

When running:

ionic cordova run android

With my Android device connected via usb I got a white screen. The console of the Android device gives:

styles.cc30f1d5d0942874a01d.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
runtime.5102c7f106242716eaa7.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
cordova.adc5592093abc0bc2eb2.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
polyfills.17fd7534d20949996e6f.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
main.16f37d6c80ab0ae66681.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/assets/icon/favicon.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

Expected Behavior
To see the tabs app running on the device

[matheusdavidson]

same here, with sidemenu layout, seems to be a problem with base_href or during the build process

[netsesame2]

I've got the same false.
Post a help in here: https://forum.ionicframework.com/t/blank-page-when-trying-ionic-v4/136761

[matheusdavidson]

Found the solution:

• cordova-android must be >6.4.0, yours is 6.3.0(just like mine was)
• ionic webview must be >2.0.0.beta.2

[netsesame2]

Yes, upgrade to 6.4.0, it works.
However, some old cordova plugins don't support 6.4.0 well....

[basvdijk]

@matheusdavidson Great! So basically somehow an old cordova-android version is injected in the package.json during the setup phase of the project when Android is added.

[copaste]

Here is my ionic info:

Ionic:

ionic (Ionic CLI) : 4.0.6 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.2
@angular-devkit/core : 0.7.3
@angular-devkit/schematics : 0.7.3
@angular/cli : 6.1.3
@ionic/ng-toolkit : 1.0.6
@ionic/schematics-angular : 1.0.5

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 6.4.0

System:

Android SDK Tools : 26.1.1
NodeJS : v10.6.0 (/usr/local/bin/node)
npm : 6.1.0
OS : Linux 4.13

Environment:

ANDROID_HOME : /home/ynikolov/Android/Sdk/

I have installed
"cordova-plugin-ionic-webview": "2.0.3",

My screen is blank and I can see this error in the console:

localhost/:9 The key "viewport-fit" is not recognized and ignored.
vendor.js:73772 Uncaught SyntaxError: missing ) after argument list

The issue for me appear for @ionic/angular 4.0.0-beta.3 as well

[marcelocanales]

I got the same error, my ionic info:

Ionic:

   ionic (Ionic CLI)          : 4.1.0 (/Users/Marcelo/.npm-global/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.4
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.0, (and 3 other plugins)

System:

   ios-deploy : 1.9.2
   NodeJS     : v10.4.1 (/usr/local/bin/node)
   npm        : 6.1.0
   OS         : macOS High Sierra
   Xcode      : Xcode 9.4.1 Build version 9F2000

Environment:

   ANDROID_HOME : not set

My screen is blank
Error in the console:

The key "viewport-fit" is not recognized and ignored.
vendor.js:69667 Uncaught SyntaxError: Unexpected token function

@copaste, Did you find any solution?

[marcelocanales]

Apparently the problem is with compatibility of asynchronous functions, I'm not sure, but in my case the error is on line 69667 in vendor.js

This corresponds to a util async function of ionic core

I inspected the application from Chrome and found this:

async function attachComponent(delegate, container, component, cssClasses, componentProps) {
...

This function can be found in:

 /node_modules/@ionic/core/dist/collection/utils/framework-delegate.js

I also did the following test in console:

> var fun = function(){}
< undefined
> fun
< function(){}
> var asyncFun = async function(){}
VM257:1 Uncaught SyntaxError: Unexpected token function  <-------- ERROR

Finally, I checked the browser version:

navigator.userAgent
"Mozilla/5.0 (Linux; Android 6.0.1; SM-G925I Build/MMB29K; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/52.0.2743.98 Mobile Safari/537.36"

[marcelocanales]

Finally I solved the problem by updating the Android System Webview in my Android 6. However, I believe that the ionic code could be transpilated to an previous version of ECMAScript or avoid the use of features not compatible with the old versions of Android System Webview, for example, async functions , to offer compatibility with previous versions of the Android System Webview, since this is independent of the Android version.

I would like to point out that I did tests with Vanilla Apache Cordova and I did not have problems with the old Android System Webview. Ionic should do the same.

[mhartington]

Merging with #15282