@angular/core 19.2.0-rc.0 → 20.0.0-next.0

package/fesm2022/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v19.2.0-rc.0
+ * @license Angular v20.0.0-next.0
  * (c) 2010-2024 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -967,8 +967,9 @@ function stringifyTypeFromDebugInfo(debugInfo) {
 
 /** Called when directives inject each other (creating a circular dependency) */
 function throwCyclicDependencyError(token, path) {
-    const depPath = path ? `. Dependency path: ${path.join(' > ')} > ${token}` : '';
-    throw new RuntimeError(-200 /* RuntimeErrorCode.CYCLIC_DI_DEPENDENCY */, ngDevMode ? `Circular dependency in DI detected for ${token}${depPath}` : token);
+    throw new RuntimeError(-200 /* RuntimeErrorCode.CYCLIC_DI_DEPENDENCY */, ngDevMode
+        ? `Circular dependency in DI detected for ${token}${path ? `. Dependency path: ${path.join(' > ')} > ${token}` : ''}`
+        : token);
 }
 function throwMixedMultiProviderError() {
     throw new Error(`Cannot mix multi providers and regular providers`);
@@ -7106,23 +7107,6 @@ function unwrapElementRef(value) {
     return value instanceof ElementRef ? value.nativeElement : value;
 }
 
-const markedFeatures = new Set();
-// tslint:disable:ban
-/**
- * A guarded `performance.mark` for feature marking.
- *
- * This method exists because while all supported browser and node.js version supported by Angular
- * support performance.mark API. This is not the case for other environments such as JSDOM and
- * Cloudflare workers.
- */
-function performanceMarkFeature(feature) {
-    if (markedFeatures.has(feature)) {
-        return;
-    }
-    markedFeatures.add(feature);
-    performance?.mark?.('mark_feature_usage', { detail: { feature } });
-}
-
 /**
  * Checks if the given `value` is a reactive `Signal`.
  */
@@ -7145,7 +7129,6 @@ function ɵunwrapWritableSignal(value) {
  * Create a `Signal` that can be set or updated directly.
  */
 function signal(initialValue, options) {
-    performanceMarkFeature('NgSignals');
     const signalFn = createSignal$1(initialValue);
     const node = signalFn[SIGNAL$1];
     if (options?.equal) {
@@ -8625,6 +8608,23 @@ var TracingAction;
  */
 const TracingService = new InjectionToken(ngDevMode ? 'TracingService' : '');
 
+const markedFeatures = new Set();
+// tslint:disable:ban
+/**
+ * A guarded `performance.mark` for feature marking.
+ *
+ * This method exists because while all supported browser and node.js version supported by Angular
+ * support performance.mark API. This is not the case for other environments such as JSDOM and
+ * Cloudflare workers.
+ */
+function performanceMarkFeature(feature) {
+    if (markedFeatures.has(feature)) {
+        return;
+    }
+    markedFeatures.add(feature);
+    performance?.mark?.('mark_feature_usage', { detail: { feature } });
+}
+
 /**
  * Asserts that the current stack frame is not within a reactive context. Useful
  * to disallow certain code from running inside a reactive context (see {@link toSignal}).
@@ -12559,15 +12559,6 @@ function executeTemplate(tView, lView, templateFn, rf, context) {
         profiler(postHookType, context);
     }
 }
-/**
- * Creates directive instances.
- */
-function createDirectivesInstancesInInstruction(tView, lView, tNode) {
-    if (!getBindingsEnabled())
-        return;
-    attachPatchData(getNativeByTNode(tNode, lView), lView);
-    createDirectivesInstances(tView, lView, tNode);
-}
 /**
  * Creates directive instances.
  */
@@ -12685,17 +12676,15 @@ function mapPropName(name) {
 }
 function elementPropertyInternal(tView, tNode, lView, propName, value, renderer, sanitizer, nativeOnly) {
     ngDevMode && assertNotSame(value, NO_CHANGE, 'Incoming value should never be NO_CHANGE.');
-    let inputData = tNode.inputs;
-    let dataValue;
-    if (!nativeOnly && inputData != null && (dataValue = inputData[propName])) {
-        setInputsForProperty(tView, lView, dataValue, propName, value);
-        if (isComponentHost(tNode))
-            markDirtyIfOnPush(lView, tNode.index);
-        if (ngDevMode) {
-            setNgReflectProperties(lView, tView, tNode, dataValue, value);
+    if (!nativeOnly) {
+        const hasSetInput = setAllInputsForProperty(tNode, tView, lView, propName, value);
+        if (hasSetInput) {
+            isComponentHost(tNode) && markDirtyIfOnPush(lView, tNode.index);
+            ngDevMode && setNgReflectProperties(lView, tView, tNode, propName, value);
+            return; // Stop propcessing if we've matched at least one input.
         }
     }
-    else if (tNode.type & 3 /* TNodeType.AnyRNode */) {
+    if (tNode.type & 3 /* TNodeType.AnyRNode */) {
         const element = getNativeByTNode(tNode, lView);
         propName = mapPropName(propName);
         if (ngDevMode) {
@@ -12744,14 +12733,25 @@ function setNgReflectProperty(lView, tNode, attrName, value) {
         renderer.setValue(element, textContent);
     }
 }
-function setNgReflectProperties(lView, tView, tNode, inputConfig, value) {
-    if (tNode.type & (3 /* TNodeType.AnyRNode */ | 4 /* TNodeType.Container */)) {
-        // Note: we set the private name of the input as the reflected property, not the public one.
-        for (let i = 0; i < inputConfig.length; i += 2) {
-            const index = inputConfig[i];
-            const lookupName = inputConfig[i + 1];
+function setNgReflectProperties(lView, tView, tNode, publicName, value) {
+    if (!(tNode.type & (3 /* TNodeType.AnyRNode */ | 4 /* TNodeType.Container */))) {
+        return;
+    }
+    const inputConfig = tNode.inputs?.[publicName];
+    const hostInputConfig = tNode.hostDirectiveInputs?.[publicName];
+    if (hostInputConfig) {
+        for (let i = 0; i < hostInputConfig.length; i += 2) {
+            const index = hostInputConfig[i];
+            const publicName = hostInputConfig[i + 1];
+            const def = tView.data[index];
+            setNgReflectProperty(lView, tNode, def.inputs[publicName][0], value);
+        }
+    }
+    // Note: we set the private name of the input as the reflected property, not the public one.
+    if (inputConfig) {
+        for (const index of inputConfig) {
             const def = tView.data[index];
-            setNgReflectProperty(lView, tNode, def.inputs[lookupName][0], value);
+            setNgReflectProperty(lView, tNode, def.inputs[publicName][0], value);
         }
     }
 }
@@ -12920,7 +12920,7 @@ function storePropertyBindingMetadata(tData, tNode, propertyName, bindingIndex,
     // Since we don't have a concept of the "first update pass" we need to check for presence of the
     // binding meta-data to decide if one should be stored (or if was stored already).
     if (tData[bindingIndex] === null) {
-        if (tNode.inputs == null || !tNode.inputs[propertyName]) {
+        if (!tNode.inputs?.[propertyName] && !tNode.hostDirectiveInputs?.[propertyName]) {
             const propBindingIdxs = tNode.propertyBindings || (tNode.propertyBindings = []);
             propBindingIdxs.push(bindingIndex);
             let bindingMetadata = propertyName;
@@ -12955,23 +12955,88 @@ function handleError(lView, error) {
     errorHandler && errorHandler.handleError(error);
 }
 /**
- * Set the inputs of directives at the current node to corresponding value.
+ * Set all directive inputs with the specific public name on the node.
  *
- * @param tView The current TView
- * @param lView the `LView` which contains the directives.
- * @param inputs mapping between the public "input" name and privately-known,
- *        possibly minified, property names to write to.
+ * @param tNode TNode on which the input is being set.
+ * @param tView Current TView
+ * @param lView `LView` which contains the directives.
+ * @param publicName Public name of the input being set.
  * @param value Value to set.
  */
-function setInputsForProperty(tView, lView, inputs, publicName, value) {
-    for (let i = 0; i < inputs.length; i += 2) {
-        const index = inputs[i];
-        ngDevMode && assertIndexInRange(lView, index);
-        const privateName = inputs[i + 1];
-        const instance = lView[index];
-        const def = tView.data[index];
-        writeToDirectiveInput(def, instance, privateName, value);
+function setAllInputsForProperty(tNode, tView, lView, publicName, value) {
+    const inputs = tNode.inputs?.[publicName];
+    const hostDirectiveInputs = tNode.hostDirectiveInputs?.[publicName];
+    let hasMatch = false;
+    if (hostDirectiveInputs) {
+        for (let i = 0; i < hostDirectiveInputs.length; i += 2) {
+            const index = hostDirectiveInputs[i];
+            ngDevMode && assertIndexInRange(lView, index);
+            const publicName = hostDirectiveInputs[i + 1];
+            const def = tView.data[index];
+            writeToDirectiveInput(def, lView[index], publicName, value);
+            hasMatch = true;
+        }
     }
+    if (inputs) {
+        for (const index of inputs) {
+            ngDevMode && assertIndexInRange(lView, index);
+            const instance = lView[index];
+            const def = tView.data[index];
+            writeToDirectiveInput(def, instance, publicName, value);
+            hasMatch = true;
+        }
+    }
+    return hasMatch;
+}
+/**
+ * Sets an input value only on a specific directive and its host directives.
+ * @param tNode TNode on which the input is being set.
+ * @param tView Current TView
+ * @param lView `LView` which contains the directives.
+ * @param target Directive on which to set the input.
+ * @param publicName Public name of the input being set.
+ * @param value Value to set.
+ */
+function setDirectiveInput(tNode, tView, lView, target, publicName, value) {
+    let hostIndex = null;
+    let hostDirectivesStart = null;
+    let hostDirectivesEnd = null;
+    let hasSet = false;
+    if (ngDevMode && !tNode.directiveToIndex?.has(target.type)) {
+        throw new Error(`Node does not have a directive with type ${target.type.name}`);
+    }
+    const data = tNode.directiveToIndex.get(target.type);
+    if (typeof data === 'number') {
+        hostIndex = data;
+    }
+    else {
+        [hostIndex, hostDirectivesStart, hostDirectivesEnd] = data;
+    }
+    if (hostDirectivesStart !== null &&
+        hostDirectivesEnd !== null &&
+        tNode.hostDirectiveInputs?.hasOwnProperty(publicName)) {
+        const hostDirectiveInputs = tNode.hostDirectiveInputs[publicName];
+        for (let i = 0; i < hostDirectiveInputs.length; i += 2) {
+            const index = hostDirectiveInputs[i];
+            if (index >= hostDirectivesStart && index <= hostDirectivesEnd) {
+                ngDevMode && assertIndexInRange(lView, index);
+                const def = tView.data[index];
+                const hostDirectivePublicName = hostDirectiveInputs[i + 1];
+                writeToDirectiveInput(def, lView[index], hostDirectivePublicName, value);
+                hasSet = true;
+            }
+            else if (index > hostDirectivesEnd) {
+                // Directives here are in ascending order so we can stop looking once we're past the range.
+                break;
+            }
+        }
+    }
+    if (hostIndex !== null) {
+        ngDevMode && assertIndexInRange(lView, hostIndex);
+        writeToDirectiveInput(target, lView[hostIndex], publicName, value);
+        hasSet = true;
+    }
+    return hasSet;
 }
 
 function renderComponent(hostLView, componentHostIdx) {
@@ -14102,7 +14167,7 @@ function runEffectsInView(view) {
  * The maximum number of times the change detection traversal will rerun before throwing an error.
  */
 const MAXIMUM_REFRESH_RERUNS$1 = 100;
-function detectChangesInternal(lView, notifyErrorHandler = true, mode = 0 /* ChangeDetectionMode.Global */) {
+function detectChangesInternal(lView, mode = 0 /* ChangeDetectionMode.Global */) {
     const environment = lView[ENVIRONMENT];
     const rendererFactory = environment.rendererFactory;
     // Check no changes mode is a dev only mode used to verify that bindings have not changed
@@ -14115,12 +14180,6 @@ function detectChangesInternal(lView, notifyErrorHandler = true, mode = 0 /* Cha
     try {
         detectChangesInViewWhileDirty(lView, mode);
     }
-    catch (error) {
-        if (notifyErrorHandler) {
-            handleError(lView, error);
-        }
-        throw error;
-    }
     finally {
         if (!checkNoChangesMode) {
             rendererFactory.end?.();
@@ -14161,10 +14220,10 @@ function detectChangesInViewWhileDirty(lView, mode) {
         setIsRefreshingViews(lastIsRefreshingViewsValue);
     }
 }
-function checkNoChangesInternal(lView, mode, notifyErrorHandler = true) {
+function checkNoChangesInternal(lView, mode) {
     setIsInCheckNoChangesMode(mode);
     try {
-        detectChangesInternal(lView, notifyErrorHandler);
+        detectChangesInternal(lView);
     }
     finally {
         setIsInCheckNoChangesMode(CheckNoChangesMode.Off);
@@ -14718,7 +14777,6 @@ function trackMovedView(declarationContainer, lView) {
 class ViewRef$1 {
     _lView;
     _cdRefInjectingView;
-    notifyErrorHandler;
     _appRef = null;
     _attachedToViewContainer = false;
     get rootNodes() {
@@ -14745,10 +14803,9 @@ class ViewRef$1 {
      *
      * This may be different from `_lView` if the `_cdRefInjectingView` is an embedded view.
      */
-    _cdRefInjectingView, notifyErrorHandler = true) {
+    _cdRefInjectingView) {
         this._lView = _lView;
         this._cdRefInjectingView = _cdRefInjectingView;
-        this.notifyErrorHandler = notifyErrorHandler;
     }
     get context() {
         return this._lView[CONTEXT];
@@ -14980,7 +15037,7 @@ class ViewRef$1 {
         // until the end of the refresh. Using `RefreshView` prevents creating a potential difference
         // in the state of the LViewFlags during template execution.
         this._lView[FLAGS] |= 1024 /* LViewFlags.RefreshView */;
-        detectChangesInternal(this._lView, this.notifyErrorHandler);
+        detectChangesInternal(this._lView);
     }
     /**
      * Checks the change detector and its children, and throws if any changes are detected.
@@ -14990,7 +15047,7 @@ class ViewRef$1 {
      */
     checkNoChanges() {
         if (ngDevMode) {
-            checkNoChangesInternal(this._lView, CheckNoChangesMode.OnlyDirtyViews, this.notifyErrorHandler);
+            checkNoChangesInternal(this._lView, CheckNoChangesMode.OnlyDirtyViews);
         }
     }
     attachToViewContainerRef() {
@@ -15624,9 +15681,12 @@ function createTNode(tView, tParent, type, index, value, attrs) {
         attrs: attrs,
         mergedAttrs: null,
         localNames: null,
-        initialInputs: undefined,
+        initialInputs: null,
         inputs: null,
+        hostDirectiveInputs: null,
         outputs: null,
+        hostDirectiveOutputs: null,
+        directiveToIndex: null,
         tView: null,
         next: null,
         prev: null,
@@ -15934,7 +15994,7 @@ function createIcuIterator(tIcu, lView) {
  *  - the `b` char which indicates that the lookup should start from the `document.body`
  *  - the `h` char to start lookup from the component host node (`lView[HOST]`)
  */
-const REF_EXTRACTOR_REGEXP = new RegExp(`^(\\d+)*(${REFERENCE_NODE_BODY}|${REFERENCE_NODE_HOST})*(.*)`);
+const REF_EXTRACTOR_REGEXP = /* @__PURE__ */ new RegExp(`^(\\d+)*(${REFERENCE_NODE_BODY}|${REFERENCE_NODE_HOST})*(.*)`);
 /**
  * Helper function that takes a reference node location and a set of navigation steps
  * (from the reference node) to a target node and outputs a string that represents
@@ -16814,6 +16874,18 @@ function removeDehydratedViews(lContainer) {
     // once again in case a `ViewContainerRef` is created later).
     lContainer[DEHYDRATED_VIEWS] = retainedViews;
 }
+function removeDehydratedViewList(deferBlock) {
+    const { lContainer } = deferBlock;
+    const dehydratedViews = lContainer[DEHYDRATED_VIEWS];
+    if (dehydratedViews === null)
+        return;
+    const parentLView = lContainer[PARENT];
+    const renderer = parentLView[RENDERER];
+    for (const view of dehydratedViews) {
+        removeDehydratedView(view, renderer);
+        ngDevMode && ngDevMode.dehydratedViewsRemoved++;
+    }
+}
 /**
  * Helper function to remove all nodes from a dehydrated view.
  */
@@ -17453,14 +17525,22 @@ function ɵɵinvalidFactory() {
  * 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.
+    // 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);
+        let directiveDefs;
+        let hostDirectiveDefs = null;
+        let hostDirectiveRanges = null;
+        const hostDirectiveResolution = resolveHostDirectives(matchedDirectiveDefs);
+        if (hostDirectiveResolution === null) {
+            directiveDefs = matchedDirectiveDefs;
+        }
+        else {
+            [directiveDefs, hostDirectiveDefs, hostDirectiveRanges] = hostDirectiveResolution;
+        }
+        initializeDirectives(tView, lView, tNode, directiveDefs, exportsMap, hostDirectiveDefs, hostDirectiveRanges);
     }
     if (exportsMap !== null && localRefs !== null) {
         cacheMatchingLocalNames(tNode, localRefs, exportsMap);
@@ -17479,40 +17559,63 @@ function cacheMatchingLocalNames(tNode, localRefs, exportsMap) {
         localNames.push(localRefs[i], index);
     }
 }
-function resolveHostDirectives(tView, tNode, matches) {
-    const allDirectiveDefs = [];
+function resolveHostDirectives(matches) {
+    let componentDef = null;
+    let hasHostDirectives = false;
+    for (let i = 0; i < matches.length; i++) {
+        const def = matches[i];
+        if (i === 0 && isComponentDef(def)) {
+            componentDef = def;
+        }
+        if (def.findHostDirectiveDefs !== null) {
+            hasHostDirectives = true;
+            break;
+        }
+    }
+    if (!hasHostDirectives) {
+        return null;
+    }
+    let allDirectiveDefs = null;
     let hostDirectiveDefs = null;
+    let hostDirectiveRanges = null;
+    // 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 dir
     for (const def of matches) {
         if (def.findHostDirectiveDefs !== null) {
-            // TODO(pk): probably could return matches instead of taking in an array to fill in?
+            allDirectiveDefs ??= [];
             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);
+            hostDirectiveRanges ??= new Map();
+            resolveHostDirectivesForDef(def, allDirectiveDefs, hostDirectiveRanges, hostDirectiveDefs);
         }
-        if (isComponentDef(def)) {
+        // Component definition needs to be pushed early to maintain the correct ordering.
+        if (def === componentDef) {
+            allDirectiveDefs ??= [];
             allDirectiveDefs.push(def);
-            markAsComponentHost(tView, tNode, allDirectiveDefs.length - 1);
         }
     }
-    if (isComponentHost(tNode)) {
-        allDirectiveDefs.push(...matches.slice(1));
-    }
-    else {
-        allDirectiveDefs.push(...matches);
+    if (allDirectiveDefs !== null) {
+        allDirectiveDefs.push(...(componentDef === null ? matches : matches.slice(1)));
+        ngDevMode && assertNoDuplicateDirectives(allDirectiveDefs);
+        return [allDirectiveDefs, hostDirectiveDefs, hostDirectiveRanges];
     }
-    if (ngDevMode) {
-        assertNoDuplicateDirectives(allDirectiveDefs);
-    }
-    return [allDirectiveDefs, hostDirectiveDefs];
+    return null;
+}
+function resolveHostDirectivesForDef(def, allDirectiveDefs, hostDirectiveRanges, hostDirectiveDefs) {
+    ngDevMode && assertDefined(def.findHostDirectiveDefs, 'Expected host directive resolve function');
+    const start = allDirectiveDefs.length;
+    // TODO(pk): probably could return matches instead of taking in an array to fill in?
+    def.findHostDirectiveDefs(def, allDirectiveDefs, hostDirectiveDefs);
+    // Note that these indexes are within the offset by `directiveStart`. We can't do the
+    // offsetting here, because `directiveStart` hasn't been initialized on the TNode yet.
+    hostDirectiveRanges.set(def, [start, allDirectiveDefs.length - 1]);
 }
 /**
  * Marks a given TNode as a component's host. This consists of:
@@ -17526,37 +17629,62 @@ function markAsComponentHost(tView, hostTNode, 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) {
+function initializeDirectives(tView, lView, tNode, directives, exportsMap, hostDirectiveDefs, hostDirectiveRanges) {
     ngDevMode && assertFirstCreatePass(tView);
+    const directivesLength = directives.length;
+    let hasSeenComponent = false;
     // 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);
+    for (let i = 0; i < directivesLength; i++) {
+        const def = directives[i];
+        if (!hasSeenComponent && isComponentDef(def)) {
+            hasSeenComponent = true;
+            markAsComponentHost(tView, tNode, i);
+        }
+        diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, lView), tView, def.type);
     }
-    initTNodeFlags(tNode, tView.data.length, directives.length);
+    initTNodeFlags(tNode, tView.data.length, directivesLength);
     // 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++) {
+    for (let i = 0; i < directivesLength; 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);
+    let directiveIdx = allocExpando(tView, lView, directivesLength, null);
     ngDevMode &&
         assertSame(directiveIdx, tNode.directiveStart, 'TNode.directiveStart should point to just allocated space');
-    for (let i = 0; i < directives.length; i++) {
+    // If there's at least one directive, we'll have to track it so initialize the map.
+    if (directivesLength > 0) {
+        tNode.directiveToIndex = new Map();
+    }
+    for (let i = 0; i < directivesLength; 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 a directive has host directives, we need to track both its index and the range within
+        // the host directives are declared. Host directives are not tracked, but should be resolved
+        // by looking up the host and getting its indexes from there.
+        if (hostDirectiveRanges !== null && hostDirectiveRanges.has(def)) {
+            const [start, end] = hostDirectiveRanges.get(def);
+            tNode.directiveToIndex.set(def.type, [
+                directiveIdx,
+                start + tNode.directiveStart,
+                end + tNode.directiveStart,
+            ]);
+        }
+        else if (hostDirectiveDefs === null || !hostDirectiveDefs.has(def)) {
+            tNode.directiveToIndex.set(def.type, directiveIdx);
+        }
         if (def.contentQueries !== null)
             tNode.flags |= 4 /* TNodeFlags.hasContentQuery */;
         if (def.hostBindings !== null || def.hostAttrs !== null || def.hostVars !== 0)
@@ -17584,87 +17712,84 @@ function initializeDirectives(tView, lView, tNode, directives, exportsMap, hostD
  * 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) {
+function initializeInputAndOutputAliases(tView, tNode, hostDirectiveDefs) {
     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 */;
+    for (let index = tNode.directiveStart; index < tNode.directiveEnd; index++) {
+        const directiveDef = tView.data[index];
+        if (hostDirectiveDefs === null || !hostDirectiveDefs.has(directiveDef)) {
+            setupSelectorMatchedInputsOrOutputs(0 /* BindingType.Inputs */, tNode, directiveDef, index);
+            setupSelectorMatchedInputsOrOutputs(1 /* BindingType.Outputs */, tNode, directiveDef, index);
+            setupInitialInputs(tNode, index, false);
         }
-        if (inputsStore.hasOwnProperty('style')) {
-            tNode.flags |= 16 /* TNodeFlags.hasStyleInput */;
+        else {
+            const hostDirectiveDef = hostDirectiveDefs.get(directiveDef);
+            setupHostDirectiveInputsOrOutputs(0 /* BindingType.Inputs */, tNode, hostDirectiveDef, index);
+            setupHostDirectiveInputsOrOutputs(1 /* BindingType.Outputs */, tNode, hostDirectiveDef, index);
+            setupInitialInputs(tNode, index, true);
         }
     }
-    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 ??= {};
-        // 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;
+/**
+ * Sets up the input/output bindings for a directive that was matched in the template through its
+ * selector. This method is called repeatedly to build up all of the available inputs on a node.
+ *
+ * @param mode Whether inputs or outputs are being contructed.
+ * @param tNode Node on which the bindings are being set up.
+ * @param def Directive definition for which the bindings are being set up.
+ * @param directiveIndex Index at which the directive instance will be stored in the LView.
+ */
+function setupSelectorMatchedInputsOrOutputs(mode, tNode, def, directiveIndex) {
+    const aliasMap = mode === 0 /* BindingType.Inputs */ ? def.inputs : def.outputs;
+    for (const publicName in aliasMap) {
+        if (aliasMap.hasOwnProperty(publicName)) {
+            let bindings;
+            if (mode === 0 /* BindingType.Inputs */) {
+                bindings = tNode.inputs ??= {};
             }
-            finalPublicName = hostDirectiveAliasMap[publicName];
-        }
-        if (mode === 0 /* CaptureNodeBindingMode.Inputs */) {
-            addPropertyBinding(bindingsResult, directiveIndex, finalPublicName, publicName);
+            else {
+                bindings = tNode.outputs ??= {};
+            }
+            bindings[publicName] ??= [];
+            bindings[publicName].push(directiveIndex);
+            setShadowStylingInputFlags(tNode, publicName);
         }
-        else {
-            addPropertyBinding(bindingsResult, directiveIndex, finalPublicName, value);
+    }
+}
+/**
+ * Sets up input/output bindings that were defined through host directives on a specific node.
+ * @param mode Whether inputs or outputs are being contructed.
+ * @param tNode Node on which the bindings are being set up.
+ * @param config Host directive definition that is being set up.
+ * @param directiveIndex Index at which the directive instance will be stored in the LView.
+ */
+function setupHostDirectiveInputsOrOutputs(mode, tNode, config, directiveIndex) {
+    const aliasMap = mode === 0 /* BindingType.Inputs */ ? config.inputs : config.outputs;
+    for (const initialName in aliasMap) {
+        if (aliasMap.hasOwnProperty(initialName)) {
+            const publicName = aliasMap[initialName];
+            let bindings;
+            if (mode === 0 /* BindingType.Inputs */) {
+                bindings = tNode.hostDirectiveInputs ??= {};
+            }
+            else {
+                bindings = tNode.hostDirectiveOutputs ??= {};
+            }
+            bindings[publicName] ??= [];
+            bindings[publicName].push(directiveIndex, initialName);
+            setShadowStylingInputFlags(tNode, publicName);
         }
     }
-    return bindingsResult;
 }
-function addPropertyBinding(bindings, directiveIndex, publicName, lookupName) {
-    if (bindings.hasOwnProperty(publicName)) {
-        bindings[publicName].push(directiveIndex, lookupName);
+function setShadowStylingInputFlags(tNode, publicName) {
+    if (publicName === 'class') {
+        tNode.flags |= 8 /* TNodeFlags.hasClassInput */;
     }
-    else {
-        bindings[publicName] = [directiveIndex, lookupName];
+    else if (publicName === 'style') {
+        tNode.flags |= 16 /* TNodeFlags.hasStyleInput */;
     }
 }
 /**
- * Generates initialInputData for a node and stores it in the template's static storage
+ * Sets up the 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
@@ -17674,11 +17799,21 @@ function addPropertyBinding(bindings, directiveIndex, publicName, lookupName) {
  *
  * <my-component name="Bess"></my-component>
  *
- * @param inputs Input alias map that was generated from the directive def inputs.
+ * @param tNode TNode on which to set up the initial inputs.
  * @param directiveIndex Index of the directive that is currently being processed.
- * @param attrs Static attrs on this node.
  */
-function generateInitialInputs(inputs, directiveIndex, attrs) {
+function setupInitialInputs(tNode, directiveIndex, isHostDirective) {
+    const { attrs, inputs, hostDirectiveInputs } = tNode;
+    if (attrs === null ||
+        (!isHostDirective && inputs === null) ||
+        (isHostDirective && hostDirectiveInputs === null) ||
+        // 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">`).
+        isInlineTemplate(tNode)) {
+        tNode.initialInputs ??= [];
+        tNode.initialInputs.push(null);
+        return;
+    }
     let inputsToStore = null;
     let i = 0;
     while (i < attrs.length) {
@@ -17693,26 +17828,38 @@ function generateInitialInputs(inputs, directiveIndex, attrs) {
             i += 2;
             continue;
         }
-        // If we hit any other attribute markers, we're done anyway. None of those are valid inputs.
-        if (typeof attrName === 'number')
+        else if (typeof attrName === 'number') {
+            // If we hit any other attribute markers, we're done anyway. None of those are valid inputs.
             break;
-        if (inputs.hasOwnProperty(attrName)) {
+        }
+        if (!isHostDirective && inputs.hasOwnProperty(attrName)) {
             // 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 += 2) {
-                if (inputConfig[j] === directiveIndex) {
+            for (const index of inputConfig) {
+                if (index === directiveIndex) {
                     inputsToStore ??= [];
-                    inputsToStore.push(inputConfig[j + 1], attrs[i + 1]);
+                    inputsToStore.push(attrName, attrs[i + 1]);
                     // A directive can't have multiple inputs with the same name so we can break here.
                     break;
                 }
             }
         }
+        else if (isHostDirective && hostDirectiveInputs.hasOwnProperty(attrName)) {
+            const config = hostDirectiveInputs[attrName];
+            for (let j = 0; j < config.length; j += 2) {
+                if (config[j] === directiveIndex) {
+                    inputsToStore ??= [];
+                    inputsToStore.push(config[j + 1], attrs[i + 1]);
+                    break;
+                }
+            }
+        }
         i += 2;
     }
-    return inputsToStore;
+    tNode.initialInputs ??= [];
+    tNode.initialInputs.push(inputsToStore);
 }
 /**
  * Setup directive for instantiation.
@@ -17972,7 +18119,7 @@ class ComponentFactory extends ComponentFactory$1 {
             const cmpDef = this.componentDef;
             ngDevMode && verifyNotAnOrphanComponent(cmpDef);
             const tAttributes = rootSelectorOrNode
-                ? ['ng-version', '19.2.0-rc.0']
+                ? ['ng-version', '20.0.0-next.0']
                 : // 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.
@@ -18057,33 +18204,28 @@ class ComponentRef extends ComponentRef$1 {
         this._tNode = getTNode(_rootLView[TVIEW], HEADER_OFFSET);
         this.location = createElementRef(this._tNode, _rootLView);
         this.instance = getComponentLViewByIndex(this._tNode.index, _rootLView)[CONTEXT];
-        this.hostView = this.changeDetectorRef = new ViewRef$1(_rootLView, undefined /* _cdRefInjectingView */, false /* notifyErrorHandler */);
+        this.hostView = this.changeDetectorRef = new ViewRef$1(_rootLView, undefined /* _cdRefInjectingView */);
         this.componentType = componentType;
     }
     setInput(name, value) {
-        const inputData = this._tNode.inputs;
-        let dataValue;
-        if (inputData !== null && (dataValue = inputData[name])) {
-            this.previousInputValues ??= new Map();
-            // Do not set the input if it is the same as the last value
-            // This behavior matches `bindingUpdated` when binding inputs in templates.
-            if (this.previousInputValues.has(name) &&
-                Object.is(this.previousInputValues.get(name), value)) {
-                return;
-            }
-            const lView = this._rootLView;
-            setInputsForProperty(lView[TVIEW], lView, dataValue, name, value);
-            this.previousInputValues.set(name, value);
-            const childComponentLView = getComponentLViewByIndex(this._tNode.index, lView);
-            markViewDirty(childComponentLView, 1 /* NotificationSource.SetInput */);
+        const tNode = this._tNode;
+        this.previousInputValues ??= new Map();
+        // Do not set the input if it is the same as the last value
+        // This behavior matches `bindingUpdated` when binding inputs in templates.
+        if (this.previousInputValues.has(name) &&
+            Object.is(this.previousInputValues.get(name), value)) {
+            return;
         }
-        else {
-            if (ngDevMode) {
-                const cmpNameForError = stringifyForError(this.componentType);
-                let message = `Can't set value of the '${name}' input on the '${cmpNameForError}' component. `;
-                message += `Make sure that the '${name}' property is annotated with @Input() or a mapped @Input('${name}') exists.`;
-                reportUnknownPropertyError(message);
-            }
+        const lView = this._rootLView;
+        const hasSetInput = setAllInputsForProperty(tNode, lView[TVIEW], lView, name, value);
+        this.previousInputValues.set(name, value);
+        const childComponentLView = getComponentLViewByIndex(tNode.index, lView);
+        markViewDirty(childComponentLView, 1 /* NotificationSource.SetInput */);
+        if (ngDevMode && !hasSetInput) {
+            const cmpNameForError = stringifyForError(this.componentType);
+            let message = `Can't set value of the '${name}' input on the '${cmpNameForError}' component. `;
+            message += `Make sure that the '${name}' property is annotated with @Input() or a mapped @Input('${name}') exists.`;
+            reportUnknownPropertyError(message);
         }
     }
     get injector() {
@@ -20705,7 +20847,7 @@ function declareTemplate(declarationLView, declarationTView, index, templateFn,
     // In client-only mode, this function is a noop.
     populateDehydratedViewsInLContainer(lContainer, tNode, declarationLView);
     if (isDirectiveHost(tNode)) {
-        createDirectivesInstancesInInstruction(declarationTView, declarationLView, tNode);
+        createDirectivesInstances(declarationTView, declarationLView, tNode);
     }
     if (localRefsIndex != null) {
         saveResolvedLocalsInData(declarationLView, tNode, localRefExtractor);
@@ -21240,8 +21382,9 @@ function renderDeferBlockState(newState, tNode, lContainer, skipTimerScheduling
     }
 }
 function findMatchingDehydratedViewForDeferBlock(lContainer, lDetails) {
-    // Find matching view based on serialized defer block state.
-    return (lContainer[DEHYDRATED_VIEWS]?.find((view) => view.data[DEFER_BLOCK_STATE$1] === lDetails[DEFER_BLOCK_STATE]) ?? null);
+    const dehydratedViewIx = lContainer[DEHYDRATED_VIEWS]?.findIndex((view) => view.data[DEFER_BLOCK_STATE$1] === lDetails[DEFER_BLOCK_STATE]) ?? -1;
+    const dehydratedView = dehydratedViewIx > -1 ? lContainer[DEHYDRATED_VIEWS][dehydratedViewIx] : null;
+    return { dehydratedView, dehydratedViewIx };
 }
 /**
  * Applies changes to the DOM to reflect a given state.
@@ -21273,21 +21416,23 @@ function applyDeferBlockState(newState, lDetails, lContainer, tNode, hostLView)
                 injector = createDeferBlockInjector(hostLView[INJECTOR], tDetails, providers);
             }
         }
-        const dehydratedView = findMatchingDehydratedViewForDeferBlock(lContainer, lDetails);
-        // Erase dehydrated view info, so that it's not removed later
-        // by post-hydration cleanup process.
-        lContainer[DEHYDRATED_VIEWS] = null;
+        const { dehydratedView, dehydratedViewIx } = findMatchingDehydratedViewForDeferBlock(lContainer, lDetails);
         const embeddedLView = createAndRenderEmbeddedLView(hostLView, activeBlockTNode, null, {
             injector,
             dehydratedView,
         });
         addLViewToLContainer(lContainer, embeddedLView, viewIndex, shouldAddViewToDom(activeBlockTNode, dehydratedView));
         markViewDirty(embeddedLView, 2 /* NotificationSource.DeferBlockStateUpdate */);
-        // TODO(incremental-hydration):
-        // - what if we had some views in `lContainer[DEHYDRATED_VIEWS]`, but
-        //   we didn't find a view that matches the expected state?
-        // - for example, handle a situation when a block was in the "completed" state
-        //   on the server, but the loading failing on the client. How do we reconcile and cleanup?
+        if (dehydratedViewIx > -1) {
+            // Erase dehydrated view info in a given LContainer, so that the view is not
+            // removed later by post-hydration cleanup process (which iterates over all
+            // dehydrated views in component tree). This clears only the dehydrated view
+            // that was found for this render, which in most cases will be the only view.
+            // In the case that there was control flow that changed, there may be either
+            // more than one or the views would not match up due to the server rendered
+            // content being a different branch of the control flow.
+            lContainer[DEHYDRATED_VIEWS]?.splice(dehydratedViewIx, 1);
+        }
         if ((newState === DeferBlockState.Complete || newState === DeferBlockState.Error) &&
             Array.isArray(lDetails[ON_COMPLETE_FNS])) {
             for (const callback of lDetails[ON_COMPLETE_FNS]) {
@@ -23700,8 +23845,8 @@ class ApplicationRef {
             // Set the AfterRender bit, as we're checking views and will need to run afterRender hooks.
             this.dirtyFlags |= 8 /* ApplicationRefDirtyFlags.AfterRender */;
             // Check all potentially dirty views.
-            for (let { _lView, notifyErrorHandler } of this.allViews) {
-                detectChangesInViewIfRequired(_lView, notifyErrorHandler, useGlobalCheck, this.zonelessEnabled);
+            for (let { _lView } of this.allViews) {
+                detectChangesInViewIfRequired(_lView, useGlobalCheck, this.zonelessEnabled);
             }
             // If `markForCheck()` was called during view checking, it will have set the `ViewTreeCheck`
             // flag. We clear the flag here because, for backwards compatibility, `markForCheck()`
@@ -23860,7 +24005,7 @@ function remove(list, el) {
         list.splice(index, 1);
     }
 }
-function detectChangesInViewIfRequired(lView, notifyErrorHandler, isFirstPass, zonelessEnabled) {
+function detectChangesInViewIfRequired(lView, isFirstPass, zonelessEnabled) {
     // When re-checking, only check views which actually need it.
     if (!isFirstPass && !requiresRefreshOrTraversal(lView)) {
         return;
@@ -23870,7 +24015,7 @@ function detectChangesInViewIfRequired(lView, notifyErrorHandler, isFirstPass, z
             0 /* ChangeDetectionMode.Global */
         : // Only refresh views with the `RefreshView` flag or views is a changed signal
             1 /* ChangeDetectionMode.Targeted */;
-    detectChangesInternal(lView, notifyErrorHandler, mode);
+    detectChangesInternal(lView, mode);
 }
 
 /**
@@ -24136,16 +24281,36 @@ async function triggerHydrationFromBlockName(injector, blockName, replayQueuedEv
         await parentBlockPromise;
     }
     // Actually do the triggering and hydration of the queue of blocks
-    for (const dehydratedBlockId of hydrationQueue) {
-        await triggerResourceLoadingForHydration(dehydratedBlockId, dehydratedBlockRegistry);
-        await nextRender(injector);
-        // TODO(incremental-hydration): assert (in dev mode) that a defer block is present in the dehydrated registry
-        // at this point. If not - it means that the block has not been hydrated, for example due to different
-        // `@if` conditions on the client and the server. If we detect this case, we should also do the cleanup
-        // of all child block (promises, registry state, etc).
-        // TODO(incremental-hydration): call `rejectFn` when lDetails[DEFER_BLOCK_STATE] is `DeferBlockState.Error`.
-        blocksBeingHydrated.get(dehydratedBlockId).resolve();
-        // TODO(incremental-hydration): consider adding a wait for stability here
+    for (let blockQueueIdx = 0; blockQueueIdx < hydrationQueue.length; blockQueueIdx++) {
+        const dehydratedBlockId = hydrationQueue[blockQueueIdx];
+        const dehydratedDeferBlock = dehydratedBlockRegistry.get(dehydratedBlockId);
+        if (dehydratedDeferBlock != null) {
+            // trigger the block resources and await next render for hydration. This should result
+            // in the next block ɵɵdefer instruction being called and that block being added to the dehydrated registry.
+            await triggerResourceLoadingForHydration(dehydratedDeferBlock);
+            await nextRender(injector);
+            // if the content has changed since server rendering, we need to check for the expected block
+            // being in the registry or if errors occurred. In that case, we need to clean up the remaining expected
+            // content that won't be rendered or fetched.
+            if (deferBlockHasErrored(dehydratedDeferBlock)) {
+                // Either the expected block has not yet had its ɵɵdefer instruction called or the block errored out when fetching
+                // resources. In the former case, either we're hydrating too soon or the client and server differ. In both cases,
+                // we need to clean up child content and promises.
+                removeDehydratedViewList(dehydratedDeferBlock);
+                cleanupRemainingHydrationQueue(hydrationQueue.slice(blockQueueIdx), dehydratedBlockRegistry);
+                break;
+            }
+            // The defer block has not errored and we've finished fetching resources and rendering.
+            // At this point it is safe to resolve the hydration promise.
+            blocksBeingHydrated.get(dehydratedBlockId).resolve();
+        }
+        else {
+            // The expected block has not yet had its ɵɵdefer instruction called. This is likely due to content changing between
+            // client and server. We need to clean up the dehydrated DOM in the container since it no longer is valid.
+            cleanupParentContainer(blockQueueIdx, hydrationQueue, dehydratedBlockRegistry);
+            cleanupRemainingHydrationQueue(hydrationQueue.slice(blockQueueIdx), dehydratedBlockRegistry);
+            break;
+        }
     }
     // Await hydration completion for the requested block.
     await blocksBeingHydrated.get(blockName)?.promise;
@@ -24158,6 +24323,33 @@ async function triggerHydrationFromBlockName(injector, blockName, replayQueuedEv
     // Cleanup after hydration of all affected defer blocks.
     cleanupHydratedDeferBlocks(dehydratedBlockRegistry.get(blockName), hydrationQueue, dehydratedBlockRegistry, injector.get(ApplicationRef));
 }
+function deferBlockHasErrored(deferBlock) {
+    return (getLDeferBlockDetails(deferBlock.lView, deferBlock.tNode)[DEFER_BLOCK_STATE] ===
+        DeferBlockState.Error);
+}
+/**
+ * Clean up the parent container of a block where content changed between server and client.
+ * The parent of a block going through `triggerHydrationFromBlockName` will contain the
+ * dehydrated content that needs to be cleaned up. So we have to do the clean up from that location
+ * in the tree.
+ */
+function cleanupParentContainer(currentBlockIdx, hydrationQueue, dehydratedBlockRegistry) {
+    // If a parent block exists, it's in the hydration queue in front of the current block.
+    const parentDeferBlockIdx = currentBlockIdx - 1;
+    const parentDeferBlock = parentDeferBlockIdx > -1
+        ? dehydratedBlockRegistry.get(hydrationQueue[parentDeferBlockIdx])
+        : null;
+    if (parentDeferBlock) {
+        cleanupLContainer(parentDeferBlock.lContainer);
+    }
+}
+function cleanupRemainingHydrationQueue(hydrationQueue, dehydratedBlockRegistry) {
+    const blocksBeingHydrated = dehydratedBlockRegistry.hydrating;
+    for (const dehydratedBlockId in hydrationQueue) {
+        blocksBeingHydrated.get(dehydratedBlockId)?.reject();
+    }
+    dehydratedBlockRegistry.cleanup(hydrationQueue);
+}
 /**
  * Generates a new promise for every defer block in the hydrating queue
  */
@@ -24170,18 +24362,8 @@ function populateHydratingStateForQueue(registry, queue) {
 function nextRender(injector) {
     return new Promise((resolveFn) => afterNextRender(resolveFn, { injector }));
 }
-async function triggerResourceLoadingForHydration(dehydratedBlockId, dehydratedBlockRegistry) {
-    const deferBlock = dehydratedBlockRegistry.get(dehydratedBlockId);
-    // Since we trigger hydration for nested defer blocks in a sequence (parent -> child),
-    // there is a chance that a defer block may not be present at hydration time. For example,
-    // when a nested block was in an `@if` condition, which has changed.
-    if (deferBlock === null) {
-        // TODO(incremental-hydration): handle the cleanup for cases when
-        // defer block is no longer present during hydration (e.g. `@if` condition
-        // has changed during hydration/rendering).
-        return;
-    }
-    const { tNode, lView } = deferBlock;
+async function triggerResourceLoadingForHydration(dehydratedBlock) {
+    const { tNode, lView } = dehydratedBlock;
     const lDetails = getLDeferBlockDetails(lView, tNode);
     return new Promise((resolve) => {
         onDeferBlockCompletion(lDetails, resolve);
@@ -26234,10 +26416,8 @@ function ɵɵproperty(propName, value, sanitizer) {
  * directive input.
  */
 function setDirectiveInputsWhichShadowsStyling(tView, tNode, lView, value, isClassBased) {
-    const inputs = tNode.inputs;
-    const property = isClassBased ? 'class' : 'style';
     // We support both 'class' and `className` hence the fallback.
-    setInputsForProperty(tView, lView, inputs[property], property, value);
+    setAllInputsForProperty(tNode, tView, lView, isClassBased ? 'class' : 'style', value);
 }
 
 /**
@@ -28061,12 +28241,12 @@ function ɵɵelementStart(index, name, attrsIndex, localRefsIndex) {
     // any immediate children of a component or template container must be pre-emptively
     // monkey-patched with the component view data so that the element can be inspected
     // later on using any element discovery utility methods (see `element_discovery.ts`)
-    if (getElementDepthCount() === 0) {
+    if (getElementDepthCount() === 0 || hasDirectives) {
         attachPatchData(native, lView);
     }
     increaseElementDepthCount();
     if (hasDirectives) {
-        createDirectivesInstancesInInstruction(tView, lView, tNode);
+        createDirectivesInstances(tView, lView, tNode);
         executeContentQueries(tView, tNode, lView);
     }
     if (localRefsIndex !== null) {
@@ -28238,7 +28418,7 @@ function ɵɵelementContainerStart(index, attrsIndex, localRefsIndex) {
     }
     attachPatchData(comment, lView);
     if (isDirectiveHost(tNode)) {
-        createDirectivesInstancesInInstruction(tView, lView, tNode);
+        createDirectivesInstances(tView, lView, tNode);
         executeContentQueries(tView, tNode, lView);
     }
     if (localRefsIndex != null) {
@@ -30293,7 +30473,7 @@ function findExistingListener(tView, lView, eventName, tNodeIdx) {
 function listenerInternal(tView, lView, renderer, tNode, eventName, listenerFn, eventTargetResolver) {
     const isTNodeDirectiveHost = isDirectiveHost(tNode);
     const firstCreatePass = tView.firstCreatePass;
-    const tCleanup = firstCreatePass && getOrCreateTViewCleanup(tView);
+    const tCleanup = firstCreatePass ? getOrCreateTViewCleanup(tView) : null;
     const context = lView[CONTEXT];
     // When the ɵɵlistener instruction was generated and is executed we know that there is either a
     // native listener or a directive output on this element. As such we we know that we will have to
@@ -30358,29 +30538,37 @@ function listenerInternal(tView, lView, renderer, tNode, eventName, listenerFn,
         // ancestors are marked dirty when an event occurs.
         listenerFn = wrapListener(tNode, lView, context, listenerFn);
     }
-    // subscribe to directive outputs
-    const outputs = tNode.outputs;
-    let props;
-    if (processOutputs && outputs !== null && (props = outputs[eventName])) {
-        const propsLength = props.length;
-        if (propsLength) {
-            for (let i = 0; i < propsLength; i += 2) {
-                const index = props[i];
-                ngDevMode && assertIndexInRange(lView, index);
-                const minifiedName = props[i + 1];
-                const directiveInstance = lView[index];
-                const output = directiveInstance[minifiedName];
-                if (ngDevMode && !isOutputSubscribable(output)) {
-                    throw new Error(`@Output ${minifiedName} not initialized in '${directiveInstance.constructor.name}'.`);
-                }
-                const subscription = output.subscribe(listenerFn);
-                const idx = lCleanup.length;
-                lCleanup.push(listenerFn, subscription);
-                tCleanup && tCleanup.push(eventName, tNode.index, idx, -(idx + 1));
+    if (processOutputs) {
+        const outputConfig = tNode.outputs?.[eventName];
+        const hostDirectiveOutputConfig = tNode.hostDirectiveOutputs?.[eventName];
+        if (hostDirectiveOutputConfig && hostDirectiveOutputConfig.length) {
+            for (let i = 0; i < hostDirectiveOutputConfig.length; i += 2) {
+                const index = hostDirectiveOutputConfig[i];
+                const lookupName = hostDirectiveOutputConfig[i + 1];
+                listenToOutput(tNode, tView, lView, index, lookupName, eventName, listenerFn, lCleanup, tCleanup);
+            }
+        }
+        if (outputConfig && outputConfig.length) {
+            for (const index of outputConfig) {
+                listenToOutput(tNode, tView, lView, index, eventName, eventName, listenerFn, lCleanup, tCleanup);
             }
         }
     }
 }
+function listenToOutput(tNode, tView, lView, index, lookupName, eventName, listenerFn, lCleanup, tCleanup) {
+    ngDevMode && assertIndexInRange(lView, index);
+    const instance = lView[index];
+    const def = tView.data[index];
+    const propertyName = def.outputs[lookupName];
+    const output = instance[propertyName];
+    if (ngDevMode && !isOutputSubscribable(output)) {
+        throw new Error(`@Output ${propertyName} not initialized in '${instance.constructor.name}'.`);
+    }
+    const subscription = output.subscribe(listenerFn);
+    const idx = lCleanup.length;
+    lCleanup.push(listenerFn, subscription);
+    tCleanup && tCleanup.push(eventName, tNode.index, idx, -(idx + 1));
+}
 function executeListenerWithErrorHandling(lView, context, listenerFn, e) {
     const prevConsumer = setActiveConsumer$1(null);
     try {
@@ -33544,11 +33732,12 @@ function executeWithInvalidateFallback(importMeta, id, callback) {
         callback();
     }
     catch (e) {
-        const errorMessage = e.message;
+        const error = e;
         // If we have all the necessary information and APIs to send off the invalidation
         // request, send it before rethrowing so the dev server can decide what to do.
-        if (id !== null && errorMessage) {
-            importMeta?.hot?.send?.('angular:invalidate', { id, message: errorMessage, error: true });
+        if (id !== null && error.message) {
+            const toLog = error.message + (error.stack ? '\n' + error.stack : '');
+            importMeta?.hot?.send?.('angular:invalidate', { id, message: toLog, error: true });
         }
         // Throw the error in case the page doesn't get refreshed.
         throw e;
@@ -34978,7 +35167,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('19.2.0-rc.0');
+const VERSION = new Version('20.0.0-next.0');
 
 /**
  * Combination of NgModuleFactory and ComponentFactories.
@@ -35812,10 +36001,9 @@ class ImagePerformanceWarning {
     window = null;
     observer = null;
     options = inject(IMAGE_CONFIG);
-    isBrowser = inject(PLATFORM_ID) === 'browser';
     lcpImageUrl;
     start() {
-        if (!this.isBrowser ||
+        if ((typeof ngServerMode !== 'undefined' && ngServerMode) ||
             typeof PerformanceObserver === 'undefined' ||
             (this.options?.disableImageSizeWarning && this.options?.disableImageLazyLoadWarning)) {
             return;
@@ -35823,7 +36011,7 @@ class ImagePerformanceWarning {
         this.observer = this.initPerformanceObserver();
         const doc = getDocument();
         const win = doc.defaultView;
-        if (typeof win !== 'undefined') {
+        if (win) {
             this.window = win;
             // Wait to avoid race conditions where LCP image triggers
             // load event before it's recorded by the performance observer
@@ -36489,7 +36677,7 @@ class DebugNgZoneForCheckNoChanges extends NgZone {
         this.applicationRef ||= this.injector.get(ApplicationRef);
         for (const view of this.applicationRef.allViews) {
             try {
-                checkNoChangesInternal(view._lView, this.checkNoChangesMode, view.notifyErrorHandler);
+                checkNoChangesInternal(view._lView, this.checkNoChangesMode);
             }
             catch (e) {
                 this.errorHandler ||= this.injector.get(ErrorHandler);
@@ -36520,7 +36708,7 @@ function exhaustiveCheckNoChangesInterval(interval, checkNoChangesMode) {
                             }
                             for (const view of applicationRef.allViews) {
                                 try {
-                                    checkNoChangesInternal(view._lView, checkNoChangesMode, view.notifyErrorHandler);
+                                    checkNoChangesInternal(view._lView, checkNoChangesMode);
                                 }
                                 catch (e) {
                                     errorHandler.handleError(e);
@@ -40428,7 +40616,6 @@ function untracked(nonReactiveReadsFn) {
  * Create a computed `Signal` which derives a reactive value from an expression.
  */
 function computed(computation, options) {
-    performanceMarkFeature('NgSignals');
     const getter = createComputed$1(computation);
     if (options?.equal) {
         getter[SIGNAL$1].equal = options.equal;
@@ -40526,7 +40713,6 @@ function effect$1() { }
  * Create a global `Effect` for the given reactive function.
  */
 function microtaskEffect(effectFn, options) {
-    performanceMarkFeature('NgSignals');
     ngDevMode &&
         assertNotInReactiveContext(effect$1, 'Call `effect` outside of a reactive context. For example, schedule the ' +
             'effect inside the component constructor.');
@@ -40599,7 +40785,6 @@ function effect(effectFn, options) {
         }
         return microtaskEffect(effectFn, options);
     }
-    performanceMarkFeature('NgSignals');
     ngDevMode &&
         assertNotInReactiveContext(effect, 'Call `effect` outside of a reactive context. For example, schedule the ' +
             'effect inside the component constructor.');
@@ -40796,7 +40981,6 @@ var ResourceStatus;
 
 const identityFn = (v) => v;
 function linkedSignal(optionsOrComputation, options) {
-    performanceMarkFeature('NgSignals');
     if (typeof optionsOrComputation === 'function') {
         const getter = createLinkedSignal$1(optionsOrComputation, (identityFn), options?.equal);
         return upgradeLinkedSignalGetter(getter);