@angular/core 20.3.3 → 20.3.4

package/api.d.d.ts

@@ -1,6 +1,6 @@
 /**
- * @license Angular v20.3.3
- * (c) 2010-2025 Google LLC. https://angular.io/
+ * @license Angular v20.3.4
+ * (c) 2010-2025 Google LLC. https://angular.dev/
  * License: MIT
  */
 

package/chrome_dev_tools_performance.d.d.ts

@@ -1,6 +1,6 @@
 /**
- * @license Angular v20.3.3
- * (c) 2010-2025 Google LLC. https://angular.io/
+ * @license Angular v20.3.4
+ * (c) 2010-2025 Google LLC. https://angular.dev/
  * License: MIT
  */
 

package/discovery.d.d.ts

@@ -1,6 +1,6 @@
 /**
- * @license Angular v20.3.3
- * (c) 2010-2025 Google LLC. https://angular.io/
+ * @license Angular v20.3.4
+ * (c) 2010-2025 Google LLC. https://angular.dev/
  * License: MIT
  */
 
@@ -67,9 +67,13 @@ declare const MAX_ANIMATION_TIMEOUT: InjectionToken<number>;
  * @publicApi 20.2
  */
 type AnimationFunction = (event: AnimationCallbackEvent) => void;
+interface NodeAnimations {
+    animateFns: Function[];
+    resolvers?: VoidFunction[];
+}
 interface AnimationLViewData {
-    enter?: Function[];
-    leave?: (() => Promise<void>)[];
+    enter?: Map<number, NodeAnimations>;
+    leave?: Map<number, NodeAnimations>;
     running?: Promise<unknown>;
     skipLeaveAnimations?: boolean;
 }
