Simple Ionic 3 App Not Working on Android Device

Ionic Framework ionic-v3
1

A simple hello world ionic 3 app working perfectly fine on ionic serve command in browser but when I run it using any of the following commands i am getting an error of “Couldn’t connect to the server. (http://localhost:8080/)”:

Commands:

ionic cordova run android
ionic cordova run android (with liverelad)

I have also done

Also done:

<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

removed and added again whitelist and webview (also removed permanently) plugins also removed and added back the android platform.

Also disabled the firewall. Already on same network / wifi (both mobile and pc).
I have searched each and every forum / website pertinent to this error and also tried all the solutions but none of them worked.

I am using genymotion emulator but getting same error on that.

Ionic Info:

Ionic:

ionic (Ionic CLI) : 4.0.1 (C:\Users\PC\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.11

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0

System:

Android SDK Tools : 26.1.1
NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
npm : 4.0.0
OS : Windows 7

Environment:

ANDROID_HOME : C:\Users\PC\AppData\Local\Android\Sdk

My plugins:

ionic cordova plugins
-> cordova plugin ls

cordova-plugin-device 2.0.2 “Device”
cordova-plugin-ionic-keyboard 2.1.2 “cordova-plugin-ionic-keyboard”
cordova-plugin-ionic-webview 2.0.2 “cordova-plugin-ionic-webview”
cordova-plugin-splashscreen 5.0.2 “Splashscreen”
cordova-plugin-whitelist 1.3.3 “Whitelist”

Please help me to solve this problem. Positive response highly appreciated.

plugins
plugins.png1366×768 182 KB

Screenshot_2018-08-01-13-47-56
Screenshot_2018-08-01-13-47-56.png720×1280 72.4 KB

2

How did you build and install the app?

Create a new app with ionic start, add the Android platform and build and run that please. Does it work?

4

Hello dumdem

Which android version has your device?

I’m having the same problem (and message) while testing on an Android v.4.4.3 smartphone, a blank app I’ve just created with ionic start MyApp blank

I think it’s because the app uses the cordova-plugin-ionic-webview, and that plugin requires Android >= 5;
as they say on their github: https://github.com/ionic-team/cordova-plugin-ionic-webview#requirements

I’m still trying to find a workaround.

1 Like
5

Good catch @carlosjfuentesp!

Do you know why Android suddenly needs a local webserver for the webview as well?
I would try to fork the plugin, remove the Android parts, and just use the iOS parts.

6

I think it’s caused by the last release of the cordova ionic webview plugin.

The plugin last (non-beta) release was 10 days ago, and it seems that it broke some things.
Release list: https://www.npmjs.com/package/cordova-plugin-ionic-webview?activeTab=versions

In their github, the developers said:
The origin for requests from the Web View is http://localhost:8080.

(See Migrating to 2.x section: https://github.com/ionic-team/cordova-plugin-ionic-webview)

It seems that they chose to change and that affected the previous Android devices.

7

I was able to make my app work on Android v. 4.4.2, replacing the cordova-plugin-ionic-webview version 2, with version 1.2.1

The commands I used where these:

cordova plugin rm cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview@1.2.1
ionic cordova platforms remove android
rm -rf plugins
ionic cordova build android
6 Likes
8

No it is not working. It is working perfectly on the browser but not working on geny motion and android device.

9

Thank you for your response.

My android version is 4.3

10

I am using windows OS

  • ionic cordova platforms remove android (should I run this command?)
  • rm -rf plugins ( error: rm command not found )

when I run:

ionic cordova run android

It show white screen of death on my mobile and nothing displayed. :frowning:

11

@dumdem Like he said, the problem is about the Android version (in your case, 4.3) and the new version of the cordova-plugin-ionic-webview.

So you can run:

cordova plugin rm cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview@1.2.1
ionic cordova platforms remove android
rm -rf plugins
ionic cordova build android

The above will:

  1. Remove the cordova-plugin-ionic-webview that you are using.
  2. Install version 1.2.1 (that supports Android 4.4+, though I don’t know about 4.3).
  3. Remove the android platform (to add again later).
  4. Remove the plugins (to add again later, they should be defined in the config.xml file).
  5. Add the Android platform and the plugins it depends on, and build your app.

ionic cordova platforms remove android (should I run this command?)

I advise you to run it because sometimes the plugins won’t install correctly without a fresh install (just make sure you don’t have made any manual changes to files in the /platforms/android/ folder, and instead used build/hook scripts to populate it).

rm -rf plugins ( error: rm command not found )

If you are on Windows you can just delete the plugins folder in your project, instead of running this command (like with the platforms folder, just make sure you don’t have made any manual changes to files in the /plugins/ folder).

It show white screen of death on my mobile and nothing displayed.

First run the above commands and only after running them successfully try to run your app.

If the error persists, try to create a blank project and then run it in an Android device to see if it works.

1 Like
12

For future readers of this topic:

If the device you are testing on is using Android 4.x (e.g. Android 4.4 KitKat), this article might explain what is going on and how to fix it: https://ionic.zone/debug/ionic-and-android-4

13

Thanks friend for help its work

14

After the change cordova-plugin-ionic-webview to version 1.21 I got a new error.
Please help. I need to run the app on android 4.1

Screenshot_2019-01-13-12-21-38
Screenshot_2019-01-13-12-21-38.png720×1280 131 KB

15

Crosswalk is your only hope, then, but it’s EOL so I would highly suggest rethinking how important supporting <4.4 is for you.

16

I solved the problem by adding the following line to config.xml.

<preference name=“loadUrlTimeoutValue” value=“700000” />

However, now the image from the assets folder is not shown.

Screenshot_2019-01-13-13-04-31
Screenshot_2019-01-13-13-04-31720×1280 96.9 KB

In code they are written like this.

<img src=“/assets/imgs/main-icon-4.png” style=“width: 48px;” />

How to spell them so they are visible?

17

need:

<img src=“assets/imgs/main-icon-4.png” style=“width: 48px;” />

18

I tried this instructions here but It does not work with me.

cordova plugin rm cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview@1.2.1 // I tried with latest but It didn't work
ionic cordova platforms remove android
rm -rf plugins
ionic cordova build android

here is my ionic info :

Ionic:

   ionic (Ionic CLI)  : 4.10.3 (C:\Users\ach\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : not available

System:

   Android SDK Tools : 26.1.1 (C:\Program Files\sdk-tools)
   NodeJS            : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.7.0
   OS                : Windows 10

Any idea please ?

19

My ionic4 app is working with browser and samsung not working with my phone show error when call the api

bugreport
Screenshot_2019-08-19-10-15-44-151_com.miui.bugreport.png1080×2160 238 KB