@angular/core 17.0.0-next.2 → 17.0.0-next.3

package/fesm2022/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v17.0.0-next.2
+ * @license Angular v17.0.0-next.3
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -2273,15 +2273,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.
@@ -2302,216 +2293,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`.
+ */
+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.
  */
-class LeakyRef {
-    constructor(ref) {
-        this.ref = ref;
+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 ??= [];
 }
 
 /**
@@ -2520,10 +2560,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.
@@ -2542,108 +2593,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();
@@ -2663,88 +2653,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) {
@@ -2752,6 +2678,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
@@ -2771,63 +2741,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
 }
 
 /**
@@ -4081,6 +4041,21 @@ function toTNodeTypeAsString(tNodeType) {
     (tNodeType & 64 /* TNodeType.Placeholder */) && (text += '|Placeholder');
     return text.length > 0 ? text.substring(1) : text;
 }
+/**
+ * Helper function to detect if a given value matches a `TNode` shape.
+ *
+ * The logic uses the `insertBeforeIndex` and its possible values as
+ * a way to differentiate a TNode shape from other types of objects
+ * within the `TView.data`. This is not a perfect check, but it can
+ * be a reasonable differentiator, since we control the shapes of objects
+ * within `TView.data`.
+ */
+function isTNodeShape(value) {
+    return value != null && typeof value === 'object' &&
+        (value.insertBeforeIndex === null ||
+            typeof value.insertBeforeIndex === 'number' ||
+            Array.isArray(value.insertBeforeIndex));
+}
 // Note: This hack is necessary so we don't erroneously get a circular dependency
 // failure based on types.
 const unusedValueExportToPlacateAjd$1 = 1;
@@ -8696,8 +8671,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);
         }
@@ -10859,7 +10834,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('17.0.0-next.2');
+const VERSION = new Version('17.0.0-next.3');
 
 // This default value is when checking the hierarchy for a token.
 //
@@ -11316,6 +11291,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);
@@ -11467,6 +11445,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
 
@@ -11520,13 +11510,16 @@ function afterRender(callback, options) {
     let destroy;
     const unregisterFn = injector.get(DestroyRef).onDestroy(() => destroy?.());
     const manager = 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 handler = manager.handler ??= new AfterRenderCallbackHandlerImpl();
     const ngZone = injector.get(NgZone);
     const instance = new AfterRenderCallback(() => ngZone.runOutsideAngular(callback));
     destroy = () => {
-        manager.unregister(instance);
+        handler.unregister(instance);
         unregisterFn();
     };
-    manager.register(instance);
+    handler.register(instance);
     return { destroy };
 }
 /**
@@ -11580,21 +11573,23 @@ function afterNextRender(callback, options) {
     let destroy;
     const unregisterFn = injector.get(DestroyRef).onDestroy(() => destroy?.());
     const manager = 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 handler = manager.handler ??= new AfterRenderCallbackHandlerImpl();
     const ngZone = injector.get(NgZone);
     const instance = new AfterRenderCallback(() => {
         destroy?.();
         ngZone.runOutsideAngular(callback);
     });
     destroy = () => {
-        manager.unregister(instance);
+        handler.unregister(instance);
         unregisterFn();
     };
-    manager.register(instance);
+    handler.register(instance);
     return { destroy };
 }
 /**
  * A wrapper around a function to be used as an after render callback.
- * @private
  */
 class AfterRenderCallback {
     constructor(callback) {
@@ -11605,65 +11600,87 @@ class AfterRenderCallback {
     }
 }
 /**
- * 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() {
+        try {
+            this.executingCallbacks = true;
+            for (const callback of this.callbacks) {
+                callback.invoke();
+            }
+        }
+        finally {
+            this.executingCallbacks = false;
+            for (const callback of this.deferredCallbacks) {
+                this.callbacks.add(callback);
+            }
+            this.deferredCallbacks.clear();
+        }
+    }
+    destroy() {
         this.callbacks.clear();
         this.deferredCallbacks.clear();
     }
-    /** @nocollapse */
-    static { this.ɵprov = ɵɵdefineInjectable({
+}
+/**
+ * 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,
         providedIn: 'root',
         factory: () => new AfterRenderEventManager(),
@@ -11897,48 +11914,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.
@@ -11960,12 +11940,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. */
@@ -12082,8 +12079,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);
+                }
             }
         }
     }
@@ -12223,17 +12227,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 {
@@ -13487,21 +13490,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 {
@@ -13749,7 +13752,7 @@ function refreshView(tView, lView, templateFn, context) {
         // insertion points. This is needed to avoid the situation where the template is defined in this
         // `LView` but its declaration appears after the insertion component.
         markTransplantedViewsForRefresh(lView);
-        detectChangesInEmbeddedViews(lView, 2 /* ChangeDetectionMode.BugToForceRefreshAndIgnoreViewFlags */);
+        detectChangesInEmbeddedViews(lView, 0 /* ChangeDetectionMode.Global */);
         // Content query results must be refreshed before content hooks are called.
         if (tView.contentQueries !== null) {
             refreshContentQueries(tView, lView);
@@ -13885,15 +13888,14 @@ 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 */ ||
-        mode === 2 /* ChangeDetectionMode.BugToForceRefreshAndIgnoreViewFlags */) {
+        flags & 1024 /* LViewFlags.RefreshView */) {
         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 */);
@@ -15653,14 +15655,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');
@@ -15678,8 +15678,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');
@@ -17480,6 +17479,26 @@ function ɵɵclassMapInterpolateV(values) {
     checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true);
 }
 
+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * Instruction that returns the component instance in which the current instruction is executing.
+ * This is a constant-time version of `nextContent` for the case where we know that we need the
+ * component instance specifically, rather than the context of a particular template.
+ *
+ * @codeGenApi
+ */
+function ɵɵcomponentInstance() {
+    const instance = getLView()[DECLARATION_COMPONENT_VIEW][CONTEXT];
+    ngDevMode && assertDefined(instance, 'Expected component instance to be defined');
+    return instance;
+}
+
 class DefaultIterableDifferFactory {
     constructor() { }
     supports(obj) {
@@ -18620,7 +18639,7 @@ function createAndRenderEmbeddedLView(declarationLView, templateTNode, context,
     // Embedded views follow the change detection strategy of the view they're declared in.
     const isSignalView = declarationLView[FLAGS] & 4096 /* LViewFlags.SignalView */;
     const viewFlags = isSignalView ? 4096 /* LViewFlags.SignalView */ : 16 /* LViewFlags.CheckAlways */;
-    const embeddedLView = createLView(declarationLView, embeddedTView, context, viewFlags, null, templateTNode, null, null, null, options?.injector ?? null, options?.hydrationInfo ?? null);
+    const embeddedLView = createLView(declarationLView, embeddedTView, context, viewFlags, null, templateTNode, null, null, null, options?.injector ?? null, options?.dehydratedView ?? null);
     const declarationLContainer = declarationLView[templateTNode.index];
     ngDevMode && assertLContainer(declarationLContainer);
     embeddedLView[DECLARATION_LCONTAINER] = declarationLContainer;
@@ -18642,6 +18661,16 @@ function getLViewFromLContainer(lContainer, index) {
     }
     return undefined;
 }
+/**
+ * Returns whether an elements that belong to a view should be
+ * inserted into the DOM. For client-only cases, DOM elements are
+ * always inserted. For hydration cases, we check whether serialized
+ * info is available for a view and the view is not in a "skip hydration"
+ * block (in which case view contents was re-created, thus needing insertion).
+ */
+function shouldAddViewToDom(tNode, dehydratedView) {
+    return !dehydratedView || hasInSkipHydrationBlockFlag(tNode);
+}
 function addLViewToLContainer(lContainer, lView, index, addToDOM = true) {
     const tView = lView[TVIEW];
     // insert to the view tree so the new view can be change-detected
@@ -19539,12 +19568,28 @@ class RepeaterMetadata {
  * - LView[HEADER_OFFSET + index + 2] - optional reference to a template function rendering an empty
  * block
  *
+ * @param index Index at which to store the metadata of the repeater.
+ * @param templateFn Reference to the template of the main repeater block.
+ * @param decls The number of nodes, local refs, and pipes for the main block.
+ * @param vars The number of bindings for the main block.
+ * @param trackByFn Reference to the tracking function.
+ * @param trackByUsesComponentInstance Whether the tracking function has any references to the
+ *  component instance. If it doesn't, we can avoid rebinding it.
+ * @param emptyTemplateFn Reference to the template function of the empty block.
+ * @param emptyDecls The number of nodes, local refs, and pipes for the empty block.
+ * @param emptyVars The number of bindings for the empty block.
+ *
  * @codeGenApi
  */
-function ɵɵrepeaterCreate(index, templateFn, decls, vars, trackByFn, emptyTemplateFn, emptyDecls, emptyVars) {
+function ɵɵrepeaterCreate(index, templateFn, decls, vars, trackByFn, trackByUsesComponentInstance, emptyTemplateFn, emptyDecls, emptyVars) {
     const hasEmptyBlock = emptyTemplateFn !== undefined;
     const hostLView = getLView();
-    const metadata = new RepeaterMetadata(hasEmptyBlock, new DefaultIterableDiffer(trackByFn));
+    const boundTrackBy = trackByUsesComponentInstance ?
+        // We only want to bind when necessary, because it produces a
+        // new function. For pure functions it's not necessary.
+        trackByFn.bind(hostLView[DECLARATION_COMPONENT_VIEW][CONTEXT]) :
+        trackByFn;
+    const metadata = new RepeaterMetadata(hasEmptyBlock, new DefaultIterableDiffer(boundTrackBy));
     hostLView[HEADER_OFFSET + index] = metadata;
     ɵɵtemplate(index + 1, templateFn, decls, vars);
     if (hasEmptyBlock) {
@@ -19655,142 +19700,741 @@ function getExistingTNode(tView, index) {
     return tNode;
 }
 
-const DEFER_BLOCK_STATE = 0;
-
-/**
- * Shims for the `requestIdleCallback` and `cancelIdleCallback` functions for environments
- * where those functions are not available (e.g. Node.js).
- */
-const _requestIdleCallback = typeof requestIdleCallback !== 'undefined' ? requestIdleCallback : setTimeout;
-const _cancelIdleCallback = typeof requestIdleCallback !== 'undefined' ? cancelIdleCallback : clearTimeout;
 /**
- * Creates runtime data structures for `{#defer}` blocks.
- *
- * @param index Index of the `defer` instruction.
- * @param primaryTmplIndex Index of the template with the primary block content.
- * @param dependencyResolverFn Function that contains dependencies for this defer block.
- * @param loadingTmplIndex Index of the template with the `{:loading}` block content.
- * @param placeholderTmplIndex Index of the template with the `{:placeholder}` block content.
- * @param errorTmplIndex Index of the template with the `{:error}` block content.
- * @param loadingConfigIndex Index in the constants array of the configuration of the `{:loading}`.
- *     block.
- * @param placeholderConfigIndexIndex in the constants array of the configuration of the
- *     `{:placeholder}` block.
- *
- * @codeGenApi
+ * Removes all dehydrated views from a given LContainer:
+ * both in internal data structure, as well as removing
+ * corresponding DOM nodes that belong to that dehydrated view.
  */
-function ɵɵdefer(index, primaryTmplIndex, dependencyResolverFn, loadingTmplIndex, placeholderTmplIndex, errorTmplIndex, loadingConfigIndex, placeholderConfigIndex) {
-    const lView = getLView();
-    const tView = getTView();
-    const tViewConsts = tView.consts;
-    const adjustedIndex = index + HEADER_OFFSET;
-    ɵɵtemplate(index, null, 0, 0);
-    if (tView.firstCreatePass) {
-        const deferBlockConfig = {
-            primaryTmplIndex,
-            loadingTmplIndex: loadingTmplIndex ?? null,
-            placeholderTmplIndex: placeholderTmplIndex ?? null,
-            errorTmplIndex: errorTmplIndex ?? null,
-            placeholderBlockConfig: placeholderConfigIndex != null ?
-                getConstant(tViewConsts, placeholderConfigIndex) :
-                null,
-            loadingBlockConfig: loadingConfigIndex != null ?
-                getConstant(tViewConsts, loadingConfigIndex) :
-                null,
-            dependencyResolverFn: dependencyResolverFn ?? null,
-            loadingState: 0 /* DeferDependenciesLoadingState.NOT_STARTED */,
-            loadingPromise: null,
-        };
-        setTDeferBlockDetails(tView, adjustedIndex, deferBlockConfig);
+function removeDehydratedViews(lContainer) {
+    const views = lContainer[DEHYDRATED_VIEWS] ?? [];
+    const parentLView = lContainer[PARENT];
+    const renderer = parentLView[RENDERER];
+    for (const view of views) {
+        removeDehydratedView(view, renderer);
+        ngDevMode && ngDevMode.dehydratedViewsRemoved++;
     }
-    // Init instance-specific defer details and store it.
-    const lDetails = [];
-    lDetails[DEFER_BLOCK_STATE] = 0 /* DeferBlockInstanceState.INITIAL */;
-    setLDeferBlockDetails(lView, adjustedIndex, lDetails);
+    // Reset the value to an empty array to indicate that no
+    // further processing of dehydrated views is needed for
+    // this view container (i.e. do not trigger the lookup process
+    // once again in case a `ViewContainerRef` is created later).
+    lContainer[DEHYDRATED_VIEWS] = EMPTY_ARRAY;
 }
 /**
- * Loads defer block dependencies when a trigger value becomes truthy.
- * @codeGenApi
+ * Helper function to remove all nodes from a dehydrated view.
  */
-function ɵɵdeferWhen(rawValue) {
-    const lView = getLView();
-    const bindingIndex = nextBindingIndex();
-    if (bindingUpdated(lView, bindingIndex, rawValue)) {
-        const value = Boolean(rawValue); // handle truthy or falsy values
-        const tNode = getSelectedTNode();
-        const lDetails = getLDeferBlockDetails(lView, tNode);
-        const renderedState = lDetails[DEFER_BLOCK_STATE];
-        if (value === false && renderedState === 0 /* DeferBlockInstanceState.INITIAL */) {
-            // If nothing is rendered yet, render a placeholder (if defined).
-            renderPlaceholder(lView, tNode);
-        }
-        else if (value === true &&
-            (renderedState === 0 /* DeferBlockInstanceState.INITIAL */ ||
-                renderedState === 1 /* DeferBlockInstanceState.PLACEHOLDER */)) {
-            // The `when` condition has changed to `true`, trigger defer block loading
-            // if the block is either in initial (nothing is rendered) or a placeholder
-            // state.
-            triggerDeferBlock(lView, tNode);
+function removeDehydratedView(dehydratedView, renderer) {
+    let nodesRemoved = 0;
+    let currentRNode = dehydratedView.firstChild;
+    if (currentRNode) {
+        const numNodes = dehydratedView.data[NUM_ROOT_NODES];
+        while (nodesRemoved < numNodes) {
+            ngDevMode && validateSiblingNodeExists(currentRNode);
+            const nextSibling = currentRNode.nextSibling;
+            nativeRemoveNode(renderer, currentRNode, false);
+            currentRNode = nextSibling;
+            nodesRemoved++;
         }
     }
 }
 /**
- * Prefetches the deferred content when a value becomes truthy.
- * @codeGenApi
+ * Walks over all views within this LContainer invokes dehydrated views
+ * cleanup function for each one.
  */
-function ɵɵdeferPrefetchWhen(rawValue) {
-    const lView = getLView();
-    const bindingIndex = nextBindingIndex();
-    if (bindingUpdated(lView, bindingIndex, rawValue)) {
-        const value = Boolean(rawValue); // handle truthy or falsy values
-        const tView = lView[TVIEW];
-        const tNode = getSelectedTNode();
-        const tDetails = getTDeferBlockDetails(tView, tNode);
-        if (value === true && tDetails.loadingState === 0 /* DeferDependenciesLoadingState.NOT_STARTED */) {
-            // If loading has not been started yet, trigger it now.
-            triggerResourceLoading(tDetails, getPrimaryBlockTNode(tView, tDetails), lView[INJECTOR$1]);
-        }
+function cleanupLContainer(lContainer) {
+    removeDehydratedViews(lContainer);
+    for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
+        cleanupLView(lContainer[i]);
     }
 }
 /**
- * Sets up handlers that represent `on idle` deferred trigger.
- * @codeGenApi
+ * Walks over `LContainer`s and components registered within
+ * this LView and invokes dehydrated views cleanup function for each one.
  */
-function ɵɵdeferOnIdle() {
-    const lView = getLView();
-    const tNode = getCurrentTNode();
-    renderPlaceholder(lView, tNode);
-    let id;
-    const removeIdleCallback = () => _cancelIdleCallback(id);
-    id = _requestIdleCallback(() => {
-        removeIdleCallback();
-        // The idle callback is invoked, we no longer need
-        // to retain a cleanup callback in an LView.
-        removeLViewOnDestroy(lView, removeIdleCallback);
-        triggerDeferBlock(lView, tNode);
-    });
-    // Store a cleanup function on LView, so that we cancel idle
-    // callback in case this LView was destroyed before a callback
-    // was invoked.
-    storeLViewOnDestroy(lView, removeIdleCallback);
+function cleanupLView(lView) {
+    const tView = lView[TVIEW];
+    for (let i = HEADER_OFFSET; i < tView.bindingStartIndex; i++) {
+        if (isLContainer(lView[i])) {
+            const lContainer = lView[i];
+            cleanupLContainer(lContainer);
+        }
+        else if (isLView(lView[i])) {
+            // This is a component, enter the `cleanupLView` recursively.
+            cleanupLView(lView[i]);
+        }
+    }
 }
 /**
- * Creates runtime data structures for the `prefetch on idle` deferred trigger.
- * @codeGenApi
- */
-function ɵɵdeferPrefetchOnIdle() { } // TODO: implement runtime logic.
-/**
- * Creates runtime data structures for the `on immediate` deferred trigger.
- * @codeGenApi
+ * Walks over all views registered within the ApplicationRef and removes
+ * all dehydrated views from all `LContainer`s along the way.
  */
-function ɵɵdeferOnImmediate() { } // TODO: implement runtime logic.
+function cleanupDehydratedViews(appRef) {
+    const viewRefs = appRef._views;
+    for (const viewRef of viewRefs) {
+        const lNode = getLNodeForHydration(viewRef);
+        // An `lView` might be `null` if a `ViewRef` represents
+        // an embedded view (not a component view).
+        if (lNode !== null && lNode[HOST] !== null) {
+            if (isLView(lNode)) {
+                cleanupLView(lNode);
+            }
+            else {
+                // Cleanup in the root component view
+                const componentLView = lNode[HOST];
+                cleanupLView(componentLView);
+                // Cleanup in all views within this view container
+                cleanupLContainer(lNode);
+            }
+            ngDevMode && ngDevMode.dehydratedViewsCleanupRuns++;
+        }
+    }
+}
+
 /**
- * Creates runtime data structures for the `prefetch on immediate` deferred trigger.
- * @codeGenApi
+ * Given a current DOM node and a serialized information about the views
+ * in a container, walks over the DOM structure, collecting the list of
+ * dehydrated views.
  */
-function ɵɵdeferPrefetchOnImmediate() { } // TODO: implement runtime logic.
-/**
- * Creates runtime data structures for the `on timer` deferred trigger.
+function locateDehydratedViewsInContainer(currentRNode, serializedViews) {
+    const dehydratedViews = [];
+    for (const serializedView of serializedViews) {
+        // Repeats a view multiple times as needed, based on the serialized information
+        // (for example, for *ngFor-produced views).
+        for (let i = 0; i < (serializedView[MULTIPLIER] ?? 1); i++) {
+            const view = {
+                data: serializedView,
+                firstChild: null,
+            };
+            if (serializedView[NUM_ROOT_NODES] > 0) {
+                // Keep reference to the first node in this view,
+                // so it can be accessed while invoking template instructions.
+                view.firstChild = currentRNode;
+                // Move over to the next node after this view, which can
+                // either be a first node of the next view or an anchor comment
+                // node after the last view in a container.
+                currentRNode = siblingAfter(serializedView[NUM_ROOT_NODES], currentRNode);
+            }
+            dehydratedViews.push(view);
+        }
+    }
+    return [currentRNode, dehydratedViews];
+}
+/**
+ * Reference to a function that searches for a matching dehydrated views
+ * stored on a given lContainer.
+ * Returns `null` by default, when hydration is not enabled.
+ */
+let _findMatchingDehydratedViewImpl = (lContainer, template) => null;
+/**
+ * Retrieves the next dehydrated view from the LContainer and verifies that
+ * it matches a given template id (from the TView that was used to create this
+ * instance of a view). If the id doesn't match, that means that we are in an
+ * unexpected state and can not complete the reconciliation process. Thus,
+ * all dehydrated views from this LContainer are removed (including corresponding
+ * DOM nodes) and the rendering is performed as if there were no dehydrated views
+ * in this container.
+ */
+function findMatchingDehydratedViewImpl(lContainer, template) {
+    const views = lContainer[DEHYDRATED_VIEWS] ?? [];
+    if (!template || views.length === 0) {
+        return null;
+    }
+    const view = views[0];
+    // Verify whether the first dehydrated view in the container matches
+    // the template id passed to this function (that originated from a TView
+    // that was used to create an instance of an embedded or component views.
+    if (view.data[TEMPLATE_ID] === template) {
+        // If the template id matches - extract the first view and return it.
+        return views.shift();
+    }
+    else {
+        // Otherwise, we are at the state when reconciliation can not be completed,
+        // thus we remove all dehydrated views within this container (remove them
+        // from internal data structures as well as delete associated elements from
+        // the DOM tree).
+        removeDehydratedViews(lContainer);
+        return null;
+    }
+}
+function enableFindMatchingDehydratedViewImpl() {
+    _findMatchingDehydratedViewImpl = findMatchingDehydratedViewImpl;
+}
+function findMatchingDehydratedView(lContainer, template) {
+    return _findMatchingDehydratedViewImpl(lContainer, template);
+}
+
+/**
+ * Represents a container where one or more views can be attached to a component.
+ *
+ * Can contain *host views* (created by instantiating a
+ * component with the `createComponent()` method), and *embedded views*
+ * (created by instantiating a `TemplateRef` with the `createEmbeddedView()` method).
+ *
+ * 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}
+ *
+ * @publicApi
+ */
+class ViewContainerRef {
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = injectViewContainerRef; }
+}
+/**
+ * Creates a ViewContainerRef and stores it on the injector. Or, if the ViewContainerRef
+ * already exists, retrieves the existing ViewContainerRef.
+ *
+ * @returns The ViewContainerRef instance to use
+ */
+function injectViewContainerRef() {
+    const previousTNode = getCurrentTNode();
+    return createContainerRef(previousTNode, getLView());
+}
+const VE_ViewContainerRef = ViewContainerRef;
+// TODO(alxhub): cleaning up this indirection triggers a subtle bug in Closure in g3. Once the fix
+// for that lands, this can be cleaned up.
+const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
+    constructor(_lContainer, _hostTNode, _hostLView) {
+        super();
+        this._lContainer = _lContainer;
+        this._hostTNode = _hostTNode;
+        this._hostLView = _hostLView;
+    }
+    get element() {
+        return createElementRef(this._hostTNode, this._hostLView);
+    }
+    get injector() {
+        return new NodeInjector(this._hostTNode, this._hostLView);
+    }
+    /** @deprecated No replacement */
+    get parentInjector() {
+        const parentLocation = getParentInjectorLocation(this._hostTNode, this._hostLView);
+        if (hasParentInjector(parentLocation)) {
+            const parentView = getParentInjectorView(parentLocation, this._hostLView);
+            const injectorIndex = getParentInjectorIndex(parentLocation);
+            ngDevMode && assertNodeInjector(parentView, injectorIndex);
+            const parentTNode = parentView[TVIEW].data[injectorIndex + 8 /* NodeInjectorOffset.TNODE */];
+            return new NodeInjector(parentTNode, parentView);
+        }
+        else {
+            return new NodeInjector(null, this._hostLView);
+        }
+    }
+    clear() {
+        while (this.length > 0) {
+            this.remove(this.length - 1);
+        }
+    }
+    get(index) {
+        const viewRefs = getViewRefs(this._lContainer);
+        return viewRefs !== null && viewRefs[index] || null;
+    }
+    get length() {
+        return this._lContainer.length - CONTAINER_HEADER_OFFSET;
+    }
+    createEmbeddedView(templateRef, context, indexOrOptions) {
+        let index;
+        let injector;
+        if (typeof indexOrOptions === 'number') {
+            index = indexOrOptions;
+        }
+        else if (indexOrOptions != null) {
+            index = indexOrOptions.index;
+            injector = indexOrOptions.injector;
+        }
+        const dehydratedView = findMatchingDehydratedView(this._lContainer, templateRef.ssrId);
+        const viewRef = templateRef.createEmbeddedViewImpl(context || {}, injector, dehydratedView);
+        this.insertImpl(viewRef, index, shouldAddViewToDom(this._hostTNode, dehydratedView));
+        return viewRef;
+    }
+    createComponent(componentFactoryOrType, indexOrOptions, injector, projectableNodes, environmentInjector) {
+        const isComponentFactory = componentFactoryOrType && !isType(componentFactoryOrType);
+        let index;
+        // This function supports 2 signatures and we need to handle options correctly for both:
+        //   1. When first argument is a Component type. This signature also requires extra
+        //      options to be provided as object (more ergonomic option).
+        //   2. First argument is a Component factory. In this case extra options are represented as
+        //      positional arguments. This signature is less ergonomic and will be deprecated.
+        if (isComponentFactory) {
+            if (ngDevMode) {
+                assertEqual(typeof indexOrOptions !== 'object', true, 'It looks like Component factory was provided as the first argument ' +
+                    'and an options object as the second argument. This combination of arguments ' +
+                    'is incompatible. You can either change the first argument to provide Component ' +
+                    'type or change the second argument to be a number (representing an index at ' +
+                    'which to insert the new component\'s host view into this container)');
+            }
+            index = indexOrOptions;
+        }
+        else {
+            if (ngDevMode) {
+                assertDefined(getComponentDef(componentFactoryOrType), `Provided Component class doesn't contain Component definition. ` +
+                    `Please check whether provided class has @Component decorator.`);
+                assertEqual(typeof indexOrOptions !== 'number', true, 'It looks like Component type was provided as the first argument ' +
+                    'and a number (representing an index at which to insert the new component\'s ' +
+                    'host view into this container as the second argument. This combination of arguments ' +
+                    'is incompatible. Please use an object as the second argument instead.');
+            }
+            const options = (indexOrOptions || {});
+            if (ngDevMode && options.environmentInjector && options.ngModuleRef) {
+                throwError(`Cannot pass both environmentInjector and ngModuleRef options to createComponent().`);
+            }
+            index = options.index;
+            injector = options.injector;
+            projectableNodes = options.projectableNodes;
+            environmentInjector = options.environmentInjector || options.ngModuleRef;
+        }
+        const componentFactory = isComponentFactory ?
+            componentFactoryOrType :
+            new ComponentFactory(getComponentDef(componentFactoryOrType));
+        const contextInjector = injector || this.parentInjector;
+        // If an `NgModuleRef` is not provided explicitly, try retrieving it from the DI tree.
+        if (!environmentInjector && componentFactory.ngModule == null) {
+            // For the `ComponentFactory` case, entering this logic is very unlikely, since we expect that
+            // an instance of a `ComponentFactory`, resolved via `ComponentFactoryResolver` would have an
+            // `ngModule` field. This is possible in some test scenarios and potentially in some JIT-based
+            // use-cases. For the `ComponentFactory` case we preserve backwards-compatibility and try
+            // using a provided injector first, then fall back to the parent injector of this
+            // `ViewContainerRef` instance.
+            //
+            // For the factory-less case, it's critical to establish a connection with the module
+            // injector tree (by retrieving an instance of an `NgModuleRef` and accessing its injector),
+            // so that a component can use DI tokens provided in MgModules. For this reason, we can not
+            // rely on the provided injector, since it might be detached from the DI tree (for example, if
+            // it was created via `Injector.create` without specifying a parent injector, or if an
+            // injector is retrieved from an `NgModuleRef` created via `createNgModule` using an
+            // NgModule outside of a module tree). Instead, we always use `ViewContainerRef`'s parent
+            // injector, which is normally connected to the DI tree, which includes module injector
+            // subtree.
+            const _injector = isComponentFactory ? contextInjector : this.parentInjector;
+            // DO NOT REFACTOR. The code here used to have a `injector.get(NgModuleRef, null) ||
+            // undefined` expression which seems to cause internal google apps to fail. This is documented
+            // in the following internal bug issue: go/b/142967802
+            const result = _injector.get(EnvironmentInjector, null);
+            if (result) {
+                environmentInjector = result;
+            }
+        }
+        const componentDef = getComponentDef(componentFactory.componentType ?? {});
+        const dehydratedView = findMatchingDehydratedView(this._lContainer, componentDef?.id ?? null);
+        const rNode = dehydratedView?.firstChild ?? null;
+        const componentRef = componentFactory.create(contextInjector, projectableNodes, rNode, environmentInjector);
+        this.insertImpl(componentRef.hostView, index, shouldAddViewToDom(this._hostTNode, dehydratedView));
+        return componentRef;
+    }
+    insert(viewRef, index) {
+        return this.insertImpl(viewRef, index, true);
+    }
+    insertImpl(viewRef, index, addToDOM) {
+        const lView = viewRef._lView;
+        if (ngDevMode && viewRef.destroyed) {
+            throw new Error('Cannot insert a destroyed View in a ViewContainer!');
+        }
+        if (viewAttachedToContainer(lView)) {
+            // If view is already attached, detach it first so we clean up references appropriately.
+            const prevIdx = this.indexOf(viewRef);
+            // A view might be attached either to this or a different container. The `prevIdx` for
+            // those cases will be:
+            // equal to -1 for views attached to this ViewContainerRef
+            // >= 0 for views attached to a different ViewContainerRef
+            if (prevIdx !== -1) {
+                this.detach(prevIdx);
+            }
+            else {
+                const prevLContainer = lView[PARENT];
+                ngDevMode &&
+                    assertEqual(isLContainer(prevLContainer), true, 'An attached view should have its PARENT point to a container.');
+                // We need to re-create a R3ViewContainerRef instance since those are not stored on
+                // LView (nor anywhere else).
+                const prevVCRef = new R3ViewContainerRef(prevLContainer, prevLContainer[T_HOST], prevLContainer[PARENT]);
+                prevVCRef.detach(prevVCRef.indexOf(viewRef));
+            }
+        }
+        // Logical operation of adding `LView` to `LContainer`
+        const adjustedIdx = this._adjustIndex(index);
+        const lContainer = this._lContainer;
+        addLViewToLContainer(lContainer, lView, adjustedIdx, addToDOM);
+        viewRef.attachToViewContainerRef();
+        addToArray(getOrCreateViewRefs(lContainer), adjustedIdx, viewRef);
+        return viewRef;
+    }
+    move(viewRef, newIndex) {
+        if (ngDevMode && viewRef.destroyed) {
+            throw new Error('Cannot move a destroyed View in a ViewContainer!');
+        }
+        return this.insert(viewRef, newIndex);
+    }
+    indexOf(viewRef) {
+        const viewRefsArr = getViewRefs(this._lContainer);
+        return viewRefsArr !== null ? viewRefsArr.indexOf(viewRef) : -1;
+    }
+    remove(index) {
+        const adjustedIdx = this._adjustIndex(index, -1);
+        const detachedView = detachView(this._lContainer, adjustedIdx);
+        if (detachedView) {
+            // Before destroying the view, remove it from the container's array of `ViewRef`s.
+            // This ensures the view container length is updated before calling
+            // `destroyLView`, which could recursively call view container methods that
+            // rely on an accurate container length.
+            // (e.g. a method on this view container being called by a child directive's OnDestroy
+            // lifecycle hook)
+            removeFromArray(getOrCreateViewRefs(this._lContainer), adjustedIdx);
+            destroyLView(detachedView[TVIEW], detachedView);
+        }
+    }
+    detach(index) {
+        const adjustedIdx = this._adjustIndex(index, -1);
+        const view = detachView(this._lContainer, adjustedIdx);
+        const wasDetached = view && removeFromArray(getOrCreateViewRefs(this._lContainer), adjustedIdx) != null;
+        return wasDetached ? new ViewRef$1(view) : null;
+    }
+    _adjustIndex(index, shift = 0) {
+        if (index == null) {
+            return this.length + shift;
+        }
+        if (ngDevMode) {
+            assertGreaterThan(index, -1, `ViewRef index must be positive, got ${index}`);
+            // +1 because it's legal to insert at the end.
+            assertLessThan(index, this.length + 1 + shift, 'index');
+        }
+        return index;
+    }
+};
+function getViewRefs(lContainer) {
+    return lContainer[VIEW_REFS];
+}
+function getOrCreateViewRefs(lContainer) {
+    return (lContainer[VIEW_REFS] || (lContainer[VIEW_REFS] = []));
+}
+/**
+ * Creates a ViewContainerRef and stores it on the injector.
+ *
+ * @param hostTNode The node that is requesting a ViewContainerRef
+ * @param hostLView The view to which the node belongs
+ * @returns The ViewContainerRef instance to use
+ */
+function createContainerRef(hostTNode, hostLView) {
+    ngDevMode && assertTNodeType(hostTNode, 12 /* TNodeType.AnyContainer */ | 3 /* TNodeType.AnyRNode */);
+    let lContainer;
+    const slotValue = hostLView[hostTNode.index];
+    if (isLContainer(slotValue)) {
+        // If the host is a container, we don't need to create a new LContainer
+        lContainer = slotValue;
+    }
+    else {
+        // An LContainer anchor can not be `null`, but we set it here temporarily
+        // and update to the actual value later in this function (see
+        // `_locateOrCreateAnchorNode`).
+        lContainer = createLContainer(slotValue, hostLView, null, hostTNode);
+        hostLView[hostTNode.index] = lContainer;
+        addToViewTree(hostLView, lContainer);
+    }
+    _locateOrCreateAnchorNode(lContainer, hostLView, hostTNode, slotValue);
+    return new R3ViewContainerRef(lContainer, hostTNode, hostLView);
+}
+/**
+ * Creates and inserts a comment node that acts as an anchor for a view container.
+ *
+ * If the host is a regular element, we have to insert a comment node manually which will
+ * be used as an anchor when inserting elements. In this specific case we use low-level DOM
+ * manipulation to insert it.
+ */
+function insertAnchorNode(hostLView, hostTNode) {
+    const renderer = hostLView[RENDERER];
+    ngDevMode && ngDevMode.rendererCreateComment++;
+    const commentNode = renderer.createComment(ngDevMode ? 'container' : '');
+    const hostNative = getNativeByTNode(hostTNode, hostLView);
+    const parentOfHostNative = nativeParentNode(renderer, hostNative);
+    nativeInsertBefore(renderer, parentOfHostNative, commentNode, nativeNextSibling(renderer, hostNative), false);
+    return commentNode;
+}
+let _locateOrCreateAnchorNode = createAnchorNode;
+let _populateDehydratedViewsInContainer = (lContainer, lView, tNode) => false; // noop by default
+/**
+ * Looks up dehydrated views that belong to a given LContainer and populates
+ * this information into the `LContainer[DEHYDRATED_VIEWS]` slot. When running
+ * in client-only mode, this function is a noop.
+ *
+ * @param lContainer LContainer that should be populated.
+ * @returns a boolean flag that indicates whether a populating operation
+ *   was successful. The operation might be unsuccessful in case is has completed
+ *   previously, we are rendering in client-only mode or this content is located
+ *   in a skip hydration section.
+ */
+function populateDehydratedViewsInContainer(lContainer) {
+    return _populateDehydratedViewsInContainer(lContainer, getLView(), getCurrentTNode());
+}
+/**
+ * Regular creation mode: an anchor is created and
+ * assigned to the `lContainer[NATIVE]` slot.
+ */
+function createAnchorNode(lContainer, hostLView, hostTNode, slotValue) {
+    // We already have a native element (anchor) set, return.
+    if (lContainer[NATIVE])
+        return;
+    let commentNode;
+    // If the host is an element container, the native host element is guaranteed to be a
+    // comment and we can reuse that comment as anchor element for the new LContainer.
+    // The comment node in question is already part of the DOM structure so we don't need to append
+    // it again.
+    if (hostTNode.type & 8 /* TNodeType.ElementContainer */) {
+        commentNode = unwrapRNode(slotValue);
+    }
+    else {
+        commentNode = insertAnchorNode(hostLView, hostTNode);
+    }
+    lContainer[NATIVE] = commentNode;
+}
+/**
+ * Hydration logic that looks up all dehydrated views in this container
+ * and puts them into `lContainer[DEHYDRATED_VIEWS]` slot.
+ *
+ * @returns a boolean flag that indicates whether a populating operation
+ *   was successful. The operation might be unsuccessful in case is has completed
+ *   previously, we are rendering in client-only mode or this content is located
+ *   in a skip hydration section.
+ */
+function populateDehydratedViewsInContainerImpl(lContainer, hostLView, hostTNode) {
+    // We already have a native element (anchor) set and the process
+    // of finding dehydrated views happened (so the `lContainer[DEHYDRATED_VIEWS]`
+    // is not null), exit early.
+    if (lContainer[NATIVE] && lContainer[DEHYDRATED_VIEWS]) {
+        return true;
+    }
+    const hydrationInfo = hostLView[HYDRATION];
+    const noOffsetIndex = hostTNode.index - HEADER_OFFSET;
+    // TODO(akushnir): this should really be a single condition, refactor the code
+    // to use `hasInSkipHydrationBlockFlag` logic inside `isInSkipHydrationBlock`.
+    const skipHydration = isInSkipHydrationBlock(hostTNode) || hasInSkipHydrationBlockFlag(hostTNode);
+    const isNodeCreationMode = !hydrationInfo || skipHydration || isDisconnectedNode$1(hydrationInfo, noOffsetIndex);
+    // Regular creation mode.
+    if (isNodeCreationMode) {
+        return false;
+    }
+    // Hydration mode, looking up an anchor node and dehydrated views in DOM.
+    const currentRNode = getSegmentHead(hydrationInfo, noOffsetIndex);
+    const serializedViews = hydrationInfo.data[CONTAINERS]?.[noOffsetIndex];
+    ngDevMode &&
+        assertDefined(serializedViews, 'Unexpected state: no hydration info available for a given TNode, ' +
+            'which represents a view container.');
+    const [commentNode, dehydratedViews] = locateDehydratedViewsInContainer(currentRNode, serializedViews);
+    if (ngDevMode) {
+        validateMatchingNode(commentNode, Node.COMMENT_NODE, null, hostLView, hostTNode, true);
+        // Do not throw in case this node is already claimed (thus `false` as a second
+        // argument). If this container is created based on an `<ng-template>`, the comment
+        // node would be already claimed from the `template` instruction. If an element acts
+        // as an anchor (e.g. <div #vcRef>), a separate comment node would be created/located,
+        // so we need to claim it here.
+        markRNodeAsClaimedByHydration(commentNode, false);
+    }
+    lContainer[NATIVE] = commentNode;
+    lContainer[DEHYDRATED_VIEWS] = dehydratedViews;
+    return true;
+}
+function locateOrCreateAnchorNode(lContainer, hostLView, hostTNode, slotValue) {
+    if (!_populateDehydratedViewsInContainer(lContainer, hostLView, hostTNode)) {
+        // Populating dehydrated views operation returned `false`, which indicates
+        // that the logic was running in client-only mode, this an anchor comment
+        // node should be created for this container.
+        createAnchorNode(lContainer, hostLView, hostTNode, slotValue);
+    }
+}
+function enableLocateOrCreateContainerRefImpl() {
+    _locateOrCreateAnchorNode = locateOrCreateAnchorNode;
+    _populateDehydratedViewsInContainer = populateDehydratedViewsInContainerImpl;
+}
+
+const DEFER_BLOCK_STATE = 0;
+
+/**
+ * Returns whether defer blocks should be triggered.
+ *
+ * Currently, defer blocks are not triggered on the server,
+ * only placeholder content is rendered (if provided).
+ */
+function shouldTriggerDeferBlock(injector) {
+    return isPlatformBrowser(injector);
+}
+/**
+ * Shims for the `requestIdleCallback` and `cancelIdleCallback` functions for environments
+ * where those functions are not available (e.g. Node.js).
+ */
+const _requestIdleCallback = typeof requestIdleCallback !== 'undefined' ? requestIdleCallback : setTimeout;
+const _cancelIdleCallback = typeof requestIdleCallback !== 'undefined' ? cancelIdleCallback : clearTimeout;
+/**
+ * Creates runtime data structures for `{#defer}` blocks.
+ *
+ * @param index Index of the `defer` instruction.
+ * @param primaryTmplIndex Index of the template with the primary block content.
+ * @param dependencyResolverFn Function that contains dependencies for this defer block.
+ * @param loadingTmplIndex Index of the template with the `{:loading}` block content.
+ * @param placeholderTmplIndex Index of the template with the `{:placeholder}` block content.
+ * @param errorTmplIndex Index of the template with the `{:error}` block content.
+ * @param loadingConfigIndex Index in the constants array of the configuration of the `{:loading}`.
+ *     block.
+ * @param placeholderConfigIndexIndex in the constants array of the configuration of the
+ *     `{:placeholder}` block.
+ *
+ * @codeGenApi
+ */
+function ɵɵdefer(index, primaryTmplIndex, dependencyResolverFn, loadingTmplIndex, placeholderTmplIndex, errorTmplIndex, loadingConfigIndex, placeholderConfigIndex) {
+    const lView = getLView();
+    const tView = getTView();
+    const tViewConsts = tView.consts;
+    const adjustedIndex = index + HEADER_OFFSET;
+    ɵɵtemplate(index, null, 0, 0);
+    if (tView.firstCreatePass) {
+        const deferBlockConfig = {
+            primaryTmplIndex,
+            loadingTmplIndex: loadingTmplIndex ?? null,
+            placeholderTmplIndex: placeholderTmplIndex ?? null,
+            errorTmplIndex: errorTmplIndex ?? null,
+            placeholderBlockConfig: placeholderConfigIndex != null ?
+                getConstant(tViewConsts, placeholderConfigIndex) :
+                null,
+            loadingBlockConfig: loadingConfigIndex != null ?
+                getConstant(tViewConsts, loadingConfigIndex) :
+                null,
+            dependencyResolverFn: dependencyResolverFn ?? null,
+            loadingState: 0 /* DeferDependenciesLoadingState.NOT_STARTED */,
+            loadingPromise: null,
+        };
+        setTDeferBlockDetails(tView, adjustedIndex, deferBlockConfig);
+    }
+    // Lookup dehydrated views that belong to this LContainer.
+    // In client-only mode, this operation is noop.
+    const lContainer = lView[adjustedIndex];
+    populateDehydratedViewsInContainer(lContainer);
+    // Init instance-specific defer details and store it.
+    const lDetails = [];
+    lDetails[DEFER_BLOCK_STATE] = 0 /* DeferBlockInstanceState.INITIAL */;
+    setLDeferBlockDetails(lView, adjustedIndex, lDetails);
+}
+/**
+ * Loads defer block dependencies when a trigger value becomes truthy.
+ * @codeGenApi
+ */
+function ɵɵdeferWhen(rawValue) {
+    const lView = getLView();
+    const bindingIndex = nextBindingIndex();
+    if (bindingUpdated(lView, bindingIndex, rawValue)) {
+        const value = Boolean(rawValue); // handle truthy or falsy values
+        const tNode = getSelectedTNode();
+        const lDetails = getLDeferBlockDetails(lView, tNode);
+        const renderedState = lDetails[DEFER_BLOCK_STATE];
+        if (value === false && renderedState === 0 /* DeferBlockInstanceState.INITIAL */) {
+            // If nothing is rendered yet, render a placeholder (if defined).
+            renderPlaceholder(lView, tNode);
+        }
+        else if (value === true &&
+            (renderedState === 0 /* DeferBlockInstanceState.INITIAL */ ||
+                renderedState === 1 /* DeferBlockInstanceState.PLACEHOLDER */)) {
+            // The `when` condition has changed to `true`, trigger defer block loading
+            // if the block is either in initial (nothing is rendered) or a placeholder
+            // state.
+            triggerDeferBlock(lView, tNode);
+        }
+    }
+}
+/**
+ * Prefetches the deferred content when a value becomes truthy.
+ * @codeGenApi
+ */
+function ɵɵdeferPrefetchWhen(rawValue) {
+    const lView = getLView();
+    const bindingIndex = nextBindingIndex();
+    if (bindingUpdated(lView, bindingIndex, rawValue)) {
+        const value = Boolean(rawValue); // handle truthy or falsy values
+        const tView = lView[TVIEW];
+        const tNode = getSelectedTNode();
+        const tDetails = getTDeferBlockDetails(tView, tNode);
+        if (value === true && tDetails.loadingState === 0 /* DeferDependenciesLoadingState.NOT_STARTED */) {
+            // If loading has not been started yet, trigger it now.
+            triggerResourceLoading(tDetails, tView, lView);
+        }
+    }
+}
+/**
+ * Sets up handlers that represent `on idle` deferred trigger.
+ * @codeGenApi
+ */
+function ɵɵdeferOnIdle() {
+    const lView = getLView();
+    const tNode = getCurrentTNode();
+    renderPlaceholder(lView, tNode);
+    // Note: we pass an `lView` as a second argument to cancel an `idle`
+    // callback in case an LView got destroyed before an `idle` callback
+    // is invoked.
+    onIdle(() => triggerDeferBlock(lView, tNode), lView);
+}
+/**
+ * Creates runtime data structures for the `prefetch on idle` deferred trigger.
+ * @codeGenApi
+ */
+function ɵɵdeferPrefetchOnIdle() {
+    const lView = getLView();
+    const tNode = getCurrentTNode();
+    const tView = lView[TVIEW];
+    const tDetails = getTDeferBlockDetails(tView, tNode);
+    if (tDetails.loadingState === 0 /* DeferDependenciesLoadingState.NOT_STARTED */) {
+        // Set loading to the scheduled state, so that we don't register it again.
+        tDetails.loadingState = 1 /* DeferDependenciesLoadingState.SCHEDULED */;
+        // In case of prefetching, we intentionally avoid cancelling prefetching if
+        // an underlying LView get destroyed (thus passing `null` as a second argument),
+        // because there might be other LViews (that represent embedded views) that
+        // depend on resource loading.
+        onIdle(() => triggerResourceLoading(tDetails, tView, lView), null /* LView */);
+    }
+}
+/**
+ * Creates runtime data structures for the `on immediate` deferred trigger.
+ * @codeGenApi
+ */
+function ɵɵdeferOnImmediate() { } // TODO: implement runtime logic.
+/**
+ * Creates runtime data structures for the `prefetch on immediate` deferred trigger.
+ * @codeGenApi
+ */
+function ɵɵdeferPrefetchOnImmediate() { } // TODO: implement runtime logic.
+/**
+ * Creates runtime data structures for the `on timer` deferred trigger.
  * @param delay Amount of time to wait before loading the content.
  * @codeGenApi
  */
@@ -19836,6 +20480,35 @@ function ɵɵdeferOnViewport(target) { } // TODO: implement runtime logic.
  */
 function ɵɵdeferPrefetchOnViewport(target) { } // TODO: implement runtime logic.
 /********** Helper functions **********/
+/**
+ * Helper function to schedule a callback to be invoked when a browser becomes idle.
+ *
+ * @param callback A function to be invoked when a browser becomes idle.
+ * @param lView An optional LView that hosts an instance of a defer block. LView is
+ *    used to register a cleanup callback in case that LView got destroyed before
+ *    callback was invoked. In this case, an `idle` callback is never invoked. This is
+ *    helpful for cases when a defer block has scheduled rendering, but an underlying
+ *    LView got destroyed prior to th block rendering.
+ */
+function onIdle(callback, lView) {
+    let id;
+    const removeIdleCallback = () => _cancelIdleCallback(id);
+    id = _requestIdleCallback(() => {
+        removeIdleCallback();
+        if (lView !== null) {
+            // The idle callback is invoked, we no longer need
+            // to retain a cleanup callback in an LView.
+            removeLViewOnDestroy(lView, removeIdleCallback);
+        }
+        callback();
+    });
+    if (lView !== null) {
+        // Store a cleanup function on LView, so that we cancel idle
+        // callback in case this LView is destroyed before a callback
+        // is invoked.
+        storeLViewOnDestroy(lView, removeIdleCallback);
+    }
+}
 /**
  * Calculates a data slot index for defer block info (either static or
  * instance-specific), given an index of a defer instruction.
@@ -19903,27 +20576,31 @@ function renderDeferBlockState(newState, tNode, lContainer, stateTmplIndex) {
         // represents a `{#defer}` block, so always refer to the first one.
         const viewIndex = 0;
         removeLViewFromLContainer(lContainer, viewIndex);
-        const embeddedLView = createAndRenderEmbeddedLView(hostLView, tNode, null);
-        addLViewToLContainer(lContainer, embeddedLView, viewIndex);
+        const dehydratedView = findMatchingDehydratedView(lContainer, tNode.tView.ssrId);
+        const embeddedLView = createAndRenderEmbeddedLView(hostLView, tNode, null, { dehydratedView });
+        addLViewToLContainer(lContainer, embeddedLView, viewIndex, shouldAddViewToDom(tNode, dehydratedView));
     }
 }
 /**
  * Trigger loading of defer block dependencies if the process hasn't started yet.
  *
  * @param tDetails Static information about this defer block.
- * @param primaryBlockTNode TNode of a primary block template.
- * @param injector Environment injector of the application.
+ * @param tView TView of a host view.
+ * @param lView LView of a host view.
  */
-function triggerResourceLoading(tDetails, primaryBlockTNode, injector) {
-    const tView = primaryBlockTNode.tView;
-    if (tDetails.loadingState !== 0 /* DeferDependenciesLoadingState.NOT_STARTED */) {
+function triggerResourceLoading(tDetails, tView, lView) {
+    const injector = lView[INJECTOR$1];
+    if (!shouldTriggerDeferBlock(injector) ||
+        (tDetails.loadingState !== 0 /* DeferDependenciesLoadingState.NOT_STARTED */ &&
+            tDetails.loadingState !== 1 /* DeferDependenciesLoadingState.SCHEDULED */)) {
         // If the loading status is different from initial one, it means that
         // the loading of dependencies is in progress and there is nothing to do
         // in this function. All details can be obtained from the `tDetails` object.
         return;
     }
+    const primaryBlockTNode = getPrimaryBlockTNode(tView, tDetails);
     // Switch from NOT_STARTED -> IN_PROGRESS state.
-    tDetails.loadingState = 1 /* DeferDependenciesLoadingState.IN_PROGRESS */;
+    tDetails.loadingState = 2 /* DeferDependenciesLoadingState.IN_PROGRESS */;
     // Check if dependency function interceptor is configured.
     const deferDependencyInterceptor = injector.get(DEFER_BLOCK_DEPENDENCY_INTERCEPTOR, null, { optional: true });
     const dependenciesFn = deferDependencyInterceptor ?
@@ -19934,7 +20611,7 @@ function triggerResourceLoading(tDetails, primaryBlockTNode, injector) {
     // thus no dynamic `import()`s were produced.
     if (!dependenciesFn) {
         tDetails.loadingPromise = Promise.resolve().then(() => {
-            tDetails.loadingState = 2 /* DeferDependenciesLoadingState.COMPLETE */;
+            tDetails.loadingState = 3 /* DeferDependenciesLoadingState.COMPLETE */;
         });
         return;
     }
@@ -19965,18 +20642,21 @@ function triggerResourceLoading(tDetails, primaryBlockTNode, injector) {
         // Loading is completed, we no longer need this Promise.
         tDetails.loadingPromise = null;
         if (failed) {
-            tDetails.loadingState = 3 /* DeferDependenciesLoadingState.FAILED */;
+            tDetails.loadingState = 4 /* DeferDependenciesLoadingState.FAILED */;
         }
         else {
-            tDetails.loadingState = 2 /* DeferDependenciesLoadingState.COMPLETE */;
+            tDetails.loadingState = 3 /* DeferDependenciesLoadingState.COMPLETE */;
             // Update directive and pipe registries to add newly downloaded dependencies.
+            const primaryBlockTView = primaryBlockTNode.tView;
             if (directiveDefs.length > 0) {
-                tView.directiveRegistry = tView.directiveRegistry ?
-                    [...tView.directiveRegistry, ...directiveDefs] :
+                primaryBlockTView.directiveRegistry = primaryBlockTView.directiveRegistry ?
+                    [...primaryBlockTView.directiveRegistry, ...directiveDefs] :
                     directiveDefs;
             }
             if (pipeDefs.length > 0) {
-                tView.pipeRegistry = tView.pipeRegistry ? [...tView.pipeRegistry, ...pipeDefs] : pipeDefs;
+                primaryBlockTView.pipeRegistry = primaryBlockTView.pipeRegistry ?
+                    [...primaryBlockTView.pipeRegistry, ...pipeDefs] :
+                    pipeDefs;
             }
         }
     });
@@ -20000,12 +20680,12 @@ function renderDeferStateAfterResourceLoading(tDetails, tNode, lContainer) {
     ngDevMode &&
         assertDefined(tDetails.loadingPromise, 'Expected loading Promise to exist on this defer block');
     tDetails.loadingPromise.then(() => {
-        if (tDetails.loadingState === 2 /* DeferDependenciesLoadingState.COMPLETE */) {
+        if (tDetails.loadingState === 3 /* DeferDependenciesLoadingState.COMPLETE */) {
             ngDevMode && assertDeferredDependenciesLoaded(tDetails);
             // Everything is loaded, show the primary block content
             renderDeferBlockState(3 /* DeferBlockInstanceState.COMPLETE */, tNode, lContainer, tDetails.primaryTmplIndex);
         }
-        else if (tDetails.loadingState === 3 /* DeferDependenciesLoadingState.FAILED */) {
+        else if (tDetails.loadingState === 4 /* DeferDependenciesLoadingState.FAILED */) {
             renderDeferBlockState(4 /* DeferBlockInstanceState.ERROR */, tNode, lContainer, tDetails.errorTmplIndex);
         }
     });
@@ -20023,28 +20703,32 @@ function getPrimaryBlockTNode(tView, tDetails) {
 function triggerDeferBlock(lView, tNode) {
     const tView = lView[TVIEW];
     const lContainer = lView[tNode.index];
+    const injector = lView[INJECTOR$1];
     ngDevMode && assertLContainer(lContainer);
+    if (!shouldTriggerDeferBlock(injector))
+        return;
     const tDetails = getTDeferBlockDetails(tView, tNode);
     // Condition is triggered, try to render loading state and start downloading.
     // Note: if a block is in a loading, completed or an error state, this call would be a noop.
     renderDeferBlockState(2 /* DeferBlockInstanceState.LOADING */, tNode, lContainer, tDetails.loadingTmplIndex);
     switch (tDetails.loadingState) {
         case 0 /* DeferDependenciesLoadingState.NOT_STARTED */:
-            triggerResourceLoading(tDetails, getPrimaryBlockTNode(lView[TVIEW], tDetails), lView[INJECTOR$1]);
+        case 1 /* DeferDependenciesLoadingState.SCHEDULED */:
+            triggerResourceLoading(tDetails, lView[TVIEW], lView);
             // The `loadingState` might have changed to "loading".
             if (tDetails.loadingState ===
-                1 /* DeferDependenciesLoadingState.IN_PROGRESS */) {
+                2 /* DeferDependenciesLoadingState.IN_PROGRESS */) {
                 renderDeferStateAfterResourceLoading(tDetails, tNode, lContainer);
             }
             break;
-        case 1 /* DeferDependenciesLoadingState.IN_PROGRESS */:
+        case 2 /* DeferDependenciesLoadingState.IN_PROGRESS */:
             renderDeferStateAfterResourceLoading(tDetails, tNode, lContainer);
             break;
-        case 2 /* DeferDependenciesLoadingState.COMPLETE */:
+        case 3 /* DeferDependenciesLoadingState.COMPLETE */:
             ngDevMode && assertDeferredDependenciesLoaded(tDetails);
             renderDeferBlockState(3 /* DeferBlockInstanceState.COMPLETE */, tNode, lContainer, tDetails.primaryTmplIndex);
             break;
-        case 3 /* DeferDependenciesLoadingState.FAILED */:
+        case 4 /* DeferDependenciesLoadingState.FAILED */:
             renderDeferBlockState(4 /* DeferBlockInstanceState.ERROR */, tNode, lContainer, tDetails.errorTmplIndex);
             break;
         default:
@@ -20059,7 +20743,7 @@ function triggerDeferBlock(lView, tNode) {
  * block in completed state.
  */
 function assertDeferredDependenciesLoaded(tDetails) {
-    assertEqual(tDetails.loadingState, 2 /* DeferDependenciesLoadingState.COMPLETE */, 'Expecting all deferred dependencies to be loaded.');
+    assertEqual(tDetails.loadingState, 3 /* DeferDependenciesLoadingState.COMPLETE */, 'Expecting all deferred dependencies to be loaded.');
 }
 /**
  * **INTERNAL**, avoid referencing it in application code.
@@ -25363,265 +26047,55 @@ function setClassMetadata(type, decorators, ctorParameters, propDecorators) {
  * If the value hasn't been saved, calls the pure function to store and return the
  * value. If it has been saved, returns the saved value.
  *
- * @param slotOffset the offset from binding root to the reserved slot
- * @param pureFn Function that returns a value
- * @param thisArg Optional calling context of pureFn
- * @returns value
- *
- * @codeGenApi
- */
-function ɵɵpureFunction0(slotOffset, pureFn, thisArg) {
-    const bindingIndex = getBindingRoot() + slotOffset;
-    const lView = getLView();
-    return lView[bindingIndex] === NO_CHANGE ?
-        updateBinding(lView, bindingIndex, thisArg ? pureFn.call(thisArg) : pureFn()) :
-        getBinding(lView, bindingIndex);
-}
-/**
- * If the value of the provided exp has changed, calls the pure function to return
- * an updated value. Or if the value has not changed, returns cached value.
- *
- * @param slotOffset the offset from binding root to the reserved slot
- * @param pureFn Function that returns an updated value
- * @param exp Updated expression value
- * @param thisArg Optional calling context of pureFn
- * @returns Updated or cached value
- *
- * @codeGenApi
- */
-function ɵɵpureFunction1(slotOffset, pureFn, exp, thisArg) {
-    return pureFunction1Internal(getLView(), getBindingRoot(), slotOffset, pureFn, exp, thisArg);
-}
-/**
- * If the value of any provided exp has changed, calls the pure function to return
- * an updated value. Or if no values have changed, returns cached value.
- *
- * @param slotOffset the offset from binding root to the reserved slot
- * @param pureFn
- * @param exp1
- * @param exp2
- * @param thisArg Optional calling context of pureFn
- * @returns Updated or cached value
- *
- * @codeGenApi
- */
-function ɵɵpureFunction2(slotOffset, pureFn, exp1, exp2, thisArg) {
-    return pureFunction2Internal(getLView(), getBindingRoot(), slotOffset, pureFn, exp1, exp2, thisArg);
-}
-/**
- * If the value of any provided exp has changed, calls the pure function to return
- * an updated value. Or if no values have changed, returns cached value.
- *
- * @param slotOffset the offset from binding root to the reserved slot
- * @param pureFn
- * @param exp1
- * @param exp2
- * @param exp3
- * @param thisArg Optional calling context of pureFn
- * @returns Updated or cached value
- *
- * @codeGenApi
- */
-function ɵɵpureFunction3(slotOffset, pureFn, exp1, exp2, exp3, thisArg) {
-    return pureFunction3Internal(getLView(), getBindingRoot(), slotOffset, pureFn, exp1, exp2, exp3, thisArg);
-}
-/**
- * If the value of any provided exp has changed, calls the pure function to return
- * an updated value. Or if no values have changed, returns cached value.
- *
- * @param slotOffset the offset from binding root to the reserved slot
- * @param pureFn
- * @param exp1
- * @param exp2
- * @param exp3
- * @param exp4
- * @param thisArg Optional calling context of pureFn
- * @returns Updated or cached value
- *
- * @codeGenApi
- */
-function ɵɵpureFunction4(slotOffset, pureFn, exp1, exp2, exp3, exp4, thisArg) {
-    return pureFunction4Internal(getLView(), getBindingRoot(), slotOffset, pureFn, exp1, exp2, exp3, exp4, thisArg);
-}
-/**
- * If the value of any provided exp has changed, calls the pure function to return
- * an updated value. Or if no values have changed, returns cached value.
- *
- * @param slotOffset the offset from binding root to the reserved slot
- * @param pureFn
- * @param exp1
- * @param exp2
- * @param exp3
- * @param exp4
- * @param exp5
- * @param thisArg Optional calling context of pureFn
- * @returns Updated or cached value
- *
- * @codeGenApi
- */
-function ɵɵpureFunction5(slotOffset, pureFn, exp1, exp2, exp3, exp4, exp5, thisArg) {
-    const bindingIndex = getBindingRoot() + slotOffset;
-    const lView = getLView();
-    const different = bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4);
-    return bindingUpdated(lView, bindingIndex + 4, exp5) || different ?
-        updateBinding(lView, bindingIndex + 5, thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5) :
-            pureFn(exp1, exp2, exp3, exp4, exp5)) :
-        getBinding(lView, bindingIndex + 5);
-}
-/**
- * If the value of any provided exp has changed, calls the pure function to return
- * an updated value. Or if no values have changed, returns cached value.
- *
- * @param slotOffset the offset from binding root to the reserved slot
- * @param pureFn
- * @param exp1
- * @param exp2
- * @param exp3
- * @param exp4
- * @param exp5
- * @param exp6
- * @param thisArg Optional calling context of pureFn
- * @returns Updated or cached value
- *
- * @codeGenApi
- */
-function ɵɵpureFunction6(slotOffset, pureFn, exp1, exp2, exp3, exp4, exp5, exp6, thisArg) {
-    const bindingIndex = getBindingRoot() + slotOffset;
-    const lView = getLView();
-    const different = bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4);
-    return bindingUpdated2(lView, bindingIndex + 4, exp5, exp6) || different ?
-        updateBinding(lView, bindingIndex + 6, thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6) :
-            pureFn(exp1, exp2, exp3, exp4, exp5, exp6)) :
-        getBinding(lView, bindingIndex + 6);
-}
-/**
- * If the value of any provided exp has changed, calls the pure function to return
- * an updated value. Or if no values have changed, returns cached value.
- *
- * @param slotOffset the offset from binding root to the reserved slot
- * @param pureFn
- * @param exp1
- * @param exp2
- * @param exp3
- * @param exp4
- * @param exp5
- * @param exp6
- * @param exp7
- * @param thisArg Optional calling context of pureFn
- * @returns Updated or cached value
- *
- * @codeGenApi
- */
-function ɵɵpureFunction7(slotOffset, pureFn, exp1, exp2, exp3, exp4, exp5, exp6, exp7, thisArg) {
-    const bindingIndex = getBindingRoot() + slotOffset;
-    const lView = getLView();
-    let different = bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4);
-    return bindingUpdated3(lView, bindingIndex + 4, exp5, exp6, exp7) || different ?
-        updateBinding(lView, bindingIndex + 7, thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6, exp7) :
-            pureFn(exp1, exp2, exp3, exp4, exp5, exp6, exp7)) :
-        getBinding(lView, bindingIndex + 7);
-}
-/**
- * If the value of any provided exp has changed, calls the pure function to return
- * an updated value. Or if no values have changed, returns cached value.
- *
- * @param slotOffset the offset from binding root to the reserved slot
- * @param pureFn
- * @param exp1
- * @param exp2
- * @param exp3
- * @param exp4
- * @param exp5
- * @param exp6
- * @param exp7
- * @param exp8
- * @param thisArg Optional calling context of pureFn
- * @returns Updated or cached value
- *
- * @codeGenApi
- */
-function ɵɵpureFunction8(slotOffset, pureFn, exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8, thisArg) {
-    const bindingIndex = getBindingRoot() + slotOffset;
-    const lView = getLView();
-    const different = bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4);
-    return bindingUpdated4(lView, bindingIndex + 4, exp5, exp6, exp7, exp8) || different ?
-        updateBinding(lView, bindingIndex + 8, thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8) :
-            pureFn(exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8)) :
-        getBinding(lView, bindingIndex + 8);
-}
-/**
- * pureFunction instruction that can support any number of bindings.
- *
- * If the value of any provided exp has changed, calls the pure function to return
- * an updated value. Or if no values have changed, returns cached value.
- *
- * @param slotOffset the offset from binding root to the reserved slot
- * @param pureFn A pure function that takes binding values and builds an object or array
- * containing those values.
- * @param exps An array of binding values
+ * @param slotOffset the offset from binding root to the reserved slot
+ * @param pureFn Function that returns a value
  * @param thisArg Optional calling context of pureFn
- * @returns Updated or cached value
+ * @returns value
  *
  * @codeGenApi
  */
-function ɵɵpureFunctionV(slotOffset, pureFn, exps, thisArg) {
-    return pureFunctionVInternal(getLView(), getBindingRoot(), slotOffset, pureFn, exps, thisArg);
-}
-/**
- * Results of a pure function invocation are stored in LView in a dedicated slot that is initialized
- * to NO_CHANGE. In rare situations a pure pipe might throw an exception on the very first
- * invocation and not produce any valid results. In this case LView would keep holding the NO_CHANGE
- * value. The NO_CHANGE is not something that we can use in expressions / bindings thus we convert
- * it to `undefined`.
- */
-function getPureFunctionReturnValue(lView, returnValueIndex) {
-    ngDevMode && assertIndexInRange(lView, returnValueIndex);
-    const lastReturnValue = lView[returnValueIndex];
-    return lastReturnValue === NO_CHANGE ? undefined : lastReturnValue;
+function ɵɵpureFunction0(slotOffset, pureFn, thisArg) {
+    const bindingIndex = getBindingRoot() + slotOffset;
+    const lView = getLView();
+    return lView[bindingIndex] === NO_CHANGE ?
+        updateBinding(lView, bindingIndex, thisArg ? pureFn.call(thisArg) : pureFn()) :
+        getBinding(lView, bindingIndex);
 }
 /**
  * If the value of the provided exp has changed, calls the pure function to return
  * an updated value. Or if the value has not changed, returns cached value.
  *
- * @param lView LView in which the function is being executed.
- * @param bindingRoot Binding root index.
  * @param slotOffset the offset from binding root to the reserved slot
  * @param pureFn Function that returns an updated value
  * @param exp Updated expression value
  * @param thisArg Optional calling context of pureFn
  * @returns Updated or cached value
+ *
+ * @codeGenApi
  */
-function pureFunction1Internal(lView, bindingRoot, slotOffset, pureFn, exp, thisArg) {
-    const bindingIndex = bindingRoot + slotOffset;
-    return bindingUpdated(lView, bindingIndex, exp) ?
-        updateBinding(lView, bindingIndex + 1, thisArg ? pureFn.call(thisArg, exp) : pureFn(exp)) :
-        getPureFunctionReturnValue(lView, bindingIndex + 1);
+function ɵɵpureFunction1(slotOffset, pureFn, exp, thisArg) {
+    return pureFunction1Internal(getLView(), getBindingRoot(), slotOffset, pureFn, exp, thisArg);
 }
 /**
  * If the value of any provided exp has changed, calls the pure function to return
  * an updated value. Or if no values have changed, returns cached value.
  *
- * @param lView LView in which the function is being executed.
- * @param bindingRoot Binding root index.
  * @param slotOffset the offset from binding root to the reserved slot
  * @param pureFn
  * @param exp1
  * @param exp2
  * @param thisArg Optional calling context of pureFn
  * @returns Updated or cached value
+ *
+ * @codeGenApi
  */
-function pureFunction2Internal(lView, bindingRoot, slotOffset, pureFn, exp1, exp2, thisArg) {
-    const bindingIndex = bindingRoot + slotOffset;
-    return bindingUpdated2(lView, bindingIndex, exp1, exp2) ?
-        updateBinding(lView, bindingIndex + 2, thisArg ? pureFn.call(thisArg, exp1, exp2) : pureFn(exp1, exp2)) :
-        getPureFunctionReturnValue(lView, bindingIndex + 2);
+function ɵɵpureFunction2(slotOffset, pureFn, exp1, exp2, thisArg) {
+    return pureFunction2Internal(getLView(), getBindingRoot(), slotOffset, pureFn, exp1, exp2, thisArg);
 }
 /**
  * If the value of any provided exp has changed, calls the pure function to return
  * an updated value. Or if no values have changed, returns cached value.
  *
- * @param lView LView in which the function is being executed.
- * @param bindingRoot Binding root index.
  * @param slotOffset the offset from binding root to the reserved slot
  * @param pureFn
  * @param exp1
@@ -25629,19 +26103,16 @@ function pureFunction2Internal(lView, bindingRoot, slotOffset, pureFn, exp1, exp
  * @param exp3
  * @param thisArg Optional calling context of pureFn
  * @returns Updated or cached value
+ *
+ * @codeGenApi
  */
-function pureFunction3Internal(lView, bindingRoot, slotOffset, pureFn, exp1, exp2, exp3, thisArg) {
-    const bindingIndex = bindingRoot + slotOffset;
-    return bindingUpdated3(lView, bindingIndex, exp1, exp2, exp3) ?
-        updateBinding(lView, bindingIndex + 3, thisArg ? pureFn.call(thisArg, exp1, exp2, exp3) : pureFn(exp1, exp2, exp3)) :
-        getPureFunctionReturnValue(lView, bindingIndex + 3);
+function ɵɵpureFunction3(slotOffset, pureFn, exp1, exp2, exp3, thisArg) {
+    return pureFunction3Internal(getLView(), getBindingRoot(), slotOffset, pureFn, exp1, exp2, exp3, thisArg);
 }
 /**
  * If the value of any provided exp has changed, calls the pure function to return
  * an updated value. Or if no values have changed, returns cached value.
  *
- * @param lView LView in which the function is being executed.
- * @param bindingRoot Binding root index.
  * @param slotOffset the offset from binding root to the reserved slot
  * @param pureFn
  * @param exp1
@@ -25651,1017 +26122,704 @@ function pureFunction3Internal(lView, bindingRoot, slotOffset, pureFn, exp1, exp
  * @param thisArg Optional calling context of pureFn
  * @returns Updated or cached value
  *
- */
-function pureFunction4Internal(lView, bindingRoot, slotOffset, pureFn, exp1, exp2, exp3, exp4, thisArg) {
-    const bindingIndex = bindingRoot + slotOffset;
-    return bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4) ?
-        updateBinding(lView, bindingIndex + 4, thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4) : pureFn(exp1, exp2, exp3, exp4)) :
-        getPureFunctionReturnValue(lView, bindingIndex + 4);
-}
-/**
- * pureFunction instruction that can support any number of bindings.
- *
- * If the value of any provided exp has changed, calls the pure function to return
- * an updated value. Or if no values have changed, returns cached value.
- *
- * @param lView LView in which the function is being executed.
- * @param bindingRoot Binding root index.
- * @param slotOffset the offset from binding root to the reserved slot
- * @param pureFn A pure function that takes binding values and builds an object or array
- * containing those values.
- * @param exps An array of binding values
- * @param thisArg Optional calling context of pureFn
- * @returns Updated or cached value
- */
-function pureFunctionVInternal(lView, bindingRoot, slotOffset, pureFn, exps, thisArg) {
-    let bindingIndex = bindingRoot + slotOffset;
-    let different = false;
-    for (let i = 0; i < exps.length; i++) {
-        bindingUpdated(lView, bindingIndex++, exps[i]) && (different = true);
-    }
-    return different ? updateBinding(lView, bindingIndex, pureFn.apply(thisArg, exps)) :
-        getPureFunctionReturnValue(lView, bindingIndex);
-}
-
-/**
- * Create a pipe.
- *
- * @param index Pipe index where the pipe will be stored.
- * @param pipeName The name of the pipe
- * @returns T the instance of the pipe.
- *
- * @codeGenApi
- */
-function ɵɵpipe(index, pipeName) {
-    const tView = getTView();
-    let pipeDef;
-    const adjustedIndex = index + HEADER_OFFSET;
-    if (tView.firstCreatePass) {
-        // The `getPipeDef` throws if a pipe with a given name is not found
-        // (so we use non-null assertion below).
-        pipeDef = getPipeDef(pipeName, tView.pipeRegistry);
-        tView.data[adjustedIndex] = pipeDef;
-        if (pipeDef.onDestroy) {
-            (tView.destroyHooks ??= []).push(adjustedIndex, pipeDef.onDestroy);
-        }
-    }
-    else {
-        pipeDef = tView.data[adjustedIndex];
-    }
-    const pipeFactory = pipeDef.factory || (pipeDef.factory = getFactoryDef(pipeDef.type, true));
-    let previousInjectorProfilerContext;
-    if (ngDevMode) {
-        previousInjectorProfilerContext = setInjectorProfilerContext({
-            injector: new NodeInjector(getCurrentTNode(), getLView()),
-            token: pipeDef.type
-        });
-    }
-    const previousInjectImplementation = setInjectImplementation(ɵɵdirectiveInject);
-    try {
-        // DI for pipes is supposed to behave like directives when placed on a component
-        // host node, which means that we have to disable access to `viewProviders`.
-        const previousIncludeViewProviders = setIncludeViewProviders(false);
-        const pipeInstance = pipeFactory();
-        setIncludeViewProviders(previousIncludeViewProviders);
-        store(tView, getLView(), adjustedIndex, pipeInstance);
-        return pipeInstance;
-    }
-    finally {
-        // we have to restore the injector implementation in finally, just in case the creation of the
-        // pipe throws an error.
-        setInjectImplementation(previousInjectImplementation);
-        ngDevMode && setInjectorProfilerContext(previousInjectorProfilerContext);
-    }
-}
-/**
- * Searches the pipe registry for a pipe with the given name. If one is found,
- * returns the pipe. Otherwise, an error is thrown because the pipe cannot be resolved.
- *
- * @param name Name of pipe to resolve
- * @param registry Full list of available pipes
- * @returns Matching PipeDef
- */
-function getPipeDef(name, registry) {
-    if (registry) {
-        if (ngDevMode) {
-            const pipes = registry.filter(pipe => pipe.name === name);
-            // TODO: Throw an error in the next major
-            if (pipes.length > 1) {
-                console.warn(formatRuntimeError(313 /* RuntimeErrorCode.MULTIPLE_MATCHING_PIPES */, getMultipleMatchingPipesMessage(name)));
-            }
-        }
-        for (let i = registry.length - 1; i >= 0; i--) {
-            const pipeDef = registry[i];
-            if (name === pipeDef.name) {
-                return pipeDef;
-            }
-        }
-    }
-    if (ngDevMode) {
-        throw new RuntimeError(-302 /* RuntimeErrorCode.PIPE_NOT_FOUND */, getPipeNotFoundErrorMessage(name));
-    }
-}
-/**
- * Generates a helpful error message for the user when multiple pipes match the name.
- *
- * @param name Name of the pipe
- * @returns The error message
- */
-function getMultipleMatchingPipesMessage(name) {
-    const lView = getLView();
-    const declarationLView = lView[DECLARATION_COMPONENT_VIEW];
-    const context = declarationLView[CONTEXT];
-    const hostIsStandalone = isHostComponentStandalone(lView);
-    const componentInfoMessage = context ? ` in the '${context.constructor.name}' component` : '';
-    const verifyMessage = `check ${hostIsStandalone ? '\'@Component.imports\' of this component' :
-        'the imports of this module'}`;
-    const errorMessage = `Multiple pipes match the name \`${name}\`${componentInfoMessage}. ${verifyMessage}`;
-    return errorMessage;
-}
-/**
- * Generates a helpful error message for the user when a pipe is not found.
- *
- * @param name Name of the missing pipe
- * @returns The error message
- */
-function getPipeNotFoundErrorMessage(name) {
-    const lView = getLView();
-    const declarationLView = lView[DECLARATION_COMPONENT_VIEW];
-    const context = declarationLView[CONTEXT];
-    const hostIsStandalone = isHostComponentStandalone(lView);
-    const componentInfoMessage = context ? ` in the '${context.constructor.name}' component` : '';
-    const verifyMessage = `Verify that it is ${hostIsStandalone ? 'included in the \'@Component.imports\' of this component' :
-        'declared or imported in this module'}`;
-    const errorMessage = `The pipe '${name}' could not be found${componentInfoMessage}. ${verifyMessage}`;
-    return errorMessage;
-}
-/**
- * Invokes a pipe with 1 arguments.
- *
- * This instruction acts as a guard to {@link PipeTransform#transform} invoking
- * the pipe only when an input to the pipe changes.
- *
- * @param index Pipe index where the pipe was stored on creation.
- * @param slotOffset the offset in the reserved slot space
- * @param v1 1st argument to {@link PipeTransform#transform}.
- *
- * @codeGenApi
- */
-function ɵɵpipeBind1(index, slotOffset, v1) {
-    const adjustedIndex = index + HEADER_OFFSET;
-    const lView = getLView();
-    const pipeInstance = load(lView, adjustedIndex);
-    return isPure(lView, adjustedIndex) ?
-        pureFunction1Internal(lView, getBindingRoot(), slotOffset, pipeInstance.transform, v1, pipeInstance) :
-        pipeInstance.transform(v1);
-}
-/**
- * Invokes a pipe with 2 arguments.
- *
- * This instruction acts as a guard to {@link PipeTransform#transform} invoking
- * the pipe only when an input to the pipe changes.
- *
- * @param index Pipe index where the pipe was stored on creation.
- * @param slotOffset the offset in the reserved slot space
- * @param v1 1st argument to {@link PipeTransform#transform}.
- * @param v2 2nd argument to {@link PipeTransform#transform}.
- *
- * @codeGenApi
- */
-function ɵɵpipeBind2(index, slotOffset, v1, v2) {
-    const adjustedIndex = index + HEADER_OFFSET;
-    const lView = getLView();
-    const pipeInstance = load(lView, adjustedIndex);
-    return isPure(lView, adjustedIndex) ?
-        pureFunction2Internal(lView, getBindingRoot(), slotOffset, pipeInstance.transform, v1, v2, pipeInstance) :
-        pipeInstance.transform(v1, v2);
-}
-/**
- * Invokes a pipe with 3 arguments.
- *
- * This instruction acts as a guard to {@link PipeTransform#transform} invoking
- * the pipe only when an input to the pipe changes.
- *
- * @param index Pipe index where the pipe was stored on creation.
- * @param slotOffset the offset in the reserved slot space
- * @param v1 1st argument to {@link PipeTransform#transform}.
- * @param v2 2nd argument to {@link PipeTransform#transform}.
- * @param v3 4rd argument to {@link PipeTransform#transform}.
- *
  * @codeGenApi
  */
-function ɵɵpipeBind3(index, slotOffset, v1, v2, v3) {
-    const adjustedIndex = index + HEADER_OFFSET;
-    const lView = getLView();
-    const pipeInstance = load(lView, adjustedIndex);
-    return isPure(lView, adjustedIndex) ?
-        pureFunction3Internal(lView, getBindingRoot(), slotOffset, pipeInstance.transform, v1, v2, v3, pipeInstance) :
-        pipeInstance.transform(v1, v2, v3);
+function ɵɵpureFunction4(slotOffset, pureFn, exp1, exp2, exp3, exp4, thisArg) {
+    return pureFunction4Internal(getLView(), getBindingRoot(), slotOffset, pureFn, exp1, exp2, exp3, exp4, thisArg);
 }
 /**
- * Invokes a pipe with 4 arguments.
- *
- * This instruction acts as a guard to {@link PipeTransform#transform} invoking
- * the pipe only when an input to the pipe changes.
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
  *
- * @param index Pipe index where the pipe was stored on creation.
- * @param slotOffset the offset in the reserved slot space
- * @param v1 1st argument to {@link PipeTransform#transform}.
- * @param v2 2nd argument to {@link PipeTransform#transform}.
- * @param v3 3rd argument to {@link PipeTransform#transform}.
- * @param v4 4th argument to {@link PipeTransform#transform}.
+ * @param slotOffset the offset from binding root to the reserved slot
+ * @param pureFn
+ * @param exp1
+ * @param exp2
+ * @param exp3
+ * @param exp4
+ * @param exp5
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
  *
  * @codeGenApi
  */
-function ɵɵpipeBind4(index, slotOffset, v1, v2, v3, v4) {
-    const adjustedIndex = index + HEADER_OFFSET;
+function ɵɵpureFunction5(slotOffset, pureFn, exp1, exp2, exp3, exp4, exp5, thisArg) {
+    const bindingIndex = getBindingRoot() + slotOffset;
     const lView = getLView();
-    const pipeInstance = load(lView, adjustedIndex);
-    return isPure(lView, adjustedIndex) ? pureFunction4Internal(lView, getBindingRoot(), slotOffset, pipeInstance.transform, v1, v2, v3, v4, pipeInstance) :
-        pipeInstance.transform(v1, v2, v3, v4);
+    const different = bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4);
+    return bindingUpdated(lView, bindingIndex + 4, exp5) || different ?
+        updateBinding(lView, bindingIndex + 5, thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5) :
+            pureFn(exp1, exp2, exp3, exp4, exp5)) :
+        getBinding(lView, bindingIndex + 5);
 }
 /**
- * Invokes a pipe with variable number of arguments.
- *
- * This instruction acts as a guard to {@link PipeTransform#transform} invoking
- * the pipe only when an input to the pipe changes.
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
  *
- * @param index Pipe index where the pipe was stored on creation.
- * @param slotOffset the offset in the reserved slot space
- * @param values Array of arguments to pass to {@link PipeTransform#transform} method.
+ * @param slotOffset the offset from binding root to the reserved slot
+ * @param pureFn
+ * @param exp1
+ * @param exp2
+ * @param exp3
+ * @param exp4
+ * @param exp5
+ * @param exp6
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
  *
  * @codeGenApi
  */
-function ɵɵpipeBindV(index, slotOffset, values) {
-    const adjustedIndex = index + HEADER_OFFSET;
+function ɵɵpureFunction6(slotOffset, pureFn, exp1, exp2, exp3, exp4, exp5, exp6, thisArg) {
+    const bindingIndex = getBindingRoot() + slotOffset;
     const lView = getLView();
-    const pipeInstance = load(lView, adjustedIndex);
-    return isPure(lView, adjustedIndex) ?
-        pureFunctionVInternal(lView, getBindingRoot(), slotOffset, pipeInstance.transform, values, pipeInstance) :
-        pipeInstance.transform.apply(pipeInstance, values);
-}
-function isPure(lView, index) {
-    return lView[TVIEW].data[index].pure;
-}
-
-function symbolIterator() {
-    // @ts-expect-error accessing a private member
-    return this._results[Symbol.iterator]();
+    const different = bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4);
+    return bindingUpdated2(lView, bindingIndex + 4, exp5, exp6) || different ?
+        updateBinding(lView, bindingIndex + 6, thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6) :
+            pureFn(exp1, exp2, exp3, exp4, exp5, exp6)) :
+        getBinding(lView, bindingIndex + 6);
 }
 /**
- * An unmodifiable list of items that Angular keeps up to date when the state
- * of the application changes.
- *
- * The type of object that {@link ViewChildren}, {@link ContentChildren}, and {@link QueryList}
- * provide.
- *
- * Implements an iterable interface, therefore it can be used in both ES6
- * javascript `for (var i of items)` loops as well as in Angular templates with
- * `*ngFor="let i of myList"`.
- *
- * Changes can be observed by subscribing to the changes `Observable`.
- *
- * NOTE: In the future this class will implement an `Observable` interface.
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
  *
- * @usageNotes
- * ### Example
- * ```typescript
- * @Component({...})
- * class Container {
- *   @ViewChildren(Item) items:QueryList<Item>;
- * }
- * ```
+ * @param slotOffset the offset from binding root to the reserved slot
+ * @param pureFn
+ * @param exp1
+ * @param exp2
+ * @param exp3
+ * @param exp4
+ * @param exp5
+ * @param exp6
+ * @param exp7
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
  *
- * @publicApi
+ * @codeGenApi
  */
-class QueryList {
-    static { Symbol.iterator; }
-    /**
-     * Returns `Observable` of `QueryList` notifying the subscriber of changes.
-     */
-    get changes() {
-        return this._changes || (this._changes = new EventEmitter());
-    }
-    /**
-     * @param emitDistinctChangesOnly Whether `QueryList.changes` should fire only when actual change
-     *     has occurred. Or if it should fire when query is recomputed. (recomputing could resolve in
-     *     the same result)
-     */
-    constructor(_emitDistinctChangesOnly = false) {
-        this._emitDistinctChangesOnly = _emitDistinctChangesOnly;
-        this.dirty = true;
-        this._results = [];
-        this._changesDetected = false;
-        this._changes = null;
-        this.length = 0;
-        this.first = undefined;
-        this.last = undefined;
-        // This function should be declared on the prototype, but doing so there will cause the class
-        // declaration to have side-effects and become not tree-shakable. For this reason we do it in
-        // the constructor.
-        // [Symbol.iterator](): Iterator<T> { ... }
-        const proto = QueryList.prototype;
-        if (!proto[Symbol.iterator])
-            proto[Symbol.iterator] = symbolIterator;
-    }
-    /**
-     * Returns the QueryList entry at `index`.
-     */
-    get(index) {
-        return this._results[index];
-    }
-    /**
-     * See
-     * [Array.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
-     */
-    map(fn) {
-        return this._results.map(fn);
-    }
-    filter(fn) {
-        return this._results.filter(fn);
-    }
-    /**
-     * See
-     * [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
-     */
-    find(fn) {
-        return this._results.find(fn);
-    }
-    /**
-     * See
-     * [Array.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
-     */
-    reduce(fn, init) {
-        return this._results.reduce(fn, init);
-    }
-    /**
-     * See
-     * [Array.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
-     */
-    forEach(fn) {
-        this._results.forEach(fn);
-    }
-    /**
-     * See
-     * [Array.some](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
-     */
-    some(fn) {
-        return this._results.some(fn);
-    }
-    /**
-     * Returns a copy of the internal results list as an Array.
-     */
-    toArray() {
-        return this._results.slice();
-    }
-    toString() {
-        return this._results.toString();
-    }
-    /**
-     * Updates the stored data of the query list, and resets the `dirty` flag to `false`, so that
-     * on change detection, it will not notify of changes to the queries, unless a new change
-     * occurs.
-     *
-     * @param resultsTree The query results to store
-     * @param identityAccessor Optional function for extracting stable object identity from a value
-     *    in the array. This function is executed for each element of the query result list while
-     *    comparing current query list with the new one (provided as a first argument of the `reset`
-     *    function) to detect if the lists are different. If the function is not provided, elements
-     *    are compared as is (without any pre-processing).
-     */
-    reset(resultsTree, identityAccessor) {
-        // Cast to `QueryListInternal` so that we can mutate fields which are readonly for the usage of
-        // QueryList (but not for QueryList itself.)
-        const self = this;
-        self.dirty = false;
-        const newResultFlat = flatten(resultsTree);
-        if (this._changesDetected = !arrayEquals(self._results, newResultFlat, identityAccessor)) {
-            self._results = newResultFlat;
-            self.length = newResultFlat.length;
-            self.last = newResultFlat[this.length - 1];
-            self.first = newResultFlat[0];
-        }
-    }
-    /**
-     * Triggers a change event by emitting on the `changes` {@link EventEmitter}.
-     */
-    notifyOnChanges() {
-        if (this._changes && (this._changesDetected || !this._emitDistinctChangesOnly))
-            this._changes.emit(this);
-    }
-    /** internal */
-    setDirty() {
-        this.dirty = true;
-    }
-    /** internal */
-    destroy() {
-        this.changes.complete();
-        this.changes.unsubscribe();
-    }
+function ɵɵpureFunction7(slotOffset, pureFn, exp1, exp2, exp3, exp4, exp5, exp6, exp7, thisArg) {
+    const bindingIndex = getBindingRoot() + slotOffset;
+    const lView = getLView();
+    let different = bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4);
+    return bindingUpdated3(lView, bindingIndex + 4, exp5, exp6, exp7) || different ?
+        updateBinding(lView, bindingIndex + 7, thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6, exp7) :
+            pureFn(exp1, exp2, exp3, exp4, exp5, exp6, exp7)) :
+        getBinding(lView, bindingIndex + 7);
+}
+/**
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
+ *
+ * @param slotOffset the offset from binding root to the reserved slot
+ * @param pureFn
+ * @param exp1
+ * @param exp2
+ * @param exp3
+ * @param exp4
+ * @param exp5
+ * @param exp6
+ * @param exp7
+ * @param exp8
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
+ *
+ * @codeGenApi
+ */
+function ɵɵpureFunction8(slotOffset, pureFn, exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8, thisArg) {
+    const bindingIndex = getBindingRoot() + slotOffset;
+    const lView = getLView();
+    const different = bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4);
+    return bindingUpdated4(lView, bindingIndex + 4, exp5, exp6, exp7, exp8) || different ?
+        updateBinding(lView, bindingIndex + 8, thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8) :
+            pureFn(exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8)) :
+        getBinding(lView, bindingIndex + 8);
 }
-
 /**
- * Represents an embedded template that can be used to instantiate embedded views.
- * To instantiate embedded views based on a template, use the `ViewContainerRef`
- * method `createEmbeddedView()`.
+ * pureFunction instruction that can support any number of bindings.
  *
- * Access a `TemplateRef` instance by placing a directive on an `<ng-template>`
- * element (or directive prefixed with `*`). The `TemplateRef` for the embedded view
- * is injected into the constructor of the directive,
- * using the `TemplateRef` token.
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
  *
- * You can also use a `Query` to find a `TemplateRef` associated with
- * a component or a directive.
+ * @param slotOffset the offset from binding root to the reserved slot
+ * @param pureFn A pure function that takes binding values and builds an object or array
+ * containing those values.
+ * @param exps An array of binding values
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
  *
- * @see {@link ViewContainerRef}
- * @see [Navigate the Component Tree with DI](guide/dependency-injection-navtree)
+ * @codeGenApi
+ */
+function ɵɵpureFunctionV(slotOffset, pureFn, exps, thisArg) {
+    return pureFunctionVInternal(getLView(), getBindingRoot(), slotOffset, pureFn, exps, thisArg);
+}
+/**
+ * Results of a pure function invocation are stored in LView in a dedicated slot that is initialized
+ * to NO_CHANGE. In rare situations a pure pipe might throw an exception on the very first
+ * invocation and not produce any valid results. In this case LView would keep holding the NO_CHANGE
+ * value. The NO_CHANGE is not something that we can use in expressions / bindings thus we convert
+ * it to `undefined`.
+ */
+function getPureFunctionReturnValue(lView, returnValueIndex) {
+    ngDevMode && assertIndexInRange(lView, returnValueIndex);
+    const lastReturnValue = lView[returnValueIndex];
+    return lastReturnValue === NO_CHANGE ? undefined : lastReturnValue;
+}
+/**
+ * If the value of the provided exp has changed, calls the pure function to return
+ * an updated value. Or if the value has not changed, returns cached value.
  *
- * @publicApi
+ * @param lView LView in which the function is being executed.
+ * @param bindingRoot Binding root index.
+ * @param slotOffset the offset from binding root to the reserved slot
+ * @param pureFn Function that returns an updated value
+ * @param exp Updated expression value
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
  */
-class TemplateRef {
-    /**
-     * @internal
-     * @nocollapse
-     */
-    static { this.__NG_ELEMENT_ID__ = injectTemplateRef; }
+function pureFunction1Internal(lView, bindingRoot, slotOffset, pureFn, exp, thisArg) {
+    const bindingIndex = bindingRoot + slotOffset;
+    return bindingUpdated(lView, bindingIndex, exp) ?
+        updateBinding(lView, bindingIndex + 1, thisArg ? pureFn.call(thisArg, exp) : pureFn(exp)) :
+        getPureFunctionReturnValue(lView, bindingIndex + 1);
 }
-const ViewEngineTemplateRef = TemplateRef;
-// TODO(alxhub): combine interface and implementation. Currently this is challenging since something
-// in g3 depends on them being separate.
-const R3TemplateRef = class TemplateRef extends ViewEngineTemplateRef {
-    constructor(_declarationLView, _declarationTContainer, elementRef) {
-        super();
-        this._declarationLView = _declarationLView;
-        this._declarationTContainer = _declarationTContainer;
-        this.elementRef = elementRef;
-    }
-    /**
-     * Returns an `ssrId` associated with a TView, which was used to
-     * create this instance of the `TemplateRef`.
-     *
-     * @internal
-     */
-    get ssrId() {
-        return this._declarationTContainer.tView?.ssrId || null;
-    }
-    createEmbeddedView(context, injector) {
-        return this.createEmbeddedViewImpl(context, injector);
-    }
-    /**
-     * @internal
-     */
-    createEmbeddedViewImpl(context, injector, hydrationInfo) {
-        const embeddedLView = createAndRenderEmbeddedLView(this._declarationLView, this._declarationTContainer, context, { injector, hydrationInfo });
-        return new ViewRef$1(embeddedLView);
-    }
-};
 /**
- * Creates a TemplateRef given a node.
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
  *
- * @returns The TemplateRef instance to use
+ * @param lView LView in which the function is being executed.
+ * @param bindingRoot Binding root index.
+ * @param slotOffset the offset from binding root to the reserved slot
+ * @param pureFn
+ * @param exp1
+ * @param exp2
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
  */
-function injectTemplateRef() {
-    return createTemplateRef(getCurrentTNode(), getLView());
+function pureFunction2Internal(lView, bindingRoot, slotOffset, pureFn, exp1, exp2, thisArg) {
+    const bindingIndex = bindingRoot + slotOffset;
+    return bindingUpdated2(lView, bindingIndex, exp1, exp2) ?
+        updateBinding(lView, bindingIndex + 2, thisArg ? pureFn.call(thisArg, exp1, exp2) : pureFn(exp1, exp2)) :
+        getPureFunctionReturnValue(lView, bindingIndex + 2);
 }
 /**
- * Creates a TemplateRef and stores it on the injector.
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
  *
- * @param hostTNode The node on which a TemplateRef is requested
- * @param hostLView The `LView` to which the node belongs
- * @returns The TemplateRef instance or null if we can't create a TemplateRef on a given node type
+ * @param lView LView in which the function is being executed.
+ * @param bindingRoot Binding root index.
+ * @param slotOffset the offset from binding root to the reserved slot
+ * @param pureFn
+ * @param exp1
+ * @param exp2
+ * @param exp3
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
  */
-function createTemplateRef(hostTNode, hostLView) {
-    if (hostTNode.type & 4 /* TNodeType.Container */) {
-        ngDevMode && assertDefined(hostTNode.tView, 'TView must be allocated');
-        return new R3TemplateRef(hostLView, hostTNode, createElementRef(hostTNode, hostLView));
+function pureFunction3Internal(lView, bindingRoot, slotOffset, pureFn, exp1, exp2, exp3, thisArg) {
+    const bindingIndex = bindingRoot + slotOffset;
+    return bindingUpdated3(lView, bindingIndex, exp1, exp2, exp3) ?
+        updateBinding(lView, bindingIndex + 3, thisArg ? pureFn.call(thisArg, exp1, exp2, exp3) : pureFn(exp1, exp2, exp3)) :
+        getPureFunctionReturnValue(lView, bindingIndex + 3);
+}
+/**
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
+ *
+ * @param lView LView in which the function is being executed.
+ * @param bindingRoot Binding root index.
+ * @param slotOffset the offset from binding root to the reserved slot
+ * @param pureFn
+ * @param exp1
+ * @param exp2
+ * @param exp3
+ * @param exp4
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
+ *
+ */
+function pureFunction4Internal(lView, bindingRoot, slotOffset, pureFn, exp1, exp2, exp3, exp4, thisArg) {
+    const bindingIndex = bindingRoot + slotOffset;
+    return bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4) ?
+        updateBinding(lView, bindingIndex + 4, thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4) : pureFn(exp1, exp2, exp3, exp4)) :
+        getPureFunctionReturnValue(lView, bindingIndex + 4);
+}
+/**
+ * pureFunction instruction that can support any number of bindings.
+ *
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
+ *
+ * @param lView LView in which the function is being executed.
+ * @param bindingRoot Binding root index.
+ * @param slotOffset the offset from binding root to the reserved slot
+ * @param pureFn A pure function that takes binding values and builds an object or array
+ * containing those values.
+ * @param exps An array of binding values
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
+ */
+function pureFunctionVInternal(lView, bindingRoot, slotOffset, pureFn, exps, thisArg) {
+    let bindingIndex = bindingRoot + slotOffset;
+    let different = false;
+    for (let i = 0; i < exps.length; i++) {
+        bindingUpdated(lView, bindingIndex++, exps[i]) && (different = true);
     }
-    return null;
+    return different ? updateBinding(lView, bindingIndex, pureFn.apply(thisArg, exps)) :
+        getPureFunctionReturnValue(lView, bindingIndex);
 }
 
 /**
- * Removes all dehydrated views from a given LContainer:
- * both in internal data structure, as well as removing
- * corresponding DOM nodes that belong to that dehydrated view.
+ * Create a pipe.
+ *
+ * @param index Pipe index where the pipe will be stored.
+ * @param pipeName The name of the pipe
+ * @returns T the instance of the pipe.
+ *
+ * @codeGenApi
  */
-function removeDehydratedViews(lContainer) {
-    const views = lContainer[DEHYDRATED_VIEWS] ?? [];
-    const parentLView = lContainer[PARENT];
-    const renderer = parentLView[RENDERER];
-    for (const view of views) {
-        removeDehydratedView(view, renderer);
-        ngDevMode && ngDevMode.dehydratedViewsRemoved++;
+function ɵɵpipe(index, pipeName) {
+    const tView = getTView();
+    let pipeDef;
+    const adjustedIndex = index + HEADER_OFFSET;
+    if (tView.firstCreatePass) {
+        // The `getPipeDef` throws if a pipe with a given name is not found
+        // (so we use non-null assertion below).
+        pipeDef = getPipeDef(pipeName, tView.pipeRegistry);
+        tView.data[adjustedIndex] = pipeDef;
+        if (pipeDef.onDestroy) {
+            (tView.destroyHooks ??= []).push(adjustedIndex, pipeDef.onDestroy);
+        }
+    }
+    else {
+        pipeDef = tView.data[adjustedIndex];
+    }
+    const pipeFactory = pipeDef.factory || (pipeDef.factory = getFactoryDef(pipeDef.type, true));
+    let previousInjectorProfilerContext;
+    if (ngDevMode) {
+        previousInjectorProfilerContext = setInjectorProfilerContext({
+            injector: new NodeInjector(getCurrentTNode(), getLView()),
+            token: pipeDef.type
+        });
+    }
+    const previousInjectImplementation = setInjectImplementation(ɵɵdirectiveInject);
+    try {
+        // DI for pipes is supposed to behave like directives when placed on a component
+        // host node, which means that we have to disable access to `viewProviders`.
+        const previousIncludeViewProviders = setIncludeViewProviders(false);
+        const pipeInstance = pipeFactory();
+        setIncludeViewProviders(previousIncludeViewProviders);
+        store(tView, getLView(), adjustedIndex, pipeInstance);
+        return pipeInstance;
+    }
+    finally {
+        // we have to restore the injector implementation in finally, just in case the creation of the
+        // pipe throws an error.
+        setInjectImplementation(previousInjectImplementation);
+        ngDevMode && setInjectorProfilerContext(previousInjectorProfilerContext);
     }
-    // Reset the value to an empty array to indicate that no
-    // further processing of dehydrated views is needed for
-    // this view container (i.e. do not trigger the lookup process
-    // once again in case a `ViewContainerRef` is created later).
-    lContainer[DEHYDRATED_VIEWS] = EMPTY_ARRAY;
 }
 /**
- * Helper function to remove all nodes from a dehydrated view.
+ * Searches the pipe registry for a pipe with the given name. If one is found,
+ * returns the pipe. Otherwise, an error is thrown because the pipe cannot be resolved.
+ *
+ * @param name Name of pipe to resolve
+ * @param registry Full list of available pipes
+ * @returns Matching PipeDef
  */
-function removeDehydratedView(dehydratedView, renderer) {
-    let nodesRemoved = 0;
-    let currentRNode = dehydratedView.firstChild;
-    if (currentRNode) {
-        const numNodes = dehydratedView.data[NUM_ROOT_NODES];
-        while (nodesRemoved < numNodes) {
-            ngDevMode && validateSiblingNodeExists(currentRNode);
-            const nextSibling = currentRNode.nextSibling;
-            nativeRemoveNode(renderer, currentRNode, false);
-            currentRNode = nextSibling;
-            nodesRemoved++;
+function getPipeDef(name, registry) {
+    if (registry) {
+        if (ngDevMode) {
+            const pipes = registry.filter(pipe => pipe.name === name);
+            // TODO: Throw an error in the next major
+            if (pipes.length > 1) {
+                console.warn(formatRuntimeError(313 /* RuntimeErrorCode.MULTIPLE_MATCHING_PIPES */, getMultipleMatchingPipesMessage(name)));
+            }
+        }
+        for (let i = registry.length - 1; i >= 0; i--) {
+            const pipeDef = registry[i];
+            if (name === pipeDef.name) {
+                return pipeDef;
+            }
         }
     }
+    if (ngDevMode) {
+        throw new RuntimeError(-302 /* RuntimeErrorCode.PIPE_NOT_FOUND */, getPipeNotFoundErrorMessage(name));
+    }
 }
 /**
- * Walks over all views within this LContainer invokes dehydrated views
- * cleanup function for each one.
+ * Generates a helpful error message for the user when multiple pipes match the name.
+ *
+ * @param name Name of the pipe
+ * @returns The error message
  */
-function cleanupLContainer(lContainer) {
-    removeDehydratedViews(lContainer);
-    for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
-        cleanupLView(lContainer[i]);
-    }
+function getMultipleMatchingPipesMessage(name) {
+    const lView = getLView();
+    const declarationLView = lView[DECLARATION_COMPONENT_VIEW];
+    const context = declarationLView[CONTEXT];
+    const hostIsStandalone = isHostComponentStandalone(lView);
+    const componentInfoMessage = context ? ` in the '${context.constructor.name}' component` : '';
+    const verifyMessage = `check ${hostIsStandalone ? '\'@Component.imports\' of this component' :
+        'the imports of this module'}`;
+    const errorMessage = `Multiple pipes match the name \`${name}\`${componentInfoMessage}. ${verifyMessage}`;
+    return errorMessage;
 }
 /**
- * Walks over `LContainer`s and components registered within
- * this LView and invokes dehydrated views cleanup function for each one.
+ * Generates a helpful error message for the user when a pipe is not found.
+ *
+ * @param name Name of the missing pipe
+ * @returns The error message
  */
-function cleanupLView(lView) {
-    const tView = lView[TVIEW];
-    for (let i = HEADER_OFFSET; i < tView.bindingStartIndex; i++) {
-        if (isLContainer(lView[i])) {
-            const lContainer = lView[i];
-            cleanupLContainer(lContainer);
-        }
-        else if (Array.isArray(lView[i])) {
-            // This is a component, enter the `cleanupLView` recursively.
-            cleanupLView(lView[i]);
-        }
-    }
+function getPipeNotFoundErrorMessage(name) {
+    const lView = getLView();
+    const declarationLView = lView[DECLARATION_COMPONENT_VIEW];
+    const context = declarationLView[CONTEXT];
+    const hostIsStandalone = isHostComponentStandalone(lView);
+    const componentInfoMessage = context ? ` in the '${context.constructor.name}' component` : '';
+    const verifyMessage = `Verify that it is ${hostIsStandalone ? 'included in the \'@Component.imports\' of this component' :
+        'declared or imported in this module'}`;
+    const errorMessage = `The pipe '${name}' could not be found${componentInfoMessage}. ${verifyMessage}`;
+    return errorMessage;
 }
 /**
- * Walks over all views registered within the ApplicationRef and removes
- * all dehydrated views from all `LContainer`s along the way.
+ * Invokes a pipe with 1 arguments.
+ *
+ * This instruction acts as a guard to {@link PipeTransform#transform} invoking
+ * the pipe only when an input to the pipe changes.
+ *
+ * @param index Pipe index where the pipe was stored on creation.
+ * @param slotOffset the offset in the reserved slot space
+ * @param v1 1st argument to {@link PipeTransform#transform}.
+ *
+ * @codeGenApi
  */
-function cleanupDehydratedViews(appRef) {
-    const viewRefs = appRef._views;
-    for (const viewRef of viewRefs) {
-        const lNode = getLNodeForHydration(viewRef);
-        // An `lView` might be `null` if a `ViewRef` represents
-        // an embedded view (not a component view).
-        if (lNode !== null && lNode[HOST] !== null) {
-            if (isLView(lNode)) {
-                cleanupLView(lNode);
-            }
-            else {
-                // Cleanup in the root component view
-                const componentLView = lNode[HOST];
-                cleanupLView(componentLView);
-                // Cleanup in all views within this view container
-                cleanupLContainer(lNode);
-            }
-            ngDevMode && ngDevMode.dehydratedViewsCleanupRuns++;
-        }
-    }
+function ɵɵpipeBind1(index, slotOffset, v1) {
+    const adjustedIndex = index + HEADER_OFFSET;
+    const lView = getLView();
+    const pipeInstance = load(lView, adjustedIndex);
+    return isPure(lView, adjustedIndex) ?
+        pureFunction1Internal(lView, getBindingRoot(), slotOffset, pipeInstance.transform, v1, pipeInstance) :
+        pipeInstance.transform(v1);
 }
-
 /**
- * Given a current DOM node and a serialized information about the views
- * in a container, walks over the DOM structure, collecting the list of
- * dehydrated views.
+ * Invokes a pipe with 2 arguments.
+ *
+ * This instruction acts as a guard to {@link PipeTransform#transform} invoking
+ * the pipe only when an input to the pipe changes.
+ *
+ * @param index Pipe index where the pipe was stored on creation.
+ * @param slotOffset the offset in the reserved slot space
+ * @param v1 1st argument to {@link PipeTransform#transform}.
+ * @param v2 2nd argument to {@link PipeTransform#transform}.
+ *
+ * @codeGenApi
  */
-function locateDehydratedViewsInContainer(currentRNode, serializedViews) {
-    const dehydratedViews = [];
-    for (const serializedView of serializedViews) {
-        // Repeats a view multiple times as needed, based on the serialized information
-        // (for example, for *ngFor-produced views).
-        for (let i = 0; i < (serializedView[MULTIPLIER] ?? 1); i++) {
-            const view = {
-                data: serializedView,
-                firstChild: null,
-            };
-            if (serializedView[NUM_ROOT_NODES] > 0) {
-                // Keep reference to the first node in this view,
-                // so it can be accessed while invoking template instructions.
-                view.firstChild = currentRNode;
-                // Move over to the next node after this view, which can
-                // either be a first node of the next view or an anchor comment
-                // node after the last view in a container.
-                currentRNode = siblingAfter(serializedView[NUM_ROOT_NODES], currentRNode);
-            }
-            dehydratedViews.push(view);
-        }
-    }
-    return [currentRNode, dehydratedViews];
+function ɵɵpipeBind2(index, slotOffset, v1, v2) {
+    const adjustedIndex = index + HEADER_OFFSET;
+    const lView = getLView();
+    const pipeInstance = load(lView, adjustedIndex);
+    return isPure(lView, adjustedIndex) ?
+        pureFunction2Internal(lView, getBindingRoot(), slotOffset, pipeInstance.transform, v1, v2, pipeInstance) :
+        pipeInstance.transform(v1, v2);
 }
 /**
- * Reference to a function that searches for a matching dehydrated views
- * stored on a given lContainer.
- * Returns `null` by default, when hydration is not enabled.
+ * Invokes a pipe with 3 arguments.
+ *
+ * This instruction acts as a guard to {@link PipeTransform#transform} invoking
+ * the pipe only when an input to the pipe changes.
+ *
+ * @param index Pipe index where the pipe was stored on creation.
+ * @param slotOffset the offset in the reserved slot space
+ * @param v1 1st argument to {@link PipeTransform#transform}.
+ * @param v2 2nd argument to {@link PipeTransform#transform}.
+ * @param v3 4rd argument to {@link PipeTransform#transform}.
+ *
+ * @codeGenApi
  */
-let _findMatchingDehydratedViewImpl = (lContainer, template) => null;
+function ɵɵpipeBind3(index, slotOffset, v1, v2, v3) {
+    const adjustedIndex = index + HEADER_OFFSET;
+    const lView = getLView();
+    const pipeInstance = load(lView, adjustedIndex);
+    return isPure(lView, adjustedIndex) ?
+        pureFunction3Internal(lView, getBindingRoot(), slotOffset, pipeInstance.transform, v1, v2, v3, pipeInstance) :
+        pipeInstance.transform(v1, v2, v3);
+}
 /**
- * Retrieves the next dehydrated view from the LContainer and verifies that
- * it matches a given template id (from the TView that was used to create this
- * instance of a view). If the id doesn't match, that means that we are in an
- * unexpected state and can not complete the reconciliation process. Thus,
- * all dehydrated views from this LContainer are removed (including corresponding
- * DOM nodes) and the rendering is performed as if there were no dehydrated views
- * in this container.
+ * Invokes a pipe with 4 arguments.
+ *
+ * This instruction acts as a guard to {@link PipeTransform#transform} invoking
+ * the pipe only when an input to the pipe changes.
+ *
+ * @param index Pipe index where the pipe was stored on creation.
+ * @param slotOffset the offset in the reserved slot space
+ * @param v1 1st argument to {@link PipeTransform#transform}.
+ * @param v2 2nd argument to {@link PipeTransform#transform}.
+ * @param v3 3rd argument to {@link PipeTransform#transform}.
+ * @param v4 4th argument to {@link PipeTransform#transform}.
+ *
+ * @codeGenApi
  */
-function findMatchingDehydratedViewImpl(lContainer, template) {
-    const views = lContainer[DEHYDRATED_VIEWS] ?? [];
-    if (!template || views.length === 0) {
-        return null;
-    }
-    const view = views[0];
-    // Verify whether the first dehydrated view in the container matches
-    // the template id passed to this function (that originated from a TView
-    // that was used to create an instance of an embedded or component views.
-    if (view.data[TEMPLATE_ID] === template) {
-        // If the template id matches - extract the first view and return it.
-        return views.shift();
-    }
-    else {
-        // Otherwise, we are at the state when reconciliation can not be completed,
-        // thus we remove all dehydrated views within this container (remove them
-        // from internal data structures as well as delete associated elements from
-        // the DOM tree).
-        removeDehydratedViews(lContainer);
-        return null;
-    }
+function ɵɵpipeBind4(index, slotOffset, v1, v2, v3, v4) {
+    const adjustedIndex = index + HEADER_OFFSET;
+    const lView = getLView();
+    const pipeInstance = load(lView, adjustedIndex);
+    return isPure(lView, adjustedIndex) ? pureFunction4Internal(lView, getBindingRoot(), slotOffset, pipeInstance.transform, v1, v2, v3, v4, pipeInstance) :
+        pipeInstance.transform(v1, v2, v3, v4);
 }
-function enableFindMatchingDehydratedViewImpl() {
-    _findMatchingDehydratedViewImpl = findMatchingDehydratedViewImpl;
+/**
+ * Invokes a pipe with variable number of arguments.
+ *
+ * This instruction acts as a guard to {@link PipeTransform#transform} invoking
+ * the pipe only when an input to the pipe changes.
+ *
+ * @param index Pipe index where the pipe was stored on creation.
+ * @param slotOffset the offset in the reserved slot space
+ * @param values Array of arguments to pass to {@link PipeTransform#transform} method.
+ *
+ * @codeGenApi
+ */
+function ɵɵpipeBindV(index, slotOffset, values) {
+    const adjustedIndex = index + HEADER_OFFSET;
+    const lView = getLView();
+    const pipeInstance = load(lView, adjustedIndex);
+    return isPure(lView, adjustedIndex) ?
+        pureFunctionVInternal(lView, getBindingRoot(), slotOffset, pipeInstance.transform, values, pipeInstance) :
+        pipeInstance.transform.apply(pipeInstance, values);
 }
-function findMatchingDehydratedView(lContainer, template) {
-    return _findMatchingDehydratedViewImpl(lContainer, template);
+function isPure(lView, index) {
+    return lView[TVIEW].data[index].pure;
 }
 
+function symbolIterator() {
+    // @ts-expect-error accessing a private member
+    return this._results[Symbol.iterator]();
+}
 /**
- * Represents a container where one or more views can be attached to a component.
+ * An unmodifiable list of items that Angular keeps up to date when the state
+ * of the application changes.
  *
- * Can contain *host views* (created by instantiating a
- * component with the `createComponent()` method), and *embedded views*
- * (created by instantiating a `TemplateRef` with the `createEmbeddedView()` method).
+ * The type of object that {@link ViewChildren}, {@link ContentChildren}, and {@link QueryList}
+ * provide.
  *
- * A view container instance can contain other view containers,
- * creating a [view hierarchy](guide/glossary#view-hierarchy).
+ * Implements an iterable interface, therefore it can be used in both ES6
+ * javascript `for (var i of items)` loops as well as in Angular templates with
+ * `*ngFor="let i of myList"`.
  *
- * @see {@link ComponentRef}
- * @see {@link EmbeddedViewRef}
+ * Changes can be observed by subscribing to the changes `Observable`.
+ *
+ * NOTE: In the future this class will implement an `Observable` interface.
+ *
+ * @usageNotes
+ * ### Example
+ * ```typescript
+ * @Component({...})
+ * class Container {
+ *   @ViewChildren(Item) items:QueryList<Item>;
+ * }
+ * ```
  *
  * @publicApi
  */
-class ViewContainerRef {
+class QueryList {
+    static { Symbol.iterator; }
     /**
-     * @internal
-     * @nocollapse
+     * Returns `Observable` of `QueryList` notifying the subscriber of changes.
      */
-    static { this.__NG_ELEMENT_ID__ = injectViewContainerRef; }
-}
-/**
- * Creates a ViewContainerRef and stores it on the injector. Or, if the ViewContainerRef
- * already exists, retrieves the existing ViewContainerRef.
- *
- * @returns The ViewContainerRef instance to use
- */
-function injectViewContainerRef() {
-    const previousTNode = getCurrentTNode();
-    return createContainerRef(previousTNode, getLView());
-}
-const VE_ViewContainerRef = ViewContainerRef;
-// TODO(alxhub): cleaning up this indirection triggers a subtle bug in Closure in g3. Once the fix
-// for that lands, this can be cleaned up.
-const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
-    constructor(_lContainer, _hostTNode, _hostLView) {
-        super();
-        this._lContainer = _lContainer;
-        this._hostTNode = _hostTNode;
-        this._hostLView = _hostLView;
-    }
-    get element() {
-        return createElementRef(this._hostTNode, this._hostLView);
-    }
-    get injector() {
-        return new NodeInjector(this._hostTNode, this._hostLView);
-    }
-    /** @deprecated No replacement */
-    get parentInjector() {
-        const parentLocation = getParentInjectorLocation(this._hostTNode, this._hostLView);
-        if (hasParentInjector(parentLocation)) {
-            const parentView = getParentInjectorView(parentLocation, this._hostLView);
-            const injectorIndex = getParentInjectorIndex(parentLocation);
-            ngDevMode && assertNodeInjector(parentView, injectorIndex);
-            const parentTNode = parentView[TVIEW].data[injectorIndex + 8 /* NodeInjectorOffset.TNODE */];
-            return new NodeInjector(parentTNode, parentView);
-        }
-        else {
-            return new NodeInjector(null, this._hostLView);
-        }
+    get changes() {
+        return this._changes || (this._changes = new EventEmitter());
     }
-    clear() {
-        while (this.length > 0) {
-            this.remove(this.length - 1);
-        }
+    /**
+     * @param emitDistinctChangesOnly Whether `QueryList.changes` should fire only when actual change
+     *     has occurred. Or if it should fire when query is recomputed. (recomputing could resolve in
+     *     the same result)
+     */
+    constructor(_emitDistinctChangesOnly = false) {
+        this._emitDistinctChangesOnly = _emitDistinctChangesOnly;
+        this.dirty = true;
+        this._results = [];
+        this._changesDetected = false;
+        this._changes = null;
+        this.length = 0;
+        this.first = undefined;
+        this.last = undefined;
+        // This function should be declared on the prototype, but doing so there will cause the class
+        // declaration to have side-effects and become not tree-shakable. For this reason we do it in
+        // the constructor.
+        // [Symbol.iterator](): Iterator<T> { ... }
+        const proto = QueryList.prototype;
+        if (!proto[Symbol.iterator])
+            proto[Symbol.iterator] = symbolIterator;
     }
+    /**
+     * Returns the QueryList entry at `index`.
+     */
     get(index) {
-        const viewRefs = getViewRefs(this._lContainer);
-        return viewRefs !== null && viewRefs[index] || null;
-    }
-    get length() {
-        return this._lContainer.length - CONTAINER_HEADER_OFFSET;
+        return this._results[index];
     }
-    createEmbeddedView(templateRef, context, indexOrOptions) {
-        let index;
-        let injector;
-        if (typeof indexOrOptions === 'number') {
-            index = indexOrOptions;
-        }
-        else if (indexOrOptions != null) {
-            index = indexOrOptions.index;
-            injector = indexOrOptions.injector;
-        }
-        const hydrationInfo = findMatchingDehydratedView(this._lContainer, templateRef.ssrId);
-        const viewRef = templateRef.createEmbeddedViewImpl(context || {}, injector, hydrationInfo);
-        // If there is a matching dehydrated view, but the host TNode is located in the skip
-        // hydration block, this means that the content was detached (as a part of the skip
-        // hydration logic) and it needs to be appended into the DOM.
-        const skipDomInsertion = !!hydrationInfo && !hasInSkipHydrationBlockFlag(this._hostTNode);
-        this.insertImpl(viewRef, index, skipDomInsertion);
-        return viewRef;
+    /**
+     * See
+     * [Array.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
+     */
+    map(fn) {
+        return this._results.map(fn);
     }
-    createComponent(componentFactoryOrType, indexOrOptions, injector, projectableNodes, environmentInjector) {
-        const isComponentFactory = componentFactoryOrType && !isType(componentFactoryOrType);
-        let index;
-        // This function supports 2 signatures and we need to handle options correctly for both:
-        //   1. When first argument is a Component type. This signature also requires extra
-        //      options to be provided as object (more ergonomic option).
-        //   2. First argument is a Component factory. In this case extra options are represented as
-        //      positional arguments. This signature is less ergonomic and will be deprecated.
-        if (isComponentFactory) {
-            if (ngDevMode) {
-                assertEqual(typeof indexOrOptions !== 'object', true, 'It looks like Component factory was provided as the first argument ' +
-                    'and an options object as the second argument. This combination of arguments ' +
-                    'is incompatible. You can either change the first argument to provide Component ' +
-                    'type or change the second argument to be a number (representing an index at ' +
-                    'which to insert the new component\'s host view into this container)');
-            }
-            index = indexOrOptions;
-        }
-        else {
-            if (ngDevMode) {
-                assertDefined(getComponentDef(componentFactoryOrType), `Provided Component class doesn't contain Component definition. ` +
-                    `Please check whether provided class has @Component decorator.`);
-                assertEqual(typeof indexOrOptions !== 'number', true, 'It looks like Component type was provided as the first argument ' +
-                    'and a number (representing an index at which to insert the new component\'s ' +
-                    'host view into this container as the second argument. This combination of arguments ' +
-                    'is incompatible. Please use an object as the second argument instead.');
-            }
-            const options = (indexOrOptions || {});
-            if (ngDevMode && options.environmentInjector && options.ngModuleRef) {
-                throwError(`Cannot pass both environmentInjector and ngModuleRef options to createComponent().`);
-            }
-            index = options.index;
-            injector = options.injector;
-            projectableNodes = options.projectableNodes;
-            environmentInjector = options.environmentInjector || options.ngModuleRef;
-        }
-        const componentFactory = isComponentFactory ?
-            componentFactoryOrType :
-            new ComponentFactory(getComponentDef(componentFactoryOrType));
-        const contextInjector = injector || this.parentInjector;
-        // If an `NgModuleRef` is not provided explicitly, try retrieving it from the DI tree.
-        if (!environmentInjector && componentFactory.ngModule == null) {
-            // For the `ComponentFactory` case, entering this logic is very unlikely, since we expect that
-            // an instance of a `ComponentFactory`, resolved via `ComponentFactoryResolver` would have an
-            // `ngModule` field. This is possible in some test scenarios and potentially in some JIT-based
-            // use-cases. For the `ComponentFactory` case we preserve backwards-compatibility and try
-            // using a provided injector first, then fall back to the parent injector of this
-            // `ViewContainerRef` instance.
-            //
-            // For the factory-less case, it's critical to establish a connection with the module
-            // injector tree (by retrieving an instance of an `NgModuleRef` and accessing its injector),
-            // so that a component can use DI tokens provided in MgModules. For this reason, we can not
-            // rely on the provided injector, since it might be detached from the DI tree (for example, if
-            // it was created via `Injector.create` without specifying a parent injector, or if an
-            // injector is retrieved from an `NgModuleRef` created via `createNgModule` using an
-            // NgModule outside of a module tree). Instead, we always use `ViewContainerRef`'s parent
-            // injector, which is normally connected to the DI tree, which includes module injector
-            // subtree.
-            const _injector = isComponentFactory ? contextInjector : this.parentInjector;
-            // DO NOT REFACTOR. The code here used to have a `injector.get(NgModuleRef, null) ||
-            // undefined` expression which seems to cause internal google apps to fail. This is documented
-            // in the following internal bug issue: go/b/142967802
-            const result = _injector.get(EnvironmentInjector, null);
-            if (result) {
-                environmentInjector = result;
-            }
-        }
-        const componentDef = getComponentDef(componentFactory.componentType ?? {});
-        const dehydratedView = findMatchingDehydratedView(this._lContainer, componentDef?.id ?? null);
-        const rNode = dehydratedView?.firstChild ?? null;
-        const componentRef = componentFactory.create(contextInjector, projectableNodes, rNode, environmentInjector);
-        // If there is a matching dehydrated view, but the host TNode is located in the skip
-        // hydration block, this means that the content was detached (as a part of the skip
-        // hydration logic) and it needs to be appended into the DOM.
-        const skipDomInsertion = !!dehydratedView && !hasInSkipHydrationBlockFlag(this._hostTNode);
-        this.insertImpl(componentRef.hostView, index, skipDomInsertion);
-        return componentRef;
+    filter(fn) {
+        return this._results.filter(fn);
     }
-    insert(viewRef, index) {
-        return this.insertImpl(viewRef, index, false);
+    /**
+     * See
+     * [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
+     */
+    find(fn) {
+        return this._results.find(fn);
     }
-    insertImpl(viewRef, index, skipDomInsertion) {
-        const lView = viewRef._lView;
-        const tView = lView[TVIEW];
-        if (ngDevMode && viewRef.destroyed) {
-            throw new Error('Cannot insert a destroyed View in a ViewContainer!');
-        }
-        if (viewAttachedToContainer(lView)) {
-            // If view is already attached, detach it first so we clean up references appropriately.
-            const prevIdx = this.indexOf(viewRef);
-            // A view might be attached either to this or a different container. The `prevIdx` for
-            // those cases will be:
-            // equal to -1 for views attached to this ViewContainerRef
-            // >= 0 for views attached to a different ViewContainerRef
-            if (prevIdx !== -1) {
-                this.detach(prevIdx);
-            }
-            else {
-                const prevLContainer = lView[PARENT];
-                ngDevMode &&
-                    assertEqual(isLContainer(prevLContainer), true, 'An attached view should have its PARENT point to a container.');
-                // We need to re-create a R3ViewContainerRef instance since those are not stored on
-                // LView (nor anywhere else).
-                const prevVCRef = new R3ViewContainerRef(prevLContainer, prevLContainer[T_HOST], prevLContainer[PARENT]);
-                prevVCRef.detach(prevVCRef.indexOf(viewRef));
-            }
-        }
-        // Logical operation of adding `LView` to `LContainer`
-        const adjustedIdx = this._adjustIndex(index);
-        const lContainer = this._lContainer;
-        addLViewToLContainer(lContainer, lView, adjustedIdx, !skipDomInsertion);
-        viewRef.attachToViewContainerRef();
-        addToArray(getOrCreateViewRefs(lContainer), adjustedIdx, viewRef);
-        return viewRef;
+    /**
+     * See
+     * [Array.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
+     */
+    reduce(fn, init) {
+        return this._results.reduce(fn, init);
     }
-    move(viewRef, newIndex) {
-        if (ngDevMode && viewRef.destroyed) {
-            throw new Error('Cannot move a destroyed View in a ViewContainer!');
-        }
-        return this.insert(viewRef, newIndex);
+    /**
+     * See
+     * [Array.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
+     */
+    forEach(fn) {
+        this._results.forEach(fn);
     }
-    indexOf(viewRef) {
-        const viewRefsArr = getViewRefs(this._lContainer);
-        return viewRefsArr !== null ? viewRefsArr.indexOf(viewRef) : -1;
+    /**
+     * See
+     * [Array.some](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
+     */
+    some(fn) {
+        return this._results.some(fn);
     }
-    remove(index) {
-        const adjustedIdx = this._adjustIndex(index, -1);
-        const detachedView = detachView(this._lContainer, adjustedIdx);
-        if (detachedView) {
-            // Before destroying the view, remove it from the container's array of `ViewRef`s.
-            // This ensures the view container length is updated before calling
-            // `destroyLView`, which could recursively call view container methods that
-            // rely on an accurate container length.
-            // (e.g. a method on this view container being called by a child directive's OnDestroy
-            // lifecycle hook)
-            removeFromArray(getOrCreateViewRefs(this._lContainer), adjustedIdx);
-            destroyLView(detachedView[TVIEW], detachedView);
-        }
+    /**
+     * Returns a copy of the internal results list as an Array.
+     */
+    toArray() {
+        return this._results.slice();
     }
-    detach(index) {
-        const adjustedIdx = this._adjustIndex(index, -1);
-        const view = detachView(this._lContainer, adjustedIdx);
-        const wasDetached = view && removeFromArray(getOrCreateViewRefs(this._lContainer), adjustedIdx) != null;
-        return wasDetached ? new ViewRef$1(view) : null;
+    toString() {
+        return this._results.toString();
     }
-    _adjustIndex(index, shift = 0) {
-        if (index == null) {
-            return this.length + shift;
-        }
-        if (ngDevMode) {
-            assertGreaterThan(index, -1, `ViewRef index must be positive, got ${index}`);
-            // +1 because it's legal to insert at the end.
-            assertLessThan(index, this.length + 1 + shift, 'index');
+    /**
+     * Updates the stored data of the query list, and resets the `dirty` flag to `false`, so that
+     * on change detection, it will not notify of changes to the queries, unless a new change
+     * occurs.
+     *
+     * @param resultsTree The query results to store
+     * @param identityAccessor Optional function for extracting stable object identity from a value
+     *    in the array. This function is executed for each element of the query result list while
+     *    comparing current query list with the new one (provided as a first argument of the `reset`
+     *    function) to detect if the lists are different. If the function is not provided, elements
+     *    are compared as is (without any pre-processing).
+     */
+    reset(resultsTree, identityAccessor) {
+        // Cast to `QueryListInternal` so that we can mutate fields which are readonly for the usage of
+        // QueryList (but not for QueryList itself.)
+        const self = this;
+        self.dirty = false;
+        const newResultFlat = flatten(resultsTree);
+        if (this._changesDetected = !arrayEquals(self._results, newResultFlat, identityAccessor)) {
+            self._results = newResultFlat;
+            self.length = newResultFlat.length;
+            self.last = newResultFlat[this.length - 1];
+            self.first = newResultFlat[0];
         }
-        return index;
     }
-};
-function getViewRefs(lContainer) {
-    return lContainer[VIEW_REFS];
-}
-function getOrCreateViewRefs(lContainer) {
-    return (lContainer[VIEW_REFS] || (lContainer[VIEW_REFS] = []));
-}
-/**
- * Creates a ViewContainerRef and stores it on the injector.
- *
- * @param hostTNode The node that is requesting a ViewContainerRef
- * @param hostLView The view to which the node belongs
- * @returns The ViewContainerRef instance to use
- */
-function createContainerRef(hostTNode, hostLView) {
-    ngDevMode && assertTNodeType(hostTNode, 12 /* TNodeType.AnyContainer */ | 3 /* TNodeType.AnyRNode */);
-    let lContainer;
-    const slotValue = hostLView[hostTNode.index];
-    if (isLContainer(slotValue)) {
-        // If the host is a container, we don't need to create a new LContainer
-        lContainer = slotValue;
+    /**
+     * Triggers a change event by emitting on the `changes` {@link EventEmitter}.
+     */
+    notifyOnChanges() {
+        if (this._changes && (this._changesDetected || !this._emitDistinctChangesOnly))
+            this._changes.emit(this);
     }
-    else {
-        // An LContainer anchor can not be `null`, but we set it here temporarily
-        // and update to the actual value later in this function (see
-        // `_locateOrCreateAnchorNode`).
-        lContainer = createLContainer(slotValue, hostLView, null, hostTNode);
-        hostLView[hostTNode.index] = lContainer;
-        addToViewTree(hostLView, lContainer);
+    /** internal */
+    setDirty() {
+        this.dirty = true;
+    }
+    /** internal */
+    destroy() {
+        this.changes.complete();
+        this.changes.unsubscribe();
     }
-    _locateOrCreateAnchorNode(lContainer, hostLView, hostTNode, slotValue);
-    return new R3ViewContainerRef(lContainer, hostTNode, hostLView);
 }
+
 /**
- * Creates and inserts a comment node that acts as an anchor for a view container.
+ * Represents an embedded template that can be used to instantiate embedded views.
+ * To instantiate embedded views based on a template, use the `ViewContainerRef`
+ * method `createEmbeddedView()`.
  *
- * If the host is a regular element, we have to insert a comment node manually which will
- * be used as an anchor when inserting elements. In this specific case we use low-level DOM
- * manipulation to insert it.
+ * Access a `TemplateRef` instance by placing a directive on an `<ng-template>`
+ * element (or directive prefixed with `*`). The `TemplateRef` for the embedded view
+ * is injected into the constructor of the directive,
+ * using the `TemplateRef` token.
+ *
+ * You can also use a `Query` to find a `TemplateRef` associated with
+ * a component or a directive.
+ *
+ * @see {@link ViewContainerRef}
+ * @see [Navigate the Component Tree with DI](guide/dependency-injection-navtree)
+ *
+ * @publicApi
  */
-function insertAnchorNode(hostLView, hostTNode) {
-    const renderer = hostLView[RENDERER];
-    ngDevMode && ngDevMode.rendererCreateComment++;
-    const commentNode = renderer.createComment(ngDevMode ? 'container' : '');
-    const hostNative = getNativeByTNode(hostTNode, hostLView);
-    const parentOfHostNative = nativeParentNode(renderer, hostNative);
-    nativeInsertBefore(renderer, parentOfHostNative, commentNode, nativeNextSibling(renderer, hostNative), false);
-    return commentNode;
+class TemplateRef {
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = injectTemplateRef; }
 }
-let _locateOrCreateAnchorNode = createAnchorNode;
-/**
- * Regular creation mode: an anchor is created and
- * assigned to the `lContainer[NATIVE]` slot.
- */
-function createAnchorNode(lContainer, hostLView, hostTNode, slotValue) {
-    // We already have a native element (anchor) set, return.
-    if (lContainer[NATIVE])
-        return;
-    let commentNode;
-    // If the host is an element container, the native host element is guaranteed to be a
-    // comment and we can reuse that comment as anchor element for the new LContainer.
-    // The comment node in question is already part of the DOM structure so we don't need to append
-    // it again.
-    if (hostTNode.type & 8 /* TNodeType.ElementContainer */) {
-        commentNode = unwrapRNode(slotValue);
+const ViewEngineTemplateRef = TemplateRef;
+// TODO(alxhub): combine interface and implementation. Currently this is challenging since something
+// in g3 depends on them being separate.
+const R3TemplateRef = class TemplateRef extends ViewEngineTemplateRef {
+    constructor(_declarationLView, _declarationTContainer, elementRef) {
+        super();
+        this._declarationLView = _declarationLView;
+        this._declarationTContainer = _declarationTContainer;
+        this.elementRef = elementRef;
     }
-    else {
-        commentNode = insertAnchorNode(hostLView, hostTNode);
+    /**
+     * Returns an `ssrId` associated with a TView, which was used to
+     * create this instance of the `TemplateRef`.
+     *
+     * @internal
+     */
+    get ssrId() {
+        return this._declarationTContainer.tView?.ssrId || null;
     }
-    lContainer[NATIVE] = commentNode;
+    createEmbeddedView(context, injector) {
+        return this.createEmbeddedViewImpl(context, injector);
+    }
+    /**
+     * @internal
+     */
+    createEmbeddedViewImpl(context, injector, dehydratedView) {
+        const embeddedLView = createAndRenderEmbeddedLView(this._declarationLView, this._declarationTContainer, context, { injector, dehydratedView });
+        return new ViewRef$1(embeddedLView);
+    }
+};
+/**
+ * Creates a TemplateRef given a node.
+ *
+ * @returns The TemplateRef instance to use
+ */
+function injectTemplateRef() {
+    return createTemplateRef(getCurrentTNode(), getLView());
 }
 /**
- * Hydration logic that looks up:
- *  - an anchor node in the DOM and stores the node in `lContainer[NATIVE]`
- *  - all dehydrated views in this container and puts them into `lContainer[DEHYDRATED_VIEWS]`
+ * Creates a TemplateRef and stores it on the injector.
+ *
+ * @param hostTNode The node on which a TemplateRef is requested
+ * @param hostLView The `LView` to which the node belongs
+ * @returns The TemplateRef instance or null if we can't create a TemplateRef on a given node type
  */
-function locateOrCreateAnchorNode(lContainer, hostLView, hostTNode, slotValue) {
-    // We already have a native element (anchor) set and the process
-    // of finding dehydrated views happened (so the `lContainer[DEHYDRATED_VIEWS]`
-    // is not null), exit early.
-    if (lContainer[NATIVE] && lContainer[DEHYDRATED_VIEWS])
-        return;
-    const hydrationInfo = hostLView[HYDRATION];
-    const noOffsetIndex = hostTNode.index - HEADER_OFFSET;
-    // TODO(akushnir): this should really be a single condition, refactor the code
-    // to use `hasInSkipHydrationBlockFlag` logic inside `isInSkipHydrationBlock`.
-    const skipHydration = isInSkipHydrationBlock(hostTNode) || hasInSkipHydrationBlockFlag(hostTNode);
-    const isNodeCreationMode = !hydrationInfo || skipHydration || isDisconnectedNode$1(hydrationInfo, noOffsetIndex);
-    // Regular creation mode.
-    if (isNodeCreationMode) {
-        return createAnchorNode(lContainer, hostLView, hostTNode, slotValue);
-    }
-    // Hydration mode, looking up an anchor node and dehydrated views in DOM.
-    const currentRNode = getSegmentHead(hydrationInfo, noOffsetIndex);
-    const serializedViews = hydrationInfo.data[CONTAINERS]?.[noOffsetIndex];
-    ngDevMode &&
-        assertDefined(serializedViews, 'Unexpected state: no hydration info available for a given TNode, ' +
-            'which represents a view container.');
-    const [commentNode, dehydratedViews] = locateDehydratedViewsInContainer(currentRNode, serializedViews);
-    if (ngDevMode) {
-        validateMatchingNode(commentNode, Node.COMMENT_NODE, null, hostLView, hostTNode, true);
-        // Do not throw in case this node is already claimed (thus `false` as a second
-        // argument). If this container is created based on an `<ng-template>`, the comment
-        // node would be already claimed from the `template` instruction. If an element acts
-        // as an anchor (e.g. <div #vcRef>), a separate comment node would be created/located,
-        // so we need to claim it here.
-        markRNodeAsClaimedByHydration(commentNode, false);
+function createTemplateRef(hostTNode, hostLView) {
+    if (hostTNode.type & 4 /* TNodeType.Container */) {
+        ngDevMode && assertDefined(hostTNode.tView, 'TView must be allocated');
+        return new R3TemplateRef(hostLView, hostTNode, createElementRef(hostTNode, hostLView));
     }
-    lContainer[NATIVE] = commentNode;
-    lContainer[DEHYDRATED_VIEWS] = dehydratedViews;
-}
-function enableLocateOrCreateContainerRefImpl() {
-    _locateOrCreateAnchorNode = locateOrCreateAnchorNode;
+    return null;
 }
 
 class LQuery_ {
@@ -27279,6 +27437,7 @@ const angularCoreEnv = (() => ({
     'ɵɵrepeaterCreate': ɵɵrepeaterCreate,
     'ɵɵrepeaterTrackByIndex': ɵɵrepeaterTrackByIndex,
     'ɵɵrepeaterTrackByIdentity': ɵɵrepeaterTrackByIdentity,
+    'ɵɵcomponentInstance': ɵɵcomponentInstance,
     'ɵɵtext': ɵɵtext,
     'ɵɵtextInterpolate': ɵɵtextInterpolate,
     'ɵɵtextInterpolate1': ɵɵtextInterpolate1,
@@ -31891,11 +32050,13 @@ function serializeLView(lView, context) {
     for (let i = HEADER_OFFSET; i < tView.bindingStartIndex; i++) {
         const tNode = tView.data[i];
         const noOffsetIndex = i - HEADER_OFFSET;
-        // Local refs (e.g. <div #localRef>) take up an extra slot in LViews
-        // to store the same element. In this case, there is no information in
-        // a corresponding slot in TNode data structure. If that's the case, just
-        // skip this slot and move to the next one.
-        if (!tNode) {
+        // Skip processing of a given slot in the following cases:
+        // - Local refs (e.g. <div #localRef>) take up an extra slot in LViews
+        //   to store the same element. In this case, there is no information in
+        //   a corresponding slot in TNode data structure.
+        // - When a slot contains something other than a TNode. For example, there
+        //   might be some metadata information about a defer block or a control flow block.
+        if (!isTNodeShape(tNode)) {
             continue;
         }
         // Check if a native node that represents a given TNode is disconnected from the DOM tree.
@@ -32494,17 +32655,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.
@@ -32647,5 +32809,5 @@ if (typeof ngDevMode !== 'undefined' && ngDevMode) {
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATION_MODULE_TYPE, APP_BOOTSTRAP_LISTENER, APP_ID, APP_INITIALIZER, ApplicationInitStatus, ApplicationModule, ApplicationRef, Attribute, COMPILER_OPTIONS, CSP_NONCE, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Compiler, CompilerFactory, Component, ComponentFactory$1 as ComponentFactory, ComponentFactoryResolver$1 as ComponentFactoryResolver, ComponentRef$1 as ComponentRef, ContentChild, ContentChildren, DEFAULT_CURRENCY_CODE, DebugElement, DebugEventListener, DebugNode, DefaultIterableDiffer, DestroyRef, Directive, ENVIRONMENT_INITIALIZER, ElementRef, EmbeddedViewRef, EnvironmentInjector, ErrorHandler, EventEmitter, Host, HostBinding, HostListener, INJECTOR, Inject, InjectFlags, Injectable, InjectionToken, Injector, Input, IterableDiffers, KeyValueDiffers, LOCALE_ID, MissingTranslationStrategy, ModuleWithComponentFactories, NO_ERRORS_SCHEMA, NgModule, NgModuleFactory$1 as NgModuleFactory, NgModuleRef$1 as NgModuleRef, NgProbeToken, NgZone, Optional, Output, PACKAGE_ROOT_URL, PLATFORM_ID, PLATFORM_INITIALIZER, Pipe, PlatformRef, Query, QueryList, Renderer2, RendererFactory2, RendererStyleFlags2, Sanitizer, SecurityContext, Self, SimpleChange, SkipSelf, TRANSLATIONS, TRANSLATIONS_FORMAT, TemplateRef, Testability, TestabilityRegistry, TransferState, Type, VERSION, Version, ViewChild, ViewChildren, ViewContainerRef, ViewEncapsulation$1 as ViewEncapsulation, ViewRef, afterNextRender, afterRender, asNativeElements, assertInInjectionContext, assertPlatform, booleanAttribute, computed, createComponent, createEnvironmentInjector, createNgModule, createNgModuleRef, createPlatform, createPlatformFactory, defineInjectable, destroyPlatform, effect, enableProdMode, forwardRef, getDebugNode, getModuleFactory, getNgModuleById, getPlatform, importProvidersFrom, inject, isDevMode, isSignal, isStandalone, makeEnvironmentProviders, makeStateKey, mergeApplicationConfig, numberAttribute, platformCore, provideZoneChangeDetection, reflectComponentType, resolveForwardRef, runInInjectionContext, setTestabilityGetter, signal, untracked, ALLOW_MULTIPLE_PLATFORMS as ɵALLOW_MULTIPLE_PLATFORMS, AfterRenderEventManager as ɵAfterRenderEventManager, ComponentFactory$1 as ɵComponentFactory, Console as ɵConsole, DEFAULT_LOCALE_ID as ɵDEFAULT_LOCALE_ID, DEFER_BLOCK_DEPENDENCY_INTERCEPTOR as ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, ENABLED_SSR_FEATURES as ɵENABLED_SSR_FEATURES, INJECTOR_SCOPE as ɵINJECTOR_SCOPE, IS_HYDRATION_DOM_REUSE_ENABLED as ɵIS_HYDRATION_DOM_REUSE_ENABLED, InitialRenderPendingTasks as ɵInitialRenderPendingTasks, LContext as ɵLContext, LifecycleHooksFeature as ɵLifecycleHooksFeature, LocaleDataIndex as ɵLocaleDataIndex, NG_COMP_DEF as ɵNG_COMP_DEF, NG_DIR_DEF as ɵNG_DIR_DEF, NG_ELEMENT_ID as ɵNG_ELEMENT_ID, NG_INJ_DEF as ɵNG_INJ_DEF, NG_MOD_DEF as ɵNG_MOD_DEF, NG_PIPE_DEF as ɵNG_PIPE_DEF, NG_PROV_DEF as ɵNG_PROV_DEF, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, NO_CHANGE as ɵNO_CHANGE, NgModuleFactory as ɵNgModuleFactory, NoopNgZone as ɵNoopNgZone, ReflectionCapabilities as ɵReflectionCapabilities, ComponentFactory as ɵRender3ComponentFactory, ComponentRef as ɵRender3ComponentRef, NgModuleRef as ɵRender3NgModuleRef, RuntimeError as ɵRuntimeError, SSR_CONTENT_INTEGRITY_MARKER as ɵSSR_CONTENT_INTEGRITY_MARKER, TESTABILITY as ɵTESTABILITY, TESTABILITY_GETTER as ɵTESTABILITY_GETTER, USE_RUNTIME_DEPS_TRACKER_FOR_JIT as ɵUSE_RUNTIME_DEPS_TRACKER_FOR_JIT, ViewRef$1 as ɵViewRef, XSS_SECURITY_URL as ɵXSS_SECURITY_URL, _sanitizeHtml as ɵ_sanitizeHtml, _sanitizeUrl as ɵ_sanitizeUrl, allowSanitizationBypassAndThrow as ɵallowSanitizationBypassAndThrow, annotateForHydration as ɵannotateForHydration, bypassSanitizationTrustHtml as ɵbypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl as ɵbypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript as ɵbypassSanitizationTrustScript, bypassSanitizationTrustStyle as ɵbypassSanitizationTrustStyle, bypassSanitizationTrustUrl as ɵbypassSanitizationTrustUrl, clearResolutionOfComponentResourcesQueue as ɵclearResolutionOfComponentResourcesQueue, compileComponent as ɵcompileComponent, compileDirective as ɵcompileDirective, compileNgModule as ɵcompileNgModule, compileNgModuleDefs as ɵcompileNgModuleDefs, compileNgModuleFactory as ɵcompileNgModuleFactory, compilePipe as ɵcompilePipe, convertToBitFlags as ɵconvertToBitFlags, createInjector as ɵcreateInjector, defaultIterableDiffers as ɵdefaultIterableDiffers, defaultKeyValueDiffers as ɵdefaultKeyValueDiffers, depsTracker as ɵdepsTracker, detectChanges as ɵdetectChanges, devModeEqual as ɵdevModeEqual, findLocaleData as ɵfindLocaleData, flushModuleScopingQueueAsMuchAsPossible as ɵflushModuleScopingQueueAsMuchAsPossible, formatRuntimeError as ɵformatRuntimeError, generateStandaloneInDeclarationsError as ɵgenerateStandaloneInDeclarationsError, getAsyncClassMetadata as ɵgetAsyncClassMetadata, getDebugNode as ɵgetDebugNode, getDirectives as ɵgetDirectives, getHostElement as ɵgetHostElement, getInjectableDef as ɵgetInjectableDef, getLContext as ɵgetLContext, getLocaleCurrencyCode as ɵgetLocaleCurrencyCode, getLocalePluralCase as ɵgetLocalePluralCase, getSanitizationBypassType as ɵgetSanitizationBypassType, ɵgetUnknownElementStrictMode, ɵgetUnknownPropertyStrictMode, _global as ɵglobal, injectChangeDetectorRef as ɵinjectChangeDetectorRef, internalCreateApplication as ɵinternalCreateApplication, isBoundToModule as ɵisBoundToModule, isComponentDefPendingResolution as ɵisComponentDefPendingResolution, isEnvironmentProviders as ɵisEnvironmentProviders, isInjectable as ɵisInjectable, isNgModule as ɵisNgModule, isPromise as ɵisPromise, isSubscribable as ɵisSubscribable, noSideEffects as ɵnoSideEffects, patchComponentDefWithScope as ɵpatchComponentDefWithScope, publishDefaultGlobalUtils$1 as ɵpublishDefaultGlobalUtils, publishGlobalUtil as ɵpublishGlobalUtil, registerLocaleData as ɵregisterLocaleData, resetCompiledComponents as ɵresetCompiledComponents, resetJitOptions as ɵresetJitOptions, resolveComponentResources as ɵresolveComponentResources, restoreComponentResolutionQueue as ɵrestoreComponentResolutionQueue, setAllowDuplicateNgModuleIdsForTest as ɵsetAllowDuplicateNgModuleIdsForTest, setAlternateWeakRefImpl as ɵsetAlternateWeakRefImpl, setClassMetadata as ɵsetClassMetadata, setClassMetadataAsync as ɵsetClassMetadataAsync, setCurrentInjector as ɵsetCurrentInjector, setDocument as ɵsetDocument, setInjectorProfilerContext as ɵsetInjectorProfilerContext, setLocaleId as ɵsetLocaleId, ɵsetUnknownElementStrictMode, ɵsetUnknownPropertyStrictMode, store as ɵstore, stringify as ɵstringify, transitiveScopesFor as ɵtransitiveScopesFor, unregisterAllLocaleData as ɵunregisterLocaleData, unwrapSafeValue as ɵunwrapSafeValue, withDomHydration as ɵwithDomHydration, ɵɵCopyDefinitionFeature, FactoryTarget as ɵɵFactoryTarget, ɵɵHostDirectivesFeature, ɵɵInheritDefinitionFeature, ɵɵInputTransformsFeature, ɵɵNgOnChangesFeature, ɵɵProvidersFeature, ɵɵStandaloneFeature, ɵɵadvance, ɵɵattribute, ɵɵattributeInterpolate1, ɵɵattributeInterpolate2, ɵɵattributeInterpolate3, ɵɵattributeInterpolate4, ɵɵattributeInterpolate5, ɵɵattributeInterpolate6, ɵɵattributeInterpolate7, ɵɵattributeInterpolate8, ɵɵattributeInterpolateV, ɵɵclassMap, ɵɵclassMapInterpolate1, ɵɵclassMapInterpolate2, ɵɵclassMapInterpolate3, ɵɵclassMapInterpolate4, ɵɵclassMapInterpolate5, ɵɵclassMapInterpolate6, ɵɵclassMapInterpolate7, ɵɵclassMapInterpolate8, ɵɵclassMapInterpolateV, ɵɵclassProp, ɵɵconditional, ɵɵcontentQuery, ɵɵdefer, ɵɵdeferOnHover, ɵɵdeferOnIdle, ɵɵdeferOnImmediate, ɵɵdeferOnInteraction, ɵɵdeferOnTimer, ɵɵdeferOnViewport, ɵɵdeferPrefetchOnHover, ɵɵdeferPrefetchOnIdle, ɵɵdeferPrefetchOnImmediate, ɵɵdeferPrefetchOnInteraction, ɵɵdeferPrefetchOnTimer, ɵɵdeferPrefetchOnViewport, ɵɵdeferPrefetchWhen, ɵɵdeferWhen, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵdefineNgModule, ɵɵdefinePipe, ɵɵdirectiveInject, ɵɵdisableBindings, ɵɵelement, ɵɵelementContainer, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementStart, ɵɵenableBindings, ɵɵgetComponentDepsFactory, ɵɵgetCurrentView, ɵɵgetInheritedFactory, ɵɵhostProperty, ɵɵi18n, ɵɵi18nApply, ɵɵi18nAttributes, ɵɵi18nEnd, ɵɵi18nExp, ɵɵi18nPostprocess, ɵɵi18nStart, ɵɵinject, ɵɵinjectAttribute, ɵɵinvalidFactory, ɵɵinvalidFactoryDep, ɵɵlistener, ɵɵloadQuery, ɵɵnamespaceHTML, ɵɵnamespaceMathML, ɵɵnamespaceSVG, ɵɵnextContext, ɵɵngDeclareClassMetadata, ɵɵngDeclareComponent, ɵɵngDeclareDirective, ɵɵngDeclareFactory, ɵɵngDeclareInjectable, ɵɵngDeclareInjector, ɵɵngDeclareNgModule, ɵɵngDeclarePipe, ɵɵpipe, ɵɵpipeBind1, ɵɵpipeBind2, ɵɵpipeBind3, ɵɵpipeBind4, ɵɵpipeBindV, ɵɵprojection, ɵɵprojectionDef, ɵɵproperty, ɵɵpropertyInterpolate, ɵɵpropertyInterpolate1, ɵɵpropertyInterpolate2, ɵɵpropertyInterpolate3, ɵɵpropertyInterpolate4, ɵɵpropertyInterpolate5, ɵɵpropertyInterpolate6, ɵɵpropertyInterpolate7, ɵɵpropertyInterpolate8, ɵɵpropertyInterpolateV, ɵɵpureFunction0, ɵɵpureFunction1, ɵɵpureFunction2, ɵɵpureFunction3, ɵɵpureFunction4, ɵɵpureFunction5, ɵɵpureFunction6, ɵɵpureFunction7, ɵɵpureFunction8, ɵɵpureFunctionV, ɵɵqueryRefresh, ɵɵreference, registerNgModuleType as ɵɵregisterNgModuleType, ɵɵrepeater, ɵɵrepeaterCreate, ɵɵrepeaterTrackByIdentity, ɵɵrepeaterTrackByIndex, ɵɵresetView, ɵɵresolveBody, ɵɵresolveDocument, ɵɵresolveWindow, ɵɵrestoreView, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl, ɵɵsanitizeUrlOrResourceUrl, ɵɵsetComponentScope, ɵɵsetNgModuleScope, ɵɵstyleMap, ɵɵstyleMapInterpolate1, ɵɵstyleMapInterpolate2, ɵɵstyleMapInterpolate3, ɵɵstyleMapInterpolate4, ɵɵstyleMapInterpolate5, ɵɵstyleMapInterpolate6, ɵɵstyleMapInterpolate7, ɵɵstyleMapInterpolate8, ɵɵstyleMapInterpolateV, ɵɵstyleProp, ɵɵstylePropInterpolate1, ɵɵstylePropInterpolate2, ɵɵstylePropInterpolate3, ɵɵstylePropInterpolate4, ɵɵstylePropInterpolate5, ɵɵstylePropInterpolate6, ɵɵstylePropInterpolate7, ɵɵstylePropInterpolate8, ɵɵstylePropInterpolateV, ɵɵsyntheticHostListener, ɵɵsyntheticHostProperty, ɵɵtemplate, ɵɵtemplateRefExtractor, ɵɵtext, ɵɵtextInterpolate, ɵɵtextInterpolate1, ɵɵtextInterpolate2, ɵɵtextInterpolate3, ɵɵtextInterpolate4, ɵɵtextInterpolate5, ɵɵtextInterpolate6, ɵɵtextInterpolate7, ɵɵtextInterpolate8, ɵɵtextInterpolateV, ɵɵtrustConstantHtml, ɵɵtrustConstantResourceUrl, ɵɵvalidateIframeAttribute, ɵɵviewQuery };
+export { ANIMATION_MODULE_TYPE, APP_BOOTSTRAP_LISTENER, APP_ID, APP_INITIALIZER, ApplicationInitStatus, ApplicationModule, ApplicationRef, Attribute, COMPILER_OPTIONS, CSP_NONCE, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Compiler, CompilerFactory, Component, ComponentFactory$1 as ComponentFactory, ComponentFactoryResolver$1 as ComponentFactoryResolver, ComponentRef$1 as ComponentRef, ContentChild, ContentChildren, DEFAULT_CURRENCY_CODE, DebugElement, DebugEventListener, DebugNode, DefaultIterableDiffer, DestroyRef, Directive, ENVIRONMENT_INITIALIZER, ElementRef, EmbeddedViewRef, EnvironmentInjector, ErrorHandler, EventEmitter, Host, HostBinding, HostListener, INJECTOR, Inject, InjectFlags, Injectable, InjectionToken, Injector, Input, IterableDiffers, KeyValueDiffers, LOCALE_ID, MissingTranslationStrategy, ModuleWithComponentFactories, NO_ERRORS_SCHEMA, NgModule, NgModuleFactory$1 as NgModuleFactory, NgModuleRef$1 as NgModuleRef, NgProbeToken, NgZone, Optional, Output, PACKAGE_ROOT_URL, PLATFORM_ID, PLATFORM_INITIALIZER, Pipe, PlatformRef, Query, QueryList, Renderer2, RendererFactory2, RendererStyleFlags2, Sanitizer, SecurityContext, Self, SimpleChange, SkipSelf, TRANSLATIONS, TRANSLATIONS_FORMAT, TemplateRef, Testability, TestabilityRegistry, TransferState, Type, VERSION, Version, ViewChild, ViewChildren, ViewContainerRef, ViewEncapsulation$1 as ViewEncapsulation, ViewRef, afterNextRender, afterRender, asNativeElements, assertInInjectionContext, assertPlatform, booleanAttribute, computed, createComponent, createEnvironmentInjector, createNgModule, createNgModuleRef, createPlatform, createPlatformFactory, defineInjectable, destroyPlatform, effect, enableProdMode, forwardRef, getDebugNode, getModuleFactory, getNgModuleById, getPlatform, importProvidersFrom, inject, isDevMode, isSignal, isStandalone, makeEnvironmentProviders, makeStateKey, mergeApplicationConfig, numberAttribute, platformCore, provideZoneChangeDetection, reflectComponentType, resolveForwardRef, runInInjectionContext, setTestabilityGetter, signal, untracked, ALLOW_MULTIPLE_PLATFORMS as ɵALLOW_MULTIPLE_PLATFORMS, AfterRenderEventManager as ɵAfterRenderEventManager, ComponentFactory$1 as ɵComponentFactory, Console as ɵConsole, DEFAULT_LOCALE_ID as ɵDEFAULT_LOCALE_ID, DEFER_BLOCK_DEPENDENCY_INTERCEPTOR as ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, ENABLED_SSR_FEATURES as ɵENABLED_SSR_FEATURES, INJECTOR_SCOPE as ɵINJECTOR_SCOPE, IS_HYDRATION_DOM_REUSE_ENABLED as ɵIS_HYDRATION_DOM_REUSE_ENABLED, InitialRenderPendingTasks as ɵInitialRenderPendingTasks, LContext as ɵLContext, LifecycleHooksFeature as ɵLifecycleHooksFeature, LocaleDataIndex as ɵLocaleDataIndex, NG_COMP_DEF as ɵNG_COMP_DEF, NG_DIR_DEF as ɵNG_DIR_DEF, NG_ELEMENT_ID as ɵNG_ELEMENT_ID, NG_INJ_DEF as ɵNG_INJ_DEF, NG_MOD_DEF as ɵNG_MOD_DEF, NG_PIPE_DEF as ɵNG_PIPE_DEF, NG_PROV_DEF as ɵNG_PROV_DEF, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, NO_CHANGE as ɵNO_CHANGE, NgModuleFactory as ɵNgModuleFactory, NoopNgZone as ɵNoopNgZone, ReflectionCapabilities as ɵReflectionCapabilities, ComponentFactory as ɵRender3ComponentFactory, ComponentRef as ɵRender3ComponentRef, NgModuleRef as ɵRender3NgModuleRef, RuntimeError as ɵRuntimeError, SSR_CONTENT_INTEGRITY_MARKER as ɵSSR_CONTENT_INTEGRITY_MARKER, TESTABILITY as ɵTESTABILITY, TESTABILITY_GETTER as ɵTESTABILITY_GETTER, USE_RUNTIME_DEPS_TRACKER_FOR_JIT as ɵUSE_RUNTIME_DEPS_TRACKER_FOR_JIT, ViewRef$1 as ɵViewRef, XSS_SECURITY_URL as ɵXSS_SECURITY_URL, _sanitizeHtml as ɵ_sanitizeHtml, _sanitizeUrl as ɵ_sanitizeUrl, allowSanitizationBypassAndThrow as ɵallowSanitizationBypassAndThrow, annotateForHydration as ɵannotateForHydration, bypassSanitizationTrustHtml as ɵbypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl as ɵbypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript as ɵbypassSanitizationTrustScript, bypassSanitizationTrustStyle as ɵbypassSanitizationTrustStyle, bypassSanitizationTrustUrl as ɵbypassSanitizationTrustUrl, clearResolutionOfComponentResourcesQueue as ɵclearResolutionOfComponentResourcesQueue, compileComponent as ɵcompileComponent, compileDirective as ɵcompileDirective, compileNgModule as ɵcompileNgModule, compileNgModuleDefs as ɵcompileNgModuleDefs, compileNgModuleFactory as ɵcompileNgModuleFactory, compilePipe as ɵcompilePipe, convertToBitFlags as ɵconvertToBitFlags, createInjector as ɵcreateInjector, defaultIterableDiffers as ɵdefaultIterableDiffers, defaultKeyValueDiffers as ɵdefaultKeyValueDiffers, depsTracker as ɵdepsTracker, detectChanges as ɵdetectChanges, devModeEqual as ɵdevModeEqual, findLocaleData as ɵfindLocaleData, flushModuleScopingQueueAsMuchAsPossible as ɵflushModuleScopingQueueAsMuchAsPossible, formatRuntimeError as ɵformatRuntimeError, generateStandaloneInDeclarationsError as ɵgenerateStandaloneInDeclarationsError, getAsyncClassMetadata as ɵgetAsyncClassMetadata, getDebugNode as ɵgetDebugNode, getDirectives as ɵgetDirectives, getHostElement as ɵgetHostElement, getInjectableDef as ɵgetInjectableDef, getLContext as ɵgetLContext, getLocaleCurrencyCode as ɵgetLocaleCurrencyCode, getLocalePluralCase as ɵgetLocalePluralCase, getSanitizationBypassType as ɵgetSanitizationBypassType, ɵgetUnknownElementStrictMode, ɵgetUnknownPropertyStrictMode, _global as ɵglobal, injectChangeDetectorRef as ɵinjectChangeDetectorRef, internalCreateApplication as ɵinternalCreateApplication, isBoundToModule as ɵisBoundToModule, isComponentDefPendingResolution as ɵisComponentDefPendingResolution, isEnvironmentProviders as ɵisEnvironmentProviders, isInjectable as ɵisInjectable, isNgModule as ɵisNgModule, isPromise as ɵisPromise, isSubscribable as ɵisSubscribable, noSideEffects as ɵnoSideEffects, patchComponentDefWithScope as ɵpatchComponentDefWithScope, publishDefaultGlobalUtils$1 as ɵpublishDefaultGlobalUtils, publishGlobalUtil as ɵpublishGlobalUtil, registerLocaleData as ɵregisterLocaleData, resetCompiledComponents as ɵresetCompiledComponents, resetJitOptions as ɵresetJitOptions, resolveComponentResources as ɵresolveComponentResources, restoreComponentResolutionQueue as ɵrestoreComponentResolutionQueue, setAllowDuplicateNgModuleIdsForTest as ɵsetAllowDuplicateNgModuleIdsForTest, setAlternateWeakRefImpl as ɵsetAlternateWeakRefImpl, setClassMetadata as ɵsetClassMetadata, setClassMetadataAsync as ɵsetClassMetadataAsync, setCurrentInjector as ɵsetCurrentInjector, setDocument as ɵsetDocument, setInjectorProfilerContext as ɵsetInjectorProfilerContext, setLocaleId as ɵsetLocaleId, ɵsetUnknownElementStrictMode, ɵsetUnknownPropertyStrictMode, store as ɵstore, stringify as ɵstringify, transitiveScopesFor as ɵtransitiveScopesFor, unregisterAllLocaleData as ɵunregisterLocaleData, unwrapSafeValue as ɵunwrapSafeValue, withDomHydration as ɵwithDomHydration, ɵɵCopyDefinitionFeature, FactoryTarget as ɵɵFactoryTarget, ɵɵHostDirectivesFeature, ɵɵInheritDefinitionFeature, ɵɵInputTransformsFeature, ɵɵNgOnChangesFeature, ɵɵProvidersFeature, ɵɵStandaloneFeature, ɵɵadvance, ɵɵattribute, ɵɵattributeInterpolate1, ɵɵattributeInterpolate2, ɵɵattributeInterpolate3, ɵɵattributeInterpolate4, ɵɵattributeInterpolate5, ɵɵattributeInterpolate6, ɵɵattributeInterpolate7, ɵɵattributeInterpolate8, ɵɵattributeInterpolateV, ɵɵclassMap, ɵɵclassMapInterpolate1, ɵɵclassMapInterpolate2, ɵɵclassMapInterpolate3, ɵɵclassMapInterpolate4, ɵɵclassMapInterpolate5, ɵɵclassMapInterpolate6, ɵɵclassMapInterpolate7, ɵɵclassMapInterpolate8, ɵɵclassMapInterpolateV, ɵɵclassProp, ɵɵcomponentInstance, ɵɵconditional, ɵɵcontentQuery, ɵɵdefer, ɵɵdeferOnHover, ɵɵdeferOnIdle, ɵɵdeferOnImmediate, ɵɵdeferOnInteraction, ɵɵdeferOnTimer, ɵɵdeferOnViewport, ɵɵdeferPrefetchOnHover, ɵɵdeferPrefetchOnIdle, ɵɵdeferPrefetchOnImmediate, ɵɵdeferPrefetchOnInteraction, ɵɵdeferPrefetchOnTimer, ɵɵdeferPrefetchOnViewport, ɵɵdeferPrefetchWhen, ɵɵdeferWhen, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵdefineNgModule, ɵɵdefinePipe, ɵɵdirectiveInject, ɵɵdisableBindings, ɵɵelement, ɵɵelementContainer, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementStart, ɵɵenableBindings, ɵɵgetComponentDepsFactory, ɵɵgetCurrentView, ɵɵgetInheritedFactory, ɵɵhostProperty, ɵɵi18n, ɵɵi18nApply, ɵɵi18nAttributes, ɵɵi18nEnd, ɵɵi18nExp, ɵɵi18nPostprocess, ɵɵi18nStart, ɵɵinject, ɵɵinjectAttribute, ɵɵinvalidFactory, ɵɵinvalidFactoryDep, ɵɵlistener, ɵɵloadQuery, ɵɵnamespaceHTML, ɵɵnamespaceMathML, ɵɵnamespaceSVG, ɵɵnextContext, ɵɵngDeclareClassMetadata, ɵɵngDeclareComponent, ɵɵngDeclareDirective, ɵɵngDeclareFactory, ɵɵngDeclareInjectable, ɵɵngDeclareInjector, ɵɵngDeclareNgModule, ɵɵngDeclarePipe, ɵɵpipe, ɵɵpipeBind1, ɵɵpipeBind2, ɵɵpipeBind3, ɵɵpipeBind4, ɵɵpipeBindV, ɵɵprojection, ɵɵprojectionDef, ɵɵproperty, ɵɵpropertyInterpolate, ɵɵpropertyInterpolate1, ɵɵpropertyInterpolate2, ɵɵpropertyInterpolate3, ɵɵpropertyInterpolate4, ɵɵpropertyInterpolate5, ɵɵpropertyInterpolate6, ɵɵpropertyInterpolate7, ɵɵpropertyInterpolate8, ɵɵpropertyInterpolateV, ɵɵpureFunction0, ɵɵpureFunction1, ɵɵpureFunction2, ɵɵpureFunction3, ɵɵpureFunction4, ɵɵpureFunction5, ɵɵpureFunction6, ɵɵpureFunction7, ɵɵpureFunction8, ɵɵpureFunctionV, ɵɵqueryRefresh, ɵɵreference, registerNgModuleType as ɵɵregisterNgModuleType, ɵɵrepeater, ɵɵrepeaterCreate, ɵɵrepeaterTrackByIdentity, ɵɵrepeaterTrackByIndex, ɵɵresetView, ɵɵresolveBody, ɵɵresolveDocument, ɵɵresolveWindow, ɵɵrestoreView, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl, ɵɵsanitizeUrlOrResourceUrl, ɵɵsetComponentScope, ɵɵsetNgModuleScope, ɵɵstyleMap, ɵɵstyleMapInterpolate1, ɵɵstyleMapInterpolate2, ɵɵstyleMapInterpolate3, ɵɵstyleMapInterpolate4, ɵɵstyleMapInterpolate5, ɵɵstyleMapInterpolate6, ɵɵstyleMapInterpolate7, ɵɵstyleMapInterpolate8, ɵɵstyleMapInterpolateV, ɵɵstyleProp, ɵɵstylePropInterpolate1, ɵɵstylePropInterpolate2, ɵɵstylePropInterpolate3, ɵɵstylePropInterpolate4, ɵɵstylePropInterpolate5, ɵɵstylePropInterpolate6, ɵɵstylePropInterpolate7, ɵɵstylePropInterpolate8, ɵɵstylePropInterpolateV, ɵɵsyntheticHostListener, ɵɵsyntheticHostProperty, ɵɵtemplate, ɵɵtemplateRefExtractor, ɵɵtext, ɵɵtextInterpolate, ɵɵtextInterpolate1, ɵɵtextInterpolate2, ɵɵtextInterpolate3, ɵɵtextInterpolate4, ɵɵtextInterpolate5, ɵɵtextInterpolate6, ɵɵtextInterpolate7, ɵɵtextInterpolate8, ɵɵtextInterpolateV, ɵɵtrustConstantHtml, ɵɵtrustConstantResourceUrl, ɵɵvalidateIframeAttribute, ɵɵviewQuery };
 //# sourceMappingURL=core.mjs.map