Ionic --live-reload not running app on device

Question

I can't see my ionic app on my phone when using the --live-reload parameter.

I am using Windows 8.1 and a connected Nexus 5 Android device. The app is the sample sidemenu app created with ionic start demo sidemenu.

---

When I run ionic run --live-reload, I first get presented by a list of possible IP addresses:

Multiple addresses available.
Please select which address to use by entering its number from the list below:
Note that the emulator/device must be able to access the given IP address
 1) 192.168.0.109 (Wi-Fi)
 2) 192.168.159.1 (VMware Network Adapter VMnet1)
 3) 192.168.174.1 (VMware Network Adapter VMnet8)
 4) 192.168.56.1 (VirtualBox Host-Only Network)

I choose option 1 - this is the IP address of my development PC, that is hosting the ionic server.

---

Ionic confirms this selection, and confirms it is serving to the ports as below:

Selected address: 192.168.0.109
Running live reload server: http://192.168.0.109:35729
Watching : [ 'www/**/*', '!www/lib/**/*' ]
Running dev server: http://192.168.0.109:8100

I confirmed that it is serving the page by opening Chrome on my PC and navigating to http://192.168.0.109:8100

---

When the app runs on the Android device, it first displays the splash screen, then shows the webview with the error:

Web page not available
The Web page at http://192.168.0.109:8100/ could not be loaded as:

net::ERR_ADDRESS_UNREACHABLE

---

This has also been reported on the Ionic forums:

• Ionic Forums - Livereload error: Webpage not available

---

As far as I can tell, I have opened up TCP ports 35729 & 8100 on my Windows machine (using Control Panel - Firewall settings).

What must I configure so that I can see my Ionic app on my device?

Answer 1

The above configuration was all correct.

The ports needed to be open in Windows Firewall - but the missing step was requiring a reboot after updating the Firewall settings.

After a reboot, everything is working correctly.

Answer 2

Looks like you are facing a CORS issue.

Install & configure cordova-plugin-whitelist shall correct your issue

Answer 3

Likely not the issue for most people, but for me it was because I was running a VPN on my phone.

Answer 4

Easy, you can use this command in cmd and this is work well :

ionic serve --address 0.0.0.0

Answer 5

if you don't want to struggle with the firewall, use the host option:

ionic capacitor run android -l --host=172.20.10.10

Answer 6

None of the answers above worked for me, I checked for which network was my phone connected and which network my laptop was connected. Since they were different, I made them connect to the same network and it resolved this issue.

Answer 7

What worked for me (with no changes to any project config files or to my firewall settings):

$ ionic cordova run android -c -l --address=10.0.0.2 (use your local IP address here)

My setup:

• My Android phone (running Android 7.1.1) is connected via usb cable to my Windows desktop computer.
• The address used is the local IP address for the desktop computer, which I got from www.whatismybrowser.com

All the commands I used to get livereload working on my Android phone with a new ionic 3 project:

$ ionic start testLivereloadProject1 tabs
$ cd testLivereloadProject1
$ ionic cordova platform add android
$ ionic cordova run android -c -l --address=10.0.0.2 

(-c is console, -l is livereload)

Note: It was initially very slow loading onto the phone (the splash screen went by, then it was solid white for a while), but once it loaded, the livereload worked well.

Answer 8

I'm way late to this but my config.xml generated the following line somewhere in my build process:

<content src="http://10.0.0.25:8100" original-src="index.html"/>

I fixed it by changing it back to <content original-src="index.html"/> (without the src="http://10.0.0.25:8100")

Answer 9

Check your CLI version with ionic info.

Live-reload stopped working for me as the OP described, I had to revert to 4.12.0 in order to get it up and running again.