@@ -5441,6 +5445,9 @@ interface HostBindingDecorator {
      *
      * @usageNotes
      *
+     * NOTE:  **Always** prefer using the `host` property over `@HostBinding`.
+     * This decorator exist exclusively for backwards compatibility.
+     *
      * The following example creates a directive that sets the `valid` and `invalid`
      * class, a style color, and an id on the DOM element that has an `ngModel` directive on it.
      *

package/effect.d.d.ts

@@ -1,6 +1,6 @@
 /**
- * @license Angular v20.3.3
- * (c) 2010-2025 Google LLC. https://angular.io/
+ * @license Angular v20.3.4
+ * (c) 2010-2025 Google LLC. https://angular.dev/
  * License: MIT
  */
 

package/event_dispatcher.d.d.ts

@@ -1,6 +1,6 @@
 /**
- * @license Angular v20.3.3
- * (c) 2010-2025 Google LLC. https://angular.io/
+ * @license Angular v20.3.4
+ * (c) 2010-2025 Google LLC. https://angular.dev/
  * License: MIT
  */
 

package/fesm2022/attribute.mjs

@@ -1,6 +1,6 @@
 /**
- * @license Angular v20.3.3
- * (c) 2010-2025 Google LLC. https://angular.io/
+ * @license Angular v20.3.4
+ * (c) 2010-2025 Google LLC. https://angular.dev/
  * License: MIT
  */
 

package/fesm2022/core.mjs

@@ -1,6 +1,6 @@
 /**
- * @license Angular v20.3.3
- * (c) 2010-2025 Google LLC. https://angular.io/
+ * @license Angular v20.3.4
+ * (c) 2010-2025 Google LLC. https://angular.dev/
  * License: MIT
  */
 

package/fesm2022/debug_node.mjs

@@ -1,10 +1,10 @@
 /**
- * @license Angular v20.3.3
- * (c) 2010-2025 Google LLC. https://angular.io/
+ * @license Angular v20.3.4
+ * (c) 2010-2025 Google LLC. https://angular.dev/
  * License: MIT
  */
 
-import { attachInjectFlag, _global, ɵɵdefineInjectable as __defineInjectable, ɵɵdefineInjector as __defineInjector, ɵɵinject as __inject, ɵɵinvalidFactoryDep as __invalidFactoryDep, resolveForwardRef, newArray, EMPTY_OBJ, assertString, assertNotEqual, FLAGS, assertEqual, isInCheckNoChangesMode, PREORDER_HOOK_FLAGS, assertFirstCreatePass, assertDefined, throwError, assertNumber, assertGreaterThan, HEADER_OFFSET, DECLARATION_VIEW, NG_FACTORY_DEF, isForwardRef, getFactoryDef, assertIndexInRange, assertTNodeForLView, enterDI, runInInjectorProfilerContext, getCurrentTNode, getLView, emitInjectorToCreateInstanceEvent, emitInstanceCreatedByInjectorEvent, throwProviderNotFoundError, leaveDI, assertNodeInjector, stringifyForError, cyclicDependencyErrorWithDetails, cyclicDependencyError, setInjectorProfilerContext, setInjectImplementation, assertDirectiveDef, NG_ELEMENT_ID, convertToBitFlags, isRootView, T_HOST, TVIEW, injectRootLimpMode, isComponentDef, EMBEDDED_VIEW_INJECTOR, INJECTOR$1 as INJECTOR, DECLARATION_COMPONENT_VIEW, isComponentHost, RuntimeError, NG_PROV_DEF, getClosureSafeProperty, getNativeByTNode, flatten, arrayEquals, ID, isLView, assertDomNode, unwrapRNode, getComponentLViewByIndex, CONTEXT, EMPTY_ARRAY, assertLView, HOST, CHILD_HEAD, NEXT, isLContainer, getLViewParent, Injector, CLEANUP, getComponentDef, getDirectiveDef, InjectionToken, inject, isInSkipHydrationBlock as isInSkipHydrationBlock$1, HYDRATION, isContentQueryHost, setCurrentQueryIndex, XSS_SECURITY_URL, renderStringify, ENVIRONMENT, makeEnvironmentProviders, isDirectiveHost, formatRuntimeError, resetPreOrderHookFlags, PARENT, RENDERER, CHILD_TAIL, assertSame, assertFirstUpdatePass, getSelectedIndex, getTView, assertIndexInDeclRange, setSelectedIndex, assertLContainer, MOVED_VIEWS, isDestroyed, REACTIVE_TEMPLATE_CONSUMER, DECLARATION_LCONTAINER, QUERIES, assertNotReactive, ON_DESTROY_HOOKS, assertFunction, EFFECTS, assertProjectionSlots, NATIVE, ANIMATIONS, assertParentView, CONTAINER_HEADER_OFFSET, assertNotSame, setCurrentDirectiveIndex, setCurrentTNode, getElementDepthCount, increaseElementDepthCount, wasLastNodeCreated, isCurrentTNodeParent, setCurrentTNodeAsNotParent, assertHasParent, INTERNAL_APPLICATION_ERROR_HANDLER, stringify, getCurrentDirectiveIndex, unwrapLView, isCreationMode, enterView, leaveView, AFTER_RENDER_SEQUENCES_TO_ADD, markAncestorsForTraversal, markViewForRefresh, setIsRefreshingViews, isExhaustiveCheckNoChanges, requiresRefreshOrTraversal, setIsInCheckNoChangesMode, CheckNoChangesMode, setBindingIndex, EFFECTS_TO_SCHEDULE, viewAttachedToChangeDetector, setBindingRootForHostBindings, isRefreshingViews, removeFromArray, addToArray, updateAncestorTraversalFlagsOnAttach, storeLViewOnDestroy, VIEW_REFS, assertGreaterThanOrEqual, isInI18nBlock, assertTNodeForTView, getCurrentParentTNode, getCurrentTNodePlaceholderOk, assertTNode, assertTIcu, assertNumberInRange, DEHYDRATED_VIEWS, getNgModuleDef, getPipeDef as getPipeDef$1, getNgModuleDefOrThrow, isStandalone, concatStringsWithSpace, assertInjectImplementationNotEqual, emitInjectEvent, getConstant, assertLessThan, getOrCreateTViewCleanup, getOrCreateLViewCleanup, assertNotDefined, nextBindingIndex, getSelectedTNode, getDirectiveDefOrThrow, getTNode, assertComponentType, debugStringifyTypeForError, ChangeDetectionScheduler, EnvironmentInjector, SVG_NAMESPACE, MATH_ML_NAMESPACE, viewAttachedToContainer, storeCleanupWithContext, signal, createInjectorWithoutInjectorInstances, R3Injector, getNullInjector, internalImportProvidersFrom, initNgDevMode, fillProperties, getBindingsEnabled, lastNodeWasCreated, isInInjectionContext, DestroyRef, PendingTasksInternal, noop, ErrorHandler, assertNotInReactiveContext, assertInInjectionContext, ViewContext, removeLViewOnDestroy, walkUpViews, getNativeByIndex, assertElement, arrayInsert2, arraySplice, setInjectorProfiler, NullInjector, ENVIRONMENT_INITIALIZER, INJECTOR_DEF_TYPES, walkProviderTree, getInjectorDef, deepForEach, isTypeProvider, isSignal, runInInjectionContext, ZONELESS_ENABLED, EffectScheduler, PendingTasks, assertTNodeCreationIndex, isSkipHydrationRootTNode, leaveSkipHydrationBlock, decreaseElementDepthCount, getNamespace, enterSkipHydrationBlock, getCurrentDirectiveDef, assertIndexInExpandoRange, getBindingIndex, assertOneOf, setInI18nBlock, nextContextImpl, getCurrentQueryIndex, getContextLView, load, keyValueArrayIndexOf, keyValueArraySet, keyValueArrayGet, incrementBindingIndex, isWritableSignal, store, providerToFactory, emitProviderConfiguredEvent, isClassProvider, getBindingRoot, NG_COMP_DEF, ɵɵresetView as __resetView, ɵɵnamespaceHTML as __namespaceHTML, ɵɵnamespaceMathML as __namespaceMathML, ɵɵnamespaceSVG as __namespaceSVG, ɵɵenableBindings as __enableBindings, ɵɵdisableBindings as __disableBindings, ɵɵrestoreView as __restoreView, forwardRef, NG_MOD_DEF, NG_INJ_DEF, NG_DIR_DEF, NG_PIPE_DEF, ZONELESS_SCHEDULER_DISABLED, SCHEDULE_IN_ROOT_ZONE, PROVIDED_ZONELESS, getNativeByTNodeOrNull } from './root_effect_scheduler.mjs';
+import { attachInjectFlag, _global, ɵɵdefineInjectable as __defineInjectable, ɵɵdefineInjector as __defineInjector, ɵɵinject as __inject, ɵɵinvalidFactoryDep as __invalidFactoryDep, resolveForwardRef, newArray, EMPTY_OBJ, assertString, assertNotEqual, FLAGS, assertEqual, isInCheckNoChangesMode, PREORDER_HOOK_FLAGS, assertFirstCreatePass, assertDefined, throwError, assertNumber, assertGreaterThan, HEADER_OFFSET, DECLARATION_VIEW, NG_FACTORY_DEF, isForwardRef, getFactoryDef, assertIndexInRange, assertTNodeForLView, enterDI, runInInjectorProfilerContext, getCurrentTNode, getLView, emitInjectorToCreateInstanceEvent, emitInstanceCreatedByInjectorEvent, throwProviderNotFoundError, leaveDI, assertNodeInjector, stringifyForError, cyclicDependencyErrorWithDetails, cyclicDependencyError, setInjectorProfilerContext, setInjectImplementation, assertDirectiveDef, NG_ELEMENT_ID, convertToBitFlags, isRootView, T_HOST, TVIEW, injectRootLimpMode, isComponentDef, EMBEDDED_VIEW_INJECTOR, INJECTOR$1 as INJECTOR, DECLARATION_COMPONENT_VIEW, isComponentHost, RuntimeError, NG_PROV_DEF, getClosureSafeProperty, getNativeByTNode, flatten, arrayEquals, ID, isLView, assertDomNode, unwrapRNode, getComponentLViewByIndex, CONTEXT, EMPTY_ARRAY, assertLView, HOST, CHILD_HEAD, NEXT, isLContainer, getLViewParent, Injector, CLEANUP, getComponentDef, getDirectiveDef, InjectionToken, inject, isInSkipHydrationBlock as isInSkipHydrationBlock$1, HYDRATION, isContentQueryHost, setCurrentQueryIndex, XSS_SECURITY_URL, renderStringify, ENVIRONMENT, makeEnvironmentProviders, isDirectiveHost, formatRuntimeError, resetPreOrderHookFlags, PARENT, RENDERER, CHILD_TAIL, assertSame, assertFirstUpdatePass, getSelectedIndex, getTView, assertIndexInDeclRange, setSelectedIndex, assertLContainer, MOVED_VIEWS, isDestroyed, REACTIVE_TEMPLATE_CONSUMER, DECLARATION_LCONTAINER, QUERIES, assertNotReactive, ON_DESTROY_HOOKS, assertFunction, EFFECTS, assertProjectionSlots, NATIVE, assertParentView, CONTAINER_HEADER_OFFSET, ANIMATIONS, assertNotSame, setCurrentDirectiveIndex, setCurrentTNode, getElementDepthCount, increaseElementDepthCount, wasLastNodeCreated, isCurrentTNodeParent, setCurrentTNodeAsNotParent, assertHasParent, INTERNAL_APPLICATION_ERROR_HANDLER, stringify, getCurrentDirectiveIndex, unwrapLView, isCreationMode, enterView, leaveView, AFTER_RENDER_SEQUENCES_TO_ADD, markAncestorsForTraversal, markViewForRefresh, setIsRefreshingViews, isExhaustiveCheckNoChanges, requiresRefreshOrTraversal, setIsInCheckNoChangesMode, CheckNoChangesMode, setBindingIndex, EFFECTS_TO_SCHEDULE, viewAttachedToChangeDetector, setBindingRootForHostBindings, isRefreshingViews, removeFromArray, addToArray, updateAncestorTraversalFlagsOnAttach, storeLViewOnDestroy, VIEW_REFS, assertGreaterThanOrEqual, isInI18nBlock, assertTNodeForTView, getCurrentParentTNode, getCurrentTNodePlaceholderOk, assertTNode, assertTIcu, assertNumberInRange, DEHYDRATED_VIEWS, getNgModuleDef, getPipeDef as getPipeDef$1, getNgModuleDefOrThrow, isStandalone, concatStringsWithSpace, assertInjectImplementationNotEqual, emitInjectEvent, getConstant, assertLessThan, getOrCreateTViewCleanup, getOrCreateLViewCleanup, assertNotDefined, nextBindingIndex, getSelectedTNode, getDirectiveDefOrThrow, getTNode, assertComponentType, debugStringifyTypeForError, ChangeDetectionScheduler, EnvironmentInjector, SVG_NAMESPACE, MATH_ML_NAMESPACE, viewAttachedToContainer, storeCleanupWithContext, signal, createInjectorWithoutInjectorInstances, R3Injector, getNullInjector, internalImportProvidersFrom, initNgDevMode, fillProperties, getBindingsEnabled, lastNodeWasCreated, isInInjectionContext, DestroyRef, PendingTasksInternal, noop, ErrorHandler, assertNotInReactiveContext, assertInInjectionContext, ViewContext, removeLViewOnDestroy, walkUpViews, getNativeByIndex, assertElement, arrayInsert2, arraySplice, setInjectorProfiler, NullInjector, ENVIRONMENT_INITIALIZER, INJECTOR_DEF_TYPES, walkProviderTree, getInjectorDef, deepForEach, isTypeProvider, isSignal, runInInjectionContext, ZONELESS_ENABLED, EffectScheduler, PendingTasks, assertTNodeCreationIndex, isSkipHydrationRootTNode, leaveSkipHydrationBlock, decreaseElementDepthCount, getNamespace, enterSkipHydrationBlock, getCurrentDirectiveDef, assertIndexInExpandoRange, getBindingIndex, assertOneOf, setInI18nBlock, nextContextImpl, getCurrentQueryIndex, getContextLView, load, keyValueArrayIndexOf, keyValueArraySet, keyValueArrayGet, incrementBindingIndex, isWritableSignal, store, providerToFactory, emitProviderConfiguredEvent, isClassProvider, getBindingRoot, NG_COMP_DEF, ɵɵresetView as __resetView, ɵɵnamespaceHTML as __namespaceHTML, ɵɵnamespaceMathML as __namespaceMathML, ɵɵnamespaceSVG as __namespaceSVG, ɵɵenableBindings as __enableBindings, ɵɵdisableBindings as __disableBindings, ɵɵrestoreView as __restoreView, forwardRef, NG_MOD_DEF, NG_INJ_DEF, NG_DIR_DEF, NG_PIPE_DEF, ZONELESS_SCHEDULER_DISABLED, SCHEDULE_IN_ROOT_ZONE, PROVIDED_ZONELESS, getNativeByTNodeOrNull } from './root_effect_scheduler.mjs';
 import { setActiveConsumer, SIGNAL, consumerDestroy, REACTIVE_NODE, consumerPollProducersForChange, consumerBeforeComputation, getActiveConsumer, consumerAfterComputation, createComputed, setThrowInvalidWriteToSignalError } from './signal.mjs';
 import { Subject, Subscription } from 'rxjs';
 import { setActiveConsumer as setActiveConsumer$1 } from '@angular/core/primitives/signals';
@@ -7213,6 +7213,8 @@ function ensureIcuContainerVisitorLoaded(loader) {
 
 /** Parses a CSS time value to milliseconds. */
 function parseCssTimeUnitsToMs(value) {
+    if (!value)
+        return 0;
     // Some browsers will return it in seconds, whereas others will return milliseconds.
     const multiplier = value.toLowerCase().indexOf('ms') > -1 ? 1 : 1000;
     return parseFloat(value) * multiplier;
@@ -7323,11 +7325,54 @@ function determineLongestAnimationFromElementAnimations(el, animationsMap, anima
 }
 const allLeavingAnimations = new Set();
 
+/**
+ * A [DI token](api/core/InjectionToken) that enables or disables all enter and leave animations.
+ */
+const ANIMATIONS_DISABLED = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'AnimationsDisabled' : '', {
+    providedIn: 'root',
+    factory: () => false,
+});
+/**
+ * A [DI token](api/core/InjectionToken) for the queue of all animations.
+ */
+const ANIMATION_QUEUE = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'AnimationQueue' : '', {
+    providedIn: 'root',
+    factory: () => {
+        return {
+            queue: new Set(),
+            isScheduled: false,
+        };
+    },
+});
+/**
+ * A [DI token](api/core/InjectionToken) that configures the maximum animation timeout
+ * before element removal. The default value mirrors from Chrome's cross document
+ * navigation view transition timeout. It's intended to prevent people from accidentally
+ * forgetting to call the removal function in their callback. Also serves as a delay
+ * for when stylesheets are pruned.
+ *
+ * @publicApi 20.2
+ */
+const MAX_ANIMATION_TIMEOUT = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'MaxAnimationTimeout' : '', {
+    providedIn: 'root',
+    factory: () => MAX_ANIMATION_TIMEOUT_DEFAULT,
+});
+const MAX_ANIMATION_TIMEOUT_DEFAULT = 4000;
+
+function maybeQueueEnterAnimation(parentLView, parent, tNode, injector) {
+    const enterAnimations = parentLView?.[ANIMATIONS]?.enter;
+    if (parent !== null && enterAnimations && enterAnimations.has(tNode.index)) {
+        const animationQueue = injector.get(ANIMATION_QUEUE);
+        for (const animateFn of enterAnimations.get(tNode.index).animateFns) {
+            animationQueue.queue.add(animateFn);
+        }
+    }
+}
 /**
  * NOTE: for performance reasons, the possible actions are inlined within the function instead of
  * being passed as an argument.
  */
