Ionic-cli: Application Error - The connection to the server was unsuccessful

[gchan82]

Description:
When trying to launch emulator with Ionic 4 project, I am getting errors.
I am running command in VS Code bash command line:
ionic cordova emulate android --livereload --verbose
I am getting the following error last time -
[cordova] Command finished with error code 0: C:\Users\Gary\AppData\Local\Android\Sdk\platform-tools\adb.exe -s,emulator-5554,shell,am,start,-W,-a,android.intent.action.MAIN,-nio.ionic.starter/.MainActivity

Steps to Reproduce:

1. Download My Github repo: https://github.com/gchan82/heartstoneLibApp
2. run npm install
   +/-3. launch android studio emulator (Nexus 6, API 28 or Pixel 2, API 23)
3. run: ionic cordova emulate android --livereload --verbose
4. You will see errors (on Windows 8.1)

If I do not perform part 3 above, I get this constantly looping:
[cordova] Command finished with error code 1: C:\Users\Gary\AppData\Local\Android\Sdk\platform-tools\adb.exe -s,emulator-5584,shell,getprop,dev.bootcomplete
[cordova] Running adb shell command "getprop dev.bootcomplete" on target emulator-5584...
[cordova] Running command: C:\Users\Gary\AppData\Local\Android\Sdk\platform-tools\adb.exe -s emulator-5584 shell getprop dev.bootcomplete

