@angular/core 16.0.0-next.3 → 16.0.0-next.5

package/{fesm2020 → fesm2022}/testing.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v16.0.0-next.3
+ * @license Angular v16.0.0-next.5
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -7,6 +7,7 @@
 import { getDebugNode, RendererFactory2 as RendererFactory2$1, InjectionToken as InjectionToken$1, ɵstringify, ɵReflectionCapabilities, Directive, Component, Pipe, NgModule, ɵgetInjectableDef, resolveForwardRef as resolveForwardRef$1, ɵNG_COMP_DEF, ɵRender3NgModuleRef, ApplicationInitStatus, LOCALE_ID as LOCALE_ID$1, ɵDEFAULT_LOCALE_ID, ɵsetLocaleId, ɵRender3ComponentFactory, ɵcompileComponent, ɵNG_DIR_DEF, ɵcompileDirective, ɵNG_PIPE_DEF, ɵcompilePipe, ɵNG_MOD_DEF, ɵtransitiveScopesFor, ɵpatchComponentDefWithScope, ɵNG_INJ_DEF, ɵcompileNgModuleDefs, NgZone, ɵprovideNgZoneChangeDetection, Compiler, COMPILER_OPTIONS, ɵNgModuleFactory, ɵisEnvironmentProviders, ModuleWithComponentFactories, ɵconvertToBitFlags, Injector as Injector$1, InjectFlags as InjectFlags$1, ɵsetAllowDuplicateNgModuleIdsForTest, ɵresetCompiledComponents, ɵsetUnknownElementStrictMode as ɵsetUnknownElementStrictMode$1, ɵsetUnknownPropertyStrictMode as ɵsetUnknownPropertyStrictMode$1, ɵgetUnknownElementStrictMode as ɵgetUnknownElementStrictMode$1, ɵgetUnknownPropertyStrictMode as ɵgetUnknownPropertyStrictMode$1, EnvironmentInjector as EnvironmentInjector$1, ɵflushModuleScopingQueueAsMuchAsPossible } from '@angular/core';
 import { ResourceLoader } from '@angular/compiler';
 import { Subject, Subscription } from 'rxjs';
+import { first } from 'rxjs/operators';
 
 /**
  * Wraps a test function in an asynchronous test zone. The test will automatically
@@ -1638,6 +1639,7 @@ function ngDevModeResetPerfCounters() {
         hydratedNodes: 0,
         hydratedComponents: 0,
         dehydratedViewsRemoved: 0,
+        dehydratedViewsCleanupRuns: 0,
     };
     // Make sure to refer to ngDevMode as ['ngDevMode'] for closure.
     const allowNgDevModeTrue = locationString.indexOf('ngDevMode=false') === -1;
@@ -1840,6 +1842,9 @@ const SOURCE = '__source';
  * - Injector instance: Use the injector for resolution.
  */
 let _currentInjector = undefined;
