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

[devcer]

I implemented lazy loading and everything started to work fine for me.

[raykin]

I found it's related to my pug usage. A gulp script watched my pug template to update html. If I only update pug template, html changes were detected. The ts watcher not work.

[Sampath-Lokuge]

Hi @dwieeb

When we'll have a solution for this nightmare issue? I'm suffering heavily due to this issue. I don't know why you cannot give a solution for this. Can you share with us any technical difficulties which you have? I think stackblitz live reloader is working really nice. Can't you get something from that? Or is that a problem on my dev environment? Hope you'll give a feedback for this.

stackblitz: https://stackblitz.com/

Ionic info:

cli packages: (C:\Users\lokuge\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.8.0

System:

    Android SDK Tools : 25.2.5
    Node              : v6.10.0
    npm               : 3.10.10
    OS                : Windows 8.1

Environment Variables:

    ANDROID_HOME : C:\Program Files (x86)\Android\android-sdk

Misc:

    backend : pro

package.json

{
    "name": "Tracker",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.4.4",
        "@angular/compiler": "4.4.4",
        "@angular/compiler-cli": "4.4.4",
        "@angular/core": "4.4.4",
        "@angular/forms": "4.4.4",
        "@angular/http": "4.4.4",
        "@angular/platform-browser": "4.4.4",
        "@angular/platform-browser-dynamic": "4.4.4",
        "@ionic-native/call-number": "4.3.3",
        "@ionic-native/camera": "4.3.2",
        "@ionic-native/contacts": "4.3.3",
        "@ionic-native/core": "4.3.3",
        "@ionic-native/social-sharing": "4.3.3",
        "@ionic-native/splash-screen": "4.3.2",
        "@ionic-native/status-bar": "4.3.2",
        "@ionic/storage": "2.0.1",
        "angular2-text-mask": "8.0.2",
        "call-number": "^1.0.1",
        "cordova-android": "^6.2.3",
        "cordova-plugin-camera": "^2.4.1",
        "cordova-plugin-compat": "^1.1.0",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-contacts": "^2.3.1",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-ionic-webview": "^1.1.16",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "cordova-plugin-x-socialsharing": "^5.2.1",
        "cordova-sqlite-storage": "^2.0.4",
        "es6-promise-plugin": "^4.1.0",
        "highcharts": "^6.0.2",
        "highcharts-more": "^0.1.2",
        "ionic-angular": "3.8.0",
        "ionic-img-viewer": "^2.7.3",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionic2-rating": "^1.2.2",
        "ionicons": "3.0.0",
        "moment": "^2.18.1",
        "ng2-truncate": "^1.3.11",
        "rxjs": "5.4.3",
        "sw-toolbox": "3.6.0",
        "text-mask-addons": "^3.6.0",
        "zone.js": "0.8.18",
        "mx.ferreyra.callnumber": "~0.0.2"
    },
    "devDependencies": {
        "@ionic/app-scripts": "3.0.1",
        "typescript": "2.3.4"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-sqlite-storage": {},
            "cordova-plugin-ionic-webview": {},
            "cordova-plugin-camera": {},
            "cordova-plugin-contacts": {},
            "cordova-plugin-x-socialsharing": {},
            "mx.ferreyra.callnumber": {}
        },
        "platforms": [
            "android"
        ]
    }
}

ionic serve

D:\Freelance-Work\Clients\Siva\renoTracker>ionic serve
Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser -
Ctrl+C to cancel
[09:40:09]  watch started ...
[09:40:09]  build dev started ...
[09:40:09]  clean started ...
[09:40:09]  clean finished in 26 ms
[09:40:09]  copy started ...
[09:40:09]  deeplinks started ...
[09:40:10]  deeplinks finished in 526 ms
[09:40:10]  transpile started ...
[09:40:16]  transpile finished in 5.87 s
[09:40:16]  preprocess started ...
[09:40:16]  preprocess finished in 1 ms
[09:40:16]  webpack started ...
[09:40:16]  copy finished in 7.34 s
[09:40:46]  webpack finished in 30.44 s
[09:40:46]  sass started ...
[09:40:49]  sass finished in 2.26 s
[09:40:49]  postprocess started ...
[09:40:49]  postprocess finished in 304 ms
[09:40:49]  lint started ...
[09:40:49]  build dev finished in 40.29 s
[09:40:49]  watch ready in 40.71 s
[09:40:49]  dev server running: http://localhost:8100/

