Ionic-framework: Application not working on Android KitKat 4.4.2

[TheMohanraj]

Ionic 2
Blank page was displayed for kitkat.
Can you please update the minimum version required for ios, android in the documentation.

[dylanvdmerwe]

KitKat is definitely supported. However I do suggest using the Crosswalk plugin for anything below Android 5.

[jgw96]

@dheran would you be able to tell me what version of ionic you were working with when you got this issue? There was a known issue with beta.4 that would cause white screens on some android devices. Also as far as android support goes we officially support android 4.1 and above, but we recommend you use crosswalk for anything below 4.4.4.

[TheMohanraj]

i tried beta 5

[TheMohanraj]

My managers will fire me for apk size if i use crosswalk

[TheMohanraj]

I tried beta 6 too. I'm getting blank page only.
I can't use crosswalk because of size constraints.

[jgw96]

@dheran Sorry about this! Are you getting any errors in the console?

[iignatov]

@dheran How about Crosswalk Lite which is approximately half the size of the regular Crosswalk?

I also tested an Ionic 2 app on Android 4.4 and it's working, i.e. the problem might be somewhere else.

Could you provide more details about the problem that you're facing, e.g. error info, stacktrace, etc?

[TheMohanraj]

@jgw96 @iignatov

Yes there were errors (Android 4.4.2).

