Menu
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:
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?
649
Ionic provides the same by using <ion-refresher> component to add a pull-down feature. The <ion-refresher> component provides pull-to-refresh functionality on a content component. An Ionic allows a user to use this pattern on a list of data using touch to retrieve more data.
To run your app, all you have to do is enable USB debugging and Developer Mode on your Android device, then run ionic cordova run android --device from the command line. Enabling USB debugging and Developer Mode can vary between devices, but is easy to look up with a Google search.
Remember ionic serve ? That was Live Reload working in the browser, allowing us to iterate quickly. We can also use it when developing on iOS and Android devices.
Press and hold all three buttons on the Ionic until you see the Fitbit logo.
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.
133
Likely not the issue for most people, but for me it was because I was running a VPN on my phone.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
