@angular/core 21.0.0-next.8 → 21.0.0-next.9

package/fesm2022/_debug_node-chunk.mjs

@@ -1,11 +1,11 @@
 /**
- * @license Angular v21.0.0-next.8
+ * @license Angular v21.0.0-next.9
  * (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, ENVIRONMENT_INITIALIZER, inject, formatRuntimeError, isInSkipHydrationBlock as isInSkipHydrationBlock$1, HYDRATION, isContentQueryHost, setCurrentQueryIndex, XSS_SECURITY_URL, renderStringify, ENVIRONMENT, makeEnvironmentProviders, isDirectiveHost, 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, NgZone, ErrorHandler, assertNotInReactiveContext, assertInInjectionContext, DestroyRef, ViewContext, removeLViewOnDestroy, walkUpViews, getNativeByIndex, assertElement, arrayInsert2, arraySplice, setInjectorProfiler, NullInjector, INJECTOR_DEF_TYPES, walkProviderTree, getInjectorDef, deepForEach, isTypeProvider, isSignal, isInInjectionContext, runInInjectionContext, ZONELESS_ENABLED, EffectScheduler, PendingTasksInternal, 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, angularZoneInstanceIdProperty, SCHEDULE_IN_ROOT_ZONE, scheduleCallbackWithMicrotask, PROVIDED_ZONELESS, NoopNgZone, scheduleCallbackWithRafRace, getNativeByTNodeOrNull } from './_root_effect_scheduler-chunk.mjs';
-import { setActiveConsumer, SIGNAL, consumerDestroy, REACTIVE_NODE, consumerPollProducersForChange, consumerBeforeComputation, getActiveConsumer, consumerAfterComputation, createComputed, setThrowInvalidWriteToSignalError } from './_signal-chunk.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, ENVIRONMENT_INITIALIZER, inject, formatRuntimeError, isInSkipHydrationBlock as isInSkipHydrationBlock$1, HYDRATION, isContentQueryHost, setCurrentQueryIndex, XSS_SECURITY_URL, renderStringify, ENVIRONMENT, makeEnvironmentProviders, isDirectiveHost, resetPreOrderHookFlags, PARENT, RENDERER, CHILD_TAIL, assertSame, assertFirstUpdatePass, getSelectedIndex, getTView, assertIndexInDeclRange, setSelectedIndex, NgZone, ChangeDetectionScheduler, ErrorHandler, AFTER_RENDER_SEQUENCES_TO_ADD, markAncestorsForTraversal, assertNotInReactiveContext, assertInInjectionContext, DestroyRef, ViewContext, 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, 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, EnvironmentInjector, SVG_NAMESPACE, MATH_ML_NAMESPACE, viewAttachedToContainer, storeCleanupWithContext, signal, createInjectorWithoutInjectorInstances, R3Injector, getNullInjector, internalImportProvidersFrom, initNgDevMode, fillProperties, getBindingsEnabled, lastNodeWasCreated, removeLViewOnDestroy, walkUpViews, getNativeByIndex, assertElement, arrayInsert2, arraySplice, setInjectorProfiler, NullInjector, INJECTOR_DEF_TYPES, walkProviderTree, getInjectorDef, deepForEach, EffectRefImpl, isTypeProvider, isSignal, isInInjectionContext, runInInjectionContext, ZONELESS_ENABLED, EffectScheduler, PendingTasksInternal, 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, angularZoneInstanceIdProperty, SCHEDULE_IN_ROOT_ZONE, scheduleCallbackWithMicrotask, PROVIDED_ZONELESS, NoopNgZone, scheduleCallbackWithRafRace, getNativeByTNodeOrNull } from './_effect-chunk2.mjs';
+import { setActiveConsumer, SIGNAL, consumerDestroy, REACTIVE_NODE, consumerPollProducersForChange, consumerBeforeComputation, getActiveConsumer, consumerAfterComputation, createComputed, setThrowInvalidWriteToSignalError } from './_effect-chunk.mjs';
 import { Subject, Subscription } from 'rxjs';
 import { setActiveConsumer as setActiveConsumer$1 } from '@angular/core/primitives/signals';
 import { map } from 'rxjs/operators';
@@ -494,6 +494,15 @@ function getParentCtor(ctor) {
     return parentCtor || Object;
 }
 
+function applyValueToInputField(instance, inputSignalNode, privateName, value) {
+    if (inputSignalNode !== null) {
+        inputSignalNode.applyValueToInputSignal(inputSignalNode, value);
+    }
+    else {
+        instance[privateName] = value;
+    }
+}
+
 /**
  * Represents a basic change from a previous to a new value for a single
  * property on a directive instance. Passed as a value in a
@@ -520,15 +529,6 @@ class SimpleChange {
     }
 }
 
-function applyValueToInputField(instance, inputSignalNode, privateName, value) {
-    if (inputSignalNode !== null) {
-        inputSignalNode.applyValueToInputSignal(inputSignalNode, value);
-    }
-    else {
-        instance[privateName] = value;
-    }
-}
-
 /**
  * The NgOnChangesFeature decorates a component with support for the ngOnChanges
  * lifecycle hook, so it should be included in any component that implements
@@ -7380,130 +7380,393 @@ function determineLongestAnimationFromElementAnimations(el, animationsMap, anima
 }
 const allLeavingAnimations = new Set();
 
+/** Actions that are supported by the tracing framework. */
+var TracingAction;
+(function (TracingAction) {
+    TracingAction[TracingAction["CHANGE_DETECTION"] = 0] = "CHANGE_DETECTION";
+    TracingAction[TracingAction["AFTER_NEXT_RENDER"] = 1] = "AFTER_NEXT_RENDER";
+})(TracingAction || (TracingAction = {}));
 /**
- * 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.
+ * Injection token for a `TracingService`, optionally provided.
  */
-const ANIMATION_QUEUE = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'AnimationQueue' : '', {
-    providedIn: 'root',
-    factory: () => {
-        return {
-            queue: new Set(),
-            isScheduled: false,
-        };
-    },
-});
+const TracingService = new InjectionToken(typeof ngDevMode !== undefined && ngDevMode ? 'TracingService' : '');
+
+const markedFeatures = new Set();
+// tslint:disable:ban
 /**
- * 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.
+ * A guarded `performance.mark` for feature marking.
  *
- * @publicApi 20.2
+ * This method exists because while all supported browser and node.js version supported by Angular
+ * support performance.mark API. This is not the case for other environments such as JSDOM and
+ * Cloudflare workers.
  */