Output:
Emulator shows: System UI isn't responding X Close app, or Wait.
Emulator shows: Application Error - The connection to the server was unsuccessful (http://192.168.103.129:8100)
Upon clicking "OK", screen turns white.

When I ctrl+c to stop the process, I get this error:
ionic:cli-framework:utils:process error while killing process tree for 7700: { Error: Command failed: taskkill /pid 7700 /T /F
ionic:cli-framework:utils:process ERROR: The process "7700" not found.
ionic:cli-framework:utils:process
ionic:cli-framework:utils:process at ChildProcess.exithandler (child_process.js:275:12)
ionic:cli-framework:utils:process at emitTwo (events.js:126:13)
ionic:cli-framework:utils:process at ChildProcess.emit (events.js:214:7)
ionic:cli-framework:utils:process at maybeClose (internal/child_process.js:925:16)
ionic:cli-framework:utils:process at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
ionic:cli-framework:utils:process killed: false,
ionic:cli-framework:utils:process code: 128,
ionic:cli-framework:utils:process signal: null,
ionic:cli-framework:utils:process cmd: 'taskkill /pid 7700 /T /F' } +2s
ionic:cli-framework:utils:process onBeforeExit handler: error from function: { Error: Command failed: taskkill /pid 7700 /T /F
ionic:cli-framework:utils:process ERROR: The process "7700" not found.
ionic:cli-framework:utils:process
ionic:cli-framework:utils:process at ChildProcess.exithandler (child_process.js:275:12)
ionic:cli-framework:utils:process at emitTwo (events.js:126:13)
ionic:cli-framework:utils:process at ChildProcess.emit (events.js:214:7)
ionic:cli-framework:utils:process at maybeClose (internal/child_process.js:925:16)
ionic:cli-framework:utils:process at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
ionic:cli-framework:utils:process killed: false,
ionic:cli-framework:utils:process code: 128,
ionic:cli-framework:utils:process signal: null,
ionic:cli-framework:utils:process cmd: 'taskkill /pid 7700 /T /F' } +12ms
ionic:cli-framework:utils:process onBeforeExit handler: exiting (exit code 0) +11ms

My ionic info:
ionic (Ionic CLI) : 4.3.1 (C:\Users\Gary\AppData\Roamingnpmnode_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.3
@angular-devkit/build-angular : 0.7.4
@angular-devkit/schematics : 0.7.4
@angular/cli : 6.1.4
@ionic/angular-toolkit : not installed

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : android 7.1.4, browser 5.0.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 3 other plugins)

System:

Android SDK Tools : 26.1.1 (C:/Users/Gary/AppData/Local/Android/sdk)
NodeJS : v8.11.4 (C:Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 8.1

Other Information:
I have tried updating adb.exe, & updating android studio.
I have tried:
ionic cordova platform rm android
ionic cordova platform add android
Updating to Nexus 6, API 28 (was using Pixel 2, API 23)

[adamduren]

Same here ionic info output below

Ionic:

   ionic (Ionic CLI)             : 4.10.1 (/Users/adamduren/.nvm/versions/node/v10.14.1/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.2
   @angular-devkit/schematics    : 7.2.2
   @angular/cli                  : 7.2.2
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 8.0.0, browser 6.0.0, ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.0, (and 18 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/adamduren/Library/Android/sdk)
   ios-sim           : 7.0.0
   NodeJS            : v10.14.1 (/Users/adamduren/.nvm/versions/node/v10.14.1/bin/node)
   npm               : 6.6.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[adamduren]

To add more information. The livereload option is looking for a server on port 8100 when it should be using the port specified in angular.json (4200). I tried updating the command to manually specify the port but to no avail ionic cordova run android -l -p 4200 --address 0.0.0.0.

I suspected the angular server is not listening on all interfaces which I confirmed by trying to go to the app from my mobile web browser. Next I updated the ionic-cordova-serve task in angular.json and added "host": "0.0.0.0". This also had no effect.

My best guess is this functionality got passed over in the ionic@4 upgrade. Would be nice to know if anyone else has had success with this.

[adamduren]

Also had to add the following to my config.xml file to get past a net::ERR_CLEARTEXT_NOT_PERMITTED error popup.

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
    <application android:usesCleartextTraffic="true" />
</edit-config>

[imhoffd]

@adamduren Those sound unrelated to the original issue (emulator not working on Windows 8). Would you mind creating a new issue (or issues, if there are multiple) and including command output?

[adamduren]

@dwieeb I think the original issue is misleadingly described and it is indeed
related.

I am getting the same "Application Error - The connection to the server was unsuccessful (http://192.168.103.129:8100)" message but instead of it being on an emulator it's on my device.

Instead of it being unrelated I believe it instead suggests that the problem is independent of wether it's on a device or emulator.

Tomorrow I will recreate the issue on the emulator as well to prove the theory.

[imhoffd]

Thanks for clarifying!

Are you able to see your app on the 8100 port if you open your browser to the URL (or http://localhost:8100)? If so, it is likely unrelated to the port configuration and more of an issue with your device or emulator not being able to use your computer's LAN IP. The device has to be on the same wifi network as the computer (which is not a concern with emulators).

You can also use livereload with port forwarding. Since it sounds like you're using android, you can use adb reverse tcp:8100 tcp:8100 (adb docs) and then run ionic cordova run with --address=localhost (cli docs).

As for the 4200/8100 disparity: the Ionic CLI does not read angular.json. It assigns a port programmatically; i.e. it will use 8100, then 8101 if 8100 is in use. I believe hard-coding a port to use for an app is not supported, but it could be made into a feature request. Since we always pass --port to the Angular CLI, it probably doesn't use the configured port in angular.json.

If you notice any disparity in configuring ng run app:serve vs ng run app:ionic-cordova-serve, it is likely an issue with the locally installed @ionic/angular-toolkit.

[adamduren]

@dwieeb thanks for the advice. I was able to resolve my issue, although I'm not sure it will resolve the OPs. Here are some notes based on that.

My first issue was the net::ERR_CLEARTEXT_NOT_PERMITTED which I posted above. I'm not sure if Ionic is supposed to add this automatically but according to this SO post it's required in Android 8+ without HTTPS.

The resolution for the second issue where I got the "Application Error - The connection to the server was unsuccessful" message to me is still unclear. Uninstalling the app beforehand seems to have made the difference but I have been unable to get back to the broken state since so that's probably a coincidence.

Anyways for me on OSX I was able to get it working on both the emulator and on a device. The only strange behavior is that I have to manually launch the app from the app launcher. The CLI . says LAUNCH SUCCESS but really the only thing that happens is the long press of the background that reveals the background options.

[imhoffd]

@adamduren Sounds like an underlying Cordova issue. I'm curious if using native-run instead of Cordova run will work better for you. To try the (experimental) alternative flow, npm i -g native-run, then:

$ ionic cordova run android -l --native-run

[miqmago]

Same problem with --native-run

[imhoffd]

@miqmago I doubt it's the exact same problem. Please create a new issue and fill out the template and post full command output.

[miqmago]

I could solve net::ERR_CLEARTEXT_NOT_PERMITTED problem with @adamduren https://github.com/ionic-team/ionic-cli/issues/3759#issuecomment-469881409 solution config.xml file, which created android:usesCleartextTraffic="true" option inside Androidmanifest.xml.

Have to note that the application didn't compile with modified config.xml so I had to remove the modifications while keeping Androidmanifest.xml updated so the application compiled correctly. If I remove the option android:usesCleartextTraffic="true" from AndroidManifest.xml, the problem appears again.

Not sure if the problem is related, but after deep googling for net::ERR_CLEARTEXT_NOT_PERMITTED this is the only place where I found a solution.

[pisouris]

Yes, to me, this place is the only clears about the solution. Thanks
I changed the AndroidManifest.xml like miqmago said it and it worked without problem.

[monisamjad]

I also did the same as @miqmago and @adamduren suggested. Working fine now.

[Guttz]

As mentioned by @miqmago, just edit:
yourapp.../platforms/android/app/src/main/AndroidManifest.xml and add the following tag:

....
android:usesCleartextTraffic="true"
....>

Works fine here.

[leobaccili]

Also had to add the following to my config.xml file to get past a net::ERR_CLEARTEXT_NOT_PERMITTED error popup.

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
    <application android:usesCleartextTraffic="true" />
</edit-config>

If you get error on build, add
xmlns:android="http://schemas.android.com/apk/res/android" in widget tag of config.xml

[PhillippOhlandt]

Weird, android:usesCleartextTraffic="true" is not working for me. The error remains.

[Bounteous17]

Also had to add the following to my config.xml file to get past a net::ERR_CLEARTEXT_NOT_PERMITTED error popup.

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
    <application android:usesCleartextTraffic="true" />
</edit-config>

If you get error on build, add
xmlns:android="http://schemas.android.com/apk/res/android" in widget tag of config.xml

It works perfect, the compilation already works

[imhoffd]

I have a proposed fix in a PR to our starters here: https://github.com/ionic-team/starters/pull/756/files

This fix allows cleartext traffic, but only for localhost. Using <application android:usesCleartextTraffic="true" /> will allow cleartext for everything, which may not be what you want to do for apps in production.

[parveen-chhillar]

Same error for me ==> net::ERR_CLEARTEXT_NOT_PERMITTED
Any solution,

[imhoffd]

There are many solutions listed in this issue. For those encountering this problem, I recommend implementing the changes we made to the Ionic starters (now released): https://github.com/ionic-team/ionic-cli/issues/3759#issuecomment-491325903

If this doesn't work for you, please create a new issue.