Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Live reload doesn't work #2719

Closed
devcer opened this issue Sep 8, 2017 · 24 comments
Closed

Live reload doesn't work #2719

devcer opened this issue Sep 8, 2017 · 24 comments
Labels
project type: ionic-angular Ionic Angular 2-3 projects
Milestone

Comments

@devcer
Copy link

devcer commented Sep 8, 2017

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
Copy link
Author

devcer commented Sep 8, 2017

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
Copy link
Contributor

imhoffd commented Sep 8, 2017

Please show the output of ionic serve

@devcer
Copy link
Author

devcer commented Sep 11, 2017

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
Copy link

airstep commented Oct 12, 2017

[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
Copy link
Contributor

imhoffd commented Oct 12, 2017

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

@airstep
Copy link

airstep commented Oct 13, 2017

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
Copy link

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
Copy link
Contributor

imhoffd commented Oct 13, 2017

@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.

@imhoffd imhoffd added this to the CLI Future milestone Oct 13, 2017
@raykin
Copy link

raykin commented Oct 27, 2017

@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
Copy link

@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
Copy link

raykin commented Oct 27, 2017

@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
Copy link

bhargavy commented Nov 9, 2017

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
Copy link
Author

devcer commented Nov 9, 2017

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

@raykin
Copy link

raykin commented Nov 9, 2017

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
Copy link

Sampath-Lokuge commented Nov 13, 2017

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
Copy link
Contributor

imhoffd commented Nov 13, 2017

@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
Copy link

Sampath-Lokuge commented Nov 14, 2017

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
Copy link

ghost commented Nov 27, 2017

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
Copy link
Contributor

imhoffd commented Nov 27, 2017

@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
Copy link

ghost commented Nov 27, 2017

@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
Copy link
Contributor

imhoffd commented Nov 27, 2017

@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:

@samir-kamble
Copy link

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

ionic-team/ionic-framework#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
Copy link
Contributor

imhoffd commented Jul 12, 2018

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

@imhoffd imhoffd added project type: ionic-angular Ionic Angular 2-3 projects and removed needs investigation labels Jul 12, 2018
@imhoffd
Copy link
Contributor

imhoffd commented Jul 12, 2018

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 #3370).

@imhoffd imhoffd closed this as completed Nov 28, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
project type: ionic-angular Ionic Angular 2-3 projects
Projects
None yet
Development

No branches or pull requests

8 participants