fix(core): prevent element duplication with dynamic components

thePunderWoman · leonsenft · commit 70a5b651be29 · 2026-01-29T12:18:05.000-08:00
When dynamic components are rapidly added and removed with animate.leave and animate.enter, a leave animation might fire before the enter animation could, causing an element to be retained. This fix prevents that from occuring by clearing the enter animations in this case. fixes: #66794 (cherry picked from commit c66a19f)
diff --git a/packages/core/src/animation/queue.ts b/packages/core/src/animation/queue.ts
@@ -100,3 +100,17 @@ export function queueEnterAnimations(
     addToAnimationQueue(injector, nodeAnimations.animateFns);
   }
 }
+
+export function removeAnimationsFromQueue(
+  injector: Injector,
+  animationFns: VoidFunction | VoidFunction[],
+) {
+  const animationQueue = injector.get(ANIMATION_QUEUE);
+  if (Array.isArray(animationFns)) {
+    for (const animateFn of animationFns) {
+      animationQueue.queue.delete(animateFn);
+    }
+  } else {
+    animationQueue.queue.delete(animationFns);
+  }
+}
diff --git a/packages/core/src/render3/node_manipulation.ts b/packages/core/src/render3/node_manipulation.ts
@@ -84,7 +84,11 @@ import {ProfilerEvent} from '../../primitives/devtools';
 import {getLViewParent, getNativeByTNode, unwrapRNode} from './util/view_utils';
 import {allLeavingAnimations} from '../animation/longest_animation';
 import {Injector} from '../di';
-import {addToAnimationQueue, queueEnterAnimations} from '../animation/queue';
+import {
+  addToAnimationQueue,
+  queueEnterAnimations,
+  removeAnimationsFromQueue,
+} from '../animation/queue';
 import {RunLeaveAnimationFn} from '../animation/interfaces';
 
 const enum WalkTNodeTreeAction {
@@ -385,6 +389,10 @@ function runLeaveAnimationsWithCallback(
   callback: Function,
 ) {
   const animations = lView?.[ANIMATIONS];
+  if (animations?.enter?.has(tNode.index)) {
+    removeAnimationsFromQueue(injector, animations.enter.get(tNode.index)!.animateFns);
+  }
+
   if (animations == null || animations.leave == undefined || !animations.leave.has(tNode.index))
     return callback(false);
 
diff --git a/packages/core/test/acceptance/animation_spec.ts b/packages/core/test/acceptance/animation_spec.ts
@@ -22,6 +22,7 @@ import {
   OnDestroy,
   provideZonelessChangeDetection,
   signal,
+  TemplateRef,
   ViewChild,
   ViewContainerRef,
 } from '@angular/core';
@@ -2299,4 +2300,100 @@ describe('Animation', () => {
       expect(fixture.debugElement.query(By.css('p.not-here'))).toBeNull();
     }));
   });
