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.