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

package/fesm2020/testing.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v16.0.0-next.0
+ * @license Angular v16.0.0-next.2
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -1635,6 +1635,8 @@ function ngDevModeResetPerfCounters() {
         rendererAppendChild: 0,
         rendererInsertBefore: 0,
         rendererCreateComment: 0,
+        hydratedNodes: 0,
+        hydratedComponents: 0,
     };
     // Make sure to refer to ngDevMode as ['ngDevMode'] for closure.
     const allowNgDevModeTrue = locationString.indexOf('ngDevMode=false') === -1;
@@ -2114,54 +2116,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
@@ -2233,6 +2187,15 @@ const NG_FACTORY_DEF = getClosureSafeProperty({ ɵfac: getClosureSafeProperty })
  */
 // TODO(misko): This is wrong. The NG_ELEMENT_ID should never be minified.
 const NG_ELEMENT_ID = getClosureSafeProperty({ __NG_ELEMENT_ID__: getClosureSafeProperty });
+/**
+ * The `NG_ENV_ID` field on a DI token indicates special processing in the `EnvironmentInjector`:
+ * getting such tokens from the `EnvironmentInjector` will bypass the standard DI resolution
+ * strategy and instead will return implementation produced by the `NG_ENV_ID` factory function.
+ *
+ * This particular retrieval of DI tokens is mostly done to eliminate circular dependencies and
+ * improve tree-shaking.
+ */
+const NG_ENV_ID = getClosureSafeProperty({ __NG_ENV_ID__: getClosureSafeProperty });
 
 /** Counter used to generate unique IDs for component definitions. */
 let componentDefCount = 0;
@@ -2549,6 +2512,8 @@ 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.
  *
@@ -2556,7 +2521,7 @@ const EMBEDDED_VIEW_INJECTOR = 21;
  * 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 = 22;
+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;
@@ -3032,10 +2997,20 @@ function updateTransplantedViewCount(lContainer, amount) {
         parent = parent[PARENT];
     }
 }
