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

package/fesm2020/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v16.0.0-next.2
+ * @license Angular v16.0.0-next.3
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -557,6 +557,7 @@ function ngDevModeResetPerfCounters() {
         rendererCreateComment: 0,
         hydratedNodes: 0,
         hydratedComponents: 0,
+        dehydratedViewsRemoved: 0,
     };
     // Make sure to refer to ngDevMode as ['ngDevMode'] for closure.
     const allowNgDevModeTrue = locationString.indexOf('ngDevMode=false') === -1;
@@ -938,238 +939,847 @@ 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;
 /**
- * Create a component definition object.
- *
- *
- * # Example
- * ```
- * class MyDirective {
- *   // Generated by Angular Template Compiler
- *   // [Symbol] syntax will not be supported by TypeScript until v2.7
- *   static ɵcmp = defineComponent({
- *     ...
- *   });
- * }
- * ```
- * @codeGenApi
- */
-function ɵɵdefineComponent(componentDefinition) {
-    return noSideEffects(() => {
-        // 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 def = {
-            type: type,
-            providersResolver: null,
-            decls: componentDefinition.decls,
-            vars: componentDefinition.vars,
-            factory: null,
-            template: componentDefinition.template || null,
-            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,
-            getStandaloneInjector: null,
-            selectors: componentDefinition.selectors || EMPTY_ARRAY,
-            viewQuery: componentDefinition.viewQuery || null,
-            features: componentDefinition.features || null,
-            data: componentDefinition.data || {},
-            encapsulation: componentDefinition.encapsulation || ViewEncapsulation$1.Emulated,
-            id: `c${componentDefCount++}`,
-            styles: componentDefinition.styles || EMPTY_ARRAY,
-            _: null,
-            setInput: null,
-            schemas: componentDefinition.schemas || null,
-            tView: null,
-            findHostDirectiveDefs: null,
-            hostDirectives: null,
-        };
-        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;
-        return def;
-    });
-}
-/**
- * Generated next to NgModules to monkey-patch directive and pipe references onto a component's
- * definition, when generating a direct reference in the component file would otherwise create an
- * import cycle.
- *
- * See [this explanation](https://hackmd.io/Odw80D0pR6yfsOjg_7XCJg?view) for more details.
- *
- * @codeGenApi
- */
-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);
-}
-function extractDirectiveDef(type) {
-    return getComponentDef(type) || getDirectiveDef(type);
-}
-function nonNull(value) {
-    return value !== null;
-}
-/**
- * @codeGenApi
- */
-function ɵɵdefineNgModule(def) {
-    return noSideEffects(() => {
-        const res = {
-            type: def.type,
-            bootstrap: def.bootstrap || EMPTY_ARRAY,
-            declarations: def.declarations || EMPTY_ARRAY,
-            imports: def.imports || EMPTY_ARRAY,
-            exports: def.exports || EMPTY_ARRAY,
-            transitiveCompileScopes: null,
-            schemas: def.schemas || null,
-            id: def.id || null,
-        };
-        return res;
-    });
-}
-/**
- * Adds the module metadata that is necessary to compute the module's transitive scope to an
- * existing module definition.
+ * Returns an index of `classToSearch` in `className` taking token boundaries into account.
  *
- * Scope metadata of modules is not used in production builds, so calls to this function can be
- * marked pure to tree-shake it from the bundle, allowing for all referenced declarations
- * to become eligible for tree-shaking as well.
+ * `classIndexOf('AB A', 'A', 0)` will be 3 (not 0 since `AB!==A`)
  *
- * @codeGenApi
+ * @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 ɵɵsetNgModuleScope(type, scope) {
-    return noSideEffects(() => {
-        const ngModuleDef = getNgModuleDef(type, true);
-        ngModuleDef.declarations = scope.declarations || EMPTY_ARRAY;
-        ngModuleDef.imports = scope.imports || EMPTY_ARRAY;
-        ngModuleDef.exports = scope.exports || EMPTY_ARRAY;
-    });
+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;
+    }
 }
+
 /**
- * Inverts an inputs or outputs lookup such that the keys, which were the
- * minified keys, are part of the values, and the values are parsed so that
- * the publicName of the property is the new key
- *
- * e.g. for
- *
- * ```
- * class Comp {
- *   @Input()
- *   propName1: string;
- *
- *   @Input('publicName2')
- *   declaredPropName2: number;
- * }
- * ```
- *
- * will be serialized as
- *
- * ```
- * {
- *   propName1: 'propName1',
- *   declaredPropName2: ['publicName2', 'declaredPropName2'],
- * }
- * ```
- *
- * which is than translated by the minifier as:
+ * Assigns all attribute values to the provided element via the inferred renderer.
  *
- * ```
- * {
- *   minifiedPropName1: 'propName1',
- *   minifiedPropName2: ['publicName2', 'declaredPropName2'],
- * }
- * ```
+ * This function accepts two forms of attribute entries:
  *
- * becomes: (public name => minifiedName)
+ * default: (key, value):
+ *  attrs = [key1, value1, key2, value2]
  *
- * ```
- * {
- *  'propName1': 'minifiedPropName1',
- *  'publicName2': 'minifiedPropName2',
- * }
- * ```
+ * namespaced: (NAMESPACE_MARKER, uri, name, value)
+ *  attrs = [NAMESPACE_MARKER, uri, name, value, NAMESPACE_MARKER, uri, name, value]
  *
- * Optionally the function can take `secondary` which will result in: (public name => declared name)
+ * 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.
  *
- * ```
- * {
- *  'propName1': 'propName1',
- *  'publicName2': 'declaredPropName2',
- * }
- * ```
+ * 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 invertObject(obj, secondary) {
-    if (obj == null)
-        return EMPTY_OBJ;
-    const newLookup = {};
-    for (const minifiedKey in obj) {
-        if (obj.hasOwnProperty(minifiedKey)) {
-            let publicName = obj[minifiedKey];
-            let declaredName = publicName;
-            if (Array.isArray(publicName)) {
-                declaredName = publicName[1];
-                publicName = publicName[0];
+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;
             }
-            newLookup[publicName] = minifiedKey;
-            if (secondary) {
-                (secondary[publicName] = declaredName);
+            // 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++;
         }
     }
-    return newLookup;
+    // 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;
 }
 /**
- * Create a directive definition object.
- *
- * # Example
- * ```ts
- * class MyDirective {
- *   // Generated by Angular Template Compiler
- *   // [Symbol] syntax will not be supported by TypeScript until v2.7
- *   static ɵdir = ɵɵdefineDirective({
- *     ...
- *   });
- * }
- * ```
- *
- * @codeGenApi
+ * 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`).
  */
-const ɵɵdefineDirective = ɵɵdefineComponent;
-/**
- * Create a pipe definition object.
- *
+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;
+    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;
+}
+/**
+ * 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 MyComponent {
+ *   // Generated by Angular Template Compiler
+ *   // [Symbol] syntax will not be supported by TypeScript until v2.7
+ *   static ɵcmp = defineComponent({
+ *     ...
+ *   });
+ * }
+ * ```
+ * @codeGenApi
+ */
+function ɵɵdefineComponent(componentDefinition) {
+    return noSideEffects(() => {
+        // Initialize ngDevMode. This must be the first statement in ɵɵdefineComponent.
+        // See the `initNgDevMode` docstring for more information.
+        (typeof ngDevMode === 'undefined' || ngDevMode) && initNgDevMode();
+        const baseDef = getNgDirectiveDef(componentDefinition);
+        const def = {
+            ...baseDef,
+            decls: componentDefinition.decls,
+            vars: componentDefinition.vars,
+            template: componentDefinition.template,
+            consts: componentDefinition.consts || null,
+            ngContentSelectors: componentDefinition.ngContentSelectors,
+            onPush: componentDefinition.changeDetection === ChangeDetectionStrategy.OnPush,
+            directiveDefs: null,
+            pipeDefs: null,
+            dependencies: baseDef.standalone && componentDefinition.dependencies || null,
+            getStandaloneInjector: null,
+            data: componentDefinition.data || {},
+            encapsulation: componentDefinition.encapsulation || ViewEncapsulation$1.Emulated,
+            styles: componentDefinition.styles || EMPTY_ARRAY,
+            _: null,
+            schemas: componentDefinition.schemas || null,
+            tView: null,
+            id: '',
+        };
+        initFeatures(def);
+        const dependencies = componentDefinition.dependencies;
+        def.directiveDefs = extractDefListOrFactory(dependencies, /* pipeDef */ false);
+        def.pipeDefs = extractDefListOrFactory(dependencies, /* pipeDef */ true);
+        def.id = getComponentId(def);
+        return def;
+    });
+}
+/**
+ * Generated next to NgModules to monkey-patch directive and pipe references onto a component's
+ * definition, when generating a direct reference in the component file would otherwise create an
+ * import cycle.
+ *
+ * See [this explanation](https://hackmd.io/Odw80D0pR6yfsOjg_7XCJg?view) for more details.
+ *
+ * @codeGenApi
+ */
+function ɵɵsetComponentScope(type, directives, pipes) {
+    const def = type.ɵcmp;
+    def.directiveDefs = extractDefListOrFactory(directives, /* pipeDef */ false);
+    def.pipeDefs = extractDefListOrFactory(pipes, /* pipeDef */ true);
+}
+function extractDirectiveDef(type) {
+    return getComponentDef(type) || getDirectiveDef(type);
+}
+function nonNull(value) {
+    return value !== null;
+}
+/**
+ * @codeGenApi
+ */
+function ɵɵdefineNgModule(def) {
+    return noSideEffects(() => {
+        const res = {
+            type: def.type,
+            bootstrap: def.bootstrap || EMPTY_ARRAY,
+            declarations: def.declarations || EMPTY_ARRAY,
+            imports: def.imports || EMPTY_ARRAY,
+            exports: def.exports || EMPTY_ARRAY,
+            transitiveCompileScopes: null,
+            schemas: def.schemas || null,
+            id: def.id || null,
+        };
+        return res;
+    });
+}
+/**
+ * Adds the module metadata that is necessary to compute the module's transitive scope to an
+ * existing module definition.
+ *
+ * Scope metadata of modules is not used in production builds, so calls to this function can be
+ * marked pure to tree-shake it from the bundle, allowing for all referenced declarations
+ * to become eligible for tree-shaking as well.
+ *
+ * @codeGenApi
+ */
+function ɵɵsetNgModuleScope(type, scope) {
+    return noSideEffects(() => {
+        const ngModuleDef = getNgModuleDef(type, true);
+        ngModuleDef.declarations = scope.declarations || EMPTY_ARRAY;
+        ngModuleDef.imports = scope.imports || EMPTY_ARRAY;
+        ngModuleDef.exports = scope.exports || EMPTY_ARRAY;
+    });
+}
+/**
+ * Inverts an inputs or outputs lookup such that the keys, which were the
+ * minified keys, are part of the values, and the values are parsed so that
+ * the publicName of the property is the new key
+ *
+ * e.g. for
+ *
+ * ```
+ * class Comp {
+ *   @Input()
+ *   propName1: string;
+ *
+ *   @Input('publicName2')
+ *   declaredPropName2: number;
+ * }
+ * ```
+ *
+ * will be serialized as
+ *
+ * ```
+ * {
+ *   propName1: 'propName1',
+ *   declaredPropName2: ['publicName2', 'declaredPropName2'],
+ * }
+ * ```
+ *
+ * which is than translated by the minifier as:
+ *
+ * ```
+ * {
+ *   minifiedPropName1: 'propName1',
+ *   minifiedPropName2: ['publicName2', 'declaredPropName2'],
+ * }
+ * ```
+ *
+ * becomes: (public name => minifiedName)
+ *
+ * ```
+ * {
+ *  'propName1': 'minifiedPropName1',
+ *  'publicName2': 'minifiedPropName2',
+ * }
+ * ```
+ *
+ * Optionally the function can take `secondary` which will result in: (public name => declared name)
+ *
+ * ```
+ * {
+ *  'propName1': 'propName1',
+ *  'publicName2': 'declaredPropName2',
+ * }
+ * ```
+ *
+
+ */
+function invertObject(obj, secondary) {
+    if (obj == null)
+        return EMPTY_OBJ;
+    const newLookup = {};
+    for (const minifiedKey in obj) {
+        if (obj.hasOwnProperty(minifiedKey)) {
+            let publicName = obj[minifiedKey];
+            let declaredName = publicName;
+            if (Array.isArray(publicName)) {
+                declaredName = publicName[1];
+                publicName = publicName[0];
+            }
+            newLookup[publicName] = minifiedKey;
+            if (secondary) {
+                (secondary[publicName] = declaredName);
+            }
+        }
+    }
+    return newLookup;
+}
+/**
+ * Create a directive definition object.
+ *
+ * # Example
+ * ```ts
+ * class MyDirective {
+ *   // Generated by Angular Template Compiler
+ *   // [Symbol] syntax will not be supported by TypeScript until v2.7
+ *   static ɵdir = ɵɵdefineDirective({
+ *     ...
+ *   });
+ * }
+ * ```
+ *
+ * @codeGenApi
+ */
+function ɵɵdefineDirective(directiveDefinition) {
+    return noSideEffects(() => {
+        const def = getNgDirectiveDef(directiveDefinition);
+        initFeatures(def);
+        return def;
+    });
+}
+/**
+ * Create a pipe definition object.
+ *
  * # Example
  * ```
  * class MyPipe implements PipeTransform {
@@ -1226,6 +1836,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.
@@ -1294,13 +1997,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;
@@ -1329,7 +2033,7 @@ 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;
@@ -1786,7 +2490,7 @@ function getBindingsEnabled() {
  * Returns true if currently inside a skip hydration block.
  * @returns boolean
  */