+
+  describe('animation element duplication', () => {
+    it('should not duplicate elements when using dynamic components', async () => {
+      const animateStyles = `
+        .example-menu {
+          display: inline-flex;
+          flex-direction: column;
+          min-width: 180px;
+          max-width: 280px;
+          padding: 6px 0;
+        }
+        .open {
+          animation: open 10ms;
+        }
+        .close {
+          animation: open 10ms reverse;
+        }
+        @keyframes open {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+      `;
+
+      @Component({
+        selector: 'dynamic-menu',
+        styles: [animateStyles],
+        template: `
+          <ng-template #menu>
+            <div class="example-menu" animate.enter="open" animate.leave="close">
+              <div>Menu</div>
+            </div>
+          </ng-template>
+        `,
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        encapsulation: ViewEncapsulation.None,
+      })
+      class MenuComponent {
+        @ViewChild('menu') menuTpl!: TemplateRef<unknown>;
+        vcr = inject(ViewContainerRef);
+        opened = false;
+
+        toggle() {
+          if (this.opened) {
+            this.close();
+          } else {
+            this.open();
+          }
+        }
+
+        open() {
+          this.opened = true;
+          this.vcr.createEmbeddedView(this.menuTpl);
+        }
+
+        close() {
+          this.opened = false;
+          this.vcr.clear();
+        }
+      }
+
+      @Component({
+        selector: 'test-cmp',
+        imports: [MenuComponent],
+        template: ` <dynamic-menu /> `,
+        encapsulation: ViewEncapsulation.None,
+      })
+      class TestComponent {}
+
+      TestBed.configureTestingModule({animationsEnabled: true});
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+
+      const cmp = fixture.debugElement.query(By.css('dynamic-menu')).componentInstance;
+
+      const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+      // Toggle the menu quickly multiple times
+      for (let i = 0; i < 20; i++) {
+        cmp.toggle();
+        // Wait 1ms to allow some logic to run but less than animation duration
+        await delay(1);
+        fixture.detectChanges();
+      }
+
+      // Finish remaining animations (wait 100ms real time which is > 10ms animation)
+      await delay(200);
+      fixture.detectChanges();
+
+      const menus = fixture.debugElement.nativeElement.querySelectorAll('.example-menu');
+      expect(menus.length).toBe(0);
+    });
+  });
 });
diff --git a/packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json b/packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json
@@ -756,6 +756,7 @@
       "relativePath",
       "rememberChangeHistoryAndInvokeOnChangesHook",
       "remove",
+      "removeAnimationsFromQueue",
       "removeClass",
       "removeElements",
       "removeFromArray",
diff --git a/packages/core/test/bundling/create_component/bundle.golden_symbols.json b/packages/core/test/bundling/create_component/bundle.golden_symbols.json
@@ -604,6 +604,7 @@
       "relativePath",
       "rememberChangeHistoryAndInvokeOnChangesHook",
       "remove",
+      "removeAnimationsFromQueue",
       "removeElements",
       "removeFromArray",
       "removeLViewOnDestroy",
diff --git a/packages/core/test/bundling/defer/bundle.golden_symbols.json b/packages/core/test/bundling/defer/bundle.golden_symbols.json
@@ -656,6 +656,7 @@
       "registerPreOrderHooks",
       "rememberChangeHistoryAndInvokeOnChangesHook",
       "remove",
+      "removeAnimationsFromQueue",
       "removeFromArray",
       "removeLViewFromLContainer",
       "removeLViewOnDestroy",
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
@@ -875,6 +875,7 @@
       "relativePath",
       "rememberChangeHistoryAndInvokeOnChangesHook",
       "remove",
+      "removeAnimationsFromQueue",
       "removeElements",
       "removeFromArray",
       "removeLViewOnDestroy",
diff --git a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json b/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json
@@ -873,6 +873,7 @@
       "relativePath",
       "rememberChangeHistoryAndInvokeOnChangesHook",
       "remove",
+      "removeAnimationsFromQueue",
       "removeElements",
       "removeFromArray",
       "removeLViewOnDestroy",
diff --git a/packages/core/test/bundling/hydration/bundle.golden_symbols.json b/packages/core/test/bundling/hydration/bundle.golden_symbols.json
@@ -697,6 +697,7 @@
       "relativePath",
       "rememberChangeHistoryAndInvokeOnChangesHook",
       "remove",
+      "removeAnimationsFromQueue",
       "removeDehydratedView",
       "removeDehydratedViews",
       "removeElements",
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -994,6 +994,7 @@
       "relativePath",
       "rememberChangeHistoryAndInvokeOnChangesHook",
       "remove",
+      "removeAnimationsFromQueue",
       "removeElements",
       "removeFromArray",
       "removeLViewOnDestroy",
diff --git a/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json b/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json
@@ -552,6 +552,7 @@
       "relativePath",
       "rememberChangeHistoryAndInvokeOnChangesHook",
       "remove",
+      "removeAnimationsFromQueue",
       "removeElements",
       "removeFromArray",
       "removeLViewOnDestroy",
