Ionic-framework: URGENT: Ionic 4 - cordova run android shows blank screen

[fitkannadiga]

Below is my Ionic info:

Ionic:
**ionic (Ionic CLI)**            : 4.10.2 (/usr/local/lib/node_modules/ionic)
   **Ionic Framework**              : @ionic/angular 4.7.1
   **@angular-devkit/build-angular**: 0.12.4
   **@angular-devkit/schematics**    : 7.2.4
  **@angular/cli **                : 7.2.4
   **@ionic/angular-toolkit**        : 1.3.0

Cordova:
   **cordova (Cordova CLI)** : 9.0.0 ([email protected])
   **Cordova Platforms**    : android 8.0.0
  **Cordova Plugins**       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 19 other plugins)

System:
   **NodeJS** : v10.16.0 (/Users/raghavendrav/.nvm/versions/node/v10.16.0/bin/node)
   **npm**    : 6.10.1
   **OS**     : macOS Mojave
   **Xcode**  : Xcode 10.3 Build version 10G8

When i try to run the below command, the apk is loaded in the android device but shows only blank screen

ionic cordova run android

Not sure what exactly the issue is when i trued to change the based href from "/" to "./". It did load and showed the app but none of the functionalities were working.

Cordova plugin list

cordova-plugin-background-mode 0.7.2 "BackgroundMode"
cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-crop 0.3.1 "CropPlugin"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-filepath 1.5.1 "cordova-plugin-filepath"
cordova-plugin-firebase 2.0.5 "Google Firebase Plugin"
cordova-plugin-googleplus 8.0.0 "Google SignIn"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-insomnia 4.3.0 "Insomnia (prevent screen sleep)"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.1 "cordova-plugin-ionic-webview"
cordova-plugin-network-information 2.0.1 "Network Information"
cordova-plugin-screen-orientation 3.0.1 "Screen Orientation"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-telerik-imagepicker 2.3.2 "ImagePicker"
cordova-plugin-tts 0.2.3 "TTS"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-socialsharing 5.4.4 "SocialSharing"
es6-promise-plugin 4.2.2 "Promise"

Can you please help me in this concerns?

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

[fitkannadiga]

Below is the repo link.
https://github.com/fitkannadiga/FkMobile

[liamdebeasi]

Did you push your changes? I'm getting a "Page not found" error.

[fitkannadiga]

Pushed the code again. Can you please check now?

[Muromi-Rikka]

What is your Android version?

[fitkannadiga]

I am using 8.0.0 which is what the cordova installs by default.
I also checked using the below command and it also shows that as deault

ionic cordova platform ls

[liamdebeasi]

@fitkannadiga Is that repository public? I am still getting a "Page not found" error.

[fitkannadiga]

I am really sorry @liamdebeasi .It was private. Just not i made it public. hope you can see the repo now.

[liamdebeasi]

Thanks for the follow up. Are you able to reproduce this using an Ionic starter app? If not, are you able to provide a simpler reproduction case?

I am getting a blank screen when running the app on Android, but there are too many moving pieces for me to accurately understand if this is an Ionic issue or not. I would recommend trying to remove as many external dependencies as you can as a first step.

Thanks!

[fitkannadiga]

Thanks you @liamdebeasi . Using the started app, i did not find any issue. Will try removing few dependencies and give a try

[fitkannadiga]

Tried removing few of the unwanted plugins and now i am not able to build the app.
Below is my project properties.

# Project target.
target=android-28
android.library.reference.1=CordovaLib
android.library.reference.2=app
cordova.system.library.1=com.android.support:support-v4:24.1.1+
cordova.system.library.2=com.soundcloud.android:android-crop:1.0.0@aar
cordova.gradle.include.1=cordova-plugin-firebase/fitkannadiga-build.gradle
cordova.system.library.3=com.google.android.gms:play-services-tagmanager:17.1.1
cordova.system.library.4=com.google.firebase:firebase-core:16.0.8
cordova.system.library.5=com.google.firebase:firebase-messaging:17.5.0
cordova.system.library.6=com.google.firebase:firebase-config:16.4.1
cordova.system.library.7=com.google.firebase:firebase-perf:16.2.4
cordova.system.library.8=com.android.support:support-annotations:27.+

Need some help in getting the dependencies.

[JeongJun-Lee]

same here

[andypotato]

Same problem here using the stock "blank" template and running immediately with ionic cordova run android. No plugins or modules were added:

