ionic-cli: Ionic v3 Live Reload not working

From @silverbackdan on May 17, 2017 12:7

Ionic version: (check one with “x”) [ ] 1.x [ ] 2.x [X] 3.x

I’m submitting a … (check one with “x”) [X] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: While running ionic serve or ionic run <platform> -l no file changes trigger a reload or have any effect. (live reload not working). Are there any dependencies I need to make sure are installed myself or any way of outputting any logs on the files that should be being watched or running the watch command on it’s own with a verbose output?

Expected behavior: Live reload should be working and enable updates to html/scss files etc. to be reflected without a rebuild.

Steps to reproduce: ionic serve or ionic run <platform> -l

Related code: N/A

Other information: Output when starting to run on the browser platform with livereload. It opens a browser on port 8000, I’m not sure if it should be 8100 - either way, neither port seems to update when scss files or html files are changed and saved.

$ ionic cordova run browser -l -c --verbose --address 192.168.1.101
[DEBUG] Load global plugin @ionic/cli-plugin-proxy
[DEBUG] Load local plugin @ionic/cli-plugin-cordova from ***/node_modules/@ionic/cli-plugin-cordova
[DEBUG] Load local plugin @ionic/cli-plugin-ionic-angular from ***/node_modules/@ionic/cli-plugin-ionic-angular
Starting app-scripts server: --livereload --l --consolelogs --c --address 192.168.1.101 --port 8100 --p 8100 --livereload-port 35729 --r 35729 --iscordovaserve --externalIpRequired --nobrowser - Ctrl+C to cancel
[14:18:24]  watch started ... 
[14:18:24]  build dev started ... 
[14:18:24]  clean started ... 
[14:18:24]  clean finished in 3 ms 
[14:18:24]  copy started ... 
[14:18:24]  transpile started ... 
[14:18:28]  transpile finished in 3.27 s 
[14:18:28]  preprocess started ... 
[14:18:28]  deeplinks started ... 
[14:18:28]  deeplinks finished in 89 ms 
[14:18:28]  preprocess finished in 89 ms 
[14:18:28]  webpack started ... 
[14:18:32]  copy finished in 7.65 s 
[14:18:36]  webpack finished in 8.47 s 
[14:18:36]  sass started ... 
[14:18:37]  sass finished in 1.06 s 
[14:18:37]  postprocess started ... 
[14:18:37]  postprocess finished in 9 ms 
[14:18:37]  lint started ... 
[14:18:38]  build dev finished in 13.09 s 
[14:18:38]  watch ready in 13.45 s 
[14:18:38]  dev server running: http://192.168.1.101:8100/ 

> cordova run browser
[14:18:40]  lint finished in 2.79 s 
Running command: ***platforms/browser/cordova/build 

Cleaning Browser project
Running command: ***/platforms/browser/cordova/run --nobuild

Static file server running @ http://localhost:8000/index.html
CTRL + C to shut down

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.1.2
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.1.2

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.1.2
    @ionic/cli-plugin-ionic-angular : 1.1.2
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v7.10.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002 
    ios-deploy : 1.9.0 
    ios-sim    : 3.1.1 

Copied from original issue: driftyco/ionic#11700

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 9
  • Comments: 40 (4 by maintainers)

Most upvoted comments

Just learned about Stencil and when using demo found that I have error from node.js ENOSPC (not enough space on the drive but I have more than need)

After that I just looked at different issues and found this one:

On Linux (or Mac) we have a max number of system watchers we can place at an IO level (from my understanding). So for large projects, it seems that Jest is trying to watch just way to many files.

To fix:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

And after that livereload again works for project that before has no reaction.

Same issue here. I do:

  • ionic serve
  • change and same some html file
  • my app on browser show me the building banner
  • changes are not refreseh and i have to run another time ionic serve

@Tulika12 I had same issue and changing “live-reload port” solved my problem. Try this in your command line, hope it will works for you. ionic serve -r 33222

i ran this:

npm i -D -E ws@3.3.2

and now seems to work again.

@anesask change port doesn’t work in my case. Even don’t know how to debug it.

@silverbackdan Glad you got it. For build issues, generally the best place to create an issue is in the app-scripts repo: https://github.com/ionic-team/ionic-app-scripts

It appears my issue lies mainly with webpack so I’ve raised an issue there. A webpack installation on a web-based Laravel project is not watching files or creating the final css files. Thanks for coming back to me though @dwieeb

@dwieeb Is there anything else I can provide or do to help you with this issue?

Miguelonga .I got that using Cordova run Android

Ah, sorry @silverbackdan. I did not see that it wasn’t working for you with ionic serve. Let’s debug!

Can you show me the output of ionic serve ?