bug(input/mat-form-field): Detached DOM nodes are not garbage collected and results in memory leak when switching between lazy loaded routes

[EverydayWebDev]

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

---

Description

Background:
I've been using angular material for a couple of years together with a team and recently our application has grown so that we have around 1400 inputs on one screen for example. We 've come across on problems that our application started to becoming slow after switching between different screens/routes after a while. It turned out to be memory leaks (Detached nodes that are not garbage collected) and some of the leaks we 've managed to fix because of missing unsubscribtion in our application but others we can't fix and seems to be input and mat-form-field related. We've implemented a workaround that we reload page when memory hits defined limit so we can still deliver a product however angular material related memory leaks are beyond our control.

Description:
First of all I've created a simple example project that has two screens each in separate module screen-one.module.ts and screen-two.module.ts and those modules are lazy loaded and has its own routes 'screen-one' and 'screen-two'. Screen one is just empty screen so it doesn't have memory leaks and is used as reference and screen two contains some material components.

Steps to reproduce:
Example 1: StackBlitz Material input example
Screen two contains only mat-form-field with nested input.

1. Start with Screen One
2. Navigate to screen two by clicking Screen Two button on left menu
3. Navigate back to Screen One by clicking on menu button
4. Open Chrome Dev tools navigate to the memory tab (in case of stackblitz select VM instance webcontainer) and take a heap snapshot

Actual Behavior:
Dev tools memory profiling shows 1 Detached Node <div class="mat-form-field-flex" DOM that wasn't garbage collected. Fortunately If I repeat reproduction steps again and again the number of detached <div class="mat-form-field-flex" remains the same.

Expected Behavior:
All input and mat-form-field related detached DOM nodes are not present in memory.

---

Example 2: StackBlitz Material input with mat-tab example
Screen two contains only mat-form-field with input that is wrapped with mat-tab and mat-tab-group

1. Start with Screen One
2. Navigate to screen two by clicking Screen Two button on left menu
3. Navigate back to Screen One by clicking on menu button
4. Open Chrome Dev tools navigate to the memory tab (in case of stackblitz select VM instance webcontainer) and take a heap snapshot

Actual Behavior:
Dev tools memory profiling shows 4 Detached Nodes <div class="mat-form-field-flex" DOM that wasn't garbage collected. If I repeat reproduction steps again and again the number of detached <div class="mat-form-field-flex" is accumulating so I have 4 -> 8 -> 12 -> 16 ... detached <div class="mat-form-field-flex" DOM nodes

I 've repeated reproduction steps around 20 times and reached approximately 100 Detached Nodes <div class="mat-form-field-flex"

Expected Behavior:
All input and mat-form-field related detached DOM nodes are not present in memory.

---

Example 3: StackBlitz Material input with mat-menu example
Screen two contains only mat-form-field with input and in app component I am using mat-menu instead.

1. Start with Screen One
2. Navigate to Screen Two by clicking Screen Two button on left menu
3. Navigate back to Screen One by clicking on menu button
4. Open Chrome Dev tools navigate to the memory tab (in case of stackblitz select VM instance webcontainer) and take a heap snapshot

Actual Behavior:
Dev tools memory profiling shows 1 Detached Node <div class="mat-form-field-flex" DOM that wasn't garbage collected. If I repeat reproduction steps again and again the number of detached <div class="mat-form-field-flex" is accumulating so I have 1 -> 2 -> 3 -> 4 ... detached <div class="mat-form-field-flex" DOM nodes

Expected Behavior:
All input and mat-form-field related detached DOM nodes are not present in memory.

Important remarks:

• I can observe the same behavior outside of stackblitz on my local environment and here you can find example project source code:
  Example 1
  Example 2
  Example 3

• I've checked it on angular material v19 and I see the same behavior
  Example 1
  Example 2
  Example 3

Reproduction

Please refer to description above:
Example 1: StackBlitz Material input example
Example 2: StackBlitz Material input with mat-tab example
Example 3: StackBlitz Material input with mat-menu example

Expected Behavior

As in description

Actual Behavior

As in description

Environment

Affected version:
Angular material: v14.2.7 and even in latest angular material v19
Angular: v14.2.13 and even in latest angular v19
NodeJS: v18.20.8
Browser: Chrome Version 134.0.6998.178 (Official Build) (64-bit) Windows 10

[crisbeto]

You're using a somewhat old version of Material and things have changed a lot since then. Have you seen these leaks with the latest stable version?

[EverydayWebDev]

You're using a somewhat old version of Material and things have changed a lot since then. Have you seen these leaks with the latest stable version?

Yes I've but only for those inputs that were focused. Listed stackblitz angular material v19 equivalent example below. Here you go.
Example 1
Example 2
Example 3

[avstudio2]

We are seeing similar behavior on v17. I have just done a test with v12, v14, v17, and v19 and created a small reproduction repo here: https://github.com/avstudio2/ng-material-dom-leak.

[crisbeto]

Looking through the v19 example from the last comment, the only place where the form field is retained is the InspectorOverlayHost:

My guess is that this is something related to the browser's dev tools and we likely can't do much about it from our end. E.g. I see that the non-Material inputs are being retained in a similar way as well:

[dezetit]

We have exactly the same issue in the project—all elements that contain material-related elements in their structure hold references and are not cleared from memory. And it's the same for my friends using material in different projects. Huston, we have a problem!

[EverydayWebDev]

Initially I mentioned that v14 is affected however in v15 Example 2 is still valid and other examples seems to be okayish.