+/**
+ * Stores a LView-specific destroy callback.
+ */
+function storeLViewOnDestroy(lView, onDestroyCallback) {
+    if (lView[ON_DESTROY_HOOKS] === null) {
+        lView[ON_DESTROY_HOOKS] = [];
+    }
+    lView[ON_DESTROY_HOOKS].push(onDestroyCallback);
+}
 
 const instructionState = {
     lFrame: createLFrame(null),
     bindingsEnabled: true,
+    skipHydrationRootTNode: null,
 };
 /**
  * In this mode, any changes in bindings will throw an ExpressionChangedAfterChecked error.
@@ -3066,6 +3041,21 @@ function decreaseElementDepthCount() {
 function getBindingsEnabled() {
     return instructionState.bindingsEnabled;
 }
+/**
+ * Returns true if currently inside a skip hydration block.
+ * @returns boolean
+ */
+function isInSkipHydrationBlock() {
+    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.
  *
@@ -3088,6 +3078,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.
  *
@@ -3110,6 +3107,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`.
  */
@@ -3534,6 +3537,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`.
@@ -3709,8 +3727,9 @@ function callHooks(currentView, arr, initPhase, currentNodeIndex) {
         }
         else {
             const isInitHook = arr[i] < 0;
-            if (isInitHook)
+            if (isInitHook) {
                 currentView[PREORDER_HOOK_FLAGS] += 65536 /* PreOrderHookFlags.NumberOfInitHooksCalledIncrementer */;
+            }
             if (lastNodeIndexFound < nodeIndexLimit || nodeIndexLimit == -1) {
                 callHook(currentView, initPhase, arr, i);
                 currentView[PREORDER_HOOK_FLAGS] =
@@ -6241,10 +6260,6 @@ function cleanUpView(tView, lView) {
 function processCleanups(tView, lView) {
     const tCleanup = tView.cleanup;
     const lCleanup = lView[CLEANUP];
-    // `LCleanup` contains both share information with `TCleanup` as well as instance specific
-    // information appended at the end. We need to know where the end of the `TCleanup` information
-    // is, and we track this with `lastLCleanupIndex`.
-    let lastLCleanupIndex = -1;
     if (tCleanup !== null) {
         for (let i = 0; i < tCleanup.length - 1; i += 2) {
             if (typeof tCleanup[i] === 'string') {
@@ -6254,29 +6269,33 @@ function processCleanups(tView, lView) {
                 ngDevMode && assertNumber(targetIdx, 'cleanup target must be a number');
                 if (targetIdx >= 0) {
                     // unregister
-                    lCleanup[lastLCleanupIndex = targetIdx]();
+                    lCleanup[targetIdx]();
                 }
                 else {
                     // Subscription
-                    lCleanup[lastLCleanupIndex = -targetIdx].unsubscribe();
+                    lCleanup[-targetIdx].unsubscribe();
                 }
                 i += 2;
             }
             else {
                 // This is a cleanup function that is grouped with the index of its context
-                const context = lCleanup[lastLCleanupIndex = tCleanup[i + 1]];
+                const context = lCleanup[tCleanup[i + 1]];
                 tCleanup[i].call(context);
             }
         }
     }
     if (lCleanup !== null) {
-        for (let i = lastLCleanupIndex + 1; i < lCleanup.length; i++) {
-            const instanceCleanupFn = lCleanup[i];
-            ngDevMode && assertFunction(instanceCleanupFn, 'Expecting instance cleanup function.');
-            instanceCleanupFn();
-        }
         lView[CLEANUP] = null;
     }
+    const destroyHooks = lView[ON_DESTROY_HOOKS];
+    if (destroyHooks !== null) {
+        for (let i = 0; i < destroyHooks.length; i++) {
+            const destroyHooksFn = destroyHooks[i];
+            ngDevMode && assertFunction(destroyHooksFn, 'Expecting destroy hook to be a function.');
+            destroyHooksFn();
+        }
+        lView[ON_DESTROY_HOOKS] = null;
+    }
 }
 /** Calls onDestroy hooks for this view */
 function executeOnDestroys(tView, lView) {
@@ -6587,6 +6606,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.
@@ -8286,6 +8316,9 @@ class R3Injector extends EnvironmentInjector {
     }
     get(token, notFoundValue = THROW_IF_NOT_FOUND, flags = InjectFlags.Default) {
         this.assertNotDestroyed();
+        if (token.hasOwnProperty(NG_ENV_ID)) {
+            return token[NG_ENV_ID](this);
+        }
         flags = convertToBitFlags(flags);
         // Set the injection context.
         const previousInjector = setCurrentInjector(this);
@@ -8563,6 +8596,328 @@ function forEachSingleProvider(providers, fn) {
     }
 }
 
+/**
+ * A [DI token](guide/glossary#di-token "DI token definition") representing a unique string ID, used
+ * primarily for prefixing application attributes and CSS styles when
+ * {@link ViewEncapsulation#Emulated ViewEncapsulation.Emulated} is being used.
+ *
+ * BY default, the value is randomly generated and assigned to the application by Angular.
+ * To provide a custom ID value, use a DI provider <!-- TODO: provider --> to configure
+ * the root {@link Injector} that uses this token.
+ *
+ * @publicApi
+ */
+const APP_ID = new InjectionToken('AppId', {
+    providedIn: 'root',
+    factory: _appIdRandomProviderFactory,
+});
+function _appIdRandomProviderFactory() {
+    return `${_randomChar()}${_randomChar()}${_randomChar()}`;
+}
+/**
+ * Providers that generate a random `APP_ID_TOKEN`.
+ * @publicApi
+ */
+const APP_ID_RANDOM_PROVIDER = {
+    provide: APP_ID,
+    useFactory: _appIdRandomProviderFactory,
+    deps: [],
+};
+function _randomChar() {
+    return String.fromCharCode(97 + Math.floor(Math.random() * 25));
+}
+/**
+ * A function that is executed when a platform is initialized.
+ * @publicApi
+ */
+const PLATFORM_INITIALIZER = new InjectionToken('Platform Initializer');
+/**
+ * A token that indicates an opaque platform ID.
+ * @publicApi
+ */
+const PLATFORM_ID = new InjectionToken('Platform ID', {
+    providedIn: 'platform',
+    factory: () => 'unknown', // set a default platform name, when none set explicitly
+});
+/**
+ * A [DI token](guide/glossary#di-token "DI token definition") that indicates the root directory of
+ * the application
+ * @publicApi
+ */
+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.
+/**
+ * A [DI token](guide/glossary#di-token "DI token definition") that indicates which animations
+ * module has been loaded.
+ * @publicApi
+ */
+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]);
+}
+/**
+ * Create a `StateKey<T>` that can be used to store value of type T with `TransferState`.
+ *
+ * Example:
+ *
+ * ```
+ * const COUNTER_KEY = makeStateKey<number>('counter');
+ * let value = 10;
+ *
+ * transferState.set(COUNTER_KEY, value);
+ * ```
+ *
+ * @publicApi
+ */
+function makeStateKey(key) {
+    return key;
+}
+function initTransferState() {
+    const transferState = new TransferState();
+    transferState.store = retrieveTransferredState(getDocument(), inject$1(APP_ID));
+    return transferState;
+}
+/**
+ * A key value store that is transferred from the application on the server side to the application
+ * on the client side.
+ *
+ * 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.
+ *
+ * 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 TransferState {
+    constructor() {
+        /** @internal */
+        this.store = {};
+        this.onSerializeCallbacks = {};
+    }
+    /**
+     * 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);
+    }
+}
+/** @nocollapse */
+TransferState.ɵprov = 
+/** @pureOrBreakMyCode */ ɵɵdefineInjectable({
+    token: TransferState,
+    providedIn: 'root',
+    factory: initTransferState,
+});
+function retrieveTransferredState(doc, appId) {
+    // Locate the script tag with the JSON data transferred from the server.
+    // The id of the script tag is set to the Angular appId + 'state'.
+    const script = doc.getElementById(appId + '-state');
+    let initialState = {};
+    if (script && script.textContent) {
+        try {
+            // Avoid using any here as it triggers lint errors in google3 (any is not allowed).
+            initialState = JSON.parse(unescapeTransferStateContent(script.textContent));
+        }
+        catch (e) {
+            console.warn('Exception while restoring TransferState for app ' + appId, e);
+        }
+    }
+    return initialState;
+}
+
+/* Represents a key in NghDom that holds information about <ng-container>s. */
+const ELEMENT_CONTAINERS = 'e';
+
+/**
+ * The name of the key used in the TransferState collection,
+ * where hydration information is located.
+ */
+const TRANSFER_STATE_TOKEN_ID = '__ɵnghData__';
+/**
+ * Lookup key used to reference DOM hydration data (ngh) in `TransferState`.
+ */
+const NGH_DATA_KEY = makeStateKey(TRANSFER_STATE_TOKEN_ID);
+/**
+ * The name of the attribute that would be added to host component
+ * nodes and contain a reference to a particular slot in transferred
+ * state that contains the necessary hydration info for this component.
+ */
+const NGH_ATTR_NAME = 'ngh';
+/**
+ * Reference to a function that reads `ngh` attribute value from a given RNode
+ * and retrieves hydration information from the TransferState using that value
+ * as an index. Returns `null` by default, when hydration is not enabled.
+ *
+ * @param rNode Component's host element.
+ * @param injector Injector that this component has access to.
+ */
+let _retrieveHydrationInfoImpl = (rNode, injector) => null;
+function retrieveHydrationInfoImpl(rNode, injector) {
+    const nghAttrValue = rNode.getAttribute(NGH_ATTR_NAME);
+    if (nghAttrValue == null)
+        return null;
+    let data = {};
+    // An element might have an empty `ngh` attribute value (e.g. `<comp ngh="" />`),
+    // which means that no special annotations are required. Do not attempt to read
+    // from the TransferState in this case.
+    if (nghAttrValue !== '') {
+        const transferState = injector.get(TransferState, null, { optional: true });
+        if (transferState !== null) {
+            const nghData = transferState.get(NGH_DATA_KEY, []);
+            // The nghAttrValue is always a number referencing an index
+            // in the hydration TransferState data.
+            data = nghData[Number(nghAttrValue)];
+            // If the `ngh` attribute exists and has a non-empty value,
+            // the hydration info *must* be present in the TransferState.
+            // If there is no data for some reasons, this is an error.
+            ngDevMode && assertDefined(data, 'Unable to retrieve hydration info from the TransferState.');
+        }
+    }
+    const dehydratedView = {
+        data,
+        firstChild: rNode.firstChild ?? null,
+    };
+    // The `ngh` attribute is cleared from the DOM node now
+    // that the data has been retrieved.
+    rNode.removeAttribute(NGH_ATTR_NAME);
+    // Note: don't check whether this node was claimed for hydration,
+    // because this node might've been previously claimed while processing
+    // template instructions.
+    ngDevMode && markRNodeAsClaimedByHydration(rNode, /* checkIfAlreadyClaimed */ false);
+    ngDevMode && ngDevMode.hydratedComponents++;
+    return dehydratedView;
+}
+/**
+ * Sets the implementation for the `retrieveNghInfo` function.
+ */
+function enableRetrieveHydrationInfoImpl() {
+    _retrieveHydrationInfoImpl = retrieveHydrationInfoImpl;
+}
+/**
+ * Retrieves hydration info by reading the value from the `ngh` attribute
+ * and accessing a corresponding slot in TransferState storage.
+ */
+function retrieveHydrationInfo(rNode, injector) {
+    return _retrieveHydrationInfoImpl(rNode, injector);
+}
+/**
+ * Retrieves an instance of a component LView from a given ViewRef.
+ * Returns an instance of a component LView or `null` in case of an embedded view.
+ */
+function getComponentLViewForHydration(viewRef) {
+    // Reading an internal field from `ViewRef` instance.
+    let lView = viewRef._lView;
+    const tView = lView[TVIEW];
+    // A registered ViewRef might represent an instance of an
+    // embedded view, in which case we do not need to annotate it.
+    if (tView.type === 2 /* TViewType.Embedded */) {
+        return null;
+    }
+    // Check if it's a root view and if so, retrieve component's
+    // LView from the first slot after the header.
+    if (isRootView(lView)) {
+        lView = lView[HEADER_OFFSET];
+    }
+    return lView;
+}
+/**
+ * Marks a node as "claimed" by hydration process.
+ * This is needed to make assessments in tests whether
+ * the hydration process handled all nodes.
+ */
+function markRNodeAsClaimedByHydration(node, checkIfAlreadyClaimed = true) {
+    if (!ngDevMode) {
+        throw new Error('Calling `markRNodeAsClaimedByHydration` in prod mode ' +
+            'is not supported and likely a mistake.');
+    }
+    if (checkIfAlreadyClaimed && isRNodeClaimedForHydration(node)) {
+        throw new Error('Trying to claim a node, which was claimed already.');
+    }
+    node.__claimed = true;
+    ngDevMode.hydratedNodes++;
+}
+function isRNodeClaimedForHydration(node) {
+    return !!node.__claimed;
+}
+function storeNgContainerInfo(hydrationInfo, index, firstChild) {
+    hydrationInfo.ngContainers ?? (hydrationInfo.ngContainers = {});
+    hydrationInfo.ngContainers[index] = { firstChild };
+}
+function getNgContainerSize(hydrationInfo, index) {
+    return hydrationInfo.data[ELEMENT_CONTAINERS]?.[index] ?? null;
+}
+
 /**
  * Represents a component created by a `ComponentFactory`.
  * Provides access to the component instance and related objects,
@@ -8742,7 +9097,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('16.0.0-next.0');
+const VERSION = new Version('16.0.0-next.2');
 
 // This default value is when checking the hierarchy for a token.
 //
@@ -8823,6 +9178,23 @@ class ErrorHandler {
     }
 }
 
+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, '_'));
@@ -10473,7 +10845,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 */;
@@ -10493,6 +10865,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');
@@ -10555,6 +10928,7 @@ function createTNodeAtIndex(tView, index, type, name, attrs) {
                 // In the case of i18n the `currentTNode` may already be linked, in which case we don't want
                 // to break the links which i18n created.
                 currentTNode.next = tNode;
+                tNode.prev = currentTNode;
             }
         }
     }