04-27 17:38:28.562: I/chromium(5160): [INFO:CONSOLE(30929)] "EXCEPTION: TypeError: Cannot redefine property: length in [{{appt.formattedDate | date : 'yMMMdjm'}} in PlayersListPage@19:29]", source: file:///android_asset/www/build/js/app.bundle.js (30929)
04-27 17:38:28.562: I/chromium(5160): [INFO:CONSOLE(30929)] "ORIGINAL EXCEPTION: TypeError: Cannot redefine property: length", source: file:///android_asset/www/build/js/app.bundle.js (30929)
04-27 17:38:28.562: I/chromium(5160): [INFO:CONSOLE(30929)] "ORIGINAL STACKTRACE:", source: file:///android_asset/www/build/js/app.bundle.js (30929)
04-27 17:38:28.562: I/chromium(5160): [INFO:CONSOLE(30929)] "TypeError: Cannot redefine property: length
04-27 17:38:28.562: I/chromium(5160): at defineProperty (native)
04-27 17:38:28.562: I/chromium(5160): at Function.Object.defineProperty (file:///android_asset/www/build/js/angular2-polyfills.js:1083:17)
04-27 17:38:28.562: I/chromium(5160): at freezeArray (v8/i18n:2004:8)
04-27 17:38:28.562: I/chromium(5160): at initializeLocaleList (v8/i18n:286:8)
04-27 17:38:28.562: I/chromium(5160): at resolveLocale (v8/i18n:1812:4)
04-27 17:38:28.562: I/chromium(5160): at initializeDateTimeFormat (v8/i18n:1149:7)
04-27 17:38:28.562: I/chromium(5160): at new Object.defineProperty.value.ax (v8/i18n:1227:8)
04-27 17:38:28.562: I/chromium(5160): at Function.DateFormatter.format (file:///android_asset/www/build/js/app.bundle.js:28941:25)
04-27 17:38:28.562: I/chromium(5160): at DatePipe.transform (file:///android_asset/www/build/js/app.bundle.js:6118:37)
04-27 17:38:28.562: I/chromium(5160): at AbstractChangeDetector.ChangeDetector_PlayersListPage_2.detectChangesInRecordsInternal (viewFactory_PlayersListPage:943:105)", source: file:///android_asset/www/build/js/app.bundle.js (30929)
04-27 17:38:28.562: I/chromium(5160): [INFO:CONSOLE(30929)] "ERROR CONTEXT:", source: file:///android_asset/www/build/js/app.bundle.js (30929)
04-27 17:38:28.582: I/chromium(5160): [INFO:CONSOLE(30929)] "[object Object]", source: file:///android_asset/www/build/js/app.bundle.js (30929)

@iignatov already my apk size was 12 MB. Crosswalk Lite would consume additional ~15 MB which will double the size of the apk and also I'm instructed to keep the apk size less.

[iignatov]

@dheran It seems that there's a problem with the Angular polyfills on Chrome 35 or older:

• bug: number pipe not working on Chrome 34 or older (Cannot redefine property: length)
• Angular 2 currency pipe doesn't work in chrome Version 34.0.1847.131 m
• Angular 2 chatroom: I'm using old version of Chrome (35.0.1916.114)

[jgw96]

@dheran are you using the date pipe available in angular 2?

[TheMohanraj]

@jgw96 yeah

[jgw96]

Ahh, OK, so that's probably where the issue is coming from. Would you mind doing a test without the date pipe usage and see if you still get a white screen? Thanks!

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[windwp]

same issue on android browser :+1:
it happen only with datepipe in angular 2

[jgw96]

Hello @windwp! Ionic 2 does not currently support the Android browser, although we do support chrome for Android. The date pipe uses the internationalization API which is not supported in older browsers such as the Android browser. Sorry for any hassle that causes you, and thanks for using Ionic!

[TheMohanraj]

Will it be fixed or it should be handled by developer?

[jgw96]

Hey @dheran! The date pipe is actually built into Angular 2, so there's not much we can do on the Ionic end of things for it. As I stated before, we do require crosswalk for support of Android devices older than 4.4, and that does fix the date pipe issue for those versions of Android, but I'm not sure we will ever be able to support the Android browser, as it just does not have the html5 and JavaScript support Ionic 2 needs. Have you been able to give crosswalk lite a try? This should give you the Android support you need, but with a smaller apk size.

[windwp]

Don't worry about it
Now i create a custom pipe use momentjs for display date.
@dheran

[chandanch]

Hello I'm facing the same issue as well, The Toolbar alignment breaks up in android 4.4 and below. When I first installed the app on Android 4.4.2 I got a blank screen. It works perfectly on Android 5.0 and above. What could be the issue for this? Is this issue resolved in beta 25?

[dylanvdmerwe]

@jgw96 I think this issue needs to be made clear in the docs somewhere to use Crosswalk for apps on Android < version 5.

[Geoffrey-D]

+1 for @dylanvdmerwe.

@jgw96 I think that the ionic team should be really clear about what features don't work on low-end phones or old android versions. As we speak, around 55% of android users have android <=4.4

For some who want an easy solution for the date pipe, you can use angular2-moment and then use their pipe :

{{myDate | amDateFormat:'LL'}}

This works on KitKat 4.4 (tested on 4.4.2)

[somnathbm]

Same issue for me except that no click or tap event is firing on the app running in Kitkat (API Level 19) on emulator or physical device. Thing's working fine above Kitkat.

the build process is successful without a single error. And no error is being thrown in the debug or stacktrace log or at least I couldn't see it.

I'm using Ionic 2 beta 27 with Typescript. And I've only tested on Android because I don't have other platforms setup yet. And apart from the providing cordova plugin during android build process I am not using any other cordova plugin.

[chethangowda]

@jgw96 is there any other way to use ionic 2 app in below 4.2 version mobiles "other then Crosswalk".
Pls.. Give some clarity.. Thanks..

[dylanvdmerwe]

Not as far as I know. It's a limitation of the older Android web engine that does not support things that Ionic needs. This is why you use Crosswalk so that the web engine is much more up to date on these older Android operating systems.

[Xdabier]

Having same issue on ionic 3.0.1 and android 4.4.2
any help or suggestions please ? ..

[chandanch]

@xdabier did you try with crosswalk. For 4.4 it's recommended to use crosswalk

[Xdabier]

@chandanch I did try crosswalk but the problem is it makes the file too huge, which is not handful..

[chandanch]

@Xdabier one alternative would be to maintain two binaries one with crosswalk which supports android 4.4 and the other without crosswalk which will support 5 and above

[Xdabier]

@chandanch I got you.. should I remove the crosswalk plugin everytime I want to build for 5 and .. and install it back when building for 4.4 ? or there's a way over that ?

[chandanch]

@Xdabier Thats the only way as of now. Not sure if there is a way to disable crosswalk during the build process somewhere in the gradle build files maybe?

[Geoffrey-D]

To my opinion you should always use crosswalk for any Android version you target. A few more mb will probably not bother anyone and it will make your build process easier and your app more consistent. Keep It Simple!

[chandanch]

You can use cordova build --release -- --minSdkVersion=21 this will use the systemwebview instead of crosswalk

[Xdabier]

that's what I needed thanks a lot! ^^

[EverettZ]

Is there any solid solution to this problem yet? I attempted to install crosswalk. When I build and run on my 4.4.2 device, it get this message:

Crosswalk info: After much discussion and analysis of the market, we have decided to discontinue support for Android 4.0 (ICS) in Crosswalk starting with version 20, so the minSdkVersion of Cordova project is configured to 16 by default.

Does that mean Im out of luck for api levels bellow 20?

Also, my app will actually run (very slowly) when simply using:
ionic cordova run android

but not when a release build is used or if I manually add optimize flags:
ionic cordova run android --optimizejs --minifycss --minifyjs

[rohitwebethics]

I am working on ionic1 app and app is not working on android tablet v5.1, app is just showing white screen. Please help.

[chandanch]

@rohitwebethics can you try remote debugging the application. You will find the root cause of it,

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

[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.