Function validateMatchingNode

packages/core/src/hydration/error_handling.ts:59–121

(
  node: RNode | null,
  nodeType: number,
  tagName: string | null,
  lView: LView,
  tNode: TNode,
  isViewContainerAnchor = false,
)

 * Validates that provided nodes match during the hydration process.
 */
export function validateMatchingNode(
  node: RNode | null,
  nodeType: number,
  tagName: string | null,
  lView: LView,
  tNode: TNode,
  isViewContainerAnchor = false,
): void {
  if (
    !node ||
    (node as Node).nodeType !== nodeType ||
    ((node as Node).nodeType === Node.ELEMENT_NODE &&
      (node as HTMLElement).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 expectedDom = describeExpectedDom(lView, tNode, isViewContainerAnchor);
    const expected = `Angular expected this DOM:\n\n${expectedDom}\n\n`;

    let actual = '';
    const componentHostElement = unwrapRNode(lView[HOST]!);
    if (!node) {
      // No node found during hydration.
      header += `the node was not found.\n\n`;

      // Since the node is missing, we use the closest node to attach the error to
      markRNodeAsHavingHydrationMismatch(componentHostElement, expectedDom);
    } else {
      const actualNode = shortRNodeDescription(
        (node as Node).nodeType,
        (node as HTMLElement).tagName ?? null,
        (node as HTMLElement).textContent ?? null,
      );

      header += `found ${actualNode}.\n\n`;
      const actualDom = describeDomFromNode(node);
      actual = `Actual DOM is:\n\n${actualDom}\n\n`;

      // DevTools only report hydration issues on the component level, so we attach extra debug
      // info to a component host element to make it available to DevTools.
      markRNodeAsHavingHydrationMismatch(componentHostElement, expectedDom, actualDom);
    }

    const footer = getHydrationErrorFooter(componentClassName);
    let message = header + expected + actual + getHydrationAttributeNote() + footer;

    // Check both when a mismatching node is found AND when the expected node is missing,
    // since third-party scripts can both inject extra nodes and remove existing ones.
    if (!node || (node && isLikelyExternalSourceNode(node))) {
      message +=
        `Note: It looks like this mismatch may have been caused by a third-party script or ` +
        `browser extension that modified the DOM outside of Angular's control. ` +
        `Angular hydration does not support nodes injected or removed outside of the Angular-managed DOM. ` +
        `Note: If you know which element in the DOM this will be inserted, consider adding ngSkipHydration to prevent this error. \n\n`;