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

package/fesm2020/testing.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v16.0.0-next.3
+ * @license Angular v16.0.0-next.4
  * (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;
@@ -2446,12 +2448,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 +2472,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;
 }
@@ -3297,6 +3311,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 +3727,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),
@@ -8805,6 +8833,7 @@ class R3Injector extends EnvironmentInjector {
     }
     onDestroy(callback) {
         this._onDestroyHooks.push(callback);
+        return () => this.removeOnDestroy(callback);
     }
     runInContext(fn) {
         this.assertNotDestroyed();
@@ -8979,6 +9008,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 +9199,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 = {
@@ -9306,6 +9372,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 +9392,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,
@@ -9504,10 +9586,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`.
@@ -9688,7 +9783,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('16.0.0-next.3');
+const VERSION = new Version('16.0.0-next.4');
 
 // This default value is when checking the hierarchy for a token.
 //
@@ -14380,40 +14475,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 +14923,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 +14942,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 +14956,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 +14984,183 @@ 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 = [];
+    let i = 0;
+    while (i < instructions.length) {
+        const step = instructions[i++];
+        const repeat = instructions[i++];
+        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;
+    let i = 0;
+    while (i < instructions.length) {
+        const step = instructions[i++];
+        const repeat = instructions[i++];
+        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 +15237,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 +15246,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 +15503,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 +15527,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(renderer, 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 +15671,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 +16053,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);
     }
@@ -17334,7 +18019,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 +18027,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 +18035,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) {
@@ -22460,6 +23145,54 @@ 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) {
+    // 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.
+    return appRef.isStable.pipe(first((isStable) => isStable)).toPromise().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 +23202,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];
 }
@@ -22863,21 +23600,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
@@ -24715,10 +25453,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 +25465,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 +25481,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