ionic android white screen after showing the splas

Question

I have built an apk file using ionic cordova build android. And I have opened that app using Genymotion emulator. When I opened the app, it starts and displays the splash screen. After that a white screen appears forever (I can close the app. But when I start that again, same thing happens).

I have captured the error in the android studio console.

Here they are,

And then I have opened the main.js file in that apk. In line 40, I have found this code.

Then I browsed the scanner.ts in pages (./pages/scanner/scanner.ts) folder. I did not find anything wrong. It works when I run that using cordova run browser.

scanner.ts

Here are some more information on my setup:

npm list -g --depth=0
+-- babel@6.23.0
+-- babel-cli@6.24.1
+-- cordova@7.0.1
+-- ionic@3.5.0
-- nodemon@1.11.0

Installed platforms:
  android 4.0.0
  browser 4.1.0
Available platforms:
  blackberry10 ~3.8.0 (deprecated)
  webos ~3.7.0
  windows ~5.0.0

Thanks for reading this post. If you know what causes this. Or how to resolve this issue, Please let me know.

Answer 1

You just need to add a new virtual device with the exact API version of your Android SDK and the white screen will go.

Answer 2

Changing the target value in the tsconfig.json from es6 to es5 has worked.
Eg. "target": "es6" >>> "target": "es5"

Note: This problem will not automatically happen to the project unless you declare that explicitly.

Answer 3

The best of clarity is to find error، error on the emulator.

Debug Ionic Android Application On Mobile Devices or Emulators.

Inspect elements and network monitor, the same way you do with websites. Use chrome dev tools, write chrome://inspect/#devices in chrome address bar and hit enter. It will open the following page in your browser, showing all devices and hybrid applications running on it.

Now clicking on inspect will open the same inspection window like web page. See the following image for visual understanding.

For more info