$ ionic serve not refreshing when a file is changed

Ionic Framework ionic-v3
1

Dears, after I change a line in a file of my Ionic project, my “$ ionic serve” isn’t reloading/rebuilding the application automatically. What is happening? It is occurring after I made it:

$ sudo npm update -g ionic cordova
$ npm outdated
$ npm update
$ ionic serve -c

What’s going on? Does someone know what is happening and how can I solve it?

Thanks since now!

2

Try open ionic serve in a different browser. I had this issue recently, but the issue was isolated to Chrome and fixed it by uninstalling then reinstalling Chrome.

3

Thanks 8tomo8, but it didn’t solve.

Checking the console ($ ionic serve -c) nothing happens after I made a change in a file of the Ionic project (after saved it).

$ ionic serve -c
> ionic-app-scripts serve --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --consolelogs --nobrowser
[app-scripts] [12:01:36]  ionic-app-scripts 3.1.9 
[app-scripts] [12:01:36]  watch started ... 
[app-scripts] [12:01:36]  build dev started ... 
[app-scripts] [12:01:36]  clean started ... 
[app-scripts] [12:01:36]  clean finished in 2 ms 
[app-scripts] [12:01:36]  copy started ... 
[app-scripts] [12:01:36]  copy finished in 112 ms 
[app-scripts] [12:01:36]  deeplinks started ... 
[app-scripts] [12:01:37]  deeplinks finished in 496 ms 
[app-scripts] [12:01:37]  transpile started ... 
[app-scripts] [12:01:44]  transpile finished in 7.46 s 
[app-scripts] [12:01:44]  preprocess started ... 
[app-scripts] [12:01:44]  preprocess finished in 1 ms 
[app-scripts] [12:01:44]  webpack started ... 
[app-scripts] [12:01:53]  webpack finished in 8.83 s 
[app-scripts] [12:01:53]  sass started ... 
[app-scripts] Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
[app-scripts] [12:01:54]  sass finished in 1.14 s 
[app-scripts] [12:01:54]  postprocess started ... 
[app-scripts] [12:01:54]  postprocess finished in 7 ms 
[app-scripts] [12:01:54]  lint started ... 
[app-scripts] [12:01:54]  build dev finished in 18.17 s 

[INFO] Development server running!
       
       Local: http://localhost:8100
       External: http://192.168.0.100:8100
       DevApp: MyApp@8100 on rf511
       
       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

[app-scripts] [12:01:57]  console.warn: Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to 
[app-scripts]             include cordova.js or run in a device/simulator 
[app-scripts] [12:01:57]  console.warn: Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include 
[app-scripts]             cordova.js or run in a device/simulator 
[app-scripts] [12:01:59]  lint finished in 4.84 s

Before, the “Development server running!” used to appear again after made a change in a file. I am facing a different problem.

4

I end up found the solution: just deleted the www directory and after run $ ionic serve -c again, the [app-scripts] [12:14:26] watch ready in 15.68 s turned back appear.

$ ionic serve -c
> ionic-app-scripts serve --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --consolelogs --nobrowser
[app-scripts] [12:14:10]  ionic-app-scripts 3.1.9 
[app-scripts] [12:14:10]  watch started ... 
[app-scripts] [12:14:10]  build dev started ... 
[app-scripts] [12:14:11]  clean started ... 
[app-scripts] [12:14:11]  clean finished in 1 ms 
[app-scripts] [12:14:11]  copy started ... 
[app-scripts] [12:14:11]  copy finished in 152 ms 
[app-scripts] [12:14:11]  deeplinks started ... 
[app-scripts] [12:14:11]  deeplinks finished in 429 ms 
[app-scripts] [12:14:11]  transpile started ... 
[app-scripts] [12:14:17]  transpile finished in 5.86 s 
[app-scripts] [12:14:17]  preprocess started ... 
[app-scripts] [12:14:17]  preprocess finished in 1 ms 
[app-scripts] [12:14:17]  webpack started ... 
[app-scripts] [12:14:25]  webpack finished in 7.92 s 
[app-scripts] [12:14:25]  sass started ... 
[app-scripts] Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
[app-scripts] [12:14:26]  sass finished in 1.10 s 
[app-scripts] [12:14:26]  postprocess started ... 
[app-scripts] [12:14:26]  postprocess finished in 8 ms 
[app-scripts] [12:14:26]  lint started ... 
[app-scripts] [12:14:26]  build dev finished in 15.56 s 
[app-scripts] [12:14:26]  watch ready in 15.68 s 

[INFO] Development server running!
       
       Local: http://localhost:8100
       External: http://192.168.0.100:8100
       DevApp: MyApp@8100 on rf511
       
       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

And another way that I read googling is, when you use linux:
$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

1 Like
5

I deleted the WWW directory still not refreshing, any ideas ??

1 Like
6

Its because service-worker.js in src not importing sw-toolbox,

solution

  1. npm install --save sw-toolbox
  2. copy node_modules\sw-toolbox\sw-toolbox.js to src\build\sw-toolbox.js
  3. edit service-worker.js find importScripts(’./build/sw-toolbox.js’); to importScripts(‘build/sw-toolbox.js’);
  4. ionic serve

That’s it.

1 Like