Hello there! Yes, we are actively working on this issue and intend to have it fixed for v4 final.

We did mistake by picking ionic 😃 everybody its time to move to REACT NATIVE @paulstelzer

3 month no fix its a shame

ionic team very slow and Bugs are unimportant to them

Well @liaoquanlei and others, this is a lesson you have to learn the hard way: never ever use beta software for a production-critical project or a production environment. Software in a pre-release state is made available by the community to allow other developers to get to know changes and new features, but it is not meant for use in production at all. Not just because it might be unstable or unreliable but also because there is no fixed API yet and things might and will change until such time a final release is made available. On some other side note: Android 5 was released in 2014 and is not officially supported by Google anymore. Due to the ignorance of most mobile device vendors the whole Android ecosystem is a nightmare of old and insecure versions. Supporting these versions with new software or apps is not forcing users to upgrade their device.

@shomid Ionic is open source with most of the developers being involved working free of charge for the project. We are all aware that Ionic 4 is still in Beta and under heavy development - if you need something stable, stick with Ionic 3 for now until 4 becomes GA. If you want to support the project feel free to test the beta releases, provide patches or donate money - just some general complaining doesn’t help anyone.

It’s more than a month and a core bug. Still no fix available from the Ionic team?

I did a mistake by picking Ionic. I should have selected ReactNative. Poor support from Ionic. Looks like the only Premium user will get the fix.

Please, don´t forget Android 4.4. It still has a significant share in some parts of the world.

Android 5 support is a very important issue. Migration to ionic4 is not possible unless supported Android 5 . When will this issue be completed? Can I know a rough schedule? We’re waiting.

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.

I spoke with someone from ionic, and they basically told me that a lot of fixes for old browsers are coming in the next beta. I was also told that if I build off the development branch that it would work, and I can confirm that the app then works on android 5. There were still some issues, but at this point it’s probably best to just be patient for the the next build.

Awesome! Took a bit (android updates and all) but I can replicate it. Looking into things

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

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

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

Let me summarize:

• Ionic is working on Android 4.4+ if adding the polyfills
• What’s not working with Ionic: Styles for Shadow DOM (here the dev team (@manucorporat) should take a look if a polyfill can fix this)
• ALL OTHER issues (at the moment) are related to Angular like @peternagy1332 mentioned (https://github.com/angular/angular/issues/27162) because this errors also occurs on Angular projects (without Ionic)

@netsesame2 please calm down a little bit. Ionic 4 is in BETA, so it’s normal that it’s not for production. So you have to wait or fork the repository and help them to make it work for Android 5 by publishing some PRs

still working on it? we are waiting 😕 for the solution

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.

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.

Using crosswalk basically solved all of my issues. Maybe not a long term solution, but it works for the time being.

Can we expect this in new beta 16?

yes， only works on Android 7.1 and above

On Mon, Oct 15, 2018, 23:12 Carlos Santos notifications@github.com wrote:

Not only with Android 5 but also Android 6.0 is not working. Could someone check that?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic/issues/15438#issuecomment-429893611, or mute the thread https://github.com/notifications/unsubscribe-auth/ABmNJvRs1cQc3oY2FWiWrSsMq0G1f1XLks5ulKXAgaJpZM4WWhhN .

–

from android

our team members bought a new phone to use ionic 4. Lol

@mhartington

https://github.com/dex4er/ionic-hello-world-sidemenu

The same with beta8:

ionic build
grep '=>' www/vendor.js

we may need another crosswalk?

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

@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 ?

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)

@paulstelzer

After adding the polyfills in polyfills.ts, the app is starting in Android 4.4 (in the emulator) with beta.16

Can you please name these polyfills?

Other than including it in beta 16, it would be great if you could make a commit available so we can help with testing.

@santosh-hegde , Ionic 4 is in beta. If you want a ready to use product go to Ionic 3.

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

@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: https://github.com/google/material-design-icons/issues/336

@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!

@bryce13950 Can you please provide some info on how to run Crosswalk with latest Ionic4 beta? I did succeed to build the project, and found kind “hackish” way to run it without errors but can’t get SVG icons to show. But there has to be more easy-straightforward way that works

I’ve created the gist with details what I did and asked on the forum https://forum.ionicframework.com/t/ionic4-with-crosswalk-webview-on-android-platform/148201

@JayzeeHuang how you know?our team has developed on ionic4. I need to know the exact time because we plan to release in December. my wechat(LesterLiao90). Add me.

I want to reiterate my previous comment to anyone that absolutely needs this to work on old versions of Android… If you use crosswalk then everything works fine. Your temporary solution is to use crosswalk.

ionic team no have plan for release,is time unlimit?

@JayzeeHuang how you know?our team has developed on ionic4. I need to know the exact time because we plan to release in December. my wechat(LesterLiao90). Add me.

@shaxxx Not absolute the case. For me, in China, I test some devices, most of Android 6.x+ can work, but 4.x, 5.x always blank page with errors, maybe most of the browser core has been customized by the manufactures.

