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

package/fesm2022/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v19.2.0-next.1
+ * @license Angular v19.2.0-next.3
  * (c) 2010-2024 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -377,13 +377,11 @@ function stringify(token) {
  * @returns concatenated string.
  */
 function concatStringsWithSpace(before, after) {
-    return before == null || before === ''
-        ? after === null
-            ? ''
-            : after
-        : after == null || after === ''
-            ? before
-            : before + ' ' + after;
+    if (!before)
+        return after || '';
+    if (!after)
+        return before;
+    return `${before} ${after}`;
 }
 /**
  * Ellipses the string in the middle when longer than the max length
@@ -2902,6 +2900,7 @@ const ON_DESTROY_HOOKS = 21;
 const EFFECTS_TO_SCHEDULE = 22;
 const EFFECTS = 23;
 const REACTIVE_TEMPLATE_CONSUMER = 24;
+const AFTER_RENDER_SEQUENCES_TO_ADD = 25;
 /**
  * Size of LView's header. Necessary to adjust for it when setting slots.
  *
@@ -2909,7 +2908,7 @@ const REACTIVE_TEMPLATE_CONSUMER = 24;
  * instruction index into `LView` index. All other indexes should be in the `LView` index space and
  * there should be no need to refer to `HEADER_OFFSET` anywhere else.
  */
-const HEADER_OFFSET = 25;
+const HEADER_OFFSET = 26;
 
 /**
  * Special location which allows easy identification of type. If we have an array which was
@@ -3067,7 +3066,7 @@ function assertProjectionSlots(lView, errMessage) {
 function assertParentView(lView, errMessage) {
     assertDefined(lView, errMessage || "Component views should always have a parent view (component's host view)");
 }
-function assertNoDuplicateDirectives(directives) {
+function assertNoDuplicateDirectives$1(directives) {
     // The array needs at least two elements in order to have duplicates.
     if (directives.length < 2) {
         return;
@@ -3419,7 +3418,7 @@ function requiresRefreshOrTraversal(lView) {
  * parents above.
  */
 function updateAncestorTraversalFlagsOnAttach(lView) {
-    lView[ENVIRONMENT].changeDetectionScheduler?.notify(9 /* NotificationSource.ViewAttached */);
+    lView[ENVIRONMENT].changeDetectionScheduler?.notify(8 /* NotificationSource.ViewAttached */);
     if (lView[FLAGS] & 64 /* LViewFlags.Dirty */) {
         lView[FLAGS] |= 1024 /* LViewFlags.RefreshView */;
     }
@@ -4060,7 +4059,7 @@ function ɵɵnamespaceHTML() {
 function namespaceHTMLInternal() {
     instructionState.lFrame.currentNamespace = null;
 }
-function getNamespace$1() {
+function getNamespace() {
     return instructionState.lFrame.currentNamespace;
 }
 let _wasLastNodeCreated = true;
@@ -6162,7 +6161,7 @@ class PendingTasks {
                 return;
             }
             // Notifying the scheduler will hold application stability open until the next tick.
-            this.scheduler.notify(12 /* NotificationSource.PendingTaskRemoved */);
+            this.scheduler.notify(11 /* NotificationSource.PendingTaskRemoved */);
             this.internalPendingTasks.remove(taskId);
         };
     }
@@ -8656,6 +8655,23 @@ function assertNotInReactiveContext(debugFn, extraContext) {
     }
 }
 
+class ViewContext {
+    view;
+    node;
+    constructor(view, node) {
+        this.view = view;
+        this.node = node;
+    }
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static __NG_ELEMENT_ID__ = injectViewContext;
+}
+function injectViewContext() {
+    return new ViewContext(getLView(), getCurrentTNode());
+}
+
 /**
  * The phase to run an `afterRender` or `afterNextRender` callback in.
  *
@@ -8794,7 +8810,7 @@ class AfterRenderImpl {
             this.sequences.add(sequence);
         }
         if (this.deferredRegistrations.size > 0) {
-            this.scheduler.notify(8 /* NotificationSource.DeferredRenderHook */);
+            this.scheduler.notify(7 /* NotificationSource.RenderHook */);
         }
         this.deferredRegistrations.clear();
         if (hasSequencesToExecute) {
@@ -8802,16 +8818,27 @@ class AfterRenderImpl {
         }
     }
     register(sequence) {
-        if (!this.executing) {
-            this.sequences.add(sequence);
-            // Trigger an `ApplicationRef.tick()` if one is not already pending/running, because we have a
-            // new render hook that needs to run.
-            this.scheduler.notify(7 /* NotificationSource.RenderHook */);
+        const { view } = sequence;
+        if (view !== undefined) {
+            // Delay adding it to the manager, add it to the view instead.
+            (view[AFTER_RENDER_SEQUENCES_TO_ADD] ??= []).push(sequence);
+            // Mark the view for traversal to ensure we eventually schedule the afterNextRender.
+            markAncestorsForTraversal(view);
+            view[FLAGS] |= 8192 /* LViewFlags.HasChildViewsToRefresh */;
+        }
+        else if (!this.executing) {
+            this.addSequence(sequence);
         }
         else {
             this.deferredRegistrations.add(sequence);
         }
     }
+    addSequence(sequence) {
+        this.sequences.add(sequence);
+        // Trigger an `ApplicationRef.tick()` if one is not already pending/running, because we have a
+        // new render hook that needs to run.
+        this.scheduler.notify(7 /* NotificationSource.RenderHook */);
+    }
     unregister(sequence) {
         if (this.executing && this.sequences.has(sequence)) {
             // We can't remove an `AfterRenderSequence` in the middle of iteration.
@@ -8841,6 +8868,7 @@ class AfterRenderImpl {
 class AfterRenderSequence {
     impl;
     hooks;
+    view;
     once;
     snapshot;
     /**
@@ -8854,9 +8882,10 @@ class AfterRenderSequence {
      */
     pipelinedValue = undefined;
     unregisterOnDestroy;
-    constructor(impl, hooks, once, destroyRef, snapshot = null) {
+    constructor(impl, hooks, view, once, destroyRef, snapshot = null) {
         this.impl = impl;
         this.hooks = hooks;
+        this.view = view;
         this.once = once;
         this.snapshot = snapshot;
         this.unregisterOnDestroy = destroyRef?.onDestroy(() => this.destroy());
@@ -8874,6 +8903,10 @@ class AfterRenderSequence {
     destroy() {
         this.impl.unregister(this);
         this.unregisterOnDestroy?.();
+        const scheduled = this.view?.[AFTER_RENDER_SEQUENCES_TO_ADD];
+        if (scheduled) {
+            this.view[AFTER_RENDER_SEQUENCES_TO_ADD] = scheduled.filter((s) => s !== this);
+        }
     }
 }
 
@@ -8924,7 +8957,8 @@ function afterRenderImpl(callbackOrSpec, injector, options, once) {
     const tracing = injector.get(TracingService, null, { optional: true });
     const hooks = options?.phase ?? AfterRenderPhase.MixedReadWrite;
     const destroyRef = options?.manualCleanup !== true ? injector.get(DestroyRef) : null;
-    const sequence = new AfterRenderSequence(manager.impl, getHooks(callbackOrSpec, hooks), once, destroyRef, tracing?.snapshot(null));
+    const viewContext = injector.get(ViewContext, null, { optional: true });
+    const sequence = new AfterRenderSequence(manager.impl, getHooks(callbackOrSpec, hooks), viewContext?.view, once, destroyRef, tracing?.snapshot(null));
     manager.impl.register(sequence);
     return sequence;
 }
@@ -9396,9 +9430,11 @@ function getTriggerElement(triggerLView, triggerIndex) {
 function registerDomTrigger(initialLView, tNode, triggerIndex, walkUpTimes, registerFn, callback, type) {
     const injector = initialLView[INJECTOR];
     const zone = injector.get(NgZone);
+    let poll;
     function pollDomTrigger() {
         // If the initial view was destroyed, we don't need to do anything.
         if (isDestroyed(initialLView)) {
+            poll.destroy();
             return;
         }
         const lDetails = getLDeferBlockDetails(initialLView, tNode);
@@ -9406,14 +9442,16 @@ function registerDomTrigger(initialLView, tNode, triggerIndex, walkUpTimes, regi
         // If the block was loaded before the trigger was resolved, we don't need to do anything.
         if (renderedState !== DeferBlockInternalState.Initial &&
             renderedState !== DeferBlockState.Placeholder) {
+            poll.destroy();
             return;
         }
         const triggerLView = getTriggerLView(initialLView, tNode, walkUpTimes);
         // Keep polling until we resolve the trigger's LView.
         if (!triggerLView) {
-            afterNextRender({ read: pollDomTrigger }, { injector });
+            // Keep polling.
             return;
         }
+        poll.destroy();
         // It's possible that the trigger's view was destroyed before we resolved the trigger element.
         if (isDestroyed(triggerLView)) {
             return;
@@ -9440,7 +9478,7 @@ function registerDomTrigger(initialLView, tNode, triggerIndex, walkUpTimes, regi
         storeTriggerCleanupFn(type, lDetails, cleanup);
     }
     // Begin polling for the trigger.
-    afterNextRender({ read: pollDomTrigger }, { injector });
+    poll = afterRender({ read: pollDomTrigger }, { injector });
 }
 
 const DEFER_BLOCK_SSR_ID_ATTRIBUTE = 'ngb';
@@ -11648,14 +11686,6 @@ function getExpressionChangedErrorDetails(lView, bindingIndex, oldValue, newValu
     return { propName: undefined, oldValue, newValue };
 }
 
-/** Flags describing an input for a directive. */
-var InputFlags;
-(function (InputFlags) {
-    InputFlags[InputFlags["None"] = 0] = "None";
-    InputFlags[InputFlags["SignalBased"] = 1] = "SignalBased";
-    InputFlags[InputFlags["HasDecoratorInputTransform"] = 2] = "HasDecoratorInputTransform";
-})(InputFlags || (InputFlags = {}));
-
 /**
  * Returns an index of `classToSearch` in `className` taking token boundaries into account.
  *
@@ -12265,38 +12295,13 @@ function selectIndexInternal(tView, lView, index, checkNoChangesMode) {
     setSelectedIndex(index);
 }
 
-function ɵɵdirectiveInject(token, flags = InjectFlags.Default) {
-    const lView = getLView();
-    // Fall back to inject() if view hasn't been created. This situation can happen in tests
-    // if inject utilities are used before bootstrapping.
-    if (lView === null) {
-        // Verify that we will not get into infinite loop.
-        ngDevMode && assertInjectImplementationNotEqual(ɵɵdirectiveInject);
-        return ɵɵinject(token, flags);
-    }
-    const tNode = getCurrentTNode();
-    const value = getOrCreateInjectable(tNode, lView, resolveForwardRef(token), flags);
-    ngDevMode && emitInjectEvent(token, value, flags);
-    return value;
-}
-/**
- * Throws an error indicating that a factory function could not be generated by the compiler for a
- * particular class.
- *
- * This instruction allows the actual error message to be optimized away when ngDevMode is turned
- * off, saving bytes of generated code while still providing a good experience in dev mode.
- *
- * The name of the class is not mentioned here, but will be in the generated factory function name
- * and thus in the stack trace.
- *
- * @codeGenApi
- */
-function ɵɵinvalidFactory() {
-    const msg = ngDevMode
-        ? `This constructor was not compatible with Dependency Injection.`
-        : 'invalid';
-    throw new Error(msg);
-}
+/** Flags describing an input for a directive. */
+var InputFlags;
+(function (InputFlags) {
+    InputFlags[InputFlags["None"] = 0] = "None";
+    InputFlags[InputFlags["SignalBased"] = 1] = "SignalBased";
+    InputFlags[InputFlags["HasDecoratorInputTransform"] = 2] = "HasDecoratorInputTransform";
+})(InputFlags || (InputFlags = {}));
 
 function writeToDirectiveInput(def, instance, publicName, privateName, flags, value) {
     const prevConsumer = setActiveConsumer$1(null);
@@ -12364,34 +12369,6 @@ function createLView(parentLView, tView, context, flags, host, tHostNode, enviro
         tView.type == 2 /* TViewType.Embedded */ ? parentLView[DECLARATION_COMPONENT_VIEW] : lView;
     return lView;
 }
-/**
- * When elements are created dynamically after a view blueprint is created (e.g. through
- * i18nApply()), we need to adjust the blueprint for future
- * template passes.
- *
- * @param tView `TView` associated with `LView`
- * @param lView The `LView` containing the blueprint to adjust
- * @param numSlotsToAlloc The number of slots to alloc in the LView, should be >0
- * @param initialValue Initial value to store in blueprint
- */
-function allocExpando(tView, lView, numSlotsToAlloc, initialValue) {
-    if (numSlotsToAlloc === 0)
-        return -1;
-    if (ngDevMode) {
-        assertFirstCreatePass(tView);
-        assertSame(tView, lView[TVIEW], '`LView` must be associated with `TView`!');
-        assertEqual(tView.data.length, lView.length, 'Expecting LView to be same size as TView');
-        assertEqual(tView.data.length, tView.blueprint.length, 'Expecting Blueprint to be same size as TView');
-        assertFirstUpdatePass(tView);
-    }
-    const allocIdx = lView.length;
-    for (let i = 0; i < numSlotsToAlloc; i++) {
-        lView.push(initialValue);
-        tView.blueprint.push(initialValue);
-        tView.data.push(null);
-    }
-    return allocIdx;
-}
 function executeTemplate(tView, lView, templateFn, rf, context) {
     const prevSelectedIndex = getSelectedIndex();
     const isUpdatePhase = rf & 2 /* RenderFlags.Update */;
@@ -12604,106 +12581,6 @@ function applyRootElementTransformImpl(rootElement) {
 function enableApplyRootElementTransformImpl() {
     _applyRootElementTransformImpl = applyRootElementTransformImpl;
 }
-function captureNodeBindings(mode, aliasMap, directiveIndex, bindingsResult, hostDirectiveAliasMap) {
-    for (let publicName in aliasMap) {
-        if (!aliasMap.hasOwnProperty(publicName)) {
-            continue;
-        }
-        const value = aliasMap[publicName];
-        if (value === undefined) {
-            continue;
-        }
-        bindingsResult ??= {};
-        let internalName;
-        let inputFlags = InputFlags.None;
-        // For inputs, the value might be an array capturing additional
-        // input flags.
-        if (Array.isArray(value)) {
-            internalName = value[0];
-            inputFlags = value[1];
-        }
-        else {
-            internalName = value;
-        }
-        // If there are no host directive mappings, we want to remap using the alias map from the
-        // definition itself. If there is an alias map, it has two functions:
-        // 1. It serves as an allowlist of bindings that are exposed by the host directives. Only the
-        // ones inside the host directive map will be exposed on the host.
-        // 2. The public name of the property is aliased using the host directive alias map, rather
-        // than the alias map from the definition.
-        let finalPublicName = publicName;
-        if (hostDirectiveAliasMap !== null) {
-            // If there is no mapping, it's not part of the allowlist and this input/output
-            // is not captured and should be ignored.
-            if (!hostDirectiveAliasMap.hasOwnProperty(publicName)) {
-                continue;
-            }
-            finalPublicName = hostDirectiveAliasMap[publicName];
-        }
-        if (mode === 0 /* CaptureNodeBindingMode.Inputs */) {
-            addPropertyBinding(bindingsResult, directiveIndex, finalPublicName, internalName, inputFlags);
-        }
-        else {
-            addPropertyBinding(bindingsResult, directiveIndex, finalPublicName, internalName);
-        }
-    }
-    return bindingsResult;
-}
-function addPropertyBinding(bindings, directiveIndex, publicName, internalName, inputFlags) {
-    let values;
-    if (bindings.hasOwnProperty(publicName)) {
-        (values = bindings[publicName]).push(directiveIndex, internalName);
-    }
-    else {
-        values = bindings[publicName] = [directiveIndex, internalName];
-    }
-    if (inputFlags !== undefined) {
-        values.push(inputFlags);
-    }
-}
-/**
- * Initializes data structures required to work with directive inputs and outputs.
- * Initialization is done for all directives matched on a given TNode.
- */
-function initializeInputAndOutputAliases(tView, tNode, hostDirectiveDefinitionMap) {
-    ngDevMode && assertFirstCreatePass(tView);
-    const start = tNode.directiveStart;
-    const end = tNode.directiveEnd;
-    const tViewData = tView.data;
-    const tNodeAttrs = tNode.attrs;
-    const inputsFromAttrs = [];
-    let inputsStore = null;
-    let outputsStore = null;
-    for (let directiveIndex = start; directiveIndex < end; directiveIndex++) {
-        const directiveDef = tViewData[directiveIndex];
-        const aliasData = hostDirectiveDefinitionMap
-            ? hostDirectiveDefinitionMap.get(directiveDef)
-            : null;
-        const aliasedInputs = aliasData ? aliasData.inputs : null;
-        const aliasedOutputs = aliasData ? aliasData.outputs : null;
-        inputsStore = captureNodeBindings(0 /* CaptureNodeBindingMode.Inputs */, directiveDef.inputs, directiveIndex, inputsStore, aliasedInputs);
-        outputsStore = captureNodeBindings(1 /* CaptureNodeBindingMode.Outputs */, directiveDef.outputs, directiveIndex, outputsStore, aliasedOutputs);
-        // Do not use unbound attributes as inputs to structural directives, since structural
-        // directive inputs can only be set using microsyntax (e.g. `<div *dir="exp">`).
-        // TODO(FW-1930): microsyntax expressions may also contain unbound/static attributes, which
-        // should be set for inline templates.
-        const initialInputs = inputsStore !== null && tNodeAttrs !== null && !isInlineTemplate(tNode)
-            ? generateInitialInputs(inputsStore, directiveIndex, tNodeAttrs)
-            : null;
-        inputsFromAttrs.push(initialInputs);
-    }
-    if (inputsStore !== null) {
-        if (inputsStore.hasOwnProperty('class')) {
-            tNode.flags |= 8 /* TNodeFlags.hasClassInput */;
-        }
-        if (inputsStore.hasOwnProperty('style')) {
-            tNode.flags |= 16 /* TNodeFlags.hasStyleInput */;
-        }
-    }
-    tNode.initialInputs = inputsFromAttrs;
-    tNode.inputs = inputsStore;
-    tNode.outputs = outputsStore;
-}
 /**
  * Mapping between attributes names that don't correspond to their element property names.
  *
@@ -12804,126 +12681,6 @@ function setNgReflectProperties(lView, element, type, dataValue, value) {
         }
     }
 }
-/**
- * Resolve the matched directives on a node.
- */
-function resolveDirectives(tView, lView, tNode, localRefs) {
-    // Please make sure to have explicit type for `exportsMap`. Inferred type triggers bug in
-    // tsickle.
-    ngDevMode && assertFirstCreatePass(tView);
-    if (getBindingsEnabled()) {
-        const exportsMap = localRefs === null ? null : { '': -1 };
-        const matchedDirectiveDefs = findDirectiveDefMatches(tView, tNode);
-        if (matchedDirectiveDefs !== null) {
-            const [directiveDefs, hostDirectiveDefs] = resolveHostDirectives(tView, tNode, matchedDirectiveDefs);
-            initializeDirectives(tView, lView, tNode, directiveDefs, exportsMap, hostDirectiveDefs);
-        }
-        if (exportsMap)
-            cacheMatchingLocalNames(tNode, localRefs, exportsMap);
-    }
-    // Merge the template attrs last so that they have the highest priority.
-    tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, tNode.attrs);
-}
-/** Initializes the data structures necessary for a list of directives to be instantiated. */
-function initializeDirectives(tView, lView, tNode, directives, exportsMap, hostDirectiveDefs) {
-    ngDevMode && assertFirstCreatePass(tView);
-    // Publishes the directive types to DI so they can be injected. Needs to
-    // happen in a separate pass before the TNode flags have been initialized.
-    for (let i = 0; i < directives.length; i++) {
-        diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, lView), tView, directives[i].type);
-    }
-    initTNodeFlags(tNode, tView.data.length, directives.length);
-    // When the same token is provided by several directives on the same node, some rules apply in
-    // the viewEngine:
-    // - viewProviders have priority over providers
-    // - the last directive in NgModule.declarations has priority over the previous one
-    // So to match these rules, the order in which providers are added in the arrays is very
-    // important.
-    for (let i = 0; i < directives.length; i++) {
-        const def = directives[i];
-        if (def.providersResolver)
-            def.providersResolver(def);
-    }
-    let preOrderHooksFound = false;
-    let preOrderCheckHooksFound = false;
-    let directiveIdx = allocExpando(tView, lView, directives.length, null);
-    ngDevMode &&
-        assertSame(directiveIdx, tNode.directiveStart, 'TNode.directiveStart should point to just allocated space');
-    for (let i = 0; i < directives.length; i++) {
-        const def = directives[i];
-        // Merge the attrs in the order of matches. This assumes that the first directive is the
-        // component itself, so that the component has the least priority.
-        tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, def.hostAttrs);
-        configureViewWithDirective(tView, tNode, lView, directiveIdx, def);
-        saveNameToExportMap(directiveIdx, def, exportsMap);
-        if (def.contentQueries !== null)
-            tNode.flags |= 4 /* TNodeFlags.hasContentQuery */;
-        if (def.hostBindings !== null || def.hostAttrs !== null || def.hostVars !== 0)
-            tNode.flags |= 64 /* TNodeFlags.hasHostBindings */;
-        const lifeCycleHooks = def.type.prototype;
-        // Only push a node index into the preOrderHooks array if this is the first
-        // pre-order hook found on this node.
-        if (!preOrderHooksFound &&
-            (lifeCycleHooks.ngOnChanges || lifeCycleHooks.ngOnInit || lifeCycleHooks.ngDoCheck)) {
-            // We will push the actual hook function into this array later during dir instantiation.
-            // We cannot do it now because we must ensure hooks are registered in the same
-            // order that directives are created (i.e. injection order).
-            (tView.preOrderHooks ??= []).push(tNode.index);
-            preOrderHooksFound = true;
-        }
-        if (!preOrderCheckHooksFound && (lifeCycleHooks.ngOnChanges || lifeCycleHooks.ngDoCheck)) {
-            (tView.preOrderCheckHooks ??= []).push(tNode.index);
-            preOrderCheckHooksFound = true;
-        }
-        directiveIdx++;
-    }
-    initializeInputAndOutputAliases(tView, tNode, hostDirectiveDefs);
-}
-/**
- * Add `hostBindings` to the `TView.hostBindingOpCodes`.
- *
- * @param tView `TView` to which the `hostBindings` should be added.
- * @param tNode `TNode` the element which contains the directive
- * @param directiveIdx Directive index in view.
- * @param directiveVarsIdx Where will the directive's vars be stored
- * @param def `ComponentDef`/`DirectiveDef`, which contains the `hostVars`/`hostBindings` to add.
- */
-function registerHostBindingOpCodes(tView, tNode, directiveIdx, directiveVarsIdx, def) {
-    ngDevMode && assertFirstCreatePass(tView);
-    const hostBindings = def.hostBindings;
-    if (hostBindings) {
-        let hostBindingOpCodes = tView.hostBindingOpCodes;
-        if (hostBindingOpCodes === null) {
-            hostBindingOpCodes = tView.hostBindingOpCodes = [];
-        }
-        const elementIndx = ~tNode.index;
-        if (lastSelectedElementIdx(hostBindingOpCodes) != elementIndx) {
-            // Conditionally add select element so that we are more efficient in execution.
-            // NOTE: this is strictly not necessary and it trades code size for runtime perf.
-            // (We could just always add it.)
-            hostBindingOpCodes.push(elementIndx);
-        }
-        hostBindingOpCodes.push(directiveIdx, directiveVarsIdx, hostBindings);
-    }
-}
-/**
- * Returns the last selected element index in the `HostBindingOpCodes`
- *
- * For perf reasons we don't need to update the selected element index in `HostBindingOpCodes` only
- * if it changes. This method returns the last index (or '0' if not found.)
- *
- * Selected element index are only the ones which are negative.
- */
-function lastSelectedElementIdx(hostBindingOpCodes) {
-    let i = hostBindingOpCodes.length;
-    while (i > 0) {
-        const value = hostBindingOpCodes[--i];
-        if (typeof value === 'number' && value < 0) {
-            return value;
-        }
-    }
-    return 0;
-}
 /**
  * Instantiate all the directives that were previously resolved on the current node.
  */
@@ -13017,121 +12774,6 @@ function findDirectiveDefMatches(tView, tNode) {
     }
     return matches;
 }
-function resolveHostDirectives(tView, tNode, matches) {
-    const allDirectiveDefs = [];
-    let hostDirectiveDefs = null;
-    for (const def of matches) {
-        if (def.findHostDirectiveDefs !== null) {
-            // TODO(pk): probably could return matches instead of taking in an array to fill in?
-            hostDirectiveDefs ??= new Map();
-            // Components are inserted at the front of the matches array so that their lifecycle
-            // hooks run before any directive lifecycle hooks. This appears to be for ViewEngine
-            // compatibility. This logic doesn't make sense with host directives, because it
-            // would allow the host directives to undo any overrides the host may have made.
-            // To handle this case, the host directives of components are inserted at the beginning
-            // of the array, followed by the component. As such, the insertion order is as follows:
-            // 1. Host directives belonging to the selector-matched component.
-            // 2. Selector-matched component.
-            // 3. Host directives belonging to selector-matched directives.
-            // 4. Selector-matched directives.
-            def.findHostDirectiveDefs(def, allDirectiveDefs, hostDirectiveDefs);
-        }
-        if (isComponentDef(def)) {
-            allDirectiveDefs.push(def);
-            markAsComponentHost(tView, tNode, allDirectiveDefs.length - 1);
-        }
-    }
-    if (isComponentHost(tNode)) {
-        allDirectiveDefs.push(...matches.slice(1));
-    }
-    else {
-        allDirectiveDefs.push(...matches);
-    }
-    if (ngDevMode) {
-        assertNoDuplicateDirectives(allDirectiveDefs);
-    }
-    return [allDirectiveDefs, hostDirectiveDefs];
-}
-/**
- * Marks a given TNode as a component's host. This consists of:
- * - setting the component offset on the TNode.
- * - storing index of component's host element so it will be queued for view refresh during CD.
- */
-function markAsComponentHost(tView, hostTNode, componentOffset) {
-    ngDevMode && assertFirstCreatePass(tView);
-    ngDevMode && assertGreaterThan(componentOffset, -1, 'componentOffset must be great than -1');
-    hostTNode.componentOffset = componentOffset;
-    (tView.components ??= []).push(hostTNode.index);
-}
-/** Caches local names and their matching directive indices for query and template lookups. */
-function cacheMatchingLocalNames(tNode, localRefs, exportsMap) {
-    if (localRefs) {
-        const localNames = (tNode.localNames = []);
-        // Local names must be stored in tNode in the same order that localRefs are defined
-        // in the template to ensure the data is loaded in the same slots as their refs
-        // in the template (for template queries).
-        for (let i = 0; i < localRefs.length; i += 2) {
-            const index = exportsMap[localRefs[i + 1]];
-            if (index == null)
-                throw new RuntimeError(-301 /* RuntimeErrorCode.EXPORT_NOT_FOUND */, ngDevMode && `Export of name '${localRefs[i + 1]}' not found!`);
-            localNames.push(localRefs[i], index);
-        }
-    }
-}
-/**
- * Builds up an export map as directives are created, so local refs can be quickly mapped
- * to their directive instances.
- */
-function saveNameToExportMap(directiveIdx, def, exportsMap) {
-    if (exportsMap) {
-        if (def.exportAs) {
-            for (let i = 0; i < def.exportAs.length; i++) {
-                exportsMap[def.exportAs[i]] = directiveIdx;
-            }
-        }
-        if (isComponentDef(def))
-            exportsMap[''] = directiveIdx;
-    }
-}
-/**
- * Initializes the flags on the current node, setting all indices to the initial index,
- * the directive count to 0, and adding the isComponent flag.
- * @param index the initial index
- */
-function initTNodeFlags(tNode, index, numberOfDirectives) {
-    ngDevMode &&
-        assertNotEqual(numberOfDirectives, tNode.directiveEnd - tNode.directiveStart, 'Reached the max number of directives');
-    tNode.flags |= 1 /* TNodeFlags.isDirectiveHost */;
-    // When the first directive is created on a node, save the index
-    tNode.directiveStart = index;
-    tNode.directiveEnd = index + numberOfDirectives;
-    tNode.providerIndexes = index;
-}
-/**
- * Setup directive for instantiation.
- *
- * We need to create a `NodeInjectorFactory` which is then inserted in both the `Blueprint` as well
- * as `LView`. `TView` gets the `DirectiveDef`.
- *
- * @param tView `TView`
- * @param tNode `TNode`
- * @param lView `LView`
- * @param directiveIndex Index where the directive will be stored in the Expando.
- * @param def `DirectiveDef`
- */
-function configureViewWithDirective(tView, tNode, lView, directiveIndex, def) {
-    ngDevMode &&
-        assertGreaterThanOrEqual(directiveIndex, HEADER_OFFSET, 'Must be in Expando section');
-    tView.data[directiveIndex] = def;
-    const directiveFactory = def.factory || (def.factory = getFactoryDef(def.type, true));
-    // Even though `directiveFactory` will already be using `ɵɵdirectiveInject` in its generated code,
-    // we also want to support `inject()` directly from the directive constructor context so we set
-    // `ɵɵdirectiveInject` as the inject implementation here too.
-    const nodeInjectorFactory = new NodeInjectorFactory(directiveFactory, isComponentDef(def), ɵɵdirectiveInject);
-    tView.blueprint[directiveIndex] = nodeInjectorFactory;
-    lView[directiveIndex] = nodeInjectorFactory;
-    registerHostBindingOpCodes(tView, tNode, directiveIndex, allocExpando(tView, lView, def.hostVars, NO_CHANGE), def);
-}
 /**
  * Gets the initial set of LView flags based on the component definition that the LView represents.
  * @param def Component definition from which to determine the flags.
@@ -13203,58 +12845,6 @@ function setInputsFromAttrs(lView, directiveIndex, instance, def, tNode, initial
         }
     }
 }
-/**
- * Generates initialInputData for a node and stores it in the template's static storage
- * so subsequent template invocations don't have to recalculate it.
- *
- * initialInputData is an array containing values that need to be set as input properties
- * for directives on this node, but only once on creation. We need this array to support
- * the case where you set an @Input property of a directive using attribute-like syntax.
- * e.g. if you have a `name` @Input, you can set it once like this:
- *
- * <my-component name="Bess"></my-component>
- *
- * @param inputs Input alias map that was generated from the directive def inputs.
- * @param directiveIndex Index of the directive that is currently being processed.
- * @param attrs Static attrs on this node.
- */
-function generateInitialInputs(inputs, directiveIndex, attrs) {
-    let inputsToStore = null;
-    let i = 0;
-    while (i < attrs.length) {
-        const attrName = attrs[i];
-        if (attrName === 0 /* AttributeMarker.NamespaceURI */) {
-            // We do not allow inputs on namespaced attributes.
-            i += 4;
-            continue;
-        }
-        else if (attrName === 5 /* AttributeMarker.ProjectAs */) {
-            // Skip over the `ngProjectAs` value.
-            i += 2;
-            continue;
-        }
-        // If we hit any other attribute markers, we're done anyway. None of those are valid inputs.
-        if (typeof attrName === 'number')
-            break;
-        if (inputs.hasOwnProperty(attrName)) {
-            if (inputsToStore === null)
-                inputsToStore = [];
-            // Find the input's public name from the input store. Note that we can be found easier
-            // through the directive def, but we want to do it using the inputs store so that it can
-            // account for host directive aliases.
-            const inputConfig = inputs[attrName];
-            for (let j = 0; j < inputConfig.length; j += 3) {
-                if (inputConfig[j] === directiveIndex) {
-                    inputsToStore.push(attrName, inputConfig[j + 1], inputConfig[j + 2], attrs[i + 1]);
-                    // A directive can't have multiple inputs with the same name so we can break here.
-                    break;
-                }
-            }
-        }
-        i += 2;
-    }
-    return inputsToStore;
-}
 //////////////////////////
 //// ViewContainer & View
 //////////////////////////
@@ -13653,7 +13243,7 @@ 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(10 /* NotificationSource.ViewDetachedFromDOM */);
+    lView[ENVIRONMENT].changeDetectionScheduler?.notify(9 /* NotificationSource.ViewDetachedFromDOM */);
     applyView(tView, lView, lView[RENDERER], 2 /* WalkTNodeTreeAction.Detach */, null, null);
 }
 /**
@@ -14543,6 +14133,15 @@ function collectNativeNodesInLContainer(lContainer, result) {
     }
 }
 
+function addAfterRenderSequencesForView(lView) {
+    if (lView[AFTER_RENDER_SEQUENCES_TO_ADD] !== null) {
+        for (const sequence of lView[AFTER_RENDER_SEQUENCES_TO_ADD]) {
+            sequence.impl.addSequence(sequence);
+        }
+        lView[AFTER_RENDER_SEQUENCES_TO_ADD].length = 0;
+    }
+}
+
 let freeConsumers = [];
 /**
  * Create a new template consumer pointing at the specified LView.
@@ -14888,6 +14487,7 @@ function refreshView(tView, lView, templateFn, context) {
         // no changes cycle, the component would be not be dirty for the next update pass. This would
         // be different in production mode where the component dirty state is not reset.
         if (!isInCheckNoChangesPass) {
+            addAfterRenderSequencesForView(lView);
             lView[FLAGS] &= ~(64 /* LViewFlags.Dirty */ | 8 /* LViewFlags.FirstLViewPass */);
         }
     }
@@ -15005,12 +14605,17 @@ function detectChangesInView(lView, mode) {
         refreshView(tView, lView, tView.template, lView[CONTEXT]);
     }
     else if (flags & 8192 /* LViewFlags.HasChildViewsToRefresh */) {
-        runEffectsInView(lView);
+        if (!isInCheckNoChangesPass) {
+            runEffectsInView(lView);
+        }
         detectChangesInEmbeddedViews(lView, 1 /* ChangeDetectionMode.Targeted */);
         const components = tView.components;
         if (components !== null) {
             detectChangesInChildComponents(lView, components, 1 /* ChangeDetectionMode.Targeted */);
         }
+        if (!isInCheckNoChangesPass) {
+            addAfterRenderSequencesForView(lView);
+        }
     }
 }
 /** Refreshes child components in the current view (update mode). */
@@ -17793,6 +17398,492 @@ function computeStaticStyling(tNode, attrs, writeToHost) {
     writeToHost ? (tNode.classes = classes) : (tNode.classesWithoutHost = classes);
 }
 
+function ɵɵdirectiveInject(token, flags = InjectFlags.Default) {
+    const lView = getLView();
+    // Fall back to inject() if view hasn't been created. This situation can happen in tests
+    // if inject utilities are used before bootstrapping.
+    if (lView === null) {
+        // Verify that we will not get into infinite loop.
+        ngDevMode && assertInjectImplementationNotEqual(ɵɵdirectiveInject);
+        return ɵɵinject(token, flags);
+    }
+    const tNode = getCurrentTNode();
+    const value = getOrCreateInjectable(tNode, lView, resolveForwardRef(token), flags);
+    ngDevMode && emitInjectEvent(token, value, flags);
+    return value;
+}
+/**
+ * Throws an error indicating that a factory function could not be generated by the compiler for a
+ * particular class.
+ *
+ * This instruction allows the actual error message to be optimized away when ngDevMode is turned
+ * off, saving bytes of generated code while still providing a good experience in dev mode.
+ *
+ * The name of the class is not mentioned here, but will be in the generated factory function name
+ * and thus in the stack trace.
+ *
+ * @codeGenApi
+ */
+function ɵɵinvalidFactory() {
+    const msg = ngDevMode
+        ? `This constructor was not compatible with Dependency Injection.`
+        : 'invalid';
+    throw new Error(msg);
+}
+
+/**
+ * When elements are created dynamically after a view blueprint is created (e.g. through
+ * i18nApply()), we need to adjust the blueprint for future template passes.
+ *
+ * @param tView `TView` associated with `LView`
+ * @param lView The `LView` containing the blueprint to adjust
+ * @param numSlotsToAlloc The number of slots to alloc in the LView, should be >0
+ * @param initialValue Initial value to store in blueprint
+ */
+function allocExpando(tView, lView, numSlotsToAlloc, initialValue) {
+    if (numSlotsToAlloc === 0)
+        return -1;
+    if (ngDevMode) {
+        assertFirstCreatePass(tView);
+        assertSame(tView, lView[TVIEW], '`LView` must be associated with `TView`!');
+        assertEqual(tView.data.length, lView.length, 'Expecting LView to be same size as TView');
+        assertEqual(tView.data.length, tView.blueprint.length, 'Expecting Blueprint to be same size as TView');
+        assertFirstUpdatePass(tView);
+    }
+    const allocIdx = lView.length;
+    for (let i = 0; i < numSlotsToAlloc; i++) {
+        lView.push(initialValue);
+        tView.blueprint.push(initialValue);
+        tView.data.push(null);
+    }
+    return allocIdx;
+}
+
+/**
+ * Resolve the matched directives on a node.
+ */
+function resolveDirectives(tView, lView, tNode, localRefs, directiveMatcher) {
+    // Please make sure to have explicit type for `exportsMap`. Inferred type triggers bug in
+    // tsickle.
+    ngDevMode && assertFirstCreatePass(tView);
+    const exportsMap = localRefs === null ? null : { '': -1 };
+    const matchedDirectiveDefs = directiveMatcher(tView, tNode);
+    if (matchedDirectiveDefs !== null) {
+        const [directiveDefs, hostDirectiveDefs] = resolveHostDirectives(tView, tNode, matchedDirectiveDefs);
+        initializeDirectives(tView, lView, tNode, directiveDefs, exportsMap, hostDirectiveDefs);
+    }
+    if (exportsMap !== null && localRefs !== null) {
+        cacheMatchingLocalNames(tNode, localRefs, exportsMap);
+    }
+}
+/** Caches local names and their matching directive indices for query and template lookups. */
+function cacheMatchingLocalNames(tNode, localRefs, exportsMap) {
+    const localNames = (tNode.localNames = []);
+    // Local names must be stored in tNode in the same order that localRefs are defined
+    // in the template to ensure the data is loaded in the same slots as their refs
+    // in the template (for template queries).
+    for (let i = 0; i < localRefs.length; i += 2) {
+        const index = exportsMap[localRefs[i + 1]];
+        if (index == null)
+            throw new RuntimeError(-301 /* RuntimeErrorCode.EXPORT_NOT_FOUND */, ngDevMode && `Export of name '${localRefs[i + 1]}' not found!`);
+        localNames.push(localRefs[i], index);
+    }
+}
+function resolveHostDirectives(tView, tNode, matches) {
+    const allDirectiveDefs = [];
+    let hostDirectiveDefs = null;
+    for (const def of matches) {
+        if (def.findHostDirectiveDefs !== null) {
+            // TODO(pk): probably could return matches instead of taking in an array to fill in?
+            hostDirectiveDefs ??= new Map();
+            // Components are inserted at the front of the matches array so that their lifecycle
+            // hooks run before any directive lifecycle hooks. This appears to be for ViewEngine
+            // compatibility. This logic doesn't make sense with host directives, because it
+            // would allow the host directives to undo any overrides the host may have made.
+            // To handle this case, the host directives of components are inserted at the beginning
+            // of the array, followed by the component. As such, the insertion order is as follows:
+            // 1. Host directives belonging to the selector-matched component.
+            // 2. Selector-matched component.
+            // 3. Host directives belonging to selector-matched directives.
+            // 4. Selector-matched directives.
+            def.findHostDirectiveDefs(def, allDirectiveDefs, hostDirectiveDefs);
+        }
+        if (isComponentDef(def)) {
+            allDirectiveDefs.push(def);
+            markAsComponentHost(tView, tNode, allDirectiveDefs.length - 1);
+        }
+    }
+    if (isComponentHost(tNode)) {
+        allDirectiveDefs.push(...matches.slice(1));
+    }
+    else {
+        allDirectiveDefs.push(...matches);
+    }
+    if (ngDevMode) {
+        assertNoDuplicateDirectives(allDirectiveDefs);
+    }
+    return [allDirectiveDefs, hostDirectiveDefs];
+}
+/**
+ * Marks a given TNode as a component's host. This consists of:
+ * - setting the component offset on the TNode.
+ * - storing index of component's host element so it will be queued for view refresh during CD.
+ */
+function markAsComponentHost(tView, hostTNode, componentOffset) {
+    ngDevMode && assertFirstCreatePass(tView);
+    ngDevMode && assertGreaterThan(componentOffset, -1, 'componentOffset must be great than -1');
+    hostTNode.componentOffset = componentOffset;
+    (tView.components ??= []).push(hostTNode.index);
+}
+/** Initializes the data structures necessary for a list of directives to be instantiated. */
+function initializeDirectives(tView, lView, tNode, directives, exportsMap, hostDirectiveDefs) {
+    ngDevMode && assertFirstCreatePass(tView);
+    // Publishes the directive types to DI so they can be injected. Needs to
+    // happen in a separate pass before the TNode flags have been initialized.
+    for (let i = 0; i < directives.length; i++) {
+        diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, lView), tView, directives[i].type);
+    }
+    initTNodeFlags(tNode, tView.data.length, directives.length);
+    // When the same token is provided by several directives on the same node, some rules apply in
+    // the viewEngine:
+    // - viewProviders have priority over providers
+    // - the last directive in NgModule.declarations has priority over the previous one
+    // So to match these rules, the order in which providers are added in the arrays is very
+    // important.
+    for (let i = 0; i < directives.length; i++) {
+        const def = directives[i];
+        if (def.providersResolver)
+            def.providersResolver(def);
+    }
+    let preOrderHooksFound = false;
+    let preOrderCheckHooksFound = false;
+    let directiveIdx = allocExpando(tView, lView, directives.length, null);
+    ngDevMode &&
+        assertSame(directiveIdx, tNode.directiveStart, 'TNode.directiveStart should point to just allocated space');
+    for (let i = 0; i < directives.length; i++) {
+        const def = directives[i];
+        // Merge the attrs in the order of matches. This assumes that the first directive is the
+        // component itself, so that the component has the least priority.
+        tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, def.hostAttrs);
+        configureViewWithDirective(tView, tNode, lView, directiveIdx, def);
+        saveNameToExportMap(directiveIdx, def, exportsMap);
+        if (def.contentQueries !== null)
+            tNode.flags |= 4 /* TNodeFlags.hasContentQuery */;
+        if (def.hostBindings !== null || def.hostAttrs !== null || def.hostVars !== 0)
+            tNode.flags |= 64 /* TNodeFlags.hasHostBindings */;
+        const lifeCycleHooks = def.type.prototype;
+        // Only push a node index into the preOrderHooks array if this is the first
+        // pre-order hook found on this node.
+        if (!preOrderHooksFound &&
+            (lifeCycleHooks.ngOnChanges || lifeCycleHooks.ngOnInit || lifeCycleHooks.ngDoCheck)) {
+            // We will push the actual hook function into this array later during dir instantiation.
+            // We cannot do it now because we must ensure hooks are registered in the same
+            // order that directives are created (i.e. injection order).
+            (tView.preOrderHooks ??= []).push(tNode.index);
+            preOrderHooksFound = true;
+        }
+        if (!preOrderCheckHooksFound && (lifeCycleHooks.ngOnChanges || lifeCycleHooks.ngDoCheck)) {
+            (tView.preOrderCheckHooks ??= []).push(tNode.index);
+            preOrderCheckHooksFound = true;
+        }
+        directiveIdx++;
+    }
+    initializeInputAndOutputAliases(tView, tNode, hostDirectiveDefs);
+}
+/**
+ * Initializes data structures required to work with directive inputs and outputs.
+ * Initialization is done for all directives matched on a given TNode.
+ */
+function initializeInputAndOutputAliases(tView, tNode, hostDirectiveDefinitionMap) {
+    ngDevMode && assertFirstCreatePass(tView);
+    const start = tNode.directiveStart;
+    const end = tNode.directiveEnd;
+    const tViewData = tView.data;
+    const tNodeAttrs = tNode.attrs;
+    const inputsFromAttrs = [];
+    let inputsStore = null;
+    let outputsStore = null;
+    for (let directiveIndex = start; directiveIndex < end; directiveIndex++) {
+        const directiveDef = tViewData[directiveIndex];
+        const aliasData = hostDirectiveDefinitionMap
+            ? hostDirectiveDefinitionMap.get(directiveDef)
+            : null;
+        const aliasedInputs = aliasData ? aliasData.inputs : null;
+        const aliasedOutputs = aliasData ? aliasData.outputs : null;
+        inputsStore = captureNodeBindings(0 /* CaptureNodeBindingMode.Inputs */, directiveDef.inputs, directiveIndex, inputsStore, aliasedInputs);
+        outputsStore = captureNodeBindings(1 /* CaptureNodeBindingMode.Outputs */, directiveDef.outputs, directiveIndex, outputsStore, aliasedOutputs);
+        // Do not use unbound attributes as inputs to structural directives, since structural
+        // directive inputs can only be set using microsyntax (e.g. `<div *dir="exp">`).
+        const initialInputs = inputsStore !== null && tNodeAttrs !== null && !isInlineTemplate(tNode)
+            ? generateInitialInputs(inputsStore, directiveIndex, tNodeAttrs)
+            : null;
+        inputsFromAttrs.push(initialInputs);
+    }
+    if (inputsStore !== null) {
+        if (inputsStore.hasOwnProperty('class')) {
+            tNode.flags |= 8 /* TNodeFlags.hasClassInput */;
+        }
+        if (inputsStore.hasOwnProperty('style')) {
+            tNode.flags |= 16 /* TNodeFlags.hasStyleInput */;
+        }
+    }
+    tNode.initialInputs = inputsFromAttrs;
+    tNode.inputs = inputsStore;
+    tNode.outputs = outputsStore;
+}
+function captureNodeBindings(mode, aliasMap, directiveIndex, bindingsResult, hostDirectiveAliasMap) {
+    for (let publicName in aliasMap) {
+        if (!aliasMap.hasOwnProperty(publicName)) {
+            continue;
+        }
+        const value = aliasMap[publicName];
+        if (value === undefined) {
+            continue;
+        }
+        bindingsResult ??= {};
+        let internalName;
+        let inputFlags = InputFlags.None;
+        // For inputs, the value might be an array capturing additional
+        // input flags.
+        if (Array.isArray(value)) {
+            internalName = value[0];
+            inputFlags = value[1];
+        }
+        else {
+            internalName = value;
+        }
+        // If there are no host directive mappings, we want to remap using the alias map from the
+        // definition itself. If there is an alias map, it has two functions:
+        // 1. It serves as an allowlist of bindings that are exposed by the host directives. Only the
+        // ones inside the host directive map will be exposed on the host.
+        // 2. The public name of the property is aliased using the host directive alias map, rather
+        // than the alias map from the definition.
+        let finalPublicName = publicName;
+        if (hostDirectiveAliasMap !== null) {
+            // If there is no mapping, it's not part of the allowlist and this input/output
+            // is not captured and should be ignored.
+            if (!hostDirectiveAliasMap.hasOwnProperty(publicName)) {
+                continue;
+            }
+            finalPublicName = hostDirectiveAliasMap[publicName];
+        }
+        if (mode === 0 /* CaptureNodeBindingMode.Inputs */) {
+            addPropertyBinding(bindingsResult, directiveIndex, finalPublicName, internalName, inputFlags);
+        }
+        else {
+            addPropertyBinding(bindingsResult, directiveIndex, finalPublicName, internalName);
+        }
+    }
+    return bindingsResult;
+}
+function addPropertyBinding(bindings, directiveIndex, publicName, internalName, inputFlags) {
+    let values;
+    if (bindings.hasOwnProperty(publicName)) {
+        (values = bindings[publicName]).push(directiveIndex, internalName);
+    }
+    else {
+        values = bindings[publicName] = [directiveIndex, internalName];
+    }
+    if (inputFlags !== undefined) {
+        values.push(inputFlags);
+    }
+}
+/**
+ * Generates initialInputData for a node and stores it in the template's static storage
+ * so subsequent template invocations don't have to recalculate it.
+ *
+ * initialInputData is an array containing values that need to be set as input properties
+ * for directives on this node, but only once on creation. We need this array to support
+ * the case where you set an @Input property of a directive using attribute-like syntax.
+ * e.g. if you have a `name` @Input, you can set it once like this:
+ *
+ * <my-component name="Bess"></my-component>
+ *
+ * @param inputs Input alias map that was generated from the directive def inputs.
+ * @param directiveIndex Index of the directive that is currently being processed.
+ * @param attrs Static attrs on this node.
+ */
+function generateInitialInputs(inputs, directiveIndex, attrs) {
+    let inputsToStore = null;
+    let i = 0;
+    while (i < attrs.length) {
+        const attrName = attrs[i];
+        if (attrName === 0 /* AttributeMarker.NamespaceURI */) {
+            // We do not allow inputs on namespaced attributes.
+            i += 4;
+            continue;
+        }
+        else if (attrName === 5 /* AttributeMarker.ProjectAs */) {
+            // Skip over the `ngProjectAs` value.
+            i += 2;
+            continue;
+        }
+        // If we hit any other attribute markers, we're done anyway. None of those are valid inputs.
+        if (typeof attrName === 'number')
+            break;
+        if (inputs.hasOwnProperty(attrName)) {
+            if (inputsToStore === null)
+                inputsToStore = [];
+            // Find the input's public name from the input store. Note that we can be found easier
+            // through the directive def, but we want to do it using the inputs store so that it can
+            // account for host directive aliases.
+            const inputConfig = inputs[attrName];
+            for (let j = 0; j < inputConfig.length; j += 3) {
+                if (inputConfig[j] === directiveIndex) {
+                    inputsToStore.push(attrName, inputConfig[j + 1], inputConfig[j + 2], attrs[i + 1]);
+                    // A directive can't have multiple inputs with the same name so we can break here.
+                    break;
+                }
+            }
+        }
+        i += 2;
+    }
+    return inputsToStore;
+}
+/**
+ * Setup directive for instantiation.
+ *
+ * We need to create a `NodeInjectorFactory` which is then inserted in both the `Blueprint` as well
+ * as `LView`. `TView` gets the `DirectiveDef`.
+ *
+ * @param tView `TView`
+ * @param tNode `TNode`
+ * @param lView `LView`
+ * @param directiveIndex Index where the directive will be stored in the Expando.
+ * @param def `DirectiveDef`
+ */
+function configureViewWithDirective(tView, tNode, lView, directiveIndex, def) {
+    ngDevMode &&
+        assertGreaterThanOrEqual(directiveIndex, HEADER_OFFSET, 'Must be in Expando section');
+    tView.data[directiveIndex] = def;
+    const directiveFactory = def.factory || (def.factory = getFactoryDef(def.type, true));
+    // Even though `directiveFactory` will already be using `ɵɵdirectiveInject` in its generated code,
+    // we also want to support `inject()` directly from the directive constructor context so we set
+    // `ɵɵdirectiveInject` as the inject implementation here too.
+    const nodeInjectorFactory = new NodeInjectorFactory(directiveFactory, isComponentDef(def), ɵɵdirectiveInject);
+    tView.blueprint[directiveIndex] = nodeInjectorFactory;
+    lView[directiveIndex] = nodeInjectorFactory;
+    registerHostBindingOpCodes(tView, tNode, directiveIndex, allocExpando(tView, lView, def.hostVars, NO_CHANGE), def);
+}
+/**
+ * Add `hostBindings` to the `TView.hostBindingOpCodes`.
+ *
+ * @param tView `TView` to which the `hostBindings` should be added.
+ * @param tNode `TNode` the element which contains the directive
+ * @param directiveIdx Directive index in view.
+ * @param directiveVarsIdx Where will the directive's vars be stored
+ * @param def `ComponentDef`/`DirectiveDef`, which contains the `hostVars`/`hostBindings` to add.
+ */
+function registerHostBindingOpCodes(tView, tNode, directiveIdx, directiveVarsIdx, def) {
+    ngDevMode && assertFirstCreatePass(tView);
+    const hostBindings = def.hostBindings;
+    if (hostBindings) {
+        let hostBindingOpCodes = tView.hostBindingOpCodes;
+        if (hostBindingOpCodes === null) {
+            hostBindingOpCodes = tView.hostBindingOpCodes = [];
+        }
+        const elementIndx = ~tNode.index;
+        if (lastSelectedElementIdx(hostBindingOpCodes) != elementIndx) {
+            // Conditionally add select element so that we are more efficient in execution.
+            // NOTE: this is strictly not necessary and it trades code size for runtime perf.
+            // (We could just always add it.)
+            hostBindingOpCodes.push(elementIndx);
+        }
+        hostBindingOpCodes.push(directiveIdx, directiveVarsIdx, hostBindings);
+    }
+}
+/**
+ * Returns the last selected element index in the `HostBindingOpCodes`
+ *
+ * For perf reasons we don't need to update the selected element index in `HostBindingOpCodes` only
+ * if it changes. This method returns the last index (or '0' if not found.)
+ *
+ * Selected element index are only the ones which are negative.
+ */
+function lastSelectedElementIdx(hostBindingOpCodes) {
+    let i = hostBindingOpCodes.length;
+    while (i > 0) {
+        const value = hostBindingOpCodes[--i];
+        if (typeof value === 'number' && value < 0) {
+            return value;
+        }
+    }
+    return 0;
+}
+/**
+ * Builds up an export map as directives are created, so local refs can be quickly mapped
+ * to their directive instances.
+ */
+function saveNameToExportMap(directiveIdx, def, exportsMap) {
+    if (exportsMap) {
+        if (def.exportAs) {
+            for (let i = 0; i < def.exportAs.length; i++) {
+                exportsMap[def.exportAs[i]] = directiveIdx;
+            }
+        }
+        if (isComponentDef(def))
+            exportsMap[''] = directiveIdx;
+    }
+}
+/**
+ * Initializes the flags on the current node, setting all indices to the initial index,
+ * the directive count to 0, and adding the isComponent flag.
+ * @param index the initial index
+ */
+function initTNodeFlags(tNode, index, numberOfDirectives) {
+    ngDevMode &&
+        assertNotEqual(numberOfDirectives, tNode.directiveEnd - tNode.directiveStart, 'Reached the max number of directives');
+    tNode.flags |= 1 /* TNodeFlags.isDirectiveHost */;
+    // When the first directive is created on a node, save the index
+    tNode.directiveStart = index;
+    tNode.directiveEnd = index + numberOfDirectives;
+    tNode.providerIndexes = index;
+}
+function assertNoDuplicateDirectives(directives) {
+    // The array needs at least two elements in order to have duplicates.
+    if (directives.length < 2) {
+        return;
+    }
+    const seenDirectives = new Set();
+    for (const current of directives) {
+        if (seenDirectives.has(current)) {
+            throw new RuntimeError(309 /* RuntimeErrorCode.DUPLICATE_DIRECTIVE */, `Directive ${current.type.name} matches multiple times on the same element. ` +
+                `Directives can only match an element once.`);
+        }
+        seenDirectives.add(current);
+    }
+}
+
+function elementStartFirstCreatePass(index, tView, lView, name, directiveMatcher, bindingsEnabled, attrsIndex, localRefsIndex) {
+    ngDevMode && assertFirstCreatePass(tView);
+    ngDevMode && ngDevMode.firstCreatePass++;
+    const tViewConsts = tView.consts;
+    const attrs = getConstant(tViewConsts, attrsIndex);
+    const tNode = getOrCreateTNode(tView, index, 2 /* TNodeType.Element */, name, attrs);
+    if (bindingsEnabled) {
+        resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex), directiveMatcher);
+    }
+    // Merge the template attrs last so that they have the highest priority.
+    tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, tNode.attrs);
+    if (tNode.attrs !== null) {
+        computeStaticStyling(tNode, tNode.attrs, false);
+    }
+    if (tNode.mergedAttrs !== null) {
+        computeStaticStyling(tNode, tNode.mergedAttrs, true);
+    }
+    if (tView.queries !== null) {
+        tView.queries.elementStart(tView, tNode);
+    }
+    return tNode;
+}
+function elementEndFirstCreatePass(tView, tNode) {
+    ngDevMode && assertFirstCreatePass(tView);
+    registerPostOrderHooks(tView, tNode);
+    if (isContentQueryHost(tNode)) {
+        tView.queries.elementEnd(tNode);
+    }
+}
+
 class ComponentFactoryResolver extends ComponentFactoryResolver$1 {
     ngModule;
     /**
@@ -17837,9 +17928,51 @@ function toRefArray(map, isInputMap) {
     }
     return array;
 }
-function getNamespace(elementName) {
-    const name = elementName.toLowerCase();
-    return name === 'svg' ? SVG_NAMESPACE : name === 'math' ? MATH_ML_NAMESPACE : null;
+function verifyNotAnOrphanComponent(componentDef) {
+    // TODO(pk): create assert that verifies ngDevMode
+    if ((typeof ngJitMode === 'undefined' || ngJitMode) &&
+        componentDef.debugInfo?.forbidOrphanRendering) {
+        if (depsTracker.isOrphanComponent(componentDef.type)) {
+            throw new RuntimeError(981 /* RuntimeErrorCode.RUNTIME_DEPS_ORPHAN_COMPONENT */, `Orphan component found! Trying to render the component ${debugStringifyTypeForError(componentDef.type)} without first loading the NgModule that declares it. It is recommended to make this component standalone in order to avoid this error. If this is not possible now, import the component's NgModule in the appropriate NgModule, or the standalone component in which you are trying to render this component. If this is a lazy import, load the NgModule lazily as well and use its module injector.`);
+        }
+    }
+}
+function createRootViewInjector(componentDef, environmentInjector, injector) {
+    let realEnvironmentInjector = environmentInjector instanceof EnvironmentInjector
+        ? environmentInjector
+        : environmentInjector?.injector;
+    if (realEnvironmentInjector && componentDef.getStandaloneInjector !== null) {
+        realEnvironmentInjector =
+            componentDef.getStandaloneInjector(realEnvironmentInjector) || realEnvironmentInjector;
+    }
+    const rootViewInjector = realEnvironmentInjector
+        ? new ChainedInjector(injector, realEnvironmentInjector)
+        : injector;
+    return rootViewInjector;
+}
+function createRootLViewEnvironment(rootLViewInjector) {
+    const rendererFactory = rootLViewInjector.get(RendererFactory2, null);
+    if (rendererFactory === null) {
+        throw new RuntimeError(407 /* RuntimeErrorCode.RENDERER_NOT_FOUND */, ngDevMode &&
+            'Angular was not able to inject a renderer (RendererFactory2). ' +
+                'Likely this is due to a broken DI hierarchy. ' +
+                'Make sure that any injector used to create this component has a correct parent.');
+    }
+    const sanitizer = rootLViewInjector.get(Sanitizer, null);
+    const changeDetectionScheduler = rootLViewInjector.get(ChangeDetectionScheduler, null);
+    return {
+        rendererFactory,
+        sanitizer,
+        changeDetectionScheduler,
+    };
+}
+function createHostElement(componentDef, render) {
+    // Determine a tag name used for creating host elements when this component is created
+    // dynamically. Default to 'div' if this component did not specify any tag name in its
+    // selector.
+    const tagName = (componentDef.selectors[0][0] || 'div').toLowerCase();
+    const namespace = tagName === 'svg' ? SVG_NAMESPACE : tagName === 'math' ? MATH_ML_NAMESPACE : null;
+    return createElementNode(render, tagName, namespace);
 }
 /**
  * ComponentFactory interface implementation.
@@ -17884,63 +18017,22 @@ class ComponentFactory extends ComponentFactory$1 {
         profiler(22 /* ProfilerEvent.DynamicComponentStart */);
         const prevConsumer = setActiveConsumer$1(null);
         try {
-            // Check if the component is orphan
-            if (ngDevMode &&
-                (typeof ngJitMode === 'undefined' || ngJitMode) &&
-                this.componentDef.debugInfo?.forbidOrphanRendering) {
-                if (depsTracker.isOrphanComponent(this.componentType)) {
-                    throw new RuntimeError(981 /* RuntimeErrorCode.RUNTIME_DEPS_ORPHAN_COMPONENT */, `Orphan component found! Trying to render the component ${debugStringifyTypeForError(this.componentType)} without first loading the NgModule that declares it. It is recommended to make this component standalone in order to avoid this error. If this is not possible now, import the component's NgModule in the appropriate NgModule, or the standalone component in which you are trying to render this component. If this is a lazy import, load the NgModule lazily as well and use its module injector.`);
-                }
-            }
-            environmentInjector = environmentInjector || this.ngModule;
-            let realEnvironmentInjector = environmentInjector instanceof EnvironmentInjector
-                ? environmentInjector
-                : environmentInjector?.injector;
-            if (realEnvironmentInjector && this.componentDef.getStandaloneInjector !== null) {
-                realEnvironmentInjector =
-                    this.componentDef.getStandaloneInjector(realEnvironmentInjector) ||
-                        realEnvironmentInjector;
-            }
-            const rootViewInjector = realEnvironmentInjector
-                ? new ChainedInjector(injector, realEnvironmentInjector)
-                : injector;
-            const rendererFactory = rootViewInjector.get(RendererFactory2, null);
-            if (rendererFactory === null) {
-                throw new RuntimeError(407 /* RuntimeErrorCode.RENDERER_NOT_FOUND */, ngDevMode &&
-                    'Angular was not able to inject a renderer (RendererFactory2). ' +
-                        'Likely this is due to a broken DI hierarchy. ' +
-                        'Make sure that any injector used to create this component has a correct parent.');
-            }
-            const sanitizer = rootViewInjector.get(Sanitizer, null);
-            const changeDetectionScheduler = rootViewInjector.get(ChangeDetectionScheduler, null);
-            const environment = {
-                rendererFactory,
-                sanitizer,
-                changeDetectionScheduler,
-            };
-            const hostRenderer = rendererFactory.createRenderer(null, this.componentDef);
-            // Determine a tag name used for creating host elements when this component is created
-            // dynamically. Default to 'div' if this component did not specify any tag name in its
-            // selector.
-            const elementName = this.componentDef.selectors[0][0] || 'div';
-            const hostRNode = rootSelectorOrNode
-                ? locateHostElement(hostRenderer, rootSelectorOrNode, this.componentDef.encapsulation, rootViewInjector)
-                : createElementNode(hostRenderer, elementName, getNamespace(elementName));
-            let rootFlags = 512 /* LViewFlags.IsRoot */;
-            if (this.componentDef.signals) {
-                rootFlags |= 4096 /* LViewFlags.SignalView */;
-            }
-            else if (!this.componentDef.onPush) {
-                rootFlags |= 16 /* LViewFlags.CheckAlways */;
-            }
-            let hydrationInfo = null;
-            if (hostRNode !== null) {
-                hydrationInfo = retrieveHydrationInfo(hostRNode, rootViewInjector, true /* isRootView */);
-            }
+            const cmpDef = this.componentDef;
+            ngDevMode && verifyNotAnOrphanComponent(cmpDef);
+            const tAttributes = rootSelectorOrNode
+                ? ['ng-version', '19.2.0-next.3']
+                : // Extract attributes and classes from the first selector only to match VE behavior.
+                    extractAttrsAndClassesFromSelector(this.componentDef.selectors[0]);
             // Create the root view. Uses empty TView and ContentTemplate.
-            const rootTView = createTView(0 /* TViewType.Root */, null, null, 1, 0, null, null, null, null, null, null);
-            const rootLView = createLView(null, rootTView, null, rootFlags, null, null, environment, hostRenderer, rootViewInjector, null, hydrationInfo);
-            rootLView[HEADER_OFFSET] = hostRNode;
+            const rootTView = createTView(0 /* TViewType.Root */, null, null, 1, 0, null, null, null, null, [tAttributes], null);
+            const rootViewInjector = createRootViewInjector(cmpDef, environmentInjector || this.ngModule, injector);
+            const environment = createRootLViewEnvironment(rootViewInjector);
+            const hostRenderer = environment.rendererFactory.createRenderer(null, cmpDef);
+            const hostElement = rootSelectorOrNode
+                ? locateHostElement(hostRenderer, rootSelectorOrNode, cmpDef.encapsulation, rootViewInjector)
+                : createHostElement(cmpDef, hostRenderer);
+            const rootLView = createLView(null, rootTView, null, 512 /* LViewFlags.IsRoot */ | getInitialLViewFlagsFromDef(cmpDef), null, null, environment, hostRenderer, rootViewInjector, null, retrieveHydrationInfo(hostElement, rootViewInjector, true /* isRootView */));
+            rootLView[HEADER_OFFSET] = hostElement;
             // rootView is the parent when bootstrapping
             // TODO(misko): it looks like we are entering view here but we don't really need to as
             // `renderView` does that. However as the code is written it is needed because
@@ -17949,37 +18041,22 @@ class ComponentFactory extends ComponentFactory$1 {
             enterView(rootLView);
             let componentView = null;
             try {
-                // If host dom element is created (instead of being provided as part of the dynamic component creation), also apply attributes and classes extracted from component selector.
-                const tAttributes = rootSelectorOrNode
-                    ? ['ng-version', '19.2.0-next.1']
-                    : // Extract attributes and classes from the first selector only to match VE behavior.
-                        extractAttrsAndClassesFromSelector(this.componentDef.selectors[0]);
-                // TODO: this logic is shared with the element instruction first create pass
-                const hostTNode = getOrCreateTNode(rootTView, HEADER_OFFSET, 2 /* TNodeType.Element */, '#host', tAttributes);
-                const [directiveDefs, hostDirectiveDefs] = resolveHostDirectives(rootTView, hostTNode, [
-                    this.componentDef,
-                ]);
-                initializeDirectives(rootTView, rootLView, hostTNode, directiveDefs, {}, hostDirectiveDefs);
-                for (const def of directiveDefs) {
-                    hostTNode.mergedAttrs = mergeHostAttrs(hostTNode.mergedAttrs, def.hostAttrs);
-                }
-                hostTNode.mergedAttrs = mergeHostAttrs(hostTNode.mergedAttrs, tAttributes);
-                computeStaticStyling(hostTNode, hostTNode.mergedAttrs, true);
+                const hostTNode = elementStartFirstCreatePass(HEADER_OFFSET, rootTView, rootLView, '#host', () => [this.componentDef], true, 0);
+                // ---- element instruction
                 // TODO(crisbeto): in practice `hostRNode` should always be defined, but there are some
                 // tests where the renderer is mocked out and `undefined` is returned. We should update the
                 // tests so that this check can be removed.
-                if (hostRNode) {
-                    setupStaticAttributes(hostRenderer, hostRNode, hostTNode);
-                    attachPatchData(hostRNode, rootLView);
-                }
-                if (projectableNodes !== undefined) {
-                    projectNodes(hostTNode, this.ngContentSelectors, projectableNodes);
+                if (hostElement) {
+                    setupStaticAttributes(hostRenderer, hostElement, hostTNode);
+                    attachPatchData(hostElement, rootLView);
                 }
                 // TODO(pk): this logic is similar to the instruction code where a node can have directives
                 createDirectivesInstances(rootTView, rootLView, hostTNode);
                 executeContentQueries(rootTView, hostTNode, rootLView);
-                // TODO(pk): code / logic duplication with the elementEnd and similar instructions
-                registerPostOrderHooks(rootTView, hostTNode);
+                elementEndFirstCreatePass(rootTView, hostTNode);
+                if (projectableNodes !== undefined) {
+                    projectNodes(hostTNode, this.ngContentSelectors, projectableNodes);
+                }
                 componentView = getComponentLViewByIndex(hostTNode.index, rootLView);
                 // TODO(pk): why do we need this logic?
                 rootLView[CONTEXT] = componentView[CONTEXT];
@@ -20595,7 +20672,11 @@ function templateFirstCreatePass(index, tView, lView, templateFn, decls, vars, t
     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);
-    resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex));
+    if (getBindingsEnabled()) {
+        resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex), findDirectiveDefMatches);
+    }
+    // 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) {
@@ -22898,6 +22979,77 @@ function setTestabilityGetter(getter) {
 }
 let _testabilityGetter;
 