@@ -10933,10 +11307,19 @@ function createViewBlueprint(bindingStartIndex, initialViewLength) {
  * @param rendererFactory Factory function to create renderer instance.
  * @param elementOrSelector Render element or CSS selector to locate the element.
  * @param encapsulation View Encapsulation defined for component that requests host element.
- */
-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;
+ * @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;
     return renderer.selectRootElement(elementOrSelector, preserveContent);
 }
 /**
@@ -10945,24 +11328,24 @@ function locateHostElement(renderer, elementOrSelector, encapsulation) {
  * On the first template pass, saves in TView:
  * - Cleanup function
  * - Index of context we just saved in LView.cleanupInstances
- *
- * This function can also be used to store instance specific cleanup fns. In that case the `context`
- * is `null` and the function is store in `LView` (rather than it `TView`).
  */
 function storeCleanupWithContext(tView, lView, context, cleanupFn) {
     const lCleanup = getOrCreateLViewCleanup(lView);
-    if (context === null) {
-        // If context is null that this is instance specific callback. These callbacks can only be
-        // inserted after template shared instances. For this reason in ngDevMode we freeze the TView.
-        if (ngDevMode) {
-            Object.freeze(getOrCreateTViewCleanup(tView));
-        }
-        lCleanup.push(cleanupFn);
+    // 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.
+    ngDevMode &&
+        assertDefined(context, 'Cleanup context is mandatory when registering framework-level destroy hooks');
+    lCleanup.push(context);
+    if (tView.firstCreatePass) {
+        getOrCreateTViewCleanup(tView).push(cleanupFn, lCleanup.length - 1);
     }
     else {
-        lCleanup.push(context);
-        if (tView.firstCreatePass) {
-            getOrCreateTViewCleanup(tView).push(cleanupFn, lCleanup.length - 1);
+        // Make sure that no new framework-level cleanup functions are registered after the first
+        // template pass is done (and TView data structures are meant to fully constructed).
+        if (ngDevMode) {
+            Object.freeze(getOrCreateTViewCleanup(tView));
         }
     }
 }
@@ -10993,8 +11376,9 @@ function createTNode(tView, tParent, type, index, value, attrs) {
         initialInputs: undefined,
         inputs: null,
         outputs: null,
-        tViews: null,
+        tView: null,
         next: null,
+        prev: null,
         projectionNext: null,
         child: null,
         parent: tParent,
@@ -11204,7 +11588,6 @@ function resolveDirectives(tView, lView, tNode, localRefs) {
     // Please make sure to have explicit type for `exportsMap`. Inferred type triggers bug in
     // tsickle.
     ngDevMode && assertFirstCreatePass(tView);
-    let hasDirectives = false;
     if (getBindingsEnabled()) {
         const exportsMap = localRefs === null ? null : { '': -1 };
         const matchResult = findDirectiveDefMatches(tView, tNode);
@@ -11217,7 +11600,6 @@ function resolveDirectives(tView, lView, tNode, localRefs) {
             [directiveDefs, hostDirectiveDefs] = matchResult;
         }
         if (directiveDefs !== null) {
-            hasDirectives = true;
             initializeDirectives(tView, lView, tNode, directiveDefs, exportsMap, hostDirectiveDefs);
         }
         if (exportsMap)
@@ -11225,7 +11607,6 @@ function resolveDirectives(tView, lView, tNode, localRefs) {
     }
     // Merge the template attrs last so that they have the highest priority.
     tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, tNode.attrs);
-    return hasDirectives;
 }
 /** Initializes the data structures necessary for a list of directives to be instantiated. */
 function initializeDirectives(tView, lView, tNode, directives, exportsMap, hostDirectiveDefs) {
@@ -11538,7 +11919,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;
@@ -11783,6 +12164,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]);
 }
 /**
@@ -12156,7 +12542,7 @@ class ViewRef {
         destroyLView(this._lView[TVIEW], this._lView);
     }
     onDestroy(callback) {
-        storeCleanupWithContext(this._lView[TVIEW], this._lView, null, callback);
+        storeLViewOnDestroy(this._lView, callback);
     }
     /**
      * Marks a view and all of its ancestors dirty.
@@ -12483,13 +12869,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 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
@@ -12600,7 +12986,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.
@@ -12609,11 +12995,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);
     }
@@ -13091,41 +13483,19 @@ function validateMappings(bindingType, def, hostDirectiveBindings) {
     }
 }
 
-let _symbolIterator = null;
-function getSymbolIterator() {
-    if (!_symbolIterator) {
-        const Symbol = _global$1['Symbol'];
-        if (Symbol && Symbol.iterator) {
-            _symbolIterator = Symbol.iterator;
-        }
-        else {
-            // es6-shim specific logic
-            const keys = Object.getOwnPropertyNames(Map.prototype);
-            for (let i = 0; i < keys.length; ++i) {
-                const key = keys[i];
-                if (key !== 'entries' && key !== 'size' &&
-                    Map.prototype[key] === Map.prototype['entries']) {
-                    _symbolIterator = key;
-                }
-            }
-        }
-    }
-    return _symbolIterator;
-}
-
 function isIterable(obj) {
-    return obj !== null && typeof obj === 'object' && obj[getSymbolIterator()] !== undefined;
+    return obj !== null && typeof obj === 'object' && obj[Symbol.iterator] !== undefined;
 }
 function isListLikeIterable(obj) {
     if (!isJsObject(obj))
         return false;
     return Array.isArray(obj) ||
         (!(obj instanceof Map) && // JS Map are iterables but return entries as [k, v]
-            getSymbolIterator() in obj); // JS Iterable have a Symbol.iterator prop
+            Symbol.iterator in obj); // JS Iterable have a Symbol.iterator prop
 }
 function areIterablesEqual(a, b, comparator) {
-    const iterator1 = a[getSymbolIterator()]();
-    const iterator2 = b[getSymbolIterator()]();
+    const iterator1 = a[Symbol.iterator]();
+    const iterator2 = b[Symbol.iterator]();
     while (true) {
         const item1 = iterator1.next();
         const item2 = iterator2.next();
@@ -13144,7 +13514,7 @@ function iterateListLike(obj, fn) {
         }
     }
     else {
-        const iterator = obj[getSymbolIterator()]();
+        const iterator = obj[Symbol.iterator]();
         let item;
         while (!((item = iterator.next()).done)) {
             fn(item.value);
@@ -13797,7 +14167,7 @@ function templateFirstCreatePass(index, tView, lView, templateFn, decls, vars, t
     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);
     if (tView.queries !== null) {
         tView.queries.template(tView, tNode);
         embeddedTView.queries = tView.queries.embeddedTView(tNode);
@@ -13867,6 +14237,119 @@ function ɵɵreference(index) {
     return load(contextLView, HEADER_OFFSET + index);
 }
 
+/**
+ * Verifies whether a given node matches an expected criteria,
+ * based on internal data structure state.
+ */
+function validateMatchingNode(node, nodeType, tagName, lView, tNode) {
+    if (node.nodeType !== nodeType ||
+        (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() !== tagName?.toLowerCase())) {
+        // TODO: improve error message and use RuntimeError instead.
+        throw new Error(`Unexpected node found during hydration.`);
+    }
+}
+/**
+ * Verifies whether next sibling node exists.
+ */
+function validateSiblingNodeExists(node) {
+    if (!node.nextSibling) {
+        // TODO: improve error message and use RuntimeError instead.
+        throw new Error(`Unexpected state: insufficient number of sibling nodes.`);
+    }
+}
+
+/** Whether current TNode is a first node in an <ng-container>. */
+function isFirstElementInNgContainer(tNode) {
+    return !tNode.prev && tNode.parent?.type === 8 /* TNodeType.ElementContainer */;
+}
+/** Returns first element from a DOM segment that corresponds to this <ng-container>. */
+function getDehydratedNgContainer(hydrationInfo, tContainerNode) {
+    const noOffsetIndex = tContainerNode.index - HEADER_OFFSET;
+    const ngContainer = hydrationInfo.ngContainers?.[noOffsetIndex];
+    ngDevMode &&
+        assertDefined(ngContainer, 'Unexpected state: no hydration info available for a given TNode, ' +
+            'which represents an element container.');
+    return ngContainer;
+}
+/**
+ * Locate a node in DOM tree that corresponds to a given TNode.
+ *
+ * @param hydrationInfo The hydration annotation data
+ * @param tView the current tView
+ * @param lView the current lView
+ * @param tNode the current tNode
+ * @returns an RNode that represents a given tNode
+ */
+function locateNextRNode(hydrationInfo, tView, lView, tNode) {
+    let native = null;
+    if (tView.firstChild === tNode) {
+        // We create a first node in this view, so we use a reference
+        // to the first child in this DOM segment.
+        native = hydrationInfo.firstChild;
+    }
+    else {
+        // Locate a node based on a previous sibling or a parent node.
+        const previousTNodeParent = tNode.prev === null;
+        const previousTNode = (tNode.prev ?? tNode.parent);
+        ngDevMode &&
+            assertDefined(previousTNode, 'Unexpected state: current TNode does not have a connection ' +
+                'to the previous node or a parent node.');
+        const previousRElement = getNativeByTNode(previousTNode, lView);
+        if (isFirstElementInNgContainer(tNode)) {
+            const ngContainer = getDehydratedNgContainer(hydrationInfo, tNode.parent);
+            native = ngContainer.firstChild ?? null;
+        }
+        else {
+            if (previousTNodeParent) {
+                native = previousRElement.firstChild;
+            }
+            else {
+                native = previousRElement.nextSibling;
+            }
+        }
+    }
+    return native;
+}
+/**
+ * Skips over a specified number of nodes and returns the next sibling node after that.
+ */
+function siblingAfter(skip, from) {
+    let currentNode = from;
+    for (let i = 0; i < skip; i++) {
+        ngDevMode && validateSiblingNodeExists(currentNode);
+        currentNode = currentNode.nextSibling;
+    }
+    return currentNode;
+}
+
+/**
+ * The name of an attribute that can be added to the hydration boundary node
+ * (component host node) to disable hydration for the content within that boundary.
+ */
+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;
+}
+
 /**
  * Update a property on a selected element.
  *
@@ -13907,16 +14390,13 @@ function setDirectiveInputsWhichShadowsStyling(tView, tNode, lView, value, isCla
     setInputsForProperty(tView, lView, inputs[property], property, value);
 }
 
-function elementStartFirstCreatePass(index, tView, lView, native, name, attrsIndex, localRefsIndex) {
+function elementStartFirstCreatePass(index, tView, lView, name, attrsIndex, localRefsIndex) {
     ngDevMode && assertFirstCreatePass(tView);
     ngDevMode && ngDevMode.firstCreatePass++;
     const tViewConsts = tView.consts;
     const attrs = getConstant(tViewConsts, attrsIndex);
     const tNode = getOrCreateTNode(tView, index, 2 /* TNodeType.Element */, name, attrs);
