bug(MatDialog): MatDialog causes Memory Leak with <button> element

[kraph]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When using MatDialog with button and also some material elements, the dialog never gets removed by garbage collector. There still is a reference by Angular (or maybe zone.js) which is never freed. I believe this the same issue like #10188 and angular/angular#25744
It says the problem was fixed in 9.0.0-rc.7 but the problem still exists. I tested this in version 9.1.15, 10.0.14, 13.3.5 and also an older version (6.0.3).

Reproduction

Steps to reproduce:

1. Create new angular project
2. Create dialog component (like this: https://material.angular.io/components/dialog/overview)
3. put a element in the dialog-component.html
4. compile
5. open dev tools -> memory
6. open and close the dialog multiple times, use the garbage collctor afterwards
7. in edge browser you can also inspect the detached dom nodes under dev toosls -> detached nodes

Expected Behavior

The DOM nodes should be the same before and after opening/closing the button, or at least not go up after the first opening/closing.

Actual Behavior

DOM nodes afterwards are much more than before.

Environment

• Angular: 13.3.5
• CDK/Material: 13.3.5
• Browser(s): Google Chrome(Version 100.0.4896.127), Microsoft Edge(Version 99.0.1150.39)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 (Version 19044.1645)

[kraph]

Apparantly this problem only occurs when I use the device toolbar in the developers tools

[zarend]

Hmm, I reproduce in Chrome only if the device toolbar is open too.

Here is what I found without the device toolbar.

![Uploading Screen Shot 2022-05-06 at 9.49.18 AM.png…]()