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

package/fesm2022/core.mjs

@@ -1,11 +1,11 @@
 /**
- * @license Angular v18.1.0-next.1
+ * @license Angular v18.1.0-next.2
  * (c) 2010-2024 Google LLC. https://angular.io/
  * License: MIT
  */
 
 import { SIGNAL_NODE as SIGNAL_NODE$1, signalSetFn as signalSetFn$1, producerAccessed as producerAccessed$1, SIGNAL as SIGNAL$1, getActiveConsumer as getActiveConsumer$1, setActiveConsumer as setActiveConsumer$1, consumerDestroy as consumerDestroy$1, REACTIVE_NODE as REACTIVE_NODE$1, consumerBeforeComputation as consumerBeforeComputation$1, consumerAfterComputation as consumerAfterComputation$1, consumerPollProducersForChange as consumerPollProducersForChange$1, createSignal as createSignal$1, signalUpdateFn as signalUpdateFn$1, createComputed as createComputed$1, setThrowInvalidWriteToSignalError as setThrowInvalidWriteToSignalError$1, createWatch as createWatch$1 } from '@angular/core/primitives/signals';
-import { Subject, Subscription, BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Subject, Subscription } from 'rxjs';
 import { map, first } from 'rxjs/operators';
 import * as Attributes from '@angular/core/primitives/event-dispatch';
 import { EventContract, EventContractContainer, EventDispatcher, registerDispatcher, isSupportedEvent, isCaptureEvent } from '@angular/core/primitives/event-dispatch';
@@ -6917,15 +6917,102 @@ function unwrapElementRef(value) {
     return value instanceof ElementRef ? value.nativeElement : value;
 }
 