-    const hasDirectives = resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex));
-    if (ngDevMode) {
-        validateElementIsKnown(native, lView, tNode.value, tView.schemas, hasDirectives);
-    }
+    resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex));
     if (tNode.attrs !== null) {
         computeStaticStyling(tNode, tNode.attrs, false);
     }
@@ -13951,13 +14431,18 @@ function ɵɵelementStart(index, name, attrsIndex, localRefsIndex) {
         assertEqual(getBindingIndex(), tView.bindingStartIndex, 'elements should be created before any bindings');
     ngDevMode && assertIndexInRange(lView, adjustedIndex);
     const renderer = lView[RENDERER];
-    const native = lView[adjustedIndex] = createElementNode(renderer, name, getNamespace$1());
     const tNode = tView.firstCreatePass ?
-        elementStartFirstCreatePass(adjustedIndex, tView, lView, native, name, attrsIndex, localRefsIndex) :
+        elementStartFirstCreatePass(adjustedIndex, tView, lView, name, attrsIndex, localRefsIndex) :
         tView.data[adjustedIndex];
+    const native = _locateOrCreateElementNode(tView, lView, tNode, renderer, name);
+    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);
@@ -13969,7 +14454,7 @@ function ɵɵelementStart(index, name, attrsIndex, localRefsIndex) {
         attachPatchData(native, lView);
     }
     increaseElementDepthCount();