[OK] Development server running!
     Local: http://localhost:8100
     External: http://192.168.1.3:8100
     DevApp: renoTracker@8100 on Sampath

[imhoffd]

@Sampath-Lokuge Did you read this issue? Each person offers a solution to their particular problem. I'm sure stackblitz's live-reload probably does work better because everything is entirely integrated. They know exactly when you click "save" in their editor. For us, it's tougher.

If there is anything specific you can tell me, I may be able to help. Until then, I don't know the behavior you're seeing and I don't know what you've tried, so I can't provide a magical solution. If you've tried nothing, I think this would be a good place to start. If you give me access to your app, I can debug myself.

[Sampath-Lokuge]

Hi @dwieeb

Actually, I have done some changes where I can understand. But none of them worked for me. I really like to give you an access to my dev machine through Team Viewer. Did you mean that or do you need the git repo of my project? Hope you'll give feedback on this. Thanks.

[ghost]

It occurs even project path doesn't include a space. I guess this issue happened on ionic cli all versions with ionic 3, just over 6 months. It seems they are making many changes daily, but never fixed it. Hope they pause version upgrading before fixing this issue. Thank you.

[imhoffd]

@sdey0081 I am under the impression live reload is working.

Tell me if live reload is working when taking these steps for a new app:

1. Install latest CLI: npm install -g ionic@latest
2. Start new app: ionic start testApp tabs and cd testApp
3. ionic serve
4. Make a change in src/ and observe that live reload is either functioning or not

If it is working for a new app, then something broke it in your project and it's impossible for me to know what went wrong without more information or access to your code. Live reload is complex and could break from any number of things. I need a clear set of reproducible steps, and even then it might not be enough, as seen in this issue (spaces in paths??? max_user_watches???)

[ghost]

@dwieeb , Thanks for your quick response. Actually, I am working on multiple projects(most of them are complex, but have same problem). Of course, they don't include spaces in paths. I am sure it works well on the empty project.

This will be the steps to reproduce it:

1. Open ionic project.
2. Start ionic serve
3. Update src/ , and live reload is working and should show latest updates, but it sometimes shows old version before I changed. This makes me to force ionic serve and try again. Any problem with cache data?

PS: I am using ionic cli@latest because it asks me to update everyday before I start to work.

[imhoffd]

@sdey0081 From what you've described, my guess is you're experiencing an issue with your service worker. To verify, in Chrome debugger, go to Application -> Service Workers and click stop. You should also comment out the service worker in your src/index.html to disable it and verify that live reload is working without it.

If you're new to service workers, you can check out these articles:

• https://blog.ionicframework.com/service-workers-revolution-against-the-network/
• https://developers.google.com/web/fundamentals/primers/service-workers/

[samir-kamble]

Same problem happening on Mac OS X. I have provided details in different thread too.

https://github.com/ionic-team/ionic/issues/14431

Please help... Refer to the ionic info outout on above link.

I have too have changed inotify.max_user_watches. But is of no use.

Removed node modules and npm installed with --save still not working.

Regards, Samir

[imhoffd]

Looks like @samir-kamble resolved those livereload issues by changing file permissions.

[imhoffd]

Unfortunately there are just so many variables at play here. Many reasons why livereload might not be working. We could compile a troubleshooting guide for livereload (see https://github.com/ionic-team/ionic-cli/issues/3370).