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

[francovp]

Having a kind of this issue right now, SCSS and TS files reload successfull, but the HTML is not.

cli packages: (C:\Users\fvale\AppData\Roaming\npm\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.8
Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v8.9.4
npm               : 5.6.0
OS                : Windows 10

Environment Variables:

ANDROID_HOME : C:\Users\fvale\AppData\Local\Android\sdk

Misc:

backend : pro

[chaitanya-nyros]

Superb @scipioni

[Vinodkumar009]

can anyone tell me who's take care of livereloading in ionic app ?

[mydoal]

Any solution / workaround or windows users? ts changes are reflected but not HTML.

[venerati]

I am currently having the same issue. I have attempted a few of the work arounds above but have yet to get anything better than intermittent success. The only place I have seen changes reflected is while running incognito, but that no longer works. Here is my current environment vars.

@ionic/cli-plugin-proxy : 1.5.7
@ionic/cli-utils        : 1.19.2
ionic (Ionic CLI)       : 3.20.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 6.3.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v9.5.0
npm               : 5.6.0
OS                : Windows 7

Any help would be a great. Thanks in advance.

[KramerTech]

I'm having the same issue as a few others, where I can save as many html files as many times as I want and nothing gets updated in the browser. But save one ts file and everything live-reloads to the correct/current state.

Don't know if this is helpful, but when editing html, the serve log looks like this:

[17:11:03]  build started ...
[17:11:03]  deeplinks update started ...
[17:11:03]  deeplinks update finished in 180 ms
[17:11:03]  template update started ...
[17:11:03]  template update finished in 7 ms
[17:11:03]  build finished in 190 ms

Whereas after editing a ts file, it includes a webpack update:

[17:11:28]  build started ...
[17:11:28]  deeplinks update started ...
[17:11:28]  deeplinks update finished in 155 ms
[17:11:28]  transpile update started ...
[17:11:28]  transpile update finished in 98 ms
** [17:11:28]  webpack update started ...
** [17:11:29]  webpack update finished in 974 ms
[17:11:30]  build finished in 1.57 s

Is there a way to just force a webpack update after every save? Seems that would solve it until a proper fix is worked out.

cli packages:

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

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

System:

Node : v8.9.1
npm  : 5.6.0
OS   : Windows 10

[fdambrosio]

I have the same problem on Android device

[ni-ka]

Had to increase inotify watchers on Arch linux as well, ionic should display a warning.

Great instructions on how to increase: https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers

[venerati]

Any chance there is a way to do this on windows?

[ryanhalley]

On Windows, I had this issue - here is my fix:

Old directory structure: D:\code\xxxx-yyyyy Rename to: D:\code\xxxxyyyyyy

Looks like a bug in ionic watcher.

[Update: This seemed to work for about an hour, and then I now find I still have to Ctrl-F5 the browser after making a code change, for it to definitely take effect. Only CSS changes work 100%, without intervention.]

[samir-kamble]

I am learning Ionic for first time Created sample application by running command

ionic start MyIonicProject blank

Ran it with following command,

ionic serve

I was hoping of it getting reloading whenever i change any files but it is not getting reloaded.

I went through this thread and following is my ionic info output..

Please help me in case I am doing anything wrong.

Apples-MacBook-Air:MyIonicProject apple$ ionic info

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

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

local packages:

    @ionic/app-scripts : 3.1.9
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.11.1
    npm  : 5.6.0 
    OS   : OS X Yosemite

Misc:

    backend : pro

[can-cc]

+1

[krzysztofantczak]

Have You guys tried

CHOKIDAR_USEPOLLING=1 ionic serve

?

[samir-kamble]

@krzysztofantczak, Can you please tell me how to use it?

also, Is there anyone who is using ionic perfectly on a MAC machine?

[Bengejd]

Perfectly is a hard measurement to gauge. Ionic works well on Mac. But you're always going to run into problems, with anything you work on.

[krzysztofantczak]

@samir-kamble i formatted my previous comment - just copy/paste it. Prefixed CHOKIDAR_USEPOLLING=1 switches chokidar (which is - like mentioned above - underlying library responsible for looking for changes in your files) mode from system native handler to polling - it makes it watch for changes on ie. mounted filesystems (nfs, docker containers, etc.).

[ryanhalley]

@krzysztofantczak that command won't work from a Windows command line, but I get the drift of what you're implying; I'll research the related github to work out how to test it, cheers.

https://github.com/paulmillr/chokidar

[samir-kamble]

Not working. There is something really difficult going in there.

Following is the log of the system. It wont go ahead of lint finished command in the end.

Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser -
Ctrl+C to cancel
[01:08:03]  watch started ...
[01:08:03]  build dev started ...
[01:08:03]  clean started ...
[01:08:03]  clean finished in 38 ms
[01:08:03]  copy started ...
[01:08:04]  deeplinks started ...
[01:08:04]  deeplinks finished in 30 ms
[01:08:04]  transpile started ...
[01:08:23]  transpile finished in 18.86 s
[01:08:23]  preprocess started ...
[01:08:23]  preprocess finished in 1 ms
[01:08:23]  webpack started ...
[01:08:23]  copy finished in 20.26 s
[01:08:35]  webpack finished in 12.49 s
[01:08:35]  sass started ...
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
[01:08:39]  sass finished in 3.80 s
[01:08:39]  postprocess started ...
[01:08:39]  postprocess finished in 48 ms
[01:08:39]  lint started ...
[01:08:39]  build dev finished in 36.07 s
[01:08:39]  watch ready in 36.52 s
[01:08:39]  dev server running: http://localhost:8100/

[OK] Development server running!
     Local: http://localhost:8100
     External: http://192.168.0.103:8100
     DevApp: helloWorld@8100 on Apples-MacBook-Air.local

[01:08:52]  lint finished in 13.51 s```

[gezquinndesign]

+1

[samualtarpenning]

I am having the same issue. I have tried to quit the browser quit the terminal.. Nothing seems to work. It makes it very hard/frustrating to get any work done. Any word on a fix for this yet?

[fdambrosio]

I've still this issue

[TiagoDanin]

Same bug.

cli packages: (/usr/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

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

System:

    Node : v9.9.0
    npm  : 5.8.0 
    OS   : Linux 4.14

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

[valonsoft]

In my case, this was caused because I was running another Ionic app in the background. Stopping the other process fixed this

[Dhanushka-Sanjaya]

Here is a solution for you,,, :)

Most probably this can be an issue of updating. Because I opened two of my ionic projects. one is from late 2017. For that project live reload is working without an issue. The problem with my new project. I checked the "ionic info" and found that both are same other than the ionic framework version. my older one is v 3.7.1. unfortunately, that version not installing now. don't know exactly what the problem is. However, I found a solution,

instead of "Ionic serve" command run the following command for the first time. then you will not need to run "ionic serve" each time.

npm run ionic:serve

[ghost]

The only thing that works for me, after check out node/npm installs, was:

[TiagoDanin]

Thank @jnovaes and @krzysztofantczak. This solved for me :+1:

[castillo-media]

Thanks @Dhanushka-Sanjaya That solved the problem for me in Windows 10! 🍕 :beer:

[LucaColombi]

I solved it by doing "ionic doctor check", a fix update was relased and it installed the fix

[ShameSetsu]

The only thing that worked for me was using this command : ionic-app-scripts serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build --lab (put it in a script in package.json). I still can't reload using the other basic commands even on a new project.

[AnkitaKhurana]

Thank you @krzysztofantczak

[neogenz]

Thanks @krzysztofantczak that works for me !

[ziyaddin]

Thanks @krzysztofantczak

[AnagramEngineering]

For me unfortunately none of the suggestions mentioned here have worked.

But there are a couple of other tickets where people suffer the same problem.

I just copied the solution (see below) from there. This was the ONLY WAY, i could get rid of this problem (both mac & windows)

vim node_modules/@ionic/app-scripts/dist/template.js    
# comment out the break in line 29

Not an ideal solution but still better than saving each file twice.

[ali9itani]

Thanks @AnagramEngineering . Only your solution worked for me.

my ionic info:

@ionic/cli-utils : 1.19.2 ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.11
Cordova Platforms  : android 7.0.0 browser 5.0.3
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v8.9.0
npm               : 5.5.1 
OS                : Windows 10

[JdidDahmane]

To fix: remove ./node_modules/ws folder and run $npm install ws@3.3.2

That's work fine into my project you need to do this every projects

[PurpleEdge2214]

https://stackoverflow.com/questions/51408576/ionic-css-is-not-loading-when-page-is-refreshed

I was having the problem that my css wasn't being applied after a code change, or browser refresh. This linked explanation makes sense since I had a device connected while I was running ionic serve.

Running ionic serve --lab

... refreshed the browser, but disabling Remote Devices didn't help.

[ankraj077]

Following solved my problem:

ionic-app-scripts serve

[vandres]

@AnagramEngineering Can't believe this, yours is the only working fix. For me the reload of pages worked well, but components never got updated. No matter how often I saved

Ionic:

   ionic (Ionic CLI)  : 4.4.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic 5.2.4, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.1.4, (and 7 other plugins)

System:

   Android SDK Tools : 26.1.1 (/usr/local/opt/android-sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 7.0.0
   NodeJS            : v9.11.1 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS
   Xcode             : Xcode 10.1 Build version 10B61

[yenleidong]

Here is a solution for you,,, :)

Most probably this can be an issue of updating. Because I opened two of my ionic projects. one is from late 2017. For that project live reload is working without an issue. The problem with my new project. I checked the "ionic info" and found that both are same other than the ionic framework version. my older one is v 3.7.1. unfortunately, that version not installing now. don't know exactly what the problem is. However, I found a solution,

instead of "Ionic serve" command run the following command for the first time. then you will not need to run "ionic serve" each time.

npm run ionic:serve

it's work for me

[brik18]

@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()
};

works for me, only when combine with vscode and Cordova tools.

[AndrusGerman]

CHOKIDAR_USEPOLLING=1 ionic serve This solved the problem, does someone explain to me what it does?

[muhammadumerfarooq]

does anyone find the solution on windows ??

[muhammadumerfarooq]

in my case i have updated the app-scripts to latest version and then restart my sytem, now it starts reloading each time i changed the code

[renanviana]

Hi guys,

This command solved for me: npm start ionic serve

My configuration:

`cli packages: (C:\Users\Renan Viana\AppData\Roaming\npm\node_modules)

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

global packages:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)

