@angular/core 16.2.2 → 16.2.4

package/fesm2022/testing.mjs

@@ -1,12 +1,13 @@
 /**
- * @license Angular v16.2.2
+ * @license Angular v16.2.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
 
-import { getDebugNode, RendererFactory2 as RendererFactory2$1, InjectionToken as InjectionToken$1, ɵstringify, ɵReflectionCapabilities, Directive, Component, Pipe, NgModule, ɵgetInjectableDef, resolveForwardRef as resolveForwardRef$1, ɵNG_COMP_DEF, ɵRender3NgModuleRef, ApplicationInitStatus, LOCALE_ID as LOCALE_ID$1, ɵDEFAULT_LOCALE_ID, ɵsetLocaleId, ɵRender3ComponentFactory, ɵcompileComponent, ɵNG_DIR_DEF, ɵcompileDirective, ɵNG_PIPE_DEF, ɵcompilePipe, ɵNG_MOD_DEF, ɵtransitiveScopesFor, ɵpatchComponentDefWithScope, ɵNG_INJ_DEF, ɵcompileNgModuleDefs, provideZoneChangeDetection, Compiler, COMPILER_OPTIONS, Injector as Injector$1, ɵisEnvironmentProviders, ɵNgModuleFactory, ModuleWithComponentFactories, ɵconvertToBitFlags, InjectFlags as InjectFlags$1, ɵsetAllowDuplicateNgModuleIdsForTest, ɵresetCompiledComponents, ɵsetUnknownElementStrictMode as ɵsetUnknownElementStrictMode$1, ɵsetUnknownPropertyStrictMode as ɵsetUnknownPropertyStrictMode$1, ɵgetUnknownElementStrictMode as ɵgetUnknownElementStrictMode$1, ɵgetUnknownPropertyStrictMode as ɵgetUnknownPropertyStrictMode$1, EnvironmentInjector as EnvironmentInjector$1, NgZone, ɵflushModuleScopingQueueAsMuchAsPossible } from '@angular/core';
+import { getDebugNode, RendererFactory2 as RendererFactory2$1, InjectionToken as InjectionToken$1, ɵstringify, ɵReflectionCapabilities, Directive, Component, Pipe, NgModule, ɵgetInjectableDef, resolveForwardRef as resolveForwardRef$1, ɵNG_COMP_DEF, ɵRender3NgModuleRef, ApplicationInitStatus, LOCALE_ID as LOCALE_ID$1, ɵDEFAULT_LOCALE_ID, ɵsetLocaleId, ɵRender3ComponentFactory, ɵcompileComponent, ɵNG_DIR_DEF, ɵcompileDirective, ɵNG_PIPE_DEF, ɵcompilePipe, ɵNG_MOD_DEF, ɵtransitiveScopesFor, ɵpatchComponentDefWithScope, ɵNG_INJ_DEF, ɵcompileNgModuleDefs, provideZoneChangeDetection, Compiler, COMPILER_OPTIONS, Injector as Injector$1, ɵisEnvironmentProviders, ɵNgModuleFactory, ModuleWithComponentFactories, ɵconvertToBitFlags, InjectFlags as InjectFlags$1, ɵsetAllowDuplicateNgModuleIdsForTest, ɵresetCompiledComponents, ɵsetUnknownElementStrictMode as ɵsetUnknownElementStrictMode$1, ɵsetUnknownPropertyStrictMode as ɵsetUnknownPropertyStrictMode$1, ɵgetUnknownElementStrictMode as ɵgetUnknownElementStrictMode$1, ɵgetUnknownPropertyStrictMode as ɵgetUnknownPropertyStrictMode$1, EnvironmentInjector as EnvironmentInjector$1, NgZone as NgZone$1, ɵflushModuleScopingQueueAsMuchAsPossible } from '@angular/core';
 import { ResourceLoader } from '@angular/compiler';
-import { Subject, Subscription } from 'rxjs';
+import { Subject, Subscription, Observable, merge as merge$1 } from 'rxjs';
+import { share } from 'rxjs/operators';
 
 /**
  * Wraps a test function in an asynchronous test zone. The test will automatically
@@ -3564,15 +3565,6 @@ const SIGNAL = Symbol('SIGNAL');
 function isSignal(value) {
     return typeof value === 'function' && value[SIGNAL] !== undefined;
 }
-/**
- * Converts `fn` into a marked signal function (where `isSignal(fn)` will be `true`), and
- * potentially add some set of extra properties (passed as an object record `extraApi`).
- */
-function createSignalFromFunction(node, fn, extraApi = {}) {
-    fn[SIGNAL] = node;
-    // Copy properties from `extraApi` to `fn` to complete the desired API of the `Signal`.
-    return Object.assign(fn, extraApi);
-}
 /**
  * The default equality function used for `signal` and `computed`, which treats objects and arrays
  * as never equal, and all other primitive values using identity semantics.
@@ -3593,216 +3585,265 @@ function defaultEquals(a, b) {
 
 // Required as the signals library is in a separate package, so we need to explicitly ensure the
 /**
- * A `WeakRef`-compatible reference that fakes the API with a strong reference
- * internally.
+ * The currently active consumer `ReactiveNode`, if running code in a reactive context.
+ *
+ * Change this via `setActiveConsumer`.
  */
