Ionic 4 won't work in android 5

[santosh-hegde]

Bug Report

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

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (/Users/myname/.nvm/versions/node/v9.4.0/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.5
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5

Cordova:

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

System:

   Android SDK Tools : 26.1.1 (/Users/myname/Library/Android/sdk/)
   NodeJS            : v9.4.0 (/Users/myname/.nvm/versions/node/v9.4.0/bin/node)
   npm               : 6.4.0
   OS                : macOS High Sierra

Describe the Bug
When I do ionic serve and open it in Android Lollipop's browser, Its giving below error.
Uncaught SyntaxError: Use of const in strict mode. vendor.js:71605

[yuankunluo]

Cordova-ionic-webview plugin does not work well on Android under version 7.0 . Because Android system webview on these devices are outdated. This is a big problem for us, Android 6 is currently the most popular Android OS

[c350156378]

we may need another crosswalk?

[santosh-hegde]

@yuankunluo , Can we use different web view?
It's not working in browsers as well. This was not the case with Ionic 3.
Angular 6 apps work on these devices.

[yuankunluo]

@santosh-hegdeI fell so bad right now, my team decide to use Ionic V4 to build our company's app ( i am the leader and I recommend them to use Ionic ).
But now the most devices in China are on Android 6 and Android 7.0.0.
My boss asks me how to solve this problem.
Have no idea, I think ionic-team will fix this problem soon. Yeah, this is my Hope.
:/

[santosh-hegde]

@yuankunluo , Not sure when will they fix it.
In India, I need to support Android 5 at least in browsers.
Till then I can't release my app. I don't see any response from @IonicProSupport as well.

This is a serious issue and should be fixed as soon as possible.

[dex4er]

It is because @ionic/core package is not transpiled to ES5. You can fix it by:

git clone https://github.com/ionic-team/ionic
cd ionic
npm i
cd core
npm i
npm run build
$EDITOR tsconfig.json # replace setting: "target": "es5"
npm run tsc
find dist -name '*.d.ts' -delete
npm pack

then in ionic-core-4.0.0-*.tgz archive will be version transpiled to ES5 rather than to ES6 so vendor.js would be ok.

[santosh-hegde]

@dex4er , How to use ES5 converted ionic core in my project?

[dex4er]

@santosh-hegde copy your generated dist directory to your node_modules/@ionic/core/dist or just npm i ionic-core-4.0.0-*.tgz ?

Above procedure worked for me: application just started rather than showing only white page. Most of ionic components failed because they're not compatible with older CSS standards and missing shadow-DOM in the browser. But at least you can check the version of the browser and redirect user to Android Play for newer Webview or Chrome.

[doender]

Why don't you use Crosswalk to solve this?

[santosh-hegde]

@doender ,

Crosswalk will increase the application size. And I can't support old Android browsers.

[paulstelzer]

For me it's working under Android 6 and the ionic webview cordova plugins supports Android 5+

[santosh-hegde]

@paulstelzer ,

If I build the ionic project for the browser, will it work in Android 5 with ionic webview cordova plugin??

[dex4er]

@santosh-hedge it works if Android Webview package is up to date. That's why I check version number of navigator.userAgent and redirect to market page if it is too old.

[yuankunluo]

@dex4er , this is maybe a solution for users in your area, in China we don't have a unified market like Google Play Store, every manufacturer has its own market and a lot of APK websites. It is hard to redirect the user to some good place to upgrade their System Web View. Especially some tech giant's APK website ( Tencent's YinYongBao for instance) required the user to install their market app first.

This is a very bad experience.

[yuankunluo]

An Android device manufactured by Meizu with Flyme Os ( base on Android 7.0.0) still failed with Blank Screen. Debug information is still syntax error in vendor.js.

We have downloaded the newest Android System Web View APK but it does not help.
Hope Ionic-team will pay some attention to this problem.

[c350156378]

refers to #15191

[mhartington]

Hi there. Can you please make sure you have the latest beta (beta 7). This was an issue in stencil that is fixed now.

[dex4er]

@mhartington i see no any difference:

find node_modules/@ionic/core/dist -name '*.js' | xargs grep -r '=>'

node_modules/@ionic/core/dist/collection/utils/transition.js:const iosTransitionAnimation = () => import('./animations/ios.transition');
node_modules/@ionic/core/dist/collection/utils/transition.js:const mdTransitionAnimation = () => import('./animations/md.transition');
node_modules/@ionic/core/dist/collection/utils/transition.js:    return new Promise((resolve, reject) => {
node_modules/@ionic/core/dist/collection/utils/theme.js:            .filter(c => c != null)
node_modules/@ionic/core/dist/collection/utils/theme.js:            .map(c => c.trim())
node_modules/@ionic/core/dist/collection/utils/theme.js:            .filter(c => c !== '');
node_modules/@ionic/core/dist/collection/utils/theme.js:    getClassList(classes).forEach(c => map[c] = true);

etc...

[mhartington]

Searching in core is expected to show ES6/arrow functions. As we include both ES5 an ES6 versions of the components. Please provide a test project on github to debug.

[dex4er]

@mhartington components are ES6 version only:

~/src/js/ionic-hello-world-sidemenu$ grep '=>' www/vendor.js | tail
            // this operation has side effects => route state is being affected
        .map(entry => entry.split('='))
        .map(([key, value]) => [decodeURIComponent(key), decodeURIComponent(value)])
        .filter(([key]) => startsWith(key, IONIC_PREFIX))
        .map(([key, value]) => [key.slice(IONIC_PREFIX.length), value])
        .forEach(([key, value]) => {
        cssClasses.forEach(c => el.classList.add(c));
    return (...args) => {
        platforms.forEach(p => classList.add(`plt-${p}`));
    return Object.keys(PLATFORMS_MAP).filter(p => PLATFORMS_MAP[p](win));

This is an empty project generated with ionic start ionic-hello-world sidemenu --type=angular

[bleuscyther]

hi @dex4er nice, what is the minimum browser version you check? Ios/android...
Can you provide a code snippet ?

[gudtkd928]

It sounds like a very good sound.
We look forward to the ability to support older browsers. Even if Android 4.4 is not supported, We hope it will be supported with Android 5 at all.
We will pray for the Ionic development team.

[netsesame2]

good news

[yuankunluo]

Emulators Test Results:

Andorid 6.0 Api 23: Blank Screen
Android 7.0.0 Api 25: Perfectly run

[shaxxx]

@bryce13950 What webview version where you testing with? Bug is not related with Android version, but with webview version. If it's lower than 54 it didnt work.
I havent tested current branch, but there where 32 commits since beta16 and none one of them seems to be assocciated with this bug. I wouldnt get my hopes high.
Good news is Ionic 4 final version is slated for January, and by then we'll know if this is something that's going to be fixed, or this "feature" is "by design".

[bryce13950]

@shaxxx I'm honestly not sure what web view it was, and I honestly don't know how to do that. Can you give me some instructions on how to do that?

[shomid]

Guys ^^ If you want to get a feature FASTER or support more (older) browser and devices, please add a PR to fix the issues you have. Just being mad or angry helps nobody. The teams works hard and they already fixed a lot of things. With beta.17 a lot of more browsers will supported

still problem not solved in old browser in beta17.

[amitairos]

Is support for Android 4.4 in the plan?
I've tested, and only running the app as a PWA from Chrome works in Android 4.4.2. The APK shows a blank white screen (error is The key “viewport-fit” is not recognized and ignored.)

[paulstelzer]

It would be great if you guys could test a BLANK angular project first and tell us if this works before using Ionic components in it.

Somewhere in the issues I posted a summary about Angular / Ionic and Android Support, but cannot find it.

The most problems who exist come from Angular because there is an issue it's not working on older Android devices (with an older Webview app). If you add the polyfills the app starts, but the Ionic components have no styles (missing polyfill)

[bryce13950]

Is support for Android 4.4 in the plan?
I've tested, and only running the app as a PWA from Chrome works in Android 4.4.2. The APK shows a blank white screen (error is The key “viewport-fit” is not recognized and ignored.)

Was this on the emulator? There are specific problems with the android emulators, but a real device should work.

[yixiaohou]

@paulstelzer May I ask about the approximate release time of the final version? Which version is the minimum fit?

[bleuscyther]

@yixiaohou i think next January we will have RC1

[shaxxx]

@paulstelzer I've tried with all the polyfils from polyfills.ts and it's not working. By not working I mean I'm getting blank screen on webview version 44 with all the polyfills uncommented. No console errors, no devcat errors.

My latest tests

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (C:\Users\isako\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\Program Files (x86)\Android\android-sdk)
   NodeJS            : v8.12.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

Test procedure

npm install -g ionic@latest
ionic start beta17 sidemenu --type=angular
cd beta17
// uncomment all imports from src/polyfills.ts
//add 
//  import 'core-js/es6/promise';
//to src/polyfills.ts
npm install --save classlist.js
npm install --save web-animations-js
ionic cordova run android

Lenovo A2010
Android Lollipop 5.1
Chrome (56.0.2924.87)
WORKING

Samsung Galaxy Nexus I9250
Android KitKat 4.4.4
WebView (33.0.0.0)
NOT WORKING - page is displayed, styling is wrong and sidemenu is not working

Android x86 Emulator
Android Marshmallow 6.0
WebView (44.0.2403.119)
NOT WORKING - BLANK SCREEN

Now, let's test standalone Angular project

Angular CLI: 7.0.7
Node: 8.12.0
OS: win32 x64
Angular: 7.0.4
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.7
@angular-devkit/build-angular     0.10.7
@angular-devkit/build-optimizer   0.10.7
@angular-devkit/build-webpack     0.10.7
@angular-devkit/core              7.0.7
@angular-devkit/schematics        7.0.7
@angular/cli                      7.0.7
@ngtools/webpack                  7.0.7
@schematics/angular               7.0.7
@schematics/update                0.10.7
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

Test procedure

ng new ngtest
cd ngtest
//uncoment these imports from src/pollyfills.ts
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/weak-map';
 import 'core-js/es6/set';
//add 
 import 'core-js/es6/promise';
//to src/polyfills.ts

ng serve --host 192.168.5.11

Lenovo A2010
Android Lollipop 5.1
Chrome (56.0.2924.87)
WORKING

Samsung Galaxy Nexus I9250
Android KitKat 4.4.4
WebView (33.0.0.0)
WORKING

Android x86 Emulator
Android Marshmallow 6.0
WebView 44.0.2403.119
WORKING

Conclusion: Angular is working just fine on tested devices. Ionic 4 is not working on Android Webview < 54. Yes, I know some of you will have Ionic 4 working on KitKat 4.4, or Lolipop or Marshmallow, but it only means these devices are running Android Webview version 54 or later (by mercy of system updates and ROM providers). Even stock Nougat (Android 7.0 & 7.1) is coming with Webview 52 and Ionic 4 will not work on these devices (this is very limited number of devices since most of manufacturers upgraded this, but they still exist).

Ionic 3 is working like a dream on all tested devices/emulators.
Why I'm not using Ionic 3 then?
We're starting new project and decided to use Ionic4 since we can afford ourselves to wait for final release (expected in January) and in meantime use project with some bugs. What worries me is a lack of response and interest from ionic-team for this. This is most commented and most referenced Ionic bug and after 3 months all we have is "needs investigation" which makes me wonder will this ever work.

@mhartington is there anything community can do anymore? There is no error to work with, and we've provided more than enough feedback. Is this something you're looking/working on at this moment? Do you have plans? If not, can you at least provide the info if this is considered to be bug, and not something that's just being left out. I think that would be fair to all people starting with Ionic4 projects.

[JayzeeHuang]

Still not work on android 5.1 assuming 5.0 as well.
I also uncommented the browser polyfills.

`Ionic:

ionic (Ionic CLI) : 4.5.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.17
@angular-devkit/build-angular : 0.10.6
@angular-devkit/schematics : 7.0.6
@angular/cli : 7.0.6
@ionic/angular-toolkit : 1.2.0

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.2, browser 5.0.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 9 other plugins)

System:

NodeJS : v8.12.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61`

The key "viewport-fit" is not recognized and ignored. cordova.40f64ace16b48f01b75c.js:1 Could not find cordova.js script tag. Plugin loading may fail. main.66716d4408c5ac7dc3dd.js:1 Uncaught TypeError: undefined is not a functionmain.66716d4408c5ac7dc3dd.js:1 (anonymous function)main.66716d4408c5ac7dc3dd.js:1 e.createmain.66716d4408c5ac7dc3dd.js:1 (anonymous function)polyfills.e85d13d70973b7dee557.js:1 t.invokemain.66716d4408c5ac7dc3dd.js:1 _inner.e._inner.fork.onInvokepolyfills.e85d13d70973b7dee557.js:1 t.invokepolyfills.e85d13d70973b7dee557.js:1 e.runmain.66716d4408c5ac7dc3dd.js:1 t.runmain.66716d4408c5ac7dc3dd.js:1 t.bootstrapModuleFactorymain.66716d4408c5ac7dc3dd.js:1 push.zUnbruntime.33b5587f759870258c9b.js:1 tmain.66716d4408c5ac7dc3dd.js:1 push.0runtime.33b5587f759870258c9b.js:1 truntime.33b5587f759870258c9b.js:1 druntime.33b5587f759870258c9b.js:1 amain.66716d4408c5ac7dc3dd.js:1 (anonymous function) main.66716d4408c5ac7dc3dd.js:1 Ionic Native: deviceready event fired after 215 ms

[JayzeeHuang]

I also tried on android 9, flashed and force closed without any messages.
BTW, Ionic 3 app works on android 5 to android 9.

[yiannis-spyridakis]

It might be interesting to see whether Ionic 3 with angular 6+ is working on devices that Ionic 4 isn't working. In my recent experience I think it does (and hence the errors are not angular related). Of course we need a more systematic approach on this, has anyone tested this?

[shaxxx]

Ok, to make things more clear I've created simple plain HTML + Javascript example HERE

It's just index.htm file with Ionic components similar to sidemenu starter.
There is no Angular, Vue or some other 3rd party framework.
Only Ionic components & polyfills loaded from CDN. And again it's not working even with WebComponents polyfills that includes Shadow DOM v1 support. I've got the page rendered on Webview 33 (even with Webview version 44) but sidemenu is not working, and styles are wrong. You can see it here. Obviously I included entire core.js polyfills to support old browsers. No errors in console.
On webview 54 and greater works just fine.

If I remove WebComponents polyfills page renders just fine but sidemenu is not working.

[shomid]

Unresolved issue in beta 17.
Though the ionic team had promised to solve the problem in beta 17.
Is the ionic team lied?

There are no schedules
There is no clear timetable for the future
Unfortunately, the ionic team is unplanned
The base has a problem
ionic is not reliable

[amitairos]

@paulstelzer We're with you, supporting Ionic and believing in it and in the team and community!

We'd be very happy to see this fixed, but unfortunately I'm not experienced enough to find the issues.

If there is any hint to what the problems are, please post it here and maybe the community can help.

A warm thank you!

[shomid]

@shomid Ionic is a COMMUNITY framework, so everyone can make PRs. Instead of complaining it would be great if everyone can help by fixing issues, send PRs and make Ionic even better. Ionic 4 is using MODERN web features, so it's normal that older devices have problems with it. A lot of polyfills already included to make it work in older devices, but some are still missing.

So all in all, please stop being mad and help by sending PRs. And if Ionic is not reliable, then use another framework. A lot of people working on it and invest a lot of time. But you did not even send one PR to solve any problems. Think about it! Ionic is only so strong as the community!

the ionic team had promised to solve the problem in beta 17.
Unresolved issue in beta 17.
this problem very important.
When resolve this problem ?

[doender]

Unresolved issue in beta 17.
Though the ionic team had promised to solve the problem in beta 17.
Is the ionic team lied?

There are no schedules
There is no clear timetable for the future
Unfortunately, the ionic team is unplanned
The base has a problem
ionic is not reliable

As said earlier, just use Crosswalk if you're on a tight schedule. We're using it and it works fine on Android 4.4.

[shaxxx]

@doender Is there any way you can make repository with Ionic4 starter project + Crosswalk?
I've tried it here but it's hacky and SVG icons are not shown. Or at least provide details how to do it? Polyfills didn't help.
It would be much appreciated. Thanks.

[doender]

@shaxxx Could it be because ligatures are not supported?

For compatibility on Android 4.4 I'm using the material icon set using <i class="material-icons">&#xE87F;</i> instead of <i class="material-icons">feedback</i> since quite a long time.

Maybe there's a better solution for this but I've never found it.

This might also be relevant: google/material-design-icons#336

[shaxxx]

@doender Thanks for the tip, I will try it. But I'm more concerned about the way I made it "work". It just doesn't seem right with all the workarounds. That's why I asked if someone (you?) can provide basic starter project that has this working?

[comino]

I kinda disagree with the "COMMUNITY framework" argument. This is not an everyday-opensource project made by volunteers. The Ionic framework is backed by a company which bases its revenue stream on this framework and communicates trustworthiness to users, that you can build serious products with this. And the communication of Ionic 4 beta is - "Ionic 4 is recommended for new projects". The CLI asks me if I want to use Ionic 4 for new products not mentioning, that this is still very unstable. etc.

I'm not ranting, but the "just do a PR" argument which is in 90% of the cases valid, doesn't cut it here. This mission-critical issue here has class 1 bug (@shaxxx etc) reports and is just ignored for months. And there are other ciritcal bugs ignored as well.

I'm a loyal Ionic user since version 1, spend money and time and feel too emotional invested to just move on to React Native.

To bring at least something productive to the table: I can exactly reproduce @shaxxx report ...
I tried to make it work with crosswalk - without any success so far.

[mhartington]

Locking this for now. The conversations are getting too heated over here.

We are aware of this issue and have been working to fix it for some time. The main issue here is that there seems to be a constant stream of things that need to either be polyfill or reworked in order to support older Android. And to add to this, the android emulator is not always the best test ground

As the older android emulators are not connected to google play, they do not receive updates to the browser, meaning that though a real android 5 device might have chrome 70, the emulator is stuck on chrome 37 (~1% of the global market), which is a drastically different environment.

While we are making fixes internally in both stencil and ionic/(core,angular), devs can enable Angular Polyfills to fix some older features.

For most cases though, people will not be seeing "older" webviews that devs are getting in the Android emulator. They will be getting new chrome (70+) and all the latest web features.

We will we continuing to address this issue and make sure things work as expected.

[adamdbradley]

Numerous fixes for Android 5 and browsers without es6 support went into beta.18. Closing this issue. Please create a new issues for any specific problems found. Thank you.