Don’t believe it’s the issue with the webview. I believe issue is that compiled project (Ionic + Angular) expect that webview has some features but it doesn’t. I’m only guessing that in older webview implementations (like yours) features are not there and pollyfills just fill it, but in newer Webviews (Marshmallow ) some of the features are not implemented 100% (or not according to specs) and pollyfills doesn’t run at all (therefore blank screen).
Now if user has com.google.android.webview package as default system webview implementation it will probably work since Google Play will keep it updated with latest version. If it’s com.android.webview there’s nothing regular user can do.

Anyway, sorry for spamming the thread, just wanted to share my findings, hope it will help someone.

EDIT: Tested ionic cordova run android --debug with Android 7.0 and 7.1 emulators (WebView 52.0.2743.100), not working, no errors, only standard console info messages. Pollyfills uncommented. Oreo 8.0 (WebView in io.ionic.starter (58.0.3029.125)) works.

Let us test it with a fresh project.

1. Fork my repository: https://github.com/paulstelzer/test-ionic
2. Run npm install
3. Run npm run android
4. The app should now start on your device (if you are connected)
5. Check chrome://inspect/#devices

And for me at Android 4.4 (Chrome 30) it’s working:

As I said the only thing that isn’t working in this case is shadow dom. Maybe a polyfill could help

So guys, and now make the same!

I’d like to kindly inform you that this also breaks the polyfilling for Angular (6.x.x+). E.g. I can only see a blank page in Chrome 32.0.1847.114 alongside with this error: Uncaught SyntaxError: Use of const in strict mode.

/***/ "./node_modules/@ionic/core/dist/collection/utils/config.js":
/*!******************************************************************!*\
  !*** ./node_modules/@ionic/core/dist/collection/utils/config.js ***!
  \******************************************************************/
/*! exports provided: setupConfig, configFromURL */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "setupConfig", function() { return setupConfig; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "configFromURL", function() { return configFromURL; });
function setupConfig(config) {
    const win = window;

TEN DAYS after ‘needs:devicetesting’ state, our product can’t be publish waiting for this fix. Please give us some advises. Thanks. @brandyscarney @mhartington

I had the same issue. it works only on my android version 8. I wish the team will fix this soon 😃

@netsesame2, just wait and drink coffee. Maybe some cups of bears. We love Ionic so we can wait for their efforts. 👍 nice day friend. I did crosswalk and a lot of others. too

To confirm if crosswalk can give a solution, I try to install the crosswalk plugin on a fresh conference project. To activate crosswalk, it need to uninstall ionic-cordova-webview-plugin first, so cordova can invoke crosswalk as the webview engine.

By one day hard work on simulator, crosswalk give me a joke: it can’t work with the latest ionic-beta. Crosswalk navigator with the default URL: file:///android_asset/www/index.html, it throws me all JS files can’t be found error:

Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///polyfills.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///styles.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///cordova.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///vendor.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///main.js Failed to load resource: net::ERR_FILE_NOT_FOUND

so I change to run on a http url, it give me the same error as:

ERROR Error: Uncaught (in promise): TypeError: Object.values is not a function(…) core.js:1673
ERROR Error: Uncaught (in promise): TypeError: containerEl.commit is not a function(…) core.js:1673

BTW, the userAgent confirm that crosswalk is activated:

"Mozilla/5.0 (Linux; Android 6.0; Google Nexus 5X - 6.0.0 - API 23 - 1080x1920 Build/MRA58K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Crosswalk/23.53.589.4 Mobile Safari/537.36

Someone can make crosswalk to work on ionic 4?

@mhartington how long will we wait for this fix?

@bleuscyther let us know if it works and which Polyfills you add 😃

can someone give beta.11 a try?

ionic start ttt --type=angular npm install --save @ionic/angular@latest ionic serve, works fine ionic cordova platform add android@latest ionic cordova run android it fails, inpect with chrome and get the below error: btw,the webview version:

@bleuscyther

import { Market } from '@ionic-native/market/ngx'
import MobileDetect from 'mobile-detect'

declare interface NavigatorApp {
  exitApp (): void
}

declare interface Navigator {
  app: NavigatorApp
}

declare var navigator: Navigator

const ANDROID_VERSION_WITH_CHROME_WEBVIEW = 7
const CHROME_VERSION_WITH_CSS_GRID = 57

export class AppComponent {
  constructor (private market: Market) {
    void this.initializeApp()
  }

  async initializeApp (): Promise<void> {
    await this.platform.ready()

    const md = new MobileDetect(window.navigator.userAgent)

    if (md.is('AndroidOS')) {
      const androidVersion = md.version('Android') || 0
      const chromeVersion = md.version('Chrome') || 0
      if (chromeVersion < CHROME_VERSION_WITH_CSS_GRID) {
        if (androidVersion >= ANDROID_VERSION_WITH_CHROME_WEBVIEW) {
          alert(`Google Chrome (${chromeVersion}) is too old.\n\nTry to install newer version.`)
          await this.market.open('com.android.chrome')
        } else {
          alert(`Android System Webview (${chromeVersion}) is too old.\n\nTry to install newer version.`)
          await this.market.open('com.google.android.webview')
        }
        navigator.app.exitApp()
      }
    }
  }
}

But it works if:

1. All vendor.js and main.js are transpiled to ES5
2. There is an Android Market service

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.