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.

md-overlay-container duplicated with angular-hmr

See original GitHub issue

Bug:

When using Hot Module Reload and provide(OVERLAY_CONTAINER_TOKEN, {useValue: createOverlayContainer()}), each reload duplicates md-overlay-container overlay div

What is the expected behavior?

Only one overlay div

What is the current behavior?

Overlay div duplicated

Issue Analytics

State:
Created 7 years ago
Reactions:7
Comments:20 (6 by maintainers)

Top GitHub Comments

12reactions

jeffrey-igawcommented, Feb 26, 2018

Please, HMR is reaaaaaaaaaaaaaaaallly necessary feature for us, EVERY DAY!

Dear Material team, Could you make HMR work properly with material 2?

9reactions

AsafAgranatcommented, Dec 21, 2017

I’m experiencing the same as @borislemke reports. I added HMR to my project and if there’s a dialog open, a ghost overlay-container is added.

More importantly, the dialog loses it’s bind to the styles. If you look at the <head> section of the document, among the injected <styles> tags you can find the specific <style> dedicated to mat-dialog-container . After a save (with hmr enabled), this style tag disappears. Angular “forgets” to inject the style back to the document.

To reproduce:

Enable HMR on a project with Angular Material 2
Set up a Material Dialog and open it
Inspect the mat-dialog-container element
In the inspector, click on the <style>…</style> link to the right of the mat-dialog-container class name - It’ll take you to the <head> section and focus you on the relevant <style> tag
Change anything in your code - a TS, HTML or SCSS of any component, and save
Hot loading occurs without errors
The dialog corrupts as its relevant <style> tag in the head disappears.
More than this is happening, as you can notice that elements in the dialog are not clickable (even when you get to them with the inspector’s help)

I hope someone can get to the bottom of this. As I work on dialogs at the moment, I have to disable HMR as it makes it impossible to save any changes without a manual reload of the page.

Before HMR reload screenshot - 21_12_2017 22_57_42

After HMR reload screenshot - 21_12_2017 22_58_09

Top Results From Across the Web

Angular 4 OverlayContainer duplicate - modal dialog

I think in this case you just have to detach/dispose the things you no longer need const overlayRef = this.overlay.create({.

angular/angular - Gitter

hello I want to start a project using ng2, webpack and ngrx (and optionaly bootstrap4 + ng2-dragula + ng2-smartable), any starter recommandation ...

The State of HMR in Angular - JavaScript in Plain English

Angular 11 made it easy to use HMR by providing it out-of-box in the CLI. ... Duplicate subscriptions could be created as HMR...

Submit malware for free analysis with Falcon Sandbox and Hybrid Analysis technology. Hybrid Analysis develops and licenses analysis tools to fight malware.

ANGULAR 4 Pocket Primer - DOKUMEN.PUB

Duplication or dissemination of any text, code, simulations, images, ... The Reason for Skipping Angular 3 ... Hot Module Reloading (HMR) and Webpack....