+/**
+ * A scheduler which manages the execution of effects.
+ */
+class EffectScheduler {
+    /** @nocollapse */
+    static ɵprov = /** @pureOrBreakMyCode */ /* @__PURE__ */ ɵɵdefineInjectable({
+        token: EffectScheduler,
+        providedIn: 'root',
+        factory: () => new ZoneAwareEffectScheduler(),
+    });
+}
+/**
+ * A wrapper around `ZoneAwareQueueingScheduler` that schedules flushing via the microtask queue
+ * when.
+ */
+class ZoneAwareEffectScheduler {
+    queuedEffectCount = 0;
+    queues = new Map();
+    schedule(handle) {
+        this.enqueue(handle);
+    }
+    remove(handle) {
+        const zone = handle.zone;
+        const queue = this.queues.get(zone);
+        if (!queue.has(handle)) {
+            return;
+        }
+        queue.delete(handle);
+        this.queuedEffectCount--;
+    }
+    enqueue(handle) {
+        const zone = handle.zone;
+        if (!this.queues.has(zone)) {
+            this.queues.set(zone, new Set());
+        }
+        const queue = this.queues.get(zone);
+        if (queue.has(handle)) {
+            return;
+        }
+        this.queuedEffectCount++;
+        queue.add(handle);
+    }
+    /**
+     * Run all scheduled effects.
+     *
+     * Execution order of effects within the same zone is guaranteed to be FIFO, but there is no
+     * ordering guarantee between effects scheduled in different zones.
+     */
+    flush() {
+        while (this.queuedEffectCount > 0) {
+            for (const [zone, queue] of this.queues) {
+                // `zone` here must be defined.
+                if (zone === null) {
+                    this.flushQueue(queue);
+                }
+                else {
+                    zone.run(() => this.flushQueue(queue));
+                }
+            }
+        }
+    }
+    flushQueue(queue) {
+        for (const handle of queue) {
+            queue.delete(handle);
+            this.queuedEffectCount--;
+            // TODO: what happens if this throws an error?
+            handle.run();
+        }
+    }
+}
+
 /**
  * Determine if the argument is shaped like a Promise
  */
