14

i was trying to use live reload on my ionic 2 application. so i found this command

ionic run browser --live-reload

is not working as expected and while making code changes i am receiving console messages

[16:12:47]  build started ...
[16:12:47]  transpile update started ...
[16:12:47]  transpile update finished in 46 ms
[16:12:47]  deeplinks update started ...
[16:12:47]  deeplinks update finished in 248 ms
[16:12:47]  webpack update started ...

but the page isn't reloading

3
  • the syntaxis is ionic run browser --livereload. If it doesnt work, check the workarounds at github.com/driftyco/ionic-cli/issues/790 Commented May 25, 2017 at 12:07
  • i tried ionic run browser --livereload but the same behavior. P.S. there isnt any workaround mentioned on that page Commented May 25, 2017 at 12:43
  • workaround: after the change, wait until when the console shows the file changed and then rsync -rtv www/ platforms/browser/www or run another file watcher: fswatch -r www/ | xargs -I % rsync -rtv www/ platforms/browser/www workaround 2 ./node_modules/.bin/ionic-app-scripts serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build Commented May 25, 2017 at 12:55

6 Answers 6

25

i found the solution on the github page

include a script in the package.json file

"browser": "ionic-app-scripts serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build"

and run

npm run browser
5
  • ionic-app-scripts serve is not the same as ionic cordova run browser as it does not support cordova plugins (while at least some of the plugins are supported for browser platform)
    – ciekawy
    Commented Nov 8, 2017 at 18:00
  • 1
    I'm sorry only now I get that this is a workaround to use the browser build and can confirm it works for me. I'd add to the answer explicit statement that this way we can have the cordova plugins and the browser platform working in a same way as for cordova run browser
    – ciekawy
    Commented Nov 8, 2017 at 18:09
  • Perfectly solved the issue mentionned in the question, thanks
    – Zooly
    Commented Mar 16, 2018 at 13:42
  • @MathieuCastets Ionic 2 is tagged in the question. Commented Mar 13, 2019 at 6:11
  • 1
    Works perfectly, and now I can use cordova-plugin-googlemaps (native map) on browser with live reload
    – Hoisel
    Commented Oct 4, 2019 at 0:36
13

When you run the command ionic cordova run browser --livereload you will see something like this in CLI:

[19:39:00]  dev server running: http://localhost:8100/ 

[INFO] Development server running
       Local: http://localhost:8100
       External: http://192.168.0.51:8100

Just open http://192.168.0.51:8100 or http://localhost:8100 and your live reload will work on that address. Your browser might have opened in http://localhost:8000 instead of 8100

4
  • Opening on 8000 is not the same as 8100 because, cordova is not running on 8100. The app on 8000 will have cordova in it.
    – nissim_dev
    Commented Nov 1, 2017 at 10:05
  • indeed on 8100 the plugin proxies are not created
    – ciekawy
    Commented Nov 8, 2017 at 18:04
  • Worked for me anyway. sql plugin works on 8100 and not 8000
    – Loubot
    Commented Jan 15, 2019 at 12:11
  • Ups! Yeah: 8100 is right, not 8100. :| Many thanks, my Friend!
    – 1antares1
    Commented May 12, 2019 at 16:38
4

First off, should anyone need this answer, the command has been renamed in the later version to

ionic cordova run browser

Second, The --livereload flag is not supported when you run this command. this issue explains more

0
Try This

ionic cordova run browser --livereload  --consolelogs --serverlogs
1
  • 2
    For the benefit of others that find your answer, would you be able to explain why your solution works for this question? Commented Jan 13, 2021 at 5:20
0
"serve": "npx ionic serve --cordova --platform browser"
-1

Using this command browser will be reloaded automatically.

ionic serve

If you want to run application with different platform in browser you can use this command :

ionic serve -l

This both command will reload page automatically on code change

2
  • cordova is not loaded in ionic serve Commented May 25, 2017 at 11:17
  • browser is a platform ionic serve does not emulate/builds as browser platform Commented May 25, 2017 at 11:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.