-class LeakyRef {
-    constructor(ref) {
-        this.ref = ref;
+let activeConsumer = null;
+let inNotificationPhase = false;
+function setActiveConsumer(consumer) {
+    const prev = activeConsumer;
+    activeConsumer = consumer;
+    return prev;
+}
+const REACTIVE_NODE = {
+    version: 0,
+    dirty: false,
+    producerNode: undefined,
+    producerLastReadVersion: undefined,
+    producerIndexOfThis: undefined,
+    nextProducerIndex: 0,
+    liveConsumerNode: undefined,
+    liveConsumerIndexOfThis: undefined,
+    consumerAllowSignalWrites: false,
+    consumerIsAlwaysLive: false,
+    producerMustRecompute: () => false,
+    producerRecomputeValue: () => { },
+    consumerMarkedDirty: () => { },
+};
+/**
+ * Called by implementations when a producer's signal is read.
+ */
+function producerAccessed(node) {
+    if (inNotificationPhase) {
+        throw new Error(typeof ngDevMode !== 'undefined' && ngDevMode ?
+            `Assertion error: signal read during notification phase` :
+            '');
     }
-    deref() {
-        return this.ref;
+    if (activeConsumer === null) {
+        // Accessed outside of a reactive context, so nothing to record.
+        return;
     }
-}
-// `WeakRef` is not always defined in every TS environment where Angular is compiled. Instead,
-// read it off of the global context if available.
-// tslint:disable-next-line: no-toplevel-property-access
-let WeakRefImpl = _global['WeakRef'] ?? LeakyRef;
-function newWeakRef(value) {
-    if (typeof ngDevMode !== 'undefined' && ngDevMode && WeakRefImpl === undefined) {
-        throw new Error(`Angular requires a browser which supports the 'WeakRef' API`);
+    // This producer is the `idx`th dependency of `activeConsumer`.
+    const idx = activeConsumer.nextProducerIndex++;
+    assertConsumerNode(activeConsumer);
+    if (idx < activeConsumer.producerNode.length && activeConsumer.producerNode[idx] !== node) {
+        // There's been a change in producers since the last execution of `activeConsumer`.
+        // `activeConsumer.producerNode[idx]` holds a stale dependency which will be be removed and
+        // replaced with `this`.
+        //
+        // If `activeConsumer` isn't live, then this is a no-op, since we can replace the producer in
+        // `activeConsumer.producerNode` directly. However, if `activeConsumer` is live, then we need
+        // to remove it from the stale producer's `liveConsumer`s.
+        if (consumerIsLive(activeConsumer)) {
+            const staleProducer = activeConsumer.producerNode[idx];
+            producerRemoveLiveConsumerAtIndex(staleProducer, activeConsumer.producerIndexOfThis[idx]);
+            // At this point, the only record of `staleProducer` is the reference at
+            // `activeConsumer.producerNode[idx]` which will be overwritten below.
+        }
     }
-    return new WeakRefImpl(value);
-}
-function setAlternateWeakRefImpl(impl) {
-    // no-op since the alternate impl is included by default by the framework. Remove once internal
-    // migration is complete.
+    if (activeConsumer.producerNode[idx] !== node) {
+        // We're a new dependency of the consumer (at `idx`).
+        activeConsumer.producerNode[idx] = node;
+        // If the active consumer is live, then add it as a live consumer. If not, then use 0 as a
+        // placeholder value.
+        activeConsumer.producerIndexOfThis[idx] =
+            consumerIsLive(activeConsumer) ? producerAddLiveConsumer(node, activeConsumer, idx) : 0;
+    }
+    activeConsumer.producerLastReadVersion[idx] = node.version;
 }
-
-// Required as the signals library is in a separate package, so we need to explicitly ensure the
 /**
- * Counter tracking the next `ProducerId` or `ConsumerId`.
+ * Ensure this producer's `version` is up-to-date.
  */
-let _nextReactiveId = 0;
+function producerUpdateValueVersion(node) {
+    if (consumerIsLive(node) && !node.dirty) {
+        // A live consumer will be marked dirty by producers, so a clean state means that its version
+        // is guaranteed to be up-to-date.
+        return;
+    }
+    if (!node.producerMustRecompute(node) && !consumerPollProducersForChange(node)) {
+        // None of our producers report a change since the last time they were read, so no
+        // recomputation of our value is necessary, and we can consider ourselves clean.
+        node.dirty = false;
+        return;
+    }
+    node.producerRecomputeValue(node);
+    // After recomputing the value, we're no longer dirty.
+    node.dirty = false;
+}
 /**
- * Tracks the currently active reactive consumer (or `null` if there is no active
- * consumer).
+ * Propagate a dirty notification to live consumers of this producer.
  */
-let activeConsumer = null;
+function producerNotifyConsumers(node) {
+    if (node.liveConsumerNode === undefined) {
+        return;
+    }
+    // Prevent signal reads when we're updating the graph
+    const prev = inNotificationPhase;
+    inNotificationPhase = true;
+    try {
+        for (const consumer of node.liveConsumerNode) {
+            if (!consumer.dirty) {
+                consumerMarkDirty(consumer);
+            }
+        }
+    }
+    finally {
+        inNotificationPhase = prev;
+    }
+}
 /**
- * Whether the graph is currently propagating change notifications.
+ * Whether this `ReactiveNode` in its producer capacity is currently allowed to initiate updates,
+ * based on the current consumer context.
  */
-let inNotificationPhase = false;
-function setActiveConsumer(consumer) {
-    const prev = activeConsumer;
-    activeConsumer = consumer;
-    return prev;
+function producerUpdatesAllowed() {
+    return activeConsumer?.consumerAllowSignalWrites !== false;
+}
+function consumerMarkDirty(node) {
+    node.dirty = true;
+    producerNotifyConsumers(node);
+    node.consumerMarkedDirty?.(node);
 }
 /**
- * A node in the reactive graph.
- *
- * Nodes can be producers of reactive values, consumers of other reactive values, or both.
- *
- * Producers are nodes that produce values, and can be depended upon by consumer nodes.
- *
- * Producers expose a monotonic `valueVersion` counter, and are responsible for incrementing this
- * version when their value semantically changes. Some producers may produce their values lazily and
- * thus at times need to be polled for potential updates to their value (and by extension their
- * `valueVersion`). This is accomplished via the `onProducerUpdateValueVersion` method for
- * implemented by producers, which should perform whatever calculations are necessary to ensure
- * `valueVersion` is up to date.
+ * Prepare this consumer to run a computation in its reactive context.
  *
- * Consumers are nodes that depend on the values of producers and are notified when those values
- * might have changed.
- *
- * Consumers do not wrap the reads they consume themselves, but rather can be set as the active
- * reader via `setActiveConsumer`. Reads of producers that happen while a consumer is active will
- * result in those producers being added as dependencies of that consumer node.
- *
- * The set of dependencies of a consumer is dynamic. Implementers expose a monotonically increasing
- * `trackingVersion` counter, which increments whenever the consumer is about to re-run any reactive
- * reads it needs and establish a new set of dependencies as a result.
+ * Must be called by subclasses which represent reactive computations, before those computations
+ * begin.
+ */
+function consumerBeforeComputation(node) {
+    node && (node.nextProducerIndex = 0);
+    return setActiveConsumer(node);
+}
+/**
+ * Finalize this consumer's state after a reactive computation has run.
  *
- * Producers store the last `trackingVersion` they've seen from `Consumer`s which have read them.
- * This allows a producer to identify whether its record of the dependency is current or stale, by
- * comparing the consumer's `trackingVersion` to the version at which the dependency was
- * last observed.
+ * Must be called by subclasses which represent reactive computations, after those computations
+ * have finished.
  */
-class ReactiveNode {
-    constructor() {
-        this.id = _nextReactiveId++;
-        /**
-         * A cached weak reference to this node, which will be used in `ReactiveEdge`s.
-         */
-        this.ref = newWeakRef(this);
-        /**
-         * Edges to producers on which this node depends (in its consumer capacity).
-         */
-        this.producers = new Map();
-        /**
-         * Edges to consumers on which this node depends (in its producer capacity).
-         */
-        this.consumers = new Map();
-        /**
-         * Monotonically increasing counter representing a version of this `Consumer`'s
-         * dependencies.
-         */
-        this.trackingVersion = 0;
-        /**
-         * Monotonically increasing counter which increases when the value of this `Producer`
-         * semantically changes.
-         */
-        this.valueVersion = 0;
+function consumerAfterComputation(node, prevConsumer) {
+    setActiveConsumer(prevConsumer);
+    if (!node || node.producerNode === undefined || node.producerIndexOfThis === undefined ||
+        node.producerLastReadVersion === undefined) {
+        return;
     }
-    /**
-     * Polls dependencies of a consumer to determine if they have actually changed.
-     *
-     * If this returns `false`, then even though the consumer may have previously been notified of a
-     * change, the values of its dependencies have not actually changed and the consumer should not
-     * rerun any reactions.
-     */
-    consumerPollProducersForChange() {
-        for (const [producerId, edge] of this.producers) {
-            const producer = edge.producerNode.deref();
-            // On Safari < 16.1 deref can return null, we need to check for null also.
-            // See https://github.com/WebKit/WebKit/commit/44c15ba58912faab38b534fef909dd9e13e095e0
-            if (producer == null || edge.atTrackingVersion !== this.trackingVersion) {
-                // This dependency edge is stale, so remove it.
-                this.producers.delete(producerId);
-                producer?.consumers.delete(this.id);
-                continue;
-            }
-            if (producer.producerPollStatus(edge.seenValueVersion)) {
-                // One of the dependencies reports a real value change.
-                return true;
-            }
+    if (consumerIsLive(node)) {
+        // For live consumers, we need to remove the producer -> consumer edge for any stale producers
+        // which weren't dependencies after the recomputation.
+        for (let i = node.nextProducerIndex; i < node.producerNode.length; i++) {
+            producerRemoveLiveConsumerAtIndex(node.producerNode[i], node.producerIndexOfThis[i]);
         }
-        // No dependency reported a real value change, so the `Consumer` has also not been
-        // impacted.
-        return false;
     }
-    /**
-     * Notify all consumers of this producer that its value may have changed.
-     */
-    producerMayHaveChanged() {
-        // Prevent signal reads when we're updating the graph
-        const prev = inNotificationPhase;
-        inNotificationPhase = true;
-        try {
-            for (const [consumerId, edge] of this.consumers) {
-                const consumer = edge.consumerNode.deref();
-                // On Safari < 16.1 deref can return null, we need to check for null also.
-                // See https://github.com/WebKit/WebKit/commit/44c15ba58912faab38b534fef909dd9e13e095e0
-                if (consumer == null || consumer.trackingVersion !== edge.atTrackingVersion) {
-                    this.consumers.delete(consumerId);
-                    consumer?.producers.delete(this.id);
-                    continue;
-                }
-                consumer.onConsumerDependencyMayHaveChanged();
-            }
-        }
-        finally {
-            inNotificationPhase = prev;
-        }
+    // Truncate the producer tracking arrays.
+    for (let i = node.nextProducerIndex; i < node.producerNode.length; i++) {
+        node.producerNode.pop();
+        node.producerLastReadVersion.pop();
+        node.producerIndexOfThis.pop();
     }
-    /**
-     * Mark that this producer node has been accessed in the current reactive context.
-     */
-    producerAccessed() {
-        if (inNotificationPhase) {
-            throw new Error(typeof ngDevMode !== 'undefined' && ngDevMode ?
-                `Assertion error: signal read during notification phase` :
-                '');
-        }
-        if (activeConsumer === null) {
-            return;
+}
+/**
+ * Determine whether this consumer has any dependencies which have changed since the last time
+ * they were read.
+ */
+function consumerPollProducersForChange(node) {
+    assertConsumerNode(node);
+    // Poll producers for change.
+    for (let i = 0; i < node.producerNode.length; i++) {
+        const producer = node.producerNode[i];
+        const seenVersion = node.producerLastReadVersion[i];
+        // First check the versions. A mismatch means that the producer's value is known to have
+        // changed since the last time we read it.
+        if (seenVersion !== producer.version) {
+            return true;
         }
-        // Either create or update the dependency `Edge` in both directions.
-        let edge = activeConsumer.producers.get(this.id);
-        if (edge === undefined) {
-            edge = {
-                consumerNode: activeConsumer.ref,
-                producerNode: this.ref,
-                seenValueVersion: this.valueVersion,
-                atTrackingVersion: activeConsumer.trackingVersion,
-            };
-            activeConsumer.producers.set(this.id, edge);
-            this.consumers.set(activeConsumer.id, edge);
+        // The producer's version is the same as the last time we read it, but it might itself be
+        // stale. Force the producer to recompute its version (calculating a new value if necessary).
+        producerUpdateValueVersion(producer);
+        // Now when we do this check, `producer.version` is guaranteed to be up to date, so if the
+        // versions still match then it has not changed since the last time we read it.
+        if (seenVersion !== producer.version) {
+            return true;
         }
-        else {
-            edge.seenValueVersion = this.valueVersion;
-            edge.atTrackingVersion = activeConsumer.trackingVersion;
+    }
+    return false;
+}
+/**
+ * Disconnect this consumer from the graph.
+ */
+function consumerDestroy(node) {
+    assertConsumerNode(node);
+    if (consumerIsLive(node)) {
+        // Drop all connections from the graph to this node.
+        for (let i = 0; i < node.producerNode.length; i++) {
+            producerRemoveLiveConsumerAtIndex(node.producerNode[i], node.producerIndexOfThis[i]);
         }
     }
-    /**
-     * Whether this consumer currently has any producers registered.
-     */
-    get hasProducers() {
-        return this.producers.size > 0;
+    // Truncate all the arrays to drop all connection from this node to the graph.
+    node.producerNode.length = node.producerLastReadVersion.length = node.producerIndexOfThis.length =
+        0;
+    if (node.liveConsumerNode) {
+        node.liveConsumerNode.length = node.liveConsumerIndexOfThis.length = 0;
     }
-    /**
-     * Whether this `ReactiveNode` in its producer capacity is currently allowed to initiate updates,
-     * based on the current consumer context.
-     */
-    get producerUpdatesAllowed() {
-        return activeConsumer?.consumerAllowSignalWrites !== false;
+}
+/**
+ * Add `consumer` as a live consumer of this node.
+ *
+ * Note that this operation is potentially transitive. If this node becomes live, then it becomes
+ * a live consumer of all of its current producers.
+ */
+function producerAddLiveConsumer(node, consumer, indexOfThis) {
+    assertProducerNode(node);
+    assertConsumerNode(node);
+    if (node.liveConsumerNode.length === 0) {
+        // When going from 0 to 1 live consumers, we become a live consumer to our producers.
+        for (let i = 0; i < node.producerNode.length; i++) {
+            node.producerIndexOfThis[i] = producerAddLiveConsumer(node.producerNode[i], node, i);
+        }
     }
-    /**
-     * Checks if a `Producer` has a current value which is different than the value
-     * last seen at a specific version by a `Consumer` which recorded a dependency on
-     * this `Producer`.
-     */
-    producerPollStatus(lastSeenValueVersion) {
-        // `producer.valueVersion` may be stale, but a mismatch still means that the value
-        // last seen by the `Consumer` is also stale.
-        if (this.valueVersion !== lastSeenValueVersion) {
-            return true;
+    node.liveConsumerIndexOfThis.push(indexOfThis);
+    return node.liveConsumerNode.push(consumer) - 1;
+}
+/**
+ * Remove the live consumer at `idx`.
+ */
+function producerRemoveLiveConsumerAtIndex(node, idx) {
+    assertProducerNode(node);
+    assertConsumerNode(node);
+    if (node.liveConsumerNode.length === 1) {
+        // When removing the last live consumer, we will no longer be live. We need to remove
+        // ourselves from our producers' tracking (which may cause consumer-producers to lose
+        // liveness as well).
+        for (let i = 0; i < node.producerNode.length; i++) {
+            producerRemoveLiveConsumerAtIndex(node.producerNode[i], node.producerIndexOfThis[i]);
         }
-        // Trigger the `Producer` to update its `valueVersion` if necessary.
-        this.onProducerUpdateValueVersion();
-        // At this point, we can trust `producer.valueVersion`.
-        return this.valueVersion !== lastSeenValueVersion;
     }
+    // Move the last value of `liveConsumers` into `idx`. Note that if there's only a single
+    // live consumer, this is a no-op.
+    const lastIdx = node.liveConsumerNode.length - 1;
+    node.liveConsumerNode[idx] = node.liveConsumerNode[lastIdx];
+    node.liveConsumerIndexOfThis[idx] = node.liveConsumerIndexOfThis[lastIdx];
+    // Truncate the array.
+    node.liveConsumerNode.length--;
+    node.liveConsumerIndexOfThis.length--;
+    // If the index is still valid, then we need to fix the index pointer from the producer to this
+    // consumer, and update it from `lastIdx` to `idx` (accounting for the move above).
+    if (idx < node.liveConsumerNode.length) {
+        const idxProducer = node.liveConsumerIndexOfThis[idx];
+        const consumer = node.liveConsumerNode[idx];
+        assertConsumerNode(consumer);
+        consumer.producerIndexOfThis[idxProducer] = idx;
+    }
+}
+function consumerIsLive(node) {
+    return node.consumerIsAlwaysLive || (node?.liveConsumerNode?.length ?? 0) > 0;
+}
+function assertConsumerNode(node) {
+    node.producerNode ??= [];
+    node.producerIndexOfThis ??= [];
+    node.producerLastReadVersion ??= [];
+}
+function assertProducerNode(node) {
+    node.liveConsumerNode ??= [];
+    node.liveConsumerIndexOfThis ??= [];
 }
 
 /**
@@ -3811,10 +3852,21 @@ class ReactiveNode {
  * @developerPreview
  */
 function computed(computation, options) {
-    const node = new ComputedImpl(computation, options?.equal ?? defaultEquals);
-    // Casting here is required for g3, as TS inference behavior is slightly different between our
-    // version/options and g3's.
-    return createSignalFromFunction(node, node.signal.bind(node));
+    const node = Object.create(COMPUTED_NODE);
+    node.computation = computation;
+    options?.equal && (node.equal = options.equal);
+    const computed = () => {
+        // Check if the value needs updating before returning it.
+        producerUpdateValueVersion(node);
+        // Record that someone looked at this signal.
+        producerAccessed(node);
+        if (node.value === ERRORED) {
+            throw node.error;
+        }
+        return node.value;
+    };
+    computed[SIGNAL] = node;
+    return computed;
 }
 /**
  * A dedicated symbol used before a computed value has been calculated for the first time.
@@ -3833,108 +3885,47 @@ const COMPUTING = Symbol('COMPUTING');
  * Explicitly typed as `any` so we can use it as signal's value.
  */
 const ERRORED = Symbol('ERRORED');
-/**
- * A computation, which derives a value from a declarative reactive expression.
- *
- * `Computed`s are both producers and consumers of reactivity.
- */
-class ComputedImpl extends ReactiveNode {
-    constructor(computation, equal) {
-        super();
-        this.computation = computation;
-        this.equal = equal;
-        /**
-         * Current value of the computation.
-         *
-         * This can also be one of the special values `UNSET`, `COMPUTING`, or `ERRORED`.
-         */
-        this.value = UNSET;
-        /**
-         * If `value` is `ERRORED`, the error caught from the last computation attempt which will
-         * be re-thrown.
-         */
-        this.error = null;
-        /**
-         * Flag indicating that the computation is currently stale, meaning that one of the
-         * dependencies has notified of a potential change.
-         *
-         * It's possible that no dependency has _actually_ changed, in which case the `stale`
-         * state can be resolved without recomputing the value.
-         */
-        this.stale = true;
-        this.consumerAllowSignalWrites = false;
-    }
-    onConsumerDependencyMayHaveChanged() {
-        if (this.stale) {
-            // We've already notified consumers that this value has potentially changed.
-            return;
-        }
-        // Record that the currently cached value may be stale.
-        this.stale = true;
-        // Notify any consumers about the potential change.
-        this.producerMayHaveChanged();
-    }
-    onProducerUpdateValueVersion() {
-        if (!this.stale) {
-            // The current value and its version are already up to date.
-            return;
-        }
-        // The current value is stale. Check whether we need to produce a new one.
-        if (this.value !== UNSET && this.value !== COMPUTING &&
-            !this.consumerPollProducersForChange()) {
-            // Even though we were previously notified of a potential dependency update, all of
-            // our dependencies report that they have not actually changed in value, so we can
-            // resolve the stale state without needing to recompute the current value.
-            this.stale = false;
-            return;
-        }
-        // The current value is stale, and needs to be recomputed. It still may not change -
-        // that depends on whether the newly computed value is equal to the old.
-        this.recomputeValue();
-    }
-    recomputeValue() {
-        if (this.value === COMPUTING) {
+const COMPUTED_NODE = {
+    ...REACTIVE_NODE,
+    value: UNSET,
+    dirty: true,
+    error: null,
+    equal: defaultEquals,
+    producerMustRecompute(node) {
+        // Force a recomputation if there's no current value, or if the current value is in the process
+        // of being calculated (which should throw an error).
+        return node.value === UNSET || node.value === COMPUTING;
+    },
+    producerRecomputeValue(node) {
+        if (node.value === COMPUTING) {
             // Our computation somehow led to a cyclic read of itself.
             throw new Error('Detected cycle in computations.');
         }
-        const oldValue = this.value;
-        this.value = COMPUTING;
-        // As we're re-running the computation, update our dependent tracking version number.
-        this.trackingVersion++;
-        const prevConsumer = setActiveConsumer(this);
+        const oldValue = node.value;
+        node.value = COMPUTING;
+        const prevConsumer = consumerBeforeComputation(node);
         let newValue;
         try {
-            newValue = this.computation();
+            newValue = node.computation();
         }
         catch (err) {
             newValue = ERRORED;
-            this.error = err;
+            node.error = err;
         }
         finally {
-            setActiveConsumer(prevConsumer);
+            consumerAfterComputation(node, prevConsumer);
         }
-        this.stale = false;
         if (oldValue !== UNSET && oldValue !== ERRORED && newValue !== ERRORED &&
-            this.equal(oldValue, newValue)) {
+            node.equal(oldValue, newValue)) {
             // No change to `valueVersion` - old and new values are
             // semantically equivalent.
-            this.value = oldValue;
+            node.value = oldValue;
             return;
         }
-        this.value = newValue;
-        this.valueVersion++;
-    }
-    signal() {
-        // Check if the value needs updating before returning it.
-        this.onProducerUpdateValueVersion();
-        // Record that someone looked at this signal.
-        this.producerAccessed();
-        if (this.value === ERRORED) {
-            throw this.error;
-        }
-        return this.value;
-    }
-}
+        node.value = newValue;
+        node.version++;
+    },
+};
 
 function defaultThrowError() {
     throw new Error();
@@ -3954,88 +3945,24 @@ function setThrowInvalidWriteToSignalError(fn) {
  * of setting a signal.
  */
 let postSignalSetFn = null;
-class WritableSignalImpl extends ReactiveNode {
-    constructor(value, equal) {
-        super();
-        this.value = value;
-        this.equal = equal;
-        this.consumerAllowSignalWrites = false;
-    }
-    onConsumerDependencyMayHaveChanged() {
-        // This never happens for writable signals as they're not consumers.
-    }
-    onProducerUpdateValueVersion() {
-        // Writable signal value versions are always up to date.
-    }
-    /**
-     * Directly update the value of the signal to a new value, which may or may not be
-     * equal to the previous.
-     *
-     * In the event that `newValue` is semantically equal to the current value, `set` is
-     * a no-op.
-     */
-    set(newValue) {
-        if (!this.producerUpdatesAllowed) {
-            throwInvalidWriteToSignalError();
-        }
-        if (!this.equal(this.value, newValue)) {
-            this.value = newValue;
-            this.valueVersion++;
-            this.producerMayHaveChanged();
-            postSignalSetFn?.();
-        }
-    }
-    /**
-     * Derive a new value for the signal from its current value using the `updater` function.
-     *
-     * This is equivalent to calling `set` on the result of running `updater` on the current
-     * value.
-     */
-    update(updater) {
-        if (!this.producerUpdatesAllowed) {
-            throwInvalidWriteToSignalError();
-        }
-        this.set(updater(this.value));
-    }
-    /**
-     * Calls `mutator` on the current value and assumes that it has been mutated.
-     */
-    mutate(mutator) {
-        if (!this.producerUpdatesAllowed) {
-            throwInvalidWriteToSignalError();
-        }
-        // Mutate bypasses equality checks as it's by definition changing the value.
-        mutator(this.value);
-        this.valueVersion++;
-        this.producerMayHaveChanged();
-        postSignalSetFn?.();
-    }
-    asReadonly() {
-        if (this.readonlySignal === undefined) {
-            this.readonlySignal = createSignalFromFunction(this, () => this.signal());
-        }
-        return this.readonlySignal;
-    }
-    signal() {
-        this.producerAccessed();
-        return this.value;
-    }
-}
 /**
  * Create a `Signal` that can be set or updated directly.
  *
  * @developerPreview
  */
 function signal(initialValue, options) {
-    const signalNode = new WritableSignalImpl(initialValue, options?.equal ?? defaultEquals);
-    // Casting here is required for g3, as TS inference behavior is slightly different between our
-    // version/options and g3's.
-    const signalFn = createSignalFromFunction(signalNode, signalNode.signal.bind(signalNode), {
-        set: signalNode.set.bind(signalNode),
-        update: signalNode.update.bind(signalNode),
-        mutate: signalNode.mutate.bind(signalNode),
-        asReadonly: signalNode.asReadonly.bind(signalNode)
-    });
+    const node = Object.create(SIGNAL_NODE);
+    node.value = initialValue;
+    options?.equal && (node.equal = options.equal);
+    function signalFn() {
+        producerAccessed(node);
+        return node.value;
+    }
+    signalFn.set = signalSetFn;
+    signalFn.update = signalUpdateFn;
+    signalFn.mutate = signalMutateFn;
+    signalFn.asReadonly = signalAsReadonlyFn;
+    signalFn[SIGNAL] = node;
     return signalFn;
 }
 function setPostSignalSetFn(fn) {
@@ -4043,6 +3970,50 @@ function setPostSignalSetFn(fn) {
     postSignalSetFn = fn;
     return prev;
 }
+const SIGNAL_NODE = {
+    ...REACTIVE_NODE,
+    equal: defaultEquals,
+    readonlyFn: undefined,
+};
+function signalValueChanged(node) {
+    node.version++;
+    producerNotifyConsumers(node);
+    postSignalSetFn?.();
+}
+function signalSetFn(newValue) {
+    const node = this[SIGNAL];
+    if (!producerUpdatesAllowed()) {
+        throwInvalidWriteToSignalError();
+    }
+    if (!node.equal(node.value, newValue)) {
+        node.value = newValue;
+        signalValueChanged(node);
+    }
+}
+function signalUpdateFn(updater) {
+    if (!producerUpdatesAllowed()) {
+        throwInvalidWriteToSignalError();
+    }
+    signalSetFn.call(this, updater(this[SIGNAL].value));
+}
+function signalMutateFn(mutator) {
+    const node = this[SIGNAL];
+    if (!producerUpdatesAllowed()) {
+        throwInvalidWriteToSignalError();
+    }
+    // Mutate bypasses equality checks as it's by definition changing the value.
+    mutator(node.value);
+    signalValueChanged(node);
+}
+function signalAsReadonlyFn() {
+    const node = this[SIGNAL];
+    if (node.readonlyFn === undefined) {
+        const readonlyFn = () => this();
+        readonlyFn[SIGNAL] = node;
+        node.readonlyFn = readonlyFn;
+    }
+    return node.readonlyFn;
+}
 
 /**
  * Execute an arbitrary function in a non-reactive (non-tracking) context. The executed function
@@ -4062,63 +4033,53 @@ function untracked(nonReactiveReadsFn) {
     }
 }
 
-const NOOP_CLEANUP_FN = () => { };
-/**
- * Watches a reactive expression and allows it to be scheduled to re-run
- * when any dependencies notify of a change.
- *
- * `Watch` doesn't run reactive expressions itself, but relies on a consumer-
- * provided scheduling operation to coordinate calling `Watch.run()`.
- */
-class Watch extends ReactiveNode {
-    constructor(watch, schedule, allowSignalWrites) {
-        super();
-        this.watch = watch;
-        this.schedule = schedule;
-        this.dirty = false;
-        this.cleanupFn = NOOP_CLEANUP_FN;
-        this.registerOnCleanup = (cleanupFn) => {
-            this.cleanupFn = cleanupFn;
-        };
-        this.consumerAllowSignalWrites = allowSignalWrites;
-    }
-    notify() {
-        if (!this.dirty) {
-            this.schedule(this);
-        }
-        this.dirty = true;
-    }
-    onConsumerDependencyMayHaveChanged() {
-        this.notify();
-    }
-    onProducerUpdateValueVersion() {
-        // Watches are not producers.
-    }
-    /**
-     * Execute the reactive expression in the context of this `Watch` consumer.
-     *
-     * Should be called by the user scheduling algorithm when the provided
-     * `schedule` hook is called by `Watch`.
-     */
-    run() {
-        this.dirty = false;
-        if (this.trackingVersion !== 0 && !this.consumerPollProducersForChange()) {
+function watch(fn, schedule, allowSignalWrites) {
+    const node = Object.create(WATCH_NODE);
+    if (allowSignalWrites) {
+        node.consumerAllowSignalWrites = true;
+    }
+    node.fn = fn;
+    node.schedule = schedule;
+    const registerOnCleanup = (cleanupFn) => {
+        node.cleanupFn = cleanupFn;
+    };
+    const run = () => {
+        node.dirty = false;
+        if (node.hasRun && !consumerPollProducersForChange(node)) {
             return;
         }
-        const prevConsumer = setActiveConsumer(this);
-        this.trackingVersion++;
+        node.hasRun = true;
+        const prevConsumer = consumerBeforeComputation(node);
         try {
-            this.cleanupFn();
-            this.cleanupFn = NOOP_CLEANUP_FN;
-            this.watch(this.registerOnCleanup);
+            node.cleanupFn();
+            node.cleanupFn = NOOP_CLEANUP_FN;
+            node.fn(registerOnCleanup);
         }
         finally {
-            setActiveConsumer(prevConsumer);
+            consumerAfterComputation(node, prevConsumer);
         }
-    }
-    cleanup() {
-        this.cleanupFn();
-    }
+    };
+    node.ref = {
+        notify: () => consumerMarkDirty(node),
+        run,
+        cleanup: () => node.cleanupFn(),
+    };
+    return node.ref;
+}
+const NOOP_CLEANUP_FN = () => { };
+const WATCH_NODE = {
+    ...REACTIVE_NODE,
+    consumerIsAlwaysLive: true,
+    consumerAllowSignalWrites: false,
+    consumerMarkedDirty: (node) => {
+        node.schedule(node.ref);
+    },
+    hasRun: false,
+    cleanupFn: NOOP_CLEANUP_FN,
+};
+
+function setAlternateWeakRefImpl(impl) {
+    // TODO: remove this function
 }
 
 /**
@@ -6373,11 +6334,17 @@ function setAllowDuplicateNgModuleIdsForTest(allowDuplicates) {
  * `InjectionToken` is parameterized on `T` which is the type of object which will be returned by
  * the `Injector`. This provides an additional level of type safety.
  *
- * ```
- * interface MyInterface {...}
- * const myInterface = injector.get(new InjectionToken<MyInterface>('SomeToken'));
- * // myInterface is inferred to be MyInterface.
- * ```
+ * <div class="alert is-helpful">
+ *
+ * **Important Note**: Ensure that you use the same instance of the `InjectionToken` in both the
+ * provider and the injection call. Creating a new instance of `InjectionToken` in different places,
+ * even with the same description, will be treated as different tokens by Angular's DI system,
+ * leading to a `NullInjectorError`.
+ *
+ * </div>
+ *
+ * <code-example format="typescript" language="typescript" path="injection-token/src/main.ts"
+ * region="InjectionToken"></code-example>
  *
  * When creating an `InjectionToken`, you can optionally specify a factory function which returns
  * (possibly by creating) a default value of the parameterized type `T`. This sets up the
@@ -6404,7 +6371,6 @@ function setAllowDuplicateNgModuleIdsForTest(allowDuplicates) {
  *
  * {@example core/di/ts/injector_spec.ts region='ShakableInjectionToken'}
  *
- *
  * @publicApi
  */
 class InjectionToken {
@@ -8009,7 +7975,7 @@ const COMMENT_DISALLOWED = /^>|^->|<!--|-->|--!>|<!-$/g;
 /**
  * Delimiter in the disallowed strings which needs to be wrapped with zero with character.
  */
-const COMMENT_DELIMITER = /(<|>)/;
+const COMMENT_DELIMITER = /(<|>)/g;
 const COMMENT_DELIMITER_ESCAPED = '\u200B$1\u200B';
 /**
  * Escape the content of comment strings so that it can be safely inserted into a comment node.
@@ -8776,8 +8742,8 @@ function detachView(lContainer, removeIndex) {
 function destroyLView(tView, lView) {
     if (!(lView[FLAGS] & 256 /* LViewFlags.Destroyed */)) {
         const renderer = lView[RENDERER];
-        lView[REACTIVE_TEMPLATE_CONSUMER]?.destroy();
-        lView[REACTIVE_HOST_BINDING_CONSUMER]?.destroy();
+        lView[REACTIVE_TEMPLATE_CONSUMER] && consumerDestroy(lView[REACTIVE_TEMPLATE_CONSUMER]);
+        lView[REACTIVE_HOST_BINDING_CONSUMER] && consumerDestroy(lView[REACTIVE_HOST_BINDING_CONSUMER]);
         if (renderer.destroyNode) {
             applyView(tView, lView, renderer, 3 /* WalkTNodeTreeAction.Destroy */, null, null);
         }
@@ -10894,105 +10860,676 @@ class Renderer2 {
         this.destroyNode = null;
     }
     /**
-     * @internal
-     * @nocollapse
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = () => injectRenderer2(); }
+}
+/** Injects a Renderer2 for the current component. */
+function injectRenderer2() {
+    // We need the Renderer to be based on the component that it's being injected into, however since
+    // DI happens before we've entered its view, `getLView` will return the parent view instead.
+    const lView = getLView();
+    const tNode = getCurrentTNode();
+    const nodeAtIndex = getComponentLViewByIndex(tNode.index, lView);
+    return (isLView(nodeAtIndex) ? nodeAtIndex : lView)[RENDERER];
+}
+
+/**
+ * Sanitizer is used by the views to sanitize potentially dangerous values.
+ *
+ * @publicApi
+ */
+class Sanitizer {
+    /** @nocollapse */
+    static { this.ɵprov = ɵɵdefineInjectable({
+        token: Sanitizer,
+        providedIn: 'root',
+        factory: () => null,
+    }); }
+}
+
+/**
+ * @description Represents the version of Angular
+ *
+ * @publicApi
+ */
+class Version {
+    constructor(full) {
+        this.full = full;
+        this.major = full.split('.')[0];
+        this.minor = full.split('.')[1];
+        this.patch = full.split('.').slice(2).join('.');
+    }
+}
+/**
+ * @publicApi
+ */
+const VERSION = new Version('16.2.4');
+
+// This default value is when checking the hierarchy for a token.
+//
+// It means both:
+// - the token is not provided by the current injector,
+// - only the element injectors should be checked (ie do not check module injectors
+//
+//          mod1
+//         /
+//       el1   mod2
+//         \  /
+//         el2
+//
+// When requesting el2.injector.get(token), we should check in the following order and return the
+// first found value:
+// - el2.injector.get(token, default)
+// - el1.injector.get(token, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR) -> do not check the module
+// - mod2.injector.get(token, default)
+const NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR = {};
+
+/**
+ * `DestroyRef` lets you set callbacks to run for any cleanup or destruction behavior.
+ * The scope of this destruction depends on where `DestroyRef` is injected. If `DestroyRef`
+ * is injected in a component or directive, the callbacks run when that component or
+ * directive is destroyed. Otherwise the callbacks run when a corresponding injector is destroyed.
+ *
+ * @publicApi
+ */
+class DestroyRef {
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = injectDestroyRef; }
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ENV_ID__ = (injector) => injector; }
+}
+class NodeInjectorDestroyRef extends DestroyRef {
+    constructor(_lView) {
+        super();
+        this._lView = _lView;
+    }
+    onDestroy(callback) {
+        storeLViewOnDestroy(this._lView, callback);
+        return () => removeLViewOnDestroy(this._lView, callback);
+    }
+}
+function injectDestroyRef() {
+    return new NodeInjectorDestroyRef(getLView());
+}
+
+/// <reference types="rxjs" />
+class EventEmitter_ extends Subject {
+    constructor(isAsync = false) {
+        super();
+        this.__isAsync = isAsync;
+    }
+    emit(value) {
+        super.next(value);
+    }
+    subscribe(observerOrNext, error, complete) {
+        let nextFn = observerOrNext;
+        let errorFn = error || (() => null);
+        let completeFn = complete;
+        if (observerOrNext && typeof observerOrNext === 'object') {
+            const observer = observerOrNext;
+            nextFn = observer.next?.bind(observer);
+            errorFn = observer.error?.bind(observer);
+            completeFn = observer.complete?.bind(observer);
+        }
+        if (this.__isAsync) {
+            errorFn = _wrapInTimeout(errorFn);
+            if (nextFn) {
+                nextFn = _wrapInTimeout(nextFn);
+            }
+            if (completeFn) {
+                completeFn = _wrapInTimeout(completeFn);
+            }
+        }
+        const sink = super.subscribe({ next: nextFn, error: errorFn, complete: completeFn });
+        if (observerOrNext instanceof Subscription) {
+            observerOrNext.add(sink);
+        }
+        return sink;
+    }
+}
+function _wrapInTimeout(fn) {
+    return (value) => {
+        setTimeout(fn, undefined, value);
+    };
+}
+/**
+ * @publicApi
+ */
+const EventEmitter = EventEmitter_;
+
+function noop(...args) {
+    // Do nothing.
+}
+
+function getNativeRequestAnimationFrame() {
+    // 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) {
+        // 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 };
+}
+
+class AsyncStackTaggingZoneSpec {
+    constructor(namePrefix, consoleAsyncStackTaggingImpl = console) {
+        this.name = 'asyncStackTagging for ' + namePrefix;
+        this.createTask = consoleAsyncStackTaggingImpl?.createTask ?? (() => null);
+    }
+    onScheduleTask(delegate, _current, target, task) {
+        task.consoleTask = this.createTask(`Zone - ${task.source || task.type}`);
+        return delegate.scheduleTask(target, task);
+    }
+    onInvokeTask(delegate, _currentZone, targetZone, task, applyThis, applyArgs) {
+        let ret;
+        if (task.consoleTask) {
+            ret = task.consoleTask.run(() => delegate.invokeTask(targetZone, task, applyThis, applyArgs));
+        }
+        else {
+            ret = delegate.invokeTask(targetZone, task, applyThis, applyArgs);
+        }
+        return ret;
+    }
+}
+
+/**
+ * An injectable service for executing work inside or outside of the Angular zone.
+ *
+ * The most common use of this service is to optimize performance when starting a work consisting of
+ * one or more asynchronous tasks that don't require UI updates or error handling to be handled by
+ * Angular. Such tasks can be kicked off via {@link #runOutsideAngular} and if needed, these tasks
+ * can reenter the Angular zone via {@link #run}.
+ *
+ * <!-- TODO: add/fix links to:
+ *   - docs explaining zones and the use of zones in Angular and change-detection
+ *   - link to runOutsideAngular/run (throughout this file!)
+ *   -->
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```
+ * import {Component, NgZone} from '@angular/core';
+ * import {NgIf} from '@angular/common';
+ *
+ * @Component({
+ *   selector: 'ng-zone-demo',
+ *   template: `
+ *     <h2>Demo: NgZone</h2>
+ *
+ *     <p>Progress: {{progress}}%</p>
+ *     <p *ngIf="progress >= 100">Done processing {{label}} of Angular zone!</p>
+ *
+ *     <button (click)="processWithinAngularZone()">Process within Angular zone</button>
+ *     <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
+ *   `,
+ * })
+ * export class NgZoneDemo {
+ *   progress: number = 0;
+ *   label: string;
+ *
+ *   constructor(private _ngZone: NgZone) {}
+ *
+ *   // Loop inside the Angular zone
+ *   // so the UI DOES refresh after each setTimeout cycle
+ *   processWithinAngularZone() {
+ *     this.label = 'inside';
+ *     this.progress = 0;
+ *     this._increaseProgress(() => console.log('Inside Done!'));
+ *   }
+ *
+ *   // Loop outside of the Angular zone
+ *   // so the UI DOES NOT refresh after each setTimeout cycle
+ *   processOutsideOfAngularZone() {
+ *     this.label = 'outside';
+ *     this.progress = 0;
+ *     this._ngZone.runOutsideAngular(() => {
+ *       this._increaseProgress(() => {
+ *         // reenter the Angular zone and display done
+ *         this._ngZone.run(() => { console.log('Outside Done!'); });
+ *       });
+ *     });
+ *   }
+ *
+ *   _increaseProgress(doneCallback: () => void) {
+ *     this.progress += 1;
+ *     console.log(`Current progress: ${this.progress}%`);
+ *
+ *     if (this.progress < 100) {
+ *       window.setTimeout(() => this._increaseProgress(doneCallback), 10);
+ *     } else {
+ *       doneCallback();
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @publicApi
+ */
+class NgZone {
+    constructor({ enableLongStackTrace = false, shouldCoalesceEventChangeDetection = false, shouldCoalesceRunChangeDetection = false }) {
+        this.hasPendingMacrotasks = false;
+        this.hasPendingMicrotasks = false;
+        /**
+         * Whether there are no outstanding microtasks or macrotasks.
+         */
+        this.isStable = true;
+        /**
+         * Notifies when code enters Angular Zone. This gets fired first on VM Turn.
+         */
+        this.onUnstable = new EventEmitter(false);
+        /**
+         * Notifies when there is no more microtasks enqueued in the current VM Turn.
+         * This is a hint for Angular to do change detection, which may enqueue more microtasks.
+         * For this reason this event can fire multiple times per VM Turn.
+         */
+        this.onMicrotaskEmpty = new EventEmitter(false);
+        /**
+         * Notifies when the last `onMicrotaskEmpty` has run and there are no more microtasks, which
+         * implies we are about to relinquish VM turn.
+         * This event gets called just once.
+         */
+        this.onStable = new EventEmitter(false);
+        /**
+         * Notifies that an error has been delivered.
+         */
+        this.onError = new EventEmitter(false);
+        if (typeof Zone == 'undefined') {
+            throw new RuntimeError(908 /* RuntimeErrorCode.MISSING_ZONEJS */, ngDevMode && `In this configuration Angular requires Zone.js`);
+        }
+        Zone.assertZonePatched();
+        const self = this;
+        self._nesting = 0;
+        self._outer = self._inner = Zone.current;
+        // AsyncStackTaggingZoneSpec provides `linked stack traces` to show
+        // where the async operation is scheduled. For more details, refer
+        // to this article, https://developer.chrome.com/blog/devtools-better-angular-debugging/
+        // And we only import this AsyncStackTaggingZoneSpec in development mode,
+        // in the production mode, the AsyncStackTaggingZoneSpec will be tree shaken away.
+        if (ngDevMode) {
+            self._inner = self._inner.fork(new AsyncStackTaggingZoneSpec('Angular'));
+        }
+        if (Zone['TaskTrackingZoneSpec']) {
+            self._inner = self._inner.fork(new Zone['TaskTrackingZoneSpec']);
+        }
+        if (enableLongStackTrace && Zone['longStackTraceZoneSpec']) {
+            self._inner = self._inner.fork(Zone['longStackTraceZoneSpec']);
+        }
+        // if shouldCoalesceRunChangeDetection is true, all tasks including event tasks will be
+        // coalesced, so shouldCoalesceEventChangeDetection option is not necessary and can be skipped.
+        self.shouldCoalesceEventChangeDetection =
+            !shouldCoalesceRunChangeDetection && shouldCoalesceEventChangeDetection;
+        self.shouldCoalesceRunChangeDetection = shouldCoalesceRunChangeDetection;
+        self.lastRequestAnimationFrameId = -1;
+        self.nativeRequestAnimationFrame = getNativeRequestAnimationFrame().nativeRequestAnimationFrame;
+        forkInnerZoneWithAngularBehavior(self);
+    }
+    /**
+      This method checks whether the method call happens within an Angular Zone instance.
+    */
+    static isInAngularZone() {
+        // Zone needs to be checked, because this method might be called even when NoopNgZone is used.
+        return typeof Zone !== 'undefined' && Zone.current.get('isAngularZone') === true;
+    }
+    /**
+      Assures that the method is called within the Angular Zone, otherwise throws an error.
+    */
+    static assertInAngularZone() {
+        if (!NgZone.isInAngularZone()) {
+            throw new RuntimeError(909 /* RuntimeErrorCode.UNEXPECTED_ZONE_STATE */, ngDevMode && 'Expected to be in Angular Zone, but it is not!');
+        }
+    }
+    /**
+      Assures that the method is called outside of the Angular Zone, otherwise throws an error.
+    */
+    static assertNotInAngularZone() {
+        if (NgZone.isInAngularZone()) {
+            throw new RuntimeError(909 /* RuntimeErrorCode.UNEXPECTED_ZONE_STATE */, ngDevMode && 'Expected to not be in Angular Zone, but it is!');
+        }
+    }
+    /**
+     * Executes the `fn` function synchronously within the Angular zone and returns value returned by
+     * the function.
+     *
+     * Running functions via `run` allows you to reenter Angular zone from a task that was executed
+     * outside of the Angular zone (typically started via {@link #runOutsideAngular}).
+     *
+     * Any future tasks or microtasks scheduled from within this function will continue executing from
+     * within the Angular zone.
+     *
+     * If a synchronous error happens it will be rethrown and not reported via `onError`.
+     */
+    run(fn, applyThis, applyArgs) {
+        return this._inner.run(fn, applyThis, applyArgs);
+    }
+    /**
+     * Executes the `fn` function synchronously within the Angular zone as a task and returns value
+     * returned by the function.
+     *
+     * Running functions via `run` allows you to reenter Angular zone from a task that was executed
+     * outside of the Angular zone (typically started via {@link #runOutsideAngular}).
+     *
+     * Any future tasks or microtasks scheduled from within this function will continue executing from
+     * within the Angular zone.
+     *
+     * If a synchronous error happens it will be rethrown and not reported via `onError`.
+     */
+    runTask(fn, applyThis, applyArgs, name) {
+        const zone = this._inner;
+        const task = zone.scheduleEventTask('NgZoneEvent: ' + name, fn, EMPTY_PAYLOAD, noop, noop);
+        try {
+            return zone.runTask(task, applyThis, applyArgs);
+        }
+        finally {
+            zone.cancelTask(task);
+        }
+    }
+    /**
+     * Same as `run`, except that synchronous errors are caught and forwarded via `onError` and not
+     * rethrown.
+     */
+    runGuarded(fn, applyThis, applyArgs) {
+        return this._inner.runGuarded(fn, applyThis, applyArgs);
+    }
+    /**
+     * Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
+     * the function.
+     *
+     * Running functions via {@link #runOutsideAngular} allows you to escape Angular's zone and do
+     * work that
+     * doesn't trigger Angular change-detection or is subject to Angular's error handling.
+     *
+     * Any future tasks or microtasks scheduled from within this function will continue executing from
+     * outside of the Angular zone.
+     *
+     * Use {@link #run} to reenter the Angular zone and do work that updates the application model.
+     */
+    runOutsideAngular(fn) {
+        return this._outer.run(fn);
+    }
+}
+const EMPTY_PAYLOAD = {};
+function checkStable(zone) {
+    // TODO: @JiaLiPassion, should check zone.isCheckStableRunning to prevent
+    // re-entry. The case is:
+    //
+    // @Component({...})
+    // export class AppComponent {
+    // constructor(private ngZone: NgZone) {
+    //   this.ngZone.onStable.subscribe(() => {
+    //     this.ngZone.run(() => console.log('stable'););
+    //   });
+    // }
+    //
+    // The onStable subscriber run another function inside ngZone
+    // which causes `checkStable()` re-entry.
+    // But this fix causes some issues in g3, so this fix will be
+    // launched in another PR.
+    if (zone._nesting == 0 && !zone.hasPendingMicrotasks && !zone.isStable) {
+        try {
+            zone._nesting++;
+            zone.onMicrotaskEmpty.emit(null);
+        }
+        finally {
+            zone._nesting--;
+            if (!zone.hasPendingMicrotasks) {
+                try {
+                    zone.runOutsideAngular(() => zone.onStable.emit(null));
+                }
+                finally {
+                    zone.isStable = true;
+                }
+            }
+        }
+    }
+}
+function delayChangeDetectionForEvents(zone) {
+    /**
+     * We also need to check _nesting here
+     * Consider the following case with shouldCoalesceRunChangeDetection = true
+     *
+     * ngZone.run(() => {});
+     * ngZone.run(() => {});
+     *
+     * We want the two `ngZone.run()` only trigger one change detection
+     * when shouldCoalesceRunChangeDetection is true.
+     * And because in this case, change detection run in async way(requestAnimationFrame),
+     * so we also need to check the _nesting here to prevent multiple
+     * change detections.
      */
-    static { this.__NG_ELEMENT_ID__ = () => injectRenderer2(); }
+    if (zone.isCheckStableRunning || zone.lastRequestAnimationFrameId !== -1) {
+        return;
+    }
+    zone.lastRequestAnimationFrameId = zone.nativeRequestAnimationFrame.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
+        // coalescing eventTasks.
+        //
+        // To workaround this we schedule a "fake" eventTask before we process the
+        // coalescing eventTasks. The benefit of this is that the "fake" container eventTask
+        //  will prevent the microtasks queue from getting drained in between the coalescing
+        // eventTask execution.
+        if (!zone.fakeTopEventTask) {
+            zone.fakeTopEventTask = Zone.root.scheduleEventTask('fakeTopEventTask', () => {
+                zone.lastRequestAnimationFrameId = -1;
+                updateMicroTaskStatus(zone);
+                zone.isCheckStableRunning = true;
+                checkStable(zone);
+                zone.isCheckStableRunning = false;
+            }, undefined, () => { }, () => { });
+        }
+        zone.fakeTopEventTask.invoke();
+    });
+    updateMicroTaskStatus(zone);
 }
-/** Injects a Renderer2 for the current component. */
-function injectRenderer2() {
-    // We need the Renderer to be based on the component that it's being injected into, however since
-    // DI happens before we've entered its view, `getLView` will return the parent view instead.
-    const lView = getLView();
-    const tNode = getCurrentTNode();
-    const nodeAtIndex = getComponentLViewByIndex(tNode.index, lView);
-    return (isLView(nodeAtIndex) ? nodeAtIndex : lView)[RENDERER];
+function forkInnerZoneWithAngularBehavior(zone) {
+    const delayChangeDetectionForEventsDelegate = () => {
+        delayChangeDetectionForEvents(zone);
+    };
+    zone._inner = zone._inner.fork({
+        name: 'angular',
+        properties: { 'isAngularZone': true },
+        onInvokeTask: (delegate, current, target, task, applyThis, applyArgs) => {
+            if (shouldBeIgnoredByZone(applyArgs)) {
+                return delegate.invokeTask(target, task, applyThis, applyArgs);
+            }
+            try {
+                onEnter(zone);
+                return delegate.invokeTask(target, task, applyThis, applyArgs);
+            }
+            finally {
+                if ((zone.shouldCoalesceEventChangeDetection && task.type === 'eventTask') ||
+                    zone.shouldCoalesceRunChangeDetection) {
+                    delayChangeDetectionForEventsDelegate();
+                }
+                onLeave(zone);
+            }
+        },
+        onInvoke: (delegate, current, target, callback, applyThis, applyArgs, source) => {
+            try {
+                onEnter(zone);
+                return delegate.invoke(target, callback, applyThis, applyArgs, source);
+            }
+            finally {
+                if (zone.shouldCoalesceRunChangeDetection) {
+                    delayChangeDetectionForEventsDelegate();
+                }
+                onLeave(zone);
+            }
+        },
+        onHasTask: (delegate, current, target, hasTaskState) => {
+            delegate.hasTask(target, hasTaskState);
+            if (current === target) {
+                // We are only interested in hasTask events which originate from our zone
+                // (A child hasTask event is not interesting to us)
+                if (hasTaskState.change == 'microTask') {
+                    zone._hasPendingMicrotasks = hasTaskState.microTask;
+                    updateMicroTaskStatus(zone);
+                    checkStable(zone);
+                }
+                else if (hasTaskState.change == 'macroTask') {
+                    zone.hasPendingMacrotasks = hasTaskState.macroTask;
+                }
+            }
+        },
+        onHandleError: (delegate, current, target, error) => {
+            delegate.handleError(target, error);
+            zone.runOutsideAngular(() => zone.onError.emit(error));
+            return false;
+        }
+    });
 }
-
-/**
- * Sanitizer is used by the views to sanitize potentially dangerous values.
- *
- * @publicApi
- */
-class Sanitizer {
-    /** @nocollapse */
-    static { this.ɵprov = ɵɵdefineInjectable({
-        token: Sanitizer,
-        providedIn: 'root',
-        factory: () => null,
-    }); }
+function updateMicroTaskStatus(zone) {
+    if (zone._hasPendingMicrotasks ||
+        ((zone.shouldCoalesceEventChangeDetection || zone.shouldCoalesceRunChangeDetection) &&
+            zone.lastRequestAnimationFrameId !== -1)) {
+        zone.hasPendingMicrotasks = true;
+    }
+    else {
+        zone.hasPendingMicrotasks = false;
+    }
 }
-
-/**
- * @description Represents the version of Angular
- *
- * @publicApi
- */
-class Version {
-    constructor(full) {
-        this.full = full;
-        this.major = full.split('.')[0];
-        this.minor = full.split('.')[1];
-        this.patch = full.split('.').slice(2).join('.');
+function onEnter(zone) {
+    zone._nesting++;
+    if (zone.isStable) {
+        zone.isStable = false;
+        zone.onUnstable.emit(null);
     }
 }
+function onLeave(zone) {
+    zone._nesting--;
+    checkStable(zone);
+}
 /**
- * @publicApi
+ * Provides a noop implementation of `NgZone` which does nothing. This zone requires explicit calls
+ * to framework to perform rendering.
  */
-const VERSION = new Version('16.2.2');
-
-// This default value is when checking the hierarchy for a token.
-//
-// It means both:
-// - the token is not provided by the current injector,
-// - only the element injectors should be checked (ie do not check module injectors
-//
-//          mod1
-//         /
-//       el1   mod2
-//         \  /
-//         el2
-//
-// When requesting el2.injector.get(token), we should check in the following order and return the
-// first found value:
-// - el2.injector.get(token, default)
-// - el1.injector.get(token, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR) -> do not check the module
-// - mod2.injector.get(token, default)
-const NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR = {};
-
+class NoopNgZone {
+    constructor() {
+        this.hasPendingMicrotasks = false;
+        this.hasPendingMacrotasks = false;
+        this.isStable = true;
+        this.onUnstable = new EventEmitter();
+        this.onMicrotaskEmpty = new EventEmitter();
+        this.onStable = new EventEmitter();
+        this.onError = new EventEmitter();
+    }
+    run(fn, applyThis, applyArgs) {
+        return fn.apply(applyThis, applyArgs);
+    }
+    runGuarded(fn, applyThis, applyArgs) {
+        return fn.apply(applyThis, applyArgs);
+    }
+    runOutsideAngular(fn) {
+        return fn();
+    }
+    runTask(fn, applyThis, applyArgs, name) {
+        return fn.apply(applyThis, applyArgs);
+    }
+}
 /**
- * `DestroyRef` lets you set callbacks to run for any cleanup or destruction behavior.
- * The scope of this destruction depends on where `DestroyRef` is injected. If `DestroyRef`
- * is injected in a component or directive, the callbacks run when that component or
- * directive is destroyed. Otherwise the callbacks run when a corresponding injector is destroyed.
+ * Token used to drive ApplicationRef.isStable
  *
- * @publicApi
+ * TODO: This should be moved entirely to NgZone (as a breaking change) so it can be tree-shakeable
+ * for `NoopNgZone` which is always just an `Observable` of `true`. Additionally, we should consider
+ * whether the property on `NgZone` should be `Observable` or `Signal`.
  */
-class DestroyRef {
-    /**
-     * @internal
-     * @nocollapse
-     */
-    static { this.__NG_ELEMENT_ID__ = injectDestroyRef; }
-    /**
-     * @internal
-     * @nocollapse
-     */
-    static { this.__NG_ENV_ID__ = (injector) => injector; }
+const ZONE_IS_STABLE_OBSERVABLE = new InjectionToken(ngDevMode ? 'isStable Observable' : '', {
+    providedIn: 'root',
+    // TODO(atscott): Replace this with a suitable default like `new
+    // BehaviorSubject(true).asObservable`. Again, long term this won't exist on ApplicationRef at
+    // all but until we can remove it, we need a default value zoneless.
+    factory: isStableFactory,
+});
+function isStableFactory() {
+    const zone = inject$1(NgZone);
+    let _stable = true;
+    const isCurrentlyStable = new Observable((observer) => {
+        _stable = zone.isStable && !zone.hasPendingMacrotasks && !zone.hasPendingMicrotasks;
+        zone.runOutsideAngular(() => {
+            observer.next(_stable);
+            observer.complete();
+        });
+    });
+    const isStable = new Observable((observer) => {
+        // Create the subscription to onStable outside the Angular Zone so that
+        // the callback is run outside the Angular Zone.
+        let stableSub;
+        zone.runOutsideAngular(() => {
+            stableSub = zone.onStable.subscribe(() => {
+                NgZone.assertNotInAngularZone();
+                // Check whether there are no pending macro/micro tasks in the next tick
+                // to allow for NgZone to update the state.
+                queueMicrotask(() => {
+                    if (!_stable && !zone.hasPendingMacrotasks && !zone.hasPendingMicrotasks) {
+                        _stable = true;
+                        observer.next(true);
+                    }
+                });
+            });
+        });
+        const unstableSub = zone.onUnstable.subscribe(() => {
+            NgZone.assertInAngularZone();
+            if (_stable) {
+                _stable = false;
+                zone.runOutsideAngular(() => {
+                    observer.next(false);
+                });
+            }
+        });
+        return () => {
+            stableSub.unsubscribe();
+            unstableSub.unsubscribe();
+        };
+    });
+    return merge$1(isCurrentlyStable, isStable.pipe(share()));
 }
-class NodeInjectorDestroyRef extends DestroyRef {
-    constructor(_lView) {
-        super();
-        this._lView = _lView;
+function shouldBeIgnoredByZone(applyArgs) {
+    if (!Array.isArray(applyArgs)) {
+        return false;
     }
-    onDestroy(callback) {
-        storeLViewOnDestroy(this._lView, callback);
-        return () => removeLViewOnDestroy(this._lView, callback);
+    // We should only ever get 1 arg passed through to invokeTask.
+    // Short circuit here incase that behavior changes.
+    if (applyArgs.length !== 1) {
+        return false;
     }
+    // Prevent triggering change detection when the __ignore_ng_zone__ flag is detected.
+    return applyArgs[0].data?.['__ignore_ng_zone__'] === true;
 }
-function injectDestroyRef() {
-    return new NodeInjectorDestroyRef(getLView());
-}
+
+// Public API for Zone
 
 /**
  * Register a callback to be invoked each time the application
@@ -11044,7 +11581,8 @@ function afterRender(callback, options) {
     let destroy;
     const unregisterFn = injector.get(DestroyRef).onDestroy(() => destroy?.());
     const manager = injector.get(AfterRenderEventManager);
-    const instance = new AfterRenderCallback(callback);
+    const ngZone = injector.get(NgZone);
+    const instance = new AfterRenderCallback(() => ngZone.runOutsideAngular(callback));
     destroy = () => {
         manager.unregister(instance);
         unregisterFn();
@@ -11103,9 +11641,10 @@ function afterNextRender(callback, options) {
     let destroy;
     const unregisterFn = injector.get(DestroyRef).onDestroy(() => destroy?.());
     const manager = injector.get(AfterRenderEventManager);
+    const ngZone = injector.get(NgZone);
     const instance = new AfterRenderCallback(() => {
         destroy?.();
-        callback();
+        ngZone.runOutsideAngular(callback);
     });
     destroy = () => {
         manager.unregister(instance);
@@ -11419,48 +11958,11 @@ function getExpressionChangedErrorDetails(lView, bindingIndex, oldValue, newValu
     return { propName: undefined, oldValue, newValue };
 }
 
-class ReactiveLViewConsumer extends ReactiveNode {
-    constructor() {
-        super(...arguments);
-        this.consumerAllowSignalWrites = false;
-        this._lView = null;
-    }
-    set lView(lView) {
-        (typeof ngDevMode === 'undefined' || ngDevMode) &&
-            assertEqual(this._lView, null, 'Consumer already associated with a view.');
-        this._lView = lView;
-    }
-    onConsumerDependencyMayHaveChanged() {
-        (typeof ngDevMode === 'undefined' || ngDevMode) &&
-            assertDefined(this._lView, 'Updating a signal during template or host binding execution is not allowed.');
-        markViewDirty(this._lView);
-    }
-    onProducerUpdateValueVersion() {
-        // This type doesn't implement the producer side of a `ReactiveNode`.
-    }
-    get hasReadASignal() {
-        return this.hasProducers;
-    }
-    runInContext(fn, rf, ctx) {
-        const prevConsumer = setActiveConsumer(this);
-        this.trackingVersion++;
-        try {
-            fn(rf, ctx);
-        }
-        finally {
-            setActiveConsumer(prevConsumer);
-        }
-    }
-    destroy() {
-        // Incrementing the version means that every producer which tries to update this consumer will
-        // consider its record stale, and not notify.
-        this.trackingVersion++;
-    }
-}
 let currentConsumer = null;
-function getOrCreateCurrentLViewConsumer() {
-    currentConsumer ??= new ReactiveLViewConsumer();
-    return currentConsumer;
+function setLViewForConsumer(node, lView) {
+    (typeof ngDevMode === 'undefined' || ngDevMode) &&
+        assertEqual(node.lView, null, 'Consumer already associated with a view.');
+    node.lView = lView;
 }
 /**
  * Create a new template consumer pointing at the specified LView.
@@ -11482,12 +11984,29 @@ function getReactiveLViewConsumer(lView, slot) {
  */
 function commitLViewConsumerIfHasProducers(lView, slot) {
     const consumer = getOrCreateCurrentLViewConsumer();
-    if (!consumer.hasReadASignal) {
+    if (!consumer.producerNode?.length) {
         return;
     }
     lView[slot] = currentConsumer;
     consumer.lView = lView;
-    currentConsumer = new ReactiveLViewConsumer();
+    currentConsumer = createLViewConsumer();
+}
+const REACTIVE_LVIEW_CONSUMER_NODE = {
+    ...REACTIVE_NODE,
+    consumerIsAlwaysLive: true,
+    consumerMarkedDirty: (node) => {
+        (typeof ngDevMode === 'undefined' || ngDevMode) &&
+            assertDefined(node.lView, 'Updating a signal during template or host binding execution is not allowed.');
+        markViewDirty(node.lView);
+    },
+    lView: null,
+};
+function createLViewConsumer() {
+    return Object.create(REACTIVE_LVIEW_CONSUMER_NODE);
+}
+function getOrCreateCurrentLViewConsumer() {
+    currentConsumer ??= createLViewConsumer();
+    return currentConsumer;
 }
 
 /** A special value which designates that a value has not changed. */
@@ -11604,8 +12123,15 @@ function processHostBindingOpCodes(tView, lView) {
                 const bindingRootIndx = hostBindingOpCodes[++i];
                 const hostBindingFn = hostBindingOpCodes[++i];
                 setBindingRootForHostBindings(bindingRootIndx, directiveIdx);
-                const context = lView[directiveIdx];
-                consumer.runInContext(hostBindingFn, 2 /* RenderFlags.Update */, context);
+                consumer.dirty = false;
+                const prevConsumer = consumerBeforeComputation(consumer);
+                try {
+                    const context = lView[directiveIdx];
+                    hostBindingFn(2 /* RenderFlags.Update */, context);
+                }
+                finally {
+                    consumerAfterComputation(consumer, prevConsumer);
+                }
             }
         }
     }
@@ -11745,17 +12271,16 @@ function executeTemplate(tView, lView, templateFn, rf, context) {
         }
         const preHookType = isUpdatePhase ? 2 /* ProfilerEvent.TemplateUpdateStart */ : 0 /* ProfilerEvent.TemplateCreateStart */;
         profiler(preHookType, context);
-        if (isUpdatePhase) {
-            consumer.runInContext(templateFn, rf, context);
-        }
-        else {
-            const prevConsumer = setActiveConsumer(null);
-            try {
-                templateFn(rf, context);
-            }
-            finally {
-                setActiveConsumer(prevConsumer);
+        const effectiveConsumer = isUpdatePhase ? consumer : null;
+        const prevConsumer = consumerBeforeComputation(effectiveConsumer);
+        try {
+            if (effectiveConsumer !== null) {
+                effectiveConsumer.dirty = false;
             }
+            templateFn(rf, context);
+        }
+        finally {
+            consumerAfterComputation(effectiveConsumer, prevConsumer);
         }
     }
     finally {
@@ -13009,21 +13534,21 @@ class EffectManager {
     }
     create(effectFn, destroyRef, allowSignalWrites) {
         const zone = (typeof Zone === 'undefined') ? null : Zone.current;
-        const watch = new Watch(effectFn, (watch) => {
+        const w = watch(effectFn, (watch) => {
             if (!this.all.has(watch)) {
                 return;
             }
             this.queue.set(watch, zone);
         }, allowSignalWrites);
-        this.all.add(watch);
+        this.all.add(w);
         // Effects start dirty.
-        watch.notify();
+        w.notify();
         let unregisterOnDestroy;
         const destroy = () => {
-            watch.cleanup();
+            w.cleanup();
             unregisterOnDestroy?.();
-            this.all.delete(watch);
-            this.queue.delete(watch);
+            this.all.delete(w);
+            this.queue.delete(w);
         };
         unregisterOnDestroy = destroyRef?.onDestroy(destroy);
         return {
@@ -13116,28 +13641,7 @@ function collectNativeNodes(tView, lView, tNode, result, isProjection = false) {
         // ViewContainerRef). When we find a LContainer we need to descend into it to collect root nodes
         // from the views in this container.
         if (isLContainer(lNode)) {
-            for (let i = CONTAINER_HEADER_OFFSET; i < lNode.length; i++) {
-                const lViewInAContainer = lNode[i];
-                const lViewFirstChildTNode = lViewInAContainer[TVIEW].firstChild;
-                if (lViewFirstChildTNode !== null) {
-                    collectNativeNodes(lViewInAContainer[TVIEW], lViewInAContainer, lViewFirstChildTNode, result);
-                }
-            }
-            // When an LContainer is created, the anchor (comment) node is:
-            // - (1) either reused in case of an ElementContainer (<ng-container>)
-            // - (2) or a new comment node is created
-            // In the first case, the anchor comment node would be added to the final
-            // list by the code above (`result.push(unwrapRNode(lNode))`), but the second
-            // case requires extra handling: the anchor node needs to be added to the
-            // final list manually. See additional information in the `createAnchorNode`
-            // function in the `view_container_ref.ts`.
-            //
-            // In the first case, the same reference would be stored in the `NATIVE`
-            // and `HOST` slots in an LContainer. Otherwise, this is the second case and
-            // we should add an element to the final list.
-            if (lNode[NATIVE] !== lNode[HOST]) {
-                result.push(lNode[NATIVE]);
-            }
+            collectNativeNodesInLContainer(lNode, result);
         }
         const tNodeType = tNode.type;
         if (tNodeType & 8 /* TNodeType.ElementContainer */) {
@@ -13165,6 +13669,34 @@ function collectNativeNodes(tView, lView, tNode, result, isProjection = false) {
     }
     return result;
 }
+/**
+ * Collects all root nodes in all views in a given LContainer.
+ */
+function collectNativeNodesInLContainer(lContainer, result) {
+    for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
+        const lViewInAContainer = lContainer[i];
+        const lViewFirstChildTNode = lViewInAContainer[TVIEW].firstChild;
+        if (lViewFirstChildTNode !== null) {
+            collectNativeNodes(lViewInAContainer[TVIEW], lViewInAContainer, lViewFirstChildTNode, result);
+        }
+    }
+    // When an LContainer is created, the anchor (comment) node is:
+    // - (1) either reused in case of an ElementContainer (<ng-container>)
+    // - (2) or a new comment node is created
+    // In the first case, the anchor comment node would be added to the final
+    // list by the code in the `collectNativeNodes` function
+    // (see the `result.push(unwrapRNode(lNode))` line), but the second
+    // case requires extra handling: the anchor node needs to be added to the
+    // final list manually. See additional information in the `createAnchorNode`
+    // function in the `view_container_ref.ts`.
+    //
+    // In the first case, the same reference would be stored in the `NATIVE`
+    // and `HOST` slots in an LContainer. Otherwise, this is the second case and
+    // we should add an element to the final list.
+    if (lContainer[NATIVE] !== lContainer[HOST]) {
+        result.push(lContainer[NATIVE]);
+    }
+}
 
 function detectChangesInternal(tView, lView, context, notifyErrorHandler = true) {
     const environment = lView[ENVIRONMENT];
@@ -13400,15 +13932,15 @@ function detectChangesInView(lView, mode) {
         return;
     }
     const tView = lView[TVIEW];
-    if ((lView[FLAGS] & (16 /* LViewFlags.CheckAlways */ | 64 /* LViewFlags.Dirty */) &&
+    const flags = lView[FLAGS];
+    if ((flags & (16 /* LViewFlags.CheckAlways */ | 64 /* LViewFlags.Dirty */) &&
         mode === 0 /* ChangeDetectionMode.Global */) ||
-        lView[FLAGS] & 1024 /* LViewFlags.RefreshView */ ||
+        flags & 1024 /* LViewFlags.RefreshView */ ||
         mode === 2 /* ChangeDetectionMode.BugToForceRefreshAndIgnoreViewFlags */) {
         refreshView(tView, lView, tView.template, lView[CONTEXT]);
     }
     else if (lView[DESCENDANT_VIEWS_TO_REFRESH] > 0) {
         detectChangesInEmbeddedViews(lView, 1 /* ChangeDetectionMode.Targeted */);
-        const tView = lView[TVIEW];
         const components = tView.components;
         if (components !== null) {
             detectChangesInChildComponents(lView, components, 1 /* ChangeDetectionMode.Targeted */);
@@ -17184,14 +17716,12 @@ function getTStylingRangePrev(tStylingRange) {
 }
 function getTStylingRangePrevDuplicate(tStylingRange) {
     ngDevMode && assertNumber(tStylingRange, 'expected number');
-    return (tStylingRange & 2 /* StylingRange.PREV_DUPLICATE */) ==
-        2 /* StylingRange.PREV_DUPLICATE */;
+    return (tStylingRange & 2 /* StylingRange.PREV_DUPLICATE */) == 2 /* StylingRange.PREV_DUPLICATE */;
 }
 function setTStylingRangePrev(tStylingRange, previous) {
     ngDevMode && assertNumber(tStylingRange, 'expected number');
     ngDevMode && assertNumberInRange(previous, 0, 32767 /* StylingRange.UNSIGNED_MASK */);
-    return ((tStylingRange & ~4294836224 /* StylingRange.PREV_MASK */) |
-        (previous << 17 /* StylingRange.PREV_SHIFT */));
+    return ((tStylingRange & ~4294836224 /* StylingRange.PREV_MASK */) | (previous << 17 /* StylingRange.PREV_SHIFT */));
 }
 function setTStylingRangePrevDuplicate(tStylingRange) {
     ngDevMode && assertNumber(tStylingRange, 'expected number');
@@ -17209,8 +17739,7 @@ function setTStylingRangeNext(tStylingRange, next) {
 }
 function getTStylingRangeNextDuplicate(tStylingRange) {
     ngDevMode && assertNumber(tStylingRange, 'expected number');
-    return (tStylingRange & 1 /* StylingRange.NEXT_DUPLICATE */) ===
-        1 /* StylingRange.NEXT_DUPLICATE */;
+    return ((tStylingRange) & 1 /* StylingRange.NEXT_DUPLICATE */) === 1 /* StylingRange.NEXT_DUPLICATE */;
 }
 function setTStylingRangeNextDuplicate(tStylingRange) {
     ngDevMode && assertNumber(tStylingRange, 'expected number');
@@ -23551,51 +24080,6 @@ function isPure(lView, index) {
     return lView[TVIEW].data[index].pure;
 }
 
-/// <reference types="rxjs" />
-class EventEmitter_ extends Subject {
-    constructor(isAsync = false) {
-        super();
-        this.__isAsync = isAsync;
-    }
-    emit(value) {
-        super.next(value);
-    }
-    subscribe(observerOrNext, error, complete) {
-        let nextFn = observerOrNext;
-        let errorFn = error || (() => null);
-        let completeFn = complete;
-        if (observerOrNext && typeof observerOrNext === 'object') {
-            const observer = observerOrNext;
-            nextFn = observer.next?.bind(observer);
-            errorFn = observer.error?.bind(observer);
-            completeFn = observer.complete?.bind(observer);
-        }
-        if (this.__isAsync) {
-            errorFn = _wrapInTimeout(errorFn);
-            if (nextFn) {
-                nextFn = _wrapInTimeout(nextFn);
-            }
-            if (completeFn) {
-                completeFn = _wrapInTimeout(completeFn);
-            }
-        }
-        const sink = super.subscribe({ next: nextFn, error: errorFn, complete: completeFn });
-        if (observerOrNext instanceof Subscription) {
-            observerOrNext.add(sink);
-        }
-        return sink;
-    }
-}
-function _wrapInTimeout(fn) {
-    return (value) => {
-        setTimeout(fn, undefined, value);
-    };
-}
-/**
- * @publicApi
- */
-const EventEmitter = EventEmitter_;
-
 function symbolIterator() {
     // @ts-expect-error accessing a private member
     return this._results[Symbol.iterator]();
@@ -24053,6 +24537,40 @@ function findMatchingDehydratedView(lContainer, template) {
  * A view container instance can contain other view containers,
  * creating a [view hierarchy](guide/glossary#view-hierarchy).
  *
+ * @usageNotes
+ *
+ * The example below demonstrates how the `createComponent` function can be used
+ * to create an instance of a ComponentRef dynamically and attach it to an ApplicationRef,
+ * so that it gets included into change detection cycles.
+ *
+ * Note: the example uses standalone components, but the function can also be used for
+ * non-standalone components (declared in an NgModule) as well.
+ *
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   selector: 'dynamic',
+ *   template: `<span>This is a content of a dynamic component.</span>`,
+ * })
+ * class DynamicComponent {
+ *   vcr = inject(ViewContainerRef);
+ * }
+ *
+ * @Component({
+ *   standalone: true,
+ *   selector: 'app',
+ *   template: `<main>Hi! This is the main content.</main>`,
+ * })
+ * class AppComponent {
+ *   vcr = inject(ViewContainerRef);
+ *
+ *   ngAfterViewInit() {
+ *     const compRef = this.vcr.createComponent(DynamicComponent);
+ *     compRef.changeDetectorRef.detectChanges();
+ *   }
+ * }
+ * ```
+ *
  * @see {@link ComponentRef}
  * @see {@link EmbeddedViewRef}
  *
@@ -26899,7 +27417,7 @@ class TestBedImpl {
         }
         const noNgZone = this.inject(ComponentFixtureNoNgZone, false);
         const autoDetect = this.inject(ComponentFixtureAutoDetect, false);
-        const ngZone = noNgZone ? null : this.inject(NgZone, null);
+        const ngZone = noNgZone ? null : this.inject(NgZone$1, null);
         const componentFactory = new ɵRender3ComponentFactory(componentDef);
         const initComponent = () => {
             const componentRef = componentFactory.create(Injector$1.NULL, [], `#${rootElId}`, this.testModuleRef);