Animations: elements with leave transitions never cleanup causing memory leaks

[alexhobbs]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

When a component has a :leave transition the DOM Element reference is never removed from TransitionAnimationEngine.statesByElement map causing detached DOM nodes and out-of-memory crashes.

Debugging seems to show that the "hasAnimation" flag is preventing cleanup functions being run (see _flushAnimations). Elements never re-enter this function and therefore removeNodesAfterAnimationDone or processLeaveNode are not triggered.

Expected behavior

TransitionAnimationEngine should successfully clean up elements that have left the page.

Minimal reproduction of the problem with instructions

1. Create ListItemComponent which has a simple :leave transition in the @component decorator
2. Include this component with an *ngIf toggle attached to a button in the main AppComponent to trigger the :leave animation
3. Watch detached DOM nodes grow and TransitionAnimationEngine.statesByElement grow

What is the motivation / use case for changing the behavior?

Currently this memory leak is causing performance issues and crashes on dashboard monitor type applications which run for a long time with no user input. Over the cause of a day statesByElement has grown from 0 elements to 10,000.

Environment

Angular version: 6.1.4

 
Browser:
- [x] Chrome (desktop) version 68
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

[babeal]

@alexhobbs we are running into the same issue. What did you do to fix it in the mean time? Pure css animations?

[AlexNarkevich]

we have the issue as well.

[alexhobbs]

@babeal - yes where possible we’ve had to replace with CSS or disable the animation entirely.

[jpduckwo]

Hi, we are having issues with angular material because of this bug. Specifically MatFormField inside MatDialog.

[jpduckwo]

@matsko have you got any ideas on how to approach fixing this one? I'm willing to do the work if there is a direction to take. At worst opening up some way to call a clean up on TransitionAnimationEngine.statesByElement.