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

package/fesm2020/testing.mjs

@@ -1,12 +1,13 @@
 /**
- * @license Angular v16.0.0-next.2
+ * @license Angular v16.0.0-next.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
 
-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, 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 { 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
@@ -1637,6 +1638,8 @@ function ngDevModeResetPerfCounters() {
         rendererCreateComment: 0,
         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;
@@ -2197,15 +2200,659 @@ const NG_ELEMENT_ID = getClosureSafeProperty({ __NG_ELEMENT_ID__: getClosureSafe
  */
 const NG_ENV_ID = getClosureSafeProperty({ __NG_ENV_ID__: getClosureSafeProperty });
 
-/** Counter used to generate unique IDs for component definitions. */
-let componentDefCount = 0;
+/**
+ * Returns an index of `classToSearch` in `className` taking token boundaries into account.
+ *
+ * `classIndexOf('AB A', 'A', 0)` will be 3 (not 0 since `AB!==A`)
+ *
+ * @param className A string containing classes (whitespace separated)
+ * @param classToSearch A class name to locate
+ * @param startingIndex Starting location of search
+ * @returns an index of the located class (or -1 if not found)
+ */
+function classIndexOf(className, classToSearch, startingIndex) {
+    ngDevMode && assertNotEqual(classToSearch, '', 'can not look for "" string.');
+    let end = className.length;
+    while (true) {
+        const foundIndex = className.indexOf(classToSearch, startingIndex);
+        if (foundIndex === -1)
+            return foundIndex;
+        if (foundIndex === 0 || className.charCodeAt(foundIndex - 1) <= 32 /* CharCode.SPACE */) {
+            // Ensure that it has leading whitespace
+            const length = classToSearch.length;
+            if (foundIndex + length === end ||
+                className.charCodeAt(foundIndex + length) <= 32 /* CharCode.SPACE */) {
+                // Ensure that it has trailing whitespace
+                return foundIndex;
+            }
+        }
+        // False positive, keep searching from where we left off.
+        startingIndex = foundIndex + 1;
+    }
+}
+
+/**
+ * Assigns all attribute values to the provided element via the inferred renderer.
+ *
+ * This function accepts two forms of attribute entries:
+ *
+ * default: (key, value):
+ *  attrs = [key1, value1, key2, value2]
+ *
+ * namespaced: (NAMESPACE_MARKER, uri, name, value)
+ *  attrs = [NAMESPACE_MARKER, uri, name, value, NAMESPACE_MARKER, uri, name, value]
+ *
+ * The `attrs` array can contain a mix of both the default and namespaced entries.
+ * The "default" values are set without a marker, but if the function comes across
+ * a marker value then it will attempt to set a namespaced value. If the marker is
+ * not of a namespaced value then the function will quit and return the index value
+ * where it stopped during the iteration of the attrs array.
+ *
+ * See [AttributeMarker] to understand what the namespace marker value is.
+ *
+ * Note that this instruction does not support assigning style and class values to
+ * an element. See `elementStart` and `elementHostAttrs` to learn how styling values
+ * are applied to an element.
+ * @param renderer The renderer to be used
+ * @param native The element that the attributes will be assigned to
+ * @param attrs The attribute array of values that will be assigned to the element
+ * @returns the index value that was last accessed in the attributes array
+ */
+function setUpAttributes(renderer, native, attrs) {
+    let i = 0;
+    while (i < attrs.length) {
+        const value = attrs[i];
+        if (typeof value === 'number') {
+            // only namespaces are supported. Other value types (such as style/class
+            // entries) are not supported in this function.
+            if (value !== 0 /* AttributeMarker.NamespaceURI */) {
+                break;
+            }
+            // we just landed on the marker value ... therefore
+            // we should skip to the next entry
+            i++;
+            const namespaceURI = attrs[i++];
+            const attrName = attrs[i++];
+            const attrVal = attrs[i++];
+            ngDevMode && ngDevMode.rendererSetAttribute++;
+            renderer.setAttribute(native, attrName, attrVal, namespaceURI);
+        }
+        else {
+            // attrName is string;
+            const attrName = value;
+            const attrVal = attrs[++i];
+            // Standard attributes
+            ngDevMode && ngDevMode.rendererSetAttribute++;
+            if (isAnimationProp(attrName)) {
+                renderer.setProperty(native, attrName, attrVal);
+            }
+            else {
+                renderer.setAttribute(native, attrName, attrVal);
+            }
+            i++;
+        }
+    }
+    // another piece of code may iterate over the same attributes array. Therefore
+    // it may be helpful to return the exact spot where the attributes array exited
+    // whether by running into an unsupported marker or if all the static values were
+    // iterated over.
+    return i;
+}
+/**
+ * Test whether the given value is a marker that indicates that the following
+ * attribute values in a `TAttributes` array are only the names of attributes,
+ * and not name-value pairs.
+ * @param marker The attribute marker to test.
+ * @returns true if the marker is a "name-only" marker (e.g. `Bindings`, `Template` or `I18n`).
+ */
+function isNameOnlyAttributeMarker(marker) {
+    return marker === 3 /* AttributeMarker.Bindings */ || marker === 4 /* AttributeMarker.Template */ ||
+        marker === 6 /* AttributeMarker.I18n */;
+}
+function isAnimationProp(name) {
+    // Perf note: accessing charCodeAt to check for the first character of a string is faster as
+    // compared to accessing a character at index 0 (ex. name[0]). The main reason for this is that
+    // charCodeAt doesn't allocate memory to return a substring.
+    return name.charCodeAt(0) === 64 /* CharCode.AT_SIGN */;
+}
+/**
+ * Merges `src` `TAttributes` into `dst` `TAttributes` removing any duplicates in the process.
+ *
+ * This merge function keeps the order of attrs same.
+ *
+ * @param dst Location of where the merged `TAttributes` should end up.
+ * @param src `TAttributes` which should be appended to `dst`
+ */
+function mergeHostAttrs(dst, src) {
+    if (src === null || src.length === 0) {
+        // do nothing
+    }
+    else if (dst === null || dst.length === 0) {
+        // We have source, but dst is empty, just make a copy.
+        dst = src.slice();
+    }
+    else {
+        let srcMarker = -1 /* AttributeMarker.ImplicitAttributes */;
+        for (let i = 0; i < src.length; i++) {
+            const item = src[i];
+            if (typeof item === 'number') {
+                srcMarker = item;
+            }
+            else {
+                if (srcMarker === 0 /* AttributeMarker.NamespaceURI */) {
+                    // Case where we need to consume `key1`, `key2`, `value` items.
+                }
+                else if (srcMarker === -1 /* AttributeMarker.ImplicitAttributes */ ||
+                    srcMarker === 2 /* AttributeMarker.Styles */) {
+                    // Case where we have to consume `key1` and `value` only.
+                    mergeHostAttribute(dst, srcMarker, item, null, src[++i]);
+                }
+                else {
+                    // Case where we have to consume `key1` only.
+                    mergeHostAttribute(dst, srcMarker, item, null, null);
+                }
+            }
+        }
+    }
+    return dst;
+}
+/**
+ * Append `key`/`value` to existing `TAttributes` taking region marker and duplicates into account.
+ *
+ * @param dst `TAttributes` to append to.
+ * @param marker Region where the `key`/`value` should be added.
+ * @param key1 Key to add to `TAttributes`
+ * @param key2 Key to add to `TAttributes` (in case of `AttributeMarker.NamespaceURI`)
+ * @param value Value to add or to overwrite to `TAttributes` Only used if `marker` is not Class.
+ */
+function mergeHostAttribute(dst, marker, key1, key2, value) {
+    let i = 0;
+    // Assume that new markers will be inserted at the end.
+    let markerInsertPosition = dst.length;
+    // scan until correct type.
+    if (marker === -1 /* AttributeMarker.ImplicitAttributes */) {
+        markerInsertPosition = -1;
+    }
+    else {
+        while (i < dst.length) {
+            const dstValue = dst[i++];
+            if (typeof dstValue === 'number') {
+                if (dstValue === marker) {
+                    markerInsertPosition = -1;
+                    break;
+                }
+                else if (dstValue > marker) {
+                    // We need to save this as we want the markers to be inserted in specific order.
+                    markerInsertPosition = i - 1;
+                    break;
+                }
+            }
+        }
+    }
+    // search until you find place of insertion
+    while (i < dst.length) {
+        const item = dst[i];
+        if (typeof item === 'number') {
+            // since `i` started as the index after the marker, we did not find it if we are at the next
+            // marker
+            break;
+        }
+        else if (item === key1) {
+            // We already have same token
+            if (key2 === null) {
+                if (value !== null) {
+                    dst[i + 1] = value;
+                }
+                return;
+            }
+            else if (key2 === dst[i + 1]) {
+                dst[i + 2] = value;
+                return;
+            }
+        }
+        // Increment counter.
+        i++;
+        if (key2 !== null)
+            i++;
+        if (value !== null)
+            i++;
+    }
+    // insert at location.
+    if (markerInsertPosition !== -1) {
+        dst.splice(markerInsertPosition, 0, marker);
+        i = markerInsertPosition + 1;
+    }
+    dst.splice(i++, 0, key1);
+    if (key2 !== null) {
+        dst.splice(i++, 0, key2);
+    }
+    if (value !== null) {
+        dst.splice(i++, 0, value);
+    }
+}
+
+const NG_TEMPLATE_SELECTOR = 'ng-template';
+/**
+ * Search the `TAttributes` to see if it contains `cssClassToMatch` (case insensitive)
+ *
+ * @param attrs `TAttributes` to search through.
+ * @param cssClassToMatch class to match (lowercase)
+ * @param isProjectionMode Whether or not class matching should look into the attribute `class` in
+ *    addition to the `AttributeMarker.Classes`.
+ */
+function isCssClassMatching(attrs, cssClassToMatch, isProjectionMode) {
+    // TODO(misko): The fact that this function needs to know about `isProjectionMode` seems suspect.
+    // It is strange to me that sometimes the class information comes in form of `class` attribute
+    // and sometimes in form of `AttributeMarker.Classes`. Some investigation is needed to determine
+    // if that is the right behavior.
+    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 (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 */) {
+            // We found the classes section. Start searching for the class.
+            while (i < attrs.length && typeof (item = attrs[i++]) == 'string') {
+                // while we have strings
+                if (item.toLowerCase() === cssClassToMatch)
+                    return true;
+            }
+            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;
+}
+/**
+ * Checks whether the `tNode` represents an inline template (e.g. `*ngFor`).
+ *
+ * @param tNode current TNode
+ */
+function isInlineTemplate(tNode) {
+    return tNode.type === 4 /* TNodeType.Container */ && tNode.value !== NG_TEMPLATE_SELECTOR;
+}
+/**
+ * Function that checks whether a given tNode matches tag-based selector and has a valid type.
+ *
+ * Matching can be performed in 2 modes: projection mode (when we project nodes) and regular
+ * directive matching mode:
+ * - in the "directive matching" mode we do _not_ take TContainer's tagName into account if it is
+ * different from NG_TEMPLATE_SELECTOR (value different from NG_TEMPLATE_SELECTOR indicates that a
+ * tag name was extracted from * syntax so we would match the same directive twice);
+ * - in the "projection" mode, we use a tag name potentially extracted from the * syntax processing
+ * (applicable to TNodeType.Container only).
+ */
+function hasTagAndTypeMatch(tNode, currentSelector, isProjectionMode) {
+    const tagNameToCompare = tNode.type === 4 /* TNodeType.Container */ && !isProjectionMode ? NG_TEMPLATE_SELECTOR : tNode.value;
+    return currentSelector === tagNameToCompare;
+}
+/**
+ * A utility function to match an Ivy node static data against a simple CSS selector
+ *
+ * @param node static data of the node to match
+ * @param selector The selector to try matching against the node.
+ * @param isProjectionMode if `true` we are matching for content projection, otherwise we are doing
+ * directive matching.
+ * @returns true if node matches the selector.
+ */
+function isNodeMatchingSelector(tNode, selector, isProjectionMode) {
+    ngDevMode && assertDefined(selector[0], 'Selector should have a tag name');
+    let mode = 4 /* SelectorFlags.ELEMENT */;
+    const nodeAttrs = tNode.attrs || [];
+    // Find the index of first attribute that has no value, only a name.
+    const nameOnlyMarkerIdx = getNameOnlyMarkerIndex(nodeAttrs);
+    // When processing ":not" selectors, we skip to the next ":not" if the
+    // current one doesn't match
+    let skipToNextSelector = false;
+    for (let i = 0; i < selector.length; i++) {
+        const current = selector[i];
+        if (typeof current === 'number') {
+            // If we finish processing a :not selector and it hasn't failed, return false
+            if (!skipToNextSelector && !isPositive(mode) && !isPositive(current)) {
+                return false;
+            }
+            // If we are skipping to the next :not() and this mode flag is positive,
+            // it's a part of the current :not() selector, and we should keep skipping
+            if (skipToNextSelector && isPositive(current))
+                continue;
+            skipToNextSelector = false;
+            mode = current | (mode & 1 /* SelectorFlags.NOT */);
+            continue;
+        }
+        if (skipToNextSelector)
+            continue;
+        if (mode & 4 /* SelectorFlags.ELEMENT */) {
+            mode = 2 /* SelectorFlags.ATTRIBUTE */ | mode & 1 /* SelectorFlags.NOT */;
+            if (current !== '' && !hasTagAndTypeMatch(tNode, current, isProjectionMode) ||
+                current === '' && selector.length === 1) {
+                if (isPositive(mode))
+                    return false;
+                skipToNextSelector = true;
+            }
+        }
+        else {
+            const selectorAttrValue = mode & 8 /* SelectorFlags.CLASS */ ? current : selector[++i];
+            // special case for matching against classes when a tNode has been instantiated with
+            // class and style values as separate attribute values (e.g. ['title', CLASS, 'foo'])
+            if ((mode & 8 /* SelectorFlags.CLASS */) && tNode.attrs !== null) {
+                if (!isCssClassMatching(tNode.attrs, selectorAttrValue, isProjectionMode)) {
+                    if (isPositive(mode))
+                        return false;
+                    skipToNextSelector = true;
+                }
+                continue;
+            }
+            const attrName = (mode & 8 /* SelectorFlags.CLASS */) ? 'class' : current;
+            const attrIndexInNode = findAttrIndexInNode(attrName, nodeAttrs, isInlineTemplate(tNode), isProjectionMode);
+            if (attrIndexInNode === -1) {
+                if (isPositive(mode))
+                    return false;
+                skipToNextSelector = true;
+                continue;
+            }
+            if (selectorAttrValue !== '') {
+                let nodeAttrValue;
+                if (attrIndexInNode > nameOnlyMarkerIdx) {
+                    nodeAttrValue = '';
+                }
+                else {
+                    ngDevMode &&
+                        assertNotEqual(nodeAttrs[attrIndexInNode], 0 /* AttributeMarker.NamespaceURI */, 'We do not match directives on namespaced attributes');
+                    // we lowercase the attribute value to be able to match
+                    // selectors without case-sensitivity
+                    // (selectors are already in lowercase when generated)
+                    nodeAttrValue = nodeAttrs[attrIndexInNode + 1].toLowerCase();
+                }
+                const compareAgainstClassName = mode & 8 /* SelectorFlags.CLASS */ ? nodeAttrValue : null;
+                if (compareAgainstClassName &&
+                    classIndexOf(compareAgainstClassName, selectorAttrValue, 0) !== -1 ||
+                    mode & 2 /* SelectorFlags.ATTRIBUTE */ && selectorAttrValue !== nodeAttrValue) {
+                    if (isPositive(mode))
+                        return false;
+                    skipToNextSelector = true;
+                }
+            }
+        }
+    }
+    return isPositive(mode) || skipToNextSelector;
+}
+function isPositive(mode) {
+    return (mode & 1 /* SelectorFlags.NOT */) === 0;
+}
+/**
+ * Examines the attribute's definition array for a node to find the index of the
+ * attribute that matches the given `name`.
+ *
+ * NOTE: This will not match namespaced attributes.
+ *
+ * Attribute matching depends upon `isInlineTemplate` and `isProjectionMode`.
+ * The following table summarizes which types of attributes we attempt to match:
+ *
+ * ===========================================================================================================
+ * Modes                   | Normal Attributes | Bindings Attributes | Template Attributes | I18n
+ * Attributes
+ * ===========================================================================================================
+ * Inline + Projection     | YES               | YES                 | NO                  | YES
+ * -----------------------------------------------------------------------------------------------------------
+ * Inline + Directive      | NO                | NO                  | YES                 | NO
+ * -----------------------------------------------------------------------------------------------------------
+ * Non-inline + Projection | YES               | YES                 | NO                  | YES
+ * -----------------------------------------------------------------------------------------------------------
+ * Non-inline + Directive  | YES               | YES                 | NO                  | YES
+ * ===========================================================================================================
+ *
+ * @param name the name of the attribute to find
+ * @param attrs the attribute array to examine
+ * @param isInlineTemplate true if the node being matched is an inline template (e.g. `*ngFor`)
+ * rather than a manually expanded template node (e.g `<ng-template>`).
+ * @param isProjectionMode true if we are matching against content projection otherwise we are
+ * matching against directives.
+ */
+function findAttrIndexInNode(name, attrs, isInlineTemplate, isProjectionMode) {
+    if (attrs === null)
+        return -1;
+    let i = 0;
+    if (isProjectionMode || !isInlineTemplate) {
+        let bindingsMode = false;
+        while (i < attrs.length) {
+            const maybeAttrName = attrs[i];
+            if (maybeAttrName === name) {
+                return i;
+            }
+            else if (maybeAttrName === 3 /* AttributeMarker.Bindings */ || maybeAttrName === 6 /* AttributeMarker.I18n */) {
+                bindingsMode = true;
+            }
+            else if (maybeAttrName === 1 /* AttributeMarker.Classes */ || maybeAttrName === 2 /* AttributeMarker.Styles */) {
+                let value = attrs[++i];
+                // We should skip classes here because we have a separate mechanism for
+                // matching classes in projection mode.
+                while (typeof value === 'string') {
+                    value = attrs[++i];
+                }
+                continue;
+            }
+            else if (maybeAttrName === 4 /* AttributeMarker.Template */) {
+                // We do not care about Template attributes in this scenario.
+                break;
+            }
+            else if (maybeAttrName === 0 /* AttributeMarker.NamespaceURI */) {
+                // Skip the whole namespaced attribute and value. This is by design.
+                i += 4;
+                continue;
+            }
+            // In binding mode there are only names, rather than name-value pairs.
+            i += bindingsMode ? 1 : 2;
+        }
+        // We did not match the attribute
+        return -1;
+    }
+    else {
+        return matchTemplateAttribute(attrs, name);
+    }
+}
+function isNodeMatchingSelectorList(tNode, selector, isProjectionMode = false) {
+    for (let i = 0; i < selector.length; i++) {
+        if (isNodeMatchingSelector(tNode, selector[i], isProjectionMode)) {
+            return true;
+        }
+    }
+    return false;
+}
+function getProjectAsAttrValue(tNode) {
+    const nodeAttrs = tNode.attrs;
+    if (nodeAttrs != null) {
+        const ngProjectAsAttrIdx = nodeAttrs.indexOf(5 /* AttributeMarker.ProjectAs */);
+        // only check for ngProjectAs in attribute names, don't accidentally match attribute's value
+        // (attribute names are stored at even indexes)
+        if ((ngProjectAsAttrIdx & 1) === 0) {
+            return nodeAttrs[ngProjectAsAttrIdx + 1];
+        }
+    }
+    return null;
+}
+function getNameOnlyMarkerIndex(nodeAttrs) {
+    for (let i = 0; i < nodeAttrs.length; i++) {
+        const nodeAttr = nodeAttrs[i];
+        if (isNameOnlyAttributeMarker(nodeAttr)) {
+            return i;
+        }
+    }
+    return nodeAttrs.length;
+}
+function matchTemplateAttribute(attrs, name) {
+    let i = attrs.indexOf(4 /* AttributeMarker.Template */);
+    if (i > -1) {
+        i++;
+        while (i < attrs.length) {
+            const attr = attrs[i];
+            // Return in case we checked all template attrs and are switching to the next section in the
+            // attrs array (that starts with a number that represents an attribute marker).
+            if (typeof attr === 'number')
+                return -1;
+            if (attr === name)
+                return i;
+            i++;
+        }
+    }
+    return -1;
+}
+/**
+ * Checks whether a selector is inside a CssSelectorList
+ * @param selector Selector to be checked.
+ * @param list List in which to look for the selector.
+ */
+function isSelectorInSelectorList(selector, list) {
+    selectorListLoop: for (let i = 0; i < list.length; i++) {
+        const currentSelectorInList = list[i];
+        if (selector.length !== currentSelectorInList.length) {
+            continue;
+        }
+        for (let j = 0; j < selector.length; j++) {
+            if (selector[j] !== currentSelectorInList[j]) {
+                continue selectorListLoop;
+            }
+        }
+        return true;
+    }
+    return false;
+}
+function maybeWrapInNotSelector(isNegativeMode, chunk) {
+    return isNegativeMode ? ':not(' + chunk.trim() + ')' : chunk;
+}
+function stringifyCSSSelector(selector) {
+    let result = selector[0];
+    let i = 1;
+    let mode = 2 /* SelectorFlags.ATTRIBUTE */;
+    let currentChunk = '';
+    let isNegativeMode = false;
+    while (i < selector.length) {
+        let valueOrMarker = selector[i];
+        if (typeof valueOrMarker === 'string') {
+            if (mode & 2 /* SelectorFlags.ATTRIBUTE */) {
+                const attrValue = selector[++i];
+                currentChunk +=
+                    '[' + valueOrMarker + (attrValue.length > 0 ? '="' + attrValue + '"' : '') + ']';
+            }
+            else if (mode & 8 /* SelectorFlags.CLASS */) {
+                currentChunk += '.' + valueOrMarker;
+            }
+            else if (mode & 4 /* SelectorFlags.ELEMENT */) {
+                currentChunk += ' ' + valueOrMarker;
+            }
+        }
+        else {
+            //
+            // Append current chunk to the final result in case we come across SelectorFlag, which
+            // indicates that the previous section of a selector is over. We need to accumulate content
+            // between flags to make sure we wrap the chunk later in :not() selector if needed, e.g.
+            // ```
+            //  ['', Flags.CLASS, '.classA', Flags.CLASS | Flags.NOT, '.classB', '.classC']
+            // ```
+            // should be transformed to `.classA :not(.classB .classC)`.
+            //
+            // Note: for negative selector part, we accumulate content between flags until we find the
+            // next negative flag. This is needed to support a case where `:not()` rule contains more than
+            // one chunk, e.g. the following selector:
+            // ```
+            //  ['', Flags.ELEMENT | Flags.NOT, 'p', Flags.CLASS, 'foo', Flags.CLASS | Flags.NOT, 'bar']
+            // ```
+            // should be stringified to `:not(p.foo) :not(.bar)`
+            //
+            if (currentChunk !== '' && !isPositive(valueOrMarker)) {
+                result += maybeWrapInNotSelector(isNegativeMode, currentChunk);
+                currentChunk = '';
+            }
+            mode = valueOrMarker;
+            // According to CssSelector spec, once we come across `SelectorFlags.NOT` flag, the negative
+            // mode is maintained for remaining chunks of a selector.
+            isNegativeMode = isNegativeMode || !isPositive(mode);
+        }
+        i++;
+    }
+    if (currentChunk !== '') {
+        result += maybeWrapInNotSelector(isNegativeMode, currentChunk);
+    }
+    return result;
+}
+/**
+ * Generates string representation of CSS selector in parsed form.
+ *
+ * ComponentDef and DirectiveDef are generated with the selector in parsed form to avoid doing
+ * additional parsing at runtime (for example, for directive matching). However in some cases (for
+ * example, while bootstrapping a component), a string version of the selector is required to query
+ * for the host element on the page. This function takes the parsed form of a selector and returns
+ * its string representation.
+ *
+ * @param selectorList selector in parsed form
+ * @returns string representation of a given selector
+ */
+function stringifyCSSSelectorList(selectorList) {
+    return selectorList.map(stringifyCSSSelector).join(',');
+}
+/**
+ * Extracts attributes and classes information from a given CSS selector.
+ *
+ * This function is used while creating a component dynamically. In this case, the host element
+ * (that is created dynamically) should contain attributes and classes specified in component's CSS
+ * selector.
+ *
+ * @param selector CSS selector in parsed form (in a form of array)
+ * @returns object with `attrs` and `classes` fields that contain extracted information
+ */
+function extractAttrsAndClassesFromSelector(selector) {
+    const attrs = [];
+    const classes = [];
+    let i = 1;
+    let mode = 2 /* SelectorFlags.ATTRIBUTE */;
+    while (i < selector.length) {
+        let valueOrMarker = selector[i];
+        if (typeof valueOrMarker === 'string') {
+            if (mode === 2 /* SelectorFlags.ATTRIBUTE */) {
+                if (valueOrMarker !== '') {
+                    attrs.push(valueOrMarker, selector[++i]);
+                }
+            }
+            else if (mode === 8 /* SelectorFlags.CLASS */) {
+                classes.push(valueOrMarker);
+            }
+        }
+        else {
+            // According to CssSelector spec, once we come across `SelectorFlags.NOT` flag, the negative
+            // mode is maintained for remaining chunks of a selector. Since attributes and classes are
+            // extracted only for "positive" part of the selector, we can stop here.
+            if (!isPositive(mode))
+                break;
+            mode = valueOrMarker;
+        }
+        i++;
+    }
+    return { attrs, classes };
+}
+
 /**
  * Create a component definition object.
  *
  *
  * # Example
  * ```
- * class MyDirective {
+ * class MyComponent {
  *   // Generated by Angular Template Compiler
  *   // [Symbol] syntax will not be supported by TypeScript until v2.7
  *   static ɵcmp = defineComponent({
@@ -2220,61 +2867,32 @@ function ɵɵdefineComponent(componentDefinition) {
         // Initialize ngDevMode. This must be the first statement in ɵɵdefineComponent.
         // See the `initNgDevMode` docstring for more information.
         (typeof ngDevMode === 'undefined' || ngDevMode) && initNgDevMode();
-        const type = componentDefinition.type;
-        const standalone = componentDefinition.standalone === true;
-        const declaredInputs = {};
+        const baseDef = getNgDirectiveDef(componentDefinition);
         const def = {
-            type: type,
-            providersResolver: null,
+            ...baseDef,
             decls: componentDefinition.decls,
             vars: componentDefinition.vars,
-            factory: null,
-            template: componentDefinition.template || null,
+            template: componentDefinition.template,
             consts: componentDefinition.consts || null,
             ngContentSelectors: componentDefinition.ngContentSelectors,
-            hostBindings: componentDefinition.hostBindings || null,
-            hostVars: componentDefinition.hostVars || 0,
-            hostAttrs: componentDefinition.hostAttrs || null,
-            contentQueries: componentDefinition.contentQueries || null,
-            declaredInputs: declaredInputs,
-            inputs: null,
-            outputs: null,
-            exportAs: componentDefinition.exportAs || null,
             onPush: componentDefinition.changeDetection === ChangeDetectionStrategy.OnPush,
             directiveDefs: null,
             pipeDefs: null,
-            standalone,
-            dependencies: standalone && componentDefinition.dependencies || null,
+            dependencies: baseDef.standalone && componentDefinition.dependencies || null,
             getStandaloneInjector: null,
-            selectors: componentDefinition.selectors || EMPTY_ARRAY,
-            viewQuery: componentDefinition.viewQuery || null,
-            features: componentDefinition.features || null,
             data: componentDefinition.data || {},
             encapsulation: componentDefinition.encapsulation || ViewEncapsulation.Emulated,
-            id: `c${componentDefCount++}`,
             styles: componentDefinition.styles || EMPTY_ARRAY,
             _: null,
-            setInput: null,
             schemas: componentDefinition.schemas || null,
             tView: null,
-            findHostDirectiveDefs: null,
-            hostDirectives: null,
+            id: '',
         };
+        initFeatures(def);
         const dependencies = componentDefinition.dependencies;
-        const feature = componentDefinition.features;
-        def.inputs = invertObject(componentDefinition.inputs, declaredInputs),
-            def.outputs = invertObject(componentDefinition.outputs),
-            feature && feature.forEach((fn) => fn(def));
-        def.directiveDefs = dependencies ?
-            (() => (typeof dependencies === 'function' ? dependencies() : dependencies)
-                .map(extractDirectiveDef)
-                .filter(nonNull)) :
-            null;
-        def.pipeDefs = dependencies ?
-            (() => (typeof dependencies === 'function' ? dependencies() : dependencies)
-                .map(getPipeDef$1)
-                .filter(nonNull)) :
-            null;
+        def.directiveDefs = extractDefListOrFactory(dependencies, /* pipeDef */ false);
+        def.pipeDefs = extractDefListOrFactory(dependencies, /* pipeDef */ true);
+        def.id = getComponentId(def);
         return def;
     });
 }