-function isInSkipHydrationBlock() {
+function isInSkipHydrationBlock$1() {
     return instructionState.skipHydrationRootTNode !== null;
 }
 /**
@@ -2704,230 +3408,30 @@ function hasClassInput(tNode) {
  * ```
  *
  * In the above case it is necessary to write the reconciled styling information into the
- * directive's input.
- *
- * @param tNode
- */
-function hasStyleInput(tNode) {
-    return (tNode.flags & 16 /* TNodeFlags.hasStyleInput */) !== 0;
-}
-
-function assertTNodeType(tNode, expectedTypes, message) {
-    assertDefined(tNode, 'should be called with a TNode');
-    if ((tNode.type & expectedTypes) === 0) {
-        throwError(message ||
-            `Expected [${toTNodeTypeAsString(expectedTypes)}] but got ${toTNodeTypeAsString(tNode.type)}.`);
-    }
-}
-function assertPureTNodeType(type) {
-    if (!(type === 2 /* TNodeType.Element */ || //
-        type === 1 /* TNodeType.Text */ || //
-        type === 4 /* TNodeType.Container */ || //
-        type === 8 /* TNodeType.ElementContainer */ || //
-        type === 32 /* TNodeType.Icu */ || //
-        type === 16 /* TNodeType.Projection */ || //
-        type === 64 /* TNodeType.Placeholder */)) {
-        throwError(`Expected TNodeType to have only a single type selected, but got ${toTNodeTypeAsString(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);
+ * directive's input.
+ *
+ * @param tNode
+ */
+function hasStyleInput(tNode) {
+    return (tNode.flags & 16 /* TNodeFlags.hasStyleInput */) !== 0;
+}
+
+function assertTNodeType(tNode, expectedTypes, message) {
+    assertDefined(tNode, 'should be called with a TNode');
+    if ((tNode.type & expectedTypes) === 0) {
+        throwError(message ||
+            `Expected [${toTNodeTypeAsString(expectedTypes)}] but got ${toTNodeTypeAsString(tNode.type)}.`);
     }
-    if (value !== null) {
-        dst.splice(i++, 0, value);
+}
+function assertPureTNodeType(type) {
+    if (!(type === 2 /* TNodeType.Element */ || //
+        type === 1 /* TNodeType.Text */ || //
+        type === 4 /* TNodeType.Container */ || //
+        type === 8 /* TNodeType.ElementContainer */ || //
+        type === 32 /* TNodeType.Icu */ || //
+        type === 16 /* TNodeType.Projection */ || //
+        type === 64 /* TNodeType.Placeholder */)) {
+        throwError(`Expected TNodeType to have only a single type selected, but got ${toTNodeTypeAsString(type)}.`);
     }
 }
 
@@ -8239,35 +8743,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
@@ -8438,990 +8948,637 @@ function retrieveTransferredState(doc, appId) {
     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.
+ * Keys within serialized view data structure to represent various
+ * parts. See the `SerializedView` interface below for additional information.
  */
-class ComponentFactoryResolver$1 {
-}
-ComponentFactoryResolver$1.NULL = ( /* @__PURE__ */new _NullComponentFactoryResolver());
+const ELEMENT_CONTAINERS = 'e';
+const TEMPLATES = 't';
+const CONTAINERS = 'c';
+const NUM_ROOT_NODES = 'r';
+const TEMPLATE_ID = 'i'; // as it's also an "id"
 
-/**
- * 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;
-    }
-}
-/**
- * @internal
- * @nocollapse
+/**
+ * The name of the key used in the TransferState collection,
+ * where hydration information is located.
  */
-ElementRef.__NG_ELEMENT_ID__ = injectElementRef;
+const TRANSFER_STATE_TOKEN_ID = '__ɵnghData__';
 /**
- * Unwraps `ElementRef` and return the `nativeElement`.
- *
- * @param value value to unwrap
- * @returns `nativeElement` if `ElementRef` otherwise returns value as is.
+ * Lookup key used to reference DOM hydration data (ngh) in `TransferState`.
  */
-function unwrapElementRef(value) {
-    return value instanceof ElementRef ? value.nativeElement : value;
-}
-
+const NGH_DATA_KEY = makeStateKey(TRANSFER_STATE_TOKEN_ID);
 /**
- * Creates and initializes a custom renderer that implements the `Renderer2` base class.
- *
- * @publicApi
+ * 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.
  */
-class RendererFactory2 {
-}
+const NGH_ATTR_NAME = 'ngh';
 /**
- * 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.
+ * 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 Renderer2 {
+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;
 }
 /**
- * @internal
- * @nocollapse
+ * Sets the implementation for the `retrieveHydrationInfo` function.
  */
-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];
+function enableRetrieveHydrationInfoImpl() {
+    _retrieveHydrationInfoImpl = retrieveHydrationInfoImpl;
 }
-
 /**
- * Sanitizer is used by the views to sanitize potentially dangerous values.
- *
- * @publicApi
+ * Retrieves hydration info by reading the value from the `ngh` attribute
+ * and accessing a corresponding slot in TransferState storage.
  */
-class Sanitizer {
+function retrieveHydrationInfo(rNode, injector) {
+    return _retrieveHydrationInfoImpl(rNode, injector);
 }
-/** @nocollapse */
-Sanitizer.ɵprov = ɵɵdefineInjectable({
-    token: Sanitizer,
-    providedIn: 'root',
-    factory: () => null,
-});
-
 /**
- * @description Represents the version of Angular
- *
- * @publicApi
+ * 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.
  */
-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 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;
 }
-/**
- * @publicApi
- */
-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 getOriginalError(error) {
-    return error[ERROR_ORIGINAL_ERROR];
+function getTextNodeContent(node) {
+    return node.textContent?.replace(/\s/gm, '');
 }
-
 /**
- * Provides a hook for centralized exception handling.
- *
- * 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 {}
- * ```
+ * 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.
  *
- * @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$1 = typeof ngDevMode === 'undefined' || !!ngDevMode;
-/**
- * Internal token that specifies whether hydration is enabled.
- */
-const IS_HYDRATION_FEATURE_ENABLED = new InjectionToken(NG_DEV_MODE$1 ? 'IS_HYDRATION_FEATURE_ENABLED' : '');
-// By default (in client rendering mode), we remove all the contents
-// of the host element and render an application after that.
-const PRESERVE_HOST_CONTENT_DEFAULT = false;
 /**
- * Internal token that indicates whether host element content should be
- * retained during the bootstrap.
+ * Marks a node as "claimed" by hydration process.
+ * This is needed to make assessments in tests whether
+ * the hydration process handled all nodes.
  */
-const PRESERVE_HOST_CONTENT = new InjectionToken(NG_DEV_MODE$1 ? '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;
+function markRNodeAsClaimedByHydration(node, checkIfAlreadyClaimed = true) {
+    if (!ngDevMode) {
+        throw new Error('Calling `markRNodeAsClaimedByHydration` in prod mode ' +
+            'is not supported and likely a mistake.');
     }
-    catch (e) {
-        return '[ERROR] Exception while trying to serialize the value';
+    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;
 }
-
 /**
- *
- * @codeGenApi
+ * 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>).
  */
-function ɵɵresolveWindow(element) {
-    return element.ownerDocument.defaultView;
+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;
+}
+function getSerializedContainerViews(hydrationInfo, index) {
+    return hydrationInfo.data[CONTAINERS]?.[index] ?? null;
 }
 /**
- *
- * @codeGenApi
+ * 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 ɵɵresolveDocument(element) {
-    return element.ownerDocument;
+function calcSerializedContainerSize(hydrationInfo, index) {
+    const views = getSerializedContainerViews(hydrationInfo, index) ?? [];
+    let numNodes = 0;
+    for (let view of views) {
+        numNodes += view[NUM_ROOT_NODES];
+    }
+    return numNodes;
 }
+
 /**
+ * Represents a component created by a `ComponentFactory`.
+ * Provides access to the component instance and related objects,
+ * and provides the means of destroying the instance.
  *
- * @codeGenApi
+ * @publicApi
  */
-function ɵɵresolveBody(element) {
-    return element.ownerDocument.body;
+class ComponentRef$1 {
 }
 /**
- * The special delimiter we use to separate property names, prefixes, and suffixes
- * in property binding metadata. See storeBindingMetadata().
+ * 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.
  *
- * We intentionally use the Unicode "REPLACEMENT CHARACTER" (U+FFFD) as a delimiter
- * because it is a very uncommon character that is unlikely to be part of a user's
- * property names or interpolation strings. If it is in fact used in a property
- * binding, DebugElement.properties will not return the correct value for that
- * binding. However, there should be no runtime effect for real applications.
+ * @see [Dynamic Components](guide/dynamic-component-loader)
  *
- * This character is typically rendered as a question mark inside of a diamond.
- * See https://en.wikipedia.org/wiki/Specials_(Unicode_block)
+ * @publicApi
  *
+ * @deprecated Angular no longer requires Component factories. Please use other APIs where
+ *     Component class can be used directly.
  */
-const INTERPOLATION_DELIMITER = `�`;
-/**
- * Unwrap a value which might be behind a closure (for forward declaration reasons).
- */
-function maybeUnwrapFn(value) {
-    if (value instanceof Function) {
-        return value();
-    }
-    else {
-        return value;
-    }
+class ComponentFactory$1 {
 }
 
-/** Verifies that a given type is a Standalone Component. */
-function assertStandaloneComponentType(type) {
-    assertComponentDef(type);
-    const componentDef = getComponentDef(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.`);
-    }
-}
-/** Verifies whether a given type is a component */
-function assertComponentDef(type) {
-    if (!getComponentDef(type)) {
-        throw new RuntimeError(906 /* RuntimeErrorCode.MISSING_GENERATED_DEF */, `The ${stringifyForError(type)} is not an Angular component, ` +
-            `make sure it has the \`@Component\` decorator.`);
-    }
-}
-/** 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));
 }
-
-const NG_TEMPLATE_SELECTOR = 'ng-template';
 /**
- * Search the `TAttributes` to see if it contains `cssClassToMatch` (case insensitive)
+ * A wrapper around a native element inside of a View.
  *
- * @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`.
+ * 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
  */
-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;
-        }
+// 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;
     }
-    return false;
 }
 /**
- * Checks whether the `tNode` represents an inline template (e.g. `*ngFor`).
+ * @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;
+}
+
+/**
+ * Creates and initializes a custom renderer that implements the `Renderer2` base class.
+ *
+ * @publicApi
+ */
+class RendererFactory2 {
+}
+/**
+ * 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.3');
+
+// 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;
-        }
-    }
-    return nodeAttrs.length;
+
+const NG_DEV_MODE$1 = typeof ngDevMode === 'undefined' || !!ngDevMode;
+/**
+ * Internal token that specifies whether hydration is enabled.
+ */
+const IS_HYDRATION_FEATURE_ENABLED = new InjectionToken(NG_DEV_MODE$1 ? 'IS_HYDRATION_FEATURE_ENABLED' : '');
+// By default (in client rendering mode), we remove all the contents
+// of the host element and render an application after that.
+const PRESERVE_HOST_CONTENT_DEFAULT = false;
+/**
+ * Internal token that indicates whether host element content should be
+ * retained during the bootstrap.
+ */
+const PRESERVE_HOST_CONTENT = new InjectionToken(NG_DEV_MODE$1 ? '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 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++;
-        }
+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 -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.
+ *
+ * @codeGenApi
  */
-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 ɵɵresolveWindow(element) {
+    return element.ownerDocument.defaultView;
 }
-function maybeWrapInNotSelector(isNegativeMode, chunk) {
-    return isNegativeMode ? ':not(' + chunk.trim() + ')' : chunk;
+/**
+ *
+ * @codeGenApi
+ */
+function ɵɵresolveDocument(element) {
+    return element.ownerDocument;
 }
-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;
+/**
+ *
+ * @codeGenApi
+ */
+function ɵɵresolveBody(element) {
+    return element.ownerDocument.body;
 }
 /**
- * Generates string representation of CSS selector in parsed form.
+ * The special delimiter we use to separate property names, prefixes, and suffixes
+ * in property binding metadata. See storeBindingMetadata().
  *
- * 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.
+ * We intentionally use the Unicode "REPLACEMENT CHARACTER" (U+FFFD) as a delimiter
+ * because it is a very uncommon character that is unlikely to be part of a user's
+ * property names or interpolation strings. If it is in fact used in a property
+ * binding, DebugElement.properties will not return the correct value for that
+ * binding. However, there should be no runtime effect for real applications.
+ *
+ * This character is typically rendered as a question mark inside of a diamond.
+ * See https://en.wikipedia.org/wiki/Specials_(Unicode_block)
  *
- * @param selectorList selector in parsed form
- * @returns string representation of a given selector
  */
-function stringifyCSSSelectorList(selectorList) {
-    return selectorList.map(stringifyCSSSelector).join(',');
+const INTERPOLATION_DELIMITER = `�`;
+/**
+ * Unwrap a value which might be behind a closure (for forward declaration reasons).
+ */
+function maybeUnwrapFn(value) {
+    if (value instanceof Function) {
+        return value();
+    }
+    else {
+        return value;
+    }
+}
+
+/** Verifies that a given type is a Standalone Component. */
+function assertStandaloneComponentType(type) {
+    assertComponentDef(type);
+    const componentDef = getComponentDef(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.`);
+    }
+}
+/** Verifies whether a given type is a component */
+function assertComponentDef(type) {
+    if (!getComponentDef(type)) {
+        throw new RuntimeError(906 /* RuntimeErrorCode.MISSING_GENERATED_DEF */, `The ${stringifyForError(type)} is not an Angular component, ` +
+            `make sure it has the \`@Component\` decorator.`);
+    }
+}
+/** 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)}`);
+}
+/** 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);
+}
+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. */
@@ -9480,6 +9637,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.
  *
@@ -10918,7 +11102,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;
 }
@@ -10935,7 +11119,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,
@@ -10974,7 +11158,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.
@@ -10994,23 +11179,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$1.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.
@@ -11022,9 +11242,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);
@@ -11742,7 +11962,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.');
@@ -12564,7 +12785,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
@@ -13849,92 +14070,15 @@ function detectChanges(component) {
     detectChangesInternal(view[TVIEW], view, component);
 }
 
-function templateFirstCreatePass(index, tView, lView, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex) {
-    ngDevMode && assertFirstCreatePass(tView);
-    ngDevMode && ngDevMode.firstCreatePass++;
-    const tViewConsts = tView.consts;
-    // 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);
-    if (tView.queries !== null) {
-        tView.queries.template(tView, tNode);
-        embeddedTView.queries = tView.queries.embeddedTView(tNode);
-    }
-    return tNode;
-}
-/**
- * Creates an LContainer for an ng-template (dynamically-inserted view), e.g.
- *
- * <ng-template #foo>
- *    <div></div>
- * </ng-template>
- *
- * @param index The index of the container in the data array
- * @param templateFn Inline template
- * @param decls The number of nodes, local refs, and pipes for this template
- * @param vars The number of bindings for this template
- * @param tagName The name of the container element, if applicable
- * @param attrsIndex Index of template attributes in the `consts` array.
- * @param localRefs Index of the local references in the `consts` array.
- * @param localRefExtractor A function which extracts local-refs values from the template.
- *        Defaults to the current element associated with the local-ref.
- *
- * @codeGenApi
- */
-function ɵɵtemplate(index, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex, localRefExtractor) {
-    const lView = getLView();
-    const tView = getTView();
-    const adjustedIndex = index + HEADER_OFFSET;
-    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);
-    attachPatchData(comment, lView);
-    addToViewTree(lView, lView[adjustedIndex] = createLContainer(comment, lView, comment, tNode));
-    if (isDirectiveHost(tNode)) {
-        createDirectivesInstances(tView, lView, tNode);
-    }
-    if (localRefsIndex != null) {
-        saveResolvedLocalsInData(lView, tNode, localRefExtractor);
-    }
-}
-
-/** Store a value in the `data` at a given `index`. */
-function store(tView, lView, index, value) {
-    // We don't store any static data for local variables, so the first time
-    // we see the template, we should store as null to avoid a sparse array
-    if (index >= tView.data.length) {
-        tView.data[index] = null;
-        tView.blueprint[index] = null;
-    }
-    lView[index] = value;
-}
-/**
- * Retrieves a local reference from the current contextViewData.
- *
- * If the reference to retrieve is in a parent view, this instruction is used in conjunction
- * with a nextContext() call, which walks up the tree and updates the contextViewData instance.
- *
- * @param index The index of the local ref in contextViewData.
- *
- * @codeGenApi
- */
-function ɵɵreference(index) {
-    const contextLView = getContextLView();
-    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) {
+    validateNodeExists(node);
     if (node.nodeType !== nodeType ||
-        (node.nodeType === Node.ELEMENT_NODE &&
-            node.tagName.toLowerCase() !== tagName?.toLowerCase())) {
+        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.`);
     }
@@ -13943,25 +14087,23 @@ function validateMatchingNode(node, nodeType, tagName, lView, tNode) {
  * Verifies whether next sibling node exists.
  */
 function validateSiblingNodeExists(node) {
+    validateNodeExists(node);
     if (!node.nextSibling) {
         // TODO: improve error message and use RuntimeError instead.
         throw new Error(`Unexpected state: insufficient number of sibling nodes.`);
     }
 }
+function validateNodeExists(node) {
+    if (!node) {
+        // TODO: improve error message and use RuntimeError instead.
+        throw new Error(`Hydration expected an element to be present at this location.`);
+    }
+}
 
 /** 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.
  *
@@ -13985,32 +14127,173 @@ function locateNextRNode(hydrationInfo, tView, lView, tNode) {
         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;
+            const noOffsetParentIndex = tNode.parent.index - HEADER_OFFSET;
+            native = getSegmentHead(hydrationInfo, noOffsetParentIndex);
         }
         else {
+            let previousRElement = getNativeByTNode(previousTNode, lView);
             if (previousTNodeParent) {
                 native = previousRElement.firstChild;
             }
             else {
-                native = previousRElement.nextSibling;
+                // 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 = previousTNode.index - HEADER_OFFSET;
+                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.
+ * 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;
+}
+
+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, ssrId);
+    if (tView.queries !== null) {
+        tView.queries.template(tView, tNode);
+        embeddedTView.queries = tView.queries.embeddedTView(tNode);
+    }
+    return tNode;
+}
+/**
+ * Creates an LContainer for an ng-template (dynamically-inserted view), e.g.
+ *
+ * <ng-template #foo>
+ *    <div></div>
+ * </ng-template>
+ *
+ * @param index The index of the container in the data array
+ * @param templateFn Inline template
+ * @param decls The number of nodes, local refs, and pipes for this template
+ * @param vars The number of bindings for this template
+ * @param tagName The name of the container element, if applicable
+ * @param attrsIndex Index of template attributes in the `consts` array.
+ * @param localRefs Index of the local references in the `consts` array.
+ * @param localRefExtractor A function which extracts local-refs values from the template.
+ *        Defaults to the current element associated with the local-ref.
+ *
+ * @codeGenApi
+ */
+function ɵɵtemplate(index, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex, localRefExtractor) {
+    const lView = getLView();
+    const tView = getTView();
+    const adjustedIndex = index + HEADER_OFFSET;
+    const tNode = tView.firstCreatePass ? templateFirstCreatePass(adjustedIndex, tView, lView, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex) :
+        tView.data[adjustedIndex];
+    setCurrentTNode(tNode, false);
+    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)) {
+        createDirectivesInstances(tView, lView, tNode);
+    }
+    if (localRefsIndex != null) {
+        saveResolvedLocalsInData(lView, tNode, localRefExtractor);
+    }
+}
+let _locateOrCreateContainerAnchor = createContainerAnchorImpl;
+/**
+ * Regular creation mode for LContainers and their anchor (comment) nodes.
  */
-function siblingAfter(skip, from) {
-    let currentNode = from;
-    for (let i = 0; i < skip; i++) {
-        ngDevMode && validateSiblingNodeExists(currentNode);
-        currentNode = currentNode.nextSibling;
+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();
+    lastNodeWasCreated(isNodeCreationMode);
+    // Regular creation mode.
+    if (isNodeCreationMode) {
+        return createContainerAnchorImpl(tView, lView, tNode, index);
     }
-    return currentNode;
+    // Hydration mode, looking up existing elements in DOM.
+    const currentRNode = locateNextRNode(hydrationInfo, tView, lView, tNode);
+    ngDevMode && validateNodeExists(currentRNode);
+    const viewContainerSize = calcSerializedContainerSize(hydrationInfo, index);
+    // If this container is non-empty, store the first node as a segment head,
+    // otherwise, this node is an anchor and segment head doesn't exist (thus `null`).
+    const segmentHead = viewContainerSize > 0 ? currentRNode : null;
+    setSegmentHead(hydrationInfo, index, segmentHead);
+    const comment = siblingAfter(viewContainerSize, currentRNode);
+    if (ngDevMode) {
+        validateMatchingNode(comment, Node.COMMENT_NODE, null, lView, tNode);
+        markRNodeAsClaimedByHydration(comment);
+    }
+    return comment;
+}
+function enableLocateOrCreateContainerAnchorImpl() {
+    _locateOrCreateContainerAnchor = locateOrCreateContainerAnchorImpl;
+}
+
+/** Store a value in the `data` at a given `index`. */
+function store(tView, lView, index, value) {
+    // We don't store any static data for local variables, so the first time
+    // we see the template, we should store as null to avoid a sparse array
+    if (index >= tView.data.length) {
+        tView.data[index] = null;
+        tView.blueprint[index] = null;
+    }
+    lView[index] = value;
+}
+/**
+ * Retrieves a local reference from the current contextViewData.
+ *
+ * If the reference to retrieve is in a parent view, this instruction is used in conjunction
+ * with a nextContext() call, which walks up the tree and updates the contextViewData instance.
+ *
+ * @param index The index of the local ref in contextViewData.
+ *
+ * @codeGenApi
+ */
+function ɵɵreference(index) {
+    const contextLView = getContextLView();
+    return load(contextLView, HEADER_OFFSET + index);
 }
 
 /**
@@ -14039,6 +14322,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.
@@ -14124,7 +14422,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) {
@@ -14207,7 +14505,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());
 };
@@ -14215,9 +14513,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();
     lastNodeWasCreated(isNodeCreationMode);
     // Regular creation mode.
     if (isNodeCreationMode) {
@@ -14225,9 +14523,19 @@ 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)) {
@@ -14355,7 +14663,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) {
@@ -14363,21 +14671,20 @@ 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;
+    // If this container is non-empty, store the first node as a segment head,
+    // otherwise, this node is an anchor and segment head doesn't exist (thus `null`).
+    const segmentHead = ngContainerSize > 0 ? currentRNode : null;
+    setSegmentHead(hydrationInfo, index, segmentHead);
+    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() {
@@ -16735,7 +17042,7 @@ let _locateOrCreateTextNode = (tView, lView, tNode, value) => {
  */
 function locateOrCreateTextNodeImpl(tView, lView, tNode, value) {
     const hydrationInfo = lView[HYDRATION];
-    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock();
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1();
     lastNodeWasCreated(isNodeCreationMode);
     // Regular creation mode.
     if (isNodeCreationMode) {
@@ -20403,7 +20710,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.
@@ -20413,7 +20720,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
@@ -20434,7 +20741,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
@@ -20463,9 +20771,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();
@@ -20913,7 +21224,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.
@@ -21750,9 +22062,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;
@@ -21787,6 +22114,112 @@ 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++;
+        }
+    }
+}
+
+/**
+ * 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) {
+        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.
  *
@@ -21871,8 +22304,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) {
@@ -21942,11 +22376,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(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) {
@@ -21977,11 +22417,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);
@@ -22038,8 +22480,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
@@ -22053,31 +22493,94 @@ 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 isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock(hostTNode);
+    // Regular creation mode.
+    if (isNodeCreationMode) {
+        return createAnchorNode(lContainer, hostLView, hostTNode, slotValue);
+    }
+    // Hydration mode, looking up an anchor node and dehydrated views in DOM.
+    const index = hostTNode.index - HEADER_OFFSET;
+    const currentRNode = getSegmentHead(hydrationInfo, index);
+    const serializedViews = hydrationInfo.data[CONTAINERS]?.[index];
+    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);
+        // 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) {
@@ -23078,6 +23581,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
@@ -24839,6 +25343,63 @@ class NoopNgZone {
         return fn.apply(applyThis, applyArgs);
     }
 }
+/**
+ * Token used to drive ApplicationRef.isStable
+ *
+ * TODO: This should be moved entirely to NgZone (as a breaking change) so it can be tree-shakeable
+ * for `NoopNgZone` which is always just an `Observable` of `true`. Additionally, we should consider
+ * whether the property on `NgZone` should be `Observable` or `Signal`.
+ */
+const ZONE_IS_STABLE_OBSERVABLE = new InjectionToken(ngDevMode ? 'isStable Observable' : '', {
+    providedIn: 'root',
+    // TODO(atscott): Replace this with a suitable default like `new
+    // BehaviorSubject(true).asObservable`. Again, long term this won't exist on ApplicationRef at
+    // all but until we can remove it, we need a default value zoneless.
+    factory: isStableFactory,
+});
+function isStableFactory() {
+    const zone = inject(NgZone);
+    let _stable = true;
+    const isCurrentlyStable = new Observable((observer) => {
+        _stable = zone.isStable && !zone.hasPendingMacrotasks && !zone.hasPendingMicrotasks;
+        zone.runOutsideAngular(() => {
+            observer.next(_stable);
+            observer.complete();
+        });
+    });
+    const isStable = new Observable((observer) => {
+        // Create the subscription to onStable outside the Angular Zone so that
+        // the callback is run outside the Angular Zone.
+        let stableSub;
+        zone.runOutsideAngular(() => {
+            stableSub = zone.onStable.subscribe(() => {
+                NgZone.assertNotInAngularZone();
+                // Check whether there are no pending macro/micro tasks in the next tick
+                // to allow for NgZone to update the state.
+                scheduleMicroTask(() => {
+                    if (!_stable && !zone.hasPendingMacrotasks && !zone.hasPendingMicrotasks) {
+                        _stable = true;
+                        observer.next(true);
+                    }
+                });
+            });
+        });
+        const unstableSub = zone.onUnstable.subscribe(() => {
+            NgZone.assertInAngularZone();
+            if (_stable) {
+                _stable = false;
+                zone.runOutsideAngular(() => {
+                    observer.next(false);
+                });
+            }
+        });
+        return () => {
+            stableSub.unsubscribe();
+            unstableSub.unsubscribe();
+        };
+    });
+    return merge$1(isCurrentlyStable, isStable.pipe(share()));
+}
 
 /**
  * Internal injection token that can used to access an instance of a Testability class.
@@ -25276,13 +25837,13 @@ function internalCreateApplication(config) {
         // Create root application injector based on a set of providers configured at the platform
         // bootstrap level as well as providers passed to the bootstrap call by a user.
         const allAppProviders = [
-            { provide: NgZone, useValue: ngZone },
+            provideNgZoneChangeDetection(ngZone),
             ...(appProviders || []),
         ];
         const envInjector = createEnvironmentInjector(allAppProviders, platformInjector, 'Environment Injector');
         const exceptionHandler = envInjector.get(ErrorHandler, null);
         if (NG_DEV_MODE && !exceptionHandler) {
-            throw new RuntimeError(402 /* RuntimeErrorCode.ERROR_HANDLER_NOT_FOUND */, 'No `ErrorHandler` found in the Dependency Injection tree.');
+            throw new RuntimeError(402 /* RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP */, 'No `ErrorHandler` found in the Dependency Injection tree.');
         }
         let onErrorSubscription;
         ngZone.runOutsideAngular(() => {
@@ -25424,17 +25985,15 @@ class PlatformRef {
         // So we create a mini parent injector that just contains the new NgZone and
         // pass that as parent to the NgModuleFactory.
         const ngZone = getNgZone(options?.ngZone, getNgZoneOptions(options));
-        const providers = [{ provide: NgZone, useValue: ngZone }];
         // Note: Create ngZoneInjector within ngZone.run so that all of the instantiated services are
         // created within the Angular zone
         // Do not try to replace ngZone.run with ApplicationRef#run because ApplicationRef would then be
         // created outside of the Angular zone.
         return ngZone.run(() => {
-            const ngZoneInjector = Injector.create({ providers: providers, parent: this.injector, name: moduleFactory.moduleType.name });
-            const moduleRef = moduleFactory.create(ngZoneInjector);
+            const moduleRef = createNgModuleRefWithProviders(moduleFactory.moduleType, this.injector, provideNgZoneChangeDetection(ngZone));
             const exceptionHandler = moduleRef.injector.get(ErrorHandler, null);
-            if (!exceptionHandler) {
-                throw new RuntimeError(402 /* RuntimeErrorCode.ERROR_HANDLER_NOT_FOUND */, ngDevMode && 'No ErrorHandler. Is platform module (BrowserModule) included?');
+            if (NG_DEV_MODE && exceptionHandler === null) {
+                throw new RuntimeError(402 /* RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP */, 'No ErrorHandler. Is platform module (BrowserModule) included?');
             }
             ngZone.runOutsideAngular(() => {
                 const subscription = ngZone.onError.subscribe({
@@ -25587,7 +26146,6 @@ function optionsReducer(dst, objs) {
  * A reference to an Angular application running on a page.
  *
  * @usageNotes
- *
  * {@a is-stable-examples}
  * ### isStable examples and caveats
  *
@@ -25677,31 +26235,15 @@ function optionsReducer(dst, objs) {
  * @publicApi
  */
 class ApplicationRef {
-    /**
-     * Indicates whether this instance was destroyed.
-     */
-    get destroyed() {
-        return this._destroyed;
-    }
-    /**
-     * The `EnvironmentInjector` used to create this application.
-     */
-    get injector() {
-        return this._injector;
-    }
-    /** @internal */
-    constructor(_zone, _injector, _exceptionHandler) {
-        this._zone = _zone;
-        this._injector = _injector;
-        this._exceptionHandler = _exceptionHandler;
+    constructor() {
         /** @internal */
         this._bootstrapListeners = [];
         this._runningTick = false;
-        this._stable = true;
         this._destroyed = false;
         this._destroyListeners = [];
         /** @internal */
         this._views = [];
+        this.internalErrorHandler = inject(INTERNAL_APPLICATION_ERROR_HANDLER);
         /**
          * Get a list of component types registered to this application.
          * This list is populated even before the component is created.
@@ -25711,54 +26253,23 @@ class ApplicationRef {
          * Get a list of components registered to this application.
          */
         this.components = [];
-        this._onMicrotaskEmptySubscription = this._zone.onMicrotaskEmpty.subscribe({
-            next: () => {
-                this._zone.run(() => {
-                    this.tick();
-                });
-            }
-        });
-        const isCurrentlyStable = new Observable((observer) => {
-            this._stable = this._zone.isStable && !this._zone.hasPendingMacrotasks &&
-                !this._zone.hasPendingMicrotasks;
-            this._zone.runOutsideAngular(() => {
-                observer.next(this._stable);
-                observer.complete();
-            });
-        });
-        const isStable = new Observable((observer) => {
-            // Create the subscription to onStable outside the Angular Zone so that
-            // the callback is run outside the Angular Zone.
-            let stableSub;
-            this._zone.runOutsideAngular(() => {
-                stableSub = this._zone.onStable.subscribe(() => {
-                    NgZone.assertNotInAngularZone();
-                    // Check whether there are no pending macro/micro tasks in the next tick
-                    // to allow for NgZone to update the state.
-                    scheduleMicroTask(() => {
-                        if (!this._stable && !this._zone.hasPendingMacrotasks &&
-                            !this._zone.hasPendingMicrotasks) {
-                            this._stable = true;
-                            observer.next(true);
-                        }
-                    });
-                });
-            });
-            const unstableSub = this._zone.onUnstable.subscribe(() => {
-                NgZone.assertInAngularZone();
-                if (this._stable) {
-                    this._stable = false;
-                    this._zone.runOutsideAngular(() => {
-                        observer.next(false);
-                    });
-                }
-            });
-            return () => {
-                stableSub.unsubscribe();
-                unstableSub.unsubscribe();
-            };
-        });
-        this.isStable = merge$1(isCurrentlyStable, isStable.pipe(share()));
+        /**
+         * Returns an Observable that indicates when the application is stable or unstable.
+         */
+        this.isStable = inject(ZONE_IS_STABLE_OBSERVABLE);
+        this._injector = inject(EnvironmentInjector);
+    }
+    /**
+     * Indicates whether this instance was destroyed.
+     */
+    get destroyed() {
+        return this._destroyed;
+    }
+    /**
+     * The `EnvironmentInjector` used to create this application.
+     */
+    get injector() {
+        return this._injector;
     }
     /**
      * Bootstrap a component onto the element identified by its selector or, optionally, to a
@@ -25864,7 +26375,7 @@ class ApplicationRef {
         }
         catch (e) {
             // Attention: Don't rethrow as it could cancel subscriptions to Observables!
-            this._zone.runOutsideAngular(() => this._exceptionHandler.handleError(e));
+            this.internalErrorHandler(e);
         }
         finally {
             this._runningTick = false;
@@ -25914,7 +26425,6 @@ class ApplicationRef {
             this._destroyListeners.forEach(listener => listener());
             // Destroy all registered views.
             this._views.slice().forEach((view) => view.destroy());
-            this._onMicrotaskEmptySubscription.unsubscribe();
         }
         finally {
             // Indicate that this instance is destroyed.
@@ -25967,12 +26477,12 @@ class ApplicationRef {
         }
     }
 }
-ApplicationRef.ɵfac = function ApplicationRef_Factory(t) { return new (t || ApplicationRef)(ɵɵinject(NgZone), ɵɵinject(EnvironmentInjector), ɵɵinject(ErrorHandler)); };
+ApplicationRef.ɵfac = function ApplicationRef_Factory(t) { return new (t || ApplicationRef)(); };
 ApplicationRef.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: ApplicationRef, factory: ApplicationRef.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ApplicationRef, [{
         type: Injectable,
         args: [{ providedIn: 'root' }]
-    }], function () { return [{ type: NgZone }, { type: EnvironmentInjector }, { type: ErrorHandler }]; }, null); })();
+    }], null, null); })();
 function remove(list, el) {
     const index = list.indexOf(el);
     if (index > -1) {
@@ -25987,6 +26497,69 @@ function _lastDefined(args) {
     }
     return undefined;
 }
+/**
+ * `InjectionToken` used to configure how to call the `ErrorHandler`.
+ *
+ * `NgZone` is provided by default today so the default (and only) implementation for this
+ * is calling `ErrorHandler.handleError` outside of the Angular zone.
+ */
+const INTERNAL_APPLICATION_ERROR_HANDLER = new InjectionToken(NG_DEV_MODE ? 'internal error handler' : '', {
+    providedIn: 'root',
+    factory: () => {
+        const userErrorHandler = inject(ErrorHandler);
+        return userErrorHandler.handleError.bind(undefined);
+    }
+});
+function ngZoneApplicationErrorHandlerFactory() {
+    const zone = inject(NgZone);
+    const userErrorHandler = inject(ErrorHandler);
+    return (e) => zone.runOutsideAngular(() => userErrorHandler.handleError(e));
+}
+class NgZoneChangeDetectionScheduler {
+    constructor() {
+        this.zone = inject(NgZone);
+        this.applicationRef = inject(ApplicationRef);
+    }
+    initialize() {
+        if (this._onMicrotaskEmptySubscription) {
+            return;
+        }
+        this._onMicrotaskEmptySubscription = this.zone.onMicrotaskEmpty.subscribe({
+            next: () => {
+                this.zone.run(() => {
+                    this.applicationRef.tick();
+                });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._onMicrotaskEmptySubscription?.unsubscribe();
+    }
+}
+NgZoneChangeDetectionScheduler.ɵfac = function NgZoneChangeDetectionScheduler_Factory(t) { return new (t || NgZoneChangeDetectionScheduler)(); };
+NgZoneChangeDetectionScheduler.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: NgZoneChangeDetectionScheduler, factory: NgZoneChangeDetectionScheduler.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(NgZoneChangeDetectionScheduler, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+function provideNgZoneChangeDetection(ngZone) {
+    return [
+        { provide: NgZone, useValue: ngZone },
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useFactory: () => {
+                const ngZoneChangeDetectionScheduler = inject(NgZoneChangeDetectionScheduler, { optional: true });
+                if (NG_DEV_MODE && ngZoneChangeDetectionScheduler === null) {
+                    throw new RuntimeError(402 /* RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP */, 'No NgZoneChangeDetectionScheduler found in the Dependency Injection tree.');
+                }
+                return () => ngZoneChangeDetectionScheduler.initialize();
+            },
+        },
+        { provide: INTERNAL_APPLICATION_ERROR_HANDLER, useFactory: ngZoneApplicationErrorHandlerFactory },
+        { provide: ZONE_IS_STABLE_OBSERVABLE, useFactory: isStableFactory },
+    ];
+}
 
 /**
  * Returns whether Angular is in development mode.
@@ -27905,6 +28478,25 @@ class SerializedViewCollection {
         return this.views;
     }
 }
+/**
+ * Global counter that is used to generate a unique id for TViews
+ * during the serialization process.
+ */
+let tViewSsrId = 0;
+/**
+ * Generates a unique id for a given TView and returns this id.
+ * The id is also stored on this instance of a TView and reused in
+ * subsequent calls.
+ *
+ * This id is needed to uniquely identify and pick up dehydrated views
+ * at runtime.
+ */
+function getSsrId(tView) {
+    if (!tView.ssrId) {
+        tView.ssrId = `t${tViewSsrId++}`;
+    }
+    return tView.ssrId;
+}
 /**
  * Computes the number of root nodes in a given view
  * (or child nodes in a given container if a tNode is provided).
@@ -27923,6 +28515,7 @@ function calcNumRootNodes(tView, lView, tNode) {
  */
 function annotateForHydration(appRef, doc) {
     const serializedViewCollection = new SerializedViewCollection();
+    const corruptedTextNodes = new Map();
     const viewRefs = appRef._views;
     for (const viewRef of viewRefs) {
         const lView = getComponentLViewForHydration(viewRef);
@@ -27933,8 +28526,10 @@ function annotateForHydration(appRef, doc) {
             if (hostElement) {
                 const context = {
                     serializedViewCollection,
+                    corruptedTextNodes,
                 };
                 annotateHostElementForHydration(hostElement, lView, context);
+                insertCorruptedTextNodeMarkers(corruptedTextNodes, doc);
             }
         }
     }
@@ -27944,6 +28539,45 @@ function annotateForHydration(appRef, doc) {
         transferState.set(NGH_DATA_KEY, allSerializedViews);
     }
 }
+/**
+ * Serializes the lContainer data into a list of SerializedView objects,
+ * that represent views within this lContainer.
+ *
+ * @param lContainer the lContainer we are serializing
+ * @param context the hydration context
+ * @returns an array of the `SerializedView` objects
+ */
+function serializeLContainer(lContainer, context) {
+    const views = [];
+    for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
+        let childLView = lContainer[i];
+        // If this is a root view, get an LView for the underlying component,
+        // because it contains information about the view to serialize.
+        if (isRootView(childLView)) {
+            childLView = childLView[HEADER_OFFSET];
+        }
+        const childTView = childLView[TVIEW];
+        let template;
+        let numRootNodes = 0;
+        if (childTView.type === 1 /* TViewType.Component */) {
+            template = childTView.ssrId;
+            // This is a component view, thus it has only 1 root node: the component
+            // host node itself (other nodes would be inside that host node).
+            numRootNodes = 1;
+        }
+        else {
+            template = getSsrId(childTView);
+            numRootNodes = calcNumRootNodes(childTView, childLView, childTView.firstChild);
+        }
+        const view = {
+            [TEMPLATE_ID]: template,
+            [NUM_ROOT_NODES]: numRootNodes,
+            ...serializeLView(lContainer[i], context),
+        };
+        views.push(view);
+    }
+    return views;
+}
 /**
  * Serializes the lView data into a SerializedView object that will later be added
  * to the TransferState storage and referenced using the `ngh` attribute on a host
@@ -27968,8 +28602,26 @@ function serializeLView(lView, context) {
             continue;
         }
         if (isLContainer(lView[i])) {
-            // TODO: serialization of LContainers will be added
-            // in followup PRs.
+            // Serialize information about a template.
+            const embeddedTView = tNode.tView;
+            if (embeddedTView !== null) {
+                ngh[TEMPLATES] ?? (ngh[TEMPLATES] = {});
+                ngh[TEMPLATES][noOffsetIndex] = getSsrId(embeddedTView);
+            }
+            // Serialize views within this LContainer.
+            const hostNode = lView[i][HOST]; // host node of this container
+            // LView[i][HOST] can be of 2 different types:
+            // - either a DOM node
+            // - or an array that represents an LView of a component
+            if (Array.isArray(hostNode)) {
+                // This is a component, serialize info about it.
+                const targetNode = unwrapRNode(hostNode);
+                if (!targetNode.hasAttribute(SKIP_HYDRATION_ATTR_NAME)) {
+                    annotateHostElementForHydration(targetNode, hostNode, context);
+                }
+            }
+            ngh[CONTAINERS] ?? (ngh[CONTAINERS] = {});
+            ngh[CONTAINERS][noOffsetIndex] = serializeLContainer(lView[i], context);
         }
         else if (Array.isArray(lView[i])) {
             // This is a component, annotate the host node with an `ngh` attribute.
@@ -27987,6 +28639,43 @@ function serializeLView(lView, context) {
                 ngh[ELEMENT_CONTAINERS] ?? (ngh[ELEMENT_CONTAINERS] = {});
                 ngh[ELEMENT_CONTAINERS][noOffsetIndex] = calcNumRootNodes(tView, lView, tNode.child);
             }
+            else {
+                // Handle cases where text nodes can be lost after DOM serialization:
+                //  1. When there is an *empty text node* in DOM: in this case, this
+                //     node would not make it into the serialized string and as a result,
+                //     this node wouldn't be created in a browser. This would result in
+                //     a mismatch during the hydration, where the runtime logic would expect
+                //     a text node to be present in live DOM, but no text node would exist.
+                //     Example: `<span>{{ name }}</span>` when the `name` is an empty string.
+                //     This would result in `<span></span>` string after serialization and
+                //     in a browser only the `span` element would be created. To resolve that,
+                //     an extra comment node is appended in place of an empty text node and
+                //     that special comment node is replaced with an empty text node *before*
+                //     hydration.
+                //  2. When there are 2 consecutive text nodes present in the DOM.
+                //     Example: `<div>Hello <ng-container *ngIf="true">world</ng-container></div>`.
+                //     In this scenario, the live DOM would look like this:
+                //       <div>#text('Hello ') #text('world') #comment('container')</div>
+                //     Serialized string would look like this: `<div>Hello world<!--container--></div>`.
+                //     The live DOM in a browser after that would be:
+                //       <div>#text('Hello world') #comment('container')</div>
+                //     Notice how 2 text nodes are now "merged" into one. This would cause hydration
+                //     logic to fail, since it'd expect 2 text nodes being present, not one.
+                //     To fix this, we insert a special comment node in between those text nodes, so
+                //     serialized representation is: `<div>Hello <!--ngtns-->world<!--container--></div>`.
+                //     This forces browser to create 2 text nodes separated by a comment node.
+                //     Before running a hydration process, this special comment node is removed, so the
+                //     live DOM has exactly the same state as it was before serialization.
+                if (tNode.type & 1 /* TNodeType.Text */) {
+                    const rNode = unwrapRNode(lView[i]);
+                    if (rNode.textContent?.replace(/\s/gm, '') === '') {
+                        context.corruptedTextNodes.set(rNode, "ngetn" /* TextNodeMarker.EmptyNode */);
+                    }
+                    else if (rNode.nextSibling?.nodeType === Node.TEXT_NODE) {
+                        context.corruptedTextNodes.set(rNode, "ngtns" /* TextNodeMarker.Separator */);
+                    }
+                }
+            }
         }
     }
     return ngh;
@@ -28004,6 +28693,20 @@ function annotateHostElementForHydration(element, lView, context) {
     const renderer = lView[RENDERER];
     renderer.setAttribute(element, NGH_ATTR_NAME, index.toString());
 }
+/**
+ * Physically inserts the comment nodes to ensure empty text nodes and adjacent
+ * text node separators are preserved after server serialization of the DOM.
+ * These get swapped back for empty text nodes or separators once hydration happens
+ * on the client.
+ *
+ * @param corruptedTextNodes The Map of text nodes to be replaced with comments
+ * @param doc The document
+ */
+function insertCorruptedTextNodeMarkers(corruptedTextNodes, doc) {
+    for (const [textNode, marker] of corruptedTextNodes) {
+        textNode.after(doc.createComment(marker));
+    }
+}
 
 /**
  * Indicates whether the hydration-related code was added,
@@ -28028,6 +28731,10 @@ function enableHydrationRuntimeSupport() {
         enableLocateOrCreateElementNodeImpl();
         enableLocateOrCreateTextNodeImpl();
         enableLocateOrCreateElementContainerNodeImpl();
+        enableLocateOrCreateContainerAnchorImpl();
+        enableLocateOrCreateContainerRefImpl();
+        enableFindMatchingDehydratedViewImpl();
+        enableApplyRootElementTransformImpl();
     }
 }
 /**
@@ -28864,5 +29571,5 @@ if (typeof ngDevMode !== 'undefined' && ngDevMode) {
  * Generated bundle index. Do not edit.
  */
 
-export { ANALYZE_FOR_ENTRY_COMPONENTS, ANIMATION_MODULE_TYPE, APP_BOOTSTRAP_LISTENER, APP_ID, APP_INITIALIZER, ApplicationInitStatus, ApplicationModule, ApplicationRef, Attribute, COMPILER_OPTIONS, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Compiler, CompilerFactory, Component, ComponentFactory$1 as ComponentFactory, ComponentFactoryResolver$1 as ComponentFactoryResolver, ComponentRef$1 as ComponentRef, ContentChild, ContentChildren, DEFAULT_CURRENCY_CODE, DebugElement, DebugEventListener, DebugNode, DefaultIterableDiffer, DestroyRef, Directive, ENVIRONMENT_INITIALIZER, ElementRef, EmbeddedViewRef, EnvironmentInjector, ErrorHandler, EventEmitter, Host, HostBinding, HostListener, INJECTOR, Inject, InjectFlags, Injectable, InjectionToken, Injector, Input, IterableDiffers, KeyValueDiffers, LOCALE_ID, MissingTranslationStrategy, ModuleWithComponentFactories, NO_ERRORS_SCHEMA, NgModule, NgModuleFactory$1 as NgModuleFactory, NgModuleRef$1 as NgModuleRef, NgProbeToken, NgZone, Optional, Output, PACKAGE_ROOT_URL, PLATFORM_ID, PLATFORM_INITIALIZER, Pipe, PlatformRef, Query, QueryList, ReflectiveInjector, ReflectiveKey, Renderer2, RendererFactory2, RendererStyleFlags2, ResolvedReflectiveFactory, Sanitizer, SecurityContext, Self, SimpleChange, SkipSelf, TRANSLATIONS, TRANSLATIONS_FORMAT, TemplateRef, Testability, TestabilityRegistry, Type, VERSION, Version, ViewChild, ViewChildren, ViewContainerRef, ViewEncapsulation$1 as ViewEncapsulation, ViewRef, asNativeElements, assertPlatform, computed, createComponent, createEnvironmentInjector, createNgModule, createNgModuleRef, createPlatform, createPlatformFactory, defineInjectable, destroyPlatform, effect, enableProdMode, forwardRef, getDebugNode, getModuleFactory, getNgModuleById, getPlatform, importProvidersFrom, inject, isDevMode, isSignal, isStandalone, makeEnvironmentProviders, mergeApplicationConfig, platformCore, reflectComponentType, resolveForwardRef, setTestabilityGetter, signal, untracked, ALLOW_MULTIPLE_PLATFORMS as ɵALLOW_MULTIPLE_PLATFORMS, APP_ID_RANDOM_PROVIDER as ɵAPP_ID_RANDOM_PROVIDER, ComponentFactory$1 as ɵComponentFactory, Console as ɵConsole, DEFAULT_LOCALE_ID as ɵDEFAULT_LOCALE_ID, INJECTOR_SCOPE as ɵINJECTOR_SCOPE, IS_HYDRATION_FEATURE_ENABLED as ɵIS_HYDRATION_FEATURE_ENABLED, LContext as ɵLContext, LifecycleHooksFeature as ɵLifecycleHooksFeature, LocaleDataIndex as ɵLocaleDataIndex, NG_COMP_DEF as ɵNG_COMP_DEF, NG_DIR_DEF as ɵNG_DIR_DEF, NG_ELEMENT_ID as ɵNG_ELEMENT_ID, NG_INJ_DEF as ɵNG_INJ_DEF, NG_MOD_DEF as ɵNG_MOD_DEF, NG_PIPE_DEF as ɵNG_PIPE_DEF, NG_PROV_DEF as ɵNG_PROV_DEF, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, NO_CHANGE as ɵNO_CHANGE, NgModuleFactory as ɵNgModuleFactory, NoopNgZone as ɵNoopNgZone, ReflectionCapabilities as ɵReflectionCapabilities, ComponentFactory as ɵRender3ComponentFactory, ComponentRef as ɵRender3ComponentRef, NgModuleRef as ɵRender3NgModuleRef, RuntimeError as ɵRuntimeError, TESTABILITY as ɵTESTABILITY, TESTABILITY_GETTER as ɵTESTABILITY_GETTER, TransferState as ɵTransferState, ViewRef$1 as ɵViewRef, XSS_SECURITY_URL as ɵXSS_SECURITY_URL, _sanitizeHtml as ɵ_sanitizeHtml, _sanitizeUrl as ɵ_sanitizeUrl, allowSanitizationBypassAndThrow as ɵallowSanitizationBypassAndThrow, annotateForHydration as ɵannotateForHydration, bypassSanitizationTrustHtml as ɵbypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl as ɵbypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript as ɵbypassSanitizationTrustScript, bypassSanitizationTrustStyle as ɵbypassSanitizationTrustStyle, bypassSanitizationTrustUrl as ɵbypassSanitizationTrustUrl, clearResolutionOfComponentResourcesQueue as ɵclearResolutionOfComponentResourcesQueue, coerceToBoolean as ɵcoerceToBoolean, compileComponent as ɵcompileComponent, compileDirective as ɵcompileDirective, compileNgModule as ɵcompileNgModule, compileNgModuleDefs as ɵcompileNgModuleDefs, compileNgModuleFactory as ɵcompileNgModuleFactory, compilePipe as ɵcompilePipe, convertToBitFlags as ɵconvertToBitFlags, createInjector as ɵcreateInjector, defaultIterableDiffers as ɵdefaultIterableDiffers, defaultKeyValueDiffers as ɵdefaultKeyValueDiffers, detectChanges as ɵdetectChanges, devModeEqual as ɵdevModeEqual, escapeTransferStateContent as ɵescapeTransferStateContent, findLocaleData as ɵfindLocaleData, flushModuleScopingQueueAsMuchAsPossible as ɵflushModuleScopingQueueAsMuchAsPossible, formatRuntimeError as ɵformatRuntimeError, getComponentDef as ɵgetComponentDef, getDebugNode as ɵgetDebugNode, getDirectives as ɵgetDirectives, getHostElement as ɵgetHostElement, getInjectableDef as ɵgetInjectableDef, getLContext as ɵgetLContext, getLocaleCurrencyCode as ɵgetLocaleCurrencyCode, getLocalePluralCase as ɵgetLocalePluralCase, getSanitizationBypassType as ɵgetSanitizationBypassType, ɵgetUnknownElementStrictMode, ɵgetUnknownPropertyStrictMode, _global as ɵglobal, injectChangeDetectorRef as ɵinjectChangeDetectorRef, internalCreateApplication as ɵinternalCreateApplication, isBoundToModule as ɵisBoundToModule, isEnvironmentProviders as ɵisEnvironmentProviders, isInjectable as ɵisInjectable, isNgModule as ɵisNgModule, isPromise as ɵisPromise, isSubscribable as ɵisSubscribable, makeDecorator as ɵmakeDecorator, makeStateKey as ɵmakeStateKey, noSideEffects as ɵnoSideEffects, patchComponentDefWithScope as ɵpatchComponentDefWithScope, provideHydrationSupport as ɵprovideHydrationSupport, publishDefaultGlobalUtils$1 as ɵpublishDefaultGlobalUtils, publishGlobalUtil as ɵpublishGlobalUtil, registerLocaleData as ɵregisterLocaleData, resetCompiledComponents as ɵresetCompiledComponents, resetJitOptions as ɵresetJitOptions, resolveComponentResources as ɵresolveComponentResources, setAllowDuplicateNgModuleIdsForTest as ɵsetAllowDuplicateNgModuleIdsForTest, setClassMetadata as ɵsetClassMetadata, setCurrentInjector as ɵsetCurrentInjector, setDocument as ɵsetDocument, setLocaleId as ɵsetLocaleId, ɵsetUnknownElementStrictMode, ɵsetUnknownPropertyStrictMode, store as ɵstore, stringify as ɵstringify, transitiveScopesFor as ɵtransitiveScopesFor, unescapeTransferStateContent as ɵunescapeTransferStateContent, unregisterAllLocaleData as ɵunregisterLocaleData, unwrapSafeValue as ɵunwrapSafeValue, ɵɵCopyDefinitionFeature, FactoryTarget as ɵɵFactoryTarget, ɵɵHostDirectivesFeature, ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature, ɵɵProvidersFeature, ɵɵStandaloneFeature, ɵɵadvance, ɵɵattribute, ɵɵattributeInterpolate1, ɵɵattributeInterpolate2, ɵɵattributeInterpolate3, ɵɵattributeInterpolate4, ɵɵattributeInterpolate5, ɵɵattributeInterpolate6, ɵɵattributeInterpolate7, ɵɵattributeInterpolate8, ɵɵattributeInterpolateV, ɵɵclassMap, ɵɵclassMapInterpolate1, ɵɵclassMapInterpolate2, ɵɵclassMapInterpolate3, ɵɵclassMapInterpolate4, ɵɵclassMapInterpolate5, ɵɵclassMapInterpolate6, ɵɵclassMapInterpolate7, ɵɵclassMapInterpolate8, ɵɵclassMapInterpolateV, ɵɵclassProp, ɵɵcontentQuery, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵdefineNgModule, ɵɵdefinePipe, ɵɵdirectiveInject, ɵɵdisableBindings, ɵɵelement, ɵɵelementContainer, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementStart, ɵɵenableBindings, ɵɵgetCurrentView, ɵɵgetInheritedFactory, ɵɵhostProperty, ɵɵi18n, ɵɵi18nApply, ɵɵi18nAttributes, ɵɵi18nEnd, ɵɵi18nExp, ɵɵi18nPostprocess, ɵɵi18nStart, ɵɵinject, ɵɵinjectAttribute, ɵɵinvalidFactory, ɵɵinvalidFactoryDep, ɵɵlistener, ɵɵloadQuery, ɵɵnamespaceHTML, ɵɵnamespaceMathML, ɵɵnamespaceSVG, ɵɵnextContext, ɵɵngDeclareClassMetadata, ɵɵngDeclareComponent, ɵɵngDeclareDirective, ɵɵngDeclareFactory, ɵɵngDeclareInjectable, ɵɵngDeclareInjector, ɵɵngDeclareNgModule, ɵɵngDeclarePipe, ɵɵpipe, ɵɵpipeBind1, ɵɵpipeBind2, ɵɵpipeBind3, ɵɵpipeBind4, ɵɵpipeBindV, ɵɵprojection, ɵɵprojectionDef, ɵɵproperty, ɵɵpropertyInterpolate, ɵɵpropertyInterpolate1, ɵɵpropertyInterpolate2, ɵɵpropertyInterpolate3, ɵɵpropertyInterpolate4, ɵɵpropertyInterpolate5, ɵɵpropertyInterpolate6, ɵɵpropertyInterpolate7, ɵɵpropertyInterpolate8, ɵɵpropertyInterpolateV, ɵɵpureFunction0, ɵɵpureFunction1, ɵɵpureFunction2, ɵɵpureFunction3, ɵɵpureFunction4, ɵɵpureFunction5, ɵɵpureFunction6, ɵɵpureFunction7, ɵɵpureFunction8, ɵɵpureFunctionV, ɵɵqueryRefresh, ɵɵreference, registerNgModuleType as ɵɵregisterNgModuleType, ɵɵresetView, ɵɵresolveBody, ɵɵresolveDocument, ɵɵresolveWindow, ɵɵrestoreView, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl, ɵɵsanitizeUrlOrResourceUrl, ɵɵsetComponentScope, ɵɵsetNgModuleScope, ɵɵstyleMap, ɵɵstyleMapInterpolate1, ɵɵstyleMapInterpolate2, ɵɵstyleMapInterpolate3, ɵɵstyleMapInterpolate4, ɵɵstyleMapInterpolate5, ɵɵstyleMapInterpolate6, ɵɵstyleMapInterpolate7, ɵɵstyleMapInterpolate8, ɵɵstyleMapInterpolateV, ɵɵstyleProp, ɵɵstylePropInterpolate1, ɵɵstylePropInterpolate2, ɵɵstylePropInterpolate3, ɵɵstylePropInterpolate4, ɵɵstylePropInterpolate5, ɵɵstylePropInterpolate6, ɵɵstylePropInterpolate7, ɵɵstylePropInterpolate8, ɵɵstylePropInterpolateV, ɵɵsyntheticHostListener, ɵɵsyntheticHostProperty, ɵɵtemplate, ɵɵtemplateRefExtractor, ɵɵtext, ɵɵtextInterpolate, ɵɵtextInterpolate1, ɵɵtextInterpolate2, ɵɵtextInterpolate3, ɵɵtextInterpolate4, ɵɵtextInterpolate5, ɵɵtextInterpolate6, ɵɵtextInterpolate7, ɵɵtextInterpolate8, ɵɵtextInterpolateV, ɵɵtrustConstantHtml, ɵɵtrustConstantResourceUrl, ɵɵvalidateIframeAttribute, ɵɵviewQuery };
+export { ANALYZE_FOR_ENTRY_COMPONENTS, ANIMATION_MODULE_TYPE, APP_BOOTSTRAP_LISTENER, APP_ID, APP_INITIALIZER, ApplicationInitStatus, ApplicationModule, ApplicationRef, Attribute, COMPILER_OPTIONS, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Compiler, CompilerFactory, Component, ComponentFactory$1 as ComponentFactory, ComponentFactoryResolver$1 as ComponentFactoryResolver, ComponentRef$1 as ComponentRef, ContentChild, ContentChildren, DEFAULT_CURRENCY_CODE, DebugElement, DebugEventListener, DebugNode, DefaultIterableDiffer, DestroyRef, Directive, ENVIRONMENT_INITIALIZER, ElementRef, EmbeddedViewRef, EnvironmentInjector, ErrorHandler, EventEmitter, Host, HostBinding, HostListener, INJECTOR, Inject, InjectFlags, Injectable, InjectionToken, Injector, Input, IterableDiffers, KeyValueDiffers, LOCALE_ID, MissingTranslationStrategy, ModuleWithComponentFactories, NO_ERRORS_SCHEMA, NgModule, NgModuleFactory$1 as NgModuleFactory, NgModuleRef$1 as NgModuleRef, NgProbeToken, NgZone, Optional, Output, PACKAGE_ROOT_URL, PLATFORM_ID, PLATFORM_INITIALIZER, Pipe, PlatformRef, Query, QueryList, ReflectiveInjector, ReflectiveKey, Renderer2, RendererFactory2, RendererStyleFlags2, ResolvedReflectiveFactory, Sanitizer, SecurityContext, Self, SimpleChange, SkipSelf, TRANSLATIONS, TRANSLATIONS_FORMAT, TemplateRef, Testability, TestabilityRegistry, Type, VERSION, Version, ViewChild, ViewChildren, ViewContainerRef, ViewEncapsulation$1 as ViewEncapsulation, ViewRef, asNativeElements, assertPlatform, computed, createComponent, createEnvironmentInjector, createNgModule, createNgModuleRef, createPlatform, createPlatformFactory, defineInjectable, destroyPlatform, effect, enableProdMode, forwardRef, getDebugNode, getModuleFactory, getNgModuleById, getPlatform, importProvidersFrom, inject, isDevMode, isSignal, isStandalone, makeEnvironmentProviders, mergeApplicationConfig, platformCore, reflectComponentType, resolveForwardRef, runInInjectionContext, setTestabilityGetter, signal, untracked, ALLOW_MULTIPLE_PLATFORMS as ɵALLOW_MULTIPLE_PLATFORMS, ComponentFactory$1 as ɵComponentFactory, Console as ɵConsole, DEFAULT_LOCALE_ID as ɵDEFAULT_LOCALE_ID, INJECTOR_SCOPE as ɵINJECTOR_SCOPE, IS_HYDRATION_FEATURE_ENABLED as ɵIS_HYDRATION_FEATURE_ENABLED, LContext as ɵLContext, LifecycleHooksFeature as ɵLifecycleHooksFeature, LocaleDataIndex as ɵLocaleDataIndex, NG_COMP_DEF as ɵNG_COMP_DEF, NG_DIR_DEF as ɵNG_DIR_DEF, NG_ELEMENT_ID as ɵNG_ELEMENT_ID, NG_INJ_DEF as ɵNG_INJ_DEF, NG_MOD_DEF as ɵNG_MOD_DEF, NG_PIPE_DEF as ɵNG_PIPE_DEF, NG_PROV_DEF as ɵNG_PROV_DEF, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, NO_CHANGE as ɵNO_CHANGE, NgModuleFactory as ɵNgModuleFactory, NoopNgZone as ɵNoopNgZone, ReflectionCapabilities as ɵReflectionCapabilities, ComponentFactory as ɵRender3ComponentFactory, ComponentRef as ɵRender3ComponentRef, NgModuleRef as ɵRender3NgModuleRef, RuntimeError as ɵRuntimeError, TESTABILITY as ɵTESTABILITY, TESTABILITY_GETTER as ɵTESTABILITY_GETTER, TransferState as ɵTransferState, ViewRef$1 as ɵViewRef, XSS_SECURITY_URL as ɵXSS_SECURITY_URL, _sanitizeHtml as ɵ_sanitizeHtml, _sanitizeUrl as ɵ_sanitizeUrl, allowSanitizationBypassAndThrow as ɵallowSanitizationBypassAndThrow, annotateForHydration as ɵannotateForHydration, bypassSanitizationTrustHtml as ɵbypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl as ɵbypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript as ɵbypassSanitizationTrustScript, bypassSanitizationTrustStyle as ɵbypassSanitizationTrustStyle, bypassSanitizationTrustUrl as ɵbypassSanitizationTrustUrl, clearResolutionOfComponentResourcesQueue as ɵclearResolutionOfComponentResourcesQueue, coerceToBoolean as ɵcoerceToBoolean, compileComponent as ɵcompileComponent, compileDirective as ɵcompileDirective, compileNgModule as ɵcompileNgModule, compileNgModuleDefs as ɵcompileNgModuleDefs, compileNgModuleFactory as ɵcompileNgModuleFactory, compilePipe as ɵcompilePipe, convertToBitFlags as ɵconvertToBitFlags, createInjector as ɵcreateInjector, defaultIterableDiffers as ɵdefaultIterableDiffers, defaultKeyValueDiffers as ɵdefaultKeyValueDiffers, detectChanges as ɵdetectChanges, devModeEqual as ɵdevModeEqual, escapeTransferStateContent as ɵescapeTransferStateContent, findLocaleData as ɵfindLocaleData, flushModuleScopingQueueAsMuchAsPossible as ɵflushModuleScopingQueueAsMuchAsPossible, formatRuntimeError as ɵformatRuntimeError, getComponentDef as ɵgetComponentDef, getDebugNode as ɵgetDebugNode, getDirectives as ɵgetDirectives, getHostElement as ɵgetHostElement, getInjectableDef as ɵgetInjectableDef, getLContext as ɵgetLContext, getLocaleCurrencyCode as ɵgetLocaleCurrencyCode, getLocalePluralCase as ɵgetLocalePluralCase, getSanitizationBypassType as ɵgetSanitizationBypassType, ɵgetUnknownElementStrictMode, ɵgetUnknownPropertyStrictMode, _global as ɵglobal, injectChangeDetectorRef as ɵinjectChangeDetectorRef, internalCreateApplication as ɵinternalCreateApplication, isBoundToModule as ɵisBoundToModule, isEnvironmentProviders as ɵisEnvironmentProviders, isInjectable as ɵisInjectable, isNgModule as ɵisNgModule, isPromise as ɵisPromise, isSubscribable as ɵisSubscribable, makeDecorator as ɵmakeDecorator, makeStateKey as ɵmakeStateKey, noSideEffects as ɵnoSideEffects, patchComponentDefWithScope as ɵpatchComponentDefWithScope, provideHydrationSupport as ɵprovideHydrationSupport, provideNgZoneChangeDetection as ɵprovideNgZoneChangeDetection, publishDefaultGlobalUtils$1 as ɵpublishDefaultGlobalUtils, publishGlobalUtil as ɵpublishGlobalUtil, registerLocaleData as ɵregisterLocaleData, resetCompiledComponents as ɵresetCompiledComponents, resetJitOptions as ɵresetJitOptions, resolveComponentResources as ɵresolveComponentResources, setAllowDuplicateNgModuleIdsForTest as ɵsetAllowDuplicateNgModuleIdsForTest, setClassMetadata as ɵsetClassMetadata, setCurrentInjector as ɵsetCurrentInjector, setDocument as ɵsetDocument, setLocaleId as ɵsetLocaleId, ɵsetUnknownElementStrictMode, ɵsetUnknownPropertyStrictMode, store as ɵstore, stringify as ɵstringify, transitiveScopesFor as ɵtransitiveScopesFor, unescapeTransferStateContent as ɵunescapeTransferStateContent, unregisterAllLocaleData as ɵunregisterLocaleData, unwrapSafeValue as ɵunwrapSafeValue, ɵɵCopyDefinitionFeature, FactoryTarget as ɵɵFactoryTarget, ɵɵHostDirectivesFeature, ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature, ɵɵProvidersFeature, ɵɵStandaloneFeature, ɵɵadvance, ɵɵattribute, ɵɵattributeInterpolate1, ɵɵattributeInterpolate2, ɵɵattributeInterpolate3, ɵɵattributeInterpolate4, ɵɵattributeInterpolate5, ɵɵattributeInterpolate6, ɵɵattributeInterpolate7, ɵɵattributeInterpolate8, ɵɵattributeInterpolateV, ɵɵclassMap, ɵɵclassMapInterpolate1, ɵɵclassMapInterpolate2, ɵɵclassMapInterpolate3, ɵɵclassMapInterpolate4, ɵɵclassMapInterpolate5, ɵɵclassMapInterpolate6, ɵɵclassMapInterpolate7, ɵɵclassMapInterpolate8, ɵɵclassMapInterpolateV, ɵɵclassProp, ɵɵcontentQuery, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵdefineNgModule, ɵɵdefinePipe, ɵɵdirectiveInject, ɵɵdisableBindings, ɵɵelement, ɵɵelementContainer, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementStart, ɵɵenableBindings, ɵɵgetCurrentView, ɵɵgetInheritedFactory, ɵɵhostProperty, ɵɵi18n, ɵɵi18nApply, ɵɵi18nAttributes, ɵɵi18nEnd, ɵɵi18nExp, ɵɵi18nPostprocess, ɵɵi18nStart, ɵɵinject, ɵɵinjectAttribute, ɵɵinvalidFactory, ɵɵinvalidFactoryDep, ɵɵlistener, ɵɵloadQuery, ɵɵnamespaceHTML, ɵɵnamespaceMathML, ɵɵnamespaceSVG, ɵɵnextContext, ɵɵngDeclareClassMetadata, ɵɵngDeclareComponent, ɵɵngDeclareDirective, ɵɵngDeclareFactory, ɵɵngDeclareInjectable, ɵɵngDeclareInjector, ɵɵngDeclareNgModule, ɵɵngDeclarePipe, ɵɵpipe, ɵɵpipeBind1, ɵɵpipeBind2, ɵɵpipeBind3, ɵɵpipeBind4, ɵɵpipeBindV, ɵɵprojection, ɵɵprojectionDef, ɵɵproperty, ɵɵpropertyInterpolate, ɵɵpropertyInterpolate1, ɵɵpropertyInterpolate2, ɵɵpropertyInterpolate3, ɵɵpropertyInterpolate4, ɵɵpropertyInterpolate5, ɵɵpropertyInterpolate6, ɵɵpropertyInterpolate7, ɵɵpropertyInterpolate8, ɵɵpropertyInterpolateV, ɵɵpureFunction0, ɵɵpureFunction1, ɵɵpureFunction2, ɵɵpureFunction3, ɵɵpureFunction4, ɵɵpureFunction5, ɵɵpureFunction6, ɵɵpureFunction7, ɵɵpureFunction8, ɵɵpureFunctionV, ɵɵqueryRefresh, ɵɵreference, registerNgModuleType as ɵɵregisterNgModuleType, ɵɵresetView, ɵɵresolveBody, ɵɵresolveDocument, ɵɵresolveWindow, ɵɵrestoreView, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl, ɵɵsanitizeUrlOrResourceUrl, ɵɵsetComponentScope, ɵɵsetNgModuleScope, ɵɵstyleMap, ɵɵstyleMapInterpolate1, ɵɵstyleMapInterpolate2, ɵɵstyleMapInterpolate3, ɵɵstyleMapInterpolate4, ɵɵstyleMapInterpolate5, ɵɵstyleMapInterpolate6, ɵɵstyleMapInterpolate7, ɵɵstyleMapInterpolate8, ɵɵstyleMapInterpolateV, ɵɵstyleProp, ɵɵstylePropInterpolate1, ɵɵstylePropInterpolate2, ɵɵstylePropInterpolate3, ɵɵstylePropInterpolate4, ɵɵstylePropInterpolate5, ɵɵstylePropInterpolate6, ɵɵstylePropInterpolate7, ɵɵstylePropInterpolate8, ɵɵstylePropInterpolateV, ɵɵsyntheticHostListener, ɵɵsyntheticHostProperty, ɵɵtemplate, ɵɵtemplateRefExtractor, ɵɵtext, ɵɵtextInterpolate, ɵɵtextInterpolate1, ɵɵtextInterpolate2, ɵɵtextInterpolate3, ɵɵtextInterpolate4, ɵɵtextInterpolate5, ɵɵtextInterpolate6, ɵɵtextInterpolate7, ɵɵtextInterpolate8, ɵɵtextInterpolateV, ɵɵtrustConstantHtml, ɵɵtrustConstantResourceUrl, ɵɵvalidateIframeAttribute, ɵɵviewQuery };
 //# sourceMappingURL=core.mjs.map