@angular/core 19.1.7 → 19.1.8

package/fesm2022/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v19.1.7
+ * @license Angular v19.1.8
  * (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`);
@@ -7105,23 +7106,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`.
  */
@@ -7144,7 +7128,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) {
@@ -8624,6 +8607,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}).
@@ -15864,7 +15864,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
@@ -16744,6 +16744,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.
  */
@@ -17901,7 +17913,7 @@ class ComponentFactory extends ComponentFactory$1 {
             const cmpDef = this.componentDef;
             ngDevMode && verifyNotAnOrphanComponent(cmpDef);
             const tAttributes = rootSelectorOrNode
-                ? ['ng-version', '19.1.7']
+                ? ['ng-version', '19.1.8']
                 : // 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.
@@ -21168,8 +21180,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.
@@ -21200,21 +21213,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]) {
@@ -24065,16 +24080,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;
@@ -24087,6 +24122,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
  */
@@ -24099,18 +24161,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);
@@ -33473,11 +33525,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;
@@ -34907,7 +34960,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('19.1.7');
+const VERSION = new Version('19.1.8');
 
 /**
  * Combination of NgModuleFactory and ComponentFactories.
@@ -35748,10 +35801,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;
@@ -35759,7 +35811,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
@@ -40515,7 +40567,6 @@ function ɵɵngDeclarePipe(decl) {
  * 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;
@@ -40529,7 +40580,6 @@ function computed(computation, options) {
 
 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);
@@ -40670,7 +40720,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.');
@@ -40743,7 +40792,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.');