changed file cant be found in System._loader.moduleRecords

[yyaari]

Hi, probably not a bug but i'm not sure where to get help with the issue i have encountered. I know i'm doing something wrong, just not sure what. I'm starting chokidar-socket-emitter from a gulp task: gulpModules.socketEmitter({port: 5776, path: resourcesSrcDir + '/js'}) and setting System.trace = true in my index.html file. indeed when i change a file a 'change' event is caught in hot-reloader.js the problem is that the module name that passed on the change event is the path of the file in my local file system (file:///blaa/blaaa.js) while in System moduleRecords that module name is under http://localhost:/blaaa/blaaa.js

Thus the module is not found and hot reload doesn't work.

What am i missing?

Thanks alot

[capaj]

@yyaari just guessing, but seems like your path should be just socketEmitter({port: 5776, path: resourcesSrcDir}) not socketEmitter({port: 5776, path: resourcesSrcDir + '/js'})

[yyaari]

Thanks for your response, much appreciated.

removing the 'js' from the path did not help, the socket emitter listens to change in my file system and emits a change with the path (in the file system) to the changed file. the problem remains the same: module names in systemjs are taken from the server while the emitter emits the names of the modules as file system paths

i think there is something basic that im missing. any other advises/ideas?

Thanks again

[peteruithoven]

Could you try this with the cli's instead of a gulp script? Example: https://github.com/capaj/chokidar-socket-emitter#npm-script-usage

[yyaari]

@peteruithoven it worked!! Thanks so much

i just realized that hot reloading when using angular is not really helpful as i need to bootstrap angular again for the changes to take effect (angular not allowing bootstrapping more than once)

[peteruithoven]

Nice! my pleasure. Maybe you could try enabling auto refeshing the page using browser-sync and using the following idea to cache transpilation: https://github.com/jspm/jspm-cli/issues/872#issuecomment-196047456

[yyaari]

Thanks. Will do

[npbenjohnson]

If you are using angular 1.x and routing in the client, you can get a simple state-destructive hot reload with:

if(window) window.angularClone = window.angularClone || window.document.body.cloneNode(true);
export function __unload(){ console.clear(); }
export function __reload(){ document.body = window.angularClone.cloneNode(true); angular.bootstrap(document.body, ['app']);}

has worked for my simple case so far, and there may be an equivalent in v2. The ng-app directive can't be used if you are re-bootstrapping so you need this for your initial bootstrap also:

angular.element(document).ready(function () {
  angular.bootstrap(document.body, ['app']);
});

[alexisvincent]

Seems resolved