-function applyToElementOrContainer(action, renderer, parent, lNodeToHandle, beforeNode, parentLView) {
+function applyToElementOrContainer(action, renderer, injector, parent, lNodeToHandle, tNode, beforeNode, parentLView) {
     // If this slot was allocated for a text node dynamically created by i18n, the text node itself
     // won't be created until i18nApply() in the update block, so this node should be skipped.
     // For more info, see "ICU expressions should work inside an ngTemplateOutlet inside an ngFor"
@@ -7348,6 +7393,7 @@ function applyToElementOrContainer(action, renderer, parent, lNodeToHandle, befo
         }
         const rNode = unwrapRNode(lNodeToHandle);
         if (action === 0 /* WalkTNodeTreeAction.Create */ && parent !== null) {
+            maybeQueueEnterAnimation(parentLView, parent, tNode, injector);
             if (beforeNode == null) {
                 nativeAppendChild(renderer, parent, rNode);
             }
@@ -7356,10 +7402,11 @@ function applyToElementOrContainer(action, renderer, parent, lNodeToHandle, befo
             }
         }
         else if (action === 1 /* WalkTNodeTreeAction.Insert */ && parent !== null) {
+            maybeQueueEnterAnimation(parentLView, parent, tNode, injector);
             nativeInsertBefore(renderer, parent, rNode, beforeNode || null, true);
         }
         else if (action === 2 /* WalkTNodeTreeAction.Detach */) {
-            runLeaveAnimationsWithCallback(parentLView, (nodeHasLeaveAnimations) => {
+            runLeaveAnimationsWithCallback(parentLView, tNode, injector, (nodeHasLeaveAnimations) => {
                 // the nodeHasLeaveAnimations indicates to the renderer that the element needs to
                 // be removed synchronously and sets the requireSynchronousElementRemoval flag in
                 // the renderer.
@@ -7367,14 +7414,25 @@ function applyToElementOrContainer(action, renderer, parent, lNodeToHandle, befo
             });
         }
         else if (action === 3 /* WalkTNodeTreeAction.Destroy */) {
-            runLeaveAnimationsWithCallback(parentLView, () => {
+            runLeaveAnimationsWithCallback(parentLView, tNode, injector, () => {
                 renderer.destroyNode(rNode);
             });
         }
         if (lContainer != null) {
-            applyContainer(renderer, action, lContainer, parent, beforeNode);
+            applyContainer(renderer, action, injector, lContainer, tNode, parent, beforeNode);
+        }
+    }
+}
+function addToAnimationQueue(injector, animationFns) {
+    const animationQueue = injector.get(ANIMATION_QUEUE);
+    if (Array.isArray(animationFns)) {
+        for (const animateFn of animationFns) {
+            animationQueue.queue.add(animateFn);
         }
     }
+    else {
+        animationQueue.queue.add(animationFns);
+    }
 }
 /**
  * Removes all DOM elements associated with a view.
@@ -7549,30 +7607,46 @@ function cleanUpView(tView, lView) {
         setActiveConsumer(prevConsumer);
     }
 }
-function runLeaveAnimationsWithCallback(lView, callback) {
-    if (lView && lView[ANIMATIONS] && lView[ANIMATIONS].leave) {
-        if (lView[ANIMATIONS].skipLeaveAnimations) {
-            lView[ANIMATIONS].skipLeaveAnimations = false;
-        }
-        else {
-            const leaveAnimations = lView[ANIMATIONS].leave;
+function runLeaveAnimationsWithCallback(lView, tNode, injector, callback) {
+    const animations = lView?.[ANIMATIONS];
+    if (animations == null || animations.leave == undefined || !animations.leave.has(tNode.index))
+        return callback(false);
+    // this is solely for move operations to prevent leave animations from running
+    // on the moved nodes, which would have deleted the node.
+    if (animations.skipLeaveAnimations) {
+        animations.skipLeaveAnimations = false;
+        return callback(false);
+    }
+    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 = [];
-            for (let index = 0; index < leaveAnimations.length; index++) {
-                const animateFn = leaveAnimations[index];
-                runningAnimations.push(animateFn());
+            if (leaveAnimations) {
+                for (let index = 0; index < leaveAnimations.animateFns.length; index++) {
+                    const animationFn = leaveAnimations.animateFns[index];
+                    const { promise } = animationFn();
+                    runningAnimations.push(promise);
+                }
             }
-            lView[ANIMATIONS].running = Promise.allSettled(runningAnimations);
-            lView[ANIMATIONS].leave = undefined;
+            animations.running = Promise.allSettled(runningAnimations);
+            runAfterLeaveAnimations(lView, callback);
         }
-    }
-    runAfterLeaveAnimations(lView, callback);
+        else {
+            if (lView)
+                allLeavingAnimations.delete(lView);
+            callback(false);
+        }
+    });
 }
 function runAfterLeaveAnimations(lView, callback) {
-    if (lView && lView[ANIMATIONS] && lView[ANIMATIONS].running) {
-        lView[ANIMATIONS].running.then(() => {
-            if (lView[ANIMATIONS] && lView[ANIMATIONS].running) {
-                lView[ANIMATIONS].running = undefined;
-            }
+    const runningAnimations = lView[ANIMATIONS]?.running;
+    if (runningAnimations) {
+        runningAnimations.then(() => {
+            lView[ANIMATIONS].running = undefined;
             allLeavingAnimations.delete(lView);
             callback(true);
         });
@@ -7899,6 +7973,7 @@ function getBeforeNodeForView(viewIndexInContainer, lContainer) {
 function applyNodes(renderer, action, tNode, lView, parentRElement, beforeNode, isProjection) {
     while (tNode != null) {
         ngDevMode && assertTNodeForLView(tNode, lView);
+        const injector = lView[INJECTOR];
         // Let declarations don't have corresponding DOM nodes so we skip over them.
         if (tNode.type === 128 /* TNodeType.LetDeclaration */) {
             tNode = tNode.next;
@@ -7917,22 +7992,22 @@ function applyNodes(renderer, action, tNode, lView, parentRElement, beforeNode,
         if (!isDetachedByI18n(tNode)) {
             if (tNodeType & 8 /* TNodeType.ElementContainer */) {
                 applyNodes(renderer, action, tNode.child, lView, parentRElement, beforeNode, false);
-                applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode, lView);
+                applyToElementOrContainer(action, renderer, injector, parentRElement, rawSlotValue, tNode, beforeNode, lView);
             }
             else if (tNodeType & 32 /* TNodeType.Icu */) {
                 const nextRNode = icuContainerIterate(tNode, lView);
                 let rNode;
                 while ((rNode = nextRNode())) {
-                    applyToElementOrContainer(action, renderer, parentRElement, rNode, beforeNode, lView);
+                    applyToElementOrContainer(action, renderer, injector, parentRElement, rNode, tNode, beforeNode, lView);
                 }
-                applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode, lView);
+                applyToElementOrContainer(action, renderer, injector, parentRElement, rawSlotValue, tNode, beforeNode, lView);
             }
             else if (tNodeType & 16 /* TNodeType.Projection */) {
                 applyProjectionRecursive(renderer, action, lView, tNode, parentRElement, beforeNode);
             }
             else {
                 ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ | 4 /* TNodeType.Container */);
-                applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode, lView);
+                applyToElementOrContainer(action, renderer, injector, parentRElement, rawSlotValue, tNode, beforeNode, lView);
             }
         }
         tNode = isProjection ? tNode.projectionNext : tNode.next;
@@ -7986,7 +8061,7 @@ function applyProjectionRecursive(renderer, action, lView, tProjectionNode, pare
         // This should be refactored and cleaned up.
         for (let i = 0; i < nodeToProjectOrRNodes.length; i++) {
             const rNode = nodeToProjectOrRNodes[i];
-            applyToElementOrContainer(action, renderer, parentRElement, rNode, beforeNode, lView);
+            applyToElementOrContainer(action, renderer, lView[INJECTOR], parentRElement, rNode, tProjectionNode, beforeNode, lView);
         }
     }
     else {
@@ -8013,7 +8088,7 @@ function applyProjectionRecursive(renderer, action, lView, tProjectionNode, pare
  * @param parentRElement parent DOM element for insertion/removal.
  * @param beforeNode Before which node the insertions should happen.
  */
-function applyContainer(renderer, action, lContainer, parentRElement, beforeNode) {
+function applyContainer(renderer, action, injector, lContainer, tNode, parentRElement, beforeNode) {
     ngDevMode && assertLContainer(lContainer);
     const anchor = lContainer[NATIVE]; // LContainer has its own before node.
     const native = unwrapRNode(lContainer);
@@ -8028,7 +8103,7 @@ function applyContainer(renderer, action, lContainer, parentRElement, beforeNode
         // don't see a reason why they should be different, but they are.
         //
         // If they are we need to process the second anchor as well.
-        applyToElementOrContainer(action, renderer, parentRElement, anchor, beforeNode);
+        applyToElementOrContainer(action, renderer, injector, parentRElement, anchor, tNode, beforeNode);
     }
     for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
         const lView = lContainer[i];
@@ -9126,7 +9201,6 @@ function refreshView(tView, lView, templateFn, context) {
         if (templateFn !== null) {
             executeTemplate(tView, lView, templateFn, 2 /* RenderFlags.Update */, context);
         }
-        runEnterAnimations(lView);
         const hooksInitPhaseCompleted = (flags & 3 /* LViewFlags.InitPhaseStateMask */) === 3 /* InitPhaseState.InitPhaseCompleted */;
         // execute pre-order hooks (OnInit, OnChanges, DoCheck)
         // PERF WARNING: do NOT extract this to a separate function without running benchmarks
@@ -9254,15 +9328,6 @@ function refreshView(tView, lView, templateFn, context) {
         leaveView();
     }
 }
-function runEnterAnimations(lView) {
-    const animationData = lView[ANIMATIONS];
-    if (animationData?.enter) {
-        for (const animateFn of animationData.enter) {
-            animateFn();
-        }
-        animationData.enter = undefined;
-    }
-}
 /**
  * Goes over embedded views (ones created through ViewContainerRef APIs) and refreshes
  * them by executing an associated template function.
@@ -13691,7 +13756,7 @@ class ComponentFactory extends ComponentFactory$1 {
 }
 function createRootTView(rootSelectorOrNode, componentDef, componentBindings, directives) {
     const tAttributes = rootSelectorOrNode
-        ? ['ng-version', '20.3.3']
+        ? ['ng-version', '20.3.4']
         : // Extract attributes and classes from the first selector only to match VE behavior.
             extractAttrsAndClassesFromSelector(componentDef.selectors[0]);
     let creationBindings = null;
@@ -21888,28 +21953,6 @@ function ɵɵattribute(name, value, sanitizer, namespace) {
     return ɵɵattribute;
 }
 
-/**
- * A [DI token](api/core/InjectionToken) that enables or disables all enter and leave animations.
- */
-const ANIMATIONS_DISABLED = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'AnimationsDisabled' : '', {
-    providedIn: 'root',
-    factory: () => false,
-});
-/**
- * A [DI token](api/core/InjectionToken) that configures the maximum animation timeout
- * before element removal. The default value mirrors from Chrome's cross document
- * navigation view transition timeout. It's intended to prevent people from accidentally
- * forgetting to call the removal function in their callback. Also serves as a delay
- * for when stylesheets are pruned.
- *
- * @publicApi 20.2
- */
-const MAX_ANIMATION_TIMEOUT = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'MaxAnimationTimeout' : '', {
-    providedIn: 'root',
-    factory: () => MAX_ANIMATION_TIMEOUT_DEFAULT,
-});
-const MAX_ANIMATION_TIMEOUT_DEFAULT = 4000;
-
 const DEFAULT_ANIMATIONS_DISABLED = false;
 const areAnimationSupported = (typeof ngServerMode === 'undefined' || !ngServerMode) &&
     typeof document !== 'undefined' &&
@@ -22039,14 +22082,14 @@ function trackLeavingNodes(tNode, el) {
  */
 function getLViewEnterAnimations(lView) {
     const animationData = (lView[ANIMATIONS] ??= {});
-    return (animationData.enter ??= []);
+    return (animationData.enter ??= new Map());
 }
 /**
  * Retrieves the list of specified leave animations from the lView
  */
 function getLViewLeaveAnimations(lView) {
     const animationData = (lView[ANIMATIONS] ??= {});
-    return (animationData.leave ??= []);
+    return (animationData.leave ??= new Map());
 }
 /**
  * Gets the list of classes from a passed in value
@@ -22100,13 +22143,43 @@ function elementHasClassList(element, classList) {
  */
 function isLongestAnimation(event, nativeElement) {
     const longestAnimation = longestAnimations.get(nativeElement);
+    // If we don't have any record of a longest animation, then we shouldn't
+    // block the animationend/transitionend event from doing its work.
+    if (longestAnimation === undefined)
+        return true;
     return (nativeElement === event.target &&
-        longestAnimation !== undefined &&
         ((longestAnimation.animationName !== undefined &&
             event.animationName === longestAnimation.animationName) ||
             (longestAnimation.propertyName !== undefined &&
                 event.propertyName === longestAnimation.propertyName)));
 }
+/**
+ * Stores a given animation function in the LView's animation map for later execution
+ *
+ * @param animations Either the enter or leave animation map from the LView
+ * @param tNode The TNode the animation is associated with
+ * @param fn The animation function to be called later
+ */
+function addAnimationToLView(animations, tNode, fn) {
+    const nodeAnimations = animations.get(tNode.index) ?? { animateFns: [] };
+    nodeAnimations.animateFns.push(fn);
+    animations.set(tNode.index, nodeAnimations);
+}
+function cleanupAfterLeaveAnimations(resolvers, cleanupFns) {
+    if (resolvers) {
+        for (const fn of resolvers) {
+            fn();
+        }
+    }
+    for (const fn of cleanupFns) {
+        fn();
+    }
+}
+function clearLViewNodeAnimationResolvers(lView, tNode) {
+    const nodeAnimations = getLViewLeaveAnimations(lView).get(tNode.index);
+    if (nodeAnimations)
+        nodeAnimations.resolvers = undefined;
+}
 
 /**
  * Instruction to handle the `animate.enter` behavior for class bindings.
@@ -22128,7 +22201,8 @@ function ɵɵanimateEnter(value) {
     }
     const tNode = getCurrentTNode();
     cancelLeavingNodes(tNode, lView);
-    getLViewEnterAnimations(lView).push(() => runEnterAnimation(lView, tNode, value));
+    addAnimationToLView(getLViewEnterAnimations(lView), tNode, () => runEnterAnimation(lView, tNode, value));
+    queueEnterAnimations(lView);
     return ɵɵanimateEnter; // For chaining
 }
 function runEnterAnimation(lView, tNode, value) {
@@ -22150,7 +22224,7 @@ function runEnterAnimation(lView, tNode, value) {
             return;
         const eventName = event instanceof AnimationEvent ? 'animationend' : 'transitionend';
         ngZone.runOutsideAngular(() => {
-            cleanupFns.push(renderer.listen(nativeElement, eventName, handleEnterAnimationEnd));
+            renderer.listen(nativeElement, eventName, handleEnterAnimationEnd);
         });
     };
     // When the longest animation ends, we can remove all the classes
@@ -22224,7 +22298,8 @@ function ɵɵanimateEnterListener(value) {
     }
     const tNode = getCurrentTNode();
     cancelLeavingNodes(tNode, lView);
-    getLViewEnterAnimations(lView).push(() => runEnterAnimationFunction(lView, tNode, value));
+    addAnimationToLView(getLViewEnterAnimations(lView), tNode, () => runEnterAnimationFunction(lView, tNode, value));
+    queueEnterAnimations(lView);
     return ɵɵanimateEnterListener;
 }
 /**
@@ -22257,36 +22332,35 @@ function ɵɵanimateLeave(value) {
         return ɵɵanimateLeave;
     }
     const tNode = getCurrentTNode();
-    getLViewLeaveAnimations(lView).push(() => runLeaveAnimations(lView, tNode, value, animationsDisabled));
+    addAnimationToLView(getLViewLeaveAnimations(lView), tNode, () => runLeaveAnimations(lView, tNode, value));
+    enableAnimationQueueScheduler(lView[INJECTOR]);
     return ɵɵanimateLeave; // For chaining
 }
-function runLeaveAnimations(lView, tNode, value, animationsDisabled) {
+function runLeaveAnimations(lView, tNode, value) {
     const { promise, resolve } = promiseWithResolvers();
     const nativeElement = getNativeByTNode(tNode, lView);
     ngDevMode && assertElementNodes(nativeElement, 'animate.leave');
     const renderer = lView[RENDERER];
     const ngZone = lView[INJECTOR].get(NgZone);
     allLeavingAnimations.add(lView);
+    (getLViewLeaveAnimations(lView).get(tNode.index).resolvers ??= []).push(resolve);
     const activeClasses = getClassListFromValue(value);
     if (activeClasses && activeClasses.length > 0) {
-        animateLeaveClassRunner(nativeElement, tNode, activeClasses, renderer, animationsDisabled, ngZone, resolve);
+        animateLeaveClassRunner(nativeElement, tNode, lView, activeClasses, renderer, ngZone);
     }
     else {
         resolve();
     }
-    return promise;
+    return { promise, resolve };
 }
 /**
  * This function actually adds the classes that animate element that's leaving the DOM.
  * Once it finishes, it calls the remove function that was provided by the DOM renderer.
  */
-function animateLeaveClassRunner(el, tNode, classList, renderer, animationsDisabled, ngZone, resolver) {
-    if (animationsDisabled) {
-        longestAnimations.delete(el);
-        resolver();
-        return;
-    }
+function animateLeaveClassRunner(el, tNode, lView, classList, renderer, ngZone) {
     cancelAnimationsIfRunning(el, renderer);
+    const cleanupFns = [];
+    const resolvers = getLViewLeaveAnimations(lView).get(tNode.index)?.resolvers;
     const handleOutAnimationEnd = (event) => {
         // this early exit case is to prevent issues with bubbling events that are from child element animations
         if (event.target !== el)
@@ -22307,12 +22381,13 @@ function animateLeaveClassRunner(el, tNode, classList, renderer, animationsDisab
                     renderer.removeClass(el, item);
                 }
             }
+            cleanupAfterLeaveAnimations(resolvers, cleanupFns);
+            clearLViewNodeAnimationResolvers(lView, tNode);
         }
-        resolver();
     };
     ngZone.runOutsideAngular(() => {
-        renderer.listen(el, 'animationend', handleOutAnimationEnd);
-        renderer.listen(el, 'transitionend', handleOutAnimationEnd);
+        cleanupFns.push(renderer.listen(el, 'animationend', handleOutAnimationEnd));
+        cleanupFns.push(renderer.listen(el, 'transitionend', handleOutAnimationEnd));
     });
     trackLeavingNodes(tNode, el);
     for (const item of classList) {
@@ -22326,7 +22401,8 @@ function animateLeaveClassRunner(el, tNode, classList, renderer, animationsDisab
             determineLongestAnimation(el, longestAnimations, areAnimationSupported);
             if (!longestAnimations.has(el)) {
                 clearLeavingNodes(tNode, el);
-                resolver();
+                cleanupAfterLeaveAnimations(resolvers, cleanupFns);
+                clearLViewNodeAnimationResolvers(lView, tNode);
             }
         });
     });
@@ -22354,7 +22430,8 @@ function ɵɵanimateLeaveListener(value) {
     const lView = getLView();
     const tNode = getCurrentTNode();
     allLeavingAnimations.add(lView);
-    getLViewLeaveAnimations(lView).push(() => runLeaveAnimationFunction(lView, tNode, value));
+    addAnimationToLView(getLViewLeaveAnimations(lView), tNode, () => runLeaveAnimationFunction(lView, tNode, value));
+    enableAnimationQueueScheduler(lView[INJECTOR]);
     return ɵɵanimateLeaveListener; // For chaining
 }
 /**
@@ -22395,6 +22472,35 @@ function runLeaveAnimationFunction(lView, tNode, value) {
     // Ensure cleanup if the LView is destroyed before the animation runs.
     return promise;
 }
+function queueEnterAnimations(lView) {
+    enableAnimationQueueScheduler(lView[INJECTOR]);
+    const enterAnimations = lView[ANIMATIONS]?.enter;
+    if (enterAnimations) {
+        const animationQueue = lView[INJECTOR].get(ANIMATION_QUEUE);
+        for (const [_, nodeAnimations] of enterAnimations) {
+            for (const animateFn of nodeAnimations.animateFns) {
+                animationQueue.queue.add(animateFn);
+            }
+        }
+    }
+}
+function enableAnimationQueueScheduler(injector) {
+    const animationQueue = injector.get(ANIMATION_QUEUE);
+    // We only need to schedule the animation queue runner once per application.
+    if (!animationQueue.isScheduled) {
+        afterEveryRender(() => {
+            runQueuedAnimations(injector);
+        }, { injector });
+        animationQueue.isScheduled = true;
+    }
+}
+function runQueuedAnimations(injector) {
+    const animationQueue = injector.get(ANIMATION_QUEUE);
+    for (let animateFn of animationQueue.queue) {
+        animateFn();
+    }
+    animationQueue.queue.clear();
+}
 
 /*!
  * @license