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

package/fesm2022/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v19.2.0-next.1
+ * @license Angular v19.2.0-next.2
  * (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(directives) {
+function assertNoDuplicateDirectives$1(directives) {
     // The array needs at least two elements in order to have duplicates.
     if (directives.length < 2) {
         return;
@@ -4060,7 +4060,7 @@ function ɵɵnamespaceHTML() {
 function namespaceHTMLInternal() {
     instructionState.lFrame.currentNamespace = null;
 }
-function getNamespace$1() {
+function getNamespace() {
     return instructionState.lFrame.currentNamespace;
 }
 let _wasLastNodeCreated = true;
@@ -11648,14 +11648,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 +12257,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 +12331,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 +12543,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 +12643,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 +12736,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 +12807,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
 //////////////////////////
@@ -17793,6 +17345,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 +17875,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 +17964,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.2']
+                : // 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 +17988,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 +20619,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,265 +22926,6 @@ function setTestabilityGetter(getter) {
 }
 let _testabilityGetter;
 
-/**
- * Determine if the argument is shaped like a Promise
- */
-function isPromise(obj) {
-    // allow any Promise/A+ compliant thenable.
-    // It's up to the caller to ensure that obj.then conforms to the spec
-    return !!obj && typeof obj.then === 'function';
-}
-/**
- * Determine if the argument is a Subscribable
- */
-function isSubscribable(obj) {
-    return !!obj && typeof obj.subscribe === 'function';
-}
-
-/**
- * A DI token that you can use to provide
- * one or more initialization functions.
- *
- * The provided functions are injected at application startup and executed during
- * app initialization. If any of these functions returns a Promise or an Observable, initialization
- * does not complete until the Promise is resolved or the Observable is completed.
- *
- * You can, for example, create a factory function that loads language data
- * or an external configuration, and provide that function to the `APP_INITIALIZER` token.
- * The function is executed during the application bootstrap process,
- * and the needed data is available on startup.
- *
- * Note that the provided initializer is run in the injection context.
- *
- * @deprecated from v19.0.0, use provideAppInitializer instead
- *
- * @see {@link ApplicationInitStatus}
- * @see {@link provideAppInitializer}
- *
- * @usageNotes
- *
- * The following example illustrates how to configure a multi-provider using `APP_INITIALIZER` token
- * and a function returning a promise.
- * ### Example with NgModule-based application
- * ```ts
- *  function initializeApp(): Promise<any> {
- *    const http = inject(HttpClient);
- *    return firstValueFrom(
- *      http
- *        .get("https://someUrl.com/api/user")
- *        .pipe(tap(user => { ... }))
- *    );
- *  }
- *
- *  @NgModule({
- *   imports: [BrowserModule],
- *   declarations: [AppComponent],
- *   bootstrap: [AppComponent],
- *   providers: [{
- *     provide: APP_INITIALIZER,
- *     useValue: initializeApp,
- *     multi: true,
- *    }]
- *   })
- *  export class AppModule {}
- * ```
- *
- * ### Example with standalone application
- * ```ts
- * function initializeApp() {
- *   const http = inject(HttpClient);
- *   return firstValueFrom(
- *     http
- *       .get("https://someUrl.com/api/user")
- *       .pipe(tap(user => { ... }))
- *   );
- * }
- *
- * bootstrapApplication(App, {
- *   providers: [
- *     provideHttpClient(),
- *     {
- *       provide: APP_INITIALIZER,
- *       useValue: initializeApp,
- *       multi: true,
- *     },
- *   ],
- * });
-
- * ```
- *
- *
- * It's also possible to configure a multi-provider using `APP_INITIALIZER` token and a function
- * returning an observable, see an example below. Note: the `HttpClient` in this example is used for
- * demo purposes to illustrate how the factory function can work with other providers available
- * through DI.
- *
- * ### Example with NgModule-based application
- * ```ts
- * function initializeApp() {
- *   const http = inject(HttpClient);
- *   return firstValueFrom(
- *     http
- *       .get("https://someUrl.com/api/user")
- *       .pipe(tap(user => { ... }))
- *   );
- * }
- *
- * @NgModule({
- *   imports: [BrowserModule, HttpClientModule],
- *   declarations: [AppComponent],
- *   bootstrap: [AppComponent],
- *   providers: [{
- *     provide: APP_INITIALIZER,
- *     useValue: initializeApp,
- *     multi: true,
- *   }]
- * })
- * export class AppModule {}
- * ```
- *
- * ### Example with standalone application
- * ```ts
- * function initializeApp() {
- *   const http = inject(HttpClient);
- *   return firstValueFrom(
- *     http
- *       .get("https://someUrl.com/api/user")
- *       .pipe(tap(user => { ... }))
- *   );
- * }
- *
- * bootstrapApplication(App, {
- *   providers: [
- *     provideHttpClient(),
- *     {
- *       provide: APP_INITIALIZER,
- *       useValue: initializeApp,
- *       multi: true,
- *     },
- *   ],
- * });
- * ```
- *
- * @publicApi
- */
-const APP_INITIALIZER = new InjectionToken(ngDevMode ? 'Application Initializer' : '');
-/**
- * @description
- * The provided function is injected at application startup and executed during
- * app initialization. If the function returns a Promise or an Observable, initialization
- * does not complete until the Promise is resolved or the Observable is completed.
- *
- * You can, for example, create a function that loads language data
- * or an external configuration, and provide that function using `provideAppInitializer()`.
- * The function is executed during the application bootstrap process,
- * and the needed data is available on startup.
- *
- * Note that the provided initializer is run in the injection context.
- *
- * Previously, this was achieved using the `APP_INITIALIZER` token which is now deprecated.
- *
- * @see {@link APP_INITIALIZER}
- *
- * @usageNotes
- * The following example illustrates how to configure an initialization function using
- * `provideAppInitializer()`
- * ```ts
- * bootstrapApplication(App, {
- *   providers: [
- *     provideAppInitializer(() => {
- *       const http = inject(HttpClient);
- *       return firstValueFrom(
- *         http
- *           .get("https://someUrl.com/api/user")
- *           .pipe(tap(user => { ... }))
- *       );
- *     }),
- *     provideHttpClient(),
- *   ],
- * });
- * ```
- *
- * @publicApi
- */
-function provideAppInitializer(initializerFn) {
-    return makeEnvironmentProviders([
-        {
-            provide: APP_INITIALIZER,
-            multi: true,
-            useValue: initializerFn,
-        },
-    ]);
-}
-/**
- * A class that reflects the state of running {@link APP_INITIALIZER} functions.
- *
- * @publicApi
- */
-class ApplicationInitStatus {
-    // Using non null assertion, these fields are defined below
-    // within the `new Promise` callback (synchronously).
-    resolve;
-    reject;
-    initialized = false;
-    done = false;
-    donePromise = new Promise((res, rej) => {
-        this.resolve = res;
-        this.reject = rej;
-    });
-    appInits = inject(APP_INITIALIZER, { optional: true }) ?? [];
-    injector = inject(Injector);
-    constructor() {
-        if ((typeof ngDevMode === 'undefined' || ngDevMode) && !Array.isArray(this.appInits)) {
-            throw new RuntimeError(-209 /* RuntimeErrorCode.INVALID_MULTI_PROVIDER */, 'Unexpected type of the `APP_INITIALIZER` token value ' +
-                `(expected an array, but got ${typeof this.appInits}). ` +
-                'Please check that the `APP_INITIALIZER` token is configured as a ' +
-                '`multi: true` provider.');
-        }
-    }
-    /** @internal */
-    runInitializers() {
-        if (this.initialized) {
-            return;
-        }
-        const asyncInitPromises = [];
-        for (const appInits of this.appInits) {
-            const initResult = runInInjectionContext(this.injector, appInits);
-            if (isPromise(initResult)) {
-                asyncInitPromises.push(initResult);
-            }
-            else if (isSubscribable(initResult)) {
-                const observableAsPromise = new Promise((resolve, reject) => {
-                    initResult.subscribe({ complete: resolve, error: reject });
-                });
-                asyncInitPromises.push(observableAsPromise);
-            }
-        }
-        const complete = () => {
-            // @ts-expect-error overwriting a readonly
-            this.done = true;
-            this.resolve();
-        };
-        Promise.all(asyncInitPromises)
-            .then(() => {
-            complete();
-        })
-            .catch((e) => {
-            this.reject(e);
-        });
-        if (asyncInitPromises.length === 0) {
-            complete();
-        }
-        this.initialized = true;
-    }
-    static ɵfac = function ApplicationInitStatus_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ApplicationInitStatus)(); };
-    static ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: ApplicationInitStatus, factory: ApplicationInitStatus.ɵfac, providedIn: 'root' });
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ApplicationInitStatus, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], () => [], null); })();
-
 /**
  * A scheduler which manages the execution of effects.
  */
