Ionic-cli: ionic run --livereload <PLATFORM> does not work for a connected device

[zarko-tg]

ionic run -l --device android
while having a ( Android Nexus 5 ) device attached over USB to the host PC.

Setup Live Reload
Running dev server: http://localhost:8100
Running live reload server: http://localhost:35729
add to body class: platform-android
...
BUILD SUCCESSFUL
Total time: 8 seconds
WARNING : No target specified, deploying to device '04cb950a8291ddab'.
Using apk: C:\live\platforms\android\ant-build\live-debug-unaligned.apk
Installing app on device...
Launching application...
LAUNCH SUCCESS

is fine but the application shows the following right after being installed and started up:

The app itself was created from one of the inbuilt templates with ionic-cli 1.2.0

Both host PC and device are connected to the same wireless network, and the application is trying to talk to localhost for live (re)loading. It should instead connect to the actual assigned IP address of the host PC. Isn't it so?

[mathiasmuller4sh]

Hi, I got same error with GS4 and mac book pro.
Cli live reload works like a charm on ios simulator
ionic emulate ios --livereload --consolelogs

[zarko-tg]

The culprit are the dynamic changes to the content node in
in platforms\android\res\xml\config.xml ( that's if you're building / running for Android ).
What's generated is <content original-src="index.html" src="http://localhost:8100" />

Just to test I hacked my local node_modules\ionic\lib\ionic\cordova.js a bit,
hardcoding my PC's IP address like
jsonConfig.widget.content[0].$.src = 'http://192.168.1.100:8100';

and then the magic worked.

A bug or unfinished implementation, I cannot see the livereload feature working without addressing this issue.

[mathiasmuller4sh]

You are right it is working with this patch.
Digging a bit further, i found that serve.js only use found ipV4 adresses if there is only one matching requirement.

changing
return 'http://' + (addresses.length ===1 ? addresses[0] : 'localhost') + ':' + port;
to:
return 'http://' + (addresses.length > 0 ? addresses[0] : 'localhost') + ':' + port;

works for me and avoid hardcoding.

Ok i'am lucking that the rigth ip adress is the first found.
looks like there more filter to add in this method but documentation is quite poor..
http://nodejs.org/api/os.html#os_os_networkinterfaces

[zarko-tg]

An alternative implementation could be to make use of IP address utilities for Node.
I've used https://www.npmjs.org/package/ip in at least one project or script. Sometimes just by using ip.address() will get you far.
That being said, I am not acquainted with the ionic-cli code and requirements so evaluation and decision needs to be made by the owners.

[mathiasmuller4sh]

Sure.
An CLI option aside --livereload-port (--livereload-host ? ) could also be easy quick fix

[zarko-tg]

@mathiasmuller4sh: It would also be neat if we learn how or get the possibility to run a single server and hook up one Android and one iPhone to it via the livereload utility. It'd definitely save time, at least in cases where the two apps are built on different machines :)

[konsultaner]

+1 for --livereload-host

[adamdbradley]

@zarko-tg @mathiasmuller4sh I've created a beta version for testing. When there are multiple IPv4 addresses to choose from, it'll ask you which one to use. Please run npm install -g [email protected] and let me know how it works for you. Thanks

[mathiasmuller4sh]

Works nice !
Good job Adam thanks !

Multiple IPv4 addresses available.
Please select which address to use by entering its number from the list below:
1) 10.33.33.168 (en0)
2) 25.56.196.15 (ham0)
3) 10.8.0.10 (tun0)
IP Selection: 1
Selected IP: 10.33.33.168
Running dev server: http://10.33.33.168:8100
Update config.xml for live reload: content[src="http://10.33.33.168:8100"]

[mathiasmuller4sh]

Hum on S4 device i got a black screen after splashscreen.
Ok with IOS simulator...
have to dig that..

[adamdbradley]

@mathiasmuller4sh Can you use --consolelogs flag and see if the index file is even being requested? Is your phone's browser able to access that IP address?

[mathiasmuller4sh]

My bad wifi was off ..
need rest i think ..
everythings is ok
Thanks again
Mathias

[adamdbradley]

Cool, thanks for testing it!

[igorprado]

I've selected a wrong network IP Address and now when I use livereload it point to a IP that my webview cannot access. How can I change it easly? I changed platforms\android\res\xml\config.xml to the correct IP address but it still getting the wrong IP. How can I change the default IP address used on livereload?

[IamAdamJowett]

@igorprado ionic address is what you need

[devqin]

额，finally can liveload on my ip6, step by step
1.i change the xcode seting

2.then i run run ios -l
3.in xcode i cmd+r
4.but i don't know why?

[westonganger]

If Wifi is turned off livereload results in black screen. Turn your Wifi on!

[cooervo]

Livereload doesn't work without wifi if you need to test your ionic app without internet then run without live reload

[sushruth]

I am trying to use ionic run -l using a guest OS and I have an android device connected through USB which is routed to the guest OS. I get a blank screen when I try to run the app with live reload. The output looks like so :

Setup Live Reload
Running live reload server: undefined
Watching: 0=www/**/*, 1=!www/lib/**/*
Running dev server:  http://10.0.2.15:8100
Ionic server commands, enter:
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit

Any thoughts on this would help. Thanks.

[marioidival]

How to remove this

Ionic server commands, enter:
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit

I want use Ionic with docker-compose and that broken the docker-compose

[chamaraonline]

Install this plugin to cordova
https://github.com/apache/cordova-plugin-whitelist

