diff --git a/107.86415ee5e99c7048.js b/107.dbecfa80f642d9a0.js
similarity index 99%
rename from 107.86415ee5e99c7048.js
rename to 107.dbecfa80f642d9a0.js
index 3f7d3c53..8a413426 100644
--- a/107.86415ee5e99c7048.js
+++ b/107.dbecfa80f642d9a0.js
@@ -1660,7 +1660,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "ɵɵviewQuerySignal": () => (/* binding */ ɵɵviewQuerySignal)
 /* harmony export */ });
 /* harmony import */ var _home_runner_work_microzord_microzord_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(1528);
-/* harmony import */ var _angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6008);
+/* harmony import */ var _angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(536);
 /* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5657);
 /* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6928);
 /* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6700);
@@ -1668,7 +1668,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5084);
 
 /**
- * @license Angular v17.2.3
+ * @license Angular v17.2.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -1777,7 +1777,12 @@ class EventEmitter_ extends rxjs__WEBPACK_IMPORTED_MODULE_1__/* .Subject */ .E {
     this.__isAsync = isAsync;
   }
   emit(value) {
-    super.next(value);
+    const prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(null);
+    try {
+      super.next(value);
+    } finally {
+      (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
+    }
   }
   subscribe(observerOrNext, error, complete) {
     let nextFn = observerOrNext;
@@ -2049,6 +2054,11 @@ function assertOneOf(value, ...validValues) {
   if (validValues.indexOf(value) !== -1) return true;
   throwError(`Expected value to be one of ${JSON.stringify(validValues)} but was ${JSON.stringify(value)}.`);
 }
+function assertNotReactive(fn) {
+  if ((0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.getActiveConsumer)() !== null) {
+    throwError(`${fn}() should never be called in a reactive context.`);
+  }
+}
 
 /**
  * The strategy that the default change detector uses to detect changes.
@@ -6592,6 +6602,7 @@ class R3Injector extends EnvironmentInjector {
     this.assertNotDestroyed();
     // Set destroyed = true first, in case lifecycle hooks re-enter destroy().
     this._destroyed = true;
+    const prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(null);
     try {
       // Call all the lifecycle hooks.
       for (const service of this._ngOnDestroyHooks) {
@@ -6609,6 +6620,7 @@ class R3Injector extends EnvironmentInjector {
       this.records.clear();
       this._ngOnDestroyHooks.clear();
       this.injectorDefTypes.clear();
+      (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
     }
   }
   onDestroy(callback) {
@@ -6709,6 +6721,7 @@ class R3Injector extends EnvironmentInjector {
   }
   /** @internal */
   resolveInjectorInitializers() {
+    const prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(null);
     const previousInjector = setCurrentInjector(this);
     const previousInjectImplementation = setInjectImplementation(undefined);
     let prevInjectContext;
@@ -6730,6 +6743,7 @@ class R3Injector extends EnvironmentInjector {
       setCurrentInjector(previousInjector);
       setInjectImplementation(previousInjectImplementation);
       ngDevMode && setInjectorProfilerContext(prevInjectContext);
+      (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
     }
   }
   toString() {
@@ -6793,23 +6807,28 @@ class R3Injector extends EnvironmentInjector {
     this.records.set(token, record);
   }
   hydrate(token, record) {
-    if (ngDevMode && record.value === CIRCULAR) {
-      throwCyclicDependencyError(stringify(token));
-    } else if (record.value === NOT_YET) {
-      record.value = CIRCULAR;
-      if (ngDevMode) {
-        runInInjectorProfilerContext(this, token, () => {
+    const prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(null);
+    try {
+      if (ngDevMode && record.value === CIRCULAR) {
+        throwCyclicDependencyError(stringify(token));
+      } else if (record.value === NOT_YET) {
+        record.value = CIRCULAR;
+        if (ngDevMode) {
+          runInInjectorProfilerContext(this, token, () => {
+            record.value = record.factory();
+            emitInstanceCreatedByInjectorEvent(record.value);
+          });
+        } else {
           record.value = record.factory();
-          emitInstanceCreatedByInjectorEvent(record.value);
-        });
-      } else {
-        record.value = record.factory();
+        }
       }
+      if (typeof record.value === 'object' && record.value && hasOnDestroy(record.value)) {
+        this._ngOnDestroyHooks.add(record.value);
+      }
+      return record.value;
+    } finally {
+      (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
     }
-    if (typeof record.value === 'object' && record.value && hasOnDestroy(record.value)) {
-      this._ngOnDestroyHooks.add(record.value);
-    }
-    return record.value;
   }
   injectableDefInScope(def) {
     if (!def.providedIn) {
@@ -11028,7 +11047,11 @@ function destroyLView(tView, lView) {
  * @param lView The LView to clean up
  */
 function cleanUpView(tView, lView) {
-  if (!(lView[FLAGS] & 256 /* LViewFlags.Destroyed */)) {
+  if (lView[FLAGS] & 256 /* LViewFlags.Destroyed */) {
+    return;
+  }
+  const prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(null);
+  try {
     // Usually the Attached flag is removed when the view is detached from its parent, however
     // if it's a root view, the flag won't be unset hence why we're also removing on destroy.
     lView[FLAGS] &= ~128 /* LViewFlags.Attached */;
@@ -11061,10 +11084,13 @@ function cleanUpView(tView, lView) {
     }
     // Unregister the view once everything else has been cleaned up.
     unregisterLView(lView);
+  } finally {
+    (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
   }
 }
 /** Removes listeners and unsubscribes from output subscriptions */
 function processCleanups(tView, lView) {
+  ngDevMode && assertNotReactive(processCleanups.name);
   const tCleanup = tView.cleanup;
   const lCleanup = lView[CLEANUP];
   if (tCleanup !== null) {
@@ -11106,6 +11132,7 @@ function processCleanups(tView, lView) {
 }
 /** Calls onDestroy hooks for this view */
 function executeOnDestroys(tView, lView) {
+  ngDevMode && assertNotReactive(executeOnDestroys.name);
   let destroyHooks;
   if (tView != null && (destroyHooks = tView.destroyHooks) != null) {
     for (let i = 0; i < destroyHooks.length; i += 2) {
@@ -13054,6 +13081,7 @@ function syncViewWithBlueprint(tView, lView) {
  */
 function renderView(tView, lView, context) {
   ngDevMode && assertEqual(isCreationMode(lView), true, 'Should be run in creation mode');
+  ngDevMode && assertNotReactive(renderView.name);
   enterView(lView);
   try {
     const viewQuery = tView.viewQuery;
@@ -13114,23 +13142,28 @@ function renderChildComponents(hostLView, components) {
   }
 }
 function createAndRenderEmbeddedLView(declarationLView, templateTNode, context, options) {
-  const embeddedTView = templateTNode.tView;
-  ngDevMode && assertDefined(embeddedTView, 'TView must be defined for a template node.');
-  ngDevMode && assertTNodeForLView(templateTNode, declarationLView);
-  // 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?.dehydratedView ?? null);
-  const declarationLContainer = declarationLView[templateTNode.index];
-  ngDevMode && assertLContainer(declarationLContainer);
-  embeddedLView[DECLARATION_LCONTAINER] = declarationLContainer;
-  const declarationViewLQueries = declarationLView[QUERIES];
-  if (declarationViewLQueries !== null) {
-    embeddedLView[QUERIES] = declarationViewLQueries.createEmbeddedView(embeddedTView);
-  }
-  // execute creation mode of a view
-  renderView(embeddedTView, embeddedLView, context);
-  return embeddedLView;
+  const prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(null);
+  try {
+    const embeddedTView = templateTNode.tView;
+    ngDevMode && assertDefined(embeddedTView, 'TView must be defined for a template node.');
+    ngDevMode && assertTNodeForLView(templateTNode, declarationLView);
+    // 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?.dehydratedView ?? null);
+    const declarationLContainer = declarationLView[templateTNode.index];
+    ngDevMode && assertLContainer(declarationLContainer);
+    embeddedLView[DECLARATION_LCONTAINER] = declarationLContainer;
+    const declarationViewLQueries = declarationLView[QUERIES];
+    if (declarationViewLQueries !== null) {
+      embeddedLView[QUERIES] = declarationViewLQueries.createEmbeddedView(embeddedTView);
+    }
+    // execute creation mode of a view
+    renderView(embeddedTView, embeddedLView, context);
+    return embeddedLView;
+  } finally {
+    (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
+  }
 }
 function getLViewFromLContainer(lContainer, index) {
   const adjustedIndex = CONTAINER_HEADER_OFFSET + index;
@@ -15009,10 +15042,56 @@ let Sanitizer = /*#__PURE__*/(() => {
 const NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR = {};
 
 /**
- * Checks if the given `value` is a reactive `Signal`.
+ * `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
  */
-function isSignal(value) {
-  return typeof value === 'function' && value[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL] !== undefined;
+let DestroyRef = /*#__PURE__*/(() => {
+  class DestroyRef {
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static #_ = this.__NG_ELEMENT_ID__ = injectDestroyRef;
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static #_2 = this.__NG_ENV_ID__ = injector => injector;
+  }
+  return DestroyRef;
+})();
+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());
+}
+
+/**
+ * Asserts that the current stack frame is not within a reactive context. Useful
+ * to disallow certain code from running inside a reactive context (see {@link toSignal}).
+ *
+ * @param debugFn a reference to the function making the assertion (used for the error message).
+ *
+ * @publicApi
+ */
+function assertNotInReactiveContext(debugFn, extraContext) {
+  // Taking a `Function` instead of a string name here prevents the un-minified name of the function
+  // from being retained in the bundle regardless of minification.
+  if ((0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.getActiveConsumer)() !== null) {
+    throw new RuntimeError(-602 /* RuntimeErrorCode.ASSERTION_NOT_INSIDE_REACTIVE_CONTEXT */, ngDevMode && `${debugFn.name}() cannot be called from within a reactive context.${extraContext ? ` ${extraContext}` : ''}`);
+  }
 }
 const markedFeatures = /*#__PURE__*/new Set();
 // tslint:disable:ban
@@ -15034,6993 +15113,5669 @@ function performanceMarkFeature(feature) {
     }
   });
 }
-
-/**
- * Create a computed `Signal` which derives a reactive value from an expression.
- */
-function computed(computation, options) {
-  performanceMarkFeature('NgSignals');
-  const getter = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.createComputed)(computation);
-  if (options?.equal) {
-    getter[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL].equal = options.equal;
-  }
-  if (ngDevMode) {
-    getter.toString = () => `[Computed: ${getter()}]`;
-  }
-  return getter;
-}
-
-/** Symbol used distinguish `WritableSignal` from other non-writable signals and functions. */
-const WRITABLE_SIGNAL = /* @__PURE__ */(/* unused pure expression or super */ null && (Symbol('WRITABLE_SIGNAL')));
-/**
- * Utility function used during template type checking to extract the value from a `WritableSignal`.
- * @codeGenApi
- */
-function ɵunwrapWritableSignal(value) {
-  // Note: needs to be kept in sync with the copy in `fake_core/index.ts`.
-  // Note: the function uses `WRITABLE_SIGNAL` as a brand instead of `WritableSignal<T>`,
-  // because the latter incorrectly unwraps non-signal getter functions.
-  return null;
-}
-/**
- * Create a `Signal` that can be set or updated directly.
- */
-function signal(initialValue, options) {
-  performanceMarkFeature('NgSignals');
-  const signalFn = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.createSignal)(initialValue);
-  const node = signalFn[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL];
-  if (options?.equal) {
-    node.equal = options.equal;
-  }
-  signalFn.set = newValue => (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.signalSetFn)(node, newValue);
-  signalFn.update = updateFn => (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.signalUpdateFn)(node, updateFn);
-  signalFn.asReadonly = signalAsReadonlyFn.bind(signalFn);
-  if (ngDevMode) {
-    signalFn.toString = () => `[Signal: ${signalFn()}]`;
-  }
-  return signalFn;
-}
-function signalAsReadonlyFn() {
-  const node = this[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL];
-  if (node.readonlyFn === undefined) {
-    const readonlyFn = () => this();
-    readonlyFn[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL] = node;
-    node.readonlyFn = readonlyFn;
-  }
-  return node.readonlyFn;
-}
-/**
- * Checks if the given `value` is a writeable signal.
- */
-function isWritableSignal(value) {
-  return isSignal(value) && typeof value.set === 'function';
-}
-
-/**
- * Execute an arbitrary function in a non-reactive (non-tracking) context. The executed function
- * can, optionally, return a value.
- */
-function untracked(nonReactiveReadsFn) {
-  const prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.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 {
-    (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
-  }
-}
-function isIterable(obj) {
-  return obj !== null && typeof obj === 'object' && obj[Symbol.iterator] !== undefined;
-}
-function isListLikeIterable(obj) {
-  if (!isJsObject(obj)) return false;
-  return Array.isArray(obj) || !(obj instanceof Map) &&
-  // JS Map are iterables but return entries as [k, v]
-  Symbol.iterator in obj; // JS Iterable have a Symbol.iterator prop
-}
-function areIterablesEqual(a, b, comparator) {
-  const iterator1 = a[Symbol.iterator]();
-  const iterator2 = b[Symbol.iterator]();
-  while (true) {
-    const item1 = iterator1.next();
-    const item2 = iterator2.next();
-    if (item1.done && item2.done) return true;
-    if (item1.done || item2.done) return false;
-    if (!comparator(item1.value, item2.value)) return false;
-  }
+function noop(...args) {
+  // Do nothing.
 }
-function iterateListLike(obj, fn) {
-  if (Array.isArray(obj)) {
-    for (let i = 0; i < obj.length; i++) {
-      fn(obj[i]);
+function getNativeRequestAnimationFrame() {
+  // Note: the `getNativeRequestAnimationFrame` is used in the `NgZone` class, but we cannot use the
+  // `inject` function. The `NgZone` instance may be created manually, and thus the injection
+  // context will be unavailable. This might be enough to check whether `requestAnimationFrame` is
+  // available because otherwise, we'll fall back to `setTimeout`.
+  const isBrowser = typeof _global['requestAnimationFrame'] === 'function';
+  // Note: `requestAnimationFrame` is unavailable when the code runs in the Node.js environment. We
+  // use `setTimeout` because no changes are required other than checking if the current platform is
+  // the browser. `setTimeout` is a well-established API that is available in both environments.
+  // `requestAnimationFrame` is used in the browser to coalesce event tasks since event tasks are
+  // usually executed within the same rendering frame (but this is more implementation details of
+  // browsers).
+  let nativeRequestAnimationFrame = _global[isBrowser ? 'requestAnimationFrame' : 'setTimeout'];
+  let nativeCancelAnimationFrame = _global[isBrowser ? 'cancelAnimationFrame' : 'clearTimeout'];
+  if (typeof Zone !== 'undefined' && nativeRequestAnimationFrame && nativeCancelAnimationFrame) {
+    // Note: zone.js sets original implementations on patched APIs behind the
+    // `__zone_symbol__OriginalDelegate` key (see `attachOriginToPatched`). Given the following
+    // example: `window.requestAnimationFrame.__zone_symbol__OriginalDelegate`; this would return an
+    // unpatched implementation of the `requestAnimationFrame`, which isn't intercepted by the
+    // Angular zone. We use the unpatched implementation to avoid another change detection when
+    // coalescing tasks.
+    const unpatchedRequestAnimationFrame = nativeRequestAnimationFrame[Zone.__symbol__('OriginalDelegate')];
+    if (unpatchedRequestAnimationFrame) {
+      nativeRequestAnimationFrame = unpatchedRequestAnimationFrame;
     }
-  } else {
-    const iterator = obj[Symbol.iterator]();
-    let item;
-    while (!(item = iterator.next()).done) {
-      fn(item.value);
+    const unpatchedCancelAnimationFrame = nativeCancelAnimationFrame[Zone.__symbol__('OriginalDelegate')];
+    if (unpatchedCancelAnimationFrame) {
+      nativeCancelAnimationFrame = unpatchedCancelAnimationFrame;
     }
   }
+  return {
+    nativeRequestAnimationFrame,
+    nativeCancelAnimationFrame
+  };
 }
-function isJsObject(o) {
-  return o !== null && (typeof o === 'function' || typeof o === 'object');
-}
-class DefaultIterableDifferFactory {
-  constructor() {}
-  supports(obj) {
-    return isListLikeIterable(obj);
+class AsyncStackTaggingZoneSpec {
+  constructor(namePrefix, consoleAsyncStackTaggingImpl = console) {
+    this.name = 'asyncStackTagging for ' + namePrefix;
+    this.createTask = consoleAsyncStackTaggingImpl?.createTask ?? (() => null);
   }
-  create(trackByFn) {
-    return new DefaultIterableDiffer(trackByFn);
+  onScheduleTask(delegate, _current, target, task) {
+    task.consoleTask = this.createTask(`Zone - ${task.source || task.type}`);
+    return delegate.scheduleTask(target, task);
+  }
+  onInvokeTask(delegate, _currentZone, targetZone, task, applyThis, applyArgs) {
+    let ret;
+    if (task.consoleTask) {
+      ret = task.consoleTask.run(() => delegate.invokeTask(targetZone, task, applyThis, applyArgs));
+    } else {
+      ret = delegate.invokeTask(targetZone, task, applyThis, applyArgs);
+    }
+    return ret;
   }
 }
-const trackByIdentity = (index, item) => item;
+
 /**
- * @deprecated v4.0.0 - Should not be part of public API.
+ * An injectable service for executing work inside or outside of the Angular zone.
+ *
+ * The most common use of this service is to optimize performance when starting a work consisting of
+ * one or more asynchronous tasks that don't require UI updates or error handling to be handled by
+ * Angular. Such tasks can be kicked off via {@link #runOutsideAngular} and if needed, these tasks
+ * can reenter the Angular zone via {@link #run}.
+ *
+ * <!-- TODO: add/fix links to:
+ *   - docs explaining zones and the use of zones in Angular and change-detection
+ *   - link to runOutsideAngular/run (throughout this file!)
+ *   -->
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```
+ * import {Component, NgZone} from '@angular/core';
+ * import {NgIf} from '@angular/common';
+ *
+ * @Component({
+ *   selector: 'ng-zone-demo',
+ *   template: `
+ *     <h2>Demo: NgZone</h2>
+ *
+ *     <p>Progress: {{progress}}%</p>
+ *     <p *ngIf="progress >= 100">Done processing {{label}} of Angular zone!</p>
+ *
+ *     <button (click)="processWithinAngularZone()">Process within Angular zone</button>
+ *     <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
+ *   `,
+ * })
+ * export class NgZoneDemo {
+ *   progress: number = 0;
+ *   label: string;
+ *
+ *   constructor(private _ngZone: NgZone) {}
+ *
+ *   // Loop inside the Angular zone
+ *   // so the UI DOES refresh after each setTimeout cycle
+ *   processWithinAngularZone() {
+ *     this.label = 'inside';
+ *     this.progress = 0;
+ *     this._increaseProgress(() => console.log('Inside Done!'));
+ *   }
+ *
+ *   // Loop outside of the Angular zone
+ *   // so the UI DOES NOT refresh after each setTimeout cycle
+ *   processOutsideOfAngularZone() {
+ *     this.label = 'outside';
+ *     this.progress = 0;
+ *     this._ngZone.runOutsideAngular(() => {
+ *       this._increaseProgress(() => {
+ *         // reenter the Angular zone and display done
+ *         this._ngZone.run(() => { console.log('Outside Done!'); });
+ *       });
+ *     });
+ *   }
+ *
+ *   _increaseProgress(doneCallback: () => void) {
+ *     this.progress += 1;
+ *     console.log(`Current progress: ${this.progress}%`);
+ *
+ *     if (this.progress < 100) {
+ *       window.setTimeout(() => this._increaseProgress(doneCallback), 10);
+ *     } else {
+ *       doneCallback();
+ *     }
+ *   }
+ * }
+ * ```
+ *
  * @publicApi
  */
-class DefaultIterableDiffer {
-  constructor(trackByFn) {
-    this.length = 0;
-    // Keeps track of the used records at any point in time (during & across `_check()` calls)
-    this._linkedRecords = null;
-    // Keeps track of the removed records at any point in time during `_check()` calls.
-    this._unlinkedRecords = null;
-    this._previousItHead = null;
-    this._itHead = null;
-    this._itTail = null;
-    this._additionsHead = null;
-    this._additionsTail = null;
-    this._movesHead = null;
-    this._movesTail = null;
-    this._removalsHead = null;
-    this._removalsTail = null;
-    // Keeps track of records where custom track by is the same, but item identity has changed
-    this._identityChangesHead = null;
-    this._identityChangesTail = null;
-    this._trackByFn = trackByFn || trackByIdentity;
-  }
-  forEachItem(fn) {
-    let record;
-    for (record = this._itHead; record !== null; record = record._next) {
-      fn(record);
+class NgZone {
+  constructor({
+    enableLongStackTrace = false,
+    shouldCoalesceEventChangeDetection = false,
+    shouldCoalesceRunChangeDetection = false
+  }) {
+    this.hasPendingMacrotasks = false;
+    this.hasPendingMicrotasks = false;
+    /**
+     * Whether there are no outstanding microtasks or macrotasks.
+     */
+    this.isStable = true;
+    /**
+     * Notifies when code enters Angular Zone. This gets fired first on VM Turn.
+     */
+    this.onUnstable = new EventEmitter(false);
+    /**
+     * Notifies when there is no more microtasks enqueued in the current VM Turn.
+     * This is a hint for Angular to do change detection, which may enqueue more microtasks.
+     * For this reason this event can fire multiple times per VM Turn.
+     */
+    this.onMicrotaskEmpty = new EventEmitter(false);
+    /**
+     * Notifies when the last `onMicrotaskEmpty` has run and there are no more microtasks, which
+     * implies we are about to relinquish VM turn.
+     * This event gets called just once.
+     */
+    this.onStable = new EventEmitter(false);
+    /**
+     * Notifies that an error has been delivered.
+     */
+    this.onError = new EventEmitter(false);
+    if (typeof Zone == 'undefined') {
+      throw new RuntimeError(908 /* RuntimeErrorCode.MISSING_ZONEJS */, ngDevMode && `In this configuration Angular requires Zone.js`);
     }
-  }
-  forEachOperation(fn) {
-    let nextIt = this._itHead;
-    let nextRemove = this._removalsHead;
-    let addRemoveOffset = 0;
-    let moveOffsets = null;
-    while (nextIt || nextRemove) {
-      // Figure out which is the next record to process
-      // Order: remove, add, move
-      const record = !nextRemove || nextIt && nextIt.currentIndex < getPreviousIndex(nextRemove, addRemoveOffset, moveOffsets) ? nextIt : nextRemove;
-      const adjPreviousIndex = getPreviousIndex(record, addRemoveOffset, moveOffsets);
-      const currentIndex = record.currentIndex;
-      // consume the item, and adjust the addRemoveOffset and update moveDistance if necessary
-      if (record === nextRemove) {
-        addRemoveOffset--;
-        nextRemove = nextRemove._nextRemoved;
-      } else {
-        nextIt = nextIt._next;
-        if (record.previousIndex == null) {
-          addRemoveOffset++;
-        } else {
-          // INVARIANT:  currentIndex < previousIndex
-          if (!moveOffsets) moveOffsets = [];
-          const localMovePreviousIndex = adjPreviousIndex - addRemoveOffset;
-          const localCurrentIndex = currentIndex - addRemoveOffset;
-          if (localMovePreviousIndex != localCurrentIndex) {
-            for (let i = 0; i < localMovePreviousIndex; i++) {
-              const offset = i < moveOffsets.length ? moveOffsets[i] : moveOffsets[i] = 0;
-              const index = offset + i;
-              if (localCurrentIndex <= index && index < localMovePreviousIndex) {
-                moveOffsets[i] = offset + 1;
-              }
-            }
-            const previousIndex = record.previousIndex;
-            moveOffsets[previousIndex] = localCurrentIndex - localMovePreviousIndex;
-          }
-        }
-      }
-      if (adjPreviousIndex !== currentIndex) {
-        fn(record, adjPreviousIndex, currentIndex);
-      }
+    Zone.assertZonePatched();
+    const self = this;
+    self._nesting = 0;
+    self._outer = self._inner = Zone.current;
+    // AsyncStackTaggingZoneSpec provides `linked stack traces` to show
+    // where the async operation is scheduled. For more details, refer
+    // to this article, https://developer.chrome.com/blog/devtools-better-angular-debugging/
+    // And we only import this AsyncStackTaggingZoneSpec in development mode,
+    // in the production mode, the AsyncStackTaggingZoneSpec will be tree shaken away.
+    if (ngDevMode) {
+      self._inner = self._inner.fork(new AsyncStackTaggingZoneSpec('Angular'));
     }
-  }
-  forEachPreviousItem(fn) {
-    let record;
-    for (record = this._previousItHead; record !== null; record = record._nextPrevious) {
-      fn(record);
+    if (Zone['TaskTrackingZoneSpec']) {
+      self._inner = self._inner.fork(new Zone['TaskTrackingZoneSpec']());
     }
-  }
-  forEachAddedItem(fn) {
-    let record;
-    for (record = this._additionsHead; record !== null; record = record._nextAdded) {
-      fn(record);
+    if (enableLongStackTrace && Zone['longStackTraceZoneSpec']) {
+      self._inner = self._inner.fork(Zone['longStackTraceZoneSpec']);
     }
+    // if shouldCoalesceRunChangeDetection is true, all tasks including event tasks will be
+    // coalesced, so shouldCoalesceEventChangeDetection option is not necessary and can be skipped.
+    self.shouldCoalesceEventChangeDetection = !shouldCoalesceRunChangeDetection && shouldCoalesceEventChangeDetection;
+    self.shouldCoalesceRunChangeDetection = shouldCoalesceRunChangeDetection;
+    self.lastRequestAnimationFrameId = -1;
+    self.nativeRequestAnimationFrame = getNativeRequestAnimationFrame().nativeRequestAnimationFrame;
+    forkInnerZoneWithAngularBehavior(self);
   }
-  forEachMovedItem(fn) {
-    let record;
-    for (record = this._movesHead; record !== null; record = record._nextMoved) {
-      fn(record);
-    }
+  /**
+    This method checks whether the method call happens within an Angular Zone instance.
+  */
+  static isInAngularZone() {
+    // Zone needs to be checked, because this method might be called even when NoopNgZone is used.
+    return typeof Zone !== 'undefined' && Zone.current.get('isAngularZone') === true;
   }
-  forEachRemovedItem(fn) {
-    let record;
-    for (record = this._removalsHead; record !== null; record = record._nextRemoved) {
-      fn(record);
+  /**
+    Assures that the method is called within the Angular Zone, otherwise throws an error.
+  */
+  static assertInAngularZone() {
+    if (!NgZone.isInAngularZone()) {
+      throw new RuntimeError(909 /* RuntimeErrorCode.UNEXPECTED_ZONE_STATE */, ngDevMode && 'Expected to be in Angular Zone, but it is not!');
     }
   }
-  forEachIdentityChange(fn) {
-    let record;
-    for (record = this._identityChangesHead; record !== null; record = record._nextIdentityChange) {
-      fn(record);
+  /**
+    Assures that the method is called outside of the Angular Zone, otherwise throws an error.
+  */
+  static assertNotInAngularZone() {
+    if (NgZone.isInAngularZone()) {
+      throw new RuntimeError(909 /* RuntimeErrorCode.UNEXPECTED_ZONE_STATE */, ngDevMode && 'Expected to not be in Angular Zone, but it is!');
     }
   }
-  diff(collection) {
-    if (collection == null) collection = [];
-    if (!isListLikeIterable(collection)) {
-      throw new RuntimeError(900 /* RuntimeErrorCode.INVALID_DIFFER_INPUT */, ngDevMode && `Error trying to diff '${stringify(collection)}'. Only arrays and iterables are allowed`);
-    }
-    if (this.check(collection)) {
-      return this;
-    } else {
-      return null;
-    }
-  }
-  onDestroy() {}
-  check(collection) {
-    this._reset();
-    let record = this._itHead;
-    let mayBeDirty = false;
-    let index;
-    let item;
-    let itemTrackBy;
-    if (Array.isArray(collection)) {
-      this.length = collection.length;
-      for (let index = 0; index < this.length; index++) {
-        item = collection[index];
-        itemTrackBy = this._trackByFn(index, item);
-        if (record === null || !Object.is(record.trackById, itemTrackBy)) {
-          record = this._mismatch(record, item, itemTrackBy, index);
-          mayBeDirty = true;
-        } else {
-          if (mayBeDirty) {
-            // TODO(misko): can we limit this to duplicates only?
-            record = this._verifyReinsertion(record, item, itemTrackBy, index);
-          }
-          if (!Object.is(record.item, item)) this._addIdentityChange(record, item);
-        }
-        record = record._next;
-      }
-    } else {
-      index = 0;
-      iterateListLike(collection, item => {
-        itemTrackBy = this._trackByFn(index, item);
-        if (record === null || !Object.is(record.trackById, itemTrackBy)) {
-          record = this._mismatch(record, item, itemTrackBy, index);
-          mayBeDirty = true;
-        } else {
-          if (mayBeDirty) {
-            // TODO(misko): can we limit this to duplicates only?
-            record = this._verifyReinsertion(record, item, itemTrackBy, index);
-          }
-          if (!Object.is(record.item, item)) this._addIdentityChange(record, item);
-        }
-        record = record._next;
-        index++;
-      });
-      this.length = index;
-    }
-    this._truncate(record);
-    this.collection = collection;
-    return this.isDirty;
-  }
-  /* CollectionChanges is considered dirty if it has any additions, moves, removals, or identity
-   * changes.
-   */
-  get isDirty() {
-    return this._additionsHead !== null || this._movesHead !== null || this._removalsHead !== null || this._identityChangesHead !== null;
+  /**
+   * Executes the `fn` function synchronously within the Angular zone and returns value returned by
+   * the function.
+   *
+   * Running functions via `run` allows you to reenter Angular zone from a task that was executed
+   * outside of the Angular zone (typically started via {@link #runOutsideAngular}).
+   *
+   * Any future tasks or microtasks scheduled from within this function will continue executing from
+   * within the Angular zone.
+   *
+   * If a synchronous error happens it will be rethrown and not reported via `onError`.
+   */
+  run(fn, applyThis, applyArgs) {
+    return this._inner.run(fn, applyThis, applyArgs);
   }
   /**
-   * Reset the state of the change objects to show no changes. This means set previousKey to
-   * currentKey, and clear all of the queues (additions, moves, removals).
-   * Set the previousIndexes of moved and added items to their currentIndexes
-   * Reset the list of additions, moves and removals
+   * Executes the `fn` function synchronously within the Angular zone as a task and returns value
+   * returned by the function.
    *
-   * @internal
+   * Running functions via `run` allows you to reenter Angular zone from a task that was executed
+   * outside of the Angular zone (typically started via {@link #runOutsideAngular}).
+   *
+   * Any future tasks or microtasks scheduled from within this function will continue executing from
+   * within the Angular zone.
+   *
+   * If a synchronous error happens it will be rethrown and not reported via `onError`.
    */
-  _reset() {
-    if (this.isDirty) {
-      let record;
-      for (record = this._previousItHead = this._itHead; record !== null; record = record._next) {
-        record._nextPrevious = record._next;
-      }
-      for (record = this._additionsHead; record !== null; record = record._nextAdded) {
-        record.previousIndex = record.currentIndex;
-      }
-      this._additionsHead = this._additionsTail = null;
-      for (record = this._movesHead; record !== null; record = record._nextMoved) {
-        record.previousIndex = record.currentIndex;
-      }
-      this._movesHead = this._movesTail = null;
-      this._removalsHead = this._removalsTail = null;
-      this._identityChangesHead = this._identityChangesTail = null;
-      // TODO(vicb): when assert gets supported
-      // assert(!this.isDirty);
+  runTask(fn, applyThis, applyArgs, name) {
+    const zone = this._inner;
+    const task = zone.scheduleEventTask('NgZoneEvent: ' + name, fn, EMPTY_PAYLOAD, noop, noop);
+    try {
+      return zone.runTask(task, applyThis, applyArgs);
+    } finally {
+      zone.cancelTask(task);
     }
   }
   /**
-   * This is the core function which handles differences between collections.
-   *
-   * - `record` is the record which we saw at this position last time. If null then it is a new
-   *   item.
-   * - `item` is the current item in the collection
-   * - `index` is the position of the item in the collection
-   *
-   * @internal
+   * Same as `run`, except that synchronous errors are caught and forwarded via `onError` and not
+   * rethrown.
    */
-  _mismatch(record, item, itemTrackBy, index) {
-    // The previous record after which we will append the current one.
-    let previousRecord;
-    if (record === null) {
-      previousRecord = this._itTail;
-    } else {
-      previousRecord = record._prev;
-      // Remove the record from the collection since we know it does not match the item.
-      this._remove(record);
-    }
-    // See if we have evicted the item, which used to be at some anterior position of _itHead list.
-    record = this._unlinkedRecords === null ? null : this._unlinkedRecords.get(itemTrackBy, null);
-    if (record !== null) {
-      // It is an item which we have evicted earlier: reinsert it back into the list.
-      // But first we need to check if identity changed, so we can update in view if necessary.
-      if (!Object.is(record.item, item)) this._addIdentityChange(record, item);
-      this._reinsertAfter(record, previousRecord, index);
-    } else {
-      // Attempt to see if the item is at some posterior position of _itHead list.
-      record = this._linkedRecords === null ? null : this._linkedRecords.get(itemTrackBy, index);
-      if (record !== null) {
-        // We have the item in _itHead at/after `index` position. We need to move it forward in the
-        // collection.
-        // But first we need to check if identity changed, so we can update in view if necessary.
-        if (!Object.is(record.item, item)) this._addIdentityChange(record, item);
-        this._moveAfter(record, previousRecord, index);
-      } else {
-        // It is a new item: add it.
-        record = this._addAfter(new IterableChangeRecord_(item, itemTrackBy), previousRecord, index);
-      }
-    }
-    return record;
+  runGuarded(fn, applyThis, applyArgs) {
+    return this._inner.runGuarded(fn, applyThis, applyArgs);
   }
   /**
-   * This check is only needed if an array contains duplicates. (Short circuit of nothing dirty)
-   *
-   * Use case: `[a, a]` => `[b, a, a]`
-   *
-   * If we did not have this check then the insertion of `b` would:
-   *   1) evict first `a`
-   *   2) insert `b` at `0` index.
-   *   3) leave `a` at index `1` as is. <-- this is wrong!
-   *   3) reinsert `a` at index 2. <-- this is wrong!
-   *
-   * The correct behavior is:
-   *   1) evict first `a`
-   *   2) insert `b` at `0` index.
-   *   3) reinsert `a` at index 1.
-   *   3) move `a` at from `1` to `2`.
+   * Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
+   * the function.
    *
+   * Running functions via {@link #runOutsideAngular} allows you to escape Angular's zone and do
+   * work that
+   * doesn't trigger Angular change-detection or is subject to Angular's error handling.
    *
-   * Double check that we have not evicted a duplicate item. We need to check if the item type may
-   * have already been removed:
-   * The insertion of b will evict the first 'a'. If we don't reinsert it now it will be reinserted
-   * at the end. Which will show up as the two 'a's switching position. This is incorrect, since a
-   * better way to think of it is as insert of 'b' rather then switch 'a' with 'b' and then add 'a'
-   * at the end.
+   * Any future tasks or microtasks scheduled from within this function will continue executing from
+   * outside of the Angular zone.
    *
-   * @internal
+   * Use {@link #run} to reenter the Angular zone and do work that updates the application model.
    */
-  _verifyReinsertion(record, item, itemTrackBy, index) {
-    let reinsertRecord = this._unlinkedRecords === null ? null : this._unlinkedRecords.get(itemTrackBy, null);
-    if (reinsertRecord !== null) {
-      record = this._reinsertAfter(reinsertRecord, record._prev, index);
-    } else if (record.currentIndex != index) {
-      record.currentIndex = index;
-      this._addToMoves(record, index);
+  runOutsideAngular(fn) {
+    return this._outer.run(fn);
+  }
+}
+const EMPTY_PAYLOAD = {};
+function checkStable(zone) {
+  // TODO: @JiaLiPassion, should check zone.isCheckStableRunning to prevent
+  // re-entry. The case is:
+  //
+  // @Component({...})
+  // export class AppComponent {
+  // constructor(private ngZone: NgZone) {
+  //   this.ngZone.onStable.subscribe(() => {
+  //     this.ngZone.run(() => console.log('stable'););
+  //   });
+  // }
+  //
+  // The onStable subscriber run another function inside ngZone
+  // which causes `checkStable()` re-entry.
+  // But this fix causes some issues in g3, so this fix will be
+  // launched in another PR.
+  if (zone._nesting == 0 && !zone.hasPendingMicrotasks && !zone.isStable) {
+    try {
+      zone._nesting++;
+      zone.onMicrotaskEmpty.emit(null);
+    } finally {
+      zone._nesting--;
+      if (!zone.hasPendingMicrotasks) {
+        try {
+          zone.runOutsideAngular(() => zone.onStable.emit(null));
+        } finally {
+          zone.isStable = true;
+        }
+      }
     }
-    return record;
   }
+}
+function delayChangeDetectionForEvents(zone) {
   /**
-   * Get rid of any excess {@link IterableChangeRecord_}s from the previous collection
+   * We also need to check _nesting here
+   * Consider the following case with shouldCoalesceRunChangeDetection = true
    *
-   * - `record` The first excess {@link IterableChangeRecord_}.
+   * ngZone.run(() => {});
+   * ngZone.run(() => {});
    *
-   * @internal
+   * We want the two `ngZone.run()` only trigger one change detection
+   * when shouldCoalesceRunChangeDetection is true.
+   * And because in this case, change detection run in async way(requestAnimationFrame),
+   * so we also need to check the _nesting here to prevent multiple
+   * change detections.
    */
-  _truncate(record) {
-    // Anything after that needs to be removed;
-    while (record !== null) {
-      const nextRecord = record._next;
-      this._addToRemovals(this._unlink(record));
-      record = nextRecord;
-    }
-    if (this._unlinkedRecords !== null) {
-      this._unlinkedRecords.clear();
-    }
-    if (this._additionsTail !== null) {
-      this._additionsTail._nextAdded = null;
-    }
-    if (this._movesTail !== null) {
-      this._movesTail._nextMoved = null;
-    }
-    if (this._itTail !== null) {
-      this._itTail._next = null;
-    }
-    if (this._removalsTail !== null) {
-      this._removalsTail._nextRemoved = null;
-    }
-    if (this._identityChangesTail !== null) {
-      this._identityChangesTail._nextIdentityChange = null;
-    }
+  if (zone.isCheckStableRunning || zone.lastRequestAnimationFrameId !== -1) {
+    return;
   }
-  /** @internal */
-  _reinsertAfter(record, prevRecord, index) {
-    if (this._unlinkedRecords !== null) {
-      this._unlinkedRecords.remove(record);
-    }
-    const prev = record._prevRemoved;
-    const next = record._nextRemoved;
-    if (prev === null) {
-      this._removalsHead = next;
-    } else {
-      prev._nextRemoved = next;
+  zone.lastRequestAnimationFrameId = zone.nativeRequestAnimationFrame.call(_global, () => {
+    // This is a work around for https://github.com/angular/angular/issues/36839.
+    // The core issue is that when event coalescing is enabled it is possible for microtasks
+    // to get flushed too early (As is the case with `Promise.then`) between the
+    // coalescing eventTasks.
+    //
+    // To workaround this we schedule a "fake" eventTask before we process the
+    // coalescing eventTasks. The benefit of this is that the "fake" container eventTask
+    //  will prevent the microtasks queue from getting drained in between the coalescing
+    // eventTask execution.
+    if (!zone.fakeTopEventTask) {
+      zone.fakeTopEventTask = Zone.root.scheduleEventTask('fakeTopEventTask', () => {
+        zone.lastRequestAnimationFrameId = -1;
+        updateMicroTaskStatus(zone);
+        zone.isCheckStableRunning = true;
+        checkStable(zone);
+        zone.isCheckStableRunning = false;
+      }, undefined, () => {}, () => {});
     }
-    if (next === null) {
-      this._removalsTail = prev;
-    } else {
-      next._prevRemoved = prev;
+    zone.fakeTopEventTask.invoke();
+  });
+  updateMicroTaskStatus(zone);
+}
+function forkInnerZoneWithAngularBehavior(zone) {
+  const delayChangeDetectionForEventsDelegate = () => {
+    delayChangeDetectionForEvents(zone);
+  };
+  zone._inner = zone._inner.fork({
+    name: 'angular',
+    properties: {
+      'isAngularZone': true
+    },
+    onInvokeTask: (delegate, current, target, task, applyThis, applyArgs) => {
+      if (shouldBeIgnoredByZone(applyArgs)) {
+        return delegate.invokeTask(target, task, applyThis, applyArgs);
+      }
+      try {
+        onEnter(zone);
+        return delegate.invokeTask(target, task, applyThis, applyArgs);
+      } finally {
+        if (zone.shouldCoalesceEventChangeDetection && task.type === 'eventTask' || zone.shouldCoalesceRunChangeDetection) {
+          delayChangeDetectionForEventsDelegate();
+        }
+        onLeave(zone);
+      }
+    },
+    onInvoke: (delegate, current, target, callback, applyThis, applyArgs, source) => {
+      try {
+        onEnter(zone);
+        return delegate.invoke(target, callback, applyThis, applyArgs, source);
+      } finally {
+        if (zone.shouldCoalesceRunChangeDetection) {
+          delayChangeDetectionForEventsDelegate();
+        }
+        onLeave(zone);
+      }
+    },
+    onHasTask: (delegate, current, target, hasTaskState) => {
+      delegate.hasTask(target, hasTaskState);
+      if (current === target) {
+        // We are only interested in hasTask events which originate from our zone
+        // (A child hasTask event is not interesting to us)
+        if (hasTaskState.change == 'microTask') {
+          zone._hasPendingMicrotasks = hasTaskState.microTask;
+          updateMicroTaskStatus(zone);
+          checkStable(zone);
+        } else if (hasTaskState.change == 'macroTask') {
+          zone.hasPendingMacrotasks = hasTaskState.macroTask;
+        }
+      }
+    },
+    onHandleError: (delegate, current, target, error) => {
+      delegate.handleError(target, error);
+      zone.runOutsideAngular(() => zone.onError.emit(error));
+      return false;
     }
-    this._insertAfter(record, prevRecord, index);
-    this._addToMoves(record, index);
-    return record;
+  });
+}
+function updateMicroTaskStatus(zone) {
+  if (zone._hasPendingMicrotasks || (zone.shouldCoalesceEventChangeDetection || zone.shouldCoalesceRunChangeDetection) && zone.lastRequestAnimationFrameId !== -1) {
+    zone.hasPendingMicrotasks = true;
+  } else {
+    zone.hasPendingMicrotasks = false;
   }
-  /** @internal */
-  _moveAfter(record, prevRecord, index) {
-    this._unlink(record);
-    this._insertAfter(record, prevRecord, index);
-    this._addToMoves(record, index);
-    return record;
+}
+function onEnter(zone) {
+  zone._nesting++;
+  if (zone.isStable) {
+    zone.isStable = false;
+    zone.onUnstable.emit(null);
   }
-  /** @internal */
-  _addAfter(record, prevRecord, index) {
-    this._insertAfter(record, prevRecord, index);
-    if (this._additionsTail === null) {
-      // TODO(vicb):
-      // assert(this._additionsHead === null);
-      this._additionsTail = this._additionsHead = record;
-    } else {
-      // TODO(vicb):
-      // assert(_additionsTail._nextAdded === null);
-      // assert(record._nextAdded === null);
-      this._additionsTail = this._additionsTail._nextAdded = record;
-    }
-    return record;
+}
+function onLeave(zone) {
+  zone._nesting--;
+  checkStable(zone);
+}
+/**
+ * Provides a noop implementation of `NgZone` which does nothing. This zone requires explicit calls
+ * to framework to perform rendering.
+ */
+class NoopNgZone {
+  constructor() {
+    this.hasPendingMicrotasks = false;
+    this.hasPendingMacrotasks = false;
+    this.isStable = true;
+    this.onUnstable = new EventEmitter();
+    this.onMicrotaskEmpty = new EventEmitter();
+    this.onStable = new EventEmitter();
+    this.onError = new EventEmitter();
   }
-  /** @internal */
-  _insertAfter(record, prevRecord, index) {
-    // TODO(vicb):
-    // assert(record != prevRecord);
-    // assert(record._next === null);
-    // assert(record._prev === null);
-    const next = prevRecord === null ? this._itHead : prevRecord._next;
-    // TODO(vicb):
-    // assert(next != record);
-    // assert(prevRecord != record);
-    record._next = next;
-    record._prev = prevRecord;
-    if (next === null) {
-      this._itTail = record;
-    } else {
-      next._prev = record;
-    }
-    if (prevRecord === null) {
-      this._itHead = record;
-    } else {
-      prevRecord._next = record;
-    }
-    if (this._linkedRecords === null) {
-      this._linkedRecords = new _DuplicateMap();
-    }
-    this._linkedRecords.put(record);
-    record.currentIndex = index;
-    return record;
+  run(fn, applyThis, applyArgs) {
+    return fn.apply(applyThis, applyArgs);
   }
-  /** @internal */
-  _remove(record) {
-    return this._addToRemovals(this._unlink(record));
+  runGuarded(fn, applyThis, applyArgs) {
+    return fn.apply(applyThis, applyArgs);
   }
-  /** @internal */
-  _unlink(record) {
-    if (this._linkedRecords !== null) {
-      this._linkedRecords.remove(record);
-    }
-    const prev = record._prev;
-    const next = record._next;
-    // TODO(vicb):
-    // assert((record._prev = null) === null);
-    // assert((record._next = null) === null);
-    if (prev === null) {
-      this._itHead = next;
-    } else {
-      prev._next = next;
-    }
-    if (next === null) {
-      this._itTail = prev;
-    } else {
-      next._prev = prev;
-    }
-    return record;
+  runOutsideAngular(fn) {
+    return fn();
   }
-  /** @internal */
-  _addToMoves(record, toIndex) {
-    // TODO(vicb):
-    // assert(record._nextMoved === null);
-    if (record.previousIndex === toIndex) {
-      return record;
-    }
-    if (this._movesTail === null) {
-      // TODO(vicb):
-      // assert(_movesHead === null);
-      this._movesTail = this._movesHead = record;
-    } else {
-      // TODO(vicb):
-      // assert(_movesTail._nextMoved === null);
-      this._movesTail = this._movesTail._nextMoved = record;
-    }
-    return record;
+  runTask(fn, applyThis, applyArgs, name) {
+    return fn.apply(applyThis, applyArgs);
   }
-  _addToRemovals(record) {
-    if (this._unlinkedRecords === null) {
-      this._unlinkedRecords = new _DuplicateMap();
-    }
-    this._unlinkedRecords.put(record);
-    record.currentIndex = null;
-    record._nextRemoved = null;
-    if (this._removalsTail === null) {
-      // TODO(vicb):
-      // assert(_removalsHead === null);
-      this._removalsTail = this._removalsHead = record;
-      record._prevRemoved = null;
-    } else {
-      // TODO(vicb):
-      // assert(_removalsTail._nextRemoved === null);
-      // assert(record._nextRemoved === null);
-      record._prevRemoved = this._removalsTail;
-      this._removalsTail = this._removalsTail._nextRemoved = record;
-    }
-    return record;
+}
+function shouldBeIgnoredByZone(applyArgs) {
+  if (!Array.isArray(applyArgs)) {
+    return false;
   }
-  /** @internal */
-  _addIdentityChange(record, item) {
-    record.item = item;
-    if (this._identityChangesTail === null) {
-      this._identityChangesTail = this._identityChangesHead = record;
-    } else {
-      this._identityChangesTail = this._identityChangesTail._nextIdentityChange = record;
-    }
-    return record;
+  // 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;
 }
-class IterableChangeRecord_ {
-  constructor(item, trackById) {
-    this.item = item;
-    this.trackById = trackById;
-    this.currentIndex = null;
-    this.previousIndex = null;
-    /** @internal */
-    this._nextPrevious = null;
-    /** @internal */
-    this._prev = null;
-    /** @internal */
-    this._next = null;
-    /** @internal */
-    this._prevDup = null;
-    /** @internal */
-    this._nextDup = null;
-    /** @internal */
-    this._prevRemoved = null;
-    /** @internal */
-    this._nextRemoved = null;
-    /** @internal */
-    this._nextAdded = null;
-    /** @internal */
-    this._nextMoved = null;
-    /** @internal */
-    this._nextIdentityChange = null;
+function getNgZone(ngZoneToUse = 'zone.js', options) {
+  if (ngZoneToUse === 'noop') {
+    return new NoopNgZone();
   }
-}
-// A linked list of IterableChangeRecords with the same IterableChangeRecord_.item
-class _DuplicateItemRecordList {
-  constructor() {
-    /** @internal */
-    this._head = null;
-    /** @internal */
-    this._tail = null;
+  if (ngZoneToUse === 'zone.js') {
+    return new NgZone(options);
   }
+  return ngZoneToUse;
+}
+
+/**
+ * The phase to run an `afterRender` or `afterNextRender` callback in.
+ *
+ * Callbacks in the same phase run in the order they are registered. Phases run in the
+ * following order after each render:
+ *
+ *   1. `AfterRenderPhase.EarlyRead`
+ *   2. `AfterRenderPhase.Write`
+ *   3. `AfterRenderPhase.MixedReadWrite`
+ *   4. `AfterRenderPhase.Read`
+ *
+ * Angular is unable to verify or enforce that phases are used correctly, and instead
+ * relies on each developer to follow the guidelines documented for each value and
+ * carefully choose the appropriate one, refactoring their code if necessary. By doing
+ * so, Angular is better able to minimize the performance degradation associated with
+ * manual DOM access, ensuring the best experience for the end users of your application
+ * or library.
+ *
+ * @developerPreview
+ */
+var AfterRenderPhase = /*#__PURE__*/function (AfterRenderPhase) {
   /**
-   * Append the record to the list of duplicates.
+   * Use `AfterRenderPhase.EarlyRead` for callbacks that only need to **read** from the
+   * DOM before a subsequent `AfterRenderPhase.Write` callback, for example to perform
+   * custom layout that the browser doesn't natively support. **Never** use this phase
+   * for callbacks that can write to the DOM or when `AfterRenderPhase.Read` is adequate.
    *
-   * Note: by design all records in the list of duplicates hold the same value in record.item.
+   * <div class="alert is-important">
+   *
+   * Using this value can degrade performance.
+   * Instead, prefer using built-in browser functionality when possible.
+   *
+   * </div>
    */
-  add(record) {
-    if (this._head === null) {
-      this._head = this._tail = record;
-      record._nextDup = null;
-      record._prevDup = null;
-    } else {
-      // TODO(vicb):
-      // assert(record.item ==  _head.item ||
-      //       record.item is num && record.item.isNaN && _head.item is num && _head.item.isNaN);
-      this._tail._nextDup = record;
-      record._prevDup = this._tail;
-      record._nextDup = null;
-      this._tail = record;
-    }
-  }
-  // Returns a IterableChangeRecord_ having IterableChangeRecord_.trackById == trackById and
-  // IterableChangeRecord_.currentIndex >= atOrAfterIndex
-  get(trackById, atOrAfterIndex) {
-    let record;
-    for (record = this._head; record !== null; record = record._nextDup) {
-      if ((atOrAfterIndex === null || atOrAfterIndex <= record.currentIndex) && Object.is(record.trackById, trackById)) {
-        return record;
-      }
-    }
-    return null;
-  }
+  AfterRenderPhase[AfterRenderPhase["EarlyRead"] = 0] = "EarlyRead";
   /**
-   * Remove one {@link IterableChangeRecord_} from the list of duplicates.
-   *
-   * Returns whether the list of duplicates is empty.
+   * Use `AfterRenderPhase.Write` for callbacks that only **write** to the DOM. **Never**
+   * use this phase for callbacks that can read from the DOM.
    */
-  remove(record) {
-    // TODO(vicb):
-    // assert(() {
-    //  // verify that the record being removed is in the list.
-    //  for (IterableChangeRecord_ cursor = _head; cursor != null; cursor = cursor._nextDup) {
-    //    if (identical(cursor, record)) return true;
-    //  }
-    //  return false;
-    //});
-    const prev = record._prevDup;
-    const next = record._nextDup;
-    if (prev === null) {
-      this._head = next;
-    } else {
-      prev._nextDup = next;
-    }
-    if (next === null) {
-      this._tail = prev;
-    } else {
-      next._prevDup = prev;
-    }
-    return this._head === null;
-  }
-}
-class _DuplicateMap {
-  constructor() {
-    this.map = new Map();
-  }
-  put(record) {
-    const key = record.trackById;
-    let duplicates = this.map.get(key);
-    if (!duplicates) {
-      duplicates = new _DuplicateItemRecordList();
-      this.map.set(key, duplicates);
-    }
-    duplicates.add(record);
-  }
+  AfterRenderPhase[AfterRenderPhase["Write"] = 1] = "Write";
   /**
-   * Retrieve the `value` using key. Because the IterableChangeRecord_ value may be one which we
-   * have already iterated over, we use the `atOrAfterIndex` to pretend it is not there.
+   * Use `AfterRenderPhase.MixedReadWrite` for callbacks that read from or write to the
+   * DOM, that haven't been refactored to use a different phase. **Never** use this phase
+   * for callbacks that can use a different phase instead.
    *
-   * Use case: `[a, b, c, a, a]` if we are at index `3` which is the second `a` then asking if we
-   * have any more `a`s needs to return the second `a`.
+   * <div class="alert is-critical">
+   *
+   * Using this value can **significantly** degrade performance.
+   * Instead, prefer refactoring into multiple callbacks using a more specific phase.
+   *
+   * </div>
    */
-  get(trackById, atOrAfterIndex) {
-    const key = trackById;
-    const recordList = this.map.get(key);
-    return recordList ? recordList.get(trackById, atOrAfterIndex) : null;
-  }
+  AfterRenderPhase[AfterRenderPhase["MixedReadWrite"] = 2] = "MixedReadWrite";
   /**
-   * Removes a {@link IterableChangeRecord_} from the list of duplicates.
-   *
-   * The list of duplicates also is removed from the map if it gets empty.
+   * Use `AfterRenderPhase.Read` for callbacks that only **read** from the DOM. **Never**
+   * use this phase for callbacks that can write to the DOM.
    */
-  remove(record) {
-    const key = record.trackById;
-    const recordList = this.map.get(key);
-    // Remove the list of duplicates when it gets empty
-    if (recordList.remove(record)) {
-      this.map.delete(key);
-    }
-    return record;
-  }
-  get isEmpty() {
-    return this.map.size === 0;
-  }
-  clear() {
-    this.map.clear();
+  AfterRenderPhase[AfterRenderPhase["Read"] = 3] = "Read";
+  return AfterRenderPhase;
+}(AfterRenderPhase || {});
+/** `AfterRenderRef` that does nothing. */
+const NOOP_AFTER_RENDER_REF = {
+  destroy() {}
+};
+/**
+ * Register a callback to run once before any userspace `afterRender` or
+ * `afterNextRender` callbacks.
+ *
+ * This function should almost always be used instead of `afterRender` or
+ * `afterNextRender` for implementing framework functionality. Consider:
+ *
+ *   1.) `AfterRenderPhase.EarlyRead` is intended to be used for implementing
+ *       custom layout. If the framework itself mutates the DOM after *any*
+ *       `AfterRenderPhase.EarlyRead` callbacks are run, the phase can no
+ *       longer reliably serve its purpose.
+ *
+ *   2.) Importing `afterRender` in the framework can reduce the ability for it
+ *       to be tree-shaken, and the framework shouldn't need much of the behavior.
+ */
+function internalAfterNextRender(callback, options) {
+  const injector = options?.injector ?? inject(Injector);
+  // Similarly to the public `afterNextRender` function, an internal one
+  // is only invoked in a browser as long as the runOnServer option is not set.
+  if (!options?.runOnServer && !isPlatformBrowser(injector)) return;
+  const afterRenderEventManager = injector.get(AfterRenderEventManager);
+  afterRenderEventManager.internalCallbacks.push(callback);
+}
+/**
+ * Register a callback to be invoked each time the application
+ * finishes rendering.
+ *
+ * <div class="alert is-critical">
+ *
+ * You should always explicitly specify a non-default [phase](api/core/AfterRenderPhase), or you
+ * risk significant performance degradation.
+ *
+ * </div>
+ *
+ * Note that the callback will run
+ * - in the order it was registered
+ * - once per render
+ * - on browser platforms only
+ *
+ * <div class="alert is-important">
+ *
+ * Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs.
+ * You must use caution when directly reading or writing the DOM and layout.
+ *
+ * </div>
+ *
+ * @param callback A callback function to register
+ *
+ * @usageNotes
+ *
+ * Use `afterRender` to read or write the DOM after each render.
+ *
+ * ### Example
+ * ```ts
+ * @Component({
+ *   selector: 'my-cmp',
+ *   template: `<span #content>{{ ... }}</span>`,
+ * })
+ * export class MyComponent {
+ *   @ViewChild('content') contentRef: ElementRef;
+ *
+ *   constructor() {
+ *     afterRender(() => {
+ *       console.log('content height: ' + this.contentRef.nativeElement.scrollHeight);
+ *     }, {phase: AfterRenderPhase.Read});
+ *   }
+ * }
+ * ```
+ *
+ * @developerPreview
+ */
+function afterRender(callback, options) {
+  ngDevMode && assertNotInReactiveContext(afterRender, 'Call `afterRender` outside of a reactive context. For example, schedule the render ' + 'callback inside the component constructor`.');
+  !options && assertInInjectionContext(afterRender);
+  const injector = options?.injector ?? inject(Injector);
+  if (!isPlatformBrowser(injector)) {
+    return NOOP_AFTER_RENDER_REF;
   }
+  performanceMarkFeature('NgAfterRender');
+  const afterRenderEventManager = injector.get(AfterRenderEventManager);
+  // Lazily initialize the handler implementation, if necessary. This is so that it can be
+  // tree-shaken if `afterRender` and `afterNextRender` aren't used.
+  const callbackHandler = afterRenderEventManager.handler ??= new AfterRenderCallbackHandlerImpl();
+  const phase = options?.phase ?? AfterRenderPhase.MixedReadWrite;
+  const destroy = () => {
+    callbackHandler.unregister(instance);
+    unregisterFn();
+  };
+  const unregisterFn = injector.get(DestroyRef).onDestroy(destroy);
+  const instance = new AfterRenderCallback(injector, phase, callback);
+  callbackHandler.register(instance);
+  return {
+    destroy
+  };
 }
-function getPreviousIndex(item, addRemoveOffset, moveOffsets) {
-  const previousIndex = item.previousIndex;
-  if (previousIndex === null) return previousIndex;
-  let moveOffset = 0;
-  if (moveOffsets && previousIndex < moveOffsets.length) {
-    moveOffset = moveOffsets[previousIndex];
+/**
+ * Register a callback to be invoked the next time the application
+ * finishes rendering.
+ *
+ * <div class="alert is-critical">
+ *
+ * You should always explicitly specify a non-default [phase](api/core/AfterRenderPhase), or you
+ * risk significant performance degradation.
+ *
+ * </div>
+ *
+ * Note that the callback will run
+ * - in the order it was registered
+ * - on browser platforms only
+ *
+ * <div class="alert is-important">
+ *
+ * Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs.
+ * You must use caution when directly reading or writing the DOM and layout.
+ *
+ * </div>
+ *
+ * @param callback A callback function to register
+ *
+ * @usageNotes
+ *
+ * Use `afterNextRender` to read or write the DOM once,
+ * for example to initialize a non-Angular library.
+ *
+ * ### Example
+ * ```ts
+ * @Component({
+ *   selector: 'my-chart-cmp',
+ *   template: `<div #chart>{{ ... }}</div>`,
+ * })
+ * export class MyChartCmp {
+ *   @ViewChild('chart') chartRef: ElementRef;
+ *   chart: MyChart|null;
+ *
+ *   constructor() {
+ *     afterNextRender(() => {
+ *       this.chart = new MyChart(this.chartRef.nativeElement);
+ *     }, {phase: AfterRenderPhase.Write});
+ *   }
+ * }
+ * ```
+ *
+ * @developerPreview
+ */
+function afterNextRender(callback, options) {
+  !options && assertInInjectionContext(afterNextRender);
+  const injector = options?.injector ?? inject(Injector);
+  if (!isPlatformBrowser(injector)) {
+    return NOOP_AFTER_RENDER_REF;
   }
-  return previousIndex + addRemoveOffset + moveOffset;
+  performanceMarkFeature('NgAfterNextRender');
+  const afterRenderEventManager = injector.get(AfterRenderEventManager);
+  // Lazily initialize the handler implementation, if necessary. This is so that it can be
+  // tree-shaken if `afterRender` and `afterNextRender` aren't used.
+  const callbackHandler = afterRenderEventManager.handler ??= new AfterRenderCallbackHandlerImpl();
+  const phase = options?.phase ?? AfterRenderPhase.MixedReadWrite;
+  const destroy = () => {
+    callbackHandler.unregister(instance);
+    unregisterFn();
+  };
+  const unregisterFn = injector.get(DestroyRef).onDestroy(destroy);
+  const instance = new AfterRenderCallback(injector, phase, () => {
+    destroy();
+    callback();
+  });
+  callbackHandler.register(instance);
+  return {
+    destroy
+  };
 }
-class DefaultKeyValueDifferFactory {
-  constructor() {}
-  supports(obj) {
-    return obj instanceof Map || isJsObject(obj);
+/**
+ * A wrapper around a function to be used as an after render callback.
+ */
+class AfterRenderCallback {
+  constructor(injector, phase, callbackFn) {
+    this.phase = phase;
+    this.callbackFn = callbackFn;
+    this.zone = injector.get(NgZone);
+    this.errorHandler = injector.get(ErrorHandler, null, {
+      optional: true
+    });
   }
-  create() {
-    return new DefaultKeyValueDiffer();
+  invoke() {
+    try {
+      this.zone.runOutsideAngular(this.callbackFn);
+    } catch (err) {
+      this.errorHandler?.handleError(err);
+    }
   }
 }
-class DefaultKeyValueDiffer {
+/**
+ * Core functionality for `afterRender` and `afterNextRender`. Kept separate from
+ * `AfterRenderEventManager` for tree-shaking.
+ */
+class AfterRenderCallbackHandlerImpl {
   constructor() {
-    this._records = new Map();
-    this._mapHead = null;
-    // _appendAfter is used in the check loop
-    this._appendAfter = null;
-    this._previousMapHead = null;
-    this._changesHead = null;
-    this._changesTail = null;
-    this._additionsHead = null;
-    this._additionsTail = null;
-    this._removalsHead = null;
-    this._removalsTail = null;
+    this.executingCallbacks = false;
+    this.buckets = {
+      // Note: the order of these keys controls the order the phases are run.
+      [AfterRenderPhase.EarlyRead]: new Set(),
+      [AfterRenderPhase.Write]: new Set(),
+      [AfterRenderPhase.MixedReadWrite]: new Set(),
+      [AfterRenderPhase.Read]: new Set()
+    };
+    this.deferredCallbacks = new Set();
   }
-  get isDirty() {
-    return this._additionsHead !== null || this._changesHead !== null || this._removalsHead !== null;
+  register(callback) {
+    // If we're currently running callbacks, new callbacks should be deferred
+    // until the next render operation.
+    const target = this.executingCallbacks ? this.deferredCallbacks : this.buckets[callback.phase];
+    target.add(callback);
   }
-  forEachItem(fn) {
-    let record;
-    for (record = this._mapHead; record !== null; record = record._next) {
-      fn(record);
-    }
+  unregister(callback) {
+    this.buckets[callback.phase].delete(callback);
+    this.deferredCallbacks.delete(callback);
   }
-  forEachPreviousItem(fn) {
-    let record;
-    for (record = this._previousMapHead; record !== null; record = record._nextPrevious) {
-      fn(record);
+  execute() {
+    this.executingCallbacks = true;
+    for (const bucket of Object.values(this.buckets)) {
+      for (const callback of bucket) {
+        callback.invoke();
+      }
     }
-  }
-  forEachChangedItem(fn) {
-    let record;
-    for (record = this._changesHead; record !== null; record = record._nextChanged) {
-      fn(record);
+    this.executingCallbacks = false;
+    for (const callback of this.deferredCallbacks) {
+      this.buckets[callback.phase].add(callback);
     }
+    this.deferredCallbacks.clear();
   }
-  forEachAddedItem(fn) {
-    let record;
-    for (record = this._additionsHead; record !== null; record = record._nextAdded) {
-      fn(record);
+  destroy() {
+    for (const bucket of Object.values(this.buckets)) {
+      bucket.clear();
     }
+    this.deferredCallbacks.clear();
   }
-  forEachRemovedItem(fn) {
-    let record;
-    for (record = this._removalsHead; record !== null; record = record._nextRemoved) {
-      fn(record);
+}
+/**
+ * Implements core timing for `afterRender` and `afterNextRender` events.
+ * Delegates to an optional `AfterRenderCallbackHandler` for implementation.
+ */
+let AfterRenderEventManager = /*#__PURE__*/(() => {
+  class AfterRenderEventManager {
+    constructor() {
+      /* @internal */
+      this.handler = null;
+      /* @internal */
+      this.internalCallbacks = [];
     }
-  }
-  diff(map) {
-    if (!map) {
-      map = new Map();
-    } else if (!(map instanceof Map || isJsObject(map))) {
-      throw new RuntimeError(900 /* RuntimeErrorCode.INVALID_DIFFER_INPUT */, ngDevMode && `Error trying to diff '${stringify(map)}'. Only maps and objects are allowed`);
+    /**
+     * Executes internal and user-provided callbacks.
+     */
+    execute() {
+      this.executeInternalCallbacks();
+      this.handler?.execute();
     }
-    return this.check(map) ? this : null;
-  }
-  onDestroy() {}
-  /**
-   * Check the current state of the map vs the previous.
-   * The algorithm is optimised for when the keys do no change.
-   */
-  check(map) {
-    this._reset();
-    let insertBefore = this._mapHead;
-    this._appendAfter = null;
-    this._forEach(map, (value, key) => {
-      if (insertBefore && insertBefore.key === key) {
-        this._maybeAddToChanges(insertBefore, value);
-        this._appendAfter = insertBefore;
-        insertBefore = insertBefore._next;
-      } else {
-        const record = this._getOrCreateRecordForKey(key, value);
-        insertBefore = this._insertBeforeOrAppend(insertBefore, record);
-      }
-    });
-    // Items remaining at the end of the list have been deleted
-    if (insertBefore) {
-      if (insertBefore._prev) {
-        insertBefore._prev._next = null;
+    executeInternalCallbacks() {
+      // Note: internal callbacks power `internalAfterNextRender`. Since internal callbacks
+      // are fairly trivial, they are kept separate so that `AfterRenderCallbackHandlerImpl`
+      // can still be tree-shaken unless used by the application.
+      const callbacks = [...this.internalCallbacks];
+      this.internalCallbacks.length = 0;
+      for (const callback of callbacks) {
+        callback();
       }
-      this._removalsHead = insertBefore;
-      for (let record = insertBefore; record !== null; record = record._nextRemoved) {
-        if (record === this._mapHead) {
-          this._mapHead = null;
-        }
-        this._records.delete(record.key);
-        record._nextRemoved = record._next;
-        record.previousValue = record.currentValue;
-        record.currentValue = null;
-        record._prev = null;
-        record._next = null;
+    }
+    ngOnDestroy() {
+      this.handler?.destroy();
+      this.handler = null;
+      this.internalCallbacks.length = 0;
+    }
+    /** @nocollapse */
+    static #_ = this.ɵprov = ɵɵdefineInjectable({
+      token: AfterRenderEventManager,
+      providedIn: 'root',
+      factory: () => new AfterRenderEventManager()
+    });
+  }
+  return AfterRenderEventManager;
+})();
+function isModuleWithProviders(value) {
+  return value.ngModule !== undefined;
+}
+function isNgModule(value) {
+  return !!getNgModuleDef(value);
+}
+function isPipe(value) {
+  return !!getPipeDef$1(value);
+}
+function isDirective(value) {
+  return !!getDirectiveDef(value);
+}
+function isComponent(value) {
+  return !!getComponentDef(value);
+}
+function getDependencyTypeForError(type) {
+  if (getComponentDef(type)) return 'component';
+  if (getDirectiveDef(type)) return 'directive';
+  if (getPipeDef$1(type)) return 'pipe';
+  return 'type';
+}
+function verifyStandaloneImport(depType, importingType) {
+  if (isForwardRef(depType)) {
+    depType = resolveForwardRef(depType);
+    if (!depType) {
+      throw new Error(`Expected forwardRef function, imported from "${stringifyForError(importingType)}", to return a standalone entity or NgModule but got "${stringifyForError(depType) || depType}".`);
+    }
+  }
+  if (getNgModuleDef(depType) == null) {
+    const def = getComponentDef(depType) || getDirectiveDef(depType) || getPipeDef$1(depType);
+    if (def != null) {
+      // if a component, directive or pipe is imported make sure that it is standalone
+      if (!def.standalone) {
+        throw new Error(`The "${stringifyForError(depType)}" ${getDependencyTypeForError(depType)}, imported from "${stringifyForError(importingType)}", is not standalone. Did you forget to add the standalone: true flag?`);
+      }
+    } else {
+      // it can be either a module with provider or an unknown (not annotated) type
+      if (isModuleWithProviders(depType)) {
+        throw new Error(`A module with providers was imported from "${stringifyForError(importingType)}". Modules with providers are not supported in standalone components imports.`);
+      } else {
+        throw new Error(`The "${stringifyForError(depType)}" type, imported from "${stringifyForError(importingType)}", must be a standalone component / directive / pipe or an NgModule. Did you forget to add the required @Component / @Directive / @Pipe or @NgModule annotation?`);
       }
     }
-    // Make sure tails have no next records from previous runs
-    if (this._changesTail) this._changesTail._nextChanged = null;
-    if (this._additionsTail) this._additionsTail._nextAdded = null;
-    return this.isDirty;
+  }
+}
+
+/**
+ * Indicates whether to use the runtime dependency tracker for scope calculation in JIT compilation.
+ * The value "false" means the old code path based on patching scope info into the types will be
+ * used.
+ *
+ * @deprecated For migration purposes only, to be removed soon.
+ */
+const USE_RUNTIME_DEPS_TRACKER_FOR_JIT = true;
+/**
+ * An implementation of DepsTrackerApi which will be used for JIT and local compilation.
+ */
+class DepsTracker {
+  constructor() {
+    this.ownerNgModule = new Map();
+    this.ngModulesWithSomeUnresolvedDecls = new Set();
+    this.ngModulesScopeCache = new Map();
+    this.standaloneComponentsScopeCache = new Map();
   }
   /**
-   * Inserts a record before `before` or append at the end of the list when `before` is null.
-   *
-   * Notes:
-   * - This method appends at `this._appendAfter`,
-   * - This method updates `this._appendAfter`,
-   * - The return value is the new value for the insertion pointer.
+   * Attempts to resolve ng module's forward ref declarations as much as possible and add them to
+   * the `ownerNgModule` map. This method normally should be called after the initial parsing when
+   * all the forward refs are resolved (e.g., when trying to render a component)
    */
-  _insertBeforeOrAppend(before, record) {
-    if (before) {
-      const prev = before._prev;
-      record._next = before;
-      record._prev = prev;
-      before._prev = record;
-      if (prev) {
-        prev._next = record;
-      }
-      if (before === this._mapHead) {
-        this._mapHead = record;
-      }
-      this._appendAfter = before;
-      return before;
+  resolveNgModulesDecls() {
+    if (this.ngModulesWithSomeUnresolvedDecls.size === 0) {
+      return;
     }
-    if (this._appendAfter) {
-      this._appendAfter._next = record;
-      record._prev = this._appendAfter;
-    } else {
-      this._mapHead = record;
+    for (const moduleType of this.ngModulesWithSomeUnresolvedDecls) {
+      const def = getNgModuleDef(moduleType);
+      if (def?.declarations) {
+        for (const decl of maybeUnwrapFn(def.declarations)) {
+          if (isComponent(decl)) {
+            this.ownerNgModule.set(decl, moduleType);
+          }
+        }
+      }
     }
-    this._appendAfter = record;
-    return null;
+    this.ngModulesWithSomeUnresolvedDecls.clear();
   }
-  _getOrCreateRecordForKey(key, value) {
-    if (this._records.has(key)) {
-      const record = this._records.get(key);
-      this._maybeAddToChanges(record, value);
-      const prev = record._prev;
-      const next = record._next;
-      if (prev) {
-        prev._next = next;
+  /** @override */
+  getComponentDependencies(type, rawImports) {
+    this.resolveNgModulesDecls();
+    const def = getComponentDef(type);
+    if (def === null) {
+      throw new Error(`Attempting to get component dependencies for a type that is not a component: ${type}`);
+    }
+    if (def.standalone) {
+      const scope = this.getStandaloneComponentScope(type, rawImports);
+      if (scope.compilation.isPoisoned) {
+        return {
+          dependencies: []
+        };
       }
-      if (next) {
-        next._prev = prev;
+      return {
+        dependencies: [...scope.compilation.directives, ...scope.compilation.pipes, ...scope.compilation.ngModules]
+      };
+    } else {
+      if (!this.ownerNgModule.has(type)) {
+        // This component is orphan! No need to handle the error since the component rendering
+        // pipeline (e.g., view_container_ref) will check for this error based on configs.
+        return {
+          dependencies: []
+        };
       }
-      record._next = null;
-      record._prev = null;
-      return record;
+      const scope = this.getNgModuleScope(this.ownerNgModule.get(type));
+      if (scope.compilation.isPoisoned) {
+        return {
+          dependencies: []
+        };
+      }
+      return {
+        dependencies: [...scope.compilation.directives, ...scope.compilation.pipes]
+      };
     }
-    const record = new KeyValueChangeRecord_(key);
-    this._records.set(key, record);
-    record.currentValue = value;
-    this._addToAdditions(record);
-    return record;
   }
-  /** @internal */
-  _reset() {
-    if (this.isDirty) {
-      let record;
-      // let `_previousMapHead` contain the state of the map before the changes
-      this._previousMapHead = this._mapHead;
-      for (record = this._previousMapHead; record !== null; record = record._next) {
-        record._nextPrevious = record._next;
+  /**
+   * @override
+   * This implementation does not make use of param scopeInfo since it assumes the scope info is
+   * already added to the type itself through methods like {@link ɵɵsetNgModuleScope}
+   */
+  registerNgModule(type, scopeInfo) {
+    if (!isNgModule(type)) {
+      throw new Error(`Attempting to register a Type which is not NgModule as NgModule: ${type}`);
+    }
+    // Lazily process the NgModules later when needed.
+    this.ngModulesWithSomeUnresolvedDecls.add(type);
+  }
+  /** @override */
+  clearScopeCacheFor(type) {
+    this.ngModulesScopeCache.delete(type);
+    this.standaloneComponentsScopeCache.delete(type);
+  }
+  /** @override */
+  getNgModuleScope(type) {
+    if (this.ngModulesScopeCache.has(type)) {
+      return this.ngModulesScopeCache.get(type);
+    }
+    const scope = this.computeNgModuleScope(type);
+    this.ngModulesScopeCache.set(type, scope);
+    return scope;
+  }
+  /** Compute NgModule scope afresh. */
+  computeNgModuleScope(type) {
+    const def = getNgModuleDef(type, true);
+    const scope = {
+      exported: {
+        directives: new Set(),
+        pipes: new Set()
+      },
+      compilation: {
+        directives: new Set(),
+        pipes: new Set()
       }
-      // Update `record.previousValue` with the value of the item before the changes
-      // We need to update all changed items (that's those which have been added and changed)
-      for (record = this._changesHead; record !== null; record = record._nextChanged) {
-        record.previousValue = record.currentValue;
+    };
+    // Analyzing imports
+    for (const imported of maybeUnwrapFn(def.imports)) {
+      if (isNgModule(imported)) {
+        const importedScope = this.getNgModuleScope(imported);
+        // When this module imports another, the imported module's exported directives and pipes
+        // are added to the compilation scope of this module.
+        addSet(importedScope.exported.directives, scope.compilation.directives);
+        addSet(importedScope.exported.pipes, scope.compilation.pipes);
+      } else if (isStandalone(imported)) {
+        if (isDirective(imported) || isComponent(imported)) {
+          scope.compilation.directives.add(imported);
+        } else if (isPipe(imported)) {
+          scope.compilation.pipes.add(imported);
+        } else {
+          // The standalone thing is neither a component nor a directive nor a pipe ... (what?)
+          throw new RuntimeError(1000 /* RuntimeErrorCode.RUNTIME_DEPS_INVALID_IMPORTED_TYPE */, 'The standalone imported type is neither a component nor a directive nor a pipe');
+        }
+      } else {
+        // The import is neither a module nor a module-with-providers nor a standalone thing. This
+        // is going to be an error. So we short circuit.
+        scope.compilation.isPoisoned = true;
+        break;
       }
-      for (record = this._additionsHead; record != null; record = record._nextAdded) {
-        record.previousValue = record.currentValue;
+    }
+    // Analyzing declarations
+    if (!scope.compilation.isPoisoned) {
+      for (const decl of maybeUnwrapFn(def.declarations)) {
+        // Cannot declare another NgModule or a standalone thing
+        if (isNgModule(decl) || isStandalone(decl)) {
+          scope.compilation.isPoisoned = true;
+          break;
+        }
+        if (isPipe(decl)) {
+          scope.compilation.pipes.add(decl);
+        } else {
+          // decl is either a directive or a component. The component may not yet have the ɵcmp due
+          // to async compilation.
+          scope.compilation.directives.add(decl);
+        }
       }
-      this._changesHead = this._changesTail = null;
-      this._additionsHead = this._additionsTail = null;
-      this._removalsHead = null;
     }
-  }
-  // Add the record or a given key to the list of changes only when the value has actually changed
-  _maybeAddToChanges(record, newValue) {
-    if (!Object.is(newValue, record.currentValue)) {
-      record.previousValue = record.currentValue;
-      record.currentValue = newValue;
-      this._addToChanges(record);
+    // Analyzing exports
+    for (const exported of maybeUnwrapFn(def.exports)) {
+      if (isNgModule(exported)) {
+        // When this module exports another, the exported module's exported directives and pipes
+        // are added to both the compilation and exported scopes of this module.
+        const exportedScope = this.getNgModuleScope(exported);
+        // Based on the current logic there is no way to have poisoned exported scope. So no need to
+        // check for it.
+        addSet(exportedScope.exported.directives, scope.exported.directives);
+        addSet(exportedScope.exported.pipes, scope.exported.pipes);
+        // Some test toolings which run in JIT mode depend on this behavior that the exported scope
+        // should also be present in the compilation scope, even though AoT does not support this
+        // and it is also in odds with NgModule metadata definitions. Without this some tests in
+        // Google will fail.
+        addSet(exportedScope.exported.directives, scope.compilation.directives);
+        addSet(exportedScope.exported.pipes, scope.compilation.pipes);
+      } else if (isPipe(exported)) {
+        scope.exported.pipes.add(exported);
+      } else {
+        scope.exported.directives.add(exported);
+      }
     }
+    return scope;
   }
-  _addToAdditions(record) {
-    if (this._additionsHead === null) {
-      this._additionsHead = this._additionsTail = record;
-    } else {
-      this._additionsTail._nextAdded = record;
-      this._additionsTail = record;
+  /** @override */
+  getStandaloneComponentScope(type, rawImports) {
+    if (this.standaloneComponentsScopeCache.has(type)) {
+      return this.standaloneComponentsScopeCache.get(type);
     }
+    const ans = this.computeStandaloneComponentScope(type, rawImports);
+    this.standaloneComponentsScopeCache.set(type, ans);
+    return ans;
   }
-  _addToChanges(record) {
-    if (this._changesHead === null) {
-      this._changesHead = this._changesTail = record;
-    } else {
-      this._changesTail._nextChanged = record;
-      this._changesTail = record;
+  computeStandaloneComponentScope(type, rawImports) {
+    const ans = {
+      compilation: {
+        // Standalone components are always able to self-reference.
+        directives: new Set([type]),
+        pipes: new Set(),
+        ngModules: new Set()
+      }
+    };
+    for (const rawImport of flatten(rawImports ?? [])) {
+      const imported = resolveForwardRef(rawImport);
+      try {
+        verifyStandaloneImport(imported, type);
+      } catch (e) {
+        // Short-circuit if an import is not valid
+        ans.compilation.isPoisoned = true;
+        return ans;
+      }
+      if (isNgModule(imported)) {
+        ans.compilation.ngModules.add(imported);
+        const importedScope = this.getNgModuleScope(imported);
+        // Short-circuit if an imported NgModule has corrupted exported scope.
+        if (importedScope.exported.isPoisoned) {
+          ans.compilation.isPoisoned = true;
+          return ans;
+        }
+        addSet(importedScope.exported.directives, ans.compilation.directives);
+        addSet(importedScope.exported.pipes, ans.compilation.pipes);
+      } else if (isPipe(imported)) {
+        ans.compilation.pipes.add(imported);
+      } else if (isDirective(imported) || isComponent(imported)) {
+        ans.compilation.directives.add(imported);
+      } else {
+        // The imported thing is not module/pipe/directive/component, so we error and short-circuit
+        // here
+        ans.compilation.isPoisoned = true;
+        return ans;
+      }
     }
+    return ans;
   }
-  /** @internal */
-  _forEach(obj, fn) {
-    if (obj instanceof Map) {
-      obj.forEach(fn);
-    } else {
-      Object.keys(obj).forEach(k => fn(obj[k], k));
+  /** @override */
+  isOrphanComponent(cmp) {
+    const def = getComponentDef(cmp);
+    if (!def || def.standalone) {
+      return false;
     }
+    this.resolveNgModulesDecls();
+    return !this.ownerNgModule.has(cmp);
   }
 }
-class KeyValueChangeRecord_ {
-  constructor(key) {
-    this.key = key;
-    this.previousValue = null;
-    this.currentValue = null;
-    /** @internal */
-    this._nextPrevious = null;
-    /** @internal */
-    this._next = null;
-    /** @internal */
-    this._prev = null;
-    /** @internal */
-    this._nextAdded = null;
-    /** @internal */
-    this._nextRemoved = null;
-    /** @internal */
-    this._nextChanged = null;
+function addSet(sourceSet, targetSet) {
+  for (const m of sourceSet) {
+    targetSet.add(m);
   }
 }
-function defaultIterableDiffersFactory() {
-  return new IterableDiffers([new DefaultIterableDifferFactory()]);
-}
+/** The deps tracker to be used in the current Angular app in dev mode. */
+const depsTracker = /*#__PURE__*/new DepsTracker();
+const TEST_ONLY = {
+  DepsTracker
+};
+
 /**
- * A repository of different iterable diffing strategies used by NgFor, NgClass, and others.
+ * Compute the static styling (class/style) from `TAttributes`.
  *
- * @publicApi
+ * This function should be called during `firstCreatePass` only.
+ *
+ * @param tNode The `TNode` into which the styling information should be loaded.
+ * @param attrs `TAttributes` containing the styling information.
+ * @param writeToHost Where should the resulting static styles be written?
+ *   - `false` Write to `TNode.stylesWithoutHost` / `TNode.classesWithoutHost`
+ *   - `true` Write to `TNode.styles` / `TNode.classes`
  */
-let IterableDiffers = /*#__PURE__*/(() => {
-  class IterableDiffers {
-    /** @nocollapse */
-    static #_ = this.ɵprov = ɵɵdefineInjectable({
-      token: IterableDiffers,
-      providedIn: 'root',
-      factory: defaultIterableDiffersFactory
-    });
-    constructor(factories) {
-      this.factories = factories;
-    }
-    static create(factories, parent) {
-      if (parent != null) {
-        const copied = parent.factories.slice();
-        factories = factories.concat(copied);
-      }
-      return new IterableDiffers(factories);
-    }
-    /**
-     * Takes an array of {@link IterableDifferFactory} and returns a provider used to extend the
-     * inherited {@link IterableDiffers} instance with the provided factories and return a new
-     * {@link IterableDiffers} instance.
-     *
-     * @usageNotes
-     * ### Example
-     *
-     * The following example shows how to extend an existing list of factories,
-     * which will only be applied to the injector for this component and its children.
-     * This step is all that's required to make a new {@link IterableDiffer} available.
-     *
-     * ```
-     * @Component({
-     *   viewProviders: [
-     *     IterableDiffers.extend([new ImmutableListDiffer()])
-     *   ]
-     * })
-     * ```
-     */
-    static extend(factories) {
-      return {
-        provide: IterableDiffers,
-        useFactory: parent => {
-          // if parent is null, it means that we are in the root injector and we have just overridden
-          // the default injection mechanism for IterableDiffers, in such a case just assume
-          // `defaultIterableDiffersFactory`.
-          return IterableDiffers.create(factories, parent || defaultIterableDiffersFactory());
-        },
-        // Dependency technically isn't optional, but we can provide a better error message this way.
-        deps: [[IterableDiffers, new SkipSelf(), new Optional()]]
-      };
-    }
-    find(iterable) {
-      const factory = this.factories.find(f => f.supports(iterable));
-      if (factory != null) {
-        return factory;
-      } else {
-        throw new RuntimeError(901 /* RuntimeErrorCode.NO_SUPPORTING_DIFFER_FACTORY */, ngDevMode && `Cannot find a differ supporting object '${iterable}' of type '${getTypeNameForDebugging(iterable)}'`);
+function computeStaticStyling(tNode, attrs, writeToHost) {
+  ngDevMode && assertFirstCreatePass(getTView(), 'Expecting to be called in first template pass only');
+  let styles = writeToHost ? tNode.styles : null;
+  let classes = writeToHost ? tNode.classes : null;
+  let mode = 0;
+  if (attrs !== null) {
+    for (let i = 0; i < attrs.length; i++) {
+      const value = attrs[i];
+      if (typeof value === 'number') {
+        mode = value;
+      } else if (mode == 1 /* AttributeMarker.Classes */) {
+        classes = concatStringsWithSpace(classes, value);
+      } else if (mode == 2 /* AttributeMarker.Styles */) {
+        const style = value;
+        const styleValue = attrs[++i];
+        styles = concatStringsWithSpace(styles, style + ': ' + styleValue + ';');
       }
     }
   }
-  return IterableDiffers;
-})();
-function getTypeNameForDebugging(type) {
-  return type['name'] || typeof type;
+  writeToHost ? tNode.styles = styles : tNode.stylesWithoutHost = styles;
+  writeToHost ? tNode.classes = classes : tNode.classesWithoutHost = classes;
 }
-function defaultKeyValueDiffersFactory() {
-  return new KeyValueDiffers([new DefaultKeyValueDifferFactory()]);
+class ComponentFactoryResolver extends ComponentFactoryResolver$1 {
+  /**
+   * @param ngModule The NgModuleRef to which all resolved factories are bound.
+   */
+  constructor(ngModule) {
+    super();
+    this.ngModule = ngModule;
+  }
+  resolveComponentFactory(component) {
+    ngDevMode && assertComponentType(component);
+    const componentDef = getComponentDef(component);
+    return new ComponentFactory(componentDef, this.ngModule);
+  }
 }
-/**
- * A repository of different Map diffing strategies used by NgClass, NgStyle, and others.
- *
- * @publicApi
- */
-let KeyValueDiffers = /*#__PURE__*/(() => {
-  class KeyValueDiffers {
-    /** @nocollapse */
-    static #_ = this.ɵprov = ɵɵdefineInjectable({
-      token: KeyValueDiffers,
-      providedIn: 'root',
-      factory: defaultKeyValueDiffersFactory
+function toRefArray(map) {
+  const array = [];
+  for (const publicName in map) {
+    if (!map.hasOwnProperty(publicName)) {
+      continue;
+    }
+    const value = map[publicName];
+    if (value === undefined) {
+      continue;
+    }
+    array.push({
+      propName: Array.isArray(value) ? value[0] : value,
+      templateName: publicName
     });
-    constructor(factories) {
-      this.factories = factories;
+  }
+  return array;
+}
+function getNamespace(elementName) {
+  const name = elementName.toLowerCase();
+  return name === 'svg' ? SVG_NAMESPACE : name === 'math' ? MATH_ML_NAMESPACE : null;
+}
+/**
+ * Injector that looks up a value using a specific injector, before falling back to the module
+ * injector. Used primarily when creating components or embedded views dynamically.
+ */
+class ChainedInjector {
+  constructor(injector, parentInjector) {
+    this.injector = injector;
+    this.parentInjector = parentInjector;
+  }
+  get(token, notFoundValue, flags) {
+    flags = convertToBitFlags(flags);
+    const value = this.injector.get(token, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, flags);
+    if (value !== NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR || notFoundValue === NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR) {
+      // Return the value from the root element injector when
+      // - it provides it
+      //   (value !== NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR)
+      // - the module injector should not be checked
+      //   (notFoundValue === NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR)
+      return value;
     }
-    static create(factories, parent) {
-      if (parent) {
-        const copied = parent.factories.slice();
-        factories = factories.concat(copied);
+    return this.parentInjector.get(token, notFoundValue, flags);
+  }
+}
+/**
+ * ComponentFactory interface implementation.
+ */
+class ComponentFactory extends ComponentFactory$1 {
+  get inputs() {
+    const componentDef = this.componentDef;
+    const inputTransforms = componentDef.inputTransforms;
+    const refArray = toRefArray(componentDef.inputs);
+    if (inputTransforms !== null) {
+      for (const input of refArray) {
+        if (inputTransforms.hasOwnProperty(input.propName)) {
+          input.transform = inputTransforms[input.propName];
+        }
       }
-      return new KeyValueDiffers(factories);
     }
-    /**
-     * Takes an array of {@link KeyValueDifferFactory} and returns a provider used to extend the
-     * inherited {@link KeyValueDiffers} instance with the provided factories and return a new
-     * {@link KeyValueDiffers} instance.
-     *
-     * @usageNotes
-     * ### Example
-     *
-     * The following example shows how to extend an existing list of factories,
-     * which will only be applied to the injector for this component and its children.
-     * This step is all that's required to make a new {@link KeyValueDiffer} available.
-     *
-     * ```
-     * @Component({
-     *   viewProviders: [
-     *     KeyValueDiffers.extend([new ImmutableMapDiffer()])
-     *   ]
-     * })
-     * ```
-     */
-    static extend(factories) {
-      return {
-        provide: KeyValueDiffers,
-        useFactory: parent => {
-          // if parent is null, it means that we are in the root injector and we have just overridden
-          // the default injection mechanism for KeyValueDiffers, in such a case just assume
-          // `defaultKeyValueDiffersFactory`.
-          return KeyValueDiffers.create(factories, parent || defaultKeyValueDiffersFactory());
-        },
-        // Dependency technically isn't optional, but we can provide a better error message this way.
-        deps: [[KeyValueDiffers, new SkipSelf(), new Optional()]]
+    return refArray;
+  }
+  get outputs() {
+    return toRefArray(this.componentDef.outputs);
+  }
+  /**
+   * @param componentDef The component definition.
+   * @param ngModule The NgModuleRef to which the factory is bound.
+   */
+  constructor(componentDef, ngModule) {
+    super();
+    this.componentDef = componentDef;
+    this.ngModule = ngModule;
+    this.componentType = componentDef.type;
+    this.selector = stringifyCSSSelectorList(componentDef.selectors);
+    this.ngContentSelectors = componentDef.ngContentSelectors ? componentDef.ngContentSelectors : [];
+    this.isBoundToModule = !!ngModule;
+  }
+  create(injector, projectableNodes, rootSelectorOrNode, environmentInjector) {
+    const prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(null);
+    try {
+      // Check if the component is orphan
+      if (ngDevMode && (typeof ngJitMode === 'undefined' || ngJitMode) && this.componentDef.debugInfo?.forbidOrphanRendering) {
+        if (depsTracker.isOrphanComponent(this.componentType)) {
+          throw new RuntimeError(1001 /* RuntimeErrorCode.RUNTIME_DEPS_ORPHAN_COMPONENT */, `Orphan component found! Trying to render the component ${debugStringifyTypeForError(this.componentType)} without first loading the NgModule that declares it. It is recommended to make this component standalone in order to avoid this error. If this is not possible now, import the component's NgModule in the appropriate NgModule, or the standalone component in which you are trying to render this component. If this is a lazy import, load the NgModule lazily as well and use its module injector.`);
+        }
+      }
+      environmentInjector = environmentInjector || this.ngModule;
+      let realEnvironmentInjector = environmentInjector instanceof EnvironmentInjector ? environmentInjector : environmentInjector?.injector;
+      if (realEnvironmentInjector && this.componentDef.getStandaloneInjector !== null) {
+        realEnvironmentInjector = this.componentDef.getStandaloneInjector(realEnvironmentInjector) || realEnvironmentInjector;
+      }
+      const rootViewInjector = realEnvironmentInjector ? new ChainedInjector(injector, realEnvironmentInjector) : injector;
+      const rendererFactory = rootViewInjector.get(RendererFactory2, null);
+      if (rendererFactory === null) {
+        throw new RuntimeError(407 /* RuntimeErrorCode.RENDERER_NOT_FOUND */, ngDevMode && 'Angular was not able to inject a renderer (RendererFactory2). ' + 'Likely this is due to a broken DI hierarchy. ' + 'Make sure that any injector used to create this component has a correct parent.');
+      }
+      const sanitizer = rootViewInjector.get(Sanitizer, null);
+      const afterRenderEventManager = rootViewInjector.get(AfterRenderEventManager, null);
+      const changeDetectionScheduler = rootViewInjector.get(ChangeDetectionScheduler, null);
+      const environment = {
+        rendererFactory,
+        sanitizer,
+        // We don't use inline effects (yet).
+        inlineEffectRunner: null,
+        afterRenderEventManager,
+        changeDetectionScheduler
       };
-    }
-    find(kv) {
-      const factory = this.factories.find(f => f.supports(kv));
-      if (factory) {
-        return factory;
+      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.
+      const elementName = this.componentDef.selectors[0][0] || 'div';
+      const hostRNode = rootSelectorOrNode ? locateHostElement(hostRenderer, rootSelectorOrNode, this.componentDef.encapsulation, rootViewInjector) : createElementNode(hostRenderer, elementName, getNamespace(elementName));
+      let rootFlags = 512 /* LViewFlags.IsRoot */;
+      if (this.componentDef.signals) {
+        rootFlags |= 4096 /* LViewFlags.SignalView */;
+      } else if (!this.componentDef.onPush) {
+        rootFlags |= 16 /* LViewFlags.CheckAlways */;
+      }
+      let hydrationInfo = null;
+      if (hostRNode !== null) {
+        hydrationInfo = retrieveHydrationInfo(hostRNode, rootViewInjector, true /* isRootView */);
+      }
+      // 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, environment, hostRenderer, rootViewInjector, null, hydrationInfo);
+      // 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
+      // `createRootComponentView` and `createRootComponent` both read global state. Fixing those
+      // issues would allow us to drop this.
+      enterView(rootLView);
+      let component;
+      let tElementNode;
+      try {
+        const rootComponentDef = this.componentDef;
+        let rootDirectives;
+        let hostDirectiveDefs = null;
+        if (rootComponentDef.findHostDirectiveDefs) {
+          rootDirectives = [];
+          hostDirectiveDefs = new Map();
+          rootComponentDef.findHostDirectiveDefs(rootComponentDef, rootDirectives, hostDirectiveDefs);
+          rootDirectives.push(rootComponentDef);
+          ngDevMode && assertNoDuplicateDirectives(rootDirectives);
+        } else {
+          rootDirectives = [rootComponentDef];
+        }
+        const hostTNode = createRootComponentTNode(rootLView, hostRNode);
+        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 that this check can be removed.
+        if (hostRNode) {
+          setRootNodeAttributes(hostRenderer, rootComponentDef, hostRNode, rootSelectorOrNode);
+        }
+        if (projectableNodes !== undefined) {
+          projectNodes(tElementNode, this.ngContentSelectors, projectableNodes);
+        }
+        // TODO: should LifecycleHooksFeature and other host features be generated by the compiler
+        // and executed here? Angular 5 reference: https://stackblitz.com/edit/lifecycle-hooks-vcref
+        component = createRootComponent(componentView, rootComponentDef, rootDirectives, hostDirectiveDefs, rootLView, [LifecycleHooksFeature]);
+        renderView(rootTView, rootLView, null);
+      } finally {
+        leaveView();
       }
-      throw new RuntimeError(901 /* RuntimeErrorCode.NO_SUPPORTING_DIFFER_FACTORY */, ngDevMode && `Cannot find a differ supporting object '${kv}'`);
+      return new ComponentRef(this.componentType, component, createElementRef(tElementNode, rootLView), rootLView, tElementNode);
+    } finally {
+      (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
     }
   }
-  return KeyValueDiffers;
-})();
-function devModeEqual(a, b) {
-  const isListLikeIterableA = isListLikeIterable(a);
-  const isListLikeIterableB = isListLikeIterable(b);
-  if (isListLikeIterableA && isListLikeIterableB) {
-    return areIterablesEqual(a, b, devModeEqual);
-  } else {
-    const isAObject = a && (typeof a === 'object' || typeof a === 'function');
-    const isBObject = b && (typeof b === 'object' || typeof b === 'function');
-    if (!isListLikeIterableA && isAObject && !isListLikeIterableB && isBObject) {
-      return true;
+}
+/**
+ * Represents an instance of a Component created via a {@link ComponentFactory}.
+ *
+ * `ComponentRef` provides access to the Component Instance as well other objects related to this
+ * Component Instance and allows you to destroy the Component Instance via the {@link #destroy}
+ * method.
+ *
+ */
+class ComponentRef extends ComponentRef$1 {
+  constructor(componentType, instance, location, _rootLView, _tNode) {
+    super();
+    this.location = location;
+    this._rootLView = _rootLView;
+    this._tNode = _tNode;
+    this.previousInputValues = null;
+    this.instance = instance;
+    this.hostView = this.changeDetectorRef = new ViewRef$1(_rootLView, undefined, /* _cdRefInjectingView */false);
+    this.componentType = componentType;
+  }
+  setInput(name, value) {
+    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);
+      const childComponentLView = getComponentLViewByIndex(this._tNode.index, lView);
+      markViewDirty(childComponentLView);
     } else {
-      return Object.is(a, b);
+      if (ngDevMode) {
+        const cmpNameForError = stringifyForError(this.componentType);
+        let message = `Can't set value of the '${name}' input on the '${cmpNameForError}' component. `;
+        message += `Make sure that the '${name}' property is annotated with @Input() or a mapped @Input('${name}') exists.`;
+        reportUnknownPropertyError(message);
+      }
     }
   }
+  get injector() {
+    return new NodeInjector(this._tNode, this._rootLView);
+  }
+  destroy() {
+    this.hostView.destroy();
+  }
+  onDestroy(callback) {
+    this.hostView.onDestroy(callback);
+  }
+}
+/** Creates a TNode that can be used to instantiate a root component. */
+function createRootComponentTNode(lView, rNode) {
+  const tView = lView[TVIEW];
+  const index = HEADER_OFFSET;
+  ngDevMode && assertIndexInRange(lView, index);
+  lView[index] = rNode;
+  // '#host' is added here as we don't know the real host DOM name (we don't want to read it) and at
+  // the same time we want to communicate the debug `TNode` that this is a special `TNode`
+  // representing a host element.
+  return getOrCreateTNode(tView, index, 2 /* TNodeType.Element */, '#host', null);
 }
-
 /**
- * Base class that provides change detection functionality.
- * A change-detection tree collects all views that are to be checked for changes.
- * Use the methods to add and remove views from the tree, initiate change-detection,
- * and explicitly mark views as _dirty_, meaning that they have changed and need to be re-rendered.
+ * Creates the root component view and the root component node.
  *
- * @see [Using change detection hooks](guide/lifecycle-hooks#using-change-detection-hooks)
- * @see [Defining custom change detection](guide/lifecycle-hooks#defining-custom-change-detection)
+ * @param hostRNode Render host element.
+ * @param rootComponentDef ComponentDef
+ * @param rootView The parent view where the host node is stored
+ * @param rendererFactory Factory to be used for creating child renderers.
+ * @param hostRenderer The current renderer
+ * @param sanitizer The sanitizer, if provided
  *
- * @usageNotes
+ * @returns Component view created
+ */
+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 retrieved
+  // and passed to the component LView.
+  let hydrationInfo = null;
+  if (hostRNode !== null) {
+    hydrationInfo = retrieveHydrationInfo(hostRNode, rootView[INJECTOR$1]);
+  }
+  const viewRenderer = environment.rendererFactory.createRenderer(hostRNode, rootComponentDef);
+  let lViewFlags = 16 /* LViewFlags.CheckAlways */;
+  if (rootComponentDef.signals) {
+    lViewFlags = 4096 /* LViewFlags.SignalView */;
+  } else if (rootComponentDef.onPush) {
+    lViewFlags = 64 /* LViewFlags.Dirty */;
+  }
+  const componentView = createLView(rootView, getOrCreateComponentTView(rootComponentDef), null, lViewFlags, rootView[tNode.index], tNode, environment, viewRenderer, null, null, hydrationInfo);
+  if (tView.firstCreatePass) {
+    markAsComponentHost(tView, tNode, rootDirectives.length - 1);
+  }
+  addToViewTree(rootView, componentView);
+  // Store component view at node index, with node as the HOST
+  return rootView[tNode.index] = componentView;
+}
+/** Sets up the styling information on a root component. */
+function applyRootComponentStyling(rootDirectives, tNode, rNode, hostRenderer) {
+  for (const def of rootDirectives) {
+    tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, def.hostAttrs);
+  }
+  if (tNode.mergedAttrs !== null) {
+    computeStaticStyling(tNode, tNode.mergedAttrs, true);
+    if (rNode !== null) {
+      setupStaticAttributes(hostRenderer, rNode, tNode);
+    }
+  }
+}
+/**
+ * Creates a root component and sets it up with features and host bindings.Shared by
+ * renderComponent() and ViewContainerRef.createComponent().
+ */
+function createRootComponent(componentView, rootComponentDef, rootDirectives, hostDirectiveDefs, rootLView, hostFeatures) {
+  const rootTNode = getCurrentTNode();
+  ngDevMode && assertDefined(rootTNode, 'tNode should have been already created');
+  const tView = rootLView[TVIEW];
+  const native = getNativeByTNode(rootTNode, rootLView);
+  initializeDirectives(tView, rootLView, rootTNode, rootDirectives, null, hostDirectiveDefs);
+  for (let i = 0; i < rootDirectives.length; i++) {
+    const directiveIndex = rootTNode.directiveStart + i;
+    const directiveInstance = getNodeInjectable(rootLView, tView, directiveIndex, rootTNode);
+    attachPatchData(directiveInstance, rootLView);
+  }
+  invokeDirectivesHostBindings(tView, rootLView, rootTNode);
+  if (native) {
+    attachPatchData(native, rootLView);
+  }
+  // We're guaranteed for the `componentOffset` to be positive here
+  // since a root component always matches a component def.
+  ngDevMode && assertGreaterThan(rootTNode.componentOffset, -1, 'componentOffset must be great than -1');
+  const component = getNodeInjectable(rootLView, tView, rootTNode.directiveStart + rootTNode.componentOffset, rootTNode);
+  componentView[CONTEXT] = rootLView[CONTEXT] = component;
+  if (hostFeatures !== null) {
+    for (const feature of hostFeatures) {
+      feature(component, rootComponentDef);
+    }
+  }
+  // We want to generate an empty QueryList for root content queries for backwards
+  // compatibility with ViewEngine.
+  executeContentQueries(tView, rootTNode, rootLView);
+  return component;
+}
+/** Sets the static attributes on a root component. */
+function setRootNodeAttributes(hostRenderer, componentDef, hostRNode, rootSelectorOrNode) {
+  if (rootSelectorOrNode) {
+    // The placeholder will be replaced with the actual version at build time.
+    setUpAttributes(hostRenderer, hostRNode, ['ng-version', '17.2.4']);
+  } else {
+    // If host element is created as a part of this function call (i.e. `rootSelectorOrNode`
+    // is not defined), also apply attributes and classes extracted from component selector.
+    // Extract attributes and classes from the first selector only to match VE behavior.
+    const {
+      attrs,
+      classes
+    } = extractAttrsAndClassesFromSelector(componentDef.selectors[0]);
+    if (attrs) {
+      setUpAttributes(hostRenderer, hostRNode, attrs);
+    }
+    if (classes && classes.length > 0) {
+      writeDirectClass(hostRenderer, hostRNode, classes.join(' '));
+    }
+  }
+}
+/** Projects the `projectableNodes` that were specified when creating a root component. */
+function projectNodes(tNode, ngContentSelectors, projectableNodes) {
+  const projection = tNode.projection = [];
+  for (let i = 0; i < ngContentSelectors.length; i++) {
+    const nodesforSlot = projectableNodes[i];
+    // Projectable nodes can be passed as array of arrays or an array of iterables (ngUpgrade
+    // case). Here we do normalize passed data structure to be an array of arrays to avoid
+    // complex checks down the line.
+    // We also normalize the length of the passed in projectable nodes (to match the number of
+    // <ng-container> slots defined by a component).
+    projection.push(nodesforSlot != null ? Array.from(nodesforSlot) : null);
+  }
+}
+/**
+ * Used to enable lifecycle hooks on the root component.
  *
- * The following examples demonstrate how to modify default change-detection behavior
- * to perform explicit detection when needed.
+ * Include this feature when calling `renderComponent` if the root component
+ * you are rendering has lifecycle hooks defined. Otherwise, the hooks won't
+ * be called properly.
  *
- * ### Use `markForCheck()` with `CheckOnce` strategy
+ * Example:
  *
- * The following example sets the `OnPush` change-detection strategy for a component
- * (`CheckOnce`, rather than the default `CheckAlways`), then forces a second check
- * after an interval.
+ * ```
+ * renderComponent(AppComponent, {hostFeatures: [LifecycleHooksFeature]});
+ * ```
+ */
+function LifecycleHooksFeature() {
+  const tNode = getCurrentTNode();
+  ngDevMode && assertDefined(tNode, 'TNode is required');
+  registerPostOrderHooks(getLView()[TVIEW], tNode);
+}
+
+/**
+ * Represents a container where one or more views can be attached to a component.
  *
- * <code-example path="core/ts/change_detect/change-detection.ts"
- * region="mark-for-check"></code-example>
+ * 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).
  *
- * ### Detach change detector to limit how often check occurs
+ * A view container instance can contain other view containers,
+ * creating a [view hierarchy](guide/glossary#view-hierarchy).
  *
- * The following example defines a component with a large list of read-only data
- * that is expected to change constantly, many times per second.
- * To improve performance, we want to check and update the list
- * less often than the changes actually occur. To do that, we detach
- * the component's change detector and perform an explicit local check every five seconds.
+ * @usageNotes
  *
- * <code-example path="core/ts/change_detect/change-detection.ts" region="detach"></code-example>
+ * 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.
  *
- * ### Reattaching a detached component
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   selector: 'dynamic',
+ *   template: `<span>This is a content of a dynamic component.</span>`,
+ * })
+ * class DynamicComponent {
+ *   vcr = inject(ViewContainerRef);
+ * }
  *
- * The following example creates a component displaying live data.
- * The component detaches its change detector from the main change detector tree
- * when the `live` property is set to false, and reattaches it when the property
- * becomes true.
+ * @Component({
+ *   standalone: true,
+ *   selector: 'app',
+ *   template: `<main>Hi! This is the main content.</main>`,
+ * })
+ * class AppComponent {
+ *   vcr = inject(ViewContainerRef);
  *
- * <code-example path="core/ts/change_detect/change-detection.ts" region="reattach"></code-example>
+ *   ngAfterViewInit() {
+ *     const compRef = this.vcr.createComponent(DynamicComponent);
+ *     compRef.changeDetectorRef.detectChanges();
+ *   }
+ * }
+ * ```
+ *
+ * @see {@link ComponentRef}
+ * @see {@link EmbeddedViewRef}
  *
  * @publicApi
  */
-let ChangeDetectorRef = /*#__PURE__*/(() => {
-  class ChangeDetectorRef {
+let ViewContainerRef = /*#__PURE__*/(() => {
+  class ViewContainerRef {
     /**
      * @internal
      * @nocollapse
      */
-    static #_ = this.__NG_ELEMENT_ID__ = injectChangeDetectorRef;
+    static #_ = this.__NG_ELEMENT_ID__ = injectViewContainerRef;
   }
-  return ChangeDetectorRef;
+  return ViewContainerRef;
 })();
-/** Returns a ChangeDetectorRef (a.k.a. a ViewRef) */
-function injectChangeDetectorRef(flags) {
-  return createViewRef(getCurrentTNode(), getLView(), (flags & 16 /* InternalInjectFlags.ForPipe */) === 16 /* InternalInjectFlags.ForPipe */);
-}
 /**
- * Creates a ViewRef and stores it on the injector as ChangeDetectorRef (public alias).
+ * Creates a ViewContainerRef and stores it on the injector. Or, if the ViewContainerRef
+ * already exists, retrieves the existing ViewContainerRef.
  *
- * @param tNode The node that is requesting a ChangeDetectorRef
- * @param lView The view to which the node belongs
- * @param isPipe Whether the view is being injected into a pipe.
- * @returns The ChangeDetectorRef to use
+ * @returns The ViewContainerRef instance to use
  */
-function createViewRef(tNode, lView, isPipe) {
-  if (isComponentHost(tNode) && !isPipe) {
-    // The LView represents the location where the component is declared.
-    // Instead we want the LView for the component View and so we need to look it up.
-    const componentView = getComponentLViewByIndex(tNode.index, lView); // look down
-    return new ViewRef$1(componentView, componentView);
-  } else if (tNode.type & (3 /* TNodeType.AnyRNode */ | 12 /* TNodeType.AnyContainer */ | 32 /* TNodeType.Icu */)) {
-    // The LView represents the location where the injection is requested from.
-    // We need to locate the containing LView (in case where the `lView` is an embedded view)
-    const hostComponentView = lView[DECLARATION_COMPONENT_VIEW]; // look up
-    return new ViewRef$1(hostComponentView, lView);
-  }
-  return null;
+function injectViewContainerRef() {
+  const previousTNode = getCurrentTNode();
+  return createContainerRef(previousTNode, getLView());
 }
-
-/**
- * Structural diffing for `Object`s and `Map`s.
- */
-const keyValDiff = [/*#__PURE__*/new DefaultKeyValueDifferFactory()];
-/**
- * Structural diffing for `Iterable` types such as `Array`s.
- */
-const iterableDiff = [/*#__PURE__*/new DefaultIterableDifferFactory()];
-const defaultIterableDiffers = /*#__PURE__*/new IterableDiffers(iterableDiff);
-const defaultKeyValueDiffers = /*#__PURE__*/new KeyValueDiffers(keyValDiff);
-
-/**
- * @module
- * @description
- * Change detection enables data binding in Angular.
- */
-
-/**
- * `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
- */
-let DestroyRef = /*#__PURE__*/(() => {
-  class DestroyRef {
-    /**
-     * @internal
-     * @nocollapse
-     */
-    static #_ = this.__NG_ELEMENT_ID__ = injectDestroyRef;
-    /**
-     * @internal
-     * @nocollapse
-     */
-    static #_2 = this.__NG_ENV_ID__ = injector => injector;
-  }
-  return DestroyRef;
-})();
-class NodeInjectorDestroyRef extends DestroyRef {
-  constructor(_lView) {
+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._lView = _lView;
+    this._lContainer = _lContainer;
+    this._hostTNode = _hostTNode;
+    this._hostLView = _hostLView;
   }
-  onDestroy(callback) {
-    storeLViewOnDestroy(this._lView, callback);
-    return () => removeLViewOnDestroy(this._lView, callback);
+  get element() {
+    return createElementRef(this._hostTNode, this._hostLView);
   }
-}
-function injectDestroyRef() {
-  return new NodeInjectorDestroyRef(getLView());
-}
-
-/**
- * Asserts that the current stack frame is not within a reactive context. Useful
- * to disallow certain code from running inside a reactive context (see {@link toSignal}).
- *
- * @param debugFn a reference to the function making the assertion (used for the error message).
- *
- * @publicApi
- */
-function assertNotInReactiveContext(debugFn, extraContext) {
-  // Taking a `Function` instead of a string name here prevents the un-minified name of the function
-  // from being retained in the bundle regardless of minification.
-  if ((0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.getActiveConsumer)() !== null) {
-    throw new RuntimeError(-602 /* RuntimeErrorCode.ASSERTION_NOT_INSIDE_REACTIVE_CONTEXT */, ngDevMode && `${debugFn.name}() cannot be called from within a reactive context.${extraContext ? ` ${extraContext}` : ''}`);
+  get injector() {
+    return new NodeInjector(this._hostTNode, this._hostLView);
   }
-}
-
-/**
- * Not public API, which guarantees `EffectScheduler` only ever comes from the application root
- * injector.
- */
-const APP_EFFECT_SCHEDULER = /*#__PURE__*/new InjectionToken('', {
-  providedIn: 'root',
-  factory: () => inject(EffectScheduler)
-});
-/**
- * A scheduler which manages the execution of effects.
- */
-let EffectScheduler = /*#__PURE__*/(() => {
-  class EffectScheduler {
-    /** @nocollapse */
-    static #_ = this.ɵprov = ɵɵdefineInjectable({
-      token: EffectScheduler,
-      providedIn: 'root',
-      factory: () => new ZoneAwareEffectScheduler()
-    });
+  /** @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);
+    }
   }
-  return EffectScheduler;
-})();
-/**
- * A wrapper around `ZoneAwareQueueingScheduler` that schedules flushing via the microtask queue
- * when.
- */
-class ZoneAwareEffectScheduler {
-  constructor() {
-    this.hasQueuedFlush = false;
-    this.queuedEffectCount = 0;
-    this.queues = new Map();
+  clear() {
+    while (this.length > 0) {
+      this.remove(this.length - 1);
+    }
   }
-  scheduleEffect(handle) {
-    this.enqueue(handle);
-    if (!this.hasQueuedFlush) {
-      queueMicrotask(() => this.flush());
-      // Leave `hasQueuedFlush` as `true` so we don't queue another microtask if more effects are
-      // scheduled during flushing. We are guaranteed to empty the whole queue during flush.
-      this.hasQueuedFlush = false;
+  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;
   }
-  enqueue(handle) {
-    const zone = handle.creationZone;
-    if (!this.queues.has(zone)) {
-      this.queues.set(zone, new Set());
+  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 queue = this.queues.get(zone);
-    if (queue.has(handle)) {
-      return;
+    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;
+      }
     }
-    this.queuedEffectCount++;
-    queue.add(handle);
+    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;
   }
-  /**
-   * Run all scheduled effects.
-   *
-   * Execution order of effects within the same zone is guaranteed to be FIFO, but there is no
-   * ordering guarantee between effects scheduled in different zones.
-   */
-  flush() {
-    while (this.queuedEffectCount > 0) {
-      for (const [zone, queue] of this.queues) {
-        // `zone` here must be defined.
-        if (zone === null) {
-          this.flushQueue(queue);
-        } else {
-          zone.run(() => this.flushQueue(queue));
-        }
+  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;
   }
-  flushQueue(queue) {
-    for (const handle of queue) {
-      queue.delete(handle);
-      this.queuedEffectCount--;
-      // TODO: what happens if this throws an error?
-      handle.run();
+  move(viewRef, newIndex) {
+    if (ngDevMode && viewRef.destroyed) {
+      throw new Error('Cannot move a destroyed View in a ViewContainer!');
     }
+    return this.insert(viewRef, newIndex);
   }
-}
-/**
- * Core reactive node for an Angular effect.
- *
- * `EffectHandle` combines the reactive graph's `Watch` base node for effects with the framework's
- * scheduling abstraction (`EffectScheduler`) as well as automatic cleanup via `DestroyRef` if
- * available/requested.
- */
-class EffectHandle {
-  constructor(scheduler, effectFn, creationZone, destroyRef, injector, allowSignalWrites) {
-    this.scheduler = scheduler;
-    this.effectFn = effectFn;
-    this.creationZone = creationZone;
-    this.injector = injector;
-    this.watcher = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.createWatch)(onCleanup => this.runEffect(onCleanup), () => this.schedule(), allowSignalWrites);
-    this.unregisterOnDestroy = destroyRef?.onDestroy(() => this.destroy());
+  indexOf(viewRef) {
+    const viewRefsArr = getViewRefs(this._lContainer);
+    return viewRefsArr !== null ? viewRefsArr.indexOf(viewRef) : -1;
   }
-  runEffect(onCleanup) {
-    try {
-      this.effectFn(onCleanup);
-    } catch (err) {
-      // Inject the `ErrorHandler` here in order to avoid circular DI error
-      // if the effect is used inside of a custom `ErrorHandler`.
-      const errorHandler = this.injector.get(ErrorHandler, null, {
-        optional: true
-      });
-      errorHandler?.handleError(err);
+  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);
     }
   }
-  run() {
-    this.watcher.run();
+  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;
   }
-  schedule() {
-    this.scheduler.scheduleEffect(this);
+  _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;
   }
-  destroy() {
-    this.watcher.destroy();
-    this.unregisterOnDestroy?.();
-    // Note: if the effect is currently scheduled, it's not un-scheduled, and so the scheduler will
-    // retain a reference to it. Attempting to execute it will be a no-op.
+};
+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);
 }
 /**
- * Create a global `Effect` for the given reactive function.
+ * Creates and inserts a comment node that acts as an anchor for a view container.
  *
- * @developerPreview
+ * 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 effect(effectFn, options) {
-  performanceMarkFeature('NgSignals');
-  ngDevMode && assertNotInReactiveContext(effect, 'Call `effect` outside of a reactive context. For example, schedule the ' + 'effect inside the component constructor.');
-  !options?.injector && assertInInjectionContext(effect);
-  const injector = options?.injector ?? inject(Injector);
-  const destroyRef = options?.manualCleanup !== true ? injector.get(DestroyRef) : null;
-  const handle = new EffectHandle(injector.get(APP_EFFECT_SCHEDULER), effectFn, typeof Zone === 'undefined' ? null : Zone.current, destroyRef, injector, options?.allowSignalWrites ?? false);
-  // Effects need to be marked dirty manually to trigger their initial run. The timing of this
-  // marking matters, because the effects may read signals that track component inputs, which are
-  // only available after those components have had their first update pass.
-  //
-  // We inject `ChangeDetectorRef` optionally, to determine whether this effect is being created in
-  // the context of a component or not. If it is, then we check whether the component has already
-  // run its update pass, and defer the effect's initial scheduling until the update pass if it
-  // hasn't already run.
-  const cdr = injector.get(ChangeDetectorRef, null, {
-    optional: true
-  });
-  if (!cdr || !(cdr._lView[FLAGS] & 8 /* LViewFlags.FirstLViewPass */)) {
-    // This effect is either not running in a view injector, or the view has already
-    // undergone its first change detection pass, which is necessary for any required inputs to be
-    // set.
-    handle.watcher.notify();
+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 _populateDehydratedViewsInLContainer = () => 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.
+ * @param tNode Corresponding TNode.
+ * @param hostLView LView that hosts LContainer.
+ * @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 populateDehydratedViewsInLContainer(lContainer, tNode, hostLView) {
+  return _populateDehydratedViewsInLContainer(lContainer, tNode, hostLView);
+}
+/**
+ * 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 {
-    // Delay the initialization of the effect until the view is fully initialized.
-    (cdr._lView[EFFECTS_TO_SCHEDULE] ??= []).push(handle.watcher.notify);
+    commentNode = insertAnchorNode(hostLView, hostTNode);
   }
-  return handle;
+  lContainer[NATIVE] = commentNode;
 }
-
-// clang-format off
-// clang-format on
-
-function noop(...args) {
-  // Do nothing.
+/**
+ * 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 populateDehydratedViewsInLContainerImpl(lContainer, tNode, hostLView) {
+  // 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 = tNode.index - HEADER_OFFSET;
+  const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock(tNode) || 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, tNode, 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 getNativeRequestAnimationFrame() {
-  // Note: the `getNativeRequestAnimationFrame` is used in the `NgZone` class, but we cannot use the
-  // `inject` function. The `NgZone` instance may be created manually, and thus the injection
-  // context will be unavailable. This might be enough to check whether `requestAnimationFrame` is
-  // available because otherwise, we'll fall back to `setTimeout`.
-  const isBrowser = typeof _global['requestAnimationFrame'] === 'function';
-  // Note: `requestAnimationFrame` is unavailable when the code runs in the Node.js environment. We
-  // use `setTimeout` because no changes are required other than checking if the current platform is
-  // the browser. `setTimeout` is a well-established API that is available in both environments.
-  // `requestAnimationFrame` is used in the browser to coalesce event tasks since event tasks are
-  // usually executed within the same rendering frame (but this is more implementation details of
-  // browsers).
-  let nativeRequestAnimationFrame = _global[isBrowser ? 'requestAnimationFrame' : 'setTimeout'];
-  let nativeCancelAnimationFrame = _global[isBrowser ? 'cancelAnimationFrame' : 'clearTimeout'];
-  if (typeof Zone !== 'undefined' && nativeRequestAnimationFrame && nativeCancelAnimationFrame) {
-    // Note: zone.js sets original implementations on patched APIs behind the
-    // `__zone_symbol__OriginalDelegate` key (see `attachOriginToPatched`). Given the following
-    // example: `window.requestAnimationFrame.__zone_symbol__OriginalDelegate`; this would return an
-    // unpatched implementation of the `requestAnimationFrame`, which isn't intercepted by the
-    // Angular zone. We use the unpatched implementation to avoid another change detection when
-    // coalescing tasks.
-    const unpatchedRequestAnimationFrame = nativeRequestAnimationFrame[Zone.__symbol__('OriginalDelegate')];
-    if (unpatchedRequestAnimationFrame) {
-      nativeRequestAnimationFrame = unpatchedRequestAnimationFrame;
-    }
-    const unpatchedCancelAnimationFrame = nativeCancelAnimationFrame[Zone.__symbol__('OriginalDelegate')];
-    if (unpatchedCancelAnimationFrame) {
-      nativeCancelAnimationFrame = unpatchedCancelAnimationFrame;
-    }
+function locateOrCreateAnchorNode(lContainer, hostLView, hostTNode, slotValue) {
+  if (!_populateDehydratedViewsInLContainer(lContainer, hostTNode, hostLView)) {
+    // 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);
   }
-  return {
-    nativeRequestAnimationFrame,
-    nativeCancelAnimationFrame
-  };
 }
-class AsyncStackTaggingZoneSpec {
-  constructor(namePrefix, consoleAsyncStackTaggingImpl = console) {
-    this.name = 'asyncStackTagging for ' + namePrefix;
-    this.createTask = consoleAsyncStackTaggingImpl?.createTask ?? (() => null);
+function enableLocateOrCreateContainerRefImpl() {
+  _locateOrCreateAnchorNode = locateOrCreateAnchorNode;
+  _populateDehydratedViewsInLContainer = populateDehydratedViewsInLContainerImpl;
+}
+class LQuery_ {
+  constructor(queryList) {
+    this.queryList = queryList;
+    this.matches = null;
   }
-  onScheduleTask(delegate, _current, target, task) {
-    task.consoleTask = this.createTask(`Zone - ${task.source || task.type}`);
-    return delegate.scheduleTask(target, task);
+  clone() {
+    return new LQuery_(this.queryList);
   }
-  onInvokeTask(delegate, _currentZone, targetZone, task, applyThis, applyArgs) {
-    let ret;
-    if (task.consoleTask) {
-      ret = task.consoleTask.run(() => delegate.invokeTask(targetZone, task, applyThis, applyArgs));
-    } else {
-      ret = delegate.invokeTask(targetZone, task, applyThis, applyArgs);
-    }
-    return ret;
+  setDirty() {
+    this.queryList.setDirty();
   }
 }
-
-/**
- * An injectable service for executing work inside or outside of the Angular zone.
- *
- * The most common use of this service is to optimize performance when starting a work consisting of
- * one or more asynchronous tasks that don't require UI updates or error handling to be handled by
- * Angular. Such tasks can be kicked off via {@link #runOutsideAngular} and if needed, these tasks
- * can reenter the Angular zone via {@link #run}.
- *
- * <!-- TODO: add/fix links to:
- *   - docs explaining zones and the use of zones in Angular and change-detection
- *   - link to runOutsideAngular/run (throughout this file!)
- *   -->
- *
- * @usageNotes
- * ### Example
- *
- * ```
- * import {Component, NgZone} from '@angular/core';
- * import {NgIf} from '@angular/common';
- *
- * @Component({
- *   selector: 'ng-zone-demo',
- *   template: `
- *     <h2>Demo: NgZone</h2>
- *
- *     <p>Progress: {{progress}}%</p>
- *     <p *ngIf="progress >= 100">Done processing {{label}} of Angular zone!</p>
- *
- *     <button (click)="processWithinAngularZone()">Process within Angular zone</button>
- *     <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
- *   `,
- * })
- * export class NgZoneDemo {
- *   progress: number = 0;
- *   label: string;
- *
- *   constructor(private _ngZone: NgZone) {}
- *
- *   // Loop inside the Angular zone
- *   // so the UI DOES refresh after each setTimeout cycle
- *   processWithinAngularZone() {
- *     this.label = 'inside';
- *     this.progress = 0;
- *     this._increaseProgress(() => console.log('Inside Done!'));
- *   }
- *
- *   // Loop outside of the Angular zone
- *   // so the UI DOES NOT refresh after each setTimeout cycle
- *   processOutsideOfAngularZone() {
- *     this.label = 'outside';
- *     this.progress = 0;
- *     this._ngZone.runOutsideAngular(() => {
- *       this._increaseProgress(() => {
- *         // reenter the Angular zone and display done
- *         this._ngZone.run(() => { console.log('Outside Done!'); });
- *       });
- *     });
- *   }
- *
- *   _increaseProgress(doneCallback: () => void) {
- *     this.progress += 1;
- *     console.log(`Current progress: ${this.progress}%`);
- *
- *     if (this.progress < 100) {
- *       window.setTimeout(() => this._increaseProgress(doneCallback), 10);
- *     } else {
- *       doneCallback();
- *     }
- *   }
- * }
- * ```
- *
- * @publicApi
- */
-class NgZone {
-  constructor({
-    enableLongStackTrace = false,
-    shouldCoalesceEventChangeDetection = false,
-    shouldCoalesceRunChangeDetection = false
-  }) {
-    this.hasPendingMacrotasks = false;
-    this.hasPendingMicrotasks = false;
-    /**
-     * Whether there are no outstanding microtasks or macrotasks.
-     */
-    this.isStable = true;
-    /**
-     * Notifies when code enters Angular Zone. This gets fired first on VM Turn.
-     */
-    this.onUnstable = new EventEmitter(false);
-    /**
-     * Notifies when there is no more microtasks enqueued in the current VM Turn.
-     * This is a hint for Angular to do change detection, which may enqueue more microtasks.
-     * For this reason this event can fire multiple times per VM Turn.
-     */
-    this.onMicrotaskEmpty = new EventEmitter(false);
-    /**
-     * Notifies when the last `onMicrotaskEmpty` has run and there are no more microtasks, which
-     * implies we are about to relinquish VM turn.
-     * This event gets called just once.
-     */
-    this.onStable = new EventEmitter(false);
-    /**
-     * Notifies that an error has been delivered.
-     */
-    this.onError = new EventEmitter(false);
-    if (typeof Zone == 'undefined') {
-      throw new RuntimeError(908 /* RuntimeErrorCode.MISSING_ZONEJS */, ngDevMode && `In this configuration Angular requires Zone.js`);
-    }
-    Zone.assertZonePatched();
-    const self = this;
-    self._nesting = 0;
-    self._outer = self._inner = Zone.current;
-    // AsyncStackTaggingZoneSpec provides `linked stack traces` to show
-    // where the async operation is scheduled. For more details, refer
-    // to this article, https://developer.chrome.com/blog/devtools-better-angular-debugging/
-    // And we only import this AsyncStackTaggingZoneSpec in development mode,
-    // in the production mode, the AsyncStackTaggingZoneSpec will be tree shaken away.
-    if (ngDevMode) {
-      self._inner = self._inner.fork(new AsyncStackTaggingZoneSpec('Angular'));
+class LQueries_ {
+  constructor(queries = []) {
+    this.queries = queries;
+  }
+  createEmbeddedView(tView) {
+    const tQueries = tView.queries;
+    if (tQueries !== null) {
+      const noOfInheritedQueries = tView.contentQueries !== null ? tView.contentQueries[0] : tQueries.length;
+      const viewLQueries = [];
+      // An embedded view has queries propagated from a declaration view at the beginning of the
+      // TQueries collection and up until a first content query declared in the embedded view. Only
+      // propagated LQueries are created at this point (LQuery corresponding to declared content
+      // queries will be instantiated from the content query instructions for each directive).
+      for (let i = 0; i < noOfInheritedQueries; i++) {
+        const tQuery = tQueries.getByIndex(i);
+        const parentLQuery = this.queries[tQuery.indexInDeclarationView];
+        viewLQueries.push(parentLQuery.clone());
+      }
+      return new LQueries_(viewLQueries);
     }
-    if (Zone['TaskTrackingZoneSpec']) {
-      self._inner = self._inner.fork(new Zone['TaskTrackingZoneSpec']());
+    return null;
+  }
+  insertView(tView) {
+    this.dirtyQueriesWithMatches(tView);
+  }
+  detachView(tView) {
+    this.dirtyQueriesWithMatches(tView);
+  }
+  finishViewCreation(tView) {
+    this.dirtyQueriesWithMatches(tView);
+  }
+  dirtyQueriesWithMatches(tView) {
+    for (let i = 0; i < this.queries.length; i++) {
+      if (getTQuery(tView, i).matches !== null) {
+        this.queries[i].setDirty();
+      }
     }
-    if (enableLongStackTrace && Zone['longStackTraceZoneSpec']) {
-      self._inner = self._inner.fork(Zone['longStackTraceZoneSpec']);
+  }
+}
+class TQueryMetadata_ {
+  constructor(predicate, flags, read = null) {
+    this.flags = flags;
+    this.read = read;
+    // Compiler might not be able to pre-optimize and split multiple selectors.
+    if (typeof predicate === 'string') {
+      this.predicate = splitQueryMultiSelectors(predicate);
+    } else {
+      this.predicate = predicate;
     }
-    // if shouldCoalesceRunChangeDetection is true, all tasks including event tasks will be
-    // coalesced, so shouldCoalesceEventChangeDetection option is not necessary and can be skipped.
-    self.shouldCoalesceEventChangeDetection = !shouldCoalesceRunChangeDetection && shouldCoalesceEventChangeDetection;
-    self.shouldCoalesceRunChangeDetection = shouldCoalesceRunChangeDetection;
-    self.lastRequestAnimationFrameId = -1;
-    self.nativeRequestAnimationFrame = getNativeRequestAnimationFrame().nativeRequestAnimationFrame;
-    forkInnerZoneWithAngularBehavior(self);
   }
-  /**
-    This method checks whether the method call happens within an Angular Zone instance.
-  */
-  static isInAngularZone() {
-    // Zone needs to be checked, because this method might be called even when NoopNgZone is used.
-    return typeof Zone !== 'undefined' && Zone.current.get('isAngularZone') === true;
+}
+class TQueries_ {
+  constructor(queries = []) {
+    this.queries = queries;
   }
-  /**
-    Assures that the method is called within the Angular Zone, otherwise throws an error.
-  */
-  static assertInAngularZone() {
-    if (!NgZone.isInAngularZone()) {
-      throw new RuntimeError(909 /* RuntimeErrorCode.UNEXPECTED_ZONE_STATE */, ngDevMode && 'Expected to be in Angular Zone, but it is not!');
+  elementStart(tView, tNode) {
+    ngDevMode && assertFirstCreatePass(tView, 'Queries should collect results on the first template pass only');
+    for (let i = 0; i < this.queries.length; i++) {
+      this.queries[i].elementStart(tView, tNode);
     }
   }
-  /**
-    Assures that the method is called outside of the Angular Zone, otherwise throws an error.
-  */
-  static assertNotInAngularZone() {
-    if (NgZone.isInAngularZone()) {
-      throw new RuntimeError(909 /* RuntimeErrorCode.UNEXPECTED_ZONE_STATE */, ngDevMode && 'Expected to not be in Angular Zone, but it is!');
+  elementEnd(tNode) {
+    for (let i = 0; i < this.queries.length; i++) {
+      this.queries[i].elementEnd(tNode);
     }
   }
-  /**
-   * Executes the `fn` function synchronously within the Angular zone and returns value returned by
-   * the function.
-   *
-   * Running functions via `run` allows you to reenter Angular zone from a task that was executed
-   * outside of the Angular zone (typically started via {@link #runOutsideAngular}).
-   *
-   * Any future tasks or microtasks scheduled from within this function will continue executing from
-   * within the Angular zone.
-   *
-   * If a synchronous error happens it will be rethrown and not reported via `onError`.
-   */
-  run(fn, applyThis, applyArgs) {
-    return this._inner.run(fn, applyThis, applyArgs);
+  embeddedTView(tNode) {
+    let queriesForTemplateRef = null;
+    for (let i = 0; i < this.length; i++) {
+      const childQueryIndex = queriesForTemplateRef !== null ? queriesForTemplateRef.length : 0;
+      const tqueryClone = this.getByIndex(i).embeddedTView(tNode, childQueryIndex);
+      if (tqueryClone) {
+        tqueryClone.indexInDeclarationView = i;
+        if (queriesForTemplateRef !== null) {
+          queriesForTemplateRef.push(tqueryClone);
+        } else {
+          queriesForTemplateRef = [tqueryClone];
+        }
+      }
+    }
+    return queriesForTemplateRef !== null ? new TQueries_(queriesForTemplateRef) : null;
   }
-  /**
-   * Executes the `fn` function synchronously within the Angular zone as a task and returns value
-   * returned by the function.
-   *
-   * Running functions via `run` allows you to reenter Angular zone from a task that was executed
-   * outside of the Angular zone (typically started via {@link #runOutsideAngular}).
-   *
-   * Any future tasks or microtasks scheduled from within this function will continue executing from
-   * within the Angular zone.
-   *
-   * If a synchronous error happens it will be rethrown and not reported via `onError`.
-   */
-  runTask(fn, applyThis, applyArgs, name) {
-    const zone = this._inner;
-    const task = zone.scheduleEventTask('NgZoneEvent: ' + name, fn, EMPTY_PAYLOAD, noop, noop);
-    try {
-      return zone.runTask(task, applyThis, applyArgs);
-    } finally {
-      zone.cancelTask(task);
+  template(tView, tNode) {
+    ngDevMode && assertFirstCreatePass(tView, 'Queries should collect results on the first template pass only');
+    for (let i = 0; i < this.queries.length; i++) {
+      this.queries[i].template(tView, tNode);
     }
   }
-  /**
-   * Same as `run`, except that synchronous errors are caught and forwarded via `onError` and not
-   * rethrown.
-   */
-  runGuarded(fn, applyThis, applyArgs) {
-    return this._inner.runGuarded(fn, applyThis, applyArgs);
+  getByIndex(index) {
+    ngDevMode && assertIndexInRange(this.queries, index);
+    return this.queries[index];
   }
-  /**
-   * Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
-   * the function.
-   *
-   * Running functions via {@link #runOutsideAngular} allows you to escape Angular's zone and do
-   * work that
-   * doesn't trigger Angular change-detection or is subject to Angular's error handling.
-   *
-   * Any future tasks or microtasks scheduled from within this function will continue executing from
-   * outside of the Angular zone.
-   *
-   * Use {@link #run} to reenter the Angular zone and do work that updates the application model.
-   */
-  runOutsideAngular(fn) {
-    return this._outer.run(fn);
+  get length() {
+    return this.queries.length;
+  }
+  track(tquery) {
+    this.queries.push(tquery);
   }
 }
-const EMPTY_PAYLOAD = {};
-function checkStable(zone) {
-  // TODO: @JiaLiPassion, should check zone.isCheckStableRunning to prevent
-  // re-entry. The case is:
-  //
-  // @Component({...})
-  // export class AppComponent {
-  // constructor(private ngZone: NgZone) {
-  //   this.ngZone.onStable.subscribe(() => {
-  //     this.ngZone.run(() => console.log('stable'););
-  //   });
-  // }
-  //
-  // The onStable subscriber run another function inside ngZone
-  // which causes `checkStable()` re-entry.
-  // But this fix causes some issues in g3, so this fix will be
-  // launched in another PR.
-  if (zone._nesting == 0 && !zone.hasPendingMicrotasks && !zone.isStable) {
-    try {
-      zone._nesting++;
-      zone.onMicrotaskEmpty.emit(null);
-    } finally {
-      zone._nesting--;
-      if (!zone.hasPendingMicrotasks) {
-        try {
-          zone.runOutsideAngular(() => zone.onStable.emit(null));
-        } finally {
-          zone.isStable = true;
-        }
-      }
+class TQuery_ {
+  constructor(metadata, nodeIndex = -1) {
+    this.metadata = metadata;
+    this.matches = null;
+    this.indexInDeclarationView = -1;
+    this.crossesNgTemplate = false;
+    /**
+     * A flag indicating if a given query still applies to nodes it is crossing. We use this flag
+     * (alongside with _declarationNodeIndex) to know when to stop applying content queries to
+     * elements in a template.
+     */
+    this._appliesToNextNode = true;
+    this._declarationNodeIndex = nodeIndex;
+  }
+  elementStart(tView, tNode) {
+    if (this.isApplyingToNode(tNode)) {
+      this.matchTNode(tView, tNode);
     }
   }
-}
-function delayChangeDetectionForEvents(zone) {
-  /**
-   * We also need to check _nesting here
-   * Consider the following case with shouldCoalesceRunChangeDetection = true
-   *
-   * ngZone.run(() => {});
-   * ngZone.run(() => {});
-   *
-   * We want the two `ngZone.run()` only trigger one change detection
-   * when shouldCoalesceRunChangeDetection is true.
-   * And because in this case, change detection run in async way(requestAnimationFrame),
-   * so we also need to check the _nesting here to prevent multiple
-   * change detections.
-   */
-  if (zone.isCheckStableRunning || zone.lastRequestAnimationFrameId !== -1) {
-    return;
+  elementEnd(tNode) {
+    if (this._declarationNodeIndex === tNode.index) {
+      this._appliesToNextNode = false;
+    }
   }
-  zone.lastRequestAnimationFrameId = zone.nativeRequestAnimationFrame.call(_global, () => {
-    // This is a work around for https://github.com/angular/angular/issues/36839.
-    // The core issue is that when event coalescing is enabled it is possible for microtasks
-    // to get flushed too early (As is the case with `Promise.then`) between the
-    // coalescing eventTasks.
-    //
-    // To workaround this we schedule a "fake" eventTask before we process the
-    // coalescing eventTasks. The benefit of this is that the "fake" container eventTask
-    //  will prevent the microtasks queue from getting drained in between the coalescing
-    // eventTask execution.
-    if (!zone.fakeTopEventTask) {
-      zone.fakeTopEventTask = Zone.root.scheduleEventTask('fakeTopEventTask', () => {
-        zone.lastRequestAnimationFrameId = -1;
-        updateMicroTaskStatus(zone);
-        zone.isCheckStableRunning = true;
-        checkStable(zone);
-        zone.isCheckStableRunning = false;
-      }, undefined, () => {}, () => {});
+  template(tView, tNode) {
+    this.elementStart(tView, tNode);
+  }
+  embeddedTView(tNode, childQueryIndex) {
+    if (this.isApplyingToNode(tNode)) {
+      this.crossesNgTemplate = true;
+      // A marker indicating a `<ng-template>` element (a placeholder for query results from
+      // embedded views created based on this `<ng-template>`).
+      this.addMatch(-tNode.index, childQueryIndex);
+      return new TQuery_(this.metadata);
     }
-    zone.fakeTopEventTask.invoke();
-  });
-  updateMicroTaskStatus(zone);
-}
-function forkInnerZoneWithAngularBehavior(zone) {
-  const delayChangeDetectionForEventsDelegate = () => {
-    delayChangeDetectionForEvents(zone);
-  };
-  zone._inner = zone._inner.fork({
-    name: 'angular',
-    properties: {
-      'isAngularZone': true
-    },
-    onInvokeTask: (delegate, current, target, task, applyThis, applyArgs) => {
-      if (shouldBeIgnoredByZone(applyArgs)) {
-        return delegate.invokeTask(target, task, applyThis, applyArgs);
+    return null;
+  }
+  isApplyingToNode(tNode) {
+    if (this._appliesToNextNode && (this.metadata.flags & 1 /* QueryFlags.descendants */) !== 1 /* QueryFlags.descendants */) {
+      const declarationNodeIdx = this._declarationNodeIndex;
+      let parent = tNode.parent;
+      // Determine if a given TNode is a "direct" child of a node on which a content query was
+      // declared (only direct children of query's host node can match with the descendants: false
+      // option). There are 3 main use-case / conditions to consider here:
+      // - <needs-target><i #target></i></needs-target>: here <i #target> parent node is a query
+      // host node;
+      // - <needs-target><ng-template [ngIf]="true"><i #target></i></ng-template></needs-target>:
+      // here <i #target> parent node is null;
+      // - <needs-target><ng-container><i #target></i></ng-container></needs-target>: here we need
+      // to go past `<ng-container>` to determine <i #target> parent node (but we shouldn't traverse
+      // up past the query's host node!).
+      while (parent !== null && parent.type & 8 /* TNodeType.ElementContainer */ && parent.index !== declarationNodeIdx) {
+        parent = parent.parent;
       }
-      try {
-        onEnter(zone);
-        return delegate.invokeTask(target, task, applyThis, applyArgs);
-      } finally {
-        if (zone.shouldCoalesceEventChangeDetection && task.type === 'eventTask' || zone.shouldCoalesceRunChangeDetection) {
-          delayChangeDetectionForEventsDelegate();
-        }
-        onLeave(zone);
+      return declarationNodeIdx === (parent !== null ? parent.index : -1);
+    }
+    return this._appliesToNextNode;
+  }
+  matchTNode(tView, tNode) {
+    const predicate = this.metadata.predicate;
+    if (Array.isArray(predicate)) {
+      for (let i = 0; i < predicate.length; i++) {
+        const name = predicate[i];
+        this.matchTNodeWithReadOption(tView, tNode, getIdxOfMatchingSelector(tNode, name));
+        // Also try matching the name to a provider since strings can be used as DI tokens too.
+        this.matchTNodeWithReadOption(tView, tNode, locateDirectiveOrProvider(tNode, tView, name, false, false));
       }
-    },
-    onInvoke: (delegate, current, target, callback, applyThis, applyArgs, source) => {
-      try {
-        onEnter(zone);
-        return delegate.invoke(target, callback, applyThis, applyArgs, source);
-      } finally {
-        if (zone.shouldCoalesceRunChangeDetection) {
-          delayChangeDetectionForEventsDelegate();
+    } else {
+      if (predicate === TemplateRef) {
+        if (tNode.type & 4 /* TNodeType.Container */) {
+          this.matchTNodeWithReadOption(tView, tNode, -1);
         }
-        onLeave(zone);
+      } else {
+        this.matchTNodeWithReadOption(tView, tNode, locateDirectiveOrProvider(tNode, tView, predicate, false, false));
       }
-    },
-    onHasTask: (delegate, current, target, hasTaskState) => {
-      delegate.hasTask(target, hasTaskState);
-      if (current === target) {
-        // We are only interested in hasTask events which originate from our zone
-        // (A child hasTask event is not interesting to us)
-        if (hasTaskState.change == 'microTask') {
-          zone._hasPendingMicrotasks = hasTaskState.microTask;
-          updateMicroTaskStatus(zone);
-          checkStable(zone);
-        } else if (hasTaskState.change == 'macroTask') {
-          zone.hasPendingMacrotasks = hasTaskState.macroTask;
+    }
+  }
+  matchTNodeWithReadOption(tView, tNode, nodeMatchIdx) {
+    if (nodeMatchIdx !== null) {
+      const read = this.metadata.read;
+      if (read !== null) {
+        if (read === ElementRef || read === ViewContainerRef || read === TemplateRef && tNode.type & 4 /* TNodeType.Container */) {
+          this.addMatch(tNode.index, -2);
+        } else {
+          const directiveOrProviderIdx = locateDirectiveOrProvider(tNode, tView, read, false, false);
+          if (directiveOrProviderIdx !== null) {
+            this.addMatch(tNode.index, directiveOrProviderIdx);
+          }
         }
+      } else {
+        this.addMatch(tNode.index, nodeMatchIdx);
       }
-    },
-    onHandleError: (delegate, current, target, error) => {
-      delegate.handleError(target, error);
-      zone.runOutsideAngular(() => zone.onError.emit(error));
-      return false;
     }
-  });
-}
-function updateMicroTaskStatus(zone) {
-  if (zone._hasPendingMicrotasks || (zone.shouldCoalesceEventChangeDetection || zone.shouldCoalesceRunChangeDetection) && zone.lastRequestAnimationFrameId !== -1) {
-    zone.hasPendingMicrotasks = true;
-  } else {
-    zone.hasPendingMicrotasks = false;
   }
-}
-function onEnter(zone) {
-  zone._nesting++;
-  if (zone.isStable) {
-    zone.isStable = false;
-    zone.onUnstable.emit(null);
+  addMatch(tNodeIdx, matchIdx) {
+    if (this.matches === null) {
+      this.matches = [tNodeIdx, matchIdx];
+    } else {
+      this.matches.push(tNodeIdx, matchIdx);
+    }
   }
 }
-function onLeave(zone) {
-  zone._nesting--;
-  checkStable(zone);
-}
 /**
- * Provides a noop implementation of `NgZone` which does nothing. This zone requires explicit calls
- * to framework to perform rendering.
+ * Iterates over local names for a given node and returns directive index
+ * (or -1 if a local name points to an element).
+ *
+ * @param tNode static data of a node to check
+ * @param selector selector to match
+ * @returns directive index, -1 or null if a selector didn't match any of the local names
  */
-class NoopNgZone {
-  constructor() {
-    this.hasPendingMicrotasks = false;
-    this.hasPendingMacrotasks = false;
-    this.isStable = true;
-    this.onUnstable = new EventEmitter();
-    this.onMicrotaskEmpty = new EventEmitter();
-    this.onStable = new EventEmitter();
-    this.onError = new EventEmitter();
-  }
-  run(fn, applyThis, applyArgs) {
-    return fn.apply(applyThis, applyArgs);
-  }
-  runGuarded(fn, applyThis, applyArgs) {
-    return fn.apply(applyThis, applyArgs);
+function getIdxOfMatchingSelector(tNode, selector) {
+  const localNames = tNode.localNames;
+  if (localNames !== null) {
+    for (let i = 0; i < localNames.length; i += 2) {
+      if (localNames[i] === selector) {
+        return localNames[i + 1];
+      }
+    }
   }
-  runOutsideAngular(fn) {
-    return fn();
+  return null;
+}
+function createResultByTNodeType(tNode, currentView) {
+  if (tNode.type & (3 /* TNodeType.AnyRNode */ | 8 /* TNodeType.ElementContainer */)) {
+    return createElementRef(tNode, currentView);
+  } else if (tNode.type & 4 /* TNodeType.Container */) {
+    return createTemplateRef(tNode, currentView);
   }
-  runTask(fn, applyThis, applyArgs, name) {
-    return fn.apply(applyThis, applyArgs);
+  return null;
+}
+function createResultForNode(lView, tNode, matchingIdx, read) {
+  if (matchingIdx === -1) {
+    // if read token and / or strategy is not specified, detect it using appropriate tNode type
+    return createResultByTNodeType(tNode, lView);
+  } else if (matchingIdx === -2) {
+    // read a special token from a node injector
+    return createSpecialToken(lView, tNode, read);
+  } else {
+    // read a token
+    return getNodeInjectable(lView, lView[TVIEW], matchingIdx, tNode);
   }
 }
-function shouldBeIgnoredByZone(applyArgs) {
-  if (!Array.isArray(applyArgs)) {
-    return false;
+function createSpecialToken(lView, tNode, read) {
+  if (read === ElementRef) {
+    return createElementRef(tNode, lView);
+  } else if (read === TemplateRef) {
+    return createTemplateRef(tNode, lView);
+  } else if (read === ViewContainerRef) {
+    ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ | 12 /* TNodeType.AnyContainer */);
+    return createContainerRef(tNode, lView);
+  } else {
+    ngDevMode && throwError(`Special token to read should be one of ElementRef, TemplateRef or ViewContainerRef but got ${stringify(read)}.`);
   }
-  // We should only ever get 1 arg passed through to invokeTask.
-  // Short circuit here incase that behavior changes.
-  if (applyArgs.length !== 1) {
-    return false;
+}
+/**
+ * A helper function that creates query results for a given view. This function is meant to do the
+ * processing once and only once for a given view instance (a set of results for a given view
+ * doesn't change).
+ */
+function materializeViewResults(tView, lView, tQuery, queryIndex) {
+  const lQuery = lView[QUERIES].queries[queryIndex];
+  if (lQuery.matches === null) {
+    const tViewData = tView.data;
+    const tQueryMatches = tQuery.matches;
+    const result = [];
+    for (let i = 0; tQueryMatches !== null && i < tQueryMatches.length; i += 2) {
+      const matchedNodeIdx = tQueryMatches[i];
+      if (matchedNodeIdx < 0) {
+        // we at the <ng-template> marker which might have results in views created based on this
+        // <ng-template> - those results will be in separate views though, so here we just leave
+        // null as a placeholder
+        result.push(null);
+      } else {
+        ngDevMode && assertIndexInRange(tViewData, matchedNodeIdx);
+        const tNode = tViewData[matchedNodeIdx];
+        result.push(createResultForNode(lView, tNode, tQueryMatches[i + 1], tQuery.metadata.read));
+      }
+    }
+    lQuery.matches = result;
   }
-  // Prevent triggering change detection when the __ignore_ng_zone__ flag is detected.
-  return applyArgs[0].data?.['__ignore_ng_zone__'] === true;
+  return lQuery.matches;
 }
-function getNgZone(ngZoneToUse = 'zone.js', options) {
-  if (ngZoneToUse === 'noop') {
-    return new NoopNgZone();
+/**
+ * A helper function that collects (already materialized) query results from a tree of views,
+ * starting with a provided LView.
+ */
+function collectQueryResults(tView, lView, queryIndex, result) {
+  const tQuery = tView.queries.getByIndex(queryIndex);
+  const tQueryMatches = tQuery.matches;
+  if (tQueryMatches !== null) {
+    const lViewResults = materializeViewResults(tView, lView, tQuery, queryIndex);
+    for (let i = 0; i < tQueryMatches.length; i += 2) {
+      const tNodeIdx = tQueryMatches[i];
+      if (tNodeIdx > 0) {
+        result.push(lViewResults[i / 2]);
+      } else {
+        const childQueryIndex = tQueryMatches[i + 1];
+        const declarationLContainer = lView[-tNodeIdx];
+        ngDevMode && assertLContainer(declarationLContainer);
+        // collect matches for views inserted in this container
+        for (let i = CONTAINER_HEADER_OFFSET; i < declarationLContainer.length; i++) {
+          const embeddedLView = declarationLContainer[i];
+          if (embeddedLView[DECLARATION_LCONTAINER] === embeddedLView[PARENT]) {
+            collectQueryResults(embeddedLView[TVIEW], embeddedLView, childQueryIndex, result);
+          }
+        }
+        // collect matches for views created from this declaration container and inserted into
+        // different containers
+        if (declarationLContainer[MOVED_VIEWS] !== null) {
+          const embeddedLViews = declarationLContainer[MOVED_VIEWS];
+          for (let i = 0; i < embeddedLViews.length; i++) {
+            const embeddedLView = embeddedLViews[i];
+            collectQueryResults(embeddedLView[TVIEW], embeddedLView, childQueryIndex, result);
+          }
+        }
+      }
+    }
   }
-  if (ngZoneToUse === 'zone.js') {
-    return new NgZone(options);
+  return result;
+}
+function loadQueryInternal(lView, queryIndex) {
+  ngDevMode && assertDefined(lView[QUERIES], 'LQueries should be defined when trying to load a query');
+  ngDevMode && assertIndexInRange(lView[QUERIES].queries, queryIndex);
+  return lView[QUERIES].queries[queryIndex].queryList;
+}
+/**
+ * Creates a new instance of LQuery and returns its index in the collection of LQuery objects.
+ *
+ * @returns index in the collection of LQuery objects
+ */
+function createLQuery(tView, lView, flags) {
+  const queryList = new QueryList((flags & 4 /* QueryFlags.emitDistinctChangesOnly */) === 4 /* QueryFlags.emitDistinctChangesOnly */);
+  storeCleanupWithContext(tView, lView, queryList, queryList.destroy);
+  const lQueries = (lView[QUERIES] ??= new LQueries_()).queries;
+  return lQueries.push(new LQuery_(queryList)) - 1;
+}
+function createViewQuery(predicate, flags, read) {
+  ngDevMode && assertNumber(flags, 'Expecting flags');
+  const tView = getTView();
+  if (tView.firstCreatePass) {
+    createTQuery(tView, new TQueryMetadata_(predicate, flags, read), -1);
+    if ((flags & 2 /* QueryFlags.isStatic */) === 2 /* QueryFlags.isStatic */) {
+      tView.staticViewQueries = true;
+    }
   }
-  return ngZoneToUse;
+  return createLQuery(tView, getLView(), flags);
+}
+function createContentQuery(directiveIndex, predicate, flags, read) {
+  ngDevMode && assertNumber(flags, 'Expecting flags');
+  const tView = getTView();
+  if (tView.firstCreatePass) {
+    const tNode = getCurrentTNode();
+    createTQuery(tView, new TQueryMetadata_(predicate, flags, read), tNode.index);
+    saveContentQueryAndDirectiveIndex(tView, directiveIndex);
+    if ((flags & 2 /* QueryFlags.isStatic */) === 2 /* QueryFlags.isStatic */) {
+      tView.staticContentQueries = true;
+    }
+  }
+  return createLQuery(tView, getLView(), flags);
+}
+/** Splits multiple selectors in the locator. */
+function splitQueryMultiSelectors(locator) {
+  return locator.split(',').map(s => s.trim());
+}
+function createTQuery(tView, metadata, nodeIndex) {
+  if (tView.queries === null) tView.queries = new TQueries_();
+  tView.queries.track(new TQuery_(metadata, nodeIndex));
+}
+function saveContentQueryAndDirectiveIndex(tView, directiveIndex) {
+  const tViewContentQueries = tView.contentQueries || (tView.contentQueries = []);
+  const lastSavedDirectiveIndex = tViewContentQueries.length ? tViewContentQueries[tViewContentQueries.length - 1] : -1;
+  if (directiveIndex !== lastSavedDirectiveIndex) {
+    tViewContentQueries.push(tView.queries.length - 1, directiveIndex);
+  }
+}
+function getTQuery(tView, index) {
+  ngDevMode && assertDefined(tView.queries, 'TQueries must be defined to retrieve a TQuery');
+  return tView.queries.getByIndex(index);
+}
+/**
+ * A helper function collecting results from all the views where a given query was active.
+ * @param lView
+ * @param queryIndex
+ */
+function getQueryResults(lView, queryIndex) {
+  const tView = lView[TVIEW];
+  const tQuery = getTQuery(tView, queryIndex);
+  return tQuery.crossesNgTemplate ? collectQueryResults(tView, lView, queryIndex, []) : materializeViewResults(tView, lView, tQuery, queryIndex);
 }
 
 /**
- * The phase to run an `afterRender` or `afterNextRender` callback in.
+ * Checks if the given `value` is a reactive `Signal`.
+ */
+function isSignal(value) {
+  return typeof value === 'function' && value[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL] !== undefined;
+}
+
+/** Symbol used distinguish `WritableSignal` from other non-writable signals and functions. */
+const WRITABLE_SIGNAL = /* @__PURE__ */(/* unused pure expression or super */ null && (Symbol('WRITABLE_SIGNAL')));
+/**
+ * Utility function used during template type checking to extract the value from a `WritableSignal`.
+ * @codeGenApi
+ */
+function ɵunwrapWritableSignal(value) {
+  // Note: needs to be kept in sync with the copy in `fake_core/index.ts`.
+  // Note: the function uses `WRITABLE_SIGNAL` as a brand instead of `WritableSignal<T>`,
+  // because the latter incorrectly unwraps non-signal getter functions.
+  return null;
+}
+/**
+ * Create a `Signal` that can be set or updated directly.
+ */
+function signal(initialValue, options) {
+  performanceMarkFeature('NgSignals');
+  const signalFn = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.createSignal)(initialValue);
+  const node = signalFn[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL];
+  if (options?.equal) {
+    node.equal = options.equal;
+  }
+  signalFn.set = newValue => (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.signalSetFn)(node, newValue);
+  signalFn.update = updateFn => (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.signalUpdateFn)(node, updateFn);
+  signalFn.asReadonly = signalAsReadonlyFn.bind(signalFn);
+  if (ngDevMode) {
+    signalFn.toString = () => `[Signal: ${signalFn()}]`;
+  }
+  return signalFn;
+}
+function signalAsReadonlyFn() {
+  const node = this[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL];
+  if (node.readonlyFn === undefined) {
+    const readonlyFn = () => this();
+    readonlyFn[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL] = node;
+    node.readonlyFn = readonlyFn;
+  }
+  return node.readonlyFn;
+}
+/**
+ * Checks if the given `value` is a writeable signal.
+ */
+function isWritableSignal(value) {
+  return isSignal(value) && typeof value.set === 'function';
+}
+
+/**
+ * A signal factory function in charge of creating a new computed signal capturing query
+ * results. This centralized creation function is used by all types of queries (child / children,
+ * required / optional).
  *
- * Callbacks in the same phase run in the order they are registered. Phases run in the
- * following order after each render:
+ * @param firstOnly indicates if all or only the first result should be returned
+ * @param required indicates if at least one result is required
+ * @returns a read-only signal with query results
+ */
+function createQuerySignalFn(firstOnly, required) {
+  let node;
+  const signalFn = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.createComputed)(() => {
+    // A dedicated signal that increments its value every time a query changes its dirty status. By
+    // using this signal we can implement a query as computed and avoid creation of a specialized
+    // reactive node type. Please note that a query gets marked dirty under the following
+    // circumstances:
+    // - a view (where a query is active) finished its first creation pass;
+    // - a new view is inserted / deleted and it impacts query results.
+    node._dirtyCounter();
+    const value = refreshSignalQuery(node, firstOnly);
+    if (required && value === undefined) {
+      throw new RuntimeError(-951 /* RuntimeErrorCode.REQUIRED_QUERY_NO_VALUE */, ngDevMode && 'Child query result is required but no value is available.');
+    }
+    return value;
+  });
+  node = signalFn[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL];
+  node._dirtyCounter = signal(0);
+  node._flatValue = undefined;
+  if (ngDevMode) {
+    signalFn.toString = () => `[Query Signal]`;
+  }
+  return signalFn;
+}
+function createSingleResultOptionalQuerySignalFn() {
+  return createQuerySignalFn( /* firstOnly */true, /* required */false);
+}
+function createSingleResultRequiredQuerySignalFn() {
+  return createQuerySignalFn( /* firstOnly */true, /* required */true);
+}
+function createMultiResultQuerySignalFn() {
+  return createQuerySignalFn( /* firstOnly */false, /* required */false);
+}
+function bindQueryToSignal(target, queryIndex) {
+  const node = target[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL];
+  node._lView = getLView();
+  node._queryIndex = queryIndex;
+  node._queryList = loadQueryInternal(node._lView, queryIndex);
+  node._queryList.onDirty(() => node._dirtyCounter.update(v => v + 1));
+}
+function refreshSignalQuery(node, firstOnly) {
+  const lView = node._lView;
+  const queryIndex = node._queryIndex;
+  // There are 2 conditions under which we want to return "empty" results instead of the ones
+  // collected by a query:
+  //
+  // 1) a given query wasn't created yet (this is a period of time between the directive creation
+  // and execution of the query creation function) - in this case a query doesn't exist yet and we
+  // don't have any results to return.
+  //
+  // 2) we are in the process of constructing a view (the first
+  // creation pass didn't finish) and a query might have partial results, but we don't want to
+  // return those - instead we do delay results collection until all nodes had a chance of matching
+  // and we can present consistent, "atomic" (on a view level) results.
+  if (lView === undefined || queryIndex === undefined || lView[FLAGS] & 4 /* LViewFlags.CreationMode */) {
+    return firstOnly ? undefined : EMPTY_ARRAY;
+  }
+  const queryList = loadQueryInternal(lView, queryIndex);
+  const results = getQueryResults(lView, queryIndex);
+  queryList.reset(results, unwrapElementRef);
+  if (firstOnly) {
+    return queryList.first;
+  } else {
+    // TODO: remove access to the private _changesDetected field by abstracting / removing usage of
+    // QueryList in the signal-based queries (perf follow-up)
+    const resultChanged = queryList._changesDetected;
+    if (resultChanged || node._flatValue === undefined) {
+      return node._flatValue = queryList.toArray();
+    }
+    return node._flatValue;
+  }
+}
+function viewChildFn(locator, opts) {
+  return createSingleResultOptionalQuerySignalFn();
+}
+function viewChildRequiredFn(locator, opts) {
+  return createSingleResultRequiredQuerySignalFn();
+}
+/**
+ * Initializes a view child query.
  *
- *   1. `AfterRenderPhase.EarlyRead`
- *   2. `AfterRenderPhase.Write`
- *   3. `AfterRenderPhase.MixedReadWrite`
- *   4. `AfterRenderPhase.Read`
+ * Consider using `viewChild.required` for queries that should always match.
  *
- * Angular is unable to verify or enforce that phases are used correctly, and instead
- * relies on each developer to follow the guidelines documented for each value and
- * carefully choose the appropriate one, refactoring their code if necessary. By doing
- * so, Angular is better able to minimize the performance degradation associated with
- * manual DOM access, ensuring the best experience for the end users of your application
- * or library.
+ * @usageNotes
+ * Create a child query in your component by declaring a
+ * class field and initializing it with the `viewChild()` function.
+ *
+ * ```ts
+ * @Component({template: '<div #el></div><my-component #cmp />'})
+ * export class TestComponent {
+ *   divEl = viewChild<ElementRef>('el');                   // Signal<ElementRef|undefined>
+ *   divElRequired = viewChild.required<ElementRef>('el');  // Signal<ElementRef>
+ *   cmp = viewChild(MyComponent);                          // Signal<MyComponent|undefined>
+ *   cmpRequired = viewChild.required(MyComponent);         // Signal<MyComponent>
+ * }
+ * ```
  *
  * @developerPreview
  */
-var AfterRenderPhase = /*#__PURE__*/function (AfterRenderPhase) {
-  /**
-   * Use `AfterRenderPhase.EarlyRead` for callbacks that only need to **read** from the
-   * DOM before a subsequent `AfterRenderPhase.Write` callback, for example to perform
-   * custom layout that the browser doesn't natively support. **Never** use this phase
-   * for callbacks that can write to the DOM or when `AfterRenderPhase.Read` is adequate.
-   *
-   * <div class="alert is-important">
-   *
-   * Using this value can degrade performance.
-   * Instead, prefer using built-in browser functionality when possible.
-   *
-   * </div>
-   */
-  AfterRenderPhase[AfterRenderPhase["EarlyRead"] = 0] = "EarlyRead";
-  /**
-   * Use `AfterRenderPhase.Write` for callbacks that only **write** to the DOM. **Never**
-   * use this phase for callbacks that can read from the DOM.
-   */
-  AfterRenderPhase[AfterRenderPhase["Write"] = 1] = "Write";
-  /**
-   * Use `AfterRenderPhase.MixedReadWrite` for callbacks that read from or write to the
-   * DOM, that haven't been refactored to use a different phase. **Never** use this phase
-   * for callbacks that can use a different phase instead.
-   *
-   * <div class="alert is-critical">
-   *
-   * Using this value can **significantly** degrade performance.
-   * Instead, prefer refactoring into multiple callbacks using a more specific phase.
-   *
-   * </div>
-   */
-  AfterRenderPhase[AfterRenderPhase["MixedReadWrite"] = 2] = "MixedReadWrite";
-  /**
-   * Use `AfterRenderPhase.Read` for callbacks that only **read** from the DOM. **Never**
-   * use this phase for callbacks that can write to the DOM.
-   */
-  AfterRenderPhase[AfterRenderPhase["Read"] = 3] = "Read";
-  return AfterRenderPhase;
-}(AfterRenderPhase || {});
-/** `AfterRenderRef` that does nothing. */
-const NOOP_AFTER_RENDER_REF = {
-  destroy() {}
-};
+const viewChild = /*#__PURE__*/(() => {
+  // Note: This may be considered a side-effect, but nothing will depend on
+  // this assignment, unless this `viewChild` constant export is accessed. It's a
+  // self-contained side effect that is local to the user facing `viewChild` export.
+  viewChildFn.required = viewChildRequiredFn;
+  return viewChildFn;
+})();
 /**
- * Register a callback to run once before any userspace `afterRender` or
- * `afterNextRender` callbacks.
+ * Initializes a view children query.
  *
- * This function should almost always be used instead of `afterRender` or
- * `afterNextRender` for implementing framework functionality. Consider:
+ * Query results are represented as a signal of a read-only collection containing all matched
+ * elements.
  *
- *   1.) `AfterRenderPhase.EarlyRead` is intended to be used for implementing
- *       custom layout. If the framework itself mutates the DOM after *any*
- *       `AfterRenderPhase.EarlyRead` callbacks are run, the phase can no
- *       longer reliably serve its purpose.
+ * @usageNotes
+ * Create a children query in your component by declaring a
+ * class field and initializing it with the `viewChildren()` function.
  *
- *   2.) Importing `afterRender` in the framework can reduce the ability for it
- *       to be tree-shaken, and the framework shouldn't need much of the behavior.
+ * ```ts
+ * @Component({...})
+ * export class TestComponent {
+ *   divEls = viewChildren<ElementRef>('el');   // Signal<ReadonlyArray<ElementRef>>
+ * }
+ * ```
  */
-function internalAfterNextRender(callback, options) {
-  const injector = options?.injector ?? inject(Injector);
-  // Similarly to the public `afterNextRender` function, an internal one
-  // is only invoked in a browser as long as the runOnServer option is not set.
-  if (!options?.runOnServer && !isPlatformBrowser(injector)) return;
-  const afterRenderEventManager = injector.get(AfterRenderEventManager);
-  afterRenderEventManager.internalCallbacks.push(callback);
+function viewChildren(locator, opts) {
+  return createMultiResultQuerySignalFn();
+}
+function contentChildFn(locator, opts) {
+  return createSingleResultOptionalQuerySignalFn();
+}
+function contentChildRequiredFn(locator, opts) {
+  return createSingleResultRequiredQuerySignalFn();
 }
 /**
- * Register a callback to be invoked each time the application
- * finishes rendering.
- *
- * <div class="alert is-critical">
- *
- * You should always explicitly specify a non-default [phase](api/core/AfterRenderPhase), or you
- * risk significant performance degradation.
- *
- * </div>
- *
- * Note that the callback will run
- * - in the order it was registered
- * - once per render
- * - on browser platforms only
- *
- * <div class="alert is-important">
+ * Initializes a content child query. Consider using `contentChild.required` for queries that should
+ * always match.
  *
- * Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs.
- * You must use caution when directly reading or writing the DOM and layout.
+ * @usageNotes
+ * Create a child query in your component by declaring a
+ * class field and initializing it with the `contentChild()` function.
  *
- * </div>
+ * ```ts
+ * @Component({...})
+ * export class TestComponent {
+ *   headerEl = contentChild<ElementRef>('h');                    // Signal<ElementRef|undefined>
+ *   headerElElRequired = contentChild.required<ElementRef>('h'); // Signal<ElementRef>
+ *   header = contentChild(MyHeader);                             // Signal<MyHeader|undefined>
+ *   headerRequired = contentChild.required(MyHeader);            // Signal<MyHeader>
+ * }
+ * ```
+ */
+const contentChild = /*#__PURE__*/(() => {
+  // Note: This may be considered a side-effect, but nothing will depend on
+  // this assignment, unless this `viewChild` constant export is accessed. It's a
+  // self-contained side effect that is local to the user facing `viewChild` export.
+  contentChildFn.required = contentChildRequiredFn;
+  return contentChildFn;
+})();
+/**
+ * Initializes a content children query.
  *
- * @param callback A callback function to register
+ * Query results are represented as a signal of a read-only collection containing all matched
+ * elements.
  *
  * @usageNotes
+ * Create a children query in your component by declaring a
+ * class field and initializing it with the `contentChildren()` function.
  *
- * Use `afterRender` to read or write the DOM after each render.
- *
- * ### Example
  * ```ts
- * @Component({
- *   selector: 'my-cmp',
- *   template: `<span #content>{{ ... }}</span>`,
- * })
- * export class MyComponent {
- *   @ViewChild('content') contentRef: ElementRef;
- *
- *   constructor() {
- *     afterRender(() => {
- *       console.log('content height: ' + this.contentRef.nativeElement.scrollHeight);
- *     }, {phase: AfterRenderPhase.Read});
- *   }
+ * @Component({...})
+ * export class TestComponent {
+ *   headerEl = contentChildren<ElementRef>('h');   // Signal<ReadonlyArray<ElementRef>>
  * }
  * ```
+ */
+function contentChildren(locator, opts) {
+  return createMultiResultQuerySignalFn();
+}
+
+/**
+ * Creates a model signal.
  *
- * @developerPreview
+ * @param initialValue The initial value.
+ *   Can be set to {@link REQUIRED_UNSET_VALUE} for required model signals.
+ * @param options Additional options for the model.
  */
-function afterRender(callback, options) {
-  ngDevMode && assertNotInReactiveContext(afterRender, 'Call `afterRender` outside of a reactive context. For example, schedule the render ' + 'callback inside the component constructor`.');
-  !options && assertInInjectionContext(afterRender);
-  const injector = options?.injector ?? inject(Injector);
-  if (!isPlatformBrowser(injector)) {
-    return NOOP_AFTER_RENDER_REF;
+function createModelSignal(initialValue) {
+  const subscriptions = [];
+  const node = Object.create(INPUT_SIGNAL_NODE);
+  node.value = initialValue;
+  function getter() {
+    (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.producerAccessed)(node);
+    assertModelSet(node.value);
+    return node.value;
   }
-  performanceMarkFeature('NgAfterRender');
-  const afterRenderEventManager = injector.get(AfterRenderEventManager);
-  // Lazily initialize the handler implementation, if necessary. This is so that it can be
-  // tree-shaken if `afterRender` and `afterNextRender` aren't used.
-  const callbackHandler = afterRenderEventManager.handler ??= new AfterRenderCallbackHandlerImpl();
-  const phase = options?.phase ?? AfterRenderPhase.MixedReadWrite;
-  const destroy = () => {
-    callbackHandler.unregister(instance);
-    unregisterFn();
+  function notifySubscribers(value) {
+    for (let i = 0; i < subscriptions.length; i++) {
+      subscriptions[i](value);
+    }
+  }
+  getter[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL] = node;
+  getter.asReadonly = signalAsReadonlyFn.bind(getter);
+  getter.set = newValue => {
+    if (!node.equal(node.value, newValue)) {
+      (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.signalSetFn)(node, newValue);
+      notifySubscribers(newValue);
+    }
   };
-  const unregisterFn = injector.get(DestroyRef).onDestroy(destroy);
-  const instance = new AfterRenderCallback(injector, phase, callback);
-  callbackHandler.register(instance);
-  return {
-    destroy
+  getter.update = updateFn => {
+    assertModelSet(node.value);
+    getter.set(updateFn(node.value));
+  };
+  getter.subscribe = callback => {
+    subscriptions.push(callback);
+    return () => {
+      const index = subscriptions.indexOf(callback);
+      if (index > -1) {
+        subscriptions.splice(index, 1);
+      }
+    };
   };
+  if (ngDevMode) {
+    getter.toString = () => `[Model Signal: ${getter()}]`;
+  }
+  return getter;
+}
+/** Asserts that a model's value is set. */
+function assertModelSet(value) {
+  if (value === REQUIRED_UNSET_VALUE) {
+    throw new RuntimeError(-952 /* RuntimeErrorCode.REQUIRED_MODEL_NO_VALUE */, ngDevMode && 'Model is required but no value is available yet.');
+  }
+}
+function modelFunction(initialValue) {
+  return createModelSignal(initialValue);
+}
+function modelRequiredFunction() {
+  return createModelSignal(REQUIRED_UNSET_VALUE);
 }
 /**
- * Register a callback to be invoked the next time the application
- * finishes rendering.
- *
- * <div class="alert is-critical">
+ * `model` declares a writeable signal that is exposed as an input/output pair on the containing
+ * directive. The input name is taken either from the class member or from the `alias` option.
+ * The output name is generated by taking the input name and appending `Change`.
  *
- * You should always explicitly specify a non-default [phase](api/core/AfterRenderPhase), or you
- * risk significant performance degradation.
+ * Initializes a model with an initial value. If no explicit value
+ * is specified, Angular will use `undefined`.
  *
- * </div>
+ * Consider using `model.required` for models that don't need an
+ * initial value.
  *
- * Note that the callback will run
- * - in the order it was registered
- * - on browser platforms only
+ * @usageNotes
+ * Initialize a model in your directive or component by declaring a
+ * class field and initializing it with the `model()` or `model.required()`
+ * function.
  *
- * <div class="alert is-important">
+ * ```ts
+ * @Directive({..})
+ * export class MyDir {
+ *   firstName = model<string>();            // string|undefined
+ *   lastName = model.required<string>();    // string
+ *   age = model(0);                         // number
+ * }
+ * ```
  *
- * Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs.
- * You must use caution when directly reading or writing the DOM and layout.
+ * @developerPreview
+ */
+const model = /*#__PURE__*/(() => {
+  // Note: This may be considered a side-effect, but nothing will depend on
+  // this assignment, unless this `model` constant export is accessed. It's a
+  // self-contained side effect that is local to the user facing `model` export.
+  modelFunction.required = modelRequiredFunction;
+  return modelFunction;
+})();
+
+// Stores the default value of `emitDistinctChangesOnly` when the `emitDistinctChangesOnly` is not
+// explicitly set.
+const emitDistinctChangesOnlyDefaultValue = true;
+/**
+ * Base class for query metadata.
  *
- * </div>
+ * @see {@link ContentChildren}
+ * @see {@link ContentChild}
+ * @see {@link ViewChildren}
+ * @see {@link ViewChild}
  *
- * @param callback A callback function to register
+ * @publicApi
+ */
+class Query {}
+/**
+ * ContentChildren decorator and metadata.
  *
- * @usageNotes
  *
- * Use `afterNextRender` to read or write the DOM once,
- * for example to initialize a non-Angular library.
+ * @Annotation
+ * @publicApi
+ */
+const ContentChildren = /*#__PURE__*/makePropDecorator('ContentChildren', (selector, opts = {}) => ({
+  selector,
+  first: false,
+  isViewQuery: false,
+  descendants: false,
+  emitDistinctChangesOnly: emitDistinctChangesOnlyDefaultValue,
+  ...opts
+}), Query);
+/**
+ * ContentChild decorator and metadata.
  *
- * ### Example
- * ```ts
- * @Component({
- *   selector: 'my-chart-cmp',
- *   template: `<div #chart>{{ ... }}</div>`,
- * })
- * export class MyChartCmp {
- *   @ViewChild('chart') chartRef: ElementRef;
- *   chart: MyChart|null;
  *
- *   constructor() {
- *     afterNextRender(() => {
- *       this.chart = new MyChart(this.chartRef.nativeElement);
- *     }, {phase: AfterRenderPhase.Write});
- *   }
- * }
- * ```
+ * @Annotation
  *
- * @developerPreview
+ * @publicApi
  */
-function afterNextRender(callback, options) {
-  !options && assertInInjectionContext(afterNextRender);
-  const injector = options?.injector ?? inject(Injector);
-  if (!isPlatformBrowser(injector)) {
-    return NOOP_AFTER_RENDER_REF;
-  }
-  performanceMarkFeature('NgAfterNextRender');
-  const afterRenderEventManager = injector.get(AfterRenderEventManager);
-  // Lazily initialize the handler implementation, if necessary. This is so that it can be
-  // tree-shaken if `afterRender` and `afterNextRender` aren't used.
-  const callbackHandler = afterRenderEventManager.handler ??= new AfterRenderCallbackHandlerImpl();
-  const phase = options?.phase ?? AfterRenderPhase.MixedReadWrite;
-  const destroy = () => {
-    callbackHandler.unregister(instance);
-    unregisterFn();
-  };
-  const unregisterFn = injector.get(DestroyRef).onDestroy(destroy);
-  const instance = new AfterRenderCallback(injector, phase, () => {
-    destroy();
-    callback();
-  });
-  callbackHandler.register(instance);
-  return {
-    destroy
-  };
-}
+const ContentChild = /*#__PURE__*/makePropDecorator('ContentChild', (selector, opts = {}) => ({
+  selector,
+  first: true,
+  isViewQuery: false,
+  descendants: true,
+  ...opts
+}), Query);
 /**
- * A wrapper around a function to be used as an after render callback.
+ * ViewChildren decorator and metadata.
+ *
+ * @Annotation
+ * @publicApi
  */
-class AfterRenderCallback {
-  constructor(injector, phase, callbackFn) {
-    this.phase = phase;
-    this.callbackFn = callbackFn;
-    this.zone = injector.get(NgZone);
-    this.errorHandler = injector.get(ErrorHandler, null, {
-      optional: true
-    });
-  }
-  invoke() {
-    try {
-      this.zone.runOutsideAngular(this.callbackFn);
-    } catch (err) {
-      this.errorHandler?.handleError(err);
-    }
-  }
-}
+const ViewChildren = /*#__PURE__*/makePropDecorator('ViewChildren', (selector, opts = {}) => ({
+  selector,
+  first: false,
+  isViewQuery: true,
+  descendants: true,
+  emitDistinctChangesOnly: emitDistinctChangesOnlyDefaultValue,
+  ...opts
+}), Query);
 /**
- * Core functionality for `afterRender` and `afterNextRender`. Kept separate from
- * `AfterRenderEventManager` for tree-shaking.
+ * ViewChild decorator and metadata.
+ *
+ * @Annotation
+ * @publicApi
  */
-class AfterRenderCallbackHandlerImpl {
-  constructor() {
-    this.executingCallbacks = false;
-    this.buckets = {
-      // Note: the order of these keys controls the order the phases are run.
-      [AfterRenderPhase.EarlyRead]: new Set(),
-      [AfterRenderPhase.Write]: new Set(),
-      [AfterRenderPhase.MixedReadWrite]: new Set(),
-      [AfterRenderPhase.Read]: new Set()
-    };
-    this.deferredCallbacks = new Set();
-  }
-  register(callback) {
-    // If we're currently running callbacks, new callbacks should be deferred
-    // until the next render operation.
-    const target = this.executingCallbacks ? this.deferredCallbacks : this.buckets[callback.phase];
-    target.add(callback);
-  }
-  unregister(callback) {
-    this.buckets[callback.phase].delete(callback);
-    this.deferredCallbacks.delete(callback);
-  }
-  execute() {
-    this.executingCallbacks = true;
-    for (const bucket of Object.values(this.buckets)) {
-      for (const callback of bucket) {
-        callback.invoke();
-      }
-    }
-    this.executingCallbacks = false;
-    for (const callback of this.deferredCallbacks) {
-      this.buckets[callback.phase].add(callback);
-    }
-    this.deferredCallbacks.clear();
-  }
-  destroy() {
-    for (const bucket of Object.values(this.buckets)) {
-      bucket.clear();
-    }
-    this.deferredCallbacks.clear();
-  }
-}
+const ViewChild = /*#__PURE__*/makePropDecorator('ViewChild', (selector, opts) => ({
+  selector,
+  first: true,
+  isViewQuery: true,
+  descendants: true,
+  ...opts
+}), Query);
+
 /**
- * Implements core timing for `afterRender` and `afterNextRender` events.
- * Delegates to an optional `AfterRenderCallbackHandler` for implementation.
+ * Used to resolve resource URLs on `@Component` when used with JIT compilation.
+ *
+ * Example:
+ * ```
+ * @Component({
+ *   selector: 'my-comp',
+ *   templateUrl: 'my-comp.html', // This requires asynchronous resolution
+ * })
+ * class MyComponent{
+ * }
+ *
+ * // Calling `renderComponent` will fail because `renderComponent` is a synchronous process
+ * // and `MyComponent`'s `@Component.templateUrl` needs to be resolved asynchronously.
+ *
+ * // Calling `resolveComponentResources()` will resolve `@Component.templateUrl` into
+ * // `@Component.template`, which allows `renderComponent` to proceed in a synchronous manner.
+ *
+ * // Use browser's `fetch()` function as the default resource resolution strategy.
+ * resolveComponentResources(fetch).then(() => {
+ *   // After resolution all URLs have been converted into `template` strings.
+ *   renderComponent(MyComponent);
+ * });
+ *
+ * ```
+ *
+ * NOTE: In AOT the resolution happens during compilation, and so there should be no need
+ * to call this method outside JIT mode.
+ *
+ * @param resourceResolver a function which is responsible for returning a `Promise` to the
+ * contents of the resolved URL. Browser's `fetch()` method is a good default implementation.
  */
-let AfterRenderEventManager = /*#__PURE__*/(() => {
-  class AfterRenderEventManager {
-    constructor() {
-      /* @internal */
-      this.handler = null;
-      /* @internal */
-      this.internalCallbacks = [];
-    }
-    /**
-     * Executes internal and user-provided callbacks.
-     */
-    execute() {
-      this.executeInternalCallbacks();
-      this.handler?.execute();
+function resolveComponentResources(resourceResolver) {
+  // Store all promises which are fetching the resources.
+  const componentResolved = [];
+  // Cache so that we don't fetch the same resource more than once.
+  const urlMap = new Map();
+  function cachedResourceResolve(url) {
+    let promise = urlMap.get(url);
+    if (!promise) {
+      const resp = resourceResolver(url);
+      urlMap.set(url, promise = resp.then(unwrapResponse));
     }
-    executeInternalCallbacks() {
-      // Note: internal callbacks power `internalAfterNextRender`. Since internal callbacks
-      // are fairly trivial, they are kept separate so that `AfterRenderCallbackHandlerImpl`
-      // can still be tree-shaken unless used by the application.
-      const callbacks = [...this.internalCallbacks];
-      this.internalCallbacks.length = 0;
-      for (const callback of callbacks) {
-        callback();
-      }
+    return promise;
+  }
+  componentResourceResolutionQueue.forEach((component, type) => {
+    const promises = [];
+    if (component.templateUrl) {
+      promises.push(cachedResourceResolve(component.templateUrl).then(template => {
+        component.template = template;
+      }));
     }
-    ngOnDestroy() {
-      this.handler?.destroy();
-      this.handler = null;
-      this.internalCallbacks.length = 0;
+    const styles = typeof component.styles === 'string' ? [component.styles] : component.styles || [];
+    component.styles = styles;
+    if (component.styleUrl && component.styleUrls?.length) {
+      throw new Error('@Component cannot define both `styleUrl` and `styleUrls`. ' + 'Use `styleUrl` if the component has one stylesheet, or `styleUrls` if it has multiple');
+    } else if (component.styleUrls?.length) {
+      const styleOffset = component.styles.length;
+      const styleUrls = component.styleUrls;
+      component.styleUrls.forEach((styleUrl, index) => {
+        styles.push(''); // pre-allocate array.
+        promises.push(cachedResourceResolve(styleUrl).then(style => {
+          styles[styleOffset + index] = style;
+          styleUrls.splice(styleUrls.indexOf(styleUrl), 1);
+          if (styleUrls.length == 0) {
+            component.styleUrls = undefined;
+          }
+        }));
+      });
+    } else if (component.styleUrl) {
+      promises.push(cachedResourceResolve(component.styleUrl).then(style => {
+        styles.push(style);
+        component.styleUrl = undefined;
+      }));
     }
-    /** @nocollapse */
-    static #_ = this.ɵprov = ɵɵdefineInjectable({
-      token: AfterRenderEventManager,
-      providedIn: 'root',
-      factory: () => new AfterRenderEventManager()
-    });
+    const fullyResolved = Promise.all(promises).then(() => componentDefResolved(type));
+    componentResolved.push(fullyResolved);
+  });
+  clearResolutionOfComponentResourcesQueue();
+  return Promise.all(componentResolved).then(() => undefined);
+}
+let componentResourceResolutionQueue = /*#__PURE__*/new Map();
+// Track when existing ɵcmp for a Type is waiting on resources.
+const componentDefPendingResolution = /*#__PURE__*/new Set();
+function maybeQueueResolutionOfComponentResources(type, metadata) {
+  if (componentNeedsResolution(metadata)) {
+    componentResourceResolutionQueue.set(type, metadata);
+    componentDefPendingResolution.add(type);
   }
-  return AfterRenderEventManager;
-})();
-function isModuleWithProviders(value) {
-  return value.ngModule !== undefined;
 }
-function isNgModule(value) {
-  return !!getNgModuleDef(value);
+function isComponentDefPendingResolution(type) {
+  return componentDefPendingResolution.has(type);
 }
-function isPipe(value) {
-  return !!getPipeDef$1(value);
+function componentNeedsResolution(component) {
+  return !!(component.templateUrl && !component.hasOwnProperty('template') || component.styleUrls && component.styleUrls.length || component.styleUrl);
 }
-function isDirective(value) {
-  return !!getDirectiveDef(value);
+function clearResolutionOfComponentResourcesQueue() {
+  const old = componentResourceResolutionQueue;
+  componentResourceResolutionQueue = new Map();
+  return old;
 }
-function isComponent(value) {
-  return !!getComponentDef(value);
+function restoreComponentResolutionQueue(queue) {
+  componentDefPendingResolution.clear();
+  queue.forEach((_, type) => componentDefPendingResolution.add(type));
+  componentResourceResolutionQueue = queue;
 }
-function getDependencyTypeForError(type) {
-  if (getComponentDef(type)) return 'component';
-  if (getDirectiveDef(type)) return 'directive';
-  if (getPipeDef$1(type)) return 'pipe';
-  return 'type';
+function isComponentResourceResolutionQueueEmpty() {
+  return componentResourceResolutionQueue.size === 0;
 }
-function verifyStandaloneImport(depType, importingType) {
-  if (isForwardRef(depType)) {
-    depType = resolveForwardRef(depType);
-    if (!depType) {
-      throw new Error(`Expected forwardRef function, imported from "${stringifyForError(importingType)}", to return a standalone entity or NgModule but got "${stringifyForError(depType) || depType}".`);
-    }
-  }
-  if (getNgModuleDef(depType) == null) {
-    const def = getComponentDef(depType) || getDirectiveDef(depType) || getPipeDef$1(depType);
-    if (def != null) {
-      // if a component, directive or pipe is imported make sure that it is standalone
-      if (!def.standalone) {
-        throw new Error(`The "${stringifyForError(depType)}" ${getDependencyTypeForError(depType)}, imported from "${stringifyForError(importingType)}", is not standalone. Did you forget to add the standalone: true flag?`);
-      }
-    } else {
-      // it can be either a module with provider or an unknown (not annotated) type
-      if (isModuleWithProviders(depType)) {
-        throw new Error(`A module with providers was imported from "${stringifyForError(importingType)}". Modules with providers are not supported in standalone components imports.`);
-      } else {
-        throw new Error(`The "${stringifyForError(depType)}" type, imported from "${stringifyForError(importingType)}", must be a standalone component / directive / pipe or an NgModule. Did you forget to add the required @Component / @Directive / @Pipe or @NgModule annotation?`);
-      }
-    }
-  }
+function unwrapResponse(response) {
+  return typeof response == 'string' ? response : response.text();
+}
+function componentDefResolved(type) {
+  componentDefPendingResolution.delete(type);
 }
 
 /**
- * Indicates whether to use the runtime dependency tracker for scope calculation in JIT compilation.
- * The value "false" means the old code path based on patching scope info into the types will be
- * used.
- *
- * @deprecated For migration purposes only, to be removed soon.
+ * Map of module-id to the corresponding NgModule.
  */
-const USE_RUNTIME_DEPS_TRACKER_FOR_JIT = true;
+const modules = /*#__PURE__*/new Map();
 /**
- * An implementation of DepsTrackerApi which will be used for JIT and local compilation.
+ * Whether to check for duplicate NgModule registrations.
+ *
+ * This can be disabled for testing.
  */
-class DepsTracker {
-  constructor() {
-    this.ownerNgModule = new Map();
-    this.ngModulesWithSomeUnresolvedDecls = new Set();
-    this.ngModulesScopeCache = new Map();
-    this.standaloneComponentsScopeCache = new Map();
-  }
-  /**
-   * Attempts to resolve ng module's forward ref declarations as much as possible and add them to
-   * the `ownerNgModule` map. This method normally should be called after the initial parsing when
-   * all the forward refs are resolved (e.g., when trying to render a component)
-   */
-  resolveNgModulesDecls() {
-    if (this.ngModulesWithSomeUnresolvedDecls.size === 0) {
-      return;
-    }
-    for (const moduleType of this.ngModulesWithSomeUnresolvedDecls) {
-      const def = getNgModuleDef(moduleType);
-      if (def?.declarations) {
-        for (const decl of maybeUnwrapFn(def.declarations)) {
-          if (isComponent(decl)) {
-            this.ownerNgModule.set(decl, moduleType);
-          }
-        }
-      }
-    }
-    this.ngModulesWithSomeUnresolvedDecls.clear();
-  }
-  /** @override */
-  getComponentDependencies(type, rawImports) {
-    this.resolveNgModulesDecls();
-    const def = getComponentDef(type);
-    if (def === null) {
-      throw new Error(`Attempting to get component dependencies for a type that is not a component: ${type}`);
-    }
-    if (def.standalone) {
-      const scope = this.getStandaloneComponentScope(type, rawImports);
-      if (scope.compilation.isPoisoned) {
-        return {
-          dependencies: []
-        };
-      }
-      return {
-        dependencies: [...scope.compilation.directives, ...scope.compilation.pipes, ...scope.compilation.ngModules]
-      };
-    } else {
-      if (!this.ownerNgModule.has(type)) {
-        // This component is orphan! No need to handle the error since the component rendering
-        // pipeline (e.g., view_container_ref) will check for this error based on configs.
-        return {
-          dependencies: []
-        };
-      }
-      const scope = this.getNgModuleScope(this.ownerNgModule.get(type));
-      if (scope.compilation.isPoisoned) {
-        return {
-          dependencies: []
-        };
-      }
-      return {
-        dependencies: [...scope.compilation.directives, ...scope.compilation.pipes]
-      };
-    }
-  }
-  /**
-   * @override
-   * This implementation does not make use of param scopeInfo since it assumes the scope info is
-   * already added to the type itself through methods like {@link ɵɵsetNgModuleScope}
-   */
-  registerNgModule(type, scopeInfo) {
-    if (!isNgModule(type)) {
-      throw new Error(`Attempting to register a Type which is not NgModule as NgModule: ${type}`);
-    }
-    // Lazily process the NgModules later when needed.
-    this.ngModulesWithSomeUnresolvedDecls.add(type);
-  }
-  /** @override */
-  clearScopeCacheFor(type) {
-    this.ngModulesScopeCache.delete(type);
-    this.standaloneComponentsScopeCache.delete(type);
-  }
-  /** @override */
-  getNgModuleScope(type) {
-    if (this.ngModulesScopeCache.has(type)) {
-      return this.ngModulesScopeCache.get(type);
-    }
-    const scope = this.computeNgModuleScope(type);
-    this.ngModulesScopeCache.set(type, scope);
-    return scope;
-  }
-  /** Compute NgModule scope afresh. */
-  computeNgModuleScope(type) {
-    const def = getNgModuleDef(type, true);
-    const scope = {
-      exported: {
-        directives: new Set(),
-        pipes: new Set()
-      },
-      compilation: {
-        directives: new Set(),
-        pipes: new Set()
-      }
-    };
-    // Analyzing imports
-    for (const imported of maybeUnwrapFn(def.imports)) {
-      if (isNgModule(imported)) {
-        const importedScope = this.getNgModuleScope(imported);
-        // When this module imports another, the imported module's exported directives and pipes
-        // are added to the compilation scope of this module.
-        addSet(importedScope.exported.directives, scope.compilation.directives);
-        addSet(importedScope.exported.pipes, scope.compilation.pipes);
-      } else if (isStandalone(imported)) {
-        if (isDirective(imported) || isComponent(imported)) {
-          scope.compilation.directives.add(imported);
-        } else if (isPipe(imported)) {
-          scope.compilation.pipes.add(imported);
-        } else {
-          // The standalone thing is neither a component nor a directive nor a pipe ... (what?)
-          throw new RuntimeError(1000 /* RuntimeErrorCode.RUNTIME_DEPS_INVALID_IMPORTED_TYPE */, 'The standalone imported type is neither a component nor a directive nor a pipe');
-        }
-      } else {
-        // The import is neither a module nor a module-with-providers nor a standalone thing. This
-        // is going to be an error. So we short circuit.
-        scope.compilation.isPoisoned = true;
-        break;
-      }
-    }
-    // Analyzing declarations
-    if (!scope.compilation.isPoisoned) {
-      for (const decl of maybeUnwrapFn(def.declarations)) {
-        // Cannot declare another NgModule or a standalone thing
-        if (isNgModule(decl) || isStandalone(decl)) {
-          scope.compilation.isPoisoned = true;
-          break;
-        }
-        if (isPipe(decl)) {
-          scope.compilation.pipes.add(decl);
-        } else {
-          // decl is either a directive or a component. The component may not yet have the ɵcmp due
-          // to async compilation.
-          scope.compilation.directives.add(decl);
-        }
-      }
-    }
-    // Analyzing exports
-    for (const exported of maybeUnwrapFn(def.exports)) {
-      if (isNgModule(exported)) {
-        // When this module exports another, the exported module's exported directives and pipes
-        // are added to both the compilation and exported scopes of this module.
-        const exportedScope = this.getNgModuleScope(exported);
-        // Based on the current logic there is no way to have poisoned exported scope. So no need to
-        // check for it.
-        addSet(exportedScope.exported.directives, scope.exported.directives);
-        addSet(exportedScope.exported.pipes, scope.exported.pipes);
-        // Some test toolings which run in JIT mode depend on this behavior that the exported scope
-        // should also be present in the compilation scope, even though AoT does not support this
-        // and it is also in odds with NgModule metadata definitions. Without this some tests in
-        // Google will fail.
-        addSet(exportedScope.exported.directives, scope.compilation.directives);
-        addSet(exportedScope.exported.pipes, scope.compilation.pipes);
-      } else if (isPipe(exported)) {
-        scope.exported.pipes.add(exported);
-      } else {
-        scope.exported.directives.add(exported);
-      }
-    }
-    return scope;
-  }
-  /** @override */
-  getStandaloneComponentScope(type, rawImports) {
-    if (this.standaloneComponentsScopeCache.has(type)) {
-      return this.standaloneComponentsScopeCache.get(type);
-    }
-    const ans = this.computeStandaloneComponentScope(type, rawImports);
-    this.standaloneComponentsScopeCache.set(type, ans);
-    return ans;
-  }
-  computeStandaloneComponentScope(type, rawImports) {
-    const ans = {
-      compilation: {
-        // Standalone components are always able to self-reference.
-        directives: new Set([type]),
-        pipes: new Set(),
-        ngModules: new Set()
-      }
-    };
-    for (const rawImport of flatten(rawImports ?? [])) {
-      const imported = resolveForwardRef(rawImport);
-      try {
-        verifyStandaloneImport(imported, type);
-      } catch (e) {
-        // Short-circuit if an import is not valid
-        ans.compilation.isPoisoned = true;
-        return ans;
-      }
-      if (isNgModule(imported)) {
-        ans.compilation.ngModules.add(imported);
-        const importedScope = this.getNgModuleScope(imported);
-        // Short-circuit if an imported NgModule has corrupted exported scope.
-        if (importedScope.exported.isPoisoned) {
-          ans.compilation.isPoisoned = true;
-          return ans;
-        }
-        addSet(importedScope.exported.directives, ans.compilation.directives);
-        addSet(importedScope.exported.pipes, ans.compilation.pipes);
-      } else if (isPipe(imported)) {
-        ans.compilation.pipes.add(imported);
-      } else if (isDirective(imported) || isComponent(imported)) {
-        ans.compilation.directives.add(imported);
-      } else {
-        // The imported thing is not module/pipe/directive/component, so we error and short-circuit
-        // here
-        ans.compilation.isPoisoned = true;
-        return ans;
-      }
-    }
-    return ans;
-  }
-  /** @override */
-  isOrphanComponent(cmp) {
-    const def = getComponentDef(cmp);
-    if (!def || def.standalone) {
-      return false;
-    }
-    this.resolveNgModulesDecls();
-    return !this.ownerNgModule.has(cmp);
+let checkForDuplicateNgModules = true;
+function assertSameOrNotExisting(id, type, incoming) {
+  if (type && type !== incoming && checkForDuplicateNgModules) {
+    throw new Error(`Duplicate module registered for ${id} - ${stringify(type)} vs ${stringify(type.name)}`);
   }
 }
-function addSet(sourceSet, targetSet) {
-  for (const m of sourceSet) {
-    targetSet.add(m);
-  }
+/**
+ * Adds the given NgModule type to Angular's NgModule registry.
+ *
+ * This is generated as a side-effect of NgModule compilation. Note that the `id` is passed in
+ * explicitly and not read from the NgModule definition. This is for two reasons: it avoids a
+ * megamorphic read, and in JIT there's a chicken-and-egg problem where the NgModule may not be
+ * fully resolved when it's registered.
+ *
+ * @codeGenApi
+ */
+function registerNgModuleType(ngModuleType, id) {
+  const existing = modules.get(id) || null;
+  assertSameOrNotExisting(id, existing, ngModuleType);
+  modules.set(id, ngModuleType);
+}
+function clearModulesForTest() {
+  modules.clear();
+}
+function getRegisteredNgModuleType(id) {
+  return modules.get(id);
+}
+/**
+ * Control whether the NgModule registration system enforces that each NgModule type registered has
+ * a unique id.
+ *
+ * This is useful for testing as the NgModule registry cannot be properly reset between tests with
+ * Angular's current API.
+ */
+function setAllowDuplicateNgModuleIdsForTest(allowDuplicates) {
+  checkForDuplicateNgModules = !allowDuplicates;
 }
-/** The deps tracker to be used in the current Angular app in dev mode. */
-const depsTracker = /*#__PURE__*/new DepsTracker();
-const TEST_ONLY = {
-  DepsTracker
-};
 
 /**
- * Compute the static styling (class/style) from `TAttributes`.
+ * Validation function invoked at runtime for each binding that might potentially
+ * represent a security-sensitive attribute of an <iframe>.
+ * See `IFRAME_SECURITY_SENSITIVE_ATTRS` in the
+ * `packages/compiler/src/schema/dom_security_schema.ts` script for the full list
+ * of such attributes.
  *
- * This function should be called during `firstCreatePass` only.
+ * @codeGenApi
+ */
+function ɵɵvalidateIframeAttribute(attrValue, tagName, attrName) {
+  const lView = getLView();
+  const tNode = getSelectedTNode();
+  const element = getNativeByTNode(tNode, lView);
+  // Restrict any dynamic bindings of security-sensitive attributes/properties
+  // on an <iframe> for security reasons.
+  if (tNode.type === 2 /* TNodeType.Element */ && tagName.toLowerCase() === 'iframe') {
+    const iframe = element;
+    // Unset previously applied `src` and `srcdoc` if we come across a situation when
+    // a security-sensitive attribute is set later via an attribute/property binding.
+    iframe.src = '';
+    iframe.srcdoc = trustedHTMLFromString('');
+    // Also remove the <iframe> from the document.
+    nativeRemoveNode(lView[RENDERER], iframe);
+    const errorMessage = ngDevMode && `Angular has detected that the \`${attrName}\` was applied ` + `as a binding to an <iframe>${getTemplateLocationDetails(lView)}. ` + `For security reasons, the \`${attrName}\` can be set on an <iframe> ` + `as a static attribute only. \n` + `To fix this, switch the \`${attrName}\` binding to a static attribute ` + `in a template or in host bindings section.`;
+    throw new RuntimeError(-910 /* RuntimeErrorCode.UNSAFE_IFRAME_ATTRS */, errorMessage);
+  }
+  return attrValue;
+}
+function getSuperType(type) {
+  return Object.getPrototypeOf(type.prototype).constructor;
+}
+/**
+ * Merges the definition from a super class to a sub class.
+ * @param definition The definition that is a SubClass of another directive of component
  *
- * @param tNode The `TNode` into which the styling information should be loaded.
- * @param attrs `TAttributes` containing the styling information.
- * @param writeToHost Where should the resulting static styles be written?
- *   - `false` Write to `TNode.stylesWithoutHost` / `TNode.classesWithoutHost`
- *   - `true` Write to `TNode.styles` / `TNode.classes`
+ * @codeGenApi
  */
-function computeStaticStyling(tNode, attrs, writeToHost) {
-  ngDevMode && assertFirstCreatePass(getTView(), 'Expecting to be called in first template pass only');
-  let styles = writeToHost ? tNode.styles : null;
-  let classes = writeToHost ? tNode.classes : null;
-  let mode = 0;
-  if (attrs !== null) {
-    for (let i = 0; i < attrs.length; i++) {
-      const value = attrs[i];
-      if (typeof value === 'number') {
-        mode = value;
-      } else if (mode == 1 /* AttributeMarker.Classes */) {
-        classes = concatStringsWithSpace(classes, value);
-      } else if (mode == 2 /* AttributeMarker.Styles */) {
-        const style = value;
-        const styleValue = attrs[++i];
-        styles = concatStringsWithSpace(styles, style + ': ' + styleValue + ';');
+function ɵɵInheritDefinitionFeature(definition) {
+  let superType = getSuperType(definition.type);
+  let shouldInheritFields = true;
+  const inheritanceChain = [definition];
+  while (superType) {
+    let superDef = undefined;
+    if (isComponentDef(definition)) {
+      // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
+      superDef = superType.ɵcmp || superType.ɵdir;
+    } else {
+      if (superType.ɵcmp) {
+        throw new RuntimeError(903 /* RuntimeErrorCode.INVALID_INHERITANCE */, ngDevMode && `Directives cannot inherit Components. Directive ${stringifyForError(definition.type)} is attempting to extend component ${stringifyForError(superType)}`);
       }
+      // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
+      superDef = superType.ɵdir;
     }
+    if (superDef) {
+      if (shouldInheritFields) {
+        inheritanceChain.push(superDef);
+        // Some fields in the definition may be empty, if there were no values to put in them that
+        // would've justified object creation. Unwrap them if necessary.
+        const writeableDef = definition;
+        writeableDef.inputs = maybeUnwrapEmpty(definition.inputs);
+        writeableDef.inputTransforms = maybeUnwrapEmpty(definition.inputTransforms);
+        writeableDef.declaredInputs = maybeUnwrapEmpty(definition.declaredInputs);
+        writeableDef.outputs = maybeUnwrapEmpty(definition.outputs);
+        // Merge hostBindings
+        const superHostBindings = superDef.hostBindings;
+        superHostBindings && inheritHostBindings(definition, superHostBindings);
+        // Merge queries
+        const superViewQuery = superDef.viewQuery;
+        const superContentQueries = superDef.contentQueries;
+        superViewQuery && inheritViewQuery(definition, superViewQuery);
+        superContentQueries && inheritContentQueries(definition, superContentQueries);
+        // Merge inputs and outputs
+        mergeInputsWithTransforms(definition, superDef);
+        fillProperties(definition.outputs, superDef.outputs);
+        // Merge animations metadata.
+        // If `superDef` is a Component, the `data` field is present (defaults to an empty object).
+        if (isComponentDef(superDef) && superDef.data.animation) {
+          // If super def is a Component, the `definition` is also a Component, since Directives can
+          // not inherit Components (we throw an error above and cannot reach this code).
+          const defData = definition.data;
+          defData.animation = (defData.animation || []).concat(superDef.data.animation);
+        }
+      }
+      // Run parent features
+      const features = superDef.features;
+      if (features) {
+        for (let i = 0; i < features.length; i++) {
+          const feature = features[i];
+          if (feature && feature.ngInherit) {
+            feature(definition);
+          }
+          // If `InheritDefinitionFeature` is a part of the current `superDef`, it means that this
+          // def already has all the necessary information inherited from its super class(es), so we
+          // can stop merging fields from super classes. However we need to iterate through the
+          // prototype chain to look for classes that might contain other "features" (like
+          // NgOnChanges), which we should invoke for the original `definition`. We set the
+          // `shouldInheritFields` flag to indicate that, essentially skipping fields inheritance
+          // logic and only invoking functions from the "features" list.
+          if (feature === ɵɵInheritDefinitionFeature) {
+            shouldInheritFields = false;
+          }
+        }
+      }
+    }
+    superType = Object.getPrototypeOf(superType);
   }
-  writeToHost ? tNode.styles = styles : tNode.stylesWithoutHost = styles;
-  writeToHost ? tNode.classes = classes : tNode.classesWithoutHost = classes;
-}
-class ComponentFactoryResolver extends ComponentFactoryResolver$1 {
-  /**
-   * @param ngModule The NgModuleRef to which all resolved factories are bound.
-   */
-  constructor(ngModule) {
-    super();
-    this.ngModule = ngModule;
-  }
-  resolveComponentFactory(component) {
-    ngDevMode && assertComponentType(component);
-    const componentDef = getComponentDef(component);
-    return new ComponentFactory(componentDef, this.ngModule);
-  }
+  mergeHostAttrsAcrossInheritance(inheritanceChain);
 }
-function toRefArray(map) {
-  const array = [];
-  for (const publicName in map) {
-    if (!map.hasOwnProperty(publicName)) {
+function mergeInputsWithTransforms(target, source) {
+  for (const key in source.inputs) {
+    if (!source.inputs.hasOwnProperty(key)) {
       continue;
     }
-    const value = map[publicName];
+    if (target.inputs.hasOwnProperty(key)) {
+      continue;
+    }
+    const value = source.inputs[key];
     if (value === undefined) {
       continue;
     }
-    array.push({
-      propName: Array.isArray(value) ? value[0] : value,
-      templateName: publicName
-    });
+    target.inputs[key] = value;
+    target.declaredInputs[key] = source.declaredInputs[key];
+    // If the input is inherited, and we have a transform for it, we also inherit it.
+    // Note that transforms should not be inherited if the input has its own metadata
+    // in the `source` directive itself already (i.e. the input is re-declared/overridden).
+    if (source.inputTransforms !== null) {
+      // Note: transforms are stored with their minified names.
+      // Perf: only access the minified name when there are source transforms.
+      const minifiedName = Array.isArray(value) ? value[0] : value;
+      if (!source.inputTransforms.hasOwnProperty(minifiedName)) {
+        continue;
+      }
+      target.inputTransforms ??= {};
+      target.inputTransforms[minifiedName] = source.inputTransforms[minifiedName];
+    }
   }
-  return array;
-}
-function getNamespace(elementName) {
-  const name = elementName.toLowerCase();
-  return name === 'svg' ? SVG_NAMESPACE : name === 'math' ? MATH_ML_NAMESPACE : null;
 }
 /**
- * Injector that looks up a value using a specific injector, before falling back to the module
- * injector. Used primarily when creating components or embedded views dynamically.
+ * Merge the `hostAttrs` and `hostVars` from the inherited parent to the base class.
+ *
+ * @param inheritanceChain A list of `WritableDefs` starting at the top most type and listing
+ * sub-types in order. For each type take the `hostAttrs` and `hostVars` and merge it with the child
+ * type.
  */
-class ChainedInjector {
-  constructor(injector, parentInjector) {
-    this.injector = injector;
-    this.parentInjector = parentInjector;
-  }
-  get(token, notFoundValue, flags) {
-    flags = convertToBitFlags(flags);
-    const value = this.injector.get(token, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, flags);
-    if (value !== NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR || notFoundValue === NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR) {
-      // Return the value from the root element injector when
-      // - it provides it
-      //   (value !== NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR)
-      // - the module injector should not be checked
-      //   (notFoundValue === NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR)
-      return value;
-    }
-    return this.parentInjector.get(token, notFoundValue, flags);
+function mergeHostAttrsAcrossInheritance(inheritanceChain) {
+  let hostVars = 0;
+  let hostAttrs = null;
+  // We process the inheritance order from the base to the leaves here.
+  for (let i = inheritanceChain.length - 1; i >= 0; i--) {
+    const def = inheritanceChain[i];
+    // For each `hostVars`, we need to add the superclass amount.
+    def.hostVars = hostVars += def.hostVars;
+    // for each `hostAttrs` we need to merge it with superclass.
+    def.hostAttrs = mergeHostAttrs(def.hostAttrs, hostAttrs = mergeHostAttrs(hostAttrs, def.hostAttrs));
   }
 }
-/**
- * ComponentFactory interface implementation.
- */
-class ComponentFactory extends ComponentFactory$1 {
-  get inputs() {
-    const componentDef = this.componentDef;
-    const inputTransforms = componentDef.inputTransforms;
-    const refArray = toRefArray(componentDef.inputs);
-    if (inputTransforms !== null) {
-      for (const input of refArray) {
-        if (inputTransforms.hasOwnProperty(input.propName)) {
-          input.transform = inputTransforms[input.propName];
-        }
-      }
-    }
-    return refArray;
+function maybeUnwrapEmpty(value) {
+  if (value === EMPTY_OBJ) {
+    return {};
+  } else if (value === EMPTY_ARRAY) {
+    return [];
+  } else {
+    return value;
   }
-  get outputs() {
-    return toRefArray(this.componentDef.outputs);
+}
+function inheritViewQuery(definition, superViewQuery) {
+  const prevViewQuery = definition.viewQuery;
+  if (prevViewQuery) {
+    definition.viewQuery = (rf, ctx) => {
+      superViewQuery(rf, ctx);
+      prevViewQuery(rf, ctx);
+    };
+  } else {
+    definition.viewQuery = superViewQuery;
   }
-  /**
-   * @param componentDef The component definition.
-   * @param ngModule The NgModuleRef to which the factory is bound.
-   */
-  constructor(componentDef, ngModule) {
-    super();
-    this.componentDef = componentDef;
-    this.ngModule = ngModule;
-    this.componentType = componentDef.type;
-    this.selector = stringifyCSSSelectorList(componentDef.selectors);
-    this.ngContentSelectors = componentDef.ngContentSelectors ? componentDef.ngContentSelectors : [];
-    this.isBoundToModule = !!ngModule;
+}
+function inheritContentQueries(definition, superContentQueries) {
+  const prevContentQueries = definition.contentQueries;
+  if (prevContentQueries) {
+    definition.contentQueries = (rf, ctx, directiveIndex) => {
+      superContentQueries(rf, ctx, directiveIndex);
+      prevContentQueries(rf, ctx, directiveIndex);
+    };
+  } else {
+    definition.contentQueries = superContentQueries;
   }
-  create(injector, projectableNodes, rootSelectorOrNode, environmentInjector) {
-    // Check if the component is orphan
-    if (ngDevMode && (typeof ngJitMode === 'undefined' || ngJitMode) && this.componentDef.debugInfo?.forbidOrphanRendering) {
-      if (depsTracker.isOrphanComponent(this.componentType)) {
-        throw new RuntimeError(1001 /* RuntimeErrorCode.RUNTIME_DEPS_ORPHAN_COMPONENT */, `Orphan component found! Trying to render the component ${debugStringifyTypeForError(this.componentType)} without first loading the NgModule that declares it. It is recommended to make this component standalone in order to avoid this error. If this is not possible now, import the component's NgModule in the appropriate NgModule, or the standalone component in which you are trying to render this component. If this is a lazy import, load the NgModule lazily as well and use its module injector.`);
-      }
-    }
-    environmentInjector = environmentInjector || this.ngModule;
-    let realEnvironmentInjector = environmentInjector instanceof EnvironmentInjector ? environmentInjector : environmentInjector?.injector;
-    if (realEnvironmentInjector && this.componentDef.getStandaloneInjector !== null) {
-      realEnvironmentInjector = this.componentDef.getStandaloneInjector(realEnvironmentInjector) || realEnvironmentInjector;
-    }
-    const rootViewInjector = realEnvironmentInjector ? new ChainedInjector(injector, realEnvironmentInjector) : injector;
-    const rendererFactory = rootViewInjector.get(RendererFactory2, null);
-    if (rendererFactory === null) {
-      throw new RuntimeError(407 /* RuntimeErrorCode.RENDERER_NOT_FOUND */, ngDevMode && 'Angular was not able to inject a renderer (RendererFactory2). ' + 'Likely this is due to a broken DI hierarchy. ' + 'Make sure that any injector used to create this component has a correct parent.');
-    }
-    const sanitizer = rootViewInjector.get(Sanitizer, null);
-    const afterRenderEventManager = rootViewInjector.get(AfterRenderEventManager, null);
-    const changeDetectionScheduler = rootViewInjector.get(ChangeDetectionScheduler, null);
-    const environment = {
-      rendererFactory,
-      sanitizer,
-      // We don't use inline effects (yet).
-      inlineEffectRunner: null,
-      afterRenderEventManager,
-      changeDetectionScheduler
+}
+function inheritHostBindings(definition, superHostBindings) {
+  const prevHostBindings = definition.hostBindings;
+  if (prevHostBindings) {
+    definition.hostBindings = (rf, ctx) => {
+      superHostBindings(rf, ctx);
+      prevHostBindings(rf, ctx);
     };
-    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.
-    const elementName = this.componentDef.selectors[0][0] || 'div';
-    const hostRNode = rootSelectorOrNode ? locateHostElement(hostRenderer, rootSelectorOrNode, this.componentDef.encapsulation, rootViewInjector) : createElementNode(hostRenderer, elementName, getNamespace(elementName));
-    let rootFlags = 512 /* LViewFlags.IsRoot */;
-    if (this.componentDef.signals) {
-      rootFlags |= 4096 /* LViewFlags.SignalView */;
-    } else if (!this.componentDef.onPush) {
-      rootFlags |= 16 /* LViewFlags.CheckAlways */;
-    }
-    let hydrationInfo = null;
-    if (hostRNode !== null) {
-      hydrationInfo = retrieveHydrationInfo(hostRNode, rootViewInjector, true /* isRootView */);
-    }
-    // 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, environment, hostRenderer, rootViewInjector, null, hydrationInfo);
-    // 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
-    // `createRootComponentView` and `createRootComponent` both read global state. Fixing those
-    // issues would allow us to drop this.
-    enterView(rootLView);
-    let component;
-    let tElementNode;
-    try {
-      const rootComponentDef = this.componentDef;
-      let rootDirectives;
-      let hostDirectiveDefs = null;
-      if (rootComponentDef.findHostDirectiveDefs) {
-        rootDirectives = [];
-        hostDirectiveDefs = new Map();
-        rootComponentDef.findHostDirectiveDefs(rootComponentDef, rootDirectives, hostDirectiveDefs);
-        rootDirectives.push(rootComponentDef);
-        ngDevMode && assertNoDuplicateDirectives(rootDirectives);
-      } else {
-        rootDirectives = [rootComponentDef];
-      }
-      const hostTNode = createRootComponentTNode(rootLView, hostRNode);
-      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
-      // that this check can be removed.
-      if (hostRNode) {
-        setRootNodeAttributes(hostRenderer, rootComponentDef, hostRNode, rootSelectorOrNode);
-      }
-      if (projectableNodes !== undefined) {
-        projectNodes(tElementNode, this.ngContentSelectors, projectableNodes);
-      }
-      // TODO: should LifecycleHooksFeature and other host features be generated by the compiler and
-      // executed here?
-      // Angular 5 reference: https://stackblitz.com/edit/lifecycle-hooks-vcref
-      component = createRootComponent(componentView, rootComponentDef, rootDirectives, hostDirectiveDefs, rootLView, [LifecycleHooksFeature]);
-      renderView(rootTView, rootLView, null);
-    } finally {
-      leaveView();
-    }
-    return new ComponentRef(this.componentType, component, createElementRef(tElementNode, rootLView), rootLView, tElementNode);
+  } else {
+    definition.hostBindings = superHostBindings;
   }
 }
+
 /**
- * Represents an instance of a Component created via a {@link ComponentFactory}.
- *
- * `ComponentRef` provides access to the Component Instance as well other objects related to this
- * Component Instance and allows you to destroy the Component Instance via the {@link #destroy}
- * method.
- *
- */
-class ComponentRef extends ComponentRef$1 {
-  constructor(componentType, instance, location, _rootLView, _tNode) {
-    super();
-    this.location = location;
-    this._rootLView = _rootLView;
-    this._tNode = _tNode;
-    this.previousInputValues = null;
-    this.instance = instance;
-    this.hostView = this.changeDetectorRef = new ViewRef$1(_rootLView, undefined, /* _cdRefInjectingView */false);
-    this.componentType = componentType;
-  }
-  setInput(name, value) {
-    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);
-      const childComponentLView = getComponentLViewByIndex(this._tNode.index, lView);
-      markViewDirty(childComponentLView);
-    } else {
-      if (ngDevMode) {
-        const cmpNameForError = stringifyForError(this.componentType);
-        let message = `Can't set value of the '${name}' input on the '${cmpNameForError}' component. `;
-        message += `Make sure that the '${name}' property is annotated with @Input() or a mapped @Input('${name}') exists.`;
-        reportUnknownPropertyError(message);
-      }
-    }
-  }
-  get injector() {
-    return new NodeInjector(this._tNode, this._rootLView);
+ * Fields which exist on either directive or component definitions, and need to be copied from
+ * parent to child classes by the `ɵɵCopyDefinitionFeature`.
+ */
+const COPY_DIRECTIVE_FIELDS = [
+// The child class should use the providers of its parent.
+'providersResolver'
+// Not listed here are any fields which are handled by the `ɵɵInheritDefinitionFeature`, such
+// as inputs, outputs, and host binding functions.
+];
+/**
+ * Fields which exist only on component definitions, and need to be copied from parent to child
+ * classes by the `ɵɵCopyDefinitionFeature`.
+ *
+ * The type here allows any field of `ComponentDef` which is not also a property of `DirectiveDef`,
+ * since those should go in `COPY_DIRECTIVE_FIELDS` above.
+ */
+const COPY_COMPONENT_FIELDS = [
+// The child class should use the template function of its parent, including all template
+// semantics.
+'template', 'decls', 'consts', 'vars', 'onPush', 'ngContentSelectors',
+// The child class should use the CSS styles of its parent, including all styling semantics.
+'styles', 'encapsulation',
+// The child class should be checked by the runtime in the same way as its parent.
+'schemas'];
+/**
+ * Copies the fields not handled by the `ɵɵInheritDefinitionFeature` from the supertype of a
+ * definition.
+ *
+ * This exists primarily to support ngcc migration of an existing View Engine pattern, where an
+ * entire decorator is inherited from a parent to a child class. When ngcc detects this case, it
+ * generates a skeleton definition on the child class, and applies this feature.
+ *
+ * The `ɵɵCopyDefinitionFeature` then copies any needed fields from the parent class' definition,
+ * including things like the component template function.
+ *
+ * @param definition The definition of a child class which inherits from a parent class with its
+ * own definition.
+ *
+ * @codeGenApi
+ */
+function ɵɵCopyDefinitionFeature(definition) {
+  let superType = getSuperType(definition.type);
+  let superDef = undefined;
+  if (isComponentDef(definition)) {
+    // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
+    superDef = superType.ɵcmp;
+  } else {
+    // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
+    superDef = superType.ɵdir;
   }
-  destroy() {
-    this.hostView.destroy();
+  // Needed because `definition` fields are readonly.
+  const defAny = definition;
+  // Copy over any fields that apply to either directives or components.
+  for (const field of COPY_DIRECTIVE_FIELDS) {
+    defAny[field] = superDef[field];
   }
-  onDestroy(callback) {
-    this.hostView.onDestroy(callback);
+  if (isComponentDef(superDef)) {
+    // Copy over any component-specific fields.
+    for (const field of COPY_COMPONENT_FIELDS) {
+      defAny[field] = superDef[field];
+    }
   }
 }
-/** Creates a TNode that can be used to instantiate a root component. */
-function createRootComponentTNode(lView, rNode) {
-  const tView = lView[TVIEW];
-  const index = HEADER_OFFSET;
-  ngDevMode && assertIndexInRange(lView, index);
-  lView[index] = rNode;
-  // '#host' is added here as we don't know the real host DOM name (we don't want to read it) and at
-  // the same time we want to communicate the debug `TNode` that this is a special `TNode`
-  // representing a host element.
-  return getOrCreateTNode(tView, index, 2 /* TNodeType.Element */, '#host', null);
-}
+
 /**
- * Creates the root component view and the root component node.
+ * This feature adds the host directives behavior to a directive definition by patching a
+ * function onto it. The expectation is that the runtime will invoke the function during
+ * directive matching.
  *
- * @param hostRNode Render host element.
- * @param rootComponentDef ComponentDef
- * @param rootView The parent view where the host node is stored
- * @param rendererFactory Factory to be used for creating child renderers.
- * @param hostRenderer The current renderer
- * @param sanitizer The sanitizer, if provided
+ * For example:
+ * ```ts
+ * class ComponentWithHostDirective {
+ *   static ɵcmp = defineComponent({
+ *    type: ComponentWithHostDirective,
+ *    features: [ɵɵHostDirectivesFeature([
+ *      SimpleHostDirective,
+ *      {directive: AdvancedHostDirective, inputs: ['foo: alias'], outputs: ['bar']},
+ *    ])]
+ *  });
+ * }
+ * ```
  *
- * @returns Component view created
+ * @codeGenApi
  */
-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 retrieved
-  // and passed to the component LView.
-  let hydrationInfo = null;
-  if (hostRNode !== null) {
-    hydrationInfo = retrieveHydrationInfo(hostRNode, rootView[INJECTOR$1]);
-  }
-  const viewRenderer = environment.rendererFactory.createRenderer(hostRNode, rootComponentDef);
-  let lViewFlags = 16 /* LViewFlags.CheckAlways */;
-  if (rootComponentDef.signals) {
-    lViewFlags = 4096 /* LViewFlags.SignalView */;
-  } else if (rootComponentDef.onPush) {
-    lViewFlags = 64 /* LViewFlags.Dirty */;
-  }
-  const componentView = createLView(rootView, getOrCreateComponentTView(rootComponentDef), null, lViewFlags, rootView[tNode.index], tNode, environment, viewRenderer, null, null, hydrationInfo);
-  if (tView.firstCreatePass) {
-    markAsComponentHost(tView, tNode, rootDirectives.length - 1);
-  }
-  addToViewTree(rootView, componentView);
-  // Store component view at node index, with node as the HOST
-  return rootView[tNode.index] = componentView;
+function ɵɵHostDirectivesFeature(rawHostDirectives) {
+  const feature = definition => {
+    const resolved = (Array.isArray(rawHostDirectives) ? rawHostDirectives : rawHostDirectives()).map(dir => {
+      return typeof dir === 'function' ? {
+        directive: resolveForwardRef(dir),
+        inputs: EMPTY_OBJ,
+        outputs: EMPTY_OBJ
+      } : {
+        directive: resolveForwardRef(dir.directive),
+        inputs: bindingArrayToMap(dir.inputs),
+        outputs: bindingArrayToMap(dir.outputs)
+      };
+    });
+    if (definition.hostDirectives === null) {
+      definition.findHostDirectiveDefs = findHostDirectiveDefs;
+      definition.hostDirectives = resolved;
+    } else {
+      definition.hostDirectives.unshift(...resolved);
+    }
+  };
+  feature.ngInherit = true;
+  return feature;
 }
-/** Sets up the styling information on a root component. */
-function applyRootComponentStyling(rootDirectives, tNode, rNode, hostRenderer) {
-  for (const def of rootDirectives) {
-    tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, def.hostAttrs);
-  }
-  if (tNode.mergedAttrs !== null) {
-    computeStaticStyling(tNode, tNode.mergedAttrs, true);
-    if (rNode !== null) {
-      setupStaticAttributes(hostRenderer, rNode, tNode);
+function findHostDirectiveDefs(currentDef, matchedDefs, hostDirectiveDefs) {
+  if (currentDef.hostDirectives !== null) {
+    for (const hostDirectiveConfig of currentDef.hostDirectives) {
+      const hostDirectiveDef = getDirectiveDef(hostDirectiveConfig.directive);
+      if (typeof ngDevMode === 'undefined' || ngDevMode) {
+        validateHostDirective(hostDirectiveConfig, hostDirectiveDef);
+      }
+      // We need to patch the `declaredInputs` so that
+      // `ngOnChanges` can map the properties correctly.
+      patchDeclaredInputs(hostDirectiveDef.declaredInputs, hostDirectiveConfig.inputs);
+      // Host directives execute before the host so that its host bindings can be overwritten.
+      findHostDirectiveDefs(hostDirectiveDef, matchedDefs, hostDirectiveDefs);
+      hostDirectiveDefs.set(hostDirectiveDef, hostDirectiveConfig);
+      matchedDefs.push(hostDirectiveDef);
     }
   }
 }
 /**
- * Creates a root component and sets it up with features and host bindings.Shared by
- * renderComponent() and ViewContainerRef.createComponent().
+ * Converts an array in the form of `['publicName', 'alias', 'otherPublicName', 'otherAlias']` into
+ * a map in the form of `{publicName: 'alias', otherPublicName: 'otherAlias'}`.
  */
-function createRootComponent(componentView, rootComponentDef, rootDirectives, hostDirectiveDefs, rootLView, hostFeatures) {
-  const rootTNode = getCurrentTNode();
-  ngDevMode && assertDefined(rootTNode, 'tNode should have been already created');
-  const tView = rootLView[TVIEW];
-  const native = getNativeByTNode(rootTNode, rootLView);
-  initializeDirectives(tView, rootLView, rootTNode, rootDirectives, null, hostDirectiveDefs);
-  for (let i = 0; i < rootDirectives.length; i++) {
-    const directiveIndex = rootTNode.directiveStart + i;
-    const directiveInstance = getNodeInjectable(rootLView, tView, directiveIndex, rootTNode);
-    attachPatchData(directiveInstance, rootLView);
+function bindingArrayToMap(bindings) {
+  if (bindings === undefined || bindings.length === 0) {
+    return EMPTY_OBJ;
   }
-  invokeDirectivesHostBindings(tView, rootLView, rootTNode);
-  if (native) {
-    attachPatchData(native, rootLView);
+  const result = {};
+  for (let i = 0; i < bindings.length; i += 2) {
+    result[bindings[i]] = bindings[i + 1];
   }
-  // We're guaranteed for the `componentOffset` to be positive here
-  // since a root component always matches a component def.
-  ngDevMode && assertGreaterThan(rootTNode.componentOffset, -1, 'componentOffset must be great than -1');
-  const component = getNodeInjectable(rootLView, tView, rootTNode.directiveStart + rootTNode.componentOffset, rootTNode);
-  componentView[CONTEXT] = rootLView[CONTEXT] = component;
-  if (hostFeatures !== null) {
-    for (const feature of hostFeatures) {
-      feature(component, rootComponentDef);
+  return result;
+}
+/**
+ * `ngOnChanges` has some leftover legacy ViewEngine behavior where the keys inside the
+ * `SimpleChanges` event refer to the *declared* name of the input, not its public name or its
+ * minified name. E.g. in `@Input('alias') foo: string`, the name in the `SimpleChanges` object
+ * will always be `foo`, and not `alias` or the minified name of `foo` in apps using property
+ * minification.
+ *
+ * This is achieved through the `DirectiveDef.declaredInputs` map that is constructed when the
+ * definition is declared. When a property is written to the directive instance, the
+ * `NgOnChangesFeature` will try to remap the property name being written to using the
+ * `declaredInputs`.
+ *
+ * Since the host directive input remapping happens during directive matching, `declaredInputs`
+ * won't contain the new alias that the input is available under. This function addresses the
+ * issue by patching the host directive aliases to the `declaredInputs`. There is *not* a risk of
+ * this patching accidentally introducing new inputs to the host directive, because `declaredInputs`
+ * is used *only* by the `NgOnChangesFeature` when determining what name is used in the
+ * `SimpleChanges` object which won't be reached if an input doesn't exist.
+ */
+function patchDeclaredInputs(declaredInputs, exposedInputs) {
+  for (const publicName in exposedInputs) {
+    if (exposedInputs.hasOwnProperty(publicName)) {
+      const remappedPublicName = exposedInputs[publicName];
+      const privateName = declaredInputs[publicName];
+      // We *technically* shouldn't be able to hit this case because we can't have multiple
+      // inputs on the same property and we have validations against conflicting aliases in
+      // `validateMappings`. If we somehow did, it would lead to `ngOnChanges` being invoked
+      // with the wrong name so we have a non-user-friendly assertion here just in case.
+      if ((typeof ngDevMode === 'undefined' || ngDevMode) && declaredInputs.hasOwnProperty(remappedPublicName)) {
+        assertEqual(declaredInputs[remappedPublicName], declaredInputs[publicName], `Conflicting host directive input alias ${publicName}.`);
+      }
+      declaredInputs[remappedPublicName] = privateName;
     }
   }
-  // We want to generate an empty QueryList for root content queries for backwards
-  // compatibility with ViewEngine.
-  executeContentQueries(tView, rootTNode, rootLView);
-  return component;
 }
-/** Sets the static attributes on a root component. */
-function setRootNodeAttributes(hostRenderer, componentDef, hostRNode, rootSelectorOrNode) {
-  if (rootSelectorOrNode) {
-    // The placeholder will be replaced with the actual version at build time.
-    setUpAttributes(hostRenderer, hostRNode, ['ng-version', '17.2.3']);
-  } else {
-    // If host element is created as a part of this function call (i.e. `rootSelectorOrNode`
-    // is not defined), also apply attributes and classes extracted from component selector.
-    // Extract attributes and classes from the first selector only to match VE behavior.
-    const {
-      attrs,
-      classes
-    } = extractAttrsAndClassesFromSelector(componentDef.selectors[0]);
-    if (attrs) {
-      setUpAttributes(hostRenderer, hostRNode, attrs);
-    }
-    if (classes && classes.length > 0) {
-      writeDirectClass(hostRenderer, hostRNode, classes.join(' '));
+/**
+ * Verifies that the host directive has been configured correctly.
+ * @param hostDirectiveConfig Host directive configuration object.
+ * @param directiveDef Directive definition of the host directive.
+ */
+function validateHostDirective(hostDirectiveConfig, directiveDef) {
+  const type = hostDirectiveConfig.directive;
+  if (directiveDef === null) {
+    if (getComponentDef(type) !== null) {
+      throw new RuntimeError(310 /* RuntimeErrorCode.HOST_DIRECTIVE_COMPONENT */, `Host directive ${type.name} cannot be a component.`);
     }
+    throw new RuntimeError(307 /* RuntimeErrorCode.HOST_DIRECTIVE_UNRESOLVABLE */, `Could not resolve metadata for host directive ${type.name}. ` + `Make sure that the ${type.name} class is annotated with an @Directive decorator.`);
+  }
+  if (!directiveDef.standalone) {
+    throw new RuntimeError(308 /* RuntimeErrorCode.HOST_DIRECTIVE_NOT_STANDALONE */, `Host directive ${directiveDef.type.name} must be standalone.`);
   }
+  validateMappings('input', directiveDef, hostDirectiveConfig.inputs);
+  validateMappings('output', directiveDef, hostDirectiveConfig.outputs);
 }
-/** Projects the `projectableNodes` that were specified when creating a root component. */
-function projectNodes(tNode, ngContentSelectors, projectableNodes) {
-  const projection = tNode.projection = [];
-  for (let i = 0; i < ngContentSelectors.length; i++) {
-    const nodesforSlot = projectableNodes[i];
-    // Projectable nodes can be passed as array of arrays or an array of iterables (ngUpgrade
-    // case). Here we do normalize passed data structure to be an array of arrays to avoid
-    // complex checks down the line.
-    // We also normalize the length of the passed in projectable nodes (to match the number of
-    // <ng-container> slots defined by a component).
-    projection.push(nodesforSlot != null ? Array.from(nodesforSlot) : null);
+/**
+ * Checks that the host directive inputs/outputs configuration is valid.
+ * @param bindingType Kind of binding that is being validated. Used in the error message.
+ * @param def Definition of the host directive that is being validated against.
+ * @param hostDirectiveBindings Host directive mapping object that shold be validated.
+ */
+function validateMappings(bindingType, def, hostDirectiveBindings) {
+  const className = def.type.name;
+  const bindings = bindingType === 'input' ? def.inputs : def.outputs;
+  for (const publicName in hostDirectiveBindings) {
+    if (hostDirectiveBindings.hasOwnProperty(publicName)) {
+      if (!bindings.hasOwnProperty(publicName)) {
+        throw new RuntimeError(311 /* RuntimeErrorCode.HOST_DIRECTIVE_UNDEFINED_BINDING */, `Directive ${className} does not have an ${bindingType} with a public name of ${publicName}.`);
+      }
+      const remappedPublicName = hostDirectiveBindings[publicName];
+      if (bindings.hasOwnProperty(remappedPublicName) && remappedPublicName !== publicName) {
+        throw new RuntimeError(312 /* RuntimeErrorCode.HOST_DIRECTIVE_CONFLICTING_ALIAS */, `Cannot alias ${bindingType} ${publicName} of host directive ${className} to ${remappedPublicName}, because it already has a different ${bindingType} with the same public name.`);
+      }
+    }
   }
 }
+
 /**
- * Used to enable lifecycle hooks on the root component.
- *
- * Include this feature when calling `renderComponent` if the root component
- * you are rendering has lifecycle hooks defined. Otherwise, the hooks won't
- * be called properly.
+ * Decorates the directive definition with support for input transform functions.
  *
- * Example:
+ * If the directive uses inheritance, the feature should be included before the
+ * `InheritDefinitionFeature` to ensure that the `inputTransforms` field is populated.
  *
- * ```
- * renderComponent(AppComponent, {hostFeatures: [LifecycleHooksFeature]});
- * ```
+ * @codeGenApi
  */
-function LifecycleHooksFeature() {
-  const tNode = getCurrentTNode();
-  ngDevMode && assertDefined(tNode, 'TNode is required');
-  registerPostOrderHooks(getLView()[TVIEW], tNode);
+function ɵɵInputTransformsFeature(definition) {
+  const inputs = definition.inputConfig;
+  const inputTransforms = {};
+  for (const minifiedKey in inputs) {
+    if (inputs.hasOwnProperty(minifiedKey)) {
+      // Note: the private names are used for the keys, rather than the public ones, because public
+      // names can be re-aliased in host directives which would invalidate the lookup.
+      const value = inputs[minifiedKey];
+      if (Array.isArray(value) && value[3]) {
+        inputTransforms[minifiedKey] = value[3];
+      }
+    }
+  }
+  definition.inputTransforms = inputTransforms;
 }
 
 /**
- * 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);
- * }
+ * Represents an instance of an `NgModule` created by an `NgModuleFactory`.
+ * Provides access to the `NgModule` instance and related objects.
  *
- * @Component({
- *   standalone: true,
- *   selector: 'app',
- *   template: `<main>Hi! This is the main content.</main>`,
- * })
- * class AppComponent {
- *   vcr = inject(ViewContainerRef);
+ * @publicApi
+ */
+class NgModuleRef$1 {}
+/**
+ * @publicApi
  *
- *   ngAfterViewInit() {
- *     const compRef = this.vcr.createComponent(DynamicComponent);
- *     compRef.changeDetectorRef.detectChanges();
- *   }
- * }
- * ```
+ * @deprecated
+ * This class was mostly used as a part of ViewEngine-based JIT API and is no longer needed in Ivy
+ * JIT mode. See [JIT API changes due to ViewEngine deprecation](guide/deprecations#jit-api-changes)
+ * for additional context. Angular provides APIs that accept NgModule classes directly (such as
+ * [PlatformRef.bootstrapModule](api/core/PlatformRef#bootstrapModule) and
+ * [createNgModule](api/core/createNgModule)), consider switching to those APIs instead of
+ * using factory-based ones.
+ */
+class NgModuleFactory$1 {}
+
+/**
+ * Returns a new NgModuleRef instance based on the NgModule class and parent injector provided.
  *
- * @see {@link ComponentRef}
- * @see {@link EmbeddedViewRef}
+ * @param ngModule NgModule class.
+ * @param parentInjector Optional injector instance to use as a parent for the module injector. If
+ *     not provided, `NullInjector` will be used instead.
+ * @returns NgModuleRef that represents an NgModule instance.
  *
  * @publicApi
  */
-let ViewContainerRef = /*#__PURE__*/(() => {
-  class ViewContainerRef {
-    /**
-     * @internal
-     * @nocollapse
-     */
-    static #_ = this.__NG_ELEMENT_ID__ = injectViewContainerRef;
-  }
-  return ViewContainerRef;
-})();
+function createNgModule(ngModule, parentInjector) {
+  return new NgModuleRef(ngModule, parentInjector ?? null, []);
+}
 /**
- * Creates a ViewContainerRef and stores it on the injector. Or, if the ViewContainerRef
- * already exists, retrieves the existing ViewContainerRef.
+ * The `createNgModule` function alias for backwards-compatibility.
+ * Please avoid using it directly and use `createNgModule` instead.
  *
- * @returns The ViewContainerRef instance to use
+ * @deprecated Use `createNgModule` instead.
  */
-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) {
+const createNgModuleRef = createNgModule;
+class NgModuleRef extends NgModuleRef$1 {
+  constructor(ngModuleType, _parent, additionalProviders) {
     super();
-    this._lContainer = _lContainer;
-    this._hostTNode = _hostTNode;
-    this._hostLView = _hostLView;
-  }
-  get element() {
-    return createElementRef(this._hostTNode, this._hostLView);
+    this._parent = _parent;
+    // tslint:disable-next-line:require-internal-with-underscore
+    this._bootstrapComponents = [];
+    this.destroyCbs = [];
+    // When bootstrapping a module we have a dependency graph that looks like this:
+    // ApplicationRef -> ComponentFactoryResolver -> NgModuleRef. The problem is that if the
+    // module being resolved tries to inject the ComponentFactoryResolver, it'll create a
+    // circular dependency which will result in a runtime error, because the injector doesn't
+    // exist yet. We work around the issue by creating the ComponentFactoryResolver ourselves
+    // and providing it, rather than letting the injector resolve it.
+    this.componentFactoryResolver = new ComponentFactoryResolver(this);
+    const ngModuleDef = getNgModuleDef(ngModuleType);
+    ngDevMode && assertDefined(ngModuleDef, `NgModule '${stringify(ngModuleType)}' is not a subtype of 'NgModuleType'.`);
+    this._bootstrapComponents = maybeUnwrapFn(ngModuleDef.bootstrap);
+    this._r3Injector = createInjectorWithoutInjectorInstances(ngModuleType, _parent, [{
+      provide: NgModuleRef$1,
+      useValue: this
+    }, {
+      provide: ComponentFactoryResolver$1,
+      useValue: this.componentFactoryResolver
+    }, ...additionalProviders], stringify(ngModuleType), new Set(['environment']));
+    // We need to resolve the injector types separately from the injector creation, because
+    // the module might be trying to use this ref in its constructor for DI which will cause a
+    // circular error that will eventually error out, because the injector isn't created yet.
+    this._r3Injector.resolveInjectorInitializers();
+    this.instance = this._r3Injector.get(ngModuleType);
   }
   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);
-    }
+    return this._r3Injector;
   }
-  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);
+  destroy() {
+    ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
+    const injector = this._r3Injector;
+    !injector.destroyed && injector.destroy();
+    this.destroyCbs.forEach(fn => fn());
+    this.destroyCbs = null;
   }
-  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;
+  onDestroy(callback) {
+    ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
+    this.destroyCbs.push(callback);
   }
-  move(viewRef, newIndex) {
-    if (ngDevMode && viewRef.destroyed) {
-      throw new Error('Cannot move a destroyed View in a ViewContainer!');
-    }
-    return this.insert(viewRef, newIndex);
+}
+class NgModuleFactory extends NgModuleFactory$1 {
+  constructor(moduleType) {
+    super();
+    this.moduleType = moduleType;
   }
-  indexOf(viewRef) {
-    const viewRefsArr = getViewRefs(this._lContainer);
-    return viewRefsArr !== null ? viewRefsArr.indexOf(viewRef) : -1;
+  create(parentInjector) {
+    return new NgModuleRef(this.moduleType, parentInjector, []);
   }
-  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);
+}
+function createNgModuleRefWithProviders(moduleType, parentInjector, additionalProviders) {
+  return new NgModuleRef(moduleType, parentInjector, additionalProviders);
+}
+class EnvironmentNgModuleRefAdapter extends NgModuleRef$1 {
+  constructor(config) {
+    super();
+    this.componentFactoryResolver = new ComponentFactoryResolver(this);
+    this.instance = null;
+    const injector = new R3Injector([...config.providers, {
+      provide: NgModuleRef$1,
+      useValue: this
+    }, {
+      provide: ComponentFactoryResolver$1,
+      useValue: this.componentFactoryResolver
+    }], config.parent || getNullInjector(), config.debugName, new Set(['environment']));
+    this.injector = injector;
+    if (config.runEnvironmentInitializers) {
+      injector.resolveInjectorInitializers();
     }
   }
-  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;
+  destroy() {
+    this.injector.destroy();
   }
-  _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;
+  onDestroy(callback) {
+    this.injector.onDestroy(callback);
   }
-};
-function getViewRefs(lContainer) {
-  return lContainer[VIEW_REFS];
 }
-function getOrCreateViewRefs(lContainer) {
-  return lContainer[VIEW_REFS] || (lContainer[VIEW_REFS] = []);
+/**
+ * Create a new environment injector.
+ *
+ * Learn more about environment injectors in
+ * [this guide](guide/standalone-components#environment-injectors).
+ *
+ * @param providers An array of providers.
+ * @param parent A parent environment injector.
+ * @param debugName An optional name for this injector instance, which will be used in error
+ *     messages.
+ *
+ * @publicApi
+ */
+function createEnvironmentInjector(providers, parent, debugName = null) {
+  const adapter = new EnvironmentNgModuleRefAdapter({
+    providers,
+    parent,
+    debugName,
+    runEnvironmentInitializers: true
+  });
+  return adapter.injector;
 }
+
 /**
- * Creates a ViewContainerRef and stores it on the injector.
+ * A service used by the framework to create and cache injector instances.
  *
- * @param hostTNode The node that is requesting a ViewContainerRef
- * @param hostLView The view to which the node belongs
- * @returns The ViewContainerRef instance to use
+ * This service is used to create a single injector instance for each defer
+ * block definition, to avoid creating an injector for each defer block instance
+ * of a certain type.
  */
-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);
+let CachedInjectorService = /*#__PURE__*/(() => {
+  class CachedInjectorService {
+    constructor() {
+      this.cachedInjectors = new Map();
+    }
+    getOrCreateInjector(key, parentInjector, providers, debugName) {
+      if (!this.cachedInjectors.has(key)) {
+        const injector = providers.length > 0 ? createEnvironmentInjector(providers, parentInjector, debugName) : null;
+        this.cachedInjectors.set(key, injector);
+      }
+      return this.cachedInjectors.get(key);
+    }
+    ngOnDestroy() {
+      try {
+        for (const injector of this.cachedInjectors.values()) {
+          if (injector !== null) {
+            injector.destroy();
+          }
+        }
+      } finally {
+        this.cachedInjectors.clear();
+      }
+    }
+    /** @nocollapse */
+    static #_ = this.ɵprov = ɵɵdefineInjectable({
+      token: CachedInjectorService,
+      providedIn: 'environment',
+      factory: () => new CachedInjectorService()
+    });
   }
-  _locateOrCreateAnchorNode(lContainer, hostLView, hostTNode, slotValue);
-  return new R3ViewContainerRef(lContainer, hostTNode, hostLView);
+  return CachedInjectorService;
+})();
+/**
+ * The name of a field that Angular monkey-patches onto a component
+ * class to store a function that loads defer-loadable dependencies
+ * and applies metadata to a class.
+ */
+const ASYNC_COMPONENT_METADATA_FN = '__ngAsyncComponentMetadataFn__';
+/**
+ * If a given component has unresolved async metadata - returns a reference
+ * to a function that applies component metadata after resolving defer-loadable
+ * dependencies. Otherwise - this function returns `null`.
+ */
+function getAsyncClassMetadataFn(type) {
+  const componentClass = type; // cast to `any`, so that we can read a monkey-patched field
+  return componentClass[ASYNC_COMPONENT_METADATA_FN] ?? null;
 }
 /**
- * Creates and inserts a comment node that acts as an anchor for a view container.
+ * Handles the process of applying metadata info to a component class in case
+ * component template has defer blocks (thus some dependencies became deferrable).
  *
- * 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.
+ * @param type Component class where metadata should be added
+ * @param dependencyLoaderFn Function that loads dependencies
+ * @param metadataSetterFn Function that forms a scope in which the `setClassMetadata` is invoked
  */
-function 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;
+function setClassMetadataAsync(type, dependencyLoaderFn, metadataSetterFn) {
+  const componentClass = type; // cast to `any`, so that we can monkey-patch it
+  componentClass[ASYNC_COMPONENT_METADATA_FN] = () => Promise.all(dependencyLoaderFn()).then(dependencies => {
+    metadataSetterFn(...dependencies);
+    // Metadata is now set, reset field value to indicate that this component
+    // can by used/compiled synchronously.
+    componentClass[ASYNC_COMPONENT_METADATA_FN] = null;
+    return dependencies;
+  });
+  return componentClass[ASYNC_COMPONENT_METADATA_FN];
 }
-let _locateOrCreateAnchorNode = createAnchorNode;
-let _populateDehydratedViewsInLContainer = () => 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.
+ * Adds decorator, constructor, and property metadata to a given type via static metadata fields
+ * on the type.
  *
- * @param lContainer LContainer that should be populated.
- * @param tNode Corresponding TNode.
- * @param hostLView LView that hosts LContainer.
- * @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.
+ * These metadata fields can later be read with Angular's `ReflectionCapabilities` API.
+ *
+ * Calls to `setClassMetadata` can be guarded by ngDevMode, resulting in the metadata assignments
+ * being tree-shaken away during production builds.
  */
-function populateDehydratedViewsInLContainer(lContainer, tNode, hostLView) {
-  return _populateDehydratedViewsInLContainer(lContainer, tNode, hostLView);
+function setClassMetadata(type, decorators, ctorParameters, propDecorators) {
+  return noSideEffects(() => {
+    const clazz = type;
+    if (decorators !== null) {
+      if (clazz.hasOwnProperty('decorators') && clazz.decorators !== undefined) {
+        clazz.decorators.push(...decorators);
+      } else {
+        clazz.decorators = decorators;
+      }
+    }
+    if (ctorParameters !== null) {
+      // Rather than merging, clobber the existing parameters. If other projects exist which
+      // use tsickle-style annotations and reflect over them in the same way, this could
+      // cause issues, but that is vanishingly unlikely.
+      clazz.ctorParameters = ctorParameters;
+    }
+    if (propDecorators !== null) {
+      // The property decorator objects are merged as it is possible different fields have
+      // different decorator types. Decorators on individual fields are not merged, as it's
+      // also incredibly unlikely that a field will be decorated both with an Angular
+      // decorator and a non-Angular decorator that's also been downleveled.
+      if (clazz.hasOwnProperty('propDecorators') && clazz.propDecorators !== undefined) {
+        clazz.propDecorators = {
+          ...clazz.propDecorators,
+          ...propDecorators
+        };
+      } else {
+        clazz.propDecorators = propDecorators;
+      }
+    }
+  });
 }
+
+/*
+ * This file exists to support compilation of @angular/core in Ivy mode.
+ *
+ * When the Angular compiler processes a compilation unit, it normally writes imports to
+ * @angular/core. When compiling the core package itself this strategy isn't usable. Instead, the
+ * compiler writes imports to this file.
+ *
+ * Only a subset of such imports are supported - core is not allowed to declare components or pipes.
+ * A check in ngtsc's `R3SymbolsImportRewriter` validates this condition. The rewriter is only used
+ * when compiling @angular/core and is responsible for translating an external name (prefixed with
+ * ɵ) to the internal symbol name as exported below.
+ *
+ * The below symbols are used for @Injectable and @NgModule compilation.
+ */
 /**
- * Regular creation mode: an anchor is created and
- * assigned to the `lContainer[NATIVE]` slot.
+ * The existence of this constant (in this particular file) informs the Angular compiler that the
+ * current program is actually @angular/core, which needs to be compiled specially.
  */
-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;
-}
+const ITS_JUST_ANGULAR = true;
+
 /**
- * Hydration logic that looks up all dehydrated views in this container
- * and puts them into `lContainer[DEHYDRATED_VIEWS]` slot.
+ * *Internal* service that keeps track of pending tasks happening in the system.
  *
- * @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.
+ * This information is needed to make sure that the serialization on the server
+ * is delayed until all tasks in the queue (such as an initial navigation or a
+ * pending HTTP request) are completed.
+ *
+ * Pending tasks continue to contribute to the stableness of `ApplicationRef`
+ * throughout the lifetime of the application.
  */
-function populateDehydratedViewsInLContainerImpl(lContainer, tNode, hostLView) {
-  // 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 = tNode.index - HEADER_OFFSET;
-  const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock(tNode) || 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, tNode, 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);
+let PendingTasks = /*#__PURE__*/(() => {
+  class PendingTasks {
+    constructor() {
+      this.taskId = 0;
+      this.pendingTasks = new Set();
+      this.hasPendingTasks = new rxjs__WEBPACK_IMPORTED_MODULE_3__/* .BehaviorSubject */ .g(false);
+    }
+    get _hasPendingTasks() {
+      return this.hasPendingTasks.value;
+    }
+    add() {
+      if (!this._hasPendingTasks) {
+        this.hasPendingTasks.next(true);
+      }
+      const taskId = this.taskId++;
+      this.pendingTasks.add(taskId);
+      return taskId;
+    }
+    remove(taskId) {
+      this.pendingTasks.delete(taskId);
+      if (this.pendingTasks.size === 0 && this._hasPendingTasks) {
+        this.hasPendingTasks.next(false);
+      }
+    }
+    ngOnDestroy() {
+      this.pendingTasks.clear();
+      if (this._hasPendingTasks) {
+        this.hasPendingTasks.next(false);
+      }
+    }
+    static #_ = this.ɵfac = function PendingTasks_Factory(t) {
+      return new (t || PendingTasks)();
+    };
+    static #_2 = this.ɵprov = /*@__PURE__*/ɵɵdefineInjectable({
+      token: PendingTasks,
+      factory: PendingTasks.ɵfac,
+      providedIn: 'root'
+    });
   }
-  lContainer[NATIVE] = commentNode;
-  lContainer[DEHYDRATED_VIEWS] = dehydratedViews;
-  return true;
+  return PendingTasks;
+})();
+/*#__PURE__*/(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(PendingTasks, [{
+    type: Injectable,
+    args: [{
+      providedIn: 'root'
+    }]
+  }], null, null);
+})();
+function isIterable(obj) {
+  return obj !== null && typeof obj === 'object' && obj[Symbol.iterator] !== undefined;
 }
-function locateOrCreateAnchorNode(lContainer, hostLView, hostTNode, slotValue) {
-  if (!_populateDehydratedViewsInLContainer(lContainer, hostTNode, hostLView)) {
-    // 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 isListLikeIterable(obj) {
+  if (!isJsObject(obj)) return false;
+  return Array.isArray(obj) || !(obj instanceof Map) &&
+  // JS Map are iterables but return entries as [k, v]
+  Symbol.iterator in obj; // JS Iterable have a Symbol.iterator prop
 }
-function enableLocateOrCreateContainerRefImpl() {
-  _locateOrCreateAnchorNode = locateOrCreateAnchorNode;
-  _populateDehydratedViewsInLContainer = populateDehydratedViewsInLContainerImpl;
-}
-class LQuery_ {
-  constructor(queryList) {
-    this.queryList = queryList;
-    this.matches = null;
-  }
-  clone() {
-    return new LQuery_(this.queryList);
-  }
-  setDirty() {
-    this.queryList.setDirty();
+function areIterablesEqual(a, b, comparator) {
+  const iterator1 = a[Symbol.iterator]();
+  const iterator2 = b[Symbol.iterator]();
+  while (true) {
+    const item1 = iterator1.next();
+    const item2 = iterator2.next();
+    if (item1.done && item2.done) return true;
+    if (item1.done || item2.done) return false;
+    if (!comparator(item1.value, item2.value)) return false;
   }
 }
-class LQueries_ {
-  constructor(queries = []) {
-    this.queries = queries;
-  }
-  createEmbeddedView(tView) {
-    const tQueries = tView.queries;
-    if (tQueries !== null) {
-      const noOfInheritedQueries = tView.contentQueries !== null ? tView.contentQueries[0] : tQueries.length;
-      const viewLQueries = [];
-      // An embedded view has queries propagated from a declaration view at the beginning of the
-      // TQueries collection and up until a first content query declared in the embedded view. Only
-      // propagated LQueries are created at this point (LQuery corresponding to declared content
-      // queries will be instantiated from the content query instructions for each directive).
-      for (let i = 0; i < noOfInheritedQueries; i++) {
-        const tQuery = tQueries.getByIndex(i);
-        const parentLQuery = this.queries[tQuery.indexInDeclarationView];
-        viewLQueries.push(parentLQuery.clone());
-      }
-      return new LQueries_(viewLQueries);
+function iterateListLike(obj, fn) {
+  if (Array.isArray(obj)) {
+    for (let i = 0; i < obj.length; i++) {
+      fn(obj[i]);
     }
-    return null;
-  }
-  insertView(tView) {
-    this.dirtyQueriesWithMatches(tView);
-  }
-  detachView(tView) {
-    this.dirtyQueriesWithMatches(tView);
-  }
-  finishViewCreation(tView) {
-    this.dirtyQueriesWithMatches(tView);
-  }
-  dirtyQueriesWithMatches(tView) {
-    for (let i = 0; i < this.queries.length; i++) {
-      if (getTQuery(tView, i).matches !== null) {
-        this.queries[i].setDirty();
-      }
+  } else {
+    const iterator = obj[Symbol.iterator]();
+    let item;
+    while (!(item = iterator.next()).done) {
+      fn(item.value);
     }
   }
 }
-class TQueryMetadata_ {
-  constructor(predicate, flags, read = null) {
-    this.flags = flags;
-    this.read = read;
-    // Compiler might not be able to pre-optimize and split multiple selectors.
-    if (typeof predicate === 'string') {
-      this.predicate = splitQueryMultiSelectors(predicate);
+function isJsObject(o) {
+  return o !== null && (typeof o === 'function' || typeof o === 'object');
+}
+function devModeEqual(a, b) {
+  const isListLikeIterableA = isListLikeIterable(a);
+  const isListLikeIterableB = isListLikeIterable(b);
+  if (isListLikeIterableA && isListLikeIterableB) {
+    return areIterablesEqual(a, b, devModeEqual);
+  } else {
+    const isAObject = a && (typeof a === 'object' || typeof a === 'function');
+    const isBObject = b && (typeof b === 'object' || typeof b === 'function');
+    if (!isListLikeIterableA && isAObject && !isListLikeIterableB && isBObject) {
+      return true;
     } else {
-      this.predicate = predicate;
+      return Object.is(a, b);
     }
   }
 }
-class TQueries_ {
-  constructor(queries = []) {
-    this.queries = queries;
-  }
-  elementStart(tView, tNode) {
-    ngDevMode && assertFirstCreatePass(tView, 'Queries should collect results on the first template pass only');
-    for (let i = 0; i < this.queries.length; i++) {
-      this.queries[i].elementStart(tView, tNode);
-    }
-  }
-  elementEnd(tNode) {
-    for (let i = 0; i < this.queries.length; i++) {
-      this.queries[i].elementEnd(tNode);
-    }
-  }
-  embeddedTView(tNode) {
-    let queriesForTemplateRef = null;
-    for (let i = 0; i < this.length; i++) {
-      const childQueryIndex = queriesForTemplateRef !== null ? queriesForTemplateRef.length : 0;
-      const tqueryClone = this.getByIndex(i).embeddedTView(tNode, childQueryIndex);
-      if (tqueryClone) {
-        tqueryClone.indexInDeclarationView = i;
-        if (queriesForTemplateRef !== null) {
-          queriesForTemplateRef.push(tqueryClone);
-        } else {
-          queriesForTemplateRef = [tqueryClone];
-        }
-      }
-    }
-    return queriesForTemplateRef !== null ? new TQueries_(queriesForTemplateRef) : null;
-  }
-  template(tView, tNode) {
-    ngDevMode && assertFirstCreatePass(tView, 'Queries should collect results on the first template pass only');
-    for (let i = 0; i < this.queries.length; i++) {
-      this.queries[i].template(tView, tNode);
-    }
-  }
-  getByIndex(index) {
-    ngDevMode && assertIndexInRange(this.queries, index);
-    return this.queries[index];
-  }
-  get length() {
-    return this.queries.length;
-  }
-  track(tquery) {
-    this.queries.push(tquery);
-  }
+
+// TODO(misko): consider inlining
+/** Updates binding and returns the value. */
+function updateBinding(lView, bindingIndex, value) {
+  return lView[bindingIndex] = value;
 }
-class TQuery_ {
-  constructor(metadata, nodeIndex = -1) {
-    this.metadata = metadata;
-    this.matches = null;
-    this.indexInDeclarationView = -1;
-    this.crossesNgTemplate = false;
-    /**
-     * A flag indicating if a given query still applies to nodes it is crossing. We use this flag
-     * (alongside with _declarationNodeIndex) to know when to stop applying content queries to
-     * elements in a template.
-     */
-    this._appliesToNextNode = true;
-    this._declarationNodeIndex = nodeIndex;
-  }
-  elementStart(tView, tNode) {
-    if (this.isApplyingToNode(tNode)) {
-      this.matchTNode(tView, tNode);
-    }
-  }
-  elementEnd(tNode) {
-    if (this._declarationNodeIndex === tNode.index) {
-      this._appliesToNextNode = false;
-    }
-  }
-  template(tView, tNode) {
-    this.elementStart(tView, tNode);
-  }
-  embeddedTView(tNode, childQueryIndex) {
-    if (this.isApplyingToNode(tNode)) {
-      this.crossesNgTemplate = true;
-      // A marker indicating a `<ng-template>` element (a placeholder for query results from
-      // embedded views created based on this `<ng-template>`).
-      this.addMatch(-tNode.index, childQueryIndex);
-      return new TQuery_(this.metadata);
-    }
-    return null;
-  }
-  isApplyingToNode(tNode) {
-    if (this._appliesToNextNode && (this.metadata.flags & 1 /* QueryFlags.descendants */) !== 1 /* QueryFlags.descendants */) {
-      const declarationNodeIdx = this._declarationNodeIndex;
-      let parent = tNode.parent;
-      // Determine if a given TNode is a "direct" child of a node on which a content query was
-      // declared (only direct children of query's host node can match with the descendants: false
-      // option). There are 3 main use-case / conditions to consider here:
-      // - <needs-target><i #target></i></needs-target>: here <i #target> parent node is a query
-      // host node;
-      // - <needs-target><ng-template [ngIf]="true"><i #target></i></ng-template></needs-target>:
-      // here <i #target> parent node is null;
-      // - <needs-target><ng-container><i #target></i></ng-container></needs-target>: here we need
-      // to go past `<ng-container>` to determine <i #target> parent node (but we shouldn't traverse
-      // up past the query's host node!).
-      while (parent !== null && parent.type & 8 /* TNodeType.ElementContainer */ && parent.index !== declarationNodeIdx) {
-        parent = parent.parent;
-      }
-      return declarationNodeIdx === (parent !== null ? parent.index : -1);
-    }
-    return this._appliesToNextNode;
-  }
-  matchTNode(tView, tNode) {
-    const predicate = this.metadata.predicate;
-    if (Array.isArray(predicate)) {
-      for (let i = 0; i < predicate.length; i++) {
-        const name = predicate[i];
-        this.matchTNodeWithReadOption(tView, tNode, getIdxOfMatchingSelector(tNode, name));
-        // Also try matching the name to a provider since strings can be used as DI tokens too.
-        this.matchTNodeWithReadOption(tView, tNode, locateDirectiveOrProvider(tNode, tView, name, false, false));
-      }
-    } else {
-      if (predicate === TemplateRef) {
-        if (tNode.type & 4 /* TNodeType.Container */) {
-          this.matchTNodeWithReadOption(tView, tNode, -1);
-        }
-      } else {
-        this.matchTNodeWithReadOption(tView, tNode, locateDirectiveOrProvider(tNode, tView, predicate, false, false));
-      }
-    }
-  }
-  matchTNodeWithReadOption(tView, tNode, nodeMatchIdx) {
-    if (nodeMatchIdx !== null) {
-      const read = this.metadata.read;
-      if (read !== null) {
-        if (read === ElementRef || read === ViewContainerRef || read === TemplateRef && tNode.type & 4 /* TNodeType.Container */) {
-          this.addMatch(tNode.index, -2);
-        } else {
-          const directiveOrProviderIdx = locateDirectiveOrProvider(tNode, tView, read, false, false);
-          if (directiveOrProviderIdx !== null) {
-            this.addMatch(tNode.index, directiveOrProviderIdx);
-          }
-        }
-      } else {
-        this.addMatch(tNode.index, nodeMatchIdx);
-      }
-    }
-  }
-  addMatch(tNodeIdx, matchIdx) {
-    if (this.matches === null) {
-      this.matches = [tNodeIdx, matchIdx];
-    } else {
-      this.matches.push(tNodeIdx, matchIdx);
-    }
-  }
+/** Gets the current binding value. */
+function getBinding(lView, bindingIndex) {
+  ngDevMode && assertIndexInRange(lView, bindingIndex);
+  ngDevMode && assertNotSame(lView[bindingIndex], NO_CHANGE, 'Stored value should never be NO_CHANGE.');
+  return lView[bindingIndex];
 }
 /**
- * Iterates over local names for a given node and returns directive index
- * (or -1 if a local name points to an element).
+ * Updates binding if changed, then returns whether it was updated.
  *
- * @param tNode static data of a node to check
- * @param selector selector to match
- * @returns directive index, -1 or null if a selector didn't match any of the local names
+ * This function also checks the `CheckNoChangesMode` and throws if changes are made.
+ * Some changes (Objects/iterables) during `CheckNoChangesMode` are exempt to comply with VE
+ * behavior.
+ *
+ * @param lView current `LView`
+ * @param bindingIndex The binding in the `LView` to check
+ * @param value New value to check against `lView[bindingIndex]`
+ * @returns `true` if the bindings has changed. (Throws if binding has changed during
+ *          `CheckNoChangesMode`)
  */
-function getIdxOfMatchingSelector(tNode, selector) {
-  const localNames = tNode.localNames;
-  if (localNames !== null) {
-    for (let i = 0; i < localNames.length; i += 2) {
-      if (localNames[i] === selector) {
-        return localNames[i + 1];
+function bindingUpdated(lView, bindingIndex, value) {
+  ngDevMode && assertNotSame(value, NO_CHANGE, 'Incoming value should never be NO_CHANGE.');
+  ngDevMode && assertLessThan(bindingIndex, lView.length, `Slot should have been initialized to NO_CHANGE`);
+  const oldValue = lView[bindingIndex];
+  if (Object.is(oldValue, value)) {
+    return false;
+  } else {
+    if (ngDevMode && isInCheckNoChangesMode()) {
+      // View engine didn't report undefined values as changed on the first checkNoChanges pass
+      // (before the change detection was run).
+      const oldValueToCompare = oldValue !== NO_CHANGE ? oldValue : undefined;
+      if (!devModeEqual(oldValueToCompare, value)) {
+        const details = getExpressionChangedErrorDetails(lView, bindingIndex, oldValueToCompare, value);
+        throwErrorIfNoChangesMode(oldValue === NO_CHANGE, details.oldValue, details.newValue, details.propName, lView);
       }
+      // There was a change, but the `devModeEqual` decided that the change is exempt from an error.
+      // For this reason we exit as if no change. The early exit is needed to prevent the changed
+      // value to be written into `LView` (If we would write the new value that we would not see it
+      // as change on next CD.)
+      return false;
     }
+    lView[bindingIndex] = value;
+    return true;
   }
-  return null;
-}
-function createResultByTNodeType(tNode, currentView) {
-  if (tNode.type & (3 /* TNodeType.AnyRNode */ | 8 /* TNodeType.ElementContainer */)) {
-    return createElementRef(tNode, currentView);
-  } else if (tNode.type & 4 /* TNodeType.Container */) {
-    return createTemplateRef(tNode, currentView);
-  }
-  return null;
 }
-function createResultForNode(lView, tNode, matchingIdx, read) {
-  if (matchingIdx === -1) {
-    // if read token and / or strategy is not specified, detect it using appropriate tNode type
-    return createResultByTNodeType(tNode, lView);
-  } else if (matchingIdx === -2) {
-    // read a special token from a node injector
-    return createSpecialToken(lView, tNode, read);
-  } else {
-    // read a token
-    return getNodeInjectable(lView, lView[TVIEW], matchingIdx, tNode);
-  }
+/** Updates 2 bindings if changed, then returns whether either was updated. */
+function bindingUpdated2(lView, bindingIndex, exp1, exp2) {
+  const different = bindingUpdated(lView, bindingIndex, exp1);
+  return bindingUpdated(lView, bindingIndex + 1, exp2) || different;
 }
-function createSpecialToken(lView, tNode, read) {
-  if (read === ElementRef) {
-    return createElementRef(tNode, lView);
-  } else if (read === TemplateRef) {
-    return createTemplateRef(tNode, lView);
-  } else if (read === ViewContainerRef) {
-    ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ | 12 /* TNodeType.AnyContainer */);
-    return createContainerRef(tNode, lView);
-  } else {
-    ngDevMode && throwError(`Special token to read should be one of ElementRef, TemplateRef or ViewContainerRef but got ${stringify(read)}.`);
-  }
+/** Updates 3 bindings if changed, then returns whether any was updated. */
+function bindingUpdated3(lView, bindingIndex, exp1, exp2, exp3) {
+  const different = bindingUpdated2(lView, bindingIndex, exp1, exp2);
+  return bindingUpdated(lView, bindingIndex + 2, exp3) || different;
 }
-/**
- * A helper function that creates query results for a given view. This function is meant to do the
- * processing once and only once for a given view instance (a set of results for a given view
- * doesn't change).
- */
-function materializeViewResults(tView, lView, tQuery, queryIndex) {
-  const lQuery = lView[QUERIES].queries[queryIndex];
-  if (lQuery.matches === null) {
-    const tViewData = tView.data;
-    const tQueryMatches = tQuery.matches;
-    const result = [];
-    for (let i = 0; tQueryMatches !== null && i < tQueryMatches.length; i += 2) {
-      const matchedNodeIdx = tQueryMatches[i];
-      if (matchedNodeIdx < 0) {
-        // we at the <ng-template> marker which might have results in views created based on this
-        // <ng-template> - those results will be in separate views though, so here we just leave
-        // null as a placeholder
-        result.push(null);
-      } else {
-        ngDevMode && assertIndexInRange(tViewData, matchedNodeIdx);
-        const tNode = tViewData[matchedNodeIdx];
-        result.push(createResultForNode(lView, tNode, tQueryMatches[i + 1], tQuery.metadata.read));
-      }
-    }
-    lQuery.matches = result;
-  }
-  return lQuery.matches;
+/** Updates 4 bindings if changed, then returns whether any was updated. */
+function bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4) {
+  const different = bindingUpdated2(lView, bindingIndex, exp1, exp2);
+  return bindingUpdated2(lView, bindingIndex + 2, exp3, exp4) || different;
 }
-/**
- * A helper function that collects (already materialized) query results from a tree of views,
- * starting with a provided LView.
- */
-function collectQueryResults(tView, lView, queryIndex, result) {
-  const tQuery = tView.queries.getByIndex(queryIndex);
-  const tQueryMatches = tQuery.matches;
-  if (tQueryMatches !== null) {
-    const lViewResults = materializeViewResults(tView, lView, tQuery, queryIndex);
-    for (let i = 0; i < tQueryMatches.length; i += 2) {
-      const tNodeIdx = tQueryMatches[i];
-      if (tNodeIdx > 0) {
-        result.push(lViewResults[i / 2]);
-      } else {
-        const childQueryIndex = tQueryMatches[i + 1];
-        const declarationLContainer = lView[-tNodeIdx];
-        ngDevMode && assertLContainer(declarationLContainer);
-        // collect matches for views inserted in this container
-        for (let i = CONTAINER_HEADER_OFFSET; i < declarationLContainer.length; i++) {
-          const embeddedLView = declarationLContainer[i];
-          if (embeddedLView[DECLARATION_LCONTAINER] === embeddedLView[PARENT]) {
-            collectQueryResults(embeddedLView[TVIEW], embeddedLView, childQueryIndex, result);
-          }
-        }
-        // collect matches for views created from this declaration container and inserted into
-        // different containers
-        if (declarationLContainer[MOVED_VIEWS] !== null) {
-          const embeddedLViews = declarationLContainer[MOVED_VIEWS];
-          for (let i = 0; i < embeddedLViews.length; i++) {
-            const embeddedLView = embeddedLViews[i];
-            collectQueryResults(embeddedLView[TVIEW], embeddedLView, childQueryIndex, result);
-          }
-        }
-      }
-    }
+function templateFirstCreatePass(index, tView, lView, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex) {
+  ngDevMode && assertFirstCreatePass(tView);
+  ngDevMode && ngDevMode.firstCreatePass++;
+  const tViewConsts = tView.consts;
+  // TODO(pk): refactor getOrCreateTNode to have the "create" only version
+  const tNode = getOrCreateTNode(tView, index, 4 /* TNodeType.Container */, tagName || null, getConstant(tViewConsts, attrsIndex));
+  resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex));
+  registerPostOrderHooks(tView, tNode);
+  const embeddedTView = tNode.tView = createTView(2 /* TViewType.Embedded */, tNode, templateFn, decls, vars, tView.directiveRegistry, tView.pipeRegistry, null, tView.schemas, tViewConsts, null /* ssrId */);
+  if (tView.queries !== null) {
+    tView.queries.template(tView, tNode);
+    embeddedTView.queries = tView.queries.embeddedTView(tNode);
   }
-  return result;
-}
-function loadQueryInternal(lView, queryIndex) {
-  ngDevMode && assertDefined(lView[QUERIES], 'LQueries should be defined when trying to load a query');
-  ngDevMode && assertIndexInRange(lView[QUERIES].queries, queryIndex);
-  return lView[QUERIES].queries[queryIndex].queryList;
+  return tNode;
 }
 /**
- * Creates a new instance of LQuery and returns its index in the collection of LQuery objects.
+ * Creates an LContainer for an ng-template (dynamically-inserted view), e.g.
  *
- * @returns index in the collection of LQuery objects
+ * <ng-template #foo>
+ *    <div></div>
+ * </ng-template>
+ *
+ * @param index The index of the container in the data array
+ * @param templateFn Inline template
+ * @param decls The number of nodes, local refs, and pipes for this template
+ * @param vars The number of bindings for this template
+ * @param tagName The name of the container element, if applicable
+ * @param attrsIndex Index of template attributes in the `consts` array.
+ * @param localRefs Index of the local references in the `consts` array.
+ * @param localRefExtractor A function which extracts local-refs values from the template.
+ *        Defaults to the current element associated with the local-ref.
+ *
+ * @codeGenApi
  */
-function createLQuery(tView, lView, flags) {
-  const queryList = new QueryList((flags & 4 /* QueryFlags.emitDistinctChangesOnly */) === 4 /* QueryFlags.emitDistinctChangesOnly */);
-  storeCleanupWithContext(tView, lView, queryList, queryList.destroy);
-  const lQueries = (lView[QUERIES] ??= new LQueries_()).queries;
-  return lQueries.push(new LQuery_(queryList)) - 1;
-}
-function createViewQuery(predicate, flags, read) {
-  ngDevMode && assertNumber(flags, 'Expecting flags');
+function ɵɵtemplate(index, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex, localRefExtractor) {
+  const lView = getLView();
   const tView = getTView();
-  if (tView.firstCreatePass) {
-    createTQuery(tView, new TQueryMetadata_(predicate, flags, read), -1);
-    if ((flags & 2 /* QueryFlags.isStatic */) === 2 /* QueryFlags.isStatic */) {
-      tView.staticViewQueries = true;
-    }
+  const adjustedIndex = index + HEADER_OFFSET;
+  const tNode = tView.firstCreatePass ? templateFirstCreatePass(adjustedIndex, tView, lView, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex) : tView.data[adjustedIndex];
+  setCurrentTNode(tNode, false);
+  const comment = _locateOrCreateContainerAnchor(tView, lView, tNode, index);
+  if (wasLastNodeCreated()) {
+    appendChild(tView, lView, comment, tNode);
   }
-  return createLQuery(tView, getLView(), flags);
-}
-function createContentQuery(directiveIndex, predicate, flags, read) {
-  ngDevMode && assertNumber(flags, 'Expecting flags');
-  const tView = getTView();
-  if (tView.firstCreatePass) {
-    const tNode = getCurrentTNode();
-    createTQuery(tView, new TQueryMetadata_(predicate, flags, read), tNode.index);
-    saveContentQueryAndDirectiveIndex(tView, directiveIndex);
-    if ((flags & 2 /* QueryFlags.isStatic */) === 2 /* QueryFlags.isStatic */) {
-      tView.staticContentQueries = true;
-    }
+  attachPatchData(comment, lView);
+  const lContainer = createLContainer(comment, lView, comment, tNode);
+  lView[adjustedIndex] = lContainer;
+  addToViewTree(lView, lContainer);
+  // If hydration is enabled, looks up dehydrated views in the DOM
+  // using hydration annotation info and stores those views on LContainer.
+  // In client-only mode, this function is a noop.
+  populateDehydratedViewsInLContainer(lContainer, tNode, lView);
+  if (isDirectiveHost(tNode)) {
+    createDirectivesInstances(tView, lView, tNode);
   }
-  return createLQuery(tView, getLView(), flags);
-}
-/** Splits multiple selectors in the locator. */
-function splitQueryMultiSelectors(locator) {
-  return locator.split(',').map(s => s.trim());
-}
-function createTQuery(tView, metadata, nodeIndex) {
-  if (tView.queries === null) tView.queries = new TQueries_();
-  tView.queries.track(new TQuery_(metadata, nodeIndex));
-}
-function saveContentQueryAndDirectiveIndex(tView, directiveIndex) {
-  const tViewContentQueries = tView.contentQueries || (tView.contentQueries = []);
-  const lastSavedDirectiveIndex = tViewContentQueries.length ? tViewContentQueries[tViewContentQueries.length - 1] : -1;
-  if (directiveIndex !== lastSavedDirectiveIndex) {
-    tViewContentQueries.push(tView.queries.length - 1, directiveIndex);
+  if (localRefsIndex != null) {
+    saveResolvedLocalsInData(lView, tNode, localRefExtractor);
   }
+  return ɵɵtemplate;
 }
-function getTQuery(tView, index) {
-  ngDevMode && assertDefined(tView.queries, 'TQueries must be defined to retrieve a TQuery');
-  return tView.queries.getByIndex(index);
-}
+let _locateOrCreateContainerAnchor = createContainerAnchorImpl;
 /**
- * A helper function collecting results from all the views where a given query was active.
- * @param lView
- * @param queryIndex
+ * Regular creation mode for LContainers and their anchor (comment) nodes.
  */
-function getQueryResults(lView, queryIndex) {
-  const tView = lView[TVIEW];
-  const tQuery = getTQuery(tView, queryIndex);
-  return tQuery.crossesNgTemplate ? collectQueryResults(tView, lView, queryIndex, []) : materializeViewResults(tView, lView, tQuery, queryIndex);
+function createContainerAnchorImpl(tView, lView, tNode, index) {
+  lastNodeWasCreated(true);
+  return lView[RENDERER].createComment(ngDevMode ? 'container' : '');
 }
-
 /**
- * A signal factory function in charge of creating a new computed signal capturing query
- * results. This centralized creation function is used by all types of queries (child / children,
- * required / optional).
- *
- * @param firstOnly indicates if all or only the first result should be returned
- * @param required indicates if at least one result is required
- * @returns a read-only signal with query results
+ * Enables hydration code path (to lookup existing elements in DOM)
+ * in addition to the regular creation mode for LContainers and their
+ * anchor (comment) nodes.
  */
-function createQuerySignalFn(firstOnly, required) {
-  let node;
-  const signalFn = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.createComputed)(() => {
-    // A dedicated signal that increments its value every time a query changes its dirty status. By
-    // using this signal we can implement a query as computed and avoid creation of a specialized
-    // reactive node type. Please note that a query gets marked dirty under the following
-    // circumstances:
-    // - a view (where a query is active) finished its first creation pass;
-    // - a new view is inserted / deleted and it impacts query results.
-    node._dirtyCounter();
-    const value = refreshSignalQuery(node, firstOnly);
-    if (required && value === undefined) {
-      throw new RuntimeError(-951 /* RuntimeErrorCode.REQUIRED_QUERY_NO_VALUE */, ngDevMode && 'Child query result is required but no value is available.');
-    }
-    return value;
-  });
-  node = signalFn[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL];
-  node._dirtyCounter = signal(0);
-  node._flatValue = undefined;
-  if (ngDevMode) {
-    signalFn.toString = () => `[Query Signal]`;
+function locateOrCreateContainerAnchorImpl(tView, lView, tNode, index) {
+  const hydrationInfo = lView[HYDRATION];
+  const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1() || isDisconnectedNode$1(hydrationInfo, index);
+  lastNodeWasCreated(isNodeCreationMode);
+  // Regular creation mode.
+  if (isNodeCreationMode) {
+    return createContainerAnchorImpl(tView, lView, tNode, index);
   }
-  return signalFn;
-}
-function createSingleResultOptionalQuerySignalFn() {
-  return createQuerySignalFn( /* firstOnly */true, /* required */false);
-}
-function createSingleResultRequiredQuerySignalFn() {
-  return createQuerySignalFn( /* firstOnly */true, /* required */true);
-}
-function createMultiResultQuerySignalFn() {
-  return createQuerySignalFn( /* firstOnly */false, /* required */false);
-}
-function bindQueryToSignal(target, queryIndex) {
-  const node = target[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL];
-  node._lView = getLView();
-  node._queryIndex = queryIndex;
-  node._queryList = loadQueryInternal(node._lView, queryIndex);
-  node._queryList.onDirty(() => node._dirtyCounter.update(v => v + 1));
-}
-function refreshSignalQuery(node, firstOnly) {
-  const lView = node._lView;
-  const queryIndex = node._queryIndex;
-  // There are 2 conditions under which we want to return "empty" results instead of the ones
-  // collected by a query:
-  //
-  // 1) a given query wasn't created yet (this is a period of time between the directive creation
-  // and execution of the query creation function) - in this case a query doesn't exist yet and we
-  // don't have any results to return.
+  const ssrId = hydrationInfo.data[TEMPLATES]?.[index] ?? null;
+  // Apply `ssrId` value to the underlying TView if it was not previously set.
   //
-  // 2) we are in the process of constructing a view (the first
-  // creation pass didn't finish) and a query might have partial results, but we don't want to
-  // return those - instead we do delay results collection until all nodes had a chance of matching
-  // and we can present consistent, "atomic" (on a view level) results.
-  if (lView === undefined || queryIndex === undefined || lView[FLAGS] & 4 /* LViewFlags.CreationMode */) {
-    return firstOnly ? undefined : EMPTY_ARRAY;
-  }
-  const queryList = loadQueryInternal(lView, queryIndex);
-  const results = getQueryResults(lView, queryIndex);
-  queryList.reset(results, unwrapElementRef);
-  if (firstOnly) {
-    return queryList.first;
-  } else {
-    // TODO: remove access to the private _changesDetected field by abstracting / removing usage of
-    // QueryList in the signal-based queries (perf follow-up)
-    const resultChanged = queryList._changesDetected;
-    if (resultChanged || node._flatValue === undefined) {
-      return node._flatValue = queryList.toArray();
+  // There might be situations when the same component is present in a template
+  // multiple times and some instances are opted-out of using hydration via
+  // `ngSkipHydration` attribute. In this scenario, at the time a TView is created,
+  // the `ssrId` might be `null` (if the first component is opted-out of hydration).
+  // The code below makes sure that the `ssrId` is applied to the TView if it's still
+  // `null` and verifies we never try to override it with a different value.
+  if (ssrId !== null && tNode.tView !== null) {
+    if (tNode.tView.ssrId === null) {
+      tNode.tView.ssrId = ssrId;
+    } else {
+      ngDevMode && assertEqual(tNode.tView.ssrId, ssrId, 'Unexpected value of the `ssrId` for this TView');
     }
-    return node._flatValue;
   }
+  // Hydration mode, looking up existing elements in DOM.
+  const currentRNode = locateNextRNode(hydrationInfo, tView, lView, tNode);
+  ngDevMode && validateNodeExists(currentRNode, lView, tNode);
+  setSegmentHead(hydrationInfo, index, currentRNode);
+  const viewContainerSize = calcSerializedContainerSize(hydrationInfo, index);
+  const comment = siblingAfter(viewContainerSize, currentRNode);
+  if (ngDevMode) {
+    validateMatchingNode(comment, Node.COMMENT_NODE, null, lView, tNode);
+    markRNodeAsClaimedByHydration(comment);
+  }
+  return comment;
 }
-function viewChildFn(locator, opts) {
-  return createSingleResultOptionalQuerySignalFn();
-}
-function viewChildRequiredFn(locator, opts) {
-  return createSingleResultRequiredQuerySignalFn();
+function enableLocateOrCreateContainerAnchorImpl() {
+  _locateOrCreateContainerAnchor = locateOrCreateContainerAnchorImpl;
 }
+
 /**
- * Initializes a view child query.
- *
- * Consider using `viewChild.required` for queries that should always match.
- *
- * @usageNotes
- * Create a child query in your component by declaring a
- * class field and initializing it with the `viewChild()` function.
- *
- * ```ts
- * @Component({template: '<div #el></div><my-component #cmp />'})
- * export class TestComponent {
- *   divEl = viewChild<ElementRef>('el');                   // Signal<ElementRef|undefined>
- *   divElRequired = viewChild.required<ElementRef>('el');  // Signal<ElementRef>
- *   cmp = viewChild(MyComponent);                          // Signal<MyComponent|undefined>
- *   cmpRequired = viewChild.required(MyComponent);         // Signal<MyComponent>
- * }
- * ```
+ * Describes the state of defer block dependency loading.
+ */
+var DeferDependenciesLoadingState = /*#__PURE__*/function (DeferDependenciesLoadingState) {
+  /** Initial state, dependency loading is not yet triggered */
+  DeferDependenciesLoadingState[DeferDependenciesLoadingState["NOT_STARTED"] = 0] = "NOT_STARTED";
+  /** Dependency loading is in progress */
+  DeferDependenciesLoadingState[DeferDependenciesLoadingState["IN_PROGRESS"] = 1] = "IN_PROGRESS";
+  /** Dependency loading has completed successfully */
+  DeferDependenciesLoadingState[DeferDependenciesLoadingState["COMPLETE"] = 2] = "COMPLETE";
+  /** Dependency loading has failed */
+  DeferDependenciesLoadingState[DeferDependenciesLoadingState["FAILED"] = 3] = "FAILED";
+  return DeferDependenciesLoadingState;
+}(DeferDependenciesLoadingState || {});
+/** Slot index where `minimum` parameter value is stored. */
+const MINIMUM_SLOT = 0;
+/** Slot index where `after` parameter value is stored. */
+const LOADING_AFTER_SLOT = 1;
+/**
+ * Describes the current state of this defer block instance.
  *
+ * @publicApi
  * @developerPreview
  */
-const viewChild = /*#__PURE__*/(() => {
-  // Note: This may be considered a side-effect, but nothing will depend on
-  // this assignment, unless this `viewChild` constant export is accessed. It's a
-  // self-contained side effect that is local to the user facing `viewChild` export.
-  viewChildFn.required = viewChildRequiredFn;
-  return viewChildFn;
-})();
+var DeferBlockState = /*#__PURE__*/function (DeferBlockState) {
+  /** The placeholder block content is rendered */
+  DeferBlockState[DeferBlockState["Placeholder"] = 0] = "Placeholder";
+  /** The loading block content is rendered */
+  DeferBlockState[DeferBlockState["Loading"] = 1] = "Loading";
+  /** The main content block content is rendered */
+  DeferBlockState[DeferBlockState["Complete"] = 2] = "Complete";
+  /** The error block content is rendered */
+  DeferBlockState[DeferBlockState["Error"] = 3] = "Error";
+  return DeferBlockState;
+}(DeferBlockState || {});
 /**
- * Initializes a view children query.
- *
- * Query results are represented as a signal of a read-only collection containing all matched
- * elements.
- *
- * @usageNotes
- * Create a children query in your component by declaring a
- * class field and initializing it with the `viewChildren()` function.
+ * Describes the initial state of this defer block instance.
  *
- * ```ts
- * @Component({...})
- * export class TestComponent {
- *   divEls = viewChildren<ElementRef>('el');   // Signal<ReadonlyArray<ElementRef>>
- * }
- * ```
+ * Note: this state is internal only and *must* be represented
+ * with a number lower than any value in the `DeferBlockState` enum.
  */
-function viewChildren(locator, opts) {
-  return createMultiResultQuerySignalFn();
-}
-function contentChildFn(locator, opts) {
-  return createSingleResultOptionalQuerySignalFn();
-}
-function contentChildRequiredFn(locator, opts) {
-  return createSingleResultRequiredQuerySignalFn();
-}
+var DeferBlockInternalState = /*#__PURE__*/function (DeferBlockInternalState) {
+  /** Initial state. Nothing is rendered yet. */
+  DeferBlockInternalState[DeferBlockInternalState["Initial"] = -1] = "Initial";
+  return DeferBlockInternalState;
+}(DeferBlockInternalState || {});
+const NEXT_DEFER_BLOCK_STATE = 0;
+// Note: it's *important* to keep the state in this slot, because this slot
+// is used by runtime logic to differentiate between LViews, LContainers and
+// other types (see `isLView` and `isLContainer` functions). In case of defer
+// blocks, this slot would always be a number.
+const DEFER_BLOCK_STATE = 1;
+const STATE_IS_FROZEN_UNTIL = 2;
+const LOADING_AFTER_CLEANUP_FN = 3;
+const TRIGGER_CLEANUP_FNS = 4;
+const PREFETCH_TRIGGER_CLEANUP_FNS = 5;
 /**
- * Initializes a content child query. Consider using `contentChild.required` for queries that should
- * always match.
- *
- * @usageNotes
- * Create a child query in your component by declaring a
- * class field and initializing it with the `contentChild()` function.
+ * Options for configuring defer blocks behavior.
+ * @publicApi
+ * @developerPreview
+ */
+var DeferBlockBehavior = /*#__PURE__*/function (DeferBlockBehavior) {
+  /**
+   * Manual triggering mode for defer blocks. Provides control over when defer blocks render
+   * and which state they render.
+   */
+  DeferBlockBehavior[DeferBlockBehavior["Manual"] = 0] = "Manual";
+  /**
+   * Playthrough mode for defer blocks. This mode behaves like defer blocks would in a browser.
+   * This is the default behavior in test environments.
+   */
+  DeferBlockBehavior[DeferBlockBehavior["Playthrough"] = 1] = "Playthrough";
+  return DeferBlockBehavior;
+}(DeferBlockBehavior || {});
+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
  *
- * ```ts
- * @Component({...})
- * export class TestComponent {
- *   headerEl = contentChild<ElementRef>('h');                    // Signal<ElementRef|undefined>
- *   headerElElRequired = contentChild.required<ElementRef>('h'); // Signal<ElementRef>
- *   header = contentChild(MyHeader);                             // Signal<MyHeader|undefined>
- *   headerRequired = contentChild.required(MyHeader);            // Signal<MyHeader>
- * }
- * ```
+ * 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
  */
-const contentChild = /*#__PURE__*/(() => {
-  // Note: This may be considered a side-effect, but nothing will depend on
-  // this assignment, unless this `viewChild` constant export is accessed. It's a
-  // self-contained side effect that is local to the user facing `viewChild` export.
-  contentChildFn.required = contentChildRequiredFn;
-  return contentChildFn;
-})();
 /**
- * Initializes a content children query.
- *
- * Query results are represented as a signal of a read-only collection containing all matched
- * elements.
- *
- * @usageNotes
- * Create a children query in your component by declaring a
- * class field and initializing it with the `contentChildren()` function.
- *
- * ```ts
- * @Component({...})
- * export class TestComponent {
- *   headerEl = contentChildren<ElementRef>('h');   // Signal<ReadonlyArray<ElementRef>>
- * }
- * ```
+ * Registers a cleanup function associated with a prefetching trigger
+ * or a regular trigger of a defer block.
  */
-function contentChildren(locator, opts) {
-  return createMultiResultQuerySignalFn();
+function storeTriggerCleanupFn(type, lDetails, cleanupFn) {
+  const key = type === 1 /* TriggerType.Prefetch */ ? PREFETCH_TRIGGER_CLEANUP_FNS : TRIGGER_CLEANUP_FNS;
+  if (lDetails[key] === null) {
+    lDetails[key] = [];
+  }
+  lDetails[key].push(cleanupFn);
 }
-
 /**
- * Creates a model signal.
- *
- * @param initialValue The initial value.
- *   Can be set to {@link REQUIRED_UNSET_VALUE} for required model signals.
- * @param options Additional options for the model.
+ * Invokes registered cleanup functions either for prefetch or for regular triggers.
  */
-function createModelSignal(initialValue) {
-  const subscriptions = [];
-  const node = Object.create(INPUT_SIGNAL_NODE);
-  node.value = initialValue;
-  function getter() {
-    (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.producerAccessed)(node);
-    assertModelSet(node.value);
-    return node.value;
-  }
-  function notifySubscribers(value) {
-    for (let i = 0; i < subscriptions.length; i++) {
-      subscriptions[i](value);
-    }
-  }
-  getter[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL] = node;
-  getter.asReadonly = () => getter();
-  getter.set = newValue => {
-    if (!node.equal(node.value, newValue)) {
-      (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.signalSetFn)(node, newValue);
-      notifySubscribers(newValue);
+function invokeTriggerCleanupFns(type, lDetails) {
+  const key = type === 1 /* TriggerType.Prefetch */ ? PREFETCH_TRIGGER_CLEANUP_FNS : TRIGGER_CLEANUP_FNS;
+  const cleanupFns = lDetails[key];
+  if (cleanupFns !== null) {
+    for (const cleanupFn of cleanupFns) {
+      cleanupFn();
     }
-  };
-  getter.update = updateFn => {
-    assertModelSet(node.value);
-    getter.set(updateFn(node.value));
-  };
-  getter.subscribe = callback => {
-    subscriptions.push(callback);
-    return () => {
-      const index = subscriptions.indexOf(callback);
-      if (index > -1) {
-        subscriptions.splice(index, 1);
-      }
-    };
-  };
-  if (ngDevMode) {
-    getter.toString = () => `[Model Signal: ${getter()}]`;
+    lDetails[key] = null;
   }
-  return getter;
 }
-/** Asserts that a model's value is set. */
-function assertModelSet(value) {
-  if (value === REQUIRED_UNSET_VALUE) {
-    throw new RuntimeError(-952 /* RuntimeErrorCode.REQUIRED_MODEL_NO_VALUE */, ngDevMode && 'Model is required but no value is available yet.');
-  }
+/**
+ * Invokes registered cleanup functions for both prefetch and regular triggers.
+ */
+function invokeAllTriggerCleanupFns(lDetails) {
+  invokeTriggerCleanupFns(1 /* TriggerType.Prefetch */, lDetails);
+  invokeTriggerCleanupFns(0 /* TriggerType.Regular */, lDetails);
 }
-function modelFunction(initialValue) {
-  return createModelSignal(initialValue);
+
+// Public API for Zone
+
+/**
+ * Calculates a data slot index for defer block info (either static or
+ * instance-specific), given an index of a defer instruction.
+ */
+function getDeferBlockDataIndex(deferBlockIndex) {
+  // Instance state is located at the *next* position
+  // after the defer block slot in an LView or TView.data.
+  return deferBlockIndex + 1;
 }
-function modelRequiredFunction() {
-  return createModelSignal(REQUIRED_UNSET_VALUE);
+/** Retrieves a defer block state from an LView, given a TNode that represents a block. */
+function getLDeferBlockDetails(lView, tNode) {
+  const tView = lView[TVIEW];
+  const slotIndex = getDeferBlockDataIndex(tNode.index);
+  ngDevMode && assertIndexInDeclRange(tView, slotIndex);
+  return lView[slotIndex];
+}
+/** Stores a defer block instance state in LView. */
+function setLDeferBlockDetails(lView, deferBlockIndex, lDetails) {
+  const tView = lView[TVIEW];
+  const slotIndex = getDeferBlockDataIndex(deferBlockIndex);
+  ngDevMode && assertIndexInDeclRange(tView, slotIndex);
+  lView[slotIndex] = lDetails;
+}
+/** Retrieves static info about a defer block, given a TView and a TNode that represents a block. */
+function getTDeferBlockDetails(tView, tNode) {
+  const slotIndex = getDeferBlockDataIndex(tNode.index);
+  ngDevMode && assertIndexInDeclRange(tView, slotIndex);
+  return tView.data[slotIndex];
+}
+/** Stores a defer block static info in `TView.data`. */
+function setTDeferBlockDetails(tView, deferBlockIndex, deferBlockConfig) {
+  const slotIndex = getDeferBlockDataIndex(deferBlockIndex);
+  ngDevMode && assertIndexInDeclRange(tView, slotIndex);
+  tView.data[slotIndex] = deferBlockConfig;
+}
+function getTemplateIndexForState(newState, hostLView, tNode) {
+  const tView = hostLView[TVIEW];
+  const tDetails = getTDeferBlockDetails(tView, tNode);
+  switch (newState) {
+    case DeferBlockState.Complete:
+      return tDetails.primaryTmplIndex;
+    case DeferBlockState.Loading:
+      return tDetails.loadingTmplIndex;
+    case DeferBlockState.Error:
+      return tDetails.errorTmplIndex;
+    case DeferBlockState.Placeholder:
+      return tDetails.placeholderTmplIndex;
+    default:
+      ngDevMode && throwError(`Unexpected defer block state: ${newState}`);
+      return null;
+  }
 }
 /**
- * `model` declares a writeable signal that is exposed as an input/output pair on the containing
- * directive. The input name is taken either from the class member or from the `alias` option.
- * The output name is generated by taking the input name and appending `Change`.
- *
- * Initializes a model with an initial value. If no explicit value
- * is specified, Angular will use `undefined`.
- *
- * Consider using `model.required` for models that don't need an
- * initial value.
- *
- * @usageNotes
- * Initialize a model in your directive or component by declaring a
- * class field and initializing it with the `model()` or `model.required()`
- * function.
- *
- * ```ts
- * @Directive({..})
- * export class MyDir {
- *   firstName = model<string>();            // string|undefined
- *   lastName = model.required<string>();    // string
- *   age = model(0);                         // number
- * }
- * ```
- *
- * @developerPreview
+ * Returns a minimum amount of time that a given state should be rendered for,
+ * taking into account `minimum` parameter value. If the `minimum` value is
+ * not specified - returns `null`.
  */
-const model = /*#__PURE__*/(() => {
-  // Note: This may be considered a side-effect, but nothing will depend on
-  // this assignment, unless this `model` constant export is accessed. It's a
-  // self-contained side effect that is local to the user facing `model` export.
-  modelFunction.required = modelRequiredFunction;
-  return modelFunction;
-})();
-
-// Stores the default value of `emitDistinctChangesOnly` when the `emitDistinctChangesOnly` is not
-// explicitly set.
-const emitDistinctChangesOnlyDefaultValue = true;
+function getMinimumDurationForState(tDetails, currentState) {
+  if (currentState === DeferBlockState.Placeholder) {
+    return tDetails.placeholderBlockConfig?.[MINIMUM_SLOT] ?? null;
+  } else if (currentState === DeferBlockState.Loading) {
+    return tDetails.loadingBlockConfig?.[MINIMUM_SLOT] ?? null;
+  }
+  return null;
+}
+/** Retrieves the value of the `after` parameter on the @loading block. */
+function getLoadingBlockAfter(tDetails) {
+  return tDetails.loadingBlockConfig?.[LOADING_AFTER_SLOT] ?? null;
+}
 /**
- * Base class for query metadata.
- *
- * @see {@link ContentChildren}
- * @see {@link ContentChild}
- * @see {@link ViewChildren}
- * @see {@link ViewChild}
- *
- * @publicApi
+ * Adds downloaded dependencies into a directive or a pipe registry,
+ * making sure that a dependency doesn't yet exist in the registry.
  */
-class Query {}
+function addDepsToRegistry(currentDeps, newDeps) {
+  if (!currentDeps || currentDeps.length === 0) {
+    return newDeps;
+  }
+  const currentDepSet = new Set(currentDeps);
+  for (const dep of newDeps) {
+    currentDepSet.add(dep);
+  }
+  // If `currentDeps` is the same length, there were no new deps and can
+  // return the original array.
+  return currentDeps.length === currentDepSet.size ? currentDeps : Array.from(currentDepSet);
+}
+/** Retrieves a TNode that represents main content of a defer block. */
+function getPrimaryBlockTNode(tView, tDetails) {
+  const adjustedIndex = tDetails.primaryTmplIndex + HEADER_OFFSET;
+  return getTNode(tView, adjustedIndex);
+}
 /**
- * ContentChildren decorator and metadata.
- *
- *
- * @Annotation
- * @publicApi
+ * Asserts whether all dependencies for a defer block are loaded.
+ * Always run this function (in dev mode) before rendering a defer
+ * block in completed state.
  */
-const ContentChildren = /*#__PURE__*/makePropDecorator('ContentChildren', (selector, opts = {}) => ({
-  selector,
-  first: false,
-  isViewQuery: false,
-  descendants: false,
-  emitDistinctChangesOnly: emitDistinctChangesOnlyDefaultValue,
-  ...opts
-}), Query);
+function assertDeferredDependenciesLoaded(tDetails) {
+  assertEqual(tDetails.loadingState, DeferDependenciesLoadingState.COMPLETE, 'Expecting all deferred dependencies to be loaded.');
+}
 /**
- * ContentChild decorator and metadata.
- *
+ * Determines if a given value matches the expected structure of a defer block
  *
- * @Annotation
+ * We can safely rely on the primaryTmplIndex because every defer block requires
+ * that a primary template exists. All the other template options are optional.
+ */
+function isTDeferBlockDetails(value) {
+  return value !== null && typeof value === 'object' && typeof value.primaryTmplIndex === 'number';
+}
+
+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
  *
- * @publicApi
+ * 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
  */
-const ContentChild = /*#__PURE__*/makePropDecorator('ContentChild', (selector, opts = {}) => ({
-  selector,
-  first: true,
-  isViewQuery: false,
-  descendants: true,
-  ...opts
-}), Query);
-/**
- * ViewChildren decorator and metadata.
- *
- * @Annotation
- * @publicApi
- */
-const ViewChildren = /*#__PURE__*/makePropDecorator('ViewChildren', (selector, opts = {}) => ({
-  selector,
-  first: false,
-  isViewQuery: true,
-  descendants: true,
-  emitDistinctChangesOnly: emitDistinctChangesOnlyDefaultValue,
-  ...opts
-}), Query);
-/**
- * ViewChild decorator and metadata.
- *
- * @Annotation
- * @publicApi
- */
-const ViewChild = /*#__PURE__*/makePropDecorator('ViewChild', (selector, opts) => ({
-  selector,
-  first: true,
-  isViewQuery: true,
-  descendants: true,
-  ...opts
-}), Query);
-
+/** Configuration object used to register passive and capturing events. */
+const eventListenerOptions = {
+  passive: true,
+  capture: true
+};
+/** Keeps track of the currently-registered `on hover` triggers. */
+const hoverTriggers = /*#__PURE__*/new WeakMap();
+/** Keeps track of the currently-registered `on interaction` triggers. */
+const interactionTriggers = /*#__PURE__*/new WeakMap();
+/** Currently-registered `viewport` triggers. */
+const viewportTriggers = /*#__PURE__*/new WeakMap();
+/** Names of the events considered as interaction events. */
+const interactionEventNames = ['click', 'keydown'];
+/** Names of the events considered as hover events. */
+const hoverEventNames = ['mouseenter', 'focusin'];
+/** `IntersectionObserver` used to observe `viewport` triggers. */
+let intersectionObserver = null;
+/** Number of elements currently observed with `viewport` triggers. */
+let observedViewportElements = 0;
+/** Object keeping track of registered callbacks for a deferred block trigger. */
+class DeferEventEntry {
+  constructor() {
+    this.callbacks = new Set();
+    this.listener = () => {
+      for (const callback of this.callbacks) {
+        callback();
+      }
+    };
+  }
+}
 /**
- * Used to resolve resource URLs on `@Component` when used with JIT compilation.
- *
- * Example:
- * ```
- * @Component({
- *   selector: 'my-comp',
- *   templateUrl: 'my-comp.html', // This requires asynchronous resolution
- * })
- * class MyComponent{
- * }
- *
- * // Calling `renderComponent` will fail because `renderComponent` is a synchronous process
- * // and `MyComponent`'s `@Component.templateUrl` needs to be resolved asynchronously.
- *
- * // Calling `resolveComponentResources()` will resolve `@Component.templateUrl` into
- * // `@Component.template`, which allows `renderComponent` to proceed in a synchronous manner.
- *
- * // Use browser's `fetch()` function as the default resource resolution strategy.
- * resolveComponentResources(fetch).then(() => {
- *   // After resolution all URLs have been converted into `template` strings.
- *   renderComponent(MyComponent);
- * });
- *
- * ```
- *
- * NOTE: In AOT the resolution happens during compilation, and so there should be no need
- * to call this method outside JIT mode.
- *
- * @param resourceResolver a function which is responsible for returning a `Promise` to the
- * contents of the resolved URL. Browser's `fetch()` method is a good default implementation.
+ * Registers an interaction trigger.
+ * @param trigger Element that is the trigger.
+ * @param callback Callback to be invoked when the trigger is interacted with.
  */
-function resolveComponentResources(resourceResolver) {
-  // Store all promises which are fetching the resources.
-  const componentResolved = [];
-  // Cache so that we don't fetch the same resource more than once.
-  const urlMap = new Map();
-  function cachedResourceResolve(url) {
-    let promise = urlMap.get(url);
-    if (!promise) {
-      const resp = resourceResolver(url);
-      urlMap.set(url, promise = resp.then(unwrapResponse));
+function onInteraction(trigger, callback) {
+  let entry = interactionTriggers.get(trigger);
+  // If this is the first entry for this element, add the listeners.
+  if (!entry) {
+    // Note that managing events centrally like this lends itself well to using global
+    // event delegation. It currently does delegation at the element level, rather than the
+    // document level, because:
+    // 1. Global delegation is the most effective when there are a lot of events being registered
+    // at the same time. Deferred blocks are unlikely to be used in such a way.
+    // 2. Matching events to their target isn't free. For each `click` and `keydown` event we
+    // would have look through all the triggers and check if the target either is the element
+    // itself or it's contained within the element. Given that `click` and `keydown` are some
+    // of the most common events, this may end up introducing a lot of runtime overhead.
+    // 3. We're still registering only two events per element, no matter how many deferred blocks
+    // are referencing it.
+    entry = new DeferEventEntry();
+    interactionTriggers.set(trigger, entry);
+    for (const name of interactionEventNames) {
+      trigger.addEventListener(name, entry.listener, eventListenerOptions);
     }
-    return promise;
   }
-  componentResourceResolutionQueue.forEach((component, type) => {
-    const promises = [];
-    if (component.templateUrl) {
-      promises.push(cachedResourceResolve(component.templateUrl).then(template => {
-        component.template = template;
-      }));
-    }
-    const styles = typeof component.styles === 'string' ? [component.styles] : component.styles || [];
-    component.styles = styles;
-    if (component.styleUrl && component.styleUrls?.length) {
-      throw new Error('@Component cannot define both `styleUrl` and `styleUrls`. ' + 'Use `styleUrl` if the component has one stylesheet, or `styleUrls` if it has multiple');
-    } else if (component.styleUrls?.length) {
-      const styleOffset = component.styles.length;
-      const styleUrls = component.styleUrls;
-      component.styleUrls.forEach((styleUrl, index) => {
-        styles.push(''); // pre-allocate array.
-        promises.push(cachedResourceResolve(styleUrl).then(style => {
-          styles[styleOffset + index] = style;
-          styleUrls.splice(styleUrls.indexOf(styleUrl), 1);
-          if (styleUrls.length == 0) {
-            component.styleUrls = undefined;
-          }
-        }));
-      });
-    } else if (component.styleUrl) {
-      promises.push(cachedResourceResolve(component.styleUrl).then(style => {
-        styles.push(style);
-        component.styleUrl = undefined;
-      }));
+  entry.callbacks.add(callback);
+  return () => {
+    const {
+      callbacks,
+      listener
+    } = entry;
+    callbacks.delete(callback);
+    if (callbacks.size === 0) {
+      interactionTriggers.delete(trigger);
+      for (const name of interactionEventNames) {
+        trigger.removeEventListener(name, listener, eventListenerOptions);
+      }
     }
-    const fullyResolved = Promise.all(promises).then(() => componentDefResolved(type));
-    componentResolved.push(fullyResolved);
-  });
-  clearResolutionOfComponentResourcesQueue();
-  return Promise.all(componentResolved).then(() => undefined);
+  };
 }
-let componentResourceResolutionQueue = /*#__PURE__*/new Map();
-// Track when existing ɵcmp for a Type is waiting on resources.
-const componentDefPendingResolution = /*#__PURE__*/new Set();
-function maybeQueueResolutionOfComponentResources(type, metadata) {
-  if (componentNeedsResolution(metadata)) {
-    componentResourceResolutionQueue.set(type, metadata);
-    componentDefPendingResolution.add(type);
+/**
+ * Registers a hover trigger.
+ * @param trigger Element that is the trigger.
+ * @param callback Callback to be invoked when the trigger is hovered over.
+ */
+function onHover(trigger, callback) {
+  let entry = hoverTriggers.get(trigger);
+  // If this is the first entry for this element, add the listener.
+  if (!entry) {
+    entry = new DeferEventEntry();
+    hoverTriggers.set(trigger, entry);
+    for (const name of hoverEventNames) {
+      trigger.addEventListener(name, entry.listener, eventListenerOptions);
+    }
   }
+  entry.callbacks.add(callback);
+  return () => {
+    const {
+      callbacks,
+      listener
+    } = entry;
+    callbacks.delete(callback);
+    if (callbacks.size === 0) {
+      for (const name of hoverEventNames) {
+        trigger.removeEventListener(name, listener, eventListenerOptions);
+      }
+      hoverTriggers.delete(trigger);
+    }
+  };
 }
-function isComponentDefPendingResolution(type) {
-  return componentDefPendingResolution.has(type);
-}
-function componentNeedsResolution(component) {
-  return !!(component.templateUrl && !component.hasOwnProperty('template') || component.styleUrls && component.styleUrls.length || component.styleUrl);
-}
-function clearResolutionOfComponentResourcesQueue() {
-  const old = componentResourceResolutionQueue;
-  componentResourceResolutionQueue = new Map();
-  return old;
-}
-function restoreComponentResolutionQueue(queue) {
-  componentDefPendingResolution.clear();
-  queue.forEach((_, type) => componentDefPendingResolution.add(type));
-  componentResourceResolutionQueue = queue;
-}
-function isComponentResourceResolutionQueueEmpty() {
-  return componentResourceResolutionQueue.size === 0;
-}
-function unwrapResponse(response) {
-  return typeof response == 'string' ? response : response.text();
-}
-function componentDefResolved(type) {
-  componentDefPendingResolution.delete(type);
-}
-
 /**
- * Map of module-id to the corresponding NgModule.
+ * Registers a viewport trigger.
+ * @param trigger Element that is the trigger.
+ * @param callback Callback to be invoked when the trigger comes into the viewport.
+ * @param injector Injector that can be used by the trigger to resolve DI tokens.
  */
-const modules = /*#__PURE__*/new Map();
+function onViewport(trigger, callback, injector) {
+  const ngZone = injector.get(NgZone);
+  let entry = viewportTriggers.get(trigger);
+  intersectionObserver = intersectionObserver || ngZone.runOutsideAngular(() => {
+    return new IntersectionObserver(entries => {
+      for (const current of entries) {
+        // Only invoke the callbacks if the specific element is intersecting.
+        if (current.isIntersecting && viewportTriggers.has(current.target)) {
+          ngZone.run(viewportTriggers.get(current.target).listener);
+        }
+      }
+    });
+  });
+  if (!entry) {
+    entry = new DeferEventEntry();
+    ngZone.runOutsideAngular(() => intersectionObserver.observe(trigger));
+    viewportTriggers.set(trigger, entry);
+    observedViewportElements++;
+  }
+  entry.callbacks.add(callback);
+  return () => {
+    // It's possible that a different cleanup callback fully removed this element already.
+    if (!viewportTriggers.has(trigger)) {
+      return;
+    }
+    entry.callbacks.delete(callback);
+    if (entry.callbacks.size === 0) {
+      intersectionObserver?.unobserve(trigger);
+      viewportTriggers.delete(trigger);
+      observedViewportElements--;
+    }
+    if (observedViewportElements === 0) {
+      intersectionObserver?.disconnect();
+      intersectionObserver = null;
+    }
+  };
+}
 /**
- * Whether to check for duplicate NgModule registrations.
- *
- * This can be disabled for testing.
+ * Helper function to get the LView in which a deferred block's trigger is rendered.
+ * @param deferredHostLView LView in which the deferred block is defined.
+ * @param deferredTNode TNode defining the deferred block.
+ * @param walkUpTimes Number of times to go up in the view hierarchy to find the trigger's view.
+ *   A negative value means that the trigger is inside the block's placeholder, while an undefined
+ *   value means that the trigger is in the same LView as the deferred block.
  */
-let checkForDuplicateNgModules = true;
-function assertSameOrNotExisting(id, type, incoming) {
-  if (type && type !== incoming && checkForDuplicateNgModules) {
-    throw new Error(`Duplicate module registered for ${id} - ${stringify(type)} vs ${stringify(type.name)}`);
+function getTriggerLView(deferredHostLView, deferredTNode, walkUpTimes) {
+  // The trigger is in the same view, we don't need to traverse.
+  if (walkUpTimes == null) {
+    return deferredHostLView;
+  }
+  // A positive value or zero means that the trigger is in a parent view.
+  if (walkUpTimes >= 0) {
+    return walkUpViews(walkUpTimes, deferredHostLView);
+  }
+  // If the value is negative, it means that the trigger is inside the placeholder.
+  const deferredContainer = deferredHostLView[deferredTNode.index];
+  ngDevMode && assertLContainer(deferredContainer);
+  const triggerLView = deferredContainer[CONTAINER_HEADER_OFFSET] ?? null;
+  // We need to null check, because the placeholder might not have been rendered yet.
+  if (ngDevMode && triggerLView !== null) {
+    const lDetails = getLDeferBlockDetails(deferredHostLView, deferredTNode);
+    const renderedState = lDetails[DEFER_BLOCK_STATE];
+    assertEqual(renderedState, DeferBlockState.Placeholder, 'Expected a placeholder to be rendered in this defer block.');
+    assertLView(triggerLView);
   }
+  return triggerLView;
 }
 /**
- * Adds the given NgModule type to Angular's NgModule registry.
- *
- * This is generated as a side-effect of NgModule compilation. Note that the `id` is passed in
- * explicitly and not read from the NgModule definition. This is for two reasons: it avoids a
- * megamorphic read, and in JIT there's a chicken-and-egg problem where the NgModule may not be
- * fully resolved when it's registered.
- *
- * @codeGenApi
+ * Gets the element that a deferred block's trigger is pointing to.
+ * @param triggerLView LView in which the trigger is defined.
+ * @param triggerIndex Index at which the trigger element should've been rendered.
  */
-function registerNgModuleType(ngModuleType, id) {
-  const existing = modules.get(id) || null;
-  assertSameOrNotExisting(id, existing, ngModuleType);
-  modules.set(id, ngModuleType);
-}
-function clearModulesForTest() {
-  modules.clear();
-}
-function getRegisteredNgModuleType(id) {
-  return modules.get(id);
+function getTriggerElement(triggerLView, triggerIndex) {
+  const element = getNativeByIndex(HEADER_OFFSET + triggerIndex, triggerLView);
+  ngDevMode && assertElement(element);
+  return element;
 }
 /**
- * Control whether the NgModule registration system enforces that each NgModule type registered has
- * a unique id.
- *
- * This is useful for testing as the NgModule registry cannot be properly reset between tests with
- * Angular's current API.
+ * Registers a DOM-node based trigger.
+ * @param initialLView LView in which the defer block is rendered.
+ * @param tNode TNode representing the defer block.
+ * @param triggerIndex Index at which to find the trigger element.
+ * @param walkUpTimes Number of times to go up/down in the view hierarchy to find the trigger.
+ * @param registerFn Function that will register the DOM events.
+ * @param callback Callback to be invoked when the trigger receives the event that should render
+ *     the deferred block.
+ * @param type Trigger type to distinguish between regular and prefetch triggers.
  */
-function setAllowDuplicateNgModuleIdsForTest(allowDuplicates) {
-  checkForDuplicateNgModules = !allowDuplicates;
+function registerDomTrigger(initialLView, tNode, triggerIndex, walkUpTimes, registerFn, callback, type) {
+  const injector = initialLView[INJECTOR$1];
+  function pollDomTrigger() {
+    // If the initial view was destroyed, we don't need to do anything.
+    if (isDestroyed(initialLView)) {
+      return;
+    }
+    const lDetails = getLDeferBlockDetails(initialLView, tNode);
+    const renderedState = lDetails[DEFER_BLOCK_STATE];
+    // If the block was loaded before the trigger was resolved, we don't need to do anything.
+    if (renderedState !== DeferBlockInternalState.Initial && renderedState !== DeferBlockState.Placeholder) {
+      return;
+    }
+    const triggerLView = getTriggerLView(initialLView, tNode, walkUpTimes);
+    // Keep polling until we resolve the trigger's LView.
+    if (!triggerLView) {
+      internalAfterNextRender(pollDomTrigger, {
+        injector
+      });
+      return;
+    }
+    // It's possible that the trigger's view was destroyed before we resolved the trigger element.
+    if (isDestroyed(triggerLView)) {
+      return;
+    }
+    const element = getTriggerElement(triggerLView, triggerIndex);
+    const cleanup = registerFn(element, () => {
+      if (initialLView !== triggerLView) {
+        removeLViewOnDestroy(triggerLView, cleanup);
+      }
+      callback();
+    }, injector);
+    // The trigger and deferred block might be in different LViews.
+    // For the main LView the cleanup would happen as a part of
+    // `storeTriggerCleanupFn` logic. For trigger LView we register
+    // a cleanup function there to remove event handlers in case an
+    // LView gets destroyed before a trigger is invoked.
+    if (initialLView !== triggerLView) {
+      storeLViewOnDestroy(triggerLView, cleanup);
+    }
+    storeTriggerCleanupFn(type, lDetails, cleanup);
+  }
+  // Begin polling for the trigger.
+  internalAfterNextRender(pollDomTrigger, {
+    injector
+  });
 }
 
 /**
- * Validation function invoked at runtime for each binding that might potentially
- * represent a security-sensitive attribute of an <iframe>.
- * See `IFRAME_SECURITY_SENSITIVE_ATTRS` in the
- * `packages/compiler/src/schema/dom_security_schema.ts` script for the full list
- * of such attributes.
+ * Helper function to schedule a callback to be invoked when a browser becomes idle.
  *
- * @codeGenApi
+ * @param callback A function to be invoked when a browser becomes idle.
+ * @param lView LView that hosts an instance of a defer block.
  */
-function ɵɵvalidateIframeAttribute(attrValue, tagName, attrName) {
-  const lView = getLView();
-  const tNode = getSelectedTNode();
-  const element = getNativeByTNode(tNode, lView);
-  // Restrict any dynamic bindings of security-sensitive attributes/properties
-  // on an <iframe> for security reasons.
-  if (tNode.type === 2 /* TNodeType.Element */ && tagName.toLowerCase() === 'iframe') {
-    const iframe = element;
-    // Unset previously applied `src` and `srcdoc` if we come across a situation when
-    // a security-sensitive attribute is set later via an attribute/property binding.
-    iframe.src = '';
-    iframe.srcdoc = trustedHTMLFromString('');
-    // Also remove the <iframe> from the document.
-    nativeRemoveNode(lView[RENDERER], iframe);
-    const errorMessage = ngDevMode && `Angular has detected that the \`${attrName}\` was applied ` + `as a binding to an <iframe>${getTemplateLocationDetails(lView)}. ` + `For security reasons, the \`${attrName}\` can be set on an <iframe> ` + `as a static attribute only. \n` + `To fix this, switch the \`${attrName}\` binding to a static attribute ` + `in a template or in host bindings section.`;
-    throw new RuntimeError(-910 /* RuntimeErrorCode.UNSAFE_IFRAME_ATTRS */, errorMessage);
-  }
-  return attrValue;
-}
-function getSuperType(type) {
-  return Object.getPrototypeOf(type.prototype).constructor;
+function onIdle(callback, lView) {
+  const injector = lView[INJECTOR$1];
+  const scheduler = injector.get(IdleScheduler);
+  const cleanupFn = () => scheduler.remove(callback);
+  scheduler.add(callback);
+  return cleanupFn;
 }
 /**
- * Merges the definition from a super class to a sub class.
- * @param definition The definition that is a SubClass of another directive of component
+ * Use shims for the `requestIdleCallback` and `cancelIdleCallback` functions for
+ * environments where those functions are not available (e.g. Node.js and Safari).
  *
- * @codeGenApi
+ * Note: we wrap the `requestIdleCallback` call into a function, so that it can be
+ * overridden/mocked in test environment and picked up by the runtime code.
  */
-function ɵɵInheritDefinitionFeature(definition) {
-  let superType = getSuperType(definition.type);
-  let shouldInheritFields = true;
-  const inheritanceChain = [definition];
-  while (superType) {
-    let superDef = undefined;
-    if (isComponentDef(definition)) {
-      // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
-      superDef = superType.ɵcmp || superType.ɵdir;
-    } else {
-      if (superType.ɵcmp) {
-        throw new RuntimeError(903 /* RuntimeErrorCode.INVALID_INHERITANCE */, ngDevMode && `Directives cannot inherit Components. Directive ${stringifyForError(definition.type)} is attempting to extend component ${stringifyForError(superType)}`);
-      }
-      // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
-      superDef = superType.ɵdir;
+const _requestIdleCallback = () => typeof requestIdleCallback !== 'undefined' ? requestIdleCallback : setTimeout;
+const _cancelIdleCallback = () => typeof requestIdleCallback !== 'undefined' ? cancelIdleCallback : clearTimeout;
+/**
+ * Helper service to schedule `requestIdleCallback`s for batches of defer blocks,
+ * to avoid calling `requestIdleCallback` for each defer block (e.g. if
+ * defer blocks are defined inside a for loop).
+ */
+let IdleScheduler = /*#__PURE__*/(() => {
+  class IdleScheduler {
+    constructor() {
+      // Indicates whether current callbacks are being invoked.
+      this.executingCallbacks = false;
+      // Currently scheduled idle callback id.
+      this.idleId = null;
+      // Set of callbacks to be invoked next.
+      this.current = new Set();
+      // Set of callbacks collected while invoking current set of callbacks.
+      // Those callbacks are scheduled for the next idle period.
+      this.deferred = new Set();
+      this.ngZone = inject(NgZone);
+      this.requestIdleCallbackFn = _requestIdleCallback().bind(globalThis);
+      this.cancelIdleCallbackFn = _cancelIdleCallback().bind(globalThis);
     }
-    if (superDef) {
-      if (shouldInheritFields) {
-        inheritanceChain.push(superDef);
-        // Some fields in the definition may be empty, if there were no values to put in them that
-        // would've justified object creation. Unwrap them if necessary.
-        const writeableDef = definition;
-        writeableDef.inputs = maybeUnwrapEmpty(definition.inputs);
-        writeableDef.inputTransforms = maybeUnwrapEmpty(definition.inputTransforms);
-        writeableDef.declaredInputs = maybeUnwrapEmpty(definition.declaredInputs);
-        writeableDef.outputs = maybeUnwrapEmpty(definition.outputs);
-        // Merge hostBindings
-        const superHostBindings = superDef.hostBindings;
-        superHostBindings && inheritHostBindings(definition, superHostBindings);
-        // Merge queries
-        const superViewQuery = superDef.viewQuery;
-        const superContentQueries = superDef.contentQueries;
-        superViewQuery && inheritViewQuery(definition, superViewQuery);
-        superContentQueries && inheritContentQueries(definition, superContentQueries);
-        // Merge inputs and outputs
-        mergeInputsWithTransforms(definition, superDef);
-        fillProperties(definition.outputs, superDef.outputs);
-        // Merge animations metadata.
-        // If `superDef` is a Component, the `data` field is present (defaults to an empty object).
-        if (isComponentDef(superDef) && superDef.data.animation) {
-          // If super def is a Component, the `definition` is also a Component, since Directives can
-          // not inherit Components (we throw an error above and cannot reach this code).
-          const defData = definition.data;
-          defData.animation = (defData.animation || []).concat(superDef.data.animation);
-        }
+    add(callback) {
+      const target = this.executingCallbacks ? this.deferred : this.current;
+      target.add(callback);
+      if (this.idleId === null) {
+        this.scheduleIdleCallback();
       }
-      // Run parent features
-      const features = superDef.features;
-      if (features) {
-        for (let i = 0; i < features.length; i++) {
-          const feature = features[i];
-          if (feature && feature.ngInherit) {
-            feature(definition);
-          }
-          // If `InheritDefinitionFeature` is a part of the current `superDef`, it means that this
-          // def already has all the necessary information inherited from its super class(es), so we
-          // can stop merging fields from super classes. However we need to iterate through the
-          // prototype chain to look for classes that might contain other "features" (like
-          // NgOnChanges), which we should invoke for the original `definition`. We set the
-          // `shouldInheritFields` flag to indicate that, essentially skipping fields inheritance
-          // logic and only invoking functions from the "features" list.
-          if (feature === ɵɵInheritDefinitionFeature) {
-            shouldInheritFields = false;
+    }
+    remove(callback) {
+      const {
+        current,
+        deferred
+      } = this;
+      current.delete(callback);
+      deferred.delete(callback);
+      // If the last callback was removed and there is a pending
+      // idle callback - cancel it.
+      if (current.size === 0 && deferred.size === 0) {
+        this.cancelIdleCallback();
+      }
+    }
+    scheduleIdleCallback() {
+      const callback = () => {
+        this.cancelIdleCallback();
+        this.executingCallbacks = true;
+        for (const callback of this.current) {
+          callback();
+        }
+        this.current.clear();
+        this.executingCallbacks = false;
+        // If there are any callbacks added during an invocation
+        // of the current ones - make them "current" and schedule
+        // a new idle callback.
+        if (this.deferred.size > 0) {
+          for (const callback of this.deferred) {
+            this.current.add(callback);
           }
+          this.deferred.clear();
+          this.scheduleIdleCallback();
         }
+      };
+      // Ensure that the callback runs in the NgZone since
+      // the `requestIdleCallback` is not currently patched by Zone.js.
+      this.idleId = this.requestIdleCallbackFn(() => this.ngZone.run(callback));
+    }
+    cancelIdleCallback() {
+      if (this.idleId !== null) {
+        this.cancelIdleCallbackFn(this.idleId);
+        this.idleId = null;
       }
     }
-    superType = Object.getPrototypeOf(superType);
+    ngOnDestroy() {
+      this.cancelIdleCallback();
+      this.current.clear();
+      this.deferred.clear();
+    }
+    /** @nocollapse */
+    static #_ = this.ɵprov = ɵɵdefineInjectable({
+      token: IdleScheduler,
+      providedIn: 'root',
+      factory: () => new IdleScheduler()
+    });
   }
-  mergeHostAttrsAcrossInheritance(inheritanceChain);
+  return IdleScheduler;
+})();
+/**
+ * Returns a function that captures a provided delay.
+ * Invoking the returned function schedules a trigger.
+ */
+function onTimer(delay) {
+  return (callback, lView) => scheduleTimerTrigger(delay, callback, lView);
 }
-function mergeInputsWithTransforms(target, source) {
-  for (const key in source.inputs) {
-    if (!source.inputs.hasOwnProperty(key)) {
-      continue;
+/**
+ * Schedules a callback to be invoked after a given timeout.
+ *
+ * @param delay A number of ms to wait until firing a callback.
+ * @param callback A function to be invoked after a timeout.
+ * @param lView LView that hosts an instance of a defer block.
+ */
+function scheduleTimerTrigger(delay, callback, lView) {
+  const injector = lView[INJECTOR$1];
+  const scheduler = injector.get(TimerScheduler);
+  const cleanupFn = () => scheduler.remove(callback);
+  scheduler.add(delay, callback);
+  return cleanupFn;
+}
+/**
+ * Helper service to schedule `setTimeout`s for batches of defer blocks,
+ * to avoid calling `setTimeout` for each defer block (e.g. if defer blocks
+ * are created inside a for loop).
+ */
+let TimerScheduler = /*#__PURE__*/(() => {
+  class TimerScheduler {
+    constructor() {
+      // Indicates whether current callbacks are being invoked.
+      this.executingCallbacks = false;
+      // Currently scheduled `setTimeout` id.
+      this.timeoutId = null;
+      // When currently scheduled timer would fire.
+      this.invokeTimerAt = null;
+      // List of callbacks to be invoked.
+      // For each callback we also store a timestamp on when the callback
+      // should be invoked. We store timestamps and callback functions
+      // in a flat array to avoid creating new objects for each entry.
+      // [timestamp1, callback1, timestamp2, callback2, ...]
+      this.current = [];
+      // List of callbacks collected while invoking current set of callbacks.
+      // Those callbacks are added to the "current" queue at the end of
+      // the current callback invocation. The shape of this list is the same
+      // as the shape of the `current` list.
+      this.deferred = [];
     }
-    if (target.inputs.hasOwnProperty(key)) {
-      continue;
+    add(delay, callback) {
+      const target = this.executingCallbacks ? this.deferred : this.current;
+      this.addToQueue(target, Date.now() + delay, callback);
+      this.scheduleTimer();
     }
-    const value = source.inputs[key];
-    if (value === undefined) {
-      continue;
+    remove(callback) {
+      const {
+        current,
+        deferred
+      } = this;
+      const callbackIndex = this.removeFromQueue(current, callback);
+      if (callbackIndex === -1) {
+        // Try cleaning up deferred queue only in case
+        // we didn't find a callback in the "current" queue.
+        this.removeFromQueue(deferred, callback);
+      }
+      // If the last callback was removed and there is a pending timeout - cancel it.
+      if (current.length === 0 && deferred.length === 0) {
+        this.clearTimeout();
+      }
     }
-    target.inputs[key] = value;
-    target.declaredInputs[key] = source.declaredInputs[key];
-    // If the input is inherited, and we have a transform for it, we also inherit it.
-    // Note that transforms should not be inherited if the input has its own metadata
-    // in the `source` directive itself already (i.e. the input is re-declared/overridden).
-    if (source.inputTransforms !== null) {
-      // Note: transforms are stored with their minified names.
-      // Perf: only access the minified name when there are source transforms.
-      const minifiedName = Array.isArray(value) ? value[0] : value;
-      if (!source.inputTransforms.hasOwnProperty(minifiedName)) {
-        continue;
+    addToQueue(target, invokeAt, callback) {
+      let insertAtIndex = target.length;
+      for (let i = 0; i < target.length; i += 2) {
+        const invokeQueuedCallbackAt = target[i];
+        if (invokeQueuedCallbackAt > invokeAt) {
+          // We've reached a first timer that is scheduled
+          // for a later time than what we are trying to insert.
+          // This is the location at which we need to insert,
+          // no need to iterate further.
+          insertAtIndex = i;
+          break;
+        }
       }
-      target.inputTransforms ??= {};
-      target.inputTransforms[minifiedName] = source.inputTransforms[minifiedName];
+      arrayInsert2(target, insertAtIndex, invokeAt, callback);
+    }
+    removeFromQueue(target, callback) {
+      let index = -1;
+      for (let i = 0; i < target.length; i += 2) {
+        const queuedCallback = target[i + 1];
+        if (queuedCallback === callback) {
+          index = i;
+          break;
+        }
+      }
+      if (index > -1) {
+        // Remove 2 elements: a timestamp slot and
+        // the following slot with a callback function.
+        arraySplice(target, index, 2);
+      }
+      return index;
+    }
+    scheduleTimer() {
+      const callback = () => {
+        this.clearTimeout();
+        this.executingCallbacks = true;
+        // Clone the current state of the queue, since it might be altered
+        // as we invoke callbacks.
+        const current = [...this.current];
+        // Invoke callbacks that were scheduled to run before the current time.
+        const now = Date.now();
+        for (let i = 0; i < current.length; i += 2) {
+          const invokeAt = current[i];
+          const callback = current[i + 1];
+          if (invokeAt <= now) {
+            callback();
+          } else {
+            // We've reached a timer that should not be invoked yet.
+            break;
+          }
+        }
+        // The state of the queue might've changed after callbacks invocation,
+        // run the cleanup logic based on the *current* state of the queue.
+        let lastCallbackIndex = -1;
+        for (let i = 0; i < this.current.length; i += 2) {
+          const invokeAt = this.current[i];
+          if (invokeAt <= now) {
+            // Add +1 to account for a callback function that
+            // goes after the timestamp in events array.
+            lastCallbackIndex = i + 1;
+          } else {
+            // We've reached a timer that should not be invoked yet.
+            break;
+          }
+        }
+        if (lastCallbackIndex >= 0) {
+          arraySplice(this.current, 0, lastCallbackIndex + 1);
+        }
+        this.executingCallbacks = false;
+        // If there are any callbacks added during an invocation
+        // of the current ones - move them over to the "current"
+        // queue.
+        if (this.deferred.length > 0) {
+          for (let i = 0; i < this.deferred.length; i += 2) {
+            const invokeAt = this.deferred[i];
+            const callback = this.deferred[i + 1];
+            this.addToQueue(this.current, invokeAt, callback);
+          }
+          this.deferred.length = 0;
+        }
+        this.scheduleTimer();
+      };
+      // Avoid running timer callbacks more than once per
+      // average frame duration. This is needed for better
+      // batching and to avoid kicking off excessive change
+      // detection cycles.
+      const FRAME_DURATION_MS = 16; // 1000ms / 60fps
+      if (this.current.length > 0) {
+        const now = Date.now();
+        // First element in the queue points at the timestamp
+        // of the first (earliest) event.
+        const invokeAt = this.current[0];
+        if (this.timeoutId === null ||
+        // Reschedule a timer in case a queue contains an item with
+        // an earlier timestamp and the delta is more than an average
+        // frame duration.
+        this.invokeTimerAt && this.invokeTimerAt - invokeAt > FRAME_DURATION_MS) {
+          // There was a timeout already, but an earlier event was added
+          // into the queue. In this case we drop an old timer and setup
+          // a new one with an updated (smaller) timeout.
+          this.clearTimeout();
+          const timeout = Math.max(invokeAt - now, FRAME_DURATION_MS);
+          this.invokeTimerAt = invokeAt;
+          this.timeoutId = setTimeout(callback, timeout);
+        }
+      }
+    }
+    clearTimeout() {
+      if (this.timeoutId !== null) {
+        clearTimeout(this.timeoutId);
+        this.timeoutId = null;
+      }
+    }
+    ngOnDestroy() {
+      this.clearTimeout();
+      this.current.length = 0;
+      this.deferred.length = 0;
     }
+    /** @nocollapse */
+    static #_ = this.ɵprov = ɵɵdefineInjectable({
+      token: TimerScheduler,
+      providedIn: 'root',
+      factory: () => new TimerScheduler()
+    });
   }
-}
+  return TimerScheduler;
+})();
 /**
- * Merge the `hostAttrs` and `hostVars` from the inherited parent to the base class.
+ * **INTERNAL**, avoid referencing it in application code.
+ * *
+ * Injector token that allows to provide `DeferBlockDependencyInterceptor` class
+ * implementation.
  *
- * @param inheritanceChain A list of `WritableDefs` starting at the top most type and listing
- * sub-types in order. For each type take the `hostAttrs` and `hostVars` and merge it with the child
- * type.
- */
-function mergeHostAttrsAcrossInheritance(inheritanceChain) {
-  let hostVars = 0;
-  let hostAttrs = null;
-  // We process the inheritance order from the base to the leaves here.
-  for (let i = inheritanceChain.length - 1; i >= 0; i--) {
-    const def = inheritanceChain[i];
-    // For each `hostVars`, we need to add the superclass amount.
-    def.hostVars = hostVars += def.hostVars;
-    // for each `hostAttrs` we need to merge it with superclass.
-    def.hostAttrs = mergeHostAttrs(def.hostAttrs, hostAttrs = mergeHostAttrs(hostAttrs, def.hostAttrs));
-  }
-}
-function maybeUnwrapEmpty(value) {
-  if (value === EMPTY_OBJ) {
-    return {};
-  } else if (value === EMPTY_ARRAY) {
-    return [];
-  } else {
-    return value;
-  }
-}
-function inheritViewQuery(definition, superViewQuery) {
-  const prevViewQuery = definition.viewQuery;
-  if (prevViewQuery) {
-    definition.viewQuery = (rf, ctx) => {
-      superViewQuery(rf, ctx);
-      prevViewQuery(rf, ctx);
-    };
-  } else {
-    definition.viewQuery = superViewQuery;
-  }
-}
-function inheritContentQueries(definition, superContentQueries) {
-  const prevContentQueries = definition.contentQueries;
-  if (prevContentQueries) {
-    definition.contentQueries = (rf, ctx, directiveIndex) => {
-      superContentQueries(rf, ctx, directiveIndex);
-      prevContentQueries(rf, ctx, directiveIndex);
-    };
-  } else {
-    definition.contentQueries = superContentQueries;
-  }
-}
-function inheritHostBindings(definition, superHostBindings) {
-  const prevHostBindings = definition.hostBindings;
-  if (prevHostBindings) {
-    definition.hostBindings = (rf, ctx) => {
-      superHostBindings(rf, ctx);
-      prevHostBindings(rf, ctx);
-    };
-  } else {
-    definition.hostBindings = superHostBindings;
-  }
-}
-
-/**
- * Fields which exist on either directive or component definitions, and need to be copied from
- * parent to child classes by the `ɵɵCopyDefinitionFeature`.
+ * This token is only injected in devMode
  */
-const COPY_DIRECTIVE_FIELDS = [
-// The child class should use the providers of its parent.
-'providersResolver'
-// Not listed here are any fields which are handled by the `ɵɵInheritDefinitionFeature`, such
-// as inputs, outputs, and host binding functions.
-];
+const DEFER_BLOCK_DEPENDENCY_INTERCEPTOR = /*#__PURE__*/new InjectionToken('DEFER_BLOCK_DEPENDENCY_INTERCEPTOR');
 /**
- * Fields which exist only on component definitions, and need to be copied from parent to child
- * classes by the `ɵɵCopyDefinitionFeature`.
- *
- * The type here allows any field of `ComponentDef` which is not also a property of `DirectiveDef`,
- * since those should go in `COPY_DIRECTIVE_FIELDS` above.
+ * **INTERNAL**, token used for configuring defer block behavior.
  */
-const COPY_COMPONENT_FIELDS = [
-// The child class should use the template function of its parent, including all template
-// semantics.
-'template', 'decls', 'consts', 'vars', 'onPush', 'ngContentSelectors',
-// The child class should use the CSS styles of its parent, including all styling semantics.
-'styles', 'encapsulation',
-// The child class should be checked by the runtime in the same way as its parent.
-'schemas'];
+const DEFER_BLOCK_CONFIG = /*#__PURE__*/new InjectionToken(ngDevMode ? 'DEFER_BLOCK_CONFIG' : '');
 /**
- * Copies the fields not handled by the `ɵɵInheritDefinitionFeature` from the supertype of a
- * definition.
- *
- * This exists primarily to support ngcc migration of an existing View Engine pattern, where an
- * entire decorator is inherited from a parent to a child class. When ngcc detects this case, it
- * generates a skeleton definition on the child class, and applies this feature.
- *
- * The `ɵɵCopyDefinitionFeature` then copies any needed fields from the parent class' definition,
- * including things like the component template function.
- *
- * @param definition The definition of a child class which inherits from a parent class with its
- * own definition.
+ * Returns whether defer blocks should be triggered.
  *
- * @codeGenApi
+ * Currently, defer blocks are not triggered on the server,
+ * only placeholder content is rendered (if provided).
  */
-function ɵɵCopyDefinitionFeature(definition) {
-  let superType = getSuperType(definition.type);
-  let superDef = undefined;
-  if (isComponentDef(definition)) {
-    // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
-    superDef = superType.ɵcmp;
-  } else {
-    // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
-    superDef = superType.ɵdir;
-  }
-  // Needed because `definition` fields are readonly.
-  const defAny = definition;
-  // Copy over any fields that apply to either directives or components.
-  for (const field of COPY_DIRECTIVE_FIELDS) {
-    defAny[field] = superDef[field];
-  }
-  if (isComponentDef(superDef)) {
-    // Copy over any component-specific fields.
-    for (const field of COPY_COMPONENT_FIELDS) {
-      defAny[field] = superDef[field];
-    }
+function shouldTriggerDeferBlock(injector) {
+  const config = injector.get(DEFER_BLOCK_CONFIG, null, {
+    optional: true
+  });
+  if (config?.behavior === DeferBlockBehavior.Manual) {
+    return false;
   }
+  return isPlatformBrowser(injector);
 }
-
 /**
- * This feature adds the host directives behavior to a directive definition by patching a
- * function onto it. The expectation is that the runtime will invoke the function during
- * directive matching.
- *
- * For example:
- * ```ts
- * class ComponentWithHostDirective {
- *   static ɵcmp = defineComponent({
- *    type: ComponentWithHostDirective,
- *    features: [ɵɵHostDirectivesFeature([
- *      SimpleHostDirective,
- *      {directive: AdvancedHostDirective, inputs: ['foo: alias'], outputs: ['bar']},
- *    ])]
- *  });
- * }
- * ```
- *
- * @codeGenApi
+ * Reference to the timer-based scheduler implementation of defer block state
+ * rendering method. It's used to make timer-based scheduling tree-shakable.
+ * If `minimum` or `after` parameters are used, compiler generates an extra
+ * argument for the `ɵɵdefer` instruction, which references a timer-based
+ * implementation.
  */
-function ɵɵHostDirectivesFeature(rawHostDirectives) {
-  const feature = definition => {
-    const resolved = (Array.isArray(rawHostDirectives) ? rawHostDirectives : rawHostDirectives()).map(dir => {
-      return typeof dir === 'function' ? {
-        directive: resolveForwardRef(dir),
-        inputs: EMPTY_OBJ,
-        outputs: EMPTY_OBJ
-      } : {
-        directive: resolveForwardRef(dir.directive),
-        inputs: bindingArrayToMap(dir.inputs),
-        outputs: bindingArrayToMap(dir.outputs)
-      };
-    });
-    if (definition.hostDirectives === null) {
-      definition.findHostDirectiveDefs = findHostDirectiveDefs;
-      definition.hostDirectives = resolved;
-    } else {
-      definition.hostDirectives.unshift(...resolved);
-    }
-  };
-  feature.ngInherit = true;
-  return feature;
-}
-function findHostDirectiveDefs(currentDef, matchedDefs, hostDirectiveDefs) {
-  if (currentDef.hostDirectives !== null) {
-    for (const hostDirectiveConfig of currentDef.hostDirectives) {
-      const hostDirectiveDef = getDirectiveDef(hostDirectiveConfig.directive);
-      if (typeof ngDevMode === 'undefined' || ngDevMode) {
-        validateHostDirective(hostDirectiveConfig, hostDirectiveDef);
-      }
-      // We need to patch the `declaredInputs` so that
-      // `ngOnChanges` can map the properties correctly.
-      patchDeclaredInputs(hostDirectiveDef.declaredInputs, hostDirectiveConfig.inputs);
-      // Host directives execute before the host so that its host bindings can be overwritten.
-      findHostDirectiveDefs(hostDirectiveDef, matchedDefs, hostDirectiveDefs);
-      hostDirectiveDefs.set(hostDirectiveDef, hostDirectiveConfig);
-      matchedDefs.push(hostDirectiveDef);
-    }
-  }
-}
+let applyDeferBlockStateWithSchedulingImpl = null;
 /**
- * Converts an array in the form of `['publicName', 'alias', 'otherPublicName', 'otherAlias']` into
- * a map in the form of `{publicName: 'alias', otherPublicName: 'otherAlias'}`.
+ * Enables timer-related scheduling if `after` or `minimum` parameters are setup
+ * on the `@loading` or `@placeholder` blocks.
  */
-function bindingArrayToMap(bindings) {
-  if (bindings === undefined || bindings.length === 0) {
-    return EMPTY_OBJ;
+function ɵɵdeferEnableTimerScheduling(tView, tDetails, placeholderConfigIndex, loadingConfigIndex) {
+  const tViewConsts = tView.consts;
+  if (placeholderConfigIndex != null) {
+    tDetails.placeholderBlockConfig = getConstant(tViewConsts, placeholderConfigIndex);
   }
-  const result = {};
-  for (let i = 0; i < bindings.length; i += 2) {
-    result[bindings[i]] = bindings[i + 1];
+  if (loadingConfigIndex != null) {
+    tDetails.loadingBlockConfig = getConstant(tViewConsts, loadingConfigIndex);
+  }
+  // Enable implementation that supports timer-based scheduling.
+  if (applyDeferBlockStateWithSchedulingImpl === null) {
+    applyDeferBlockStateWithSchedulingImpl = applyDeferBlockStateWithScheduling;
   }
-  return result;
 }
 /**
- * `ngOnChanges` has some leftover legacy ViewEngine behavior where the keys inside the
- * `SimpleChanges` event refer to the *declared* name of the input, not its public name or its
- * minified name. E.g. in `@Input('alias') foo: string`, the name in the `SimpleChanges` object
- * will always be `foo`, and not `alias` or the minified name of `foo` in apps using property
- * minification.
- *
- * This is achieved through the `DirectiveDef.declaredInputs` map that is constructed when the
- * definition is declared. When a property is written to the directive instance, the
- * `NgOnChangesFeature` will try to remap the property name being written to using the
- * `declaredInputs`.
+ * Creates runtime data structures for defer blocks.
  *
- * Since the host directive input remapping happens during directive matching, `declaredInputs`
- * won't contain the new alias that the input is available under. This function addresses the
- * issue by patching the host directive aliases to the `declaredInputs`. There is *not* a risk of
- * this patching accidentally introducing new inputs to the host directive, because `declaredInputs`
- * is used *only* by the `NgOnChangesFeature` when determining what name is used in the
- * `SimpleChanges` object which won't be reached if an input doesn't exist.
+ * @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 placeholderConfigIndex Index in the constants array of the configuration of the
+ *     placeholder block.
+ * @param enableTimerScheduling Function that enables timer-related scheduling if `after`
+ *     or `minimum` parameters are setup on the `@loading` or `@placeholder` blocks.
+ *
+ * @codeGenApi
  */
-function patchDeclaredInputs(declaredInputs, exposedInputs) {
-  for (const publicName in exposedInputs) {
-    if (exposedInputs.hasOwnProperty(publicName)) {
-      const remappedPublicName = exposedInputs[publicName];
-      const privateName = declaredInputs[publicName];
-      // We *technically* shouldn't be able to hit this case because we can't have multiple
-      // inputs on the same property and we have validations against conflicting aliases in
-      // `validateMappings`. If we somehow did, it would lead to `ngOnChanges` being invoked
-      // with the wrong name so we have a non-user-friendly assertion here just in case.
-      if ((typeof ngDevMode === 'undefined' || ngDevMode) && declaredInputs.hasOwnProperty(remappedPublicName)) {
-        assertEqual(declaredInputs[remappedPublicName], declaredInputs[publicName], `Conflicting host directive input alias ${publicName}.`);
-      }
-      declaredInputs[remappedPublicName] = privateName;
-    }
+function ɵɵdefer(index, primaryTmplIndex, dependencyResolverFn, loadingTmplIndex, placeholderTmplIndex, errorTmplIndex, loadingConfigIndex, placeholderConfigIndex, enableTimerScheduling) {
+  const lView = getLView();
+  const tView = getTView();
+  const adjustedIndex = index + HEADER_OFFSET;
+  ɵɵtemplate(index, null, 0, 0);
+  if (tView.firstCreatePass) {
+    performanceMarkFeature('NgDefer');
+    const tDetails = {
+      primaryTmplIndex,
+      loadingTmplIndex: loadingTmplIndex ?? null,
+      placeholderTmplIndex: placeholderTmplIndex ?? null,
+      errorTmplIndex: errorTmplIndex ?? null,
+      placeholderBlockConfig: null,
+      loadingBlockConfig: null,
+      dependencyResolverFn: dependencyResolverFn ?? null,
+      loadingState: DeferDependenciesLoadingState.NOT_STARTED,
+      loadingPromise: null,
+      providers: null
+    };
+    enableTimerScheduling?.(tView, tDetails, placeholderConfigIndex, loadingConfigIndex);
+    setTDeferBlockDetails(tView, adjustedIndex, tDetails);
   }
+  const tNode = getCurrentTNode();
+  const lContainer = lView[adjustedIndex];
+  // If hydration is enabled, looks up dehydrated views in the DOM
+  // using hydration annotation info and stores those views on LContainer.
+  // In client-only mode, this function is a noop.
+  populateDehydratedViewsInLContainer(lContainer, tNode, lView);
+  // Init instance-specific defer details and store it.
+  const lDetails = [null,
+  // NEXT_DEFER_BLOCK_STATE
+  DeferBlockInternalState.Initial,
+  // DEFER_BLOCK_STATE
+  null,
+  // STATE_IS_FROZEN_UNTIL
+  null,
+  // LOADING_AFTER_CLEANUP_FN
+  null,
+  // TRIGGER_CLEANUP_FNS
+  null // PREFETCH_TRIGGER_CLEANUP_FNS
+  ];
+  setLDeferBlockDetails(lView, adjustedIndex, lDetails);
+  const cleanupTriggersFn = () => invokeAllTriggerCleanupFns(lDetails);
+  // When defer block is triggered - unsubscribe from LView destroy cleanup.
+  storeTriggerCleanupFn(0 /* TriggerType.Regular */, lDetails, () => removeLViewOnDestroy(lView, cleanupTriggersFn));
+  storeLViewOnDestroy(lView, cleanupTriggersFn);
 }
 /**
- * Verifies that the host directive has been configured correctly.
- * @param hostDirectiveConfig Host directive configuration object.
- * @param directiveDef Directive definition of the host directive.
+ * Loads defer block dependencies when a trigger value becomes truthy.
+ * @codeGenApi
  */
-function validateHostDirective(hostDirectiveConfig, directiveDef) {
-  const type = hostDirectiveConfig.directive;
-  if (directiveDef === null) {
-    if (getComponentDef(type) !== null) {
-      throw new RuntimeError(310 /* RuntimeErrorCode.HOST_DIRECTIVE_COMPONENT */, `Host directive ${type.name} cannot be a component.`);
+function ɵɵdeferWhen(rawValue) {
+  const lView = getLView();
+  const bindingIndex = nextBindingIndex();
+  if (bindingUpdated(lView, bindingIndex, rawValue)) {
+    const prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(null);
+    try {
+      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 === DeferBlockInternalState.Initial) {
+        // If nothing is rendered yet, render a placeholder (if defined).
+        renderPlaceholder(lView, tNode);
+      } else if (value === true && (renderedState === DeferBlockInternalState.Initial || renderedState === DeferBlockState.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);
+      }
+    } finally {
+      (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
     }
-    throw new RuntimeError(307 /* RuntimeErrorCode.HOST_DIRECTIVE_UNRESOLVABLE */, `Could not resolve metadata for host directive ${type.name}. ` + `Make sure that the ${type.name} class is annotated with an @Directive decorator.`);
-  }
-  if (!directiveDef.standalone) {
-    throw new RuntimeError(308 /* RuntimeErrorCode.HOST_DIRECTIVE_NOT_STANDALONE */, `Host directive ${directiveDef.type.name} must be standalone.`);
   }
-  validateMappings('input', directiveDef, hostDirectiveConfig.inputs);
-  validateMappings('output', directiveDef, hostDirectiveConfig.outputs);
 }
 /**
- * Checks that the host directive inputs/outputs configuration is valid.
- * @param bindingType Kind of binding that is being validated. Used in the error message.
- * @param def Definition of the host directive that is being validated against.
- * @param hostDirectiveBindings Host directive mapping object that shold be validated.
+ * Prefetches the deferred content when a value becomes truthy.
+ * @codeGenApi
  */
-function validateMappings(bindingType, def, hostDirectiveBindings) {
-  const className = def.type.name;
-  const bindings = bindingType === 'input' ? def.inputs : def.outputs;
-  for (const publicName in hostDirectiveBindings) {
-    if (hostDirectiveBindings.hasOwnProperty(publicName)) {
-      if (!bindings.hasOwnProperty(publicName)) {
-        throw new RuntimeError(311 /* RuntimeErrorCode.HOST_DIRECTIVE_UNDEFINED_BINDING */, `Directive ${className} does not have an ${bindingType} with a public name of ${publicName}.`);
-      }
-      const remappedPublicName = hostDirectiveBindings[publicName];
-      if (bindings.hasOwnProperty(remappedPublicName) && remappedPublicName !== publicName) {
-        throw new RuntimeError(312 /* RuntimeErrorCode.HOST_DIRECTIVE_CONFLICTING_ALIAS */, `Cannot alias ${bindingType} ${publicName} of host directive ${className} to ${remappedPublicName}, because it already has a different ${bindingType} with the same public name.`);
+function ɵɵdeferPrefetchWhen(rawValue) {
+  const lView = getLView();
+  const bindingIndex = nextBindingIndex();
+  if (bindingUpdated(lView, bindingIndex, rawValue)) {
+    const prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(null);
+    try {
+      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 === DeferDependenciesLoadingState.NOT_STARTED) {
+        // If loading has not been started yet, trigger it now.
+        triggerPrefetching(tDetails, lView, tNode);
       }
+    } finally {
+      (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
     }
   }
 }
-
 /**
- * Decorates the directive definition with support for input transform functions.
- *
- * If the directive uses inheritance, the feature should be included before the
- * `InheritDefinitionFeature` to ensure that the `inputTransforms` field is populated.
- *
+ * Sets up logic to handle the `on idle` deferred trigger.
  * @codeGenApi
  */
-function ɵɵInputTransformsFeature(definition) {
-  const inputs = definition.inputConfig;
-  const inputTransforms = {};
-  for (const minifiedKey in inputs) {
-    if (inputs.hasOwnProperty(minifiedKey)) {
-      // Note: the private names are used for the keys, rather than the public ones, because public
-      // names can be re-aliased in host directives which would invalidate the lookup.
-      const value = inputs[minifiedKey];
-      if (Array.isArray(value) && value[3]) {
-        inputTransforms[minifiedKey] = value[3];
-      }
-    }
-  }
-  definition.inputTransforms = inputTransforms;
+function ɵɵdeferOnIdle() {
+  scheduleDelayedTrigger(onIdle);
 }
-
 /**
- * Represents an instance of an `NgModule` created by an `NgModuleFactory`.
- * Provides access to the `NgModule` instance and related objects.
- *
- * @publicApi
+ * Sets up logic to handle the `prefetch on idle` deferred trigger.
+ * @codeGenApi
  */
-class NgModuleRef$1 {}
+function ɵɵdeferPrefetchOnIdle() {
+  scheduleDelayedPrefetching(onIdle);
+}
 /**
- * @publicApi
- *
- * @deprecated
- * This class was mostly used as a part of ViewEngine-based JIT API and is no longer needed in Ivy
- * JIT mode. See [JIT API changes due to ViewEngine deprecation](guide/deprecations#jit-api-changes)
- * for additional context. Angular provides APIs that accept NgModule classes directly (such as
- * [PlatformRef.bootstrapModule](api/core/PlatformRef#bootstrapModule) and
- * [createNgModule](api/core/createNgModule)), consider switching to those APIs instead of
- * using factory-based ones.
+ * Sets up logic to handle the `on immediate` deferred trigger.
+ * @codeGenApi
  */
-class NgModuleFactory$1 {}
-
+function ɵɵdeferOnImmediate() {
+  const lView = getLView();
+  const tNode = getCurrentTNode();
+  const tView = lView[TVIEW];
+  const injector = lView[INJECTOR$1];
+  const tDetails = getTDeferBlockDetails(tView, tNode);
+  // Render placeholder block only if loading template is not present and we're on
+  // the client to avoid content flickering, since it would be immediately replaced
+  // by the loading block.
+  if (!shouldTriggerDeferBlock(injector) || tDetails.loadingTmplIndex === null) {
+    renderPlaceholder(lView, tNode);
+  }
+  triggerDeferBlock(lView, tNode);
+}
 /**
- * Returns a new NgModuleRef instance based on the NgModule class and parent injector provided.
- *
- * @param ngModule NgModule class.
- * @param parentInjector Optional injector instance to use as a parent for the module injector. If
- *     not provided, `NullInjector` will be used instead.
- * @returns NgModuleRef that represents an NgModule instance.
- *
- * @publicApi
+ * Sets up logic to handle the `prefetch on immediate` deferred trigger.
+ * @codeGenApi
  */
-function createNgModule(ngModule, parentInjector) {
-  return new NgModuleRef(ngModule, parentInjector ?? null, []);
+function ɵɵdeferPrefetchOnImmediate() {
+  const lView = getLView();
+  const tNode = getCurrentTNode();
+  const tView = lView[TVIEW];
+  const tDetails = getTDeferBlockDetails(tView, tNode);
+  if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
+    triggerResourceLoading(tDetails, lView, tNode);
+  }
 }
 /**
- * The `createNgModule` function alias for backwards-compatibility.
- * Please avoid using it directly and use `createNgModule` instead.
- *
- * @deprecated Use `createNgModule` instead.
+ * Creates runtime data structures for the `on timer` deferred trigger.
+ * @param delay Amount of time to wait before loading the content.
+ * @codeGenApi
  */
-const createNgModuleRef = createNgModule;
-class NgModuleRef extends NgModuleRef$1 {
-  constructor(ngModuleType, _parent, additionalProviders) {
-    super();
-    this._parent = _parent;
-    // tslint:disable-next-line:require-internal-with-underscore
-    this._bootstrapComponents = [];
-    this.destroyCbs = [];
-    // When bootstrapping a module we have a dependency graph that looks like this:
-    // ApplicationRef -> ComponentFactoryResolver -> NgModuleRef. The problem is that if the
-    // module being resolved tries to inject the ComponentFactoryResolver, it'll create a
-    // circular dependency which will result in a runtime error, because the injector doesn't
-    // exist yet. We work around the issue by creating the ComponentFactoryResolver ourselves
-    // and providing it, rather than letting the injector resolve it.
-    this.componentFactoryResolver = new ComponentFactoryResolver(this);
-    const ngModuleDef = getNgModuleDef(ngModuleType);
-    ngDevMode && assertDefined(ngModuleDef, `NgModule '${stringify(ngModuleType)}' is not a subtype of 'NgModuleType'.`);
-    this._bootstrapComponents = maybeUnwrapFn(ngModuleDef.bootstrap);
-    this._r3Injector = createInjectorWithoutInjectorInstances(ngModuleType, _parent, [{
-      provide: NgModuleRef$1,
-      useValue: this
-    }, {
-      provide: ComponentFactoryResolver$1,
-      useValue: this.componentFactoryResolver
-    }, ...additionalProviders], stringify(ngModuleType), new Set(['environment']));
-    // We need to resolve the injector types separately from the injector creation, because
-    // the module might be trying to use this ref in its constructor for DI which will cause a
-    // circular error that will eventually error out, because the injector isn't created yet.
-    this._r3Injector.resolveInjectorInitializers();
-    this.instance = this._r3Injector.get(ngModuleType);
-  }
-  get injector() {
-    return this._r3Injector;
-  }
-  destroy() {
-    ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
-    const injector = this._r3Injector;
-    !injector.destroyed && injector.destroy();
-    this.destroyCbs.forEach(fn => fn());
-    this.destroyCbs = null;
-  }
-  onDestroy(callback) {
-    ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
-    this.destroyCbs.push(callback);
-  }
+function ɵɵdeferOnTimer(delay) {
+  scheduleDelayedTrigger(onTimer(delay));
 }
-class NgModuleFactory extends NgModuleFactory$1 {
-  constructor(moduleType) {
-    super();
-    this.moduleType = moduleType;
-  }
-  create(parentInjector) {
-    return new NgModuleRef(this.moduleType, parentInjector, []);
-  }
+/**
+ * Creates runtime data structures for the `prefetch on timer` deferred trigger.
+ * @param delay Amount of time to wait before prefetching the content.
+ * @codeGenApi
+ */
+function ɵɵdeferPrefetchOnTimer(delay) {
+  scheduleDelayedPrefetching(onTimer(delay));
 }
-function createNgModuleRefWithProviders(moduleType, parentInjector, additionalProviders) {
-  return new NgModuleRef(moduleType, parentInjector, additionalProviders);
+/**
+ * Creates runtime data structures for the `on hover` deferred trigger.
+ * @param triggerIndex Index at which to find the trigger element.
+ * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
+ * @codeGenApi
+ */
+function ɵɵdeferOnHover(triggerIndex, walkUpTimes) {
+  const lView = getLView();
+  const tNode = getCurrentTNode();
+  renderPlaceholder(lView, tNode);
+  registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onHover, () => triggerDeferBlock(lView, tNode), 0 /* TriggerType.Regular */);
 }
-class EnvironmentNgModuleRefAdapter extends NgModuleRef$1 {
-  constructor(config) {
-    super();
-    this.componentFactoryResolver = new ComponentFactoryResolver(this);
-    this.instance = null;
-    const injector = new R3Injector([...config.providers, {
-      provide: NgModuleRef$1,
-      useValue: this
-    }, {
-      provide: ComponentFactoryResolver$1,
-      useValue: this.componentFactoryResolver
-    }], config.parent || getNullInjector(), config.debugName, new Set(['environment']));
-    this.injector = injector;
-    if (config.runEnvironmentInitializers) {
-      injector.resolveInjectorInitializers();
-    }
-  }
-  destroy() {
-    this.injector.destroy();
-  }
-  onDestroy(callback) {
-    this.injector.onDestroy(callback);
+/**
+ * Creates runtime data structures for the `prefetch on hover` deferred trigger.
+ * @param triggerIndex Index at which to find the trigger element.
+ * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
+ * @codeGenApi
+ */
+function ɵɵdeferPrefetchOnHover(triggerIndex, walkUpTimes) {
+  const lView = getLView();
+  const tNode = getCurrentTNode();
+  const tView = lView[TVIEW];
+  const tDetails = getTDeferBlockDetails(tView, tNode);
+  if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
+    registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onHover, () => triggerPrefetching(tDetails, lView, tNode), 1 /* TriggerType.Prefetch */);
   }
 }
 /**
- * Create a new environment injector.
- *
- * Learn more about environment injectors in
- * [this guide](guide/standalone-components#environment-injectors).
- *
- * @param providers An array of providers.
- * @param parent A parent environment injector.
- * @param debugName An optional name for this injector instance, which will be used in error
- *     messages.
- *
- * @publicApi
+ * Creates runtime data structures for the `on interaction` deferred trigger.
+ * @param triggerIndex Index at which to find the trigger element.
+ * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
+ * @codeGenApi
  */
-function createEnvironmentInjector(providers, parent, debugName = null) {
-  const adapter = new EnvironmentNgModuleRefAdapter({
-    providers,
-    parent,
-    debugName,
-    runEnvironmentInitializers: true
-  });
-  return adapter.injector;
+function ɵɵdeferOnInteraction(triggerIndex, walkUpTimes) {
+  const lView = getLView();
+  const tNode = getCurrentTNode();
+  renderPlaceholder(lView, tNode);
+  registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onInteraction, () => triggerDeferBlock(lView, tNode), 0 /* TriggerType.Regular */);
 }
-
 /**
- * A service used by the framework to create and cache injector instances.
- *
- * This service is used to create a single injector instance for each defer
- * block definition, to avoid creating an injector for each defer block instance
- * of a certain type.
+ * Creates runtime data structures for the `prefetch on interaction` deferred trigger.
+ * @param triggerIndex Index at which to find the trigger element.
+ * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
+ * @codeGenApi
  */
-let CachedInjectorService = /*#__PURE__*/(() => {
-  class CachedInjectorService {
-    constructor() {
-      this.cachedInjectors = new Map();
-    }
-    getOrCreateInjector(key, parentInjector, providers, debugName) {
-      if (!this.cachedInjectors.has(key)) {
-        const injector = providers.length > 0 ? createEnvironmentInjector(providers, parentInjector, debugName) : null;
-        this.cachedInjectors.set(key, injector);
-      }
-      return this.cachedInjectors.get(key);
-    }
-    ngOnDestroy() {
-      try {
-        for (const injector of this.cachedInjectors.values()) {
-          if (injector !== null) {
-            injector.destroy();
-          }
-        }
-      } finally {
-        this.cachedInjectors.clear();
-      }
-    }
-    /** @nocollapse */
-    static #_ = this.ɵprov = ɵɵdefineInjectable({
-      token: CachedInjectorService,
-      providedIn: 'environment',
-      factory: () => new CachedInjectorService()
-    });
+function ɵɵdeferPrefetchOnInteraction(triggerIndex, walkUpTimes) {
+  const lView = getLView();
+  const tNode = getCurrentTNode();
+  const tView = lView[TVIEW];
+  const tDetails = getTDeferBlockDetails(tView, tNode);
+  if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
+    registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onInteraction, () => triggerPrefetching(tDetails, lView, tNode), 1 /* TriggerType.Prefetch */);
   }
-  return CachedInjectorService;
-})();
+}
 /**
- * The name of a field that Angular monkey-patches onto a component
- * class to store a function that loads defer-loadable dependencies
- * and applies metadata to a class.
+ * Creates runtime data structures for the `on viewport` deferred trigger.
+ * @param triggerIndex Index at which to find the trigger element.
+ * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
+ * @codeGenApi
  */
-const ASYNC_COMPONENT_METADATA_FN = '__ngAsyncComponentMetadataFn__';
+function ɵɵdeferOnViewport(triggerIndex, walkUpTimes) {
+  const lView = getLView();
+  const tNode = getCurrentTNode();
+  renderPlaceholder(lView, tNode);
+  registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onViewport, () => triggerDeferBlock(lView, tNode), 0 /* TriggerType.Regular */);
+}
 /**
- * If a given component has unresolved async metadata - returns a reference
- * to a function that applies component metadata after resolving defer-loadable
- * dependencies. Otherwise - this function returns `null`.
+ * Creates runtime data structures for the `prefetch on viewport` deferred trigger.
+ * @param triggerIndex Index at which to find the trigger element.
+ * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
+ * @codeGenApi
  */
-function getAsyncClassMetadataFn(type) {
-  const componentClass = type; // cast to `any`, so that we can read a monkey-patched field
-  return componentClass[ASYNC_COMPONENT_METADATA_FN] ?? null;
+function ɵɵdeferPrefetchOnViewport(triggerIndex, walkUpTimes) {
+  const lView = getLView();
+  const tNode = getCurrentTNode();
+  const tView = lView[TVIEW];
+  const tDetails = getTDeferBlockDetails(tView, tNode);
+  if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
+    registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onViewport, () => triggerPrefetching(tDetails, lView, tNode), 1 /* TriggerType.Prefetch */);
+  }
 }
+/********** Helper functions **********/
 /**
- * Handles the process of applying metadata info to a component class in case
- * component template has defer blocks (thus some dependencies became deferrable).
- *
- * @param type Component class where metadata should be added
- * @param dependencyLoaderFn Function that loads dependencies
- * @param metadataSetterFn Function that forms a scope in which the `setClassMetadata` is invoked
+ * Schedules triggering of a defer block for `on idle` and `on timer` conditions.
  */
-function setClassMetadataAsync(type, dependencyLoaderFn, metadataSetterFn) {
-  const componentClass = type; // cast to `any`, so that we can monkey-patch it
-  componentClass[ASYNC_COMPONENT_METADATA_FN] = () => Promise.all(dependencyLoaderFn()).then(dependencies => {
-    metadataSetterFn(...dependencies);
-    // Metadata is now set, reset field value to indicate that this component
-    // can by used/compiled synchronously.
-    componentClass[ASYNC_COMPONENT_METADATA_FN] = null;
-    return dependencies;
-  });
-  return componentClass[ASYNC_COMPONENT_METADATA_FN];
+function scheduleDelayedTrigger(scheduleFn) {
+  const lView = getLView();
+  const tNode = getCurrentTNode();
+  renderPlaceholder(lView, tNode);
+  const cleanupFn = scheduleFn(() => triggerDeferBlock(lView, tNode), lView);
+  const lDetails = getLDeferBlockDetails(lView, tNode);
+  storeTriggerCleanupFn(0 /* TriggerType.Regular */, lDetails, cleanupFn);
 }
 /**
- * Adds decorator, constructor, and property metadata to a given type via static metadata fields
- * on the type.
+ * Schedules prefetching for `on idle` and `on timer` triggers.
  *
- * These metadata fields can later be read with Angular's `ReflectionCapabilities` API.
+ * @param scheduleFn A function that does the scheduling.
+ */
+function scheduleDelayedPrefetching(scheduleFn) {
+  const lView = getLView();
+  const tNode = getCurrentTNode();
+  const tView = lView[TVIEW];
+  const tDetails = getTDeferBlockDetails(tView, tNode);
+  if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
+    const lDetails = getLDeferBlockDetails(lView, tNode);
+    const prefetch = () => triggerPrefetching(tDetails, lView, tNode);
+    const cleanupFn = scheduleFn(prefetch, lView);
+    storeTriggerCleanupFn(1 /* TriggerType.Prefetch */, lDetails, cleanupFn);
+  }
+}
+/**
+ * Transitions a defer block to the new state. Updates the  necessary
+ * data structures and renders corresponding block.
  *
- * Calls to `setClassMetadata` can be guarded by ngDevMode, resulting in the metadata assignments
- * being tree-shaken away during production builds.
+ * @param newState New state that should be applied to the defer block.
+ * @param tNode TNode that represents a defer block.
+ * @param lContainer Represents an instance of a defer block.
+ * @param skipTimerScheduling Indicates that `@loading` and `@placeholder` block
+ *   should be rendered immediately, even if they have `after` or `minimum` config
+ *   options setup. This flag to needed for testing APIs to transition defer block
+ *   between states via `DeferFixture.render` method.
  */
-function setClassMetadata(type, decorators, ctorParameters, propDecorators) {
-  return noSideEffects(() => {
-    const clazz = type;
-    if (decorators !== null) {
-      if (clazz.hasOwnProperty('decorators') && clazz.decorators !== undefined) {
-        clazz.decorators.push(...decorators);
-      } else {
-        clazz.decorators = decorators;
-      }
+function renderDeferBlockState(newState, tNode, lContainer, skipTimerScheduling = false) {
+  const hostLView = lContainer[PARENT];
+  const hostTView = hostLView[TVIEW];
+  // Check if this view is not destroyed. Since the loading process was async,
+  // the view might end up being destroyed by the time rendering happens.
+  if (isDestroyed(hostLView)) return;
+  // Make sure this TNode belongs to TView that represents host LView.
+  ngDevMode && assertTNodeForLView(tNode, hostLView);
+  const lDetails = getLDeferBlockDetails(hostLView, tNode);
+  ngDevMode && assertDefined(lDetails, 'Expected a defer block state defined');
+  const currentState = lDetails[DEFER_BLOCK_STATE];
+  if (isValidStateChange(currentState, newState) && isValidStateChange(lDetails[NEXT_DEFER_BLOCK_STATE] ?? -1, newState)) {
+    const tDetails = getTDeferBlockDetails(hostTView, tNode);
+    const needsScheduling = !skipTimerScheduling && (getLoadingBlockAfter(tDetails) !== null || getMinimumDurationForState(tDetails, DeferBlockState.Loading) !== null || getMinimumDurationForState(tDetails, DeferBlockState.Placeholder));
+    if (ngDevMode && needsScheduling) {
+      assertDefined(applyDeferBlockStateWithSchedulingImpl, 'Expected scheduling function to be defined');
     }
-    if (ctorParameters !== null) {
-      // Rather than merging, clobber the existing parameters. If other projects exist which
-      // use tsickle-style annotations and reflect over them in the same way, this could
-      // cause issues, but that is vanishingly unlikely.
-      clazz.ctorParameters = ctorParameters;
+    const applyStateFn = needsScheduling ? applyDeferBlockStateWithSchedulingImpl : applyDeferBlockState;
+    try {
+      applyStateFn(newState, lDetails, lContainer, tNode, hostLView);
+    } catch (error) {
+      handleError(hostLView, error);
     }
-    if (propDecorators !== null) {
-      // The property decorator objects are merged as it is possible different fields have
-      // different decorator types. Decorators on individual fields are not merged, as it's
-      // also incredibly unlikely that a field will be decorated both with an Angular
-      // decorator and a non-Angular decorator that's also been downleveled.
-      if (clazz.hasOwnProperty('propDecorators') && clazz.propDecorators !== undefined) {
-        clazz.propDecorators = {
-          ...clazz.propDecorators,
-          ...propDecorators
-        };
-      } else {
-        clazz.propDecorators = propDecorators;
+  }
+}
+/**
+ * Applies changes to the DOM to reflect a given state.
+ */
+function applyDeferBlockState(newState, lDetails, lContainer, tNode, hostLView) {
+  const stateTmplIndex = getTemplateIndexForState(newState, hostLView, tNode);
+  if (stateTmplIndex !== null) {
+    lDetails[DEFER_BLOCK_STATE] = newState;
+    const hostTView = hostLView[TVIEW];
+    const adjustedIndex = stateTmplIndex + HEADER_OFFSET;
+    const activeBlockTNode = getTNode(hostTView, adjustedIndex);
+    // There is only 1 view that can be present in an LContainer that
+    // represents a defer block, so always refer to the first one.
+    const viewIndex = 0;
+    removeLViewFromLContainer(lContainer, viewIndex);
+    let injector;
+    if (newState === DeferBlockState.Complete) {
+      // When we render a defer block in completed state, there might be
+      // newly loaded standalone components used within the block, which may
+      // import NgModules with providers. In order to make those providers
+      // available for components declared in that NgModule, we create an instance
+      // of environment injector to host those providers and pass this injector
+      // to the logic that creates a view.
+      const tDetails = getTDeferBlockDetails(hostTView, tNode);
+      const providers = tDetails.providers;
+      if (providers && providers.length > 0) {
+        const parentInjector = hostLView[INJECTOR$1];
+        const parentEnvInjector = parentInjector.get(EnvironmentInjector);
+        injector = parentEnvInjector.get(CachedInjectorService).getOrCreateInjector(tDetails, parentEnvInjector, providers, ngDevMode ? 'DeferBlock Injector' : '');
       }
     }
-  });
+    const dehydratedView = findMatchingDehydratedView(lContainer, activeBlockTNode.tView.ssrId);
+    const embeddedLView = createAndRenderEmbeddedLView(hostLView, activeBlockTNode, null, {
+      dehydratedView,
+      injector
+    });
+    addLViewToLContainer(lContainer, embeddedLView, viewIndex, shouldAddViewToDom(activeBlockTNode, dehydratedView));
+    markViewDirty(embeddedLView);
+  }
 }
-
-/*
- * This file exists to support compilation of @angular/core in Ivy mode.
- *
- * When the Angular compiler processes a compilation unit, it normally writes imports to
- * @angular/core. When compiling the core package itself this strategy isn't usable. Instead, the
- * compiler writes imports to this file.
- *
- * Only a subset of such imports are supported - core is not allowed to declare components or pipes.
- * A check in ngtsc's `R3SymbolsImportRewriter` validates this condition. The rewriter is only used
- * when compiling @angular/core and is responsible for translating an external name (prefixed with
- * ɵ) to the internal symbol name as exported below.
- *
- * The below symbols are used for @Injectable and @NgModule compilation.
+/**
+ * Extends the `applyDeferBlockState` with timer-based scheduling.
+ * This function becomes available on a page if there are defer blocks
+ * that use `after` or `minimum` parameters in the `@loading` or
+ * `@placeholder` blocks.
+ */
+function applyDeferBlockStateWithScheduling(newState, lDetails, lContainer, tNode, hostLView) {
+  const now = Date.now();
+  const hostTView = hostLView[TVIEW];
+  const tDetails = getTDeferBlockDetails(hostTView, tNode);
+  if (lDetails[STATE_IS_FROZEN_UNTIL] === null || lDetails[STATE_IS_FROZEN_UNTIL] <= now) {
+    lDetails[STATE_IS_FROZEN_UNTIL] = null;
+    const loadingAfter = getLoadingBlockAfter(tDetails);
+    const inLoadingAfterPhase = lDetails[LOADING_AFTER_CLEANUP_FN] !== null;
+    if (newState === DeferBlockState.Loading && loadingAfter !== null && !inLoadingAfterPhase) {
+      // Trying to render loading, but it has an `after` config,
+      // so schedule an update action after a timeout.
+      lDetails[NEXT_DEFER_BLOCK_STATE] = newState;
+      const cleanupFn = scheduleDeferBlockUpdate(loadingAfter, lDetails, tNode, lContainer, hostLView);
+      lDetails[LOADING_AFTER_CLEANUP_FN] = cleanupFn;
+    } else {
+      // If we transition to a complete or an error state and there is a pending
+      // operation to render loading after a timeout - invoke a cleanup operation,
+      // which stops the timer.
+      if (newState > DeferBlockState.Loading && inLoadingAfterPhase) {
+        lDetails[LOADING_AFTER_CLEANUP_FN]();
+        lDetails[LOADING_AFTER_CLEANUP_FN] = null;
+        lDetails[NEXT_DEFER_BLOCK_STATE] = null;
+      }
+      applyDeferBlockState(newState, lDetails, lContainer, tNode, hostLView);
+      const duration = getMinimumDurationForState(tDetails, newState);
+      if (duration !== null) {
+        lDetails[STATE_IS_FROZEN_UNTIL] = now + duration;
+        scheduleDeferBlockUpdate(duration, lDetails, tNode, lContainer, hostLView);
+      }
+    }
+  } else {
+    // We are still rendering the previous state.
+    // Update the `NEXT_DEFER_BLOCK_STATE`, which would be
+    // picked up once it's time to transition to the next state.
+    lDetails[NEXT_DEFER_BLOCK_STATE] = newState;
+  }
+}
+/**
+ * Schedules an update operation after a specified timeout.
  */
+function scheduleDeferBlockUpdate(timeout, lDetails, tNode, lContainer, hostLView) {
+  const callback = () => {
+    const nextState = lDetails[NEXT_DEFER_BLOCK_STATE];
+    lDetails[STATE_IS_FROZEN_UNTIL] = null;
+    lDetails[NEXT_DEFER_BLOCK_STATE] = null;
+    if (nextState !== null) {
+      renderDeferBlockState(nextState, tNode, lContainer);
+    }
+  };
+  return scheduleTimerTrigger(timeout, callback, hostLView);
+}
 /**
- * The existence of this constant (in this particular file) informs the Angular compiler that the
- * current program is actually @angular/core, which needs to be compiled specially.
+ * Checks whether we can transition to the next state.
+ *
+ * We transition to the next state if the previous state was represented
+ * with a number that is less than the next state. For example, if the current
+ * state is "loading" (represented as `1`), we should not show a placeholder
+ * (represented as `0`), but we can show a completed state (represented as `2`)
+ * or an error state (represented as `3`).
  */
-const ITS_JUST_ANGULAR = true;
-
+function isValidStateChange(currentState, newState) {
+  return currentState < newState;
+}
 /**
- * *Internal* service that keeps track of pending tasks happening in the system.
+ * Trigger prefetching of dependencies for a defer block.
  *
- * This information is needed to make sure that the serialization on the server
- * is delayed until all tasks in the queue (such as an initial navigation or a
- * pending HTTP request) are completed.
+ * @param tDetails Static information about this defer block.
+ * @param lView LView of a host view.
+ */
+function triggerPrefetching(tDetails, lView, tNode) {
+  if (lView[INJECTOR$1] && shouldTriggerDeferBlock(lView[INJECTOR$1])) {
+    triggerResourceLoading(tDetails, lView, tNode);
+  }
+}
+/**
+ * Trigger loading of defer block dependencies if the process hasn't started yet.
  *
- * Pending tasks continue to contribute to the stableness of `ApplicationRef`
- * throughout the lifetime of the application.
+ * @param tDetails Static information about this defer block.
+ * @param lView LView of a host view.
  */
-let PendingTasks = /*#__PURE__*/(() => {
-  class PendingTasks {
-    constructor() {
-      this.taskId = 0;
-      this.pendingTasks = new Set();
-      this.hasPendingTasks = new rxjs__WEBPACK_IMPORTED_MODULE_3__/* .BehaviorSubject */ .g(false);
-    }
-    get _hasPendingTasks() {
-      return this.hasPendingTasks.value;
+function triggerResourceLoading(tDetails, lView, tNode) {
+  const injector = lView[INJECTOR$1];
+  const tView = lView[TVIEW];
+  if (tDetails.loadingState !== DeferDependenciesLoadingState.NOT_STARTED) {
+    // 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 lDetails = getLDeferBlockDetails(lView, tNode);
+  const primaryBlockTNode = getPrimaryBlockTNode(tView, tDetails);
+  // Switch from NOT_STARTED -> IN_PROGRESS state.
+  tDetails.loadingState = DeferDependenciesLoadingState.IN_PROGRESS;
+  // Prefetching is triggered, cleanup all registered prefetch triggers.
+  invokeTriggerCleanupFns(1 /* TriggerType.Prefetch */, lDetails);
+  let dependenciesFn = tDetails.dependencyResolverFn;
+  if (ngDevMode) {
+    // Check if dependency function interceptor is configured.
+    const deferDependencyInterceptor = injector.get(DEFER_BLOCK_DEPENDENCY_INTERCEPTOR, null, {
+      optional: true
+    });
+    if (deferDependencyInterceptor) {
+      dependenciesFn = deferDependencyInterceptor.intercept(dependenciesFn);
     }
-    add() {
-      if (!this._hasPendingTasks) {
-        this.hasPendingTasks.next(true);
+  }
+  // Indicate that an application is not stable and has a pending task.
+  const pendingTasks = injector.get(PendingTasks);
+  const taskId = pendingTasks.add();
+  // The `dependenciesFn` might be `null` when all dependencies within
+  // a given defer block were eagerly referenced elsewhere in a file,
+  // thus no dynamic `import()`s were produced.
+  if (!dependenciesFn) {
+    tDetails.loadingPromise = Promise.resolve().then(() => {
+      tDetails.loadingPromise = null;
+      tDetails.loadingState = DeferDependenciesLoadingState.COMPLETE;
+      pendingTasks.remove(taskId);
+    });
+    return;
+  }
+  // Start downloading of defer block dependencies.
+  tDetails.loadingPromise = Promise.allSettled(dependenciesFn()).then(results => {
+    let failed = false;
+    const directiveDefs = [];
+    const pipeDefs = [];
+    for (const result of results) {
+      if (result.status === 'fulfilled') {
+        const dependency = result.value;
+        const directiveDef = getComponentDef(dependency) || getDirectiveDef(dependency);
+        if (directiveDef) {
+          directiveDefs.push(directiveDef);
+        } else {
+          const pipeDef = getPipeDef$1(dependency);
+          if (pipeDef) {
+            pipeDefs.push(pipeDef);
+          }
+        }
+      } else {
+        failed = true;
+        break;
       }
-      const taskId = this.taskId++;
-      this.pendingTasks.add(taskId);
-      return taskId;
     }
-    remove(taskId) {
-      this.pendingTasks.delete(taskId);
-      if (this.pendingTasks.size === 0 && this._hasPendingTasks) {
-        this.hasPendingTasks.next(false);
+    // Loading is completed, we no longer need the loading Promise
+    // and a pending task should also be removed.
+    tDetails.loadingPromise = null;
+    pendingTasks.remove(taskId);
+    if (failed) {
+      tDetails.loadingState = DeferDependenciesLoadingState.FAILED;
+      if (tDetails.errorTmplIndex === null) {
+        const templateLocation = getTemplateLocationDetails(lView);
+        const error = new RuntimeError(750 /* RuntimeErrorCode.DEFER_LOADING_FAILED */, ngDevMode && 'Loading dependencies for `@defer` block failed, ' + `but no \`@error\` block was configured${templateLocation}. ` + 'Consider using the `@error` block to render an error state.');
+        handleError(lView, error);
       }
-    }
-    ngOnDestroy() {
-      this.pendingTasks.clear();
-      if (this._hasPendingTasks) {
-        this.hasPendingTasks.next(false);
+    } else {
+      tDetails.loadingState = DeferDependenciesLoadingState.COMPLETE;
+      // Update directive and pipe registries to add newly downloaded dependencies.
+      const primaryBlockTView = primaryBlockTNode.tView;
+      if (directiveDefs.length > 0) {
+        primaryBlockTView.directiveRegistry = addDepsToRegistry(primaryBlockTView.directiveRegistry, directiveDefs);
+        // Extract providers from all NgModules imported by standalone components
+        // used within this defer block.
+        const directiveTypes = directiveDefs.map(def => def.type);
+        const providers = internalImportProvidersFrom(false, ...directiveTypes);
+        tDetails.providers = providers;
+      }
+      if (pipeDefs.length > 0) {
+        primaryBlockTView.pipeRegistry = addDepsToRegistry(primaryBlockTView.pipeRegistry, pipeDefs);
       }
     }
-    static #_ = this.ɵfac = function PendingTasks_Factory(t) {
-      return new (t || PendingTasks)();
-    };
-    static #_2 = this.ɵprov = /*@__PURE__*/ɵɵdefineInjectable({
-      token: PendingTasks,
-      factory: PendingTasks.ɵfac,
-      providedIn: 'root'
-    });
-  }
-  return PendingTasks;
-})();
-/*#__PURE__*/(() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(PendingTasks, [{
-    type: Injectable,
-    args: [{
-      providedIn: 'root'
-    }]
-  }], null, null);
-})();
-
-// TODO(misko): consider inlining
-/** Updates binding and returns the value. */
-function updateBinding(lView, bindingIndex, value) {
-  return lView[bindingIndex] = value;
+  });
 }
-/** Gets the current binding value. */
-function getBinding(lView, bindingIndex) {
-  ngDevMode && assertIndexInRange(lView, bindingIndex);
-  ngDevMode && assertNotSame(lView[bindingIndex], NO_CHANGE, 'Stored value should never be NO_CHANGE.');
-  return lView[bindingIndex];
+/** Utility function to render placeholder content (if present) */
+function renderPlaceholder(lView, tNode) {
+  const lContainer = lView[tNode.index];
+  ngDevMode && assertLContainer(lContainer);
+  renderDeferBlockState(DeferBlockState.Placeholder, tNode, lContainer);
 }
 /**
- * Updates binding if changed, then returns whether it was updated.
- *
- * This function also checks the `CheckNoChangesMode` and throws if changes are made.
- * Some changes (Objects/iterables) during `CheckNoChangesMode` are exempt to comply with VE
- * behavior.
+ * Subscribes to the "loading" Promise and renders corresponding defer sub-block,
+ * based on the loading results.
  *
- * @param lView current `LView`
- * @param bindingIndex The binding in the `LView` to check
- * @param value New value to check against `lView[bindingIndex]`
- * @returns `true` if the bindings has changed. (Throws if binding has changed during
- *          `CheckNoChangesMode`)
+ * @param lContainer Represents an instance of a defer block.
+ * @param tNode Represents defer block info shared across all instances.
  */
-function bindingUpdated(lView, bindingIndex, value) {
-  ngDevMode && assertNotSame(value, NO_CHANGE, 'Incoming value should never be NO_CHANGE.');
-  ngDevMode && assertLessThan(bindingIndex, lView.length, `Slot should have been initialized to NO_CHANGE`);
-  const oldValue = lView[bindingIndex];
-  if (Object.is(oldValue, value)) {
-    return false;
-  } else {
-    if (ngDevMode && isInCheckNoChangesMode()) {
-      // View engine didn't report undefined values as changed on the first checkNoChanges pass
-      // (before the change detection was run).
-      const oldValueToCompare = oldValue !== NO_CHANGE ? oldValue : undefined;
-      if (!devModeEqual(oldValueToCompare, value)) {
-        const details = getExpressionChangedErrorDetails(lView, bindingIndex, oldValueToCompare, value);
-        throwErrorIfNoChangesMode(oldValue === NO_CHANGE, details.oldValue, details.newValue, details.propName, lView);
-      }
-      // There was a change, but the `devModeEqual` decided that the change is exempt from an error.
-      // For this reason we exit as if no change. The early exit is needed to prevent the changed
-      // value to be written into `LView` (If we would write the new value that we would not see it
-      // as change on next CD.)
-      return false;
+function renderDeferStateAfterResourceLoading(tDetails, tNode, lContainer) {
+  ngDevMode && assertDefined(tDetails.loadingPromise, 'Expected loading Promise to exist on this defer block');
+  tDetails.loadingPromise.then(() => {
+    if (tDetails.loadingState === DeferDependenciesLoadingState.COMPLETE) {
+      ngDevMode && assertDeferredDependenciesLoaded(tDetails);
+      // Everything is loaded, show the primary block content
+      renderDeferBlockState(DeferBlockState.Complete, tNode, lContainer);
+    } else if (tDetails.loadingState === DeferDependenciesLoadingState.FAILED) {
+      renderDeferBlockState(DeferBlockState.Error, tNode, lContainer);
     }
-    lView[bindingIndex] = value;
-    return true;
-  }
-}
-/** Updates 2 bindings if changed, then returns whether either was updated. */
-function bindingUpdated2(lView, bindingIndex, exp1, exp2) {
-  const different = bindingUpdated(lView, bindingIndex, exp1);
-  return bindingUpdated(lView, bindingIndex + 1, exp2) || different;
-}
-/** Updates 3 bindings if changed, then returns whether any was updated. */
-function bindingUpdated3(lView, bindingIndex, exp1, exp2, exp3) {
-  const different = bindingUpdated2(lView, bindingIndex, exp1, exp2);
-  return bindingUpdated(lView, bindingIndex + 2, exp3) || different;
-}
-/** Updates 4 bindings if changed, then returns whether any was updated. */
-function bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4) {
-  const different = bindingUpdated2(lView, bindingIndex, exp1, exp2);
-  return bindingUpdated2(lView, bindingIndex + 2, exp3, exp4) || different;
+  });
 }
-function templateFirstCreatePass(index, tView, lView, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex) {
-  ngDevMode && assertFirstCreatePass(tView);
-  ngDevMode && ngDevMode.firstCreatePass++;
-  const tViewConsts = tView.consts;
-  // TODO(pk): refactor getOrCreateTNode to have the "create" only version
-  const tNode = getOrCreateTNode(tView, index, 4 /* TNodeType.Container */, tagName || null, getConstant(tViewConsts, attrsIndex));
-  resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex));
-  registerPostOrderHooks(tView, tNode);
-  const embeddedTView = tNode.tView = createTView(2 /* TViewType.Embedded */, tNode, templateFn, decls, vars, tView.directiveRegistry, tView.pipeRegistry, null, tView.schemas, tViewConsts, null /* ssrId */);
-  if (tView.queries !== null) {
-    tView.queries.template(tView, tNode);
-    embeddedTView.queries = tView.queries.embeddedTView(tNode);
+/**
+ * Attempts to trigger loading of defer block dependencies.
+ * If the block is already in a loading, completed or an error state -
+ * no additional actions are taken.
+ */
+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 lDetails = getLDeferBlockDetails(lView, tNode);
+  const tDetails = getTDeferBlockDetails(tView, tNode);
+  // Defer block is triggered, cleanup all registered trigger functions.
+  invokeAllTriggerCleanupFns(lDetails);
+  switch (tDetails.loadingState) {
+    case DeferDependenciesLoadingState.NOT_STARTED:
+      renderDeferBlockState(DeferBlockState.Loading, tNode, lContainer);
+      triggerResourceLoading(tDetails, lView, tNode);
+      // The `loadingState` might have changed to "loading".
+      if (tDetails.loadingState === DeferDependenciesLoadingState.IN_PROGRESS) {
+        renderDeferStateAfterResourceLoading(tDetails, tNode, lContainer);
+      }
+      break;
+    case DeferDependenciesLoadingState.IN_PROGRESS:
+      renderDeferBlockState(DeferBlockState.Loading, tNode, lContainer);
+      renderDeferStateAfterResourceLoading(tDetails, tNode, lContainer);
+      break;
+    case DeferDependenciesLoadingState.COMPLETE:
+      ngDevMode && assertDeferredDependenciesLoaded(tDetails);
+      renderDeferBlockState(DeferBlockState.Complete, tNode, lContainer);
+      break;
+    case DeferDependenciesLoadingState.FAILED:
+      renderDeferBlockState(DeferBlockState.Error, tNode, lContainer);
+      break;
+    default:
+      if (ngDevMode) {
+        throwError('Unknown defer block state');
+      }
   }
-  return tNode;
 }
+
 /**
- * Creates an LContainer for an ng-template (dynamically-inserted view), e.g.
+ * Updates the value of or removes a bound attribute on an Element.
  *
- * <ng-template #foo>
- *    <div></div>
- * </ng-template>
+ * Used in the case of `[attr.title]="value"`
  *
- * @param index The index of the container in the data array
- * @param templateFn Inline template
- * @param decls The number of nodes, local refs, and pipes for this template
- * @param vars The number of bindings for this template
- * @param tagName The name of the container element, if applicable
- * @param attrsIndex Index of template attributes in the `consts` array.
- * @param localRefs Index of the local references in the `consts` array.
- * @param localRefExtractor A function which extracts local-refs values from the template.
- *        Defaults to the current element associated with the local-ref.
+ * @param name name The name of the attribute.
+ * @param value value The attribute is removed when value is `null` or `undefined`.
+ *                  Otherwise the attribute value is set to the stringified value.
+ * @param sanitizer An optional function used to sanitize the value.
+ * @param namespace Optional namespace to use when setting the attribute.
  *
  * @codeGenApi
  */
-function ɵɵtemplate(index, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex, localRefExtractor) {
+function ɵɵattribute(name, value, sanitizer, namespace) {
   const lView = getLView();
-  const tView = getTView();
-  const adjustedIndex = index + HEADER_OFFSET;
-  const tNode = tView.firstCreatePass ? templateFirstCreatePass(adjustedIndex, tView, lView, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex) : tView.data[adjustedIndex];
-  setCurrentTNode(tNode, false);
-  const comment = _locateOrCreateContainerAnchor(tView, lView, tNode, index);
-  if (wasLastNodeCreated()) {
-    appendChild(tView, lView, comment, tNode);
-  }
-  attachPatchData(comment, lView);
-  const lContainer = createLContainer(comment, lView, comment, tNode);
-  lView[adjustedIndex] = lContainer;
-  addToViewTree(lView, lContainer);
-  // If hydration is enabled, looks up dehydrated views in the DOM
-  // using hydration annotation info and stores those views on LContainer.
-  // In client-only mode, this function is a noop.
-  populateDehydratedViewsInLContainer(lContainer, tNode, lView);
-  if (isDirectiveHost(tNode)) {
-    createDirectivesInstances(tView, lView, tNode);
-  }
-  if (localRefsIndex != null) {
-    saveResolvedLocalsInData(lView, tNode, localRefExtractor);
+  const bindingIndex = nextBindingIndex();
+  if (bindingUpdated(lView, bindingIndex, value)) {
+    const tView = getTView();
+    const tNode = getSelectedTNode();
+    elementAttributeInternal(tNode, lView, name, value, sanitizer, namespace);
+    ngDevMode && storePropertyBindingMetadata(tView.data, tNode, 'attr.' + name, bindingIndex);
   }
-  return ɵɵtemplate;
+  return ɵɵattribute;
 }
-let _locateOrCreateContainerAnchor = createContainerAnchorImpl;
+
 /**
- * Regular creation mode for LContainers and their anchor (comment) nodes.
+ * Create interpolation bindings with a variable number of expressions.
+ *
+ * If there are 1 to 8 expressions `interpolation1()` to `interpolation8()` should be used instead.
+ * Those are faster because there is no need to create an array of expressions and iterate over it.
+ *
+ * `values`:
+ * - has static text at even indexes,
+ * - has evaluated expressions at odd indexes.
+ *
+ * Returns the concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
  */
-function createContainerAnchorImpl(tView, lView, tNode, index) {
-  lastNodeWasCreated(true);
-  return lView[RENDERER].createComment(ngDevMode ? 'container' : '');
-}
-/**
- * Enables hydration code path (to lookup existing elements in DOM)
- * in addition to the regular creation mode for LContainers and their
- * anchor (comment) nodes.
- */
-function locateOrCreateContainerAnchorImpl(tView, lView, tNode, index) {
-  const hydrationInfo = lView[HYDRATION];
-  const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1() || isDisconnectedNode$1(hydrationInfo, index);
-  lastNodeWasCreated(isNodeCreationMode);
-  // Regular creation mode.
-  if (isNodeCreationMode) {
-    return createContainerAnchorImpl(tView, lView, tNode, index);
+function interpolationV(lView, values) {
+  ngDevMode && assertLessThan(2, values.length, 'should have at least 3 values');
+  ngDevMode && assertEqual(values.length % 2, 1, 'should have an odd number of values');
+  let isBindingUpdated = false;
+  let bindingIndex = getBindingIndex();
+  for (let i = 1; i < values.length; i += 2) {
+    // Check if bindings (odd indexes) have changed
+    isBindingUpdated = bindingUpdated(lView, bindingIndex++, values[i]) || isBindingUpdated;
   }
-  const ssrId = hydrationInfo.data[TEMPLATES]?.[index] ?? null;
-  // Apply `ssrId` value to the underlying TView if it was not previously set.
-  //
-  // There might be situations when the same component is present in a template
-  // multiple times and some instances are opted-out of using hydration via
-  // `ngSkipHydration` attribute. In this scenario, at the time a TView is created,
-  // the `ssrId` might be `null` (if the first component is opted-out of hydration).
-  // The code below makes sure that the `ssrId` is applied to the TView if it's still
-  // `null` and verifies we never try to override it with a different value.
-  if (ssrId !== null && tNode.tView !== null) {
-    if (tNode.tView.ssrId === null) {
-      tNode.tView.ssrId = ssrId;
-    } else {
-      ngDevMode && assertEqual(tNode.tView.ssrId, ssrId, 'Unexpected value of the `ssrId` for this TView');
-    }
+  setBindingIndex(bindingIndex);
+  if (!isBindingUpdated) {
+    return NO_CHANGE;
   }
-  // Hydration mode, looking up existing elements in DOM.
-  const currentRNode = locateNextRNode(hydrationInfo, tView, lView, tNode);
-  ngDevMode && validateNodeExists(currentRNode, lView, tNode);
-  setSegmentHead(hydrationInfo, index, currentRNode);
-  const viewContainerSize = calcSerializedContainerSize(hydrationInfo, index);
-  const comment = siblingAfter(viewContainerSize, currentRNode);
-  if (ngDevMode) {
-    validateMatchingNode(comment, Node.COMMENT_NODE, null, lView, tNode);
-    markRNodeAsClaimedByHydration(comment);
+  // Build the updated content
+  let content = values[0];
+  for (let i = 1; i < values.length; i += 2) {
+    content += renderStringify(values[i]) + values[i + 1];
   }
-  return comment;
-}
-function enableLocateOrCreateContainerAnchorImpl() {
-  _locateOrCreateContainerAnchor = locateOrCreateContainerAnchorImpl;
+  return content;
 }
-
 /**
- * Describes the state of defer block dependency loading.
+ * Creates an interpolation binding with 1 expression.
+ *
+ * @param prefix static value used for concatenation only.
+ * @param v0 value checked for change.
+ * @param suffix static value used for concatenation only.
  */
-var DeferDependenciesLoadingState = /*#__PURE__*/function (DeferDependenciesLoadingState) {
-  /** Initial state, dependency loading is not yet triggered */
-  DeferDependenciesLoadingState[DeferDependenciesLoadingState["NOT_STARTED"] = 0] = "NOT_STARTED";
-  /** Dependency loading is in progress */
-  DeferDependenciesLoadingState[DeferDependenciesLoadingState["IN_PROGRESS"] = 1] = "IN_PROGRESS";
-  /** Dependency loading has completed successfully */
-  DeferDependenciesLoadingState[DeferDependenciesLoadingState["COMPLETE"] = 2] = "COMPLETE";
-  /** Dependency loading has failed */
-  DeferDependenciesLoadingState[DeferDependenciesLoadingState["FAILED"] = 3] = "FAILED";
-  return DeferDependenciesLoadingState;
-}(DeferDependenciesLoadingState || {});
-/** Slot index where `minimum` parameter value is stored. */
-const MINIMUM_SLOT = 0;
-/** Slot index where `after` parameter value is stored. */
-const LOADING_AFTER_SLOT = 1;
+function interpolation1(lView, prefix, v0, suffix) {
+  const different = bindingUpdated(lView, nextBindingIndex(), v0);
+  return different ? prefix + renderStringify(v0) + suffix : NO_CHANGE;
+}
 /**
- * Describes the current state of this defer block instance.
- *
- * @publicApi
- * @developerPreview
+ * Creates an interpolation binding with 2 expressions.
  */
-var DeferBlockState = /*#__PURE__*/function (DeferBlockState) {
-  /** The placeholder block content is rendered */
-  DeferBlockState[DeferBlockState["Placeholder"] = 0] = "Placeholder";
-  /** The loading block content is rendered */
-  DeferBlockState[DeferBlockState["Loading"] = 1] = "Loading";
-  /** The main content block content is rendered */
-  DeferBlockState[DeferBlockState["Complete"] = 2] = "Complete";
-  /** The error block content is rendered */
-  DeferBlockState[DeferBlockState["Error"] = 3] = "Error";
-  return DeferBlockState;
-}(DeferBlockState || {});
+function interpolation2(lView, prefix, v0, i0, v1, suffix) {
+  const bindingIndex = getBindingIndex();
+  const different = bindingUpdated2(lView, bindingIndex, v0, v1);
+  incrementBindingIndex(2);
+  return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + suffix : NO_CHANGE;
+}
 /**
- * Describes the initial state of this defer block instance.
- *
- * Note: this state is internal only and *must* be represented
- * with a number lower than any value in the `DeferBlockState` enum.
+ * Creates an interpolation binding with 3 expressions.
  */
-var DeferBlockInternalState = /*#__PURE__*/function (DeferBlockInternalState) {
-  /** Initial state. Nothing is rendered yet. */
-  DeferBlockInternalState[DeferBlockInternalState["Initial"] = -1] = "Initial";
-  return DeferBlockInternalState;
-}(DeferBlockInternalState || {});
-const NEXT_DEFER_BLOCK_STATE = 0;
-// Note: it's *important* to keep the state in this slot, because this slot
-// is used by runtime logic to differentiate between LViews, LContainers and
-// other types (see `isLView` and `isLContainer` functions). In case of defer
-// blocks, this slot would always be a number.
-const DEFER_BLOCK_STATE = 1;
-const STATE_IS_FROZEN_UNTIL = 2;
-const LOADING_AFTER_CLEANUP_FN = 3;
-const TRIGGER_CLEANUP_FNS = 4;
-const PREFETCH_TRIGGER_CLEANUP_FNS = 5;
+function interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix) {
+  const bindingIndex = getBindingIndex();
+  const different = bindingUpdated3(lView, bindingIndex, v0, v1, v2);
+  incrementBindingIndex(3);
+  return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + suffix : NO_CHANGE;
+}
 /**
- * Options for configuring defer blocks behavior.
- * @publicApi
- * @developerPreview
+ * Create an interpolation binding with 4 expressions.
  */
-var DeferBlockBehavior = /*#__PURE__*/function (DeferBlockBehavior) {
-  /**
-   * Manual triggering mode for defer blocks. Provides control over when defer blocks render
-   * and which state they render.
-   */
-  DeferBlockBehavior[DeferBlockBehavior["Manual"] = 0] = "Manual";
-  /**
-   * Playthrough mode for defer blocks. This mode behaves like defer blocks would in a browser.
-   * This is the default behavior in test environments.
-   */
-  DeferBlockBehavior[DeferBlockBehavior["Playthrough"] = 1] = "Playthrough";
-  return DeferBlockBehavior;
-}(DeferBlockBehavior || {});
-/*!
- * @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
+function interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix) {
+  const bindingIndex = getBindingIndex();
+  const different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
+  incrementBindingIndex(4);
+  return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + i2 + renderStringify(v3) + suffix : NO_CHANGE;
+}
+/**
+ * Creates an interpolation binding with 5 expressions.
  */
+function interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix) {
+  const bindingIndex = getBindingIndex();
+  let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
+  different = bindingUpdated(lView, bindingIndex + 4, v4) || different;
+  incrementBindingIndex(5);
+  return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + i2 + renderStringify(v3) + i3 + renderStringify(v4) + suffix : NO_CHANGE;
+}
 /**
- * Registers a cleanup function associated with a prefetching trigger
- * or a regular trigger of a defer block.
+ * Creates an interpolation binding with 6 expressions.
  */
-function storeTriggerCleanupFn(type, lDetails, cleanupFn) {
-  const key = type === 1 /* TriggerType.Prefetch */ ? PREFETCH_TRIGGER_CLEANUP_FNS : TRIGGER_CLEANUP_FNS;
-  if (lDetails[key] === null) {
-    lDetails[key] = [];
-  }
-  lDetails[key].push(cleanupFn);
+function interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix) {
+  const bindingIndex = getBindingIndex();
+  let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
+  different = bindingUpdated2(lView, bindingIndex + 4, v4, v5) || different;
+  incrementBindingIndex(6);
+  return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + i2 + renderStringify(v3) + i3 + renderStringify(v4) + i4 + renderStringify(v5) + suffix : NO_CHANGE;
 }
 /**
- * Invokes registered cleanup functions either for prefetch or for regular triggers.
+ * Creates an interpolation binding with 7 expressions.
  */
-function invokeTriggerCleanupFns(type, lDetails) {
-  const key = type === 1 /* TriggerType.Prefetch */ ? PREFETCH_TRIGGER_CLEANUP_FNS : TRIGGER_CLEANUP_FNS;
-  const cleanupFns = lDetails[key];
-  if (cleanupFns !== null) {
-    for (const cleanupFn of cleanupFns) {
-      cleanupFn();
-    }
-    lDetails[key] = null;
-  }
+function interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix) {
+  const bindingIndex = getBindingIndex();
+  let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
+  different = bindingUpdated3(lView, bindingIndex + 4, v4, v5, v6) || different;
+  incrementBindingIndex(7);
+  return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + i2 + renderStringify(v3) + i3 + renderStringify(v4) + i4 + renderStringify(v5) + i5 + renderStringify(v6) + suffix : NO_CHANGE;
 }
 /**
- * Invokes registered cleanup functions for both prefetch and regular triggers.
+ * Creates an interpolation binding with 8 expressions.
  */
-function invokeAllTriggerCleanupFns(lDetails) {
-  invokeTriggerCleanupFns(1 /* TriggerType.Prefetch */, lDetails);
-  invokeTriggerCleanupFns(0 /* TriggerType.Regular */, lDetails);
+function interpolation8(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix) {
+  const bindingIndex = getBindingIndex();
+  let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
+  different = bindingUpdated4(lView, bindingIndex + 4, v4, v5, v6, v7) || different;
+  incrementBindingIndex(8);
+  return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + i2 + renderStringify(v3) + i3 + renderStringify(v4) + i4 + renderStringify(v5) + i5 + renderStringify(v6) + i6 + renderStringify(v7) + suffix : NO_CHANGE;
 }
 
-// Public API for Zone
-
 /**
- * Calculates a data slot index for defer block info (either static or
- * instance-specific), given an index of a defer instruction.
+ *
+ * Update an interpolated attribute on an element with single bound value surrounded by text.
+ *
+ * Used when the value passed to a property has 1 interpolated value in it:
+ *
+ * ```html
+ * <div attr.title="prefix{{v0}}suffix"></div>
+ * ```
+ *
+ * Its compiled representation is::
+ *
+ * ```ts
+ * ɵɵattributeInterpolate1('title', 'prefix', v0, 'suffix');
+ * ```
+ *
+ * @param attrName The name of the attribute to update
+ * @param prefix Static value used for concatenation only.
+ * @param v0 Value checked for change.
+ * @param suffix Static value used for concatenation only.
+ * @param sanitizer An optional sanitizer function
+ * @returns itself, so that it may be chained.
+ * @codeGenApi
  */
-function getDeferBlockDataIndex(deferBlockIndex) {
-  // Instance state is located at the *next* position
-  // after the defer block slot in an LView or TView.data.
-  return deferBlockIndex + 1;
-}
-/** Retrieves a defer block state from an LView, given a TNode that represents a block. */
-function getLDeferBlockDetails(lView, tNode) {
-  const tView = lView[TVIEW];
-  const slotIndex = getDeferBlockDataIndex(tNode.index);
-  ngDevMode && assertIndexInDeclRange(tView, slotIndex);
-  return lView[slotIndex];
-}
-/** Stores a defer block instance state in LView. */
-function setLDeferBlockDetails(lView, deferBlockIndex, lDetails) {
-  const tView = lView[TVIEW];
-  const slotIndex = getDeferBlockDataIndex(deferBlockIndex);
-  ngDevMode && assertIndexInDeclRange(tView, slotIndex);
-  lView[slotIndex] = lDetails;
-}
-/** Retrieves static info about a defer block, given a TView and a TNode that represents a block. */
-function getTDeferBlockDetails(tView, tNode) {
-  const slotIndex = getDeferBlockDataIndex(tNode.index);
-  ngDevMode && assertIndexInDeclRange(tView, slotIndex);
-  return tView.data[slotIndex];
-}
-/** Stores a defer block static info in `TView.data`. */
-function setTDeferBlockDetails(tView, deferBlockIndex, deferBlockConfig) {
-  const slotIndex = getDeferBlockDataIndex(deferBlockIndex);
-  ngDevMode && assertIndexInDeclRange(tView, slotIndex);
-  tView.data[slotIndex] = deferBlockConfig;
-}
-function getTemplateIndexForState(newState, hostLView, tNode) {
-  const tView = hostLView[TVIEW];
-  const tDetails = getTDeferBlockDetails(tView, tNode);
-  switch (newState) {
-    case DeferBlockState.Complete:
-      return tDetails.primaryTmplIndex;
-    case DeferBlockState.Loading:
-      return tDetails.loadingTmplIndex;
-    case DeferBlockState.Error:
-      return tDetails.errorTmplIndex;
-    case DeferBlockState.Placeholder:
-      return tDetails.placeholderTmplIndex;
-    default:
-      ngDevMode && throwError(`Unexpected defer block state: ${newState}`);
-      return null;
+function ɵɵattributeInterpolate1(attrName, prefix, v0, suffix, sanitizer, namespace) {
+  const lView = getLView();
+  const interpolatedValue = interpolation1(lView, prefix, v0, suffix);
+  if (interpolatedValue !== NO_CHANGE) {
+    const tNode = getSelectedTNode();
+    elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
+    ngDevMode && storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 1, prefix, suffix);
   }
+  return ɵɵattributeInterpolate1;
 }
 /**
- * Returns a minimum amount of time that a given state should be rendered for,
- * taking into account `minimum` parameter value. If the `minimum` value is
- * not specified - returns `null`.
+ *
+ * Update an interpolated attribute on an element with 2 bound values surrounded by text.
+ *
+ * Used when the value passed to a property has 2 interpolated values in it:
+ *
+ * ```html
+ * <div attr.title="prefix{{v0}}-{{v1}}suffix"></div>
+ * ```
+ *
+ * Its compiled representation is::
+ *
+ * ```ts
+ * ɵɵattributeInterpolate2('title', 'prefix', v0, '-', v1, 'suffix');
+ * ```
+ *
+ * @param attrName The name of the attribute to update
+ * @param prefix Static value used for concatenation only.
+ * @param v0 Value checked for change.
+ * @param i0 Static value used for concatenation only.
+ * @param v1 Value checked for change.
+ * @param suffix Static value used for concatenation only.
+ * @param sanitizer An optional sanitizer function
+ * @returns itself, so that it may be chained.
+ * @codeGenApi
  */
-function getMinimumDurationForState(tDetails, currentState) {
-  if (currentState === DeferBlockState.Placeholder) {
-    return tDetails.placeholderBlockConfig?.[MINIMUM_SLOT] ?? null;
-  } else if (currentState === DeferBlockState.Loading) {
-    return tDetails.loadingBlockConfig?.[MINIMUM_SLOT] ?? null;
+function ɵɵattributeInterpolate2(attrName, prefix, v0, i0, v1, suffix, sanitizer, namespace) {
+  const lView = getLView();
+  const interpolatedValue = interpolation2(lView, prefix, v0, i0, v1, suffix);
+  if (interpolatedValue !== NO_CHANGE) {
+    const tNode = getSelectedTNode();
+    elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
+    ngDevMode && storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 2, prefix, i0, suffix);
   }
-  return null;
-}
-/** Retrieves the value of the `after` parameter on the @loading block. */
-function getLoadingBlockAfter(tDetails) {
-  return tDetails.loadingBlockConfig?.[LOADING_AFTER_SLOT] ?? null;
+  return ɵɵattributeInterpolate2;
 }
 /**
- * Adds downloaded dependencies into a directive or a pipe registry,
- * making sure that a dependency doesn't yet exist in the registry.
+ *
+ * Update an interpolated attribute on an element with 3 bound values surrounded by text.
+ *
+ * Used when the value passed to a property has 3 interpolated values in it:
+ *
+ * ```html
+ * <div attr.title="prefix{{v0}}-{{v1}}-{{v2}}suffix"></div>
+ * ```
+ *
+ * Its compiled representation is::
+ *
+ * ```ts
+ * ɵɵattributeInterpolate3(
+ * 'title', 'prefix', v0, '-', v1, '-', v2, 'suffix');
+ * ```
+ *
+ * @param attrName The name of the attribute to update
+ * @param prefix Static value used for concatenation only.
+ * @param v0 Value checked for change.
+ * @param i0 Static value used for concatenation only.
+ * @param v1 Value checked for change.
+ * @param i1 Static value used for concatenation only.
+ * @param v2 Value checked for change.
+ * @param suffix Static value used for concatenation only.
+ * @param sanitizer An optional sanitizer function
+ * @returns itself, so that it may be chained.
+ * @codeGenApi
  */
-function addDepsToRegistry(currentDeps, newDeps) {
-  if (!currentDeps || currentDeps.length === 0) {
-    return newDeps;
-  }
-  const currentDepSet = new Set(currentDeps);
-  for (const dep of newDeps) {
-    currentDepSet.add(dep);
+function ɵɵattributeInterpolate3(attrName, prefix, v0, i0, v1, i1, v2, suffix, sanitizer, namespace) {
+  const lView = getLView();
+  const interpolatedValue = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix);
+  if (interpolatedValue !== NO_CHANGE) {
+    const tNode = getSelectedTNode();
+    elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
+    ngDevMode && storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 3, prefix, i0, i1, suffix);
   }
-  // If `currentDeps` is the same length, there were no new deps and can
-  // return the original array.
-  return currentDeps.length === currentDepSet.size ? currentDeps : Array.from(currentDepSet);
-}
-/** Retrieves a TNode that represents main content of a defer block. */
-function getPrimaryBlockTNode(tView, tDetails) {
-  const adjustedIndex = tDetails.primaryTmplIndex + HEADER_OFFSET;
-  return getTNode(tView, adjustedIndex);
+  return ɵɵattributeInterpolate3;
 }
 /**
- * Asserts whether all dependencies for a defer block are loaded.
- * Always run this function (in dev mode) before rendering a defer
- * block in completed state.
+ *
+ * Update an interpolated attribute on an element with 4 bound values surrounded by text.
+ *
+ * Used when the value passed to a property has 4 interpolated values in it:
+ *
+ * ```html
+ * <div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}suffix"></div>
+ * ```
+ *
+ * Its compiled representation is::
+ *
+ * ```ts
+ * ɵɵattributeInterpolate4(
+ * 'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix');
+ * ```
+ *
+ * @param attrName The name of the attribute to update
+ * @param prefix Static value used for concatenation only.
+ * @param v0 Value checked for change.
+ * @param i0 Static value used for concatenation only.
+ * @param v1 Value checked for change.
+ * @param i1 Static value used for concatenation only.
+ * @param v2 Value checked for change.
+ * @param i2 Static value used for concatenation only.
+ * @param v3 Value checked for change.
+ * @param suffix Static value used for concatenation only.
+ * @param sanitizer An optional sanitizer function
+ * @returns itself, so that it may be chained.
+ * @codeGenApi
  */
-function assertDeferredDependenciesLoaded(tDetails) {
-  assertEqual(tDetails.loadingState, DeferDependenciesLoadingState.COMPLETE, 'Expecting all deferred dependencies to be loaded.');
+function ɵɵattributeInterpolate4(attrName, prefix, v0, i0, v1, i1, v2, i2, v3, suffix, sanitizer, namespace) {
+  const lView = getLView();
+  const interpolatedValue = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix);
+  if (interpolatedValue !== NO_CHANGE) {
+    const tNode = getSelectedTNode();
+    elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
+    ngDevMode && storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 4, prefix, i0, i1, i2, suffix);
+  }
+  return ɵɵattributeInterpolate4;
 }
 /**
- * Determines if a given value matches the expected structure of a defer block
  *
- * We can safely rely on the primaryTmplIndex because every defer block requires
- * that a primary template exists. All the other template options are optional.
- */
-function isTDeferBlockDetails(value) {
-  return value !== null && typeof value === 'object' && typeof value.primaryTmplIndex === 'number';
-}
-
-/*!
- * @license
- * Copyright Google LLC All Rights Reserved.
+ * Update an interpolated attribute on an element with 5 bound values surrounded by text.
  *
- * 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
+ * Used when the value passed to a property has 5 interpolated values in it:
+ *
+ * ```html
+ * <div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}suffix"></div>
+ * ```
+ *
+ * Its compiled representation is::
+ *
+ * ```ts
+ * ɵɵattributeInterpolate5(
+ * 'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix');
+ * ```
+ *
+ * @param attrName The name of the attribute to update
+ * @param prefix Static value used for concatenation only.
+ * @param v0 Value checked for change.
+ * @param i0 Static value used for concatenation only.
+ * @param v1 Value checked for change.
+ * @param i1 Static value used for concatenation only.
+ * @param v2 Value checked for change.
+ * @param i2 Static value used for concatenation only.
+ * @param v3 Value checked for change.
+ * @param i3 Static value used for concatenation only.
+ * @param v4 Value checked for change.
+ * @param suffix Static value used for concatenation only.
+ * @param sanitizer An optional sanitizer function
+ * @returns itself, so that it may be chained.
+ * @codeGenApi
  */
-/** Configuration object used to register passive and capturing events. */
-const eventListenerOptions = {
-  passive: true,
-  capture: true
-};
-/** Keeps track of the currently-registered `on hover` triggers. */
-const hoverTriggers = /*#__PURE__*/new WeakMap();
-/** Keeps track of the currently-registered `on interaction` triggers. */
-const interactionTriggers = /*#__PURE__*/new WeakMap();
-/** Currently-registered `viewport` triggers. */
-const viewportTriggers = /*#__PURE__*/new WeakMap();
-/** Names of the events considered as interaction events. */
-const interactionEventNames = ['click', 'keydown'];
-/** Names of the events considered as hover events. */
-const hoverEventNames = ['mouseenter', 'focusin'];
-/** `IntersectionObserver` used to observe `viewport` triggers. */
-let intersectionObserver = null;
-/** Number of elements currently observed with `viewport` triggers. */
-let observedViewportElements = 0;
-/** Object keeping track of registered callbacks for a deferred block trigger. */
-class DeferEventEntry {
-  constructor() {
-    this.callbacks = new Set();
-    this.listener = () => {
-      for (const callback of this.callbacks) {
-        callback();
-      }
-    };
+function ɵɵattributeInterpolate5(attrName, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix, sanitizer, namespace) {
+  const lView = getLView();
+  const interpolatedValue = interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
+  if (interpolatedValue !== NO_CHANGE) {
+    const tNode = getSelectedTNode();
+    elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
+    ngDevMode && storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 5, prefix, i0, i1, i2, i3, suffix);
   }
-}
-/**
- * Registers an interaction trigger.
- * @param trigger Element that is the trigger.
- * @param callback Callback to be invoked when the trigger is interacted with.
- */
-function onInteraction(trigger, callback) {
-  let entry = interactionTriggers.get(trigger);
-  // If this is the first entry for this element, add the listeners.
-  if (!entry) {
-    // Note that managing events centrally like this lends itself well to using global
-    // event delegation. It currently does delegation at the element level, rather than the
-    // document level, because:
-    // 1. Global delegation is the most effective when there are a lot of events being registered
-    // at the same time. Deferred blocks are unlikely to be used in such a way.
-    // 2. Matching events to their target isn't free. For each `click` and `keydown` event we
-    // would have look through all the triggers and check if the target either is the element
-    // itself or it's contained within the element. Given that `click` and `keydown` are some
-    // of the most common events, this may end up introducing a lot of runtime overhead.
-    // 3. We're still registering only two events per element, no matter how many deferred blocks
-    // are referencing it.
-    entry = new DeferEventEntry();
-    interactionTriggers.set(trigger, entry);
-    for (const name of interactionEventNames) {
-      trigger.addEventListener(name, entry.listener, eventListenerOptions);
-    }
-  }
-  entry.callbacks.add(callback);
-  return () => {
-    const {
-      callbacks,
-      listener
-    } = entry;
-    callbacks.delete(callback);
-    if (callbacks.size === 0) {
-      interactionTriggers.delete(trigger);
-      for (const name of interactionEventNames) {
-        trigger.removeEventListener(name, listener, eventListenerOptions);
-      }
-    }
-  };
-}
-/**
- * Registers a hover trigger.
- * @param trigger Element that is the trigger.
- * @param callback Callback to be invoked when the trigger is hovered over.
- */
-function onHover(trigger, callback) {
-  let entry = hoverTriggers.get(trigger);
-  // If this is the first entry for this element, add the listener.
-  if (!entry) {
-    entry = new DeferEventEntry();
-    hoverTriggers.set(trigger, entry);
-    for (const name of hoverEventNames) {
-      trigger.addEventListener(name, entry.listener, eventListenerOptions);
-    }
-  }
-  entry.callbacks.add(callback);
-  return () => {
-    const {
-      callbacks,
-      listener
-    } = entry;
-    callbacks.delete(callback);
-    if (callbacks.size === 0) {
-      for (const name of hoverEventNames) {
-        trigger.removeEventListener(name, listener, eventListenerOptions);
-      }
-      hoverTriggers.delete(trigger);
-    }
-  };
-}
-/**
- * Registers a viewport trigger.
- * @param trigger Element that is the trigger.
- * @param callback Callback to be invoked when the trigger comes into the viewport.
- * @param injector Injector that can be used by the trigger to resolve DI tokens.
- */
-function onViewport(trigger, callback, injector) {
-  const ngZone = injector.get(NgZone);
-  let entry = viewportTriggers.get(trigger);
-  intersectionObserver = intersectionObserver || ngZone.runOutsideAngular(() => {
-    return new IntersectionObserver(entries => {
-      for (const current of entries) {
-        // Only invoke the callbacks if the specific element is intersecting.
-        if (current.isIntersecting && viewportTriggers.has(current.target)) {
-          ngZone.run(viewportTriggers.get(current.target).listener);
-        }
-      }
-    });
-  });
-  if (!entry) {
-    entry = new DeferEventEntry();
-    ngZone.runOutsideAngular(() => intersectionObserver.observe(trigger));
-    viewportTriggers.set(trigger, entry);
-    observedViewportElements++;
-  }
-  entry.callbacks.add(callback);
-  return () => {
-    // It's possible that a different cleanup callback fully removed this element already.
-    if (!viewportTriggers.has(trigger)) {
-      return;
-    }
-    entry.callbacks.delete(callback);
-    if (entry.callbacks.size === 0) {
-      intersectionObserver?.unobserve(trigger);
-      viewportTriggers.delete(trigger);
-      observedViewportElements--;
-    }
-    if (observedViewportElements === 0) {
-      intersectionObserver?.disconnect();
-      intersectionObserver = null;
-    }
-  };
-}
-/**
- * Helper function to get the LView in which a deferred block's trigger is rendered.
- * @param deferredHostLView LView in which the deferred block is defined.
- * @param deferredTNode TNode defining the deferred block.
- * @param walkUpTimes Number of times to go up in the view hierarchy to find the trigger's view.
- *   A negative value means that the trigger is inside the block's placeholder, while an undefined
- *   value means that the trigger is in the same LView as the deferred block.
- */
-function getTriggerLView(deferredHostLView, deferredTNode, walkUpTimes) {
-  // The trigger is in the same view, we don't need to traverse.
-  if (walkUpTimes == null) {
-    return deferredHostLView;
-  }
-  // A positive value or zero means that the trigger is in a parent view.
-  if (walkUpTimes >= 0) {
-    return walkUpViews(walkUpTimes, deferredHostLView);
-  }
-  // If the value is negative, it means that the trigger is inside the placeholder.
-  const deferredContainer = deferredHostLView[deferredTNode.index];
-  ngDevMode && assertLContainer(deferredContainer);
-  const triggerLView = deferredContainer[CONTAINER_HEADER_OFFSET] ?? null;
-  // We need to null check, because the placeholder might not have been rendered yet.
-  if (ngDevMode && triggerLView !== null) {
-    const lDetails = getLDeferBlockDetails(deferredHostLView, deferredTNode);
-    const renderedState = lDetails[DEFER_BLOCK_STATE];
-    assertEqual(renderedState, DeferBlockState.Placeholder, 'Expected a placeholder to be rendered in this defer block.');
-    assertLView(triggerLView);
-  }
-  return triggerLView;
-}
-/**
- * Gets the element that a deferred block's trigger is pointing to.
- * @param triggerLView LView in which the trigger is defined.
- * @param triggerIndex Index at which the trigger element should've been rendered.
- */
-function getTriggerElement(triggerLView, triggerIndex) {
-  const element = getNativeByIndex(HEADER_OFFSET + triggerIndex, triggerLView);
-  ngDevMode && assertElement(element);
-  return element;
-}
-/**
- * Registers a DOM-node based trigger.
- * @param initialLView LView in which the defer block is rendered.
- * @param tNode TNode representing the defer block.
- * @param triggerIndex Index at which to find the trigger element.
- * @param walkUpTimes Number of times to go up/down in the view hierarchy to find the trigger.
- * @param registerFn Function that will register the DOM events.
- * @param callback Callback to be invoked when the trigger receives the event that should render
- *     the deferred block.
- * @param type Trigger type to distinguish between regular and prefetch triggers.
- */
-function registerDomTrigger(initialLView, tNode, triggerIndex, walkUpTimes, registerFn, callback, type) {
-  const injector = initialLView[INJECTOR$1];
-  function pollDomTrigger() {
-    // If the initial view was destroyed, we don't need to do anything.
-    if (isDestroyed(initialLView)) {
-      return;
-    }
-    const lDetails = getLDeferBlockDetails(initialLView, tNode);
-    const renderedState = lDetails[DEFER_BLOCK_STATE];
-    // If the block was loaded before the trigger was resolved, we don't need to do anything.
-    if (renderedState !== DeferBlockInternalState.Initial && renderedState !== DeferBlockState.Placeholder) {
-      return;
-    }
-    const triggerLView = getTriggerLView(initialLView, tNode, walkUpTimes);
-    // Keep polling until we resolve the trigger's LView.
-    if (!triggerLView) {
-      internalAfterNextRender(pollDomTrigger, {
-        injector
-      });
-      return;
-    }
-    // It's possible that the trigger's view was destroyed before we resolved the trigger element.
-    if (isDestroyed(triggerLView)) {
-      return;
-    }
-    const element = getTriggerElement(triggerLView, triggerIndex);
-    const cleanup = registerFn(element, () => {
-      if (initialLView !== triggerLView) {
-        removeLViewOnDestroy(triggerLView, cleanup);
-      }
-      callback();
-    }, injector);
-    // The trigger and deferred block might be in different LViews.
-    // For the main LView the cleanup would happen as a part of
-    // `storeTriggerCleanupFn` logic. For trigger LView we register
-    // a cleanup function there to remove event handlers in case an
-    // LView gets destroyed before a trigger is invoked.
-    if (initialLView !== triggerLView) {
-      storeLViewOnDestroy(triggerLView, cleanup);
-    }
-    storeTriggerCleanupFn(type, lDetails, cleanup);
-  }
-  // Begin polling for the trigger.
-  internalAfterNextRender(pollDomTrigger, {
-    injector
-  });
-}
-
-/**
- * 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 LView that hosts an instance of a defer block.
- */
-function onIdle(callback, lView) {
-  const injector = lView[INJECTOR$1];
-  const scheduler = injector.get(IdleScheduler);
-  const cleanupFn = () => scheduler.remove(callback);
-  scheduler.add(callback);
-  return cleanupFn;
-}
-/**
- * Use shims for the `requestIdleCallback` and `cancelIdleCallback` functions for
- * environments where those functions are not available (e.g. Node.js and Safari).
- *
- * Note: we wrap the `requestIdleCallback` call into a function, so that it can be
- * overridden/mocked in test environment and picked up by the runtime code.
- */
-const _requestIdleCallback = () => typeof requestIdleCallback !== 'undefined' ? requestIdleCallback : setTimeout;
-const _cancelIdleCallback = () => typeof requestIdleCallback !== 'undefined' ? cancelIdleCallback : clearTimeout;
-/**
- * Helper service to schedule `requestIdleCallback`s for batches of defer blocks,
- * to avoid calling `requestIdleCallback` for each defer block (e.g. if
- * defer blocks are defined inside a for loop).
- */
-let IdleScheduler = /*#__PURE__*/(() => {
-  class IdleScheduler {
-    constructor() {
-      // Indicates whether current callbacks are being invoked.
-      this.executingCallbacks = false;
-      // Currently scheduled idle callback id.
-      this.idleId = null;
-      // Set of callbacks to be invoked next.
-      this.current = new Set();
-      // Set of callbacks collected while invoking current set of callbacks.
-      // Those callbacks are scheduled for the next idle period.
-      this.deferred = new Set();
-      this.ngZone = inject(NgZone);
-      this.requestIdleCallbackFn = _requestIdleCallback().bind(globalThis);
-      this.cancelIdleCallbackFn = _cancelIdleCallback().bind(globalThis);
-    }
-    add(callback) {
-      const target = this.executingCallbacks ? this.deferred : this.current;
-      target.add(callback);
-      if (this.idleId === null) {
-        this.scheduleIdleCallback();
-      }
-    }
-    remove(callback) {
-      const {
-        current,
-        deferred
-      } = this;
-      current.delete(callback);
-      deferred.delete(callback);
-      // If the last callback was removed and there is a pending
-      // idle callback - cancel it.
-      if (current.size === 0 && deferred.size === 0) {
-        this.cancelIdleCallback();
-      }
-    }
-    scheduleIdleCallback() {
-      const callback = () => {
-        this.cancelIdleCallback();
-        this.executingCallbacks = true;
-        for (const callback of this.current) {
-          callback();
-        }
-        this.current.clear();
-        this.executingCallbacks = false;
-        // If there are any callbacks added during an invocation
-        // of the current ones - make them "current" and schedule
-        // a new idle callback.
-        if (this.deferred.size > 0) {
-          for (const callback of this.deferred) {
-            this.current.add(callback);
-          }
-          this.deferred.clear();
-          this.scheduleIdleCallback();
-        }
-      };
-      // Ensure that the callback runs in the NgZone since
-      // the `requestIdleCallback` is not currently patched by Zone.js.
-      this.idleId = this.requestIdleCallbackFn(() => this.ngZone.run(callback));
-    }
-    cancelIdleCallback() {
-      if (this.idleId !== null) {
-        this.cancelIdleCallbackFn(this.idleId);
-        this.idleId = null;
-      }
-    }
-    ngOnDestroy() {
-      this.cancelIdleCallback();
-      this.current.clear();
-      this.deferred.clear();
-    }
-    /** @nocollapse */
-    static #_ = this.ɵprov = ɵɵdefineInjectable({
-      token: IdleScheduler,
-      providedIn: 'root',
-      factory: () => new IdleScheduler()
-    });
-  }
-  return IdleScheduler;
-})();
-/**
- * Returns a function that captures a provided delay.
- * Invoking the returned function schedules a trigger.
- */
-function onTimer(delay) {
-  return (callback, lView) => scheduleTimerTrigger(delay, callback, lView);
-}
-/**
- * Schedules a callback to be invoked after a given timeout.
- *
- * @param delay A number of ms to wait until firing a callback.
- * @param callback A function to be invoked after a timeout.
- * @param lView LView that hosts an instance of a defer block.
- */
-function scheduleTimerTrigger(delay, callback, lView) {
-  const injector = lView[INJECTOR$1];
-  const scheduler = injector.get(TimerScheduler);
-  const cleanupFn = () => scheduler.remove(callback);
-  scheduler.add(delay, callback);
-  return cleanupFn;
-}
-/**
- * Helper service to schedule `setTimeout`s for batches of defer blocks,
- * to avoid calling `setTimeout` for each defer block (e.g. if defer blocks
- * are created inside a for loop).
- */
-let TimerScheduler = /*#__PURE__*/(() => {
-  class TimerScheduler {
-    constructor() {
-      // Indicates whether current callbacks are being invoked.
-      this.executingCallbacks = false;
-      // Currently scheduled `setTimeout` id.
-      this.timeoutId = null;
-      // When currently scheduled timer would fire.
-      this.invokeTimerAt = null;
-      // List of callbacks to be invoked.
-      // For each callback we also store a timestamp on when the callback
-      // should be invoked. We store timestamps and callback functions
-      // in a flat array to avoid creating new objects for each entry.
-      // [timestamp1, callback1, timestamp2, callback2, ...]
-      this.current = [];
-      // List of callbacks collected while invoking current set of callbacks.
-      // Those callbacks are added to the "current" queue at the end of
-      // the current callback invocation. The shape of this list is the same
-      // as the shape of the `current` list.
-      this.deferred = [];
-    }
-    add(delay, callback) {
-      const target = this.executingCallbacks ? this.deferred : this.current;
-      this.addToQueue(target, Date.now() + delay, callback);
-      this.scheduleTimer();
-    }
-    remove(callback) {
-      const {
-        current,
-        deferred
-      } = this;
-      const callbackIndex = this.removeFromQueue(current, callback);
-      if (callbackIndex === -1) {
-        // Try cleaning up deferred queue only in case
-        // we didn't find a callback in the "current" queue.
-        this.removeFromQueue(deferred, callback);
-      }
-      // If the last callback was removed and there is a pending timeout - cancel it.
-      if (current.length === 0 && deferred.length === 0) {
-        this.clearTimeout();
-      }
-    }
-    addToQueue(target, invokeAt, callback) {
-      let insertAtIndex = target.length;
-      for (let i = 0; i < target.length; i += 2) {
-        const invokeQueuedCallbackAt = target[i];
-        if (invokeQueuedCallbackAt > invokeAt) {
-          // We've reached a first timer that is scheduled
-          // for a later time than what we are trying to insert.
-          // This is the location at which we need to insert,
-          // no need to iterate further.
-          insertAtIndex = i;
-          break;
-        }
-      }
-      arrayInsert2(target, insertAtIndex, invokeAt, callback);
-    }
-    removeFromQueue(target, callback) {
-      let index = -1;
-      for (let i = 0; i < target.length; i += 2) {
-        const queuedCallback = target[i + 1];
-        if (queuedCallback === callback) {
-          index = i;
-          break;
-        }
-      }
-      if (index > -1) {
-        // Remove 2 elements: a timestamp slot and
-        // the following slot with a callback function.
-        arraySplice(target, index, 2);
-      }
-      return index;
-    }
-    scheduleTimer() {
-      const callback = () => {
-        this.clearTimeout();
-        this.executingCallbacks = true;
-        // Clone the current state of the queue, since it might be altered
-        // as we invoke callbacks.
-        const current = [...this.current];
-        // Invoke callbacks that were scheduled to run before the current time.
-        const now = Date.now();
-        for (let i = 0; i < current.length; i += 2) {
-          const invokeAt = current[i];
-          const callback = current[i + 1];
-          if (invokeAt <= now) {
-            callback();
-          } else {
-            // We've reached a timer that should not be invoked yet.
-            break;
-          }
-        }
-        // The state of the queue might've changed after callbacks invocation,
-        // run the cleanup logic based on the *current* state of the queue.
-        let lastCallbackIndex = -1;
-        for (let i = 0; i < this.current.length; i += 2) {
-          const invokeAt = this.current[i];
-          if (invokeAt <= now) {
-            // Add +1 to account for a callback function that
-            // goes after the timestamp in events array.
-            lastCallbackIndex = i + 1;
-          } else {
-            // We've reached a timer that should not be invoked yet.
-            break;
-          }
-        }
-        if (lastCallbackIndex >= 0) {
-          arraySplice(this.current, 0, lastCallbackIndex + 1);
-        }
-        this.executingCallbacks = false;
-        // If there are any callbacks added during an invocation
-        // of the current ones - move them over to the "current"
-        // queue.
-        if (this.deferred.length > 0) {
-          for (let i = 0; i < this.deferred.length; i += 2) {
-            const invokeAt = this.deferred[i];
-            const callback = this.deferred[i + 1];
-            this.addToQueue(this.current, invokeAt, callback);
-          }
-          this.deferred.length = 0;
-        }
-        this.scheduleTimer();
-      };
-      // Avoid running timer callbacks more than once per
-      // average frame duration. This is needed for better
-      // batching and to avoid kicking off excessive change
-      // detection cycles.
-      const FRAME_DURATION_MS = 16; // 1000ms / 60fps
-      if (this.current.length > 0) {
-        const now = Date.now();
-        // First element in the queue points at the timestamp
-        // of the first (earliest) event.
-        const invokeAt = this.current[0];
-        if (this.timeoutId === null ||
-        // Reschedule a timer in case a queue contains an item with
-        // an earlier timestamp and the delta is more than an average
-        // frame duration.
-        this.invokeTimerAt && this.invokeTimerAt - invokeAt > FRAME_DURATION_MS) {
-          // There was a timeout already, but an earlier event was added
-          // into the queue. In this case we drop an old timer and setup
-          // a new one with an updated (smaller) timeout.
-          this.clearTimeout();
-          const timeout = Math.max(invokeAt - now, FRAME_DURATION_MS);
-          this.invokeTimerAt = invokeAt;
-          this.timeoutId = setTimeout(callback, timeout);
-        }
-      }
-    }
-    clearTimeout() {
-      if (this.timeoutId !== null) {
-        clearTimeout(this.timeoutId);
-        this.timeoutId = null;
-      }
-    }
-    ngOnDestroy() {
-      this.clearTimeout();
-      this.current.length = 0;
-      this.deferred.length = 0;
-    }
-    /** @nocollapse */
-    static #_ = this.ɵprov = ɵɵdefineInjectable({
-      token: TimerScheduler,
-      providedIn: 'root',
-      factory: () => new TimerScheduler()
-    });
-  }
-  return TimerScheduler;
-})();
-/**
- * **INTERNAL**, avoid referencing it in application code.
- * *
- * Injector token that allows to provide `DeferBlockDependencyInterceptor` class
- * implementation.
- *
- * This token is only injected in devMode
- */
-const DEFER_BLOCK_DEPENDENCY_INTERCEPTOR = /*#__PURE__*/new InjectionToken('DEFER_BLOCK_DEPENDENCY_INTERCEPTOR');
-/**
- * **INTERNAL**, token used for configuring defer block behavior.
- */
-const DEFER_BLOCK_CONFIG = /*#__PURE__*/new InjectionToken(ngDevMode ? 'DEFER_BLOCK_CONFIG' : '');
-/**
- * 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) {
-  const config = injector.get(DEFER_BLOCK_CONFIG, null, {
-    optional: true
-  });
-  if (config?.behavior === DeferBlockBehavior.Manual) {
-    return false;
-  }
-  return isPlatformBrowser(injector);
-}
-/**
- * Reference to the timer-based scheduler implementation of defer block state
- * rendering method. It's used to make timer-based scheduling tree-shakable.
- * If `minimum` or `after` parameters are used, compiler generates an extra
- * argument for the `ɵɵdefer` instruction, which references a timer-based
- * implementation.
- */
-let applyDeferBlockStateWithSchedulingImpl = null;
-/**
- * Enables timer-related scheduling if `after` or `minimum` parameters are setup
- * on the `@loading` or `@placeholder` blocks.
- */
-function ɵɵdeferEnableTimerScheduling(tView, tDetails, placeholderConfigIndex, loadingConfigIndex) {
-  const tViewConsts = tView.consts;
-  if (placeholderConfigIndex != null) {
-    tDetails.placeholderBlockConfig = getConstant(tViewConsts, placeholderConfigIndex);
-  }
-  if (loadingConfigIndex != null) {
-    tDetails.loadingBlockConfig = getConstant(tViewConsts, loadingConfigIndex);
-  }
-  // Enable implementation that supports timer-based scheduling.
-  if (applyDeferBlockStateWithSchedulingImpl === null) {
-    applyDeferBlockStateWithSchedulingImpl = applyDeferBlockStateWithScheduling;
-  }
-}
-/**
- * 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 placeholderConfigIndex Index in the constants array of the configuration of the
- *     placeholder block.
- * @param enableTimerScheduling Function that enables timer-related scheduling if `after`
- *     or `minimum` parameters are setup on the `@loading` or `@placeholder` blocks.
- *
- * @codeGenApi
- */
-function ɵɵdefer(index, primaryTmplIndex, dependencyResolverFn, loadingTmplIndex, placeholderTmplIndex, errorTmplIndex, loadingConfigIndex, placeholderConfigIndex, enableTimerScheduling) {
-  const lView = getLView();
-  const tView = getTView();
-  const adjustedIndex = index + HEADER_OFFSET;
-  ɵɵtemplate(index, null, 0, 0);
-  if (tView.firstCreatePass) {
-    performanceMarkFeature('NgDefer');
-    const tDetails = {
-      primaryTmplIndex,
-      loadingTmplIndex: loadingTmplIndex ?? null,
-      placeholderTmplIndex: placeholderTmplIndex ?? null,
-      errorTmplIndex: errorTmplIndex ?? null,
-      placeholderBlockConfig: null,
-      loadingBlockConfig: null,
-      dependencyResolverFn: dependencyResolverFn ?? null,
-      loadingState: DeferDependenciesLoadingState.NOT_STARTED,
-      loadingPromise: null,
-      providers: null
-    };
-    enableTimerScheduling?.(tView, tDetails, placeholderConfigIndex, loadingConfigIndex);
-    setTDeferBlockDetails(tView, adjustedIndex, tDetails);
-  }
-  const tNode = getCurrentTNode();
-  const lContainer = lView[adjustedIndex];
-  // If hydration is enabled, looks up dehydrated views in the DOM
-  // using hydration annotation info and stores those views on LContainer.
-  // In client-only mode, this function is a noop.
-  populateDehydratedViewsInLContainer(lContainer, tNode, lView);
-  // Init instance-specific defer details and store it.
-  const lDetails = [null,
-  // NEXT_DEFER_BLOCK_STATE
-  DeferBlockInternalState.Initial,
-  // DEFER_BLOCK_STATE
-  null,
-  // STATE_IS_FROZEN_UNTIL
-  null,
-  // LOADING_AFTER_CLEANUP_FN
-  null,
-  // TRIGGER_CLEANUP_FNS
-  null // PREFETCH_TRIGGER_CLEANUP_FNS
-  ];
-  setLDeferBlockDetails(lView, adjustedIndex, lDetails);
-  const cleanupTriggersFn = () => invokeAllTriggerCleanupFns(lDetails);
-  // When defer block is triggered - unsubscribe from LView destroy cleanup.
-  storeTriggerCleanupFn(0 /* TriggerType.Regular */, lDetails, () => removeLViewOnDestroy(lView, cleanupTriggersFn));
-  storeLViewOnDestroy(lView, cleanupTriggersFn);
-}
-/**
- * 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 prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(null);
-    try {
-      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 === DeferBlockInternalState.Initial) {
-        // If nothing is rendered yet, render a placeholder (if defined).
-        renderPlaceholder(lView, tNode);
-      } else if (value === true && (renderedState === DeferBlockInternalState.Initial || renderedState === DeferBlockState.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);
-      }
-    } finally {
-      (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
-    }
-  }
-}
-/**
- * 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 prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(null);
-    try {
-      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 === DeferDependenciesLoadingState.NOT_STARTED) {
-        // If loading has not been started yet, trigger it now.
-        triggerPrefetching(tDetails, lView, tNode);
-      }
-    } finally {
-      (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
-    }
-  }
-}
-/**
- * Sets up logic to handle the `on idle` deferred trigger.
- * @codeGenApi
- */
-function ɵɵdeferOnIdle() {
-  scheduleDelayedTrigger(onIdle);
-}
-/**
- * Sets up logic to handle the `prefetch on idle` deferred trigger.
- * @codeGenApi
- */
-function ɵɵdeferPrefetchOnIdle() {
-  scheduleDelayedPrefetching(onIdle);
-}
-/**
- * Sets up logic to handle the `on immediate` deferred trigger.
- * @codeGenApi
- */
-function ɵɵdeferOnImmediate() {
-  const lView = getLView();
-  const tNode = getCurrentTNode();
-  const tView = lView[TVIEW];
-  const injector = lView[INJECTOR$1];
-  const tDetails = getTDeferBlockDetails(tView, tNode);
-  // Render placeholder block only if loading template is not present and we're on
-  // the client to avoid content flickering, since it would be immediately replaced
-  // by the loading block.
-  if (!shouldTriggerDeferBlock(injector) || tDetails.loadingTmplIndex === null) {
-    renderPlaceholder(lView, tNode);
-  }
-  triggerDeferBlock(lView, tNode);
-}
-/**
- * Sets up logic to handle the `prefetch on immediate` deferred trigger.
- * @codeGenApi
- */
-function ɵɵdeferPrefetchOnImmediate() {
-  const lView = getLView();
-  const tNode = getCurrentTNode();
-  const tView = lView[TVIEW];
-  const tDetails = getTDeferBlockDetails(tView, tNode);
-  if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
-    triggerResourceLoading(tDetails, lView, tNode);
-  }
-}
-/**
- * Creates runtime data structures for the `on timer` deferred trigger.
- * @param delay Amount of time to wait before loading the content.
- * @codeGenApi
- */
-function ɵɵdeferOnTimer(delay) {
-  scheduleDelayedTrigger(onTimer(delay));
-}
-/**
- * Creates runtime data structures for the `prefetch on timer` deferred trigger.
- * @param delay Amount of time to wait before prefetching the content.
- * @codeGenApi
- */
-function ɵɵdeferPrefetchOnTimer(delay) {
-  scheduleDelayedPrefetching(onTimer(delay));
-}
-/**
- * Creates runtime data structures for the `on hover` deferred trigger.
- * @param triggerIndex Index at which to find the trigger element.
- * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
- * @codeGenApi
- */
-function ɵɵdeferOnHover(triggerIndex, walkUpTimes) {
-  const lView = getLView();
-  const tNode = getCurrentTNode();
-  renderPlaceholder(lView, tNode);
-  registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onHover, () => triggerDeferBlock(lView, tNode), 0 /* TriggerType.Regular */);
-}
-/**
- * Creates runtime data structures for the `prefetch on hover` deferred trigger.
- * @param triggerIndex Index at which to find the trigger element.
- * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
- * @codeGenApi
- */
-function ɵɵdeferPrefetchOnHover(triggerIndex, walkUpTimes) {
-  const lView = getLView();
-  const tNode = getCurrentTNode();
-  const tView = lView[TVIEW];
-  const tDetails = getTDeferBlockDetails(tView, tNode);
-  if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
-    registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onHover, () => triggerPrefetching(tDetails, lView, tNode), 1 /* TriggerType.Prefetch */);
-  }
-}
-/**
- * Creates runtime data structures for the `on interaction` deferred trigger.
- * @param triggerIndex Index at which to find the trigger element.
- * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
- * @codeGenApi
- */
-function ɵɵdeferOnInteraction(triggerIndex, walkUpTimes) {
-  const lView = getLView();
-  const tNode = getCurrentTNode();
-  renderPlaceholder(lView, tNode);
-  registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onInteraction, () => triggerDeferBlock(lView, tNode), 0 /* TriggerType.Regular */);
-}
-/**
- * Creates runtime data structures for the `prefetch on interaction` deferred trigger.
- * @param triggerIndex Index at which to find the trigger element.
- * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
- * @codeGenApi
- */
-function ɵɵdeferPrefetchOnInteraction(triggerIndex, walkUpTimes) {
-  const lView = getLView();
-  const tNode = getCurrentTNode();
-  const tView = lView[TVIEW];
-  const tDetails = getTDeferBlockDetails(tView, tNode);
-  if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
-    registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onInteraction, () => triggerPrefetching(tDetails, lView, tNode), 1 /* TriggerType.Prefetch */);
-  }
-}
-/**
- * Creates runtime data structures for the `on viewport` deferred trigger.
- * @param triggerIndex Index at which to find the trigger element.
- * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
- * @codeGenApi
- */
-function ɵɵdeferOnViewport(triggerIndex, walkUpTimes) {
-  const lView = getLView();
-  const tNode = getCurrentTNode();
-  renderPlaceholder(lView, tNode);
-  registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onViewport, () => triggerDeferBlock(lView, tNode), 0 /* TriggerType.Regular */);
-}
-/**
- * Creates runtime data structures for the `prefetch on viewport` deferred trigger.
- * @param triggerIndex Index at which to find the trigger element.
- * @param walkUpTimes Number of times to walk up/down the tree hierarchy to find the trigger.
- * @codeGenApi
- */
-function ɵɵdeferPrefetchOnViewport(triggerIndex, walkUpTimes) {
-  const lView = getLView();
-  const tNode = getCurrentTNode();
-  const tView = lView[TVIEW];
-  const tDetails = getTDeferBlockDetails(tView, tNode);
-  if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
-    registerDomTrigger(lView, tNode, triggerIndex, walkUpTimes, onViewport, () => triggerPrefetching(tDetails, lView, tNode), 1 /* TriggerType.Prefetch */);
-  }
-}
-/********** Helper functions **********/
-/**
- * Schedules triggering of a defer block for `on idle` and `on timer` conditions.
- */
-function scheduleDelayedTrigger(scheduleFn) {
-  const lView = getLView();
-  const tNode = getCurrentTNode();
-  renderPlaceholder(lView, tNode);
-  const cleanupFn = scheduleFn(() => triggerDeferBlock(lView, tNode), lView);
-  const lDetails = getLDeferBlockDetails(lView, tNode);
-  storeTriggerCleanupFn(0 /* TriggerType.Regular */, lDetails, cleanupFn);
-}
-/**
- * Schedules prefetching for `on idle` and `on timer` triggers.
- *
- * @param scheduleFn A function that does the scheduling.
- */
-function scheduleDelayedPrefetching(scheduleFn) {
-  const lView = getLView();
-  const tNode = getCurrentTNode();
-  const tView = lView[TVIEW];
-  const tDetails = getTDeferBlockDetails(tView, tNode);
-  if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
-    const lDetails = getLDeferBlockDetails(lView, tNode);
-    const prefetch = () => triggerPrefetching(tDetails, lView, tNode);
-    const cleanupFn = scheduleFn(prefetch, lView);
-    storeTriggerCleanupFn(1 /* TriggerType.Prefetch */, lDetails, cleanupFn);
-  }
-}
-/**
- * Transitions a defer block to the new state. Updates the  necessary
- * data structures and renders corresponding block.
- *
- * @param newState New state that should be applied to the defer block.
- * @param tNode TNode that represents a defer block.
- * @param lContainer Represents an instance of a defer block.
- * @param skipTimerScheduling Indicates that `@loading` and `@placeholder` block
- *   should be rendered immediately, even if they have `after` or `minimum` config
- *   options setup. This flag to needed for testing APIs to transition defer block
- *   between states via `DeferFixture.render` method.
- */
-function renderDeferBlockState(newState, tNode, lContainer, skipTimerScheduling = false) {
-  const hostLView = lContainer[PARENT];
-  const hostTView = hostLView[TVIEW];
-  // Check if this view is not destroyed. Since the loading process was async,
-  // the view might end up being destroyed by the time rendering happens.
-  if (isDestroyed(hostLView)) return;
-  // Make sure this TNode belongs to TView that represents host LView.
-  ngDevMode && assertTNodeForLView(tNode, hostLView);
-  const lDetails = getLDeferBlockDetails(hostLView, tNode);
-  ngDevMode && assertDefined(lDetails, 'Expected a defer block state defined');
-  const currentState = lDetails[DEFER_BLOCK_STATE];
-  if (isValidStateChange(currentState, newState) && isValidStateChange(lDetails[NEXT_DEFER_BLOCK_STATE] ?? -1, newState)) {
-    const tDetails = getTDeferBlockDetails(hostTView, tNode);
-    const needsScheduling = !skipTimerScheduling && (getLoadingBlockAfter(tDetails) !== null || getMinimumDurationForState(tDetails, DeferBlockState.Loading) !== null || getMinimumDurationForState(tDetails, DeferBlockState.Placeholder));
-    if (ngDevMode && needsScheduling) {
-      assertDefined(applyDeferBlockStateWithSchedulingImpl, 'Expected scheduling function to be defined');
-    }
-    const applyStateFn = needsScheduling ? applyDeferBlockStateWithSchedulingImpl : applyDeferBlockState;
-    try {
-      applyStateFn(newState, lDetails, lContainer, tNode, hostLView);
-    } catch (error) {
-      handleError(hostLView, error);
-    }
-  }
-}
-/**
- * Applies changes to the DOM to reflect a given state.
- */
-function applyDeferBlockState(newState, lDetails, lContainer, tNode, hostLView) {
-  const stateTmplIndex = getTemplateIndexForState(newState, hostLView, tNode);
-  if (stateTmplIndex !== null) {
-    lDetails[DEFER_BLOCK_STATE] = newState;
-    const hostTView = hostLView[TVIEW];
-    const adjustedIndex = stateTmplIndex + HEADER_OFFSET;
-    const activeBlockTNode = getTNode(hostTView, adjustedIndex);
-    // There is only 1 view that can be present in an LContainer that
-    // represents a defer block, so always refer to the first one.
-    const viewIndex = 0;
-    removeLViewFromLContainer(lContainer, viewIndex);
-    let injector;
-    if (newState === DeferBlockState.Complete) {
-      // When we render a defer block in completed state, there might be
-      // newly loaded standalone components used within the block, which may
-      // import NgModules with providers. In order to make those providers
-      // available for components declared in that NgModule, we create an instance
-      // of environment injector to host those providers and pass this injector
-      // to the logic that creates a view.
-      const tDetails = getTDeferBlockDetails(hostTView, tNode);
-      const providers = tDetails.providers;
-      if (providers && providers.length > 0) {
-        const parentInjector = hostLView[INJECTOR$1];
-        const parentEnvInjector = parentInjector.get(EnvironmentInjector);
-        injector = parentEnvInjector.get(CachedInjectorService).getOrCreateInjector(tDetails, parentEnvInjector, providers, ngDevMode ? 'DeferBlock Injector' : '');
-      }
-    }
-    const dehydratedView = findMatchingDehydratedView(lContainer, activeBlockTNode.tView.ssrId);
-    const embeddedLView = createAndRenderEmbeddedLView(hostLView, activeBlockTNode, null, {
-      dehydratedView,
-      injector
-    });
-    addLViewToLContainer(lContainer, embeddedLView, viewIndex, shouldAddViewToDom(activeBlockTNode, dehydratedView));
-    markViewDirty(embeddedLView);
-  }
-}
-/**
- * Extends the `applyDeferBlockState` with timer-based scheduling.
- * This function becomes available on a page if there are defer blocks
- * that use `after` or `minimum` parameters in the `@loading` or
- * `@placeholder` blocks.
- */
-function applyDeferBlockStateWithScheduling(newState, lDetails, lContainer, tNode, hostLView) {
-  const now = Date.now();
-  const hostTView = hostLView[TVIEW];
-  const tDetails = getTDeferBlockDetails(hostTView, tNode);
-  if (lDetails[STATE_IS_FROZEN_UNTIL] === null || lDetails[STATE_IS_FROZEN_UNTIL] <= now) {
-    lDetails[STATE_IS_FROZEN_UNTIL] = null;
-    const loadingAfter = getLoadingBlockAfter(tDetails);
-    const inLoadingAfterPhase = lDetails[LOADING_AFTER_CLEANUP_FN] !== null;
-    if (newState === DeferBlockState.Loading && loadingAfter !== null && !inLoadingAfterPhase) {
-      // Trying to render loading, but it has an `after` config,
-      // so schedule an update action after a timeout.
-      lDetails[NEXT_DEFER_BLOCK_STATE] = newState;
-      const cleanupFn = scheduleDeferBlockUpdate(loadingAfter, lDetails, tNode, lContainer, hostLView);
-      lDetails[LOADING_AFTER_CLEANUP_FN] = cleanupFn;
-    } else {
-      // If we transition to a complete or an error state and there is a pending
-      // operation to render loading after a timeout - invoke a cleanup operation,
-      // which stops the timer.
-      if (newState > DeferBlockState.Loading && inLoadingAfterPhase) {
-        lDetails[LOADING_AFTER_CLEANUP_FN]();
-        lDetails[LOADING_AFTER_CLEANUP_FN] = null;
-        lDetails[NEXT_DEFER_BLOCK_STATE] = null;
-      }
-      applyDeferBlockState(newState, lDetails, lContainer, tNode, hostLView);
-      const duration = getMinimumDurationForState(tDetails, newState);
-      if (duration !== null) {
-        lDetails[STATE_IS_FROZEN_UNTIL] = now + duration;
-        scheduleDeferBlockUpdate(duration, lDetails, tNode, lContainer, hostLView);
-      }
-    }
-  } else {
-    // We are still rendering the previous state.
-    // Update the `NEXT_DEFER_BLOCK_STATE`, which would be
-    // picked up once it's time to transition to the next state.
-    lDetails[NEXT_DEFER_BLOCK_STATE] = newState;
-  }
-}
-/**
- * Schedules an update operation after a specified timeout.
- */
-function scheduleDeferBlockUpdate(timeout, lDetails, tNode, lContainer, hostLView) {
-  const callback = () => {
-    const nextState = lDetails[NEXT_DEFER_BLOCK_STATE];
-    lDetails[STATE_IS_FROZEN_UNTIL] = null;
-    lDetails[NEXT_DEFER_BLOCK_STATE] = null;
-    if (nextState !== null) {
-      renderDeferBlockState(nextState, tNode, lContainer);
-    }
-  };
-  return scheduleTimerTrigger(timeout, callback, hostLView);
-}
-/**
- * Checks whether we can transition to the next state.
- *
- * We transition to the next state if the previous state was represented
- * with a number that is less than the next state. For example, if the current
- * state is "loading" (represented as `1`), we should not show a placeholder
- * (represented as `0`), but we can show a completed state (represented as `2`)
- * or an error state (represented as `3`).
- */
-function isValidStateChange(currentState, newState) {
-  return currentState < newState;
-}
-/**
- * Trigger prefetching of dependencies for a defer block.
- *
- * @param tDetails Static information about this defer block.
- * @param lView LView of a host view.
- */
-function triggerPrefetching(tDetails, lView, tNode) {
-  if (lView[INJECTOR$1] && shouldTriggerDeferBlock(lView[INJECTOR$1])) {
-    triggerResourceLoading(tDetails, lView, tNode);
-  }
-}
-/**
- * Trigger loading of defer block dependencies if the process hasn't started yet.
- *
- * @param tDetails Static information about this defer block.
- * @param lView LView of a host view.
- */
-function triggerResourceLoading(tDetails, lView, tNode) {
-  const injector = lView[INJECTOR$1];
-  const tView = lView[TVIEW];
-  if (tDetails.loadingState !== DeferDependenciesLoadingState.NOT_STARTED) {
-    // 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 lDetails = getLDeferBlockDetails(lView, tNode);
-  const primaryBlockTNode = getPrimaryBlockTNode(tView, tDetails);
-  // Switch from NOT_STARTED -> IN_PROGRESS state.
-  tDetails.loadingState = DeferDependenciesLoadingState.IN_PROGRESS;
-  // Prefetching is triggered, cleanup all registered prefetch triggers.
-  invokeTriggerCleanupFns(1 /* TriggerType.Prefetch */, lDetails);
-  let dependenciesFn = tDetails.dependencyResolverFn;
-  if (ngDevMode) {
-    // Check if dependency function interceptor is configured.
-    const deferDependencyInterceptor = injector.get(DEFER_BLOCK_DEPENDENCY_INTERCEPTOR, null, {
-      optional: true
-    });
-    if (deferDependencyInterceptor) {
-      dependenciesFn = deferDependencyInterceptor.intercept(dependenciesFn);
-    }
-  }
-  // Indicate that an application is not stable and has a pending task.
-  const pendingTasks = injector.get(PendingTasks);
-  const taskId = pendingTasks.add();
-  // The `dependenciesFn` might be `null` when all dependencies within
-  // a given defer block were eagerly referenced elsewhere in a file,
-  // thus no dynamic `import()`s were produced.
-  if (!dependenciesFn) {
-    tDetails.loadingPromise = Promise.resolve().then(() => {
-      tDetails.loadingPromise = null;
-      tDetails.loadingState = DeferDependenciesLoadingState.COMPLETE;
-      pendingTasks.remove(taskId);
-    });
-    return;
-  }
-  // Start downloading of defer block dependencies.
-  tDetails.loadingPromise = Promise.allSettled(dependenciesFn()).then(results => {
-    let failed = false;
-    const directiveDefs = [];
-    const pipeDefs = [];
-    for (const result of results) {
-      if (result.status === 'fulfilled') {
-        const dependency = result.value;
-        const directiveDef = getComponentDef(dependency) || getDirectiveDef(dependency);
-        if (directiveDef) {
-          directiveDefs.push(directiveDef);
-        } else {
-          const pipeDef = getPipeDef$1(dependency);
-          if (pipeDef) {
-            pipeDefs.push(pipeDef);
-          }
-        }
-      } else {
-        failed = true;
-        break;
-      }
-    }
-    // Loading is completed, we no longer need the loading Promise
-    // and a pending task should also be removed.
-    tDetails.loadingPromise = null;
-    pendingTasks.remove(taskId);
-    if (failed) {
-      tDetails.loadingState = DeferDependenciesLoadingState.FAILED;
-      if (tDetails.errorTmplIndex === null) {
-        const templateLocation = getTemplateLocationDetails(lView);
-        const error = new RuntimeError(750 /* RuntimeErrorCode.DEFER_LOADING_FAILED */, ngDevMode && 'Loading dependencies for `@defer` block failed, ' + `but no \`@error\` block was configured${templateLocation}. ` + 'Consider using the `@error` block to render an error state.');
-        handleError(lView, error);
-      }
-    } else {
-      tDetails.loadingState = DeferDependenciesLoadingState.COMPLETE;
-      // Update directive and pipe registries to add newly downloaded dependencies.
-      const primaryBlockTView = primaryBlockTNode.tView;
-      if (directiveDefs.length > 0) {
-        primaryBlockTView.directiveRegistry = addDepsToRegistry(primaryBlockTView.directiveRegistry, directiveDefs);
-        // Extract providers from all NgModules imported by standalone components
-        // used within this defer block.
-        const directiveTypes = directiveDefs.map(def => def.type);
-        const providers = internalImportProvidersFrom(false, ...directiveTypes);
-        tDetails.providers = providers;
-      }
-      if (pipeDefs.length > 0) {
-        primaryBlockTView.pipeRegistry = addDepsToRegistry(primaryBlockTView.pipeRegistry, pipeDefs);
-      }
-    }
-  });
-}
-/** Utility function to render placeholder content (if present) */
-function renderPlaceholder(lView, tNode) {
-  const lContainer = lView[tNode.index];
-  ngDevMode && assertLContainer(lContainer);
-  renderDeferBlockState(DeferBlockState.Placeholder, tNode, lContainer);
-}
-/**
- * Subscribes to the "loading" Promise and renders corresponding defer sub-block,
- * based on the loading results.
- *
- * @param lContainer Represents an instance of a defer block.
- * @param tNode Represents defer block info shared across all instances.
- */
-function renderDeferStateAfterResourceLoading(tDetails, tNode, lContainer) {
-  ngDevMode && assertDefined(tDetails.loadingPromise, 'Expected loading Promise to exist on this defer block');
-  tDetails.loadingPromise.then(() => {
-    if (tDetails.loadingState === DeferDependenciesLoadingState.COMPLETE) {
-      ngDevMode && assertDeferredDependenciesLoaded(tDetails);
-      // Everything is loaded, show the primary block content
-      renderDeferBlockState(DeferBlockState.Complete, tNode, lContainer);
-    } else if (tDetails.loadingState === DeferDependenciesLoadingState.FAILED) {
-      renderDeferBlockState(DeferBlockState.Error, tNode, lContainer);
-    }
-  });
-}
-/**
- * Attempts to trigger loading of defer block dependencies.
- * If the block is already in a loading, completed or an error state -
- * no additional actions are taken.
- */
-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 lDetails = getLDeferBlockDetails(lView, tNode);
-  const tDetails = getTDeferBlockDetails(tView, tNode);
-  // Defer block is triggered, cleanup all registered trigger functions.
-  invokeAllTriggerCleanupFns(lDetails);
-  switch (tDetails.loadingState) {
-    case DeferDependenciesLoadingState.NOT_STARTED:
-      renderDeferBlockState(DeferBlockState.Loading, tNode, lContainer);
-      triggerResourceLoading(tDetails, lView, tNode);
-      // The `loadingState` might have changed to "loading".
-      if (tDetails.loadingState === DeferDependenciesLoadingState.IN_PROGRESS) {
-        renderDeferStateAfterResourceLoading(tDetails, tNode, lContainer);
-      }
-      break;
-    case DeferDependenciesLoadingState.IN_PROGRESS:
-      renderDeferBlockState(DeferBlockState.Loading, tNode, lContainer);
-      renderDeferStateAfterResourceLoading(tDetails, tNode, lContainer);
-      break;
-    case DeferDependenciesLoadingState.COMPLETE:
-      ngDevMode && assertDeferredDependenciesLoaded(tDetails);
-      renderDeferBlockState(DeferBlockState.Complete, tNode, lContainer);
-      break;
-    case DeferDependenciesLoadingState.FAILED:
-      renderDeferBlockState(DeferBlockState.Error, tNode, lContainer);
-      break;
-    default:
-      if (ngDevMode) {
-        throwError('Unknown defer block state');
-      }
-  }
-}
-
-/**
- * Updates the value of or removes a bound attribute on an Element.
- *
- * Used in the case of `[attr.title]="value"`
- *
- * @param name name The name of the attribute.
- * @param value value The attribute is removed when value is `null` or `undefined`.
- *                  Otherwise the attribute value is set to the stringified value.
- * @param sanitizer An optional function used to sanitize the value.
- * @param namespace Optional namespace to use when setting the attribute.
- *
- * @codeGenApi
- */
-function ɵɵattribute(name, value, sanitizer, namespace) {
-  const lView = getLView();
-  const bindingIndex = nextBindingIndex();
-  if (bindingUpdated(lView, bindingIndex, value)) {
-    const tView = getTView();
-    const tNode = getSelectedTNode();
-    elementAttributeInternal(tNode, lView, name, value, sanitizer, namespace);
-    ngDevMode && storePropertyBindingMetadata(tView.data, tNode, 'attr.' + name, bindingIndex);
-  }
-  return ɵɵattribute;
-}
-
-/**
- * Create interpolation bindings with a variable number of expressions.
- *
- * If there are 1 to 8 expressions `interpolation1()` to `interpolation8()` should be used instead.
- * Those are faster because there is no need to create an array of expressions and iterate over it.
- *
- * `values`:
- * - has static text at even indexes,
- * - has evaluated expressions at odd indexes.
- *
- * Returns the concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
- */
-function interpolationV(lView, values) {
-  ngDevMode && assertLessThan(2, values.length, 'should have at least 3 values');
-  ngDevMode && assertEqual(values.length % 2, 1, 'should have an odd number of values');
-  let isBindingUpdated = false;
-  let bindingIndex = getBindingIndex();
-  for (let i = 1; i < values.length; i += 2) {
-    // Check if bindings (odd indexes) have changed
-    isBindingUpdated = bindingUpdated(lView, bindingIndex++, values[i]) || isBindingUpdated;
-  }
-  setBindingIndex(bindingIndex);
-  if (!isBindingUpdated) {
-    return NO_CHANGE;
-  }
-  // Build the updated content
-  let content = values[0];
-  for (let i = 1; i < values.length; i += 2) {
-    content += renderStringify(values[i]) + values[i + 1];
-  }
-  return content;
-}
-/**
- * Creates an interpolation binding with 1 expression.
- *
- * @param prefix static value used for concatenation only.
- * @param v0 value checked for change.
- * @param suffix static value used for concatenation only.
- */
-function interpolation1(lView, prefix, v0, suffix) {
-  const different = bindingUpdated(lView, nextBindingIndex(), v0);
-  return different ? prefix + renderStringify(v0) + suffix : NO_CHANGE;
-}
-/**
- * Creates an interpolation binding with 2 expressions.
- */
-function interpolation2(lView, prefix, v0, i0, v1, suffix) {
-  const bindingIndex = getBindingIndex();
-  const different = bindingUpdated2(lView, bindingIndex, v0, v1);
-  incrementBindingIndex(2);
-  return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + suffix : NO_CHANGE;
-}
-/**
- * Creates an interpolation binding with 3 expressions.
- */
-function interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix) {
-  const bindingIndex = getBindingIndex();
-  const different = bindingUpdated3(lView, bindingIndex, v0, v1, v2);
-  incrementBindingIndex(3);
-  return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + suffix : NO_CHANGE;
-}
-/**
- * Create an interpolation binding with 4 expressions.
- */
-function interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix) {
-  const bindingIndex = getBindingIndex();
-  const different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
-  incrementBindingIndex(4);
-  return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + i2 + renderStringify(v3) + suffix : NO_CHANGE;
-}
-/**
- * Creates an interpolation binding with 5 expressions.
- */
-function interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix) {
-  const bindingIndex = getBindingIndex();
-  let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
-  different = bindingUpdated(lView, bindingIndex + 4, v4) || different;
-  incrementBindingIndex(5);
-  return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + i2 + renderStringify(v3) + i3 + renderStringify(v4) + suffix : NO_CHANGE;
-}
-/**
- * Creates an interpolation binding with 6 expressions.
- */
-function interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix) {
-  const bindingIndex = getBindingIndex();
-  let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
-  different = bindingUpdated2(lView, bindingIndex + 4, v4, v5) || different;
-  incrementBindingIndex(6);
-  return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + i2 + renderStringify(v3) + i3 + renderStringify(v4) + i4 + renderStringify(v5) + suffix : NO_CHANGE;
-}
-/**
- * Creates an interpolation binding with 7 expressions.
- */
-function interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix) {
-  const bindingIndex = getBindingIndex();
-  let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
-  different = bindingUpdated3(lView, bindingIndex + 4, v4, v5, v6) || different;
-  incrementBindingIndex(7);
-  return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + i2 + renderStringify(v3) + i3 + renderStringify(v4) + i4 + renderStringify(v5) + i5 + renderStringify(v6) + suffix : NO_CHANGE;
-}
-/**
- * Creates an interpolation binding with 8 expressions.
- */
-function interpolation8(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix) {
-  const bindingIndex = getBindingIndex();
-  let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
-  different = bindingUpdated4(lView, bindingIndex + 4, v4, v5, v6, v7) || different;
-  incrementBindingIndex(8);
-  return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + i2 + renderStringify(v3) + i3 + renderStringify(v4) + i4 + renderStringify(v5) + i5 + renderStringify(v6) + i6 + renderStringify(v7) + suffix : NO_CHANGE;
-}
-
-/**
- *
- * Update an interpolated attribute on an element with single bound value surrounded by text.
- *
- * Used when the value passed to a property has 1 interpolated value in it:
- *
- * ```html
- * <div attr.title="prefix{{v0}}suffix"></div>
- * ```
- *
- * Its compiled representation is::
- *
- * ```ts
- * ɵɵattributeInterpolate1('title', 'prefix', v0, 'suffix');
- * ```
- *
- * @param attrName The name of the attribute to update
- * @param prefix Static value used for concatenation only.
- * @param v0 Value checked for change.
- * @param suffix Static value used for concatenation only.
- * @param sanitizer An optional sanitizer function
- * @returns itself, so that it may be chained.
- * @codeGenApi
- */
-function ɵɵattributeInterpolate1(attrName, prefix, v0, suffix, sanitizer, namespace) {
-  const lView = getLView();
-  const interpolatedValue = interpolation1(lView, prefix, v0, suffix);
-  if (interpolatedValue !== NO_CHANGE) {
-    const tNode = getSelectedTNode();
-    elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
-    ngDevMode && storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 1, prefix, suffix);
-  }
-  return ɵɵattributeInterpolate1;
-}
-/**
- *
- * Update an interpolated attribute on an element with 2 bound values surrounded by text.
- *
- * Used when the value passed to a property has 2 interpolated values in it:
- *
- * ```html
- * <div attr.title="prefix{{v0}}-{{v1}}suffix"></div>
- * ```
- *
- * Its compiled representation is::
- *
- * ```ts
- * ɵɵattributeInterpolate2('title', 'prefix', v0, '-', v1, 'suffix');
- * ```
- *
- * @param attrName The name of the attribute to update
- * @param prefix Static value used for concatenation only.
- * @param v0 Value checked for change.
- * @param i0 Static value used for concatenation only.
- * @param v1 Value checked for change.
- * @param suffix Static value used for concatenation only.
- * @param sanitizer An optional sanitizer function
- * @returns itself, so that it may be chained.
- * @codeGenApi
- */
-function ɵɵattributeInterpolate2(attrName, prefix, v0, i0, v1, suffix, sanitizer, namespace) {
-  const lView = getLView();
-  const interpolatedValue = interpolation2(lView, prefix, v0, i0, v1, suffix);
-  if (interpolatedValue !== NO_CHANGE) {
-    const tNode = getSelectedTNode();
-    elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
-    ngDevMode && storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 2, prefix, i0, suffix);
-  }
-  return ɵɵattributeInterpolate2;
-}
-/**
- *
- * Update an interpolated attribute on an element with 3 bound values surrounded by text.
- *
- * Used when the value passed to a property has 3 interpolated values in it:
- *
- * ```html
- * <div attr.title="prefix{{v0}}-{{v1}}-{{v2}}suffix"></div>
- * ```
- *
- * Its compiled representation is::
- *
- * ```ts
- * ɵɵattributeInterpolate3(
- * 'title', 'prefix', v0, '-', v1, '-', v2, 'suffix');
- * ```
- *
- * @param attrName The name of the attribute to update
- * @param prefix Static value used for concatenation only.
- * @param v0 Value checked for change.
- * @param i0 Static value used for concatenation only.
- * @param v1 Value checked for change.
- * @param i1 Static value used for concatenation only.
- * @param v2 Value checked for change.
- * @param suffix Static value used for concatenation only.
- * @param sanitizer An optional sanitizer function
- * @returns itself, so that it may be chained.
- * @codeGenApi
- */
-function ɵɵattributeInterpolate3(attrName, prefix, v0, i0, v1, i1, v2, suffix, sanitizer, namespace) {
-  const lView = getLView();
-  const interpolatedValue = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix);
-  if (interpolatedValue !== NO_CHANGE) {
-    const tNode = getSelectedTNode();
-    elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
-    ngDevMode && storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 3, prefix, i0, i1, suffix);
-  }
-  return ɵɵattributeInterpolate3;
-}
-/**
- *
- * Update an interpolated attribute on an element with 4 bound values surrounded by text.
- *
- * Used when the value passed to a property has 4 interpolated values in it:
- *
- * ```html
- * <div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}suffix"></div>
- * ```
- *
- * Its compiled representation is::
- *
- * ```ts
- * ɵɵattributeInterpolate4(
- * 'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix');
- * ```
- *
- * @param attrName The name of the attribute to update
- * @param prefix Static value used for concatenation only.
- * @param v0 Value checked for change.
- * @param i0 Static value used for concatenation only.
- * @param v1 Value checked for change.
- * @param i1 Static value used for concatenation only.
- * @param v2 Value checked for change.
- * @param i2 Static value used for concatenation only.
- * @param v3 Value checked for change.
- * @param suffix Static value used for concatenation only.
- * @param sanitizer An optional sanitizer function
- * @returns itself, so that it may be chained.
- * @codeGenApi
- */
-function ɵɵattributeInterpolate4(attrName, prefix, v0, i0, v1, i1, v2, i2, v3, suffix, sanitizer, namespace) {
-  const lView = getLView();
-  const interpolatedValue = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix);
-  if (interpolatedValue !== NO_CHANGE) {
-    const tNode = getSelectedTNode();
-    elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
-    ngDevMode && storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 4, prefix, i0, i1, i2, suffix);
-  }
-  return ɵɵattributeInterpolate4;
-}
-/**
- *
- * Update an interpolated attribute on an element with 5 bound values surrounded by text.
- *
- * Used when the value passed to a property has 5 interpolated values in it:
- *
- * ```html
- * <div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}suffix"></div>
- * ```
- *
- * Its compiled representation is::
- *
- * ```ts
- * ɵɵattributeInterpolate5(
- * 'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix');
- * ```
- *
- * @param attrName The name of the attribute to update
- * @param prefix Static value used for concatenation only.
- * @param v0 Value checked for change.
- * @param i0 Static value used for concatenation only.
- * @param v1 Value checked for change.
- * @param i1 Static value used for concatenation only.
- * @param v2 Value checked for change.
- * @param i2 Static value used for concatenation only.
- * @param v3 Value checked for change.
- * @param i3 Static value used for concatenation only.
- * @param v4 Value checked for change.
- * @param suffix Static value used for concatenation only.
- * @param sanitizer An optional sanitizer function
- * @returns itself, so that it may be chained.
- * @codeGenApi
- */
-function ɵɵattributeInterpolate5(attrName, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix, sanitizer, namespace) {
-  const lView = getLView();
-  const interpolatedValue = interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
-  if (interpolatedValue !== NO_CHANGE) {
-    const tNode = getSelectedTNode();
-    elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
-    ngDevMode && storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 5, prefix, i0, i1, i2, i3, suffix);
-  }
-  return ɵɵattributeInterpolate5;
+  return ɵɵattributeInterpolate5;
 }
 /**
  *
@@ -27077,6 +25832,7 @@ function listenerInternal(tView, lView, renderer, tNode, eventName, listenerFn,
   }
 }
 function executeListenerWithErrorHandling(lView, context, listenerFn, e) {
+  const prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(null);
   try {
     profiler(6 /* ProfilerEvent.OutputStart */, context, listenerFn);
     // Only explicitly returning false from a listener should preventDefault
@@ -27086,6 +25842,7 @@ function executeListenerWithErrorHandling(lView, context, listenerFn, e) {
     return false;
   } finally {
     profiler(7 /* ProfilerEvent.OutputEnd */, context, listenerFn);
+    (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
   }
 }
 /**
@@ -31645,7 +30402,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = /*#__PURE__*/new Version('17.2.3');
+const VERSION = /*#__PURE__*/new Version('17.2.4');
 let Console = /*#__PURE__*/(() => {
   class Console {
     log(message) {
@@ -33392,6 +32149,7 @@ let ApplicationRef = /*#__PURE__*/(() => {
       if (this._runningTick) {
         throw new RuntimeError(101 /* RuntimeErrorCode.RECURSIVE_APPLICATION_REF_TICK */, ngDevMode && 'ApplicationRef.tick is called recursively');
       }
+      const prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(null);
       try {
         this._runningTick = true;
         this.detectChangesInAttachedViews();
@@ -33405,6 +32163,7 @@ let ApplicationRef = /*#__PURE__*/(() => {
         this.internalErrorHandler(e);
       } finally {
         this._runningTick = false;
+        (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
       }
     }
     detectChangesInAttachedViews() {
@@ -33495,1575 +32254,2667 @@ let ApplicationRef = /*#__PURE__*/(() => {
       if (ngDevMode && !Array.isArray(listeners)) {
         throw new RuntimeError(-209 /* RuntimeErrorCode.INVALID_MULTI_PROVIDER */, 'Unexpected type of the `APP_BOOTSTRAP_LISTENER` token value ' + `(expected an array, but got ${typeof listeners}). ` + 'Please check that the `APP_BOOTSTRAP_LISTENER` token is configured as a ' + '`multi: true` provider.');
       }
-      [...this._bootstrapListeners, ...listeners].forEach(listener => listener(componentRef));
+      [...this._bootstrapListeners, ...listeners].forEach(listener => listener(componentRef));
+    }
+    /** @internal */
+    ngOnDestroy() {
+      if (this._destroyed) return;
+      try {
+        // Call all the lifecycle hooks.
+        this._destroyListeners.forEach(listener => listener());
+        // Destroy all registered views.
+        this._views.slice().forEach(view => view.destroy());
+      } finally {
+        // Indicate that this instance is destroyed.
+        this._destroyed = true;
+        // Release all references.
+        this._views = [];
+        this._bootstrapListeners = [];
+        this._destroyListeners = [];
+      }
+    }
+    /**
+     * Registers a listener to be called when an instance is destroyed.
+     *
+     * @param callback A callback function to add as a listener.
+     * @returns A function which unregisters a listener.
+     */
+    onDestroy(callback) {
+      (typeof ngDevMode === 'undefined' || ngDevMode) && this.warnIfDestroyed();
+      this._destroyListeners.push(callback);
+      return () => remove(this._destroyListeners, callback);
+    }
+    /**
+     * Destroys an Angular application represented by this `ApplicationRef`. Calling this function
+     * will destroy the associated environment injectors as well as all the bootstrapped components
+     * with their views.
+     */
+    destroy() {
+      if (this._destroyed) {
+        throw new RuntimeError(406 /* RuntimeErrorCode.APPLICATION_REF_ALREADY_DESTROYED */, ngDevMode && 'This instance of the `ApplicationRef` has already been destroyed.');
+      }
+      const injector = this._injector;
+      // Check that this injector instance supports destroy operation.
+      if (injector.destroy && !injector.destroyed) {
+        // Destroying an underlying injector will trigger the `ngOnDestroy` lifecycle
+        // hook, which invokes the remaining cleanup actions.
+        injector.destroy();
+      }
+    }
+    /**
+     * Returns the number of attached views.
+     */
+    get viewCount() {
+      return this._views.length;
+    }
+    warnIfDestroyed() {
+      if ((typeof ngDevMode === 'undefined' || ngDevMode) && this._destroyed) {
+        console.warn(formatRuntimeError(406 /* RuntimeErrorCode.APPLICATION_REF_ALREADY_DESTROYED */, 'This instance of the `ApplicationRef` has already been destroyed.'));
+      }
+    }
+    static #_ = this.ɵfac = function ApplicationRef_Factory(t) {
+      return new (t || ApplicationRef)();
+    };
+    static #_2 = this.ɵprov = /*@__PURE__*/ɵɵdefineInjectable({
+      token: ApplicationRef,
+      factory: ApplicationRef.ɵfac,
+      providedIn: 'root'
+    });
+  }
+  return ApplicationRef;
+})();
+/*#__PURE__*/(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ApplicationRef, [{
+    type: Injectable,
+    args: [{
+      providedIn: 'root'
+    }]
+  }], null, null);
+})();
+function remove(list, el) {
+  const index = list.indexOf(el);
+  if (index > -1) {
+    list.splice(index, 1);
+  }
+}
+let whenStableStore;
+/**
+ * Returns a Promise that resolves when the application becomes stable after this method is called
+ * the first time.
+ */
+function whenStable(applicationRef) {
+  whenStableStore ??= new WeakMap();
+  const cachedWhenStable = whenStableStore.get(applicationRef);
+  if (cachedWhenStable) {
+    return cachedWhenStable;
+  }
+  const whenStablePromise = applicationRef.isStable.pipe((0,rxjs_operators__WEBPACK_IMPORTED_MODULE_5__/* .first */ .K)(isStable => isStable)).toPromise().then(() => void 0);
+  whenStableStore.set(applicationRef, whenStablePromise);
+  // Be a good citizen and clean the store `onDestroy` even though we are using `WeakMap`.
+  applicationRef.onDestroy(() => whenStableStore?.delete(applicationRef));
+  return whenStablePromise;
+}
+function shouldRecheckView(view) {
+  return requiresRefreshOrTraversal(view);
+  // TODO(atscott): We need to support rechecking views marked dirty again in afterRender hooks
+  // in order to support the transition to zoneless. b/308152025
+  /* || !!(view[FLAGS] & LViewFlags.Dirty); */
+}
+
+/**
+ * Combination of NgModuleFactory and ComponentFactories.
+ *
+ * @publicApi
+ *
+ * @deprecated
+ * Ivy JIT mode doesn't require accessing this symbol.
+ * See [JIT API changes due to ViewEngine deprecation](guide/deprecations#jit-api-changes) for
+ * additional context.
+ */
+class ModuleWithComponentFactories {
+  constructor(ngModuleFactory, componentFactories) {
+    this.ngModuleFactory = ngModuleFactory;
+    this.componentFactories = componentFactories;
+  }
+}
+/**
+ * Low-level service for running the angular compiler during runtime
+ * to create {@link ComponentFactory}s, which
+ * can later be used to create and render a Component instance.
+ *
+ * Each `@NgModule` provides an own `Compiler` to its injector,
+ * that will use the directives/pipes of the ng module for compilation
+ * of components.
+ *
+ * @publicApi
+ *
+ * @deprecated
+ * Ivy JIT mode doesn't require accessing this symbol.
+ * See [JIT API changes due to ViewEngine deprecation](guide/deprecations#jit-api-changes) for
+ * additional context.
+ */
+let Compiler = /*#__PURE__*/(() => {
+  class Compiler {
+    /**
+     * Compiles the given NgModule and all of its components. All templates of the components
+     * have to be inlined.
+     */
+    compileModuleSync(moduleType) {
+      return new NgModuleFactory(moduleType);
+    }
+    /**
+     * Compiles the given NgModule and all of its components
+     */
+    compileModuleAsync(moduleType) {
+      return Promise.resolve(this.compileModuleSync(moduleType));
+    }
+    /**
+     * Same as {@link #compileModuleSync} but also creates ComponentFactories for all components.
+     */
+    compileModuleAndAllComponentsSync(moduleType) {
+      const ngModuleFactory = this.compileModuleSync(moduleType);
+      const moduleDef = getNgModuleDef(moduleType);
+      const componentFactories = maybeUnwrapFn(moduleDef.declarations).reduce((factories, declaration) => {
+        const componentDef = getComponentDef(declaration);
+        componentDef && factories.push(new ComponentFactory(componentDef));
+        return factories;
+      }, []);
+      return new ModuleWithComponentFactories(ngModuleFactory, componentFactories);
+    }
+    /**
+     * Same as {@link #compileModuleAsync} but also creates ComponentFactories for all components.
+     */
+    compileModuleAndAllComponentsAsync(moduleType) {
+      return Promise.resolve(this.compileModuleAndAllComponentsSync(moduleType));
+    }
+    /**
+     * Clears all caches.
+     */
+    clearCache() {}
+    /**
+     * Clears the cache for the given component/ngModule.
+     */
+    clearCacheFor(type) {}
+    /**
+     * Returns the id for a given NgModule, if one is defined and known to the compiler.
+     */
+    getModuleId(moduleType) {
+      return undefined;
+    }
+    static #_ = this.ɵfac = function Compiler_Factory(t) {
+      return new (t || Compiler)();
+    };
+    static #_2 = this.ɵprov = /*@__PURE__*/ɵɵdefineInjectable({
+      token: Compiler,
+      factory: Compiler.ɵfac,
+      providedIn: 'root'
+    });
+  }
+  return Compiler;
+})();
+/*#__PURE__*/(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(Compiler, [{
+    type: Injectable,
+    args: [{
+      providedIn: 'root'
+    }]
+  }], null, null);
+})();
+/**
+ * Token to provide CompilerOptions in the platform injector.
+ *
+ * @publicApi
+ */
+const COMPILER_OPTIONS = /*#__PURE__*/new InjectionToken(ngDevMode ? 'compilerOptions' : '');
+/**
+ * A factory for creating a Compiler
+ *
+ * @publicApi
+ *
+ * @deprecated
+ * Ivy JIT mode doesn't require accessing this symbol.
+ * See [JIT API changes due to ViewEngine deprecation](guide/deprecations#jit-api-changes) for
+ * additional context.
+ */
+class CompilerFactory {}
+function compileNgModuleFactory(injector, options, moduleType) {
+  ngDevMode && assertNgModuleType(moduleType);
+  const moduleFactory = new NgModuleFactory(moduleType);
+  // All of the logic below is irrelevant for AOT-compiled code.
+  if (typeof ngJitMode !== 'undefined' && !ngJitMode) {
+    return Promise.resolve(moduleFactory);
+  }
+  const compilerOptions = injector.get(COMPILER_OPTIONS, []).concat(options);
+  // Configure the compiler to use the provided options. This call may fail when multiple modules
+  // are bootstrapped with incompatible options, as a component can only be compiled according to
+  // a single set of options.
+  setJitOptions({
+    defaultEncapsulation: _lastDefined(compilerOptions.map(opts => opts.defaultEncapsulation)),
+    preserveWhitespaces: _lastDefined(compilerOptions.map(opts => opts.preserveWhitespaces))
+  });
+  if (isComponentResourceResolutionQueueEmpty()) {
+    return Promise.resolve(moduleFactory);
+  }
+  const compilerProviders = compilerOptions.flatMap(option => option.providers ?? []);
+  // In case there are no compiler providers, we just return the module factory as
+  // there won't be any resource loader. This can happen with Ivy, because AOT compiled
+  // modules can be still passed through "bootstrapModule". In that case we shouldn't
+  // unnecessarily require the JIT compiler.
+  if (compilerProviders.length === 0) {
+    return Promise.resolve(moduleFactory);
+  }
+  const compiler = getCompilerFacade({
+    usage: 0 /* JitCompilerUsage.Decorator */,
+    kind: 'NgModule',
+    type: moduleType
+  });
+  const compilerInjector = Injector.create({
+    providers: compilerProviders
+  });
+  const resourceLoader = compilerInjector.get(compiler.ResourceLoader);
+  // The resource loader can also return a string while the "resolveComponentResources"
+  // always expects a promise. Therefore we need to wrap the returned value in a promise.
+  return resolveComponentResources(url => Promise.resolve(resourceLoader.get(url))).then(() => moduleFactory);
+}
+function _lastDefined(args) {
+  for (let i = args.length - 1; i >= 0; i--) {
+    if (args[i] !== undefined) {
+      return args[i];
+    }
+  }
+  return undefined;
+}
+let NgZoneChangeDetectionScheduler = /*#__PURE__*/(() => {
+  class NgZoneChangeDetectionScheduler {
+    constructor() {
+      this.zone = inject(NgZone);
+      this.applicationRef = inject(ApplicationRef);
+    }
+    initialize() {
+      if (this._onMicrotaskEmptySubscription) {
+        return;
+      }
+      this._onMicrotaskEmptySubscription = this.zone.onMicrotaskEmpty.subscribe({
+        next: () => {
+          this.zone.run(() => {
+            this.applicationRef.tick();
+          });
+        }
+      });
+    }
+    ngOnDestroy() {
+      this._onMicrotaskEmptySubscription?.unsubscribe();
+    }
+    static #_ = this.ɵfac = function NgZoneChangeDetectionScheduler_Factory(t) {
+      return new (t || NgZoneChangeDetectionScheduler)();
+    };
+    static #_2 = this.ɵprov = /*@__PURE__*/ɵɵdefineInjectable({
+      token: NgZoneChangeDetectionScheduler,
+      factory: NgZoneChangeDetectionScheduler.ɵfac,
+      providedIn: 'root'
+    });
+  }
+  return NgZoneChangeDetectionScheduler;
+})();
+/*#__PURE__*/(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(NgZoneChangeDetectionScheduler, [{
+    type: Injectable,
+    args: [{
+      providedIn: 'root'
+    }]
+  }], null, null);
+})();
+/**
+ * Internal token used to verify that `provideZoneChangeDetection` is not used
+ * with the bootstrapModule API.
+ */
+const PROVIDED_NG_ZONE = /*#__PURE__*/new InjectionToken(typeof ngDevMode === 'undefined' || ngDevMode ? 'provideZoneChangeDetection token' : '');
+function internalProvideZoneChangeDetection(ngZoneFactory) {
+  return [{
+    provide: NgZone,
+    useFactory: ngZoneFactory
+  }, {
+    provide: ENVIRONMENT_INITIALIZER,
+    multi: true,
+    useFactory: () => {
+      const ngZoneChangeDetectionScheduler = inject(NgZoneChangeDetectionScheduler, {
+        optional: true
+      });
+      if ((typeof ngDevMode === 'undefined' || ngDevMode) && ngZoneChangeDetectionScheduler === null) {
+        throw new RuntimeError(402 /* RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP */, `A required Injectable was not found in the dependency injection tree. ` + 'If you are bootstrapping an NgModule, make sure that the `BrowserModule` is imported.');
+      }
+      return () => ngZoneChangeDetectionScheduler.initialize();
     }
-    /** @internal */
-    ngOnDestroy() {
-      if (this._destroyed) return;
-      try {
-        // Call all the lifecycle hooks.
-        this._destroyListeners.forEach(listener => listener());
-        // Destroy all registered views.
-        this._views.slice().forEach(view => view.destroy());
-      } finally {
-        // Indicate that this instance is destroyed.
-        this._destroyed = true;
-        // Release all references.
-        this._views = [];
-        this._bootstrapListeners = [];
-        this._destroyListeners = [];
-      }
+  }, {
+    provide: ENVIRONMENT_INITIALIZER,
+    multi: true,
+    useFactory: () => {
+      const service = inject(ZoneStablePendingTask);
+      return () => {
+        service.initialize();
+      };
     }
-    /**
-     * Registers a listener to be called when an instance is destroyed.
-     *
-     * @param callback A callback function to add as a listener.
-     * @returns A function which unregisters a listener.
-     */
-    onDestroy(callback) {
-      (typeof ngDevMode === 'undefined' || ngDevMode) && this.warnIfDestroyed();
-      this._destroyListeners.push(callback);
-      return () => remove(this._destroyListeners, callback);
+  }, {
+    provide: INTERNAL_APPLICATION_ERROR_HANDLER,
+    useFactory: ngZoneApplicationErrorHandlerFactory
+  }];
+}
+function ngZoneApplicationErrorHandlerFactory() {
+  const zone = inject(NgZone);
+  const userErrorHandler = inject(ErrorHandler);
+  return e => zone.runOutsideAngular(() => userErrorHandler.handleError(e));
+}
+/**
+ * Provides `NgZone`-based change detection for the application bootstrapped using
+ * `bootstrapApplication`.
+ *
+ * `NgZone` is already provided in applications by default. This provider allows you to configure
+ * options like `eventCoalescing` in the `NgZone`.
+ * This provider is not available for `platformBrowser().bootstrapModule`, which uses
+ * `BootstrapOptions` instead.
+ *
+ * @usageNotes
+ * ```typescript
+ * bootstrapApplication(MyApp, {providers: [
+ *   provideZoneChangeDetection({eventCoalescing: true}),
+ * ]});
+ * ```
+ *
+ * @publicApi
+ * @see {@link bootstrapApplication}
+ * @see {@link NgZoneOptions}
+ */
+function provideZoneChangeDetection(options) {
+  const zoneProviders = internalProvideZoneChangeDetection(() => new NgZone(getNgZoneOptions(options)));
+  return makeEnvironmentProviders([typeof ngDevMode === 'undefined' || ngDevMode ? {
+    provide: PROVIDED_NG_ZONE,
+    useValue: true
+  } : [], zoneProviders]);
+}
+// Transforms a set of `BootstrapOptions` (supported by the NgModule-based bootstrap APIs) ->
+// `NgZoneOptions` that are recognized by the NgZone constructor. Passing no options will result in
+// a set of default options returned.
+function getNgZoneOptions(options) {
+  return {
+    enableLongStackTrace: typeof ngDevMode === 'undefined' ? false : !!ngDevMode,
+    shouldCoalesceEventChangeDetection: options?.eventCoalescing ?? false,
+    shouldCoalesceRunChangeDetection: options?.runCoalescing ?? false
+  };
+}
+let ZoneStablePendingTask = /*#__PURE__*/(() => {
+  class ZoneStablePendingTask {
+    constructor() {
+      this.subscription = new rxjs__WEBPACK_IMPORTED_MODULE_2__/* .Subscription */ .wH();
+      this.initialized = false;
+      this.zone = inject(NgZone);
+      this.pendingTasks = inject(PendingTasks);
     }
-    /**
-     * Destroys an Angular application represented by this `ApplicationRef`. Calling this function
-     * will destroy the associated environment injectors as well as all the bootstrapped components
-     * with their views.
-     */
-    destroy() {
-      if (this._destroyed) {
-        throw new RuntimeError(406 /* RuntimeErrorCode.APPLICATION_REF_ALREADY_DESTROYED */, ngDevMode && 'This instance of the `ApplicationRef` has already been destroyed.');
+    initialize() {
+      if (this.initialized) {
+        return;
       }
-      const injector = this._injector;
-      // Check that this injector instance supports destroy operation.
-      if (injector.destroy && !injector.destroyed) {
-        // Destroying an underlying injector will trigger the `ngOnDestroy` lifecycle
-        // hook, which invokes the remaining cleanup actions.
-        injector.destroy();
+      this.initialized = true;
+      let task = null;
+      if (!this.zone.isStable && !this.zone.hasPendingMacrotasks && !this.zone.hasPendingMicrotasks) {
+        task = this.pendingTasks.add();
       }
+      this.zone.runOutsideAngular(() => {
+        this.subscription.add(this.zone.onStable.subscribe(() => {
+          NgZone.assertNotInAngularZone();
+          // Check whether there are no pending macro/micro tasks in the next tick
+          // to allow for NgZone to update the state.
+          queueMicrotask(() => {
+            if (task !== null && !this.zone.hasPendingMacrotasks && !this.zone.hasPendingMicrotasks) {
+              this.pendingTasks.remove(task);
+              task = null;
+            }
+          });
+        }));
+      });
+      this.subscription.add(this.zone.onUnstable.subscribe(() => {
+        NgZone.assertInAngularZone();
+        task ??= this.pendingTasks.add();
+      }));
     }
-    /**
-     * Returns the number of attached views.
-     */
-    get viewCount() {
-      return this._views.length;
-    }
-    warnIfDestroyed() {
-      if ((typeof ngDevMode === 'undefined' || ngDevMode) && this._destroyed) {
-        console.warn(formatRuntimeError(406 /* RuntimeErrorCode.APPLICATION_REF_ALREADY_DESTROYED */, 'This instance of the `ApplicationRef` has already been destroyed.'));
-      }
+    ngOnDestroy() {
+      this.subscription.unsubscribe();
     }
-    static #_ = this.ɵfac = function ApplicationRef_Factory(t) {
-      return new (t || ApplicationRef)();
+    static #_ = this.ɵfac = function ZoneStablePendingTask_Factory(t) {
+      return new (t || ZoneStablePendingTask)();
     };
     static #_2 = this.ɵprov = /*@__PURE__*/ɵɵdefineInjectable({
-      token: ApplicationRef,
-      factory: ApplicationRef.ɵfac,
+      token: ZoneStablePendingTask,
+      factory: ZoneStablePendingTask.ɵfac,
       providedIn: 'root'
     });
   }
-  return ApplicationRef;
+  return ZoneStablePendingTask;
 })();
 /*#__PURE__*/(() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ApplicationRef, [{
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ZoneStablePendingTask, [{
     type: Injectable,
     args: [{
       providedIn: 'root'
     }]
   }], null, null);
 })();
-function remove(list, el) {
-  const index = list.indexOf(el);
-  if (index > -1) {
-    list.splice(index, 1);
-  }
-}
-let whenStableStore;
+
 /**
- * Returns a Promise that resolves when the application becomes stable after this method is called
- * the first time.
+ * Work out the locale from the potential global properties.
+ *
+ * * Closure Compiler: use `goog.LOCALE`.
+ * * Ivy enabled: use `$localize.locale`
  */
-function whenStable(applicationRef) {
-  whenStableStore ??= new WeakMap();
-  const cachedWhenStable = whenStableStore.get(applicationRef);
-  if (cachedWhenStable) {
-    return cachedWhenStable;
+function getGlobalLocale() {
+  if (typeof ngI18nClosureMode !== 'undefined' && ngI18nClosureMode && typeof goog !== 'undefined' && goog.LOCALE !== 'en') {
+    // * The default `goog.LOCALE` value is `en`, while Angular used `en-US`.
+    // * In order to preserve backwards compatibility, we use Angular default value over
+    //   Closure Compiler's one.
+    return goog.LOCALE;
+  } else {
+    // KEEP `typeof $localize !== 'undefined' && $localize.locale` IN SYNC WITH THE LOCALIZE
+    // COMPILE-TIME INLINER.
+    //
+    // * During compile time inlining of translations the expression will be replaced
+    //   with a string literal that is the current locale. Other forms of this expression are not
+    //   guaranteed to be replaced.
+    //
+    // * During runtime translation evaluation, the developer is required to set `$localize.locale`
+    //   if required, or just to provide their own `LOCALE_ID` provider.
+    return typeof $localize !== 'undefined' && $localize.locale || DEFAULT_LOCALE_ID;
   }
-  const whenStablePromise = applicationRef.isStable.pipe((0,rxjs_operators__WEBPACK_IMPORTED_MODULE_5__/* .first */ .K)(isStable => isStable)).toPromise().then(() => void 0);
-  whenStableStore.set(applicationRef, whenStablePromise);
-  // Be a good citizen and clean the store `onDestroy` even though we are using `WeakMap`.
-  applicationRef.onDestroy(() => whenStableStore?.delete(applicationRef));
-  return whenStablePromise;
-}
-function shouldRecheckView(view) {
-  return requiresRefreshOrTraversal(view);
-  // TODO(atscott): We need to support rechecking views marked dirty again in afterRender hooks
-  // in order to support the transition to zoneless. b/308152025
-  /* || !!(view[FLAGS] & LViewFlags.Dirty); */
 }
-
 /**
- * Combination of NgModuleFactory and ComponentFactories.
+ * Provide this token to set the locale of your application.
+ * It is used for i18n extraction, by i18n pipes (DatePipe, I18nPluralPipe, CurrencyPipe,
+ * DecimalPipe and PercentPipe) and by ICU expressions.
+ *
+ * See the [i18n guide](guide/i18n-common-locale-id) for more information.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```typescript
+ * import { LOCALE_ID } from '@angular/core';
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { AppModule } from './app/app.module';
+ *
+ * platformBrowserDynamic().bootstrapModule(AppModule, {
+ *   providers: [{provide: LOCALE_ID, useValue: 'en-US' }]
+ * });
+ * ```
  *
  * @publicApi
+ */
+const LOCALE_ID = /*#__PURE__*/new InjectionToken(ngDevMode ? 'LocaleId' : '', {
+  providedIn: 'root',
+  factory: () => inject(LOCALE_ID, InjectFlags.Optional | InjectFlags.SkipSelf) || getGlobalLocale()
+});
+/**
+ * Provide this token to set the default currency code your application uses for
+ * CurrencyPipe when there is no currency code passed into it. This is only used by
+ * CurrencyPipe and has no relation to locale currency. Defaults to USD if not configured.
  *
- * @deprecated
- * Ivy JIT mode doesn't require accessing this symbol.
- * See [JIT API changes due to ViewEngine deprecation](guide/deprecations#jit-api-changes) for
- * additional context.
+ * See the [i18n guide](guide/i18n-common-locale-id) for more information.
+ *
+ * <div class="alert is-helpful">
+ *
+ * **Deprecation notice:**
+ *
+ * The default currency code is currently always `USD` but this is deprecated from v9.
+ *
+ * **In v10 the default currency code will be taken from the current locale.**
+ *
+ * If you need the previous behavior then set it by creating a `DEFAULT_CURRENCY_CODE` provider in
+ * your application `NgModule`:
+ *
+ * ```ts
+ * {provide: DEFAULT_CURRENCY_CODE, useValue: 'USD'}
+ * ```
+ *
+ * </div>
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```typescript
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { AppModule } from './app/app.module';
+ *
+ * platformBrowserDynamic().bootstrapModule(AppModule, {
+ *   providers: [{provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR' }]
+ * });
+ * ```
+ *
+ * @publicApi
  */
-class ModuleWithComponentFactories {
-  constructor(ngModuleFactory, componentFactories) {
-    this.ngModuleFactory = ngModuleFactory;
-    this.componentFactories = componentFactories;
-  }
-}
+const DEFAULT_CURRENCY_CODE = /*#__PURE__*/new InjectionToken(ngDevMode ? 'DefaultCurrencyCode' : '', {
+  providedIn: 'root',
+  factory: () => USD_CURRENCY_CODE
+});
 /**
- * Low-level service for running the angular compiler during runtime
- * to create {@link ComponentFactory}s, which
- * can later be used to create and render a Component instance.
+ * Use this token at bootstrap to provide the content of your translation file (`xtb`,
+ * `xlf` or `xlf2`) when you want to translate your application in another language.
  *
- * Each `@NgModule` provides an own `Compiler` to its injector,
- * that will use the directives/pipes of the ng module for compilation
- * of components.
+ * See the [i18n guide](guide/i18n-common-merge) for more information.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```typescript
+ * import { TRANSLATIONS } from '@angular/core';
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { AppModule } from './app/app.module';
+ *
+ * // content of your translation file
+ * const translations = '....';
+ *
+ * platformBrowserDynamic().bootstrapModule(AppModule, {
+ *   providers: [{provide: TRANSLATIONS, useValue: translations }]
+ * });
+ * ```
  *
  * @publicApi
+ */
+const TRANSLATIONS = /*#__PURE__*/new InjectionToken(ngDevMode ? 'Translations' : '');
+/**
+ * Provide this token at bootstrap to set the format of your {@link TRANSLATIONS}: `xtb`,
+ * `xlf` or `xlf2`.
  *
- * @deprecated
- * Ivy JIT mode doesn't require accessing this symbol.
- * See [JIT API changes due to ViewEngine deprecation](guide/deprecations#jit-api-changes) for
- * additional context.
+ * See the [i18n guide](guide/i18n-common-merge) for more information.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```typescript
+ * import { TRANSLATIONS_FORMAT } from '@angular/core';
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { AppModule } from './app/app.module';
+ *
+ * platformBrowserDynamic().bootstrapModule(AppModule, {
+ *   providers: [{provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }]
+ * });
+ * ```
+ *
+ * @publicApi
  */
-let Compiler = /*#__PURE__*/(() => {
-  class Compiler {
+const TRANSLATIONS_FORMAT = /*#__PURE__*/new InjectionToken(ngDevMode ? 'TranslationsFormat' : '');
+/**
+ * Use this enum at bootstrap as an option of `bootstrapModule` to define the strategy
+ * that the compiler should use in case of missing translations:
+ * - Error: throw if you have missing translations.
+ * - Warning (default): show a warning in the console and/or shell.
+ * - Ignore: do nothing.
+ *
+ * See the [i18n guide](guide/i18n-common-merge#report-missing-translations) for more information.
+ *
+ * @usageNotes
+ * ### Example
+ * ```typescript
+ * import { MissingTranslationStrategy } from '@angular/core';
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { AppModule } from './app/app.module';
+ *
+ * platformBrowserDynamic().bootstrapModule(AppModule, {
+ *   missingTranslation: MissingTranslationStrategy.Error
+ * });
+ * ```
+ *
+ * @publicApi
+ */
+var MissingTranslationStrategy = /*#__PURE__*/function (MissingTranslationStrategy) {
+  MissingTranslationStrategy[MissingTranslationStrategy["Error"] = 0] = "Error";
+  MissingTranslationStrategy[MissingTranslationStrategy["Warning"] = 1] = "Warning";
+  MissingTranslationStrategy[MissingTranslationStrategy["Ignore"] = 2] = "Ignore";
+  return MissingTranslationStrategy;
+}(MissingTranslationStrategy || {});
+/**
+ * Internal token that allows to register extra callbacks that should be invoked during the
+ * `PlatformRef.destroy` operation. This token is needed to avoid a direct reference to the
+ * `PlatformRef` class (i.e. register the callback via `PlatformRef.onDestroy`), thus making the
+ * entire class tree-shakeable.
+ */
+const PLATFORM_DESTROY_LISTENERS = /*#__PURE__*/new InjectionToken(ngDevMode ? 'PlatformDestroyListeners' : '');
+/**
+ * The Angular platform is the entry point for Angular on a web page.
+ * Each page has exactly one platform. Services (such as reflection) which are common
+ * to every Angular application running on the page are bound in its scope.
+ * A page's platform is initialized implicitly when a platform is created using a platform
+ * factory such as `PlatformBrowser`, or explicitly by calling the `createPlatform()` function.
+ *
+ * @publicApi
+ */
+let PlatformRef = /*#__PURE__*/(() => {
+  class PlatformRef {
+    /** @internal */
+    constructor(_injector) {
+      this._injector = _injector;
+      this._modules = [];
+      this._destroyListeners = [];
+      this._destroyed = false;
+    }
     /**
-     * Compiles the given NgModule and all of its components. All templates of the components
-     * have to be inlined.
+     * Creates an instance of an `@NgModule` for the given platform.
+     *
+     * @deprecated Passing NgModule factories as the `PlatformRef.bootstrapModuleFactory` function
+     *     argument is deprecated. Use the `PlatformRef.bootstrapModule` API instead.
      */
-    compileModuleSync(moduleType) {
-      return new NgModuleFactory(moduleType);
+    bootstrapModuleFactory(moduleFactory, options) {
+      // Note: We need to create the NgZone _before_ we instantiate the module,
+      // as instantiating the module creates some providers eagerly.
+      // So we create a mini parent injector that just contains the new NgZone and
+      // pass that as parent to the NgModuleFactory.
+      const ngZone = getNgZone(options?.ngZone, getNgZoneOptions({
+        eventCoalescing: options?.ngZoneEventCoalescing,
+        runCoalescing: options?.ngZoneRunCoalescing
+      }));
+      // Note: Create ngZoneInjector within ngZone.run so that all of the instantiated services are
+      // created within the Angular zone
+      // Do not try to replace ngZone.run with ApplicationRef#run because ApplicationRef would then be
+      // created outside of the Angular zone.
+      return ngZone.run(() => {
+        const moduleRef = createNgModuleRefWithProviders(moduleFactory.moduleType, this.injector, internalProvideZoneChangeDetection(() => ngZone));
+        if ((typeof ngDevMode === 'undefined' || ngDevMode) && moduleRef.injector.get(PROVIDED_NG_ZONE, null) !== null) {
+          throw new RuntimeError(207 /* RuntimeErrorCode.PROVIDER_IN_WRONG_CONTEXT */, '`bootstrapModule` does not support `provideZoneChangeDetection`. Use `BootstrapOptions` instead.');
+        }
+        const exceptionHandler = moduleRef.injector.get(ErrorHandler, null);
+        if ((typeof ngDevMode === 'undefined' || ngDevMode) && exceptionHandler === null) {
+          throw new RuntimeError(402 /* RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP */, 'No ErrorHandler. Is platform module (BrowserModule) included?');
+        }
+        ngZone.runOutsideAngular(() => {
+          const subscription = ngZone.onError.subscribe({
+            next: error => {
+              exceptionHandler.handleError(error);
+            }
+          });
+          moduleRef.onDestroy(() => {
+            remove(this._modules, moduleRef);
+            subscription.unsubscribe();
+          });
+        });
+        return _callAndReportToErrorHandler(exceptionHandler, ngZone, () => {
+          const initStatus = moduleRef.injector.get(ApplicationInitStatus);
+          initStatus.runInitializers();
+          return initStatus.donePromise.then(() => {
+            // If the `LOCALE_ID` provider is defined at bootstrap then we set the value for ivy
+            const localeId = moduleRef.injector.get(LOCALE_ID, DEFAULT_LOCALE_ID);
+            setLocaleId(localeId || DEFAULT_LOCALE_ID);
+            this._moduleDoBootstrap(moduleRef);
+            return moduleRef;
+          });
+        });
+      });
     }
     /**
-     * Compiles the given NgModule and all of its components
+     * Creates an instance of an `@NgModule` for a given platform.
+     *
+     * @usageNotes
+     * ### Simple Example
+     *
+     * ```typescript
+     * @NgModule({
+     *   imports: [BrowserModule]
+     * })
+     * class MyModule {}
+     *
+     * let moduleRef = platformBrowser().bootstrapModule(MyModule);
+     * ```
+     *
      */
-    compileModuleAsync(moduleType) {
-      return Promise.resolve(this.compileModuleSync(moduleType));
+    bootstrapModule(moduleType, compilerOptions = []) {
+      const options = optionsReducer({}, compilerOptions);
+      return compileNgModuleFactory(this.injector, options, moduleType).then(moduleFactory => this.bootstrapModuleFactory(moduleFactory, options));
+    }
+    _moduleDoBootstrap(moduleRef) {
+      const appRef = moduleRef.injector.get(ApplicationRef);
+      if (moduleRef._bootstrapComponents.length > 0) {
+        moduleRef._bootstrapComponents.forEach(f => appRef.bootstrap(f));
+      } else if (moduleRef.instance.ngDoBootstrap) {
+        moduleRef.instance.ngDoBootstrap(appRef);
+      } else {
+        throw new RuntimeError(-403 /* RuntimeErrorCode.BOOTSTRAP_COMPONENTS_NOT_FOUND */, ngDevMode && `The module ${stringify(moduleRef.instance.constructor)} was bootstrapped, ` + `but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. ` + `Please define one of these.`);
+      }
+      this._modules.push(moduleRef);
     }
     /**
-     * Same as {@link #compileModuleSync} but also creates ComponentFactories for all components.
+     * Registers a listener to be called when the platform is destroyed.
      */
-    compileModuleAndAllComponentsSync(moduleType) {
-      const ngModuleFactory = this.compileModuleSync(moduleType);
-      const moduleDef = getNgModuleDef(moduleType);
-      const componentFactories = maybeUnwrapFn(moduleDef.declarations).reduce((factories, declaration) => {
-        const componentDef = getComponentDef(declaration);
-        componentDef && factories.push(new ComponentFactory(componentDef));
-        return factories;
-      }, []);
-      return new ModuleWithComponentFactories(ngModuleFactory, componentFactories);
+    onDestroy(callback) {
+      this._destroyListeners.push(callback);
     }
     /**
-     * Same as {@link #compileModuleAsync} but also creates ComponentFactories for all components.
+     * Retrieves the platform {@link Injector}, which is the parent injector for
+     * every Angular application on the page and provides singleton providers.
      */
-    compileModuleAndAllComponentsAsync(moduleType) {
-      return Promise.resolve(this.compileModuleAndAllComponentsSync(moduleType));
+    get injector() {
+      return this._injector;
+    }
+    /**
+     * Destroys the current Angular platform and all Angular applications on the page.
+     * Destroys all modules and listeners registered with the platform.
+     */
+    destroy() {
+      if (this._destroyed) {
+        throw new RuntimeError(404 /* RuntimeErrorCode.PLATFORM_ALREADY_DESTROYED */, ngDevMode && 'The platform has already been destroyed!');
+      }
+      this._modules.slice().forEach(module => module.destroy());
+      this._destroyListeners.forEach(listener => listener());
+      const destroyListeners = this._injector.get(PLATFORM_DESTROY_LISTENERS, null);
+      if (destroyListeners) {
+        destroyListeners.forEach(listener => listener());
+        destroyListeners.clear();
+      }
+      this._destroyed = true;
     }
     /**
-     * Clears all caches.
-     */
-    clearCache() {}
-    /**
-     * Clears the cache for the given component/ngModule.
-     */
-    clearCacheFor(type) {}
-    /**
-     * Returns the id for a given NgModule, if one is defined and known to the compiler.
+     * Indicates whether this instance was destroyed.
      */
-    getModuleId(moduleType) {
-      return undefined;
+    get destroyed() {
+      return this._destroyed;
     }
-    static #_ = this.ɵfac = function Compiler_Factory(t) {
-      return new (t || Compiler)();
+    static #_ = this.ɵfac = function PlatformRef_Factory(t) {
+      return new (t || PlatformRef)(ɵɵinject(Injector));
     };
     static #_2 = this.ɵprov = /*@__PURE__*/ɵɵdefineInjectable({
-      token: Compiler,
-      factory: Compiler.ɵfac,
-      providedIn: 'root'
+      token: PlatformRef,
+      factory: PlatformRef.ɵfac,
+      providedIn: 'platform'
     });
   }
-  return Compiler;
+  return PlatformRef;
 })();
 /*#__PURE__*/(() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(Compiler, [{
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(PlatformRef, [{
     type: Injectable,
     args: [{
-      providedIn: 'root'
+      providedIn: 'platform'
     }]
-  }], null, null);
+  }], () => [{
+    type: Injector
+  }], null);
 })();
+let _platformInjector = null;
 /**
- * Token to provide CompilerOptions in the platform injector.
- *
- * @publicApi
+ * Internal token to indicate whether having multiple bootstrapped platform should be allowed (only
+ * one bootstrapped platform is allowed by default). This token helps to support SSR scenarios.
  */
-const COMPILER_OPTIONS = /*#__PURE__*/new InjectionToken(ngDevMode ? 'compilerOptions' : '');
+const ALLOW_MULTIPLE_PLATFORMS = /*#__PURE__*/new InjectionToken(ngDevMode ? 'AllowMultipleToken' : '');
 /**
- * A factory for creating a Compiler
+ * Creates a platform.
+ * Platforms must be created on launch using this function.
  *
  * @publicApi
- *
- * @deprecated
- * Ivy JIT mode doesn't require accessing this symbol.
- * See [JIT API changes due to ViewEngine deprecation](guide/deprecations#jit-api-changes) for
- * additional context.
  */
-class CompilerFactory {}
-function compileNgModuleFactory(injector, options, moduleType) {
-  ngDevMode && assertNgModuleType(moduleType);
-  const moduleFactory = new NgModuleFactory(moduleType);
-  // All of the logic below is irrelevant for AOT-compiled code.
-  if (typeof ngJitMode !== 'undefined' && !ngJitMode) {
-    return Promise.resolve(moduleFactory);
-  }
-  const compilerOptions = injector.get(COMPILER_OPTIONS, []).concat(options);
-  // Configure the compiler to use the provided options. This call may fail when multiple modules
-  // are bootstrapped with incompatible options, as a component can only be compiled according to
-  // a single set of options.
-  setJitOptions({
-    defaultEncapsulation: _lastDefined(compilerOptions.map(opts => opts.defaultEncapsulation)),
-    preserveWhitespaces: _lastDefined(compilerOptions.map(opts => opts.preserveWhitespaces))
-  });
-  if (isComponentResourceResolutionQueueEmpty()) {
-    return Promise.resolve(moduleFactory);
-  }
-  const compilerProviders = compilerOptions.flatMap(option => option.providers ?? []);
-  // In case there are no compiler providers, we just return the module factory as
-  // there won't be any resource loader. This can happen with Ivy, because AOT compiled
-  // modules can be still passed through "bootstrapModule". In that case we shouldn't
-  // unnecessarily require the JIT compiler.
-  if (compilerProviders.length === 0) {
-    return Promise.resolve(moduleFactory);
-  }
-  const compiler = getCompilerFacade({
-    usage: 0 /* JitCompilerUsage.Decorator */,
-    kind: 'NgModule',
-    type: moduleType
-  });
-  const compilerInjector = Injector.create({
-    providers: compilerProviders
-  });
-  const resourceLoader = compilerInjector.get(compiler.ResourceLoader);
-  // The resource loader can also return a string while the "resolveComponentResources"
-  // always expects a promise. Therefore we need to wrap the returned value in a promise.
-  return resolveComponentResources(url => Promise.resolve(resourceLoader.get(url))).then(() => moduleFactory);
-}
-function _lastDefined(args) {
-  for (let i = args.length - 1; i >= 0; i--) {
-    if (args[i] !== undefined) {
-      return args[i];
-    }
+function createPlatform(injector) {
+  if (_platformInjector && !_platformInjector.get(ALLOW_MULTIPLE_PLATFORMS, false)) {
+    throw new RuntimeError(400 /* RuntimeErrorCode.MULTIPLE_PLATFORMS */, ngDevMode && 'There can be only one platform. Destroy the previous one to create a new one.');
   }
-  return undefined;
+  publishDefaultGlobalUtils();
+  publishSignalConfiguration();
+  _platformInjector = injector;
+  const platform = injector.get(PlatformRef);
+  runPlatformInitializers(injector);
+  return platform;
 }
-let NgZoneChangeDetectionScheduler = /*#__PURE__*/(() => {
-  class NgZoneChangeDetectionScheduler {
-    constructor() {
-      this.zone = inject(NgZone);
-      this.applicationRef = inject(ApplicationRef);
-    }
-    initialize() {
-      if (this._onMicrotaskEmptySubscription) {
-        return;
-      }
-      this._onMicrotaskEmptySubscription = this.zone.onMicrotaskEmpty.subscribe({
-        next: () => {
-          this.zone.run(() => {
-            this.applicationRef.tick();
-          });
-        }
-      });
-    }
-    ngOnDestroy() {
-      this._onMicrotaskEmptySubscription?.unsubscribe();
-    }
-    static #_ = this.ɵfac = function NgZoneChangeDetectionScheduler_Factory(t) {
-      return new (t || NgZoneChangeDetectionScheduler)();
-    };
-    static #_2 = this.ɵprov = /*@__PURE__*/ɵɵdefineInjectable({
-      token: NgZoneChangeDetectionScheduler,
-      factory: NgZoneChangeDetectionScheduler.ɵfac,
-      providedIn: 'root'
-    });
-  }
-  return NgZoneChangeDetectionScheduler;
-})();
-/*#__PURE__*/(() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(NgZoneChangeDetectionScheduler, [{
-    type: Injectable,
-    args: [{
-      providedIn: 'root'
-    }]
-  }], null, null);
-})();
 /**
- * Internal token used to verify that `provideZoneChangeDetection` is not used
- * with the bootstrapModule API.
+ * Creates a factory for a platform. Can be used to provide or override `Providers` specific to
+ * your application's runtime needs, such as `PLATFORM_INITIALIZER` and `PLATFORM_ID`.
+ * @param parentPlatformFactory Another platform factory to modify. Allows you to compose factories
+ * to build up configurations that might be required by different libraries or parts of the
+ * application.
+ * @param name Identifies the new platform factory.
+ * @param providers A set of dependency providers for platforms created with the new factory.
+ *
+ * @publicApi
  */
-const PROVIDED_NG_ZONE = /*#__PURE__*/new InjectionToken(typeof ngDevMode === 'undefined' || ngDevMode ? 'provideZoneChangeDetection token' : '');
-function internalProvideZoneChangeDetection(ngZoneFactory) {
-  return [{
-    provide: NgZone,
-    useFactory: ngZoneFactory
-  }, {
-    provide: ENVIRONMENT_INITIALIZER,
-    multi: true,
-    useFactory: () => {
-      const ngZoneChangeDetectionScheduler = inject(NgZoneChangeDetectionScheduler, {
-        optional: true
-      });
-      if ((typeof ngDevMode === 'undefined' || ngDevMode) && ngZoneChangeDetectionScheduler === null) {
-        throw new RuntimeError(402 /* RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP */, `A required Injectable was not found in the dependency injection tree. ` + 'If you are bootstrapping an NgModule, make sure that the `BrowserModule` is imported.');
+function createPlatformFactory(parentPlatformFactory, name, providers = []) {
+  const desc = `Platform: ${name}`;
+  const marker = new InjectionToken(desc);
+  return (extraProviders = []) => {
+    let platform = getPlatform();
+    if (!platform || platform.injector.get(ALLOW_MULTIPLE_PLATFORMS, false)) {
+      const platformProviders = [...providers, ...extraProviders, {
+        provide: marker,
+        useValue: true
+      }];
+      if (parentPlatformFactory) {
+        parentPlatformFactory(platformProviders);
+      } else {
+        createPlatform(createPlatformInjector(platformProviders, desc));
       }
-      return () => ngZoneChangeDetectionScheduler.initialize();
-    }
-  }, {
-    provide: ENVIRONMENT_INITIALIZER,
-    multi: true,
-    useFactory: () => {
-      const service = inject(ZoneStablePendingTask);
-      return () => {
-        service.initialize();
-      };
     }
-  }, {
-    provide: INTERNAL_APPLICATION_ERROR_HANDLER,
-    useFactory: ngZoneApplicationErrorHandlerFactory
-  }];
+    return assertPlatform(marker);
+  };
 }
-function ngZoneApplicationErrorHandlerFactory() {
-  const zone = inject(NgZone);
-  const userErrorHandler = inject(ErrorHandler);
-  return e => zone.runOutsideAngular(() => userErrorHandler.handleError(e));
+/**
+ * Helper function to create an instance of a platform injector (that maintains the 'platform'
+ * scope).
+ */
+function createPlatformInjector(providers = [], name) {
+  return Injector.create({
+    name,
+    providers: [{
+      provide: INJECTOR_SCOPE,
+      useValue: 'platform'
+    }, {
+      provide: PLATFORM_DESTROY_LISTENERS,
+      useValue: new Set([() => _platformInjector = null])
+    }, ...providers]
+  });
 }
 /**
- * Provides `NgZone`-based change detection for the application bootstrapped using
- * `bootstrapApplication`.
+ * Checks that there is currently a platform that contains the given token as a provider.
  *
- * `NgZone` is already provided in applications by default. This provider allows you to configure
- * options like `eventCoalescing` in the `NgZone`.
- * This provider is not available for `platformBrowser().bootstrapModule`, which uses
- * `BootstrapOptions` instead.
+ * @publicApi
+ */
+function assertPlatform(requiredToken) {
+  const platform = getPlatform();
+  if (!platform) {
+    throw new RuntimeError(401 /* RuntimeErrorCode.PLATFORM_NOT_FOUND */, ngDevMode && 'No platform exists!');
+  }
+  if ((typeof ngDevMode === 'undefined' || ngDevMode) && !platform.injector.get(requiredToken, null)) {
+    throw new RuntimeError(400 /* RuntimeErrorCode.MULTIPLE_PLATFORMS */, 'A platform with a different configuration has been created. Please destroy it first.');
+  }
+  return platform;
+}
+/**
+ * Returns the current platform.
  *
- * @usageNotes
- * ```typescript
- * bootstrapApplication(MyApp, {providers: [
- *   provideZoneChangeDetection({eventCoalescing: true}),
- * ]});
- * ```
+ * @publicApi
+ */
+function getPlatform() {
+  return _platformInjector?.get(PlatformRef) ?? null;
+}
+/**
+ * Destroys the current Angular platform and all Angular applications on the page.
+ * Destroys all modules and listeners registered with the platform.
  *
  * @publicApi
- * @see {@link bootstrapApplication}
- * @see {@link NgZoneOptions}
  */
-function provideZoneChangeDetection(options) {
-  const zoneProviders = internalProvideZoneChangeDetection(() => new NgZone(getNgZoneOptions(options)));
-  return makeEnvironmentProviders([typeof ngDevMode === 'undefined' || ngDevMode ? {
-    provide: PROVIDED_NG_ZONE,
-    useValue: true
-  } : [], zoneProviders]);
+function destroyPlatform() {
+  getPlatform()?.destroy();
 }
-// Transforms a set of `BootstrapOptions` (supported by the NgModule-based bootstrap APIs) ->
-// `NgZoneOptions` that are recognized by the NgZone constructor. Passing no options will result in
-// a set of default options returned.
-function getNgZoneOptions(options) {
-  return {
-    enableLongStackTrace: typeof ngDevMode === 'undefined' ? false : !!ngDevMode,
-    shouldCoalesceEventChangeDetection: options?.eventCoalescing ?? false,
-    shouldCoalesceRunChangeDetection: options?.runCoalescing ?? false
-  };
+/**
+ * The goal of this function is to bootstrap a platform injector,
+ * but avoid referencing `PlatformRef` class.
+ * This function is needed for bootstrapping a Standalone Component.
+ */
+function createOrReusePlatformInjector(providers = []) {
+  // If a platform injector already exists, it means that the platform
+  // is already bootstrapped and no additional actions are required.
+  if (_platformInjector) return _platformInjector;
+  publishDefaultGlobalUtils();
+  // Otherwise, setup a new platform injector and run platform initializers.
+  const injector = createPlatformInjector(providers);
+  _platformInjector = injector;
+  publishSignalConfiguration();
+  runPlatformInitializers(injector);
+  return injector;
+}
+function runPlatformInitializers(injector) {
+  const inits = injector.get(PLATFORM_INITIALIZER, null);
+  inits?.forEach(init => init());
 }
-let ZoneStablePendingTask = /*#__PURE__*/(() => {
-  class ZoneStablePendingTask {
-    constructor() {
-      this.subscription = new rxjs__WEBPACK_IMPORTED_MODULE_2__/* .Subscription */ .wH();
-      this.initialized = false;
-      this.zone = inject(NgZone);
-      this.pendingTasks = inject(PendingTasks);
-    }
-    initialize() {
-      if (this.initialized) {
-        return;
-      }
-      this.initialized = true;
-      let task = null;
-      if (!this.zone.isStable && !this.zone.hasPendingMacrotasks && !this.zone.hasPendingMicrotasks) {
-        task = this.pendingTasks.add();
-      }
-      this.zone.runOutsideAngular(() => {
-        this.subscription.add(this.zone.onStable.subscribe(() => {
-          NgZone.assertNotInAngularZone();
-          // Check whether there are no pending macro/micro tasks in the next tick
-          // to allow for NgZone to update the state.
-          queueMicrotask(() => {
-            if (task !== null && !this.zone.hasPendingMacrotasks && !this.zone.hasPendingMicrotasks) {
-              this.pendingTasks.remove(task);
-              task = null;
-            }
-          });
-        }));
-      });
-      this.subscription.add(this.zone.onUnstable.subscribe(() => {
-        NgZone.assertInAngularZone();
-        task ??= this.pendingTasks.add();
-      }));
-    }
-    ngOnDestroy() {
-      this.subscription.unsubscribe();
-    }
-    static #_ = this.ɵfac = function ZoneStablePendingTask_Factory(t) {
-      return new (t || ZoneStablePendingTask)();
-    };
-    static #_2 = this.ɵprov = /*@__PURE__*/ɵɵdefineInjectable({
-      token: ZoneStablePendingTask,
-      factory: ZoneStablePendingTask.ɵfac,
-      providedIn: 'root'
-    });
-  }
-  return ZoneStablePendingTask;
-})();
-/*#__PURE__*/(() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ZoneStablePendingTask, [{
-    type: Injectable,
-    args: [{
-      providedIn: 'root'
-    }]
-  }], null, null);
-})();
 
 /**
- * Work out the locale from the potential global properties.
+ * Returns whether Angular is in development mode.
  *
- * * Closure Compiler: use `goog.LOCALE`.
- * * Ivy enabled: use `$localize.locale`
+ * By default, this is true, unless `enableProdMode` is invoked prior to calling this method or the
+ * application is built using the Angular CLI with the `optimization` option.
+ * @see {@link cli/build ng build}
+ *
+ * @publicApi
  */
-function getGlobalLocale() {
-  if (typeof ngI18nClosureMode !== 'undefined' && ngI18nClosureMode && typeof goog !== 'undefined' && goog.LOCALE !== 'en') {
-    // * The default `goog.LOCALE` value is `en`, while Angular used `en-US`.
-    // * In order to preserve backwards compatibility, we use Angular default value over
-    //   Closure Compiler's one.
-    return goog.LOCALE;
-  } else {
-    // KEEP `typeof $localize !== 'undefined' && $localize.locale` IN SYNC WITH THE LOCALIZE
-    // COMPILE-TIME INLINER.
-    //
-    // * During compile time inlining of translations the expression will be replaced
-    //   with a string literal that is the current locale. Other forms of this expression are not
-    //   guaranteed to be replaced.
-    //
-    // * During runtime translation evaluation, the developer is required to set `$localize.locale`
-    //   if required, or just to provide their own `LOCALE_ID` provider.
-    return typeof $localize !== 'undefined' && $localize.locale || DEFAULT_LOCALE_ID;
+function isDevMode() {
+  return typeof ngDevMode === 'undefined' || !!ngDevMode;
+}
+/**
+ * Disable Angular's development mode, which turns off assertions and other
+ * checks within the framework.
+ *
+ * One important assertion this disables verifies that a change detection pass
+ * does not result in additional changes to any bindings (also known as
+ * unidirectional data flow).
+ *
+ * Using this method is discouraged as the Angular CLI will set production mode when using the
+ * `optimization` option.
+ * @see {@link cli/build ng build}
+ *
+ * @publicApi
+ */
+function enableProdMode() {
+  // The below check is there so when ngDevMode is set via terser
+  // `global['ngDevMode'] = false;` is also dropped.
+  if (typeof ngDevMode === 'undefined' || ngDevMode) {
+    _global['ngDevMode'] = false;
   }
 }
+
+// Public API for render
+
 /**
- * Provide this token to set the locale of your application.
- * It is used for i18n extraction, by i18n pipes (DatePipe, I18nPluralPipe, CurrencyPipe,
- * DecimalPipe and PercentPipe) and by ICU expressions.
+ * Returns the NgModuleFactory with the given id (specified using [@NgModule.id
+ * field](api/core/NgModule#id)), if it exists and has been loaded. Factories for NgModules that do
+ * not specify an `id` cannot be retrieved. Throws if an NgModule cannot be found.
+ * @publicApi
+ * @deprecated Use `getNgModuleById` instead.
+ */
+function getModuleFactory(id) {
+  const type = getRegisteredNgModuleType(id);
+  if (!type) throw noModuleError(id);
+  return new NgModuleFactory(type);
+}
+/**
+ * Returns the NgModule class with the given id (specified using [@NgModule.id
+ * field](api/core/NgModule#id)), if it exists and has been loaded. Classes for NgModules that do
+ * not specify an `id` cannot be retrieved. Throws if an NgModule cannot be found.
+ * @publicApi
+ */
+function getNgModuleById(id) {
+  const type = getRegisteredNgModuleType(id);
+  if (!type) throw noModuleError(id);
+  return type;
+}
+function noModuleError(id) {
+  return new Error(`No module with ID ${id} loaded`);
+}
+
+/**
+ * Base class that provides change detection functionality.
+ * A change-detection tree collects all views that are to be checked for changes.
+ * Use the methods to add and remove views from the tree, initiate change-detection,
+ * and explicitly mark views as _dirty_, meaning that they have changed and need to be re-rendered.
  *
- * See the [i18n guide](guide/i18n-common-locale-id) for more information.
+ * @see [Using change detection hooks](guide/lifecycle-hooks#using-change-detection-hooks)
+ * @see [Defining custom change detection](guide/lifecycle-hooks#defining-custom-change-detection)
  *
  * @usageNotes
- * ### Example
  *
- * ```typescript
- * import { LOCALE_ID } from '@angular/core';
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- * import { AppModule } from './app/app.module';
+ * The following examples demonstrate how to modify default change-detection behavior
+ * to perform explicit detection when needed.
+ *
+ * ### Use `markForCheck()` with `CheckOnce` strategy
+ *
+ * The following example sets the `OnPush` change-detection strategy for a component
+ * (`CheckOnce`, rather than the default `CheckAlways`), then forces a second check
+ * after an interval.
+ *
+ * <code-example path="core/ts/change_detect/change-detection.ts"
+ * region="mark-for-check"></code-example>
+ *
+ * ### Detach change detector to limit how often check occurs
+ *
+ * The following example defines a component with a large list of read-only data
+ * that is expected to change constantly, many times per second.
+ * To improve performance, we want to check and update the list
+ * less often than the changes actually occur. To do that, we detach
+ * the component's change detector and perform an explicit local check every five seconds.
+ *
+ * <code-example path="core/ts/change_detect/change-detection.ts" region="detach"></code-example>
+ *
+ *
+ * ### Reattaching a detached component
+ *
+ * The following example creates a component displaying live data.
+ * The component detaches its change detector from the main change detector tree
+ * when the `live` property is set to false, and reattaches it when the property
+ * becomes true.
+ *
+ * <code-example path="core/ts/change_detect/change-detection.ts" region="reattach"></code-example>
+ *
+ * @publicApi
+ */
+let ChangeDetectorRef = /*#__PURE__*/(() => {
+  class ChangeDetectorRef {
+    /**
+     * @internal
+     * @nocollapse
+     */
+    static #_ = this.__NG_ELEMENT_ID__ = injectChangeDetectorRef;
+  }
+  return ChangeDetectorRef;
+})();
+/** Returns a ChangeDetectorRef (a.k.a. a ViewRef) */
+function injectChangeDetectorRef(flags) {
+  return createViewRef(getCurrentTNode(), getLView(), (flags & 16 /* InternalInjectFlags.ForPipe */) === 16 /* InternalInjectFlags.ForPipe */);
+}
+/**
+ * Creates a ViewRef and stores it on the injector as ChangeDetectorRef (public alias).
+ *
+ * @param tNode The node that is requesting a ChangeDetectorRef
+ * @param lView The view to which the node belongs
+ * @param isPipe Whether the view is being injected into a pipe.
+ * @returns The ChangeDetectorRef to use
+ */
+function createViewRef(tNode, lView, isPipe) {
+  if (isComponentHost(tNode) && !isPipe) {
+    // The LView represents the location where the component is declared.
+    // Instead we want the LView for the component View and so we need to look it up.
+    const componentView = getComponentLViewByIndex(tNode.index, lView); // look down
+    return new ViewRef$1(componentView, componentView);
+  } else if (tNode.type & (3 /* TNodeType.AnyRNode */ | 12 /* TNodeType.AnyContainer */ | 32 /* TNodeType.Icu */)) {
+    // The LView represents the location where the injection is requested from.
+    // We need to locate the containing LView (in case where the `lView` is an embedded view)
+    const hostComponentView = lView[DECLARATION_COMPONENT_VIEW]; // look up
+    return new ViewRef$1(hostComponentView, lView);
+  }
+  return null;
+}
+
+/**
+ * Represents an Angular [view](guide/glossary#view "Definition").
  *
- * platformBrowserDynamic().bootstrapModule(AppModule, {
- *   providers: [{provide: LOCALE_ID, useValue: 'en-US' }]
- * });
- * ```
+ * @see {@link ChangeDetectorRef#usage-notes Change detection usage}
  *
  * @publicApi
  */
-const LOCALE_ID = /*#__PURE__*/new InjectionToken(ngDevMode ? 'LocaleId' : '', {
-  providedIn: 'root',
-  factory: () => inject(LOCALE_ID, InjectFlags.Optional | InjectFlags.SkipSelf) || getGlobalLocale()
-});
+class ViewRef extends ChangeDetectorRef {}
 /**
- * Provide this token to set the default currency code your application uses for
- * CurrencyPipe when there is no currency code passed into it. This is only used by
- * CurrencyPipe and has no relation to locale currency. Defaults to USD if not configured.
- *
- * See the [i18n guide](guide/i18n-common-locale-id) for more information.
- *
- * <div class="alert is-helpful">
- *
- * **Deprecation notice:**
- *
- * The default currency code is currently always `USD` but this is deprecated from v9.
- *
- * **In v10 the default currency code will be taken from the current locale.**
- *
- * If you need the previous behavior then set it by creating a `DEFAULT_CURRENCY_CODE` provider in
- * your application `NgModule`:
+ * Represents an Angular [view](guide/glossary#view) in a view container.
+ * An [embedded view](guide/glossary#view-hierarchy) can be referenced from a component
+ * other than the hosting component whose template defines it, or it can be defined
+ * independently by a `TemplateRef`.
  *
- * ```ts
- * {provide: DEFAULT_CURRENCY_CODE, useValue: 'USD'}
- * ```
+ * Properties of elements in a view can change, but the structure (number and order) of elements in
+ * a view cannot. Change the structure of elements by inserting, moving, or
+ * removing nested views in a view container.
  *
- * </div>
+ * @see {@link ViewContainerRef}
  *
  * @usageNotes
- * ### Example
  *
- * ```typescript
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- * import { AppModule } from './app/app.module';
+ * The following template breaks down into two separate `TemplateRef` instances,
+ * an outer one and an inner one.
  *
- * platformBrowserDynamic().bootstrapModule(AppModule, {
- *   providers: [{provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR' }]
- * });
+ * ```
+ * Count: {{items.length}}
+ * <ul>
+ *   <li *ngFor="let  item of items">{{item}}</li>
+ * </ul>
  * ```
  *
- * @publicApi
- */
-const DEFAULT_CURRENCY_CODE = /*#__PURE__*/new InjectionToken(ngDevMode ? 'DefaultCurrencyCode' : '', {
-  providedIn: 'root',
-  factory: () => USD_CURRENCY_CODE
-});
-/**
- * Use this token at bootstrap to provide the content of your translation file (`xtb`,
- * `xlf` or `xlf2`) when you want to translate your application in another language.
+ * This is the outer `TemplateRef`:
  *
- * See the [i18n guide](guide/i18n-common-merge) for more information.
+ * ```
+ * Count: {{items.length}}
+ * <ul>
+ *   <ng-template ngFor let-item [ngForOf]="items"></ng-template>
+ * </ul>
+ * ```
  *
- * @usageNotes
- * ### Example
+ * This is the inner `TemplateRef`:
  *
- * ```typescript
- * import { TRANSLATIONS } from '@angular/core';
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- * import { AppModule } from './app/app.module';
+ * ```
+ *   <li>{{item}}</li>
+ * ```
  *
- * // content of your translation file
- * const translations = '....';
+ * The outer and inner `TemplateRef` instances are assembled into views as follows:
  *
- * platformBrowserDynamic().bootstrapModule(AppModule, {
- *   providers: [{provide: TRANSLATIONS, useValue: translations }]
- * });
  * ```
- *
+ * <!-- ViewRef: outer-0 -->
+ * Count: 2
+ * <ul>
+ *   <ng-template view-container-ref></ng-template>
+ *   <!-- ViewRef: inner-1 --><li>first</li><!-- /ViewRef: inner-1 -->
+ *   <!-- ViewRef: inner-2 --><li>second</li><!-- /ViewRef: inner-2 -->
+ * </ul>
+ * <!-- /ViewRef: outer-0 -->
+ * ```
  * @publicApi
  */
-const TRANSLATIONS = /*#__PURE__*/new InjectionToken(ngDevMode ? 'Translations' : '');
+class EmbeddedViewRef extends ViewRef {}
+
+// Public API for compiler
+
+// This file exists for easily patching NgModuleFactoryLoader in g3
+var ng_module_factory_loader_impl = {};
+
 /**
- * Provide this token at bootstrap to set the format of your {@link TRANSLATIONS}: `xtb`,
- * `xlf` or `xlf2`.
- *
- * See the [i18n guide](guide/i18n-common-merge) for more information.
- *
- * @usageNotes
- * ### Example
- *
- * ```typescript
- * import { TRANSLATIONS_FORMAT } from '@angular/core';
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- * import { AppModule } from './app/app.module';
- *
- * platformBrowserDynamic().bootstrapModule(AppModule, {
- *   providers: [{provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }]
- * });
- * ```
- *
  * @publicApi
  */
-const TRANSLATIONS_FORMAT = /*#__PURE__*/new InjectionToken(ngDevMode ? 'TranslationsFormat' : '');
+class DebugEventListener {
+  constructor(name, callback) {
+    this.name = name;
+    this.callback = callback;
+  }
+}
 /**
- * Use this enum at bootstrap as an option of `bootstrapModule` to define the strategy
- * that the compiler should use in case of missing translations:
- * - Error: throw if you have missing translations.
- * - Warning (default): show a warning in the console and/or shell.
- * - Ignore: do nothing.
- *
- * See the [i18n guide](guide/i18n-common-merge#report-missing-translations) for more information.
- *
- * @usageNotes
- * ### Example
- * ```typescript
- * import { MissingTranslationStrategy } from '@angular/core';
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- * import { AppModule } from './app/app.module';
- *
- * platformBrowserDynamic().bootstrapModule(AppModule, {
- *   missingTranslation: MissingTranslationStrategy.Error
- * });
- * ```
- *
  * @publicApi
  */
-var MissingTranslationStrategy = /*#__PURE__*/function (MissingTranslationStrategy) {
-  MissingTranslationStrategy[MissingTranslationStrategy["Error"] = 0] = "Error";
-  MissingTranslationStrategy[MissingTranslationStrategy["Warning"] = 1] = "Warning";
-  MissingTranslationStrategy[MissingTranslationStrategy["Ignore"] = 2] = "Ignore";
-  return MissingTranslationStrategy;
-}(MissingTranslationStrategy || {});
+function asNativeElements(debugEls) {
+  return debugEls.map(el => el.nativeElement);
+}
 /**
- * Internal token that allows to register extra callbacks that should be invoked during the
- * `PlatformRef.destroy` operation. This token is needed to avoid a direct reference to the
- * `PlatformRef` class (i.e. register the callback via `PlatformRef.onDestroy`), thus making the
- * entire class tree-shakeable.
+ * @publicApi
  */
-const PLATFORM_DESTROY_LISTENERS = /*#__PURE__*/new InjectionToken(ngDevMode ? 'PlatformDestroyListeners' : '');
+class DebugNode {
+  constructor(nativeNode) {
+    this.nativeNode = nativeNode;
+  }
+  /**
+   * The `DebugElement` parent. Will be `null` if this is the root element.
+   */
+  get parent() {
+    const parent = this.nativeNode.parentNode;
+    return parent ? new DebugElement(parent) : null;
+  }
+  /**
+   * The host dependency injector. For example, the root element's component instance injector.
+   */
+  get injector() {
+    return getInjector(this.nativeNode);
+  }
+  /**
+   * The element's own component instance, if it has one.
+   */
+  get componentInstance() {
+    const nativeElement = this.nativeNode;
+    return nativeElement && (getComponent(nativeElement) || getOwningComponent(nativeElement));
+  }
+  /**
+   * An object that provides parent context for this element. Often an ancestor component instance
+   * that governs this element.
+   *
+   * When an element is repeated within *ngFor, the context is an `NgForOf` whose `$implicit`
+   * property is the value of the row instance value. For example, the `hero` in `*ngFor="let hero
+   * of heroes"`.
+   */
+  get context() {
+    return getComponent(this.nativeNode) || getContext(this.nativeNode);
+  }
+  /**
+   * The callbacks attached to the component's @Output properties and/or the element's event
+   * properties.
+   */
+  get listeners() {
+    return getListeners(this.nativeNode).filter(listener => listener.type === 'dom');
+  }
+  /**
+   * Dictionary of objects associated with template local variables (e.g. #foo), keyed by the local
+   * variable name.
+   */
+  get references() {
+    return getLocalRefs(this.nativeNode);
+  }
+  /**
+   * This component's injector lookup tokens. Includes the component itself plus the tokens that the
+   * component lists in its providers metadata.
+   */
+  get providerTokens() {
+    return getInjectionTokens(this.nativeNode);
+  }
+}
 /**
- * The Angular platform is the entry point for Angular on a web page.
- * Each page has exactly one platform. Services (such as reflection) which are common
- * to every Angular application running on the page are bound in its scope.
- * A page's platform is initialized implicitly when a platform is created using a platform
- * factory such as `PlatformBrowser`, or explicitly by calling the `createPlatform()` function.
- *
  * @publicApi
+ *
+ * @see [Component testing scenarios](guide/testing-components-scenarios)
+ * @see [Basics of testing components](guide/testing-components-basics)
+ * @see [Testing utility APIs](guide/testing-utility-apis)
  */
-let PlatformRef = /*#__PURE__*/(() => {
-  class PlatformRef {
-    /** @internal */
-    constructor(_injector) {
-      this._injector = _injector;
-      this._modules = [];
-      this._destroyListeners = [];
-      this._destroyed = false;
+class DebugElement extends DebugNode {
+  constructor(nativeNode) {
+    ngDevMode && assertDomNode(nativeNode);
+    super(nativeNode);
+  }
+  /**
+   * The underlying DOM element at the root of the component.
+   */
+  get nativeElement() {
+    return this.nativeNode.nodeType == Node.ELEMENT_NODE ? this.nativeNode : null;
+  }
+  /**
+   * The element tag name, if it is an element.
+   */
+  get name() {
+    const context = getLContext(this.nativeNode);
+    const lView = context ? context.lView : null;
+    if (lView !== null) {
+      const tData = lView[TVIEW].data;
+      const tNode = tData[context.nodeIndex];
+      return tNode.value;
+    } else {
+      return this.nativeNode.nodeName;
     }
-    /**
-     * Creates an instance of an `@NgModule` for the given platform.
-     *
-     * @deprecated Passing NgModule factories as the `PlatformRef.bootstrapModuleFactory` function
-     *     argument is deprecated. Use the `PlatformRef.bootstrapModule` API instead.
-     */
-    bootstrapModuleFactory(moduleFactory, options) {
-      // Note: We need to create the NgZone _before_ we instantiate the module,
-      // as instantiating the module creates some providers eagerly.
-      // So we create a mini parent injector that just contains the new NgZone and
-      // pass that as parent to the NgModuleFactory.
-      const ngZone = getNgZone(options?.ngZone, getNgZoneOptions({
-        eventCoalescing: options?.ngZoneEventCoalescing,
-        runCoalescing: options?.ngZoneRunCoalescing
-      }));
-      // Note: Create ngZoneInjector within ngZone.run so that all of the instantiated services are
-      // created within the Angular zone
-      // Do not try to replace ngZone.run with ApplicationRef#run because ApplicationRef would then be
-      // created outside of the Angular zone.
-      return ngZone.run(() => {
-        const moduleRef = createNgModuleRefWithProviders(moduleFactory.moduleType, this.injector, internalProvideZoneChangeDetection(() => ngZone));
-        if ((typeof ngDevMode === 'undefined' || ngDevMode) && moduleRef.injector.get(PROVIDED_NG_ZONE, null) !== null) {
-          throw new RuntimeError(207 /* RuntimeErrorCode.PROVIDER_IN_WRONG_CONTEXT */, '`bootstrapModule` does not support `provideZoneChangeDetection`. Use `BootstrapOptions` instead.');
-        }
-        const exceptionHandler = moduleRef.injector.get(ErrorHandler, null);
-        if ((typeof ngDevMode === 'undefined' || ngDevMode) && exceptionHandler === null) {
-          throw new RuntimeError(402 /* RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP */, 'No ErrorHandler. Is platform module (BrowserModule) included?');
-        }
-        ngZone.runOutsideAngular(() => {
-          const subscription = ngZone.onError.subscribe({
-            next: error => {
-              exceptionHandler.handleError(error);
-            }
-          });
-          moduleRef.onDestroy(() => {
-            remove(this._modules, moduleRef);
-            subscription.unsubscribe();
-          });
-        });
-        return _callAndReportToErrorHandler(exceptionHandler, ngZone, () => {
-          const initStatus = moduleRef.injector.get(ApplicationInitStatus);
-          initStatus.runInitializers();
-          return initStatus.donePromise.then(() => {
-            // If the `LOCALE_ID` provider is defined at bootstrap then we set the value for ivy
-            const localeId = moduleRef.injector.get(LOCALE_ID, DEFAULT_LOCALE_ID);
-            setLocaleId(localeId || DEFAULT_LOCALE_ID);
-            this._moduleDoBootstrap(moduleRef);
-            return moduleRef;
-          });
-        });
-      });
+  }
+  /**
+   *  Gets a map of property names to property values for an element.
+   *
+   *  This map includes:
+   *  - Regular property bindings (e.g. `[id]="id"`)
+   *  - Host property bindings (e.g. `host: { '[id]': "id" }`)
+   *  - Interpolated property bindings (e.g. `id="{{ value }}")
+   *
+   *  It does not include:
+   *  - input property bindings (e.g. `[myCustomInput]="value"`)
+   *  - attribute bindings (e.g. `[attr.role]="menu"`)
+   */
+  get properties() {
+    const context = getLContext(this.nativeNode);
+    const lView = context ? context.lView : null;
+    if (lView === null) {
+      return {};
     }
-    /**
-     * Creates an instance of an `@NgModule` for a given platform.
-     *
-     * @usageNotes
-     * ### Simple Example
-     *
-     * ```typescript
-     * @NgModule({
-     *   imports: [BrowserModule]
-     * })
-     * class MyModule {}
-     *
-     * let moduleRef = platformBrowser().bootstrapModule(MyModule);
-     * ```
-     *
-     */
-    bootstrapModule(moduleType, compilerOptions = []) {
-      const options = optionsReducer({}, compilerOptions);
-      return compileNgModuleFactory(this.injector, options, moduleType).then(moduleFactory => this.bootstrapModuleFactory(moduleFactory, options));
+    const tData = lView[TVIEW].data;
+    const tNode = tData[context.nodeIndex];
+    const properties = {};
+    // Collect properties from the DOM.
+    copyDomProperties(this.nativeElement, properties);
+    // Collect properties from the bindings. This is needed for animation renderer which has
+    // synthetic properties which don't get reflected into the DOM.
+    collectPropertyBindings(properties, tNode, lView, tData);
+    return properties;
+  }
+  /**
+   *  A map of attribute names to attribute values for an element.
+   */
+  // TODO: replace null by undefined in the return type
+  get attributes() {
+    const attributes = {};
+    const element = this.nativeElement;
+    if (!element) {
+      return attributes;
     }
-    _moduleDoBootstrap(moduleRef) {
-      const appRef = moduleRef.injector.get(ApplicationRef);
-      if (moduleRef._bootstrapComponents.length > 0) {
-        moduleRef._bootstrapComponents.forEach(f => appRef.bootstrap(f));
-      } else if (moduleRef.instance.ngDoBootstrap) {
-        moduleRef.instance.ngDoBootstrap(appRef);
-      } else {
-        throw new RuntimeError(-403 /* RuntimeErrorCode.BOOTSTRAP_COMPONENTS_NOT_FOUND */, ngDevMode && `The module ${stringify(moduleRef.instance.constructor)} was bootstrapped, ` + `but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. ` + `Please define one of these.`);
+    const context = getLContext(element);
+    const lView = context ? context.lView : null;
+    if (lView === null) {
+      return {};
+    }
+    const tNodeAttrs = lView[TVIEW].data[context.nodeIndex].attrs;
+    const lowercaseTNodeAttrs = [];
+    // For debug nodes we take the element's attribute directly from the DOM since it allows us
+    // to account for ones that weren't set via bindings (e.g. ViewEngine keeps track of the ones
+    // that are set through `Renderer2`). The problem is that the browser will lowercase all names,
+    // however since we have the attributes already on the TNode, we can preserve the case by going
+    // through them once, adding them to the `attributes` map and putting their lower-cased name
+    // into an array. Afterwards when we're going through the native DOM attributes, we can check
+    // whether we haven't run into an attribute already through the TNode.
+    if (tNodeAttrs) {
+      let i = 0;
+      while (i < tNodeAttrs.length) {
+        const attrName = tNodeAttrs[i];
+        // Stop as soon as we hit a marker. We only care about the regular attributes. Everything
+        // else will be handled below when we read the final attributes off the DOM.
+        if (typeof attrName !== 'string') break;
+        const attrValue = tNodeAttrs[i + 1];
+        attributes[attrName] = attrValue;
+        lowercaseTNodeAttrs.push(attrName.toLowerCase());
+        i += 2;
+      }
+    }
+    for (const attr of element.attributes) {
+      // Make sure that we don't assign the same attribute both in its
+      // case-sensitive form and the lower-cased one from the browser.
+      if (!lowercaseTNodeAttrs.includes(attr.name)) {
+        attributes[attr.name] = attr.value;
+      }
+    }
+    return attributes;
+  }
+  /**
+   * The inline styles of the DOM element.
+   */
+  // TODO: replace null by undefined in the return type
+  get styles() {
+    const element = this.nativeElement;
+    return element?.style ?? {};
+  }
+  /**
+   * A map containing the class names on the element as keys.
+   *
+   * This map is derived from the `className` property of the DOM element.
+   *
+   * Note: The values of this object will always be `true`. The class key will not appear in the KV
+   * object if it does not exist on the element.
+   *
+   * @see [Element.className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)
+   */
+  get classes() {
+    const result = {};
+    const element = this.nativeElement;
+    // SVG elements return an `SVGAnimatedString` instead of a plain string for the `className`.
+    const className = element.className;
+    const classes = typeof className !== 'string' ? className.baseVal.split(' ') : className.split(' ');
+    classes.forEach(value => result[value] = true);
+    return result;
+  }
+  /**
+   * The `childNodes` of the DOM element as a `DebugNode` array.
+   *
+   * @see [Node.childNodes](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+   */
+  get childNodes() {
+    const childNodes = this.nativeNode.childNodes;
+    const children = [];
+    for (let i = 0; i < childNodes.length; i++) {
+      const element = childNodes[i];
+      children.push(getDebugNode(element));
+    }
+    return children;
+  }
+  /**
+   * The immediate `DebugElement` children. Walk the tree by descending through `children`.
+   */
+  get children() {
+    const nativeElement = this.nativeElement;
+    if (!nativeElement) return [];
+    const childNodes = nativeElement.children;
+    const children = [];
+    for (let i = 0; i < childNodes.length; i++) {
+      const element = childNodes[i];
+      children.push(getDebugNode(element));
+    }
+    return children;
+  }
+  /**
+   * @returns the first `DebugElement` that matches the predicate at any depth in the subtree.
+   */
+  query(predicate) {
+    const results = this.queryAll(predicate);
+    return results[0] || null;
+  }
+  /**
+   * @returns All `DebugElement` matches for the predicate at any depth in the subtree.
+   */
+  queryAll(predicate) {
+    const matches = [];
+    _queryAll(this, predicate, matches, true);
+    return matches;
+  }
+  /**
+   * @returns All `DebugNode` matches for the predicate at any depth in the subtree.
+   */
+  queryAllNodes(predicate) {
+    const matches = [];
+    _queryAll(this, predicate, matches, false);
+    return matches;
+  }
+  /**
+   * Triggers the event by its name if there is a corresponding listener in the element's
+   * `listeners` collection.
+   *
+   * If the event lacks a listener or there's some other problem, consider
+   * calling `nativeElement.dispatchEvent(eventObject)`.
+   *
+   * @param eventName The name of the event to trigger
+   * @param eventObj The _event object_ expected by the handler
+   *
+   * @see [Testing components scenarios](guide/testing-components-scenarios#trigger-event-handler)
+   */
+  triggerEventHandler(eventName, eventObj) {
+    const node = this.nativeNode;
+    const invokedListeners = [];
+    this.listeners.forEach(listener => {
+      if (listener.name === eventName) {
+        const callback = listener.callback;
+        callback.call(node, eventObj);
+        invokedListeners.push(callback);
       }
-      this._modules.push(moduleRef);
-    }
-    /**
-     * Registers a listener to be called when the platform is destroyed.
-     */
-    onDestroy(callback) {
-      this._destroyListeners.push(callback);
-    }
-    /**
-     * Retrieves the platform {@link Injector}, which is the parent injector for
-     * every Angular application on the page and provides singleton providers.
-     */
-    get injector() {
-      return this._injector;
+    });
+    // We need to check whether `eventListeners` exists, because it's something
+    // that Zone.js only adds to `EventTarget` in browser environments.
+    if (typeof node.eventListeners === 'function') {
+      // Note that in Ivy we wrap event listeners with a call to `event.preventDefault` in some
+      // cases. We use '__ngUnwrap__' as a special token that gives us access to the actual event
+      // listener.
+      node.eventListeners(eventName).forEach(listener => {
+        // In order to ensure that we can detect the special __ngUnwrap__ token described above, we
+        // use `toString` on the listener and see if it contains the token. We use this approach to
+        // ensure that it still worked with compiled code since it cannot remove or rename string
+        // literals. We also considered using a special function name (i.e. if(listener.name ===
+        // special)) but that was more cumbersome and we were also concerned the compiled code could
+        // strip the name, turning the condition in to ("" === "") and always returning true.
+        if (listener.toString().indexOf('__ngUnwrap__') !== -1) {
+          const unwrappedListener = listener('__ngUnwrap__');
+          return invokedListeners.indexOf(unwrappedListener) === -1 && unwrappedListener.call(node, eventObj);
+        }
+      });
     }
-    /**
-     * Destroys the current Angular platform and all Angular applications on the page.
-     * Destroys all modules and listeners registered with the platform.
-     */
-    destroy() {
-      if (this._destroyed) {
-        throw new RuntimeError(404 /* RuntimeErrorCode.PLATFORM_ALREADY_DESTROYED */, ngDevMode && 'The platform has already been destroyed!');
-      }
-      this._modules.slice().forEach(module => module.destroy());
-      this._destroyListeners.forEach(listener => listener());
-      const destroyListeners = this._injector.get(PLATFORM_DESTROY_LISTENERS, null);
-      if (destroyListeners) {
-        destroyListeners.forEach(listener => listener());
-        destroyListeners.clear();
+  }
+}
+function copyDomProperties(element, properties) {
+  if (element) {
+    // Skip own properties (as those are patched)
+    let obj = Object.getPrototypeOf(element);
+    const NodePrototype = Node.prototype;
+    while (obj !== null && obj !== NodePrototype) {
+      const descriptors = Object.getOwnPropertyDescriptors(obj);
+      for (let key in descriptors) {
+        if (!key.startsWith('__') && !key.startsWith('on')) {
+          // don't include properties starting with `__` and `on`.
+          // `__` are patched values which should not be included.
+          // `on` are listeners which also should not be included.
+          const value = element[key];
+          if (isPrimitiveValue(value)) {
+            properties[key] = value;
+          }
+        }
       }
-      this._destroyed = true;
-    }
-    /**
-     * Indicates whether this instance was destroyed.
-     */
-    get destroyed() {
-      return this._destroyed;
+      obj = Object.getPrototypeOf(obj);
     }
-    static #_ = this.ɵfac = function PlatformRef_Factory(t) {
-      return new (t || PlatformRef)(ɵɵinject(Injector));
-    };
-    static #_2 = this.ɵprov = /*@__PURE__*/ɵɵdefineInjectable({
-      token: PlatformRef,
-      factory: PlatformRef.ɵfac,
-      providedIn: 'platform'
-    });
   }
-  return PlatformRef;
-})();
-/*#__PURE__*/(() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(PlatformRef, [{
-    type: Injectable,
-    args: [{
-      providedIn: 'platform'
-    }]
-  }], () => [{
-    type: Injector
-  }], null);
-})();
-let _platformInjector = null;
-/**
- * Internal token to indicate whether having multiple bootstrapped platform should be allowed (only
- * one bootstrapped platform is allowed by default). This token helps to support SSR scenarios.
- */
-const ALLOW_MULTIPLE_PLATFORMS = /*#__PURE__*/new InjectionToken(ngDevMode ? 'AllowMultipleToken' : '');
-/**
- * Creates a platform.
- * Platforms must be created on launch using this function.
- *
- * @publicApi
- */
-function createPlatform(injector) {
-  if (_platformInjector && !_platformInjector.get(ALLOW_MULTIPLE_PLATFORMS, false)) {
-    throw new RuntimeError(400 /* RuntimeErrorCode.MULTIPLE_PLATFORMS */, ngDevMode && 'There can be only one platform. Destroy the previous one to create a new one.');
+}
+function isPrimitiveValue(value) {
+  return typeof value === 'string' || typeof value === 'boolean' || typeof value === 'number' || value === null;
+}
+function _queryAll(parentElement, predicate, matches, elementsOnly) {
+  const context = getLContext(parentElement.nativeNode);
+  const lView = context ? context.lView : null;
+  if (lView !== null) {
+    const parentTNode = lView[TVIEW].data[context.nodeIndex];
+    _queryNodeChildren(parentTNode, lView, predicate, matches, elementsOnly, parentElement.nativeNode);
+  } else {
+    // If the context is null, then `parentElement` was either created with Renderer2 or native DOM
+    // APIs.
+    _queryNativeNodeDescendants(parentElement.nativeNode, predicate, matches, elementsOnly);
   }
-  publishDefaultGlobalUtils();
-  publishSignalConfiguration();
-  _platformInjector = injector;
-  const platform = injector.get(PlatformRef);
-  runPlatformInitializers(injector);
-  return platform;
 }
 /**
- * Creates a factory for a platform. Can be used to provide or override `Providers` specific to
- * your application's runtime needs, such as `PLATFORM_INITIALIZER` and `PLATFORM_ID`.
- * @param parentPlatformFactory Another platform factory to modify. Allows you to compose factories
- * to build up configurations that might be required by different libraries or parts of the
- * application.
- * @param name Identifies the new platform factory.
- * @param providers A set of dependency providers for platforms created with the new factory.
+ * Recursively match the current TNode against the predicate, and goes on with the next ones.
  *
- * @publicApi
+ * @param tNode the current TNode
+ * @param lView the LView of this TNode
+ * @param predicate the predicate to match
+ * @param matches the list of positive matches
+ * @param elementsOnly whether only elements should be searched
+ * @param rootNativeNode the root native node on which predicate should not be matched
  */
-function createPlatformFactory(parentPlatformFactory, name, providers = []) {
-  const desc = `Platform: ${name}`;
-  const marker = new InjectionToken(desc);
-  return (extraProviders = []) => {
-    let platform = getPlatform();
-    if (!platform || platform.injector.get(ALLOW_MULTIPLE_PLATFORMS, false)) {
-      const platformProviders = [...providers, ...extraProviders, {
-        provide: marker,
-        useValue: true
-      }];
-      if (parentPlatformFactory) {
-        parentPlatformFactory(platformProviders);
-      } else {
-        createPlatform(createPlatformInjector(platformProviders, desc));
+function _queryNodeChildren(tNode, lView, predicate, matches, elementsOnly, rootNativeNode) {
+  ngDevMode && assertTNodeForLView(tNode, lView);
+  const nativeNode = getNativeByTNodeOrNull(tNode, lView);
+  // For each type of TNode, specific logic is executed.
+  if (tNode.type & (3 /* TNodeType.AnyRNode */ | 8 /* TNodeType.ElementContainer */)) {
+    // Case 1: the TNode is an element
+    // The native node has to be checked.
+    _addQueryMatch(nativeNode, predicate, matches, elementsOnly, rootNativeNode);
+    if (isComponentHost(tNode)) {
+      // If the element is the host of a component, then all nodes in its view have to be processed.
+      // Note: the component's content (tNode.child) will be processed from the insertion points.
+      const componentView = getComponentLViewByIndex(tNode.index, lView);
+      if (componentView && componentView[TVIEW].firstChild) {
+        _queryNodeChildren(componentView[TVIEW].firstChild, componentView, predicate, matches, elementsOnly, rootNativeNode);
+      }
+    } else {
+      if (tNode.child) {
+        // Otherwise, its children have to be processed.
+        _queryNodeChildren(tNode.child, lView, predicate, matches, elementsOnly, rootNativeNode);
       }
+      // We also have to query the DOM directly in order to catch elements inserted through
+      // Renderer2. Note that this is __not__ optimal, because we're walking similar trees multiple
+      // times. ViewEngine could do it more efficiently, because all the insertions go through
+      // Renderer2, however that's not the case in Ivy. This approach is being used because:
+      // 1. Matching the ViewEngine behavior would mean potentially introducing a dependency
+      //    from `Renderer2` to Ivy which could bring Ivy code into ViewEngine.
+      // 2. It allows us to capture nodes that were inserted directly via the DOM.
+      nativeNode && _queryNativeNodeDescendants(nativeNode, predicate, matches, elementsOnly);
     }
-    return assertPlatform(marker);
-  };
-}
-/**
- * Helper function to create an instance of a platform injector (that maintains the 'platform'
- * scope).
- */
-function createPlatformInjector(providers = [], name) {
-  return Injector.create({
-    name,
-    providers: [{
-      provide: INJECTOR_SCOPE,
-      useValue: 'platform'
-    }, {
-      provide: PLATFORM_DESTROY_LISTENERS,
-      useValue: new Set([() => _platformInjector = null])
-    }, ...providers]
-  });
-}
-/**
- * Checks that there is currently a platform that contains the given token as a provider.
- *
- * @publicApi
- */
-function assertPlatform(requiredToken) {
-  const platform = getPlatform();
-  if (!platform) {
-    throw new RuntimeError(401 /* RuntimeErrorCode.PLATFORM_NOT_FOUND */, ngDevMode && 'No platform exists!');
+    // In all cases, if a dynamic container exists for this node, each view inside it has to be
+    // processed.
+    const nodeOrContainer = lView[tNode.index];
+    if (isLContainer(nodeOrContainer)) {
+      _queryNodeChildrenInContainer(nodeOrContainer, predicate, matches, elementsOnly, rootNativeNode);
+    }
+  } else if (tNode.type & 4 /* TNodeType.Container */) {
+    // Case 2: the TNode is a container
+    // The native node has to be checked.
+    const lContainer = lView[tNode.index];
+    _addQueryMatch(lContainer[NATIVE], predicate, matches, elementsOnly, rootNativeNode);
+    // Each view inside the container has to be processed.
+    _queryNodeChildrenInContainer(lContainer, predicate, matches, elementsOnly, rootNativeNode);
+  } else if (tNode.type & 16 /* TNodeType.Projection */) {
+    // Case 3: the TNode is a projection insertion point (i.e. a <ng-content>).
+    // The nodes projected at this location all need to be processed.
+    const componentView = lView[DECLARATION_COMPONENT_VIEW];
+    const componentHost = componentView[T_HOST];
+    const head = componentHost.projection[tNode.projection];
+    if (Array.isArray(head)) {
+      for (let nativeNode of head) {
+        _addQueryMatch(nativeNode, predicate, matches, elementsOnly, rootNativeNode);
+      }
+    } else if (head) {
+      const nextLView = componentView[PARENT];
+      const nextTNode = nextLView[TVIEW].data[head.index];
+      _queryNodeChildren(nextTNode, nextLView, predicate, matches, elementsOnly, rootNativeNode);
+    }
+  } else if (tNode.child) {
+    // Case 4: the TNode is a view.
+    _queryNodeChildren(tNode.child, lView, predicate, matches, elementsOnly, rootNativeNode);
   }
-  if ((typeof ngDevMode === 'undefined' || ngDevMode) && !platform.injector.get(requiredToken, null)) {
-    throw new RuntimeError(400 /* RuntimeErrorCode.MULTIPLE_PLATFORMS */, 'A platform with a different configuration has been created. Please destroy it first.');
+  // We don't want to go to the next sibling of the root node.
+  if (rootNativeNode !== nativeNode) {
+    // To determine the next node to be processed, we need to use the next or the projectionNext
+    // link, depending on whether the current node has been projected.
+    const nextTNode = tNode.flags & 2 /* TNodeFlags.isProjected */ ? tNode.projectionNext : tNode.next;
+    if (nextTNode) {
+      _queryNodeChildren(nextTNode, lView, predicate, matches, elementsOnly, rootNativeNode);
+    }
   }
-  return platform;
 }
 /**
- * Returns the current platform.
+ * Process all TNodes in a given container.
  *
- * @publicApi
+ * @param lContainer the container to be processed
+ * @param predicate the predicate to match
+ * @param matches the list of positive matches
+ * @param elementsOnly whether only elements should be searched
+ * @param rootNativeNode the root native node on which predicate should not be matched
  */
-function getPlatform() {
-  return _platformInjector?.get(PlatformRef) ?? null;
+function _queryNodeChildrenInContainer(lContainer, predicate, matches, elementsOnly, rootNativeNode) {
+  for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
+    const childView = lContainer[i];
+    const firstChild = childView[TVIEW].firstChild;
+    if (firstChild) {
+      _queryNodeChildren(firstChild, childView, predicate, matches, elementsOnly, rootNativeNode);
+    }
+  }
 }
 /**
- * Destroys the current Angular platform and all Angular applications on the page.
- * Destroys all modules and listeners registered with the platform.
+ * Match the current native node against the predicate.
  *
- * @publicApi
- */
-function destroyPlatform() {
-  getPlatform()?.destroy();
-}
-/**
- * The goal of this function is to bootstrap a platform injector,
- * but avoid referencing `PlatformRef` class.
- * This function is needed for bootstrapping a Standalone Component.
+ * @param nativeNode the current native node
+ * @param predicate the predicate to match
+ * @param matches the list of positive matches
+ * @param elementsOnly whether only elements should be searched
+ * @param rootNativeNode the root native node on which predicate should not be matched
  */
-function createOrReusePlatformInjector(providers = []) {
-  // If a platform injector already exists, it means that the platform
-  // is already bootstrapped and no additional actions are required.
-  if (_platformInjector) return _platformInjector;
-  publishDefaultGlobalUtils();
-  // Otherwise, setup a new platform injector and run platform initializers.
-  const injector = createPlatformInjector(providers);
-  _platformInjector = injector;
-  publishSignalConfiguration();
-  runPlatformInitializers(injector);
-  return injector;
-}
-function runPlatformInitializers(injector) {
-  const inits = injector.get(PLATFORM_INITIALIZER, null);
-  inits?.forEach(init => init());
+function _addQueryMatch(nativeNode, predicate, matches, elementsOnly, rootNativeNode) {
+  if (rootNativeNode !== nativeNode) {
+    const debugNode = getDebugNode(nativeNode);
+    if (!debugNode) {
+      return;
+    }
+    // Type of the "predicate and "matches" array are set based on the value of
+    // the "elementsOnly" parameter. TypeScript is not able to properly infer these
+    // types with generics, so we manually cast the parameters accordingly.
+    if (elementsOnly && debugNode instanceof DebugElement && predicate(debugNode) && matches.indexOf(debugNode) === -1) {
+      matches.push(debugNode);
+    } else if (!elementsOnly && predicate(debugNode) && matches.indexOf(debugNode) === -1) {
+      matches.push(debugNode);
+    }
+  }
 }
-
 /**
- * Returns whether Angular is in development mode.
- *
- * By default, this is true, unless `enableProdMode` is invoked prior to calling this method or the
- * application is built using the Angular CLI with the `optimization` option.
- * @see {@link cli/build ng build}
+ * Match all the descendants of a DOM node against a predicate.
  *
- * @publicApi
+ * @param nativeNode the current native node
+ * @param predicate the predicate to match
+ * @param matches the list where matches are stored
+ * @param elementsOnly whether only elements should be searched
  */
-function isDevMode() {
-  return typeof ngDevMode === 'undefined' || !!ngDevMode;
+function _queryNativeNodeDescendants(parentNode, predicate, matches, elementsOnly) {
+  const nodes = parentNode.childNodes;
+  const length = nodes.length;
+  for (let i = 0; i < length; i++) {
+    const node = nodes[i];
+    const debugNode = getDebugNode(node);
+    if (debugNode) {
+      if (elementsOnly && debugNode instanceof DebugElement && predicate(debugNode) && matches.indexOf(debugNode) === -1) {
+        matches.push(debugNode);
+      } else if (!elementsOnly && predicate(debugNode) && matches.indexOf(debugNode) === -1) {
+        matches.push(debugNode);
+      }
+      _queryNativeNodeDescendants(node, predicate, matches, elementsOnly);
+    }
+  }
 }
 /**
- * Disable Angular's development mode, which turns off assertions and other
- * checks within the framework.
- *
- * One important assertion this disables verifies that a change detection pass
- * does not result in additional changes to any bindings (also known as
- * unidirectional data flow).
- *
- * Using this method is discouraged as the Angular CLI will set production mode when using the
- * `optimization` option.
- * @see {@link cli/build ng build}
- *
- * @publicApi
+ * Iterates through the property bindings for a given node and generates
+ * a map of property names to values. This map only contains property bindings
+ * defined in templates, not in host bindings.
  */
-function enableProdMode() {
-  // The below check is there so when ngDevMode is set via terser
-  // `global['ngDevMode'] = false;` is also dropped.
-  if (typeof ngDevMode === 'undefined' || ngDevMode) {
-    _global['ngDevMode'] = false;
+function collectPropertyBindings(properties, tNode, lView, tData) {
+  let bindingIndexes = tNode.propertyBindings;
+  if (bindingIndexes !== null) {
+    for (let i = 0; i < bindingIndexes.length; i++) {
+      const bindingIndex = bindingIndexes[i];
+      const propMetadata = tData[bindingIndex];
+      const metadataParts = propMetadata.split(INTERPOLATION_DELIMITER);
+      const propertyName = metadataParts[0];
+      if (metadataParts.length > 1) {
+        let value = metadataParts[1];
+        for (let j = 1; j < metadataParts.length - 1; j++) {
+          value += renderStringify(lView[bindingIndex + j - 1]) + metadataParts[j + 1];
+        }
+        properties[propertyName] = value;
+      } else {
+        properties[propertyName] = lView[bindingIndex];
+      }
+    }
   }
 }
-
-// Public API for render
-
+// Need to keep the nodes in a global Map so that multiple angular apps are supported.
+const _nativeNodeToDebugNode = /*#__PURE__*/new Map();
+const NG_DEBUG_PROPERTY = '__ng_debug__';
 /**
- * Returns the NgModuleFactory with the given id (specified using [@NgModule.id
- * field](api/core/NgModule#id)), if it exists and has been loaded. Factories for NgModules that do
- * not specify an `id` cannot be retrieved. Throws if an NgModule cannot be found.
  * @publicApi
- * @deprecated Use `getNgModuleById` instead.
  */
-function getModuleFactory(id) {
-  const type = getRegisteredNgModuleType(id);
-  if (!type) throw noModuleError(id);
-  return new NgModuleFactory(type);
+function getDebugNode(nativeNode) {
+  if (nativeNode instanceof Node) {
+    if (!nativeNode.hasOwnProperty(NG_DEBUG_PROPERTY)) {
+      nativeNode[NG_DEBUG_PROPERTY] = nativeNode.nodeType == Node.ELEMENT_NODE ? new DebugElement(nativeNode) : new DebugNode(nativeNode);
+    }
+    return nativeNode[NG_DEBUG_PROPERTY];
+  }
+  return null;
 }
-/**
- * Returns the NgModule class with the given id (specified using [@NgModule.id
- * field](api/core/NgModule#id)), if it exists and has been loaded. Classes for NgModules that do
- * not specify an `id` cannot be retrieved. Throws if an NgModule cannot be found.
- * @publicApi
- */
-function getNgModuleById(id) {
-  const type = getRegisteredNgModuleType(id);
-  if (!type) throw noModuleError(id);
-  return type;
+function getAllDebugNodes() {
+  return Array.from(_nativeNodeToDebugNode.values());
 }
-function noModuleError(id) {
-  return new Error(`No module with ID ${id} loaded`);
+function indexDebugNode(node) {
+  _nativeNodeToDebugNode.set(node.nativeNode, node);
 }
-
-/**
- * Represents an Angular [view](guide/glossary#view "Definition").
- *
- * @see {@link ChangeDetectorRef#usage-notes Change detection usage}
- *
- * @publicApi
- */
-class ViewRef extends ChangeDetectorRef {}
-/**
- * Represents an Angular [view](guide/glossary#view) in a view container.
- * An [embedded view](guide/glossary#view-hierarchy) can be referenced from a component
- * other than the hosting component whose template defines it, or it can be defined
- * independently by a `TemplateRef`.
- *
- * Properties of elements in a view can change, but the structure (number and order) of elements in
- * a view cannot. Change the structure of elements by inserting, moving, or
- * removing nested views in a view container.
- *
- * @see {@link ViewContainerRef}
- *
- * @usageNotes
- *
- * The following template breaks down into two separate `TemplateRef` instances,
- * an outer one and an inner one.
- *
- * ```
- * Count: {{items.length}}
- * <ul>
- *   <li *ngFor="let  item of items">{{item}}</li>
- * </ul>
- * ```
- *
- * This is the outer `TemplateRef`:
- *
- * ```
- * Count: {{items.length}}
- * <ul>
- *   <ng-template ngFor let-item [ngForOf]="items"></ng-template>
- * </ul>
- * ```
- *
- * This is the inner `TemplateRef`:
- *
- * ```
- *   <li>{{item}}</li>
- * ```
- *
- * The outer and inner `TemplateRef` instances are assembled into views as follows:
- *
- * ```
- * <!-- ViewRef: outer-0 -->
- * Count: 2
- * <ul>
- *   <ng-template view-container-ref></ng-template>
- *   <!-- ViewRef: inner-1 --><li>first</li><!-- /ViewRef: inner-1 -->
- *   <!-- ViewRef: inner-2 --><li>second</li><!-- /ViewRef: inner-2 -->
- * </ul>
- * <!-- /ViewRef: outer-0 -->
- * ```
- * @publicApi
- */
-class EmbeddedViewRef extends ViewRef {}
-
-// Public API for compiler
-
-// This file exists for easily patching NgModuleFactoryLoader in g3
-var ng_module_factory_loader_impl = {};
-
-/**
- * @publicApi
- */
-class DebugEventListener {
-  constructor(name, callback) {
-    this.name = name;
-    this.callback = callback;
+function removeDebugNodeFromIndex(node) {
+  _nativeNodeToDebugNode.delete(node.nativeNode);
+}
+class DefaultIterableDifferFactory {
+  constructor() {}
+  supports(obj) {
+    return isListLikeIterable(obj);
+  }
+  create(trackByFn) {
+    return new DefaultIterableDiffer(trackByFn);
   }
 }
+const trackByIdentity = (index, item) => item;
 /**
+ * @deprecated v4.0.0 - Should not be part of public API.
  * @publicApi
  */
-function asNativeElements(debugEls) {
-  return debugEls.map(el => el.nativeElement);
-}
-/**
- * @publicApi
- */
-class DebugNode {
-  constructor(nativeNode) {
-    this.nativeNode = nativeNode;
+class DefaultIterableDiffer {
+  constructor(trackByFn) {
+    this.length = 0;
+    // Keeps track of the used records at any point in time (during & across `_check()` calls)
+    this._linkedRecords = null;
+    // Keeps track of the removed records at any point in time during `_check()` calls.
+    this._unlinkedRecords = null;
+    this._previousItHead = null;
+    this._itHead = null;
+    this._itTail = null;
+    this._additionsHead = null;
+    this._additionsTail = null;
+    this._movesHead = null;
+    this._movesTail = null;
+    this._removalsHead = null;
+    this._removalsTail = null;
+    // Keeps track of records where custom track by is the same, but item identity has changed
+    this._identityChangesHead = null;
+    this._identityChangesTail = null;
+    this._trackByFn = trackByFn || trackByIdentity;
   }
-  /**
-   * The `DebugElement` parent. Will be `null` if this is the root element.
-   */
-  get parent() {
-    const parent = this.nativeNode.parentNode;
-    return parent ? new DebugElement(parent) : null;
+  forEachItem(fn) {
+    let record;
+    for (record = this._itHead; record !== null; record = record._next) {
+      fn(record);
+    }
   }
-  /**
-   * The host dependency injector. For example, the root element's component instance injector.
-   */
-  get injector() {
-    return getInjector(this.nativeNode);
+  forEachOperation(fn) {
+    let nextIt = this._itHead;
+    let nextRemove = this._removalsHead;
+    let addRemoveOffset = 0;
+    let moveOffsets = null;
+    while (nextIt || nextRemove) {
+      // Figure out which is the next record to process
+      // Order: remove, add, move
+      const record = !nextRemove || nextIt && nextIt.currentIndex < getPreviousIndex(nextRemove, addRemoveOffset, moveOffsets) ? nextIt : nextRemove;
+      const adjPreviousIndex = getPreviousIndex(record, addRemoveOffset, moveOffsets);
+      const currentIndex = record.currentIndex;
+      // consume the item, and adjust the addRemoveOffset and update moveDistance if necessary
+      if (record === nextRemove) {
+        addRemoveOffset--;
+        nextRemove = nextRemove._nextRemoved;
+      } else {
+        nextIt = nextIt._next;
+        if (record.previousIndex == null) {
+          addRemoveOffset++;
+        } else {
+          // INVARIANT:  currentIndex < previousIndex
+          if (!moveOffsets) moveOffsets = [];
+          const localMovePreviousIndex = adjPreviousIndex - addRemoveOffset;
+          const localCurrentIndex = currentIndex - addRemoveOffset;
+          if (localMovePreviousIndex != localCurrentIndex) {
+            for (let i = 0; i < localMovePreviousIndex; i++) {
+              const offset = i < moveOffsets.length ? moveOffsets[i] : moveOffsets[i] = 0;
+              const index = offset + i;
+              if (localCurrentIndex <= index && index < localMovePreviousIndex) {
+                moveOffsets[i] = offset + 1;
+              }
+            }
+            const previousIndex = record.previousIndex;
+            moveOffsets[previousIndex] = localCurrentIndex - localMovePreviousIndex;
+          }
+        }
+      }
+      if (adjPreviousIndex !== currentIndex) {
+        fn(record, adjPreviousIndex, currentIndex);
+      }
+    }
   }
-  /**
-   * The element's own component instance, if it has one.
+  forEachPreviousItem(fn) {
+    let record;
+    for (record = this._previousItHead; record !== null; record = record._nextPrevious) {
+      fn(record);
+    }
+  }
+  forEachAddedItem(fn) {
+    let record;
+    for (record = this._additionsHead; record !== null; record = record._nextAdded) {
+      fn(record);
+    }
+  }
+  forEachMovedItem(fn) {
+    let record;
+    for (record = this._movesHead; record !== null; record = record._nextMoved) {
+      fn(record);
+    }
+  }
+  forEachRemovedItem(fn) {
+    let record;
+    for (record = this._removalsHead; record !== null; record = record._nextRemoved) {
+      fn(record);
+    }
+  }
+  forEachIdentityChange(fn) {
+    let record;
+    for (record = this._identityChangesHead; record !== null; record = record._nextIdentityChange) {
+      fn(record);
+    }
+  }
+  diff(collection) {
+    if (collection == null) collection = [];
+    if (!isListLikeIterable(collection)) {
+      throw new RuntimeError(900 /* RuntimeErrorCode.INVALID_DIFFER_INPUT */, ngDevMode && `Error trying to diff '${stringify(collection)}'. Only arrays and iterables are allowed`);
+    }
+    if (this.check(collection)) {
+      return this;
+    } else {
+      return null;
+    }
+  }
+  onDestroy() {}
+  check(collection) {
+    this._reset();
+    let record = this._itHead;
+    let mayBeDirty = false;
+    let index;
+    let item;
+    let itemTrackBy;
+    if (Array.isArray(collection)) {
+      this.length = collection.length;
+      for (let index = 0; index < this.length; index++) {
+        item = collection[index];
+        itemTrackBy = this._trackByFn(index, item);
+        if (record === null || !Object.is(record.trackById, itemTrackBy)) {
+          record = this._mismatch(record, item, itemTrackBy, index);
+          mayBeDirty = true;
+        } else {
+          if (mayBeDirty) {
+            // TODO(misko): can we limit this to duplicates only?
+            record = this._verifyReinsertion(record, item, itemTrackBy, index);
+          }
+          if (!Object.is(record.item, item)) this._addIdentityChange(record, item);
+        }
+        record = record._next;
+      }
+    } else {
+      index = 0;
+      iterateListLike(collection, item => {
+        itemTrackBy = this._trackByFn(index, item);
+        if (record === null || !Object.is(record.trackById, itemTrackBy)) {
+          record = this._mismatch(record, item, itemTrackBy, index);
+          mayBeDirty = true;
+        } else {
+          if (mayBeDirty) {
+            // TODO(misko): can we limit this to duplicates only?
+            record = this._verifyReinsertion(record, item, itemTrackBy, index);
+          }
+          if (!Object.is(record.item, item)) this._addIdentityChange(record, item);
+        }
+        record = record._next;
+        index++;
+      });
+      this.length = index;
+    }
+    this._truncate(record);
+    this.collection = collection;
+    return this.isDirty;
+  }
+  /* CollectionChanges is considered dirty if it has any additions, moves, removals, or identity
+   * changes.
    */
-  get componentInstance() {
-    const nativeElement = this.nativeNode;
-    return nativeElement && (getComponent(nativeElement) || getOwningComponent(nativeElement));
+  get isDirty() {
+    return this._additionsHead !== null || this._movesHead !== null || this._removalsHead !== null || this._identityChangesHead !== null;
   }
   /**
-   * An object that provides parent context for this element. Often an ancestor component instance
-   * that governs this element.
+   * Reset the state of the change objects to show no changes. This means set previousKey to
+   * currentKey, and clear all of the queues (additions, moves, removals).
+   * Set the previousIndexes of moved and added items to their currentIndexes
+   * Reset the list of additions, moves and removals
    *
-   * When an element is repeated within *ngFor, the context is an `NgForOf` whose `$implicit`
-   * property is the value of the row instance value. For example, the `hero` in `*ngFor="let hero
-   * of heroes"`.
+   * @internal
    */
-  get context() {
-    return getComponent(this.nativeNode) || getContext(this.nativeNode);
+  _reset() {
+    if (this.isDirty) {
+      let record;
+      for (record = this._previousItHead = this._itHead; record !== null; record = record._next) {
+        record._nextPrevious = record._next;
+      }
+      for (record = this._additionsHead; record !== null; record = record._nextAdded) {
+        record.previousIndex = record.currentIndex;
+      }
+      this._additionsHead = this._additionsTail = null;
+      for (record = this._movesHead; record !== null; record = record._nextMoved) {
+        record.previousIndex = record.currentIndex;
+      }
+      this._movesHead = this._movesTail = null;
+      this._removalsHead = this._removalsTail = null;
+      this._identityChangesHead = this._identityChangesTail = null;
+      // TODO(vicb): when assert gets supported
+      // assert(!this.isDirty);
+    }
   }
   /**
-   * The callbacks attached to the component's @Output properties and/or the element's event
-   * properties.
+   * This is the core function which handles differences between collections.
+   *
+   * - `record` is the record which we saw at this position last time. If null then it is a new
+   *   item.
+   * - `item` is the current item in the collection
+   * - `index` is the position of the item in the collection
+   *
+   * @internal
    */
-  get listeners() {
-    return getListeners(this.nativeNode).filter(listener => listener.type === 'dom');
+  _mismatch(record, item, itemTrackBy, index) {
+    // The previous record after which we will append the current one.
+    let previousRecord;
+    if (record === null) {
+      previousRecord = this._itTail;
+    } else {
+      previousRecord = record._prev;
+      // Remove the record from the collection since we know it does not match the item.
+      this._remove(record);
+    }
+    // See if we have evicted the item, which used to be at some anterior position of _itHead list.
+    record = this._unlinkedRecords === null ? null : this._unlinkedRecords.get(itemTrackBy, null);
+    if (record !== null) {
+      // It is an item which we have evicted earlier: reinsert it back into the list.
+      // But first we need to check if identity changed, so we can update in view if necessary.
+      if (!Object.is(record.item, item)) this._addIdentityChange(record, item);
+      this._reinsertAfter(record, previousRecord, index);
+    } else {
+      // Attempt to see if the item is at some posterior position of _itHead list.
+      record = this._linkedRecords === null ? null : this._linkedRecords.get(itemTrackBy, index);
+      if (record !== null) {
+        // We have the item in _itHead at/after `index` position. We need to move it forward in the
+        // collection.
+        // But first we need to check if identity changed, so we can update in view if necessary.
+        if (!Object.is(record.item, item)) this._addIdentityChange(record, item);
+        this._moveAfter(record, previousRecord, index);
+      } else {
+        // It is a new item: add it.
+        record = this._addAfter(new IterableChangeRecord_(item, itemTrackBy), previousRecord, index);
+      }
+    }
+    return record;
   }
   /**
-   * Dictionary of objects associated with template local variables (e.g. #foo), keyed by the local
-   * variable name.
+   * This check is only needed if an array contains duplicates. (Short circuit of nothing dirty)
+   *
+   * Use case: `[a, a]` => `[b, a, a]`
+   *
+   * If we did not have this check then the insertion of `b` would:
+   *   1) evict first `a`
+   *   2) insert `b` at `0` index.
+   *   3) leave `a` at index `1` as is. <-- this is wrong!
+   *   3) reinsert `a` at index 2. <-- this is wrong!
+   *
+   * The correct behavior is:
+   *   1) evict first `a`
+   *   2) insert `b` at `0` index.
+   *   3) reinsert `a` at index 1.
+   *   3) move `a` at from `1` to `2`.
+   *
+   *
+   * Double check that we have not evicted a duplicate item. We need to check if the item type may
+   * have already been removed:
+   * The insertion of b will evict the first 'a'. If we don't reinsert it now it will be reinserted
+   * at the end. Which will show up as the two 'a's switching position. This is incorrect, since a
+   * better way to think of it is as insert of 'b' rather then switch 'a' with 'b' and then add 'a'
+   * at the end.
+   *
+   * @internal
    */
-  get references() {
-    return getLocalRefs(this.nativeNode);
+  _verifyReinsertion(record, item, itemTrackBy, index) {
+    let reinsertRecord = this._unlinkedRecords === null ? null : this._unlinkedRecords.get(itemTrackBy, null);
+    if (reinsertRecord !== null) {
+      record = this._reinsertAfter(reinsertRecord, record._prev, index);
+    } else if (record.currentIndex != index) {
+      record.currentIndex = index;
+      this._addToMoves(record, index);
+    }
+    return record;
   }
   /**
-   * This component's injector lookup tokens. Includes the component itself plus the tokens that the
-   * component lists in its providers metadata.
+   * Get rid of any excess {@link IterableChangeRecord_}s from the previous collection
+   *
+   * - `record` The first excess {@link IterableChangeRecord_}.
+   *
+   * @internal
    */
-  get providerTokens() {
-    return getInjectionTokens(this.nativeNode);
+  _truncate(record) {
+    // Anything after that needs to be removed;
+    while (record !== null) {
+      const nextRecord = record._next;
+      this._addToRemovals(this._unlink(record));
+      record = nextRecord;
+    }
+    if (this._unlinkedRecords !== null) {
+      this._unlinkedRecords.clear();
+    }
+    if (this._additionsTail !== null) {
+      this._additionsTail._nextAdded = null;
+    }
+    if (this._movesTail !== null) {
+      this._movesTail._nextMoved = null;
+    }
+    if (this._itTail !== null) {
+      this._itTail._next = null;
+    }
+    if (this._removalsTail !== null) {
+      this._removalsTail._nextRemoved = null;
+    }
+    if (this._identityChangesTail !== null) {
+      this._identityChangesTail._nextIdentityChange = null;
+    }
+  }
+  /** @internal */
+  _reinsertAfter(record, prevRecord, index) {
+    if (this._unlinkedRecords !== null) {
+      this._unlinkedRecords.remove(record);
+    }
+    const prev = record._prevRemoved;
+    const next = record._nextRemoved;
+    if (prev === null) {
+      this._removalsHead = next;
+    } else {
+      prev._nextRemoved = next;
+    }
+    if (next === null) {
+      this._removalsTail = prev;
+    } else {
+      next._prevRemoved = prev;
+    }
+    this._insertAfter(record, prevRecord, index);
+    this._addToMoves(record, index);
+    return record;
+  }
+  /** @internal */
+  _moveAfter(record, prevRecord, index) {
+    this._unlink(record);
+    this._insertAfter(record, prevRecord, index);
+    this._addToMoves(record, index);
+    return record;
+  }
+  /** @internal */
+  _addAfter(record, prevRecord, index) {
+    this._insertAfter(record, prevRecord, index);
+    if (this._additionsTail === null) {
+      // TODO(vicb):
+      // assert(this._additionsHead === null);
+      this._additionsTail = this._additionsHead = record;
+    } else {
+      // TODO(vicb):
+      // assert(_additionsTail._nextAdded === null);
+      // assert(record._nextAdded === null);
+      this._additionsTail = this._additionsTail._nextAdded = record;
+    }
+    return record;
+  }
+  /** @internal */
+  _insertAfter(record, prevRecord, index) {
+    // TODO(vicb):
+    // assert(record != prevRecord);
+    // assert(record._next === null);
+    // assert(record._prev === null);
+    const next = prevRecord === null ? this._itHead : prevRecord._next;
+    // TODO(vicb):
+    // assert(next != record);
+    // assert(prevRecord != record);
+    record._next = next;
+    record._prev = prevRecord;
+    if (next === null) {
+      this._itTail = record;
+    } else {
+      next._prev = record;
+    }
+    if (prevRecord === null) {
+      this._itHead = record;
+    } else {
+      prevRecord._next = record;
+    }
+    if (this._linkedRecords === null) {
+      this._linkedRecords = new _DuplicateMap();
+    }
+    this._linkedRecords.put(record);
+    record.currentIndex = index;
+    return record;
+  }
+  /** @internal */
+  _remove(record) {
+    return this._addToRemovals(this._unlink(record));
+  }
+  /** @internal */
+  _unlink(record) {
+    if (this._linkedRecords !== null) {
+      this._linkedRecords.remove(record);
+    }
+    const prev = record._prev;
+    const next = record._next;
+    // TODO(vicb):
+    // assert((record._prev = null) === null);
+    // assert((record._next = null) === null);
+    if (prev === null) {
+      this._itHead = next;
+    } else {
+      prev._next = next;
+    }
+    if (next === null) {
+      this._itTail = prev;
+    } else {
+      next._prev = prev;
+    }
+    return record;
+  }
+  /** @internal */
+  _addToMoves(record, toIndex) {
+    // TODO(vicb):
+    // assert(record._nextMoved === null);
+    if (record.previousIndex === toIndex) {
+      return record;
+    }
+    if (this._movesTail === null) {
+      // TODO(vicb):
+      // assert(_movesHead === null);
+      this._movesTail = this._movesHead = record;
+    } else {
+      // TODO(vicb):
+      // assert(_movesTail._nextMoved === null);
+      this._movesTail = this._movesTail._nextMoved = record;
+    }
+    return record;
+  }
+  _addToRemovals(record) {
+    if (this._unlinkedRecords === null) {
+      this._unlinkedRecords = new _DuplicateMap();
+    }
+    this._unlinkedRecords.put(record);
+    record.currentIndex = null;
+    record._nextRemoved = null;
+    if (this._removalsTail === null) {
+      // TODO(vicb):
+      // assert(_removalsHead === null);
+      this._removalsTail = this._removalsHead = record;
+      record._prevRemoved = null;
+    } else {
+      // TODO(vicb):
+      // assert(_removalsTail._nextRemoved === null);
+      // assert(record._nextRemoved === null);
+      record._prevRemoved = this._removalsTail;
+      this._removalsTail = this._removalsTail._nextRemoved = record;
+    }
+    return record;
+  }
+  /** @internal */
+  _addIdentityChange(record, item) {
+    record.item = item;
+    if (this._identityChangesTail === null) {
+      this._identityChangesTail = this._identityChangesHead = record;
+    } else {
+      this._identityChangesTail = this._identityChangesTail._nextIdentityChange = record;
+    }
+    return record;
   }
 }
-/**
- * @publicApi
- *
- * @see [Component testing scenarios](guide/testing-components-scenarios)
- * @see [Basics of testing components](guide/testing-components-basics)
- * @see [Testing utility APIs](guide/testing-utility-apis)
- */
-class DebugElement extends DebugNode {
-  constructor(nativeNode) {
-    ngDevMode && assertDomNode(nativeNode);
-    super(nativeNode);
+class IterableChangeRecord_ {
+  constructor(item, trackById) {
+    this.item = item;
+    this.trackById = trackById;
+    this.currentIndex = null;
+    this.previousIndex = null;
+    /** @internal */
+    this._nextPrevious = null;
+    /** @internal */
+    this._prev = null;
+    /** @internal */
+    this._next = null;
+    /** @internal */
+    this._prevDup = null;
+    /** @internal */
+    this._nextDup = null;
+    /** @internal */
+    this._prevRemoved = null;
+    /** @internal */
+    this._nextRemoved = null;
+    /** @internal */
+    this._nextAdded = null;
+    /** @internal */
+    this._nextMoved = null;
+    /** @internal */
+    this._nextIdentityChange = null;
   }
-  /**
-   * The underlying DOM element at the root of the component.
-   */
-  get nativeElement() {
-    return this.nativeNode.nodeType == Node.ELEMENT_NODE ? this.nativeNode : null;
+}
+// A linked list of IterableChangeRecords with the same IterableChangeRecord_.item
+class _DuplicateItemRecordList {
+  constructor() {
+    /** @internal */
+    this._head = null;
+    /** @internal */
+    this._tail = null;
   }
   /**
-   * The element tag name, if it is an element.
+   * Append the record to the list of duplicates.
+   *
+   * Note: by design all records in the list of duplicates hold the same value in record.item.
    */
-  get name() {
-    const context = getLContext(this.nativeNode);
-    const lView = context ? context.lView : null;
-    if (lView !== null) {
-      const tData = lView[TVIEW].data;
-      const tNode = tData[context.nodeIndex];
-      return tNode.value;
+  add(record) {
+    if (this._head === null) {
+      this._head = this._tail = record;
+      record._nextDup = null;
+      record._prevDup = null;
     } else {
-      return this.nativeNode.nodeName;
+      // TODO(vicb):
+      // assert(record.item ==  _head.item ||
+      //       record.item is num && record.item.isNaN && _head.item is num && _head.item.isNaN);
+      this._tail._nextDup = record;
+      record._prevDup = this._tail;
+      record._nextDup = null;
+      this._tail = record;
     }
   }
-  /**
-   *  Gets a map of property names to property values for an element.
-   *
-   *  This map includes:
-   *  - Regular property bindings (e.g. `[id]="id"`)
-   *  - Host property bindings (e.g. `host: { '[id]': "id" }`)
-   *  - Interpolated property bindings (e.g. `id="{{ value }}")
-   *
-   *  It does not include:
-   *  - input property bindings (e.g. `[myCustomInput]="value"`)
-   *  - attribute bindings (e.g. `[attr.role]="menu"`)
-   */
-  get properties() {
-    const context = getLContext(this.nativeNode);
-    const lView = context ? context.lView : null;
-    if (lView === null) {
-      return {};
+  // Returns a IterableChangeRecord_ having IterableChangeRecord_.trackById == trackById and
+  // IterableChangeRecord_.currentIndex >= atOrAfterIndex
+  get(trackById, atOrAfterIndex) {
+    let record;
+    for (record = this._head; record !== null; record = record._nextDup) {
+      if ((atOrAfterIndex === null || atOrAfterIndex <= record.currentIndex) && Object.is(record.trackById, trackById)) {
+        return record;
+      }
     }
-    const tData = lView[TVIEW].data;
-    const tNode = tData[context.nodeIndex];
-    const properties = {};
-    // Collect properties from the DOM.
-    copyDomProperties(this.nativeElement, properties);
-    // Collect properties from the bindings. This is needed for animation renderer which has
-    // synthetic properties which don't get reflected into the DOM.
-    collectPropertyBindings(properties, tNode, lView, tData);
-    return properties;
+    return null;
   }
   /**
-   *  A map of attribute names to attribute values for an element.
+   * Remove one {@link IterableChangeRecord_} from the list of duplicates.
+   *
+   * Returns whether the list of duplicates is empty.
    */
-  // TODO: replace null by undefined in the return type
-  get attributes() {
-    const attributes = {};
-    const element = this.nativeElement;
-    if (!element) {
-      return attributes;
-    }
-    const context = getLContext(element);
-    const lView = context ? context.lView : null;
-    if (lView === null) {
-      return {};
-    }
-    const tNodeAttrs = lView[TVIEW].data[context.nodeIndex].attrs;
-    const lowercaseTNodeAttrs = [];
-    // For debug nodes we take the element's attribute directly from the DOM since it allows us
-    // to account for ones that weren't set via bindings (e.g. ViewEngine keeps track of the ones
-    // that are set through `Renderer2`). The problem is that the browser will lowercase all names,
-    // however since we have the attributes already on the TNode, we can preserve the case by going
-    // through them once, adding them to the `attributes` map and putting their lower-cased name
-    // into an array. Afterwards when we're going through the native DOM attributes, we can check
-    // whether we haven't run into an attribute already through the TNode.
-    if (tNodeAttrs) {
-      let i = 0;
-      while (i < tNodeAttrs.length) {
-        const attrName = tNodeAttrs[i];
-        // Stop as soon as we hit a marker. We only care about the regular attributes. Everything
-        // else will be handled below when we read the final attributes off the DOM.
-        if (typeof attrName !== 'string') break;
-        const attrValue = tNodeAttrs[i + 1];
-        attributes[attrName] = attrValue;
-        lowercaseTNodeAttrs.push(attrName.toLowerCase());
-        i += 2;
-      }
+  remove(record) {
+    // TODO(vicb):
+    // assert(() {
+    //  // verify that the record being removed is in the list.
+    //  for (IterableChangeRecord_ cursor = _head; cursor != null; cursor = cursor._nextDup) {
+    //    if (identical(cursor, record)) return true;
+    //  }
+    //  return false;
+    //});
+    const prev = record._prevDup;
+    const next = record._nextDup;
+    if (prev === null) {
+      this._head = next;
+    } else {
+      prev._nextDup = next;
     }
-    for (const attr of element.attributes) {
-      // Make sure that we don't assign the same attribute both in its
-      // case-sensitive form and the lower-cased one from the browser.
-      if (!lowercaseTNodeAttrs.includes(attr.name)) {
-        attributes[attr.name] = attr.value;
-      }
+    if (next === null) {
+      this._tail = prev;
+    } else {
+      next._prevDup = prev;
     }
-    return attributes;
+    return this._head === null;
   }
-  /**
-   * The inline styles of the DOM element.
-   */
-  // TODO: replace null by undefined in the return type
-  get styles() {
-    const element = this.nativeElement;
-    return element?.style ?? {};
+}
+class _DuplicateMap {
+  constructor() {
+    this.map = new Map();
+  }
+  put(record) {
+    const key = record.trackById;
+    let duplicates = this.map.get(key);
+    if (!duplicates) {
+      duplicates = new _DuplicateItemRecordList();
+      this.map.set(key, duplicates);
+    }
+    duplicates.add(record);
   }
   /**
-   * A map containing the class names on the element as keys.
-   *
-   * This map is derived from the `className` property of the DOM element.
-   *
-   * Note: The values of this object will always be `true`. The class key will not appear in the KV
-   * object if it does not exist on the element.
+   * Retrieve the `value` using key. Because the IterableChangeRecord_ value may be one which we
+   * have already iterated over, we use the `atOrAfterIndex` to pretend it is not there.
    *
-   * @see [Element.className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)
+   * Use case: `[a, b, c, a, a]` if we are at index `3` which is the second `a` then asking if we
+   * have any more `a`s needs to return the second `a`.
    */
-  get classes() {
-    const result = {};
-    const element = this.nativeElement;
-    // SVG elements return an `SVGAnimatedString` instead of a plain string for the `className`.
-    const className = element.className;
-    const classes = typeof className !== 'string' ? className.baseVal.split(' ') : className.split(' ');
-    classes.forEach(value => result[value] = true);
-    return result;
+  get(trackById, atOrAfterIndex) {
+    const key = trackById;
+    const recordList = this.map.get(key);
+    return recordList ? recordList.get(trackById, atOrAfterIndex) : null;
   }
   /**
-   * The `childNodes` of the DOM element as a `DebugNode` array.
+   * Removes a {@link IterableChangeRecord_} from the list of duplicates.
    *
-   * @see [Node.childNodes](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+   * The list of duplicates also is removed from the map if it gets empty.
    */
-  get childNodes() {
-    const childNodes = this.nativeNode.childNodes;
-    const children = [];
-    for (let i = 0; i < childNodes.length; i++) {
-      const element = childNodes[i];
-      children.push(getDebugNode(element));
+  remove(record) {
+    const key = record.trackById;
+    const recordList = this.map.get(key);
+    // Remove the list of duplicates when it gets empty
+    if (recordList.remove(record)) {
+      this.map.delete(key);
     }
-    return children;
+    return record;
   }
-  /**
-   * The immediate `DebugElement` children. Walk the tree by descending through `children`.
-   */
-  get children() {
-    const nativeElement = this.nativeElement;
-    if (!nativeElement) return [];
-    const childNodes = nativeElement.children;
-    const children = [];
-    for (let i = 0; i < childNodes.length; i++) {
-      const element = childNodes[i];
-      children.push(getDebugNode(element));
+  get isEmpty() {
+    return this.map.size === 0;
+  }
+  clear() {
+    this.map.clear();
+  }
+}
+function getPreviousIndex(item, addRemoveOffset, moveOffsets) {
+  const previousIndex = item.previousIndex;
+  if (previousIndex === null) return previousIndex;
+  let moveOffset = 0;
+  if (moveOffsets && previousIndex < moveOffsets.length) {
+    moveOffset = moveOffsets[previousIndex];
+  }
+  return previousIndex + addRemoveOffset + moveOffset;
+}
+class DefaultKeyValueDifferFactory {
+  constructor() {}
+  supports(obj) {
+    return obj instanceof Map || isJsObject(obj);
+  }
+  create() {
+    return new DefaultKeyValueDiffer();
+  }
+}
+class DefaultKeyValueDiffer {
+  constructor() {
+    this._records = new Map();
+    this._mapHead = null;
+    // _appendAfter is used in the check loop
+    this._appendAfter = null;
+    this._previousMapHead = null;
+    this._changesHead = null;
+    this._changesTail = null;
+    this._additionsHead = null;
+    this._additionsTail = null;
+    this._removalsHead = null;
+    this._removalsTail = null;
+  }
+  get isDirty() {
+    return this._additionsHead !== null || this._changesHead !== null || this._removalsHead !== null;
+  }
+  forEachItem(fn) {
+    let record;
+    for (record = this._mapHead; record !== null; record = record._next) {
+      fn(record);
     }
-    return children;
   }
-  /**
-   * @returns the first `DebugElement` that matches the predicate at any depth in the subtree.
-   */
-  query(predicate) {
-    const results = this.queryAll(predicate);
-    return results[0] || null;
+  forEachPreviousItem(fn) {
+    let record;
+    for (record = this._previousMapHead; record !== null; record = record._nextPrevious) {
+      fn(record);
+    }
   }
-  /**
-   * @returns All `DebugElement` matches for the predicate at any depth in the subtree.
-   */
-  queryAll(predicate) {
-    const matches = [];
-    _queryAll(this, predicate, matches, true);
-    return matches;
+  forEachChangedItem(fn) {
+    let record;
+    for (record = this._changesHead; record !== null; record = record._nextChanged) {
+      fn(record);
+    }
   }
-  /**
-   * @returns All `DebugNode` matches for the predicate at any depth in the subtree.
-   */
-  queryAllNodes(predicate) {
-    const matches = [];
-    _queryAll(this, predicate, matches, false);
-    return matches;
+  forEachAddedItem(fn) {
+    let record;
+    for (record = this._additionsHead; record !== null; record = record._nextAdded) {
+      fn(record);
+    }
+  }
+  forEachRemovedItem(fn) {
+    let record;
+    for (record = this._removalsHead; record !== null; record = record._nextRemoved) {
+      fn(record);
+    }
+  }
+  diff(map) {
+    if (!map) {
+      map = new Map();
+    } else if (!(map instanceof Map || isJsObject(map))) {
+      throw new RuntimeError(900 /* RuntimeErrorCode.INVALID_DIFFER_INPUT */, ngDevMode && `Error trying to diff '${stringify(map)}'. Only maps and objects are allowed`);
+    }
+    return this.check(map) ? this : null;
   }
+  onDestroy() {}
   /**
-   * Triggers the event by its name if there is a corresponding listener in the element's
-   * `listeners` collection.
-   *
-   * If the event lacks a listener or there's some other problem, consider
-   * calling `nativeElement.dispatchEvent(eventObject)`.
-   *
-   * @param eventName The name of the event to trigger
-   * @param eventObj The _event object_ expected by the handler
-   *
-   * @see [Testing components scenarios](guide/testing-components-scenarios#trigger-event-handler)
+   * Check the current state of the map vs the previous.
+   * The algorithm is optimised for when the keys do no change.
    */
-  triggerEventHandler(eventName, eventObj) {
-    const node = this.nativeNode;
-    const invokedListeners = [];
-    this.listeners.forEach(listener => {
-      if (listener.name === eventName) {
-        const callback = listener.callback;
-        callback.call(node, eventObj);
-        invokedListeners.push(callback);
+  check(map) {
+    this._reset();
+    let insertBefore = this._mapHead;
+    this._appendAfter = null;
+    this._forEach(map, (value, key) => {
+      if (insertBefore && insertBefore.key === key) {
+        this._maybeAddToChanges(insertBefore, value);
+        this._appendAfter = insertBefore;
+        insertBefore = insertBefore._next;
+      } else {
+        const record = this._getOrCreateRecordForKey(key, value);
+        insertBefore = this._insertBeforeOrAppend(insertBefore, record);
       }
     });
-    // We need to check whether `eventListeners` exists, because it's something
-    // that Zone.js only adds to `EventTarget` in browser environments.
-    if (typeof node.eventListeners === 'function') {
-      // Note that in Ivy we wrap event listeners with a call to `event.preventDefault` in some
-      // cases. We use '__ngUnwrap__' as a special token that gives us access to the actual event
-      // listener.
-      node.eventListeners(eventName).forEach(listener => {
-        // In order to ensure that we can detect the special __ngUnwrap__ token described above, we
-        // use `toString` on the listener and see if it contains the token. We use this approach to
-        // ensure that it still worked with compiled code since it cannot remove or rename string
-        // literals. We also considered using a special function name (i.e. if(listener.name ===
-        // special)) but that was more cumbersome and we were also concerned the compiled code could
-        // strip the name, turning the condition in to ("" === "") and always returning true.
-        if (listener.toString().indexOf('__ngUnwrap__') !== -1) {
-          const unwrappedListener = listener('__ngUnwrap__');
-          return invokedListeners.indexOf(unwrappedListener) === -1 && unwrappedListener.call(node, eventObj);
-        }
-      });
-    }
-  }
-}
-function copyDomProperties(element, properties) {
-  if (element) {
-    // Skip own properties (as those are patched)
-    let obj = Object.getPrototypeOf(element);
-    const NodePrototype = Node.prototype;
-    while (obj !== null && obj !== NodePrototype) {
-      const descriptors = Object.getOwnPropertyDescriptors(obj);
-      for (let key in descriptors) {
-        if (!key.startsWith('__') && !key.startsWith('on')) {
-          // don't include properties starting with `__` and `on`.
-          // `__` are patched values which should not be included.
-          // `on` are listeners which also should not be included.
-          const value = element[key];
-          if (isPrimitiveValue(value)) {
-            properties[key] = value;
-          }
+    // Items remaining at the end of the list have been deleted
+    if (insertBefore) {
+      if (insertBefore._prev) {
+        insertBefore._prev._next = null;
+      }
+      this._removalsHead = insertBefore;
+      for (let record = insertBefore; record !== null; record = record._nextRemoved) {
+        if (record === this._mapHead) {
+          this._mapHead = null;
         }
+        this._records.delete(record.key);
+        record._nextRemoved = record._next;
+        record.previousValue = record.currentValue;
+        record.currentValue = null;
+        record._prev = null;
+        record._next = null;
       }
-      obj = Object.getPrototypeOf(obj);
     }
+    // Make sure tails have no next records from previous runs
+    if (this._changesTail) this._changesTail._nextChanged = null;
+    if (this._additionsTail) this._additionsTail._nextAdded = null;
+    return this.isDirty;
   }
-}
-function isPrimitiveValue(value) {
-  return typeof value === 'string' || typeof value === 'boolean' || typeof value === 'number' || value === null;
-}
-function _queryAll(parentElement, predicate, matches, elementsOnly) {
-  const context = getLContext(parentElement.nativeNode);
-  const lView = context ? context.lView : null;
-  if (lView !== null) {
-    const parentTNode = lView[TVIEW].data[context.nodeIndex];
-    _queryNodeChildren(parentTNode, lView, predicate, matches, elementsOnly, parentElement.nativeNode);
-  } else {
-    // If the context is null, then `parentElement` was either created with Renderer2 or native DOM
-    // APIs.
-    _queryNativeNodeDescendants(parentElement.nativeNode, predicate, matches, elementsOnly);
-  }
-}
-/**
- * Recursively match the current TNode against the predicate, and goes on with the next ones.
- *
- * @param tNode the current TNode
- * @param lView the LView of this TNode
- * @param predicate the predicate to match
- * @param matches the list of positive matches
- * @param elementsOnly whether only elements should be searched
- * @param rootNativeNode the root native node on which predicate should not be matched
- */
-function _queryNodeChildren(tNode, lView, predicate, matches, elementsOnly, rootNativeNode) {
-  ngDevMode && assertTNodeForLView(tNode, lView);
-  const nativeNode = getNativeByTNodeOrNull(tNode, lView);
-  // For each type of TNode, specific logic is executed.
-  if (tNode.type & (3 /* TNodeType.AnyRNode */ | 8 /* TNodeType.ElementContainer */)) {
-    // Case 1: the TNode is an element
-    // The native node has to be checked.
-    _addQueryMatch(nativeNode, predicate, matches, elementsOnly, rootNativeNode);
-    if (isComponentHost(tNode)) {
-      // If the element is the host of a component, then all nodes in its view have to be processed.
-      // Note: the component's content (tNode.child) will be processed from the insertion points.
-      const componentView = getComponentLViewByIndex(tNode.index, lView);
-      if (componentView && componentView[TVIEW].firstChild) {
-        _queryNodeChildren(componentView[TVIEW].firstChild, componentView, predicate, matches, elementsOnly, rootNativeNode);
+  /**
+   * Inserts a record before `before` or append at the end of the list when `before` is null.
+   *
+   * Notes:
+   * - This method appends at `this._appendAfter`,
+   * - This method updates `this._appendAfter`,
+   * - The return value is the new value for the insertion pointer.
+   */
+  _insertBeforeOrAppend(before, record) {
+    if (before) {
+      const prev = before._prev;
+      record._next = before;
+      record._prev = prev;
+      before._prev = record;
+      if (prev) {
+        prev._next = record;
       }
-    } else {
-      if (tNode.child) {
-        // Otherwise, its children have to be processed.
-        _queryNodeChildren(tNode.child, lView, predicate, matches, elementsOnly, rootNativeNode);
+      if (before === this._mapHead) {
+        this._mapHead = record;
       }
-      // We also have to query the DOM directly in order to catch elements inserted through
-      // Renderer2. Note that this is __not__ optimal, because we're walking similar trees multiple
-      // times. ViewEngine could do it more efficiently, because all the insertions go through
-      // Renderer2, however that's not the case in Ivy. This approach is being used because:
-      // 1. Matching the ViewEngine behavior would mean potentially introducing a dependency
-      //    from `Renderer2` to Ivy which could bring Ivy code into ViewEngine.
-      // 2. It allows us to capture nodes that were inserted directly via the DOM.
-      nativeNode && _queryNativeNodeDescendants(nativeNode, predicate, matches, elementsOnly);
+      this._appendAfter = before;
+      return before;
     }
-    // In all cases, if a dynamic container exists for this node, each view inside it has to be
-    // processed.
-    const nodeOrContainer = lView[tNode.index];
-    if (isLContainer(nodeOrContainer)) {
-      _queryNodeChildrenInContainer(nodeOrContainer, predicate, matches, elementsOnly, rootNativeNode);
+    if (this._appendAfter) {
+      this._appendAfter._next = record;
+      record._prev = this._appendAfter;
+    } else {
+      this._mapHead = record;
     }
-  } else if (tNode.type & 4 /* TNodeType.Container */) {
-    // Case 2: the TNode is a container
-    // The native node has to be checked.
-    const lContainer = lView[tNode.index];
-    _addQueryMatch(lContainer[NATIVE], predicate, matches, elementsOnly, rootNativeNode);
-    // Each view inside the container has to be processed.
-    _queryNodeChildrenInContainer(lContainer, predicate, matches, elementsOnly, rootNativeNode);
-  } else if (tNode.type & 16 /* TNodeType.Projection */) {
-    // Case 3: the TNode is a projection insertion point (i.e. a <ng-content>).
-    // The nodes projected at this location all need to be processed.
-    const componentView = lView[DECLARATION_COMPONENT_VIEW];
-    const componentHost = componentView[T_HOST];
-    const head = componentHost.projection[tNode.projection];
-    if (Array.isArray(head)) {
-      for (let nativeNode of head) {
-        _addQueryMatch(nativeNode, predicate, matches, elementsOnly, rootNativeNode);
+    this._appendAfter = record;
+    return null;
+  }
+  _getOrCreateRecordForKey(key, value) {
+    if (this._records.has(key)) {
+      const record = this._records.get(key);
+      this._maybeAddToChanges(record, value);
+      const prev = record._prev;
+      const next = record._next;
+      if (prev) {
+        prev._next = next;
+      }
+      if (next) {
+        next._prev = prev;
       }
-    } else if (head) {
-      const nextLView = componentView[PARENT];
-      const nextTNode = nextLView[TVIEW].data[head.index];
-      _queryNodeChildren(nextTNode, nextLView, predicate, matches, elementsOnly, rootNativeNode);
+      record._next = null;
+      record._prev = null;
+      return record;
     }
-  } else if (tNode.child) {
-    // Case 4: the TNode is a view.
-    _queryNodeChildren(tNode.child, lView, predicate, matches, elementsOnly, rootNativeNode);
+    const record = new KeyValueChangeRecord_(key);
+    this._records.set(key, record);
+    record.currentValue = value;
+    this._addToAdditions(record);
+    return record;
   }
-  // We don't want to go to the next sibling of the root node.
-  if (rootNativeNode !== nativeNode) {
-    // To determine the next node to be processed, we need to use the next or the projectionNext
-    // link, depending on whether the current node has been projected.
-    const nextTNode = tNode.flags & 2 /* TNodeFlags.isProjected */ ? tNode.projectionNext : tNode.next;
-    if (nextTNode) {
-      _queryNodeChildren(nextTNode, lView, predicate, matches, elementsOnly, rootNativeNode);
+  /** @internal */
+  _reset() {
+    if (this.isDirty) {
+      let record;
+      // let `_previousMapHead` contain the state of the map before the changes
+      this._previousMapHead = this._mapHead;
+      for (record = this._previousMapHead; record !== null; record = record._next) {
+        record._nextPrevious = record._next;
+      }
+      // Update `record.previousValue` with the value of the item before the changes
+      // We need to update all changed items (that's those which have been added and changed)
+      for (record = this._changesHead; record !== null; record = record._nextChanged) {
+        record.previousValue = record.currentValue;
+      }
+      for (record = this._additionsHead; record != null; record = record._nextAdded) {
+        record.previousValue = record.currentValue;
+      }
+      this._changesHead = this._changesTail = null;
+      this._additionsHead = this._additionsTail = null;
+      this._removalsHead = null;
     }
   }
-}
-/**
- * Process all TNodes in a given container.
- *
- * @param lContainer the container to be processed
- * @param predicate the predicate to match
- * @param matches the list of positive matches
- * @param elementsOnly whether only elements should be searched
- * @param rootNativeNode the root native node on which predicate should not be matched
- */
-function _queryNodeChildrenInContainer(lContainer, predicate, matches, elementsOnly, rootNativeNode) {
-  for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
-    const childView = lContainer[i];
-    const firstChild = childView[TVIEW].firstChild;
-    if (firstChild) {
-      _queryNodeChildren(firstChild, childView, predicate, matches, elementsOnly, rootNativeNode);
+  // Add the record or a given key to the list of changes only when the value has actually changed
+  _maybeAddToChanges(record, newValue) {
+    if (!Object.is(newValue, record.currentValue)) {
+      record.previousValue = record.currentValue;
+      record.currentValue = newValue;
+      this._addToChanges(record);
     }
   }
-}
-/**
- * Match the current native node against the predicate.
- *
- * @param nativeNode the current native node
- * @param predicate the predicate to match
- * @param matches the list of positive matches
- * @param elementsOnly whether only elements should be searched
- * @param rootNativeNode the root native node on which predicate should not be matched
- */
-function _addQueryMatch(nativeNode, predicate, matches, elementsOnly, rootNativeNode) {
-  if (rootNativeNode !== nativeNode) {
-    const debugNode = getDebugNode(nativeNode);
-    if (!debugNode) {
-      return;
+  _addToAdditions(record) {
+    if (this._additionsHead === null) {
+      this._additionsHead = this._additionsTail = record;
+    } else {
+      this._additionsTail._nextAdded = record;
+      this._additionsTail = record;
     }
-    // Type of the "predicate and "matches" array are set based on the value of
-    // the "elementsOnly" parameter. TypeScript is not able to properly infer these
-    // types with generics, so we manually cast the parameters accordingly.
-    if (elementsOnly && debugNode instanceof DebugElement && predicate(debugNode) && matches.indexOf(debugNode) === -1) {
-      matches.push(debugNode);
-    } else if (!elementsOnly && predicate(debugNode) && matches.indexOf(debugNode) === -1) {
-      matches.push(debugNode);
+  }
+  _addToChanges(record) {
+    if (this._changesHead === null) {
+      this._changesHead = this._changesTail = record;
+    } else {
+      this._changesTail._nextChanged = record;
+      this._changesTail = record;
+    }
+  }
+  /** @internal */
+  _forEach(obj, fn) {
+    if (obj instanceof Map) {
+      obj.forEach(fn);
+    } else {
+      Object.keys(obj).forEach(k => fn(obj[k], k));
     }
   }
 }
+class KeyValueChangeRecord_ {
+  constructor(key) {
+    this.key = key;
+    this.previousValue = null;
+    this.currentValue = null;
+    /** @internal */
+    this._nextPrevious = null;
+    /** @internal */
+    this._next = null;
+    /** @internal */
+    this._prev = null;
+    /** @internal */
+    this._nextAdded = null;
+    /** @internal */
+    this._nextRemoved = null;
+    /** @internal */
+    this._nextChanged = null;
+  }
+}
+function defaultIterableDiffersFactory() {
+  return new IterableDiffers([new DefaultIterableDifferFactory()]);
+}
 /**
- * Match all the descendants of a DOM node against a predicate.
+ * A repository of different iterable diffing strategies used by NgFor, NgClass, and others.
  *
- * @param nativeNode the current native node
- * @param predicate the predicate to match
- * @param matches the list where matches are stored
- * @param elementsOnly whether only elements should be searched
+ * @publicApi
  */
-function _queryNativeNodeDescendants(parentNode, predicate, matches, elementsOnly) {
-  const nodes = parentNode.childNodes;
-  const length = nodes.length;
-  for (let i = 0; i < length; i++) {
-    const node = nodes[i];
-    const debugNode = getDebugNode(node);
-    if (debugNode) {
-      if (elementsOnly && debugNode instanceof DebugElement && predicate(debugNode) && matches.indexOf(debugNode) === -1) {
-        matches.push(debugNode);
-      } else if (!elementsOnly && predicate(debugNode) && matches.indexOf(debugNode) === -1) {
-        matches.push(debugNode);
+let IterableDiffers = /*#__PURE__*/(() => {
+  class IterableDiffers {
+    /** @nocollapse */
+    static #_ = this.ɵprov = ɵɵdefineInjectable({
+      token: IterableDiffers,
+      providedIn: 'root',
+      factory: defaultIterableDiffersFactory
+    });
+    constructor(factories) {
+      this.factories = factories;
+    }
+    static create(factories, parent) {
+      if (parent != null) {
+        const copied = parent.factories.slice();
+        factories = factories.concat(copied);
       }
-      _queryNativeNodeDescendants(node, predicate, matches, elementsOnly);
+      return new IterableDiffers(factories);
     }
-  }
-}
-/**
- * Iterates through the property bindings for a given node and generates
- * a map of property names to values. This map only contains property bindings
- * defined in templates, not in host bindings.
- */
-function collectPropertyBindings(properties, tNode, lView, tData) {
-  let bindingIndexes = tNode.propertyBindings;
-  if (bindingIndexes !== null) {
-    for (let i = 0; i < bindingIndexes.length; i++) {
-      const bindingIndex = bindingIndexes[i];
-      const propMetadata = tData[bindingIndex];
-      const metadataParts = propMetadata.split(INTERPOLATION_DELIMITER);
-      const propertyName = metadataParts[0];
-      if (metadataParts.length > 1) {
-        let value = metadataParts[1];
-        for (let j = 1; j < metadataParts.length - 1; j++) {
-          value += renderStringify(lView[bindingIndex + j - 1]) + metadataParts[j + 1];
-        }
-        properties[propertyName] = value;
+    /**
+     * Takes an array of {@link IterableDifferFactory} and returns a provider used to extend the
+     * inherited {@link IterableDiffers} instance with the provided factories and return a new
+     * {@link IterableDiffers} instance.
+     *
+     * @usageNotes
+     * ### Example
+     *
+     * The following example shows how to extend an existing list of factories,
+     * which will only be applied to the injector for this component and its children.
+     * This step is all that's required to make a new {@link IterableDiffer} available.
+     *
+     * ```
+     * @Component({
+     *   viewProviders: [
+     *     IterableDiffers.extend([new ImmutableListDiffer()])
+     *   ]
+     * })
+     * ```
+     */
+    static extend(factories) {
+      return {
+        provide: IterableDiffers,
+        useFactory: parent => {
+          // if parent is null, it means that we are in the root injector and we have just overridden
+          // the default injection mechanism for IterableDiffers, in such a case just assume
+          // `defaultIterableDiffersFactory`.
+          return IterableDiffers.create(factories, parent || defaultIterableDiffersFactory());
+        },
+        // Dependency technically isn't optional, but we can provide a better error message this way.
+        deps: [[IterableDiffers, new SkipSelf(), new Optional()]]
+      };
+    }
+    find(iterable) {
+      const factory = this.factories.find(f => f.supports(iterable));
+      if (factory != null) {
+        return factory;
       } else {
-        properties[propertyName] = lView[bindingIndex];
+        throw new RuntimeError(901 /* RuntimeErrorCode.NO_SUPPORTING_DIFFER_FACTORY */, ngDevMode && `Cannot find a differ supporting object '${iterable}' of type '${getTypeNameForDebugging(iterable)}'`);
       }
     }
   }
+  return IterableDiffers;
+})();
+function getTypeNameForDebugging(type) {
+  return type['name'] || typeof type;
+}
+function defaultKeyValueDiffersFactory() {
+  return new KeyValueDiffers([new DefaultKeyValueDifferFactory()]);
 }
-// Need to keep the nodes in a global Map so that multiple angular apps are supported.
-const _nativeNodeToDebugNode = /*#__PURE__*/new Map();
-const NG_DEBUG_PROPERTY = '__ng_debug__';
 /**
+ * A repository of different Map diffing strategies used by NgClass, NgStyle, and others.
+ *
  * @publicApi
  */
-function getDebugNode(nativeNode) {
-  if (nativeNode instanceof Node) {
-    if (!nativeNode.hasOwnProperty(NG_DEBUG_PROPERTY)) {
-      nativeNode[NG_DEBUG_PROPERTY] = nativeNode.nodeType == Node.ELEMENT_NODE ? new DebugElement(nativeNode) : new DebugNode(nativeNode);
+let KeyValueDiffers = /*#__PURE__*/(() => {
+  class KeyValueDiffers {
+    /** @nocollapse */
+    static #_ = this.ɵprov = ɵɵdefineInjectable({
+      token: KeyValueDiffers,
+      providedIn: 'root',
+      factory: defaultKeyValueDiffersFactory
+    });
+    constructor(factories) {
+      this.factories = factories;
+    }
+    static create(factories, parent) {
+      if (parent) {
+        const copied = parent.factories.slice();
+        factories = factories.concat(copied);
+      }
+      return new KeyValueDiffers(factories);
+    }
+    /**
+     * Takes an array of {@link KeyValueDifferFactory} and returns a provider used to extend the
+     * inherited {@link KeyValueDiffers} instance with the provided factories and return a new
+     * {@link KeyValueDiffers} instance.
+     *
+     * @usageNotes
+     * ### Example
+     *
+     * The following example shows how to extend an existing list of factories,
+     * which will only be applied to the injector for this component and its children.
+     * This step is all that's required to make a new {@link KeyValueDiffer} available.
+     *
+     * ```
+     * @Component({
+     *   viewProviders: [
+     *     KeyValueDiffers.extend([new ImmutableMapDiffer()])
+     *   ]
+     * })
+     * ```
+     */
+    static extend(factories) {
+      return {
+        provide: KeyValueDiffers,
+        useFactory: parent => {
+          // if parent is null, it means that we are in the root injector and we have just overridden
+          // the default injection mechanism for KeyValueDiffers, in such a case just assume
+          // `defaultKeyValueDiffersFactory`.
+          return KeyValueDiffers.create(factories, parent || defaultKeyValueDiffersFactory());
+        },
+        // Dependency technically isn't optional, but we can provide a better error message this way.
+        deps: [[KeyValueDiffers, new SkipSelf(), new Optional()]]
+      };
+    }
+    find(kv) {
+      const factory = this.factories.find(f => f.supports(kv));
+      if (factory) {
+        return factory;
+      }
+      throw new RuntimeError(901 /* RuntimeErrorCode.NO_SUPPORTING_DIFFER_FACTORY */, ngDevMode && `Cannot find a differ supporting object '${kv}'`);
     }
-    return nativeNode[NG_DEBUG_PROPERTY];
   }
-  return null;
-}
-function getAllDebugNodes() {
-  return Array.from(_nativeNodeToDebugNode.values());
-}
-function indexDebugNode(node) {
-  _nativeNodeToDebugNode.set(node.nativeNode, node);
-}
-function removeDebugNodeFromIndex(node) {
-  _nativeNodeToDebugNode.delete(node.nativeNode);
-}
+  return KeyValueDiffers;
+})();
+/**
+ * Structural diffing for `Object`s and `Map`s.
+ */
+const keyValDiff = [/*#__PURE__*/new DefaultKeyValueDifferFactory()];
+/**
+ * Structural diffing for `Iterable` types such as `Array`s.
+ */
+const iterableDiff = [/*#__PURE__*/new DefaultIterableDifferFactory()];
+const defaultIterableDiffers = /*#__PURE__*/new IterableDiffers(iterableDiff);
+const defaultKeyValueDiffers = /*#__PURE__*/new KeyValueDiffers(keyValDiff);
+
+/**
+ * @module
+ * @description
+ * Change detection enables data binding in Angular.
+ */
 
 /**
  * This platform has to be included in any other platform
@@ -36856,6 +36707,198 @@ function ɵɵngDeclarePipe(decl) {
 // clang-format off
 // clang-format on
 
+/**
+ * Create a computed `Signal` which derives a reactive value from an expression.
+ */
+function computed(computation, options) {
+  performanceMarkFeature('NgSignals');
+  const getter = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.createComputed)(computation);
+  if (options?.equal) {
+    getter[_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.SIGNAL].equal = options.equal;
+  }
+  if (ngDevMode) {
+    getter.toString = () => `[Computed: ${getter()}]`;
+  }
+  return getter;
+}
+
+/**
+ * Execute an arbitrary function in a non-reactive (non-tracking) context. The executed function
+ * can, optionally, return a value.
+ */
+function untracked(nonReactiveReadsFn) {
+  const prevConsumer = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.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 {
+    (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.setActiveConsumer)(prevConsumer);
+  }
+}
+
+/**
+ * Not public API, which guarantees `EffectScheduler` only ever comes from the application root
+ * injector.
+ */
+const APP_EFFECT_SCHEDULER = /*#__PURE__*/new InjectionToken('', {
+  providedIn: 'root',
+  factory: () => inject(EffectScheduler)
+});
+/**
+ * A scheduler which manages the execution of effects.
+ */
+let EffectScheduler = /*#__PURE__*/(() => {
+  class EffectScheduler {
+    /** @nocollapse */
+    static #_ = this.ɵprov = ɵɵdefineInjectable({
+      token: EffectScheduler,
+      providedIn: 'root',
+      factory: () => new ZoneAwareEffectScheduler()
+    });
+  }
+  return EffectScheduler;
+})();
+/**
+ * A wrapper around `ZoneAwareQueueingScheduler` that schedules flushing via the microtask queue
+ * when.
+ */
+class ZoneAwareEffectScheduler {
+  constructor() {
+    this.queuedEffectCount = 0;
+    this.queues = new Map();
+    this.pendingTasks = inject(PendingTasks);
+    this.taskId = null;
+  }
+  scheduleEffect(handle) {
+    this.enqueue(handle);
+    if (this.taskId === null) {
+      const taskId = this.taskId = this.pendingTasks.add();
+      queueMicrotask(() => {
+        this.flush();
+        this.pendingTasks.remove(taskId);
+        this.taskId = null;
+      });
+    }
+  }
+  enqueue(handle) {
+    const zone = handle.creationZone;
+    if (!this.queues.has(zone)) {
+      this.queues.set(zone, new Set());
+    }
+    const queue = this.queues.get(zone);
+    if (queue.has(handle)) {
+      return;
+    }
+    this.queuedEffectCount++;
+    queue.add(handle);
+  }
+  /**
+   * Run all scheduled effects.
+   *
+   * Execution order of effects within the same zone is guaranteed to be FIFO, but there is no
+   * ordering guarantee between effects scheduled in different zones.
+   */
+  flush() {
+    while (this.queuedEffectCount > 0) {
+      for (const [zone, queue] of this.queues) {
+        // `zone` here must be defined.
+        if (zone === null) {
+          this.flushQueue(queue);
+        } else {
+          zone.run(() => this.flushQueue(queue));
+        }
+      }
+    }
+  }
+  flushQueue(queue) {
+    for (const handle of queue) {
+      queue.delete(handle);
+      this.queuedEffectCount--;
+      // TODO: what happens if this throws an error?
+      handle.run();
+    }
+  }
+}
+/**
+ * Core reactive node for an Angular effect.
+ *
+ * `EffectHandle` combines the reactive graph's `Watch` base node for effects with the framework's
+ * scheduling abstraction (`EffectScheduler`) as well as automatic cleanup via `DestroyRef` if
+ * available/requested.
+ */
+class EffectHandle {
+  constructor(scheduler, effectFn, creationZone, destroyRef, injector, allowSignalWrites) {
+    this.scheduler = scheduler;
+    this.effectFn = effectFn;
+    this.creationZone = creationZone;
+    this.injector = injector;
+    this.watcher = (0,_angular_core_primitives_signals__WEBPACK_IMPORTED_MODULE_0__.createWatch)(onCleanup => this.runEffect(onCleanup), () => this.schedule(), allowSignalWrites);
+    this.unregisterOnDestroy = destroyRef?.onDestroy(() => this.destroy());
+  }
+  runEffect(onCleanup) {
+    try {
+      this.effectFn(onCleanup);
+    } catch (err) {
+      // Inject the `ErrorHandler` here in order to avoid circular DI error
+      // if the effect is used inside of a custom `ErrorHandler`.
+      const errorHandler = this.injector.get(ErrorHandler, null, {
+        optional: true
+      });
+      errorHandler?.handleError(err);
+    }
+  }
+  run() {
+    this.watcher.run();
+  }
+  schedule() {
+    this.scheduler.scheduleEffect(this);
+  }
+  destroy() {
+    this.watcher.destroy();
+    this.unregisterOnDestroy?.();
+    // Note: if the effect is currently scheduled, it's not un-scheduled, and so the scheduler will
+    // retain a reference to it. Attempting to execute it will be a no-op.
+  }
+}
+/**
+ * Create a global `Effect` for the given reactive function.
+ *
+ * @developerPreview
+ */
+function effect(effectFn, options) {
+  performanceMarkFeature('NgSignals');
+  ngDevMode && assertNotInReactiveContext(effect, 'Call `effect` outside of a reactive context. For example, schedule the ' + 'effect inside the component constructor.');
+  !options?.injector && assertInInjectionContext(effect);
+  const injector = options?.injector ?? inject(Injector);
+  const destroyRef = options?.manualCleanup !== true ? injector.get(DestroyRef) : null;
+  const handle = new EffectHandle(injector.get(APP_EFFECT_SCHEDULER), effectFn, typeof Zone === 'undefined' ? null : Zone.current, destroyRef, injector, options?.allowSignalWrites ?? false);
+  // Effects need to be marked dirty manually to trigger their initial run. The timing of this
+  // marking matters, because the effects may read signals that track component inputs, which are
+  // only available after those components have had their first update pass.
+  //
+  // We inject `ChangeDetectorRef` optionally, to determine whether this effect is being created in
+  // the context of a component or not. If it is, then we check whether the component has already
+  // run its update pass, and defer the effect's initial scheduling until the update pass if it
+  // hasn't already run.
+  const cdr = injector.get(ChangeDetectorRef, null, {
+    optional: true
+  });
+  if (!cdr || !(cdr._lView[FLAGS] & 8 /* LViewFlags.FirstLViewPass */)) {
+    // This effect is either not running in a view injector, or the view has already
+    // undergone its first change detection pass, which is necessary for any required inputs to be
+    // set.
+    handle.watcher.notify();
+  } else {
+    // Delay the initialization of the effect until the view is fully initialized.
+    (cdr._lView[EFFECTS_TO_SCHEDULE] ??= []).push(handle.watcher.notify);
+  }
+  return handle;
+}
+
+// clang-format off
+// clang-format on
+
 // This file exists to allow the set of reactivity exports to be modified in g3, as these APIs are
 
 /**
diff --git a/128.7a8e34f227ffc98b.js b/128.9a5623dc1ea48bb6.js
similarity index 97%
rename from 128.7a8e34f227ffc98b.js
rename to 128.9a5623dc1ea48bb6.js
index 25d4b68e..f665c7cf 100644
--- a/128.7a8e34f227ffc98b.js
+++ b/128.9a5623dc1ea48bb6.js
@@ -12,16 +12,16 @@ __webpack_require__.d(__webpack_exports__, {
   AngularHostModule: () => (/* binding */ AngularHostModule)
 });
 
-// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
-var router_mjs_ = __webpack_require__(6740);
+// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
+var router_mjs_ = __webpack_require__(2988);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc.js
 var taiga_ui_addon_doc = __webpack_require__(176);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-utils.js + 76 modules
 var taiga_ui_addon_doc_utils = __webpack_require__(956);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-components-link.js
 var taiga_ui_core_components_link = __webpack_require__(1512);
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-components.js + 85 modules
 var taiga_ui_addon_doc_components = __webpack_require__(5748);
 ;// CONCATENATED MODULE: ./apps/demo/src/app/modules/angular-host/angular-host.component.ts
diff --git a/140.65d4ea1811d05d20.js b/140.1c9749b3047f9e2a.js
similarity index 94%
rename from 140.65d4ea1811d05d20.js
rename to 140.1c9749b3047f9e2a.js
index 47fd2f86..b3d362c5 100644
--- a/140.65d4ea1811d05d20.js
+++ b/140.1c9749b3047f9e2a.js
@@ -12,16 +12,16 @@ __webpack_require__.d(__webpack_exports__, {
   ReactInstallationModule: () => (/* binding */ ReactInstallationModule)
 });
 
-// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
-var router_mjs_ = __webpack_require__(6740);
+// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
+var router_mjs_ = __webpack_require__(2988);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc.js
 var taiga_ui_addon_doc = __webpack_require__(176);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-utils.js + 76 modules
 var taiga_ui_addon_doc_utils = __webpack_require__(956);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-components-link.js
 var taiga_ui_core_components_link = __webpack_require__(1512);
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-components.js + 85 modules
 var taiga_ui_addon_doc_components = __webpack_require__(5748);
 ;// CONCATENATED MODULE: ./apps/demo/src/app/modules/react-installation/react-installation.component.ts
diff --git a/152.66e276e2814724c9.js b/152.d80c6aaa39c2fca8.js
similarity index 94%
rename from 152.66e276e2814724c9.js
rename to 152.d80c6aaa39c2fca8.js
index 02ffe05b..124534e7 100644
--- a/152.66e276e2814724c9.js
+++ b/152.d80c6aaa39c2fca8.js
@@ -12,16 +12,16 @@ __webpack_require__.d(__webpack_exports__, {
   NativeInstallationModule: () => (/* binding */ NativeInstallationModule)
 });
 
-// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
-var router_mjs_ = __webpack_require__(6740);
+// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
+var router_mjs_ = __webpack_require__(2988);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc.js
 var taiga_ui_addon_doc = __webpack_require__(176);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-utils.js + 76 modules
 var taiga_ui_addon_doc_utils = __webpack_require__(956);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-components-link.js
 var taiga_ui_core_components_link = __webpack_require__(1512);
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-components.js + 85 modules
 var taiga_ui_addon_doc_components = __webpack_require__(5748);
 ;// CONCATENATED MODULE: ./apps/demo/src/app/modules/native-installation/native-installation.component.ts
diff --git a/200.c286a8ff10f53036.js b/200.ae251f23910b5286.js
similarity index 99%
rename from 200.c286a8ff10f53036.js
rename to 200.ae251f23910b5286.js
index 023f01b2..82c2179a 100644
--- a/200.c286a8ff10f53036.js
+++ b/200.ae251f23910b5286.js
@@ -645,11 +645,11 @@ function mapOneOrManyArgs(fn) {
 /* harmony export */   q: () => (/* binding */ DomRendererFactory2)
 /* harmony export */ });
 /* unused harmony exports By, EventManager, EventManagerPlugin, HAMMER_GESTURE_CONFIG, HAMMER_LOADER, HammerGestureConfig, HammerModule, HydrationFeatureKind, Meta, REMOVE_STYLES_ON_COMPONENT_DESTROY, TransferState, VERSION, bootstrapApplication, createApplication, disableDebugTools, enableDebugTools, makeStateKey, provideClientHydration, provideProtractorTestingSupport, withHttpTransferCacheOptions, withNoHttpTransferCache, ɵBrowserDomAdapter, ɵBrowserGetTestability, ɵDomEventsPlugin, ɵDomSanitizerImpl, ɵHammerGesturesPlugin, ɵINTERNAL_BROWSER_PLATFORM_PROVIDERS, ɵKeyEventsPlugin, ɵSharedStylesHost, ɵinitDomAdapter */
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
-/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9996);
-/* harmony import */ var _angular_common_http__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4380);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
+/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9188);
+/* harmony import */ var _angular_common_http__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1348);
 /**
- * @license Angular v17.2.3
+ * @license Angular v17.2.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -2721,7 +2721,7 @@ function provideClientHydration(...features) {
 /**
  * @publicApi
  */
-const VERSION = /*#__PURE__*/new _angular_core__WEBPACK_IMPORTED_MODULE_0__.Version('17.2.3');
+const VERSION = /*#__PURE__*/new _angular_core__WEBPACK_IMPORTED_MODULE_0__.Version('17.2.4');
 
 // Re-export TransferState to the public API of the `platform-browser` for backwards-compatibility.
 /**
diff --git a/28.458e5126c3a20a10.js b/28.9478eaeaa12e7440.js
similarity index 94%
rename from 28.458e5126c3a20a10.js
rename to 28.9478eaeaa12e7440.js
index 0756fade..efc3141a 100644
--- a/28.458e5126c3a20a10.js
+++ b/28.9478eaeaa12e7440.js
@@ -12,16 +12,16 @@ __webpack_require__.d(__webpack_exports__, {
   ReactChildModule: () => (/* binding */ ReactChildModule)
 });
 
-// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
-var router_mjs_ = __webpack_require__(6740);
+// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
+var router_mjs_ = __webpack_require__(2988);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc.js
 var taiga_ui_addon_doc = __webpack_require__(176);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-utils.js + 76 modules
 var taiga_ui_addon_doc_utils = __webpack_require__(956);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-components-link.js
 var taiga_ui_core_components_link = __webpack_require__(1512);
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-components.js + 85 modules
 var taiga_ui_addon_doc_components = __webpack_require__(5748);
 ;// CONCATENATED MODULE: ./apps/demo/src/app/modules/react-child/react-child.component.ts
diff --git a/354.6404b1300e20d031.js b/354.80b7537ac05ad4e7.js
similarity index 97%
rename from 354.6404b1300e20d031.js
rename to 354.80b7537ac05ad4e7.js
index 34bd0e4f..04c4552d 100644
--- a/354.6404b1300e20d031.js
+++ b/354.80b7537ac05ad4e7.js
@@ -12,8 +12,8 @@ __webpack_require__.d(__webpack_exports__, {
   AngularInstallationModule: () => (/* binding */ AngularInstallationModule)
 });
 
-// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
-var router_mjs_ = __webpack_require__(6740);
+// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
+var router_mjs_ = __webpack_require__(2988);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc.js
 var taiga_ui_addon_doc = __webpack_require__(176);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-utils.js + 76 modules
@@ -22,8 +22,8 @@ var taiga_ui_addon_doc_utils = __webpack_require__(956);
 var taiga_ui_core_components_link = __webpack_require__(1512);
 // EXTERNAL MODULE: ./apps/demo/src/app/shared/host-child-warning/host-child-warning.module.ts
 var host_child_warning_module = __webpack_require__(9664);
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-components.js + 85 modules
 var taiga_ui_addon_doc_components = __webpack_require__(5748);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-components-notification.js
diff --git a/368.aa0b10126e8c452a.js b/368.95d75f4585fe13d1.js
similarity index 99%
rename from 368.aa0b10126e8c452a.js
rename to 368.95d75f4585fe13d1.js
index 6f0ad20f..76ca3b95 100644
--- a/368.aa0b10126e8c452a.js
+++ b/368.95d75f4585fe13d1.js
@@ -108,9 +108,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "ɵparseCookieValue": () => (/* binding */ parseCookieValue),
 /* harmony export */   "ɵsetRootDomAdapter": () => (/* binding */ setRootDomAdapter)
 /* harmony export */ });
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /**
- * @license Angular v17.2.3
+ * @license Angular v17.2.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -5460,7 +5460,7 @@ function isPlatformWorkerUi(platformId) {
 /**
  * @publicApi
  */
-const VERSION = /*#__PURE__*/new _angular_core__WEBPACK_IMPORTED_MODULE_0__.Version('17.2.3');
+const VERSION = /*#__PURE__*/new _angular_core__WEBPACK_IMPORTED_MODULE_0__.Version('17.2.4');
 
 /**
  * Defines a scroll position manager. Implemented by `BrowserViewportScroller`.
diff --git a/404.html b/404.html
index 4ab9b00f..9309f672 100644
--- a/404.html
+++ b/404.html
@@ -16,5 +16,5 @@
         0 0.25rem 0.375rem rgba(0, 0, 0, 0.05);--tui-shadow-modal:0 1.125rem 1.875rem rgba(0, 0, 0, 0.48);--tui-shadow-sidebar:0.25rem 0 1.5rem rgba(0, 0, 0, 0.12);--tui-shadow-navigation:0 0.125rem 1rem rgba(0, 0, 0, 0.08);--tui-shadow-sheet:0 -1rem 1.75rem rgba(0, 0, 0, 0.24)}@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk7PFO_F.ttf) format('truetype')}@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk59E-_F.ttf) format('truetype')}</style><link rel="stylesheet" href="styles.57c464df970ded2d.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.57c464df970ded2d.css"></noscript></head>
   <body>
     <microzord-root></microzord-root>
-  <script src="polyfills.735bdec294512a56.js" type="module"></script><script src="main.836bbb2469daee7f.js" type="module"></script></body>
+  <script src="polyfills.aa0414687ef9cad3.js" type="module"></script><script src="main.bbc2ac491f3d09bd.js" type="module"></script></body>
 </html>
diff --git a/48.1b782ecbcafea8ae.js b/48.f610b1c9cabd23c2.js
similarity index 99%
rename from 48.1b782ecbcafea8ae.js
rename to 48.f610b1c9cabd23c2.js
index 0fcc4386..8303ded9 100644
--- a/48.1b782ecbcafea8ae.js
+++ b/48.f610b1c9cabd23c2.js
@@ -14,7 +14,7 @@
 /* harmony export */   sn: () => (/* binding */ WINDOW)
 /* harmony export */ });
 /* unused harmony exports CACHES, CRYPTO, LOCATION, MEDIA_DEVICES, NETWORK_INFORMATION, PAGE_VISIBILITY, PERFORMANCE, SCREEN, SESSION_STORAGE, SPEECH_RECOGNITION, SPEECH_SYNTHESIS */
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3252);
 /* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(800);
@@ -23,7 +23,7 @@
 /* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4704);
 /* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(4000);
 /* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(8716);
-/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9996);
+/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9188);
 /* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_angular_common__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -138,7 +138,7 @@ const USER_AGENT = new _angular_core__WEBPACK_IMPORTED_MODULE_0__.InjectionToken
 /* harmony export */   o: () => (/* binding */ HostChildWarningModule)
 /* harmony export */ });
 /* harmony import */ var _taiga_ui_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8508);
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -167,15 +167,15 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXTERNAL MODULE: ./node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs
 var platform_browser = __webpack_require__(4476);
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/@angular/animations/fesm2022/browser.mjs
 var browser = __webpack_require__(8996);
-// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
-var common_mjs_ = __webpack_require__(9996);
+// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
+var common_mjs_ = __webpack_require__(9188);
 ;// CONCATENATED MODULE: ./node_modules/@angular/platform-browser/fesm2022/animations.mjs
 /**
- * @license Angular v17.2.3
+ * @license Angular v17.2.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -435,10 +435,10 @@ let AppComponent = /*#__PURE__*/(() => {
   }
   return AppComponent;
 })();
-// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
-var router_mjs_ = __webpack_require__(6740);
+// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
+var router_mjs_ = __webpack_require__(2988);
 // EXTERNAL MODULE: ./node_modules/@tinkoff/ng-polymorpheus/fesm2015/tinkoff-ng-polymorpheus.js
-var tinkoff_ng_polymorpheus = __webpack_require__(1040);
+var tinkoff_ng_polymorpheus = __webpack_require__(8660);
 ;// CONCATENATED MODULE: ./apps/demo/src/app/logo/logo.component.ts
 
 
@@ -864,8 +864,8 @@ __webpack_require__.d(__webpack_exports__, {
 
 // UNUSED EXPORTS: PAGE_PROVIDERS, PAGE_SEE_ALSO, TUI_DOC_EXAMPLE_DEFAULT_OPTIONS, TUI_DOC_EXAMPLE_OPTIONS, TuiDocCopyComponent, TuiDocCopyModule, TuiDocDemoComponent, TuiDocExampleComponent, TuiDocExampleGetTabsPipe, TuiDocHeaderComponent, TuiDocHeaderModule, TuiDocNavigationComponent, TuiDocNavigationModule, TuiDocSeeAlsoComponent, TuiDocSeeAlsoModule, TuiDocSourceCodeComponent, TuiDocSourceCodeModule, TuiDocTabComponent, TuiDocTabModule, TuiDocTypeReferencePipe, TuiGetColorPipe, TuiGetOpacityPipe, TuiInputOpacityDirective, TuiInputOpacityModule, TuiInspectPipe, TuiIsOptionalPipe, TuiIsPrimitivePolymorpheusContentPipe, TuiLanguageSwitcherComponent, TuiLanguageSwitcherModule, TuiShowCleanerPipe, TuiStripOptionalPipe, tuiDocExampleOptionsProvider
 
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-tokens.js
 var taiga_ui_addon_doc_tokens = __webpack_require__(1944);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-utils.js + 76 modules
@@ -1558,7 +1558,7 @@ var taiga_ui_core_tokens = __webpack_require__(5944);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-utils-miscellaneous.js
 var taiga_ui_core_utils_miscellaneous = __webpack_require__(5608);
 // EXTERNAL MODULE: ./node_modules/@tinkoff/ng-polymorpheus/fesm2015/tinkoff-ng-polymorpheus.js
-var tinkoff_ng_polymorpheus = __webpack_require__(1040);
+var tinkoff_ng_polymorpheus = __webpack_require__(8660);
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/operators/delay.js + 1 modules
 var delay = __webpack_require__(1192);
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/operators/repeat.js
@@ -1612,8 +1612,8 @@ function debounce(durationSelector) {
 var of = __webpack_require__(2700);
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/ReplaySubject.js
 var ReplaySubject = __webpack_require__(2540);
-// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
-var common_mjs_ = __webpack_require__(9996);
+// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
+var common_mjs_ = __webpack_require__(9188);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-constants.js
 var taiga_ui_core_constants = __webpack_require__(3840);
 ;// CONCATENATED MODULE: ./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-directives-hint.js
@@ -16098,8 +16098,8 @@ let TuiTagModule = /*#__PURE__*/(() => {
 
 
 //# sourceMappingURL=taiga-ui-kit-components-tag.js.map
-// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
-var router_mjs_ = __webpack_require__(6740);
+// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
+var router_mjs_ = __webpack_require__(2988);
 ;// CONCATENATED MODULE: ./node_modules/@ng-web-apis/mutation-observer/fesm2015/ng-web-apis-mutation-observer.js
 
 
@@ -21428,7 +21428,7 @@ let TuiDocPageModule = /*#__PURE__*/(() => {
 /* harmony export */ });
 /* unused harmony exports TUI_DOC_CODE_ACTIONS, TUI_DOC_CODE_EDITOR, TUI_DOC_DEFAULT_ICONS, TUI_DOC_DEMO_TEXTS, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_EXAMPLE_TEXTS, TUI_DOC_SCROLL_BEHAVIOR, tuiDocExcludeProperties, tuiDocIconsProvider */
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2528);
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _taiga_ui_addon_doc_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(956);
 /* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(528);
@@ -30162,7 +30162,7 @@ function tuiTypeReferenceParser(types) {
 /* harmony export */   q4: () => (/* binding */ tuiAsControl)
 /* harmony export */ });
 /* unused harmony exports AbstractTuiDialogDirective, AbstractTuiMultipleControl */
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _angular_forms__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(4716);
 /* harmony import */ var _taiga_ui_cdk_classes__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7308);
@@ -30181,7 +30181,7 @@ function tuiTypeReferenceParser(types) {
 /* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(3616);
 /* harmony import */ var _taiga_ui_cdk_services__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(5554);
 /* harmony import */ var _taiga_ui_cdk_exceptions__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(3152);
-/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9996);
+/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9188);
 /* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_angular_common__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -30816,7 +30816,7 @@ class TuiValidationError {
 /* harmony export */   yi: () => (/* binding */ svgNodeFilter)
 /* harmony export */ });
 /* unused harmony exports CHAR_BULLET, CHAR_CURRENCY_SIGN, CHAR_ELLIPSIS, CHAR_EM_DASH, CHAR_LAQUO, CHAR_PLUS, CHAR_RAQUO, CHAR_ZERO_WIDTH_SPACE, CHROMIUM_EDGE_START_VERSION, TUI_DEFAULT_MATCHER, TUI_PARENT_STOP, TUI_STRICT_MATCHER, TUI_USED_ICONS */
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _angular_animations__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9684);
 
@@ -31212,7 +31212,7 @@ function tuiRequiredSetter(assertion, ...args) {
 /* harmony export */   kR: () => (/* binding */ TuiLetModule)
 /* harmony export */ });
 /* unused harmony export TuiLetContext */
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -31659,8 +31659,8 @@ __webpack_require__.d(__webpack_exports__, {
 
 // UNUSED EXPORTS: TuiPanService, TuiScrollService, TuiZoomService
 
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/ReplaySubject.js
 var ReplaySubject = __webpack_require__(2540);
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/Observable.js
@@ -31707,8 +31707,8 @@ var ng_web_apis_common = __webpack_require__(1300);
 var taiga_ui_cdk_constants = __webpack_require__(4392);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/cdk/fesm2015/taiga-ui-cdk-utils-dom.js
 var taiga_ui_cdk_utils_dom = __webpack_require__(8987);
-// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
-var common_mjs_ = __webpack_require__(9996);
+// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
+var common_mjs_ = __webpack_require__(9188);
 ;// CONCATENATED MODULE: ./node_modules/@ng-web-apis/resize-observer/fesm2015/ng-web-apis-resize-observer.js
 
 
@@ -32388,10 +32388,10 @@ __webpack_require__.d(__webpack_exports__, {
 
 // UNUSED EXPORTS: TUI_DEFAULT_RENDERER, TUI_ENSURE_BASE_HREF, TUI_IS_APPLE, TUI_IS_CHROMIUM, TUI_IS_CYPRESS, TUI_IS_FIREFOX, TUI_IS_PLAYWRIGHT, TUI_IS_STACKBLITZ, TUI_PLATFORM, TUI_RANGE, TUI_REMOVED_ELEMENT, TUI_TAKE_ONLY_TRUSTED_EVENTS, TUI_TOUCH_SUPPORTED, TUI_WINDOW_HEIGHT, TUI_ZOOM_OPTIONS, tuiPlatformFactory
 
-// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
-var common_mjs_ = __webpack_require__(9996);
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
+var common_mjs_ = __webpack_require__(9188);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/@ng-web-apis/common/fesm2015/ng-web-apis-common.js
 var ng_web_apis_common = __webpack_require__(1300);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/cdk/fesm2015/taiga-ui-cdk-observables.js
@@ -33434,7 +33434,7 @@ function tuiToRadians(deg) {
 /* harmony export */   o3: () => (/* binding */ tuiIsNumber)
 /* harmony export */ });
 /* unused harmony exports tuiArrayShallowEquals, tuiArrayToggle, tuiCleanObject, tuiCreateOptions, tuiDefaultSort, tuiDistanceBetweenTouches, tuiEaseInOutQuad, tuiFlatLength, tuiIsObject, tuiIsValidUrl, tuiMarkControlAsTouchedAndValidate, tuiNullableSame, tuiObjectFromEntries, tuiProvideOptions */
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -33706,7 +33706,7 @@ fallback = 'rgba(0, 0, 0, 0.7)') {
 /* harmony export */   es: () => (/* binding */ TuiPositionAccessor),
 /* harmony export */   w: () => (/* binding */ TuiRectAccessor)
 /* harmony export */ });
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5554);
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(1800);
@@ -33862,7 +33862,7 @@ function tuiAsRectAccessor(useExisting) {
 /* harmony export */   Kw: () => (/* binding */ TuiButtonComponent)
 /* harmony export */ });
 /* unused harmony exports TUI_BUTTON_DEFAULT_OPTIONS, TUI_BUTTON_OPTIONS, tuiButtonOptionsProvider */
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2528);
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1800);
@@ -33877,10 +33877,10 @@ function tuiAsRectAccessor(useExisting) {
 /* harmony import */ var _taiga_ui_core_enums__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4304);
 /* harmony import */ var _taiga_ui_core_components_svg__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(3656);
 /* harmony import */ var _taiga_ui_core_components_loader__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(7692);
-/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9996);
+/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9188);
 /* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_angular_common__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _taiga_ui_core_directives_wrapper__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(4108);
-/* harmony import */ var _tinkoff_ng_polymorpheus__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(1040);
+/* harmony import */ var _tinkoff_ng_polymorpheus__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(8660);
 
 
 
@@ -34111,7 +34111,7 @@ let TuiButtonModule = /*#__PURE__*/(() => {
 /* harmony export */   C: () => (/* binding */ TuiLinkComponent),
 /* harmony export */   w: () => (/* binding */ TuiLinkModule)
 /* harmony export */ });
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(900);
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(4392);
@@ -34123,7 +34123,7 @@ let TuiButtonModule = /*#__PURE__*/(() => {
 /* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3412);
 /* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4704);
 /* harmony import */ var _taiga_ui_core_components_svg__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(3656);
-/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9996);
+/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9188);
 /* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_angular_common__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -34282,16 +34282,16 @@ let TuiLinkModule = /*#__PURE__*/(() => {
 /* harmony export */   Sk: () => (/* binding */ TuiLoaderModule)
 /* harmony export */ });
 /* unused harmony exports TUI_LOADER_DEFAULT_OPTIONS, TUI_LOADER_OPTIONS, tuiLoaderOptionsProvider */
-/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9996);
+/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9188);
 /* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_common__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2528);
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4204);
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4164);
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(2296);
 /* harmony import */ var _taiga_ui_core_utils_miscellaneous__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5608);
-/* harmony import */ var _tinkoff_ng_polymorpheus__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(1040);
+/* harmony import */ var _tinkoff_ng_polymorpheus__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8660);
 
 
 
@@ -34474,15 +34474,15 @@ let TuiLoaderModule = /*#__PURE__*/(() => {
 /* harmony export */   O: () => (/* binding */ TuiNotificationModule),
 /* harmony export */   e: () => (/* binding */ TuiNotificationComponent)
 /* harmony export */ });
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(900);
 /* harmony import */ var _taiga_ui_core_tokens__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5944);
 /* harmony import */ var _taiga_ui_core_components_svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3656);
 /* harmony import */ var _taiga_ui_core_components_button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(8212);
-/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9996);
+/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9188);
 /* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_angular_common__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _tinkoff_ng_polymorpheus__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(1040);
+/* harmony import */ var _tinkoff_ng_polymorpheus__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8660);
 
 
 
@@ -34646,9 +34646,9 @@ let TuiNotificationModule = /*#__PURE__*/(() => {
 /* harmony export */ });
 /* unused harmony exports TUI_DEPRECATED_ICONS, TUI_SVG_DEFAULT_OPTIONS, TUI_SVG_OPTIONS, TUI_SVG_SRC_INTERCEPTORS, tuiSvgOptionsProvider, tuiSvgSrcInterceptors */
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(1316);
-/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9996);
+/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9188);
 /* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_common__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(4476);
 /* harmony import */ var _ng_web_apis_common__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(1300);
@@ -35083,7 +35083,7 @@ const TUI_LATIN_AND_NUMBERS_REGEXP = /[A-z|0-9]/;
 /* harmony export */   Q: () => (/* binding */ TuiModeModule),
 /* harmony export */   Y: () => (/* binding */ TuiModeDirective)
 /* harmony export */ });
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1800);
 
@@ -35146,7 +35146,7 @@ let TuiModeModule = /*#__PURE__*/(() => {
 /* harmony export */   S: () => (/* binding */ TuiWrapperDirective),
 /* harmony export */   g: () => (/* binding */ TuiWrapperModule)
 /* harmony export */ });
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _taiga_ui_core_enums__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4304);
 /* harmony import */ var _taiga_ui_core_providers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3972);
@@ -35336,7 +35336,7 @@ var TuiRangeState = /*#__PURE__*/function (TuiRangeState) {
 /* harmony export */   Ir: () => (/* binding */ MODE_PROVIDER)
 /* harmony export */ });
 /* unused harmony exports TUI_IS_MOBILE_RES_PROVIDER, tuiWatchedControllerFactory */
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _taiga_ui_core_tokens__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5944);
 /* harmony import */ var _taiga_ui_core_directives_mode__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1220);
@@ -35400,7 +35400,7 @@ function tuiWatchedControllerFactory(controller, cdr, destroy$) {
 /* harmony export */   qY: () => (/* binding */ TuiHintService)
 /* harmony export */ });
 /* unused harmony exports TuiFormatDateService, TuiNightThemeService */
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(900);
 /* harmony import */ var _taiga_ui_cdk__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(2296);
@@ -35420,7 +35420,7 @@ function tuiWatchedControllerFactory(controller, cdr, destroy$) {
 /* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(3616);
 /* harmony import */ var _ng_web_apis_common__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(1300);
 /* harmony import */ var _taiga_ui_core_abstract__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(9371);
-/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6740);
+/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2988);
 /* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_angular_router__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(4476);
 /* harmony import */ var _taiga_ui_core_utils_dom__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(9056);
@@ -35731,8 +35731,8 @@ __webpack_require__.d(__webpack_exports__, {
 
 // UNUSED EXPORTS: STATUS_ICON, TUI_ANIMATIONS_DEFAULT_DURATION, TUI_ASSERT_ENABLED, TUI_DATA_LIST_ACCESSOR, TUI_DAY_TYPE_HANDLER, TUI_DEFAULT_ERROR_MESSAGE, TUI_DOCUMENT_OR_SHADOW_ROOT, TUI_ELEMENT_REF, TUI_FIRST_DAY_OF_WEEK, TUI_NOTIFICATION_DEFAULT_OPTIONS, TUI_NUMBER_FORMAT_OBSERVABLE, TUI_ORDERED_SHORT_WEEK_DAYS, TUI_SCROLL_REF, TUI_SELECTION_STREAM, TUI_SHORT_WEEK_DAYS, TUI_SPIN_ICONS, TUI_SPIN_TEXTS, tuiAsViewport, tuiCommonIconsProvider, tuiNotificationOptionsProvider, tuiNumberFormatProvider
 
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/cdk/fesm2015/taiga-ui-cdk-utils-miscellaneous.js
 var taiga_ui_cdk_utils_miscellaneous = __webpack_require__(2528);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/cdk/fesm2015/taiga-ui-cdk-enums.js
@@ -35741,8 +35741,8 @@ var taiga_ui_cdk_enums = __webpack_require__(7268);
 var taiga_ui_cdk_observables = __webpack_require__(900);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/cdk/fesm2015/taiga-ui-cdk-utils-svg.js
 var taiga_ui_cdk_utils_svg = __webpack_require__(7864);
-// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
-var common_mjs_ = __webpack_require__(9996);
+// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
+var common_mjs_ = __webpack_require__(9188);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/i18n/fesm2015/taiga-ui-i18n-tools.js + 2 modules
 var taiga_ui_i18n_tools = __webpack_require__(4472);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-utils-miscellaneous.js
@@ -36626,8 +36626,8 @@ __webpack_require__.d(__webpack_exports__, {
   u: () => (/* binding */ tuiExtractI18n)
 });
 
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/i18n/fesm2015/taiga-ui-i18n-enums.js
 var taiga_ui_i18n_enums = __webpack_require__(3724);
 ;// CONCATENATED MODULE: ./node_modules/@taiga-ui/i18n/fesm2015/taiga-ui-i18n-languages-english.js
@@ -37064,7 +37064,7 @@ function tuiExtractI18n(key) {
 
 /***/ }),
 
-/***/ 1040:
+/***/ 8660:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
@@ -37074,7 +37074,7 @@ function tuiExtractI18n(key) {
 /* harmony export */   WO: () => (/* binding */ PolymorpheusComponent),
 /* harmony export */   sv: () => (/* binding */ PolymorpheusTemplate)
 /* harmony export */ });
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -38317,10 +38317,10 @@ function argsOrArgArray(args) {
 /* harmony export */   wb: () => (/* binding */ style)
 /* harmony export */ });
 /* unused harmony exports AnimationBuilder, AnimationFactory, animation, group, keyframes, state, useAnimation, ɵBrowserAnimationBuilder */
-/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9996);
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9760);
+/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9188);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2712);
 /**
- * @license Angular v17.2.3
+ * @license Angular v17.2.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -39787,9 +39787,9 @@ const ɵPRE_STYLE = '!';
 /* harmony export */ });
 /* unused harmony exports ɵAnimation, ɵAnimationRenderer, ɵBaseAnimationRenderer, ɵNoopAnimationStyleNormalizer, ɵWebAnimationsPlayer, ɵallowPreviousPlayerStylesMerge, ɵcamelCaseToDashCase, ɵcontainsElement, ɵcreateEngine, ɵgetParentElement, ɵinvokeQuery, ɵnormalizeKeyframes, ɵvalidateStyleProperty, ɵvalidateWebAnimatableStyleProperty */
 /* harmony import */ var _angular_animations__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9684);
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /**
- * @license Angular v17.2.3
+ * @license Angular v17.2.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -44294,10 +44294,10 @@ __webpack_require__.d(__webpack_exports__, {
 
 // UNUSED EXPORTS: AbstractControl, AbstractControlDirective, AbstractFormGroupDirective, COMPOSITION_BUFFER_MODE, CheckboxControlValueAccessor, CheckboxRequiredValidator, ControlContainer, EmailValidator, FormArray, FormArrayName, FormBuilder, FormControlName, FormGroup, FormGroupDirective, FormGroupName, FormRecord, MaxLengthValidator, MaxValidator, MinLengthValidator, MinValidator, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControlStatusGroup, NgForm, NgModelGroup, NgSelectOption, NonNullableFormBuilder, NumberValueAccessor, PatternValidator, RadioControlValueAccessor, RangeValueAccessor, RequiredValidator, SelectControlValueAccessor, SelectMultipleControlValueAccessor, UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, VERSION, Validators, isFormArray, isFormControl, isFormGroup, isFormRecord, ɵInternalFormsSharedModule, ɵNgNoValidate, ɵNgSelectMultipleOption
 
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
-// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
-var common_mjs_ = __webpack_require__(9996);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
+// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
+var common_mjs_ = __webpack_require__(9188);
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/observable/from.js + 9 modules
 var from = __webpack_require__(4496);
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/Observable.js
@@ -44364,7 +44364,7 @@ function forkJoin(...args) {
 var map = __webpack_require__(4704);
 ;// CONCATENATED MODULE: ./node_modules/@angular/forms/fesm2022/forms.mjs
 /**
- * @license Angular v17.2.3
+ * @license Angular v17.2.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -51617,7 +51617,7 @@ let UntypedFormBuilder = /*#__PURE__*/(/* unused pure expression or super */ nul
 /**
  * @publicApi
  */
-const VERSION = /*#__PURE__*/new core_mjs_.Version('17.2.3');
+const VERSION = /*#__PURE__*/new core_mjs_.Version('17.2.4');
 
 /**
  * Exports the required providers and directives for template-driven forms,
@@ -51753,8 +51753,8 @@ __webpack_require__.d(__webpack_exports__, {
 
 // UNUSED EXPORTS: HighlightJS, HighlightLoader
 
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/BehaviorSubject.js
 var BehaviorSubject = __webpack_require__(6700);
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/observable/empty.js
@@ -51927,8 +51927,8 @@ var switchMap = __webpack_require__(7368);
 var tap = __webpack_require__(9212);
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/operators/catchError.js
 var catchError = __webpack_require__(9144);
-// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
-var common_mjs_ = __webpack_require__(9996);
+// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
+var common_mjs_ = __webpack_require__(9188);
 // EXTERNAL MODULE: ./node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs
 var platform_browser = __webpack_require__(4476);
 ;// CONCATENATED MODULE: ./node_modules/ngx-highlightjs/fesm2020/ngx-highlightjs.mjs
diff --git a/496.68241da2e083e6f8.js b/496.ed259136ab02d6d7.js
similarity index 98%
rename from 496.68241da2e083e6f8.js
rename to 496.ed259136ab02d6d7.js
index b8cd76a8..30ae9cf4 100644
--- a/496.68241da2e083e6f8.js
+++ b/496.ed259136ab02d6d7.js
@@ -12,8 +12,8 @@ __webpack_require__.d(__webpack_exports__, {
   ApplicationModule: () => (/* binding */ ApplicationModule)
 });
 
-// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
-var router_mjs_ = __webpack_require__(6740);
+// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
+var router_mjs_ = __webpack_require__(2988);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc.js
 var taiga_ui_addon_doc = __webpack_require__(176);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-utils.js + 76 modules
@@ -22,8 +22,8 @@ var taiga_ui_addon_doc_utils = __webpack_require__(956);
 var taiga_ui_core_components_link = __webpack_require__(1512);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-components-notification.js
 var taiga_ui_core_components_notification = __webpack_require__(8508);
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-components.js + 85 modules
 var taiga_ui_addon_doc_components = __webpack_require__(5748);
 ;// CONCATENATED MODULE: ./apps/demo/src/app/modules/application/application.component.ts
diff --git a/117.ce12bc439c209f27.js b/544.6d5b40bcd41a1141.js
similarity index 99%
rename from 117.ce12bc439c209f27.js
rename to 544.6d5b40bcd41a1141.js
index 0ccfe4f1..571db000 100644
--- a/117.ce12bc439c209f27.js
+++ b/544.6d5b40bcd41a1141.js
@@ -1,5 +1,5 @@
 "use strict";
-(self["webpackChunkdemo"] = self["webpackChunkdemo"] || []).push([[117],{
+(self["webpackChunkdemo"] = self["webpackChunkdemo"] || []).push([[544],{
 
 /***/ 3252:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
diff --git a/564.d58420721440d7d8.js b/564.f22c5bed6e8ec849.js
similarity index 99%
rename from 564.d58420721440d7d8.js
rename to 564.f22c5bed6e8ec849.js
index f0eaaffa..2b0618c0 100644
--- a/564.d58420721440d7d8.js
+++ b/564.f22c5bed6e8ec849.js
@@ -33,7 +33,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   signalUpdateFn: () => (/* binding */ signalUpdateFn)
 /* harmony export */ });
 /**
- * @license Angular v17.2.3
+ * @license Angular v17.2.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
diff --git a/668.5582bdc6c6db013e.js b/668.efda157b834021fb.js
similarity index 99%
rename from 668.5582bdc6c6db013e.js
rename to 668.efda157b834021fb.js
index d57973ae..c117a01f 100644
--- a/668.5582bdc6c6db013e.js
+++ b/668.efda157b834021fb.js
@@ -63,7 +63,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "ɵwithHttpTransferCache": () => (/* binding */ withHttpTransferCache)
 /* harmony export */ });
 /* harmony import */ var _home_runner_work_microzord_microzord_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(1528);
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2700);
 /* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3252);
 /* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(4496);
@@ -73,10 +73,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(8824);
 /* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(7368);
 /* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(9212);
-/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9996);
+/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9188);
 
 /**
- * @license Angular v17.2.3
+ * @license Angular v17.2.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
diff --git a/788.c6499f50ef2aa8f0.js b/788.044e50d2dce96c24.js
similarity index 96%
rename from 788.c6499f50ef2aa8f0.js
rename to 788.044e50d2dce96c24.js
index 9e4b19a4..c133d071 100644
--- a/788.c6499f50ef2aa8f0.js
+++ b/788.044e50d2dce96c24.js
@@ -12,16 +12,16 @@ __webpack_require__.d(__webpack_exports__, {
   AngularChildModule: () => (/* binding */ AngularChildModule)
 });
 
-// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
-var router_mjs_ = __webpack_require__(6740);
+// EXTERNAL MODULE: consume shared module (default) @angular/router@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/router/fesm2022/router.mjs)
+var router_mjs_ = __webpack_require__(2988);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc.js
 var taiga_ui_addon_doc = __webpack_require__(176);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-utils.js + 76 modules
 var taiga_ui_addon_doc_utils = __webpack_require__(956);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-components-link.js
 var taiga_ui_core_components_link = __webpack_require__(1512);
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/@taiga-ui/addon-doc/fesm2015/taiga-ui-addon-doc-components.js + 85 modules
 var taiga_ui_addon_doc_components = __webpack_require__(5748);
 ;// CONCATENATED MODULE: ./apps/demo/src/app/modules/angular-child/angular-child.component.ts
diff --git a/921.a8eefa96abee4829.js b/921.512d363de1bb97a0.js
similarity index 99%
rename from 921.a8eefa96abee4829.js
rename to 921.512d363de1bb97a0.js
index 7e085074..edf312e9 100644
--- a/921.a8eefa96abee4829.js
+++ b/921.512d363de1bb97a0.js
@@ -203,8 +203,8 @@ __webpack_require__.d(__webpack_exports__, {
   "ɵloadChildren": () => (/* binding */ loadChildren)
 });
 
-// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
-var core_mjs_ = __webpack_require__(9760);
+// EXTERNAL MODULE: consume shared module (default) @angular/core@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/core/fesm2022/core.mjs)
+var core_mjs_ = __webpack_require__(2712);
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/util/isObservable.js
 var isObservable = __webpack_require__(1116);
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/observable/from.js + 9 modules
@@ -324,8 +324,8 @@ class ConnectableObservable extends Observable/* Observable */._ {
 //# sourceMappingURL=ConnectableObservable.js.map
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/Subject.js + 1 modules
 var Subject = __webpack_require__(5657);
-// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.3 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
-var common_mjs_ = __webpack_require__(9996);
+// EXTERNAL MODULE: consume shared module (default) @angular/common@=17.2.4 (strict) (singleton) (fallback: ./node_modules/@angular/common/fesm2022/common.mjs)
+var common_mjs_ = __webpack_require__(9188);
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/operators/map.js
 var map = __webpack_require__(4704);
 // EXTERNAL MODULE: ./node_modules/rxjs/dist/esm/internal/operators/switchMap.js
@@ -422,7 +422,7 @@ var mergeAll = __webpack_require__(267);
 var platform_browser = __webpack_require__(4476);
 ;// CONCATENATED MODULE: ./node_modules/@angular/router/fesm2022/router.mjs
 /**
- * @license Angular v17.2.3
+ * @license Angular v17.2.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -7661,7 +7661,7 @@ function mapToResolve(provider) {
 /**
  * @publicApi
  */
-const VERSION = /*#__PURE__*/new core_mjs_.Version('17.2.3');
+const VERSION = /*#__PURE__*/new core_mjs_.Version('17.2.4');
 
 /**
  * @module
diff --git a/common.96e117cc0334d26f.js b/common.271fcae6fbfd3fb9.js
similarity index 97%
rename from common.96e117cc0334d26f.js
rename to common.271fcae6fbfd3fb9.js
index 6c868674..04a1d678 100644
--- a/common.96e117cc0334d26f.js
+++ b/common.271fcae6fbfd3fb9.js
@@ -8,9 +8,9 @@
 /* harmony export */   TuiAddonDocModule: () => (/* binding */ TuiAddonDocModule)
 /* harmony export */ });
 /* unused harmony export tuiGetDocModules */
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9760);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2712);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6740);
+/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2988);
 /* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_angular_router__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _taiga_ui_addon_doc_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5748);
 
diff --git a/index.html b/index.html
index 4ab9b00f..9309f672 100644
--- a/index.html
+++ b/index.html
@@ -16,5 +16,5 @@
         0 0.25rem 0.375rem rgba(0, 0, 0, 0.05);--tui-shadow-modal:0 1.125rem 1.875rem rgba(0, 0, 0, 0.48);--tui-shadow-sidebar:0.25rem 0 1.5rem rgba(0, 0, 0, 0.12);--tui-shadow-navigation:0 0.125rem 1rem rgba(0, 0, 0, 0.08);--tui-shadow-sheet:0 -1rem 1.75rem rgba(0, 0, 0, 0.24)}@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk7PFO_F.ttf) format('truetype')}@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk59E-_F.ttf) format('truetype')}</style><link rel="stylesheet" href="styles.57c464df970ded2d.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.57c464df970ded2d.css"></noscript></head>
   <body>
     <microzord-root></microzord-root>
-  <script src="polyfills.735bdec294512a56.js" type="module"></script><script src="main.836bbb2469daee7f.js" type="module"></script></body>
+  <script src="polyfills.aa0414687ef9cad3.js" type="module"></script><script src="main.bbc2ac491f3d09bd.js" type="module"></script></body>
 </html>
diff --git a/main.836bbb2469daee7f.js b/main.bbc2ac491f3d09bd.js
similarity index 92%
rename from main.836bbb2469daee7f.js
rename to main.bbc2ac491f3d09bd.js
index d144a5b1..66380617 100644
--- a/main.836bbb2469daee7f.js
+++ b/main.bbc2ac491f3d09bd.js
@@ -7,7 +7,7 @@
 
 
 
-Promise.all(/* import() */[__webpack_require__.e(760), __webpack_require__.e(117), __webpack_require__.e(200), __webpack_require__.e(48)]).then(__webpack_require__.bind(__webpack_require__, 3048));
+Promise.all(/* import() */[__webpack_require__.e(332), __webpack_require__.e(544), __webpack_require__.e(200), __webpack_require__.e(48)]).then(__webpack_require__.bind(__webpack_require__, 3048));
 
 /***/ })
 
@@ -116,7 +116,7 @@ Promise.all(/* import() */[__webpack_require__.e(760), __webpack_require__.e(117
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "" + (chunkId === 312 ? "common" : chunkId) + "." + {"28":"458e5126c3a20a10","48":"1b782ecbcafea8ae","107":"86415ee5e99c7048","117":"ce12bc439c209f27","128":"7a8e34f227ffc98b","140":"65d4ea1811d05d20","152":"66e276e2814724c9","200":"c286a8ff10f53036","312":"96e117cc0334d26f","328":"a5ffce1a23c2ad0a","344":"78ed12cfdefc0d4a","354":"6404b1300e20d031","368":"aa0b10126e8c452a","408":"a746f9c09272b2ce","496":"68241da2e083e6f8","564":"d58420721440d7d8","668":"5582bdc6c6db013e","712":"ac5ff7672f602107","760":"546152e9d3631ebe","788":"c6499f50ef2aa8f0","876":"97ac92cba93a51c6","921":"a8eefa96abee4829"}[chunkId] + ".js";
+/******/ 			return "" + (chunkId === 312 ? "common" : chunkId) + "." + {"28":"9478eaeaa12e7440","48":"f610b1c9cabd23c2","107":"dbecfa80f642d9a0","128":"9a5623dc1ea48bb6","140":"1c9749b3047f9e2a","152":"d80c6aaa39c2fca8","200":"ae251f23910b5286","312":"271fcae6fbfd3fb9","328":"a5ffce1a23c2ad0a","332":"084fc264f90a2508","344":"78ed12cfdefc0d4a","354":"80b7537ac05ad4e7","368":"95d75f4585fe13d1","408":"a746f9c09272b2ce","496":"ed259136ab02d6d7","544":"6d5b40bcd41a1141","564":"f22c5bed6e8ec849","668":"efda157b834021fb","712":"ac5ff7672f602107","788":"044e50d2dce96c24","876":"97ac92cba93a51c6","921":"512d363de1bb97a0"}[chunkId] + ".js";
 /******/ 		};
 /******/ 	})();
 /******/ 	
@@ -237,11 +237,11 @@ Promise.all(/* import() */[__webpack_require__.e(760), __webpack_require__.e(117
 /******/ 			var promises = [];
 /******/ 			switch(name) {
 /******/ 				case "default": {
-/******/ 					register("@angular/common/http", "17.2.3", () => (Promise.all([__webpack_require__.e(760), __webpack_require__.e(117), __webpack_require__.e(668)]).then(() => (() => (__webpack_require__(7048))))));
-/******/ 					register("@angular/common", "17.2.3", () => (Promise.all([__webpack_require__.e(760), __webpack_require__.e(368)]).then(() => (() => (__webpack_require__(1368))))));
-/******/ 					register("@angular/core/primitives/signals", "17.2.3", () => (__webpack_require__.e(564).then(() => (() => (__webpack_require__(564))))));
-/******/ 					register("@angular/core", "17.2.3", () => (__webpack_require__.e(107).then(() => (() => (__webpack_require__(107))))));
-/******/ 					register("@angular/router", "17.2.3", () => (Promise.all([__webpack_require__.e(760), __webpack_require__.e(117), __webpack_require__.e(921), __webpack_require__.e(200)]).then(() => (() => (__webpack_require__(7921))))));
+/******/ 					register("@angular/common/http", "17.2.4", () => (Promise.all([__webpack_require__.e(332), __webpack_require__.e(544), __webpack_require__.e(668)]).then(() => (() => (__webpack_require__(7048))))));
+/******/ 					register("@angular/common", "17.2.4", () => (Promise.all([__webpack_require__.e(332), __webpack_require__.e(368)]).then(() => (() => (__webpack_require__(1368))))));
+/******/ 					register("@angular/core/primitives/signals", "17.2.4", () => (__webpack_require__.e(564).then(() => (() => (__webpack_require__(564))))));
+/******/ 					register("@angular/core", "17.2.4", () => (__webpack_require__.e(107).then(() => (() => (__webpack_require__(107))))));
+/******/ 					register("@angular/router", "17.2.4", () => (Promise.all([__webpack_require__.e(332), __webpack_require__.e(544), __webpack_require__.e(921), __webpack_require__.e(200)]).then(() => (() => (__webpack_require__(7921))))));
 /******/ 				}
 /******/ 				break;
 /******/ 			}
@@ -421,28 +421,28 @@ Promise.all(/* import() */[__webpack_require__.e(760), __webpack_require__.e(117
 /******/ 		});
 /******/ 		var installedModules = {};
 /******/ 		var moduleToHandlerMapping = {
-/******/ 			9760: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/core", [4,17,2,3], () => (__webpack_require__.e(107).then(() => (() => (__webpack_require__(107))))))),
-/******/ 			9996: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/common", [4,17,2,3], () => (__webpack_require__.e(368).then(() => (() => (__webpack_require__(1368))))))),
-/******/ 			4380: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/common/http", [4,17,2,3], () => (__webpack_require__.e(668).then(() => (() => (__webpack_require__(7048))))))),
-/******/ 			6740: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/router", [4,17,2,3], () => (__webpack_require__.e(921).then(() => (() => (__webpack_require__(7921))))))),
-/******/ 			6008: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/core/primitives/signals", [4,17,2,3], () => (__webpack_require__.e(564).then(() => (() => (__webpack_require__(564)))))))
+/******/ 			2712: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/core", [4,17,2,4], () => (__webpack_require__.e(107).then(() => (() => (__webpack_require__(107))))))),
+/******/ 			9188: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/common", [4,17,2,4], () => (__webpack_require__.e(368).then(() => (() => (__webpack_require__(1368))))))),
+/******/ 			1348: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/common/http", [4,17,2,4], () => (__webpack_require__.e(668).then(() => (() => (__webpack_require__(7048))))))),
+/******/ 			2988: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/router", [4,17,2,4], () => (__webpack_require__.e(921).then(() => (() => (__webpack_require__(7921))))))),
+/******/ 			536: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/core/primitives/signals", [4,17,2,4], () => (__webpack_require__.e(564).then(() => (() => (__webpack_require__(564)))))))
 /******/ 		};
 /******/ 		// no consumes in initial chunks
 /******/ 		var chunkMapping = {
 /******/ 			"48": [
-/******/ 				6740
+/******/ 				2988
 /******/ 			],
 /******/ 			"107": [
-/******/ 				6008
-/******/ 			],
-/******/ 			"117": [
-/******/ 				9996
+/******/ 				536
 /******/ 			],
 /******/ 			"200": [
-/******/ 				4380
+/******/ 				1348
+/******/ 			],
+/******/ 			"332": [
+/******/ 				2712
 /******/ 			],
-/******/ 			"760": [
-/******/ 				9760
+/******/ 			"544": [
+/******/ 				9188
 /******/ 			]
 /******/ 		};
 /******/ 		var startedInstallModules = {};
@@ -498,7 +498,7 @@ Promise.all(/* import() */[__webpack_require__.e(760), __webpack_require__.e(117
 /******/ 					if(installedChunkData) {
 /******/ 						promises.push(installedChunkData[2]);
 /******/ 					} else {
-/******/ 						if(760 != chunkId) {
+/******/ 						if(332 != chunkId) {
 /******/ 							// setup Promise in chunk cache
 /******/ 							var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
 /******/ 							promises.push(installedChunkData[2] = promise);
diff --git a/polyfills.735bdec294512a56.js b/polyfills.aa0414687ef9cad3.js
similarity index 98%
rename from polyfills.735bdec294512a56.js
rename to polyfills.aa0414687ef9cad3.js
index 19e0842c..5886aed9 100644
--- a/polyfills.735bdec294512a56.js
+++ b/polyfills.aa0414687ef9cad3.js
@@ -2838,7 +2838,7 @@ Zone.__load_patch('queueMicrotask', (global, Zone, api) => {
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "" + chunkId + "." + {"107":"86415ee5e99c7048","117":"ce12bc439c209f27","200":"c286a8ff10f53036","368":"aa0b10126e8c452a","564":"d58420721440d7d8","668":"5582bdc6c6db013e","760":"546152e9d3631ebe","921":"a8eefa96abee4829"}[chunkId] + ".js";
+/******/ 			return "" + chunkId + "." + {"107":"dbecfa80f642d9a0","200":"ae251f23910b5286","332":"084fc264f90a2508","368":"95d75f4585fe13d1","544":"6d5b40bcd41a1141","564":"f22c5bed6e8ec849","668":"efda157b834021fb","921":"512d363de1bb97a0"}[chunkId] + ".js";
 /******/ 		};
 /******/ 	})();
 /******/ 	
@@ -2959,11 +2959,11 @@ Zone.__load_patch('queueMicrotask', (global, Zone, api) => {
 /******/ 			var promises = [];
 /******/ 			switch(name) {
 /******/ 				case "default": {
-/******/ 					register("@angular/common/http", "17.2.3", () => (Promise.all([__webpack_require__.e(760), __webpack_require__.e(117), __webpack_require__.e(668)]).then(() => (() => (__webpack_require__(7048))))));
-/******/ 					register("@angular/common", "17.2.3", () => (Promise.all([__webpack_require__.e(760), __webpack_require__.e(368)]).then(() => (() => (__webpack_require__(1368))))));
-/******/ 					register("@angular/core/primitives/signals", "17.2.3", () => (__webpack_require__.e(564).then(() => (() => (__webpack_require__(564))))));
-/******/ 					register("@angular/core", "17.2.3", () => (__webpack_require__.e(107).then(() => (() => (__webpack_require__(107))))));
-/******/ 					register("@angular/router", "17.2.3", () => (Promise.all([__webpack_require__.e(760), __webpack_require__.e(117), __webpack_require__.e(921), __webpack_require__.e(200)]).then(() => (() => (__webpack_require__(7921))))));
+/******/ 					register("@angular/common/http", "17.2.4", () => (Promise.all([__webpack_require__.e(332), __webpack_require__.e(544), __webpack_require__.e(668)]).then(() => (() => (__webpack_require__(7048))))));
+/******/ 					register("@angular/common", "17.2.4", () => (Promise.all([__webpack_require__.e(332), __webpack_require__.e(368)]).then(() => (() => (__webpack_require__(1368))))));
+/******/ 					register("@angular/core/primitives/signals", "17.2.4", () => (__webpack_require__.e(564).then(() => (() => (__webpack_require__(564))))));
+/******/ 					register("@angular/core", "17.2.4", () => (__webpack_require__.e(107).then(() => (() => (__webpack_require__(107))))));
+/******/ 					register("@angular/router", "17.2.4", () => (Promise.all([__webpack_require__.e(332), __webpack_require__.e(544), __webpack_require__.e(921), __webpack_require__.e(200)]).then(() => (() => (__webpack_require__(7921))))));
 /******/ 				}
 /******/ 				break;
 /******/ 			}
@@ -3143,24 +3143,24 @@ Zone.__load_patch('queueMicrotask', (global, Zone, api) => {
 /******/ 		});
 /******/ 		var installedModules = {};
 /******/ 		var moduleToHandlerMapping = {
-/******/ 			9760: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/core", [4,17,2,3], () => (__webpack_require__.e(107).then(() => (() => (__webpack_require__(107))))))),
-/******/ 			9996: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/common", [4,17,2,3], () => (__webpack_require__.e(368).then(() => (() => (__webpack_require__(1368))))))),
-/******/ 			6008: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/core/primitives/signals", [4,17,2,3], () => (__webpack_require__.e(564).then(() => (() => (__webpack_require__(564))))))),
-/******/ 			4380: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/common/http", [4,17,2,3], () => (__webpack_require__.e(668).then(() => (() => (__webpack_require__(7048)))))))
+/******/ 			2712: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/core", [4,17,2,4], () => (__webpack_require__.e(107).then(() => (() => (__webpack_require__(107))))))),
+/******/ 			9188: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/common", [4,17,2,4], () => (__webpack_require__.e(368).then(() => (() => (__webpack_require__(1368))))))),
+/******/ 			536: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/core/primitives/signals", [4,17,2,4], () => (__webpack_require__.e(564).then(() => (() => (__webpack_require__(564))))))),
+/******/ 			1348: () => (loadStrictSingletonVersionCheckFallback("default", "@angular/common/http", [4,17,2,4], () => (__webpack_require__.e(668).then(() => (() => (__webpack_require__(7048)))))))
 /******/ 		};
 /******/ 		// no consumes in initial chunks
 /******/ 		var chunkMapping = {
 /******/ 			"107": [
-/******/ 				6008
-/******/ 			],
-/******/ 			"117": [
-/******/ 				9996
+/******/ 				536
 /******/ 			],
 /******/ 			"200": [
-/******/ 				4380
+/******/ 				1348
+/******/ 			],
+/******/ 			"332": [
+/******/ 				2712
 /******/ 			],
-/******/ 			"760": [
-/******/ 				9760
+/******/ 			"544": [
+/******/ 				9188
 /******/ 			]
 /******/ 		};
 /******/ 		var startedInstallModules = {};
@@ -3216,7 +3216,7 @@ Zone.__load_patch('queueMicrotask', (global, Zone, api) => {
 /******/ 					if(installedChunkData) {
 /******/ 						promises.push(installedChunkData[2]);
 /******/ 					} else {
-/******/ 						if(760 != chunkId) {
+/******/ 						if(332 != chunkId) {
 /******/ 							// setup Promise in chunk cache
 /******/ 							var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
 /******/ 							promises.push(installedChunkData[2] = promise);