Ionic-cli: Live reloader is not working at all after latest CLI

[Sampath-Lokuge]

The live reloader is not working at all after latest CLI :(

Note: I have downgraded to 3.15.0 and now it works.

Ionic info:

 @ionic/cli-utils  : 1.15.1
    ionic (Ionic CLI) : 3.15.1

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

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

[vincentfierant]

Same here!

[zalog]

Same here.

[zarko-tg]

Confirmed @dwieeb.

[IsaacSomething]

same ... ionic serve by default seems to have the flag --nolivereload

[botweb]

Same here, but works using --livereload argument

[rfoel]

Can you guys confirm that this is on Windows? Otherwise, this should do the trick:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

[Sampath-Lokuge]

Yes, Hope you can see the Ionic info above. @rfoel

[amerzad]

I am using 3.15.2 and it works for HTML changes only, but for ts files, it does not reflect changes.
I tried with --livereload and didn't work.
I downgraded to 3.13.0 step by step and none of them worked. The problem started only from a week or so.
I checked the source file www/build/main.js and found that the changes are not reflected, so it is not related to browser.
I remembered I had a custom webpack merge-webpack.config.js and merge-optimization.config.js, and they are just to allow sharing some of the code from backend, so basicly I need them only for tsconfig paths.
So, I removed them, and copied the files over, and refreshed all the references, and viola, the live reload started to work.
There must be something related to my custom webpack config files.
This is my merge-optimization.config.js:

'use strict';

var path = require('path');
var merge = require('webpack-merge');

var projectRootDir = process.env.IONIC_ROOT_DIR;
var appScriptsDir = process.env.IONIC_APP_SCRIPTS_DIR;

var originalConfig = require(path.join(appScriptsDir, 'config', 'optimization.config.js'));
var myChanges = {
  resolve: {
    alias: {
      models: path.join(projectRootDir, 'api/server/imports/models'),
      collections: path.join(projectRootDir, 'api/server/imports/collections')
    }
  }
};
var config = {
  dev: myChanges,
  prod: myChanges
};
// console.log(__filename);
module.exports = merge(originalConfig, config);

And this is my merge-webpack.config.js

'use strict';

var path = require('path');
var merge = require('webpack-merge');

var projectRootDir = process.env.IONIC_ROOT_DIR;
var appScriptsDir = process.env.IONIC_APP_SCRIPTS_DIR;

var originalConfig = require(path.join(appScriptsDir, 'config', 'webpack.config.js'));
var myChanges = {
  resolve: {
    alias: {
      models: path.join(projectRootDir, 'api/server/imports/models'),
      collections: path.join(projectRootDir, 'api/server/imports/collections')
    }
  },
  externals: [
    resolveExternals
  ],
  node: {
    __dirname: true
  }

}
var config = {
  dev: myChanges,
  prod: myChanges
};
function resolveExternals(context, request, callback) {
  return resolveMeteor(request, callback) ||
      callback();
}

function resolveMeteor(request, callback) {
  var match = request.match(/^meteor\/(.+)$/);
  var pack = match && match[1];

  if (pack) {
    callback(null, 'Package["' + pack + '"]');
    return true;
  }
}
// console.log(__filename);
module.exports = merge(originalConfig, config);

[IsaacSomething]

I sort of fixed it ( it seems to work a bit better ) by appending -x ( no proxy ) and setting my own -p [port num] -r [livereload port num]

ionic serve -x -p 1234 -r 12345

[amerzad]

@IsaacSomething
It didn't work for me!

[amerzad]

For my case, the ionic-cli is prompting on change and regenerating, but actually no ts files are regenerated. So I presume I don't need to do:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Yet I tried it and the problem persists.

[trkoch]

@amerzad Thanks for the hint! It appears that webpack-merge is doing something funny not compatible with Ionic default webpack configuration. I rewrote my customization without using webpack-merge and live reloading resumed to work.

[aaronneon2]

Hey guys, I managed to fix the broken live reload on my Mac by following the hint found in this issue.

2757

Hope it helps.