Components with non-empty HTML input field not released in memory

🐞 bug report

Affected Package

The issue is caused by package @angular/core or forms?

Is this a regression?

unsure

Description

If I have an app with 2 pages and routing between them, the components on each page would normally be destroyed when routing between the pages. If a page has an input with [(ngModel)] binding however, the page/component will still call ngOnDestroy but will not be released from memory (see chrome dev tools)

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-b5sb94

Enter something in the input field -> route to page 2 -> route back -> Page1Component will be 2x in the memory

🔥 Exception or Error

n/a

🌍 Your Environment

Angular Version:

10

Anything else relevant? n/a

[capc0]

this should be high prio IMO, since all angular apps will leak large amounts of memory and perform very poorly after some hours of usage. Almost all components have this problem.

[nartc]

I believe I just ran into this same issue. Here’s the sample repro: https://github.com/nartc/demo-angular-memory-profile

There are two cases (screenshots) that demonstrate this memory issue:

• The currentPage input was initially a [(ngModel)] then I changed to [value] and (input) just to see if there’s any difference. No difference at all.
• ngOnDestroy in ListItemComponent is being called correctly for each item.

Not sure if this is entirely related because the memory issue does not exist if the input isn’t used at all.

PS: I also forgot to mention that the leaked seems to be garbage collected after doing another round of Navigation without changing currentPage