@@ -23157,77 +23309,6 @@ class ApplicationInitStatus {
         args: [{ providedIn: 'root' }]
     }], () => [], null); })();
 
-/**
- * A scheduler which manages the execution of effects.
- */
-class EffectScheduler {
-    /** @nocollapse */
-    static ɵprov = /** @pureOrBreakMyCode */ /* @__PURE__ */ ɵɵdefineInjectable({
-        token: EffectScheduler,
-        providedIn: 'root',
-        factory: () => new ZoneAwareEffectScheduler(),
-    });
-}
-/**
- * A wrapper around `ZoneAwareQueueingScheduler` that schedules flushing via the microtask queue
- * when.
- */
-class ZoneAwareEffectScheduler {
-    queuedEffectCount = 0;
-    queues = new Map();
-    schedule(handle) {
-        this.enqueue(handle);
-    }
-    remove(handle) {
-        const zone = handle.zone;
-        const queue = this.queues.get(zone);
-        if (!queue.has(handle)) {
-            return;
-        }
-        queue.delete(handle);
-        this.queuedEffectCount--;
-    }
-    enqueue(handle) {
-        const zone = handle.zone;
-        if (!this.queues.has(zone)) {
-            this.queues.set(zone, new Set());
-        }
-        const queue = this.queues.get(zone);
-        if (queue.has(handle)) {
-            return;
-        }
-        this.queuedEffectCount++;
-        queue.add(handle);
-    }
-    /**
-     * Run all scheduled effects.
-     *
-     * Execution order of effects within the same zone is guaranteed to be FIFO, but there is no
-     * ordering guarantee between effects scheduled in different zones.
-     */
-    flush() {
-        while (this.queuedEffectCount > 0) {
-            for (const [zone, queue] of this.queues) {
-                // `zone` here must be defined.
-                if (zone === null) {
-                    this.flushQueue(queue);
-                }
-                else {
-                    zone.run(() => this.flushQueue(queue));
-                }
-            }
-        }
-    }
-    flushQueue(queue) {
-        for (const handle of queue) {
-            queue.delete(handle);
-            this.queuedEffectCount--;
-            // TODO: what happens if this throws an error?
-            handle.run();
-        }
-    }
-}
-
 /**
  * A DI token that provides a set of callbacks to
  * be called for every component that is bootstrapped.
@@ -23269,24 +23350,6 @@ class NgProbeToken {
 }
 /** Maximum number of times ApplicationRef will refresh all attached views in a single tick. */
 const MAXIMUM_REFRESH_RERUNS = 10;
