Livereload.js & net::ERR_CONNECTION_REFUSED problem on device

ionic-v1
1

Hi !

I’ve got a serious problem about my livereload since I upgraded Ionic CLI to the latest version (3.5) with the latest Cordova CLI (7.0).

The said problem is the one described by the title of this topic: I can’t manage to get the livereload.js script to get loaded when using this command:

$ ionic cordova run android -l

This not only occurs in my own project, but it also occurs with a completely fresh demo app (the tabs one).

This is exactly what I did:

$ ionic start myproject --type ionic1

Then, after selecting the tab template and all the components had been fetched:

$ ionic cordova run android -l

The CLI asks me to install the @ionic/cli-plugin-cordova plugin, which I did. It then automatically added the platform (cordova platform add --save android), starts the server and run the app on my Android device.
The app bundles itself with no error, and launched correctly on the device.

But I’ve got this error in my Chrome console:

Failed to load resource: net::ERR_CONNECTION_REFUSED (livereload.js)

And that prevents the livereload feature to behave as expected: the server detects that a file changed, but the app on the device doesn’t autoreload ; I have to manually hit Ctrl+R from the console for it to reflect the actual changes.

Doing so reloads the app all right, and I see the modifications, but the previous error is now:

GET http://localhost:35730/livereload.js?snipver=1 net::ERR_CONNECTION_REFUSED (10.192.114.17/:52)

FYI, I’ve posted a StackOverflow question directly related to this problem.

Finally some misc information:

  • My device is connected to my computer via USB
  • My device is connected to internet
  • Both my computer and my device are on the same network

I’ve seen many topics on this forum related to connection problems or net::ERR_CONNECTION_REFUSED, but they were either too old (and so not using the latest CLI), or related to CORS problem with some external API calls, which it not the case here, since the tabs app is completely offline.

Thanks for any help !

2

Post your ionic info output please.
Post your ionic cordova run android -l output please.
Post your config.xml while running livereload please.

My guess: The IP the CLI thinks should be used is not reachable from your phone.

3

Hi!

That’s also my latest guess. I tried accessing the refused address directly from my computer, and the script showed up. I tried doing the same from my device (even with the port forwarding on), and that failed with the same reason : Connection Refused.

But I don’t understand why my device can’t connect to this particular adress.

Anyway, here’s my ionic info output: https://gist.github.com/Tazaf/486059268f03190daddaf4d194ccc847

Here’s my (quite long) ionic cordova run android -l output: https://gist.github.com/Tazaf/dec0f998ccdd4845f1ace1c53bb5d8fa

Here’s my config.xml file (copied while running the livereload): https://gist.github.com/Tazaf/c222fc68fc40efa026e53e8405f14289

(I’ve put them up in Gist to keep the thread readable)

4

Yep, that 10.192.114.17 IP seems to be the problem. Do you recognize it?
What is your real IP in the internal network? MAybe you can work around the problem using --address=
Livereload sometimes offers a list of IPs to choose from - did you get this sometime?

5

I do recognize this 10.192.117.14 IP, since it is indeed my computer’s IP on my network :wink:

Livereload asked my some times to chose my address when launching, but this was only due to VirtualBox having created two virtaul network card on my computer, which I deactivated since, specifically to avoid having to chose my IP :slight_smile:

The problem seems to be coming more from the script tag injected in my index.html when running livereload.

<script src="//localhost:35729/livereload.js?snipver=1" async="" defer=""></script>

This is a line that is absent in my source file, and this is this address that my device is apparently not able to reach.

This is the refused address I was speaking about in my previous post:

6

Ok, can you access http://10.192.114.17:8100 in the browser on your phone to see the app when livereload is running? (Then I was on the wrong track after all… the IP is all good - problem is that livereload.js doesn’t use it)

7

Indeed I can.
It pops a lot of alerts when I do that (probably due to the fact that my app uses a lot of native plugins, unavailable from the browser), but ultimately, yes, I can see my app’s layout.

By that, would you mean that I should see something like the following line injected in my index.html instead of the one I previously pasted?

<script src="http://10.192.114.17:8100/livereload.js?snipver=1" async="" defer=""></script>

By the way, thanks for taking the time to help me on this one :thumbsup:

8

That is my thinking, yes. But I don’t have too much experience with livereload. Someone who has it working should check if it is this way for them.

9

This might be relevant: https://github.com/ionic-team/ionic-cli/commit/37170327b1d8b9bee99524a9d698230b5d0cf7bd (Fixing livereload on device for Ionic 1… maybe so you are encountering a bug)

10

Oho!
You’re absolutely right, it seems extremly promising!

Thank you very much for this.
I don’t know why I didn’t thought about searching for issues in GitHub…

I’ll wait for the next releases of both @ionic/cli-plugin-ionic1 and @ionic/cli-plugin-cordova then :wink: