Hot-loader kicks in, but page still reloads

[jbryson3]

This seems to only be a problem on my actual project. The demo project works just fine.

At first I thought it was because I had temp/safe saving turned on in my IDE. Turned that off, still happening. Then I noticed that for any file change I was seeing 2 instances of file changed which seems to be tied to my install of https://github.com/chrislopresto/ember-freestyle/issues/55 - but I got rid of that.

Hot-reloader seems to be kicking in just fine. But I'm still getting a full page reload. Any debugging tips for me?

file changed templates/components/model-count-block.hbs

Build successful (2370ms) – Serving on http://localhost:4200/
Skipping livereload for: app/templates/components/model-count-block.hbs
/Users/jbryson3/code/arbiter/app/templates/components/model-count-block.hbs
Reloading /Users/jbryson3/code/arbiter/app/templates/components/model-count-block.hbs only
GEThttp://localhost:49153/changed?files=/Users/jbryson3/code/arbiter/app/templates/components/model-count-block.hbs

Slowest Nodes (totalTime => 5% )              | Total (avg)
----------------------------------------------+---------------------
Concat: App (1)                               | 769ms
Concat: Vendor /assets/scripts/vendor.js (1)  | 199ms
StylusCompiler (1)                            | 145ms
Funnel: Filtered App (2)                      | 132ms (66 ms)

GET / 304 0.613 ms - -
GET /ember-cli-live-reload.js 304 0.592 ms - -
GET /assets/stylesheets/vendor.css 304 0.447 ms - -

[toranb]

Ah I've seen this a time or 2 in my day ;)

First step is to open chrome dev and put a break point on this line in the hot reload component itself.

https://github.com/toranb/ember-cli-hot-loader/blob/master/addon/components/hot-replacement-component.js#L86

Next after you change a hbs/JS file step down into this function and see if it has a match for pods/or classic ember-cli filesystem layout. You should be able to see why it's failing within 1 of those 2 lookups (unless you are using module unification for layout - that isn't supported yet).

If that is cool, meaning it finds a match for classic lets say ... then I'd put a debugger here to see if the live reload plugin is attached/installed/working (ensure you do a full page refresh after you add this debugger -it only hits this 1X when the page loads for the very first time)

https://github.com/toranb/ember-cli-hot-loader/blob/master/addon/instance-initializers/hot-loader-livereload-plugin.js#L72

If that returns w/out running the line below "hot reload" won't work

window.LiveReload.addPlugin(Plugin);

Give that a try quick and report back :)

[jbryson3]

Ha! Thanks for the quick response.

I put breakpoints all over hot-replacement-component and in the hot-reload-resolver including the one you suggested. I changed a components hbs file. No breakpoint was hit, and the page continued to do a full reload. I also tried with a components js file. Same story

I put a debugger in hot-loader-livereload-plugin, and its definitely running

window.LiveReload.addPlugin(Plugin)

[toranb]

@jbryson3 ah so no breakpoint was hit eh? next up see if you can put a ui.writeLine in the node_modules/ember-cli-hot-loader/lib/hot-reloader.js file around this line

https://github.com/toranb/ember-cli-hot-loader/blob/master/lib/hot-reloader.js#L19

^See what strings if any are in the array for supportedTypes

Next put a ui.writeLine just above this line to see what the filePath & reloadJsPattern are

https://github.com/toranb/ember-cli-hot-loader/blob/master/lib/hot-reloader.js#L34

Those are the ember-cli side of the change detection. I'm curious if something isn't matching in that shouldReload logic

[jbryson3]

@toranb I traced the debugging path from both the working demo app and my non-working app only to find that it was setup/user error.

Turns out in my app.js I wasn't ever using the newly introduced (to my codebase) app/resolver.js

import Resolver from 'ember-resolver';

let App = Ember.Application.extend({
  Resolver,
  // ...
});

Changing it to the following fixed the issues.

import Resolver from './resolver';

Sorry for the alarm bells. And thanks for providing easy to follow debugging instructions, they helped immensely.

Would you like me to work on a pull request along these lines?

1. Create an app.js template to use a possibly new resolver.js
2. If resolver.js is a new file, warn the user in the terminal that they need to use it in their app.js
3. Amend the README.md to include info about this use case

[toranb]

@jbryson3 wow that would be awesome! Thanks also for all the hard work on your end chasing down the delta between those 2 apps!

One last question - what version of ember are you using? And are you installing it with npm or bower?

Thanks in advance for the ReadMe PR!

[toranb]

Closing this out but let me know if you find time for a PR in the near future