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

package/fesm2022/testing.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v16.0.0-rc.2
+ * @license Angular v16.0.0-rc.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -840,9 +840,9 @@ function formatRuntimeError(code, message) {
     // generate a link to the error details page on angular.io.
     // We also prepend `0` to non-compile-time errors.
     const fullCode = `NG0${Math.abs(code)}`;
-    let errorMessage = `${fullCode}${message ? ': ' + message.trim() : ''}`;
+    let errorMessage = `${fullCode}${message ? ': ' + message : ''}`;
     if (ngDevMode && code < 0) {
-        const addPeriodSeparator = !errorMessage.match(/[.,;!?]$/);
+        const addPeriodSeparator = !errorMessage.match(/[.,;!?\n]$/);
         const separator = addPeriodSeparator ? '.' : '';
         errorMessage =
             `${errorMessage}${separator} Find more at ${ERROR_DETAILS_PAGE_BASE_URL}/${fullCode}`;
@@ -3184,10 +3184,8 @@ function getComponentId(componentDef) {
         if (GENERATED_COMP_IDS.has(compId)) {
             const previousCompDefType = GENERATED_COMP_IDS.get(compId);
             if (previousCompDefType !== componentDef.type) {
-                // TODO: use `formatRuntimeError` to have an error code and we can later on create an error
-                // guide to explain this further.
-                console.warn(`Component ID generation collision detected. Components '${previousCompDefType.name}' and '${componentDef.type.name}' with selector '${stringifyCSSSelectorList(componentDef
-                    .selectors)}' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID.`);
+                console.warn(formatRuntimeError(-912 /* RuntimeErrorCode.COMPONENT_ID_COLLISION */, `Component ID generation collision detected. Components '${previousCompDefType.name}' and '${componentDef.type.name}' with selector '${stringifyCSSSelectorList(componentDef
+                    .selectors)}' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID.`));
             }
         }
         else {
@@ -3205,7 +3203,7 @@ const TVIEW = 1;
 const FLAGS = 2;
 const PARENT = 3;
 const NEXT = 4;
-const TRANSPLANTED_VIEWS_TO_REFRESH = 5;
+const DESCENDANT_VIEWS_TO_REFRESH = 5;
 const T_HOST = 6;
 const CLEANUP = 7;
 const CONTEXT = 8;
@@ -3258,7 +3256,7 @@ const TYPE = 1;
  * that the `MOVED_VIEWS` are transplanted and on-push.
  */
 const HAS_TRANSPLANTED_VIEWS = 2;
-// PARENT, NEXT, TRANSPLANTED_VIEWS_TO_REFRESH are indices 3, 4, and 5
+// PARENT, NEXT, DESCENDANT_VIEWS_TO_REFRESH are indices 3, 4, and 5
 // As we already have these constants in LView, we don't need to re-create them.
 // T_HOST is index 6
 // We already have this constants in LView, we don't need to re-create it.
@@ -4260,20 +4258,44 @@ function resetPreOrderHookFlags(lView) {
     lView[PREORDER_HOOK_FLAGS] = 0;
 }
 /**
- * Updates the `TRANSPLANTED_VIEWS_TO_REFRESH` counter on the `LContainer` as well as the parents
- * whose
+ * Adds the `RefreshView` flag from the lView and updates DESCENDANT_VIEWS_TO_REFRESH counters of
+ * parents.
+ */
+function markViewForRefresh(lView) {
+    if ((lView[FLAGS] & 1024 /* LViewFlags.RefreshView */) === 0) {
+        lView[FLAGS] |= 1024 /* LViewFlags.RefreshView */;
+        updateViewsToRefresh(lView, 1);
+    }
+}
+/**
+ * Removes the `RefreshView` flag from the lView and updates DESCENDANT_VIEWS_TO_REFRESH counters of
+ * parents.
+ */
+function clearViewRefreshFlag(lView) {
+    if (lView[FLAGS] & 1024 /* LViewFlags.RefreshView */) {
+        lView[FLAGS] &= ~1024 /* LViewFlags.RefreshView */;
+        updateViewsToRefresh(lView, -1);
+    }
+}
+/**
+ * Updates the `DESCENDANT_VIEWS_TO_REFRESH` counter on the parents of the `LView` as well as the
+ * parents above that whose
  *  1. counter goes from 0 to 1, indicating that there is a new child that has a view to refresh
  *  or
  *  2. counter goes from 1 to 0, indicating there are no more descendant views to refresh
  */
-function updateTransplantedViewCount(lContainer, amount) {
-    lContainer[TRANSPLANTED_VIEWS_TO_REFRESH] += amount;
-    let viewOrContainer = lContainer;
-    let parent = lContainer[PARENT];
+function updateViewsToRefresh(lView, amount) {
+    let parent = lView[PARENT];
+    if (parent === null) {
+        return;
+    }
+    parent[DESCENDANT_VIEWS_TO_REFRESH] += amount;
+    let viewOrContainer = parent;
+    parent = parent[PARENT];
     while (parent !== null &&
-        ((amount === 1 && viewOrContainer[TRANSPLANTED_VIEWS_TO_REFRESH] === 1) ||
-            (amount === -1 && viewOrContainer[TRANSPLANTED_VIEWS_TO_REFRESH] === 0))) {
-        parent[TRANSPLANTED_VIEWS_TO_REFRESH] += amount;
+        ((amount === 1 && viewOrContainer[DESCENDANT_VIEWS_TO_REFRESH] === 1) ||
+            (amount === -1 && viewOrContainer[DESCENDANT_VIEWS_TO_REFRESH] === 0))) {
+        parent[DESCENDANT_VIEWS_TO_REFRESH] += amount;
         viewOrContainer = parent;
         parent = parent[PARENT];
     }
@@ -7249,12 +7271,8 @@ function detachMovedView(declarationContainer, lView) {
     const insertionLContainer = lView[PARENT];
     ngDevMode && assertLContainer(insertionLContainer);
     // If the view was marked for refresh but then detached before it was checked (where the flag
-    // would be cleared and the counter decremented), we need to decrement the view counter here
-    // instead.
-    if (lView[FLAGS] & 1024 /* LViewFlags.RefreshTransplantedView */) {
-        lView[FLAGS] &= ~1024 /* LViewFlags.RefreshTransplantedView */;
-        updateTransplantedViewCount(insertionLContainer, -1);
-    }
+    // would be cleared and the counter decremented), we need to update the status here.
+    clearViewRefreshFlag(lView);
     movedViews.splice(declarationViewIndex, 1);
 }
 /**
@@ -10359,7 +10377,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('16.0.0-rc.2');
+const VERSION = new Version('16.0.0-rc.4');
 
 // This default value is when checking the hierarchy for a token.
 //
@@ -11065,36 +11083,6 @@ function processHostBindingOpCodes(tView, lView) {
         setSelectedIndex(-1);
     }
 }
-/** Refreshes all content queries declared by directives in a given view */
-function refreshContentQueries(tView, lView) {
-    const contentQueries = tView.contentQueries;
-    if (contentQueries !== null) {
-        for (let i = 0; i < contentQueries.length; i += 2) {
-            const queryStartIdx = contentQueries[i];
-            const directiveDefIdx = contentQueries[i + 1];
-            if (directiveDefIdx !== -1) {
-                const directiveDef = tView.data[directiveDefIdx];
-                ngDevMode && assertDefined(directiveDef, 'DirectiveDef not found.');
-                ngDevMode &&
-                    assertDefined(directiveDef.contentQueries, 'contentQueries function should be defined');
-                setCurrentQueryIndex(queryStartIdx);
-                directiveDef.contentQueries(2 /* RenderFlags.Update */, lView[directiveDefIdx], directiveDefIdx);
-            }
-        }
-    }
-}
-/** Refreshes child components in the current view (update mode). */
-function refreshChildComponents(hostLView, components) {
-    for (let i = 0; i < components.length; i++) {
-        refreshComponent(hostLView, components[i]);
-    }
-}
-/** Renders child components in the current view (creation mode). */
-function renderChildComponents(hostLView, components) {
-    for (let i = 0; i < components.length; i++) {
-        renderComponent(hostLView, components[i]);
-    }
-}
 function createLView(parentLView, tView, context, flags, host, tHostNode, environment, renderer, injector, embeddedViewInjector, hydrationInfo) {
     const lView = tView.blueprint.slice();
     lView[HOST] = host;
@@ -11211,195 +11199,6 @@ function allocExpando(tView, lView, numSlotsToAlloc, initialValue) {
     }
     return allocIdx;
 }
-//////////////////////////
-//// Render
-//////////////////////////
-/**
- * Processes a view in the creation mode. This includes a number of steps in a specific order:
- * - creating view query functions (if any);
- * - executing a template function in the creation mode;
- * - updating static queries (if any);
- * - creating child components defined in a given view.
- */
-function renderView(tView, lView, context) {
-    ngDevMode && assertEqual(isCreationMode(lView), true, 'Should be run in creation mode');
-    enterView(lView);
-    try {
-        const viewQuery = tView.viewQuery;
-        if (viewQuery !== null) {
-            executeViewQueryFn(1 /* RenderFlags.Create */, viewQuery, context);
-        }
-        // Execute a template associated with this view, if it exists. A template function might not be
-        // defined for the root component views.
-        const templateFn = tView.template;
-        if (templateFn !== null) {
-            executeTemplate(tView, lView, templateFn, 1 /* RenderFlags.Create */, context);
-        }
-        // This needs to be set before children are processed to support recursive components.
-        // This must be set to false immediately after the first creation run because in an
-        // ngFor loop, all the views will be created together before update mode runs and turns
-        // off firstCreatePass. If we don't set it here, instances will perform directive
-        // matching, etc again and again.
-        if (tView.firstCreatePass) {
-            tView.firstCreatePass = false;
-        }
-        // We resolve content queries specifically marked as `static` in creation mode. Dynamic
-        // content queries are resolved during change detection (i.e. update mode), after embedded
-        // views are refreshed (see block above).
-        if (tView.staticContentQueries) {
-            refreshContentQueries(tView, lView);
-        }
-        // We must materialize query results before child components are processed
-        // in case a child component has projected a container. The LContainer needs
-        // to exist so the embedded views are properly attached by the container.
-        if (tView.staticViewQueries) {
-            executeViewQueryFn(2 /* RenderFlags.Update */, tView.viewQuery, context);
-        }
-        // Render child component views.
-        const components = tView.components;
-        if (components !== null) {
-            renderChildComponents(lView, components);
-        }
-    }
-    catch (error) {
-        // If we didn't manage to get past the first template pass due to
-        // an error, mark the view as corrupted so we can try to recover.
-        if (tView.firstCreatePass) {
-            tView.incompleteFirstPass = true;
-            tView.firstCreatePass = false;
-        }
-        throw error;
-    }
-    finally {
-        lView[FLAGS] &= ~4 /* LViewFlags.CreationMode */;
-        leaveView();
-    }
-}
-/**
- * Processes a view in update mode. This includes a number of steps in a specific order:
- * - executing a template function in update mode;
- * - executing hooks;
- * - refreshing queries;
- * - setting host bindings;
- * - refreshing child (embedded and component) views.
- */
-function refreshView(tView, lView, templateFn, context) {
-    ngDevMode && assertEqual(isCreationMode(lView), false, 'Should be run in update mode');
-    const flags = lView[FLAGS];
-    if ((flags & 256 /* LViewFlags.Destroyed */) === 256 /* LViewFlags.Destroyed */)
-        return;
-    // Check no changes mode is a dev only mode used to verify that bindings have not changed
-    // since they were assigned. We do not want to execute lifecycle hooks in that mode.
-    const isInCheckNoChangesPass = ngDevMode && isInCheckNoChangesMode();
-    !isInCheckNoChangesPass && lView[ENVIRONMENT].effectManager?.flush();
-    enterView(lView);
-    try {
-        resetPreOrderHookFlags(lView);
-        setBindingIndex(tView.bindingStartIndex);
-        if (templateFn !== null) {
-            executeTemplate(tView, lView, templateFn, 2 /* RenderFlags.Update */, context);
-        }
-        const hooksInitPhaseCompleted = (flags & 3 /* LViewFlags.InitPhaseStateMask */) === 3 /* InitPhaseState.InitPhaseCompleted */;
-        // execute pre-order hooks (OnInit, OnChanges, DoCheck)
-        // PERF WARNING: do NOT extract this to a separate function without running benchmarks
-        if (!isInCheckNoChangesPass) {
-            if (hooksInitPhaseCompleted) {
-                const preOrderCheckHooks = tView.preOrderCheckHooks;
-                if (preOrderCheckHooks !== null) {
-                    executeCheckHooks(lView, preOrderCheckHooks, null);
-                }
-            }
-            else {
-                const preOrderHooks = tView.preOrderHooks;
-                if (preOrderHooks !== null) {
-                    executeInitAndCheckHooks(lView, preOrderHooks, 0 /* InitPhaseState.OnInitHooksToBeRun */, null);
-                }
-                incrementInitPhaseFlags(lView, 0 /* InitPhaseState.OnInitHooksToBeRun */);
-            }
-        }
-        // First mark transplanted views that are declared in this lView as needing a refresh at their
-        // insertion points. This is needed to avoid the situation where the template is defined in this
-        // `LView` but its declaration appears after the insertion component.
-        markTransplantedViewsForRefresh(lView);
-        refreshEmbeddedViews(lView);
-        // Content query results must be refreshed before content hooks are called.
-        if (tView.contentQueries !== null) {
-            refreshContentQueries(tView, lView);
-        }
-        // execute content hooks (AfterContentInit, AfterContentChecked)
-        // PERF WARNING: do NOT extract this to a separate function without running benchmarks
-        if (!isInCheckNoChangesPass) {
-            if (hooksInitPhaseCompleted) {
-                const contentCheckHooks = tView.contentCheckHooks;
-                if (contentCheckHooks !== null) {
-                    executeCheckHooks(lView, contentCheckHooks);
-                }
-            }
-            else {
-                const contentHooks = tView.contentHooks;
-                if (contentHooks !== null) {
-                    executeInitAndCheckHooks(lView, contentHooks, 1 /* InitPhaseState.AfterContentInitHooksToBeRun */);
-                }
-                incrementInitPhaseFlags(lView, 1 /* InitPhaseState.AfterContentInitHooksToBeRun */);
-            }
-        }
-        processHostBindingOpCodes(tView, lView);
-        // Refresh child component views.
-        const components = tView.components;
-        if (components !== null) {
-            refreshChildComponents(lView, components);
-        }
-        // View queries must execute after refreshing child components because a template in this view
-        // could be inserted in a child component. If the view query executes before child component
-        // refresh, the template might not yet be inserted.
-        const viewQuery = tView.viewQuery;
-        if (viewQuery !== null) {
-            executeViewQueryFn(2 /* RenderFlags.Update */, viewQuery, context);
-        }
-        // execute view hooks (AfterViewInit, AfterViewChecked)
-        // PERF WARNING: do NOT extract this to a separate function without running benchmarks
-        if (!isInCheckNoChangesPass) {
-            if (hooksInitPhaseCompleted) {
-                const viewCheckHooks = tView.viewCheckHooks;
-                if (viewCheckHooks !== null) {
-                    executeCheckHooks(lView, viewCheckHooks);
-                }
-            }
-            else {
-                const viewHooks = tView.viewHooks;
-                if (viewHooks !== null) {
-                    executeInitAndCheckHooks(lView, viewHooks, 2 /* InitPhaseState.AfterViewInitHooksToBeRun */);
-                }
-                incrementInitPhaseFlags(lView, 2 /* InitPhaseState.AfterViewInitHooksToBeRun */);
-            }
-        }
-        if (tView.firstUpdatePass === true) {
-            // We need to make sure that we only flip the flag on successful `refreshView` only
-            // Don't do this in `finally` block.
-            // If we did this in `finally` block then an exception could block the execution of styling
-            // instructions which in turn would be unable to insert themselves into the styling linked
-            // list. The result of this would be that if the exception would not be throw on subsequent CD
-            // the styling would be unable to process it data and reflect to the DOM.
-            tView.firstUpdatePass = false;
-        }
-        // Do not reset the dirty state when running in check no changes mode. We don't want components
-        // to behave differently depending on whether check no changes is enabled or not. For example:
-        // Marking an OnPush component as dirty from within the `ngAfterViewInit` hook in order to
-        // refresh a `NgClass` binding should work. If we would reset the dirty state in the check
-        // no changes cycle, the component would be not be dirty for the next update pass. This would
-        // be different in production mode where the component dirty state is not reset.
-        if (!isInCheckNoChangesPass) {
-            lView[FLAGS] &= ~(64 /* LViewFlags.Dirty */ | 8 /* LViewFlags.FirstLViewPass */);
-        }
-        if (lView[FLAGS] & 1024 /* LViewFlags.RefreshTransplantedView */) {
-            lView[FLAGS] &= ~1024 /* LViewFlags.RefreshTransplantedView */;
-            updateTransplantedViewCount(lView[PARENT], -1);
-        }
-    }
-    finally {
-        leaveView();
-    }
-}
 function executeTemplate(tView, lView, templateFn, rf, context) {
     const consumer = getReactiveLViewConsumer(lView, REACTIVE_TEMPLATE_CONSUMER);
     const prevSelectedIndex = getSelectedIndex();
@@ -12382,153 +12181,26 @@ function createLContainer(hostNative, currentView, native, tNode) {
         assertEqual(lContainer.length, CONTAINER_HEADER_OFFSET, 'Should allocate correct number of slots for LContainer header.');
     return lContainer;
 }
-/**
- * Goes over embedded views (ones created through ViewContainerRef APIs) and refreshes
- * them by executing an associated template function.
- */
-function refreshEmbeddedViews(lView) {
-    for (let lContainer = getFirstLContainer(lView); lContainer !== null; lContainer = getNextLContainer(lContainer)) {
-        for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
-            const embeddedLView = lContainer[i];
-            const embeddedTView = embeddedLView[TVIEW];
-            ngDevMode && assertDefined(embeddedTView, 'TView must be allocated');
-            if (viewAttachedToChangeDetector(embeddedLView)) {
-                refreshView(embeddedTView, embeddedLView, embeddedTView.template, embeddedLView[CONTEXT]);
+/** Refreshes all content queries declared by directives in a given view */
+function refreshContentQueries(tView, lView) {
+    const contentQueries = tView.contentQueries;
+    if (contentQueries !== null) {
+        for (let i = 0; i < contentQueries.length; i += 2) {
+            const queryStartIdx = contentQueries[i];
+            const directiveDefIdx = contentQueries[i + 1];
+            if (directiveDefIdx !== -1) {
+                const directiveDef = tView.data[directiveDefIdx];
+                ngDevMode && assertDefined(directiveDef, 'DirectiveDef not found.');
+                ngDevMode &&
+                    assertDefined(directiveDef.contentQueries, 'contentQueries function should be defined');
+                setCurrentQueryIndex(queryStartIdx);
+                directiveDef.contentQueries(2 /* RenderFlags.Update */, lView[directiveDefIdx], directiveDefIdx);
             }
         }
     }
 }
 /**
- * Mark transplanted views as needing to be refreshed at their insertion points.
- *
- * @param lView The `LView` that may have transplanted views.
- */
-function markTransplantedViewsForRefresh(lView) {
-    for (let lContainer = getFirstLContainer(lView); lContainer !== null; lContainer = getNextLContainer(lContainer)) {
-        if (!lContainer[HAS_TRANSPLANTED_VIEWS])
-            continue;
-        const movedViews = lContainer[MOVED_VIEWS];
-        ngDevMode && assertDefined(movedViews, 'Transplanted View flags set but missing MOVED_VIEWS');
-        for (let i = 0; i < movedViews.length; i++) {
-            const movedLView = movedViews[i];
-            const insertionLContainer = movedLView[PARENT];
-            ngDevMode && assertLContainer(insertionLContainer);
-            // We don't want to increment the counter if the moved LView was already marked for
-            // refresh.
-            if ((movedLView[FLAGS] & 1024 /* LViewFlags.RefreshTransplantedView */) === 0) {
-                updateTransplantedViewCount(insertionLContainer, 1);
-            }
-            // Note, it is possible that the `movedViews` is tracking views that are transplanted *and*
-            // those that aren't (declaration component === insertion component). In the latter case,
-            // it's fine to add the flag, as we will clear it immediately in
-            // `refreshEmbeddedViews` for the view currently being refreshed.
-            movedLView[FLAGS] |= 1024 /* LViewFlags.RefreshTransplantedView */;
-        }
-    }
-}
-/////////////
-/**
- * Refreshes components by entering the component view and processing its bindings, queries, etc.
- *
- * @param componentHostIdx  Element index in LView[] (adjusted for HEADER_OFFSET)
- */
-function refreshComponent(hostLView, componentHostIdx) {
-    ngDevMode && assertEqual(isCreationMode(hostLView), false, 'Should be run in update mode');
-    const componentView = getComponentLViewByIndex(componentHostIdx, hostLView);
-    // Only attached components that are CheckAlways or OnPush and dirty should be refreshed
-    if (viewAttachedToChangeDetector(componentView)) {
-        const tView = componentView[TVIEW];
-        if (componentView[FLAGS] & (16 /* LViewFlags.CheckAlways */ | 64 /* LViewFlags.Dirty */)) {
-            refreshView(tView, componentView, tView.template, componentView[CONTEXT]);
-        }
-        else if (componentView[TRANSPLANTED_VIEWS_TO_REFRESH] > 0) {
-            // Only attached components that are CheckAlways or OnPush and dirty should be refreshed
-            refreshContainsDirtyView(componentView);
-        }
-    }
-}
-/**
- * Refreshes all transplanted views marked with `LViewFlags.RefreshTransplantedView` that are
- * children or descendants of the given lView.
- *
- * @param lView The lView which contains descendant transplanted views that need to be refreshed.
- */
-function refreshContainsDirtyView(lView) {
-    for (let lContainer = getFirstLContainer(lView); lContainer !== null; lContainer = getNextLContainer(lContainer)) {
-        for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
-            const embeddedLView = lContainer[i];
-            if (viewAttachedToChangeDetector(embeddedLView)) {
-                if (embeddedLView[FLAGS] & 1024 /* LViewFlags.RefreshTransplantedView */) {
-                    const embeddedTView = embeddedLView[TVIEW];
-                    ngDevMode && assertDefined(embeddedTView, 'TView must be allocated');
-                    refreshView(embeddedTView, embeddedLView, embeddedTView.template, embeddedLView[CONTEXT]);
-                }
-                else if (embeddedLView[TRANSPLANTED_VIEWS_TO_REFRESH] > 0) {
-                    refreshContainsDirtyView(embeddedLView);
-                }
-            }
-        }
-    }
-    const tView = lView[TVIEW];
-    // Refresh child component views.
-    const components = tView.components;
-    if (components !== null) {
-        for (let i = 0; i < components.length; i++) {
-            const componentView = getComponentLViewByIndex(components[i], lView);
-            // Only attached components that are CheckAlways or OnPush and dirty should be refreshed
-            if (viewAttachedToChangeDetector(componentView) &&
-                componentView[TRANSPLANTED_VIEWS_TO_REFRESH] > 0) {
-                refreshContainsDirtyView(componentView);
-            }
-        }
-    }
-}
-function renderComponent(hostLView, componentHostIdx) {
-    ngDevMode && assertEqual(isCreationMode(hostLView), true, 'Should be run in creation mode');
-    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]);
-}
-/**
- * Syncs an LView instance with its blueprint if they have gotten out of sync.
- *
- * Typically, blueprints and their view instances should always be in sync, so the loop here
- * will be skipped. However, consider this case of two components side-by-side:
- *
- * App template:
- * ```
- * <comp></comp>
- * <comp></comp>
- * ```
- *
- * The following will happen:
- * 1. App template begins processing.
- * 2. First <comp> is matched as a component and its LView is created.
- * 3. Second <comp> is matched as a component and its LView is created.
- * 4. App template completes processing, so it's time to check child templates.
- * 5. First <comp> template is checked. It has a directive, so its def is pushed to blueprint.
- * 6. Second <comp> template is checked. Its blueprint has been updated by the first
- * <comp> template, but its LView was created before this update, so it is out of sync.
- *
- * Note that embedded views inside ngFor loops will never be out of sync because these views
- * are processed as soon as they are created.
- *
- * @param tView The `TView` that contains the blueprint for syncing
- * @param lView The view to sync
- */
-function syncViewWithBlueprint(tView, lView) {
-    for (let i = lView.length; i < tView.blueprint.length; i++) {
-        lView.push(tView.blueprint[i]);
-    }
-}
-/**
- * Adds LView or LContainer to the end of the current view tree.
+ * Adds LView or LContainer to the end of the current view tree.
  *
  * This structure will be used to traverse through nested views to remove listeners
  * and call onDestroy callbacks.
@@ -12555,40 +12227,6 @@ function addToViewTree(lView, lViewOrLContainer) {
 ///////////////////////////////
 //// Change detection
 ///////////////////////////////
-function detectChangesInternal(tView, lView, context, notifyErrorHandler = true) {
-    const rendererFactory = lView[ENVIRONMENT].rendererFactory;
-    // Check no changes mode is a dev only mode used to verify that bindings have not changed
-    // since they were assigned. We do not want to invoke renderer factory functions in that mode
-    // to avoid any possible side-effects.
-    const checkNoChangesMode = !!ngDevMode && isInCheckNoChangesMode();
-    if (!checkNoChangesMode && rendererFactory.begin)
-        rendererFactory.begin();
-    try {
-        refreshView(tView, lView, tView.template, context);
-    }
-    catch (error) {
-        if (notifyErrorHandler) {
-            handleError(lView, error);
-        }
-        throw error;
-    }
-    finally {
-        if (!checkNoChangesMode && rendererFactory.end)
-            rendererFactory.end();
-        // One final flush of the effects queue to catch any effects created in `ngAfterViewInit` or
-        // other post-order hooks.
-        !checkNoChangesMode && lView[ENVIRONMENT].effectManager?.flush();
-    }
-}
-function checkNoChangesInternal(tView, lView, context, notifyErrorHandler = true) {
-    setIsInCheckNoChangesMode(true);
-    try {
-        detectChangesInternal(tView, lView, context, notifyErrorHandler);
-    }
-    finally {
-        setIsInCheckNoChangesMode(false);
-    }
-}
 function executeViewQueryFn(flags, viewQueryFn, component) {
     ngDevMode && assertDefined(viewQueryFn, 'View queries function to execute must be defined.');
     setCurrentQueryIndex(0);
@@ -12701,205 +12339,582 @@ function textBindingInternal(lView, index, value) {
     updateTextNode(lView[RENDERER], element, value);
 }
 
+function renderComponent(hostLView, componentHostIdx) {
+    ngDevMode && assertEqual(isCreationMode(hostLView), true, 'Should be run in creation mode');
+    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]);
+}
 /**
- * `DestroyRef` lets you set callbacks to run for any cleanup or destruction behavior.
- * The scope of this destruction depends on where `DestroyRef` is injected. If `DestroyRef`
- * is injected in a component or directive, the callbacks run when that component or
- * directive is destroyed. Otherwise the callbacks run when a corresponding injector is destroyed.
+ * Syncs an LView instance with its blueprint if they have gotten out of sync.
  *
- * @publicApi
+ * Typically, blueprints and their view instances should always be in sync, so the loop here
+ * will be skipped. However, consider this case of two components side-by-side:
+ *
+ * App template:
+ * ```
+ * <comp></comp>
+ * <comp></comp>
+ * ```
+ *
+ * The following will happen:
+ * 1. App template begins processing.
+ * 2. First <comp> is matched as a component and its LView is created.
+ * 3. Second <comp> is matched as a component and its LView is created.
+ * 4. App template completes processing, so it's time to check child templates.
+ * 5. First <comp> template is checked. It has a directive, so its def is pushed to blueprint.
+ * 6. Second <comp> template is checked. Its blueprint has been updated by the first
+ * <comp> template, but its LView was created before this update, so it is out of sync.
+ *
+ * Note that embedded views inside ngFor loops will never be out of sync because these views
+ * are processed as soon as they are created.
+ *
+ * @param tView The `TView` that contains the blueprint for syncing
+ * @param lView The view to sync
  */
-class DestroyRef {
-    /**
-     * @internal
-     * @nocollapse
-     */
-    static { this.__NG_ELEMENT_ID__ = injectDestroyRef; }
-    /**
-     * @internal
-     * @nocollapse
-     */
-    static { this.__NG_ENV_ID__ = (injector) => injector; }
+function syncViewWithBlueprint(tView, lView) {
+    for (let i = lView.length; i < tView.blueprint.length; i++) {
+        lView.push(tView.blueprint[i]);
+    }
 }
-class NodeInjectorDestroyRef extends DestroyRef {
-    constructor(_lView) {
-        super();
-        this._lView = _lView;
+/**
+ * Processes a view in the creation mode. This includes a number of steps in a specific order:
+ * - creating view query functions (if any);
+ * - executing a template function in the creation mode;
+ * - updating static queries (if any);
+ * - creating child components defined in a given view.
+ */
+function renderView(tView, lView, context) {
+    ngDevMode && assertEqual(isCreationMode(lView), true, 'Should be run in creation mode');
+    enterView(lView);
+    try {
+        const viewQuery = tView.viewQuery;
+        if (viewQuery !== null) {
+            executeViewQueryFn(1 /* RenderFlags.Create */, viewQuery, context);
+        }
+        // Execute a template associated with this view, if it exists. A template function might not be
+        // defined for the root component views.
+        const templateFn = tView.template;
+        if (templateFn !== null) {
+            executeTemplate(tView, lView, templateFn, 1 /* RenderFlags.Create */, context);
+        }
+        // This needs to be set before children are processed to support recursive components.
+        // This must be set to false immediately after the first creation run because in an
+        // ngFor loop, all the views will be created together before update mode runs and turns
+        // off firstCreatePass. If we don't set it here, instances will perform directive
+        // matching, etc again and again.
+        if (tView.firstCreatePass) {
+            tView.firstCreatePass = false;
+        }
+        // We resolve content queries specifically marked as `static` in creation mode. Dynamic
+        // content queries are resolved during change detection (i.e. update mode), after embedded
+        // views are refreshed (see block above).
+        if (tView.staticContentQueries) {
+            refreshContentQueries(tView, lView);
+        }
+        // We must materialize query results before child components are processed
+        // in case a child component has projected a container. The LContainer needs
+        // to exist so the embedded views are properly attached by the container.
+        if (tView.staticViewQueries) {
+            executeViewQueryFn(2 /* RenderFlags.Update */, tView.viewQuery, context);
+        }
+        // Render child component views.
+        const components = tView.components;
+        if (components !== null) {
+            renderChildComponents(lView, components);
+        }
+    }
+    catch (error) {
+        // If we didn't manage to get past the first template pass due to
+        // an error, mark the view as corrupted so we can try to recover.
+        if (tView.firstCreatePass) {
+            tView.incompleteFirstPass = true;
+            tView.firstCreatePass = false;
+        }
+        throw error;
+    }
+    finally {
+        lView[FLAGS] &= ~4 /* LViewFlags.CreationMode */;
+        leaveView();
+    }
+}
+/** Renders child components in the current view (creation mode). */
+function renderChildComponents(hostLView, components) {
+    for (let i = 0; i < components.length; i++) {
+        renderComponent(hostLView, components[i]);
+    }
+}
+
+/**
+ * `DestroyRef` lets you set callbacks to run for any cleanup or destruction behavior.
+ * The scope of this destruction depends on where `DestroyRef` is injected. If `DestroyRef`
+ * is injected in a component or directive, the callbacks run when that component or
+ * directive is destroyed. Otherwise the callbacks run when a corresponding injector is destroyed.
+ *
+ * @publicApi
+ */
+class DestroyRef {
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = injectDestroyRef; }
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ENV_ID__ = (injector) => injector; }
+}
+class NodeInjectorDestroyRef extends DestroyRef {
+    constructor(_lView) {
+        super();
+        this._lView = _lView;
+    }
+    onDestroy(callback) {
+        storeLViewOnDestroy(this._lView, callback);
+        return () => removeLViewOnDestroy(this._lView, callback);
+    }
+}
+function injectDestroyRef() {
+    return new NodeInjectorDestroyRef(getLView());
+}
+
+/**
+ * Tracks all effects registered within a given application and runs them via `flush`.
+ */
+class EffectManager {
+    constructor() {
+        this.all = new Set();
+        this.queue = new Map();
+    }
+    create(effectFn, destroyRef, allowSignalWrites) {
+        const zone = (typeof Zone === 'undefined') ? null : Zone.current;
+        const watch = new Watch(effectFn, (watch) => {
+            if (!this.all.has(watch)) {
+                return;
+            }
+            this.queue.set(watch, zone);
+        }, allowSignalWrites);
+        this.all.add(watch);
+        // Effects start dirty.
+        watch.notify();
+        let unregisterOnDestroy;
+        const destroy = () => {
+            watch.cleanup();
+            unregisterOnDestroy?.();
+            this.all.delete(watch);
+            this.queue.delete(watch);
+        };
+        unregisterOnDestroy = destroyRef?.onDestroy(destroy);
+        return {
+            destroy,
+        };
+    }
+    flush() {
+        if (this.queue.size === 0) {
+            return;
+        }
+        for (const [watch, zone] of this.queue) {
+            this.queue.delete(watch);
+            if (zone) {
+                zone.run(() => watch.run());
+            }
+            else {
+                watch.run();
+            }
+        }
+    }
+    get isQueueEmpty() {
+        return this.queue.size === 0;
+    }
+    /** @nocollapse */
+    static { this.ɵprov = ɵɵdefineInjectable({
+        token: EffectManager,
+        providedIn: 'root',
+        factory: () => new EffectManager(),
+    }); }
+}
+/**
+ * Create a global `Effect` for the given reactive function.
+ *
+ * @developerPreview
+ */
+function effect(effectFn, options) {
+    !options?.injector && assertInInjectionContext(effect);
+    const injector = options?.injector ?? inject$1(Injector);
+    const effectManager = injector.get(EffectManager);
+    const destroyRef = options?.manualCleanup !== true ? injector.get(DestroyRef) : null;
+    return effectManager.create(effectFn, destroyRef, !!options?.allowSignalWrites);
+}
+
+/**
+ * Compute the static styling (class/style) from `TAttributes`.
+ *
+ * This function should be called during `firstCreatePass` only.
+ *
+ * @param tNode The `TNode` into which the styling information should be loaded.
+ * @param attrs `TAttributes` containing the styling information.
+ * @param writeToHost Where should the resulting static styles be written?
+ *   - `false` Write to `TNode.stylesWithoutHost` / `TNode.classesWithoutHost`
+ *   - `true` Write to `TNode.styles` / `TNode.classes`
+ */
+function computeStaticStyling(tNode, attrs, writeToHost) {
+    ngDevMode &&
+        assertFirstCreatePass(getTView(), 'Expecting to be called in first template pass only');
+    let styles = writeToHost ? tNode.styles : null;
+    let classes = writeToHost ? tNode.classes : null;
+    let mode = 0;
+    if (attrs !== null) {
+        for (let i = 0; i < attrs.length; i++) {
+            const value = attrs[i];
+            if (typeof value === 'number') {
+                mode = value;
+            }
+            else if (mode == 1 /* AttributeMarker.Classes */) {
+                classes = concatStringsWithSpace(classes, value);
+            }
+            else if (mode == 2 /* AttributeMarker.Styles */) {
+                const style = value;
+                const styleValue = attrs[++i];
+                styles = concatStringsWithSpace(styles, style + ': ' + styleValue + ';');
+            }
+        }
+    }
+    writeToHost ? tNode.styles = styles : tNode.stylesWithoutHost = styles;
+    writeToHost ? tNode.classes = classes : tNode.classesWithoutHost = classes;
+}
+
+function collectNativeNodes(tView, lView, tNode, result, isProjection = false) {
+    while (tNode !== null) {
+        ngDevMode &&
+            assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ | 12 /* TNodeType.AnyContainer */ | 16 /* TNodeType.Projection */ | 32 /* TNodeType.Icu */);
+        const lNode = lView[tNode.index];
+        if (lNode !== null) {
+            result.push(unwrapRNode(lNode));
+        }
+        // A given lNode can represent either a native node or a LContainer (when it is a host of a
+        // ViewContainerRef). When we find a LContainer we need to descend into it to collect root nodes
+        // from the views in this container.
+        if (isLContainer(lNode)) {
+            for (let i = CONTAINER_HEADER_OFFSET; i < lNode.length; i++) {
+                const lViewInAContainer = lNode[i];
+                const lViewFirstChildTNode = lViewInAContainer[TVIEW].firstChild;
+                if (lViewFirstChildTNode !== null) {
+                    collectNativeNodes(lViewInAContainer[TVIEW], lViewInAContainer, lViewFirstChildTNode, result);
+                }
+            }
+            // When an LContainer is created, the anchor (comment) node is:
+            // - (1) either reused in case of an ElementContainer (<ng-container>)
+            // - (2) or a new comment node is created
+            // In the first case, the anchor comment node would be added to the final
+            // list by the code above (`result.push(unwrapRNode(lNode))`), but the second
+            // case requires extra handling: the anchor node needs to be added to the
+            // final list manually. See additional information in the `createAnchorNode`
+            // function in the `view_container_ref.ts`.
+            //
+            // In the first case, the same reference would be stored in the `NATIVE`
+            // and `HOST` slots in an LContainer. Otherwise, this is the second case and
+            // we should add an element to the final list.
+            if (lNode[NATIVE] !== lNode[HOST]) {
+                result.push(lNode[NATIVE]);
+            }
+        }
+        const tNodeType = tNode.type;
+        if (tNodeType & 8 /* TNodeType.ElementContainer */) {
+            collectNativeNodes(tView, lView, tNode.child, result);
+        }
+        else if (tNodeType & 32 /* TNodeType.Icu */) {
+            const nextRNode = icuContainerIterate(tNode, lView);
+            let rNode;
+            while (rNode = nextRNode()) {
+                result.push(rNode);
+            }
+        }
+        else if (tNodeType & 16 /* TNodeType.Projection */) {
+            const nodesInSlot = getProjectionNodes(lView, tNode);
+            if (Array.isArray(nodesInSlot)) {
+                result.push(...nodesInSlot);
+            }
+            else {
+                const parentView = getLViewParent(lView[DECLARATION_COMPONENT_VIEW]);
+                ngDevMode && assertParentView(parentView);
+                collectNativeNodes(parentView[TVIEW], parentView, nodesInSlot, result, true);
+            }
+        }
+        tNode = isProjection ? tNode.projectionNext : tNode.next;
+    }
+    return result;
+}
+
+function detectChangesInternal(tView, lView, context, notifyErrorHandler = true) {
+    const rendererFactory = lView[ENVIRONMENT].rendererFactory;
+    // Check no changes mode is a dev only mode used to verify that bindings have not changed
+    // since they were assigned. We do not want to invoke renderer factory functions in that mode
+    // to avoid any possible side-effects.
+    const checkNoChangesMode = !!ngDevMode && isInCheckNoChangesMode();
+    if (!checkNoChangesMode && rendererFactory.begin)
+        rendererFactory.begin();
+    try {
+        refreshView(tView, lView, tView.template, context);
+    }
+    catch (error) {
+        if (notifyErrorHandler) {
+            handleError(lView, error);
+        }
+        throw error;
+    }
+    finally {
+        if (!checkNoChangesMode && rendererFactory.end)
+            rendererFactory.end();
+        // One final flush of the effects queue to catch any effects created in `ngAfterViewInit` or
+        // other post-order hooks.
+        !checkNoChangesMode && lView[ENVIRONMENT].effectManager?.flush();
+    }
+}
+function checkNoChangesInternal(tView, lView, context, notifyErrorHandler = true) {
+    setIsInCheckNoChangesMode(true);
+    try {
+        detectChangesInternal(tView, lView, context, notifyErrorHandler);
+    }
+    finally {
+        setIsInCheckNoChangesMode(false);
+    }
+}
+/**
+ * Synchronously perform change detection on a component (and possibly its sub-components).
+ *
+ * This function triggers change detection in a synchronous way on a component.
+ *
+ * @param component The component which the change detection should be performed on.
+ */
+function detectChanges(component) {
+    const view = getComponentViewByInstance(component);
+    detectChangesInternal(view[TVIEW], view, component);
+}
+/**
+ * Processes a view in update mode. This includes a number of steps in a specific order:
+ * - executing a template function in update mode;
+ * - executing hooks;
+ * - refreshing queries;
+ * - setting host bindings;
+ * - refreshing child (embedded and component) views.
+ */
+function refreshView(tView, lView, templateFn, context) {
+    ngDevMode && assertEqual(isCreationMode(lView), false, 'Should be run in update mode');
+    const flags = lView[FLAGS];
+    if ((flags & 256 /* LViewFlags.Destroyed */) === 256 /* LViewFlags.Destroyed */)
+        return;
+    // Check no changes mode is a dev only mode used to verify that bindings have not changed
+    // since they were assigned. We do not want to execute lifecycle hooks in that mode.
+    const isInCheckNoChangesPass = ngDevMode && isInCheckNoChangesMode();
+    !isInCheckNoChangesPass && lView[ENVIRONMENT].effectManager?.flush();
+    enterView(lView);
+    try {
+        resetPreOrderHookFlags(lView);
+        setBindingIndex(tView.bindingStartIndex);
+        if (templateFn !== null) {
+            executeTemplate(tView, lView, templateFn, 2 /* RenderFlags.Update */, context);
+        }
+        const hooksInitPhaseCompleted = (flags & 3 /* LViewFlags.InitPhaseStateMask */) === 3 /* InitPhaseState.InitPhaseCompleted */;
+        // execute pre-order hooks (OnInit, OnChanges, DoCheck)
+        // PERF WARNING: do NOT extract this to a separate function without running benchmarks
+        if (!isInCheckNoChangesPass) {
+            if (hooksInitPhaseCompleted) {
+                const preOrderCheckHooks = tView.preOrderCheckHooks;
+                if (preOrderCheckHooks !== null) {
+                    executeCheckHooks(lView, preOrderCheckHooks, null);
+                }
+            }
+            else {
+                const preOrderHooks = tView.preOrderHooks;
+                if (preOrderHooks !== null) {
+                    executeInitAndCheckHooks(lView, preOrderHooks, 0 /* InitPhaseState.OnInitHooksToBeRun */, null);
+                }
+                incrementInitPhaseFlags(lView, 0 /* InitPhaseState.OnInitHooksToBeRun */);
+            }
+        }
+        // First mark transplanted views that are declared in this lView as needing a refresh at their
+        // insertion points. This is needed to avoid the situation where the template is defined in this
+        // `LView` but its declaration appears after the insertion component.
+        markTransplantedViewsForRefresh(lView);
+        refreshEmbeddedViews(lView);
+        // Content query results must be refreshed before content hooks are called.
+        if (tView.contentQueries !== null) {
+            refreshContentQueries(tView, lView);
+        }
+        // execute content hooks (AfterContentInit, AfterContentChecked)
+        // PERF WARNING: do NOT extract this to a separate function without running benchmarks
+        if (!isInCheckNoChangesPass) {
+            if (hooksInitPhaseCompleted) {
+                const contentCheckHooks = tView.contentCheckHooks;
+                if (contentCheckHooks !== null) {
+                    executeCheckHooks(lView, contentCheckHooks);
+                }
+            }
+            else {
+                const contentHooks = tView.contentHooks;
+                if (contentHooks !== null) {
+                    executeInitAndCheckHooks(lView, contentHooks, 1 /* InitPhaseState.AfterContentInitHooksToBeRun */);
+                }
+                incrementInitPhaseFlags(lView, 1 /* InitPhaseState.AfterContentInitHooksToBeRun */);
+            }
+        }
+        processHostBindingOpCodes(tView, lView);
+        // Refresh child component views.
+        const components = tView.components;
+        if (components !== null) {
+            refreshChildComponents(lView, components);
+        }
+        // View queries must execute after refreshing child components because a template in this view
+        // could be inserted in a child component. If the view query executes before child component
+        // refresh, the template might not yet be inserted.
+        const viewQuery = tView.viewQuery;
+        if (viewQuery !== null) {
+            executeViewQueryFn(2 /* RenderFlags.Update */, viewQuery, context);
+        }
+        // execute view hooks (AfterViewInit, AfterViewChecked)
+        // PERF WARNING: do NOT extract this to a separate function without running benchmarks
+        if (!isInCheckNoChangesPass) {
+            if (hooksInitPhaseCompleted) {
+                const viewCheckHooks = tView.viewCheckHooks;
+                if (viewCheckHooks !== null) {
+                    executeCheckHooks(lView, viewCheckHooks);
+                }
+            }
+            else {
+                const viewHooks = tView.viewHooks;
+                if (viewHooks !== null) {
+                    executeInitAndCheckHooks(lView, viewHooks, 2 /* InitPhaseState.AfterViewInitHooksToBeRun */);
+                }
+                incrementInitPhaseFlags(lView, 2 /* InitPhaseState.AfterViewInitHooksToBeRun */);
+            }
+        }
+        if (tView.firstUpdatePass === true) {
+            // We need to make sure that we only flip the flag on successful `refreshView` only
+            // Don't do this in `finally` block.
+            // If we did this in `finally` block then an exception could block the execution of styling
+            // instructions which in turn would be unable to insert themselves into the styling linked
+            // list. The result of this would be that if the exception would not be throw on subsequent CD
+            // the styling would be unable to process it data and reflect to the DOM.
+            tView.firstUpdatePass = false;
+        }
+        // Do not reset the dirty state when running in check no changes mode. We don't want components
+        // to behave differently depending on whether check no changes is enabled or not. For example:
+        // Marking an OnPush component as dirty from within the `ngAfterViewInit` hook in order to
+        // refresh a `NgClass` binding should work. If we would reset the dirty state in the check
+        // no changes cycle, the component would be not be dirty for the next update pass. This would
+        // be different in production mode where the component dirty state is not reset.
+        if (!isInCheckNoChangesPass) {
+            lView[FLAGS] &= ~(64 /* LViewFlags.Dirty */ | 8 /* LViewFlags.FirstLViewPass */);
+        }
+        clearViewRefreshFlag(lView);
     }
-    onDestroy(callback) {
-        storeLViewOnDestroy(this._lView, callback);
-        return () => removeLViewOnDestroy(this._lView, callback);
+    finally {
+        leaveView();
     }
 }
-function injectDestroyRef() {
-    return new NodeInjectorDestroyRef(getLView());
-}
-
 /**
- * Tracks all effects registered within a given application and runs them via `flush`.
+ * Goes over embedded views (ones created through ViewContainerRef APIs) and refreshes
+ * them by executing an associated template function.
  */
-class EffectManager {
-    constructor() {
-        this.all = new Set();
-        this.queue = new Map();
-    }
-    create(effectFn, destroyRef, allowSignalWrites) {
-        const zone = (typeof Zone === 'undefined') ? null : Zone.current;
-        const watch = new Watch(effectFn, (watch) => {
-            if (!this.all.has(watch)) {
-                return;
-            }
-            this.queue.set(watch, zone);
-        }, allowSignalWrites);
-        this.all.add(watch);
-        // Effects start dirty.
-        watch.notify();
-        let unregisterOnDestroy;
-        const destroy = () => {
-            watch.cleanup();
-            unregisterOnDestroy?.();
-            this.all.delete(watch);
-            this.queue.delete(watch);
-        };
-        unregisterOnDestroy = destroyRef?.onDestroy(destroy);
-        return {
-            destroy,
-        };
-    }
-    flush() {
-        if (this.queue.size === 0) {
-            return;
-        }
-        for (const [watch, zone] of this.queue) {
-            this.queue.delete(watch);
-            if (zone) {
-                zone.run(() => watch.run());
-            }
-            else {
-                watch.run();
+function refreshEmbeddedViews(lView) {
+    for (let lContainer = getFirstLContainer(lView); lContainer !== null; lContainer = getNextLContainer(lContainer)) {
+        for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
+            const embeddedLView = lContainer[i];
+            const embeddedTView = embeddedLView[TVIEW];
+            ngDevMode && assertDefined(embeddedTView, 'TView must be allocated');
+            if (viewAttachedToChangeDetector(embeddedLView)) {
+                refreshView(embeddedTView, embeddedLView, embeddedTView.template, embeddedLView[CONTEXT]);
             }
         }
     }
-    get isQueueEmpty() {
-        return this.queue.size === 0;
-    }
-    /** @nocollapse */
-    static { this.ɵprov = ɵɵdefineInjectable({
-        token: EffectManager,
-        providedIn: 'root',
-        factory: () => new EffectManager(),
-    }); }
 }
 /**
- * Create a global `Effect` for the given reactive function.
+ * Mark transplanted views as needing to be refreshed at their insertion points.
  *
- * @developerPreview
+ * @param lView The `LView` that may have transplanted views.
  */
-function effect(effectFn, options) {
-    !options?.injector && assertInInjectionContext(effect);
-    const injector = options?.injector ?? inject$1(Injector);
-    const effectManager = injector.get(EffectManager);
-    const destroyRef = options?.manualCleanup !== true ? injector.get(DestroyRef) : null;
-    return effectManager.create(effectFn, destroyRef, !!options?.allowSignalWrites);
+function markTransplantedViewsForRefresh(lView) {
+    for (let lContainer = getFirstLContainer(lView); lContainer !== null; lContainer = getNextLContainer(lContainer)) {
+        if (!lContainer[HAS_TRANSPLANTED_VIEWS])
+            continue;
+        const movedViews = lContainer[MOVED_VIEWS];
+        ngDevMode && assertDefined(movedViews, 'Transplanted View flags set but missing MOVED_VIEWS');
+        for (let i = 0; i < movedViews.length; i++) {
+            const movedLView = movedViews[i];
+            const insertionLContainer = movedLView[PARENT];
+            ngDevMode && assertLContainer(insertionLContainer);
+            markViewForRefresh(movedLView);
+        }
+    }
 }
-
 /**
- * Compute the static styling (class/style) from `TAttributes`.
- *
- * This function should be called during `firstCreatePass` only.
+ * Refreshes components by entering the component view and processing its bindings, queries, etc.
  *
- * @param tNode The `TNode` into which the styling information should be loaded.
- * @param attrs `TAttributes` containing the styling information.
- * @param writeToHost Where should the resulting static styles be written?
- *   - `false` Write to `TNode.stylesWithoutHost` / `TNode.classesWithoutHost`
- *   - `true` Write to `TNode.styles` / `TNode.classes`
+ * @param componentHostIdx  Element index in LView[] (adjusted for HEADER_OFFSET)
  */
-function computeStaticStyling(tNode, attrs, writeToHost) {
-    ngDevMode &&
-        assertFirstCreatePass(getTView(), 'Expecting to be called in first template pass only');
-    let styles = writeToHost ? tNode.styles : null;
-    let classes = writeToHost ? tNode.classes : null;
-    let mode = 0;
-    if (attrs !== null) {
-        for (let i = 0; i < attrs.length; i++) {
-            const value = attrs[i];
-            if (typeof value === 'number') {
-                mode = value;
-            }
-            else if (mode == 1 /* AttributeMarker.Classes */) {
-                classes = concatStringsWithSpace(classes, value);
-            }
-            else if (mode == 2 /* AttributeMarker.Styles */) {
-                const style = value;
-                const styleValue = attrs[++i];
-                styles = concatStringsWithSpace(styles, style + ': ' + styleValue + ';');
-            }
+function refreshComponent(hostLView, componentHostIdx) {
+    ngDevMode && assertEqual(isCreationMode(hostLView), false, 'Should be run in update mode');
+    const componentView = getComponentLViewByIndex(componentHostIdx, hostLView);
+    // Only attached components that are CheckAlways or OnPush and dirty should be refreshed
+    if (viewAttachedToChangeDetector(componentView)) {
+        const tView = componentView[TVIEW];
+        if (componentView[FLAGS] & (16 /* LViewFlags.CheckAlways */ | 64 /* LViewFlags.Dirty */)) {
+            refreshView(tView, componentView, tView.template, componentView[CONTEXT]);
+        }
+        else if (componentView[DESCENDANT_VIEWS_TO_REFRESH] > 0) {
+            // Only attached components that are CheckAlways or OnPush and dirty should be refreshed
+            refreshContainsDirtyView(componentView);
         }
     }
-    writeToHost ? tNode.styles = styles : tNode.stylesWithoutHost = styles;
-    writeToHost ? tNode.classes = classes : tNode.classesWithoutHost = classes;
 }
-
-function collectNativeNodes(tView, lView, tNode, result, isProjection = false) {
-    while (tNode !== null) {
-        ngDevMode &&
-            assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ | 12 /* TNodeType.AnyContainer */ | 16 /* TNodeType.Projection */ | 32 /* TNodeType.Icu */);
-        const lNode = lView[tNode.index];
-        if (lNode !== null) {
-            result.push(unwrapRNode(lNode));
-        }
-        // A given lNode can represent either a native node or a LContainer (when it is a host of a
-        // ViewContainerRef). When we find a LContainer we need to descend into it to collect root nodes
-        // from the views in this container.
-        if (isLContainer(lNode)) {
-            for (let i = CONTAINER_HEADER_OFFSET; i < lNode.length; i++) {
-                const lViewInAContainer = lNode[i];
-                const lViewFirstChildTNode = lViewInAContainer[TVIEW].firstChild;
-                if (lViewFirstChildTNode !== null) {
-                    collectNativeNodes(lViewInAContainer[TVIEW], lViewInAContainer, lViewFirstChildTNode, result);
+/**
+ * Refreshes all transplanted views marked with `LViewFlags.RefreshTransplantedView` that are
+ * children or descendants of the given lView.
+ *
+ * @param lView The lView which contains descendant transplanted views that need to be refreshed.
+ */
+function refreshContainsDirtyView(lView) {
+    for (let lContainer = getFirstLContainer(lView); lContainer !== null; lContainer = getNextLContainer(lContainer)) {
+        for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
+            const embeddedLView = lContainer[i];
+            if (viewAttachedToChangeDetector(embeddedLView)) {
+                if (embeddedLView[FLAGS] & 1024 /* LViewFlags.RefreshView */) {
+                    const embeddedTView = embeddedLView[TVIEW];
+                    ngDevMode && assertDefined(embeddedTView, 'TView must be allocated');
+                    refreshView(embeddedTView, embeddedLView, embeddedTView.template, embeddedLView[CONTEXT]);
+                }
+                else if (embeddedLView[DESCENDANT_VIEWS_TO_REFRESH] > 0) {
+                    refreshContainsDirtyView(embeddedLView);
                 }
-            }
-            // When an LContainer is created, the anchor (comment) node is:
-            // - (1) either reused in case of an ElementContainer (<ng-container>)
-            // - (2) or a new comment node is created
-            // In the first case, the anchor comment node would be added to the final
-            // list by the code above (`result.push(unwrapRNode(lNode))`), but the second
-            // case requires extra handling: the anchor node needs to be added to the
-            // final list manually. See additional information in the `createAnchorNode`
-            // function in the `view_container_ref.ts`.
-            //
-            // In the first case, the same reference would be stored in the `NATIVE`
-            // and `HOST` slots in an LContainer. Otherwise, this is the second case and
-            // we should add an element to the final list.
-            if (lNode[NATIVE] !== lNode[HOST]) {
-                result.push(lNode[NATIVE]);
-            }
-        }
-        const tNodeType = tNode.type;
-        if (tNodeType & 8 /* TNodeType.ElementContainer */) {
-            collectNativeNodes(tView, lView, tNode.child, result);
-        }
-        else if (tNodeType & 32 /* TNodeType.Icu */) {
-            const nextRNode = icuContainerIterate(tNode, lView);
-            let rNode;
-            while (rNode = nextRNode()) {
-                result.push(rNode);
             }
         }
-        else if (tNodeType & 16 /* TNodeType.Projection */) {
-            const nodesInSlot = getProjectionNodes(lView, tNode);
-            if (Array.isArray(nodesInSlot)) {
-                result.push(...nodesInSlot);
-            }
-            else {
-                const parentView = getLViewParent(lView[DECLARATION_COMPONENT_VIEW]);
-                ngDevMode && assertParentView(parentView);
-                collectNativeNodes(parentView[TVIEW], parentView, nodesInSlot, result, true);
+    }
+    const tView = lView[TVIEW];
+    // Refresh child component views.
+    const components = tView.components;
+    if (components !== null) {
+        for (let i = 0; i < components.length; i++) {
+            const componentView = getComponentLViewByIndex(components[i], lView);
+            // Only attached components that are CheckAlways or OnPush and dirty should be refreshed
+            if (viewAttachedToChangeDetector(componentView) &&
+                componentView[DESCENDANT_VIEWS_TO_REFRESH] > 0) {
+                refreshContainsDirtyView(componentView);
             }
         }
-        tNode = isProjection ? tNode.projectionNext : tNode.next;
     }
-    return result;
+}
+/** Refreshes child components in the current view (update mode). */
+function refreshChildComponents(hostLView, components) {
+    for (let i = 0; i < components.length; i++) {
+        refreshComponent(hostLView, components[i]);
+    }
 }
 
 class ViewRef {
@@ -14584,18 +14599,6 @@ function ɵɵattributeInterpolateV(attrName, values, sanitizer, namespace) {
     return ɵɵattributeInterpolateV;
 }
 
-/**
- * Synchronously perform change detection on a component (and possibly its sub-components).
- *
- * This function triggers change detection in a synchronous way on a component.
- *
- * @param component The component which the change detection should be performed on.
- */
-function detectChanges(component) {
-    const view = getComponentViewByInstance(component);
-    detectChangesInternal(view[TVIEW], view, component);
-}
-
 const AT_THIS_LOCATION = '<-- AT THIS LOCATION';
 /**
  * Retrieves a user friendly string for a given TNodeType for use in
@@ -14669,9 +14672,16 @@ function validateSiblingNodeExists(node) {
 /**
  * Validates that a node exists or throws
  */
-function validateNodeExists(node) {
+function validateNodeExists(node, lView = null, tNode = null) {
     if (!node) {
-        throw new RuntimeError(-502 /* RuntimeErrorCode.HYDRATION_MISSING_NODE */, `Hydration expected an element to be present at this location.`);
+        const header = 'During hydration, Angular expected an element to be present at this location.\n\n';
+        let expected = '';
+        let footer = '';
+        if (lView !== null && tNode !== null) {
+            expected = `${describeExpectedDom(lView, tNode, false)}\n\n`;
+            footer = getHydrationErrorFooter();
+        }
+        throw new RuntimeError(-502 /* RuntimeErrorCode.HYDRATION_MISSING_NODE */, header + expected + footer);
     }
 }
 /**
@@ -14728,7 +14738,7 @@ function invalidSkipHydrationHost(rNode) {
         'that doesn\'t act as a component host. Hydration can be ' +
         'skipped only on per-component basis.\n\n';
     const actual = `${describeDomFromNode(rNode)}\n\n`;
-    const footer = 'Please move the `ngSkipHydration` attribute to the component host element.';
+    const footer = 'Please move the `ngSkipHydration` attribute to the component host element.\n\n';
     const message = header + actual + footer;
     return new RuntimeError(-504 /* RuntimeErrorCode.INVALID_SKIP_HYDRATION_HOST */, message);
 }
@@ -14913,8 +14923,9 @@ function getHydrationErrorFooter(componentClassName) {
     const componentInfo = componentClassName ? `the "${componentClassName}"` : 'corresponding';
     return `To fix this problem:\n` +
         `  * check ${componentInfo} component for hydration-related issues\n` +
+        `  * check to see if your template has valid HTML structure\n` +
         `  * or skip hydration by adding the \`ngSkipHydration\` attribute ` +
-        `to its host node in a template`;
+        `to its host node in a template\n\n`;
 }
 /**
  * An attribute related note for hydration errors
@@ -15274,17 +15285,11 @@ function templateFirstCreatePass(index, tView, lView, templateFn, decls, vars, t
     ngDevMode && assertFirstCreatePass(tView);
     ngDevMode && ngDevMode.firstCreatePass++;
     const tViewConsts = tView.consts;
-    let ssrId = null;
-    const hydrationInfo = lView[HYDRATION];
-    if (hydrationInfo) {
-        const noOffsetIndex = index - HEADER_OFFSET;
-        ssrId = hydrationInfo.data[TEMPLATES]?.[noOffsetIndex] ?? null;
-    }
     // TODO(pk): refactor getOrCreateTNode to have the "create" only version
     const tNode = getOrCreateTNode(tView, index, 4 /* TNodeType.Container */, tagName || null, getConstant(tViewConsts, attrsIndex));
     resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex));
     registerPostOrderHooks(tView, tNode);
-    const embeddedTView = tNode.tView = createTView(2 /* TViewType.Embedded */, tNode, templateFn, decls, vars, tView.directiveRegistry, tView.pipeRegistry, null, tView.schemas, tViewConsts, ssrId);
+    const embeddedTView = tNode.tView = createTView(2 /* TViewType.Embedded */, tNode, templateFn, decls, vars, tView.directiveRegistry, tView.pipeRegistry, null, tView.schemas, tViewConsts, null /* ssrId */);
     if (tView.queries !== null) {
         tView.queries.template(tView, tNode);
         embeddedTView.queries = tView.queries.embeddedTView(tNode);
@@ -15351,9 +15356,27 @@ function locateOrCreateContainerAnchorImpl(tView, lView, tNode, index) {
     if (isNodeCreationMode) {
         return createContainerAnchorImpl(tView, lView, tNode, index);
     }
+    const ssrId = hydrationInfo.data[TEMPLATES]?.[index] ?? null;
+    // Apply `ssrId` value to the underlying TView if it was not previously set.
+    //
+    // There might be situations when the same component is present in a template
+    // multiple times and some instances are opted-out of using hydration via
+    // `ngSkipHydration` attribute. In this scenario, at the time a TView is created,
+    // the `ssrId` might be `null` (if the first component is opted-out of hydration).
+    // The code below makes sure that the `ssrId` is applied to the TView if it's still
+    // `null` and verifies we never try to override it with a different value.
+    if (ssrId !== null && tNode.tView !== null) {
+        if (tNode.tView.ssrId === null) {
+            tNode.tView.ssrId = ssrId;
+        }
+        else {
+            ngDevMode &&
+                assertEqual(tNode.tView.ssrId, ssrId, 'Unexpected value of the `ssrId` for this TView');
+        }
+    }
     // Hydration mode, looking up existing elements in DOM.
     const currentRNode = locateNextRNode(hydrationInfo, tView, lView, tNode);
-    ngDevMode && validateNodeExists(currentRNode);
+    ngDevMode && validateNodeExists(currentRNode, lView, tNode);
     setSegmentHead(hydrationInfo, index, currentRNode);
     const viewContainerSize = calcSerializedContainerSize(hydrationInfo, index);
     const comment = siblingAfter(viewContainerSize, currentRNode);
@@ -15587,7 +15610,7 @@ function locateOrCreateElementNodeImpl(tView, lView, tNode, renderer, name, inde
         // `<div #vcrTarget>` is represented in the DOM as `<div></div>...<!--container-->`,
         // so while processing a `<div>` instruction, point to the next sibling as a
         // start of a segment.
-        ngDevMode && validateNodeExists(native.nextSibling);
+        ngDevMode && validateNodeExists(native.nextSibling, lView, tNode);
         setSegmentHead(hydrationInfo, index, native.nextSibling);
     }
     // Checks if the skip hydration attribute is present during hydration so we know to
@@ -15732,7 +15755,7 @@ function locateOrCreateElementContainerNode(tView, lView, tNode, index) {
     }
     // Hydration mode, looking up existing elements in DOM.
     const currentRNode = locateNextRNode(hydrationInfo, tView, lView, tNode);
-    ngDevMode && validateNodeExists(currentRNode);
+    ngDevMode && validateNodeExists(currentRNode, lView, tNode);
     const ngContainerSize = getNgContainerSize(hydrationInfo, index);
     ngDevMode &&
         assertNumber(ngContainerSize, 'Unexpected state: hydrating an <ng-container>, ' +
@@ -26202,9 +26225,7 @@ class TestBedImpl {
         if (!componentDef) {
             throw new Error(`It looks like '${ɵstringify(type)}' has not been compiled.`);
         }
-        // TODO: Don't cast as `InjectionToken<boolean>`, proper type is boolean[]
         const noNgZone = this.inject(ComponentFixtureNoNgZone, false);
-        // TODO: Don't cast as `InjectionToken<boolean>`, proper type is boolean[]
         const autoDetect = this.inject(ComponentFixtureAutoDetect, false);
         const ngZone = noNgZone ? null : this.inject(NgZone, null);
         const componentFactory = new ɵRender3ComponentFactory(componentDef);