Dialog causes memory leak when dialog component contains a <button>

[benelliott]

Bug, feature request, or proposal:

Instantiating a dialog with a component that contains a regular HTML <button> element causes a DOM node memory leak.

What is the expected behavior?

No memory leak

What is the current behavior?

Memory leak

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-dhmjle?file=app/app.module.ts

1) Open Chrome performance monitor 2) Click Memory > Garbage collect 3) Note the initial DOM node count (around 53) 4) Click the "No leaks on div" button a few times and watch the DOM node count climb 5) Close any open dialogs and press the "Garbage collect" button again 6) Watch the DOM node count decrease to around the initial value (plus some "sticky" dialog nodes that intentionally stick around) 7) Click the "Leaks on button" button a few times and watch the DOM node count climb 8) Close any open dialogs and press the "Garbage collect" button 9) Note that the DOM node count does not decrease to the initial value

What is the use-case or motivation for changing an existing behavior?

Performance

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Latest StackBlitz (Material 5.1.0, Angular 5.2.1), Windows 10, Chrome v64.0.3282.186 64-bit

Is there anything else we should know?

Could be related to https://github.com/angular/angular/issues/20228

[StoneMorKnight]

Any movement on this?

[letrim]

Exact same behavion on Angular 6

[tesseris]

The issue still persists in version 8.2.

[Splaktar]

This is likely also caused by https://github.com/angular/angular/issues/25744.

[crisbeto]

Should be fixed in core by https://github.com/angular/angular/pull/34409.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}