@@ -24,14 +24,11 @@ export const ANIMATION_QUEUE = new InjectionToken<AnimationQueue>(
   typeof ngDevMode !== 'undefined' && ngDevMode ? 'AnimationQueue' : '',
   {
     factory: () => {
-      const injector = inject(EnvironmentInjector);
-      const queue = new Set<VoidFunction>();
-      injector.onDestroy(() => queue.clear());
       return {
-        queue,
+        queue: new Set(),
         isScheduled: false,
         scheduler: null,
-        injector,
+        injector: inject(EnvironmentInjector), // should be the root injector
       };
     },
   },
 
@@ -83,8 +83,10 @@ import {profiler} from './profiler';
 import {ProfilerEvent} from '../../primitives/devtools';
 import {getLViewParent, getNativeByTNode, unwrapRNode} from './util/view_utils';
 import {cancelLeavingNodes, reusedNodes, trackLeavingNodes} from '../animation/utils';
+import {allLeavingAnimations} from '../animation/longest_animation';
 import {Injector} from '../di';
-import {maybeQueueEnterAnimation, runLeaveAnimationsWithCallback} from './node_animations';
+import {addToAnimationQueue, queueEnterAnimations} from '../animation/queue';
+import {RunLeaveAnimationFn} from '../animation/interfaces';
 
 const enum WalkTNodeTreeAction {
   /** node create in the native environment. Run on initial creation. */
@@ -103,6 +105,18 @@ const enum WalkTNodeTreeAction {
   Destroy = 3,
 }
 
+function maybeQueueEnterAnimation(
+  parentLView: LView | undefined,
+  parent: RElement | null,
+  tNode: TNode,
+  injector: Injector,
+): void {
+  const enterAnimations = parentLView?.[ANIMATIONS]?.enter;
+  if (parent !== null && enterAnimations && enterAnimations.has(tNode.index)) {
+    queueEnterAnimations(injector, enterAnimations);
+  }
+}
+
 /**
  * NOTE: for performance reasons, the possible actions are inlined within the function instead of
  * being passed as an argument.
@@ -373,6 +387,61 @@ function cleanUpView(tView: TView, lView: LView): void {
   }
 }
 
+function runLeaveAnimationsWithCallback(
+  lView: LView | undefined,
+  tNode: TNode,
+  injector: Injector,
+  callback: Function,
+) {
+  const animations = lView?.[ANIMATIONS];
+
+  if (animations == null || animations.leave == undefined || !animations.leave.has(tNode.index))
+    return callback(false);
+
+  if (lView) allLeavingAnimations.add(lView[ID]);
+
+  addToAnimationQueue(
+    injector,
+    () => {
+      // it's possible that in the time between when the leave animation was
+      // and the time it was executed, the data structure changed. So we need
+      // to be safe here.
+      if (animations.leave && animations.leave.has(tNode.index)) {
+        const leaveAnimationMap = animations.leave;
+        const leaveAnimations = leaveAnimationMap.get(tNode.index);
+        const runningAnimations = [];
+        if (leaveAnimations) {
+          for (let index = 0; index < leaveAnimations.animateFns.length; index++) {
+            const animationFn = leaveAnimations.animateFns[index];
+            const {promise} = animationFn() as ReturnType<RunLeaveAnimationFn>;
+            runningAnimations.push(promise);
+          }
+          animations.detachedLeaveAnimationFns = undefined;
+        }
+        animations.running = Promise.allSettled(runningAnimations);
+        runAfterLeaveAnimations(lView!, callback);
+      } else {
+        if (lView) allLeavingAnimations.delete(lView[ID]);
+        callback(false);
+      }
+    },
+    animations,
+  );
+}
+
+function runAfterLeaveAnimations(lView: LView, callback: Function) {
+  const runningAnimations = lView[ANIMATIONS]?.running;
+  if (runningAnimations) {
+    runningAnimations.then(() => {
+      lView[ANIMATIONS]!.running = undefined;
+      allLeavingAnimations.delete(lView[ID]);
+      callback(true);
+    });
+    return;
+  }
+  callback(false);
+}
+
 /** Removes listeners and unsubscribes from output subscriptions */
 function processCleanups(tView: TView, lView: LView): void {
   ngDevMode && assertNotReactive(processCleanups.name);