bug: ionic serve - live reload is not working

[kensodemann]

From @yudhath on September 25, 2017 3:33

Type: bug

Ionic Version: 3.x

Platform: all

While running ionic serve no file changes trigger a reload or have any effect. (live reload not working). Are there any dependencies I need to make sure are installed myself or any way of outputting any logs on the files that should be being watched or running the watch command on it's own with a verbose output?

Copied from original issue: ionic-team/ionic#12977

[kensodemann]

Hello! Thank you for opening an issue with us!

This appears to be an app-scripts issue. I will move it there for you.

Also, please include the output of the ionic info command when run from your project's directory, like this:

cli packages: (/Users/kensodemann/Projects/Home/savitr/node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1 
    Gulp CLI              : CLI version 3.9.1 Local version 3.9.1

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3 ios 4.5.0
    Ionic Framework    : ionic-angular 3.6.1

System:

    Android SDK Tools : 26.0.2
    ios-deploy        : 1.9.1 
    ios-sim           : 6.0.0 
    Node              : v8.5.0
    npm               : 5.3.0 
    OS                : macOS Sierra
    Xcode             : Xcode 9.0 Build version 9A235 

Misc:

    backend : legacy

Thank you for using Ionic

[yudhath]

This is my ionic info :

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

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : not installed

local packages:

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

System:

Node : v6.11.0
npm  : 3.10.10
OS   : Windows 10

Misc:

backend : pro

[fpmatos]

Hello!

I had this problem too and solved it after having changed the project path to a value with no space. Example: (c: \project\xpto). I imagine it's an encoding problem or project address size problem.

[bjoernjimdo]

Same problem here: ionic serve works fine, while livereload just does nothing at all.

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

local packages:

    @ionic/app-scripts : 2.1.4
    Ionic Framework    : ionic-angular 3.6.1

System:

    Node : v6.11.3
    npm  : 5.4.2
    OS   : macOS Sierra

Misc:

    backend : pro

[akana]

same problem here. any workaround will be appreciated

[danbucholtz]

How do I recreate the issue?

Thanks, Dan

[alexchuvand]

This issue is happening in ionic 3.12.0. I created a new app using the command ionic start app super

Every time I make a change in an html template, I have to save it twice to see the changes. I'm using node 8.6.0 on Mac High Sierra.

I noticed that it only happened on the html template I modified. I changed the login.ts and login.html to include a formBuilder. When trying to change the label of the ion-label tag, the reload does not work.

[webjoaoneto]

Same for me.

Ionic only updates the live-reload code on the browser after two or three saves on VisualCode files.

I'm on Windows 10 with:

ionic -v 3.12.0

ionic/app-scripts 1.3.12

[airstep]

Same situation (sometimes work, very often not)

@ionic/cli-utils  : 1.12.0

ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : android 6.2.3 browser
Ionic Framework    : ionic-angular 3.5.0

System:

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

[Lahrachtdi]

the version 2.1.4 of @ionic/app-scripts solved the problem for me

[bjoernjimdo]

Not for me.

[webjoaoneto]

the version 2.1.4 of @ionic/app-scripts dont solve the problem for me. =/

[matteobattista]

Me too... livereload problems on html page and component files... My ionic info:

$ ionic info

cli packages: (/usr/local/lib/node_modules)

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

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    ios-deploy : 1.9.2 
    Node       : v8.6.0
    npm        : 5.5.1 
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235 

Misc:

    backend : legacy

[webjoaoneto]

Any news or an official position about this bug?

[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!

[LufoX11]

I'm not sure it's the same specific issue, but live reload is not properly working after some file change detected. I have to save the same file 2 or 3 times for it to impact in the view. Most of times, it's like it's retrieving an old compiled file (like serving it from a cached copy). It also happens (a lot) that the app lose all styles (saving scss or ts files). It was working good before updating to 3.0.0. I'm experimenting this in a fresh ionic start project (and the other ones). I'm in Pro plan and linked my app in the new dashboard. Could it be something related to connectivity? (It looks like more a race condition because of the randomness).

$ ionic info

cli packages: (/home/shamank/.nvm/versions/node/v8.2.1/lib/node_modules)

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

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : browser 5.0.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 26.1.1
    Node              : v8.2.1
    npm               : 4.6.1 
    OS                : Linux 3.19

Misc:

    backend : pro

[Chris1234567899]

Same problem here. I remember this problem with the "multiple saves needed" existed in an earlier version already but was later on solved obviously. Now it appears again, so maybe it is the same?

[andrelaszlo]

For me, running Arch Linux, the solution was to increase fs.inotify.max_user_watches like this.

Ionic is using chokidar to watch for file system changes, and this library is using nodejs' fs.watch. It's implemented differently depending on your platform. For me it's using inotify, a Linux API. This API has a limit on how many watches a user can have, the default is a bit low (8192 on my distribution) so the watches couldn't be created reliably.

To figure this out, I simply ran:

let fs = require('fs');
watcher = fs.watch('path/to/my/file')

This threw a big ugly error. The ENOSPC is confusing but this question helped me. The full error:

Error: watch path/to/my/file ENOSPC
    at _errnoException (util.js:1041:11)
    at FSWatcher.start (fs.js:1382:19)
    at Object.fs.watch (fs.js:1408:11)
    at repl:1:14
    at ContextifyScript.Script.runInThisContext (vm.js:44:33)
    at REPLServer.defaultEval (repl.js:239:29)
    at bound (domain.js:301:14)
    at REPLServer.runBound [as eval] (domain.js:314:12)
    at REPLServer.onLine (repl.js:440:10)
    at emitOne (events.js:120:20)

To conclude, increasing your fs.inotify.max_user_watches might be a fix if you're on Linux. For the Ionic developers: I'd like to get a warning if chokidar chokes for some reason.

[henry74]

I'm having the same issue where changes are not automatically showing on the browser. It's adding a lot of cycles and overhead as I have to save multiple times for it to sometimes refresh correctly. This is seriously hurting my ability to code/develop as I am unable to find bugs as they occur - they show up after the 3 or 4 save. Please put some priority on fixing this.

$ ionic info

cli packages: (/home/henry/.nvm/versions/node/v8.7.0/lib/node_modules)

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

local packages:

    @ionic/app-scripts : 3.1.0
    Ionic Framework    : ionic-angular 3.8.0

System:

    Node : v8.7.0
    npm  : 5.5.1
    OS   : Linux 4.13

Misc:

    backend : pro

[andrelaszlo]

@henry74 if it's reloading but changes are not showing, try downgrading to an older version. My colleague had a similar issue and it seems to work better on 3.13.2 for example.

npm install -g ionic@3.13.2

Does that work better for you as well?

[henry74]

@andrelaszlo Doesn't appear to make a difference. Do you believe this is an ionic framework issue or an ionic app scripts issue? I would imagine it to be an app scripts issue given the command being called is:

ionic-app-scripts serve

[LufoX11]

It's almost impossible to work like this. I have to restart every single time I perform a change in the code. PLEASE, fix this.

[LufoX11]

It's not "the solution", but changing from: $ ionic serve -scb to $ ionic serve is working for me (for now).

[LufoX11]

Meh.. too soon. It works better but styles get lose after one or two refresh. There's a race condition somewhere. Good luck.

[scipioni]

on linux solved by putting in /etc/sysctl.conf

fs.inotify.max_user_watches=524288

then reboot or

sudo sysctl --system

[manmohanshah]

Thanks @scipioni. Your solution worked like a charm on Ubuntu 16.04.

[RichardBoyder]

Hi Ionic Team, Any update on why this is happening?

[netronicus]

Still same problem here, any news? i'm working on ubuntu 16.04, changing max_user_watches is not working for me :'c

[netronicus]

I already solved the issue removing all spaces from my project folder name and parents folder names, hope this help, I'm using ubuntu 16.04

[henry74]

Adding reference to another issue - seems like these are related/same.

[blended-ideas]

Even I am facing the same problem. However mine is a bit different. Only HTML and SCSS file changes don't seem to be updating. If I change something in any of the .ts files(Even just adding an empty line) then entire thing updates.

cli packages: (/usr/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.3.0 browser 5.0.1
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v6.12.0
    npm               : 3.10.10 
    OS                : Linux 4.4

Misc:

    backend : pro

[LostNomad311]

I can't get live reloading to work either , in fact for me I have to stop the app and run ionic build in order to see even text change in html files . I also created a new blank project and only brought over a page and my services and installed the necessary dependencies , to no avail .

ionic info

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

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : browser 5.0.2
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.9.3
    npm  : 5.5.1
    OS   : Windows 7

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

debug configuration

        {
            "name": "Run Browser",
            "type": "cordova",
            "request": "launch",
            "platform": "browser",
            "target": "chrome",
            "simulatePort": 8000,
            "livereload": true,
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "forceprepare": true
        }

[jjjhanreyyy]

Currently experiencing the issue. Is there any workaround?

[Bengejd]

Getting the same issue as @karthikrp. Changes in HTML / SCSS files don't have any affect on reload, but adding a single line in a .ts file does.

[ddumst]

Hi all, same problem here but is because I have my project on external hard drive, when i copied project to my hard drive problem solved... Some idea why this happen?

[fmsouza]

In my case, changing my HTML / SCSS files does show the changes. But the ts changes are triggering the rebuild, but the changes aren't showing on the running app. And I'm on ionic v3.19.0 with nodejs v9.3.0.

[LiamInJapan]

Our team is having the same issue here. We tried:

fs.inotify.max_user_watches=524288 in syslog.conf

downgrading ionic 3.13.12

neither of these things worked:

ionic info output:

cli packages: (/Users/liam/Development/Web/ionic/dwango-gemaga/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.1.0
Cordova Platforms  : android 6.4.0 browser 5.0.3 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 25.2.2
ios-deploy        : 1.9.2 
ios-sim           : 6.1.2 
Node              : v6.9.4
npm               : 5.6.0 
OS                : macOS High Sierra
Xcode             : Xcode 9.2 Build version 9C40b 

Environment Variables:

ANDROID_HOME : /Users/liam/Library/Android/sdk

Misc:

backend : pro`

[Kobbersvard]

Okay guys I give up :) 3 full days of dancing around and still nothing, "ionic serve" show very old version of my app from some cache that I cant even find (everything is clean). Let me know when it will be fixed, where is my Nintendo Switch? :)))

[Kobbersvard]

So... In my case enabling service-worker from index.html prevent rest of the code from live reloading. Once I comment it back and restart "ionic serve" it works as usual with no problem of reloading changes. But I need service worker for push notifications :(

[jogle05]

@scipioni solution work fine for me on peppermint (ubuntu 16.04)

[connor-odoherty]

Only fix I have found so far is to downgrade @ionic/app-scripts to 2.1.4. This is frustrating because I was enjoying the new Ionic Error handler which, according to the documentation, only works with 3.1.0+.

Has anyone had any luck getting live reload to work after 3.1.0?

[bivainis]

Our Ionic 1 project stopped reloading a while ago.

What solved it for me was to downgrade cli after reinstalling node modules npm install -g ionic@3.10.3

It's a bit annoying to always have to type 'n' when prompted to update, but at least it works.

[brunachamon]

I'm facing the same issue after updating ionic for 1.19.1 (ionic/cli-utils) and 3.19.1(cli) :(

[tunathoni]

is it still not solved ?

[RodrigueAnge]

Hi, i'm facing the same problem

cli packages: (E:\IONICPROJECTS\LDK\node_modules)

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.7-201801172029
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v8.9.4
npm  : 5.6.0 
OS   : Windows 8.1

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

[SamarBakr]

I'm facing the same problem but it's working "Now" after adding "www" to "watchPatterns" in the ionic.config.json file , I don't know if this is a right solution or not but it worked ! :smile:

[cnadeau]

@SamarBakr I just got something close to what I want by using a custom watch.config.js

• added it to the package.json "ionic_watch": "./watch.config.js",
• add the node_modules/ to srcFiles.paths
• in srcFiles.callback, returned a Promise that waits X seconds before starting a webpack.runWebpackFullBuild then a watch.buildUpdate to get the browser reload

very far from optimal, but at least it gets our libs in the app without having to manually restart it each time :-)

EDIT: @jbotte Here's more information on our solution, Hope it helps!

package.json

...
 "config": {
      ...
      "ionic_watch": "./watch.config.js",
      ...
    }
...

watch.config.js

var webpack = require('./node_modules/@ionic/app-scripts/dist/webpack');
var watch = require('./node_modules/@ionic/app-scripts/dist/watch');
var copy = require('./node_modules/@ionic/app-scripts/dist/copy');
var copyConfig = require('./node_modules/@ionic/app-scripts/config/copy.config');

// this is a custom dictionary to make it easy to extend/override
// provide a name for an entry, it can be anything such as 'srcFiles' or 'copyConfig'
// then provide an object with the paths, options, and callback fields populated per the Chokidar docs
// https://www.npmjs.com/package/chokidar

// delay to let the lib's build complete

const DELAY_IN_SEC = 5;
let nextRefreshHandle;
module.exports = {
  srcFiles: {
    let myLinkedLibs = ['{{SRC}}/../my-lib/*']
    let allPaths = ['{{SRC}}/**/*.(ts|html|s(c|a)ss)'].join(myLinkedLibs);
    paths: allPaths,
    options: { ignored: ['{{SRC}}/**/*.spec.ts', '{{SRC}}/**/*.e2e.ts', '**/*.DS_Store', '{{SRC}}/index.html'] },
    callback: (event, path, context) => {
      if (nextRefreshHandle) {
        clearTimeout(nextRefreshHandle);
        nextRefreshHandle = null;
      }

      // If the modification happens in the project itself
      if (path && path.indexOf('/node_modules') === -1) {
        return watch.buildUpdate(event, path, context);
      }

      console.log(`reloading in ${DELAY_IN_SEC} secs from now...`)

      return new Promise((resolve, reject) => {
        nextRefreshHandle = setTimeout(() => {
          nextRefreshHandle = null;

          let config = webpack.getWebpackConfig(context, './webpack.config.js');
          webpack.runWebpackFullBuild(config)
            .then(res =>{
              // I'm not sure if that would be required or not, but it would perform a full rebuild from
              // what I've read
              // context.transpileState = 'RequiresBuild';
              return watch.buildUpdate(event, path, context);
            })
            .then(res => {
              resolve(true)
            })
            .catch(reject);

        }, DELAY_IN_SEC * 1000)
      });
    }
  },
  copyConfig: copy.copyConfigToWatchConfig()
};

[jbotte]

experiencing this problem myself any mac os workaround?

[xpalec]

Wow resolved this issue by simple folder name change. Removing "[ ]" from folder name and it worked like a charm!

[jbotte]

i was able to resolve by changing the directory as well, not sure if was removing spaces or () as my folder name was Dropbox (BusinessName)