question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HMR / Angular CLI and lazy routes

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:14

github_iconTop GitHub Comments

12reactions
Lomandcommented, Jan 23, 2017

Is there any progress regarding this issue?

9reactions
wags1999commented, Mar 30, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular CLI HMR with Lazy-Loaded routes hot-reloads the ...
If I change any component and make it lazy loaded, angular HMR will hot-reload everything, making the page sync slower.
Read more >
Lazy Routes reload whole App #76 - PatrickJS/angular-hmr
I've come up with a solution for using Angular HMR with lazy-loaded components, where each component's module gets lazy-reloaded - without ...
Read more >
Angular 11 - hmr - ngrx - lazy loaded modules : r/Angular2
It seems that the hmr-implementation mostly reloads the entire tree, so changing some code deep in a component (lazy loaded) will reload all...
Read more >
Ionic 5 - Angular 11 and Hot Module Replacement
I faced that whole app was refreshed beacause of lazy module. github.com/PatrickJS/angular-hmr · Lazy Routes reload whole App.
Read more >
ng serve - Angular
Option Description Value Type Default Value ‑‑hmr Enable hot module replacement. boolean false ‑‑host Host to listen on. string localhost ‑‑open Opens the url in default...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found