-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 performanceMarkFeature(feature) {
+    if (markedFeatures.has(feature)) {
+        return;
+    }
+    markedFeatures.add(feature);
+    performance?.mark?.('mark_feature_usage', { detail: { feature } });
+}
 
-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);
-        }
+class AfterRenderManager {
+    impl = null;
+    execute() {
+        this.impl?.execute();
     }
+    /** @nocollapse */
+    static ɵprov = /** @pureOrBreakMyCode */ /* @__PURE__ */ __defineInjectable({
+        token: AfterRenderManager,
+        providedIn: 'root',
+        factory: () => new AfterRenderManager(),
+    });
 }
-/**
- * NOTE: for performance reasons, the possible actions are inlined within the function instead of
- * being passed as an argument.
- */
-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"
-    // in `i18n_spec.ts`.
-    if (lNodeToHandle != null) {
-        let lContainer;
-        let isComponent = false;
-        // We are expecting an RNode, but in the case of a component or LContainer the `RNode` is
-        // wrapped in an array which needs to be unwrapped. We need to know if it is a component and if
-        // it has LContainer so that we can process all of those cases appropriately.
-        if (isLContainer(lNodeToHandle)) {
-            lContainer = lNodeToHandle;
-        }
-        else if (isLView(lNodeToHandle)) {
-            isComponent = true;
-            ngDevMode && assertDefined(lNodeToHandle[HOST], 'HOST must be defined for a component LView');
-            lNodeToHandle = lNodeToHandle[HOST];
+const AFTER_RENDER_PHASES = /* @__PURE__ **/ (() => [
+    0 /* AfterRenderPhase.EarlyRead */,
+    1 /* AfterRenderPhase.Write */,
+    2 /* AfterRenderPhase.MixedReadWrite */,
+    3 /* AfterRenderPhase.Read */,
+])();
+class AfterRenderImpl {
+    ngZone = inject(NgZone);
+    scheduler = inject(ChangeDetectionScheduler);
+    errorHandler = inject(ErrorHandler, { optional: true });
+    /** Current set of active sequences. */
+    sequences = new Set();
+    /** Tracks registrations made during the current set of executions. */
+    deferredRegistrations = new Set();
+    /** Whether the `AfterRenderManager` is currently executing hooks. */
+    executing = false;
+    constructor() {
+        // Inject the tracing service to make sure it's initialized.
+        inject(TracingService, { optional: true });
+    }
+    /**
+     * Run the sequence of phases of hooks, once through. As a result of executing some hooks, more
+     * might be scheduled.
+     */
+    execute() {
+        const hasSequencesToExecute = this.sequences.size > 0;
+        if (hasSequencesToExecute) {
+            profiler(16 /* ProfilerEvent.AfterRenderHooksStart */);
         }
-        const rNode = unwrapRNode(lNodeToHandle);
-        if (action === 0 /* WalkTNodeTreeAction.Create */ && parent !== null) {
-            maybeQueueEnterAnimation(parentLView, parent, tNode, injector);
-            if (beforeNode == null) {
-                nativeAppendChild(renderer, parent, rNode);
+        this.executing = true;
+        for (const phase of AFTER_RENDER_PHASES) {
+            for (const sequence of this.sequences) {
+                if (sequence.erroredOrDestroyed || !sequence.hooks[phase]) {
+                    continue;
+                }
+                try {
+                    sequence.pipelinedValue = this.ngZone.runOutsideAngular(() => this.maybeTrace(() => {
+                        const hookFn = sequence.hooks[phase];
+                        const value = hookFn(sequence.pipelinedValue);
+                        return value;
+                    }, sequence.snapshot));
+                }
+                catch (err) {
+                    sequence.erroredOrDestroyed = true;
+                    this.errorHandler?.handleError(err);
+                }
             }
-            else {
-                nativeInsertBefore(renderer, parent, rNode, beforeNode || null, true);
+        }
+        this.executing = false;
+        // Cleanup step to reset sequence state and also collect one-shot sequences for removal.
+        for (const sequence of this.sequences) {
+            sequence.afterRun();
+            if (sequence.once) {
+                this.sequences.delete(sequence);
+                // Destroy the sequence so its on destroy callbacks can be cleaned up
+                // immediately, instead of waiting until the injector is destroyed.
+                sequence.destroy();
             }
         }
-        else if (action === 1 /* WalkTNodeTreeAction.Insert */ && parent !== null) {
-            maybeQueueEnterAnimation(parentLView, parent, tNode, injector);
-            nativeInsertBefore(renderer, parent, rNode, beforeNode || null, true);
+        for (const sequence of this.deferredRegistrations) {
+            this.sequences.add(sequence);
         }
-        else if (action === 2 /* WalkTNodeTreeAction.Detach */) {
-            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.
-                nativeRemoveNode(renderer, rNode, isComponent, nodeHasLeaveAnimations);
-            });
+        if (this.deferredRegistrations.size > 0) {
+            this.scheduler.notify(7 /* NotificationSource.RenderHook */);
         }
-        else if (action === 3 /* WalkTNodeTreeAction.Destroy */) {
-            runLeaveAnimationsWithCallback(parentLView, tNode, injector, () => {
-                renderer.destroyNode(rNode);
-            });
+        this.deferredRegistrations.clear();
+        if (hasSequencesToExecute) {
+            profiler(17 /* ProfilerEvent.AfterRenderHooksEnd */);
         }
-        if (lContainer != null) {
-            applyContainer(renderer, action, injector, lContainer, tNode, parent, beforeNode);
+    }
+    register(sequence) {
+        const { view } = sequence;
+        if (view !== undefined) {
+            // Delay adding it to the manager, add it to the view instead.
+            (view[AFTER_RENDER_SEQUENCES_TO_ADD] ??= []).push(sequence);
+            // Mark the view for traversal to ensure we eventually schedule the afterNextRender.
+            markAncestorsForTraversal(view);
+            view[FLAGS] |= 8192 /* LViewFlags.HasChildViewsToRefresh */;
+        }
+        else if (!this.executing) {
+            this.addSequence(sequence);
+        }
+        else {
+            this.deferredRegistrations.add(sequence);
         }
     }
-}
-function addToAnimationQueue(injector, animationFns) {
-    const animationQueue = injector.get(ANIMATION_QUEUE);
-    if (Array.isArray(animationFns)) {
-        for (const animateFn of animationFns) {
-            animationQueue.queue.add(animateFn);
+    addSequence(sequence) {
+        this.sequences.add(sequence);
+        // Trigger an `ApplicationRef.tick()` if one is not already pending/running, because we have a
+        // new render hook that needs to run.
+        this.scheduler.notify(7 /* NotificationSource.RenderHook */);
+    }
+    unregister(sequence) {
+        if (this.executing && this.sequences.has(sequence)) {
+            // We can't remove an `AfterRenderSequence` in the middle of iteration.
+            // Instead, mark it as destroyed so it doesn't run any more, and mark it as one-shot so it'll
+            // be removed at the end of the current execution.
+            sequence.erroredOrDestroyed = true;
+            sequence.pipelinedValue = undefined;
+            sequence.once = true;
+        }
+        else {
+            // It's safe to directly remove this sequence.
+            this.sequences.delete(sequence);
+            this.deferredRegistrations.delete(sequence);
         }
     }
-    else {
-        animationQueue.queue.add(animationFns);
+    maybeTrace(fn, snapshot) {
+        // Only trace the execution if the snapshot is defined.
+        return snapshot ? snapshot.run(TracingAction.AFTER_NEXT_RENDER, fn) : fn();
     }
+    /** @nocollapse */
+    static ɵprov = /** @pureOrBreakMyCode */ /* @__PURE__ */ __defineInjectable({
+        token: AfterRenderImpl,
+        providedIn: 'root',
+        factory: () => new AfterRenderImpl(),
+    });
+}
+class AfterRenderSequence {
+    impl;
+    hooks;
+    view;
+    once;
+    snapshot;
+    /**
+     * Whether this sequence errored or was destroyed during this execution, and hooks should no
+     * longer run for it.
+     */
+    erroredOrDestroyed = false;
+    /**
+     * The value returned by the last hook execution (if any), ready to be pipelined into the next
+     * one.
+     */
+    pipelinedValue = undefined;
+    unregisterOnDestroy;
+    constructor(impl, hooks, view, once, destroyRef, snapshot = null) {
+        this.impl = impl;
+        this.hooks = hooks;
+        this.view = view;
+        this.once = once;
+        this.snapshot = snapshot;
+        this.unregisterOnDestroy = destroyRef?.onDestroy(() => this.destroy());
+    }
+    afterRun() {
+        this.erroredOrDestroyed = false;
+        this.pipelinedValue = undefined;
+        // Clear the tracing snapshot after the initial run. This snapshot only
+        // associates the initial run of the hook with the context that created it.
+        // Follow-up runs are independent of that initial context and have different
+        // triggers.
+        this.snapshot?.dispose();
+        this.snapshot = null;
+    }
+    destroy() {
+        this.impl.unregister(this);
+        this.unregisterOnDestroy?.();
+        const scheduled = this.view?.[AFTER_RENDER_SEQUENCES_TO_ADD];
+        if (scheduled) {
+            this.view[AFTER_RENDER_SEQUENCES_TO_ADD] = scheduled.filter((s) => s !== this);
+        }
+    }
+}
+
+function afterEveryRender(callbackOrSpec, options) {
+    ngDevMode &&
+        assertNotInReactiveContext(afterEveryRender, 'Call `afterEveryRender` outside of a reactive context. For example, schedule the render ' +
+            'callback inside the component constructor`.');
+    if (ngDevMode && !options?.injector) {
+        assertInInjectionContext(afterEveryRender);
+    }
+    const injector = options?.injector ?? inject(Injector);
+    if (typeof ngServerMode !== 'undefined' && ngServerMode) {
+        return NOOP_AFTER_RENDER_REF;
+    }
+    performanceMarkFeature('NgAfterRender');
+    return afterEveryRenderImpl(callbackOrSpec, injector, options, /* once */ false);
+}
+function afterNextRender(callbackOrSpec, options) {
+    if (ngDevMode && !options?.injector) {
+        assertInInjectionContext(afterNextRender);
+    }
+    const injector = options?.injector ?? inject(Injector);
+    if (typeof ngServerMode !== 'undefined' && ngServerMode) {
+        return NOOP_AFTER_RENDER_REF;
+    }
+    performanceMarkFeature('NgAfterNextRender');
+    return afterEveryRenderImpl(callbackOrSpec, injector, options, /* once */ true);
+}
+function getHooks(callbackOrSpec) {
+    if (callbackOrSpec instanceof Function) {
+        return [undefined, undefined, /* MixedReadWrite */ callbackOrSpec, undefined];
+    }
+    else {
+        return [
+            callbackOrSpec.earlyRead,
+            callbackOrSpec.write,
+            callbackOrSpec.mixedReadWrite,
+            callbackOrSpec.read,
+        ];
+    }
+}
+/**
+ * Shared implementation for `afterEveryRender` and `afterNextRender`.
+ */
+function afterEveryRenderImpl(callbackOrSpec, injector, options, once) {
+    const manager = injector.get(AfterRenderManager);
+    // Lazily initialize the handler implementation, if necessary. This is so that it can be
+    // tree-shaken if `afterEveryRender` and `afterNextRender` aren't used.
+    manager.impl ??= injector.get(AfterRenderImpl);
+    const tracing = injector.get(TracingService, null, { optional: true });
+    const destroyRef = options?.manualCleanup !== true ? injector.get(DestroyRef) : null;
+    const viewContext = injector.get(ViewContext, null, { optional: true });
+    const sequence = new AfterRenderSequence(manager.impl, getHooks(callbackOrSpec), viewContext?.view, once, destroyRef, tracing?.snapshot(null));
+    manager.impl.register(sequence);
+    return sequence;
+}
+/** `AfterRenderRef` that does nothing. */
+const NOOP_AFTER_RENDER_REF = {
+    destroy() { },
+};
+
+/**
+ * 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,
+            scheduler: null,
+        };
+    },
+});
+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);
+    }
+    animationQueue.scheduler && animationQueue.scheduler(injector);
+}
+function scheduleAnimationQueue(injector) {
+    const animationQueue = injector.get(ANIMATION_QUEUE);
+    // We only want to schedule the animation queue if it hasn't already been scheduled.
+    if (!animationQueue.isScheduled) {
+        afterNextRender(() => {
+            animationQueue.isScheduled = false;
+            for (let animateFn of animationQueue.queue) {
+                animateFn();
+            }
+            animationQueue.queue.clear();
+        }, { injector });
+        animationQueue.isScheduled = true;
+    }
+}
+function initializeAnimationQueueScheduler(injector) {
+    const animationQueue = injector.get(ANIMATION_QUEUE);
+    animationQueue.scheduler = scheduleAnimationQueue;
+    animationQueue.scheduler(injector);
+}
+function queueEnterAnimations(injector, enterAnimations) {
+    for (const [_, nodeAnimations] of enterAnimations) {
+        addToAnimationQueue(injector, nodeAnimations.animateFns);
+    }
+}
+
+function maybeQueueEnterAnimation(parentLView, parent, tNode, injector) {
+    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.
+ */
+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"
+    // in `i18n_spec.ts`.
+    if (lNodeToHandle != null) {
+        let lContainer;
+        let isComponent = false;
+        // We are expecting an RNode, but in the case of a component or LContainer the `RNode` is
+        // wrapped in an array which needs to be unwrapped. We need to know if it is a component and if
+        // it has LContainer so that we can process all of those cases appropriately.
+        if (isLContainer(lNodeToHandle)) {
+            lContainer = lNodeToHandle;
+        }
+        else if (isLView(lNodeToHandle)) {
+            isComponent = true;
+            ngDevMode && assertDefined(lNodeToHandle[HOST], 'HOST must be defined for a component LView');
+            lNodeToHandle = lNodeToHandle[HOST];
+        }
+        const rNode = unwrapRNode(lNodeToHandle);
+        if (action === 0 /* WalkTNodeTreeAction.Create */ && parent !== null) {
+            maybeQueueEnterAnimation(parentLView, parent, tNode, injector);
+            if (beforeNode == null) {
+                nativeAppendChild(renderer, parent, rNode);
+            }
+            else {
+                nativeInsertBefore(renderer, parent, rNode, beforeNode || null, true);
+            }
+        }
+        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, 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.
+                nativeRemoveNode(renderer, rNode, isComponent, nodeHasLeaveAnimations);
+            });
+        }
+        else if (action === 3 /* WalkTNodeTreeAction.Destroy */) {
+            runLeaveAnimationsWithCallback(parentLView, tNode, injector, () => {
+                renderer.destroyNode(rNode);
+            });
+        }
+        if (lContainer != null) {
+            applyContainer(renderer, action, injector, lContainer, tNode, parent, beforeNode);
+        }
+    }
+}
+/**
+ * Removes all DOM elements associated with a view.
+ *
+ * Because some root nodes of the view may be containers, we sometimes need
+ * to propagate deeply into the nested containers to remove all elements in the
+ * views beneath it.
+ *
+ * @param tView The `TView' of the `LView` from which elements should be added or removed
+ * @param lView The view from which elements should be added or removed
+ */
+function removeViewFromDOM(tView, lView) {
+    detachViewFromDOM(tView, lView);
+    lView[HOST] = null;
+    lView[T_HOST] = null;
 }
-/**
- * Removes all DOM elements associated with a view.
- *
- * Because some root nodes of the view may be containers, we sometimes need
- * to propagate deeply into the nested containers to remove all elements in the
- * views beneath it.
- *
- * @param tView The `TView' of the `LView` from which elements should be added or removed
- * @param lView The view from which elements should be added or removed
- */
-function removeViewFromDOM(tView, lView) {
-    detachViewFromDOM(tView, lView);
-    lView[HOST] = null;
-    lView[T_HOST] = null;
-}
 /**
  * Adds all DOM elements associated with a view.
  *
@@ -13816,7 +14079,7 @@ class ComponentFactory extends ComponentFactory$1 {
 }
 function createRootTView(rootSelectorOrNode, componentDef, componentBindings, directives) {
     const tAttributes = rootSelectorOrNode
-        ? ['ng-version', '21.0.0-next.8']
+        ? ['ng-version', '21.0.0-next.9']
         : // Extract attributes and classes from the first selector only to match VE behavior.
             extractAttrsAndClassesFromSelector(componentDef.selectors[0]);
     let creationBindings = null;
@@ -15122,23 +15385,6 @@ function ɵɵvalidateIframeAttribute(attrValue, tagName, attrName) {
     return attrValue;
 }
 
-const markedFeatures = new Set();
-// tslint:disable:ban
-/**
- * A guarded `performance.mark` for feature marking.
- *
- * This method exists because while all supported browser and node.js version supported by Angular
- * support performance.mark API. This is not the case for other environments such as JSDOM and
- * Cloudflare workers.
- */
-function performanceMarkFeature(feature) {
-    if (markedFeatures.has(feature)) {
-        return;
-    }
-    markedFeatures.add(feature);
-    performance?.mark?.('mark_feature_usage', { detail: { feature } });
-}
-
 /**
  * Represents an instance of an `NgModule` created by an `NgModuleFactory`.
  * Provides access to the `NgModule` instance and related objects.
@@ -16481,258 +16727,14 @@ function getCleanupFnKeyByType(type) {
     return key;
 }
 
-/** Actions that are supported by the tracing framework. */
-var TracingAction;
-(function (TracingAction) {
-    TracingAction[TracingAction["CHANGE_DETECTION"] = 0] = "CHANGE_DETECTION";
-    TracingAction[TracingAction["AFTER_NEXT_RENDER"] = 1] = "AFTER_NEXT_RENDER";
-})(TracingAction || (TracingAction = {}));
 /**
- * Injection token for a `TracingService`, optionally provided.
+ * Calculates a data slot index for defer block info (either static or
+ * instance-specific), given an index of a defer instruction.
  */
-const TracingService = new InjectionToken(typeof ngDevMode !== undefined && ngDevMode ? 'TracingService' : '');
-
-class AfterRenderManager {
-    impl = null;
-    execute() {
-        this.impl?.execute();
-    }
-    /** @nocollapse */
-    static ɵprov = /** @pureOrBreakMyCode */ /* @__PURE__ */ __defineInjectable({
-        token: AfterRenderManager,
-        providedIn: 'root',
-        factory: () => new AfterRenderManager(),
-    });
-}
-const AFTER_RENDER_PHASES = /* @__PURE__ **/ (() => [
-    0 /* AfterRenderPhase.EarlyRead */,
-    1 /* AfterRenderPhase.Write */,
-    2 /* AfterRenderPhase.MixedReadWrite */,
-    3 /* AfterRenderPhase.Read */,
-])();
-class AfterRenderImpl {
-    ngZone = inject(NgZone);
-    scheduler = inject(ChangeDetectionScheduler);
-    errorHandler = inject(ErrorHandler, { optional: true });
-    /** Current set of active sequences. */
-    sequences = new Set();
-    /** Tracks registrations made during the current set of executions. */
-    deferredRegistrations = new Set();
-    /** Whether the `AfterRenderManager` is currently executing hooks. */
-    executing = false;
-    constructor() {
-        // Inject the tracing service to make sure it's initialized.
-        inject(TracingService, { optional: true });
-    }
-    /**
-     * Run the sequence of phases of hooks, once through. As a result of executing some hooks, more
-     * might be scheduled.
-     */
-    execute() {
-        const hasSequencesToExecute = this.sequences.size > 0;
-        if (hasSequencesToExecute) {
-            profiler(16 /* ProfilerEvent.AfterRenderHooksStart */);
-        }
-        this.executing = true;
-        for (const phase of AFTER_RENDER_PHASES) {
-            for (const sequence of this.sequences) {
-                if (sequence.erroredOrDestroyed || !sequence.hooks[phase]) {
-                    continue;
-                }
-                try {
-                    sequence.pipelinedValue = this.ngZone.runOutsideAngular(() => this.maybeTrace(() => {
-                        const hookFn = sequence.hooks[phase];
-                        const value = hookFn(sequence.pipelinedValue);
-                        return value;
-                    }, sequence.snapshot));
-                }
-                catch (err) {
-                    sequence.erroredOrDestroyed = true;
-                    this.errorHandler?.handleError(err);
-                }
-            }
-        }
-        this.executing = false;
-        // Cleanup step to reset sequence state and also collect one-shot sequences for removal.
-        for (const sequence of this.sequences) {
-            sequence.afterRun();
-            if (sequence.once) {
-                this.sequences.delete(sequence);
-                // Destroy the sequence so its on destroy callbacks can be cleaned up
-                // immediately, instead of waiting until the injector is destroyed.
-                sequence.destroy();
-            }
-        }
-        for (const sequence of this.deferredRegistrations) {
-            this.sequences.add(sequence);
-        }
-        if (this.deferredRegistrations.size > 0) {
-            this.scheduler.notify(7 /* NotificationSource.RenderHook */);
-        }
-        this.deferredRegistrations.clear();
-        if (hasSequencesToExecute) {
-            profiler(17 /* ProfilerEvent.AfterRenderHooksEnd */);
-        }
-    }
-    register(sequence) {
-        const { view } = sequence;
-        if (view !== undefined) {
-            // Delay adding it to the manager, add it to the view instead.
-            (view[AFTER_RENDER_SEQUENCES_TO_ADD] ??= []).push(sequence);
-            // Mark the view for traversal to ensure we eventually schedule the afterNextRender.
-            markAncestorsForTraversal(view);
-            view[FLAGS] |= 8192 /* LViewFlags.HasChildViewsToRefresh */;
-        }
-        else if (!this.executing) {
-            this.addSequence(sequence);
-        }
-        else {
-            this.deferredRegistrations.add(sequence);
-        }
-    }
-    addSequence(sequence) {
-        this.sequences.add(sequence);
-        // Trigger an `ApplicationRef.tick()` if one is not already pending/running, because we have a
-        // new render hook that needs to run.
-        this.scheduler.notify(7 /* NotificationSource.RenderHook */);
-    }
-    unregister(sequence) {
-        if (this.executing && this.sequences.has(sequence)) {
-            // We can't remove an `AfterRenderSequence` in the middle of iteration.
-            // Instead, mark it as destroyed so it doesn't run any more, and mark it as one-shot so it'll
-            // be removed at the end of the current execution.
-            sequence.erroredOrDestroyed = true;
-            sequence.pipelinedValue = undefined;
-            sequence.once = true;
-        }
-        else {
-            // It's safe to directly remove this sequence.
-            this.sequences.delete(sequence);
-            this.deferredRegistrations.delete(sequence);
-        }
-    }
-    maybeTrace(fn, snapshot) {
-        // Only trace the execution if the snapshot is defined.
-        return snapshot ? snapshot.run(TracingAction.AFTER_NEXT_RENDER, fn) : fn();
-    }
-    /** @nocollapse */
-    static ɵprov = /** @pureOrBreakMyCode */ /* @__PURE__ */ __defineInjectable({
-        token: AfterRenderImpl,
-        providedIn: 'root',
-        factory: () => new AfterRenderImpl(),
-    });
-}
-class AfterRenderSequence {
-    impl;
-    hooks;
-    view;
-    once;
-    snapshot;
-    /**
-     * Whether this sequence errored or was destroyed during this execution, and hooks should no
-     * longer run for it.
-     */
-    erroredOrDestroyed = false;
-    /**
-     * The value returned by the last hook execution (if any), ready to be pipelined into the next
-     * one.
-     */
-    pipelinedValue = undefined;
-    unregisterOnDestroy;
-    constructor(impl, hooks, view, once, destroyRef, snapshot = null) {
-        this.impl = impl;
-        this.hooks = hooks;
-        this.view = view;
-        this.once = once;
-        this.snapshot = snapshot;
-        this.unregisterOnDestroy = destroyRef?.onDestroy(() => this.destroy());
-    }
-    afterRun() {
-        this.erroredOrDestroyed = false;
-        this.pipelinedValue = undefined;
-        // Clear the tracing snapshot after the initial run. This snapshot only
-        // associates the initial run of the hook with the context that created it.
-        // Follow-up runs are independent of that initial context and have different
-        // triggers.
-        this.snapshot?.dispose();
-        this.snapshot = null;
-    }
-    destroy() {
-        this.impl.unregister(this);
-        this.unregisterOnDestroy?.();
-        const scheduled = this.view?.[AFTER_RENDER_SEQUENCES_TO_ADD];
-        if (scheduled) {
-            this.view[AFTER_RENDER_SEQUENCES_TO_ADD] = scheduled.filter((s) => s !== this);
-        }
-    }
-}
-
-function afterEveryRender(callbackOrSpec, options) {
-    ngDevMode &&
-        assertNotInReactiveContext(afterEveryRender, 'Call `afterEveryRender` outside of a reactive context. For example, schedule the render ' +
-            'callback inside the component constructor`.');
-    if (ngDevMode && !options?.injector) {
-        assertInInjectionContext(afterEveryRender);
-    }
-    const injector = options?.injector ?? inject(Injector);
-    if (typeof ngServerMode !== 'undefined' && ngServerMode) {
-        return NOOP_AFTER_RENDER_REF;
-    }
-    performanceMarkFeature('NgAfterRender');
-    return afterEveryRenderImpl(callbackOrSpec, injector, options, /* once */ false);
-}
-function afterNextRender(callbackOrSpec, options) {
-    if (ngDevMode && !options?.injector) {
-        assertInInjectionContext(afterNextRender);
-    }
-    const injector = options?.injector ?? inject(Injector);
-    if (typeof ngServerMode !== 'undefined' && ngServerMode) {
-        return NOOP_AFTER_RENDER_REF;
-    }
-    performanceMarkFeature('NgAfterNextRender');
-    return afterEveryRenderImpl(callbackOrSpec, injector, options, /* once */ true);
-}
-function getHooks(callbackOrSpec) {
-    if (callbackOrSpec instanceof Function) {
-        return [undefined, undefined, /* MixedReadWrite */ callbackOrSpec, undefined];
-    }
-    else {
-        return [
-            callbackOrSpec.earlyRead,
-            callbackOrSpec.write,
-            callbackOrSpec.mixedReadWrite,
-            callbackOrSpec.read,
-        ];
-    }
-}
-/**
- * Shared implementation for `afterEveryRender` and `afterNextRender`.
- */
-function afterEveryRenderImpl(callbackOrSpec, injector, options, once) {
-    const manager = injector.get(AfterRenderManager);
-    // Lazily initialize the handler implementation, if necessary. This is so that it can be
-    // tree-shaken if `afterEveryRender` and `afterNextRender` aren't used.
-    manager.impl ??= injector.get(AfterRenderImpl);
-    const tracing = injector.get(TracingService, null, { optional: true });
-    const destroyRef = options?.manualCleanup !== true ? injector.get(DestroyRef) : null;
-    const viewContext = injector.get(ViewContext, null, { optional: true });
-    const sequence = new AfterRenderSequence(manager.impl, getHooks(callbackOrSpec), viewContext?.view, once, destroyRef, tracing?.snapshot(null));
-    manager.impl.register(sequence);
-    return sequence;
-}
-/** `AfterRenderRef` that does nothing. */
-const NOOP_AFTER_RENDER_REF = {
-    destroy() { },
-};
-
-/**
- * Calculates a data slot index for defer block info (either static or
- * instance-specific), given an index of a defer instruction.
- */
-function getDeferBlockDataIndex(deferBlockIndex) {
-    // Instance state is located at the *next* position
-    // after the defer block slot in an LView or TView.data.
-    return deferBlockIndex + 1;
+function getDeferBlockDataIndex(deferBlockIndex) {
+    // Instance state is located at the *next* position
+    // after the defer block slot in an LView or TView.data.
+    return deferBlockIndex + 1;
 }
 /** Retrieves a defer block state from an LView, given a TNode that represents a block. */
 function getLDeferBlockDetails(lView, tNode) {
@@ -17789,6 +17791,9 @@ function injectorProfilerEventHandler(injectorProfilerEvent) {
     else if (type === 3 /* InjectorProfilerEventType.EffectCreated */) {
         handleEffectCreatedEvent(context, injectorProfilerEvent.effect);
     }
+    else if (type === 4 /* InjectorProfilerEventType.AfterRenderEffectPhaseCreated */) {
+        handleEffectCreatedEvent(context, injectorProfilerEvent.effectPhase);
+    }
 }
 function handleEffectCreatedEvent(context, effect) {
     const diResolver = getDIResolver(context.injector);
@@ -18799,7 +18804,15 @@ function extractEffectsFromInjector(injector) {
     }
     const resolverToEffects = getFrameworkDIDebugData().resolverToEffects;
     const effects = resolverToEffects.get(diResolver) ?? [];
-    return effects.map((effect) => effect[SIGNAL]);
+    return effects.map((effect) => {
+        if (effect instanceof EffectRefImpl) {
+            return effect[SIGNAL];
+        }
+        else {
+            // Narrowing down afterRenderEffect phases
+            return effect.signal[SIGNAL];
+        }
+    });
 }
 function extractSignalNodesAndEdgesFromRoots(nodes, signalDependenciesMap = new Map()) {
     for (const node of nodes) {
@@ -18858,7 +18871,7 @@ function measureEnd(startEvent, entryName, color) {
 }
 const chromeDevToolsInjectorProfiler = (event) => {
     const eventType = event.type;
-    if (eventType === 4 /* InjectorProfilerEventType.InjectorToCreateInstanceEvent */) {
+    if (eventType === 5 /* InjectorProfilerEventType.InjectorToCreateInstanceEvent */) {
         measureStart(100 /* ProfilerDIEvent.InjectorToCreateInstanceEvent */);
     }
     else if (eventType === 1 /* InjectorProfilerEventType.InstanceCreatedByInjector */) {
@@ -20241,7 +20254,7 @@ function scheduleDelayedTrigger(scheduleFn) {
  *
  * @param scheduleFn A function that does the scheduling.
  */
-function scheduleDelayedPrefetching(scheduleFn, trigger) {
+function scheduleDelayedPrefetching(scheduleFn) {
     if (typeof ngServerMode !== 'undefined' && ngServerMode)
         return;
     const lView = getLView();
@@ -21416,6 +21429,28 @@ 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' &&
@@ -21670,7 +21705,13 @@ function ɵɵanimateEnter(value) {
     const tNode = getCurrentTNode();
     cancelLeavingNodes(tNode, lView);
     addAnimationToLView(getLViewEnterAnimations(lView), tNode, () => runEnterAnimation(lView, tNode, value));
-    queueEnterAnimations(lView);
+    initializeAnimationQueueScheduler(lView[INJECTOR]);
+    // We have to queue here due to the animation instruction being invoked after the element
+    // instruction. The DOM node has to exist before we can queue an animation. Any node that
+    // is not inside of control flow needs to get queued here. For nodes inside of control
+    // flow, those are queued in node_manipulation.ts and are deduped by a Set in the animation
+    // queue.
+    queueEnterAnimations(lView[INJECTOR], getLViewEnterAnimations(lView));
     return ɵɵanimateEnter; // For chaining
 }
 function runEnterAnimation(lView, tNode, value) {
@@ -21767,7 +21808,13 @@ function ɵɵanimateEnterListener(value) {
     const tNode = getCurrentTNode();
     cancelLeavingNodes(tNode, lView);
     addAnimationToLView(getLViewEnterAnimations(lView), tNode, () => runEnterAnimationFunction(lView, tNode, value));
-    queueEnterAnimations(lView);
+    initializeAnimationQueueScheduler(lView[INJECTOR]);
+    // We have to queue here due to the animation instruction being invoked after the element
+    // instruction. The DOM node has to exist before we can queue an animation. Any node that
+    // is not inside of control flow needs to get queued here. For nodes inside of control
+    // flow, those are queued in node_manipulation.ts and are deduped by a Set in the animation
+    // queue.
+    queueEnterAnimations(lView[INJECTOR], getLViewEnterAnimations(lView));
     return ɵɵanimateEnterListener;
 }
 /**
@@ -21800,8 +21847,9 @@ function ɵɵanimateLeave(value) {
         return ɵɵanimateLeave;
     }
     const tNode = getCurrentTNode();
+    cancelLeavingNodes(tNode, lView);
     addAnimationToLView(getLViewLeaveAnimations(lView), tNode, () => runLeaveAnimations(lView, tNode, value));
-    enableAnimationQueueScheduler(lView[INJECTOR]);
+    initializeAnimationQueueScheduler(lView[INJECTOR]);
     return ɵɵanimateLeave; // For chaining
 }
 function runLeaveAnimations(lView, tNode, value) {
@@ -21897,9 +21945,10 @@ function ɵɵanimateLeaveListener(value) {
     // So we don't have an early return here.
     const lView = getLView();
     const tNode = getCurrentTNode();
+    cancelLeavingNodes(tNode, lView);
     allLeavingAnimations.add(lView);
     addAnimationToLView(getLViewLeaveAnimations(lView), tNode, () => runLeaveAnimationFunction(lView, tNode, value));
-    enableAnimationQueueScheduler(lView[INJECTOR]);
+    initializeAnimationQueueScheduler(lView[INJECTOR]);
     return ɵɵanimateLeaveListener; // For chaining
 }
 /**
@@ -21940,35 +21989,6 @@ function runLeaveAnimationFunction(lView, tNode, value) {
     // Ensure cleanup if the LView is destroyed before the animation runs.
     return { promise, resolve };
 }
-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
@@ -22018,10 +22038,13 @@ function ɵɵcontrolCreate() {
     else if (tNode.flags & 4096 /* TNodeFlags.isFormCheckboxControl */) {
         listenToCustomControl(lView, tNode, control, 'checked');
     }
+    else if (tNode.flags & 8192 /* TNodeFlags.isInteropControl */) {
+        control.ɵinteropControlCreate();
+    }
     else {
         listenToNativeControl(lView, tNode, control);
     }
-    control.register();
+    control.ɵregister();
 }
 /**
  * Updates a `field` property, and possibly other form control properties, on the current element.
@@ -22051,6 +22074,9 @@ function ɵɵcontrol(value, sanitizer) {
         else if (tNode.flags & 4096 /* TNodeFlags.isFormCheckboxControl */) {
             updateCustomControl(tNode, lView, control, 'checked');
         }
+        else if (tNode.flags & 8192 /* TNodeFlags.isInteropControl */) {
+            control.ɵinteropControlUpdate();
+        }
         else {
             updateNativeControl(tNode, lView, control);
         }
@@ -22091,12 +22117,16 @@ function getControlDirectiveFirstCreatePass(tView, tNode, lView) {
             return control;
         }
     }
+    if (control.ɵhasInteropControl) {
+        tNode.flags |= 8192 /* TNodeFlags.isInteropControl */;
+        return control;
+    }
     if (isNativeControl(tNode)) {
         if (isNumericInput(tNode)) {
-            tNode.flags |= 8192 /* TNodeFlags.isNativeNumericControl */;
+            tNode.flags |= 16384 /* TNodeFlags.isNativeNumericControl */;
         }
         if (isTextControl(tNode)) {
-            tNode.flags |= 16384 /* TNodeFlags.isNativeTextControl */;
+            tNode.flags |= 32768 /* TNodeFlags.isNativeTextControl */;
         }
         return control;
     }
@@ -22155,7 +22185,9 @@ function listenToCustomControl(lView, tNode, control, modelName) {
     const componentIndex = tNode.directiveStart + tNode.componentOffset;
     const outputName = modelName + 'Change';
     listenToOutput(tNode, lView, componentIndex, outputName, outputName, wrapListener(tNode, lView, (newValue) => {
-        control.state().value.set(newValue);
+        const state = control.state();
+        state.value.set(newValue);
+        state.markAsDirty();
     }));
     const tView = getTView();
     const componentDef = tView.data[componentIndex];
@@ -22185,12 +22217,12 @@ function listenToNativeControl(lView, tNode, control) {
     const renderer = lView[RENDERER];
     const inputListener = () => {
         const element = getNativeByTNode(tNode, lView);
-        const value = control.state().value;
-        value.set(getNativeControlValue(element, value));
+        const state = control.state();
+        state.value.set(getNativeControlValue(element, state.value));
+        state.markAsDirty();
     };
     listenToDomEvent(tNode, tView, lView, undefined, renderer, 'input', inputListener, wrapListener(tNode, lView, inputListener));
     const blurListener = () => {
-        // TODO: https://github.com/orgs/angular/projects/60/views/1?pane=issue&itemId=131860538
         control.state().markAsTouched();
     };
     listenToDomEvent(tNode, tView, lView, undefined, renderer, 'blur', blurListener, wrapListener(tNode, lView, blurListener));
@@ -22214,17 +22246,18 @@ function updateCustomControl(tNode, lView, control, modelName) {
     // * cache which inputs exist.
     writeToDirectiveInput(componentDef, component, modelName, state.value());
     maybeWriteToDirectiveInput(componentDef, component, 'errors', state.errors);
+    maybeWriteToDirectiveInput(componentDef, component, 'invalid', state.invalid);
     maybeWriteToDirectiveInput(componentDef, component, 'disabled', state.disabled);
     maybeWriteToDirectiveInput(componentDef, component, 'disabledReasons', state.disabledReasons);
+    maybeWriteToDirectiveInput(componentDef, component, 'name', state.name);
+    maybeWriteToDirectiveInput(componentDef, component, 'readonly', state.readonly);
+    maybeWriteToDirectiveInput(componentDef, component, 'touched', state.touched);
     maybeWriteToDirectiveInput(componentDef, component, 'max', state.max);
     maybeWriteToDirectiveInput(componentDef, component, 'maxLength', state.maxLength);
     maybeWriteToDirectiveInput(componentDef, component, 'min', state.min);
     maybeWriteToDirectiveInput(componentDef, component, 'minLength', state.minLength);
-    maybeWriteToDirectiveInput(componentDef, component, 'name', state.name);
     maybeWriteToDirectiveInput(componentDef, component, 'pattern', state.pattern);
-    maybeWriteToDirectiveInput(componentDef, component, 'readonly', state.readonly);
     maybeWriteToDirectiveInput(componentDef, component, 'required', state.required);
-    maybeWriteToDirectiveInput(componentDef, component, 'touched', state.touched);
 }
 /**
  * Writes the specified value to a directive input if the input exists.
@@ -22235,7 +22268,7 @@ function updateCustomControl(tNode, lView, control, modelName) {
  * @param source A function that returns the value to write.
  */
 function maybeWriteToDirectiveInput(componentDef, component, inputName, source) {
-    if (inputName in componentDef.inputs) {
+    if (source && inputName in componentDef.inputs) {
         writeToDirectiveInput(componentDef, component, inputName, source());
     }
 }
@@ -22256,14 +22289,24 @@ function updateNativeControl(tNode, lView, control) {
     renderer.setAttribute(input, 'name', state.name());
     setBooleanAttribute(renderer, input, 'disabled', state.disabled());
     setBooleanAttribute(renderer, input, 'readonly', state.readonly());
-    setBooleanAttribute(renderer, input, 'required', state.required());
-    if (tNode.flags & 8192 /* TNodeFlags.isNativeNumericControl */) {
-        setOptionalAttribute(renderer, input, 'max', state.max());
-        setOptionalAttribute(renderer, input, 'min', state.min());
+    if (state.required) {
+        setBooleanAttribute(renderer, input, 'required', state.required());
+    }
+    if (tNode.flags & 16384 /* TNodeFlags.isNativeNumericControl */) {
+        if (state.max) {
+            setOptionalAttribute(renderer, input, 'max', state.max());
+        }
+        if (state.min) {
+            setOptionalAttribute(renderer, input, 'min', state.min());
+        }
     }
-    if (tNode.flags & 16384 /* TNodeFlags.isNativeTextControl */) {
-        setOptionalAttribute(renderer, input, 'maxLength', state.maxLength());
-        setOptionalAttribute(renderer, input, 'minLength', state.minLength());
+    if (tNode.flags & 32768 /* TNodeFlags.isNativeTextControl */) {
+        if (state.maxLength) {
+            setOptionalAttribute(renderer, input, 'maxLength', state.maxLength());
+        }
+        if (state.minLength) {
+            setOptionalAttribute(renderer, input, 'minLength', state.minLength());
+        }
     }
 }
 /** Checks if a given value is a Date or null */
@@ -23633,7 +23676,7 @@ function plural(val) {
         return 1;
     return 5;
 }
-var localeEn = ["en", [["a", "p"], ["AM", "PM"]], [["AM", "PM"]], [["S", "M", "T", "W", "T", "F", "S"], ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]], u, [["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"], ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]], u, [["B", "A"], ["BC", "AD"], ["Before Christ", "Anno Domini"]], 0, [6, 0], ["M/d/yy", "MMM d, y", "MMMM d, y", "EEEE, MMMM d, y"], ["h:mm a", "h:mm:ss a", "h:mm:ss a z", "h:mm:ss a zzzz"], ["{1}, {0}", u, "{1} 'at' {0}", u], [".", ",", ";", "%", "+", "-", "E", "×", "‰", "∞", "NaN", ":"], ["#,##0.###", "#,##0%", "¤#,##0.00", "#E0"], "USD", "$", "US Dollar", {}, "ltr", plural];
+var localeEn = ["en", [["a", "p"], ["AM", "PM"]], [["AM", "PM"]], [["S", "M", "T", "W", "T", "F", "S"], ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]], u, [["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"], ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]], u, [["B", "A"], ["BC", "AD"], ["Before Christ", "Anno Domini"]], 0, [6, 0], ["M/d/yy", "MMM d, y", "MMMM d, y", "EEEE, MMMM d, y"], ["h:mm a", "h:mm:ss a", "h:mm:ss a z", "h:mm:ss a zzzz"], ["{1}, {0}", u, u, u], [".", ",", ";", "%", "+", "-", "E", "×", "‰", "∞", "NaN", ":"], ["#,##0.###", "#,##0%", "¤#,##0.00", "#E0"], "USD", "$", "US Dollar", {}, "ltr", plural];
 
 /**
  * This const is used to store the locale data registered with `registerLocaleData`