@@ -2289,8 +2907,8 @@ function ɵɵdefineComponent(componentDefinition) {
  */
 function ɵɵsetComponentScope(type, directives, pipes) {
     const def = type.ɵcmp;
-    def.directiveDefs = () => (typeof directives === 'function' ? directives() : directives).map(extractDirectiveDef);
-    def.pipeDefs = () => (typeof pipes === 'function' ? pipes() : pipes).map(getPipeDef$1);
+    def.directiveDefs = extractDefListOrFactory(directives, /* pipeDef */ false);
+    def.pipeDefs = extractDefListOrFactory(pipes, /* pipeDef */ true);
 }
 function extractDirectiveDef(type) {
     return getComponentDef$1(type) || getDirectiveDef(type);
@@ -2425,7 +3043,13 @@ function invertObject(obj, secondary) {
  *
  * @codeGenApi
  */
-const ɵɵdefineDirective = ɵɵdefineComponent;
+function ɵɵdefineDirective(directiveDefinition) {
+    return noSideEffects(() => {
+        const def = getNgDirectiveDef(directiveDefinition);
+        initFeatures(def);
+        return def;
+    });
+}
 /**
  * Create a pipe definition object.
  *
@@ -2485,6 +3109,99 @@ function getNgModuleDef(type, throwNotFound) {
     }
     return ngModuleDef;
 }
+function getNgDirectiveDef(directiveDefinition) {
+    const declaredInputs = {};
+    return {
+        type: directiveDefinition.type,
+        providersResolver: null,
+        factory: null,
+        hostBindings: directiveDefinition.hostBindings || null,
+        hostVars: directiveDefinition.hostVars || 0,
+        hostAttrs: directiveDefinition.hostAttrs || null,
+        contentQueries: directiveDefinition.contentQueries || null,
+        declaredInputs,
+        exportAs: directiveDefinition.exportAs || null,
+        standalone: directiveDefinition.standalone === true,
+        selectors: directiveDefinition.selectors || EMPTY_ARRAY,
+        viewQuery: directiveDefinition.viewQuery || null,
+        features: directiveDefinition.features || null,
+        setInput: null,
+        findHostDirectiveDefs: null,
+        hostDirectives: null,
+        inputs: invertObject(directiveDefinition.inputs, declaredInputs),
+        outputs: invertObject(directiveDefinition.outputs),
+    };
+}
+function initFeatures(definition) {
+    definition.features?.forEach((fn) => fn(definition));
+}
+function extractDefListOrFactory(dependencies, pipeDef) {
+    if (!dependencies) {
+        return null;
+    }
+    const defExtractor = pipeDef ? getPipeDef$1 : extractDirectiveDef;
+    return () => (typeof dependencies === 'function' ? dependencies() : dependencies)
+        .map(dep => defExtractor(dep))
+        .filter(nonNull);
+}
+/**
+ * A map that contains the generated component IDs and type.
+ */
+const GENERATED_COMP_IDS = new Map();
+/**
+ * A method can returns a component ID from the component definition using a variant of DJB2 hash
+ * algorithm.
+ */
+function getComponentId(componentDef) {
+    let hash = 0;
+    // We cannot rely solely on the component selector as the same selector can be used in different
+    // modules.
+    //
+    // `componentDef.style` is not used, due to it causing inconsistencies. Ex: when server
+    // component styles has no sourcemaps and browsers do.
+    //
+    // Example:
+    // https://github.com/angular/components/blob/d9f82c8f95309e77a6d82fd574c65871e91354c2/src/material/core/option/option.ts#L248
+    // https://github.com/angular/components/blob/285f46dc2b4c5b127d356cb7c4714b221f03ce50/src/material/legacy-core/option/option.ts#L32
+    const hashSelectors = [
+        componentDef.selectors,
+        componentDef.ngContentSelectors,
+        componentDef.hostVars,
+        componentDef.hostAttrs,
+        componentDef.consts,
+        componentDef.vars,
+        componentDef.decls,
+        componentDef.encapsulation,
+        componentDef.standalone,
+        // We cannot use 'componentDef.type.name' as the name of the symbol will change and will not
+        // match in the server and browser bundles.
+        Object.getOwnPropertyNames(componentDef.type.prototype),
+        !!componentDef.contentQueries,
+        !!componentDef.viewQuery,
+    ].join('|');
+    for (const char of hashSelectors) {
+        hash = Math.imul(31, hash) + char.charCodeAt(0) << 0;
+    }
+    // Force positive number hash.
+    // 2147483647 = equivalent of Integer.MAX_VALUE.
+    hash += 2147483647 + 1;
+    const compId = 'c' + hash;
+    if (typeof ngDevMode === 'undefined' || ngDevMode) {
+        if (GENERATED_COMP_IDS.has(compId)) {
+            const previousCompDefType = GENERATED_COMP_IDS.get(compId);
+            if (previousCompDefType !== componentDef.type) {
+                // TODO: use `formatRuntimeError` to have an error code and we can later on create an error
+                // guide to explain this further.
+                console.warn(`Component ID generation collision detected. Components '${previousCompDefType.name}' and '${componentDef.type.name}' with selector '${stringifyCSSSelectorList(componentDef
+                    .selectors)}' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID.`);
+            }
+        }
+        else {
+            GENERATED_COMP_IDS.set(compId, componentDef.type);
+        }
+    }
+    return compId;
+}
 
 // Below are constants for LView indices to help us look up LView members
 // without having to remember the specific indices.
@@ -2553,13 +3270,14 @@ const HAS_TRANSPLANTED_VIEWS = 2;
 const NATIVE = 7;
 const VIEW_REFS = 8;
 const MOVED_VIEWS = 9;
+const DEHYDRATED_VIEWS = 10;
 /**
  * Size of LContainer's header. Represents the index after which all views in the
  * container will be inserted. We need to keep a record of current views so we know
  * which views are already in the DOM (and don't need to be re-added) and so we can
  * remove views from the DOM when they are no longer required.
  */
-const CONTAINER_HEADER_OFFSET = 10;
+const CONTAINER_HEADER_OFFSET = 11;
 // Note: This hack is necessary so we don't erroneously get a circular dependency
 // failure based on types.
 const unusedValueExportToPlacateAjd$3 = 1;
@@ -2588,11 +3306,14 @@ function isDirectiveHost(tNode) {
     return (tNode.flags & 1 /* TNodeFlags.isDirectiveHost */) === 1 /* TNodeFlags.isDirectiveHost */;
 }
 function isComponentDef(def) {
-    return def.template !== null;
+    return !!def.template;
 }
 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)
@@ -3006,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),
@@ -3045,7 +3777,7 @@ function getBindingsEnabled() {
  * Returns true if currently inside a skip hydration block.
  * @returns boolean
  */
-function isInSkipHydrationBlock() {
+function isInSkipHydrationBlock$1() {
     return instructionState.skipHydrationRootTNode !== null;
 }
 /**
@@ -3990,206 +4722,6 @@ function assertPureTNodeType(type) {
     }
 }
 
-/**
- * Assigns all attribute values to the provided element via the inferred renderer.
- *
- * This function accepts two forms of attribute entries:
- *
- * default: (key, value):
- *  attrs = [key1, value1, key2, value2]
- *
- * namespaced: (NAMESPACE_MARKER, uri, name, value)
- *  attrs = [NAMESPACE_MARKER, uri, name, value, NAMESPACE_MARKER, uri, name, value]
- *
- * The `attrs` array can contain a mix of both the default and namespaced entries.
- * The "default" values are set without a marker, but if the function comes across
- * a marker value then it will attempt to set a namespaced value. If the marker is
- * not of a namespaced value then the function will quit and return the index value
- * where it stopped during the iteration of the attrs array.
- *
- * See [AttributeMarker] to understand what the namespace marker value is.
- *
- * Note that this instruction does not support assigning style and class values to
- * an element. See `elementStart` and `elementHostAttrs` to learn how styling values
- * are applied to an element.
- * @param renderer The renderer to be used
- * @param native The element that the attributes will be assigned to
- * @param attrs The attribute array of values that will be assigned to the element
- * @returns the index value that was last accessed in the attributes array
- */
-function setUpAttributes(renderer, native, attrs) {
-    let i = 0;
-    while (i < attrs.length) {
-        const value = attrs[i];
-        if (typeof value === 'number') {
-            // only namespaces are supported. Other value types (such as style/class
-            // entries) are not supported in this function.
-            if (value !== 0 /* AttributeMarker.NamespaceURI */) {
-                break;
-            }
-            // we just landed on the marker value ... therefore
-            // we should skip to the next entry
-            i++;
-            const namespaceURI = attrs[i++];
-            const attrName = attrs[i++];
-            const attrVal = attrs[i++];
-            ngDevMode && ngDevMode.rendererSetAttribute++;
-            renderer.setAttribute(native, attrName, attrVal, namespaceURI);
-        }
-        else {
-            // attrName is string;
-            const attrName = value;
-            const attrVal = attrs[++i];
-            // Standard attributes
-            ngDevMode && ngDevMode.rendererSetAttribute++;
-            if (isAnimationProp(attrName)) {
-                renderer.setProperty(native, attrName, attrVal);
-            }
-            else {
-                renderer.setAttribute(native, attrName, attrVal);
-            }
-            i++;
-        }
-    }
-    // another piece of code may iterate over the same attributes array. Therefore
-    // it may be helpful to return the exact spot where the attributes array exited
-    // whether by running into an unsupported marker or if all the static values were
-    // iterated over.
-    return i;
-}
-/**
- * Test whether the given value is a marker that indicates that the following
- * attribute values in a `TAttributes` array are only the names of attributes,
- * and not name-value pairs.
- * @param marker The attribute marker to test.
- * @returns true if the marker is a "name-only" marker (e.g. `Bindings`, `Template` or `I18n`).
- */
-function isNameOnlyAttributeMarker(marker) {
-    return marker === 3 /* AttributeMarker.Bindings */ || marker === 4 /* AttributeMarker.Template */ ||
-        marker === 6 /* AttributeMarker.I18n */;
-}
-function isAnimationProp(name) {
-    // Perf note: accessing charCodeAt to check for the first character of a string is faster as
-    // compared to accessing a character at index 0 (ex. name[0]). The main reason for this is that
-    // charCodeAt doesn't allocate memory to return a substring.
-    return name.charCodeAt(0) === 64 /* CharCode.AT_SIGN */;
-}
-/**
- * Merges `src` `TAttributes` into `dst` `TAttributes` removing any duplicates in the process.
- *
- * This merge function keeps the order of attrs same.
- *
- * @param dst Location of where the merged `TAttributes` should end up.
- * @param src `TAttributes` which should be appended to `dst`
- */
-function mergeHostAttrs(dst, src) {
-    if (src === null || src.length === 0) {
-        // do nothing
-    }
-    else if (dst === null || dst.length === 0) {
-        // We have source, but dst is empty, just make a copy.
-        dst = src.slice();
-    }
-    else {
-        let srcMarker = -1 /* AttributeMarker.ImplicitAttributes */;
-        for (let i = 0; i < src.length; i++) {
-            const item = src[i];
-            if (typeof item === 'number') {
-                srcMarker = item;
-            }
-            else {
-                if (srcMarker === 0 /* AttributeMarker.NamespaceURI */) {
-                    // Case where we need to consume `key1`, `key2`, `value` items.
-                }
-                else if (srcMarker === -1 /* AttributeMarker.ImplicitAttributes */ ||
-                    srcMarker === 2 /* AttributeMarker.Styles */) {
-                    // Case where we have to consume `key1` and `value` only.
-                    mergeHostAttribute(dst, srcMarker, item, null, src[++i]);
-                }
-                else {
-                    // Case where we have to consume `key1` only.
-                    mergeHostAttribute(dst, srcMarker, item, null, null);
-                }
-            }
-        }
-    }
-    return dst;
-}
-/**
- * Append `key`/`value` to existing `TAttributes` taking region marker and duplicates into account.
- *
- * @param dst `TAttributes` to append to.
- * @param marker Region where the `key`/`value` should be added.
- * @param key1 Key to add to `TAttributes`
- * @param key2 Key to add to `TAttributes` (in case of `AttributeMarker.NamespaceURI`)
- * @param value Value to add or to overwrite to `TAttributes` Only used if `marker` is not Class.
- */
-function mergeHostAttribute(dst, marker, key1, key2, value) {
-    let i = 0;
-    // Assume that new markers will be inserted at the end.
-    let markerInsertPosition = dst.length;
-    // scan until correct type.
-    if (marker === -1 /* AttributeMarker.ImplicitAttributes */) {
-        markerInsertPosition = -1;
-    }
-    else {
-        while (i < dst.length) {
-            const dstValue = dst[i++];
-            if (typeof dstValue === 'number') {
-                if (dstValue === marker) {
-                    markerInsertPosition = -1;
-                    break;
-                }
-                else if (dstValue > marker) {
-                    // We need to save this as we want the markers to be inserted in specific order.
-                    markerInsertPosition = i - 1;
-                    break;
-                }
-            }
-        }
-    }
-    // search until you find place of insertion
-    while (i < dst.length) {
-        const item = dst[i];
-        if (typeof item === 'number') {
-            // since `i` started as the index after the marker, we did not find it if we are at the next
-            // marker
-            break;
-        }
-        else if (item === key1) {
-            // We already have same token
-            if (key2 === null) {
-                if (value !== null) {
-                    dst[i + 1] = value;
-                }
-                return;
-            }
-            else if (key2 === dst[i + 1]) {
-                dst[i + 2] = value;
-                return;
-            }
-        }
-        // Increment counter.
-        i++;
-        if (key2 !== null)
-            i++;
-        if (value !== null)
-            i++;
-    }
-    // insert at location.
-    if (markerInsertPosition !== -1) {
-        dst.splice(markerInsertPosition, 0, marker);
-        i = markerInsertPosition + 1;
-    }
-    dst.splice(i++, 0, key1);
-    if (key2 !== null) {
-        dst.splice(i++, 0, key2);
-    }
-    if (value !== null) {
-        dst.splice(i++, 0, value);
-    }
-}
-
 /// Parent Injector Utils ///////////////////////////////////////////////////////////////
 function hasParentInjector(parentLocation) {
     return parentLocation !== NO_PARENT_INJECTOR;
@@ -8301,6 +8833,7 @@ class R3Injector extends EnvironmentInjector {
     }
     onDestroy(callback) {
         this._onDestroyHooks.push(callback);
+        return () => this.removeOnDestroy(callback);
     }
     runInContext(fn) {
         this.assertNotDestroyed();
@@ -8475,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.
@@ -8597,35 +9136,41 @@ function forEachSingleProvider(providers, fn) {
 }
 
 /**
- * A [DI token](guide/glossary#di-token "DI token definition") representing a unique string ID, used
+ * A [DI token](guide/glossary#di-token "DI token definition") representing a string ID, used
  * primarily for prefixing application attributes and CSS styles when
  * {@link ViewEncapsulation#Emulated ViewEncapsulation.Emulated} is being used.
  *
- * BY default, the value is randomly generated and assigned to the application by Angular.
- * To provide a custom ID value, use a DI provider <!-- TODO: provider --> to configure
- * the root {@link Injector} that uses this token.
+ * The token is needed in cases when multiple applications are bootstrapped on a page
+ * (for example, using `bootstrapApplication` calls). In this case, ensure that those applications
+ * have different `APP_ID` value setup. For example:
+ *
+ * ```
+ * bootstrapApplication(ComponentA, {
+ *   providers: [
+ *     { provide: APP_ID, useValue: 'app-a' },
+ *     // ... other providers ...
+ *   ]
+ * });
+ *
+ * bootstrapApplication(ComponentB, {
+ *   providers: [
+ *     { provide: APP_ID, useValue: 'app-b' },
+ *     // ... other providers ...
+ *   ]
+ * });
+ * ```
+ *
+ * By default, when there is only one application bootstrapped, you don't need to provide the
+ * `APP_ID` token (the `ng` will be used as an app ID).
  *
  * @publicApi
  */
 const APP_ID = new InjectionToken('AppId', {
     providedIn: 'root',
-    factory: _appIdRandomProviderFactory,
+    factory: () => DEFAULT_APP_ID,
 });
-function _appIdRandomProviderFactory() {
-    return `${_randomChar()}${_randomChar()}${_randomChar()}`;
-}
-/**
- * Providers that generate a random `APP_ID_TOKEN`.
- * @publicApi
- */
-const APP_ID_RANDOM_PROVIDER = {
-    provide: APP_ID,
-    useFactory: _appIdRandomProviderFactory,
-    deps: [],
-};
-function _randomChar() {
-    return String.fromCharCode(97 + Math.floor(Math.random() * 25));
-}
+/** Default value of the `APP_ID` token. */
+const DEFAULT_APP_ID = 'ng';
 /**
  * A function that is executed when a platform is initialized.
  * @publicApi
@@ -8654,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 = {
@@ -8772,966 +9348,642 @@ 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'.
-    const script = doc.getElementById(appId + '-state');
-    let initialState = {};
-    if (script && script.textContent) {
-        try {
-            // Avoid using any here as it triggers lint errors in google3 (any is not allowed).
-            initialState = JSON.parse(unescapeTransferStateContent(script.textContent));
-        }
-        catch (e) {
-            console.warn('Exception while restoring TransferState for app ' + appId, e);
-        }
-    }
-    return initialState;
-}
-
-/* Represents a key in NghDom that holds information about <ng-container>s. */
-const ELEMENT_CONTAINERS = 'e';
-
-/**
- * The name of the key used in the TransferState collection,
- * where hydration information is located.
- */
-const TRANSFER_STATE_TOKEN_ID = '__ɵnghData__';
-/**
- * Lookup key used to reference DOM hydration data (ngh) in `TransferState`.
- */
-const NGH_DATA_KEY = makeStateKey(TRANSFER_STATE_TOKEN_ID);
-/**
- * The name of the attribute that would be added to host component
- * nodes and contain a reference to a particular slot in transferred
- * state that contains the necessary hydration info for this component.
- */
-const NGH_ATTR_NAME = 'ngh';
-/**
- * Reference to a function that reads `ngh` attribute value from a given RNode
- * and retrieves hydration information from the TransferState using that value
- * as an index. Returns `null` by default, when hydration is not enabled.
- *
- * @param rNode Component's host element.
- * @param injector Injector that this component has access to.
- */
-let _retrieveHydrationInfoImpl = (rNode, injector) => null;
-function retrieveHydrationInfoImpl(rNode, injector) {
-    const nghAttrValue = rNode.getAttribute(NGH_ATTR_NAME);
-    if (nghAttrValue == null)
-        return null;
-    let data = {};
-    // An element might have an empty `ngh` attribute value (e.g. `<comp ngh="" />`),
-    // which means that no special annotations are required. Do not attempt to read
-    // from the TransferState in this case.
-    if (nghAttrValue !== '') {
-        const transferState = injector.get(TransferState, null, { optional: true });
-        if (transferState !== null) {
-            const nghData = transferState.get(NGH_DATA_KEY, []);
-            // The nghAttrValue is always a number referencing an index
-            // in the hydration TransferState data.
-            data = nghData[Number(nghAttrValue)];
-            // If the `ngh` attribute exists and has a non-empty value,
-            // the hydration info *must* be present in the TransferState.
-            // If there is no data for some reasons, this is an error.
-            ngDevMode && assertDefined(data, 'Unable to retrieve hydration info from the TransferState.');
-        }
-    }
-    const dehydratedView = {
-        data,
-        firstChild: rNode.firstChild ?? null,
-    };
-    // The `ngh` attribute is cleared from the DOM node now
-    // that the data has been retrieved.
-    rNode.removeAttribute(NGH_ATTR_NAME);
-    // Note: don't check whether this node was claimed for hydration,
-    // because this node might've been previously claimed while processing
-    // template instructions.
-    ngDevMode && markRNodeAsClaimedByHydration(rNode, /* checkIfAlreadyClaimed */ false);
-    ngDevMode && ngDevMode.hydratedComponents++;
-    return dehydratedView;
-}
-/**
- * Sets the implementation for the `retrieveNghInfo` function.
- */
-function enableRetrieveHydrationInfoImpl() {
-    _retrieveHydrationInfoImpl = retrieveHydrationInfoImpl;
-}
-/**
- * Retrieves hydration info by reading the value from the `ngh` attribute
- * and accessing a corresponding slot in TransferState storage.
- */
-function retrieveHydrationInfo(rNode, injector) {
-    return _retrieveHydrationInfoImpl(rNode, injector);
-}
-/**
- * Retrieves an instance of a component LView from a given ViewRef.
- * Returns an instance of a component LView or `null` in case of an embedded view.
- */
-function getComponentLViewForHydration(viewRef) {
-    // Reading an internal field from `ViewRef` instance.
-    let lView = viewRef._lView;
-    const tView = lView[TVIEW];
-    // A registered ViewRef might represent an instance of an
-    // embedded view, in which case we do not need to annotate it.
-    if (tView.type === 2 /* TViewType.Embedded */) {
-        return null;
-    }
-    // Check if it's a root view and if so, retrieve component's
-    // LView from the first slot after the header.
-    if (isRootView(lView)) {
-        lView = lView[HEADER_OFFSET];
-    }
-    return lView;
-}
-/**
- * Marks a node as "claimed" by hydration process.
- * This is needed to make assessments in tests whether
- * the hydration process handled all nodes.
- */
-function markRNodeAsClaimedByHydration(node, checkIfAlreadyClaimed = true) {
-    if (!ngDevMode) {
-        throw new Error('Calling `markRNodeAsClaimedByHydration` in prod mode ' +
-            'is not supported and likely a mistake.');
-    }
-    if (checkIfAlreadyClaimed && isRNodeClaimedForHydration(node)) {
-        throw new Error('Trying to claim a node, which was claimed already.');
-    }
-    node.__claimed = true;
-    ngDevMode.hydratedNodes++;
-}
-function isRNodeClaimedForHydration(node) {
-    return !!node.__claimed;
-}
-function storeNgContainerInfo(hydrationInfo, index, firstChild) {
-    hydrationInfo.ngContainers ?? (hydrationInfo.ngContainers = {});
-    hydrationInfo.ngContainers[index] = { firstChild };
-}
-function getNgContainerSize(hydrationInfo, index) {
-    return hydrationInfo.data[ELEMENT_CONTAINERS]?.[index] ?? null;
-}
-
-/**
- * Represents a component created by a `ComponentFactory`.
- * Provides access to the component instance and related objects,
- * and provides the means of destroying the instance.
- *
- * @publicApi
- */
-class ComponentRef$1 {
-}
-/**
- * Base class for a factory that can create a component dynamically.
- * Instantiate a factory for a given type of component with `resolveComponentFactory()`.
- * Use the resulting `ComponentFactory.create()` method to create a component of that type.
- *
- * @see [Dynamic Components](guide/dynamic-component-loader)
- *
- * @publicApi
- *
- * @deprecated Angular no longer requires Component factories. Please use other APIs where
- *     Component class can be used directly.
- */
-class ComponentFactory$1 {
-}
-
-function noComponentFactoryError(component) {
-    const error = Error(`No component factory found for ${stringify(component)}. Did you add it to @NgModule.entryComponents?`);
-    error[ERROR_COMPONENT] = component;
-    return error;
-}
-const ERROR_COMPONENT = 'ngComponent';
-function getComponent$1(error) {
-    return error[ERROR_COMPONENT];
-}
-class _NullComponentFactoryResolver {
-    resolveComponentFactory(component) {
-        throw noComponentFactoryError(component);
-    }
-}
-/**
- * A simple registry that maps `Components` to generated `ComponentFactory` classes
- * that can be used to create instances of components.
- * Use to obtain the factory for a given component type,
- * then use the factory's `create()` method to create a component of that type.
- *
- * Note: since v13, dynamic component creation via
- * [`ViewContainerRef.createComponent`](api/core/ViewContainerRef#createComponent)
- * does **not** require resolving component factory: component class can be used directly.
- *
- * @publicApi
- *
- * @deprecated Angular no longer requires Component factories. Please use other APIs where
- *     Component class can be used directly.
- */
-class ComponentFactoryResolver$1 {
-}
-ComponentFactoryResolver$1.NULL = ( /* @__PURE__ */new _NullComponentFactoryResolver());
-
-/**
- * Creates an ElementRef from the most recent node.
- *
- * @returns The ElementRef instance to use
- */
-function injectElementRef() {
-    return createElementRef(getCurrentTNode(), getLView());
-}
-/**
- * Creates an ElementRef given a node.
- *
- * @param tNode The node for which you'd like an ElementRef
- * @param lView The view to which the node belongs
- * @returns The ElementRef instance to use
- */
-function createElementRef(tNode, lView) {
-    return new ElementRef(getNativeByTNode(tNode, lView));
-}
-/**
- * A wrapper around a native element inside of a View.
- *
- * An `ElementRef` is backed by a render-specific element. In the browser, this is usually a DOM
- * element.
- *
- * @security Permitting direct access to the DOM can make your application more vulnerable to
- * XSS attacks. Carefully review any use of `ElementRef` in your code. For more detail, see the
- * [Security Guide](https://g.co/ng/security).
- *
- * @publicApi
- */
-// Note: We don't expose things like `Injector`, `ViewContainer`, ... here,
-// i.e. users have to ask for what they need. With that, we can build better analysis tools
-// and could do better codegen in the future.
-class ElementRef {
-    constructor(nativeElement) {
-        this.nativeElement = nativeElement;
+/** @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'.
+    const script = doc.getElementById(appId + '-state');
+    let initialState = {};
+    if (script && script.textContent) {
+        try {
+            // Avoid using any here as it triggers lint errors in google3 (any is not allowed).
+            initialState = JSON.parse(unescapeTransferStateContent(script.textContent));
+        }
+        catch (e) {
+            console.warn('Exception while restoring TransferState for app ' + appId, e);
+        }
     }
+    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';
 /**
- * @internal
- * @nocollapse
+ * Describes navigation steps that the runtime logic need to perform,
+ * starting from a given (known) element.
  */
-ElementRef.__NG_ELEMENT_ID__ = injectElementRef;
+var NodeNavigationStep;
+(function (NodeNavigationStep) {
+    NodeNavigationStep["FirstChild"] = "f";
+    NodeNavigationStep["NextSibling"] = "n";
+})(NodeNavigationStep || (NodeNavigationStep = {}));
 /**
- * Unwraps `ElementRef` and return the `nativeElement`.
- *
- * @param value value to unwrap
- * @returns `nativeElement` if `ElementRef` otherwise returns value as is.
+ * Keys within serialized view data structure to represent various
+ * parts. See the `SerializedView` interface below for additional information.
  */
-function unwrapElementRef(value) {
-    return value instanceof ElementRef ? value.nativeElement : value;
-}
+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';
 
 /**
- * Creates and initializes a custom renderer that implements the `Renderer2` base class.
- *
- * @publicApi
+ * The name of the key used in the TransferState collection,
+ * where hydration information is located.
  */
-class RendererFactory2 {
-}
+const TRANSFER_STATE_TOKEN_ID = '__ɵnghData__';
 /**
- * Extend this base class to implement custom rendering. By default, Angular
- * renders a template into DOM. You can use custom rendering to intercept
- * rendering calls, or to render to something other than DOM.
- *
- * Create your custom renderer using `RendererFactory2`.
- *
- * Use a custom renderer to bypass Angular's templating and
- * make custom UI changes that can't be expressed declaratively.
- * For example if you need to set a property or an attribute whose name is
- * not statically known, use the `setProperty()` or
- * `setAttribute()` method.
- *
- * @publicApi
+ * Lookup key used to reference DOM hydration data (ngh) in `TransferState`.
  */
-class Renderer2 {
-}
+const NGH_DATA_KEY = makeStateKey(TRANSFER_STATE_TOKEN_ID);
 /**
- * @internal
- * @nocollapse
+ * The name of the attribute that would be added to host component
+ * nodes and contain a reference to a particular slot in transferred
+ * state that contains the necessary hydration info for this component.
  */
-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
-    // DI happens before we've entered its view, `getLView` will return the parent view instead.
-    const lView = getLView();
-    const tNode = getCurrentTNode();
-    const nodeAtIndex = getComponentLViewByIndex(tNode.index, lView);
-    return (isLView(nodeAtIndex) ? nodeAtIndex : lView)[RENDERER];
-}
-
+const NGH_ATTR_NAME = 'ngh';
 /**
- * Sanitizer is used by the views to sanitize potentially dangerous values.
+ * Reference to a function that reads `ngh` attribute value from a given RNode
+ * and retrieves hydration information from the TransferState using that value
+ * as an index. Returns `null` by default, when hydration is not enabled.
  *
- * @publicApi
+ * @param rNode Component's host element.
+ * @param injector Injector that this component has access to.
  */
-class Sanitizer {
+let _retrieveHydrationInfoImpl = (rNode, injector) => null;
+function retrieveHydrationInfoImpl(rNode, injector) {
+    const nghAttrValue = rNode.getAttribute(NGH_ATTR_NAME);
+    if (nghAttrValue == null)
+        return null;
+    let data = {};
+    // An element might have an empty `ngh` attribute value (e.g. `<comp ngh="" />`),
+    // which means that no special annotations are required. Do not attempt to read
+    // from the TransferState in this case.
+    if (nghAttrValue !== '') {
+        const transferState = injector.get(TransferState, null, { optional: true });
+        if (transferState !== null) {
+            const nghData = transferState.get(NGH_DATA_KEY, []);
+            // The nghAttrValue is always a number referencing an index
+            // in the hydration TransferState data.
+            data = nghData[Number(nghAttrValue)];
+            // If the `ngh` attribute exists and has a non-empty value,
+            // the hydration info *must* be present in the TransferState.
+            // If there is no data for some reasons, this is an error.
+            ngDevMode && assertDefined(data, 'Unable to retrieve hydration info from the TransferState.');
+        }
+    }
+    const dehydratedView = {
+        data,
+        firstChild: rNode.firstChild ?? null,
+    };
+    // The `ngh` attribute is cleared from the DOM node now
+    // that the data has been retrieved.
+    rNode.removeAttribute(NGH_ATTR_NAME);
+    // Note: don't check whether this node was claimed for hydration,
+    // because this node might've been previously claimed while processing
+    // template instructions.
+    ngDevMode && markRNodeAsClaimedByHydration(rNode, /* checkIfAlreadyClaimed */ false);
+    ngDevMode && ngDevMode.hydratedComponents++;
+    return dehydratedView;
 }
-/** @nocollapse */
-Sanitizer.ɵprov = ɵɵdefineInjectable({
-    token: Sanitizer,
-    providedIn: 'root',
-    factory: () => null,
-});
-
 /**
- * @description Represents the version of Angular
- *
- * @publicApi
+ * Sets the implementation for the `retrieveHydrationInfo` function.
  */
-class Version {
-    constructor(full) {
-        this.full = full;
-        this.major = full.split('.')[0];
-        this.minor = full.split('.')[1];
-        this.patch = full.split('.').slice(2).join('.');
-    }
+function enableRetrieveHydrationInfoImpl() {
+    _retrieveHydrationInfoImpl = retrieveHydrationInfoImpl;
 }
 /**
- * @publicApi
+ * Retrieves hydration info by reading the value from the `ngh` attribute
+ * and accessing a corresponding slot in TransferState storage.
  */
-const VERSION = new Version('16.0.0-next.2');
-
-// This default value is when checking the hierarchy for a token.
-//
-// It means both:
-// - the token is not provided by the current injector,
-// - only the element injectors should be checked (ie do not check module injectors
-//
-//          mod1
-//         /
-//       el1   mod2
-//         \  /
-//         el2
-//
-// When requesting el2.injector.get(token), we should check in the following order and return the
-// first found value:
-// - el2.injector.get(token, default)
-// - el1.injector.get(token, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR) -> do not check the module
-// - mod2.injector.get(token, default)
-const NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR = {};
-
-const ERROR_ORIGINAL_ERROR = 'ngOriginalError';
-function wrappedError(message, originalError) {
-    const msg = `${message} caused by: ${originalError instanceof Error ? originalError.message : originalError}`;
-    const error = Error(msg);
-    error[ERROR_ORIGINAL_ERROR] = originalError;
-    return error;
+function retrieveHydrationInfo(rNode, injector) {
+    return _retrieveHydrationInfoImpl(rNode, injector);
 }
-function getOriginalError(error) {
-    return error[ERROR_ORIGINAL_ERROR];
+/**
+ * Retrieves an instance of a component LView from a given ViewRef.
+ * Returns an instance of a component LView or `null` in case of an embedded view.
+ */
+function getComponentLViewForHydration(viewRef) {
+    // Reading an internal field from `ViewRef` instance.
+    let lView = viewRef._lView;
+    const tView = lView[TVIEW];
+    // A registered ViewRef might represent an instance of an
+    // embedded view, in which case we do not need to annotate it.
+    if (tView.type === 2 /* TViewType.Embedded */) {
+        return null;
+    }
+    // Check if it's a root view and if so, retrieve component's
+    // LView from the first slot after the header.
+    if (isRootView(lView)) {
+        lView = lView[HEADER_OFFSET];
+    }
+    return lView;
+}
+function getTextNodeContent(node) {
+    return node.textContent?.replace(/\s/gm, '');
 }
-
 /**
- * Provides a hook for centralized exception handling.
+ * Restores text nodes and separators into the DOM that were lost during SSR
+ * serialization. The hydration process replaces empty text nodes and text
+ * nodes that are immediately adjacent to other text nodes with comment nodes
+ * that this method filters on to restore those missing nodes that the
+ * hydration process is expecting to be present.
  *
- * The default implementation of `ErrorHandler` prints error messages to the `console`. To
- * intercept error handling, write a custom exception handler that replaces this default as
- * appropriate for your app.
- *
- * @usageNotes
- * ### Example
- *
- * ```
- * class MyErrorHandler implements ErrorHandler {
- *   handleError(error) {
- *     // do something with the exception
- *   }
- * }
- *
- * @NgModule({
- *   providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
- * })
- * class MyModule {}
- * ```
- *
- * @publicApi
+ * @param node The app's root HTML Element
  */
-class ErrorHandler {
-    constructor() {
-        /**
-         * @internal
-         */
-        this._console = console;
-    }
-    handleError(error) {
-        const originalError = this._findOriginalError(error);
-        this._console.error('ERROR', error);
-        if (originalError) {
-            this._console.error('ORIGINAL ERROR', originalError);
+function processTextNodeMarkersBeforeHydration(node) {
+    const doc = getDocument();
+    const commentNodesIterator = doc.createNodeIterator(node, NodeFilter.SHOW_COMMENT, {
+        acceptNode(node) {
+            const content = getTextNodeContent(node);
+            const isTextNodeMarker = content === "ngetn" /* TextNodeMarker.EmptyNode */ || content === "ngtns" /* TextNodeMarker.Separator */;
+            return isTextNodeMarker ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
         }
-    }
-    /** @internal */
-    _findOriginalError(error) {
-        let e = error && getOriginalError(error);
-        while (e && getOriginalError(e)) {
-            e = getOriginalError(e);
+    });
+    let currentNode;
+    // We cannot modify the DOM while using the commentIterator,
+    // because it throws off the iterator state.
+    // So we collect all marker nodes first and then follow up with
+    // applying the changes to the DOM: either inserting an empty node
+    // or just removing the marker if it was used as a separator.
+    const nodes = [];
+    while (currentNode = commentNodesIterator.nextNode()) {
+        nodes.push(currentNode);
+    }
+    for (const node of nodes) {
+        if (node.textContent === "ngetn" /* TextNodeMarker.EmptyNode */) {
+            node.replaceWith(doc.createTextNode(''));
+        }
+        else {
+            node.remove();
         }
-        return e || null;
     }
 }
-
-const NG_DEV_MODE = typeof ngDevMode === 'undefined' || !!ngDevMode;
 /**
- * Internal token that specifies whether hydration is enabled.
+ * Marks a node as "claimed" by hydration process.
+ * This is needed to make assessments in tests whether
+ * the hydration process handled all nodes.
  */
-const IS_HYDRATION_FEATURE_ENABLED = new InjectionToken(NG_DEV_MODE ? '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;
+function markRNodeAsClaimedByHydration(node, checkIfAlreadyClaimed = true) {
+    if (!ngDevMode) {
+        throw new Error('Calling `markRNodeAsClaimedByHydration` in prod mode ' +
+            'is not supported and likely a mistake.');
+    }
+    if (checkIfAlreadyClaimed && isRNodeClaimedForHydration(node)) {
+        throw new Error('Trying to claim a node, which was claimed already.');
+    }
+    node.__claimed = true;
+    ngDevMode.hydratedNodes++;
+}
+function isRNodeClaimedForHydration(node) {
+    return !!node.__claimed;
+}
+function setSegmentHead(hydrationInfo, index, node) {
+    hydrationInfo.segmentHeads ?? (hydrationInfo.segmentHeads = {});
+    hydrationInfo.segmentHeads[index] = node;
+}
+function getSegmentHead(hydrationInfo, index) {
+    return hydrationInfo.segmentHeads?.[index] ?? null;
+}
 /**
- * Internal token that indicates whether host element content should be
- * retained during the bootstrap.
+ * Returns the size of an <ng-container>, using either the information
+ * serialized in `ELEMENT_CONTAINERS` (element container size) or by
+ * computing the sum of root nodes in all dehydrated views in a given
+ * container (in case this `<ng-container>` was also used as a view
+ * container host node, e.g. <ng-container *ngIf>).
  */
-const PRESERVE_HOST_CONTENT = new InjectionToken(NG_DEV_MODE ? 'PRESERVE_HOST_CONTENT' : '', {
-    providedIn: 'root',
-    factory: () => PRESERVE_HOST_CONTENT_DEFAULT,
-});
-
-function normalizeDebugBindingName(name) {
-    // Attribute names with `$` (eg `x-y$`) are valid per spec, but unsupported by some browsers
-    name = camelCaseToDashCase(name.replace(/[$@]/g, '_'));
-    return `ng-reflect-${name}`;
+function getNgContainerSize(hydrationInfo, index) {
+    const data = hydrationInfo.data;
+    let size = data[ELEMENT_CONTAINERS]?.[index] ?? null;
+    // If there is no serialized information available in the `ELEMENT_CONTAINERS` slot,
+    // check if we have info about view containers at this location (e.g.
+    // `<ng-container *ngIf>`) and use container size as a number of root nodes in this
+    // element container.
+    if (size === null && data[CONTAINERS]?.[index]) {
+        size = calcSerializedContainerSize(hydrationInfo, index);
+    }
+    return size;
 }
-const CAMEL_CASE_REGEXP = /([A-Z])/g;
-function camelCaseToDashCase(input) {
-    return input.replace(CAMEL_CASE_REGEXP, (...m) => '-' + m[1].toLowerCase());
+function getSerializedContainerViews(hydrationInfo, index) {
+    return hydrationInfo.data[CONTAINERS]?.[index] ?? null;
 }
-function normalizeDebugBindingValue(value) {
-    try {
-        // Limit the size of the value as otherwise the DOM just gets polluted.
-        return value != null ? value.toString().slice(0, 30) : value;
+/**
+ * Computes the size of a serialized container (the number of root nodes)
+ * by calculating the sum of root nodes in all dehydrated views in this container.
+ */
+function calcSerializedContainerSize(hydrationInfo, index) {
+    const views = getSerializedContainerViews(hydrationInfo, index) ?? [];
+    let numNodes = 0;
+    for (let view of views) {
+        numNodes += view[NUM_ROOT_NODES] * (view[MULTIPLIER] ?? 1);
     }
-    catch (e) {
-        return '[ERROR] Exception while trying to serialize the value';
+    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);
 }
 
-/** Verifies that a given type is a Standalone Component. */
-function assertStandaloneComponentType(type) {
-    assertComponentDef(type);
-    const componentDef = getComponentDef$1(type);
-    if (!componentDef.standalone) {
-        throw new RuntimeError(907 /* RuntimeErrorCode.TYPE_IS_NOT_STANDALONE */, `The ${stringifyForError(type)} component is not marked as standalone, ` +
-            `but Angular expects to have a standalone component here. ` +
-            `Please make sure the ${stringifyForError(type)} component has ` +
-            `the \`standalone: true\` flag in the decorator.`);
-    }
+/**
+ * Represents a component created by a `ComponentFactory`.
+ * Provides access to the component instance and related objects,
+ * and provides the means of destroying the instance.
+ *
+ * @publicApi
+ */
+class ComponentRef$1 {
 }
-/** Verifies whether a given type is a component */
-function assertComponentDef(type) {
-    if (!getComponentDef$1(type)) {
-        throw new RuntimeError(906 /* RuntimeErrorCode.MISSING_GENERATED_DEF */, `The ${stringifyForError(type)} is not an Angular component, ` +
-            `make sure it has the \`@Component\` decorator.`);
-    }
+/**
+ * Base class for a factory that can create a component dynamically.
+ * Instantiate a factory for a given type of component with `resolveComponentFactory()`.
+ * Use the resulting `ComponentFactory.create()` method to create a component of that type.
+ *
+ * @see [Dynamic Components](guide/dynamic-component-loader)
+ *
+ * @publicApi
+ *
+ * @deprecated Angular no longer requires Component factories. Please use other APIs where
+ *     Component class can be used directly.
+ */
+class ComponentFactory$1 {
 }
-/** Called when there are multiple component selectors that match a given node */
-function throwMultipleComponentError(tNode, first, second) {
-    throw new RuntimeError(-300 /* RuntimeErrorCode.MULTIPLE_COMPONENTS_MATCH */, `Multiple components match node with tagname ${tNode.value}: ` +
-        `${stringifyForError(first)} and ` +
-        `${stringifyForError(second)}`);
+
+function noComponentFactoryError(component) {
+    const error = Error(`No component factory found for ${stringify(component)}. Did you add it to @NgModule.entryComponents?`);
+    error[ERROR_COMPONENT] = component;
+    return error;
 }
-/** Throws an ExpressionChangedAfterChecked error if checkNoChanges mode is on. */
-function throwErrorIfNoChangesMode(creationMode, oldValue, currValue, propName) {
-    const field = propName ? ` for '${propName}'` : '';
-    let msg = `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value${field}: '${oldValue}'. Current value: '${currValue}'.`;
-    if (creationMode) {
-        msg +=
-            ` It seems like the view has been created after its parent and its children have been dirty checked.` +
-                ` Has it been created in a change detection hook?`;
-    }
-    throw new RuntimeError(-100 /* RuntimeErrorCode.EXPRESSION_CHANGED_AFTER_CHECKED */, msg);
+const ERROR_COMPONENT = 'ngComponent';
+function getComponent$1(error) {
+    return error[ERROR_COMPONENT];
 }
-function constructDetailsForInterpolation(lView, rootIndex, expressionIndex, meta, changedValue) {
-    const [propName, prefix, ...chunks] = meta.split(INTERPOLATION_DELIMITER);
-    let oldValue = prefix, newValue = prefix;
-    for (let i = 0; i < chunks.length; i++) {
-        const slotIdx = rootIndex + i;
-        oldValue += `${lView[slotIdx]}${chunks[i]}`;
-        newValue += `${slotIdx === expressionIndex ? changedValue : lView[slotIdx]}${chunks[i]}`;
+class _NullComponentFactoryResolver {
+    resolveComponentFactory(component) {
+        throw noComponentFactoryError(component);
     }
-    return { propName, oldValue, newValue };
 }
 /**
- * Constructs an object that contains details for the ExpressionChangedAfterItHasBeenCheckedError:
- * - property name (for property bindings or interpolations)
- * - old and new values, enriched using information from metadata
+ * A simple registry that maps `Components` to generated `ComponentFactory` classes
+ * that can be used to create instances of components.
+ * Use to obtain the factory for a given component type,
+ * then use the factory's `create()` method to create a component of that type.
  *
- * More information on the metadata storage format can be found in `storePropertyBindingMetadata`
- * function description.
+ * Note: since v13, dynamic component creation via
+ * [`ViewContainerRef.createComponent`](api/core/ViewContainerRef#createComponent)
+ * does **not** require resolving component factory: component class can be used directly.
+ *
+ * @publicApi
+ *
+ * @deprecated Angular no longer requires Component factories. Please use other APIs where
+ *     Component class can be used directly.
  */
-function getExpressionChangedErrorDetails(lView, bindingIndex, oldValue, newValue) {
-    const tData = lView[TVIEW].data;
-    const metadata = tData[bindingIndex];
-    if (typeof metadata === 'string') {
-        // metadata for property interpolation
-        if (metadata.indexOf(INTERPOLATION_DELIMITER) > -1) {
-            return constructDetailsForInterpolation(lView, bindingIndex, bindingIndex, metadata, newValue);
-        }
-        // metadata for property binding
-        return { propName: metadata, oldValue, newValue };
-    }
-    // metadata is not available for this expression, check if this expression is a part of the
-    // property interpolation by going from the current binding index left and look for a string that
-    // contains INTERPOLATION_DELIMITER, the layout in tView.data for this case will look like this:
-    // [..., 'id�Prefix � and � suffix', null, null, null, ...]
-    if (metadata === null) {
-        let idx = bindingIndex - 1;
-        while (typeof tData[idx] !== 'string' && tData[idx + 1] === null) {
-            idx--;
-        }
-        const meta = tData[idx];
-        if (typeof meta === 'string') {
-            const matches = meta.match(new RegExp(INTERPOLATION_DELIMITER, 'g'));
-            // first interpolation delimiter separates property name from interpolation parts (in case of
-            // property interpolations), so we subtract one from total number of found delimiters
-            if (matches && (matches.length - 1) > bindingIndex - idx) {
-                return constructDetailsForInterpolation(lView, idx, bindingIndex, meta, newValue);
-            }
-        }
-    }
-    return { propName: undefined, oldValue, newValue };
+class ComponentFactoryResolver$1 {
 }
+ComponentFactoryResolver$1.NULL = ( /* @__PURE__ */new _NullComponentFactoryResolver());
 
 /**
- * Returns an index of `classToSearch` in `className` taking token boundaries into account.
+ * Creates an ElementRef from the most recent node.
  *
- * `classIndexOf('AB A', 'A', 0)` will be 3 (not 0 since `AB!==A`)
+ * @returns The ElementRef instance to use
+ */
+function injectElementRef() {
+    return createElementRef(getCurrentTNode(), getLView());
+}
+/**
+ * Creates an ElementRef given a node.
  *
- * @param className A string containing classes (whitespace separated)
- * @param classToSearch A class name to locate
- * @param startingIndex Starting location of search
- * @returns an index of the located class (or -1 if not found)
+ * @param tNode The node for which you'd like an ElementRef
+ * @param lView The view to which the node belongs
+ * @returns The ElementRef instance to use
  */
-function classIndexOf(className, classToSearch, startingIndex) {
-    ngDevMode && assertNotEqual(classToSearch, '', 'can not look for "" string.');
-    let end = className.length;
-    while (true) {
-        const foundIndex = className.indexOf(classToSearch, startingIndex);
-        if (foundIndex === -1)
-            return foundIndex;
-        if (foundIndex === 0 || className.charCodeAt(foundIndex - 1) <= 32 /* CharCode.SPACE */) {
-            // Ensure that it has leading whitespace
-            const length = classToSearch.length;
-            if (foundIndex + length === end ||
-                className.charCodeAt(foundIndex + length) <= 32 /* CharCode.SPACE */) {
-                // Ensure that it has trailing whitespace
-                return foundIndex;
-            }
-        }
-        // False positive, keep searching from where we left off.
-        startingIndex = foundIndex + 1;
+function createElementRef(tNode, lView) {
+    return new ElementRef(getNativeByTNode(tNode, lView));
+}
+/**
+ * A wrapper around a native element inside of a View.
+ *
+ * An `ElementRef` is backed by a render-specific element. In the browser, this is usually a DOM
+ * element.
+ *
+ * @security Permitting direct access to the DOM can make your application more vulnerable to
+ * XSS attacks. Carefully review any use of `ElementRef` in your code. For more detail, see the
+ * [Security Guide](https://g.co/ng/security).
+ *
+ * @publicApi
+ */
+// Note: We don't expose things like `Injector`, `ViewContainer`, ... here,
+// i.e. users have to ask for what they need. With that, we can build better analysis tools
+// and could do better codegen in the future.
+class ElementRef {
+    constructor(nativeElement) {
+        this.nativeElement = nativeElement;
     }
 }
+/**
+ * @internal
+ * @nocollapse
+ */
+ElementRef.__NG_ELEMENT_ID__ = injectElementRef;
+/**
+ * Unwraps `ElementRef` and return the `nativeElement`.
+ *
+ * @param value value to unwrap
+ * @returns `nativeElement` if `ElementRef` otherwise returns value as is.
+ */
+function unwrapElementRef(value) {
+    return value instanceof ElementRef ? value.nativeElement : value;
+}
 
-const NG_TEMPLATE_SELECTOR = 'ng-template';
 /**
- * Search the `TAttributes` to see if it contains `cssClassToMatch` (case insensitive)
+ * Creates and initializes a custom renderer that implements the `Renderer2` base class.
  *
- * @param attrs `TAttributes` to search through.
- * @param cssClassToMatch class to match (lowercase)
- * @param isProjectionMode Whether or not class matching should look into the attribute `class` in
- *    addition to the `AttributeMarker.Classes`.
+ * @publicApi
  */
-function isCssClassMatching(attrs, cssClassToMatch, isProjectionMode) {
-    // TODO(misko): The fact that this function needs to know about `isProjectionMode` seems suspect.
-    // It is strange to me that sometimes the class information comes in form of `class` attribute
-    // and sometimes in form of `AttributeMarker.Classes`. Some investigation is needed to determine
-    // if that is the right behavior.
-    ngDevMode &&
-        assertEqual(cssClassToMatch, cssClassToMatch.toLowerCase(), 'Class name expected to be lowercase.');
-    let i = 0;
-    while (i < attrs.length) {
-        let item = attrs[i++];
-        if (isProjectionMode && item === 'class') {
-            item = attrs[i];
-            if (classIndexOf(item.toLowerCase(), cssClassToMatch, 0) !== -1) {
-                return true;
-            }
-        }
-        else if (item === 1 /* AttributeMarker.Classes */) {
-            // We found the classes section. Start searching for the class.
-            while (i < attrs.length && typeof (item = attrs[i++]) == 'string') {
-                // while we have strings
-                if (item.toLowerCase() === cssClassToMatch)
-                    return true;
-            }
-            return false;
-        }
-    }
-    return false;
+class RendererFactory2 {
 }
 /**
- * Checks whether the `tNode` represents an inline template (e.g. `*ngFor`).
+ * Extend this base class to implement custom rendering. By default, Angular
+ * renders a template into DOM. You can use custom rendering to intercept
+ * rendering calls, or to render to something other than DOM.
  *
- * @param tNode current TNode
+ * Create your custom renderer using `RendererFactory2`.
+ *
+ * Use a custom renderer to bypass Angular's templating and
+ * make custom UI changes that can't be expressed declaratively.
+ * For example if you need to set a property or an attribute whose name is
+ * not statically known, use the `setProperty()` or
+ * `setAttribute()` method.
+ *
+ * @publicApi
  */
-function isInlineTemplate(tNode) {
-    return tNode.type === 4 /* TNodeType.Container */ && tNode.value !== NG_TEMPLATE_SELECTOR;
+class Renderer2 {
 }
 /**
- * Function that checks whether a given tNode matches tag-based selector and has a valid type.
+ * @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
+    // DI happens before we've entered its view, `getLView` will return the parent view instead.
+    const lView = getLView();
+    const tNode = getCurrentTNode();
+    const nodeAtIndex = getComponentLViewByIndex(tNode.index, lView);
+    return (isLView(nodeAtIndex) ? nodeAtIndex : lView)[RENDERER];
+}
+
+/**
+ * Sanitizer is used by the views to sanitize potentially dangerous values.
  *
- * Matching can be performed in 2 modes: projection mode (when we project nodes) and regular
- * directive matching mode:
- * - in the "directive matching" mode we do _not_ take TContainer's tagName into account if it is
- * different from NG_TEMPLATE_SELECTOR (value different from NG_TEMPLATE_SELECTOR indicates that a
- * tag name was extracted from * syntax so we would match the same directive twice);
- * - in the "projection" mode, we use a tag name potentially extracted from the * syntax processing
- * (applicable to TNodeType.Container only).
+ * @publicApi
  */
-function hasTagAndTypeMatch(tNode, currentSelector, isProjectionMode) {
-    const tagNameToCompare = tNode.type === 4 /* TNodeType.Container */ && !isProjectionMode ? NG_TEMPLATE_SELECTOR : tNode.value;
-    return currentSelector === tagNameToCompare;
+class Sanitizer {
 }
+/** @nocollapse */
+Sanitizer.ɵprov = ɵɵdefineInjectable({
+    token: Sanitizer,
+    providedIn: 'root',
+    factory: () => null,
+});
+
 /**
- * A utility function to match an Ivy node static data against a simple CSS selector
+ * @description Represents the version of Angular
  *
- * @param node static data of the node to match
- * @param selector The selector to try matching against the node.
- * @param isProjectionMode if `true` we are matching for content projection, otherwise we are doing
- * directive matching.
- * @returns true if node matches the selector.
+ * @publicApi
  */
-function isNodeMatchingSelector(tNode, selector, isProjectionMode) {
-    ngDevMode && assertDefined(selector[0], 'Selector should have a tag name');
-    let mode = 4 /* SelectorFlags.ELEMENT */;
-    const nodeAttrs = tNode.attrs || [];
-    // Find the index of first attribute that has no value, only a name.
-    const nameOnlyMarkerIdx = getNameOnlyMarkerIndex(nodeAttrs);
-    // When processing ":not" selectors, we skip to the next ":not" if the
-    // current one doesn't match
-    let skipToNextSelector = false;
-    for (let i = 0; i < selector.length; i++) {
-        const current = selector[i];
-        if (typeof current === 'number') {
-            // If we finish processing a :not selector and it hasn't failed, return false
-            if (!skipToNextSelector && !isPositive(mode) && !isPositive(current)) {
-                return false;
-            }
-            // If we are skipping to the next :not() and this mode flag is positive,
-            // it's a part of the current :not() selector, and we should keep skipping
-            if (skipToNextSelector && isPositive(current))
-                continue;
-            skipToNextSelector = false;
-            mode = current | (mode & 1 /* SelectorFlags.NOT */);
-            continue;
-        }
-        if (skipToNextSelector)
-            continue;
-        if (mode & 4 /* SelectorFlags.ELEMENT */) {
-            mode = 2 /* SelectorFlags.ATTRIBUTE */ | mode & 1 /* SelectorFlags.NOT */;
-            if (current !== '' && !hasTagAndTypeMatch(tNode, current, isProjectionMode) ||
-                current === '' && selector.length === 1) {
-                if (isPositive(mode))
-                    return false;
-                skipToNextSelector = true;
-            }
-        }
-        else {
-            const selectorAttrValue = mode & 8 /* SelectorFlags.CLASS */ ? current : selector[++i];
-            // special case for matching against classes when a tNode has been instantiated with
-            // class and style values as separate attribute values (e.g. ['title', CLASS, 'foo'])
-            if ((mode & 8 /* SelectorFlags.CLASS */) && tNode.attrs !== null) {
-                if (!isCssClassMatching(tNode.attrs, selectorAttrValue, isProjectionMode)) {
-                    if (isPositive(mode))
-                        return false;
-                    skipToNextSelector = true;
-                }
-                continue;
-            }
-            const attrName = (mode & 8 /* SelectorFlags.CLASS */) ? 'class' : current;
-            const attrIndexInNode = findAttrIndexInNode(attrName, nodeAttrs, isInlineTemplate(tNode), isProjectionMode);
-            if (attrIndexInNode === -1) {
-                if (isPositive(mode))
-                    return false;
-                skipToNextSelector = true;
-                continue;
-            }
-            if (selectorAttrValue !== '') {
-                let nodeAttrValue;
-                if (attrIndexInNode > nameOnlyMarkerIdx) {
-                    nodeAttrValue = '';
-                }
-                else {
-                    ngDevMode &&
-                        assertNotEqual(nodeAttrs[attrIndexInNode], 0 /* AttributeMarker.NamespaceURI */, 'We do not match directives on namespaced attributes');
-                    // we lowercase the attribute value to be able to match
-                    // selectors without case-sensitivity
-                    // (selectors are already in lowercase when generated)
-                    nodeAttrValue = nodeAttrs[attrIndexInNode + 1].toLowerCase();
-                }
-                const compareAgainstClassName = mode & 8 /* SelectorFlags.CLASS */ ? nodeAttrValue : null;
-                if (compareAgainstClassName &&
-                    classIndexOf(compareAgainstClassName, selectorAttrValue, 0) !== -1 ||
-                    mode & 2 /* SelectorFlags.ATTRIBUTE */ && selectorAttrValue !== nodeAttrValue) {
-                    if (isPositive(mode))
-                        return false;
-                    skipToNextSelector = true;
-                }
-            }
-        }
+class Version {
+    constructor(full) {
+        this.full = full;
+        this.major = full.split('.')[0];
+        this.minor = full.split('.')[1];
+        this.patch = full.split('.').slice(2).join('.');
     }
-    return isPositive(mode) || skipToNextSelector;
 }
-function isPositive(mode) {
-    return (mode & 1 /* SelectorFlags.NOT */) === 0;
+/**
+ * @publicApi
+ */
+const VERSION = new Version('16.0.0-next.4');
+
+// This default value is when checking the hierarchy for a token.
+//
+// It means both:
+// - the token is not provided by the current injector,
+// - only the element injectors should be checked (ie do not check module injectors
+//
+//          mod1
+//         /
+//       el1   mod2
+//         \  /
+//         el2
+//
+// When requesting el2.injector.get(token), we should check in the following order and return the
+// first found value:
+// - el2.injector.get(token, default)
+// - el1.injector.get(token, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR) -> do not check the module
+// - mod2.injector.get(token, default)
+const NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR = {};
+
+const ERROR_ORIGINAL_ERROR = 'ngOriginalError';
+function wrappedError(message, originalError) {
+    const msg = `${message} caused by: ${originalError instanceof Error ? originalError.message : originalError}`;
+    const error = Error(msg);
+    error[ERROR_ORIGINAL_ERROR] = originalError;
+    return error;
+}
+function getOriginalError(error) {
+    return error[ERROR_ORIGINAL_ERROR];
 }
+
 /**
- * Examines the attribute's definition array for a node to find the index of the
- * attribute that matches the given `name`.
- *
- * NOTE: This will not match namespaced attributes.
+ * Provides a hook for centralized exception handling.
  *
- * Attribute matching depends upon `isInlineTemplate` and `isProjectionMode`.
- * The following table summarizes which types of attributes we attempt to match:
+ * The default implementation of `ErrorHandler` prints error messages to the `console`. To
+ * intercept error handling, write a custom exception handler that replaces this default as
+ * appropriate for your app.
  *
- * ===========================================================================================================
- * Modes                   | Normal Attributes | Bindings Attributes | Template Attributes | I18n
- * Attributes
- * ===========================================================================================================
- * Inline + Projection     | YES               | YES                 | NO                  | YES
- * -----------------------------------------------------------------------------------------------------------
- * Inline + Directive      | NO                | NO                  | YES                 | NO
- * -----------------------------------------------------------------------------------------------------------
- * Non-inline + Projection | YES               | YES                 | NO                  | YES
- * -----------------------------------------------------------------------------------------------------------
- * Non-inline + Directive  | YES               | YES                 | NO                  | YES
- * ===========================================================================================================
+ * @usageNotes
+ * ### Example
  *
- * @param name the name of the attribute to find
- * @param attrs the attribute array to examine
- * @param isInlineTemplate true if the node being matched is an inline template (e.g. `*ngFor`)
- * rather than a manually expanded template node (e.g `<ng-template>`).
- * @param isProjectionMode true if we are matching against content projection otherwise we are
- * matching against directives.
- */
-function findAttrIndexInNode(name, attrs, isInlineTemplate, isProjectionMode) {
-    if (attrs === null)
-        return -1;
-    let i = 0;
-    if (isProjectionMode || !isInlineTemplate) {
-        let bindingsMode = false;
-        while (i < attrs.length) {
-            const maybeAttrName = attrs[i];
-            if (maybeAttrName === name) {
-                return i;
-            }
-            else if (maybeAttrName === 3 /* AttributeMarker.Bindings */ || maybeAttrName === 6 /* AttributeMarker.I18n */) {
-                bindingsMode = true;
-            }
-            else if (maybeAttrName === 1 /* AttributeMarker.Classes */ || maybeAttrName === 2 /* AttributeMarker.Styles */) {
-                let value = attrs[++i];
-                // We should skip classes here because we have a separate mechanism for
-                // matching classes in projection mode.
-                while (typeof value === 'string') {
-                    value = attrs[++i];
-                }
-                continue;
-            }
-            else if (maybeAttrName === 4 /* AttributeMarker.Template */) {
-                // We do not care about Template attributes in this scenario.
-                break;
-            }
-            else if (maybeAttrName === 0 /* AttributeMarker.NamespaceURI */) {
-                // Skip the whole namespaced attribute and value. This is by design.
-                i += 4;
-                continue;
-            }
-            // In binding mode there are only names, rather than name-value pairs.
-            i += bindingsMode ? 1 : 2;
-        }
-        // We did not match the attribute
-        return -1;
-    }
-    else {
-        return matchTemplateAttribute(attrs, name);
+ * ```
+ * class MyErrorHandler implements ErrorHandler {
+ *   handleError(error) {
+ *     // do something with the exception
+ *   }
+ * }
+ *
+ * @NgModule({
+ *   providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
+ * })
+ * class MyModule {}
+ * ```
+ *
+ * @publicApi
+ */
+class ErrorHandler {
+    constructor() {
+        /**
+         * @internal
+         */
+        this._console = console;
     }
-}
-function isNodeMatchingSelectorList(tNode, selector, isProjectionMode = false) {
-    for (let i = 0; i < selector.length; i++) {
-        if (isNodeMatchingSelector(tNode, selector[i], isProjectionMode)) {
-            return true;
+    handleError(error) {
+        const originalError = this._findOriginalError(error);
+        this._console.error('ERROR', error);
+        if (originalError) {
+            this._console.error('ORIGINAL ERROR', originalError);
         }
     }
-    return false;
-}
-function getProjectAsAttrValue(tNode) {
-    const nodeAttrs = tNode.attrs;
-    if (nodeAttrs != null) {
-        const ngProjectAsAttrIdx = nodeAttrs.indexOf(5 /* AttributeMarker.ProjectAs */);
-        // only check for ngProjectAs in attribute names, don't accidentally match attribute's value
-        // (attribute names are stored at even indexes)
-        if ((ngProjectAsAttrIdx & 1) === 0) {
-            return nodeAttrs[ngProjectAsAttrIdx + 1];
+    /** @internal */
+    _findOriginalError(error) {
+        let e = error && getOriginalError(error);
+        while (e && getOriginalError(e)) {
+            e = getOriginalError(e);
         }
+        return e || null;
     }
-    return null;
 }
-function getNameOnlyMarkerIndex(nodeAttrs) {
-    for (let i = 0; i < nodeAttrs.length; i++) {
-        const nodeAttr = nodeAttrs[i];
-        if (isNameOnlyAttributeMarker(nodeAttr)) {
-            return i;
-        }
+
+const NG_DEV_MODE = 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' : '');
+// 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;
+/**
+ * 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' : '', {
+    providedIn: 'root',
+    factory: () => PRESERVE_HOST_CONTENT_DEFAULT,
+});
+
+function normalizeDebugBindingName(name) {
+    // Attribute names with `$` (eg `x-y$`) are valid per spec, but unsupported by some browsers
+    name = camelCaseToDashCase(name.replace(/[$@]/g, '_'));
+    return `ng-reflect-${name}`;
+}
+const CAMEL_CASE_REGEXP = /([A-Z])/g;
+function camelCaseToDashCase(input) {
+    return input.replace(CAMEL_CASE_REGEXP, (...m) => '-' + m[1].toLowerCase());
+}
+function normalizeDebugBindingValue(value) {
+    try {
+        // Limit the size of the value as otherwise the DOM just gets polluted.
+        return value != null ? value.toString().slice(0, 30) : value;
+    }
+    catch (e) {
+        return '[ERROR] Exception while trying to serialize the value';
     }
-    return nodeAttrs.length;
 }
-function matchTemplateAttribute(attrs, name) {
-    let i = attrs.indexOf(4 /* AttributeMarker.Template */);
-    if (i > -1) {
-        i++;
-        while (i < attrs.length) {
-            const attr = attrs[i];
-            // Return in case we checked all template attrs and are switching to the next section in the
-            // attrs array (that starts with a number that represents an attribute marker).
-            if (typeof attr === 'number')
-                return -1;
-            if (attr === name)
-                return i;
-            i++;
-        }
+
+/** Verifies that a given type is a Standalone Component. */
+function assertStandaloneComponentType(type) {
+    assertComponentDef(type);
+    const componentDef = getComponentDef$1(type);
+    if (!componentDef.standalone) {
+        throw new RuntimeError(907 /* RuntimeErrorCode.TYPE_IS_NOT_STANDALONE */, `The ${stringifyForError(type)} component is not marked as standalone, ` +
+            `but Angular expects to have a standalone component here. ` +
+            `Please make sure the ${stringifyForError(type)} component has ` +
+            `the \`standalone: true\` flag in the decorator.`);
     }
-    return -1;
 }
-/**
- * Checks whether a selector is inside a CssSelectorList
- * @param selector Selector to be checked.
- * @param list List in which to look for the selector.
- */
-function isSelectorInSelectorList(selector, list) {
-    selectorListLoop: for (let i = 0; i < list.length; i++) {
-        const currentSelectorInList = list[i];
-        if (selector.length !== currentSelectorInList.length) {
-            continue;
-        }
-        for (let j = 0; j < selector.length; j++) {
-            if (selector[j] !== currentSelectorInList[j]) {
-                continue selectorListLoop;
-            }
-        }
-        return true;
+/** Verifies whether a given type is a component */
+function assertComponentDef(type) {
+    if (!getComponentDef$1(type)) {
+        throw new RuntimeError(906 /* RuntimeErrorCode.MISSING_GENERATED_DEF */, `The ${stringifyForError(type)} is not an Angular component, ` +
+            `make sure it has the \`@Component\` decorator.`);
     }
-    return false;
 }
-function maybeWrapInNotSelector(isNegativeMode, chunk) {
-    return isNegativeMode ? ':not(' + chunk.trim() + ')' : chunk;
+/** Called when there are multiple component selectors that match a given node */
+function throwMultipleComponentError(tNode, first, second) {
+    throw new RuntimeError(-300 /* RuntimeErrorCode.MULTIPLE_COMPONENTS_MATCH */, `Multiple components match node with tagname ${tNode.value}: ` +
+        `${stringifyForError(first)} and ` +
+        `${stringifyForError(second)}`);
 }
-function stringifyCSSSelector(selector) {
-    let result = selector[0];
-    let i = 1;
-    let mode = 2 /* SelectorFlags.ATTRIBUTE */;
-    let currentChunk = '';
-    let isNegativeMode = false;
-    while (i < selector.length) {
-        let valueOrMarker = selector[i];
-        if (typeof valueOrMarker === 'string') {
-            if (mode & 2 /* SelectorFlags.ATTRIBUTE */) {
-                const attrValue = selector[++i];
-                currentChunk +=
-                    '[' + valueOrMarker + (attrValue.length > 0 ? '="' + attrValue + '"' : '') + ']';
-            }
-            else if (mode & 8 /* SelectorFlags.CLASS */) {
-                currentChunk += '.' + valueOrMarker;
-            }
-            else if (mode & 4 /* SelectorFlags.ELEMENT */) {
-                currentChunk += ' ' + valueOrMarker;
-            }
-        }
-        else {
-            //
-            // Append current chunk to the final result in case we come across SelectorFlag, which
-            // indicates that the previous section of a selector is over. We need to accumulate content
-            // between flags to make sure we wrap the chunk later in :not() selector if needed, e.g.
-            // ```
-            //  ['', Flags.CLASS, '.classA', Flags.CLASS | Flags.NOT, '.classB', '.classC']
-            // ```
-            // should be transformed to `.classA :not(.classB .classC)`.
-            //
-            // Note: for negative selector part, we accumulate content between flags until we find the
-            // next negative flag. This is needed to support a case where `:not()` rule contains more than
-            // one chunk, e.g. the following selector:
-            // ```
-            //  ['', Flags.ELEMENT | Flags.NOT, 'p', Flags.CLASS, 'foo', Flags.CLASS | Flags.NOT, 'bar']
-            // ```
-            // should be stringified to `:not(p.foo) :not(.bar)`
-            //
-            if (currentChunk !== '' && !isPositive(valueOrMarker)) {
-                result += maybeWrapInNotSelector(isNegativeMode, currentChunk);
-                currentChunk = '';
-            }
-            mode = valueOrMarker;
-            // According to CssSelector spec, once we come across `SelectorFlags.NOT` flag, the negative
-            // mode is maintained for remaining chunks of a selector.
-            isNegativeMode = isNegativeMode || !isPositive(mode);
-        }
-        i++;
-    }
-    if (currentChunk !== '') {
-        result += maybeWrapInNotSelector(isNegativeMode, currentChunk);
+/** Throws an ExpressionChangedAfterChecked error if checkNoChanges mode is on. */
+function throwErrorIfNoChangesMode(creationMode, oldValue, currValue, propName) {
+    const field = propName ? ` for '${propName}'` : '';
+    let msg = `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value${field}: '${oldValue}'. Current value: '${currValue}'.`;
+    if (creationMode) {
+        msg +=
+            ` It seems like the view has been created after its parent and its children have been dirty checked.` +
+                ` Has it been created in a change detection hook?`;
     }
-    return result;
+    throw new RuntimeError(-100 /* RuntimeErrorCode.EXPRESSION_CHANGED_AFTER_CHECKED */, msg);
 }
-/**
- * Generates string representation of CSS selector in parsed form.
- *
- * ComponentDef and DirectiveDef are generated with the selector in parsed form to avoid doing
- * additional parsing at runtime (for example, for directive matching). However in some cases (for
- * example, while bootstrapping a component), a string version of the selector is required to query
- * for the host element on the page. This function takes the parsed form of a selector and returns
- * its string representation.
- *
- * @param selectorList selector in parsed form
- * @returns string representation of a given selector
- */
-function stringifyCSSSelectorList(selectorList) {
-    return selectorList.map(stringifyCSSSelector).join(',');
+function constructDetailsForInterpolation(lView, rootIndex, expressionIndex, meta, changedValue) {
+    const [propName, prefix, ...chunks] = meta.split(INTERPOLATION_DELIMITER);
+    let oldValue = prefix, newValue = prefix;
+    for (let i = 0; i < chunks.length; i++) {
+        const slotIdx = rootIndex + i;
+        oldValue += `${lView[slotIdx]}${chunks[i]}`;
+        newValue += `${slotIdx === expressionIndex ? changedValue : lView[slotIdx]}${chunks[i]}`;
+    }
+    return { propName, oldValue, newValue };
 }
 /**
- * Extracts attributes and classes information from a given CSS selector.
- *
- * This function is used while creating a component dynamically. In this case, the host element
- * (that is created dynamically) should contain attributes and classes specified in component's CSS
- * selector.
+ * Constructs an object that contains details for the ExpressionChangedAfterItHasBeenCheckedError:
+ * - property name (for property bindings or interpolations)
+ * - old and new values, enriched using information from metadata
  *
- * @param selector CSS selector in parsed form (in a form of array)
- * @returns object with `attrs` and `classes` fields that contain extracted information
+ * More information on the metadata storage format can be found in `storePropertyBindingMetadata`
+ * function description.
  */
-function extractAttrsAndClassesFromSelector(selector) {
-    const attrs = [];
-    const classes = [];
-    let i = 1;
-    let mode = 2 /* SelectorFlags.ATTRIBUTE */;
-    while (i < selector.length) {
-        let valueOrMarker = selector[i];
-        if (typeof valueOrMarker === 'string') {
-            if (mode === 2 /* SelectorFlags.ATTRIBUTE */) {
-                if (valueOrMarker !== '') {
-                    attrs.push(valueOrMarker, selector[++i]);
-                }
-            }
-            else if (mode === 8 /* SelectorFlags.CLASS */) {
-                classes.push(valueOrMarker);
-            }
+function getExpressionChangedErrorDetails(lView, bindingIndex, oldValue, newValue) {
+    const tData = lView[TVIEW].data;
+    const metadata = tData[bindingIndex];
+    if (typeof metadata === 'string') {
+        // metadata for property interpolation
+        if (metadata.indexOf(INTERPOLATION_DELIMITER) > -1) {
+            return constructDetailsForInterpolation(lView, bindingIndex, bindingIndex, metadata, newValue);
         }
-        else {
-            // According to CssSelector spec, once we come across `SelectorFlags.NOT` flag, the negative
-            // mode is maintained for remaining chunks of a selector. Since attributes and classes are
-            // extracted only for "positive" part of the selector, we can stop here.
-            if (!isPositive(mode))
-                break;
-            mode = valueOrMarker;
+        // metadata for property binding
+        return { propName: metadata, oldValue, newValue };
+    }
+    // metadata is not available for this expression, check if this expression is a part of the
+    // property interpolation by going from the current binding index left and look for a string that
+    // contains INTERPOLATION_DELIMITER, the layout in tView.data for this case will look like this:
+    // [..., 'id�Prefix � and � suffix', null, null, null, ...]
+    if (metadata === null) {
+        let idx = bindingIndex - 1;
+        while (typeof tData[idx] !== 'string' && tData[idx + 1] === null) {
+            idx--;
+        }
+        const meta = tData[idx];
+        if (typeof meta === 'string') {
+            const matches = meta.match(new RegExp(INTERPOLATION_DELIMITER, 'g'));
+            // first interpolation delimiter separates property name from interpolation parts (in case of
+            // property interpolations), so we subtract one from total number of found delimiters
+            if (matches && (matches.length - 1) > bindingIndex - idx) {
+                return constructDetailsForInterpolation(lView, idx, bindingIndex, meta, newValue);
+            }
         }
-        i++;
     }
-    return { attrs, classes };
+    return { propName: undefined, oldValue, newValue };
 }
 
 /** A special value which designates that a value has not changed. */
@@ -9790,6 +10042,33 @@ function selectIndexInternal(tView, lView, index, checkNoChangesMode) {
     setSelectedIndex(index);
 }
 
+/**
+ * Runs the given function in the context of the given `Injector`.
+ *
+ * Within the function's stack frame, `inject` can be used to inject dependencies from the given
+ * `Injector`. Note that `inject` is only usable synchronously, and cannot be used in any
+ * asynchronous callbacks or after any `await` points.
+ *
+ * @param injector the injector which will satisfy calls to `inject` while `fn` is executing
+ * @param fn the closure to be run in the context of `injector`
+ * @returns the return value of the function, if any
+ * @publicApi
+ */
+function runInInjectionContext(injector, fn) {
+    if (injector instanceof R3Injector) {
+        injector.assertNotDestroyed();
+    }
+    const prevInjector = setCurrentInjector(injector);
+    const previousInjectImplementation = setInjectImplementation(undefined);
+    try {
+        return fn();
+    }
+    finally {
+        setCurrentInjector(prevInjector);
+        setInjectImplementation(previousInjectImplementation);
+    }
+}
+
 /**
  * A mapping of the @angular/core API surface used in generated expressions to the actual symbols.
  *
@@ -11228,7 +11507,7 @@ function getOrCreateComponentTView(def) {
         // Declaration node here is null since this function is called when we dynamically create a
         // component and hence there is no declaration.
         const declTNode = null;
-        return def.tView = createTView(1 /* TViewType.Component */, declTNode, def.template, def.decls, def.vars, def.directiveDefs, def.pipeDefs, def.viewQuery, def.schemas, def.consts);
+        return def.tView = createTView(1 /* TViewType.Component */, declTNode, def.template, def.decls, def.vars, def.directiveDefs, def.pipeDefs, def.viewQuery, def.schemas, def.consts, def.id);
     }
     return tView;
 }
@@ -11245,7 +11524,7 @@ function getOrCreateComponentTView(def) {
  * @param schemas Schemas for this view
  * @param consts Constants for this view
  */
-function createTView(type, declTNode, templateFn, decls, vars, directives, pipes, viewQuery, schemas, constsOrFactory) {
+function createTView(type, declTNode, templateFn, decls, vars, directives, pipes, viewQuery, schemas, constsOrFactory, ssrId) {
     ngDevMode && ngDevMode.tView++;
     const bindingStartIndex = HEADER_OFFSET + decls;
     // This length does not yet contain host bindings from child directives because at this point,
@@ -11284,7 +11563,8 @@ function createTView(type, declTNode, templateFn, decls, vars, directives, pipes
         firstChild: null,
         schemas: schemas,
         consts: consts,
-        incompleteFirstPass: false
+        incompleteFirstPass: false,
+        ssrId,
     };
     if (ngDevMode) {
         // For performance reasons it is important that the tView retains the same shape during runtime.
@@ -11304,23 +11584,58 @@ function createViewBlueprint(bindingStartIndex, initialViewLength) {
 /**
  * Locates the host native element, used for bootstrapping existing nodes into rendering pipeline.
  *
- * @param rendererFactory Factory function to create renderer instance.
+ * @param renderer the renderer used to locate the element.
  * @param elementOrSelector Render element or CSS selector to locate the element.
  * @param encapsulation View Encapsulation defined for component that requests host element.
  * @param injector Root view injector instance.
  */
 function locateHostElement(renderer, elementOrSelector, encapsulation, injector) {
     // Note: we use default value for the `PRESERVE_HOST_CONTENT` here even though it's a
-    // tree-shakable one (providedIn:'root'). This code path can be triggered during dynamic component
-    // creation (after calling ViewContainerRef.createComponent) when an injector instance can be
-    // provided. The injector instance might be disconnected from the main DI tree, thus the
-    // `PRESERVE_HOST_CONTENT` woild not be able to instantiate. In this case, the default value will
-    // be used.
+    // tree-shakable one (providedIn:'root'). This code path can be triggered during dynamic
+    // component creation (after calling ViewContainerRef.createComponent) when an injector
+    // instance can be provided. The injector instance might be disconnected from the main DI
+    // tree, thus the `PRESERVE_HOST_CONTENT` woild not be able to instantiate. In this case, the
+    // default value will be used.
     const preserveHostContent = injector.get(PRESERVE_HOST_CONTENT, PRESERVE_HOST_CONTENT_DEFAULT);
     // When using native Shadow DOM, do not clear host element to allow native slot
     // projection.
     const preserveContent = preserveHostContent || encapsulation === ViewEncapsulation.ShadowDom;
-    return renderer.selectRootElement(elementOrSelector, preserveContent);
+    const rootElement = renderer.selectRootElement(elementOrSelector, preserveContent);
+    applyRootElementTransform(rootElement);
+    return rootElement;
+}
+/**
+ * Applies any root element transformations that are needed. If hydration is enabled,
+ * this will process corrupted text nodes.
+ *
+ * @param rootElement the app root HTML Element
+ */
+function applyRootElementTransform(rootElement) {
+    _applyRootElementTransformImpl(rootElement);
+}
+/**
+ * Reference to a function that applies transformations to the root HTML element
+ * of an app. When hydration is enabled, this processes any corrupt text nodes
+ * so they are properly hydratable on the client.
+ *
+ * @param rootElement the app root HTML Element
+ */
+let _applyRootElementTransformImpl = (rootElement) => null;
+/**
+ * Processes text node markers before hydration begins. This replaces any special comment
+ * nodes that were added prior to serialization are swapped out to restore proper text
+ * nodes before hydration.
+ *
+ * @param rootElement the app root HTML Element
+ */
+function applyRootElementTransformImpl(rootElement) {
+    processTextNodeMarkersBeforeHydration(rootElement);
+}
+/**
+ * Sets the implementation for the `applyRootElementTransform` function.
+ */
+function enableApplyRootElementTransformImpl() {
+    _applyRootElementTransformImpl = applyRootElementTransformImpl;
 }
 /**
  * Saves context for this cleanup function in LView.cleanupInstances.
@@ -11332,9 +11647,9 @@ function locateHostElement(renderer, elementOrSelector, encapsulation, injector)
 function storeCleanupWithContext(tView, lView, context, cleanupFn) {
     const lCleanup = getOrCreateLViewCleanup(lView);
     // Historically the `storeCleanupWithContext` was used to register both framework-level and
-    // user-defined cleanup callbacks, but over time those two types of cleanups were separated. This
-    // dev mode checks assures that user-level cleanup callbacks are _not_ stored in data structures
-    // reserved for framework-specific hooks.
+    // user-defined cleanup callbacks, but over time those two types of cleanups were separated.
+    // This dev mode checks assures that user-level cleanup callbacks are _not_ stored in data
+    // structures reserved for framework-specific hooks.
     ngDevMode &&
         assertDefined(context, 'Cleanup context is mandatory when registering framework-level destroy hooks');
     lCleanup.push(context);
@@ -12052,7 +12367,8 @@ function createLContainer(hostNative, currentView, native, tNode) {
         tNode,
         native,
         null,
-        null, // moved views
+        null,
+        null, // dehydrated views
     ];
     ngDevMode &&
         assertEqual(lContainer.length, CONTAINER_HEADER_OFFSET, 'Should allocate correct number of slots for LContainer header.');
@@ -12874,7 +13190,7 @@ class ComponentFactory extends ComponentFactory$1 {
         const rootFlags = this.componentDef.onPush ? 32 /* LViewFlags.Dirty */ | 256 /* LViewFlags.IsRoot */ :
             16 /* LViewFlags.CheckAlways */ | 256 /* LViewFlags.IsRoot */;
         // Create the root view. Uses empty TView and ContentTemplate.
-        const rootTView = createTView(0 /* TViewType.Root */, null, null, 1, 0, null, null, null, null, null);
+        const rootTView = createTView(0 /* TViewType.Root */, null, null, 1, 0, null, null, null, null, null, null);
         const rootLView = createLView(null, rootTView, null, rootFlags, null, null, rendererFactory, hostRenderer, sanitizer, rootViewInjector, null, null);
         // rootView is the parent when bootstrapping
         // TODO(misko): it looks like we are entering view here but we don't really need to as
@@ -14130,44 +14446,737 @@ function ɵɵattributeInterpolate8(attrName, prefix, v0, i0, v1, i1, v2, i2, v3,
  * @returns itself, so that it may be chained.
  * @codeGenApi
  */
-function ɵɵattributeInterpolateV(attrName, values, sanitizer, namespace) {
-    const lView = getLView();
-    const interpolated = interpolationV(lView, values);
-    if (interpolated !== NO_CHANGE) {
-        const tNode = getSelectedTNode();
-        elementAttributeInternal(tNode, lView, attrName, interpolated, sanitizer, namespace);
-        if (ngDevMode) {
-            const interpolationInBetween = [values[0]]; // prefix
-            for (let i = 2; i < values.length; i += 2) {
-                interpolationInBetween.push(values[i]);
+function ɵɵattributeInterpolateV(attrName, values, sanitizer, namespace) {
+    const lView = getLView();
+    const interpolated = interpolationV(lView, values);
+    if (interpolated !== NO_CHANGE) {
+        const tNode = getSelectedTNode();
+        elementAttributeInternal(tNode, lView, attrName, interpolated, sanitizer, namespace);
+        if (ngDevMode) {
+            const interpolationInBetween = [values[0]]; // prefix
+            for (let i = 2; i < values.length; i += 2) {
+                interpolationInBetween.push(values[i]);
+            }
+            storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - interpolationInBetween.length + 1, ...interpolationInBetween);
+        }
+    }
+    return ɵɵattributeInterpolateV;
+}
+
+/**
+ * Synchronously perform change detection on a component (and possibly its sub-components).
+ *
+ * This function triggers change detection in a synchronous way on a component.
+ *
+ * @param component The component which the change detection should be performed on.
+ */
+function detectChanges(component) {
+    const view = getComponentViewByInstance(component);
+    detectChangesInternal(view[TVIEW], view, component);
+}
+
+const AT_THIS_LOCATION = '<-- AT THIS LOCATION';
+/**
+ * Retrieves a user friendly string for a given TNodeType for use in
+ * friendly error messages
+ *
+ * @param tNodeType
+ * @returns
+ */
+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);
+    }
+}
+/**
+ * Validates that a given node has sibling nodes
+ */
+function validateSiblingNodeExists(node) {
+    validateNodeExists(node);
+    if (!node.nextSibling) {
+        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) {
+        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.
+ *
+ * @param hydrationInfo The hydration annotation data
+ * @param tView the current tView
+ * @param lView the current lView
+ * @param tNode the current tNode
+ * @returns an RNode that represents a given tNode
+ */
+function locateNextRNode(hydrationInfo, tView, lView, tNode) {
+    let native = null;
+    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;
+    }
+    else {
+        // Locate a node based on a previous sibling or a parent node.
+        const previousTNodeParent = tNode.prev === null;
+        const previousTNode = (tNode.prev ?? tNode.parent);
+        ngDevMode &&
+            assertDefined(previousTNode, 'Unexpected state: current TNode does not have a connection ' +
+                'to the previous node or a parent node.');
+        if (isFirstElementInNgContainer(tNode)) {
+            const noOffsetParentIndex = getNoOffsetIndex(tNode.parent);
+            native = getSegmentHead(hydrationInfo, noOffsetParentIndex);
+        }
+        else {
+            let previousRElement = getNativeByTNode(previousTNode, lView);
+            if (previousTNodeParent) {
+                native = previousRElement.firstChild;
+            }
+            else {
+                // If the previous node is an element, but it also has container info,
+                // this means that we are processing a node like `<div #vcrTarget>`, which is
+                // 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 = getNoOffsetIndex(previousTNode);
+                const segmentHead = getSegmentHead(hydrationInfo, noOffsetPrevSiblingIndex);
+                if (previousTNode.type === 2 /* TNodeType.Element */ && segmentHead) {
+                    const numRootNodesToSkip = calcSerializedContainerSize(hydrationInfo, noOffsetPrevSiblingIndex);
+                    // `+1` stands for an anchor comment node after all the views in this container.
+                    const nodesToSkip = numRootNodesToSkip + 1;
+                    // First node after this segment.
+                    native = siblingAfter(nodesToSkip, segmentHead);
+                }
+                else {
+                    native = previousRElement.nextSibling;
+                }
+            }
+        }
+    }
+    return native;
+}
+/**
+ * Skips over a specified number of nodes and returns the next sibling node after that.
+ */
+function siblingAfter(skip, from) {
+    let currentNode = from;
+    for (let i = 0; i < skip; i++) {
+        ngDevMode && validateSiblingNodeExists(currentNode);
+        currentNode = currentNode.nextSibling;
+    }
+    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;
             }
-            storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - interpolationInBetween.length + 1, ...interpolationInBetween);
         }
     }
-    return ɵɵattributeInterpolateV;
+    if (ngDevMode && !node) {
+        throw nodeNotFoundAtPathError(from, stringifyNavigationInstructions(instructions));
+    }
+    return node;
 }
-
 /**
- * Synchronously perform change detection on a component (and possibly its sub-components).
- *
- * This function triggers change detection in a synchronous way on a component.
+ * 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`.
  *
- * @param component The component which the change detection should be performed on.
+ * 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 detectChanges(component) {
-    const view = getComponentViewByInstance(component);
-    detectChangesInternal(view[TVIEW], view, component);
+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);
     ngDevMode && ngDevMode.firstCreatePass++;
     const tViewConsts = tView.consts;
+    let ssrId = null;
+    const hydrationInfo = lView[HYDRATION];
+    if (hydrationInfo) {
+        const noOffsetIndex = index - HEADER_OFFSET;
+        ssrId = (hydrationInfo && hydrationInfo.data[TEMPLATES]?.[noOffsetIndex]) ?? null;
+    }
     // TODO(pk): refactor getOrCreateTNode to have the "create" only version
     const tNode = getOrCreateTNode(tView, index, 4 /* TNodeType.Container */, tagName || null, getConstant(tViewConsts, attrsIndex));
     resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex));
     registerPostOrderHooks(tView, tNode);
-    const embeddedTView = tNode.tView = createTView(2 /* TViewType.Embedded */, tNode, templateFn, decls, vars, tView.directiveRegistry, tView.pipeRegistry, null, tView.schemas, tViewConsts);
+    const embeddedTView = tNode.tView = createTView(2 /* TViewType.Embedded */, tNode, templateFn, decls, vars, tView.directiveRegistry, tView.pipeRegistry, null, tView.schemas, tViewConsts, ssrId);
     if (tView.queries !== null) {
         tView.queries.template(tView, tNode);
         embeddedTView.queries = tView.queries.embeddedTView(tNode);
@@ -14200,8 +15209,10 @@ function ɵɵtemplate(index, templateFn, decls, vars, tagName, attrsIndex, local
     const tNode = tView.firstCreatePass ? templateFirstCreatePass(adjustedIndex, tView, lView, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex) :
         tView.data[adjustedIndex];
     setCurrentTNode(tNode, false);
-    const comment = lView[RENDERER].createComment(ngDevMode ? 'container' : '');
-    appendChild(tView, lView, comment, tNode);
+    const comment = _locateOrCreateContainerAnchor(tView, lView, tNode, index);
+    if (wasLastNodeCreated()) {
+        appendChild(tView, lView, comment, tNode);
+    }
     attachPatchData(comment, lView);
     addToViewTree(lView, lView[adjustedIndex] = createLContainer(comment, lView, comment, tNode));
     if (isDirectiveHost(tNode)) {
@@ -14211,6 +15222,42 @@ function ɵɵtemplate(index, templateFn, decls, vars, tagName, attrsIndex, local
         saveResolvedLocalsInData(lView, tNode, localRefExtractor);
     }
 }
+let _locateOrCreateContainerAnchor = createContainerAnchorImpl;
+/**
+ * Regular creation mode for LContainers and their anchor (comment) nodes.
+ */
+function createContainerAnchorImpl(tView, lView, tNode, index) {
+    lastNodeWasCreated(true);
+    return lView[RENDERER].createComment(ngDevMode ? 'container' : '');
+}
+/**
+ * Enables hydration code path (to lookup existing elements in DOM)
+ * in addition to the regular creation mode for LContainers and their
+ * anchor (comment) nodes.
+ */
+function locateOrCreateContainerAnchorImpl(tView, lView, tNode, index) {
+    const hydrationInfo = lView[HYDRATION];
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1() || isDisconnectedNode(hydrationInfo, index);
+    lastNodeWasCreated(isNodeCreationMode);
+    // Regular creation mode.
+    if (isNodeCreationMode) {
+        return createContainerAnchorImpl(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);
+    const comment = siblingAfter(viewContainerSize, currentRNode);
+    if (ngDevMode) {
+        validateMatchingNode(comment, Node.COMMENT_NODE, null, lView, tNode);
+        markRNodeAsClaimedByHydration(comment);
+    }
+    return comment;
+}
+function enableLocateOrCreateContainerAnchorImpl() {
+    _locateOrCreateContainerAnchor = locateOrCreateContainerAnchorImpl;
+}
 
 /** Store a value in the `data` at a given `index`. */
 function store(tView, lView, index, value) {
@@ -14237,92 +15284,6 @@ function ɵɵreference(index) {
     return load(contextLView, HEADER_OFFSET + index);
 }
 
-/**
- * Verifies whether a given node matches an expected criteria,
- * based on internal data structure state.
- */
-function validateMatchingNode(node, nodeType, tagName, lView, tNode) {
-    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.`);
-    }
-}
-/**
- * Verifies whether next sibling node exists.
- */
-function validateSiblingNodeExists(node) {
-    if (!node.nextSibling) {
-        // TODO: improve error message and use RuntimeError instead.
-        throw new Error(`Unexpected state: insufficient number of sibling nodes.`);
-    }
-}
-
-/** Whether current TNode is a first node in an <ng-container>. */
-function isFirstElementInNgContainer(tNode) {
-    return !tNode.prev && tNode.parent?.type === 8 /* TNodeType.ElementContainer */;
-}
-/** Returns first element from a DOM segment that corresponds to this <ng-container>. */
-function getDehydratedNgContainer(hydrationInfo, tContainerNode) {
-    const noOffsetIndex = tContainerNode.index - HEADER_OFFSET;
-    const ngContainer = hydrationInfo.ngContainers?.[noOffsetIndex];
-    ngDevMode &&
-        assertDefined(ngContainer, 'Unexpected state: no hydration info available for a given TNode, ' +
-            'which represents an element container.');
-    return ngContainer;
-}
-/**
- * Locate a node in DOM tree that corresponds to a given TNode.
- *
- * @param hydrationInfo The hydration annotation data
- * @param tView the current tView
- * @param lView the current lView
- * @param tNode the current tNode
- * @returns an RNode that represents a given tNode
- */
-function locateNextRNode(hydrationInfo, tView, lView, tNode) {
-    let native = null;
-    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;
-    }
-    else {
-        // Locate a node based on a previous sibling or a parent node.
-        const previousTNodeParent = tNode.prev === null;
-        const previousTNode = (tNode.prev ?? tNode.parent);
-        ngDevMode &&
-            assertDefined(previousTNode, 'Unexpected state: current TNode does not have a connection ' +
-                'to the previous node or a parent node.');
-        const previousRElement = getNativeByTNode(previousTNode, lView);
-        if (isFirstElementInNgContainer(tNode)) {
-            const ngContainer = getDehydratedNgContainer(hydrationInfo, tNode.parent);
-            native = ngContainer.firstChild ?? null;
-        }
-        else {
-            if (previousTNodeParent) {
-                native = previousRElement.firstChild;
-            }
-            else {
-                native = previousRElement.nextSibling;
-            }
-        }
-    }
-    return native;
-}
-/**
- * Skips over a specified number of nodes and returns the next sibling node after that.
- */
-function siblingAfter(skip, from) {
-    let currentNode = from;
-    for (let i = 0; i < skip; i++) {
-        ngDevMode && validateSiblingNodeExists(currentNode);
-        currentNode = currentNode.nextSibling;
-    }
-    return currentNode;
-}
-
 /**
  * The name of an attribute that can be added to the hydration boundary node
  * (component host node) to disable hydration for the content within that boundary.
@@ -14349,6 +15310,21 @@ function hasNgSkipHydrationAttr(tNode) {
     }
     return false;
 }
+/**
+ * Helper function that determines if a given node is within a skip hydration block
+ * by navigating up the TNode tree to see if any parent nodes have skip hydration
+ * attribute.
+ */
+function isInSkipHydrationBlock(tNode) {
+    let currentTNode = tNode.parent;
+    while (currentTNode) {
+        if (hasNgSkipHydrationAttr(currentTNode)) {
+            return true;
+        }
+        currentTNode = currentTNode.parent;
+    }
+    return false;
+}
 
 /**
  * Update a property on a selected element.
@@ -14434,7 +15410,7 @@ function ɵɵelementStart(index, name, attrsIndex, localRefsIndex) {
     const tNode = tView.firstCreatePass ?
         elementStartFirstCreatePass(adjustedIndex, tView, lView, name, attrsIndex, localRefsIndex) :
         tView.data[adjustedIndex];
-    const native = _locateOrCreateElementNode(tView, lView, tNode, renderer, name);
+    const native = _locateOrCreateElementNode(tView, lView, tNode, renderer, name, index);
     lView[adjustedIndex] = native;
     const hasDirectives = isDirectiveHost(tNode);
     if (ngDevMode && tView.firstCreatePass) {
@@ -14517,7 +15493,7 @@ function ɵɵelement(index, name, attrsIndex, localRefsIndex) {
     ɵɵelementEnd();
     return ɵɵelement;
 }
-let _locateOrCreateElementNode = (tView, lView, tNode, renderer, name) => {
+let _locateOrCreateElementNode = (tView, lView, tNode, renderer, name, index) => {
     lastNodeWasCreated(true);
     return createElementNode(renderer, name, getNamespace$1());
 };
@@ -14525,9 +15501,9 @@ let _locateOrCreateElementNode = (tView, lView, tNode, renderer, name) => {
  * Enables hydration code path (to lookup existing elements in DOM)
  * in addition to the regular creation mode of element nodes.
  */
-function locateOrCreateElementNodeImpl(tView, lView, tNode, renderer, name) {
+function locateOrCreateElementNodeImpl(tView, lView, tNode, renderer, name, index) {
     const hydrationInfo = lView[HYDRATION];
-    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock();
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1() || isDisconnectedNode(hydrationInfo, index);
     lastNodeWasCreated(isNodeCreationMode);
     // Regular creation mode.
     if (isNodeCreationMode) {
@@ -14535,16 +15511,33 @@ function locateOrCreateElementNodeImpl(tView, lView, tNode, renderer, name) {
     }
     // Hydration mode, looking up an existing element in DOM.
     const native = locateNextRNode(hydrationInfo, tView, lView, tNode);
-    ngDevMode &&
-        validateMatchingNode(native, Node.ELEMENT_NODE, name, lView, tNode);
+    ngDevMode && validateMatchingNode(native, Node.ELEMENT_NODE, name, lView, tNode);
     ngDevMode && markRNodeAsClaimedByHydration(native);
+    // This element might also be an anchor of a view container.
+    if (getSerializedContainerViews(hydrationInfo, index)) {
+        // Important note: this element acts as an anchor, but it's **not** a part
+        // of the embedded view, so we start the segment **after** this element, taking
+        // a reference to the next sibling. For example, the following template:
+        // `<div #vcrTarget>` is represented in the DOM as `<div></div>...<!--container-->`,
+        // so while processing a `<div>` instruction, point to the next sibling as a
+        // start of a segment.
+        ngDevMode && validateNodeExists(native.nextSibling);
+        setSegmentHead(hydrationInfo, index, native.nextSibling);
+    }
     // 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;
 }
@@ -14665,7 +15658,7 @@ let _locateOrCreateElementContainerNode = (tView, lView, tNode, index) => {
 function locateOrCreateElementContainerNode(tView, lView, tNode, index) {
     let comment;
     const hydrationInfo = lView[HYDRATION];
-    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock();
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1();
     lastNodeWasCreated(isNodeCreationMode);
     // Regular creation mode.
     if (isNodeCreationMode) {
@@ -14673,21 +15666,17 @@ function locateOrCreateElementContainerNode(tView, lView, tNode, index) {
     }
     // Hydration mode, looking up existing elements in DOM.
     const currentRNode = locateNextRNode(hydrationInfo, tView, lView, tNode);
+    ngDevMode && validateNodeExists(currentRNode);
     const ngContainerSize = getNgContainerSize(hydrationInfo, index);
     ngDevMode &&
         assertNumber(ngContainerSize, 'Unexpected state: hydrating an <ng-container>, ' +
             'but no hydration info is available.');
-    if (ngContainerSize > 0) {
-        storeNgContainerInfo(hydrationInfo, index, currentRNode);
-        comment = siblingAfter(ngContainerSize, currentRNode);
-    }
-    else {
-        // If <ng-container> has no nodes,
-        // the current node is an anchor (comment) node.
-        comment = currentRNode;
+    setSegmentHead(hydrationInfo, index, currentRNode);
+    comment = siblingAfter(ngContainerSize, currentRNode);
+    if (ngDevMode) {
+        validateMatchingNode(comment, Node.COMMENT_NODE, null, lView, tNode);
+        markRNodeAsClaimedByHydration(comment);
     }
-    ngDevMode && validateMatchingNode(comment, Node.COMMENT_NODE, null, lView, tNode);
-    ngDevMode && markRNodeAsClaimedByHydration(comment);
     return comment;
 }
 function enableLocateOrCreateElementContainerNodeImpl() {
@@ -15064,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);
     }
@@ -17027,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);
@@ -17035,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);
 };
@@ -17043,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();
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1() || isDisconnectedNode(hydrationInfo, index);
     lastNodeWasCreated(isNodeCreationMode);
     // Regular creation mode.
     if (isNodeCreationMode) {
@@ -20713,7 +21705,7 @@ class NgModuleFactory$1 {
  * @publicApi
  */
 function createNgModule(ngModule, parentInjector) {
-    return new NgModuleRef(ngModule, parentInjector ?? null);
+    return new NgModuleRef(ngModule, parentInjector ?? null, []);
 }
 /**
  * The `createNgModule` function alias for backwards-compatibility.
@@ -20723,7 +21715,7 @@ function createNgModule(ngModule, parentInjector) {
  */
 const createNgModuleRef = createNgModule;
 class NgModuleRef extends NgModuleRef$1 {
-    constructor(ngModuleType, _parent) {
+    constructor(ngModuleType, _parent, additionalProviders) {
         super();
         this._parent = _parent;
         // tslint:disable-next-line:require-internal-with-underscore
@@ -20744,7 +21736,8 @@ class NgModuleRef extends NgModuleRef$1 {
             { provide: NgModuleRef$1, useValue: this }, {
                 provide: ComponentFactoryResolver$1,
                 useValue: this.componentFactoryResolver
-            }
+            },
+            ...additionalProviders
         ], stringify(ngModuleType), new Set(['environment']));
         // We need to resolve the injector types separately from the injector creation, because
         // the module might be trying to use this ref in its constructor for DI which will cause a
@@ -20773,9 +21766,12 @@ class NgModuleFactory extends NgModuleFactory$1 {
         this.moduleType = moduleType;
     }
     create(parentInjector) {
-        return new NgModuleRef(this.moduleType, parentInjector);
+        return new NgModuleRef(this.moduleType, parentInjector, []);
     }
 }
+function createNgModuleRefWithProviders(moduleType, parentInjector, additionalProviders) {
+    return new NgModuleRef(moduleType, parentInjector, additionalProviders);
+}
 class EnvironmentNgModuleRefAdapter extends NgModuleRef$1 {
     constructor(providers, parent, source) {
         super();
@@ -21223,7 +22219,8 @@ function sortListeners(a, b) {
  * See call site for more info.
  */
 function isDirectiveDefHack(obj) {
-    return obj.type !== undefined && obj.template !== undefined && obj.declaredInputs !== undefined;
+    return obj.type !== undefined && obj.declaredInputs !== undefined &&
+        obj.findHostDirectiveDefs !== undefined;
 }
 /**
  * Retrieve the component `LView` from component/element.
@@ -22060,9 +23057,24 @@ const R3TemplateRef = class TemplateRef extends ViewEngineTemplateRef {
         this._declarationTContainer = _declarationTContainer;
         this.elementRef = elementRef;
     }
+    /**
+     * Returns an `ssrId` associated with a TView, which was used to
+     * create this instance of the `TemplateRef`.
+     *
+     * @internal
+     */
+    get ssrId() {
+        return this._declarationTContainer.tView?.ssrId || null;
+    }
     createEmbeddedView(context, injector) {
+        return this.createEmbeddedViewImpl(context, injector, null);
+    }
+    /**
+     * @internal
+     */
+    createEmbeddedViewImpl(context, injector, hydrationInfo) {
         const embeddedTView = this._declarationTContainer.tView;
-        const embeddedLView = createLView(this._declarationLView, embeddedTView, context, 16 /* LViewFlags.CheckAlways */, null, embeddedTView.declTNode, null, null, null, null, injector || null, null);
+        const embeddedLView = createLView(this._declarationLView, embeddedTView, context, 16 /* LViewFlags.CheckAlways */, null, embeddedTView.declTNode, null, null, null, null, injector || null, hydrationInfo || null);
         const declarationLContainer = this._declarationLView[this._declarationTContainer.index];
         ngDevMode && assertLContainer(declarationLContainer);
         embeddedLView[DECLARATION_LCONTAINER] = declarationLContainer;
@@ -22097,6 +23109,164 @@ function createTemplateRef(hostTNode, hostLView) {
     return null;
 }
 
+/**
+ * Removes all dehydrated views from a given LContainer:
+ * both in internal data structure, as well as removing
+ * corresponding DOM nodes that belong to that dehydrated view.
+ */
+function removeDehydratedViews(lContainer) {
+    const views = lContainer[DEHYDRATED_VIEWS] ?? [];
+    const parentLView = lContainer[PARENT];
+    const renderer = parentLView[RENDERER];
+    for (const view of views) {
+        removeDehydratedView(view, renderer);
+        ngDevMode && ngDevMode.dehydratedViewsRemoved++;
+    }
+    // Reset the value to an empty array to indicate that no
+    // further processing of dehydrated views is needed for
+    // this view container (i.e. do not trigger the lookup process
+    // once again in case a `ViewContainerRef` is created later).
+    lContainer[DEHYDRATED_VIEWS] = EMPTY_ARRAY;
+}
+/**
+ * Helper function to remove all nodes from a dehydrated view.
+ */
+function removeDehydratedView(dehydratedView, renderer) {
+    let nodesRemoved = 0;
+    let currentRNode = dehydratedView.firstChild;
+    if (currentRNode) {
+        const numNodes = dehydratedView.data[NUM_ROOT_NODES];
+        while (nodesRemoved < numNodes) {
+            ngDevMode && validateSiblingNodeExists(currentRNode);
+            const nextSibling = currentRNode.nextSibling;
+            nativeRemoveNode(renderer, currentRNode, false);
+            currentRNode = nextSibling;
+            nodesRemoved++;
+        }
+    }
+}
+/**
+ * Walks over all views within this LContainer invokes dehydrated views
+ * cleanup function for each one.
+ */
+function cleanupLContainer(lContainer) {
+    removeDehydratedViews(lContainer);
+    for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
+        cleanupLView(lContainer[i]);
+    }
+}
+/**
+ * Walks over `LContainer`s and components registered within
+ * this LView and invokes dehydrated views cleanup function for each one.
+ */
+function cleanupLView(lView) {
+    const tView = lView[TVIEW];
+    for (let i = HEADER_OFFSET; i < tView.bindingStartIndex; i++) {
+        if (isLContainer(lView[i])) {
+            const lContainer = lView[i];
+            cleanupLContainer(lContainer);
+        }
+        else if (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
+ * in a container, walks over the DOM structure, collecting the list of
+ * dehydrated views.
+ */
+function locateDehydratedViewsInContainer(currentRNode, serializedViews) {
+    const dehydratedViews = [];
+    for (const serializedView of serializedViews) {
+        // Repeats a view multiple times as needed, based on the serialized information
+        // (for example, for *ngFor-produced views).
+        for (let i = 0; i < (serializedView[MULTIPLIER] ?? 1); i++) {
+            const view = {
+                data: serializedView,
+                firstChild: null,
+            };
+            if (serializedView[NUM_ROOT_NODES] > 0) {
+                // Keep reference to the first node in this view,
+                // so it can be accessed while invoking template instructions.
+                view.firstChild = currentRNode;
+                // Move over to the next node after this view, which can
+                // either be a first node of the next view or an anchor comment
+                // node after the last view in a container.
+                currentRNode = siblingAfter(serializedView[NUM_ROOT_NODES], currentRNode);
+            }
+            dehydratedViews.push(view);
+        }
+    }
+    return [currentRNode, dehydratedViews];
+}
+/**
+ * Reference to a function that searches for a matching dehydrated views
+ * stored on a given lContainer.
+ * Returns `null` by default, when hydration is not enabled.
+ */
+let _findMatchingDehydratedViewImpl = (lContainer, template) => null;
+/**
+ * Retrieves the next dehydrated view from the LContainer and verifies that
+ * it matches a given template id (from the TView that was used to create this
+ * instance of a view). If the id doesn't match, that means that we are in an
+ * unexpected state and can not complete the reconciliation process. Thus,
+ * all dehydrated views from this LContainer are removed (including corresponding
+ * DOM nodes) and the rendering is performed as if there were no dehydrated views
+ * in this container.
+ */
+function findMatchingDehydratedViewImpl(lContainer, template) {
+    const views = lContainer[DEHYDRATED_VIEWS] ?? [];
+    if (!template || views.length === 0) {
+        return null;
+    }
+    const view = views[0];
+    // Verify whether the first dehydrated view in the container matches
+    // the template id passed to this function (that originated from a TView
+    // that was used to create an instance of an embedded or component views.
+    if (view.data[TEMPLATE_ID] === template) {
+        // If the template id matches - extract the first view and return it.
+        return views.shift();
+    }
+    else {
+        // Otherwise, we are at the state when reconciliation can not be completed,
+        // thus we remove all dehydrated views within this container (remove them
+        // from internal data structures as well as delete associated elements from
+        // the DOM tree).
+        removeDehydratedViews(lContainer);
+        return null;
+    }
+}
+function enableFindMatchingDehydratedViewImpl() {
+    _findMatchingDehydratedViewImpl = findMatchingDehydratedViewImpl;
+}
+function findMatchingDehydratedView(lContainer, template) {
+    return _findMatchingDehydratedViewImpl(lContainer, template);
+}
+
 /**
  * Represents a container where one or more views can be attached to a component.
  *
@@ -22181,8 +23351,9 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
             index = indexOrOptions.index;
             injector = indexOrOptions.injector;
         }
-        const viewRef = templateRef.createEmbeddedView(context || {}, injector);
-        this.insert(viewRef, index);
+        const hydrationInfo = findMatchingDehydratedView(this._lContainer, templateRef.ssrId);
+        const viewRef = templateRef.createEmbeddedViewImpl(context || {}, injector, hydrationInfo);
+        this.insertImpl(viewRef, index, !!hydrationInfo);
         return viewRef;
     }
     createComponent(componentFactoryOrType, indexOrOptions, injector, projectableNodes, environmentInjector) {
@@ -22252,11 +23423,17 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
                 environmentInjector = result;
             }
         }
-        const componentRef = componentFactory.create(contextInjector, projectableNodes, undefined, environmentInjector);
-        this.insert(componentRef.hostView, index);
+        const componentDef = getComponentDef$1(componentFactory.componentType ?? {});
+        const dehydratedView = findMatchingDehydratedView(this._lContainer, componentDef?.id ?? null);
+        const rNode = dehydratedView?.firstChild ?? null;
+        const componentRef = componentFactory.create(contextInjector, projectableNodes, rNode, environmentInjector);
+        this.insertImpl(componentRef.hostView, index, !!dehydratedView);
         return componentRef;
     }
     insert(viewRef, index) {
+        return this.insertImpl(viewRef, index, false);
+    }
+    insertImpl(viewRef, index, skipDomInsertion) {
         const lView = viewRef._lView;
         const tView = lView[TVIEW];
         if (ngDevMode && viewRef.destroyed) {
@@ -22287,11 +23464,13 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
         const lContainer = this._lContainer;
         insertView(tView, lView, lContainer, adjustedIdx);
         // Physical operation of adding the DOM nodes.
-        const beforeNode = getBeforeNodeForView(adjustedIdx, lContainer);
-        const renderer = lView[RENDERER];
-        const parentRNode = nativeParentNode(renderer, lContainer[NATIVE]);
-        if (parentRNode !== null) {
-            addViewToContainer(tView, lContainer[T_HOST], renderer, lView, parentRNode, beforeNode);
+        if (!skipDomInsertion) {
+            const beforeNode = getBeforeNodeForView(adjustedIdx, lContainer);
+            const renderer = lView[RENDERER];
+            const parentRNode = nativeParentNode(renderer, lContainer[NATIVE]);
+            if (parentRNode !== null) {
+                addViewToContainer(tView, lContainer[T_HOST], renderer, lView, parentRNode, beforeNode);
+            }
         }
         viewRef.attachToViewContainerRef();
         addToArray(getOrCreateViewRefs(lContainer), adjustedIdx, viewRef);
@@ -22348,8 +23527,6 @@ function getOrCreateViewRefs(lContainer) {
 /**
  * Creates a ViewContainerRef and stores it on the injector.
  *
- * @param ViewContainerRefToken The ViewContainerRef type
- * @param ElementRefToken The ElementRef type
  * @param hostTNode The node that is requesting a ViewContainerRef
  * @param hostLView The view to which the node belongs
  * @returns The ViewContainerRef instance to use
@@ -22363,31 +23540,95 @@ function createContainerRef(hostTNode, hostLView) {
         lContainer = slotValue;
     }
     else {
-        let commentNode;
-        // If the host is an element container, the native host element is guaranteed to be a
-        // comment and we can reuse that comment as anchor element for the new LContainer.
-        // The comment node in question is already part of the DOM structure so we don't need to append
-        // it again.
-        if (hostTNode.type & 8 /* TNodeType.ElementContainer */) {
-            commentNode = unwrapRNode(slotValue);
-        }
-        else {
-            // If the host is a regular element, we have to insert a comment node manually which will
-            // be used as an anchor when inserting elements. In this specific case we use low-level DOM
-            // manipulation to insert it.
-            const renderer = hostLView[RENDERER];
-            ngDevMode && ngDevMode.rendererCreateComment++;
-            commentNode = renderer.createComment(ngDevMode ? 'container' : '');
-            const hostNative = getNativeByTNode(hostTNode, hostLView);
-            const parentOfHostNative = nativeParentNode(renderer, hostNative);
-            nativeInsertBefore(renderer, parentOfHostNative, commentNode, nativeNextSibling(renderer, hostNative), false);
-        }
-        hostLView[hostTNode.index] = lContainer =
-            createLContainer(slotValue, hostLView, commentNode, hostTNode);
+        // An LContainer anchor can not be `null`, but we set it here temporarily
+        // and update to the actual value later in this function (see
+        // `_locateOrCreateAnchorNode`).
+        lContainer = createLContainer(slotValue, hostLView, null, hostTNode);
+        hostLView[hostTNode.index] = lContainer;
         addToViewTree(hostLView, lContainer);
     }
+    _locateOrCreateAnchorNode(lContainer, hostLView, hostTNode, slotValue);
     return new R3ViewContainerRef(lContainer, hostTNode, hostLView);
 }
+/**
+ * Creates and inserts a comment node that acts as an anchor for a view container.
+ *
+ * If the host is a regular element, we have to insert a comment node manually which will
+ * be used as an anchor when inserting elements. In this specific case we use low-level DOM
+ * manipulation to insert it.
+ */
+function insertAnchorNode(hostLView, hostTNode) {
+    const renderer = hostLView[RENDERER];
+    ngDevMode && ngDevMode.rendererCreateComment++;
+    const commentNode = renderer.createComment(ngDevMode ? 'container' : '');
+    const hostNative = getNativeByTNode(hostTNode, hostLView);
+    const parentOfHostNative = nativeParentNode(renderer, hostNative);
+    nativeInsertBefore(renderer, parentOfHostNative, commentNode, nativeNextSibling(renderer, hostNative), false);
+    return commentNode;
+}
+let _locateOrCreateAnchorNode = createAnchorNode;
+/**
+ * Regular creation mode: an anchor is created and
+ * assigned to the `lContainer[NATIVE]` slot.
+ */
+function createAnchorNode(lContainer, hostLView, hostTNode, slotValue) {
+    // We already have a native element (anchor) set, return.
+    if (lContainer[NATIVE])
+        return;
+    let commentNode;
+    // If the host is an element container, the native host element is guaranteed to be a
+    // comment and we can reuse that comment as anchor element for the new LContainer.
+    // The comment node in question is already part of the DOM structure so we don't need to append
+    // it again.
+    if (hostTNode.type & 8 /* TNodeType.ElementContainer */) {
+        commentNode = unwrapRNode(slotValue);
+    }
+    else {
+        commentNode = insertAnchorNode(hostLView, hostTNode);
+    }
+    lContainer[NATIVE] = commentNode;
+}
+/**
+ * Hydration logic that looks up:
+ *  - an anchor node in the DOM and stores the node in `lContainer[NATIVE]`
+ *  - all dehydrated views in this container and puts them into `lContainer[DEHYDRATED_VIEWS]`
+ */
+function locateOrCreateAnchorNode(lContainer, hostLView, hostTNode, slotValue) {
+    // We already have a native element (anchor) set and the process
+    // of finding dehydrated views happened (so the `lContainer[DEHYDRATED_VIEWS]`
+    // is not null), exit early.
+    if (lContainer[NATIVE] && lContainer[DEHYDRATED_VIEWS])
+        return;
+    const hydrationInfo = hostLView[HYDRATION];
+    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 currentRNode = getSegmentHead(hydrationInfo, noOffsetIndex);
+    const serializedViews = hydrationInfo.data[CONTAINERS]?.[noOffsetIndex];
+    ngDevMode &&
+        assertDefined(serializedViews, 'Unexpected state: no hydration info available for a given TNode, ' +
+            'which represents a view container.');
+    const [commentNode, dehydratedViews] = locateDehydratedViewsInContainer(currentRNode, serializedViews);
+    if (ngDevMode) {
+        validateMatchingNode(commentNode, Node.COMMENT_NODE, null, hostLView, hostTNode, true);
+        // Do not throw in case this node is already claimed (thus `false` as a second
+        // argument). If this container is created based on an `<ng-template>`, the comment
+        // node would be already claimed from the `template` instruction. If an element acts
+        // as an anchor (e.g. <div #vcRef>), a separate comment node would be created/located,
+        // so we need to claim it here.
+        markRNodeAsClaimedByHydration(commentNode, false);
+    }
+    lContainer[NATIVE] = commentNode;
+    lContainer[DEHYDRATED_VIEWS] = dehydratedViews;
+}
+function enableLocateOrCreateContainerRefImpl() {
+    _locateOrCreateAnchorNode = locateOrCreateAnchorNode;
+}
 
 class LQuery_ {
     constructor(queryList) {
@@ -23365,6 +24606,7 @@ function resetCompiledComponents() {
     ownerNgModule = new WeakMap();
     verifiedNgModule = new WeakMap();
     moduleQueue.length = 0;
+    GENERATED_COMP_IDS.clear();
 }
 /**
  * Computes the combined declarations of explicit declarations, as well as declarations inherited by
@@ -23952,7 +25194,7 @@ class TestBedCompiler {
         // every component.
         this.componentToModuleScope.clear();
         const parentInjector = this.platform.injector;
-        this.testModuleRef = new ɵRender3NgModuleRef(this.testModuleType, parentInjector);
+        this.testModuleRef = new ɵRender3NgModuleRef(this.testModuleType, parentInjector, []);
         // ApplicationInitStatus.runInitializers() is marked @internal to core.
         // Cast it to any before accessing it.
         this.testModuleRef.injector.get(ApplicationInitStatus).runInitializers();
@@ -24211,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)) {
@@ -24222,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);
@@ -24238,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
@@ -24376,7 +25623,7 @@ class TestBedCompiler {
         });
         const ngZone = new NgZone({ enableLongStackTrace: true });
         const providers = [
-            { provide: NgZone, useValue: ngZone },
+            ɵprovideNgZoneChangeDetection(ngZone),
             { provide: Compiler, useFactory: () => new R3TestCompiler(this) },
             ...this.providers,
             ...this.providerOverrides,