@angular/core 17.3.1 → 18.0.0-next.1

package/fesm2022/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v17.3.1
+ * @license Angular v18.0.0-next.1
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -4152,8 +4152,9 @@ const profiler = function (event, instance, hookOrListener) {
 const SVG_NAMESPACE = 'svg';
 const MATH_ML_NAMESPACE = 'math';
 
-// TODO(atscott): flip default internally ASAP and externally for v18 (#52928)
-let _ensureDirtyViewsAreAlwaysReachable = false;
+// TODO(atscott): Remove prior to v18 release. Keeping this around in case anyone internally needs
+// to opt out temporarily.
+let _ensureDirtyViewsAreAlwaysReachable = true;
 function getEnsureDirtyViewsAreAlwaysReachable() {
     return _ensureDirtyViewsAreAlwaysReachable;
 }
@@ -4415,6 +4416,12 @@ const instructionState = {
  * changes exist in the change detector or its children.
  */
 let _isInCheckNoChangesMode = false;
+/**
+ * Flag used to indicate that we are in the middle running change detection on a view
+ *
+ * @see detectChangesInViewWhileDirty
+ */
+let _isRefreshingViews = false;
 /**
  * Returns true if the instruction state stack is empty.
  *
@@ -4585,6 +4592,12 @@ function setIsInCheckNoChangesMode(mode) {
     !ngDevMode && throwError('Must never be called in production mode');
     _isInCheckNoChangesMode = mode;
 }
+function isRefreshingViews() {
+    return _isRefreshingViews;
+}
+function setIsRefreshingViews(mode) {
+    _isRefreshingViews = mode;
+}
 // top level variables should not be exported for performance reasons (PERF_NOTES.md)
 function getBindingRoot() {
     const lFrame = instructionState.lFrame;
@@ -12654,7 +12667,7 @@ const REACTIVE_LVIEW_CONSUMER_NODE = {
 /**
  * The maximum number of times the change detection traversal will rerun before throwing an error.
  */
-const MAXIMUM_REFRESH_RERUNS = 100;
+const MAXIMUM_REFRESH_RERUNS$1 = 100;
 function detectChangesInternal(lView, notifyErrorHandler = true, mode = 0 /* ChangeDetectionMode.Global */) {
     const environment = lView[ENVIRONMENT];
     const rendererFactory = environment.rendererFactory;
@@ -12684,23 +12697,31 @@ function detectChangesInternal(lView, notifyErrorHandler = true, mode = 0 /* Cha
     }
 }
 function detectChangesInViewWhileDirty(lView, mode) {
-    detectChangesInView$1(lView, mode);
-    let retries = 0;
-    // If after running change detection, this view still needs to be refreshed or there are
-    // descendants views that need to be refreshed due to re-dirtying during the change detection
-    // run, detect changes on the view again. We run change detection in `Targeted` mode to only
-    // refresh views with the `RefreshView` flag.
-    while (requiresRefreshOrTraversal(lView)) {
-        if (retries === MAXIMUM_REFRESH_RERUNS) {
-            throw new RuntimeError(103 /* RuntimeErrorCode.INFINITE_CHANGE_DETECTION */, ngDevMode &&
-                'Infinite change detection while trying to refresh views. ' +
-                    'There may be components which each cause the other to require a refresh, ' +
-                    'causing an infinite loop.');
+    const lastIsRefreshingViewsValue = isRefreshingViews();
+    try {
+        setIsRefreshingViews(true);
+        detectChangesInView$1(lView, mode);
+        let retries = 0;
+        // If after running change detection, this view still needs to be refreshed or there are
+        // descendants views that need to be refreshed due to re-dirtying during the change detection
+        // run, detect changes on the view again. We run change detection in `Targeted` mode to only
+        // refresh views with the `RefreshView` flag.
+        while (requiresRefreshOrTraversal(lView)) {
+            if (retries === MAXIMUM_REFRESH_RERUNS$1) {
+                throw new RuntimeError(103 /* RuntimeErrorCode.INFINITE_CHANGE_DETECTION */, ngDevMode &&
+                    'Infinite change detection while trying to refresh views. ' +
+                        'There may be components which each cause the other to require a refresh, ' +
+                        'causing an infinite loop.');
+            }
+            retries++;
+            // Even if this view is detached, we still detect changes in targeted mode because this was
+            // the root of the change detection run.
+            detectChangesInView$1(lView, 1 /* ChangeDetectionMode.Targeted */);
         }
-        retries++;
-        // Even if this view is detached, we still detect changes in targeted mode because this was
-        // the root of the change detection run.
-        detectChangesInView$1(lView, 1 /* ChangeDetectionMode.Targeted */);
+    }
+    finally {
+        // restore state to what it was before entering this change detection loop
+        setIsRefreshingViews(lastIsRefreshingViewsValue);
     }
 }
 function checkNoChangesInternal(lView, notifyErrorHandler = true) {
@@ -12996,9 +13017,17 @@ function detectChangesInChildComponents(hostLView, components, mode) {
  * @returns the root LView
  */
 function markViewDirty(lView) {
+    const dirtyBitsToUse = isRefreshingViews() ?
+        64 /* LViewFlags.Dirty */ :
+        // When we are not actively refreshing a view tree, it is absolutely
+        // valid to update state and mark views dirty. We use the `RefreshView` flag in this
+        // case to allow synchronously rerunning change detection. This applies today to
+        // afterRender hooks as well as animation listeners which execute after detecting
+        // changes in a view when the render factory flushes.
+        1024 /* LViewFlags.RefreshView */ | 64 /* LViewFlags.Dirty */;
     lView[ENVIRONMENT].changeDetectionScheduler?.notify();
     while (lView) {
-        lView[FLAGS] |= 64 /* LViewFlags.Dirty */;
+        lView[FLAGS] |= dirtyBitsToUse;
         const parent = getLViewParent(lView);
         // Stop traversing up as soon as you find a root view that wasn't attached to any container
         if (isRootView(lView) && !parent) {
@@ -14459,41 +14488,74 @@ function performanceMarkFeature(feature) {
     performance?.mark?.('mark_feature_usage', { detail: { feature } });
 }
 
-function noop(...args) {
-    // Do nothing.
-}
-
-function getNativeRequestAnimationFrame() {
+/**
+ * Gets a scheduling function that runs the callback after the first of setTimeout and
+ * requestAnimationFrame resolves.
+ *
+ * - `requestAnimationFrame` ensures that change detection runs ahead of a browser repaint.
+ * This ensures that the create and update passes of a change detection always happen
+ * in the same frame.
+ * - When the browser is resource-starved, `rAF` can execute _before_ a `setTimeout` because
+ * rendering is a very high priority process. This means that `setTimeout` cannot guarantee
+ * same-frame create and update pass, when `setTimeout` is used to schedule the update phase.
+ * - While `rAF` gives us the desirable same-frame updates, it has two limitations that
+ * prevent it from being used alone. First, it does not run in background tabs, which would
+ * prevent Angular from initializing an application when opened in a new tab (for example).
+ * Second, repeated calls to requestAnimationFrame will execute at the refresh rate of the
+ * hardware (~16ms for a 60Hz display). This would cause significant slowdown of tests that
+ * are written with several updates and asserts in the form of "update; await stable; assert;".
+ * - Both `setTimeout` and `rAF` are able to "coalesce" several events from a single user
+ * interaction into a single change detection. Importantly, this reduces view tree traversals when
+ * compared to an alternative timing mechanism like `queueMicrotask`, where change detection would
+ * then be interleaves between each event.
+ *
+ * By running change detection after the first of `setTimeout` and `rAF` to execute, we get the
+ * best of both worlds.
+ */
+function getCallbackScheduler() {
     // Note: the `getNativeRequestAnimationFrame` is used in the `NgZone` class, but we cannot use the
     // `inject` function. The `NgZone` instance may be created manually, and thus the injection
     // context will be unavailable. This might be enough to check whether `requestAnimationFrame` is
     // available because otherwise, we'll fall back to `setTimeout`.
-    const isBrowser = typeof _global['requestAnimationFrame'] === 'function';
-    // Note: `requestAnimationFrame` is unavailable when the code runs in the Node.js environment. We
-    // use `setTimeout` because no changes are required other than checking if the current platform is
-    // the browser. `setTimeout` is a well-established API that is available in both environments.
-    // `requestAnimationFrame` is used in the browser to coalesce event tasks since event tasks are
-    // usually executed within the same rendering frame (but this is more implementation details of
-    // browsers).
-    let nativeRequestAnimationFrame = _global[isBrowser ? 'requestAnimationFrame' : 'setTimeout'];
-    let nativeCancelAnimationFrame = _global[isBrowser ? 'cancelAnimationFrame' : 'clearTimeout'];
-    if (typeof Zone !== 'undefined' && nativeRequestAnimationFrame && nativeCancelAnimationFrame) {
+    const hasRequestAnimationFrame = typeof _global['requestAnimationFrame'] === 'function';
+    let nativeRequestAnimationFrame = hasRequestAnimationFrame ? _global['requestAnimationFrame'] : null;
+    let nativeSetTimeout = _global['setTimeout'];
+    if (typeof Zone !== 'undefined') {
         // Note: zone.js sets original implementations on patched APIs behind the
         // `__zone_symbol__OriginalDelegate` key (see `attachOriginToPatched`). Given the following
         // example: `window.requestAnimationFrame.__zone_symbol__OriginalDelegate`; this would return an
         // unpatched implementation of the `requestAnimationFrame`, which isn't intercepted by the
         // Angular zone. We use the unpatched implementation to avoid another change detection when
         // coalescing tasks.
-        const unpatchedRequestAnimationFrame = nativeRequestAnimationFrame[Zone.__symbol__('OriginalDelegate')];
-        if (unpatchedRequestAnimationFrame) {
-            nativeRequestAnimationFrame = unpatchedRequestAnimationFrame;
-        }
-        const unpatchedCancelAnimationFrame = nativeCancelAnimationFrame[Zone.__symbol__('OriginalDelegate')];
-        if (unpatchedCancelAnimationFrame) {
-            nativeCancelAnimationFrame = unpatchedCancelAnimationFrame;
-        }
-    }
-    return { nativeRequestAnimationFrame, nativeCancelAnimationFrame };
+        const ORIGINAL_DELEGATE_SYMBOL = Zone.__symbol__('OriginalDelegate');
+        if (nativeRequestAnimationFrame) {
+            nativeRequestAnimationFrame =
+                nativeRequestAnimationFrame[ORIGINAL_DELEGATE_SYMBOL] ??
+                    nativeRequestAnimationFrame;
+        }
+        nativeSetTimeout = nativeSetTimeout[ORIGINAL_DELEGATE_SYMBOL] ?? nativeSetTimeout;
+    }
+    return (callback) => {
+        let executeCallback = true;
+        nativeSetTimeout(() => {
+            if (!executeCallback) {
+                return;
+            }
+            executeCallback = false;
+            callback();
+        });
+        nativeRequestAnimationFrame?.(() => {
+            if (!executeCallback) {
+                return;
+            }
+            executeCallback = false;
+            callback();
+        });
+    };
+}
+
+function noop(...args) {
+    // Do nothing.
 }
 
 class AsyncStackTaggingZoneSpec {
@@ -14645,8 +14707,8 @@ class NgZone {
         self.shouldCoalesceEventChangeDetection =
             !shouldCoalesceRunChangeDetection && shouldCoalesceEventChangeDetection;
         self.shouldCoalesceRunChangeDetection = shouldCoalesceRunChangeDetection;
-        self.lastRequestAnimationFrameId = -1;
-        self.nativeRequestAnimationFrame = getNativeRequestAnimationFrame().nativeRequestAnimationFrame;
+        self.callbackScheduled = false;
+        self.scheduleCallback = getCallbackScheduler();
         forkInnerZoneWithAngularBehavior(self);
     }
     /**
@@ -14782,10 +14844,11 @@ function delayChangeDetectionForEvents(zone) {
      * so we also need to check the _nesting here to prevent multiple
      * change detections.
      */
-    if (zone.isCheckStableRunning || zone.lastRequestAnimationFrameId !== -1) {
+    if (zone.isCheckStableRunning || zone.callbackScheduled) {
         return;
     }
-    zone.lastRequestAnimationFrameId = zone.nativeRequestAnimationFrame.call(_global, () => {
+    zone.callbackScheduled = true;
+    zone.scheduleCallback.call(_global, () => {
         // This is a work around for https://github.com/angular/angular/issues/36839.
         // The core issue is that when event coalescing is enabled it is possible for microtasks
         // to get flushed too early (As is the case with `Promise.then`) between the
@@ -14797,7 +14860,7 @@ function delayChangeDetectionForEvents(zone) {
         // eventTask execution.
         if (!zone.fakeTopEventTask) {
             zone.fakeTopEventTask = Zone.root.scheduleEventTask('fakeTopEventTask', () => {
-                zone.lastRequestAnimationFrameId = -1;
+                zone.callbackScheduled = false;
                 updateMicroTaskStatus(zone);
                 zone.isCheckStableRunning = true;
                 checkStable(zone);
@@ -14868,7 +14931,7 @@ function forkInnerZoneWithAngularBehavior(zone) {
 function updateMicroTaskStatus(zone) {
     if (zone._hasPendingMicrotasks ||
         ((zone.shouldCoalesceEventChangeDetection || zone.shouldCoalesceRunChangeDetection) &&
-            zone.lastRequestAnimationFrameId !== -1)) {
+            zone.callbackScheduled === true)) {
         zone.hasPendingMicrotasks = true;
     }
     else {
@@ -15977,7 +16040,7 @@ function createRootComponent(componentView, rootComponentDef, rootDirectives, ho
 function setRootNodeAttributes(hostRenderer, componentDef, hostRNode, rootSelectorOrNode) {
     if (rootSelectorOrNode) {
         // The placeholder will be replaced with the actual version at build time.
-        setUpAttributes(hostRenderer, hostRNode, ['ng-version', '17.3.1']);
+        setUpAttributes(hostRenderer, hostRNode, ['ng-version', '18.0.0-next.1']);
     }
     else {
         // If host element is created as a part of this function call (i.e. `rootSelectorOrNode`
@@ -29741,7 +29804,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('17.3.1');
+const VERSION = new Version('18.0.0-next.1');
 
 class Console {
     log(message) {
@@ -31144,6 +31207,8 @@ class NgProbeToken {
         this.token = token;
     }
 }
+/** 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();
@@ -31423,12 +31488,7 @@ class ApplicationRef {
     detectChangesInAttachedViews(refreshViews) {
         let runs = 0;
         const afterRenderEffectManager = this.afterRenderEffectManager;
-        while (true) {
-            if (runs === MAXIMUM_REFRESH_RERUNS) {
-                throw new RuntimeError(103 /* RuntimeErrorCode.INFINITE_CHANGE_DETECTION */, ngDevMode &&
-                    'Infinite change detection while refreshing application views. ' +
-                        'Ensure afterRender or queueStateUpdate hooks are not continuously causing updates.');
-            }
+        while (runs < MAXIMUM_REFRESH_RERUNS) {
             if (refreshViews) {
                 const isFirstPass = runs === 0;
                 this.beforeRender.next(isFirstPass);
@@ -31450,6 +31510,12 @@ class ApplicationRef {
                 break;
             }
         }
+        if ((typeof ngDevMode === 'undefined' || ngDevMode) && runs >= MAXIMUM_REFRESH_RERUNS) {
+            throw new RuntimeError(103 /* RuntimeErrorCode.INFINITE_CHANGE_DETECTION */, ngDevMode &&
+                'Infinite change detection while refreshing application views. ' +
+                    'Ensure views are not calling `markForCheck` on every template execution or ' +
+                    'that afterRender hooks always mark views for check.');
+        }
     }
     /**
      * Attaches a view so that it will be dirty checked.
@@ -31584,27 +31650,9 @@ function shouldRecheckView(view) {
     return requiresRefreshOrTraversal(view);
 }
 function detectChangesInView(lView, notifyErrorHandler, isFirstPass) {
-    let mode;
-    if (isFirstPass) {
-        // The first pass is always in Global mode, which includes `CheckAlways` views.
-        mode = 0 /* ChangeDetectionMode.Global */;
-        // Add `RefreshView` flag to ensure this view is refreshed if not already dirty.
-        // `RefreshView` flag is used intentionally over `Dirty` because it gets cleared before
-        // executing any of the actual refresh code while the `Dirty` flag doesn't get cleared
-        // until the end of the refresh. Using `RefreshView` prevents creating a potential
-        // difference in the state of the LViewFlags during template execution.
-        lView[FLAGS] |= 1024 /* LViewFlags.RefreshView */;
-    }
-    else if (lView[FLAGS] & 64 /* LViewFlags.Dirty */) {
-        // The root view has been explicitly marked for check, so check it in Global mode.
-        mode = 0 /* ChangeDetectionMode.Global */;
-    }
-    else {
-        // The view has not been marked for check, but contains a view marked for refresh
-        // (likely via a signal). Start this change detection in Targeted mode to skip the root
-        // view and check just the view(s) that need refreshed.
-        mode = 1 /* ChangeDetectionMode.Targeted */;
-    }
+    const mode = isFirstPass || lView[FLAGS] & 64 /* LViewFlags.Dirty */ ?
+        0 /* ChangeDetectionMode.Global */ :
+        1 /* ChangeDetectionMode.Targeted */;
     detectChangesInternal(lView, notifyErrorHandler, mode);
 }
 
@@ -35001,6 +35049,7 @@ class ChangeDetectionSchedulerImpl {
         this.taskService = inject(PendingTasks);
         this.pendingRenderTaskId = null;
         this.shouldRefreshViews = false;
+        this.schedule = getCallbackScheduler();
     }
     notify(type = 0 /* NotificationType.RefreshViews */) {
         // When the only source of notification is an afterRender hook will skip straight to the hooks
@@ -35010,38 +35059,9 @@ class ChangeDetectionSchedulerImpl {
             return;
         }
         this.pendingRenderTaskId = this.taskService.add();
-        this.raceTimeoutAndRequestAnimationFrame();
-    }
-    /**
-     * Run change detection after the first of setTimeout and requestAnimationFrame resolves.
-     *
-     * - `requestAnimationFrame` ensures that change detection runs ahead of a browser repaint.
-     * This ensures that the create and update passes of a change detection always happen
-     * in the same frame.
-     * - When the browser is resource-starved, `rAF` can execute _before_ a `setTimeout` because
-     * rendering is a very high priority process. This means that `setTimeout` cannot guarantee
-     * same-frame create and update pass, when `setTimeout` is used to schedule the update phase.
-     * - While `rAF` gives us the desirable same-frame updates, it has two limitations that
-     * prevent it from being used alone. First, it does not run in background tabs, which would
-     * prevent Angular from initializing an application when opened in a new tab (for example).
-     * Second, repeated calls to requestAnimationFrame will execute at the refresh rate of the
-     * hardware (~16ms for a 60Hz display). This would cause significant slowdown of tests that
-     * are written with several updates and asserts in the form of "update; await stable; assert;".
-     * - Both `setTimeout` and `rAF` are able to "coalesce" several events from a single user
-     * interaction into a single change detection. Importantly, this reduces view tree traversals when
-     * compared to an alternative timing mechanism like `queueMicrotask`, where change detection would
-     * then be interleaves between each event.
-     *
-     * By running change detection after the first of `setTimeout` and `rAF` to execute, we get the
-     * best of both worlds.
-     */
-    async raceTimeoutAndRequestAnimationFrame() {
-        const timeout = new Promise(resolve => setTimeout(resolve));
-        const rAF = typeof _global['requestAnimationFrame'] === 'function' ?
-            new Promise(resolve => requestAnimationFrame(() => resolve())) :
-            null;
-        await Promise.race([timeout, rAF]);
-        this.tick();
+        this.schedule(() => {
+            this.tick();
+        });
     }
     tick() {
         try {