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

package/fesm2020/testing.mjs

@@ -1,10 +1,10 @@
 /**
- * @license Angular v16.0.0-next.1
+ * @license Angular v16.0.0-next.3
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
 
-import { getDebugNode, RendererFactory2 as RendererFactory2$1, InjectionToken as InjectionToken$1, ɵstringify, ɵReflectionCapabilities, Directive, Component, Pipe, NgModule, ɵgetInjectableDef, resolveForwardRef as resolveForwardRef$1, ɵNG_COMP_DEF, ɵRender3NgModuleRef, ApplicationInitStatus, LOCALE_ID as LOCALE_ID$1, ɵDEFAULT_LOCALE_ID, ɵsetLocaleId, ɵRender3ComponentFactory, ɵcompileComponent, ɵNG_DIR_DEF, ɵcompileDirective, ɵNG_PIPE_DEF, ɵcompilePipe, ɵNG_MOD_DEF, ɵtransitiveScopesFor, ɵpatchComponentDefWithScope, ɵNG_INJ_DEF, ɵcompileNgModuleDefs, NgZone, Compiler, COMPILER_OPTIONS, ɵNgModuleFactory, ɵisEnvironmentProviders, ModuleWithComponentFactories, ɵconvertToBitFlags, Injector as Injector$1, InjectFlags as InjectFlags$1, ɵsetAllowDuplicateNgModuleIdsForTest, ɵresetCompiledComponents, ɵsetUnknownElementStrictMode as ɵsetUnknownElementStrictMode$1, ɵsetUnknownPropertyStrictMode as ɵsetUnknownPropertyStrictMode$1, ɵgetUnknownElementStrictMode as ɵgetUnknownElementStrictMode$1, ɵgetUnknownPropertyStrictMode as ɵgetUnknownPropertyStrictMode$1, EnvironmentInjector as EnvironmentInjector$1, ɵflushModuleScopingQueueAsMuchAsPossible } from '@angular/core';
+import { getDebugNode, RendererFactory2 as RendererFactory2$1, InjectionToken as InjectionToken$1, ɵstringify, ɵReflectionCapabilities, Directive, Component, Pipe, NgModule, ɵgetInjectableDef, resolveForwardRef as resolveForwardRef$1, ɵNG_COMP_DEF, ɵRender3NgModuleRef, ApplicationInitStatus, LOCALE_ID as LOCALE_ID$1, ɵDEFAULT_LOCALE_ID, ɵsetLocaleId, ɵRender3ComponentFactory, ɵcompileComponent, ɵNG_DIR_DEF, ɵcompileDirective, ɵNG_PIPE_DEF, ɵcompilePipe, ɵNG_MOD_DEF, ɵtransitiveScopesFor, ɵpatchComponentDefWithScope, ɵNG_INJ_DEF, ɵcompileNgModuleDefs, NgZone, ɵprovideNgZoneChangeDetection, Compiler, COMPILER_OPTIONS, ɵNgModuleFactory, ɵisEnvironmentProviders, ModuleWithComponentFactories, ɵconvertToBitFlags, Injector as Injector$1, InjectFlags as InjectFlags$1, ɵsetAllowDuplicateNgModuleIdsForTest, ɵresetCompiledComponents, ɵsetUnknownElementStrictMode as ɵsetUnknownElementStrictMode$1, ɵsetUnknownPropertyStrictMode as ɵsetUnknownPropertyStrictMode$1, ɵgetUnknownElementStrictMode as ɵgetUnknownElementStrictMode$1, ɵgetUnknownPropertyStrictMode as ɵgetUnknownPropertyStrictMode$1, EnvironmentInjector as EnvironmentInjector$1, ɵflushModuleScopingQueueAsMuchAsPossible } from '@angular/core';
 import { ResourceLoader } from '@angular/compiler';
 import { Subject, Subscription } from 'rxjs';
 
@@ -1635,6 +1635,9 @@ function ngDevModeResetPerfCounters() {
         rendererAppendChild: 0,
         rendererInsertBefore: 0,
         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;
@@ -2114,54 +2117,6 @@ var ChangeDetectionStrategy;
      */
     ChangeDetectionStrategy[ChangeDetectionStrategy["Default"] = 1] = "Default";
 })(ChangeDetectionStrategy || (ChangeDetectionStrategy = {}));
-/**
- * Defines the possible states of the default change detector.
- * @see `ChangeDetectorRef`
- */
-var ChangeDetectorStatus;
-(function (ChangeDetectorStatus) {
-    /**
-     * A state in which, after calling `detectChanges()`, the change detector
-     * state becomes `Checked`, and must be explicitly invoked or reactivated.
-     */
-    ChangeDetectorStatus[ChangeDetectorStatus["CheckOnce"] = 0] = "CheckOnce";
-    /**
-     * A state in which change detection is skipped until the change detector mode
-     * becomes `CheckOnce`.
-     */
-    ChangeDetectorStatus[ChangeDetectorStatus["Checked"] = 1] = "Checked";
-    /**
-     * A state in which change detection continues automatically until explicitly
-     * deactivated.
-     */
-    ChangeDetectorStatus[ChangeDetectorStatus["CheckAlways"] = 2] = "CheckAlways";
-    /**
-     * A state in which a change detector sub tree is not a part of the main tree and
-     * should be skipped.
-     */
-    ChangeDetectorStatus[ChangeDetectorStatus["Detached"] = 3] = "Detached";
-    /**
-     * Indicates that the change detector encountered an error checking a binding
-     * or calling a directive lifecycle method and is now in an inconsistent state. Change
-     * detectors in this state do not detect changes.
-     */
-    ChangeDetectorStatus[ChangeDetectorStatus["Errored"] = 4] = "Errored";
-    /**
-     * Indicates that the change detector has been destroyed.
-     */
-    ChangeDetectorStatus[ChangeDetectorStatus["Destroyed"] = 5] = "Destroyed";
-})(ChangeDetectorStatus || (ChangeDetectorStatus = {}));
-/**
- * Reports whether a given strategy is currently the default for change detection.
- * @param changeDetectionStrategy The strategy to check.
- * @returns True if the given strategy is the current default, false otherwise.
- * @see `ChangeDetectorStatus`
- * @see `ChangeDetectorRef`
- */
-function isDefaultChangeDetectionStrategy(changeDetectionStrategy) {
-    return changeDetectionStrategy == null ||
-        changeDetectionStrategy === ChangeDetectionStrategy.Default;
-}
 
 /**
  * Defines the CSS styles encapsulation policies for the {@link Component} decorator's
@@ -2243,330 +2198,1033 @@ 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.
+ * Returns an index of `classToSearch` in `className` taking token boundaries into account.
  *
+ * `classIndexOf('AB A', 'A', 0)` will be 3 (not 0 since `AB!==A`)
  *
- * # Example
- * ```
- * class MyDirective {
- *   // Generated by Angular Template Compiler
- *   // [Symbol] syntax will not be supported by TypeScript until v2.7
- *   static ɵcmp = defineComponent({
- *     ...
- *   });
- * }
- * ```
- * @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 ɵɵ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.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;
-    });
+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;
+    }
 }
+
 /**
- * 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.
+ * Assigns all attribute values to the provided element via the inferred renderer.
  *
- * See [this explanation](https://hackmd.io/Odw80D0pR6yfsOjg_7XCJg?view) for more details.
+ * This function accepts two forms of attribute entries:
  *
- * @codeGenApi
+ * 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 ɵɵ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$1(type) || getDirectiveDef(type);
-}
-function nonNull(value) {
-    return value !== null;
+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;
 }
 /**
- * @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`).
  */
-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;
-    });
+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 */;
 }
 /**
- * Adds the module metadata that is necessary to compute the module's transitive scope to an
- * existing module definition.
+ * Merges `src` `TAttributes` into `dst` `TAttributes` removing any duplicates in the process.
  *
- * 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.
+ * This merge function keeps the order of attrs same.
  *
- * @codeGenApi
+ * @param dst Location of where the merged `TAttributes` should end up.
+ * @param src `TAttributes` which should be appended to `dst`
  */
-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 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;
 }
 /**
- * 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
+ * Append `key`/`value` to existing `TAttributes` taking region marker and duplicates into account.
  *
- * ```
- * {
- *   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',
- * }
- * ```
- *
-
+ * @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 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 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;
+                }
             }
-            newLookup[publicName] = minifiedKey;
-            if (secondary) {
-                (secondary[publicName] = declaredName);
+        }
+    }
+    // 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);
     }
-    return newLookup;
 }
+
+const NG_TEMPLATE_SELECTOR = 'ng-template';
 /**
- * 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
- */
-const ɵɵdefineDirective = ɵɵdefineComponent;
-/**
- * Create a pipe definition object.
- *
- * # Example
- * ```
- * class MyPipe implements PipeTransform {
- *   // Generated by Angular Template Compiler
- *   static ɵpipe = definePipe({
- *     ...
- *   });
- * }
- * ```
- * @param pipeDef Pipe definition generated by the compiler
+ * Search the `TAttributes` to see if it contains `cssClassToMatch` (case insensitive)
  *
- * @codeGenApi
+ * @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 ɵɵdefinePipe(pipeDef) {
-    return {
-        type: pipeDef.type,
-        name: pipeDef.name,
-        factory: null,
-        pure: pipeDef.pure !== false,
-        standalone: pipeDef.standalone === true,
-        onDestroy: pipeDef.type.prototype.ngOnDestroy || null
-    };
+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;
 }
 /**
- * The following getter methods retrieve the definition from the type. Currently the retrieval
- * honors inheritance, but in the future we may change the rule to require that definitions are
- * explicit. This would require some sort of migration strategy.
+ * Checks whether the `tNode` represents an inline template (e.g. `*ngFor`).
+ *
+ * @param tNode current TNode
  */
-function getComponentDef$1(type) {
-    return type[NG_COMP_DEF] || null;
-}
-function getDirectiveDef(type) {
-    return type[NG_DIR_DEF] || null;
-}
-function getPipeDef$1(type) {
-    return type[NG_PIPE_DEF] || null;
+function isInlineTemplate(tNode) {
+    return tNode.type === 4 /* TNodeType.Container */ && tNode.value !== NG_TEMPLATE_SELECTOR;
 }
 /**
- * Checks whether a given Component, Directive or Pipe is marked as standalone.
- * This will return false if passed anything other than a Component, Directive, or Pipe class
- * See this guide for additional information: https://angular.io/guide/standalone-components
+ * Function that checks whether a given tNode matches tag-based selector and has a valid type.
  *
- * @param type A reference to a Component, Directive or Pipe.
- * @publicApi
+ * 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 isStandalone(type) {
-    const def = getComponentDef$1(type) || getDirectiveDef(type) || getPipeDef$1(type);
-    return def !== null ? def.standalone : false;
-}
-function getNgModuleDef(type, throwNotFound) {
-    const ngModuleDef = type[NG_MOD_DEF] || null;
-    if (!ngModuleDef && throwNotFound === true) {
-        throw new Error(`Type ${stringify(type)} does not have 'ɵmod' property.`);
-    }
-    return ngModuleDef;
+function hasTagAndTypeMatch(tNode, currentSelector, isProjectionMode) {
+    const tagNameToCompare = tNode.type === 4 /* TNodeType.Container */ && !isProjectionMode ? NG_TEMPLATE_SELECTOR : tNode.value;
+    return currentSelector === tagNameToCompare;
 }
