@angular/core 17.0.0-next.4 → 17.0.0-next.6

package/fesm2022/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v17.0.0-next.4
+ * @license Angular v17.0.0-next.6
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -333,6 +333,11 @@ function assertDomNode(node) {
         throwError(`The provided value must be an instance of a DOM Node but got ${stringify(node)}`);
     }
 }
+function assertElement(node) {
+    if (!(node instanceof Element)) {
+        throwError(`The provided value must be an element but got ${stringify(node)}`);
+    }
+}
 function assertIndexInRange(arr, index) {
     assertDefined(arr, 'Array must be defined.');
     const maxLen = arr.length;
@@ -2264,7 +2269,7 @@ function getFactoryDef(type, throwNotFound) {
  *
  * This can be used to auto-unwrap signals in various cases, or to auto-wrap non-signal values.
  */
-const SIGNAL = Symbol('SIGNAL');
+const SIGNAL = /* @__PURE__ */ Symbol('SIGNAL');
 /**
  * Checks if the given `value` is a reactive `Signal`.
  *
@@ -2445,7 +2450,9 @@ function consumerAfterComputation(node, prevConsumer) {
         }
     }
     // Truncate the producer tracking arrays.
-    for (let i = node.nextProducerIndex; i < node.producerNode.length; i++) {
+    // Perf note: this is essentially truncating the length to `node.nextProducerIndex`, but
+    // benchmarking has shown that individual pop operations are faster.
+    while (node.producerNode.length > node.nextProducerIndex) {
         node.producerNode.pop();
         node.producerLastReadVersion.pop();
         node.producerIndexOfThis.pop();
@@ -2519,6 +2526,9 @@ function producerAddLiveConsumer(node, consumer, indexOfThis) {
 function producerRemoveLiveConsumerAtIndex(node, idx) {
     assertProducerNode(node);
     assertConsumerNode(node);
+    if (typeof ngDevMode !== 'undefined' && ngDevMode && idx >= node.liveConsumerNode.length) {
+        throw new Error(`Assertion error: active consumer index ${idx} is out of bounds of ${node.liveConsumerNode.length} consumers)`);
+    }
     if (node.liveConsumerNode.length === 1) {
         // When removing the last live consumer, we will no longer be live. We need to remove
         // ourselves from our producers' tracking (which may cause consumer-producers to lose
@@ -2583,60 +2593,65 @@ function computed(computation, options) {
  * A dedicated symbol used before a computed value has been calculated for the first time.
  * Explicitly typed as `any` so we can use it as signal's value.
  */
-const UNSET = Symbol('UNSET');
+const UNSET = /* @__PURE__ */ Symbol('UNSET');
 /**
  * A dedicated symbol used in place of a computed signal value to indicate that a given computation
  * is in progress. Used to detect cycles in computation chains.
  * Explicitly typed as `any` so we can use it as signal's value.
  */
-const COMPUTING = Symbol('COMPUTING');
+const COMPUTING = /* @__PURE__ */ Symbol('COMPUTING');
 /**
  * A dedicated symbol used in place of a computed signal value to indicate that a given computation
  * failed. The thrown error is cached until the computation gets dirty again.
  * Explicitly typed as `any` so we can use it as signal's value.
  */
-const ERRORED = Symbol('ERRORED');
-const COMPUTED_NODE = {
-    ...REACTIVE_NODE,
-    value: UNSET,
-    dirty: true,
-    error: null,
-    equal: defaultEquals,
-    producerMustRecompute(node) {
-        // Force a recomputation if there's no current value, or if the current value is in the process
-        // of being calculated (which should throw an error).
-        return node.value === UNSET || node.value === COMPUTING;
-    },
-    producerRecomputeValue(node) {
-        if (node.value === COMPUTING) {
-            // Our computation somehow led to a cyclic read of itself.
-            throw new Error('Detected cycle in computations.');
-        }
-        const oldValue = node.value;
-        node.value = COMPUTING;
-        const prevConsumer = consumerBeforeComputation(node);
-        let newValue;
-        try {
-            newValue = node.computation();
-        }
-        catch (err) {
-            newValue = ERRORED;
-            node.error = err;
-        }
-        finally {
-            consumerAfterComputation(node, prevConsumer);
-        }
-        if (oldValue !== UNSET && oldValue !== ERRORED && newValue !== ERRORED &&
-            node.equal(oldValue, newValue)) {
-            // No change to `valueVersion` - old and new values are
-            // semantically equivalent.
-            node.value = oldValue;
-            return;
-        }
-        node.value = newValue;
-        node.version++;
-    },
-};
+const ERRORED = /* @__PURE__ */ Symbol('ERRORED');
+// Note: Using an IIFE here to ensure that the spread assignment is not considered
+// a side-effect, ending up preserving `COMPUTED_NODE` and `REACTIVE_NODE`.
+// TODO: remove when https://github.com/evanw/esbuild/issues/3392 is resolved.
+const COMPUTED_NODE = /* @__PURE__ */ (() => {
+    return {
+        ...REACTIVE_NODE,
+        value: UNSET,
+        dirty: true,
+        error: null,
+        equal: defaultEquals,
+        producerMustRecompute(node) {
+            // Force a recomputation if there's no current value, or if the current value is in the
+            // process of being calculated (which should throw an error).
+            return node.value === UNSET || node.value === COMPUTING;
+        },
+        producerRecomputeValue(node) {
+            if (node.value === COMPUTING) {
+                // Our computation somehow led to a cyclic read of itself.
+                throw new Error('Detected cycle in computations.');
+            }
+            const oldValue = node.value;
+            node.value = COMPUTING;
+            const prevConsumer = consumerBeforeComputation(node);
+            let newValue;
+            try {
+                newValue = node.computation();
+            }
+            catch (err) {
+                newValue = ERRORED;
+                node.error = err;
+            }
+            finally {
+                consumerAfterComputation(node, prevConsumer);
+            }
+            if (oldValue !== UNSET && oldValue !== ERRORED && newValue !== ERRORED &&
+                node.equal(oldValue, newValue)) {
+                // No change to `valueVersion` - old and new values are
+                // semantically equivalent.
+                node.value = oldValue;
+                return;
+            }
+            node.value = newValue;
+            node.version++;
+        },
+    };
+})();
 
 function defaultThrowError() {
     throw new Error();
@@ -2681,11 +2696,16 @@ function setPostSignalSetFn(fn) {
     postSignalSetFn = fn;
     return prev;
 }
-const SIGNAL_NODE = {
-    ...REACTIVE_NODE,
-    equal: defaultEquals,
-    readonlyFn: undefined,
-};
+// Note: Using an IIFE here to ensure that the spread assignment is not considered
+// a side-effect, ending up preserving `COMPUTED_NODE` and `REACTIVE_NODE`.
+// TODO: remove when https://github.com/evanw/esbuild/issues/3392 is resolved.
+const SIGNAL_NODE = /* @__PURE__ */ (() => {
+    return {
+        ...REACTIVE_NODE,
+        equal: defaultEquals,
+        readonlyFn: undefined,
+    };
+})();
 function signalValueChanged(node) {
     node.version++;
     producerNotifyConsumers(node);
@@ -2754,7 +2774,27 @@ function watch(fn, schedule, allowSignalWrites) {
     const registerOnCleanup = (cleanupFn) => {
         node.cleanupFn = cleanupFn;
     };
+    function isWatchNodeDestroyed(node) {
+        return node.fn === null && node.schedule === null;
+    }
+    function destroyWatchNode(node) {
+        if (!isWatchNodeDestroyed(node)) {
+            consumerDestroy(node); // disconnect watcher from the reactive graph
+            node.cleanupFn();
+            // nullify references to the integration functions to mark node as destroyed
+            node.fn = null;
+            node.schedule = null;
+            node.cleanupFn = NOOP_CLEANUP_FN;
+        }
+    }
     const run = () => {
+        if (node.fn === null) {
+            // trying to run a destroyed watch is noop
+            return;
+        }
+        if (isInNotificationPhase()) {
+            throw new Error(`Schedulers cannot synchronously execute watches while scheduling.`);
+        }
         node.dirty = false;
         if (node.hasRun && !consumerPollProducersForChange(node)) {
             return;
@@ -2774,20 +2814,28 @@ function watch(fn, schedule, allowSignalWrites) {
         notify: () => consumerMarkDirty(node),
         run,
         cleanup: () => node.cleanupFn(),
+        destroy: () => destroyWatchNode(node),
     };
     return node.ref;
 }
 const NOOP_CLEANUP_FN = () => { };
-const WATCH_NODE = {
-    ...REACTIVE_NODE,
-    consumerIsAlwaysLive: true,
-    consumerAllowSignalWrites: false,
-    consumerMarkedDirty: (node) => {
-        node.schedule(node.ref);
-    },
-    hasRun: false,
-    cleanupFn: NOOP_CLEANUP_FN,
-};
+// Note: Using an IIFE here to ensure that the spread assignment is not considered
+// a side-effect, ending up preserving `COMPUTED_NODE` and `REACTIVE_NODE`.
+// TODO: remove when https://github.com/evanw/esbuild/issues/3392 is resolved.
+const WATCH_NODE = /* @__PURE__ */ (() => {
+    return {
+        ...REACTIVE_NODE,
+        consumerIsAlwaysLive: true,
+        consumerAllowSignalWrites: false,
+        consumerMarkedDirty: (node) => {
+            if (node.schedule !== null) {
+                node.schedule(node.ref);
+            }
+        },
+        hasRun: false,
+        cleanupFn: NOOP_CLEANUP_FN,
+    };
+})();
 
 function setAlternateWeakRefImpl(impl) {
     // TODO: remove this function
@@ -3082,6 +3130,20 @@ function clearViewRefreshFlag(lView) {
         updateViewsToRefresh(lView, -1);
     }
 }
+/**
+ * Walks up the LView hierarchy.
+ * @param nestingLevel Number of times to walk up in hierarchy.
+ * @param currentView View from which to start the lookup.
+ */
+function walkUpViews(nestingLevel, currentView) {
+    while (nestingLevel > 0) {
+        ngDevMode &&
+            assertDefined(currentView[DECLARATION_VIEW], 'Declaration view should be defined if nesting level is greater than 0.');
+        currentView = currentView[DECLARATION_VIEW];
+        nestingLevel--;
+    }
+    return currentView;
+}
 /**
  * Updates the `DESCENDANT_VIEWS_TO_REFRESH` counter on the parents of the `LView` as well as the
  * parents above that whose
@@ -3583,15 +3645,6 @@ function nextContextImpl(level) {
         walkUpViews(level, instructionState.lFrame.contextLView);
     return contextLView[CONTEXT];
 }
-function walkUpViews(nestingLevel, currentView) {
-    while (nestingLevel > 0) {
-        ngDevMode &&
-            assertDefined(currentView[DECLARATION_VIEW], 'Declaration view should be defined if nesting level is greater than 0.');
-        currentView = currentView[DECLARATION_VIEW];
-        nestingLevel--;
-    }
-    return currentView;
-}
 /**
  * Gets the currently selected element index.
  *
@@ -7272,7 +7325,7 @@ function isPlatformBrowser(injector) {
  *
  * @deprecated For migration purposes only, to be removed soon.
  */
-const USE_RUNTIME_DEPS_TRACKER_FOR_JIT = false;
+const USE_RUNTIME_DEPS_TRACKER_FOR_JIT = true;
 /**
  * An implementation of DepsTrackerApi which will be used for JIT and local compilation.
  */
@@ -7320,12 +7373,13 @@ class DepsTracker {
                 dependencies: [
                     ...scope.compilation.directives,
                     ...scope.compilation.pipes,
+                    ...scope.compilation.ngModules,
                 ]
             };
         }
         else {
             if (!this.ownerNgModule.has(type)) {
-                return { dependencies: [] };
+                throw new RuntimeError(1001 /* RuntimeErrorCode.RUNTIME_DEPS_ORPHAN_COMPONENT */, `Orphan component found! Trying to render the component ${type.name} without first loading the NgModule that declares it. Make sure that you import the component's NgModule in the NgModule or the standalone component in which you are trying to render this component. Also make sure the way the app is bundled and served always includes the component's NgModule before the component.`);
             }
             const scope = this.getNgModuleScope(this.ownerNgModule.get(type));
             if (scope.compilation.isPoisoned) {
@@ -7353,12 +7407,8 @@ class DepsTracker {
     }
     /** @override */
     clearScopeCacheFor(type) {
-        if (isNgModule(type)) {
-            this.ngModulesScopeCache.delete(type);
-        }
-        else if (isComponent(type)) {
-            this.standaloneComponentsScopeCache.delete(type);
-        }
+        this.ngModulesScopeCache.delete(type);
+        this.standaloneComponentsScopeCache.delete(type);
     }
     /** @override */
     getNgModuleScope(type) {
@@ -7432,6 +7482,12 @@ class DepsTracker {
                 // check for it.
                 addSet(exportedScope.exported.directives, scope.exported.directives);
                 addSet(exportedScope.exported.pipes, scope.exported.pipes);
+                // Some test toolings which run in JIT mode depend on this behavior that the exported scope
+                // should also be present in the compilation scope, even though AoT does not support this
+                // and it is also in odds with NgModule metadata definitions. Without this some tests in
+                // Google will fail.
+                addSet(exportedScope.exported.directives, scope.compilation.directives);
+                addSet(exportedScope.exported.pipes, scope.compilation.pipes);
             }
             else if (isPipe(exported)) {
                 scope.exported.pipes.add(exported);
@@ -7457,9 +7513,10 @@ class DepsTracker {
                 // Standalone components are always able to self-reference.
                 directives: new Set([type]),
                 pipes: new Set(),
+                ngModules: new Set(),
             },
         };
-        for (const rawImport of rawImports ?? []) {
+        for (const rawImport of flatten(rawImports ?? [])) {
             const imported = resolveForwardRef(rawImport);
             try {
                 verifyStandaloneImport(imported, type);
@@ -7470,6 +7527,7 @@ class DepsTracker {
                 return ans;
             }
             if (isNgModule(imported)) {
+                ans.compilation.ngModules.add(imported);
                 const importedScope = this.getNgModuleScope(imported);
                 // Short-circuit if an imported NgModule has corrupted exported scope.
                 if (importedScope.exported.isPoisoned) {
@@ -10849,7 +10907,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('17.0.0-next.4');
+const VERSION = new Version('17.0.0-next.6');
 
 // This default value is when checking the hierarchy for a token.
 //
@@ -11535,10 +11593,77 @@ function shouldBeIgnoredByZone(applyArgs) {
 
 // Public API for Zone
 
+/**
+ * The phase to run an `afterRender` or `afterNextRender` callback in.
+ *
+ * Callbacks in the same phase run in the order they are registered. Phases run in the
+ * following order after each render:
+ *
+ *   1. `AfterRenderPhase.EarlyRead`
+ *   2. `AfterRenderPhase.Write`
+ *   3. `AfterRenderPhase.MixedReadWrite`
+ *   4. `AfterRenderPhase.Read`
+ *
+ * Angular is unable to verify or enforce that phases are used correctly, and instead
+ * relies on each developer to follow the guidelines documented for each value and
+ * carefully choose the appropriate one, refactoring their code if necessary. By doing
+ * so, Angular is better able to minimize the performance degradation associated with
+ * manual DOM access, ensuring the best experience for the end users of your application
+ * or library.
+ *
+ * @developerPreview
+ */
+var AfterRenderPhase;
+(function (AfterRenderPhase) {
+    /**
+     * Use `AfterRenderPhase.EarlyRead` for callbacks that only need to **read** from the
+     * DOM before a subsequent `AfterRenderPhase.Write` callback, for example to perform
+     * custom layout that the browser doesn't natively support. **Never** use this phase
+     * for callbacks that can write to the DOM or when `AfterRenderPhase.Read` is adequate.
+     *
+     * <div class="alert is-important">
+     *
+     * Using this value can degrade performance.
+     * Instead, prefer using built-in browser functionality when possible.
+     *
+     * </div>
+     */
+    AfterRenderPhase[AfterRenderPhase["EarlyRead"] = 0] = "EarlyRead";
+    /**
+     * Use `AfterRenderPhase.Write` for callbacks that only **write** to the DOM. **Never**
+     * use this phase for callbacks that can read from the DOM.
+     */
+    AfterRenderPhase[AfterRenderPhase["Write"] = 1] = "Write";
+    /**
+     * Use `AfterRenderPhase.MixedReadWrite` for callbacks that read from or write to the
+     * DOM, that haven't been refactored to use a different phase. **Never** use this phase
+     * for callbacks that can use a different phase instead.
+     *
+     * <div class="alert is-critical">
+     *
+     * Using this value can **significantly** degrade performance.
+     * Instead, prefer refactoring into multiple callbacks using a more specific phase.
+     *
+     * </div>
+     */
+    AfterRenderPhase[AfterRenderPhase["MixedReadWrite"] = 2] = "MixedReadWrite";
+    /**
+     * Use `AfterRenderPhase.Read` for callbacks that only **read** from the DOM. **Never**
+     * use this phase for callbacks that can write to the DOM.
+     */
+    AfterRenderPhase[AfterRenderPhase["Read"] = 3] = "Read";
+})(AfterRenderPhase || (AfterRenderPhase = {}));
 /**
  * Register a callback to be invoked each time the application
  * finishes rendering.
  *
+ * <div class="alert is-critical">
+ *
+ * You should always explicitly specify a non-default [phase](api/core/AfterRenderPhase), or you
+ * risk significant performance degradation.
+ *
+ * </div>
+ *
  * Note that the callback will run
  * - in the order it was registered
  * - once per render
@@ -11569,7 +11694,7 @@ function shouldBeIgnoredByZone(applyArgs) {
  *   constructor() {
  *     afterRender(() => {
  *       console.log('content height: ' + this.contentRef.nativeElement.scrollHeight);
- *     });
+ *     }, {phase: AfterRenderPhase.Read});
  *   }
  * }
  * ```
@@ -11590,7 +11715,8 @@ function afterRender(callback, options) {
     const callbackHandler = afterRenderEventManager.handler ??= new AfterRenderCallbackHandlerImpl();
     const ngZone = injector.get(NgZone);
     const errorHandler = injector.get(ErrorHandler, null, { optional: true });
-    const instance = new AfterRenderCallback(ngZone, errorHandler, callback);
+    const phase = options?.phase ?? AfterRenderPhase.MixedReadWrite;
+    const instance = new AfterRenderCallback(ngZone, errorHandler, phase, callback);
     destroy = () => {
         callbackHandler.unregister(instance);
         unregisterFn();
@@ -11602,6 +11728,13 @@ function afterRender(callback, options) {
  * Register a callback to be invoked the next time the application
  * finishes rendering.
  *
+ * <div class="alert is-critical">
+ *
+ * You should always explicitly specify a non-default [phase](api/core/AfterRenderPhase), or you
+ * risk significant performance degradation.
+ *
+ * </div>
+ *
  * Note that the callback will run
  * - in the order it was registered
  * - on browser platforms only
@@ -11633,7 +11766,7 @@ function afterRender(callback, options) {
  *   constructor() {
  *     afterNextRender(() => {
  *       this.chart = new MyChart(this.chartRef.nativeElement);
- *     });
+ *     }, {phase: AfterRenderPhase.Write});
  *   }
  * }
  * ```
@@ -11654,7 +11787,8 @@ function afterNextRender(callback, options) {
     const callbackHandler = afterRenderEventManager.handler ??= new AfterRenderCallbackHandlerImpl();
     const ngZone = injector.get(NgZone);
     const errorHandler = injector.get(ErrorHandler, null, { optional: true });
-    const instance = new AfterRenderCallback(ngZone, errorHandler, () => {
+    const phase = options?.phase ?? AfterRenderPhase.MixedReadWrite;
+    const instance = new AfterRenderCallback(ngZone, errorHandler, phase, () => {
         destroy?.();
         callback();
     });
@@ -11669,9 +11803,10 @@ function afterNextRender(callback, options) {
  * A wrapper around a function to be used as an after render callback.
  */
 class AfterRenderCallback {
-    constructor(zone, errorHandler, callbackFn) {
+    constructor(zone, errorHandler, phase, callbackFn) {
         this.zone = zone;
         this.errorHandler = errorHandler;
+        this.phase = phase;
         this.callbackFn = callbackFn;
     }
     invoke() {
@@ -11690,7 +11825,13 @@ class AfterRenderCallback {
 class AfterRenderCallbackHandlerImpl {
     constructor() {
         this.executingCallbacks = false;
-        this.callbacks = new Set();
+        this.buckets = {
+            // Note: the order of these keys controls the order the phases are run.
+            [AfterRenderPhase.EarlyRead]: new Set(),
+            [AfterRenderPhase.Write]: new Set(),
+            [AfterRenderPhase.MixedReadWrite]: new Set(),
+            [AfterRenderPhase.Read]: new Set(),
+        };
         this.deferredCallbacks = new Set();
     }
     validateBegin() {
@@ -11703,26 +11844,30 @@ class AfterRenderCallbackHandlerImpl {
     register(callback) {
         // If we're currently running callbacks, new callbacks should be deferred
         // until the next render operation.
-        const target = this.executingCallbacks ? this.deferredCallbacks : this.callbacks;
+        const target = this.executingCallbacks ? this.deferredCallbacks : this.buckets[callback.phase];
         target.add(callback);
     }
     unregister(callback) {
-        this.callbacks.delete(callback);
+        this.buckets[callback.phase].delete(callback);
         this.deferredCallbacks.delete(callback);
     }
     execute() {
         this.executingCallbacks = true;
-        for (const callback of this.callbacks) {
-            callback.invoke();
+        for (const bucket of Object.values(this.buckets)) {
+            for (const callback of bucket) {
+                callback.invoke();
+            }
         }
         this.executingCallbacks = false;
         for (const callback of this.deferredCallbacks) {
-            this.callbacks.add(callback);
+            this.buckets[callback.phase].add(callback);
         }
         this.deferredCallbacks.clear();
     }
     destroy() {
-        this.callbacks.clear();
+        for (const bucket of Object.values(this.buckets)) {
+            bucket.clear();
+        }
         this.deferredCallbacks.clear();
     }
 }
@@ -17636,7 +17781,6 @@ class DefaultIterableDiffer {
             this.length = index;
         }
         this._truncate(record);
-        // @ts-expect-error overwriting a readonly member
         this.collection = collection;
         return this.isDirty;
     }
@@ -18584,67 +18728,6 @@ const defaultKeyValueDiffers = new KeyValueDiffers(keyValDiff);
  * Change detection enables data binding in Angular.
  */
 
-function createAndRenderEmbeddedLView(declarationLView, templateTNode, context, options) {
-    const embeddedTView = templateTNode.tView;
-    ngDevMode && assertDefined(embeddedTView, 'TView must be defined for a template node.');
-    ngDevMode && assertTNodeForLView(templateTNode, declarationLView);
-    // Embedded views follow the change detection strategy of the view they're declared in.
-    const isSignalView = declarationLView[FLAGS] & 4096 /* LViewFlags.SignalView */;
-    const viewFlags = isSignalView ? 4096 /* LViewFlags.SignalView */ : 16 /* LViewFlags.CheckAlways */;
-    const embeddedLView = createLView(declarationLView, embeddedTView, context, viewFlags, null, templateTNode, null, null, null, options?.injector ?? null, options?.dehydratedView ?? null);
-    const declarationLContainer = declarationLView[templateTNode.index];
-    ngDevMode && assertLContainer(declarationLContainer);
-    embeddedLView[DECLARATION_LCONTAINER] = declarationLContainer;
-    const declarationViewLQueries = declarationLView[QUERIES];
-    if (declarationViewLQueries !== null) {
-        embeddedLView[QUERIES] = declarationViewLQueries.createEmbeddedView(embeddedTView);
-    }
-    // execute creation mode of a view
-    renderView(embeddedTView, embeddedLView, context);
-    return embeddedLView;
-}
-function getLViewFromLContainer(lContainer, index) {
-    const adjustedIndex = CONTAINER_HEADER_OFFSET + index;
-    // avoid reading past the array boundaries
-    if (adjustedIndex < lContainer.length) {
-        const lView = lContainer[adjustedIndex];
-        ngDevMode && assertLView(lView);
-        return lView;
-    }
-    return undefined;
-}
-/**
- * Returns whether an elements that belong to a view should be
- * inserted into the DOM. For client-only cases, DOM elements are
- * always inserted. For hydration cases, we check whether serialized
- * info is available for a view and the view is not in a "skip hydration"
- * block (in which case view contents was re-created, thus needing insertion).
- */
-function shouldAddViewToDom(tNode, dehydratedView) {
-    return !dehydratedView || hasInSkipHydrationBlockFlag(tNode);
-}
-function addLViewToLContainer(lContainer, lView, index, addToDOM = true) {
-    const tView = lView[TVIEW];
-    // insert to the view tree so the new view can be change-detected
-    insertView(tView, lView, lContainer, index);
-    // insert to the view to the DOM tree
-    if (addToDOM) {
-        const beforeNode = getBeforeNodeForView(index, lContainer);
-        const renderer = lView[RENDERER];
-        const parentRNode = nativeParentNode(renderer, lContainer[NATIVE]);
-        if (parentRNode !== null) {
-            addViewToDOM(tView, lContainer[T_HOST], renderer, lView, parentRNode, beforeNode);
-        }
-    }
-}
-function removeLViewFromLContainer(lContainer, index) {
-    const lView = detachView(lContainer, index);
-    if (lView !== undefined) {
-        destroyLView(lView[TVIEW], lView);
-    }
-    return lView;
-}
-
 const AT_THIS_LOCATION = '<-- AT THIS LOCATION';
 /**
  * Retrieves a user friendly string for a given TNodeType for use in
@@ -19005,6 +19088,95 @@ function shorten(input, maxLength = 50) {
     return input.length > maxLength ? `${input.substring(0, maxLength - 1)}…` : input;
 }
 
+/**
+ * Removes all dehydrated views from a given LContainer:
+ * both in internal data structure, as well as removing
+ * corresponding DOM nodes that belong to that dehydrated view.
+ */
+function removeDehydratedViews(lContainer) {
+    const views = lContainer[DEHYDRATED_VIEWS] ?? [];
+    const parentLView = lContainer[PARENT];
+    const renderer = parentLView[RENDERER];
+    for (const view of views) {
+        removeDehydratedView(view, renderer);
+        ngDevMode && ngDevMode.dehydratedViewsRemoved++;
+    }
+    // Reset the value to an empty array to indicate that no
+    // further processing of dehydrated views is needed for
+    // this view container (i.e. do not trigger the lookup process
+    // once again in case a `ViewContainerRef` is created later).
+    lContainer[DEHYDRATED_VIEWS] = EMPTY_ARRAY;
+}
+/**
+ * Helper function to remove all nodes from a dehydrated view.
+ */
+function removeDehydratedView(dehydratedView, renderer) {
+    let nodesRemoved = 0;
+    let currentRNode = dehydratedView.firstChild;
+    if (currentRNode) {
+        const numNodes = dehydratedView.data[NUM_ROOT_NODES];
+        while (nodesRemoved < numNodes) {
+            ngDevMode && validateSiblingNodeExists(currentRNode);
+            const nextSibling = currentRNode.nextSibling;
+            nativeRemoveNode(renderer, currentRNode, false);
+            currentRNode = nextSibling;
+            nodesRemoved++;
+        }
+    }
+}
+/**
+ * Walks over all views within this LContainer invokes dehydrated views
+ * cleanup function for each one.
+ */
+function cleanupLContainer(lContainer) {
+    removeDehydratedViews(lContainer);
+    for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
+        cleanupLView(lContainer[i]);
+    }
+}
+/**
+ * Walks over `LContainer`s and components registered within
+ * this LView and invokes dehydrated views cleanup function for each one.
+ */
+function cleanupLView(lView) {
+    const tView = lView[TVIEW];
+    for (let i = HEADER_OFFSET; i < tView.bindingStartIndex; i++) {
+        if (isLContainer(lView[i])) {
+            const lContainer = lView[i];
+            cleanupLContainer(lContainer);
+        }
+        else if (isLView(lView[i])) {
+            // This is a component, enter the `cleanupLView` recursively.
+            cleanupLView(lView[i]);
+        }
+    }
+}
+/**
+ * Walks over all views registered within the ApplicationRef and removes
+ * all dehydrated views from all `LContainer`s along the way.
+ */
+function cleanupDehydratedViews(appRef) {
+    const viewRefs = appRef._views;
+    for (const viewRef of viewRefs) {
+        const lNode = getLNodeForHydration(viewRef);
+        // An `lView` might be `null` if a `ViewRef` represents
+        // an embedded view (not a component view).
+        if (lNode !== null && lNode[HOST] !== null) {
+            if (isLView(lNode)) {
+                cleanupLView(lNode);
+            }
+            else {
+                // Cleanup in the root component view
+                const componentLView = lNode[HOST];
+                cleanupLView(componentLView);
+                // Cleanup in all views within this view container
+                cleanupLContainer(lNode);
+            }
+            ngDevMode && ngDevMode.dehydratedViewsCleanupRuns++;
+        }
+    }
+}
+
 /**
  * Regexp that extracts a reference node information from the compressed node location.
  * The reference node is represented as either:
@@ -19327,6 +19499,561 @@ function calcPathForNode(tNode, lView) {
     return path;
 }
 
+/**
+ * Given a current DOM node and a serialized information about the views
+ * in a container, walks over the DOM structure, collecting the list of
+ * dehydrated views.
+ */
+function locateDehydratedViewsInContainer(currentRNode, serializedViews) {
+    const dehydratedViews = [];
+    for (const serializedView of serializedViews) {
+        // Repeats a view multiple times as needed, based on the serialized information
+        // (for example, for *ngFor-produced views).
+        for (let i = 0; i < (serializedView[MULTIPLIER] ?? 1); i++) {
+            const view = {
+                data: serializedView,
+                firstChild: null,
+            };
+            if (serializedView[NUM_ROOT_NODES] > 0) {
+                // Keep reference to the first node in this view,
+                // so it can be accessed while invoking template instructions.
+                view.firstChild = currentRNode;
+                // Move over to the next node after this view, which can
+                // either be a first node of the next view or an anchor comment
+                // node after the last view in a container.
+                currentRNode = siblingAfter(serializedView[NUM_ROOT_NODES], currentRNode);
+            }
+            dehydratedViews.push(view);
+        }
+    }
+    return [currentRNode, dehydratedViews];
+}
+/**
+ * Reference to a function that searches for a matching dehydrated views
+ * stored on a given lContainer.
+ * Returns `null` by default, when hydration is not enabled.
+ */
+let _findMatchingDehydratedViewImpl = (lContainer, template) => null;
+/**
+ * Retrieves the next dehydrated view from the LContainer and verifies that
+ * it matches a given template id (from the TView that was used to create this
+ * instance of a view). If the id doesn't match, that means that we are in an
+ * unexpected state and can not complete the reconciliation process. Thus,
+ * all dehydrated views from this LContainer are removed (including corresponding
+ * DOM nodes) and the rendering is performed as if there were no dehydrated views
+ * in this container.
+ */
+function findMatchingDehydratedViewImpl(lContainer, template) {
+    const views = lContainer[DEHYDRATED_VIEWS];
+    if (!template || views === null || views.length === 0) {
+        return null;
+    }
+    const view = views[0];
+    // Verify whether the first dehydrated view in the container matches
+    // the template id passed to this function (that originated from a TView
+    // that was used to create an instance of an embedded or component views.
+    if (view.data[TEMPLATE_ID] === template) {
+        // If the template id matches - extract the first view and return it.
+        return views.shift();
+    }
+    else {
+        // Otherwise, we are at the state when reconciliation can not be completed,
+        // thus we remove all dehydrated views within this container (remove them
+        // from internal data structures as well as delete associated elements from
+        // the DOM tree).
+        removeDehydratedViews(lContainer);
+        return null;
+    }
+}
+function enableFindMatchingDehydratedViewImpl() {
+    _findMatchingDehydratedViewImpl = findMatchingDehydratedViewImpl;
+}
+function findMatchingDehydratedView(lContainer, template) {
+    return _findMatchingDehydratedViewImpl(lContainer, template);
+}
+
+function createAndRenderEmbeddedLView(declarationLView, templateTNode, context, options) {
+    const embeddedTView = templateTNode.tView;
+    ngDevMode && assertDefined(embeddedTView, 'TView must be defined for a template node.');
+    ngDevMode && assertTNodeForLView(templateTNode, declarationLView);
+    // Embedded views follow the change detection strategy of the view they're declared in.
+    const isSignalView = declarationLView[FLAGS] & 4096 /* LViewFlags.SignalView */;
+    const viewFlags = isSignalView ? 4096 /* LViewFlags.SignalView */ : 16 /* LViewFlags.CheckAlways */;
+    const embeddedLView = createLView(declarationLView, embeddedTView, context, viewFlags, null, templateTNode, null, null, null, options?.injector ?? null, options?.dehydratedView ?? null);
+    const declarationLContainer = declarationLView[templateTNode.index];
+    ngDevMode && assertLContainer(declarationLContainer);
+    embeddedLView[DECLARATION_LCONTAINER] = declarationLContainer;
+    const declarationViewLQueries = declarationLView[QUERIES];
+    if (declarationViewLQueries !== null) {
+        embeddedLView[QUERIES] = declarationViewLQueries.createEmbeddedView(embeddedTView);
+    }
+    // execute creation mode of a view
+    renderView(embeddedTView, embeddedLView, context);
+    return embeddedLView;
+}
+function getLViewFromLContainer(lContainer, index) {
+    const adjustedIndex = CONTAINER_HEADER_OFFSET + index;
+    // avoid reading past the array boundaries
+    if (adjustedIndex < lContainer.length) {
+        const lView = lContainer[adjustedIndex];
+        ngDevMode && assertLView(lView);
+        return lView;
+    }
+    return undefined;
+}
+/**
+ * Returns whether an elements that belong to a view should be
+ * inserted into the DOM. For client-only cases, DOM elements are
+ * always inserted. For hydration cases, we check whether serialized
+ * info is available for a view and the view is not in a "skip hydration"
+ * block (in which case view contents was re-created, thus needing insertion).
+ */
+function shouldAddViewToDom(tNode, dehydratedView) {
+    return !dehydratedView || hasInSkipHydrationBlockFlag(tNode);
+}
+function addLViewToLContainer(lContainer, lView, index, addToDOM = true) {
+    const tView = lView[TVIEW];
+    // insert to the view tree so the new view can be change-detected
+    insertView(tView, lView, lContainer, index);
+    // insert to the view to the DOM tree
+    if (addToDOM) {
+        const beforeNode = getBeforeNodeForView(index, lContainer);
+        const renderer = lView[RENDERER];
+        const parentRNode = nativeParentNode(renderer, lContainer[NATIVE]);
+        if (parentRNode !== null) {
+            addViewToDOM(tView, lContainer[T_HOST], renderer, lView, parentRNode, beforeNode);
+        }
+    }
+}
+function removeLViewFromLContainer(lContainer, index) {
+    const lView = detachView(lContainer, index);
+    if (lView !== undefined) {
+        destroyLView(lView[TVIEW], lView);
+    }
+    return lView;
+}
+
+/**
+ * Represents a container where one or more views can be attached to a component.
+ *
+ * Can contain *host views* (created by instantiating a
+ * component with the `createComponent()` method), and *embedded views*
+ * (created by instantiating a `TemplateRef` with the `createEmbeddedView()` method).
+ *
+ * A view container instance can contain other view containers,
+ * creating a [view hierarchy](guide/glossary#view-hierarchy).
+ *
+ * @usageNotes
+ *
+ * The example below demonstrates how the `createComponent` function can be used
+ * to create an instance of a ComponentRef dynamically and attach it to an ApplicationRef,
+ * so that it gets included into change detection cycles.
+ *
+ * Note: the example uses standalone components, but the function can also be used for
+ * non-standalone components (declared in an NgModule) as well.
+ *
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   selector: 'dynamic',
+ *   template: `<span>This is a content of a dynamic component.</span>`,
+ * })
+ * class DynamicComponent {
+ *   vcr = inject(ViewContainerRef);
+ * }
+ *
+ * @Component({
+ *   standalone: true,
+ *   selector: 'app',
+ *   template: `<main>Hi! This is the main content.</main>`,
+ * })
+ * class AppComponent {
+ *   vcr = inject(ViewContainerRef);
+ *
+ *   ngAfterViewInit() {
+ *     const compRef = this.vcr.createComponent(DynamicComponent);
+ *     compRef.changeDetectorRef.detectChanges();
+ *   }
+ * }
+ * ```
+ *
+ * @see {@link ComponentRef}
+ * @see {@link EmbeddedViewRef}
+ *
+ * @publicApi
+ */
+class ViewContainerRef {
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = injectViewContainerRef; }
+}
+/**
+ * Creates a ViewContainerRef and stores it on the injector. Or, if the ViewContainerRef
+ * already exists, retrieves the existing ViewContainerRef.
+ *
+ * @returns The ViewContainerRef instance to use
+ */
+function injectViewContainerRef() {
+    const previousTNode = getCurrentTNode();
+    return createContainerRef(previousTNode, getLView());
+}
+const VE_ViewContainerRef = ViewContainerRef;
+// TODO(alxhub): cleaning up this indirection triggers a subtle bug in Closure in g3. Once the fix
+// for that lands, this can be cleaned up.
+const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
+    constructor(_lContainer, _hostTNode, _hostLView) {
+        super();
+        this._lContainer = _lContainer;
+        this._hostTNode = _hostTNode;
+        this._hostLView = _hostLView;
+    }
+    get element() {
+        return createElementRef(this._hostTNode, this._hostLView);
+    }
+    get injector() {
+        return new NodeInjector(this._hostTNode, this._hostLView);
+    }
+    /** @deprecated No replacement */
+    get parentInjector() {
+        const parentLocation = getParentInjectorLocation(this._hostTNode, this._hostLView);
+        if (hasParentInjector(parentLocation)) {
+            const parentView = getParentInjectorView(parentLocation, this._hostLView);
+            const injectorIndex = getParentInjectorIndex(parentLocation);
+            ngDevMode && assertNodeInjector(parentView, injectorIndex);
+            const parentTNode = parentView[TVIEW].data[injectorIndex + 8 /* NodeInjectorOffset.TNODE */];
+            return new NodeInjector(parentTNode, parentView);
+        }
+        else {
+            return new NodeInjector(null, this._hostLView);
+        }
+    }
+    clear() {
+        while (this.length > 0) {
+            this.remove(this.length - 1);
+        }
+    }
+    get(index) {
+        const viewRefs = getViewRefs(this._lContainer);
+        return viewRefs !== null && viewRefs[index] || null;
+    }
+    get length() {
+        return this._lContainer.length - CONTAINER_HEADER_OFFSET;
+    }
+    createEmbeddedView(templateRef, context, indexOrOptions) {
+        let index;
+        let injector;
+        if (typeof indexOrOptions === 'number') {
+            index = indexOrOptions;
+        }
+        else if (indexOrOptions != null) {
+            index = indexOrOptions.index;
+            injector = indexOrOptions.injector;
+        }
+        const dehydratedView = findMatchingDehydratedView(this._lContainer, templateRef.ssrId);
+        const viewRef = templateRef.createEmbeddedViewImpl(context || {}, injector, dehydratedView);
+        this.insertImpl(viewRef, index, shouldAddViewToDom(this._hostTNode, dehydratedView));
+        return viewRef;
+    }
+    createComponent(componentFactoryOrType, indexOrOptions, injector, projectableNodes, environmentInjector) {
+        const isComponentFactory = componentFactoryOrType && !isType(componentFactoryOrType);
+        let index;
+        // This function supports 2 signatures and we need to handle options correctly for both:
+        //   1. When first argument is a Component type. This signature also requires extra
+        //      options to be provided as object (more ergonomic option).
+        //   2. First argument is a Component factory. In this case extra options are represented as
+        //      positional arguments. This signature is less ergonomic and will be deprecated.
+        if (isComponentFactory) {
+            if (ngDevMode) {
+                assertEqual(typeof indexOrOptions !== 'object', true, 'It looks like Component factory was provided as the first argument ' +
+                    'and an options object as the second argument. This combination of arguments ' +
+                    'is incompatible. You can either change the first argument to provide Component ' +
+                    'type or change the second argument to be a number (representing an index at ' +
+                    'which to insert the new component\'s host view into this container)');
+            }
+            index = indexOrOptions;
+        }
+        else {
+            if (ngDevMode) {
+                assertDefined(getComponentDef(componentFactoryOrType), `Provided Component class doesn't contain Component definition. ` +
+                    `Please check whether provided class has @Component decorator.`);
+                assertEqual(typeof indexOrOptions !== 'number', true, 'It looks like Component type was provided as the first argument ' +
+                    'and a number (representing an index at which to insert the new component\'s ' +
+                    'host view into this container as the second argument. This combination of arguments ' +
+                    'is incompatible. Please use an object as the second argument instead.');
+            }
+            const options = (indexOrOptions || {});
+            if (ngDevMode && options.environmentInjector && options.ngModuleRef) {
+                throwError(`Cannot pass both environmentInjector and ngModuleRef options to createComponent().`);
+            }
+            index = options.index;
+            injector = options.injector;
+            projectableNodes = options.projectableNodes;
+            environmentInjector = options.environmentInjector || options.ngModuleRef;
+        }
+        const componentFactory = isComponentFactory ?
+            componentFactoryOrType :
+            new ComponentFactory(getComponentDef(componentFactoryOrType));
+        const contextInjector = injector || this.parentInjector;
+        // If an `NgModuleRef` is not provided explicitly, try retrieving it from the DI tree.
+        if (!environmentInjector && componentFactory.ngModule == null) {
+            // For the `ComponentFactory` case, entering this logic is very unlikely, since we expect that
+            // an instance of a `ComponentFactory`, resolved via `ComponentFactoryResolver` would have an
+            // `ngModule` field. This is possible in some test scenarios and potentially in some JIT-based
+            // use-cases. For the `ComponentFactory` case we preserve backwards-compatibility and try
+            // using a provided injector first, then fall back to the parent injector of this
+            // `ViewContainerRef` instance.
+            //
+            // For the factory-less case, it's critical to establish a connection with the module
+            // injector tree (by retrieving an instance of an `NgModuleRef` and accessing its injector),
+            // so that a component can use DI tokens provided in MgModules. For this reason, we can not
+            // rely on the provided injector, since it might be detached from the DI tree (for example, if
+            // it was created via `Injector.create` without specifying a parent injector, or if an
+            // injector is retrieved from an `NgModuleRef` created via `createNgModule` using an
+            // NgModule outside of a module tree). Instead, we always use `ViewContainerRef`'s parent
+            // injector, which is normally connected to the DI tree, which includes module injector
+            // subtree.
+            const _injector = isComponentFactory ? contextInjector : this.parentInjector;
+            // DO NOT REFACTOR. The code here used to have a `injector.get(NgModuleRef, null) ||
+            // undefined` expression which seems to cause internal google apps to fail. This is documented
+            // in the following internal bug issue: go/b/142967802
+            const result = _injector.get(EnvironmentInjector, null);
+            if (result) {
+                environmentInjector = result;
+            }
+        }
+        const componentDef = getComponentDef(componentFactory.componentType ?? {});
+        const dehydratedView = findMatchingDehydratedView(this._lContainer, componentDef?.id ?? null);
+        const rNode = dehydratedView?.firstChild ?? null;
+        const componentRef = componentFactory.create(contextInjector, projectableNodes, rNode, environmentInjector);
+        this.insertImpl(componentRef.hostView, index, shouldAddViewToDom(this._hostTNode, dehydratedView));
+        return componentRef;
+    }
+    insert(viewRef, index) {
+        return this.insertImpl(viewRef, index, true);
+    }
+    insertImpl(viewRef, index, addToDOM) {
+        const lView = viewRef._lView;
+        if (ngDevMode && viewRef.destroyed) {
+            throw new Error('Cannot insert a destroyed View in a ViewContainer!');
+        }
+        if (viewAttachedToContainer(lView)) {
+            // If view is already attached, detach it first so we clean up references appropriately.
+            const prevIdx = this.indexOf(viewRef);
+            // A view might be attached either to this or a different container. The `prevIdx` for
+            // those cases will be:
+            // equal to -1 for views attached to this ViewContainerRef
+            // >= 0 for views attached to a different ViewContainerRef
+            if (prevIdx !== -1) {
+                this.detach(prevIdx);
+            }
+            else {
+                const prevLContainer = lView[PARENT];
+                ngDevMode &&
+                    assertEqual(isLContainer(prevLContainer), true, 'An attached view should have its PARENT point to a container.');
+                // We need to re-create a R3ViewContainerRef instance since those are not stored on
+                // LView (nor anywhere else).
+                const prevVCRef = new R3ViewContainerRef(prevLContainer, prevLContainer[T_HOST], prevLContainer[PARENT]);
+                prevVCRef.detach(prevVCRef.indexOf(viewRef));
+            }
+        }
+        // Logical operation of adding `LView` to `LContainer`
+        const adjustedIdx = this._adjustIndex(index);
+        const lContainer = this._lContainer;
+        addLViewToLContainer(lContainer, lView, adjustedIdx, addToDOM);
+        viewRef.attachToViewContainerRef();
+        addToArray(getOrCreateViewRefs(lContainer), adjustedIdx, viewRef);
+        return viewRef;
+    }
+    move(viewRef, newIndex) {
+        if (ngDevMode && viewRef.destroyed) {
+            throw new Error('Cannot move a destroyed View in a ViewContainer!');
+        }
+        return this.insert(viewRef, newIndex);
+    }
+    indexOf(viewRef) {
+        const viewRefsArr = getViewRefs(this._lContainer);
+        return viewRefsArr !== null ? viewRefsArr.indexOf(viewRef) : -1;
+    }
+    remove(index) {
+        const adjustedIdx = this._adjustIndex(index, -1);
+        const detachedView = detachView(this._lContainer, adjustedIdx);
+        if (detachedView) {
+            // Before destroying the view, remove it from the container's array of `ViewRef`s.
+            // This ensures the view container length is updated before calling
+            // `destroyLView`, which could recursively call view container methods that
+            // rely on an accurate container length.
+            // (e.g. a method on this view container being called by a child directive's OnDestroy
+            // lifecycle hook)
+            removeFromArray(getOrCreateViewRefs(this._lContainer), adjustedIdx);
+            destroyLView(detachedView[TVIEW], detachedView);
+        }
+    }
+    detach(index) {
+        const adjustedIdx = this._adjustIndex(index, -1);
+        const view = detachView(this._lContainer, adjustedIdx);
+        const wasDetached = view && removeFromArray(getOrCreateViewRefs(this._lContainer), adjustedIdx) != null;
+        return wasDetached ? new ViewRef$1(view) : null;
+    }
+    _adjustIndex(index, shift = 0) {
+        if (index == null) {
+            return this.length + shift;
+        }
+        if (ngDevMode) {
+            assertGreaterThan(index, -1, `ViewRef index must be positive, got ${index}`);
+            // +1 because it's legal to insert at the end.
+            assertLessThan(index, this.length + 1 + shift, 'index');
+        }
+        return index;
+    }
+};
+function getViewRefs(lContainer) {
+    return lContainer[VIEW_REFS];
+}
+function getOrCreateViewRefs(lContainer) {
+    return (lContainer[VIEW_REFS] || (lContainer[VIEW_REFS] = []));
+}
+/**
+ * Creates a ViewContainerRef and stores it on the injector.
+ *
+ * @param hostTNode The node that is requesting a ViewContainerRef
+ * @param hostLView The view to which the node belongs
+ * @returns The ViewContainerRef instance to use
+ */
+function createContainerRef(hostTNode, hostLView) {
+    ngDevMode && assertTNodeType(hostTNode, 12 /* TNodeType.AnyContainer */ | 3 /* TNodeType.AnyRNode */);
+    let lContainer;
+    const slotValue = hostLView[hostTNode.index];
+    if (isLContainer(slotValue)) {
+        // If the host is a container, we don't need to create a new LContainer
+        lContainer = slotValue;
+    }
+    else {
+        // An LContainer anchor can not be `null`, but we set it here temporarily
+        // and update to the actual value later in this function (see
+        // `_locateOrCreateAnchorNode`).
+        lContainer = createLContainer(slotValue, hostLView, null, hostTNode);
+        hostLView[hostTNode.index] = lContainer;
+        addToViewTree(hostLView, lContainer);
+    }
+    _locateOrCreateAnchorNode(lContainer, hostLView, hostTNode, slotValue);
+    return new R3ViewContainerRef(lContainer, hostTNode, hostLView);
+}
+/**
+ * Creates and inserts a comment node that acts as an anchor for a view container.
+ *
+ * If the host is a regular element, we have to insert a comment node manually which will
+ * be used as an anchor when inserting elements. In this specific case we use low-level DOM
+ * manipulation to insert it.
+ */
+function insertAnchorNode(hostLView, hostTNode) {
+    const renderer = hostLView[RENDERER];
+    ngDevMode && ngDevMode.rendererCreateComment++;
+    const commentNode = renderer.createComment(ngDevMode ? 'container' : '');
+    const hostNative = getNativeByTNode(hostTNode, hostLView);
+    const parentOfHostNative = nativeParentNode(renderer, hostNative);
+    nativeInsertBefore(renderer, parentOfHostNative, commentNode, nativeNextSibling(renderer, hostNative), false);
+    return commentNode;
+}
+let _locateOrCreateAnchorNode = createAnchorNode;
+let _populateDehydratedViewsInLContainer = (lContainer, tNode, hostLView) => false; // noop by default
+/**
+ * Looks up dehydrated views that belong to a given LContainer and populates
+ * this information into the `LContainer[DEHYDRATED_VIEWS]` slot. When running
+ * in client-only mode, this function is a noop.
+ *
+ * @param lContainer LContainer that should be populated.
+ * @param tNode Corresponding TNode.
+ * @param hostLView LView that hosts LContainer.
+ * @returns a boolean flag that indicates whether a populating operation
+ *   was successful. The operation might be unsuccessful in case is has completed
+ *   previously, we are rendering in client-only mode or this content is located
+ *   in a skip hydration section.
+ */
+function populateDehydratedViewsInLContainer(lContainer, tNode, hostLView) {
+    return _populateDehydratedViewsInLContainer(lContainer, tNode, hostLView);
+}
+/**
+ * Regular creation mode: an anchor is created and
+ * assigned to the `lContainer[NATIVE]` slot.
+ */
+function createAnchorNode(lContainer, hostLView, hostTNode, slotValue) {
+    // We already have a native element (anchor) set, return.
+    if (lContainer[NATIVE])
+        return;
+    let commentNode;
+    // If the host is an element container, the native host element is guaranteed to be a
+    // comment and we can reuse that comment as anchor element for the new LContainer.
+    // The comment node in question is already part of the DOM structure so we don't need to append
+    // it again.
+    if (hostTNode.type & 8 /* TNodeType.ElementContainer */) {
+        commentNode = unwrapRNode(slotValue);
+    }
+    else {
+        commentNode = insertAnchorNode(hostLView, hostTNode);
+    }
+    lContainer[NATIVE] = commentNode;
+}
+/**
+ * Hydration logic that looks up all dehydrated views in this container
+ * and puts them into `lContainer[DEHYDRATED_VIEWS]` slot.
+ *
+ * @returns a boolean flag that indicates whether a populating operation
+ *   was successful. The operation might be unsuccessful in case is has completed
+ *   previously, we are rendering in client-only mode or this content is located
+ *   in a skip hydration section.
+ */
+function populateDehydratedViewsInLContainerImpl(lContainer, tNode, hostLView) {
+    // We already have a native element (anchor) set and the process
+    // of finding dehydrated views happened (so the `lContainer[DEHYDRATED_VIEWS]`
+    // is not null), exit early.
+    if (lContainer[NATIVE] && lContainer[DEHYDRATED_VIEWS]) {
+        return true;
+    }
+    const hydrationInfo = hostLView[HYDRATION];
+    const noOffsetIndex = tNode.index - HEADER_OFFSET;
+    // TODO(akushnir): this should really be a single condition, refactor the code
+    // to use `hasInSkipHydrationBlockFlag` logic inside `isInSkipHydrationBlock`.
+    const skipHydration = isInSkipHydrationBlock(tNode) || hasInSkipHydrationBlockFlag(tNode);
+    const isNodeCreationMode = !hydrationInfo || skipHydration || isDisconnectedNode$1(hydrationInfo, noOffsetIndex);
+    // Regular creation mode.
+    if (isNodeCreationMode) {
+        return false;
+    }
+    // Hydration mode, looking up an anchor node and dehydrated views in DOM.
+    const currentRNode = getSegmentHead(hydrationInfo, noOffsetIndex);
+    const serializedViews = hydrationInfo.data[CONTAINERS]?.[noOffsetIndex];
+    ngDevMode &&
+        assertDefined(serializedViews, 'Unexpected state: no hydration info available for a given TNode, ' +
+            'which represents a view container.');
+    const [commentNode, dehydratedViews] = locateDehydratedViewsInContainer(currentRNode, serializedViews);
+    if (ngDevMode) {
+        validateMatchingNode(commentNode, Node.COMMENT_NODE, null, hostLView, tNode, true);
+        // Do not throw in case this node is already claimed (thus `false` as a second
+        // argument). If this container is created based on an `<ng-template>`, the comment
+        // node would be already claimed from the `template` instruction. If an element acts
+        // as an anchor (e.g. <div #vcRef>), a separate comment node would be created/located,
+        // so we need to claim it here.
+        markRNodeAsClaimedByHydration(commentNode, false);
+    }
+    lContainer[NATIVE] = commentNode;
+    lContainer[DEHYDRATED_VIEWS] = dehydratedViews;
+    return true;
+}
+function locateOrCreateAnchorNode(lContainer, hostLView, hostTNode, slotValue) {
+    if (!_populateDehydratedViewsInLContainer(lContainer, hostTNode, hostLView)) {
+        // Populating dehydrated views operation returned `false`, which indicates
+        // that the logic was running in client-only mode, this an anchor comment
+        // node should be created for this container.
+        createAnchorNode(lContainer, hostLView, hostTNode, slotValue);
+    }
+}
+function enableLocateOrCreateContainerRefImpl() {
+    _locateOrCreateAnchorNode = locateOrCreateAnchorNode;
+    _populateDehydratedViewsInLContainer = populateDehydratedViewsInLContainerImpl;
+}
+
 function templateFirstCreatePass(index, tView, lView, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex) {
     ngDevMode && assertFirstCreatePass(tView);
     ngDevMode && ngDevMode.firstCreatePass++;
@@ -19373,7 +20100,13 @@ function ɵɵtemplate(index, templateFn, decls, vars, tagName, attrsIndex, local
         appendChild(tView, lView, comment, tNode);
     }
     attachPatchData(comment, lView);
-    addToViewTree(lView, lView[adjustedIndex] = createLContainer(comment, lView, comment, tNode));
+    const lContainer = createLContainer(comment, lView, comment, tNode);
+    lView[adjustedIndex] = lContainer;
+    addToViewTree(lView, lContainer);
+    // If hydration is enabled, looks up dehydrated views in the DOM
+    // using hydration annotation info and stores those views on LContainer.
+    // In client-only mode, this function is a noop.
+    populateDehydratedViewsInLContainer(lContainer, tNode, lView);
     if (isDirectiveHost(tNode)) {
         createDirectivesInstances(tView, lView, tNode);
     }
@@ -19461,8 +20194,9 @@ function ɵɵconditional(containerIndex, matchingTemplateIndex, value) {
         // a truthy value and as the consequence we've got no view to show.
         if (matchingTemplateIndex !== -1) {
             const templateTNode = getExistingTNode(hostLView[TVIEW], matchingTemplateIndex);
-            const embeddedLView = createAndRenderEmbeddedLView(hostLView, templateTNode, value);
-            addLViewToLContainer(lContainer, embeddedLView, viewInContainerIdx);
+            const dehydratedView = findMatchingDehydratedView(lContainer, templateTNode.tView.ssrId);
+            const embeddedLView = createAndRenderEmbeddedLView(hostLView, templateTNode, value, { dehydratedView });
+            addLViewToLContainer(lContainer, embeddedLView, viewInContainerIdx, shouldAddViewToDom(templateTNode, dehydratedView));
         }
     }
     else {
@@ -19584,656 +20318,290 @@ function ɵɵrepeater(metadataSlotIdx, collection) {
             }
             else if (currentIndex === null) {
                 // remove
-                adjustedPreviousIndex = adjustToLastLContainerIndex(lContainer, adjustedPreviousIndex);
-                removeLViewFromLContainer(lContainer, adjustedPreviousIndex);
-                needsIndexUpdate = true;
-            }
-            else if (adjustedPreviousIndex !== null) {
-                // move
-                const existingLView = detachExistingView(lContainer, adjustedPreviousIndex);
-                addLViewToLContainer(lContainer, existingLView, currentIndex);
-                needsIndexUpdate = true;
-            }
-        });
-        // A trackBy function might return the same value even if the underlying item changed - re-bind
-        // it in the context.
-        changes.forEachIdentityChange((record) => {
-            const viewIdx = adjustToLastLContainerIndex(lContainer, record.currentIndex);
-            const lView = getExistingLViewFromLContainer(lContainer, viewIdx);
-            lView[CONTEXT].$implicit = record.item;
-        });
-        // moves in the container might caused context's index to get out of order, re-adjust
-        if (needsIndexUpdate) {
-            for (let i = 0; i < lContainer.length - CONTAINER_HEADER_OFFSET; i++) {
-                const lView = getExistingLViewFromLContainer(lContainer, i);
-                lView[CONTEXT].$index = i;
-            }
-        }
-    }
-    // handle empty blocks
-    const bindingIndex = nextBindingIndex();
-    if (metadata.hasEmptyBlock) {
-        const hasItemsInCollection = differ.length > 0;
-        if (bindingUpdated(hostLView, bindingIndex, hasItemsInCollection)) {
-            const emptyTemplateIndex = metadataSlotIdx + 2;
-            const lContainer = getLContainer(hostLView, HEADER_OFFSET + emptyTemplateIndex);
-            if (hasItemsInCollection) {
-                removeLViewFromLContainer(lContainer, 0);
-            }
-            else {
-                const emptyTemplateTNode = getExistingTNode(hostTView, emptyTemplateIndex);
-                const embeddedLView = createAndRenderEmbeddedLView(hostLView, emptyTemplateTNode, undefined);
-                addLViewToLContainer(lContainer, embeddedLView, 0);
-            }
-        }
-    }
-}
-function getLContainer(lView, index) {
-    const lContainer = lView[index];
-    ngDevMode && assertLContainer(lContainer);
-    return lContainer;
-}
-function adjustToLastLContainerIndex(lContainer, index) {
-    return index !== null ? index : lContainer.length - CONTAINER_HEADER_OFFSET;
-}
-function detachExistingView(lContainer, index) {
-    const existingLView = detachView(lContainer, index);
-    ngDevMode && assertLView(existingLView);
-    return existingLView;
-}
-function getExistingLViewFromLContainer(lContainer, index) {
-    const existingLView = getLViewFromLContainer(lContainer, index);
-    ngDevMode && assertLView(existingLView);
-    return existingLView;
-}
-function getExistingTNode(tView, index) {
-    const tNode = getTNode(tView, index + HEADER_OFFSET);
-    ngDevMode && assertTNode(tNode);
-    return tNode;
-}
-
-/**
- * Removes all dehydrated views from a given LContainer:
- * both in internal data structure, as well as removing
- * corresponding DOM nodes that belong to that dehydrated view.
- */
-function removeDehydratedViews(lContainer) {
-    const views = lContainer[DEHYDRATED_VIEWS] ?? [];
-    const parentLView = lContainer[PARENT];
-    const renderer = parentLView[RENDERER];
-    for (const view of views) {
-        removeDehydratedView(view, renderer);
-        ngDevMode && ngDevMode.dehydratedViewsRemoved++;
-    }
-    // Reset the value to an empty array to indicate that no
-    // further processing of dehydrated views is needed for
-    // this view container (i.e. do not trigger the lookup process
-    // once again in case a `ViewContainerRef` is created later).
-    lContainer[DEHYDRATED_VIEWS] = EMPTY_ARRAY;
-}
-/**
- * Helper function to remove all nodes from a dehydrated view.
- */
-function removeDehydratedView(dehydratedView, renderer) {
-    let nodesRemoved = 0;
-    let currentRNode = dehydratedView.firstChild;
-    if (currentRNode) {
-        const numNodes = dehydratedView.data[NUM_ROOT_NODES];
-        while (nodesRemoved < numNodes) {
-            ngDevMode && validateSiblingNodeExists(currentRNode);
-            const nextSibling = currentRNode.nextSibling;
-            nativeRemoveNode(renderer, currentRNode, false);
-            currentRNode = nextSibling;
-            nodesRemoved++;
-        }
-    }
-}
-/**
- * Walks over all views within this LContainer invokes dehydrated views
- * cleanup function for each one.
- */
-function cleanupLContainer(lContainer) {
-    removeDehydratedViews(lContainer);
-    for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
-        cleanupLView(lContainer[i]);
-    }
-}
-/**
- * Walks over `LContainer`s and components registered within
- * this LView and invokes dehydrated views cleanup function for each one.
- */
-function cleanupLView(lView) {
-    const tView = lView[TVIEW];
-    for (let i = HEADER_OFFSET; i < tView.bindingStartIndex; i++) {
-        if (isLContainer(lView[i])) {
-            const lContainer = lView[i];
-            cleanupLContainer(lContainer);
-        }
-        else if (isLView(lView[i])) {
-            // This is a component, enter the `cleanupLView` recursively.
-            cleanupLView(lView[i]);
-        }
-    }
-}
-/**
- * Walks over all views registered within the ApplicationRef and removes
- * all dehydrated views from all `LContainer`s along the way.
- */
-function cleanupDehydratedViews(appRef) {
-    const viewRefs = appRef._views;
-    for (const viewRef of viewRefs) {
-        const lNode = getLNodeForHydration(viewRef);
-        // An `lView` might be `null` if a `ViewRef` represents
-        // an embedded view (not a component view).
-        if (lNode !== null && lNode[HOST] !== null) {
-            if (isLView(lNode)) {
-                cleanupLView(lNode);
-            }
-            else {
-                // Cleanup in the root component view
-                const componentLView = lNode[HOST];
-                cleanupLView(componentLView);
-                // Cleanup in all views within this view container
-                cleanupLContainer(lNode);
-            }
-            ngDevMode && ngDevMode.dehydratedViewsCleanupRuns++;
-        }
-    }
-}
-
-/**
- * Given a current DOM node and a serialized information about the views
- * in a container, walks over the DOM structure, collecting the list of
- * dehydrated views.
- */
-function locateDehydratedViewsInContainer(currentRNode, serializedViews) {
-    const dehydratedViews = [];
-    for (const serializedView of serializedViews) {
-        // Repeats a view multiple times as needed, based on the serialized information
-        // (for example, for *ngFor-produced views).
-        for (let i = 0; i < (serializedView[MULTIPLIER] ?? 1); i++) {
-            const view = {
-                data: serializedView,
-                firstChild: null,
-            };
-            if (serializedView[NUM_ROOT_NODES] > 0) {
-                // Keep reference to the first node in this view,
-                // so it can be accessed while invoking template instructions.
-                view.firstChild = currentRNode;
-                // Move over to the next node after this view, which can
-                // either be a first node of the next view or an anchor comment
-                // node after the last view in a container.
-                currentRNode = siblingAfter(serializedView[NUM_ROOT_NODES], currentRNode);
-            }
-            dehydratedViews.push(view);
-        }
-    }
-    return [currentRNode, dehydratedViews];
-}
-/**
- * Reference to a function that searches for a matching dehydrated views
- * stored on a given lContainer.
- * Returns `null` by default, when hydration is not enabled.
- */
-let _findMatchingDehydratedViewImpl = (lContainer, template) => null;
-/**
- * Retrieves the next dehydrated view from the LContainer and verifies that
- * it matches a given template id (from the TView that was used to create this
- * instance of a view). If the id doesn't match, that means that we are in an
- * unexpected state and can not complete the reconciliation process. Thus,
- * all dehydrated views from this LContainer are removed (including corresponding
- * DOM nodes) and the rendering is performed as if there were no dehydrated views
- * in this container.
- */
-function findMatchingDehydratedViewImpl(lContainer, template) {
-    const views = lContainer[DEHYDRATED_VIEWS] ?? [];
-    if (!template || views.length === 0) {
-        return null;
-    }
-    const view = views[0];
-    // Verify whether the first dehydrated view in the container matches
-    // the template id passed to this function (that originated from a TView
-    // that was used to create an instance of an embedded or component views.
-    if (view.data[TEMPLATE_ID] === template) {
-        // If the template id matches - extract the first view and return it.
-        return views.shift();
-    }
-    else {
-        // Otherwise, we are at the state when reconciliation can not be completed,
-        // thus we remove all dehydrated views within this container (remove them
-        // from internal data structures as well as delete associated elements from
-        // the DOM tree).
-        removeDehydratedViews(lContainer);
-        return null;
-    }
-}
-function enableFindMatchingDehydratedViewImpl() {
-    _findMatchingDehydratedViewImpl = findMatchingDehydratedViewImpl;
-}
-function findMatchingDehydratedView(lContainer, template) {
-    return _findMatchingDehydratedViewImpl(lContainer, template);
-}
-
-/**
- * Represents a container where one or more views can be attached to a component.
- *
- * Can contain *host views* (created by instantiating a
- * component with the `createComponent()` method), and *embedded views*
- * (created by instantiating a `TemplateRef` with the `createEmbeddedView()` method).
- *
- * A view container instance can contain other view containers,
- * creating a [view hierarchy](guide/glossary#view-hierarchy).
- *
- * @usageNotes
- *
- * The example below demonstrates how the `createComponent` function can be used
- * to create an instance of a ComponentRef dynamically and attach it to an ApplicationRef,
- * so that it gets included into change detection cycles.
- *
- * Note: the example uses standalone components, but the function can also be used for
- * non-standalone components (declared in an NgModule) as well.
- *
- * ```typescript
- * @Component({
- *   standalone: true,
- *   selector: 'dynamic',
- *   template: `<span>This is a content of a dynamic component.</span>`,
- * })
- * class DynamicComponent {
- *   vcr = inject(ViewContainerRef);
- * }
- *
- * @Component({
- *   standalone: true,
- *   selector: 'app',
- *   template: `<main>Hi! This is the main content.</main>`,
- * })
- * class AppComponent {
- *   vcr = inject(ViewContainerRef);
- *
- *   ngAfterViewInit() {
- *     const compRef = this.vcr.createComponent(DynamicComponent);
- *     compRef.changeDetectorRef.detectChanges();
- *   }
- * }
- * ```
- *
- * @see {@link ComponentRef}
- * @see {@link EmbeddedViewRef}
- *
- * @publicApi
- */
-class ViewContainerRef {
-    /**
-     * @internal
-     * @nocollapse
-     */
-    static { this.__NG_ELEMENT_ID__ = injectViewContainerRef; }
-}
-/**
- * Creates a ViewContainerRef and stores it on the injector. Or, if the ViewContainerRef
- * already exists, retrieves the existing ViewContainerRef.
- *
- * @returns The ViewContainerRef instance to use
- */
-function injectViewContainerRef() {
-    const previousTNode = getCurrentTNode();
-    return createContainerRef(previousTNode, getLView());
-}
-const VE_ViewContainerRef = ViewContainerRef;
-// TODO(alxhub): cleaning up this indirection triggers a subtle bug in Closure in g3. Once the fix
-// for that lands, this can be cleaned up.
-const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
-    constructor(_lContainer, _hostTNode, _hostLView) {
-        super();
-        this._lContainer = _lContainer;
-        this._hostTNode = _hostTNode;
-        this._hostLView = _hostLView;
-    }
-    get element() {
-        return createElementRef(this._hostTNode, this._hostLView);
-    }
-    get injector() {
-        return new NodeInjector(this._hostTNode, this._hostLView);
-    }
-    /** @deprecated No replacement */
-    get parentInjector() {
-        const parentLocation = getParentInjectorLocation(this._hostTNode, this._hostLView);
-        if (hasParentInjector(parentLocation)) {
-            const parentView = getParentInjectorView(parentLocation, this._hostLView);
-            const injectorIndex = getParentInjectorIndex(parentLocation);
-            ngDevMode && assertNodeInjector(parentView, injectorIndex);
-            const parentTNode = parentView[TVIEW].data[injectorIndex + 8 /* NodeInjectorOffset.TNODE */];
-            return new NodeInjector(parentTNode, parentView);
-        }
-        else {
-            return new NodeInjector(null, this._hostLView);
-        }
-    }
-    clear() {
-        while (this.length > 0) {
-            this.remove(this.length - 1);
-        }
-    }
-    get(index) {
-        const viewRefs = getViewRefs(this._lContainer);
-        return viewRefs !== null && viewRefs[index] || null;
-    }
-    get length() {
-        return this._lContainer.length - CONTAINER_HEADER_OFFSET;
-    }
-    createEmbeddedView(templateRef, context, indexOrOptions) {
-        let index;
-        let injector;
-        if (typeof indexOrOptions === 'number') {
-            index = indexOrOptions;
-        }
-        else if (indexOrOptions != null) {
-            index = indexOrOptions.index;
-            injector = indexOrOptions.injector;
-        }
-        const dehydratedView = findMatchingDehydratedView(this._lContainer, templateRef.ssrId);
-        const viewRef = templateRef.createEmbeddedViewImpl(context || {}, injector, dehydratedView);
-        this.insertImpl(viewRef, index, shouldAddViewToDom(this._hostTNode, dehydratedView));
-        return viewRef;
-    }
-    createComponent(componentFactoryOrType, indexOrOptions, injector, projectableNodes, environmentInjector) {
-        const isComponentFactory = componentFactoryOrType && !isType(componentFactoryOrType);
-        let index;
-        // This function supports 2 signatures and we need to handle options correctly for both:
-        //   1. When first argument is a Component type. This signature also requires extra
-        //      options to be provided as object (more ergonomic option).
-        //   2. First argument is a Component factory. In this case extra options are represented as
-        //      positional arguments. This signature is less ergonomic and will be deprecated.
-        if (isComponentFactory) {
-            if (ngDevMode) {
-                assertEqual(typeof indexOrOptions !== 'object', true, 'It looks like Component factory was provided as the first argument ' +
-                    'and an options object as the second argument. This combination of arguments ' +
-                    'is incompatible. You can either change the first argument to provide Component ' +
-                    'type or change the second argument to be a number (representing an index at ' +
-                    'which to insert the new component\'s host view into this container)');
-            }
-            index = indexOrOptions;
-        }
-        else {
-            if (ngDevMode) {
-                assertDefined(getComponentDef(componentFactoryOrType), `Provided Component class doesn't contain Component definition. ` +
-                    `Please check whether provided class has @Component decorator.`);
-                assertEqual(typeof indexOrOptions !== 'number', true, 'It looks like Component type was provided as the first argument ' +
-                    'and a number (representing an index at which to insert the new component\'s ' +
-                    'host view into this container as the second argument. This combination of arguments ' +
-                    'is incompatible. Please use an object as the second argument instead.');
+                adjustedPreviousIndex = adjustToLastLContainerIndex(lContainer, adjustedPreviousIndex);
+                removeLViewFromLContainer(lContainer, adjustedPreviousIndex);
+                needsIndexUpdate = true;
             }
-            const options = (indexOrOptions || {});
-            if (ngDevMode && options.environmentInjector && options.ngModuleRef) {
-                throwError(`Cannot pass both environmentInjector and ngModuleRef options to createComponent().`);
+            else if (adjustedPreviousIndex !== null) {
+                // move
+                const existingLView = detachExistingView(lContainer, adjustedPreviousIndex);
+                addLViewToLContainer(lContainer, existingLView, currentIndex);
+                needsIndexUpdate = true;
             }
-            index = options.index;
-            injector = options.injector;
-            projectableNodes = options.projectableNodes;
-            environmentInjector = options.environmentInjector || options.ngModuleRef;
-        }
-        const componentFactory = isComponentFactory ?
-            componentFactoryOrType :
-            new ComponentFactory(getComponentDef(componentFactoryOrType));
-        const contextInjector = injector || this.parentInjector;
-        // If an `NgModuleRef` is not provided explicitly, try retrieving it from the DI tree.
-        if (!environmentInjector && componentFactory.ngModule == null) {
-            // For the `ComponentFactory` case, entering this logic is very unlikely, since we expect that
-            // an instance of a `ComponentFactory`, resolved via `ComponentFactoryResolver` would have an
-            // `ngModule` field. This is possible in some test scenarios and potentially in some JIT-based
-            // use-cases. For the `ComponentFactory` case we preserve backwards-compatibility and try
-            // using a provided injector first, then fall back to the parent injector of this
-            // `ViewContainerRef` instance.
-            //
-            // For the factory-less case, it's critical to establish a connection with the module
-            // injector tree (by retrieving an instance of an `NgModuleRef` and accessing its injector),
-            // so that a component can use DI tokens provided in MgModules. For this reason, we can not
-            // rely on the provided injector, since it might be detached from the DI tree (for example, if
-            // it was created via `Injector.create` without specifying a parent injector, or if an
-            // injector is retrieved from an `NgModuleRef` created via `createNgModule` using an
-            // NgModule outside of a module tree). Instead, we always use `ViewContainerRef`'s parent
-            // injector, which is normally connected to the DI tree, which includes module injector
-            // subtree.
-            const _injector = isComponentFactory ? contextInjector : this.parentInjector;
-            // DO NOT REFACTOR. The code here used to have a `injector.get(NgModuleRef, null) ||
-            // undefined` expression which seems to cause internal google apps to fail. This is documented
-            // in the following internal bug issue: go/b/142967802
-            const result = _injector.get(EnvironmentInjector, null);
-            if (result) {
-                environmentInjector = result;
+        });
+        // A trackBy function might return the same value even if the underlying item changed - re-bind
+        // it in the context.
+        changes.forEachIdentityChange((record) => {
+            const viewIdx = adjustToLastLContainerIndex(lContainer, record.currentIndex);
+            const lView = getExistingLViewFromLContainer(lContainer, viewIdx);
+            lView[CONTEXT].$implicit = record.item;
+        });
+        // moves in the container might caused context's index to get out of order, re-adjust
+        if (needsIndexUpdate) {
+            for (let i = 0; i < lContainer.length - CONTAINER_HEADER_OFFSET; i++) {
+                const lView = getExistingLViewFromLContainer(lContainer, i);
+                lView[CONTEXT].$index = i;
             }
         }
-        const componentDef = getComponentDef(componentFactory.componentType ?? {});
-        const dehydratedView = findMatchingDehydratedView(this._lContainer, componentDef?.id ?? null);
-        const rNode = dehydratedView?.firstChild ?? null;
-        const componentRef = componentFactory.create(contextInjector, projectableNodes, rNode, environmentInjector);
-        this.insertImpl(componentRef.hostView, index, shouldAddViewToDom(this._hostTNode, dehydratedView));
-        return componentRef;
     }
-    insert(viewRef, index) {
-        return this.insertImpl(viewRef, index, true);
-    }
-    insertImpl(viewRef, index, addToDOM) {
-        const lView = viewRef._lView;
-        if (ngDevMode && viewRef.destroyed) {
-            throw new Error('Cannot insert a destroyed View in a ViewContainer!');
-        }
-        if (viewAttachedToContainer(lView)) {
-            // If view is already attached, detach it first so we clean up references appropriately.
-            const prevIdx = this.indexOf(viewRef);
-            // A view might be attached either to this or a different container. The `prevIdx` for
-            // those cases will be:
-            // equal to -1 for views attached to this ViewContainerRef
-            // >= 0 for views attached to a different ViewContainerRef
-            if (prevIdx !== -1) {
-                this.detach(prevIdx);
+    // handle empty blocks
+    const bindingIndex = nextBindingIndex();
+    if (metadata.hasEmptyBlock) {
+        const hasItemsInCollection = differ.length > 0;
+        if (bindingUpdated(hostLView, bindingIndex, hasItemsInCollection)) {
+            const emptyTemplateIndex = metadataSlotIdx + 2;
+            const lContainer = getLContainer(hostLView, HEADER_OFFSET + emptyTemplateIndex);
+            if (hasItemsInCollection) {
+                removeLViewFromLContainer(lContainer, 0);
             }
             else {
-                const prevLContainer = lView[PARENT];
-                ngDevMode &&
-                    assertEqual(isLContainer(prevLContainer), true, 'An attached view should have its PARENT point to a container.');
-                // We need to re-create a R3ViewContainerRef instance since those are not stored on
-                // LView (nor anywhere else).
-                const prevVCRef = new R3ViewContainerRef(prevLContainer, prevLContainer[T_HOST], prevLContainer[PARENT]);
-                prevVCRef.detach(prevVCRef.indexOf(viewRef));
+                const emptyTemplateTNode = getExistingTNode(hostTView, emptyTemplateIndex);
+                const embeddedLView = createAndRenderEmbeddedLView(hostLView, emptyTemplateTNode, undefined);
+                addLViewToLContainer(lContainer, embeddedLView, 0);
             }
         }
-        // Logical operation of adding `LView` to `LContainer`
-        const adjustedIdx = this._adjustIndex(index);
-        const lContainer = this._lContainer;
-        addLViewToLContainer(lContainer, lView, adjustedIdx, addToDOM);
-        viewRef.attachToViewContainerRef();
-        addToArray(getOrCreateViewRefs(lContainer), adjustedIdx, viewRef);
-        return viewRef;
-    }
-    move(viewRef, newIndex) {
-        if (ngDevMode && viewRef.destroyed) {
-            throw new Error('Cannot move a destroyed View in a ViewContainer!');
-        }
-        return this.insert(viewRef, newIndex);
-    }
-    indexOf(viewRef) {
-        const viewRefsArr = getViewRefs(this._lContainer);
-        return viewRefsArr !== null ? viewRefsArr.indexOf(viewRef) : -1;
-    }
-    remove(index) {
-        const adjustedIdx = this._adjustIndex(index, -1);
-        const detachedView = detachView(this._lContainer, adjustedIdx);
-        if (detachedView) {
-            // Before destroying the view, remove it from the container's array of `ViewRef`s.
-            // This ensures the view container length is updated before calling
-            // `destroyLView`, which could recursively call view container methods that
-            // rely on an accurate container length.
-            // (e.g. a method on this view container being called by a child directive's OnDestroy
-            // lifecycle hook)
-            removeFromArray(getOrCreateViewRefs(this._lContainer), adjustedIdx);
-            destroyLView(detachedView[TVIEW], detachedView);
-        }
-    }
-    detach(index) {
-        const adjustedIdx = this._adjustIndex(index, -1);
-        const view = detachView(this._lContainer, adjustedIdx);
-        const wasDetached = view && removeFromArray(getOrCreateViewRefs(this._lContainer), adjustedIdx) != null;
-        return wasDetached ? new ViewRef$1(view) : null;
-    }
-    _adjustIndex(index, shift = 0) {
-        if (index == null) {
-            return this.length + shift;
-        }
-        if (ngDevMode) {
-            assertGreaterThan(index, -1, `ViewRef index must be positive, got ${index}`);
-            // +1 because it's legal to insert at the end.
-            assertLessThan(index, this.length + 1 + shift, 'index');
-        }
-        return index;
     }
-};
-function getViewRefs(lContainer) {
-    return lContainer[VIEW_REFS];
 }
-function getOrCreateViewRefs(lContainer) {
-    return (lContainer[VIEW_REFS] || (lContainer[VIEW_REFS] = []));
+function getLContainer(lView, index) {
+    const lContainer = lView[index];
+    ngDevMode && assertLContainer(lContainer);
+    return lContainer;
+}
+function adjustToLastLContainerIndex(lContainer, index) {
+    return index !== null ? index : lContainer.length - CONTAINER_HEADER_OFFSET;
 }
+function detachExistingView(lContainer, index) {
+    const existingLView = detachView(lContainer, index);
+    ngDevMode && assertLView(existingLView);
+    return existingLView;
+}
+function getExistingLViewFromLContainer(lContainer, index) {
+    const existingLView = getLViewFromLContainer(lContainer, index);
+    ngDevMode && assertLView(existingLView);
+    return existingLView;
+}
+function getExistingTNode(tView, index) {
+    const tNode = getTNode(tView, index + HEADER_OFFSET);
+    ngDevMode && assertTNode(tNode);
+    return tNode;
+}
+
 /**
- * Creates a ViewContainerRef and stores it on the injector.
+ * Describes the state of defer block dependency loading.
+ */
+var DeferDependenciesLoadingState;
+(function (DeferDependenciesLoadingState) {
+    /** Initial state, dependency loading is not yet triggered */
+    DeferDependenciesLoadingState[DeferDependenciesLoadingState["NOT_STARTED"] = 0] = "NOT_STARTED";
+    /** Dependency loading is in progress */
+    DeferDependenciesLoadingState[DeferDependenciesLoadingState["IN_PROGRESS"] = 1] = "IN_PROGRESS";
+    /** Dependency loading has completed successfully */
+    DeferDependenciesLoadingState[DeferDependenciesLoadingState["COMPLETE"] = 2] = "COMPLETE";
+    /** Dependency loading has failed */
+    DeferDependenciesLoadingState[DeferDependenciesLoadingState["FAILED"] = 3] = "FAILED";
+})(DeferDependenciesLoadingState || (DeferDependenciesLoadingState = {}));
+/**
+ * Describes the current state of this defer block instance.
  *
- * @param hostTNode The node that is requesting a ViewContainerRef
- * @param hostLView The view to which the node belongs
- * @returns The ViewContainerRef instance to use
+ * @publicApi
+ * @developerPreview
  */
-function createContainerRef(hostTNode, hostLView) {
-    ngDevMode && assertTNodeType(hostTNode, 12 /* TNodeType.AnyContainer */ | 3 /* TNodeType.AnyRNode */);
-    let lContainer;
-    const slotValue = hostLView[hostTNode.index];
-    if (isLContainer(slotValue)) {
-        // If the host is a container, we don't need to create a new LContainer
-        lContainer = slotValue;
-    }
-    else {
-        // An LContainer anchor can not be `null`, but we set it here temporarily
-        // and update to the actual value later in this function (see
-        // `_locateOrCreateAnchorNode`).
-        lContainer = createLContainer(slotValue, hostLView, null, hostTNode);
-        hostLView[hostTNode.index] = lContainer;
-        addToViewTree(hostLView, lContainer);
-    }
-    _locateOrCreateAnchorNode(lContainer, hostLView, hostTNode, slotValue);
-    return new R3ViewContainerRef(lContainer, hostTNode, hostLView);
-}
+var DeferBlockState;
+(function (DeferBlockState) {
+    /** The placeholder block content is rendered */
+    DeferBlockState[DeferBlockState["Placeholder"] = 0] = "Placeholder";
+    /** The loading block content is rendered */
+    DeferBlockState[DeferBlockState["Loading"] = 1] = "Loading";
+    /** The main content block content is rendered */
+    DeferBlockState[DeferBlockState["Complete"] = 2] = "Complete";
+    /** The error block content is rendered */
+    DeferBlockState[DeferBlockState["Error"] = 3] = "Error";
+})(DeferBlockState || (DeferBlockState = {}));
 /**
- * Creates and inserts a comment node that acts as an anchor for a view container.
+ * Describes the initial state of this defer block instance.
  *
- * If the host is a regular element, we have to insert a comment node manually which will
- * be used as an anchor when inserting elements. In this specific case we use low-level DOM
- * manipulation to insert it.
+ * Note: this state is internal only and *must* be represented
+ * with a number lower than any value in the `DeferBlockState` enum.
  */
-function insertAnchorNode(hostLView, hostTNode) {
-    const renderer = hostLView[RENDERER];
-    ngDevMode && ngDevMode.rendererCreateComment++;
-    const commentNode = renderer.createComment(ngDevMode ? 'container' : '');
-    const hostNative = getNativeByTNode(hostTNode, hostLView);
-    const parentOfHostNative = nativeParentNode(renderer, hostNative);
-    nativeInsertBefore(renderer, parentOfHostNative, commentNode, nativeNextSibling(renderer, hostNative), false);
-    return commentNode;
-}
-let _locateOrCreateAnchorNode = createAnchorNode;
-let _populateDehydratedViewsInContainer = (lContainer, lView, tNode) => false; // noop by default
+var DeferBlockInternalState;
+(function (DeferBlockInternalState) {
+    /** Initial state. Nothing is rendered yet. */
+    DeferBlockInternalState[DeferBlockInternalState["Initial"] = -1] = "Initial";
+})(DeferBlockInternalState || (DeferBlockInternalState = {}));
 /**
- * Looks up dehydrated views that belong to a given LContainer and populates
- * this information into the `LContainer[DEHYDRATED_VIEWS]` slot. When running
- * in client-only mode, this function is a noop.
+ * A slot in the `LDeferBlockDetails` array that contains a number
+ * that represent a current block state that is being rendered.
+ */
+const DEFER_BLOCK_STATE = 0;
+/**
+ * Options for configuring defer blocks behavior.
+ * @publicApi
+ * @developerPreview
+ */
+var DeferBlockBehavior;
+(function (DeferBlockBehavior) {
+    /**
+     * Manual triggering mode for defer blocks. Provides control over when defer blocks render
+     * and which state they render. This is the default behavior in test environments.
+     */
+    DeferBlockBehavior[DeferBlockBehavior["Manual"] = 0] = "Manual";
+    /**
+     * Playthrough mode for defer blocks. This mode behaves like defer blocks would in a browser.
+     */
+    DeferBlockBehavior[DeferBlockBehavior["Playthrough"] = 1] = "Playthrough";
+})(DeferBlockBehavior || (DeferBlockBehavior = {}));
+
+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
  *
- * @param lContainer LContainer that should be populated.
- * @returns a boolean flag that indicates whether a populating operation
- *   was successful. The operation might be unsuccessful in case is has completed
- *   previously, we are rendering in client-only mode or this content is located
- *   in a skip hydration section.
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
  */
-function populateDehydratedViewsInContainer(lContainer) {
-    return _populateDehydratedViewsInContainer(lContainer, getLView(), getCurrentTNode());
+/** Configuration object used to register passive and capturing events. */
+const eventListenerOptions = {
+    passive: true,
+    capture: true
+};
+/** Keeps track of the currently-registered `on hover` triggers. */
+const hoverTriggers = new WeakMap();
+/** Keeps track of the currently-registered `on interaction` triggers. */
+const interactionTriggers = new WeakMap();
+/** Names of the events considered as interaction events. */
+const interactionEventNames = ['click', 'keydown'];
+/** Object keeping track of registered callbacks for a deferred block trigger. */
+class DeferEventEntry {
+    constructor() {
+        this.callbacks = new Set();
+        this.listener = () => {
+            for (const callback of this.callbacks) {
+                callback();
+            }
+        };
+    }
 }
 /**
- * Regular creation mode: an anchor is created and
- * assigned to the `lContainer[NATIVE]` slot.
+ * Registers an interaction trigger.
+ * @param trigger Element that is the trigger.
+ * @param callback Callback to be invoked when the trigger is interacted with.
+ */
+function onInteraction(trigger, callback) {
+    let entry = interactionTriggers.get(trigger);
+    // If this is the first entry for this element, add the listeners.
+    if (!entry) {
+        // Note that using managing events centrally like this lends itself well to using global
+        // event delegation. It currently does delegation at the element level, rather than the
+        // document level, because:
+        // 1. Global delegation is the most effective when there are a lot of events being registered
+        // at the same time. Deferred blocks are unlikely to be used in such a way.
+        // 2. Matching events to their target isn't free. For each `click` and `keydown` event we
+        // would have look through all the triggers and check if the target either is the element
+        // itself or it's contained within the element. Given that `click` and `keydown` are some
+        // of the most common events, this may end up introducing a lot of runtime overhead.
+        // 3. We're still registering only two events per element, no matter how many deferred blocks
+        // are referencing it.
+        entry = new DeferEventEntry();
+        interactionTriggers.set(trigger, entry);
+        for (const name of interactionEventNames) {
+            trigger.addEventListener(name, entry.listener, eventListenerOptions);
+        }
+    }
+    entry.callbacks.add(callback);
+    return () => {
+        const { callbacks, listener } = entry;
+        callbacks.delete(callback);
+        if (callbacks.size === 0) {
+            interactionTriggers.delete(trigger);
+            for (const name of interactionEventNames) {
+                trigger.removeEventListener(name, listener, eventListenerOptions);
+            }
+        }
+    };
+}
+/**
+ * Registers a hover trigger.
+ * @param trigger Element that is the trigger.
+ * @param callback Callback to be invoked when the trigger is hovered over.
  */
-function createAnchorNode(lContainer, hostLView, hostTNode, slotValue) {
-    // We already have a native element (anchor) set, return.
-    if (lContainer[NATIVE])
-        return;
-    let commentNode;
-    // If the host is an element container, the native host element is guaranteed to be a
-    // comment and we can reuse that comment as anchor element for the new LContainer.
-    // The comment node in question is already part of the DOM structure so we don't need to append
-    // it again.
-    if (hostTNode.type & 8 /* TNodeType.ElementContainer */) {
-        commentNode = unwrapRNode(slotValue);
-    }
-    else {
-        commentNode = insertAnchorNode(hostLView, hostTNode);
+function onHover(trigger, callback) {
+    let entry = hoverTriggers.get(trigger);
+    // If this is the first entry for this element, add the listener.
+    if (!entry) {
+        entry = new DeferEventEntry();
+        trigger.addEventListener('mouseenter', entry.listener, eventListenerOptions);
+        hoverTriggers.set(trigger, entry);
     }
-    lContainer[NATIVE] = commentNode;
+    entry.callbacks.add(callback);
+    return () => {
+        const { callbacks, listener } = entry;
+        callbacks.delete(callback);
+        if (callbacks.size === 0) {
+            trigger.removeEventListener('mouseenter', listener, eventListenerOptions);
+            hoverTriggers.delete(trigger);
+        }
+    };
 }
 /**
- * Hydration logic that looks up all dehydrated views in this container
- * and puts them into `lContainer[DEHYDRATED_VIEWS]` slot.
- *
- * @returns a boolean flag that indicates whether a populating operation
- *   was successful. The operation might be unsuccessful in case is has completed
- *   previously, we are rendering in client-only mode or this content is located
- *   in a skip hydration section.
+ * Registers a viewport trigger.
+ * @param trigger Element that is the trigger.
+ * @param callback Callback to be invoked when the trigger comes into the viewport.
+ * @param injector Injector that can be used by the trigger to resolve DI tokens.
  */
-function populateDehydratedViewsInContainerImpl(lContainer, hostLView, hostTNode) {
-    // We already have a native element (anchor) set and the process
-    // of finding dehydrated views happened (so the `lContainer[DEHYDRATED_VIEWS]`
-    // is not null), exit early.
-    if (lContainer[NATIVE] && lContainer[DEHYDRATED_VIEWS]) {
-        return true;
-    }
-    const hydrationInfo = hostLView[HYDRATION];
-    const noOffsetIndex = hostTNode.index - HEADER_OFFSET;
-    // TODO(akushnir): this should really be a single condition, refactor the code
-    // to use `hasInSkipHydrationBlockFlag` logic inside `isInSkipHydrationBlock`.
-    const skipHydration = isInSkipHydrationBlock(hostTNode) || hasInSkipHydrationBlockFlag(hostTNode);
-    const isNodeCreationMode = !hydrationInfo || skipHydration || isDisconnectedNode$1(hydrationInfo, noOffsetIndex);
-    // Regular creation mode.
-    if (isNodeCreationMode) {
-        return false;
-    }
-    // Hydration mode, looking up an anchor node and dehydrated views in DOM.
-    const currentRNode = getSegmentHead(hydrationInfo, noOffsetIndex);
-    const serializedViews = hydrationInfo.data[CONTAINERS]?.[noOffsetIndex];
-    ngDevMode &&
-        assertDefined(serializedViews, 'Unexpected state: no hydration info available for a given TNode, ' +
-            'which represents a view container.');
-    const [commentNode, dehydratedViews] = locateDehydratedViewsInContainer(currentRNode, serializedViews);
-    if (ngDevMode) {
-        validateMatchingNode(commentNode, Node.COMMENT_NODE, null, hostLView, hostTNode, true);
-        // Do not throw in case this node is already claimed (thus `false` as a second
-        // argument). If this container is created based on an `<ng-template>`, the comment
-        // node would be already claimed from the `template` instruction. If an element acts
-        // as an anchor (e.g. <div #vcRef>), a separate comment node would be created/located,
-        // so we need to claim it here.
-        markRNodeAsClaimedByHydration(commentNode, false);
-    }
-    lContainer[NATIVE] = commentNode;
-    lContainer[DEHYDRATED_VIEWS] = dehydratedViews;
-    return true;
+function onViewport(trigger, callback, injector) {
+    return injector.get(DeferIntersectionManager).register(trigger, callback);
 }
-function locateOrCreateAnchorNode(lContainer, hostLView, hostTNode, slotValue) {
-    if (!_populateDehydratedViewsInContainer(lContainer, hostLView, hostTNode)) {
-        // Populating dehydrated views operation returned `false`, which indicates
-        // that the logic was running in client-only mode, this an anchor comment
-        // node should be created for this container.
-        createAnchorNode(lContainer, hostLView, hostTNode, slotValue);
+/** Keeps track of the registered `viewport` triggers. */
+class DeferIntersectionManager {
+    /** @nocollapse */
+    static { this.ɵprov = ɵɵdefineInjectable({
+        token: DeferIntersectionManager,
+        providedIn: 'root',
+        factory: () => new DeferIntersectionManager(inject(NgZone)),
+    }); }
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        /** `IntersectionObserver` used to observe `viewport` triggers. */
+        this.intersectionObserver = null;
+        /** Number of elements currently observed with `viewport` triggers. */
+        this.observedViewportElements = 0;
+        /** Currently-registered `viewport` triggers. */
+        this.viewportTriggers = new WeakMap();
+        this.intersectionCallback = entries => {
+            for (const current of entries) {
+                // Only invoke the callbacks if the specific element is intersecting.
+                if (current.isIntersecting && this.viewportTriggers.has(current.target)) {
+                    this.ngZone.run(this.viewportTriggers.get(current.target).listener);
+                }
+            }
+        };
+    }
+    register(trigger, callback) {
+        let entry = this.viewportTriggers.get(trigger);
+        if (!this.intersectionObserver) {
+            this.intersectionObserver =
+                this.ngZone.runOutsideAngular(() => new IntersectionObserver(this.intersectionCallback));
+        }
+        if (!entry) {
+            entry = new DeferEventEntry();
+            this.ngZone.runOutsideAngular(() => this.intersectionObserver.observe(trigger));
+            this.viewportTriggers.set(trigger, entry);
+            this.observedViewportElements++;
+        }
+        entry.callbacks.add(callback);
+        return () => {
+            entry.callbacks.delete(callback);
+            if (entry.callbacks.size === 0) {
+                this.intersectionObserver?.unobserve(trigger);
+                this.viewportTriggers.delete(trigger);
+                this.observedViewportElements--;
+            }
+            if (this.observedViewportElements === 0) {
+                this.intersectionObserver?.disconnect();
+                this.intersectionObserver = null;
+            }
+        };
     }
 }
-function enableLocateOrCreateContainerRefImpl() {
-    _locateOrCreateAnchorNode = locateOrCreateAnchorNode;
-    _populateDehydratedViewsInContainer = populateDehydratedViewsInContainerImpl;
-}
-
-const DEFER_BLOCK_STATE = 0;
 
 /**
  * Returns whether defer blocks should be triggered.
@@ -20242,27 +20610,25 @@ const DEFER_BLOCK_STATE = 0;
  * only placeholder content is rendered (if provided).
  */
 function shouldTriggerDeferBlock(injector) {
+    const config = injector.get(DEFER_BLOCK_CONFIG, null, { optional: true });
+    if (config?.behavior === DeferBlockBehavior.Manual) {
+        return false;
+    }
     return isPlatformBrowser(injector);
 }
 /**
- * Shims for the `requestIdleCallback` and `cancelIdleCallback` functions for environments
- * where those functions are not available (e.g. Node.js).
- */
-const _requestIdleCallback = typeof requestIdleCallback !== 'undefined' ? requestIdleCallback : setTimeout;
-const _cancelIdleCallback = typeof requestIdleCallback !== 'undefined' ? cancelIdleCallback : clearTimeout;
-/**
- * Creates runtime data structures for `{#defer}` blocks.
+ * Creates runtime data structures for defer blocks.
  *
  * @param index Index of the `defer` instruction.
  * @param primaryTmplIndex Index of the template with the primary block content.
  * @param dependencyResolverFn Function that contains dependencies for this defer block.
- * @param loadingTmplIndex Index of the template with the `{:loading}` block content.
- * @param placeholderTmplIndex Index of the template with the `{:placeholder}` block content.
- * @param errorTmplIndex Index of the template with the `{:error}` block content.
- * @param loadingConfigIndex Index in the constants array of the configuration of the `{:loading}`.
+ * @param loadingTmplIndex Index of the template with the loading block content.
+ * @param placeholderTmplIndex Index of the template with the placeholder block content.
+ * @param errorTmplIndex Index of the template with the error block content.
+ * @param loadingConfigIndex Index in the constants array of the configuration of the loading.
  *     block.
  * @param placeholderConfigIndexIndex in the constants array of the configuration of the
- *     `{:placeholder}` block.
+ *     placeholder block.
  *
  * @codeGenApi
  */
@@ -20285,18 +20651,20 @@ function ɵɵdefer(index, primaryTmplIndex, dependencyResolverFn, loadingTmplInd
                 getConstant(tViewConsts, loadingConfigIndex) :
                 null,
             dependencyResolverFn: dependencyResolverFn ?? null,
-            loadingState: 0 /* DeferDependenciesLoadingState.NOT_STARTED */,
+            loadingState: DeferDependenciesLoadingState.NOT_STARTED,
             loadingPromise: null,
         };
         setTDeferBlockDetails(tView, adjustedIndex, deferBlockConfig);
     }
-    // Lookup dehydrated views that belong to this LContainer.
-    // In client-only mode, this operation is noop.
+    const tNode = getCurrentTNode();
     const lContainer = lView[adjustedIndex];
-    populateDehydratedViewsInContainer(lContainer);
+    // If hydration is enabled, looks up dehydrated views in the DOM
+    // using hydration annotation info and stores those views on LContainer.
+    // In client-only mode, this function is a noop.
+    populateDehydratedViewsInLContainer(lContainer, tNode, lView);
     // Init instance-specific defer details and store it.
     const lDetails = [];
-    lDetails[DEFER_BLOCK_STATE] = 0 /* DeferBlockInstanceState.INITIAL */;
+    lDetails[DEFER_BLOCK_STATE] = DeferBlockInternalState.Initial;
     setLDeferBlockDetails(lView, adjustedIndex, lDetails);
 }
 /**
@@ -20311,13 +20679,13 @@ function ɵɵdeferWhen(rawValue) {
         const tNode = getSelectedTNode();
         const lDetails = getLDeferBlockDetails(lView, tNode);
         const renderedState = lDetails[DEFER_BLOCK_STATE];
-        if (value === false && renderedState === 0 /* DeferBlockInstanceState.INITIAL */) {
+        if (value === false && renderedState === DeferBlockInternalState.Initial) {
             // If nothing is rendered yet, render a placeholder (if defined).
             renderPlaceholder(lView, tNode);
         }
         else if (value === true &&
-            (renderedState === 0 /* DeferBlockInstanceState.INITIAL */ ||
-                renderedState === 1 /* DeferBlockInstanceState.PLACEHOLDER */)) {
+            (renderedState === DeferBlockInternalState.Initial ||
+                renderedState === DeferBlockState.Placeholder)) {
             // The `when` condition has changed to `true`, trigger defer block loading
             // if the block is either in initial (nothing is rendered) or a placeholder
             // state.
@@ -20337,27 +20705,24 @@ function ɵɵdeferPrefetchWhen(rawValue) {
         const tView = lView[TVIEW];
         const tNode = getSelectedTNode();
         const tDetails = getTDeferBlockDetails(tView, tNode);
-        if (value === true && tDetails.loadingState === 0 /* DeferDependenciesLoadingState.NOT_STARTED */) {
+        if (value === true && tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
             // If loading has not been started yet, trigger it now.
-            triggerResourceLoading(tDetails, tView, lView);
+            triggerPrefetching(tDetails, lView);
         }
     }
 }
 /**
- * Sets up handlers that represent `on idle` deferred trigger.
+ * Sets up logic to handle the `on idle` deferred trigger.
  * @codeGenApi
  */
 function ɵɵdeferOnIdle() {
     const lView = getLView();
     const tNode = getCurrentTNode();
     renderPlaceholder(lView, tNode);
-    // Note: we pass an `lView` as a second argument to cancel an `idle`
-    // callback in case an LView got destroyed before an `idle` callback
-    // is invoked.
-    onIdle(() => triggerDeferBlock(lView, tNode), lView);
+    onIdle(() => triggerDeferBlock(lView, tNode), lView, true /* withLViewCleanup */);
 }
 /**
- * Creates runtime data structures for the `prefetch on idle` deferred trigger.
+ * Sets up logic to handle the `prefetch on idle` deferred trigger.
  * @codeGenApi
  */
 function ɵɵdeferPrefetchOnIdle() {
@@ -20365,26 +20730,54 @@ function ɵɵdeferPrefetchOnIdle() {
     const tNode = getCurrentTNode();
     const tView = lView[TVIEW];
     const tDetails = getTDeferBlockDetails(tView, tNode);
-    if (tDetails.loadingState === 0 /* DeferDependenciesLoadingState.NOT_STARTED */) {
-        // Set loading to the scheduled state, so that we don't register it again.
-        tDetails.loadingState = 1 /* DeferDependenciesLoadingState.SCHEDULED */;
-        // In case of prefetching, we intentionally avoid cancelling prefetching if
-        // an underlying LView get destroyed (thus passing `null` as a second argument),
-        // because there might be other LViews (that represent embedded views) that
-        // depend on resource loading.
-        onIdle(() => triggerResourceLoading(tDetails, tView, lView), null /* LView */);
-    }
-}
-/**
- * Creates runtime data structures for the `on immediate` deferred trigger.
+    if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
+        // Prevent scheduling more than one `requestIdleCallback` call
+        // for each defer block. For this reason we use only a trigger
+        // identifier in a key, so all instances would use the same key.
+        const key = String(0 /* DeferBlockTriggers.OnIdle */);
+        const injector = lView[INJECTOR$1];
+        const manager = injector.get(DeferBlockCleanupManager);
+        if (!manager.has(tDetails, key)) {
+            // In case of prefetching, we intentionally avoid cancelling resource loading if
+            // an underlying LView get destroyed (thus passing `null` as a second argument),
+            // because there might be other LViews (that represent embedded views) that
+            // depend on resource loading.
+            const prefetch = () => triggerPrefetching(tDetails, lView);
+            const cleanupFn = onIdle(prefetch, lView, false /* withLViewCleanup */);
+            registerTDetailsCleanup(injector, tDetails, key, cleanupFn);
+        }
+    }
+}
+/**
+ * Sets up logic to handle the `on immediate` deferred trigger.
  * @codeGenApi
  */
-function ɵɵdeferOnImmediate() { } // TODO: implement runtime logic.
+function ɵɵdeferOnImmediate() {
+    const lView = getLView();
+    const tNode = getCurrentTNode();
+    const tView = lView[TVIEW];
+    const tDetails = getTDeferBlockDetails(tView, tNode);
+    // Render placeholder block only if loading template is not present
+    // to avoid content flickering, since it would be immediately replaced
+    // by the loading block.
+    if (tDetails.loadingTmplIndex === null) {
+        renderPlaceholder(lView, tNode);
+    }
+    triggerDeferBlock(lView, tNode);
+}
 /**
- * Creates runtime data structures for the `prefetch on immediate` deferred trigger.
+ * Sets up logic to handle the `prefetch on immediate` deferred trigger.
  * @codeGenApi
  */
-function ɵɵdeferPrefetchOnImmediate() { } // TODO: implement runtime logic.
+function ɵɵdeferPrefetchOnImmediate() {
+    const lView = getLView();
+    const tNode = getCurrentTNode();
+    const tView = lView[TVIEW];
+    const tDetails = getTDeferBlockDetails(tView, tNode);
+    if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
+        triggerResourceLoading(tDetails, lView);
+    }
+}
 /**
  * Creates runtime data structures for the `on timer` deferred trigger.
  * @param delay Amount of time to wait before loading the content.
@@ -20399,67 +20792,207 @@ function ɵɵdeferOnTimer(delay) { } // TODO: implement runtime logic.
 function ɵɵdeferPrefetchOnTimer(delay) { } // TODO: implement runtime logic.
 /**
  * Creates runtime data structures for the `on hover` deferred trigger.
+ * @param triggerIndex Index at which to find the trigger element.
+ * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
  * @codeGenApi
  */
-function ɵɵdeferOnHover() { } // TODO: implement runtime logic.
+function ɵɵdeferOnHover(triggerIndex, walkUpTimes) {
+    const lView = getLView();
+    const tNode = getCurrentTNode();
+    renderPlaceholder(lView, tNode);
+    registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onHover, () => triggerDeferBlock(lView, tNode));
+}
 /**
  * Creates runtime data structures for the `prefetch on hover` deferred trigger.
+ * @param triggerIndex Index at which to find the trigger element.
+ * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
  * @codeGenApi
  */
-function ɵɵdeferPrefetchOnHover() { } // TODO: implement runtime logic.
+function ɵɵdeferPrefetchOnHover(triggerIndex, walkUpTimes) {
+    const lView = getLView();
+    const tNode = getCurrentTNode();
+    const tView = lView[TVIEW];
+    const tDetails = getTDeferBlockDetails(tView, tNode);
+    if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
+        registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onHover, () => triggerPrefetching(tDetails, lView));
+    }
+}
 /**
  * Creates runtime data structures for the `on interaction` deferred trigger.
- * @param target Optional element on which to listen for hover events.
+ * @param triggerIndex Index at which to find the trigger element.
+ * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
  * @codeGenApi
  */
-function ɵɵdeferOnInteraction(target) { } // TODO: implement runtime logic.
+function ɵɵdeferOnInteraction(triggerIndex, walkUpTimes) {
+    const lView = getLView();
+    const tNode = getCurrentTNode();
+    renderPlaceholder(lView, tNode);
+    registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onInteraction, () => triggerDeferBlock(lView, tNode));
+}
 /**
  * Creates runtime data structures for the `prefetch on interaction` deferred trigger.
- * @param target Optional element on which to listen for hover events.
+ * @param triggerIndex Index at which to find the trigger element.
+ * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
  * @codeGenApi
  */
-function ɵɵdeferPrefetchOnInteraction(target) { } // TODO: implement runtime logic.
+function ɵɵdeferPrefetchOnInteraction(triggerIndex, walkUpTimes) {
+    const lView = getLView();
+    const tNode = getCurrentTNode();
+    const tView = lView[TVIEW];
+    const tDetails = getTDeferBlockDetails(tView, tNode);
+    if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
+        registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onInteraction, () => triggerPrefetching(tDetails, lView));
+    }
+}
 /**
  * Creates runtime data structures for the `on viewport` deferred trigger.
- * @param target Optional element on which to listen for hover events.
+ * @param triggerIndex Index at which to find the trigger element.
+ * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
  * @codeGenApi
  */
-function ɵɵdeferOnViewport(target) { } // TODO: implement runtime logic.
+function ɵɵdeferOnViewport(triggerIndex, walkUpTimes) {
+    const lView = getLView();
+    const tNode = getCurrentTNode();
+    renderPlaceholder(lView, tNode);
+    registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onViewport, () => triggerDeferBlock(lView, tNode));
+}
 /**
  * Creates runtime data structures for the `prefetch on viewport` deferred trigger.
- * @param target Optional element on which to listen for hover events.
+ * @param triggerIndex Index at which to find the trigger element.
+ * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
  * @codeGenApi
  */
-function ɵɵdeferPrefetchOnViewport(target) { } // TODO: implement runtime logic.
+function ɵɵdeferPrefetchOnViewport(triggerIndex, walkUpTimes) {
+    const lView = getLView();
+    const tNode = getCurrentTNode();
+    const tView = lView[TVIEW];
+    const tDetails = getTDeferBlockDetails(tView, tNode);
+    if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
+        registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onViewport, () => triggerPrefetching(tDetails, lView));
+    }
+}
 /********** Helper functions **********/
+/**
+ * Helper function to get the LView in which a deferred block's trigger is rendered.
+ * @param deferredHostLView LView in which the deferred block is defined.
+ * @param deferredTNode TNode defining the deferred block.
+ * @param walkUpTimes Number of times to go up in the view hierarchy to find the trigger's view.
+ *   A negative value means that the trigger is inside the block's placeholder, while an undefined
+ *   value means that the trigger is in the same LView as the deferred block.
+ */
+function getTriggerLView(deferredHostLView, deferredTNode, walkUpTimes) {
+    // The trigger is in the same view, we don't need to traverse.
+    if (walkUpTimes == null) {
+        return deferredHostLView;
+    }
+    // A positive value or zero means that the trigger is in a parent view.
+    if (walkUpTimes >= 0) {
+        return walkUpViews(walkUpTimes, deferredHostLView);
+    }
+    // If the value is negative, it means that the trigger is inside the placeholder.
+    const deferredContainer = deferredHostLView[deferredTNode.index];
+    ngDevMode && assertLContainer(deferredContainer);
+    const triggerLView = deferredContainer[CONTAINER_HEADER_OFFSET] ?? null;
+    // We need to null check, because the placeholder might not have been rendered yet.
+    if (ngDevMode && triggerLView !== null) {
+        const lDetails = getLDeferBlockDetails(deferredHostLView, deferredTNode);
+        const renderedState = lDetails[DEFER_BLOCK_STATE];
+        assertEqual(renderedState, DeferBlockState.Placeholder, 'Expected a placeholder to be rendered in this defer block.');
+        assertLView(triggerLView);
+    }
+    return triggerLView;
+}
+/**
+ * Gets the element that a deferred block's trigger is pointing to.
+ * @param triggerLView LView in which the trigger is defined.
+ * @param triggerIndex Index at which the trigger element should've been rendered.
+ */
+function getTriggerElement(triggerLView, triggerIndex) {
+    const element = getNativeByIndex(HEADER_OFFSET + triggerIndex, triggerLView);
+    ngDevMode && assertElement(element);
+    return element;
+}
+/**
+ * Registers a DOM-node based trigger.
+ * @param initialLView LView in which the defer block is rendered.
+ * @param tNode TNode representing the defer block.
+ * @param triggerIndex Index at which to find the trigger element.
+ * @param walkUpTimes Number of times to go up/down in the view hierarchy to find the trigger.
+ * @param registerFn Function that will register the DOM events.
+ * @param callback Callback to be invoked when the trigger receives the event that should render
+ *     the deferred block.
+ */
+function registerDomTrigger(initialLView, tNode, triggerIndex, walkUpTimes, registerFn, callback) {
+    const injector = initialLView[INJECTOR$1];
+    // Assumption: the `afterRender` reference should be destroyed
+    // automatically so we don't need to keep track of it.
+    const afterRenderRef = afterRender(() => {
+        const lDetails = getLDeferBlockDetails(initialLView, tNode);
+        const renderedState = lDetails[DEFER_BLOCK_STATE];
+        // If the block was loaded before the trigger was resolved, we don't need to do anything.
+        if (renderedState !== DeferBlockInternalState.Initial &&
+            renderedState !== DeferBlockState.Placeholder) {
+            afterRenderRef.destroy();
+            return;
+        }
+        const triggerLView = getTriggerLView(initialLView, tNode, walkUpTimes);
+        // Keep polling until we resolve the trigger's LView.
+        // `afterRender` should stop automatically if the view is destroyed.
+        if (!triggerLView) {
+            return;
+        }
+        // It's possible that the trigger's view was destroyed before we resolved the trigger element.
+        if (triggerLView[FLAGS] & 256 /* LViewFlags.Destroyed */) {
+            afterRenderRef.destroy();
+            return;
+        }
+        // TODO: add integration with `DeferBlockCleanupManager`.
+        const element = getTriggerElement(triggerLView, triggerIndex);
+        const cleanup = registerFn(element, () => {
+            callback();
+            removeLViewOnDestroy(triggerLView, cleanup);
+            if (initialLView !== triggerLView) {
+                removeLViewOnDestroy(initialLView, cleanup);
+            }
+            cleanup();
+        }, injector);
+        afterRenderRef.destroy();
+        storeLViewOnDestroy(triggerLView, cleanup);
+        // Since the trigger and deferred block might be in different
+        // views, we have to register the callback in both locations.
+        if (initialLView !== triggerLView) {
+            storeLViewOnDestroy(initialLView, cleanup);
+        }
+    }, { injector });
+}
 /**
  * Helper function to schedule a callback to be invoked when a browser becomes idle.
  *
  * @param callback A function to be invoked when a browser becomes idle.
- * @param lView An optional LView that hosts an instance of a defer block. LView is
- *    used to register a cleanup callback in case that LView got destroyed before
- *    callback was invoked. In this case, an `idle` callback is never invoked. This is
- *    helpful for cases when a defer block has scheduled rendering, but an underlying
- *    LView got destroyed prior to th block rendering.
+ * @param lView LView that hosts an instance of a defer block.
+ * @param withLViewCleanup A flag that indicates whether a scheduled callback
+ *           should be cancelled in case an LView is destroyed before a callback
+ *           was invoked.
  */
-function onIdle(callback, lView) {
-    let id;
-    const removeIdleCallback = () => _cancelIdleCallback(id);
-    id = _requestIdleCallback(() => {
-        removeIdleCallback();
-        if (lView !== null) {
-            // The idle callback is invoked, we no longer need
-            // to retain a cleanup callback in an LView.
-            removeLViewOnDestroy(lView, removeIdleCallback);
-        }
+function onIdle(callback, lView, withLViewCleanup) {
+    const injector = lView[INJECTOR$1];
+    const scheduler = injector.get(OnIdleScheduler);
+    const cleanupFn = () => scheduler.remove(callback);
+    const wrappedCallback = withLViewCleanup ? wrapWithLViewCleanup(callback, lView, cleanupFn) : callback;
+    scheduler.add(wrappedCallback);
+    return cleanupFn;
+}
+/**
+ * Wraps a given callback into a logic that registers a cleanup function
+ * in the LView cleanup slot, to be invoked when an LView is destroyed.
+ */
+function wrapWithLViewCleanup(callback, lView, cleanup) {
+    const wrappedCallback = () => {
         callback();
-    });
-    if (lView !== null) {
-        // Store a cleanup function on LView, so that we cancel idle
-        // callback in case this LView is destroyed before a callback
-        // is invoked.
-        storeLViewOnDestroy(lView, removeIdleCallback);
-    }
+        removeLViewOnDestroy(lView, cleanup);
+    };
+    storeLViewOnDestroy(lView, cleanup);
+    return wrappedCallback;
 }
 /**
  * Calculates a data slot index for defer block info (either static or
@@ -20496,6 +21029,23 @@ function setTDeferBlockDetails(tView, deferBlockIndex, deferBlockConfig) {
     ngDevMode && assertIndexInDeclRange(tView, slotIndex);
     tView.data[slotIndex] = deferBlockConfig;
 }
+function getTemplateIndexForState(newState, hostLView, tNode) {
+    const tView = hostLView[TVIEW];
+    const tDetails = getTDeferBlockDetails(tView, tNode);
+    switch (newState) {
+        case DeferBlockState.Complete:
+            return tDetails.primaryTmplIndex;
+        case DeferBlockState.Loading:
+            return tDetails.loadingTmplIndex;
+        case DeferBlockState.Error:
+            return tDetails.errorTmplIndex;
+        case DeferBlockState.Placeholder:
+            return tDetails.placeholderTmplIndex;
+        default:
+            ngDevMode && throwError(`Unexpected defer block state: ${newState}`);
+            return null;
+    }
+}
 /**
  * Transitions a defer block to the new state. Updates the  necessary
  * data structures and renders corresponding block.
@@ -20503,9 +21053,8 @@ function setTDeferBlockDetails(tView, deferBlockIndex, deferBlockConfig) {
  * @param newState New state that should be applied to the defer block.
  * @param tNode TNode that represents a defer block.
  * @param lContainer Represents an instance of a defer block.
- * @param stateTmplIndex Index of a template that should be rendered.
  */
-function renderDeferBlockState(newState, tNode, lContainer, stateTmplIndex) {
+function renderDeferBlockState(newState, tNode, lContainer) {
     const hostLView = lContainer[PARENT];
     // Check if this view is not destroyed. Since the loading process was async,
     // the view might end up being destroyed by the time rendering happens.
@@ -20515,6 +21064,7 @@ function renderDeferBlockState(newState, tNode, lContainer, stateTmplIndex) {
     ngDevMode && assertTNodeForLView(tNode, hostLView);
     const lDetails = getLDeferBlockDetails(hostLView, tNode);
     ngDevMode && assertDefined(lDetails, 'Expected a defer block state defined');
+    const stateTmplIndex = getTemplateIndexForState(newState, hostLView, tNode);
     // Note: we transition to the next state if the previous state was represented
     // with a number that is less than the next state. For example, if the current
     // state is "loading" (represented as `2`), we should not show a placeholder
@@ -20525,7 +21075,7 @@ function renderDeferBlockState(newState, tNode, lContainer, stateTmplIndex) {
         const adjustedIndex = stateTmplIndex + HEADER_OFFSET;
         const tNode = getTNode(hostTView, adjustedIndex);
         // There is only 1 view that can be present in an LContainer that
-        // represents a `{#defer}` block, so always refer to the first one.
+        // represents a defer block, so always refer to the first one.
         const viewIndex = 0;
         removeLViewFromLContainer(lContainer, viewIndex);
         const dehydratedView = findMatchingDehydratedView(lContainer, tNode.tView.ssrId);
@@ -20533,18 +21083,27 @@ function renderDeferBlockState(newState, tNode, lContainer, stateTmplIndex) {
         addLViewToLContainer(lContainer, embeddedLView, viewIndex, shouldAddViewToDom(tNode, dehydratedView));
     }
 }
+/**
+ * Trigger prefetching of dependencies for a defer block.
+ *
+ * @param tDetails Static information about this defer block.
+ * @param lView LView of a host view.
+ */
+function triggerPrefetching(tDetails, lView) {
+    if (lView[INJECTOR$1] && shouldTriggerDeferBlock(lView[INJECTOR$1])) {
+        triggerResourceLoading(tDetails, lView);
+    }
+}
 /**
  * Trigger loading of defer block dependencies if the process hasn't started yet.
  *
  * @param tDetails Static information about this defer block.
- * @param tView TView of a host view.
  * @param lView LView of a host view.
  */
-function triggerResourceLoading(tDetails, tView, lView) {
+function triggerResourceLoading(tDetails, lView) {
     const injector = lView[INJECTOR$1];
-    if (!shouldTriggerDeferBlock(injector) ||
-        (tDetails.loadingState !== 0 /* DeferDependenciesLoadingState.NOT_STARTED */ &&
-            tDetails.loadingState !== 1 /* DeferDependenciesLoadingState.SCHEDULED */)) {
+    const tView = lView[TVIEW];
+    if (tDetails.loadingState !== DeferDependenciesLoadingState.NOT_STARTED) {
         // If the loading status is different from initial one, it means that
         // the loading of dependencies is in progress and there is nothing to do
         // in this function. All details can be obtained from the `tDetails` object.
@@ -20552,21 +21111,24 @@ function triggerResourceLoading(tDetails, tView, lView) {
     }
     const primaryBlockTNode = getPrimaryBlockTNode(tView, tDetails);
     // Switch from NOT_STARTED -> IN_PROGRESS state.
-    tDetails.loadingState = 2 /* DeferDependenciesLoadingState.IN_PROGRESS */;
+    tDetails.loadingState = DeferDependenciesLoadingState.IN_PROGRESS;
     // Check if dependency function interceptor is configured.
     const deferDependencyInterceptor = injector.get(DEFER_BLOCK_DEPENDENCY_INTERCEPTOR, null, { optional: true });
     const dependenciesFn = deferDependencyInterceptor ?
         deferDependencyInterceptor.intercept(tDetails.dependencyResolverFn) :
         tDetails.dependencyResolverFn;
     // The `dependenciesFn` might be `null` when all dependencies within
-    // a given `{#defer}` block were eagerly references elsewhere in a file,
+    // a given defer block were eagerly references elsewhere in a file,
     // thus no dynamic `import()`s were produced.
     if (!dependenciesFn) {
         tDetails.loadingPromise = Promise.resolve().then(() => {
-            tDetails.loadingState = 3 /* DeferDependenciesLoadingState.COMPLETE */;
+            tDetails.loadingState = DeferDependenciesLoadingState.COMPLETE;
         });
         return;
     }
+    // Defer block may have multiple prefetch triggers. Once the loading
+    // starts, invoke all clean functions, since they are no longer needed.
+    invokeTDetailsCleanup(injector, tDetails);
     // Start downloading of defer block dependencies.
     tDetails.loadingPromise = Promise.allSettled(dependenciesFn()).then(results => {
         let failed = false;
@@ -20594,10 +21156,10 @@ function triggerResourceLoading(tDetails, tView, lView) {
         // Loading is completed, we no longer need this Promise.
         tDetails.loadingPromise = null;
         if (failed) {
-            tDetails.loadingState = 4 /* DeferDependenciesLoadingState.FAILED */;
+            tDetails.loadingState = DeferDependenciesLoadingState.FAILED;
         }
         else {
-            tDetails.loadingState = 3 /* DeferDependenciesLoadingState.COMPLETE */;
+            tDetails.loadingState = DeferDependenciesLoadingState.COMPLETE;
             // Update directive and pipe registries to add newly downloaded dependencies.
             const primaryBlockTView = primaryBlockTNode.tView;
             if (directiveDefs.length > 0) {
@@ -20613,13 +21175,13 @@ function triggerResourceLoading(tDetails, tView, lView) {
         }
     });
 }
-/** Utility function to render `{:placeholder}` content (if present) */
+/** Utility function to render placeholder content (if present) */
 function renderPlaceholder(lView, tNode) {
     const tView = lView[TVIEW];
     const lContainer = lView[tNode.index];
     ngDevMode && assertLContainer(lContainer);
     const tDetails = getTDeferBlockDetails(tView, tNode);
-    renderDeferBlockState(1 /* DeferBlockInstanceState.PLACEHOLDER */, tNode, lContainer, tDetails.placeholderTmplIndex);
+    renderDeferBlockState(DeferBlockState.Placeholder, tNode, lContainer);
 }
 /**
  * Subscribes to the "loading" Promise and renders corresponding defer sub-block,
@@ -20632,13 +21194,13 @@ function renderDeferStateAfterResourceLoading(tDetails, tNode, lContainer) {
     ngDevMode &&
         assertDefined(tDetails.loadingPromise, 'Expected loading Promise to exist on this defer block');
     tDetails.loadingPromise.then(() => {
-        if (tDetails.loadingState === 3 /* DeferDependenciesLoadingState.COMPLETE */) {
+        if (tDetails.loadingState === DeferDependenciesLoadingState.COMPLETE) {
             ngDevMode && assertDeferredDependenciesLoaded(tDetails);
             // Everything is loaded, show the primary block content
-            renderDeferBlockState(3 /* DeferBlockInstanceState.COMPLETE */, tNode, lContainer, tDetails.primaryTmplIndex);
+            renderDeferBlockState(DeferBlockState.Complete, tNode, lContainer);
         }
-        else if (tDetails.loadingState === 4 /* DeferDependenciesLoadingState.FAILED */) {
-            renderDeferBlockState(4 /* DeferBlockInstanceState.ERROR */, tNode, lContainer, tDetails.errorTmplIndex);
+        else if (tDetails.loadingState === DeferDependenciesLoadingState.FAILED) {
+            renderDeferBlockState(DeferBlockState.Error, tNode, lContainer);
         }
     });
 }
@@ -20662,26 +21224,25 @@ function triggerDeferBlock(lView, tNode) {
     const tDetails = getTDeferBlockDetails(tView, tNode);
     // Condition is triggered, try to render loading state and start downloading.
     // Note: if a block is in a loading, completed or an error state, this call would be a noop.
-    renderDeferBlockState(2 /* DeferBlockInstanceState.LOADING */, tNode, lContainer, tDetails.loadingTmplIndex);
+    renderDeferBlockState(DeferBlockState.Loading, tNode, lContainer);
     switch (tDetails.loadingState) {
-        case 0 /* DeferDependenciesLoadingState.NOT_STARTED */:
-        case 1 /* DeferDependenciesLoadingState.SCHEDULED */:
-            triggerResourceLoading(tDetails, lView[TVIEW], lView);
+        case DeferDependenciesLoadingState.NOT_STARTED:
+            triggerResourceLoading(tDetails, lView);
             // The `loadingState` might have changed to "loading".
             if (tDetails.loadingState ===
-                2 /* DeferDependenciesLoadingState.IN_PROGRESS */) {
+                DeferDependenciesLoadingState.IN_PROGRESS) {
                 renderDeferStateAfterResourceLoading(tDetails, tNode, lContainer);
             }
             break;
-        case 2 /* DeferDependenciesLoadingState.IN_PROGRESS */:
+        case DeferDependenciesLoadingState.IN_PROGRESS:
             renderDeferStateAfterResourceLoading(tDetails, tNode, lContainer);
             break;
-        case 3 /* DeferDependenciesLoadingState.COMPLETE */:
+        case DeferDependenciesLoadingState.COMPLETE:
             ngDevMode && assertDeferredDependenciesLoaded(tDetails);
-            renderDeferBlockState(3 /* DeferBlockInstanceState.COMPLETE */, tNode, lContainer, tDetails.primaryTmplIndex);
+            renderDeferBlockState(DeferBlockState.Complete, tNode, lContainer);
             break;
-        case 4 /* DeferDependenciesLoadingState.FAILED */:
-            renderDeferBlockState(4 /* DeferBlockInstanceState.ERROR */, tNode, lContainer, tDetails.errorTmplIndex);
+        case DeferDependenciesLoadingState.FAILED:
+            renderDeferBlockState(DeferBlockState.Error, tNode, lContainer);
             break;
         default:
             if (ngDevMode) {
@@ -20695,7 +21256,7 @@ function triggerDeferBlock(lView, tNode) {
  * block in completed state.
  */
 function assertDeferredDependenciesLoaded(tDetails) {
-    assertEqual(tDetails.loadingState, 3 /* DeferDependenciesLoadingState.COMPLETE */, 'Expecting all deferred dependencies to be loaded.');
+    assertEqual(tDetails.loadingState, DeferDependenciesLoadingState.COMPLETE, 'Expecting all deferred dependencies to be loaded.');
 }
 /**
  * **INTERNAL**, avoid referencing it in application code.
@@ -20704,6 +21265,193 @@ function assertDeferredDependenciesLoaded(tDetails) {
  * implementation.
  */
 const DEFER_BLOCK_DEPENDENCY_INTERCEPTOR = new InjectionToken(ngDevMode ? 'DEFER_BLOCK_DEPENDENCY_INTERCEPTOR' : '');
+/**
+ * Determines if a given value matches the expected structure of a defer block
+ *
+ * We can safely rely on the primaryTmplIndex because every defer block requires
+ * that a primary template exists. All the other template options are optional.
+ */
+function isTDeferBlockDetails(value) {
+    return (typeof value === 'object') &&
+        (typeof value.primaryTmplIndex === 'number');
+}
+/**
+ * Internal token used for configuring defer block behavior.
+ */
+const DEFER_BLOCK_CONFIG = new InjectionToken(ngDevMode ? 'DEFER_BLOCK_CONFIG' : '');
+/**
+ * Retrieves all defer blocks in a given LView.
+ *
+ * @param lView lView with defer blocks
+ * @param deferBlocks defer block aggregator array
+ */
+function getDeferBlocks(lView, deferBlocks) {
+    const tView = lView[TVIEW];
+    for (let i = HEADER_OFFSET; i < tView.bindingStartIndex; i++) {
+        if (isLContainer(lView[i])) {
+            const lContainer = lView[i];
+            // An LContainer may represent an instance of a defer block, in which case
+            // we store it as a result. Otherwise, keep iterating over LContainer views and
+            // look for defer blocks.
+            const isLast = i === tView.bindingStartIndex - 1;
+            if (!isLast) {
+                const tNode = tView.data[i];
+                const tDetails = getTDeferBlockDetails(tView, tNode);
+                if (isTDeferBlockDetails(tDetails)) {
+                    deferBlocks.push({ lContainer, lView, tNode, tDetails });
+                    // This LContainer represents a defer block, so we exit
+                    // this iteration and don't inspect views in this LContainer.
+                    continue;
+                }
+            }
+            for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
+                getDeferBlocks(lContainer[i], deferBlocks);
+            }
+        }
+        else if (isLView(lView[i])) {
+            // This is a component, enter the `getDeferBlocks` recursively.
+            getDeferBlocks(lView[i], deferBlocks);
+        }
+    }
+}
+/**
+ * Registers a cleanup function associated with a prefetching trigger
+ * of a given defer block.
+ */
+function registerTDetailsCleanup(injector, tDetails, key, cleanupFn) {
+    injector.get(DeferBlockCleanupManager).add(tDetails, key, cleanupFn);
+}
+/**
+ * Invokes all registered prefetch cleanup triggers
+ * and removes all cleanup functions afterwards.
+ */
+function invokeTDetailsCleanup(injector, tDetails) {
+    injector.get(DeferBlockCleanupManager).cleanup(tDetails);
+}
+/**
+ * Internal service to keep track of cleanup functions associated
+ * with defer blocks. This class is used to manage cleanup functions
+ * created for prefetching triggers.
+ */
+class DeferBlockCleanupManager {
+    constructor() {
+        this.blocks = new Map();
+    }
+    add(tDetails, key, callback) {
+        if (!this.blocks.has(tDetails)) {
+            this.blocks.set(tDetails, new Map());
+        }
+        const block = this.blocks.get(tDetails);
+        if (!block.has(key)) {
+            block.set(key, []);
+        }
+        const callbacks = block.get(key);
+        callbacks.push(callback);
+    }
+    has(tDetails, key) {
+        return !!this.blocks.get(tDetails)?.has(key);
+    }
+    cleanup(tDetails) {
+        const block = this.blocks.get(tDetails);
+        if (block) {
+            for (const callbacks of Object.values(block)) {
+                for (const callback of callbacks) {
+                    callback();
+                }
+            }
+            this.blocks.delete(tDetails);
+        }
+    }
+    ngOnDestroy() {
+        for (const [block] of this.blocks) {
+            this.cleanup(block);
+        }
+        this.blocks.clear();
+    }
+    /** @nocollapse */
+    static { this.ɵprov = ɵɵdefineInjectable({
+        token: DeferBlockCleanupManager,
+        providedIn: 'root',
+        factory: () => new DeferBlockCleanupManager(),
+    }); }
+}
+/**
+ * Use shims for the `requestIdleCallback` and `cancelIdleCallback` functions for
+ * environments where those functions are not available (e.g. Node.js and Safari).
+ *
+ * Note: we wrap the `requestIdleCallback` call into a function, so that it can be
+ * overridden/mocked in test environment and picked up by the runtime code.
+ */
+const _requestIdleCallback = () => typeof requestIdleCallback !== 'undefined' ? requestIdleCallback : setTimeout;
+const _cancelIdleCallback = () => typeof requestIdleCallback !== 'undefined' ? cancelIdleCallback : clearTimeout;
+/**
+ * Helper service to schedule `requestIdleCallback`s for batches of defer blocks,
+ * to avoid calling `requestIdleCallback` for each defer block (e.g. if
+ * defer blocks are defined inside a for loop).
+ */
+class OnIdleScheduler {
+    constructor() {
+        // Indicates whether current callbacks are being invoked.
+        this.executingCallbacks = false;
+        // Currently scheduled idle callback id.
+        this.idleId = null;
+        // Set of callbacks to be invoked next.
+        this.current = new Set();
+        // Set of callbacks collected while invoking current set of callbacks.
+        // Those callbacks are scheduled for the next idle period.
+        this.deferred = new Set();
+        this.requestIdleCallback = _requestIdleCallback().bind(globalThis);
+        this.cancelIdleCallback = _cancelIdleCallback().bind(globalThis);
+    }
+    add(callback) {
+        const target = this.executingCallbacks ? this.deferred : this.current;
+        target.add(callback);
+        if (this.idleId === null) {
+            this.scheduleIdleCallback();
+        }
+    }
+    remove(callback) {
+        this.current.delete(callback);
+        this.deferred.delete(callback);
+    }
+    scheduleIdleCallback() {
+        const callback = () => {
+            this.cancelIdleCallback(this.idleId);
+            this.idleId = null;
+            this.executingCallbacks = true;
+            for (const callback of this.current) {
+                callback();
+            }
+            this.current.clear();
+            this.executingCallbacks = false;
+            // If there are any callbacks added during an invocation
+            // of the current ones - make them "current" and schedule
+            // a new idle callback.
+            if (this.deferred.size > 0) {
+                for (const callback of this.deferred) {
+                    this.current.add(callback);
+                }
+                this.deferred.clear();
+                this.scheduleIdleCallback();
+            }
+        };
+        this.idleId = this.requestIdleCallback(callback);
+    }
+    ngOnDestroy() {
+        if (this.idleId !== null) {
+            this.cancelIdleCallback(this.idleId);
+            this.idleId = null;
+        }
+        this.current.clear();
+        this.deferred.clear();
+    }
+    /** @nocollapse */
+    static { this.ɵprov = ɵɵdefineInjectable({
+        token: OnIdleScheduler,
+        providedIn: 'root',
+        factory: () => new OnIdleScheduler(),
+    }); }
+}
 
 function elementStartFirstCreatePass(index, tView, lView, name, attrsIndex, localRefsIndex) {
     ngDevMode && assertFirstCreatePass(tView);
@@ -25507,6 +26255,10 @@ function ɵɵsetNgModuleScope(type, scope) {
         ngModuleDef.declarations = convertToTypeArray(scope.declarations || EMPTY_ARRAY);
         ngModuleDef.imports = convertToTypeArray(scope.imports || EMPTY_ARRAY);
         ngModuleDef.exports = convertToTypeArray(scope.exports || EMPTY_ARRAY);
+        if (scope.bootstrap) {
+            // This only happens in local compilation mode.
+            ngModuleDef.bootstrap = convertToTypeArray(scope.bootstrap);
+        }
         depsTracker.registerNgModule(type, scope);
     });
 }
@@ -25514,11 +26266,12 @@ function convertToTypeArray(values) {
     if (typeof values === 'function') {
         return values;
     }
-    if (values.some(isForwardRef)) {
-        return () => values.map(resolveForwardRef).map(maybeUnwrapModuleWithProviders);
+    const flattenValues = flatten(values);
+    if (flattenValues.some(isForwardRef)) {
+        return () => flattenValues.map(resolveForwardRef).map(maybeUnwrapModuleWithProviders);
     }
     else {
-        return values.map(maybeUnwrapModuleWithProviders);
+        return flattenValues.map(maybeUnwrapModuleWithProviders);
     }
 }
 function maybeUnwrapModuleWithProviders(value) {
@@ -25919,7 +26672,7 @@ function getAsyncClassMetadata(type) {
 }
 /**
  * Handles the process of applying metadata info to a component class in case
- * component template had `{#defer}` blocks (thus some dependencies became deferrable).
+ * component template had defer blocks (thus some dependencies became deferrable).
  *
  * @param type Component class where metadata should be added
  * @param dependencyLoaderFn Function that loads dependencies
@@ -26667,16 +27420,13 @@ class QueryList {
      *    are compared as is (without any pre-processing).
      */
     reset(resultsTree, identityAccessor) {
-        // Cast to `QueryListInternal` so that we can mutate fields which are readonly for the usage of
-        // QueryList (but not for QueryList itself.)
-        const self = this;
-        self.dirty = false;
+        this.dirty = false;
         const newResultFlat = flatten(resultsTree);
-        if (this._changesDetected = !arrayEquals(self._results, newResultFlat, identityAccessor)) {
-            self._results = newResultFlat;
-            self.length = newResultFlat.length;
-            self.last = newResultFlat[this.length - 1];
-            self.first = newResultFlat[0];
+        if (this._changesDetected = !arrayEquals(this._results, newResultFlat, identityAccessor)) {
+            this._results = newResultFlat;
+            this.length = newResultFlat.length;
+            this.last = newResultFlat[this.length - 1];
+            this.first = newResultFlat[0];
         }
     }
     /**
@@ -27244,7 +27994,13 @@ function ɵɵtemplateRefExtractor(tNode, lView) {
 
 function ɵɵgetComponentDepsFactory(type, rawImports) {
     return () => {
-        return depsTracker.getComponentDependencies(type, rawImports).dependencies;
+        try {
+            return depsTracker.getComponentDependencies(type, rawImports).dependencies;
+        }
+        catch (e) {
+            console.error(`Computing dependencies in local compilation mode for the component "${type.name}" failed with the exception:`, e);
+            throw e;
+        }
     };
 }
 
@@ -28743,10 +29499,10 @@ class ApplicationInitStatus {
     static { this.ɵfac = function ApplicationInitStatus_Factory(t) { return new (t || ApplicationInitStatus)(); }; }
     static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: ApplicationInitStatus, factory: ApplicationInitStatus.ɵfac, providedIn: 'root' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ApplicationInitStatus, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ApplicationInitStatus, [{
         type: Injectable,
         args: [{ providedIn: 'root' }]
-    }], function () { return []; }, null); })();
+    }], () => [], null); })();
 
 class Console {
     log(message) {
@@ -28761,7 +29517,7 @@ class Console {
     static { this.ɵfac = function Console_Factory(t) { return new (t || Console)(); }; }
     static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: Console, factory: Console.ɵfac, providedIn: 'platform' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(Console, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(Console, [{
         type: Injectable,
         args: [{ providedIn: 'platform' }]
     }], null, null); })();
@@ -28972,7 +29728,7 @@ class InitialRenderPendingTasks {
     static { this.ɵfac = function InitialRenderPendingTasks_Factory(t) { return new (t || InitialRenderPendingTasks)(); }; }
     static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: InitialRenderPendingTasks, factory: InitialRenderPendingTasks.ɵfac, providedIn: 'root' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(InitialRenderPendingTasks, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(InitialRenderPendingTasks, [{
         type: Injectable,
         args: [{ providedIn: 'root' }]
     }], null, null); })();
@@ -29060,7 +29816,7 @@ class Compiler {
     static { this.ɵfac = function Compiler_Factory(t) { return new (t || Compiler)(); }; }
     static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: Compiler, factory: Compiler.ɵfac, providedIn: 'root' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(Compiler, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(Compiler, [{
         type: Injectable,
         args: [{ providedIn: 'root' }]
     }], null, null); })();
@@ -30024,12 +30780,12 @@ class Testability {
     static { this.ɵfac = function Testability_Factory(t) { return new (t || Testability)(ɵɵinject(NgZone), ɵɵinject(TestabilityRegistry), ɵɵinject(TESTABILITY_GETTER)); }; }
     static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: Testability, factory: Testability.ɵfac }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(Testability, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(Testability, [{
         type: Injectable
-    }], function () { return [{ type: NgZone }, { type: TestabilityRegistry }, { type: undefined, decorators: [{
+    }], () => [{ type: NgZone }, { type: TestabilityRegistry }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [TESTABILITY_GETTER]
-            }] }]; }, null); })();
+            }] }], null); })();
 /**
  * A global registry of {@link Testability} instances for specific elements.
  * @publicApi
@@ -30091,7 +30847,7 @@ class TestabilityRegistry {
     static { this.ɵfac = function TestabilityRegistry_Factory(t) { return new (t || TestabilityRegistry)(); }; }
     static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: TestabilityRegistry, factory: TestabilityRegistry.ɵfac, providedIn: 'platform' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(TestabilityRegistry, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(TestabilityRegistry, [{
         type: Injectable,
         args: [{ providedIn: 'platform' }]
     }], null, null); })();
@@ -30534,10 +31290,10 @@ class PlatformRef {
     static { this.ɵfac = function PlatformRef_Factory(t) { return new (t || PlatformRef)(ɵɵinject(Injector)); }; }
     static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: PlatformRef, factory: PlatformRef.ɵfac, providedIn: 'platform' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(PlatformRef, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(PlatformRef, [{
         type: Injectable,
         args: [{ providedIn: 'platform' }]
-    }], function () { return [{ type: Injector }]; }, null); })();
+    }], () => [{ type: Injector }], null); })();
 // Transforms a set of `BootstrapOptions` (supported by the NgModule-based bootstrap APIs) ->
 // `NgZoneOptions` that are recognized by the NgZone constructor. Passing no options will result in
 // a set of default options returned.
@@ -30917,7 +31673,7 @@ class ApplicationRef {
     static { this.ɵfac = function ApplicationRef_Factory(t) { return new (t || ApplicationRef)(); }; }
     static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: ApplicationRef, factory: ApplicationRef.ɵfac, providedIn: 'root' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ApplicationRef, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ApplicationRef, [{
         type: Injectable,
         args: [{ providedIn: 'root' }]
     }], null, null); })();
@@ -30976,7 +31732,7 @@ class NgZoneChangeDetectionScheduler {
     static { this.ɵfac = function NgZoneChangeDetectionScheduler_Factory(t) { return new (t || NgZoneChangeDetectionScheduler)(); }; }
     static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: NgZoneChangeDetectionScheduler, factory: NgZoneChangeDetectionScheduler.ɵfac, providedIn: 'root' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(NgZoneChangeDetectionScheduler, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(NgZoneChangeDetectionScheduler, [{
         type: Injectable,
         args: [{ providedIn: 'root' }]
     }], null, null); })();
@@ -31033,6 +31789,23 @@ function provideZoneChangeDetection(options) {
         zoneProviders,
     ]);
 }
+let whenStableStore;
+/**
+ * Returns a Promise that resolves when the application becomes stable after this method is called
+ * the first time.
+ */
+function whenStable(applicationRef) {
+    whenStableStore ??= new WeakMap();
+    const cachedWhenStable = whenStableStore.get(applicationRef);
+    if (cachedWhenStable) {
+        return cachedWhenStable;
+    }
+    const whenStablePromise = applicationRef.isStable.pipe(first((isStable) => isStable)).toPromise().then(() => void 0);
+    whenStableStore.set(applicationRef, whenStablePromise);
+    // Be a good citizen and clean the store `onDestroy` even though we are using `WeakMap`.
+    applicationRef.onDestroy(() => whenStableStore?.delete(applicationRef));
+    return whenStablePromise;
+}
 
 /**
  * Returns whether Angular is in development mode.
@@ -31752,9 +32525,9 @@ class ApplicationModule {
     static { this.ɵmod = /*@__PURE__*/ ɵɵdefineNgModule({ type: ApplicationModule }); }
     static { this.ɵinj = /*@__PURE__*/ ɵɵdefineInjector({}); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ApplicationModule, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ApplicationModule, [{
         type: NgModule
-    }], function () { return [{ type: ApplicationRef }]; }, null); })();
+    }], () => [{ type: ApplicationRef }], null); })();
 
 /**
  * A collection that tracks all serialized views (`ngh` DOM annotations)
@@ -32300,8 +33073,8 @@ function printHydrationStats(injector) {
 /**
  * Returns a Promise that is resolved when an application becomes stable.
  */
-function whenStable(appRef, injector) {
-    const isStablePromise = appRef.isStable.pipe(first((isStable) => isStable)).toPromise();
+function whenStableWithTimeout(appRef, injector) {
+    const whenStablePromise = whenStable(appRef);
     if (typeof ngDevMode !== 'undefined' && ngDevMode) {
         const timeoutTime = APPLICATION_IS_STABLE_TIMEOUT;
         const console = injector.get(Console);
@@ -32312,9 +33085,9 @@ function whenStable(appRef, injector) {
         const timeoutId = ngZone.runOutsideAngular(() => {
             return setTimeout(() => logWarningOnStableTimedout(timeoutTime, console), timeoutTime);
         });
-        isStablePromise.finally(() => clearTimeout(timeoutId));
+        whenStablePromise.finally(() => clearTimeout(timeoutId));
     }
-    return isStablePromise.then(() => { });
+    return whenStablePromise;
 }
 /**
  * Returns a set of providers required to setup hydration support
@@ -32393,7 +33166,7 @@ function withDomHydration() {
                         //
                         // Note: the cleanup task *MUST* be scheduled within the Angular zone
                         // to ensure that change detection is properly run afterward.
-                        whenStable(appRef, injector).then(() => {
+                        whenStableWithTimeout(appRef, injector).then(() => {
                             NgZone.assertInAngularZone();
                             cleanupDehydratedViews(appRef);
                             if (typeof ngDevMode !== 'undefined' && ngDevMode) {
@@ -32689,19 +33462,11 @@ class EffectHandle {
         this.effectFn = effectFn;
         this.creationZone = creationZone;
         this.errorHandler = errorHandler;
-        this.alive = true;
         this.watcher =
             watch((onCleanup) => this.runEffect(onCleanup), () => this.schedule(), allowSignalWrites);
         this.unregisterOnDestroy = destroyRef?.onDestroy(() => this.destroy());
     }
     runEffect(onCleanup) {
-        if (!this.alive) {
-            // Running a destroyed effect is a no-op.
-            return;
-        }
-        if (ngDevMode && isInNotificationPhase()) {
-            throw new Error(`Schedulers cannot synchronously execute effects while scheduling.`);
-        }
         try {
             this.effectFn(onCleanup);
         }
@@ -32713,17 +33478,13 @@ class EffectHandle {
         this.watcher.run();
     }
     schedule() {
-        if (!this.alive) {
-            return;
-        }
         this.scheduler.scheduleEffect(this);
     }
     notify() {
         this.watcher.notify();
     }
     destroy() {
-        this.alive = false;
-        this.watcher.cleanup();
+        this.watcher.destroy();
         this.unregisterOnDestroy?.();
         // Note: if the effect is currently scheduled, it's not un-scheduled, and so the scheduler will
         // retain a reference to it. Attempting to execute it will be a no-op.
@@ -32935,5 +33696,5 @@ if (typeof ngDevMode !== 'undefined' && ngDevMode) {
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATION_MODULE_TYPE, APP_BOOTSTRAP_LISTENER, APP_ID, APP_INITIALIZER, ApplicationInitStatus, ApplicationModule, ApplicationRef, Attribute, COMPILER_OPTIONS, CSP_NONCE, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Compiler, CompilerFactory, Component, ComponentFactory$1 as ComponentFactory, ComponentFactoryResolver$1 as ComponentFactoryResolver, ComponentRef$1 as ComponentRef, ContentChild, ContentChildren, DEFAULT_CURRENCY_CODE, DebugElement, DebugEventListener, DebugNode, DefaultIterableDiffer, DestroyRef, Directive, ENVIRONMENT_INITIALIZER, ElementRef, EmbeddedViewRef, EnvironmentInjector, ErrorHandler, EventEmitter, Host, HostBinding, HostListener, INJECTOR, Inject, InjectFlags, Injectable, InjectionToken, Injector, Input, IterableDiffers, KeyValueDiffers, LOCALE_ID, MissingTranslationStrategy, ModuleWithComponentFactories, NO_ERRORS_SCHEMA, NgModule, NgModuleFactory$1 as NgModuleFactory, NgModuleRef$1 as NgModuleRef, NgProbeToken, NgZone, Optional, Output, PACKAGE_ROOT_URL, PLATFORM_ID, PLATFORM_INITIALIZER, Pipe, PlatformRef, Query, QueryList, Renderer2, RendererFactory2, RendererStyleFlags2, Sanitizer, SecurityContext, Self, SimpleChange, SkipSelf, TRANSLATIONS, TRANSLATIONS_FORMAT, TemplateRef, Testability, TestabilityRegistry, TransferState, Type, VERSION, Version, ViewChild, ViewChildren, ViewContainerRef, ViewEncapsulation$1 as ViewEncapsulation, ViewRef, afterNextRender, afterRender, asNativeElements, assertInInjectionContext, assertPlatform, booleanAttribute, computed, createComponent, createEnvironmentInjector, createNgModule, createNgModuleRef, createPlatform, createPlatformFactory, defineInjectable, destroyPlatform, effect, enableProdMode, forwardRef, getDebugNode, getModuleFactory, getNgModuleById, getPlatform, importProvidersFrom, inject, isDevMode, isSignal, isStandalone, makeEnvironmentProviders, makeStateKey, mergeApplicationConfig, numberAttribute, platformCore, provideZoneChangeDetection, reflectComponentType, resolveForwardRef, runInInjectionContext, setTestabilityGetter, signal, untracked, ALLOW_MULTIPLE_PLATFORMS as ɵALLOW_MULTIPLE_PLATFORMS, AfterRenderEventManager as ɵAfterRenderEventManager, ComponentFactory$1 as ɵComponentFactory, Console as ɵConsole, DEFAULT_LOCALE_ID as ɵDEFAULT_LOCALE_ID, DEFER_BLOCK_DEPENDENCY_INTERCEPTOR as ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, ENABLED_SSR_FEATURES as ɵENABLED_SSR_FEATURES, EffectScheduler as ɵEffectScheduler, INJECTOR_SCOPE as ɵINJECTOR_SCOPE, IS_HYDRATION_DOM_REUSE_ENABLED as ɵIS_HYDRATION_DOM_REUSE_ENABLED, InitialRenderPendingTasks as ɵInitialRenderPendingTasks, LContext as ɵLContext, LifecycleHooksFeature as ɵLifecycleHooksFeature, LocaleDataIndex as ɵLocaleDataIndex, NG_COMP_DEF as ɵNG_COMP_DEF, NG_DIR_DEF as ɵNG_DIR_DEF, NG_ELEMENT_ID as ɵNG_ELEMENT_ID, NG_INJ_DEF as ɵNG_INJ_DEF, NG_MOD_DEF as ɵNG_MOD_DEF, NG_PIPE_DEF as ɵNG_PIPE_DEF, NG_PROV_DEF as ɵNG_PROV_DEF, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, NO_CHANGE as ɵNO_CHANGE, NgModuleFactory as ɵNgModuleFactory, NoopNgZone as ɵNoopNgZone, ReflectionCapabilities as ɵReflectionCapabilities, ComponentFactory as ɵRender3ComponentFactory, ComponentRef as ɵRender3ComponentRef, NgModuleRef as ɵRender3NgModuleRef, RuntimeError as ɵRuntimeError, SSR_CONTENT_INTEGRITY_MARKER as ɵSSR_CONTENT_INTEGRITY_MARKER, TESTABILITY as ɵTESTABILITY, TESTABILITY_GETTER as ɵTESTABILITY_GETTER, USE_RUNTIME_DEPS_TRACKER_FOR_JIT as ɵUSE_RUNTIME_DEPS_TRACKER_FOR_JIT, ViewRef$1 as ɵViewRef, XSS_SECURITY_URL as ɵXSS_SECURITY_URL, ZoneAwareQueueingScheduler as ɵZoneAwareQueueingScheduler, _sanitizeHtml as ɵ_sanitizeHtml, _sanitizeUrl as ɵ_sanitizeUrl, allowSanitizationBypassAndThrow as ɵallowSanitizationBypassAndThrow, annotateForHydration as ɵannotateForHydration, bypassSanitizationTrustHtml as ɵbypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl as ɵbypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript as ɵbypassSanitizationTrustScript, bypassSanitizationTrustStyle as ɵbypassSanitizationTrustStyle, bypassSanitizationTrustUrl as ɵbypassSanitizationTrustUrl, clearResolutionOfComponentResourcesQueue as ɵclearResolutionOfComponentResourcesQueue, compileComponent as ɵcompileComponent, compileDirective as ɵcompileDirective, compileNgModule as ɵcompileNgModule, compileNgModuleDefs as ɵcompileNgModuleDefs, compileNgModuleFactory as ɵcompileNgModuleFactory, compilePipe as ɵcompilePipe, convertToBitFlags as ɵconvertToBitFlags, createInjector as ɵcreateInjector, defaultIterableDiffers as ɵdefaultIterableDiffers, defaultKeyValueDiffers as ɵdefaultKeyValueDiffers, depsTracker as ɵdepsTracker, detectChanges as ɵdetectChanges, devModeEqual as ɵdevModeEqual, findLocaleData as ɵfindLocaleData, flushModuleScopingQueueAsMuchAsPossible as ɵflushModuleScopingQueueAsMuchAsPossible, formatRuntimeError as ɵformatRuntimeError, generateStandaloneInDeclarationsError as ɵgenerateStandaloneInDeclarationsError, getAsyncClassMetadata as ɵgetAsyncClassMetadata, getDebugNode as ɵgetDebugNode, getDirectives as ɵgetDirectives, getHostElement as ɵgetHostElement, getInjectableDef as ɵgetInjectableDef, getLContext as ɵgetLContext, getLocaleCurrencyCode as ɵgetLocaleCurrencyCode, getLocalePluralCase as ɵgetLocalePluralCase, getSanitizationBypassType as ɵgetSanitizationBypassType, ɵgetUnknownElementStrictMode, ɵgetUnknownPropertyStrictMode, _global as ɵglobal, injectChangeDetectorRef as ɵinjectChangeDetectorRef, internalCreateApplication as ɵinternalCreateApplication, isBoundToModule as ɵisBoundToModule, isComponentDefPendingResolution as ɵisComponentDefPendingResolution, isEnvironmentProviders as ɵisEnvironmentProviders, isInjectable as ɵisInjectable, isNgModule as ɵisNgModule, isPromise as ɵisPromise, isSubscribable as ɵisSubscribable, noSideEffects as ɵnoSideEffects, patchComponentDefWithScope as ɵpatchComponentDefWithScope, publishDefaultGlobalUtils$1 as ɵpublishDefaultGlobalUtils, publishGlobalUtil as ɵpublishGlobalUtil, registerLocaleData as ɵregisterLocaleData, resetCompiledComponents as ɵresetCompiledComponents, resetJitOptions as ɵresetJitOptions, resolveComponentResources as ɵresolveComponentResources, restoreComponentResolutionQueue as ɵrestoreComponentResolutionQueue, setAllowDuplicateNgModuleIdsForTest as ɵsetAllowDuplicateNgModuleIdsForTest, setAlternateWeakRefImpl as ɵsetAlternateWeakRefImpl, setClassMetadata as ɵsetClassMetadata, setClassMetadataAsync as ɵsetClassMetadataAsync, setCurrentInjector as ɵsetCurrentInjector, setDocument as ɵsetDocument, setInjectorProfilerContext as ɵsetInjectorProfilerContext, setLocaleId as ɵsetLocaleId, ɵsetUnknownElementStrictMode, ɵsetUnknownPropertyStrictMode, store as ɵstore, stringify as ɵstringify, transitiveScopesFor as ɵtransitiveScopesFor, unregisterAllLocaleData as ɵunregisterLocaleData, unwrapSafeValue as ɵunwrapSafeValue, withDomHydration as ɵwithDomHydration, ɵɵCopyDefinitionFeature, FactoryTarget as ɵɵFactoryTarget, ɵɵHostDirectivesFeature, ɵɵInheritDefinitionFeature, ɵɵInputTransformsFeature, ɵɵNgOnChangesFeature, ɵɵProvidersFeature, ɵɵStandaloneFeature, ɵɵadvance, ɵɵattribute, ɵɵattributeInterpolate1, ɵɵattributeInterpolate2, ɵɵattributeInterpolate3, ɵɵattributeInterpolate4, ɵɵattributeInterpolate5, ɵɵattributeInterpolate6, ɵɵattributeInterpolate7, ɵɵattributeInterpolate8, ɵɵattributeInterpolateV, ɵɵclassMap, ɵɵclassMapInterpolate1, ɵɵclassMapInterpolate2, ɵɵclassMapInterpolate3, ɵɵclassMapInterpolate4, ɵɵclassMapInterpolate5, ɵɵclassMapInterpolate6, ɵɵclassMapInterpolate7, ɵɵclassMapInterpolate8, ɵɵclassMapInterpolateV, ɵɵclassProp, ɵɵcomponentInstance, ɵɵconditional, ɵɵcontentQuery, ɵɵdefer, ɵɵdeferOnHover, ɵɵdeferOnIdle, ɵɵdeferOnImmediate, ɵɵdeferOnInteraction, ɵɵdeferOnTimer, ɵɵdeferOnViewport, ɵɵdeferPrefetchOnHover, ɵɵdeferPrefetchOnIdle, ɵɵdeferPrefetchOnImmediate, ɵɵdeferPrefetchOnInteraction, ɵɵdeferPrefetchOnTimer, ɵɵdeferPrefetchOnViewport, ɵɵdeferPrefetchWhen, ɵɵdeferWhen, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵdefineNgModule, ɵɵdefinePipe, ɵɵdirectiveInject, ɵɵdisableBindings, ɵɵelement, ɵɵelementContainer, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementStart, ɵɵenableBindings, ɵɵgetComponentDepsFactory, ɵɵgetCurrentView, ɵɵgetInheritedFactory, ɵɵhostProperty, ɵɵi18n, ɵɵi18nApply, ɵɵi18nAttributes, ɵɵi18nEnd, ɵɵi18nExp, ɵɵi18nPostprocess, ɵɵi18nStart, ɵɵinject, ɵɵinjectAttribute, ɵɵinvalidFactory, ɵɵinvalidFactoryDep, ɵɵlistener, ɵɵloadQuery, ɵɵnamespaceHTML, ɵɵnamespaceMathML, ɵɵnamespaceSVG, ɵɵnextContext, ɵɵngDeclareClassMetadata, ɵɵngDeclareComponent, ɵɵngDeclareDirective, ɵɵngDeclareFactory, ɵɵngDeclareInjectable, ɵɵngDeclareInjector, ɵɵngDeclareNgModule, ɵɵngDeclarePipe, ɵɵpipe, ɵɵpipeBind1, ɵɵpipeBind2, ɵɵpipeBind3, ɵɵpipeBind4, ɵɵpipeBindV, ɵɵprojection, ɵɵprojectionDef, ɵɵproperty, ɵɵpropertyInterpolate, ɵɵpropertyInterpolate1, ɵɵpropertyInterpolate2, ɵɵpropertyInterpolate3, ɵɵpropertyInterpolate4, ɵɵpropertyInterpolate5, ɵɵpropertyInterpolate6, ɵɵpropertyInterpolate7, ɵɵpropertyInterpolate8, ɵɵpropertyInterpolateV, ɵɵpureFunction0, ɵɵpureFunction1, ɵɵpureFunction2, ɵɵpureFunction3, ɵɵpureFunction4, ɵɵpureFunction5, ɵɵpureFunction6, ɵɵpureFunction7, ɵɵpureFunction8, ɵɵpureFunctionV, ɵɵqueryRefresh, ɵɵreference, registerNgModuleType as ɵɵregisterNgModuleType, ɵɵrepeater, ɵɵrepeaterCreate, ɵɵrepeaterTrackByIdentity, ɵɵrepeaterTrackByIndex, ɵɵresetView, ɵɵresolveBody, ɵɵresolveDocument, ɵɵresolveWindow, ɵɵrestoreView, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl, ɵɵsanitizeUrlOrResourceUrl, ɵɵsetComponentScope, ɵɵsetNgModuleScope, ɵɵstyleMap, ɵɵstyleMapInterpolate1, ɵɵstyleMapInterpolate2, ɵɵstyleMapInterpolate3, ɵɵstyleMapInterpolate4, ɵɵstyleMapInterpolate5, ɵɵstyleMapInterpolate6, ɵɵstyleMapInterpolate7, ɵɵstyleMapInterpolate8, ɵɵstyleMapInterpolateV, ɵɵstyleProp, ɵɵstylePropInterpolate1, ɵɵstylePropInterpolate2, ɵɵstylePropInterpolate3, ɵɵstylePropInterpolate4, ɵɵstylePropInterpolate5, ɵɵstylePropInterpolate6, ɵɵstylePropInterpolate7, ɵɵstylePropInterpolate8, ɵɵstylePropInterpolateV, ɵɵsyntheticHostListener, ɵɵsyntheticHostProperty, ɵɵtemplate, ɵɵtemplateRefExtractor, ɵɵtext, ɵɵtextInterpolate, ɵɵtextInterpolate1, ɵɵtextInterpolate2, ɵɵtextInterpolate3, ɵɵtextInterpolate4, ɵɵtextInterpolate5, ɵɵtextInterpolate6, ɵɵtextInterpolate7, ɵɵtextInterpolate8, ɵɵtextInterpolateV, ɵɵtrustConstantHtml, ɵɵtrustConstantResourceUrl, ɵɵvalidateIframeAttribute, ɵɵviewQuery };
+export { ANIMATION_MODULE_TYPE, APP_BOOTSTRAP_LISTENER, APP_ID, APP_INITIALIZER, AfterRenderPhase, ApplicationInitStatus, ApplicationModule, ApplicationRef, Attribute, COMPILER_OPTIONS, CSP_NONCE, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Compiler, CompilerFactory, Component, ComponentFactory$1 as ComponentFactory, ComponentFactoryResolver$1 as ComponentFactoryResolver, ComponentRef$1 as ComponentRef, ContentChild, ContentChildren, DEFAULT_CURRENCY_CODE, DebugElement, DebugEventListener, DebugNode, DefaultIterableDiffer, DestroyRef, Directive, ENVIRONMENT_INITIALIZER, ElementRef, EmbeddedViewRef, EnvironmentInjector, ErrorHandler, EventEmitter, Host, HostBinding, HostListener, INJECTOR, Inject, InjectFlags, Injectable, InjectionToken, Injector, Input, IterableDiffers, KeyValueDiffers, LOCALE_ID, MissingTranslationStrategy, ModuleWithComponentFactories, NO_ERRORS_SCHEMA, NgModule, NgModuleFactory$1 as NgModuleFactory, NgModuleRef$1 as NgModuleRef, NgProbeToken, NgZone, Optional, Output, PACKAGE_ROOT_URL, PLATFORM_ID, PLATFORM_INITIALIZER, Pipe, PlatformRef, Query, QueryList, Renderer2, RendererFactory2, RendererStyleFlags2, Sanitizer, SecurityContext, Self, SimpleChange, SkipSelf, TRANSLATIONS, TRANSLATIONS_FORMAT, TemplateRef, Testability, TestabilityRegistry, TransferState, Type, VERSION, Version, ViewChild, ViewChildren, ViewContainerRef, ViewEncapsulation$1 as ViewEncapsulation, ViewRef, afterNextRender, afterRender, asNativeElements, assertInInjectionContext, assertPlatform, booleanAttribute, computed, createComponent, createEnvironmentInjector, createNgModule, createNgModuleRef, createPlatform, createPlatformFactory, defineInjectable, destroyPlatform, effect, enableProdMode, forwardRef, getDebugNode, getModuleFactory, getNgModuleById, getPlatform, importProvidersFrom, inject, isDevMode, isSignal, isStandalone, makeEnvironmentProviders, makeStateKey, mergeApplicationConfig, numberAttribute, platformCore, provideZoneChangeDetection, reflectComponentType, resolveForwardRef, runInInjectionContext, setTestabilityGetter, signal, untracked, ALLOW_MULTIPLE_PLATFORMS as ɵALLOW_MULTIPLE_PLATFORMS, AfterRenderEventManager as ɵAfterRenderEventManager, CONTAINER_HEADER_OFFSET as ɵCONTAINER_HEADER_OFFSET, ComponentFactory$1 as ɵComponentFactory, Console as ɵConsole, DEFAULT_LOCALE_ID as ɵDEFAULT_LOCALE_ID, DEFER_BLOCK_CONFIG as ɵDEFER_BLOCK_CONFIG, DEFER_BLOCK_DEPENDENCY_INTERCEPTOR as ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, DeferBlockBehavior as ɵDeferBlockBehavior, DeferBlockState as ɵDeferBlockState, ENABLED_SSR_FEATURES as ɵENABLED_SSR_FEATURES, EffectScheduler as ɵEffectScheduler, INJECTOR_SCOPE as ɵINJECTOR_SCOPE, IS_HYDRATION_DOM_REUSE_ENABLED as ɵIS_HYDRATION_DOM_REUSE_ENABLED, InitialRenderPendingTasks as ɵInitialRenderPendingTasks, LContext as ɵLContext, LifecycleHooksFeature as ɵLifecycleHooksFeature, LocaleDataIndex as ɵLocaleDataIndex, NG_COMP_DEF as ɵNG_COMP_DEF, NG_DIR_DEF as ɵNG_DIR_DEF, NG_ELEMENT_ID as ɵNG_ELEMENT_ID, NG_INJ_DEF as ɵNG_INJ_DEF, NG_MOD_DEF as ɵNG_MOD_DEF, NG_PIPE_DEF as ɵNG_PIPE_DEF, NG_PROV_DEF as ɵNG_PROV_DEF, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, NO_CHANGE as ɵNO_CHANGE, NgModuleFactory as ɵNgModuleFactory, NoopNgZone as ɵNoopNgZone, ReflectionCapabilities as ɵReflectionCapabilities, ComponentFactory as ɵRender3ComponentFactory, ComponentRef as ɵRender3ComponentRef, NgModuleRef as ɵRender3NgModuleRef, RuntimeError as ɵRuntimeError, SSR_CONTENT_INTEGRITY_MARKER as ɵSSR_CONTENT_INTEGRITY_MARKER, TESTABILITY as ɵTESTABILITY, TESTABILITY_GETTER as ɵTESTABILITY_GETTER, USE_RUNTIME_DEPS_TRACKER_FOR_JIT as ɵUSE_RUNTIME_DEPS_TRACKER_FOR_JIT, ViewRef$1 as ɵViewRef, XSS_SECURITY_URL as ɵXSS_SECURITY_URL, ZoneAwareQueueingScheduler as ɵZoneAwareQueueingScheduler, _sanitizeHtml as ɵ_sanitizeHtml, _sanitizeUrl as ɵ_sanitizeUrl, allowSanitizationBypassAndThrow as ɵallowSanitizationBypassAndThrow, annotateForHydration as ɵannotateForHydration, bypassSanitizationTrustHtml as ɵbypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl as ɵbypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript as ɵbypassSanitizationTrustScript, bypassSanitizationTrustStyle as ɵbypassSanitizationTrustStyle, bypassSanitizationTrustUrl as ɵbypassSanitizationTrustUrl, clearResolutionOfComponentResourcesQueue as ɵclearResolutionOfComponentResourcesQueue, compileComponent as ɵcompileComponent, compileDirective as ɵcompileDirective, compileNgModule as ɵcompileNgModule, compileNgModuleDefs as ɵcompileNgModuleDefs, compileNgModuleFactory as ɵcompileNgModuleFactory, compilePipe as ɵcompilePipe, convertToBitFlags as ɵconvertToBitFlags, createInjector as ɵcreateInjector, defaultIterableDiffers as ɵdefaultIterableDiffers, defaultKeyValueDiffers as ɵdefaultKeyValueDiffers, depsTracker as ɵdepsTracker, detectChanges as ɵdetectChanges, devModeEqual as ɵdevModeEqual, findLocaleData as ɵfindLocaleData, flushModuleScopingQueueAsMuchAsPossible as ɵflushModuleScopingQueueAsMuchAsPossible, formatRuntimeError as ɵformatRuntimeError, generateStandaloneInDeclarationsError as ɵgenerateStandaloneInDeclarationsError, getAsyncClassMetadata as ɵgetAsyncClassMetadata, getDebugNode as ɵgetDebugNode, getDeferBlocks as ɵgetDeferBlocks, getDirectives as ɵgetDirectives, getHostElement as ɵgetHostElement, getInjectableDef as ɵgetInjectableDef, getLContext as ɵgetLContext, getLocaleCurrencyCode as ɵgetLocaleCurrencyCode, getLocalePluralCase as ɵgetLocalePluralCase, getSanitizationBypassType as ɵgetSanitizationBypassType, ɵgetUnknownElementStrictMode, ɵgetUnknownPropertyStrictMode, _global as ɵglobal, injectChangeDetectorRef as ɵinjectChangeDetectorRef, internalCreateApplication as ɵinternalCreateApplication, isBoundToModule as ɵisBoundToModule, isComponentDefPendingResolution as ɵisComponentDefPendingResolution, isEnvironmentProviders as ɵisEnvironmentProviders, isInjectable as ɵisInjectable, isNgModule as ɵisNgModule, isPromise as ɵisPromise, isSubscribable as ɵisSubscribable, noSideEffects as ɵnoSideEffects, patchComponentDefWithScope as ɵpatchComponentDefWithScope, publishDefaultGlobalUtils$1 as ɵpublishDefaultGlobalUtils, publishGlobalUtil as ɵpublishGlobalUtil, registerLocaleData as ɵregisterLocaleData, renderDeferBlockState as ɵrenderDeferBlockState, resetCompiledComponents as ɵresetCompiledComponents, resetJitOptions as ɵresetJitOptions, resolveComponentResources as ɵresolveComponentResources, restoreComponentResolutionQueue as ɵrestoreComponentResolutionQueue, setAllowDuplicateNgModuleIdsForTest as ɵsetAllowDuplicateNgModuleIdsForTest, setAlternateWeakRefImpl as ɵsetAlternateWeakRefImpl, setClassMetadata as ɵsetClassMetadata, setClassMetadataAsync as ɵsetClassMetadataAsync, setCurrentInjector as ɵsetCurrentInjector, setDocument as ɵsetDocument, setInjectorProfilerContext as ɵsetInjectorProfilerContext, setLocaleId as ɵsetLocaleId, ɵsetUnknownElementStrictMode, ɵsetUnknownPropertyStrictMode, store as ɵstore, stringify as ɵstringify, transitiveScopesFor as ɵtransitiveScopesFor, triggerResourceLoading as ɵtriggerResourceLoading, unregisterAllLocaleData as ɵunregisterLocaleData, unwrapSafeValue as ɵunwrapSafeValue, whenStable as ɵwhenStable, withDomHydration as ɵwithDomHydration, ɵɵCopyDefinitionFeature, FactoryTarget as ɵɵFactoryTarget, ɵɵHostDirectivesFeature, ɵɵInheritDefinitionFeature, ɵɵInputTransformsFeature, ɵɵNgOnChangesFeature, ɵɵProvidersFeature, ɵɵStandaloneFeature, ɵɵadvance, ɵɵattribute, ɵɵattributeInterpolate1, ɵɵattributeInterpolate2, ɵɵattributeInterpolate3, ɵɵattributeInterpolate4, ɵɵattributeInterpolate5, ɵɵattributeInterpolate6, ɵɵattributeInterpolate7, ɵɵattributeInterpolate8, ɵɵattributeInterpolateV, ɵɵclassMap, ɵɵclassMapInterpolate1, ɵɵclassMapInterpolate2, ɵɵclassMapInterpolate3, ɵɵclassMapInterpolate4, ɵɵclassMapInterpolate5, ɵɵclassMapInterpolate6, ɵɵclassMapInterpolate7, ɵɵclassMapInterpolate8, ɵɵclassMapInterpolateV, ɵɵclassProp, ɵɵcomponentInstance, ɵɵconditional, ɵɵcontentQuery, ɵɵdefer, ɵɵdeferOnHover, ɵɵdeferOnIdle, ɵɵdeferOnImmediate, ɵɵdeferOnInteraction, ɵɵdeferOnTimer, ɵɵdeferOnViewport, ɵɵdeferPrefetchOnHover, ɵɵdeferPrefetchOnIdle, ɵɵdeferPrefetchOnImmediate, ɵɵdeferPrefetchOnInteraction, ɵɵdeferPrefetchOnTimer, ɵɵdeferPrefetchOnViewport, ɵɵdeferPrefetchWhen, ɵɵdeferWhen, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵdefineNgModule, ɵɵdefinePipe, ɵɵdirectiveInject, ɵɵdisableBindings, ɵɵelement, ɵɵelementContainer, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementStart, ɵɵenableBindings, ɵɵgetComponentDepsFactory, ɵɵgetCurrentView, ɵɵgetInheritedFactory, ɵɵhostProperty, ɵɵi18n, ɵɵi18nApply, ɵɵi18nAttributes, ɵɵi18nEnd, ɵɵi18nExp, ɵɵi18nPostprocess, ɵɵi18nStart, ɵɵinject, ɵɵinjectAttribute, ɵɵinvalidFactory, ɵɵinvalidFactoryDep, ɵɵlistener, ɵɵloadQuery, ɵɵnamespaceHTML, ɵɵnamespaceMathML, ɵɵnamespaceSVG, ɵɵnextContext, ɵɵngDeclareClassMetadata, ɵɵngDeclareComponent, ɵɵngDeclareDirective, ɵɵngDeclareFactory, ɵɵngDeclareInjectable, ɵɵngDeclareInjector, ɵɵngDeclareNgModule, ɵɵngDeclarePipe, ɵɵpipe, ɵɵpipeBind1, ɵɵpipeBind2, ɵɵpipeBind3, ɵɵpipeBind4, ɵɵpipeBindV, ɵɵprojection, ɵɵprojectionDef, ɵɵproperty, ɵɵpropertyInterpolate, ɵɵpropertyInterpolate1, ɵɵpropertyInterpolate2, ɵɵpropertyInterpolate3, ɵɵpropertyInterpolate4, ɵɵpropertyInterpolate5, ɵɵpropertyInterpolate6, ɵɵpropertyInterpolate7, ɵɵpropertyInterpolate8, ɵɵpropertyInterpolateV, ɵɵpureFunction0, ɵɵpureFunction1, ɵɵpureFunction2, ɵɵpureFunction3, ɵɵpureFunction4, ɵɵpureFunction5, ɵɵpureFunction6, ɵɵpureFunction7, ɵɵpureFunction8, ɵɵpureFunctionV, ɵɵqueryRefresh, ɵɵreference, registerNgModuleType as ɵɵregisterNgModuleType, ɵɵrepeater, ɵɵrepeaterCreate, ɵɵrepeaterTrackByIdentity, ɵɵrepeaterTrackByIndex, ɵɵresetView, ɵɵresolveBody, ɵɵresolveDocument, ɵɵresolveWindow, ɵɵrestoreView, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl, ɵɵsanitizeUrlOrResourceUrl, ɵɵsetComponentScope, ɵɵsetNgModuleScope, ɵɵstyleMap, ɵɵstyleMapInterpolate1, ɵɵstyleMapInterpolate2, ɵɵstyleMapInterpolate3, ɵɵstyleMapInterpolate4, ɵɵstyleMapInterpolate5, ɵɵstyleMapInterpolate6, ɵɵstyleMapInterpolate7, ɵɵstyleMapInterpolate8, ɵɵstyleMapInterpolateV, ɵɵstyleProp, ɵɵstylePropInterpolate1, ɵɵstylePropInterpolate2, ɵɵstylePropInterpolate3, ɵɵstylePropInterpolate4, ɵɵstylePropInterpolate5, ɵɵstylePropInterpolate6, ɵɵstylePropInterpolate7, ɵɵstylePropInterpolate8, ɵɵstylePropInterpolateV, ɵɵsyntheticHostListener, ɵɵsyntheticHostProperty, ɵɵtemplate, ɵɵtemplateRefExtractor, ɵɵtext, ɵɵtextInterpolate, ɵɵtextInterpolate1, ɵɵtextInterpolate2, ɵɵtextInterpolate3, ɵɵtextInterpolate4, ɵɵtextInterpolate5, ɵɵtextInterpolate6, ɵɵtextInterpolate7, ɵɵtextInterpolate8, ɵɵtextInterpolateV, ɵɵtrustConstantHtml, ɵɵtrustConstantResourceUrl, ɵɵvalidateIframeAttribute, ɵɵviewQuery };
 //# sourceMappingURL=core.mjs.map