[askalia]

+1 for --livereload-host in CLI command
putting IP of my dev machine.
Then ionic asks for the correct IP it must use for livereload, and it works fine.

[douglasjam]

+1

[cardeol]

I've got this message when I run C:\project>ionic run android -l
Ionic: 2.1.0
Ionic-cli: 3.10.8

TypeError: Can't call method on undefined
at TypeError (native)
at module.exports (C:...node_modu
es\core-js\modules_defined.js:3:28)
at createHTML (C:\project\node_modules\
ore-js\modules_string-html.js:7:19)
at bold (C:...\node_modules\core-j
\modules\es6.string.bold.js:5:12)
at cb (C:...\AppData\Roaming\npm\node_modules\ionic\nod
_modules\winston\lib\winston\logger.js:206:7)
at done (C:\Users\carlos.deoliveira\AppData\Roaming\npm\node_modules\ionic\n
de_modulesasync\libasync.js:167:19)
at C:\Users\carlos.deoliveira\AppData\Roaming\npm\node_modules\ionic\node_mo
ulesasync\libasync.js:40:16
at C:\Users\carlos.deoliveira\AppData\Roaming\npm\node_modules\ionic\node_mo
ules\winston\lib\winston\logger.js:193:9
at Console.log (C:\Users\carlos.deoliveira\AppData\Roaming\npm\node_modules\
onic\node_modules\winston\lib\winstontransports\console.js:127:3)
at emit (C:\Users\carlos.deoliveira\AppData\Roaming\npm\node_modules\ionic\n
de_modules\winston\lib\winston\logger.js:186:17)
at C:\Users\carlos.deoliveira\AppData\Roaming\npm\node_modules\ionic\node_mo
ulesasync\libasync.js:157:13
at _each (C:\Users\carlos.deoliveira\AppData\Roaming\npm\node_modules\ionic\
ode_modulesasync\libasync.js:57:9)
at Object.async.each (C:...\AppData\Roaming\npm\node_mo
ules\ionic\node_modulesasync\libasync.js:156:9)
at Logger.log (C:...npm\node_modules\i
nic\node_modules\winston\lib\winston\logger.js:214:9)
at target.(anonymous function) [as info] (C:\Users\carlos.deoliveira\AppData
Roaming\npm\node_modules\ionic\node_modules\winston\lib\winston\common.js:54:18

at Object.setupLiveReload (C:\Users\carlos.deoliveira\AppData\Roaming\npm\no
e_modules\ionic\lib\utils\cordova.js:213:7)

[dannyconnell]

I managed to get Live Reload working on the device, though it's not the most elegant solution:

• Get your computer's IP address e.g.
  10.0.1.46
• Add the following script tag to index.html, directly after cordova.js, replacing the ip address and port:

<script>
    // device live reload
    // to use, replace ip address below with your computer's ip address, 
    // set enabled to true, rebuild and run 'ionic serve --address [ip address]'
    var deviceLiveReload = {
        enabled:    true, // set to true only while in development
        ipAddress:  '10.0.1.46',
        port:       '8100'
    }
    // if device live reload is enabled (above)
    if (deviceLiveReload.enabled) {
        // if we're not browsing your computer's ip address and port (i.e we're on the device's local file system)..
        if (window.location.href.indexOf('http://' + deviceLiveReload.ipAddress) === -1) {
            // .. redirect to your local ip address and port
            window.location.href='http://' + deviceLiveReload.ipAddress + ':' + deviceLiveReload.port;
        }

        // if we are browsing your computer's local ip address AND we're on a mobile device, include the cordova files (so cordova plugins etc will work)
        var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
        if (iOS && window.location.href.indexOf('http://' + deviceLiveReload.ipAddress) >= 0) {
            document.write('<script src="cordova-files/cordova.js"></scr' + 'ipt>');
        }
    }
</script>

• Run ionic serve using the computer's current IP address, e.g.

ionic serve --address 10.0.1.46

• Copy the items cordova_plugins.js, cordova-js-src, cordova.js and plugins from platforms/ios/www/ to /www/cordova-files/ (cordova-files is a new folder)
• Ensure the cordova-plugin-whitelist plugin is installed
• Add this to your config.xml:
  <allow-navigation href="*"/>
• Build and run the project
• Now when you make code changes, you should see the app on the iOS device refresh straight away

Notes:

• Remember to set enabled to false when not in development
• Remember to change your ip address if your computer's ip changes and rerun ionic serve with the new ip address
• If you add new plugins to your project, make sure you update the files you copied to 'www/cordova-files'
• This will only work on iOS now. If you want it to work on Android you will also need to add a check for Android on the bottommost if statement

How it works

All this solution is doing is redirecting the app on your device to your development computer's local address, and appending the cordova js files.

[Anujmoglix]

When i am doing ionic run andoid -lcs then it is working fine but on ionic run android i am facing 403 issue on my api. I want to test on different wifi on client side then it is not working , What to do ?

[AtoianAvetik]

I had the same problem, and I fixed it when adding port 8100 to firewall exceptions.
.

[mwddevcenter]

Add this code to your "index.html",
<meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src * data:; default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' * ; style-src 'self' 'unsafe-inline' *">
Then use
ionic cordova run android --livereload-host --livereload -c It should work.

[PradeepThite]

Sure.
An CLI option aside --livereload-port (--livereload-host ? ) could also be easy quick fix

Worked for ionic 3 app
Thanks