Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Removing components with ngIf creates detached DOM Elements causing Memory Leak

See original GitHub issue

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

Description

Removing components with ngIf creates detached DOM Elements causing Memory Leak

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-6gtybe

Please provide the exception or error you saw

1. Toggle the table component a couple of times
2. Do a memory heap snapshot
3. Search `detached` and you will find Detached Table DOM Elements, which won't go away
4. The performance monitor also shows an increase of DOM nodes

Please provide the environment you discovered this bug in

see Stackblitz package.json (I was able to reproduce the bug in Angular 11 and 12)

Anything else?

No response

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

indraraj26commented, Aug 27, 2021

duplicate https://github.com/angular/angular/issues/42848

0reactions

angular-automatic-lock-bot[bot]commented, Oct 2, 2021

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.}

Top Results From Across the Web

Angular *ngIf memory usage - Stack Overflow

When the condition is false, NgIf removes its host element from the DOM, detaches it from DOM events (the attachments that it made), ......

Debug DOM memory leaks with the Detached Elements tool

Use the Detached Elements tool in the Microsoft Edge DevTools to find and fix DOM memory leaks.

How can Detached DOM elements cause memory leak in ...

Detached DOM elements are the elements which have been removed from the DOM but their memory is still retained because of JavaScript.

How to create a memory leak in Angular - Medium

Memory leaks most often arise over time when components are rerendered multiple times, e.g through routing or by using the *ngIf directive. For ......

Angular Leaks Memory With A Massive Amount Of Detached ...

When using ngIf to hide element which contains another element with angular animation trigger appearing DOM nodes that garbage cleaner. Description Small memory...