angular / angular/components

[Sidenav] Memory leak when used inside router-outlet

Open
#8,862 17 comments 1 reaction 0 assignees View on GitHub
area: material/sidenav P3 perf
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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...)

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and reproduce the leak by switching between the one and two routes inside the sidenav. Compare Chrome heap snapshots before and after additional switches; done means OneComponent and TwoComponent, along with related objects, are released instead of retained.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.