+/**
+ * Internal implementation of the pending tasks service.
+ */
+class PendingTasks {
+    constructor() {
+        this.taskId = 0;
+        this.pendingTasks = new Set();
+        this.hasPendingTasks = new BehaviorSubject(false);
+    }
+    get _hasPendingTasks() {
+        return this.hasPendingTasks.value;
+    }
+    add() {
+        if (!this._hasPendingTasks) {
+            this.hasPendingTasks.next(true);
+        }
+        const taskId = this.taskId++;
+        this.pendingTasks.add(taskId);
+        return taskId;
+    }
+    remove(taskId) {
+        this.pendingTasks.delete(taskId);
+        if (this.pendingTasks.size === 0 && this._hasPendingTasks) {
+            this.hasPendingTasks.next(false);
+        }
+    }
+    ngOnDestroy() {
+        this.pendingTasks.clear();
+        if (this._hasPendingTasks) {
+            this.hasPendingTasks.next(false);
+        }
+    }
+    /** @nocollapse */
+    static { this.ɵprov = ɵɵdefineInjectable({
+        token: PendingTasks,
+        providedIn: 'root',
+        factory: () => new PendingTasks(),
+    }); }
+}
+/**
+ * Experimental service that keeps track of pending tasks contributing to the stableness of Angular
+ * application. While several existing Angular services (ex.: `HttpClient`) will internally manage
+ * tasks influencing stability, this API gives control over stability to library and application
+ * developers for specific cases not covered by Angular internals.
+ *
+ * The concept of stability comes into play in several important scenarios:
+ * - SSR process needs to wait for the application stability before serializing and sending rendered
+ * HTML;
+ * - tests might want to delay assertions until the application becomes stable;
+ *
+ * @usageNotes
+ * ```typescript
+ * const pendingTasks = inject(ExperimentalPendingTasks);
+ * const taskCleanup = pendingTasks.add();
+ * // do work that should block application's stability and then:
+ * taskCleanup();
+ * ```
+ *
+ * This API is experimental. Neither the shape, nor the underlying behavior is stable and can change
+ * in patch versions. We will iterate on the exact API based on the feedback and our understanding
+ * of the problem and solution space.
+ *
+ * @publicApi
+ * @experimental
+ */
+class ExperimentalPendingTasks {
+    constructor() {
+        this.internalPendingTasks = inject(PendingTasks);
+    }
+    /**
+     * Adds a new task that should block application's stability.
+     * @returns A cleanup function that removes a task when called.
+     */
+    add() {
+        const taskId = this.internalPendingTasks.add();
+        return () => this.internalPendingTasks.remove(taskId);
+    }
+    /** @nocollapse */
+    static { this.ɵprov = ɵɵdefineInjectable({
+        token: ExperimentalPendingTasks,
+        providedIn: 'root',
+        factory: () => new ExperimentalPendingTasks(),
+    }); }
+}
+
 class EventEmitter_ extends Subject {
     constructor(isAsync = false) {
         super();
         this.destroyRef = undefined;
+        this.pendingTasks = undefined;
         this.__isAsync = isAsync;
-        // Attempt to retrieve a `DestroyRef` optionally.
-        // For backwards compatibility reasons, this cannot be required
+        // Attempt to retrieve a `DestroyRef` and `PendingTasks` optionally.
+        // For backwards compatibility reasons, this cannot be required.
         if (isInInjectionContext()) {
             this.destroyRef = inject(DestroyRef, { optional: true }) ?? undefined;
+            this.pendingTasks = inject(PendingTasks, { optional: true }) ?? undefined;
         }
     }
     emit(value) {
@@ -6948,12 +7035,12 @@ class EventEmitter_ extends Subject {
             completeFn = observer.complete?.bind(observer);
         }
         if (this.__isAsync) {
-            errorFn = _wrapInTimeout(errorFn);
+            errorFn = this.wrapInTimeout(errorFn);
             if (nextFn) {
-                nextFn = _wrapInTimeout(nextFn);
+                nextFn = this.wrapInTimeout(nextFn);
             }
             if (completeFn) {
-                completeFn = _wrapInTimeout(completeFn);
+                completeFn = this.wrapInTimeout(completeFn);
             }
         }
         const sink = super.subscribe({ next: nextFn, error: errorFn, complete: completeFn });
@@ -6962,11 +7049,17 @@ class EventEmitter_ extends Subject {
         }
         return sink;
     }
-}
-function _wrapInTimeout(fn) {
-    return (value) => {
-        setTimeout(fn, undefined, value);
-    };
+    wrapInTimeout(fn) {
+        return (value) => {
+            const taskId = this.pendingTasks?.add();
+            setTimeout(() => {
+                fn(value);
+                if (taskId !== undefined) {
+                    this.pendingTasks?.remove(taskId);
+                }
+            });
+        };
+    }
 }
 /**
  * @publicApi
@@ -12895,6 +12988,59 @@ const REACTIVE_LVIEW_CONSUMER_NODE = {
         this.lView[REACTIVE_TEMPLATE_CONSUMER] = this;
     },
 };
+/**
+ * Creates a temporary consumer for use with `LView`s that should not have consumers.
+ * If the LView already has a consumer, returns the existing one instead.
+ *
+ * This is necessary because some APIs may cause change detection directly on an LView
+ * that we do not want to have a consumer (Embedded views today). As a result, there
+ * would be no active consumer from running change detection on its host component
+ * and any signals in the LView template would be untracked. Instead, we create
+ * this temporary consumer that marks the first parent that _should_ have a consumer
+ * for refresh. Once change detection runs as part of that refresh, we throw away
+ * this consumer because its signals will then be tracked by the parent's consumer.
+ */
+function getOrCreateTemporaryConsumer(lView) {
+    const consumer = lView[REACTIVE_TEMPLATE_CONSUMER] ?? Object.create(TEMPORARY_CONSUMER_NODE);
+    consumer.lView = lView;
+    return consumer;
+}
+const TEMPORARY_CONSUMER_NODE = {
+    ...REACTIVE_NODE$1,
+    consumerIsAlwaysLive: true,
+    consumerMarkedDirty: (node) => {
+        let parent = getLViewParent(node.lView);
+        while (parent && !viewShouldHaveReactiveConsumer(parent[TVIEW])) {
+            parent = getLViewParent(parent);
+        }
+        if (!parent) {
+            // If we can't find an appropriate parent that should have a consumer, we
+            // don't have a way of appropriately refreshing this LView as part of application synchronization.
+            return;
+        }
+        markViewForRefresh(parent);
+    },
+    consumerOnSignalRead() {
+        this.lView[REACTIVE_TEMPLATE_CONSUMER] = this;
+    },
+};
+/**
+ * Indicates if the view should get its own reactive consumer node.
+ *
+ * In the current design, all embedded views share a consumer with the component view. This allows
+ * us to refresh at the component level rather than at a per-view level. In addition, root views get
+ * their own reactive node because root component will have a host view that executes the
+ * component's host bindings. This needs to be tracked in a consumer as well.
+ *
+ * To get a more granular change detection than per-component, all we would just need to update the
+ * condition here so that a given view gets a reactive consumer which can become dirty independently
+ * from its parent component. For example embedded views for signal components could be created with
+ * a new type "SignalEmbeddedView" and the condition here wouldn't even need updating in order to
+ * get granular per-view change detection for signal components.
+ */
+function viewShouldHaveReactiveConsumer(tView) {
+    return tView.type !== 2 /* TViewType.Embedded */;
+}
 
 /**
  * The maximum number of times the change detection traversal will rerun before throwing an error.
@@ -12993,11 +13139,29 @@ function refreshView(tView, lView, templateFn, context) {
     // - We might already be in a reactive context if this is an embedded view of the host.
     // - We might be descending into a view that needs a consumer.
     enterView(lView);
+    let returnConsumerToPool = true;
     let prevConsumer = null;
     let currentConsumer = null;
-    if (!isInCheckNoChangesPass && viewShouldHaveReactiveConsumer(tView)) {
-        currentConsumer = getOrBorrowReactiveLViewConsumer(lView);
-        prevConsumer = consumerBeforeComputation$1(currentConsumer);
+    if (!isInCheckNoChangesPass) {
+        if (viewShouldHaveReactiveConsumer(tView)) {
+            currentConsumer = getOrBorrowReactiveLViewConsumer(lView);
+            prevConsumer = consumerBeforeComputation$1(currentConsumer);
+        }
+        else if (getActiveConsumer$1() === null) {
+            // If the current view should not have a reactive consumer but we don't have an active consumer,
+            // we still need to create a temporary consumer to track any signal reads in this template.
+            // This is a rare case that can happen with `viewContainerRef.createEmbeddedView(...).detectChanges()`.
+            // This temporary consumer marks the first parent that _should_ have a consumer for refresh.
+            // Once that refresh happens, the signals will be tracked in the parent consumer and we can destroy
+            // the temporary one.
+            returnConsumerToPool = false;
+            currentConsumer = getOrCreateTemporaryConsumer(lView);
+            prevConsumer = consumerBeforeComputation$1(currentConsumer);
+        }
+        else if (lView[REACTIVE_TEMPLATE_CONSUMER]) {
+            consumerDestroy$1(lView[REACTIVE_TEMPLATE_CONSUMER]);
+            lView[REACTIVE_TEMPLATE_CONSUMER] = null;
+        }
     }
     try {
         resetPreOrderHookFlags(lView);
@@ -13123,28 +13287,13 @@ function refreshView(tView, lView, templateFn, context) {
     finally {
         if (currentConsumer !== null) {
             consumerAfterComputation$1(currentConsumer, prevConsumer);
-            maybeReturnReactiveLViewConsumer(currentConsumer);
+            if (returnConsumerToPool) {
+                maybeReturnReactiveLViewConsumer(currentConsumer);
+            }
         }
         leaveView();
     }
 }
-/**
- * Indicates if the view should get its own reactive consumer node.
- *
- * In the current design, all embedded views share a consumer with the component view. This allows
- * us to refresh at the component level rather than at a per-view level. In addition, root views get
- * their own reactive node because root component will have a host view that executes the
- * component's host bindings. This needs to be tracked in a consumer as well.
- *
- * To get a more granular change detection than per-component, all we would just need to update the
- * condition here so that a given view gets a reactive consumer which can become dirty independently
- * from its parent component. For example embedded views for signal components could be created with
- * a new type "SignalEmbeddedView" and the condition here wouldn't even need updating in order to
- * get granular per-view change detection for signal components.
- */
-function viewShouldHaveReactiveConsumer(tView) {
-    return tView.type !== 2 /* TViewType.Embedded */;
-}
 /**
  * Goes over embedded views (ones created through ViewContainerRef APIs) and refreshes
  * them by executing an associated template function.
@@ -15881,15 +16030,17 @@ function getNgZone(ngZoneToUse = 'zone.js', options) {
  * manual DOM access, ensuring the best experience for the end users of your application
  * or library.
  *
- * @developerPreview
+ * @deprecated Specify the phase for your callback to run in by passing a spec-object as the first
+ *   parameter to `afterRender` or `afterNextRender` insetad of a function.
  */
 var AfterRenderPhase;
 (function (AfterRenderPhase) {
     /**
      * Use `AfterRenderPhase.EarlyRead` for callbacks that only need to **read** from the
      * DOM before a subsequent `AfterRenderPhase.Write` callback, for example to perform
-     * custom layout that the browser doesn't natively support. **Never** use this phase
-     * for callbacks that can write to the DOM or when `AfterRenderPhase.Read` is adequate.
+     * custom layout that the browser doesn't natively support. Prefer the
+     * `AfterRenderPhase.EarlyRead` phase if reading can wait until after the write phase.
+     * **Never** write to the DOM in this phase.
      *
      * <div class="alert is-important">
      *
@@ -15901,25 +16052,25 @@ var AfterRenderPhase;
     AfterRenderPhase[AfterRenderPhase["EarlyRead"] = 0] = "EarlyRead";
     /**
      * Use `AfterRenderPhase.Write` for callbacks that only **write** to the DOM. **Never**
-     * use this phase for callbacks that can read from the DOM.
+     * read from the DOM in this phase.
      */
     AfterRenderPhase[AfterRenderPhase["Write"] = 1] = "Write";
     /**
      * Use `AfterRenderPhase.MixedReadWrite` for callbacks that read from or write to the
-     * DOM, that haven't been refactored to use a different phase. **Never** use this phase
-     * for callbacks that can use a different phase instead.
+     * DOM, that haven't been refactored to use a different phase. **Never** use this phase if
+     * it is possible to divide the work among the other phases instead.
      *
      * <div class="alert is-critical">
      *
      * Using this value can **significantly** degrade performance.
-     * Instead, prefer refactoring into multiple callbacks using a more specific phase.
+     * Instead, prefer dividing work into the appropriate phase callbacks.
      *
      * </div>
      */
     AfterRenderPhase[AfterRenderPhase["MixedReadWrite"] = 2] = "MixedReadWrite";
     /**
      * Use `AfterRenderPhase.Read` for callbacks that only **read** from the DOM. **Never**
-     * use this phase for callbacks that can write to the DOM.
+     * write to the DOM in this phase.
      */
     AfterRenderPhase[AfterRenderPhase["Read"] = 3] = "Read";
 })(AfterRenderPhase || (AfterRenderPhase = {}));
