fix(core): prevent animated element duplication with dynamic components in zoneless mode by mattlewis92 · Pull Request #67032 · angular/angular

mattlewis92 · 2026-02-11T21:13:31Z

Important

This was a fully vibe coded solution by Claude. Maybe there is a simpler way to solve this? At the very least, the test case reproduces the bug (I patched this into our application and verified it does fix the issue)

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/angular/angular/blob/main/contributing-docs/commit-message-guidelines.md
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

Bugfix
Feature
Code style update (formatting, local variables)
Refactoring (no functional changes, no api changes)
Build related changes
CI related changes
Documentation content changes
angular.dev application / infrastructure changes
Other... Please describe:

What is the current behavior?

Issue Number: #66794

What is the new behavior?

Fast clicking an animated menu to open and close it repeatedly in zoneless mode doesn't leave orphaned DOM nodes

Does this PR introduce a breaking change?

Yes
No

Other information

thePunderWoman

This seems fine, but I think we should be more aggressive in potential error cases. Tests look green, which is good, but I'm just a bit worried about the cancelLeavingNodes changes needing a few more guards for safety. Can you (or claude) do an assessment?

Gemini is worried that the leavingNodes keying logic isn't safe and could lead to cross-instance interference, but I think that's outside of the scope of this PR.

thePunderWoman · 2026-02-11T21:39:02Z

packages/core/test/acceptance/animation_spec.ts

      }

-      // Finish remaining animations (wait 100ms real time which is > 10ms animation)
+      // After all animations complete, 20 toggles (even) = closed = 0


Important note: In this environment animation events are not fired by the browser. They have to be manually dispatched in the test, and I don't see that happening in your test here. You'll see examples of that in earlier tests. So this is likely something you'll want to verify is happening here, otherwise it may be a false positive or false negative.

Addressed in 9b449d6 (also verified the test still fails with the patch not applied)

thePunderWoman · 2026-02-11T22:19:49Z

packages/core/src/animation/utils.ts