local packages:

@ionic/app-scripts : 3.2.1
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.3

System:

Node : v10.15.2
npm  : 6.4.1
OS   : Windows 10

Environment Variables:

ANDROID_HOME : C:\Users\Renan Viana\AppData\Local\Android\android-sdk

Misc:

backend : pro`

[acinace]

@renanviana it works for me. Thanks

My configuration

@ionic/cli-utils  : 1.19.3
ionic (Ionic CLI) : 3.20.1

local packages:

@ionic/app-scripts : 3.2.1
Ionic Framework    : ionic-angular 3.9.3

System:

Node : v10.15.3
npm  : 6.4.1
OS   : Windows 10

Misc:

backend : pro

[renanviana]

@laReute incredible!! 😄

[kennyalmendral]

Thanks @Dhanushka-Sanjaya, that worked! 👍

[AlperMulayim]

Same problem causes for me on Ubuntu 18.04 My ionic information.

Ionic:

ionic (Ionic CLI) : 4.12.0 Ionic Framework : @ionic/angular 4.6.0 @angular-devkit/build-angular : 0.13.9 @angular-devkit/schematics : 7.3.9 @angular/cli : 7.3.9 @ionic/angular-toolkit : 1.5.1

System:

NodeJS : v8.10.0 (/usr/bin/node) npm : 3.5.2 OS : Linux 4.15

Thanks.

[dayyad]

I had the same issue and managed to solve (Running ionic 4) by running

ionic serve

as sudo

sudo ionic serve

Still feel like Ionic should warn for this being a potential problem.

[GeorgeDubuque]

The problem for me is there were a bunch of ionic processes running with there own ports open. I solved the issue by simply killing those processes. I found them via netstat -p | grep ionic. I am using Ionic4 though. Hope this helps someone!