-
-// Below are constants for LView indices to help us look up LView members
-// without having to remember the specific indices.
-// Uglify will inline these when minifying so there shouldn't be a cost.
-const HOST = 0;
-const TVIEW = 1;
-const FLAGS = 2;
-const PARENT = 3;
-const NEXT = 4;
-const TRANSPLANTED_VIEWS_TO_REFRESH = 5;
-const T_HOST = 6;
-const CLEANUP = 7;
-const CONTEXT = 8;
-const INJECTOR$1 = 9;
-const RENDERER_FACTORY = 10;
-const RENDERER = 11;
-const SANITIZER = 12;
-const CHILD_HEAD = 13;
-const CHILD_TAIL = 14;
-// FIXME(misko): Investigate if the three declarations aren't all same thing.
-const DECLARATION_VIEW = 15;
-const DECLARATION_COMPONENT_VIEW = 16;
-const DECLARATION_LCONTAINER = 17;
-const PREORDER_HOOK_FLAGS = 18;
-const QUERIES = 19;
-const ID = 20;
-const EMBEDDED_VIEW_INJECTOR = 21;
-const ON_DESTROY_HOOKS = 22;
 /**
- * Size of LView's header. Necessary to adjust for it when setting slots.
+ * A utility function to match an Ivy node static data against a simple CSS selector
  *
- * IMPORTANT: `HEADER_OFFSET` should only be referred to the in the `ɵɵ*` instructions to translate
+ * @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.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$1(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 {
+ *   // Generated by Angular Template Compiler
+ *   static ɵpipe = definePipe({
+ *     ...
+ *   });
+ * }
+ * ```
+ * @param pipeDef Pipe definition generated by the compiler
+ *
+ * @codeGenApi
+ */
+function ɵɵdefinePipe(pipeDef) {
+    return {
+        type: pipeDef.type,
+        name: pipeDef.name,
+        factory: null,
+        pure: pipeDef.pure !== false,
+        standalone: pipeDef.standalone === true,
+        onDestroy: pipeDef.type.prototype.ngOnDestroy || null
+    };
+}
+/**
+ * The following getter methods retrieve the definition from the type. Currently the retrieval
+ * honors inheritance, but in the future we may change the rule to require that definitions are
+ * explicit. This would require some sort of migration strategy.
+ */
+function getComponentDef$1(type) {
+    return type[NG_COMP_DEF] || null;
+}
+function getDirectiveDef(type) {
+    return type[NG_DIR_DEF] || null;
+}
+function getPipeDef$1(type) {
+    return type[NG_PIPE_DEF] || null;
+}
+/**
+ * Checks whether a given Component, Directive or Pipe is marked as standalone.
+ * This will return false if passed anything other than a Component, Directive, or Pipe class
+ * See this guide for additional information: https://angular.io/guide/standalone-components
+ *
+ * @param type A reference to a Component, Directive or Pipe.
+ * @publicApi
+ */
+function isStandalone(type) {
+    const def = getComponentDef$1(type) || getDirectiveDef(type) || getPipeDef$1(type);
+    return def !== null ? def.standalone : false;
+}
+function getNgModuleDef(type, throwNotFound) {
+    const ngModuleDef = type[NG_MOD_DEF] || null;
+    if (!ngModuleDef && throwNotFound === true) {
+        throw new Error(`Type ${stringify(type)} does not have 'ɵmod' property.`);
+    }
+    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.
+// Uglify will inline these when minifying so there shouldn't be a cost.
+const HOST = 0;
+const TVIEW = 1;
+const FLAGS = 2;
+const PARENT = 3;
+const NEXT = 4;
+const TRANSPLANTED_VIEWS_TO_REFRESH = 5;
+const T_HOST = 6;
+const CLEANUP = 7;
+const CONTEXT = 8;
+const INJECTOR$1 = 9;
+const RENDERER_FACTORY = 10;
+const RENDERER = 11;
+const SANITIZER = 12;
+const CHILD_HEAD = 13;
+const CHILD_TAIL = 14;
+// FIXME(misko): Investigate if the three declarations aren't all same thing.
+const DECLARATION_VIEW = 15;
+const DECLARATION_COMPONENT_VIEW = 16;
+const DECLARATION_LCONTAINER = 17;
+const PREORDER_HOOK_FLAGS = 18;
+const QUERIES = 19;
+const ID = 20;
+const EMBEDDED_VIEW_INJECTOR = 21;
+const ON_DESTROY_HOOKS = 22;
+const HYDRATION = 23;
+/**
+ * Size of LView's header. Necessary to adjust for it when setting slots.
+ *
+ * IMPORTANT: `HEADER_OFFSET` should only be referred to the in the `ɵɵ*` instructions to translate
  * instruction index into `LView` index. All other indexes should be in the `LView` index space and
  * there should be no need to refer to `HEADER_OFFSET` anywhere else.
  */
-const HEADER_OFFSET = 23;
+const HEADER_OFFSET = 24;
 // Note: This hack is necessary so we don't erroneously get a circular dependency
 // failure based on types.
 const unusedValueExportToPlacateAjd$4 = 1;
@@ -2598,13 +3256,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;
@@ -2633,7 +3292,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;
@@ -3055,6 +3714,7 @@ function storeLViewOnDestroy(lView, onDestroyCallback) {
 const instructionState = {
     lFrame: createLFrame(null),
     bindingsEnabled: true,
+    skipHydrationRootTNode: null,
 };
 /**
  * In this mode, any changes in bindings will throw an ExpressionChangedAfterChecked error.
@@ -3085,6 +3745,21 @@ function decreaseElementDepthCount() {
 function getBindingsEnabled() {
     return instructionState.bindingsEnabled;
 }
+/**
+ * Returns true if currently inside a skip hydration block.
+ * @returns boolean
+ */
+function isInSkipHydrationBlock$1() {
+    return instructionState.skipHydrationRootTNode !== null;
+}
+/**
+ * Returns true if this is the root TNode of the skip hydration block.
+ * @param tNode the current TNode
+ * @returns boolean
+ */
+function isSkipHydrationRootTNode(tNode) {
+    return instructionState.skipHydrationRootTNode === tNode;
+}
 /**
  * Enables directive matching on elements.
  *
@@ -3107,6 +3782,13 @@ function getBindingsEnabled() {
 function ɵɵenableBindings() {
     instructionState.bindingsEnabled = true;
 }
+/**
+ * Sets a flag to specify that the TNode is in a skip hydration block.
+ * @param tNode the current TNode
+ */
+function enterSkipHydrationBlock(tNode) {
+    instructionState.skipHydrationRootTNode = tNode;
+}
 /**
  * Disables directive matching on element.
  *
@@ -3129,6 +3811,12 @@ function ɵɵenableBindings() {
 function ɵɵdisableBindings() {
     instructionState.bindingsEnabled = false;
 }
+/**
+ * Clears the root skip hydration node when leaving a skip hydration block.
+ */
+function leaveSkipHydrationBlock() {
+    instructionState.skipHydrationRootTNode = null;
+}
 /**
  * Return the current `LView`.
  */
@@ -3553,6 +4241,21 @@ function namespaceHTMLInternal() {
 function getNamespace$1() {
     return instructionState.lFrame.currentNamespace;
 }
+let _wasLastNodeCreated = true;
+/**
+ * Retrieves a global flag that indicates whether the most recent DOM node
+ * was created or hydrated.
+ */
+function wasLastNodeCreated() {
+    return _wasLastNodeCreated;
+}
+/**
+ * Sets a global flag to indicate whether the most recent DOM node
+ * was created or hydrated.
+ */
+function lastNodeWasCreated(flag) {
+    _wasLastNodeCreated = flag;
+}
 
 /**
  * Adds all directive lifecycle hooks from the given `DirectiveDef` to the given `TView`.
@@ -3991,206 +4694,6 @@ function assertPureTNodeType(type) {
     }
 }
 
-/**
- * Assigns all attribute values to the provided element via the inferred renderer.
- *
- * This function accepts two forms of attribute entries:
- *
- * default: (key, value):
- *  attrs = [key1, value1, key2, value2]
- *
- * namespaced: (NAMESPACE_MARKER, uri, name, value)
- *  attrs = [NAMESPACE_MARKER, uri, name, value, NAMESPACE_MARKER, uri, name, value]
- *
- * The `attrs` array can contain a mix of both the default and namespaced entries.
- * The "default" values are set without a marker, but if the function comes across
- * a marker value then it will attempt to set a namespaced value. If the marker is
- * not of a namespaced value then the function will quit and return the index value
- * where it stopped during the iteration of the attrs array.
- *
- * See [AttributeMarker] to understand what the namespace marker value is.
- *
- * Note that this instruction does not support assigning style and class values to
- * an element. See `elementStart` and `elementHostAttrs` to learn how styling values
- * are applied to an element.
- * @param renderer The renderer to be used
- * @param native The element that the attributes will be assigned to
- * @param attrs The attribute array of values that will be assigned to the element
- * @returns the index value that was last accessed in the attributes array
- */
-function setUpAttributes(renderer, native, attrs) {
-    let i = 0;
-    while (i < attrs.length) {
-        const value = attrs[i];
-        if (typeof value === 'number') {
-            // only namespaces are supported. Other value types (such as style/class
-            // entries) are not supported in this function.
-            if (value !== 0 /* AttributeMarker.NamespaceURI */) {
-                break;
-            }
-            // we just landed on the marker value ... therefore
-            // we should skip to the next entry
-            i++;
-            const namespaceURI = attrs[i++];
-            const attrName = attrs[i++];
-            const attrVal = attrs[i++];
-            ngDevMode && ngDevMode.rendererSetAttribute++;
-            renderer.setAttribute(native, attrName, attrVal, namespaceURI);
-        }
-        else {
-            // attrName is string;
-            const attrName = value;
-            const attrVal = attrs[++i];
-            // Standard attributes
-            ngDevMode && ngDevMode.rendererSetAttribute++;
-            if (isAnimationProp(attrName)) {
-                renderer.setProperty(native, attrName, attrVal);
-            }
-            else {
-                renderer.setAttribute(native, attrName, attrVal);
-            }
-            i++;
-        }
-    }
-    // another piece of code may iterate over the same attributes array. Therefore
-    // it may be helpful to return the exact spot where the attributes array exited
-    // whether by running into an unsupported marker or if all the static values were
-    // iterated over.
-    return i;
-}
-/**
- * Test whether the given value is a marker that indicates that the following
- * attribute values in a `TAttributes` array are only the names of attributes,
- * and not name-value pairs.
- * @param marker The attribute marker to test.
- * @returns true if the marker is a "name-only" marker (e.g. `Bindings`, `Template` or `I18n`).
- */
-function isNameOnlyAttributeMarker(marker) {
-    return marker === 3 /* AttributeMarker.Bindings */ || marker === 4 /* AttributeMarker.Template */ ||
-        marker === 6 /* AttributeMarker.I18n */;
-}
-function isAnimationProp(name) {
-    // Perf note: accessing charCodeAt to check for the first character of a string is faster as
-    // compared to accessing a character at index 0 (ex. name[0]). The main reason for this is that
-    // charCodeAt doesn't allocate memory to return a substring.
-    return name.charCodeAt(0) === 64 /* CharCode.AT_SIGN */;
-}
-/**
- * Merges `src` `TAttributes` into `dst` `TAttributes` removing any duplicates in the process.
- *
- * This merge function keeps the order of attrs same.
- *
- * @param dst Location of where the merged `TAttributes` should end up.
- * @param src `TAttributes` which should be appended to `dst`
- */
-function mergeHostAttrs(dst, src) {
-    if (src === null || src.length === 0) {
-        // do nothing
-    }
-    else if (dst === null || dst.length === 0) {
-        // We have source, but dst is empty, just make a copy.
-        dst = src.slice();
-    }
-    else {
-        let srcMarker = -1 /* AttributeMarker.ImplicitAttributes */;
-        for (let i = 0; i < src.length; i++) {
-            const item = src[i];
-            if (typeof item === 'number') {
-                srcMarker = item;
-            }
-            else {
-                if (srcMarker === 0 /* AttributeMarker.NamespaceURI */) {
-                    // Case where we need to consume `key1`, `key2`, `value` items.
-                }
-                else if (srcMarker === -1 /* AttributeMarker.ImplicitAttributes */ ||
-                    srcMarker === 2 /* AttributeMarker.Styles */) {
-                    // Case where we have to consume `key1` and `value` only.
-                    mergeHostAttribute(dst, srcMarker, item, null, src[++i]);
-                }
-                else {
-                    // Case where we have to consume `key1` only.
-                    mergeHostAttribute(dst, srcMarker, item, null, null);
-                }
-            }
-        }
-    }
-    return dst;
-}
-/**
- * Append `key`/`value` to existing `TAttributes` taking region marker and duplicates into account.
- *
- * @param dst `TAttributes` to append to.
- * @param marker Region where the `key`/`value` should be added.
- * @param key1 Key to add to `TAttributes`
- * @param key2 Key to add to `TAttributes` (in case of `AttributeMarker.NamespaceURI`)
- * @param value Value to add or to overwrite to `TAttributes` Only used if `marker` is not Class.
- */
-function mergeHostAttribute(dst, marker, key1, key2, value) {
-    let i = 0;
-    // Assume that new markers will be inserted at the end.
-    let markerInsertPosition = dst.length;
-    // scan until correct type.
-    if (marker === -1 /* AttributeMarker.ImplicitAttributes */) {
-        markerInsertPosition = -1;
-    }
-    else {
-        while (i < dst.length) {
-            const dstValue = dst[i++];
-            if (typeof dstValue === 'number') {
-                if (dstValue === marker) {
-                    markerInsertPosition = -1;
-                    break;
-                }
-                else if (dstValue > marker) {
-                    // We need to save this as we want the markers to be inserted in specific order.
-                    markerInsertPosition = i - 1;
-                    break;
-                }
-            }
-        }
-    }
-    // search until you find place of insertion
-    while (i < dst.length) {
-        const item = dst[i];
-        if (typeof item === 'number') {
-            // since `i` started as the index after the marker, we did not find it if we are at the next
-            // marker
-            break;
-        }
-        else if (item === key1) {
-            // We already have same token
-            if (key2 === null) {
-                if (value !== null) {
-                    dst[i + 1] = value;
-                }
-                return;
-            }
-            else if (key2 === dst[i + 1]) {
-                dst[i + 2] = value;
-                return;
-            }
-        }
-        // Increment counter.
-        i++;
-        if (key2 !== null)
-            i++;
-        if (value !== null)
-            i++;
-    }
-    // insert at location.
-    if (markerInsertPosition !== -1) {
-        dst.splice(markerInsertPosition, 0, marker);
-        i = markerInsertPosition + 1;
-    }
-    dst.splice(i++, 0, key1);
-    if (key2 !== null) {
-        dst.splice(i++, 0, key2);
-    }
-    if (value !== null) {
-        dst.splice(i++, 0, value);
-    }
-}
-
 /// Parent Injector Utils ///////////////////////////////////////////////////////////////
 function hasParentInjector(parentLocation) {
     return parentLocation !== NO_PARENT_INJECTOR;
@@ -6607,6 +7110,17 @@ function nativeRemoveNode(renderer, rNode, isHostElement) {
         nativeRemoveChild(renderer, nativeParent, rNode, isHostElement);
     }
 }
+/**
+ * Removes the contents of a given RElement using a given renderer.
+ *
+ * @param renderer A renderer to be used
+ * @param rElement the native RElement to be cleared
+ */
+function clearElementContents(renderer, rElement) {
+    while (rElement.firstChild) {
+        nativeRemoveChild(renderer, rElement, rElement.firstChild, false);
+    }
+}
 /**
  * Performs the operation of `action` on the node. Typically this involves inserting or removing
  * nodes on the LView or projection boundary.
@@ -8587,802 +9101,794 @@ function forEachSingleProvider(providers, fn) {
 }
 
 /**
- * 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.
+ * 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.
  *
- * @see [Dynamic Components](guide/dynamic-component-loader)
+ * 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:
  *
- * @publicApi
+ * ```
+ * bootstrapApplication(ComponentA, {
+ *   providers: [
+ *     { provide: APP_ID, useValue: 'app-a' },
+ *     // ... other providers ...
+ *   ]
+ * });
  *
- * @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.
+ * bootstrapApplication(ComponentB, {
+ *   providers: [
+ *     { provide: APP_ID, useValue: 'app-b' },
+ *     // ... other providers ...
+ *   ]
+ * });
+ * ```
  *
- * 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.
+ * 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
- *
- * @deprecated Angular no longer requires Component factories. Please use other APIs where
- *     Component class can be used directly.
- */
-class ComponentFactoryResolver$1 {
-}
-ComponentFactoryResolver$1.NULL = ( /* @__PURE__ */new _NullComponentFactoryResolver());
-
-/**
- * Creates an ElementRef from the most recent node.
- *
- * @returns The ElementRef instance to use
- */
-function injectElementRef() {
-    return createElementRef(getCurrentTNode(), getLView());
-}
-/**
- * Creates an ElementRef given a node.
- *
- * @param tNode The node for which you'd like an ElementRef
- * @param lView The view to which the node belongs
- * @returns The ElementRef instance to use
  */
-function createElementRef(tNode, lView) {
-    return new ElementRef(getNativeByTNode(tNode, lView));
-}
+const APP_ID = new InjectionToken('AppId', {
+    providedIn: 'root',
+    factory: () => DEFAULT_APP_ID,
+});
+/** Default value of the `APP_ID` token. */
+const DEFAULT_APP_ID = 'ng';
 /**
- * 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).
- *
+ * A function that is executed when a platform is initialized.
  * @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;
-    }
-}
+const PLATFORM_INITIALIZER = new InjectionToken('Platform Initializer');
 /**
- * @internal
- * @nocollapse
+ * A token that indicates an opaque platform ID.
+ * @publicApi
  */
-ElementRef.__NG_ELEMENT_ID__ = injectElementRef;
+const PLATFORM_ID = new InjectionToken('Platform ID', {
+    providedIn: 'platform',
+    factory: () => 'unknown', // set a default platform name, when none set explicitly
+});
 /**
- * Unwraps `ElementRef` and return the `nativeElement`.
- *
- * @param value value to unwrap
- * @returns `nativeElement` if `ElementRef` otherwise returns value as is.
+ * A [DI token](guide/glossary#di-token "DI token definition") that indicates the root directory of
+ * the application
+ * @publicApi
  */
-function unwrapElementRef(value) {
-    return value instanceof ElementRef ? value.nativeElement : value;
-}
-
+const PACKAGE_ROOT_URL = new InjectionToken('Application Packages Root URL');
+// We keep this token here, rather than the animations package, so that modules that only care
+// about which animations module is loaded (e.g. the CDK) can retrieve it without having to
+// include extra dependencies. See #44970 for more context.
 /**
- * Creates and initializes a custom renderer that implements the `Renderer2` base class.
- *
+ * A [DI token](guide/glossary#di-token "DI token definition") that indicates which animations
+ * module has been loaded.
  * @publicApi
  */
-class RendererFactory2 {
+const ANIMATION_MODULE_TYPE = new InjectionToken('AnimationModuleType');
+
+function escapeTransferStateContent(text) {
+    const escapedText = {
+        '&': '&a;',
+        '"': '&q;',
+        '\'': '&s;',
+        '<': '&l;',
+        '>': '&g;',
+    };
+    return text.replace(/[&"'<>]/g, s => escapedText[s]);
+}
+function unescapeTransferStateContent(text) {
+    const unescapedText = {
+        '&a;': '&',
+        '&q;': '"',
+        '&s;': '\'',
+        '&l;': '<',
+        '&g;': '>',
+    };
+    return text.replace(/&[^;]+;/g, s => unescapedText[s]);
 }
 /**
- * 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`.
+ * Create a `StateKey<T>` that can be used to store value of type T with `TransferState`.
  *
- * 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.
+ * Example:
  *
- * @publicApi
- */
-class Renderer2 {
-}
-/**
- * @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.
+ * ```
+ * const COUNTER_KEY = makeStateKey<number>('counter');
+ * let value = 10;
  *
- * @publicApi
- */
-class Sanitizer {
-}
-/** @nocollapse */
-Sanitizer.ɵprov = ɵɵdefineInjectable({
-    token: Sanitizer,
-    providedIn: 'root',
-    factory: () => null,
-});
-
-/**
- * @description Represents the version of Angular
+ * transferState.set(COUNTER_KEY, value);
+ * ```
  *
  * @publicApi
  */
-class Version {
-    constructor(full) {
-        this.full = full;
-        this.major = full.split('.')[0];
-        this.minor = full.split('.')[1];
-        this.patch = full.split('.').slice(2).join('.');
-    }
-}
-/**
- * @publicApi
- */
-const VERSION = new Version('16.0.0-next.1');
-
-// 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 makeStateKey(key) {
+    return key;
 }
-function getOriginalError(error) {
-    return error[ERROR_ORIGINAL_ERROR];
+function initTransferState() {
+    const transferState = new TransferState();
+    transferState.store = retrieveTransferredState(getDocument(), inject$1(APP_ID));
+    return transferState;
 }
-
 /**
- * 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
+ * A key value store that is transferred from the application on the server side to the application
+ * on the client side.
  *
- * ```
- * class MyErrorHandler implements ErrorHandler {
- *   handleError(error) {
- *     // do something with the exception
- *   }
- * }
+ * The `TransferState` is available as an injectable token.
+ * On the client, just inject this token using DI and use it, it will be lazily initialized.
+ * On the server it's already included if `renderApplication` function is used. Otherwise, import
+ * the `ServerTransferStateModule` module to make the `TransferState` available.
  *
- * @NgModule({
- *   providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
- * })
- * class MyModule {}
- * ```
+ * The values in the store are serialized/deserialized using JSON.stringify/JSON.parse. So only
+ * boolean, number, string, null and non-class objects will be serialized and deserialized in a
+ * non-lossy manner.
  *
  * @publicApi
  */
-class ErrorHandler {
+class TransferState {
     constructor() {
-        /**
-         * @internal
-         */
-        this._console = console;
+        /** @internal */
+        this.store = {};
+        this.onSerializeCallbacks = {};
     }
-    handleError(error) {
-        const originalError = this._findOriginalError(error);
-        this._console.error('ERROR', error);
-        if (originalError) {
-            this._console.error('ORIGINAL ERROR', originalError);
+    /**
+     * Get the value corresponding to a key. Return `defaultValue` if key is not found.
+     */
+    get(key, defaultValue) {
+        return this.store[key] !== undefined ? this.store[key] : defaultValue;
+    }
+    /**
+     * Set the value corresponding to a key.
+     */
+    set(key, value) {
+        this.store[key] = value;
+    }
+    /**
+     * Remove a key from the store.
+     */
+    remove(key) {
+        delete this.store[key];
+    }
+    /**
+     * Test whether a key exists in the store.
+     */
+    hasKey(key) {
+        return this.store.hasOwnProperty(key);
+    }
+    /**
+     * Indicates whether the state is empty.
+     */
+    get isEmpty() {
+        return Object.keys(this.store).length === 0;
+    }
+    /**
+     * Register a callback to provide the value for a key when `toJson` is called.
+     */
+    onSerialize(key, callback) {
+        this.onSerializeCallbacks[key] = callback;
+    }
+    /**
+     * Serialize the current state of the store to JSON.
+     */
+    toJson() {
+        // Call the onSerialize callbacks and put those values into the store.
+        for (const key in this.onSerializeCallbacks) {
+            if (this.onSerializeCallbacks.hasOwnProperty(key)) {
+                try {
+                    this.store[key] = this.onSerializeCallbacks[key]();
+                }
+                catch (e) {
+                    console.warn('Exception in onSerialize callback: ', e);
+                }
+            }
         }
+        return JSON.stringify(this.store);
     }
-    /** @internal */
-    _findOriginalError(error) {
-        let e = error && getOriginalError(error);
-        while (e && getOriginalError(e)) {
-            e = getOriginalError(e);
+}
+/** @nocollapse */
+TransferState.ɵprov = 
+/** @pureOrBreakMyCode */ ɵɵdefineInjectable({
+    token: TransferState,
+    providedIn: 'root',
+    factory: initTransferState,
+});
+function retrieveTransferredState(doc, appId) {
+    // Locate the script tag with the JSON data transferred from the server.
+    // The id of the script tag is set to the Angular appId + 'state'.
+    const script = doc.getElementById(appId + '-state');
+    let initialState = {};
+    if (script && script.textContent) {
+        try {
+            // Avoid using any here as it triggers lint errors in google3 (any is not allowed).
+            initialState = JSON.parse(unescapeTransferStateContent(script.textContent));
+        }
+        catch (e) {
+            console.warn('Exception while restoring TransferState for app ' + appId, e);
         }
-        return e || null;
     }
+    return initialState;
 }
 
-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}`;
+/**
+ * Keys within serialized view data structure to represent various
+ * parts. See the `SerializedView` interface below for additional information.
+ */
+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"
+
+/**
+ * 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;
 }
-const CAMEL_CASE_REGEXP = /([A-Z])/g;
-function camelCaseToDashCase(input) {
-    return input.replace(CAMEL_CASE_REGEXP, (...m) => '-' + m[1].toLowerCase());
+/**
+ * Sets the implementation for the `retrieveHydrationInfo` function.
+ */
+function enableRetrieveHydrationInfoImpl() {
+    _retrieveHydrationInfoImpl = retrieveHydrationInfoImpl;
 }
-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;
+/**
+ * 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;
     }
-    catch (e) {
-        return '[ERROR] Exception while trying to serialize the value';
+    // 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;
 }
-
-/** Verifies that a given type is a Standalone Component. */
-function assertStandaloneComponentType(type) {
-    assertComponentDef(type);
-    const componentDef = getComponentDef$1(type);
-    if (!componentDef.standalone) {
-        throw new RuntimeError(907 /* RuntimeErrorCode.TYPE_IS_NOT_STANDALONE */, `The ${stringifyForError(type)} component is not marked as standalone, ` +
-            `but Angular expects to have a standalone component here. ` +
-            `Please make sure the ${stringifyForError(type)} component has ` +
-            `the \`standalone: true\` flag in the decorator.`);
+function getTextNodeContent(node) {
+    return node.textContent?.replace(/\s/gm, '');
+}
+/**
+ * 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.
+ *
+ * @param node The app's root HTML Element
+ */
+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;
+        }
+    });
+    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();
+        }
     }
 }
-/** Verifies whether a given type is a component */
-function assertComponentDef(type) {
-    if (!getComponentDef$1(type)) {
-        throw new RuntimeError(906 /* RuntimeErrorCode.MISSING_GENERATED_DEF */, `The ${stringifyForError(type)} is not an Angular component, ` +
-            `make sure it has the \`@Component\` decorator.`);
+/**
+ * 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++;
 }
-/** 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 isRNodeClaimedForHydration(node) {
+    return !!node.__claimed;
 }
-/** 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?`;
+function setSegmentHead(hydrationInfo, index, node) {
+    hydrationInfo.segmentHeads ?? (hydrationInfo.segmentHeads = {});
+    hydrationInfo.segmentHeads[index] = node;
+}
+function getSegmentHead(hydrationInfo, index) {
+    return hydrationInfo.segmentHeads?.[index] ?? null;
+}
+/**
+ * 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 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);
     }
-    throw new RuntimeError(-100 /* RuntimeErrorCode.EXPRESSION_CHANGED_AFTER_CHECKED */, msg);
+    return size;
 }
-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]}`;
+function getSerializedContainerViews(hydrationInfo, index) {
+    return hydrationInfo.data[CONTAINERS]?.[index] ?? null;
+}
+/**
+ * Computes the size of a serialized container (the number of root nodes)
+ * by calculating the sum of root nodes in all dehydrated views in this container.
+ */
+function calcSerializedContainerSize(hydrationInfo, index) {
+    const views = getSerializedContainerViews(hydrationInfo, index) ?? [];
+    let numNodes = 0;
+    for (let view of views) {
+        numNodes += view[NUM_ROOT_NODES];
     }
-    return { propName, oldValue, newValue };
+    return numNodes;
 }
+
 /**
- * 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
+ * Represents a component created by a `ComponentFactory`.
+ * Provides access to the component instance and related objects,
+ * and provides the means of destroying the instance.
  *
- * More information on the metadata storage format can be found in `storePropertyBindingMetadata`
- * function description.
+ * @publicApi
  */
-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);
-            }
-        }
+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);
     }
-    return { propName: undefined, oldValue, newValue };
 }
+/**
+ * A simple registry that maps `Components` to generated `ComponentFactory` classes
+ * that can be used to create instances of components.
+ * Use to obtain the factory for a given component type,
+ * then use the factory's `create()` method to create a component of that type.
+ *
+ * Note: since v13, dynamic component creation via
+ * [`ViewContainerRef.createComponent`](api/core/ViewContainerRef#createComponent)
+ * does **not** require resolving component factory: component class can be used directly.
+ *
+ * @publicApi
+ *
+ * @deprecated Angular no longer requires Component factories. Please use other APIs where
+ *     Component class can be used directly.
+ */
+class ComponentFactoryResolver$1 {
+}
+ComponentFactoryResolver$1.NULL = ( /* @__PURE__ */new _NullComponentFactoryResolver());
 
 /**
- * Returns an index of `classToSearch` in `className` taking token boundaries into account.
+ * Creates an ElementRef from the most recent node.
  *
- * `classIndexOf('AB A', 'A', 0)` will be 3 (not 0 since `AB!==A`)
+ * @returns The ElementRef instance to use
+ */
+function injectElementRef() {
+    return createElementRef(getCurrentTNode(), getLView());
+}
+/**
+ * Creates an ElementRef given a node.
  *
- * @param className A string containing classes (whitespace separated)
- * @param classToSearch A class name to locate
- * @param startingIndex Starting location of search
- * @returns an index of the located class (or -1 if not found)
+ * @param tNode The node for which you'd like an ElementRef
+ * @param lView The view to which the node belongs
+ * @returns The ElementRef instance to use
  */
-function classIndexOf(className, classToSearch, startingIndex) {
-    ngDevMode && assertNotEqual(classToSearch, '', 'can not look for "" string.');
-    let end = className.length;
-    while (true) {
-        const foundIndex = className.indexOf(classToSearch, startingIndex);
-        if (foundIndex === -1)
-            return foundIndex;
-        if (foundIndex === 0 || className.charCodeAt(foundIndex - 1) <= 32 /* CharCode.SPACE */) {
-            // Ensure that it has leading whitespace
-            const length = classToSearch.length;
-            if (foundIndex + length === end ||
-                className.charCodeAt(foundIndex + length) <= 32 /* CharCode.SPACE */) {
-                // Ensure that it has trailing whitespace
-                return foundIndex;
-            }
-        }
-        // False positive, keep searching from where we left off.
-        startingIndex = foundIndex + 1;
+function createElementRef(tNode, lView) {
+    return new ElementRef(getNativeByTNode(tNode, lView));
+}
+/**
+ * A wrapper around a native element inside of a View.
+ *
+ * An `ElementRef` is backed by a render-specific element. In the browser, this is usually a DOM
+ * element.
+ *
+ * @security Permitting direct access to the DOM can make your application more vulnerable to
+ * XSS attacks. Carefully review any use of `ElementRef` in your code. For more detail, see the
+ * [Security Guide](https://g.co/ng/security).
+ *
+ * @publicApi
+ */
+// Note: We don't expose things like `Injector`, `ViewContainer`, ... here,
+// i.e. users have to ask for what they need. With that, we can build better analysis tools
+// and could do better codegen in the future.
+class ElementRef {
+    constructor(nativeElement) {
+        this.nativeElement = nativeElement;
     }
 }
+/**
+ * @internal
+ * @nocollapse
+ */
+ElementRef.__NG_ELEMENT_ID__ = injectElementRef;
+/**
+ * Unwraps `ElementRef` and return the `nativeElement`.
+ *
+ * @param value value to unwrap
+ * @returns `nativeElement` if `ElementRef` otherwise returns value as is.
+ */
+function unwrapElementRef(value) {
+    return value instanceof ElementRef ? value.nativeElement : value;
+}
 
-const NG_TEMPLATE_SELECTOR = 'ng-template';
 /**
- * Search the `TAttributes` to see if it contains `cssClassToMatch` (case insensitive)
+ * Creates and initializes a custom renderer that implements the `Renderer2` base class.
  *
- * @param attrs `TAttributes` to search through.
- * @param cssClassToMatch class to match (lowercase)
- * @param isProjectionMode Whether or not class matching should look into the attribute `class` in
- *    addition to the `AttributeMarker.Classes`.
+ * @publicApi
  */
-function isCssClassMatching(attrs, cssClassToMatch, isProjectionMode) {
-    // TODO(misko): The fact that this function needs to know about `isProjectionMode` seems suspect.
-    // It is strange to me that sometimes the class information comes in form of `class` attribute
-    // and sometimes in form of `AttributeMarker.Classes`. Some investigation is needed to determine
-    // if that is the right behavior.
-    ngDevMode &&
-        assertEqual(cssClassToMatch, cssClassToMatch.toLowerCase(), 'Class name expected to be lowercase.');
-    let i = 0;
-    while (i < attrs.length) {
-        let item = attrs[i++];
-        if (isProjectionMode && item === 'class') {
-            item = attrs[i];
-            if (classIndexOf(item.toLowerCase(), cssClassToMatch, 0) !== -1) {
-                return true;
-            }
-        }
-        else if (item === 1 /* AttributeMarker.Classes */) {
-            // We found the classes section. Start searching for the class.
-            while (i < attrs.length && typeof (item = attrs[i++]) == 'string') {
-                // while we have strings
-                if (item.toLowerCase() === cssClassToMatch)
-                    return true;
-            }
-            return false;
-        }
-    }
-    return false;
+class RendererFactory2 {
 }
 /**
- * Checks whether the `tNode` represents an inline template (e.g. `*ngFor`).
+ * Extend this base class to implement custom rendering. By default, Angular
+ * renders a template into DOM. You can use custom rendering to intercept
+ * rendering calls, or to render to something other than DOM.
  *
- * @param tNode current TNode
+ * Create your custom renderer using `RendererFactory2`.
+ *
+ * Use a custom renderer to bypass Angular's templating and
+ * make custom UI changes that can't be expressed declaratively.
+ * For example if you need to set a property or an attribute whose name is
+ * not statically known, use the `setProperty()` or
+ * `setAttribute()` method.
+ *
+ * @publicApi
  */
-function isInlineTemplate(tNode) {
-    return tNode.type === 4 /* TNodeType.Container */ && tNode.value !== NG_TEMPLATE_SELECTOR;
+class Renderer2 {
 }
 /**
- * Function that checks whether a given tNode matches tag-based selector and has a valid type.
+ * @internal
+ * @nocollapse
+ */
+Renderer2.__NG_ELEMENT_ID__ = () => injectRenderer2();
+/** Injects a Renderer2 for the current component. */
+function injectRenderer2() {
+    // We need the Renderer to be based on the component that it's being injected into, however since
+    // DI happens before we've entered its view, `getLView` will return the parent view instead.
+    const lView = getLView();
+    const tNode = getCurrentTNode();
+    const nodeAtIndex = getComponentLViewByIndex(tNode.index, lView);
+    return (isLView(nodeAtIndex) ? nodeAtIndex : lView)[RENDERER];
+}
+
+/**
+ * Sanitizer is used by the views to sanitize potentially dangerous values.
  *
- * Matching can be performed in 2 modes: projection mode (when we project nodes) and regular
- * directive matching mode:
- * - in the "directive matching" mode we do _not_ take TContainer's tagName into account if it is
- * different from NG_TEMPLATE_SELECTOR (value different from NG_TEMPLATE_SELECTOR indicates that a
- * tag name was extracted from * syntax so we would match the same directive twice);
- * - in the "projection" mode, we use a tag name potentially extracted from the * syntax processing
- * (applicable to TNodeType.Container only).
+ * @publicApi
  */
-function hasTagAndTypeMatch(tNode, currentSelector, isProjectionMode) {
-    const tagNameToCompare = tNode.type === 4 /* TNodeType.Container */ && !isProjectionMode ? NG_TEMPLATE_SELECTOR : tNode.value;
-    return currentSelector === tagNameToCompare;
+class Sanitizer {
 }
+/** @nocollapse */
+Sanitizer.ɵprov = ɵɵdefineInjectable({
+    token: Sanitizer,
+    providedIn: 'root',
+    factory: () => null,
+});
+
 /**
- * A utility function to match an Ivy node static data against a simple CSS selector
+ * @description Represents the version of Angular
  *
- * @param node static data of the node to match
- * @param selector The selector to try matching against the node.
- * @param isProjectionMode if `true` we are matching for content projection, otherwise we are doing
- * directive matching.
- * @returns true if node matches the selector.
+ * @publicApi
  */
-function isNodeMatchingSelector(tNode, selector, isProjectionMode) {
-    ngDevMode && assertDefined(selector[0], 'Selector should have a tag name');
-    let mode = 4 /* SelectorFlags.ELEMENT */;
-    const nodeAttrs = tNode.attrs || [];
-    // Find the index of first attribute that has no value, only a name.
-    const nameOnlyMarkerIdx = getNameOnlyMarkerIndex(nodeAttrs);
-    // When processing ":not" selectors, we skip to the next ":not" if the
-    // current one doesn't match
-    let skipToNextSelector = false;
-    for (let i = 0; i < selector.length; i++) {
-        const current = selector[i];
-        if (typeof current === 'number') {
-            // If we finish processing a :not selector and it hasn't failed, return false
-            if (!skipToNextSelector && !isPositive(mode) && !isPositive(current)) {
-                return false;
-            }
-            // If we are skipping to the next :not() and this mode flag is positive,
-            // it's a part of the current :not() selector, and we should keep skipping
-            if (skipToNextSelector && isPositive(current))
-                continue;
-            skipToNextSelector = false;
-            mode = current | (mode & 1 /* SelectorFlags.NOT */);
-            continue;
-        }
-        if (skipToNextSelector)
-            continue;
-        if (mode & 4 /* SelectorFlags.ELEMENT */) {
-            mode = 2 /* SelectorFlags.ATTRIBUTE */ | mode & 1 /* SelectorFlags.NOT */;
-            if (current !== '' && !hasTagAndTypeMatch(tNode, current, isProjectionMode) ||
-                current === '' && selector.length === 1) {
-                if (isPositive(mode))
-                    return false;
-                skipToNextSelector = true;
-            }
-        }
-        else {
-            const selectorAttrValue = mode & 8 /* SelectorFlags.CLASS */ ? current : selector[++i];
-            // special case for matching against classes when a tNode has been instantiated with
-            // class and style values as separate attribute values (e.g. ['title', CLASS, 'foo'])
-            if ((mode & 8 /* SelectorFlags.CLASS */) && tNode.attrs !== null) {
-                if (!isCssClassMatching(tNode.attrs, selectorAttrValue, isProjectionMode)) {
-                    if (isPositive(mode))
-                        return false;
-                    skipToNextSelector = true;
-                }
-                continue;
-            }
-            const attrName = (mode & 8 /* SelectorFlags.CLASS */) ? 'class' : current;
-            const attrIndexInNode = findAttrIndexInNode(attrName, nodeAttrs, isInlineTemplate(tNode), isProjectionMode);
-            if (attrIndexInNode === -1) {
-                if (isPositive(mode))
-                    return false;
-                skipToNextSelector = true;
-                continue;
-            }
-            if (selectorAttrValue !== '') {
-                let nodeAttrValue;
-                if (attrIndexInNode > nameOnlyMarkerIdx) {
-                    nodeAttrValue = '';
-                }
-                else {
-                    ngDevMode &&
-                        assertNotEqual(nodeAttrs[attrIndexInNode], 0 /* AttributeMarker.NamespaceURI */, 'We do not match directives on namespaced attributes');
-                    // we lowercase the attribute value to be able to match
-                    // selectors without case-sensitivity
-                    // (selectors are already in lowercase when generated)
-                    nodeAttrValue = nodeAttrs[attrIndexInNode + 1].toLowerCase();
-                }
-                const compareAgainstClassName = mode & 8 /* SelectorFlags.CLASS */ ? nodeAttrValue : null;
-                if (compareAgainstClassName &&
-                    classIndexOf(compareAgainstClassName, selectorAttrValue, 0) !== -1 ||
-                    mode & 2 /* SelectorFlags.ATTRIBUTE */ && selectorAttrValue !== nodeAttrValue) {
-                    if (isPositive(mode))
-                        return false;
-                    skipToNextSelector = true;
-                }
-            }
-        }
+class Version {
+    constructor(full) {
+        this.full = full;
+        this.major = full.split('.')[0];
+        this.minor = full.split('.')[1];
+        this.patch = full.split('.').slice(2).join('.');
     }
-    return isPositive(mode) || skipToNextSelector;
 }
-function isPositive(mode) {
-    return (mode & 1 /* SelectorFlags.NOT */) === 0;
+/**
+ * @publicApi
+ */
+const VERSION = new Version('16.0.0-next.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`.
+ * Provides a hook for centralized exception handling.
  *
- * NOTE: This will not match namespaced attributes.
+ * 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.
  *
- * Attribute matching depends upon `isInlineTemplate` and `isProjectionMode`.
- * The following table summarizes which types of attributes we attempt to match:
+ * @usageNotes
+ * ### Example
  *
- * ===========================================================================================================
- * 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
- * ===========================================================================================================
+ * ```
+ * class MyErrorHandler implements ErrorHandler {
+ *   handleError(error) {
+ *     // do something with the exception
+ *   }
+ * }
  *
- * @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.
+ * @NgModule({
+ *   providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
+ * })
+ * class MyModule {}
+ * ```
+ *
+ * @publicApi
  */
-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 ErrorHandler {
+    constructor() {
+        /**
+         * @internal
+         */
+        this._console = console;
     }
-}
-function isNodeMatchingSelectorList(tNode, selector, isProjectionMode = false) {
-    for (let i = 0; i < selector.length; i++) {
-        if (isNodeMatchingSelector(tNode, selector[i], isProjectionMode)) {
-            return true;
+    handleError(error) {
+        const originalError = this._findOriginalError(error);
+        this._console.error('ERROR', error);
+        if (originalError) {
+            this._console.error('ORIGINAL ERROR', originalError);
         }
     }
-    return false;
-}
-function getProjectAsAttrValue(tNode) {
-    const nodeAttrs = tNode.attrs;
-    if (nodeAttrs != null) {
-        const ngProjectAsAttrIdx = nodeAttrs.indexOf(5 /* AttributeMarker.ProjectAs */);
-        // only check for ngProjectAs in attribute names, don't accidentally match attribute's value
-        // (attribute names are stored at even indexes)
-        if ((ngProjectAsAttrIdx & 1) === 0) {
-            return nodeAttrs[ngProjectAsAttrIdx + 1];
+    /** @internal */
+    _findOriginalError(error) {
+        let e = error && getOriginalError(error);
+        while (e && getOriginalError(e)) {
+            e = getOriginalError(e);
         }
+        return e || null;
     }
-    return null;
 }
-function getNameOnlyMarkerIndex(nodeAttrs) {
-    for (let i = 0; i < nodeAttrs.length; i++) {
-        const nodeAttr = nodeAttrs[i];
-        if (isNameOnlyAttributeMarker(nodeAttr)) {
-            return i;
-        }
+
+const NG_DEV_MODE = typeof ngDevMode === 'undefined' || !!ngDevMode;
+/**
+ * Internal token that specifies whether hydration is enabled.
+ */
+const IS_HYDRATION_FEATURE_ENABLED = new InjectionToken(NG_DEV_MODE ? 'IS_HYDRATION_FEATURE_ENABLED' : '');
+// By default (in client rendering mode), we remove all the contents
+// of the host element and render an application after that.
+const PRESERVE_HOST_CONTENT_DEFAULT = false;
+/**
+ * Internal token that indicates whether host element content should be
+ * retained during the bootstrap.
+ */
+const PRESERVE_HOST_CONTENT = new InjectionToken(NG_DEV_MODE ? 'PRESERVE_HOST_CONTENT' : '', {
+    providedIn: 'root',
+    factory: () => PRESERVE_HOST_CONTENT_DEFAULT,
+});
+
+function normalizeDebugBindingName(name) {
+    // Attribute names with `$` (eg `x-y$`) are valid per spec, but unsupported by some browsers
+    name = camelCaseToDashCase(name.replace(/[$@]/g, '_'));
+    return `ng-reflect-${name}`;
+}
+const CAMEL_CASE_REGEXP = /([A-Z])/g;
+function camelCaseToDashCase(input) {
+    return input.replace(CAMEL_CASE_REGEXP, (...m) => '-' + m[1].toLowerCase());
+}
+function normalizeDebugBindingValue(value) {
+    try {
+        // Limit the size of the value as otherwise the DOM just gets polluted.
+        return value != null ? value.toString().slice(0, 30) : value;
+    }
+    catch (e) {
+        return '[ERROR] Exception while trying to serialize the value';
     }
-    return nodeAttrs.length;
 }
-function matchTemplateAttribute(attrs, name) {
-    let i = attrs.indexOf(4 /* AttributeMarker.Template */);
-    if (i > -1) {
-        i++;
-        while (i < attrs.length) {
-            const attr = attrs[i];
-            // Return in case we checked all template attrs and are switching to the next section in the
-            // attrs array (that starts with a number that represents an attribute marker).
-            if (typeof attr === 'number')
-                return -1;
-            if (attr === name)
-                return i;
-            i++;
-        }
+
+/** Verifies that a given type is a Standalone Component. */
+function assertStandaloneComponentType(type) {
+    assertComponentDef(type);
+    const componentDef = getComponentDef$1(type);
+    if (!componentDef.standalone) {
+        throw new RuntimeError(907 /* RuntimeErrorCode.TYPE_IS_NOT_STANDALONE */, `The ${stringifyForError(type)} component is not marked as standalone, ` +
+            `but Angular expects to have a standalone component here. ` +
+            `Please make sure the ${stringifyForError(type)} component has ` +
+            `the \`standalone: true\` flag in the decorator.`);
     }
-    return -1;
 }
-/**
- * Checks whether a selector is inside a CssSelectorList
- * @param selector Selector to be checked.
- * @param list List in which to look for the selector.
- */
-function isSelectorInSelectorList(selector, list) {
-    selectorListLoop: for (let i = 0; i < list.length; i++) {
-        const currentSelectorInList = list[i];
-        if (selector.length !== currentSelectorInList.length) {
-            continue;
-        }
-        for (let j = 0; j < selector.length; j++) {
-            if (selector[j] !== currentSelectorInList[j]) {
-                continue selectorListLoop;
-            }
-        }
-        return true;
+/** Verifies whether a given type is a component */
+function assertComponentDef(type) {
+    if (!getComponentDef$1(type)) {
+        throw new RuntimeError(906 /* RuntimeErrorCode.MISSING_GENERATED_DEF */, `The ${stringifyForError(type)} is not an Angular component, ` +
+            `make sure it has the \`@Component\` decorator.`);
     }
-    return false;
 }
-function maybeWrapInNotSelector(isNegativeMode, chunk) {
-    return isNegativeMode ? ':not(' + chunk.trim() + ')' : chunk;
+/** Called when there are multiple component selectors that match a given node */
+function throwMultipleComponentError(tNode, first, second) {
+    throw new RuntimeError(-300 /* RuntimeErrorCode.MULTIPLE_COMPONENTS_MATCH */, `Multiple components match node with tagname ${tNode.value}: ` +
+        `${stringifyForError(first)} and ` +
+        `${stringifyForError(second)}`);
 }
-function stringifyCSSSelector(selector) {
-    let result = selector[0];
-    let i = 1;
-    let mode = 2 /* SelectorFlags.ATTRIBUTE */;
-    let currentChunk = '';
-    let isNegativeMode = false;
-    while (i < selector.length) {
-        let valueOrMarker = selector[i];
-        if (typeof valueOrMarker === 'string') {
-            if (mode & 2 /* SelectorFlags.ATTRIBUTE */) {
-                const attrValue = selector[++i];
-                currentChunk +=
-                    '[' + valueOrMarker + (attrValue.length > 0 ? '="' + attrValue + '"' : '') + ']';
-            }
-            else if (mode & 8 /* SelectorFlags.CLASS */) {
-                currentChunk += '.' + valueOrMarker;
-            }
-            else if (mode & 4 /* SelectorFlags.ELEMENT */) {
-                currentChunk += ' ' + valueOrMarker;
-            }
-        }
-        else {
-            //
-            // Append current chunk to the final result in case we come across SelectorFlag, which
-            // indicates that the previous section of a selector is over. We need to accumulate content
-            // between flags to make sure we wrap the chunk later in :not() selector if needed, e.g.
-            // ```
-            //  ['', Flags.CLASS, '.classA', Flags.CLASS | Flags.NOT, '.classB', '.classC']
-            // ```
-            // should be transformed to `.classA :not(.classB .classC)`.
-            //
-            // Note: for negative selector part, we accumulate content between flags until we find the
-            // next negative flag. This is needed to support a case where `:not()` rule contains more than
-            // one chunk, e.g. the following selector:
-            // ```
-            //  ['', Flags.ELEMENT | Flags.NOT, 'p', Flags.CLASS, 'foo', Flags.CLASS | Flags.NOT, 'bar']
-            // ```
-            // should be stringified to `:not(p.foo) :not(.bar)`
-            //
-            if (currentChunk !== '' && !isPositive(valueOrMarker)) {
-                result += maybeWrapInNotSelector(isNegativeMode, currentChunk);
-                currentChunk = '';
-            }
-            mode = valueOrMarker;
-            // According to CssSelector spec, once we come across `SelectorFlags.NOT` flag, the negative
-            // mode is maintained for remaining chunks of a selector.
-            isNegativeMode = isNegativeMode || !isPositive(mode);
-        }
-        i++;
-    }
-    if (currentChunk !== '') {
-        result += maybeWrapInNotSelector(isNegativeMode, currentChunk);
+/** Throws an ExpressionChangedAfterChecked error if checkNoChanges mode is on. */
+function throwErrorIfNoChangesMode(creationMode, oldValue, currValue, propName) {
+    const field = propName ? ` for '${propName}'` : '';
+    let msg = `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value${field}: '${oldValue}'. Current value: '${currValue}'.`;
+    if (creationMode) {
+        msg +=
+            ` It seems like the view has been created after its parent and its children have been dirty checked.` +
+                ` Has it been created in a change detection hook?`;
     }
-    return result;
+    throw new RuntimeError(-100 /* RuntimeErrorCode.EXPRESSION_CHANGED_AFTER_CHECKED */, msg);
 }
-/**
- * Generates string representation of CSS selector in parsed form.
- *
- * ComponentDef and DirectiveDef are generated with the selector in parsed form to avoid doing
- * additional parsing at runtime (for example, for directive matching). However in some cases (for
- * example, while bootstrapping a component), a string version of the selector is required to query
- * for the host element on the page. This function takes the parsed form of a selector and returns
- * its string representation.
- *
- * @param selectorList selector in parsed form
- * @returns string representation of a given selector
- */
-function stringifyCSSSelectorList(selectorList) {
-    return selectorList.map(stringifyCSSSelector).join(',');
+function constructDetailsForInterpolation(lView, rootIndex, expressionIndex, meta, changedValue) {
+    const [propName, prefix, ...chunks] = meta.split(INTERPOLATION_DELIMITER);
+    let oldValue = prefix, newValue = prefix;
+    for (let i = 0; i < chunks.length; i++) {
+        const slotIdx = rootIndex + i;
+        oldValue += `${lView[slotIdx]}${chunks[i]}`;
+        newValue += `${slotIdx === expressionIndex ? changedValue : lView[slotIdx]}${chunks[i]}`;
+    }
+    return { propName, oldValue, newValue };
 }
 /**
- * Extracts attributes and classes information from a given CSS selector.
- *
- * This function is used while creating a component dynamically. In this case, the host element
- * (that is created dynamically) should contain attributes and classes specified in component's CSS
- * selector.
+ * Constructs an object that contains details for the ExpressionChangedAfterItHasBeenCheckedError:
+ * - property name (for property bindings or interpolations)
+ * - old and new values, enriched using information from metadata
  *
- * @param selector CSS selector in parsed form (in a form of array)
- * @returns object with `attrs` and `classes` fields that contain extracted information
+ * More information on the metadata storage format can be found in `storePropertyBindingMetadata`
+ * function description.
  */
-function extractAttrsAndClassesFromSelector(selector) {
-    const attrs = [];
-    const classes = [];
-    let i = 1;
-    let mode = 2 /* SelectorFlags.ATTRIBUTE */;
-    while (i < selector.length) {
-        let valueOrMarker = selector[i];
-        if (typeof valueOrMarker === 'string') {
-            if (mode === 2 /* SelectorFlags.ATTRIBUTE */) {
-                if (valueOrMarker !== '') {
-                    attrs.push(valueOrMarker, selector[++i]);
-                }
-            }
-            else if (mode === 8 /* SelectorFlags.CLASS */) {
-                classes.push(valueOrMarker);
-            }
+function getExpressionChangedErrorDetails(lView, bindingIndex, oldValue, newValue) {
+    const tData = lView[TVIEW].data;
+    const metadata = tData[bindingIndex];
+    if (typeof metadata === 'string') {
+        // metadata for property interpolation
+        if (metadata.indexOf(INTERPOLATION_DELIMITER) > -1) {
+            return constructDetailsForInterpolation(lView, bindingIndex, bindingIndex, metadata, newValue);
         }
-        else {
-            // According to CssSelector spec, once we come across `SelectorFlags.NOT` flag, the negative
-            // mode is maintained for remaining chunks of a selector. Since attributes and classes are
-            // extracted only for "positive" part of the selector, we can stop here.
-            if (!isPositive(mode))
-                break;
-            mode = valueOrMarker;
+        // metadata for property binding
+        return { propName: metadata, oldValue, newValue };
+    }
+    // metadata is not available for this expression, check if this expression is a part of the
+    // property interpolation by going from the current binding index left and look for a string that
+    // contains INTERPOLATION_DELIMITER, the layout in tView.data for this case will look like this:
+    // [..., 'id�Prefix � and � suffix', null, null, null, ...]
+    if (metadata === null) {
+        let idx = bindingIndex - 1;
+        while (typeof tData[idx] !== 'string' && tData[idx + 1] === null) {
+            idx--;
+        }
+        const meta = tData[idx];
+        if (typeof meta === 'string') {
+            const matches = meta.match(new RegExp(INTERPOLATION_DELIMITER, 'g'));
+            // first interpolation delimiter separates property name from interpolation parts (in case of
+            // property interpolations), so we subtract one from total number of found delimiters
+            if (matches && (matches.length - 1) > bindingIndex - idx) {
+                return constructDetailsForInterpolation(lView, idx, bindingIndex, meta, newValue);
+            }
         }
-        i++;
     }
-    return { attrs, classes };
+    return { propName: undefined, oldValue, newValue };
 }
 
 /** A special value which designates that a value has not changed. */
@@ -9441,6 +9947,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.
  *
@@ -10496,7 +11029,7 @@ function renderChildComponents(hostLView, components) {
         renderComponent(hostLView, components[i]);
     }
 }
-function createLView(parentLView, tView, context, flags, host, tHostNode, rendererFactory, renderer, sanitizer, injector, embeddedViewInjector) {
+function createLView(parentLView, tView, context, flags, host, tHostNode, rendererFactory, renderer, sanitizer, injector, embeddedViewInjector, hydrationInfo) {
     const lView = tView.blueprint.slice();
     lView[HOST] = host;
     lView[FLAGS] = flags | 4 /* LViewFlags.CreationMode */ | 64 /* LViewFlags.Attached */ | 8 /* LViewFlags.FirstLViewPass */;
@@ -10516,6 +11049,7 @@ function createLView(parentLView, tView, context, flags, host, tHostNode, render
     lView[INJECTOR$1] = injector || parentLView && parentLView[INJECTOR$1] || null;
     lView[T_HOST] = tHostNode;
     lView[ID] = getUniqueLViewId();
+    lView[HYDRATION] = hydrationInfo;
     lView[EMBEDDED_VIEW_INJECTOR] = embeddedViewInjector;
     ngDevMode &&
         assertEqual(tView.type == 2 /* TViewType.Embedded */ ? parentLView !== null : true, true, 'Embedded views must have parentLView');
@@ -10878,7 +11412,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;
 }
@@ -10895,7 +11429,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,
@@ -10934,7 +11468,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.
@@ -10954,14 +11489,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.
+    const preserveHostContent = injector.get(PRESERVE_HOST_CONTENT, PRESERVE_HOST_CONTENT_DEFAULT);
+    // When using native Shadow DOM, do not clear host element to allow native slot
+    // projection.
+    const preserveContent = preserveHostContent || encapsulation === ViewEncapsulation.ShadowDom;
+    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 locateHostElement(renderer, elementOrSelector, encapsulation) {
-    // When using native Shadow DOM, do not clear host element to allow native slot projection
-    const preserveContent = encapsulation === ViewEncapsulation.ShadowDom;
-    return renderer.selectRootElement(elementOrSelector, preserveContent);
+function enableApplyRootElementTransformImpl() {
+    _applyRootElementTransformImpl = applyRootElementTransformImpl;
 }
 /**
  * Saves context for this cleanup function in LView.cleanupInstances.
@@ -10973,9 +11552,9 @@ function locateHostElement(renderer, elementOrSelector, encapsulation) {
 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);
@@ -11017,7 +11596,7 @@ function createTNode(tView, tParent, type, index, value, attrs) {
         initialInputs: undefined,
         inputs: null,
         outputs: null,
-        tViews: null,
+        tView: null,
         next: null,
         prev: null,
         projectionNext: null,
@@ -11560,7 +12139,7 @@ function addComponentLogic(lView, hostTNode, def) {
     // Only component views should be added to the view tree directly. Embedded views are
     // accessed through their containers because they may be removed / re-added later.
     const rendererFactory = lView[RENDERER_FACTORY];
-    const componentView = addToViewTree(lView, createLView(lView, tView, null, def.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, native, hostTNode, rendererFactory, rendererFactory.createRenderer(native, def), null, null, null));
+    const componentView = addToViewTree(lView, createLView(lView, tView, null, def.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, native, hostTNode, rendererFactory, rendererFactory.createRenderer(native, def), null, null, null, null));
     // Component view will always be created before any injected LContainers,
     // so this is a regular element, wrap it with the component view
     lView[hostTNode.index] = componentView;
@@ -11693,7 +12272,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.');
@@ -11805,6 +12385,11 @@ function renderComponent(hostLView, componentHostIdx) {
     const componentView = getComponentLViewByIndex(componentHostIdx, hostLView);
     const componentTView = componentView[TVIEW];
     syncViewWithBlueprint(componentTView, componentView);
+    const hostRNode = componentView[HOST];
+    // Populate an LView with hydration info retrieved from the DOM via TransferState.
+    if (hostRNode !== null && componentView[HYDRATION] === null) {
+        componentView[HYDRATION] = retrieveHydrationInfo(hostRNode, componentView[INJECTOR$1]);
+    }
     renderView(componentTView, componentView, componentView[CONTEXT]);
 }
 /**
@@ -12505,13 +13090,13 @@ class ComponentFactory extends ComponentFactory$1 {
         // dynamically. Default to 'div' if this component did not specify any tag name in its selector.
         const elementName = this.componentDef.selectors[0][0] || 'div';
         const hostRNode = rootSelectorOrNode ?
-            locateHostElement(hostRenderer, rootSelectorOrNode, this.componentDef.encapsulation) :
+            locateHostElement(hostRenderer, rootSelectorOrNode, this.componentDef.encapsulation, rootViewInjector) :
             createElementNode(hostRenderer, elementName, getNamespace(elementName));
         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 rootLView = createLView(null, rootTView, null, rootFlags, null, null, rendererFactory, hostRenderer, sanitizer, rootViewInjector, 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
         // `renderView` does that. However as the code is written it is needed because
@@ -12622,7 +13207,7 @@ function createRootComponentTNode(lView, rNode) {
 /**
  * Creates the root component view and the root component node.
  *
- * @param rNode Render host element.
+ * @param hostRNode Render host element.
  * @param rootComponentDef ComponentDef
  * @param rootView The parent view where the host node is stored
  * @param rendererFactory Factory to be used for creating child renderers.
@@ -12631,11 +13216,17 @@ function createRootComponentTNode(lView, rNode) {
  *
  * @returns Component view created
  */
-function createRootComponentView(tNode, rNode, rootComponentDef, rootDirectives, rootView, rendererFactory, hostRenderer, sanitizer) {
+function createRootComponentView(tNode, hostRNode, rootComponentDef, rootDirectives, rootView, rendererFactory, hostRenderer, sanitizer) {
     const tView = rootView[TVIEW];
-    applyRootComponentStyling(rootDirectives, tNode, rNode, hostRenderer);
-    const viewRenderer = rendererFactory.createRenderer(rNode, rootComponentDef);
-    const componentView = createLView(rootView, getOrCreateComponentTView(rootComponentDef), null, rootComponentDef.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, rootView[tNode.index], tNode, rendererFactory, viewRenderer, sanitizer || null, null, null);
+    applyRootComponentStyling(rootDirectives, tNode, hostRNode, hostRenderer);
+    // Hydration info is on the host element and needs to be retreived
+    // and passed to the component LView.
+    let hydrationInfo = null;
+    if (hostRNode !== null) {
+        hydrationInfo = retrieveHydrationInfo(hostRNode, rootView[INJECTOR$1]);
+    }
+    const viewRenderer = rendererFactory.createRenderer(hostRNode, rootComponentDef);
+    const componentView = createLView(rootView, getOrCreateComponentTView(rootComponentDef), null, rootComponentDef.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, rootView[tNode.index], tNode, rendererFactory, viewRenderer, sanitizer || null, null, null, hydrationInfo);
     if (tView.firstCreatePass) {
         markAsComponentHost(tView, tNode, rootDirectives.length - 1);
     }
@@ -13789,15 +14380,122 @@ function detectChanges(component) {
     detectChangesInternal(view[TVIEW], view, component);
 }
 
+/**
+ * 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()) {
+        // TODO: improve error message and use RuntimeError instead.
+        throw new Error(`Unexpected node found during hydration.`);
+    }
+}
+/**
+ * Verifies whether next sibling node exists.
+ */
+function validateSiblingNodeExists(node) {
+    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 */;
+}
+/**
+ * Locate a node in DOM tree that corresponds to a given TNode.
+ *
+ * @param hydrationInfo The hydration annotation data
+ * @param tView the current tView
+ * @param lView the current lView
+ * @param tNode the current tNode
+ * @returns an RNode that represents a given tNode
+ */
+function locateNextRNode(hydrationInfo, tView, lView, tNode) {
+    let native = null;
+    if (tView.firstChild === tNode) {
+        // We create a first node in this view, so we use a reference
+        // to the first child in this DOM segment.
+        native = hydrationInfo.firstChild;
+    }
+    else {
+        // Locate a node based on a previous sibling or a parent node.
+        const previousTNodeParent = tNode.prev === null;
+        const previousTNode = (tNode.prev ?? tNode.parent);
+        ngDevMode &&
+            assertDefined(previousTNode, 'Unexpected state: current TNode does not have a connection ' +
+                'to the previous node or a parent node.');
+        if (isFirstElementInNgContainer(tNode)) {
+            const noOffsetParentIndex = tNode.parent.index - HEADER_OFFSET;
+            native = getSegmentHead(hydrationInfo, noOffsetParentIndex);
+        }
+        else {
+            let previousRElement = getNativeByTNode(previousTNode, lView);
+            if (previousTNodeParent) {
+                native = previousRElement.firstChild;
+            }
+            else {
+                // If the previous node is an element, but it also has container info,
+                // this means that we are processing a node like `<div #vcrTarget>`, which is
+                // represented in the DOM as `<div></div>...<!--container-->`.
+                // In this case, there are nodes *after* this element and we need to skip
+                // all of them to reach an element that we are looking for.
+                const noOffsetPrevSiblingIndex = 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.
+ */
+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.tViews = createTView(2 /* TViewType.Embedded */, tNode, templateFn, decls, vars, tView.directiveRegistry, tView.pipeRegistry, null, tView.schemas, tViewConsts);
+    const embeddedTView = tNode.tView = createTView(2 /* TViewType.Embedded */, tNode, templateFn, decls, vars, tView.directiveRegistry, tView.pipeRegistry, null, tView.schemas, tViewConsts, ssrId);
     if (tView.queries !== null) {
         tView.queries.template(tView, tNode);
         embeddedTView.queries = tView.queries.embeddedTView(tNode);
@@ -13830,8 +14528,10 @@ function ɵɵtemplate(index, templateFn, decls, vars, tagName, attrsIndex, local
     const tNode = tView.firstCreatePass ? templateFirstCreatePass(adjustedIndex, tView, lView, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex) :
         tView.data[adjustedIndex];
     setCurrentTNode(tNode, false);
-    const comment = lView[RENDERER].createComment(ngDevMode ? 'container' : '');
-    appendChild(tView, lView, comment, tNode);
+    const comment = _locateOrCreateContainerAnchor(tView, lView, tNode, index);
+    if (wasLastNodeCreated()) {
+        appendChild(tView, lView, comment, tNode);
+    }
     attachPatchData(comment, lView);
     addToViewTree(lView, lView[adjustedIndex] = createLContainer(comment, lView, comment, tNode));
     if (isDirectiveHost(tNode)) {
@@ -13841,6 +14541,45 @@ function ɵɵtemplate(index, templateFn, decls, vars, tagName, attrsIndex, local
         saveResolvedLocalsInData(lView, tNode, localRefExtractor);
     }
 }
+let _locateOrCreateContainerAnchor = createContainerAnchorImpl;
+/**
+ * Regular creation mode for LContainers and their anchor (comment) nodes.
+ */
+function createContainerAnchorImpl(tView, lView, tNode, index) {
+    lastNodeWasCreated(true);
+    return lView[RENDERER].createComment(ngDevMode ? 'container' : '');
+}
+/**
+ * Enables hydration code path (to lookup existing elements in DOM)
+ * in addition to the regular creation mode for LContainers and their
+ * anchor (comment) nodes.
+ */
+function locateOrCreateContainerAnchorImpl(tView, lView, tNode, index) {
+    const hydrationInfo = lView[HYDRATION];
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1();
+    lastNodeWasCreated(isNodeCreationMode);
+    // Regular creation mode.
+    if (isNodeCreationMode) {
+        return createContainerAnchorImpl(tView, lView, tNode, index);
+    }
+    // Hydration mode, looking up existing elements in DOM.
+    const currentRNode = locateNextRNode(hydrationInfo, tView, lView, tNode);
+    ngDevMode && validateNodeExists(currentRNode);
+    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) {
@@ -13867,6 +14606,48 @@ function ɵɵreference(index) {
     return load(contextLView, HEADER_OFFSET + index);
 }
 
+/**
+ * The name of an attribute that can be added to the hydration boundary node
+ * (component host node) to disable hydration for the content within that boundary.
+ */
+const SKIP_HYDRATION_ATTR_NAME = 'ngSkipHydration';
+/**
+ * Helper function to check if a given node has the 'ngSkipHydration' attribute
+ */
+function hasNgSkipHydrationAttr(tNode) {
+    const SKIP_HYDRATION_ATTR_NAME_LOWER_CASE = SKIP_HYDRATION_ATTR_NAME.toLowerCase();
+    const attrs = tNode.mergedAttrs;
+    if (attrs === null)
+        return false;
+    // only ever look at the attribute name and skip the values
+    for (let i = 0; i < attrs.length; i += 2) {
+        const value = attrs[i];
+        // This is a marker, which means that the static attributes section is over,
+        // so we can exit early.
+        if (typeof value === 'number')
+            return false;
+        if (typeof value === 'string' && value.toLowerCase() === SKIP_HYDRATION_ATTR_NAME_LOWER_CASE) {
+            return true;
+        }
+    }
+    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.
  *
@@ -13951,14 +14732,15 @@ function ɵɵelementStart(index, name, attrsIndex, localRefsIndex) {
     const tNode = tView.firstCreatePass ?
         elementStartFirstCreatePass(adjustedIndex, tView, lView, name, attrsIndex, localRefsIndex) :
         tView.data[adjustedIndex];
-    const native = lView[adjustedIndex] = createElementNode(renderer, name, getNamespace$1());
+    const native = _locateOrCreateElementNode(tView, lView, tNode, renderer, name, index);
+    lView[adjustedIndex] = native;
     const hasDirectives = isDirectiveHost(tNode);
     if (ngDevMode && tView.firstCreatePass) {
         validateElementIsKnown(native, lView, tNode.value, tView.schemas, hasDirectives);
     }
     setCurrentTNode(tNode, true);
     setupStaticAttributes(renderer, native, tNode);
-    if ((tNode.flags & 32 /* TNodeFlags.isDetached */) !== 32 /* TNodeFlags.isDetached */) {
+    if ((tNode.flags & 32 /* TNodeFlags.isDetached */) !== 32 /* TNodeFlags.isDetached */ && wasLastNodeCreated()) {
         // In the i18n case, the translation may have removed this element, so only add it if it is not
         // detached. See `TNodeType.Placeholder` and `LFrame.inI18n` for more context.
         appendChild(tView, lView, native, tNode);
@@ -13998,6 +14780,9 @@ function ɵɵelementEnd() {
     }
     const tNode = currentTNode;
     ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */);
+    if (isSkipHydrationRootTNode(tNode)) {
+        leaveSkipHydrationBlock();
+    }
     decreaseElementDepthCount();
     const tView = getTView();
     if (tView.firstCreatePass) {
@@ -14030,6 +14815,50 @@ function ɵɵelement(index, name, attrsIndex, localRefsIndex) {
     ɵɵelementEnd();
     return ɵɵelement;
 }
+let _locateOrCreateElementNode = (tView, lView, tNode, renderer, name, index) => {
+    lastNodeWasCreated(true);
+    return createElementNode(renderer, name, getNamespace$1());
+};
+/**
+ * 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, index) {
+    const hydrationInfo = lView[HYDRATION];
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1();
+    lastNodeWasCreated(isNodeCreationMode);
+    // Regular creation mode.
+    if (isNodeCreationMode) {
+        return createElementNode(renderer, name, getNamespace$1());
+    }
+    // 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 && markRNodeAsClaimedByHydration(native);
+    // This element might also be an anchor of a view container.
+    if (getSerializedContainerViews(hydrationInfo, index)) {
+        // Important note: this element acts as an anchor, but it's **not** a part
+        // of the embedded view, so we start the segment **after** this element, taking
+        // a reference to the next sibling. For example, the following template:
+        // `<div #vcrTarget>` is represented in the DOM as `<div></div>...<!--container-->`,
+        // so while processing a `<div>` instruction, point to the next sibling as a
+        // start of a segment.
+        ngDevMode && validateNodeExists(native.nextSibling);
+        setSegmentHead(hydrationInfo, index, native.nextSibling);
+    }
+    // Checks if the skip hydration attribute is present during hydration so we know to
+    // skip attempting to hydrate this block.
+    if (hydrationInfo && hasNgSkipHydrationAttr(tNode)) {
+        enterSkipHydrationBlock(tNode);
+        // Since this isn't hydratable, we need to empty the node
+        // so there's no duplicate content after render
+        clearElementContents(renderer, native);
+    }
+    return native;
+}
+function enableLocateOrCreateElementNodeImpl() {
+    _locateOrCreateElementNode = locateOrCreateElementNodeImpl;
+}
 
 function elementContainerStartFirstCreatePass(index, tView, lView, attrsIndex, localRefsIndex) {
     ngDevMode && ngDevMode.firstCreatePass++;
@@ -14075,10 +14904,12 @@ function ɵɵelementContainerStart(index, attrsIndex, localRefsIndex) {
         tView.data[adjustedIndex];
     setCurrentTNode(tNode, true);
     ngDevMode && ngDevMode.rendererCreateComment++;
-    const native = lView[adjustedIndex] =
-        lView[RENDERER].createComment(ngDevMode ? 'ng-container' : '');
-    appendChild(tView, lView, native, tNode);
-    attachPatchData(native, lView);
+    const comment = _locateOrCreateElementContainerNode(tView, lView, tNode, index);
+    lView[adjustedIndex] = comment;
+    if (wasLastNodeCreated()) {
+        appendChild(tView, lView, comment, tNode);
+    }
+    attachPatchData(comment, lView);
     if (isDirectiveHost(tNode)) {
         createDirectivesInstances(tView, lView, tNode);
         executeContentQueries(tView, tNode, lView);
@@ -14130,6 +14961,45 @@ function ɵɵelementContainer(index, attrsIndex, localRefsIndex) {
     ɵɵelementContainerEnd();
     return ɵɵelementContainer;
 }
+let _locateOrCreateElementContainerNode = (tView, lView, tNode, index) => {
+    lastNodeWasCreated(true);
+    return createCommentNode(lView[RENDERER], ngDevMode ? 'ng-container' : '');
+};
+/**
+ * Enables hydration code path (to lookup existing elements in DOM)
+ * in addition to the regular creation mode of comment nodes that
+ * represent <ng-container>'s anchor.
+ */
+function locateOrCreateElementContainerNode(tView, lView, tNode, index) {
+    let comment;
+    const hydrationInfo = lView[HYDRATION];
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1();
+    lastNodeWasCreated(isNodeCreationMode);
+    // Regular creation mode.
+    if (isNodeCreationMode) {
+        return createCommentNode(lView[RENDERER], ngDevMode ? 'ng-container' : '');
+    }
+    // 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 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);
+    }
+    return comment;
+}
+function enableLocateOrCreateElementContainerNodeImpl() {
+    _locateOrCreateElementContainerNode = locateOrCreateElementContainerNode;
+}
 
 /**
  * Returns the current OpaqueViewState instance.
@@ -14158,16 +15028,6 @@ function isPromise(obj) {
 function isSubscribable(obj) {
     return !!obj && typeof obj.subscribe === 'function';
 }
-/**
- * Determine if the argument is an Observable
- *
- * Strictly this tests that the `obj` is `Subscribable`, since `Observable`
- * types need additional methods, such as `lift()`. But it is adequate for our
- * needs since within the Angular framework code we only ever need to use the
- * `subscribe()` method, and RxJS has mechanisms to wrap `Subscribable` objects
- * into `Observable` as needed.
- */
-const isObservable = isSubscribable;
 
 /**
  * Adds an event listener to the current node.
@@ -14330,7 +15190,7 @@ function listenerInternal(tView, lView, renderer, tNode, eventName, listenerFn,
                 const minifiedName = props[i + 1];
                 const directiveInstance = lView[index];
                 const output = directiveInstance[minifiedName];
-                if (ngDevMode && !isObservable(output)) {
+                if (ngDevMode && !isSubscribable(output)) {
                     throw new Error(`@Output ${minifiedName} not initialized in '${directiveInstance.constructor.name}'.`);
                 }
                 const subscription = output.subscribe(listenerFn);
@@ -16474,11 +17334,39 @@ function ɵɵtext(index, value = '') {
     const tNode = tView.firstCreatePass ?
         getOrCreateTNode(tView, adjustedIndex, 1 /* TNodeType.Text */, value, null) :
         tView.data[adjustedIndex];
-    const textNative = lView[adjustedIndex] = createTextNode(lView[RENDERER], value);
-    appendChild(tView, lView, textNative, tNode);
+    const textNative = _locateOrCreateTextNode(tView, lView, tNode, value);
+    lView[adjustedIndex] = textNative;
+    if (wasLastNodeCreated()) {
+        appendChild(tView, lView, textNative, tNode);
+    }
     // Text nodes are self closing.
     setCurrentTNode(tNode, false);
 }
+let _locateOrCreateTextNode = (tView, lView, tNode, value) => {
+    lastNodeWasCreated(true);
+    return createTextNode(lView[RENDERER], value);
+};
+/**
+ * Enables hydration code path (to lookup existing elements in DOM)
+ * in addition to the regular creation mode of text nodes.
+ */
+function locateOrCreateTextNodeImpl(tView, lView, tNode, value) {
+    const hydrationInfo = lView[HYDRATION];
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1();
+    lastNodeWasCreated(isNodeCreationMode);
+    // Regular creation mode.
+    if (isNodeCreationMode) {
+        return createTextNode(lView[RENDERER], value);
+    }
+    // Hydration mode, looking up an existing element in DOM.
+    const textNative = locateNextRNode(hydrationInfo, tView, lView, tNode);
+    ngDevMode && validateMatchingNode(textNative, Node.TEXT_NODE, null, lView, tNode);
+    ngDevMode && markRNodeAsClaimedByHydration(textNative);
+    return textNative;
+}
+function enableLocateOrCreateTextNodeImpl() {
+    _locateOrCreateTextNode = locateOrCreateTextNodeImpl;
+}
 
 /**
  *
@@ -18156,7 +19044,7 @@ function getTIcu(tView, index) {
     if (value === null || typeof value === 'string')
         return null;
     if (ngDevMode &&
-        !(value.hasOwnProperty('tViews') || value.hasOwnProperty('currentCaseLViewIndex'))) {
+        !(value.hasOwnProperty('tView') || value.hasOwnProperty('currentCaseLViewIndex'))) {
         throwError('We expect to get \'null\'|\'TIcu\'|\'TIcuContainer\', but got: ' + value);
     }
     // Here the `value.hasOwnProperty('currentCaseLViewIndex')` is a polymorphic read as it can be
@@ -18185,7 +19073,7 @@ function getTIcu(tView, index) {
 function setTIcu(tView, index, tIcu) {
     const tNode = tView.data[index];
     ngDevMode &&
-        assertEqual(tNode === null || tNode.hasOwnProperty('tViews'), true, 'We expect to get \'null\'|\'TIcuContainer\'');
+        assertEqual(tNode === null || tNode.hasOwnProperty('tView'), true, 'We expect to get \'null\'|\'TIcuContainer\'');
     if (tNode === null) {
         tView.data[index] = tIcu;
     }
@@ -20132,7 +21020,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.
@@ -20142,7 +21030,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
@@ -20163,7 +21051,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
@@ -20192,9 +21081,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();
@@ -20642,7 +21534,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.
@@ -21479,9 +22372,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) {
-        const embeddedTView = this._declarationTContainer.tViews;
-        const embeddedLView = createLView(this._declarationLView, embeddedTView, context, 16 /* LViewFlags.CheckAlways */, null, embeddedTView.declTNode, null, null, null, null, injector || null);
+        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, hydrationInfo || null);
         const declarationLContainer = this._declarationLView[this._declarationTContainer.index];
         ngDevMode && assertLContainer(declarationLContainer);
         embeddedLView[DECLARATION_LCONTAINER] = declarationLContainer;
@@ -21510,12 +22418,118 @@ function injectTemplateRef() {
  */
 function createTemplateRef(hostTNode, hostLView) {
     if (hostTNode.type & 4 /* TNodeType.Container */) {
-        ngDevMode && assertDefined(hostTNode.tViews, 'TView must be allocated');
+        ngDevMode && assertDefined(hostTNode.tView, 'TView must be allocated');
         return new R3TemplateRef(hostLView, hostTNode, createElementRef(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.
  *
@@ -21600,8 +22614,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) {
@@ -21671,11 +22686,17 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
                 environmentInjector = result;
             }
         }
-        const componentRef = componentFactory.create(contextInjector, projectableNodes, undefined, environmentInjector);
-        this.insert(componentRef.hostView, index);
+        const componentDef = getComponentDef$1(componentFactory.componentType ?? {});
+        const dehydratedView = findMatchingDehydratedView(this._lContainer, componentDef?.id ?? null);
+        const rNode = dehydratedView?.firstChild ?? null;
+        const componentRef = componentFactory.create(contextInjector, projectableNodes, rNode, environmentInjector);
+        this.insertImpl(componentRef.hostView, index, !!dehydratedView);
         return componentRef;
     }
     insert(viewRef, index) {
+        return this.insertImpl(viewRef, index, false);
+    }
+    insertImpl(viewRef, index, skipDomInsertion) {
         const lView = viewRef._lView;
         const tView = lView[TVIEW];
         if (ngDevMode && viewRef.destroyed) {
@@ -21706,11 +22727,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);
@@ -21767,8 +22790,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
@@ -21782,31 +22803,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) {
@@ -22784,6 +23868,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
@@ -23371,7 +24456,7 @@ class TestBedCompiler {
         // every component.
         this.componentToModuleScope.clear();
         const parentInjector = this.platform.injector;
-        this.testModuleRef = new ɵRender3NgModuleRef(this.testModuleType, parentInjector);
+        this.testModuleRef = new ɵRender3NgModuleRef(this.testModuleType, parentInjector, []);
         // ApplicationInitStatus.runInitializers() is marked @internal to core.
         // Cast it to any before accessing it.
         this.testModuleRef.injector.get(ApplicationInitStatus).runInitializers();
@@ -23795,7 +24880,7 @@ class TestBedCompiler {
         });
         const ngZone = new NgZone({ enableLongStackTrace: true });
         const providers = [
-            { provide: NgZone, useValue: ngZone },
+            ɵprovideNgZoneChangeDetection(ngZone),
             { provide: Compiler, useFactory: () => new R3TestCompiler(this) },
             ...this.providers,
             ...this.providerOverrides,