HMR / Angular CLI and lazy routes

[montella1507]

Hi,

is it possible to use HMR with Lazy routes?

HMR works correctly if i change something in "normally" loaded routes (components).

but if i change something in Lazy loaded module, it will refresh the entire page with error:

HMR] Cannot apply update. Need to do a full reload!(anonymous function) @ dev-server.js:33ZoneDelegate.invoke @ zone.js:232Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401 dev-server.js:34 [HMR] Error: A platform with a different configuration has been created. Please destroy it first. at assertPlatform (http://localhost:4200/vendor.bundle.js:27579:15) at http://localhost:4200/vendor.bundle.js:27564:16 at bootstrap (http://localhost:4200/main.bundle.js:273:132) at hmrBootstrap (http://localhost:4200/main.bundle.js:1091:5) at Object.<anonymous> (http://localhost:4200/main.bundle.js:277:90) at Object.494 (http://localhost:4200/main.bundle.js:288:30) at __webpack_require__ (http://localhost:4200/inline.bundle.js:686:30) at hotApply (http://localhost:4200/inline.bundle.js:613:14) at hotUpdateDownloaded (http://localhost:4200/inline.bundle.js:311:13) at hotAddUpdateChunk (http://localhost:4200/inline.bundle.js:291:13)(anonymous function) @ dev-server.js:34ZoneDelegate.invoke @ zone.js:232Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401 dev-server.js:49[HMR] Waiting for update signal from WDS...

But strange is, it wont work if i change something in my "SharedModule" with shared components - across all modules (lazy loaded too)

if (!platform.injector.get(requiredToken, null)) { throw new Error('A platform with a different configuration has been created. Please destroy it first.'); }
it will drop (requiredToken is "Platform: browserDynamic")

I have solution from there:
https://medium.com/@beeman/tutorial-enable-hrm-in-angular-cli-apps-1b0d13b80130#.jbftda8bb

Thanks for your work.

[antonybudianto7]

@montella1507 most likely pre-enabled aot on latest cli, since my starter worked well with hmr and lazy load

[montella1507]

@antonybudianto7 it worked with thr same version of CLI, but after "part of time".. when i change anything in 80% of my code it must reload entire page... (when i change something in the specific part of my application, HMR works)

Im not sure if i forgot something or not.. I have only 1x accept() in my code (i have HMR specific code only in hmr.ts and main.ts ( https://medium.com/@beeman/tutorial-enable-hrm-in-angular-cli-apps-1b0d13b80130#.jbftda8bb like here).

Is there anything needed in every module?

[antonybudianto7]

I followed the same tutorial actually, but since latest CLI release (beta22-1), it didn't work on lazy loaded components

[montella1507]

@antonybudianto7 ah.. so that may be the cause of the problems for me as well.. im in deadlock little bit :-)) So the only working solution is with beta22 (not 22-1)

[beeman]

Hey @montella1507 and @antonybudianto7,

I've written the tutorial and am encountering the same problem like you guys. I did not yet found a solution to get it working with angular-cli beta 24. I'll post it here if I find one.

[beeman]

It appears that it was a user error in my case.

The complete warning in my console was:

[HMR] Cannot apply update. Need to do a full reload!
[HMR] Error: Cannot enable prod mode after platform setup.

It appeared I had the production set to true in src/environments/environment.hmr.ts.

[asaph26]

I have the same problem with lazy loaded routes, though in my case, sometimes it says there is a hot reload but nothing actually happens and the other times it defaults to the error that @montella1507 faced

dev-server.js:33 [HMR] Cannot apply update. Need to do a full reload!
(anonymous) @ dev-server.js:33
ZoneDelegate.invoke @ zone.js:242
Zone.run @ zone.js:113
(anonymous) @ zone.js:520
ZoneDelegate.invokeTask @ zone.js:275
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:418
dev-server.js:34 [HMR] Error: A platform with a different configuration has been created. Please destroy it first.
    at assertPlatform (http://localhost:4200/vendor.bundle.js:45554:15) [<root>]
    at http://localhost:4200/vendor.bundle.js:45538:16 [<root>]
    at bootstrap (http://localhost:4200/main.bundle.js:1865:132) [<root>]
    at hmrBootstrap (http://localhost:4200/main.bundle.js:2716:5) [<root>]
    at Object.<anonymous> (http://localhost:4200/main.bundle.js:1869:90) [<root>]
    at Object.614 (http://localhost:4200/main.bundle.js:1880:30) [<root>]
    at __webpack_require__ (http://localhost:4200/inline.bundle.js:686:30) [<root>]
    at hotApply (http://localhost:4200/inline.bundle.js:613:14) [<root>]
    at hotUpdateDownloaded (http://localhost:4200/inline.bundle.js:311:13) [<root>]
    at hotAddUpdateChunk (http://localhost:4200/inline.bundle.js:291:13) [<root>]
    at webpackHotUpdateCallback (http://localhost:4200/inline.bundle.js:35:12) [<root>]
    at http://localhost:4200/2.3b2da890ff75ecb45240.hot-update.js:1:1 [<root>]

[Lomand]

Is there any progress regarding this issue?

[e-cloud]

I've figure out a workable solution(may be better). see here https://github.com/e-cloud/ngrx-store-hmr-integration

[maxime1992]

Did anyone found a better way of handling HMR with lazy loading?

[cormacrelf]

@e-cloud's solution works pretty well for me.

EXCEPT: styleUrls. Components in lazy-loaded modules will happily reload, and happily replace CSS that's in a styles: ['//... css here'] block, but not one loaded from a styleUrls path.

styleUrls works for synchronously loaded components, and so does the root 'styles.scss'.

Edit: using styles: [ require('./this.component.scss') ] (even though that would break aot) doesn't make any difference.

[stephengardner]

Any updates?

[wags1999]

Please check out this example I've put together that shows how to reload lazy-loaded routes and lazy/manual-loaded components. It doesn't maintain component state, but has really helped our development team increase their speed of local development.

[volago]

Has any one have such experience - using @wags1999 solution, that HMR reloaded right lazy-module, but rendered HTML wasn't updated to new code?

It works in an example, but not in my project. Cannot find a difference between two.