I/chromium( 4802): [INFO:mime_util.cc(161)] calling IsSupportedNonImageMimeType
I/chromium( 4802): [INFO:mime_util.cc(161)] calling IsSupportedNonImageMimeType
I/chromium( 4802): [INFO:synchronous_compositor_impl.cc(453)] [RegisterProgressCheckCallback] chromium.skipbeginmainframe=[] enable=[0]
I/chromium( 4802): [INFO:mime_util.cc(161)] calling IsSupportedNonImageMimeType
I/chromium( 4802): [INFO:mime_util.cc(161)] calling IsSupportedNonImageMimeType
I/chromium( 4802): [INFO:CONSOLE(10)] "The key "viewport-fit" is not recognized and ignored.", source: http://localhost/ (10)
I/chromium( 4802): [INFO:CONSOLE(1219)] "deviceready has not fired after 5 seconds.", source: http://localhost/cordova.js (1219)
I/chromium( 4802): [INFO:CONSOLE(1212)] "Channel not fired: onPluginsReady", source: http://localhost/cordova.js (1212)
I/chromium( 4802): [INFO:CONSOLE(1212)] "Channel not fired: onCordovaReady", source: http://localhost/cordova.js (1212)
I/chromium( 4802): [INFO:CONSOLE(1212)] "Channel not fired: onDOMContentLoaded", source: http://localhost/cordova.js (1212)
I/chromium( 4802): [INFO:CONSOLE(82689)] "Ionic Native: deviceready event fired after 3195 ms", source: http://localhost/vendor-es5.js (82689)
I/chromium( 4802): [INFO:CONSOLE(43062)] "ERROR", source: http://localhost/vendor-es5.js (43062)
I/chromium( 4802): [INFO:CONSOLE(667)] "TypeError: styles_1.forEach is not a function", source: http://localhost/main-es5.js (667)
W/chromium( 4802): [WARNING:password_handler.cc(205)] OnPasswordFormsRendered called
W/chromium( 4802): [WARNING:password_handler.cc(207)] OnPasswordFormsRendered IsEnabledSavePassword is false

You closed my original report #19080 as a duplicate of this, but I doubt they are related as @fitkannadiga mentions he has no issues with the starter app.

[Muromi-Rikka]

@andypotato you can lower @ionic/angular version try it

[andypotato]

@Muromi-Rikka thanks for the suggestion, however which version do you suggest to try?

Also lowering the Angular version is not trivial due to the number of packages and dependencies involved and will almost certainly cause issues with other angular / ionic packages.

[JayzeeHuang]

got a some issue here

ERROR TypeError: styles_1.forEach is not a function
at push../node_modules/@ionic/core/dist/esm-es5/chunk-84f6bf13.js.bootstrapLazy (http://localhost/vendor-es5.js:94018:18)
at http://localhost/vendor-es5.js:94551:69
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost/polyfills-es5.js:9910:26)
at Object.zone._inner.zone._inner.fork.onInvoke (http://localhost/vendor-es5.js:64363:33)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost/polyfills-es5.js:9909:52)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost/polyfills-es5.js:9669:43)
at http://localhost/polyfills-es5.js:10429:34
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost/polyfills-es5.js:9942:31)
at Object.zone._inner.zone._inner.fork.onInvokeTask (http://localhost/vendor-es5.js:64354:33)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost/polyfills-es5.js:9941:60)defaultErrorLogger @ vendor-es5.js:42110

[Muromi-Rikka]

@andypotato i only lower @ionic/angular version to 4.1.2 with angular version 7.2.2

[christiams]

Change node_modules/@ionic/core/dist/esm-es5/chunk-84f6bf13.js file line 1873:

styles_1.forEach(function (styleElm) { return globalStyles_1 += styleElm.innerHTML; });
styles_1.forEach(function (styleElm) {
            registerStyle(styleElm.getAttribute(HYDRATE_ID), globalStyles_1 + convertScopedToShadow(styleElm.innerHTML), true);
});

new lines

Array.prototype.forEach.call(styles_1, function(styleElm){
            return globalStyles_1 += styleElm.innerHTML;
});
Array.prototype.forEach.call(styles_1, function(styleElm){
            registerStyle(styleElm.getAttribute(HYDRATE_ID), globalStyles_1 + convertScopedToShadow(styleElm.innerHTML), true);
});

[andypotato]

Change node_modules/@ionic/core/dist/esm-es5/chunk-84f6bf13.js file line 1873:

I can confirm the solution by @christiams works, thank you very much! Just a note, in my case the file was called node_modules/@ionic/core/dist/esm-es5/chunk-d0403a2f.js

[JayzeeHuang]

@christiams Thanks for your solution. Building successfully but the style all broken on android 5.

[liamdebeasi]

Thanks for the issue! This issue has been resolved and is available in Ionic 4.8.0. For issues other than the blank screen, please open a new issue. Thanks!

[MihailMadzharovFalcon]

@liamdebeasi HI i am using Android 5.0.1 and the issue is still reproduced, also I am with the latest ionic version

[liamdebeasi]

@MihailMadzharovFalcon Please create a new issue as this one has been closed. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.