+function getCurrentInjector() {
+    return _currentInjector;
+}
 function setCurrentInjector(injector) {
     const former = _currentInjector;
     _currentInjector = injector;
@@ -1848,7 +1853,7 @@ function setCurrentInjector(injector) {
 function injectInjectorOnly(token, flags = InjectFlags.Default) {
     if (_currentInjector === undefined) {
         throw new RuntimeError(-203 /* RuntimeErrorCode.MISSING_INJECTION_CONTEXT */, ngDevMode &&
-            `inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with \`EnvironmentInjector#runInContext\`.`);
+            `inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with \`runInInjectionContext\`.`);
     }
     else if (_currentInjector === null) {
         return injectRootLimpMode(token, undefined, flags);
@@ -2446,12 +2451,19 @@ function isCssClassMatching(attrs, cssClassToMatch, isProjectionMode) {
     ngDevMode &&
         assertEqual(cssClassToMatch, cssClassToMatch.toLowerCase(), 'Class name expected to be lowercase.');
     let i = 0;
+    // Indicates whether we are processing value from the implicit
+    // attribute section (i.e. before the first marker in the array).
+    let isImplicitAttrsSection = true;
     while (i < attrs.length) {
         let item = attrs[i++];
-        if (isProjectionMode && item === 'class') {
-            item = attrs[i];
-            if (classIndexOf(item.toLowerCase(), cssClassToMatch, 0) !== -1) {
-                return true;
+        if (typeof item === 'string' && isImplicitAttrsSection) {
+            const value = attrs[i++];
+            if (isProjectionMode && item === 'class') {
+                // We found a `class` attribute in the implicit attribute section,
+                // check if it matches the value of the `cssClassToMatch` argument.
+                if (classIndexOf(value.toLowerCase(), cssClassToMatch, 0) !== -1) {
+                    return true;
+                }
             }
         }
         else if (item === 1 /* AttributeMarker.Classes */) {
@@ -2463,6 +2475,11 @@ function isCssClassMatching(attrs, cssClassToMatch, isProjectionMode) {
             }
             return false;
         }
+        else if (typeof item === 'number') {
+            // We've came across a first marker, which indicates
+            // that the implicit attribute section is over.
+            isImplicitAttrsSection = false;
+        }
     }
     return false;
 }
@@ -3217,6 +3234,8 @@ const ID = 20;
 const EMBEDDED_VIEW_INJECTOR = 21;
 const ON_DESTROY_HOOKS = 22;
 const HYDRATION = 23;
+const REACTIVE_TEMPLATE_CONSUMER = 24;
+const REACTIVE_HOST_BINDING_CONSUMER = 25;
 /**
  * Size of LView's header. Necessary to adjust for it when setting slots.
  *
@@ -3224,7 +3243,7 @@ const HYDRATION = 23;
  * instruction index into `LView` index. All other indexes should be in the `LView` index space and
  * there should be no need to refer to `HEADER_OFFSET` anywhere else.
  */
-const HEADER_OFFSET = 24;
+const HEADER_OFFSET = 26;
 // Note: This hack is necessary so we don't erroneously get a circular dependency
 // failure based on types.
 const unusedValueExportToPlacateAjd$4 = 1;
@@ -3297,6 +3316,9 @@ function isComponentDef(def) {
 function isRootView(target) {
     return (target[FLAGS] & 256 /* LViewFlags.IsRoot */) !== 0;
 }
+function isProjectionTNode(tNode) {
+    return (tNode.type & 16 /* TNodeType.Projection */) === 16 /* TNodeType.Projection */;
+}
 
 // [Assert functions do not constraint type when they are guarded by a truthy
 // expression.](https://github.com/microsoft/TypeScript/issues/37295)
@@ -3710,6 +3732,17 @@ function storeLViewOnDestroy(lView, onDestroyCallback) {
     }
     lView[ON_DESTROY_HOOKS].push(onDestroyCallback);
 }
+/**
+ * Removes previously registered LView-specific destroy callback.
+ */
+function removeLViewOnDestroy(lView, onDestroyCallback) {
+    if (lView[ON_DESTROY_HOOKS] === null)
+        return;
+    const destroyCBIdx = lView[ON_DESTROY_HOOKS].indexOf(onDestroyCallback);
+    if (destroyCBIdx !== -1) {
+        lView[ON_DESTROY_HOOKS].splice(destroyCBIdx, 1);
+    }
+}
 
 const instructionState = {
     lFrame: createLFrame(null),
@@ -6711,6 +6744,8 @@ function detachView(lContainer, removeIndex) {
 function destroyLView(tView, lView) {
     if (!(lView[FLAGS] & 128 /* LViewFlags.Destroyed */)) {
         const renderer = lView[RENDERER];
+        lView[REACTIVE_TEMPLATE_CONSUMER]?.destroy();
+        lView[REACTIVE_HOST_BINDING_CONSUMER]?.destroy();
         if (renderer.destroyNode) {
             applyView(tView, lView, renderer, 3 /* WalkTNodeTreeAction.Destroy */, null, null);
         }
@@ -7111,15 +7146,12 @@ function nativeRemoveNode(renderer, rNode, isHostElement) {
     }
 }
 /**
- * Removes the contents of a given RElement using a given renderer.
+ * Clears the contents of a given RElement.
  *
- * @param renderer A renderer to be used
  * @param rElement the native RElement to be cleared
  */
-function clearElementContents(renderer, rElement) {
-    while (rElement.firstChild) {
-        nativeRemoveChild(renderer, rElement, rElement.firstChild, false);
-    }
+function clearElementContents(rElement) {
+    rElement.textContent = '';
 }
 /**
  * Performs the operation of `action` on the node. Typically this involves inserting or removing
@@ -8512,7 +8544,7 @@ function internalImportProvidersFrom(checkForStandaloneCmp, ...sources) {
         // Narrow `source` to access the internal type analogue for `ModuleWithProviders`.
         const internalSource = source;
         if (walkProviderTree(internalSource, providersOut, [], dedup)) {
-            injectorTypesWithProviders || (injectorTypesWithProviders = []);
+            injectorTypesWithProviders ||= [];
             injectorTypesWithProviders.push(internalSource);
         }
     });
@@ -8608,7 +8640,7 @@ function walkProviderTree(container, providersOut, parents, dedup) {
             try {
                 deepForEach(injDef.imports, imported => {
                     if (walkProviderTree(imported, providersOut, parents, dedup)) {
-                        importTypesWithProviders || (importTypesWithProviders = []);
+                        importTypesWithProviders ||= [];
                         // If the processed import is an injector type with providers, we store it in the
                         // list of import types with providers, so that we can process those afterwards.
                         importTypesWithProviders.push(imported);
@@ -8805,6 +8837,7 @@ class R3Injector extends EnvironmentInjector {
     }
     onDestroy(callback) {
         this._onDestroyHooks.push(callback);
+        return () => this.removeOnDestroy(callback);
     }
     runInContext(fn) {
         this.assertNotDestroyed();
@@ -8979,6 +9012,12 @@ class R3Injector extends EnvironmentInjector {
             return this.injectorDefTypes.has(providedIn);
         }
     }
+    removeOnDestroy(callback) {
+        const destroyCBIdx = this._onDestroyHooks.indexOf(callback);
+        if (destroyCBIdx !== -1) {
+            this._onDestroyHooks.splice(destroyCBIdx, 1);
+        }
+    }
 }
 function injectableDefOrInjectorDefFactory(token) {
     // Most tokens will have an injectable def directly on them, which specifies a factory directly.
@@ -9164,6 +9203,37 @@ const PACKAGE_ROOT_URL = new InjectionToken('Application Packages Root URL');
  * @publicApi
  */
 const ANIMATION_MODULE_TYPE = new InjectionToken('AnimationModuleType');
+// TODO(crisbeto): link to CSP guide here.
+/**
+ * Token used to configure the [Content Security Policy](https://web.dev/strict-csp/) nonce that
+ * Angular will apply when inserting inline styles. If not provided, Angular will look up its value
+ * from the `ngCspNonce` attribute of the application root node.
+ *
+ * @publicApi
+ */
+const CSP_NONCE = new InjectionToken('CSP nonce', {
+    providedIn: 'root',
+    factory: () => {
+        // Ideally we wouldn't have to use `querySelector` here since we know that the nonce will be on
+        // the root node, but because the token value is used in renderers, it has to be available
+        // *very* early in the bootstrapping process. This should be a fairly shallow search, because
+        // the app won't have been added to the DOM yet. Some approaches that were considered:
+        // 1. Find the root node through `ApplicationRef.components[i].location` - normally this would
+        // be enough for our purposes, but the token is injected very early so the `components` array
+        // isn't populated yet.
+        // 2. Find the root `LView` through the current `LView` - renderers are a prerequisite to
+        // creating the `LView`. This means that no `LView` will have been entered when this factory is
+        // invoked for the root component.
+        // 3. Have the token factory return `() => string` which is invoked when a nonce is requested -
+        // the slightly later execution does allow us to get an `LView` reference, but the fact that
+        // it is a function means that it could be executed at *any* time (including immediately) which
+        // may lead to weird bugs.
+        // 4. Have the `ComponentFactory` read the attribute and provide it to the injector under the
+        // hood - has the same problem as #1 and #2 in that the renderer is used to query for the root
+        // node and the nonce value needs to be available when the renderer is created.
+        return getDocument().body.querySelector('[ngCspNonce]')?.getAttribute('ngCspNonce') || null;
+    },
+});
 
 function escapeTransferStateContent(text) {
     const escapedText = {
@@ -9228,6 +9298,13 @@ class TransferState {
         this.store = {};
         this.onSerializeCallbacks = {};
     }
+    /** @nocollapse */
+    static { this.ɵprov = 
+    /** @pureOrBreakMyCode */ ɵɵdefineInjectable({
+        token: TransferState,
+        providedIn: 'root',
+        factory: initTransferState,
+    }); }
     /**
      * Get the value corresponding to a key. Return `defaultValue` if key is not found.
      */
@@ -9282,13 +9359,6 @@ class TransferState {
         return JSON.stringify(this.store);
     }
 }
-/** @nocollapse */
-TransferState.ɵprov = 
-/** @pureOrBreakMyCode */ ɵɵdefineInjectable({
-    token: TransferState,
-    providedIn: 'root',
-    factory: initTransferState,
-});
 function retrieveTransferredState(doc, appId) {
     // Locate the script tag with the JSON data transferred from the server.
     // The id of the script tag is set to the Angular appId + 'state'.
@@ -9306,6 +9376,19 @@ function retrieveTransferredState(doc, appId) {
     return initialState;
 }
 
+/** Encodes that the node lookup should start from the host node of this component. */
+const REFERENCE_NODE_HOST = 'h';
+/** Encodes that the node lookup should start from the document body node. */
+const REFERENCE_NODE_BODY = 'b';
+/**
+ * Describes navigation steps that the runtime logic need to perform,
+ * starting from a given (known) element.
+ */
+var NodeNavigationStep;
+(function (NodeNavigationStep) {
+    NodeNavigationStep["FirstChild"] = "f";
+    NodeNavigationStep["NextSibling"] = "n";
+})(NodeNavigationStep || (NodeNavigationStep = {}));
 /**
  * Keys within serialized view data structure to represent various
  * parts. See the `SerializedView` interface below for additional information.
@@ -9313,8 +9396,11 @@ function retrieveTransferredState(doc, appId) {
 const ELEMENT_CONTAINERS = 'e';
 const TEMPLATES = 't';
 const CONTAINERS = 'c';
+const MULTIPLIER = 'x';
 const NUM_ROOT_NODES = 'r';
 const TEMPLATE_ID = 'i'; // as it's also an "id"
+const NODES = 'n';
+const DISCONNECTED_NODES = 'd';
 
 /**
  * The name of the key used in the TransferState collection,
@@ -9468,7 +9554,7 @@ function isRNodeClaimedForHydration(node) {
     return !!node.__claimed;
 }
 function setSegmentHead(hydrationInfo, index, node) {
-    hydrationInfo.segmentHeads ?? (hydrationInfo.segmentHeads = {});
+    hydrationInfo.segmentHeads ??= {};
     hydrationInfo.segmentHeads[index] = node;
 }
 function getSegmentHead(hydrationInfo, index) {
@@ -9504,10 +9590,23 @@ function calcSerializedContainerSize(hydrationInfo, index) {
     const views = getSerializedContainerViews(hydrationInfo, index) ?? [];
     let numNodes = 0;
     for (let view of views) {
-        numNodes += view[NUM_ROOT_NODES];
+        numNodes += view[NUM_ROOT_NODES] * (view[MULTIPLIER] ?? 1);
     }
     return numNodes;
 }
+/**
+ * Checks whether a node is annotated as "disconnected", i.e. not present
+ * in the DOM at serialization time. We should not attempt hydration for
+ * such nodes and instead, use a regular "creation mode".
+ */
+function isDisconnectedNode(hydrationInfo, index) {
+    // Check if we are processing disconnected info for the first time.
+    if (typeof hydrationInfo.disconnectedNodes === 'undefined') {
+        const nodeIds = hydrationInfo.data[DISCONNECTED_NODES];
+        hydrationInfo.disconnectedNodes = nodeIds ? (new Set(nodeIds)) : null;
+    }
+    return !!hydrationInfo.disconnectedNodes?.has(index);
+}
 
 /**
  * Represents a component created by a `ComponentFactory`.
@@ -9534,7 +9633,7 @@ class ComponentFactory$1 {
 }
 
 function noComponentFactoryError(component) {
-    const error = Error(`No component factory found for ${stringify(component)}. Did you add it to @NgModule.entryComponents?`);
+    const error = Error(`No component factory found for ${stringify(component)}.`);
     error[ERROR_COMPONENT] = component;
     return error;
 }
@@ -9563,8 +9662,8 @@ class _NullComponentFactoryResolver {
  *     Component class can be used directly.
  */
 class ComponentFactoryResolver$1 {
+    static { this.NULL = ( /* @__PURE__ */new _NullComponentFactoryResolver()); }
 }
-ComponentFactoryResolver$1.NULL = ( /* @__PURE__ */new _NullComponentFactoryResolver());
 
 /**
  * Creates an ElementRef from the most recent node.
@@ -9603,12 +9702,12 @@ class ElementRef {
     constructor(nativeElement) {
         this.nativeElement = nativeElement;
     }
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = injectElementRef; }
 }
-/**
- * @internal
- * @nocollapse
- */
-ElementRef.__NG_ELEMENT_ID__ = injectElementRef;
 /**
  * Unwraps `ElementRef` and return the `nativeElement`.
  *
@@ -9642,12 +9741,12 @@ class RendererFactory2 {
  * @publicApi
  */
 class Renderer2 {
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = () => injectRenderer2(); }
 }
-/**
- * @internal
- * @nocollapse
- */
-Renderer2.__NG_ELEMENT_ID__ = () => injectRenderer2();
 /** Injects a Renderer2 for the current component. */
 function injectRenderer2() {
     // We need the Renderer to be based on the component that it's being injected into, however since
@@ -9664,13 +9763,13 @@ function injectRenderer2() {
  * @publicApi
  */
 class Sanitizer {
+    /** @nocollapse */
+    static { this.ɵprov = ɵɵdefineInjectable({
+        token: Sanitizer,
+        providedIn: 'root',
+        factory: () => null,
+    }); }
 }
-/** @nocollapse */
-Sanitizer.ɵprov = ɵɵdefineInjectable({
-    token: Sanitizer,
-    providedIn: 'root',
-    factory: () => null,
-});
 
 /**
  * @description Represents the version of Angular
@@ -9688,7 +9787,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('16.0.0-next.3');
+const VERSION = new Version('16.0.0-next.5');
 
 // This default value is when checking the hierarchy for a token.
 //
@@ -9769,11 +9868,11 @@ class ErrorHandler {
     }
 }
 
-const NG_DEV_MODE = typeof ngDevMode === 'undefined' || !!ngDevMode;
+const NG_DEV_MODE$1 = typeof ngDevMode === 'undefined' || !!ngDevMode;
 /**
  * Internal token that specifies whether hydration is enabled.
  */
-const IS_HYDRATION_FEATURE_ENABLED = new InjectionToken(NG_DEV_MODE ? 'IS_HYDRATION_FEATURE_ENABLED' : '');
+const IS_HYDRATION_FEATURE_ENABLED = new InjectionToken(NG_DEV_MODE$1 ? 'IS_HYDRATION_FEATURE_ENABLED' : '');
 // By default (in client rendering mode), we remove all the contents
 // of the host element and render an application after that.
 const PRESERVE_HOST_CONTENT_DEFAULT = false;
@@ -9781,7 +9880,7 @@ const PRESERVE_HOST_CONTENT_DEFAULT = false;
  * Internal token that indicates whether host element content should be
  * retained during the bootstrap.
  */
-const PRESERVE_HOST_CONTENT = new InjectionToken(NG_DEV_MODE ? 'PRESERVE_HOST_CONTENT' : '', {
+const PRESERVE_HOST_CONTENT = new InjectionToken(NG_DEV_MODE$1 ? 'PRESERVE_HOST_CONTENT' : '', {
     providedIn: 'root',
     factory: () => PRESERVE_HOST_CONTENT_DEFAULT,
 });
@@ -9891,6 +9990,285 @@ function getExpressionChangedErrorDetails(lView, bindingIndex, oldValue, newValu
     return { propName: undefined, oldValue, newValue };
 }
 
+/**
+ * A `WeakRef`-compatible reference that fakes the API with a strong reference
+ * internally.
+ */
+class LeakyRef {
+    constructor(ref) {
+        this.ref = ref;
+    }
+    deref() {
+        return this.ref;
+    }
+}
+// `WeakRef` is not always defined in every TS environment where Angular is compiled. Instead,
+// read it off of the global context if available.
+// tslint:disable-next-line: no-toplevel-property-access
+let WeakRefImpl = _global$1['WeakRef'] ?? LeakyRef;
+function newWeakRef(value) {
+    if (typeof ngDevMode !== 'undefined' && ngDevMode && WeakRefImpl === undefined) {
+        throw new Error(`Angular requires a browser which supports the 'WeakRef' API`);
+    }
+    return new WeakRefImpl(value);
+}
+function setAlternateWeakRefImpl(impl) {
+    // no-op since the alternate impl is included by default by the framework. Remove once internal
+    // migration is complete.
+}
+
+/**
+ * Counter tracking the next `ProducerId` or `ConsumerId`.
+ */
+let _nextReactiveId = 0;
+/**
+ * Tracks the currently active reactive consumer (or `null` if there is no active
+ * consumer).
+ */
+let activeConsumer = null;
+function setActiveConsumer(consumer) {
+    const prev = activeConsumer;
+    activeConsumer = consumer;
+    return prev;
+}
+/**
+ * A node in the reactive graph.
+ *
+ * Nodes can be producers of reactive values, consumers of other reactive values, or both.
+ *
+ * Producers are nodes that produce values, and can be depended upon by consumer nodes.
+ *
+ * Producers expose a monotonic `valueVersion` counter, and are responsible for incrementing this
+ * version when their value semantically changes. Some producers may produce their values lazily and
+ * thus at times need to be polled for potential updates to their value (and by extension their
+ * `valueVersion`). This is accomplished via the `onProducerUpdateValueVersion` method for
+ * implemented by producers, which should perform whatever calculations are necessary to ensure
+ * `valueVersion` is up to date.
+ *
+ * Consumers are nodes that depend on the values of producers and are notified when those values
+ * might have changed.
+ *
+ * Consumers do not wrap the reads they consume themselves, but rather can be set as the active
+ * reader via `setActiveConsumer`. Reads of producers that happen while a consumer is active will
+ * result in those producers being added as dependencies of that consumer node.
+ *
+ * The set of dependencies of a consumer is dynamic. Implementers expose a monotonically increasing
+ * `trackingVersion` counter, which increments whenever the consumer is about to re-run any reactive
+ * reads it needs and establish a new set of dependencies as a result.
+ *
+ * Producers store the last `trackingVersion` they've seen from `Consumer`s which have read them.
+ * This allows a producer to identify whether its record of the dependency is current or stale, by
+ * comparing the consumer's `trackingVersion` to the version at which the dependency was
+ * last observed.
+ */
+class ReactiveNode {
+    constructor() {
+        this.id = _nextReactiveId++;
+        /**
+         * A cached weak reference to this node, which will be used in `ReactiveEdge`s.
+         */
+        this.ref = newWeakRef(this);
+        /**
+         * Edges to producers on which this node depends (in its consumer capacity).
+         */
+        this.producers = new Map();
+        /**
+         * Edges to consumers on which this node depends (in its producer capacity).
+         */
+        this.consumers = new Map();
+        /**
+         * Monotonically increasing counter representing a version of this `Consumer`'s
+         * dependencies.
+         */
+        this.trackingVersion = 0;
+        /**
+         * Monotonically increasing counter which increases when the value of this `Producer`
+         * semantically changes.
+         */
+        this.valueVersion = 0;
+    }
+    /**
+     * Polls dependencies of a consumer to determine if they have actually changed.
+     *
+     * If this returns `false`, then even though the consumer may have previously been notified of a
+     * change, the values of its dependencies have not actually changed and the consumer should not
+     * rerun any reactions.
+     */
+    consumerPollProducersForChange() {
+        for (const [producerId, edge] of this.producers) {
+            const producer = edge.producerNode.deref();
+            if (producer === undefined || edge.atTrackingVersion !== this.trackingVersion) {
+                // This dependency edge is stale, so remove it.
+                this.producers.delete(producerId);
+                producer?.consumers.delete(this.id);
+                continue;
+            }
+            if (producer.producerPollStatus(edge.seenValueVersion)) {
+                // One of the dependencies reports a real value change.
+                return true;
+            }
+        }
+        // No dependency reported a real value change, so the `Consumer` has also not been
+        // impacted.
+        return false;
+    }
+    /**
+     * Notify all consumers of this producer that its value may have changed.
+     */
+    producerMayHaveChanged() {
+        for (const [consumerId, edge] of this.consumers) {
+            const consumer = edge.consumerNode.deref();
+            if (consumer === undefined || consumer.trackingVersion !== edge.atTrackingVersion) {
+                this.consumers.delete(consumerId);
+                consumer?.producers.delete(this.id);
+                continue;
+            }
+            consumer.onConsumerDependencyMayHaveChanged();
+        }
+    }
+    /**
+     * Mark that this producer node has been accessed in the current reactive context.
+     */
+    producerAccessed() {
+        if (activeConsumer === null) {
+            return;
+        }
+        // Either create or update the dependency `Edge` in both directions.
+        let edge = activeConsumer.producers.get(this.id);
+        if (edge === undefined) {
+            edge = {
+                consumerNode: activeConsumer.ref,
+                producerNode: this.ref,
+                seenValueVersion: this.valueVersion,
+                atTrackingVersion: activeConsumer.trackingVersion,
+            };
+            activeConsumer.producers.set(this.id, edge);
+            this.consumers.set(activeConsumer.id, edge);
+        }
+        else {
+            edge.seenValueVersion = this.valueVersion;
+            edge.atTrackingVersion = activeConsumer.trackingVersion;
+        }
+    }
+    /**
+     * Whether this consumer currently has any producers registered.
+     */
+    get hasProducers() {
+        return this.producers.size > 0;
+    }
+    /**
+     * Checks if a `Producer` has a current value which is different than the value
+     * last seen at a specific version by a `Consumer` which recorded a dependency on
+     * this `Producer`.
+     */
+    producerPollStatus(lastSeenValueVersion) {
+        // `producer.valueVersion` may be stale, but a mismatch still means that the value
+        // last seen by the `Consumer` is also stale.
+        if (this.valueVersion !== lastSeenValueVersion) {
+            return true;
+        }
+        // Trigger the `Producer` to update its `valueVersion` if necessary.
+        this.onProducerUpdateValueVersion();
+        // At this point, we can trust `producer.valueVersion`.
+        return this.valueVersion !== lastSeenValueVersion;
+    }
+}
+
+/**
+ * Marks current view and all ancestors dirty.
+ *
+ * Returns the root view because it is found as a byproduct of marking the view tree
+ * dirty, and can be used by methods that consume markViewDirty() to easily schedule
+ * change detection. Otherwise, such methods would need to traverse up the view tree
+ * an additional time to get the root view and schedule a tick on it.
+ *
+ * @param lView The starting LView to mark dirty
+ * @returns the root LView
+ */
+function markViewDirty(lView) {
+    while (lView) {
+        lView[FLAGS] |= 32 /* LViewFlags.Dirty */;
+        const parent = getLViewParent(lView);
+        // Stop traversing up as soon as you find a root view that wasn't attached to any container
+        if (isRootView(lView) && !parent) {
+            return lView;
+        }
+        // continue otherwise
+        lView = parent;
+    }
+    return null;
+}
+
+const NG_DEV_MODE = typeof ngDevMode === 'undefined' || ngDevMode;
+class ReactiveLViewConsumer extends ReactiveNode {
+    constructor() {
+        super(...arguments);
+        this._lView = null;
+    }
+    set lView(lView) {
+        NG_DEV_MODE && assertEqual(this._lView, null, 'Consumer already associated with a view.');
+        this._lView = lView;
+    }
+    onConsumerDependencyMayHaveChanged() {
+        NG_DEV_MODE &&
+            assertDefined(this._lView, 'Updating a signal during template or host binding execution is not allowed.');
+        markViewDirty(this._lView);
+    }
+    onProducerUpdateValueVersion() {
+        // This type doesn't implement the producer side of a `ReactiveNode`.
+    }
+    get hasReadASignal() {
+        return this.hasProducers;
+    }
+    runInContext(fn, rf, ctx) {
+        const prevConsumer = setActiveConsumer(this);
+        this.trackingVersion++;
+        try {
+            fn(rf, ctx);
+        }
+        finally {
+            setActiveConsumer(prevConsumer);
+        }
+    }
+    destroy() {
+        // Incrementing the version means that every producer which tries to update this consumer will
+        // consider its record stale, and not notify.
+        this.trackingVersion++;
+    }
+}
+let currentConsumer = null;
+function getOrCreateCurrentLViewConsumer() {
+    currentConsumer ??= new ReactiveLViewConsumer();
+    return currentConsumer;
+}
+/**
+ * Create a new template consumer pointing at the specified LView.
+ * Sometimes, a previously created consumer may be reused, in order to save on allocations. In that
+ * case, the LView will be updated.
+ */
+function getReactiveLViewConsumer(lView, slot) {
+    return lView[slot] ?? getOrCreateCurrentLViewConsumer();
+}
+/**
+ * Assigns the `currentTemplateContext` to its LView's `REACTIVE_CONSUMER` slot if there are tracked
+ * producers.
+ *
+ * The presence of producers means that a signal was read while the consumer was the active
+ * consumer.
+ *
+ * If no producers are present, we do not assign the current template context. This also means we
+ * can just reuse the template context for the next LView.
+ */
+function commitLViewConsumerIfHasProducers(lView, slot) {
+    const consumer = getOrCreateCurrentLViewConsumer();
+    if (!consumer.hasReadASignal) {
+        return;
+    }
+    lView[slot] = currentConsumer;
+    consumer.lView = lView;
+    currentConsumer = new ReactiveLViewConsumer();
+}
+
 /** A special value which designates that a value has not changed. */
 const NO_CHANGE = (typeof ngDevMode === 'undefined' || ngDevMode) ? { __brand__: 'NO_CHANGE' } : {};
 
@@ -9973,6 +10351,22 @@ function runInInjectionContext(injector, fn) {
         setInjectImplementation(previousInjectImplementation);
     }
 }
+/**
+ * Asserts that the current stack frame is within an injection context and has access to `inject`.
+ *
+ * @param debugFn a reference to the function making the assertion (used for the error message).
+ *
+ * @publicApi
+ */
+function assertInInjectionContext(debugFn) {
+    // Taking a `Function` instead of a string name here prevents the unminified name of the function
+    // from being retained in the bundle regardless of minification.
+    if (!getInjectImplementation() && !getCurrentInjector()) {
+        throw new RuntimeError(-203 /* RuntimeErrorCode.MISSING_INJECTION_CONTEXT */, ngDevMode &&
+            (debugFn.name +
+                '() can only be used within an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`'));
+    }
+}
 
 /**
  * A mapping of the @angular/core API surface used in generated expressions to the actual symbols.
@@ -10125,6 +10519,8 @@ function createInjectorWithoutInjectorInstances(defType, parent = null, addition
  * @publicApi
  */
 class Injector {
+    static { this.THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND; }
+    static { this.NULL = ( /* @__PURE__ */new NullInjector()); }
     static create(options, parent) {
         if (Array.isArray(options)) {
             return createInjector({ name: '' }, parent, options, '');
@@ -10134,20 +10530,18 @@ class Injector {
             return createInjector({ name }, options.parent, options.providers, name);
         }
     }
+    /** @nocollapse */
+    static { this.ɵprov = ɵɵdefineInjectable({
+        token: Injector,
+        providedIn: 'any',
+        factory: () => ɵɵinject(INJECTOR),
+    }); }
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = -1 /* InjectorMarkers.Injector */; }
 }
-Injector.THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
-Injector.NULL = ( /* @__PURE__ */new NullInjector());
-/** @nocollapse */
-Injector.ɵprov = ɵɵdefineInjectable({
-    token: Injector,
-    providedIn: 'any',
-    factory: () => ɵɵinject(INJECTOR),
-});
-/**
- * @internal
- * @nocollapse
- */
-Injector.__NG_ELEMENT_ID__ = -1 /* InjectorMarkers.Injector */;
 
 function findFirstClosedCycle(keys) {
     const res = [];
@@ -10748,6 +11142,7 @@ class ReflectiveInjector {
     }
 }
 class ReflectiveInjector_ {
+    static { this.INJECTOR_KEY = ( /* @__PURE__ */ReflectiveKey.get(Injector)); }
     /**
      * Private
      */
@@ -10903,7 +11298,6 @@ class ReflectiveInjector_ {
         return this.displayName;
     }
 }
-ReflectiveInjector_.INJECTOR_KEY = ( /* @__PURE__ */ReflectiveKey.get(Injector));
 function _mapProviders(injector, fn) {
     const res = [];
     for (let i = 0; i < injector._providers.length; ++i) {
@@ -10977,6 +11371,7 @@ function processHostBindingOpCodes(tView, lView) {
     const hostBindingOpCodes = tView.hostBindingOpCodes;
     if (hostBindingOpCodes === null)
         return;
+    const consumer = getReactiveLViewConsumer(lView, REACTIVE_HOST_BINDING_CONSUMER);
     try {
         for (let i = 0; i < hostBindingOpCodes.length; i++) {
             const opCode = hostBindingOpCodes[i];
@@ -10991,11 +11386,13 @@ function processHostBindingOpCodes(tView, lView) {
                 const hostBindingFn = hostBindingOpCodes[++i];
                 setBindingRootForHostBindings(bindingRootIndx, directiveIdx);
                 const context = lView[directiveIdx];
-                hostBindingFn(2 /* RenderFlags.Update */, context);
+                consumer.runInContext(hostBindingFn, 2 /* RenderFlags.Update */, context);
             }
         }
     }
     finally {
+        lView[REACTIVE_HOST_BINDING_CONSUMER] === null &&
+            commitLViewConsumerIfHasProducers(lView, REACTIVE_HOST_BINDING_CONSUMER);
         setSelectedIndex(-1);
     }
 }
@@ -11051,6 +11448,7 @@ function createLView(parentLView, tView, context, flags, host, tHostNode, render
     lView[ID] = getUniqueLViewId();
     lView[HYDRATION] = hydrationInfo;
     lView[EMBEDDED_VIEW_INJECTOR] = embeddedViewInjector;
+    lView[REACTIVE_TEMPLATE_CONSUMER] = null;
     ngDevMode &&
         assertEqual(tView.type == 2 /* TViewType.Embedded */ ? parentLView !== null : true, true, 'Embedded views must have parentLView');
     lView[DECLARATION_COMPONENT_VIEW] =
@@ -11335,6 +11733,7 @@ function refreshView(tView, lView, templateFn, context) {
     }
 }
 function executeTemplate(tView, lView, templateFn, rf, context) {
+    const consumer = getReactiveLViewConsumer(lView, REACTIVE_TEMPLATE_CONSUMER);
     const prevSelectedIndex = getSelectedIndex();
     const isUpdatePhase = rf & 2 /* RenderFlags.Update */;
     try {
@@ -11346,9 +11745,12 @@ function executeTemplate(tView, lView, templateFn, rf, context) {
         }
         const preHookType = isUpdatePhase ? 2 /* ProfilerEvent.TemplateUpdateStart */ : 0 /* ProfilerEvent.TemplateCreateStart */;
         profiler(preHookType, context);
-        templateFn(rf, context);
+        consumer.runInContext(templateFn, rf, context);
     }
     finally {
+        if (lView[REACTIVE_TEMPLATE_CONSUMER] === null) {
+            commitLViewConsumerIfHasProducers(lView, REACTIVE_TEMPLATE_CONSUMER);
+        }
         setSelectedIndex(prevSelectedIndex);
         const postHookType = isUpdatePhase ? 3 /* ProfilerEvent.TemplateUpdateEnd */ : 1 /* ProfilerEvent.TemplateCreateEnd */;
         profiler(postHookType, context);
@@ -12452,30 +12854,6 @@ function addToViewTree(lView, lViewOrLContainer) {
 ///////////////////////////////
 //// Change detection
 ///////////////////////////////
-/**
- * Marks current view and all ancestors dirty.
- *
- * Returns the root view because it is found as a byproduct of marking the view tree
- * dirty, and can be used by methods that consume markViewDirty() to easily schedule
- * change detection. Otherwise, such methods would need to traverse up the view tree
- * an additional time to get the root view and schedule a tick on it.
- *
- * @param lView The starting LView to mark dirty
- * @returns the root LView
- */
-function markViewDirty(lView) {
-    while (lView) {
-        lView[FLAGS] |= 32 /* LViewFlags.Dirty */;
-        const parent = getLViewParent(lView);
-        // Stop traversing up as soon as you find a root view that wasn't attached to any container
-        if (isRootView(lView) && !parent) {
-            return lView;
-        }
-        // continue otherwise
-        lView = parent;
-    }
-    return null;
-}
 function detectChangesInternal(tView, lView, context, notifyErrorHandler = true) {
     const rendererFactory = lView[RENDERER_FACTORY];
     // Check no changes mode is a dev only mode used to verify that bindings have not changed
@@ -13156,6 +13534,7 @@ class ComponentRef extends ComponentRef$1 {
         this.location = location;
         this._rootLView = _rootLView;
         this._tNode = _tNode;
+        this.previousInputValues = null;
         this.instance = instance;
         this.hostView = this.changeDetectorRef = new RootViewRef(_rootLView);
         this.componentType = componentType;
@@ -13164,8 +13543,16 @@ class ComponentRef extends ComponentRef$1 {
         const inputData = this._tNode.inputs;
         let dataValue;
         if (inputData !== null && (dataValue = inputData[name])) {
+            this.previousInputValues ??= new Map();
+            // Do not set the input if it is the same as the last value
+            // This behavior matches `bindingUpdated` when binding inputs in templates.
+            if (this.previousInputValues.has(name) &&
+                Object.is(this.previousInputValues.get(name), value)) {
+                return;
+            }
             const lView = this._rootLView;
             setInputsForProperty(lView[TVIEW], lView, dataValue, name, value);
+            this.previousInputValues.set(name, value);
             markDirtyIfOnPush(lView, this._tNode.index);
         }
         else {
@@ -14380,40 +14767,443 @@ function detectChanges(component) {
     detectChangesInternal(view[TVIEW], view, component);
 }
 
+const AT_THIS_LOCATION = '<-- AT THIS LOCATION';
 /**
- * Verifies whether a given node matches an expected criteria,
- * based on internal data structure state.
+ * Retrieves a user friendly string for a given TNodeType for use in
+ * friendly error messages
+ *
+ * @param tNodeType
+ * @returns
  */
-function validateMatchingNode(node, nodeType, tagName, lView, tNode) {
-    validateNodeExists(node);
-    if (node.nodeType !== nodeType ||
-        node.nodeType === Node.ELEMENT_NODE &&
-            node.tagName.toLowerCase() !== tagName?.toLowerCase()) {
-        // TODO: improve error message and use RuntimeError instead.
-        throw new Error(`Unexpected node found during hydration.`);
+function getFriendlyStringFromTNodeType(tNodeType) {
+    switch (tNodeType) {
+        case 4 /* TNodeType.Container */:
+            return 'view container';
+        case 2 /* TNodeType.Element */:
+            return 'element';
+        case 8 /* TNodeType.ElementContainer */:
+            return 'ng-container';
+        case 32 /* TNodeType.Icu */:
+            return 'icu';
+        case 64 /* TNodeType.Placeholder */:
+            return 'i18n';
+        case 16 /* TNodeType.Projection */:
+            return 'projection';
+        case 1 /* TNodeType.Text */:
+            return 'text';
+        default:
+            // This should not happen as we cover all possible TNode types above.
+            return '<unknown>';
+    }
+}
+/**
+ * Validates that provided nodes match during the hydration process.
+ */
+function validateMatchingNode(node, nodeType, tagName, lView, tNode, isViewContainerAnchor = false) {
+    if (!node ||
+        (node.nodeType !== nodeType ||
+            (node.nodeType === Node.ELEMENT_NODE &&
+                node.tagName.toLowerCase() !== tagName?.toLowerCase()))) {
+        const expectedNode = shortRNodeDescription(nodeType, tagName, null);
+        let header = `During hydration Angular expected ${expectedNode} but `;
+        const hostComponentDef = getDeclarationComponentDef(lView);
+        const componentClassName = hostComponentDef?.type?.name;
+        const expected = `Angular expected this DOM:\n\n${describeExpectedDom(lView, tNode, isViewContainerAnchor)}\n\n`;
+        let actual = '';
+        if (!node) {
+            // No node found during hydration.
+            header += `the node was not found.\n\n`;
+        }
+        else {
+            const actualNode = shortRNodeDescription(node.nodeType, node.tagName ?? null, node.textContent ?? null);
+            header += `found ${actualNode}.\n\n`;
+            actual = `Actual DOM is:\n\n${describeDomFromNode(node)}\n\n`;
+        }
+        const footer = getHydrationErrorFooter(componentClassName);
+        const message = header + expected + actual + getHydrationAttributeNote() + footer;
+        throw new RuntimeError(500 /* RuntimeErrorCode.HYDRATION_NODE_MISMATCH */, message);
     }
 }
 /**
- * Verifies whether next sibling node exists.
+ * Validates that a given node has sibling nodes
  */
 function validateSiblingNodeExists(node) {
     validateNodeExists(node);
     if (!node.nextSibling) {
-        // TODO: improve error message and use RuntimeError instead.
-        throw new Error(`Unexpected state: insufficient number of sibling nodes.`);
+        const header = 'During hydration Angular expected more sibling nodes to be present.\n\n';
+        const actual = `Actual DOM is:\n\n${describeDomFromNode(node)}\n\n`;
+        const footer = getHydrationErrorFooter();
+        const message = header + actual + footer;
+        throw new RuntimeError(501 /* RuntimeErrorCode.HYDRATION_MISSING_SIBLINGS */, message);
     }
 }
+/**
+ * Validates that a node exists or throws
+ */
 function validateNodeExists(node) {
     if (!node) {
-        // TODO: improve error message and use RuntimeError instead.
-        throw new Error(`Hydration expected an element to be present at this location.`);
+        throw new RuntimeError(502 /* RuntimeErrorCode.HYDRATION_MISSING_NODE */, `Hydration expected an element to be present at this location.`);
+    }
+}
+/**
+ * Builds the hydration error message when a node is not found
+ *
+ * @param lView the LView where the node exists
+ * @param tNode the TNode
+ */
+function nodeNotFoundError(lView, tNode) {
+    const header = 'During serialization, Angular was unable to find an element in the DOM:\n\n';
+    const expected = `${describeExpectedDom(lView, tNode, false)}\n\n`;
+    const footer = getHydrationErrorFooter();
+    throw new RuntimeError(502 /* RuntimeErrorCode.HYDRATION_MISSING_NODE */, header + expected + footer);
+}
+/**
+ * Builds a hydration error message when a node is not found at a path location
+ *
+ * @param host the Host Node
+ * @param path the path to the node
+ */
+function nodeNotFoundAtPathError(host, path) {
+    const header = `During hydration Angular was unable to locate a node ` +
+        `using the "${path}" path, starting from the ${describeRNode(host)} node.\n\n`;
+    const footer = getHydrationErrorFooter();
+    throw new RuntimeError(502 /* RuntimeErrorCode.HYDRATION_MISSING_NODE */, header + footer);
+}
+/**
+ * Builds the hydration error message in the case that dom nodes are created outside of
+ * the Angular context and are being used as projected nodes
+ *
+ * @param lView the LView
+ * @param tNode the TNode
+ * @returns an error
+ */
+function unsupportedProjectionOfDomNodes(rNode) {
+    const header = 'During serialization, Angular detected DOM nodes ' +
+        'that were created outside of Angular context and provided as projectable nodes ' +
+        '(likely via `ViewContainerRef.createComponent` or `createComponent` APIs). ' +
+        'Hydration is not supported for such cases, consider refactoring the code to avoid ' +
+        'this pattern or using `ngSkipHydration` on the host element of the component.\n\n';
+    const actual = `${describeDomFromNode(rNode)}\n\n`;
+    const message = header + actual + getHydrationAttributeNote();
+    return new RuntimeError(503 /* RuntimeErrorCode.UNSUPPORTED_PROJECTION_DOM_NODES */, message);
+}
+/**
+ * Builds the hydration error message in the case that ngSkipHydration was used on a
+ * node that is not a component host element or host binding
+ *
+ * @param rNode the HTML Element
+ * @returns an error
+ */
+function invalidSkipHydrationHost(rNode) {
+    const header = 'The `ngSkipHydration` flag is applied on a node ' +
+        'that doesn\'t act as a component host. Hydration can be ' +
+        'skipped only on per-component basis.\n\n';
+    const actual = `${describeDomFromNode(rNode)}\n\n`;
+    const footer = 'Please move the `ngSkipHydration` attribute to the component host element.';
+    const message = header + actual + footer;
+    return new RuntimeError(504 /* RuntimeErrorCode.INVALID_SKIP_HYDRATION_HOST */, message);
+}
+/**
+ * Builds the hydration error message in the case that a user is attempting to enable
+ * hydration on internationalized nodes, which is not yet supported.
+ *
+ * @param rNode the HTML Element
+ * @returns an error
+ */
+function notYetSupportedI18nBlockError(rNode) {
+    const header = 'Hydration for nodes marked with `i18n` is not yet supported. ' +
+        'You can opt-out a component that uses `i18n` in a template using ' +
+        'the `ngSkipHydration` attribute or fall back to the previous ' +
+        'hydration logic (which re-creates the application structure).\n\n';
+    const actual = `${describeDomFromNode(rNode)}\n\n`;
+    const message = header + actual;
+    return new RuntimeError(518 /* RuntimeErrorCode.HYDRATION_I18N_NOT_YET_SUPPORTED */, message);
+}
+// Stringification methods
+/**
+ * Stringifies a given TNode's attributes
+ *
+ * @param tNode a provided TNode
+ * @returns string
+ */
+function stringifyTNodeAttrs(tNode) {
+    const results = [];
+    if (tNode.attrs) {
+        for (let i = 0; i < tNode.attrs.length;) {
+            const attrName = tNode.attrs[i++];
+            // Once we reach the first flag, we know that the list of
+            // attributes is over.
+            if (typeof attrName == 'number') {
+                break;
+            }
+            const attrValue = tNode.attrs[i++];
+            results.push(`${attrName}="${shorten(attrValue)}"`);
+        }
+    }
+    return results.join(' ');
+}
+/**
+ * The list of internal attributes that should be filtered out while
+ * producing an error message.
+ */
+const internalAttrs = new Set(['ngh', 'ng-version', 'ng-server-context']);
+/**
+ * Stringifies an HTML Element's attributes
+ *
+ * @param rNode an HTML Element
+ * @returns string
+ */
+function stringifyRNodeAttrs(rNode) {
+    const results = [];
+    for (let i = 0; i < rNode.attributes.length; i++) {
+        const attr = rNode.attributes[i];
+        if (internalAttrs.has(attr.name))
+            continue;
+        results.push(`${attr.name}="${shorten(attr.value)}"`);
+    }
+    return results.join(' ');
+}
+// Methods for Describing the DOM
+/**
+ * Converts a tNode to a helpful readable string value for use in error messages
+ *
+ * @param tNode a given TNode
+ * @param innerContent the content of the node
+ * @returns string
+ */
+function describeTNode(tNode, innerContent = '…') {
+    switch (tNode.type) {
+        case 1 /* TNodeType.Text */:
+            const content = tNode.value ? `(${tNode.value})` : '';
+            return `#text${content}`;
+        case 2 /* TNodeType.Element */:
+            const attrs = stringifyTNodeAttrs(tNode);
+            const tag = tNode.value.toLowerCase();
+            return `<${tag}${attrs ? ' ' + attrs : ''}>${innerContent}</${tag}>`;
+        case 8 /* TNodeType.ElementContainer */:
+            return '<!-- ng-container -->';
+        case 4 /* TNodeType.Container */:
+            return '<!-- container -->';
+        default:
+            const typeAsString = getFriendlyStringFromTNodeType(tNode.type);
+            return `#node(${typeAsString})`;
+    }
+}
+/**
+ * Converts an RNode to a helpful readable string value for use in error messages
+ *
+ * @param rNode a given RNode
+ * @param innerContent the content of the node
+ * @returns string
+ */
+function describeRNode(rNode, innerContent = '…') {
+    const node = rNode;
+    switch (node.nodeType) {
+        case Node.ELEMENT_NODE:
+            const tag = node.tagName.toLowerCase();
+            const attrs = stringifyRNodeAttrs(node);
+            return `<${tag}${attrs ? ' ' + attrs : ''}>${innerContent}</${tag}>`;
+        case Node.TEXT_NODE:
+            const content = node.textContent ? shorten(node.textContent) : '';
+            return `#text${content ? `(${content})` : ''}`;
+        case Node.COMMENT_NODE:
+            return `<!-- ${shorten(node.textContent ?? '')} -->`;
+        default:
+            return `#node(${node.nodeType})`;
+    }
+}
+/**
+ * Builds the string containing the expected DOM present given the LView and TNode
+ * values for a readable error message
+ *
+ * @param lView the lView containing the DOM
+ * @param tNode the tNode
+ * @param isViewContainerAnchor boolean
+ * @returns string
+ */
+function describeExpectedDom(lView, tNode, isViewContainerAnchor) {
+    const spacer = '  ';
+    let content = '';
+    if (tNode.prev) {
+        content += spacer + '…\n';
+        content += spacer + describeTNode(tNode.prev) + '\n';
+    }
+    else if (tNode.type && tNode.type & 12 /* TNodeType.AnyContainer */) {
+        content += spacer + '…\n';
+    }
+    if (isViewContainerAnchor) {
+        content += spacer + describeTNode(tNode) + '\n';
+        content += spacer + `<!-- container -->  ${AT_THIS_LOCATION}\n`;
+    }
+    else {
+        content += spacer + describeTNode(tNode) + `  ${AT_THIS_LOCATION}\n`;
+    }
+    content += spacer + '…\n';
+    const parentRNode = tNode.type ? getParentRElement(lView[TVIEW], tNode, lView) : null;
+    if (parentRNode) {
+        content = describeRNode(parentRNode, '\n' + content);
+    }
+    return content;
+}
+/**
+ * Builds the string containing the DOM present around a given RNode for a
+ * readable error message
+ *
+ * @param node the RNode
+ * @returns string
+ */
+function describeDomFromNode(node) {
+    const spacer = '  ';
+    let content = '';
+    const currentNode = node;
+    if (currentNode.previousSibling) {
+        content += spacer + '…\n';
+        content += spacer + describeRNode(currentNode.previousSibling) + '\n';
+    }
+    content += spacer + describeRNode(currentNode) + `  ${AT_THIS_LOCATION}\n`;
+    if (node.nextSibling) {
+        content += spacer + '…\n';
+    }
+    if (node.parentNode) {
+        content = describeRNode(currentNode.parentNode, '\n' + content);
+    }
+    return content;
+}
+/**
+ * Shortens the description of a given RNode by its type for readability
+ *
+ * @param nodeType the type of node
+ * @param tagName the node tag name
+ * @param textContent the text content in the node
+ * @returns string
+ */
+function shortRNodeDescription(nodeType, tagName, textContent) {
+    switch (nodeType) {
+        case Node.ELEMENT_NODE:
+            return `<${tagName.toLowerCase()}>`;
+        case Node.TEXT_NODE:
+            const content = textContent ? ` (with the "${shorten(textContent)}" content)` : '';
+            return `a text node${content}`;
+        case Node.COMMENT_NODE:
+            return 'a comment node';
+        default:
+            return `#node(nodeType=${nodeType})`;
+    }
+}
+/**
+ * Builds the footer hydration error message
+ *
+ * @param componentClassName the name of the component class
+ * @returns string
+ */
+function getHydrationErrorFooter(componentClassName) {
+    const componentInfo = componentClassName ? `the "${componentClassName}"` : 'corresponding';
+    return `To fix this problem:\n` +
+        `  * check ${componentInfo} component for hydration-related issues\n` +
+        `  * or skip hydration by adding the \`ngSkipHydration\` attribute ` +
+        `to its host node in a template`;
+}
+/**
+ * An attribute related note for hydration errors
+ */
+function getHydrationAttributeNote() {
+    return 'Note: attributes are only displayed to better represent the DOM' +
+        ' but have no effect on hydration mismatches.\n\n';
+}
+// Node string utility functions
+/**
+ * Strips all newlines out of a given string
+ *
+ * @param input a string to be cleared of new line characters
+ * @returns
+ */
+function stripNewlines(input) {
+    return input.replace(/\s+/gm, '');
+}
+/**
+ * Reduces a string down to a maximum length of characters with ellipsis for readability
+ *
+ * @param input a string input
+ * @param maxLength a maximum length in characters
+ * @returns string
+ */
+function shorten(input, maxLength = 50) {
+    if (!input) {
+        return '';
+    }
+    input = stripNewlines(input);
+    return input.length > maxLength ? `${input.substring(0, maxLength - 1)}…` : input;
+}
+
+/**
+ * Regexp that extracts a reference node information from the compressed node location.
+ * The reference node is represented as either:
+ *  - a number which points to an LView slot
+ *  - the `b` char which indicates that the lookup should start from the `document.body`
+ *  - the `h` char to start lookup from the component host node (`lView[HOST]`)
+ */
+const REF_EXTRACTOR_REGEXP = new RegExp(`^(\\d+)*(${REFERENCE_NODE_BODY}|${REFERENCE_NODE_HOST})*(.*)`);
+/**
+ * Helper function that takes a reference node location and a set of navigation steps
+ * (from the reference node) to a target node and outputs a string that represents
+ * a location.
+ *
+ * For example, given: referenceNode = 'b' (body) and path = ['firstChild', 'firstChild',
+ * 'nextSibling'], the function returns: `bf2n`.
+ */
+function compressNodeLocation(referenceNode, path) {
+    const result = [referenceNode];
+    for (const segment of path) {
+        const lastIdx = result.length - 1;
+        if (lastIdx > 0 && result[lastIdx - 1] === segment) {
+            // An empty string in a count slot represents 1 occurrence of an instruction.
+            const value = (result[lastIdx] || 1);
+            result[lastIdx] = value + 1;
+        }
+        else {
+            // Adding a new segment to the path.
+            // Using an empty string in a counter field to avoid encoding `1`s
+            // into the path, since they are implicit (e.g. `f1n1` vs `fn`), so
+            // it's enough to have a single char in this case.
+            result.push(segment, '');
+        }
+    }
+    return result.join('');
+}
+/**
+ * Helper function that reverts the `compressNodeLocation` and transforms a given
+ * string into an array where at 0th position there is a reference node info and
+ * after that it contains information (in pairs) about a navigation step and the
+ * number of repetitions.
+ *
+ * For example, the path like 'bf2n' will be transformed to:
+ * ['b', 'firstChild', 2, 'nextSibling', 1].
+ *
+ * This information is later consumed by the code that navigates the DOM to find
+ * a given node by its location.
+ */
+function decompressNodeLocation(path) {
+    const matches = path.match(REF_EXTRACTOR_REGEXP);
+    const [_, refNodeId, refNodeName, rest] = matches;
+    // If a reference node is represented by an index, transform it to a number.
+    const ref = refNodeId ? parseInt(refNodeId, 10) : refNodeName;
+    const steps = [];
+    // Match all segments in a path.
+    for (const [_, step, count] of rest.matchAll(/(f|n)(\d*)/g)) {
+        const repeat = parseInt(count, 10) || 1;
+        steps.push(step, repeat);
     }
+    return [ref, ...steps];
 }
 
 /** Whether current TNode is a first node in an <ng-container>. */
 function isFirstElementInNgContainer(tNode) {
     return !tNode.prev && tNode.parent?.type === 8 /* TNodeType.ElementContainer */;
 }
+/** Returns an instruction index (subtracting HEADER_OFFSET). */
+function getNoOffsetIndex(tNode) {
+    return tNode.index - HEADER_OFFSET;
+}
 /**
  * Locate a node in DOM tree that corresponds to a given TNode.
  *
@@ -14425,7 +15215,13 @@ function isFirstElementInNgContainer(tNode) {
  */
 function locateNextRNode(hydrationInfo, tView, lView, tNode) {
     let native = null;
-    if (tView.firstChild === tNode) {
+    const noOffsetIndex = getNoOffsetIndex(tNode);
+    const nodes = hydrationInfo.data[NODES];
+    if (nodes?.[noOffsetIndex]) {
+        // We know the exact location of the node.
+        native = locateRNodeByPath(nodes[noOffsetIndex], lView);
+    }
+    else if (tView.firstChild === tNode) {
         // We create a first node in this view, so we use a reference
         // to the first child in this DOM segment.
         native = hydrationInfo.firstChild;
@@ -14438,7 +15234,7 @@ function locateNextRNode(hydrationInfo, tView, lView, tNode) {
             assertDefined(previousTNode, 'Unexpected state: current TNode does not have a connection ' +
                 'to the previous node or a parent node.');
         if (isFirstElementInNgContainer(tNode)) {
-            const noOffsetParentIndex = tNode.parent.index - HEADER_OFFSET;
+            const noOffsetParentIndex = getNoOffsetIndex(tNode.parent);
             native = getSegmentHead(hydrationInfo, noOffsetParentIndex);
         }
         else {
@@ -14452,7 +15248,7 @@ function locateNextRNode(hydrationInfo, tView, lView, tNode) {
                 // represented in the DOM as `<div></div>...<!--container-->`.
                 // In this case, there are nodes *after* this element and we need to skip
                 // all of them to reach an element that we are looking for.
-                const noOffsetPrevSiblingIndex = previousTNode.index - HEADER_OFFSET;
+                const noOffsetPrevSiblingIndex = getNoOffsetIndex(previousTNode);
                 const segmentHead = getSegmentHead(hydrationInfo, noOffsetPrevSiblingIndex);
                 if (previousTNode.type === 2 /* TNodeType.Element */ && segmentHead) {
                     const numRootNodesToSkip = calcSerializedContainerSize(hydrationInfo, noOffsetPrevSiblingIndex);
@@ -14480,6 +15276,181 @@ function siblingAfter(skip, from) {
     }
     return currentNode;
 }
+/**
+ * Helper function to produce a string representation of the navigation steps
+ * (in terms of `nextSibling` and `firstChild` navigations). Used in error
+ * messages in dev mode.
+ */
+function stringifyNavigationInstructions(instructions) {
+    const container = [];
+    for (let i = 0; i < instructions.length; i += 2) {
+        const step = instructions[i];
+        const repeat = instructions[i + 1];
+        for (let r = 0; r < repeat; r++) {
+            container.push(step === NodeNavigationStep.FirstChild ? 'firstChild' : 'nextSibling');
+        }
+    }
+    return container.join('.');
+}
+/**
+ * Helper function that navigates from a starting point node (the `from` node)
+ * using provided set of navigation instructions (within `path` argument).
+ */
+function navigateToNode(from, instructions) {
+    let node = from;
+    for (let i = 0; i < instructions.length; i += 2) {
+        const step = instructions[i];
+        const repeat = instructions[i + 1];
+        for (let r = 0; r < repeat; r++) {
+            if (ngDevMode && !node) {
+                throw nodeNotFoundAtPathError(from, stringifyNavigationInstructions(instructions));
+            }
+            switch (step) {
+                case NodeNavigationStep.FirstChild:
+                    node = node.firstChild;
+                    break;
+                case NodeNavigationStep.NextSibling:
+                    node = node.nextSibling;
+                    break;
+            }
+        }
+    }
+    if (ngDevMode && !node) {
+        throw nodeNotFoundAtPathError(from, stringifyNavigationInstructions(instructions));
+    }
+    return node;
+}
+/**
+ * Locates an RNode given a set of navigation instructions (which also contains
+ * a starting point node info).
+ */
+function locateRNodeByPath(path, lView) {
+    const [referenceNode, ...navigationInstructions] = decompressNodeLocation(path);
+    let ref;
+    if (referenceNode === REFERENCE_NODE_HOST) {
+        ref = lView[0];
+    }
+    else if (referenceNode === REFERENCE_NODE_BODY) {
+        ref = ɵɵresolveBody(lView[0]);
+    }
+    else {
+        const parentElementId = Number(referenceNode);
+        ref = unwrapRNode(lView[parentElementId + HEADER_OFFSET]);
+    }
+    return navigateToNode(ref, navigationInstructions);
+}
+/**
+ * Generate a list of DOM navigation operations to get from node `start` to node `finish`.
+ *
+ * Note: assumes that node `start` occurs before node `finish` in an in-order traversal of the DOM
+ * tree. That is, we should be able to get from `start` to `finish` purely by using `.firstChild`
+ * and `.nextSibling` operations.
+ */
+function navigateBetween(start, finish) {
+    if (start === finish) {
+        return [];
+    }
+    else if (start.parentElement == null || finish.parentElement == null) {
+        return null;
+    }
+    else if (start.parentElement === finish.parentElement) {
+        return navigateBetweenSiblings(start, finish);
+    }
+    else {
+        // `finish` is a child of its parent, so the parent will always have a child.
+        const parent = finish.parentElement;
+        const parentPath = navigateBetween(start, parent);
+        const childPath = navigateBetween(parent.firstChild, finish);
+        if (!parentPath || !childPath)
+            return null;
+        return [
+            // First navigate to `finish`'s parent
+            ...parentPath,
+            // Then to its first child.
+            NodeNavigationStep.FirstChild,
+            // And finally from that node to `finish` (maybe a no-op if we're already there).
+            ...childPath,
+        ];
+    }
+}
+/**
+ * Calculates a path between 2 sibling nodes (generates a number of `NextSibling` navigations).
+ */
+function navigateBetweenSiblings(start, finish) {
+    const nav = [];
+    let node = null;
+    for (node = start; node != null && node !== finish; node = node.nextSibling) {
+        nav.push(NodeNavigationStep.NextSibling);
+    }
+    return node === null ? [] : nav;
+}
+/**
+ * Calculates a path between 2 nodes in terms of `nextSibling` and `firstChild`
+ * navigations:
+ * - the `from` node is a known node, used as an starting point for the lookup
+ *   (the `fromNodeName` argument is a string representation of the node).
+ * - the `to` node is a node that the runtime logic would be looking up,
+ *   using the path generated by this function.
+ */
+function calcPathBetween(from, to, fromNodeName) {
+    const path = navigateBetween(from, to);
+    return path === null ? null : compressNodeLocation(fromNodeName, path);
+}
+/**
+ * Invoked at serialization time (on the server) when a set of navigation
+ * instructions needs to be generated for a TNode.
+ */
+function calcPathForNode(tNode, lView) {
+    const parentTNode = tNode.parent;
+    let parentIndex;
+    let parentRNode;
+    let referenceNodeName;
+    if (parentTNode === null) {
+        // No parent TNode - use host element as a reference node.
+        parentIndex = referenceNodeName = REFERENCE_NODE_HOST;
+        parentRNode = lView[HOST];
+    }
+    else {
+        // Use parent TNode as a reference node.
+        parentIndex = parentTNode.index;
+        parentRNode = unwrapRNode(lView[parentIndex]);
+        referenceNodeName = renderStringify(parentIndex - HEADER_OFFSET);
+    }
+    let rNode = unwrapRNode(lView[tNode.index]);
+    if (tNode.type & 12 /* TNodeType.AnyContainer */) {
+        // For <ng-container> nodes, instead of serializing a reference
+        // to the anchor comment node, serialize a location of the first
+        // DOM element. Paired with the container size (serialized as a part
+        // of `ngh.containers`), it should give enough information for runtime
+        // to hydrate nodes in this container.
+        const firstRNode = getFirstNativeNode(lView, tNode);
+        // If container is not empty, use a reference to the first element,
+        // otherwise, rNode would point to an anchor comment node.
+        if (firstRNode) {
+            rNode = firstRNode;
+        }
+    }
+    let path = calcPathBetween(parentRNode, rNode, referenceNodeName);
+    if (path === null && parentRNode !== rNode) {
+        // Searching for a path between elements within a host node failed.
+        // Trying to find a path to an element starting from the `document.body` instead.
+        //
+        // Important note: this type of reference is relatively unstable, since Angular
+        // may not be able to control parts of the page that the runtime logic navigates
+        // through. This is mostly needed to cover "portals" use-case (like menus, dialog boxes,
+        // etc), where nodes are content-projected (including direct DOM manipulations) outside
+        // of the host node. The better solution is to provide APIs to work with "portals",
+        // at which point this code path would not be needed.
+        const body = parentRNode.ownerDocument.body;
+        path = calcPathBetween(body, rNode, REFERENCE_NODE_BODY);
+        if (path === null) {
+            // If the path is still empty, it's likely that this node is detached and
+            // won't be found during hydration.
+            throw nodeNotFoundError(lView, tNode);
+        }
+    }
+    return path;
+}
 
 function templateFirstCreatePass(index, tView, lView, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex) {
     ngDevMode && assertFirstCreatePass(tView);
@@ -14556,7 +15527,7 @@ function createContainerAnchorImpl(tView, lView, tNode, index) {
  */
 function locateOrCreateContainerAnchorImpl(tView, lView, tNode, index) {
     const hydrationInfo = lView[HYDRATION];
-    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1();
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1() || isDisconnectedNode(hydrationInfo, index);
     lastNodeWasCreated(isNodeCreationMode);
     // Regular creation mode.
     if (isNodeCreationMode) {
@@ -14565,11 +15536,8 @@ function locateOrCreateContainerAnchorImpl(tView, lView, tNode, index) {
     // Hydration mode, looking up existing elements in DOM.
     const currentRNode = locateNextRNode(hydrationInfo, tView, lView, tNode);
     ngDevMode && validateNodeExists(currentRNode);
+    setSegmentHead(hydrationInfo, index, currentRNode);
     const viewContainerSize = calcSerializedContainerSize(hydrationInfo, index);
-    // If this container is non-empty, store the first node as a segment head,
-    // otherwise, this node is an anchor and segment head doesn't exist (thus `null`).
-    const segmentHead = viewContainerSize > 0 ? currentRNode : null;
-    setSegmentHead(hydrationInfo, index, segmentHead);
     const comment = siblingAfter(viewContainerSize, currentRNode);
     if (ngDevMode) {
         validateMatchingNode(comment, Node.COMMENT_NODE, null, lView, tNode);
@@ -14825,7 +15793,7 @@ let _locateOrCreateElementNode = (tView, lView, tNode, renderer, name, index) =>
  */
 function locateOrCreateElementNodeImpl(tView, lView, tNode, renderer, name, index) {
     const hydrationInfo = lView[HYDRATION];
-    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1();
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1() || isDisconnectedNode(hydrationInfo, index);
     lastNodeWasCreated(isNodeCreationMode);
     // Regular creation mode.
     if (isNodeCreationMode) {
@@ -14849,10 +15817,17 @@ function locateOrCreateElementNodeImpl(tView, lView, tNode, renderer, name, inde
     // Checks if the skip hydration attribute is present during hydration so we know to
     // skip attempting to hydrate this block.
     if (hydrationInfo && hasNgSkipHydrationAttr(tNode)) {
-        enterSkipHydrationBlock(tNode);
-        // Since this isn't hydratable, we need to empty the node
-        // so there's no duplicate content after render
-        clearElementContents(renderer, native);
+        if (isComponentHost(tNode)) {
+            enterSkipHydrationBlock(tNode);
+            // Since this isn't hydratable, we need to empty the node
+            // so there's no duplicate content after render
+            clearElementContents(native);
+        }
+        else if (ngDevMode) {
+            // If this is not a component host, throw an error.
+            // Hydration can be skipped on per-component basis only.
+            throw invalidSkipHydrationHost(native);
+        }
     }
     return native;
 }
@@ -14986,10 +15961,7 @@ function locateOrCreateElementContainerNode(tView, lView, tNode, index) {
     ngDevMode &&
         assertNumber(ngContainerSize, 'Unexpected state: hydrating an <ng-container>, ' +
             'but no hydration info is available.');
-    // If this container is non-empty, store the first node as a segment head,
-    // otherwise, this node is an anchor and segment head doesn't exist (thus `null`).
-    const segmentHead = ngContainerSize > 0 ? currentRNode : null;
-    setSegmentHead(hydrationInfo, index, segmentHead);
+    setSegmentHead(hydrationInfo, index, currentRNode);
     comment = siblingAfter(ngContainerSize, currentRNode);
     if (ngDevMode) {
         validateMatchingNode(comment, Node.COMMENT_NODE, null, lView, tNode);
@@ -15371,7 +16343,10 @@ function ɵɵprojection(nodeIndex, selectorIndex = 0, attrs) {
         tProjectionNode.projection = selectorIndex;
     // `<ng-content>` has no content
     setCurrentTNodeAsNotParent();
-    if ((tProjectionNode.flags & 32 /* TNodeFlags.isDetached */) !== 32 /* TNodeFlags.isDetached */) {
+    const hydrationInfo = lView[HYDRATION];
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1();
+    if (isNodeCreationMode &&
+        (tProjectionNode.flags & 32 /* TNodeFlags.isDetached */) !== 32 /* TNodeFlags.isDetached */) {
         // re-distribution of projectable nodes is stored on a component's view level
         applyProjection(tView, lView, tProjectionNode);
     }
@@ -17292,8 +18267,11 @@ function isStylingValuePresent(value) {
  * @param suffix
  */
 function normalizeSuffix(value, suffix) {
-    if (value == null /** || value === undefined */) {
+    if (value == null || value === '') {
         // do nothing
+        // Do not add the suffix if the value is going to be empty.
+        // As it produce invalid CSS, which the browsers will automatically omit but Domino will not.
+        // Example: `"left": "px;"` instead of `"left": ""`.
     }
     else if (typeof suffix === 'string') {
         value = value + suffix;
@@ -17334,7 +18312,7 @@ function ɵɵtext(index, value = '') {
     const tNode = tView.firstCreatePass ?
         getOrCreateTNode(tView, adjustedIndex, 1 /* TNodeType.Text */, value, null) :
         tView.data[adjustedIndex];
-    const textNative = _locateOrCreateTextNode(tView, lView, tNode, value);
+    const textNative = _locateOrCreateTextNode(tView, lView, tNode, value, index);
     lView[adjustedIndex] = textNative;
     if (wasLastNodeCreated()) {
         appendChild(tView, lView, textNative, tNode);
@@ -17342,7 +18320,7 @@ function ɵɵtext(index, value = '') {
     // Text nodes are self closing.
     setCurrentTNode(tNode, false);
 }
-let _locateOrCreateTextNode = (tView, lView, tNode, value) => {
+let _locateOrCreateTextNode = (tView, lView, tNode, value, index) => {
     lastNodeWasCreated(true);
     return createTextNode(lView[RENDERER], value);
 };
@@ -17350,9 +18328,9 @@ let _locateOrCreateTextNode = (tView, lView, tNode, value) => {
  * Enables hydration code path (to lookup existing elements in DOM)
  * in addition to the regular creation mode of text nodes.
  */
-function locateOrCreateTextNodeImpl(tView, lView, tNode, value) {
+function locateOrCreateTextNodeImpl(tView, lView, tNode, value, index) {
     const hydrationInfo = lView[HYDRATION];
-    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1();
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1() || isDisconnectedNode(hydrationInfo, index);
     lastNodeWasCreated(isNodeCreationMode);
     // Regular creation mode.
     if (isNodeCreationMode) {
@@ -21160,13 +22138,13 @@ class StandaloneService {
             this.cachedInjectors.clear();
         }
     }
+    /** @nocollapse */
+    static { this.ɵprov = ɵɵdefineInjectable({
+        token: StandaloneService,
+        providedIn: 'environment',
+        factory: () => new StandaloneService(ɵɵinject(EnvironmentInjector)),
+    }); }
 }
-/** @nocollapse */
-StandaloneService.ɵprov = ɵɵdefineInjectable({
-    token: StandaloneService,
-    providedIn: 'environment',
-    factory: () => new StandaloneService(ɵɵinject(EnvironmentInjector)),
-});
 /**
  * A feature that acts as a setup code for the {@link StandaloneService}.
  *
@@ -22208,6 +23186,7 @@ function symbolIterator() {
  * @publicApi
  */
 class QueryList {
+    static { Symbol.iterator; }
     /**
      * Returns `Observable` of `QueryList` notifying the subscriber of changes.
      */
@@ -22335,7 +23314,6 @@ class QueryList {
         this.changes.unsubscribe();
     }
 }
-Symbol.iterator;
 
 /**
  * Represents an embedded template that can be used to instantiate embedded views.
@@ -22356,12 +23334,12 @@ Symbol.iterator;
  * @publicApi
  */
 class TemplateRef {
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = injectTemplateRef; }
 }
-/**
- * @internal
- * @nocollapse
- */
-TemplateRef.__NG_ELEMENT_ID__ = injectTemplateRef;
 const ViewEngineTemplateRef = TemplateRef;
 // TODO(alxhub): combine interface and implementation. Currently this is challenging since something
 // in g3 depends on them being separate.
@@ -22460,6 +23438,56 @@ function removeDehydratedView(dehydratedView, renderer) {
         }
     }
 }
+/**
+ * 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 (Array.isArray(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, pendingTasks) {
+    // Wait once an app becomes stable and cleanup all views that
+    // were not claimed during the application bootstrap process.
+    // The timing is similar to when we kick off serialization on the server.
+    const isStablePromise = appRef.isStable.pipe(first((isStable) => isStable)).toPromise();
+    const pendingTasksPromise = pendingTasks.whenAllTasksComplete;
+    return Promise.allSettled([isStablePromise, pendingTasksPromise]).then(() => {
+        const viewRefs = appRef._views;
+        for (const viewRef of viewRefs) {
+            const lView = getComponentLViewForHydration(viewRef);
+            // An `lView` might be `null` if a `ViewRef` represents
+            // an embedded view (not a component view).
+            if (lView !== null && lView[HOST] !== null) {
+                cleanupLView(lView);
+                ngDevMode && ngDevMode.dehydratedViewsCleanupRuns++;
+            }
+        }
+    });
+}
 
 /**
  * Given a current DOM node and a serialized information about the views
@@ -22469,20 +23497,24 @@ function removeDehydratedView(dehydratedView, renderer) {
 function locateDehydratedViewsInContainer(currentRNode, serializedViews) {
     const dehydratedViews = [];
     for (const serializedView of serializedViews) {
-        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);
+        // 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);
         }
-        dehydratedViews.push(view);
     }
     return [currentRNode, dehydratedViews];
 }
@@ -22546,12 +23578,12 @@ function findMatchingDehydratedView(lContainer, template) {
  * @publicApi
  */
 class ViewContainerRef {
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = injectViewContainerRef; }
 }
-/**
- * @internal
- * @nocollapse
- */
-ViewContainerRef.__NG_ELEMENT_ID__ = injectViewContainerRef;
 /**
  * Creates a ViewContainerRef and stores it on the injector. Or, if the ViewContainerRef
  * already exists, retrieves the existing ViewContainerRef.
@@ -22863,21 +23895,22 @@ function locateOrCreateAnchorNode(lContainer, hostLView, hostTNode, slotValue) {
     if (lContainer[NATIVE] && lContainer[DEHYDRATED_VIEWS])
         return;
     const hydrationInfo = hostLView[HYDRATION];
-    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock(hostTNode);
+    const noOffsetIndex = hostTNode.index - HEADER_OFFSET;
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock(hostTNode) ||
+        isDisconnectedNode(hydrationInfo, noOffsetIndex);
     // Regular creation mode.
     if (isNodeCreationMode) {
         return createAnchorNode(lContainer, hostLView, hostTNode, slotValue);
     }
     // Hydration mode, looking up an anchor node and dehydrated views in DOM.
-    const index = hostTNode.index - HEADER_OFFSET;
-    const currentRNode = getSegmentHead(hydrationInfo, index);
-    const serializedViews = hydrationInfo.data[CONTAINERS]?.[index];
+    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);
+        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
@@ -23716,7 +24749,6 @@ function verifySemanticsOfNgModuleDef(moduleType, allowDuplicateDeclarationsInRo
     ];
     exports.forEach(verifyExportsAreDeclaredOrReExported);
     declarations.forEach(decl => verifyDeclarationIsUnique(decl, allowDuplicateDeclarationsInRoot));
-    declarations.forEach(verifyComponentEntryComponentsIsPartOfNgModule);
     const ngModule = getAnnotation(moduleType, 'NgModule');
     if (ngModule) {
         ngModule.imports &&
@@ -23726,8 +24758,6 @@ function verifySemanticsOfNgModuleDef(moduleType, allowDuplicateDeclarationsInRo
             });
         ngModule.bootstrap && deepForEach(ngModule.bootstrap, verifyCorrectBootstrapType);
         ngModule.bootstrap && deepForEach(ngModule.bootstrap, verifyComponentIsPartOfNgModule);
-        ngModule.entryComponents &&
-            deepForEach(ngModule.entryComponents, verifyComponentIsPartOfNgModule);
     }
     // Throw Error if any errors were detected.
     if (errors.length) {
@@ -23805,16 +24835,6 @@ function verifySemanticsOfNgModuleDef(moduleType, allowDuplicateDeclarationsInRo
                 `function for bootstrap instead.`);
         }
     }
-    function verifyComponentEntryComponentsIsPartOfNgModule(type) {
-        type = resolveForwardRef(type);
-        if (getComponentDef$1(type)) {
-            // We know we are component
-            const component = getAnnotation(type, 'Component');
-            if (component && component.entryComponents) {
-                deepForEach(component.entryComponents, verifyComponentIsPartOfNgModule);
-            }
-        }
-    }
     function verifySemanticsOfNgModuleImport(type, importingModule) {
         type = resolveForwardRef(type);
         const directiveDef = getComponentDef$1(type) || getDirectiveDef(type);
@@ -24715,10 +25735,11 @@ class TestBedCompiler {
         }
     }
     queueTypesFromModulesArray(arr) {
-        // Because we may encounter the same NgModule while processing the imports and exports of an
-        // NgModule tree, we cache them in this set so we can skip ones that have already been seen
-        // encountered. In some test setups, this caching resulted in 10X runtime improvement.
-        const processedNgModuleDefs = new Set();
+        // Because we may encounter the same NgModule or a standalone Component while processing
+        // the dependencies of an NgModule or a standalone Component, we cache them in this set so we
+        // can skip ones that have already been seen encountered. In some test setups, this caching
+        // resulted in 10X runtime improvement.
+        const processedDefs = new Set();
         const queueTypesFromModulesArrayRecur = (arr) => {
             for (const value of arr) {
                 if (Array.isArray(value)) {
@@ -24726,10 +25747,10 @@ class TestBedCompiler {
                 }
                 else if (hasNgModuleDef(value)) {
                     const def = value.ɵmod;
-                    if (processedNgModuleDefs.has(def)) {
+                    if (processedDefs.has(def)) {
                         continue;
                     }
-                    processedNgModuleDefs.add(def);
+                    processedDefs.add(def);
                     // Look through declarations, imports, and exports, and queue
                     // everything found there.
                     this.queueTypeArray(maybeUnwrapFn(def.declarations), value);
@@ -24742,6 +25763,10 @@ class TestBedCompiler {
                 else if (isStandaloneComponent(value)) {
                     this.queueType(value, null);
                     const def = getComponentDef(value);
+                    if (processedDefs.has(def)) {
+                        continue;
+                    }
+                    processedDefs.add(def);
                     const dependencies = maybeUnwrapFn(def.dependencies ?? []);
                     dependencies.forEach((dependency) => {
                         // Note: in AOT, the `dependencies` might also contain regular
@@ -25109,6 +26134,7 @@ class TestBedImpl {
          */
         this.globalCompilationChecked = false;
     }
+    static { this._INSTANCE = null; }
     static get INSTANCE() {
         return TestBedImpl._INSTANCE = TestBedImpl._INSTANCE || new TestBedImpl();
     }
@@ -25518,7 +26544,6 @@ class TestBedImpl {
         }
     }
 }
-TestBedImpl._INSTANCE = null;
 /**
  * @description
  * Configures and initializes environment for unit testing and provides methods for