@angular/core 16.0.0-next.4 → 16.0.0-next.6

package/{fesm2020 → fesm2022}/testing.mjs

@@ -1,13 +1,12 @@
 /**
- * @license Angular v16.0.0-next.4
+ * @license Angular v16.0.0-next.6
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
 
-import { getDebugNode, RendererFactory2 as RendererFactory2$1, InjectionToken as InjectionToken$1, ɵstringify, ɵReflectionCapabilities, Directive, Component, Pipe, NgModule, ɵgetInjectableDef, resolveForwardRef as resolveForwardRef$1, ɵNG_COMP_DEF, ɵRender3NgModuleRef, ApplicationInitStatus, LOCALE_ID as LOCALE_ID$1, ɵDEFAULT_LOCALE_ID, ɵsetLocaleId, ɵRender3ComponentFactory, ɵcompileComponent, ɵNG_DIR_DEF, ɵcompileDirective, ɵNG_PIPE_DEF, ɵcompilePipe, ɵNG_MOD_DEF, ɵtransitiveScopesFor, ɵpatchComponentDefWithScope, ɵNG_INJ_DEF, ɵcompileNgModuleDefs, NgZone, ɵprovideNgZoneChangeDetection, Compiler, COMPILER_OPTIONS, ɵNgModuleFactory, ɵisEnvironmentProviders, ModuleWithComponentFactories, ɵconvertToBitFlags, Injector as Injector$1, InjectFlags as InjectFlags$1, ɵsetAllowDuplicateNgModuleIdsForTest, ɵresetCompiledComponents, ɵsetUnknownElementStrictMode as ɵsetUnknownElementStrictMode$1, ɵsetUnknownPropertyStrictMode as ɵsetUnknownPropertyStrictMode$1, ɵgetUnknownElementStrictMode as ɵgetUnknownElementStrictMode$1, ɵgetUnknownPropertyStrictMode as ɵgetUnknownPropertyStrictMode$1, EnvironmentInjector as EnvironmentInjector$1, ɵflushModuleScopingQueueAsMuchAsPossible } from '@angular/core';
+import { getDebugNode, RendererFactory2 as RendererFactory2$1, InjectionToken as InjectionToken$1, ɵstringify, ɵReflectionCapabilities, Directive, Component, Pipe, NgModule, ɵgetInjectableDef, resolveForwardRef as resolveForwardRef$1, ɵNG_COMP_DEF, ɵRender3NgModuleRef, ApplicationInitStatus, LOCALE_ID as LOCALE_ID$1, ɵDEFAULT_LOCALE_ID, ɵsetLocaleId, ɵRender3ComponentFactory, ɵcompileComponent, ɵNG_DIR_DEF, ɵcompileDirective, ɵNG_PIPE_DEF, ɵcompilePipe, ɵNG_MOD_DEF, ɵtransitiveScopesFor, ɵpatchComponentDefWithScope, ɵNG_INJ_DEF, ɵcompileNgModuleDefs, provideZoneChangeDetection, Compiler, COMPILER_OPTIONS, ɵNgModuleFactory, ɵisEnvironmentProviders, ModuleWithComponentFactories, ɵconvertToBitFlags, Injector as Injector$1, InjectFlags as InjectFlags$1, ɵsetAllowDuplicateNgModuleIdsForTest, ɵresetCompiledComponents, ɵsetUnknownElementStrictMode as ɵsetUnknownElementStrictMode$1, ɵsetUnknownPropertyStrictMode as ɵsetUnknownPropertyStrictMode$1, ɵgetUnknownElementStrictMode as ɵgetUnknownElementStrictMode$1, ɵgetUnknownPropertyStrictMode as ɵgetUnknownPropertyStrictMode$1, EnvironmentInjector as EnvironmentInjector$1, NgZone, ɵflushModuleScopingQueueAsMuchAsPossible } from '@angular/core';
 import { ResourceLoader } from '@angular/compiler';
 import { Subject, Subscription } from 'rxjs';
-import { first } from 'rxjs/operators';
 
 /**
  * Wraps a test function in an asynchronous test zone. The test will automatically
@@ -838,7 +837,8 @@ const XSS_SECURITY_URL = 'https://g.co/ng/security#xss';
  *
  * Note: the `message` argument contains a descriptive error message as a string in development
  * mode (when the `ngDevMode` is defined). In production mode (after tree-shaking pass), the
- * `message` argument becomes `false`, thus we account for it in the typings and the runtime logic.
+ * `message` argument becomes `false`, thus we account for it in the typings and the runtime
+ * logic.
  */
 class RuntimeError extends Error {
     constructor(code, message) {
@@ -1640,6 +1640,7 @@ function ngDevModeResetPerfCounters() {
         hydratedComponents: 0,
         dehydratedViewsRemoved: 0,
         dehydratedViewsCleanupRuns: 0,
+        componentsSkippedHydration: 0,
     };
     // Make sure to refer to ngDevMode as ['ngDevMode'] for closure.
     const allowNgDevModeTrue = locationString.indexOf('ngDevMode=false') === -1;
@@ -1842,6 +1843,9 @@ const SOURCE = '__source';
  * - Injector instance: Use the injector for resolution.
  */
 let _currentInjector = undefined;
+function getCurrentInjector() {
+    return _currentInjector;
+}
 function setCurrentInjector(injector) {
     const former = _currentInjector;
     _currentInjector = injector;
@@ -1850,7 +1854,7 @@ function setCurrentInjector(injector) {
 function injectInjectorOnly(token, flags = InjectFlags.Default) {
     if (_currentInjector === undefined) {
         throw new RuntimeError(-203 /* RuntimeErrorCode.MISSING_INJECTION_CONTEXT */, ngDevMode &&
-            `inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with \`EnvironmentInjector#runInContext\`.`);
+            `inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with \`runInInjectionContext\`.`);
     }
     else if (_currentInjector === null) {
         return injectRootLimpMode(token, undefined, flags);
@@ -3216,21 +3220,22 @@ const T_HOST = 6;
 const CLEANUP = 7;
 const CONTEXT = 8;
 const INJECTOR$1 = 9;
-const RENDERER_FACTORY = 10;
+const ENVIRONMENT = 10;
 const RENDERER = 11;
-const SANITIZER = 12;
-const CHILD_HEAD = 13;
-const CHILD_TAIL = 14;
+const CHILD_HEAD = 12;
+const CHILD_TAIL = 13;
 // FIXME(misko): Investigate if the three declarations aren't all same thing.
-const DECLARATION_VIEW = 15;
-const DECLARATION_COMPONENT_VIEW = 16;
-const DECLARATION_LCONTAINER = 17;
-const PREORDER_HOOK_FLAGS = 18;
-const QUERIES = 19;
-const ID = 20;
-const EMBEDDED_VIEW_INJECTOR = 21;
-const ON_DESTROY_HOOKS = 22;
-const HYDRATION = 23;
+const DECLARATION_VIEW = 14;
+const DECLARATION_COMPONENT_VIEW = 15;
+const DECLARATION_LCONTAINER = 16;
+const PREORDER_HOOK_FLAGS = 17;
+const QUERIES = 18;
+const ID = 19;
+const EMBEDDED_VIEW_INJECTOR = 20;
+const ON_DESTROY_HOOKS = 21;
+const HYDRATION = 22;
+const REACTIVE_TEMPLATE_CONSUMER = 23;
+const REACTIVE_HOST_BINDING_CONSUMER = 24;
 /**
  * Size of LView's header. Necessary to adjust for it when setting slots.
  *
@@ -3238,7 +3243,7 @@ const HYDRATION = 23;
  * instruction index into `LView` index. All other indexes should be in the `LView` index space and
  * there should be no need to refer to `HEADER_OFFSET` anywhere else.
  */
-const HEADER_OFFSET = 24;
+const HEADER_OFFSET = 25;
 // Note: This hack is necessary so we don't erroneously get a circular dependency
 // failure based on types.
 const unusedValueExportToPlacateAjd$4 = 1;
@@ -6739,6 +6744,8 @@ function detachView(lContainer, removeIndex) {
 function destroyLView(tView, lView) {
     if (!(lView[FLAGS] & 128 /* LViewFlags.Destroyed */)) {
         const renderer = lView[RENDERER];
+        lView[REACTIVE_TEMPLATE_CONSUMER]?.destroy();
+        lView[REACTIVE_HOST_BINDING_CONSUMER]?.destroy();
         if (renderer.destroyNode) {
             applyView(tView, lView, renderer, 3 /* WalkTNodeTreeAction.Destroy */, null, null);
         }
@@ -7139,15 +7146,12 @@ function nativeRemoveNode(renderer, rNode, isHostElement) {
     }
 }
 /**
- * Removes the contents of a given RElement using a given renderer.
+ * Clears the contents of a given RElement.
  *
- * @param renderer A renderer to be used
  * @param rElement the native RElement to be cleared
  */
-function clearElementContents(renderer, rElement) {
-    while (rElement.firstChild) {
-        nativeRemoveChild(renderer, rElement, rElement.firstChild, false);
-    }
+function clearElementContents(rElement) {
+    rElement.textContent = '';
 }
 /**
  * Performs the operation of `action` on the node. Typically this involves inserting or removing
@@ -8352,7 +8356,7 @@ function validateAgainstEventAttributes(name) {
 }
 function getSanitizer() {
     const lView = getLView();
-    return lView && lView[SANITIZER];
+    return lView && lView[ENVIRONMENT].sanitizer;
 }
 
 /**
@@ -8540,7 +8544,7 @@ function internalImportProvidersFrom(checkForStandaloneCmp, ...sources) {
         // Narrow `source` to access the internal type analogue for `ModuleWithProviders`.
         const internalSource = source;
         if (walkProviderTree(internalSource, providersOut, [], dedup)) {
-            injectorTypesWithProviders || (injectorTypesWithProviders = []);
+            injectorTypesWithProviders ||= [];
             injectorTypesWithProviders.push(internalSource);
         }
     });
@@ -8636,7 +8640,7 @@ function walkProviderTree(container, providersOut, parents, dedup) {
             try {
                 deepForEach(injDef.imports, imported => {
                     if (walkProviderTree(imported, providersOut, parents, dedup)) {
-                        importTypesWithProviders || (importTypesWithProviders = []);
+                        importTypesWithProviders ||= [];
                         // If the processed import is an injector type with providers, we store it in the
                         // list of import types with providers, so that we can process those afterwards.
                         importTypesWithProviders.push(imported);
@@ -9294,6 +9298,13 @@ class TransferState {
         this.store = {};
         this.onSerializeCallbacks = {};
     }
+    /** @nocollapse */
+    static { this.ɵprov = 
+    /** @pureOrBreakMyCode */ ɵɵdefineInjectable({
+        token: TransferState,
+        providedIn: 'root',
+        factory: initTransferState,
+    }); }
     /**
      * Get the value corresponding to a key. Return `defaultValue` if key is not found.
      */
@@ -9348,13 +9359,6 @@ class TransferState {
         return JSON.stringify(this.store);
     }
 }
-/** @nocollapse */
-TransferState.ɵprov = 
-/** @pureOrBreakMyCode */ ɵɵdefineInjectable({
-    token: TransferState,
-    providedIn: 'root',
-    factory: initTransferState,
-});
 function retrieveTransferredState(doc, appId) {
     // Locate the script tag with the JSON data transferred from the server.
     // The id of the script tag is set to the Angular appId + 'state'.
@@ -9550,7 +9554,7 @@ function isRNodeClaimedForHydration(node) {
     return !!node.__claimed;
 }
 function setSegmentHead(hydrationInfo, index, node) {
-    hydrationInfo.segmentHeads ?? (hydrationInfo.segmentHeads = {});
+    hydrationInfo.segmentHeads ??= {};
     hydrationInfo.segmentHeads[index] = node;
 }
 function getSegmentHead(hydrationInfo, index) {
@@ -9629,7 +9633,7 @@ class ComponentFactory$1 {
 }
 
 function noComponentFactoryError(component) {
-    const error = Error(`No component factory found for ${stringify(component)}. Did you add it to @NgModule.entryComponents?`);
+    const error = Error(`No component factory found for ${stringify(component)}.`);
     error[ERROR_COMPONENT] = component;
     return error;
 }
@@ -9658,8 +9662,8 @@ class _NullComponentFactoryResolver {
  *     Component class can be used directly.
  */
 class ComponentFactoryResolver$1 {
+    static { this.NULL = ( /* @__PURE__ */new _NullComponentFactoryResolver()); }
 }
-ComponentFactoryResolver$1.NULL = ( /* @__PURE__ */new _NullComponentFactoryResolver());
 
 /**
  * Creates an ElementRef from the most recent node.
@@ -9698,12 +9702,12 @@ class ElementRef {
     constructor(nativeElement) {
         this.nativeElement = nativeElement;
     }
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = injectElementRef; }
 }
-/**
- * @internal
- * @nocollapse
- */
-ElementRef.__NG_ELEMENT_ID__ = injectElementRef;
 /**
  * Unwraps `ElementRef` and return the `nativeElement`.
  *
@@ -9737,12 +9741,12 @@ class RendererFactory2 {
  * @publicApi
  */
 class Renderer2 {
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = () => injectRenderer2(); }
 }
-/**
- * @internal
- * @nocollapse
- */
-Renderer2.__NG_ELEMENT_ID__ = () => injectRenderer2();
 /** Injects a Renderer2 for the current component. */
 function injectRenderer2() {
     // We need the Renderer to be based on the component that it's being injected into, however since
@@ -9759,13 +9763,13 @@ function injectRenderer2() {
  * @publicApi
  */
 class Sanitizer {
+    /** @nocollapse */
+    static { this.ɵprov = ɵɵdefineInjectable({
+        token: Sanitizer,
+        providedIn: 'root',
+        factory: () => null,
+    }); }
 }
-/** @nocollapse */
-Sanitizer.ɵprov = ɵɵdefineInjectable({
-    token: Sanitizer,
-    providedIn: 'root',
-    factory: () => null,
-});
 
 /**
  * @description Represents the version of Angular
@@ -9783,7 +9787,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('16.0.0-next.4');
+const VERSION = new Version('16.0.0-next.6');
 
 // This default value is when checking the hierarchy for a token.
 //
@@ -9864,11 +9868,11 @@ class ErrorHandler {
     }
 }
 
-const NG_DEV_MODE = typeof ngDevMode === 'undefined' || !!ngDevMode;
+const NG_DEV_MODE$1 = typeof ngDevMode === 'undefined' || !!ngDevMode;
 /**
  * Internal token that specifies whether hydration is enabled.
  */
-const IS_HYDRATION_FEATURE_ENABLED = new InjectionToken(NG_DEV_MODE ? 'IS_HYDRATION_FEATURE_ENABLED' : '');
+const IS_HYDRATION_FEATURE_ENABLED = new InjectionToken(NG_DEV_MODE$1 ? 'IS_HYDRATION_FEATURE_ENABLED' : '');
 // By default (in client rendering mode), we remove all the contents
 // of the host element and render an application after that.
 const PRESERVE_HOST_CONTENT_DEFAULT = false;
@@ -9876,7 +9880,7 @@ const PRESERVE_HOST_CONTENT_DEFAULT = false;
  * Internal token that indicates whether host element content should be
  * retained during the bootstrap.
  */
-const PRESERVE_HOST_CONTENT = new InjectionToken(NG_DEV_MODE ? 'PRESERVE_HOST_CONTENT' : '', {
+const PRESERVE_HOST_CONTENT = new InjectionToken(NG_DEV_MODE$1 ? 'PRESERVE_HOST_CONTENT' : '', {
     providedIn: 'root',
     factory: () => PRESERVE_HOST_CONTENT_DEFAULT,
 });
@@ -9986,6 +9990,310 @@ function getExpressionChangedErrorDetails(lView, bindingIndex, oldValue, newValu
     return { propName: undefined, oldValue, newValue };
 }
 
+/**
+ * A `WeakRef`-compatible reference that fakes the API with a strong reference
+ * internally.
+ */
+class LeakyRef {
+    constructor(ref) {
+        this.ref = ref;
+    }
+    deref() {
+        return this.ref;
+    }
+}
+// `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$1['WeakRef'] ?? LeakyRef;
+function newWeakRef(value) {
+    if (typeof ngDevMode !== 'undefined' && ngDevMode && WeakRefImpl === undefined) {
+        throw new Error(`Angular requires a browser which supports the 'WeakRef' API`);
+    }
+    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.
+}
+
+/**
+ * Counter tracking the next `ProducerId` or `ConsumerId`.
+ */
+let _nextReactiveId = 0;
+/**
+ * Tracks the currently active reactive consumer (or `null` if there is no active
+ * consumer).
+ */
+let activeConsumer = null;
+/**
+ * Whether the graph is currently propagating change notifications.
+ */
+let inNotificationPhase = false;
+function setActiveConsumer(consumer) {
+    const prev = activeConsumer;
+    activeConsumer = consumer;
+    return prev;
+}
+/**
+ * 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.
+ *
+ * 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.
+ *
+ * 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.
+ */
+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;
+    }
+    /**
+     * 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();
+            if (producer === undefined || 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;
+            }
+        }
+        // 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();
+                if (consumer === undefined || consumer.trackingVersion !== edge.atTrackingVersion) {
+                    this.consumers.delete(consumerId);
+                    consumer?.producers.delete(this.id);
+                    continue;
+                }
+                consumer.onConsumerDependencyMayHaveChanged();
+            }
+        }
+        finally {
+            inNotificationPhase = prev;
+        }
+    }
+    /**
+     * 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;
+        }
+        // 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);
+        }
+        else {
+            edge.seenValueVersion = this.valueVersion;
+            edge.atTrackingVersion = activeConsumer.trackingVersion;
+        }
+    }
+    /**
+     * Whether this consumer currently has any producers registered.
+     */
+    get hasProducers() {
+        return this.producers.size > 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;
+    }
+    /**
+     * 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;
+        }
+        // Trigger the `Producer` to update its `valueVersion` if necessary.
+        this.onProducerUpdateValueVersion();
+        // At this point, we can trust `producer.valueVersion`.
+        return this.valueVersion !== lastSeenValueVersion;
+    }
+}
+
+/**
+ * Marks current view and all ancestors dirty.
+ *
+ * Returns the root view because it is found as a byproduct of marking the view tree
+ * dirty, and can be used by methods that consume markViewDirty() to easily schedule
+ * change detection. Otherwise, such methods would need to traverse up the view tree
+ * an additional time to get the root view and schedule a tick on it.
+ *
+ * @param lView The starting LView to mark dirty
+ * @returns the root LView
+ */
+function markViewDirty(lView) {
+    while (lView) {
+        lView[FLAGS] |= 32 /* LViewFlags.Dirty */;
+        const parent = getLViewParent(lView);
+        // Stop traversing up as soon as you find a root view that wasn't attached to any container
+        if (isRootView(lView) && !parent) {
+            return lView;
+        }
+        // continue otherwise
+        lView = parent;
+    }
+    return null;
+}
+
+const NG_DEV_MODE = typeof ngDevMode === 'undefined' || ngDevMode;
+class ReactiveLViewConsumer extends ReactiveNode {
+    constructor() {
+        super(...arguments);
+        this.consumerAllowSignalWrites = false;
+        this._lView = null;
+    }
+    set lView(lView) {
+        NG_DEV_MODE && assertEqual(this._lView, null, 'Consumer already associated with a view.');
+        this._lView = lView;
+    }
+    onConsumerDependencyMayHaveChanged() {
+        NG_DEV_MODE &&
+            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;
+}
+/**
+ * Create a new template consumer pointing at the specified LView.
+ * Sometimes, a previously created consumer may be reused, in order to save on allocations. In that
+ * case, the LView will be updated.
+ */
+function getReactiveLViewConsumer(lView, slot) {
+    return lView[slot] ?? getOrCreateCurrentLViewConsumer();
+}
+/**
+ * Assigns the `currentTemplateContext` to its LView's `REACTIVE_CONSUMER` slot if there are tracked
+ * producers.
+ *
+ * The presence of producers means that a signal was read while the consumer was the active
+ * consumer.
+ *
+ * If no producers are present, we do not assign the current template context. This also means we
+ * can just reuse the template context for the next LView.
+ */
+function commitLViewConsumerIfHasProducers(lView, slot) {
+    const consumer = getOrCreateCurrentLViewConsumer();
+    if (!consumer.hasReadASignal) {
+        return;
+    }
+    lView[slot] = currentConsumer;
+    consumer.lView = lView;
+    currentConsumer = new ReactiveLViewConsumer();
+}
+
 /** A special value which designates that a value has not changed. */
 const NO_CHANGE = (typeof ngDevMode === 'undefined' || ngDevMode) ? { __brand__: 'NO_CHANGE' } : {};
 
@@ -10068,6 +10376,22 @@ function runInInjectionContext(injector, fn) {
         setInjectImplementation(previousInjectImplementation);
     }
 }
+/**
+ * Asserts that the current stack frame is within an injection context and has access to `inject`.
+ *
+ * @param debugFn a reference to the function making the assertion (used for the error message).
+ *
+ * @publicApi
+ */
+function assertInInjectionContext(debugFn) {
+    // Taking a `Function` instead of a string name here prevents the unminified name of the function
+    // from being retained in the bundle regardless of minification.
+    if (!getInjectImplementation() && !getCurrentInjector()) {
+        throw new RuntimeError(-203 /* RuntimeErrorCode.MISSING_INJECTION_CONTEXT */, ngDevMode &&
+            (debugFn.name +
+                '() can only be used within an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`'));
+    }
+}
 
 /**
  * A mapping of the @angular/core API surface used in generated expressions to the actual symbols.
@@ -10220,6 +10544,8 @@ function createInjectorWithoutInjectorInstances(defType, parent = null, addition
  * @publicApi
  */
 class Injector {
+    static { this.THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND; }
+    static { this.NULL = ( /* @__PURE__ */new NullInjector()); }
     static create(options, parent) {
         if (Array.isArray(options)) {
             return createInjector({ name: '' }, parent, options, '');
@@ -10229,20 +10555,18 @@ class Injector {
             return createInjector({ name }, options.parent, options.providers, name);
         }
     }
+    /** @nocollapse */
+    static { this.ɵprov = ɵɵdefineInjectable({
+        token: Injector,
+        providedIn: 'any',
+        factory: () => ɵɵinject(INJECTOR),
+    }); }
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = -1 /* InjectorMarkers.Injector */; }
 }
-Injector.THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
-Injector.NULL = ( /* @__PURE__ */new NullInjector());
-/** @nocollapse */
-Injector.ɵprov = ɵɵdefineInjectable({
-    token: Injector,
-    providedIn: 'any',
-    factory: () => ɵɵinject(INJECTOR),
-});
-/**
- * @internal
- * @nocollapse
- */
-Injector.__NG_ELEMENT_ID__ = -1 /* InjectorMarkers.Injector */;
 
 function findFirstClosedCycle(keys) {
     const res = [];
@@ -10843,6 +11167,7 @@ class ReflectiveInjector {
     }
 }
 class ReflectiveInjector_ {
+    static { this.INJECTOR_KEY = ( /* @__PURE__ */ReflectiveKey.get(Injector)); }
     /**
      * Private
      */
@@ -10998,7 +11323,6 @@ class ReflectiveInjector_ {
         return this.displayName;
     }
 }
-ReflectiveInjector_.INJECTOR_KEY = ( /* @__PURE__ */ReflectiveKey.get(Injector));
 function _mapProviders(injector, fn) {
     const res = [];
     for (let i = 0; i < injector._providers.length; ++i) {
@@ -11072,6 +11396,7 @@ function processHostBindingOpCodes(tView, lView) {
     const hostBindingOpCodes = tView.hostBindingOpCodes;
     if (hostBindingOpCodes === null)
         return;
+    const consumer = getReactiveLViewConsumer(lView, REACTIVE_HOST_BINDING_CONSUMER);
     try {
         for (let i = 0; i < hostBindingOpCodes.length; i++) {
             const opCode = hostBindingOpCodes[i];
@@ -11086,11 +11411,13 @@ function processHostBindingOpCodes(tView, lView) {
                 const hostBindingFn = hostBindingOpCodes[++i];
                 setBindingRootForHostBindings(bindingRootIndx, directiveIdx);
                 const context = lView[directiveIdx];
-                hostBindingFn(2 /* RenderFlags.Update */, context);
+                consumer.runInContext(hostBindingFn, 2 /* RenderFlags.Update */, context);
             }
         }
     }
     finally {
+        lView[REACTIVE_HOST_BINDING_CONSUMER] === null &&
+            commitLViewConsumerIfHasProducers(lView, REACTIVE_HOST_BINDING_CONSUMER);
         setSelectedIndex(-1);
     }
 }
@@ -11124,7 +11451,7 @@ function renderChildComponents(hostLView, components) {
         renderComponent(hostLView, components[i]);
     }
 }
-function createLView(parentLView, tView, context, flags, host, tHostNode, rendererFactory, renderer, sanitizer, injector, embeddedViewInjector, hydrationInfo) {
+function createLView(parentLView, tView, context, flags, host, tHostNode, environment, renderer, injector, embeddedViewInjector, hydrationInfo) {
     const lView = tView.blueprint.slice();
     lView[HOST] = host;
     lView[FLAGS] = flags | 4 /* LViewFlags.CreationMode */ | 64 /* LViewFlags.Attached */ | 8 /* LViewFlags.FirstLViewPass */;
@@ -11136,16 +11463,16 @@ function createLView(parentLView, tView, context, flags, host, tHostNode, render
     ngDevMode && tView.declTNode && parentLView && assertTNodeForLView(tView.declTNode, parentLView);
     lView[PARENT] = lView[DECLARATION_VIEW] = parentLView;
     lView[CONTEXT] = context;
-    lView[RENDERER_FACTORY] = (rendererFactory || parentLView && parentLView[RENDERER_FACTORY]);
-    ngDevMode && assertDefined(lView[RENDERER_FACTORY], 'RendererFactory is required');
+    lView[ENVIRONMENT] = (environment || parentLView && parentLView[ENVIRONMENT]);
+    ngDevMode && assertDefined(lView[ENVIRONMENT], 'LViewEnvironment is required');
     lView[RENDERER] = (renderer || parentLView && parentLView[RENDERER]);
     ngDevMode && assertDefined(lView[RENDERER], 'Renderer is required');
-    lView[SANITIZER] = sanitizer || parentLView && parentLView[SANITIZER] || null;
     lView[INJECTOR$1] = injector || parentLView && parentLView[INJECTOR$1] || null;
     lView[T_HOST] = tHostNode;
     lView[ID] = getUniqueLViewId();
     lView[HYDRATION] = hydrationInfo;
     lView[EMBEDDED_VIEW_INJECTOR] = embeddedViewInjector;
+    lView[REACTIVE_TEMPLATE_CONSUMER] = null;
     ngDevMode &&
         assertEqual(tView.type == 2 /* TViewType.Embedded */ ? parentLView !== null : true, true, 'Embedded views must have parentLView');
     lView[DECLARATION_COMPONENT_VIEW] =
@@ -11318,10 +11645,11 @@ function refreshView(tView, lView, templateFn, context) {
     const flags = lView[FLAGS];
     if ((flags & 128 /* LViewFlags.Destroyed */) === 128 /* LViewFlags.Destroyed */)
         return;
-    enterView(lView);
     // Check no changes mode is a dev only mode used to verify that bindings have not changed
     // since they were assigned. We do not want to execute lifecycle hooks in that mode.
     const isInCheckNoChangesPass = ngDevMode && isInCheckNoChangesMode();
+    !isInCheckNoChangesPass && lView[ENVIRONMENT].effectManager?.flush();
+    enterView(lView);
     try {
         resetPreOrderHookFlags(lView);
         setBindingIndex(tView.bindingStartIndex);
@@ -11430,6 +11758,7 @@ function refreshView(tView, lView, templateFn, context) {
     }
 }
 function executeTemplate(tView, lView, templateFn, rf, context) {
+    const consumer = getReactiveLViewConsumer(lView, REACTIVE_TEMPLATE_CONSUMER);
     const prevSelectedIndex = getSelectedIndex();
     const isUpdatePhase = rf & 2 /* RenderFlags.Update */;
     try {
@@ -11441,9 +11770,12 @@ function executeTemplate(tView, lView, templateFn, rf, context) {
         }
         const preHookType = isUpdatePhase ? 2 /* ProfilerEvent.TemplateUpdateStart */ : 0 /* ProfilerEvent.TemplateCreateStart */;
         profiler(preHookType, context);
-        templateFn(rf, context);
+        consumer.runInContext(templateFn, rf, context);
     }
     finally {
+        if (lView[REACTIVE_TEMPLATE_CONSUMER] === null) {
+            commitLViewConsumerIfHasProducers(lView, REACTIVE_TEMPLATE_CONSUMER);
+        }
         setSelectedIndex(prevSelectedIndex);
         const postHookType = isUpdatePhase ? 3 /* ProfilerEvent.TemplateUpdateEnd */ : 1 /* ProfilerEvent.TemplateCreateEnd */;
         profiler(postHookType, context);
@@ -12233,8 +12565,8 @@ function addComponentLogic(lView, hostTNode, def) {
     const tView = getOrCreateComponentTView(def);
     // Only component views should be added to the view tree directly. Embedded views are
     // accessed through their containers because they may be removed / re-added later.
-    const rendererFactory = lView[RENDERER_FACTORY];
-    const componentView = addToViewTree(lView, createLView(lView, tView, null, def.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, native, hostTNode, rendererFactory, rendererFactory.createRenderer(native, def), null, null, null, null));
+    const rendererFactory = lView[ENVIRONMENT].rendererFactory;
+    const componentView = addToViewTree(lView, createLView(lView, tView, null, def.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, native, hostTNode, null, rendererFactory.createRenderer(native, def), null, null, null));
     // Component view will always be created before any injected LContainers,
     // so this is a regular element, wrap it with the component view
     lView[hostTNode.index] = componentView;
@@ -12547,32 +12879,8 @@ function addToViewTree(lView, lViewOrLContainer) {
 ///////////////////////////////
 //// Change detection
 ///////////////////////////////
-/**
- * Marks current view and all ancestors dirty.
- *
- * Returns the root view because it is found as a byproduct of marking the view tree
- * dirty, and can be used by methods that consume markViewDirty() to easily schedule
- * change detection. Otherwise, such methods would need to traverse up the view tree
- * an additional time to get the root view and schedule a tick on it.
- *
- * @param lView The starting LView to mark dirty
- * @returns the root LView
- */
-function markViewDirty(lView) {
-    while (lView) {
-        lView[FLAGS] |= 32 /* LViewFlags.Dirty */;
-        const parent = getLViewParent(lView);
-        // Stop traversing up as soon as you find a root view that wasn't attached to any container
-        if (isRootView(lView) && !parent) {
-            return lView;
-        }
-        // continue otherwise
-        lView = parent;
-    }
-    return null;
-}
 function detectChangesInternal(tView, lView, context, notifyErrorHandler = true) {
-    const rendererFactory = lView[RENDERER_FACTORY];
+    const rendererFactory = lView[ENVIRONMENT].rendererFactory;
     // Check no changes mode is a dev only mode used to verify that bindings have not changed
     // since they were assigned. We do not want to invoke renderer factory functions in that mode
     // to avoid any possible side-effects.
@@ -12591,6 +12899,9 @@ function detectChangesInternal(tView, lView, context, notifyErrorHandler = true)
     finally {
         if (!checkNoChangesMode && rendererFactory.end)
             rendererFactory.end();
+        // One final flush of the effects queue to catch any effects created in `ngAfterViewInit` or
+        // other post-order hooks.
+        !checkNoChangesMode && lView[ENVIRONMENT].effectManager?.flush();
     }
 }
 function checkNoChangesInternal(tView, lView, context, notifyErrorHandler = true) {
@@ -12713,6 +13024,433 @@ function textBindingInternal(lView, index, value) {
     updateTextNode(lView[RENDERER], element, value);
 }
 
+/**
+ * `DestroyRef` lets you set callbacks to run for any cleanup or destruction behavior.
+ * The scope of this destruction depends on where `DestroyRef` is injected. If `DestroyRef`
+ * is injected in a component or directive, the callbacks run when that component or
+ * directive is destroyed. Otherwise the callbacks run when a corresponding injector is destroyed.
+ *
+ * @publicApi
+ */
+class DestroyRef {
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = injectDestroyRef; }
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ENV_ID__ = (injector) => injector; }
+}
+class NodeInjectorDestroyRef extends DestroyRef {
+    constructor(_lView) {
+        super();
+        this._lView = _lView;
+    }
+    onDestroy(callback) {
+        storeLViewOnDestroy(this._lView, callback);
+        return () => removeLViewOnDestroy(this._lView, callback);
+    }
+}
+function injectDestroyRef() {
+    return new NodeInjectorDestroyRef(getLView());
+}
+
+/**
+ * Symbol used to tell `Signal`s apart from other functions.
+ *
+ * This can be used to auto-unwrap signals in various cases, or to auto-wrap non-signal values.
+ */
+const SIGNAL = Symbol('SIGNAL');
+/**
+ * Checks if the given `value` function is a reactive `Signal`.
+ */
+function isSignal(value) {
+    return 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.
+ *
+ * This allows signals to hold non-primitive values (arrays, objects, other collections) and still
+ * propagate change notification upon explicit mutation without identity change.
+ *
+ * @developerPreview
+ */
+function defaultEquals(a, b) {
+    // `Object.is` compares two values using identity semantics which is desired behavior for
+    // primitive values. If `Object.is` determines two values to be equal we need to make sure that
+    // those don't represent objects (we want to make sure that 2 objects are always considered
+    // "unequal"). The null check is needed for the special case of JavaScript reporting null values
+    // as objects (`typeof null === 'object'`).
+    return (a === null || typeof a !== 'object') && Object.is(a, b);
+}
+
+/**
+ * Create a computed `Signal` which derives a reactive value from an expression.
+ *
+ * @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));
+}
+/**
+ * A dedicated symbol used before a computed value has been calculated for the first time.
+ * Explicitly typed as `any` so we can use it as signal's value.
+ */
+const UNSET = Symbol('UNSET');
+/**
+ * A dedicated symbol used in place of a computed signal value to indicate that a given computation
+ * is in progress. Used to detect cycles in computation chains.
+ * Explicitly typed as `any` so we can use it as signal's value.
+ */
+const COMPUTING = Symbol('COMPUTING');
+/**
+ * A dedicated symbol used in place of a computed signal value to indicate that a given computation
+ * failed. The thrown error is cached until the computation gets dirty again.
+ * 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) {
+            // 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);
+        let newValue;
+        try {
+            newValue = this.computation();
+        }
+        catch (err) {
+            newValue = ERRORED;
+            this.error = err;
+        }
+        finally {
+            setActiveConsumer(prevConsumer);
+        }
+        this.stale = false;
+        if (oldValue !== UNSET && oldValue !== ERRORED && newValue !== ERRORED &&
+            this.equal(oldValue, newValue)) {
+            // No change to `valueVersion` - old and new values are
+            // semantically equivalent.
+            this.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;
+    }
+}
+
+function defaultThrowError() {
+    throw new Error();
+}
+let throwInvalidWriteToSignalErrorFn = defaultThrowError;
+function throwInvalidWriteToSignalError() {
+    throwInvalidWriteToSignalErrorFn();
+}
+function setThrowInvalidWriteToSignalError(fn) {
+    throwInvalidWriteToSignalErrorFn = fn;
+}
+
+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();
+        }
+    }
+    /**
+     * 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();
+    }
+    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),
+    });
+    return signalFn;
+}
+
+/**
+ * Execute an arbitrary function in a non-reactive (non-tracking) context. The executed function
+ * can, optionally, return a value.
+ *
+ * @developerPreview
+ */
+function untracked(nonReactiveReadsFn) {
+    const prevConsumer = setActiveConsumer(null);
+    // We are not trying to catch any particular errors here, just making sure that the consumers
+    // stack is restored in case of errors.
+    try {
+        return nonReactiveReadsFn();
+    }
+    finally {
+        setActiveConsumer(prevConsumer);
+    }
+}
+
+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.consumerAllowSignalWrites = allowSignalWrites;
+    }
+    notify() {
+        if (!this.dirty) {
+            this.schedule(this);
+        }
+        this.dirty = true;
+    }
+    onConsumerDependencyMayHaveChanged() {
+        this.notify();
+    }
+    onProducerUpdateValueVersion() {
+        // Watches are not producers.
+    }
+    /**
+     * Execute the reactive expression in the context of this `Watch` consumer.
+     *
+     * Should be called by the user scheduling algorithm when the provided
+     * `schedule` hook is called by `Watch`.
+     */
+    run() {
+        this.dirty = false;
+        if (this.trackingVersion !== 0 && !this.consumerPollProducersForChange()) {
+            return;
+        }
+        const prevConsumer = setActiveConsumer(this);
+        this.trackingVersion++;
+        try {
+            this.cleanupFn();
+            this.cleanupFn = this.watch() ?? NOOP_CLEANUP_FN;
+        }
+        finally {
+            setActiveConsumer(prevConsumer);
+        }
+    }
+    cleanup() {
+        this.cleanupFn();
+    }
+}
+
+/**
+ * Tracks all effects registered within a given application and runs them via `flush`.
+ */
+class EffectManager {
+    constructor() {
+        this.all = new Set();
+        this.queue = new Map();
+    }
+    create(effectFn, destroyRef, allowSignalWrites) {
+        const zone = Zone.current;
+        const watch = new Watch(effectFn, (watch) => {
+            if (!this.all.has(watch)) {
+                return;
+            }
+            this.queue.set(watch, zone);
+        }, allowSignalWrites);
+        this.all.add(watch);
+        // Effects start dirty.
+        watch.notify();
+        let unregisterOnDestroy;
+        const destroy = () => {
+            watch.cleanup();
+            unregisterOnDestroy?.();
+            this.all.delete(watch);
+            this.queue.delete(watch);
+        };
+        unregisterOnDestroy = destroyRef?.onDestroy(destroy);
+        return {
+            destroy,
+        };
+    }
+    flush() {
+        if (this.queue.size === 0) {
+            return;
+        }
+        for (const [watch, zone] of this.queue) {
+            this.queue.delete(watch);
+            zone.run(() => watch.run());
+        }
+    }
+    get isQueueEmpty() {
+        return this.queue.size === 0;
+    }
+    /** @nocollapse */
+    static { this.ɵprov = ɵɵdefineInjectable({
+        token: EffectManager,
+        providedIn: 'root',
+        factory: () => new EffectManager(),
+    }); }
+}
+/**
+ * Create a global `Effect` for the given reactive function.
+ *
+ * @developerPreview
+ */
+function effect(effectFn, options) {
+    !options?.injector && assertInInjectionContext(effect);
+    const injector = options?.injector ?? inject$1(Injector);
+    const effectManager = injector.get(EffectManager);
+    const destroyRef = options?.manualCleanup !== true ? injector.get(DestroyRef) : null;
+    return effectManager.create(effectFn, destroyRef, !!options?.allowSignalWrites);
+}
+
 /**
  * Compute the static styling (class/style) from `TAttributes`.
  *
@@ -13180,6 +13918,12 @@ class ComponentFactory extends ComponentFactory$1 {
                     'Make sure that any injector used to create this component has a correct parent.');
         }
         const sanitizer = rootViewInjector.get(Sanitizer, null);
+        const effectManager = rootViewInjector.get(EffectManager, null);
+        const environment = {
+            rendererFactory,
+            sanitizer,
+            effectManager,
+        };
         const hostRenderer = rendererFactory.createRenderer(null, this.componentDef);
         // Determine a tag name used for creating host elements when this component is created
         // dynamically. Default to 'div' if this component did not specify any tag name in its selector.
@@ -13191,7 +13935,7 @@ class ComponentFactory extends ComponentFactory$1 {
             16 /* LViewFlags.CheckAlways */ | 256 /* LViewFlags.IsRoot */;
         // Create the root view. Uses empty TView and ContentTemplate.
         const rootTView = createTView(0 /* TViewType.Root */, null, null, 1, 0, null, null, null, null, null, null);
-        const rootLView = createLView(null, rootTView, null, rootFlags, null, null, rendererFactory, hostRenderer, sanitizer, rootViewInjector, null, null);
+        const rootLView = createLView(null, rootTView, null, rootFlags, null, null, environment, hostRenderer, rootViewInjector, null, null);
         // rootView is the parent when bootstrapping
         // TODO(misko): it looks like we are entering view here but we don't really need to as
         // `renderView` does that. However as the code is written it is needed because
@@ -13214,7 +13958,7 @@ class ComponentFactory extends ComponentFactory$1 {
                 rootDirectives = [rootComponentDef];
             }
             const hostTNode = createRootComponentTNode(rootLView, hostRNode);
-            const componentView = createRootComponentView(hostTNode, hostRNode, rootComponentDef, rootDirectives, rootLView, rendererFactory, hostRenderer);
+            const componentView = createRootComponentView(hostTNode, hostRNode, rootComponentDef, rootDirectives, rootLView, environment, hostRenderer);
             tElementNode = getTNode(rootTView, HEADER_OFFSET);
             // TODO(crisbeto): in practice `hostRNode` should always be defined, but there are some tests
             // where the renderer is mocked out and `undefined` is returned. We should update the tests so
@@ -13251,6 +13995,7 @@ class ComponentRef extends ComponentRef$1 {
         this.location = location;
         this._rootLView = _rootLView;
         this._tNode = _tNode;
+        this.previousInputValues = null;
         this.instance = instance;
         this.hostView = this.changeDetectorRef = new RootViewRef(_rootLView);
         this.componentType = componentType;
@@ -13259,8 +14004,16 @@ class ComponentRef extends ComponentRef$1 {
         const inputData = this._tNode.inputs;
         let dataValue;
         if (inputData !== null && (dataValue = inputData[name])) {
+            this.previousInputValues ??= new Map();
+            // Do not set the input if it is the same as the last value
+            // This behavior matches `bindingUpdated` when binding inputs in templates.
+            if (this.previousInputValues.has(name) &&
+                Object.is(this.previousInputValues.get(name), value)) {
+                return;
+            }
             const lView = this._rootLView;
             setInputsForProperty(lView[TVIEW], lView, dataValue, name, value);
+            this.previousInputValues.set(name, value);
             markDirtyIfOnPush(lView, this._tNode.index);
         }
         else {
@@ -13311,7 +14064,7 @@ function createRootComponentTNode(lView, rNode) {
  *
  * @returns Component view created
  */
-function createRootComponentView(tNode, hostRNode, rootComponentDef, rootDirectives, rootView, rendererFactory, hostRenderer, sanitizer) {
+function createRootComponentView(tNode, hostRNode, rootComponentDef, rootDirectives, rootView, environment, hostRenderer) {
     const tView = rootView[TVIEW];
     applyRootComponentStyling(rootDirectives, tNode, hostRNode, hostRenderer);
     // Hydration info is on the host element and needs to be retreived
@@ -13320,8 +14073,8 @@ function createRootComponentView(tNode, hostRNode, rootComponentDef, rootDirecti
     if (hostRNode !== null) {
         hydrationInfo = retrieveHydrationInfo(hostRNode, rootView[INJECTOR$1]);
     }
-    const viewRenderer = rendererFactory.createRenderer(hostRNode, rootComponentDef);
-    const componentView = createLView(rootView, getOrCreateComponentTView(rootComponentDef), null, rootComponentDef.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, rootView[tNode.index], tNode, rendererFactory, viewRenderer, sanitizer || null, null, null, hydrationInfo);
+    const viewRenderer = environment.rendererFactory.createRenderer(hostRNode, rootComponentDef);
+    const componentView = createLView(rootView, getOrCreateComponentTView(rootComponentDef), null, rootComponentDef.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, rootView[tNode.index], tNode, environment, viewRenderer, null, null, hydrationInfo);
     if (tView.firstCreatePass) {
         markAsComponentHost(tView, tNode, rootDirectives.length - 1);
     }
@@ -14991,10 +15744,9 @@ function siblingAfter(skip, from) {
  */
 function stringifyNavigationInstructions(instructions) {
     const container = [];
-    let i = 0;
-    while (i < instructions.length) {
-        const step = instructions[i++];
-        const repeat = instructions[i++];
+    for (let i = 0; i < instructions.length; i += 2) {
+        const step = instructions[i];
+        const repeat = instructions[i + 1];
         for (let r = 0; r < repeat; r++) {
             container.push(step === NodeNavigationStep.FirstChild ? 'firstChild' : 'nextSibling');
         }
@@ -15007,10 +15759,9 @@ function stringifyNavigationInstructions(instructions) {
  */
 function navigateToNode(from, instructions) {
     let node = from;
-    let i = 0;
-    while (i < instructions.length) {
-        const step = instructions[i++];
-        const repeat = instructions[i++];
+    for (let i = 0; i < instructions.length; i += 2) {
+        const step = instructions[i];
+        const repeat = instructions[i + 1];
         for (let r = 0; r < repeat; r++) {
             if (ngDevMode && !node) {
                 throw nodeNotFoundAtPathError(from, stringifyNavigationInstructions(instructions));
@@ -15531,7 +16282,8 @@ function locateOrCreateElementNodeImpl(tView, lView, tNode, renderer, name, inde
             enterSkipHydrationBlock(tNode);
             // Since this isn't hydratable, we need to empty the node
             // so there's no duplicate content after render
-            clearElementContents(renderer, native);
+            clearElementContents(native);
+            ngDevMode && ngDevMode.componentsSkippedHydration++;
         }
         else if (ngDevMode) {
             // If this is not a component host, throw an error.
@@ -15588,7 +16340,6 @@ function ɵɵelementContainerStart(index, attrsIndex, localRefsIndex) {
         elementContainerStartFirstCreatePass(adjustedIndex, tView, lView, attrsIndex, localRefsIndex) :
         tView.data[adjustedIndex];
     setCurrentTNode(tNode, true);
-    ngDevMode && ngDevMode.rendererCreateComment++;
     const comment = _locateOrCreateElementContainerNode(tView, lView, tNode, index);
     lView[adjustedIndex] = comment;
     if (wasLastNodeCreated()) {
@@ -17977,8 +18728,11 @@ function isStylingValuePresent(value) {
  * @param suffix
  */
 function normalizeSuffix(value, suffix) {
-    if (value == null /** || value === undefined */) {
+    if (value == null || value === '') {
         // do nothing
+        // Do not add the suffix if the value is going to be empty.
+        // As it produce invalid CSS, which the browsers will automatically omit but Domino will not.
+        // Example: `"left": "px;"` instead of `"left": ""`.
     }
     else if (typeof suffix === 'string') {
         value = value + suffix;
@@ -21773,17 +22527,19 @@ function createNgModuleRefWithProviders(moduleType, parentInjector, additionalPr
     return new NgModuleRef(moduleType, parentInjector, additionalProviders);
 }
 class EnvironmentNgModuleRefAdapter extends NgModuleRef$1 {
-    constructor(providers, parent, source) {
+    constructor(config) {
         super();
         this.componentFactoryResolver = new ComponentFactoryResolver(this);
         this.instance = null;
         const injector = new R3Injector([
-            ...providers,
+            ...config.providers,
             { provide: NgModuleRef$1, useValue: this },
             { provide: ComponentFactoryResolver$1, useValue: this.componentFactoryResolver },
-        ], parent || getNullInjector(), source, new Set(['environment']));
+        ], config.parent || getNullInjector(), config.debugName, new Set(['environment']));
         this.injector = injector;
-        injector.resolveInjectorInitializers();
+        if (config.runEnvironmentInitializers) {
+            injector.resolveInjectorInitializers();
+        }
     }
     destroy() {
         this.injector.destroy();
@@ -21806,7 +22562,7 @@ class EnvironmentNgModuleRefAdapter extends NgModuleRef$1 {
  * @publicApi
  */
 function createEnvironmentInjector(providers, parent, debugName = null) {
-    const adapter = new EnvironmentNgModuleRefAdapter(providers, parent, debugName);
+    const adapter = new EnvironmentNgModuleRefAdapter({ providers, parent, debugName, runEnvironmentInitializers: true });
     return adapter.injector;
 }
 
@@ -21845,13 +22601,13 @@ class StandaloneService {
             this.cachedInjectors.clear();
         }
     }
+    /** @nocollapse */
+    static { this.ɵprov = ɵɵdefineInjectable({
+        token: StandaloneService,
+        providedIn: 'environment',
+        factory: () => new StandaloneService(ɵɵinject(EnvironmentInjector)),
+    }); }
 }
-/** @nocollapse */
-StandaloneService.ɵprov = ɵɵdefineInjectable({
-    token: StandaloneService,
-    providedIn: 'environment',
-    factory: () => new StandaloneService(ɵɵinject(EnvironmentInjector)),
-});
 /**
  * A feature that acts as a setup code for the {@link StandaloneService}.
  *
@@ -22893,6 +23649,7 @@ function symbolIterator() {
  * @publicApi
  */
 class QueryList {
+    static { Symbol.iterator; }
     /**
      * Returns `Observable` of `QueryList` notifying the subscriber of changes.
      */
@@ -23020,7 +23777,6 @@ class QueryList {
         this.changes.unsubscribe();
     }
 }
-Symbol.iterator;
 
 /**
  * Represents an embedded template that can be used to instantiate embedded views.
@@ -23041,12 +23797,12 @@ Symbol.iterator;
  * @publicApi
  */
 class TemplateRef {
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = injectTemplateRef; }
 }
-/**
- * @internal
- * @nocollapse
- */
-TemplateRef.__NG_ELEMENT_ID__ = injectTemplateRef;
 const ViewEngineTemplateRef = TemplateRef;
 // TODO(alxhub): combine interface and implementation. Currently this is challenging since something
 // in g3 depends on them being separate.
@@ -23074,7 +23830,7 @@ const R3TemplateRef = class TemplateRef extends ViewEngineTemplateRef {
      */
     createEmbeddedViewImpl(context, injector, hydrationInfo) {
         const embeddedTView = this._declarationTContainer.tView;
-        const embeddedLView = createLView(this._declarationLView, embeddedTView, context, 16 /* LViewFlags.CheckAlways */, null, embeddedTView.declTNode, null, null, null, null, injector || null, hydrationInfo || null);
+        const embeddedLView = createLView(this._declarationLView, embeddedTView, context, 16 /* LViewFlags.CheckAlways */, null, embeddedTView.declTNode, null, null, null, injector || null, hydrationInfo || null);
         const declarationLContainer = this._declarationLView[this._declarationTContainer.index];
         ngDevMode && assertLContainer(declarationLContainer);
         embeddedLView[DECLARATION_LCONTAINER] = declarationLContainer;
@@ -23177,21 +23933,16 @@ function cleanupLView(lView) {
  * all dehydrated views from all `LContainer`s along the way.
  */
 function cleanupDehydratedViews(appRef) {
-    // Wait once an app becomes stable and cleanup all views that
-    // were not claimed during the application bootstrap process.
-    // The timing is similar to when we kick off serialization on the server.
-    return appRef.isStable.pipe(first((isStable) => isStable)).toPromise().then(() => {
-        const viewRefs = appRef._views;
-        for (const viewRef of viewRefs) {
-            const lView = getComponentLViewForHydration(viewRef);
-            // An `lView` might be `null` if a `ViewRef` represents
-            // an embedded view (not a component view).
-            if (lView !== null && lView[HOST] !== null) {
-                cleanupLView(lView);
-                ngDevMode && ngDevMode.dehydratedViewsCleanupRuns++;
-            }
+    const viewRefs = appRef._views;
+    for (const viewRef of viewRefs) {
+        const lView = getComponentLViewForHydration(viewRef);
+        // An `lView` might be `null` if a `ViewRef` represents
+        // an embedded view (not a component view).
+        if (lView !== null && lView[HOST] !== null) {
+            cleanupLView(lView);
+            ngDevMode && ngDevMode.dehydratedViewsCleanupRuns++;
         }
-    });
+    }
 }
 
 /**
@@ -23275,7 +24026,7 @@ function findMatchingDehydratedView(lContainer, template) {
  * (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-tree).
+ * creating a [view hierarchy](guide/glossary#view-hierarchy).
  *
  * @see `ComponentRef`
  * @see `EmbeddedViewRef`
@@ -23283,12 +24034,12 @@ function findMatchingDehydratedView(lContainer, template) {
  * @publicApi
  */
 class ViewContainerRef {
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static { this.__NG_ELEMENT_ID__ = injectViewContainerRef; }
 }
-/**
- * @internal
- * @nocollapse
- */
-ViewContainerRef.__NG_ELEMENT_ID__ = injectViewContainerRef;
 /**
  * Creates a ViewContainerRef and stores it on the injector. Or, if the ViewContainerRef
  * already exists, retrieves the existing ViewContainerRef.
@@ -24454,7 +25205,6 @@ function verifySemanticsOfNgModuleDef(moduleType, allowDuplicateDeclarationsInRo
     ];
     exports.forEach(verifyExportsAreDeclaredOrReExported);
     declarations.forEach(decl => verifyDeclarationIsUnique(decl, allowDuplicateDeclarationsInRoot));
-    declarations.forEach(verifyComponentEntryComponentsIsPartOfNgModule);
     const ngModule = getAnnotation(moduleType, 'NgModule');
     if (ngModule) {
         ngModule.imports &&
@@ -24464,8 +25214,6 @@ function verifySemanticsOfNgModuleDef(moduleType, allowDuplicateDeclarationsInRo
             });
         ngModule.bootstrap && deepForEach(ngModule.bootstrap, verifyCorrectBootstrapType);
         ngModule.bootstrap && deepForEach(ngModule.bootstrap, verifyComponentIsPartOfNgModule);
-        ngModule.entryComponents &&
-            deepForEach(ngModule.entryComponents, verifyComponentIsPartOfNgModule);
     }
     // Throw Error if any errors were detected.
     if (errors.length) {
@@ -24543,16 +25291,6 @@ function verifySemanticsOfNgModuleDef(moduleType, allowDuplicateDeclarationsInRo
                 `function for bootstrap instead.`);
         }
     }
-    function verifyComponentEntryComponentsIsPartOfNgModule(type) {
-        type = resolveForwardRef(type);
-        if (getComponentDef$1(type)) {
-            // We know we are component
-            const component = getAnnotation(type, 'Component');
-            if (component && component.entryComponents) {
-                deepForEach(component.entryComponents, verifyComponentIsPartOfNgModule);
-            }
-        }
-    }
     function verifySemanticsOfNgModuleImport(type, importingModule) {
         type = resolveForwardRef(type);
         const directiveDef = getComponentDef$1(type) || getDirectiveDef(type);
@@ -25621,9 +26359,8 @@ class TestBedCompiler {
         ɵcompileNgModuleDefs(RootScopeModule, {
             providers: [...this.rootProviderOverrides],
         });
-        const ngZone = new NgZone({ enableLongStackTrace: true });
         const providers = [
-            ɵprovideNgZoneChangeDetection(ngZone),
+            provideZoneChangeDetection(),
             { provide: Compiler, useFactory: () => new R3TestCompiler(this) },
             ...this.providers,
             ...this.providerOverrides,
@@ -25852,6 +26589,7 @@ class TestBedImpl {
          */
         this.globalCompilationChecked = false;
     }
+    static { this._INSTANCE = null; }
     static get INSTANCE() {
         return TestBedImpl._INSTANCE = TestBedImpl._INSTANCE || new TestBedImpl();
     }
@@ -26261,7 +26999,6 @@ class TestBedImpl {
         }
     }
 }
-TestBedImpl._INSTANCE = null;
 /**
  * @description
  * Configures and initializes environment for unit testing and provides methods for