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

package/fesm2020/testing.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v16.0.0-next.1
+ * @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
@@ -2559,6 +2513,7 @@ 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.
  *
@@ -2566,7 +2521,7 @@ const ON_DESTROY_HOOKS = 22;
  * 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;
@@ -3055,6 +3010,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 +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.
  *
@@ -3107,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.
  *
@@ -3129,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`.
  */
@@ -3553,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`.
@@ -6607,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.
@@ -8586,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,
@@ -8765,7 +9097,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('16.0.0-next.1');
+const VERSION = new Version('16.0.0-next.2');
 
 // This default value is when checking the hierarchy for a token.
 //
@@ -8846,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, '_'));
@@ -10496,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 */;
@@ -10516,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');
@@ -10957,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);
 }
 /**
@@ -11017,7 +11376,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 +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;
@@ -11805,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]);
 }
 /**
@@ -12505,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
@@ -12622,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.
@@ -12631,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);
     }
@@ -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.
  *
@@ -13951,14 +14434,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);
+    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 +14482,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 +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++;
@@ -14075,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);
@@ -14130,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.
@@ -14158,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.
@@ -14330,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);
@@ -16474,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;
+}
 
 /**
  *
@@ -18156,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
@@ -18185,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;
     }
@@ -21480,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;
@@ -21510,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;