Ionic-app-scripts: 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 [email protected]

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?

[larisoft]

I solved this issue the first time by cleeaning my node_modules folder and reisntalling packages. It happened again, and i solved it by reducing the number of files in my app dir.

[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 [email protected]

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)

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

``apple@Apples-MacBook-Air:~/Documents/practice/helloWorld$ CHOKIDAR_USEPOLLING=1 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 [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 ... Withoutfromoption PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or toundefined` 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 [email protected]

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 ([email protected])
   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 ([email protected])

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!

[bloigge]

I had the same issue working with ionic3 - my problem was that the server died when upgrading nodejs from 8.x to 10.x - downgrading back to 8.x and the liveserver works fine again

[sajalsuraj]

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

This worked for me

[karimBenBechir]

Hi guys !
You can run npm start rather that ionic serve.
Don't forget to check or the add the start script in you package.json if not there ( it must be there if you created your app via ionic start cmdline )
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
}
You will see "ionic-app-scripts 3.2.2 " printed in your terminal afer "ionic-app-scripts serve".
Happy hacking :D

[grotto-git]

@renanviana it works for me. Thanks

[Marko-Matijevic]

echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

Enter this in console. Works for me

[itsjhonny]

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

fs.inotify.max_user_watches=524288

then reboot or

sudo sysctl --system

[11/05/2019] Works for me on Fedora 31

[d3v0m4r]

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.

thanks, for me solve the problem
regards from Bolivia