@angular/core 16.2.3 → 16.2.5

package/fesm2022/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v16.2.3
+ * @license Angular v16.2.5
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -2303,15 +2303,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.
@@ -2332,216 +2323,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 ??= [];
 }
 
 /**
@@ -2550,10 +2590,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.
@@ -2572,108 +2623,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();
@@ -2693,88 +2683,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) {
@@ -2782,6 +2708,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
@@ -2801,63 +2771,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();
+function watch(fn, schedule, allowSignalWrites) {
+    const node = Object.create(WATCH_NODE);
+    if (allowSignalWrites) {
+        node.consumerAllowSignalWrites = true;
     }
-    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()) {
+    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
 }
 
 /**
@@ -7153,8 +7113,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);
         }
@@ -10296,7 +10256,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('16.2.3');
+const VERSION = new Version('16.2.5');
 
 // This default value is when checking the hierarchy for a token.
 //
@@ -10564,6 +10524,66 @@ class Injector {
  * safe to delete this file.
  */
 
+const ERROR_ORIGINAL_ERROR = 'ngOriginalError';
+function wrappedError(message, originalError) {
+    const msg = `${message} caused by: ${originalError instanceof Error ? originalError.message : originalError}`;
+    const error = Error(msg);
+    error[ERROR_ORIGINAL_ERROR] = originalError;
+    return error;
+}
+function getOriginalError(error) {
+    return error[ERROR_ORIGINAL_ERROR];
+}
+
+/**
+ * Provides a hook for centralized exception handling.
+ *
+ * The default implementation of `ErrorHandler` prints error messages to the `console`. To
+ * intercept error handling, write a custom exception handler that replaces this default as
+ * appropriate for your app.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```
+ * class MyErrorHandler implements ErrorHandler {
+ *   handleError(error) {
+ *     // do something with the exception
+ *   }
+ * }
+ *
+ * @NgModule({
+ *   providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
+ * })
+ * class MyModule {}
+ * ```
+ *
+ * @publicApi
+ */
+class ErrorHandler {
+    constructor() {
+        /**
+         * @internal
+         */
+        this._console = console;
+    }
+    handleError(error) {
+        const originalError = this._findOriginalError(error);
+        this._console.error('ERROR', error);
+        if (originalError) {
+            this._console.error('ORIGINAL ERROR', originalError);
+        }
+    }
+    /** @internal */
+    _findOriginalError(error) {
+        let e = error && getOriginalError(error);
+        while (e && getOriginalError(e)) {
+            e = getOriginalError(e);
+        }
+        return e || null;
+    }
+}
+
 /**
  * `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`
@@ -11000,6 +11020,9 @@ function forkInnerZoneWithAngularBehavior(zone) {
         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);
@@ -11151,6 +11174,18 @@ function isStableFactory() {
     });
     return merge$1(isCurrentlyStable, isStable.pipe(share()));
 }
+function shouldBeIgnoredByZone(applyArgs) {
+    if (!Array.isArray(applyArgs)) {
+        return false;
+    }
+    // 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;
+}
 
 // Public API for Zone
 
@@ -11259,14 +11294,18 @@ function afterRender(callback, options) {
     }
     let destroy;
     const unregisterFn = injector.get(DestroyRef).onDestroy(() => destroy?.());
-    const manager = injector.get(AfterRenderEventManager);
+    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 ngZone = injector.get(NgZone);
-    const instance = new AfterRenderCallback(() => ngZone.runOutsideAngular(callback));
+    const errorHandler = injector.get(ErrorHandler, null, { optional: true });
+    const instance = new AfterRenderCallback(ngZone, errorHandler, callback);
     destroy = () => {
-        manager.unregister(instance);
+        callbackHandler.unregister(instance);
         unregisterFn();
     };
-    manager.register(instance);
+    callbackHandler.register(instance);
     return { destroy };
 }
 /**
@@ -11319,89 +11358,117 @@ function afterNextRender(callback, options) {
     }
     let destroy;
     const unregisterFn = injector.get(DestroyRef).onDestroy(() => destroy?.());
-    const manager = injector.get(AfterRenderEventManager);
+    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 ngZone = injector.get(NgZone);
-    const instance = new AfterRenderCallback(() => {
+    const errorHandler = injector.get(ErrorHandler, null, { optional: true });
+    const instance = new AfterRenderCallback(ngZone, errorHandler, () => {
         destroy?.();
-        ngZone.runOutsideAngular(callback);
+        callback();
     });
     destroy = () => {
-        manager.unregister(instance);
+        callbackHandler.unregister(instance);
         unregisterFn();
     };
-    manager.register(instance);
+    callbackHandler.register(instance);
     return { destroy };
 }
 /**
  * A wrapper around a function to be used as an after render callback.
- * @private
  */
 class AfterRenderCallback {
-    constructor(callback) {
-        this.callback = callback;
+    constructor(zone, errorHandler, callbackFn) {
+        this.zone = zone;
+        this.errorHandler = errorHandler;
+        this.callbackFn = callbackFn;
     }
     invoke() {
-        this.callback();
+        try {
+            this.zone.runOutsideAngular(this.callbackFn);
+        }
+        catch (err) {
+            this.errorHandler?.handleError(err);
+        }
     }
 }
 /**
- * Implements `afterRender` and `afterNextRender` callback manager logic.
+ * Core functionality for `afterRender` and `afterNextRender`. Kept separate from
+ * `AfterRenderEventManager` for tree-shaking.
  */
-class AfterRenderEventManager {
+class AfterRenderCallbackHandlerImpl {
     constructor() {
+        this.executingCallbacks = false;
         this.callbacks = new Set();
         this.deferredCallbacks = new Set();
-        this.renderDepth = 0;
-        this.runningCallbacks = false;
     }
-    /**
-     * Mark the beginning of a render operation (i.e. CD cycle).
-     * Throws if called from an `afterRender` callback.
-     */
-    begin() {
-        if (this.runningCallbacks) {
+    validateBegin() {
+        if (this.executingCallbacks) {
             throw new RuntimeError(102 /* RuntimeErrorCode.RECURSIVE_APPLICATION_RENDER */, ngDevMode &&
                 'A new render operation began before the previous operation ended. ' +
                     'Did you trigger change detection from afterRender or afterNextRender?');
         }
-        this.renderDepth++;
-    }
-    /**
-     * Mark the end of a render operation. Registered callbacks
-     * are invoked if there are no more pending operations.
-     */
-    end() {
-        this.renderDepth--;
-        if (this.renderDepth === 0) {
-            try {
-                this.runningCallbacks = true;
-                for (const callback of this.callbacks) {
-                    callback.invoke();
-                }
-            }
-            finally {
-                this.runningCallbacks = false;
-                for (const callback of this.deferredCallbacks) {
-                    this.callbacks.add(callback);
-                }
-                this.deferredCallbacks.clear();
-            }
-        }
     }
     register(callback) {
         // If we're currently running callbacks, new callbacks should be deferred
         // until the next render operation.
-        const target = this.runningCallbacks ? this.deferredCallbacks : this.callbacks;
+        const target = this.executingCallbacks ? this.deferredCallbacks : this.callbacks;
         target.add(callback);
     }
     unregister(callback) {
         this.callbacks.delete(callback);
         this.deferredCallbacks.delete(callback);
     }
-    ngOnDestroy() {
+    execute() {
+        this.executingCallbacks = true;
+        for (const callback of this.callbacks) {
+            callback.invoke();
+        }
+        this.executingCallbacks = false;
+        for (const callback of this.deferredCallbacks) {
+            this.callbacks.add(callback);
+        }
+        this.deferredCallbacks.clear();
+    }
+    destroy() {
         this.callbacks.clear();
         this.deferredCallbacks.clear();
     }
+}
+/**
+ * Implements core timing for `afterRender` and `afterNextRender` events.
+ * Delegates to an optional `AfterRenderCallbackHandler` for implementation.
+ */
+class AfterRenderEventManager {
+    constructor() {
+        this.renderDepth = 0;
+        /* @internal */
+        this.handler = null;
+    }
+    /**
+     * Mark the beginning of a render operation (i.e. CD cycle).
+     * Throws if called while executing callbacks.
+     */
+    begin() {
+        this.handler?.validateBegin();
+        this.renderDepth++;
+    }
+    /**
+     * Mark the end of a render operation. Callbacks will be
+     * executed if there are no more pending operations.
+     */
+    end() {
+        ngDevMode && assertGreaterThan(this.renderDepth, 0, 'renderDepth must be greater than 0');
+        this.renderDepth--;
+        if (this.renderDepth === 0) {
+            this.handler?.execute();
+        }
+    }
+    ngOnDestroy() {
+        this.handler?.destroy();
+        this.handler = null;
+    }
     /** @nocollapse */
     static { this.ɵprov = ɵɵdefineInjectable({
         token: AfterRenderEventManager,
@@ -11435,66 +11502,6 @@ function markViewDirty(lView) {
     return null;
 }
 
-const ERROR_ORIGINAL_ERROR = 'ngOriginalError';
-function wrappedError(message, originalError) {
-    const msg = `${message} caused by: ${originalError instanceof Error ? originalError.message : originalError}`;
-    const error = Error(msg);
-    error[ERROR_ORIGINAL_ERROR] = originalError;
-    return error;
-}
-function getOriginalError(error) {
-    return error[ERROR_ORIGINAL_ERROR];
-}
-
-/**
- * Provides a hook for centralized exception handling.
- *
- * The default implementation of `ErrorHandler` prints error messages to the `console`. To
- * intercept error handling, write a custom exception handler that replaces this default as
- * appropriate for your app.
- *
- * @usageNotes
- * ### Example
- *
- * ```
- * class MyErrorHandler implements ErrorHandler {
- *   handleError(error) {
- *     // do something with the exception
- *   }
- * }
- *
- * @NgModule({
- *   providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
- * })
- * class MyModule {}
- * ```
- *
- * @publicApi
- */
-class ErrorHandler {
-    constructor() {
-        /**
-         * @internal
-         */
-        this._console = console;
-    }
-    handleError(error) {
-        const originalError = this._findOriginalError(error);
-        this._console.error('ERROR', error);
-        if (originalError) {
-            this._console.error('ORIGINAL ERROR', originalError);
-        }
-    }
-    /** @internal */
-    _findOriginalError(error) {
-        let e = error && getOriginalError(error);
-        while (e && getOriginalError(e)) {
-            e = getOriginalError(e);
-        }
-        return e || null;
-    }
-}
-
 /**
  * Internal token that specifies whether DOM reuse logic
  * during hydration is enabled.
@@ -11637,48 +11644,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.
@@ -11700,12 +11670,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. */
@@ -11822,8 +11809,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);
+                }
             }
         }
     }
@@ -11963,17 +11957,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 {
@@ -13227,21 +13220,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 {
@@ -13625,15 +13618,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 */);
@@ -17409,14 +17402,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');
@@ -17434,8 +17425,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');
@@ -24233,6 +24223,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}
  *
@@ -31536,17 +31560,18 @@ function ɵɵngDeclarePipe(decl) {
  * const applicationRef = await bootstrapApplication(RootComponent);
  *
  * // Locate a DOM node that would be used as a host.
- * const host = document.getElementById('hello-component-host');
+ * const hostElement = document.getElementById('hello-component-host');
  *
  * // Get an `EnvironmentInjector` instance from the `ApplicationRef`.
  * const environmentInjector = applicationRef.injector;
  *
  * // We can now create a `ComponentRef` instance.
- * const componentRef = createComponent(HelloComponent, {host, environmentInjector});
+ * const componentRef = createComponent(HelloComponent, {hostElement, environmentInjector});
  *
  * // Last step is to register the newly created ref using the `ApplicationRef` instance
  * // to include the component view into change detection cycles.
  * applicationRef.attachView(componentRef.hostView);
+ * componentRef.changeDetectorRef.detectChanges();
  * ```
  *
  * @param component Component class reference.