[Sidenav] Memory leak when used inside router-outlet

[npen]

Bug, feature request, or proposal:

When a sidenav is used "inside" router-outlet, it seems there is a memory leak. When the router-outlet is inside the sidenav, there is no problem.

I use the "Take heap snapshot" of Chrome to see the problem.

What are the steps to reproduce?

Sample available on:

https://stackblitz.com/edit/angular-material2-issue-xmgukp?file=app%2Fapp.component.ts

Open in Chrome:

https://angular-material2-issue-xmgukp.stackblitz.io/

• Switch between "one" and "two" routes a few times.
• Take a heap snapshot
• Switch again between routes
• Take another snapshot and compare => OneComponent and TwoComponent are not freed (among many other objects...)

[npen]

If it can help I found a few problems in drawer.ts:

npen@fe21cd7

As you can see in this commit, there is still one line which seems ok to me, but that needs to be commented out to completely fix the leak in the sample...

[Abrissirba]

I did some digging on this and found that if I set dir="ltr" on the mat-sidenav-container it doesn't leek anymore. I wasnt't able to figure out why though...

[mmalerba]

@npen yeah looks like it should work to me, maybe try subscribing in ngAfterContentInit instead of the constructor? or if dir="ltr" somehow makes it work perhaps add a startWith(null)? I'm just kinda guessing at things though 😆

[sheiidan]

PR #13378 should fix the leak issue described above.

[FionaTreveil]

I am not an expert in either javascript or Angular, but I currently have a similar problem to this.

I have component with mat-sidnav-container, mat-sidenav and mat-sidenav-content which is used within a child route. It is therefore being used with a router-outlet inside a parent router-outlet.

I am using version 7.2.2 of @angular/material, but after each display of this component, all the nodes inside the mat-sidenav-container are left hanging and are never free to be garbage collected.

The same code frees up all the nodes if I use

instead of mat-sidenav.

Thank you for any help you can provide.

[FionaTreveil]

On doing some further investigation, I think that the problem that I am seeing relates to bug angular/angular#18606. The mat-drawer code is including an animation trigger with HostBinding.
When the drawer is destroyed, the animation information is not released, leaving references in playersByElement/statesByElement in TransitionAnimationEngine. The result is that all of the nodes within the drawer are left as detached elements when the sidenav is removed.

Is there a way that I can manually free up this animation ?

[mmalerba]

It looks like that issue has been fixed, if you're still able to reproduce it you may want to comment there or open a new issue on angular/angular

[FionaTreveil]

This problem still exists, but is not caused directly by the sidenav component, but as a result of the HostBinding on the animation code. It looks like the bug at angular/angular#18606 is also marked as fixed, so I will open a new issue.

[jsim5446]

Here is a repro that demonstrates this issue is still not fixed in Angular 9, but also shows a work-around that can eliminate the memory leak:

https://stackblitz.com/edit/angular-ivy-u1fvgw

As @FionaTreveil mentioned in previous comment, this is actually a bug in the core Angular animations package, not limited to the Angular Material sidenav component. The stackblitz example included here is just an adaptation of the one I referenced in my comment in angular/angular#24197 to demonstrate the general work-around is effective with the sidenav component too.