-    if (isDirectiveHost(tNode)) {
+    if (hasDirectives) {
         createDirectivesInstances(tView, lView, tNode);
         executeContentQueries(tView, tNode, lView);
     }
@@ -13997,6 +14482,9 @@ function ɵɵelementEnd() {
     }
     const tNode = currentTNode;
     ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */);
+    if (isSkipHydrationRootTNode(tNode)) {
+        leaveSkipHydrationBlock();
+    }
     decreaseElementDepthCount();
     const tView = getTView();
     if (tView.firstCreatePass) {
@@ -14029,6 +14517,40 @@ function ɵɵelement(index, name, attrsIndex, localRefsIndex) {
     ɵɵelementEnd();
     return ɵɵelement;
 }
+let _locateOrCreateElementNode = (tView, lView, tNode, renderer, name) => {
+    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) {
+    const hydrationInfo = lView[HYDRATION];
+    const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock();
+    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);
+    // 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++;
@@ -14074,10 +14596,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);
@@ -14129,6 +14653,46 @@ 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();
+    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);
+    const ngContainerSize = getNgContainerSize(hydrationInfo, index);
+    ngDevMode &&
+        assertNumber(ngContainerSize, 'Unexpected state: hydrating an <ng-container>, ' +
+            'but no hydration info is available.');
+    if (ngContainerSize > 0) {
+        storeNgContainerInfo(hydrationInfo, index, currentRNode);
+        comment = siblingAfter(ngContainerSize, currentRNode);
+    }
+    else {
+        // If <ng-container> has no nodes,
+        // the current node is an anchor (comment) node.
+        comment = currentRNode;
+    }
+    ngDevMode && validateMatchingNode(comment, Node.COMMENT_NODE, null, lView, tNode);
+    ngDevMode && markRNodeAsClaimedByHydration(comment);
+    return comment;
+}
+function enableLocateOrCreateElementContainerNodeImpl() {
+    _locateOrCreateElementContainerNode = locateOrCreateElementContainerNode;
+}
 
 /**
  * Returns the current OpaqueViewState instance.
@@ -14157,16 +14721,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.
@@ -14329,7 +14883,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);
@@ -16473,11 +17027,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();
+    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;
+}
 
 /**
  *
@@ -18155,7 +18737,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
@@ -18184,7 +18766,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;
     }
@@ -21284,7 +21866,8 @@ function _wrapInTimeout(fn) {
 const EventEmitter = EventEmitter_;
 
 function symbolIterator() {
-    return this._results[getSymbolIterator()]();
+    // @ts-expect-error accessing a private member
+    return this._results[Symbol.iterator]();
 }
 /**
  * An unmodifiable list of items that Angular keeps up to date when the state
@@ -21336,11 +21919,10 @@ class QueryList {
         // This function should be declared on the prototype, but doing so there will cause the class
         // declaration to have side-effects and become not tree-shakable. For this reason we do it in
         // the constructor.
-        // [getSymbolIterator()](): Iterator<T> { ... }
-        const symbol = getSymbolIterator();
+        // [Symbol.iterator](): Iterator<T> { ... }
         const proto = QueryList.prototype;
-        if (!proto[symbol])
-            proto[symbol] = symbolIterator;
+        if (!proto[Symbol.iterator])
+            proto[Symbol.iterator] = symbolIterator;
     }
     /**
      * Returns the QueryList entry at `index`.
@@ -21479,8 +22061,8 @@ const R3TemplateRef = class TemplateRef extends ViewEngineTemplateRef {
         this.elementRef = elementRef;
     }
     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);
+        const embeddedTView = this._declarationTContainer.tView;
+        const embeddedLView = createLView(this._declarationLView, embeddedTView, context, 16 /* LViewFlags.CheckAlways */, null, embeddedTView.declTNode, null, null, null, null, injector || null, null);
         const declarationLContainer = this._declarationLView[this._declarationTContainer.index];
         ngDevMode && assertLContainer(declarationLContainer);
         embeddedLView[DECLARATION_LCONTAINER] = declarationLContainer;
@@ -21509,7 +22091,7 @@ 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;