-function _callAndReportToErrorHandler(errorHandler, ngZone, callback) {
-    try {
-        const result = callback();
-        if (isPromise(result)) {
-            return result.catch((e) => {
-                ngZone.runOutsideAngular(() => errorHandler.handleError(e));
-                // rethrow as the exception handler might not do it
-                throw e;
-            });
-        }
-        return result;
-    }
-    catch (e) {
-        ngZone.runOutsideAngular(() => errorHandler.handleError(e));
-        // rethrow as the exception handler might not do it
-        throw e;
-    }
-}
 function optionsReducer(dst, objs) {
     if (Array.isArray(objs)) {
         return objs.reduce(optionsReducer, dst);
@@ -23405,12 +23468,6 @@ class ApplicationRef {
      * @internal
      */
     dirtyFlags = 0 /* ApplicationRefDirtyFlags.None */;
-    /**
-     * Like `dirtyFlags` but don't cause `tick()` to loop.
-     *
-     * @internal
-     */
-    deferredDirtyFlags = 0 /* ApplicationRefDirtyFlags.None */;
     /**
      * Most recent snapshot from the `TracingService`, if any.
      *
@@ -23576,18 +23633,19 @@ class ApplicationRef {
         this._tick();
     }
     /** @internal */
-    _tick = () => {
+    _tick() {
         profiler(12 /* ProfilerEvent.ChangeDetectionStart */);
         if (this.tracingSnapshot !== null) {
-            const snapshot = this.tracingSnapshot;
-            this.tracingSnapshot = null;
-            // Ensure we always run `_tick()` in the context of the most recent snapshot,
+            // Ensure we always run `tickImpl()` in the context of the most recent snapshot,
             // if one exists. Snapshots may be reference counted by the implementation so
             // we want to ensure that if we request a snapshot that we use it.
-            snapshot.run(TracingAction.CHANGE_DETECTION, this._tick);
-            snapshot.dispose();
-            return;
+            this.tracingSnapshot.run(TracingAction.CHANGE_DETECTION, this.tickImpl);
+        }
+        else {
+            this.tickImpl();
         }
+    }
+    tickImpl = () => {
         (typeof ngDevMode === 'undefined' || ngDevMode) && warnIfDestroyed(this._destroyed);
         if (this._runningTick) {
             throw new RuntimeError(101 /* RuntimeErrorCode.RECURSIVE_APPLICATION_REF_TICK */, ngDevMode && 'ApplicationRef.tick is called recursively');
@@ -23608,6 +23666,8 @@ class ApplicationRef {
         }
         finally {
             this._runningTick = false;
+            this.tracingSnapshot?.dispose();
+            this.tracingSnapshot = null;
             setActiveConsumer$1(prevConsumer);
             this.afterTick.next();
             profiler(13 /* ProfilerEvent.ChangeDetectionEnd */);
@@ -23621,9 +23681,6 @@ class ApplicationRef {
         if (this._rendererFactory === null && !this._injector.destroyed) {
             this._rendererFactory = this._injector.get(RendererFactory2, null, { optional: true });
         }
-        // When beginning synchronization, all deferred dirtiness becomes active dirtiness.
-        this.dirtyFlags |= this.deferredDirtyFlags;
-        this.deferredDirtyFlags = 0 /* ApplicationRefDirtyFlags.None */;
         let runs = 0;
         while (this.dirtyFlags !== 0 /* ApplicationRefDirtyFlags.None */ && runs++ < MAXIMUM_REFRESH_RERUNS) {
             profiler(14 /* ProfilerEvent.ChangeDetectionSyncStart */);
@@ -23641,9 +23698,6 @@ class ApplicationRef {
      * Perform a single synchronization pass.
      */
     synchronizeOnce() {
-        // If we happened to loop, deferred dirtiness can be processed as active dirtiness again.
-        this.dirtyFlags |= this.deferredDirtyFlags;
-        this.deferredDirtyFlags = 0 /* ApplicationRefDirtyFlags.None */;
         // First, process any dirty root effects.
         if (this.dirtyFlags & 16 /* ApplicationRefDirtyFlags.RootEffects */) {
             this.dirtyFlags &= ~16 /* ApplicationRefDirtyFlags.RootEffects */;
@@ -27979,24 +28033,6 @@ function getExistingTNode(tView, index) {
     return tNode;
 }
 
-function elementStartFirstCreatePass(index, tView, lView, name, attrsIndex, localRefsIndex) {
-    ngDevMode && assertFirstCreatePass(tView);
-    ngDevMode && ngDevMode.firstCreatePass++;
-    const tViewConsts = tView.consts;
-    const attrs = getConstant(tViewConsts, attrsIndex);
-    const tNode = getOrCreateTNode(tView, index, 2 /* TNodeType.Element */, name, attrs);
-    resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex));
-    if (tNode.attrs !== null) {
-        computeStaticStyling(tNode, tNode.attrs, false);
-    }
-    if (tNode.mergedAttrs !== null) {
-        computeStaticStyling(tNode, tNode.mergedAttrs, true);
-    }
-    if (tView.queries !== null) {
-        tView.queries.elementStart(tView, tNode);
-    }
-    return tNode;
-}
 /**
  * Create DOM element. The instruction must later be followed by `elementEnd()` call.
  *
@@ -28021,7 +28057,7 @@ function ɵɵelementStart(index, name, attrsIndex, localRefsIndex) {
     ngDevMode && assertIndexInRange(lView, adjustedIndex);
     const renderer = lView[RENDERER];
     const tNode = tView.firstCreatePass
-        ? elementStartFirstCreatePass(adjustedIndex, tView, lView, name, attrsIndex, localRefsIndex)
+        ? elementStartFirstCreatePass(adjustedIndex, tView, lView, name, findDirectiveDefMatches, getBindingsEnabled(), attrsIndex, localRefsIndex)
         : tView.data[adjustedIndex];
     const native = _locateOrCreateElementNode(tView, lView, tNode, renderer, name, index);
     lView[adjustedIndex] = native;
@@ -28077,10 +28113,7 @@ function ɵɵelementEnd() {
     decreaseElementDepthCount();
     const tView = getTView();
     if (tView.firstCreatePass) {
-        registerPostOrderHooks(tView, currentTNode);
-        if (isContentQueryHost(currentTNode)) {
-            tView.queries.elementEnd(currentTNode);
-        }
+        elementEndFirstCreatePass(tView, tNode);
     }
     if (tNode.classesWithoutHost != null && hasClassInput(tNode)) {
         setDirectiveInputsWhichShadowsStyling(tView, tNode, getLView(), tNode.classesWithoutHost, true);
@@ -28108,7 +28141,7 @@ function ɵɵelement(index, name, attrsIndex, localRefsIndex) {
 }
 let _locateOrCreateElementNode = (tView, lView, tNode, renderer, name, index) => {
     lastNodeWasCreated(true);
-    return createElementNode(renderer, name, getNamespace$1());
+    return createElementNode(renderer, name, getNamespace());
 };
 /**
  * Enables hydration code path (to lookup existing elements in DOM)
@@ -28123,7 +28156,7 @@ function locateOrCreateElementNodeImpl(tView, lView, tNode, renderer, name, inde
     lastNodeWasCreated(isNodeCreationMode);
     // Regular creation mode.
     if (isNodeCreationMode) {
-        return createElementNode(renderer, name, getNamespace$1());
+        return createElementNode(renderer, name, getNamespace());
     }
     // Hydration mode, looking up an existing element in DOM.
     const native = locateNextRNode(hydrationInfo, tView, lView, tNode);
@@ -28176,7 +28209,11 @@ function elementContainerStartFirstCreatePass(index, tView, lView, attrsIndex, l
         computeStaticStyling(tNode, attrs, true);
     }
     const localRefs = getConstant(tViewConsts, localRefsIndex);
-    resolveDirectives(tView, lView, tNode, localRefs);
+    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);
     }
@@ -33337,9 +33374,13 @@ function ɵsetClassDebugInfo(type, debugInfo) {
  * @param applyMetadata Callback that will apply a new set of metadata on the `type` when invoked.
  * @param environment Syntehtic namespace imports that need to be passed along to the callback.
  * @param locals Local symbols from the source location that have to be exposed to the callback.
+ * @param importMeta `import.meta` from the call site of the replacement function. Optional since
+ *   it isn't used internally.
+ * @param id ID to the class being replaced. **Not** the same as the component definition ID.
+ *   Optional since the ID might not be available internally.
  * @codeGenApi
  */
-function ɵɵreplaceMetadata(type, applyMetadata, namespaces, locals) {
+function ɵɵreplaceMetadata(type, applyMetadata, namespaces, locals, importMeta = null, id = null) {
     ngDevMode && assertComponentDef(type);
     const currentDef = getComponentDef(type);
     // The reason `applyMetadata` is a callback that is invoked (almost) immediately is because
@@ -33361,7 +33402,7 @@ function ɵɵreplaceMetadata(type, applyMetadata, namespaces, locals) {
             // Note: we have the additional check, because `IsRoot` can also indicate
             // a component created through something like `createComponent`.
             if (isRootView(root) && root[PARENT] === null) {
-                recreateMatchingLViews(newDef, oldDef, root);
+                recreateMatchingLViews(importMeta, id, newDef, oldDef, root);
             }
         }
     }
@@ -33397,10 +33438,12 @@ function mergeWithExistingDefinition(currentDef, newDef) {
 }
 /**
  * Finds all LViews matching a specific component definition and recreates them.
+ * @param importMeta `import.meta` information.
+ * @param id HMR ID of the component.
  * @param oldDef Component definition to search for.
  * @param rootLView View from which to start the search.
  */
-function recreateMatchingLViews(newDef, oldDef, rootLView) {
+function recreateMatchingLViews(importMeta, id, newDef, oldDef, rootLView) {
     ngDevMode &&
         assertDefined(oldDef.tView, 'Expected a component definition that has been instantiated at least once');
     const tView = rootLView[TVIEW];
@@ -33408,7 +33451,7 @@ function recreateMatchingLViews(newDef, oldDef, rootLView) {
     // produce false positives when using inheritance.
     if (tView === oldDef.tView) {
         ngDevMode && assertComponentDef(oldDef.type);
-        recreateLView(newDef, oldDef, rootLView);
+        recreateLView(importMeta, id, newDef, oldDef, rootLView);
         return;
     }
     for (let i = HEADER_OFFSET; i < tView.bindingStartIndex; i++) {
@@ -33416,14 +33459,14 @@ function recreateMatchingLViews(newDef, oldDef, rootLView) {
         if (isLContainer(current)) {
             // The host can be an LView if a component is injecting `ViewContainerRef`.
             if (isLView(current[HOST])) {
-                recreateMatchingLViews(newDef, oldDef, current[HOST]);
+                recreateMatchingLViews(importMeta, id, newDef, oldDef, current[HOST]);
             }
             for (let j = CONTAINER_HEADER_OFFSET; j < current.length; j++) {
-                recreateMatchingLViews(newDef, oldDef, current[j]);
+                recreateMatchingLViews(importMeta, id, newDef, oldDef, current[j]);
             }
         }
         else if (isLView(current)) {
-            recreateMatchingLViews(newDef, oldDef, current);
+            recreateMatchingLViews(importMeta, id, newDef, oldDef, current);
         }
     }
 }
@@ -33442,11 +33485,13 @@ function clearRendererCache(factory, def) {
 }
 /**
  * Recreates an LView in-place from a new component definition.
+ * @param importMeta `import.meta` information.
+ * @param id HMR ID for the component.
  * @param newDef Definition from which to recreate the view.
  * @param oldDef Previous component definition being swapped out.
  * @param lView View to be recreated.
  */
-function recreateLView(newDef, oldDef, lView) {
+function recreateLView(importMeta, id, newDef, oldDef, lView) {
     const instance = lView[CONTEXT];
     let host = lView[HOST];
     // In theory the parent can also be an LContainer, but it appears like that's
@@ -33498,10 +33543,29 @@ function recreateLView(newDef, oldDef, lView) {
     };
     // The callback isn't guaranteed to be inside the Zone so we need to bring it in ourselves.
     if (zone === null) {
-        recreate();
+        executeWithInvalidateFallback(importMeta, id, recreate);
     }
     else {
-        zone.run(recreate);
+        zone.run(() => executeWithInvalidateFallback(importMeta, id, recreate));
+    }
+}
+/**
+ * Runs an HMR-related function and falls back to
+ * invalidating the HMR data if it throws an error.
+ */
+function executeWithInvalidateFallback(importMeta, id, callback) {
+    try {
+        callback();
+    }
+    catch (e) {
+        const errorMessage = e.message;
+        // If we have all the necessary information and APIs to send off the invalidation
+        // request, send it before rethrowing so the dev server can decide what to do.
+        if (id !== null && errorMessage) {
+            importMeta?.hot?.send?.('angular:invalidate', { id, message: errorMessage, error: true });
+        }
+        // Throw the error in case the page doesn't get refreshed.
+        throw e;
     }
 }
 /**
@@ -34929,7 +34993,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('19.2.0-next.1');
+const VERSION = new Version('19.2.0-next.3');
 
 /**
  * Combination of NgModuleFactory and ComponentFactories.
@@ -35339,13 +35403,6 @@ class ChangeDetectionSchedulerImpl {
                 this.appRef.dirtyFlags |= 4 /* ApplicationRefDirtyFlags.ViewTreeCheck */;
                 break;
             }
-            case 8 /* NotificationSource.DeferredRenderHook */: {
-                // Render hooks are "deferred" when they're triggered from other render hooks. Using the
-                // deferred dirty flags ensures that adding new hooks doesn't automatically trigger a loop
-                // inside tick().
-                this.appRef.deferredDirtyFlags |= 8 /* ApplicationRefDirtyFlags.AfterRender */;
-                break;
-            }
             case 6 /* NotificationSource.CustomElement */: {
                 // We use `ViewTreeTraversal` to ensure we refresh the element even if this is triggered
                 // during CD. In practice this is a no-op since the elements code also calls via a
@@ -35354,7 +35411,7 @@ class ChangeDetectionSchedulerImpl {
                 force = true;
                 break;
             }
-            case 13 /* NotificationSource.RootEffect */: {
+            case 12 /* NotificationSource.RootEffect */: {
                 this.appRef.dirtyFlags |= 16 /* ApplicationRefDirtyFlags.RootEffects */;
                 // Root effects still force a CD, even if the scheduler is disabled. This ensures that
                 // effects always run, even when triggered from outside the zone when the scheduler is
@@ -35362,7 +35419,7 @@ class ChangeDetectionSchedulerImpl {
                 force = true;
                 break;
             }
-            case 14 /* NotificationSource.ViewEffect */: {
+            case 13 /* NotificationSource.ViewEffect */: {
                 // This is technically a no-op, since view effects will also send a
                 // `MarkAncestorsForTraversal` notification. Still, we set this for logical consistency.
                 this.appRef.dirtyFlags |= 2 /* ApplicationRefDirtyFlags.ViewTreeTraversal */;
@@ -35372,7 +35429,7 @@ class ChangeDetectionSchedulerImpl {
                 force = true;
                 break;
             }
-            case 12 /* NotificationSource.PendingTaskRemoved */: {
+            case 11 /* NotificationSource.PendingTaskRemoved */: {
                 // Removing a pending task via the public API forces a scheduled tick, ensuring that
                 // stability is async and delayed until there was at least an opportunity to run
                 // application synchronization. This prevents some footguns when working with the
@@ -35381,10 +35438,10 @@ class ChangeDetectionSchedulerImpl {
                 force = true;
                 break;
             }
-            case 10 /* NotificationSource.ViewDetachedFromDOM */:
-            case 9 /* NotificationSource.ViewAttached */:
+            case 9 /* NotificationSource.ViewDetachedFromDOM */:
+            case 8 /* NotificationSource.ViewAttached */:
             case 7 /* NotificationSource.RenderHook */:
-            case 11 /* NotificationSource.AsyncAnimationsLoaded */:
+            case 10 /* NotificationSource.AsyncAnimationsLoaded */:
             default: {
                 // These notifications only schedule a tick but do not change whether we should refresh
                 // views. Instead, we only need to run render hooks unless another notification from the
@@ -36078,6 +36135,24 @@ function moduleDoBootstrap(moduleRef, allPlatformModules) {
     }
     allPlatformModules.push(moduleRef);
 }
+function _callAndReportToErrorHandler(errorHandler, ngZone, callback) {
+    try {
+        const result = callback();
+        if (isPromise(result)) {
+            return result.catch((e) => {
+                ngZone.runOutsideAngular(() => errorHandler.handleError(e));
+                // rethrow as the exception handler might not do it
+                throw e;
+            });
+        }
+        return result;
+    }
+    catch (e) {
+        ngZone.runOutsideAngular(() => errorHandler.handleError(e));
+        // rethrow as the exception handler might not do it
+        throw e;
+    }
+}
 
 /**
  * The Angular platform is the entry point for Angular on a web page.
@@ -40575,23 +40650,6 @@ function untracked(nonReactiveReadsFn) {
     }
 }
 
-class ViewContext {
-    view;
-    node;
-    constructor(view, node) {
-        this.view = view;
-        this.node = node;
-    }
-    /**
-     * @internal
-     * @nocollapse
-     */
-    static __NG_ELEMENT_ID__ = injectViewContext;
-}
-function injectViewContext() {
-    return new ViewContext(getLView(), getCurrentTNode());
-}
-
 /**
  * Controls whether effects use the legacy `microtaskEffect` by default.
  */
@@ -40859,7 +40917,7 @@ const ROOT_EFFECT_NODE =
     ...BASE_EFFECT_NODE,
     consumerMarkedDirty() {
         this.scheduler.schedule(this);
-        this.notifier.notify(13 /* NotificationSource.RootEffect */);
+        this.notifier.notify(12 /* NotificationSource.RootEffect */);
     },
     destroy() {
         consumerDestroy$1(this);
@@ -40874,7 +40932,7 @@ const VIEW_EFFECT_NODE =
     consumerMarkedDirty() {
         this.view[FLAGS] |= 8192 /* LViewFlags.HasChildViewsToRefresh */;
         markAncestorsForTraversal(this.view);
-        this.notifier.notify(14 /* NotificationSource.ViewEffect */);
+        this.notifier.notify(13 /* NotificationSource.ViewEffect */);
     },
     destroy() {
         consumerDestroy$1(this);
@@ -40901,7 +40959,7 @@ function createRootEffect(fn, scheduler, notifier) {
     node.notifier = notifier;
     node.zone = typeof Zone !== 'undefined' ? Zone.current : null;
     node.scheduler.schedule(node);
-    node.notifier.notify(13 /* NotificationSource.RootEffect */);
+    node.notifier.notify(12 /* NotificationSource.RootEffect */);
     return node;
 }
 
@@ -40992,10 +41050,10 @@ class AfterRenderEffectSequence extends AfterRenderSequence {
      * These are initialized to `undefined` but set in the constructor.
      */
     nodes = [undefined, undefined, undefined, undefined];
-    constructor(impl, effectHooks, scheduler, destroyRef, snapshot = null) {
+    constructor(impl, effectHooks, view, scheduler, destroyRef, snapshot = null) {
         // Note that we also initialize the underlying `AfterRenderSequence` hooks to `undefined` and
         // populate them as we create reactive nodes below.
-        super(impl, [undefined, undefined, undefined, undefined], false, destroyRef, snapshot);
+        super(impl, [undefined, undefined, undefined, undefined], view, false, destroyRef, snapshot);
         this.scheduler = scheduler;
         // Setup a reactive node for each phase.
         for (const phase of AFTER_RENDER_PHASES) {
@@ -41054,7 +41112,8 @@ function afterRenderEffect(callbackOrSpec, options) {
     if (typeof spec === 'function') {
         spec = { mixedReadWrite: callbackOrSpec };
     }
-    const sequence = new AfterRenderEffectSequence(manager.impl, [spec.earlyRead, spec.write, spec.mixedReadWrite, spec.read], scheduler, injector.get(DestroyRef), tracing?.snapshot(null));
+    const viewContext = injector.get(ViewContext, null, { optional: true });
+    const sequence = new AfterRenderEffectSequence(manager.impl, [spec.earlyRead, spec.write, spec.mixedReadWrite, spec.read], viewContext?.view, scheduler, injector.get(DestroyRef), tracing?.snapshot(null));
     manager.impl.register(sequence);
     return sequence;
 }
@@ -41136,16 +41195,16 @@ class ResourceImpl extends BaseWritableResource {
     loaderFn;
     defaultValue;
     equal;
+    pendingTasks;
     /**
      * The current state of the resource. Status, value, and error are derived from this.
      */
     state;
     /**
-     * Signal of both the request value `R` and a writable `reload` signal that's linked/associated
-     * to the given request. Changing the value of the `reload` signal causes the resource to reload.
+     * Combines the current request with a reload counter which allows the resource to be reloaded on
+     * imperative command.
      */
-    extendedRequest;
-    pendingTasks;
+    extRequest;
     effectRef;
     pendingController;
     resolvePendingTask = undefined;
@@ -41155,56 +41214,55 @@ class ResourceImpl extends BaseWritableResource {
         // Feed a computed signal for the value to `BaseWritableResource`, which will upgrade it to a
         // `WritableSignal` that delegates to `ResourceImpl.set`.
         computed(() => {
-            const stream = this.state()?.stream?.();
-            return stream && isResolved(stream) ? stream.value : this.defaultValue;
+            const streamValue = this.state().stream?.();
+            return streamValue && isResolved(streamValue) ? streamValue.value : this.defaultValue;
         }, { equal }));
         this.loaderFn = loaderFn;
         this.defaultValue = defaultValue;
         this.equal = equal;
-        this.pendingTasks = injector.get(PendingTasks);
         // Extend `request()` to include a writable reload signal.
-        this.extendedRequest = computed(() => ({
-            request: request(),
-            reload: signal(0),
-        }));
+        this.extRequest = linkedSignal({
+            source: request,
+            computation: (request) => ({ request, reload: 0 }),
+        });
         // The main resource state is managed in a `linkedSignal`, which allows the resource to change
         // state instantaneously when the request signal changes.
         this.state = linkedSignal({
-            // We use the request (as well as its reload signal) to derive the initial status of the
-            // resource (Idle, Loading, or Reloading) in response to request changes. From this initial
-            // status, the resource's effect will then trigger the loader and update to a Resolved or
-            // Error state as appropriate.
-            source: () => {
-                const { request, reload } = this.extendedRequest();
-                if (request === undefined || this.destroyed) {
-                    return ResourceStatus.Idle;
+            // Whenever the request changes,
+            source: this.extRequest,
+            // Compute the state of the resource given a change in status.
+            computation: (extRequest, previous) => {
+                const status = extRequest.request === undefined ? ResourceStatus.Idle : ResourceStatus.Loading;
+                if (!previous) {
+                    return {
+                        extRequest,
+                        status,
+                        previousStatus: ResourceStatus.Idle,
+                        stream: undefined,
+                    };
+                }
+                else {
+                    return {
+                        extRequest,
+                        status,
+                        previousStatus: projectStatusOfState(previous.value),
+                        // If the request hasn't changed, keep the previous stream.
+                        stream: previous.value.extRequest.request === extRequest.request
+                            ? previous.value.stream
+                            : undefined,
+                    };
                 }
-                return reload() === 0 ? ResourceStatus.Loading : ResourceStatus.Reloading;
             },
-            // Compute the state of the resource given a change in status.
-            computation: (status, previous) => ({
-                status,
-                // When the state of the resource changes due to the request, remember the previous status
-                // for the loader to consider.
-                previousStatus: computeStatusOfState(previous?.value),
-                // In `Reloading` state, we keep the previous value if there is one, since the identity of
-                // the request hasn't changed. Otherwise, we switch back to the default value.
-                stream: previous && status === ResourceStatus.Reloading ? previous.value.stream : undefined,
-            }),
         });
         this.effectRef = effect(this.loadEffect.bind(this), {
             injector,
             manualCleanup: true,
         });
+        this.pendingTasks = injector.get(PendingTasks);
         // Cancel any pending request when the resource itself is destroyed.
         injector.get(DestroyRef).onDestroy(() => this.destroy());
     }
-    status = computed(() => {
-        if (this.state().status !== ResourceStatus.Resolved) {
-            return this.state().status;
-        }
-        return isResolved(this.state().stream()) ? ResourceStatus.Resolved : ResourceStatus.Error;
-    });
+    status = computed(() => projectStatusOfState(this.state()));
     error = computed(() => {
         const stream = this.state().stream?.();
         return stream && !isResolved(stream) ? stream.error : undefined;
@@ -41217,12 +41275,14 @@ class ResourceImpl extends BaseWritableResource {
             return;
         }
         const current = untracked(this.value);
-        if (untracked(this.status) === ResourceStatus.Local &&
+        const state = untracked(this.state);
+        if (state.status === ResourceStatus.Local &&
             (this.equal ? this.equal(current, value) : current === value)) {
             return;
         }
         // Enter Local state with the user-defined value.
         this.state.set({
+            extRequest: state.extRequest,
             status: ResourceStatus.Local,
             previousStatus: ResourceStatus.Local,
             stream: signal({ value }),
@@ -41233,14 +41293,12 @@ class ResourceImpl extends BaseWritableResource {
     }
     reload() {
         // We don't want to restart in-progress loads.
-        const status = untracked(this.status);
-        if (status === ResourceStatus.Idle ||
-            status === ResourceStatus.Loading ||
-            status === ResourceStatus.Reloading) {
+        const { status } = untracked(this.state);
+        if (status === ResourceStatus.Idle || status === ResourceStatus.Loading) {
             return false;
         }
-        // Increment the reload signal to trigger the `state` linked signal to switch us to `Reload`
-        untracked(this.extendedRequest).reload.update((v) => v + 1);
+        // Increment the request reload to trigger the `state` linked signal to switch us to `Reload`
+        this.extRequest.update(({ request, reload }) => ({ request, reload: reload + 1 }));
         return true;
     }
     destroy() {
@@ -41249,28 +41307,23 @@ class ResourceImpl extends BaseWritableResource {
         this.abortInProgressLoad();
         // Destroyed resources enter Idle state.
         this.state.set({
+            extRequest: { request: undefined, reload: 0 },
             status: ResourceStatus.Idle,
             previousStatus: ResourceStatus.Idle,
             stream: undefined,
         });
     }
     async loadEffect() {
+        const extRequest = this.extRequest();
         // Capture the previous status before any state transitions. Note that this is `untracked` since
         // we do not want the effect to depend on the state of the resource, only on the request.
         const { status: currentStatus, previousStatus } = untracked(this.state);
-        const { request, reload: reloadCounter } = this.extendedRequest();
-        // Subscribe side-effectfully to `reloadCounter`, although we don't actually care about its
-        // value. This is used to rerun the effect when `reload()` is triggered.
-        reloadCounter();
-        if (request === undefined) {
+        if (extRequest.request === undefined) {
             // Nothing to load (and we should already be in a non-loading state).
             return;
         }
-        else if (currentStatus !== ResourceStatus.Loading &&
-            currentStatus !== ResourceStatus.Reloading) {
-            // We might've transitioned into a loading state, but has since been overwritten (likely via
-            // `.set`).
-            // In this case, the resource has nothing to do.
+        else if (currentStatus !== ResourceStatus.Loading) {
+            // We're not in a loading or reloading state, so this loading request is stale.
             return;
         }
         // Cancel any previous loading attempts.
@@ -41293,27 +41346,31 @@ class ResourceImpl extends BaseWritableResource {
             // which side of the `await` they are.
             const stream = await untracked(() => {
                 return this.loaderFn({
-                    request: request,
+                    request: extRequest.request,
                     abortSignal,
                     previous: {
                         status: previousStatus,
                     },
                 });
             });
-            if (abortSignal.aborted) {
+            // If this request has been aborted, or the current request no longer
+            // matches this load, then we should ignore this resolution.
+            if (abortSignal.aborted || untracked(this.extRequest) !== extRequest) {
                 return;
             }
             this.state.set({
+                extRequest,
                 status: ResourceStatus.Resolved,
                 previousStatus: ResourceStatus.Resolved,
                 stream,
             });
         }
         catch (err) {
-            if (abortSignal.aborted) {
+            if (abortSignal.aborted || untracked(this.extRequest) !== extRequest) {
                 return;
             }
             this.state.set({
+                extRequest,
                 status: ResourceStatus.Resolved,
                 previousStatus: ResourceStatus.Error,
                 stream: signal({ error: err }),
@@ -41355,10 +41412,13 @@ function getLoader(options) {
 function isStreamingResourceOptions(options) {
     return !!options.stream;
 }
-function computeStatusOfState(state) {
-    switch (state?.status) {
-        case undefined:
-            return ResourceStatus.Idle;
+/**
+ * Project from a state with `ResourceInternalStatus` to the user-facing `ResourceStatus`
+ */
+function projectStatusOfState(state) {
+    switch (state.status) {
+        case ResourceStatus.Loading:
+            return state.extRequest.reload === 0 ? ResourceStatus.Loading : ResourceStatus.Reloading;
         case ResourceStatus.Resolved:
             return isResolved(untracked(state.stream)) ? ResourceStatus.Resolved : ResourceStatus.Error;
         default: