@angular/core 20.0.6 → 20.1.0-next.1

package/fesm2022/{debug_node.mjs → debug_node-CGQXW8qF.mjs}

@@ -1,15 +1,15 @@
 /**
- * @license Angular v20.0.6
+ * @license Angular v20.1.0-next.1
  * (c) 2010-2025 Google LLC. https://angular.io/
  * License: MIT
  */
 
-import { attachInjectFlag, _global, ɵɵdefineInjectable as __defineInjectable, ɵɵdefineInjector as __defineInjector, ɵɵinject as __inject, ɵɵinvalidFactoryDep as __invalidFactoryDep, resolveForwardRef, newArray, EMPTY_OBJ, assertString, assertFirstCreatePass, assertDefined, assertNotEqual, FLAGS, assertEqual, isInCheckNoChangesMode, PREORDER_HOOK_FLAGS, throwError, assertNumber, assertGreaterThan, HEADER_OFFSET, DECLARATION_VIEW, NG_FACTORY_DEF, isForwardRef, getFactoryDef, assertIndexInRange, assertTNodeForLView, enterDI, runInInjectorProfilerContext, getCurrentTNode, getLView, emitInjectorToCreateInstanceEvent, emitInstanceCreatedByInjectorEvent, throwProviderNotFoundError, leaveDI, assertNodeInjector, throwCyclicDependencyError, stringifyForError, setInjectorProfilerContext, setInjectImplementation, assertDirectiveDef, NG_ELEMENT_ID, convertToBitFlags, isRootView, T_HOST, TVIEW, injectRootLimpMode, isComponentDef, EMBEDDED_VIEW_INJECTOR, INJECTOR$1 as INJECTOR, DECLARATION_COMPONENT_VIEW, isComponentHost, RuntimeError, NG_PROV_DEF, getClosureSafeProperty, getNativeByTNode, flatten, arrayEquals, ID, isLView, assertDomNode, unwrapRNode, getComponentLViewByIndex, CONTEXT, EMPTY_ARRAY, assertLView, HOST, CHILD_HEAD, NEXT, isLContainer, getLViewParent, Injector, CLEANUP, getComponentDef, getDirectiveDef, InjectionToken, inject, isContentQueryHost, setCurrentQueryIndex, XSS_SECURITY_URL, renderStringify, ENVIRONMENT, makeEnvironmentProviders, formatRuntimeError, resetPreOrderHookFlags, PARENT, RENDERER, HYDRATION, CHILD_TAIL, assertSame, assertFirstUpdatePass, getSelectedIndex, getTView, assertIndexInDeclRange, setSelectedIndex, assertNotSame, setCurrentDirectiveIndex, INTERNAL_APPLICATION_ERROR_HANDLER, stringify, getCurrentDirectiveIndex, unwrapLView, isCreationMode, assertNotReactive, enterView, QUERIES, leaveView, assertLContainer, DECLARATION_LCONTAINER, MOVED_VIEWS, isDestroyed, REACTIVE_TEMPLATE_CONSUMER, ON_DESTROY_HOOKS, assertFunction, EFFECTS, assertProjectionSlots, NATIVE, assertParentView, CONTAINER_HEADER_OFFSET, AFTER_RENDER_SEQUENCES_TO_ADD, markAncestorsForTraversal, markViewForRefresh, setIsRefreshingViews, isExhaustiveCheckNoChanges, requiresRefreshOrTraversal, setIsInCheckNoChangesMode, CheckNoChangesMode, setBindingIndex, EFFECTS_TO_SCHEDULE, viewAttachedToChangeDetector, setBindingRootForHostBindings, isRefreshingViews, removeFromArray, addToArray, updateAncestorTraversalFlagsOnAttach, storeLViewOnDestroy, VIEW_REFS, assertGreaterThanOrEqual, isInI18nBlock, assertTNodeForTView, setCurrentTNode, getCurrentParentTNode, getCurrentTNodePlaceholderOk, isCurrentTNodeParent, isInSkipHydrationBlock as isInSkipHydrationBlock$1, assertTNode, assertTIcu, assertNumberInRange, DEHYDRATED_VIEWS, getNgModuleDef, getPipeDef as getPipeDef$1, getNgModuleDefOrThrow, isStandalone, concatStringsWithSpace, assertInjectImplementationNotEqual, emitInjectEvent, getConstant, assertLessThan, getOrCreateTViewCleanup, getOrCreateLViewCleanup, isDirectiveHost, assertNotDefined, nextBindingIndex, getSelectedTNode, getDirectiveDefOrThrow, getTNode, assertComponentType, debugStringifyTypeForError, ChangeDetectionScheduler, EnvironmentInjector, SVG_NAMESPACE, MATH_ML_NAMESPACE, viewAttachedToContainer, storeCleanupWithContext, signal, createInjectorWithoutInjectorInstances, R3Injector, getNullInjector, internalImportProvidersFrom, initNgDevMode, fillProperties, wasLastNodeCreated, lastNodeWasCreated, getBindingsEnabled, isInInjectionContext, DestroyRef, PendingTasksInternal, noop, ErrorHandler, assertNotInReactiveContext, assertInInjectionContext, ViewContext, removeLViewOnDestroy, walkUpViews, getNativeByIndex, assertElement, arrayInsert2, arraySplice, setInjectorProfiler, NullInjector, ENVIRONMENT_INITIALIZER, INJECTOR_DEF_TYPES, walkProviderTree, getInjectorDef, deepForEach, isTypeProvider, isSignal, runInInjectionContext, ZONELESS_ENABLED, EffectScheduler, PendingTasks, getBindingIndex, getElementDepthCount, increaseElementDepthCount, setCurrentTNodeAsNotParent, assertHasParent, isSkipHydrationRootTNode, leaveSkipHydrationBlock, decreaseElementDepthCount, getNamespace, enterSkipHydrationBlock, getCurrentDirectiveDef, assertIndexInExpandoRange, assertOneOf, setInI18nBlock, nextContextImpl, getCurrentQueryIndex, getContextLView, load, keyValueArrayIndexOf, keyValueArraySet, keyValueArrayGet, incrementBindingIndex, isWritableSignal, store, providerToFactory, emitProviderConfiguredEvent, isClassProvider, getBindingRoot, NG_COMP_DEF, ɵɵresetView as __resetView, ɵɵnamespaceHTML as __namespaceHTML, ɵɵnamespaceMathML as __namespaceMathML, ɵɵnamespaceSVG as __namespaceSVG, ɵɵenableBindings as __enableBindings, ɵɵdisableBindings as __disableBindings, ɵɵrestoreView as __restoreView, forwardRef, NG_MOD_DEF, NG_INJ_DEF, NG_DIR_DEF, NG_PIPE_DEF, ZONELESS_SCHEDULER_DISABLED, SCHEDULE_IN_ROOT_ZONE, PROVIDED_ZONELESS, getNativeByTNodeOrNull } from './root_effect_scheduler.mjs';
-import { setActiveConsumer, SIGNAL, consumerDestroy, REACTIVE_NODE, consumerPollProducersForChange, consumerBeforeComputation, getActiveConsumer, consumerAfterComputation, createComputed, setThrowInvalidWriteToSignalError } from './signal.mjs';
+import { attachInjectFlag, _global, ɵɵdefineInjectable as __defineInjectable, ɵɵdefineInjector as __defineInjector, ɵɵinject as __inject, ɵɵinvalidFactoryDep as __invalidFactoryDep, resolveForwardRef, newArray, EMPTY_OBJ, assertString, assertNotEqual, FLAGS, assertEqual, isInCheckNoChangesMode, PREORDER_HOOK_FLAGS, assertFirstCreatePass, assertDefined, throwError, assertNumber, assertGreaterThan, HEADER_OFFSET, DECLARATION_VIEW, NG_FACTORY_DEF, isForwardRef, getFactoryDef, assertIndexInRange, assertTNodeForLView, enterDI, runInInjectorProfilerContext, getCurrentTNode, getLView, emitInjectorToCreateInstanceEvent, emitInstanceCreatedByInjectorEvent, throwProviderNotFoundError, leaveDI, assertNodeInjector, throwCyclicDependencyError, stringifyForError, setInjectorProfilerContext, setInjectImplementation, assertDirectiveDef, NG_ELEMENT_ID, convertToBitFlags, isRootView, T_HOST, TVIEW, injectRootLimpMode, isComponentDef, EMBEDDED_VIEW_INJECTOR, INJECTOR$1 as INJECTOR, DECLARATION_COMPONENT_VIEW, isComponentHost, RuntimeError, NG_PROV_DEF, getClosureSafeProperty, getNativeByTNode, flatten, arrayEquals, ID, isLView, assertDomNode, unwrapRNode, getComponentLViewByIndex, CONTEXT, EMPTY_ARRAY, assertLView, HOST, CHILD_HEAD, NEXT, isLContainer, getLViewParent, Injector, CLEANUP, getComponentDef, getDirectiveDef, InjectionToken, inject, isInSkipHydrationBlock as isInSkipHydrationBlock$1, HYDRATION, isContentQueryHost, setCurrentQueryIndex, XSS_SECURITY_URL, renderStringify, ENVIRONMENT, makeEnvironmentProviders, isDirectiveHost, formatRuntimeError, resetPreOrderHookFlags, PARENT, RENDERER, CHILD_TAIL, assertSame, assertFirstUpdatePass, getSelectedIndex, getTView, assertIndexInDeclRange, setSelectedIndex, assertLContainer, MOVED_VIEWS, isDestroyed, REACTIVE_TEMPLATE_CONSUMER, DECLARATION_LCONTAINER, QUERIES, assertNotReactive, ON_DESTROY_HOOKS, assertFunction, EFFECTS, assertProjectionSlots, NATIVE, assertParentView, CONTAINER_HEADER_OFFSET, assertNotSame, setCurrentDirectiveIndex, setCurrentTNode, getElementDepthCount, increaseElementDepthCount, wasLastNodeCreated, isCurrentTNodeParent, setCurrentTNodeAsNotParent, assertHasParent, INTERNAL_APPLICATION_ERROR_HANDLER, stringify, getCurrentDirectiveIndex, unwrapLView, isCreationMode, enterView, leaveView, AFTER_RENDER_SEQUENCES_TO_ADD, markAncestorsForTraversal, markViewForRefresh, setIsRefreshingViews, isExhaustiveCheckNoChanges, requiresRefreshOrTraversal, setIsInCheckNoChangesMode, CheckNoChangesMode, setBindingIndex, EFFECTS_TO_SCHEDULE, viewAttachedToChangeDetector, setBindingRootForHostBindings, isRefreshingViews, removeFromArray, addToArray, updateAncestorTraversalFlagsOnAttach, storeLViewOnDestroy, VIEW_REFS, assertGreaterThanOrEqual, isInI18nBlock, assertTNodeForTView, getCurrentParentTNode, getCurrentTNodePlaceholderOk, assertTNode, assertTIcu, assertNumberInRange, DEHYDRATED_VIEWS, getNgModuleDef, getPipeDef as getPipeDef$1, getNgModuleDefOrThrow, isStandalone, concatStringsWithSpace, assertInjectImplementationNotEqual, emitInjectEvent, getConstant, assertLessThan, getOrCreateTViewCleanup, getOrCreateLViewCleanup, assertNotDefined, nextBindingIndex, getSelectedTNode, getDirectiveDefOrThrow, getTNode, assertComponentType, debugStringifyTypeForError, ChangeDetectionScheduler, EnvironmentInjector, SVG_NAMESPACE, MATH_ML_NAMESPACE, viewAttachedToContainer, storeCleanupWithContext, signal, createInjectorWithoutInjectorInstances, R3Injector, getNullInjector, internalImportProvidersFrom, initNgDevMode, fillProperties, getBindingsEnabled, lastNodeWasCreated, isInInjectionContext, DestroyRef, PendingTasksInternal, noop, ErrorHandler, assertNotInReactiveContext, assertInInjectionContext, ViewContext, removeLViewOnDestroy, walkUpViews, getNativeByIndex, assertElement, arrayInsert2, arraySplice, setInjectorProfiler, NullInjector, ENVIRONMENT_INITIALIZER, INJECTOR_DEF_TYPES, walkProviderTree, getInjectorDef, deepForEach, isTypeProvider, isSignal, runInInjectionContext, ZONELESS_ENABLED, EffectScheduler, PendingTasks, assertTNodeCreationIndex, isSkipHydrationRootTNode, leaveSkipHydrationBlock, decreaseElementDepthCount, getNamespace, enterSkipHydrationBlock, getCurrentDirectiveDef, assertIndexInExpandoRange, getBindingIndex, assertOneOf, setInI18nBlock, nextContextImpl, getCurrentQueryIndex, getContextLView, load, keyValueArrayIndexOf, keyValueArraySet, keyValueArrayGet, incrementBindingIndex, isWritableSignal, store, providerToFactory, emitProviderConfiguredEvent, isClassProvider, getBindingRoot, NG_COMP_DEF, ɵɵresetView as __resetView, ɵɵnamespaceHTML as __namespaceHTML, ɵɵnamespaceMathML as __namespaceMathML, ɵɵnamespaceSVG as __namespaceSVG, ɵɵenableBindings as __enableBindings, ɵɵdisableBindings as __disableBindings, ɵɵrestoreView as __restoreView, forwardRef, NG_MOD_DEF, NG_INJ_DEF, NG_DIR_DEF, NG_PIPE_DEF, ZONELESS_SCHEDULER_DISABLED, SCHEDULE_IN_ROOT_ZONE, PROVIDED_ZONELESS, getNativeByTNodeOrNull } from './root_effect_scheduler-BvK6bnZD.mjs';
+import { setActiveConsumer, SIGNAL, consumerDestroy, REACTIVE_NODE, consumerPollProducersForChange, consumerBeforeComputation, getActiveConsumer, consumerAfterComputation, createComputed, setThrowInvalidWriteToSignalError } from './signal-nCiHhWf6.mjs';
 import { Subject, Subscription } from 'rxjs';
 import { setActiveConsumer as setActiveConsumer$1 } from '@angular/core/primitives/signals';
 import { map } from 'rxjs/operators';
