Angular Material MatSortHeader: mat-sort-header directive causing memory leak for matSort

[richieteh94]

MatSortHeader directive (mat-sort-header) causing memory leak for component

Reproduction

Use StackBlitz to reproduce your issue:

• Components MatSortHeader: https://stackblitz.com/edit/angular-ivy-gy65g1

Steps to reproduce:

1. Click the AngularMaterialTable router link.
2. Click the DummyPage router link
3. take a memory snapshot of dummy page.
4. search the snapshot with "AngularMaterialTableComponent"

Expected Behavior

AngularMaterialTableComponent class should not be present in the memory snapshot

Actual Behavior

AngularMaterialTableComponent class present in the memory snapshot

Environment

• Angular: 10, 11
• CDK/Material: 10, 11
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[crisbeto]

I don't think that this is a memory leak, because there's only one reference to AngularMaterialTableComponent in memory even after navigating the between the two pages several times. If there was a leak, the number of references would keep increasing as you're navigating between the two pages. I believe that the framework has to store a reference to the class itself so that it can be instantiated when the user visits the page.

[richieteh94]

@crisbeto
Yes, I observe it too. When navigate between these two pages the number of references does to increase.
I still think the reference need to be remove. This is because if the component using the mat-sort-header directive is taking a lot of memory then is holding unnecessary resources.

[crisbeto]

My understanding is that this is a reference to the AngularMaterialTableComponent class itself, not an instance of it. This won't cause any leaks and we can't do anything about it, because the framework has to have a reference to it.

[richieteh94]

i don't think framework is taking any references, anyway i will search any thing cause this issue first

[crisbeto]

The memory snapshot shows you where the reference is being retained. It's also worth noting that you'll probably see the same behavior even if you remove all of the Material components.

[richieteh94]

@crisbeto if you removed the mat-sort-header in the "AngularMaterialTableComponent" will not present in the memory snapshot when you try to take snapshot in the dummy page

[sameerthekhans]

I can confirm this issue.

1. Open stackblitz 1
2. Open dev tools and goto memory tab
3. Click on toggle button twice - To show and hide TableComponent (hiding will destroy the component)
4. Finally take heap snapshot and search TableComponent in the Class filter
5. Scroll and see in the constructor TableComponent is not deleted

Now do the same above steps with this stackblitz 2, You will observe TableComponent is deleted.

Both stackblitz(s) are the same, except stackblitz 2 does not have matSort on the table.

Angular - 12.0.0
Material - 12.0.0
CDK - 12.0.0