@@ -23228,6 +22997,265 @@ class ZoneAwareEffectScheduler {
     }
 }
 
+/**
+ * Determine if the argument is shaped like a Promise
+ */
+function isPromise(obj) {
+    // allow any Promise/A+ compliant thenable.
+    // It's up to the caller to ensure that obj.then conforms to the spec
+    return !!obj && typeof obj.then === 'function';
+}
+/**
+ * Determine if the argument is a Subscribable
+ */
+function isSubscribable(obj) {
+    return !!obj && typeof obj.subscribe === 'function';
+}
+
+/**
+ * A DI token that you can use to provide
+ * one or more initialization functions.
+ *
+ * The provided functions are injected at application startup and executed during
+ * app initialization. If any of these functions returns a Promise or an Observable, initialization
+ * does not complete until the Promise is resolved or the Observable is completed.
+ *
+ * You can, for example, create a factory function that loads language data
+ * or an external configuration, and provide that function to the `APP_INITIALIZER` token.
+ * The function is executed during the application bootstrap process,
+ * and the needed data is available on startup.
+ *
+ * Note that the provided initializer is run in the injection context.
+ *
+ * @deprecated from v19.0.0, use provideAppInitializer instead
+ *
+ * @see {@link ApplicationInitStatus}
+ * @see {@link provideAppInitializer}
+ *
+ * @usageNotes
+ *
+ * The following example illustrates how to configure a multi-provider using `APP_INITIALIZER` token
+ * and a function returning a promise.
+ * ### Example with NgModule-based application
+ * ```ts
+ *  function initializeApp(): Promise<any> {
+ *    const http = inject(HttpClient);
+ *    return firstValueFrom(
+ *      http
+ *        .get("https://someUrl.com/api/user")
+ *        .pipe(tap(user => { ... }))
+ *    );
+ *  }
+ *
+ *  @NgModule({
+ *   imports: [BrowserModule],
+ *   declarations: [AppComponent],
+ *   bootstrap: [AppComponent],
+ *   providers: [{
+ *     provide: APP_INITIALIZER,
+ *     useValue: initializeApp,
+ *     multi: true,
+ *    }]
+ *   })
+ *  export class AppModule {}
+ * ```
+ *
+ * ### Example with standalone application
+ * ```ts
+ * function initializeApp() {
+ *   const http = inject(HttpClient);
+ *   return firstValueFrom(
+ *     http
+ *       .get("https://someUrl.com/api/user")
+ *       .pipe(tap(user => { ... }))
+ *   );
+ * }
+ *
+ * bootstrapApplication(App, {
+ *   providers: [
+ *     provideHttpClient(),
+ *     {
+ *       provide: APP_INITIALIZER,
+ *       useValue: initializeApp,
+ *       multi: true,
+ *     },
+ *   ],
+ * });
+
+ * ```
+ *
+ *
+ * It's also possible to configure a multi-provider using `APP_INITIALIZER` token and a function
+ * returning an observable, see an example below. Note: the `HttpClient` in this example is used for
+ * demo purposes to illustrate how the factory function can work with other providers available
+ * through DI.
+ *
+ * ### Example with NgModule-based application
+ * ```ts
+ * function initializeApp() {
+ *   const http = inject(HttpClient);
+ *   return firstValueFrom(
+ *     http
+ *       .get("https://someUrl.com/api/user")
+ *       .pipe(tap(user => { ... }))
+ *   );
+ * }
+ *
+ * @NgModule({
+ *   imports: [BrowserModule, HttpClientModule],
+ *   declarations: [AppComponent],
+ *   bootstrap: [AppComponent],
+ *   providers: [{
+ *     provide: APP_INITIALIZER,
+ *     useValue: initializeApp,
+ *     multi: true,
+ *   }]
+ * })
+ * export class AppModule {}
+ * ```
+ *
+ * ### Example with standalone application
+ * ```ts
+ * function initializeApp() {
+ *   const http = inject(HttpClient);
+ *   return firstValueFrom(
+ *     http
+ *       .get("https://someUrl.com/api/user")
+ *       .pipe(tap(user => { ... }))
+ *   );
+ * }
+ *
+ * bootstrapApplication(App, {
+ *   providers: [
+ *     provideHttpClient(),
+ *     {
+ *       provide: APP_INITIALIZER,
+ *       useValue: initializeApp,
+ *       multi: true,
+ *     },
+ *   ],
+ * });
+ * ```
+ *
+ * @publicApi
+ */
+const APP_INITIALIZER = new InjectionToken(ngDevMode ? 'Application Initializer' : '');
+/**
+ * @description
+ * The provided function is injected at application startup and executed during
+ * app initialization. If the function returns a Promise or an Observable, initialization
+ * does not complete until the Promise is resolved or the Observable is completed.
+ *
+ * You can, for example, create a function that loads language data
+ * or an external configuration, and provide that function using `provideAppInitializer()`.
+ * The function is executed during the application bootstrap process,
+ * and the needed data is available on startup.
+ *
+ * Note that the provided initializer is run in the injection context.
+ *
+ * Previously, this was achieved using the `APP_INITIALIZER` token which is now deprecated.
+ *
+ * @see {@link APP_INITIALIZER}
+ *
+ * @usageNotes
+ * The following example illustrates how to configure an initialization function using
+ * `provideAppInitializer()`
+ * ```ts
+ * bootstrapApplication(App, {
+ *   providers: [
+ *     provideAppInitializer(() => {
+ *       const http = inject(HttpClient);
+ *       return firstValueFrom(
+ *         http
+ *           .get("https://someUrl.com/api/user")
+ *           .pipe(tap(user => { ... }))
+ *       );
+ *     }),
+ *     provideHttpClient(),
+ *   ],
+ * });
+ * ```
+ *
+ * @publicApi
+ */
+function provideAppInitializer(initializerFn) {
+    return makeEnvironmentProviders([
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useValue: initializerFn,
+        },
+    ]);
+}
+/**
+ * A class that reflects the state of running {@link APP_INITIALIZER} functions.
+ *
+ * @publicApi
+ */
+class ApplicationInitStatus {
+    // Using non null assertion, these fields are defined below
+    // within the `new Promise` callback (synchronously).
+    resolve;
+    reject;
+    initialized = false;
+    done = false;
+    donePromise = new Promise((res, rej) => {
+        this.resolve = res;
+        this.reject = rej;
+    });
+    appInits = inject(APP_INITIALIZER, { optional: true }) ?? [];
+    injector = inject(Injector);
+    constructor() {
+        if ((typeof ngDevMode === 'undefined' || ngDevMode) && !Array.isArray(this.appInits)) {
+            throw new RuntimeError(-209 /* RuntimeErrorCode.INVALID_MULTI_PROVIDER */, 'Unexpected type of the `APP_INITIALIZER` token value ' +
+                `(expected an array, but got ${typeof this.appInits}). ` +
+                'Please check that the `APP_INITIALIZER` token is configured as a ' +
+                '`multi: true` provider.');
+        }
+    }
+    /** @internal */
+    runInitializers() {
+        if (this.initialized) {
+            return;
+        }
+        const asyncInitPromises = [];
+        for (const appInits of this.appInits) {
+            const initResult = runInInjectionContext(this.injector, appInits);
+            if (isPromise(initResult)) {
+                asyncInitPromises.push(initResult);
+            }
+            else if (isSubscribable(initResult)) {
+                const observableAsPromise = new Promise((resolve, reject) => {
+                    initResult.subscribe({ complete: resolve, error: reject });
+                });
+                asyncInitPromises.push(observableAsPromise);
+            }
+        }
+        const complete = () => {
+            // @ts-expect-error overwriting a readonly
+            this.done = true;
+            this.resolve();
+        };
+        Promise.all(asyncInitPromises)
+            .then(() => {
+            complete();
+        })
+            .catch((e) => {
+            this.reject(e);
+        });
+        if (asyncInitPromises.length === 0) {
+            complete();
+        }
+        this.initialized = true;
+    }
+    static ɵfac = function ApplicationInitStatus_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ApplicationInitStatus)(); };
+    static ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: ApplicationInitStatus, factory: ApplicationInitStatus.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ApplicationInitStatus, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], () => [], null); })();
+
 /**
  * A DI token that provides a set of callbacks to
  * be called for every component that is bootstrapped.
@@ -23269,24 +23297,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);
@@ -23576,18 +23586,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 +23619,8 @@ class ApplicationRef {
         }
         finally {
             this._runningTick = false;
+            this.tracingSnapshot?.dispose();
+            this.tracingSnapshot = null;
             setActiveConsumer$1(prevConsumer);
             this.afterTick.next();
             profiler(13 /* ProfilerEvent.ChangeDetectionEnd */);
@@ -27979,24 +27992,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 +28016,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 +28072,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 +28100,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 +28115,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 +28168,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);
     }
@@ -34929,7 +34925,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('19.2.0-next.1');
+const VERSION = new Version('19.2.0-next.2');
 
 /**
  * Combination of NgModuleFactory and ComponentFactories.
@@ -36078,6 +36074,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.
@@ -41136,16 +41150,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 +41169,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 +41230,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 +41248,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 +41262,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 +41301,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 +41367,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: