dialog: generating detached DOM nodes when closed

[vinaynb]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Using $mdDialog with custom template should not result in detached DOM nodes.

What is the current behavior?

When using $mdDialog and after closing it via $mdDialog.hide(), the heap snapshots show lot of detached DOM nodes which point to instanceCache in $mdDialog service. Check out the heap snapshot screenshot

I tried to figure out the internals and i think mdDialog is setting up some kind of internal cache which re-uses things when same modal's are opened multiple times but i failed to identify it concretely and clear those detached nodes from memory. I target to run my application on raspberry pi and it has quite a few modals hence increasing detached dom node count is warning signal for me leading to memory exhaustion over time. Hence i guess i need someone to familiar with internals to point me in right direction and if at all there is something leaking with mdDialog ?

CodePen and steps to reproduce the issue:

CodePen Demo which shows your issue:

I will try to reproduce this issue on codepen but as of now i don't have a pen.

Detailed Reproduction Steps:

I am using ui router and while switching between states if i open a modal with custom template and close it and then check the snapshot it shows detached nodes. Those nodes don't show if i don't open modal at all.

Which versions of AngularJS, Material, OS, and browsers are affected?

Angular js - 1.6.8
OS - linux/ubuntu 14.04
browser - chrome 65

[Splaktar]

What version of AngularJS Material is in use?

Please provide a demo and reproduction steps for checking the heap and observing detached nodes. Also, are the nodes eventually garbage collected over time or do they keep accumulating?

[vinaynb]

Angular material version - 1.1.9 (forked)
I have created a basic repro here.

I must note that although there are detached nodes in the pen i mentioned above, the retainer graph is for them is not the same as i have in my angular application. But maybe this example might help in debugging.

Steps to reproduce

• open pen and take a heap snapshot
• open dialog by clicking TEST button and close it by pressing ESC or area outside the modal
• again take a heap snapshot and notice the newly added detached dom nodes (more than 500 nodes approx show up)
• also check out Scope tree in last heapshot and we find the whole controller for mdDialog is present even though it is destroyed. Check out the images below showcasing both the issues.

Also, are the nodes even garbage collected over time or do they keep accumulating?

From what i see they are not being gc'ed even though i fired it manually but at the same time when they do not keep accumulating if it open the same dialog multiple times. Maybe its caching at play here.

[Splaktar]

#10851 also mentions that $mdDialog is leaking memory.

[Splaktar]

#11493 has some additional debugging information that is related to this issue.

[Splaktar]

In angular/angular.js#4864 (comment), it is mentioned that ngAnimate causes this same behavior of Nodes and listeners increasing over time, but the JS Head remaining stable. We of course do use ngAnimate.

[Splaktar]

Here's a profiling session with 1.2.0 that was about 50 seconds long. You can see that, like the JS Heap, the Nodes and listeners are garbage collected away (less often than for the JS).

I've found a minor issue where we may leak two listeners per dialog closing, but fixing it doesn't really change the behavior in these profiling sessions.

[Splaktar]

I tried with ngAnimate disabled via $animate.enabled(false); but it doesn't seem to have a significant impact:

[Splaktar]

I'm going to lower the priority on this because I think that most of the leaks related to this have been resolved. The Nodes and Listeners tha increase, do seem to be garbage collected.

I would be happy to dig into this some more if someone could point out a specific use case/repro with AngularJS Material 1.2.0 (or hopefully 1.2.1 soon) along with some of their investigation findings.