-import { Attribute as Attribute$1 } from './attribute.mjs';
+import { Attribute as Attribute$1 } from './attribute-BWp59EjE.mjs';
 
 /**
  * Convince closure compiler that the wrapped function has no side-effects.
@@ -1893,7 +1893,7 @@ function searchTokensOnInjector(injectorIndex, lView, token, previousTView, flag
     const isHostSpecialCase = flags & 1 /* InternalInjectFlags.Host */ && hostTElementNode === tNode;
     const injectableIdx = locateDirectiveOrProvider(tNode, currentTView, token, canAccessViewProviders, isHostSpecialCase);
     if (injectableIdx !== null) {
-        return getNodeInjectable(lView, currentTView, injectableIdx, tNode);
+        return getNodeInjectable(lView, currentTView, injectableIdx, tNode, flags);
     }
     else {
         return NOT_FOUND;
@@ -1943,7 +1943,7 @@ function locateDirectiveOrProvider(tNode, tView, token, canAccessViewProviders,
  * cached `injectable`. Otherwise if it detects that the value is still a factory it
  * instantiates the `injectable` and caches the value.
  */
-function getNodeInjectable(lView, tView, index, tNode) {
+function getNodeInjectable(lView, tView, index, tNode, flags) {
     let value = lView[index];
     const tData = tView.data;
     if (value instanceof NodeInjectorFactory) {
@@ -1971,7 +1971,7 @@ function getNodeInjectable(lView, tView, index, tNode) {
             assertEqual(success, true, "Because flags do not contain `SkipSelf' we expect this to always succeed.");
         try {
             ngDevMode && emitInjectorToCreateInstanceEvent(token);
-            value = lView[index] = factory.factory(undefined, tData, lView, tNode);
+            value = lView[index] = factory.factory(undefined, flags, tData, lView, tNode);
             ngDevMode && emitInstanceCreatedByInjectorEvent(value);
             // This code path is hit for both directives and providers.
             // For perf reasons, we want to avoid searching for hooks on providers.
@@ -4189,6 +4189,15 @@ class DehydratedBlockRegistry {
     });
 }
 
+/**
+ * Checks whether a TNode is considered detached, i.e. not present in the
+ * translated i18n template. We should not attempt hydration for such nodes
+ * and instead, use a regular "creation mode".
+ */
+function isDetachedByI18n(tNode) {
+    return (tNode.flags & 32 /* TNodeFlags.isDetached */) === 32 /* TNodeFlags.isDetached */;
+}
+
 /**
  * The name of the key used in the TransferState collection,
  * where hydration information is located.
@@ -4532,6 +4541,18 @@ function isDisconnectedNode$1(hydrationInfo, index) {
     }
     return !!initDisconnectedNodes(hydrationInfo)?.has(index);
 }
+/**
+ * Checks whether a node can be hydrated.
+ * @param lView View in which the node instance is placed.
+ * @param tNode Node to be checked.
+ */
+function canHydrateNode(lView, tNode) {
+    const hydrationInfo = lView[HYDRATION];
+    return (hydrationInfo !== null &&
+        !isInSkipHydrationBlock$1() &&
+        !isDetachedByI18n(tNode) &&
+        !isDisconnectedNode$1(hydrationInfo, tNode.index - HEADER_OFFSET));
+}
 /**
  * Helper function to prepare text nodes for serialization by ensuring
  * that seperate logical text blocks in the DOM remain separate after
@@ -5896,21 +5917,20 @@ function ɵgetUnknownPropertyStrictMode() {
  * - the element matches any directive
  * - the element is allowed by one of the schemas
  *
- * @param element Element to validate
- * @param lView An `LView` that represents a current component that is being rendered
- * @param tagName Name of the tag to check
- * @param schemas Array of schemas
- * @param hasDirectives Boolean indicating that the element matches any directive
+ * @param lView An `LView` associated with a template is being rendered
+ * @param tNode TNode representing an element to be validated
  */
-function validateElementIsKnown(element, lView, tagName, schemas, hasDirectives) {
+function validateElementIsKnown(lView, tNode) {
+    const tView = lView[TVIEW];
     // If `schemas` is set to `null`, that's an indication that this Component was compiled in AOT
     // mode where this check happens at compile time. In JIT mode, `schemas` is always present and
     // defined as an array (as an empty array in case `schemas` field is not defined) and we should
     // execute the check below.
-    if (schemas === null)
+    if (tView.schemas === null)
         return;
+    const tagName = tNode.value;
     // If the element matches any directive, it's considered as valid.
-    if (!hasDirectives && tagName !== null) {
+    if (!isDirectiveHost(tNode) && tagName !== null) {
         // The element is unknown if it's an instance of HTMLUnknownElement, or it isn't registered
         // as a custom element. Note that unknown elements with a dash in their name won't be instances
         // of HTMLUnknownElement in browsers that support web components.
@@ -5919,11 +5939,11 @@ function validateElementIsKnown(element, lView, tagName, schemas, hasDirectives)
         // Domino doesn't expose HTMLUnknownElement globally.
         (typeof HTMLUnknownElement !== 'undefined' &&
             HTMLUnknownElement &&
-            element instanceof HTMLUnknownElement) ||
+            getNativeByTNode(tNode, lView) instanceof HTMLUnknownElement) ||
             (typeof customElements !== 'undefined' &&
                 tagName.indexOf('-') > -1 &&
                 !customElements.get(tagName));
-        if (isUnknown && !matchingSchemas(schemas, tagName)) {
+        if (isUnknown && !matchingSchemas(tView.schemas, tagName)) {
             const isHostStandalone = isHostComponentStandalone(lView);
             const templateLocation = getTemplateLocationDetails(lView);
             const schemas = `'${isHostStandalone ? '@Component' : '@NgModule'}.schemas'`;
@@ -7123,1444 +7143,1477 @@ function writeToDirectiveInput(def, instance, publicName, value) {
     }
 }
 
-function executeTemplate(tView, lView, templateFn, rf, context) {
-    const prevSelectedIndex = getSelectedIndex();
-    const isUpdatePhase = rf & 2 /* RenderFlags.Update */;
-    try {
-        setSelectedIndex(-1);
-        if (isUpdatePhase && lView.length > HEADER_OFFSET) {
-            // When we're updating, inherently select 0 so we don't
-            // have to generate that instruction for most update blocks.
-            selectIndexInternal(tView, lView, HEADER_OFFSET, !!ngDevMode && isInCheckNoChangesMode());
-        }
-        const preHookType = isUpdatePhase
-            ? 2 /* ProfilerEvent.TemplateUpdateStart */
-            : 0 /* ProfilerEvent.TemplateCreateStart */;
-        profiler(preHookType, context, templateFn);
-        templateFn(rf, context);
-    }
-    finally {
-        setSelectedIndex(prevSelectedIndex);
-        const postHookType = isUpdatePhase
-            ? 3 /* ProfilerEvent.TemplateUpdateEnd */
-            : 1 /* ProfilerEvent.TemplateCreateEnd */;
-        profiler(postHookType, context, templateFn);
-    }
+/**
+ * Flags for renderer-specific style modifiers.
+ * @publicApi
+ */
+var RendererStyleFlags2;
+(function (RendererStyleFlags2) {
+    // TODO(misko): This needs to be refactored into a separate file so that it can be imported from
+    // `node_manipulation.ts` Currently doing the import cause resolution order to change and fails
+    // the tests. The work around is to have hard coded value in `node_manipulation.ts` for now.
+    /**
+     * Marks a style as important.
+     */
+    RendererStyleFlags2[RendererStyleFlags2["Important"] = 1] = "Important";
+    /**
+     * Marks a style as using dash case naming (this-is-dash-case).
+     */
+    RendererStyleFlags2[RendererStyleFlags2["DashCase"] = 2] = "DashCase";
+})(RendererStyleFlags2 || (RendererStyleFlags2 = {}));
+
+let _icuContainerIterate;
+/**
+ * Iterator which provides ability to visit all of the `TIcuContainerNode` root `RNode`s.
+ */
+function icuContainerIterate(tIcuContainerNode, lView) {
+    return _icuContainerIterate(tIcuContainerNode, lView);
 }
 /**
- * Creates directive instances.
+ * Ensures that `IcuContainerVisitor`'s implementation is present.
+ *
+ * This function is invoked when i18n instruction comes across an ICU. The purpose is to allow the
+ * bundler to tree shake ICU logic and only load it if ICU instruction is executed.
  */
-function createDirectivesInstances(tView, lView, tNode) {
-    instantiateAllDirectives(tView, lView, tNode);
-    if ((tNode.flags & 64 /* TNodeFlags.hasHostBindings */) === 64 /* TNodeFlags.hasHostBindings */) {
-        invokeDirectivesHostBindings(tView, lView, tNode);
+function ensureIcuContainerVisitorLoaded(loader) {
+    if (_icuContainerIterate === undefined) {
+        // Do not inline this function. We want to keep `ensureIcuContainerVisitorLoaded` light, so it
+        // can be inlined into call-site.
+        _icuContainerIterate = loader();
     }
 }
+
 /**
- * Takes a list of local names and indices and pushes the resolved local variable values
- * to LView in the same order as they are loaded in the template with load().
+ * NOTE: for performance reasons, the possible actions are inlined within the function instead of
+ * being passed as an argument.
  */
-function saveResolvedLocalsInData(viewData, tNode, localRefExtractor = getNativeByTNode) {
-    const localNames = tNode.localNames;
-    if (localNames !== null) {
-        let localIndex = tNode.index + 1;
-        for (let i = 0; i < localNames.length; i += 2) {
-            const index = localNames[i + 1];
-            const value = index === -1
-                ? localRefExtractor(tNode, viewData)
-                : viewData[index];
-            viewData[localIndex++] = value;
+function applyToElementOrContainer(action, renderer, parent, lNodeToHandle, beforeNode) {
+    // If this slot was allocated for a text node dynamically created by i18n, the text node itself
+    // won't be created until i18nApply() in the update block, so this node should be skipped.
+    // For more info, see "ICU expressions should work inside an ngTemplateOutlet inside an ngFor"
+    // in `i18n_spec.ts`.
+    if (lNodeToHandle != null) {
+        let lContainer;
+        let isComponent = false;
+        // We are expecting an RNode, but in the case of a component or LContainer the `RNode` is
+        // wrapped in an array which needs to be unwrapped. We need to know if it is a component and if
+        // it has LContainer so that we can process all of those cases appropriately.
+        if (isLContainer(lNodeToHandle)) {
+            lContainer = lNodeToHandle;
+        }
+        else if (isLView(lNodeToHandle)) {
+            isComponent = true;
+            ngDevMode && assertDefined(lNodeToHandle[HOST], 'HOST must be defined for a component LView');
+            lNodeToHandle = lNodeToHandle[HOST];
+        }
+        const rNode = unwrapRNode(lNodeToHandle);
+        if (action === 0 /* WalkTNodeTreeAction.Create */ && parent !== null) {
+            if (beforeNode == null) {
+                nativeAppendChild(renderer, parent, rNode);
+            }
+            else {
+                nativeInsertBefore(renderer, parent, rNode, beforeNode || null, true);
+            }
+        }
+        else if (action === 1 /* WalkTNodeTreeAction.Insert */ && parent !== null) {
+            nativeInsertBefore(renderer, parent, rNode, beforeNode || null, true);
+        }
+        else if (action === 2 /* WalkTNodeTreeAction.Detach */) {
+            nativeRemoveNode(renderer, rNode, isComponent);
+        }
+        else if (action === 3 /* WalkTNodeTreeAction.Destroy */) {
+            renderer.destroyNode(rNode);
+        }
+        if (lContainer != null) {
+            applyContainer(renderer, action, lContainer, parent, beforeNode);
         }
     }
 }
 /**
- * Locates the host native element, used for bootstrapping existing nodes into rendering pipeline.
+ * Removes all DOM elements associated with a view.
  *
- * @param renderer the renderer used to locate the element.
- * @param elementOrSelector Render element or CSS selector to locate the element.
- * @param encapsulation View Encapsulation defined for component that requests host element.
- * @param injector Root view injector instance.
- */
-function locateHostElement(renderer, elementOrSelector, encapsulation, injector) {
-    // Note: we use default value for the `PRESERVE_HOST_CONTENT` here even though it's a
-    // tree-shakable one (providedIn:'root'). This code path can be triggered during dynamic
-    // component creation (after calling ViewContainerRef.createComponent) when an injector
-    // instance can be provided. The injector instance might be disconnected from the main DI
-    // tree, thus the `PRESERVE_HOST_CONTENT` would not be able to instantiate. In this case, the
-    // default value will be used.
-    const preserveHostContent = injector.get(PRESERVE_HOST_CONTENT, PRESERVE_HOST_CONTENT_DEFAULT);
-    // When using native Shadow DOM, do not clear host element to allow native slot
-    // projection.
-    const preserveContent = preserveHostContent || encapsulation === ViewEncapsulation.ShadowDom;
-    const rootElement = renderer.selectRootElement(elementOrSelector, preserveContent);
-    applyRootElementTransform(rootElement);
-    return rootElement;
-}
-/**
- * Applies any root element transformations that are needed. If hydration is enabled,
- * this will process corrupted text nodes.
+ * Because some root nodes of the view may be containers, we sometimes need
+ * to propagate deeply into the nested containers to remove all elements in the
+ * views beneath it.
  *
- * @param rootElement the app root HTML Element
+ * @param tView The `TView' of the `LView` from which elements should be added or removed
+ * @param lView The view from which elements should be added or removed
  */
-function applyRootElementTransform(rootElement) {
-    _applyRootElementTransformImpl(rootElement);
+function removeViewFromDOM(tView, lView) {
+    detachViewFromDOM(tView, lView);
+    lView[HOST] = null;
+    lView[T_HOST] = null;
 }
 /**
- * Reference to a function that applies transformations to the root HTML element
- * of an app. When hydration is enabled, this processes any corrupt text nodes
- * so they are properly hydratable on the client.
+ * Adds all DOM elements associated with a view.
  *
- * @param rootElement the app root HTML Element
- */
-let _applyRootElementTransformImpl = () => null;
-/**
- * Processes text node markers before hydration begins. This replaces any special comment
- * nodes that were added prior to serialization are swapped out to restore proper text
- * nodes before hydration.
+ * Because some root nodes of the view may be containers, we sometimes need
+ * to propagate deeply into the nested containers to add all elements in the
+ * views beneath it.
  *
- * @param rootElement the app root HTML Element
+ * @param tView The `TView' of the `LView` from which elements should be added or removed
+ * @param parentTNode The `TNode` where the `LView` should be attached to.
+ * @param renderer Current renderer to use for DOM manipulations.
+ * @param lView The view from which elements should be added or removed
+ * @param parentNativeNode The parent `RElement` where it should be inserted into.
+ * @param beforeNode The node before which elements should be added, if insert mode
  */
-function applyRootElementTransformImpl(rootElement) {
-    if (hasSkipHydrationAttrOnRElement(rootElement)) {
-        // Handle a situation when the `ngSkipHydration` attribute is applied
-        // to the root node of an application. In this case, we should clear
-        // the contents and render everything from scratch.
-        clearElementContents(rootElement);
-    }
-    else {
-        processTextNodeMarkersBeforeHydration(rootElement);
-    }
+function addViewToDOM(tView, parentTNode, renderer, lView, parentNativeNode, beforeNode) {
+    lView[HOST] = parentNativeNode;
+    lView[T_HOST] = parentTNode;
+    applyView(tView, lView, renderer, 1 /* WalkTNodeTreeAction.Insert */, parentNativeNode, beforeNode);
 }
 /**
- * Sets the implementation for the `applyRootElementTransform` function.
+ * Detach a `LView` from the DOM by detaching its nodes.
+ *
+ * @param tView The `TView' of the `LView` to be detached
+ * @param lView the `LView` to be detached.
  */
-function enableApplyRootElementTransformImpl() {
-    _applyRootElementTransformImpl = applyRootElementTransformImpl;
+function detachViewFromDOM(tView, lView) {
+    // When we remove a view from the DOM, we need to rerun afterRender hooks
+    // We don't necessarily needs to run change detection. DOM removal only requires
+    // change detection if animations are enabled (this notification is handled by animations).
+    lView[ENVIRONMENT].changeDetectionScheduler?.notify(9 /* NotificationSource.ViewDetachedFromDOM */);
+    applyView(tView, lView, lView[RENDERER], 2 /* WalkTNodeTreeAction.Detach */, null, null);
 }
 /**
- * Mapping between attributes names that don't correspond to their element property names.
+ * Traverses down and up the tree of views and containers to remove listeners and
+ * call onDestroy callbacks.
  *
- * Performance note: this function is written as a series of if checks (instead of, say, a property
- * object lookup) for performance reasons - the series of `if` checks seems to be the fastest way of
- * mapping property names. Do NOT change without benchmarking.
+ * Notes:
+ *  - Because it's used for onDestroy calls, it needs to be bottom-up.
+ *  - Must process containers instead of their views to avoid splicing
+ *  when views are destroyed and re-added.
+ *  - Using a while loop because it's faster than recursion
+ *  - Destroy only called on movement to sibling or movement to parent (laterally or up)
  *
- * Note: this mapping has to be kept in sync with the equally named mapping in the template
- * type-checking machinery of ngtsc.
+ *  @param rootView The view to destroy
  */
-function mapPropName(name) {
-    if (name === 'class')
-        return 'className';
-    if (name === 'for')
-        return 'htmlFor';
-    if (name === 'formaction')
-        return 'formAction';
-    if (name === 'innerHtml')
-        return 'innerHTML';
-    if (name === 'readonly')
-        return 'readOnly';
-    if (name === 'tabindex')
-        return 'tabIndex';
-    return name;
-}
-function setPropertyAndInputs(tNode, lView, propName, value, renderer, sanitizer) {
-    ngDevMode && assertNotSame(value, NO_CHANGE, 'Incoming value should never be NO_CHANGE.');
-    const tView = lView[TVIEW];
-    const hasSetInput = setAllInputsForProperty(tNode, tView, lView, propName, value);
-    if (hasSetInput) {
-        isComponentHost(tNode) && markDirtyIfOnPush(lView, tNode.index);
-        ngDevMode && setNgReflectProperties(lView, tView, tNode, propName, value);
-        return; // Stop propcessing if we've matched at least one input.
+function destroyViewTree(rootView) {
+    // If the view has no children, we can clean it up and return early.
+    let lViewOrLContainer = rootView[CHILD_HEAD];
+    if (!lViewOrLContainer) {
+        return cleanUpView(rootView[TVIEW], rootView);
     }
-    setDomProperty(tNode, lView, propName, value, renderer, sanitizer);
-}
-/**
- * Sets a DOM property on a specific node.
- * @param tNode TNode on which to set the value.
- * @param lView View in which the node is located.
- * @param propName Name of the property.
- * @param value Value to set on the property.
- * @param renderer Renderer to use when setting the property.
- * @param sanitizer Function used to sanitize the value before setting it.
- */
-function setDomProperty(tNode, lView, propName, value, renderer, sanitizer) {
-    if (tNode.type & 3 /* TNodeType.AnyRNode */) {
-        const element = getNativeByTNode(tNode, lView);
-        propName = mapPropName(propName);
-        if (ngDevMode) {
-            validateAgainstEventProperties(propName);
-            if (!isPropertyValid(element, propName, tNode.value, lView[TVIEW].schemas)) {
-                handleUnknownPropertyError(propName, tNode.value, tNode.type, lView);
-            }
+    while (lViewOrLContainer) {
+        let next = null;
+        if (isLView(lViewOrLContainer)) {
+            // If LView, traverse down to child.
+            next = lViewOrLContainer[CHILD_HEAD];
         }
-        // It is assumed that the sanitizer is only added when the compiler determines that the
-        // property is risky, so sanitization can be done without further checks.
-        value = sanitizer != null ? sanitizer(value, tNode.value || '', propName) : value;
-        renderer.setProperty(element, propName, value);
-    }
-    else if (tNode.type & 12 /* TNodeType.AnyContainer */) {
-        // If the node is a container and the property didn't
-        // match any of the inputs or schemas we should throw.
-        if (ngDevMode && !matchingSchemas(lView[TVIEW].schemas, tNode.value)) {
-            handleUnknownPropertyError(propName, tNode.value, tNode.type, lView);
+        else {
+            ngDevMode && assertLContainer(lViewOrLContainer);
+            // If container, traverse down to its first LView.
+            const firstView = lViewOrLContainer[CONTAINER_HEADER_OFFSET];
+            if (firstView)
+                next = firstView;
+        }
+        if (!next) {
+            // Only clean up view when moving to the side or up, as destroy hooks
+            // should be called in order from the bottom up.
+            while (lViewOrLContainer && !lViewOrLContainer[NEXT] && lViewOrLContainer !== rootView) {
+                if (isLView(lViewOrLContainer)) {
+                    cleanUpView(lViewOrLContainer[TVIEW], lViewOrLContainer);
+                }
+                lViewOrLContainer = lViewOrLContainer[PARENT];
+            }
+            if (lViewOrLContainer === null)
+                lViewOrLContainer = rootView;
+            if (isLView(lViewOrLContainer)) {
+                cleanUpView(lViewOrLContainer[TVIEW], lViewOrLContainer);
+            }
+            next = lViewOrLContainer && lViewOrLContainer[NEXT];
         }
+        lViewOrLContainer = next;
     }
 }
-/** If node is an OnPush component, marks its LView dirty. */
-function markDirtyIfOnPush(lView, viewIndex) {
-    ngDevMode && assertLView(lView);
-    const childComponentLView = getComponentLViewByIndex(viewIndex, lView);
-    if (!(childComponentLView[FLAGS] & 16 /* LViewFlags.CheckAlways */)) {
-        childComponentLView[FLAGS] |= 64 /* LViewFlags.Dirty */;
-    }
+function detachMovedView(declarationContainer, lView) {
+    ngDevMode && assertLContainer(declarationContainer);
+    ngDevMode &&
+        assertDefined(declarationContainer[MOVED_VIEWS], 'A projected view should belong to a non-empty projected views collection');
+    const movedViews = declarationContainer[MOVED_VIEWS];
+    const declarationViewIndex = movedViews.indexOf(lView);
+    movedViews.splice(declarationViewIndex, 1);
 }
-function setNgReflectProperty(lView, tNode, attrName, value) {
-    const environment = lView[ENVIRONMENT];
-    if (!environment.ngReflect) {
+/**
+ * A standalone function which destroys an LView,
+ * conducting clean up (e.g. removing listeners, calling onDestroys).
+ *
+ * @param tView The `TView' of the `LView` to be destroyed
+ * @param lView The view to be destroyed.
+ */
+function destroyLView(tView, lView) {
+    if (isDestroyed(lView)) {
         return;
     }
-    const element = getNativeByTNode(tNode, lView);
     const renderer = lView[RENDERER];
-    attrName = normalizeDebugBindingName(attrName);
-    const debugValue = normalizeDebugBindingValue(value);
-    if (tNode.type & 3 /* TNodeType.AnyRNode */) {
-        if (value == null) {
-            renderer.removeAttribute(element, attrName);
-        }
-        else {
-            renderer.setAttribute(element, attrName, debugValue);
-        }
-    }
-    else {
-        const textContent = escapeCommentText(`bindings=${JSON.stringify({ [attrName]: debugValue }, null, 2)}`);
-        renderer.setValue(element, textContent);
+    if (renderer.destroyNode) {
+        applyView(tView, lView, renderer, 3 /* WalkTNodeTreeAction.Destroy */, null, null);
     }
+    destroyViewTree(lView);
 }
-function setNgReflectProperties(lView, tView, tNode, publicName, value) {
-    const environment = lView[ENVIRONMENT];
-    if (!environment.ngReflect || !(tNode.type & (3 /* TNodeType.AnyRNode */ | 4 /* TNodeType.Container */))) {
+/**
+ * Calls onDestroys hooks for all directives and pipes in a given view and then removes all
+ * listeners. Listeners are removed as the last step so events delivered in the onDestroys hooks
+ * can be propagated to @Output listeners.
+ *
+ * @param tView `TView` for the `LView` to clean up.
+ * @param lView The LView to clean up
+ */
+function cleanUpView(tView, lView) {
+    if (isDestroyed(lView)) {
         return;
     }
-    const inputConfig = tNode.inputs?.[publicName];
-    const hostInputConfig = tNode.hostDirectiveInputs?.[publicName];
-    if (hostInputConfig) {
-        for (let i = 0; i < hostInputConfig.length; i += 2) {
-            const index = hostInputConfig[i];
-            const publicName = hostInputConfig[i + 1];
-            const def = tView.data[index];
-            setNgReflectProperty(lView, tNode, def.inputs[publicName][0], value);
+    const prevConsumer = setActiveConsumer(null);
+    try {
+        // Usually the Attached flag is removed when the view is detached from its parent, however
+        // if it's a root view, the flag won't be unset hence why we're also removing on destroy.
+        lView[FLAGS] &= ~128 /* LViewFlags.Attached */;
+        // Mark the LView as destroyed *before* executing the onDestroy hooks. An onDestroy hook
+        // runs arbitrary user code, which could include its own `viewRef.destroy()` (or similar). If
+        // We don't flag the view as destroyed before the hooks, this could lead to an infinite loop.
+        // This also aligns with the ViewEngine behavior. It also means that the onDestroy hook is
+        // really more of an "afterDestroy" hook if you think about it.
+        lView[FLAGS] |= 256 /* LViewFlags.Destroyed */;
+        lView[REACTIVE_TEMPLATE_CONSUMER] && consumerDestroy(lView[REACTIVE_TEMPLATE_CONSUMER]);
+        executeOnDestroys(tView, lView);
+        processCleanups(tView, lView);
+        // For component views only, the local renderer is destroyed at clean up time.
+        if (lView[TVIEW].type === 1 /* TViewType.Component */) {
+            lView[RENDERER].destroy();
         }
-    }
-    // Note: we set the private name of the input as the reflected property, not the public one.
-    if (inputConfig) {
-        for (const index of inputConfig) {
-            const def = tView.data[index];
-            setNgReflectProperty(lView, tNode, def.inputs[publicName][0], value);
+        const declarationContainer = lView[DECLARATION_LCONTAINER];
+        // we are dealing with an embedded view that is still inserted into a container
+        if (declarationContainer !== null && isLContainer(lView[PARENT])) {
+            // and this is a projected view
+            if (declarationContainer !== lView[PARENT]) {
+                detachMovedView(declarationContainer, lView);
+            }
+            // For embedded views still attached to a container: remove query result from this view.
+            const lQueries = lView[QUERIES];
+            if (lQueries !== null) {
+                lQueries.detachView(tView);
+            }
         }
+        // Unregister the view once everything else has been cleaned up.
+        unregisterLView(lView);
+    }
+    finally {
+        setActiveConsumer(prevConsumer);
     }
 }
-/**
- * Instantiate all the directives that were previously resolved on the current node.
- */
-function instantiateAllDirectives(tView, lView, tNode) {
-    const start = tNode.directiveStart;
-    const end = tNode.directiveEnd;
-    // The component view needs to be created before creating the node injector
-    // since it is used to inject some special symbols like `ChangeDetectorRef`.
-    if (isComponentHost(tNode)) {
-        ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */);
-        createComponentLView(lView, tNode, tView.data[start + tNode.componentOffset]);
+/** Removes listeners and unsubscribes from output subscriptions */
+function processCleanups(tView, lView) {
+    ngDevMode && assertNotReactive(processCleanups.name);
+    const tCleanup = tView.cleanup;
+    const lCleanup = lView[CLEANUP];
+    if (tCleanup !== null) {
+        for (let i = 0; i < tCleanup.length - 1; i += 2) {
+            if (typeof tCleanup[i] === 'string') {
+                // This is a native DOM listener. It will occupy 4 entries in the TCleanup array (hence i +=
+                // 2 at the end of this block).
+                const targetIdx = tCleanup[i + 3];
+                ngDevMode && assertNumber(targetIdx, 'cleanup target must be a number');
+                if (targetIdx >= 0) {
+                    // Destroy anything whose teardown is a function call (e.g. QueryList, ModelSignal).
+                    lCleanup[targetIdx]();
+                }
+                else {
+                    // Subscription
+                    lCleanup[-targetIdx].unsubscribe();
+                }
+                i += 2;
+            }
+            else {
+                // This is a cleanup function that is grouped with the index of its context
+                const context = lCleanup[tCleanup[i + 1]];
+                tCleanup[i].call(context);
+            }
+        }
     }
-    if (!tView.firstCreatePass) {
-        getOrCreateNodeInjectorForNode(tNode, lView);
+    if (lCleanup !== null) {
+        lView[CLEANUP] = null;
     }
-    const initialInputs = tNode.initialInputs;
-    for (let i = start; i < end; i++) {
-        const def = tView.data[i];
-        const directive = getNodeInjectable(lView, tView, i, tNode);
-        attachPatchData(directive, lView);
-        if (initialInputs !== null) {
-            setInputsFromAttrs(lView, i - start, directive, def, tNode, initialInputs);
-        }
-        if (isComponentDef(def)) {
-            const componentView = getComponentLViewByIndex(tNode.index, lView);
-            componentView[CONTEXT] = getNodeInjectable(lView, tView, i, tNode);
+    const destroyHooks = lView[ON_DESTROY_HOOKS];
+    if (destroyHooks !== null) {
+        // Reset the ON_DESTROY_HOOKS array before iterating over it to prevent hooks that unregister
+        // themselves from mutating the array during iteration.
+        lView[ON_DESTROY_HOOKS] = null;
+        for (let i = 0; i < destroyHooks.length; i++) {
+            const destroyHooksFn = destroyHooks[i];
+            ngDevMode && assertFunction(destroyHooksFn, 'Expecting destroy hook to be a function.');
+            destroyHooksFn();
         }
     }
-}
-function invokeDirectivesHostBindings(tView, lView, tNode) {
-    const start = tNode.directiveStart;
-    const end = tNode.directiveEnd;
-    const elementIndex = tNode.index;
-    const currentDirectiveIndex = getCurrentDirectiveIndex();
-    try {
-        setSelectedIndex(elementIndex);
-        for (let dirIndex = start; dirIndex < end; dirIndex++) {
-            const def = tView.data[dirIndex];
-            const directive = lView[dirIndex];
-            setCurrentDirectiveIndex(dirIndex);
-            if (def.hostBindings !== null || def.hostVars !== 0 || def.hostAttrs !== null) {
-                invokeHostBindingsInCreationMode(def, directive);
-            }
+    // Destroy effects registered to the view. Many of these will have been processed above.
+    const effects = lView[EFFECTS];
+    if (effects !== null) {
+        lView[EFFECTS] = null;
+        for (const effect of effects) {
+            effect.destroy();
         }
     }
-    finally {
-        setSelectedIndex(-1);
-        setCurrentDirectiveIndex(currentDirectiveIndex);
-    }
 }
-/**
- * Invoke the host bindings in creation mode.
- *
- * @param def `DirectiveDef` which may contain the `hostBindings` function.
- * @param directive Instance of directive.
- */
-function invokeHostBindingsInCreationMode(def, directive) {
-    if (def.hostBindings !== null) {
-        def.hostBindings(1 /* RenderFlags.Create */, directive);
-    }
-}
-/**
- * Matches the current node against all available selectors.
- * If a component is matched (at most one), it is returned in first position in the array.
- */
-function findDirectiveDefMatches(tView, tNode) {
-    ngDevMode && assertFirstCreatePass(tView);
-    ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ | 12 /* TNodeType.AnyContainer */);
-    const registry = tView.directiveRegistry;
-    let matches = null;
-    if (registry) {
-        for (let i = 0; i < registry.length; i++) {
-            const def = registry[i];
-            if (isNodeMatchingSelectorList(tNode, def.selectors, /* isProjectionMode */ false)) {
-                matches ??= [];
-                if (isComponentDef(def)) {
-                    if (ngDevMode) {
-                        assertTNodeType(tNode, 2 /* TNodeType.Element */, `"${tNode.value}" tags cannot be used as component hosts. ` +
-                            `Please use a different tag to activate the ${stringify(def.type)} component.`);
-                        if (matches.length && isComponentDef(matches[0])) {
-                            throwMultipleComponentError(tNode, matches.find(isComponentDef).type, def.type);
+/** Calls onDestroy hooks for this view */
+function executeOnDestroys(tView, lView) {
+    ngDevMode && assertNotReactive(executeOnDestroys.name);
+    let destroyHooks;
+    if (tView != null && (destroyHooks = tView.destroyHooks) != null) {
+        for (let i = 0; i < destroyHooks.length; i += 2) {
+            const context = lView[destroyHooks[i]];
+            // Only call the destroy hook if the context has been requested.
+            if (!(context instanceof NodeInjectorFactory)) {
+                const toCall = destroyHooks[i + 1];
+                if (Array.isArray(toCall)) {
+                    for (let j = 0; j < toCall.length; j += 2) {
+                        const callContext = context[toCall[j]];
+                        const hook = toCall[j + 1];
+                        profiler(4 /* ProfilerEvent.LifecycleHookStart */, callContext, hook);
+                        try {
+                            hook.call(callContext);
+                        }
+                        finally {
+                            profiler(5 /* ProfilerEvent.LifecycleHookEnd */, callContext, hook);
                         }
                     }
-                    matches.unshift(def);
                 }
                 else {
-                    matches.push(def);
+                    profiler(4 /* ProfilerEvent.LifecycleHookStart */, context, toCall);
+                    try {
+                        toCall.call(context);
+                    }
+                    finally {
+                        profiler(5 /* ProfilerEvent.LifecycleHookEnd */, context, toCall);
+                    }
                 }
             }
         }
     }
-    return matches;
 }
-function elementAttributeInternal(tNode, lView, name, value, sanitizer, namespace) {
-    if (ngDevMode) {
-        assertNotSame(value, NO_CHANGE, 'Incoming value should never be NO_CHANGE.');
-        validateAgainstEventAttributes(name);
-        assertTNodeType(tNode, 2 /* TNodeType.Element */, `Attempted to set attribute \`${name}\` on a container node. ` +
-            `Host bindings are not valid on ng-container or ng-template.`);
-    }
-    const element = getNativeByTNode(tNode, lView);
-    setElementAttribute(lView[RENDERER], element, namespace, tNode.value, name, value, sanitizer);
+/**
+ * Returns a native element if a node can be inserted into the given parent.
+ *
+ * There are two reasons why we may not be able to insert a element immediately.
+ * - Projection: When creating a child content element of a component, we have to skip the
+ *   insertion because the content of a component will be projected.
+ *   `<component><content>delayed due to projection</content></component>`
+ * - Parent container is disconnected: This can happen when we are inserting a view into
+ *   parent container, which itself is disconnected. For example the parent container is part
+ *   of a View which has not be inserted or is made for projection but has not been inserted
+ *   into destination.
+ *
+ * @param tView: Current `TView`.
+ * @param tNode: `TNode` for which we wish to retrieve render parent.
+ * @param lView: Current `LView`.
+ */
+function getParentRElement(tView, tNode, lView) {
+    return getClosestRElement(tView, tNode.parent, lView);
 }
-function setElementAttribute(renderer, element, namespace, tagName, name, value, sanitizer) {
-    if (value == null) {
-        renderer.removeAttribute(element, name, namespace);
+/**
+ * Get closest `RElement` or `null` if it can't be found.
+ *
+ * If `TNode` is `TNodeType.Element` => return `RElement` at `LView[tNode.index]` location.
+ * If `TNode` is `TNodeType.ElementContainer|IcuContain` => return the parent (recursively).
+ * If `TNode` is `null` then return host `RElement`:
+ *   - return `null` if projection
+ *   - return `null` if parent container is disconnected (we have no parent.)
+ *
+ * @param tView: Current `TView`.
+ * @param tNode: `TNode` for which we wish to retrieve `RElement` (or `null` if host element is
+ *     needed).
+ * @param lView: Current `LView`.
+ * @returns `null` if the `RElement` can't be determined at this time (no parent / projection)
+ */
+function getClosestRElement(tView, tNode, lView) {
+    let parentTNode = tNode;
+    // Skip over element and ICU containers as those are represented by a comment node and
+    // can't be used as a render parent. Also skip let declarations since they don't have a
+    // corresponding DOM node at all.
+    while (parentTNode !== null &&
+        parentTNode.type & (8 /* TNodeType.ElementContainer */ | 32 /* TNodeType.Icu */ | 128 /* TNodeType.LetDeclaration */)) {
+        tNode = parentTNode;
+        parentTNode = tNode.parent;
+    }
+    // If the parent tNode is null, then we are inserting across views: either into an embedded view
+    // or a component view.
+    if (parentTNode === null) {
+        // We are inserting a root element of the component view into the component host element and
+        // it should always be eager.
+        return lView[HOST];
     }
     else {
-        const strValue = sanitizer == null ? renderStringify(value) : sanitizer(value, tagName || '', name);
-        renderer.setAttribute(element, name, strValue, namespace);
+        ngDevMode && assertTNodeType(parentTNode, 3 /* TNodeType.AnyRNode */ | 4 /* TNodeType.Container */);
+        if (isComponentHost(parentTNode)) {
+            ngDevMode && assertTNodeForLView(parentTNode, lView);
+            const { encapsulation } = tView.data[parentTNode.directiveStart + parentTNode.componentOffset];
+            // We've got a parent which is an element in the current view. We just need to verify if the
+            // parent element is not a component. Component's content nodes are not inserted immediately
+            // because they will be projected, and so doing insert at this point would be wasteful.
+            // Since the projection would then move it to its final destination. Note that we can't
+            // make this assumption when using the Shadow DOM, because the native projection placeholders
+            // (<content> or <slot>) have to be in place as elements are being inserted.
+            if (encapsulation === ViewEncapsulation.None ||
+                encapsulation === ViewEncapsulation.Emulated) {
+                return null;
+            }
+        }
+        return getNativeByTNode(parentTNode, lView);
     }
 }
 /**
- * Sets initial input properties on directive instances from attribute data
+ * Find a node in front of which `currentTNode` should be inserted.
  *
- * @param lView Current LView that is being processed.
- * @param directiveIndex Index of the directive in directives array
- * @param instance Instance of the directive on which to set the initial inputs
- * @param def The directive def that contains the list of inputs
- * @param tNode The static data for this node
+ * This method determines the `RNode` in front of which we should insert the `currentRNode`. This
+ * takes `TNode.insertBeforeIndex` into account if i18n code has been invoked.
+ *
+ * @param parentTNode parent `TNode`
+ * @param currentTNode current `TNode` (The node which we would like to insert into the DOM)
+ * @param lView current `LView`
  */
-function setInputsFromAttrs(lView, directiveIndex, instance, def, tNode, initialInputData) {
-    const initialInputs = initialInputData[directiveIndex];
-    if (initialInputs !== null) {
-        for (let i = 0; i < initialInputs.length; i += 2) {
-            const lookupName = initialInputs[i];
-            const value = initialInputs[i + 1];
-            writeToDirectiveInput(def, instance, lookupName, value);
-            if (ngDevMode) {
-                setNgReflectProperty(lView, tNode, def.inputs[lookupName][0], value);
-            }
-        }
+function getInsertInFrontOfRNode(parentTNode, currentTNode, lView) {
+    return _getInsertInFrontOfRNodeWithI18n(parentTNode, currentTNode, lView);
+}
+/**
+ * Find a node in front of which `currentTNode` should be inserted. (Does not take i18n into
+ * account)
+ *
+ * This method determines the `RNode` in front of which we should insert the `currentRNode`. This
+ * does not take `TNode.insertBeforeIndex` into account.
+ *
+ * @param parentTNode parent `TNode`
+ * @param currentTNode current `TNode` (The node which we would like to insert into the DOM)
+ * @param lView current `LView`
+ */
+function getInsertInFrontOfRNodeWithNoI18n(parentTNode, currentTNode, lView) {
+    if (parentTNode.type & (8 /* TNodeType.ElementContainer */ | 32 /* TNodeType.Icu */)) {
+        return getNativeByTNode(parentTNode, lView);
     }
+    return null;
 }
-///////////////////////////////
-//// Bindings & interpolations
-///////////////////////////////
 /**
- * Stores meta-data for a property binding to be used by TestBed's `DebugElement.properties`.
+ * Tree shakable boundary for `getInsertInFrontOfRNodeWithI18n` function.
  *
- * In order to support TestBed's `DebugElement.properties` we need to save, for each binding:
- * - a bound property name;
- * - a static parts of interpolated strings;
+ * This function will only be set if i18n code runs.
+ */
+let _getInsertInFrontOfRNodeWithI18n = getInsertInFrontOfRNodeWithNoI18n;
+/**
+ * Tree shakable boundary for `processI18nInsertBefore` function.
  *
- * A given property metadata is saved at the binding's index in the `TView.data` (in other words, a
- * property binding metadata will be stored in `TView.data` at the same index as a bound value in
- * `LView`). Metadata are represented as `INTERPOLATION_DELIMITER`-delimited string with the
- * following format:
- * - `propertyName` for bound properties;
- * - `propertyName�prefix�interpolation_static_part1�..interpolation_static_partN�suffix` for
- * interpolated properties.
+ * This function will only be set if i18n code runs.
+ */
+let _processI18nInsertBefore;
+function setI18nHandling(getInsertInFrontOfRNodeWithI18n, processI18nInsertBefore) {
+    _getInsertInFrontOfRNodeWithI18n = getInsertInFrontOfRNodeWithI18n;
+    _processI18nInsertBefore = processI18nInsertBefore;
+}
+/**
+ * Appends the `child` native node (or a collection of nodes) to the `parent`.
  *
- * @param tData `TData` where meta-data will be saved;
- * @param tNode `TNode` that is a target of the binding;
- * @param propertyName bound property name;
- * @param bindingIndex binding index in `LView`
- * @param interpolationParts static interpolation parts (for property interpolations)
+ * @param tView The `TView' to be appended
+ * @param lView The current LView
+ * @param childRNode The native child (or children) that should be appended
+ * @param childTNode The TNode of the child element
  */
-function storePropertyBindingMetadata(tData, tNode, propertyName, bindingIndex, ...interpolationParts) {
-    // Binding meta-data are stored only the first time a given property instruction is processed.
-    // Since we don't have a concept of the "first update pass" we need to check for presence of the
-    // binding meta-data to decide if one should be stored (or if was stored already).
-    if (tData[bindingIndex] === null) {
-        if (!tNode.inputs?.[propertyName] && !tNode.hostDirectiveInputs?.[propertyName]) {
-            const propBindingIdxs = tNode.propertyBindings || (tNode.propertyBindings = []);
-            propBindingIdxs.push(bindingIndex);
-            let bindingMetadata = propertyName;
-            if (interpolationParts.length > 0) {
-                bindingMetadata +=
-                    INTERPOLATION_DELIMITER + interpolationParts.join(INTERPOLATION_DELIMITER);
+function appendChild(tView, lView, childRNode, childTNode) {
+    const parentRNode = getParentRElement(tView, childTNode, lView);
+    const renderer = lView[RENDERER];
+    const parentTNode = childTNode.parent || lView[T_HOST];
+    const anchorNode = getInsertInFrontOfRNode(parentTNode, childTNode, lView);
+    if (parentRNode != null) {
+        if (Array.isArray(childRNode)) {
+            for (let i = 0; i < childRNode.length; i++) {
+                nativeAppendOrInsertBefore(renderer, parentRNode, childRNode[i], anchorNode, false);
             }
-            tData[bindingIndex] = bindingMetadata;
+        }
+        else {
+            nativeAppendOrInsertBefore(renderer, parentRNode, childRNode, anchorNode, false);
         }
     }
+    _processI18nInsertBefore !== undefined &&
+        _processI18nInsertBefore(renderer, childTNode, lView, childRNode, parentRNode);
 }
 /**
- * There are cases where the sub component's renderer needs to be included
- * instead of the current renderer (see the componentSyntheticHost* instructions).
+ * Returns the first native node for a given LView, starting from the provided TNode.
+ *
+ * Native nodes are returned in the order in which those appear in the native tree (DOM).
  */
-function loadComponentRenderer(currentDef, tNode, lView) {
-    // TODO(FW-2043): the `currentDef` is null when host bindings are invoked while creating root
-    // component (see packages/core/src/render3/component.ts). This is not consistent with the process
-    // of creating inner components, when current directive index is available in the state. In order
-    // to avoid relying on current def being `null` (thus special-casing root component creation), the
-    // process of creating root component should be unified with the process of creating inner
-    // components.
-    if (currentDef === null || isComponentDef(currentDef)) {
-        lView = unwrapLView(lView[tNode.index]);
-    }
-    return lView[RENDERER];
-}
-/** Handles an error thrown in an LView. */
-function handleUncaughtError(lView, error) {
-    const injector = lView[INJECTOR];
-    if (!injector) {
-        return;
-    }
-    const errorHandler = injector.get(INTERNAL_APPLICATION_ERROR_HANDLER, null);
-    errorHandler?.(error);
-}
-/**
- * Set all directive inputs with the specific public name on the node.
- *
- * @param tNode TNode on which the input is being set.
- * @param tView Current TView
- * @param lView `LView` which contains the directives.
- * @param publicName Public name of the input being set.
- * @param value Value to set.
- */
-function setAllInputsForProperty(tNode, tView, lView, publicName, value) {
-    const inputs = tNode.inputs?.[publicName];
-    const hostDirectiveInputs = tNode.hostDirectiveInputs?.[publicName];
-    let hasMatch = false;
-    if (hostDirectiveInputs) {
-        for (let i = 0; i < hostDirectiveInputs.length; i += 2) {
-            const index = hostDirectiveInputs[i];
-            ngDevMode && assertIndexInRange(lView, index);
-            const publicName = hostDirectiveInputs[i + 1];
-            const def = tView.data[index];
-            writeToDirectiveInput(def, lView[index], publicName, value);
-            hasMatch = true;
+function getFirstNativeNode(lView, tNode) {
+    if (tNode !== null) {
+        ngDevMode &&
+            assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ |
+                12 /* TNodeType.AnyContainer */ |
+                32 /* TNodeType.Icu */ |
+                16 /* TNodeType.Projection */ |
+                128 /* TNodeType.LetDeclaration */);
+        const tNodeType = tNode.type;
+        if (tNodeType & 3 /* TNodeType.AnyRNode */) {
+            return getNativeByTNode(tNode, lView);
         }
-    }
-    if (inputs) {
-        for (const index of inputs) {
-            ngDevMode && assertIndexInRange(lView, index);
-            const instance = lView[index];
-            const def = tView.data[index];
-            writeToDirectiveInput(def, instance, publicName, value);
-            hasMatch = true;
+        else if (tNodeType & 4 /* TNodeType.Container */) {
+            return getBeforeNodeForView(-1, lView[tNode.index]);
         }
-    }
-    return hasMatch;
-}
-/**
- * Sets an input value only on a specific directive and its host directives.
- * @param tNode TNode on which the input is being set.
- * @param tView Current TView
- * @param lView `LView` which contains the directives.
- * @param target Directive on which to set the input.
- * @param publicName Public name of the input being set.
- * @param value Value to set.
- */
-function setDirectiveInput(tNode, tView, lView, target, publicName, value) {
-    let hostIndex = null;
-    let hostDirectivesStart = null;
-    let hostDirectivesEnd = null;
-    let hasSet = false;
-    if (ngDevMode && !tNode.directiveToIndex?.has(target.type)) {
-        throw new Error(`Node does not have a directive with type ${target.type.name}`);
-    }
-    const data = tNode.directiveToIndex.get(target.type);
-    if (typeof data === 'number') {
-        hostIndex = data;
-    }
-    else {
-        [hostIndex, hostDirectivesStart, hostDirectivesEnd] = data;
-    }
-    if (hostDirectivesStart !== null &&
-        hostDirectivesEnd !== null &&
-        tNode.hostDirectiveInputs?.hasOwnProperty(publicName)) {
-        const hostDirectiveInputs = tNode.hostDirectiveInputs[publicName];
-        for (let i = 0; i < hostDirectiveInputs.length; i += 2) {
-            const index = hostDirectiveInputs[i];
-            if (index >= hostDirectivesStart && index <= hostDirectivesEnd) {
-                ngDevMode && assertIndexInRange(lView, index);
-                const def = tView.data[index];
-                const hostDirectivePublicName = hostDirectiveInputs[i + 1];
-                writeToDirectiveInput(def, lView[index], hostDirectivePublicName, value);
-                hasSet = true;
+        else if (tNodeType & 8 /* TNodeType.ElementContainer */) {
+            const elIcuContainerChild = tNode.child;
+            if (elIcuContainerChild !== null) {
+                return getFirstNativeNode(lView, elIcuContainerChild);
             }
-            else if (index > hostDirectivesEnd) {
-                // Directives here are in ascending order so we can stop looking once we're past the range.
-                break;
+            else {
+                const rNodeOrLContainer = lView[tNode.index];
+                if (isLContainer(rNodeOrLContainer)) {
+                    return getBeforeNodeForView(-1, rNodeOrLContainer);
+                }
+                else {
+                    return unwrapRNode(rNodeOrLContainer);
+                }
             }
         }
-    }
-    if (hostIndex !== null && target.inputs.hasOwnProperty(publicName)) {
-        ngDevMode && assertIndexInRange(lView, hostIndex);
-        writeToDirectiveInput(target, lView[hostIndex], publicName, value);
-        hasSet = true;
-    }
-    return hasSet;
-}
-
-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]);
-    }
-    profiler(18 /* ProfilerEvent.ComponentStart */);
-    renderView(componentTView, componentView, componentView[CONTEXT]);
-    profiler(19 /* ProfilerEvent.ComponentEnd */, 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:
- * ```html
- * <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]);
-    }
-}
-/**
- * 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');
-    ngDevMode && assertNotReactive(renderView.name);
-    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;
-        }
-        // Mark all queries active in this view as dirty. This is necessary for signal-based queries to
-        // have a clear marking point where we can read query results atomically (for a given view).
-        lView[QUERIES]?.finishViewCreation(tView);
-        // 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]);
-    }
-}
-
-function createAndRenderEmbeddedLView(declarationLView, templateTNode, context, options) {
-    const prevConsumer = setActiveConsumer(null);
-    try {
-        const embeddedTView = templateTNode.tView;
-        ngDevMode && assertDefined(embeddedTView, 'TView must be defined for a template node.');
-        ngDevMode && assertTNodeForLView(templateTNode, declarationLView);
-        // Embedded views follow the change detection strategy of the view they're declared in.
-        const isSignalView = declarationLView[FLAGS] & 4096 /* LViewFlags.SignalView */;
-        const viewFlags = isSignalView ? 4096 /* LViewFlags.SignalView */ : 16 /* LViewFlags.CheckAlways */;
-        const embeddedLView = createLView(declarationLView, embeddedTView, context, viewFlags, null, templateTNode, null, null, options?.injector ?? null, options?.embeddedViewInjector ?? null, options?.dehydratedView ?? null);
-        const declarationLContainer = declarationLView[templateTNode.index];
-        ngDevMode && assertLContainer(declarationLContainer);
-        embeddedLView[DECLARATION_LCONTAINER] = declarationLContainer;
-        const declarationViewLQueries = declarationLView[QUERIES];
-        if (declarationViewLQueries !== null) {
-            embeddedLView[QUERIES] = declarationViewLQueries.createEmbeddedView(embeddedTView);
-        }
-        // execute creation mode of a view
-        renderView(embeddedTView, embeddedLView, context);
-        return embeddedLView;
-    }
-    finally {
-        setActiveConsumer(prevConsumer);
-    }
-}
-/**
- * Returns whether an elements that belong to a view should be
- * inserted into the DOM. For client-only cases, DOM elements are
- * always inserted. For hydration cases, we check whether serialized
- * info is available for a view and the view is not in a "skip hydration"
- * block (in which case view contents was re-created, thus needing insertion).
- */
-function shouldAddViewToDom(tNode, dehydratedView) {
-    return (!dehydratedView || dehydratedView.firstChild === null || hasInSkipHydrationBlockFlag(tNode));
-}
-
-const USE_EXHAUSTIVE_CHECK_NO_CHANGES_DEFAULT = false;
-const UseExhaustiveCheckNoChanges = new InjectionToken(ngDevMode ? 'exhaustive checkNoChanges' : '');
-
-let _icuContainerIterate;
-/**
- * Iterator which provides ability to visit all of the `TIcuContainerNode` root `RNode`s.
- */
-function icuContainerIterate(tIcuContainerNode, lView) {
-    return _icuContainerIterate(tIcuContainerNode, lView);
-}
-/**
- * Ensures that `IcuContainerVisitor`'s implementation is present.
- *
- * This function is invoked when i18n instruction comes across an ICU. The purpose is to allow the
- * bundler to tree shake ICU logic and only load it if ICU instruction is executed.
- */
-function ensureIcuContainerVisitorLoaded(loader) {
-    if (_icuContainerIterate === undefined) {
-        // Do not inline this function. We want to keep `ensureIcuContainerVisitorLoaded` light, so it
-        // can be inlined into call-site.
-        _icuContainerIterate = loader();
-    }
-}
-
-/**
- * Flags for renderer-specific style modifiers.
- * @publicApi
- */
-var RendererStyleFlags2;
-(function (RendererStyleFlags2) {
-    // TODO(misko): This needs to be refactored into a separate file so that it can be imported from
-    // `node_manipulation.ts` Currently doing the import cause resolution order to change and fails
-    // the tests. The work around is to have hard coded value in `node_manipulation.ts` for now.
-    /**
-     * Marks a style as important.
-     */
-    RendererStyleFlags2[RendererStyleFlags2["Important"] = 1] = "Important";
-    /**
-     * Marks a style as using dash case naming (this-is-dash-case).
-     */
-    RendererStyleFlags2[RendererStyleFlags2["DashCase"] = 2] = "DashCase";
-})(RendererStyleFlags2 || (RendererStyleFlags2 = {}));
-
-/**
- * Checks whether a TNode is considered detached, i.e. not present in the
- * translated i18n template. We should not attempt hydration for such nodes
- * and instead, use a regular "creation mode".
- */
-function isDetachedByI18n(tNode) {
-    return (tNode.flags & 32 /* TNodeFlags.isDetached */) === 32 /* TNodeFlags.isDetached */;
-}
-
-/**
- * NOTE: for performance reasons, the possible actions are inlined within the function instead of
- * being passed as an argument.
- */
-function applyToElementOrContainer(action, renderer, parent, lNodeToHandle, beforeNode) {
-    // If this slot was allocated for a text node dynamically created by i18n, the text node itself
-    // won't be created until i18nApply() in the update block, so this node should be skipped.
-    // For more info, see "ICU expressions should work inside an ngTemplateOutlet inside an ngFor"
-    // in `i18n_spec.ts`.
-    if (lNodeToHandle != null) {
-        let lContainer;
-        let isComponent = false;
-        // We are expecting an RNode, but in the case of a component or LContainer the `RNode` is
-        // wrapped in an array which needs to be unwrapped. We need to know if it is a component and if
-        // it has LContainer so that we can process all of those cases appropriately.
-        if (isLContainer(lNodeToHandle)) {
-            lContainer = lNodeToHandle;
+        else if (tNodeType & 128 /* TNodeType.LetDeclaration */) {
+            return getFirstNativeNode(lView, tNode.next);
         }
-        else if (isLView(lNodeToHandle)) {
-            isComponent = true;
-            ngDevMode && assertDefined(lNodeToHandle[HOST], 'HOST must be defined for a component LView');
-            lNodeToHandle = lNodeToHandle[HOST];
+        else if (tNodeType & 32 /* TNodeType.Icu */) {
+            let nextRNode = icuContainerIterate(tNode, lView);
+            let rNode = nextRNode();
+            // If the ICU container has no nodes, than we use the ICU anchor as the node.
+            return rNode || unwrapRNode(lView[tNode.index]);
         }
-        const rNode = unwrapRNode(lNodeToHandle);
-        if (action === 0 /* WalkTNodeTreeAction.Create */ && parent !== null) {
-            if (beforeNode == null) {
-                nativeAppendChild(renderer, parent, rNode);
+        else {
+            const projectionNodes = getProjectionNodes(lView, tNode);
+            if (projectionNodes !== null) {
+                if (Array.isArray(projectionNodes)) {
+                    return projectionNodes[0];
+                }
+                const parentView = getLViewParent(lView[DECLARATION_COMPONENT_VIEW]);
+                ngDevMode && assertParentView(parentView);
+                return getFirstNativeNode(parentView, projectionNodes);
             }
             else {
-                nativeInsertBefore(renderer, parent, rNode, beforeNode || null, true);
+                return getFirstNativeNode(lView, tNode.next);
             }
         }
-        else if (action === 1 /* WalkTNodeTreeAction.Insert */ && parent !== null) {
-            nativeInsertBefore(renderer, parent, rNode, beforeNode || null, true);
+    }
+    return null;
+}
+function getProjectionNodes(lView, tNode) {
+    if (tNode !== null) {
+        const componentView = lView[DECLARATION_COMPONENT_VIEW];
+        const componentHost = componentView[T_HOST];
+        const slotIdx = tNode.projection;
+        ngDevMode && assertProjectionSlots(lView);
+        return componentHost.projection[slotIdx];
+    }
+    return null;
+}
+function getBeforeNodeForView(viewIndexInContainer, lContainer) {
+    const nextViewIndex = CONTAINER_HEADER_OFFSET + viewIndexInContainer + 1;
+    if (nextViewIndex < lContainer.length) {
+        const lView = lContainer[nextViewIndex];
+        const firstTNodeOfView = lView[TVIEW].firstChild;
+        if (firstTNodeOfView !== null) {
+            return getFirstNativeNode(lView, firstTNodeOfView);
         }
-        else if (action === 2 /* WalkTNodeTreeAction.Detach */) {
-            nativeRemoveNode(renderer, rNode, isComponent);
+    }
+    return lContainer[NATIVE];
+}
+/**
+ * Performs the operation of `action` on the node. Typically this involves inserting or removing
+ * nodes on the LView or projection boundary.
+ */
+function applyNodes(renderer, action, tNode, lView, parentRElement, beforeNode, isProjection) {
+    while (tNode != null) {
+        ngDevMode && assertTNodeForLView(tNode, lView);
+        // Let declarations don't have corresponding DOM nodes so we skip over them.
+        if (tNode.type === 128 /* TNodeType.LetDeclaration */) {
+            tNode = tNode.next;
+            continue;
         }
-        else if (action === 3 /* WalkTNodeTreeAction.Destroy */) {
-            renderer.destroyNode(rNode);
+        ngDevMode &&
+            assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ | 12 /* TNodeType.AnyContainer */ | 16 /* TNodeType.Projection */ | 32 /* TNodeType.Icu */);
+        const rawSlotValue = lView[tNode.index];
+        const tNodeType = tNode.type;
+        if (isProjection) {
+            if (action === 0 /* WalkTNodeTreeAction.Create */) {
+                rawSlotValue && attachPatchData(unwrapRNode(rawSlotValue), lView);
+                tNode.flags |= 2 /* TNodeFlags.isProjected */;
+            }
         }
-        if (lContainer != null) {
-            applyContainer(renderer, action, lContainer, parent, beforeNode);
+        if (!isDetachedByI18n(tNode)) {
+            if (tNodeType & 8 /* TNodeType.ElementContainer */) {
+                applyNodes(renderer, action, tNode.child, lView, parentRElement, beforeNode, false);
+                applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode);
+            }
+            else if (tNodeType & 32 /* TNodeType.Icu */) {
+                const nextRNode = icuContainerIterate(tNode, lView);
+                let rNode;
+                while ((rNode = nextRNode())) {
+                    applyToElementOrContainer(action, renderer, parentRElement, rNode, beforeNode);
+                }
+                applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode);
+            }
+            else if (tNodeType & 16 /* TNodeType.Projection */) {
+                applyProjectionRecursive(renderer, action, lView, tNode, parentRElement, beforeNode);
+            }
+            else {
+                ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ | 4 /* TNodeType.Container */);
+                applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode);
+            }
         }
+        tNode = isProjection ? tNode.projectionNext : tNode.next;
     }
 }
-/**
- * Removes all DOM elements associated with a view.
- *
- * Because some root nodes of the view may be containers, we sometimes need
- * to propagate deeply into the nested containers to remove all elements in the
- * views beneath it.
- *
- * @param tView The `TView' of the `LView` from which elements should be added or removed
- * @param lView The view from which elements should be added or removed
- */
-function removeViewFromDOM(tView, lView) {
-    detachViewFromDOM(tView, lView);
-    lView[HOST] = null;
-    lView[T_HOST] = null;
+function applyView(tView, lView, renderer, action, parentRElement, beforeNode) {
+    applyNodes(renderer, action, tView.firstChild, lView, parentRElement, beforeNode, false);
 }
 /**
- * Adds all DOM elements associated with a view.
- *
- * Because some root nodes of the view may be containers, we sometimes need
- * to propagate deeply into the nested containers to add all elements in the
- * views beneath it.
+ * `applyProjection` performs operation on the projection.
  *
- * @param tView The `TView' of the `LView` from which elements should be added or removed
- * @param parentTNode The `TNode` where the `LView` should be attached to.
- * @param renderer Current renderer to use for DOM manipulations.
- * @param lView The view from which elements should be added or removed
- * @param parentNativeNode The parent `RElement` where it should be inserted into.
- * @param beforeNode The node before which elements should be added, if insert mode
- */
-function addViewToDOM(tView, parentTNode, renderer, lView, parentNativeNode, beforeNode) {
-    lView[HOST] = parentNativeNode;
-    lView[T_HOST] = parentTNode;
-    applyView(tView, lView, renderer, 1 /* WalkTNodeTreeAction.Insert */, parentNativeNode, beforeNode);
-}
-/**
- * Detach a `LView` from the DOM by detaching its nodes.
+ * Inserting a projection requires us to locate the projected nodes from the parent component. The
+ * complication is that those nodes themselves could be re-projected from their parent component.
  *
- * @param tView The `TView' of the `LView` to be detached
- * @param lView the `LView` to be detached.
+ * @param tView The `TView` of `LView` which needs to be inserted, detached, destroyed
+ * @param lView The `LView` which needs to be inserted, detached, destroyed.
+ * @param tProjectionNode node to project
  */
-function detachViewFromDOM(tView, lView) {
-    // When we remove a view from the DOM, we need to rerun afterRender hooks
-    // We don't necessarily needs to run change detection. DOM removal only requires
-    // change detection if animations are enabled (this notification is handled by animations).
-    lView[ENVIRONMENT].changeDetectionScheduler?.notify(9 /* NotificationSource.ViewDetachedFromDOM */);
-    applyView(tView, lView, lView[RENDERER], 2 /* WalkTNodeTreeAction.Detach */, null, null);
+function applyProjection(tView, lView, tProjectionNode) {
+    const renderer = lView[RENDERER];
+    const parentRNode = getParentRElement(tView, tProjectionNode, lView);
+    const parentTNode = tProjectionNode.parent || lView[T_HOST];
+    let beforeNode = getInsertInFrontOfRNode(parentTNode, tProjectionNode, lView);
+    applyProjectionRecursive(renderer, 0 /* WalkTNodeTreeAction.Create */, lView, tProjectionNode, parentRNode, beforeNode);
 }
 /**
- * Traverses down and up the tree of views and containers to remove listeners and
- * call onDestroy callbacks.
+ * `applyProjectionRecursive` performs operation on the projection specified by `action` (insert,
+ * detach, destroy)
  *
- * Notes:
- *  - Because it's used for onDestroy calls, it needs to be bottom-up.
- *  - Must process containers instead of their views to avoid splicing
- *  when views are destroyed and re-added.
- *  - Using a while loop because it's faster than recursion
- *  - Destroy only called on movement to sibling or movement to parent (laterally or up)
+ * Inserting a projection requires us to locate the projected nodes from the parent component. The
+ * complication is that those nodes themselves could be re-projected from their parent component.
  *
- *  @param rootView The view to destroy
+ * @param renderer Render to use
+ * @param action action to perform (insert, detach, destroy)
+ * @param lView The LView which needs to be inserted, detached, destroyed.
+ * @param tProjectionNode node to project
+ * @param parentRElement parent DOM element for insertion/removal.
+ * @param beforeNode Before which node the insertions should happen.
  */
-function destroyViewTree(rootView) {
-    // If the view has no children, we can clean it up and return early.
-    let lViewOrLContainer = rootView[CHILD_HEAD];
-    if (!lViewOrLContainer) {
-        return cleanUpView(rootView[TVIEW], rootView);
-    }
-    while (lViewOrLContainer) {
-        let next = null;
-        if (isLView(lViewOrLContainer)) {
-            // If LView, traverse down to child.
-            next = lViewOrLContainer[CHILD_HEAD];
-        }
-        else {
-            ngDevMode && assertLContainer(lViewOrLContainer);
-            // If container, traverse down to its first LView.
-            const firstView = lViewOrLContainer[CONTAINER_HEADER_OFFSET];
-            if (firstView)
-                next = firstView;
+function applyProjectionRecursive(renderer, action, lView, tProjectionNode, parentRElement, beforeNode) {
+    const componentLView = lView[DECLARATION_COMPONENT_VIEW];
+    const componentNode = componentLView[T_HOST];
+    ngDevMode &&
+        assertEqual(typeof tProjectionNode.projection, 'number', 'expecting projection index');
+    const nodeToProjectOrRNodes = componentNode.projection[tProjectionNode.projection];
+    if (Array.isArray(nodeToProjectOrRNodes)) {
+        // This should not exist, it is a bit of a hack. When we bootstrap a top level node and we
+        // need to support passing projectable nodes, so we cheat and put them in the TNode
+        // of the Host TView. (Yes we put instance info at the T Level). We can get away with it
+        // because we know that TView is not shared and therefore it will not be a problem.
+        // This should be refactored and cleaned up.
+        for (let i = 0; i < nodeToProjectOrRNodes.length; i++) {
+            const rNode = nodeToProjectOrRNodes[i];
+            applyToElementOrContainer(action, renderer, parentRElement, rNode, beforeNode);
         }
-        if (!next) {
-            // Only clean up view when moving to the side or up, as destroy hooks
-            // should be called in order from the bottom up.
-            while (lViewOrLContainer && !lViewOrLContainer[NEXT] && lViewOrLContainer !== rootView) {
-                if (isLView(lViewOrLContainer)) {
-                    cleanUpView(lViewOrLContainer[TVIEW], lViewOrLContainer);
-                }
-                lViewOrLContainer = lViewOrLContainer[PARENT];
-            }
-            if (lViewOrLContainer === null)
-                lViewOrLContainer = rootView;
-            if (isLView(lViewOrLContainer)) {
-                cleanUpView(lViewOrLContainer[TVIEW], lViewOrLContainer);
-            }
-            next = lViewOrLContainer && lViewOrLContainer[NEXT];
+    }
+    else {
+        let nodeToProject = nodeToProjectOrRNodes;
+        const projectedComponentLView = componentLView[PARENT];
+        // If a parent <ng-content> is located within a skip hydration block,
+        // annotate an actual node that is being projected with the same flag too.
+        if (hasInSkipHydrationBlockFlag(tProjectionNode)) {
+            nodeToProject.flags |= 128 /* TNodeFlags.inSkipHydrationBlock */;
         }
-        lViewOrLContainer = next;
+        applyNodes(renderer, action, nodeToProject, projectedComponentLView, parentRElement, beforeNode, true);
     }
 }
-function detachMovedView(declarationContainer, lView) {
-    ngDevMode && assertLContainer(declarationContainer);
-    ngDevMode &&
-        assertDefined(declarationContainer[MOVED_VIEWS], 'A projected view should belong to a non-empty projected views collection');
-    const movedViews = declarationContainer[MOVED_VIEWS];
-    const declarationViewIndex = movedViews.indexOf(lView);
-    movedViews.splice(declarationViewIndex, 1);
-}
 /**
- * A standalone function which destroys an LView,
- * conducting clean up (e.g. removing listeners, calling onDestroys).
+ * `applyContainer` performs an operation on the container and its views as specified by
+ * `action` (insert, detach, destroy)
  *
- * @param tView The `TView' of the `LView` to be destroyed
- * @param lView The view to be destroyed.
+ * Inserting a Container is complicated by the fact that the container may have Views which
+ * themselves have containers or projections.
+ *
+ * @param renderer Renderer to use
+ * @param action action to perform (insert, detach, destroy)
+ * @param lContainer The LContainer which needs to be inserted, detached, destroyed.
+ * @param parentRElement parent DOM element for insertion/removal.
+ * @param beforeNode Before which node the insertions should happen.
  */
-function destroyLView(tView, lView) {
-    if (isDestroyed(lView)) {
-        return;
+function applyContainer(renderer, action, lContainer, parentRElement, beforeNode) {
+    ngDevMode && assertLContainer(lContainer);
+    const anchor = lContainer[NATIVE]; // LContainer has its own before node.
+    const native = unwrapRNode(lContainer);
+    // An LContainer can be created dynamically on any node by injecting ViewContainerRef.
+    // Asking for a ViewContainerRef on an element will result in a creation of a separate anchor
+    // node (comment in the DOM) that will be different from the LContainer's host node. In this
+    // particular case we need to execute action on 2 nodes:
+    // - container's host node (this is done in the executeActionOnElementOrContainer)
+    // - container's host node (this is done here)
+    if (anchor !== native) {
+        // This is very strange to me (Misko). I would expect that the native is same as anchor. I
+        // don't see a reason why they should be different, but they are.
+        //
+        // If they are we need to process the second anchor as well.
+        applyToElementOrContainer(action, renderer, parentRElement, anchor, beforeNode);
     }
-    const renderer = lView[RENDERER];
-    if (renderer.destroyNode) {
-        applyView(tView, lView, renderer, 3 /* WalkTNodeTreeAction.Destroy */, null, null);
+    for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
+        const lView = lContainer[i];
+        applyView(lView[TVIEW], lView, renderer, action, parentRElement, anchor);
     }
-    destroyViewTree(lView);
 }
 /**
- * Calls onDestroys hooks for all directives and pipes in a given view and then removes all
- * listeners. Listeners are removed as the last step so events delivered in the onDestroys hooks
- * can be propagated to @Output listeners.
+ * Writes class/style to element.
  *
- * @param tView `TView` for the `LView` to clean up.
- * @param lView The LView to clean up
+ * @param renderer Renderer to use.
+ * @param isClassBased `true` if it should be written to `class` (`false` to write to `style`)
+ * @param rNode The Node to write to.
+ * @param prop Property to write to. This would be the class/style name.
+ * @param value Value to write. If `null`/`undefined`/`false` this is considered a remove (set/add
+ *        otherwise).
  */
-function cleanUpView(tView, lView) {
-    if (isDestroyed(lView)) {
-        return;
-    }
-    const prevConsumer = setActiveConsumer(null);
-    try {
-        // Usually the Attached flag is removed when the view is detached from its parent, however
-        // if it's a root view, the flag won't be unset hence why we're also removing on destroy.
-        lView[FLAGS] &= ~128 /* LViewFlags.Attached */;
-        // Mark the LView as destroyed *before* executing the onDestroy hooks. An onDestroy hook
-        // runs arbitrary user code, which could include its own `viewRef.destroy()` (or similar). If
-        // We don't flag the view as destroyed before the hooks, this could lead to an infinite loop.
-        // This also aligns with the ViewEngine behavior. It also means that the onDestroy hook is
-        // really more of an "afterDestroy" hook if you think about it.
-        lView[FLAGS] |= 256 /* LViewFlags.Destroyed */;
-        lView[REACTIVE_TEMPLATE_CONSUMER] && consumerDestroy(lView[REACTIVE_TEMPLATE_CONSUMER]);
-        executeOnDestroys(tView, lView);
-        processCleanups(tView, lView);
-        // For component views only, the local renderer is destroyed at clean up time.
-        if (lView[TVIEW].type === 1 /* TViewType.Component */) {
-            lView[RENDERER].destroy();
-        }
-        const declarationContainer = lView[DECLARATION_LCONTAINER];
-        // we are dealing with an embedded view that is still inserted into a container
-        if (declarationContainer !== null && isLContainer(lView[PARENT])) {
-            // and this is a projected view
-            if (declarationContainer !== lView[PARENT]) {
-                detachMovedView(declarationContainer, lView);
-            }
-            // For embedded views still attached to a container: remove query result from this view.
-            const lQueries = lView[QUERIES];
-            if (lQueries !== null) {
-                lQueries.detachView(tView);
-            }
+function applyStyling(renderer, isClassBased, rNode, prop, value) {
+    if (isClassBased) {
+        // We actually want JS true/false here because any truthy value should add the class
+        if (!value) {
+            renderer.removeClass(rNode, prop);
         }
-        // Unregister the view once everything else has been cleaned up.
-        unregisterLView(lView);
-    }
-    finally {
-        setActiveConsumer(prevConsumer);
-    }
-}
-/** Removes listeners and unsubscribes from output subscriptions */
-function processCleanups(tView, lView) {
-    ngDevMode && assertNotReactive(processCleanups.name);
-    const tCleanup = tView.cleanup;
-    const lCleanup = lView[CLEANUP];
-    if (tCleanup !== null) {
-        for (let i = 0; i < tCleanup.length - 1; i += 2) {
-            if (typeof tCleanup[i] === 'string') {
-                // This is a native DOM listener. It will occupy 4 entries in the TCleanup array (hence i +=
-                // 2 at the end of this block).
-                const targetIdx = tCleanup[i + 3];
-                ngDevMode && assertNumber(targetIdx, 'cleanup target must be a number');
-                if (targetIdx >= 0) {
-                    // Destroy anything whose teardown is a function call (e.g. QueryList, ModelSignal).
-                    lCleanup[targetIdx]();
-                }
-                else {
-                    // Subscription
-                    lCleanup[-targetIdx].unsubscribe();
-                }
-                i += 2;
-            }
-            else {
-                // This is a cleanup function that is grouped with the index of its context
-                const context = lCleanup[tCleanup[i + 1]];
-                tCleanup[i].call(context);
-            }
+        else {
+            renderer.addClass(rNode, prop);
         }
     }
-    if (lCleanup !== null) {
-        lView[CLEANUP] = null;
-    }
-    const destroyHooks = lView[ON_DESTROY_HOOKS];
-    if (destroyHooks !== null) {
-        // Reset the ON_DESTROY_HOOKS array before iterating over it to prevent hooks that unregister
-        // themselves from mutating the array during iteration.
-        lView[ON_DESTROY_HOOKS] = null;
-        for (let i = 0; i < destroyHooks.length; i++) {
-            const destroyHooksFn = destroyHooks[i];
-            ngDevMode && assertFunction(destroyHooksFn, 'Expecting destroy hook to be a function.');
-            destroyHooksFn();
+    else {
+        let flags = prop.indexOf('-') === -1 ? undefined : RendererStyleFlags2.DashCase;
+        if (value == null /** || value === undefined */) {
+            renderer.removeStyle(rNode, prop, flags);
         }
-    }
-    // Destroy effects registered to the view. Many of these will have been processed above.
-    const effects = lView[EFFECTS];
-    if (effects !== null) {
-        lView[EFFECTS] = null;
-        for (const effect of effects) {
-            effect.destroy();
+        else {
+            // A value is important if it ends with `!important`. The style
+            // parser strips any semicolons at the end of the value.
+            const isImportant = typeof value === 'string' ? value.endsWith('!important') : false;
+            if (isImportant) {
+                // !important has to be stripped from the value for it to be valid.
+                value = value.slice(0, -10);
+                flags |= RendererStyleFlags2.Important;
+            }
+            renderer.setStyle(rNode, prop, value, flags);
         }
     }
 }
-/** Calls onDestroy hooks for this view */
-function executeOnDestroys(tView, lView) {
-    ngDevMode && assertNotReactive(executeOnDestroys.name);
-    let destroyHooks;
-    if (tView != null && (destroyHooks = tView.destroyHooks) != null) {
-        for (let i = 0; i < destroyHooks.length; i += 2) {
-            const context = lView[destroyHooks[i]];
-            // Only call the destroy hook if the context has been requested.
-            if (!(context instanceof NodeInjectorFactory)) {
-                const toCall = destroyHooks[i + 1];
-                if (Array.isArray(toCall)) {
-                    for (let j = 0; j < toCall.length; j += 2) {
-                        const callContext = context[toCall[j]];
-                        const hook = toCall[j + 1];
-                        profiler(4 /* ProfilerEvent.LifecycleHookStart */, callContext, hook);
-                        try {
-                            hook.call(callContext);
-                        }
-                        finally {
-                            profiler(5 /* ProfilerEvent.LifecycleHookEnd */, callContext, hook);
-                        }
-                    }
-                }
-                else {
-                    profiler(4 /* ProfilerEvent.LifecycleHookStart */, context, toCall);
-                    try {
-                        toCall.call(context);
-                    }
-                    finally {
-                        profiler(5 /* ProfilerEvent.LifecycleHookEnd */, context, toCall);
-                    }
-                }
-            }
+
+function executeTemplate(tView, lView, templateFn, rf, context) {
+    const prevSelectedIndex = getSelectedIndex();
+    const isUpdatePhase = rf & 2 /* RenderFlags.Update */;
+    try {
+        setSelectedIndex(-1);
+        if (isUpdatePhase && lView.length > HEADER_OFFSET) {
+            // When we're updating, inherently select 0 so we don't
+            // have to generate that instruction for most update blocks.
+            selectIndexInternal(tView, lView, HEADER_OFFSET, !!ngDevMode && isInCheckNoChangesMode());
         }
+        const preHookType = isUpdatePhase
+            ? 2 /* ProfilerEvent.TemplateUpdateStart */
+            : 0 /* ProfilerEvent.TemplateCreateStart */;
+        profiler(preHookType, context, templateFn);
+        templateFn(rf, context);
+    }
+    finally {
+        setSelectedIndex(prevSelectedIndex);
+        const postHookType = isUpdatePhase
+            ? 3 /* ProfilerEvent.TemplateUpdateEnd */
+            : 1 /* ProfilerEvent.TemplateCreateEnd */;
+        profiler(postHookType, context, templateFn);
     }
 }
 /**
- * Returns a native element if a node can be inserted into the given parent.
- *
- * There are two reasons why we may not be able to insert a element immediately.
- * - Projection: When creating a child content element of a component, we have to skip the
- *   insertion because the content of a component will be projected.
- *   `<component><content>delayed due to projection</content></component>`
- * - Parent container is disconnected: This can happen when we are inserting a view into
- *   parent container, which itself is disconnected. For example the parent container is part
- *   of a View which has not be inserted or is made for projection but has not been inserted
- *   into destination.
- *
- * @param tView: Current `TView`.
- * @param tNode: `TNode` for which we wish to retrieve render parent.
- * @param lView: Current `LView`.
+ * Creates directive instances.
  */
-function getParentRElement(tView, tNode, lView) {
-    return getClosestRElement(tView, tNode.parent, lView);
+function createDirectivesInstances(tView, lView, tNode) {
+    instantiateAllDirectives(tView, lView, tNode);
+    if ((tNode.flags & 64 /* TNodeFlags.hasHostBindings */) === 64 /* TNodeFlags.hasHostBindings */) {
+        invokeDirectivesHostBindings(tView, lView, tNode);
+    }
 }
 /**
- * Get closest `RElement` or `null` if it can't be found.
- *
- * If `TNode` is `TNodeType.Element` => return `RElement` at `LView[tNode.index]` location.
- * If `TNode` is `TNodeType.ElementContainer|IcuContain` => return the parent (recursively).
- * If `TNode` is `null` then return host `RElement`:
- *   - return `null` if projection
- *   - return `null` if parent container is disconnected (we have no parent.)
- *
- * @param tView: Current `TView`.
- * @param tNode: `TNode` for which we wish to retrieve `RElement` (or `null` if host element is
- *     needed).
- * @param lView: Current `LView`.
- * @returns `null` if the `RElement` can't be determined at this time (no parent / projection)
+ * Takes a list of local names and indices and pushes the resolved local variable values
+ * to LView in the same order as they are loaded in the template with load().
  */
-function getClosestRElement(tView, tNode, lView) {
-    let parentTNode = tNode;
-    // Skip over element and ICU containers as those are represented by a comment node and
-    // can't be used as a render parent. Also skip let declarations since they don't have a
-    // corresponding DOM node at all.
-    while (parentTNode !== null &&
-        parentTNode.type & (8 /* TNodeType.ElementContainer */ | 32 /* TNodeType.Icu */ | 128 /* TNodeType.LetDeclaration */)) {
-        tNode = parentTNode;
-        parentTNode = tNode.parent;
-    }
-    // If the parent tNode is null, then we are inserting across views: either into an embedded view
-    // or a component view.
-    if (parentTNode === null) {
-        // We are inserting a root element of the component view into the component host element and
-        // it should always be eager.
-        return lView[HOST];
-    }
-    else {
-        ngDevMode && assertTNodeType(parentTNode, 3 /* TNodeType.AnyRNode */ | 4 /* TNodeType.Container */);
-        if (isComponentHost(parentTNode)) {
-            ngDevMode && assertTNodeForLView(parentTNode, lView);
-            const { encapsulation } = tView.data[parentTNode.directiveStart + parentTNode.componentOffset];
-            // We've got a parent which is an element in the current view. We just need to verify if the
-            // parent element is not a component. Component's content nodes are not inserted immediately
-            // because they will be projected, and so doing insert at this point would be wasteful.
-            // Since the projection would then move it to its final destination. Note that we can't
-            // make this assumption when using the Shadow DOM, because the native projection placeholders
-            // (<content> or <slot>) have to be in place as elements are being inserted.
-            if (encapsulation === ViewEncapsulation.None ||
-                encapsulation === ViewEncapsulation.Emulated) {
-                return null;
-            }
+function saveResolvedLocalsInData(viewData, tNode, localRefExtractor = getNativeByTNode) {
+    const localNames = tNode.localNames;
+    if (localNames !== null) {
+        let localIndex = tNode.index + 1;
+        for (let i = 0; i < localNames.length; i += 2) {
+            const index = localNames[i + 1];
+            const value = index === -1
+                ? localRefExtractor(tNode, viewData)
+                : viewData[index];
+            viewData[localIndex++] = value;
         }
-        return getNativeByTNode(parentTNode, lView);
     }
 }
 /**
- * Find a node in front of which `currentTNode` should be inserted.
+ * Locates the host native element, used for bootstrapping existing nodes into rendering pipeline.
  *
- * This method determines the `RNode` in front of which we should insert the `currentRNode`. This
- * takes `TNode.insertBeforeIndex` into account if i18n code has been invoked.
+ * @param renderer the renderer used to locate the element.
+ * @param elementOrSelector Render element or CSS selector to locate the element.
+ * @param encapsulation View Encapsulation defined for component that requests host element.
+ * @param injector Root view injector instance.
+ */
+function locateHostElement(renderer, elementOrSelector, encapsulation, injector) {
+    // Note: we use default value for the `PRESERVE_HOST_CONTENT` here even though it's a
+    // tree-shakable one (providedIn:'root'). This code path can be triggered during dynamic
+    // component creation (after calling ViewContainerRef.createComponent) when an injector
+    // instance can be provided. The injector instance might be disconnected from the main DI
+    // tree, thus the `PRESERVE_HOST_CONTENT` would not be able to instantiate. In this case, the
+    // default value will be used.
+    const preserveHostContent = injector.get(PRESERVE_HOST_CONTENT, PRESERVE_HOST_CONTENT_DEFAULT);
+    // When using native Shadow DOM, do not clear host element to allow native slot
+    // projection.
+    const preserveContent = preserveHostContent || encapsulation === ViewEncapsulation.ShadowDom;
+    const rootElement = renderer.selectRootElement(elementOrSelector, preserveContent);
+    applyRootElementTransform(rootElement);
+    return rootElement;
+}
+/**
+ * Applies any root element transformations that are needed. If hydration is enabled,
+ * this will process corrupted text nodes.
  *
- * @param parentTNode parent `TNode`
- * @param currentTNode current `TNode` (The node which we would like to insert into the DOM)
- * @param lView current `LView`
+ * @param rootElement the app root HTML Element
  */
-function getInsertInFrontOfRNode(parentTNode, currentTNode, lView) {
-    return _getInsertInFrontOfRNodeWithI18n(parentTNode, currentTNode, lView);
+function applyRootElementTransform(rootElement) {
+    _applyRootElementTransformImpl(rootElement);
 }
 /**
- * Find a node in front of which `currentTNode` should be inserted. (Does not take i18n into
- * account)
+ * Reference to a function that applies transformations to the root HTML element
+ * of an app. When hydration is enabled, this processes any corrupt text nodes
+ * so they are properly hydratable on the client.
  *
- * This method determines the `RNode` in front of which we should insert the `currentRNode`. This
- * does not take `TNode.insertBeforeIndex` into account.
+ * @param rootElement the app root HTML Element
+ */
+let _applyRootElementTransformImpl = () => null;
+/**
+ * Processes text node markers before hydration begins. This replaces any special comment
+ * nodes that were added prior to serialization are swapped out to restore proper text
+ * nodes before hydration.
  *
- * @param parentTNode parent `TNode`
- * @param currentTNode current `TNode` (The node which we would like to insert into the DOM)
- * @param lView current `LView`
+ * @param rootElement the app root HTML Element
  */
-function getInsertInFrontOfRNodeWithNoI18n(parentTNode, currentTNode, lView) {
-    if (parentTNode.type & (8 /* TNodeType.ElementContainer */ | 32 /* TNodeType.Icu */)) {
-        return getNativeByTNode(parentTNode, lView);
+function applyRootElementTransformImpl(rootElement) {
+    if (hasSkipHydrationAttrOnRElement(rootElement)) {
+        // Handle a situation when the `ngSkipHydration` attribute is applied
+        // to the root node of an application. In this case, we should clear
+        // the contents and render everything from scratch.
+        clearElementContents(rootElement);
+    }
+    else {
+        processTextNodeMarkersBeforeHydration(rootElement);
     }
-    return null;
 }
 /**
- * Tree shakable boundary for `getInsertInFrontOfRNodeWithI18n` function.
- *
- * This function will only be set if i18n code runs.
+ * Sets the implementation for the `applyRootElementTransform` function.
  */
-let _getInsertInFrontOfRNodeWithI18n = getInsertInFrontOfRNodeWithNoI18n;
+function enableApplyRootElementTransformImpl() {
+    _applyRootElementTransformImpl = applyRootElementTransformImpl;
+}
 /**
- * Tree shakable boundary for `processI18nInsertBefore` function.
+ * Mapping between attributes names that don't correspond to their element property names.
  *
- * This function will only be set if i18n code runs.
+ * Performance note: this function is written as a series of if checks (instead of, say, a property
+ * object lookup) for performance reasons - the series of `if` checks seems to be the fastest way of
+ * mapping property names. Do NOT change without benchmarking.
+ *
+ * Note: this mapping has to be kept in sync with the equally named mapping in the template
+ * type-checking machinery of ngtsc.
  */
-let _processI18nInsertBefore;
-function setI18nHandling(getInsertInFrontOfRNodeWithI18n, processI18nInsertBefore) {
-    _getInsertInFrontOfRNodeWithI18n = getInsertInFrontOfRNodeWithI18n;
-    _processI18nInsertBefore = processI18nInsertBefore;
+function mapPropName(name) {
+    if (name === 'class')
+        return 'className';
+    if (name === 'for')
+        return 'htmlFor';
+    if (name === 'formaction')
+        return 'formAction';
+    if (name === 'innerHtml')
+        return 'innerHTML';
+    if (name === 'readonly')
+        return 'readOnly';
+    if (name === 'tabindex')
+        return 'tabIndex';
+    return name;
+}
+function setPropertyAndInputs(tNode, lView, propName, value, renderer, sanitizer) {
+    ngDevMode && assertNotSame(value, NO_CHANGE, 'Incoming value should never be NO_CHANGE.');
+    const tView = lView[TVIEW];
+    const hasSetInput = setAllInputsForProperty(tNode, tView, lView, propName, value);
+    if (hasSetInput) {
+        isComponentHost(tNode) && markDirtyIfOnPush(lView, tNode.index);
+        ngDevMode && setNgReflectProperties(lView, tView, tNode, propName, value);
+        return; // Stop propcessing if we've matched at least one input.
+    }
+    setDomProperty(tNode, lView, propName, value, renderer, sanitizer);
 }
 /**
- * Appends the `child` native node (or a collection of nodes) to the `parent`.
- *
- * @param tView The `TView' to be appended
- * @param lView The current LView
- * @param childRNode The native child (or children) that should be appended
- * @param childTNode The TNode of the child element
+ * Sets a DOM property on a specific node.
+ * @param tNode TNode on which to set the value.
+ * @param lView View in which the node is located.
+ * @param propName Name of the property.
+ * @param value Value to set on the property.
+ * @param renderer Renderer to use when setting the property.
+ * @param sanitizer Function used to sanitize the value before setting it.
  */
-function appendChild(tView, lView, childRNode, childTNode) {
-    const parentRNode = getParentRElement(tView, childTNode, lView);
+function setDomProperty(tNode, lView, propName, value, renderer, sanitizer) {
+    if (tNode.type & 3 /* TNodeType.AnyRNode */) {
+        const element = getNativeByTNode(tNode, lView);
+        propName = mapPropName(propName);
+        if (ngDevMode) {
+            validateAgainstEventProperties(propName);
+            if (!isPropertyValid(element, propName, tNode.value, lView[TVIEW].schemas)) {
+                handleUnknownPropertyError(propName, tNode.value, tNode.type, lView);
+            }
+        }
+        // It is assumed that the sanitizer is only added when the compiler determines that the
+        // property is risky, so sanitization can be done without further checks.
+        value = sanitizer != null ? sanitizer(value, tNode.value || '', propName) : value;
+        renderer.setProperty(element, propName, value);
+    }
+    else if (tNode.type & 12 /* TNodeType.AnyContainer */) {
+        // If the node is a container and the property didn't
+        // match any of the inputs or schemas we should throw.
+        if (ngDevMode && !matchingSchemas(lView[TVIEW].schemas, tNode.value)) {
+            handleUnknownPropertyError(propName, tNode.value, tNode.type, lView);
+        }
+    }
+}
+/** If node is an OnPush component, marks its LView dirty. */
+function markDirtyIfOnPush(lView, viewIndex) {
+    ngDevMode && assertLView(lView);
+    const childComponentLView = getComponentLViewByIndex(viewIndex, lView);
+    if (!(childComponentLView[FLAGS] & 16 /* LViewFlags.CheckAlways */)) {
+        childComponentLView[FLAGS] |= 64 /* LViewFlags.Dirty */;
+    }
+}
+function setNgReflectProperty(lView, tNode, attrName, value) {
+    const environment = lView[ENVIRONMENT];
+    if (!environment.ngReflect) {
+        return;
+    }
+    const element = getNativeByTNode(tNode, lView);
     const renderer = lView[RENDERER];
-    const parentTNode = childTNode.parent || lView[T_HOST];
-    const anchorNode = getInsertInFrontOfRNode(parentTNode, childTNode, lView);
-    if (parentRNode != null) {
-        if (Array.isArray(childRNode)) {
-            for (let i = 0; i < childRNode.length; i++) {
-                nativeAppendOrInsertBefore(renderer, parentRNode, childRNode[i], anchorNode, false);
+    attrName = normalizeDebugBindingName(attrName);
+    const debugValue = normalizeDebugBindingValue(value);
+    if (tNode.type & 3 /* TNodeType.AnyRNode */) {
+        if (value == null) {
+            renderer.removeAttribute(element, attrName);
+        }
+        else {
+            renderer.setAttribute(element, attrName, debugValue);
+        }
+    }
+    else {
+        const textContent = escapeCommentText(`bindings=${JSON.stringify({ [attrName]: debugValue }, null, 2)}`);
+        renderer.setValue(element, textContent);
+    }
+}
+function setNgReflectProperties(lView, tView, tNode, publicName, value) {
+    const environment = lView[ENVIRONMENT];
+    if (!environment.ngReflect || !(tNode.type & (3 /* TNodeType.AnyRNode */ | 4 /* TNodeType.Container */))) {
+        return;
+    }
+    const inputConfig = tNode.inputs?.[publicName];
+    const hostInputConfig = tNode.hostDirectiveInputs?.[publicName];
+    if (hostInputConfig) {
+        for (let i = 0; i < hostInputConfig.length; i += 2) {
+            const index = hostInputConfig[i];
+            const publicName = hostInputConfig[i + 1];
+            const def = tView.data[index];
+            setNgReflectProperty(lView, tNode, def.inputs[publicName][0], value);
+        }
+    }
+    // Note: we set the private name of the input as the reflected property, not the public one.
+    if (inputConfig) {
+        for (const index of inputConfig) {
+            const def = tView.data[index];
+            setNgReflectProperty(lView, tNode, def.inputs[publicName][0], value);
+        }
+    }
+}
+/**
+ * Instantiate all the directives that were previously resolved on the current node.
+ */
+function instantiateAllDirectives(tView, lView, tNode) {
+    const start = tNode.directiveStart;
+    const end = tNode.directiveEnd;
+    // The component view needs to be created before creating the node injector
+    // since it is used to inject some special symbols like `ChangeDetectorRef`.
+    if (isComponentHost(tNode)) {
+        ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */);
+        createComponentLView(lView, tNode, tView.data[start + tNode.componentOffset]);
+    }
+    if (!tView.firstCreatePass) {
+        getOrCreateNodeInjectorForNode(tNode, lView);
+    }
+    const initialInputs = tNode.initialInputs;
+    for (let i = start; i < end; i++) {
+        const def = tView.data[i];
+        const directive = getNodeInjectable(lView, tView, i, tNode);
+        attachPatchData(directive, lView);
+        if (initialInputs !== null) {
+            setInputsFromAttrs(lView, i - start, directive, def, tNode, initialInputs);
+        }
+        if (isComponentDef(def)) {
+            const componentView = getComponentLViewByIndex(tNode.index, lView);
+            componentView[CONTEXT] = getNodeInjectable(lView, tView, i, tNode);
+        }
+    }
+}
+function invokeDirectivesHostBindings(tView, lView, tNode) {
+    const start = tNode.directiveStart;
+    const end = tNode.directiveEnd;
+    const elementIndex = tNode.index;
+    const currentDirectiveIndex = getCurrentDirectiveIndex();
+    try {
+        setSelectedIndex(elementIndex);
+        for (let dirIndex = start; dirIndex < end; dirIndex++) {
+            const def = tView.data[dirIndex];
+            const directive = lView[dirIndex];
+            setCurrentDirectiveIndex(dirIndex);
+            if (def.hostBindings !== null || def.hostVars !== 0 || def.hostAttrs !== null) {
+                invokeHostBindingsInCreationMode(def, directive);
             }
         }
-        else {
-            nativeAppendOrInsertBefore(renderer, parentRNode, childRNode, anchorNode, false);
-        }
     }
-    _processI18nInsertBefore !== undefined &&
-        _processI18nInsertBefore(renderer, childTNode, lView, childRNode, parentRNode);
+    finally {
+        setSelectedIndex(-1);
+        setCurrentDirectiveIndex(currentDirectiveIndex);
+    }
 }
 /**
- * Returns the first native node for a given LView, starting from the provided TNode.
+ * Invoke the host bindings in creation mode.
  *
- * Native nodes are returned in the order in which those appear in the native tree (DOM).
+ * @param def `DirectiveDef` which may contain the `hostBindings` function.
+ * @param directive Instance of directive.
  */
-function getFirstNativeNode(lView, tNode) {
-    if (tNode !== null) {
-        ngDevMode &&
-            assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ |
-                12 /* TNodeType.AnyContainer */ |
-                32 /* TNodeType.Icu */ |
-                16 /* TNodeType.Projection */ |
-                128 /* TNodeType.LetDeclaration */);
-        const tNodeType = tNode.type;
-        if (tNodeType & 3 /* TNodeType.AnyRNode */) {
-            return getNativeByTNode(tNode, lView);
-        }
-        else if (tNodeType & 4 /* TNodeType.Container */) {
-            return getBeforeNodeForView(-1, lView[tNode.index]);
-        }
-        else if (tNodeType & 8 /* TNodeType.ElementContainer */) {
-            const elIcuContainerChild = tNode.child;
-            if (elIcuContainerChild !== null) {
-                return getFirstNativeNode(lView, elIcuContainerChild);
-            }
-            else {
-                const rNodeOrLContainer = lView[tNode.index];
-                if (isLContainer(rNodeOrLContainer)) {
-                    return getBeforeNodeForView(-1, rNodeOrLContainer);
+function invokeHostBindingsInCreationMode(def, directive) {
+    if (def.hostBindings !== null) {
+        def.hostBindings(1 /* RenderFlags.Create */, directive);
+    }
+}
+/**
+ * Matches the current node against all available selectors.
+ * If a component is matched (at most one), it is returned in first position in the array.
+ */
+function findDirectiveDefMatches(tView, tNode) {
+    ngDevMode && assertFirstCreatePass(tView);
+    ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ | 12 /* TNodeType.AnyContainer */);
+    const registry = tView.directiveRegistry;
+    let matches = null;
+    if (registry) {
+        for (let i = 0; i < registry.length; i++) {
+            const def = registry[i];
+            if (isNodeMatchingSelectorList(tNode, def.selectors, /* isProjectionMode */ false)) {
+                matches ??= [];
+                if (isComponentDef(def)) {
+                    if (ngDevMode) {
+                        assertTNodeType(tNode, 2 /* TNodeType.Element */, `"${tNode.value}" tags cannot be used as component hosts. ` +
+                            `Please use a different tag to activate the ${stringify(def.type)} component.`);
+                        if (matches.length && isComponentDef(matches[0])) {
+                            throwMultipleComponentError(tNode, matches.find(isComponentDef).type, def.type);
+                        }
+                    }
+                    matches.unshift(def);
                 }
                 else {
-                    return unwrapRNode(rNodeOrLContainer);
-                }
-            }
-        }
-        else if (tNodeType & 128 /* TNodeType.LetDeclaration */) {
-            return getFirstNativeNode(lView, tNode.next);
-        }
-        else if (tNodeType & 32 /* TNodeType.Icu */) {
-            let nextRNode = icuContainerIterate(tNode, lView);
-            let rNode = nextRNode();
-            // If the ICU container has no nodes, than we use the ICU anchor as the node.
-            return rNode || unwrapRNode(lView[tNode.index]);
-        }
-        else {
-            const projectionNodes = getProjectionNodes(lView, tNode);
-            if (projectionNodes !== null) {
-                if (Array.isArray(projectionNodes)) {
-                    return projectionNodes[0];
+                    matches.push(def);
                 }
-                const parentView = getLViewParent(lView[DECLARATION_COMPONENT_VIEW]);
-                ngDevMode && assertParentView(parentView);
-                return getFirstNativeNode(parentView, projectionNodes);
-            }
-            else {
-                return getFirstNativeNode(lView, tNode.next);
             }
         }
     }
-    return null;
+    return matches;
 }
-function getProjectionNodes(lView, tNode) {
-    if (tNode !== null) {
-        const componentView = lView[DECLARATION_COMPONENT_VIEW];
-        const componentHost = componentView[T_HOST];
-        const slotIdx = tNode.projection;
-        ngDevMode && assertProjectionSlots(lView);
-        return componentHost.projection[slotIdx];
+function elementAttributeInternal(tNode, lView, name, value, sanitizer, namespace) {
+    if (ngDevMode) {
+        assertNotSame(value, NO_CHANGE, 'Incoming value should never be NO_CHANGE.');
+        validateAgainstEventAttributes(name);
+        assertTNodeType(tNode, 2 /* TNodeType.Element */, `Attempted to set attribute \`${name}\` on a container node. ` +
+            `Host bindings are not valid on ng-container or ng-template.`);
     }
-    return null;
+    const element = getNativeByTNode(tNode, lView);
+    setElementAttribute(lView[RENDERER], element, namespace, tNode.value, name, value, sanitizer);
 }
-function getBeforeNodeForView(viewIndexInContainer, lContainer) {
-    const nextViewIndex = CONTAINER_HEADER_OFFSET + viewIndexInContainer + 1;
-    if (nextViewIndex < lContainer.length) {
-        const lView = lContainer[nextViewIndex];
-        const firstTNodeOfView = lView[TVIEW].firstChild;
-        if (firstTNodeOfView !== null) {
-            return getFirstNativeNode(lView, firstTNodeOfView);
-        }
+function setElementAttribute(renderer, element, namespace, tagName, name, value, sanitizer) {
+    if (value == null) {
+        renderer.removeAttribute(element, name, namespace);
+    }
+    else {
+        const strValue = sanitizer == null ? renderStringify(value) : sanitizer(value, tagName || '', name);
+        renderer.setAttribute(element, name, strValue, namespace);
     }
-    return lContainer[NATIVE];
 }
 /**
- * Performs the operation of `action` on the node. Typically this involves inserting or removing
- * nodes on the LView or projection boundary.
+ * Sets initial input properties on directive instances from attribute data
+ *
+ * @param lView Current LView that is being processed.
+ * @param directiveIndex Index of the directive in directives array
+ * @param instance Instance of the directive on which to set the initial inputs
+ * @param def The directive def that contains the list of inputs
+ * @param tNode The static data for this node
  */
-function applyNodes(renderer, action, tNode, lView, parentRElement, beforeNode, isProjection) {
-    while (tNode != null) {
-        ngDevMode && assertTNodeForLView(tNode, lView);
-        // Let declarations don't have corresponding DOM nodes so we skip over them.
-        if (tNode.type === 128 /* TNodeType.LetDeclaration */) {
-            tNode = tNode.next;
-            continue;
-        }
-        ngDevMode &&
-            assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ | 12 /* TNodeType.AnyContainer */ | 16 /* TNodeType.Projection */ | 32 /* TNodeType.Icu */);
-        const rawSlotValue = lView[tNode.index];
-        const tNodeType = tNode.type;
-        if (isProjection) {
-            if (action === 0 /* WalkTNodeTreeAction.Create */) {
-                rawSlotValue && attachPatchData(unwrapRNode(rawSlotValue), lView);
-                tNode.flags |= 2 /* TNodeFlags.isProjected */;
+function setInputsFromAttrs(lView, directiveIndex, instance, def, tNode, initialInputData) {
+    const initialInputs = initialInputData[directiveIndex];
+    if (initialInputs !== null) {
+        for (let i = 0; i < initialInputs.length; i += 2) {
+            const lookupName = initialInputs[i];
+            const value = initialInputs[i + 1];
+            writeToDirectiveInput(def, instance, lookupName, value);
+            if (ngDevMode) {
+                setNgReflectProperty(lView, tNode, def.inputs[lookupName][0], value);
             }
         }
-        if (!isDetachedByI18n(tNode)) {
-            if (tNodeType & 8 /* TNodeType.ElementContainer */) {
-                applyNodes(renderer, action, tNode.child, lView, parentRElement, beforeNode, false);
-                applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode);
-            }
-            else if (tNodeType & 32 /* TNodeType.Icu */) {
-                const nextRNode = icuContainerIterate(tNode, lView);
-                let rNode;
-                while ((rNode = nextRNode())) {
-                    applyToElementOrContainer(action, renderer, parentRElement, rNode, beforeNode);
-                }
-                applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode);
-            }
-            else if (tNodeType & 16 /* TNodeType.Projection */) {
-                applyProjectionRecursive(renderer, action, lView, tNode, parentRElement, beforeNode);
-            }
-            else {
-                ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ | 4 /* TNodeType.Container */);
-                applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode);
+    }
+}
+/** Shared code between instructions that indicate the start of an element. */
+function elementLikeStartShared(tNode, lView, index, name, locateOrCreateNativeNode) {
+    const adjustedIndex = HEADER_OFFSET + index;
+    const tView = lView[TVIEW];
+    const native = locateOrCreateNativeNode(tView, lView, tNode, name, index);
+    lView[adjustedIndex] = native;
+    setCurrentTNode(tNode, true);
+    // It's important that this runs before we've instantiated the directives.
+    const isElement = tNode.type === 2 /* TNodeType.Element */;
+    if (isElement) {
+        setupStaticAttributes(lView[RENDERER], native, tNode);
+        // any immediate children of a component or template container must be pre-emptively
+        // monkey-patched with the component view data so that the element can be inspected
+        // later on using any element discovery utility methods (see `element_discovery.ts`)
+        if (getElementDepthCount() === 0 || isDirectiveHost(tNode)) {
+            attachPatchData(native, lView);
+        }
+        increaseElementDepthCount();
+    }
+    else {
+        attachPatchData(native, lView);
+    }
+    if (wasLastNodeCreated() && (!isElement || !isDetachedByI18n(tNode))) {
+        // 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);
+    }
+    return tNode;
+}
+/** Shared code between instructions that indicate the end of an element. */
+function elementLikeEndShared(tNode) {
+    let currentTNode = tNode;
+    if (isCurrentTNodeParent()) {
+        setCurrentTNodeAsNotParent();
+    }
+    else {
+        ngDevMode && assertHasParent(getCurrentTNode());
+        currentTNode = currentTNode.parent;
+        setCurrentTNode(currentTNode, false);
+    }
+    return currentTNode;
+}
+///////////////////////////////
+//// Bindings & interpolations
+///////////////////////////////
+/**
+ * Stores meta-data for a property binding to be used by TestBed's `DebugElement.properties`.
+ *
+ * In order to support TestBed's `DebugElement.properties` we need to save, for each binding:
+ * - a bound property name;
+ * - a static parts of interpolated strings;
+ *
+ * A given property metadata is saved at the binding's index in the `TView.data` (in other words, a
+ * property binding metadata will be stored in `TView.data` at the same index as a bound value in
+ * `LView`). Metadata are represented as `INTERPOLATION_DELIMITER`-delimited string with the
+ * following format:
+ * - `propertyName` for bound properties;
+ * - `propertyName�prefix�interpolation_static_part1�..interpolation_static_partN�suffix` for
+ * interpolated properties.
+ *
+ * @param tData `TData` where meta-data will be saved;
+ * @param tNode `TNode` that is a target of the binding;
+ * @param propertyName bound property name;
+ * @param bindingIndex binding index in `LView`
+ * @param interpolationParts static interpolation parts (for property interpolations)
+ */
+function storePropertyBindingMetadata(tData, tNode, propertyName, bindingIndex, ...interpolationParts) {
+    // Binding meta-data are stored only the first time a given property instruction is processed.
+    // Since we don't have a concept of the "first update pass" we need to check for presence of the
+    // binding meta-data to decide if one should be stored (or if was stored already).
+    if (tData[bindingIndex] === null) {
+        if (!tNode.inputs?.[propertyName] && !tNode.hostDirectiveInputs?.[propertyName]) {
+            const propBindingIdxs = tNode.propertyBindings || (tNode.propertyBindings = []);
+            propBindingIdxs.push(bindingIndex);
+            let bindingMetadata = propertyName;
+            if (interpolationParts.length > 0) {
+                bindingMetadata +=
+                    INTERPOLATION_DELIMITER + interpolationParts.join(INTERPOLATION_DELIMITER);
             }
+            tData[bindingIndex] = bindingMetadata;
         }
-        tNode = isProjection ? tNode.projectionNext : tNode.next;
     }
 }
-function applyView(tView, lView, renderer, action, parentRElement, beforeNode) {
-    applyNodes(renderer, action, tView.firstChild, lView, parentRElement, beforeNode, false);
+/**
+ * There are cases where the sub component's renderer needs to be included
+ * instead of the current renderer (see the componentSyntheticHost* instructions).
+ */
+function loadComponentRenderer(currentDef, tNode, lView) {
+    // TODO(FW-2043): the `currentDef` is null when host bindings are invoked while creating root
+    // component (see packages/core/src/render3/component.ts). This is not consistent with the process
+    // of creating inner components, when current directive index is available in the state. In order
+    // to avoid relying on current def being `null` (thus special-casing root component creation), the
+    // process of creating root component should be unified with the process of creating inner
+    // components.
+    if (currentDef === null || isComponentDef(currentDef)) {
+        lView = unwrapLView(lView[tNode.index]);
+    }
+    return lView[RENDERER];
+}
+/** Handles an error thrown in an LView. */
+function handleUncaughtError(lView, error) {
+    const injector = lView[INJECTOR];
+    if (!injector) {
+        return;
+    }
+    const errorHandler = injector.get(INTERNAL_APPLICATION_ERROR_HANDLER, null);
+    errorHandler?.(error);
 }
 /**
- * `applyProjection` performs operation on the projection.
- *
- * Inserting a projection requires us to locate the projected nodes from the parent component. The
- * complication is that those nodes themselves could be re-projected from their parent component.
+ * Set all directive inputs with the specific public name on the node.
  *
- * @param tView The `TView` of `LView` which needs to be inserted, detached, destroyed
- * @param lView The `LView` which needs to be inserted, detached, destroyed.
- * @param tProjectionNode node to project
+ * @param tNode TNode on which the input is being set.
+ * @param tView Current TView
+ * @param lView `LView` which contains the directives.
+ * @param publicName Public name of the input being set.
+ * @param value Value to set.
  */
-function applyProjection(tView, lView, tProjectionNode) {
-    const renderer = lView[RENDERER];
-    const parentRNode = getParentRElement(tView, tProjectionNode, lView);
-    const parentTNode = tProjectionNode.parent || lView[T_HOST];
-    let beforeNode = getInsertInFrontOfRNode(parentTNode, tProjectionNode, lView);
-    applyProjectionRecursive(renderer, 0 /* WalkTNodeTreeAction.Create */, lView, tProjectionNode, parentRNode, beforeNode);
+function setAllInputsForProperty(tNode, tView, lView, publicName, value) {
+    const inputs = tNode.inputs?.[publicName];
+    const hostDirectiveInputs = tNode.hostDirectiveInputs?.[publicName];
+    let hasMatch = false;
+    if (hostDirectiveInputs) {
+        for (let i = 0; i < hostDirectiveInputs.length; i += 2) {
+            const index = hostDirectiveInputs[i];
+            ngDevMode && assertIndexInRange(lView, index);
+            const publicName = hostDirectiveInputs[i + 1];
+            const def = tView.data[index];
+            writeToDirectiveInput(def, lView[index], publicName, value);
+            hasMatch = true;
+        }
+    }
+    if (inputs) {
+        for (const index of inputs) {
+            ngDevMode && assertIndexInRange(lView, index);
+            const instance = lView[index];
+            const def = tView.data[index];
+            writeToDirectiveInput(def, instance, publicName, value);
+            hasMatch = true;
+        }
+    }
+    return hasMatch;
 }
 /**
- * `applyProjectionRecursive` performs operation on the projection specified by `action` (insert,
- * detach, destroy)
- *
- * Inserting a projection requires us to locate the projected nodes from the parent component. The
- * complication is that those nodes themselves could be re-projected from their parent component.
- *
- * @param renderer Render to use
- * @param action action to perform (insert, detach, destroy)
- * @param lView The LView which needs to be inserted, detached, destroyed.
- * @param tProjectionNode node to project
- * @param parentRElement parent DOM element for insertion/removal.
- * @param beforeNode Before which node the insertions should happen.
+ * Sets an input value only on a specific directive and its host directives.
+ * @param tNode TNode on which the input is being set.
+ * @param tView Current TView
+ * @param lView `LView` which contains the directives.
+ * @param target Directive on which to set the input.
+ * @param publicName Public name of the input being set.
+ * @param value Value to set.
  */
-function applyProjectionRecursive(renderer, action, lView, tProjectionNode, parentRElement, beforeNode) {
-    const componentLView = lView[DECLARATION_COMPONENT_VIEW];
-    const componentNode = componentLView[T_HOST];
-    ngDevMode &&
-        assertEqual(typeof tProjectionNode.projection, 'number', 'expecting projection index');
-    const nodeToProjectOrRNodes = componentNode.projection[tProjectionNode.projection];
-    if (Array.isArray(nodeToProjectOrRNodes)) {
-        // This should not exist, it is a bit of a hack. When we bootstrap a top level node and we
-        // need to support passing projectable nodes, so we cheat and put them in the TNode
-        // of the Host TView. (Yes we put instance info at the T Level). We can get away with it
-        // because we know that TView is not shared and therefore it will not be a problem.
-        // This should be refactored and cleaned up.
-        for (let i = 0; i < nodeToProjectOrRNodes.length; i++) {
-            const rNode = nodeToProjectOrRNodes[i];
-            applyToElementOrContainer(action, renderer, parentRElement, rNode, beforeNode);
-        }
+function setDirectiveInput(tNode, tView, lView, target, publicName, value) {
+    let hostIndex = null;
+    let hostDirectivesStart = null;
+    let hostDirectivesEnd = null;
+    let hasSet = false;
+    if (ngDevMode && !tNode.directiveToIndex?.has(target.type)) {
+        throw new Error(`Node does not have a directive with type ${target.type.name}`);
+    }
+    const data = tNode.directiveToIndex.get(target.type);
+    if (typeof data === 'number') {
+        hostIndex = data;
     }
     else {
-        let nodeToProject = nodeToProjectOrRNodes;
-        const projectedComponentLView = componentLView[PARENT];
-        // If a parent <ng-content> is located within a skip hydration block,
-        // annotate an actual node that is being projected with the same flag too.
-        if (hasInSkipHydrationBlockFlag(tProjectionNode)) {
-            nodeToProject.flags |= 128 /* TNodeFlags.inSkipHydrationBlock */;
+        [hostIndex, hostDirectivesStart, hostDirectivesEnd] = data;
+    }
+    if (hostDirectivesStart !== null &&
+        hostDirectivesEnd !== null &&
+        tNode.hostDirectiveInputs?.hasOwnProperty(publicName)) {
+        const hostDirectiveInputs = tNode.hostDirectiveInputs[publicName];
+        for (let i = 0; i < hostDirectiveInputs.length; i += 2) {
+            const index = hostDirectiveInputs[i];
+            if (index >= hostDirectivesStart && index <= hostDirectivesEnd) {
+                ngDevMode && assertIndexInRange(lView, index);
+                const def = tView.data[index];
+                const hostDirectivePublicName = hostDirectiveInputs[i + 1];
+                writeToDirectiveInput(def, lView[index], hostDirectivePublicName, value);
+                hasSet = true;
+            }
+            else if (index > hostDirectivesEnd) {
+                // Directives here are in ascending order so we can stop looking once we're past the range.
+                break;
+            }
         }
-        applyNodes(renderer, action, nodeToProject, projectedComponentLView, parentRElement, beforeNode, true);
     }
+    if (hostIndex !== null && target.inputs.hasOwnProperty(publicName)) {
+        ngDevMode && assertIndexInRange(lView, hostIndex);
+        writeToDirectiveInput(target, lView[hostIndex], publicName, value);
+        hasSet = true;
+    }
+    return hasSet;
+}
+
+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]);
+    }
+    profiler(18 /* ProfilerEvent.ComponentStart */);
+    renderView(componentTView, componentView, componentView[CONTEXT]);
+    profiler(19 /* ProfilerEvent.ComponentEnd */, componentView[CONTEXT]);
 }
 /**
- * `applyContainer` performs an operation on the container and its views as specified by
- * `action` (insert, detach, destroy)
+ * Syncs an LView instance with its blueprint if they have gotten out of sync.
  *
- * Inserting a Container is complicated by the fact that the container may have Views which
- * themselves have containers or projections.
+ * 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:
  *
- * @param renderer Renderer to use
- * @param action action to perform (insert, detach, destroy)
- * @param lContainer The LContainer which needs to be inserted, detached, destroyed.
- * @param parentRElement parent DOM element for insertion/removal.
- * @param beforeNode Before which node the insertions should happen.
+ * App template:
+ * ```html
+ * <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 applyContainer(renderer, action, lContainer, parentRElement, beforeNode) {
-    ngDevMode && assertLContainer(lContainer);
-    const anchor = lContainer[NATIVE]; // LContainer has its own before node.
-    const native = unwrapRNode(lContainer);
-    // An LContainer can be created dynamically on any node by injecting ViewContainerRef.
-    // Asking for a ViewContainerRef on an element will result in a creation of a separate anchor
-    // node (comment in the DOM) that will be different from the LContainer's host node. In this
-    // particular case we need to execute action on 2 nodes:
-    // - container's host node (this is done in the executeActionOnElementOrContainer)
-    // - container's host node (this is done here)
-    if (anchor !== native) {
-        // This is very strange to me (Misko). I would expect that the native is same as anchor. I
-        // don't see a reason why they should be different, but they are.
-        //
-        // If they are we need to process the second anchor as well.
-        applyToElementOrContainer(action, renderer, parentRElement, anchor, beforeNode);
-    }
-    for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
-        const lView = lContainer[i];
-        applyView(lView[TVIEW], lView, renderer, action, parentRElement, anchor);
+function syncViewWithBlueprint(tView, lView) {
+    for (let i = lView.length; i < tView.blueprint.length; i++) {
+        lView.push(tView.blueprint[i]);
     }
 }
 /**
- * Writes class/style to element.
- *
- * @param renderer Renderer to use.
- * @param isClassBased `true` if it should be written to `class` (`false` to write to `style`)
- * @param rNode The Node to write to.
- * @param prop Property to write to. This would be the class/style name.
- * @param value Value to write. If `null`/`undefined`/`false` this is considered a remove (set/add
- *        otherwise).
+ * 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 applyStyling(renderer, isClassBased, rNode, prop, value) {
-    if (isClassBased) {
-        // We actually want JS true/false here because any truthy value should add the class
-        if (!value) {
-            renderer.removeClass(rNode, prop);
+function renderView(tView, lView, context) {
+    ngDevMode && assertEqual(isCreationMode(lView), true, 'Should be run in creation mode');
+    ngDevMode && assertNotReactive(renderView.name);
+    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;
+        }
+        // Mark all queries active in this view as dirty. This is necessary for signal-based queries to
+        // have a clear marking point where we can read query results atomically (for a given view).
+        lView[QUERIES]?.finishViewCreation(tView);
+        // 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);
         }
-        else {
-            renderer.addClass(rNode, prop);
+        // 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);
         }
     }
-    else {
-        let flags = prop.indexOf('-') === -1 ? undefined : RendererStyleFlags2.DashCase;
-        if (value == null /** || value === undefined */) {
-            renderer.removeStyle(rNode, prop, flags);
+    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;
         }
-        else {
-            // A value is important if it ends with `!important`. The style
-            // parser strips any semicolons at the end of the value.
-            const isImportant = typeof value === 'string' ? value.endsWith('!important') : false;
-            if (isImportant) {
-                // !important has to be stripped from the value for it to be valid.
-                value = value.slice(0, -10);
-                flags |= RendererStyleFlags2.Important;
-            }
-            renderer.setStyle(rNode, prop, value, flags);
+        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]);
+    }
+}
+
+function createAndRenderEmbeddedLView(declarationLView, templateTNode, context, options) {
+    const prevConsumer = setActiveConsumer(null);
+    try {
+        const embeddedTView = templateTNode.tView;
+        ngDevMode && assertDefined(embeddedTView, 'TView must be defined for a template node.');
+        ngDevMode && assertTNodeForLView(templateTNode, declarationLView);
+        // Embedded views follow the change detection strategy of the view they're declared in.
+        const isSignalView = declarationLView[FLAGS] & 4096 /* LViewFlags.SignalView */;
+        const viewFlags = isSignalView ? 4096 /* LViewFlags.SignalView */ : 16 /* LViewFlags.CheckAlways */;
+        const embeddedLView = createLView(declarationLView, embeddedTView, context, viewFlags, null, templateTNode, null, null, options?.injector ?? null, options?.embeddedViewInjector ?? null, options?.dehydratedView ?? null);
+        const declarationLContainer = declarationLView[templateTNode.index];
+        ngDevMode && assertLContainer(declarationLContainer);
+        embeddedLView[DECLARATION_LCONTAINER] = declarationLContainer;
+        const declarationViewLQueries = declarationLView[QUERIES];
+        if (declarationViewLQueries !== null) {
+            embeddedLView[QUERIES] = declarationViewLQueries.createEmbeddedView(embeddedTView);
         }
+        // execute creation mode of a view
+        renderView(embeddedTView, embeddedLView, context);
+        return embeddedLView;
+    }
+    finally {
+        setActiveConsumer(prevConsumer);
     }
 }
+/**
+ * Returns whether an elements that belong to a view should be
+ * inserted into the DOM. For client-only cases, DOM elements are
+ * always inserted. For hydration cases, we check whether serialized
+ * info is available for a view and the view is not in a "skip hydration"
+ * block (in which case view contents was re-created, thus needing insertion).
+ */
+function shouldAddViewToDom(tNode, dehydratedView) {
+    return (!dehydratedView || dehydratedView.firstChild === null || hasInSkipHydrationBlockFlag(tNode));
+}
+
+const USE_EXHAUSTIVE_CHECK_NO_CHANGES_DEFAULT = false;
+const UseExhaustiveCheckNoChanges = new InjectionToken(ngDevMode ? 'exhaustive checkNoChanges' : '');
 
 function collectNativeNodes(tView, lView, tNode, result, isProjection = false) {
     while (tNode !== null) {
@@ -12679,11 +12732,12 @@ function assertNoDuplicateDirectives(directives) {
     }
 }
 
-function elementStartFirstCreatePass(index, tView, lView, name, directiveMatcher, bindingsEnabled, attrsIndex, localRefsIndex) {
+function directiveHostFirstCreatePass(index, lView, type, name, directiveMatcher, bindingsEnabled, attrsIndex, localRefsIndex) {
+    const tView = lView[TVIEW];
     ngDevMode && assertFirstCreatePass(tView);
     const tViewConsts = tView.consts;
     const attrs = getConstant(tViewConsts, attrsIndex);
-    const tNode = getOrCreateTNode(tView, index, 2 /* TNodeType.Element */, name, attrs);
+    const tNode = getOrCreateTNode(tView, index, type, name, attrs);
     if (bindingsEnabled) {
         resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex), directiveMatcher);
     }
@@ -12700,7 +12754,7 @@ function elementStartFirstCreatePass(index, tView, lView, name, directiveMatcher
     }
     return tNode;
 }
-function elementEndFirstCreatePass(tView, tNode) {
+function directiveHostEndFirstCreatePass(tView, tNode) {
     ngDevMode && assertFirstCreatePass(tView);
     registerPostOrderHooks(tView, tNode);
     if (isContentQueryHost(tNode)) {
@@ -13353,7 +13407,7 @@ class ComponentFactory extends ComponentFactory$1 {
             enterView(rootLView);
             let componentView = null;
             try {
-                const hostTNode = elementStartFirstCreatePass(HEADER_OFFSET, rootTView, rootLView, '#host', () => rootTView.directiveRegistry, true, 0);
+                const hostTNode = directiveHostFirstCreatePass(HEADER_OFFSET, rootLView, 2 /* TNodeType.Element */, '#host', () => rootTView.directiveRegistry, true, 0);
                 // ---- element instruction
                 // TODO(crisbeto): in practice `hostElement` should always be defined, but there are some
                 // tests where the renderer is mocked out and `undefined` is returned. We should update the
@@ -13365,7 +13419,7 @@ class ComponentFactory extends ComponentFactory$1 {
                 // TODO(pk): this logic is similar to the instruction code where a node can have directives
                 createDirectivesInstances(rootTView, rootLView, hostTNode);
                 executeContentQueries(rootTView, hostTNode, rootLView);
-                elementEndFirstCreatePass(rootTView, hostTNode);
+                directiveHostEndFirstCreatePass(rootTView, hostTNode);
                 if (projectableNodes !== undefined) {
                     projectNodes(hostTNode, this.ngContentSelectors, projectableNodes);
                 }
@@ -13396,7 +13450,7 @@ class ComponentFactory extends ComponentFactory$1 {
 }
 function createRootTView(rootSelectorOrNode, componentDef, componentBindings, directives) {
     const tAttributes = rootSelectorOrNode
-        ? ['ng-version', '20.0.6']
+        ? ['ng-version', '20.1.0-next.1']
         : // Extract attributes and classes from the first selector only to match VE behavior.
             extractAttrsAndClassesFromSelector(componentDef.selectors[0]);
     let creationBindings = null;
@@ -13520,7 +13574,7 @@ class ComponentRef extends ComponentRef$1 {
         if (ngDevMode && !hasSetInput) {
             const cmpNameForError = stringifyForError(this.componentType);
             let message = `Can't set value of the '${name}' input on the '${cmpNameForError}' component. `;
-            message += `Make sure that the '${name}' property is declared as an input using the @Input() decorator or the input() function.`;
+            message += `Make sure that the '${name}' property is annotated with @Input() or a mapped @Input('${name}') exists.`;
             reportUnknownPropertyError(message);
         }
     }
@@ -14967,8 +15021,8 @@ function ɵɵdefineComponent(componentDefinition) {
         }
         initFeatures(def);
         const dependencies = componentDefinition.dependencies;
-        def.directiveDefs = extractDefListOrFactory(dependencies, /* pipeDef */ false);
-        def.pipeDefs = extractDefListOrFactory(dependencies, /* pipeDef */ true);
+        def.directiveDefs = extractDefListOrFactory(dependencies, extractDirectiveDef);
+        def.pipeDefs = extractDefListOrFactory(dependencies, getPipeDef$1);
         def.id = getComponentId(def);
         return def;
     });
@@ -14976,9 +15030,6 @@ function ɵɵdefineComponent(componentDefinition) {
 function extractDirectiveDef(type) {
     return getComponentDef(type) || getDirectiveDef(type);
 }
-function nonNull(value) {
-    return value !== null;
-}
 /**
  * @codeGenApi
  */
@@ -15182,14 +15233,21 @@ function getNgDirectiveDef(directiveDefinition) {
 function initFeatures(definition) {
     definition.features?.forEach((fn) => fn(definition));
 }
-function extractDefListOrFactory(dependencies, pipeDef) {
+function extractDefListOrFactory(dependencies, defExtractor) {
     if (!dependencies) {
         return null;
     }
-    const defExtractor = pipeDef ? getPipeDef$1 : extractDirectiveDef;
-    return () => (typeof dependencies === 'function' ? dependencies() : dependencies)
-        .map((dep) => defExtractor(dep))
-        .filter(nonNull);
+    return () => {
+        const resolvedDependencies = typeof dependencies === 'function' ? dependencies() : dependencies;
+        const result = [];
+        for (const dep of resolvedDependencies) {
+            const definition = defExtractor(dep);
+            if (definition !== null) {
+                result.push(definition);
+            }
+        }
+        return result;
+    };
 }
 /**
  * A map that contains the generated component IDs and type.
@@ -15720,26 +15778,35 @@ function validateMappings(bindingType, def, hostDirectiveBindings) {
     }
 }
 
-function templateFirstCreatePass(index, tView, lView, templateFn, decls, vars, tagName, attrs, localRefsIndex) {
-    ngDevMode && assertFirstCreatePass(tView);
-    const tViewConsts = tView.consts;
-    // TODO(pk): refactor getOrCreateTNode to have the "create" only version
-    const tNode = getOrCreateTNode(tView, index, 4 /* TNodeType.Container */, tagName || null, attrs || null);
-    if (getBindingsEnabled()) {
-        resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex), findDirectiveDefMatches);
+function templateCreate(tNode, declarationLView, declarationTView, index, templateFn, decls, vars, flags) {
+    if (declarationTView.firstCreatePass) {
+        // Merge the template attrs last so that they have the highest priority.
+        tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, tNode.attrs);
+        const embeddedTView = (tNode.tView = createTView(2 /* TViewType.Embedded */, tNode, templateFn, decls, vars, declarationTView.directiveRegistry, declarationTView.pipeRegistry, null, declarationTView.schemas, declarationTView.consts, null /* ssrId */));
+        if (declarationTView.queries !== null) {
+            declarationTView.queries.template(declarationTView, tNode);
+            embeddedTView.queries = declarationTView.queries.embeddedTView(tNode);
+        }
     }
-    // Merge the template attrs last so that they have the highest priority.
-    tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, tNode.attrs);
-    registerPostOrderHooks(tView, tNode);
-    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);
+    if (flags) {
+        tNode.flags |= flags;
     }
-    return tNode;
+    setCurrentTNode(tNode, false);
+    const comment = _locateOrCreateContainerAnchor(declarationTView, declarationLView, tNode, index);
+    if (wasLastNodeCreated()) {
+        appendChild(declarationTView, declarationLView, comment, tNode);
+    }
+    attachPatchData(comment, declarationLView);
+    const lContainer = createLContainer(comment, declarationLView, comment, tNode);
+    declarationLView[index + HEADER_OFFSET] = lContainer;
+    addToEndOfViewTree(declarationLView, lContainer);
+    // If hydration is enabled, looks up dehydrated views in the DOM
+    // using hydration annotation info and stores those views on LContainer.
+    // In client-only mode, this function is a noop.
+    populateDehydratedViewsInLContainer(lContainer, tNode, declarationLView);
 }
 /**
- * Creates an LContainer for an embedded view.
+ * Declares a new template that can have directives on its host node.
  *
  * @param declarationLView LView in which the template was declared.
  * @param declarationTView TView in which the template wa declared.
@@ -15753,27 +15820,21 @@ function templateFirstCreatePass(index, tView, lView, templateFn, decls, vars, t
  * @param localRefExtractor A function which extracts local-refs values from the template.
  *        Defaults to the current element associated with the local-ref.
  */
-function declareTemplate(declarationLView, declarationTView, index, templateFn, decls, vars, tagName, attrs, flags, localRefsIndex, localRefExtractor) {
+function declareDirectiveHostTemplate(declarationLView, declarationTView, index, templateFn, decls, vars, tagName, attrs, flags, localRefsIndex, localRefExtractor) {
     const adjustedIndex = index + HEADER_OFFSET;
-    const tNode = declarationTView.firstCreatePass
-        ? templateFirstCreatePass(adjustedIndex, declarationTView, declarationLView, templateFn, decls, vars, tagName, attrs, localRefsIndex)
-        : declarationTView.data[adjustedIndex];
-    if (flags) {
-        tNode.flags |= flags;
+    let tNode;
+    if (declarationTView.firstCreatePass) {
+        // TODO(pk): refactor getOrCreateTNode to have the "create" only version
+        tNode = getOrCreateTNode(declarationTView, adjustedIndex, 4 /* TNodeType.Container */, tagName || null, attrs || null);
+        if (getBindingsEnabled()) {
+            resolveDirectives(declarationTView, declarationLView, tNode, getConstant(declarationTView.consts, localRefsIndex), findDirectiveDefMatches);
+        }
+        registerPostOrderHooks(declarationTView, tNode);
     }
-    setCurrentTNode(tNode, false);
-    const comment = _locateOrCreateContainerAnchor(declarationTView, declarationLView, tNode, index);
-    if (wasLastNodeCreated()) {
-        appendChild(declarationTView, declarationLView, comment, tNode);
+    else {
+        tNode = declarationTView.data[adjustedIndex];
     }
-    attachPatchData(comment, declarationLView);
-    const lContainer = createLContainer(comment, declarationLView, comment, tNode);
-    declarationLView[adjustedIndex] = lContainer;
-    addToEndOfViewTree(declarationLView, lContainer);
-    // If hydration is enabled, looks up dehydrated views in the DOM
-    // using hydration annotation info and stores those views on LContainer.
-    // In client-only mode, this function is a noop.
-    populateDehydratedViewsInLContainer(lContainer, tNode, declarationLView);
+    templateCreate(tNode, declarationLView, declarationTView, index, templateFn, decls, vars, flags);
     if (isDirectiveHost(tNode)) {
         createDirectivesInstances(declarationTView, declarationLView, tNode);
     }
@@ -15782,6 +15843,32 @@ function declareTemplate(declarationLView, declarationTView, index, templateFn,
     }
     return tNode;
 }
+/**
+ * Declares a new template that *cannot& have directives on its host node.
+ *
+ * @param declarationLView LView in which the template was declared.
+ * @param declarationTView TView in which the template wa declared.
+ * @param index The index of the container in the data array
+ * @param templateFn Inline template
+ * @param decls The number of nodes, local refs, and pipes for this template
+ * @param vars The number of bindings for this template
+ * @param tagName The name of the container element, if applicable
+ * @param attrsIndex Index of template attributes in the `consts` array.
+ * @param localRefs Index of the local references in the `consts` array.
+ * @param localRefExtractor A function which extracts local-refs values from the template.
+ *        Defaults to the current element associated with the local-ref.
+ */
+function declareNoDirectiveHostTemplate(declarationLView, declarationTView, index, templateFn, decls, vars, tagName, attrs, flags, localRefsIndex, localRefExtractor) {
+    const adjustedIndex = index + HEADER_OFFSET;
+    const tNode = declarationTView.firstCreatePass
+        ? getOrCreateTNode(declarationTView, adjustedIndex, 4 /* TNodeType.Container */, tagName || null, attrs || null)
+        : declarationTView.data[adjustedIndex];
+    templateCreate(tNode, declarationLView, declarationTView, index, templateFn, decls, vars, flags);
+    if (localRefsIndex != null) {
+        saveResolvedLocalsInData(declarationLView, tNode, localRefExtractor);
+    }
+    return tNode;
+}
 /**
  * Creates an LContainer for an ng-template (dynamically-inserted view), e.g.
  *
@@ -15805,7 +15892,7 @@ function ɵɵtemplate(index, templateFn, decls, vars, tagName, attrsIndex, local
     const lView = getLView();
     const tView = getTView();
     const attrs = getConstant(tView.consts, attrsIndex);
-    declareTemplate(lView, tView, index, templateFn, decls, vars, tagName, attrs, undefined, localRefsIndex, localRefExtractor);
+    declareDirectiveHostTemplate(lView, tView, index, templateFn, decls, vars, tagName, attrs, undefined, localRefsIndex, localRefExtractor);
     return ɵɵtemplate;
 }
 let _locateOrCreateContainerAnchor = createContainerAnchorImpl;
@@ -15822,13 +15909,14 @@ function createContainerAnchorImpl(tView, lView, tNode, index) {
  * anchor (comment) nodes.
  */
 function locateOrCreateContainerAnchorImpl(tView, lView, tNode, index) {
-    const hydrationInfo = lView[HYDRATION];
-    const isNodeCreationMode = !hydrationInfo ||
-        isInSkipHydrationBlock$1() ||
-        isDetachedByI18n(tNode) ||
-        isDisconnectedNode$1(hydrationInfo, index);
+    const isNodeCreationMode = !canHydrateNode(lView, tNode);
     lastNodeWasCreated(isNodeCreationMode);
-    const ssrId = hydrationInfo?.data[TEMPLATES]?.[index] ?? null;
+    // Regular creation mode.
+    if (isNodeCreationMode) {
+        return createContainerAnchorImpl(tView, lView);
+    }
+    const hydrationInfo = lView[HYDRATION];
+    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
@@ -15846,10 +15934,6 @@ function locateOrCreateContainerAnchorImpl(tView, lView, tNode, index) {
                 assertEqual(tNode.tView.ssrId, ssrId, 'Unexpected value of the `ssrId` for this TView');
         }
     }
-    // Regular creation mode.
-    if (isNodeCreationMode) {
-        return createContainerAnchorImpl(tView, lView);
-    }
     // Hydration mode, looking up existing elements in DOM.
     const currentRNode = locateNextRNode(hydrationInfo, tView, lView, tNode);
     ngDevMode && validateNodeExists(currentRNode, lView, tNode);
@@ -16798,9 +16882,7 @@ function afterEveryRender(callbackOrSpec, options) {
     return afterEveryRenderImpl(callbackOrSpec, injector, options, /* once */ false);
 }
 function afterNextRender(callbackOrSpec, options) {
-    if (ngDevMode && !options?.injector) {
-        assertInInjectionContext(afterNextRender);
-    }
+    !options?.injector && assertInInjectionContext(afterNextRender);
     const injector = options?.injector ?? inject(Injector);
     if (typeof ngServerMode !== 'undefined' && ngServerMode) {
         return NOOP_AFTER_RENDER_REF;
@@ -18131,13 +18213,8 @@ function getDeferBlocks$1(lView, deferBlocks) {
                     continue;
                 }
             }
-            // The host can be an `LView` if this is the container
-            // for a component that injects `ViewContainerRef`.
-            if (isLView(lContainer[HOST])) {
-                getDeferBlocks$1(lContainer[HOST], deferBlocks);
-            }
-            for (let j = CONTAINER_HEADER_OFFSET; j < lContainer.length; j++) {
-                getDeferBlocks$1(lContainer[j], deferBlocks);
+            for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
+                getDeferBlocks$1(lContainer[i], deferBlocks);
             }
         }
         else if (isLView(lView[i])) {
@@ -18828,9 +18905,6 @@ function isComputedNode(node) {
 function isTemplateEffectNode(node) {
     return node.kind === 'template';
 }
-function isEffectNode(node) {
-    return node.kind === 'effect';
-}
 function isSignalNode(node) {
     return node.kind === 'signal';
 }
@@ -18850,36 +18924,54 @@ function getTemplateConsumer(injector) {
     }
     return null;
 }
+const signalDebugMap = new WeakMap();
+let counter$1 = 0;
 function getNodesAndEdgesFromSignalMap(signalMap) {
     const nodes = Array.from(signalMap.keys());
     const debugSignalGraphNodes = [];
     const edges = [];
     for (const [consumer, producers] of signalMap.entries()) {
         const consumerIndex = nodes.indexOf(consumer);
+        let id = signalDebugMap.get(consumer);
+        if (!id) {
+            counter$1++;
+            id = counter$1.toString();
+            signalDebugMap.set(consumer, id);
+        }
         // collect node
-        if (isComputedNode(consumer) || isSignalNode(consumer)) {
+        if (isComputedNode(consumer)) {
             debugSignalGraphNodes.push({
                 label: consumer.debugName,
                 value: consumer.value,
                 kind: consumer.kind,
+                epoch: consumer.version,
+                debuggableFn: consumer.computation,
+                id,
             });
         }
-        else if (isTemplateEffectNode(consumer)) {
+        else if (isSignalNode(consumer)) {
             debugSignalGraphNodes.push({
-                label: consumer.debugName ?? consumer.lView?.[HOST]?.tagName?.toLowerCase?.(),
+                label: consumer.debugName,
+                value: consumer.value,
                 kind: consumer.kind,
+                epoch: consumer.version,
+                id,
             });
         }
-        else if (isEffectNode(consumer)) {
+        else if (isTemplateEffectNode(consumer)) {
             debugSignalGraphNodes.push({
-                label: consumer.debugName,
+                label: consumer.debugName ?? consumer.lView?.[HOST]?.tagName?.toLowerCase?.(),
                 kind: consumer.kind,
+                epoch: consumer.version,
+                id,
             });
         }
         else {
             debugSignalGraphNodes.push({
                 label: consumer.debugName,
                 kind: consumer.kind,
+                epoch: consumer.version,
+                id,
             });
         }
         // collect edges for node
@@ -20853,7 +20945,7 @@ function ɵɵdefer(index, primaryTmplIndex, dependencyResolverFn, loadingTmplInd
     const lView = getLView();
     const tView = getTView();
     const adjustedIndex = index + HEADER_OFFSET;
-    const tNode = declareTemplate(lView, tView, index, null, 0, 0);
+    const tNode = declareNoDirectiveHostTemplate(lView, tView, index, null, 0, 0);
     const injector = lView[INJECTOR];
     if (tView.firstCreatePass) {
         performanceMarkFeature('NgDefer');
@@ -21818,7 +21910,7 @@ function ɵɵconditionalCreate(index, templateFn, decls, vars, tagName, attrsInd
     const lView = getLView();
     const tView = getTView();
     const attrs = getConstant(tView.consts, attrsIndex);
-    declareTemplate(lView, tView, index, templateFn, decls, vars, tagName, attrs, 256 /* TNodeFlags.isControlFlowStart */, localRefsIndex, localRefExtractor);
+    declareNoDirectiveHostTemplate(lView, tView, index, templateFn, decls, vars, tagName, attrs, 256 /* TNodeFlags.isControlFlowStart */, localRefsIndex, localRefExtractor);
     return ɵɵconditionalBranchCreate;
 }
 /**
@@ -21844,7 +21936,7 @@ function ɵɵconditionalBranchCreate(index, templateFn, decls, vars, tagName, at
     const lView = getLView();
     const tView = getTView();
     const attrs = getConstant(tView.consts, attrsIndex);
-    declareTemplate(lView, tView, index, templateFn, decls, vars, tagName, attrs, 512 /* TNodeFlags.isInControlFlow */, localRefsIndex, localRefExtractor);
+    declareNoDirectiveHostTemplate(lView, tView, index, templateFn, decls, vars, tagName, attrs, 512 /* TNodeFlags.isInControlFlow */, localRefsIndex, localRefExtractor);
     return ɵɵconditionalBranchCreate;
 }
 /**
@@ -21985,13 +22077,13 @@ function ɵɵrepeaterCreate(index, templateFn, decls, vars, tagName, attrsIndex,
         : trackByFn;
     const metadata = new RepeaterMetadata(hasEmptyBlock, boundTrackBy);
     hostLView[HEADER_OFFSET + index] = metadata;
-    declareTemplate(lView, tView, index + 1, templateFn, decls, vars, tagName, getConstant(tView.consts, attrsIndex), 256 /* TNodeFlags.isControlFlowStart */);
+    declareNoDirectiveHostTemplate(lView, tView, index + 1, templateFn, decls, vars, tagName, getConstant(tView.consts, attrsIndex), 256 /* TNodeFlags.isControlFlowStart */);
     if (hasEmptyBlock) {
         ngDevMode &&
             assertDefined(emptyDecls, 'Missing number of declarations for the empty repeater block.');
         ngDevMode &&
             assertDefined(emptyVars, 'Missing number of bindings for the empty repeater block.');
-        declareTemplate(lView, tView, index + 2, emptyTemplateFn, emptyDecls, emptyVars, emptyTagName, getConstant(tView.consts, emptyAttrsIndex), 512 /* TNodeFlags.isInControlFlow */);
+        declareNoDirectiveHostTemplate(lView, tView, index + 2, emptyTemplateFn, emptyDecls, emptyVars, emptyTagName, getConstant(tView.consts, emptyAttrsIndex), 512 /* TNodeFlags.isInControlFlow */);
     }
 }
 function isViewExpensiveToRecreate(lView) {
@@ -22228,42 +22320,24 @@ function setDirectiveInputsWhichShadowsStyling(tView, tNode, lView, value, isCla
  */
 function ɵɵelementStart(index, name, attrsIndex, localRefsIndex) {
     const lView = getLView();
-    const tView = getTView();
-    const adjustedIndex = HEADER_OFFSET + index;
-    ngDevMode &&
-        assertEqual(getBindingIndex(), tView.bindingStartIndex, 'elements should be created before any bindings');
-    ngDevMode && assertIndexInRange(lView, adjustedIndex);
-    const renderer = lView[RENDERER];
+    ngDevMode && assertTNodeCreationIndex(lView, index);
+    const tView = lView[TVIEW];
+    const adjustedIndex = index + HEADER_OFFSET;
     const tNode = tView.firstCreatePass
-        ? elementStartFirstCreatePass(adjustedIndex, tView, lView, name, findDirectiveDefMatches, getBindingsEnabled(), attrsIndex, localRefsIndex)
+        ? directiveHostFirstCreatePass(adjustedIndex, lView, 2 /* TNodeType.Element */, name, findDirectiveDefMatches, getBindingsEnabled(), attrsIndex, localRefsIndex)
         : tView.data[adjustedIndex];
-    const native = _locateOrCreateElementNode(tView, lView, tNode, renderer, name, index);
-    lView[adjustedIndex] = native;
-    const hasDirectives = isDirectiveHost(tNode);
-    if (ngDevMode && tView.firstCreatePass) {
-        validateElementIsKnown(native, lView, tNode.value, tView.schemas, hasDirectives);
-    }
-    setCurrentTNode(tNode, true);
-    setupStaticAttributes(renderer, native, tNode);
-    if (!isDetachedByI18n(tNode) && 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);
-    }
-    // any immediate children of a component or template container must be pre-emptively
-    // monkey-patched with the component view data so that the element can be inspected
-    // later on using any element discovery utility methods (see `element_discovery.ts`)
-    if (getElementDepthCount() === 0 || hasDirectives) {
-        attachPatchData(native, lView);
-    }
-    increaseElementDepthCount();
-    if (hasDirectives) {
+    elementLikeStartShared(tNode, lView, index, name, _locateOrCreateElementNode);
+    if (isDirectiveHost(tNode)) {
+        const tView = lView[TVIEW];
         createDirectivesInstances(tView, lView, tNode);
         executeContentQueries(tView, tNode, lView);
     }
-    if (localRefsIndex !== null) {
+    if (localRefsIndex != null) {
         saveResolvedLocalsInData(lView, tNode);
     }
+    if (ngDevMode && lView[TVIEW].firstCreatePass) {
+        validateElementIsKnown(lView, tNode);
+    }
     return ɵɵelementStart;
 }
 /**
@@ -22273,31 +22347,23 @@ function ɵɵelementStart(index, name, attrsIndex, localRefsIndex) {
  * @codeGenApi
  */
 function ɵɵelementEnd() {
-    let currentTNode = getCurrentTNode();
-    ngDevMode && assertDefined(currentTNode, 'No parent node to close.');
-    if (isCurrentTNodeParent()) {
-        setCurrentTNodeAsNotParent();
-    }
-    else {
-        ngDevMode && assertHasParent(getCurrentTNode());
-        currentTNode = currentTNode.parent;
-        setCurrentTNode(currentTNode, false);
+    const tView = getTView();
+    const initialTNode = getCurrentTNode();
+    ngDevMode && assertDefined(initialTNode, 'No parent node to close.');
+    const currentTNode = elementLikeEndShared(initialTNode);
+    ngDevMode && assertTNodeType(currentTNode, 3 /* TNodeType.AnyRNode */);
+    if (tView.firstCreatePass) {
+        directiveHostEndFirstCreatePass(tView, currentTNode);
     }
-    const tNode = currentTNode;
-    ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */);
-    if (isSkipHydrationRootTNode(tNode)) {
+    if (isSkipHydrationRootTNode(currentTNode)) {
         leaveSkipHydrationBlock();
     }
     decreaseElementDepthCount();
-    const tView = getTView();
-    if (tView.firstCreatePass) {
-        elementEndFirstCreatePass(tView, tNode);
+    if (currentTNode.classesWithoutHost != null && hasClassInput(currentTNode)) {
+        setDirectiveInputsWhichShadowsStyling(tView, currentTNode, getLView(), currentTNode.classesWithoutHost, true);
     }
-    if (tNode.classesWithoutHost != null && hasClassInput(tNode)) {
-        setDirectiveInputsWhichShadowsStyling(tView, tNode, getLView(), tNode.classesWithoutHost, true);
-    }
-    if (tNode.stylesWithoutHost != null && hasStyleInput(tNode)) {
-        setDirectiveInputsWhichShadowsStyling(tView, tNode, getLView(), tNode.stylesWithoutHost, false);
+    if (currentTNode.stylesWithoutHost != null && hasStyleInput(currentTNode)) {
+        setDirectiveInputsWhichShadowsStyling(tView, currentTNode, getLView(), currentTNode.stylesWithoutHost, false);
     }
     return ɵɵelementEnd;
 }
@@ -22317,26 +22383,23 @@ function ɵɵelement(index, name, attrsIndex, localRefsIndex) {
     ɵɵelementEnd();
     return ɵɵelement;
 }
-let _locateOrCreateElementNode = (tView, lView, tNode, renderer, name, index) => {
+let _locateOrCreateElementNode = (tView, lView, tNode, name, index) => {
     lastNodeWasCreated(true);
-    return createElementNode(renderer, name, getNamespace());
+    return createElementNode(lView[RENDERER], name, getNamespace());
 };
 /**
  * Enables hydration code path (to lookup existing elements in DOM)
  * in addition to the regular creation mode of element nodes.
  */
-function locateOrCreateElementNodeImpl(tView, lView, tNode, renderer, name, index) {
-    const hydrationInfo = lView[HYDRATION];
-    const isNodeCreationMode = !hydrationInfo ||
-        isInSkipHydrationBlock$1() ||
-        isDetachedByI18n(tNode) ||
-        isDisconnectedNode$1(hydrationInfo, index);
+function locateOrCreateElementNodeImpl(tView, lView, tNode, name, index) {
+    const isNodeCreationMode = !canHydrateNode(lView, tNode);
     lastNodeWasCreated(isNodeCreationMode);
     // Regular creation mode.
     if (isNodeCreationMode) {
-        return createElementNode(renderer, name, getNamespace());
+        return createElementNode(lView[RENDERER], name, getNamespace());
     }
     // Hydration mode, looking up an existing element in DOM.
+    const hydrationInfo = lView[HYDRATION];
     const native = locateNextRNode(hydrationInfo, tView, lView, tNode);
     ngDevMode && validateMatchingNode(native, Node.ELEMENT_NODE, name, lView, tNode);
     ngDevMode && markRNodeAsClaimedByHydration(native);
@@ -22376,26 +22439,6 @@ function enableLocateOrCreateElementNodeImpl() {
     _locateOrCreateElementNode = locateOrCreateElementNodeImpl;
 }
 
-function elementContainerStartFirstCreatePass(index, tView, lView, attrsIndex, localRefsIndex) {
-    const tViewConsts = tView.consts;
-    const attrs = getConstant(tViewConsts, attrsIndex);
-    const tNode = getOrCreateTNode(tView, index, 8 /* TNodeType.ElementContainer */, 'ng-container', attrs);
-    // While ng-container doesn't necessarily support styling, we use the style context to identify
-    // and execute directives on the ng-container.
-    if (attrs !== null) {
-        computeStaticStyling(tNode, attrs, true);
-    }
-    const localRefs = getConstant(tViewConsts, localRefsIndex);
-    if (getBindingsEnabled()) {
-        resolveDirectives(tView, lView, tNode, localRefs, findDirectiveDefMatches);
-    }
-    // Merge the template attrs last so that they have the highest priority.
-    tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, tNode.attrs);
-    if (tView.queries !== null) {
-        tView.queries.elementStart(tView, tNode);
-    }
-    return tNode;
-}
 /**
  * Creates a logical container for other nodes (<ng-container>) backed by a comment node in the DOM.
  * The instruction must later be followed by `elementContainerEnd()` call.
@@ -22413,22 +22456,15 @@ function elementContainerStartFirstCreatePass(index, tView, lView, attrsIndex, l
  */
 function ɵɵelementContainerStart(index, attrsIndex, localRefsIndex) {
     const lView = getLView();
-    const tView = getTView();
+    ngDevMode && assertTNodeCreationIndex(lView, index);
+    const tView = lView[TVIEW];
     const adjustedIndex = index + HEADER_OFFSET;
-    ngDevMode && assertIndexInRange(lView, adjustedIndex);
-    ngDevMode &&
-        assertEqual(getBindingIndex(), tView.bindingStartIndex, 'element containers should be created before any bindings');
     const tNode = tView.firstCreatePass
-        ? elementContainerStartFirstCreatePass(adjustedIndex, tView, lView, attrsIndex, localRefsIndex)
+        ? directiveHostFirstCreatePass(adjustedIndex, lView, 8 /* TNodeType.ElementContainer */, 'ng-container', findDirectiveDefMatches, getBindingsEnabled(), attrsIndex, localRefsIndex)
         : tView.data[adjustedIndex];
-    setCurrentTNode(tNode, true);
-    const comment = _locateOrCreateElementContainerNode(tView, lView, tNode, index);
-    lView[adjustedIndex] = comment;
-    if (wasLastNodeCreated()) {
-        appendChild(tView, lView, comment, tNode);
-    }
-    attachPatchData(comment, lView);
+    elementLikeStartShared(tNode, lView, index, 'ng-container', _locateOrCreateElementContainerNode);
     if (isDirectiveHost(tNode)) {
+        const tView = lView[TVIEW];
         createDirectivesInstances(tView, lView, tNode);
         executeContentQueries(tView, tNode, lView);
     }
@@ -22444,23 +22480,14 @@ function ɵɵelementContainerStart(index, attrsIndex, localRefsIndex) {
  * @codeGenApi
  */
 function ɵɵelementContainerEnd() {
-    let currentTNode = getCurrentTNode();
     const tView = getTView();
-    if (isCurrentTNodeParent()) {
-        setCurrentTNodeAsNotParent();
-    }
-    else {
-        ngDevMode && assertHasParent(currentTNode);
-        currentTNode = currentTNode.parent;
-        setCurrentTNode(currentTNode, false);
-    }
-    ngDevMode && assertTNodeType(currentTNode, 8 /* TNodeType.ElementContainer */);
+    const initialTNode = getCurrentTNode();
+    ngDevMode && assertDefined(initialTNode, 'No parent node to close.');
+    const currentTNode = elementLikeEndShared(initialTNode);
     if (tView.firstCreatePass) {
-        registerPostOrderHooks(tView, currentTNode);
-        if (isContentQueryHost(currentTNode)) {
-            tView.queries.elementEnd(currentTNode);
-        }
+        directiveHostEndFirstCreatePass(tView, currentTNode);
     }
+    ngDevMode && assertTNodeType(currentTNode, 8 /* TNodeType.ElementContainer */);
     return ɵɵelementContainerEnd;
 }
 /**
@@ -22479,28 +22506,25 @@ function ɵɵelementContainer(index, attrsIndex, localRefsIndex) {
     ɵɵelementContainerEnd();
     return ɵɵelementContainer;
 }
-let _locateOrCreateElementContainerNode = (tView, lView, tNode, index) => {
+let _locateOrCreateElementContainerNode = (tView, lView, tNode, commentText, index) => {
     lastNodeWasCreated(true);
-    return createCommentNode(lView[RENDERER], ngDevMode ? 'ng-container' : '');
+    return createCommentNode(lView[RENDERER], ngDevMode ? commentText : '');
 };
 /**
  * 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) {
+function locateOrCreateElementContainerNode(tView, lView, tNode, commentText, index) {
     let comment;
-    const hydrationInfo = lView[HYDRATION];
-    const isNodeCreationMode = !hydrationInfo ||
-        isInSkipHydrationBlock$1() ||
-        isDisconnectedNode$1(hydrationInfo, index) ||
-        isDetachedByI18n(tNode);
+    const isNodeCreationMode = !canHydrateNode(lView, tNode);
     lastNodeWasCreated(isNodeCreationMode);
     // Regular creation mode.
     if (isNodeCreationMode) {
-        return createCommentNode(lView[RENDERER], ngDevMode ? 'ng-container' : '');
+        return createCommentNode(lView[RENDERER], ngDevMode ? commentText : '');
     }
     // Hydration mode, looking up existing elements in DOM.
+    const hydrationInfo = lView[HYDRATION];
     const currentRNode = locateNextRNode(hydrationInfo, tView, lView, tNode);
     ngDevMode && validateNodeExists(currentRNode, lView, tNode);
     const ngContainerSize = getNgContainerSize(hydrationInfo, index);
@@ -24578,7 +24602,7 @@ function ɵɵprojection(nodeIndex, selectorIndex = 0, attrs, fallbackTemplateFn,
     // instances of the component may or may not insert it. Also it needs to be declare *before*
     // the projection node in order to work correctly with hydration.
     if (fallbackIndex !== null) {
-        declareTemplate(lView, tView, fallbackIndex, fallbackTemplateFn, fallbackDecls, fallbackVars, null, attrs);
+        declareNoDirectiveHostTemplate(lView, tView, fallbackIndex, fallbackTemplateFn, fallbackDecls, fallbackVars, null, attrs);
     }
     const tProjectionNode = getOrCreateTNode(tView, HEADER_OFFSET + nodeIndex, 16 /* TNodeType.Projection */, null, attrs || null);
     // We can't use viewData[HOST_NODE] because projection nodes can be nested in embedded views.
@@ -26097,9 +26121,7 @@ function ɵɵtext(index, value = '') {
     const lView = getLView();
     const tView = getTView();
     const adjustedIndex = index + HEADER_OFFSET;
-    ngDevMode &&
-        assertEqual(getBindingIndex(), tView.bindingStartIndex, 'text nodes should be created before any bindings');
-    ngDevMode && assertIndexInRange(lView, adjustedIndex);
+    ngDevMode && assertTNodeCreationIndex(lView, index);
     const tNode = tView.firstCreatePass
         ? getOrCreateTNode(tView, adjustedIndex, 1 /* TNodeType.Text */, value, null)
         : tView.data[adjustedIndex];
@@ -26120,17 +26142,14 @@ let _locateOrCreateTextNode = (tView, lView, tNode, value, index) => {
  * in addition to the regular creation mode of text nodes.
  */
 function locateOrCreateTextNodeImpl(tView, lView, tNode, value, index) {
-    const hydrationInfo = lView[HYDRATION];
-    const isNodeCreationMode = !hydrationInfo ||
-        isInSkipHydrationBlock$1() ||
-        isDetachedByI18n(tNode) ||
-        isDisconnectedNode$1(hydrationInfo, index);
+    const isNodeCreationMode = !canHydrateNode(lView, tNode);
     lastNodeWasCreated(isNodeCreationMode);
     // Regular creation mode.
     if (isNodeCreationMode) {
         return createTextNode(lView[RENDERER], value);
     }
     // Hydration mode, looking up an existing element in DOM.
+    const hydrationInfo = lView[HYDRATION];
     const textNative = locateNextRNode(hydrationInfo, tView, lView, tNode);
     ngDevMode && validateMatchingNode(textNative, Node.TEXT_NODE, null, lView, tNode);
     ngDevMode && markRNodeAsClaimedByHydration(textNative);
@@ -27145,7 +27164,7 @@ function indexOf(item, arr, begin, end) {
 /**
  * Use this with `multi` `providers`.
  */
-function multiProvidersFactoryResolver(_, tData, lData, tNode) {
+function multiProvidersFactoryResolver(_, flags, tData, lData, tNode) {
     return multiResolve(this.multi, []);
 }
 /**
@@ -27153,7 +27172,7 @@ function multiProvidersFactoryResolver(_, tData, lData, tNode) {
  *
  * This factory knows how to concatenate itself with the existing `multi` `providers`.
  */
-function multiViewProvidersFactoryResolver(_, tData, lView, tNode) {
+function multiViewProvidersFactoryResolver(_, _flags, _tData, lView, tNode) {
     const factories = this.multi;
     let result;
     if (this.providerFactory) {
@@ -27278,8 +27297,8 @@ function ɵɵExternalStylesFeature(styleUrls) {
  */
 function ɵɵsetComponentScope(type, directives, pipes) {
     const def = type.ɵcmp;
-    def.directiveDefs = extractDefListOrFactory(directives, /* pipeDef */ false);
-    def.pipeDefs = extractDefListOrFactory(pipes, /* pipeDef */ true);
+    def.directiveDefs = extractDefListOrFactory(directives, extractDirectiveDef);
+    def.pipeDefs = extractDefListOrFactory(pipes, getPipeDef$1);
 }
 /**
  * Adds the module metadata that is necessary to compute the module's transitive scope to an
@@ -29547,17 +29566,8 @@ function internalProvideZoneChangeDetection({ ngZoneFactory, ignoreChangesOutsid
                 const injector = inject(EnvironmentInjector);
                 let userErrorHandler;
                 return (e) => {
-                    zone.runOutsideAngular(() => {
-                        if (injector.destroyed && !userErrorHandler) {
-                            setTimeout(() => {
-                                throw e;
-                            });
-                        }
-                        else {
-                            userErrorHandler ??= injector.get(ErrorHandler);
-                            userErrorHandler.handleError(e);
-                        }
-                    });
+                    userErrorHandler ??= injector.get(ErrorHandler);
+                    zone.runOutsideAngular(() => userErrorHandler.handleError(e));
                 };
             },
         },
@@ -30078,6 +30088,7 @@ const LOCALE_ID = new InjectionToken(ngDevMode ? 'LocaleId' : '', {
  * In standalone apps:
  * ```ts
  * import { LOCALE_ID, ApplicationConfig } from '@angular/core';
+ * import { AppModule } from './app/app.module';
  *
  * const appConfig: ApplicationConfig = {
  *   providers: [{provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR' }]
@@ -30111,6 +30122,7 @@ const DEFAULT_CURRENCY_CODE = new InjectionToken(ngDevMode ? 'DefaultCurrencyCod
  * In standalone apps:
  * ```ts
  * import { LOCALE_ID, ApplicationConfig } from '@angular/core';
+ * import { AppModule } from './app/app.module';
  *
  * const appConfig: ApplicationConfig = {
  *   providers: [{provide: TRANSLATIONS, useValue: translations }]
@@ -30145,6 +30157,7 @@ const TRANSLATIONS = new InjectionToken(ngDevMode ? 'Translations' : '');
  * In standalone apps:
  * ```ts
  * import { LOCALE_ID, ApplicationConfig } from '@angular/core';
+ * import { AppModule } from './app/app.module';
  *
  * const appConfig: ApplicationConfig = {
  *   providers: [{provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }]
@@ -30757,4 +30770,4 @@ function getDebugNode(nativeNode) {
 }
 
 export { AFTER_RENDER_PHASES, ANIMATION_MODULE_TYPE, APP_BOOTSTRAP_LISTENER, APP_ID, APP_INITIALIZER, AcxChangeDetectionStrategy, AcxViewEncapsulation, AfterRenderImpl, AfterRenderManager, AfterRenderSequence, ApplicationInitStatus, ApplicationRef, Attribute, COMPILER_OPTIONS, CONTAINERS, CSP_NONCE, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionSchedulerImpl, ChangeDetectionStrategy, Compiler, CompilerFactory, Component, ComponentFactory, ComponentFactory$1, ComponentFactoryResolver$1 as ComponentFactoryResolver, ComponentRef$1 as ComponentRef, ComponentRef as ComponentRef$1, Console, DEFAULT_CURRENCY_CODE, DEFAULT_LOCALE_ID, DEFER_BLOCK_CONFIG, DEFER_BLOCK_DEPENDENCY_INTERCEPTOR, DEFER_BLOCK_ID, DEFER_BLOCK_SSR_ID_ATTRIBUTE, DEFER_BLOCK_STATE$1 as DEFER_BLOCK_STATE, DEFER_BLOCK_STATE as DEFER_BLOCK_STATE$1, DEFER_HYDRATE_TRIGGERS, DEFER_PARENT_BLOCK_ID, DEHYDRATED_BLOCK_REGISTRY, DISCONNECTED_NODES, DebugElement, DebugEventListener, DebugNode, DeferBlockBehavior, DeferBlockState, DehydratedBlockRegistry, Directive, ELEMENT_CONTAINERS, EVENT_REPLAY_ENABLED_DEFAULT, ElementRef, EnvironmentNgModuleRefAdapter, EventEmitter, Framework, Host, HostBinding, HostListener, HydrationStatus, I18N_DATA, IMAGE_CONFIG, IMAGE_CONFIG_DEFAULTS, IS_EVENT_REPLAY_ENABLED, IS_HYDRATION_DOM_REUSE_ENABLED, IS_I18N_HYDRATION_ENABLED, IS_INCREMENTAL_HYDRATION_ENABLED, Inject, Injectable, Input, JSACTION_BLOCK_ELEMENT_MAP, JSACTION_EVENT_CONTRACT, LContext, LOCALE_ID, LocaleDataIndex, MULTIPLIER, MissingTranslationStrategy, ModuleWithComponentFactories, NGH_ATTR_NAME, NGH_DATA_KEY, NGH_DEFER_BLOCKS_KEY, NODES, NOOP_AFTER_RENDER_REF, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, NO_CHANGE, NO_ERRORS_SCHEMA, NUM_ROOT_NODES, NgModule, NgModuleFactory, NgModuleFactory$1, NgModuleRef, NgModuleRef$1, NgProbeToken, NgZone, NoopNgZone, Optional, Output, PACKAGE_ROOT_URL, PLATFORM_ID, PLATFORM_INITIALIZER, PRESERVE_HOST_CONTENT, PROVIDED_NG_ZONE, Pipe, QueryList, ReflectionCapabilities, Renderer2, RendererFactory2, RendererStyleFlags2, SKIP_HYDRATION_ATTR_NAME, SSR_CONTENT_INTEGRITY_MARKER, Sanitizer, SecurityContext, Self, SimpleChange, SkipSelf, TEMPLATES, TEMPLATE_ID, TESTABILITY, TESTABILITY_GETTER, TRANSLATIONS, TRANSLATIONS_FORMAT, TemplateRef, Testability, TestabilityRegistry, TimerScheduler, TracingAction, TracingService, TransferState, Type, UseExhaustiveCheckNoChanges, ViewContainerRef, ViewEncapsulation, ViewRef, _sanitizeHtml, _sanitizeUrl, afterEveryRender, afterNextRender, allowSanitizationBypassAndThrow, angularCoreEnv, appendDeferBlocksToJSActionMap, asNativeElements, assertComponentDef, assertStandaloneComponentType, bypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript, bypassSanitizationTrustStyle, bypassSanitizationTrustUrl, calcPathForNode, checkNoChangesInternal, cleanupDehydratedViews, clearResolutionOfComponentResourcesQueue, collectNativeNodes, collectNativeNodesInLContainer, compileComponent, compileDirective, compileNgModule, compileNgModuleDefs, compilePipe, convertHydrateTriggersToJsAction, countBlocksSkippedByHydration, createEnvironmentInjector, createMultiResultQuerySignalFn, createNgModule, createNgModuleRef, createNgModuleRefWithProviders, createSingleResultOptionalQuerySignalFn, createSingleResultRequiredQuerySignalFn, depsTracker, devModeEqual, enableApplyRootElementTransformImpl, enableClaimDehydratedIcuCaseImpl, enableFindMatchingDehydratedViewImpl, enableLocateOrCreateContainerAnchorImpl, enableLocateOrCreateContainerRefImpl, enableLocateOrCreateElementContainerNodeImpl, enableLocateOrCreateElementNodeImpl, enableLocateOrCreateI18nNodeImpl, enableLocateOrCreateTextNodeImpl, enablePrepareI18nBlockForHydrationImpl, enableProfiling, enableRetrieveDeferBlockDataImpl, enableRetrieveHydrationInfoImpl, enableStashEventListenerImpl, findLocaleData, flushModuleScopingQueueAsMuchAsPossible, gatherDeferBlocksCommentNodes, generateStandaloneInDeclarationsError, getAsyncClassMetadataFn, getCompilerFacade, getDebugNode, getDeferBlocks$1 as getDeferBlocks, getDirectives, getDocument, getHostElement, getLContext, getLDeferBlockDetails, getLNodeForHydration, getLocaleCurrencyCode, getLocalePluralCase, getNgZone, getNgZoneOptions, getOrComputeI18nChildren, getRegisteredNgModuleType, getSanitizationBypassType, getTDeferBlockDetails, inputBinding, internalProvideZoneChangeDetection, invokeListeners, isBoundToModule, isComponentDefPendingResolution, isComponentResourceResolutionQueueEmpty, isDeferBlock, isDetachedByI18n, isDisconnectedNode, isI18nHydrationEnabled, isI18nHydrationSupportEnabled, isInSkipHydrationBlock, isIncrementalHydrationEnabled, isJsObject, isLetDeclaration, isListLikeIterable, isNgModule, isPromise, isSubscribable, isTNodeShape, isViewDirty, iterateListLike, makePropDecorator, makeStateKey, markForRefresh, noSideEffects, optionsReducer, outputBinding, patchComponentDefWithScope, performanceMarkFeature, processAndInitTriggers, processBlockData, processTextNodeBeforeSerialization, profiler, provideAppInitializer, provideNgReflectAttributes, provideZoneChangeDetection, provideZonelessChangeDetection, publishDefaultGlobalUtils, publishExternalGlobalUtil, publishSignalConfiguration, readHydrationInfo, readPatchedLView, registerLocaleData, registerNgModuleType, remove, removeListeners, renderDeferBlockState, resetCompiledComponents, resetJitOptions, resolveComponentResources, restoreComponentResolutionQueue, setAllowDuplicateNgModuleIdsForTest, setClassMetadata, setClassMetadataAsync, setDocument, setIsI18nHydrationSupportEnabled, setJSActionAttributes, setJitOptions, setLocaleId, setStashFn, setTestabilityGetter, sharedMapFunction, sharedStashFunction, transitiveScopesFor, triggerHydrationFromBlockName, triggerResourceLoading, trySerializeI18nBlock, twoWayBinding, unregisterAllLocaleData, unsupportedProjectionOfDomNodes, unwrapSafeValue, validateMatchingNode, validateNodeExists, verifySsrContentsIntegrity, ɵgetUnknownElementStrictMode, ɵgetUnknownPropertyStrictMode, ɵsetClassDebugInfo, ɵsetUnknownElementStrictMode, ɵsetUnknownPropertyStrictMode, ɵɵCopyDefinitionFeature, ɵɵExternalStylesFeature, ɵɵHostDirectivesFeature, ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature, ɵɵProvidersFeature, ɵɵadvance, ɵɵattachSourceLocations, ɵɵattribute, ɵɵclassMap, ɵɵclassProp, ɵɵcomponentInstance, ɵɵconditional, ɵɵconditionalBranchCreate, ɵɵconditionalCreate, ɵɵcontentQuery, ɵɵcontentQuerySignal, ɵɵdeclareLet, ɵɵdefer, ɵɵdeferEnableTimerScheduling, ɵɵdeferHydrateNever, ɵɵdeferHydrateOnHover, ɵɵdeferHydrateOnIdle, ɵɵdeferHydrateOnImmediate, ɵɵdeferHydrateOnInteraction, ɵɵdeferHydrateOnTimer, ɵɵdeferHydrateOnViewport, ɵɵdeferHydrateWhen, ɵɵdeferOnHover, ɵɵdeferOnIdle, ɵɵdeferOnImmediate, ɵɵdeferOnInteraction, ɵɵdeferOnTimer, ɵɵdeferOnViewport, ɵɵdeferPrefetchOnHover, ɵɵdeferPrefetchOnIdle, ɵɵdeferPrefetchOnImmediate, ɵɵdeferPrefetchOnInteraction, ɵɵdeferPrefetchOnTimer, ɵɵdeferPrefetchOnViewport, ɵɵdeferPrefetchWhen, ɵɵdeferWhen, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdefineNgModule, ɵɵdefinePipe, ɵɵdirectiveInject, ɵɵdomProperty, ɵɵelement, ɵɵelementContainer, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementStart, ɵɵgetComponentDepsFactory, ɵɵgetCurrentView, ɵɵgetInheritedFactory, ɵɵgetReplaceMetadataURL, ɵɵi18n, ɵɵi18nApply, ɵɵi18nAttributes, ɵɵi18nEnd, ɵɵi18nExp, ɵɵi18nPostprocess, ɵɵi18nStart, ɵɵinjectAttribute, ɵɵinterpolate, ɵɵinterpolate1, ɵɵinterpolate2, ɵɵinterpolate3, ɵɵinterpolate4, ɵɵinterpolate5, ɵɵinterpolate6, ɵɵinterpolate7, ɵɵinterpolate8, ɵɵinterpolateV, ɵɵinvalidFactory, ɵɵlistener, ɵɵloadQuery, ɵɵnextContext, ɵɵpipe, ɵɵpipeBind1, ɵɵpipeBind2, ɵɵpipeBind3, ɵɵpipeBind4, ɵɵpipeBindV, ɵɵprojection, ɵɵprojectionDef, ɵɵproperty, ɵɵpureFunction0, ɵɵpureFunction1, ɵɵpureFunction2, ɵɵpureFunction3, ɵɵpureFunction4, ɵɵpureFunction5, ɵɵpureFunction6, ɵɵpureFunction7, ɵɵpureFunction8, ɵɵpureFunctionV, ɵɵqueryAdvance, ɵɵqueryRefresh, ɵɵreadContextLet, ɵɵreference, ɵɵrepeater, ɵɵrepeaterCreate, ɵɵrepeaterTrackByIdentity, ɵɵrepeaterTrackByIndex, ɵɵreplaceMetadata, ɵɵresolveBody, ɵɵresolveDocument, ɵɵresolveWindow, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl, ɵɵsanitizeUrlOrResourceUrl, ɵɵsetComponentScope, ɵɵsetNgModuleScope, ɵɵstoreLet, ɵɵstyleMap, ɵɵstyleProp, ɵɵsyntheticHostListener, ɵɵsyntheticHostProperty, ɵɵtemplate, ɵɵtemplateRefExtractor, ɵɵtext, ɵɵtextInterpolate, ɵɵtextInterpolate1, ɵɵtextInterpolate2, ɵɵtextInterpolate3, ɵɵtextInterpolate4, ɵɵtextInterpolate5, ɵɵtextInterpolate6, ɵɵtextInterpolate7, ɵɵtextInterpolate8, ɵɵtextInterpolateV, ɵɵtrustConstantHtml, ɵɵtrustConstantResourceUrl, ɵɵtwoWayBindingSet, ɵɵtwoWayListener, ɵɵtwoWayProperty, ɵɵvalidateIframeAttribute, ɵɵviewQuery, ɵɵviewQuerySignal };
-//# sourceMappingURL=debug_node.mjs.map
+//# sourceMappingURL=debug_node-CGQXW8qF.mjs.map