Ivy Memory Leak: Select & Option Elements

[Everduin94]

🐞 bug report

Affected Package

Minimal reproduction uses Angular 9.1.9

Is this a regression?

This issue does not happen when using View Engine (enableIvy: false)

Description

When running Angular with Ivy (enableIvy: true), if a select element contains an option element, the HTML select element and it's component will leak.

• If the option element is removed, the select/component will not leak
• When running view engine (enableIvy: false), the select/component will not leak.

🔬 Minimal Reproduction

Example using Ivy (Creates leak): https://angular-ivy-select-mem-leak.stackblitz.io/
Example using View Engine (Does not create leak): https://angular-ve-select-mem-leak.stackblitz.io/

🔥 Exception or Error

None

🌍 Your Environment

Angular Version:

@angular/animations9.1.9
@angular/common9.1.9
@angular/compiler9.1.9
@angular/core9.1.9
@angular/forms9.1.9
@angular/platform-browser9.1.9
@angular/platform-browser-dynamic9.1.9
@angular/router9.1.9
rxjs6.5.5
tslib1.13.0
zone.js 0.10.3

Anything else relevant?
Replicated in Chrome: Version 83.0.4103.106 (Official Build) (64-bit)

[petebacondarwin]

@Everduin94 can you have a look to see if this is the same problem that has been reported in one of:

• Ivy is leaking memory #35164
• ngFor memory leak #29053
• NgFor, NgForOf (DefaultIterableDiffer + IterableChangeRecord) can leak memory #36878

[Everduin94]

@petebacondarwin

#35164 seems similar. Although, in that issue it's the ComponentView and EmbeddedView that are leaking. In my reproduction, the native element (HTMLSelect) and the component (LeakComponent) housing the native element are leaking. -- That issue is also using Dynamic Components whereas this is simply a select element in a component template.

[Kshitij-Banerjee]

Also seeing the same with "@angular/animations": "9.1.0", "@angular/cdk": "^9.0.0", "@angular/common": "9.1.0", "@angular/compiler": "9.1.0", "@angular/core": "9.1.0",

ivy builds are on.

[KimAlexander]

Any update on this ?
Same problem on "@angular/core": "9.1.13"

[JoostK]

This appears to be a Chrome bug, similar to what was found in #40614.

In VE the same leak occurs, but in VE's case no internal data structures are attached to the DOM elements so only the detached nodes can be found in the heapdump:

[Everduin94]

Edit: I may be misunderstanding, if you're suggesting the source of the leak is the same, but ivy handles attaching internal data structures to DOM elements differently and thus the container components leaks in Ivy but not VE; that makes sense to me.

@JoostK I don't think that what happens in VE should be considered the same leak, as the consequences are significantly different. -- In Ivy, the component containing the select element is leaked (as well as anything residing inside of that component). In VE, the component containing the select element is not leaked, and thus everything inside of that component that is eligible for GC is garbage collected.

I updated my example to build a large array of data on init in Leak Component:

Ivy:

VE:

Also, from a debugging standpoint. When I check if my component is leaking, I'll search that components name in the memory profiler. Even if the detached elements are leaking in VE due to a chrome bug, I can still confirm that the component itself is not causing the leak. Whereas in Ivy, I can no longer rely on this process (in dev configuration), as this issue may be what's causing the leak and not the component itself.

[KimAlexander]

@Everduin94, Do you have this leaking problem in production build ? Seems that i have this problem in production build too with Ivy

[JoostK]

A change was just merged in #41358 which marked #41047 as fixed, but it addresses this issue in the same way. The memory leak itself is still present as that is a Chrome bug, but Angular's internal data structures should no longer be attached to the leaking objects.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}