search

ionic-team / ionic-cli

The Ionic command-line interface
MIT License
2k stars 654 forks source link

Live reload doesn't work #2719

Closed devcer closed 5 years ago

devcer commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

Please show the output of ionic serve

devcer commented 7 years ago

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 commented 7 years ago 
[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 commented 7 years ago

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

airstep commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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

raykin commented 7 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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

imhoffd commented 6 years ago

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