@@ -15951,55 +16102,7 @@ function internalAfterNextRender(callback, options) {
     const afterRenderEventManager = injector.get(AfterRenderEventManager);
     afterRenderEventManager.internalCallbacks.push(callback);
 }
-/**
- * Register a callback to be invoked each time the application
- * finishes rendering.
- *
- * <div class="alert is-critical">
- *
- * You should always explicitly specify a non-default [phase](api/core/AfterRenderPhase), or you
- * risk significant performance degradation.
- *
- * </div>
- *
- * Note that the callback will run
- * - in the order it was registered
- * - once per render
- * - on browser platforms only
- *
- * <div class="alert is-important">
- *
- * Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs.
- * You must use caution when directly reading or writing the DOM and layout.
- *
- * </div>
- *
- * @param callback A callback function to register
- *
- * @usageNotes
- *
- * Use `afterRender` to read or write the DOM after each render.
- *
- * ### Example
- * ```ts
- * @Component({
- *   selector: 'my-cmp',
- *   template: `<span #content>{{ ... }}</span>`,
- * })
- * export class MyComponent {
- *   @ViewChild('content') contentRef: ElementRef;
- *
- *   constructor() {
- *     afterRender(() => {
- *       console.log('content height: ' + this.contentRef.nativeElement.scrollHeight);
- *     }, {phase: AfterRenderPhase.Read});
- *   }
- * }
- * ```
- *
- * @developerPreview
- */
-function afterRender(callback, options) {
+function afterRender(callbackOrSpec, options) {
     ngDevMode &&
         assertNotInReactiveContext(afterRender, 'Call `afterRender` outside of a reactive context. For example, schedule the render ' +
             'callback inside the component constructor`.');
@@ -16009,101 +16112,80 @@ function afterRender(callback, options) {
         return NOOP_AFTER_RENDER_REF;
     }
     performanceMarkFeature('NgAfterRender');
-    const afterRenderEventManager = injector.get(AfterRenderEventManager);
-    // Lazily initialize the handler implementation, if necessary. This is so that it can be
-    // tree-shaken if `afterRender` and `afterNextRender` aren't used.
-    const callbackHandler = (afterRenderEventManager.handler ??=
-        new AfterRenderCallbackHandlerImpl());
-    const phase = options?.phase ?? AfterRenderPhase.MixedReadWrite;
-    const destroy = () => {
-        callbackHandler.unregister(instance);
-        unregisterFn();
-    };
-    const unregisterFn = injector.get(DestroyRef).onDestroy(destroy);
-    const instance = runInInjectionContext(injector, () => new AfterRenderCallback(phase, callback));
-    callbackHandler.register(instance);
-    return { destroy };
+    return afterRenderImpl(callbackOrSpec, injector, 
+    /* once */ false, options?.phase ?? AfterRenderPhase.MixedReadWrite);
 }
-/**
- * Register a callback to be invoked the next time the application
- * finishes rendering.
- *
- * <div class="alert is-critical">
- *
- * You should always explicitly specify a non-default [phase](api/core/AfterRenderPhase), or you
- * risk significant performance degradation.
- *
- * </div>
- *
- * Note that the callback will run
- * - in the order it was registered
- * - on browser platforms only
- *
- * <div class="alert is-important">
- *
- * Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs.
- * You must use caution when directly reading or writing the DOM and layout.
- *
- * </div>
- *
- * @param callback A callback function to register
- *
- * @usageNotes
- *
- * Use `afterNextRender` to read or write the DOM once,
- * for example to initialize a non-Angular library.
- *
- * ### Example
- * ```ts
- * @Component({
- *   selector: 'my-chart-cmp',
- *   template: `<div #chart>{{ ... }}</div>`,
- * })
- * export class MyChartCmp {
- *   @ViewChild('chart') chartRef: ElementRef;
- *   chart: MyChart|null;
- *
- *   constructor() {
- *     afterNextRender(() => {
- *       this.chart = new MyChart(this.chartRef.nativeElement);
- *     }, {phase: AfterRenderPhase.Write});
- *   }
- * }
- * ```
- *
- * @developerPreview
- */
-function afterNextRender(callback, options) {
+function afterNextRender(callbackOrSpec, options) {
     !options && assertInInjectionContext(afterNextRender);
     const injector = options?.injector ?? inject(Injector);
     if (!isPlatformBrowser(injector)) {
         return NOOP_AFTER_RENDER_REF;
     }
     performanceMarkFeature('NgAfterNextRender');
+    return afterRenderImpl(callbackOrSpec, injector, 
+    /* once */ true, options?.phase ?? AfterRenderPhase.MixedReadWrite);
+}
+function getSpec(callbackOrSpec, phase) {
+    if (callbackOrSpec instanceof Function) {
+        switch (phase) {
+            case AfterRenderPhase.EarlyRead:
+                return { earlyRead: callbackOrSpec };
+            case AfterRenderPhase.Write:
+                return { write: callbackOrSpec };
+            case AfterRenderPhase.MixedReadWrite:
+                return { mixedReadWrite: callbackOrSpec };
+            case AfterRenderPhase.Read:
+                return { read: callbackOrSpec };
+        }
+    }
+    return callbackOrSpec;
+}
+/**
+ * Shared implementation for `afterRender` and `afterNextRender`.
+ */
+function afterRenderImpl(callbackOrSpec, injector, once, phase) {
+    const spec = getSpec(callbackOrSpec, phase);
     const afterRenderEventManager = injector.get(AfterRenderEventManager);
     // Lazily initialize the handler implementation, if necessary. This is so that it can be
     // tree-shaken if `afterRender` and `afterNextRender` aren't used.
     const callbackHandler = (afterRenderEventManager.handler ??=
         new AfterRenderCallbackHandlerImpl());
-    const phase = options?.phase ?? AfterRenderPhase.MixedReadWrite;
+    const pipelinedArgs = [];
+    const instances = [];
     const destroy = () => {
-        callbackHandler.unregister(instance);
+        for (const instance of instances) {
+            callbackHandler.unregister(instance);
+        }
         unregisterFn();
     };
     const unregisterFn = injector.get(DestroyRef).onDestroy(destroy);
-    const instance = runInInjectionContext(injector, () => new AfterRenderCallback(phase, () => {
-        destroy();
-        callback();
-    }));
-    callbackHandler.register(instance);
+    const registerCallback = (phase, phaseCallback) => {
+        if (!phaseCallback) {
+            return;
+        }
+        const callback = once
+            ? (...args) => {
+                destroy();
+                phaseCallback(...args);
+            }
+            : phaseCallback;
+        const instance = runInInjectionContext(injector, () => new AfterRenderCallback(phase, pipelinedArgs, callback));
+        callbackHandler.register(instance);
+        instances.push(instance);
+    };
+    registerCallback(AfterRenderPhase.EarlyRead, spec.earlyRead);
+    registerCallback(AfterRenderPhase.Write, spec.write);
+    registerCallback(AfterRenderPhase.MixedReadWrite, spec.mixedReadWrite);
+    registerCallback(AfterRenderPhase.Read, spec.read);
     return { destroy };
 }
 /**
  * A wrapper around a function to be used as an after render callback.
  */
 class AfterRenderCallback {
-    constructor(phase, callbackFn) {
+    constructor(phase, pipelinedArgs, callbackFn) {
         this.phase = phase;
+        this.pipelinedArgs = pipelinedArgs;
         this.callbackFn = callbackFn;
         this.zone = inject(NgZone);
         this.errorHandler = inject(ErrorHandler, { optional: true });
@@ -16112,7 +16194,9 @@ class AfterRenderCallback {
     }
     invoke() {
         try {
-            this.zone.runOutsideAngular(this.callbackFn);
+            const result = this.zone.runOutsideAngular(() => this.callbackFn.apply(null, this.pipelinedArgs));
+            // Clear out the args and add the result which will be passed to the next phase.
+            this.pipelinedArgs.splice(0, this.pipelinedArgs.length, result);
         }
         catch (err) {
             this.errorHandler?.handleError(err);
@@ -16906,7 +16990,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', '18.1.0-next.1']);
+        setUpAttributes(hostRenderer, hostRNode, ['ng-version', '18.1.0-next.2']);
     }
     else {
         // If host element is created as a part of this function call (i.e. `rootSelectorOrNode`
@@ -19048,190 +19132,6 @@ class CachedInjectorService {
     }); }
 }
 
-/**
- * The name of a field that Angular monkey-patches onto a component
- * class to store a function that loads defer-loadable dependencies
- * and applies metadata to a class.
- */
-const ASYNC_COMPONENT_METADATA_FN = '__ngAsyncComponentMetadataFn__';
-/**
- * If a given component has unresolved async metadata - returns a reference
- * to a function that applies component metadata after resolving defer-loadable
- * dependencies. Otherwise - this function returns `null`.
- */
-function getAsyncClassMetadataFn(type) {
-    const componentClass = type; // cast to `any`, so that we can read a monkey-patched field
-    return componentClass[ASYNC_COMPONENT_METADATA_FN] ?? null;
-}
-/**
- * Handles the process of applying metadata info to a component class in case
- * component template has defer blocks (thus some dependencies became deferrable).
- *
- * @param type Component class where metadata should be added
- * @param dependencyLoaderFn Function that loads dependencies
- * @param metadataSetterFn Function that forms a scope in which the `setClassMetadata` is invoked
- */
-function setClassMetadataAsync(type, dependencyLoaderFn, metadataSetterFn) {
-    const componentClass = type; // cast to `any`, so that we can monkey-patch it
-    componentClass[ASYNC_COMPONENT_METADATA_FN] = () => Promise.all(dependencyLoaderFn()).then((dependencies) => {
-        metadataSetterFn(...dependencies);
-        // Metadata is now set, reset field value to indicate that this component
-        // can by used/compiled synchronously.
-        componentClass[ASYNC_COMPONENT_METADATA_FN] = null;
-        return dependencies;
-    });
-    return componentClass[ASYNC_COMPONENT_METADATA_FN];
-}
-/**
- * Adds decorator, constructor, and property metadata to a given type via static metadata fields
- * on the type.
- *
- * These metadata fields can later be read with Angular's `ReflectionCapabilities` API.
- *
- * Calls to `setClassMetadata` can be guarded by ngDevMode, resulting in the metadata assignments
- * being tree-shaken away during production builds.
- */
-function setClassMetadata(type, decorators, ctorParameters, propDecorators) {
-    return noSideEffects(() => {
-        const clazz = type;
-        if (decorators !== null) {
-            if (clazz.hasOwnProperty('decorators') && clazz.decorators !== undefined) {
-                clazz.decorators.push(...decorators);
-            }
-            else {
-                clazz.decorators = decorators;
-            }
-        }
-        if (ctorParameters !== null) {
-            // Rather than merging, clobber the existing parameters. If other projects exist which
-            // use tsickle-style annotations and reflect over them in the same way, this could
-            // cause issues, but that is vanishingly unlikely.
-            clazz.ctorParameters = ctorParameters;
-        }
-        if (propDecorators !== null) {
-            // The property decorator objects are merged as it is possible different fields have
-            // different decorator types. Decorators on individual fields are not merged, as it's
-            // also incredibly unlikely that a field will be decorated both with an Angular
-            // decorator and a non-Angular decorator that's also been downleveled.
-            if (clazz.hasOwnProperty('propDecorators') && clazz.propDecorators !== undefined) {
-                clazz.propDecorators = { ...clazz.propDecorators, ...propDecorators };
-            }
-            else {
-                clazz.propDecorators = propDecorators;
-            }
-        }
-    });
-}
-
-/*
- * This file exists to support compilation of @angular/core in Ivy mode.
- *
- * When the Angular compiler processes a compilation unit, it normally writes imports to
- * @angular/core. When compiling the core package itself this strategy isn't usable. Instead, the
- * compiler writes imports to this file.
- *
- * Only a subset of such imports are supported - core is not allowed to declare components or pipes.
- * A check in ngtsc's `R3SymbolsImportRewriter` validates this condition. The rewriter is only used
- * when compiling @angular/core and is responsible for translating an external name (prefixed with
- * ɵ) to the internal symbol name as exported below.
- *
- * The below symbols are used for @Injectable and @NgModule compilation.
- */
-/**
- * The existence of this constant (in this particular file) informs the Angular compiler that the
- * current program is actually @angular/core, which needs to be compiled specially.
- */
-const ITS_JUST_ANGULAR = true;
-
-/**
- * Internal implementation of the pending tasks service.
- */
-class PendingTasks {
-    constructor() {
-        this.taskId = 0;
-        this.pendingTasks = new Set();
-        this.hasPendingTasks = new BehaviorSubject(false);
-    }
-    get _hasPendingTasks() {
-        return this.hasPendingTasks.value;
-    }
-    add() {
-        if (!this._hasPendingTasks) {
-            this.hasPendingTasks.next(true);
-        }
-        const taskId = this.taskId++;
-        this.pendingTasks.add(taskId);
-        return taskId;
-    }
-    remove(taskId) {
-        this.pendingTasks.delete(taskId);
-        if (this.pendingTasks.size === 0 && this._hasPendingTasks) {
-            this.hasPendingTasks.next(false);
-        }
-    }
-    ngOnDestroy() {
-        this.pendingTasks.clear();
-        if (this._hasPendingTasks) {
-            this.hasPendingTasks.next(false);
-        }
-    }
-    static { this.ɵfac = function PendingTasks_Factory(t) { return new (t || PendingTasks)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: PendingTasks, factory: PendingTasks.ɵfac, providedIn: 'root' }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(PendingTasks, [{
-        type: Injectable,
-        args: [{
-                providedIn: 'root',
-            }]
-    }], null, null); })();
-/**
- * Experimental service that keeps track of pending tasks contributing to the stableness of Angular
- * application. While several existing Angular services (ex.: `HttpClient`) will internally manage
- * tasks influencing stability, this API gives control over stability to library and application
- * developers for specific cases not covered by Angular internals.
- *
- * The concept of stability comes into play in several important scenarios:
- * - SSR process needs to wait for the application stability before serializing and sending rendered
- * HTML;
- * - tests might want to delay assertions until the application becomes stable;
- *
- * @usageNotes
- * ```typescript
- * const pendingTasks = inject(ExperimentalPendingTasks);
- * const taskCleanup = pendingTasks.add();
- * // do work that should block application's stability and then:
- * taskCleanup();
- * ```
- *
- * This API is experimental. Neither the shape, nor the underlying behavior is stable and can change
- * in patch versions. We will iterate on the exact API based on the feedback and our understanding
- * of the problem and solution space.
- *
- * @publicApi
- * @experimental
- */
-class ExperimentalPendingTasks {
-    constructor() {
-        this.internalPendingTasks = inject(PendingTasks);
-    }
-    /**
-     * Adds a new task that should block application's stability.
-     * @returns A cleanup function that removes a task when called.
-     */
-    add() {
-        const taskId = this.internalPendingTasks.add();
-        return () => this.internalPendingTasks.remove(taskId);
-    }
-    static { this.ɵfac = function ExperimentalPendingTasks_Factory(t) { return new (t || ExperimentalPendingTasks)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: ExperimentalPendingTasks, factory: ExperimentalPendingTasks.ɵfac, providedIn: 'root' }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ExperimentalPendingTasks, [{
-        type: Injectable,
-        args: [{
-                providedIn: 'root',
-            }]
-    }], null, null); })();
-
 function isIterable(obj) {
     return obj !== null && typeof obj === 'object' && obj[Symbol.iterator] !== undefined;
 }
@@ -28858,6 +28758,81 @@ function maybeUnwrapModuleWithProviders(value) {
     return isModuleWithProviders(value) ? value.ngModule : value;
 }
 
+/**
+ * The name of a field that Angular monkey-patches onto a component
+ * class to store a function that loads defer-loadable dependencies
+ * and applies metadata to a class.
+ */
+const ASYNC_COMPONENT_METADATA_FN = '__ngAsyncComponentMetadataFn__';
+/**
+ * If a given component has unresolved async metadata - returns a reference
+ * to a function that applies component metadata after resolving defer-loadable
+ * dependencies. Otherwise - this function returns `null`.
+ */
+function getAsyncClassMetadataFn(type) {
+    const componentClass = type; // cast to `any`, so that we can read a monkey-patched field
+    return componentClass[ASYNC_COMPONENT_METADATA_FN] ?? null;
+}
+/**
+ * Handles the process of applying metadata info to a component class in case
+ * component template has defer blocks (thus some dependencies became deferrable).
+ *
+ * @param type Component class where metadata should be added
+ * @param dependencyLoaderFn Function that loads dependencies
+ * @param metadataSetterFn Function that forms a scope in which the `setClassMetadata` is invoked
+ */
+function setClassMetadataAsync(type, dependencyLoaderFn, metadataSetterFn) {
+    const componentClass = type; // cast to `any`, so that we can monkey-patch it
+    componentClass[ASYNC_COMPONENT_METADATA_FN] = () => Promise.all(dependencyLoaderFn()).then((dependencies) => {
+        metadataSetterFn(...dependencies);
+        // Metadata is now set, reset field value to indicate that this component
+        // can by used/compiled synchronously.
+        componentClass[ASYNC_COMPONENT_METADATA_FN] = null;
+        return dependencies;
+    });
+    return componentClass[ASYNC_COMPONENT_METADATA_FN];
+}
+/**
+ * Adds decorator, constructor, and property metadata to a given type via static metadata fields
+ * on the type.
+ *
+ * These metadata fields can later be read with Angular's `ReflectionCapabilities` API.
+ *
+ * Calls to `setClassMetadata` can be guarded by ngDevMode, resulting in the metadata assignments
+ * being tree-shaken away during production builds.
+ */
+function setClassMetadata(type, decorators, ctorParameters, propDecorators) {
+    return noSideEffects(() => {
+        const clazz = type;
+        if (decorators !== null) {
+            if (clazz.hasOwnProperty('decorators') && clazz.decorators !== undefined) {
+                clazz.decorators.push(...decorators);
+            }
+            else {
+                clazz.decorators = decorators;
+            }
+        }
+        if (ctorParameters !== null) {
+            // Rather than merging, clobber the existing parameters. If other projects exist which
+            // use tsickle-style annotations and reflect over them in the same way, this could
+            // cause issues, but that is vanishingly unlikely.
+            clazz.ctorParameters = ctorParameters;
+        }
+        if (propDecorators !== null) {
+            // The property decorator objects are merged as it is possible different fields have
+            // different decorator types. Decorators on individual fields are not merged, as it's
+            // also incredibly unlikely that a field will be decorated both with an Angular
+            // decorator and a non-Angular decorator that's also been downleveled.
+            if (clazz.hasOwnProperty('propDecorators') && clazz.propDecorators !== undefined) {
+                clazz.propDecorators = { ...clazz.propDecorators, ...propDecorators };
+            }
+            else {
+                clazz.propDecorators = propDecorators;
+            }
+        }
+    });
+}
+
 /**
  * Bindings for pure functions are stored after regular bindings.
  *
@@ -30815,7 +30790,27 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('18.1.0-next.1');
+const VERSION = new Version('18.1.0-next.2');
+
+/*
+ * This file exists to support compilation of @angular/core in Ivy mode.
+ *
+ * When the Angular compiler processes a compilation unit, it normally writes imports to
+ * @angular/core. When compiling the core package itself this strategy isn't usable. Instead, the
+ * compiler writes imports to this file.
+ *
+ * Only a subset of such imports are supported - core is not allowed to declare components or pipes.
+ * A check in ngtsc's `R3SymbolsImportRewriter` validates this condition. The rewriter is only used
+ * when compiling @angular/core and is responsible for translating an external name (prefixed with
+ * ɵ) to the internal symbol name as exported below.
+ *
+ * The below symbols are used for @Injectable and @NgModule compilation.
+ */
+/**
+ * The existence of this constant (in this particular file) informs the Angular compiler that the
+ * current program is actually @angular/core, which needs to be compiled specially.
+ */
+const ITS_JUST_ANGULAR = true;
 
 class Console {
     log(message) {