@angular/core 19.1.5 → 19.2.0-next.1

package/fesm2022/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v19.1.5
+ * @license Angular v19.2.0-next.1
  * (c) 2010-2024 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -3067,7 +3067,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$1(directives) {
+function assertNoDuplicateDirectives(directives) {
     // The array needs at least two elements in order to have duplicates.
     if (directives.length < 2) {
         return;
@@ -3244,7 +3244,7 @@ const setProfiler = (profiler) => {
  *  execution context
  * @returns
  */
-const profiler = function (event, instance, hookOrListener) {
+const profiler = function (event, instance = null, hookOrListener) {
     if (profilerCallback != null /* both `null` and `undefined` */) {
         profilerCallback(event, instance, hookOrListener);
     }
@@ -4060,7 +4060,7 @@ function ɵɵnamespaceHTML() {
 function namespaceHTMLInternal() {
     instructionState.lFrame.currentNamespace = null;
 }
-function getNamespace() {
+function getNamespace$1() {
     return instructionState.lFrame.currentNamespace;
 }
 let _wasLastNodeCreated = true;
@@ -8756,6 +8756,10 @@ class AfterRenderImpl {
      * might be scheduled.
      */
     execute() {
+        const hasSequencesToExecute = this.sequences.size > 0;
+        if (hasSequencesToExecute) {
+            profiler(16 /* ProfilerEvent.AfterRenderHooksStart */);
+        }
         this.executing = true;
         for (const phase of AFTER_RENDER_PHASES) {
             for (const sequence of this.sequences) {
@@ -8763,7 +8767,11 @@ class AfterRenderImpl {
                     continue;
                 }
                 try {
-                    sequence.pipelinedValue = this.ngZone.runOutsideAngular(() => this.maybeTrace(() => sequence.hooks[phase](sequence.pipelinedValue), sequence.snapshot));
+                    sequence.pipelinedValue = this.ngZone.runOutsideAngular(() => this.maybeTrace(() => {
+                        const hookFn = sequence.hooks[phase];
+                        const value = hookFn(sequence.pipelinedValue);
+                        return value;
+                    }, sequence.snapshot));
                 }
                 catch (err) {
                     sequence.erroredOrDestroyed = true;
@@ -8789,6 +8797,9 @@ class AfterRenderImpl {
             this.scheduler.notify(8 /* NotificationSource.DeferredRenderHook */);
         }
         this.deferredRegistrations.clear();
+        if (hasSequencesToExecute) {
+            profiler(17 /* ProfilerEvent.AfterRenderHooksEnd */);
+        }
     }
     register(sequence) {
         if (!this.executing) {
@@ -11637,6 +11648,14 @@ 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.
  *
@@ -12246,13 +12265,38 @@ function selectIndexInternal(tView, lView, index, checkNoChangesMode) {
     setSelectedIndex(index);
 }
 
-/** 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 ɵɵ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);
+}
 
 function writeToDirectiveInput(def, instance, publicName, privateName, flags, value) {
     const prevConsumer = setActiveConsumer$1(null);
@@ -12320,6 +12364,34 @@ 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 */;
@@ -12532,6 +12604,106 @@ 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.
  *
@@ -12632,6 +12804,126 @@ 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.
  */
@@ -12725,6 +13017,121 @@ 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.
@@ -12796,6 +13203,58 @@ 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
 //////////////////////////
@@ -12946,7 +13405,9 @@ function renderComponent(hostLView, componentHostIdx) {
     if (hostRNode !== null && componentView[HYDRATION] === null) {
         componentView[HYDRATION] = retrieveHydrationInfo(hostRNode, componentView[INJECTOR]);
     }
+    profiler(18 /* ProfilerEvent.ComponentStart */);
     renderView(componentTView, componentView, componentView[CONTEXT]);
+    profiler(19 /* ProfilerEvent.ComponentEnd */, componentView[CONTEXT]);
 }
 /**
  * Syncs an LView instance with its blueprint if they have gotten out of sync.
@@ -14487,8 +14948,10 @@ function markTransplantedViewsForRefresh(lView) {
  */
 function detectChangesInComponent(hostLView, componentHostIdx, mode) {
     ngDevMode && assertEqual(isCreationMode(hostLView), false, 'Should be run in update mode');
+    profiler(18 /* ProfilerEvent.ComponentStart */);
     const componentView = getComponentLViewByIndex(componentHostIdx, hostLView);
     detectChangesInViewIfAttached(componentView, mode);
+    profiler(19 /* ProfilerEvent.ComponentEnd */, componentView[CONTEXT]);
 }
 /**
  * Visits a view as part of change detection traversal.
@@ -17330,492 +17793,6 @@ 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;
     /**
@@ -17860,51 +17837,9 @@ function toRefArray(map, isInputMap) {
     }
     return array;
 }
-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);
+function getNamespace(elementName) {
+    const name = elementName.toLowerCase();
+    return name === 'svg' ? SVG_NAMESPACE : name === 'math' ? MATH_ML_NAMESPACE : null;
 }
 /**
  * ComponentFactory interface implementation.
@@ -17946,24 +17881,66 @@ class ComponentFactory extends ComponentFactory$1 {
         this.isBoundToModule = !!ngModule;
     }
     create(injector, projectableNodes, rootSelectorOrNode, environmentInjector) {
+        profiler(22 /* ProfilerEvent.DynamicComponentStart */);
         const prevConsumer = setActiveConsumer$1(null);
         try {
-            const cmpDef = this.componentDef;
-            ngDevMode && verifyNotAnOrphanComponent(cmpDef);
-            const tAttributes = rootSelectorOrNode
-                ? ['ng-version', '19.1.5']
-                : // Extract attributes and classes from the first selector only to match VE behavior.
-                    extractAttrsAndClassesFromSelector(this.componentDef.selectors[0]);
+            // 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 */);
+            }
             // Create the root view. Uses empty TView and ContentTemplate.
-            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;
+            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;
             // 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
@@ -17972,22 +17949,37 @@ class ComponentFactory extends ComponentFactory$1 {
             enterView(rootLView);
             let componentView = null;
             try {
-                const hostTNode = elementStartFirstCreatePass(HEADER_OFFSET, rootTView, rootLView, '#host', () => [this.componentDef], true, 0);
-                // ---- element instruction
+                // 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);
                 // 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 (hostElement) {
-                    setupStaticAttributes(hostRenderer, hostElement, hostTNode);
-                    attachPatchData(hostElement, rootLView);
+                if (hostRNode) {
+                    setupStaticAttributes(hostRenderer, hostRNode, hostTNode);
+                    attachPatchData(hostRNode, 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);
-                elementEndFirstCreatePass(rootTView, hostTNode);
                 if (projectableNodes !== undefined) {
                     projectNodes(hostTNode, this.ngContentSelectors, projectableNodes);
                 }
+                // 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);
                 componentView = getComponentLViewByIndex(hostTNode.index, rootLView);
                 // TODO(pk): why do we need this logic?
                 rootLView[CONTEXT] = componentView[CONTEXT];
@@ -18003,6 +17995,7 @@ class ComponentFactory extends ComponentFactory$1 {
                 throw e;
             }
             finally {
+                profiler(23 /* ProfilerEvent.DynamicComponentEnd */);
                 leaveView();
             }
             return new ComponentRef(this.componentType, rootLView);
@@ -20602,11 +20595,7 @@ 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);
-    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);
+    resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex));
     registerPostOrderHooks(tView, tNode);
     const embeddedTView = (tNode.tView = createTView(2 /* TViewType.Embedded */, tNode, templateFn, decls, vars, tView.directiveRegistry, tView.pipeRegistry, null, tView.schemas, tViewConsts, null /* ssrId */));
     if (tView.queries !== null) {
@@ -21191,6 +21180,7 @@ function findMatchingDehydratedViewForDeferBlock(lContainer, lDetails) {
  * Applies changes to the DOM to reflect a given state.
  */
 function applyDeferBlockState(newState, lDetails, lContainer, tNode, hostLView) {
+    profiler(20 /* ProfilerEvent.DeferBlockStateStart */);
     const stateTmplIndex = getTemplateIndexForState(newState, hostLView, tNode);
     if (stateTmplIndex !== null) {
         lDetails[DEFER_BLOCK_STATE] = newState;
@@ -21239,6 +21229,7 @@ function applyDeferBlockState(newState, lDetails, lContainer, tNode, hostLView)
             lDetails[ON_COMPLETE_FNS] = null;
         }
     }
+    profiler(21 /* ProfilerEvent.DeferBlockStateEnd */);
 }
 /**
  * Extends the `applyDeferBlockState` with timer-based scheduling.
@@ -23278,6 +23269,24 @@ 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);
@@ -23506,6 +23515,7 @@ class ApplicationRef {
      * {@example core/ts/platform/platform.ts region='domNode'}
      */
     bootstrap(componentOrFactory, rootSelectorOrNode) {
+        profiler(10 /* ProfilerEvent.BootstrapComponentStart */);
         (typeof ngDevMode === 'undefined' || ngDevMode) && warnIfDestroyed(this._destroyed);
         const isComponentFactory = componentOrFactory instanceof ComponentFactory$1;
         const initStatus = this._injector.get(ApplicationInitStatus);
@@ -23546,6 +23556,7 @@ class ApplicationRef {
             const _console = this._injector.get(Console);
             _console.log(`Angular is running in development mode.`);
         }
+        profiler(11 /* ProfilerEvent.BootstrapComponentEnd */, compRef);
         return compRef;
     }
     /**
@@ -23566,6 +23577,7 @@ class ApplicationRef {
     }
     /** @internal */
     _tick = () => {
+        profiler(12 /* ProfilerEvent.ChangeDetectionStart */);
         if (this.tracingSnapshot !== null) {
             const snapshot = this.tracingSnapshot;
             this.tracingSnapshot = null;
@@ -23598,6 +23610,7 @@ class ApplicationRef {
             this._runningTick = false;
             setActiveConsumer$1(prevConsumer);
             this.afterTick.next();
+            profiler(13 /* ProfilerEvent.ChangeDetectionEnd */);
         }
     };
     /**
@@ -23613,7 +23626,9 @@ class ApplicationRef {
         this.deferredDirtyFlags = 0 /* ApplicationRefDirtyFlags.None */;
         let runs = 0;
         while (this.dirtyFlags !== 0 /* ApplicationRefDirtyFlags.None */ && runs++ < MAXIMUM_REFRESH_RERUNS) {
+            profiler(14 /* ProfilerEvent.ChangeDetectionSyncStart */);
             this.synchronizeOnce();
+            profiler(15 /* ProfilerEvent.ChangeDetectionSyncEnd */);
         }
         if ((typeof ngDevMode === 'undefined' || ngDevMode) && runs >= MAXIMUM_REFRESH_RERUNS) {
             throw new RuntimeError(103 /* RuntimeErrorCode.INFINITE_CHANGE_DETECTION */, ngDevMode &&
@@ -27964,6 +27979,24 @@ 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.
  *
@@ -27988,7 +28021,7 @@ function ɵɵelementStart(index, name, attrsIndex, localRefsIndex) {
     ngDevMode && assertIndexInRange(lView, adjustedIndex);
     const renderer = lView[RENDERER];
     const tNode = tView.firstCreatePass
-        ? elementStartFirstCreatePass(adjustedIndex, tView, lView, name, findDirectiveDefMatches, getBindingsEnabled(), attrsIndex, localRefsIndex)
+        ? elementStartFirstCreatePass(adjustedIndex, tView, lView, name, attrsIndex, localRefsIndex)
         : tView.data[adjustedIndex];
     const native = _locateOrCreateElementNode(tView, lView, tNode, renderer, name, index);
     lView[adjustedIndex] = native;
@@ -28044,7 +28077,10 @@ function ɵɵelementEnd() {
     decreaseElementDepthCount();
     const tView = getTView();
     if (tView.firstCreatePass) {
-        elementEndFirstCreatePass(tView, tNode);
+        registerPostOrderHooks(tView, currentTNode);
+        if (isContentQueryHost(currentTNode)) {
+            tView.queries.elementEnd(currentTNode);
+        }
     }
     if (tNode.classesWithoutHost != null && hasClassInput(tNode)) {
         setDirectiveInputsWhichShadowsStyling(tView, tNode, getLView(), tNode.classesWithoutHost, true);
@@ -28072,7 +28108,7 @@ function ɵɵelement(index, name, attrsIndex, localRefsIndex) {
 }
 let _locateOrCreateElementNode = (tView, lView, tNode, renderer, name, index) => {
     lastNodeWasCreated(true);
-    return createElementNode(renderer, name, getNamespace());
+    return createElementNode(renderer, name, getNamespace$1());
 };
 /**
  * Enables hydration code path (to lookup existing elements in DOM)
@@ -28087,7 +28123,7 @@ function locateOrCreateElementNodeImpl(tView, lView, tNode, renderer, name, inde
     lastNodeWasCreated(isNodeCreationMode);
     // Regular creation mode.
     if (isNodeCreationMode) {
-        return createElementNode(renderer, name, getNamespace());
+        return createElementNode(renderer, name, getNamespace$1());
     }
     // Hydration mode, looking up an existing element in DOM.
     const native = locateNextRNode(hydrationInfo, tView, lView, tNode);
@@ -28140,11 +28176,7 @@ function elementContainerStartFirstCreatePass(index, tView, lView, attrsIndex, l
         computeStaticStyling(tNode, attrs, true);
     }
     const localRefs = getConstant(tViewConsts, localRefsIndex);
-    if (getBindingsEnabled()) {
-        resolveDirectives(tView, lView, tNode, localRefs, findDirectiveDefMatches);
-    }
-    // Merge the template attrs last so that they have the highest priority.
-    tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, tNode.attrs);
+    resolveDirectives(tView, lView, tNode, localRefs);
     if (tView.queries !== null) {
         tView.queries.elementStart(tView, tNode);
     }
@@ -34897,7 +34929,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('19.1.5');
+const VERSION = new Version('19.2.0-next.1');
 
 /**
  * Combination of NgModuleFactory and ComponentFactories.
@@ -36046,24 +36078,6 @@ 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.
@@ -38998,6 +39012,7 @@ function setAlternateWeakRefImpl(impl) {
  * @returns A promise that returns an `ApplicationRef` instance once resolved.
  */
 function internalCreateApplication(config) {
+    profiler(8 /* ProfilerEvent.BootstrapApplicationStart */);
     try {
         const { rootComponent, appProviders, platformProviders } = config;
         if ((typeof ngDevMode === 'undefined' || ngDevMode) && rootComponent !== undefined) {
@@ -39028,6 +39043,9 @@ function internalCreateApplication(config) {
     catch (e) {
         return Promise.reject(e);
     }
+    finally {
+        profiler(9 /* ProfilerEvent.BootstrapApplicationEnd */);
+    }
 }
 
 /** Apps in which we've enabled event replay.
@@ -41084,20 +41102,10 @@ var ResourceStatus;
     ResourceStatus[ResourceStatus["Local"] = 5] = "Local";
 })(ResourceStatus || (ResourceStatus = {}));
 
-/**
- * Constructs a `Resource` that projects a reactive request to an asynchronous operation defined by
- * a loader function, which exposes the result of the loading operation via signals.
- *
- * Note that `resource` is intended for _read_ operations, not operations which perform mutations.
- * `resource` will cancel in-progress loads via the `AbortSignal` when destroyed or when a new
- * request object becomes available, which could prematurely abort mutations.
- *
- * @experimental
- */
 function resource(options) {
     options?.injector || assertInInjectionContext(resource);
     const request = (options.request ?? (() => null));
-    return new ResourceImpl(request, options.loader, undefined, options.equal ? wrapEqualityFn(options.equal) : undefined, options.injector ?? inject(Injector));
+    return new ResourceImpl(request, getLoader(options), options.defaultValue, options.equal ? wrapEqualityFn(options.equal) : undefined, options.injector ?? inject(Injector));
 }
 /**
  * Base class which implements `.value` as a `WritableSignal` by delegating `.set` and `.update`.
@@ -41143,9 +41151,13 @@ class ResourceImpl extends BaseWritableResource {
     resolvePendingTask = undefined;
     destroyed = false;
     constructor(request, loaderFn, defaultValue, equal, injector) {
+        super(
         // Feed a computed signal for the value to `BaseWritableResource`, which will upgrade it to a
         // `WritableSignal` that delegates to `ResourceImpl.set`.
-        super(computed(() => this.state().value, { equal }));
+        computed(() => {
+            const stream = this.state()?.stream?.();
+            return stream && isResolved(stream) ? stream.value : this.defaultValue;
+        }, { equal }));
         this.loaderFn = loaderFn;
         this.defaultValue = defaultValue;
         this.equal = equal;
@@ -41174,13 +41186,10 @@ class ResourceImpl extends BaseWritableResource {
                 status,
                 // When the state of the resource changes due to the request, remember the previous status
                 // for the loader to consider.
-                previousStatus: previous?.value.status ?? ResourceStatus.Idle,
+                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.
-                value: previous && status === ResourceStatus.Reloading
-                    ? previous.value.value
-                    : this.defaultValue,
-                error: undefined,
+                stream: previous && status === ResourceStatus.Reloading ? previous.value.stream : undefined,
             }),
         });
         this.effectRef = effect(this.loadEffect.bind(this), {
@@ -41190,8 +41199,16 @@ class ResourceImpl extends BaseWritableResource {
         // Cancel any pending request when the resource itself is destroyed.
         injector.get(DestroyRef).onDestroy(() => this.destroy());
     }
-    status = computed(() => this.state().status);
-    error = computed(() => this.state().error);
+    status = computed(() => {
+        if (this.state().status !== ResourceStatus.Resolved) {
+            return this.state().status;
+        }
+        return isResolved(this.state().stream()) ? ResourceStatus.Resolved : ResourceStatus.Error;
+    });
+    error = computed(() => {
+        const stream = this.state().stream?.();
+        return stream && !isResolved(stream) ? stream.error : undefined;
+    });
     /**
      * Called either directly via `WritableResource.set` or via `.value.set()`.
      */
@@ -41199,16 +41216,16 @@ class ResourceImpl extends BaseWritableResource {
         if (this.destroyed) {
             return;
         }
-        const currentState = untracked(this.state);
-        if (this.equal ? this.equal(currentState.value, value) : currentState.value === value) {
+        const current = untracked(this.value);
+        if (untracked(this.status) === ResourceStatus.Local &&
+            (this.equal ? this.equal(current, value) : current === value)) {
             return;
         }
         // Enter Local state with the user-defined value.
         this.state.set({
             status: ResourceStatus.Local,
             previousStatus: ResourceStatus.Local,
-            value,
-            error: undefined,
+            stream: signal({ value }),
         });
         // We're departing from whatever state the resource was in previously, so cancel any in-progress
         // loading operations.
@@ -41234,14 +41251,13 @@ class ResourceImpl extends BaseWritableResource {
         this.state.set({
             status: ResourceStatus.Idle,
             previousStatus: ResourceStatus.Idle,
-            value: this.defaultValue,
-            error: undefined,
+            stream: undefined,
         });
     }
     async loadEffect() {
         // 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: previousStatus } = untracked(this.state);
+        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.
@@ -41250,8 +41266,8 @@ class ResourceImpl extends BaseWritableResource {
             // Nothing to load (and we should already be in a non-loading state).
             return;
         }
-        else if (previousStatus !== ResourceStatus.Loading &&
-            previousStatus !== ResourceStatus.Reloading) {
+        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.
@@ -41268,49 +41284,45 @@ class ResourceImpl extends BaseWritableResource {
         // After the loading operation is cancelled, `this.resolvePendingTask` no longer represents this
         // particular task, but this `await` may eventually resolve/reject. Thus, when we cancel in
         // response to (1) below, we need to cancel the locally saved task.
-        const resolvePendingTask = (this.resolvePendingTask = this.pendingTasks.add());
+        let resolvePendingTask = (this.resolvePendingTask =
+            this.pendingTasks.add());
         const { signal: abortSignal } = (this.pendingController = new AbortController());
         try {
             // The actual loading is run through `untracked` - only the request side of `resource` is
             // reactive. This avoids any confusion with signals tracking or not tracking depending on
             // which side of the `await` they are.
-            const result = await untracked(() => this.loaderFn({
-                abortSignal,
-                request: request,
-                previous: {
-                    status: previousStatus,
-                },
-            }));
+            const stream = await untracked(() => {
+                return this.loaderFn({
+                    request: request,
+                    abortSignal,
+                    previous: {
+                        status: previousStatus,
+                    },
+                });
+            });
             if (abortSignal.aborted) {
-                // This load operation was cancelled.
                 return;
             }
-            // Success :)
             this.state.set({
                 status: ResourceStatus.Resolved,
                 previousStatus: ResourceStatus.Resolved,
-                value: result,
-                error: undefined,
+                stream,
             });
         }
         catch (err) {
             if (abortSignal.aborted) {
-                // This load operation was cancelled.
                 return;
             }
-            // Fail :(
             this.state.set({
-                status: ResourceStatus.Error,
+                status: ResourceStatus.Resolved,
                 previousStatus: ResourceStatus.Error,
-                value: this.defaultValue,
-                error: err,
+                stream: signal({ error: err }),
             });
         }
         finally {
-            // Resolve the pending task now that loading is done.
-            resolvePendingTask();
-            // Free the abort controller to drop any registered 'abort' callbacks.
-            this.pendingController = undefined;
+            // Resolve the pending task now that the resource has a value.
+            resolvePendingTask?.();
+            resolvePendingTask = undefined;
         }
     }
     abortInProgressLoad() {
@@ -41327,6 +41339,35 @@ class ResourceImpl extends BaseWritableResource {
 function wrapEqualityFn(equal) {
     return (a, b) => (a === undefined || b === undefined ? a === b : equal(a, b));
 }
+function getLoader(options) {
+    if (isStreamingResourceOptions(options)) {
+        return options.stream;
+    }
+    return async (params) => {
+        try {
+            return signal({ value: await options.loader(params) });
+        }
+        catch (err) {
+            return signal({ error: err });
+        }
+    };
+}
+function isStreamingResourceOptions(options) {
+    return !!options.stream;
+}
+function computeStatusOfState(state) {
+    switch (state?.status) {
+        case undefined:
+            return ResourceStatus.Idle;
+        case ResourceStatus.Resolved:
+            return isResolved(untracked(state.stream)) ? ResourceStatus.Resolved : ResourceStatus.Error;
+        default:
+            return state.status;
+    }
+}
+function isResolved(state) {
+    return state.error === undefined;
+}
 
 /**
  * Creates a `ComponentRef` instance based on provided component type and a set of options.