Live reload doesn't work

[devcer]

Description:
ionic serve or ionic serve -r or ionic serve --livereload-port doesnt refresh the build when any HTML or ts file is changed

Steps to Reproduce:
Do ionic serve and change any html or ts file

Example repo: N/A

My ionic info:
cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1 

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : browser 4.1.0
Ionic Framework    : ionic-angular 3.6.0

System:

Android SDK Tools : 26.0.2
Node              : v8.4.0
npm               : 5.3.0 
OS                : Linux 4.10

[devcer]

I tried deleting the node_modules and package-lock.json and did an npm install -save as mentioned in one of the discussion but that didn't help either.

[imhoffd]

Please show the output of ionic serve

[devcer]

Output of ionic serve:

[INFO] Starting app-scripts server: --address 0.0.0.0 --port 8100 
       --livereload-port 35729 - Ctrl+C to cancel
[09:49:26]  watch started ... 
[09:49:26]  build dev started ... 
[09:49:27]  clean started ... 
[09:49:27]  clean finished in 9 ms 
[09:49:27]  copy started ... 
[09:49:27]  transpile started ... 
[09:49:32]  transpile finished in 5.65 s 
[09:49:32]  preprocess started ... 
[09:49:32]  deeplinks started ... 
[09:49:32]  deeplinks finished in 64 ms 
[09:49:32]  preprocess finished in 65 ms 
[09:49:32]  webpack started ... 
[09:49:33]  copy finished in 6.38 s 
[09:49:40]  webpack finished in 7.68 s 
[09:49:40]  sass started ... 
[09:49:41]  sass finished in 1.40 s 
[09:49:41]  postprocess started ... 
[09:49:41]  postprocess finished in 6 ms 
[09:49:41]  lint started ... 
[09:49:41]  build dev finished in 14.97 s 
[09:49:42]  watch ready in 15.19 s 
[09:49:42]  dev server running: http://localhost:8100/ 

[INFO] Development server running
       Local: http://localhost:8100
       External: http://192.168.25.23:8100
       
[09:49:45]  lint finished in 3.19 s 

[airstep]

[INFO] Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 -
       Ctrl+C to cancel
[10:57:53]  watch started ...
[10:57:53]  build dev started ...
[10:57:53]  clean started ...
[10:57:53]  clean finished in 28 ms
[10:57:53]  copy started ...
[10:57:53]  transpile started ...
[10:58:00]  transpile finished in 7.09 s
[10:58:01]  preprocess started ...
[10:58:01]  deeplinks started ...
[10:58:01]  deeplinks finished in 370 ms
[10:58:01]  preprocess finished in 371 ms
[10:58:01]  webpack started ...
[10:58:02]  copy finished in 9.02 s
[10:58:32]  webpack finished in 30.78 s
[10:58:32]  sass started ...
[10:58:36]  sass finished in 4.17 s
[10:58:36]  postprocess started ...
[10:58:36]  postprocess finished in 142 ms
[10:58:36]  lint started ...
[10:58:36]  build dev finished in 42.72 s
[10:58:36]  dev server running: http://localhost:8100/

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

ionic info

cli packages: (/usr/lib/node_modules)

    @ionic/cli-utils  : 1.13.0
    ionic (Ionic CLI) : 3.13.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3 browser ios 4.4.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 26.1.0
    Node              : v8.6.0
    npm               : 5.4.2
    OS                : Linux 4.13

[imhoffd]

Any console/network errors? We use a websocket connection to live-reload (and the tiny-lr library).

[airstep]

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.

[matteobattista]

Hi, now it works for me... in my case livereload did not work fine because I haven't imported a Module Components in a right way... maybe a code refactoring is necessary.
I hope this can help someone!

[imhoffd]

@airstep I will look into whether that can be detected in the Ionic CLI and if we can print a warning about it! Thanks for digging into that.

[raykin]

@matteobattista how do you find the incorrect Module Components? In my case the live-reload was pretty weird, it work sometime but also not work at sometime. I can't catch the rules. And I didn't find import error because pages work after restart ionic serve.

[matteobattista]

@raykin also in my case I didn't find import error and pages works after restart ionic serve.
In my case I have a main module file (componets.module.ts) that export some pages components and in the same folder I have another folder with a module file that export other page components (xxxx.modules.ts)
I solved simply adding this module to the exports declaration of the main module file (componets.module.ts).
componets.module.ts is in the imports of app.module.ts.... I hope this help you!
It remain strange!!!

[raykin]

@matteobattista thanks for your help. In my case, I only have one module file in components folder. However in providers folder, I have two module files.
Since ionic doesn't predefine module file in providers folder. The two modules files are customized. So they are both included in app.module.ts
Without a debug method, it looks hard to find reason. However I guess it possible related to lazy load which used frequently in my case.

[bhargavy]

Live reload is not working if there is space in the path.
For ex. My original path was

C:\Program Files (x86)\Ampps\www\4-ionic-app

On changing it to

C:\4-ionic-app

Live reload works perfectly.

I'm on Windows 10