+    //   renders in its own container, e.g. CDK Overlay).
+    // Leaving elements in the same parent that are NOT the previousSibling
+    // are left alone (e.g. @for items animating out at different positions).
+    if (leavingEl === prevSibling || (leavingParent && leavingParent !== newParent)) {


I am a little concerned about this line and the potential for null === null in the case that newParent, prevSibling, or leavingEl are null. It's probably worth adding null check guards for safety.

Addressed in 9b449d6

mattlewis92 · 2026-02-12T10:06:38Z

This seems fine, but I think we should be more aggressive in potential error cases. Tests look green, which is good, but I'm just a bit worried about the cancelLeavingNodes changes needing a few more guards for safety. Can you (or claude) do an assessment?

Gemini is worried that the leavingNodes keying logic isn't safe and could lead to cross-instance interference, but I think that's outside of the scope of this PR.

This was claudes response:

Assessment: cancelLeavingNodes / leavingNodes safety

How it works: leavingNodes is a WeakMap<TNode, HTMLElement[]>. TNodes are shared across all embedded views created from the same template (same TView). This means if two components use the same
template, their leaving elements end up in the same array.

Is cross-instance interference possible? Theoretically, but only if:

Two component instances share the same TemplateRef
Both have leaving elements tracked simultaneously
One inserts a new element while the other is still leaving

The leavingParent !== newParent check would match the other instance's element and cancel it prematurely.

This is not a new risk. The leavingNodes WeakMap keyed by TNode existed before this PR — it was already populated by trackLeavingNodes inside animateLeaveClassRunner and consumed by
cancelLeavingNodes called from ɵɵanimateEnter. The same cross-instance interference risk was already present. This PR doesn't change the keying strategy.

Practical impact: The scenario requires two menus from the same template to close simultaneously, then one to reopen before the other's CSS animation completes. With CDK Overlay, only one menu is
typically open per trigger, making this extremely unlikely. If it did occur, the other menu's leave animation would be cut short — not ideal but not a crash.

Could we make it safer? The key would need something instance-specific (e.g. LView ID or VCR identity), but that's a more invasive refactor of the existing leavingNodes data structure and outside
the scope of this fix.

thePunderWoman

LGTM, and a huge thank you!

thePunderWoman · 2026-02-12T16:43:42Z

@mattlewis92 Looks like you have a minor lint issue to fix.

…ts in zoneless mode When using ViewContainerRef to rapidly toggle animated elements in zoneless mode (e.g. CDK Overlay menus), multiple copies of the element could appear in the DOM. This happened because leave animations were queued but not yet executed, and the existing `cancelLeavingNodes` mechanism could not find the leaving element to cancel it — it ran during template execution before the new element was in the DOM, and used the declaration container's anchor which doesn't work for overlay/portal patterns where elements are moved to separate containers. This commit replaces the previous approach with a simpler mechanism: - Track leaving nodes immediately during the Detach tree walk (before the leave animation queue flushes) so they are discoverable - Cancel leaving nodes after DOM insertion in the Insert tree walk, checking both `previousSibling` (same-container toggle) and different DOM parents (overlay/portal case) - Revert the ineffective fix from 38263f6 (`removeAnimationsFromQueue`) This also removes the circular dependency between `animation/utils.ts` and `render3/node_manipulation.ts` (`getBeforeNodeForView` import).

…omponents in zoneless mode fixup! fix(core): prevent animated element duplication with dynamic components in zoneless mode Address review comments: - Add null guards to cancelLeavingNodes to prevent null === null matches - Rewrite test to use fakeAsync with tickAnimationFrames and manual animationend event dispatch instead of real async delays

mattlewis92 · 2026-02-12T17:26:11Z

@mattlewis92 Looks like you have a minor lint issue to fix.

Odd, I didn't change the file it's complaining about. Rebasing against main and hoping that helps 🙏

thePunderWoman · 2026-02-12T17:44:03Z

@mattlewis92 Looks like the rebase took care of it. Thanks!

thePunderWoman · 2026-02-12T17:52:47Z

@mattlewis92 Bummer...looks like this has conflicts with the patch branch. We can merge it into main targeting the next minor. You'd have to create a patch version of this PR to get it to safely land in patch as well.

mattlewis92 · 2026-02-12T18:01:20Z

@mattlewis92 Bummer...looks like this has conflicts with the patch branch. We can merge it into main targeting the next minor. You'd have to create a patch version of this PR to get it to safely land in patch as well.

We are actually still on v20 right now so not a big deal for us, I've just been having claude patch these fixes into our angular version 😅 If other people report the same issue I'd be happy to make a patch version as well though!

mattrbeck · 2026-02-13T17:35:12Z

This PR was merged into the repository. The changes were merged into the following branches:

main: 0806ee3

basrieter · 2026-03-01T23:08:56Z

I don't know 100% sure, but what I see in 21.2.0 is that if I use:

@HostBinding("animate.leave")
animateLeave = "state-leave";

the element will not be removed from the DOM at all.

mattlewis92 · 2026-03-02T09:26:04Z

I don't know 100% sure, but what I see in 21.2.0 is that if I use:
@HostBinding("animate.leave")
animateLeave = "state-leave";
the element will not be removed from the DOM at all.

Please could you make a minimal stackblitz that reproduces the problem you're experiencing, and file a new issue with a bug report? It's hard to reproduce the problem to fix it with just the code snippet you provided.

basrieter · 2026-03-02T22:29:16Z

Done: #67400

pullapprove bot requested a review from JeanMeche February 11, 2026 21:13

angular-robot bot added the area: core Issues related to the framework runtime label Feb 11, 2026

ngbot bot added this to the Backlog milestone Feb 11, 2026

JeanMeche requested a review from thePunderWoman February 11, 2026 21:14

mattlewis92 mentioned this pull request Feb 11, 2026

Dynamic component + animate.leave leaves orphaned DOM nodes #66794

Closed

bowenc-up approved these changes Feb 11, 2026

View reviewed changes

thePunderWoman reviewed Feb 11, 2026

View reviewed changes

mattlewis92 requested a review from thePunderWoman February 12, 2026 10:06

thePunderWoman approved these changes Feb 12, 2026

View reviewed changes

mattlewis92 added 2 commits February 12, 2026 17:25

mattlewis92 force-pushed the fix/animation-element-duplication-zoneless branch from 9b449d6 to b6f00f7 Compare February 12, 2026 17:25

thePunderWoman added target: patch This PR is targeted for the next patch release target: minor This PR is targeted for the next minor release and removed target: patch This PR is targeted for the next patch release labels Feb 12, 2026

thePunderWoman added the action: merge The PR is ready for merge by the caretaker label Feb 12, 2026

thePunderWoman removed the request for review from JeanMeche February 12, 2026 19:22

mattrbeck merged commit 0806ee3 into angular:main Feb 13, 2026
42 of 45 checks passed

JeanMeche mentioned this pull request Feb 25, 2026

Items disappearing on drag-and-drop #67257

Closed

basrieter mentioned this pull request Mar 2, 2026

In some cases, the animate.leave animations leave a component in the DOM. #67400

Closed

Conversation

mattlewis92 commented Feb 11, 2026

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

Uh oh!

thePunderWoman left a comment

Choose a reason for hiding this comment

Uh oh!

thePunderWoman Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

mattlewis92 Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thePunderWoman Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

mattlewis92 Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

mattlewis92 commented Feb 12, 2026

Uh oh!

thePunderWoman left a comment

Choose a reason for hiding this comment

Uh oh!

thePunderWoman commented Feb 12, 2026

Uh oh!

mattlewis92 commented Feb 12, 2026

Uh oh!

thePunderWoman commented Feb 12, 2026

Uh oh!

thePunderWoman commented Feb 12, 2026

Uh oh!

mattlewis92 commented Feb 12, 2026

Uh oh!

Uh oh!

mattrbeck commented Feb 13, 2026

Uh oh!

basrieter commented Mar 1, 2026

Uh oh!

mattlewis92 commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

basrieter commented Mar 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mattlewis92 Feb 12, 2026 •

edited

Loading

mattlewis92 commented Mar 2, 2026 •

edited

Loading