diff --git a/.ng-dev/format.mts b/.ng-dev/format.mts
index 2510185df46da..f19e28de734e9 100644
--- a/.ng-dev/format.mts
+++ b/.ng-dev/format.mts
@@ -18,7 +18,7 @@ export const format: FormatConfig = {
       'packages/benchpress/**/*.{js,ts}',
       'packages/common/**/*.{js,ts}',
       'packages/compiler/**/*.{js,ts}',
-      'packages/core/primitives/**/*.{js,ts}',
+      'packages/core/**/*.{js,ts}',
       'packages/docs/**/*.{js,ts}',
       'packages/elements/**/*.{js,ts}',
       'packages/examples/**/*.{js,ts}',
@@ -40,6 +40,11 @@ export const format: FormatConfig = {
       // not be modified.
       '!third_party/**',
       '!.yarn/**',
+      // Do not format the locale files which are checked-in for Google3, but generated using
+      // the `generate-locales-tool` from `packages/common/locales`.
+      '!packages/core/src/i18n/locale_en.ts',
+      '!packages/common/locales/closure-locale.ts',
+      '!packages/common/src/i18n/currencies.ts',
     ],
   },
   'clang-format': {
@@ -77,7 +82,7 @@ export const format: FormatConfig = {
       '!packages/benchpress/**/*.{js,ts}',
       '!packages/common/**/*.{js,ts}',
       '!packages/compiler/**/*.{js,ts}',
-      '!packages/core/primitives/**/*.{js,ts}',
+      '!packages/core/**/*.{js,ts}',
       '!packages/docs/**/*.{js,ts}',
       '!packages/elements/**/*.{js,ts}',
       '!packages/examples/**/*.{js,ts}',
diff --git a/goldens/public-api/core/index.md b/goldens/public-api/core/index.md
index 529eaf6133525..dc04a3bb73079 100644
--- a/goldens/public-api/core/index.md
+++ b/goldens/public-api/core/index.md
@@ -1205,7 +1205,7 @@ export class NgProbeToken {
 
 // @public
 export class NgZone {
-    constructor({ enableLongStackTrace, shouldCoalesceEventChangeDetection, shouldCoalesceRunChangeDetection }: {
+    constructor({ enableLongStackTrace, shouldCoalesceEventChangeDetection, shouldCoalesceRunChangeDetection, }: {
         enableLongStackTrace?: boolean | undefined;
         shouldCoalesceEventChangeDetection?: boolean | undefined;
         shouldCoalesceRunChangeDetection?: boolean | undefined;
diff --git a/packages/core/rxjs-interop/src/output_from_observable.ts b/packages/core/rxjs-interop/src/output_from_observable.ts
index e8617e3212015..2e3e1b44a900e 100644
--- a/packages/core/rxjs-interop/src/output_from_observable.ts
+++ b/packages/core/rxjs-interop/src/output_from_observable.ts
@@ -6,7 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {assertInInjectionContext, DestroyRef, inject, OutputOptions, OutputRef, OutputRefSubscription, ɵRuntimeError, ɵRuntimeErrorCode} from '@angular/core';
+import {
+  assertInInjectionContext,
+  DestroyRef,
+  inject,
+  OutputOptions,
+  OutputRef,
+  OutputRefSubscription,
+  ɵRuntimeError,
+  ɵRuntimeErrorCode,
+} from '@angular/core';
 import {Observable} from 'rxjs';
 
 import {takeUntilDestroyed} from './take_until_destroyed';
@@ -31,15 +40,16 @@ class OutputFromObservableRef<T> implements OutputRef<T> {
   subscribe(callbackFn: (value: T) => void): OutputRefSubscription {
     if (this.destroyed) {
       throw new ɵRuntimeError(
-          ɵRuntimeErrorCode.OUTPUT_REF_DESTROYED,
-          ngDevMode &&
-              'Unexpected subscription to destroyed `OutputRef`. ' +
-                  'The owning directive/component is destroyed.');
+        ɵRuntimeErrorCode.OUTPUT_REF_DESTROYED,
+        ngDevMode &&
+          'Unexpected subscription to destroyed `OutputRef`. ' +
+            'The owning directive/component is destroyed.',
+      );
     }
 
     // Stop yielding more values when the directive/component is already destroyed.
     const subscription = this.source.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
-      next: value => callbackFn(value),
+      next: (value) => callbackFn(value),
     });
 
     return {
@@ -73,7 +83,9 @@ class OutputFromObservableRef<T> implements OutputRef<T> {
  * @developerPreview
  */
 export function outputFromObservable<T>(
-    observable: Observable<T>, opts?: OutputOptions): OutputRef<T> {
+  observable: Observable<T>,
+  opts?: OutputOptions,
+): OutputRef<T> {
   ngDevMode && assertInInjectionContext(outputFromObservable);
   return new OutputFromObservableRef<T>(observable);
 }
diff --git a/packages/core/rxjs-interop/src/output_to_observable.ts b/packages/core/rxjs-interop/src/output_to_observable.ts
index 0a94ea0491221..b3e481a06d400 100644
--- a/packages/core/rxjs-interop/src/output_to_observable.ts
+++ b/packages/core/rxjs-interop/src/output_to_observable.ts
@@ -20,13 +20,13 @@ import {Observable} from 'rxjs';
 export function outputToObservable<T>(ref: OutputRef<T>): Observable<T> {
   const destroyRef = ɵgetOutputDestroyRef(ref);
 
-  return new Observable<T>(observer => {
+  return new Observable<T>((observer) => {
     // Complete the observable upon directive/component destroy.
     // Note: May be `undefined` if an `EventEmitter` is declared outside
     // of an injection context.
     destroyRef?.onDestroy(() => observer.complete());
 
-    const subscription = ref.subscribe(v => observer.next(v));
+    const subscription = ref.subscribe((v) => observer.next(v));
     return () => subscription.unsubscribe();
   });
 }
diff --git a/packages/core/rxjs-interop/src/take_until_destroyed.ts b/packages/core/rxjs-interop/src/take_until_destroyed.ts
index 73a71b7ad70d1..ab493802dc88b 100644
--- a/packages/core/rxjs-interop/src/take_until_destroyed.ts
+++ b/packages/core/rxjs-interop/src/take_until_destroyed.ts
@@ -26,7 +26,7 @@ export function takeUntilDestroyed<T>(destroyRef?: DestroyRef): MonoTypeOperator
     destroyRef = inject(DestroyRef);
   }
 
-  const destroyed$ = new Observable<void>(observer => {
+  const destroyed$ = new Observable<void>((observer) => {
     const unregisterFn = destroyRef!.onDestroy(observer.next.bind(observer));
     return unregisterFn;
   });
diff --git a/packages/core/rxjs-interop/src/to_observable.ts b/packages/core/rxjs-interop/src/to_observable.ts
index 1e1ecd810937e..6851dd1626591 100644
--- a/packages/core/rxjs-interop/src/to_observable.ts
+++ b/packages/core/rxjs-interop/src/to_observable.ts
@@ -6,7 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {assertInInjectionContext, DestroyRef, effect, inject, Injector, Signal, untracked} from '@angular/core';
+import {
+  assertInInjectionContext,
+  DestroyRef,
+  effect,
+  inject,
+  Injector,
+  Signal,
+  untracked,
+} from '@angular/core';
 import {Observable, ReplaySubject} from 'rxjs';
 
 /**
@@ -33,24 +41,24 @@ export interface ToObservableOptions {
  *
  * @developerPreview
  */
-export function toObservable<T>(
-    source: Signal<T>,
-    options?: ToObservableOptions,
-    ): Observable<T> {
+export function toObservable<T>(source: Signal<T>, options?: ToObservableOptions): Observable<T> {
   !options?.injector && assertInInjectionContext(toObservable);
   const injector = options?.injector ?? inject(Injector);
   const subject = new ReplaySubject<T>(1);
 
-  const watcher = effect(() => {
-    let value: T;
-    try {
-      value = source();
-    } catch (err) {
-      untracked(() => subject.error(err));
-      return;
-    }
-    untracked(() => subject.next(value));
-  }, {injector, manualCleanup: true});
+  const watcher = effect(
+    () => {
+      let value: T;
+      try {
+        value = source();
+      } catch (err) {
+        untracked(() => subject.error(err));
+        return;
+      }
+      untracked(() => subject.next(value));
+    },
+    {injector, manualCleanup: true},
+  );
 
   injector.get(DestroyRef).onDestroy(() => {
     watcher.destroy();
diff --git a/packages/core/rxjs-interop/src/to_signal.ts b/packages/core/rxjs-interop/src/to_signal.ts
index cd4defa5a625a..260aa1da9b14f 100644
--- a/packages/core/rxjs-interop/src/to_signal.ts
+++ b/packages/core/rxjs-interop/src/to_signal.ts
@@ -6,7 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {assertInInjectionContext, assertNotInReactiveContext, computed, DestroyRef, inject, Injector, signal, Signal, WritableSignal, ɵRuntimeError, ɵRuntimeErrorCode} from '@angular/core';
+import {
+  assertInInjectionContext,
+  assertNotInReactiveContext,
+  computed,
+  DestroyRef,
+  inject,
+  Injector,
+  signal,
+  Signal,
+  WritableSignal,
+  ɵRuntimeError,
+  ɵRuntimeErrorCode,
+} from '@angular/core';
 import {Observable, Subscribable} from 'rxjs';
 
 /**
@@ -61,23 +73,27 @@ export interface ToSignalOptions {
 }
 
 // Base case: no options -> `undefined` in the result type.
-export function toSignal<T>(source: Observable<T>|Subscribable<T>): Signal<T|undefined>;
+export function toSignal<T>(source: Observable<T> | Subscribable<T>): Signal<T | undefined>;
 // Options with `undefined` initial value and no `requiredSync` -> `undefined`.
 export function toSignal<T>(
-    source: Observable<T>|Subscribable<T>,
-    options: ToSignalOptions&{initialValue?: undefined, requireSync?: false}): Signal<T|undefined>;
+  source: Observable<T> | Subscribable<T>,
+  options: ToSignalOptions & {initialValue?: undefined; requireSync?: false},
+): Signal<T | undefined>;
 // Options with `null` initial value -> `null`.
 export function toSignal<T>(
-    source: Observable<T>|Subscribable<T>,
-    options: ToSignalOptions&{initialValue?: null, requireSync?: false}): Signal<T|null>;
+  source: Observable<T> | Subscribable<T>,
+  options: ToSignalOptions & {initialValue?: null; requireSync?: false},
+): Signal<T | null>;
 // Options with `undefined` initial value and `requiredSync` -> strict result type.
 export function toSignal<T>(
-    source: Observable<T>|Subscribable<T>,
-    options: ToSignalOptions&{initialValue?: undefined, requireSync: true}): Signal<T>;
+  source: Observable<T> | Subscribable<T>,
+  options: ToSignalOptions & {initialValue?: undefined; requireSync: true},
+): Signal<T>;
 // Options with a more specific initial value type.
 export function toSignal<T, const U extends T>(
-    source: Observable<T>|Subscribable<T>,
-    options: ToSignalOptions&{initialValue: U, requireSync?: false}): Signal<T|U>;
+  source: Observable<T> | Subscribable<T>,
+  options: ToSignalOptions & {initialValue: U; requireSync?: false},
+): Signal<T | U>;
 
 /**
  * Get the current value of an `Observable` as a reactive `Signal`.
@@ -104,28 +120,31 @@ export function toSignal<T, const U extends T>(
  * @developerPreview
  */
 export function toSignal<T, U = undefined>(
-    source: Observable<T>|Subscribable<T>,
-    options?: ToSignalOptions&{initialValue?: U}): Signal<T|U> {
+  source: Observable<T> | Subscribable<T>,
+  options?: ToSignalOptions & {initialValue?: U},
+): Signal<T | U> {
   ngDevMode &&
-      assertNotInReactiveContext(
-          toSignal,
-          'Invoking `toSignal` causes new subscriptions every time. ' +
-              'Consider moving `toSignal` outside of the reactive context and read the signal value where needed.');
+    assertNotInReactiveContext(
+      toSignal,
+      'Invoking `toSignal` causes new subscriptions every time. ' +
+        'Consider moving `toSignal` outside of the reactive context and read the signal value where needed.',
+    );
 
   const requiresCleanup = !options?.manualCleanup;
   requiresCleanup && !options?.injector && assertInInjectionContext(toSignal);
-  const cleanupRef =
-      requiresCleanup ? options?.injector?.get(DestroyRef) ?? inject(DestroyRef) : null;
+  const cleanupRef = requiresCleanup
+    ? options?.injector?.get(DestroyRef) ?? inject(DestroyRef)
+    : null;
 
   // Note: T is the Observable value type, and U is the initial value type. They don't have to be
   // the same - the returned signal gives values of type `T`.
-  let state: WritableSignal<State<T|U>>;
+  let state: WritableSignal<State<T | U>>;
   if (options?.requireSync) {
     // Initially the signal is in a `NoValue` state.
     state = signal({kind: StateKind.NoValue});
   } else {
     // If an initial value was passed, use it. Otherwise, use `undefined` as the initial value.
-    state = signal<State<T|U>>({kind: StateKind.Value, value: options?.initialValue as U});
+    state = signal<State<T | U>>({kind: StateKind.Value, value: options?.initialValue as U});
   }
 
   // Note: This code cannot run inside a reactive context (see assertion above). If we'd support
@@ -135,8 +154,8 @@ export function toSignal<T, U = undefined>(
   // subscription. Additional context (related to async pipe):
   // https://github.com/angular/angular/pull/50522.
   const sub = source.subscribe({
-    next: value => state.set({kind: StateKind.Value, value}),
-    error: error => {
+    next: (value) => state.set({kind: StateKind.Value, value}),
+    error: (error) => {
       if (options?.rejectErrors) {
         // Kick the error back to RxJS. It will be caught and rethrown in a macrotask, which causes
         // the error to end up as an uncaught exception.
@@ -150,8 +169,9 @@ export function toSignal<T, U = undefined>(
 
   if (ngDevMode && options?.requireSync && state().kind === StateKind.NoValue) {
     throw new ɵRuntimeError(
-        ɵRuntimeErrorCode.REQUIRE_SYNC_WITHOUT_SYNC_EMIT,
-        '`toSignal()` called with `requireSync` but `Observable` did not emit synchronously.');
+      ɵRuntimeErrorCode.REQUIRE_SYNC_WITHOUT_SYNC_EMIT,
+      '`toSignal()` called with `requireSync` but `Observable` did not emit synchronously.',
+    );
   }
 
   // Unsubscribe when the current context is destroyed, if requested.
@@ -170,8 +190,9 @@ export function toSignal<T, U = undefined>(
         // This shouldn't really happen because the error is thrown on creation.
         // TODO(alxhub): use a RuntimeError when we finalize the error semantics
         throw new ɵRuntimeError(
-            ɵRuntimeErrorCode.REQUIRE_SYNC_WITHOUT_SYNC_EMIT,
-            '`toSignal()` called with `requireSync` but `Observable` did not emit synchronously.');
+          ɵRuntimeErrorCode.REQUIRE_SYNC_WITHOUT_SYNC_EMIT,
+          '`toSignal()` called with `requireSync` but `Observable` did not emit synchronously.',
+        );
     }
   });
 }
@@ -196,4 +217,4 @@ interface ErrorState {
   error: unknown;
 }
 
-type State<T> = NoValueState|ValueState<T>|ErrorState;
+type State<T> = NoValueState | ValueState<T> | ErrorState;
diff --git a/packages/core/rxjs-interop/test/output_from_observable_spec.ts b/packages/core/rxjs-interop/test/output_from_observable_spec.ts
index 54f07d961ebd2..4d9904733b188 100644
--- a/packages/core/rxjs-interop/test/output_from_observable_spec.ts
+++ b/packages/core/rxjs-interop/test/output_from_observable_spec.ts
@@ -14,14 +14,14 @@ import {outputFromObservable} from '../src';
 
 describe('outputFromObservable()', () => {
   // Safety clean-up as we are patching `onUnhandledError` in this test.
-  afterEach(() => config.onUnhandledError = null);
+  afterEach(() => (config.onUnhandledError = null));
 
   it('should support emitting values via BehaviorSubject', () => {
     const subject = new BehaviorSubject(0);
     const output = TestBed.runInInjectionContext(() => outputFromObservable(subject));
 
     const values: number[] = [];
-    output.subscribe(v => values.push(v));
+    output.subscribe((v) => values.push(v));
 
     expect(values).toEqual([0]);
 
@@ -38,7 +38,7 @@ describe('outputFromObservable()', () => {
     subject.next(1);
 
     const values: number[] = [];
-    output.subscribe(v => values.push(v));
+    output.subscribe((v) => values.push(v));
 
     expect(values).toEqual([1]);
 
@@ -55,7 +55,7 @@ describe('outputFromObservable()', () => {
     subject.next(1);
 
     const values: number[] = [];
-    output.subscribe(v => values.push(v));
+    output.subscribe((v) => values.push(v));
 
     expect(values).toEqual([]);
 
@@ -72,7 +72,7 @@ describe('outputFromObservable()', () => {
     emitter.next(1);
 
     const values: number[] = [];
-    output.subscribe(v => values.push(v));
+    output.subscribe((v) => values.push(v));
 
     expect(values).toEqual([]);
 
@@ -89,7 +89,7 @@ describe('outputFromObservable()', () => {
 
     expect(subject.observed).toBe(false);
 
-    const subscription = output.subscribe(v => values.push(v));
+    const subscription = output.subscribe((v) => values.push(v));
     expect(subject.observed).toBe(true);
     expect(values).toEqual([]);
 
@@ -109,7 +109,7 @@ describe('outputFromObservable()', () => {
 
     expect(subject.observed).toBe(false);
 
-    output.subscribe(v => values.push(v));
+    output.subscribe((v) => values.push(v));
     expect(subject.observed).toBe(true);
     expect(values).toEqual([]);
 
@@ -130,17 +130,17 @@ describe('outputFromObservable()', () => {
     // initiate destroy.
     TestBed.resetTestingModule();
 
-    expect(() => output.subscribe(() => {}))
-        .toThrowError(/Unexpected subscription to destroyed `OutputRef`/);
+    expect(() => output.subscribe(() => {})).toThrowError(
+      /Unexpected subscription to destroyed `OutputRef`/,
+    );
   });
 
-
   it('should be a noop when the source observable completes', () => {
     const subject = new Subject<number>();
     const outputRef = TestBed.runInInjectionContext(() => outputFromObservable(subject));
 
     const values: number[] = [];
-    outputRef.subscribe(v => values.push(v));
+    outputRef.subscribe((v) => values.push(v));
 
     subject.next(1);
     subject.next(2);
@@ -157,13 +157,13 @@ describe('outputFromObservable()', () => {
     const outputRef = TestBed.runInInjectionContext(() => outputFromObservable(subject));
 
     const values: number[] = [];
-    outputRef.subscribe(v => values.push(v));
+    outputRef.subscribe((v) => values.push(v));
 
     subject.next(1);
     subject.next(2);
     expect(values).toEqual([1, 2]);
 
-    config.onUnhandledError = err => {
+    config.onUnhandledError = (err) => {
       config.onUnhandledError = null;
 
       expect((err as Error).message).toEqual('test error message');
diff --git a/packages/core/rxjs-interop/test/output_to_observable_spec.ts b/packages/core/rxjs-interop/test/output_to_observable_spec.ts
index 73bab185ef435..1b9e415334a24 100644
--- a/packages/core/rxjs-interop/test/output_to_observable_spec.ts
+++ b/packages/core/rxjs-interop/test/output_to_observable_spec.ts
@@ -18,7 +18,7 @@ describe('outputToObservable()', () => {
     const observable = outputToObservable(outputRef);
 
     const values: number[] = [];
-    observable.subscribe({next: v => values.push(v)});
+    observable.subscribe({next: (v) => values.push(v)});
     expect(values).toEqual([]);
 
     outputRef.emit(1);
@@ -33,7 +33,7 @@ describe('outputToObservable()', () => {
 
     let completed = false;
     const subscription = observable.subscribe({
-      complete: () => completed = true,
+      complete: () => (completed = true),
     });
 
     outputRef.emit(1);
@@ -56,7 +56,7 @@ describe('outputToObservable()', () => {
       const observable = outputToObservable(outputRef);
 
       const values: number[] = [];
-      observable.subscribe({next: v => values.push(v)});
+      observable.subscribe({next: (v) => values.push(v)});
       expect(values).toEqual([]);
 
       subject.next(1);
@@ -72,7 +72,7 @@ describe('outputToObservable()', () => {
 
       let completed = false;
       const subscription = observable.subscribe({
-        complete: () => completed = true,
+        complete: () => (completed = true),
       });
 
       subject.next(1);
@@ -90,32 +90,34 @@ describe('outputToObservable()', () => {
       expect(subject.observed).toBe(false);
     });
 
-    it('may not complete the observable with an improperly ' +
-           'configured `OutputRef` without a destroy ref as source',
-       () => {
-         const outputRef = new EventEmitter<number>();
-         const observable = outputToObservable(outputRef);
-
-         let completed = false;
-         const subscription = observable.subscribe({
-           complete: () => completed = true,
-         });
-
-         outputRef.next(1);
-         outputRef.next(2);
-
-         expect(completed).toBe(false);
-         expect(subscription.closed).toBe(false);
-         expect(outputRef.observed).toBe(true);
-
-         // destroy `EnvironmentInjector`.
-         TestBed.resetTestingModule();
-
-         expect(completed)
-             .withContext('Should not be completed as there is no known time when to destroy')
-             .toBe(false);
-         expect(subscription.closed).toBe(false);
-         expect(outputRef.observed).toBe(true);
-       });
+    it(
+      'may not complete the observable with an improperly ' +
+        'configured `OutputRef` without a destroy ref as source',
+      () => {
+        const outputRef = new EventEmitter<number>();
+        const observable = outputToObservable(outputRef);
+
+        let completed = false;
+        const subscription = observable.subscribe({
+          complete: () => (completed = true),
+        });
+
+        outputRef.next(1);
+        outputRef.next(2);
+
+        expect(completed).toBe(false);
+        expect(subscription.closed).toBe(false);
+        expect(outputRef.observed).toBe(true);
+
+        // destroy `EnvironmentInjector`.
+        TestBed.resetTestingModule();
+
+        expect(completed)
+          .withContext('Should not be completed as there is no known time when to destroy')
+          .toBe(false);
+        expect(subscription.closed).toBe(false);
+        expect(outputRef.observed).toBe(true);
+      },
+    );
   });
 });
diff --git a/packages/core/rxjs-interop/test/take_until_destroyed_spec.ts b/packages/core/rxjs-interop/test/take_until_destroyed_spec.ts
index 6353f275a1001..df330109959f9 100644
--- a/packages/core/rxjs-interop/test/take_until_destroyed_spec.ts
+++ b/packages/core/rxjs-interop/test/take_until_destroyed_spec.ts
@@ -26,7 +26,7 @@ describe('takeUntilDestroyed', () => {
       },
       complete() {
         completed = true;
-      }
+      },
     });
 
     source$.next(1);
@@ -52,7 +52,7 @@ describe('takeUntilDestroyed', () => {
       },
       complete() {
         completed = true;
-      }
+      },
     });
 
     source$.next(1);
diff --git a/packages/core/rxjs-interop/test/to_observable_spec.ts b/packages/core/rxjs-interop/test/to_observable_spec.ts
index a1919ad0eb1a3..f31806e558191 100644
--- a/packages/core/rxjs-interop/test/to_observable_spec.ts
+++ b/packages/core/rxjs-interop/test/to_observable_spec.ts
@@ -6,7 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, computed, createEnvironmentInjector, EnvironmentInjector, Injector, Signal, signal} from '@angular/core';
+import {
+  Component,
+  computed,
+  createEnvironmentInjector,
+  EnvironmentInjector,
+  Injector,
+  Signal,
+  signal,
+} from '@angular/core';
 import {toObservable} from '@angular/core/rxjs-interop';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {take, toArray} from 'rxjs/operators';
@@ -19,8 +27,7 @@ describe('toObservable()', () => {
     template: '',
     standalone: true,
   })
-  class Cmp {
-  }
+  class Cmp {}
 
   beforeEach(() => {
     fixture = TestBed.createComponent(Cmp);
@@ -67,8 +74,8 @@ describe('toObservable()', () => {
     let currentError: any = null;
 
     const sub = counter$.subscribe({
-      next: value => currentValue = value,
-      error: err => currentError = err,
+      next: (value) => (currentValue = value),
+      error: (err) => (currentError = err),
     });
 
     flushEffects();
@@ -163,7 +170,7 @@ describe('toObservable()', () => {
       // Read emits. If we are still tracked in the effect, this will cause an infinite loop by
       // triggering the effect again.
       emits();
-      emits.update(v => v + 1);
+      emits.update((v) => v + 1);
     });
     flushEffects();
     expect(emits()).toBe(1);
diff --git a/packages/core/rxjs-interop/test/to_signal_spec.ts b/packages/core/rxjs-interop/test/to_signal_spec.ts
index 423323f30619f..7826436c2b743 100644
--- a/packages/core/rxjs-interop/test/to_signal_spec.ts
+++ b/packages/core/rxjs-interop/test/to_signal_spec.ts
@@ -6,85 +6,114 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component, computed, EnvironmentInjector, Injector, runInInjectionContext, Signal} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  EnvironmentInjector,
+  Injector,
+  runInInjectionContext,
+  Signal,
+} from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {TestBed} from '@angular/core/testing';
-import {BehaviorSubject, Observable, Observer, ReplaySubject, Subject, Subscribable, Unsubscribable} from 'rxjs';
+import {
+  BehaviorSubject,
+  Observable,
+  Observer,
+  ReplaySubject,
+  Subject,
+  Subscribable,
+  Unsubscribable,
+} from 'rxjs';
 
 describe('toSignal()', () => {
-  it('should reflect the last emitted value of an Observable', test(() => {
-       const counter$ = new BehaviorSubject(0);
-       const counter = toSignal(counter$);
-
-       expect(counter()).toBe(0);
-       counter$.next(1);
-       expect(counter()).toBe(1);
-       counter$.next(3);
-       expect(counter()).toBe(3);
-     }));
-
-  it('should notify when the last emitted value of an Observable changes', test(() => {
-       let seenValue: number = 0;
-       const counter$ = new BehaviorSubject(1);
-       const counter = toSignal(counter$);
-
-       expect(counter()).toBe(1);
-
-       counter$.next(2);
-       expect(counter()).toBe(2);
-     }));
-
-  it('should propagate an error returned by the Observable', test(() => {
-       const counter$ = new BehaviorSubject(1);
-       const counter = toSignal(counter$);
-
-       expect(counter()).toBe(1);
-
-       counter$.error('fail');
-       expect(counter).toThrow('fail');
-     }));
-
-  it('should unsubscribe when the current context is destroyed', test(() => {
-       const counter$ = new BehaviorSubject(0);
-       const injector = Injector.create({providers: []}) as EnvironmentInjector;
-       const counter = runInInjectionContext(injector, () => toSignal(counter$));
-
-       expect(counter()).toBe(0);
-       counter$.next(1);
-       expect(counter()).toBe(1);
-
-       // Destroying the injector should unsubscribe the Observable.
-       injector.destroy();
-
-       // The signal should have the last value observed.
-       expect(counter()).toBe(1);
-
-       // And this value should no longer be updating (unsubscribed).
-       counter$.next(2);
-       expect(counter()).toBe(1);
-     }));
+  it(
+    'should reflect the last emitted value of an Observable',
+    test(() => {
+      const counter$ = new BehaviorSubject(0);
+      const counter = toSignal(counter$);
+
+      expect(counter()).toBe(0);
+      counter$.next(1);
+      expect(counter()).toBe(1);
+      counter$.next(3);
+      expect(counter()).toBe(3);
+    }),
+  );
+
+  it(
+    'should notify when the last emitted value of an Observable changes',
+    test(() => {
+      let seenValue: number = 0;
+      const counter$ = new BehaviorSubject(1);
+      const counter = toSignal(counter$);
+
+      expect(counter()).toBe(1);
+
+      counter$.next(2);
+      expect(counter()).toBe(2);
+    }),
+  );
+
+  it(
+    'should propagate an error returned by the Observable',
+    test(() => {
+      const counter$ = new BehaviorSubject(1);
+      const counter = toSignal(counter$);
+
+      expect(counter()).toBe(1);
+
+      counter$.error('fail');
+      expect(counter).toThrow('fail');
+    }),
+  );
+
+  it(
+    'should unsubscribe when the current context is destroyed',
+    test(() => {
+      const counter$ = new BehaviorSubject(0);
+      const injector = Injector.create({providers: []}) as EnvironmentInjector;
+      const counter = runInInjectionContext(injector, () => toSignal(counter$));
+
+      expect(counter()).toBe(0);
+      counter$.next(1);
+      expect(counter()).toBe(1);
+
+      // Destroying the injector should unsubscribe the Observable.
+      injector.destroy();
 
+      // The signal should have the last value observed.
+      expect(counter()).toBe(1);
 
+      // And this value should no longer be updating (unsubscribed).
+      counter$.next(2);
+      expect(counter()).toBe(1);
+    }),
+  );
 
-  it('should unsubscribe when an explicitly provided injector is destroyed', test(() => {
-       const counter$ = new BehaviorSubject(0);
-       const injector = Injector.create({providers: []}) as EnvironmentInjector;
-       const counter = toSignal(counter$, {injector});
+  it(
+    'should unsubscribe when an explicitly provided injector is destroyed',
+    test(() => {
+      const counter$ = new BehaviorSubject(0);
+      const injector = Injector.create({providers: []}) as EnvironmentInjector;
+      const counter = toSignal(counter$, {injector});
 
-       expect(counter()).toBe(0);
-       counter$.next(1);
-       expect(counter()).toBe(1);
+      expect(counter()).toBe(0);
+      counter$.next(1);
+      expect(counter()).toBe(1);
 
-       // Destroying the injector should unsubscribe the Observable.
-       injector.destroy();
+      // Destroying the injector should unsubscribe the Observable.
+      injector.destroy();
 
-       // The signal should have the last value observed.
-       expect(counter()).toBe(1);
+      // The signal should have the last value observed.
+      expect(counter()).toBe(1);
 
-       // And this value should no longer be updating (unsubscribed).
-       counter$.next(2);
-       expect(counter()).toBe(1);
-     }));
+      // And this value should no longer be updating (unsubscribed).
+      counter$.next(2);
+      expect(counter()).toBe(1);
+    }),
+  );
 
   it('should not require an injection context when manualCleanup is passed', () => {
     const counter$ = new BehaviorSubject(0);
@@ -95,8 +124,9 @@ describe('toSignal()', () => {
   it('should not unsubscribe when manualCleanup is passed', () => {
     const counter$ = new BehaviorSubject(0);
     const injector = Injector.create({providers: []}) as EnvironmentInjector;
-    const counter =
-        runInInjectionContext(injector, () => toSignal(counter$, {manualCleanup: true}));
+    const counter = runInInjectionContext(injector, () =>
+      toSignal(counter$, {manualCleanup: true}),
+    );
 
     injector.destroy();
 
@@ -117,9 +147,9 @@ describe('toSignal()', () => {
       return counter() * 2;
     });
 
-    expect(() => doubleCounter())
-        .toThrowError(
-            /toSignal\(\) cannot be called from within a reactive context. Invoking `toSignal` causes new subscriptions every time./);
+    expect(() => doubleCounter()).toThrowError(
+      /toSignal\(\) cannot be called from within a reactive context. Invoking `toSignal` causes new subscriptions every time./,
+    );
   });
 
   it('should throw the error back to RxJS if rejectErrors is set', () => {
@@ -145,55 +175,73 @@ describe('toSignal()', () => {
   });
 
   describe('with no initial value', () => {
-    it('should return `undefined` if read before a value is emitted', test(() => {
-         const counter$ = new Subject<number>();
-         const counter = toSignal(counter$);
-
-         expect(counter()).toBeUndefined();
-         counter$.next(1);
-         expect(counter()).toBe(1);
-       }));
-
-    it('should not throw if a value is emitted before called', test(() => {
-         const counter$ = new Subject<number>();
-         const counter = toSignal(counter$);
-
-         counter$.next(1);
-         expect(() => counter()).not.toThrow();
-       }));
+    it(
+      'should return `undefined` if read before a value is emitted',
+      test(() => {
+        const counter$ = new Subject<number>();
+        const counter = toSignal(counter$);
+
+        expect(counter()).toBeUndefined();
+        counter$.next(1);
+        expect(counter()).toBe(1);
+      }),
+    );
+
+    it(
+      'should not throw if a value is emitted before called',
+      test(() => {
+        const counter$ = new Subject<number>();
+        const counter = toSignal(counter$);
+
+        counter$.next(1);
+        expect(() => counter()).not.toThrow();
+      }),
+    );
   });
 
   describe('with requireSync', () => {
-    it('should throw if created before a value is emitted', test(() => {
-         const counter$ = new Subject<number>();
-         expect(() => toSignal(counter$, {requireSync: true})).toThrow();
-       }));
-
-    it('should not throw if a value emits synchronously on creation', test(() => {
-         const counter$ = new ReplaySubject<number>(1);
-         counter$.next(1);
-         const counter = toSignal(counter$);
-         expect(counter()).toBe(1);
-       }));
+    it(
+      'should throw if created before a value is emitted',
+      test(() => {
+        const counter$ = new Subject<number>();
+        expect(() => toSignal(counter$, {requireSync: true})).toThrow();
+      }),
+    );
+
+    it(
+      'should not throw if a value emits synchronously on creation',
+      test(() => {
+        const counter$ = new ReplaySubject<number>(1);
+        counter$.next(1);
+        const counter = toSignal(counter$);
+        expect(counter()).toBe(1);
+      }),
+    );
   });
 
   describe('with an initial value', () => {
-    it('should return the initial value if called before a value is emitted', test(() => {
-         const counter$ = new Subject<number>();
-         const counter = toSignal(counter$, {initialValue: null});
-
-         expect(counter()).toBeNull();
-         counter$.next(1);
-         expect(counter()).toBe(1);
-       }));
-
-    it('should not return the initial value if called after a value is emitted', test(() => {
-         const counter$ = new Subject<number>();
-         const counter = toSignal(counter$, {initialValue: null});
-
-         counter$.next(1);
-         expect(counter()).not.toBeNull();
-       }));
+    it(
+      'should return the initial value if called before a value is emitted',
+      test(() => {
+        const counter$ = new Subject<number>();
+        const counter = toSignal(counter$, {initialValue: null});
+
+        expect(counter()).toBeNull();
+        counter$.next(1);
+        expect(counter()).toBe(1);
+      }),
+    );
+
+    it(
+      'should not return the initial value if called after a value is emitted',
+      test(() => {
+        const counter$ = new Subject<number>();
+        const counter = toSignal(counter$, {initialValue: null});
+
+        counter$.next(1);
+        expect(counter()).not.toBeNull();
+      }),
+    );
   });
 
   describe('in a @Component', () => {
@@ -223,51 +271,63 @@ describe('toSignal()', () => {
 
   describe('type tests', () => {
     const src = new Subject<any>();
-    it('should allow empty array initial values', test(() => {
-         const res: Signal<string[]> = toSignal(src as Observable<string[]>, {initialValue: []});
-         expect(res).toBeDefined();
-       }));
-
-    it('should allow literal types', test(() => {
-         type Animal = 'cat'|'dog';
-         const res: Signal<Animal> = toSignal(src as Observable<Animal>, {initialValue: 'cat'});
-         expect(res).toBeDefined();
-       }));
-
-    it('should not allow initial values outside of the observable type', test(() => {
-         type Animal = 'cat'|'dog';
-         // @ts-expect-error
-         const res = toSignal(src as Observable<Animal>, {initialValue: 'cow'});
-         expect(res).toBeDefined();
-       }));
-
-    it('allows null as an initial value', test(() => {
-         const res = toSignal(src as Observable<string>, {initialValue: null});
-         const res2: Signal<string|null> = res;
-         // @ts-expect-error
-         const res3: Signal<string|undefined> = res;
-         expect(res2).toBeDefined();
-         expect(res3).toBeDefined();
-       }));
-
-
-    it('allows undefined as an initial value', test(() => {
-         const res = toSignal(src as Observable<string>, {initialValue: undefined});
-         const res2: Signal<string|undefined> = res;
-         // @ts-expect-error
-         const res3: Signal<string|null> = res;
-         expect(res2).toBeDefined();
-         expect(res3).toBeDefined();
-       }));
+    it(
+      'should allow empty array initial values',
+      test(() => {
+        const res: Signal<string[]> = toSignal(src as Observable<string[]>, {initialValue: []});
+        expect(res).toBeDefined();
+      }),
+    );
+
+    it(
+      'should allow literal types',
+      test(() => {
+        type Animal = 'cat' | 'dog';
+        const res: Signal<Animal> = toSignal(src as Observable<Animal>, {initialValue: 'cat'});
+        expect(res).toBeDefined();
+      }),
+    );
+
+    it(
+      'should not allow initial values outside of the observable type',
+      test(() => {
+        type Animal = 'cat' | 'dog';
+        // @ts-expect-error
+        const res = toSignal(src as Observable<Animal>, {initialValue: 'cow'});
+        expect(res).toBeDefined();
+      }),
+    );
+
+    it(
+      'allows null as an initial value',
+      test(() => {
+        const res = toSignal(src as Observable<string>, {initialValue: null});
+        const res2: Signal<string | null> = res;
+        // @ts-expect-error
+        const res3: Signal<string | undefined> = res;
+        expect(res2).toBeDefined();
+        expect(res3).toBeDefined();
+      }),
+    );
+
+    it(
+      'allows undefined as an initial value',
+      test(() => {
+        const res = toSignal(src as Observable<string>, {initialValue: undefined});
+        const res2: Signal<string | undefined> = res;
+        // @ts-expect-error
+        const res3: Signal<string | null> = res;
+        expect(res2).toBeDefined();
+        expect(res3).toBeDefined();
+      }),
+    );
   });
 });
 
-function test(fn: () => void|Promise<void>): () => Promise<void> {
+function test(fn: () => void | Promise<void>): () => Promise<void> {
   return async () => {
     const injector = Injector.create({
-      providers: [
-        {provide: EnvironmentInjector, useFactory: () => injector},
-      ]
+      providers: [{provide: EnvironmentInjector, useFactory: () => injector}],
     }) as EnvironmentInjector;
     try {
       return await runInInjectionContext(injector, fn);
diff --git a/packages/core/schematics/migrations/google3/waitForAsyncRule.ts b/packages/core/schematics/migrations/google3/waitForAsyncRule.ts
index 66cb36d79b134..e91fe68e63c67 100644
--- a/packages/core/schematics/migrations/google3/waitForAsyncRule.ts
+++ b/packages/core/schematics/migrations/google3/waitForAsyncRule.ts
@@ -25,18 +25,23 @@ const newFunction = 'waitForAsync';
 export class Rule extends Rules.TypedRule {
   override applyWithProgram(sourceFile: ts.SourceFile, program: ts.Program): RuleFailure[] {
     const failures: RuleFailure[] = [];
-    const asyncImportSpecifier =
-        getImportSpecifier(sourceFile, '@angular/core/testing', deprecatedFunction);
-    const asyncImport =
-        asyncImportSpecifier ? closestNode(asyncImportSpecifier, ts.isNamedImports) : null;
+    const asyncImportSpecifier = getImportSpecifier(
+      sourceFile,
+      '@angular/core/testing',
+      deprecatedFunction,
+    );
+    const asyncImport = asyncImportSpecifier
+      ? closestNode(asyncImportSpecifier, ts.isNamedImports)
+      : null;
 
     // If there are no imports of `async`, we can exit early.
     if (asyncImportSpecifier && asyncImport) {
       const typeChecker = program.getTypeChecker();
       const printer = ts.createPrinter();
       failures.push(this._getNamedImportsFailure(asyncImport, sourceFile, printer));
-      this.findAsyncReferences(sourceFile, typeChecker, asyncImportSpecifier)
-          .forEach((node) => failures.push(this._getIdentifierNodeFailure(node, sourceFile)));
+      this.findAsyncReferences(sourceFile, typeChecker, asyncImportSpecifier).forEach((node) =>
+        failures.push(this._getIdentifierNodeFailure(node, sourceFile)),
+      );
     }
 
     return failures;
@@ -44,35 +49,52 @@ export class Rule extends Rules.TypedRule {
 
   /** Gets a failure for an import of the `async` function. */
   private _getNamedImportsFailure(
-      node: ts.NamedImports, sourceFile: ts.SourceFile, printer: ts.Printer): RuleFailure {
+    node: ts.NamedImports,
+    sourceFile: ts.SourceFile,
+    printer: ts.Printer,
+  ): RuleFailure {
     const replacementText = printer.printNode(
-        ts.EmitHint.Unspecified, replaceImport(node, deprecatedFunction, newFunction), sourceFile);
+      ts.EmitHint.Unspecified,
+      replaceImport(node, deprecatedFunction, newFunction),
+      sourceFile,
+    );
 
     return new RuleFailure(
-        sourceFile, node.getStart(), node.getEnd(),
-        `Imports of the deprecated ${deprecatedFunction} function are not allowed. Use ${
-            newFunction} instead.`,
-        this.ruleName, new Replacement(node.getStart(), node.getWidth(), replacementText));
+      sourceFile,
+      node.getStart(),
+      node.getEnd(),
+      `Imports of the deprecated ${deprecatedFunction} function are not allowed. Use ${newFunction} instead.`,
+      this.ruleName,
+      new Replacement(node.getStart(), node.getWidth(), replacementText),
+    );
   }
 
   /** Gets a failure for an identifier node. */
   private _getIdentifierNodeFailure(node: ts.Identifier, sourceFile: ts.SourceFile): RuleFailure {
     return new RuleFailure(
-        sourceFile, node.getStart(), node.getEnd(),
-        `References to the deprecated ${deprecatedFunction} function are not allowed. Use ${
-            newFunction} instead.`,
-        this.ruleName, new Replacement(node.getStart(), node.getWidth(), newFunction));
+      sourceFile,
+      node.getStart(),
+      node.getEnd(),
+      `References to the deprecated ${deprecatedFunction} function are not allowed. Use ${newFunction} instead.`,
+      this.ruleName,
+      new Replacement(node.getStart(), node.getWidth(), newFunction),
+    );
   }
 
   /** Finds calls to the `async` function. */
   private findAsyncReferences(
-      sourceFile: ts.SourceFile, typeChecker: ts.TypeChecker,
-      asyncImportSpecifier: ts.ImportSpecifier) {
+    sourceFile: ts.SourceFile,
+    typeChecker: ts.TypeChecker,
+    asyncImportSpecifier: ts.ImportSpecifier,
+  ) {
     const results = new Set<ts.Identifier>();
     ts.forEachChild(sourceFile, function visitNode(node: ts.Node) {
-      if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) &&
-          node.expression.text === deprecatedFunction &&
-          isReferenceToImport(typeChecker, node.expression, asyncImportSpecifier)) {
+      if (
+        ts.isCallExpression(node) &&
+        ts.isIdentifier(node.expression) &&
+        node.expression.text === deprecatedFunction &&
+        isReferenceToImport(typeChecker, node.expression, asyncImportSpecifier)
+      ) {
         results.add(node.expression);
       }
 
diff --git a/packages/core/schematics/migrations/http-providers/index.ts b/packages/core/schematics/migrations/http-providers/index.ts
index 2fb13b090d0a9..95ee8bd6b1818 100644
--- a/packages/core/schematics/migrations/http-providers/index.ts
+++ b/packages/core/schematics/migrations/http-providers/index.ts
@@ -13,8 +13,7 @@ import {canMigrateFile, createMigrationProgram} from '../../utils/typescript/com
 
 import {migrateFile} from './utils';
 
-
-export default function(): Rule {
+export default function (): Rule {
   return async (tree: Tree) => {
     const {buildPaths, testPaths} = await getProjectTsConfigPaths(tree);
     const basePath = process.cwd();
@@ -22,7 +21,8 @@ export default function(): Rule {
 
     if (!allPaths.length) {
       throw new SchematicsException(
-          'Could not find any tsconfig file. Cannot run the transfer state migration.');
+        'Could not find any tsconfig file. Cannot run the transfer state migration.',
+      );
     }
 
     for (const tsconfigPath of allPaths) {
@@ -31,16 +31,16 @@ export default function(): Rule {
   };
 }
 
-
 function runMigration(tree: Tree, tsconfigPath: string, basePath: string) {
   const program = createMigrationProgram(tree, tsconfigPath, basePath);
-  const sourceFiles =
-      program.getSourceFiles().filter(sourceFile => canMigrateFile(basePath, sourceFile, program));
+  const sourceFiles = program
+    .getSourceFiles()
+    .filter((sourceFile) => canMigrateFile(basePath, sourceFile, program));
 
   for (const sourceFile of sourceFiles) {
-    let update: UpdateRecorder|null = null;
+    let update: UpdateRecorder | null = null;
 
-    const rewriter = (startPos: number, width: number, text: string|null) => {
+    const rewriter = (startPos: number, width: number, text: string | null) => {
       if (update === null) {
         // Lazily initialize update, because most files will not require migration.
         update = tree.beginUpdate(relative(basePath, sourceFile.fileName));
diff --git a/packages/core/schematics/migrations/http-providers/utils.ts b/packages/core/schematics/migrations/http-providers/utils.ts
index 70acc0c6df9e3..5c653377df632 100644
--- a/packages/core/schematics/migrations/http-providers/utils.ts
+++ b/packages/core/schematics/migrations/http-providers/utils.ts
@@ -36,7 +36,10 @@ const HTTP_TESTING_MODULES = new Set([HTTP_CLIENT_TESTING_MODULE]);
 export type RewriteFn = (startPos: number, width: number, text: string) => void;
 
 export function migrateFile(
-    sourceFile: ts.SourceFile, typeChecker: ts.TypeChecker, rewriteFn: RewriteFn) {
+  sourceFile: ts.SourceFile,
+  typeChecker: ts.TypeChecker,
+  rewriteFn: RewriteFn,
+) {
   const changeTracker = new ChangeTracker(ts.createPrinter());
   const addedImports = new Map<string, Set<string>>([
     [COMMON_HTTP, new Set()],
@@ -44,12 +47,14 @@ export function migrateFile(
   ]);
 
   const commonHttpIdentifiers = new Set(
-      getImportSpecifiers(sourceFile, COMMON_HTTP, [...HTTP_MODULES])
-          .map((specifier) => specifier.getText()),
+    getImportSpecifiers(sourceFile, COMMON_HTTP, [...HTTP_MODULES]).map((specifier) =>
+      specifier.getText(),
+    ),
   );
   const commonHttpTestingIdentifiers = new Set(
-      getImportSpecifiers(sourceFile, COMMON_HTTP_TESTING, [...HTTP_TESTING_MODULES])
-          .map((specifier) => specifier.getText()),
+    getImportSpecifiers(sourceFile, COMMON_HTTP_TESTING, [...HTTP_TESTING_MODULES]).map(
+      (specifier) => specifier.getText(),
+    ),
   );
 
   ts.forEachChild(sourceFile, function visit(node: ts.Node) {
@@ -57,7 +62,7 @@ export function migrateFile(
 
     if (ts.isClassDeclaration(node)) {
       const decorators = getAngularDecorators(typeChecker, ts.getDecorators(node) || []);
-      decorators.forEach(decorator => {
+      decorators.forEach((decorator) => {
         migrateDecorator(decorator, commonHttpIdentifiers, addedImports, changeTracker);
       });
     }
@@ -77,9 +82,9 @@ export function migrateFile(
       ...commonHttpImports.elements.filter((current) => !symbolImportsToRemove.includes(current)),
       ...[...(addedImports.get(COMMON_HTTP) ?? [])].map((entry) => {
         return ts.factory.createImportSpecifier(
-            false,
-            undefined,
-            ts.factory.createIdentifier(entry),
+          false,
+          undefined,
+          ts.factory.createIdentifier(entry),
         );
       }),
     ]);
@@ -95,13 +100,13 @@ export function migrateFile(
 
     const newHttpTestingImports = ts.factory.updateNamedImports(commonHttpTestingImports, [
       ...commonHttpTestingImports.elements.filter(
-          (current) => !symbolImportsToRemove.includes(current),
-          ),
+        (current) => !symbolImportsToRemove.includes(current),
+      ),
       ...[...(addedImports.get(COMMON_HTTP_TESTING) ?? [])].map((entry) => {
         return ts.factory.createImportSpecifier(
-            false,
-            undefined,
-            ts.factory.createIdentifier(entry),
+          false,
+          undefined,
+          ts.factory.createIdentifier(entry),
         );
       }),
     ]);
@@ -117,12 +122,17 @@ export function migrateFile(
 }
 
 function migrateDecorator(
-    decorator: NgDecorator, commonHttpIdentifiers: Set<string>,
-    addedImports: Map<string, Set<string>>, changeTracker: ChangeTracker) {
+  decorator: NgDecorator,
+  commonHttpIdentifiers: Set<string>,
+  addedImports: Map<string, Set<string>>,
+  changeTracker: ChangeTracker,
+) {
   // Only @NgModule and @Component support `imports`.
   // Also skip decorators with no arguments.
-  if ((decorator.name !== 'NgModule' && decorator.name !== 'Component') ||
-      decorator.node.expression.arguments.length < 1) {
+  if (
+    (decorator.name !== 'NgModule' && decorator.name !== 'Component') ||
+    decorator.node.expression.arguments.length < 1
+  ) {
     return;
   }
 
@@ -163,10 +173,10 @@ function migrateDecorator(
     } else {
       addedImports.get(COMMON_HTTP)?.add(WITH_XSRF_CONFIGURATION);
       addedProviders.add(
-          createCallExpression(
-              WITH_XSRF_CONFIGURATION,
-              importedModules.xsrfOptions?.options ? [importedModules.xsrfOptions.options] : [],
-              ),
+        createCallExpression(
+          WITH_XSRF_CONFIGURATION,
+          importedModules.xsrfOptions?.options ? [importedModules.xsrfOptions.options] : [],
+        ),
       );
     }
   }
@@ -174,9 +184,11 @@ function migrateDecorator(
   // Removing the imported Http modules from the imports list
   const newImports = ts.factory.createArrayLiteralExpression([
     ...moduleImports.elements.filter(
-        (item) => item !== importedModules.client && item !== importedModules.clientJsonp &&
-            item !== importedModules.xsrf,
-        ),
+      (item) =>
+        item !== importedModules.client &&
+        item !== importedModules.clientJsonp &&
+        item !== importedModules.xsrf,
+    ),
   ]);
 
   // Adding the new providers
@@ -206,15 +218,21 @@ function migrateDecorator(
 }
 
 function migrateTestingModuleImports(
-    node: ts.Node, commonHttpTestingIdentifiers: Set<string>,
-    addedImports: Map<string, Set<string>>, changeTracker: ChangeTracker) {
+  node: ts.Node,
+  commonHttpTestingIdentifiers: Set<string>,
+  addedImports: Map<string, Set<string>>,
+  changeTracker: ChangeTracker,
+) {
   // Look for calls to `TestBed.configureTestingModule` with at least one argument.
   // TODO: this won't work if `TestBed` is aliased or type cast.
-  if (!ts.isCallExpression(node) || node.arguments.length < 1 ||
-      !ts.isPropertyAccessExpression(node.expression) ||
-      !ts.isIdentifier(node.expression.expression) ||
-      node.expression.expression.text !== 'TestBed' ||
-      node.expression.name.text !== 'configureTestingModule') {
+  if (
+    !ts.isCallExpression(node) ||
+    node.arguments.length < 1 ||
+    !ts.isPropertyAccessExpression(node.expression) ||
+    !ts.isIdentifier(node.expression.expression) ||
+    node.expression.expression.text !== 'TestBed' ||
+    node.expression.name.text !== 'configureTestingModule'
+  ) {
     return;
   }
 
@@ -232,7 +250,7 @@ function migrateTestingModuleImports(
 
   // Does the imports array contain the HttpClientTestingModule?
   const httpClientTesting = importsArray.elements.find(
-      (elt) => elt.getText() === HTTP_CLIENT_TESTING_MODULE,
+    (elt) => elt.getText() === HTTP_CLIENT_TESTING_MODULE,
   );
   if (!httpClientTesting || !commonHttpTestingIdentifiers.has(HTTP_CLIENT_TESTING_MODULE)) {
     return;
@@ -306,18 +324,18 @@ function getProvidersFromLiteralExpr(literal: ts.ObjectLiteralExpression) {
 }
 
 function getImportedHttpModules(
-    imports: ts.ArrayLiteralExpression,
-    commonHttpIdentifiers: Set<string>,
+  imports: ts.ArrayLiteralExpression,
+  commonHttpIdentifiers: Set<string>,
 ) {
-  let client: ts.Identifier|ts.CallExpression|null = null;
-  let clientJsonp: ts.Identifier|ts.CallExpression|null = null;
-  let xsrf: ts.Identifier|ts.CallExpression|null = null;
+  let client: ts.Identifier | ts.CallExpression | null = null;
+  let clientJsonp: ts.Identifier | ts.CallExpression | null = null;
+  let xsrf: ts.Identifier | ts.CallExpression | null = null;
 
   // represents respectively:
   // HttpClientXsrfModule.disable()
   // HttpClientXsrfModule.withOptions(options)
   // base HttpClientXsrfModule
-  let xsrfOptions: 'disable'|{options: ts.Expression}|null = null;
+  let xsrfOptions: 'disable' | {options: ts.Expression} | null = null;
 
   // Handling the 3 http modules from @angular/common/http and skipping the rest
   for (const item of imports.elements) {
@@ -364,8 +382,8 @@ function getImportedHttpModules(
 
 function createCallExpression(functionName: string, args: ts.Expression[] = []) {
   return ts.factory.createCallExpression(
-      ts.factory.createIdentifier(functionName),
-      undefined,
-      args,
+    ts.factory.createIdentifier(functionName),
+    undefined,
+    args,
   );
 }
diff --git a/packages/core/schematics/migrations/invalid-two-way-bindings/analysis.ts b/packages/core/schematics/migrations/invalid-two-way-bindings/analysis.ts
index b0cf7d2cf74ca..e8723989d64e0 100644
--- a/packages/core/schematics/migrations/invalid-two-way-bindings/analysis.ts
+++ b/packages/core/schematics/migrations/invalid-two-way-bindings/analysis.ts
@@ -38,8 +38,9 @@ export class AnalyzedFile {
       analyzedFiles.set(path, analysis);
     }
 
-    const duplicate =
-        analysis.ranges.find(current => current[0] === range[0] && current[1] === range[1]);
+    const duplicate = analysis.ranges.find(
+      (current) => current[0] === range[0] && current[1] === range[1],
+    );
 
     if (!duplicate) {
       analysis.ranges.push(range);
@@ -53,20 +54,24 @@ export class AnalyzedFile {
  * @param analyzedFiles Map in which to store the results.
  */
 export function analyze(sourceFile: ts.SourceFile, analyzedFiles: Map<string, AnalyzedFile>) {
-  forEachClass(sourceFile, node => {
+  forEachClass(sourceFile, (node) => {
     // Note: we have a utility to resolve the Angular decorators from a class declaration already.
     // We don't use it here, because it requires access to the type checker which makes it more
     // time-consuming to run internally.
-    const decorator = ts.getDecorators(node)?.find(dec => {
-      return ts.isCallExpression(dec.expression) && ts.isIdentifier(dec.expression.expression) &&
-          dec.expression.expression.text === 'Component';
-    }) as (ts.Decorator & {expression: ts.CallExpression}) |
-        undefined;
+    const decorator = ts.getDecorators(node)?.find((dec) => {
+      return (
+        ts.isCallExpression(dec.expression) &&
+        ts.isIdentifier(dec.expression.expression) &&
+        dec.expression.expression.text === 'Component'
+      );
+    }) as (ts.Decorator & {expression: ts.CallExpression}) | undefined;
 
-    const metadata = decorator && decorator.expression.arguments.length > 0 &&
-            ts.isObjectLiteralExpression(decorator.expression.arguments[0]) ?
-        decorator.expression.arguments[0] :
-        null;
+    const metadata =
+      decorator &&
+      decorator.expression.arguments.length > 0 &&
+      ts.isObjectLiteralExpression(decorator.expression.arguments[0])
+        ? decorator.expression.arguments[0]
+        : null;
 
     if (!metadata) {
       return;
@@ -75,17 +80,21 @@ export function analyze(sourceFile: ts.SourceFile, analyzedFiles: Map<string, An
     for (const prop of metadata.properties) {
       // All the properties we care about should have static
       // names and be initialized to a static string.
-      if (!ts.isPropertyAssignment(prop) || !ts.isStringLiteralLike(prop.initializer) ||
-          (!ts.isIdentifier(prop.name) && !ts.isStringLiteralLike(prop.name))) {
+      if (
+        !ts.isPropertyAssignment(prop) ||
+        !ts.isStringLiteralLike(prop.initializer) ||
+        (!ts.isIdentifier(prop.name) && !ts.isStringLiteralLike(prop.name))
+      ) {
         continue;
       }
 
       switch (prop.name.text) {
         case 'template':
           // +1/-1 to exclude the opening/closing characters from the range.
-          AnalyzedFile.addRange(
-              sourceFile.fileName, analyzedFiles,
-              [prop.initializer.getStart() + 1, prop.initializer.getEnd() - 1]);
+          AnalyzedFile.addRange(sourceFile.fileName, analyzedFiles, [
+            prop.initializer.getStart() + 1,
+            prop.initializer.getEnd() - 1,
+          ]);
           break;
 
         case 'templateUrl':
diff --git a/packages/core/schematics/migrations/invalid-two-way-bindings/index.ts b/packages/core/schematics/migrations/invalid-two-way-bindings/index.ts
index 5343440a1ceb3..799a50aba5678 100644
--- a/packages/core/schematics/migrations/invalid-two-way-bindings/index.ts
+++ b/packages/core/schematics/migrations/invalid-two-way-bindings/index.ts
@@ -15,7 +15,7 @@ import {canMigrateFile, createMigrationProgram} from '../../utils/typescript/com
 import {analyze, AnalyzedFile} from './analysis';
 import {migrateTemplate} from './migration';
 
-export default function(): Rule {
+export default function (): Rule {
   return async (tree: Tree) => {
     const {buildPaths, testPaths} = await getProjectTsConfigPaths(tree);
     const basePath = process.cwd();
@@ -23,7 +23,8 @@ export default function(): Rule {
 
     if (!allPaths.length) {
       throw new SchematicsException(
-          'Could not find any tsconfig file. Cannot run the invalid two-way bindings migration.');
+        'Could not find any tsconfig file. Cannot run the invalid two-way bindings migration.',
+      );
     }
 
     for (const tsconfigPath of allPaths) {
@@ -34,8 +35,9 @@ export default function(): Rule {
 
 function runInvalidTwoWayBindingsMigration(tree: Tree, tsconfigPath: string, basePath: string) {
   const program = createMigrationProgram(tree, tsconfigPath, basePath);
-  const sourceFiles =
-      program.getSourceFiles().filter(sourceFile => canMigrateFile(basePath, sourceFile, program));
+  const sourceFiles = program
+    .getSourceFiles()
+    .filter((sourceFile) => canMigrateFile(basePath, sourceFile, program));
   const analysis = new Map<string, AnalyzedFile>();
 
   for (const sourceFile of sourceFiles) {
diff --git a/packages/core/schematics/migrations/invalid-two-way-bindings/migration.ts b/packages/core/schematics/migrations/invalid-two-way-bindings/migration.ts
index 8695fef23630a..79aec36f0fbfe 100644
--- a/packages/core/schematics/migrations/invalid-two-way-bindings/migration.ts
+++ b/packages/core/schematics/migrations/invalid-two-way-bindings/migration.ts
@@ -6,7 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ASTWithSource, BindingType, ParsedEventType, parseTemplate, ReadKeyExpr, ReadPropExpr, TmplAstBoundAttribute, TmplAstElement, TmplAstNode, TmplAstRecursiveVisitor, TmplAstTemplate} from '@angular/compiler';
+import {
+  ASTWithSource,
+  BindingType,
+  ParsedEventType,
+  parseTemplate,
+  ReadKeyExpr,
+  ReadPropExpr,
+  TmplAstBoundAttribute,
+  TmplAstElement,
+  TmplAstNode,
+  TmplAstRecursiveVisitor,
+  TmplAstTemplate,
+} from '@angular/compiler';
 import ts from 'typescript';
 
 /**
@@ -14,13 +26,13 @@ import ts from 'typescript';
  * Returns null if no changes had to be made to the file.
  * @param template Template to be migrated.
  */
-export function migrateTemplate(template: string): string|null {
+export function migrateTemplate(template: string): string | null {
   // Don't attempt to parse templates that don't contain two-way bindings.
   if (!template.includes(')]=')) {
     return null;
   }
 
-  let rootNodes: TmplAstNode[]|null = null;
+  let rootNodes: TmplAstNode[] | null = null;
 
   try {
     const parsed = parseTemplate(template, '', {allowInvalidAssignmentEvents: true});
@@ -28,8 +40,7 @@ export function migrateTemplate(template: string): string|null {
     if (parsed.errors === null) {
       rootNodes = parsed.nodes;
     }
-  } catch {
-  }
+  } catch {}
 
   // Don't migrate invalid templates.
   if (rootNodes === null) {
@@ -37,8 +48,9 @@ export function migrateTemplate(template: string): string|null {
   }
 
   const visitor = new InvalidTwoWayBindingCollector();
-  const bindings = visitor.collectInvalidBindings(rootNodes).sort(
-      (a, b) => b.sourceSpan.start.offset - a.sourceSpan.start.offset);
+  const bindings = visitor
+    .collectInvalidBindings(rootNodes)
+    .sort((a, b) => b.sourceSpan.start.offset - a.sourceSpan.start.offset);
 
   if (bindings.length === 0) {
     return null;
@@ -79,7 +91,10 @@ function migrateTwoWayInput(binding: TmplAstBoundAttribute, value: string): stri
  * @param value String value of the binding.
  */
 function migrateTwoWayEvent(
-    value: string, binding: TmplAstBoundAttribute, printer: ts.Printer): string|null {
+  value: string,
+  binding: TmplAstBoundAttribute,
+  printer: ts.Printer,
+): string | null {
   // Note that we use the TypeScript parser, as opposed to our own, because even though we have
   // an expression AST here already, our AST is harder to work with in a migration context.
   // To use it here, we would have to solve the following:
@@ -93,15 +108,15 @@ function migrateTwoWayEvent(
   // we can get away with using the TypeScript AST instead.
   const sourceFile = ts.createSourceFile('temp.ts', value, ts.ScriptTarget.Latest);
   const expression =
-      sourceFile.statements.length === 1 && ts.isExpressionStatement(sourceFile.statements[0]) ?
-      sourceFile.statements[0].expression :
-      null;
+    sourceFile.statements.length === 1 && ts.isExpressionStatement(sourceFile.statements[0])
+      ? sourceFile.statements[0].expression
+      : null;
 
   if (expression === null) {
     return null;
   }
 
-  let migrated: ts.Expression|null = null;
+  let migrated: ts.Expression | null = null;
 
   // Historically the expression parser was handling two-way events by appending `=$event`
   // to the raw string before attempting to parse it. This has led to bugs over the years (see
@@ -113,13 +128,21 @@ function migrateTwoWayEvent(
   if (ts.isBinaryExpression(expression) && isReadExpression(expression.right)) {
     // `a && b` -> `a && (b = $event)`
     migrated = ts.factory.updateBinaryExpression(
-        expression, expression.left, expression.operatorToken,
-        wrapInEventAssignment(expression.right));
+      expression,
+      expression.left,
+      expression.operatorToken,
+      wrapInEventAssignment(expression.right),
+    );
   } else if (ts.isConditionalExpression(expression) && isReadExpression(expression.whenFalse)) {
     // `a ? b : c` -> `a ? b : c = $event`
     migrated = ts.factory.updateConditionalExpression(
-        expression, expression.condition, expression.questionToken, expression.whenTrue,
-        expression.colonToken, wrapInEventAssignment(expression.whenFalse));
+      expression,
+      expression.condition,
+      expression.questionToken,
+      expression.whenTrue,
+      expression.colonToken,
+      wrapInEventAssignment(expression.whenFalse),
+    );
   } else if (isPrefixNot(expression)) {
     // `!!a` -> `a = $event`
     let innerExpression = expression.operand;
@@ -147,18 +170,24 @@ function migrateTwoWayEvent(
 /** Wraps an expression in an assignment to `$event`, e.g. `foo.bar = $event`. */
 function wrapInEventAssignment(node: ts.Expression): ts.Expression {
   return ts.factory.createBinaryExpression(
-      node, ts.factory.createToken(ts.SyntaxKind.EqualsToken),
-      ts.factory.createIdentifier('$event'));
+    node,
+    ts.factory.createToken(ts.SyntaxKind.EqualsToken),
+    ts.factory.createIdentifier('$event'),
+  );
 }
 
 /**
  * Checks whether an expression is a valid read expression. Note that identifiers
  * are considered read expressions in Angular templates as well.
  */
-function isReadExpression(node: ts.Expression): node is ts.Identifier|ts.PropertyAccessExpression|
-    ts.ElementAccessExpression {
-  return ts.isIdentifier(node) || ts.isPropertyAccessExpression(node) ||
-      ts.isElementAccessExpression(node);
+function isReadExpression(
+  node: ts.Expression,
+): node is ts.Identifier | ts.PropertyAccessExpression | ts.ElementAccessExpression {
+  return (
+    ts.isIdentifier(node) ||
+    ts.isPropertyAccessExpression(node) ||
+    ts.isElementAccessExpression(node)
+  );
 }
 
 /** Checks whether an expression is in the form of `!x`. */
@@ -168,11 +197,11 @@ function isPrefixNot(node: ts.Expression): node is ts.PrefixUnaryExpression {
 
 /** Traverses a template AST and collects any invalid two-way bindings. */
 class InvalidTwoWayBindingCollector extends TmplAstRecursiveVisitor {
-  private invalidBindings: TmplAstBoundAttribute[]|null = null;
+  private invalidBindings: TmplAstBoundAttribute[] | null = null;
 
   collectInvalidBindings(rootNodes: TmplAstNode[]): TmplAstBoundAttribute[] {
-    const result = this.invalidBindings = [];
-    rootNodes.forEach(node => node.visit(this));
+    const result = (this.invalidBindings = []);
+    rootNodes.forEach((node) => node.visit(this));
     this.invalidBindings = null;
     return result;
   }
@@ -187,7 +216,7 @@ class InvalidTwoWayBindingCollector extends TmplAstRecursiveVisitor {
     super.visitTemplate(template);
   }
 
-  private visitNodeWithBindings(node: TmplAstElement|TmplAstTemplate) {
+  private visitNodeWithBindings(node: TmplAstElement | TmplAstTemplate) {
     const seenOneWayBindings = new Set<string>();
 
     // Collect all of the regular event and input binding
@@ -211,8 +240,11 @@ class InvalidTwoWayBindingCollector extends TmplAstRecursiveVisitor {
       // something like `[(ngModel)]="invalid" (ngModelChange)="foo()"` to
       // `[ngModel]="invalid" (ngModelChange)="invalid = $event" (ngModelChange)="foo()"` which
       // would break the app.
-      if (input.type !== BindingType.TwoWay || seenOneWayBindings.has(input.name) ||
-          seenOneWayBindings.has(input.name + 'Change')) {
+      if (
+        input.type !== BindingType.TwoWay ||
+        seenOneWayBindings.has(input.name) ||
+        seenOneWayBindings.has(input.name + 'Change')
+      ) {
         continue;
       }
 
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/cases.ts b/packages/core/schematics/ng-generate/control-flow-migration/cases.ts
index e70100e32192f..0674c398091fa 100644
--- a/packages/core/schematics/ng-generate/control-flow-migration/cases.ts
+++ b/packages/core/schematics/ng-generate/control-flow-migration/cases.ts
@@ -8,8 +8,22 @@
 
 import {visitAll} from '@angular/compiler';
 
-import {ElementCollector, ElementToMigrate, endMarker, MigrateError, Result, startMarker} from './types';
-import {calculateNesting, getMainBlock, getOriginals, hasLineBreaks, parseTemplate, reduceNestingOffset} from './util';
+import {
+  ElementCollector,
+  ElementToMigrate,
+  endMarker,
+  MigrateError,
+  Result,
+  startMarker,
+} from './types';
+import {
+  calculateNesting,
+  getMainBlock,
+  getOriginals,
+  hasLineBreaks,
+  parseTemplate,
+  reduceNestingOffset,
+} from './util';
 
 export const boundcase = '[ngSwitchCase]';
 export const switchcase = '*ngSwitchCase';
@@ -17,20 +31,17 @@ export const nakedcase = 'ngSwitchCase';
 export const switchdefault = '*ngSwitchDefault';
 export const nakeddefault = 'ngSwitchDefault';
 
-export const cases = [
-  boundcase,
-  switchcase,
-  nakedcase,
-  switchdefault,
-  nakeddefault,
-];
+export const cases = [boundcase, switchcase, nakedcase, switchdefault, nakeddefault];
 
 /**
  * Replaces structural directive ngSwitch instances with new switch.
  * Returns null if the migration failed (e.g. there was a syntax error).
  */
-export function migrateCase(template: string):
-    {migrated: string, errors: MigrateError[], changed: boolean} {
+export function migrateCase(template: string): {
+  migrated: string;
+  errors: MigrateError[];
+  changed: boolean;
+} {
   let errors: MigrateError[] = [];
   let parsed = parseTemplate(template);
   if (parsed.tree === undefined) {
@@ -88,8 +99,7 @@ function migrateNgSwitchCase(etm: ElementToMigrate, tmpl: string, offset: number
   const originals = getOriginals(etm, tmpl, offset);
 
   const {start, middle, end} = getMainBlock(etm, tmpl, offset);
-  const startBlock =
-      `${startMarker}${leadingSpace}@case (${condition}) {${leadingSpace}${lbString}${start}`;
+  const startBlock = `${startMarker}${leadingSpace}@case (${condition}) {${leadingSpace}${lbString}${start}`;
   const endBlock = `${end}${lbString}${leadingSpace}}${endMarker}`;
 
   const defaultBlock = startBlock + middle + endBlock;
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/fors.ts b/packages/core/schematics/ng-generate/control-flow-migration/fors.ts
index 9e1b680485018..a9d09d24245a2 100644
--- a/packages/core/schematics/ng-generate/control-flow-migration/fors.ts
+++ b/packages/core/schematics/ng-generate/control-flow-migration/fors.ts
@@ -8,15 +8,28 @@
 
 import {visitAll} from '@angular/compiler';
 
-import {ElementCollector, ElementToMigrate, endMarker, MigrateError, Result, startMarker} from './types';
-import {calculateNesting, getMainBlock, getOriginals, getPlaceholder, hasLineBreaks, parseTemplate, PlaceholderKind, reduceNestingOffset} from './util';
+import {
+  ElementCollector,
+  ElementToMigrate,
+  endMarker,
+  MigrateError,
+  Result,
+  startMarker,
+} from './types';
+import {
+  calculateNesting,
+  getMainBlock,
+  getOriginals,
+  getPlaceholder,
+  hasLineBreaks,
+  parseTemplate,
+  PlaceholderKind,
+  reduceNestingOffset,
+} from './util';
 
 export const ngfor = '*ngFor';
 export const nakedngfor = 'ngFor';
-const fors = [
-  ngfor,
-  nakedngfor,
-];
+const fors = [ngfor, nakedngfor];
 
 export const commaSeparatedSyntax = new Map([
   ['(', ')'],
@@ -32,8 +45,11 @@ export const stringPairs = new Map([
  * Replaces structural directive ngFor instances with new for.
  * Returns null if the migration failed (e.g. there was a syntax error).
  */
-export function migrateFor(template: string):
-    {migrated: string, errors: MigrateError[], changed: boolean} {
+export function migrateFor(template: string): {
+  migrated: string;
+  errors: MigrateError[];
+  changed: boolean;
+} {
   let errors: MigrateError[] = [];
   let parsed = parseTemplate(template);
   if (parsed.tree === undefined) {
@@ -93,14 +109,15 @@ function migrateStandardNgFor(etm: ElementToMigrate, tmpl: string, offset: numbe
   // first portion should always be the loop definition prefixed with `let`
   const condition = parts[0].replace('let ', '');
   if (condition.indexOf(' as ') > -1) {
-    let errorMessage = `Found an aliased collection on an ngFor: "${condition}".` +
-        ' Collection aliasing is not supported with @for.' +
-        ' Refactor the code to remove the `as` alias and re-run the migration.';
+    let errorMessage =
+      `Found an aliased collection on an ngFor: "${condition}".` +
+      ' Collection aliasing is not supported with @for.' +
+      ' Refactor the code to remove the `as` alias and re-run the migration.';
     throw new Error(errorMessage);
   }
   const loopVar = condition.split(' of ')[0];
   let trackBy = loopVar;
-  let aliasedIndex: string|null = null;
+  let aliasedIndex: string | null = null;
   let tmplPlaceholder = '';
   for (let i = 1; i < parts.length; i++) {
     const part = parts[i].trim();
@@ -146,7 +163,7 @@ function migrateStandardNgFor(etm: ElementToMigrate, tmpl: string, offset: numbe
     trackBy = trackBy.replace('$index', aliasedIndex);
   }
 
-  const aliasStr = (aliases.length > 0) ? `;${aliases.join(';')}` : '';
+  const aliasStr = aliases.length > 0 ? `;${aliases.join(';')}` : '';
 
   let startBlock = `${startMarker}@for (${condition}; track ${trackBy}${aliasStr}) {${lbString}`;
   let endBlock = `${lbString}}${endMarker}`;
@@ -186,7 +203,7 @@ function migrateBoundNgFor(etm: ElementToMigrate, tmpl: string, offset: number):
       aliasedIndex = key;
     }
   }
-  const aliasStr = (aliases.length > 0) ? `;${aliases.join(';')}` : '';
+  const aliasStr = aliases.length > 0 ? `;${aliases.join(';')}` : '';
 
   let trackBy = aliasAttrs.item;
   if (forAttrs.trackBy !== '') {
@@ -220,8 +237,11 @@ function getNgForParts(expression: string): string[] {
     const isInCommaSeparated = commaSeparatedStack.length === 0;
     // Any semicolon is a delimiter, as well as any comma outside
     // of comma-separated syntax, as long as they're outside of a string.
-    if (isInString && current.length > 0 &&
-        (char === ';' || (char === ',' && isInCommaSeparated))) {
+    if (
+      isInString &&
+      current.length > 0 &&
+      (char === ';' || (char === ',' && isInCommaSeparated))
+    ) {
       parts.push(current);
       current = '';
       continue;
@@ -236,8 +256,9 @@ function getNgForParts(expression: string): string[] {
     if (commaSeparatedSyntax.has(char)) {
       commaSeparatedStack.push(commaSeparatedSyntax.get(char)!);
     } else if (
-        commaSeparatedStack.length > 0 &&
-        commaSeparatedStack[commaSeparatedStack.length - 1] === char) {
+      commaSeparatedStack.length > 0 &&
+      commaSeparatedStack[commaSeparatedStack.length - 1] === char
+    ) {
       commaSeparatedStack.pop();
     }
 
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/identifier-lookup.ts b/packages/core/schematics/ng-generate/control-flow-migration/identifier-lookup.ts
index 89602be4f7850..087ca622d9931 100644
--- a/packages/core/schematics/ng-generate/control-flow-migration/identifier-lookup.ts
+++ b/packages/core/schematics/ng-generate/control-flow-migration/identifier-lookup.ts
@@ -9,7 +9,9 @@
 import ts from 'typescript';
 
 export function lookupIdentifiersInSourceFile(
-    sourceFile: ts.SourceFile, names: string[]): Set<ts.Identifier> {
+  sourceFile: ts.SourceFile,
+  names: string[],
+): Set<ts.Identifier> {
   const results = new Set<ts.Identifier>();
   const visit = (node: ts.Node): void => {
     if (ts.isIdentifier(node) && names.includes(node.text)) {
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/ifs.ts b/packages/core/schematics/ng-generate/control-flow-migration/ifs.ts
index 0bd367bd07c68..a8937f32dbff8 100644
--- a/packages/core/schematics/ng-generate/control-flow-migration/ifs.ts
+++ b/packages/core/schematics/ng-generate/control-flow-migration/ifs.ts
@@ -8,25 +8,40 @@
 
 import {visitAll} from '@angular/compiler';
 
-import {ElementCollector, ElementToMigrate, endMarker, MigrateError, Result, startMarker} from './types';
-import {calculateNesting, getMainBlock, getOriginals, getPlaceholder, hasLineBreaks, parseTemplate, PlaceholderKind, reduceNestingOffset} from './util';
+import {
+  ElementCollector,
+  ElementToMigrate,
+  endMarker,
+  MigrateError,
+  Result,
+  startMarker,
+} from './types';
+import {
+  calculateNesting,
+  getMainBlock,
+  getOriginals,
+  getPlaceholder,
+  hasLineBreaks,
+  parseTemplate,
+  PlaceholderKind,
+  reduceNestingOffset,
+} from './util';
 
 export const ngif = '*ngIf';
 export const boundngif = '[ngIf]';
 export const nakedngif = 'ngIf';
 
-const ifs = [
-  ngif,
-  nakedngif,
-  boundngif,
-];
+const ifs = [ngif, nakedngif, boundngif];
 
 /**
  * Replaces structural directive ngif instances with new if.
  * Returns null if the migration failed (e.g. there was a syntax error).
  */
-export function migrateIf(template: string):
-    {migrated: string, errors: MigrateError[], changed: boolean} {
+export function migrateIf(template: string): {
+  migrated: string;
+  errors: MigrateError[];
+  changed: boolean;
+} {
   let errors: MigrateError[] = [];
   let parsed = parseTemplate(template);
   if (parsed.tree === undefined) {
@@ -80,7 +95,7 @@ function migrateNgIf(etm: ElementToMigrate, tmpl: string, offset: number): Resul
   } else if (matchThen && matchThen.length > 0) {
     // just then
     return buildStandardIfThenBlock(etm, tmpl, matchThen[0], offset);
-  } else if ((matchElse && matchElse.length > 0)) {
+  } else if (matchElse && matchElse.length > 0) {
     // just else
     return buildStandardIfElseBlock(etm, tmpl, matchElse![0], offset);
   }
@@ -98,13 +113,14 @@ function buildIfBlock(etm: ElementToMigrate, tmpl: string, offset: number): Resu
   // includes the mandatory semicolon before as
   const lbString = etm.hasLineBreaks ? '\n' : '';
   let condition = etm.attr.value
-                      .replace(' as ', '; as ')
-                      // replace 'let' with 'as' whatever spaces are between ; and 'let'
-                      .replace(/;\s*let/g, '; as');
+    .replace(' as ', '; as ')
+    // replace 'let' with 'as' whatever spaces are between ; and 'let'
+    .replace(/;\s*let/g, '; as');
   if (aliases.length > 1 || (aliases.length === 1 && condition.indexOf('; as') > -1)) {
     // only 1 alias allowed
     throw new Error(
-        'Found more than one alias on your ngIf. Remove one of them and re-run the migration.');
+      'Found more than one alias on your ngIf. Remove one of them and re-run the migration.',
+    );
   } else if (aliases.length === 1) {
     condition += `; as ${aliases[0]}`;
   }
@@ -127,12 +143,17 @@ function buildIfBlock(etm: ElementToMigrate, tmpl: string, offset: number): Resu
 }
 
 function buildStandardIfElseBlock(
-    etm: ElementToMigrate, tmpl: string, elseString: string, offset: number): Result {
+  etm: ElementToMigrate,
+  tmpl: string,
+  elseString: string,
+  offset: number,
+): Result {
   // includes the mandatory semicolon before as
-  const condition = etm.getCondition()
-                        .replace(' as ', '; as ')
-                        // replace 'let' with 'as' whatever spaces are between ; and 'let'
-                        .replace(/;\s*let/g, '; as');
+  const condition = etm
+    .getCondition()
+    .replace(' as ', '; as ')
+    // replace 'let' with 'as' whatever spaces are between ; and 'let'
+    .replace(/;\s*let/g, '; as');
   const elsePlaceholder = getPlaceholder(etm.getTemplateName(elseString));
   return buildIfElseBlock(etm, tmpl, condition, elsePlaceholder, offset);
 }
@@ -149,7 +170,8 @@ function buildBoundIfElseBlock(etm: ElementToMigrate, tmpl: string, offset: numb
   if (aliases.length > 1 || (aliases.length === 1 && condition.indexOf('; as') > -1)) {
     // only 1 alias allowed
     throw new Error(
-        'Found more than one alias on your ngIf. Remove one of them and re-run the migration.');
+      'Found more than one alias on your ngIf. Remove one of them and re-run the migration.',
+    );
   } else if (aliases.length === 1) {
     condition += `; as ${aliases[0]}`;
   }
@@ -162,8 +184,12 @@ function buildBoundIfElseBlock(etm: ElementToMigrate, tmpl: string, offset: numb
 }
 
 function buildIfElseBlock(
-    etm: ElementToMigrate, tmpl: string, condition: string, elsePlaceholder: string,
-    offset: number): Result {
+  etm: ElementToMigrate,
+  tmpl: string,
+  condition: string,
+  elsePlaceholder: string,
+  offset: number,
+): Result {
   const lbString = etm.hasLineBreaks ? '\n' : '';
 
   const originals = getOriginals(etm, tmpl, offset);
@@ -187,32 +213,47 @@ function buildIfElseBlock(
 }
 
 function buildStandardIfThenElseBlock(
-    etm: ElementToMigrate, tmpl: string, thenString: string, elseString: string,
-    offset: number): Result {
+  etm: ElementToMigrate,
+  tmpl: string,
+  thenString: string,
+  elseString: string,
+  offset: number,
+): Result {
   // includes the mandatory semicolon before as
-  const condition = etm.getCondition()
-                        .replace(' as ', '; as ')
-                        // replace 'let' with 'as' whatever spaces are between ; and 'let'
-                        .replace(/;\s*let/g, '; as');
+  const condition = etm
+    .getCondition()
+    .replace(' as ', '; as ')
+    // replace 'let' with 'as' whatever spaces are between ; and 'let'
+    .replace(/;\s*let/g, '; as');
   const thenPlaceholder = getPlaceholder(etm.getTemplateName(thenString, elseString));
   const elsePlaceholder = getPlaceholder(etm.getTemplateName(elseString));
   return buildIfThenElseBlock(etm, tmpl, condition, thenPlaceholder, elsePlaceholder, offset);
 }
 
 function buildStandardIfThenBlock(
-    etm: ElementToMigrate, tmpl: string, thenString: string, offset: number): Result {
+  etm: ElementToMigrate,
+  tmpl: string,
+  thenString: string,
+  offset: number,
+): Result {
   // includes the mandatory semicolon before as
-  const condition = etm.getCondition()
-                        .replace(' as ', '; as ')
-                        // replace 'let' with 'as' whatever spaces are between ; and 'let'
-                        .replace(/;\s*let/g, '; as');
+  const condition = etm
+    .getCondition()
+    .replace(' as ', '; as ')
+    // replace 'let' with 'as' whatever spaces are between ; and 'let'
+    .replace(/;\s*let/g, '; as');
   const thenPlaceholder = getPlaceholder(etm.getTemplateName(thenString));
   return buildIfThenBlock(etm, tmpl, condition, thenPlaceholder, offset);
 }
 
 function buildIfThenElseBlock(
-    etm: ElementToMigrate, tmpl: string, condition: string, thenPlaceholder: string,
-    elsePlaceholder: string, offset: number): Result {
+  etm: ElementToMigrate,
+  tmpl: string,
+  condition: string,
+  thenPlaceholder: string,
+  elsePlaceholder: string,
+  offset: number,
+): Result {
   const lbString = etm.hasLineBreaks ? '\n' : '';
 
   const originals = getOriginals(etm, tmpl, offset);
@@ -237,8 +278,12 @@ function buildIfThenElseBlock(
 }
 
 function buildIfThenBlock(
-    etm: ElementToMigrate, tmpl: string, condition: string, thenPlaceholder: string,
-    offset: number): Result {
+  etm: ElementToMigrate,
+  tmpl: string,
+  condition: string,
+  thenPlaceholder: string,
+  offset: number,
+): Result {
   const lbString = etm.hasLineBreaks ? '\n' : '';
 
   const originals = getOriginals(etm, tmpl, offset);
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/index.ts b/packages/core/schematics/ng-generate/control-flow-migration/index.ts
index 3717cc725c44f..6d1c98f7087b8 100644
--- a/packages/core/schematics/ng-generate/control-flow-migration/index.ts
+++ b/packages/core/schematics/ng-generate/control-flow-migration/index.ts
@@ -21,7 +21,7 @@ interface Options {
   format: boolean;
 }
 
-export default function(options: Options): Rule {
+export default function (options: Options): Rule {
   return async (tree: Tree, context: SchematicContext) => {
     const basePath = process.cwd();
     const pathToMigrate = normalizePath(join(basePath, options.path));
@@ -32,14 +32,20 @@ export default function(options: Options): Rule {
 
     if (!allPaths.length) {
       throw new SchematicsException(
-          'Could not find any tsconfig file. Cannot run the control flow migration.');
+        'Could not find any tsconfig file. Cannot run the control flow migration.',
+      );
     }
 
     let errors: string[] = [];
 
     for (const tsconfigPath of allPaths) {
-      const migrateErrors =
-          runControlFlowMigration(tree, tsconfigPath, basePath, pathToMigrate, options);
+      const migrateErrors = runControlFlowMigration(
+        tree,
+        tsconfigPath,
+        basePath,
+        pathToMigrate,
+        options,
+      );
       errors = [...errors, ...migrateErrors];
     }
 
@@ -53,21 +59,31 @@ export default function(options: Options): Rule {
 }
 
 function runControlFlowMigration(
-    tree: Tree, tsconfigPath: string, basePath: string, pathToMigrate: string,
-    schematicOptions: Options): string[] {
+  tree: Tree,
+  tsconfigPath: string,
+  basePath: string,
+  pathToMigrate: string,
+  schematicOptions: Options,
+): string[] {
   if (schematicOptions.path.startsWith('..')) {
     throw new SchematicsException(
-        'Cannot run control flow migration outside of the current project.');
+      'Cannot run control flow migration outside of the current project.',
+    );
   }
 
   const program = createMigrationProgram(tree, tsconfigPath, basePath);
-  const sourceFiles = program.getSourceFiles().filter(
-      sourceFile => sourceFile.fileName.startsWith(pathToMigrate) &&
-          canMigrateFile(basePath, sourceFile, program));
+  const sourceFiles = program
+    .getSourceFiles()
+    .filter(
+      (sourceFile) =>
+        sourceFile.fileName.startsWith(pathToMigrate) &&
+        canMigrateFile(basePath, sourceFile, program),
+    );
 
   if (sourceFiles.length === 0) {
-    throw new SchematicsException(`Could not find any files to migrate under the path ${
-        pathToMigrate}. Cannot run the control flow migration.`);
+    throw new SchematicsException(
+      `Could not find any files to migrate under the path ${pathToMigrate}. Cannot run the control flow migration.`,
+    );
   }
 
   const analysis = new Map<string, AnalyzedFile>();
@@ -92,8 +108,14 @@ function runControlFlowMigration(
       const template = content.slice(start, end);
       const length = (end ?? content.length) - start;
 
-      const {migrated, errors} =
-          migrateTemplate(template, type, node, file, schematicOptions.format, analysis);
+      const {migrated, errors} = migrateTemplate(
+        template,
+        type,
+        node,
+        file,
+        schematicOptions.format,
+        analysis,
+      );
 
       if (migrated !== null) {
         update.remove(start, length);
@@ -118,12 +140,12 @@ function runControlFlowMigration(
 }
 
 function sortFilePaths(names: string[]): string[] {
-  names.sort((a, _) => a.endsWith('.html') ? -1 : 0);
+  names.sort((a, _) => (a.endsWith('.html') ? -1 : 0));
   return names;
 }
 
 function generateErrorMessage(path: string, errors: MigrateError[]): string {
   let errorMessage = `Template "${path}" encountered ${errors.length} errors during migration:\n`;
-  errorMessage += errors.map(e => ` - ${e.type}: ${e.error}\n`);
+  errorMessage += errors.map((e) => ` - ${e.type}: ${e.error}\n`);
   return errorMessage;
 }
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/migration.ts b/packages/core/schematics/ng-generate/control-flow-migration/migration.ts
index c62bc74b8a024..908c572a63841 100644
--- a/packages/core/schematics/ng-generate/control-flow-migration/migration.ts
+++ b/packages/core/schematics/ng-generate/control-flow-migration/migration.ts
@@ -12,16 +12,35 @@ import {migrateCase} from './cases';
 import {migrateFor} from './fors';
 import {migrateIf} from './ifs';
 import {migrateSwitch} from './switches';
-import {AnalyzedFile, endI18nMarker, endMarker, MigrateError, startI18nMarker, startMarker} from './types';
-import {canRemoveCommonModule, formatTemplate, parseTemplate, processNgTemplates, removeImports, validateI18nStructure, validateMigratedTemplate} from './util';
+import {
+  AnalyzedFile,
+  endI18nMarker,
+  endMarker,
+  MigrateError,
+  startI18nMarker,
+  startMarker,
+} from './types';
+import {
+  canRemoveCommonModule,
+  formatTemplate,
+  parseTemplate,
+  processNgTemplates,
+  removeImports,
+  validateI18nStructure,
+  validateMigratedTemplate,
+} from './util';
 
 /**
  * Actually migrates a given template to the new syntax
  */
 export function migrateTemplate(
-    template: string, templateType: string, node: ts.Node, file: AnalyzedFile,
-    format: boolean = true,
-    analyzedFiles: Map<string, AnalyzedFile>|null): {migrated: string, errors: MigrateError[]} {
+  template: string,
+  templateType: string,
+  node: ts.Node,
+  file: AnalyzedFile,
+  format: boolean = true,
+  analyzedFiles: Map<string, AnalyzedFile> | null,
+): {migrated: string; errors: MigrateError[]} {
   let errors: MigrateError[] = [];
   let migrated = template;
   if (templateType === 'template' || templateType === 'templateUrl') {
@@ -38,7 +57,7 @@ export function migrateTemplate(
     }
     migrated = templateResult.migrated;
     const changed =
-        ifResult.changed || forResult.changed || switchResult.changed || caseResult.changed;
+      ifResult.changed || forResult.changed || switchResult.changed || caseResult.changed;
     if (changed) {
       // determine if migrated template is a valid structure
       // if it is not, fail out
@@ -51,8 +70,10 @@ export function migrateTemplate(
     if (format && changed) {
       migrated = formatTemplate(migrated, templateType);
     }
-    const markerRegex =
-        new RegExp(`${startMarker}|${endMarker}|${startI18nMarker}|${endI18nMarker}`, 'gm');
+    const markerRegex = new RegExp(
+      `${startMarker}|${endMarker}|${startI18nMarker}|${endI18nMarker}`,
+      'gm',
+    );
     migrated = migrated.replace(markerRegex, '');
 
     file.removeCommonModule = canRemoveCommonModule(template);
@@ -61,8 +82,11 @@ export function migrateTemplate(
     // when migrating an external template, we have to pass back
     // whether it's safe to remove the CommonModule to the
     // original component class source file
-    if (templateType === 'templateUrl' && analyzedFiles !== null &&
-        analyzedFiles.has(file.sourceFile.fileName)) {
+    if (
+      templateType === 'templateUrl' &&
+      analyzedFiles !== null &&
+      analyzedFiles.has(file.sourceFile.fileName)
+    ) {
       const componentFile = analyzedFiles.get(file.sourceFile.fileName)!;
       componentFile.getSortedRanges();
       // we have already checked the template file to see if it is safe to remove the imports
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/switches.ts b/packages/core/schematics/ng-generate/control-flow-migration/switches.ts
index a096f84771c2e..16c89d46a0448 100644
--- a/packages/core/schematics/ng-generate/control-flow-migration/switches.ts
+++ b/packages/core/schematics/ng-generate/control-flow-migration/switches.ts
@@ -9,21 +9,36 @@
 import {Element, Node, Text, visitAll} from '@angular/compiler';
 
 import {cases} from './cases';
-import {ElementCollector, ElementToMigrate, endMarker, MigrateError, Result, startMarker} from './types';
-import {calculateNesting, getMainBlock, getOriginals, hasLineBreaks, parseTemplate, reduceNestingOffset} from './util';
+import {
+  ElementCollector,
+  ElementToMigrate,
+  endMarker,
+  MigrateError,
+  Result,
+  startMarker,
+} from './types';
+import {
+  calculateNesting,
+  getMainBlock,
+  getOriginals,
+  hasLineBreaks,
+  parseTemplate,
+  reduceNestingOffset,
+} from './util';
 
 export const ngswitch = '[ngSwitch]';
 
-const switches = [
-  ngswitch,
-];
+const switches = [ngswitch];
 
 /**
  * Replaces structural directive ngSwitch instances with new switch.
  * Returns null if the migration failed (e.g. there was a syntax error).
  */
-export function migrateSwitch(template: string):
-    {migrated: string, errors: MigrateError[], changed: boolean} {
+export function migrateSwitch(template: string): {
+  migrated: string;
+  errors: MigrateError[];
+  changed: boolean;
+} {
   let errors: MigrateError[] = [];
   let parsed = parseTemplate(template);
   if (parsed.tree === undefined) {
@@ -70,8 +85,9 @@ function assertValidSwitchStructure(children: Node[]): void {
   for (const child of children) {
     if (child instanceof Text && child.value.trim() !== '') {
       throw new Error(
-          `Text node: "${child.value}" would result in invalid migrated @switch block structure. ` +
-          `@switch can only have @case or @default as children.`);
+        `Text node: "${child.value}" would result in invalid migrated @switch block structure. ` +
+          `@switch can only have @case or @default as children.`,
+      );
     } else if (child instanceof Element) {
       let hasCase = false;
       for (const attr of child.attrs) {
@@ -81,9 +97,9 @@ function assertValidSwitchStructure(children: Node[]): void {
       }
       if (!hasCase) {
         throw new Error(
-            `Element node: "${
-                child.name}" would result in invalid migrated @switch block structure. ` +
-            `@switch can only have @case or @default as children.`);
+          `Element node: "${child.name}" would result in invalid migrated @switch block structure. ` +
+            `@switch can only have @case or @default as children.`,
+        );
       }
     }
   }
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/types.ts b/packages/core/schematics/ng-generate/control-flow-migration/types.ts
index 9788a0b162028..a07cb9ce7bb97 100644
--- a/packages/core/schematics/ng-generate/control-flow-migration/types.ts
+++ b/packages/core/schematics/ng-generate/control-flow-migration/types.ts
@@ -24,18 +24,21 @@ export const startI18nMarker = '⚈';
 export const endI18nMarker = '⚉';
 
 export const importRemovals = [
-  'NgIf', 'NgIfElse', 'NgIfThenElse', 'NgFor', 'NgForOf', 'NgForTrackBy', 'NgSwitch',
-  'NgSwitchCase', 'NgSwitchDefault'
+  'NgIf',
+  'NgIfElse',
+  'NgIfThenElse',
+  'NgFor',
+  'NgForOf',
+  'NgForTrackBy',
+  'NgSwitch',
+  'NgSwitchCase',
+  'NgSwitchDefault',
 ];
 
 export const importWithCommonRemovals = [...importRemovals, 'CommonModule'];
 
 function allFormsOf(selector: string): string[] {
-  return [
-    selector,
-    `*${selector}`,
-    `[${selector}]`,
-  ];
+  return [selector, `*${selector}`, `[${selector}]`];
 }
 
 const commonModuleDirectives = new Set([
@@ -72,25 +75,28 @@ const commonModulePipes = [
   'titlecase',
   'percent',
   'titlecase',
-].map(name => pipeMatchRegExpFor(name));
+].map((name) => pipeMatchRegExpFor(name));
 
 /**
  * Represents a range of text within a file. Omitting the end
  * means that it's until the end of the file.
  */
 type Range = {
-  start: number,
-  end?: number, node: ts.Node, type: string, remove: boolean,
+  start: number;
+  end?: number;
+  node: ts.Node;
+  type: string;
+  remove: boolean;
 };
 
 export type Offsets = {
-  pre: number,
-  post: number,
+  pre: number;
+  post: number;
 };
 
 export type Result = {
-  tmpl: string,
-  offsets: Offsets,
+  tmpl: string;
+  offsets: Offsets;
 };
 
 export interface ForAttributes {
@@ -104,7 +110,7 @@ export interface AliasAttributes {
 }
 
 export interface ParseResult {
-  tree: ParseTreeResult|undefined;
+  tree: ParseTreeResult | undefined;
   errors: MigrateError[];
 }
 
@@ -112,8 +118,8 @@ export interface ParseResult {
  * Represents an error that happened during migration
  */
 export type MigrateError = {
-  type: string,
-  error: unknown,
+  type: string;
+  error: unknown;
 };
 
 /**
@@ -122,17 +128,21 @@ export type MigrateError = {
 export class ElementToMigrate {
   el: Element;
   attr: Attribute;
-  elseAttr: Attribute|undefined;
-  thenAttr: Attribute|undefined;
-  forAttrs: ForAttributes|undefined;
-  aliasAttrs: AliasAttributes|undefined;
+  elseAttr: Attribute | undefined;
+  thenAttr: Attribute | undefined;
+  forAttrs: ForAttributes | undefined;
+  aliasAttrs: AliasAttributes | undefined;
   nestCount = 0;
   hasLineBreaks = false;
 
   constructor(
-      el: Element, attr: Attribute, elseAttr: Attribute|undefined = undefined,
-      thenAttr: Attribute|undefined = undefined, forAttrs: ForAttributes|undefined = undefined,
-      aliasAttrs: AliasAttributes|undefined = undefined) {
+    el: Element,
+    attr: Attribute,
+    elseAttr: Attribute | undefined = undefined,
+    thenAttr: Attribute | undefined = undefined,
+    forAttrs: ForAttributes | undefined = undefined,
+    aliasAttrs: AliasAttributes | undefined = undefined,
+  ) {
     this.el = el;
     this.attr = attr;
     this.elseAttr = elseAttr;
@@ -154,15 +164,17 @@ export class ElementToMigrate {
       condition = condition.slice(0, elseIx);
     }
 
-    let letVar = chunks.find(c => c.search(/\s*let\s/) > -1);
+    let letVar = chunks.find((c) => c.search(/\s*let\s/) > -1);
     return condition + (letVar ? ';' + letVar : '');
   }
 
   getTemplateName(targetStr: string, secondStr?: string): string {
     const targetLocation = this.attr.value.indexOf(targetStr);
     const secondTargetLocation = secondStr ? this.attr.value.indexOf(secondStr) : undefined;
-    let templateName =
-        this.attr.value.slice(targetLocation + targetStr.length, secondTargetLocation);
+    let templateName = this.attr.value.slice(
+      targetLocation + targetStr.length,
+      secondTargetLocation,
+    );
     if (templateName.startsWith(':')) {
       templateName = templateName.slice(1).trim();
     }
@@ -170,24 +182,27 @@ export class ElementToMigrate {
   }
 
   getValueEnd(offset: number): number {
-    return (this.attr.valueSpan ? (this.attr.valueSpan.end.offset + 1) :
-                                  this.attr.keySpan!.end.offset) -
-        offset;
+    return (
+      (this.attr.valueSpan ? this.attr.valueSpan.end.offset + 1 : this.attr.keySpan!.end.offset) -
+      offset
+    );
   }
 
   hasChildren(): boolean {
     return this.el.children.length > 0;
   }
 
-  getChildSpan(offset: number): {childStart: number, childEnd: number} {
+  getChildSpan(offset: number): {childStart: number; childEnd: number} {
     const childStart = this.el.children[0].sourceSpan.start.offset - offset;
     const childEnd = this.el.children[this.el.children.length - 1].sourceSpan.end.offset - offset;
     return {childStart, childEnd};
   }
 
   shouldRemoveElseAttr(): boolean {
-    return (this.el.name === 'ng-template' || this.el.name === 'ng-container') &&
-        this.elseAttr !== undefined;
+    return (
+      (this.el.name === 'ng-template' || this.el.name === 'ng-container') &&
+      this.elseAttr !== undefined
+    );
   }
 
   getElseAttrStr(): string {
@@ -220,10 +235,10 @@ export class Template {
   count: number = 0;
   contents: string = '';
   children: string = '';
-  i18n: Attribute|null = null;
+  i18n: Attribute | null = null;
   attributes: Attribute[];
 
-  constructor(el: Element, name: string, i18n: Attribute|null) {
+  constructor(el: Element, name: string, i18n: Attribute | null) {
     this.el = el;
     this.name = name;
     this.attributes = el.attrs;
@@ -231,16 +246,16 @@ export class Template {
   }
 
   get isNgTemplateOutlet() {
-    return this.attributes.find(attr => attr.name === '*ngTemplateOutlet') !== undefined;
+    return this.attributes.find((attr) => attr.name === '*ngTemplateOutlet') !== undefined;
   }
 
   get outletContext() {
-    const letVar = this.attributes.find(attr => attr.name.startsWith('let-'));
+    const letVar = this.attributes.find((attr) => attr.name.startsWith('let-'));
     return letVar ? `; context: {$implicit: ${letVar.name.split('-')[1]}}` : '';
   }
 
   generateTemplateOutlet() {
-    const attr = this.attributes.find(attr => attr.name === '*ngTemplateOutlet');
+    const attr = this.attributes.find((attr) => attr.name === '*ngTemplateOutlet');
     const outletValue = attr?.value ?? this.name.slice(1);
     return `<ng-container *ngTemplateOutlet="${outletValue}${this.outletContext}"></ng-container>`;
   }
@@ -250,8 +265,9 @@ export class Template {
     this.children = '';
     if (this.el.children.length > 0) {
       this.children = tmpl.slice(
-          this.el.children[0].sourceSpan.start.offset,
-          this.el.children[this.el.children.length - 1].sourceSpan.end.offset);
+        this.el.children[0].sourceSpan.start.offset,
+        this.el.children[this.el.children.length - 1].sourceSpan.end.offset,
+      );
     }
   }
 }
@@ -272,13 +288,14 @@ export class AnalyzedFile {
   /** Returns the ranges in the order in which they should be migrated. */
   getSortedRanges(): Range[] {
     // templates first for checking on whether certain imports can be safely removed
-    this.templateRanges = this.ranges.slice()
-                              .filter(x => x.type === 'template' || x.type === 'templateUrl')
-                              .sort((aStart, bStart) => bStart.start - aStart.start);
-    this.importRanges =
-        this.ranges.slice()
-            .filter(x => x.type === 'importDecorator' || x.type === 'importDeclaration')
-            .sort((aStart, bStart) => bStart.start - aStart.start);
+    this.templateRanges = this.ranges
+      .slice()
+      .filter((x) => x.type === 'template' || x.type === 'templateUrl')
+      .sort((aStart, bStart) => bStart.start - aStart.start);
+    this.importRanges = this.ranges
+      .slice()
+      .filter((x) => x.type === 'importDecorator' || x.type === 'importDeclaration')
+      .sort((aStart, bStart) => bStart.start - aStart.start);
     return [...this.templateRanges, ...this.importRanges];
   }
 
@@ -289,8 +306,11 @@ export class AnalyzedFile {
    * @param range Range to be added.
    */
   static addRange(
-      path: string, sourceFile: ts.SourceFile, analyzedFiles: Map<string, AnalyzedFile>,
-      range: Range): void {
+    path: string,
+    sourceFile: ts.SourceFile,
+    analyzedFiles: Map<string, AnalyzedFile>,
+    range: Range,
+  ): void {
     let analysis = analyzedFiles.get(path);
 
     if (!analysis) {
@@ -298,8 +318,9 @@ export class AnalyzedFile {
       analyzedFiles.set(path, analysis);
     }
 
-    const duplicate =
-        analysis.ranges.find(current => current.start === range.start && current.end === range.end);
+    const duplicate = analysis.ranges.find(
+      (current) => current.start === range.start && current.end === range.end,
+    );
 
     if (!duplicate) {
       analysis.ranges.push(range);
@@ -311,7 +332,7 @@ export class AnalyzedFile {
    * It is only run on .ts files.
    */
   verifyCanRemoveImports() {
-    const importDeclaration = this.importRanges.find(r => r.type === 'importDeclaration');
+    const importDeclaration = this.importRanges.find((r) => r.type === 'importDeclaration');
     const instances = lookupIdentifiersInSourceFile(this.sourceFile, importWithCommonRemovals);
     let foundImportDeclaration = false;
     let count = 0;
@@ -357,7 +378,7 @@ export class CommonCollector extends RecursiveVisitor {
   }
 
   private hasPipes(input: string): boolean {
-    return commonModulePipes.some(regexp => regexp.test(input));
+    return commonModulePipes.some((regexp) => regexp.test(input));
   }
 }
 
@@ -366,7 +387,7 @@ export class i18nCollector extends RecursiveVisitor {
   readonly elements: Element[] = [];
 
   override visitElement(el: Element): void {
-    if (el.attrs.find(a => a.name === 'i18n') !== undefined) {
+    if (el.attrs.find((a) => a.name === 'i18n') !== undefined) {
       this.elements.push(el);
     }
     super.visitElement(el, null);
@@ -385,13 +406,15 @@ export class ElementCollector extends RecursiveVisitor {
     if (el.attrs.length > 0) {
       for (const attr of el.attrs) {
         if (this._attributes.includes(attr.name)) {
-          const elseAttr = el.attrs.find(x => x.name === boundngifelse);
-          const thenAttr =
-              el.attrs.find(x => x.name === boundngifthenelse || x.name === boundngifthen);
+          const elseAttr = el.attrs.find((x) => x.name === boundngifelse);
+          const thenAttr = el.attrs.find(
+            (x) => x.name === boundngifthenelse || x.name === boundngifthen,
+          );
           const forAttrs = attr.name === nakedngfor ? this.getForAttrs(el) : undefined;
           const aliasAttrs = this.getAliasAttrs(el);
           this.elements.push(
-              new ElementToMigrate(el, attr, elseAttr, thenAttr, forAttrs, aliasAttrs));
+            new ElementToMigrate(el, attr, elseAttr, thenAttr, forAttrs, aliasAttrs),
+          );
         }
       }
     }
@@ -452,8 +475,9 @@ export class TemplateCollector extends RecursiveVisitor {
         this.elements.push(new ElementToMigrate(el, templateAttr));
       } else if (templateAttr !== null) {
         throw new Error(
-            `A duplicate ng-template name "${templateAttr.name}" was found. ` +
-            `The control flow migration requires unique ng-template names within a component.`);
+          `A duplicate ng-template name "${templateAttr.name}" was found. ` +
+            `The control flow migration requires unique ng-template names within a component.`,
+        );
       }
     }
     super.visitElement(el, null);
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/util.ts b/packages/core/schematics/ng-generate/control-flow-migration/util.ts
index 40ab66b95f75e..1d53c0864d092 100644
--- a/packages/core/schematics/ng-generate/control-flow-migration/util.ts
+++ b/packages/core/schematics/ng-generate/control-flow-migration/util.ts
@@ -10,7 +10,23 @@ import {Attribute, Element, HtmlParser, Node, ParseTreeResult, visitAll} from '@
 import {dirname, join} from 'path';
 import ts from 'typescript';
 
-import {AnalyzedFile, CommonCollector, ElementCollector, ElementToMigrate, endI18nMarker, endMarker, i18nCollector, importRemovals, importWithCommonRemovals, MigrateError, ParseResult, startI18nMarker, startMarker, Template, TemplateCollector} from './types';
+import {
+  AnalyzedFile,
+  CommonCollector,
+  ElementCollector,
+  ElementToMigrate,
+  endI18nMarker,
+  endMarker,
+  i18nCollector,
+  importRemovals,
+  importWithCommonRemovals,
+  MigrateError,
+  ParseResult,
+  startI18nMarker,
+  startMarker,
+  Template,
+  TemplateCollector,
+} from './types';
 
 const startMarkerRegex = new RegExp(startMarker, 'gm');
 const endMarkerRegex = new RegExp(endMarker, 'gm');
@@ -24,7 +40,7 @@ const replaceMarkerRegex = new RegExp(`${startMarker}|${endMarker}`, 'gm');
  * @param analyzedFiles Map in which to store the results.
  */
 export function analyze(sourceFile: ts.SourceFile, analyzedFiles: Map<string, AnalyzedFile>) {
-  forEachClass(sourceFile, node => {
+  forEachClass(sourceFile, (node) => {
     if (ts.isClassDeclaration(node)) {
       analyzeDecorators(node, sourceFile, analyzedFiles);
     } else {
@@ -34,7 +50,7 @@ export function analyze(sourceFile: ts.SourceFile, analyzedFiles: Map<string, An
 }
 
 function checkIfShouldChange(decl: ts.ImportDeclaration, file: AnalyzedFile) {
-  const range = file.importRanges.find(r => r.type === 'importDeclaration');
+  const range = file.importRanges.find((r) => r.type === 'importDeclaration');
   if (range === undefined || !range.remove) {
     return false;
   }
@@ -44,9 +60,12 @@ function checkIfShouldChange(decl: ts.ImportDeclaration, file: AnalyzedFile) {
   // and that's the only thing there, we should do nothing.
   const clause = decl.getChildAt(1) as ts.ImportClause;
   return !(
-      !file.removeCommonModule && clause.namedBindings && ts.isNamedImports(clause.namedBindings) &&
-      clause.namedBindings.elements.length === 1 &&
-      clause.namedBindings.elements[0].getText() === 'CommonModule');
+    !file.removeCommonModule &&
+    clause.namedBindings &&
+    ts.isNamedImports(clause.namedBindings) &&
+    clause.namedBindings.elements.length === 1 &&
+    clause.namedBindings.elements[0].getText() === 'CommonModule'
+  );
 }
 
 function updateImportDeclaration(decl: ts.ImportDeclaration, removeCommonModule: boolean): string {
@@ -63,26 +82,39 @@ function updateImportDeclaration(decl: ts.ImportDeclaration, removeCommonModule:
     removeComments: true,
   });
   const updated = ts.factory.updateImportDeclaration(
-      decl, decl.modifiers, updatedClause, decl.moduleSpecifier, undefined);
+    decl,
+    decl.modifiers,
+    updatedClause,
+    decl.moduleSpecifier,
+    undefined,
+  );
   return printer.printNode(ts.EmitHint.Unspecified, updated, clause.getSourceFile());
 }
 
-function updateImportClause(clause: ts.ImportClause, removeCommonModule: boolean): ts.ImportClause|
-    null {
+function updateImportClause(
+  clause: ts.ImportClause,
+  removeCommonModule: boolean,
+): ts.ImportClause | null {
   if (clause.namedBindings && ts.isNamedImports(clause.namedBindings)) {
     const removals = removeCommonModule ? importWithCommonRemovals : importRemovals;
-    const elements = clause.namedBindings.elements.filter(el => !removals.includes(el.getText()));
+    const elements = clause.namedBindings.elements.filter((el) => !removals.includes(el.getText()));
     if (elements.length === 0) {
       return null;
     }
     clause = ts.factory.updateImportClause(
-        clause, clause.isTypeOnly, clause.name, ts.factory.createNamedImports(elements));
+      clause,
+      clause.isTypeOnly,
+      clause.name,
+      ts.factory.createNamedImports(elements),
+    );
   }
   return clause;
 }
 
 function updateClassImports(
-    propAssignment: ts.PropertyAssignment, removeCommonModule: boolean): string|null {
+  propAssignment: ts.PropertyAssignment,
+  removeCommonModule: boolean,
+): string | null {
   const printer = ts.createPrinter();
   const importList = propAssignment.initializer;
 
@@ -92,57 +124,73 @@ function updateClassImports(
   }
 
   const removals = removeCommonModule ? importWithCommonRemovals : importRemovals;
-  const elements =
-      importList.elements.filter(el => !ts.isIdentifier(el) || !removals.includes(el.text));
+  const elements = importList.elements.filter(
+    (el) => !ts.isIdentifier(el) || !removals.includes(el.text),
+  );
   if (elements.length === importList.elements.length) {
     // nothing changed
     return null;
   }
   const updatedElements = ts.factory.updateArrayLiteralExpression(importList, elements);
-  const updatedAssignment =
-      ts.factory.updatePropertyAssignment(propAssignment, propAssignment.name, updatedElements);
+  const updatedAssignment = ts.factory.updatePropertyAssignment(
+    propAssignment,
+    propAssignment.name,
+    updatedElements,
+  );
   return printer.printNode(
-      ts.EmitHint.Unspecified, updatedAssignment, updatedAssignment.getSourceFile());
+    ts.EmitHint.Unspecified,
+    updatedAssignment,
+    updatedAssignment.getSourceFile(),
+  );
 }
 
 function analyzeImportDeclarations(
-    node: ts.ImportDeclaration, sourceFile: ts.SourceFile,
-    analyzedFiles: Map<string, AnalyzedFile>) {
+  node: ts.ImportDeclaration,
+  sourceFile: ts.SourceFile,
+  analyzedFiles: Map<string, AnalyzedFile>,
+) {
   if (node.getText().indexOf('@angular/common') === -1) {
     return;
   }
   const clause = node.getChildAt(1) as ts.ImportClause;
   if (clause.namedBindings && ts.isNamedImports(clause.namedBindings)) {
-    const elements =
-        clause.namedBindings.elements.filter(el => importWithCommonRemovals.includes(el.getText()));
+    const elements = clause.namedBindings.elements.filter((el) =>
+      importWithCommonRemovals.includes(el.getText()),
+    );
     if (elements.length > 0) {
       AnalyzedFile.addRange(sourceFile.fileName, sourceFile, analyzedFiles, {
         start: node.getStart(),
         end: node.getEnd(),
         node,
         type: 'importDeclaration',
-        remove: true
+        remove: true,
       });
     }
   }
 }
 
 function analyzeDecorators(
-    node: ts.ClassDeclaration, sourceFile: ts.SourceFile,
-    analyzedFiles: Map<string, AnalyzedFile>) {
+  node: ts.ClassDeclaration,
+  sourceFile: ts.SourceFile,
+  analyzedFiles: Map<string, AnalyzedFile>,
+) {
   // Note: we have a utility to resolve the Angular decorators from a class declaration already.
   // We don't use it here, because it requires access to the type checker which makes it more
   // time-consuming to run internally.
-  const decorator = ts.getDecorators(node)?.find(dec => {
-    return ts.isCallExpression(dec.expression) && ts.isIdentifier(dec.expression.expression) &&
-        dec.expression.expression.text === 'Component';
-  }) as (ts.Decorator & {expression: ts.CallExpression}) |
-      undefined;
-
-  const metadata = decorator && decorator.expression.arguments.length > 0 &&
-          ts.isObjectLiteralExpression(decorator.expression.arguments[0]) ?
-      decorator.expression.arguments[0] :
-      null;
+  const decorator = ts.getDecorators(node)?.find((dec) => {
+    return (
+      ts.isCallExpression(dec.expression) &&
+      ts.isIdentifier(dec.expression.expression) &&
+      dec.expression.expression.text === 'Component'
+    );
+  }) as (ts.Decorator & {expression: ts.CallExpression}) | undefined;
+
+  const metadata =
+    decorator &&
+    decorator.expression.arguments.length > 0 &&
+    ts.isObjectLiteralExpression(decorator.expression.arguments[0])
+      ? decorator.expression.arguments[0]
+      : null;
 
   if (!metadata) {
     return;
@@ -151,8 +199,10 @@ function analyzeDecorators(
   for (const prop of metadata.properties) {
     // All the properties we care about should have static
     // names and be initialized to a static string.
-    if (!ts.isPropertyAssignment(prop) ||
-        (!ts.isIdentifier(prop.name) && !ts.isStringLiteralLike(prop.name))) {
+    if (
+      !ts.isPropertyAssignment(prop) ||
+      (!ts.isIdentifier(prop.name) && !ts.isStringLiteralLike(prop.name))
+    ) {
       continue;
     }
 
@@ -182,9 +232,12 @@ function analyzeDecorators(
         // Leave the end as undefined which means that the range is until the end of the file.
         if (ts.isStringLiteralLike(prop.initializer)) {
           const path = join(dirname(sourceFile.fileName), prop.initializer.text);
-          AnalyzedFile.addRange(
-              path, sourceFile, analyzedFiles,
-              {start: 0, node: prop, type: 'templateUrl', remove: true});
+          AnalyzedFile.addRange(path, sourceFile, analyzedFiles, {
+            start: 0,
+            node: prop,
+            type: 'templateUrl',
+            remove: true,
+          });
         }
         break;
     }
@@ -198,8 +251,10 @@ function getNestedCount(etm: ElementToMigrate, aggregator: number[]) {
   if (aggregator.length === 0) {
     return 0;
   }
-  if (etm.el.sourceSpan.start.offset < aggregator[aggregator.length - 1] &&
-      etm.el.sourceSpan.end.offset !== aggregator[aggregator.length - 1]) {
+  if (
+    etm.el.sourceSpan.start.offset < aggregator[aggregator.length - 1] &&
+    etm.el.sourceSpan.end.offset !== aggregator[aggregator.length - 1]
+  ) {
     // element is nested
     aggregator.push(etm.el.sourceSpan.end.offset);
     return aggregator.length - 1;
@@ -231,7 +286,7 @@ export function parseTemplate(template: string): ParseResult {
 
     // Don't migrate invalid templates.
     if (parsed.errors && parsed.errors.length > 0) {
-      const errors = parsed.errors.map(e => ({type: 'parse', error: e}));
+      const errors = parsed.errors.map((e) => ({type: 'parse', error: e}));
       return {tree: undefined, errors};
     }
   } catch (e: any) {
@@ -247,8 +302,9 @@ export function validateMigratedTemplate(migrated: string, fileName: string): Mi
     errors.push({
       type: 'parse',
       error: new Error(
-          `The migration resulted in invalid HTML for ${fileName}. ` +
-          `Please check the template for valid HTML structures and run the migration again.`)
+        `The migration resulted in invalid HTML for ${fileName}. ` +
+          `Please check the template for valid HTML structures and run the migration again.`,
+      ),
     });
   }
   if (parsed.tree) {
@@ -260,18 +316,19 @@ export function validateMigratedTemplate(migrated: string, fileName: string): Mi
   return errors;
 }
 
-export function validateI18nStructure(parsed: ParseTreeResult, fileName: string): Error|null {
+export function validateI18nStructure(parsed: ParseTreeResult, fileName: string): Error | null {
   const visitor = new i18nCollector();
   visitAll(visitor, parsed.rootNodes);
-  const parents = visitor.elements.filter(el => el.children.length > 0);
+  const parents = visitor.elements.filter((el) => el.children.length > 0);
   for (const p of parents) {
     for (const el of visitor.elements) {
       if (el === p) continue;
       if (isChildOf(p, el)) {
         return new Error(
-            `i18n Nesting error: The migration would result in invalid i18n nesting for ` +
+          `i18n Nesting error: The migration would result in invalid i18n nesting for ` +
             `${fileName}. Element with i18n attribute "${p.name}" would result having a child of ` +
-            `element with i18n attribute "${el.name}". Please fix and re-run the migration.`);
+            `element with i18n attribute "${el.name}". Please fix and re-run the migration.`,
+        );
       }
     }
   }
@@ -279,8 +336,10 @@ export function validateI18nStructure(parsed: ParseTreeResult, fileName: string)
 }
 
 function isChildOf(parent: Element, el: Element): boolean {
-  return parent.sourceSpan.start.offset < el.sourceSpan.start.offset &&
-      parent.sourceSpan.end.offset > el.sourceSpan.end.offset;
+  return (
+    parent.sourceSpan.start.offset < el.sourceSpan.start.offset &&
+    parent.sourceSpan.end.offset > el.sourceSpan.end.offset
+  );
 }
 
 /** Possible placeholders that can be generated by `getPlaceholder`. */
@@ -293,7 +352,9 @@ export enum PlaceholderKind {
  * Wraps a string in a placeholder that makes it easier to identify during replacement operations.
  */
 export function getPlaceholder(
-    value: string, kind: PlaceholderKind = PlaceholderKind.Default): string {
+  value: string,
+  kind: PlaceholderKind = PlaceholderKind.Default,
+): string {
   const name = `<<<ɵɵngControlFlowMigration_${kind}ɵɵ>>>`;
   return `___${name}${value}${name}___`;
 }
@@ -302,7 +363,9 @@ export function getPlaceholder(
  * calculates the level of nesting of the items in the collector
  */
 export function calculateNesting(
-    visitor: ElementCollector|TemplateCollector, hasLineBreaks: boolean): void {
+  visitor: ElementCollector | TemplateCollector,
+  hasLineBreaks: boolean,
+): void {
   // start from top of template
   // loop through each element
   let nestedQueue: number[] = [];
@@ -323,7 +386,7 @@ export function calculateNesting(
 }
 
 function escapeRegExp(val: string) {
-  return val.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');  // $& means the whole matched string
+  return val.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
 
 /**
@@ -337,7 +400,11 @@ export function hasLineBreaks(template: string): boolean {
  * properly adjusts template offsets based on current nesting levels
  */
 export function reduceNestingOffset(
-    el: ElementToMigrate, nestLevel: number, offset: number, postOffsets: number[]): number {
+  el: ElementToMigrate,
+  nestLevel: number,
+  offset: number,
+  postOffsets: number[],
+): number {
   if (el.nestCount <= nestLevel) {
     const count = nestLevel - el.nestCount;
     // reduced nesting, add postoffset
@@ -373,7 +440,9 @@ export function getTemplates(template: string): Map<string, Template> {
 }
 
 export function updateTemplates(
-    template: string, templates: Map<string, Template>): Map<string, Template> {
+  template: string,
+  templates: Map<string, Template>,
+): Map<string, Template> {
   const updatedTemplates = getTemplates(template);
   for (let [key, tmpl] of updatedTemplates) {
     templates.set(key, tmpl);
@@ -387,7 +456,9 @@ function wrapIntoI18nContainer(i18nAttr: Attribute, content: string) {
 }
 
 function generatei18nContainer(
-    i18nAttr: Attribute, middle: string): {start: string, middle: string, end: string} {
+  i18nAttr: Attribute,
+  middle: string,
+): {start: string; middle: string; end: string} {
   const i18n = i18nAttr.value === '' ? 'i18n' : `i18n="${i18nAttr.value}"`;
   return {start: `<ng-container ${i18n}>`, middle, end: `</ng-container>`};
 }
@@ -395,7 +466,7 @@ function generatei18nContainer(
 /**
  * Counts, replaces, and removes any necessary ng-templates post control flow migration
  */
-export function processNgTemplates(template: string): {migrated: string, err: Error|undefined} {
+export function processNgTemplates(template: string): {migrated: string; err: Error | undefined} {
   // count usage
   try {
     const templates = getTemplates(template);
@@ -451,10 +522,14 @@ function replaceRemainingPlaceholders(template: string): string {
   const placeholders = [...template.matchAll(replaceRegex)];
   for (let ph of placeholders) {
     const placeholder = ph[0];
-    const name =
-        placeholder.slice(placeholderStart.length, placeholder.length - placeholderEnd.length);
-    template =
-        template.replace(placeholder, `<ng-template [ngTemplateOutlet]="${name}"></ng-template>`);
+    const name = placeholder.slice(
+      placeholderStart.length,
+      placeholder.length - placeholderEnd.length,
+    );
+    template = template.replace(
+      placeholder,
+      `<ng-template [ngTemplateOutlet]="${name}"></ng-template>`,
+    );
   }
   return template;
 }
@@ -490,42 +565,49 @@ export function removeImports(template: string, node: ts.Node, file: AnalyzedFil
  * retrieves the original block of text in the template for length comparison during migration
  * processing
  */
-export function getOriginals(etm: ElementToMigrate, tmpl: string, offset: number):
-    {start: string, end: string, childLength: number, children: string[], childNodes: Node[]} {
+export function getOriginals(
+  etm: ElementToMigrate,
+  tmpl: string,
+  offset: number,
+): {start: string; end: string; childLength: number; children: string[]; childNodes: Node[]} {
   // original opening block
   if (etm.el.children.length > 0) {
     const childStart = etm.el.children[0].sourceSpan.start.offset - offset;
     const childEnd = etm.el.children[etm.el.children.length - 1].sourceSpan.end.offset - offset;
     const start = tmpl.slice(
-        etm.el.sourceSpan.start.offset - offset,
-        etm.el.children[0].sourceSpan.start.offset - offset);
+      etm.el.sourceSpan.start.offset - offset,
+      etm.el.children[0].sourceSpan.start.offset - offset,
+    );
     // original closing block
     const end = tmpl.slice(
-        etm.el.children[etm.el.children.length - 1].sourceSpan.end.offset - offset,
-        etm.el.sourceSpan.end.offset - offset);
+      etm.el.children[etm.el.children.length - 1].sourceSpan.end.offset - offset,
+      etm.el.sourceSpan.end.offset - offset,
+    );
     const childLength = childEnd - childStart;
     return {
       start,
       end,
       childLength,
       children: getOriginalChildren(etm.el.children, tmpl, offset),
-      childNodes: etm.el.children
+      childNodes: etm.el.children,
     };
   }
   // self closing or no children
-  const start =
-      tmpl.slice(etm.el.sourceSpan.start.offset - offset, etm.el.sourceSpan.end.offset - offset);
+  const start = tmpl.slice(
+    etm.el.sourceSpan.start.offset - offset,
+    etm.el.sourceSpan.end.offset - offset,
+  );
   // original closing block
   return {start, end: '', childLength: 0, children: [], childNodes: []};
 }
 
 function getOriginalChildren(children: Node[], tmpl: string, offset: number) {
-  return children.map(child => {
+  return children.map((child) => {
     return tmpl.slice(child.sourceSpan.start.offset - offset, child.sourceSpan.end.offset - offset);
   });
 }
 
-function isI18nTemplate(etm: ElementToMigrate, i18nAttr: Attribute|undefined): boolean {
+function isI18nTemplate(etm: ElementToMigrate, i18nAttr: Attribute | undefined): boolean {
   let attrCount = countAttributes(etm);
   const safeToRemove = etm.el.attrs.length === attrCount + (i18nAttr !== undefined ? 1 : 0);
   return etm.el.name === 'ng-template' && i18nAttr !== undefined && safeToRemove;
@@ -555,9 +637,12 @@ function countAttributes(etm: ElementToMigrate): number {
 /**
  * builds the proper contents of what goes inside a given control flow block after migration
  */
-export function getMainBlock(etm: ElementToMigrate, tmpl: string, offset: number):
-    {start: string, middle: string, end: string} {
-  const i18nAttr = etm.el.attrs.find(x => x.name === 'i18n');
+export function getMainBlock(
+  etm: ElementToMigrate,
+  tmpl: string,
+  offset: number,
+): {start: string; middle: string; end: string} {
+  const i18nAttr = etm.el.attrs.find((x) => x.name === 'i18n');
 
   // removable containers are ng-templates or ng-containers that no longer need to exist
   // post migration
@@ -584,8 +669,9 @@ export function getMainBlock(etm: ElementToMigrate, tmpl: string, offset: number
   const valEnd = etm.getValueEnd(offset);
 
   // the index of the children start and end span, if they exist. Otherwise use the value end.
-  const {childStart, childEnd} =
-      etm.hasChildren() ? etm.getChildSpan(offset) : {childStart: valEnd, childEnd: valEnd};
+  const {childStart, childEnd} = etm.hasChildren()
+    ? etm.getChildSpan(offset)
+    : {childStart: valEnd, childEnd: valEnd};
 
   // the beginning of the updated string in the main block, for example: <div some="attributes">
   let start = tmpl.slice(etm.start(offset), attrStart) + tmpl.slice(valEnd, childStart);
@@ -627,8 +713,13 @@ function generateI18nMarkers(tmpl: string): string {
 function addI18nMarkers(tmpl: string, el: Element, offset: number): string {
   const startPos = el.children[0].sourceSpan.start.offset + offset;
   const endPos = el.children[el.children.length - 1].sourceSpan.end.offset + offset;
-  return tmpl.slice(0, startPos) + startI18nMarker + tmpl.slice(startPos, endPos) + endI18nMarker +
-      tmpl.slice(endPos);
+  return (
+    tmpl.slice(0, startPos) +
+    startI18nMarker +
+    tmpl.slice(startPos, endPos) +
+    endI18nMarker +
+    tmpl.slice(endPos)
+  );
 }
 
 const selfClosingList = 'input|br|img|base|wbr|area|col|embed|hr|link|meta|param|source|track';
@@ -706,18 +797,25 @@ export function formatTemplate(tmpl: string, templateType: string): string {
     let isDoubleQuotes = false;
     for (let [index, line] of lines.entries()) {
       depth +=
-          [...line.matchAll(startMarkerRegex)].length - [...line.matchAll(endMarkerRegex)].length;
+        [...line.matchAll(startMarkerRegex)].length - [...line.matchAll(endMarkerRegex)].length;
       inMigratedBlock = depth > 0;
-      i18nDepth += [...line.matchAll(startI18nMarkerRegex)].length -
-          [...line.matchAll(endI18nMarkerRegex)].length;
+      i18nDepth +=
+        [...line.matchAll(startI18nMarkerRegex)].length -
+        [...line.matchAll(endI18nMarkerRegex)].length;
 
       let lineWasMigrated = false;
       if (line.match(replaceMarkerRegex)) {
         line = line.replace(replaceMarkerRegex, '');
         lineWasMigrated = true;
       }
-      if ((line.trim() === '' && index !== 0 && index !== lines.length - 1) &&
-          (inMigratedBlock || lineWasMigrated) && !inI18nBlock && !inAttribute) {
+      if (
+        line.trim() === '' &&
+        index !== 0 &&
+        index !== lines.length - 1 &&
+        (inMigratedBlock || lineWasMigrated) &&
+        !inI18nBlock &&
+        !inAttribute
+      ) {
         // skip blank lines except if it's the first line or last line
         // this preserves leading and trailing spaces if they are already present
         continue;
@@ -726,15 +824,18 @@ export function formatTemplate(tmpl: string, templateType: string): string {
       if (templateType === 'template' && index <= 1) {
         // first real line of an inline template
         const ind = line.search(/\S/);
-        mindent = (ind > -1) ? line.slice(0, ind) : '';
+        mindent = ind > -1 ? line.slice(0, ind) : '';
       }
 
       // if a block closes, an element closes, and it's not an element on a single line or the end
       // of a self closing tag
-      if ((closeBlockRegex.test(line) ||
-           (closeElRegex.test(line) &&
-            (!singleLineElRegex.test(line) && !closeMultiLineElRegex.test(line)))) &&
-          indent !== '') {
+      if (
+        (closeBlockRegex.test(line) ||
+          (closeElRegex.test(line) &&
+            !singleLineElRegex.test(line) &&
+            !closeMultiLineElRegex.test(line))) &&
+        indent !== ''
+      ) {
         // close block, reduce indent
         indent = indent.slice(2);
       }
@@ -750,14 +851,18 @@ export function formatTemplate(tmpl: string, templateType: string): string {
         isDoubleQuotes = false;
       }
 
-      const newLine = (inI18nBlock || inAttribute) ?
-          line :
-          mindent + (line.trim() !== '' ? indent : '') + line.trim();
+      const newLine =
+        inI18nBlock || inAttribute
+          ? line
+          : mindent + (line.trim() !== '' ? indent : '') + line.trim();
       formatted.push(newLine);
 
-      if (!isOpenDoubleAttr && !isOpenSingleAttr &&
-          ((inAttribute && isDoubleQuotes && closeAttrDoubleRegex.test(line)) ||
-           (inAttribute && !isDoubleQuotes && closeAttrSingleRegex.test(line)))) {
+      if (
+        !isOpenDoubleAttr &&
+        !isOpenSingleAttr &&
+        ((inAttribute && isDoubleQuotes && closeAttrDoubleRegex.test(line)) ||
+          (inAttribute && !isDoubleQuotes && closeAttrSingleRegex.test(line)))
+      ) {
         inAttribute = false;
       }
 
@@ -778,8 +883,12 @@ export function formatTemplate(tmpl: string, templateType: string): string {
 
       // this matches an open control flow block, an open HTML element, but excludes single line
       // self closing tags
-      if ((openBlockRegex.test(line) || openElRegex.test(line)) && !singleLineElRegex.test(line) &&
-          !selfClosingRegex.test(line) && !openSelfClosingRegex.test(line)) {
+      if (
+        (openBlockRegex.test(line) || openElRegex.test(line)) &&
+        !singleLineElRegex.test(line) &&
+        !selfClosingRegex.test(line) &&
+        !openSelfClosingRegex.test(line)
+      ) {
         // open block, increase indent
         indent += '  ';
       }
@@ -799,7 +908,9 @@ export function formatTemplate(tmpl: string, templateType: string): string {
 
 /** Executes a callback on each class declaration in a file. */
 function forEachClass(
-    sourceFile: ts.SourceFile, callback: (node: ts.ClassDeclaration|ts.ImportDeclaration) => void) {
+  sourceFile: ts.SourceFile,
+  callback: (node: ts.ClassDeclaration | ts.ImportDeclaration) => void,
+) {
   sourceFile.forEachChild(function walk(node) {
     if (ts.isClassDeclaration(node) || ts.isImportDeclaration(node)) {
       callback(node);
diff --git a/packages/core/schematics/ng-generate/standalone-migration/index.ts b/packages/core/schematics/ng-generate/standalone-migration/index.ts
index 9b04ff6c87ae3..2e16704904ab9 100644
--- a/packages/core/schematics/ng-generate/standalone-migration/index.ts
+++ b/packages/core/schematics/ng-generate/standalone-migration/index.ts
@@ -32,7 +32,7 @@ interface Options {
   mode: MigrationMode;
 }
 
-export default function(options: Options): Rule {
+export default function (options: Options): Rule {
   return async (tree, context) => {
     const {buildPaths, testPaths} = await getProjectTsConfigPaths(tree);
     const basePath = process.cwd();
@@ -44,7 +44,8 @@ export default function(options: Options): Rule {
 
     if (!allPaths.length) {
       throw new SchematicsException(
-          'Could not find any tsconfig file. Cannot run the standalone migration.');
+        'Could not find any tsconfig file. Cannot run the standalone migration.',
+      );
     }
 
     for (const tsconfigPath of allPaths) {
@@ -52,69 +53,109 @@ export default function(options: Options): Rule {
     }
 
     if (migratedFiles === 0) {
-      throw new SchematicsException(`Could not find any files to migrate under the path ${
-          pathToMigrate}. Cannot run the standalone migration.`);
+      throw new SchematicsException(
+        `Could not find any files to migrate under the path ${pathToMigrate}. Cannot run the standalone migration.`,
+      );
     }
 
     context.logger.info('🎉 Automated migration step has finished! 🎉');
     context.logger.info(
-        'IMPORTANT! Please verify manually that your application builds and behaves as expected.');
+      'IMPORTANT! Please verify manually that your application builds and behaves as expected.',
+    );
     context.logger.info(
-        `See https://angular.dev/reference/migrations/standalone for more information.`);
+      `See https://angular.dev/reference/migrations/standalone for more information.`,
+    );
   };
 }
 
 function standaloneMigration(
-    tree: Tree, tsconfigPath: string, basePath: string, pathToMigrate: string,
-    schematicOptions: Options, oldProgram?: NgtscProgram): number {
+  tree: Tree,
+  tsconfigPath: string,
+  basePath: string,
+  pathToMigrate: string,
+  schematicOptions: Options,
+  oldProgram?: NgtscProgram,
+): number {
   if (schematicOptions.path.startsWith('..')) {
     throw new SchematicsException(
-        'Cannot run standalone migration outside of the current project.');
+      'Cannot run standalone migration outside of the current project.',
+    );
   }
 
   const {host, options, rootNames} = createProgramOptions(
-      tree, tsconfigPath, basePath, undefined, undefined,
-      {
-        _enableTemplateTypeChecker: true,  // Required for the template type checker to work.
-        compileNonExportedClasses: true,   // We want to migrate non-exported classes too.
-        // Avoid checking libraries to speed up the migration.
-        skipLibCheck: true,
-        skipDefaultLibCheck: true,
-      });
+    tree,
+    tsconfigPath,
+    basePath,
+    undefined,
+    undefined,
+    {
+      _enableTemplateTypeChecker: true, // Required for the template type checker to work.
+      compileNonExportedClasses: true, // We want to migrate non-exported classes too.
+      // Avoid checking libraries to speed up the migration.
+      skipLibCheck: true,
+      skipDefaultLibCheck: true,
+    },
+  );
   const referenceLookupExcludedFiles = /node_modules|\.ngtypecheck\.ts/;
   const program = createProgram({rootNames, host, options, oldProgram}) as NgtscProgram;
   const printer = ts.createPrinter();
 
   if (existsSync(pathToMigrate) && !statSync(pathToMigrate).isDirectory()) {
-    throw new SchematicsException(`Migration path ${
-        pathToMigrate} has to be a directory. Cannot run the standalone migration.`);
+    throw new SchematicsException(
+      `Migration path ${pathToMigrate} has to be a directory. Cannot run the standalone migration.`,
+    );
   }
 
-  const sourceFiles = program.getTsProgram().getSourceFiles().filter(
-      sourceFile => sourceFile.fileName.startsWith(pathToMigrate) &&
-          canMigrateFile(basePath, sourceFile, program.getTsProgram()));
+  const sourceFiles = program
+    .getTsProgram()
+    .getSourceFiles()
+    .filter(
+      (sourceFile) =>
+        sourceFile.fileName.startsWith(pathToMigrate) &&
+        canMigrateFile(basePath, sourceFile, program.getTsProgram()),
+    );
 
   if (sourceFiles.length === 0) {
     return 0;
   }
 
   let pendingChanges: ChangesByFile;
-  let filesToRemove: Set<ts.SourceFile>|null = null;
+  let filesToRemove: Set<ts.SourceFile> | null = null;
 
   if (schematicOptions.mode === MigrationMode.pruneModules) {
     const result = pruneNgModules(
-        program, host, basePath, rootNames, sourceFiles, printer, undefined,
-        referenceLookupExcludedFiles);
+      program,
+      host,
+      basePath,
+      rootNames,
+      sourceFiles,
+      printer,
+      undefined,
+      referenceLookupExcludedFiles,
+    );
     pendingChanges = result.pendingChanges;
     filesToRemove = result.filesToRemove;
   } else if (schematicOptions.mode === MigrationMode.standaloneBootstrap) {
     pendingChanges = toStandaloneBootstrap(
-        program, host, basePath, rootNames, sourceFiles, printer, undefined,
-        referenceLookupExcludedFiles, knownInternalAliasRemapper);
+      program,
+      host,
+      basePath,
+      rootNames,
+      sourceFiles,
+      printer,
+      undefined,
+      referenceLookupExcludedFiles,
+      knownInternalAliasRemapper,
+    );
   } else {
     // This shouldn't happen, but default to `MigrationMode.toStandalone` just in case.
-    pendingChanges =
-        toStandalone(sourceFiles, program, printer, undefined, knownInternalAliasRemapper);
+    pendingChanges = toStandalone(
+      sourceFiles,
+      program,
+      printer,
+      undefined,
+      knownInternalAliasRemapper,
+    );
   }
 
   for (const [file, changes] of pendingChanges.entries()) {
@@ -125,7 +166,7 @@ function standaloneMigration(
 
     const update = tree.beginUpdate(relative(basePath, file.fileName));
 
-    changes.forEach(change => {
+    changes.forEach((change) => {
       if (change.removeLength != null) {
         update.remove(change.start, change.removeLength);
       }
@@ -145,10 +186,16 @@ function standaloneMigration(
   // Note that we can't run the module pruning internally without propagating the changes to disk,
   // because there may be conflicting AST node changes.
   if (schematicOptions.mode === MigrationMode.standaloneBootstrap) {
-    return standaloneMigration(
-               tree, tsconfigPath, basePath, pathToMigrate,
-               {...schematicOptions, mode: MigrationMode.pruneModules}, program) +
-        sourceFiles.length;
+    return (
+      standaloneMigration(
+        tree,
+        tsconfigPath,
+        basePath,
+        pathToMigrate,
+        {...schematicOptions, mode: MigrationMode.pruneModules},
+        program,
+      ) + sourceFiles.length
+    );
   }
 
   return sourceFiles.length;
diff --git a/packages/core/schematics/ng-generate/standalone-migration/prune-modules.ts b/packages/core/schematics/ng-generate/standalone-migration/prune-modules.ts
index e3016c520ab51..79bd01ea42c86 100644
--- a/packages/core/schematics/ng-generate/standalone-migration/prune-modules.ts
+++ b/packages/core/schematics/ng-generate/standalone-migration/prune-modules.ts
@@ -13,7 +13,14 @@ import {ChangeTracker, ImportRemapper} from '../../utils/change_tracker';
 import {getAngularDecorators, NgDecorator} from '../../utils/ng_decorators';
 import {closestNode} from '../../utils/typescript/nodes';
 
-import {findClassDeclaration, findLiteralProperty, getNodeLookup, offsetsToNodes, ReferenceResolver, UniqueItemTracker} from './util';
+import {
+  findClassDeclaration,
+  findLiteralProperty,
+  getNodeLookup,
+  offsetsToNodes,
+  ReferenceResolver,
+  UniqueItemTracker,
+} from './util';
 
 /** Keeps track of the places from which we need to remove AST nodes. */
 interface RemovalLocations {
@@ -24,20 +31,31 @@ interface RemovalLocations {
 }
 
 export function pruneNgModules(
-    program: NgtscProgram, host: ts.CompilerHost, basePath: string, rootFileNames: string[],
-    sourceFiles: ts.SourceFile[], printer: ts.Printer, importRemapper?: ImportRemapper,
-    referenceLookupExcludedFiles?: RegExp) {
+  program: NgtscProgram,
+  host: ts.CompilerHost,
+  basePath: string,
+  rootFileNames: string[],
+  sourceFiles: ts.SourceFile[],
+  printer: ts.Printer,
+  importRemapper?: ImportRemapper,
+  referenceLookupExcludedFiles?: RegExp,
+) {
   const filesToRemove = new Set<ts.SourceFile>();
   const tracker = new ChangeTracker(printer, importRemapper);
   const tsProgram = program.getTsProgram();
   const typeChecker = tsProgram.getTypeChecker();
-  const referenceResolver =
-      new ReferenceResolver(program, host, rootFileNames, basePath, referenceLookupExcludedFiles);
+  const referenceResolver = new ReferenceResolver(
+    program,
+    host,
+    rootFileNames,
+    basePath,
+    referenceLookupExcludedFiles,
+  );
   const removalLocations: RemovalLocations = {
     arrays: new UniqueItemTracker<ts.ArrayLiteralExpression, ts.Node>(),
     imports: new UniqueItemTracker<ts.NamedImports, ts.Node>(),
     exports: new UniqueItemTracker<ts.NamedExports, ts.Node>(),
-    unknown: new Set<ts.Node>()
+    unknown: new Set<ts.Node>(),
   };
   const classesToRemove = new Set<ts.ClassDeclaration>();
   const barrelExports = new UniqueItemTracker<ts.SourceFile, ts.ExportDeclaration>();
@@ -48,10 +66,15 @@ export function pruneNgModules(
       collectRemovalLocations(node, removalLocations, referenceResolver, program);
       classesToRemove.add(node);
     } else if (
-        ts.isExportDeclaration(node) && !node.exportClause && node.moduleSpecifier &&
-        ts.isStringLiteralLike(node.moduleSpecifier) && node.moduleSpecifier.text.startsWith('.')) {
-      const exportedSourceFile =
-          typeChecker.getSymbolAtLocation(node.moduleSpecifier)?.valueDeclaration?.getSourceFile();
+      ts.isExportDeclaration(node) &&
+      !node.exportClause &&
+      node.moduleSpecifier &&
+      ts.isStringLiteralLike(node.moduleSpecifier) &&
+      node.moduleSpecifier.text.startsWith('.')
+    ) {
+      const exportedSourceFile = typeChecker
+        .getSymbolAtLocation(node.moduleSpecifier)
+        ?.valueDeclaration?.getSourceFile();
 
       if (exportedSourceFile) {
         barrelExports.track(exportedSourceFile, node);
@@ -105,8 +128,11 @@ export function pruneNgModules(
  * @param program
  */
 function collectRemovalLocations(
-    ngModule: ts.ClassDeclaration, removalLocations: RemovalLocations,
-    referenceResolver: ReferenceResolver, program: NgtscProgram) {
+  ngModule: ts.ClassDeclaration,
+  removalLocations: RemovalLocations,
+  referenceResolver: ReferenceResolver,
+  program: NgtscProgram,
+) {
   const refsByFile = referenceResolver.findReferencesInProject(ngModule.name!);
   const tsProgram = program.getTsProgram();
   const nodes = new Set<ts.Node>();
@@ -148,14 +174,18 @@ function collectRemovalLocations(
  * @param tracker Tracker in which to register the changes.
  */
 function removeArrayReferences(
-    locations: UniqueItemTracker<ts.ArrayLiteralExpression, ts.Node>,
-    tracker: ChangeTracker): void {
+  locations: UniqueItemTracker<ts.ArrayLiteralExpression, ts.Node>,
+  tracker: ChangeTracker,
+): void {
   for (const [array, toRemove] of locations.getEntries()) {
     const newElements = filterRemovedElements(array.elements, toRemove);
     tracker.replaceNode(
+      array,
+      ts.factory.updateArrayLiteralExpression(
         array,
-        ts.factory.updateArrayLiteralExpression(
-            array, ts.factory.createNodeArray(newElements, array.elements.hasTrailingComma)));
+        ts.factory.createNodeArray(newElements, array.elements.hasTrailingComma),
+      ),
+    );
   }
 }
 
@@ -165,7 +195,9 @@ function removeArrayReferences(
  * @param tracker Tracker in which to register the changes.
  */
 function removeImportReferences(
-    locations: UniqueItemTracker<ts.NamedImports, ts.Node>, tracker: ChangeTracker) {
+  locations: UniqueItemTracker<ts.NamedImports, ts.Node>,
+  tracker: ChangeTracker,
+) {
   for (const [namedImports, toRemove] of locations.getEntries()) {
     const newElements = filterRemovedElements(namedImports.elements, toRemove);
 
@@ -177,9 +209,14 @@ function removeImportReferences(
       // e.g. `import Foo, {ModuleToRemove} from './foo';` becomes `import Foo from './foo';`.
       if (importClause && importClause.name) {
         tracker.replaceNode(
+          importClause,
+          ts.factory.updateImportClause(
             importClause,
-            ts.factory.updateImportClause(
-                importClause, importClause.isTypeOnly, importClause.name, undefined));
+            importClause.isTypeOnly,
+            importClause.name,
+            undefined,
+          ),
+        );
       } else {
         // Otherwise we can drop the entire declaration.
         const declaration = closestNode(namedImports, ts.isImportDeclaration);
@@ -201,7 +238,9 @@ function removeImportReferences(
  * @param tracker Tracker in which to register the changes.
  */
 function removeExportReferences(
-    locations: UniqueItemTracker<ts.NamedExports, ts.Node>, tracker: ChangeTracker) {
+  locations: UniqueItemTracker<ts.NamedExports, ts.Node>,
+  tracker: ChangeTracker,
+) {
   for (const [namedExports, toRemove] of locations.getEntries()) {
     const newElements = filterRemovedElements(namedExports.elements, toRemove);
 
@@ -238,14 +277,16 @@ function canRemoveClass(node: ts.ClassDeclaration, typeChecker: ts.TypeChecker):
   }
 
   // Unsupported case, e.g. `@NgModule(SOME_VALUE)`.
-  if (decorator.expression.arguments.length > 0 &&
-      !ts.isObjectLiteralExpression(decorator.expression.arguments[0])) {
+  if (
+    decorator.expression.arguments.length > 0 &&
+    !ts.isObjectLiteralExpression(decorator.expression.arguments[0])
+  ) {
     return false;
   }
 
   // We can't remove modules that have class members. We make an exception for an
   // empty constructor which may have been generated by a tool and forgotten.
-  if (node.members.length > 0 && node.members.some(member => !isEmptyConstructor(member))) {
+  if (node.members.length > 0 && node.members.some((member) => !isEmptyConstructor(member))) {
     return false;
   }
 
@@ -266,13 +307,17 @@ function canRemoveClass(node: ts.ClassDeclaration, typeChecker: ts.TypeChecker):
       }
 
       const depDeclaration = findClassDeclaration(dep, typeChecker);
-      const depNgModule =
-          depDeclaration ? findNgModuleDecorator(depDeclaration, typeChecker) : null;
+      const depNgModule = depDeclaration
+        ? findNgModuleDecorator(depDeclaration, typeChecker)
+        : null;
 
       // If any of the dependencies of the class is an `NgModule` that can't be removed, the class
       // itself can't be removed either, because it may be part of a transitive dependency chain.
-      if (depDeclaration !== null && depNgModule !== null &&
-          !canRemoveClass(depDeclaration, typeChecker)) {
+      if (
+        depDeclaration !== null &&
+        depNgModule !== null &&
+        !canRemoveClass(depDeclaration, typeChecker)
+      ) {
         return false;
       }
     }
@@ -282,9 +327,12 @@ function canRemoveClass(node: ts.ClassDeclaration, typeChecker: ts.TypeChecker):
   // Also err on the side of caution and don't remove modules where any of the aforementioned
   // properties aren't initialized to an array literal.
   for (const prop of literal.properties) {
-    if (isNonEmptyNgModuleProperty(prop) &&
-        (prop.name.text === 'declarations' || prop.name.text === 'providers' ||
-         prop.name.text === 'bootstrap')) {
+    if (
+      isNonEmptyNgModuleProperty(prop) &&
+      (prop.name.text === 'declarations' ||
+        prop.name.text === 'providers' ||
+        prop.name.text === 'bootstrap')
+    ) {
       return false;
     }
   }
@@ -298,10 +346,15 @@ function canRemoveClass(node: ts.ClassDeclaration, typeChecker: ts.TypeChecker):
  * element.
  * @param node Node to be checked.
  */
-function isNonEmptyNgModuleProperty(node: ts.Node): node is ts.PropertyAssignment&
-    {name: ts.Identifier, initializer: ts.ArrayLiteralExpression} {
-  return ts.isPropertyAssignment(node) && ts.isIdentifier(node.name) &&
-      ts.isArrayLiteralExpression(node.initializer) && node.initializer.elements.length > 0;
+function isNonEmptyNgModuleProperty(
+  node: ts.Node,
+): node is ts.PropertyAssignment & {name: ts.Identifier; initializer: ts.ArrayLiteralExpression} {
+  return (
+    ts.isPropertyAssignment(node) &&
+    ts.isIdentifier(node.name) &&
+    ts.isArrayLiteralExpression(node.initializer) &&
+    node.initializer.elements.length > 0
+  );
 }
 
 /**
@@ -316,9 +369,11 @@ function canRemoveFile(sourceFile: ts.SourceFile, nodesToBeRemoved: Set<ts.Node>
       continue;
     }
 
-    if (ts.isExportDeclaration(node) ||
-        (ts.canHaveModifiers(node) &&
-         ts.getModifiers(node)?.some(m => m.kind === ts.SyntaxKind.ExportKeyword))) {
+    if (
+      ts.isExportDeclaration(node) ||
+      (ts.canHaveModifiers(node) &&
+        ts.getModifiers(node)?.some((m) => m.kind === ts.SyntaxKind.ExportKeyword))
+    ) {
       return false;
     }
   }
@@ -332,9 +387,12 @@ function canRemoveFile(sourceFile: ts.SourceFile, nodesToBeRemoved: Set<ts.Node>
  * @param child Child node that is being checked.
  */
 function contains(parent: ts.Node, child: ts.Node): boolean {
-  return parent === child ||
-      (parent.getSourceFile().fileName === child.getSourceFile().fileName &&
-       child.getStart() >= parent.getStart() && child.getStart() <= parent.getEnd());
+  return (
+    parent === child ||
+    (parent.getSourceFile().fileName === child.getSourceFile().fileName &&
+      child.getStart() >= parent.getStart() &&
+      child.getStart() <= parent.getEnd())
+  );
 }
 
 /**
@@ -343,8 +401,10 @@ function contains(parent: ts.Node, child: ts.Node): boolean {
  * @param toRemove Nodes that should be removed.
  */
 function filterRemovedElements<T extends ts.Node>(
-    elements: ts.NodeArray<T>, toRemove: Set<ts.Node>): T[] {
-  return elements.filter(el => {
+  elements: ts.NodeArray<T>,
+  toRemove: Set<ts.Node>,
+): T[] {
+  return elements.filter((el) => {
     for (const node of toRemove) {
       // Check that the element contains the node, despite knowing with relative certainty that it
       // does, because this allows us to unwrap some nodes. E.g. if we have `[((toRemove))]`, we
@@ -359,8 +419,11 @@ function filterRemovedElements<T extends ts.Node>(
 
 /** Returns whether a node as an empty constructor. */
 function isEmptyConstructor(node: ts.Node): boolean {
-  return ts.isConstructorDeclaration(node) && node.parameters.length === 0 &&
-      (node.body == null || node.body.statements.length === 0);
+  return (
+    ts.isConstructorDeclaration(node) &&
+    node.parameters.length === 0 &&
+    (node.body == null || node.body.statements.length === 0)
+  );
 }
 
 /**
@@ -376,14 +439,18 @@ function addRemovalTodos(nodes: Set<ts.Node>, tracker: ChangeTracker) {
     // the same node. In practice it is unlikely, because the second time the node won't be picked
     // up by the language service as a reference, because the class won't exist anymore.
     tracker.insertText(
-        node.getSourceFile(), node.getFullStart(),
-        ` /* TODO(standalone-migration): clean up removed NgModule reference manually. */ `);
+      node.getSourceFile(),
+      node.getFullStart(),
+      ` /* TODO(standalone-migration): clean up removed NgModule reference manually. */ `,
+    );
   }
 }
 
 /** Finds the `NgModule` decorator in a class, if it exists. */
-function findNgModuleDecorator(node: ts.ClassDeclaration, typeChecker: ts.TypeChecker): NgDecorator|
-    null {
+function findNgModuleDecorator(
+  node: ts.ClassDeclaration,
+  typeChecker: ts.TypeChecker,
+): NgDecorator | null {
   const decorators = getAngularDecorators(typeChecker, ts.getDecorators(node) || []);
-  return decorators.find(decorator => decorator.name === 'NgModule') || null;
+  return decorators.find((decorator) => decorator.name === 'NgModule') || null;
 }
diff --git a/packages/core/schematics/ng-generate/standalone-migration/standalone-bootstrap.ts b/packages/core/schematics/ng-generate/standalone-migration/standalone-bootstrap.ts
index 147603dce4c10..e87fa89db8e25 100644
--- a/packages/core/schematics/ng-generate/standalone-migration/standalone-bootstrap.ts
+++ b/packages/core/schematics/ng-generate/standalone-migration/standalone-bootstrap.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {NgtscProgram} from '@angular/compiler-cli';
 import {TemplateTypeChecker} from '@angular/compiler-cli/private/migrations';
 import {dirname, join} from 'path';
@@ -16,8 +15,26 @@ import {ChangeTracker, ImportRemapper} from '../../utils/change_tracker';
 import {getAngularDecorators} from '../../utils/ng_decorators';
 import {closestNode} from '../../utils/typescript/nodes';
 
-import {ComponentImportsRemapper, convertNgModuleDeclarationToStandalone, extractDeclarationsFromModule, findTestObjectsToMigrate, migrateTestDeclarations} from './to-standalone';
-import {closestOrSelf, findClassDeclaration, findLiteralProperty, getNodeLookup, getRelativeImportPath, isClassReferenceInAngularModule, NamedClassDeclaration, NodeLookup, offsetsToNodes, ReferenceResolver, UniqueItemTracker} from './util';
+import {
+  ComponentImportsRemapper,
+  convertNgModuleDeclarationToStandalone,
+  extractDeclarationsFromModule,
+  findTestObjectsToMigrate,
+  migrateTestDeclarations,
+} from './to-standalone';
+import {
+  closestOrSelf,
+  findClassDeclaration,
+  findLiteralProperty,
+  getNodeLookup,
+  getRelativeImportPath,
+  isClassReferenceInAngularModule,
+  NamedClassDeclaration,
+  NodeLookup,
+  offsetsToNodes,
+  ReferenceResolver,
+  UniqueItemTracker,
+} from './util';
 
 /** Information extracted from a `bootstrapModule` call necessary to migrate it. */
 interface BootstrapCallAnalysis {
@@ -34,29 +51,44 @@ interface BootstrapCallAnalysis {
 }
 
 export function toStandaloneBootstrap(
-    program: NgtscProgram, host: ts.CompilerHost, basePath: string, rootFileNames: string[],
-    sourceFiles: ts.SourceFile[], printer: ts.Printer, importRemapper?: ImportRemapper,
-    referenceLookupExcludedFiles?: RegExp, componentImportRemapper?: ComponentImportsRemapper) {
+  program: NgtscProgram,
+  host: ts.CompilerHost,
+  basePath: string,
+  rootFileNames: string[],
+  sourceFiles: ts.SourceFile[],
+  printer: ts.Printer,
+  importRemapper?: ImportRemapper,
+  referenceLookupExcludedFiles?: RegExp,
+  componentImportRemapper?: ComponentImportsRemapper,
+) {
   const tracker = new ChangeTracker(printer, importRemapper);
   const typeChecker = program.getTsProgram().getTypeChecker();
   const templateTypeChecker = program.compiler.getTemplateTypeChecker();
-  const referenceResolver =
-      new ReferenceResolver(program, host, rootFileNames, basePath, referenceLookupExcludedFiles);
+  const referenceResolver = new ReferenceResolver(
+    program,
+    host,
+    rootFileNames,
+    basePath,
+    referenceLookupExcludedFiles,
+  );
   const bootstrapCalls: BootstrapCallAnalysis[] = [];
   const testObjects = new Set<ts.ObjectLiteralExpression>();
   const allDeclarations = new Set<ts.ClassDeclaration>();
 
   // `bootstrapApplication` doesn't include Protractor support by default
   // anymore so we have to opt the app in, if we detect it being used.
-  const additionalProviders = hasImport(program, rootFileNames, 'protractor') ?
-      new Map([['provideProtractorTestingSupport', '@angular/platform-browser']]) :
-      null;
+  const additionalProviders = hasImport(program, rootFileNames, 'protractor')
+    ? new Map([['provideProtractorTestingSupport', '@angular/platform-browser']])
+    : null;
 
   for (const sourceFile of sourceFiles) {
     sourceFile.forEachChild(function walk(node) {
-      if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) &&
-          node.expression.name.text === 'bootstrapModule' &&
-          isClassReferenceInAngularModule(node.expression, 'PlatformRef', 'core', typeChecker)) {
+      if (
+        ts.isCallExpression(node) &&
+        ts.isPropertyAccessExpression(node.expression) &&
+        node.expression.name.text === 'bootstrapModule' &&
+        isClassReferenceInAngularModule(node.expression, 'PlatformRef', 'core', typeChecker)
+      ) {
         const call = analyzeBootstrapCall(node, typeChecker, templateTypeChecker);
 
         if (call) {
@@ -66,20 +98,31 @@ export function toStandaloneBootstrap(
       node.forEachChild(walk);
     });
 
-    findTestObjectsToMigrate(sourceFile, typeChecker).forEach(obj => testObjects.add(obj));
+    findTestObjectsToMigrate(sourceFile, typeChecker).forEach((obj) => testObjects.add(obj));
   }
 
   for (const call of bootstrapCalls) {
-    call.declarations.forEach(decl => allDeclarations.add(decl));
+    call.declarations.forEach((decl) => allDeclarations.add(decl));
     migrateBootstrapCall(
-        call, tracker, additionalProviders, referenceResolver, typeChecker, printer);
+      call,
+      tracker,
+      additionalProviders,
+      referenceResolver,
+      typeChecker,
+      printer,
+    );
   }
 
   // The previous migrations explicitly skip over bootstrapped
   // declarations so we have to migrate them now.
   for (const declaration of allDeclarations) {
     convertNgModuleDeclarationToStandalone(
-        declaration, allDeclarations, tracker, templateTypeChecker, componentImportRemapper);
+      declaration,
+      allDeclarations,
+      tracker,
+      templateTypeChecker,
+      componentImportRemapper,
+    );
   }
 
   migrateTestDeclarations(testObjects, allDeclarations, tracker, templateTypeChecker, typeChecker);
@@ -94,8 +137,10 @@ export function toStandaloneBootstrap(
  * @param templateTypeChecker
  */
 function analyzeBootstrapCall(
-    call: ts.CallExpression, typeChecker: ts.TypeChecker,
-    templateTypeChecker: TemplateTypeChecker): BootstrapCallAnalysis|null {
+  call: ts.CallExpression,
+  typeChecker: ts.TypeChecker,
+  templateTypeChecker: TemplateTypeChecker,
+): BootstrapCallAnalysis | null {
   if (call.arguments.length === 0 || !ts.isIdentifier(call.arguments[0])) {
     return null;
   }
@@ -106,21 +151,28 @@ function analyzeBootstrapCall(
     return null;
   }
 
-  const decorator = getAngularDecorators(typeChecker, ts.getDecorators(declaration) || [])
-                        .find(decorator => decorator.name === 'NgModule');
+  const decorator = getAngularDecorators(typeChecker, ts.getDecorators(declaration) || []).find(
+    (decorator) => decorator.name === 'NgModule',
+  );
 
-  if (!decorator || decorator.node.expression.arguments.length === 0 ||
-      !ts.isObjectLiteralExpression(decorator.node.expression.arguments[0])) {
+  if (
+    !decorator ||
+    decorator.node.expression.arguments.length === 0 ||
+    !ts.isObjectLiteralExpression(decorator.node.expression.arguments[0])
+  ) {
     return null;
   }
 
   const metadata = decorator.node.expression.arguments[0];
   const bootstrapProp = findLiteralProperty(metadata, 'bootstrap');
 
-  if (!bootstrapProp || !ts.isPropertyAssignment(bootstrapProp) ||
-      !ts.isArrayLiteralExpression(bootstrapProp.initializer) ||
-      bootstrapProp.initializer.elements.length === 0 ||
-      !ts.isIdentifier(bootstrapProp.initializer.elements[0])) {
+  if (
+    !bootstrapProp ||
+    !ts.isPropertyAssignment(bootstrapProp) ||
+    !ts.isArrayLiteralExpression(bootstrapProp.initializer) ||
+    bootstrapProp.initializer.elements.length === 0 ||
+    !ts.isIdentifier(bootstrapProp.initializer.elements[0])
+  ) {
     return null;
   }
 
@@ -132,7 +184,7 @@ function analyzeBootstrapCall(
       metadata,
       component: component as NamedClassDeclaration,
       call,
-      declarations: extractDeclarationsFromModule(declaration, templateTypeChecker)
+      declarations: extractDeclarationsFromModule(declaration, templateTypeChecker),
     };
   }
 
@@ -150,9 +202,13 @@ function analyzeBootstrapCall(
  * @param printer
  */
 function migrateBootstrapCall(
-    analysis: BootstrapCallAnalysis, tracker: ChangeTracker,
-    additionalProviders: Map<string, string>|null, referenceResolver: ReferenceResolver,
-    typeChecker: ts.TypeChecker, printer: ts.Printer) {
+  analysis: BootstrapCallAnalysis,
+  tracker: ChangeTracker,
+  additionalProviders: Map<string, string> | null,
+  referenceResolver: ReferenceResolver,
+  typeChecker: ts.TypeChecker,
+  printer: ts.Printer,
+) {
   const sourceFile = analysis.call.getSourceFile();
   const moduleSourceFile = analysis.metadata.getSourceFile();
   const providers = findLiteralProperty(analysis.metadata, 'providers');
@@ -160,13 +216,15 @@ function migrateBootstrapCall(
   const nodesToCopy = new Set<ts.Node>();
   const providersInNewCall: ts.Expression[] = [];
   const moduleImportsInNewCall: ts.Expression[] = [];
-  let nodeLookup: NodeLookup|null = null;
+  let nodeLookup: NodeLookup | null = null;
 
   // Comment out the metadata so that it'll be removed when we run the module pruning afterwards.
   // If the pruning is left for some reason, the user will still have an actionable TODO.
   tracker.insertText(
-      moduleSourceFile, analysis.metadata.getStart(),
-      '/* TODO(standalone-migration): clean up removed NgModule class manually. \n');
+    moduleSourceFile,
+    analysis.metadata.getStart(),
+    '/* TODO(standalone-migration): clean up removed NgModule class manually. \n',
+  );
   tracker.insertText(moduleSourceFile, analysis.metadata.getEnd(), ' */');
 
   if (providers && ts.isPropertyAssignment(providers)) {
@@ -184,20 +242,33 @@ function migrateBootstrapCall(
   if (imports && ts.isPropertyAssignment(imports)) {
     nodeLookup = nodeLookup || getNodeLookup(moduleSourceFile);
     migrateImportsForBootstrapCall(
-        sourceFile, imports, nodeLookup, moduleImportsInNewCall, providersInNewCall, tracker,
-        nodesToCopy, referenceResolver, typeChecker);
+      sourceFile,
+      imports,
+      nodeLookup,
+      moduleImportsInNewCall,
+      providersInNewCall,
+      tracker,
+      nodesToCopy,
+      referenceResolver,
+      typeChecker,
+    );
   }
 
   if (additionalProviders) {
     additionalProviders.forEach((moduleSpecifier, name) => {
-      providersInNewCall.push(ts.factory.createCallExpression(
-          tracker.addImport(sourceFile, name, moduleSpecifier), undefined, undefined));
+      providersInNewCall.push(
+        ts.factory.createCallExpression(
+          tracker.addImport(sourceFile, name, moduleSpecifier),
+          undefined,
+          undefined,
+        ),
+      );
     });
   }
 
   if (nodesToCopy.size > 0) {
     let text = '\n\n';
-    nodesToCopy.forEach(node => {
+    nodesToCopy.forEach((node) => {
       const transformedNode = remapDynamicImports(sourceFile.fileName, node);
 
       // Use `getText` to try an preserve the original formatting. This only works if the node
@@ -223,45 +294,66 @@ function migrateBootstrapCall(
  * @param tracker Object keeping track of the changes to the different files.
  */
 function replaceBootstrapCallExpression(
-    analysis: BootstrapCallAnalysis, providers: ts.Expression[], modules: ts.Expression[],
-    tracker: ChangeTracker): void {
+  analysis: BootstrapCallAnalysis,
+  providers: ts.Expression[],
+  modules: ts.Expression[],
+  tracker: ChangeTracker,
+): void {
   const sourceFile = analysis.call.getSourceFile();
-  const componentPath =
-      getRelativeImportPath(sourceFile.fileName, analysis.component.getSourceFile().fileName);
+  const componentPath = getRelativeImportPath(
+    sourceFile.fileName,
+    analysis.component.getSourceFile().fileName,
+  );
   const args = [tracker.addImport(sourceFile, analysis.component.name.text, componentPath)];
-  const bootstrapExpression =
-      tracker.addImport(sourceFile, 'bootstrapApplication', '@angular/platform-browser');
+  const bootstrapExpression = tracker.addImport(
+    sourceFile,
+    'bootstrapApplication',
+    '@angular/platform-browser',
+  );
 
   if (providers.length > 0 || modules.length > 0) {
     const combinedProviders: ts.Expression[] = [];
 
     if (modules.length > 0) {
-      const importProvidersExpression =
-          tracker.addImport(sourceFile, 'importProvidersFrom', '@angular/core');
+      const importProvidersExpression = tracker.addImport(
+        sourceFile,
+        'importProvidersFrom',
+        '@angular/core',
+      );
       combinedProviders.push(
-          ts.factory.createCallExpression(importProvidersExpression, [], modules));
+        ts.factory.createCallExpression(importProvidersExpression, [], modules),
+      );
     }
 
     // Push the providers after `importProvidersFrom` call for better readability.
     combinedProviders.push(...providers);
 
     const providersArray = ts.factory.createNodeArray(
-        combinedProviders,
-        analysis.metadata.properties.hasTrailingComma && combinedProviders.length > 2);
+      combinedProviders,
+      analysis.metadata.properties.hasTrailingComma && combinedProviders.length > 2,
+    );
     const initializer = remapDynamicImports(
-        sourceFile.fileName,
-        ts.factory.createArrayLiteralExpression(providersArray, combinedProviders.length > 1));
-
-    args.push(ts.factory.createObjectLiteralExpression(
-        [ts.factory.createPropertyAssignment('providers', initializer)], true));
+      sourceFile.fileName,
+      ts.factory.createArrayLiteralExpression(providersArray, combinedProviders.length > 1),
+    );
+
+    args.push(
+      ts.factory.createObjectLiteralExpression(
+        [ts.factory.createPropertyAssignment('providers', initializer)],
+        true,
+      ),
+    );
   }
 
   tracker.replaceNode(
-      analysis.call, ts.factory.createCallExpression(bootstrapExpression, [], args),
-      // Note: it's important to pass in the source file that the nodes originated from!
-      // Otherwise TS won't print out literals inside of the providers that we're copying
-      // over from the module file.
-      undefined, analysis.metadata.getSourceFile());
+    analysis.call,
+    ts.factory.createCallExpression(bootstrapExpression, [], args),
+    // Note: it's important to pass in the source file that the nodes originated from!
+    // Otherwise TS won't print out literals inside of the providers that we're copying
+    // over from the module file.
+    undefined,
+    analysis.metadata.getSourceFile(),
+  );
 }
 
 /**
@@ -278,10 +370,16 @@ function replaceBootstrapCallExpression(
  * @param typeChecker
  */
 function migrateImportsForBootstrapCall(
-    sourceFile: ts.SourceFile, imports: ts.PropertyAssignment, nodeLookup: NodeLookup,
-    importsForNewCall: ts.Expression[], providersInNewCall: ts.Expression[], tracker: ChangeTracker,
-    nodesToCopy: Set<ts.Node>, referenceResolver: ReferenceResolver,
-    typeChecker: ts.TypeChecker): void {
+  sourceFile: ts.SourceFile,
+  imports: ts.PropertyAssignment,
+  nodeLookup: NodeLookup,
+  importsForNewCall: ts.Expression[],
+  providersInNewCall: ts.Expression[],
+  tracker: ChangeTracker,
+  nodesToCopy: Set<ts.Node>,
+  referenceResolver: ReferenceResolver,
+  typeChecker: ts.TypeChecker,
+): void {
   if (!ts.isArrayLiteralExpression(imports.initializer)) {
     importsForNewCall.push(imports.initializer);
     return;
@@ -289,21 +387,39 @@ function migrateImportsForBootstrapCall(
 
   for (const element of imports.initializer.elements) {
     // If the reference is to a `RouterModule.forRoot` call, we can try to migrate it.
-    if (ts.isCallExpression(element) && ts.isPropertyAccessExpression(element.expression) &&
-        element.arguments.length > 0 && element.expression.name.text === 'forRoot' &&
-        isClassReferenceInAngularModule(
-            element.expression.expression, 'RouterModule', 'router', typeChecker)) {
+    if (
+      ts.isCallExpression(element) &&
+      ts.isPropertyAccessExpression(element.expression) &&
+      element.arguments.length > 0 &&
+      element.expression.name.text === 'forRoot' &&
+      isClassReferenceInAngularModule(
+        element.expression.expression,
+        'RouterModule',
+        'router',
+        typeChecker,
+      )
+    ) {
       const options = element.arguments[1] as ts.Expression | undefined;
       const features = options ? getRouterModuleForRootFeatures(sourceFile, options, tracker) : [];
 
       // If the features come back as null, it means that the router
       // has a configuration that can't be migrated automatically.
       if (features !== null) {
-        providersInNewCall.push(ts.factory.createCallExpression(
-            tracker.addImport(sourceFile, 'provideRouter', '@angular/router'), [],
-            [element.arguments[0], ...features]));
+        providersInNewCall.push(
+          ts.factory.createCallExpression(
+            tracker.addImport(sourceFile, 'provideRouter', '@angular/router'),
+            [],
+            [element.arguments[0], ...features],
+          ),
+        );
         addNodesToCopy(
-            sourceFile, element.arguments[0], nodeLookup, tracker, nodesToCopy, referenceResolver);
+          sourceFile,
+          element.arguments[0],
+          nodeLookup,
+          tracker,
+          nodesToCopy,
+          referenceResolver,
+        );
         if (options) {
           addNodesToCopy(sourceFile, options, nodeLookup, tracker, nodesToCopy, referenceResolver);
         }
@@ -316,52 +432,85 @@ function migrateImportsForBootstrapCall(
       const animationsModule = 'platform-browser/animations';
       const animationsImport = `@angular/${animationsModule}`;
 
-      if (isClassReferenceInAngularModule(
-              element, 'BrowserAnimationsModule', animationsModule, typeChecker)) {
-        providersInNewCall.push(ts.factory.createCallExpression(
-            tracker.addImport(sourceFile, 'provideAnimations', animationsImport), [], []));
+      if (
+        isClassReferenceInAngularModule(
+          element,
+          'BrowserAnimationsModule',
+          animationsModule,
+          typeChecker,
+        )
+      ) {
+        providersInNewCall.push(
+          ts.factory.createCallExpression(
+            tracker.addImport(sourceFile, 'provideAnimations', animationsImport),
+            [],
+            [],
+          ),
+        );
         continue;
       }
 
       // `NoopAnimationsModule` can be replaced with `provideNoopAnimations`.
-      if (isClassReferenceInAngularModule(
-              element, 'NoopAnimationsModule', animationsModule, typeChecker)) {
-        providersInNewCall.push(ts.factory.createCallExpression(
-            tracker.addImport(sourceFile, 'provideNoopAnimations', animationsImport), [], []));
+      if (
+        isClassReferenceInAngularModule(
+          element,
+          'NoopAnimationsModule',
+          animationsModule,
+          typeChecker,
+        )
+      ) {
+        providersInNewCall.push(
+          ts.factory.createCallExpression(
+            tracker.addImport(sourceFile, 'provideNoopAnimations', animationsImport),
+            [],
+            [],
+          ),
+        );
         continue;
       }
 
       // `HttpClientModule` can be replaced with `provideHttpClient()`.
       const httpClientModule = 'common/http';
       const httpClientImport = `@angular/${httpClientModule}`;
-      if (isClassReferenceInAngularModule(
-              element, 'HttpClientModule', httpClientModule, typeChecker)) {
+      if (
+        isClassReferenceInAngularModule(element, 'HttpClientModule', httpClientModule, typeChecker)
+      ) {
         const callArgs = [
           // we add `withInterceptorsFromDi()` to the call to ensure that class-based interceptors
           // still work
           ts.factory.createCallExpression(
-              tracker.addImport(sourceFile, 'withInterceptorsFromDi', httpClientImport), [], [])
+            tracker.addImport(sourceFile, 'withInterceptorsFromDi', httpClientImport),
+            [],
+            [],
+          ),
         ];
-        providersInNewCall.push(ts.factory.createCallExpression(
-            tracker.addImport(sourceFile, 'provideHttpClient', httpClientImport), [], callArgs));
+        providersInNewCall.push(
+          ts.factory.createCallExpression(
+            tracker.addImport(sourceFile, 'provideHttpClient', httpClientImport),
+            [],
+            callArgs,
+          ),
+        );
         continue;
       }
     }
 
     const target =
-        // If it's a call, it'll likely be a `ModuleWithProviders`
-        // expression so the target is going to be call's expression.
-        ts.isCallExpression(element) && ts.isPropertyAccessExpression(element.expression) ?
-        element.expression.expression :
-        element;
+      // If it's a call, it'll likely be a `ModuleWithProviders`
+      // expression so the target is going to be call's expression.
+      ts.isCallExpression(element) && ts.isPropertyAccessExpression(element.expression)
+        ? element.expression.expression
+        : element;
     const classDeclaration = findClassDeclaration(target, typeChecker);
-    const decorators = classDeclaration ?
-        getAngularDecorators(typeChecker, ts.getDecorators(classDeclaration) || []) :
-        undefined;
-
-    if (!decorators || decorators.length === 0 ||
-        decorators.every(
-            ({name}) => name !== 'Directive' && name !== 'Component' && name !== 'Pipe')) {
+    const decorators = classDeclaration
+      ? getAngularDecorators(typeChecker, ts.getDecorators(classDeclaration) || [])
+      : undefined;
+
+    if (
+      !decorators ||
+      decorators.length === 0 ||
+      decorators.every(({name}) => name !== 'Directive' && name !== 'Component' && name !== 'Pipe')
+    ) {
       importsForNewCall.push(element);
       addNodesToCopy(sourceFile, element, nodeLookup, tracker, nodesToCopy, referenceResolver);
     }
@@ -377,8 +526,10 @@ function migrateImportsForBootstrapCall(
  * @returns Null if the options can't be migrated, otherwise an array of call expressions.
  */
 function getRouterModuleForRootFeatures(
-    sourceFile: ts.SourceFile, options: ts.Expression, tracker: ChangeTracker): ts.CallExpression[]|
-    null {
+  sourceFile: ts.SourceFile,
+  options: ts.Expression,
+  tracker: ChangeTracker,
+): ts.CallExpression[] | null {
   // Options that aren't a static object literal can't be migrated.
   if (!ts.isObjectLiteralExpression(options)) {
     return null;
@@ -387,12 +538,14 @@ function getRouterModuleForRootFeatures(
   const featureExpressions: ts.CallExpression[] = [];
   const configOptions: ts.PropertyAssignment[] = [];
   const inMemoryScrollingOptions: ts.PropertyAssignment[] = [];
-  const features = new UniqueItemTracker<string, ts.Expression|null>();
+  const features = new UniqueItemTracker<string, ts.Expression | null>();
 
   for (const prop of options.properties) {
     // We can't migrate options that we can't easily analyze.
-    if (!ts.isPropertyAssignment(prop) ||
-        (!ts.isIdentifier(prop.name) && !ts.isStringLiteralLike(prop.name))) {
+    if (
+      !ts.isPropertyAssignment(prop) ||
+      (!ts.isIdentifier(prop.name) && !ts.isStringLiteralLike(prop.name))
+    ) {
       return null;
     }
 
@@ -451,8 +604,9 @@ function getRouterModuleForRootFeatures(
 
   if (inMemoryScrollingOptions.length > 0) {
     features.track(
-        'withInMemoryScrolling',
-        ts.factory.createObjectLiteralExpression(inMemoryScrollingOptions));
+      'withInMemoryScrolling',
+      ts.factory.createObjectLiteralExpression(inMemoryScrollingOptions),
+    );
   }
 
   if (configOptions.length > 0) {
@@ -461,13 +615,18 @@ function getRouterModuleForRootFeatures(
 
   for (const [feature, featureArgs] of features.getEntries()) {
     const callArgs: ts.Expression[] = [];
-    featureArgs.forEach(arg => {
+    featureArgs.forEach((arg) => {
       if (arg !== null) {
         callArgs.push(arg);
       }
     });
-    featureExpressions.push(ts.factory.createCallExpression(
-        tracker.addImport(sourceFile, feature, '@angular/router'), [], callArgs));
+    featureExpressions.push(
+      ts.factory.createCallExpression(
+        tracker.addImport(sourceFile, feature, '@angular/router'),
+        [],
+        callArgs,
+      ),
+    );
   }
 
   return featureExpressions;
@@ -484,38 +643,51 @@ function getRouterModuleForRootFeatures(
  * @param referenceResolver
  */
 function addNodesToCopy(
-    targetFile: ts.SourceFile, rootNode: ts.Node, nodeLookup: NodeLookup, tracker: ChangeTracker,
-    nodesToCopy: Set<ts.Node>, referenceResolver: ReferenceResolver): void {
+  targetFile: ts.SourceFile,
+  rootNode: ts.Node,
+  nodeLookup: NodeLookup,
+  tracker: ChangeTracker,
+  nodesToCopy: Set<ts.Node>,
+  referenceResolver: ReferenceResolver,
+): void {
   const refs = findAllSameFileReferences(rootNode, nodeLookup, referenceResolver);
 
   for (const ref of refs) {
     const importSpecifier = closestOrSelf(ref, ts.isImportSpecifier);
-    const importDeclaration =
-        importSpecifier ? closestNode(importSpecifier, ts.isImportDeclaration) : null;
+    const importDeclaration = importSpecifier
+      ? closestNode(importSpecifier, ts.isImportDeclaration)
+      : null;
 
     // If the reference is in an import, we need to add an import to the main file.
-    if (importDeclaration && importSpecifier &&
-        ts.isStringLiteralLike(importDeclaration.moduleSpecifier)) {
-      const moduleName = importDeclaration.moduleSpecifier.text.startsWith('.') ?
-          remapRelativeImport(targetFile.fileName, importDeclaration.moduleSpecifier) :
-          importDeclaration.moduleSpecifier.text;
-      const symbolName = importSpecifier.propertyName ? importSpecifier.propertyName.text :
-                                                        importSpecifier.name.text;
+    if (
+      importDeclaration &&
+      importSpecifier &&
+      ts.isStringLiteralLike(importDeclaration.moduleSpecifier)
+    ) {
+      const moduleName = importDeclaration.moduleSpecifier.text.startsWith('.')
+        ? remapRelativeImport(targetFile.fileName, importDeclaration.moduleSpecifier)
+        : importDeclaration.moduleSpecifier.text;
+      const symbolName = importSpecifier.propertyName
+        ? importSpecifier.propertyName.text
+        : importSpecifier.name.text;
       const alias = importSpecifier.propertyName ? importSpecifier.name.text : null;
       tracker.addImport(targetFile, symbolName, moduleName, alias);
       continue;
     }
 
     const variableDeclaration = closestOrSelf(ref, ts.isVariableDeclaration);
-    const variableStatement =
-        variableDeclaration ? closestNode(variableDeclaration, ts.isVariableStatement) : null;
+    const variableStatement = variableDeclaration
+      ? closestNode(variableDeclaration, ts.isVariableStatement)
+      : null;
 
     // If the reference is a variable, we can attempt to import it or copy it over.
     if (variableDeclaration && variableStatement && ts.isIdentifier(variableDeclaration.name)) {
       if (isExported(variableStatement)) {
         tracker.addImport(
-            targetFile, variableDeclaration.name.text,
-            getRelativeImportPath(targetFile.fileName, ref.getSourceFile().fileName));
+          targetFile,
+          variableDeclaration.name.text,
+          getRelativeImportPath(targetFile.fileName, ref.getSourceFile().fileName),
+        );
       } else {
         nodesToCopy.add(variableStatement);
       }
@@ -528,8 +700,10 @@ function addNodesToCopy(
     if (closestExportable) {
       if (isExported(closestExportable) && closestExportable.name) {
         tracker.addImport(
-            targetFile, closestExportable.name.text,
-            getRelativeImportPath(targetFile.fileName, ref.getSourceFile().fileName));
+          targetFile,
+          closestExportable.name.text,
+          getRelativeImportPath(targetFile.fileName, ref.getSourceFile().fileName),
+        );
       } else {
         nodesToCopy.add(closestExportable);
       }
@@ -544,7 +718,10 @@ function addNodesToCopy(
  * @param referenceResolver
  */
 function findAllSameFileReferences(
-    rootNode: ts.Node, nodeLookup: NodeLookup, referenceResolver: ReferenceResolver): Set<ts.Node> {
+  rootNode: ts.Node,
+  nodeLookup: NodeLookup,
+  referenceResolver: ReferenceResolver,
+): Set<ts.Node> {
   const results = new Set<ts.Node>();
   const traversedTopLevelNodes = new Set<ts.Node>();
   const excludeStart = rootNode.getStart();
@@ -557,7 +734,12 @@ function findAllSameFileReferences(
     }
 
     const refs = referencesToNodeWithinSameFile(
-        node, nodeLookup, excludeStart, excludeEnd, referenceResolver);
+      node,
+      nodeLookup,
+      excludeStart,
+      excludeEnd,
+      referenceResolver,
+    );
 
     if (refs === null) {
       return;
@@ -578,9 +760,15 @@ function findAllSameFileReferences(
 
       // Keep searching, starting from the closest top-level node. We skip import declarations,
       // because we already know about them and they may put the search into an infinite loop.
-      if (!ts.isImportDeclaration(closestTopLevel) &&
-          isOutsideRange(
-              excludeStart, excludeEnd, closestTopLevel.getStart(), closestTopLevel.getEnd())) {
+      if (
+        !ts.isImportDeclaration(closestTopLevel) &&
+        isOutsideRange(
+          excludeStart,
+          excludeEnd,
+          closestTopLevel.getStart(),
+          closestTopLevel.getEnd(),
+        )
+      ) {
         traversedTopLevelNodes.add(closestTopLevel);
         walk(closestTopLevel);
       }
@@ -599,11 +787,15 @@ function findAllSameFileReferences(
  * @param referenceResolver
  */
 function referencesToNodeWithinSameFile(
-    node: ts.Identifier, nodeLookup: NodeLookup, excludeStart: number, excludeEnd: number,
-    referenceResolver: ReferenceResolver): Set<ts.Node>|null {
-  const offsets =
-      referenceResolver.findSameFileReferences(node, node.getSourceFile().fileName)
-          .filter(([start, end]) => isOutsideRange(excludeStart, excludeEnd, start, end));
+  node: ts.Identifier,
+  nodeLookup: NodeLookup,
+  excludeStart: number,
+  excludeEnd: number,
+  referenceResolver: ReferenceResolver,
+): Set<ts.Node> | null {
+  const offsets = referenceResolver
+    .findSameFileReferences(node, node.getSourceFile().fileName)
+    .filter(([start, end]) => isOutsideRange(excludeStart, excludeEnd, start, end));
 
   if (offsets.length > 0) {
     const nodes = offsetsToNodes(nodeLookup, offsets, new Set());
@@ -625,20 +817,26 @@ function referencesToNodeWithinSameFile(
  */
 function remapDynamicImports<T extends ts.Node>(targetFileName: string, rootNode: T): T {
   let hasChanged = false;
-  const transformer: ts.TransformerFactory<ts.Node> = context => {
-    return sourceFile => ts.visitNode(sourceFile, function walk(node: ts.Node): ts.Node {
-      if (ts.isCallExpression(node) && node.expression.kind === ts.SyntaxKind.ImportKeyword &&
-          node.arguments.length > 0 && ts.isStringLiteralLike(node.arguments[0]) &&
-          node.arguments[0].text.startsWith('.')) {
-        hasChanged = true;
-        return context.factory.updateCallExpression(node, node.expression, node.typeArguments, [
-          context.factory.createStringLiteral(
-              remapRelativeImport(targetFileName, node.arguments[0])),
-          ...node.arguments.slice(1)
-        ]);
-      }
-      return ts.visitEachChild(node, walk, context);
-    });
+  const transformer: ts.TransformerFactory<ts.Node> = (context) => {
+    return (sourceFile) =>
+      ts.visitNode(sourceFile, function walk(node: ts.Node): ts.Node {
+        if (
+          ts.isCallExpression(node) &&
+          node.expression.kind === ts.SyntaxKind.ImportKeyword &&
+          node.arguments.length > 0 &&
+          ts.isStringLiteralLike(node.arguments[0]) &&
+          node.arguments[0].text.startsWith('.')
+        ) {
+          hasChanged = true;
+          return context.factory.updateCallExpression(node, node.expression, node.typeArguments, [
+            context.factory.createStringLiteral(
+              remapRelativeImport(targetFileName, node.arguments[0]),
+            ),
+            ...node.arguments.slice(1),
+          ]);
+        }
+        return ts.visitEachChild(node, walk, context);
+      });
   };
 
   const result = ts.transform(rootNode, [transformer]).transformed[0] as T;
@@ -659,9 +857,11 @@ function isTopLevelStatement(node: ts.Node): node is ts.Node {
  * @param node Node to be checked.
  */
 function isReferenceIdentifier(node: ts.Node): node is ts.Identifier {
-  return ts.isIdentifier(node) &&
-      (!ts.isPropertyAssignment(node.parent) && !ts.isParameter(node.parent) ||
-       node.parent.name !== node);
+  return (
+    ts.isIdentifier(node) &&
+    ((!ts.isPropertyAssignment(node.parent) && !ts.isParameter(node.parent)) ||
+      node.parent.name !== node)
+  );
 }
 
 /**
@@ -672,7 +872,11 @@ function isReferenceIdentifier(node: ts.Node): node is ts.Identifier {
  * @param end End of the range that is being checked.
  */
 function isOutsideRange(
-    excludeStart: number, excludeEnd: number, start: number, end: number): boolean {
+  excludeStart: number,
+  excludeEnd: number,
+  start: number,
+  end: number,
+): boolean {
   return (start < excludeStart && end < excludeStart) || start > excludeEnd;
 }
 
@@ -683,7 +887,9 @@ function isOutsideRange(
  */
 function remapRelativeImport(targetFileName: string, specifier: ts.StringLiteralLike): string {
   return getRelativeImportPath(
-      targetFileName, join(dirname(specifier.getSourceFile().fileName), specifier.text));
+    targetFileName,
+    join(dirname(specifier.getSourceFile().fileName), specifier.text),
+  );
 }
 
 /**
@@ -691,9 +897,9 @@ function remapRelativeImport(targetFileName: string, specifier: ts.StringLiteral
  * @param node Node to be checked.
  */
 function isExported(node: ts.Node): node is ts.Node {
-  return ts.canHaveModifiers(node) && node.modifiers ?
-      node.modifiers.some(modifier => modifier.kind === ts.SyntaxKind.ExportKeyword) :
-      false;
+  return ts.canHaveModifiers(node) && node.modifiers
+    ? node.modifiers.some((modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword)
+    : false;
 }
 
 /**
@@ -701,11 +907,21 @@ function isExported(node: ts.Node): node is ts.Node {
  * it can be safely copied into another file.
  * @param node Node to be checked.
  */
-function isExportableDeclaration(node: ts.Node): node is ts.EnumDeclaration|ts.ClassDeclaration|
-    ts.FunctionDeclaration|ts.InterfaceDeclaration|ts.TypeAliasDeclaration {
-  return ts.isEnumDeclaration(node) || ts.isClassDeclaration(node) ||
-      ts.isFunctionDeclaration(node) || ts.isInterfaceDeclaration(node) ||
-      ts.isTypeAliasDeclaration(node);
+function isExportableDeclaration(
+  node: ts.Node,
+): node is
+  | ts.EnumDeclaration
+  | ts.ClassDeclaration
+  | ts.FunctionDeclaration
+  | ts.InterfaceDeclaration
+  | ts.TypeAliasDeclaration {
+  return (
+    ts.isEnumDeclaration(node) ||
+    ts.isClassDeclaration(node) ||
+    ts.isFunctionDeclaration(node) ||
+    ts.isInterfaceDeclaration(node) ||
+    ts.isTypeAliasDeclaration(node)
+  );
 }
 
 /**
@@ -739,9 +955,12 @@ function hasImport(program: NgtscProgram, rootFileNames: string[], moduleName: s
     }
 
     for (const statement of sourceFile.statements) {
-      if (ts.isImportDeclaration(statement) && ts.isStringLiteralLike(statement.moduleSpecifier) &&
-          (statement.moduleSpecifier.text === moduleName ||
-           statement.moduleSpecifier.text.startsWith(deepImportStart))) {
+      if (
+        ts.isImportDeclaration(statement) &&
+        ts.isStringLiteralLike(statement.moduleSpecifier) &&
+        (statement.moduleSpecifier.text === moduleName ||
+          statement.moduleSpecifier.text.startsWith(deepImportStart))
+      ) {
         return true;
       }
     }
diff --git a/packages/core/schematics/ng-generate/standalone-migration/to-standalone.ts b/packages/core/schematics/ng-generate/standalone-migration/to-standalone.ts
index 2dcb7b9f1a4fa..e856978fdd323 100644
--- a/packages/core/schematics/ng-generate/standalone-migration/to-standalone.ts
+++ b/packages/core/schematics/ng-generate/standalone-migration/to-standalone.ts
@@ -7,7 +7,13 @@
  */
 
 import {NgtscProgram} from '@angular/compiler-cli';
-import {PotentialImport, PotentialImportKind, PotentialImportMode, Reference, TemplateTypeChecker} from '@angular/compiler-cli/private/migrations';
+import {
+  PotentialImport,
+  PotentialImportKind,
+  PotentialImportMode,
+  Reference,
+  TemplateTypeChecker,
+} from '@angular/compiler-cli/private/migrations';
 import ts from 'typescript';
 
 import {ChangesByFile, ChangeTracker, ImportRemapper} from '../../utils/change_tracker';
@@ -16,14 +22,21 @@ import {getImportSpecifier} from '../../utils/typescript/imports';
 import {closestNode} from '../../utils/typescript/nodes';
 import {isReferenceToImport} from '../../utils/typescript/symbol';
 
-import {findClassDeclaration, findLiteralProperty, isClassReferenceInAngularModule, NamedClassDeclaration} from './util';
+import {
+  findClassDeclaration,
+  findLiteralProperty,
+  isClassReferenceInAngularModule,
+  NamedClassDeclaration,
+} from './util';
 
 /**
  * Function that can be used to prcess the dependencies that
  * are going to be added to the imports of a component.
  */
-export type ComponentImportsRemapper =
-    (imports: PotentialImport[], component: ts.ClassDeclaration) => PotentialImport[];
+export type ComponentImportsRemapper = (
+  imports: PotentialImport[],
+  component: ts.ClassDeclaration,
+) => PotentialImport[];
 
 /**
  * Converts all declarations in the specified files to standalone.
@@ -35,9 +48,12 @@ export type ComponentImportsRemapper =
  * imports.
  */
 export function toStandalone(
-    sourceFiles: ts.SourceFile[], program: NgtscProgram, printer: ts.Printer,
-    fileImportRemapper?: ImportRemapper,
-    componentImportRemapper?: ComponentImportsRemapper): ChangesByFile {
+  sourceFiles: ts.SourceFile[],
+  program: NgtscProgram,
+  printer: ts.Printer,
+  fileImportRemapper?: ImportRemapper,
+  componentImportRemapper?: ComponentImportsRemapper,
+): ChangesByFile {
   const templateTypeChecker = program.compiler.getTemplateTypeChecker();
   const typeChecker = program.getTsProgram().getTypeChecker();
   const modulesToMigrate = new Set<ts.ClassDeclaration>();
@@ -52,20 +68,29 @@ export function toStandalone(
     for (const module of modules) {
       const allModuleDeclarations = extractDeclarationsFromModule(module, templateTypeChecker);
       const unbootstrappedDeclarations = filterNonBootstrappedDeclarations(
-          allModuleDeclarations, module, templateTypeChecker, typeChecker);
+        allModuleDeclarations,
+        module,
+        templateTypeChecker,
+        typeChecker,
+      );
 
       if (unbootstrappedDeclarations.length > 0) {
         modulesToMigrate.add(module);
-        unbootstrappedDeclarations.forEach(decl => declarations.add(decl));
+        unbootstrappedDeclarations.forEach((decl) => declarations.add(decl));
       }
     }
 
-    testObjects.forEach(obj => testObjectsToMigrate.add(obj));
+    testObjects.forEach((obj) => testObjectsToMigrate.add(obj));
   }
 
   for (const declaration of declarations) {
     convertNgModuleDeclarationToStandalone(
-        declaration, declarations, tracker, templateTypeChecker, componentImportRemapper);
+      declaration,
+      declarations,
+      tracker,
+      templateTypeChecker,
+      componentImportRemapper,
+    );
   }
 
   for (const node of modulesToMigrate) {
@@ -73,7 +98,12 @@ export function toStandalone(
   }
 
   migrateTestDeclarations(
-      testObjectsToMigrate, declarations, tracker, templateTypeChecker, typeChecker);
+    testObjectsToMigrate,
+    declarations,
+    tracker,
+    templateTypeChecker,
+    typeChecker,
+  );
   return tracker.recordChanges();
 }
 
@@ -86,8 +116,12 @@ export function toStandalone(
  * @param importRemapper
  */
 export function convertNgModuleDeclarationToStandalone(
-    decl: ts.ClassDeclaration, allDeclarations: Set<ts.ClassDeclaration>, tracker: ChangeTracker,
-    typeChecker: TemplateTypeChecker, importRemapper?: ComponentImportsRemapper): void {
+  decl: ts.ClassDeclaration,
+  allDeclarations: Set<ts.ClassDeclaration>,
+  tracker: ChangeTracker,
+  typeChecker: TemplateTypeChecker,
+  importRemapper?: ComponentImportsRemapper,
+): void {
   const directiveMeta = typeChecker.getDirectiveMetadata(decl);
 
   if (directiveMeta && directiveMeta.decorator && !directiveMeta.isStandalone) {
@@ -95,18 +129,28 @@ export function convertNgModuleDeclarationToStandalone(
 
     if (directiveMeta.isComponent) {
       const importsToAdd = getComponentImportExpressions(
-          decl, allDeclarations, tracker, typeChecker, importRemapper);
+        decl,
+        allDeclarations,
+        tracker,
+        typeChecker,
+        importRemapper,
+      );
 
       if (importsToAdd.length > 0) {
-        const hasTrailingComma = importsToAdd.length > 2 &&
-            !!extractMetadataLiteral(directiveMeta.decorator)?.properties.hasTrailingComma;
+        const hasTrailingComma =
+          importsToAdd.length > 2 &&
+          !!extractMetadataLiteral(directiveMeta.decorator)?.properties.hasTrailingComma;
         decorator = addPropertyToAngularDecorator(
-            decorator,
-            ts.factory.createPropertyAssignment(
-                'imports',
-                ts.factory.createArrayLiteralExpression(
-                    // Create a multi-line array when it has a trailing comma.
-                    ts.factory.createNodeArray(importsToAdd, hasTrailingComma), hasTrailingComma)));
+          decorator,
+          ts.factory.createPropertyAssignment(
+            'imports',
+            ts.factory.createArrayLiteralExpression(
+              // Create a multi-line array when it has a trailing comma.
+              ts.factory.createNodeArray(importsToAdd, hasTrailingComma),
+              hasTrailingComma,
+            ),
+          ),
+        );
       }
     }
 
@@ -130,21 +174,29 @@ export function convertNgModuleDeclarationToStandalone(
  * @param importRemapper
  */
 function getComponentImportExpressions(
-    decl: ts.ClassDeclaration, allDeclarations: Set<ts.ClassDeclaration>, tracker: ChangeTracker,
-    typeChecker: TemplateTypeChecker, importRemapper?: ComponentImportsRemapper): ts.Expression[] {
+  decl: ts.ClassDeclaration,
+  allDeclarations: Set<ts.ClassDeclaration>,
+  tracker: ChangeTracker,
+  typeChecker: TemplateTypeChecker,
+  importRemapper?: ComponentImportsRemapper,
+): ts.Expression[] {
   const templateDependencies = findTemplateDependencies(decl, typeChecker);
-  const usedDependenciesInMigration =
-      new Set(templateDependencies.filter(dep => allDeclarations.has(dep.node)));
+  const usedDependenciesInMigration = new Set(
+    templateDependencies.filter((dep) => allDeclarations.has(dep.node)),
+  );
   const imports: ts.Expression[] = [];
   const seenImports = new Set<string>();
   const resolvedDependencies: PotentialImport[] = [];
 
   for (const dep of templateDependencies) {
     const importLocation = findImportLocation(
-        dep as Reference<NamedClassDeclaration>, decl,
-        usedDependenciesInMigration.has(dep) ? PotentialImportMode.ForceDirect :
-                                               PotentialImportMode.Normal,
-        typeChecker);
+      dep as Reference<NamedClassDeclaration>,
+      decl,
+      usedDependenciesInMigration.has(dep)
+        ? PotentialImportMode.ForceDirect
+        : PotentialImportMode.Normal,
+      typeChecker,
+    );
 
     if (importLocation && !seenImports.has(importLocation.symbolName)) {
       seenImports.add(importLocation.symbolName);
@@ -152,24 +204,38 @@ function getComponentImportExpressions(
     }
   }
 
-  const processedDependencies =
-      importRemapper ? importRemapper(resolvedDependencies, decl) : resolvedDependencies;
+  const processedDependencies = importRemapper
+    ? importRemapper(resolvedDependencies, decl)
+    : resolvedDependencies;
 
   for (const importLocation of processedDependencies) {
     if (importLocation.moduleSpecifier) {
       const identifier = tracker.addImport(
-          decl.getSourceFile(), importLocation.symbolName, importLocation.moduleSpecifier);
+        decl.getSourceFile(),
+        importLocation.symbolName,
+        importLocation.moduleSpecifier,
+      );
       imports.push(identifier);
     } else {
       const identifier = ts.factory.createIdentifier(importLocation.symbolName);
 
       if (importLocation.isForwardReference) {
-        const forwardRefExpression =
-            tracker.addImport(decl.getSourceFile(), 'forwardRef', '@angular/core');
+        const forwardRefExpression = tracker.addImport(
+          decl.getSourceFile(),
+          'forwardRef',
+          '@angular/core',
+        );
         const arrowFunction = ts.factory.createArrowFunction(
-            undefined, undefined, [], undefined, undefined, identifier);
+          undefined,
+          undefined,
+          [],
+          undefined,
+          undefined,
+          identifier,
+        );
         imports.push(
-            ts.factory.createCallExpression(forwardRefExpression, undefined, [arrowFunction]));
+          ts.factory.createCallExpression(forwardRefExpression, undefined, [arrowFunction]),
+        );
       } else {
         imports.push(identifier);
       }
@@ -188,8 +254,12 @@ function getComponentImportExpressions(
  * @param templateTypeChecker
  */
 function migrateNgModuleClass(
-    node: ts.ClassDeclaration, allDeclarations: Set<ts.ClassDeclaration>, tracker: ChangeTracker,
-    typeChecker: ts.TypeChecker, templateTypeChecker: TemplateTypeChecker) {
+  node: ts.ClassDeclaration,
+  allDeclarations: Set<ts.ClassDeclaration>,
+  tracker: ChangeTracker,
+  typeChecker: ts.TypeChecker,
+  templateTypeChecker: TemplateTypeChecker,
+) {
   const decorator = templateTypeChecker.getNgModuleMetadata(node)?.decorator;
   const metadata = decorator ? extractMetadataLiteral(decorator) : null;
 
@@ -207,9 +277,12 @@ function migrateNgModuleClass(
  * @param tracker
  */
 function moveDeclarationsToImports(
-    literal: ts.ObjectLiteralExpression, allDeclarations: Set<ts.ClassDeclaration>,
-    typeChecker: ts.TypeChecker, templateTypeChecker: TemplateTypeChecker,
-    tracker: ChangeTracker): void {
+  literal: ts.ObjectLiteralExpression,
+  allDeclarations: Set<ts.ClassDeclaration>,
+  typeChecker: ts.TypeChecker,
+  templateTypeChecker: TemplateTypeChecker,
+  tracker: ChangeTracker,
+): void {
   const declarationsProp = findLiteralProperty(literal, 'declarations');
 
   if (!declarationsProp) {
@@ -221,8 +294,11 @@ function moveDeclarationsToImports(
   const properties: ts.ObjectLiteralElementLike[] = [];
   const importsProp = findLiteralProperty(literal, 'imports');
   const hasAnyArrayTrailingComma = literal.properties.some(
-      prop => ts.isPropertyAssignment(prop) && ts.isArrayLiteralExpression(prop.initializer) &&
-          prop.initializer.elements.hasTrailingComma);
+    (prop) =>
+      ts.isPropertyAssignment(prop) &&
+      ts.isArrayLiteralExpression(prop.initializer) &&
+      prop.initializer.elements.hasTrailingComma,
+  );
 
   // Separate the declarations that we want to keep and ones we need to copy into the `imports`.
   if (ts.isPropertyAssignment(declarationsProp)) {
@@ -233,12 +309,14 @@ function moveDeclarationsToImports(
         if (ts.isIdentifier(el)) {
           const correspondingClass = findClassDeclaration(el, typeChecker);
 
-          if (!correspondingClass ||
-              // Check whether the declaration is either standalone already or is being converted
-              // in this migration. We need to check if it's standalone already, in order to correct
-              // some cases where the main app and the test files are being migrated in separate
-              // programs.
-              isStandaloneDeclaration(correspondingClass, allDeclarations, templateTypeChecker)) {
+          if (
+            !correspondingClass ||
+            // Check whether the declaration is either standalone already or is being converted
+            // in this migration. We need to check if it's standalone already, in order to correct
+            // some cases where the main app and the test files are being migrated in separate
+            // programs.
+            isStandaloneDeclaration(correspondingClass, allDeclarations, templateTypeChecker)
+          ) {
             declarationsToCopy.push(el);
           } else {
             declarationsToPreserve.push(el);
@@ -255,10 +333,17 @@ function moveDeclarationsToImports(
 
   // If there are no `imports`, create them with the declarations we want to copy.
   if (!importsProp && declarationsToCopy.length > 0) {
-    properties.push(ts.factory.createPropertyAssignment(
+    properties.push(
+      ts.factory.createPropertyAssignment(
         'imports',
-        ts.factory.createArrayLiteralExpression(ts.factory.createNodeArray(
-            declarationsToCopy, hasAnyArrayTrailingComma && declarationsToCopy.length > 2))));
+        ts.factory.createArrayLiteralExpression(
+          ts.factory.createNodeArray(
+            declarationsToCopy,
+            hasAnyArrayTrailingComma && declarationsToCopy.length > 2,
+          ),
+        ),
+      ),
+    );
   }
 
   for (const prop of literal.properties) {
@@ -270,13 +355,21 @@ function moveDeclarationsToImports(
     // If we have declarations to preserve, update the existing property, otherwise drop it.
     if (prop === declarationsProp) {
       if (declarationsToPreserve.length > 0) {
-        const hasTrailingComma = ts.isArrayLiteralExpression(prop.initializer) ?
-            prop.initializer.elements.hasTrailingComma :
-            hasAnyArrayTrailingComma;
-        properties.push(ts.factory.updatePropertyAssignment(
-            prop, prop.name,
-            ts.factory.createArrayLiteralExpression(ts.factory.createNodeArray(
-                declarationsToPreserve, hasTrailingComma && declarationsToPreserve.length > 2))));
+        const hasTrailingComma = ts.isArrayLiteralExpression(prop.initializer)
+          ? prop.initializer.elements.hasTrailingComma
+          : hasAnyArrayTrailingComma;
+        properties.push(
+          ts.factory.updatePropertyAssignment(
+            prop,
+            prop.name,
+            ts.factory.createArrayLiteralExpression(
+              ts.factory.createNodeArray(
+                declarationsToPreserve,
+                hasTrailingComma && declarationsToPreserve.length > 2,
+              ),
+            ),
+          ),
+        );
       }
       continue;
     }
@@ -288,16 +381,21 @@ function moveDeclarationsToImports(
 
       if (ts.isArrayLiteralExpression(prop.initializer)) {
         initializer = ts.factory.updateArrayLiteralExpression(
-            prop.initializer,
-            ts.factory.createNodeArray(
-                [...prop.initializer.elements, ...declarationsToCopy],
-                prop.initializer.elements.hasTrailingComma));
+          prop.initializer,
+          ts.factory.createNodeArray(
+            [...prop.initializer.elements, ...declarationsToCopy],
+            prop.initializer.elements.hasTrailingComma,
+          ),
+        );
       } else {
-        initializer = ts.factory.createArrayLiteralExpression(ts.factory.createNodeArray(
+        initializer = ts.factory.createArrayLiteralExpression(
+          ts.factory.createNodeArray(
             [ts.factory.createSpreadElement(prop.initializer), ...declarationsToCopy],
             // Expect the declarations to be greater than 1 since
             // we have the pre-existing initializer already.
-            hasAnyArrayTrailingComma && declarationsToCopy.length > 1));
+            hasAnyArrayTrailingComma && declarationsToCopy.length > 1,
+          ),
+        );
       }
 
       properties.push(ts.factory.updatePropertyAssignment(prop, prop.name, initializer));
@@ -309,18 +407,24 @@ function moveDeclarationsToImports(
   }
 
   tracker.replaceNode(
+    literal,
+    ts.factory.updateObjectLiteralExpression(
       literal,
-      ts.factory.updateObjectLiteralExpression(
-          literal, ts.factory.createNodeArray(properties, literal.properties.hasTrailingComma)),
-      ts.EmitHint.Expression);
+      ts.factory.createNodeArray(properties, literal.properties.hasTrailingComma),
+    ),
+    ts.EmitHint.Expression,
+  );
 }
 
 /** Adds `standalone: true` to a decorator node. */
 function addStandaloneToDecorator(node: ts.Decorator): ts.Decorator {
   return addPropertyToAngularDecorator(
-      node,
-      ts.factory.createPropertyAssignment(
-          'standalone', ts.factory.createToken(ts.SyntaxKind.TrueKeyword)));
+    node,
+    ts.factory.createPropertyAssignment(
+      'standalone',
+      ts.factory.createToken(ts.SyntaxKind.TrueKeyword),
+    ),
+  );
 }
 
 /**
@@ -329,7 +433,9 @@ function addStandaloneToDecorator(node: ts.Decorator): ts.Decorator {
  * @param property Property to add.
  */
 function addPropertyToAngularDecorator(
-    node: ts.Decorator, property: ts.PropertyAssignment): ts.Decorator {
+  node: ts.Decorator,
+  property: ts.PropertyAssignment,
+): ts.Decorator {
   // Invalid decorator.
   if (!ts.isCallExpression(node.expression) || node.expression.arguments.length > 1) {
     return node;
@@ -350,16 +456,20 @@ function addPropertyToAngularDecorator(
 
   // Use `createDecorator` instead of `updateDecorator`, because
   // the latter ends up duplicating the node's leading comment.
-  return ts.factory.createDecorator(ts.factory.createCallExpression(
-      node.expression.expression, node.expression.typeArguments,
-      [ts.factory.createObjectLiteralExpression(
-          ts.factory.createNodeArray(literalProperties, hasTrailingComma),
-          literalProperties.length > 1)]));
+  return ts.factory.createDecorator(
+    ts.factory.createCallExpression(node.expression.expression, node.expression.typeArguments, [
+      ts.factory.createObjectLiteralExpression(
+        ts.factory.createNodeArray(literalProperties, hasTrailingComma),
+        literalProperties.length > 1,
+      ),
+    ]),
+  );
 }
 
 /** Checks if a node is a `PropertyAssignment` with a name. */
-function isNamedPropertyAssignment(node: ts.Node): node is ts.PropertyAssignment&
-    {name: ts.Identifier} {
+function isNamedPropertyAssignment(
+  node: ts.Node,
+): node is ts.PropertyAssignment & {name: ts.Identifier} {
   return ts.isPropertyAssignment(node) && node.name && ts.isIdentifier(node.name);
 }
 
@@ -371,11 +481,14 @@ function isNamedPropertyAssignment(node: ts.Node): node is ts.PropertyAssignment
  * @param typeChecker
  */
 function findImportLocation(
-    target: Reference<NamedClassDeclaration>, inComponent: ts.ClassDeclaration,
-    importMode: PotentialImportMode, typeChecker: TemplateTypeChecker): PotentialImport|null {
+  target: Reference<NamedClassDeclaration>,
+  inComponent: ts.ClassDeclaration,
+  importMode: PotentialImportMode,
+  typeChecker: TemplateTypeChecker,
+): PotentialImport | null {
   const importLocations = typeChecker.getPotentialImportsFor(target, inComponent, importMode);
-  let firstSameFileImport: PotentialImport|null = null;
-  let firstModuleImport: PotentialImport|null = null;
+  let firstSameFileImport: PotentialImport | null = null;
+  let firstModuleImport: PotentialImport | null = null;
 
   for (const location of importLocations) {
     // Prefer a standalone import, if we can find one.
@@ -386,9 +499,12 @@ function findImportLocation(
     if (!location.moduleSpecifier && !firstSameFileImport) {
       firstSameFileImport = location;
     }
-    if (location.kind === PotentialImportKind.NgModule && !firstModuleImport &&
-        // ɵ is used for some internal Angular modules that we want to skip over.
-        !location.symbolName.startsWith('ɵ')) {
+    if (
+      location.kind === PotentialImportKind.NgModule &&
+      !firstModuleImport &&
+      // ɵ is used for some internal Angular modules that we want to skip over.
+      !location.symbolName.startsWith('ɵ')
+    ) {
       firstModuleImport = location;
     }
   }
@@ -401,10 +517,13 @@ function findImportLocation(
  * E.g. `declarations: [Foo]` or `declarations: SOME_VAR` would match this description,
  * but not `declarations: []`.
  */
-function hasNgModuleMetadataElements(node: ts.Node): node is ts.PropertyAssignment&
-    {initializer: ts.ArrayLiteralExpression} {
-  return ts.isPropertyAssignment(node) &&
-      (!ts.isArrayLiteralExpression(node.initializer) || node.initializer.elements.length > 0);
+function hasNgModuleMetadataElements(
+  node: ts.Node,
+): node is ts.PropertyAssignment & {initializer: ts.ArrayLiteralExpression} {
+  return (
+    ts.isPropertyAssignment(node) &&
+    (!ts.isArrayLiteralExpression(node.initializer) || node.initializer.elements.length > 0)
+  );
 }
 
 /** Finds all modules whose declarations can be migrated. */
@@ -414,8 +533,9 @@ function findNgModuleClassesToMigrate(sourceFile: ts.SourceFile, typeChecker: ts
   if (getImportSpecifier(sourceFile, '@angular/core', 'NgModule')) {
     sourceFile.forEachChild(function walk(node) {
       if (ts.isClassDeclaration(node)) {
-        const decorator = getAngularDecorators(typeChecker, ts.getDecorators(node) || [])
-                              .find(current => current.name === 'NgModule');
+        const decorator = getAngularDecorators(typeChecker, ts.getDecorators(node) || []).find(
+          (current) => current.name === 'NgModule',
+        );
         const metadata = decorator ? extractMetadataLiteral(decorator.node) : null;
 
         if (metadata) {
@@ -442,23 +562,32 @@ export function findTestObjectsToMigrate(sourceFile: ts.SourceFile, typeChecker:
 
   if (testBedImport || catalystImport) {
     sourceFile.forEachChild(function walk(node) {
-      const isObjectLiteralCall = ts.isCallExpression(node) && node.arguments.length > 0 &&
-          // `arguments[0]` is the testing module config.
-          ts.isObjectLiteralExpression(node.arguments[0]);
-      const config = isObjectLiteralCall ? node.arguments[0] as ts.ObjectLiteralExpression : null;
-      const isTestBedCall = isObjectLiteralCall &&
-          (testBedImport && ts.isPropertyAccessExpression(node.expression) &&
-           node.expression.name.text === 'configureTestingModule' &&
-           isReferenceToImport(typeChecker, node.expression.expression, testBedImport));
-      const isCatalystCall = isObjectLiteralCall &&
-          (catalystImport && ts.isIdentifier(node.expression) &&
-           isReferenceToImport(typeChecker, node.expression, catalystImport));
+      const isObjectLiteralCall =
+        ts.isCallExpression(node) &&
+        node.arguments.length > 0 &&
+        // `arguments[0]` is the testing module config.
+        ts.isObjectLiteralExpression(node.arguments[0]);
+      const config = isObjectLiteralCall ? (node.arguments[0] as ts.ObjectLiteralExpression) : null;
+      const isTestBedCall =
+        isObjectLiteralCall &&
+        testBedImport &&
+        ts.isPropertyAccessExpression(node.expression) &&
+        node.expression.name.text === 'configureTestingModule' &&
+        isReferenceToImport(typeChecker, node.expression.expression, testBedImport);
+      const isCatalystCall =
+        isObjectLiteralCall &&
+        catalystImport &&
+        ts.isIdentifier(node.expression) &&
+        isReferenceToImport(typeChecker, node.expression, catalystImport);
 
       if ((isTestBedCall || isCatalystCall) && config) {
         const declarations = findLiteralProperty(config, 'declarations');
-        if (declarations && ts.isPropertyAssignment(declarations) &&
-            ts.isArrayLiteralExpression(declarations.initializer) &&
-            declarations.initializer.elements.length > 0) {
+        if (
+          declarations &&
+          ts.isPropertyAssignment(declarations) &&
+          ts.isArrayLiteralExpression(declarations.initializer) &&
+          declarations.initializer.elements.length > 0
+        ) {
           testObjects.push(config);
         }
       }
@@ -475,8 +604,10 @@ export function findTestObjectsToMigrate(sourceFile: ts.SourceFile, typeChecker:
  * @param decl Component in whose template we're looking for dependencies.
  * @param typeChecker
  */
-function findTemplateDependencies(decl: ts.ClassDeclaration, typeChecker: TemplateTypeChecker):
-    Reference<NamedClassDeclaration>[] {
+function findTemplateDependencies(
+  decl: ts.ClassDeclaration,
+  typeChecker: TemplateTypeChecker,
+): Reference<NamedClassDeclaration>[] {
   const results: Reference<NamedClassDeclaration>[] = [];
   const usedDirectives = typeChecker.getUsedDirectives(decl);
   const usedPipes = typeChecker.getUsedPipes(decl);
@@ -493,8 +624,10 @@ function findTemplateDependencies(decl: ts.ClassDeclaration, typeChecker: Templa
     const potentialPipes = typeChecker.getPotentialPipes(decl);
 
     for (const pipe of potentialPipes) {
-      if (ts.isClassDeclaration(pipe.ref.node) &&
-          usedPipes.some(current => pipe.name === current)) {
+      if (
+        ts.isClassDeclaration(pipe.ref.node) &&
+        usedPipes.some((current) => pipe.name === current)
+      ) {
         results.push(pipe.ref as Reference<NamedClassDeclaration>);
       }
     }
@@ -512,11 +645,14 @@ function findTemplateDependencies(decl: ts.ClassDeclaration, typeChecker: Templa
  * @param typeChecker
  */
 function filterNonBootstrappedDeclarations(
-    declarations: ts.ClassDeclaration[], ngModule: ts.ClassDeclaration,
-    templateTypeChecker: TemplateTypeChecker, typeChecker: ts.TypeChecker) {
+  declarations: ts.ClassDeclaration[],
+  ngModule: ts.ClassDeclaration,
+  templateTypeChecker: TemplateTypeChecker,
+  typeChecker: ts.TypeChecker,
+) {
   const metadata = templateTypeChecker.getNgModuleMetadata(ngModule);
   const metaLiteral =
-      metadata && metadata.decorator ? extractMetadataLiteral(metadata.decorator) : null;
+    metadata && metadata.decorator ? extractMetadataLiteral(metadata.decorator) : null;
   const bootstrapProp = metaLiteral ? findLiteralProperty(metaLiteral, 'bootstrap') : null;
 
   // If there's no `bootstrap`, we can't filter.
@@ -526,8 +662,10 @@ function filterNonBootstrappedDeclarations(
 
   // If we can't analyze the `bootstrap` property, we can't safely determine which
   // declarations aren't bootstrapped so we assume that all of them are.
-  if (!ts.isPropertyAssignment(bootstrapProp) ||
-      !ts.isArrayLiteralExpression(bootstrapProp.initializer)) {
+  if (
+    !ts.isPropertyAssignment(bootstrapProp) ||
+    !ts.isArrayLiteralExpression(bootstrapProp.initializer)
+  ) {
     return [];
   }
 
@@ -545,7 +683,7 @@ function filterNonBootstrappedDeclarations(
     }
   }
 
-  return declarations.filter(ref => !bootstrappedClasses.has(ref));
+  return declarations.filter((ref) => !bootstrappedClasses.has(ref));
 }
 
 /**
@@ -554,12 +692,15 @@ function filterNonBootstrappedDeclarations(
  * @param templateTypeChecker
  */
 export function extractDeclarationsFromModule(
-    ngModule: ts.ClassDeclaration,
-    templateTypeChecker: TemplateTypeChecker): ts.ClassDeclaration[] {
+  ngModule: ts.ClassDeclaration,
+  templateTypeChecker: TemplateTypeChecker,
+): ts.ClassDeclaration[] {
   const metadata = templateTypeChecker.getNgModuleMetadata(ngModule);
-  return metadata ? metadata.declarations.filter(decl => ts.isClassDeclaration(decl.node))
-                        .map(decl => decl.node) as ts.ClassDeclaration[] :
-                    [];
+  return metadata
+    ? (metadata.declarations
+        .filter((decl) => ts.isClassDeclaration(decl.node))
+        .map((decl) => decl.node) as ts.ClassDeclaration[])
+    : [];
 }
 
 /**
@@ -571,9 +712,12 @@ export function extractDeclarationsFromModule(
  * @param typeChecker
  */
 export function migrateTestDeclarations(
-    testObjects: Set<ts.ObjectLiteralExpression>,
-    declarationsOutsideOfTestFiles: Set<ts.ClassDeclaration>, tracker: ChangeTracker,
-    templateTypeChecker: TemplateTypeChecker, typeChecker: ts.TypeChecker) {
+  testObjects: Set<ts.ObjectLiteralExpression>,
+  declarationsOutsideOfTestFiles: Set<ts.ClassDeclaration>,
+  tracker: ChangeTracker,
+  templateTypeChecker: TemplateTypeChecker,
+  typeChecker: ts.TypeChecker,
+) {
   const {decorators, componentImports} = analyzeTestingModules(testObjects, typeChecker);
   const allDeclarations = new Set(declarationsOutsideOfTestFiles);
 
@@ -595,16 +739,21 @@ export function migrateTestDeclarations(
       }
 
       if (importsToAdd && importsToAdd.size > 0) {
-        const hasTrailingComma = importsToAdd.size > 2 &&
-            !!extractMetadataLiteral(decorator.node)?.properties.hasTrailingComma;
+        const hasTrailingComma =
+          importsToAdd.size > 2 &&
+          !!extractMetadataLiteral(decorator.node)?.properties.hasTrailingComma;
         const importsArray = ts.factory.createNodeArray(Array.from(importsToAdd), hasTrailingComma);
 
         tracker.replaceNode(
-            decorator.node,
-            addPropertyToAngularDecorator(
-                newDecorator,
-                ts.factory.createPropertyAssignment(
-                    'imports', ts.factory.createArrayLiteralExpression(importsArray))));
+          decorator.node,
+          addPropertyToAngularDecorator(
+            newDecorator,
+            ts.factory.createPropertyAssignment(
+              'imports',
+              ts.factory.createArrayLiteralExpression(importsArray),
+            ),
+          ),
+        );
       } else {
         tracker.replaceNode(decorator.node, newDecorator);
       }
@@ -623,7 +772,9 @@ export function migrateTestDeclarations(
  * @param testObjects Object literals that should be analyzed.
  */
 function analyzeTestingModules(
-    testObjects: Set<ts.ObjectLiteralExpression>, typeChecker: ts.TypeChecker) {
+  testObjects: Set<ts.ObjectLiteralExpression>,
+  typeChecker: ts.TypeChecker,
+) {
   const seenDeclarations = new Set<ts.Declaration>();
   const decorators: NgDecorator[] = [];
   const componentImports = new Map<ts.Decorator, Set<ts.Expression>>();
@@ -636,18 +787,24 @@ function analyzeTestingModules(
     }
 
     const importsProp = findLiteralProperty(obj, 'imports');
-    const importElements = importsProp && hasNgModuleMetadataElements(importsProp) ?
-        importsProp.initializer.elements.filter(el => {
-          // Filter out calls since they may be a `ModuleWithProviders`.
-          return !ts.isCallExpression(el) &&
+    const importElements =
+      importsProp && hasNgModuleMetadataElements(importsProp)
+        ? importsProp.initializer.elements.filter((el) => {
+            // Filter out calls since they may be a `ModuleWithProviders`.
+            return (
+              !ts.isCallExpression(el) &&
               // Also filter out the animations modules since they throw errors if they're imported
               // multiple times and it's common for apps to use the `NoopAnimationsModule` to
               // disable animations in screenshot tests.
               !isClassReferenceInAngularModule(
-                  el, /^BrowserAnimationsModule|NoopAnimationsModule$/,
-                  'platform-browser/animations', typeChecker);
-        }) :
-        null;
+                el,
+                /^BrowserAnimationsModule|NoopAnimationsModule$/,
+                'platform-browser/animations',
+                typeChecker,
+              )
+            );
+          })
+        : null;
 
     for (const decl of declarations) {
       if (seenDeclarations.has(decl)) {
@@ -668,7 +825,7 @@ function analyzeTestingModules(
             imports = new Set();
             componentImports.set(decorator.node, imports);
           }
-          importElements.forEach(imp => imports!.add(imp));
+          importElements.forEach((imp) => imports!.add(imp));
         }
       }
     }
@@ -684,7 +841,9 @@ function analyzeTestingModules(
  * @param typeChecker
  */
 function extractDeclarationsFromTestObject(
-    obj: ts.ObjectLiteralExpression, typeChecker: ts.TypeChecker): ts.ClassDeclaration[] {
+  obj: ts.ObjectLiteralExpression,
+  typeChecker: ts.TypeChecker,
+): ts.ClassDeclaration[] {
   const results: ts.ClassDeclaration[] = [];
   const declarations = findLiteralProperty(obj, 'declarations');
 
@@ -705,12 +864,13 @@ function extractDeclarationsFromTestObject(
 }
 
 /** Extracts the metadata object literal from an Angular decorator. */
-function extractMetadataLiteral(decorator: ts.Decorator): ts.ObjectLiteralExpression|null {
+function extractMetadataLiteral(decorator: ts.Decorator): ts.ObjectLiteralExpression | null {
   // `arguments[0]` is the metadata object literal.
-  return ts.isCallExpression(decorator.expression) && decorator.expression.arguments.length === 1 &&
-          ts.isObjectLiteralExpression(decorator.expression.arguments[0]) ?
-      decorator.expression.arguments[0] :
-      null;
+  return ts.isCallExpression(decorator.expression) &&
+    decorator.expression.arguments.length === 1 &&
+    ts.isObjectLiteralExpression(decorator.expression.arguments[0])
+    ? decorator.expression.arguments[0]
+    : null;
 }
 
 /**
@@ -720,13 +880,15 @@ function extractMetadataLiteral(decorator: ts.Decorator): ts.ObjectLiteralExpres
  * @param templateTypeChecker
  */
 function isStandaloneDeclaration(
-    node: ts.ClassDeclaration, declarationsInMigration: Set<ts.ClassDeclaration>,
-    templateTypeChecker: TemplateTypeChecker): boolean {
+  node: ts.ClassDeclaration,
+  declarationsInMigration: Set<ts.ClassDeclaration>,
+  templateTypeChecker: TemplateTypeChecker,
+): boolean {
   if (declarationsInMigration.has(node)) {
     return true;
   }
 
   const metadata =
-      templateTypeChecker.getDirectiveMetadata(node) || templateTypeChecker.getPipeMetadata(node);
+    templateTypeChecker.getDirectiveMetadata(node) || templateTypeChecker.getPipeMetadata(node);
   return metadata != null && metadata.isStandalone;
 }
diff --git a/packages/core/schematics/ng-generate/standalone-migration/util.ts b/packages/core/schematics/ng-generate/standalone-migration/util.ts
index d852381712fd5..d80d34bedcd9b 100644
--- a/packages/core/schematics/ng-generate/standalone-migration/util.ts
+++ b/packages/core/schematics/ng-generate/standalone-migration/util.ts
@@ -18,7 +18,7 @@ import {closestNode} from '../../utils/typescript/nodes';
 export type NodeLookup = Map<number, ts.Node[]>;
 
 /** Utility to type a class declaration with a name. */
-export type NamedClassDeclaration = ts.ClassDeclaration&{name: ts.Identifier};
+export type NamedClassDeclaration = ts.ClassDeclaration & {name: ts.Identifier};
 
 /** Text span of an AST node. */
 export type ReferenceSpan = [start: number, end: number];
@@ -40,7 +40,7 @@ export class UniqueItemTracker<K, V> {
     }
   }
 
-  get(key: K): Set<V>|undefined {
+  get(key: K): Set<V> | undefined {
     return this._nodes.get(key);
   }
 
@@ -51,18 +51,21 @@ export class UniqueItemTracker<K, V> {
 
 /** Resolves references to nodes. */
 export class ReferenceResolver {
-  private _languageService: ts.LanguageService|undefined;
+  private _languageService: ts.LanguageService | undefined;
 
   /**
    * If set, allows the language service to *only* read a specific file.
    * Used to speed up single-file lookups.
    */
-  private _tempOnlyFile: string|null = null;
+  private _tempOnlyFile: string | null = null;
 
   constructor(
-      private _program: NgtscProgram, private _host: ts.CompilerHost,
-      private _rootFileNames: string[], private _basePath: string,
-      private _excludedFiles?: RegExp) {}
+    private _program: NgtscProgram,
+    private _host: ts.CompilerHost,
+    private _rootFileNames: string[],
+    private _basePath: string,
+    private _excludedFiles?: RegExp,
+  ) {}
 
   /** Finds all references to a node within the entire project. */
   findReferencesInProject(node: ts.Node): ReferencesByFile {
@@ -89,8 +92,9 @@ export class ReferenceResolver {
             results.set(ref.fileName, []);
           }
 
-          results.get(ref.fileName)!.push(
-              [ref.textSpan.start, ref.textSpan.start + ref.textSpan.length]);
+          results
+            .get(ref.fileName)!
+            .push([ref.textSpan.start, ref.textSpan.start + ref.textSpan.length]);
         }
       }
     }
@@ -108,13 +112,14 @@ export class ReferenceResolver {
 
     const nodeStart = node.getStart();
     const results: ReferenceSpan[] = [];
-    let highlights: ts.DocumentHighlights[]|undefined;
+    let highlights: ts.DocumentHighlights[] | undefined;
 
     // The language service can throw if it fails to read a file.
     // Silently continue since we're making the lookup on a best effort basis.
     try {
-      highlights =
-          this._getLanguageService().getDocumentHighlights(fileName, nodeStart, [fileName]);
+      highlights = this._getLanguageService().getDocumentHighlights(fileName, nodeStart, [
+        fileName,
+      ]);
     } catch (e: any) {
       console.error('Failed reference lookup for node ' + node.getText(), e.message);
     }
@@ -124,7 +129,10 @@ export class ReferenceResolver {
         // We are pretty much guaranteed to only have one match from the current file since it is
         // the only one being passed in `getDocumentHighlight`, but we check here just in case.
         if (file.fileName === fileName) {
-          for (const {textSpan: {start, length}, kind} of file.highlightSpans) {
+          for (const {
+            textSpan: {start, length},
+            kind,
+          } of file.highlightSpans) {
             if (kind !== ts.HighlightSpanKind.none) {
               results.push([start, start + length]);
             }
@@ -140,8 +148,10 @@ export class ReferenceResolver {
 
   /** Used by the language service  */
   private _readFile(path: string) {
-    if ((this._tempOnlyFile !== null && path !== this._tempOnlyFile) ||
-        this._excludedFiles?.test(path)) {
+    if (
+      (this._tempOnlyFile !== null && path !== this._tempOnlyFile) ||
+      this._excludedFiles?.test(path)
+    ) {
       return '';
     }
     return this._host.readFile(path);
@@ -152,28 +162,33 @@ export class ReferenceResolver {
     if (!this._languageService) {
       const rootFileNames = this._rootFileNames.slice();
 
-      this._program.getTsProgram().getSourceFiles().forEach(({fileName}) => {
-        if (!this._excludedFiles?.test(fileName) && !rootFileNames.includes(fileName)) {
-          rootFileNames.push(fileName);
-        }
-      });
+      this._program
+        .getTsProgram()
+        .getSourceFiles()
+        .forEach(({fileName}) => {
+          if (!this._excludedFiles?.test(fileName) && !rootFileNames.includes(fileName)) {
+            rootFileNames.push(fileName);
+          }
+        });
 
       this._languageService = ts.createLanguageService(
-          {
-            getCompilationSettings: () => this._program.getTsProgram().getCompilerOptions(),
-            getScriptFileNames: () => rootFileNames,
-            // The files won't change so we can return the same version.
-            getScriptVersion: () => '0',
-            getScriptSnapshot: (path: string) => {
-              const content = this._readFile(path);
-              return content ? ts.ScriptSnapshot.fromString(content) : undefined;
-            },
-            getCurrentDirectory: () => this._basePath,
-            getDefaultLibFileName: options => ts.getDefaultLibFilePath(options),
-            readFile: path => this._readFile(path),
-            fileExists: (path: string) => this._host.fileExists(path)
+        {
+          getCompilationSettings: () => this._program.getTsProgram().getCompilerOptions(),
+          getScriptFileNames: () => rootFileNames,
+          // The files won't change so we can return the same version.
+          getScriptVersion: () => '0',
+          getScriptSnapshot: (path: string) => {
+            const content = this._readFile(path);
+            return content ? ts.ScriptSnapshot.fromString(content) : undefined;
           },
-          ts.createDocumentRegistry(), ts.LanguageServiceMode.PartialSemantic);
+          getCurrentDirectory: () => this._basePath,
+          getDefaultLibFileName: (options) => ts.getDefaultLibFilePath(options),
+          readFile: (path) => this._readFile(path),
+          fileExists: (path: string) => this._host.fileExists(path),
+        },
+        ts.createDocumentRegistry(),
+        ts.LanguageServiceMode.PartialSemantic,
+      );
     }
 
     return this._languageService;
@@ -206,9 +221,12 @@ export function getNodeLookup(sourceFile: ts.SourceFile): NodeLookup {
  * @param results Set in which to store the results.
  */
 export function offsetsToNodes(
-    lookup: NodeLookup, offsets: ReferenceSpan[], results: Set<ts.Node>): Set<ts.Node> {
+  lookup: NodeLookup,
+  offsets: ReferenceSpan[],
+  results: Set<ts.Node>,
+): Set<ts.Node> {
   for (const [start, end] of offsets) {
-    const match = lookup.get(start)?.find(node => node.getEnd() === end);
+    const match = lookup.get(start)?.find((node) => node.getEnd() === end);
 
     if (match) {
       results.add(match);
@@ -224,16 +242,22 @@ export function offsetsToNodes(
  * @param typeChecker
  */
 export function findClassDeclaration(
-    reference: ts.Node, typeChecker: ts.TypeChecker): ts.ClassDeclaration|null {
-  return typeChecker.getTypeAtLocation(reference).getSymbol()?.declarations?.find(
-             ts.isClassDeclaration) ||
-      null;
+  reference: ts.Node,
+  typeChecker: ts.TypeChecker,
+): ts.ClassDeclaration | null {
+  return (
+    typeChecker
+      .getTypeAtLocation(reference)
+      .getSymbol()
+      ?.declarations?.find(ts.isClassDeclaration) || null
+  );
 }
 
 /** Finds a property with a specific name in an object literal expression. */
 export function findLiteralProperty(literal: ts.ObjectLiteralExpression, name: string) {
   return literal.properties.find(
-      prop => prop.name && ts.isIdentifier(prop.name) && prop.name.text === name);
+    (prop) => prop.name && ts.isIdentifier(prop.name) && prop.name.text === name,
+  );
 }
 
 /** Gets a relative path between two files that can be used inside a TypeScript import. */
@@ -251,10 +275,11 @@ export function getRelativeImportPath(fromFile: string, toFile: string): string
 
 /** Function used to remap the generated `imports` for a component to known shorter aliases. */
 export function knownInternalAliasRemapper(imports: PotentialImport[]) {
-  return imports.map(
-      current => current.moduleSpecifier === '@angular/common' && current.symbolName === 'NgForOf' ?
-          {...current, symbolName: 'NgFor'} :
-          current);
+  return imports.map((current) =>
+    current.moduleSpecifier === '@angular/common' && current.symbolName === 'NgForOf'
+      ? {...current, symbolName: 'NgFor'}
+      : current,
+  );
 }
 
 /**
@@ -263,7 +288,9 @@ export function knownInternalAliasRemapper(imports: PotentialImport[]) {
  * @param predicate Predicate that the result needs to pass.
  */
 export function closestOrSelf<T extends ts.Node>(
-    node: ts.Node, predicate: (n: ts.Node) => n is T): T|null {
+  node: ts.Node,
+  predicate: (n: ts.Node) => n is T,
+): T | null {
   return predicate(node) ? node : closestNode(node, predicate);
 }
 
@@ -275,24 +302,31 @@ export function closestOrSelf<T extends ts.Node>(
  * @param typeChecker
  */
 export function isClassReferenceInAngularModule(
-    node: ts.Node, className: string|RegExp, moduleName: string,
-    typeChecker: ts.TypeChecker): boolean {
+  node: ts.Node,
+  className: string | RegExp,
+  moduleName: string,
+  typeChecker: ts.TypeChecker,
+): boolean {
   const symbol = typeChecker.getTypeAtLocation(node).getSymbol();
   const externalName = `@angular/${moduleName}`;
   const internalName = `angular2/rc/packages/${moduleName}`;
 
-  return !!symbol?.declarations?.some(decl => {
+  return !!symbol?.declarations?.some((decl) => {
     const closestClass = closestOrSelf(decl, ts.isClassDeclaration);
     const closestClassFileName = closestClass?.getSourceFile().fileName;
 
-    if (!closestClass || !closestClassFileName || !closestClass.name ||
-        !ts.isIdentifier(closestClass.name) ||
-        (!closestClassFileName.includes(externalName) &&
-         !closestClassFileName.includes(internalName))) {
+    if (
+      !closestClass ||
+      !closestClassFileName ||
+      !closestClass.name ||
+      !ts.isIdentifier(closestClass.name) ||
+      (!closestClassFileName.includes(externalName) && !closestClassFileName.includes(internalName))
+    ) {
       return false;
     }
 
-    return typeof className === 'string' ? closestClass.name.text === className :
-                                           className.test(closestClass.name.text);
+    return typeof className === 'string'
+      ? closestClass.name.text === className
+      : className.test(closestClass.name.text);
   });
 }
diff --git a/packages/core/schematics/test/all-migrations.spec.ts b/packages/core/schematics/test/all-migrations.spec.ts
index ebcb0ea8e3699..ce16f1d2f59db 100644
--- a/packages/core/schematics/test/all-migrations.spec.ts
+++ b/packages/core/schematics/test/all-migrations.spec.ts
@@ -22,8 +22,9 @@ describe('all migrations', () => {
   let previousWorkingDir: string;
 
   const migrationCollectionPath = runfiles.resolvePackageRelative('../migrations.json');
-  const allMigrationSchematics =
-      Object.keys((JSON.parse(fs.readFileSync(migrationCollectionPath, 'utf8')) as any).schematics);
+  const allMigrationSchematics = Object.keys(
+    (JSON.parse(fs.readFileSync(migrationCollectionPath, 'utf8')) as any).schematics,
+  );
 
   beforeEach(() => {
     runner = new SchematicTestRunner('test', migrationCollectionPath);
@@ -31,13 +32,15 @@ describe('all migrations', () => {
     tree = new UnitTestTree(new HostTree(host));
 
     writeFile('/node_modules/@angular/core/index.d.ts', `export const MODULE: any;`);
-    writeFile('/angular.json', JSON.stringify({
-      version: 1,
-      projects: {t: {root: '', architect: {build: {options: {tsConfig: './tsconfig.json'}}}}}
-    }));
+    writeFile(
+      '/angular.json',
+      JSON.stringify({
+        version: 1,
+        projects: {t: {root: '', architect: {build: {options: {tsConfig: './tsconfig.json'}}}}},
+      }),
+    );
     writeFile('/tsconfig.json', `{}`);
 
-
     previousWorkingDir = shx.pwd();
     tmpDirPath = getSystemPath(host.root);
 
@@ -63,21 +66,24 @@ describe('all migrations', () => {
     throw Error('No migration schematics found.');
   }
 
-  allMigrationSchematics.forEach(name => {
+  allMigrationSchematics.forEach((name) => {
     describe(name, () => createTests(name));
   });
 
   function createTests(migrationName: string) {
     // Regression test for: https://github.com/angular/angular/issues/36346.
     it('should not throw if non-existent symbols are imported with rootDirs', async () => {
-      writeFile(`/tsconfig.json`, JSON.stringify({
-        compilerOptions: {
-          rootDirs: [
-            './generated',
-          ]
-        }
-      }));
-      writeFile('/index.ts', `
+      writeFile(
+        `/tsconfig.json`,
+        JSON.stringify({
+          compilerOptions: {
+            rootDirs: ['./generated'],
+          },
+        }),
+      );
+      writeFile(
+        '/index.ts',
+        `
       import {Renderer} from '@angular/core';
 
       const variableDecl: Renderer = null;
@@ -85,7 +91,8 @@ describe('all migrations', () => {
       export class Test {
         constructor(renderer: Renderer) {}
       }
-    `);
+    `,
+      );
 
       let error: any = null;
       try {
diff --git a/packages/core/schematics/test/google3/wait_for_async_spec.ts b/packages/core/schematics/test/google3/wait_for_async_spec.ts
index 86b8044d2498e..c6313f0402b67 100644
--- a/packages/core/schematics/test/google3/wait_for_async_spec.ts
+++ b/packages/core/schematics/test/google3/wait_for_async_spec.ts
@@ -13,8 +13,9 @@ import shx from 'shelljs';
 import {Configuration, Linter} from 'tslint';
 
 describe('Google3 waitForAsync TSLint rule', () => {
-  const rulesDirectory =
-      dirname(runfiles.resolvePackageRelative('../../migrations/google3/waitForAsyncCjsRule.js'));
+  const rulesDirectory = dirname(
+    runfiles.resolvePackageRelative('../../migrations/google3/waitForAsyncCjsRule.js'),
+  );
 
   let tmpDir: string;
 
@@ -23,19 +24,25 @@ describe('Google3 waitForAsync TSLint rule', () => {
     shx.mkdir('-p', tmpDir);
 
     // We need to declare the Angular symbols we're testing for, otherwise type checking won't work.
-    writeFile('testing.d.ts', `
+    writeFile(
+      'testing.d.ts',
+      `
       export declare function async(fn: Function): any;
-    `);
-
-    writeFile('tsconfig.json', JSON.stringify({
-      compilerOptions: {
-        module: 'es2015',
-        baseUrl: './',
-        paths: {
-          '@angular/core/testing': ['testing.d.ts'],
-        }
-      },
-    }));
+    `,
+    );
+
+    writeFile(
+      'tsconfig.json',
+      JSON.stringify({
+        compilerOptions: {
+          module: 'es2015',
+          baseUrl: './',
+          paths: {
+            '@angular/core/testing': ['testing.d.ts'],
+          },
+        },
+      }),
+    );
   });
 
   afterEach(() => shx.rm('-r', tmpDir));
@@ -45,7 +52,7 @@ describe('Google3 waitForAsync TSLint rule', () => {
     const linter = new Linter({fix, rulesDirectory: [rulesDirectory]}, program);
     const config = Configuration.parseConfigFile({rules: {'wait-for-async-cjs': true}});
 
-    program.getRootFileNames().forEach(fileName => {
+    program.getRootFileNames().forEach((fileName) => {
       linter.lint(fileName, program.getSourceFile(fileName)!.getFullText(), config);
     });
 
@@ -61,7 +68,9 @@ describe('Google3 waitForAsync TSLint rule', () => {
   }
 
   it('should flag async imports and usages', () => {
-    writeFile('/index.ts', `
+    writeFile(
+      '/index.ts',
+      `
       import { async, inject } from '@angular/core/testing';
 
       it('should work', async(() => {
@@ -71,10 +80,11 @@ describe('Google3 waitForAsync TSLint rule', () => {
       it('should also work', async(() => {
         expect(inject('bar')).toBe('bar');
       }));
-    `);
+    `,
+    );
 
     const linter = runTSLint(false);
-    const failures = linter.getResult().failures.map(failure => failure.getFailure());
+    const failures = linter.getResult().failures.map((failure) => failure.getFailure());
     expect(failures.length).toBe(3);
     expect(failures[0]).toMatch(/Imports of the deprecated async function are not allowed/);
     expect(failures[1]).toMatch(/References to the deprecated async function are not allowed/);
@@ -82,42 +92,53 @@ describe('Google3 waitForAsync TSLint rule', () => {
   });
 
   it('should change async imports to waitForAsync', () => {
-    writeFile('/index.ts', `
+    writeFile(
+      '/index.ts',
+      `
       import { async, inject } from '@angular/core/testing';
 
       it('should work', async(() => {
         expect(inject('foo')).toBe('foo');
       }));
-    `);
+    `,
+    );
 
     runTSLint(true);
-    expect(getFile('/index.ts'))
-        .toContain(`import { inject, waitForAsync } from '@angular/core/testing';`);
+    expect(getFile('/index.ts')).toContain(
+      `import { inject, waitForAsync } from '@angular/core/testing';`,
+    );
   });
 
   it('should change aliased async imports to waitForAsync', () => {
-    writeFile('/index.ts', `
+    writeFile(
+      '/index.ts',
+      `
       import { async as renamedAsync, inject } from '@angular/core/testing';
 
       it('should work', renamedAsync(() => {
         expect(inject('foo')).toBe('foo');
       }));
-    `);
+    `,
+    );
 
     runTSLint(true);
-    expect(getFile('/index.ts'))
-        .toContain(`import { inject, waitForAsync as renamedAsync } from '@angular/core/testing';`);
+    expect(getFile('/index.ts')).toContain(
+      `import { inject, waitForAsync as renamedAsync } from '@angular/core/testing';`,
+    );
   });
 
   it('should not change async imports if they are not from @angular/core/testing', () => {
-    writeFile('/index.ts', `
+    writeFile(
+      '/index.ts',
+      `
       import { inject } from '@angular/core/testing';
       import { async } from './my-test-library';
 
       it('should work', async(() => {
         expect(inject('foo')).toBe('foo');
       }));
-    `);
+    `,
+    );
 
     runTSLint(true);
     const content = getFile('/index.ts');
@@ -126,7 +147,9 @@ describe('Google3 waitForAsync TSLint rule', () => {
   });
 
   it('should not change imports if waitForAsync was already imported', () => {
-    writeFile('/index.ts', `
+    writeFile(
+      '/index.ts',
+      `
       import { async, inject, waitForAsync } from '@angular/core/testing';
 
       it('should work', async(() => {
@@ -136,15 +159,19 @@ describe('Google3 waitForAsync TSLint rule', () => {
       it('should also work', waitForAsync(() => {
         expect(inject('bar')).toBe('bar');
       }));
-    `);
+    `,
+    );
 
     runTSLint(true);
-    expect(getFile('/index.ts'))
-        .toContain(`import { async, inject, waitForAsync } from '@angular/core/testing';`);
+    expect(getFile('/index.ts')).toContain(
+      `import { async, inject, waitForAsync } from '@angular/core/testing';`,
+    );
   });
 
   it('should change calls from `async` to `waitForAsync`', () => {
-    writeFile('/index.ts', `
+    writeFile(
+      '/index.ts',
+      `
       import { async, inject } from '@angular/core/testing';
 
       it('should work', async(() => {
@@ -154,7 +181,8 @@ describe('Google3 waitForAsync TSLint rule', () => {
       it('should also work', async(() => {
         expect(inject('bar')).toBe('bar');
       }));
-    `);
+    `,
+    );
 
     runTSLint(true);
 
@@ -165,19 +193,23 @@ describe('Google3 waitForAsync TSLint rule', () => {
   });
 
   it('should not change aliased calls', () => {
-    writeFile('/index.ts', `
+    writeFile(
+      '/index.ts',
+      `
       import { async as renamedAsync, inject } from '@angular/core/testing';
 
       it('should work', renamedAsync(() => {
         expect(inject('foo')).toBe('foo');
       }));
-    `);
+    `,
+    );
 
     runTSLint(true);
 
     const content = getFile('/index.ts');
     expect(content).toContain(
-        `import { inject, waitForAsync as renamedAsync } from '@angular/core/testing';`);
+      `import { inject, waitForAsync as renamedAsync } from '@angular/core/testing';`,
+    );
     expect(content).toContain(`it('should work', renamedAsync(() => {`);
   });
 });
diff --git a/packages/core/schematics/test/helpers.ts b/packages/core/schematics/test/helpers.ts
index f2bcfe2d6f381..859023884efc6 100644
--- a/packages/core/schematics/test/helpers.ts
+++ b/packages/core/schematics/test/helpers.ts
@@ -23,7 +23,7 @@ export function dedent(strings: TemplateStringsArray, ...values: any[]) {
     return joinedString;
   }
 
-  const minLineIndent = Math.min(...matches.map(el => el.length));
+  const minLineIndent = Math.min(...matches.map((el) => el.length));
   const omitMinIndentRegex = new RegExp(`^[ \\t]{${minLineIndent}}`, 'gm');
   const omitEmptyLineWhitespaceRegex = /^[ \t]+$/gm;
   const result = minLineIndent > 0 ? joinedString.replace(omitMinIndentRegex, '') : joinedString;
diff --git a/packages/core/schematics/test/http_providers_spec.ts b/packages/core/schematics/test/http_providers_spec.ts
index 7a7a55c18ce16..d075ec139d0bc 100644
--- a/packages/core/schematics/test/http_providers_spec.ts
+++ b/packages/core/schematics/test/http_providers_spec.ts
@@ -34,21 +34,21 @@ describe('Http providers migration', () => {
     tree = new UnitTestTree(new HostTree(host));
 
     writeFile(
-        '/tsconfig.json',
-        JSON.stringify({
-          compilerOptions: {
-            lib: ['es2015'],
-            strictNullChecks: true,
-          },
-        }),
+      '/tsconfig.json',
+      JSON.stringify({
+        compilerOptions: {
+          lib: ['es2015'],
+          strictNullChecks: true,
+        },
+      }),
     );
 
     writeFile(
-        '/angular.json',
-        JSON.stringify({
-          version: 1,
-          projects: {t: {root: '', architect: {build: {options: {tsConfig: './tsconfig.json'}}}}},
-        }),
+      '/angular.json',
+      JSON.stringify({
+        version: 1,
+        projects: {t: {root: '', architect: {build: {options: {tsConfig: './tsconfig.json'}}}}},
+      }),
     );
 
     previousWorkingDir = shx.pwd();
@@ -66,8 +66,8 @@ describe('Http providers migration', () => {
 
   it('should replace HttpClientModule', async () => {
     writeFile(
-        '/index.ts',
-        `
+      '/index.ts',
+      `
           import { NgModule } from '@angular/core';
           import { HttpClientModule, HttpClientJsonpModule, HttpClientXsrfModule, HttpTransferCacheOptions } from '@angular/common/http';
           import { CommonModule } from '@angular/common';
@@ -96,14 +96,14 @@ describe('Http providers migration', () => {
     expect(content).toMatch(/import.*withJsonpSupport/);
     expect(content).toMatch(/import.*withXsrfConfiguration/);
     expect(content).toContain(
-        `provideHttpClient(withInterceptorsFromDi(), withJsonpSupport(), withXsrfConfiguration({ cookieName: 'foobar' }))`,
+      `provideHttpClient(withInterceptorsFromDi(), withJsonpSupport(), withXsrfConfiguration({ cookieName: 'foobar' }))`,
     );
   });
 
   it('should replace HttpClientModule with existing providers ', async () => {
     writeFile(
-        '/index.ts',
-        `
+      '/index.ts',
+      `
           import { NgModule } from '@angular/core';
           import { HttpClientModule, HttpClientJsonpModule, HttpClientXsrfModule, HttpTransferCacheOptions } from '@angular/common/http';
 
@@ -131,14 +131,14 @@ describe('Http providers migration', () => {
     expect(content).toContain(`HttpTransferCacheOptions`);
     expect(content).toContain(`provideConfig({ someConfig: 'foobar' })`);
     expect(content).toContain(
-        `provideHttpClient(withInterceptorsFromDi(), withJsonpSupport(), withXsrfConfiguration({ cookieName: 'foobar' }))`,
+      `provideHttpClient(withInterceptorsFromDi(), withJsonpSupport(), withXsrfConfiguration({ cookieName: 'foobar' }))`,
     );
   });
 
   it('should replace HttpClientModule & HttpClientXsrfModule.disable()', async () => {
     writeFile(
-        '/index.ts',
-        `
+      '/index.ts',
+      `
         import { NgModule } from '@angular/core';
         import { HttpClientModule, HttpClientJsonpModule, HttpClientXsrfModule, HttpTransferCacheOptions } from '@angular/common/http';
 
@@ -166,14 +166,14 @@ describe('Http providers migration', () => {
     expect(content).toContain(`HttpTransferCacheOptions`);
     expect(content).toContain(`provideConfig({ someConfig: 'foobar' })`);
     expect(content).toContain(
-        `provideHttpClient(withInterceptorsFromDi(), withJsonpSupport(), withNoXsrfProtection())`,
+      `provideHttpClient(withInterceptorsFromDi(), withJsonpSupport(), withNoXsrfProtection())`,
     );
   });
 
   it('should replace HttpClientModule & base HttpClientXsrfModule', async () => {
     writeFile(
-        '/index.ts',
-        `
+      '/index.ts',
+      `
         import { NgModule } from '@angular/core';
         import { HttpClientModule, HttpClientJsonpModule, HttpClientXsrfModule, HttpTransferCacheOptions } from '@angular/common/http';
 
@@ -201,14 +201,14 @@ describe('Http providers migration', () => {
     expect(content).toContain(`HttpTransferCacheOptions`);
     expect(content).toContain(`provideConfig({ someConfig: 'foobar' })`);
     expect(content).toContain(
-        `provideHttpClient(withInterceptorsFromDi(), withXsrfConfiguration())`,
+      `provideHttpClient(withInterceptorsFromDi(), withXsrfConfiguration())`,
     );
   });
 
   it('should handle a migration with 2 modules in the same file ', async () => {
     writeFile(
-        '/index.ts',
-        `
+      '/index.ts',
+      `
         import { NgModule } from '@angular/core';
         import { HttpClientModule, HttpClientJsonpModule, HttpClientXsrfModule, HttpTransferCacheOptions } from '@angular/common/http';
 
@@ -237,14 +237,14 @@ describe('Http providers migration', () => {
     expect(content).toContain(`provideConfig({ someConfig: 'foobar' })`);
     expect(content).toContain(`provideHttpClient(withInterceptorsFromDi(), withJsonpSupport())`);
     expect(content).toContain(
-        `provideHttpClient(withInterceptorsFromDi(), withNoXsrfProtection())`,
+      `provideHttpClient(withInterceptorsFromDi(), withNoXsrfProtection())`,
     );
   });
 
   it('should handle a migration for acomponent ', async () => {
     writeFile(
-        '/index.ts',
-        `
+      '/index.ts',
+      `
           import { Component } from '@angular/core';
           import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
 
@@ -266,8 +266,8 @@ describe('Http providers migration', () => {
 
   it('should not migrate HttpClientModule from another package', async () => {
     writeFile(
-        '/index.ts',
-        `
+      '/index.ts',
+      `
           import { NgModule } from '@angular/core';
           import { HttpClientModule, HttpClientJsonpModule, HttpClientXsrfModule, HttpTransferCacheOptions } from '@not-angular/common/http';
 
@@ -295,17 +295,17 @@ describe('Http providers migration', () => {
     expect(content).toContain(`HttpTransferCacheOptions`);
     expect(content).toContain(`provideConfig({ someConfig: 'foobar' })`);
     expect(content).not.toContain(
-        `provideHttpClient(withInterceptorsFromDi(), withJsonpSupport())`,
+      `provideHttpClient(withInterceptorsFromDi(), withJsonpSupport())`,
     );
     expect(content).not.toContain(
-        `provideHttpClient(withInterceptorsFromDi(), withNoXsrfProtection())`,
+      `provideHttpClient(withInterceptorsFromDi(), withNoXsrfProtection())`,
     );
   });
 
   it('should migrate HttpClientTestingModule', async () => {
     writeFile(
-        '/index.ts',
-        `
+      '/index.ts',
+      `
         import { TestBed } from '@angular/core/testing';
         import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 
@@ -322,13 +322,14 @@ describe('Http providers migration', () => {
     expect(content).not.toContain(`HttpClientTestingModule`);
     expect(content).toMatch(/import.*provideHttpClientTesting/);
     expect(content).toContain(
-        `provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()`);
+      `provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()`,
+    );
   });
 
   it('should not migrate HttpClientTestingModule from outside package', async () => {
     writeFile(
-        '/index.ts',
-        `
+      '/index.ts',
+      `
         import { TestBed } from '@angular/core/testing';
         import { HttpClientTestingModule, HttpTestingController } from '@not-angular/common/http/testing';
 
@@ -348,8 +349,8 @@ describe('Http providers migration', () => {
 
   it('shouldmigrate NgModule + TestBed.configureTestingModule in the same file', async () => {
     writeFile(
-        '/index.ts',
-        `
+      '/index.ts',
+      `
         import { NgModule } from '@angular/core';
         import { TestBed } from '@angular/core/testing';
         import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
@@ -378,18 +379,21 @@ describe('Http providers migration', () => {
     expect(content).toContain('provideHttpClientTesting');
     expect(content).toContain('provideHttpClient(withInterceptorsFromDi(), withJsonpSupport())');
     expect(content).toContain(
-        'provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()');
+      'provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()',
+    );
 
     expect(content).toContain(
-        `import { withInterceptorsFromDi, withJsonpSupport, provideHttpClient } from '@angular/common/http';`);
+      `import { withInterceptorsFromDi, withJsonpSupport, provideHttpClient } from '@angular/common/http';`,
+    );
     expect(content).toContain(
-        `import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';`);
+      `import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';`,
+    );
   });
 
   it('should not change a decorator with no arguments', async () => {
     writeFile(
-        '/index.ts',
-        `
+      '/index.ts',
+      `
           import { NgModule } from '@angular/core';
           import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
 
diff --git a/packages/core/schematics/test/invalid_two_way_bindings_spec.ts b/packages/core/schematics/test/invalid_two_way_bindings_spec.ts
index 53eb2abd319a5..02bd22429bbbf 100644
--- a/packages/core/schematics/test/invalid_two_way_bindings_spec.ts
+++ b/packages/core/schematics/test/invalid_two_way_bindings_spec.ts
@@ -34,10 +34,13 @@ describe('Invalid two-way bindings migration', () => {
     tree = new UnitTestTree(new HostTree(host));
 
     writeFile('/tsconfig.json', '{}');
-    writeFile('/angular.json', JSON.stringify({
-      version: 1,
-      projects: {t: {root: '', architect: {build: {options: {tsConfig: './tsconfig.json'}}}}}
-    }));
+    writeFile(
+      '/angular.json',
+      JSON.stringify({
+        version: 1,
+        projects: {t: {root: '', architect: {build: {options: {tsConfig: './tsconfig.json'}}}}},
+      }),
+    );
 
     previousWorkingDir = shx.pwd();
     tmpDirPath = getSystemPath(host.root);
@@ -53,71 +56,89 @@ describe('Invalid two-way bindings migration', () => {
   });
 
   it('should migrate a two-way binding with a binary expression', async () => {
-    writeFile('/comp.ts', `
+    writeFile(
+      '/comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
         template: \`<input [(ngModel)]="a && b.c"/>\`
       })
       class Comp {}
-    `);
+    `,
+    );
 
     await runMigration();
     const content = tree.readContent('/comp.ts');
     expect(content).toContain(
-        'template: `<input [ngModel]="a && b.c" (ngModelChange)="a && (b.c = $event)"/>`');
+      'template: `<input [ngModel]="a && b.c" (ngModelChange)="a && (b.c = $event)"/>`',
+    );
   });
 
   it('should migrate a two-way binding with a single unary expression', async () => {
-    writeFile('/comp.ts', `
+    writeFile(
+      '/comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
         template: \`<input [(ngModel)]="!a.b"/>\`
       })
       class Comp {}
-    `);
+    `,
+    );
 
     await runMigration();
     const content = tree.readContent('/comp.ts');
     expect(content).toContain(
-        'template: `<input [ngModel]="!a.b" (ngModelChange)="a.b = $event"/>`');
+      'template: `<input [ngModel]="!a.b" (ngModelChange)="a.b = $event"/>`',
+    );
   });
 
   it('should migrate a two-way binding with a nested unary expression', async () => {
-    writeFile('/comp.ts', `
+    writeFile(
+      '/comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
         template: \`<input [(ngModel)]="!!!!!!!a.b"/>\`
       })
       class Comp {}
-    `);
+    `,
+    );
 
     await runMigration();
     const content = tree.readContent('/comp.ts');
     expect(content).toContain(
-        'template: `<input [ngModel]="!!!!!!!a.b" (ngModelChange)="a.b = $event"/>`');
+      'template: `<input [ngModel]="!!!!!!!a.b" (ngModelChange)="a.b = $event"/>`',
+    );
   });
 
   it('should migrate a two-way binding with a conditional expression', async () => {
-    writeFile('/comp.ts', `
+    writeFile(
+      '/comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
         template: \`<input [(ngModel)]="a ? b : c.d"/>\`
       })
       class Comp {}
-    `);
+    `,
+    );
 
     await runMigration();
     const content = tree.readContent('/comp.ts');
     expect(content).toContain(
-        'template: `<input [ngModel]="a ? b : c.d" (ngModelChange)="a ? b : c.d = $event"/>`');
+      'template: `<input [ngModel]="a ? b : c.d" (ngModelChange)="a ? b : c.d = $event"/>`',
+    );
   });
 
   it('should migrate multiple inline templates in the same file', async () => {
-    writeFile('/comp.ts', `
+    writeFile(
+      '/comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
@@ -129,124 +150,142 @@ describe('Invalid two-way bindings migration', () => {
         template: \`<input [(ngModel)]="a || b"/>\`
       })
       class Comp2 {}
-    `);
+    `,
+    );
 
     await runMigration();
     const content = tree.readContent('/comp.ts');
     expect(content).toContain(
-        'template: `<input [ngModel]="a && b" (ngModelChange)="a && (b = $event)"/>`');
+      'template: `<input [ngModel]="a && b" (ngModelChange)="a && (b = $event)"/>`',
+    );
     expect(content).toContain(
-        'template: `<input [ngModel]="a || b" (ngModelChange)="a || (b = $event)"/>`');
+      'template: `<input [ngModel]="a || b" (ngModelChange)="a || (b = $event)"/>`',
+    );
   });
 
   it('should migrate an external template', async () => {
-    writeFile('/comp.ts', `
+    writeFile(
+      '/comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
         templateUrl: './comp.html'
       })
       class Comp {}
-    `);
+    `,
+    );
 
-    writeFile('/comp.html', [
-      `<div>`,
-      `hello`,
-      `<span>`,
-      `<input [(ngModel)]="a && b"/>`,
-      `</span>`,
-      `</div>`,
-    ].join('\n'));
+    writeFile(
+      '/comp.html',
+      [`<div>`, `hello`, `<span>`, `<input [(ngModel)]="a && b"/>`, `</span>`, `</div>`].join('\n'),
+    );
 
     await runMigration();
     const content = tree.readContent('/comp.html');
 
-    expect(content).toBe([
-      `<div>`,
-      `hello`,
-      `<span>`,
-      `<input [ngModel]="a && b" (ngModelChange)="a && (b = $event)"/>`,
-      `</span>`,
-      `</div>`,
-    ].join('\n'));
+    expect(content).toBe(
+      [
+        `<div>`,
+        `hello`,
+        `<span>`,
+        `<input [ngModel]="a && b" (ngModelChange)="a && (b = $event)"/>`,
+        `</span>`,
+        `</div>`,
+      ].join('\n'),
+    );
   });
 
   it('should migrate a template referenced by multiple components', async () => {
-    writeFile('/comp-a.ts', `
+    writeFile(
+      '/comp-a.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
         templateUrl: './comp.html'
       })
       class CompA {}
-    `);
+    `,
+    );
 
-    writeFile('/comp-b.ts', `
+    writeFile(
+      '/comp-b.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
         templateUrl: './comp.html'
       })
       class CompB {}
-    `);
+    `,
+    );
 
-    writeFile('/comp.html', [
-      `<div>`,
-      `hello`,
-      `<span>`,
-      `<input [(ngModel)]="a && b"/>`,
-      `</span>`,
-      `</div>`,
-    ].join('\n'));
+    writeFile(
+      '/comp.html',
+      [`<div>`, `hello`, `<span>`, `<input [(ngModel)]="a && b"/>`, `</span>`, `</div>`].join('\n'),
+    );
 
     await runMigration();
     const content = tree.readContent('/comp.html');
 
-    expect(content).toBe([
-      `<div>`,
-      `hello`,
-      `<span>`,
-      `<input [ngModel]="a && b" (ngModelChange)="a && (b = $event)"/>`,
-      `</span>`,
-      `</div>`,
-    ].join('\n'));
+    expect(content).toBe(
+      [
+        `<div>`,
+        `hello`,
+        `<span>`,
+        `<input [ngModel]="a && b" (ngModelChange)="a && (b = $event)"/>`,
+        `</span>`,
+        `</div>`,
+      ].join('\n'),
+    );
   });
 
   it('should migrate multiple two-way bindings on the same element', async () => {
-    writeFile('/comp.ts', `
+    writeFile(
+      '/comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
         template: \`<input [(foo)]="a && b" bar="123" [(baz)]="!!a"/>\`
       })
       class Comp {}
-    `);
+    `,
+    );
 
     await runMigration();
     const content = tree.readContent('/comp.ts');
     expect(content).toContain(
-        'template: \`<input [foo]="a && b" (fooChange)="a && (b = $event)" ' +
-        'bar="123" [baz]="!!a" (bazChange)="a = $event"/>\`');
+      'template: `<input [foo]="a && b" (fooChange)="a && (b = $event)" ' +
+        'bar="123" [baz]="!!a" (bazChange)="a = $event"/>`',
+    );
   });
 
   it('should not stop the migration if a file cannot be read', async () => {
-    writeFile('/comp.ts', `
+    writeFile(
+      '/comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
         templateUrl: './does-not-exist.html'
       })
       class BrokenComp {}
-    `);
+    `,
+    );
 
-    writeFile('/other-comp.ts', `
+    writeFile(
+      '/other-comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
         templateUrl: './comp.html'
       })
       class Comp {}
-    `);
+    `,
+    );
 
     writeFile('/comp.html', '<input [(ngModel)]="a || b"/>');
 
@@ -257,7 +296,9 @@ describe('Invalid two-way bindings migration', () => {
   });
 
   it('should migrate a component that is not at the top level', async () => {
-    writeFile('/comp.ts', `
+    writeFile(
+      '/comp.ts',
+      `
       import {Component} from '@angular/core';
 
       function foo() {
@@ -266,76 +307,90 @@ describe('Invalid two-way bindings migration', () => {
         })
         class Comp {}
       }
-    `);
+    `,
+    );
 
     await runMigration();
     const content = tree.readContent('/comp.ts');
 
     expect(content).toContain(
-        'template: `<input [ngModel]="a || b" (ngModelChange)="a || (b = $event)"/>`');
+      'template: `<input [ngModel]="a || b" (ngModelChange)="a || (b = $event)"/>`',
+    );
   });
 
   it('should preserve a valid expression', async () => {
-    writeFile('/comp.ts', `
+    writeFile(
+      '/comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
         template: \`<input [(ngModel)]="a.b.c"/>\`
       })
       class Comp {}
-    `);
+    `,
+    );
 
     await runMigration();
     const content = tree.readContent('/comp.ts');
     expect(content).toContain('template: `<input [(ngModel)]="a.b.c"/>`');
   });
 
-  it('should not migrate an invalid expression if an event listener for the same binding exists',
-     async () => {
-       writeFile('/comp.ts', `
+  it('should not migrate an invalid expression if an event listener for the same binding exists', async () => {
+    writeFile(
+      '/comp.ts',
+      `
         import {Component} from '@angular/core';
 
         @Component({
           template: \`<input [(ngModel)]="a || b" (ngModelChange)="foo($event)"/>\`
         })
         class Comp {}
-      `);
+      `,
+    );
 
-       await runMigration();
-       const content = tree.readContent('/comp.ts');
-       expect(content).toContain(
-           'template: `<input [(ngModel)]="a || b" (ngModelChange)="foo($event)"/>`');
-     });
+    await runMigration();
+    const content = tree.readContent('/comp.ts');
+    expect(content).toContain(
+      'template: `<input [(ngModel)]="a || b" (ngModelChange)="foo($event)"/>`',
+    );
+  });
 
-  it('should not migrate an invalid expression if a property binding for the same binding exists',
-     async () => {
-       writeFile('/comp.ts', `
+  it('should not migrate an invalid expression if a property binding for the same binding exists', async () => {
+    writeFile(
+      '/comp.ts',
+      `
         import {Component} from '@angular/core';
 
         @Component({
           template: \`<input [(ngModel)]="a || b" [ngModel]="foo"/>\`
         })
         class Comp {}
-      `);
+      `,
+    );
 
-       await runMigration();
-       const content = tree.readContent('/comp.ts');
-       expect(content).toContain('template: `<input [(ngModel)]="a || b" [ngModel]="foo"/>`');
-     });
+    await runMigration();
+    const content = tree.readContent('/comp.ts');
+    expect(content).toContain('template: `<input [(ngModel)]="a || b" [ngModel]="foo"/>`');
+  });
 
   it('should migrate a two-way binding on an ng-template', async () => {
-    writeFile('/comp.ts', `
+    writeFile(
+      '/comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
         template: \`<ng-template [(ngModel)]="a && b.c"></ng-template>\`
       })
       class Comp {}
-    `);
+    `,
+    );
 
     await runMigration();
     const content = tree.readContent('/comp.ts');
     expect(content).toContain(
-        'template: `<ng-template [ngModel]="a && b.c" (ngModelChange)="a && (b.c = $event)"></ng-template>`');
+      'template: `<ng-template [ngModel]="a && b.c" (ngModelChange)="a && (b.c = $event)"></ng-template>`',
+    );
   });
 });
diff --git a/packages/core/schematics/test/project_tsconfig_paths_spec.ts b/packages/core/schematics/test/project_tsconfig_paths_spec.ts
index d1e2ec22100ac..02e4a7f3ad6bc 100644
--- a/packages/core/schematics/test/project_tsconfig_paths_spec.ts
+++ b/packages/core/schematics/test/project_tsconfig_paths_spec.ts
@@ -20,20 +20,24 @@ describe('project tsconfig paths', () => {
 
   it('should detect build tsconfig path inside of angular.json file', async () => {
     testTree.create('/my-custom-config.json', '');
-    testTree.create('/angular.json', JSON.stringify({
-      version: 1,
-      projects: {
-        my_name: {root: '', architect: {build: {options: {tsConfig: './my-custom-config.json'}}}}
-      }
-    }));
+    testTree.create(
+      '/angular.json',
+      JSON.stringify({
+        version: 1,
+        projects: {
+          my_name: {root: '', architect: {build: {options: {tsConfig: './my-custom-config.json'}}}},
+        },
+      }),
+    );
 
     expect((await getProjectTsConfigPaths(testTree)).buildPaths).toEqual(['my-custom-config.json']);
   });
 
-  it('should be able to read workspace configuration which is using jsconc-parser features',
-     async () => {
-       testTree.create('/my-build-config.json', '');
-       testTree.create('/angular.json', `{
+  it('should be able to read workspace configuration which is using jsconc-parser features', async () => {
+    testTree.create('/my-build-config.json', '');
+    testTree.create(
+      '/angular.json',
+      `{
       "version": 1,
       // Comments are supported in the workspace configurations.
       "projects": {
@@ -48,42 +52,51 @@ describe('project tsconfig paths', () => {
           }
         }
       },
-    }`);
+    }`,
+    );
 
-       expect((await getProjectTsConfigPaths(testTree)).buildPaths).toEqual([
-         'my-build-config.json'
-       ]);
-     });
+    expect((await getProjectTsConfigPaths(testTree)).buildPaths).toEqual(['my-build-config.json']);
+  });
 
   it('should detect test tsconfig path inside of angular.json file', async () => {
     testTree.create('/my-test-config.json', '');
-    testTree.create('/angular.json', JSON.stringify({
-      version: 1,
-      projects:
-          {my_name: {root: '', architect: {test: {options: {tsConfig: './my-test-config.json'}}}}}
-    }));
+    testTree.create(
+      '/angular.json',
+      JSON.stringify({
+        version: 1,
+        projects: {
+          my_name: {root: '', architect: {test: {options: {tsConfig: './my-test-config.json'}}}},
+        },
+      }),
+    );
 
     expect((await getProjectTsConfigPaths(testTree)).testPaths).toEqual(['my-test-config.json']);
   });
 
   it('should detect test tsconfig path inside of .angular.json file', async () => {
     testTree.create('/my-test-config.json', '');
-    testTree.create('/.angular.json', JSON.stringify({
-      version: 1,
-      projects: {
-        with_tests: {root: '', architect: {test: {options: {tsConfig: './my-test-config.json'}}}}
-      }
-    }));
+    testTree.create(
+      '/.angular.json',
+      JSON.stringify({
+        version: 1,
+        projects: {
+          with_tests: {root: '', architect: {test: {options: {tsConfig: './my-test-config.json'}}}},
+        },
+      }),
+    );
 
     expect((await getProjectTsConfigPaths(testTree)).testPaths).toEqual(['my-test-config.json']);
   });
 
   it('should not return duplicate tsconfig files', async () => {
     testTree.create('/tsconfig.json', '');
-    testTree.create('/.angular.json', JSON.stringify({
-      version: 1,
-      projects: {app: {root: '', architect: {build: {options: {tsConfig: 'tsconfig.json'}}}}}
-    }));
+    testTree.create(
+      '/.angular.json',
+      JSON.stringify({
+        version: 1,
+        projects: {app: {root: '', architect: {build: {options: {tsConfig: 'tsconfig.json'}}}}},
+      }),
+    );
 
     expect((await getProjectTsConfigPaths(testTree)).buildPaths).toEqual(['tsconfig.json']);
   });
diff --git a/packages/core/schematics/test/standalone_migration_spec.ts b/packages/core/schematics/test/standalone_migration_spec.ts
index a4b37c398623d..361ea71aeed2c 100644
--- a/packages/core/schematics/test/standalone_migration_spec.ts
+++ b/packages/core/schematics/test/standalone_migration_spec.ts
@@ -37,34 +37,48 @@ describe('standalone migration', () => {
     host = new TempScopedNodeJsSyncHost();
     tree = new UnitTestTree(new HostTree(host));
 
-    writeFile('/tsconfig.json', JSON.stringify({
-      compilerOptions: {
-        lib: ['es2015'],
-        strictNullChecks: true,
-      },
-    }));
-
-    writeFile('/angular.json', JSON.stringify({
-      version: 1,
-      projects: {t: {root: '', architect: {build: {options: {tsConfig: './tsconfig.json'}}}}}
-    }));
+    writeFile(
+      '/tsconfig.json',
+      JSON.stringify({
+        compilerOptions: {
+          lib: ['es2015'],
+          strictNullChecks: true,
+        },
+      }),
+    );
+
+    writeFile(
+      '/angular.json',
+      JSON.stringify({
+        version: 1,
+        projects: {t: {root: '', architect: {build: {options: {tsConfig: './tsconfig.json'}}}}},
+      }),
+    );
 
     // We need to declare the Angular symbols we're testing for, otherwise type checking won't work.
-    writeFile('/node_modules/@angular/core/index.d.ts', `
+    writeFile(
+      '/node_modules/@angular/core/index.d.ts',
+      `
       export declare class PlatformRef {
         bootstrapModule(module: any): any;
       }
 
       export declare function forwardRef<T>(fn: () => T): T;
-    `);
+    `,
+    );
 
-    writeFile('/node_modules/@angular/platform-browser/index.d.ts', `
+    writeFile(
+      '/node_modules/@angular/platform-browser/index.d.ts',
+      `
       import {PlatformRef} from '@angular/core';
 
       export const platformBrowser: () => PlatformRef;
-    `);
+    `,
+    );
 
-    writeFile('/node_modules/@angular/platform-browser/animations/index.d.ts', `
+    writeFile(
+      '/node_modules/@angular/platform-browser/animations/index.d.ts',
+      `
       import {ModuleWithProviders} from '@angular/core';
 
       export declare class BrowserAnimationsModule {
@@ -72,15 +86,21 @@ describe('standalone migration', () => {
       }
 
       export declare class NoopAnimationsModule {}
-    `);
+    `,
+    );
 
-    writeFile('/node_modules/@angular/platform-browser-dynamic/index.d.ts', `
+    writeFile(
+      '/node_modules/@angular/platform-browser-dynamic/index.d.ts',
+      `
       import {PlatformRef} from '@angular/core';
 
       export const platformBrowserDynamic: () => PlatformRef;
-    `);
+    `,
+    );
 
-    writeFile('/node_modules/@angular/common/index.d.ts', `
+    writeFile(
+      '/node_modules/@angular/common/index.d.ts',
+      `
       import {ɵɵDirectiveDeclaration, ɵɵNgModuleDeclaration} from '@angular/core';
 
       export declare class NgIf {
@@ -108,9 +128,12 @@ describe('standalone migration', () => {
       }
 
       export {NgForOf as NgFor};
-    `);
+    `,
+    );
 
-    writeFile('/node_modules/@angular/router/index.d.ts', `
+    writeFile(
+      '/node_modules/@angular/router/index.d.ts',
+      `
       import {ModuleWithProviders, ɵɵDirectiveDeclaration, ɵɵNgModuleDeclaration} from '@angular/core';
 
       export declare class RouterLink {
@@ -122,9 +145,12 @@ describe('standalone migration', () => {
         static forRoot(routes: any[], config?: any): ModuleWithProviders<RouterModule>;
         static ɵmod: ɵɵNgModuleDeclaration<CommonModule, [typeof RouterLink], [], [typeof RouterLink]>;
       }
-    `);
+    `,
+    );
 
-    writeFile('/node_modules/@angular/common/http/index.d.ts', `
+    writeFile(
+      '/node_modules/@angular/common/http/index.d.ts',
+      `
       import {ModuleWithProviders} from '@angular/core';
 
       export declare class HttpClientModule {
@@ -132,17 +158,24 @@ describe('standalone migration', () => {
           static ɵmod: i0.ɵɵNgModuleDeclaration<HttpClientModule, never, never, never>;
           static ɵinj: i0.ɵɵInjectorDeclaration<HttpClientModule>;
       }
-    `);
+    `,
+    );
 
-    writeFile('/node_modules/@angular/core/testing/index.d.ts', `
+    writeFile(
+      '/node_modules/@angular/core/testing/index.d.ts',
+      `
       export declare class TestBed {
         static configureTestingModule(config: any): any;
       }
-    `);
+    `,
+    );
 
-    writeFile('/node_modules/some_internal_path/angular/testing/catalyst/index.d.ts', `
+    writeFile(
+      '/node_modules/some_internal_path/angular/testing/catalyst/index.d.ts',
+      `
       export declare function setupModule(config: any);
-    `);
+    `,
+    );
 
     previousWorkingDir = shx.pwd();
     tmpDirPath = getSystemPath(host.root);
@@ -158,14 +191,17 @@ describe('standalone migration', () => {
   });
 
   it('should throw an error if no files match the passed-in path', async () => {
-    let error: string|null = null;
+    let error: string | null = null;
 
-    writeFile('dir.ts', `
+    writeFile(
+      'dir.ts',
+      `
       import {Directive} from '@angular/core';
 
       @Directive({selector: '[dir]'})
       export class MyDir {}
-    `);
+    `,
+    );
 
     try {
       await runMigration('convert-to-standalone', './foo');
@@ -174,18 +210,22 @@ describe('standalone migration', () => {
     }
 
     expect(error).toMatch(
-        /Could not find any files to migrate under the path .*\/foo\. Cannot run the standalone migration/);
+      /Could not find any files to migrate under the path .*\/foo\. Cannot run the standalone migration/,
+    );
   });
 
   it('should throw an error if a path outside of the project is passed in', async () => {
-    let error: string|null = null;
+    let error: string | null = null;
 
-    writeFile('dir.ts', `
+    writeFile(
+      'dir.ts',
+      `
       import {Directive} from '@angular/core';
 
       @Directive({selector: '[dir]'})
       export class MyDir {}
-    `);
+    `,
+    );
 
     try {
       await runMigration('convert-to-standalone', '../foo');
@@ -197,7 +237,7 @@ describe('standalone migration', () => {
   });
 
   it('should throw an error if the passed in path is a file', async () => {
-    let error: string|null = null;
+    let error: string | null = null;
 
     writeFile('dir.ts', '');
 
@@ -208,11 +248,14 @@ describe('standalone migration', () => {
     }
 
     expect(error).toMatch(
-        /Migration path .*\/dir\.ts has to be a directory\. Cannot run the standalone migration/);
+      /Migration path .*\/dir\.ts has to be a directory\. Cannot run the standalone migration/,
+    );
   });
 
   it('should create an `imports` array if the module does not have one already', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule, Directive} from '@angular/core';
 
       @Directive({selector: '[dir]'})
@@ -220,16 +263,20 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [MyDir]})
       export class Mod {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('module.ts')))
-        .toContain(stripWhitespace(`@NgModule({imports: [MyDir]})`));
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`@NgModule({imports: [MyDir]})`),
+    );
   });
 
   it('should combine the `declarations` array with a static `imports` array', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule, Directive} from '@angular/core';
       import {CommonModule} from '@angular/common';
 
@@ -238,17 +285,20 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [MyDir], imports: [CommonModule]})
       export class Mod {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('module.ts')))
-        .toContain(stripWhitespace(`@NgModule({imports: [CommonModule, MyDir]})`));
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`@NgModule({imports: [CommonModule, MyDir]})`),
+    );
   });
 
-  it('should combine a `declarations` array with a spread expression into the `imports`',
-     async () => {
-       writeFile('module.ts', `
+  it('should combine a `declarations` array with a spread expression into the `imports`', async () => {
+    writeFile(
+      'module.ts',
+      `
         import {NgModule, Directive} from '@angular/core';
         import {CommonModule} from '@angular/common';
 
@@ -262,18 +312,20 @@ describe('standalone migration', () => {
 
         @NgModule({declarations: [MyDir, ...extraDeclarations], imports: [CommonModule]})
         export class Mod {}
-      `);
+      `,
+    );
 
-       await runMigration('convert-to-standalone');
+    await runMigration('convert-to-standalone');
 
-       expect(stripWhitespace(tree.readContent('module.ts')))
-           .toContain(stripWhitespace(
-               `@NgModule({imports: [CommonModule, MyDir, ...extraDeclarations]})`));
-     });
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`@NgModule({imports: [CommonModule, MyDir, ...extraDeclarations]})`),
+    );
+  });
 
-  it('should combine a `declarations` array with an `imports` array that has a spread expression',
-     async () => {
-       writeFile('module.ts', `
+  it('should combine a `declarations` array with an `imports` array that has a spread expression', async () => {
+    writeFile(
+      'module.ts',
+      `
         import {NgModule, Directive} from '@angular/core';
         import {CommonModule} from '@angular/common';
 
@@ -287,18 +339,20 @@ describe('standalone migration', () => {
 
         @NgModule({declarations: [MyDir], imports: [CommonModule, ...extraImports]})
         export class Mod {}
-      `);
+      `,
+    );
 
-       await runMigration('convert-to-standalone');
+    await runMigration('convert-to-standalone');
 
-       expect(stripWhitespace(tree.readContent('module.ts')))
-           .toContain(
-               stripWhitespace(`@NgModule({imports: [CommonModule, ...extraImports, MyDir]})`));
-     });
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`@NgModule({imports: [CommonModule, ...extraImports, MyDir]})`),
+    );
+  });
 
-  it('should use a spread expression if the `declarations` is an expression when combining with the `imports`',
-     async () => {
-       writeFile('module.ts', `
+  it('should use a spread expression if the `declarations` is an expression when combining with the `imports`', async () => {
+    writeFile(
+      'module.ts',
+      `
         import {NgModule, Directive} from '@angular/core';
         import {CommonModule} from '@angular/common';
 
@@ -309,17 +363,20 @@ describe('standalone migration', () => {
 
         @NgModule({declarations: DECLARATIONS, imports: [CommonModule]})
         export class Mod {}
-      `);
+      `,
+    );
 
-       await runMigration('convert-to-standalone');
+    await runMigration('convert-to-standalone');
 
-       expect(stripWhitespace(tree.readContent('module.ts')))
-           .toContain(stripWhitespace(`@NgModule({imports: [CommonModule, ...DECLARATIONS]})`));
-     });
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`@NgModule({imports: [CommonModule, ...DECLARATIONS]})`),
+    );
+  });
 
-  it('should use a spread expression if the `imports` is an expression when combining with the `declarations`',
-     async () => {
-       writeFile('module.ts', `
+  it('should use a spread expression if the `imports` is an expression when combining with the `declarations`', async () => {
+    writeFile(
+      'module.ts',
+      `
         import {NgModule, Directive} from '@angular/core';
         import {CommonModule} from '@angular/common';
 
@@ -330,17 +387,20 @@ describe('standalone migration', () => {
 
         @NgModule({declarations: [MyDir], imports: IMPORTS})
         export class Mod {}
-      `);
+      `,
+    );
 
-       await runMigration('convert-to-standalone');
+    await runMigration('convert-to-standalone');
 
-       expect(stripWhitespace(tree.readContent('module.ts')))
-           .toContain(stripWhitespace(`@NgModule({imports: [...IMPORTS, MyDir]})`));
-     });
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`@NgModule({imports: [...IMPORTS, MyDir]})`),
+    );
+  });
 
-  it('should use a spread expression if both the `declarations` and the `imports` are not static arrays',
-     async () => {
-       writeFile('module.ts', `
+  it('should use a spread expression if both the `declarations` and the `imports` are not static arrays', async () => {
+    writeFile(
+      'module.ts',
+      `
         import {NgModule, Directive} from '@angular/core';
         import {CommonModule} from '@angular/common';
 
@@ -352,16 +412,20 @@ describe('standalone migration', () => {
 
         @NgModule({declarations: DECLARATIONS, imports: IMPORTS})
         export class Mod {}
-      `);
+      `,
+    );
 
-       await runMigration('convert-to-standalone');
+    await runMigration('convert-to-standalone');
 
-       expect(stripWhitespace(tree.readContent('module.ts')))
-           .toContain(stripWhitespace(`@NgModule({imports: [...IMPORTS, ...DECLARATIONS]})`));
-     });
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`@NgModule({imports: [...IMPORTS, ...DECLARATIONS]})`),
+    );
+  });
 
   it('should convert a directive in the same file as its module to standalone', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule, Directive} from '@angular/core';
 
       @Directive({selector: '[dir]'})
@@ -369,20 +433,25 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [MyDir], exports: [MyDir]})
       export class Mod {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
     const result = tree.readContent('module.ts');
 
-    expect(stripWhitespace(result))
-        .toContain(stripWhitespace(`@Directive({selector: '[dir]', standalone: true})`));
-    expect(stripWhitespace(result))
-        .toContain(stripWhitespace(`@NgModule({imports: [MyDir], exports: [MyDir]})`));
+    expect(stripWhitespace(result)).toContain(
+      stripWhitespace(`@Directive({selector: '[dir]', standalone: true})`),
+    );
+    expect(stripWhitespace(result)).toContain(
+      stripWhitespace(`@NgModule({imports: [MyDir], exports: [MyDir]})`),
+    );
   });
 
   it('should convert a pipe in the same file as its module to standalone', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule, Pipe} from '@angular/core';
 
       @Pipe({name: 'myPipe'})
@@ -390,16 +459,19 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [MyPipe], exports: [MyPipe]})
       export class Mod {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
     const result = tree.readContent('module.ts');
 
-    expect(stripWhitespace(result))
-        .toContain(stripWhitespace(`@Pipe({name: 'myPipe', standalone: true})`));
-    expect(stripWhitespace(result))
-        .toContain(stripWhitespace(`@NgModule({imports: [MyPipe], exports: [MyPipe]})`));
+    expect(stripWhitespace(result)).toContain(
+      stripWhitespace(`@Pipe({name: 'myPipe', standalone: true})`),
+    );
+    expect(stripWhitespace(result)).toContain(
+      stripWhitespace(`@NgModule({imports: [MyPipe], exports: [MyPipe]})`),
+    );
   });
 
   it('should only migrate declarations under a specific path', async () => {
@@ -423,60 +495,79 @@ describe('standalone migration', () => {
   });
 
   it('should convert a directive in a different file from its module to standalone', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyDir} from './dir';
 
       @NgModule({declarations: [MyDir], exports: [MyDir]})
       export class Mod {}
-    `);
+    `,
+    );
 
-    writeFile('dir.ts', `
+    writeFile(
+      'dir.ts',
+      `
       import {Directive} from '@angular/core';
 
       @Directive({selector: '[dir]'})
       export class MyDir {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('module.ts')))
-        .toContain(stripWhitespace(`@NgModule({imports: [MyDir], exports: [MyDir]})`));
-    expect(stripWhitespace(tree.readContent('dir.ts')))
-        .toContain(stripWhitespace(`@Directive({selector: '[dir]', standalone: true})`));
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`@NgModule({imports: [MyDir], exports: [MyDir]})`),
+    );
+    expect(stripWhitespace(tree.readContent('dir.ts'))).toContain(
+      stripWhitespace(`@Directive({selector: '[dir]', standalone: true})`),
+    );
   });
 
   it('should convert a component with no template dependencies to standalone', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
 
       @NgModule({declarations: [MyComp], exports: [MyComp]})
       export class Mod {}
-    `);
+    `,
+    );
 
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-comp', template: '<h1>Hello</h1>'})
       export class MyComp {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('module.ts')))
-        .toContain(stripWhitespace(`@NgModule({imports: [MyComp], exports: [MyComp]})`));
-    expect(stripWhitespace(tree.readContent('comp.ts'))).toContain(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`@NgModule({imports: [MyComp], exports: [MyComp]})`),
+    );
+    expect(stripWhitespace(tree.readContent('comp.ts'))).toContain(
+      stripWhitespace(`
         @Component({
           selector: 'my-comp',
           template: '<h1>Hello</h1>',
           standalone: true
         })
-      `));
+      `),
+    );
   });
 
   it('should add imports to dependencies within the same module', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
       import {MyButton} from './button';
@@ -484,28 +575,38 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [MyComp, MyButton, MyTooltip], exports: [MyComp]})
       export class Mod {}
-    `);
+    `,
+    );
 
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-comp', template: '<my-button tooltip="Click me">Hello</my-button>'})
       export class MyComp {}
-    `);
+    `,
+    );
 
-    writeFile('button.ts', `
+    writeFile(
+      'button.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-button', template: '<ng-content></ng-content>'})
       export class MyButton {}
-    `);
+    `,
+    );
 
-    writeFile('tooltip.ts', `
+    writeFile(
+      'tooltip.ts',
+      `
       import {Directive} from '@angular/core';
 
       @Directive({selector: '[tooltip]'})
       export class MyTooltip {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
@@ -513,35 +614,45 @@ describe('standalone migration', () => {
 
     expect(myCompContent).toContain(`import { MyButton } from './button';`);
     expect(myCompContent).toContain(`import { MyTooltip } from './tooltip';`);
-    expect(stripWhitespace(myCompContent)).toContain(stripWhitespace(`
+    expect(stripWhitespace(myCompContent)).toContain(
+      stripWhitespace(`
       @Component({
         selector: 'my-comp',
         template: '<my-button tooltip="Click me">Hello</my-button>',
         standalone: true,
         imports: [MyButton, MyTooltip]
       })
-    `));
-    expect(stripWhitespace(tree.readContent('module.ts')))
-        .toContain(stripWhitespace(
-            `@NgModule({imports: [MyComp, MyButton, MyTooltip], exports: [MyComp]})`));
-    expect(stripWhitespace(tree.readContent('button.ts')))
-        .toContain(stripWhitespace(
-            `@Component({selector: 'my-button', template: '<ng-content></ng-content>', standalone: true})`));
-    expect(stripWhitespace(tree.readContent('tooltip.ts')))
-        .toContain(stripWhitespace(`@Directive({selector: '[tooltip]', standalone: true})`));
+    `),
+    );
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`@NgModule({imports: [MyComp, MyButton, MyTooltip], exports: [MyComp]})`),
+    );
+    expect(stripWhitespace(tree.readContent('button.ts'))).toContain(
+      stripWhitespace(
+        `@Component({selector: 'my-button', template: '<ng-content></ng-content>', standalone: true})`,
+      ),
+    );
+    expect(stripWhitespace(tree.readContent('tooltip.ts'))).toContain(
+      stripWhitespace(`@Directive({selector: '[tooltip]', standalone: true})`),
+    );
   });
 
   it('should reuse existing import statements when adding imports to a component', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
       import {MyButton} from './button';
 
       @NgModule({declarations: [MyComp, MyButton], exports: [MyComp]})
       export class Mod {}
-    `);
+    `,
+    );
 
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
       import {helper} from './button';
 
@@ -549,193 +660,245 @@ describe('standalone migration', () => {
 
       @Component({selector: 'my-comp', template: '<my-button>Hello</my-button>'})
       export class MyComp {}
-    `);
+    `,
+    );
 
-    writeFile('button.ts', `
+    writeFile(
+      'button.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-button', template: '<ng-content></ng-content>'})
       export class MyButton {}
 
       export function helper() {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
     const myCompContent = tree.readContent('comp.ts');
 
     expect(myCompContent).toContain(`import { helper, MyButton } from './button';`);
-    expect(stripWhitespace(myCompContent)).toContain(stripWhitespace(`
+    expect(stripWhitespace(myCompContent)).toContain(
+      stripWhitespace(`
       @Component({
         selector: 'my-comp',
         template: '<my-button>Hello</my-button>',
         standalone: true,
         imports: [MyButton]
       })
-    `));
+    `),
+    );
   });
 
-  it('should refer to pre-existing standalone dependencies directly when adding to the `imports`',
-     async () => {
-       writeFile('module.ts', `
+  it('should refer to pre-existing standalone dependencies directly when adding to the `imports`', async () => {
+    writeFile(
+      'module.ts',
+      `
         import {NgModule} from '@angular/core';
         import {MyComp} from './comp';
         import {MyButton} from './button';
 
         @NgModule({imports: [MyButton], declarations: [MyComp], exports: [MyComp]})
         export class Mod {}
-      `);
+      `,
+    );
 
-       writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
         import {Component} from '@angular/core';
 
         @Component({selector: 'my-comp', template: '<my-button>Hello</my-button>'})
         export class MyComp {}
-      `);
+      `,
+    );
 
-       writeFile('button.ts', `
+    writeFile(
+      'button.ts',
+      `
         import {Component} from '@angular/core';
         import {MyComp} from './comp';
 
         @Component({selector: 'my-button', template: '<ng-content></ng-content>', standalone: true})
         export class MyButton {}
-      `);
+      `,
+    );
 
-       await runMigration('convert-to-standalone');
-       const myCompContent = tree.readContent('comp.ts');
+    await runMigration('convert-to-standalone');
+    const myCompContent = tree.readContent('comp.ts');
 
-       expect(myCompContent).toContain(`import { MyButton } from './button';`);
-       expect(stripWhitespace(myCompContent)).toContain(stripWhitespace(`
+    expect(myCompContent).toContain(`import { MyButton } from './button';`);
+    expect(stripWhitespace(myCompContent)).toContain(
+      stripWhitespace(`
          @Component({
            selector: 'my-comp',
            template: '<my-button>Hello</my-button>',
            standalone: true,
            imports: [MyButton]
          })
-       `));
-       expect(stripWhitespace(tree.readContent('module.ts')))
-           .toContain(
-               stripWhitespace('@NgModule({imports: [MyButton, MyComp], exports: [MyComp]})'));
-     });
+       `),
+    );
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace('@NgModule({imports: [MyButton, MyComp], exports: [MyComp]})'),
+    );
+  });
 
   it('should refer to dependencies being handled in the same migration directly', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
       import {ButtonModule} from './button.module';
 
       @NgModule({imports: [ButtonModule], declarations: [MyComp], exports: [MyComp]})
       export class Mod {}
-    `);
+    `,
+    );
 
-    writeFile('button.module.ts', `
+    writeFile(
+      'button.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyButton} from './button';
 
       @NgModule({declarations: [MyButton], exports: [MyButton]})
       export class ButtonModule {}
-    `);
+    `,
+    );
 
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-comp', template: '<my-button>Hello</my-button>'})
       export class MyComp {}
-    `);
+    `,
+    );
 
-    writeFile('button.ts', `
+    writeFile(
+      'button.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-button', template: '<ng-content></ng-content>'})
       export class MyButton {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
     const myCompContent = tree.readContent('comp.ts');
 
     expect(myCompContent).toContain(`import { MyButton } from './button';`);
-    expect(stripWhitespace(myCompContent)).toContain(stripWhitespace(`
+    expect(stripWhitespace(myCompContent)).toContain(
+      stripWhitespace(`
       @Component({
         selector: 'my-comp',
         template: '<my-button>Hello</my-button>',
         standalone: true,
         imports: [MyButton]
       })
-    `));
-    expect(stripWhitespace(tree.readContent('button.ts'))).toContain(stripWhitespace(`
+    `),
+    );
+    expect(stripWhitespace(tree.readContent('button.ts'))).toContain(
+      stripWhitespace(`
       @Component({
         selector: 'my-button',
         template: '<ng-content></ng-content>',
         standalone: true
       })
-    `));
-    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(stripWhitespace(`
+    `),
+    );
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`
       @NgModule({imports: [ButtonModule, MyComp], exports: [MyComp]})
-    `));
-    expect(stripWhitespace(tree.readContent('button.module.ts'))).toContain(stripWhitespace(`
+    `),
+    );
+    expect(stripWhitespace(tree.readContent('button.module.ts'))).toContain(
+      stripWhitespace(`
       @NgModule({imports: [MyButton], exports: [MyButton]})
-    `));
+    `),
+    );
   });
 
-  it('should refer to dependencies by their module if they have been excluded from the migration',
-     async () => {
-       writeFile('./should-migrate/module.ts', `
+  it('should refer to dependencies by their module if they have been excluded from the migration', async () => {
+    writeFile(
+      './should-migrate/module.ts',
+      `
         import {NgModule} from '@angular/core';
         import {MyComp} from './comp';
         import {ButtonModule} from '../do-not-migrate/button.module';
 
         @NgModule({imports: [ButtonModule], declarations: [MyComp], exports: [MyComp]})
         export class Mod {}
-      `);
+      `,
+    );
 
-       writeFile('./do-not-migrate/button.module.ts', `
+    writeFile(
+      './do-not-migrate/button.module.ts',
+      `
         import {NgModule} from '@angular/core';
         import {MyButton} from './button';
 
         @NgModule({declarations: [MyButton], exports: [MyButton]})
         export class ButtonModule {}
-      `);
+      `,
+    );
 
-       writeFile('./should-migrate/comp.ts', `
+    writeFile(
+      './should-migrate/comp.ts',
+      `
         import {Component} from '@angular/core';
 
         @Component({selector: 'my-comp', template: '<my-button>Hello</my-button>'})
         export class MyComp {}
-      `);
+      `,
+    );
 
-       writeFile('./do-not-migrate/button.ts', `
+    writeFile(
+      './do-not-migrate/button.ts',
+      `
         import {Component} from '@angular/core';
 
         @Component({selector: 'my-button', template: '<ng-content></ng-content>'})
         export class MyButton {}
-      `);
+      `,
+    );
 
-       await runMigration('convert-to-standalone', './should-migrate');
+    await runMigration('convert-to-standalone', './should-migrate');
 
-       const myCompContent = tree.readContent('./should-migrate/comp.ts');
+    const myCompContent = tree.readContent('./should-migrate/comp.ts');
 
-       expect(myCompContent)
-           .toContain(`import { ButtonModule } from '../do-not-migrate/button.module';`);
-       expect(stripWhitespace(myCompContent)).toContain(stripWhitespace(`
+    expect(myCompContent).toContain(
+      `import { ButtonModule } from '../do-not-migrate/button.module';`,
+    );
+    expect(stripWhitespace(myCompContent)).toContain(
+      stripWhitespace(`
         @Component({
           selector: 'my-comp',
           template: '<my-button>Hello</my-button>',
           standalone: true,
           imports: [ButtonModule]
         })
-      `));
-       expect(stripWhitespace(tree.readContent('./should-migrate/module.ts')))
-           .toContain(
-               stripWhitespace(`@NgModule({imports: [ButtonModule, MyComp], exports: [MyComp]})`));
-       expect(tree.readContent('./do-not-migrate/button.ts')).not.toContain('standalone');
-       expect(stripWhitespace(tree.readContent('./do-not-migrate/button.module.ts')))
-           .toContain(
-               stripWhitespace(`@NgModule({declarations: [MyButton], exports: [MyButton]})`));
-     });
+      `),
+    );
+    expect(stripWhitespace(tree.readContent('./should-migrate/module.ts'))).toContain(
+      stripWhitespace(`@NgModule({imports: [ButtonModule, MyComp], exports: [MyComp]})`),
+    );
+    expect(tree.readContent('./do-not-migrate/button.ts')).not.toContain('standalone');
+    expect(stripWhitespace(tree.readContent('./do-not-migrate/button.module.ts'))).toContain(
+      stripWhitespace(`@NgModule({declarations: [MyButton], exports: [MyButton]})`),
+    );
+  });
 
   it('should add imports to dependencies within the same module', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
         import {NgModule} from '@angular/core';
         import {MyComp} from './comp';
         import {MyButton} from './button';
@@ -743,28 +906,38 @@ describe('standalone migration', () => {
 
         @NgModule({declarations: [MyComp, MyButton, MyTooltip], exports: [MyComp]})
         export class Mod {}
-      `);
+      `,
+    );
 
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
         import {Component} from '@angular/core';
 
         @Component({selector: 'my-comp', template: '<my-button tooltip="Click me">Hello</my-button>'})
         export class MyComp {}
-      `);
+      `,
+    );
 
-    writeFile('button.ts', `
+    writeFile(
+      'button.ts',
+      `
         import {Component} from '@angular/core';
 
         @Component({selector: 'my-button', template: '<ng-content></ng-content>'})
         export class MyButton {}
-      `);
+      `,
+    );
 
-    writeFile('tooltip.ts', `
+    writeFile(
+      'tooltip.ts',
+      `
         import {Directive} from '@angular/core';
 
         @Directive({selector: '[tooltip]'})
         export class MyTooltip {}
-      `);
+      `,
+    );
 
     await runMigration('convert-to-standalone');
 
@@ -772,35 +945,45 @@ describe('standalone migration', () => {
 
     expect(myCompContent).toContain(`import { MyButton } from './button';`);
     expect(myCompContent).toContain(`import { MyTooltip } from './tooltip';`);
-    expect(stripWhitespace(myCompContent)).toContain(stripWhitespace(`
+    expect(stripWhitespace(myCompContent)).toContain(
+      stripWhitespace(`
         @Component({
           selector: 'my-comp',
           template: '<my-button tooltip="Click me">Hello</my-button>',
           standalone: true,
           imports: [MyButton, MyTooltip]
         })
-      `));
-    expect(stripWhitespace(tree.readContent('module.ts')))
-        .toContain(stripWhitespace(
-            `@NgModule({imports: [MyComp, MyButton, MyTooltip], exports: [MyComp]})`));
-    expect(stripWhitespace(tree.readContent('button.ts')))
-        .toContain(stripWhitespace(
-            `@Component({selector: 'my-button', template: '<ng-content></ng-content>', standalone: true})`));
-    expect(stripWhitespace(tree.readContent('tooltip.ts')))
-        .toContain(stripWhitespace(`@Directive({selector: '[tooltip]', standalone: true})`));
+      `),
+    );
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`@NgModule({imports: [MyComp, MyButton, MyTooltip], exports: [MyComp]})`),
+    );
+    expect(stripWhitespace(tree.readContent('button.ts'))).toContain(
+      stripWhitespace(
+        `@Component({selector: 'my-button', template: '<ng-content></ng-content>', standalone: true})`,
+      ),
+    );
+    expect(stripWhitespace(tree.readContent('tooltip.ts'))).toContain(
+      stripWhitespace(`@Directive({selector: '[tooltip]', standalone: true})`),
+    );
   });
 
   it('should add imports to external dependencies', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {CommonModule} from '@angular/common';
       import {MyComp, MyOtherComp} from './comp';
 
       @NgModule({imports: [CommonModule], declarations: [MyComp, MyOtherComp], exports: [MyComp]})
       export class Mod {}
-    `);
+    `,
+    );
 
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
@@ -822,14 +1005,16 @@ describe('standalone migration', () => {
       export class MyOtherComp {
         isShown = true;
       }
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
     const myCompContent = tree.readContent('comp.ts');
 
     expect(myCompContent).toContain(`import { NgFor, NgIf } from '@angular/common';`);
-    expect(stripWhitespace(myCompContent)).toContain(stripWhitespace(`
+    expect(stripWhitespace(myCompContent)).toContain(
+      stripWhitespace(`
       @Component({
         selector: 'my-comp',
         template: \`
@@ -840,67 +1025,87 @@ describe('standalone migration', () => {
         standalone: true,
         imports: [NgFor, NgIf]
       })
-    `));
-    expect(stripWhitespace(myCompContent)).toContain(stripWhitespace(`
+    `),
+    );
+    expect(stripWhitespace(myCompContent)).toContain(
+      stripWhitespace(`
       @Component({
         selector: 'my-other-comp',
         template: '<div *ngIf="isShown"></div>',
         standalone: true,
         imports: [NgIf]
       })
-    `));
-    expect(stripWhitespace(tree.readContent('module.ts')))
-        .toContain(stripWhitespace(
-            `@NgModule({imports: [CommonModule, MyComp, MyOtherComp], exports: [MyComp]})`));
+    `),
+    );
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(
+        `@NgModule({imports: [CommonModule, MyComp, MyOtherComp], exports: [MyComp]})`,
+      ),
+    );
   });
 
   it('should add imports to pipes that are used in the template', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
       import {MyPipe} from './pipe';
 
       @NgModule({declarations: [MyComp, MyPipe], exports: [MyComp]})
       export class Mod {}
-    `);
+    `,
+    );
 
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-comp', template: '{{"hello" | myPipe}}'})
       export class MyComp {}
-    `);
+    `,
+    );
 
-    writeFile('pipe.ts', `
+    writeFile(
+      'pipe.ts',
+      `
       import {Pipe} from '@angular/core';
 
       @Pipe({name: 'myPipe'})
       export class MyPipe {
         transform() {}
       }
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
     const myCompContent = tree.readContent('comp.ts');
 
     expect(myCompContent).toContain(`import { MyPipe } from './pipe';`);
-    expect(stripWhitespace(myCompContent)).toContain(stripWhitespace(`
+    expect(stripWhitespace(myCompContent)).toContain(
+      stripWhitespace(`
       @Component({
         selector: 'my-comp',
         template: '{{"hello" | myPipe}}',
         standalone: true,
         imports: [MyPipe]
       })
-    `));
-    expect(stripWhitespace(tree.readContent('module.ts')))
-        .toContain(stripWhitespace(`@NgModule({imports: [MyComp, MyPipe], exports: [MyComp]})`));
-    expect(stripWhitespace(tree.readContent('pipe.ts')))
-        .toContain(stripWhitespace(`@Pipe({name: 'myPipe', standalone: true})`));
+    `),
+    );
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`@NgModule({imports: [MyComp, MyPipe], exports: [MyComp]})`),
+    );
+    expect(stripWhitespace(tree.readContent('pipe.ts'))).toContain(
+      stripWhitespace(`@Pipe({name: 'myPipe', standalone: true})`),
+    );
   });
 
   it('should migrate tests with an inline NgModule', async () => {
-    writeFile('app.spec.ts', `
+    writeFile(
+      'app.spec.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {TestBed} from '@angular/core/testing';
 
@@ -920,37 +1125,49 @@ describe('standalone migration', () => {
           expect(fixture.nativeElement.innerHTML).toBe('<hello>Hello</hello>');
         });
       });
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
     const content = stripWhitespace(tree.readContent('app.spec.ts'));
 
-    expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
       @Component({selector: 'hello', template: 'Hello', standalone: true})
       class Hello {}
-    `));
+    `),
+    );
 
-    expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
       @Component({template: '<hello></hello>', standalone: true, imports: [Hello]})
       class App {}
-    `));
+    `),
+    );
 
-    expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
       @NgModule({imports: [App, Hello], exports: [App, Hello]})
       class Mod {}
-    `));
+    `),
+    );
   });
 
   it('should migrate tests where the declaration is already standalone', async () => {
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'comp', template: '', standalone: true})
       export class MyComp {}
-    `);
+    `,
+    );
 
-    writeFile('app.spec.ts', `
+    writeFile(
+      'app.spec.ts',
+      `
       import {TestBed} from '@angular/core/testing';
       import {MyComp} from './comp';
 
@@ -960,11 +1177,13 @@ describe('standalone migration', () => {
           expect(() => TestBed.createComponent(MyComp)).not.toThrow();
         });
       });
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('app.spec.ts'))).toContain(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('app.spec.ts'))).toContain(
+      stripWhitespace(`
       import {TestBed} from '@angular/core/testing';
       import {MyComp} from './comp';
 
@@ -974,27 +1193,36 @@ describe('standalone migration', () => {
           expect(() => TestBed.createComponent(MyComp)).not.toThrow();
         });
       });
-    `));
+    `),
+    );
   });
 
   it('should import the module that declares a template dependency', async () => {
-    writeFile('./should-migrate/module.ts', `
+    writeFile(
+      './should-migrate/module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
       import {ButtonModule} from '../do-not-migrate/button.module';
 
       @NgModule({imports: [ButtonModule], declarations: [MyComp]})
       export class Mod {}
-    `);
+    `,
+    );
 
-    writeFile('./should-migrate/comp.ts', `
+    writeFile(
+      './should-migrate/comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-comp', template: '<my-button>Hello</my-button>'})
       export class MyComp {}
-    `);
+    `,
+    );
 
-    writeFile('./do-not-migrate/button.module.ts', `
+    writeFile(
+      './do-not-migrate/button.module.ts',
+      `
       import {NgModule, forwardRef} from '@angular/core';
       import {MyButton} from './button';
 
@@ -1006,41 +1234,54 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [MyButton], exports: [MyButton]})
       export class ButtonModule {}
-    `);
+    `,
+    );
 
-    writeFile('./do-not-migrate/button.ts', `
+    writeFile(
+      './do-not-migrate/button.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-button', template: '<ng-content></ng-content>'})
       export class MyButton {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone', './should-migrate');
 
     const myCompContent = tree.readContent('./should-migrate/comp.ts');
-    expect(myCompContent)
-        .toContain(`import { ButtonModule } from '../do-not-migrate/button.module';`);
+    expect(myCompContent).toContain(
+      `import { ButtonModule } from '../do-not-migrate/button.module';`,
+    );
     expect(myCompContent).toContain('imports: [ButtonModule]');
   });
 
   it('should not reference internal modules', async () => {
-    writeFile('./should-migrate/module.ts', `
+    writeFile(
+      './should-migrate/module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
       import {ɵButtonModule} from '../do-not-migrate/button.module';
 
       @NgModule({imports: [ɵButtonModule], declarations: [MyComp]})
       export class Mod {}
-    `);
+    `,
+    );
 
-    writeFile('./should-migrate/comp.ts', `
+    writeFile(
+      './should-migrate/comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-comp', template: '<my-button>Hello</my-button>'})
       export class MyComp {}
-    `);
+    `,
+    );
 
-    writeFile('./do-not-migrate/button.module.ts', `
+    writeFile(
+      './do-not-migrate/button.module.ts',
+      `
       import {NgModule, forwardRef} from '@angular/core';
       import {MyButton} from './button';
 
@@ -1052,25 +1293,32 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [MyButton], exports: [MyButton]})
       export class ɵButtonModule {}
-    `);
+    `,
+    );
 
-    writeFile('./do-not-migrate/button.ts', `
+    writeFile(
+      './do-not-migrate/button.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-button', template: '<ng-content></ng-content>'})
       export class MyButton {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone', './should-migrate');
 
     const myCompContent = tree.readContent('./should-migrate/comp.ts');
-    expect(myCompContent)
-        .toContain(`import { ExporterModule } from '../do-not-migrate/button.module';`);
+    expect(myCompContent).toContain(
+      `import { ExporterModule } from '../do-not-migrate/button.module';`,
+    );
     expect(myCompContent).toContain('imports: [ExporterModule]');
   });
 
   it('should migrate tests with a component declared through TestBed', async () => {
-    writeFile('app.spec.ts', `
+    writeFile(
+      'app.spec.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {TestBed} from '@angular/core/testing';
       import {ButtonModule} from './button.module';
@@ -1098,13 +1346,15 @@ describe('standalone migration', () => {
 
       @Component({template: '<hello></hello>'})
       class App {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
     const content = stripWhitespace(tree.readContent('app.spec.ts'));
 
-    expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
       @Component({
         selector: 'hello',
         template: 'Hello',
@@ -1112,18 +1362,22 @@ describe('standalone migration', () => {
         imports: [ButtonModule, MatCardModule]
       })
       class Hello {}
-    `));
+    `),
+    );
 
-    expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
       @Component({
         template: '<hello></hello>',
         standalone: true,
         imports: [ButtonModule, MatCardModule]
       })
       class App {}
-    `));
+    `),
+    );
 
-    expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
       it('should work', () => {
         TestBed.configureTestingModule({
           imports: [ButtonModule, MatCardModule, App, Hello]
@@ -1131,19 +1385,24 @@ describe('standalone migration', () => {
         const fixture = TestBed.createComponent(App);
         expect(fixture.nativeElement.innerHTML).toBe('<hello>Hello</hello>');
       });
-    `));
+    `),
+    );
 
-    expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
       it('should work in a different way', () => {
         TestBed.configureTestingModule({imports: [MatCardModule, App, Hello]});
         const fixture = TestBed.createComponent(App);
         expect(fixture.nativeElement.innerHTML).toBe('<hello>Hello</hello>');
       });
-    `));
+    `),
+    );
   });
 
   it('should not add ModuleWithProviders imports to the `imports` in a test', async () => {
-    writeFile('app.spec.ts', `
+    writeFile(
+      'app.spec.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {TestBed} from '@angular/core/testing';
       import {MatCardModule} from '@angular/material/card';
@@ -1161,18 +1420,22 @@ describe('standalone migration', () => {
 
       @Component({template: 'hello'})
       class App {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
     const content = stripWhitespace(tree.readContent('app.spec.ts'));
 
-    expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
       @Component({template: 'hello', standalone: true})
       class App {}
-    `));
+    `),
+    );
 
-    expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
       it('should work', () => {
         TestBed.configureTestingModule({
           imports: [MatCardModule.forRoot({}), App]
@@ -1180,7 +1443,8 @@ describe('standalone migration', () => {
         const fixture = TestBed.createComponent(App);
         expect(fixture.nativeElement.innerHTML).toBe('hello');
       });
-    `));
+    `),
+    );
   });
 
   it('should not change testing objects with no declarations', async () => {
@@ -1212,7 +1476,9 @@ describe('standalone migration', () => {
   });
 
   it('should migrate tests with a component declared through Catalyst', async () => {
-    writeFile('app.spec.ts', `
+    writeFile(
+      'app.spec.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {bootstrap, setupModule} from 'some_internal_path/angular/testing/catalyst';
       import {ButtonModule} from './button.module';
@@ -1240,13 +1506,15 @@ describe('standalone migration', () => {
 
       @Component({template: '<hello></hello>'})
       class App {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
     const content = stripWhitespace(tree.readContent('app.spec.ts'));
 
-    expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
       @Component({
         selector: 'hello',
         template: 'Hello',
@@ -1254,18 +1522,22 @@ describe('standalone migration', () => {
         imports: [ButtonModule, MatCardModule]
       })
       class Hello {}
-    `));
+    `),
+    );
 
-    expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
       @Component({
         template: '<hello></hello>',
         standalone: true,
         imports: [ButtonModule, MatCardModule]
       })
       class App {}
-    `));
+    `),
+    );
 
-    expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
       it('should work', () => {
         setupModule({
           imports: [ButtonModule, MatCardModule, App, Hello]
@@ -1273,20 +1545,24 @@ describe('standalone migration', () => {
         const fixture = bootstrap(App);
         expect(fixture.nativeElement.innerHTML).toBe('<hello>Hello</hello>');
       });
-    `));
+    `),
+    );
 
-    expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
       it('should work in a different way', () => {
         setupModule({imports: [MatCardModule, App, Hello]});
         const fixture = bootstrap(App);
         expect(fixture.nativeElement.innerHTML).toBe('<hello>Hello</hello>');
       });
-    `));
+    `),
+    );
   });
 
-  it('should not copy over the NoopAnimationsModule into the imports of a test component',
-     async () => {
-       writeFile('app.spec.ts', `
+  it('should not copy over the NoopAnimationsModule into the imports of a test component', async () => {
+    writeFile(
+      'app.spec.ts',
+      `
           import {NgModule, Component} from '@angular/core';
           import {TestBed} from '@angular/core/testing';
           import {MatCardModule} from '@angular/material/card';
@@ -1305,26 +1581,32 @@ describe('standalone migration', () => {
 
           @Component({template: 'hello'})
           class App {}
-        `);
+        `,
+    );
 
-       await runMigration('convert-to-standalone');
+    await runMigration('convert-to-standalone');
 
-       const content = stripWhitespace(tree.readContent('app.spec.ts'));
+    const content = stripWhitespace(tree.readContent('app.spec.ts'));
 
-       expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
           TestBed.configureTestingModule({
             imports: [MatCardModule, NoopAnimationsModule, App]
           });
-        `));
-       expect(content).toContain(stripWhitespace(`
+        `),
+    );
+    expect(content).toContain(
+      stripWhitespace(`
           @Component({template: 'hello', standalone: true, imports: [MatCardModule]})
           class App {}
-        `));
-     });
+        `),
+    );
+  });
 
-  it('should not copy over the BrowserAnimationsModule into the imports of a test component',
-     async () => {
-       writeFile('app.spec.ts', `
+  it('should not copy over the BrowserAnimationsModule into the imports of a test component', async () => {
+    writeFile(
+      'app.spec.ts',
+      `
           import {NgModule, Component} from '@angular/core';
           import {TestBed} from '@angular/core/testing';
           import {MatCardModule} from '@angular/material/card';
@@ -1343,33 +1625,37 @@ describe('standalone migration', () => {
 
           @Component({template: 'hello'})
           class App {}
-        `);
+        `,
+    );
 
-       await runMigration('convert-to-standalone');
+    await runMigration('convert-to-standalone');
 
-       const content = stripWhitespace(tree.readContent('app.spec.ts'));
+    const content = stripWhitespace(tree.readContent('app.spec.ts'));
 
-       expect(content).toContain(stripWhitespace(`
+    expect(content).toContain(
+      stripWhitespace(`
           TestBed.configureTestingModule({
             imports: [MatCardModule, BrowserAnimationsModule, App]
           });
-        `));
-       expect(content).toContain(stripWhitespace(`
+        `),
+    );
+    expect(content).toContain(
+      stripWhitespace(`
           @Component({template: 'hello', standalone: true, imports: [MatCardModule]})
           class App {}
-        `));
-     });
+        `),
+    );
+  });
 
-  it('should not move declarations that are not being migrated out of the declarations array',
-     async () => {
-       const appComponentContent = `
+  it('should not move declarations that are not being migrated out of the declarations array', async () => {
+    const appComponentContent = `
         import {Component} from '@angular/core';
 
         @Component({selector: 'app', template: ''})
         export class AppComponent {}
       `;
 
-       const appModuleContent = `
+    const appModuleContent = `
         import {NgModule} from '@angular/core';
         import {AppComponent} from './app.component';
 
@@ -1377,10 +1663,12 @@ describe('standalone migration', () => {
         export class AppModule {}
       `;
 
-       writeFile('app.component.ts', appComponentContent);
-       writeFile('app.module.ts', appModuleContent);
+    writeFile('app.component.ts', appComponentContent);
+    writeFile('app.module.ts', appModuleContent);
 
-       writeFile('app.spec.ts', `
+    writeFile(
+      'app.spec.ts',
+      `
         import {Component} from '@angular/core';
         import {TestBed} from '@angular/core/testing';
         import {ButtonModule} from './button.module';
@@ -1400,15 +1688,17 @@ describe('standalone migration', () => {
 
         @Component({template: ''})
         class TestComp {}
-      `);
+      `,
+    );
 
-       await runMigration('convert-to-standalone');
+    await runMigration('convert-to-standalone');
 
-       const testContent = stripWhitespace(tree.readContent('app.spec.ts'));
+    const testContent = stripWhitespace(tree.readContent('app.spec.ts'));
 
-       expect(tree.readContent('app.module.ts')).toBe(appModuleContent);
-       expect(tree.readContent('app.component.ts')).toBe(appComponentContent);
-       expect(testContent).toContain(stripWhitespace(`
+    expect(tree.readContent('app.module.ts')).toBe(appModuleContent);
+    expect(tree.readContent('app.component.ts')).toBe(appComponentContent);
+    expect(testContent).toContain(
+      stripWhitespace(`
         it('should work', () => {
           TestBed.configureTestingModule({
             declarations: [AppComponent],
@@ -1417,20 +1707,22 @@ describe('standalone migration', () => {
           const fixture = TestBed.createComponent(App);
           expect(fixture.nativeElement.innerHTML).toBe('');
         });
-      `));
-       expect(testContent).toContain(stripWhitespace(`
+      `),
+    );
+    expect(testContent).toContain(
+      stripWhitespace(`
         @Component({
           template: '',
           standalone: true,
           imports: [ButtonModule, MatCardModule]
         })
         class TestComp {}
-      `));
-     });
+      `),
+    );
+  });
 
-  it('should not migrate `configureTestingModule` with a non-array expression in the `declarations` field',
-     async () => {
-       const initialContent = `
+  it('should not migrate `configureTestingModule` with a non-array expression in the `declarations` field', async () => {
+    const initialContent = `
           import {NgModule, Component} from '@angular/core';
           import {TestBed} from '@angular/core/testing';
           import {ButtonModule} from './button.module';
@@ -1463,12 +1755,12 @@ describe('standalone migration', () => {
           class App {}
         `;
 
-       writeFile('app.spec.ts', initialContent);
+    writeFile('app.spec.ts', initialContent);
 
-       await runMigration('convert-to-standalone');
+    await runMigration('convert-to-standalone');
 
-       expect(tree.readContent('app.spec.ts')).toBe(initialContent);
-     });
+    expect(tree.readContent('app.spec.ts')).toBe(initialContent);
+  });
 
   it('should not migrate modules with a `bootstrap` array', async () => {
     const initialModule = `
@@ -1489,7 +1781,9 @@ describe('standalone migration', () => {
   });
 
   it('should migrate a module with an empty `bootstrap` array', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
 
       @Component({selector: 'root-comp', template: 'hello'})
@@ -1497,11 +1791,13 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [RootComp], bootstrap: []})
       export class Mod {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('module.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('module.ts'))).toBe(
+      stripWhitespace(`
       import {NgModule, Component} from '@angular/core';
 
       @Component({selector: 'root-comp', template: 'hello', standalone: true})
@@ -1509,18 +1805,24 @@ describe('standalone migration', () => {
 
       @NgModule({imports: [RootComp], bootstrap: []})
       export class Mod {}
-    `));
+    `),
+    );
   });
 
   it('should migrate declarations that are not being bootstrapped in a root module', async () => {
-    writeFile('dir.ts', `
+    writeFile(
+      'dir.ts',
+      `
       import {Directive} from '@angular/core';
 
       @Directive({selector: '[foo]'})
       export class MyDir {}
-    `);
+    `,
+    );
 
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {MyDir} from './dir';
 
@@ -1529,18 +1831,22 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [RootComp, MyDir], bootstrap: [RootComp]})
       export class Mod {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('dir.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('dir.ts'))).toBe(
+      stripWhitespace(`
       import {Directive} from '@angular/core';
 
       @Directive({selector: '[foo]', standalone: true})
       export class MyDir {}
-    `));
+    `),
+    );
 
-    expect(stripWhitespace(tree.readContent('module.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('module.ts'))).toBe(
+      stripWhitespace(`
       import {NgModule, Component} from '@angular/core';
       import {MyDir} from './dir';
 
@@ -1549,11 +1855,14 @@ describe('standalone migration', () => {
 
       @NgModule({imports: [MyDir], declarations: [RootComp], bootstrap: [RootComp]})
       export class Mod {}
-    `));
+    `),
+    );
   });
 
   it('should generate a forwardRef for forward reference within the same file', async () => {
-    writeFile('decls.ts', `
+    writeFile(
+      'decls.ts',
+      `
       import {Component, Directive} from '@angular/core';
 
       @Component({
@@ -1564,19 +1873,24 @@ describe('standalone migration', () => {
 
       @Directive({selector: '[my-dir]'})
       export class MyDir {}
-    `);
+    `,
+    );
 
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp, MyDir} from './decls';
 
       @NgModule({declarations: [MyComp, MyDir]})
       export class Mod {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('decls.ts'))).toEqual(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('decls.ts'))).toEqual(
+      stripWhitespace(`
       import {Component, Directive, forwardRef} from '@angular/core';
 
       @Component({
@@ -1589,11 +1903,14 @@ describe('standalone migration', () => {
 
       @Directive({selector: '[my-dir]', standalone: true})
       export class MyDir {}
-    `));
+    `),
+    );
   });
 
   it('should not generate a forwardRef for a self import', async () => {
-    writeFile('decls.ts', `
+    writeFile(
+      'decls.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({
@@ -1601,19 +1918,24 @@ describe('standalone migration', () => {
         template: '<comp/>'
       })
       export class MyComp {}
-    `);
+    `,
+    );
 
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './decls';
 
       @NgModule({declarations: [MyComp]})
       export class Mod {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('decls.ts'))).toEqual(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('decls.ts'))).toEqual(
+      stripWhitespace(`
       import {Component} from '@angular/core';
 
       @Component({
@@ -1622,11 +1944,14 @@ describe('standalone migration', () => {
         standalone: true
       })
       export class MyComp {}
-    `));
+    `),
+    );
   });
 
   it('should not generate a forwardRef when adding an imported module dependency', async () => {
-    writeFile('./comp.ts', `
+    writeFile(
+      './comp.ts',
+      `
       import {Component, NgModule} from '@angular/core';
       import {RouterModule} from '@angular/router';
 
@@ -1638,11 +1963,13 @@ describe('standalone migration', () => {
 
       @NgModule({imports: [RouterModule], declarations: [MyComp]})
       export class Mod {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('comp.ts'))).toEqual(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('comp.ts'))).toEqual(
+      stripWhitespace(`
       import {Component, NgModule} from '@angular/core';
       import {RouterModule} from '@angular/router';
 
@@ -1656,11 +1983,14 @@ describe('standalone migration', () => {
 
       @NgModule({imports: [RouterModule, MyComp]})
       export class Mod {}
-    `));
+    `),
+    );
   });
 
   it('should not duplicate doc strings', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule, Directive} from '@angular/core';
 
       /** Directive used for testing. */
@@ -1670,11 +2000,13 @@ describe('standalone migration', () => {
       /** Module used for testing. */
       @NgModule({declarations: [MyDir]})
       export class Mod {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('module.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('module.ts'))).toBe(
+      stripWhitespace(`
       import {NgModule, Directive} from '@angular/core';
 
       /** Directive used for testing. */
@@ -1684,20 +2016,26 @@ describe('standalone migration', () => {
       /** Module used for testing. */
       @NgModule({imports: [MyDir]})
       export class Mod {}
-    `));
+    `),
+    );
   });
 
   it('should use the generated alias if a conflicting symbol already exists', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
       import {MyButton} from './button';
 
       @NgModule({declarations: [MyComp, MyButton], exports: [MyComp]})
       export class Mod {}
-    `);
+    `,
+    );
 
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
       import {MyButton} from '@external/button';
 
@@ -1705,18 +2043,23 @@ describe('standalone migration', () => {
 
       @Component({selector: 'my-comp', template: '<my-button>Hello</my-button>'})
       export class MyComp {}
-    `);
+    `,
+    );
 
-    writeFile('button.ts', `
+    writeFile(
+      'button.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-button', template: '<ng-content></ng-content>'})
       export class MyButton {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('comp.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('comp.ts'))).toBe(
+      stripWhitespace(`
       import {Component} from '@angular/core';
       import {MyButton} from '@external/button';
       import {MyButton as MyButton_1} from './button';
@@ -1729,11 +2072,14 @@ describe('standalone migration', () => {
         imports: [MyButton_1]
       })
       export class MyComp {}
-    `));
+    `),
+    );
   });
 
   it('should preserve the trailing comma when adding an `imports` array', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule, Directive} from '@angular/core';
 
       @Directive({selector: '[dir]'})
@@ -1744,20 +2090,25 @@ describe('standalone migration', () => {
         exports: [MyDir],
       })
       export class Mod {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`
       @NgModule({
         imports: [MyDir],
         exports: [MyDir],
       })
-    `));
+    `),
+    );
   });
 
   it('should preserve the trailing comma when adding to an existing `imports` array', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule, Directive} from '@angular/core';
       import {CommonModule} from '@angular/common';
       import {RouterModule} from '@angular/router';
@@ -1774,11 +2125,13 @@ describe('standalone migration', () => {
         exports: [MyDir],
       })
       export class Mod {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`
       @NgModule({
         imports: [
           CommonModule,
@@ -1787,11 +2140,14 @@ describe('standalone migration', () => {
         ],
         exports: [MyDir],
       })
-    `));
+    `),
+    );
   });
 
   it('should preserve the trailing comma when marking a directive as standalone', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule, Directive} from '@angular/core';
 
       @Directive({
@@ -1802,21 +2158,26 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [MyDir]})
       export class Mod {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`
       @Directive({
         selector: '[dir]',
         exportAs: 'dir',
         standalone: true,
       })
-    `));
+    `),
+    );
   });
 
   it('should add a trailing comma when generating an imports array in a component', async () => {
-    writeFile('module.ts', `
+    writeFile(
+      'module.ts',
+      `
       import {NgModule, Directive, Component} from '@angular/core';
 
       @Directive({selector: '[dir-one]'})
@@ -1836,11 +2197,13 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [DirOne, DirTwo, DirThree, MyComp]})
       export class Mod {}
-    `);
+    `,
+    );
 
     await runMigration('convert-to-standalone');
 
-    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('module.ts'))).toContain(
+      stripWhitespace(`
       @Component({
         selector: 'my-comp',
         template: '<div dir-one dir-two dir-three></div>',
@@ -1851,40 +2214,53 @@ describe('standalone migration', () => {
           DirThree,
         ],
       })
-    `));
+    `),
+    );
   });
 
   it('should remove a module that only has imports and exports', async () => {
-    writeFile('app.module.ts', `
+    writeFile(
+      'app.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
       import {ButtonModule} from './button.module';
 
       @NgModule({imports: [ButtonModule], declarations: [MyComp], exports: [ButtonModule, MyComp]})
       export class AppModule {}
-    `);
+    `,
+    );
 
-    writeFile('button.module.ts', `
+    writeFile(
+      'button.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyButton} from './button';
 
       @NgModule({imports: [MyButton], exports: [MyButton]})
       export class ButtonModule {}
-    `);
+    `,
+    );
 
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-comp', template: '<my-button>Hello</my-button>'})
       export class MyComp {}
-    `);
+    `,
+    );
 
-    writeFile('button.ts', `
+    writeFile(
+      'button.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-button', template: '<ng-content></ng-content>', standalone: true})
       export class MyButton {}
-    `);
+    `,
+    );
 
     await runMigration('prune-ng-modules');
 
@@ -1892,10 +2268,12 @@ describe('standalone migration', () => {
 
     expect(tree.exists('button.module.ts')).toBe(false);
     expect(appModule).not.toContain('ButtonModule');
-    expect(stripWhitespace(appModule)).toContain(stripWhitespace(`
+    expect(stripWhitespace(appModule)).toContain(
+      stripWhitespace(`
       @NgModule({imports: [], declarations: [MyComp], exports: [MyComp]})
       export class AppModule {}
-    `));
+    `),
+    );
   });
 
   it('should not remove a module that has declarations', async () => {
@@ -1909,12 +2287,15 @@ describe('standalone migration', () => {
     `;
 
     writeFile('app.module.ts', initialAppModule);
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-comp', template: 'Hello'})
       export class MyComp {}
-    `);
+    `,
+    );
 
     await runMigration('prune-ng-modules');
 
@@ -1932,12 +2313,15 @@ describe('standalone migration', () => {
     `;
 
     writeFile('app.module.ts', initialAppModule);
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-comp', template: 'Hello'})
       export class MyComp {}
-    `);
+    `,
+    );
 
     await runMigration('prune-ng-modules');
 
@@ -1997,7 +2381,9 @@ describe('standalone migration', () => {
   });
 
   it('should remove a module that only has an empty constructor', async () => {
-    writeFile('app.module.ts', `
+    writeFile(
+      'app.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {ButtonModule} from './button.module';
 
@@ -2006,26 +2392,32 @@ describe('standalone migration', () => {
         constructor() {
         }
       }
-    `);
+    `,
+    );
     await runMigration('prune-ng-modules');
 
     expect(tree.exists('app.module.ts')).toBe(false);
   });
 
   it('should remove a module with no arguments passed into NgModule', async () => {
-    writeFile('app.module.ts', `
+    writeFile(
+      'app.module.ts',
+      `
       import {NgModule} from '@angular/core';
 
       @NgModule()
       export class AppModule {}
-    `);
+    `,
+    );
     await runMigration('prune-ng-modules');
 
     expect(tree.exists('app.module.ts')).toBe(false);
   });
 
   it('should remove a module file where there is unexported code', async () => {
-    writeFile('app.module.ts', `
+    writeFile(
+      'app.module.ts',
+      `
       import {NgModule} from '@angular/core';
 
       const ONE = 1;
@@ -2035,65 +2427,83 @@ describe('standalone migration', () => {
 
       @NgModule()
       export class AppModule {}
-    `);
+    `,
+    );
     await runMigration('prune-ng-modules');
 
     expect(tree.exists('app.module.ts')).toBe(false);
   });
 
-  it('should remove a module that passes empty arrays into `declarations`, `providers` and `bootstrap`',
-     async () => {
-       writeFile('app.module.ts', `
+  it('should remove a module that passes empty arrays into `declarations`, `providers` and `bootstrap`', async () => {
+    writeFile(
+      'app.module.ts',
+      `
           import {NgModule} from '@angular/core';
           import {ButtonModule} from './button.module';
 
           @NgModule({declarations: [], providers: [], bootstrap: []})
           export class AppModule {}
-        `);
-       await runMigration('prune-ng-modules');
+        `,
+    );
+    await runMigration('prune-ng-modules');
 
-       expect(tree.exists('app.module.ts')).toBe(false);
-     });
+    expect(tree.exists('app.module.ts')).toBe(false);
+  });
 
   it('should remove a chain of modules that all depend on each other', async () => {
-    writeFile('a.module.ts', `
+    writeFile(
+      'a.module.ts',
+      `
       import {NgModule} from '@angular/core';
 
       @NgModule({})
       export class ModuleA {}
-    `);
+    `,
+    );
 
-    writeFile('b.module.ts', `
+    writeFile(
+      'b.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {ModuleA} from './a.module';
 
       @NgModule({imports: [ModuleA]})
       export class ModuleB {}
-    `);
+    `,
+    );
 
-    writeFile('c.module.ts', `
+    writeFile(
+      'c.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {ModuleB} from './b.module';
 
       @NgModule({imports: [ModuleB]})
       export class ModuleC {}
-    `);
+    `,
+    );
 
-    writeFile('app.module.ts', `
+    writeFile(
+      'app.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyDir} from './dir';
       import {ModuleC} from './c.module';
 
       @NgModule({imports: [ModuleC], declarations: [MyDir]})
       export class AppModule {}
-    `);
+    `,
+    );
 
-    writeFile('dir.ts', `
+    writeFile(
+      'dir.ts',
+      `
       import {Directive} from '@angular/core';
 
       @Directive({selector: '[myDir]'})
       export class MyDir {}
-    `);
+    `,
+    );
 
     await runMigration('prune-ng-modules');
 
@@ -2103,15 +2513,16 @@ describe('standalone migration', () => {
     expect(tree.exists('b.module.ts')).toBe(false);
     expect(tree.exists('c.module.ts')).toBe(false);
     expect(appModule).not.toContain('ModuleC');
-    expect(stripWhitespace(appModule)).toContain(stripWhitespace(`
+    expect(stripWhitespace(appModule)).toContain(
+      stripWhitespace(`
       @NgModule({imports: [], declarations: [MyDir]})
       export class AppModule {}
-    `));
+    `),
+    );
   });
 
-  it('should not remove a chain of modules if a module in the chain cannot be removed because it has providers',
-     async () => {
-       const moduleAContent = `
+  it('should not remove a chain of modules if a module in the chain cannot be removed because it has providers', async () => {
+    const moduleAContent = `
           import {NgModule, InjectionToken} from '@angular/core';
 
           export const token = new InjectionToken<any>('token');
@@ -2120,7 +2531,7 @@ describe('standalone migration', () => {
           export class ModuleA {}
         `;
 
-       const moduleBContent = `
+    const moduleBContent = `
           import {NgModule} from '@angular/core';
           import {ModuleA} from './a.module';
 
@@ -2128,7 +2539,7 @@ describe('standalone migration', () => {
           export class ModuleB {}
         `;
 
-       const moduleCContent = `
+    const moduleCContent = `
           import {NgModule} from '@angular/core';
           import {ModuleB} from './b.module';
 
@@ -2136,7 +2547,7 @@ describe('standalone migration', () => {
           export class ModuleC {}
         `;
 
-       const appModuleContent = `
+    const appModuleContent = `
           import {NgModule} from '@angular/core';
           import {MyDir} from './dir';
           import {ModuleC} from './c.module';
@@ -2145,35 +2556,37 @@ describe('standalone migration', () => {
           export class AppModule {}
         `;
 
-       writeFile('a.module.ts', moduleAContent);
-       writeFile('b.module.ts', moduleBContent);
-       writeFile('c.module.ts', moduleCContent);
-       writeFile('app.module.ts', appModuleContent);
-       writeFile('dir.ts', `
+    writeFile('a.module.ts', moduleAContent);
+    writeFile('b.module.ts', moduleBContent);
+    writeFile('c.module.ts', moduleCContent);
+    writeFile('app.module.ts', appModuleContent);
+    writeFile(
+      'dir.ts',
+      `
           import {Directive} from '@angular/core';
 
           @Directive({selector: '[myDir]'})
           export class MyDir {}
-        `);
+        `,
+    );
 
-       await runMigration('prune-ng-modules');
+    await runMigration('prune-ng-modules');
 
-       expect(tree.readContent('a.module.ts')).toBe(moduleAContent);
-       expect(tree.readContent('b.module.ts')).toBe(moduleBContent);
-       expect(tree.readContent('c.module.ts')).toBe(moduleCContent);
-       expect(tree.readContent('app.module.ts')).toBe(appModuleContent);
-     });
+    expect(tree.readContent('a.module.ts')).toBe(moduleAContent);
+    expect(tree.readContent('b.module.ts')).toBe(moduleBContent);
+    expect(tree.readContent('c.module.ts')).toBe(moduleCContent);
+    expect(tree.readContent('app.module.ts')).toBe(appModuleContent);
+  });
 
-  it('should not remove a chain of modules if a module in the chain cannot be removed because it is importing a ModuleWithProviders',
-     async () => {
-       const moduleAContent = `
+  it('should not remove a chain of modules if a module in the chain cannot be removed because it is importing a ModuleWithProviders', async () => {
+    const moduleAContent = `
           import {NgModule} from '@angular/core';
 
           @NgModule({imports: [RouterModule.forRoot([{path: '/foo'}])]})
           export class ModuleA {}
         `;
 
-       const moduleBContent = `
+    const moduleBContent = `
           import {NgModule} from '@angular/core';
           import {ModuleA} from './a.module';
 
@@ -2181,7 +2594,7 @@ describe('standalone migration', () => {
           export class ModuleB {}
         `;
 
-       const moduleCContent = `
+    const moduleCContent = `
           import {NgModule} from '@angular/core';
           import {ModuleB} from './b.module';
 
@@ -2189,7 +2602,7 @@ describe('standalone migration', () => {
           export class ModuleC {}
         `;
 
-       const appModuleContent = `
+    const appModuleContent = `
           import {NgModule} from '@angular/core';
           import {MyDir} from './dir';
           import {ModuleC} from './c.module';
@@ -2198,27 +2611,32 @@ describe('standalone migration', () => {
           export class AppModule {}
         `;
 
-       writeFile('a.module.ts', moduleAContent);
-       writeFile('b.module.ts', moduleBContent);
-       writeFile('c.module.ts', moduleCContent);
-       writeFile('app.module.ts', appModuleContent);
-       writeFile('dir.ts', `
+    writeFile('a.module.ts', moduleAContent);
+    writeFile('b.module.ts', moduleBContent);
+    writeFile('c.module.ts', moduleCContent);
+    writeFile('app.module.ts', appModuleContent);
+    writeFile(
+      'dir.ts',
+      `
           import {Directive} from '@angular/core';
 
           @Directive({selector: '[myDir]'})
           export class MyDir {}
-        `);
+        `,
+    );
 
-       await runMigration('prune-ng-modules');
+    await runMigration('prune-ng-modules');
 
-       expect(tree.readContent('a.module.ts')).toBe(moduleAContent);
-       expect(tree.readContent('b.module.ts')).toBe(moduleBContent);
-       expect(tree.readContent('c.module.ts')).toBe(moduleCContent);
-       expect(tree.readContent('app.module.ts')).toBe(appModuleContent);
-     });
+    expect(tree.readContent('a.module.ts')).toBe(moduleAContent);
+    expect(tree.readContent('b.module.ts')).toBe(moduleBContent);
+    expect(tree.readContent('c.module.ts')).toBe(moduleCContent);
+    expect(tree.readContent('app.module.ts')).toBe(appModuleContent);
+  });
 
   it('should not remove the module file if it contains other exported code', async () => {
-    writeFile('app.module.ts', `
+    writeFile(
+      'app.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
       import {sum, ButtonModule, multiply} from './button.module';
@@ -2227,9 +2645,12 @@ describe('standalone migration', () => {
       export class AppModule {}
 
       console.log(sum(1, 2), multiply(3, 4));
-    `);
+    `,
+    );
 
-    writeFile('button.module.ts', `
+    writeFile(
+      'button.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyButton} from './button';
 
@@ -2243,25 +2664,33 @@ describe('standalone migration', () => {
       export function multiply(a: number, b: number) {
         return a * b;
       }
-    `);
+    `,
+    );
 
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-comp', template: '<my-button>Hello</my-button>'})
       export class MyComp {}
-    `);
+    `,
+    );
 
-    writeFile('button.ts', `
+    writeFile(
+      'button.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-button', template: '<ng-content></ng-content>', standalone: true})
       export class MyButton {}
-    `);
+    `,
+    );
 
     await runMigration('prune-ng-modules');
 
-    expect(stripWhitespace(tree.readContent('button.module.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('button.module.ts'))).toBe(
+      stripWhitespace(`
       import {NgModule} from '@angular/core';
       import {MyButton} from './button';
 
@@ -2272,8 +2701,10 @@ describe('standalone migration', () => {
       export function multiply(a: number, b: number) {
         return a * b;
       }
-    `));
-    expect(stripWhitespace(tree.readContent('app.module.ts'))).toBe(stripWhitespace(`
+    `),
+    );
+    expect(stripWhitespace(tree.readContent('app.module.ts'))).toBe(
+      stripWhitespace(`
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
       import {sum, multiply} from './button.module';
@@ -2282,11 +2713,14 @@ describe('standalone migration', () => {
       export class AppModule {}
 
       console.log(sum(1, 2), multiply(3, 4));
-    `));
+    `),
+    );
   });
 
   it('should delete a file that contains multiple modules that are being deleted', async () => {
-    writeFile('app.module.ts', `
+    writeFile(
+      'app.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
       import {ButtonModule, TooltipModule} from './shared-modules';
@@ -2297,16 +2731,22 @@ describe('standalone migration', () => {
         exports: [ButtonModule, MyComp, TooltipModule]
       })
       export class AppModule {}
-    `);
+    `,
+    );
 
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-comp', template: ''})
       export class MyComp {}
-    `);
+    `,
+    );
 
-    writeFile('shared-modules.ts', `
+    writeFile(
+      'shared-modules.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyButton} from './button';
       import {MyTooltip} from './tooltip';
@@ -2316,21 +2756,28 @@ describe('standalone migration', () => {
 
       @NgModule({imports: [MyTooltip], exports: [MyTooltip]})
       export class TooltipModule {}
-    `);
+    `,
+    );
 
-    writeFile('button.ts', `
+    writeFile(
+      'button.ts',
+      `
       import {Directive} from '@angular/core';
 
       @Directive({selector: '[my-button]' standalone: true})
       export class MyButton {}
-    `);
+    `,
+    );
 
-    writeFile('tooltip.ts', `
+    writeFile(
+      'tooltip.ts',
+      `
       import {Directive} from '@angular/core';
 
       @Directive({selector: '[my-tooltip]' standalone: true})
       export class MyTooltip {}
-    `);
+    `,
+    );
 
     await runMigration('prune-ng-modules');
 
@@ -2339,73 +2786,94 @@ describe('standalone migration', () => {
     expect(tree.exists('shared-modules.ts')).toBe(false);
     expect(appModule).not.toContain('ButtonModule');
     expect(appModule).not.toContain('TooltipModule');
-    expect(stripWhitespace(appModule)).toContain(stripWhitespace(`
+    expect(stripWhitespace(appModule)).toContain(
+      stripWhitespace(`
       @NgModule({
         imports: [],
         declarations: [MyComp],
         exports: [MyComp]
       })
       export class AppModule {}
-    `));
+    `),
+    );
   });
 
-  it('should preserve an import that has one NgModule that is being deleted, in addition to a named import',
-     async () => {
-       writeFile('app.module.ts', `
+  it('should preserve an import that has one NgModule that is being deleted, in addition to a named import', async () => {
+    writeFile(
+      'app.module.ts',
+      `
           import {NgModule} from '@angular/core';
           import {MyComp} from './comp';
           import Foo, {ButtonModule} from './button.module';
 
           @NgModule({imports: [ButtonModule], declarations: [MyComp], exports: [ButtonModule, MyComp]})
           export class AppModule {}
-        `);
+        `,
+    );
 
-       writeFile('button.module.ts', `
+    writeFile(
+      'button.module.ts',
+      `
           import {NgModule} from '@angular/core';
           import {MyButton} from './button';
 
           @NgModule({imports: [MyButton], exports: [MyButton]})
           export class ButtonModule {}
-        `);
+        `,
+    );
 
-       writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
           import {Component} from '@angular/core';
 
           @Component({selector: 'my-comp', template: '<my-button>Hello</my-button>'})
           export class MyComp {}
-        `);
+        `,
+    );
 
-       writeFile('button.ts', `
+    writeFile(
+      'button.ts',
+      `
           import {Component} from '@angular/core';
 
           @Component({selector: 'my-button', template: '<ng-content></ng-content>', standalone: true})
           export class MyButton {}
-        `);
+        `,
+    );
 
-       await runMigration('prune-ng-modules');
+    await runMigration('prune-ng-modules');
 
-       expect(tree.exists('button.module.ts')).toBe(false);
-       expect(tree.readContent('app.module.ts')).toContain(`import Foo from './button.module';`);
-     });
+    expect(tree.exists('button.module.ts')).toBe(false);
+    expect(tree.readContent('app.module.ts')).toContain(`import Foo from './button.module';`);
+  });
 
   it('should remove module references from export expressions', async () => {
-    writeFile('app.module.ts', `
+    writeFile(
+      'app.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
 
       @NgModule({imports: [MyComp]})
       export class AppModule {}
-    `);
+    `,
+    );
 
-    writeFile('button.module.ts', `
+    writeFile(
+      'button.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyButton} from './button';
 
       @NgModule({imports: [MyButton], exports: [MyButton]})
       export class ButtonModule {}
-    `);
+    `,
+    );
 
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
       import {MyButton} from './button';
 
@@ -2416,50 +2884,67 @@ describe('standalone migration', () => {
         imports: [MyButton]
       })
       export class MyComp {}
-    `);
+    `,
+    );
 
-    writeFile('button.ts', `
+    writeFile(
+      'button.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-button', template: '<ng-content></ng-content>', standalone: true})
       export class MyButton {}
-    `);
+    `,
+    );
 
-    writeFile('index.ts', `
+    writeFile(
+      'index.ts',
+      `
       export {AppModule} from './app.module';
       export {MyComp} from './comp';
       export {ButtonModule} from './button.module';
       export {MyButton} from './button';
-    `);
+    `,
+    );
 
     await runMigration('prune-ng-modules');
 
     expect(tree.exists('app.module.ts')).toBe(false);
     expect(tree.exists('button.module.ts')).toBe(false);
-    expect(stripWhitespace(tree.readContent('index.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('index.ts'))).toBe(
+      stripWhitespace(`
       export {MyComp} from './comp';
       export {MyButton} from './button';
-    `));
+    `),
+    );
   });
 
   it('should remove barrel export if the corresponding file is deleted', async () => {
-    writeFile('app.module.ts', `
+    writeFile(
+      'app.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
 
       @NgModule({imports: [MyComp]})
       export class AppModule {}
-    `);
+    `,
+    );
 
-    writeFile('button.module.ts', `
+    writeFile(
+      'button.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyButton} from './button';
 
       @NgModule({imports: [MyButton], exports: [MyButton]})
       export class ButtonModule {}
-    `);
+    `,
+    );
 
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
       import {MyButton} from './button';
 
@@ -2470,45 +2955,60 @@ describe('standalone migration', () => {
         imports: [MyButton]
       })
       export class MyComp {}
-    `);
+    `,
+    );
 
-    writeFile('button.ts', `
+    writeFile(
+      'button.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-button', template: '<ng-content></ng-content>', standalone: true})
       export class MyButton {}
-    `);
+    `,
+    );
 
-    writeFile('index.ts', `
+    writeFile(
+      'index.ts',
+      `
       export * from './app.module';
       export {MyComp} from './comp';
       export {ButtonModule} from './button.module';
-    `);
+    `,
+    );
 
     await runMigration('prune-ng-modules');
 
     expect(tree.exists('app.module.ts')).toBe(false);
     expect(tree.exists('button.module.ts')).toBe(false);
-    expect(stripWhitespace(tree.readContent('index.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('index.ts'))).toBe(
+      stripWhitespace(`
       export {MyComp} from './comp';
-    `));
+    `),
+    );
   });
 
   it('should remove barrel files referring to other barrel files that were deleted', async () => {
-    writeFile('app.module.ts', `
+    writeFile(
+      'app.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyDir} from './dir';
 
       @NgModule({imports: [MyDir]})
       export class AppModule {}
-    `);
+    `,
+    );
 
-    writeFile('dir.ts', `
+    writeFile(
+      'dir.ts',
+      `
       import {Directive} from '@angular/core';
 
       @Directive({selector: '[dir]', standalone: true})
       export class MyDir {}
-    `);
+    `,
+    );
 
     writeFile('index.ts', `export * from './app.module';`);
     writeFile('index-2.ts', `export * from './index';`);
@@ -2521,45 +3021,60 @@ describe('standalone migration', () => {
     expect(tree.exists('index-3.ts')).toBe(false);
   });
 
-  it('should not delete dependent barrel files if they have some barrel exports that will not be removed',
-     async () => {
-       writeFile('app.module.ts', `
+  it('should not delete dependent barrel files if they have some barrel exports that will not be removed', async () => {
+    writeFile(
+      'app.module.ts',
+      `
         import {NgModule} from '@angular/core';
         import {MyDir} from './dir';
 
         @NgModule({imports: [MyDir]})
         export class AppModule {}
-      `);
+      `,
+    );
 
-       writeFile('dir.ts', `
+    writeFile(
+      'dir.ts',
+      `
         import {Directive} from '@angular/core';
 
         @Directive({selector: '[dir]', standalone: true})
         export class MyDir {}
-      `);
+      `,
+    );
 
-       writeFile('utils.ts', `
+    writeFile(
+      'utils.ts',
+      `
         export function sum(a: number, b: number) { return a + b; }
-      `);
+      `,
+    );
 
-       writeFile('index.ts', `export * from './app.module';`);
-       writeFile('index-2.ts', `
+    writeFile('index.ts', `export * from './app.module';`);
+    writeFile(
+      'index-2.ts',
+      `
         export * from './index';
         export * from './utils';
-      `);
-       writeFile('index-3.ts', `export * from './index-2';`);
+      `,
+    );
+    writeFile('index-3.ts', `export * from './index-2';`);
 
-       await runMigration('prune-ng-modules');
+    await runMigration('prune-ng-modules');
 
-       expect(tree.exists('index.ts')).toBe(false);
-       expect(stripWhitespace(tree.readContent('index-2.ts')))
-           .toBe(stripWhitespace(`export * from './utils';`));
-       expect(stripWhitespace(tree.readContent('index-3.ts')))
-           .toBe(stripWhitespace(`export * from './index-2';`));
-     });
+    expect(tree.exists('index.ts')).toBe(false);
+    expect(stripWhitespace(tree.readContent('index-2.ts'))).toBe(
+      stripWhitespace(`export * from './utils';`),
+    );
+    expect(stripWhitespace(tree.readContent('index-3.ts'))).toBe(
+      stripWhitespace(`export * from './index-2';`),
+    );
+  });
 
   it('should add a comment to locations that cannot be removed automatically', async () => {
-    writeFile('app.module.ts', `
+    writeFile(
+      'app.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
       import {ButtonModule} from './button.module';
@@ -2574,26 +3089,34 @@ describe('standalone migration', () => {
 
       @NgModule({imports: [ButtonModule], declarations: [MyComp], exports: [ButtonModule, MyComp]})
       export class AppModule {}
-    `);
+    `,
+    );
 
-    writeFile('button.module.ts', `
+    writeFile(
+      'button.module.ts',
+      `
       import {NgModule} from '@angular/core';
 
       @NgModule()
       export class ButtonModule {}
-    `);
+    `,
+    );
 
-    writeFile('comp.ts', `
+    writeFile(
+      'comp.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({selector: 'my-comp', template: 'Hello'})
       export class MyComp {}
-    `);
+    `,
+    );
 
     await runMigration('prune-ng-modules');
 
     expect(tree.exists('button.module.ts')).toBe(false);
-    expect(stripWhitespace(tree.readContent('app.module.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('app.module.ts'))).toBe(
+      stripWhitespace(`
       import {NgModule} from '@angular/core';
       import {MyComp} from './comp';
 
@@ -2607,7 +3130,8 @@ describe('standalone migration', () => {
 
       @NgModule({imports: [], declarations: [MyComp], exports: [MyComp]})
       export class AppModule {}
-    `));
+    `),
+    );
   });
 
   it('should preserve the trailing comma when deleting a module', async () => {
@@ -2636,7 +3160,8 @@ describe('standalone migration', () => {
 
     await runMigration('prune-ng-modules');
 
-    expect(stripWhitespace(tree.readContent('app.module.ts'))).toContain(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('app.module.ts'))).toContain(
+      stripWhitespace(`
       @NgModule({
         imports: [
           CommonModule,
@@ -2644,18 +3169,24 @@ describe('standalone migration', () => {
         ],
         providers: [{provide: token, useValue: 123}],
       })
-    `));
+    `),
+    );
   });
 
   it('should switch a platformBrowser().bootstrapModule call to bootstrapApplication', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
 
       @Component({template: 'hello'})
@@ -2663,35 +3194,44 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [AppComponent], bootstrap: [AppComponent]})
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {AppComponent} from './app/app.module';
       import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
 
       bootstrapApplication(AppComponent).catch(e => console.error(e));
-    `));
+    `),
+    );
 
-    expect(stripWhitespace(tree.readContent('./app/app.module.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('./app/app.module.ts'))).toBe(
+      stripWhitespace(`
       import {NgModule, Component} from '@angular/core';
 
       @Component({template: 'hello', standalone: true})
       export class AppComponent {}
-    `));
+    `),
+    );
   });
 
-  it('should switch a platformBrowserDynamic().bootstrapModule call to bootstrapApplication',
-     async () => {
-       writeFile('main.ts', `
+  it('should switch a platformBrowserDynamic().bootstrapModule call to bootstrapApplication', async () => {
+    writeFile(
+      'main.ts',
+      `
           import {AppModule} from './app/app.module';
           import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
           platformBrowserDynamic().bootstrapModule(AppModule).catch(e => console.error(e));
-        `);
+        `,
+    );
 
-       writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
           import {NgModule, Component} from '@angular/core';
 
           @Component({template: 'hello'})
@@ -2699,37 +3239,47 @@ describe('standalone migration', () => {
 
           @NgModule({declarations: [AppComponent], bootstrap: [AppComponent]})
           export class AppModule {}
-        `);
+        `,
+    );
 
-       await runMigration('standalone-bootstrap');
+    await runMigration('standalone-bootstrap');
 
-       expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
           import {AppComponent} from './app/app.module';
           import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
           import {bootstrapApplication} from '@angular/platform-browser';
 
           bootstrapApplication(AppComponent).catch(e => console.error(e));
-        `));
+        `),
+    );
 
-       expect(stripWhitespace(tree.readContent('./app/app.module.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('./app/app.module.ts'))).toBe(
+      stripWhitespace(`
           import {NgModule, Component} from '@angular/core';
 
           @Component({template: 'hello', standalone: true})
           export class AppComponent {}
-        `));
-     });
+        `),
+    );
+  });
 
   it('should switch a PlatformRef.bootstrapModule call to bootstrapApplication', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {PlatformRef} from '@angular/core';
 
       const foo: PlatformRef = null!;
 
       foo.bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
 
       @Component({template: 'hello'})
@@ -2737,11 +3287,13 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [AppComponent], bootstrap: [AppComponent]})
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {AppComponent} from './app/app.module';
       import {PlatformRef} from '@angular/core';
       import {bootstrapApplication} from '@angular/platform-browser';
@@ -2749,41 +3301,55 @@ describe('standalone migration', () => {
       const foo: PlatformRef = null!;
 
       bootstrapApplication(AppComponent).catch(e => console.error(e));
-    `));
+    `),
+    );
 
-    expect(stripWhitespace(tree.readContent('./app/app.module.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('./app/app.module.ts'))).toBe(
+      stripWhitespace(`
       import {NgModule, Component} from '@angular/core';
 
       @Component({template: 'hello', standalone: true})
       export class AppComponent {}
-    `));
+    `),
+    );
   });
 
   it('should convert the root module declarations to standalone', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.component.ts', `
+    writeFile(
+      './app/app.component.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({template: '<div *ngIf="show" dir>hello</div>'})
       export class AppComponent {
         show = true;
       }
-    `);
+    `,
+    );
 
-    writeFile('./app/dir.ts', `
+    writeFile(
+      './app/dir.ts',
+      `
       import {Directive} from '@angular/core';
 
       @Directive({selector: '[dir]'})
       export class Dir {}
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {CommonModule} from '@angular/common';
       import {AppComponent} from './app.component';
@@ -2795,12 +3361,14 @@ describe('standalone migration', () => {
         bootstrap: [AppComponent]
       })
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
     expect(tree.exists('./app/app.module.ts')).toBe(false);
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
       import {importProvidersFrom} from '@angular/core';
       import {AppComponent} from './app/app.component';
@@ -2809,9 +3377,11 @@ describe('standalone migration', () => {
       bootstrapApplication(AppComponent, {
         providers: [importProvidersFrom(CommonModule)]
       }).catch(e => console.error(e));
-    `));
+    `),
+    );
 
-    expect(stripWhitespace(tree.readContent('./app/app.component.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('./app/app.component.ts'))).toBe(
+      stripWhitespace(`
       import {Component} from '@angular/core';
       import {Dir} from './dir';
       import {NgIf} from '@angular/common';
@@ -2824,32 +3394,43 @@ describe('standalone migration', () => {
       export class AppComponent {
         show = true;
       }
-    `));
+    `),
+    );
 
-    expect(stripWhitespace(tree.readContent('./app/dir.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('./app/dir.ts'))).toBe(
+      stripWhitespace(`
       import {Directive} from '@angular/core';
 
       @Directive({selector: '[dir]', standalone: true})
       export class Dir {}
-    `));
+    `),
+    );
   });
 
   it('should migrate the root component tests when converting to standalone', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.component.ts', `
+    writeFile(
+      './app/app.component.ts',
+      `
       import {Component} from '@angular/core';
 
       @Component({template: 'hello'})
       export class AppComponent {}
-    `);
+    `,
+    );
 
-    writeFile('./app/app.component.spec.ts', `
+    writeFile(
+      './app/app.component.spec.ts',
+      `
       import {TestBed} from '@angular/core/testing';
       import {AppComponent} from './app.component';
 
@@ -2860,26 +3441,33 @@ describe('standalone migration', () => {
           expect(fixture.nativeElement.innerHTML).toBe('hello');
         });
       });
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule} from '@angular/core';
       import {AppComponent} from './app.component';
 
       @NgModule({declarations: [AppComponent], bootstrap: [AppComponent]})
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('./app/app.component.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('./app/app.component.ts'))).toBe(
+      stripWhitespace(`
       import {Component} from '@angular/core';
 
       @Component({template: 'hello', standalone: true})
       export class AppComponent {}
-    `));
+    `),
+    );
 
-    expect(stripWhitespace(tree.readContent('./app/app.component.spec.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('./app/app.component.spec.ts'))).toBe(
+      stripWhitespace(`
       import {TestBed} from '@angular/core/testing';
       import {AppComponent} from './app.component';
 
@@ -2890,18 +3478,24 @@ describe('standalone migration', () => {
           expect(fixture.nativeElement.innerHTML).toBe('hello');
         });
       });
-    `));
+    `),
+    );
   });
 
   it('should copy providers and the symbols they depend on to the main file', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component, InjectionToken} from '@angular/core';
       import {externalToken} from './externals/token';
       import {externalToken as aliasedExternalToken} from './externals/other-token';
@@ -2940,13 +3534,15 @@ describe('standalone migration', () => {
         ]
       })
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
     // Note that this leaves a couple of unused imports from `app.module`.
     // The schematic optimizes for safety, rather than avoiding unused imports.
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {exportedToken, exportedExtraProviders, ExportedClass, exportedFactory, AppComponent} from './app/app.module';
       import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
       import {ExternalInterface} from '@external/interfaces';
@@ -2969,9 +3565,11 @@ describe('standalone migration', () => {
             ...exportedExtraProviders
         ]
       }).catch(e => console.error(e));
-    `));
+    `),
+    );
 
-    expect(stripWhitespace(tree.readContent('./app/app.module.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('./app/app.module.ts'))).toBe(
+      stripWhitespace(`
       import {NgModule, Component, InjectionToken} from '@angular/core';
       import {externalToken} from './externals/token';
       import {externalToken as aliasedExternalToken} from './externals/other-token';
@@ -2997,18 +3595,24 @@ describe('standalone migration', () => {
 
       @Component({template: 'hello', standalone: true})
       export class AppComponent {}
-    `));
+    `),
+    );
   });
 
   it('should not copy over non-declaration references to the main file', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component, InjectionToken} from '@angular/core';
 
       export const token = new InjectionToken<string>('token');
@@ -3024,11 +3628,13 @@ describe('standalone migration', () => {
         providers: [{provide: token, useValue: 'hello'}]
       })
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {token, AppComponent} from './app/app.module';
       import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
       import {InjectionToken} from '@angular/core';
@@ -3036,9 +3642,11 @@ describe('standalone migration', () => {
       bootstrapApplication(AppComponent, {
         providers: [{ provide: token, useValue: 'hello' }]
       }).catch(e => console.error(e));
-    `));
+    `),
+    );
 
-    expect(stripWhitespace(tree.readContent('./app/app.module.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('./app/app.module.ts'))).toBe(
+      stripWhitespace(`
       import {NgModule, Component, InjectionToken} from '@angular/core';
 
       export const token = new InjectionToken<string>('token');
@@ -3047,19 +3655,24 @@ describe('standalone migration', () => {
 
       @Component({template: 'hello', standalone: true})
       export class AppComponent {}
-    `));
+    `),
+    );
   });
 
-  it('should update dynamic imports from the `providers` that are copied to the main file',
-     async () => {
-       writeFile('main.ts', `
+  it('should update dynamic imports from the `providers` that are copied to the main file', async () => {
+    writeFile(
+      'main.ts',
+      `
           import {AppModule} from './app/app.module';
           import {platformBrowser} from '@angular/platform-browser';
 
           platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-        `);
+        `,
+    );
 
-       writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
           import {NgModule, Component} from '@angular/core';
           import {ROUTES} from '@angular/router';
 
@@ -3078,11 +3691,13 @@ describe('standalone migration', () => {
             }]
           })
           export class AppModule {}
-        `);
+        `,
+    );
 
-       await runMigration('standalone-bootstrap');
+    await runMigration('standalone-bootstrap');
 
-       expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
           import {AppComponent} from './app/app.module';
           import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
           import {ROUTES} from '@angular/router';
@@ -3096,32 +3711,43 @@ describe('standalone migration', () => {
               ]
             }]
           }).catch(e => console.error(e));
-        `));
-     });
+        `),
+    );
+  });
 
-  it('should copy modules from the `imports` array to the `providers` and wrap them in `importProvidersFrom`',
-     async () => {
-       writeFile('main.ts', `
+  it('should copy modules from the `imports` array to the `providers` and wrap them in `importProvidersFrom`', async () => {
+    writeFile(
+      'main.ts',
+      `
         import {AppModule} from './app/app.module';
         import {platformBrowser} from '@angular/platform-browser';
 
         platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-      `);
+      `,
+    );
 
-       writeFile('token.ts', `
+    writeFile(
+      'token.ts',
+      `
         import {InjectionToken} from '@angular/core';
         export const token = new InjectionToken<string>('token');
-      `);
+      `,
+    );
 
-       writeFile('./modules/internal.module.ts', `
+    writeFile(
+      './modules/internal.module.ts',
+      `
         import {NgModule} from '@angular/core';
         import {token} from '../token';
 
         @NgModule({providers: [{provide: token, useValue: 'InternalModule'}]})
         export class InternalModule {}
-      `);
+      `,
+    );
 
-       writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
         import {NgModule, Component} from '@angular/core';
         import {CommonModule} from '@angular/common';
         import {InternalModule} from '../modules/internal.module';
@@ -3139,11 +3765,13 @@ describe('standalone migration', () => {
           bootstrap: [AppComponent]
         })
         export class AppModule {}
-      `);
+      `,
+    );
 
-       await runMigration('standalone-bootstrap');
+    await runMigration('standalone-bootstrap');
 
-       expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
         import {SameFileModule, AppComponent} from './app/app.module';
         import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
         import {token} from './token';
@@ -3154,18 +3782,24 @@ describe('standalone migration', () => {
         bootstrapApplication(AppComponent, {
           providers: [importProvidersFrom(CommonModule, InternalModule, SameFileModule)]
         }).catch(e => console.error(e));
-      `));
-     });
+      `),
+    );
+  });
 
   it('should switch RouterModule.forRoot calls with one argument to provideRouter', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {RouterModule} from '@angular/router';
 
@@ -3183,11 +3817,13 @@ describe('standalone migration', () => {
         ]
       })
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {AppComponent} from './app/app.module';
       import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
       import {provideRouter} from '@angular/router';
@@ -3198,18 +3834,24 @@ describe('standalone migration', () => {
           {path: 'external-comp', loadComponent: () => import('@external/external-comp').then(c => c.ExternalComp)}
         ])]
       }).catch(e => console.error(e));
-    `));
+    `),
+    );
   });
 
   it('should migrate a RouterModule.forRoot call with an empty config', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {RouterModule} from '@angular/router';
       import {APP_ROUTES} from './routes';
@@ -3223,11 +3865,13 @@ describe('standalone migration', () => {
         imports: [RouterModule.forRoot(APP_ROUTES, {})]
       })
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {AppComponent} from './app/app.module';
       import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
       import {APP_ROUTES} from './app/routes';
@@ -3236,18 +3880,24 @@ describe('standalone migration', () => {
       bootstrapApplication(AppComponent, {
         providers: [provideRouter(APP_ROUTES)]
       }).catch(e => console.error(e));
-    `));
+    `),
+    );
   });
 
   it('should migrate a router config with a preloadingStrategy to withPreloading', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {RouterModule} from '@angular/router';
       import {of} from 'rxjs';
@@ -3263,11 +3913,13 @@ describe('standalone migration', () => {
         })]
       })
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {AppComponent} from './app/app.module';
       import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
       import {of} from 'rxjs';
@@ -3276,18 +3928,24 @@ describe('standalone migration', () => {
       bootstrapApplication(AppComponent, {
         providers: [provideRouter([], withPreloading(() => of(true)))]
       }).catch(e => console.error(e));
-    `));
+    `),
+    );
   });
 
   it('should migrate a router config with enableTracing to withDebugTracing', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {RouterModule} from '@angular/router';
 
@@ -3302,11 +3960,13 @@ describe('standalone migration', () => {
         })]
       })
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {AppComponent} from './app/app.module';
       import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
       import {withDebugTracing, provideRouter} from '@angular/router';
@@ -3314,19 +3974,24 @@ describe('standalone migration', () => {
       bootstrapApplication(AppComponent, {
         providers: [provideRouter([], withDebugTracing())]
       }).catch(e => console.error(e));
-    `));
+    `),
+    );
   });
 
-  it('should migrate a router config with `initialNavigation: "enabledBlocking"` to withEnabledBlockingInitialNavigation',
-     async () => {
-       writeFile('main.ts', `
+  it('should migrate a router config with `initialNavigation: "enabledBlocking"` to withEnabledBlockingInitialNavigation', async () => {
+    writeFile(
+      'main.ts',
+      `
           import {AppModule} from './app/app.module';
           import {platformBrowser} from '@angular/platform-browser';
 
           platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-        `);
+        `,
+    );
 
-       writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
           import {NgModule, Component} from '@angular/core';
           import {RouterModule} from '@angular/router';
 
@@ -3341,11 +4006,13 @@ describe('standalone migration', () => {
             })]
           })
           export class AppModule {}
-        `);
+        `,
+    );
 
-       await runMigration('standalone-bootstrap');
+    await runMigration('standalone-bootstrap');
 
-       expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
           import {AppComponent} from './app/app.module';
           import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
           import {withEnabledBlockingInitialNavigation, provideRouter} from '@angular/router';
@@ -3353,19 +4020,24 @@ describe('standalone migration', () => {
           bootstrapApplication(AppComponent, {
             providers: [provideRouter([], withEnabledBlockingInitialNavigation())]
           }).catch(e => console.error(e));
-        `));
-     });
+        `),
+    );
+  });
 
-  it('should migrate a router config with `initialNavigation: "enabled"` to withEnabledBlockingInitialNavigation',
-     async () => {
-       writeFile('main.ts', `
+  it('should migrate a router config with `initialNavigation: "enabled"` to withEnabledBlockingInitialNavigation', async () => {
+    writeFile(
+      'main.ts',
+      `
           import {AppModule} from './app/app.module';
           import {platformBrowser} from '@angular/platform-browser';
 
           platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-        `);
+        `,
+    );
 
-       writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
           import {NgModule, Component} from '@angular/core';
           import {RouterModule} from '@angular/router';
 
@@ -3380,11 +4052,13 @@ describe('standalone migration', () => {
             })]
           })
           export class AppModule {}
-        `);
+        `,
+    );
 
-       await runMigration('standalone-bootstrap');
+    await runMigration('standalone-bootstrap');
 
-       expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
           import {AppComponent} from './app/app.module';
           import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
           import {withEnabledBlockingInitialNavigation, provideRouter} from '@angular/router';
@@ -3392,19 +4066,24 @@ describe('standalone migration', () => {
           bootstrapApplication(AppComponent, {
             providers: [provideRouter([], withEnabledBlockingInitialNavigation())]
           }).catch(e => console.error(e));
-        `));
-     });
+        `),
+    );
+  });
 
-  it('should migrate a router config with `initialNavigation: "disabled"` to withDisabledInitialNavigation',
-     async () => {
-       writeFile('main.ts', `
+  it('should migrate a router config with `initialNavigation: "disabled"` to withDisabledInitialNavigation', async () => {
+    writeFile(
+      'main.ts',
+      `
           import {AppModule} from './app/app.module';
           import {platformBrowser} from '@angular/platform-browser';
 
           platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-        `);
+        `,
+    );
 
-       writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
           import {NgModule, Component} from '@angular/core';
           import {RouterModule} from '@angular/router';
 
@@ -3419,11 +4098,13 @@ describe('standalone migration', () => {
             })]
           })
           export class AppModule {}
-        `);
+        `,
+    );
 
-       await runMigration('standalone-bootstrap');
+    await runMigration('standalone-bootstrap');
 
-       expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
           import {AppComponent} from './app/app.module';
           import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
           import {withDisabledInitialNavigation, provideRouter} from '@angular/router';
@@ -3431,18 +4112,24 @@ describe('standalone migration', () => {
           bootstrapApplication(AppComponent, {
             providers: [provideRouter([], withDisabledInitialNavigation())]
           }).catch(e => console.error(e));
-        `));
-     });
+        `),
+    );
+  });
 
   it('should migrate a router config with useHash to withHashLocation', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {RouterModule} from '@angular/router';
 
@@ -3457,11 +4144,13 @@ describe('standalone migration', () => {
         })]
       })
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {AppComponent} from './app/app.module';
       import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
       import {withHashLocation, provideRouter} from '@angular/router';
@@ -3469,18 +4158,24 @@ describe('standalone migration', () => {
       bootstrapApplication(AppComponent, {
         providers: [provideRouter([], withHashLocation())]
       }).catch(e => console.error(e));
-    `));
+    `),
+    );
   });
 
   it('should migrate a router config with errorHandler to withNavigationErrorHandler', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
           import {AppModule} from './app/app.module';
           import {platformBrowser} from '@angular/platform-browser';
 
           platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-        `);
+        `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
           import {NgModule, Component} from '@angular/core';
           import {RouterModule} from '@angular/router';
 
@@ -3495,11 +4190,13 @@ describe('standalone migration', () => {
             })]
           })
           export class AppModule {}
-        `);
+        `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
           import {AppComponent} from './app/app.module';
           import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
           import {withNavigationErrorHandler, provideRouter} from '@angular/router';
@@ -3507,19 +4204,24 @@ describe('standalone migration', () => {
           bootstrapApplication(AppComponent, {
             providers: [provideRouter([], withNavigationErrorHandler(() => {}))]
           }).catch(e => console.error(e));
-        `));
+        `),
+    );
   });
 
-  it('should combine the anchorScrolling and scrollPositionRestoration of a router config into withInMemoryScrolling',
-     async () => {
-       writeFile('main.ts', `
+  it('should combine the anchorScrolling and scrollPositionRestoration of a router config into withInMemoryScrolling', async () => {
+    writeFile(
+      'main.ts',
+      `
           import {AppModule} from './app/app.module';
           import {platformBrowser} from '@angular/platform-browser';
 
           platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-        `);
+        `,
+    );
 
-       writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
           import {NgModule, Component} from '@angular/core';
           import {RouterModule} from '@angular/router';
 
@@ -3535,11 +4237,13 @@ describe('standalone migration', () => {
             })]
           })
           export class AppModule {}
-        `);
+        `,
+    );
 
-       await runMigration('standalone-bootstrap');
+    await runMigration('standalone-bootstrap');
 
-       expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
           import {AppComponent} from './app/app.module';
           import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
           import {withInMemoryScrolling, provideRouter} from '@angular/router';
@@ -3550,18 +4254,24 @@ describe('standalone migration', () => {
               scrollPositionRestoration: 'top'
             }))]
           }).catch(e => console.error(e));
-        `));
-     });
+        `),
+    );
+  });
 
   it('should copy properties that do not map to a feature into withRouterConfig', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {RouterModule} from '@angular/router';
 
@@ -3578,11 +4288,13 @@ describe('standalone migration', () => {
         })]
       })
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {AppComponent} from './app/app.module';
       import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
       import {withHashLocation, withRouterConfig, provideRouter} from '@angular/router';
@@ -3593,19 +4305,24 @@ describe('standalone migration', () => {
           paramsInheritanceStrategy: 'always'
         }))]
       }).catch(e => console.error(e));
-    `));
+    `),
+    );
   });
 
-  it('should preserve a RouterModule.forRoot where the config cannot be statically analyzed',
-     async () => {
-       writeFile('main.ts', `
+  it('should preserve a RouterModule.forRoot where the config cannot be statically analyzed', async () => {
+    writeFile(
+      'main.ts',
+      `
         import {AppModule} from './app/app.module';
         import {platformBrowser} from '@angular/platform-browser';
 
         platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-      `);
+      `,
+    );
 
-       writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
         import {NgModule, Component} from '@angular/core';
         import {RouterModule} from '@angular/router';
 
@@ -3623,11 +4340,13 @@ describe('standalone migration', () => {
           })]
         })
         export class AppModule {}
-      `);
+      `,
+    );
 
-       await runMigration('standalone-bootstrap');
+    await runMigration('standalone-bootstrap');
 
-       expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
         import {AppComponent} from './app/app.module';
         import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
         import {importProvidersFrom} from '@angular/core';
@@ -3641,18 +4360,24 @@ describe('standalone migration', () => {
             ...extraOptions
           }))]
         }).catch(e => console.error(e));
-      `));
-     });
+      `),
+    );
+  });
 
   it('should convert BrowserAnimationsModule references to provideAnimations', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -3665,11 +4390,13 @@ describe('standalone migration', () => {
         imports: [BrowserAnimationsModule]
       })
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {AppComponent} from './app/app.module';
       import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
       import {provideAnimations} from '@angular/platform-browser/animations';
@@ -3677,18 +4404,24 @@ describe('standalone migration', () => {
       bootstrapApplication(AppComponent, {
         providers: [provideAnimations()]
       }).catch(e => console.error(e));
-    `));
+    `),
+    );
   });
 
   it('should preserve BrowserAnimationsModule.withConfig calls', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -3701,11 +4434,13 @@ describe('standalone migration', () => {
         imports: [BrowserAnimationsModule.withConfig({disableAnimations: true})]
       })
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {AppComponent} from './app/app.module';
       import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
       import {importProvidersFrom} from '@angular/core';
@@ -3714,18 +4449,24 @@ describe('standalone migration', () => {
       bootstrapApplication(AppComponent, {
         providers: [importProvidersFrom(BrowserAnimationsModule.withConfig({disableAnimations: true}))]
       }).catch(e => console.error(e));
-    `));
+    `),
+    );
   });
 
   it('should convert NoopAnimationsModule references to provideNoopAnimations', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -3738,11 +4479,13 @@ describe('standalone migration', () => {
         imports: [NoopAnimationsModule]
       })
       export class AppModule {}
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {AppComponent} from './app/app.module';
       import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
       import {provideNoopAnimations} from '@angular/platform-browser/animations';
@@ -3750,19 +4493,24 @@ describe('standalone migration', () => {
       bootstrapApplication(AppComponent, {
         providers: [provideNoopAnimations()]
       }).catch(e => console.error(e));
-    `));
+    `),
+    );
   });
 
-  it('should convert HttpClientModule references to provideHttpClient(withInterceptorsFromDi())',
-     async () => {
-       writeFile('main.ts', `
+  it('should convert HttpClientModule references to provideHttpClient(withInterceptorsFromDi())', async () => {
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-       writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
       import {HttpClientModule} from '@angular/common/http';
 
@@ -3775,11 +4523,13 @@ describe('standalone migration', () => {
         imports: [HttpClientModule]
       })
       export class AppModule {}
-    `);
+    `,
+    );
 
-       await runMigration('standalone-bootstrap');
+    await runMigration('standalone-bootstrap');
 
-       expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {AppComponent} from './app/app.module';
       import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
       import {withInterceptorsFromDi, provideHttpClient} from '@angular/common/http';
@@ -3787,19 +4537,24 @@ describe('standalone migration', () => {
       bootstrapApplication(AppComponent, {
         providers: [provideHttpClient(withInterceptorsFromDi())]
       }).catch(e => console.error(e));
-    `));
-     });
+    `),
+    );
+  });
 
-  it('should omit standalone directives from the imports array from the importProvidersFrom call',
-     async () => {
-       writeFile('main.ts', `
+  it('should omit standalone directives from the imports array from the importProvidersFrom call', async () => {
+    writeFile(
+      'main.ts',
+      `
         import {AppModule} from './app/app.module';
         import {platformBrowser} from '@angular/platform-browser';
 
         platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-      `);
+      `,
+    );
 
-       writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
         import {NgModule, Component, Directive} from '@angular/core';
         import {CommonModule} from '@angular/common';
 
@@ -3811,11 +4566,13 @@ describe('standalone migration', () => {
 
         @NgModule({imports: [Dir, CommonModule], declarations: [AppComponent], bootstrap: [AppComponent]})
         export class AppModule {}
-      `);
+      `,
+    );
 
-       await runMigration('standalone-bootstrap');
+    await runMigration('standalone-bootstrap');
 
-       expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
         import {AppComponent} from './app/app.module';
         import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
         import {importProvidersFrom} from '@angular/core';
@@ -3824,24 +4581,31 @@ describe('standalone migration', () => {
         bootstrapApplication(AppComponent, {
           providers: [importProvidersFrom(CommonModule)]
         }).catch(e => console.error(e));
-      `));
+      `),
+    );
 
-       expect(stripWhitespace(tree.readContent('./app/app.module.ts'))).toContain(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('./app/app.module.ts'))).toContain(
+      stripWhitespace(`
         @Component({template: '<span dir></span>', standalone: true, imports: [Dir]})
         export class AppComponent {}
-      `));
-     });
+      `),
+    );
+  });
 
-  it('should be able to migrate a bootstrapModule call where the root component does not belong to the bootstrapped component',
-     async () => {
-       writeFile('main.ts', `
+  it('should be able to migrate a bootstrapModule call where the root component does not belong to the bootstrapped component', async () => {
+    writeFile(
+      'main.ts',
+      `
           import {AppModule} from './app/app.module';
           import {platformBrowser} from '@angular/platform-browser';
 
           platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-        `);
+        `,
+    );
 
-       writeFile('./app/root.module.ts', `
+    writeFile(
+      './app/root.module.ts',
+      `
           import {NgModule, Component, InjectionToken} from '@angular/core';
 
           const token = new InjectionToken<string>('token');
@@ -3855,9 +4619,12 @@ describe('standalone migration', () => {
             providers: [{provide: token, useValue: 'hello'}]
           })
           export class RootModule {}
-        `);
+        `,
+    );
 
-       writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
           import {NgModule, Component} from '@angular/core';
           import {RootModule, Root} from './root.module';
 
@@ -3866,12 +4633,14 @@ describe('standalone migration', () => {
             bootstrap: [Root]
           })
           export class AppModule {}
-        `);
+        `,
+    );
 
-       await runMigration('standalone-bootstrap');
+    await runMigration('standalone-bootstrap');
 
-       expect(tree.exists('./app/app.module.ts')).toBe(false);
-       expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(tree.exists('./app/app.module.ts')).toBe(false);
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
           import {platformBrowser, bootstrapApplication} from '@angular/platform-browser';
           import {importProvidersFrom} from '@angular/core';
           import {RootModule, Root} from './app/root.module';
@@ -3879,18 +4648,24 @@ describe('standalone migration', () => {
           bootstrapApplication(Root, {
             providers: [importProvidersFrom(RootModule)]
           }).catch(e => console.error(e));
-        `));
-     });
+        `),
+    );
+  });
 
   it('should add Protractor support if any tests are detected', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
 
       @Component({selector: 'app', template: 'hello'})
@@ -3898,9 +4673,12 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [AppComponent], bootstrap: [AppComponent]})
       export class AppModule {}
-    `);
+    `,
+    );
 
-    writeFile('./app/app.e2e.spec.ts', `
+    writeFile(
+      './app/app.e2e.spec.ts',
+      `
       import {browser, by, element} from 'protractor';
 
       describe('app', () => {
@@ -3913,29 +4691,37 @@ describe('standalone migration', () => {
           expect(await rootSelector.isPresent()).toBe(true);
         });
       });
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {AppComponent} from './app/app.module';
       import {platformBrowser, provideProtractorTestingSupport, bootstrapApplication} from '@angular/platform-browser';
 
       bootstrapApplication(AppComponent, {
         providers: [provideProtractorTestingSupport()]
       }).catch(e => console.error(e));
-    `));
+    `),
+    );
   });
 
   it('should add Protractor support if any tests with deep imports are detected', async () => {
-    writeFile('main.ts', `
+    writeFile(
+      'main.ts',
+      `
       import {AppModule} from './app/app.module';
       import {platformBrowser} from '@angular/platform-browser';
 
       platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
-    `);
+    `,
+    );
 
-    writeFile('./app/app.module.ts', `
+    writeFile(
+      './app/app.module.ts',
+      `
       import {NgModule, Component} from '@angular/core';
 
       @Component({selector: 'app', template: 'hello'})
@@ -3943,9 +4729,12 @@ describe('standalone migration', () => {
 
       @NgModule({declarations: [AppComponent], bootstrap: [AppComponent]})
       export class AppModule {}
-    `);
+    `,
+    );
 
-    writeFile('./app/app.e2e.spec.ts', `
+    writeFile(
+      './app/app.e2e.spec.ts',
+      `
       import {browser, by, element} from 'protractor/some/deep-import';
 
       describe('app', () => {
@@ -3958,17 +4747,20 @@ describe('standalone migration', () => {
           expect(await rootSelector.isPresent()).toBe(true);
         });
       });
-    `);
+    `,
+    );
 
     await runMigration('standalone-bootstrap');
 
-    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(stripWhitespace(`
+    expect(stripWhitespace(tree.readContent('main.ts'))).toBe(
+      stripWhitespace(`
       import {AppComponent} from './app/app.module';
       import {platformBrowser, provideProtractorTestingSupport, bootstrapApplication} from '@angular/platform-browser';
 
       bootstrapApplication(AppComponent, {
         providers: [provideProtractorTestingSupport()]
       }).catch(e => console.error(e));
-    `));
+    `),
+    );
   });
 });
diff --git a/packages/core/schematics/utils/change_tracker.ts b/packages/core/schematics/utils/change_tracker.ts
index 7d46b37b3c997..e22f4f21fa7ba 100644
--- a/packages/core/schematics/utils/change_tracker.ts
+++ b/packages/core/schematics/utils/change_tracker.ts
@@ -34,14 +34,18 @@ export class ChangeTracker {
   private readonly _changes = new Map<ts.SourceFile, PendingChange[]>();
   private readonly _importManager: ImportManager;
 
-  constructor(private _printer: ts.Printer, private _importRemapper?: ImportRemapper) {
+  constructor(
+    private _printer: ts.Printer,
+    private _importRemapper?: ImportRemapper,
+  ) {
     this._importManager = new ImportManager(
-        currentFile => ({
-          addNewImport: (start, text) => this.insertText(currentFile, start, text),
-          updateExistingImport: (namedBindings, text) => this.replaceText(
-              currentFile, namedBindings.getStart(), namedBindings.getWidth(), text),
-        }),
-        this._printer);
+      (currentFile) => ({
+        addNewImport: (start, text) => this.insertText(currentFile, start, text),
+        updateExistingImport: (namedBindings, text) =>
+          this.replaceText(currentFile, namedBindings.getStart(), namedBindings.getWidth(), text),
+      }),
+      this._printer,
+    );
   }
 
   /**
@@ -75,12 +79,18 @@ export class ChangeTracker {
    * without it.
    */
   replaceNode(
-      oldNode: ts.Node, newNode: ts.Node, emitHint = ts.EmitHint.Unspecified,
-      sourceFileWhenPrinting?: ts.SourceFile): void {
+    oldNode: ts.Node,
+    newNode: ts.Node,
+    emitHint = ts.EmitHint.Unspecified,
+    sourceFileWhenPrinting?: ts.SourceFile,
+  ): void {
     const sourceFile = oldNode.getSourceFile();
     this.replaceText(
-        sourceFile, oldNode.getStart(), oldNode.getWidth(),
-        this._printer.printNode(emitHint, newNode, sourceFileWhenPrinting || sourceFile));
+      sourceFile,
+      oldNode.getStart(),
+      oldNode.getWidth(),
+      this._printer.printNode(emitHint, newNode, sourceFileWhenPrinting || sourceFile),
+    );
   }
 
   /**
@@ -88,8 +98,11 @@ export class ChangeTracker {
    * @param node Node whose text should be removed.
    */
   removeNode(node: ts.Node): void {
-    this._trackChange(
-        node.getSourceFile(), {start: node.getStart(), removeLength: node.getWidth(), text: ''});
+    this._trackChange(node.getSourceFile(), {
+      start: node.getStart(),
+      removeLength: node.getWidth(),
+      text: '',
+    });
   }
 
   /**
@@ -99,8 +112,12 @@ export class ChangeTracker {
    * @param moduleName Module from which the symbol is imported.
    */
   addImport(
-      sourceFile: ts.SourceFile, symbolName: string, moduleName: string, alias: string|null = null,
-      keepSymbolName = false): ts.Expression {
+    sourceFile: ts.SourceFile,
+    symbolName: string,
+    moduleName: string,
+    alias: string | null = null,
+    keepSymbolName = false,
+  ): ts.Expression {
     if (this._importRemapper) {
       moduleName = this._importRemapper(moduleName, sourceFile.fileName);
     }
@@ -111,7 +128,13 @@ export class ChangeTracker {
     moduleName = normalizePath(moduleName);
 
     return this._importManager.addImportToSourceFile(
-        sourceFile, symbolName, moduleName, alias, false, keepSymbolName);
+      sourceFile,
+      symbolName,
+      moduleName,
+      alias,
+      false,
+      keepSymbolName,
+    );
   }
 
   /**
@@ -142,7 +165,7 @@ export class ChangeTracker {
       // Insert the changes in reverse so that they're applied in reverse order.
       // This ensures that the offsets of subsequent changes aren't affected by
       // previous changes changing the file's text.
-      const insertIndex = changes.findIndex(current => current.start <= change.start);
+      const insertIndex = changes.findIndex((current) => current.start <= change.start);
 
       if (insertIndex === -1) {
         changes.push(change);
diff --git a/packages/core/schematics/utils/extract_metadata.ts b/packages/core/schematics/utils/extract_metadata.ts
index d6b0b5ff4cef9..6ce04ba0aebb7 100644
--- a/packages/core/schematics/utils/extract_metadata.ts
+++ b/packages/core/schematics/utils/extract_metadata.ts
@@ -13,13 +13,15 @@ import {unwrapExpression} from './typescript/functions';
 
 /** Interface describing metadata of an Angular class. */
 export interface AngularClassMetadata {
-  type: 'component'|'directive';
+  type: 'component' | 'directive';
   node: ts.ObjectLiteralExpression;
 }
 
 /** Extracts `@Directive` or `@Component` metadata from the given class. */
 export function extractAngularClassMetadata(
-    typeChecker: ts.TypeChecker, node: ts.ClassDeclaration): AngularClassMetadata|null {
+  typeChecker: ts.TypeChecker,
+  node: ts.ClassDeclaration,
+): AngularClassMetadata | null {
   const decorators = ts.getDecorators(node);
 
   if (!decorators || !decorators.length) {
@@ -27,8 +29,8 @@ export function extractAngularClassMetadata(
   }
 
   const ngDecorators = getAngularDecorators(typeChecker, decorators);
-  const componentDecorator = ngDecorators.find(dec => dec.name === 'Component');
-  const directiveDecorator = ngDecorators.find(dec => dec.name === 'Directive');
+  const componentDecorator = ngDecorators.find((dec) => dec.name === 'Component');
+  const directiveDecorator = ngDecorators.find((dec) => dec.name === 'Directive');
   const decorator = componentDecorator ?? directiveDecorator;
 
   // In case no decorator could be found on the current class, skip.
diff --git a/packages/core/schematics/utils/import_manager.ts b/packages/core/schematics/utils/import_manager.ts
index 144517b8e9b3f..282c577dc1280 100644
--- a/packages/core/schematics/utils/import_manager.ts
+++ b/packages/core/schematics/utils/import_manager.ts
@@ -28,16 +28,21 @@ const enum QuoteStyle {
  */
 export class ImportManager {
   /** Map of import declarations that need to be updated to include the given symbols. */
-  private updatedImports =
-      new Map<ts.ImportDeclaration, {propertyName?: ts.Identifier, importName: ts.Identifier}[]>();
+  private updatedImports = new Map<
+    ts.ImportDeclaration,
+    {propertyName?: ts.Identifier; importName: ts.Identifier}[]
+  >();
   /** Map of source-files and their previously used identifier names. */
   private usedIdentifierNames = new Map<ts.SourceFile, string[]>();
   /** Map of source files and the new imports that have to be added to them. */
-  private newImports: Map<ts.SourceFile, {
-    importStartIndex: number,
-    defaultImports: Map<string, ts.Identifier>,
-    namedImports: Map<string, ts.ImportSpecifier[]>,
-  }> = new Map();
+  private newImports: Map<
+    ts.SourceFile,
+    {
+      importStartIndex: number;
+      defaultImports: Map<string, ts.Identifier>;
+      namedImports: Map<string, ts.ImportSpecifier[]>;
+    }
+  > = new Map();
   /** Map between a file and the implied quote style for imports. */
   private quoteStyles: Record<string, QuoteStyle> = {};
 
@@ -46,33 +51,43 @@ export class ImportManager {
    * the same identifier without checking the source-file again.
    */
   private importCache: {
-    sourceFile: ts.SourceFile,
-    symbolName: string|null,
-    alias: string|null,
-    moduleName: string,
-    identifier: ts.Identifier
+    sourceFile: ts.SourceFile;
+    symbolName: string | null;
+    alias: string | null;
+    moduleName: string;
+    identifier: ts.Identifier;
   }[] = [];
 
   constructor(
-      private getUpdateRecorder: (sf: ts.SourceFile) => ImportManagerUpdateRecorder,
-      private printer: ts.Printer) {}
+    private getUpdateRecorder: (sf: ts.SourceFile) => ImportManagerUpdateRecorder,
+    private printer: ts.Printer,
+  ) {}
 
   /**
    * Adds an import to the given source-file and returns the TypeScript
    * identifier that can be used to access the newly imported symbol.
    */
   addImportToSourceFile(
-      sourceFile: ts.SourceFile, symbolName: string|null, moduleName: string,
-      alias: string|null = null, typeImport = false, keepSymbolName = false): ts.Expression {
+    sourceFile: ts.SourceFile,
+    symbolName: string | null,
+    moduleName: string,
+    alias: string | null = null,
+    typeImport = false,
+    keepSymbolName = false,
+  ): ts.Expression {
     const sourceDir = dirname(sourceFile.fileName);
     let importStartIndex = 0;
-    let existingImport: ts.ImportDeclaration|null = null;
+    let existingImport: ts.ImportDeclaration | null = null;
 
     // In case the given import has been already generated previously, we just return
     // the previous generated identifier in order to avoid duplicate generated imports.
     const cachedImport = this.importCache.find(
-        c => c.sourceFile === sourceFile && c.symbolName === symbolName &&
-            c.moduleName === moduleName && c.alias === alias);
+      (c) =>
+        c.sourceFile === sourceFile &&
+        c.symbolName === symbolName &&
+        c.moduleName === moduleName &&
+        c.alias === alias,
+    );
     if (cachedImport) {
       return cachedImport.identifier;
     }
@@ -84,8 +99,11 @@ export class ImportManager {
     for (let i = sourceFile.statements.length - 1; i >= 0; i--) {
       const statement = sourceFile.statements[i];
 
-      if (!ts.isImportDeclaration(statement) || !ts.isStringLiteral(statement.moduleSpecifier) ||
-          !statement.importClause) {
+      if (
+        !ts.isImportDeclaration(statement) ||
+        !ts.isStringLiteral(statement.moduleSpecifier) ||
+        !statement.importClause
+      ) {
         continue;
       }
 
@@ -95,9 +113,11 @@ export class ImportManager {
 
       const moduleSpecifier = statement.moduleSpecifier.text;
 
-      if (moduleSpecifier.startsWith('.') &&
-              resolve(sourceDir, moduleSpecifier) !== resolve(sourceDir, moduleName) ||
-          moduleSpecifier !== moduleName) {
+      if (
+        (moduleSpecifier.startsWith('.') &&
+          resolve(sourceDir, moduleSpecifier) !== resolve(sourceDir, moduleName)) ||
+        moduleSpecifier !== moduleName
+      ) {
         continue;
       }
 
@@ -108,10 +128,11 @@ export class ImportManager {
         // because these only export symbols available at runtime (no types)
         if (ts.isNamespaceImport(namedBindings) && !typeImport) {
           return ts.factory.createPropertyAccessExpression(
-              ts.factory.createIdentifier(namedBindings.name.text),
-              ts.factory.createIdentifier(alias || symbolName || 'default'));
+            ts.factory.createIdentifier(namedBindings.name.text),
+            ts.factory.createIdentifier(alias || symbolName || 'default'),
+          );
         } else if (ts.isNamedImports(namedBindings) && symbolName) {
-          const existingElement = namedBindings.elements.find(e => {
+          const existingElement = namedBindings.elements.find((e) => {
             // TODO(crisbeto): if an alias conflicts with an existing import, it may cause invalid
             // code to be generated. This is unlikely, but we may want to revisit it in the future.
             if (alias) {
@@ -135,8 +156,12 @@ export class ImportManager {
     }
 
     if (existingImport) {
-      const {propertyName, name} =
-          this._getImportParts(sourceFile, symbolName!, alias, keepSymbolName);
+      const {propertyName, name} = this._getImportParts(
+        sourceFile,
+        symbolName!,
+        alias,
+        keepSymbolName,
+      );
 
       // Since it can happen that multiple classes need to be imported within the
       // specified source file and we want to add the identifiers to the existing
@@ -145,8 +170,9 @@ export class ImportManager {
       // would throw off the recorder offsets. We need to keep track of the new identifiers
       // for the import and perform the import transformation as batches per source-file.
       this.updatedImports.set(
-          existingImport,
-          (this.updatedImports.get(existingImport) || []).concat({propertyName, importName: name}));
+        existingImport,
+        (this.updatedImports.get(existingImport) || []).concat({propertyName, importName: name}),
+      );
 
       // Keep track of all updated imports so that we don't generate duplicate
       // similar imports as these can't be statically analyzed in the source-file yet.
@@ -155,7 +181,7 @@ export class ImportManager {
       return name;
     }
 
-    let identifier: ts.Identifier|null = null;
+    let identifier: ts.Identifier | null = null;
 
     if (!this.newImports.has(sourceFile)) {
       this.newImports.set(sourceFile, {
@@ -166,8 +192,12 @@ export class ImportManager {
     }
 
     if (symbolName) {
-      const {propertyName, name} =
-          this._getImportParts(sourceFile, symbolName, alias, keepSymbolName);
+      const {propertyName, name} = this._getImportParts(
+        sourceFile,
+        symbolName,
+        alias,
+        keepSymbolName,
+      );
       const importMap = this.newImports.get(sourceFile)!.namedImports;
       identifier = name;
 
@@ -200,13 +230,19 @@ export class ImportManager {
       const recorder = this.getUpdateRecorder(sourceFile);
       const namedBindings = importDecl.importClause!.namedBindings as ts.NamedImports;
       const newNamedBindings = ts.factory.updateNamedImports(
-          namedBindings,
-          namedBindings.elements.concat(expressions.map(
-              ({propertyName, importName}) =>
-                  ts.factory.createImportSpecifier(false, propertyName, importName))));
-
-      const newNamedBindingsText =
-          this.printer.printNode(ts.EmitHint.Unspecified, newNamedBindings, sourceFile);
+        namedBindings,
+        namedBindings.elements.concat(
+          expressions.map(({propertyName, importName}) =>
+            ts.factory.createImportSpecifier(false, propertyName, importName),
+          ),
+        ),
+      );
+
+      const newNamedBindingsText = this.printer.printNode(
+        ts.EmitHint.Unspecified,
+        newNamedBindings,
+        sourceFile,
+      );
       recorder.updateExistingImport(namedBindings, newNamedBindingsText);
     });
 
@@ -216,22 +252,32 @@ export class ImportManager {
 
       defaultImports.forEach((identifier, moduleName) => {
         const newImport = ts.factory.createImportDeclaration(
-            undefined, ts.factory.createImportClause(false, identifier, undefined),
-            ts.factory.createStringLiteral(moduleName, useSingleQuotes));
+          undefined,
+          ts.factory.createImportClause(false, identifier, undefined),
+          ts.factory.createStringLiteral(moduleName, useSingleQuotes),
+        );
 
         recorder.addNewImport(
-            importStartIndex, this._getNewImportText(importStartIndex, newImport, sourceFile));
+          importStartIndex,
+          this._getNewImportText(importStartIndex, newImport, sourceFile),
+        );
       });
 
       namedImports.forEach((specifiers, moduleName) => {
         const newImport = ts.factory.createImportDeclaration(
+          undefined,
+          ts.factory.createImportClause(
+            false,
             undefined,
-            ts.factory.createImportClause(
-                false, undefined, ts.factory.createNamedImports(specifiers)),
-            ts.factory.createStringLiteral(moduleName, useSingleQuotes));
+            ts.factory.createNamedImports(specifiers),
+          ),
+          ts.factory.createStringLiteral(moduleName, useSingleQuotes),
+        );
 
         recorder.addNewImport(
-            importStartIndex, this._getNewImportText(importStartIndex, newImport, sourceFile));
+          importStartIndex,
+          this._getNewImportText(importStartIndex, newImport, sourceFile),
+        );
       });
     });
   }
@@ -258,8 +304,10 @@ export class ImportManager {
    * source file.
    */
   private isUniqueIdentifierName(sourceFile: ts.SourceFile, name: string) {
-    if (this.usedIdentifierNames.has(sourceFile) &&
-        this.usedIdentifierNames.get(sourceFile)!.indexOf(name) !== -1) {
+    if (
+      this.usedIdentifierNames.has(sourceFile) &&
+      this.usedIdentifierNames.get(sourceFile)!.indexOf(name) !== -1
+    ) {
       return false;
     }
 
@@ -269,10 +317,13 @@ export class ImportManager {
     const nodeQueue: ts.Node[] = [sourceFile];
     while (nodeQueue.length) {
       const node = nodeQueue.shift()!;
-      if (ts.isIdentifier(node) && node.text === name &&
-          // Identifiers that are aliased in an import aren't
-          // problematic since they're used under a different name.
-          (!ts.isImportSpecifier(node.parent) || node.parent.propertyName !== node)) {
+      if (
+        ts.isIdentifier(node) &&
+        node.text === name &&
+        // Identifiers that are aliased in an import aren't
+        // problematic since they're used under a different name.
+        (!ts.isImportSpecifier(node.parent) || node.parent.propertyName !== node)
+      ) {
         return false;
       }
       nodeQueue.push(...node.getChildren());
@@ -282,7 +333,9 @@ export class ImportManager {
 
   private _recordUsedIdentifier(sourceFile: ts.SourceFile, identifierName: string) {
     this.usedIdentifierNames.set(
-        sourceFile, (this.usedIdentifierNames.get(sourceFile) || []).concat(identifierName));
+      sourceFile,
+      (this.usedIdentifierNames.get(sourceFile) || []).concat(identifierName),
+    );
   }
 
   /**
@@ -300,8 +353,10 @@ export class ImportManager {
 
   /** Gets the text that should be added to the file for a newly-created import declaration. */
   private _getNewImportText(
-      importStartIndex: number, newImport: ts.ImportDeclaration,
-      sourceFile: ts.SourceFile): string {
+    importStartIndex: number,
+    newImport: ts.ImportDeclaration,
+    sourceFile: ts.SourceFile,
+  ): string {
     const text = this.printer.printNode(ts.EmitHint.Unspecified, newImport, sourceFile);
 
     // If the import is generated at the start of the source file, we want to add
@@ -321,12 +376,16 @@ export class ImportManager {
    * corresponds to `import {name}`.
    */
   private _getImportParts(
-      sourceFile: ts.SourceFile, symbolName: string, alias: string|null, keepSymbolName: boolean) {
+    sourceFile: ts.SourceFile,
+    symbolName: string,
+    alias: string | null,
+    keepSymbolName: boolean,
+  ) {
     const symbolIdentifier = ts.factory.createIdentifier(symbolName);
     const aliasIdentifier = alias ? ts.factory.createIdentifier(alias) : null;
     const generatedUniqueIdentifier = this._getUniqueIdentifier(sourceFile, alias || symbolName);
     const needsGeneratedUniqueName = generatedUniqueIdentifier.text !== (alias || symbolName);
-    let propertyName: ts.Identifier|undefined;
+    let propertyName: ts.Identifier | undefined;
     let name: ts.Identifier;
 
     if (needsGeneratedUniqueName && !keepSymbolName) {
@@ -345,16 +404,18 @@ export class ImportManager {
   /** Gets the quote style that is used for a file's imports. */
   private _getQuoteStyle(sourceFile: ts.SourceFile): QuoteStyle {
     if (!this.quoteStyles.hasOwnProperty(sourceFile.fileName)) {
-      let quoteStyle: QuoteStyle|undefined;
+      let quoteStyle: QuoteStyle | undefined;
 
       // Walk through the top-level imports and try to infer the quotes.
       for (const statement of sourceFile.statements) {
-        if (ts.isImportDeclaration(statement) &&
-            ts.isStringLiteralLike(statement.moduleSpecifier)) {
+        if (
+          ts.isImportDeclaration(statement) &&
+          ts.isStringLiteralLike(statement.moduleSpecifier)
+        ) {
           // Use `getText` instead of the actual text since it includes the quotes.
-          quoteStyle = statement.moduleSpecifier.getText().trim().startsWith('"') ?
-              QuoteStyle.Double :
-              QuoteStyle.Single;
+          quoteStyle = statement.moduleSpecifier.getText().trim().startsWith('"')
+            ? QuoteStyle.Double
+            : QuoteStyle.Single;
           break;
         }
       }
diff --git a/packages/core/schematics/utils/line_mappings.ts b/packages/core/schematics/utils/line_mappings.ts
index 56301b7c4c121..01444805dc3cc 100644
--- a/packages/core/schematics/utils/line_mappings.ts
+++ b/packages/core/schematics/utils/line_mappings.ts
@@ -43,7 +43,11 @@ export function computeLineStartsMap(text: string): number[] {
 
 /** Finds the closest line start for the given position. */
 function findClosestLineStartPosition<T>(
-    linesMap: T[], position: T, low = 0, high = linesMap.length - 1) {
+  linesMap: T[],
+  position: T,
+  low = 0,
+  high = linesMap.length - 1,
+) {
   while (low <= high) {
     const pivotIdx = Math.floor((low + high) / 2);
     const pivotEl = linesMap[pivotIdx];
diff --git a/packages/core/schematics/utils/load_esm.ts b/packages/core/schematics/utils/load_esm.ts
index 5ba0bc6fc2b51..3f17a987a499e 100644
--- a/packages/core/schematics/utils/load_esm.ts
+++ b/packages/core/schematics/utils/load_esm.ts
@@ -21,9 +21,10 @@ import {URL} from 'url';
  * @param modulePath The path of the module to load.
  * @returns A Promise that resolves to the dynamically imported module.
  */
-export async function loadEsmModule<T>(modulePath: string|URL): Promise<T> {
-  const namespaceObject =
-      (await new Function('modulePath', `return import(modulePath);`)(modulePath));
+export async function loadEsmModule<T>(modulePath: string | URL): Promise<T> {
+  const namespaceObject = await new Function('modulePath', `return import(modulePath);`)(
+    modulePath,
+  );
 
   // If it is not ESM then the values needed will be stored in the `default` property.
   // TODO_ESM: This can be removed once `@angular/*` packages are ESM only.
@@ -41,8 +42,9 @@ export async function loadEsmModule<T>(modulePath: string|URL): Promise<T> {
  * @returns A Promise that resolves to the dynamically imported compiler-cli private migrations
  * entry or an equivalent object if not available.
  */
-export async function loadCompilerCliMigrationsModule():
-    Promise<typeof import('@angular/compiler-cli/private/migrations')> {
+export async function loadCompilerCliMigrationsModule(): Promise<
+  typeof import('@angular/compiler-cli/private/migrations')
+> {
   try {
     return await loadEsmModule('@angular/compiler-cli/private/migrations');
   } catch {
diff --git a/packages/core/schematics/utils/ng_component_template.ts b/packages/core/schematics/utils/ng_component_template.ts
index 77c95373b0a1d..5d0234fd13577 100644
--- a/packages/core/schematics/utils/ng_component_template.ts
+++ b/packages/core/schematics/utils/ng_component_template.ts
@@ -31,7 +31,8 @@ export interface ResolvedTemplate {
    * character are based on the full source file content.
    */
   getCharacterAndLineOfPosition: (pos: number) => {
-    character: number, line: number
+    character: number;
+    line: number;
   };
 }
 
@@ -42,14 +43,18 @@ export interface ResolvedTemplate {
 export class NgComponentTemplateVisitor {
   resolvedTemplates: ResolvedTemplate[] = [];
 
-  constructor(public typeChecker: ts.TypeChecker, private _basePath: string, private _tree: Tree) {}
+  constructor(
+    public typeChecker: ts.TypeChecker,
+    private _basePath: string,
+    private _tree: Tree,
+  ) {}
 
   visitNode(node: ts.Node) {
     if (node.kind === ts.SyntaxKind.ClassDeclaration) {
       this.visitClassDeclaration(node as ts.ClassDeclaration);
     }
 
-    ts.forEachChild(node, n => this.visitNode(n));
+    ts.forEachChild(node, (n) => this.visitNode(n));
   }
 
   private visitClassDeclaration(node: ts.ClassDeclaration) {
@@ -63,7 +68,7 @@ export class NgComponentTemplateVisitor {
 
     // Walk through all component metadata properties and determine the referenced
     // HTML templates (either external or inline)
-    metadata.node.properties.forEach(property => {
+    metadata.node.properties.forEach((property) => {
       if (!ts.isPropertyAssignment(property)) {
         return;
       }
@@ -90,8 +95,8 @@ export class NgComponentTemplateVisitor {
           content,
           inline: true,
           start: start,
-          getCharacterAndLineOfPosition: pos =>
-              ts.getLineAndCharacterOfPosition(sourceFile, pos + start)
+          getCharacterAndLineOfPosition: (pos) =>
+            ts.getLineAndCharacterOfPosition(sourceFile, pos + start),
         });
       }
       if (propertyName === 'templateUrl' && ts.isStringLiteralLike(property.initializer)) {
@@ -118,7 +123,8 @@ export class NgComponentTemplateVisitor {
           content: fileContent,
           inline: false,
           start: 0,
-          getCharacterAndLineOfPosition: pos => getLineAndCharacterFromPosition(lineStartsMap, pos),
+          getCharacterAndLineOfPosition: (pos) =>
+            getLineAndCharacterFromPosition(lineStartsMap, pos),
         });
       }
     });
diff --git a/packages/core/schematics/utils/ng_decorators.ts b/packages/core/schematics/utils/ng_decorators.ts
index 43b4fa62bdec3..d5a026733cc45 100644
--- a/packages/core/schematics/utils/ng_decorators.ts
+++ b/packages/core/schematics/utils/ng_decorators.ts
@@ -9,7 +9,7 @@
 import ts from 'typescript';
 import {getCallDecoratorImport} from './typescript/decorators';
 
-export type CallExpressionDecorator = ts.Decorator&{
+export type CallExpressionDecorator = ts.Decorator & {
   expression: ts.CallExpression;
 };
 
@@ -25,13 +25,16 @@ export interface NgDecorator {
  * from a list of decorators.
  */
 export function getAngularDecorators(
-    typeChecker: ts.TypeChecker, decorators: ReadonlyArray<ts.Decorator>): NgDecorator[] {
-  return decorators.map(node => ({node, importData: getCallDecoratorImport(typeChecker, node)}))
-      .filter(({importData}) => importData && importData.importModule.startsWith('@angular/'))
-      .map(({node, importData}) => ({
-             node: node as CallExpressionDecorator,
-             name: importData!.name,
-             moduleName: importData!.importModule,
-             importNode: importData!.node
-           }));
+  typeChecker: ts.TypeChecker,
+  decorators: ReadonlyArray<ts.Decorator>,
+): NgDecorator[] {
+  return decorators
+    .map((node) => ({node, importData: getCallDecoratorImport(typeChecker, node)}))
+    .filter(({importData}) => importData && importData.importModule.startsWith('@angular/'))
+    .map(({node, importData}) => ({
+      node: node as CallExpressionDecorator,
+      name: importData!.name,
+      moduleName: importData!.importModule,
+      importNode: importData!.node,
+    }));
 }
diff --git a/packages/core/schematics/utils/parse_html.ts b/packages/core/schematics/utils/parse_html.ts
index 34ddf63b6bc1e..b97a2ca55830e 100644
--- a/packages/core/schematics/utils/parse_html.ts
+++ b/packages/core/schematics/utils/parse_html.ts
@@ -13,8 +13,10 @@ import type {TmplAstNode} from '@angular/compiler';
  * fails, null is being returned.
  */
 export function parseHtmlGracefully(
-    htmlContent: string, filePath: string,
-    compilerModule: typeof import('@angular/compiler')): TmplAstNode[]|null {
+  htmlContent: string,
+  filePath: string,
+  compilerModule: typeof import('@angular/compiler'),
+): TmplAstNode[] | null {
   try {
     return compilerModule.parseTemplate(htmlContent, filePath).nodes;
   } catch {
diff --git a/packages/core/schematics/utils/project_tsconfig_paths.ts b/packages/core/schematics/utils/project_tsconfig_paths.ts
index ce0f992e5ed23..6ca3dde231cb2 100644
--- a/packages/core/schematics/utils/project_tsconfig_paths.ts
+++ b/packages/core/schematics/utils/project_tsconfig_paths.ts
@@ -13,8 +13,9 @@ import {Tree} from '@angular-devkit/schematics';
  * Gets all tsconfig paths from a CLI project by reading the workspace configuration
  * and looking for common tsconfig locations.
  */
-export async function getProjectTsConfigPaths(tree: Tree):
-    Promise<{buildPaths: string[]; testPaths: string[];}> {
+export async function getProjectTsConfigPaths(
+  tree: Tree,
+): Promise<{buildPaths: string[]; testPaths: string[]}> {
   // Start with some tsconfig paths that are generally used within CLI projects. Note
   // that we are not interested in IDE-specific tsconfig files (e.g. /tsconfig.json)
   const buildPaths = new Set<string>();
@@ -50,9 +51,9 @@ export async function getProjectTsConfigPaths(tree: Tree):
 }
 
 /** Get options for all configurations for the passed builder target. */
-function*
-    allTargetOptions(target: workspaces.TargetDefinition):
-        Iterable<[string | undefined, Record<string, json.JsonValue|undefined>]> {
+function* allTargetOptions(
+  target: workspaces.TargetDefinition,
+): Iterable<[string | undefined, Record<string, json.JsonValue | undefined>]> {
   if (target.options) {
     yield [undefined, target.options];
   }
diff --git a/packages/core/schematics/utils/template_ast_visitor.ts b/packages/core/schematics/utils/template_ast_visitor.ts
index e9004ad3ba042..b136ea5e7c69d 100644
--- a/packages/core/schematics/utils/template_ast_visitor.ts
+++ b/packages/core/schematics/utils/template_ast_visitor.ts
@@ -6,7 +6,33 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import type {TmplAstBoundAttribute, TmplAstBoundEvent, TmplAstBoundText, TmplAstContent, TmplAstDeferredBlock, TmplAstDeferredBlockError, TmplAstDeferredBlockLoading, TmplAstDeferredBlockPlaceholder, TmplAstDeferredTrigger, TmplAstElement, TmplAstIfBlockBranch, TmplAstForLoopBlock, TmplAstForLoopBlockEmpty, TmplAstIcu, TmplAstIfBlock, TmplAstNode, TmplAstRecursiveVisitor, TmplAstReference, TmplAstSwitchBlock, TmplAstSwitchBlockCase, TmplAstTemplate, TmplAstText, TmplAstTextAttribute, TmplAstVariable, TmplAstUnknownBlock} from '@angular/compiler';
+import type {
+  TmplAstBoundAttribute,
+  TmplAstBoundEvent,
+  TmplAstBoundText,
+  TmplAstContent,
+  TmplAstDeferredBlock,
+  TmplAstDeferredBlockError,
+  TmplAstDeferredBlockLoading,
+  TmplAstDeferredBlockPlaceholder,
+  TmplAstDeferredTrigger,
+  TmplAstElement,
+  TmplAstIfBlockBranch,
+  TmplAstForLoopBlock,
+  TmplAstForLoopBlockEmpty,
+  TmplAstIcu,
+  TmplAstIfBlock,
+  TmplAstNode,
+  TmplAstRecursiveVisitor,
+  TmplAstReference,
+  TmplAstSwitchBlock,
+  TmplAstSwitchBlockCase,
+  TmplAstTemplate,
+  TmplAstText,
+  TmplAstTextAttribute,
+  TmplAstVariable,
+  TmplAstUnknownBlock,
+} from '@angular/compiler';
 
 /**
  * A base class that can be used to implement a Render3 Template AST visitor.
diff --git a/packages/core/schematics/utils/tslint/tslint_html_source_file.ts b/packages/core/schematics/utils/tslint/tslint_html_source_file.ts
index c09515cdcd674..28dafa0f04cf6 100644
--- a/packages/core/schematics/utils/tslint/tslint_html_source_file.ts
+++ b/packages/core/schematics/utils/tslint/tslint_html_source_file.ts
@@ -23,7 +23,7 @@ export function createHtmlSourceFile(filePath: string, content: string): ts.Sour
   // At the time of writing, TSLint loads files manually if the actual rule source file is not
   // equal to the source file of the replacement. This means that the replacements need proper
   // offsets without the string literal quote symbols.
-  sourceFile.getFullText = function() {
+  sourceFile.getFullText = function () {
     return sourceFile.text.substring(1, sourceFile.text.length - 1);
   };
 
diff --git a/packages/core/schematics/utils/typescript/class_declaration.ts b/packages/core/schematics/utils/typescript/class_declaration.ts
index 711c0e3d4536f..b903cde70f532 100644
--- a/packages/core/schematics/utils/typescript/class_declaration.ts
+++ b/packages/core/schematics/utils/typescript/class_declaration.ts
@@ -9,19 +9,20 @@
 import ts from 'typescript';
 
 /** Determines the base type identifiers of a specified class declaration. */
-export function getBaseTypeIdentifiers(node: ts.ClassDeclaration): ts.Identifier[]|null {
+export function getBaseTypeIdentifiers(node: ts.ClassDeclaration): ts.Identifier[] | null {
   if (!node.heritageClauses) {
     return null;
   }
 
-  return node.heritageClauses.filter(clause => clause.token === ts.SyntaxKind.ExtendsKeyword)
-      .reduce((types, clause) => types.concat(clause.types), [] as ts.ExpressionWithTypeArguments[])
-      .map(typeExpression => typeExpression.expression)
-      .filter(ts.isIdentifier);
+  return node.heritageClauses
+    .filter((clause) => clause.token === ts.SyntaxKind.ExtendsKeyword)
+    .reduce((types, clause) => types.concat(clause.types), [] as ts.ExpressionWithTypeArguments[])
+    .map((typeExpression) => typeExpression.expression)
+    .filter(ts.isIdentifier);
 }
 
 /** Gets the first found parent class declaration of a given node. */
-export function findParentClassDeclaration(node: ts.Node): ts.ClassDeclaration|null {
+export function findParentClassDeclaration(node: ts.Node): ts.ClassDeclaration | null {
   while (!ts.isClassDeclaration(node)) {
     if (ts.isSourceFile(node)) {
       return null;
diff --git a/packages/core/schematics/utils/typescript/compiler_host.ts b/packages/core/schematics/utils/typescript/compiler_host.ts
index cdb3cadcd68b6..c5d7ccc7e20b2 100644
--- a/packages/core/schematics/utils/typescript/compiler_host.ts
+++ b/packages/core/schematics/utils/typescript/compiler_host.ts
@@ -11,7 +11,7 @@ import ts from 'typescript';
 
 import {parseTsconfigFile} from './parse_tsconfig';
 
-type FakeReadFileFn = (fileName: string) => string|undefined;
+type FakeReadFileFn = (fileName: string) => string | undefined;
 
 /**
  * Creates a TypeScript program instance for a TypeScript project within
@@ -24,10 +24,19 @@ type FakeReadFileFn = (fileName: string) => string|undefined;
  * @param additionalFiles Additional file paths that should be added to the program.
  */
 export function createMigrationProgram(
-    tree: Tree, tsconfigPath: string, basePath: string, fakeFileRead?: FakeReadFileFn,
-    additionalFiles?: string[]) {
-  const {rootNames, options, host} =
-      createProgramOptions(tree, tsconfigPath, basePath, fakeFileRead, additionalFiles);
+  tree: Tree,
+  tsconfigPath: string,
+  basePath: string,
+  fakeFileRead?: FakeReadFileFn,
+  additionalFiles?: string[],
+) {
+  const {rootNames, options, host} = createProgramOptions(
+    tree,
+    tsconfigPath,
+    basePath,
+    fakeFileRead,
+    additionalFiles,
+  );
   return ts.createProgram(rootNames, options, host);
 }
 
@@ -42,8 +51,13 @@ export function createMigrationProgram(
  * @param optionOverrides Overrides of the parsed compiler options.
  */
 export function createProgramOptions(
-    tree: Tree, tsconfigPath: string, basePath: string, fakeFileRead?: FakeReadFileFn,
-    additionalFiles?: string[], optionOverrides?: ts.CompilerOptions) {
+  tree: Tree,
+  tsconfigPath: string,
+  basePath: string,
+  fakeFileRead?: FakeReadFileFn,
+  additionalFiles?: string[],
+  optionOverrides?: ts.CompilerOptions,
+) {
   // Resolve the tsconfig path to an absolute path. This is needed as TypeScript otherwise
   // is not able to resolve root directories in the given tsconfig. More details can be found
   // in the following issue: https://github.com/microsoft/TypeScript/issues/37731.
@@ -55,8 +69,11 @@ export function createProgramOptions(
 }
 
 function createMigrationCompilerHost(
-    tree: Tree, options: ts.CompilerOptions, basePath: string,
-    fakeRead?: FakeReadFileFn): ts.CompilerHost {
+  tree: Tree,
+  options: ts.CompilerOptions,
+  basePath: string,
+  fakeRead?: FakeReadFileFn,
+): ts.CompilerHost {
   const host = ts.createCompilerHost(options, true);
   const defaultReadFile = host.readFile;
 
@@ -64,15 +81,16 @@ function createMigrationCompilerHost(
   // program to be based on the file contents in the virtual file tree. Otherwise
   // if we run multiple migrations we might have intersecting changes and
   // source files.
-  host.readFile = fileName => {
+  host.readFile = (fileName) => {
     const treeRelativePath = relative(basePath, fileName);
-    let result: string|undefined = fakeRead?.(treeRelativePath);
+    let result: string | undefined = fakeRead?.(treeRelativePath);
 
     if (typeof result !== 'string') {
       // If the relative path resolved to somewhere outside of the tree, fall back to
       // TypeScript's default file reading function since the `tree` will throw an error.
-      result = treeRelativePath.startsWith('..') ? defaultReadFile.call(host, fileName) :
-                                                   tree.read(treeRelativePath)?.toString();
+      result = treeRelativePath.startsWith('..')
+        ? defaultReadFile.call(host, fileName)
+        : tree.read(treeRelativePath)?.toString();
     }
 
     // Strip BOM as otherwise TSC methods (Ex: getWidth) will return an offset,
@@ -91,10 +109,16 @@ function createMigrationCompilerHost(
  * @param program Program that includes the source file.
  */
 export function canMigrateFile(
-    basePath: string, sourceFile: ts.SourceFile, program: ts.Program): boolean {
+  basePath: string,
+  sourceFile: ts.SourceFile,
+  program: ts.Program,
+): boolean {
   // We shouldn't migrate .d.ts files, files from an external library or type checking files.
-  if (sourceFile.fileName.endsWith('.ngtypecheck.ts') || sourceFile.isDeclarationFile ||
-      program.isSourceFileFromExternalLibrary(sourceFile)) {
+  if (
+    sourceFile.fileName.endsWith('.ngtypecheck.ts') ||
+    sourceFile.isDeclarationFile ||
+    program.isSourceFileFromExternalLibrary(sourceFile)
+  ) {
     return false;
   }
 
diff --git a/packages/core/schematics/utils/typescript/decorators.ts b/packages/core/schematics/utils/typescript/decorators.ts
index 920e7e3924d07..fa59dd3123643 100644
--- a/packages/core/schematics/utils/typescript/decorators.ts
+++ b/packages/core/schematics/utils/typescript/decorators.ts
@@ -11,11 +11,15 @@ import ts from 'typescript';
 import {getImportOfIdentifier, Import} from './imports';
 
 export function getCallDecoratorImport(
-    typeChecker: ts.TypeChecker, decorator: ts.Decorator): Import|null {
+  typeChecker: ts.TypeChecker,
+  decorator: ts.Decorator,
+): Import | null {
   // Note that this does not cover the edge case where decorators are called from
   // a namespace import: e.g. "@core.Component()". This is not handled by Ngtsc either.
-  if (!ts.isCallExpression(decorator.expression) ||
-      !ts.isIdentifier(decorator.expression.expression)) {
+  if (
+    !ts.isCallExpression(decorator.expression) ||
+    !ts.isIdentifier(decorator.expression.expression)
+  ) {
     return null;
   }
 
diff --git a/packages/core/schematics/utils/typescript/find_base_classes.ts b/packages/core/schematics/utils/typescript/find_base_classes.ts
index 08837359f9c42..afea5d084f12e 100644
--- a/packages/core/schematics/utils/typescript/find_base_classes.ts
+++ b/packages/core/schematics/utils/typescript/find_base_classes.ts
@@ -11,7 +11,7 @@ import {getBaseTypeIdentifiers} from './class_declaration';
 
 /** Gets all base class declarations of the specified class declaration. */
 export function findBaseClassDeclarations(node: ts.ClassDeclaration, typeChecker: ts.TypeChecker) {
-  const result: {identifier: ts.Identifier, node: ts.ClassDeclaration}[] = [];
+  const result: {identifier: ts.Identifier; node: ts.ClassDeclaration}[] = [];
   let currentClass = node;
 
   while (currentClass) {
diff --git a/packages/core/schematics/utils/typescript/functions.ts b/packages/core/schematics/utils/typescript/functions.ts
index f5baedd6c7ba8..7305b9017b119 100644
--- a/packages/core/schematics/utils/typescript/functions.ts
+++ b/packages/core/schematics/utils/typescript/functions.ts
@@ -10,9 +10,14 @@ import ts from 'typescript';
 
 /** Checks whether a given node is a function like declaration. */
 export function isFunctionLikeDeclaration(node: ts.Node): node is ts.FunctionLikeDeclaration {
-  return ts.isFunctionDeclaration(node) || ts.isMethodDeclaration(node) ||
-      ts.isArrowFunction(node) || ts.isFunctionExpression(node) ||
-      ts.isGetAccessorDeclaration(node) || ts.isSetAccessorDeclaration(node);
+  return (
+    ts.isFunctionDeclaration(node) ||
+    ts.isMethodDeclaration(node) ||
+    ts.isArrowFunction(node) ||
+    ts.isFunctionExpression(node) ||
+    ts.isGetAccessorDeclaration(node) ||
+    ts.isSetAccessorDeclaration(node)
+  );
 }
 
 /**
@@ -20,7 +25,7 @@ export function isFunctionLikeDeclaration(node: ts.Node): node is ts.FunctionLik
  * parentheses or as expression. e.g. "(((({exp}))))()". The function should return the
  * TypeScript node referring to the inner expression. e.g "exp".
  */
-export function unwrapExpression(node: ts.Expression|ts.ParenthesizedExpression): ts.Expression {
+export function unwrapExpression(node: ts.Expression | ts.ParenthesizedExpression): ts.Expression {
   if (ts.isParenthesizedExpression(node) || ts.isAsExpression(node)) {
     return unwrapExpression(node.expression);
   } else {
diff --git a/packages/core/schematics/utils/typescript/imports.ts b/packages/core/schematics/utils/typescript/imports.ts
index dd91b65b54cdb..68642077246b3 100644
--- a/packages/core/schematics/utils/typescript/imports.ts
+++ b/packages/core/schematics/utils/typescript/imports.ts
@@ -9,14 +9,16 @@
 import ts from 'typescript';
 
 export type Import = {
-  name: string,
-  importModule: string,
-  node: ts.ImportDeclaration
+  name: string;
+  importModule: string;
+  node: ts.ImportDeclaration;
 };
 
 /** Gets import information about the specified identifier by using the Type checker. */
-export function getImportOfIdentifier(typeChecker: ts.TypeChecker, node: ts.Identifier): Import|
-    null {
+export function getImportOfIdentifier(
+  typeChecker: ts.TypeChecker,
+  node: ts.Identifier,
+): Import | null {
   const symbol = typeChecker.getSymbolAtLocation(node);
 
   if (!symbol || symbol.declarations === undefined || !symbol.declarations.length) {
@@ -39,11 +41,10 @@ export function getImportOfIdentifier(typeChecker: ts.TypeChecker, node: ts.Iden
     // Handles aliased imports: e.g. "import {Component as myComp} from ...";
     name: decl.propertyName ? decl.propertyName.text : decl.name.text,
     importModule: importDecl.moduleSpecifier.text,
-    node: importDecl
+    node: importDecl,
   };
 }
 
-
 /**
  * Gets a top-level import specifier with a specific name that is imported from a particular module.
  * E.g. given a file that looks like:
@@ -62,19 +63,25 @@ export function getImportOfIdentifier(typeChecker: ts.TypeChecker, node: ts.Iden
  *    their original name.
  */
 export function getImportSpecifier(
-    sourceFile: ts.SourceFile, moduleName: string|RegExp,
-    specifierName: string): ts.ImportSpecifier|null {
+  sourceFile: ts.SourceFile,
+  moduleName: string | RegExp,
+  specifierName: string,
+): ts.ImportSpecifier | null {
   return getImportSpecifiers(sourceFile, moduleName, [specifierName])[0] ?? null;
 }
 
 export function getImportSpecifiers(
-    sourceFile: ts.SourceFile, moduleName: string|RegExp,
-    specifierNames: string[]): ts.ImportSpecifier[] {
+  sourceFile: ts.SourceFile,
+  moduleName: string | RegExp,
+  specifierNames: string[],
+): ts.ImportSpecifier[] {
   const matches: ts.ImportSpecifier[] = [];
   for (const node of sourceFile.statements) {
     if (ts.isImportDeclaration(node) && ts.isStringLiteral(node.moduleSpecifier)) {
-      const isMatch = typeof moduleName === 'string' ? node.moduleSpecifier.text === moduleName :
-                                                       moduleName.test(node.moduleSpecifier.text);
+      const isMatch =
+        typeof moduleName === 'string'
+          ? node.moduleSpecifier.text === moduleName
+          : moduleName.test(node.moduleSpecifier.text);
       const namedBindings = node.importClause?.namedBindings;
       if (isMatch && namedBindings && ts.isNamedImports(namedBindings)) {
         for (const specifierName of specifierNames) {
@@ -90,11 +97,15 @@ export function getImportSpecifiers(
 }
 
 export function getNamedImports(
-    sourceFile: ts.SourceFile, moduleName: string|RegExp): ts.NamedImports|null {
+  sourceFile: ts.SourceFile,
+  moduleName: string | RegExp,
+): ts.NamedImports | null {
   for (const node of sourceFile.statements) {
     if (ts.isImportDeclaration(node) && ts.isStringLiteral(node.moduleSpecifier)) {
-      const isMatch = typeof moduleName === 'string' ? node.moduleSpecifier.text === moduleName :
-                                                       moduleName.test(node.moduleSpecifier.text);
+      const isMatch =
+        typeof moduleName === 'string'
+          ? node.moduleSpecifier.text === moduleName
+          : moduleName.test(node.moduleSpecifier.text);
       const namedBindings = node.importClause?.namedBindings;
       if (isMatch && namedBindings && ts.isNamedImports(namedBindings)) {
         return namedBindings;
@@ -104,7 +115,6 @@ export function getNamedImports(
   return null;
 }
 
-
 /**
  * Replaces an import inside a named imports node with a different one.
  *
@@ -113,7 +123,10 @@ export function getNamedImports(
  * @param newImportName Import that should be inserted.
  */
 export function replaceImport(
-    node: ts.NamedImports, existingImport: string, newImportName: string) {
+  node: ts.NamedImports,
+  existingImport: string,
+  newImportName: string,
+) {
   const isAlreadyImported = findImportSpecifier(node.elements, newImportName);
   if (isAlreadyImported) {
     return node;
@@ -124,15 +137,17 @@ export function replaceImport(
     return node;
   }
 
-  const importPropertyName =
-      existingImportNode.propertyName ? ts.factory.createIdentifier(newImportName) : undefined;
-  const importName = existingImportNode.propertyName ? existingImportNode.name :
-                                                       ts.factory.createIdentifier(newImportName);
+  const importPropertyName = existingImportNode.propertyName
+    ? ts.factory.createIdentifier(newImportName)
+    : undefined;
+  const importName = existingImportNode.propertyName
+    ? existingImportNode.name
+    : ts.factory.createIdentifier(newImportName);
 
   return ts.factory.updateNamedImports(node, [
-    ...node.elements.filter(current => current !== existingImportNode),
+    ...node.elements.filter((current) => current !== existingImportNode),
     // Create a new import while trying to preserve the alias of the old one.
-    ts.factory.createImportSpecifier(false, importPropertyName, importName)
+    ts.factory.createImportSpecifier(false, importPropertyName, importName),
   ]);
 }
 
@@ -146,14 +161,16 @@ export function replaceImport(
  */
 export function removeSymbolFromNamedImports(node: ts.NamedImports, symbol: ts.ImportSpecifier) {
   return ts.factory.updateNamedImports(node, [
-    ...node.elements.filter(current => current !== symbol),
+    ...node.elements.filter((current) => current !== symbol),
   ]);
 }
 
 /** Finds an import specifier with a particular name. */
 export function findImportSpecifier(
-    nodes: ts.NodeArray<ts.ImportSpecifier>, specifierName: string): ts.ImportSpecifier|undefined {
-  return nodes.find(element => {
+  nodes: ts.NodeArray<ts.ImportSpecifier>,
+  specifierName: string,
+): ts.ImportSpecifier | undefined {
+  return nodes.find((element) => {
     const {name, propertyName} = element;
     return propertyName ? propertyName.text === specifierName : name.text === specifierName;
   });
diff --git a/packages/core/schematics/utils/typescript/nodes.ts b/packages/core/schematics/utils/typescript/nodes.ts
index 11798c49a931b..2a8ad43d0cbcd 100644
--- a/packages/core/schematics/utils/typescript/nodes.ts
+++ b/packages/core/schematics/utils/typescript/nodes.ts
@@ -10,13 +10,18 @@ import ts from 'typescript';
 
 /** Checks whether the given TypeScript node has the specified modifier set. */
 export function hasModifier(node: ts.Node, modifierKind: ts.SyntaxKind) {
-  return ts.canHaveModifiers(node) && !!node.modifiers &&
-      node.modifiers.some(m => m.kind === modifierKind);
+  return (
+    ts.canHaveModifiers(node) &&
+    !!node.modifiers &&
+    node.modifiers.some((m) => m.kind === modifierKind)
+  );
 }
 
 /** Find the closest parent node of a particular kind. */
-export function closestNode<T extends ts.Node>(node: ts.Node, predicate: (n: ts.Node) => n is T): T|
-    null {
+export function closestNode<T extends ts.Node>(
+  node: ts.Node,
+  predicate: (n: ts.Node) => n is T,
+): T | null {
   let current = node.parent;
 
   while (current && !ts.isSourceFile(current)) {
@@ -45,8 +50,11 @@ export function isNullCheck(node: ts.Node): boolean {
 
   // `foo.bar && foo.bar.parent && foo.bar.parent.value`
   // where `node` is `foo.bar`.
-  if (node.parent.parent && ts.isBinaryExpression(node.parent.parent) &&
-      node.parent.parent.left === node.parent) {
+  if (
+    node.parent.parent &&
+    ts.isBinaryExpression(node.parent.parent) &&
+    node.parent.parent.left === node.parent
+  ) {
     return true;
   }
 
@@ -65,6 +73,10 @@ export function isNullCheck(node: ts.Node): boolean {
 
 /** Checks whether a property access is safe (e.g. `foo.parent?.value`). */
 export function isSafeAccess(node: ts.Node): boolean {
-  return node.parent != null && ts.isPropertyAccessExpression(node.parent) &&
-      node.parent.expression === node && node.parent.questionDotToken != null;
+  return (
+    node.parent != null &&
+    ts.isPropertyAccessExpression(node.parent) &&
+    node.parent.expression === node &&
+    node.parent.questionDotToken != null
+  );
 }
diff --git a/packages/core/schematics/utils/typescript/property_name.ts b/packages/core/schematics/utils/typescript/property_name.ts
index 746d6ae48d4af..df8ab42908cc1 100644
--- a/packages/core/schematics/utils/typescript/property_name.ts
+++ b/packages/core/schematics/utils/typescript/property_name.ts
@@ -15,7 +15,7 @@ type PropertyNameWithText = Exclude<ts.PropertyName, ts.ComputedPropertyName>;
  * Gets the text of the given property name. Returns null if the property
  * name couldn't be determined statically.
  */
-export function getPropertyNameText(node: ts.PropertyName): string|null {
+export function getPropertyNameText(node: ts.PropertyName): string | null {
   if (ts.isIdentifier(node) || ts.isStringLiteralLike(node)) {
     return node.text;
   }
diff --git a/packages/core/schematics/utils/typescript/symbol.ts b/packages/core/schematics/utils/typescript/symbol.ts
index afc62902305ad..82228e9269717 100644
--- a/packages/core/schematics/utils/typescript/symbol.ts
+++ b/packages/core/schematics/utils/typescript/symbol.ts
@@ -8,8 +8,10 @@
 
 import ts from 'typescript';
 
-export function getValueSymbolOfDeclaration(node: ts.Node, typeChecker: ts.TypeChecker): ts.Symbol|
-    undefined {
+export function getValueSymbolOfDeclaration(
+  node: ts.Node,
+  typeChecker: ts.TypeChecker,
+): ts.Symbol | undefined {
   let symbol = typeChecker.getSymbolAtLocation(node);
 
   while (symbol && symbol.flags & ts.SymbolFlags.Alias) {
@@ -21,11 +23,16 @@ export function getValueSymbolOfDeclaration(node: ts.Node, typeChecker: ts.TypeC
 
 /** Checks whether a node is referring to a specific import specifier. */
 export function isReferenceToImport(
-    typeChecker: ts.TypeChecker, node: ts.Node, importSpecifier: ts.ImportSpecifier): boolean {
+  typeChecker: ts.TypeChecker,
+  node: ts.Node,
+  importSpecifier: ts.ImportSpecifier,
+): boolean {
   const nodeSymbol = typeChecker.getTypeAtLocation(node).getSymbol();
   const importSymbol = typeChecker.getTypeAtLocation(importSpecifier).getSymbol();
-  return !!(nodeSymbol?.declarations?.[0] && importSymbol?.declarations?.[0]) &&
-      nodeSymbol.declarations[0] === importSymbol.declarations[0];
+  return (
+    !!(nodeSymbol?.declarations?.[0] && importSymbol?.declarations?.[0]) &&
+    nodeSymbol.declarations[0] === importSymbol.declarations[0]
+  );
 }
 
 /** Checks whether a node's type is nullable (`null`, `undefined` or `void`). */
@@ -44,9 +51,11 @@ export function isNullableType(typeChecker: ts.TypeChecker, node: ts.Node) {
   // through all of its sub-nodes and look for nullable types.
   if (typeNode) {
     (function walk(current: ts.Node) {
-      if (current.kind === ts.SyntaxKind.NullKeyword ||
-          current.kind === ts.SyntaxKind.UndefinedKeyword ||
-          current.kind === ts.SyntaxKind.VoidKeyword) {
+      if (
+        current.kind === ts.SyntaxKind.NullKeyword ||
+        current.kind === ts.SyntaxKind.UndefinedKeyword ||
+        current.kind === ts.SyntaxKind.VoidKeyword
+      ) {
         hasSeenNullableType = true;
         // Note that we don't descend into type literals, because it may cause
         // us to mis-identify the root type as nullable, because it has a nullable
@@ -65,10 +74,14 @@ export function isNullableType(typeChecker: ts.TypeChecker, node: ts.Node) {
  * type that has the same name as one of the passed-in ones.
  */
 export function hasOneOfTypes(
-    typeChecker: ts.TypeChecker, node: ts.Node, types: string[]): boolean {
+  typeChecker: ts.TypeChecker,
+  node: ts.Node,
+  types: string[],
+): boolean {
   const type = typeChecker.getTypeAtLocation(node);
-  const typeNode =
-      type ? typeChecker.typeToTypeNode(type, undefined, ts.NodeBuilderFlags.None) : undefined;
+  const typeNode = type
+    ? typeChecker.typeToTypeNode(type, undefined, ts.NodeBuilderFlags.None)
+    : undefined;
   let hasMatch = false;
   if (typeNode) {
     (function walk(current: ts.Node) {
diff --git a/packages/core/src/application/application_config.ts b/packages/core/src/application/application_config.ts
index 587c9f0f3fef9..d847dbe3e4299 100644
--- a/packages/core/src/application/application_config.ts
+++ b/packages/core/src/application/application_config.ts
@@ -1,4 +1,3 @@
-
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -18,7 +17,7 @@ export interface ApplicationConfig {
   /**
    * List of providers that should be available to the root component and all its children.
    */
-  providers: Array<Provider|EnvironmentProviders>;
+  providers: Array<Provider | EnvironmentProviders>;
 }
 
 /**
@@ -30,7 +29,10 @@ export interface ApplicationConfig {
  * @publicApi
  */
 export function mergeApplicationConfig(...configs: ApplicationConfig[]): ApplicationConfig {
-  return configs.reduce((prev, curr) => {
-    return Object.assign(prev, curr, {providers: [...prev.providers, ...curr.providers]});
-  }, {providers: []});
+  return configs.reduce(
+    (prev, curr) => {
+      return Object.assign(prev, curr, {providers: [...prev.providers, ...curr.providers]});
+    },
+    {providers: []},
+  );
 }
diff --git a/packages/core/src/application/application_init.ts b/packages/core/src/application/application_init.ts
index 205c975073879..61f0c6a7857ce 100644
--- a/packages/core/src/application/application_init.ts
+++ b/packages/core/src/application/application_init.ts
@@ -131,9 +131,9 @@ import {isPromise, isSubscribable} from '../util/lang';
  *
  * @publicApi
  */
-export const APP_INITIALIZER =
-    new InjectionToken<ReadonlyArray<() => Observable<unknown>| Promise<unknown>| void>>(
-        ngDevMode ? 'Application Initializer' : '');
+export const APP_INITIALIZER = new InjectionToken<
+  ReadonlyArray<() => Observable<unknown> | Promise<unknown> | void>
+>(ngDevMode ? 'Application Initializer' : '');
 
 /**
  * A class that reflects the state of running {@link APP_INITIALIZER} functions.
@@ -159,11 +159,12 @@ export class ApplicationInitStatus {
   constructor() {
     if ((typeof ngDevMode === 'undefined' || ngDevMode) && !Array.isArray(this.appInits)) {
       throw new RuntimeError(
-          RuntimeErrorCode.INVALID_MULTI_PROVIDER,
-          'Unexpected type of the `APP_INITIALIZER` token value ' +
-              `(expected an array, but got ${typeof this.appInits}). ` +
-              'Please check that the `APP_INITIALIZER` token is configured as a ' +
-              '`multi: true` provider.');
+        RuntimeErrorCode.INVALID_MULTI_PROVIDER,
+        'Unexpected type of the `APP_INITIALIZER` token value ' +
+          `(expected an array, but got ${typeof this.appInits}). ` +
+          'Please check that the `APP_INITIALIZER` token is configured as a ' +
+          '`multi: true` provider.',
+      );
     }
   }
 
@@ -193,12 +194,12 @@ export class ApplicationInitStatus {
     };
 
     Promise.all(asyncInitPromises)
-        .then(() => {
-          complete();
-        })
-        .catch(e => {
-          this.reject(e);
-        });
+      .then(() => {
+        complete();
+      })
+      .catch((e) => {
+        this.reject(e);
+      });
 
     if (asyncInitPromises.length === 0) {
       complete();
diff --git a/packages/core/src/application/application_ngmodule_factory_compiler.ts b/packages/core/src/application/application_ngmodule_factory_compiler.ts
index 7864f7f20da4f..fa38901bdb484 100644
--- a/packages/core/src/application/application_ngmodule_factory_compiler.ts
+++ b/packages/core/src/application/application_ngmodule_factory_compiler.ts
@@ -11,14 +11,19 @@ import {Injector} from '../di/injector';
 import {Type} from '../interface/type';
 import {COMPILER_OPTIONS, CompilerOptions} from '../linker/compiler';
 import {NgModuleFactory} from '../linker/ng_module_factory';
-import {isComponentResourceResolutionQueueEmpty, resolveComponentResources} from '../metadata/resource_loading';
+import {
+  isComponentResourceResolutionQueueEmpty,
+  resolveComponentResources,
+} from '../metadata/resource_loading';
 import {assertNgModuleType} from '../render3/assert';
 import {setJitOptions} from '../render3/jit/jit_options';
 import {NgModuleFactory as R3NgModuleFactory} from '../render3/ng_module_ref';
 
 export function compileNgModuleFactory<M>(
-    injector: Injector, options: CompilerOptions,
-    moduleType: Type<M>): Promise<NgModuleFactory<M>> {
+  injector: Injector,
+  options: CompilerOptions,
+  moduleType: Type<M>,
+): Promise<NgModuleFactory<M>> {
   ngDevMode && assertNgModuleType(moduleType);
 
   const moduleFactory = new R3NgModuleFactory(moduleType);
@@ -34,8 +39,8 @@ export function compileNgModuleFactory<M>(
   // 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)),
+    defaultEncapsulation: _lastDefined(compilerOptions.map((opts) => opts.defaultEncapsulation)),
+    preserveWhitespaces: _lastDefined(compilerOptions.map((opts) => opts.preserveWhitespaces)),
   });
 
   if (isComponentResourceResolutionQueueEmpty()) {
@@ -61,11 +66,12 @@ export function compileNgModuleFactory<M>(
   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);
+  return resolveComponentResources((url) => Promise.resolve(resourceLoader.get(url))).then(
+    () => moduleFactory,
+  );
 }
 
-function _lastDefined<T>(args: T[]): T|undefined {
+function _lastDefined<T>(args: T[]): T | undefined {
   for (let i = args.length - 1; i >= 0; i--) {
     if (args[i] !== undefined) {
       return args[i];
diff --git a/packages/core/src/application/application_ref.ts b/packages/core/src/application/application_ref.ts
index f0995da2406aa..4b097b827b69f 100644
--- a/packages/core/src/application/application_ref.ts
+++ b/packages/core/src/application/application_ref.ts
@@ -8,7 +8,10 @@
 
 import '../util/ng_jit_mode';
 
-import {setActiveConsumer, setThrowInvalidWriteToSignalError} from '@angular/core/primitives/signals';
+import {
+  setActiveConsumer,
+  setThrowInvalidWriteToSignalError,
+} from '@angular/core/primitives/signals';
 import {Observable, Subject} from 'rxjs';
 import {first, map} from 'rxjs/operators';
 
@@ -51,9 +54,9 @@ import {ApplicationInitStatus} from './application_init';
  *
  * @publicApi
  */
-export const APP_BOOTSTRAP_LISTENER =
-    new InjectionToken<ReadonlyArray<(compRef: ComponentRef<any>) => void>>(
-        ngDevMode ? 'appBootstrapListener' : '');
+export const APP_BOOTSTRAP_LISTENER = new InjectionToken<
+  ReadonlyArray<(compRef: ComponentRef<any>) => void>
+>(ngDevMode ? 'appBootstrapListener' : '');
 
 export function publishDefaultGlobalUtils() {
   ngDevMode && _publishDefaultGlobalUtils();
@@ -65,10 +68,11 @@ export function publishDefaultGlobalUtils() {
 export function publishSignalConfiguration(): void {
   setThrowInvalidWriteToSignalError(() => {
     throw new RuntimeError(
-        RuntimeErrorCode.SIGNAL_WRITE_FROM_ILLEGAL_CONTEXT,
-        ngDevMode &&
-            'Writing to signals is not allowed in a `computed` or an `effect` by default. ' +
-                'Use `allowSignalWrites` in the `CreateEffectOptions` to enable this inside effects.');
+      RuntimeErrorCode.SIGNAL_WRITE_FROM_ILLEGAL_CONTEXT,
+      ngDevMode &&
+        'Writing to signals is not allowed in a `computed` or an `effect` by default. ' +
+          'Use `allowSignalWrites` in the `CreateEffectOptions` to enable this inside effects.',
+    );
   });
 }
 
@@ -83,7 +87,10 @@ export function isBoundToModule<C>(cf: ComponentFactory<C>): boolean {
  * @publicApi
  */
 export class NgProbeToken {
-  constructor(public name: string, public token: any) {}
+  constructor(
+    public name: string,
+    public token: any,
+  ) {}
 }
 
 /**
@@ -99,7 +106,7 @@ export interface BootstrapOptions {
    * - `zone.js` - Use default `NgZone` which requires `Zone.js`.
    * - `noop` - Use `NoopNgZone` which does nothing.
    */
-  ngZone?: NgZone|'zone.js'|'noop';
+  ngZone?: NgZone | 'zone.js' | 'noop';
 
   /**
    * Optionally specify coalescing event change detections or not.
@@ -163,7 +170,10 @@ export interface BootstrapOptions {
 const MAXIMUM_REFRESH_RERUNS = 10;
 
 export function _callAndReportToErrorHandler(
-    errorHandler: ErrorHandler, ngZone: NgZone, callback: () => any): any {
+  errorHandler: ErrorHandler,
+  ngZone: NgZone,
+  callback: () => any,
+): any {
   try {
     const result = callback();
     if (isPromise(result)) {
@@ -182,7 +192,7 @@ export function _callAndReportToErrorHandler(
   }
 }
 
-export function optionsReducer<T extends Object>(dst: T, objs: T|T[]): T {
+export function optionsReducer<T extends Object>(dst: T, objs: T | T[]): T {
   if (Array.isArray(objs)) {
     return objs.reduce(optionsReducer, dst);
   }
@@ -323,8 +333,9 @@ export class ApplicationRef {
   /**
    * Returns an Observable that indicates when the application is stable or unstable.
    */
-  public readonly isStable: Observable<boolean> =
-      inject(PendingTasks).hasPendingTasks.pipe(map(pending => !pending));
+  public readonly isStable: Observable<boolean> = inject(PendingTasks).hasPendingTasks.pipe(
+    map((pending) => !pending),
+  );
 
   private readonly _injector = inject(EnvironmentInjector);
   /**
@@ -371,7 +382,7 @@ export class ApplicationRef {
    *
    * {@example core/ts/platform/platform.ts region='domNode'}
    */
-  bootstrap<C>(component: Type<C>, rootSelectorOrNode?: string|any): ComponentRef<C>;
+  bootstrap<C>(component: Type<C>, rootSelectorOrNode?: string | any): ComponentRef<C>;
 
   /**
    * Bootstrap a component onto the element identified by its selector or, optionally, to a
@@ -413,8 +424,10 @@ export class ApplicationRef {
    * @deprecated Passing Component factories as the `Application.bootstrap` function argument is
    *     deprecated. Pass Component Types instead.
    */
-  bootstrap<C>(componentFactory: ComponentFactory<C>, rootSelectorOrNode?: string|any):
-      ComponentRef<C>;
+  bootstrap<C>(
+    componentFactory: ComponentFactory<C>,
+    rootSelectorOrNode?: string | any,
+  ): ComponentRef<C>;
 
   /**
    * Bootstrap a component onto the element identified by its selector or, optionally, to a
@@ -453,19 +466,22 @@ export class ApplicationRef {
    *
    * {@example core/ts/platform/platform.ts region='domNode'}
    */
-  bootstrap<C>(componentOrFactory: ComponentFactory<C>|Type<C>, rootSelectorOrNode?: string|any):
-      ComponentRef<C> {
+  bootstrap<C>(
+    componentOrFactory: ComponentFactory<C> | Type<C>,
+    rootSelectorOrNode?: string | any,
+  ): ComponentRef<C> {
     (typeof ngDevMode === 'undefined' || ngDevMode) && this.warnIfDestroyed();
     const isComponentFactory = componentOrFactory instanceof ComponentFactory;
     const initStatus = this._injector.get(ApplicationInitStatus);
 
     if (!initStatus.done) {
       const standalone = !isComponentFactory && isStandalone(componentOrFactory);
-      const errorMessage = (typeof ngDevMode === 'undefined' || ngDevMode) &&
-          'Cannot bootstrap as there are still asynchronous initializers running.' +
-              (standalone ?
-                   '' :
-                   ' Bootstrap components in the `ngDoBootstrap` method of the root module.');
+      const errorMessage =
+        (typeof ngDevMode === 'undefined' || ngDevMode) &&
+        'Cannot bootstrap as there are still asynchronous initializers running.' +
+          (standalone
+            ? ''
+            : ' Bootstrap components in the `ngDoBootstrap` method of the root module.');
       throw new RuntimeError(RuntimeErrorCode.ASYNC_INITIALIZERS_STILL_RUNNING, errorMessage);
     }
 
@@ -479,8 +495,9 @@ export class ApplicationRef {
     this.componentTypes.push(componentFactory.componentType);
 
     // Create a factory associated with the current module if it's not bound to some other
-    const ngModule =
-        isBoundToModule(componentFactory) ? undefined : this._injector.get(NgModuleRef);
+    const ngModule = isBoundToModule(componentFactory)
+      ? undefined
+      : this._injector.get(NgModuleRef);
     const selectorOrNode = rootSelectorOrNode || componentFactory.selector;
     const compRef = componentFactory.create(Injector.NULL, [], selectorOrNode, ngModule);
     const nativeElement = compRef.location.nativeElement;
@@ -520,8 +537,9 @@ export class ApplicationRef {
     (typeof ngDevMode === 'undefined' || ngDevMode) && this.warnIfDestroyed();
     if (this._runningTick) {
       throw new RuntimeError(
-          RuntimeErrorCode.RECURSIVE_APPLICATION_REF_TICK,
-          ngDevMode && 'ApplicationRef.tick is called recursively');
+        RuntimeErrorCode.RECURSIVE_APPLICATION_REF_TICK,
+        ngDevMode && 'ApplicationRef.tick is called recursively',
+      );
     }
 
     const prevConsumer = setActiveConsumer(null);
@@ -530,7 +548,7 @@ export class ApplicationRef {
 
       this.detectChangesInAttachedViews(refreshViews);
 
-      if ((typeof ngDevMode === 'undefined' || ngDevMode)) {
+      if (typeof ngDevMode === 'undefined' || ngDevMode) {
         for (let view of this._views) {
           view.checkNoChanges();
         }
@@ -554,7 +572,11 @@ export class ApplicationRef {
         this.beforeRender.next(isFirstPass);
         for (let {_lView, notifyErrorHandler} of this._views) {
           detectChangesInViewIfRequired(
-              _lView, notifyErrorHandler, isFirstPass, this.zonelessEnabled);
+            _lView,
+            notifyErrorHandler,
+            isFirstPass,
+            this.zonelessEnabled,
+          );
         }
       }
       runs++;
@@ -562,27 +584,33 @@ export class ApplicationRef {
       afterRenderEffectManager.executeInternalCallbacks();
       // If we have a newly dirty view after running internal callbacks, recheck the views again
       // before running user-provided callbacks
-      if ([...this.externalTestViews.keys(), ...this._views].some(
-              ({_lView}) => requiresRefreshOrTraversal(_lView))) {
+      if (
+        [...this.externalTestViews.keys(), ...this._views].some(({_lView}) =>
+          requiresRefreshOrTraversal(_lView),
+        )
+      ) {
         continue;
       }
 
       afterRenderEffectManager.execute();
       // If after running all afterRender callbacks we have no more views that need to be refreshed,
       // we can break out of the loop
-      if (![...this.externalTestViews.keys(), ...this._views].some(
-              ({_lView}) => requiresRefreshOrTraversal(_lView))) {
+      if (
+        ![...this.externalTestViews.keys(), ...this._views].some(({_lView}) =>
+          requiresRefreshOrTraversal(_lView),
+        )
+      ) {
         break;
       }
     }
 
     if ((typeof ngDevMode === 'undefined' || ngDevMode) && runs >= MAXIMUM_REFRESH_RERUNS) {
       throw new RuntimeError(
-          RuntimeErrorCode.INFINITE_CHANGE_DETECTION,
-          ngDevMode &&
-              'Infinite change detection while refreshing application views. ' +
-                  'Ensure views are not calling `markForCheck` on every template execution or ' +
-                  'that afterRender hooks always mark views for check.',
+        RuntimeErrorCode.INFINITE_CHANGE_DETECTION,
+        ngDevMode &&
+          'Infinite change detection while refreshing application views. ' +
+            'Ensure views are not calling `markForCheck` on every template execution or ' +
+            'that afterRender hooks always mark views for check.',
       );
     }
   }
@@ -594,7 +622,7 @@ export class ApplicationRef {
    */
   attachView(viewRef: ViewRef): void {
     (typeof ngDevMode === 'undefined' || ngDevMode) && this.warnIfDestroyed();
-    const view = (viewRef as InternalViewRef<unknown>);
+    const view = viewRef as InternalViewRef<unknown>;
     this._views.push(view);
     view.attachToAppRef(this);
   }
@@ -604,7 +632,7 @@ export class ApplicationRef {
    */
   detachView(viewRef: ViewRef): void {
     (typeof ngDevMode === 'undefined' || ngDevMode) && this.warnIfDestroyed();
-    const view = (viewRef as InternalViewRef<unknown>);
+    const view = viewRef as InternalViewRef<unknown>;
     remove(this._views, view);
     view.detachFromAppRef();
   }
@@ -617,11 +645,12 @@ export class ApplicationRef {
     const listeners = this._injector.get(APP_BOOTSTRAP_LISTENER, []);
     if (ngDevMode && !Array.isArray(listeners)) {
       throw new RuntimeError(
-          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.');
+        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));
   }
@@ -632,7 +661,7 @@ export class ApplicationRef {
 
     try {
       // Call all the lifecycle hooks.
-      this._destroyListeners.forEach(listener => listener());
+      this._destroyListeners.forEach((listener) => listener());
 
       // Destroy all registered views.
       this._views.slice().forEach((view) => view.destroy());
@@ -667,13 +696,14 @@ export class ApplicationRef {
   destroy(): void {
     if (this._destroyed) {
       throw new RuntimeError(
-          RuntimeErrorCode.APPLICATION_REF_ALREADY_DESTROYED,
-          ngDevMode && 'This instance of the `ApplicationRef` has already been destroyed.');
+        RuntimeErrorCode.APPLICATION_REF_ALREADY_DESTROYED,
+        ngDevMode && 'This instance of the `ApplicationRef` has already been destroyed.',
+      );
     }
 
     // This is a temporary type to represent an instance of an R3Injector, which can be destroyed.
     // The type will be replaced with a different one once destroyable injector type is available.
-    type DestroyableInjector = Injector&{destroy?: Function, destroyed?: boolean};
+    type DestroyableInjector = Injector & {destroy?: Function; destroyed?: boolean};
 
     const injector = this._injector as DestroyableInjector;
 
@@ -694,9 +724,12 @@ export class ApplicationRef {
 
   private warnIfDestroyed() {
     if ((typeof ngDevMode === 'undefined' || ngDevMode) && this._destroyed) {
-      console.warn(formatRuntimeError(
+      console.warn(
+        formatRuntimeError(
           RuntimeErrorCode.APPLICATION_REF_ALREADY_DESTROYED,
-          'This instance of the `ApplicationRef` has already been destroyed.'));
+          'This instance of the `ApplicationRef` has already been destroyed.',
+        ),
+      );
     }
   }
 }
@@ -708,7 +741,7 @@ export function remove<T>(list: T[], el: T): void {
   }
 }
 
-let whenStableStore: WeakMap<ApplicationRef, Promise<void>>|undefined;
+let whenStableStore: WeakMap<ApplicationRef, Promise<void>> | undefined;
 /**
  * Returns a Promise that resolves when the application becomes stable after this method is called
  * the first time.
@@ -720,8 +753,10 @@ export function whenStable(applicationRef: ApplicationRef): Promise<void> {
     return cachedWhenStable;
   }
 
-  const whenStablePromise =
-      applicationRef.isStable.pipe(first((isStable) => isStable)).toPromise().then(() => void 0);
+  const whenStablePromise = applicationRef.isStable
+    .pipe(first((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`.
@@ -730,20 +765,24 @@ export function whenStable(applicationRef: ApplicationRef): Promise<void> {
   return whenStablePromise;
 }
 
-
 export function detectChangesInViewIfRequired(
-    lView: LView, notifyErrorHandler: boolean, isFirstPass: boolean, zonelessEnabled: boolean) {
+  lView: LView,
+  notifyErrorHandler: boolean,
+  isFirstPass: boolean,
+  zonelessEnabled: boolean,
+) {
   // When re-checking, only check views which actually need it.
   if (!isFirstPass && !requiresRefreshOrTraversal(lView)) {
     return;
   }
 
-  const mode = (isFirstPass && !zonelessEnabled) ?
-      // The first pass is always in Global mode, which includes `CheckAlways` views.
-      // When using zoneless, all root views must be explicitly marked for refresh, even if they are
-      // `CheckAlways`.
-      ChangeDetectionMode.Global :
-      // Only refresh views with the `RefreshView` flag or views is a changed signal
-      ChangeDetectionMode.Targeted;
+  const mode =
+    isFirstPass && !zonelessEnabled
+      ? // The first pass is always in Global mode, which includes `CheckAlways` views.
+        // When using zoneless, all root views must be explicitly marked for refresh, even if they are
+        // `CheckAlways`.
+        ChangeDetectionMode.Global
+      : // Only refresh views with the `RefreshView` flag or views is a changed signal
+        ChangeDetectionMode.Targeted;
   detectChangesInternal(lView, notifyErrorHandler, mode);
 }
diff --git a/packages/core/src/application/application_tokens.ts b/packages/core/src/application/application_tokens.ts
index 2edeb8bedad4c..9711e9378e6fe 100644
--- a/packages/core/src/application/application_tokens.ts
+++ b/packages/core/src/application/application_tokens.ts
@@ -51,8 +51,9 @@ const DEFAULT_APP_ID = 'ng';
  * A function that is executed when a platform is initialized.
  * @publicApi
  */
-export const PLATFORM_INITIALIZER =
-    new InjectionToken<ReadonlyArray<() => void>>(ngDevMode ? 'Platform Initializer' : '');
+export const PLATFORM_INITIALIZER = new InjectionToken<ReadonlyArray<() => void>>(
+  ngDevMode ? 'Platform Initializer' : '',
+);
 
 /**
  * A token that indicates an opaque platform ID.
@@ -60,7 +61,7 @@ export const PLATFORM_INITIALIZER =
  */
 export const PLATFORM_ID = new InjectionToken<Object>(ngDevMode ? 'Platform ID' : '', {
   providedIn: 'platform',
-  factory: () => 'unknown',  // set a default platform name, when none set explicitly
+  factory: () => 'unknown', // set a default platform name, when none set explicitly
 });
 
 /**
@@ -69,8 +70,9 @@ export const PLATFORM_ID = new InjectionToken<Object>(ngDevMode ? 'Platform ID'
  * @publicApi
  * @deprecated
  */
-export const PACKAGE_ROOT_URL =
-    new InjectionToken<string>(ngDevMode ? 'Application Packages Root URL' : '');
+export const PACKAGE_ROOT_URL = new InjectionToken<string>(
+  ngDevMode ? 'Application Packages Root URL' : '',
+);
 
 // We keep this token here, rather than the animations package, so that modules that only care
 // about which animations module is loaded (e.g. the CDK) can retrieve it without having to
@@ -81,8 +83,9 @@ export const PACKAGE_ROOT_URL =
  * module has been loaded.
  * @publicApi
  */
-export const ANIMATION_MODULE_TYPE = new InjectionToken<'NoopAnimations'|'BrowserAnimations'>(
-    ngDevMode ? 'AnimationModuleType' : '');
+export const ANIMATION_MODULE_TYPE = new InjectionToken<'NoopAnimations' | 'BrowserAnimations'>(
+  ngDevMode ? 'AnimationModuleType' : '',
+);
 
 // TODO(crisbeto): link to CSP guide here.
 /**
@@ -92,7 +95,7 @@ export const ANIMATION_MODULE_TYPE = new InjectionToken<'NoopAnimations'|'Browse
  *
  * @publicApi
  */
-export const CSP_NONCE = new InjectionToken<string|null>(ngDevMode ? 'CSP nonce' : '', {
+export const CSP_NONCE = new InjectionToken<string | null>(ngDevMode ? 'CSP nonce' : '', {
   providedIn: 'root',
   factory: () => {
     // Ideally we wouldn't have to use `querySelector` here since we know that the nonce will be on
@@ -130,10 +133,10 @@ export const CSP_NONCE = new InjectionToken<string|null>(ngDevMode ? 'CSP nonce'
  * @publicApi
  */
 export type ImageConfig = {
-  breakpoints?: number[],
-  placeholderResolution?: number,
-  disableImageSizeWarning?: boolean,
-  disableImageLazyLoadWarning?: boolean,
+  breakpoints?: number[];
+  placeholderResolution?: number;
+  disableImageSizeWarning?: boolean;
+  disableImageLazyLoadWarning?: boolean;
 };
 
 export const IMAGE_CONFIG_DEFAULTS: ImageConfig = {
@@ -152,5 +155,7 @@ export const IMAGE_CONFIG_DEFAULTS: ImageConfig = {
  * @see {@link ImageConfig}
  * @publicApi
  */
-export const IMAGE_CONFIG = new InjectionToken<ImageConfig>(
-    ngDevMode ? 'ImageConfig' : '', {providedIn: 'root', factory: () => IMAGE_CONFIG_DEFAULTS});
+export const IMAGE_CONFIG = new InjectionToken<ImageConfig>(ngDevMode ? 'ImageConfig' : '', {
+  providedIn: 'root',
+  factory: () => IMAGE_CONFIG_DEFAULTS,
+});
diff --git a/packages/core/src/application/create_application.ts b/packages/core/src/application/create_application.ts
index c9970197d6987..a13534bc52649 100644
--- a/packages/core/src/application/create_application.ts
+++ b/packages/core/src/application/create_application.ts
@@ -41,7 +41,7 @@ import {_callAndReportToErrorHandler, ApplicationRef} from './application_ref';
 
 export function internalCreateApplication(config: {
   rootComponent?: Type<unknown>;
-  appProviders?: Array<Provider|EnvironmentProviders>;
+  appProviders?: Array<Provider | EnvironmentProviders>;
   platformProviders?: Provider[];
 }): Promise<ApplicationRef> {
   try {
@@ -55,14 +55,11 @@ export function internalCreateApplication(config: {
 
     // Create root application injector based on a set of providers configured at the platform
     // bootstrap level as well as providers passed to the bootstrap call by a user.
-    const allAppProviders = [
-      provideZoneChangeDetection(),
-      ...(appProviders || []),
-    ];
+    const allAppProviders = [provideZoneChangeDetection(), ...(appProviders || [])];
     const adapter = new EnvironmentNgModuleRefAdapter({
       providers: allAppProviders,
       parent: platformInjector as EnvironmentInjector,
-      debugName: (typeof ngDevMode === 'undefined' || ngDevMode) ? 'Environment Injector' : '',
+      debugName: typeof ngDevMode === 'undefined' || ngDevMode ? 'Environment Injector' : '',
       // We skip environment initializers because we need to run them inside the NgZone, which
       // happens after we get the NgZone instance from the Injector.
       runEnvironmentInitializers: false,
@@ -72,11 +69,12 @@ export function internalCreateApplication(config: {
 
     return ngZone.run(() => {
       envInjector.resolveInjectorInitializers();
-      const exceptionHandler: ErrorHandler|null = envInjector.get(ErrorHandler, null);
+      const exceptionHandler: ErrorHandler | null = envInjector.get(ErrorHandler, null);
       if ((typeof ngDevMode === 'undefined' || ngDevMode) && !exceptionHandler) {
         throw new RuntimeError(
-            RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP,
-            'No `ErrorHandler` found in the Dependency Injection tree.');
+          RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP,
+          'No `ErrorHandler` found in the Dependency Injection tree.',
+        );
       }
 
       let onErrorSubscription: Subscription;
@@ -84,7 +82,7 @@ export function internalCreateApplication(config: {
         onErrorSubscription = ngZone.onError.subscribe({
           next: (error: any) => {
             exceptionHandler!.handleError(error);
-          }
+          },
         });
       });
 
diff --git a/packages/core/src/authoring.ts b/packages/core/src/authoring.ts
index af0bb0087fbfe..1c2390a90620b 100644
--- a/packages/core/src/authoring.ts
+++ b/packages/core/src/authoring.ts
@@ -10,11 +10,21 @@
 // https://docs.google.com/document/d/1RXb1wYwsbJotO1KBgSDsAtKpduGmIHod9ADxuXcAvV4/edit?tab=t.0.
 
 export {InputFunction} from './authoring/input/input';
-export {InputOptions, InputOptionsWithoutTransform, InputOptionsWithTransform, InputSignal, InputSignalWithTransform, ɵINPUT_SIGNAL_BRAND_WRITE_TYPE} from './authoring/input/input_signal';
+export {
+  InputOptions,
+  InputOptionsWithoutTransform,
+  InputOptionsWithTransform,
+  InputSignal,
+  InputSignalWithTransform,
+  ɵINPUT_SIGNAL_BRAND_WRITE_TYPE,
+} from './authoring/input/input_signal';
 export {ɵUnwrapDirectiveSignalInputs} from './authoring/input/input_type_checking';
 export {ModelFunction} from './authoring/model/model';
 export {ModelOptions, ModelSignal} from './authoring/model/model_signal';
 export {output, OutputOptions} from './authoring/output/output';
-export {getOutputDestroyRef as ɵgetOutputDestroyRef, OutputEmitterRef} from './authoring/output/output_emitter_ref';
+export {
+  getOutputDestroyRef as ɵgetOutputDestroyRef,
+  OutputEmitterRef,
+} from './authoring/output/output_emitter_ref';
 export {OutputRef, OutputRefSubscription} from './authoring/output/output_ref';
 export {ContentChildFunction, ViewChildFunction} from './authoring/queries';
diff --git a/packages/core/src/authoring/input/input.ts b/packages/core/src/authoring/input/input.ts
index d4b5798bd8f3c..f169b79f190d4 100644
--- a/packages/core/src/authoring/input/input.ts
+++ b/packages/core/src/authoring/input/input.ts
@@ -8,18 +8,27 @@
 
 import {assertInInjectionContext} from '../../di';
 
-import {createInputSignal, InputOptions, InputOptionsWithoutTransform, InputOptionsWithTransform, InputSignal, InputSignalWithTransform} from './input_signal';
+import {
+  createInputSignal,
+  InputOptions,
+  InputOptionsWithoutTransform,
+  InputOptionsWithTransform,
+  InputSignal,
+  InputSignalWithTransform,
+} from './input_signal';
 import {REQUIRED_UNSET_VALUE} from './input_signal_node';
 
 export function inputFunction<ReadT, WriteT>(
-    initialValue?: ReadT,
-    opts?: InputOptions<ReadT, WriteT>): InputSignalWithTransform<ReadT|undefined, WriteT> {
+  initialValue?: ReadT,
+  opts?: InputOptions<ReadT, WriteT>,
+): InputSignalWithTransform<ReadT | undefined, WriteT> {
   ngDevMode && assertInInjectionContext(input);
   return createInputSignal(initialValue, opts);
 }
 
-export function inputRequiredFunction<ReadT, WriteT = ReadT>(opts?: InputOptions<ReadT, WriteT>):
-    InputSignalWithTransform<ReadT, WriteT> {
+export function inputRequiredFunction<ReadT, WriteT = ReadT>(
+  opts?: InputOptions<ReadT, WriteT>,
+): InputSignalWithTransform<ReadT, WriteT> {
   ngDevMode && assertInInjectionContext(input);
   return createInputSignal(REQUIRED_UNSET_VALUE as never, opts);
 }
@@ -39,7 +48,7 @@ export interface InputFunction {
    * Initializes an input of type `T` with an initial value of `undefined`.
    * Angular will implicitly use `undefined` as initial value.
    */
-  <T>(): InputSignal<T|undefined>;
+  <T>(): InputSignal<T | undefined>;
   /** Declares an input of type `T` with an explicit initial value. */
   <T>(initialValue: T, opts?: InputOptionsWithoutTransform<T>): InputSignal<T>;
   /**
@@ -49,8 +58,10 @@ export interface InputFunction {
    * The input accepts values of type `TransformT` and the given
    * transform function will transform the value to type `T`.
    */
-  <T, TransformT>(initialValue: T, opts: InputOptionsWithTransform<T, TransformT>):
-      InputSignalWithTransform<T, TransformT>;
+  <T, TransformT>(
+    initialValue: T,
+    opts: InputOptionsWithTransform<T, TransformT>,
+  ): InputSignalWithTransform<T, TransformT>;
 
   /**
    * Initializes a required input.
@@ -69,8 +80,9 @@ export interface InputFunction {
      * The input accepts values of type `TransformT` and the given
      * transform function will transform the value to type `T`.
      */
-    <T, TransformT>(opts: InputOptionsWithTransform<T, TransformT>):
-        InputSignalWithTransform<T, TransformT>;
+    <T, TransformT>(
+      opts: InputOptionsWithTransform<T, TransformT>,
+    ): InputSignalWithTransform<T, TransformT>;
   };
 }
 
@@ -127,5 +139,5 @@ export const input: InputFunction = (() => {
   // this assignment, unless this `input` constant export is accessed. It's a
   // self-contained side effect that is local to the user facing`input` export.
   (inputFunction as any).required = inputRequiredFunction;
-  return inputFunction as (typeof inputFunction&{required: typeof inputRequiredFunction});
+  return inputFunction as typeof inputFunction & {required: typeof inputRequiredFunction};
 })();
diff --git a/packages/core/src/authoring/input/input_signal.ts b/packages/core/src/authoring/input/input_signal.ts
index 1ceb9270abba1..e3fb2a31e17e5 100644
--- a/packages/core/src/authoring/input/input_signal.ts
+++ b/packages/core/src/authoring/input/input_signal.ts
@@ -40,15 +40,17 @@ export interface InputOptions<T, TransformT> {
  * @developerPreview
  */
 export type InputOptionsWithoutTransform<T> =
-    // Note: We still keep a notion of `transform` for auto-completion.
-    Omit<InputOptions<T, T>, 'transform'>&{transform?: undefined};
+  // Note: We still keep a notion of `transform` for auto-completion.
+  Omit<InputOptions<T, T>, 'transform'> & {transform?: undefined};
 /**
  * Signal input options with the transform option required.
  *
  * @developerPreview
  */
-export type InputOptionsWithTransform<T, TransformT> =
-    Required<Pick<InputOptions<T, TransformT>, 'transform'>>&InputOptions<T, TransformT>;
+export type InputOptionsWithTransform<T, TransformT> = Required<
+  Pick<InputOptions<T, TransformT>, 'transform'>
+> &
+  InputOptions<T, TransformT>;
 
 export const ɵINPUT_SIGNAL_BRAND_READ_TYPE = /* @__PURE__ */ Symbol();
 export const ɵINPUT_SIGNAL_BRAND_WRITE_TYPE = /* @__PURE__ */ Symbol();
@@ -104,8 +106,9 @@ export interface InputSignal<T> extends InputSignalWithTransform<T, T> {}
  * @param options Additional options for the input. e.g. a transform, or an alias.
  */
 export function createInputSignal<T, TransformT>(
-    initialValue: T,
-    options?: InputOptions<T, TransformT>): InputSignalWithTransform<T, TransformT> {
+  initialValue: T,
+  options?: InputOptions<T, TransformT>,
+): InputSignalWithTransform<T, TransformT> {
   const node: InputSignalNode<T, TransformT> = Object.create(INPUT_SIGNAL_NODE);
 
   node.value = initialValue;
@@ -120,8 +123,9 @@ export function createInputSignal<T, TransformT>(
 
     if (node.value === REQUIRED_UNSET_VALUE) {
       throw new RuntimeError(
-          RuntimeErrorCode.REQUIRED_INPUT_NO_VALUE,
-          ngDevMode && 'Input is required but no value is available yet.');
+        RuntimeErrorCode.REQUIRED_INPUT_NO_VALUE,
+        ngDevMode && 'Input is required but no value is available yet.',
+      );
     }
 
     return node.value;
diff --git a/packages/core/src/authoring/input/input_signal_node.ts b/packages/core/src/authoring/input/input_signal_node.ts
index ed1f4bfe71d05..42a822fc3023b 100644
--- a/packages/core/src/authoring/input/input_signal_node.ts
+++ b/packages/core/src/authoring/input/input_signal_node.ts
@@ -19,7 +19,7 @@ export interface InputSignalNode<T, TransformT> extends SignalNode<T> {
    * User-configured transform that will run whenever a new value is applied
    * to the input signal node.
    */
-  transformFn: ((value: TransformT) => T)|undefined;
+  transformFn: ((value: TransformT) => T) | undefined;
 
   /**
    * Applies a new value to the input signal. Expects transforms to be run
@@ -42,6 +42,6 @@ export const INPUT_SIGNAL_NODE: InputSignalNode<unknown, unknown> = /* @__PURE__
 
     applyValueToInputSignal<T, TransformT>(node: InputSignalNode<T, TransformT>, value: T) {
       signalSetFn(node, value);
-    }
+    },
   };
 })();
diff --git a/packages/core/src/authoring/input/input_type_checking.ts b/packages/core/src/authoring/input/input_type_checking.ts
index a49e211802dde..5a228c0ee2348 100644
--- a/packages/core/src/authoring/input/input_type_checking.ts
+++ b/packages/core/src/authoring/input/input_type_checking.ts
@@ -10,12 +10,12 @@ import {InputSignalWithTransform} from './input_signal';
 
 /** Retrieves the write type of an `InputSignal` and `InputSignalWithTransform`. */
 export type ɵUnwrapInputSignalWriteType<Field> =
-    Field extends InputSignalWithTransform<any, infer WriteT>? WriteT : never;
+  Field extends InputSignalWithTransform<any, infer WriteT> ? WriteT : never;
 
 /**
  * Unwraps all `InputSignal`/`InputSignalWithTransform` class fields of
  * the given directive.
  */
 export type ɵUnwrapDirectiveSignalInputs<Dir, Fields extends keyof Dir> = {
-  [P in Fields]: ɵUnwrapInputSignalWriteType<Dir[P]>
+  [P in Fields]: ɵUnwrapInputSignalWriteType<Dir[P]>;
 };
diff --git a/packages/core/src/authoring/model/model.ts b/packages/core/src/authoring/model/model.ts
index 6b5ff34dd3dfa..c171f0a76401f 100644
--- a/packages/core/src/authoring/model/model.ts
+++ b/packages/core/src/authoring/model/model.ts
@@ -11,7 +11,7 @@ import {REQUIRED_UNSET_VALUE} from '../input/input_signal_node';
 
 import {createModelSignal, ModelOptions, ModelSignal} from './model_signal';
 
-export function modelFunction<T>(initialValue?: T): ModelSignal<T|undefined> {
+export function modelFunction<T>(initialValue?: T): ModelSignal<T | undefined> {
   ngDevMode && assertInInjectionContext(model);
 
   return createModelSignal(initialValue);
@@ -39,7 +39,7 @@ export interface ModelFunction {
    * Initializes a model of type `T` with an initial value of `undefined`.
    * Angular will implicitly use `undefined` as initial value.
    */
-  <T>(): ModelSignal<T|undefined>;
+  <T>(): ModelSignal<T | undefined>;
   /** Initializes a model of type `T` with the given initial value. */
   <T>(initialValue: T, opts?: ModelOptions): ModelSignal<T>;
 
@@ -106,5 +106,5 @@ export const model: ModelFunction = (() => {
   // 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 as any).required = modelRequiredFunction;
-  return modelFunction as (typeof modelFunction&{required: typeof modelRequiredFunction});
+  return modelFunction as typeof modelFunction & {required: typeof modelRequiredFunction};
 })();
diff --git a/packages/core/src/authoring/model/model_signal.ts b/packages/core/src/authoring/model/model_signal.ts
index fc345b2af1f81..f91150f362bdc 100644
--- a/packages/core/src/authoring/model/model_signal.ts
+++ b/packages/core/src/authoring/model/model_signal.ts
@@ -10,7 +10,11 @@ import {producerAccessed, SIGNAL, signalSetFn} from '@angular/core/primitives/si
 
 import {RuntimeError, RuntimeErrorCode} from '../../errors';
 import {Signal} from '../../render3/reactivity/api';
-import {signalAsReadonlyFn, WritableSignal, ɵWRITABLE_SIGNAL} from '../../render3/reactivity/signal';
+import {
+  signalAsReadonlyFn,
+  WritableSignal,
+  ɵWRITABLE_SIGNAL,
+} from '../../render3/reactivity/signal';
 import {ɵINPUT_SIGNAL_BRAND_READ_TYPE, ɵINPUT_SIGNAL_BRAND_WRITE_TYPE} from '../input/input_signal';
 import {INPUT_SIGNAL_NODE, InputSignalNode, REQUIRED_UNSET_VALUE} from '../input/input_signal_node';
 import {OutputEmitterRef} from '../output/output_emitter_ref';
@@ -85,17 +89,21 @@ export function createModelSignal<T>(initialValue: T): ModelSignal<T> {
     getter.toString = () => `[Model Signal: ${getter()}]`;
   }
 
-  return getter as (typeof getter&Pick<
-                    ModelSignal<T>,
-                    typeof ɵINPUT_SIGNAL_BRAND_READ_TYPE|typeof ɵINPUT_SIGNAL_BRAND_WRITE_TYPE|
-                    typeof ɵWRITABLE_SIGNAL>);
+  return getter as typeof getter &
+    Pick<
+      ModelSignal<T>,
+      | typeof ɵINPUT_SIGNAL_BRAND_READ_TYPE
+      | typeof ɵINPUT_SIGNAL_BRAND_WRITE_TYPE
+      | typeof ɵWRITABLE_SIGNAL
+    >;
 }
 
 /** Asserts that a model's value is set. */
 function assertModelSet(value: unknown): void {
   if (value === REQUIRED_UNSET_VALUE) {
     throw new RuntimeError(
-        RuntimeErrorCode.REQUIRED_MODEL_NO_VALUE,
-        ngDevMode && 'Model is required but no value is available yet.');
+      RuntimeErrorCode.REQUIRED_MODEL_NO_VALUE,
+      ngDevMode && 'Model is required but no value is available yet.',
+    );
   }
 }
diff --git a/packages/core/src/authoring/output/output_emitter_ref.ts b/packages/core/src/authoring/output/output_emitter_ref.ts
index 2cbce3f5c8f02..723da95d4c62a 100644
--- a/packages/core/src/authoring/output/output_emitter_ref.ts
+++ b/packages/core/src/authoring/output/output_emitter_ref.ts
@@ -30,7 +30,7 @@ import {OutputRef, OutputRefSubscription} from './output_ref';
  */
 export class OutputEmitterRef<T> implements OutputRef<T> {
   private destroyed = false;
-  private listeners: Array<(value: T) => void>|null = null;
+  private listeners: Array<(value: T) => void> | null = null;
   private errorHandler = inject(ErrorHandler, {optional: true});
 
   /** @internal */
@@ -47,10 +47,11 @@ export class OutputEmitterRef<T> implements OutputRef<T> {
   subscribe(callback: (value: T) => void): OutputRefSubscription {
     if (this.destroyed) {
       throw new RuntimeError(
-          RuntimeErrorCode.OUTPUT_REF_DESTROYED,
-          ngDevMode &&
-              'Unexpected subscription to destroyed `OutputRef`. ' +
-                  'The owning directive/component is destroyed.');
+        RuntimeErrorCode.OUTPUT_REF_DESTROYED,
+        ngDevMode &&
+          'Unexpected subscription to destroyed `OutputRef`. ' +
+            'The owning directive/component is destroyed.',
+      );
     }
 
     (this.listeners ??= []).push(callback);
@@ -61,7 +62,7 @@ export class OutputEmitterRef<T> implements OutputRef<T> {
         if (idx !== undefined && idx !== -1) {
           this.listeners?.splice(idx, 1);
         }
-      }
+      },
     };
   }
 
@@ -69,10 +70,11 @@ export class OutputEmitterRef<T> implements OutputRef<T> {
   emit(value: T): void {
     if (this.destroyed) {
       throw new RuntimeError(
-          RuntimeErrorCode.OUTPUT_REF_DESTROYED,
-          ngDevMode &&
-              'Unexpected emit for destroyed `OutputRef`. ' +
-                  'The owning directive/component is destroyed.');
+        RuntimeErrorCode.OUTPUT_REF_DESTROYED,
+        ngDevMode &&
+          'Unexpected emit for destroyed `OutputRef`. ' +
+            'The owning directive/component is destroyed.',
+      );
     }
 
     if (this.listeners === null) {
@@ -95,6 +97,6 @@ export class OutputEmitterRef<T> implements OutputRef<T> {
 }
 
 /** Gets the owning `DestroyRef` for the given output. */
-export function getOutputDestroyRef(ref: OutputRef<unknown>): DestroyRef|undefined {
+export function getOutputDestroyRef(ref: OutputRef<unknown>): DestroyRef | undefined {
   return ref.destroyRef;
 }
diff --git a/packages/core/src/authoring/output/output_ref.ts b/packages/core/src/authoring/output/output_ref.ts
index 09a0641ffe499..7989d9d44e176 100644
--- a/packages/core/src/authoring/output/output_ref.ts
+++ b/packages/core/src/authoring/output/output_ref.ts
@@ -46,5 +46,5 @@ export interface OutputRef<T> {
    *
    * @internal
    */
-  destroyRef: DestroyRef|undefined;
+  destroyRef: DestroyRef | undefined;
 }
diff --git a/packages/core/src/authoring/queries.ts b/packages/core/src/authoring/queries.ts
index 87dc2a6cabb87..b216191b6bd93 100644
--- a/packages/core/src/authoring/queries.ts
+++ b/packages/core/src/authoring/queries.ts
@@ -8,18 +8,25 @@
 
 import {assertInInjectionContext} from '../di';
 import {ProviderToken} from '../di/provider_token';
-import {createMultiResultQuerySignalFn, createSingleResultOptionalQuerySignalFn, createSingleResultRequiredQuerySignalFn} from '../render3/query_reactive';
+import {
+  createMultiResultQuerySignalFn,
+  createSingleResultOptionalQuerySignalFn,
+  createSingleResultRequiredQuerySignalFn,
+} from '../render3/query_reactive';
 import {Signal} from '../render3/reactivity/api';
 
 function viewChildFn<LocatorT, ReadT>(
-    locator: ProviderToken<LocatorT>|string,
-    opts?: {read?: ProviderToken<ReadT>}): Signal<ReadT|undefined> {
+  locator: ProviderToken<LocatorT> | string,
+  opts?: {read?: ProviderToken<ReadT>},
+): Signal<ReadT | undefined> {
   ngDevMode && assertInInjectionContext(viewChild);
   return createSingleResultOptionalQuerySignalFn<ReadT>();
 }
 
 function viewChildRequiredFn<LocatorT, ReadT>(
-    locator: ProviderToken<LocatorT>|string, opts?: {read?: ProviderToken<ReadT>}): Signal<ReadT> {
+  locator: ProviderToken<LocatorT> | string,
+  opts?: {read?: ProviderToken<ReadT>},
+): Signal<ReadT> {
   ngDevMode && assertInInjectionContext(viewChild);
   return createSingleResultRequiredQuerySignalFn<ReadT>();
 }
@@ -40,9 +47,11 @@ export interface ViewChildFunction {
    *
    * @developerPreview
    */
-  <LocatorT>(locator: ProviderToken<LocatorT>|string): Signal<LocatorT|undefined>;
-  <LocatorT, ReadT>(locator: ProviderToken<LocatorT>|string, opts: {read: ProviderToken<ReadT>}):
-      Signal<ReadT|undefined>;
+  <LocatorT>(locator: ProviderToken<LocatorT> | string): Signal<LocatorT | undefined>;
+  <LocatorT, ReadT>(
+    locator: ProviderToken<LocatorT> | string,
+    opts: {read: ProviderToken<ReadT>},
+  ): Signal<ReadT | undefined>;
 
   /**
    * Initializes a view child query that is expected to always match an element.
@@ -50,10 +59,12 @@ export interface ViewChildFunction {
    * @developerPreview
    */
   required: {
-    <LocatorT>(locator: ProviderToken<LocatorT>|string): Signal<LocatorT>;
+    <LocatorT>(locator: ProviderToken<LocatorT> | string): Signal<LocatorT>;
 
-    <LocatorT, ReadT>(locator: ProviderToken<LocatorT>|string, opts: {read: ProviderToken<ReadT>}):
-        Signal<ReadT>;
+    <LocatorT, ReadT>(
+      locator: ProviderToken<LocatorT> | string,
+      opts: {read: ProviderToken<ReadT>},
+    ): Signal<ReadT>;
   };
 }
 
@@ -84,14 +95,16 @@ export const viewChild: ViewChildFunction = (() => {
   // 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 as any).required = viewChildRequiredFn;
-  return viewChildFn as (typeof viewChildFn&{required: typeof viewChildRequiredFn});
+  return viewChildFn as typeof viewChildFn & {required: typeof viewChildRequiredFn};
 })();
 
-export function viewChildren<LocatorT>(locator: ProviderToken<LocatorT>|
-                                       string): Signal<ReadonlyArray<LocatorT>>;
+export function viewChildren<LocatorT>(
+  locator: ProviderToken<LocatorT> | string,
+): Signal<ReadonlyArray<LocatorT>>;
 export function viewChildren<LocatorT, ReadT>(
-    locator: ProviderToken<LocatorT>|string,
-    opts: {read: ProviderToken<ReadT>}): Signal<ReadonlyArray<ReadT>>;
+  locator: ProviderToken<LocatorT> | string,
+  opts: {read: ProviderToken<ReadT>},
+): Signal<ReadonlyArray<ReadT>>;
 
 /**
  * Initializes a view children query.
@@ -114,22 +127,25 @@ export function viewChildren<LocatorT, ReadT>(
  * @developerPreview
  */
 export function viewChildren<LocatorT, ReadT>(
-    locator: ProviderToken<LocatorT>|string,
-    opts?: {read?: ProviderToken<ReadT>}): Signal<ReadonlyArray<ReadT>> {
+  locator: ProviderToken<LocatorT> | string,
+  opts?: {read?: ProviderToken<ReadT>},
+): Signal<ReadonlyArray<ReadT>> {
   ngDevMode && assertInInjectionContext(viewChildren);
   return createMultiResultQuerySignalFn<ReadT>();
 }
 
 export function contentChildFn<LocatorT, ReadT>(
-    locator: ProviderToken<LocatorT>|string,
-    opts?: {descendants?: boolean, read?: ProviderToken<ReadT>}): Signal<ReadT|undefined> {
+  locator: ProviderToken<LocatorT> | string,
+  opts?: {descendants?: boolean; read?: ProviderToken<ReadT>},
+): Signal<ReadT | undefined> {
   ngDevMode && assertInInjectionContext(contentChild);
   return createSingleResultOptionalQuerySignalFn<ReadT>();
 }
 
 function contentChildRequiredFn<LocatorT, ReadT>(
-    locator: ProviderToken<LocatorT>|string,
-    opts?: {descendants?: boolean, read?: ProviderToken<ReadT>}): Signal<ReadT> {
+  locator: ProviderToken<LocatorT> | string,
+  opts?: {descendants?: boolean; read?: ProviderToken<ReadT>},
+): Signal<ReadT> {
   ngDevMode && assertInInjectionContext(contentChildren);
   return createSingleResultRequiredQuerySignalFn<ReadT>();
 }
@@ -150,27 +166,38 @@ export interface ContentChildFunction {
    * Consider using `contentChild.required` for queries that should always match.
    * @developerPreview
    */
-  <LocatorT>(locator: ProviderToken<LocatorT>|string, opts?: {
-    descendants?: boolean,
-    read?: undefined
-  }): Signal<LocatorT|undefined>;
+  <LocatorT>(
+    locator: ProviderToken<LocatorT> | string,
+    opts?: {
+      descendants?: boolean;
+      read?: undefined;
+    },
+  ): Signal<LocatorT | undefined>;
 
-  <LocatorT, ReadT>(locator: ProviderToken<LocatorT>|string, opts: {
-    descendants?: boolean, read: ProviderToken<ReadT>
-  }): Signal<ReadT|undefined>;
+  <LocatorT, ReadT>(
+    locator: ProviderToken<LocatorT> | string,
+    opts: {
+      descendants?: boolean;
+      read: ProviderToken<ReadT>;
+    },
+  ): Signal<ReadT | undefined>;
 
   /**
    * Initializes a content child query that is always expected to match.
    */
   required: {
-    <LocatorT>(locator: ProviderToken<LocatorT>|string, opts?: {
-      descendants?: boolean,
-      read?: undefined,
-    }): Signal<LocatorT>;
+    <LocatorT>(
+      locator: ProviderToken<LocatorT> | string,
+      opts?: {
+        descendants?: boolean;
+        read?: undefined;
+      },
+    ): Signal<LocatorT>;
 
     <LocatorT, ReadT>(
-        locator: ProviderToken<LocatorT>|string,
-        opts: {descendants?: boolean, read: ProviderToken<ReadT>}): Signal<ReadT>;
+      locator: ProviderToken<LocatorT> | string,
+      opts: {descendants?: boolean; read: ProviderToken<ReadT>},
+    ): Signal<ReadT>;
   };
 }
 
@@ -200,16 +227,17 @@ export const contentChild: ContentChildFunction = (() => {
   // 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 as any).required = contentChildRequiredFn;
-  return contentChildFn as (typeof contentChildFn&{required: typeof contentChildRequiredFn});
+  return contentChildFn as typeof contentChildFn & {required: typeof contentChildRequiredFn};
 })();
 
-
 export function contentChildren<LocatorT>(
-    locator: ProviderToken<LocatorT>|string,
-    opts?: {descendants?: boolean, read?: undefined}): Signal<ReadonlyArray<LocatorT>>;
+  locator: ProviderToken<LocatorT> | string,
+  opts?: {descendants?: boolean; read?: undefined},
+): Signal<ReadonlyArray<LocatorT>>;
 export function contentChildren<LocatorT, ReadT>(
-    locator: ProviderToken<LocatorT>|string,
-    opts: {descendants?: boolean, read: ProviderToken<ReadT>}): Signal<ReadonlyArray<ReadT>>;
+  locator: ProviderToken<LocatorT> | string,
+  opts: {descendants?: boolean; read: ProviderToken<ReadT>},
+): Signal<ReadonlyArray<ReadT>>;
 
 /**
  * Initializes a content children query.
@@ -232,7 +260,8 @@ export function contentChildren<LocatorT, ReadT>(
  * @developerPreview
  */
 export function contentChildren<LocatorT, ReadT>(
-    locator: ProviderToken<LocatorT>|string,
-    opts?: {descendants?: boolean, read?: ProviderToken<ReadT>}): Signal<ReadonlyArray<ReadT>> {
+  locator: ProviderToken<LocatorT> | string,
+  opts?: {descendants?: boolean; read?: ProviderToken<ReadT>},
+): Signal<ReadonlyArray<ReadT>> {
   return createMultiResultQuerySignalFn<ReadT>();
 }
diff --git a/packages/core/src/cached_injector_service.ts b/packages/core/src/cached_injector_service.ts
index a03fbf552be0c..8a89d85c33299 100644
--- a/packages/core/src/cached_injector_service.ts
+++ b/packages/core/src/cached_injector_service.ts
@@ -20,15 +20,19 @@ import {createEnvironmentInjector} from './render3/ng_module_ref';
  * of a certain type.
  */
 export class CachedInjectorService implements OnDestroy {
-  private cachedInjectors = new Map<unknown, EnvironmentInjector|null>();
+  private cachedInjectors = new Map<unknown, EnvironmentInjector | null>();
 
   getOrCreateInjector(
-      key: unknown, parentInjector: EnvironmentInjector, providers: Provider[],
-      debugName?: string) {
+    key: unknown,
+    parentInjector: EnvironmentInjector,
+    providers: Provider[],
+    debugName?: string,
+  ) {
     if (!this.cachedInjectors.has(key)) {
-      const injector = providers.length > 0 ?
-          createEnvironmentInjector(providers, parentInjector, debugName) :
-          null;
+      const injector =
+        providers.length > 0
+          ? createEnvironmentInjector(providers, parentInjector, debugName)
+          : null;
       this.cachedInjectors.set(key, injector);
     }
     return this.cachedInjectors.get(key)!;
diff --git a/packages/core/src/change_detection.ts b/packages/core/src/change_detection.ts
index a502b0109d517..299356d844dfa 100644
--- a/packages/core/src/change_detection.ts
+++ b/packages/core/src/change_detection.ts
@@ -12,4 +12,23 @@
  * Change detection enables data binding in Angular.
  */
 
-export {ChangeDetectionStrategy, ChangeDetectorRef, DefaultIterableDiffer, IterableChangeRecord, IterableChanges, IterableDiffer, IterableDifferFactory, IterableDiffers, KeyValueChangeRecord, KeyValueChanges, KeyValueDiffer, KeyValueDifferFactory, KeyValueDiffers, NgIterable, PipeTransform, SimpleChange, SimpleChanges, TrackByFunction} from './change_detection/change_detection';
+export {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  DefaultIterableDiffer,
+  IterableChangeRecord,
+  IterableChanges,
+  IterableDiffer,
+  IterableDifferFactory,
+  IterableDiffers,
+  KeyValueChangeRecord,
+  KeyValueChanges,
+  KeyValueDiffer,
+  KeyValueDifferFactory,
+  KeyValueDiffers,
+  NgIterable,
+  PipeTransform,
+  SimpleChange,
+  SimpleChanges,
+  TrackByFunction,
+} from './change_detection/change_detection';
diff --git a/packages/core/src/change_detection/change_detection.ts b/packages/core/src/change_detection/change_detection.ts
index 1f8ae89f0dcb4..f12f3f8c6dccf 100644
--- a/packages/core/src/change_detection/change_detection.ts
+++ b/packages/core/src/change_detection/change_detection.ts
@@ -15,14 +15,29 @@ export {SimpleChange, SimpleChanges} from '../interface/simple_change';
 export {devModeEqual} from '../util/comparison';
 export {ChangeDetectorRef} from './change_detector_ref';
 export {ChangeDetectionStrategy} from './constants';
-export {DefaultIterableDiffer, DefaultIterableDifferFactory} from './differs/default_iterable_differ';
+export {
+  DefaultIterableDiffer,
+  DefaultIterableDifferFactory,
+} from './differs/default_iterable_differ';
 export {DefaultKeyValueDifferFactory} from './differs/default_keyvalue_differ';
-export {IterableChangeRecord, IterableChanges, IterableDiffer, IterableDifferFactory, IterableDiffers, NgIterable, TrackByFunction} from './differs/iterable_differs';
-export {KeyValueChangeRecord, KeyValueChanges, KeyValueDiffer, KeyValueDifferFactory, KeyValueDiffers} from './differs/keyvalue_differs';
+export {
+  IterableChangeRecord,
+  IterableChanges,
+  IterableDiffer,
+  IterableDifferFactory,
+  IterableDiffers,
+  NgIterable,
+  TrackByFunction,
+} from './differs/iterable_differs';
+export {
+  KeyValueChangeRecord,
+  KeyValueChanges,
+  KeyValueDiffer,
+  KeyValueDifferFactory,
+  KeyValueDiffers,
+} from './differs/keyvalue_differs';
 export {PipeTransform} from './pipe_transform';
 
-
-
 /**
  * Structural diffing for `Object`s and `Map`s.
  */
diff --git a/packages/core/src/change_detection/change_detector_ref.ts b/packages/core/src/change_detection/change_detector_ref.ts
index 27687a6a31daa..14ffd58868509 100644
--- a/packages/core/src/change_detection/change_detector_ref.ts
+++ b/packages/core/src/change_detection/change_detector_ref.ts
@@ -127,13 +127,13 @@ export abstract class ChangeDetectorRef {
   static __NG_ELEMENT_ID__: (flags: InjectFlags) => ChangeDetectorRef = injectChangeDetectorRef;
 }
 
-
-
 /** Returns a ChangeDetectorRef (a.k.a. a ViewRef) */
 export function injectChangeDetectorRef(flags: InjectFlags): ChangeDetectorRef {
   return createViewRef(
-      getCurrentTNode()!, getLView(),
-      (flags & InternalInjectFlags.ForPipe) === InternalInjectFlags.ForPipe);
+    getCurrentTNode()!,
+    getLView(),
+    (flags & InternalInjectFlags.ForPipe) === InternalInjectFlags.ForPipe,
+  );
 }
 
 /**
@@ -148,12 +148,12 @@ function createViewRef(tNode: TNode, lView: LView, isPipe: boolean): ChangeDetec
   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
+    const componentView = getComponentLViewByIndex(tNode.index, lView); // look down
     return new ViewRef(componentView, componentView);
   } else if (tNode.type & (TNodeType.AnyRNode | TNodeType.AnyContainer | 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
+    const hostComponentView = lView[DECLARATION_COMPONENT_VIEW]; // look up
     return new ViewRef(hostComponentView, lView);
   }
   return null!;
diff --git a/packages/core/src/change_detection/constants.ts b/packages/core/src/change_detection/constants.ts
index caca99c8fe189..6db037110b8a2 100644
--- a/packages/core/src/change_detection/constants.ts
+++ b/packages/core/src/change_detection/constants.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 /**
  * The strategy that the default change detector uses to detect changes.
  * When set, takes effect the next time change detection is triggered.
diff --git a/packages/core/src/change_detection/differs/default_iterable_differ.ts b/packages/core/src/change_detection/differs/default_iterable_differ.ts
index 54405452cd5a7..1001e2052c97c 100644
--- a/packages/core/src/change_detection/differs/default_iterable_differ.ts
+++ b/packages/core/src/change_detection/differs/default_iterable_differ.ts
@@ -11,12 +11,18 @@ import {Writable} from '../../interface/type';
 import {isListLikeIterable, iterateListLike} from '../../util/iterable';
 import {stringify} from '../../util/stringify';
 
-import {IterableChangeRecord, IterableChanges, IterableDiffer, IterableDifferFactory, NgIterable, TrackByFunction} from './iterable_differs';
-
+import {
+  IterableChangeRecord,
+  IterableChanges,
+  IterableDiffer,
+  IterableDifferFactory,
+  NgIterable,
+  TrackByFunction,
+} from './iterable_differs';
 
 export class DefaultIterableDifferFactory implements IterableDifferFactory {
   constructor() {}
-  supports(obj: Object|null|undefined): boolean {
+  supports(obj: Object | null | undefined): boolean {
     return isListLikeIterable(obj);
   }
 
@@ -34,23 +40,23 @@ const trackByIdentity = (index: number, item: any) => item;
 export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChanges<V> {
   public readonly length: number = 0;
   // TODO: confirm the usage of `collection` as it's unused, readonly and on a non public API.
-  public readonly collection!: V[]|Iterable<V>|null;
+  public readonly collection!: V[] | Iterable<V> | null;
   // Keeps track of the used records at any point in time (during & across `_check()` calls)
-  private _linkedRecords: _DuplicateMap<V>|null = null;
+  private _linkedRecords: _DuplicateMap<V> | null = null;
   // Keeps track of the removed records at any point in time during `_check()` calls.
-  private _unlinkedRecords: _DuplicateMap<V>|null = null;
-  private _previousItHead: IterableChangeRecord_<V>|null = null;
-  private _itHead: IterableChangeRecord_<V>|null = null;
-  private _itTail: IterableChangeRecord_<V>|null = null;
-  private _additionsHead: IterableChangeRecord_<V>|null = null;
-  private _additionsTail: IterableChangeRecord_<V>|null = null;
-  private _movesHead: IterableChangeRecord_<V>|null = null;
-  private _movesTail: IterableChangeRecord_<V>|null = null;
-  private _removalsHead: IterableChangeRecord_<V>|null = null;
-  private _removalsTail: IterableChangeRecord_<V>|null = null;
+  private _unlinkedRecords: _DuplicateMap<V> | null = null;
+  private _previousItHead: IterableChangeRecord_<V> | null = null;
+  private _itHead: IterableChangeRecord_<V> | null = null;
+  private _itTail: IterableChangeRecord_<V> | null = null;
+  private _additionsHead: IterableChangeRecord_<V> | null = null;
+  private _additionsTail: IterableChangeRecord_<V> | null = null;
+  private _movesHead: IterableChangeRecord_<V> | null = null;
+  private _movesTail: IterableChangeRecord_<V> | null = null;
+  private _removalsHead: IterableChangeRecord_<V> | null = null;
+  private _removalsTail: IterableChangeRecord_<V> | null = null;
   // Keeps track of records where custom track by is the same, but item identity has changed
-  private _identityChangesHead: IterableChangeRecord_<V>|null = null;
-  private _identityChangesTail: IterableChangeRecord_<V>|null = null;
+  private _identityChangesHead: IterableChangeRecord_<V> | null = null;
+  private _identityChangesTail: IterableChangeRecord_<V> | null = null;
   private _trackByFn: TrackByFunction<V>;
 
   constructor(trackByFn?: TrackByFunction<V>) {
@@ -58,28 +64,32 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
   }
 
   forEachItem(fn: (record: IterableChangeRecord_<V>) => void) {
-    let record: IterableChangeRecord_<V>|null;
+    let record: IterableChangeRecord_<V> | null;
     for (record = this._itHead; record !== null; record = record._next) {
       fn(record);
     }
   }
 
   forEachOperation(
-      fn: (item: IterableChangeRecord<V>, previousIndex: number|null, currentIndex: number|null) =>
-          void) {
+    fn: (
+      item: IterableChangeRecord<V>,
+      previousIndex: number | null,
+      currentIndex: number | null,
+    ) => void,
+  ) {
     let nextIt = this._itHead;
     let nextRemove = this._removalsHead;
     let addRemoveOffset = 0;
-    let moveOffsets: number[]|null = null;
+    let moveOffsets: number[] | null = null;
     while (nextIt || nextRemove) {
       // Figure out which is the next record to process
       // Order: remove, add, move
-      const record: IterableChangeRecord<V> = !nextRemove ||
-              nextIt &&
-                  nextIt.currentIndex! <
-                      getPreviousIndex(nextRemove, addRemoveOffset, moveOffsets) ?
-          nextIt! :
-          nextRemove;
+      const record: IterableChangeRecord<V> =
+        !nextRemove ||
+        (nextIt &&
+          nextIt.currentIndex! < getPreviousIndex(nextRemove, addRemoveOffset, moveOffsets))
+          ? nextIt!
+          : nextRemove;
       const adjPreviousIndex = getPreviousIndex(record, addRemoveOffset, moveOffsets);
       const currentIndex = record.currentIndex;
 
@@ -117,48 +127,48 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
   }
 
   forEachPreviousItem(fn: (record: IterableChangeRecord_<V>) => void) {
-    let record: IterableChangeRecord_<V>|null;
+    let record: IterableChangeRecord_<V> | null;
     for (record = this._previousItHead; record !== null; record = record._nextPrevious) {
       fn(record);
     }
   }
 
   forEachAddedItem(fn: (record: IterableChangeRecord_<V>) => void) {
-    let record: IterableChangeRecord_<V>|null;
+    let record: IterableChangeRecord_<V> | null;
     for (record = this._additionsHead; record !== null; record = record._nextAdded) {
       fn(record);
     }
   }
 
   forEachMovedItem(fn: (record: IterableChangeRecord_<V>) => void) {
-    let record: IterableChangeRecord_<V>|null;
+    let record: IterableChangeRecord_<V> | null;
     for (record = this._movesHead; record !== null; record = record._nextMoved) {
       fn(record);
     }
   }
 
   forEachRemovedItem(fn: (record: IterableChangeRecord_<V>) => void) {
-    let record: IterableChangeRecord_<V>|null;
+    let record: IterableChangeRecord_<V> | null;
     for (record = this._removalsHead; record !== null; record = record._nextRemoved) {
       fn(record);
     }
   }
 
   forEachIdentityChange(fn: (record: IterableChangeRecord_<V>) => void) {
-    let record: IterableChangeRecord_<V>|null;
+    let record: IterableChangeRecord_<V> | null;
     for (record = this._identityChangesHead; record !== null; record = record._nextIdentityChange) {
       fn(record);
     }
   }
 
-  diff(collection: NgIterable<V>|null|undefined): DefaultIterableDiffer<V>|null {
+  diff(collection: NgIterable<V> | null | undefined): DefaultIterableDiffer<V> | null {
     if (collection == null) collection = [];
     if (!isListLikeIterable(collection)) {
       throw new RuntimeError(
-          RuntimeErrorCode.INVALID_DIFFER_INPUT,
-          ngDevMode &&
-              `Error trying to diff '${
-                  stringify(collection)}'. Only arrays and iterables are allowed`);
+        RuntimeErrorCode.INVALID_DIFFER_INPUT,
+        ngDevMode &&
+          `Error trying to diff '${stringify(collection)}'. Only arrays and iterables are allowed`,
+      );
     }
 
     if (this.check(collection)) {
@@ -173,7 +183,7 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
   check(collection: NgIterable<V>): boolean {
     this._reset();
 
-    let record: IterableChangeRecord_<V>|null = this._itHead;
+    let record: IterableChangeRecord_<V> | null = this._itHead;
     let mayBeDirty: boolean = false;
     let index: number;
     let item: V;
@@ -226,8 +236,12 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
    * changes.
    */
   get isDirty(): boolean {
-    return this._additionsHead !== null || this._movesHead !== null ||
-        this._removalsHead !== null || this._identityChangesHead !== null;
+    return (
+      this._additionsHead !== null ||
+      this._movesHead !== null ||
+      this._removalsHead !== null ||
+      this._identityChangesHead !== null
+    );
   }
 
   /**
@@ -240,7 +254,7 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
    */
   _reset() {
     if (this.isDirty) {
-      let record: IterableChangeRecord_<V>|null;
+      let record: IterableChangeRecord_<V> | null;
 
       for (record = this._previousItHead = this._itHead; record !== null; record = record._next) {
         record._nextPrevious = record._next;
@@ -273,10 +287,14 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
    *
    * @internal
    */
-  _mismatch(record: IterableChangeRecord_<V>|null, item: V, itemTrackBy: any, index: number):
-      IterableChangeRecord_<V> {
+  _mismatch(
+    record: IterableChangeRecord_<V> | null,
+    item: V,
+    itemTrackBy: any,
+    index: number,
+  ): IterableChangeRecord_<V> {
     // The previous record after which we will append the current one.
-    let previousRecord: IterableChangeRecord_<V>|null;
+    let previousRecord: IterableChangeRecord_<V> | null;
 
     if (record === null) {
       previousRecord = this._itTail;
@@ -306,8 +324,11 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
         this._moveAfter(record, previousRecord, index);
       } else {
         // It is a new item: add it.
-        record =
-            this._addAfter(new IterableChangeRecord_<V>(item, itemTrackBy), previousRecord, index);
+        record = this._addAfter(
+          new IterableChangeRecord_<V>(item, itemTrackBy),
+          previousRecord,
+          index,
+        );
       }
     }
     return record;
@@ -340,10 +361,14 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
    *
    * @internal
    */
-  _verifyReinsertion(record: IterableChangeRecord_<V>, item: V, itemTrackBy: any, index: number):
-      IterableChangeRecord_<V> {
-    let reinsertRecord: IterableChangeRecord_<V>|null =
-        this._unlinkedRecords === null ? null : this._unlinkedRecords.get(itemTrackBy, null);
+  _verifyReinsertion(
+    record: IterableChangeRecord_<V>,
+    item: V,
+    itemTrackBy: any,
+    index: number,
+  ): IterableChangeRecord_<V> {
+    let reinsertRecord: IterableChangeRecord_<V> | null =
+      this._unlinkedRecords === null ? null : this._unlinkedRecords.get(itemTrackBy, null);
     if (reinsertRecord !== null) {
       record = this._reinsertAfter(reinsertRecord, record._prev!, index);
     } else if (record.currentIndex != index) {
@@ -360,10 +385,10 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
    *
    * @internal
    */
-  _truncate(record: IterableChangeRecord_<V>|null) {
+  _truncate(record: IterableChangeRecord_<V> | null) {
     // Anything after that needs to be removed;
     while (record !== null) {
-      const nextRecord: IterableChangeRecord_<V>|null = record._next;
+      const nextRecord: IterableChangeRecord_<V> | null = record._next;
       this._addToRemovals(this._unlink(record));
       record = nextRecord;
     }
@@ -390,8 +415,10 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
 
   /** @internal */
   _reinsertAfter(
-      record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>|null,
-      index: number): IterableChangeRecord_<V> {
+    record: IterableChangeRecord_<V>,
+    prevRecord: IterableChangeRecord_<V> | null,
+    index: number,
+  ): IterableChangeRecord_<V> {
     if (this._unlinkedRecords !== null) {
       this._unlinkedRecords.remove(record);
     }
@@ -416,8 +443,10 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
 
   /** @internal */
   _moveAfter(
-      record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>|null,
-      index: number): IterableChangeRecord_<V> {
+    record: IterableChangeRecord_<V>,
+    prevRecord: IterableChangeRecord_<V> | null,
+    index: number,
+  ): IterableChangeRecord_<V> {
     this._unlink(record);
     this._insertAfter(record, prevRecord, index);
     this._addToMoves(record, index);
@@ -426,8 +455,10 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
 
   /** @internal */
   _addAfter(
-      record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>|null,
-      index: number): IterableChangeRecord_<V> {
+    record: IterableChangeRecord_<V>,
+    prevRecord: IterableChangeRecord_<V> | null,
+    index: number,
+  ): IterableChangeRecord_<V> {
     this._insertAfter(record, prevRecord, index);
 
     if (this._additionsTail === null) {
@@ -445,15 +476,17 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
 
   /** @internal */
   _insertAfter(
-      record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>|null,
-      index: number): IterableChangeRecord_<V> {
+    record: IterableChangeRecord_<V>,
+    prevRecord: IterableChangeRecord_<V> | null,
+    index: number,
+  ): IterableChangeRecord_<V> {
     // TODO(vicb):
     // assert(record != prevRecord);
     // assert(record._next === null);
     // assert(record._prev === null);
 
-    const next: IterableChangeRecord_<V>|null =
-        prevRecord === null ? this._itHead : prevRecord._next;
+    const next: IterableChangeRecord_<V> | null =
+      prevRecord === null ? this._itHead : prevRecord._next;
     // TODO(vicb):
     // assert(next != record);
     // assert(prevRecord != record);
@@ -569,40 +602,42 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
 }
 
 export class IterableChangeRecord_<V> implements IterableChangeRecord<V> {
-  currentIndex: number|null = null;
-  previousIndex: number|null = null;
+  currentIndex: number | null = null;
+  previousIndex: number | null = null;
 
   /** @internal */
-  _nextPrevious: IterableChangeRecord_<V>|null = null;
+  _nextPrevious: IterableChangeRecord_<V> | null = null;
   /** @internal */
-  _prev: IterableChangeRecord_<V>|null = null;
+  _prev: IterableChangeRecord_<V> | null = null;
   /** @internal */
-  _next: IterableChangeRecord_<V>|null = null;
+  _next: IterableChangeRecord_<V> | null = null;
   /** @internal */
-  _prevDup: IterableChangeRecord_<V>|null = null;
+  _prevDup: IterableChangeRecord_<V> | null = null;
   /** @internal */
-  _nextDup: IterableChangeRecord_<V>|null = null;
+  _nextDup: IterableChangeRecord_<V> | null = null;
   /** @internal */
-  _prevRemoved: IterableChangeRecord_<V>|null = null;
+  _prevRemoved: IterableChangeRecord_<V> | null = null;
   /** @internal */
-  _nextRemoved: IterableChangeRecord_<V>|null = null;
+  _nextRemoved: IterableChangeRecord_<V> | null = null;
   /** @internal */
-  _nextAdded: IterableChangeRecord_<V>|null = null;
+  _nextAdded: IterableChangeRecord_<V> | null = null;
   /** @internal */
-  _nextMoved: IterableChangeRecord_<V>|null = null;
+  _nextMoved: IterableChangeRecord_<V> | null = null;
   /** @internal */
-  _nextIdentityChange: IterableChangeRecord_<V>|null = null;
-
+  _nextIdentityChange: IterableChangeRecord_<V> | null = null;
 
-  constructor(public item: V, public trackById: any) {}
+  constructor(
+    public item: V,
+    public trackById: any,
+  ) {}
 }
 
 // A linked list of IterableChangeRecords with the same IterableChangeRecord_.item
 class _DuplicateItemRecordList<V> {
   /** @internal */
-  _head: IterableChangeRecord_<V>|null = null;
+  _head: IterableChangeRecord_<V> | null = null;
   /** @internal */
-  _tail: IterableChangeRecord_<V>|null = null;
+  _tail: IterableChangeRecord_<V> | null = null;
 
   /**
    * Append the record to the list of duplicates.
@@ -627,11 +662,13 @@ class _DuplicateItemRecordList<V> {
 
   // Returns a IterableChangeRecord_ having IterableChangeRecord_.trackById == trackById and
   // IterableChangeRecord_.currentIndex >= atOrAfterIndex
-  get(trackById: any, atOrAfterIndex: number|null): IterableChangeRecord_<V>|null {
-    let record: IterableChangeRecord_<V>|null;
+  get(trackById: any, atOrAfterIndex: number | null): IterableChangeRecord_<V> | null {
+    let record: IterableChangeRecord_<V> | null;
     for (record = this._head; record !== null; record = record._nextDup) {
-      if ((atOrAfterIndex === null || atOrAfterIndex <= record.currentIndex!) &&
-          Object.is(record.trackById, trackById)) {
+      if (
+        (atOrAfterIndex === null || atOrAfterIndex <= record.currentIndex!) &&
+        Object.is(record.trackById, trackById)
+      ) {
         return record;
       }
     }
@@ -653,8 +690,8 @@ class _DuplicateItemRecordList<V> {
     //  return false;
     //});
 
-    const prev: IterableChangeRecord_<V>|null = record._prevDup;
-    const next: IterableChangeRecord_<V>|null = record._nextDup;
+    const prev: IterableChangeRecord_<V> | null = record._prevDup;
+    const next: IterableChangeRecord_<V> | null = record._nextDup;
     if (prev === null) {
       this._head = next;
     } else {
@@ -690,7 +727,7 @@ class _DuplicateMap<V> {
    * 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(trackById: any, atOrAfterIndex: number|null): IterableChangeRecord_<V>|null {
+  get(trackById: any, atOrAfterIndex: number | null): IterableChangeRecord_<V> | null {
     const key = trackById;
     const recordList = this.map.get(key);
     return recordList ? recordList.get(trackById, atOrAfterIndex) : null;
@@ -720,7 +757,11 @@ class _DuplicateMap<V> {
   }
 }
 
-function getPreviousIndex(item: any, addRemoveOffset: number, moveOffsets: number[]|null): number {
+function getPreviousIndex(
+  item: any,
+  addRemoveOffset: number,
+  moveOffsets: number[] | null,
+): number {
   const previousIndex = item.previousIndex;
   if (previousIndex === null) return previousIndex;
   let moveOffset = 0;
diff --git a/packages/core/src/change_detection/differs/default_keyvalue_differ.ts b/packages/core/src/change_detection/differs/default_keyvalue_differ.ts
index e9baefb70a23a..fc70f61507706 100644
--- a/packages/core/src/change_detection/differs/default_keyvalue_differ.ts
+++ b/packages/core/src/change_detection/differs/default_keyvalue_differ.ts
@@ -10,8 +10,12 @@ import {RuntimeError, RuntimeErrorCode} from '../../errors';
 import {isJsObject} from '../../util/iterable';
 import {stringify} from '../../util/stringify';
 
-import {KeyValueChangeRecord, KeyValueChanges, KeyValueDiffer, KeyValueDifferFactory} from './keyvalue_differs';
-
+import {
+  KeyValueChangeRecord,
+  KeyValueChanges,
+  KeyValueDiffer,
+  KeyValueDifferFactory,
+} from './keyvalue_differs';
 
 export class DefaultKeyValueDifferFactory<K, V> implements KeyValueDifferFactory {
   constructor() {}
@@ -26,65 +30,66 @@ export class DefaultKeyValueDifferFactory<K, V> implements KeyValueDifferFactory
 
 export class DefaultKeyValueDiffer<K, V> implements KeyValueDiffer<K, V>, KeyValueChanges<K, V> {
   private _records = new Map<K, KeyValueChangeRecord_<K, V>>();
-  private _mapHead: KeyValueChangeRecord_<K, V>|null = null;
+  private _mapHead: KeyValueChangeRecord_<K, V> | null = null;
   // _appendAfter is used in the check loop
-  private _appendAfter: KeyValueChangeRecord_<K, V>|null = null;
-  private _previousMapHead: KeyValueChangeRecord_<K, V>|null = null;
-  private _changesHead: KeyValueChangeRecord_<K, V>|null = null;
-  private _changesTail: KeyValueChangeRecord_<K, V>|null = null;
-  private _additionsHead: KeyValueChangeRecord_<K, V>|null = null;
-  private _additionsTail: KeyValueChangeRecord_<K, V>|null = null;
-  private _removalsHead: KeyValueChangeRecord_<K, V>|null = null;
-  private _removalsTail: KeyValueChangeRecord_<K, V>|null = null;
+  private _appendAfter: KeyValueChangeRecord_<K, V> | null = null;
+  private _previousMapHead: KeyValueChangeRecord_<K, V> | null = null;
+  private _changesHead: KeyValueChangeRecord_<K, V> | null = null;
+  private _changesTail: KeyValueChangeRecord_<K, V> | null = null;
+  private _additionsHead: KeyValueChangeRecord_<K, V> | null = null;
+  private _additionsTail: KeyValueChangeRecord_<K, V> | null = null;
+  private _removalsHead: KeyValueChangeRecord_<K, V> | null = null;
+  private _removalsTail: KeyValueChangeRecord_<K, V> | null = null;
 
   get isDirty(): boolean {
-    return this._additionsHead !== null || this._changesHead !== null ||
-        this._removalsHead !== null;
+    return (
+      this._additionsHead !== null || this._changesHead !== null || this._removalsHead !== null
+    );
   }
 
   forEachItem(fn: (r: KeyValueChangeRecord<K, V>) => void) {
-    let record: KeyValueChangeRecord_<K, V>|null;
+    let record: KeyValueChangeRecord_<K, V> | null;
     for (record = this._mapHead; record !== null; record = record._next) {
       fn(record);
     }
   }
 
   forEachPreviousItem(fn: (r: KeyValueChangeRecord<K, V>) => void) {
-    let record: KeyValueChangeRecord_<K, V>|null;
+    let record: KeyValueChangeRecord_<K, V> | null;
     for (record = this._previousMapHead; record !== null; record = record._nextPrevious) {
       fn(record);
     }
   }
 
   forEachChangedItem(fn: (r: KeyValueChangeRecord<K, V>) => void) {
-    let record: KeyValueChangeRecord_<K, V>|null;
+    let record: KeyValueChangeRecord_<K, V> | null;
     for (record = this._changesHead; record !== null; record = record._nextChanged) {
       fn(record);
     }
   }
 
   forEachAddedItem(fn: (r: KeyValueChangeRecord<K, V>) => void) {
-    let record: KeyValueChangeRecord_<K, V>|null;
+    let record: KeyValueChangeRecord_<K, V> | null;
     for (record = this._additionsHead; record !== null; record = record._nextAdded) {
       fn(record);
     }
   }
 
   forEachRemovedItem(fn: (r: KeyValueChangeRecord<K, V>) => void) {
-    let record: KeyValueChangeRecord_<K, V>|null;
+    let record: KeyValueChangeRecord_<K, V> | null;
     for (record = this._removalsHead; record !== null; record = record._nextRemoved) {
       fn(record);
     }
   }
 
-  diff(map?: Map<any, any>|{[k: string]: any}|null): any {
+  diff(map?: Map<any, any> | {[k: string]: any} | null): any {
     if (!map) {
       map = new Map();
     } else if (!(map instanceof Map || isJsObject(map))) {
       throw new RuntimeError(
-          RuntimeErrorCode.INVALID_DIFFER_INPUT,
-          ngDevMode &&
-              `Error trying to diff '${stringify(map)}'. Only maps and objects are allowed`);
+        RuntimeErrorCode.INVALID_DIFFER_INPUT,
+        ngDevMode && `Error trying to diff '${stringify(map)}'. Only maps and objects are allowed`,
+      );
     }
 
     return this.check(map) ? this : null;
@@ -96,7 +101,7 @@ export class DefaultKeyValueDiffer<K, V> implements KeyValueDiffer<K, V>, KeyVal
    * Check the current state of the map vs the previous.
    * The algorithm is optimised for when the keys do no change.
    */
-  check(map: Map<any, any>|{[k: string]: any}): boolean {
+  check(map: Map<any, any> | {[k: string]: any}): boolean {
     this._reset();
 
     let insertBefore = this._mapHead;
@@ -121,8 +126,11 @@ export class DefaultKeyValueDiffer<K, V> implements KeyValueDiffer<K, V>, KeyVal
 
       this._removalsHead = insertBefore;
 
-      for (let record: KeyValueChangeRecord_<K, V>|null = insertBefore; record !== null;
-           record = record._nextRemoved) {
+      for (
+        let record: KeyValueChangeRecord_<K, V> | null = insertBefore;
+        record !== null;
+        record = record._nextRemoved
+      ) {
         if (record === this._mapHead) {
           this._mapHead = null;
         }
@@ -151,8 +159,9 @@ export class DefaultKeyValueDiffer<K, V> implements KeyValueDiffer<K, V>, KeyVal
    * - The return value is the new value for the insertion pointer.
    */
   private _insertBeforeOrAppend(
-      before: KeyValueChangeRecord_<K, V>|null,
-      record: KeyValueChangeRecord_<K, V>): KeyValueChangeRecord_<K, V>|null {
+    before: KeyValueChangeRecord_<K, V> | null,
+    record: KeyValueChangeRecord_<K, V>,
+  ): KeyValueChangeRecord_<K, V> | null {
     if (before) {
       const prev = before._prev;
       record._next = before;
@@ -208,7 +217,7 @@ export class DefaultKeyValueDiffer<K, V> implements KeyValueDiffer<K, V>, KeyVal
   /** @internal */
   _reset() {
     if (this.isDirty) {
-      let record: KeyValueChangeRecord_<K, V>|null;
+      let record: KeyValueChangeRecord_<K, V> | null;
       // let `_previousMapHead` contain the state of the map before the changes
       this._previousMapHead = this._mapHead;
       for (record = this._previousMapHead; record !== null; record = record._next) {
@@ -258,31 +267,31 @@ export class DefaultKeyValueDiffer<K, V> implements KeyValueDiffer<K, V>, KeyVal
   }
 
   /** @internal */
-  private _forEach<K, V>(obj: Map<K, V>|{[k: string]: V}, fn: (v: V, k: any) => void) {
+  private _forEach<K, V>(obj: Map<K, V> | {[k: string]: V}, fn: (v: V, k: any) => void) {
     if (obj instanceof Map) {
       obj.forEach(fn);
     } else {
-      Object.keys(obj).forEach(k => fn(obj[k], k));
+      Object.keys(obj).forEach((k) => fn(obj[k], k));
     }
   }
 }
 
 class KeyValueChangeRecord_<K, V> implements KeyValueChangeRecord<K, V> {
-  previousValue: V|null = null;
-  currentValue: V|null = null;
+  previousValue: V | null = null;
+  currentValue: V | null = null;
 
   /** @internal */
-  _nextPrevious: KeyValueChangeRecord_<K, V>|null = null;
+  _nextPrevious: KeyValueChangeRecord_<K, V> | null = null;
   /** @internal */
-  _next: KeyValueChangeRecord_<K, V>|null = null;
+  _next: KeyValueChangeRecord_<K, V> | null = null;
   /** @internal */
-  _prev: KeyValueChangeRecord_<K, V>|null = null;
+  _prev: KeyValueChangeRecord_<K, V> | null = null;
   /** @internal */
-  _nextAdded: KeyValueChangeRecord_<K, V>|null = null;
+  _nextAdded: KeyValueChangeRecord_<K, V> | null = null;
   /** @internal */
-  _nextRemoved: KeyValueChangeRecord_<K, V>|null = null;
+  _nextRemoved: KeyValueChangeRecord_<K, V> | null = null;
   /** @internal */
-  _nextChanged: KeyValueChangeRecord_<K, V>|null = null;
+  _nextChanged: KeyValueChangeRecord_<K, V> | null = null;
 
   constructor(public key: K) {}
 }
diff --git a/packages/core/src/change_detection/differs/iterable_differs.ts b/packages/core/src/change_detection/differs/iterable_differs.ts
index 83e385d3874e9..bf707efe225f7 100644
--- a/packages/core/src/change_detection/differs/iterable_differs.ts
+++ b/packages/core/src/change_detection/differs/iterable_differs.ts
@@ -12,14 +12,12 @@ import {Optional, SkipSelf} from '../../di/metadata';
 import {RuntimeError, RuntimeErrorCode} from '../../errors';
 import {DefaultIterableDifferFactory} from '../differs/default_iterable_differ';
 
-
-
 /**
  * A type describing supported iterable types.
  *
  * @publicApi
  */
-export type NgIterable<T> = Array<T>|Iterable<T>;
+export type NgIterable<T> = Array<T> | Iterable<T>;
 
 /**
  * A strategy for tracking changes over time to an iterable. Used by {@link NgForOf} to
@@ -35,7 +33,7 @@ export interface IterableDiffer<V> {
    * @returns an object describing the difference. The return value is only valid until the next
    * `diff()` invocation.
    */
-  diff(object: NgIterable<V>|undefined|null): IterableChanges<V>|null;
+  diff(object: NgIterable<V> | undefined | null): IterableChanges<V> | null;
 }
 
 /**
@@ -68,9 +66,12 @@ export interface IterableChanges<V> {
    *        of the item, after applying the operations up to this point.
    */
   forEachOperation(
-      fn:
-          (record: IterableChangeRecord<V>, previousIndex: number|null,
-           currentIndex: number|null) => void): void;
+    fn: (
+      record: IterableChangeRecord<V>,
+      previousIndex: number | null,
+      currentIndex: number | null,
+    ) => void,
+  ): void;
 
   /**
    * Iterate over changes in the order of original `Iterable` showing where the original items
@@ -101,10 +102,10 @@ export interface IterableChanges<V> {
  */
 export interface IterableChangeRecord<V> {
   /** Current index of the item in `Iterable` or null if removed. */
-  readonly currentIndex: number|null;
+  readonly currentIndex: number | null;
 
   /** Previous index of the item in `Iterable` or null if added. */
-  readonly previousIndex: number|null;
+  readonly previousIndex: number | null;
 
   /** The item. */
   readonly item: V;
@@ -168,7 +169,7 @@ export interface TrackByFunction<T> {
    * @param index The index of the item within the iterable.
    * @param item The item in the iterable.
    */
-  <U extends T>(index: number, item: T&U): any;
+  <U extends T>(index: number, item: T & U): any;
 }
 
 /**
@@ -192,8 +193,11 @@ export function defaultIterableDiffersFactory() {
  */
 export class IterableDiffers {
   /** @nocollapse */
-  static ɵprov = /** @pureOrBreakMyCode */ ɵɵdefineInjectable(
-      {token: IterableDiffers, providedIn: 'root', factory: defaultIterableDiffersFactory});
+  static ɵprov = /** @pureOrBreakMyCode */ ɵɵdefineInjectable({
+    token: IterableDiffers,
+    providedIn: 'root',
+    factory: defaultIterableDiffersFactory,
+  });
 
   constructor(private factories: IterableDifferFactory[]) {}
 
@@ -229,27 +233,29 @@ export class IterableDiffers {
   static extend(factories: IterableDifferFactory[]): StaticProvider {
     return {
       provide: IterableDiffers,
-      useFactory: (parent: IterableDiffers|null) => {
+      useFactory: (parent: IterableDiffers | null) => {
         // 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()]]
+      deps: [[IterableDiffers, new SkipSelf(), new Optional()]],
     };
   }
 
   find(iterable: any): IterableDifferFactory {
-    const factory = this.factories.find(f => f.supports(iterable));
+    const factory = this.factories.find((f) => f.supports(iterable));
     if (factory != null) {
       return factory;
     } else {
       throw new RuntimeError(
-          RuntimeErrorCode.NO_SUPPORTING_DIFFER_FACTORY,
-          ngDevMode &&
-              `Cannot find a differ supporting object '${iterable}' of type '${
-                  getTypeNameForDebugging(iterable)}'`);
+        RuntimeErrorCode.NO_SUPPORTING_DIFFER_FACTORY,
+        ngDevMode &&
+          `Cannot find a differ supporting object '${iterable}' of type '${getTypeNameForDebugging(
+            iterable,
+          )}'`,
+      );
     }
   }
 }
diff --git a/packages/core/src/change_detection/differs/keyvalue_differs.ts b/packages/core/src/change_detection/differs/keyvalue_differs.ts
index ae3a0e005ca7a..20971d54c7b1a 100644
--- a/packages/core/src/change_detection/differs/keyvalue_differs.ts
+++ b/packages/core/src/change_detection/differs/keyvalue_differs.ts
@@ -11,7 +11,6 @@ import {RuntimeError, RuntimeErrorCode} from '../../errors';
 
 import {DefaultKeyValueDifferFactory} from './default_keyvalue_differ';
 
-
 /**
  * A differ that tracks changes made to an object over time.
  *
@@ -25,7 +24,7 @@ export interface KeyValueDiffer<K, V> {
    * @returns an object describing the difference. The return value is only valid until the next
    * `diff()` invocation.
    */
-  diff(object: Map<K, V>): KeyValueChanges<K, V>|null;
+  diff(object: Map<K, V>): KeyValueChanges<K, V> | null;
 
   /**
    * Compute a difference between the previous state and the new `object` state.
@@ -34,7 +33,7 @@ export interface KeyValueDiffer<K, V> {
    * @returns an object describing the difference. The return value is only valid until the next
    * `diff()` invocation.
    */
-  diff(object: {[key: string]: V}): KeyValueChanges<string, V>|null;
+  diff(object: {[key: string]: V}): KeyValueChanges<string, V> | null;
   // TODO(TS2.1): diff<KP extends string>(this: KeyValueDiffer<KP, V>, object: Record<KP, V>):
   // KeyValueDiffer<KP, V>;
 }
@@ -88,12 +87,12 @@ export interface KeyValueChangeRecord<K, V> {
   /**
    * Current value for the key or `null` if removed.
    */
-  readonly currentValue: V|null;
+  readonly currentValue: V | null;
 
   /**
    * Previous value for the key or `null` if added.
    */
-  readonly previousValue: V|null;
+  readonly previousValue: V | null;
 }
 
 /**
@@ -124,8 +123,11 @@ export function defaultKeyValueDiffersFactory() {
  */
 export class KeyValueDiffers {
   /** @nocollapse */
-  static ɵprov = /** @pureOrBreakMyCode */ ɵɵdefineInjectable(
-      {token: KeyValueDiffers, providedIn: 'root', factory: defaultKeyValueDiffersFactory});
+  static ɵprov = /** @pureOrBreakMyCode */ ɵɵdefineInjectable({
+    token: KeyValueDiffers,
+    providedIn: 'root',
+    factory: defaultKeyValueDiffersFactory,
+  });
 
   /**
    * @deprecated v4.0.0 - Should be private.
@@ -174,17 +176,18 @@ export class KeyValueDiffers {
         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()]]
+      deps: [[KeyValueDiffers, new SkipSelf(), new Optional()]],
     };
   }
 
   find(kv: any): KeyValueDifferFactory {
-    const factory = this.factories.find(f => f.supports(kv));
+    const factory = this.factories.find((f) => f.supports(kv));
     if (factory) {
       return factory;
     }
     throw new RuntimeError(
-        RuntimeErrorCode.NO_SUPPORTING_DIFFER_FACTORY,
-        ngDevMode && `Cannot find a differ supporting object '${kv}'`);
+      RuntimeErrorCode.NO_SUPPORTING_DIFFER_FACTORY,
+      ngDevMode && `Cannot find a differ supporting object '${kv}'`,
+    );
   }
 }
diff --git a/packages/core/src/change_detection/scheduling/ng_zone_scheduling.ts b/packages/core/src/change_detection/scheduling/ng_zone_scheduling.ts
index 5b529b82d49b9..9d07ba9056258 100644
--- a/packages/core/src/change_detection/scheduling/ng_zone_scheduling.ts
+++ b/packages/core/src/change_detection/scheduling/ng_zone_scheduling.ts
@@ -9,7 +9,15 @@
 import {Subscription} from 'rxjs';
 
 import {ApplicationRef} from '../../application/application_ref';
-import {ENVIRONMENT_INITIALIZER, EnvironmentProviders, inject, Injectable, InjectionToken, makeEnvironmentProviders, StaticProvider} from '../../di';
+import {
+  ENVIRONMENT_INITIALIZER,
+  EnvironmentProviders,
+  inject,
+  Injectable,
+  InjectionToken,
+  makeEnvironmentProviders,
+  StaticProvider,
+} from '../../di';
 import {ErrorHandler, INTERNAL_APPLICATION_ERROR_HANDLER} from '../../error_handler';
 import {RuntimeError, RuntimeErrorCode} from '../../errors';
 import {PendingTasks} from '../../pending_tasks';
@@ -45,7 +53,7 @@ export class NgZoneChangeDetectionScheduler {
         this.zone.run(() => {
           this.applicationRef.tick();
         });
-      }
+      },
     });
   }
 
@@ -54,31 +62,39 @@ export class NgZoneChangeDetectionScheduler {
   }
 }
 
-
 /**
  * Internal token used to verify that `provideZoneChangeDetection` is not used
  * with the bootstrapModule API.
  */
 export const PROVIDED_NG_ZONE = new InjectionToken<boolean>(
-    (typeof ngDevMode === 'undefined' || ngDevMode) ? 'provideZoneChangeDetection token' : '');
+  typeof ngDevMode === 'undefined' || ngDevMode ? 'provideZoneChangeDetection token' : '',
+);
 
-export function internalProvideZoneChangeDetection(
-    {ngZoneFactory, ignoreChangesOutsideZone}:
-        {ngZoneFactory: () => NgZone, ignoreChangesOutsideZone?: boolean}): StaticProvider[] {
+export function internalProvideZoneChangeDetection({
+  ngZoneFactory,
+  ignoreChangesOutsideZone,
+}: {
+  ngZoneFactory: () => NgZone;
+  ignoreChangesOutsideZone?: boolean;
+}): StaticProvider[] {
   return [
     {provide: NgZone, useFactory: ngZoneFactory},
     {
       provide: ENVIRONMENT_INITIALIZER,
       multi: true,
       useFactory: () => {
-        const ngZoneChangeDetectionScheduler =
-            inject(NgZoneChangeDetectionScheduler, {optional: true});
-        if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
-            ngZoneChangeDetectionScheduler === null) {
+        const ngZoneChangeDetectionScheduler = inject(NgZoneChangeDetectionScheduler, {
+          optional: true,
+        });
+        if (
+          (typeof ngDevMode === 'undefined' || ngDevMode) &&
+          ngZoneChangeDetectionScheduler === null
+        ) {
           throw new RuntimeError(
-              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.');
+            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();
       },
@@ -91,7 +107,7 @@ export function internalProvideZoneChangeDetection(
         return () => {
           service.initialize();
         };
-      }
+      },
     },
     {provide: INTERNAL_APPLICATION_ERROR_HANDLER, useFactory: ngZoneApplicationErrorHandlerFactory},
     // Always disable scheduler whenever explicitly disabled, even if another place called
@@ -99,9 +115,9 @@ export function internalProvideZoneChangeDetection(
     ignoreChangesOutsideZone === true ? {provide: ZONELESS_SCHEDULER_DISABLED, useValue: true} : [],
     // TODO(atscott): This should move to the same places that zone change detection is provided by
     // default instead of being in the zone scheduling providers.
-    alwaysProvideZonelessScheduler || ignoreChangesOutsideZone === false ?
-        {provide: ChangeDetectionScheduler, useExisting: ChangeDetectionSchedulerImpl} :
-        [],
+    alwaysProvideZonelessScheduler || ignoreChangesOutsideZone === false
+      ? {provide: ChangeDetectionScheduler, useExisting: ChangeDetectionSchedulerImpl}
+      : [],
   ];
 }
 
@@ -141,11 +157,12 @@ export function provideZoneChangeDetection(options?: NgZoneOptions): Environment
       }
       return new NgZone(ngZoneOptions);
     },
-    ignoreChangesOutsideZone
+    ignoreChangesOutsideZone,
   });
   return makeEnvironmentProviders([
-    (typeof ngDevMode === 'undefined' || ngDevMode) ? {provide: PROVIDED_NG_ZONE, useValue: true} :
-                                                      [],
+    typeof ngDevMode === 'undefined' || ngDevMode
+      ? {provide: PROVIDED_NG_ZONE, useValue: true}
+      : [],
     zoneProviders,
   ]);
 }
@@ -240,33 +257,40 @@ export class ZoneStablePendingTask {
     }
     this.initialized = true;
 
-    let task: number|null = null;
+    let task: number | null = 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();
+      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;
-          }
-        });
-      }));
+          // 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();
-    }));
+    this.subscription.add(
+      this.zone.onUnstable.subscribe(() => {
+        NgZone.assertInAngularZone();
+        task ??= this.pendingTasks.add();
+      }),
+    );
   }
 
-
   ngOnDestroy() {
     this.subscription.unsubscribe();
   }
diff --git a/packages/core/src/change_detection/scheduling/zoneless_scheduling.ts b/packages/core/src/change_detection/scheduling/zoneless_scheduling.ts
index 7a13b6df3bf61..0fede95715fab 100644
--- a/packages/core/src/change_detection/scheduling/zoneless_scheduling.ts
+++ b/packages/core/src/change_detection/scheduling/zoneless_scheduling.ts
@@ -8,8 +8,6 @@
 
 import {InjectionToken} from '../../di/injection_token';
 
-
-
 export const enum NotificationSource {
   // Change detection needs to run in order to synchronize application state
   // with the DOM when the following notifications are received:
@@ -60,8 +58,10 @@ export abstract class ChangeDetectionScheduler {
 
 /** Token used to indicate if zoneless was enabled via provideZonelessChangeDetection(). */
 export const ZONELESS_ENABLED = new InjectionToken<boolean>(
-    typeof ngDevMode === 'undefined' || ngDevMode ? 'Zoneless enabled' : '',
-    {providedIn: 'root', factory: () => false});
+  typeof ngDevMode === 'undefined' || ngDevMode ? 'Zoneless enabled' : '',
+  {providedIn: 'root', factory: () => false},
+);
 
 export const ZONELESS_SCHEDULER_DISABLED = new InjectionToken<boolean>(
-    typeof ngDevMode === 'undefined' || ngDevMode ? 'scheduler disabled' : '');
+  typeof ngDevMode === 'undefined' || ngDevMode ? 'scheduler disabled' : '',
+);
diff --git a/packages/core/src/change_detection/scheduling/zoneless_scheduling_impl.ts b/packages/core/src/change_detection/scheduling/zoneless_scheduling_impl.ts
index 27d8d8ecf7e63..369940fc9593c 100644
--- a/packages/core/src/change_detection/scheduling/zoneless_scheduling_impl.ts
+++ b/packages/core/src/change_detection/scheduling/zoneless_scheduling_impl.ts
@@ -15,11 +15,19 @@ import {EnvironmentProviders} from '../../di/interface/provider';
 import {makeEnvironmentProviders} from '../../di/provider_collection';
 import {RuntimeError, RuntimeErrorCode} from '../../errors';
 import {PendingTasks} from '../../pending_tasks';
-import {scheduleCallbackWithMicrotask, scheduleCallbackWithRafRace} from '../../util/callback_scheduler';
+import {
+  scheduleCallbackWithMicrotask,
+  scheduleCallbackWithRafRace,
+} from '../../util/callback_scheduler';
 import {performanceMarkFeature} from '../../util/performance';
 import {NgZone, NoopNgZone} from '../../zone/ng_zone';
 
-import {ChangeDetectionScheduler, NotificationSource, ZONELESS_ENABLED, ZONELESS_SCHEDULER_DISABLED} from './zoneless_scheduling';
+import {
+  ChangeDetectionScheduler,
+  NotificationSource,
+  ZONELESS_ENABLED,
+  ZONELESS_SCHEDULER_DISABLED,
+} from './zoneless_scheduling';
 
 const CONSECUTIVE_MICROTASK_NOTIFICATION_LIMIT = 100;
 let consecutiveMicrotaskNotifications = 0;
@@ -36,10 +44,11 @@ function trackMicrotaskNotificationForDebugging() {
 
   if (consecutiveMicrotaskNotifications === CONSECUTIVE_MICROTASK_NOTIFICATION_LIMIT) {
     throw new RuntimeError(
-        RuntimeErrorCode.INFINITE_CHANGE_DETECTION,
-        'Angular could not stabilize because there were endless change notifications within the browser event loop. ' +
-            'The stack from the last several notifications: \n' +
-            stackFromLastFewNotifications.join('\n'));
+      RuntimeErrorCode.INFINITE_CHANGE_DETECTION,
+      'Angular could not stabilize because there were endless change notifications within the browser event loop. ' +
+        'The stack from the last several notifications: \n' +
+        stackFromLastFewNotifications.join('\n'),
+    );
   }
 }
 
@@ -50,42 +59,47 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {
   private readonly ngZone = inject(NgZone);
   private readonly zonelessEnabled = inject(ZONELESS_ENABLED);
   private readonly disableScheduling =
-      inject(ZONELESS_SCHEDULER_DISABLED, {optional: true}) ?? false;
+    inject(ZONELESS_SCHEDULER_DISABLED, {optional: true}) ?? false;
   private readonly zoneIsDefined = typeof Zone !== 'undefined' && !!Zone.root.run;
   private readonly schedulerTickApplyArgs = [{data: {'__scheduler_tick__': true}}];
   private readonly subscriptions = new Subscription();
 
-  private cancelScheduledCallback: null|(() => void) = null;
+  private cancelScheduledCallback: null | (() => void) = null;
   private shouldRefreshViews = false;
-  private pendingRenderTaskId: number|null = null;
+  private pendingRenderTaskId: number | null = null;
   private useMicrotaskScheduler = false;
   runningTick = false;
 
   constructor() {
-    this.subscriptions.add(this.appRef.afterTick.subscribe(() => {
-      // If the scheduler isn't running a tick but the application ticked, that means
-      // someone called ApplicationRef.tick manually. In this case, we should cancel
-      // any change detections that had been scheduled so we don't run an extra one.
-      if (!this.runningTick) {
-        this.cleanup();
-      }
-    }));
-    this.subscriptions.add(this.ngZone.onUnstable.subscribe(() => {
-      // If the zone becomes unstable when we're not running tick (this happens from the zone.run),
-      // we should cancel any scheduled change detection here because at this point we
-      // know that the zone will stabilize at some point and run change detection itself.
-      if (!this.runningTick) {
-        this.cleanup();
-      }
-    }));
+    this.subscriptions.add(
+      this.appRef.afterTick.subscribe(() => {
+        // If the scheduler isn't running a tick but the application ticked, that means
+        // someone called ApplicationRef.tick manually. In this case, we should cancel
+        // any change detections that had been scheduled so we don't run an extra one.
+        if (!this.runningTick) {
+          this.cleanup();
+        }
+      }),
+    );
+    this.subscriptions.add(
+      this.ngZone.onUnstable.subscribe(() => {
+        // If the zone becomes unstable when we're not running tick (this happens from the zone.run),
+        // we should cancel any scheduled change detection here because at this point we
+        // know that the zone will stabilize at some point and run change detection itself.
+        if (!this.runningTick) {
+          this.cleanup();
+        }
+      }),
+    );
 
     // TODO(atscott): These conditions will need to change when zoneless is the default
     // Instead, they should flip to checking if ZoneJS scheduling is provided
-    this.disableScheduling ||= !this.zonelessEnabled &&
-        // NoopNgZone without enabling zoneless means no scheduling whatsoever
-        (this.ngZone instanceof NoopNgZone ||
-         // The same goes for the lack of Zone without enabling zoneless scheduling
-         !this.zoneIsDefined);
+    this.disableScheduling ||=
+      !this.zonelessEnabled &&
+      // NoopNgZone without enabling zoneless means no scheduling whatsoever
+      (this.ngZone instanceof NoopNgZone ||
+        // The same goes for the lack of Zone without enabling zoneless scheduling
+        !this.zoneIsDefined);
   }
 
   notify(source: NotificationSource): void {
@@ -126,7 +140,7 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {
       return;
     }
 
-    if ((typeof ngDevMode === 'undefined' || ngDevMode)) {
+    if (typeof ngDevMode === 'undefined' || ngDevMode) {
       if (this.useMicrotaskScheduler) {
         trackMicrotaskNotificationForDebugging();
       } else {
@@ -135,8 +149,9 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {
       }
     }
 
-    const scheduleCallback =
-        this.useMicrotaskScheduler ? scheduleCallbackWithMicrotask : scheduleCallbackWithRafRace;
+    const scheduleCallback = this.useMicrotaskScheduler
+      ? scheduleCallbackWithMicrotask
+      : scheduleCallbackWithRafRace;
     this.pendingRenderTaskId = this.taskService.add();
     if (this.zoneIsDefined) {
       Zone.root.run(() => {
@@ -187,10 +202,14 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {
 
     const task = this.taskService.add();
     try {
-      this.ngZone.run(() => {
-        this.runningTick = true;
-        this.appRef._tick(shouldRefreshViews);
-      }, undefined, this.schedulerTickApplyArgs);
+      this.ngZone.run(
+        () => {
+          this.runningTick = true;
+          this.appRef._tick(shouldRefreshViews);
+        },
+        undefined,
+        this.schedulerTickApplyArgs,
+      );
     } catch (e: unknown) {
       this.taskService.remove(task);
       throw e;
@@ -234,7 +253,6 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {
   }
 }
 
-
 /**
  * Provides change detection without ZoneJS for the application bootstrapped using
  * `bootstrapApplication`.
diff --git a/packages/core/src/compiler/compiler_facade.ts b/packages/core/src/compiler/compiler_facade.ts
index d81956de3eff3..53c0a3fbc7fcc 100644
--- a/packages/core/src/compiler/compiler_facade.ts
+++ b/packages/core/src/compiler/compiler_facade.ts
@@ -16,7 +16,7 @@ export const enum JitCompilerUsage {
 
 interface JitCompilerUsageRequest {
   usage: JitCompilerUsage;
-  kind: 'directive'|'component'|'pipe'|'injectable'|'NgModule';
+  kind: 'directive' | 'component' | 'pipe' | 'injectable' | 'NgModule';
   type: Type;
 }
 
@@ -31,24 +31,17 @@ export function getCompilerFacade(request: JitCompilerUsageRequest): CompilerFac
     // console.
     console.error(`JIT compilation failed for ${request.kind}`, request.type);
 
-    let message = `The ${request.kind} '${
-        request
-            .type.name}' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.\n\n`;
+    let message = `The ${request.kind} '${request.type.name}' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.\n\n`;
     if (request.usage === JitCompilerUsage.PartialDeclaration) {
       message += `The ${request.kind} is part of a library that has been partially compiled.\n`;
-      message +=
-          `However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.\n`;
+      message += `However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.\n`;
       message += '\n';
-      message +=
-          `Ideally, the library is processed using the Angular Linker to become fully AOT compiled.\n`;
+      message += `Ideally, the library is processed using the Angular Linker to become fully AOT compiled.\n`;
     } else {
-      message +=
-          `JIT compilation is discouraged for production use-cases! Consider using AOT mode instead.\n`;
+      message += `JIT compilation is discouraged for production use-cases! Consider using AOT mode instead.\n`;
     }
-    message +=
-        `Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',\n`;
-    message +=
-        `or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.`;
+    message += `Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',\n`;
+    message += `or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.`;
     throw new Error(message);
   } else {
     throw new Error('JIT compiler unavailable');
diff --git a/packages/core/src/compiler/compiler_facade_interface.ts b/packages/core/src/compiler/compiler_facade_interface.ts
index 6330b161ff648..c89bd84815346 100644
--- a/packages/core/src/compiler/compiler_facade_interface.ts
+++ b/packages/core/src/compiler/compiler_facade_interface.ts
@@ -26,45 +26,83 @@ export interface ExportedCompilerFacade {
 }
 
 export interface CompilerFacade {
-  compilePipe(angularCoreEnv: CoreEnvironment, sourceMapUrl: string, meta: R3PipeMetadataFacade):
-      any;
+  compilePipe(
+    angularCoreEnv: CoreEnvironment,
+    sourceMapUrl: string,
+    meta: R3PipeMetadataFacade,
+  ): any;
   compilePipeDeclaration(
-      angularCoreEnv: CoreEnvironment, sourceMapUrl: string, declaration: R3DeclarePipeFacade): any;
+    angularCoreEnv: CoreEnvironment,
+    sourceMapUrl: string,
+    declaration: R3DeclarePipeFacade,
+  ): any;
   compileInjectable(
-      angularCoreEnv: CoreEnvironment, sourceMapUrl: string, meta: R3InjectableMetadataFacade): any;
+    angularCoreEnv: CoreEnvironment,
+    sourceMapUrl: string,
+    meta: R3InjectableMetadataFacade,
+  ): any;
   compileInjectableDeclaration(
-      angularCoreEnv: CoreEnvironment, sourceMapUrl: string, meta: R3DeclareInjectableFacade): any;
+    angularCoreEnv: CoreEnvironment,
+    sourceMapUrl: string,
+    meta: R3DeclareInjectableFacade,
+  ): any;
   compileInjector(
-      angularCoreEnv: CoreEnvironment, sourceMapUrl: string, meta: R3InjectorMetadataFacade): any;
+    angularCoreEnv: CoreEnvironment,
+    sourceMapUrl: string,
+    meta: R3InjectorMetadataFacade,
+  ): any;
   compileInjectorDeclaration(
-      angularCoreEnv: CoreEnvironment, sourceMapUrl: string,
-      declaration: R3DeclareInjectorFacade): any;
+    angularCoreEnv: CoreEnvironment,
+    sourceMapUrl: string,
+    declaration: R3DeclareInjectorFacade,
+  ): any;
   compileNgModule(
-      angularCoreEnv: CoreEnvironment, sourceMapUrl: string, meta: R3NgModuleMetadataFacade): any;
+    angularCoreEnv: CoreEnvironment,
+    sourceMapUrl: string,
+    meta: R3NgModuleMetadataFacade,
+  ): any;
   compileNgModuleDeclaration(
-      angularCoreEnv: CoreEnvironment, sourceMapUrl: string,
-      declaration: R3DeclareNgModuleFacade): any;
+    angularCoreEnv: CoreEnvironment,
+    sourceMapUrl: string,
+    declaration: R3DeclareNgModuleFacade,
+  ): any;
   compileDirective(
-      angularCoreEnv: CoreEnvironment, sourceMapUrl: string, meta: R3DirectiveMetadataFacade): any;
+    angularCoreEnv: CoreEnvironment,
+    sourceMapUrl: string,
+    meta: R3DirectiveMetadataFacade,
+  ): any;
   compileDirectiveDeclaration(
-      angularCoreEnv: CoreEnvironment, sourceMapUrl: string,
-      declaration: R3DeclareDirectiveFacade): any;
+    angularCoreEnv: CoreEnvironment,
+    sourceMapUrl: string,
+    declaration: R3DeclareDirectiveFacade,
+  ): any;
   compileComponent(
-      angularCoreEnv: CoreEnvironment, sourceMapUrl: string, meta: R3ComponentMetadataFacade): any;
+    angularCoreEnv: CoreEnvironment,
+    sourceMapUrl: string,
+    meta: R3ComponentMetadataFacade,
+  ): any;
   compileComponentDeclaration(
-      angularCoreEnv: CoreEnvironment, sourceMapUrl: string,
-      declaration: R3DeclareComponentFacade): any;
+    angularCoreEnv: CoreEnvironment,
+    sourceMapUrl: string,
+    declaration: R3DeclareComponentFacade,
+  ): any;
   compileFactory(
-      angularCoreEnv: CoreEnvironment, sourceMapUrl: string, meta: R3FactoryDefMetadataFacade): any;
+    angularCoreEnv: CoreEnvironment,
+    sourceMapUrl: string,
+    meta: R3FactoryDefMetadataFacade,
+  ): any;
   compileFactoryDeclaration(
-      angularCoreEnv: CoreEnvironment, sourceMapUrl: string, meta: R3DeclareFactoryFacade): any;
+    angularCoreEnv: CoreEnvironment,
+    sourceMapUrl: string,
+    meta: R3DeclareFactoryFacade,
+  ): any;
 
   createParseSourceSpan(kind: string, typeName: string, sourceUrl: string): ParseSourceSpan;
 
   FactoryTarget: typeof FactoryTarget;
   // Note that we do not use `{new(): ResourceLoader}` here because
   // the resource loader class is abstract and not constructable.
-  ResourceLoader: Function&{prototype: ResourceLoader};
+  ResourceLoader: Function & {prototype: ResourceLoader};
 }
 
 export interface CoreEnvironment {
@@ -72,7 +110,7 @@ export interface CoreEnvironment {
 }
 
 export type ResourceLoader = {
-  get(url: string): Promise<string>|string;
+  get(url: string): Promise<string> | string;
 };
 
 export type Provider = unknown;
@@ -89,7 +127,7 @@ export enum FactoryTarget {
 
 export interface R3DependencyMetadataFacade {
   token: OpaqueValue;
-  attribute: string|null;
+  attribute: string | null;
   host: boolean;
   optional: boolean;
   self: boolean;
@@ -117,7 +155,7 @@ export interface R3InjectableMetadataFacade {
   name: string;
   type: Type;
   typeArgumentCount: number;
-  providedIn?: Type|'root'|'platform'|'any'|null;
+  providedIn?: Type | 'root' | 'platform' | 'any' | null;
   useClass?: OpaqueValue;
   useFactory?: OpaqueValue;
   useExisting?: OpaqueValue;
@@ -131,8 +169,8 @@ export interface R3NgModuleMetadataFacade {
   declarations: Function[];
   imports: Function[];
   exports: Function[];
-  schemas: {name: string}[]|null;
-  id: string|null;
+  schemas: {name: string}[] | null;
+  id: string | null;
 }
 
 export interface R3InjectorMetadataFacade {
@@ -152,30 +190,30 @@ export interface R3DirectiveMetadataFacade {
   name: string;
   type: Type;
   typeSourceSpan: ParseSourceSpan;
-  selector: string|null;
+  selector: string | null;
   queries: R3QueryMetadataFacade[];
   host: {[key: string]: string};
   propMetadata: {[key: string]: OpaqueValue[]};
-  lifecycle: {usesOnChanges: boolean;};
-  inputs: (string|{name: string, alias?: string, required?: boolean})[];
+  lifecycle: {usesOnChanges: boolean};
+  inputs: (string | {name: string; alias?: string; required?: boolean})[];
   outputs: string[];
   usesInheritance: boolean;
-  exportAs: string[]|null;
-  providers: Provider[]|null;
+  exportAs: string[] | null;
+  providers: Provider[] | null;
   viewQueries: R3QueryMetadataFacade[];
   isStandalone: boolean;
   isSignal: boolean;
-  hostDirectives: R3HostDirectiveMetadataFacade[]|null;
+  hostDirectives: R3HostDirectiveMetadataFacade[] | null;
 }
 
 export interface R3ComponentMetadataFacade extends R3DirectiveMetadataFacade {
   template: string;
   preserveWhitespaces: boolean;
-  animations: OpaqueValue[]|undefined;
+  animations: OpaqueValue[] | undefined;
   declarations: R3TemplateDependencyFacade[];
   styles: string[];
   encapsulation: ViewEncapsulation;
-  viewProviders: Provider[]|null;
+  viewProviders: Provider[] | null;
   interpolation?: [string, string];
   changeDetection?: ChangeDetectionStrategy;
 }
@@ -183,19 +221,22 @@ export interface R3ComponentMetadataFacade extends R3DirectiveMetadataFacade {
 // TODO(legacy-partial-output-inputs): Remove in v18.
 // https://github.com/angular/angular/blob/d4b423690210872b5c32a322a6090beda30b05a3/packages/core/src/compiler/compiler_facade_interface.ts#L197-L199
 export type LegacyInputPartialMapping =
-    string|[bindingPropertyName: string, classPropertyName: string, transformFunction?: Function];
+  | string
+  | [bindingPropertyName: string, classPropertyName: string, transformFunction?: Function];
 
 export interface R3DeclareDirectiveFacade {
   selector?: string;
   type: Type;
   inputs?: {
-    [fieldName: string]: {
-      classPropertyName: string,
-      publicName: string,
-      isSignal: boolean,
-      isRequired: boolean,
-      transformFunction: Function|null,
-    }|LegacyInputPartialMapping;
+    [fieldName: string]:
+      | {
+          classPropertyName: string;
+          publicName: string;
+          isSignal: boolean;
+          isRequired: boolean;
+          transformFunction: Function | null;
+        }
+      | LegacyInputPartialMapping;
   };
   outputs?: {[classPropertyName: string]: string};
   host?: {
@@ -212,7 +253,7 @@ export interface R3DeclareDirectiveFacade {
   usesInheritance?: boolean;
   usesOnChanges?: boolean;
   isStandalone?: boolean;
-  hostDirectives?: R3HostDirectiveMetadataFacade[]|null;
+  hostDirectives?: R3HostDirectiveMetadataFacade[] | null;
   isSignal?: boolean;
 }
 
@@ -227,10 +268,9 @@ export interface R3DeclareComponentFacade extends R3DeclareDirectiveFacade {
   // Pre-standalone libraries have separate component/directive/pipe fields:
   components?: R3DeclareDirectiveDependencyFacade[];
   directives?: R3DeclareDirectiveDependencyFacade[];
-  pipes?: {[pipeName: string]: OpaqueValue|(() => OpaqueValue)};
+  pipes?: {[pipeName: string]: OpaqueValue | (() => OpaqueValue)};
 
-
-  deferBlockDependencies?: (() => Promise<Type>| null)[];
+  deferBlockDependencies?: (() => Promise<Type> | null)[];
   viewProviders?: OpaqueValue;
   animations?: OpaqueValue;
   changeDetection?: ChangeDetectionStrategy;
@@ -240,14 +280,17 @@ export interface R3DeclareComponentFacade extends R3DeclareDirectiveFacade {
 }
 
 export type R3DeclareTemplateDependencyFacade = {
-  kind: string
-}&(R3DeclareDirectiveDependencyFacade|R3DeclarePipeDependencyFacade|
-   R3DeclareNgModuleDependencyFacade);
+  kind: string;
+} & (
+  | R3DeclareDirectiveDependencyFacade
+  | R3DeclarePipeDependencyFacade
+  | R3DeclareNgModuleDependencyFacade
+);
 
 export interface R3DeclareDirectiveDependencyFacade {
-  kind?: 'directive'|'component';
+  kind?: 'directive' | 'component';
   selector: string;
-  type: OpaqueValue|(() => OpaqueValue);
+  type: OpaqueValue | (() => OpaqueValue);
   inputs?: string[];
   outputs?: string[];
   exportAs?: string[];
@@ -256,12 +299,12 @@ export interface R3DeclareDirectiveDependencyFacade {
 export interface R3DeclarePipeDependencyFacade {
   kind?: 'pipe';
   name: string;
-  type: OpaqueValue|(() => OpaqueValue);
+  type: OpaqueValue | (() => OpaqueValue);
 }
 
 export interface R3DeclareNgModuleDependencyFacade {
   kind: 'ngmodule';
-  type: OpaqueValue|(() => OpaqueValue);
+  type: OpaqueValue | (() => OpaqueValue);
 }
 
 export enum R3TemplateDependencyKind {
@@ -272,25 +315,25 @@ export enum R3TemplateDependencyKind {
 
 export interface R3TemplateDependencyFacade {
   kind: R3TemplateDependencyKind;
-  type: OpaqueValue|(() => OpaqueValue);
+  type: OpaqueValue | (() => OpaqueValue);
 }
 export interface R3FactoryDefMetadataFacade {
   name: string;
   type: Type;
   typeArgumentCount: number;
-  deps: R3DependencyMetadataFacade[]|null;
+  deps: R3DependencyMetadataFacade[] | null;
   target: FactoryTarget;
 }
 
 export interface R3DeclareFactoryFacade {
   type: Type;
-  deps: R3DeclareDependencyMetadataFacade[]|'invalid'|null;
+  deps: R3DeclareDependencyMetadataFacade[] | 'invalid' | null;
   target: FactoryTarget;
 }
 
 export interface R3DeclareInjectableFacade {
   type: Type;
-  providedIn?: Type|'root'|'platform'|'any'|null;
+  providedIn?: Type | 'root' | 'platform' | 'any' | null;
   useClass?: OpaqueValue;
   useFactory?: OpaqueValue;
   useExisting?: OpaqueValue;
@@ -302,7 +345,7 @@ export enum ViewEncapsulation {
   Emulated = 0,
   // Historically the 1 value was for `Native` encapsulation which has been removed as of v11.
   None = 2,
-  ShadowDom = 3
+  ShadowDom = 3,
 }
 
 export type ChangeDetectionStrategy = number;
@@ -310,10 +353,10 @@ export type ChangeDetectionStrategy = number;
 export interface R3QueryMetadataFacade {
   propertyName: string;
   first: boolean;
-  predicate: OpaqueValue|string[];
+  predicate: OpaqueValue | string[];
   descendants: boolean;
   emitDistinctChangesOnly: boolean;
-  read: OpaqueValue|null;
+  read: OpaqueValue | null;
   static: boolean;
   isSignal: boolean;
 }
@@ -321,7 +364,7 @@ export interface R3QueryMetadataFacade {
 export interface R3DeclareQueryMetadataFacade {
   propertyName: string;
   first?: boolean;
-  predicate: OpaqueValue|string[];
+  predicate: OpaqueValue | string[];
   descendants?: boolean;
   read?: OpaqueValue;
   static?: boolean;
@@ -337,10 +380,10 @@ export interface R3DeclareInjectorFacade {
 
 export interface R3DeclareNgModuleFacade {
   type: Type;
-  bootstrap?: OpaqueValue[]|(() => OpaqueValue[]);
-  declarations?: OpaqueValue[]|(() => OpaqueValue[]);
-  imports?: OpaqueValue[]|(() => OpaqueValue[]);
-  exports?: OpaqueValue[]|(() => OpaqueValue[]);
+  bootstrap?: OpaqueValue[] | (() => OpaqueValue[]);
+  declarations?: OpaqueValue[] | (() => OpaqueValue[]);
+  imports?: OpaqueValue[] | (() => OpaqueValue[]);
+  exports?: OpaqueValue[] | (() => OpaqueValue[]);
   schemas?: OpaqueValue[];
   id?: OpaqueValue;
 }
diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
index 3d94a7e371617..af451cb3a873a 100644
--- a/packages/core/src/core.ts
+++ b/packages/core/src/core.ts
@@ -24,24 +24,63 @@ export * from './metadata';
 export * from './version';
 export {TypeDecorator} from './util/decorators';
 export * from './di';
-export {BootstrapOptions, ApplicationRef, NgProbeToken, APP_BOOTSTRAP_LISTENER} from './application/application_ref';
+export {
+  BootstrapOptions,
+  ApplicationRef,
+  NgProbeToken,
+  APP_BOOTSTRAP_LISTENER,
+} from './application/application_ref';
 export {PlatformRef} from './platform/platform_ref';
-export {createPlatform, createPlatformFactory, assertPlatform, destroyPlatform, getPlatform} from './platform/platform';
-export {provideZoneChangeDetection, NgZoneOptions} from './change_detection/scheduling/ng_zone_scheduling';
+export {
+  createPlatform,
+  createPlatformFactory,
+  assertPlatform,
+  destroyPlatform,
+  getPlatform,
+} from './platform/platform';
+export {
+  provideZoneChangeDetection,
+  NgZoneOptions,
+} from './change_detection/scheduling/ng_zone_scheduling';
 export {provideExperimentalZonelessChangeDetection} from './change_detection/scheduling/zoneless_scheduling_impl';
 export {ExperimentalPendingTasks} from './pending_tasks';
 export {enableProdMode, isDevMode} from './util/is_dev_mode';
-export {APP_ID, PACKAGE_ROOT_URL, PLATFORM_INITIALIZER, PLATFORM_ID, ANIMATION_MODULE_TYPE, CSP_NONCE} from './application/application_tokens';
+export {
+  APP_ID,
+  PACKAGE_ROOT_URL,
+  PLATFORM_INITIALIZER,
+  PLATFORM_ID,
+  ANIMATION_MODULE_TYPE,
+  CSP_NONCE,
+} from './application/application_tokens';
 export {APP_INITIALIZER, ApplicationInitStatus} from './application/application_init';
 export * from './zone';
 export * from './render';
 export * from './linker';
 export * from './linker/ng_module_factory_loader_impl';
-export {DebugElement, DebugEventListener, DebugNode, asNativeElements, getDebugNode, Predicate} from './debug/debug_node';
-export {GetTestability, Testability, TestabilityRegistry, setTestabilityGetter} from './testability/testability';
+export {
+  DebugElement,
+  DebugEventListener,
+  DebugNode,
+  asNativeElements,
+  getDebugNode,
+  Predicate,
+} from './debug/debug_node';
+export {
+  GetTestability,
+  Testability,
+  TestabilityRegistry,
+  setTestabilityGetter,
+} from './testability/testability';
 export * from './change_detection';
 export * from './platform/platform_core_providers';
-export {TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID, DEFAULT_CURRENCY_CODE, MissingTranslationStrategy} from './i18n/tokens';
+export {
+  TRANSLATIONS,
+  TRANSLATIONS_FORMAT,
+  LOCALE_ID,
+  DEFAULT_CURRENCY_CODE,
+  MissingTranslationStrategy,
+} from './i18n/tokens';
 export {ApplicationModule} from './application/application_module';
 export {AbstractType, Type} from './interface/type';
 export {EventEmitter} from './event_emitter';
@@ -51,10 +90,20 @@ export * from './core_render3_private_export';
 export * from './core_reactivity_export';
 export {SecurityContext} from './sanitization/security';
 export {Sanitizer} from './sanitization/sanitizer';
-export {createNgModule, createNgModuleRef, createEnvironmentInjector} from './render3/ng_module_ref';
+export {
+  createNgModule,
+  createNgModuleRef,
+  createEnvironmentInjector,
+} from './render3/ng_module_ref';
 export {createComponent, reflectComponentType, ComponentMirror} from './render3/component';
 export {isStandalone} from './render3/definition';
-export {AfterRenderRef, AfterRenderOptions, AfterRenderPhase, afterRender, afterNextRender} from './render3/after_render_hooks';
+export {
+  AfterRenderRef,
+  AfterRenderOptions,
+  AfterRenderPhase,
+  afterRender,
+  afterNextRender,
+} from './render3/after_render_hooks';
 export {ApplicationConfig, mergeApplicationConfig} from './application/application_config';
 export {makeStateKey, StateKey, TransferState} from './transfer_state';
 export {booleanAttribute, numberAttribute} from './util/coercion';
@@ -64,12 +113,13 @@ if (typeof ngDevMode !== 'undefined' && ngDevMode) {
   // This helper is to give a reasonable error message to people upgrading to v9 that have not yet
   // installed `@angular/localize` in their app.
   // tslint:disable-next-line: no-toplevel-property-access
-  global.$localize ??= function() {
+  global.$localize ??= function () {
     throw new Error(
-        'It looks like your application or one of its dependencies is using i18n.\n' +
+      'It looks like your application or one of its dependencies is using i18n.\n' +
         'Angular 9 introduced a global `$localize()` function that needs to be loaded.\n' +
         'Please run `ng add @angular/localize` from the Angular CLI.\n' +
-        '(For non-CLI projects, add `import \'@angular/localize/init\';` to your `polyfills.ts` file.\n' +
-        'For server-side rendering applications add the import to your `main.server.ts` file.)');
+        "(For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file.\n" +
+        'For server-side rendering applications add the import to your `main.server.ts` file.)',
+    );
   };
 }
diff --git a/packages/core/src/core_private_export.ts b/packages/core/src/core_private_export.ts
index 18a6750c546c3..8be806b6efe15 100644
--- a/packages/core/src/core_private_export.ts
+++ b/packages/core/src/core_private_export.ts
@@ -7,41 +7,119 @@
  */
 
 export {setAlternateWeakRefImpl as ɵsetAlternateWeakRefImpl} from '../primitives/signals';
-export {detectChangesInViewIfRequired as ɵdetectChangesInViewIfRequired, whenStable as ɵwhenStable} from './application/application_ref';
-export {IMAGE_CONFIG as ɵIMAGE_CONFIG, IMAGE_CONFIG_DEFAULTS as ɵIMAGE_CONFIG_DEFAULTS, ImageConfig as ɵImageConfig} from './application/application_tokens';
+export {
+  detectChangesInViewIfRequired as ɵdetectChangesInViewIfRequired,
+  whenStable as ɵwhenStable,
+} from './application/application_ref';
+export {
+  IMAGE_CONFIG as ɵIMAGE_CONFIG,
+  IMAGE_CONFIG_DEFAULTS as ɵIMAGE_CONFIG_DEFAULTS,
+  ImageConfig as ɵImageConfig,
+} from './application/application_tokens';
 export {internalCreateApplication as ɵinternalCreateApplication} from './application/create_application';
-export {defaultIterableDiffers as ɵdefaultIterableDiffers, defaultKeyValueDiffers as ɵdefaultKeyValueDiffers} from './change_detection/change_detection';
-export {ChangeDetectionScheduler as ɵChangeDetectionScheduler, NotificationSource as ɵNotificationSource, ZONELESS_ENABLED as ɵZONELESS_ENABLED} from './change_detection/scheduling/zoneless_scheduling';
+export {
+  defaultIterableDiffers as ɵdefaultIterableDiffers,
+  defaultKeyValueDiffers as ɵdefaultKeyValueDiffers,
+} from './change_detection/change_detection';
+export {
+  ChangeDetectionScheduler as ɵChangeDetectionScheduler,
+  NotificationSource as ɵNotificationSource,
+  ZONELESS_ENABLED as ɵZONELESS_ENABLED,
+} from './change_detection/scheduling/zoneless_scheduling';
 export {Console as ɵConsole} from './console';
-export {DeferBlockDetails as ɵDeferBlockDetails, getDeferBlocks as ɵgetDeferBlocks} from './defer/discovery';
-export {renderDeferBlockState as ɵrenderDeferBlockState, triggerResourceLoading as ɵtriggerResourceLoading} from './defer/instructions';
-export {DeferBlockBehavior as ɵDeferBlockBehavior, DeferBlockConfig as ɵDeferBlockConfig, DeferBlockState as ɵDeferBlockState} from './defer/interfaces';
-export {convertToBitFlags as ɵconvertToBitFlags, setCurrentInjector as ɵsetCurrentInjector} from './di/injector_compatibility';
-export {getInjectableDef as ɵgetInjectableDef, ɵɵInjectableDeclaration, ɵɵInjectorDef} from './di/interface/defs';
-export {InternalEnvironmentProviders as ɵInternalEnvironmentProviders, isEnvironmentProviders as ɵisEnvironmentProviders} from './di/interface/provider';
+export {
+  DeferBlockDetails as ɵDeferBlockDetails,
+  getDeferBlocks as ɵgetDeferBlocks,
+} from './defer/discovery';
+export {
+  renderDeferBlockState as ɵrenderDeferBlockState,
+  triggerResourceLoading as ɵtriggerResourceLoading,
+} from './defer/instructions';
+export {
+  DeferBlockBehavior as ɵDeferBlockBehavior,
+  DeferBlockConfig as ɵDeferBlockConfig,
+  DeferBlockState as ɵDeferBlockState,
+} from './defer/interfaces';
+export {
+  convertToBitFlags as ɵconvertToBitFlags,
+  setCurrentInjector as ɵsetCurrentInjector,
+} from './di/injector_compatibility';
+export {
+  getInjectableDef as ɵgetInjectableDef,
+  ɵɵInjectableDeclaration,
+  ɵɵInjectorDef,
+} from './di/interface/defs';
+export {
+  InternalEnvironmentProviders as ɵInternalEnvironmentProviders,
+  isEnvironmentProviders as ɵisEnvironmentProviders,
+} from './di/interface/provider';
 export {INJECTOR_SCOPE as ɵINJECTOR_SCOPE} from './di/scope';
 export {XSS_SECURITY_URL as ɵXSS_SECURITY_URL} from './error_details_base_url';
-export {formatRuntimeError as ɵformatRuntimeError, RuntimeError as ɵRuntimeError, RuntimeErrorCode as ɵRuntimeErrorCode} from './errors';
+export {
+  formatRuntimeError as ɵformatRuntimeError,
+  RuntimeError as ɵRuntimeError,
+  RuntimeErrorCode as ɵRuntimeErrorCode,
+} from './errors';
 export {annotateForHydration as ɵannotateForHydration} from './hydration/annotate';
-export {withDomHydration as ɵwithDomHydration, withI18nSupport as ɵwithI18nSupport} from './hydration/api';
+export {
+  withDomHydration as ɵwithDomHydration,
+  withI18nSupport as ɵwithI18nSupport,
+} from './hydration/api';
 export {withEventReplay as ɵwithEventReplay} from './hydration/event_replay';
 export {IS_HYDRATION_DOM_REUSE_ENABLED as ɵIS_HYDRATION_DOM_REUSE_ENABLED} from './hydration/tokens';
-export {HydratedNode as ɵHydratedNode, HydrationInfo as ɵHydrationInfo, readHydrationInfo as ɵreadHydrationInfo, SSR_CONTENT_INTEGRITY_MARKER as ɵSSR_CONTENT_INTEGRITY_MARKER} from './hydration/utils';
-export {CurrencyIndex as ɵCurrencyIndex, ExtraLocaleDataIndex as ɵExtraLocaleDataIndex, findLocaleData as ɵfindLocaleData, getLocaleCurrencyCode as ɵgetLocaleCurrencyCode, getLocalePluralCase as ɵgetLocalePluralCase, LocaleDataIndex as ɵLocaleDataIndex, registerLocaleData as ɵregisterLocaleData, unregisterAllLocaleData as ɵunregisterLocaleData} from './i18n/locale_data_api';
+export {
+  HydratedNode as ɵHydratedNode,
+  HydrationInfo as ɵHydrationInfo,
+  readHydrationInfo as ɵreadHydrationInfo,
+  SSR_CONTENT_INTEGRITY_MARKER as ɵSSR_CONTENT_INTEGRITY_MARKER,
+} from './hydration/utils';
+export {
+  CurrencyIndex as ɵCurrencyIndex,
+  ExtraLocaleDataIndex as ɵExtraLocaleDataIndex,
+  findLocaleData as ɵfindLocaleData,
+  getLocaleCurrencyCode as ɵgetLocaleCurrencyCode,
+  getLocalePluralCase as ɵgetLocalePluralCase,
+  LocaleDataIndex as ɵLocaleDataIndex,
+  registerLocaleData as ɵregisterLocaleData,
+  unregisterAllLocaleData as ɵunregisterLocaleData,
+} from './i18n/locale_data_api';
 export {DEFAULT_LOCALE_ID as ɵDEFAULT_LOCALE_ID} from './i18n/localization';
 export {Writable as ɵWritable} from './interface/type';
 export {ComponentFactory as ɵComponentFactory} from './linker/component_factory';
-export {clearResolutionOfComponentResourcesQueue as ɵclearResolutionOfComponentResourcesQueue, isComponentDefPendingResolution as ɵisComponentDefPendingResolution, resolveComponentResources as ɵresolveComponentResources, restoreComponentResolutionQueue as ɵrestoreComponentResolutionQueue} from './metadata/resource_loading';
+export {
+  clearResolutionOfComponentResourcesQueue as ɵclearResolutionOfComponentResourcesQueue,
+  isComponentDefPendingResolution as ɵisComponentDefPendingResolution,
+  resolveComponentResources as ɵresolveComponentResources,
+  restoreComponentResolutionQueue as ɵrestoreComponentResolutionQueue,
+} from './metadata/resource_loading';
 export {PendingTasks as ɵPendingTasks} from './pending_tasks';
 export {ALLOW_MULTIPLE_PLATFORMS as ɵALLOW_MULTIPLE_PLATFORMS} from './platform/platform';
 export {ReflectionCapabilities as ɵReflectionCapabilities} from './reflection/reflection_capabilities';
 export {AnimationRendererType as ɵAnimationRendererType} from './render/api';
-export {InjectorProfilerContext as ɵInjectorProfilerContext, ProviderRecord as ɵProviderRecord, setInjectorProfilerContext as ɵsetInjectorProfilerContext} from './render3/debug/injector_profiler';
+export {
+  InjectorProfilerContext as ɵInjectorProfilerContext,
+  ProviderRecord as ɵProviderRecord,
+  setInjectorProfilerContext as ɵsetInjectorProfilerContext,
+} from './render3/debug/injector_profiler';
 export {queueStateUpdate as ɵqueueStateUpdate} from './render3/queue_state_update';
-export {allowSanitizationBypassAndThrow as ɵallowSanitizationBypassAndThrow, BypassType as ɵBypassType, getSanitizationBypassType as ɵgetSanitizationBypassType, SafeHtml as ɵSafeHtml, SafeResourceUrl as ɵSafeResourceUrl, SafeScript as ɵSafeScript, SafeStyle as ɵSafeStyle, SafeUrl as ɵSafeUrl, SafeValue as ɵSafeValue, unwrapSafeValue as ɵunwrapSafeValue} from './sanitization/bypass';
+export {
+  allowSanitizationBypassAndThrow as ɵallowSanitizationBypassAndThrow,
+  BypassType as ɵBypassType,
+  getSanitizationBypassType as ɵgetSanitizationBypassType,
+  SafeHtml as ɵSafeHtml,
+  SafeResourceUrl as ɵSafeResourceUrl,
+  SafeScript as ɵSafeScript,
+  SafeStyle as ɵSafeStyle,
+  SafeUrl as ɵSafeUrl,
+  SafeValue as ɵSafeValue,
+  unwrapSafeValue as ɵunwrapSafeValue,
+} from './sanitization/bypass';
 export {_sanitizeHtml as ɵ_sanitizeHtml} from './sanitization/html_sanitizer';
 export {_sanitizeUrl as ɵ_sanitizeUrl} from './sanitization/url_sanitizer';
-export {TESTABILITY as ɵTESTABILITY, TESTABILITY_GETTER as ɵTESTABILITY_GETTER} from './testability/testability';
+export {
+  TESTABILITY as ɵTESTABILITY,
+  TESTABILITY_GETTER as ɵTESTABILITY_GETTER,
+} from './testability/testability';
 export {booleanAttribute, numberAttribute} from './util/coercion';
 export {devModeEqual as ɵdevModeEqual} from './util/comparison';
 export {global as ɵglobal} from './util/global';
diff --git a/packages/core/src/core_reactivity_export_internal.ts b/packages/core/src/core_reactivity_export_internal.ts
index 0cbba7adb4959..4af08141267f4 100644
--- a/packages/core/src/core_reactivity_export_internal.ts
+++ b/packages/core/src/core_reactivity_export_internal.ts
@@ -7,24 +7,15 @@
  */
 
 // clang-format off
-export {
-  isSignal,
-  Signal,
-  ValueEqualityFn,
-} from './render3/reactivity/api';
-export {
-  computed,
-  CreateComputedOptions,
-} from './render3/reactivity/computed';
+export {isSignal, Signal, ValueEqualityFn} from './render3/reactivity/api';
+export {computed, CreateComputedOptions} from './render3/reactivity/computed';
 export {
   CreateSignalOptions,
   signal,
   WritableSignal,
   ɵunwrapWritableSignal,
 } from './render3/reactivity/signal';
-export {
-  untracked,
-} from './render3/reactivity/untracked';
+export {untracked} from './render3/reactivity/untracked';
 export {
   CreateEffectOptions,
   effect,
@@ -33,7 +24,5 @@ export {
   EffectCleanupRegisterFn,
   EffectScheduler as ɵEffectScheduler,
 } from './render3/reactivity/effect';
-export {
-  assertNotInReactiveContext,
-} from './render3/reactivity/asserts';
+export {assertNotInReactiveContext} from './render3/reactivity/asserts';
 // clang-format on
diff --git a/packages/core/src/core_render3_private_export.ts b/packages/core/src/core_render3_private_export.ts
index c0c4e11df6e6f..76c67dabd1446 100644
--- a/packages/core/src/core_render3_private_export.ts
+++ b/packages/core/src/core_render3_private_export.ts
@@ -11,18 +11,10 @@
 // performed by rollup while it's creating fesm files.
 //
 // no code actually imports these symbols from the @angular/core entry point
-export {
-  isBoundToModule as ɵisBoundToModule
-} from './application/application_ref';
-export {
-  compileNgModuleFactory as ɵcompileNgModuleFactory,
-} from './application/application_ngmodule_factory_compiler';
-export {
-  injectChangeDetectorRef as ɵinjectChangeDetectorRef,
-} from './change_detection/change_detector_ref';
-export {
-  getDebugNode as ɵgetDebugNode,
-} from './debug/debug_node';
+export {isBoundToModule as ɵisBoundToModule} from './application/application_ref';
+export {compileNgModuleFactory as ɵcompileNgModuleFactory} from './application/application_ngmodule_factory_compiler';
+export {injectChangeDetectorRef as ɵinjectChangeDetectorRef} from './change_detection/change_detector_ref';
+export {getDebugNode as ɵgetDebugNode} from './debug/debug_node';
 export {
   NG_INJ_DEF as ɵNG_INJ_DEF,
   NG_PROV_DEF as ɵNG_PROV_DEF,
@@ -37,9 +29,7 @@ export {
   NgModuleDef as ɵNgModuleDef,
   NgModuleTransitiveScopes as ɵNgModuleTransitiveScopes,
 } from './metadata/ng_module_def';
-export {
-  getLContext as ɵgetLContext
-} from './render3/context_discovery';
+export {getLContext as ɵgetLContext} from './render3/context_discovery';
 export {
   NG_COMP_DEF as ɵNG_COMP_DEF,
   NG_DIR_DEF as ɵNG_DIR_DEF,
@@ -180,12 +170,10 @@ export {
   ɵɵresolveDocument,
   ɵɵresolveWindow,
   ɵɵrestoreView,
-
   ɵɵrepeater,
   ɵɵrepeaterCreate,
   ɵɵrepeaterTrackByIdentity,
   ɵɵrepeaterTrackByIndex,
-
   ɵɵsetComponentScope,
   ɵɵsetNgModuleScope,
   ɵɵgetComponentDepsFactory,
@@ -249,24 +237,16 @@ export {
   ɵgetUnknownElementStrictMode,
   ɵsetUnknownElementStrictMode,
   ɵgetUnknownPropertyStrictMode,
-  ɵsetUnknownPropertyStrictMode
+  ɵsetUnknownPropertyStrictMode,
 } from './render3/index';
-export {
-  CONTAINER_HEADER_OFFSET as ɵCONTAINER_HEADER_OFFSET,
-} from './render3/interfaces/container';
-export {
-  LContext as ɵLContext,
-} from './render3/interfaces/context';
-export {
-  setDocument as ɵsetDocument
-} from './render3/interfaces/document';
+export {CONTAINER_HEADER_OFFSET as ɵCONTAINER_HEADER_OFFSET} from './render3/interfaces/container';
+export {LContext as ɵLContext} from './render3/interfaces/context';
+export {setDocument as ɵsetDocument} from './render3/interfaces/document';
 export {
   compileComponent as ɵcompileComponent,
   compileDirective as ɵcompileDirective,
 } from './render3/jit/directive';
-export {
-  resetJitOptions as ɵresetJitOptions,
-} from './render3/jit/jit_options';
+export {resetJitOptions as ɵresetJitOptions} from './render3/jit/jit_options';
 export {
   compileNgModule as ɵcompileNgModule,
   compileNgModuleDefs as ɵcompileNgModuleDefs,
@@ -287,14 +267,10 @@ export {
   ɵɵngDeclareNgModule,
   ɵɵngDeclarePipe,
 } from './render3/jit/partial';
-export {
-  compilePipe as ɵcompilePipe,
-} from './render3/jit/pipe';
-export {
-  isNgModule as ɵisNgModule
-} from './render3/jit/util';
-export { Profiler as ɵProfiler, ProfilerEvent as ɵProfilerEvent } from './render3/profiler';
-export { GlobalDevModeUtils as ɵGlobalDevModeUtils } from './render3/util/global_utils';
+export {compilePipe as ɵcompilePipe} from './render3/jit/pipe';
+export {isNgModule as ɵisNgModule} from './render3/jit/util';
+export {Profiler as ɵProfiler, ProfilerEvent as ɵProfilerEvent} from './render3/profiler';
+export {GlobalDevModeUtils as ɵGlobalDevModeUtils} from './render3/util/global_utils';
 export {ViewRef as ɵViewRef} from './render3/view_ref';
 export {
   bypassSanitizationTrustHtml as ɵbypassSanitizationTrustHtml,
@@ -313,14 +289,16 @@ export {
   ɵɵtrustConstantHtml,
   ɵɵtrustConstantResourceUrl,
 } from './sanitization/sanitization';
+export {ɵɵvalidateIframeAttribute} from './sanitization/iframe_attrs_validation';
+export {noSideEffects as ɵnoSideEffects} from './util/closure';
 export {
-  ɵɵvalidateIframeAttribute,
-} from './sanitization/iframe_attrs_validation';
+  AfterRenderEventManager as ɵAfterRenderEventManager,
+  internalAfterNextRender as ɵinternalAfterNextRender,
+} from './render3/after_render_hooks';
 export {
-  noSideEffects as ɵnoSideEffects,
-} from './util/closure';
-export { AfterRenderEventManager as ɵAfterRenderEventManager, internalAfterNextRender as ɵinternalAfterNextRender } from './render3/after_render_hooks';
-export {depsTracker as ɵdepsTracker, USE_RUNTIME_DEPS_TRACKER_FOR_JIT as ɵUSE_RUNTIME_DEPS_TRACKER_FOR_JIT} from './render3/deps_tracker/deps_tracker';
+  depsTracker as ɵdepsTracker,
+  USE_RUNTIME_DEPS_TRACKER_FOR_JIT as ɵUSE_RUNTIME_DEPS_TRACKER_FOR_JIT,
+} from './render3/deps_tracker/deps_tracker';
 export {generateStandaloneInDeclarationsError as ɵgenerateStandaloneInDeclarationsError} from './render3/jit/module';
 export {getAsyncClassMetadataFn as ɵgetAsyncClassMetadataFn} from './render3/metadata';
 
diff --git a/packages/core/src/debug/debug_node.ts b/packages/core/src/debug/debug_node.ts
index 8e60be24b15c1..240d00df1bdfc 100644
--- a/packages/core/src/debug/debug_node.ts
+++ b/packages/core/src/debug/debug_node.ts
@@ -12,8 +12,23 @@ import {getLContext} from '../render3/context_discovery';
 import {CONTAINER_HEADER_OFFSET, LContainer, NATIVE} from '../render3/interfaces/container';
 import {TElementNode, TNode, TNodeFlags, TNodeType} from '../render3/interfaces/node';
 import {isComponentHost, isLContainer} from '../render3/interfaces/type_checks';
-import {DECLARATION_COMPONENT_VIEW, LView, PARENT, T_HOST, TData, TVIEW} from '../render3/interfaces/view';
-import {getComponent, getContext, getInjectionTokens, getInjector, getListeners, getLocalRefs, getOwningComponent} from '../render3/util/discovery_utils';
+import {
+  DECLARATION_COMPONENT_VIEW,
+  LView,
+  PARENT,
+  T_HOST,
+  TData,
+  TVIEW,
+} from '../render3/interfaces/view';
+import {
+  getComponent,
+  getContext,
+  getInjectionTokens,
+  getInjector,
+  getListeners,
+  getLocalRefs,
+  getOwningComponent,
+} from '../render3/util/discovery_utils';
 import {INTERPOLATION_DELIMITER} from '../render3/util/misc_utils';
 import {renderStringify} from '../render3/util/stringify_utils';
 import {getComponentLViewByIndex, getNativeByTNodeOrNull} from '../render3/util/view_utils';
@@ -23,7 +38,10 @@ import {assertDomNode} from '../util/assert';
  * @publicApi
  */
 export class DebugEventListener {
-  constructor(public name: string, public callback: Function) {}
+  constructor(
+    public name: string,
+    public callback: Function,
+  ) {}
 }
 
 /**
@@ -49,7 +67,7 @@ export class DebugNode {
   /**
    * The `DebugElement` parent. Will be `null` if this is the root element.
    */
-  get parent(): DebugElement|null {
+  get parent(): DebugElement | null {
     const parent = this.nativeNode.parentNode as Element;
     return parent ? new DebugElement(parent) : null;
   }
@@ -66,8 +84,9 @@ export class DebugNode {
    */
   get componentInstance(): any {
     const nativeElement = this.nativeNode;
-    return nativeElement &&
-        (getComponent(nativeElement as Element) || getOwningComponent(nativeElement));
+    return (
+      nativeElement && (getComponent(nativeElement as Element) || getOwningComponent(nativeElement))
+    );
   }
 
   /**
@@ -87,7 +106,7 @@ export class DebugNode {
    * properties.
    */
   get listeners(): DebugEventListener[] {
-    return getListeners(this.nativeNode as Element).filter(listener => listener.type === 'dom');
+    return getListeners(this.nativeNode as Element).filter((listener) => listener.type === 'dom');
   }
 
   /**
@@ -124,7 +143,7 @@ export class DebugElement extends DebugNode {
    * The underlying DOM element at the root of the component.
    */
   get nativeElement(): any {
-    return this.nativeNode.nodeType == Node.ELEMENT_NODE ? this.nativeNode as Element : null;
+    return this.nativeNode.nodeType == Node.ELEMENT_NODE ? (this.nativeNode as Element) : null;
   }
 
   /**
@@ -155,7 +174,7 @@ export class DebugElement extends DebugNode {
    *  - input property bindings (e.g. `[myCustomInput]="value"`)
    *  - attribute bindings (e.g. `[attr.role]="menu"`)
    */
-  get properties(): {[key: string]: any;} {
+  get properties(): {[key: string]: any} {
     const context = getLContext(this.nativeNode)!;
     const lView = context ? context.lView : null;
 
@@ -179,8 +198,8 @@ export class DebugElement extends DebugNode {
    *  A map of attribute names to attribute values for an element.
    */
   // TODO: replace null by undefined in the return type
-  get attributes(): {[key: string]: string|null} {
-    const attributes: {[key: string]: string|null} = {};
+  get attributes(): {[key: string]: string | null} {
+    const attributes: {[key: string]: string | null} = {};
     const element = this.nativeElement as Element | undefined;
 
     if (!element) {
@@ -236,7 +255,7 @@ export class DebugElement extends DebugNode {
    * The inline styles of the DOM element.
    */
   // TODO: replace null by undefined in the return type
-  get styles(): {[key: string]: string|null} {
+  get styles(): {[key: string]: string | null} {
     const element = this.nativeElement as HTMLElement | null;
     return (element?.style ?? {}) as {[key: string]: string | null};
   }
@@ -258,9 +277,9 @@ export class DebugElement extends DebugNode {
     // SVG elements return an `SVGAnimatedString` instead of a plain string for the `className`.
     const className = element.className as string | SVGAnimatedString;
     const classes =
-        typeof className !== 'string' ? className.baseVal.split(' ') : className.split(' ');
+      typeof className !== 'string' ? className.baseVal.split(' ') : className.split(' ');
 
-    classes.forEach((value: string) => result[value] = true);
+    classes.forEach((value: string) => (result[value] = true));
 
     return result;
   }
@@ -337,7 +356,7 @@ export class DebugElement extends DebugNode {
     const node = this.nativeNode as any;
     const invokedListeners: Function[] = [];
 
-    this.listeners.forEach(listener => {
+    this.listeners.forEach((listener) => {
       if (listener.name === eventName) {
         const callback = listener.callback;
         callback.call(node, eventObj);
@@ -360,15 +379,17 @@ export class DebugElement extends DebugNode {
         // 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);
+          return (
+            invokedListeners.indexOf(unwrappedListener) === -1 &&
+            unwrappedListener.call(node, eventObj)
+          );
         }
       });
     }
   }
 }
 
-function copyDomProperties(element: Element|null, properties: {[name: string]: string}): void {
+function copyDomProperties(element: Element | null, properties: {[name: string]: string}): void {
   if (element) {
     // Skip own properties (as those are patched)
     let obj = Object.getPrototypeOf(element);
@@ -392,8 +413,12 @@ function copyDomProperties(element: Element|null, properties: {[name: string]: s
 }
 
 function isPrimitiveValue(value: any): boolean {
-  return typeof value === 'string' || typeof value === 'boolean' || typeof value === 'number' ||
-      value === null;
+  return (
+    typeof value === 'string' ||
+    typeof value === 'boolean' ||
+    typeof value === 'number' ||
+    value === null
+  );
 }
 
 /**
@@ -405,20 +430,35 @@ function isPrimitiveValue(value: any): boolean {
  * @param elementsOnly whether only elements should be searched
  */
 function _queryAll(
-    parentElement: DebugElement, predicate: Predicate<DebugElement>, matches: DebugElement[],
-    elementsOnly: true): void;
+  parentElement: DebugElement,
+  predicate: Predicate<DebugElement>,
+  matches: DebugElement[],
+  elementsOnly: true,
+): void;
 function _queryAll(
-    parentElement: DebugElement, predicate: Predicate<DebugNode>, matches: DebugNode[],
-    elementsOnly: false): void;
+  parentElement: DebugElement,
+  predicate: Predicate<DebugNode>,
+  matches: DebugNode[],
+  elementsOnly: false,
+): void;
 function _queryAll(
-    parentElement: DebugElement, predicate: Predicate<DebugElement>|Predicate<DebugNode>,
-    matches: DebugElement[]|DebugNode[], elementsOnly: boolean) {
+  parentElement: DebugElement,
+  predicate: Predicate<DebugElement> | Predicate<DebugNode>,
+  matches: DebugElement[] | DebugNode[],
+  elementsOnly: boolean,
+) {
   const context = getLContext(parentElement.nativeNode)!;
   const lView = context ? context.lView : null;
   if (lView !== null) {
     const parentTNode = lView[TVIEW].data[context.nodeIndex] as TNode;
     _queryNodeChildren(
-        parentTNode, lView, predicate, matches, elementsOnly, parentElement.nativeNode);
+      parentTNode,
+      lView,
+      predicate,
+      matches,
+      elementsOnly,
+      parentElement.nativeNode,
+    );
   } else {
     // If the context is null, then `parentElement` was either created with Renderer2 or native DOM
     // APIs.
@@ -437,8 +477,13 @@ function _queryAll(
  * @param rootNativeNode the root native node on which predicate should not be matched
  */
 function _queryNodeChildren(
-    tNode: TNode, lView: LView, predicate: Predicate<DebugElement>|Predicate<DebugNode>,
-    matches: DebugElement[]|DebugNode[], elementsOnly: boolean, rootNativeNode: any) {
+  tNode: TNode,
+  lView: LView,
+  predicate: Predicate<DebugElement> | Predicate<DebugNode>,
+  matches: DebugElement[] | DebugNode[],
+  elementsOnly: boolean,
+  rootNativeNode: any,
+) {
   ngDevMode && assertTNodeForLView(tNode, lView);
   const nativeNode = getNativeByTNodeOrNull(tNode, lView);
   // For each type of TNode, specific logic is executed.
@@ -452,8 +497,13 @@ function _queryNodeChildren(
       const componentView = getComponentLViewByIndex(tNode.index, lView);
       if (componentView && componentView[TVIEW].firstChild) {
         _queryNodeChildren(
-            componentView[TVIEW].firstChild!, componentView, predicate, matches, elementsOnly,
-            rootNativeNode);
+          componentView[TVIEW].firstChild!,
+          componentView,
+          predicate,
+          matches,
+          elementsOnly,
+          rootNativeNode,
+        );
       }
     } else {
       if (tNode.child) {
@@ -475,7 +525,12 @@ function _queryNodeChildren(
     const nodeOrContainer = lView[tNode.index];
     if (isLContainer(nodeOrContainer)) {
       _queryNodeChildrenInContainer(
-          nodeOrContainer, predicate, matches, elementsOnly, rootNativeNode);
+        nodeOrContainer,
+        predicate,
+        matches,
+        elementsOnly,
+        rootNativeNode,
+      );
     }
   } else if (tNode.type & TNodeType.Container) {
     // Case 2: the TNode is a container
@@ -489,8 +544,9 @@ function _queryNodeChildren(
     // The nodes projected at this location all need to be processed.
     const componentView = lView![DECLARATION_COMPONENT_VIEW];
     const componentHost = componentView[T_HOST] as TElementNode;
-    const head: TNode|null =
-        (componentHost.projection as (TNode | null)[])[tNode.projection as number];
+    const head: TNode | null = (componentHost.projection as (TNode | null)[])[
+      tNode.projection as number
+    ];
 
     if (Array.isArray(head)) {
       for (let nativeNode of head) {
@@ -510,7 +566,7 @@ function _queryNodeChildren(
   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 & TNodeFlags.isProjected) ? tNode.projectionNext : tNode.next;
+    const nextTNode = tNode.flags & TNodeFlags.isProjected ? tNode.projectionNext : tNode.next;
     if (nextTNode) {
       _queryNodeChildren(nextTNode, lView, predicate, matches, elementsOnly, rootNativeNode);
     }
@@ -527,8 +583,12 @@ function _queryNodeChildren(
  * @param rootNativeNode the root native node on which predicate should not be matched
  */
 function _queryNodeChildrenInContainer(
-    lContainer: LContainer, predicate: Predicate<DebugElement>|Predicate<DebugNode>,
-    matches: DebugElement[]|DebugNode[], elementsOnly: boolean, rootNativeNode: any) {
+  lContainer: LContainer,
+  predicate: Predicate<DebugElement> | Predicate<DebugNode>,
+  matches: DebugElement[] | DebugNode[],
+  elementsOnly: boolean,
+  rootNativeNode: any,
+) {
   for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
     const childView = lContainer[i] as LView;
     const firstChild = childView[TVIEW].firstChild;
@@ -548,8 +608,12 @@ function _queryNodeChildrenInContainer(
  * @param rootNativeNode the root native node on which predicate should not be matched
  */
 function _addQueryMatch(
-    nativeNode: any, predicate: Predicate<DebugElement>|Predicate<DebugNode>,
-    matches: DebugElement[]|DebugNode[], elementsOnly: boolean, rootNativeNode: any) {
+  nativeNode: any,
+  predicate: Predicate<DebugElement> | Predicate<DebugNode>,
+  matches: DebugElement[] | DebugNode[],
+  elementsOnly: boolean,
+  rootNativeNode: any,
+) {
   if (rootNativeNode !== nativeNode) {
     const debugNode = getDebugNode(nativeNode);
     if (!debugNode) {
@@ -558,12 +622,18 @@ function _addQueryMatch(
     // 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) {
+    if (
+      elementsOnly &&
+      debugNode instanceof DebugElement &&
+      predicate(debugNode) &&
+      matches.indexOf(debugNode) === -1
+    ) {
       matches.push(debugNode);
     } else if (
-        !elementsOnly && (predicate as Predicate<DebugNode>)(debugNode) &&
-        (matches as DebugNode[]).indexOf(debugNode) === -1) {
+      !elementsOnly &&
+      (predicate as Predicate<DebugNode>)(debugNode) &&
+      (matches as DebugNode[]).indexOf(debugNode) === -1
+    ) {
       (matches as DebugNode[]).push(debugNode);
     }
   }
@@ -578,8 +648,11 @@ function _addQueryMatch(
  * @param elementsOnly whether only elements should be searched
  */
 function _queryNativeNodeDescendants(
-    parentNode: any, predicate: Predicate<DebugElement>|Predicate<DebugNode>,
-    matches: DebugElement[]|DebugNode[], elementsOnly: boolean) {
+  parentNode: any,
+  predicate: Predicate<DebugElement> | Predicate<DebugNode>,
+  matches: DebugElement[] | DebugNode[],
+  elementsOnly: boolean,
+) {
   const nodes = parentNode.childNodes;
   const length = nodes.length;
 
@@ -588,12 +661,18 @@ function _queryNativeNodeDescendants(
     const debugNode = getDebugNode(node);
 
     if (debugNode) {
-      if (elementsOnly && (debugNode instanceof DebugElement) && predicate(debugNode) &&
-          matches.indexOf(debugNode) === -1) {
+      if (
+        elementsOnly &&
+        debugNode instanceof DebugElement &&
+        predicate(debugNode) &&
+        matches.indexOf(debugNode) === -1
+      ) {
         matches.push(debugNode);
       } else if (
-          !elementsOnly && (predicate as Predicate<DebugNode>)(debugNode) &&
-          (matches as DebugNode[]).indexOf(debugNode) === -1) {
+        !elementsOnly &&
+        (predicate as Predicate<DebugNode>)(debugNode) &&
+        (matches as DebugNode[]).indexOf(debugNode) === -1
+      ) {
         (matches as DebugNode[]).push(debugNode);
       }
 
@@ -608,7 +687,11 @@ function _queryNativeNodeDescendants(
  * defined in templates, not in host bindings.
  */
 function collectPropertyBindings(
-    properties: {[key: string]: string}, tNode: TNode, lView: LView, tData: TData): void {
+  properties: {[key: string]: string},
+  tNode: TNode,
+  lView: LView,
+  tData: TData,
+): void {
   let bindingIndexes = tNode.propertyBindings;
 
   if (bindingIndexes !== null) {
@@ -630,7 +713,6 @@ function collectPropertyBindings(
   }
 }
 
-
 // Need to keep the nodes in a global Map so that multiple angular apps are supported.
 const _nativeNodeToDebugNode = new Map<any, DebugNode>();
 
@@ -639,12 +721,13 @@ const NG_DEBUG_PROPERTY = '__ng_debug__';
 /**
  * @publicApi
  */
-export function getDebugNode(nativeNode: any): DebugNode|null {
+export function getDebugNode(nativeNode: any): DebugNode | null {
   if (nativeNode instanceof Node) {
-    if (!(nativeNode.hasOwnProperty(NG_DEBUG_PROPERTY))) {
-      (nativeNode as any)[NG_DEBUG_PROPERTY] = nativeNode.nodeType == Node.ELEMENT_NODE ?
-          new DebugElement(nativeNode as Element) :
-          new DebugNode(nativeNode);
+    if (!nativeNode.hasOwnProperty(NG_DEBUG_PROPERTY)) {
+      (nativeNode as any)[NG_DEBUG_PROPERTY] =
+        nativeNode.nodeType == Node.ELEMENT_NODE
+          ? new DebugElement(nativeNode as Element)
+          : new DebugNode(nativeNode);
     }
     return (nativeNode as any)[NG_DEBUG_PROPERTY];
   }
diff --git a/packages/core/src/defer/cleanup.ts b/packages/core/src/defer/cleanup.ts
index 23c945db1bae7..b4bbef99ca27b 100644
--- a/packages/core/src/defer/cleanup.ts
+++ b/packages/core/src/defer/cleanup.ts
@@ -6,14 +6,22 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {LDeferBlockDetails, PREFETCH_TRIGGER_CLEANUP_FNS, TRIGGER_CLEANUP_FNS, TriggerType} from './interfaces';
+import {
+  LDeferBlockDetails,
+  PREFETCH_TRIGGER_CLEANUP_FNS,
+  TRIGGER_CLEANUP_FNS,
+  TriggerType,
+} from './interfaces';
 
 /**
  * Registers a cleanup function associated with a prefetching trigger
  * or a regular trigger of a defer block.
  */
 export function storeTriggerCleanupFn(
-    type: TriggerType, lDetails: LDeferBlockDetails, cleanupFn: VoidFunction) {
+  type: TriggerType,
+  lDetails: LDeferBlockDetails,
+  cleanupFn: VoidFunction,
+) {
   const key = type === TriggerType.Prefetch ? PREFETCH_TRIGGER_CLEANUP_FNS : TRIGGER_CLEANUP_FNS;
   if (lDetails[key] === null) {
     lDetails[key] = [];
diff --git a/packages/core/src/defer/dom_triggers.ts b/packages/core/src/defer/dom_triggers.ts
index 7cc4b17c9faab..340f9a735f6fd 100644
--- a/packages/core/src/defer/dom_triggers.ts
+++ b/packages/core/src/defer/dom_triggers.ts
@@ -13,18 +13,28 @@ import {CONTAINER_HEADER_OFFSET} from '../render3/interfaces/container';
 import {TNode} from '../render3/interfaces/node';
 import {isDestroyed} from '../render3/interfaces/type_checks';
 import {HEADER_OFFSET, INJECTOR, LView} from '../render3/interfaces/view';
-import {getNativeByIndex, removeLViewOnDestroy, storeLViewOnDestroy, walkUpViews} from '../render3/util/view_utils';
+import {
+  getNativeByIndex,
+  removeLViewOnDestroy,
+  storeLViewOnDestroy,
+  walkUpViews,
+} from '../render3/util/view_utils';
 import {assertElement, assertEqual} from '../util/assert';
 import {NgZone} from '../zone';
 import {storeTriggerCleanupFn} from './cleanup';
 
-import {DEFER_BLOCK_STATE, DeferBlockInternalState, DeferBlockState, TriggerType} from './interfaces';
+import {
+  DEFER_BLOCK_STATE,
+  DeferBlockInternalState,
+  DeferBlockState,
+  TriggerType,
+} from './interfaces';
 import {getLDeferBlockDetails} from './utils';
 
 /** Configuration object used to register passive and capturing events. */
 const eventListenerOptions: AddEventListenerOptions = {
   passive: true,
-  capture: true
+  capture: true,
 };
 
 /** Keeps track of the currently-registered `on hover` triggers. */
@@ -43,7 +53,7 @@ const interactionEventNames = ['click', 'keydown'] as const;
 const hoverEventNames = ['mouseenter', 'focusin'] as const;
 
 /** `IntersectionObserver` used to observe `viewport` triggers. */
-let intersectionObserver: IntersectionObserver|null = null;
+let intersectionObserver: IntersectionObserver | null = null;
 
 /** Number of elements currently observed with `viewport` triggers. */
 let observedViewportElements = 0;
@@ -56,7 +66,7 @@ class DeferEventEntry {
     for (const callback of this.callbacks) {
       callback();
     }
-  }
+  };
 }
 
 /**
@@ -144,20 +154,25 @@ export function onHover(trigger: Element, callback: VoidFunction): VoidFunction
  * @param injector Injector that can be used by the trigger to resolve DI tokens.
  */
 export function onViewport(
-    trigger: Element, callback: VoidFunction, injector: Injector): VoidFunction {
+  trigger: Element,
+  callback: VoidFunction,
+  injector: Injector,
+): VoidFunction {
   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);
+  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();
@@ -198,7 +213,10 @@ export function onViewport(
  *   value means that the trigger is in the same LView as the deferred block.
  */
 export function getTriggerLView(
-    deferredHostLView: LView, deferredTNode: TNode, walkUpTimes: number|undefined): LView|null {
+  deferredHostLView: LView,
+  deferredTNode: TNode,
+  walkUpTimes: number | undefined,
+): LView | null {
   // The trigger is in the same view, we don't need to traverse.
   if (walkUpTimes == null) {
     return deferredHostLView;
@@ -219,8 +237,10 @@ export function getTriggerLView(
     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.');
+      renderedState,
+      DeferBlockState.Placeholder,
+      'Expected a placeholder to be rendered in this defer block.',
+    );
     assertLView(triggerLView);
   }
 
@@ -250,9 +270,14 @@ export function getTriggerElement(triggerLView: LView, triggerIndex: number): El
  * @param type Trigger type to distinguish between regular and prefetch triggers.
  */
 export function registerDomTrigger(
-    initialLView: LView, tNode: TNode, triggerIndex: number, walkUpTimes: number|undefined,
-    registerFn: (element: Element, callback: VoidFunction, injector: Injector) => VoidFunction,
-    callback: VoidFunction, type: TriggerType) {
+  initialLView: LView,
+  tNode: TNode,
+  triggerIndex: number,
+  walkUpTimes: number | undefined,
+  registerFn: (element: Element, callback: VoidFunction, injector: Injector) => VoidFunction,
+  callback: VoidFunction,
+  type: TriggerType,
+) {
   const injector = initialLView[INJECTOR]!;
   function pollDomTrigger() {
     // If the initial view was destroyed, we don't need to do anything.
@@ -264,8 +289,10 @@ export function registerDomTrigger(
     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) {
+    if (
+      renderedState !== DeferBlockInternalState.Initial &&
+      renderedState !== DeferBlockState.Placeholder
+    ) {
       return;
     }
 
@@ -283,12 +310,16 @@ export function registerDomTrigger(
     }
 
     const element = getTriggerElement(triggerLView, triggerIndex);
-    const cleanup = registerFn(element, () => {
-      if (initialLView !== triggerLView) {
-        removeLViewOnDestroy(triggerLView, cleanup);
-      }
-      callback();
-    }, injector);
+    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
diff --git a/packages/core/src/defer/idle_scheduler.ts b/packages/core/src/defer/idle_scheduler.ts
index 94ba16238fccf..396a458bda32c 100644
--- a/packages/core/src/defer/idle_scheduler.ts
+++ b/packages/core/src/defer/idle_scheduler.ts
@@ -32,9 +32,9 @@ export function onIdle(callback: VoidFunction, lView: LView) {
  * overridden/mocked in test environment and picked up by the runtime code.
  */
 const _requestIdleCallback = () =>
-    typeof requestIdleCallback !== 'undefined' ? requestIdleCallback : setTimeout;
+  typeof requestIdleCallback !== 'undefined' ? requestIdleCallback : setTimeout;
 const _cancelIdleCallback = () =>
-    typeof requestIdleCallback !== 'undefined' ? cancelIdleCallback : clearTimeout;
+  typeof requestIdleCallback !== 'undefined' ? cancelIdleCallback : clearTimeout;
 
 /**
  * Helper service to schedule `requestIdleCallback`s for batches of defer blocks,
@@ -46,7 +46,7 @@ export class IdleScheduler {
   executingCallbacks = false;
 
   // Currently scheduled idle callback id.
-  idleId: number|null = null;
+  idleId: number | null = null;
 
   // Set of callbacks to be invoked next.
   current = new Set<VoidFunction>();
diff --git a/packages/core/src/defer/instructions.ts b/packages/core/src/defer/instructions.ts
index c8e7c03803a1f..bb7fc42cc6aff 100644
--- a/packages/core/src/defer/instructions.ts
+++ b/packages/core/src/defer/instructions.ts
@@ -29,19 +29,67 @@ import {DirectiveDefList, PipeDefList} from '../render3/interfaces/definition';
 import {TContainerNode, TNode} from '../render3/interfaces/node';
 import {isDestroyed} from '../render3/interfaces/type_checks';
 import {HEADER_OFFSET, INJECTOR, LView, PARENT, TVIEW, TView} from '../render3/interfaces/view';
-import {getCurrentTNode, getLView, getSelectedTNode, getTView, nextBindingIndex} from '../render3/state';
+import {
+  getCurrentTNode,
+  getLView,
+  getSelectedTNode,
+  getTView,
+  nextBindingIndex,
+} from '../render3/state';
 import {isPlatformBrowser} from '../render3/util/misc_utils';
-import {getConstant, getTNode, removeLViewOnDestroy, storeLViewOnDestroy} from '../render3/util/view_utils';
-import {addLViewToLContainer, createAndRenderEmbeddedLView, removeLViewFromLContainer, shouldAddViewToDom} from '../render3/view_manipulation';
+import {
+  getConstant,
+  getTNode,
+  removeLViewOnDestroy,
+  storeLViewOnDestroy,
+} from '../render3/util/view_utils';
+import {
+  addLViewToLContainer,
+  createAndRenderEmbeddedLView,
+  removeLViewFromLContainer,
+  shouldAddViewToDom,
+} from '../render3/view_manipulation';
 import {assertDefined, throwError} from '../util/assert';
 import {performanceMarkFeature} from '../util/performance';
 
-import {invokeAllTriggerCleanupFns, invokeTriggerCleanupFns, storeTriggerCleanupFn} from './cleanup';
+import {
+  invokeAllTriggerCleanupFns,
+  invokeTriggerCleanupFns,
+  storeTriggerCleanupFn,
+} from './cleanup';
 import {onHover, onInteraction, onViewport, registerDomTrigger} from './dom_triggers';
 import {onIdle} from './idle_scheduler';
-import {DEFER_BLOCK_STATE, DeferBlockBehavior, DeferBlockConfig, DeferBlockDependencyInterceptor, DeferBlockInternalState, DeferBlockState, DeferDependenciesLoadingState, DeferredLoadingBlockConfig, DeferredPlaceholderBlockConfig, DependencyResolverFn, LDeferBlockDetails, LOADING_AFTER_CLEANUP_FN, NEXT_DEFER_BLOCK_STATE, STATE_IS_FROZEN_UNTIL, TDeferBlockDetails, TriggerType} from './interfaces';
+import {
+  DEFER_BLOCK_STATE,
+  DeferBlockBehavior,
+  DeferBlockConfig,
+  DeferBlockDependencyInterceptor,
+  DeferBlockInternalState,
+  DeferBlockState,
+  DeferDependenciesLoadingState,
+  DeferredLoadingBlockConfig,
+  DeferredPlaceholderBlockConfig,
+  DependencyResolverFn,
+  LDeferBlockDetails,
+  LOADING_AFTER_CLEANUP_FN,
+  NEXT_DEFER_BLOCK_STATE,
+  STATE_IS_FROZEN_UNTIL,
+  TDeferBlockDetails,
+  TriggerType,
+} from './interfaces';
 import {onTimer, scheduleTimerTrigger} from './timer_scheduler';
-import {addDepsToRegistry, assertDeferredDependenciesLoaded, getLDeferBlockDetails, getLoadingBlockAfter, getMinimumDurationForState, getPrimaryBlockTNode, getTDeferBlockDetails, getTemplateIndexForState, setLDeferBlockDetails, setTDeferBlockDetails} from './utils';
+import {
+  addDepsToRegistry,
+  assertDeferredDependenciesLoaded,
+  getLDeferBlockDetails,
+  getLoadingBlockAfter,
+  getMinimumDurationForState,
+  getPrimaryBlockTNode,
+  getTDeferBlockDetails,
+  getTemplateIndexForState,
+  setLDeferBlockDetails,
+  setTDeferBlockDetails,
+} from './utils';
 
 /**
  * **INTERNAL**, avoid referencing it in application code.
@@ -52,13 +100,14 @@ import {addDepsToRegistry, assertDeferredDependenciesLoaded, getLDeferBlockDetai
  * This token is only injected in devMode
  */
 export const DEFER_BLOCK_DEPENDENCY_INTERCEPTOR =
-    new InjectionToken<DeferBlockDependencyInterceptor>('DEFER_BLOCK_DEPENDENCY_INTERCEPTOR');
+  new InjectionToken<DeferBlockDependencyInterceptor>('DEFER_BLOCK_DEPENDENCY_INTERCEPTOR');
 
 /**
  * **INTERNAL**, token used for configuring defer block behavior.
  */
-export const DEFER_BLOCK_CONFIG =
-    new InjectionToken<DeferBlockConfig>(ngDevMode ? 'DEFER_BLOCK_CONFIG' : '');
+export const DEFER_BLOCK_CONFIG = new InjectionToken<DeferBlockConfig>(
+  ngDevMode ? 'DEFER_BLOCK_CONFIG' : '',
+);
 
 /**
  * Returns whether defer blocks should be triggered.
@@ -81,23 +130,30 @@ function shouldTriggerDeferBlock(injector: Injector): boolean {
  * argument for the `ɵɵdefer` instruction, which references a timer-based
  * implementation.
  */
-let applyDeferBlockStateWithSchedulingImpl: (typeof applyDeferBlockState)|null = null;
+let applyDeferBlockStateWithSchedulingImpl: typeof applyDeferBlockState | null = null;
 
 /**
  * Enables timer-related scheduling if `after` or `minimum` parameters are setup
  * on the `@loading` or `@placeholder` blocks.
  */
 export function ɵɵdeferEnableTimerScheduling(
-    tView: TView, tDetails: TDeferBlockDetails, placeholderConfigIndex?: number|null,
-    loadingConfigIndex?: number|null) {
+  tView: TView,
+  tDetails: TDeferBlockDetails,
+  placeholderConfigIndex?: number | null,
+  loadingConfigIndex?: number | null,
+) {
   const tViewConsts = tView.consts;
   if (placeholderConfigIndex != null) {
-    tDetails.placeholderBlockConfig =
-        getConstant<DeferredPlaceholderBlockConfig>(tViewConsts, placeholderConfigIndex);
+    tDetails.placeholderBlockConfig = getConstant<DeferredPlaceholderBlockConfig>(
+      tViewConsts,
+      placeholderConfigIndex,
+    );
   }
   if (loadingConfigIndex != null) {
-    tDetails.loadingBlockConfig =
-        getConstant<DeferredLoadingBlockConfig>(tViewConsts, loadingConfigIndex);
+    tDetails.loadingBlockConfig = getConstant<DeferredLoadingBlockConfig>(
+      tViewConsts,
+      loadingConfigIndex,
+    );
   }
 
   // Enable implementation that supports timer-based scheduling.
@@ -125,11 +181,16 @@ export function ɵɵdeferEnableTimerScheduling(
  * @codeGenApi
  */
 export function ɵɵdefer(
-    index: number, primaryTmplIndex: number, dependencyResolverFn?: DependencyResolverFn|null,
-    loadingTmplIndex?: number|null, placeholderTmplIndex?: number|null,
-    errorTmplIndex?: number|null, loadingConfigIndex?: number|null,
-    placeholderConfigIndex?: number|null,
-    enableTimerScheduling?: typeof ɵɵdeferEnableTimerScheduling) {
+  index: number,
+  primaryTmplIndex: number,
+  dependencyResolverFn?: DependencyResolverFn | null,
+  loadingTmplIndex?: number | null,
+  placeholderTmplIndex?: number | null,
+  errorTmplIndex?: number | null,
+  loadingConfigIndex?: number | null,
+  placeholderConfigIndex?: number | null,
+  enableTimerScheduling?: typeof ɵɵdeferEnableTimerScheduling,
+) {
   const lView = getLView();
   const tView = getTView();
   const adjustedIndex = index + HEADER_OFFSET;
@@ -163,20 +224,21 @@ export function ɵɵdefer(
 
   // Init instance-specific defer details and store it.
   const lDetails: LDeferBlockDetails = [
-    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
+    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(
-      TriggerType.Regular, lDetails, () => removeLViewOnDestroy(lView, cleanupTriggersFn));
+  storeTriggerCleanupFn(TriggerType.Regular, lDetails, () =>
+    removeLViewOnDestroy(lView, cleanupTriggersFn),
+  );
   storeLViewOnDestroy(lView, cleanupTriggersFn);
 }
 
@@ -190,7 +252,7 @@ export function ɵɵdeferWhen(rawValue: unknown) {
   if (bindingUpdated(lView, bindingIndex, rawValue)) {
     const prevConsumer = setActiveConsumer(null);
     try {
-      const value = Boolean(rawValue);  // handle truthy or falsy values
+      const value = Boolean(rawValue); // handle truthy or falsy values
       const tNode = getSelectedTNode();
       const lDetails = getLDeferBlockDetails(lView, tNode);
       const renderedState = lDetails[DEFER_BLOCK_STATE];
@@ -198,9 +260,10 @@ export function ɵɵdeferWhen(rawValue: unknown) {
         // If nothing is rendered yet, render a placeholder (if defined).
         renderPlaceholder(lView, tNode);
       } else if (
-          value === true &&
-          (renderedState === DeferBlockInternalState.Initial ||
-           renderedState === DeferBlockState.Placeholder)) {
+        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.
@@ -223,7 +286,7 @@ export function ɵɵdeferPrefetchWhen(rawValue: unknown) {
   if (bindingUpdated(lView, bindingIndex, rawValue)) {
     const prevConsumer = setActiveConsumer(null);
     try {
-      const value = Boolean(rawValue);  // handle truthy or falsy values
+      const value = Boolean(rawValue); // handle truthy or falsy values
       const tView = lView[TVIEW];
       const tNode = getSelectedTNode();
       const tDetails = getTDeferBlockDetails(tView, tNode);
@@ -273,7 +336,6 @@ export function ɵɵdeferOnImmediate() {
   triggerDeferBlock(lView, tNode);
 }
 
-
 /**
  * Sets up logic to handle the `prefetch on immediate` deferred trigger.
  * @codeGenApi
@@ -319,8 +381,14 @@ export function ɵɵdeferOnHover(triggerIndex: number, walkUpTimes?: number) {
 
   renderPlaceholder(lView, tNode);
   registerDomTrigger(
-      lView, tNode, triggerIndex, walkUpTimes, onHover, () => triggerDeferBlock(lView, tNode),
-      TriggerType.Regular);
+    lView,
+    tNode,
+    triggerIndex,
+    walkUpTimes,
+    onHover,
+    () => triggerDeferBlock(lView, tNode),
+    TriggerType.Regular,
+  );
 }
 
 /**
@@ -337,8 +405,14 @@ export function ɵɵdeferPrefetchOnHover(triggerIndex: number, walkUpTimes?: num
 
   if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
     registerDomTrigger(
-        lView, tNode, triggerIndex, walkUpTimes, onHover,
-        () => triggerPrefetching(tDetails, lView, tNode), TriggerType.Prefetch);
+      lView,
+      tNode,
+      triggerIndex,
+      walkUpTimes,
+      onHover,
+      () => triggerPrefetching(tDetails, lView, tNode),
+      TriggerType.Prefetch,
+    );
   }
 }
 
@@ -354,8 +428,14 @@ export function ɵɵdeferOnInteraction(triggerIndex: number, walkUpTimes?: numbe
 
   renderPlaceholder(lView, tNode);
   registerDomTrigger(
-      lView, tNode, triggerIndex, walkUpTimes, onInteraction, () => triggerDeferBlock(lView, tNode),
-      TriggerType.Regular);
+    lView,
+    tNode,
+    triggerIndex,
+    walkUpTimes,
+    onInteraction,
+    () => triggerDeferBlock(lView, tNode),
+    TriggerType.Regular,
+  );
 }
 
 /**
@@ -372,8 +452,14 @@ export function ɵɵdeferPrefetchOnInteraction(triggerIndex: number, walkUpTimes
 
   if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
     registerDomTrigger(
-        lView, tNode, triggerIndex, walkUpTimes, onInteraction,
-        () => triggerPrefetching(tDetails, lView, tNode), TriggerType.Prefetch);
+      lView,
+      tNode,
+      triggerIndex,
+      walkUpTimes,
+      onInteraction,
+      () => triggerPrefetching(tDetails, lView, tNode),
+      TriggerType.Prefetch,
+    );
   }
 }
 
@@ -389,8 +475,14 @@ export function ɵɵdeferOnViewport(triggerIndex: number, walkUpTimes?: number)
 
   renderPlaceholder(lView, tNode);
   registerDomTrigger(
-      lView, tNode, triggerIndex, walkUpTimes, onViewport, () => triggerDeferBlock(lView, tNode),
-      TriggerType.Regular);
+    lView,
+    tNode,
+    triggerIndex,
+    walkUpTimes,
+    onViewport,
+    () => triggerDeferBlock(lView, tNode),
+    TriggerType.Regular,
+  );
 }
 
 /**
@@ -407,8 +499,14 @@ export function ɵɵdeferPrefetchOnViewport(triggerIndex: number, walkUpTimes?:
 
   if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
     registerDomTrigger(
-        lView, tNode, triggerIndex, walkUpTimes, onViewport,
-        () => triggerPrefetching(tDetails, lView, tNode), TriggerType.Prefetch);
+      lView,
+      tNode,
+      triggerIndex,
+      walkUpTimes,
+      onViewport,
+      () => triggerPrefetching(tDetails, lView, tNode),
+      TriggerType.Prefetch,
+    );
   }
 }
 
@@ -418,7 +516,8 @@ export function ɵɵdeferPrefetchOnViewport(triggerIndex: number, walkUpTimes?:
  * Schedules triggering of a defer block for `on idle` and `on timer` conditions.
  */
 function scheduleDelayedTrigger(
-    scheduleFn: (callback: VoidFunction, lView: LView) => VoidFunction) {
+  scheduleFn: (callback: VoidFunction, lView: LView) => VoidFunction,
+) {
   const lView = getLView();
   const tNode = getCurrentTNode()!;
 
@@ -434,7 +533,8 @@ function scheduleDelayedTrigger(
  * @param scheduleFn A function that does the scheduling.
  */
 function scheduleDelayedPrefetching(
-    scheduleFn: (callback: VoidFunction, lView: LView) => VoidFunction) {
+  scheduleFn: (callback: VoidFunction, lView: LView) => VoidFunction,
+) {
   const lView = getLView();
   const tNode = getCurrentTNode()!;
   const tView = lView[TVIEW];
@@ -461,8 +561,11 @@ function scheduleDelayedPrefetching(
  *   between states via `DeferFixture.render` method.
  */
 export function renderDeferBlockState(
-    newState: DeferBlockState, tNode: TNode, lContainer: LContainer,
-    skipTimerScheduling = false): void {
+  newState: DeferBlockState,
+  tNode: TNode,
+  lContainer: LContainer,
+  skipTimerScheduling = false,
+): void {
   const hostLView = lContainer[PARENT];
   const hostTView = hostLView[TVIEW];
 
@@ -479,23 +582,30 @@ export function renderDeferBlockState(
 
   const currentState = lDetails[DEFER_BLOCK_STATE];
 
-  if (isValidStateChange(currentState, newState) &&
-      isValidStateChange(lDetails[NEXT_DEFER_BLOCK_STATE] ?? -1, newState)) {
+  if (
+    isValidStateChange(currentState, newState) &&
+    isValidStateChange(lDetails[NEXT_DEFER_BLOCK_STATE] ?? -1, newState)
+  ) {
     const injector = hostLView[INJECTOR]!;
     const tDetails = getTDeferBlockDetails(hostTView, tNode);
     // Skips scheduling on the server since it can delay the server response.
-    const needsScheduling = !skipTimerScheduling && isPlatformBrowser(injector) &&
-        (getLoadingBlockAfter(tDetails) !== null ||
-         getMinimumDurationForState(tDetails, DeferBlockState.Loading) !== null ||
-         getMinimumDurationForState(tDetails, DeferBlockState.Placeholder));
+    const needsScheduling =
+      !skipTimerScheduling &&
+      isPlatformBrowser(injector) &&
+      (getLoadingBlockAfter(tDetails) !== null ||
+        getMinimumDurationForState(tDetails, DeferBlockState.Loading) !== null ||
+        getMinimumDurationForState(tDetails, DeferBlockState.Placeholder));
 
     if (ngDevMode && needsScheduling) {
       assertDefined(
-          applyDeferBlockStateWithSchedulingImpl, 'Expected scheduling function to be defined');
+        applyDeferBlockStateWithSchedulingImpl,
+        'Expected scheduling function to be defined',
+      );
     }
 
-    const applyStateFn =
-        needsScheduling ? applyDeferBlockStateWithSchedulingImpl! : applyDeferBlockState;
+    const applyStateFn = needsScheduling
+      ? applyDeferBlockStateWithSchedulingImpl!
+      : applyDeferBlockState;
     try {
       applyStateFn(newState, lDetails, lContainer, tNode, hostLView);
     } catch (error: unknown) {
@@ -509,8 +619,10 @@ export function renderDeferBlockState(
  * created based on the `OutletInjector`.
  */
 export function isRouterOutletInjector(currentInjector: Injector): boolean {
-  return (currentInjector instanceof ChainedInjector) &&
-      (typeof (currentInjector.injector as any).__ngOutletInjector === 'function');
+  return (
+    currentInjector instanceof ChainedInjector &&
+    typeof (currentInjector.injector as any).__ngOutletInjector === 'function'
+  );
 }
 
 /**
@@ -523,18 +635,23 @@ export function isRouterOutletInjector(currentInjector: Injector): boolean {
  *                       for a newly created `OutletInjector` instance.
  */
 function createRouterOutletInjector(
-    parentOutletInjector: ChainedInjector, parentInjector: Injector) {
+  parentOutletInjector: ChainedInjector,
+  parentInjector: Injector,
+) {
   const outletInjector = parentOutletInjector.injector as any;
   return outletInjector.__ngOutletInjector(parentInjector);
 }
 
-
 /**
  * Applies changes to the DOM to reflect a given state.
  */
 function applyDeferBlockState(
-    newState: DeferBlockState, lDetails: LDeferBlockDetails, lContainer: LContainer, tNode: TNode,
-    hostLView: LView<unknown>) {
+  newState: DeferBlockState,
+  lDetails: LDeferBlockDetails,
+  lContainer: LContainer,
+  tNode: TNode,
+  hostLView: LView<unknown>,
+) {
   const stateTmplIndex = getTemplateIndexForState(newState, hostLView, tNode);
 
   if (stateTmplIndex !== null) {
@@ -549,7 +666,7 @@ function applyDeferBlockState(
 
     removeLViewFromLContainer(lContainer, viewIndex);
 
-    let injector: Injector|undefined;
+    let injector: Injector | undefined;
     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
@@ -568,13 +685,18 @@ function applyDeferBlockState(
         // with the `EnvironmentInjector` in Router's code, this special
         // handling can be removed.
         const isParentOutletInjector = isRouterOutletInjector(parentInjector);
-        const parentEnvInjector =
-            isParentOutletInjector ? parentInjector : parentInjector.get(EnvironmentInjector);
-
-        injector = parentEnvInjector.get(CachedInjectorService)
-                       .getOrCreateInjector(
-                           tDetails, parentEnvInjector as EnvironmentInjector, providers,
-                           ngDevMode ? 'DeferBlock Injector' : '');
+        const parentEnvInjector = isParentOutletInjector
+          ? parentInjector
+          : parentInjector.get(EnvironmentInjector);
+
+        injector = parentEnvInjector
+          .get(CachedInjectorService)
+          .getOrCreateInjector(
+            tDetails,
+            parentEnvInjector as EnvironmentInjector,
+            providers,
+            ngDevMode ? 'DeferBlock Injector' : '',
+          );
 
         // Note: this is a continuation of the special case for Router's `OutletInjector`.
         // Since the `OutletInjector` handles `ActivatedRoute` and `ChildrenOutletContexts`
@@ -587,10 +709,16 @@ function applyDeferBlockState(
       }
     }
     const dehydratedView = findMatchingDehydratedView(lContainer, activeBlockTNode.tView!.ssrId);
-    const embeddedLView =
-        createAndRenderEmbeddedLView(hostLView, activeBlockTNode, null, {dehydratedView, injector});
+    const embeddedLView = createAndRenderEmbeddedLView(hostLView, activeBlockTNode, null, {
+      dehydratedView,
+      injector,
+    });
     addLViewToLContainer(
-        lContainer, embeddedLView, viewIndex, shouldAddViewToDom(activeBlockTNode, dehydratedView));
+      lContainer,
+      embeddedLView,
+      viewIndex,
+      shouldAddViewToDom(activeBlockTNode, dehydratedView),
+    );
     markViewDirty(embeddedLView, NotificationSource.DeferBlockStateUpdate);
   }
 }
@@ -602,8 +730,12 @@ function applyDeferBlockState(
  * `@placeholder` blocks.
  */
 function applyDeferBlockStateWithScheduling(
-    newState: DeferBlockState, lDetails: LDeferBlockDetails, lContainer: LContainer, tNode: TNode,
-    hostLView: LView<unknown>) {
+  newState: DeferBlockState,
+  lDetails: LDeferBlockDetails,
+  lContainer: LContainer,
+  tNode: TNode,
+  hostLView: LView<unknown>,
+) {
   const now = Date.now();
   const hostTView = hostLView[TVIEW];
   const tDetails = getTDeferBlockDetails(hostTView, tNode);
@@ -617,8 +749,13 @@ function applyDeferBlockStateWithScheduling(
       // 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);
+      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
@@ -650,8 +787,12 @@ function applyDeferBlockStateWithScheduling(
  * Schedules an update operation after a specified timeout.
  */
 function scheduleDeferBlockUpdate(
-    timeout: number, lDetails: LDeferBlockDetails, tNode: TNode, lContainer: LContainer,
-    hostLView: LView<unknown>): VoidFunction {
+  timeout: number,
+  lDetails: LDeferBlockDetails,
+  tNode: TNode,
+  lContainer: LContainer,
+  hostLView: LView<unknown>,
+): VoidFunction {
   const callback = () => {
     const nextState = lDetails[NEXT_DEFER_BLOCK_STATE];
     lDetails[STATE_IS_FROZEN_UNTIL] = null;
@@ -673,7 +814,9 @@ function scheduleDeferBlockUpdate(
  * or an error state (represented as `3`).
  */
 function isValidStateChange(
-    currentState: DeferBlockState|DeferBlockInternalState, newState: DeferBlockState): boolean {
+  currentState: DeferBlockState | DeferBlockInternalState,
+  newState: DeferBlockState,
+): boolean {
   return currentState < newState;
 }
 
@@ -696,7 +839,10 @@ export function triggerPrefetching(tDetails: TDeferBlockDetails, lView: LView, t
  * @param lView LView of a host view.
  */
 export function triggerResourceLoading(
-    tDetails: TDeferBlockDetails, lView: LView, tNode: TNode): Promise<unknown> {
+  tDetails: TDeferBlockDetails,
+  lView: LView,
+  tNode: TNode,
+): Promise<unknown> {
   const injector = lView[INJECTOR]!;
   const tView = lView[TVIEW];
 
@@ -720,8 +866,9 @@ export function triggerResourceLoading(
 
   if (ngDevMode) {
     // Check if dependency function interceptor is configured.
-    const deferDependencyInterceptor =
-        injector.get(DEFER_BLOCK_DEPENDENCY_INTERCEPTOR, null, {optional: true});
+    const deferDependencyInterceptor = injector.get(DEFER_BLOCK_DEPENDENCY_INTERCEPTOR, null, {
+      optional: true,
+    });
 
     if (deferDependencyInterceptor) {
       dependenciesFn = deferDependencyInterceptor.intercept(dependenciesFn);
@@ -745,7 +892,7 @@ export function triggerResourceLoading(
   }
 
   // Start downloading of defer block dependencies.
-  tDetails.loadingPromise = Promise.allSettled(dependenciesFn()).then(results => {
+  tDetails.loadingPromise = Promise.allSettled(dependenciesFn()).then((results) => {
     let failed = false;
     const directiveDefs: DirectiveDefList = [];
     const pipeDefs: PipeDefList = [];
@@ -779,11 +926,12 @@ export function triggerResourceLoading(
       if (tDetails.errorTmplIndex === null) {
         const templateLocation = getTemplateLocationDetails(lView);
         const error = new RuntimeError(
-            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.');
+          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 {
@@ -792,18 +940,22 @@ export function triggerResourceLoading(
       // Update directive and pipe registries to add newly downloaded dependencies.
       const primaryBlockTView = primaryBlockTNode.tView!;
       if (directiveDefs.length > 0) {
-        primaryBlockTView.directiveRegistry =
-            addDepsToRegistry<DirectiveDefList>(primaryBlockTView.directiveRegistry, directiveDefs);
+        primaryBlockTView.directiveRegistry = addDepsToRegistry<DirectiveDefList>(
+          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 directiveTypes = directiveDefs.map((def) => def.type);
         const providers = internalImportProvidersFrom(false, ...directiveTypes);
         tDetails.providers = providers;
       }
       if (pipeDefs.length > 0) {
-        primaryBlockTView.pipeRegistry =
-            addDepsToRegistry<PipeDefList>(primaryBlockTView.pipeRegistry, pipeDefs);
+        primaryBlockTView.pipeRegistry = addDepsToRegistry<PipeDefList>(
+          primaryBlockTView.pipeRegistry,
+          pipeDefs,
+        );
       }
     }
   });
@@ -826,10 +978,12 @@ function renderPlaceholder(lView: LView, tNode: TNode) {
  * @param tNode Represents defer block info shared across all instances.
  */
 function renderDeferStateAfterResourceLoading(
-    tDetails: TDeferBlockDetails, tNode: TNode, lContainer: LContainer) {
+  tDetails: TDeferBlockDetails,
+  tNode: TNode,
+  lContainer: LContainer,
+) {
   ngDevMode &&
-      assertDefined(
-          tDetails.loadingPromise, 'Expected loading Promise to exist on this defer block');
+    assertDefined(tDetails.loadingPromise, 'Expected loading Promise to exist on this defer block');
 
   tDetails.loadingPromise!.then(() => {
     if (tDetails.loadingState === DeferDependenciesLoadingState.COMPLETE) {
@@ -837,7 +991,6 @@ function renderDeferStateAfterResourceLoading(
 
       // Everything is loaded, show the primary block content
       renderDeferBlockState(DeferBlockState.Complete, tNode, lContainer);
-
     } else if (tDetails.loadingState === DeferDependenciesLoadingState.FAILED) {
       renderDeferBlockState(DeferBlockState.Error, tNode, lContainer);
     }
@@ -869,8 +1022,10 @@ function triggerDeferBlock(lView: LView, tNode: TNode) {
       triggerResourceLoading(tDetails, lView, tNode);
 
       // The `loadingState` might have changed to "loading".
-      if ((tDetails.loadingState as DeferDependenciesLoadingState) ===
-          DeferDependenciesLoadingState.IN_PROGRESS) {
+      if (
+        (tDetails.loadingState as DeferDependenciesLoadingState) ===
+        DeferDependenciesLoadingState.IN_PROGRESS
+      ) {
         renderDeferStateAfterResourceLoading(tDetails, tNode, lContainer);
       }
       break;
diff --git a/packages/core/src/defer/interfaces.ts b/packages/core/src/defer/interfaces.ts
index c47cbf74f7898..c8c2f27b50a55 100644
--- a/packages/core/src/defer/interfaces.ts
+++ b/packages/core/src/defer/interfaces.ts
@@ -54,10 +54,10 @@ export const MINIMUM_SLOT = 0;
 export const LOADING_AFTER_SLOT = 1;
 
 /** Configuration object for a loading block as it is stored in the component constants. */
-export type DeferredLoadingBlockConfig = [minimumTime: number|null, afterTime: number|null];
+export type DeferredLoadingBlockConfig = [minimumTime: number | null, afterTime: number | null];
 
 /** Configuration object for a placeholder block as it is stored in the component constants. */
-export type DeferredPlaceholderBlockConfig = [minimumTime: number|null];
+export type DeferredPlaceholderBlockConfig = [minimumTime: number | null];
 
 /**
  * Describes the data shared across all instances of a defer block.
@@ -72,32 +72,32 @@ export interface TDeferBlockDetails {
   /**
    * Index in an LView and TData arrays where a template for the loading block can be found.
    */
-  loadingTmplIndex: number|null;
+  loadingTmplIndex: number | null;
 
   /**
    * Extra configuration parameters (such as `after` and `minimum`) for the loading block.
    */
-  loadingBlockConfig: DeferredLoadingBlockConfig|null;
+  loadingBlockConfig: DeferredLoadingBlockConfig | null;
 
   /**
    * Index in an LView and TData arrays where a template for the placeholder block can be found.
    */
-  placeholderTmplIndex: number|null;
+  placeholderTmplIndex: number | null;
 
   /**
    * Extra configuration parameters (such as `after` and `minimum`) for the placeholder block.
    */
-  placeholderBlockConfig: DeferredPlaceholderBlockConfig|null;
+  placeholderBlockConfig: DeferredPlaceholderBlockConfig | null;
 
   /**
    * Index in an LView and TData arrays where a template for the error block can be found.
    */
-  errorTmplIndex: number|null;
+  errorTmplIndex: number | null;
 
   /**
    * Compiler-generated function that loads all dependencies for a defer block.
    */
-  dependencyResolverFn: DependencyResolverFn|null;
+  dependencyResolverFn: DependencyResolverFn | null;
 
   /**
    * Keeps track of the current loading state of defer block dependencies.
@@ -109,13 +109,13 @@ export interface TDeferBlockDetails {
    * are multiple instances of a defer block (e.g. if it was used inside of an *ngFor),
    * which all await the same set of dependencies.
    */
-  loadingPromise: Promise<unknown>|null;
+  loadingPromise: Promise<unknown> | null;
 
   /**
    * List of providers collected from all NgModules that were imported by
    * standalone components used within this defer block.
    */
-  providers: Provider[]|null;
+  providers: Provider[] | null;
 }
 
 /**
@@ -171,35 +171,35 @@ export interface LDeferBlockDetails extends Array<unknown> {
   /**
    * Currently rendered block state.
    */
-  [DEFER_BLOCK_STATE]: DeferBlockState|DeferBlockInternalState;
+  [DEFER_BLOCK_STATE]: DeferBlockState | DeferBlockInternalState;
 
   /**
    * Block state that was requested when another state was rendered.
    */
-  [NEXT_DEFER_BLOCK_STATE]: DeferBlockState|null;
+  [NEXT_DEFER_BLOCK_STATE]: DeferBlockState | null;
 
   /**
    * Timestamp indicating when the current state can be switched to
    * the next one, in case teh current state has `minimum` parameter.
    */
-  [STATE_IS_FROZEN_UNTIL]: number|null;
+  [STATE_IS_FROZEN_UNTIL]: number | null;
 
   /**
    * Contains a reference to a cleanup function which cancels a timeout
    * when Angular waits before rendering loading state. This is used when
    * the loading block has the `after` parameter configured.
    */
-  [LOADING_AFTER_CLEANUP_FN]: VoidFunction|null;
+  [LOADING_AFTER_CLEANUP_FN]: VoidFunction | null;
 
   /**
    * List of cleanup functions for regular triggers.
    */
-  [TRIGGER_CLEANUP_FNS]: VoidFunction[]|null;
+  [TRIGGER_CLEANUP_FNS]: VoidFunction[] | null;
 
   /**
    * List of cleanup functions for prefetch triggers.
    */
-  [PREFETCH_TRIGGER_CLEANUP_FNS]: VoidFunction[]|null;
+  [PREFETCH_TRIGGER_CLEANUP_FNS]: VoidFunction[] | null;
 }
 
 /**
@@ -240,7 +240,7 @@ export interface DeferBlockDependencyInterceptor {
   /**
    * Invoked for each defer block when dependency loading function is accessed.
    */
-  intercept(dependencyFn: DependencyResolverFn|null): DependencyResolverFn|null;
+  intercept(dependencyFn: DependencyResolverFn | null): DependencyResolverFn | null;
 
   /**
    * Allows to configure an interceptor function.
diff --git a/packages/core/src/defer/timer_scheduler.ts b/packages/core/src/defer/timer_scheduler.ts
index 327197725bb70..66566d561c127 100644
--- a/packages/core/src/defer/timer_scheduler.ts
+++ b/packages/core/src/defer/timer_scheduler.ts
@@ -43,23 +43,23 @@ export class TimerScheduler {
   executingCallbacks = false;
 
   // Currently scheduled `setTimeout` id.
-  timeoutId: number|null = null;
+  timeoutId: number | null = null;
 
   // When currently scheduled timer would fire.
-  invokeTimerAt: number|null = null;
+  invokeTimerAt: number | null = 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, ...]
-  current: Array<number|VoidFunction> = [];
+  current: Array<number | VoidFunction> = [];
 
   // 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.
-  deferred: Array<number|VoidFunction> = [];
+  deferred: Array<number | VoidFunction> = [];
 
   add(delay: number, callback: VoidFunction) {
     const target = this.executingCallbacks ? this.deferred : this.current;
@@ -81,7 +81,11 @@ export class TimerScheduler {
     }
   }
 
-  private addToQueue(target: Array<number|VoidFunction>, invokeAt: number, callback: VoidFunction) {
+  private addToQueue(
+    target: Array<number | VoidFunction>,
+    invokeAt: number,
+    callback: VoidFunction,
+  ) {
     let insertAtIndex = target.length;
     for (let i = 0; i < target.length; i += 2) {
       const invokeQueuedCallbackAt = target[i] as number;
@@ -97,7 +101,7 @@ export class TimerScheduler {
     arrayInsert2(target, insertAtIndex, invokeAt, callback);
   }
 
-  private removeFromQueue(target: Array<number|VoidFunction>, callback: VoidFunction) {
+  private removeFromQueue(target: Array<number | VoidFunction>, callback: VoidFunction) {
     let index = -1;
     for (let i = 0; i < target.length; i += 2) {
       const queuedCallback = target[i + 1];
@@ -174,18 +178,20 @@ export class TimerScheduler {
     // 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
+    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] as number;
-      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))) {
+      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.
diff --git a/packages/core/src/defer/utils.ts b/packages/core/src/defer/utils.ts
index 8ec90c120b208..5d8163a22871a 100644
--- a/packages/core/src/defer/utils.ts
+++ b/packages/core/src/defer/utils.ts
@@ -13,8 +13,14 @@ import {HEADER_OFFSET, LView, TVIEW, TView} from '../render3/interfaces/view';
 import {getTNode} from '../render3/util/view_utils';
 import {assertEqual, throwError} from '../util/assert';
 
-import {DeferBlockState, DeferDependenciesLoadingState, LDeferBlockDetails, LOADING_AFTER_SLOT, MINIMUM_SLOT, TDeferBlockDetails} from './interfaces';
-
+import {
+  DeferBlockState,
+  DeferDependenciesLoadingState,
+  LDeferBlockDetails,
+  LOADING_AFTER_SLOT,
+  MINIMUM_SLOT,
+  TDeferBlockDetails,
+} from './interfaces';
 
 /**
  * Calculates a data slot index for defer block info (either static or
@@ -36,7 +42,10 @@ export function getLDeferBlockDetails(lView: LView, tNode: TNode): LDeferBlockDe
 
 /** Stores a defer block instance state in LView. */
 export function setLDeferBlockDetails(
-    lView: LView, deferBlockIndex: number, lDetails: LDeferBlockDetails) {
+  lView: LView,
+  deferBlockIndex: number,
+  lDetails: LDeferBlockDetails,
+) {
   const tView = lView[TVIEW];
   const slotIndex = getDeferBlockDataIndex(deferBlockIndex);
   ngDevMode && assertIndexInDeclRange(tView, slotIndex);
@@ -52,14 +61,20 @@ export function getTDeferBlockDetails(tView: TView, tNode: TNode): TDeferBlockDe
 
 /** Stores a defer block static info in `TView.data`. */
 export function setTDeferBlockDetails(
-    tView: TView, deferBlockIndex: number, deferBlockConfig: TDeferBlockDetails) {
+  tView: TView,
+  deferBlockIndex: number,
+  deferBlockConfig: TDeferBlockDetails,
+) {
   const slotIndex = getDeferBlockDataIndex(deferBlockIndex);
   ngDevMode && assertIndexInDeclRange(tView, slotIndex);
   tView.data[slotIndex] = deferBlockConfig;
 }
 
 export function getTemplateIndexForState(
-    newState: DeferBlockState, hostLView: LView, tNode: TNode): number|null {
+  newState: DeferBlockState,
+  hostLView: LView,
+  tNode: TNode,
+): number | null {
   const tView = hostLView[TVIEW];
   const tDetails = getTDeferBlockDetails(tView, tNode);
 
@@ -84,7 +99,9 @@ export function getTemplateIndexForState(
  * not specified - returns `null`.
  */
 export function getMinimumDurationForState(
-    tDetails: TDeferBlockDetails, currentState: DeferBlockState): number|null {
+  tDetails: TDeferBlockDetails,
+  currentState: DeferBlockState,
+): number | null {
   if (currentState === DeferBlockState.Placeholder) {
     return tDetails.placeholderBlockConfig?.[MINIMUM_SLOT] ?? null;
   } else if (currentState === DeferBlockState.Loading) {
@@ -94,7 +111,7 @@ export function getMinimumDurationForState(
 }
 
 /** Retrieves the value of the `after` parameter on the @loading block. */
-export function getLoadingBlockAfter(tDetails: TDeferBlockDetails): number|null {
+export function getLoadingBlockAfter(tDetails: TDeferBlockDetails): number | null {
   return tDetails.loadingBlockConfig?.[LOADING_AFTER_SLOT] ?? null;
 }
 
@@ -102,7 +119,7 @@ export function getLoadingBlockAfter(tDetails: TDeferBlockDetails): number|null
  * Adds downloaded dependencies into a directive or a pipe registry,
  * making sure that a dependency doesn't yet exist in the registry.
  */
-export function addDepsToRegistry<T extends DependencyDef[]>(currentDeps: T|null, newDeps: T): T {
+export function addDepsToRegistry<T extends DependencyDef[]>(currentDeps: T | null, newDeps: T): T {
   if (!currentDeps || currentDeps.length === 0) {
     return newDeps;
   }
@@ -114,7 +131,7 @@ export function addDepsToRegistry<T extends DependencyDef[]>(currentDeps: T|null
 
   // 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) as T;
+  return currentDeps.length === currentDepSet.size ? currentDeps : (Array.from(currentDepSet) as T);
 }
 
 /** Retrieves a TNode that represents main content of a defer block. */
@@ -130,8 +147,10 @@ export function getPrimaryBlockTNode(tView: TView, tDetails: TDeferBlockDetails)
  */
 export function assertDeferredDependenciesLoaded(tDetails: TDeferBlockDetails) {
   assertEqual(
-      tDetails.loadingState, DeferDependenciesLoadingState.COMPLETE,
-      'Expecting all deferred dependencies to be loaded.');
+    tDetails.loadingState,
+    DeferDependenciesLoadingState.COMPLETE,
+    'Expecting all deferred dependencies to be loaded.',
+  );
 }
 
 /**
@@ -141,6 +160,9 @@ export function assertDeferredDependenciesLoaded(tDetails: TDeferBlockDetails) {
  * that a primary template exists. All the other template options are optional.
  */
 export function isTDeferBlockDetails(value: unknown): value is TDeferBlockDetails {
-  return value !== null && (typeof value === 'object') &&
-      (typeof (value as TDeferBlockDetails).primaryTmplIndex === 'number');
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    typeof (value as TDeferBlockDetails).primaryTmplIndex === 'number'
+  );
 }
diff --git a/packages/core/src/di/contextual.ts b/packages/core/src/di/contextual.ts
index 73fbdc325d5e6..2bc1211e6c974 100644
--- a/packages/core/src/di/contextual.ts
+++ b/packages/core/src/di/contextual.ts
@@ -7,7 +7,10 @@
  */
 
 import {RuntimeError, RuntimeErrorCode} from '../errors';
-import {InjectorProfilerContext, setInjectorProfilerContext} from '../render3/debug/injector_profiler';
+import {
+  InjectorProfilerContext,
+  setInjectorProfilerContext,
+} from '../render3/debug/injector_profiler';
 
 import {getInjectImplementation, setInjectImplementation} from './inject_switch';
 import type {Injector} from './injector';
@@ -67,9 +70,10 @@ export function assertInInjectionContext(debugFn: Function): void {
   // from being retained in the bundle regardless of minification.
   if (!isInInjectionContext()) {
     throw new RuntimeError(
-        RuntimeErrorCode.MISSING_INJECTION_CONTEXT,
-        ngDevMode &&
-            (debugFn.name +
-             '() can only be used within an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`'));
+      RuntimeErrorCode.MISSING_INJECTION_CONTEXT,
+      ngDevMode &&
+        debugFn.name +
+          '() can only be used within an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`',
+    );
   }
 }
diff --git a/packages/core/src/di/create_injector.ts b/packages/core/src/di/create_injector.ts
index d26401fcc9fdf..dd5ee1ce3c9d9 100644
--- a/packages/core/src/di/create_injector.ts
+++ b/packages/core/src/di/create_injector.ts
@@ -19,10 +19,17 @@ import {InjectorScope} from './scope';
  * Create a new `Injector` which is configured using a `defType` of `InjectorType<any>`s.
  */
 export function createInjector(
-    defType: /* InjectorType<any> */ any, parent: Injector|null = null,
-    additionalProviders: Array<Provider|StaticProvider>|null = null, name?: string): Injector {
-  const injector =
-      createInjectorWithoutInjectorInstances(defType, parent, additionalProviders, name);
+  defType: /* InjectorType<any> */ any,
+  parent: Injector | null = null,
+  additionalProviders: Array<Provider | StaticProvider> | null = null,
+  name?: string,
+): Injector {
+  const injector = createInjectorWithoutInjectorInstances(
+    defType,
+    parent,
+    additionalProviders,
+    name,
+  );
   injector.resolveInjectorInitializers();
   return injector;
 }
@@ -33,13 +40,13 @@ export function createInjector(
  * should be resolved at a later point by calling `_resolveInjectorDefTypes`.
  */
 export function createInjectorWithoutInjectorInstances(
-    defType: /* InjectorType<any> */ any, parent: Injector|null = null,
-    additionalProviders: Array<Provider|StaticProvider>|null = null, name?: string,
-    scopes = new Set<InjectorScope>()): R3Injector {
-  const providers = [
-    additionalProviders || EMPTY_ARRAY,
-    importProvidersFrom(defType),
-  ];
+  defType: /* InjectorType<any> */ any,
+  parent: Injector | null = null,
+  additionalProviders: Array<Provider | StaticProvider> | null = null,
+  name?: string,
+  scopes = new Set<InjectorScope>(),
+): R3Injector {
+  const providers = [additionalProviders || EMPTY_ARRAY, importProvidersFrom(defType)];
   name = name || (typeof defType === 'object' ? undefined : stringify(defType));
 
   return new R3Injector(providers, parent || getNullInjector(), name || null, scopes);
diff --git a/packages/core/src/di/forward_ref.ts b/packages/core/src/di/forward_ref.ts
index d0ba224d4f6ef..ab5568e640a71 100644
--- a/packages/core/src/di/forward_ref.ts
+++ b/packages/core/src/di/forward_ref.ts
@@ -10,8 +10,6 @@ import {Type} from '../interface/type';
 import {getClosureSafeProperty} from '../util/property';
 import {stringify} from '../util/stringify';
 
-
-
 /**
  * An interface that a function passed into `forwardRef` has to implement.
  *
@@ -68,10 +66,10 @@ const __forward_ref__ = getClosureSafeProperty({__forward_ref__: getClosureSafeP
  */
 export function forwardRef(forwardRefFn: ForwardRefFn): Type<any> {
   (<any>forwardRefFn).__forward_ref__ = forwardRef;
-  (<any>forwardRefFn).toString = function() {
+  (<any>forwardRefFn).toString = function () {
     return stringify(this());
   };
-  return (<Type<any>><any>forwardRefFn);
+  return <Type<any>>(<any>forwardRefFn);
 }
 
 /**
@@ -92,7 +90,10 @@ export function resolveForwardRef<T>(type: T): T {
 }
 
 /** Checks whether a function is wrapped by a `forwardRef`. */
-export function isForwardRef(fn: any): fn is() => any {
-  return typeof fn === 'function' && fn.hasOwnProperty(__forward_ref__) &&
-      fn.__forward_ref__ === forwardRef;
+export function isForwardRef(fn: any): fn is () => any {
+  return (
+    typeof fn === 'function' &&
+    fn.hasOwnProperty(__forward_ref__) &&
+    fn.__forward_ref__ === forwardRef
+  );
 }
diff --git a/packages/core/src/di/host_tag_name_token.ts b/packages/core/src/di/host_tag_name_token.ts
index a2366f9b84a34..2fbef5d4443cc 100644
--- a/packages/core/src/di/host_tag_name_token.ts
+++ b/packages/core/src/di/host_tag_name_token.ts
@@ -43,10 +43,11 @@ export const HOST_TAG_NAME = new InjectionToken<string>(ngDevMode ? 'HOST_TAG_NA
   const tNode = getCurrentTNode();
   if (tNode === null) {
     throw new RuntimeError(
-        RuntimeErrorCode.INVALID_INJECTION_TOKEN,
-        ngDevMode &&
-            'HOST_TAG_NAME can only be injected in directives and components ' +
-                'during construction time (in a class constructor or as a class field initializer)');
+      RuntimeErrorCode.INVALID_INJECTION_TOKEN,
+      ngDevMode &&
+        'HOST_TAG_NAME can only be injected in directives and components ' +
+          'during construction time (in a class constructor or as a class field initializer)',
+    );
   }
   if (tNode.type & TNodeType.Element) {
     return tNode.value;
@@ -55,11 +56,13 @@ export const HOST_TAG_NAME = new InjectionToken<string>(ngDevMode ? 'HOST_TAG_NA
     return null;
   }
   throw new RuntimeError(
-      RuntimeErrorCode.INVALID_INJECTION_TOKEN,
-      ngDevMode &&
-          `HOST_TAG_NAME was used on ${
-              getDevModeNodeName(tNode)} which doesn't have an underlying element in the DOM. ` +
-              `This is invalid, and so the dependency should be marked as optional.`);
+    RuntimeErrorCode.INVALID_INJECTION_TOKEN,
+    ngDevMode &&
+      `HOST_TAG_NAME was used on ${getDevModeNodeName(
+        tNode,
+      )} which doesn't have an underlying element in the DOM. ` +
+        `This is invalid, and so the dependency should be marked as optional.`,
+  );
 };
 
 function getDevModeNodeName(tNode: TNode) {
diff --git a/packages/core/src/di/index.ts b/packages/core/src/di/index.ts
index 4650dc55d8b61..5aebe97050abf 100644
--- a/packages/core/src/di/index.ts
+++ b/packages/core/src/di/index.ts
@@ -15,18 +15,47 @@
 export * from './metadata';
 export {assertInInjectionContext, runInInjectionContext} from './contextual';
 export {InjectFlags} from './interface/injector';
-export {ɵɵdefineInjectable, defineInjectable, ɵɵdefineInjector, InjectableType, InjectorType} from './interface/defs';
+export {
+  ɵɵdefineInjectable,
+  defineInjectable,
+  ɵɵdefineInjector,
+  InjectableType,
+  InjectorType,
+} from './interface/defs';
 export {forwardRef, resolveForwardRef, ForwardRefFn} from './forward_ref';
 export {Injectable, InjectableDecorator, InjectableProvider} from './injectable';
 export {Injector} from './injector';
 export {EnvironmentInjector} from './r3_injector';
-export {importProvidersFrom, ImportProvidersSource, makeEnvironmentProviders} from './provider_collection';
+export {
+  importProvidersFrom,
+  ImportProvidersSource,
+  makeEnvironmentProviders,
+} from './provider_collection';
 export {ENVIRONMENT_INITIALIZER} from './initializer_token';
 export {ProviderToken} from './provider_token';
 export {ɵɵinject, inject, ɵɵinvalidFactoryDep} from './injector_compatibility';
 export {InjectOptions} from './interface/injector';
 export {INJECTOR} from './injector_token';
-export {ClassProvider, ModuleWithProviders, ClassSansProvider, ImportedNgModuleProviders, ConstructorProvider, EnvironmentProviders, ConstructorSansProvider, ExistingProvider, ExistingSansProvider, FactoryProvider, FactorySansProvider, Provider, StaticClassProvider, StaticClassSansProvider, StaticProvider, TypeProvider, ValueProvider, ValueSansProvider} from './interface/provider';
+export {
+  ClassProvider,
+  ModuleWithProviders,
+  ClassSansProvider,
+  ImportedNgModuleProviders,
+  ConstructorProvider,
+  EnvironmentProviders,
+  ConstructorSansProvider,
+  ExistingProvider,
+  ExistingSansProvider,
+  FactoryProvider,
+  FactorySansProvider,
+  Provider,
+  StaticClassProvider,
+  StaticClassSansProvider,
+  StaticProvider,
+  TypeProvider,
+  ValueProvider,
+  ValueSansProvider,
+} from './interface/provider';
 export {InjectionToken} from './injection_token';
 export {HostAttributeToken} from './host_attribute_token';
 export {HOST_TAG_NAME} from './host_tag_name_token';
diff --git a/packages/core/src/di/initializer_token.ts b/packages/core/src/di/initializer_token.ts
index 04dafd00c5cab..0f93761dd6c6e 100644
--- a/packages/core/src/di/initializer_token.ts
+++ b/packages/core/src/di/initializer_token.ts
@@ -14,5 +14,6 @@ import {InjectionToken} from './injection_token';
  *
  * @publicApi
  */
-export const ENVIRONMENT_INITIALIZER =
-    new InjectionToken<ReadonlyArray<() => void>>(ngDevMode ? 'ENVIRONMENT_INITIALIZER' : '');
+export const ENVIRONMENT_INITIALIZER = new InjectionToken<ReadonlyArray<() => void>>(
+  ngDevMode ? 'ENVIRONMENT_INITIALIZER' : '',
+);
diff --git a/packages/core/src/di/inject_switch.ts b/packages/core/src/di/inject_switch.ts
index ce26489e4e80a..570293dce6731 100644
--- a/packages/core/src/di/inject_switch.ts
+++ b/packages/core/src/di/inject_switch.ts
@@ -14,7 +14,6 @@ import {getInjectableDef, ɵɵInjectableDeclaration} from './interface/defs';
 import {InjectFlags} from './interface/injector';
 import {ProviderToken} from './provider_token';
 
-
 /**
  * Current implementation of inject.
  *
@@ -24,25 +23,24 @@ import {ProviderToken} from './provider_token';
  *  1. `Injector` should not depend on ivy logic.
  *  2. To maintain tree shake-ability we don't want to bring in unnecessary code.
  */
-let _injectImplementation: (<T>(token: ProviderToken<T>, flags?: InjectFlags) => T | null)|
-    undefined;
+let _injectImplementation:
+  | (<T>(token: ProviderToken<T>, flags?: InjectFlags) => T | null)
+  | undefined;
 export function getInjectImplementation() {
   return _injectImplementation;
 }
 
-
 /**
  * Sets the current inject implementation.
  */
 export function setInjectImplementation(
-    impl: (<T>(token: ProviderToken<T>, flags?: InjectFlags) => T | null)|
-    undefined): (<T>(token: ProviderToken<T>, flags?: InjectFlags) => T | null)|undefined {
+  impl: (<T>(token: ProviderToken<T>, flags?: InjectFlags) => T | null) | undefined,
+): (<T>(token: ProviderToken<T>, flags?: InjectFlags) => T | null) | undefined {
   const previous = _injectImplementation;
   _injectImplementation = impl;
   return previous;
 }
 
-
 /**
  * Injects `root` tokens in limp mode.
  *
@@ -51,18 +49,21 @@ export function setInjectImplementation(
  * injectable definition.
  */
 export function injectRootLimpMode<T>(
-    token: ProviderToken<T>, notFoundValue: T|undefined, flags: InjectFlags): T|null {
-  const injectableDef: ɵɵInjectableDeclaration<T>|null = getInjectableDef(token);
+  token: ProviderToken<T>,
+  notFoundValue: T | undefined,
+  flags: InjectFlags,
+): T | null {
+  const injectableDef: ɵɵInjectableDeclaration<T> | null = getInjectableDef(token);
   if (injectableDef && injectableDef.providedIn == 'root') {
-    return injectableDef.value === undefined ? injectableDef.value = injectableDef.factory() :
-                                               injectableDef.value;
+    return injectableDef.value === undefined
+      ? (injectableDef.value = injectableDef.factory())
+      : injectableDef.value;
   }
   if (flags & InjectFlags.Optional) return null;
   if (notFoundValue !== undefined) return notFoundValue;
   throwProviderNotFoundError(token, 'Injector');
 }
 
-
 /**
  * Assert that `_injectImplementation` is not `fn`.
  *
@@ -71,7 +72,8 @@ export function injectRootLimpMode<T>(
  * @param fn Function which it should not equal to
  */
 export function assertInjectImplementationNotEqual(
-    fn: (<T>(token: ProviderToken<T>, flags?: InjectFlags) => T | null)) {
+  fn: <T>(token: ProviderToken<T>, flags?: InjectFlags) => T | null,
+) {
   ngDevMode &&
-      assertNotEqual(_injectImplementation, fn, 'Calling ɵɵinject would cause infinite recursion');
+    assertNotEqual(_injectImplementation, fn, 'Calling ɵɵinject would cause infinite recursion');
 }
diff --git a/packages/core/src/di/injectable.ts b/packages/core/src/di/injectable.ts
index 90ec2260b70a3..565b6ebb21325 100644
--- a/packages/core/src/di/injectable.ts
+++ b/packages/core/src/di/injectable.ts
@@ -9,7 +9,14 @@
 import {Type} from '../interface/type';
 import {makeDecorator, TypeDecorator} from '../util/decorators';
 
-import {ClassSansProvider, ConstructorSansProvider, ExistingSansProvider, FactorySansProvider, StaticClassSansProvider, ValueSansProvider} from './interface/provider';
+import {
+  ClassSansProvider,
+  ConstructorSansProvider,
+  ExistingSansProvider,
+  FactorySansProvider,
+  StaticClassSansProvider,
+  ValueSansProvider,
+} from './interface/provider';
 import {compileInjectable} from './jit/injectable';
 
 export {compileInjectable};
@@ -19,8 +26,13 @@ export {compileInjectable};
  *
  * @publicApi
  */
-export type InjectableProvider = ValueSansProvider|ExistingSansProvider|StaticClassSansProvider|
-    ConstructorSansProvider|FactorySansProvider|ClassSansProvider;
+export type InjectableProvider =
+  | ValueSansProvider
+  | ExistingSansProvider
+  | StaticClassSansProvider
+  | ConstructorSansProvider
+  | FactorySansProvider
+  | ClassSansProvider;
 
 /**
  * Type of the Injectable decorator / constructor function.
@@ -48,11 +60,13 @@ export interface InjectableDecorator {
    *
    */
   (): TypeDecorator;
-  (options?: {providedIn: Type<any>|'root'|'platform'|'any'|null}&
-   InjectableProvider): TypeDecorator;
-  new(): Injectable;
-  new(options?: {providedIn: Type<any>|'root'|'platform'|'any'|null}&
-      InjectableProvider): Injectable;
+  (
+    options?: {providedIn: Type<any> | 'root' | 'platform' | 'any' | null} & InjectableProvider,
+  ): TypeDecorator;
+  new (): Injectable;
+  new (
+    options?: {providedIn: Type<any> | 'root' | 'platform' | 'any' | null} & InjectableProvider,
+  ): Injectable;
 }
 
 /**
@@ -79,7 +93,7 @@ export interface Injectable {
    * modules share one instance. This option is DEPRECATED.
    *
    */
-  providedIn?: Type<any>|'root'|'platform'|'any'|null;
+  providedIn?: Type<any> | 'root' | 'platform' | 'any' | null;
 }
 
 /**
@@ -89,5 +103,9 @@ export interface Injectable {
  * @publicApi
  */
 export const Injectable: InjectableDecorator = makeDecorator(
-    'Injectable', undefined, undefined, undefined,
-    (type: Type<any>, meta: Injectable) => compileInjectable(type as any, meta));
+  'Injectable',
+  undefined,
+  undefined,
+  undefined,
+  (type: Type<any>, meta: Injectable) => compileInjectable(type as any, meta),
+);
diff --git a/packages/core/src/di/injection_token.ts b/packages/core/src/di/injection_token.ts
index 822bb92c0cb40..4d92d55dea76e 100644
--- a/packages/core/src/di/injection_token.ts
+++ b/packages/core/src/di/injection_token.ts
@@ -72,13 +72,17 @@ export class InjectionToken<T> {
    *                it should but does not need to be unique
    * @param options Options for the token's usage, as described above
    */
-  constructor(protected _desc: string, options?: {
-    providedIn?: Type<any>|'root'|'platform'|'any'|null, factory: () => T
-  }) {
+  constructor(
+    protected _desc: string,
+    options?: {
+      providedIn?: Type<any> | 'root' | 'platform' | 'any' | null;
+      factory: () => T;
+    },
+  ) {
     this.ɵprov = undefined;
     if (typeof options == 'number') {
       (typeof ngDevMode === 'undefined' || ngDevMode) &&
-          assertLessThan(options, 0, 'Only negative numbers are supported here');
+        assertLessThan(options, 0, 'Only negative numbers are supported here');
       // This is a special hack to assign __NG_ELEMENT_ID__ to this instance.
       // See `InjectorMarkers`
       (this as any).__NG_ELEMENT_ID__ = options;
diff --git a/packages/core/src/di/injector.ts b/packages/core/src/di/injector.ts
index c165e6a291982..848aba0b0dcd1 100644
--- a/packages/core/src/di/injector.ts
+++ b/packages/core/src/di/injector.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {createInjector} from './create_injector';
 import {THROW_IF_NOT_FOUND, ɵɵinject} from './injector_compatibility';
 import {InjectorMarkers} from './injector_marker';
@@ -43,7 +42,7 @@ import {ProviderToken} from './provider_token';
  */
 export abstract class Injector {
   static THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
-  static NULL: Injector = (/* @__PURE__ */ new NullInjector());
+  static NULL: Injector = /* @__PURE__ */ new NullInjector();
 
   /**
    * Internal note on the `options?: InjectOptions|InjectFlags` override of the `get`
@@ -57,23 +56,33 @@ export abstract class Injector {
    * @returns The instance from the injector if defined, otherwise the `notFoundValue`.
    * @throws When the `notFoundValue` is `undefined` or `Injector.THROW_IF_NOT_FOUND`.
    */
-  abstract get<T>(token: ProviderToken<T>, notFoundValue: undefined, options: InjectOptions&{
-    optional?: false;
-  }): T;
+  abstract get<T>(
+    token: ProviderToken<T>,
+    notFoundValue: undefined,
+    options: InjectOptions & {
+      optional?: false;
+    },
+  ): T;
   /**
    * Retrieves an instance from the injector based on the provided token.
    * @returns The instance from the injector if defined, otherwise the `notFoundValue`.
    * @throws When the `notFoundValue` is `undefined` or `Injector.THROW_IF_NOT_FOUND`.
    */
-  abstract get<T>(token: ProviderToken<T>, notFoundValue: null|undefined, options: InjectOptions): T
-      |null;
+  abstract get<T>(
+    token: ProviderToken<T>,
+    notFoundValue: null | undefined,
+    options: InjectOptions,
+  ): T | null;
   /**
    * Retrieves an instance from the injector based on the provided token.
    * @returns The instance from the injector if defined, otherwise the `notFoundValue`.
    * @throws When the `notFoundValue` is `undefined` or `Injector.THROW_IF_NOT_FOUND`.
    */
-  abstract get<T>(token: ProviderToken<T>, notFoundValue?: T, options?: InjectOptions|InjectFlags):
-      T;
+  abstract get<T>(
+    token: ProviderToken<T>,
+    notFoundValue?: T,
+    options?: InjectOptions | InjectFlags,
+  ): T;
   /**
    * Retrieves an instance from the injector based on the provided token.
    * @returns The instance from the injector if defined, otherwise the `notFoundValue`.
@@ -104,15 +113,18 @@ export abstract class Injector {
    * @returns The new injector instance.
    *
    */
-  static create(options:
-                    {providers: Array<Provider|StaticProvider>, parent?: Injector, name?: string}):
-      Injector;
-
+  static create(options: {
+    providers: Array<Provider | StaticProvider>;
+    parent?: Injector;
+    name?: string;
+  }): Injector;
 
   static create(
-      options: StaticProvider[]|
-      {providers: Array<Provider|StaticProvider>, parent?: Injector, name?: string},
-      parent?: Injector): Injector {
+    options:
+      | StaticProvider[]
+      | {providers: Array<Provider | StaticProvider>; parent?: Injector; name?: string},
+    parent?: Injector,
+  ): Injector {
     if (Array.isArray(options)) {
       return createInjector({name: ''}, parent, options, '');
     } else {
diff --git a/packages/core/src/di/injector_compatibility.ts b/packages/core/src/di/injector_compatibility.ts
index 9fc5a562b1353..d0d01cccf3a74 100644
--- a/packages/core/src/di/injector_compatibility.ts
+++ b/packages/core/src/di/injector_compatibility.ts
@@ -16,11 +16,15 @@ import {stringify} from '../util/stringify';
 import {resolveForwardRef} from './forward_ref';
 import {getInjectImplementation, injectRootLimpMode} from './inject_switch';
 import type {Injector} from './injector';
-import {DecoratorFlags, InjectFlags, InjectOptions, InternalInjectFlags} from './interface/injector';
+import {
+  DecoratorFlags,
+  InjectFlags,
+  InjectOptions,
+  InternalInjectFlags,
+} from './interface/injector';
 import {ProviderToken} from './provider_token';
 import type {HostAttributeToken} from './host_attribute_token';
 
-
 const _THROW_IF_NOT_FOUND = {};
 export const THROW_IF_NOT_FOUND = _THROW_IF_NOT_FOUND;
 
@@ -43,32 +47,40 @@ export const SOURCE = '__source';
  * - `null`: `inject` can be called but there is no injector (limp-mode).
  * - Injector instance: Use the injector for resolution.
  */
-let _currentInjector: Injector|undefined|null = undefined;
+let _currentInjector: Injector | undefined | null = undefined;
 
-export function getCurrentInjector(): Injector|undefined|null {
+export function getCurrentInjector(): Injector | undefined | null {
   return _currentInjector;
 }
 
-export function setCurrentInjector(injector: Injector|null|undefined): Injector|undefined|null {
+export function setCurrentInjector(
+  injector: Injector | null | undefined,
+): Injector | undefined | null {
   const former = _currentInjector;
   _currentInjector = injector;
   return former;
 }
 
 export function injectInjectorOnly<T>(token: ProviderToken<T>): T;
-export function injectInjectorOnly<T>(token: ProviderToken<T>, flags?: InjectFlags): T|null;
-export function injectInjectorOnly<T>(token: ProviderToken<T>, flags = InjectFlags.Default): T|
-    null {
+export function injectInjectorOnly<T>(token: ProviderToken<T>, flags?: InjectFlags): T | null;
+export function injectInjectorOnly<T>(
+  token: ProviderToken<T>,
+  flags = InjectFlags.Default,
+): T | null {
   if (_currentInjector === undefined) {
     throw new RuntimeError(
-        RuntimeErrorCode.MISSING_INJECTION_CONTEXT,
-        ngDevMode &&
-            `inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with \`runInInjectionContext\`.`);
+      RuntimeErrorCode.MISSING_INJECTION_CONTEXT,
+      ngDevMode &&
+        `inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with \`runInInjectionContext\`.`,
+    );
   } else if (_currentInjector === null) {
     return injectRootLimpMode(token, undefined, flags);
   } else {
-    const value =
-        _currentInjector.get(token, flags & InjectFlags.Optional ? null : undefined, flags);
+    const value = _currentInjector.get(
+      token,
+      flags & InjectFlags.Optional ? null : undefined,
+      flags,
+    );
     ngDevMode && emitInjectEvent(token as Type<unknown>, value, flags);
     return value;
   }
@@ -85,15 +97,21 @@ export function injectInjectorOnly<T>(token: ProviderToken<T>, flags = InjectFla
  * @publicApi This instruction has been emitted by ViewEngine for some time and is deployed to npm.
  */
 export function ɵɵinject<T>(token: ProviderToken<T>): T;
-export function ɵɵinject<T>(token: ProviderToken<T>, flags?: InjectFlags): T|null;
+export function ɵɵinject<T>(token: ProviderToken<T>, flags?: InjectFlags): T | null;
 export function ɵɵinject(token: HostAttributeToken): string;
-export function ɵɵinject(token: HostAttributeToken, flags?: InjectFlags): string|null;
+export function ɵɵinject(token: HostAttributeToken, flags?: InjectFlags): string | null;
 export function ɵɵinject<T>(
-    token: ProviderToken<T>|HostAttributeToken, flags?: InjectFlags): string|null;
+  token: ProviderToken<T> | HostAttributeToken,
+  flags?: InjectFlags,
+): string | null;
 export function ɵɵinject<T>(
-    token: ProviderToken<T>|HostAttributeToken, flags = InjectFlags.Default): T|null {
+  token: ProviderToken<T> | HostAttributeToken,
+  flags = InjectFlags.Default,
+): T | null {
   return (getInjectImplementation() || injectInjectorOnly)(
-      resolveForwardRef(token as Type<T>), flags);
+    resolveForwardRef(token as Type<T>),
+    flags,
+  );
 }
 
 /**
@@ -107,14 +125,13 @@ export function ɵɵinject<T>(
  */
 export function ɵɵinvalidFactoryDep(index: number): never {
   throw new RuntimeError(
-      RuntimeErrorCode.INVALID_FACTORY_DEPENDENCY,
-      ngDevMode &&
-          `This constructor is not compatible with Angular Dependency Injection because its dependency at index ${
-              index} of the parameter list is invalid.
+    RuntimeErrorCode.INVALID_FACTORY_DEPENDENCY,
+    ngDevMode &&
+      `This constructor is not compatible with Angular Dependency Injection because its dependency at index ${index} of the parameter list is invalid.
 This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.
 
-Please check that 1) the type for the parameter at index ${
-              index} is correct and 2) the correct Angular decorators are defined for this class and its ancestors.`);
+Please check that 1) the type for the parameter at index ${index} is correct and 2) the correct Angular decorators are defined for this class and its ancestors.`,
+  );
 }
 
 /**
@@ -135,7 +152,7 @@ export function inject<T>(token: ProviderToken<T>): T;
  * @publicApi
  * @deprecated prefer an options object instead of `InjectFlags`
  */
-export function inject<T>(token: ProviderToken<T>, flags?: InjectFlags): T|null;
+export function inject<T>(token: ProviderToken<T>, flags?: InjectFlags): T | null;
 /**
  * @param token A token that represents a dependency that should be injected.
  * @param options Control how injection is executed. Options correspond to injection strategies
@@ -146,7 +163,7 @@ export function inject<T>(token: ProviderToken<T>, flags?: InjectFlags): T|null;
  *
  * @publicApi
  */
-export function inject<T>(token: ProviderToken<T>, options: InjectOptions&{optional?: false}): T;
+export function inject<T>(token: ProviderToken<T>, options: InjectOptions & {optional?: false}): T;
 /**
  * @param token A token that represents a dependency that should be injected.
  * @param options Control how injection is executed. Options correspond to injection strategies
@@ -159,7 +176,7 @@ export function inject<T>(token: ProviderToken<T>, options: InjectOptions&{optio
  *
  * @publicApi
  */
-export function inject<T>(token: ProviderToken<T>, options: InjectOptions): T|null;
+export function inject<T>(token: ProviderToken<T>, options: InjectOptions): T | null;
 /**
  * @param token A token that represents a static attribute on the host node that should be injected.
  * @returns Value of the attribute if it exists.
@@ -175,7 +192,7 @@ export function inject(token: HostAttributeToken): string;
  *
  * @publicApi
  */
-export function inject(token: HostAttributeToken, options: {optional: true}): string|null;
+export function inject(token: HostAttributeToken, options: {optional: true}): string | null;
 /**
  * @param token A token that represents a static attribute on the host node that should be injected.
  * @returns Value of the attribute if it exists.
@@ -250,16 +267,18 @@ export function inject(token: HostAttributeToken, options: {optional: false}): s
  * @publicApi
  */
 export function inject<T>(
-    token: ProviderToken<T>|HostAttributeToken,
-    flags: InjectFlags|InjectOptions = InjectFlags.Default) {
+  token: ProviderToken<T> | HostAttributeToken,
+  flags: InjectFlags | InjectOptions = InjectFlags.Default,
+) {
   // The `as any` here _shouldn't_ be necessary, but without it JSCompiler
   // throws a disambiguation  error due to the multiple signatures.
   return ɵɵinject(token as any, convertToBitFlags(flags));
 }
 
 // Converts object-based DI flags (`InjectOptions`) to bit flags (`InjectFlags`).
-export function convertToBitFlags(flags: InjectOptions|InjectFlags|undefined): InjectFlags|
-    undefined {
+export function convertToBitFlags(
+  flags: InjectOptions | InjectFlags | undefined,
+): InjectFlags | undefined {
   if (typeof flags === 'undefined' || typeof flags === 'number') {
     return flags;
   }
@@ -267,24 +286,25 @@ export function convertToBitFlags(flags: InjectOptions|InjectFlags|undefined): I
   // While TypeScript doesn't accept it without a cast, bitwise OR with false-y values in
   // JavaScript is a no-op. We can use that for a very codesize-efficient conversion from
   // `InjectOptions` to `InjectFlags`.
-  return (InternalInjectFlags.Default |  // comment to force a line break in the formatter
-          ((flags.optional && InternalInjectFlags.Optional) as number) |
-          ((flags.host && InternalInjectFlags.Host) as number) |
-          ((flags.self && InternalInjectFlags.Self) as number) |
-          ((flags.skipSelf && InternalInjectFlags.SkipSelf) as number)) as InjectFlags;
+  return (InternalInjectFlags.Default | // comment to force a line break in the formatter
+    ((flags.optional && InternalInjectFlags.Optional) as number) |
+    ((flags.host && InternalInjectFlags.Host) as number) |
+    ((flags.self && InternalInjectFlags.Self) as number) |
+    ((flags.skipSelf && InternalInjectFlags.SkipSelf) as number)) as InjectFlags;
 }
 
-export function injectArgs(types: (ProviderToken<any>|any[])[]): any[] {
+export function injectArgs(types: (ProviderToken<any> | any[])[]): any[] {
   const args: any[] = [];
   for (let i = 0; i < types.length; i++) {
     const arg = resolveForwardRef(types[i]);
     if (Array.isArray(arg)) {
       if (arg.length === 0) {
         throw new RuntimeError(
-            RuntimeErrorCode.INVALID_DIFFER_INPUT,
-            ngDevMode && 'Arguments array must have arguments.');
+          RuntimeErrorCode.INVALID_DIFFER_INPUT,
+          ngDevMode && 'Arguments array must have arguments.',
+        );
       }
-      let type: Type<any>|undefined = undefined;
+      let type: Type<any> | undefined = undefined;
       let flags: InjectFlags = InjectFlags.Default;
 
       for (let j = 0; j < arg.length; j++) {
@@ -320,7 +340,7 @@ export function injectArgs(types: (ProviderToken<any>|any[])[]): any[] {
  * @param decorator Provided DI decorator.
  * @param flag InjectFlag that should be applied.
  */
-export function attachInjectFlag(decorator: any, flag: InternalInjectFlags|DecoratorFlags): any {
+export function attachInjectFlag(decorator: any, flag: InternalInjectFlags | DecoratorFlags): any {
   decorator[DI_DECORATOR_FLAG] = flag;
   decorator.prototype[DI_DECORATOR_FLAG] = flag;
   return decorator;
@@ -331,12 +351,16 @@ export function attachInjectFlag(decorator: any, flag: InternalInjectFlags|Decor
  *
  * @param token Token that may contain monkey-patched DI flags property.
  */
-export function getInjectFlag(token: any): number|undefined {
+export function getInjectFlag(token: any): number | undefined {
   return token[DI_DECORATOR_FLAG];
 }
 
 export function catchInjectorError(
-    e: any, token: any, injectorErrorName: string, source: string|null): never {
+  e: any,
+  token: any,
+  injectorErrorName: string,
+  source: string | null,
+): never {
   const tokenPath: any[] = e[NG_TEMP_TOKEN_PATH];
   if (token[SOURCE]) {
     tokenPath.unshift(token[SOURCE]);
@@ -348,7 +372,11 @@ export function catchInjectorError(
 }
 
 export function formatError(
-    text: string, obj: any, injectorErrorName: string, source: string|null = null): string {
+  text: string,
+  obj: any,
+  injectorErrorName: string,
+  source: string | null = null,
+): string {
   text = text && text.charAt(0) === '\n' && text.charAt(1) == NO_NEW_LINE ? text.slice(2) : text;
   let context = stringify(obj);
   if (Array.isArray(obj)) {
@@ -359,11 +387,14 @@ export function formatError(
       if (obj.hasOwnProperty(key)) {
         let value = obj[key];
         parts.push(
-            key + ':' + (typeof value === 'string' ? JSON.stringify(value) : stringify(value)));
+          key + ':' + (typeof value === 'string' ? JSON.stringify(value) : stringify(value)),
+        );
       }
     }
     context = `{${parts.join(', ')}}`;
   }
-  return `${injectorErrorName}${source ? '(' + source + ')' : ''}[${context}]: ${
-      text.replace(NEW_LINE, '\n  ')}`;
+  return `${injectorErrorName}${source ? '(' + source + ')' : ''}[${context}]: ${text.replace(
+    NEW_LINE,
+    '\n  ',
+  )}`;
 }
diff --git a/packages/core/src/di/injector_marker.ts b/packages/core/src/di/injector_marker.ts
index ca8ef57a29742..216c962d30b58 100644
--- a/packages/core/src/di/injector_marker.ts
+++ b/packages/core/src/di/injector_marker.ts
@@ -20,5 +20,5 @@ export const enum InjectorMarkers {
   /**
    * Marks that the current type is `Injector`
    */
-  Injector = -1
+  Injector = -1,
 }
diff --git a/packages/core/src/di/injector_token.ts b/packages/core/src/di/injector_token.ts
index b6f5f7a7040f8..30fd8634083ba 100644
--- a/packages/core/src/di/injector_token.ts
+++ b/packages/core/src/di/injector_token.ts
@@ -10,8 +10,6 @@ import {InjectionToken} from './injection_token';
 import type {Injector} from './injector';
 import {InjectorMarkers} from './injector_marker';
 
-
-
 /**
  * An InjectionToken that gets the current `Injector` for `createInjector()`-style injectors.
  *
@@ -21,8 +19,8 @@ import {InjectorMarkers} from './injector_marker';
  * @publicApi
  */
 export const INJECTOR = new InjectionToken<Injector>(
-    ngDevMode ? 'INJECTOR' : '',
-    // Disable tslint because this is const enum which gets inlined not top level prop access.
-    // tslint:disable-next-line: no-toplevel-property-access
-    InjectorMarkers.Injector as any,  // Special value used by Ivy to identify `Injector`.
+  ngDevMode ? 'INJECTOR' : '',
+  // Disable tslint because this is const enum which gets inlined not top level prop access.
+  // tslint:disable-next-line: no-toplevel-property-access
+  InjectorMarkers.Injector as any, // Special value used by Ivy to identify `Injector`.
 );
diff --git a/packages/core/src/di/interface/defs.ts b/packages/core/src/di/interface/defs.ts
index 37224294a8aef..e9df3443d13f1 100644
--- a/packages/core/src/di/interface/defs.ts
+++ b/packages/core/src/di/interface/defs.ts
@@ -9,9 +9,15 @@
 import {Type} from '../../interface/type';
 import {getClosureSafeProperty} from '../../util/property';
 
-import {ClassProvider, ConstructorProvider, EnvironmentProviders, ExistingProvider, FactoryProvider, StaticClassProvider, ValueProvider} from './provider';
-
-
+import {
+  ClassProvider,
+  ConstructorProvider,
+  EnvironmentProviders,
+  ExistingProvider,
+  FactoryProvider,
+  StaticClassProvider,
+  ValueProvider,
+} from './provider';
 
 /**
  * Information about how a type or `InjectionToken` interfaces with the DI system.
@@ -37,7 +43,7 @@ export interface ɵɵInjectableDeclaration<T> {
    * - `null`, does not belong to any injector. Must be explicitly listed in the injector
    *   `providers`.
    */
-  providedIn: InjectorType<any>|'root'|'platform'|'any'|'environment'|null;
+  providedIn: InjectorType<any> | 'root' | 'platform' | 'any' | 'environment' | null;
 
   /**
    * The token to which this definition belongs.
@@ -54,7 +60,7 @@ export interface ɵɵInjectableDeclaration<T> {
   /**
    * In a case of no explicit injector, a location where the instance of the injectable is stored.
    */
-  value: T|undefined;
+  value: T | undefined;
 }
 
 /**
@@ -72,10 +78,19 @@ export interface ɵɵInjectableDeclaration<T> {
 export interface ɵɵInjectorDef<T> {
   // TODO(alxhub): Narrow down the type here once decorators properly change the return type of the
   // class they are decorating (to add the ɵprov property for example).
-  providers: (Type<any>|ValueProvider|ExistingProvider|FactoryProvider|ConstructorProvider|
-              StaticClassProvider|ClassProvider|EnvironmentProviders|any[])[];
+  providers: (
+    | Type<any>
+    | ValueProvider
+    | ExistingProvider
+    | FactoryProvider
+    | ConstructorProvider
+    | StaticClassProvider
+    | ClassProvider
+    | EnvironmentProviders
+    | any[]
+  )[];
 
-  imports: (InjectorType<any>|InjectorTypeWithProviders<any>)[];
+  imports: (InjectorType<any> | InjectorTypeWithProviders<any>)[];
 }
 
 /**
@@ -118,11 +133,19 @@ export interface InjectorType<T> extends Type<T> {
  */
 export interface InjectorTypeWithProviders<T> {
   ngModule: InjectorType<T>;
-  providers?: (Type<any>|ValueProvider|ExistingProvider|FactoryProvider|ConstructorProvider|
-               StaticClassProvider|ClassProvider|EnvironmentProviders|any[])[];
+  providers?: (
+    | Type<any>
+    | ValueProvider
+    | ExistingProvider
+    | FactoryProvider
+    | ConstructorProvider
+    | StaticClassProvider
+    | ClassProvider
+    | EnvironmentProviders
+    | any[]
+  )[];
 }
 
-
 /**
  * Construct an injectable definition which defines how a token will be constructed by the DI
  * system, and in which injectors (if any) it will be available.
@@ -142,12 +165,13 @@ export interface InjectorTypeWithProviders<T> {
  * @publicApi This instruction has been emitted by ViewEngine for some time and is deployed to npm.
  */
 export function ɵɵdefineInjectable<T>(opts: {
-  token: unknown,
-  providedIn?: Type<any>|'root'|'platform'|'any'|'environment'|null, factory: () => T,
+  token: unknown;
+  providedIn?: Type<any> | 'root' | 'platform' | 'any' | 'environment' | null;
+  factory: () => T;
 }): unknown {
   return {
     token: opts.token,
-    providedIn: opts.providedIn as any || null,
+    providedIn: (opts.providedIn as any) || null,
     factory: opts.factory,
     value: undefined,
   } as ɵɵInjectableDeclaration<T>;
@@ -177,7 +201,7 @@ export const defineInjectable = ɵɵdefineInjectable;
  *
  * @codeGenApi
  */
-export function ɵɵdefineInjector(options: {providers?: any[], imports?: any[]}): unknown {
+export function ɵɵdefineInjector(options: {providers?: any[]; imports?: any[]}): unknown {
   return {providers: options.providers || [], imports: options.imports || []};
 }
 
@@ -187,7 +211,7 @@ export function ɵɵdefineInjector(options: {providers?: any[], imports?: any[]}
  *
  * @param type A type which may have its own (non-inherited) `ɵprov`.
  */
-export function getInjectableDef<T>(type: any): ɵɵInjectableDeclaration<T>|null {
+export function getInjectableDef<T>(type: any): ɵɵInjectableDeclaration<T> | null {
   return getOwnDefinition(type, NG_PROV_DEF) || getOwnDefinition(type, NG_INJECTABLE_DEF);
 }
 
@@ -199,7 +223,7 @@ export function isInjectable(type: any): boolean {
  * Return definition only if it is defined directly on `type` and is not inherited from a base
  * class of `type`.
  */
-function getOwnDefinition<T>(type: any, field: string): ɵɵInjectableDeclaration<T>|null {
+function getOwnDefinition<T>(type: any, field: string): ɵɵInjectableDeclaration<T> | null {
   return type.hasOwnProperty(field) ? type[field] : null;
 }
 
@@ -211,16 +235,15 @@ function getOwnDefinition<T>(type: any, field: string): ɵɵInjectableDeclaratio
  * @deprecated Will be removed in a future version of Angular, where an error will occur in the
  *     scenario if we find the `ɵprov` on an ancestor only.
  */
-export function getInheritedInjectableDef<T>(type: any): ɵɵInjectableDeclaration<T>|null {
+export function getInheritedInjectableDef<T>(type: any): ɵɵInjectableDeclaration<T> | null {
   const def = type && (type[NG_PROV_DEF] || type[NG_INJECTABLE_DEF]);
 
   if (def) {
     ngDevMode &&
-        console.warn(
-            `DEPRECATED: DI is instantiating a token "${
-                type.name}" that inherits its @Injectable decorator but does not provide one itself.\n` +
-            `This will become an error in a future version of Angular. Please add @Injectable() to the "${
-                type.name}" class.`);
+      console.warn(
+        `DEPRECATED: DI is instantiating a token "${type.name}" that inherits its @Injectable decorator but does not provide one itself.\n` +
+          `This will become an error in a future version of Angular. Please add @Injectable() to the "${type.name}" class.`,
+      );
     return def;
   } else {
     return null;
@@ -232,10 +255,10 @@ export function getInheritedInjectableDef<T>(type: any): ɵɵInjectableDeclarati
  *
  * @param type type which may have an injector def (`ɵinj`)
  */
-export function getInjectorDef<T>(type: any): ɵɵInjectorDef<T>|null {
-  return type && (type.hasOwnProperty(NG_INJ_DEF) || type.hasOwnProperty(NG_INJECTOR_DEF)) ?
-      (type as any)[NG_INJ_DEF] :
-      null;
+export function getInjectorDef<T>(type: any): ɵɵInjectorDef<T> | null {
+  return type && (type.hasOwnProperty(NG_INJ_DEF) || type.hasOwnProperty(NG_INJECTOR_DEF))
+    ? (type as any)[NG_INJ_DEF]
+    : null;
 }
 
 export const NG_PROV_DEF = getClosureSafeProperty({ɵprov: getClosureSafeProperty});
diff --git a/packages/core/src/di/interface/injector.ts b/packages/core/src/di/interface/injector.ts
index 240f178e804d3..b4e8f36a7cab4 100644
--- a/packages/core/src/di/interface/injector.ts
+++ b/packages/core/src/di/interface/injector.ts
@@ -6,14 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 /**
  * Special flag indicating that a decorator is of type `Inject`. It's used to make `Inject`
  * decorator tree-shakable (so we don't have to rely on the `instanceof` checks).
  * Note: this flag is not included into the `InjectFlags` since it's an internal-only API.
  */
 export const enum DecoratorFlags {
-  Inject = -1
+  Inject = -1,
 }
 
 /**
diff --git a/packages/core/src/di/interface/provider.ts b/packages/core/src/di/interface/provider.ts
index d4a8df25b7d52..6b11e5107a33c 100644
--- a/packages/core/src/di/interface/provider.ts
+++ b/packages/core/src/di/interface/provider.ts
@@ -256,8 +256,12 @@ export interface FactoryProvider extends FactorySansProvider {
  * @publicApi
  */
 export type StaticProvider =
-    ValueProvider|ExistingProvider|StaticClassProvider|ConstructorProvider|FactoryProvider|any[];
-
+  | ValueProvider
+  | ExistingProvider
+  | StaticClassProvider
+  | ConstructorProvider
+  | FactoryProvider
+  | any[];
 
 /**
  * Configures the `Injector` to return an instance of `Type` when `Type' is used as the token.
@@ -329,8 +333,14 @@ export interface ClassProvider extends ClassSansProvider {
  *
  * @publicApi
  */
-export type Provider = TypeProvider|ValueProvider|ClassProvider|ConstructorProvider|
-    ExistingProvider|FactoryProvider|any[];
+export type Provider =
+  | TypeProvider
+  | ValueProvider
+  | ClassProvider
+  | ConstructorProvider
+  | ExistingProvider
+  | FactoryProvider
+  | any[];
 
 /**
  * Encapsulated `Provider`s that are only accepted during creation of an `EnvironmentInjector` (e.g.
@@ -352,7 +362,7 @@ export type EnvironmentProviders = {
 };
 
 export interface InternalEnvironmentProviders extends EnvironmentProviders {
-  ɵproviders: (Provider|EnvironmentProviders)[];
+  ɵproviders: (Provider | EnvironmentProviders)[];
 
   /**
    * If present, indicates that the `EnvironmentProviders` were derived from NgModule providers.
@@ -363,8 +373,8 @@ export interface InternalEnvironmentProviders extends EnvironmentProviders {
 }
 
 export function isEnvironmentProviders(
-    value: Provider|EnvironmentProviders|
-    InternalEnvironmentProviders): value is InternalEnvironmentProviders {
+  value: Provider | EnvironmentProviders | InternalEnvironmentProviders,
+): value is InternalEnvironmentProviders {
   return value && !!(value as InternalEnvironmentProviders).ɵproviders;
 }
 
@@ -374,7 +384,6 @@ export function isEnvironmentProviders(
  */
 export type ProcessProvidersFunction = (providers: Provider[]) => Provider[];
 
-
 /**
  * A wrapper around an NgModule that associates it with providers
  * Usage without a generic type is deprecated.
@@ -383,7 +392,7 @@ export type ProcessProvidersFunction = (providers: Provider[]) => Provider[];
  */
 export interface ModuleWithProviders<T> {
   ngModule: Type<T>;
-  providers?: Array<Provider|EnvironmentProviders>;
+  providers?: Array<Provider | EnvironmentProviders>;
 }
 
 /**
diff --git a/packages/core/src/di/internal_tokens.ts b/packages/core/src/di/internal_tokens.ts
index f7a579a9a869d..f04474377fcf9 100644
--- a/packages/core/src/di/internal_tokens.ts
+++ b/packages/core/src/di/internal_tokens.ts
@@ -10,5 +10,6 @@ import {Type} from '../interface/type';
 
 import {InjectionToken} from './injection_token';
 
-export const INJECTOR_DEF_TYPES =
-    new InjectionToken<ReadonlyArray<Type<unknown>>>(ngDevMode ? 'INJECTOR_DEF_TYPES' : '');
+export const INJECTOR_DEF_TYPES = new InjectionToken<ReadonlyArray<Type<unknown>>>(
+  ngDevMode ? 'INJECTOR_DEF_TYPES' : '',
+);
diff --git a/packages/core/src/di/jit/injectable.ts b/packages/core/src/di/jit/injectable.ts
index 43cab19ab57ff..c02dbab8ea26c 100644
--- a/packages/core/src/di/jit/injectable.ts
+++ b/packages/core/src/di/jit/injectable.ts
@@ -6,20 +6,28 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {getCompilerFacade, JitCompilerUsage, R3InjectableMetadataFacade} from '../../compiler/compiler_facade';
+import {
+  getCompilerFacade,
+  JitCompilerUsage,
+  R3InjectableMetadataFacade,
+} from '../../compiler/compiler_facade';
 import {Type} from '../../interface/type';
 import {NG_FACTORY_DEF} from '../../render3/fields';
 import {getClosureSafeProperty} from '../../util/property';
 import {resolveForwardRef} from '../forward_ref';
 import {Injectable} from '../injectable';
 import {NG_PROV_DEF} from '../interface/defs';
-import {ClassSansProvider, ExistingSansProvider, FactorySansProvider, ValueProvider, ValueSansProvider} from '../interface/provider';
+import {
+  ClassSansProvider,
+  ExistingSansProvider,
+  FactorySansProvider,
+  ValueProvider,
+  ValueSansProvider,
+} from '../interface/provider';
 
 import {angularCoreDiEnv} from './environment';
 import {convertDependencies, reflectDependencies} from './util';
 
-
-
 /**
  * Compile an Angular injectable according to its `Injectable` metadata, and patch the resulting
  * injectable def (`ɵprov`) onto the injectable type.
@@ -33,10 +41,16 @@ export function compileInjectable(type: Type<any>, meta?: Injectable): void {
     Object.defineProperty(type, NG_PROV_DEF, {
       get: () => {
         if (ngInjectableDef === null) {
-          const compiler =
-              getCompilerFacade({usage: JitCompilerUsage.Decorator, kind: 'injectable', type});
+          const compiler = getCompilerFacade({
+            usage: JitCompilerUsage.Decorator,
+            kind: 'injectable',
+            type,
+          });
           ngInjectableDef = compiler.compileInjectable(
-              angularCoreDiEnv, `ng:///${type.name}/ɵprov.js`, getInjectableMetadata(type, meta));
+            angularCoreDiEnv,
+            `ng:///${type.name}/ɵprov.js`,
+            getInjectableMetadata(type, meta),
+          );
         }
         return ngInjectableDef;
       },
@@ -48,42 +62,47 @@ export function compileInjectable(type: Type<any>, meta?: Injectable): void {
     Object.defineProperty(type, NG_FACTORY_DEF, {
       get: () => {
         if (ngFactoryDef === null) {
-          const compiler =
-              getCompilerFacade({usage: JitCompilerUsage.Decorator, kind: 'injectable', type});
+          const compiler = getCompilerFacade({
+            usage: JitCompilerUsage.Decorator,
+            kind: 'injectable',
+            type,
+          });
           ngFactoryDef = compiler.compileFactory(angularCoreDiEnv, `ng:///${type.name}/ɵfac.js`, {
             name: type.name,
             type,
-            typeArgumentCount: 0,  // In JIT mode types are not available nor used.
+            typeArgumentCount: 0, // In JIT mode types are not available nor used.
             deps: reflectDependencies(type),
-            target: compiler.FactoryTarget.Injectable
+            target: compiler.FactoryTarget.Injectable,
           });
         }
         return ngFactoryDef;
       },
       // Leave this configurable so that the factories from directives or pipes can take precedence.
-      configurable: true
+      configurable: true,
     });
   }
 }
 
-type UseClassProvider = Injectable&ClassSansProvider&{deps?: any[]};
+type UseClassProvider = Injectable & ClassSansProvider & {deps?: any[]};
 
-const USE_VALUE =
-    getClosureSafeProperty<ValueProvider>({provide: String, useValue: getClosureSafeProperty});
+const USE_VALUE = getClosureSafeProperty<ValueProvider>({
+  provide: String,
+  useValue: getClosureSafeProperty,
+});
 
 function isUseClassProvider(meta: Injectable): meta is UseClassProvider {
   return (meta as UseClassProvider).useClass !== undefined;
 }
 
-function isUseValueProvider(meta: Injectable): meta is Injectable&ValueSansProvider {
+function isUseValueProvider(meta: Injectable): meta is Injectable & ValueSansProvider {
   return USE_VALUE in meta;
 }
 
-function isUseFactoryProvider(meta: Injectable): meta is Injectable&FactorySansProvider {
+function isUseFactoryProvider(meta: Injectable): meta is Injectable & FactorySansProvider {
   return (meta as FactorySansProvider).useFactory !== undefined;
 }
 
-function isUseExistingProvider(meta: Injectable): meta is Injectable&ExistingSansProvider {
+function isUseExistingProvider(meta: Injectable): meta is Injectable & ExistingSansProvider {
   return (meta as ExistingSansProvider).useExisting !== undefined;
 }
 
diff --git a/packages/core/src/di/jit/util.ts b/packages/core/src/di/jit/util.ts
index 5013e8e10a86d..cbbbe7c03646c 100644
--- a/packages/core/src/di/jit/util.ts
+++ b/packages/core/src/di/jit/util.ts
@@ -13,7 +13,7 @@ import {ReflectionCapabilities} from '../../reflection/reflection_capabilities';
 import {Host, Inject, Optional, Self, SkipSelf} from '../metadata';
 import {Attribute} from '../metadata_attr';
 
-let _reflect: ReflectionCapabilities|null = null;
+let _reflect: ReflectionCapabilities | null = null;
 
 export function getReflect(): ReflectionCapabilities {
   return (_reflect = _reflect || new ReflectionCapabilities());
@@ -24,10 +24,10 @@ export function reflectDependencies(type: Type<any>): R3DependencyMetadataFacade
 }
 
 export function convertDependencies(deps: any[]): R3DependencyMetadataFacade[] {
-  return deps.map(dep => reflectDependency(dep));
+  return deps.map((dep) => reflectDependency(dep));
 }
 
-function reflectDependency(dep: any|any[]): R3DependencyMetadataFacade {
+function reflectDependency(dep: any | any[]): R3DependencyMetadataFacade {
   const meta: R3DependencyMetadataFacade = {
     token: null,
     attribute: null,
@@ -60,8 +60,9 @@ function reflectDependency(dep: any|any[]): R3DependencyMetadataFacade {
       } else if (param instanceof Attribute) {
         if (param.attributeName === undefined) {
           throw new RuntimeError(
-              RuntimeErrorCode.INVALID_INJECTION_TOKEN,
-              ngDevMode && `Attribute name must be defined.`);
+            RuntimeErrorCode.INVALID_INJECTION_TOKEN,
+            ngDevMode && `Attribute name must be defined.`,
+          );
         }
         meta.attribute = param.attributeName;
       } else {
diff --git a/packages/core/src/di/metadata.ts b/packages/core/src/di/metadata.ts
index b8ef0f6a37909..e4c6f1a15c16c 100644
--- a/packages/core/src/di/metadata.ts
+++ b/packages/core/src/di/metadata.ts
@@ -11,7 +11,6 @@ import {makeParamDecorator} from '../util/decorators';
 import {attachInjectFlag} from './injector_compatibility';
 import {DecoratorFlags, InternalInjectFlags} from './interface/injector';
 
-
 /**
  * Type of the Inject decorator / constructor function.
  *
@@ -36,7 +35,7 @@ export interface InjectDecorator {
    *
    */
   (token: any): any;
-  new(token: any): Inject;
+  new (token: any): Inject;
 }
 
 /**
@@ -58,9 +57,11 @@ export interface Inject {
  * @publicApi
  */
 export const Inject: InjectDecorator = attachInjectFlag(
-    // Disable tslint because `DecoratorFlags` is a const enum which gets inlined.
-    // tslint:disable-next-line: no-toplevel-property-access
-    makeParamDecorator('Inject', (token: any) => ({token})), DecoratorFlags.Inject);
+  // Disable tslint because `DecoratorFlags` is a const enum which gets inlined.
+  makeParamDecorator('Inject', (token: any) => ({token})),
+  // tslint:disable-next-line: no-toplevel-property-access
+  DecoratorFlags.Inject,
+);
 
 /**
  * Type of the Optional decorator / constructor function.
@@ -86,7 +87,7 @@ export interface OptionalDecorator {
    * @see [Dependency Injection Guide](guide/di/dependency-injection.
    */
   (): any;
-  new(): Optional;
+  new (): Optional;
 }
 
 /**
@@ -103,9 +104,9 @@ export interface Optional {}
  * @publicApi
  */
 export const Optional: OptionalDecorator =
-    // Disable tslint because `InternalInjectFlags` is a const enum which gets inlined.
-    // tslint:disable-next-line: no-toplevel-property-access
-    attachInjectFlag(makeParamDecorator('Optional'), InternalInjectFlags.Optional);
+  // Disable tslint because `InternalInjectFlags` is a const enum which gets inlined.
+  // tslint:disable-next-line: no-toplevel-property-access
+  attachInjectFlag(makeParamDecorator('Optional'), InternalInjectFlags.Optional);
 
 /**
  * Type of the Self decorator / constructor function.
@@ -134,7 +135,7 @@ export interface SelfDecorator {
    *
    */
   (): any;
-  new(): Self;
+  new (): Self;
 }
 
 /**
@@ -151,10 +152,9 @@ export interface Self {}
  * @publicApi
  */
 export const Self: SelfDecorator =
-    // Disable tslint because `InternalInjectFlags` is a const enum which gets inlined.
-    // tslint:disable-next-line: no-toplevel-property-access
-    attachInjectFlag(makeParamDecorator('Self'), InternalInjectFlags.Self);
-
+  // Disable tslint because `InternalInjectFlags` is a const enum which gets inlined.
+  // tslint:disable-next-line: no-toplevel-property-access
+  attachInjectFlag(makeParamDecorator('Self'), InternalInjectFlags.Self);
 
 /**
  * Type of the `SkipSelf` decorator / constructor function.
@@ -182,7 +182,7 @@ export interface SkipSelfDecorator {
    *
    */
   (): any;
-  new(): SkipSelf;
+  new (): SkipSelf;
 }
 
 /**
@@ -199,9 +199,9 @@ export interface SkipSelf {}
  * @publicApi
  */
 export const SkipSelf: SkipSelfDecorator =
-    // Disable tslint because `InternalInjectFlags` is a const enum which gets inlined.
-    // tslint:disable-next-line: no-toplevel-property-access
-    attachInjectFlag(makeParamDecorator('SkipSelf'), InternalInjectFlags.SkipSelf);
+  // Disable tslint because `InternalInjectFlags` is a const enum which gets inlined.
+  // tslint:disable-next-line: no-toplevel-property-access
+  attachInjectFlag(makeParamDecorator('SkipSelf'), InternalInjectFlags.SkipSelf);
 
 /**
  * Type of the `Host` decorator / constructor function.
@@ -225,7 +225,7 @@ export interface HostDecorator {
    * Guide"](guide/di/di-in-action#optional).
    */
   (): any;
-  new(): Host;
+  new (): Host;
 }
 
 /**
@@ -242,6 +242,6 @@ export interface Host {}
  * @publicApi
  */
 export const Host: HostDecorator =
-    // Disable tslint because `InternalInjectFlags` is a const enum which gets inlined.
-    // tslint:disable-next-line: no-toplevel-property-access
-    attachInjectFlag(makeParamDecorator('Host'), InternalInjectFlags.Host);
+  // Disable tslint because `InternalInjectFlags` is a const enum which gets inlined.
+  // tslint:disable-next-line: no-toplevel-property-access
+  attachInjectFlag(makeParamDecorator('Host'), InternalInjectFlags.Host);
diff --git a/packages/core/src/di/metadata_attr.ts b/packages/core/src/di/metadata_attr.ts
index dc7646db032db..0df826d3de900 100644
--- a/packages/core/src/di/metadata_attr.ts
+++ b/packages/core/src/di/metadata_attr.ts
@@ -9,7 +9,6 @@
 import {ɵɵinjectAttribute} from '../render3/instructions/di_attr';
 import {makeParamDecorator} from '../util/decorators';
 
-
 /**
  * Type of the Attribute decorator / constructor function.
  *
@@ -38,7 +37,7 @@ export interface AttributeDecorator {
    *
    */
   (name: string): any;
-  new(name: string): Attribute;
+  new (name: string): Attribute;
 }
 
 /**
@@ -60,6 +59,9 @@ export interface Attribute {
  * @publicApi
  */
 export const Attribute: AttributeDecorator = makeParamDecorator(
-    'Attribute',
-    (attributeName?: string) =>
-        ({attributeName, __NG_ELEMENT_ID__: () => ɵɵinjectAttribute(attributeName!)}));
+  'Attribute',
+  (attributeName?: string) => ({
+    attributeName,
+    __NG_ELEMENT_ID__: () => ɵɵinjectAttribute(attributeName!),
+  }),
+);
diff --git a/packages/core/src/di/provider_collection.ts b/packages/core/src/di/provider_collection.ts
index 022844f54e2ee..e9fd8d319b4d4 100644
--- a/packages/core/src/di/provider_collection.ts
+++ b/packages/core/src/di/provider_collection.ts
@@ -21,15 +21,30 @@ import {resolveForwardRef} from './forward_ref';
 import {ENVIRONMENT_INITIALIZER} from './initializer_token';
 import {ɵɵinject as inject} from './injector_compatibility';
 import {getInjectorDef, InjectorType, InjectorTypeWithProviders} from './interface/defs';
-import {ClassProvider, ConstructorProvider, EnvironmentProviders, ExistingProvider, FactoryProvider, ImportedNgModuleProviders, InternalEnvironmentProviders, isEnvironmentProviders, ModuleWithProviders, Provider, StaticClassProvider, TypeProvider, ValueProvider} from './interface/provider';
+import {
+  ClassProvider,
+  ConstructorProvider,
+  EnvironmentProviders,
+  ExistingProvider,
+  FactoryProvider,
+  ImportedNgModuleProviders,
+  InternalEnvironmentProviders,
+  isEnvironmentProviders,
+  ModuleWithProviders,
+  Provider,
+  StaticClassProvider,
+  TypeProvider,
+  ValueProvider,
+} from './interface/provider';
 import {INJECTOR_DEF_TYPES} from './internal_tokens';
 
 /**
  * Wrap an array of `Provider`s into `EnvironmentProviders`, preventing them from being accidentally
  * referenced in `@Component` in a component injector.
  */
-export function makeEnvironmentProviders(providers: (Provider|EnvironmentProviders)[]):
-    EnvironmentProviders {
+export function makeEnvironmentProviders(
+  providers: (Provider | EnvironmentProviders)[],
+): EnvironmentProviders {
   return {
     ɵproviders: providers,
   } as unknown as EnvironmentProviders;
@@ -41,10 +56,14 @@ export function makeEnvironmentProviders(providers: (Provider|EnvironmentProvide
  * @publicApi
  */
 export type ImportProvidersSource =
-    Type<unknown>|ModuleWithProviders<unknown>|Array<ImportProvidersSource>;
+  | Type<unknown>
+  | ModuleWithProviders<unknown>
+  | Array<ImportProvidersSource>;
 
-type WalkProviderTreeVisitor =
-    (provider: SingleProvider, container: Type<unknown>|InjectorType<unknown>) => void;
+type WalkProviderTreeVisitor = (
+  provider: SingleProvider,
+  container: Type<unknown> | InjectorType<unknown>,
+) => void;
 
 /**
  * Collects providers from all NgModules and standalone components, including transitively imported
@@ -94,28 +113,32 @@ export function importProvidersFrom(...sources: ImportProvidersSource[]): Enviro
 }
 
 export function internalImportProvidersFrom(
-    checkForStandaloneCmp: boolean, ...sources: ImportProvidersSource[]): Provider[] {
+  checkForStandaloneCmp: boolean,
+  ...sources: ImportProvidersSource[]
+): Provider[] {
   const providersOut: SingleProvider[] = [];
-  const dedup = new Set<Type<unknown>>();  // already seen types
-  let injectorTypesWithProviders: InjectorTypeWithProviders<unknown>[]|undefined;
+  const dedup = new Set<Type<unknown>>(); // already seen types
+  let injectorTypesWithProviders: InjectorTypeWithProviders<unknown>[] | undefined;
 
   const collectProviders: WalkProviderTreeVisitor = (provider) => {
     providersOut.push(provider);
   };
 
-  deepForEach(sources, source => {
+  deepForEach(sources, (source) => {
     if ((typeof ngDevMode === 'undefined' || ngDevMode) && checkForStandaloneCmp) {
       const cmpDef = getComponentDef(source);
       if (cmpDef?.standalone) {
         throw new RuntimeError(
-            RuntimeErrorCode.IMPORT_PROVIDERS_FROM_STANDALONE,
-            `Importing providers supports NgModule or ModuleWithProviders but got a standalone component "${
-                stringifyForError(source)}"`);
+          RuntimeErrorCode.IMPORT_PROVIDERS_FROM_STANDALONE,
+          `Importing providers supports NgModule or ModuleWithProviders but got a standalone component "${stringifyForError(
+            source,
+          )}"`,
+        );
       }
     }
 
     // Narrow `source` to access the internal type analogue for `ModuleWithProviders`.
-    const internalSource = source as Type<unknown>| InjectorTypeWithProviders<unknown>;
+    const internalSource = source as Type<unknown> | InjectorTypeWithProviders<unknown>;
     if (walkProviderTree(internalSource, collectProviders, [], dedup)) {
       injectorTypesWithProviders ||= [];
       injectorTypesWithProviders.push(internalSource);
@@ -134,22 +157,32 @@ export function internalImportProvidersFrom(
  * array.
  */
 function processInjectorTypesWithProviders(
-    typesWithProviders: InjectorTypeWithProviders<unknown>[],
-    visitor: WalkProviderTreeVisitor): void {
+  typesWithProviders: InjectorTypeWithProviders<unknown>[],
+  visitor: WalkProviderTreeVisitor,
+): void {
   for (let i = 0; i < typesWithProviders.length; i++) {
     const {ngModule, providers} = typesWithProviders[i];
-    deepForEachProvider(providers! as Array<Provider|InternalEnvironmentProviders>, provider => {
-      ngDevMode && validateProvider(provider, providers || EMPTY_ARRAY, ngModule);
-      visitor(provider, ngModule);
-    });
+    deepForEachProvider(
+      providers! as Array<Provider | InternalEnvironmentProviders>,
+      (provider) => {
+        ngDevMode && validateProvider(provider, providers || EMPTY_ARRAY, ngModule);
+        visitor(provider, ngModule);
+      },
+    );
   }
 }
 
 /**
  * Internal type for a single provider in a deep provider array.
  */
-export type SingleProvider = TypeProvider|ValueProvider|ClassProvider|ConstructorProvider|
-    ExistingProvider|FactoryProvider|StaticClassProvider;
+export type SingleProvider =
+  | TypeProvider
+  | ValueProvider
+  | ClassProvider
+  | ConstructorProvider
+  | ExistingProvider
+  | FactoryProvider
+  | StaticClassProvider;
 
 /**
  * The logic visits an `InjectorType`, an `InjectorTypeWithProviders`, or a standalone
@@ -161,15 +194,17 @@ export type SingleProvider = TypeProvider|ValueProvider|ClassProvider|Constructo
  * an injector definition are processed. (following View Engine semantics: see FW-1349)
  */
 export function walkProviderTree(
-    container: Type<unknown>|InjectorTypeWithProviders<unknown>, visitor: WalkProviderTreeVisitor,
-    parents: Type<unknown>[],
-    dedup: Set<Type<unknown>>): container is InjectorTypeWithProviders<unknown> {
+  container: Type<unknown> | InjectorTypeWithProviders<unknown>,
+  visitor: WalkProviderTreeVisitor,
+  parents: Type<unknown>[],
+  dedup: Set<Type<unknown>>,
+): container is InjectorTypeWithProviders<unknown> {
   container = resolveForwardRef(container);
   if (!container) return false;
 
   // The actual type which had the definition. Usually `container`, but may be an unwrapped type
   // from `InjectorTypeWithProviders`.
-  let defType: Type<unknown>|null = null;
+  let defType: Type<unknown> | null = null;
 
   let injDef = getInjectorDef(container);
   const cmpDef = !injDef && getComponentDef(container);
@@ -179,8 +214,8 @@ export function walkProviderTree(
     //  * A standalone directive or pipe that got pulled in from a standalone component's
     //    dependencies.
     // Try to unwrap it as an `InjectorTypeWithProviders` first.
-    const ngModule: Type<unknown>|undefined =
-        (container as InjectorTypeWithProviders<any>).ngModule as Type<unknown>| undefined;
+    const ngModule: Type<unknown> | undefined = (container as InjectorTypeWithProviders<any>)
+      .ngModule as Type<unknown> | undefined;
     injDef = getInjectorDef(ngModule);
     if (injDef) {
       defType = ngModule!;
@@ -213,7 +248,7 @@ export function walkProviderTree(
 
     if (cmpDef.dependencies) {
       const deps =
-          typeof cmpDef.dependencies === 'function' ? cmpDef.dependencies() : cmpDef.dependencies;
+        typeof cmpDef.dependencies === 'function' ? cmpDef.dependencies() : cmpDef.dependencies;
       for (const dep of deps) {
         walkProviderTree(dep, visitor, parents, dedup);
       }
@@ -227,9 +262,9 @@ export function walkProviderTree(
       // Add it to the set of dedups. This way we can detect multiple imports of the same module
       dedup.add(defType);
 
-      let importTypesWithProviders: (InjectorTypeWithProviders<any>[])|undefined;
+      let importTypesWithProviders: InjectorTypeWithProviders<any>[] | undefined;
       try {
-        deepForEach(injDef.imports, imported => {
+        deepForEach(injDef.imports, (imported) => {
           if (walkProviderTree(imported, visitor, parents, dedup)) {
             importTypesWithProviders ||= [];
             // If the processed import is an injector type with providers, we store it in the
@@ -267,15 +302,16 @@ export function walkProviderTree(
 
       // Provider to eagerly instantiate `defType` via `INJECTOR_INITIALIZER`.
       visitor(
-          {provide: ENVIRONMENT_INITIALIZER, useValue: () => inject(defType!), multi: true},
-          defType);
+        {provide: ENVIRONMENT_INITIALIZER, useValue: () => inject(defType!), multi: true},
+        defType,
+      );
     }
 
     // Next, include providers listed on the definition itself.
-    const defProviders = injDef.providers as Array<SingleProvider|InternalEnvironmentProviders>;
+    const defProviders = injDef.providers as Array<SingleProvider | InternalEnvironmentProviders>;
     if (defProviders != null && !isDuplicate) {
       const injectorType = container as InjectorType<any>;
-      deepForEachProvider(defProviders, provider => {
+      deepForEachProvider(defProviders, (provider) => {
         ngDevMode && validateProvider(provider as SingleProvider, defProviders, injectorType);
         visitor(provider, injectorType);
       });
@@ -286,29 +322,37 @@ export function walkProviderTree(
   }
 
   return (
-      defType !== container &&
-      (container as InjectorTypeWithProviders<any>).providers !== undefined);
+    defType !== container && (container as InjectorTypeWithProviders<any>).providers !== undefined
+  );
 }
 
 function validateProvider(
-    provider: SingleProvider, providers: Array<SingleProvider|InternalEnvironmentProviders>,
-    containerType: Type<unknown>): void {
-  if (isTypeProvider(provider) || isValueProvider(provider) || isFactoryProvider(provider) ||
-      isExistingProvider(provider)) {
+  provider: SingleProvider,
+  providers: Array<SingleProvider | InternalEnvironmentProviders>,
+  containerType: Type<unknown>,
+): void {
+  if (
+    isTypeProvider(provider) ||
+    isValueProvider(provider) ||
+    isFactoryProvider(provider) ||
+    isExistingProvider(provider)
+  ) {
     return;
   }
 
   // Here we expect the provider to be a `useClass` provider (by elimination).
   const classRef = resolveForwardRef(
-      provider && ((provider as StaticClassProvider | ClassProvider).useClass || provider.provide));
+    provider && ((provider as StaticClassProvider | ClassProvider).useClass || provider.provide),
+  );
   if (!classRef) {
     throwInvalidProviderError(containerType, providers, provider);
   }
 }
 
 function deepForEachProvider(
-    providers: Array<Provider|InternalEnvironmentProviders>,
-    fn: (provider: SingleProvider) => void): void {
+  providers: Array<Provider | InternalEnvironmentProviders>,
+  fn: (provider: SingleProvider) => void,
+): void {
   for (let provider of providers) {
     if (isEnvironmentProviders(provider)) {
       provider = provider.ɵproviders;
@@ -321,8 +365,10 @@ function deepForEachProvider(
   }
 }
 
-export const USE_VALUE =
-    getClosureSafeProperty<ValueProvider>({provide: String, useValue: getClosureSafeProperty});
+export const USE_VALUE = getClosureSafeProperty<ValueProvider>({
+  provide: String,
+  useValue: getClosureSafeProperty,
+});
 
 export function isValueProvider(value: SingleProvider): value is ValueProvider {
   return value !== null && typeof value == 'object' && USE_VALUE in value;
diff --git a/packages/core/src/di/provider_token.ts b/packages/core/src/di/provider_token.ts
index 27d07dde63a94..8ef32a6475b53 100644
--- a/packages/core/src/di/provider_token.ts
+++ b/packages/core/src/di/provider_token.ts
@@ -16,4 +16,4 @@ import {InjectionToken} from './injection_token';
  *
  * @publicApi
  */
-export type ProviderToken<T> = Type<T>|AbstractType<T>|InjectionToken<T>;
+export type ProviderToken<T> = Type<T> | AbstractType<T> | InjectionToken<T>;
diff --git a/packages/core/src/di/r3_injector.ts b/packages/core/src/di/r3_injector.ts
index 7b6203b088b96..6cb8d66733ed1 100644
--- a/packages/core/src/di/r3_injector.ts
+++ b/packages/core/src/di/r3_injector.ts
@@ -11,9 +11,19 @@ import '../util/ng_dev_mode';
 import {RuntimeError, RuntimeErrorCode} from '../errors';
 import {OnDestroy} from '../interface/lifecycle_hooks';
 import {Type} from '../interface/type';
-import {emitInstanceCreatedByInjectorEvent, emitProviderConfiguredEvent, InjectorProfilerContext, runInInjectorProfilerContext, setInjectorProfilerContext} from '../render3/debug/injector_profiler';
+import {
+  emitInstanceCreatedByInjectorEvent,
+  emitProviderConfiguredEvent,
+  InjectorProfilerContext,
+  runInInjectorProfilerContext,
+  setInjectorProfilerContext,
+} from '../render3/debug/injector_profiler';
 import {FactoryFn, getFactoryDef} from '../render3/definition_factory';
-import {throwCyclicDependencyError, throwInvalidProviderError, throwMixedMultiProviderError} from '../render3/errors_di';
+import {
+  throwCyclicDependencyError,
+  throwInvalidProviderError,
+  throwMixedMultiProviderError,
+} from '../render3/errors_di';
 import {NG_ENV_ID} from '../render3/fields';
 import {newArray} from '../util/array_utils';
 import {EMPTY_ARRAY} from '../util/empty';
@@ -24,14 +34,42 @@ import {ENVIRONMENT_INITIALIZER} from './initializer_token';
 import {setInjectImplementation} from './inject_switch';
 import {InjectionToken} from './injection_token';
 import type {Injector} from './injector';
-import {catchInjectorError, convertToBitFlags, injectArgs, NG_TEMP_TOKEN_PATH, setCurrentInjector, THROW_IF_NOT_FOUND, ɵɵinject} from './injector_compatibility';
+import {
+  catchInjectorError,
+  convertToBitFlags,
+  injectArgs,
+  NG_TEMP_TOKEN_PATH,
+  setCurrentInjector,
+  THROW_IF_NOT_FOUND,
+  ɵɵinject,
+} from './injector_compatibility';
 import {INJECTOR} from './injector_token';
-import {getInheritedInjectableDef, getInjectableDef, InjectorType, ɵɵInjectableDeclaration} from './interface/defs';
+import {
+  getInheritedInjectableDef,
+  getInjectableDef,
+  InjectorType,
+  ɵɵInjectableDeclaration,
+} from './interface/defs';
 import {InjectFlags, InjectOptions} from './interface/injector';
-import {ClassProvider, ConstructorProvider, EnvironmentProviders, InternalEnvironmentProviders, isEnvironmentProviders, Provider, StaticClassProvider, TypeProvider} from './interface/provider';
+import {
+  ClassProvider,
+  ConstructorProvider,
+  EnvironmentProviders,
+  InternalEnvironmentProviders,
+  isEnvironmentProviders,
+  Provider,
+  StaticClassProvider,
+  TypeProvider,
+} from './interface/provider';
 import {INJECTOR_DEF_TYPES} from './internal_tokens';
 import {NullInjector} from './null_injector';
-import {isExistingProvider, isFactoryProvider, isTypeProvider, isValueProvider, SingleProvider} from './provider_collection';
+import {
+  isExistingProvider,
+  isFactoryProvider,
+  isTypeProvider,
+  isValueProvider,
+  SingleProvider,
+} from './provider_collection';
 import {ProviderToken} from './provider_token';
 import {INJECTOR_SCOPE, InjectorScope} from './scope';
 import {setActiveConsumer} from '@angular/core/primitives/signals';
@@ -53,7 +91,7 @@ const CIRCULAR = {};
 /**
  * A lazily initialized NullInjector.
  */
-let NULL_INJECTOR: Injector|undefined = undefined;
+let NULL_INJECTOR: Injector | undefined = undefined;
 
 export function getNullInjector(): Injector {
   if (NULL_INJECTOR === undefined) {
@@ -67,9 +105,9 @@ export function getNullInjector(): Injector {
  * current value.
  */
 interface Record<T> {
-  factory: (() => T)|undefined;
-  value: T|{};
-  multi: any[]|undefined;
+  factory: (() => T) | undefined;
+  value: T | {};
+  multi: any[] | undefined;
 }
 
 /**
@@ -82,16 +120,23 @@ export abstract class EnvironmentInjector implements Injector {
    * @returns The instance from the injector if defined, otherwise the `notFoundValue`.
    * @throws When the `notFoundValue` is `undefined` or `Injector.THROW_IF_NOT_FOUND`.
    */
-  abstract get<T>(token: ProviderToken<T>, notFoundValue: undefined, options: InjectOptions&{
-    optional?: false;
-  }): T;
+  abstract get<T>(
+    token: ProviderToken<T>,
+    notFoundValue: undefined,
+    options: InjectOptions & {
+      optional?: false;
+    },
+  ): T;
   /**
    * Retrieves an instance from the injector based on the provided token.
    * @returns The instance from the injector if defined, otherwise the `notFoundValue`.
    * @throws When the `notFoundValue` is `undefined` or `Injector.THROW_IF_NOT_FOUND`.
    */
-  abstract get<T>(token: ProviderToken<T>, notFoundValue: null|undefined, options: InjectOptions): T
-      |null;
+  abstract get<T>(
+    token: ProviderToken<T>,
+    notFoundValue: null | undefined,
+    options: InjectOptions,
+  ): T | null;
   /**
    * Retrieves an instance from the injector based on the provided token.
    * @returns The instance from the injector if defined, otherwise the `notFoundValue`.
@@ -138,7 +183,7 @@ export class R3Injector extends EnvironmentInjector {
    * - `null` value implies that we don't have the record. Used by tree-shakable injectors
    * to prevent further searches.
    */
-  private records = new Map<ProviderToken<any>, Record<any>|null>();
+  private records = new Map<ProviderToken<any>, Record<any> | null>();
 
   /**
    * Set of values instantiated by this injector which contain `ngOnDestroy` lifecycle hooks.
@@ -158,13 +203,16 @@ export class R3Injector extends EnvironmentInjector {
   private injectorDefTypes: Set<Type<unknown>>;
 
   constructor(
-      providers: Array<Provider|EnvironmentProviders>, readonly parent: Injector,
-      readonly source: string|null, readonly scopes: Set<InjectorScope>) {
+    providers: Array<Provider | EnvironmentProviders>,
+    readonly parent: Injector,
+    readonly source: string | null,
+    readonly scopes: Set<InjectorScope>,
+  ) {
     super();
     // Start off by creating Records for every provider.
-    forEachSingleProvider(
-        providers as Array<Provider|InternalEnvironmentProviders>,
-        provider => this.processProvider(provider));
+    forEachSingleProvider(providers as Array<Provider | InternalEnvironmentProviders>, (provider) =>
+      this.processProvider(provider),
+    );
 
     // Make sure the INJECTOR token provides this injector.
     this.records.set(INJECTOR, makeRecord(undefined, this));
@@ -176,7 +224,7 @@ export class R3Injector extends EnvironmentInjector {
 
     // Detect whether this injector has the APP_ROOT_SCOPE token and thus should provide
     // any injectable scoped to APP_ROOT_SCOPE.
-    const record = this.records.get(INJECTOR_SCOPE) as Record<InjectorScope|null>;
+    const record = this.records.get(INJECTOR_SCOPE) as Record<InjectorScope | null>;
     if (record != null && typeof record.value === 'string') {
       this.scopes.add(record.value as InjectorScope);
     }
@@ -229,7 +277,7 @@ export class R3Injector extends EnvironmentInjector {
     const previousInjector = setCurrentInjector(this);
     const previousInjectImplementation = setInjectImplementation(undefined);
 
-    let prevInjectContext: InjectorProfilerContext|undefined;
+    let prevInjectContext: InjectorProfilerContext | undefined;
     if (ngDevMode) {
       prevInjectContext = setInjectorProfilerContext({injector: this, token: null});
     }
@@ -244,8 +292,10 @@ export class R3Injector extends EnvironmentInjector {
   }
 
   override get<T>(
-      token: ProviderToken<T>, notFoundValue: any = THROW_IF_NOT_FOUND,
-      flags: InjectFlags|InjectOptions = InjectFlags.Default): T {
+    token: ProviderToken<T>,
+    notFoundValue: any = THROW_IF_NOT_FOUND,
+    flags: InjectFlags | InjectOptions = InjectFlags.Default,
+  ): T {
     this.assertNotDestroyed();
 
     if (token.hasOwnProperty(NG_ENV_ID)) {
@@ -265,7 +315,7 @@ export class R3Injector extends EnvironmentInjector {
       // Check for the SkipSelf flag.
       if (!(flags & InjectFlags.SkipSelf)) {
         // SkipSelf isn't set, check if the record belongs to this injector.
-        let record: Record<T>|undefined|null = this.records.get(token);
+        let record: Record<T> | undefined | null = this.records.get(token);
         if (record === undefined) {
           // No record, but maybe the token is scoped to this injector. Look for an injectable
           // def with a scope matching this injector.
@@ -297,13 +347,12 @@ export class R3Injector extends EnvironmentInjector {
       const nextInjector = !(flags & InjectFlags.Self) ? this.parent : getNullInjector();
       // Set the notFoundValue based on the Optional flag - if optional is set and notFoundValue
       // is undefined, the value is null, otherwise it's the notFoundValue.
-      notFoundValue = (flags & InjectFlags.Optional) && notFoundValue === THROW_IF_NOT_FOUND ?
-          null :
-          notFoundValue;
+      notFoundValue =
+        flags & InjectFlags.Optional && notFoundValue === THROW_IF_NOT_FOUND ? null : notFoundValue;
       return nextInjector.get(token, notFoundValue);
     } catch (e: any) {
       if (e.name === 'NullInjectorError') {
-        const path: any[] = e[NG_TEMP_TOKEN_PATH] = e[NG_TEMP_TOKEN_PATH] || [];
+        const path: any[] = (e[NG_TEMP_TOKEN_PATH] = e[NG_TEMP_TOKEN_PATH] || []);
         path.unshift(stringify(token));
         if (previousInjector) {
           // We still have a parent injector, keep throwing
@@ -328,7 +377,7 @@ export class R3Injector extends EnvironmentInjector {
     const prevConsumer = setActiveConsumer(null);
     const previousInjector = setCurrentInjector(this);
     const previousInjectImplementation = setInjectImplementation(undefined);
-    let prevInjectContext: InjectorProfilerContext|undefined;
+    let prevInjectContext: InjectorProfilerContext | undefined;
     if (ngDevMode) {
       prevInjectContext = setInjectorProfilerContext({injector: this, token: null});
     }
@@ -337,11 +386,12 @@ export class R3Injector extends EnvironmentInjector {
       const initializers = this.get(ENVIRONMENT_INITIALIZER, EMPTY_ARRAY, InjectFlags.Self);
       if (ngDevMode && !Array.isArray(initializers)) {
         throw new RuntimeError(
-            RuntimeErrorCode.INVALID_MULTI_PROVIDER,
-            'Unexpected type of the `ENVIRONMENT_INITIALIZER` token value ' +
-                `(expected an array, but got ${typeof initializers}). ` +
-                'Please check that the `ENVIRONMENT_INITIALIZER` token is configured as a ' +
-                '`multi: true` provider.');
+          RuntimeErrorCode.INVALID_MULTI_PROVIDER,
+          'Unexpected type of the `ENVIRONMENT_INITIALIZER` token value ' +
+            `(expected an array, but got ${typeof initializers}). ` +
+            'Please check that the `ENVIRONMENT_INITIALIZER` token is configured as a ' +
+            '`multi: true` provider.',
+        );
       }
       for (const initializer of initializers) {
         initializer();
@@ -366,8 +416,9 @@ export class R3Injector extends EnvironmentInjector {
   assertNotDestroyed(): void {
     if (this._destroyed) {
       throw new RuntimeError(
-          RuntimeErrorCode.INJECTOR_ALREADY_DESTROYED,
-          ngDevMode && 'Injector has already been destroyed.');
+        RuntimeErrorCode.INJECTOR_ALREADY_DESTROYED,
+        ngDevMode && 'Injector has already been destroyed.',
+      );
     }
   }
 
@@ -378,8 +429,9 @@ export class R3Injector extends EnvironmentInjector {
     // Determine the token from the provider. Either it's its own token, or has a {provide: ...}
     // property.
     provider = resolveForwardRef(provider);
-    let token: any =
-        isTypeProvider(provider) ? provider : resolveForwardRef(provider && provider.provide);
+    let token: any = isTypeProvider(provider)
+      ? provider
+      : resolveForwardRef(provider && provider.provide);
 
     // Construct a `Record` for the provider.
     const record = providerToRecord(provider);
@@ -455,7 +507,7 @@ export class R3Injector extends EnvironmentInjector {
     }
     const providedIn = resolveForwardRef(def.providedIn);
     if (typeof providedIn === 'string') {
-      return providedIn === 'any' || (this.scopes.has(providedIn));
+      return providedIn === 'any' || this.scopes.has(providedIn);
     } else {
       return this.injectorDefTypes.has(providedIn);
     }
@@ -482,8 +534,9 @@ function injectableDefOrInjectorDefFactory(token: ProviderToken<any>): FactoryFn
   // If it's missing that, it's an error.
   if (token instanceof InjectionToken) {
     throw new RuntimeError(
-        RuntimeErrorCode.INVALID_INJECTION_TOKEN,
-        ngDevMode && `Token ${stringify(token)} is missing a ɵprov definition.`);
+      RuntimeErrorCode.INVALID_INJECTION_TOKEN,
+      ngDevMode && `Token ${stringify(token)} is missing a ɵprov definition.`,
+    );
   }
 
   // Undecorated types can sometimes be created if they have no constructor arguments.
@@ -500,10 +553,12 @@ function getUndecoratedInjectableFactory(token: Function) {
   const paramLength = token.length;
   if (paramLength > 0) {
     throw new RuntimeError(
-        RuntimeErrorCode.INVALID_INJECTION_TOKEN,
-        ngDevMode &&
-            `Can't resolve all parameters for ${stringify(token)}: (${
-                newArray(paramLength, '?').join(', ')}).`);
+      RuntimeErrorCode.INVALID_INJECTION_TOKEN,
+      ngDevMode &&
+        `Can't resolve all parameters for ${stringify(token)}: (${newArray(paramLength, '?').join(
+          ', ',
+        )}).`,
+    );
   }
 
   // The constructor function appears to have no parameters.
@@ -523,7 +578,7 @@ function providerToRecord(provider: SingleProvider): Record<any> {
   if (isValueProvider(provider)) {
     return makeRecord(undefined, provider.useValue);
   } else {
-    const factory: (() => any)|undefined = providerToFactory(provider);
+    const factory: (() => any) | undefined = providerToFactory(provider);
     return makeRecord(factory, NOT_YET);
   }
 }
@@ -534,8 +589,11 @@ function providerToRecord(provider: SingleProvider): Record<any> {
  * @param provider provider to convert to factory
  */
 export function providerToFactory(
-    provider: SingleProvider, ngModuleType?: InjectorType<any>, providers?: any[]): () => any {
-  let factory: (() => any)|undefined = undefined;
+  provider: SingleProvider,
+  ngModuleType?: InjectorType<any>,
+  providers?: any[],
+): () => any {
+  let factory: (() => any) | undefined = undefined;
   if (ngDevMode && isEnvironmentProviders(provider)) {
     throwInvalidProviderError(undefined, providers, provider);
   }
@@ -552,13 +610,14 @@ export function providerToFactory(
       factory = () => ɵɵinject(resolveForwardRef(provider.useExisting));
     } else {
       const classRef = resolveForwardRef(
-          provider &&
-          ((provider as StaticClassProvider | ClassProvider).useClass || provider.provide));
+        provider &&
+          ((provider as StaticClassProvider | ClassProvider).useClass || provider.provide),
+      );
       if (ngDevMode && !classRef) {
         throwInvalidProviderError(ngModuleType, providers, provider);
       }
       if (hasDeps(provider)) {
-        factory = () => new (classRef)(...injectArgs(provider.deps));
+        factory = () => new classRef(...injectArgs(provider.deps));
       } else {
         return getFactoryDef(classRef) || injectableDefOrInjectorDefFactory(classRef);
       }
@@ -568,7 +627,10 @@ export function providerToFactory(
 }
 
 function makeRecord<T>(
-    factory: (() => T)|undefined, value: T|{}, multi: boolean = false): Record<T> {
+  factory: (() => T) | undefined,
+  value: T | {},
+  multi: boolean = false,
+): Record<T> {
   return {
     factory: factory,
     value: value,
@@ -576,23 +638,30 @@ function makeRecord<T>(
   };
 }
 
-function hasDeps(value: ClassProvider|ConstructorProvider|
-                 StaticClassProvider): value is ClassProvider&{deps: any[]} {
+function hasDeps(
+  value: ClassProvider | ConstructorProvider | StaticClassProvider,
+): value is ClassProvider & {deps: any[]} {
   return !!(value as any).deps;
 }
 
 function hasOnDestroy(value: any): value is OnDestroy {
-  return value !== null && typeof value === 'object' &&
-      typeof (value as OnDestroy).ngOnDestroy === 'function';
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    typeof (value as OnDestroy).ngOnDestroy === 'function'
+  );
 }
 
 function couldBeInjectableType(value: any): value is ProviderToken<any> {
-  return (typeof value === 'function') ||
-      (typeof value === 'object' && value instanceof InjectionToken);
+  return (
+    typeof value === 'function' || (typeof value === 'object' && value instanceof InjectionToken)
+  );
 }
 
 function forEachSingleProvider(
-    providers: Array<Provider|EnvironmentProviders>, fn: (provider: SingleProvider) => void): void {
+  providers: Array<Provider | EnvironmentProviders>,
+  fn: (provider: SingleProvider) => void,
+): void {
   for (const provider of providers) {
     if (Array.isArray(provider)) {
       forEachSingleProvider(provider, fn);
diff --git a/packages/core/src/di/scope.ts b/packages/core/src/di/scope.ts
index 2c4d375771a93..0742e4f61c2ff 100644
--- a/packages/core/src/di/scope.ts
+++ b/packages/core/src/di/scope.ts
@@ -8,13 +8,13 @@
 
 import {InjectionToken} from './injection_token';
 
-
-export type InjectorScope = 'root'|'platform'|'environment';
+export type InjectorScope = 'root' | 'platform' | 'environment';
 
 /**
  * An internal token whose presence in an injector indicates that the injector should treat itself
  * as a root scoped injector when processing requests for unknown tokens which may indicate
  * they are provided in the root scope.
  */
-export const INJECTOR_SCOPE =
-    new InjectionToken<InjectorScope|null>(ngDevMode ? 'Set Injector scope.' : '');
+export const INJECTOR_SCOPE = new InjectionToken<InjectorScope | null>(
+  ngDevMode ? 'Set Injector scope.' : '',
+);
diff --git a/packages/core/src/error_handler.ts b/packages/core/src/error_handler.ts
index 3c7b45b2651ca..bb0004182ffaa 100644
--- a/packages/core/src/error_handler.ts
+++ b/packages/core/src/error_handler.ts
@@ -50,7 +50,7 @@ export class ErrorHandler {
   }
 
   /** @internal */
-  _findOriginalError(error: any): Error|null {
+  _findOriginalError(error: any): Error | null {
     let e = error && getOriginalError(error);
     while (e && getOriginalError(e)) {
       e = getOriginalError(e);
@@ -67,10 +67,12 @@ export class ErrorHandler {
  * is calling `ErrorHandler.handleError` outside of the Angular zone.
  */
 export const INTERNAL_APPLICATION_ERROR_HANDLER = new InjectionToken<(e: any) => void>(
-    (typeof ngDevMode === 'undefined' || ngDevMode) ? 'internal error handler' : '', {
-      providedIn: 'root',
-      factory: () => {
-        const userErrorHandler = inject(ErrorHandler);
-        return userErrorHandler.handleError.bind(this);
-      }
-    });
+  typeof ngDevMode === 'undefined' || ngDevMode ? 'internal error handler' : '',
+  {
+    providedIn: 'root',
+    factory: () => {
+      const userErrorHandler = inject(ErrorHandler);
+      return userErrorHandler.handleError.bind(this);
+    },
+  },
+);
diff --git a/packages/core/src/errors.ts b/packages/core/src/errors.ts
index a0391e9fae726..6617d10243c4d 100644
--- a/packages/core/src/errors.ts
+++ b/packages/core/src/errors.ts
@@ -133,7 +133,6 @@ export const enum RuntimeErrorCode {
   RUNTIME_DEPS_ORPHAN_COMPONENT = 1001,
 }
 
-
 /**
  * Class that represents a runtime error.
  * Formats and outputs the error message in a consistent way.
@@ -151,7 +150,10 @@ export const enum RuntimeErrorCode {
  * logic.
  */
 export class RuntimeError<T extends number = RuntimeErrorCode> extends Error {
-  constructor(public code: T, message: null|false|string) {
+  constructor(
+    public code: T,
+    message: null | false | string,
+  ) {
     super(formatRuntimeError<T>(code, message));
   }
 }
@@ -161,7 +163,9 @@ export class RuntimeError<T extends number = RuntimeErrorCode> extends Error {
  * See additional info on the `message` argument type in the `RuntimeError` class description.
  */
 export function formatRuntimeError<T extends number = RuntimeErrorCode>(
-    code: T, message: null|false|string): string {
+  code: T,
+  message: null | false | string,
+): string {
   // Error code might be a negative number, which is a special marker that instructs the logic to
   // generate a link to the error details page on angular.io.
   // We also prepend `0` to non-compile-time errors.
@@ -172,8 +176,7 @@ export function formatRuntimeError<T extends number = RuntimeErrorCode>(
   if (ngDevMode && code < 0) {
     const addPeriodSeparator = !errorMessage.match(/[.,;!?\n]$/);
     const separator = addPeriodSeparator ? '.' : '';
-    errorMessage =
-        `${errorMessage}${separator} Find more at ${ERROR_DETAILS_PAGE_BASE_URL}/${fullCode}`;
+    errorMessage = `${errorMessage}${separator} Find more at ${ERROR_DETAILS_PAGE_BASE_URL}/${fullCode}`;
   }
   return errorMessage;
 }
diff --git a/packages/core/src/event_emitter.ts b/packages/core/src/event_emitter.ts
index 53788a7efb8f6..00d556bd2b8d2 100644
--- a/packages/core/src/event_emitter.ts
+++ b/packages/core/src/event_emitter.ts
@@ -77,7 +77,7 @@ export interface EventEmitter<T> extends Subject<T>, OutputRef<T> {
    * @param [isAsync=false] When true, deliver events asynchronously.
    *
    */
-  new(isAsync?: boolean): EventEmitter<T>;
+  new (isAsync?: boolean): EventEmitter<T>;
 
   /**
    * Emits an event containing a given value.
@@ -92,8 +92,11 @@ export interface EventEmitter<T> extends Subject<T>, OutputRef<T> {
    * @param complete When supplied, a custom handler for a completion notification from this
    *     emitter.
    */
-  subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void):
-      Subscription;
+  subscribe(
+    next?: (value: T) => void,
+    error?: (error: any) => void,
+    complete?: () => void,
+  ): Subscription;
   /**
    * Registers handlers for events emitted by this instance.
    * @param observerOrNext When supplied, a custom handler for emitted events, or an observer
@@ -106,8 +109,8 @@ export interface EventEmitter<T> extends Subject<T>, OutputRef<T> {
 }
 
 class EventEmitter_ extends Subject<any> implements OutputRef<any> {
-  __isAsync: boolean;  // tslint:disable-line
-  destroyRef: DestroyRef|undefined = undefined;
+  __isAsync: boolean; // tslint:disable-line
+  destroyRef: DestroyRef | undefined = undefined;
 
   constructor(isAsync: boolean = false) {
     super();
@@ -173,6 +176,7 @@ function _wrapInTimeout(fn: (value: unknown) => any) {
  * @publicApi
  */
 export const EventEmitter: {
-  new (isAsync?: boolean): EventEmitter<any>; new<T>(isAsync?: boolean): EventEmitter<T>;
+  new (isAsync?: boolean): EventEmitter<any>;
+  new <T>(isAsync?: boolean): EventEmitter<T>;
   readonly prototype: EventEmitter<any>;
 } = EventEmitter_ as any;
diff --git a/packages/core/src/hydration/annotate.ts b/packages/core/src/hydration/annotate.ts
index 76cac96156d58..5db324e6da608 100644
--- a/packages/core/src/hydration/annotate.ts
+++ b/packages/core/src/hydration/annotate.ts
@@ -16,20 +16,62 @@ import {getComponentDef} from '../render3/definition';
 import {CONTAINER_HEADER_OFFSET, LContainer} from '../render3/interfaces/container';
 import {isTNodeShape, TNode, TNodeType} from '../render3/interfaces/node';
 import {RElement} from '../render3/interfaces/renderer_dom';
-import {hasI18n, isComponentHost, isLContainer, isProjectionTNode, isRootView} from '../render3/interfaces/type_checks';
-import {CONTEXT, HEADER_OFFSET, HOST, LView, PARENT, RENDERER, TView, TVIEW, TViewType} from '../render3/interfaces/view';
+import {
+  hasI18n,
+  isComponentHost,
+  isLContainer,
+  isProjectionTNode,
+  isRootView,
+} from '../render3/interfaces/type_checks';
+import {
+  CONTEXT,
+  HEADER_OFFSET,
+  HOST,
+  LView,
+  PARENT,
+  RENDERER,
+  TView,
+  TVIEW,
+  TViewType,
+} from '../render3/interfaces/view';
 import {unwrapLView, unwrapRNode} from '../render3/util/view_utils';
 import {TransferState} from '../transfer_state';
 
 import {unsupportedProjectionOfDomNodes} from './error_handling';
-import {collectDomEventsInfo, EVENT_REPLAY_ENABLED_DEFAULT, setJSActionAttribute} from './event_replay';
-import {getOrComputeI18nChildren, isI18nHydrationEnabled, isI18nHydrationSupportEnabled, trySerializeI18nBlock} from './i18n';
-import {CONTAINERS, DISCONNECTED_NODES, ELEMENT_CONTAINERS, I18N_DATA, MULTIPLIER, NODES, NUM_ROOT_NODES, SerializedContainerView, SerializedView, TEMPLATE_ID, TEMPLATES} from './interfaces';
+import {
+  collectDomEventsInfo,
+  EVENT_REPLAY_ENABLED_DEFAULT,
+  setJSActionAttribute,
+} from './event_replay';
+import {
+  getOrComputeI18nChildren,
+  isI18nHydrationEnabled,
+  isI18nHydrationSupportEnabled,
+  trySerializeI18nBlock,
+} from './i18n';
+import {
+  CONTAINERS,
+  DISCONNECTED_NODES,
+  ELEMENT_CONTAINERS,
+  I18N_DATA,
+  MULTIPLIER,
+  NODES,
+  NUM_ROOT_NODES,
+  SerializedContainerView,
+  SerializedView,
+  TEMPLATE_ID,
+  TEMPLATES,
+} from './interfaces';
 import {calcPathForNode, isDisconnectedNode} from './node_lookup_utils';
 import {isInSkipHydrationBlock, SKIP_HYDRATION_ATTR_NAME} from './skip_hydration';
 import {IS_EVENT_REPLAY_ENABLED} from './tokens';
-import {getLNodeForHydration, NGH_ATTR_NAME, NGH_DATA_KEY, processTextNodeBeforeSerialization, TextNodeMarker} from './utils';
-
+import {
+  getLNodeForHydration,
+  NGH_ATTR_NAME,
+  NGH_DATA_KEY,
+  processTextNodeBeforeSerialization,
+  TextNodeMarker,
+} from './utils';
 
 /**
  * A collection that tracks all serialized views (`ngh` DOM annotations)
@@ -87,7 +129,7 @@ export interface HydrationContext {
   serializedViewCollection: SerializedViewCollection;
   corruptedTextNodes: Map<HTMLElement, TextNodeMarker>;
   isI18nHydrationEnabled: boolean;
-  i18nChildren: Map<TView, Set<number>|null>;
+  i18nChildren: Map<TView, Set<number> | null>;
   eventTypesToReplay: Set<string>;
   shouldReplayEvents: boolean;
 }
@@ -96,7 +138,7 @@ export interface HydrationContext {
  * Computes the number of root nodes in a given view
  * (or child nodes in a given container if a tNode is provided).
  */
-function calcNumRootNodes(tView: TView, lView: LView, tNode: TNode|null): number {
+function calcNumRootNodes(tView: TView, lView: LView, tNode: TNode | null): number {
   const rootNodes: unknown[] = [];
   collectNativeNodes(tView, lView, tNode, rootNodes);
   return rootNodes.length;
@@ -111,12 +153,14 @@ function calcNumRootNodesInLContainer(lContainer: LContainer): number {
   return rootNodes.length;
 }
 
-
 /**
  * Annotates root level component's LView for hydration,
  * see `annotateHostElementForHydration` for additional information.
  */
-function annotateComponentLViewForHydration(lView: LView, context: HydrationContext): number|null {
+function annotateComponentLViewForHydration(
+  lView: LView,
+  context: HydrationContext,
+): number | null {
   const hostElement = lView[HOST];
   // Root elements might also be annotated with the `ngSkipHydration` attribute,
   // check if it's present before starting the serialization process.
@@ -219,7 +263,9 @@ export function annotateForHydration(appRef: ApplicationRef, doc: Document) {
  * @returns an array of the `SerializedView` objects
  */
 function serializeLContainer(
-    lContainer: LContainer, context: HydrationContext): SerializedContainerView[] {
+  lContainer: LContainer,
+  context: HydrationContext,
+): SerializedContainerView[] {
   const views: SerializedContainerView[] = [];
   let lastViewAsString = '';
 
@@ -228,7 +274,7 @@ function serializeLContainer(
 
     let template: string;
     let numRootNodes: number;
-    let serializedView: SerializedContainerView|undefined;
+    let serializedView: SerializedContainerView | undefined;
 
     if (isRootView(childLView)) {
       // If this is a root view, get an LView for the underlying component,
@@ -301,7 +347,11 @@ function serializeLContainer(
  * current serialized view.
  */
 function appendSerializedNodePath(
-    ngh: SerializedView, tNode: TNode, lView: LView, excludedParentNodes: Set<number>|null) {
+  ngh: SerializedView,
+  tNode: TNode,
+  lView: LView,
+  excludedParentNodes: Set<number> | null,
+) {
   const noOffsetIndex = tNode.index - HEADER_OFFSET;
   ngh[NODES] ??= {};
   ngh[NODES][noOffsetIndex] = calcPathForNode(tNode, lView, excludedParentNodes);
@@ -333,9 +383,9 @@ function serializeLView(lView: LView, context: HydrationContext): SerializedView
   const ngh: SerializedView = {};
   const tView = lView[TVIEW];
   const i18nChildren = getOrComputeI18nChildren(tView, context);
-  const nativeElementsToEventTypes = context.shouldReplayEvents ?
-      collectDomEventsInfo(tView, lView, context.eventTypesToReplay) :
-      null;
+  const nativeElementsToEventTypes = context.shouldReplayEvents
+    ? collectDomEventsInfo(tView, lView, context.eventTypesToReplay)
+    : null;
   // Iterate over DOM element references in an LView.
   for (let i = HEADER_OFFSET; i < tView.bindingStartIndex; i++) {
     const tNode = tView.data[i] as TNode;
@@ -391,8 +441,10 @@ function serializeLView(lView: LView, context: HydrationContext): SerializedView
           // appears at projection location), skip annotations for this content
           // since all DOM nodes in this projection were handled while processing
           // a parent lView, which contains those nodes.
-          if (!isProjectionTNode(projectionHeadTNode) &&
-              !isInSkipHydrationBlock(projectionHeadTNode)) {
+          if (
+            !isProjectionTNode(projectionHeadTNode) &&
+            !isInSkipHydrationBlock(projectionHeadTNode)
+          ) {
             if (isDisconnectedNode(projectionHeadTNode, lView)) {
               // Check whether this node is connected, since we may have a TNode
               // in the data structure as a projection segment head, but the
@@ -429,7 +481,7 @@ function serializeLView(lView: LView, context: HydrationContext): SerializedView
       }
 
       // Serialize views within this LContainer.
-      const hostNode = lView[i][HOST]!;  // host node of this container
+      const hostNode = lView[i][HOST]!; // host node of this container
 
       // LView[i][HOST] can be of 2 different types:
       // - either a DOM node
@@ -464,7 +516,7 @@ function serializeLView(lView: LView, context: HydrationContext): SerializedView
         // not be able to find an anchor. In this case, use full path instead.
         let nextTNode = tNode.next;
         // Skip over all `<ng-content>` slots in a row.
-        while (nextTNode !== null && (nextTNode.type & TNodeType.Projection)) {
+        while (nextTNode !== null && nextTNode.type & TNodeType.Projection) {
           nextTNode = nextTNode.next;
         }
         if (nextTNode && !isInSkipHydrationBlock(nextTNode)) {
@@ -495,11 +547,17 @@ function serializeLView(lView: LView, context: HydrationContext): SerializedView
  *     connection to identify the location of a node.
  */
 function conditionallyAnnotateNodePath(
-    ngh: SerializedView, tNode: TNode, lView: LView<unknown>,
-    excludedParentNodes: Set<number>|null) {
+  ngh: SerializedView,
+  tNode: TNode,
+  lView: LView<unknown>,
+  excludedParentNodes: Set<number> | null,
+) {
   // Handle case #1 described above.
-  if (tNode.projectionNext && tNode.projectionNext !== tNode.next &&
-      !isInSkipHydrationBlock(tNode.projectionNext)) {
+  if (
+    tNode.projectionNext &&
+    tNode.projectionNext !== tNode.next &&
+    !isInSkipHydrationBlock(tNode.projectionNext)
+  ) {
     appendSerializedNodePath(ngh, tNode.projectionNext, lView, excludedParentNodes);
   }
 
@@ -507,8 +565,12 @@ function conditionallyAnnotateNodePath(
   // Note: we only do that for the first node (i.e. when `tNode.prev === null`),
   // the rest of the nodes would rely on the current node location, so no extra
   // annotation is needed.
-  if (tNode.prev === null && tNode.parent !== null && isDisconnectedNode(tNode.parent, lView) &&
-      !isDisconnectedNode(tNode, lView)) {
+  if (
+    tNode.prev === null &&
+    tNode.parent !== null &&
+    isDisconnectedNode(tNode.parent, lView) &&
+    !isDisconnectedNode(tNode, lView)
+  ) {
     appendSerializedNodePath(ngh, tNode, lView, excludedParentNodes);
   }
 }
@@ -519,9 +581,9 @@ function conditionallyAnnotateNodePath(
  */
 function componentUsesShadowDomEncapsulation(lView: LView): boolean {
   const instance = lView[CONTEXT];
-  return instance?.constructor ?
-      getComponentDef(instance.constructor)?.encapsulation === ViewEncapsulation.ShadowDom :
-      false;
+  return instance?.constructor
+    ? getComponentDef(instance.constructor)?.encapsulation === ViewEncapsulation.ShadowDom
+    : false;
 }
 
 /**
@@ -538,10 +600,15 @@ function componentUsesShadowDomEncapsulation(lView: LView): boolean {
  *          or `null` when a given component can not be serialized.
  */
 function annotateHostElementForHydration(
-    element: RElement, lView: LView, context: HydrationContext): number|null {
+  element: RElement,
+  lView: LView,
+  context: HydrationContext,
+): number | null {
   const renderer = lView[RENDERER];
-  if ((hasI18n(lView) && !isI18nHydrationSupportEnabled()) ||
-      componentUsesShadowDomEncapsulation(lView)) {
+  if (
+    (hasI18n(lView) && !isI18nHydrationSupportEnabled()) ||
+    componentUsesShadowDomEncapsulation(lView)
+  ) {
     // Attach the skip hydration attribute if this component:
     // - either has i18n blocks, since hydrating such blocks is not yet supported
     // - or uses ShadowDom view encapsulation, since Domino doesn't support
@@ -567,7 +634,9 @@ function annotateHostElementForHydration(
  * @param doc The document
  */
 function insertCorruptedTextNodeMarkers(
-    corruptedTextNodes: Map<HTMLElement, string>, doc: Document) {
+  corruptedTextNodes: Map<HTMLElement, string>,
+  doc: Document,
+) {
   for (const [textNode, marker] of corruptedTextNodes) {
     textNode.after(doc.createComment(marker));
   }
diff --git a/packages/core/src/hydration/api.ts b/packages/core/src/hydration/api.ts
index c401ac3bac9c0..4660017aa0f62 100644
--- a/packages/core/src/hydration/api.ts
+++ b/packages/core/src/hydration/api.ts
@@ -8,7 +8,13 @@
 
 import {APP_BOOTSTRAP_LISTENER, ApplicationRef, whenStable} from '../application/application_ref';
 import {Console} from '../console';
-import {ENVIRONMENT_INITIALIZER, EnvironmentProviders, Injector, makeEnvironmentProviders, Provider} from '../di';
+import {
+  ENVIRONMENT_INITIALIZER,
+  EnvironmentProviders,
+  Injector,
+  makeEnvironmentProviders,
+  Provider,
+} from '../di';
 import {inject} from '../di/injector_compatibility';
 import {formatRuntimeError, RuntimeError, RuntimeErrorCode} from '../errors';
 import {enableLocateOrCreateContainerRefImpl} from '../linker/view_container_ref';
@@ -25,8 +31,17 @@ import {performanceMarkFeature} from '../util/performance';
 import {NgZone} from '../zone';
 
 import {cleanupDehydratedViews} from './cleanup';
-import {enableClaimDehydratedIcuCaseImpl, enablePrepareI18nBlockForHydrationImpl, isI18nHydrationEnabled, setIsI18nHydrationSupportEnabled} from './i18n';
-import {IS_HYDRATION_DOM_REUSE_ENABLED, IS_I18N_HYDRATION_ENABLED, PRESERVE_HOST_CONTENT} from './tokens';
+import {
+  enableClaimDehydratedIcuCaseImpl,
+  enablePrepareI18nBlockForHydrationImpl,
+  isI18nHydrationEnabled,
+  setIsI18nHydrationSupportEnabled,
+} from './i18n';
+import {
+  IS_HYDRATION_DOM_REUSE_ENABLED,
+  IS_I18N_HYDRATION_ENABLED,
+  PRESERVE_HOST_CONTENT,
+} from './tokens';
 import {enableRetrieveHydrationInfoImpl, NGH_DATA_KEY, SSR_CONTENT_INTEGRITY_MARKER} from './utils';
 import {enableFindMatchingDehydratedViewImpl} from './views';
 
@@ -96,15 +111,15 @@ function enableI18nHydrationRuntimeSupport() {
  */
 function printHydrationStats(injector: Injector) {
   const console = injector.get(Console);
-  const message = `Angular hydrated ${ngDevMode!.hydratedComponents} component(s) ` +
-      `and ${ngDevMode!.hydratedNodes} node(s), ` +
-      `${ngDevMode!.componentsSkippedHydration} component(s) were skipped. ` +
-      `Learn more at https://angular.io/guide/hydration.`;
+  const message =
+    `Angular hydrated ${ngDevMode!.hydratedComponents} component(s) ` +
+    `and ${ngDevMode!.hydratedNodes} node(s), ` +
+    `${ngDevMode!.componentsSkippedHydration} component(s) were skipped. ` +
+    `Learn more at https://angular.io/guide/hydration.`;
   // tslint:disable-next-line:no-console
   console.log(message);
 }
 
-
 /**
  * Returns a Promise that is resolved when an application becomes stable.
  */
@@ -149,15 +164,16 @@ export function withDomHydration(): EnvironmentProviders {
           // hydration annotations. Otherwise, keep hydration disabled.
           const transferState = inject(TransferState, {optional: true});
           isEnabled = !!transferState?.get(NGH_DATA_KEY, null);
-          if (!isEnabled && (typeof ngDevMode !== 'undefined' && ngDevMode)) {
+          if (!isEnabled && typeof ngDevMode !== 'undefined' && ngDevMode) {
             const console = inject(Console);
             const message = formatRuntimeError(
-                RuntimeErrorCode.MISSING_HYDRATION_ANNOTATIONS,
-                'Angular hydration was requested on the client, but there was no ' +
-                    'serialized information present in the server response, ' +
-                    'thus hydration was not enabled. ' +
-                    'Make sure the `provideClientHydration()` is included into the list ' +
-                    'of providers in the server part of the application configuration.');
+              RuntimeErrorCode.MISSING_HYDRATION_ANNOTATIONS,
+              'Angular hydration was requested on the client, but there was no ' +
+                'serialized information present in the server response, ' +
+                'thus hydration was not enabled. ' +
+                'Make sure the `provideClientHydration()` is included into the list ' +
+                'of providers in the server part of the application configuration.',
+            );
             // tslint:disable-next-line:no-console
             console.warn(message);
           }
@@ -195,7 +211,7 @@ export function withDomHydration(): EnvironmentProviders {
         // On a server, an application is rendered from scratch,
         // so the host content needs to be empty.
         return isPlatformBrowser() && inject(IS_HYDRATION_DOM_REUSE_ENABLED);
-      }
+      },
     },
     {
       provide: APP_BOOTSTRAP_LISTENER,
@@ -219,10 +235,10 @@ export function withDomHydration(): EnvironmentProviders {
             });
           };
         }
-        return () => {};  // noop
+        return () => {}; // noop
       },
       multi: true,
-    }
+    },
   ]);
 }
 
@@ -254,10 +270,9 @@ export function withI18nSupport(): Provider[] {
  */
 function logWarningOnStableTimedout(time: number, console: Console): void {
   const message =
-      `Angular hydration expected the ApplicationRef.isStable() to emit \`true\`, but it ` +
-      `didn't happen within ${
-          time}ms. Angular hydration logic depends on the application becoming stable ` +
-      `as a signal to complete hydration process.`;
+    `Angular hydration expected the ApplicationRef.isStable() to emit \`true\`, but it ` +
+    `didn't happen within ${time}ms. Angular hydration logic depends on the application becoming stable ` +
+    `as a signal to complete hydration process.`;
 
   console.warn(formatRuntimeError(RuntimeErrorCode.HYDRATION_STABLE_TIMEDOUT, message));
 }
@@ -274,21 +289,25 @@ function logWarningOnStableTimedout(time: number, console: Console): void {
  */
 function verifySsrContentsIntegrity(): void {
   const doc = getDocument();
-  let hydrationMarker: Node|undefined;
+  let hydrationMarker: Node | undefined;
   for (const node of doc.body.childNodes) {
-    if (node.nodeType === Node.COMMENT_NODE &&
-        node.textContent?.trim() === SSR_CONTENT_INTEGRITY_MARKER) {
+    if (
+      node.nodeType === Node.COMMENT_NODE &&
+      node.textContent?.trim() === SSR_CONTENT_INTEGRITY_MARKER
+    ) {
       hydrationMarker = node;
       break;
     }
   }
   if (!hydrationMarker) {
     throw new RuntimeError(
-        RuntimeErrorCode.MISSING_SSR_CONTENT_INTEGRITY_MARKER,
-        typeof ngDevMode !== 'undefined' && ngDevMode &&
-            'Angular hydration logic detected that HTML content of this page was modified after it ' +
-                'was produced during server side rendering. Make sure that there are no optimizations ' +
-                'that remove comment nodes from HTML enabled on your CDN. Angular hydration ' +
-                'relies on HTML produced by the server, including whitespaces and comment nodes.');
+      RuntimeErrorCode.MISSING_SSR_CONTENT_INTEGRITY_MARKER,
+      typeof ngDevMode !== 'undefined' &&
+        ngDevMode &&
+        'Angular hydration logic detected that HTML content of this page was modified after it ' +
+          'was produced during server side rendering. Make sure that there are no optimizations ' +
+          'that remove comment nodes from HTML enabled on your CDN. Angular hydration ' +
+          'relies on HTML produced by the server, including whitespaces and comment nodes.',
+    );
   }
 }
diff --git a/packages/core/src/hydration/cleanup.ts b/packages/core/src/hydration/cleanup.ts
index 4cb85dea78bc6..d0b0664ef4eef 100644
--- a/packages/core/src/hydration/cleanup.ts
+++ b/packages/core/src/hydration/cleanup.ts
@@ -7,11 +7,23 @@
  */
 
 import {ApplicationRef} from '../application/application_ref';
-import {CONTAINER_HEADER_OFFSET, DEHYDRATED_VIEWS, LContainer} from '../render3/interfaces/container';
+import {
+  CONTAINER_HEADER_OFFSET,
+  DEHYDRATED_VIEWS,
+  LContainer,
+} from '../render3/interfaces/container';
 import {Renderer} from '../render3/interfaces/renderer';
 import {RNode} from '../render3/interfaces/renderer_dom';
 import {isLContainer, isLView} from '../render3/interfaces/type_checks';
-import {HEADER_OFFSET, HOST, HYDRATION, LView, PARENT, RENDERER, TVIEW} from '../render3/interfaces/view';
+import {
+  HEADER_OFFSET,
+  HOST,
+  HYDRATION,
+  LView,
+  PARENT,
+  RENDERER,
+  TVIEW,
+} from '../render3/interfaces/view';
 import {nativeRemoveNode} from '../render3/node_manipulation';
 import {EMPTY_ARRAY} from '../util/empty';
 
diff --git a/packages/core/src/hydration/compression.ts b/packages/core/src/hydration/compression.ts
index b61d146cf556a..991bf75b9afb3 100644
--- a/packages/core/src/hydration/compression.ts
+++ b/packages/core/src/hydration/compression.ts
@@ -15,8 +15,9 @@ import {NodeNavigationStep, REFERENCE_NODE_BODY, REFERENCE_NODE_HOST} from './in
  *  - the `b` char which indicates that the lookup should start from the `document.body`
  *  - the `h` char to start lookup from the component host node (`lView[HOST]`)
  */
-const REF_EXTRACTOR_REGEXP =
-    new RegExp(`^(\\d+)*(${REFERENCE_NODE_BODY}|${REFERENCE_NODE_HOST})*(.*)`);
+const REF_EXTRACTOR_REGEXP = new RegExp(
+  `^(\\d+)*(${REFERENCE_NODE_BODY}|${REFERENCE_NODE_HOST})*(.*)`,
+);
 
 /**
  * Helper function that takes a reference node location and a set of navigation steps
@@ -27,7 +28,7 @@ const REF_EXTRACTOR_REGEXP =
  * 'nextSibling'], the function returns: `bf2n`.
  */
 export function compressNodeLocation(referenceNode: string, path: NodeNavigationStep[]): string {
-  const result: Array<string|number> = [referenceNode];
+  const result: Array<string | number> = [referenceNode];
   for (const segment of path) {
     const lastIdx = result.length - 1;
     if (lastIdx > 0 && result[lastIdx - 1] === segment) {
@@ -57,13 +58,14 @@ export function compressNodeLocation(referenceNode: string, path: NodeNavigation
  * This information is later consumed by the code that navigates the DOM to find
  * a given node by its location.
  */
-export function decompressNodeLocation(path: string):
-    [string|number, ...(number | NodeNavigationStep)[]] {
+export function decompressNodeLocation(
+  path: string,
+): [string | number, ...(number | NodeNavigationStep)[]] {
   const matches = path.match(REF_EXTRACTOR_REGEXP)!;
   const [_, refNodeId, refNodeName, rest] = matches;
   // If a reference node is represented by an index, transform it to a number.
   const ref = refNodeId ? parseInt(refNodeId, 10) : refNodeName;
-  const steps: (number|NodeNavigationStep)[] = [];
+  const steps: (number | NodeNavigationStep)[] = [];
   // Match all segments in a path.
   for (const [_, step, count] of rest.matchAll(/(f|n)(\d*)/g)) {
     const repeat = parseInt(count, 10) || 1;
diff --git a/packages/core/src/hydration/error_handling.ts b/packages/core/src/hydration/error_handling.ts
index e75079d49ff4e..a53824544957d 100644
--- a/packages/core/src/hydration/error_handling.ts
+++ b/packages/core/src/hydration/error_handling.ts
@@ -51,12 +51,19 @@ function getFriendlyStringFromTNodeType(tNodeType: TNodeType): string {
  * Validates that provided nodes match during the hydration process.
  */
 export function validateMatchingNode(
-    node: RNode|null, nodeType: number, tagName: string|null, lView: LView, tNode: TNode,
-    isViewContainerAnchor = false): void {
-  if (!node ||
-      ((node as Node).nodeType !== nodeType ||
-       ((node as Node).nodeType === Node.ELEMENT_NODE &&
-        (node as HTMLElement).tagName.toLowerCase() !== tagName?.toLowerCase()))) {
+  node: RNode | null,
+  nodeType: number,
+  tagName: string | null,
+  lView: LView,
+  tNode: TNode,
+  isViewContainerAnchor = false,
+): void {
+  if (
+    !node ||
+    (node as Node).nodeType !== nodeType ||
+    ((node as Node).nodeType === Node.ELEMENT_NODE &&
+      (node as HTMLElement).tagName.toLowerCase() !== tagName?.toLowerCase())
+  ) {
     const expectedNode = shortRNodeDescription(nodeType, tagName, null);
     let header = `During hydration Angular expected ${expectedNode} but `;
 
@@ -76,8 +83,10 @@ export function validateMatchingNode(
       markRNodeAsHavingHydrationMismatch(componentHostElement, expectedDom);
     } else {
       const actualNode = shortRNodeDescription(
-          (node as Node).nodeType, (node as HTMLElement).tagName ?? null,
-          (node as HTMLElement).textContent ?? null);
+        (node as Node).nodeType,
+        (node as HTMLElement).tagName ?? null,
+        (node as HTMLElement).textContent ?? null,
+      );
 
       header += `found ${actualNode}.\n\n`;
       const actualDom = describeDomFromNode(node);
@@ -97,7 +106,7 @@ export function validateMatchingNode(
 /**
  * Validates that a given node has sibling nodes
  */
-export function validateSiblingNodeExists(node: RNode|null): void {
+export function validateSiblingNodeExists(node: RNode | null): void {
   validateNodeExists(node);
   if (!node!.nextSibling) {
     const header = 'During hydration Angular expected more sibling nodes to be present.\n\n';
@@ -115,10 +124,13 @@ export function validateSiblingNodeExists(node: RNode|null): void {
  * Validates that a node exists or throws
  */
 export function validateNodeExists(
-    node: RNode|null, lView: LView|null = null, tNode: TNode|null = null): void {
+  node: RNode | null,
+  lView: LView | null = null,
+  tNode: TNode | null = null,
+): void {
   if (!node) {
     const header =
-        'During hydration, Angular expected an element to be present at this location.\n\n';
+      'During hydration, Angular expected an element to be present at this location.\n\n';
     let expected = '';
     let footer = '';
     if (lView !== null && tNode !== null) {
@@ -130,7 +142,9 @@ export function validateNodeExists(
     }
 
     throw new RuntimeError(
-        RuntimeErrorCode.HYDRATION_MISSING_NODE, `${header}${expected}\n\n${footer}`);
+      RuntimeErrorCode.HYDRATION_MISSING_NODE,
+      `${header}${expected}\n\n${footer}`,
+    );
   }
 }
 
@@ -155,15 +169,15 @@ export function nodeNotFoundError(lView: LView, tNode: TNode): Error {
  * @param path the path to the node
  */
 export function nodeNotFoundAtPathError(host: Node, path: string): Error {
-  const header = `During hydration Angular was unable to locate a node ` +
-      `using the "${path}" path, starting from the ${describeRNode(host)} node.\n\n`;
+  const header =
+    `During hydration Angular was unable to locate a node ` +
+    `using the "${path}" path, starting from the ${describeRNode(host)} node.\n\n`;
   const footer = getHydrationErrorFooter();
 
   markRNodeAsHavingHydrationMismatch(host);
   throw new RuntimeError(RuntimeErrorCode.HYDRATION_MISSING_NODE, header + footer);
 }
 
-
 /**
  * Builds the hydration error message in the case that dom nodes are created outside of
  * the Angular context and are being used as projected nodes
@@ -173,11 +187,12 @@ export function nodeNotFoundAtPathError(host: Node, path: string): Error {
  * @returns an error
  */
 export function unsupportedProjectionOfDomNodes(rNode: RNode): Error {
-  const header = 'During serialization, Angular detected DOM nodes ' +
-      'that were created outside of Angular context and provided as projectable nodes ' +
-      '(likely via `ViewContainerRef.createComponent` or `createComponent` APIs). ' +
-      'Hydration is not supported for such cases, consider refactoring the code to avoid ' +
-      'this pattern or using `ngSkipHydration` on the host element of the component.\n\n';
+  const header =
+    'During serialization, Angular detected DOM nodes ' +
+    'that were created outside of Angular context and provided as projectable nodes ' +
+    '(likely via `ViewContainerRef.createComponent` or `createComponent` APIs). ' +
+    'Hydration is not supported for such cases, consider refactoring the code to avoid ' +
+    'this pattern or using `ngSkipHydration` on the host element of the component.\n\n';
   const actual = `${describeDomFromNode(rNode)}\n\n`;
   const message = header + actual + getHydrationAttributeNote();
   return new RuntimeError(RuntimeErrorCode.UNSUPPORTED_PROJECTION_DOM_NODES, message);
@@ -191,9 +206,10 @@ export function unsupportedProjectionOfDomNodes(rNode: RNode): Error {
  * @returns an error
  */
 export function invalidSkipHydrationHost(rNode: RNode): Error {
-  const header = 'The `ngSkipHydration` flag is applied on a node ' +
-      'that doesn\'t act as a component host. Hydration can be ' +
-      'skipped only on per-component basis.\n\n';
+  const header =
+    'The `ngSkipHydration` flag is applied on a node ' +
+    "that doesn't act as a component host. Hydration can be " +
+    'skipped only on per-component basis.\n\n';
   const actual = `${describeDomFromNode(rNode)}\n\n`;
   const footer = 'Please move the `ngSkipHydration` attribute to the component host element.\n\n';
   const message = header + actual + footer;
@@ -211,7 +227,7 @@ export function invalidSkipHydrationHost(rNode: RNode): Error {
 function stringifyTNodeAttrs(tNode: TNode): string {
   const results = [];
   if (tNode.attrs) {
-    for (let i = 0; i < tNode.attrs.length;) {
+    for (let i = 0; i < tNode.attrs.length; ) {
       const attrName = tNode.attrs[i++];
       // Once we reach the first flag, we know that the list of
       // attributes is over.
@@ -366,7 +382,10 @@ function describeDomFromNode(node: RNode): string {
  * @returns string
  */
 function shortRNodeDescription(
-    nodeType: number, tagName: string|null, textContent: string|null): string {
+  nodeType: number,
+  tagName: string | null,
+  textContent: string | null,
+): string {
   switch (nodeType) {
     case Node.ELEMENT_NODE:
       return `<${tagName!.toLowerCase()}>`;
@@ -380,7 +399,6 @@ function shortRNodeDescription(
   }
 }
 
-
 /**
  * Builds the footer hydration error message
  *
@@ -389,19 +407,23 @@ function shortRNodeDescription(
  */
 function getHydrationErrorFooter(componentClassName?: string): string {
   const componentInfo = componentClassName ? `the "${componentClassName}"` : 'corresponding';
-  return `To fix this problem:\n` +
-      `  * check ${componentInfo} component for hydration-related issues\n` +
-      `  * check to see if your template has valid HTML structure\n` +
-      `  * or skip hydration by adding the \`ngSkipHydration\` attribute ` +
-      `to its host node in a template\n\n`;
+  return (
+    `To fix this problem:\n` +
+    `  * check ${componentInfo} component for hydration-related issues\n` +
+    `  * check to see if your template has valid HTML structure\n` +
+    `  * or skip hydration by adding the \`ngSkipHydration\` attribute ` +
+    `to its host node in a template\n\n`
+  );
 }
 
 /**
  * An attribute related note for hydration errors
  */
 function getHydrationAttributeNote(): string {
-  return 'Note: attributes are only displayed to better represent the DOM' +
-      ' but have no effect on hydration mismatches.\n\n';
+  return (
+    'Note: attributes are only displayed to better represent the DOM' +
+    ' but have no effect on hydration mismatches.\n\n'
+  );
 }
 
 // Node string utility functions
@@ -423,7 +445,7 @@ function stripNewlines(input: string): string {
  * @param maxLength a maximum length in characters
  * @returns string
  */
-function shorten(input: string|null, maxLength = 50): string {
+function shorten(input: string | null, maxLength = 50): string {
   if (!input) {
     return '';
   }
diff --git a/packages/core/src/hydration/event_replay.ts b/packages/core/src/hydration/event_replay.ts
index 6157e25cec9f6..41be1d1d6c44b 100644
--- a/packages/core/src/hydration/event_replay.ts
+++ b/packages/core/src/hydration/event_replay.ts
@@ -6,7 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Dispatcher, EventContract, EventInfoWrapper, registerDispatcher} from '@angular/core/primitives/event-dispatch';
+import {
+  Dispatcher,
+  EventContract,
+  EventInfoWrapper,
+  registerDispatcher,
+} from '@angular/core/primitives/event-dispatch';
 
 import {APP_BOOTSTRAP_LISTENER, ApplicationRef, whenStable} from '../application/application_ref';
 import {APP_ID} from '../application/application_tokens';
@@ -64,10 +69,10 @@ export function withEventReplay(): Provider[] {
             });
           };
         }
-        return () => {};  // noop for the server code
+        return () => {}; // noop for the server code
       },
       multi: true,
-    }
+    },
   ];
 }
 
@@ -76,14 +81,17 @@ export function withEventReplay(): Provider[] {
  * LView. Maps collected events to a corresponding DOM element (an element is used as a key).
  */
 export function collectDomEventsInfo(
-    tView: TView, lView: LView, eventTypesToReplay: Set<string>): Map<Element, string[]> {
+  tView: TView,
+  lView: LView,
+  eventTypesToReplay: Set<string>,
+): Map<Element, string[]> {
   const events = new Map<Element, string[]>();
   const lCleanup = lView[CLEANUP];
   const tCleanup = tView.cleanup;
   if (!tCleanup || !lCleanup) {
     return events;
   }
-  for (let i = 0; i < tCleanup.length;) {
+  for (let i = 0; i < tCleanup.length; ) {
     const firstParam = tCleanup[i++];
     const secondParam = tCleanup[i++];
     if (typeof firstParam !== 'string') {
@@ -92,7 +100,7 @@ export function collectDomEventsInfo(
     const name: string = firstParam;
     eventTypesToReplay.add(name);
     const listenerElement = unwrapRNode(lView[secondParam]) as any as Element;
-    i++;  // move the cursor to the next position (location of the listener idx)
+    i++; // move the cursor to the next position (location of the listener idx)
     const useCaptureOrIndx = tCleanup[i++];
     // if useCaptureOrIndx is boolean then report it as is.
     // if useCaptureOrIndx is positive number then it in unsubscribe method
@@ -111,11 +119,14 @@ export function collectDomEventsInfo(
 }
 
 export function setJSActionAttribute(
-    tNode: TNode, rNode: RNode, nativeElementToEvents: Map<Element, string[]>) {
+  tNode: TNode,
+  rNode: RNode,
+  nativeElementToEvents: Map<Element, string[]>,
+) {
   if (tNode.type & TNodeType.Element) {
     const nativeElement = unwrapRNode(rNode) as Element;
     const events = nativeElementToEvents.get(nativeElement) ?? [];
-    const parts = events.map(event => `${event}:`);
+    const parts = events.map((event) => `${event}:`);
     if (parts.length > 0) {
       nativeElement.setAttribute('jsaction', parts.join(';'));
     }
@@ -126,7 +137,7 @@ export function setJSActionAttribute(
  * Registers a function that should be invoked to replay events.
  */
 function setEventReplayer(dispatcher: Dispatcher) {
-  dispatcher.setEventReplayer(queue => {
+  dispatcher.setEventReplayer((queue) => {
     for (const event of queue) {
       handleEvent(event);
     }
@@ -136,7 +147,7 @@ function setEventReplayer(dispatcher: Dispatcher) {
 /**
  * Finds an LView that a given DOM element belongs to.
  */
-function getLViewByElement(target: HTMLElement): LView|null {
+function getLViewByElement(target: HTMLElement): LView | null {
   let lView = readLView(target);
   if (lView) {
     return lView;
@@ -145,7 +156,7 @@ function getLViewByElement(target: HTMLElement): LView|null {
     // traverse upwards up the DOM to find the nearest element that
     // has already been monkey patched with data.
     let parent = target as HTMLElement;
-    while (parent = parent.parentNode as HTMLElement) {
+    while ((parent = parent.parentNode as HTMLElement)) {
       lView = readLView(parent);
       if (lView) {
         // To prevent additional lookups, monkey-patch LView id onto this DOM node.
@@ -176,21 +187,25 @@ function handleEvent(event: EventInfoWrapper) {
   }
 }
 
-type Listener = ((value: Event) => unknown)|(() => unknown);
+type Listener = ((value: Event) => unknown) | (() => unknown);
 
 function getEventListeners(
-    tView: TView, lView: LView, nativeElement: Element, eventName: string): Listener[] {
+  tView: TView,
+  lView: LView,
+  nativeElement: Element,
+  eventName: string,
+): Listener[] {
   const listeners: Listener[] = [];
   const lCleanup = lView[CLEANUP];
   const tCleanup = tView.cleanup;
   if (tCleanup && lCleanup) {
-    for (let i = 0; i < tCleanup.length;) {
+    for (let i = 0; i < tCleanup.length; ) {
       const storedEventName = tCleanup[i++];
       const nativeElementIndex = tCleanup[i++];
       if (typeof storedEventName === 'string') {
         const listenerElement = unwrapRNode(lView[nativeElementIndex]) as any as Element;
         const listener: Listener = lCleanup[tCleanup[i++]];
-        i++;  // increment to the next position;
+        i++; // increment to the next position;
         if (listenerElement === nativeElement && eventName === storedEventName) {
           listeners.push(listener);
         }
diff --git a/packages/core/src/hydration/i18n.ts b/packages/core/src/hydration/i18n.ts
index 014b965f8b72a..4519007c023b2 100644
--- a/packages/core/src/hydration/i18n.ts
+++ b/packages/core/src/hydration/i18n.ts
@@ -21,7 +21,12 @@ import type {HydrationContext} from './annotate';
 import {DehydratedIcuData, DehydratedView, I18N_DATA} from './interfaces';
 import {locateNextRNode, tryLocateRNodeByPath} from './node_lookup_utils';
 import {IS_I18N_HYDRATION_ENABLED} from './tokens';
-import {getNgContainerSize, initDisconnectedNodes, isSerializedElementContainer, processTextNodeBeforeSerialization} from './utils';
+import {
+  getNgContainerSize,
+  initDisconnectedNodes,
+  isSerializedElementContainer,
+  processTextNodeBeforeSerialization,
+} from './utils';
 
 let _isI18nHydrationSupportEnabled = false;
 
@@ -47,7 +52,11 @@ export function isI18nHydrationSupportEnabled() {
  * @param subTemplateIndex sub-template index, or -1 for the main template
  */
 export function prepareI18nBlockForHydration(
-    lView: LView, index: number, parentTNode: TNode|null, subTemplateIndex: number): void {
+  lView: LView,
+  index: number,
+  parentTNode: TNode | null,
+  subTemplateIndex: number,
+): void {
   _prepareI18nBlockForHydrationImpl(lView, index, parentTNode, subTemplateIndex);
 }
 
@@ -67,8 +76,10 @@ export function isI18nHydrationEnabled(injector?: Injector) {
  * Since i18n blocks don't introduce a parent TNode, this is necessary
  * in order to determine which indices in a LView are translated.
  */
-export function getOrComputeI18nChildren(tView: TView, context: HydrationContext): Set<number>|
-    null {
+export function getOrComputeI18nChildren(
+  tView: TView,
+  context: HydrationContext,
+): Set<number> | null {
   let i18nChildren = context.i18nChildren.get(tView);
   if (i18nChildren === undefined) {
     i18nChildren = collectI18nChildren(tView);
@@ -77,7 +88,7 @@ export function getOrComputeI18nChildren(tView: TView, context: HydrationContext
   return i18nChildren;
 }
 
-function collectI18nChildren(tView: TView): Set<number>|null {
+function collectI18nChildren(tView: TView): Set<number> | null {
   const children = new Set<number>();
 
   function collectI18nViews(node: I18nNode) {
@@ -129,7 +140,10 @@ function collectI18nChildren(tView: TView): Set<number>|null {
  * @returns the i18n data, or null if there is no relevant data
  */
 export function trySerializeI18nBlock(
-    lView: LView, index: number, context: HydrationContext): Array<number>|null {
+  lView: LView,
+  index: number,
+  context: HydrationContext,
+): Array<number> | null {
   if (!context.isI18nHydrationEnabled) {
     return null;
   }
@@ -141,12 +155,16 @@ export function trySerializeI18nBlock(
   }
 
   const caseQueue: number[] = [];
-  tI18n.ast.forEach(node => serializeI18nBlock(lView, caseQueue, context, node));
+  tI18n.ast.forEach((node) => serializeI18nBlock(lView, caseQueue, context, node));
   return caseQueue.length > 0 ? caseQueue : null;
 }
 
 function serializeI18nBlock(
-    lView: LView, caseQueue: number[], context: HydrationContext, node: I18nNode) {
+  lView: LView,
+  caseQueue: number[],
+  context: HydrationContext,
+  node: I18nNode,
+) {
   switch (node.kind) {
     case I18nNodeKind.TEXT:
       const rNode = unwrapRNode(lView[node.index]!);
@@ -155,7 +173,7 @@ function serializeI18nBlock(
 
     case I18nNodeKind.ELEMENT:
     case I18nNodeKind.PLACEHOLDER:
-      node.children.forEach(node => serializeI18nBlock(lView, caseQueue, context, node));
+      node.children.forEach((node) => serializeI18nBlock(lView, caseQueue, context, node));
       break;
 
     case I18nNodeKind.ICU:
@@ -165,7 +183,7 @@ function serializeI18nBlock(
         // need to invert it to get the proper value.
         const caseIdx = currentCase < 0 ? ~currentCase : currentCase;
         caseQueue.push(caseIdx);
-        node.cases[caseIdx].forEach(node => serializeI18nBlock(lView, caseQueue, context, node));
+        node.cases[caseIdx].forEach((node) => serializeI18nBlock(lView, caseQueue, context, node));
       }
       break;
   }
@@ -177,7 +195,7 @@ function serializeI18nBlock(
 interface I18nHydrationContext {
   hydrationInfo: DehydratedView;
   lView: LView;
-  i18nNodes: Map<number, RNode|null>;
+  i18nNodes: Map<number, RNode | null>;
   disconnectedNodes: Set<number>;
   caseQueue: number[];
   dehydratedIcuData: Map<number, DehydratedIcuData>;
@@ -188,7 +206,7 @@ interface I18nHydrationContext {
  */
 interface I18nHydrationState {
   // The current node
-  currentNode: Node|null;
+  currentNode: Node | null;
 
   /**
    * Whether the tree should be connected.
@@ -202,7 +220,7 @@ interface I18nHydrationState {
   isConnected: boolean;
 }
 
-function setCurrentNode(state: I18nHydrationState, node: Node|null) {
+function setCurrentNode(state: I18nHydrationState, node: Node | null) {
   state.currentNode = node;
 }
 
@@ -211,7 +229,10 @@ function setCurrentNode(state: I18nHydrationState, node: Node|null) {
  * AST node.
  */
 function appendI18nNodeToCollection(
-    context: I18nHydrationContext, state: I18nHydrationState, astNode: I18nNode) {
+  context: I18nHydrationContext,
+  state: I18nHydrationState,
+  astNode: I18nNode,
+) {
   const noOffsetIndex = astNode.index - HEADER_OFFSET;
   const {disconnectedNodes} = context;
   const currentNode = state.currentNode;
@@ -252,12 +273,16 @@ function skipSiblingNodes(state: I18nHydrationState, skip: number) {
 /**
  * Fork the given state into a new state for hydrating children.
  */
-function forkHydrationState(state: I18nHydrationState, nextNode: Node|null) {
+function forkHydrationState(state: I18nHydrationState, nextNode: Node | null) {
   return {currentNode: nextNode, isConnected: state.isConnected};
 }
 
 function prepareI18nBlockForHydrationImpl(
-    lView: LView, index: number, parentTNode: TNode|null, subTemplateIndex: number) {
+  lView: LView,
+  index: number,
+  parentTNode: TNode | null,
+  subTemplateIndex: number,
+) {
   if (!isI18nHydrationSupportEnabled()) {
     return;
   }
@@ -270,8 +295,7 @@ function prepareI18nBlockForHydrationImpl(
   const tView = lView[TVIEW];
   const tI18n = tView.data[index] as TI18n;
   ngDevMode &&
-      assertDefined(
-          tI18n, 'Expected i18n data to be present in a given TView slot during hydration');
+    assertDefined(tI18n, 'Expected i18n data to be present in a given TView slot during hydration');
 
   function findHydrationRoot() {
     if (isRootTemplateMessage(subTemplateIndex)) {
@@ -284,7 +308,7 @@ function prepareI18nBlockForHydrationImpl(
       // If this i18n block is attached to an <ng-container>, then we want to begin
       // hydrating directly with the RNode. Otherwise, for a TNode with a physical DOM
       // element, we want to recurse into the first child and begin there.
-      return (parentTNode!.type & TNodeType.ElementContainer) ? rootNode : rootNode.firstChild;
+      return parentTNode!.type & TNodeType.ElementContainer ? rootNode : rootNode.firstChild;
     }
 
     // This is a nested template in an i18n block. In this case, the entire view
@@ -297,14 +321,18 @@ function prepareI18nBlockForHydrationImpl(
   ngDevMode && assertDefined(currentNode, 'Expected root i18n node during hydration');
 
   const disconnectedNodes = initDisconnectedNodes(hydrationInfo) ?? new Set();
-  const i18nNodes = hydrationInfo.i18nNodes ??= new Map<number, RNode|null>();
+  const i18nNodes = (hydrationInfo.i18nNodes ??= new Map<number, RNode | null>());
   const caseQueue = hydrationInfo.data[I18N_DATA]?.[index - HEADER_OFFSET] ?? [];
-  const dehydratedIcuData = hydrationInfo.dehydratedIcuData ??=
-      new Map<number, DehydratedIcuData>();
+  const dehydratedIcuData = (hydrationInfo.dehydratedIcuData ??= new Map<
+    number,
+    DehydratedIcuData
+  >());
 
   collectI18nNodesFromDom(
-      {hydrationInfo, lView, i18nNodes, disconnectedNodes, caseQueue, dehydratedIcuData},
-      {currentNode, isConnected: true}, tI18n.ast);
+    {hydrationInfo, lView, i18nNodes, disconnectedNodes, caseQueue, dehydratedIcuData},
+    {currentNode, isConnected: true},
+    tI18n.ast,
+  );
 
   // Nodes from inactive ICU cases should be considered disconnected. We track them above
   // because they aren't (and shouldn't be) serialized. Since we may mutate or create a
@@ -313,14 +341,20 @@ function prepareI18nBlockForHydrationImpl(
 }
 
 function collectI18nNodesFromDom(
-    context: I18nHydrationContext, state: I18nHydrationState, nodeOrNodes: I18nNode|I18nNode[]) {
+  context: I18nHydrationContext,
+  state: I18nHydrationState,
+  nodeOrNodes: I18nNode | I18nNode[],
+) {
   if (Array.isArray(nodeOrNodes)) {
     for (const node of nodeOrNodes) {
       // If the node is being projected elsewhere, we need to temporarily
       // branch the state to that location to continue hydration.
       // Otherwise, we continue hydration from the current location.
-      const targetNode =
-          tryLocateRNodeByPath(context.hydrationInfo, context.lView, node.index - HEADER_OFFSET);
+      const targetNode = tryLocateRNodeByPath(
+        context.hydrationInfo,
+        context.lView,
+        node.index - HEADER_OFFSET,
+      );
       const nextState = targetNode ? forkHydrationState(state, targetNode as Node) : state;
       collectI18nNodesFromDom(context, nextState, node);
     }
@@ -336,8 +370,10 @@ function collectI18nNodesFromDom(
       case I18nNodeKind.ELEMENT: {
         // Recurse into the current element's children...
         collectI18nNodesFromDom(
-            context, forkHydrationState(state, state.currentNode?.firstChild ?? null),
-            nodeOrNodes.children);
+          context,
+          forkHydrationState(state, state.currentNode?.firstChild ?? null),
+          nodeOrNodes.children,
+        );
 
         // And claim the parent element itself.
         const currentNode = appendI18nNodeToCollection(context, state, nodeOrNodes);
@@ -370,8 +406,10 @@ function collectI18nNodesFromDom(
               // Non-container elements represent an actual node in the DOM, so we
               // need to continue hydration with the children, and claim the node.
               collectI18nNodesFromDom(
-                  context, forkHydrationState(state, state.currentNode?.firstChild ?? null),
-                  nodeOrNodes.children);
+                context,
+                forkHydrationState(state, state.currentNode?.firstChild ?? null),
+                nodeOrNodes.children,
+              );
               setCurrentNode(state, currentNode?.nextSibling ?? null);
 
               // Elements can also be the anchor of a view container, so there may
@@ -387,9 +425,11 @@ function collectI18nNodesFromDom(
 
           case I18nPlaceholderType.SUBTEMPLATE: {
             ngDevMode &&
-                assertNotEqual(
-                    containerSize, null,
-                    'Expected a container size while hydrating i18n subtemplate');
+              assertNotEqual(
+                containerSize,
+                null,
+                'Expected a container size while hydrating i18n subtemplate',
+              );
 
             // Hydration expects to find the head of the template.
             appendI18nNodeToCollection(context, state, nodeOrNodes);
@@ -414,7 +454,10 @@ function collectI18nNodesFromDom(
         // so that we correctly populate disconnected nodes.
         for (let i = 0; i < nodeOrNodes.cases.length; i++) {
           collectI18nNodesFromDom(
-              context, i === selectedCase ? state : childState, nodeOrNodes.cases[i]);
+            context,
+            i === selectedCase ? state : childState,
+            nodeOrNodes.cases[i],
+          );
         }
 
         if (selectedCase !== null) {
@@ -481,7 +524,10 @@ export function cleanupI18nHydrationData(lView: LView) {
 }
 
 function cleanupDehydratedIcuData(
-    renderer: Renderer, i18nNodes: Map<number, RNode|null>, dehydratedIcuData: DehydratedIcuData) {
+  renderer: Renderer,
+  i18nNodes: Map<number, RNode | null>,
+  dehydratedIcuData: DehydratedIcuData,
+) {
   for (const node of dehydratedIcuData.node.cases[dehydratedIcuData.case]) {
     const rNode = i18nNodes.get(node.index - HEADER_OFFSET);
     if (rNode) {
diff --git a/packages/core/src/hydration/interfaces.ts b/packages/core/src/hydration/interfaces.ts
index ebc445cde79a9..dedd988cfadad 100644
--- a/packages/core/src/hydration/interfaces.ts
+++ b/packages/core/src/hydration/interfaces.ts
@@ -9,7 +9,6 @@
 import type {I18nICUNode} from '../render3/interfaces/i18n';
 import {RNode} from '../render3/interfaces/renderer_dom';
 
-
 /** Encodes that the node lookup should start from the host node of this component. */
 export const REFERENCE_NODE_HOST = 'h';
 
@@ -34,7 +33,7 @@ export const TEMPLATES = 't';
 export const CONTAINERS = 'c';
 export const MULTIPLIER = 'x';
 export const NUM_ROOT_NODES = 'r';
-export const TEMPLATE_ID = 'i';  // as it's also an "id"
+export const TEMPLATE_ID = 'i'; // as it's also an "id"
 export const NODES = 'n';
 export const DISCONNECTED_NODES = 'd';
 export const I18N_DATA = 'l';
@@ -155,13 +154,13 @@ export interface DehydratedView {
    * in invoking corresponding DOM actions (attaching DOM nodes action is
    * skipped when we hydrate, since nodes are already in the DOM).
    */
-  firstChild: RNode|null;
+  firstChild: RNode | null;
 
   /**
    * Stores references to first nodes in DOM segments that
    * represent either an <ng-container> or a view container.
    */
-  segmentHeads?: {[index: number]: RNode|null};
+  segmentHeads?: {[index: number]: RNode | null};
 
   /**
    * An instance of a Set that represents nodes disconnected from
@@ -174,7 +173,7 @@ export interface DehydratedView {
    * If the value is `null`, it means that there were no disconnected
    * nodes detected in this view at serialization time.
    */
-  disconnectedNodes?: Set<number>|null;
+  disconnectedNodes?: Set<number> | null;
 
   /**
    * A mapping from a view to the first child to begin claiming nodes.
@@ -182,7 +181,7 @@ export interface DehydratedView {
    * This mapping is generated by an i18n block, and is the source of
    * truth for the nodes inside of it.
    */
-  i18nNodes?: Map<number, RNode|null>;
+  i18nNodes?: Map<number, RNode | null>;
 
   /**
    * A mapping from the index of an ICU node to dehydrated data for it.
diff --git a/packages/core/src/hydration/node_lookup_utils.ts b/packages/core/src/hydration/node_lookup_utils.ts
index 4e525edd8acdc..12254e7648685 100644
--- a/packages/core/src/hydration/node_lookup_utils.ts
+++ b/packages/core/src/hydration/node_lookup_utils.ts
@@ -8,7 +8,13 @@
 
 import {TNode, TNodeType} from '../render3/interfaces/node';
 import {RElement, RNode} from '../render3/interfaces/renderer_dom';
-import {DECLARATION_COMPONENT_VIEW, HEADER_OFFSET, HOST, LView, TView} from '../render3/interfaces/view';
+import {
+  DECLARATION_COMPONENT_VIEW,
+  HEADER_OFFSET,
+  HOST,
+  LView,
+  TView,
+} from '../render3/interfaces/view';
 import {getFirstNativeNode} from '../render3/node_manipulation';
 import {ɵɵresolveBody} from '../render3/util/misc_utils';
 import {renderStringify} from '../render3/util/stringify_utils';
@@ -16,11 +22,20 @@ import {getNativeByTNode, unwrapRNode} from '../render3/util/view_utils';
 import {assertDefined} from '../util/assert';
 
 import {compressNodeLocation, decompressNodeLocation} from './compression';
-import {nodeNotFoundAtPathError, nodeNotFoundError, validateSiblingNodeExists} from './error_handling';
-import {DehydratedView, NodeNavigationStep, NODES, REFERENCE_NODE_BODY, REFERENCE_NODE_HOST} from './interfaces';
+import {
+  nodeNotFoundAtPathError,
+  nodeNotFoundError,
+  validateSiblingNodeExists,
+} from './error_handling';
+import {
+  DehydratedView,
+  NodeNavigationStep,
+  NODES,
+  REFERENCE_NODE_BODY,
+  REFERENCE_NODE_HOST,
+} from './interfaces';
 import {calcSerializedContainerSize, getSegmentHead} from './utils';
 
-
 /** Whether current TNode is a first node in an <ng-container>. */
 function isFirstElementInNgContainer(tNode: TNode): boolean {
   return !tNode.prev && tNode.parent?.type === TNodeType.ElementContainer;
@@ -39,8 +54,11 @@ function getNoOffsetIndex(tNode: TNode): number {
  * only use internal data structures and state to compute this information.
  */
 export function isDisconnectedNode(tNode: TNode, lView: LView) {
-  return !(tNode.type & TNodeType.Projection) && !!lView[tNode.index] &&
-      !(unwrapRNode(lView[tNode.index]) as Node)?.isConnected;
+  return (
+    !(tNode.type & TNodeType.Projection) &&
+    !!lView[tNode.index] &&
+    !(unwrapRNode(lView[tNode.index]) as Node)?.isConnected
+  );
 }
 
 /**
@@ -51,7 +69,9 @@ export function isDisconnectedNode(tNode: TNode, lView: LView) {
  * @returns an RNode that corresponds to the instruction index
  */
 export function locateI18nRNodeByIndex<T extends RNode>(
-    hydrationInfo: DehydratedView, noOffsetIndex: number): T|null|undefined {
+  hydrationInfo: DehydratedView,
+  noOffsetIndex: number,
+): T | null | undefined {
   const i18nNodes = hydrationInfo.i18nNodes;
   if (i18nNodes) {
     return i18nNodes.get(noOffsetIndex) as T | null | undefined;
@@ -68,7 +88,10 @@ export function locateI18nRNodeByIndex<T extends RNode>(
  * @returns an RNode that corresponds to the instruction index or null if no path exists
  */
 export function tryLocateRNodeByPath(
-    hydrationInfo: DehydratedView, lView: LView<unknown>, noOffsetIndex: number): RNode|null {
+  hydrationInfo: DehydratedView,
+  lView: LView<unknown>,
+  noOffsetIndex: number,
+): RNode | null {
   const nodes = hydrationInfo.data[NODES];
   const path = nodes?.[noOffsetIndex];
   return path ? locateRNodeByPath(path, lView) : null;
@@ -84,7 +107,11 @@ export function tryLocateRNodeByPath(
  * @returns an RNode that represents a given tNode
  */
 export function locateNextRNode<T extends RNode>(
-    hydrationInfo: DehydratedView, tView: TView, lView: LView<unknown>, tNode: TNode): T|null {
+  hydrationInfo: DehydratedView,
+  tView: TView,
+  lView: LView<unknown>,
+  tNode: TNode,
+): T | null {
   const noOffsetIndex = getNoOffsetIndex(tNode);
   let native = locateI18nRNodeByIndex(hydrationInfo, noOffsetIndex);
 
@@ -102,10 +129,11 @@ export function locateNextRNode<T extends RNode>(
       const previousTNodeParent = tNode.prev === null;
       const previousTNode = (tNode.prev ?? tNode.parent)!;
       ngDevMode &&
-          assertDefined(
-              previousTNode,
-              'Unexpected state: current TNode does not have a connection ' +
-                  'to the previous node or a parent node.');
+        assertDefined(
+          previousTNode,
+          'Unexpected state: current TNode does not have a connection ' +
+            'to the previous node or a parent node.',
+        );
       if (isFirstElementInNgContainer(tNode)) {
         const noOffsetParentIndex = getNoOffsetIndex(tNode.parent!);
         native = getSegmentHead(hydrationInfo, noOffsetParentIndex);
@@ -122,8 +150,10 @@ export function locateNextRNode<T extends RNode>(
           const noOffsetPrevSiblingIndex = getNoOffsetIndex(previousTNode);
           const segmentHead = getSegmentHead(hydrationInfo, noOffsetPrevSiblingIndex);
           if (previousTNode.type === TNodeType.Element && segmentHead) {
-            const numRootNodesToSkip =
-                calcSerializedContainerSize(hydrationInfo, noOffsetPrevSiblingIndex);
+            const numRootNodesToSkip = calcSerializedContainerSize(
+              hydrationInfo,
+              noOffsetPrevSiblingIndex,
+            );
             // `+1` stands for an anchor comment node after all the views in this container.
             const nodesToSkip = numRootNodesToSkip + 1;
             // First node after this segment.
@@ -141,7 +171,7 @@ export function locateNextRNode<T extends RNode>(
 /**
  * Skips over a specified number of nodes and returns the next sibling node after that.
  */
-export function siblingAfter<T extends RNode>(skip: number, from: RNode): T|null {
+export function siblingAfter<T extends RNode>(skip: number, from: RNode): T | null {
   let currentNode = from;
   for (let i = 0; i < skip; i++) {
     ngDevMode && validateSiblingNodeExists(currentNode);
@@ -155,7 +185,7 @@ export function siblingAfter<T extends RNode>(skip: number, from: RNode): T|null
  * (in terms of `nextSibling` and `firstChild` navigations). Used in error
  * messages in dev mode.
  */
-function stringifyNavigationInstructions(instructions: (number|NodeNavigationStep)[]): string {
+function stringifyNavigationInstructions(instructions: (number | NodeNavigationStep)[]): string {
   const container = [];
   for (let i = 0; i < instructions.length; i += 2) {
     const step = instructions[i];
@@ -171,7 +201,7 @@ function stringifyNavigationInstructions(instructions: (number|NodeNavigationSte
  * Helper function that navigates from a starting point node (the `from` node)
  * using provided set of navigation instructions (within `path` argument).
  */
-function navigateToNode(from: Node, instructions: (number|NodeNavigationStep)[]): RNode {
+function navigateToNode(from: Node, instructions: (number | NodeNavigationStep)[]): RNode {
   let node = from;
   for (let i = 0; i < instructions.length; i += 2) {
     const step = instructions[i];
@@ -207,7 +237,8 @@ function locateRNodeByPath(path: string, lView: LView): RNode {
     ref = lView[DECLARATION_COMPONENT_VIEW][HOST] as unknown as Element;
   } else if (referenceNode === REFERENCE_NODE_BODY) {
     ref = ɵɵresolveBody(
-        lView[DECLARATION_COMPONENT_VIEW][HOST] as RElement & {ownerDocument: Document});
+      lView[DECLARATION_COMPONENT_VIEW][HOST] as RElement & {ownerDocument: Document},
+    );
   } else {
     const parentElementId = Number(referenceNode);
     ref = unwrapRNode((lView as any)[parentElementId + HEADER_OFFSET]) as Element;
@@ -222,7 +253,7 @@ function locateRNodeByPath(path: string, lView: LView): RNode {
  * tree. That is, we should be able to get from `start` to `finish` purely by using `.firstChild`
  * and `.nextSibling` operations.
  */
-export function navigateBetween(start: Node, finish: Node): NodeNavigationStep[]|null {
+export function navigateBetween(start: Node, finish: Node): NodeNavigationStep[] | null {
   if (start === finish) {
     return [];
   } else if (start.parentElement == null || finish.parentElement == null) {
@@ -252,9 +283,9 @@ export function navigateBetween(start: Node, finish: Node): NodeNavigationStep[]
  * Calculates a path between 2 sibling nodes (generates a number of `NextSibling` navigations).
  * Returns `null` if no such path exists between the given nodes.
  */
-function navigateBetweenSiblings(start: Node, finish: Node): NodeNavigationStep[]|null {
+function navigateBetweenSiblings(start: Node, finish: Node): NodeNavigationStep[] | null {
   const nav: NodeNavigationStep[] = [];
-  let node: Node|null = null;
+  let node: Node | null = null;
   for (node = start; node != null && node !== finish; node = node.nextSibling) {
     nav.push(NodeNavigationStep.NextSibling);
   }
@@ -272,7 +303,7 @@ function navigateBetweenSiblings(start: Node, finish: Node): NodeNavigationStep[
  * - the `to` node is a node that the runtime logic would be looking up,
  *   using the path generated by this function.
  */
-export function calcPathBetween(from: Node, to: Node, fromNodeName: string): string|null {
+export function calcPathBetween(from: Node, to: Node, fromNodeName: string): string | null {
   const path = navigateBetween(from, to);
   return path === null ? null : compressNodeLocation(fromNodeName, path);
 }
@@ -282,9 +313,12 @@ export function calcPathBetween(from: Node, to: Node, fromNodeName: string): str
  * instructions needs to be generated for a TNode.
  */
 export function calcPathForNode(
-    tNode: TNode, lView: LView, excludedParentNodes: Set<number>|null): string {
+  tNode: TNode,
+  lView: LView,
+  excludedParentNodes: Set<number> | null,
+): string {
   let parentTNode = tNode.parent;
-  let parentIndex: number|string;
+  let parentIndex: number | string;
   let parentRNode: RNode;
   let referenceNodeName: string;
 
@@ -300,8 +334,9 @@ export function calcPathForNode(
   // because it belongs to an i18n block, which requires paths which aren't
   // relative to other views in an i18n block.
   while (
-      parentTNode !== null &&
-      (isDisconnectedNode(parentTNode, lView) || (excludedParentNodes?.has(parentTNode.index)))) {
+    parentTNode !== null &&
+    (isDisconnectedNode(parentTNode, lView) || excludedParentNodes?.has(parentTNode.index))
+  ) {
     parentTNode = parentTNode.parent;
   }
 
@@ -331,7 +366,7 @@ export function calcPathForNode(
       rNode = firstRNode;
     }
   }
-  let path: string|null = calcPathBetween(parentRNode as Node, rNode as Node, referenceNodeName);
+  let path: string | null = calcPathBetween(parentRNode as Node, rNode as Node, referenceNodeName);
   if (path === null && parentRNode !== rNode) {
     // Searching for a path between elements within a host node failed.
     // Trying to find a path to an element starting from the `document.body` instead.
diff --git a/packages/core/src/hydration/skip_hydration.ts b/packages/core/src/hydration/skip_hydration.ts
index c131ff4860b69..184dfdb6544ff 100644
--- a/packages/core/src/hydration/skip_hydration.ts
+++ b/packages/core/src/hydration/skip_hydration.ts
@@ -61,7 +61,7 @@ export function isInSkipHydrationBlock(tNode: TNode): boolean {
   if (hasInSkipHydrationBlockFlag(tNode)) {
     return true;
   }
-  let currentTNode: TNode|null = tNode.parent;
+  let currentTNode: TNode | null = tNode.parent;
   while (currentTNode) {
     if (hasInSkipHydrationBlockFlag(tNode) || hasSkipHydrationAttrOnTNode(currentTNode)) {
       return true;
diff --git a/packages/core/src/hydration/tokens.ts b/packages/core/src/hydration/tokens.ts
index 42e7999699a92..7dad4fc0cbce9 100644
--- a/packages/core/src/hydration/tokens.ts
+++ b/packages/core/src/hydration/tokens.ts
@@ -13,7 +13,8 @@ import {InjectionToken} from '../di/injection_token';
  * during hydration is enabled.
  */
 export const IS_HYDRATION_DOM_REUSE_ENABLED = new InjectionToken<boolean>(
-    (typeof ngDevMode === 'undefined' || !!ngDevMode) ? 'IS_HYDRATION_DOM_REUSE_ENABLED' : '');
+  typeof ngDevMode === 'undefined' || !!ngDevMode ? 'IS_HYDRATION_DOM_REUSE_ENABLED' : '',
+);
 
 // By default (in client rendering mode), we remove all the contents
 // of the host element and render an application after that.
@@ -24,21 +25,25 @@ export const PRESERVE_HOST_CONTENT_DEFAULT = false;
  * retained during the bootstrap.
  */
 export const PRESERVE_HOST_CONTENT = new InjectionToken<boolean>(
-    (typeof ngDevMode === 'undefined' || !!ngDevMode) ? 'PRESERVE_HOST_CONTENT' : '', {
-      providedIn: 'root',
-      factory: () => PRESERVE_HOST_CONTENT_DEFAULT,
-    });
+  typeof ngDevMode === 'undefined' || !!ngDevMode ? 'PRESERVE_HOST_CONTENT' : '',
+  {
+    providedIn: 'root',
+    factory: () => PRESERVE_HOST_CONTENT_DEFAULT,
+  },
+);
 
 /**
  * Internal token that indicates whether hydration support for i18n
  * is enabled.
  */
 export const IS_I18N_HYDRATION_ENABLED = new InjectionToken<boolean>(
-    (typeof ngDevMode === 'undefined' || !!ngDevMode ? 'IS_I18N_HYDRATION_ENABLED' : ''));
+  typeof ngDevMode === 'undefined' || !!ngDevMode ? 'IS_I18N_HYDRATION_ENABLED' : '',
+);
 
 /**
  * Internal token that indicates whether event replay support for SSR
  * is enabled.
  */
 export const IS_EVENT_REPLAY_ENABLED = new InjectionToken<boolean>(
-    (typeof ngDevMode === 'undefined' || !!ngDevMode ? 'IS_EVENT_REPLAY_ENABLED' : ''));
+  typeof ngDevMode === 'undefined' || !!ngDevMode ? 'IS_EVENT_REPLAY_ENABLED' : '',
+);
diff --git a/packages/core/src/hydration/utils.ts b/packages/core/src/hydration/utils.ts
index 46c7ef20383ef..66a3ae210d977 100644
--- a/packages/core/src/hydration/utils.ts
+++ b/packages/core/src/hydration/utils.ts
@@ -18,7 +18,17 @@ import {makeStateKey, TransferState} from '../transfer_state';
 import {assertDefined} from '../util/assert';
 import type {HydrationContext} from './annotate';
 
-import {CONTAINERS, DehydratedView, DISCONNECTED_NODES, ELEMENT_CONTAINERS, MULTIPLIER, NUM_ROOT_NODES, SerializedContainerView, SerializedElementContainers, SerializedView,} from './interfaces';
+import {
+  CONTAINERS,
+  DehydratedView,
+  DISCONNECTED_NODES,
+  ELEMENT_CONTAINERS,
+  MULTIPLIER,
+  NUM_ROOT_NODES,
+  SerializedContainerView,
+  SerializedElementContainers,
+  SerializedView,
+} from './interfaces';
 
 /**
  * The name of the key used in the TransferState collection,
@@ -75,10 +85,10 @@ export const enum TextNodeMarker {
 let _retrieveHydrationInfoImpl: typeof retrieveHydrationInfoImpl = () => null;
 
 export function retrieveHydrationInfoImpl(
-    rNode: RElement,
-    injector: Injector,
-    isRootView = false,
-    ): DehydratedView|null {
+  rNode: RElement,
+  injector: Injector,
+  isRootView = false,
+): DehydratedView | null {
   let nghAttrValue = rNode.getAttribute(NGH_ATTR_NAME);
   if (nghAttrValue == null) return null;
 
@@ -171,10 +181,10 @@ export function enableRetrieveHydrationInfoImpl() {
  * and accessing a corresponding slot in TransferState storage.
  */
 export function retrieveHydrationInfo(
-    rNode: RElement,
-    injector: Injector,
-    isRootView = false,
-    ): DehydratedView|null {
+  rNode: RElement,
+  injector: Injector,
+  isRootView = false,
+): DehydratedView | null {
   return _retrieveHydrationInfoImpl(rNode, injector, isRootView);
 }
 
@@ -184,7 +194,7 @@ export function retrieveHydrationInfo(
  *  - an LContainer for cases when component acts as a ViewContainerRef anchor
  *  - `null` in case of an embedded view
  */
-export function getLNodeForHydration(viewRef: ViewRef): LView|LContainer|null {
+export function getLNodeForHydration(viewRef: ViewRef): LView | LContainer | null {
   // Reading an internal field from `ViewRef` instance.
   let lView = (viewRef as any)._lView as LView;
   const tView = lView[TVIEW];
@@ -202,7 +212,7 @@ export function getLNodeForHydration(viewRef: ViewRef): LView|LContainer|null {
   return lView;
 }
 
-function getTextNodeContent(node: Node): string|undefined {
+function getTextNodeContent(node: Node): string | undefined {
   return node.textContent?.replace(/\s/gm, '');
 }
 
@@ -221,7 +231,7 @@ export function processTextNodeMarkersBeforeHydration(node: HTMLElement) {
     acceptNode(node) {
       const content = getTextNodeContent(node);
       const isTextNodeMarker =
-          content === TextNodeMarker.EmptyNode || content === TextNodeMarker.Separator;
+        content === TextNodeMarker.EmptyNode || content === TextNodeMarker.Separator;
       return isTextNodeMarker ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
     },
   });
@@ -255,13 +265,15 @@ export enum HydrationStatus {
 }
 
 // clang-format off
-export type HydrationInfo = {
-  status: HydrationStatus.Hydrated|HydrationStatus.Skipped;
-}|{
-  status: HydrationStatus.Mismatched;
-  actualNodeDetails: string|null;
-  expectedNodeDetails: string|null
-};
+export type HydrationInfo =
+  | {
+      status: HydrationStatus.Hydrated | HydrationStatus.Skipped;
+    }
+  | {
+      status: HydrationStatus.Mismatched;
+      actualNodeDetails: string | null;
+      expectedNodeDetails: string | null;
+    };
 // clang-format on
 
 const HYDRATION_INFO_KEY = '__ngDebugHydrationInfo__';
@@ -274,7 +286,7 @@ function patchHydrationInfo(node: RNode, info: HydrationInfo) {
   (node as HydratedNode)[HYDRATION_INFO_KEY] = info;
 }
 
-export function readHydrationInfo(node: RNode): HydrationInfo|null {
+export function readHydrationInfo(node: RNode): HydrationInfo | null {
   return (node as HydratedNode)[HYDRATION_INFO_KEY] ?? null;
 }
 
@@ -286,8 +298,8 @@ export function readHydrationInfo(node: RNode): HydrationInfo|null {
 export function markRNodeAsClaimedByHydration(node: RNode, checkIfAlreadyClaimed = true) {
   if (!ngDevMode) {
     throw new Error(
-        'Calling `markRNodeAsClaimedByHydration` in prod mode ' +
-            'is not supported and likely a mistake.',
+      'Calling `markRNodeAsClaimedByHydration` in prod mode ' +
+        'is not supported and likely a mistake.',
     );
   }
   if (checkIfAlreadyClaimed && isRNodeClaimedForHydration(node)) {
@@ -300,8 +312,8 @@ export function markRNodeAsClaimedByHydration(node: RNode, checkIfAlreadyClaimed
 export function markRNodeAsSkippedByHydration(node: RNode) {
   if (!ngDevMode) {
     throw new Error(
-        'Calling `markRNodeAsSkippedByHydration` in prod mode ' +
-            'is not supported and likely a mistake.',
+      'Calling `markRNodeAsSkippedByHydration` in prod mode ' +
+        'is not supported and likely a mistake.',
     );
   }
   patchHydrationInfo(node, {status: HydrationStatus.Skipped});
@@ -309,14 +321,14 @@ export function markRNodeAsSkippedByHydration(node: RNode) {
 }
 
 export function markRNodeAsHavingHydrationMismatch(
-    node: RNode,
-    expectedNodeDetails: string|null = null,
-    actualNodeDetails: string|null = null,
+  node: RNode,
+  expectedNodeDetails: string | null = null,
+  actualNodeDetails: string | null = null,
 ) {
   if (!ngDevMode) {
     throw new Error(
-        'Calling `markRNodeAsMismatchedByHydration` in prod mode ' +
-            'is not supported and likely a mistake.',
+      'Calling `markRNodeAsMismatchedByHydration` in prod mode ' +
+        'is not supported and likely a mistake.',
     );
   }
 
@@ -341,15 +353,15 @@ export function isRNodeClaimedForHydration(node: RNode): boolean {
 }
 
 export function setSegmentHead(
-    hydrationInfo: DehydratedView,
-    index: number,
-    node: RNode|null,
-    ): void {
+  hydrationInfo: DehydratedView,
+  index: number,
+  node: RNode | null,
+): void {
   hydrationInfo.segmentHeads ??= {};
   hydrationInfo.segmentHeads[index] = node;
 }
 
-export function getSegmentHead(hydrationInfo: DehydratedView, index: number): RNode|null {
+export function getSegmentHead(hydrationInfo: DehydratedView, index: number): RNode | null {
   return hydrationInfo.segmentHeads?.[index] ?? null;
 }
 
@@ -360,7 +372,7 @@ export function getSegmentHead(hydrationInfo: DehydratedView, index: number): RN
  * container (in case this `<ng-container>` was also used as a view
  * container host node, e.g. <ng-container *ngIf>).
  */
-export function getNgContainerSize(hydrationInfo: DehydratedView, index: number): number|null {
+export function getNgContainerSize(hydrationInfo: DehydratedView, index: number): number | null {
   const data = hydrationInfo.data;
   let size = data[ELEMENT_CONTAINERS]?.[index] ?? null;
   // If there is no serialized information available in the `ELEMENT_CONTAINERS` slot,
@@ -374,14 +386,16 @@ export function getNgContainerSize(hydrationInfo: DehydratedView, index: number)
 }
 
 export function isSerializedElementContainer(
-    hydrationInfo: DehydratedView, index: number): boolean {
+  hydrationInfo: DehydratedView,
+  index: number,
+): boolean {
   return hydrationInfo.data[ELEMENT_CONTAINERS]?.[index] !== undefined;
 }
 
 export function getSerializedContainerViews(
-    hydrationInfo: DehydratedView,
-    index: number,
-    ): SerializedContainerView[]|null {
+  hydrationInfo: DehydratedView,
+  index: number,
+): SerializedContainerView[] | null {
   return hydrationInfo.data[CONTAINERS]?.[index] ?? null;
 }
 
@@ -402,7 +416,7 @@ export function calcSerializedContainerSize(hydrationInfo: DehydratedView, index
  * Attempt to initialize the `disconnectedNodes` field of the given
  * `DehydratedView`. Returns the initialized value.
  */
-export function initDisconnectedNodes(hydrationInfo: DehydratedView): Set<number>|null {
+export function initDisconnectedNodes(hydrationInfo: DehydratedView): Set<number> | null {
   // Check if we are processing disconnected info for the first time.
   if (typeof hydrationInfo.disconnectedNodes === 'undefined') {
     const nodeIds = hydrationInfo.data[DISCONNECTED_NODES];
diff --git a/packages/core/src/hydration/views.ts b/packages/core/src/hydration/views.ts
index ad440dbb08c34..33a2eb16ade0e 100644
--- a/packages/core/src/hydration/views.ts
+++ b/packages/core/src/hydration/views.ts
@@ -10,18 +10,24 @@ import {DEHYDRATED_VIEWS, LContainer} from '../render3/interfaces/container';
 import {RNode} from '../render3/interfaces/renderer_dom';
 
 import {removeDehydratedViews} from './cleanup';
-import {DehydratedContainerView, MULTIPLIER, NUM_ROOT_NODES, SerializedContainerView, TEMPLATE_ID} from './interfaces';
+import {
+  DehydratedContainerView,
+  MULTIPLIER,
+  NUM_ROOT_NODES,
+  SerializedContainerView,
+  TEMPLATE_ID,
+} from './interfaces';
 import {siblingAfter} from './node_lookup_utils';
 
-
 /**
  * Given a current DOM node and a serialized information about the views
  * in a container, walks over the DOM structure, collecting the list of
  * dehydrated views.
  */
 export function locateDehydratedViewsInContainer(
-    currentRNode: RNode,
-    serializedViews: SerializedContainerView[]): [RNode, DehydratedContainerView[]] {
+  currentRNode: RNode,
+  serializedViews: SerializedContainerView[],
+): [RNode, DehydratedContainerView[]] {
   const dehydratedViews: DehydratedContainerView[] = [];
   for (const serializedView of serializedViews) {
     // Repeats a view multiple times as needed, based on the serialized information
@@ -65,7 +71,9 @@ let _findMatchingDehydratedViewImpl: typeof findMatchingDehydratedViewImpl = ()
  * in this container.
  */
 function findMatchingDehydratedViewImpl(
-    lContainer: LContainer, template: string|null): DehydratedContainerView|null {
+  lContainer: LContainer,
+  template: string | null,
+): DehydratedContainerView | null {
   const views = lContainer[DEHYDRATED_VIEWS];
   if (!template || views === null || views.length === 0) {
     return null;
@@ -92,6 +100,8 @@ export function enableFindMatchingDehydratedViewImpl() {
 }
 
 export function findMatchingDehydratedView(
-    lContainer: LContainer, template: string|null): DehydratedContainerView|null {
+  lContainer: LContainer,
+  template: string | null,
+): DehydratedContainerView | null {
   return _findMatchingDehydratedViewImpl(lContainer, template);
 }
diff --git a/packages/core/src/i18n/locale_data_api.ts b/packages/core/src/i18n/locale_data_api.ts
index 31edd75bd4b70..3d1ecc0ff1465 100644
--- a/packages/core/src/i18n/locale_data_api.ts
+++ b/packages/core/src/i18n/locale_data_api.ts
@@ -22,7 +22,7 @@ let LOCALE_DATA: {[localeId: string]: any} = {};
  *
  * The signature `registerLocaleData(data: any, extraData?: any)` is deprecated since v5.1
  */
-export function registerLocaleData(data: any, localeId?: string|any, extraData?: any): void {
+export function registerLocaleData(data: any, localeId?: string | any, extraData?: any): void {
   if (typeof localeId !== 'string') {
     extraData = localeId;
     localeId = data[LocaleDataIndex.LocaleId];
@@ -64,8 +64,9 @@ export function findLocaleData(locale: string): any {
   }
 
   throw new RuntimeError(
-      RuntimeErrorCode.MISSING_LOCALE_DATA,
-      ngDevMode && `Missing locale data for the locale "${locale}".`);
+    RuntimeErrorCode.MISSING_LOCALE_DATA,
+    ngDevMode && `Missing locale data for the locale "${locale}".`,
+  );
 }
 
 /**
@@ -77,7 +78,7 @@ export function findLocaleData(locale: string): any {
  * @returns The code of the default currency for the given locale.
  *
  */
-export function getLocaleCurrencyCode(locale: string): string|null {
+export function getLocaleCurrencyCode(locale: string): string | null {
   const data = findLocaleData(locale);
   return data[LocaleDataIndex.CurrencyCode] || null;
 }
@@ -95,16 +96,17 @@ export function getLocalePluralCase(locale: string): (value: number) => number {
   return data[LocaleDataIndex.PluralCase];
 }
 
-
-
 /**
  * Helper function to get the given `normalizedLocale` from `LOCALE_DATA`
  * or from the global `ng.common.locale`.
  */
 export function getLocaleData(normalizedLocale: string): any {
   if (!(normalizedLocale in LOCALE_DATA)) {
-    LOCALE_DATA[normalizedLocale] = global.ng && global.ng.common && global.ng.common.locales &&
-        global.ng.common.locales[normalizedLocale];
+    LOCALE_DATA[normalizedLocale] =
+      global.ng &&
+      global.ng.common &&
+      global.ng.common.locales &&
+      global.ng.common.locales[normalizedLocale];
   }
   return LOCALE_DATA[normalizedLocale];
 }
@@ -141,7 +143,7 @@ export enum LocaleDataIndex {
   Currencies,
   Directionality,
   PluralCase,
-  ExtraData
+  ExtraData,
 }
 
 /**
@@ -150,7 +152,7 @@ export enum LocaleDataIndex {
 export const enum ExtraLocaleDataIndex {
   ExtraDayPeriodFormats = 0,
   ExtraDayPeriodStandalone,
-  ExtraDayPeriodsRules
+  ExtraDayPeriodsRules,
 }
 
 /**
@@ -159,7 +161,7 @@ export const enum ExtraLocaleDataIndex {
 export const enum CurrencyIndex {
   Symbol = 0,
   SymbolNarrow,
-  NbOfDigits
+  NbOfDigits,
 }
 
 /**
diff --git a/packages/core/src/i18n/localization.ts b/packages/core/src/i18n/localization.ts
index 7cd40545368f3..d4c49a2e84246 100644
--- a/packages/core/src/i18n/localization.ts
+++ b/packages/core/src/i18n/localization.ts
@@ -16,7 +16,7 @@ const pluralMapping = ['zero', 'one', 'two', 'few', 'many'];
 export function getPluralCase(value: string, locale: string): string {
   const plural = getLocalePluralCase(locale)(parseInt(value, 10));
   const result = pluralMapping[plural];
-  return (result !== undefined) ? result : 'other';
+  return result !== undefined ? result : 'other';
 }
 
 /**
diff --git a/packages/core/src/i18n/tokens.ts b/packages/core/src/i18n/tokens.ts
index 009ead56d1ce5..0f743907643d4 100644
--- a/packages/core/src/i18n/tokens.ts
+++ b/packages/core/src/i18n/tokens.ts
@@ -21,8 +21,12 @@ declare const $localize: {locale?: string};
  * * Ivy enabled: use `$localize.locale`
  */
 export function getGlobalLocale(): string {
-  if (typeof ngI18nClosureMode !== 'undefined' && ngI18nClosureMode &&
-      typeof goog !== 'undefined' && goog.LOCALE !== 'en') {
+  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.
@@ -66,7 +70,7 @@ export function getGlobalLocale(): string {
 export const LOCALE_ID: InjectionToken<string> = new InjectionToken(ngDevMode ? 'LocaleId' : '', {
   providedIn: 'root',
   factory: () =>
-      inject(LOCALE_ID, InjectFlags.Optional | InjectFlags.SkipSelf) || getGlobalLocale(),
+    inject(LOCALE_ID, InjectFlags.Optional | InjectFlags.SkipSelf) || getGlobalLocale(),
 });
 
 /**
@@ -107,11 +111,13 @@ export const LOCALE_ID: InjectionToken<string> = new InjectionToken(ngDevMode ?
  *
  * @publicApi
  */
-export const DEFAULT_CURRENCY_CODE =
-    new InjectionToken<string>(ngDevMode ? 'DefaultCurrencyCode' : '', {
-      providedIn: 'root',
-      factory: () => USD_CURRENCY_CODE,
-    });
+export const DEFAULT_CURRENCY_CODE = new InjectionToken<string>(
+  ngDevMode ? 'DefaultCurrencyCode' : '',
+  {
+    providedIn: 'root',
+    factory: () => USD_CURRENCY_CODE,
+  },
+);
 
 /**
  * Use this token at bootstrap to provide the content of your translation file (`xtb`,
@@ -160,8 +166,9 @@ export const TRANSLATIONS = new InjectionToken<string>(ngDevMode ? 'Translations
  *
  * @publicApi
  */
-export const TRANSLATIONS_FORMAT =
-    new InjectionToken<string>(ngDevMode ? 'TranslationsFormat' : '');
+export const TRANSLATIONS_FORMAT = new InjectionToken<string>(
+  ngDevMode ? 'TranslationsFormat' : '',
+);
 
 /**
  * Use this enum at bootstrap as an option of `bootstrapModule` to define the strategy
diff --git a/packages/core/src/image_performance_warning.ts b/packages/core/src/image_performance_warning.ts
index e79ce2a69ed1e..ab4a783f12926 100644
--- a/packages/core/src/image_performance_warning.ts
+++ b/packages/core/src/image_performance_warning.ts
@@ -25,15 +25,17 @@ const OVERSIZED_IMAGE_TOLERANCE = 1200;
 @Injectable({providedIn: 'root'})
 export class ImagePerformanceWarning implements OnDestroy {
   // Map of full image URLs -> original `ngSrc` values.
-  private window: Window|null = null;
-  private observer: PerformanceObserver|null = null;
+  private window: Window | null = null;
+  private observer: PerformanceObserver | null = null;
   private options: ImageConfig = inject(IMAGE_CONFIG);
   private ngZone = inject(NgZone);
   private lcpImageUrl?: string;
 
   public start() {
-    if (typeof PerformanceObserver === 'undefined' ||
-        (this.options?.disableImageSizeWarning && this.options?.disableImageLazyLoadWarning)) {
+    if (
+      typeof PerformanceObserver === 'undefined' ||
+      (this.options?.disableImageSizeWarning && this.options?.disableImageLazyLoadWarning)
+    ) {
       return;
     }
     this.observer = this.initPerformanceObserver();
@@ -67,7 +69,7 @@ export class ImagePerformanceWarning implements OnDestroy {
     this.observer?.disconnect();
   }
 
-  private initPerformanceObserver(): PerformanceObserver|null {
+  private initPerformanceObserver(): PerformanceObserver | null {
     if (typeof PerformanceObserver === 'undefined') {
       return null;
     }
@@ -94,8 +96,9 @@ export class ImagePerformanceWarning implements OnDestroy {
 
   private scanImages(): void {
     const images = getDocument().querySelectorAll('img');
-    let lcpElementFound, lcpElementLoadedCorrectly = false;
-    images.forEach(image => {
+    let lcpElementFound,
+      lcpElementLoadedCorrectly = false;
+    images.forEach((image) => {
       if (!this.options?.disableImageSizeWarning) {
         for (const image of images) {
           // Image elements using the NgOptimizedImage directive are excluded,
@@ -118,8 +121,12 @@ export class ImagePerformanceWarning implements OnDestroy {
         }
       }
     });
-    if (lcpElementFound && !lcpElementLoadedCorrectly && this.lcpImageUrl &&
-        !this.options?.disableImageLazyLoadWarning) {
+    if (
+      lcpElementFound &&
+      !lcpElementLoadedCorrectly &&
+      this.lcpImageUrl &&
+      !this.options?.disableImageLazyLoadWarning
+    ) {
       logLazyLCPWarning(this.lcpImageUrl);
     }
   }
@@ -154,29 +161,35 @@ export class ImagePerformanceWarning implements OnDestroy {
 
     const recommendedWidth = this.window.devicePixelRatio * renderedWidth;
     const recommendedHeight = this.window.devicePixelRatio * renderedHeight;
-    const oversizedWidth = (intrinsicWidth - recommendedWidth) >= OVERSIZED_IMAGE_TOLERANCE;
-    const oversizedHeight = (intrinsicHeight - recommendedHeight) >= OVERSIZED_IMAGE_TOLERANCE;
+    const oversizedWidth = intrinsicWidth - recommendedWidth >= OVERSIZED_IMAGE_TOLERANCE;
+    const oversizedHeight = intrinsicHeight - recommendedHeight >= OVERSIZED_IMAGE_TOLERANCE;
     return oversizedWidth || oversizedHeight;
   }
 }
 
 function logLazyLCPWarning(src: string) {
-  console.warn(formatRuntimeError(
+  console.warn(
+    formatRuntimeError(
       RuntimeErrorCode.IMAGE_PERFORMANCE_WARNING,
       `An image with src ${src} is the Largest Contentful Paint (LCP) element ` +
-          `but was given a "loading" value of "lazy", which can negatively impact ` +
-          `application loading performance. This warning can be addressed by ` +
-          `changing the loading value of the LCP image to "eager", or by using the ` +
-          `NgOptimizedImage directive's prioritization utilities. For more ` +
-          `information about addressing or disabling this warning, see ` +
-          `https://angular.io/errors/NG0913`));
+        `but was given a "loading" value of "lazy", which can negatively impact ` +
+        `application loading performance. This warning can be addressed by ` +
+        `changing the loading value of the LCP image to "eager", or by using the ` +
+        `NgOptimizedImage directive's prioritization utilities. For more ` +
+        `information about addressing or disabling this warning, see ` +
+        `https://angular.io/errors/NG0913`,
+    ),
+  );
 }
 
 function logOversizedImageWarning(src: string) {
-  console.warn(formatRuntimeError(
+  console.warn(
+    formatRuntimeError(
       RuntimeErrorCode.IMAGE_PERFORMANCE_WARNING,
       `An image with src ${src} has intrinsic file dimensions much larger than its ` +
-          `rendered size. This can negatively impact application loading performance. ` +
-          `For more information about addressing or disabling this warning, see ` +
-          `https://angular.io/errors/NG0913`));
+        `rendered size. This can negatively impact application loading performance. ` +
+        `For more information about addressing or disabling this warning, see ` +
+        `https://angular.io/errors/NG0913`,
+    ),
+  );
 }
diff --git a/packages/core/src/interface/lifecycle_hooks.ts b/packages/core/src/interface/lifecycle_hooks.ts
index 5c0d828a1d0d3..ceb1da66799d4 100644
--- a/packages/core/src/interface/lifecycle_hooks.ts
+++ b/packages/core/src/interface/lifecycle_hooks.ts
@@ -7,7 +7,6 @@
  */
 import {SimpleChanges} from './simple_change';
 
-
 /**
  * @description
  * A lifecycle hook that is called when any data-bound property of a directive changes.
diff --git a/packages/core/src/interface/simple_change.ts b/packages/core/src/interface/simple_change.ts
index 76c608dc5583d..f257ce2e77e41 100644
--- a/packages/core/src/interface/simple_change.ts
+++ b/packages/core/src/interface/simple_change.ts
@@ -16,7 +16,11 @@
  * @publicApi
  */
 export class SimpleChange {
-  constructor(public previousValue: any, public currentValue: any, public firstChange: boolean) {}
+  constructor(
+    public previousValue: any,
+    public currentValue: any,
+    public firstChange: boolean,
+  ) {}
   /**
    * Check whether the new value is the first value assigned.
    */
diff --git a/packages/core/src/interface/type.ts b/packages/core/src/interface/type.ts
index cbacc039ed4af..1ef3e958af7ae 100644
--- a/packages/core/src/interface/type.ts
+++ b/packages/core/src/interface/type.ts
@@ -35,7 +35,7 @@ export interface AbstractType<T> extends Function {
 }
 
 export interface Type<T> extends Function {
-  new(...args: any[]): T;
+  new (...args: any[]): T;
 }
 
 export type Mutable<T extends {[x: string]: any}, K extends string> = {
@@ -68,5 +68,5 @@ export type Mutable<T extends {[x: string]: any}, K extends string> = {
  * ```
  */
 export type Writable<T> = {
-  -readonly[K in keyof T]: T[K];
+  -readonly [K in keyof T]: T[K];
 };
diff --git a/packages/core/src/linker.ts b/packages/core/src/linker.ts
index 15773e41fa109..b0c82954d1bb2 100644
--- a/packages/core/src/linker.ts
+++ b/packages/core/src/linker.ts
@@ -7,7 +7,13 @@
  */
 
 // Public API for compiler
-export {Compiler, COMPILER_OPTIONS, CompilerFactory, CompilerOptions, ModuleWithComponentFactories} from './linker/compiler';
+export {
+  Compiler,
+  COMPILER_OPTIONS,
+  CompilerFactory,
+  CompilerOptions,
+  ModuleWithComponentFactories,
+} from './linker/compiler';
 export {ComponentFactory, ComponentRef} from './linker/component_factory';
 export {ComponentFactoryResolver} from './linker/component_factory_resolver';
 export {DestroyRef} from './linker/destroy_ref';
diff --git a/packages/core/src/linker/compiler.ts b/packages/core/src/linker/compiler.ts
index be50666626186..55624b8433d92 100644
--- a/packages/core/src/linker/compiler.ts
+++ b/packages/core/src/linker/compiler.ts
@@ -30,8 +30,9 @@ import {NgModuleFactory} from './ng_module_factory';
  */
 export class ModuleWithComponentFactories<T> {
   constructor(
-      public ngModuleFactory: NgModuleFactory<T>,
-      public componentFactories: ComponentFactory<any>[]) {}
+    public ngModuleFactory: NgModuleFactory<T>,
+    public componentFactories: ComponentFactory<any>[],
+  ) {}
 }
 
 /**
@@ -71,21 +72,23 @@ export class Compiler {
   compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T> {
     const ngModuleFactory = this.compileModuleSync(moduleType);
     const moduleDef = getNgModuleDef(moduleType)!;
-    const componentFactories =
-        maybeUnwrapFn(moduleDef.declarations)
-            .reduce((factories: ComponentFactory<any>[], declaration: Type<any>) => {
-              const componentDef = getComponentDef(declaration);
-              componentDef && factories.push(new ComponentFactoryR3(componentDef));
-              return factories;
-            }, [] as ComponentFactory<any>[]);
+    const componentFactories = maybeUnwrapFn(moduleDef.declarations).reduce(
+      (factories: ComponentFactory<any>[], declaration: Type<any>) => {
+        const componentDef = getComponentDef(declaration);
+        componentDef && factories.push(new ComponentFactoryR3(componentDef));
+        return factories;
+      },
+      [] as ComponentFactory<any>[],
+    );
     return new ModuleWithComponentFactories(ngModuleFactory, componentFactories);
   }
 
   /**
    * Same as {@link #compileModuleAsync} but also creates ComponentFactories for all components.
    */
-  compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>):
-      Promise<ModuleWithComponentFactories<T>> {
+  compileModuleAndAllComponentsAsync<T>(
+    moduleType: Type<T>,
+  ): Promise<ModuleWithComponentFactories<T>> {
     return Promise.resolve(this.compileModuleAndAllComponentsSync(moduleType));
   }
 
@@ -102,7 +105,7 @@ export class Compiler {
   /**
    * Returns the id for a given NgModule, if one is defined and known to the compiler.
    */
-  getModuleId(moduleType: Type<any>): string|undefined {
+  getModuleId(moduleType: Type<any>): string | undefined {
     return undefined;
   }
 }
@@ -113,9 +116,9 @@ export class Compiler {
  * @publicApi
  */
 export type CompilerOptions = {
-  defaultEncapsulation?: ViewEncapsulation,
-  providers?: StaticProvider[],
-  preserveWhitespaces?: boolean,
+  defaultEncapsulation?: ViewEncapsulation;
+  providers?: StaticProvider[];
+  preserveWhitespaces?: boolean;
 };
 
 /**
@@ -123,8 +126,9 @@ export type CompilerOptions = {
  *
  * @publicApi
  */
-export const COMPILER_OPTIONS =
-    new InjectionToken<CompilerOptions[]>(ngDevMode ? 'compilerOptions' : '');
+export const COMPILER_OPTIONS = new InjectionToken<CompilerOptions[]>(
+  ngDevMode ? 'compilerOptions' : '',
+);
 
 /**
  * A factory for creating a Compiler
diff --git a/packages/core/src/linker/component_factory.ts b/packages/core/src/linker/component_factory.ts
index 22f179a08574b..557bc9b0d25d9 100644
--- a/packages/core/src/linker/component_factory.ts
+++ b/packages/core/src/linker/component_factory.ts
@@ -105,18 +105,21 @@ export abstract class ComponentFactory<C> {
    * The inputs of the component.
    */
   abstract get inputs(): {
-    propName: string,
-    templateName: string,
-    transform?: (value: any) => any,
+    propName: string;
+    templateName: string;
+    transform?: (value: any) => any;
   }[];
   /**
    * The outputs of the component.
    */
-  abstract get outputs(): {propName: string, templateName: string}[];
+  abstract get outputs(): {propName: string; templateName: string}[];
   /**
    * Creates a new component.
    */
   abstract create(
-      injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any,
-      environmentInjector?: EnvironmentInjector|NgModuleRef<any>): ComponentRef<C>;
+    injector: Injector,
+    projectableNodes?: any[][],
+    rootSelectorOrNode?: string | any,
+    environmentInjector?: EnvironmentInjector | NgModuleRef<any>,
+  ): ComponentRef<C>;
 }
diff --git a/packages/core/src/linker/component_factory_resolver.ts b/packages/core/src/linker/component_factory_resolver.ts
index 2e9eeaff63d75..61a95cbbf1546 100644
--- a/packages/core/src/linker/component_factory_resolver.ts
+++ b/packages/core/src/linker/component_factory_resolver.ts
@@ -23,9 +23,8 @@ export function getComponent(error: Error): Type<any> {
   return (error as any)[ERROR_COMPONENT];
 }
 
-
 class _NullComponentFactoryResolver implements ComponentFactoryResolver {
-  resolveComponentFactory<T>(component: {new(...args: any[]): T}): ComponentFactory<T> {
+  resolveComponentFactory<T>(component: {new (...args: any[]): T}): ComponentFactory<T> {
     throw noComponentFactoryError(component);
   }
 }
@@ -46,7 +45,7 @@ class _NullComponentFactoryResolver implements ComponentFactoryResolver {
  *     Component class can be used directly.
  */
 export abstract class ComponentFactoryResolver {
-  static NULL: ComponentFactoryResolver = (/* @__PURE__ */ new _NullComponentFactoryResolver());
+  static NULL: ComponentFactoryResolver = /* @__PURE__ */ new _NullComponentFactoryResolver();
   /**
    * Retrieves the factory object that creates a component of the given type.
    * @param component The component type.
diff --git a/packages/core/src/linker/element_ref.ts b/packages/core/src/linker/element_ref.ts
index a54cf23ea7f8c..02bb6476f04cc 100644
--- a/packages/core/src/linker/element_ref.ts
+++ b/packages/core/src/linker/element_ref.ts
@@ -77,6 +77,6 @@ export class ElementRef<T = any> {
  * @param value value to unwrap
  * @returns `nativeElement` if `ElementRef` otherwise returns value as is.
  */
-export function unwrapElementRef<T, R>(value: T|ElementRef<R>): T|R {
+export function unwrapElementRef<T, R>(value: T | ElementRef<R>): T | R {
   return value instanceof ElementRef ? value.nativeElement : value;
 }
diff --git a/packages/core/src/linker/ng_module_factory.ts b/packages/core/src/linker/ng_module_factory.ts
index 89ade4482aac1..917e608e26bf3 100644
--- a/packages/core/src/linker/ng_module_factory.ts
+++ b/packages/core/src/linker/ng_module_factory.ts
@@ -12,7 +12,6 @@ import {Type} from '../interface/type';
 
 import {ComponentFactoryResolver} from './component_factory_resolver';
 
-
 /**
  * Represents an instance of an `NgModule` created by an `NgModuleFactory`.
  * Provides access to the `NgModule` instance and related objects.
@@ -71,5 +70,5 @@ export interface InternalNgModuleRef<T> extends NgModuleRef<T> {
  */
 export abstract class NgModuleFactory<T> {
   abstract get moduleType(): Type<T>;
-  abstract create(parentInjector: Injector|null): NgModuleRef<T>;
+  abstract create(parentInjector: Injector | null): NgModuleRef<T>;
 }
diff --git a/packages/core/src/linker/ng_module_factory_loader.ts b/packages/core/src/linker/ng_module_factory_loader.ts
index 35b35824aaf8d..d344b9e5610d4 100644
--- a/packages/core/src/linker/ng_module_factory_loader.ts
+++ b/packages/core/src/linker/ng_module_factory_loader.ts
@@ -37,8 +37,6 @@ export function getNgModuleById<T>(id: string): Type<T> {
   return type;
 }
 
-function noModuleError(
-    id: string,
-    ): Error {
+function noModuleError(id: string): Error {
   return new Error(`No module with ID ${id} loaded`);
 }
diff --git a/packages/core/src/linker/ng_module_registration.ts b/packages/core/src/linker/ng_module_registration.ts
index 080a7c9b0073a..4dac46a022c9c 100644
--- a/packages/core/src/linker/ng_module_registration.ts
+++ b/packages/core/src/linker/ng_module_registration.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {Type} from '../interface/type';
 import {NgModuleType} from '../metadata/ng_module_def';
 import {getNgModuleDef} from '../render3/definition';
@@ -24,10 +23,11 @@ const modules = new Map<string, NgModuleType>();
  */
 let checkForDuplicateNgModules = true;
 
-function assertSameOrNotExisting(id: string, type: Type<any>|null, incoming: Type<any>): void {
+function assertSameOrNotExisting(id: string, type: Type<any> | null, incoming: Type<any>): void {
   if (type && type !== incoming && checkForDuplicateNgModules) {
     throw new Error(
-        `Duplicate module registered for ${id} - ${stringify(type)} vs ${stringify(type.name)}`);
+      `Duplicate module registered for ${id} - ${stringify(type)} vs ${stringify(type.name)}`,
+    );
   }
 }
 
@@ -51,7 +51,7 @@ export function clearModulesForTest(): void {
   modules.clear();
 }
 
-export function getRegisteredNgModuleType(id: string): NgModuleType|undefined {
+export function getRegisteredNgModuleType(id: string): NgModuleType | undefined {
   return modules.get(id);
 }
 
diff --git a/packages/core/src/linker/query_list.ts b/packages/core/src/linker/query_list.ts
index bda36dbb907eb..e4f61e6179a2c 100644
--- a/packages/core/src/linker/query_list.ts
+++ b/packages/core/src/linker/query_list.ts
@@ -48,7 +48,7 @@ export class QueryList<T> implements Iterable<T> {
   private _onDirty?: () => void = undefined;
   private _results: Array<T> = [];
   private _changesDetected: boolean = false;
-  private _changes: EventEmitter<QueryList<T>>|undefined = undefined;
+  private _changes: EventEmitter<QueryList<T>> | undefined = undefined;
 
   readonly length: number = 0;
   readonly first: T = undefined!;
@@ -58,7 +58,7 @@ export class QueryList<T> implements Iterable<T> {
    * Returns `Observable` of `QueryList` notifying the subscriber of changes.
    */
   get changes(): Observable<any> {
-    return this._changes ??= new EventEmitter();
+    return (this._changes ??= new EventEmitter());
   }
 
   /**
@@ -78,7 +78,7 @@ export class QueryList<T> implements Iterable<T> {
   /**
    * Returns the QueryList entry at `index`.
    */
-  get(index: number): T|undefined {
+  get(index: number): T | undefined {
     return this._results[index];
   }
 
@@ -104,7 +104,7 @@ export class QueryList<T> implements Iterable<T> {
    * See
    * [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
    */
-  find(fn: (item: T, index: number, array: T[]) => boolean): T|undefined {
+  find(fn: (item: T, index: number, array: T[]) => boolean): T | undefined {
     return this._results.find(fn);
   }
 
@@ -155,10 +155,10 @@ export class QueryList<T> implements Iterable<T> {
    *    function) to detect if the lists are different. If the function is not provided, elements
    *    are compared as is (without any pre-processing).
    */
-  reset(resultsTree: Array<T|any[]>, identityAccessor?: (value: T) => unknown): void {
+  reset(resultsTree: Array<T | any[]>, identityAccessor?: (value: T) => unknown): void {
     (this as {dirty: boolean}).dirty = false;
     const newResultFlat = flatten(resultsTree);
-    if (this._changesDetected = !arrayEquals(this._results, newResultFlat, identityAccessor)) {
+    if ((this._changesDetected = !arrayEquals(this._results, newResultFlat, identityAccessor))) {
       this._results = newResultFlat;
       (this as Writable<this>).length = newResultFlat.length;
       (this as Writable<this>).last = newResultFlat[this.length - 1];
diff --git a/packages/core/src/linker/template_ref.ts b/packages/core/src/linker/template_ref.ts
index af9acc2c7b681..ea92ff8d67064 100644
--- a/packages/core/src/linker/template_ref.ts
+++ b/packages/core/src/linker/template_ref.ts
@@ -69,8 +69,10 @@ export abstract class TemplateRef<C> {
    * @internal
    */
   abstract createEmbeddedViewImpl(
-      context: C, injector?: Injector,
-      dehydratedView?: DehydratedContainerView|null): EmbeddedViewRef<C>;
+    context: C,
+    injector?: Injector,
+    dehydratedView?: DehydratedContainerView | null,
+  ): EmbeddedViewRef<C>;
 
   /**
    * Returns an `ssrId` associated with a TView, which was used to
@@ -78,13 +80,13 @@ export abstract class TemplateRef<C> {
    *
    * @internal
    */
-  abstract get ssrId(): string|null;
+  abstract get ssrId(): string | null;
 
   /**
    * @internal
    * @nocollapse
    */
-  static __NG_ELEMENT_ID__: () => TemplateRef<any>| null = injectTemplateRef;
+  static __NG_ELEMENT_ID__: () => TemplateRef<any> | null = injectTemplateRef;
 }
 
 const ViewEngineTemplateRef = TemplateRef;
@@ -93,8 +95,10 @@ const ViewEngineTemplateRef = TemplateRef;
 // in g3 depends on them being separate.
 const R3TemplateRef = class TemplateRef<T> extends ViewEngineTemplateRef<T> {
   constructor(
-      private _declarationLView: LView, private _declarationTContainer: TContainerNode,
-      public override elementRef: ElementRef) {
+    private _declarationLView: LView,
+    private _declarationTContainer: TContainerNode,
+    public override elementRef: ElementRef,
+  ) {
     super();
   }
 
@@ -104,7 +108,7 @@ const R3TemplateRef = class TemplateRef<T> extends ViewEngineTemplateRef<T> {
    *
    * @internal
    */
-  override get ssrId(): string|null {
+  override get ssrId(): string | null {
     return this._declarationTContainer.tView?.ssrId || null;
   }
 
@@ -116,11 +120,16 @@ const R3TemplateRef = class TemplateRef<T> extends ViewEngineTemplateRef<T> {
    * @internal
    */
   override createEmbeddedViewImpl(
-      context: T, injector?: Injector,
-      dehydratedView?: DehydratedContainerView): EmbeddedViewRef<T> {
+    context: T,
+    injector?: Injector,
+    dehydratedView?: DehydratedContainerView,
+  ): EmbeddedViewRef<T> {
     const embeddedLView = createAndRenderEmbeddedLView(
-        this._declarationLView, this._declarationTContainer, context,
-        {embeddedViewInjector: injector, dehydratedView});
+      this._declarationLView,
+      this._declarationTContainer,
+      context,
+      {embeddedViewInjector: injector, dehydratedView},
+    );
     return new R3_ViewRef<T>(embeddedLView);
   }
 };
@@ -130,7 +139,7 @@ const R3TemplateRef = class TemplateRef<T> extends ViewEngineTemplateRef<T> {
  *
  * @returns The TemplateRef instance to use
  */
-export function injectTemplateRef<T>(): TemplateRef<T>|null {
+export function injectTemplateRef<T>(): TemplateRef<T> | null {
   return createTemplateRef<T>(getCurrentTNode()!, getLView());
 }
 
@@ -141,11 +150,14 @@ export function injectTemplateRef<T>(): TemplateRef<T>|null {
  * @param hostLView The `LView` to which the node belongs
  * @returns The TemplateRef instance or null if we can't create a TemplateRef on a given node type
  */
-export function createTemplateRef<T>(hostTNode: TNode, hostLView: LView): TemplateRef<T>|null {
+export function createTemplateRef<T>(hostTNode: TNode, hostLView: LView): TemplateRef<T> | null {
   if (hostTNode.type & TNodeType.Container) {
     ngDevMode && assertDefined(hostTNode.tView, 'TView must be allocated');
     return new R3TemplateRef(
-        hostLView, hostTNode as TContainerNode, createElementRef(hostTNode, hostLView));
+      hostLView,
+      hostTNode as TContainerNode,
+      createElementRef(hostTNode, hostLView),
+    );
   }
   return null;
 }
diff --git a/packages/core/src/linker/view_container_ref.ts b/packages/core/src/linker/view_container_ref.ts
index 648991e523247..e619e71834d15 100644
--- a/packages/core/src/linker/view_container_ref.ts
+++ b/packages/core/src/linker/view_container_ref.ts
@@ -11,7 +11,11 @@ import {EnvironmentInjector} from '../di/r3_injector';
 import {validateMatchingNode} from '../hydration/error_handling';
 import {CONTAINERS} from '../hydration/interfaces';
 import {hasInSkipHydrationBlockFlag, isInSkipHydrationBlock} from '../hydration/skip_hydration';
-import {getSegmentHead, isDisconnectedNode, markRNodeAsClaimedByHydration} from '../hydration/utils';
+import {
+  getSegmentHead,
+  isDisconnectedNode,
+  markRNodeAsClaimedByHydration,
+} from '../hydration/utils';
 import {findMatchingDehydratedView, locateDehydratedViewsInContainer} from '../hydration/views';
 import {isType, Type} from '../interface/type';
 import {assertNodeInjector} from '../render3/assert';
@@ -19,21 +23,58 @@ import {ComponentFactory as R3ComponentFactory} from '../render3/component_ref';
 import {getComponentDef} from '../render3/definition';
 import {getParentInjectorLocation, NodeInjector} from '../render3/di';
 import {addToViewTree, createLContainer} from '../render3/instructions/shared';
-import {CONTAINER_HEADER_OFFSET, DEHYDRATED_VIEWS, LContainer, NATIVE, VIEW_REFS} from '../render3/interfaces/container';
+import {
+  CONTAINER_HEADER_OFFSET,
+  DEHYDRATED_VIEWS,
+  LContainer,
+  NATIVE,
+  VIEW_REFS,
+} from '../render3/interfaces/container';
 import {NodeInjectorOffset} from '../render3/interfaces/injector';
-import {TContainerNode, TDirectiveHostNode, TElementContainerNode, TElementNode, TNode, TNodeType} from '../render3/interfaces/node';
+import {
+  TContainerNode,
+  TDirectiveHostNode,
+  TElementContainerNode,
+  TElementNode,
+  TNode,
+  TNodeType,
+} from '../render3/interfaces/node';
 import {RComment, RNode} from '../render3/interfaces/renderer_dom';
 import {isLContainer} from '../render3/interfaces/type_checks';
-import {HEADER_OFFSET, HYDRATION, LView, PARENT, RENDERER, T_HOST, TVIEW} from '../render3/interfaces/view';
+import {
+  HEADER_OFFSET,
+  HYDRATION,
+  LView,
+  PARENT,
+  RENDERER,
+  T_HOST,
+  TVIEW,
+} from '../render3/interfaces/view';
 import {assertTNodeType} from '../render3/node_assert';
-import {destroyLView, detachView, nativeInsertBefore, nativeNextSibling, nativeParentNode} from '../render3/node_manipulation';
+import {
+  destroyLView,
+  detachView,
+  nativeInsertBefore,
+  nativeNextSibling,
+  nativeParentNode,
+} from '../render3/node_manipulation';
 import {getCurrentTNode, getLView} from '../render3/state';
-import {getParentInjectorIndex, getParentInjectorView, hasParentInjector} from '../render3/util/injector_utils';
+import {
+  getParentInjectorIndex,
+  getParentInjectorView,
+  hasParentInjector,
+} from '../render3/util/injector_utils';
 import {getNativeByTNode, unwrapRNode, viewAttachedToContainer} from '../render3/util/view_utils';
 import {addLViewToLContainer, shouldAddViewToDom} from '../render3/view_manipulation';
 import {ViewRef as R3ViewRef} from '../render3/view_ref';
 import {addToArray, removeFromArray} from '../util/array_utils';
-import {assertDefined, assertEqual, assertGreaterThan, assertLessThan, throwError} from '../util/assert';
+import {
+  assertDefined,
+  assertEqual,
+  assertGreaterThan,
+  assertLessThan,
+  throwError,
+} from '../util/assert';
 
 import {ComponentFactory, ComponentRef} from './component_factory';
 import {createElementRef, ElementRef} from './element_ref';
@@ -124,7 +165,7 @@ export abstract class ViewContainerRef {
    * @param index The 0-based index of the view to retrieve.
    * @returns The `ViewRef` instance, or null if the index is out of range.
    */
-  abstract get(index: number): ViewRef|null;
+  abstract get(index: number): ViewRef | null;
 
   /**
    * Reports how many views are currently attached to this container.
@@ -145,10 +186,14 @@ export abstract class ViewContainerRef {
    *
    * @returns The `ViewRef` instance for the newly created view.
    */
-  abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, options?: {
-    index?: number,
-    injector?: Injector
-  }): EmbeddedViewRef<C>;
+  abstract createEmbeddedView<C>(
+    templateRef: TemplateRef<C>,
+    context?: C,
+    options?: {
+      index?: number;
+      injector?: Injector;
+    },
+  ): EmbeddedViewRef<C>;
 
   /**
    * Instantiates an embedded view and inserts it
@@ -161,8 +206,11 @@ export abstract class ViewContainerRef {
    *
    * @returns The `ViewRef` instance for the newly created view.
    */
-  abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number):
-      EmbeddedViewRef<C>;
+  abstract createEmbeddedView<C>(
+    templateRef: TemplateRef<C>,
+    context?: C,
+    index?: number,
+  ): EmbeddedViewRef<C>;
 
   /**
    * Instantiates a single component and inserts its host view into this container.
@@ -184,13 +232,16 @@ export abstract class ViewContainerRef {
    *
    * @returns The new `ComponentRef` which contains the component instance and the host view.
    */
-  abstract createComponent<C>(componentType: Type<C>, options?: {
-    index?: number,
-    injector?: Injector,
-    ngModuleRef?: NgModuleRef<unknown>,
-    environmentInjector?: EnvironmentInjector|NgModuleRef<unknown>,
-    projectableNodes?: Node[][],
-  }): ComponentRef<C>;
+  abstract createComponent<C>(
+    componentType: Type<C>,
+    options?: {
+      index?: number;
+      injector?: Injector;
+      ngModuleRef?: NgModuleRef<unknown>;
+      environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>;
+      projectableNodes?: Node[][];
+    },
+  ): ComponentRef<C>;
 
   /**
    * Instantiates a single component and inserts its host view into this container.
@@ -211,9 +262,12 @@ export abstract class ViewContainerRef {
    *     Component class directly.
    */
   abstract createComponent<C>(
-      componentFactory: ComponentFactory<C>, index?: number, injector?: Injector,
-      projectableNodes?: any[][],
-      environmentInjector?: EnvironmentInjector|NgModuleRef<any>): ComponentRef<C>;
+    componentFactory: ComponentFactory<C>,
+    index?: number,
+    injector?: Injector,
+    projectableNodes?: any[][],
+    environmentInjector?: EnvironmentInjector | NgModuleRef<any>,
+  ): ComponentRef<C>;
 
   /**
    * Inserts a view into this container.
@@ -254,7 +308,7 @@ export abstract class ViewContainerRef {
    * @param index The 0-based index of the view to detach.
    * If not specified, the last view in the container is detached.
    */
-  abstract detach(index?: number): ViewRef|null;
+  abstract detach(index?: number): ViewRef | null;
 
   /**
    * @internal
@@ -280,9 +334,10 @@ const VE_ViewContainerRef = ViewContainerRef;
 // for that lands, this can be cleaned up.
 const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
   constructor(
-      private _lContainer: LContainer,
-      private _hostTNode: TElementNode|TContainerNode|TElementContainerNode,
-      private _hostLView: LView) {
+    private _lContainer: LContainer,
+    private _hostTNode: TElementNode | TContainerNode | TElementContainerNode,
+    private _hostLView: LView,
+  ) {
     super();
   }
 
@@ -301,8 +356,9 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
       const parentView = getParentInjectorView(parentLocation, this._hostLView);
       const injectorIndex = getParentInjectorIndex(parentLocation);
       ngDevMode && assertNodeInjector(parentView, injectorIndex);
-      const parentTNode =
-          parentView[TVIEW].data[injectorIndex + NodeInjectorOffset.TNODE] as TElementNode;
+      const parentTNode = parentView[TVIEW].data[
+        injectorIndex + NodeInjectorOffset.TNODE
+      ] as TElementNode;
       return new NodeInjector(parentTNode, parentView);
     } else {
       return new NodeInjector(null, this._hostLView);
@@ -315,27 +371,40 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
     }
   }
 
-  override get(index: number): ViewRef|null {
+  override get(index: number): ViewRef | null {
     const viewRefs = getViewRefs(this._lContainer);
-    return viewRefs !== null && viewRefs[index] || null;
+    return (viewRefs !== null && viewRefs[index]) || null;
   }
 
   override get length(): number {
     return this._lContainer.length - CONTAINER_HEADER_OFFSET;
   }
 
-  override createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, options?: {
-    index?: number,
-    injector?: Injector
-  }): EmbeddedViewRef<C>;
-  override createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number):
-      EmbeddedViewRef<C>;
-  override createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, indexOrOptions?: number|{
+  override createEmbeddedView<C>(
+    templateRef: TemplateRef<C>,
+    context?: C,
+    options?: {
+      index?: number;
+      injector?: Injector;
+    },
+  ): EmbeddedViewRef<C>;
+  override createEmbeddedView<C>(
+    templateRef: TemplateRef<C>,
+    context?: C,
     index?: number,
-    injector?: Injector
-  }): EmbeddedViewRef<C> {
-    let index: number|undefined;
-    let injector: Injector|undefined;
+  ): EmbeddedViewRef<C>;
+  override createEmbeddedView<C>(
+    templateRef: TemplateRef<C>,
+    context?: C,
+    indexOrOptions?:
+      | number
+      | {
+          index?: number;
+          injector?: Injector;
+        },
+  ): EmbeddedViewRef<C> {
+    let index: number | undefined;
+    let injector: Injector | undefined;
 
     if (typeof indexOrOptions === 'number') {
       index = indexOrOptions;
@@ -345,39 +414,54 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
     }
 
     const dehydratedView = findMatchingDehydratedView(this._lContainer, templateRef.ssrId);
-    const viewRef =
-        templateRef.createEmbeddedViewImpl(context || <any>{}, injector, dehydratedView);
+    const viewRef = templateRef.createEmbeddedViewImpl(
+      context || <any>{},
+      injector,
+      dehydratedView,
+    );
     this.insertImpl(viewRef, index, shouldAddViewToDom(this._hostTNode, dehydratedView));
     return viewRef;
   }
 
-  override createComponent<C>(componentType: Type<C>, options?: {
-    index?: number,
-    injector?: Injector,
-    projectableNodes?: Node[][],
-    ngModuleRef?: NgModuleRef<unknown>,
-  }): ComponentRef<C>;
+  override createComponent<C>(
+    componentType: Type<C>,
+    options?: {
+      index?: number;
+      injector?: Injector;
+      projectableNodes?: Node[][];
+      ngModuleRef?: NgModuleRef<unknown>;
+    },
+  ): ComponentRef<C>;
   /**
    * @deprecated Angular no longer requires component factories to dynamically create components.
    *     Use different signature of the `createComponent` method, which allows passing
    *     Component class directly.
    */
   override createComponent<C>(
-      componentFactory: ComponentFactory<C>, index?: number|undefined,
-      injector?: Injector|undefined, projectableNodes?: any[][]|undefined,
-      environmentInjector?: EnvironmentInjector|NgModuleRef<any>|undefined): ComponentRef<C>;
+    componentFactory: ComponentFactory<C>,
+    index?: number | undefined,
+    injector?: Injector | undefined,
+    projectableNodes?: any[][] | undefined,
+    environmentInjector?: EnvironmentInjector | NgModuleRef<any> | undefined,
+  ): ComponentRef<C>;
   override createComponent<C>(
-      componentFactoryOrType: ComponentFactory<C>|Type<C>, indexOrOptions?: number|undefined|{
-        index?: number,
-        injector?: Injector,
-        ngModuleRef?: NgModuleRef<unknown>,
-        environmentInjector?: EnvironmentInjector|NgModuleRef<unknown>,
-        projectableNodes?: Node[][],
-      },
-      injector?: Injector|undefined, projectableNodes?: any[][]|undefined,
-      environmentInjector?: EnvironmentInjector|NgModuleRef<any>|undefined): ComponentRef<C> {
+    componentFactoryOrType: ComponentFactory<C> | Type<C>,
+    indexOrOptions?:
+      | number
+      | undefined
+      | {
+          index?: number;
+          injector?: Injector;
+          ngModuleRef?: NgModuleRef<unknown>;
+          environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>;
+          projectableNodes?: Node[][];
+        },
+    injector?: Injector | undefined,
+    projectableNodes?: any[][] | undefined,
+    environmentInjector?: EnvironmentInjector | NgModuleRef<any> | undefined,
+  ): ComponentRef<C> {
     const isComponentFactory = componentFactoryOrType && !isType(componentFactoryOrType);
-    let index: number|undefined;
+    let index: number | undefined;
 
     // 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
@@ -387,37 +471,43 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
     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)');
+          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 as number | undefined;
     } else {
       if (ngDevMode) {
         assertDefined(
-            getComponentDef(componentFactoryOrType),
-            `Provided Component class doesn't contain Component definition. ` +
-                `Please check whether provided class has @Component decorator.`);
+          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.');
+          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 || {}) as {
-        index?: number,
-        injector?: Injector,
-        ngModuleRef?: NgModuleRef<unknown>,
-        environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>,
-        projectableNodes?: Node[][],
+        index?: number;
+        injector?: Injector;
+        ngModuleRef?: NgModuleRef<unknown>;
+        environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>;
+        projectableNodes?: Node[][];
       };
       if (ngDevMode && options.environmentInjector && options.ngModuleRef) {
         throwError(
-            `Cannot pass both environmentInjector and ngModuleRef options to createComponent().`);
+          `Cannot pass both environmentInjector and ngModuleRef options to createComponent().`,
+        );
       }
       index = options.index;
       injector = options.injector;
@@ -425,9 +515,9 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
       environmentInjector = options.environmentInjector || options.ngModuleRef;
     }
 
-    const componentFactory: ComponentFactory<C> = isComponentFactory ?
-        componentFactoryOrType as ComponentFactory<C>:
-        new R3ComponentFactory(getComponentDef(componentFactoryOrType)!);
+    const componentFactory: ComponentFactory<C> = isComponentFactory
+      ? (componentFactoryOrType as ComponentFactory<C>)
+      : new R3ComponentFactory(getComponentDef(componentFactoryOrType)!);
     const contextInjector = injector || this.parentInjector;
 
     // If an `NgModuleRef` is not provided explicitly, try retrieving it from the DI tree.
@@ -462,10 +552,17 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
     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);
+    const componentRef = componentFactory.create(
+      contextInjector,
+      projectableNodes,
+      rNode,
+      environmentInjector,
+    );
     this.insertImpl(
-        componentRef.hostView, index, shouldAddViewToDom(this._hostTNode, dehydratedView));
+      componentRef.hostView,
+      index,
+      shouldAddViewToDom(this._hostTNode, dehydratedView),
+    );
     return componentRef;
   }
 
@@ -494,15 +591,19 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
       } else {
         const prevLContainer = lView[PARENT] as LContainer;
         ngDevMode &&
-            assertEqual(
-                isLContainer(prevLContainer), true,
-                'An attached view should have its PARENT point to a container.');
-
+          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] as TDirectiveHostNode, prevLContainer[PARENT]);
+          prevLContainer,
+          prevLContainer[T_HOST] as TDirectiveHostNode,
+          prevLContainer[PARENT],
+        );
 
         prevVCRef.detach(prevVCRef.indexOf(viewRef));
       }
@@ -548,12 +649,12 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
     }
   }
 
-  override detach(index?: number): ViewRef|null {
+  override detach(index?: number): ViewRef | null {
     const adjustedIdx = this._adjustIndex(index, -1);
     const view = detachView(this._lContainer, adjustedIdx);
 
     const wasDetached =
-        view && removeFromArray(getOrCreateViewRefs(this._lContainer), adjustedIdx) != null;
+      view && removeFromArray(getOrCreateViewRefs(this._lContainer), adjustedIdx) != null;
     return wasDetached ? new R3ViewRef(view!) : null;
   }
 
@@ -570,7 +671,7 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
   }
 };
 
-function getViewRefs(lContainer: LContainer): ViewRef[]|null {
+function getViewRefs(lContainer: LContainer): ViewRef[] | null {
   return lContainer[VIEW_REFS] as ViewRef[];
 }
 
@@ -586,8 +687,9 @@ function getOrCreateViewRefs(lContainer: LContainer): ViewRef[] {
  * @returns The ViewContainerRef instance to use
  */
 export function createContainerRef(
-    hostTNode: TElementNode|TContainerNode|TElementContainerNode,
-    hostLView: LView): ViewContainerRef {
+  hostTNode: TElementNode | TContainerNode | TElementContainerNode,
+  hostLView: LView,
+): ViewContainerRef {
   ngDevMode && assertTNodeType(hostTNode, TNodeType.AnyContainer | TNodeType.AnyRNode);
 
   let lContainer: LContainer;
@@ -623,13 +725,18 @@ function insertAnchorNode(hostLView: LView, hostTNode: TNode): RComment {
   const hostNative = getNativeByTNode(hostTNode, hostLView)!;
   const parentOfHostNative = nativeParentNode(renderer, hostNative);
   nativeInsertBefore(
-      renderer, parentOfHostNative!, commentNode, nativeNextSibling(renderer, hostNative), false);
+    renderer,
+    parentOfHostNative!,
+    commentNode,
+    nativeNextSibling(renderer, hostNative),
+    false,
+  );
   return commentNode;
 }
 
 let _locateOrCreateAnchorNode = createAnchorNode;
 let _populateDehydratedViewsInLContainer: typeof populateDehydratedViewsInLContainerImpl = () =>
-    false;  // noop by default
+  false; // noop by default
 
 /**
  * Looks up dehydrated views that belong to a given LContainer and populates
@@ -645,7 +752,10 @@ let _populateDehydratedViewsInLContainer: typeof populateDehydratedViewsInLConta
  *   in a skip hydration section.
  */
 export function populateDehydratedViewsInLContainer(
-    lContainer: LContainer, tNode: TNode, hostLView: LView): boolean {
+  lContainer: LContainer,
+  tNode: TNode,
+  hostLView: LView,
+): boolean {
   return _populateDehydratedViewsInLContainer(lContainer, tNode, hostLView);
 }
 
@@ -654,7 +764,11 @@ export function populateDehydratedViewsInLContainer(
  * assigned to the `lContainer[NATIVE]` slot.
  */
 function createAnchorNode(
-    lContainer: LContainer, hostLView: LView, hostTNode: TNode, slotValue: any) {
+  lContainer: LContainer,
+  hostLView: LView,
+  hostTNode: TNode,
+  slotValue: any,
+) {
   // We already have a native element (anchor) set, return.
   if (lContainer[NATIVE]) return;
 
@@ -681,7 +795,10 @@ function createAnchorNode(
  *   in a skip hydration section.
  */
 function populateDehydratedViewsInLContainerImpl(
-    lContainer: LContainer, tNode: TNode, hostLView: LView): boolean {
+  lContainer: LContainer,
+  tNode: TNode,
+  hostLView: LView,
+): boolean {
   // 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.
@@ -691,8 +808,10 @@ function populateDehydratedViewsInLContainerImpl(
 
   const hydrationInfo = hostLView[HYDRATION];
   const noOffsetIndex = tNode.index - HEADER_OFFSET;
-  const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock(tNode) ||
-      isDisconnectedNode(hydrationInfo, noOffsetIndex);
+  const isNodeCreationMode =
+    !hydrationInfo ||
+    isInSkipHydrationBlock(tNode) ||
+    isDisconnectedNode(hydrationInfo, noOffsetIndex);
 
   // Regular creation mode.
   if (isNodeCreationMode) {
@@ -700,17 +819,20 @@ function populateDehydratedViewsInLContainerImpl(
   }
 
   // Hydration mode, looking up an anchor node and dehydrated views in DOM.
-  const currentRNode: RNode|null = getSegmentHead(hydrationInfo, noOffsetIndex);
+  const currentRNode: RNode | null = 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.');
+    assertDefined(
+      serializedViews,
+      'Unexpected state: no hydration info available for a given TNode, ' +
+        'which represents a view container.',
+    );
 
-  const [commentNode, dehydratedViews] =
-      locateDehydratedViewsInContainer(currentRNode!, serializedViews!);
+  const [commentNode, dehydratedViews] = locateDehydratedViewsInContainer(
+    currentRNode!,
+    serializedViews!,
+  );
 
   if (ngDevMode) {
     validateMatchingNode(commentNode, Node.COMMENT_NODE, null, hostLView, tNode, true);
@@ -729,7 +851,11 @@ function populateDehydratedViewsInLContainerImpl(
 }
 
 function locateOrCreateAnchorNode(
-    lContainer: LContainer, hostLView: LView, hostTNode: TNode, slotValue: any): void {
+  lContainer: LContainer,
+  hostLView: LView,
+  hostTNode: TNode,
+  slotValue: any,
+): void {
   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
diff --git a/packages/core/src/metadata.ts b/packages/core/src/metadata.ts
index 6725f7a6e6948..f0109aa75638a 100644
--- a/packages/core/src/metadata.ts
+++ b/packages/core/src/metadata.ts
@@ -11,11 +11,44 @@
  * to be used by the decorator versions of these annotations.
  */
 
-
 export {Attribute, AttributeDecorator} from './di/metadata_attr';
-export {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, DoCheck, OnChanges, OnDestroy, OnInit} from './interface/lifecycle_hooks';
-export {ContentChild, ContentChildDecorator, ContentChildren, ContentChildrenDecorator, Query, ViewChild, ViewChildDecorator, ViewChildren, ViewChildrenDecorator} from './metadata/di';
-export {Component, ComponentDecorator, Directive, DirectiveDecorator, HostBinding, HostBindingDecorator, HostListener, HostListenerDecorator, Input, InputDecorator, Output, OutputDecorator, Pipe, PipeDecorator} from './metadata/directives';
+export {
+  AfterContentChecked,
+  AfterContentInit,
+  AfterViewChecked,
+  AfterViewInit,
+  DoCheck,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+} from './interface/lifecycle_hooks';
+export {
+  ContentChild,
+  ContentChildDecorator,
+  ContentChildren,
+  ContentChildrenDecorator,
+  Query,
+  ViewChild,
+  ViewChildDecorator,
+  ViewChildren,
+  ViewChildrenDecorator,
+} from './metadata/di';
+export {
+  Component,
+  ComponentDecorator,
+  Directive,
+  DirectiveDecorator,
+  HostBinding,
+  HostBindingDecorator,
+  HostListener,
+  HostListenerDecorator,
+  Input,
+  InputDecorator,
+  Output,
+  OutputDecorator,
+  Pipe,
+  PipeDecorator,
+} from './metadata/directives';
 export {DoBootstrap} from './metadata/do_bootstrap';
 export {NgModule, NgModuleDecorator} from './metadata/ng_module';
 export {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SchemaMetadata} from './metadata/schema';
diff --git a/packages/core/src/metadata/di.ts b/packages/core/src/metadata/di.ts
index 24b72e0a111be..54f4a7c7fd9fc 100644
--- a/packages/core/src/metadata/di.ts
+++ b/packages/core/src/metadata/di.ts
@@ -35,10 +35,9 @@ export interface AttributeDecorator {
    * @publicApi
    */
   (name: string): any;
-  new(name: string): Attribute;
+  new (name: string): Attribute;
 }
 
-
 /**
  * Type of the Attribute metadata.
  *
@@ -84,7 +83,6 @@ export interface Query {
 // explicitly set.
 export const emitDistinctChangesOnlyDefaultValue = true;
 
-
 /**
  * Base class for query metadata.
  *
@@ -165,13 +163,18 @@ export interface ContentChildrenDecorator {
    *
    * @Annotation
    */
-  (selector: ProviderToken<unknown>|Function|string, opts?: {
-    descendants?: boolean,
-    emitDistinctChangesOnly?: boolean,
-    read?: any,
-  }): any;
-  new(selector: ProviderToken<unknown>|Function|string,
-      opts?: {descendants?: boolean, emitDistinctChangesOnly?: boolean, read?: any}): Query;
+  (
+    selector: ProviderToken<unknown> | Function | string,
+    opts?: {
+      descendants?: boolean;
+      emitDistinctChangesOnly?: boolean;
+      read?: any;
+    },
+  ): any;
+  new (
+    selector: ProviderToken<unknown> | Function | string,
+    opts?: {descendants?: boolean; emitDistinctChangesOnly?: boolean; read?: any},
+  ): Query;
 }
 
 /**
@@ -191,15 +194,17 @@ export type ContentChildren = Query;
  * @publicApi
  */
 export const ContentChildren: ContentChildrenDecorator = makePropDecorator(
-    'ContentChildren', (selector?: any, opts: any = {}) => ({
-                         selector,
-                         first: false,
-                         isViewQuery: false,
-                         descendants: false,
-                         emitDistinctChangesOnly: emitDistinctChangesOnlyDefaultValue,
-                         ...opts
-                       }),
-    Query);
+  'ContentChildren',
+  (selector?: any, opts: any = {}) => ({
+    selector,
+    first: false,
+    isViewQuery: false,
+    descendants: false,
+    emitDistinctChangesOnly: emitDistinctChangesOnlyDefaultValue,
+    ...opts,
+  }),
+  Query,
+);
 
 /**
  * Type of the ContentChild decorator / constructor function.
@@ -266,10 +271,14 @@ export interface ContentChildDecorator {
    *
    * @Annotation
    */
-  (selector: ProviderToken<unknown>|Function|string,
-   opts?: {descendants?: boolean, read?: any, static?: boolean}): any;
-  new(selector: ProviderToken<unknown>|Function|string,
-      opts?: {descendants?: boolean, read?: any, static?: boolean}): ContentChild;
+  (
+    selector: ProviderToken<unknown> | Function | string,
+    opts?: {descendants?: boolean; read?: any; static?: boolean},
+  ): any;
+  new (
+    selector: ProviderToken<unknown> | Function | string,
+    opts?: {descendants?: boolean; read?: any; static?: boolean},
+  ): ContentChild;
 }
 
 /**
@@ -288,10 +297,16 @@ export type ContentChild = Query;
  * @publicApi
  */
 export const ContentChild: ContentChildDecorator = makePropDecorator(
-    'ContentChild',
-    (selector?: any, opts: any = {}) =>
-        ({selector, first: true, isViewQuery: false, descendants: true, ...opts}),
-    Query);
+  'ContentChild',
+  (selector?: any, opts: any = {}) => ({
+    selector,
+    first: true,
+    isViewQuery: false,
+    descendants: true,
+    ...opts,
+  }),
+  Query,
+);
 
 /**
  * Type of the ViewChildren decorator / constructor function.
@@ -352,10 +367,14 @@ export interface ViewChildrenDecorator {
    *
    * @Annotation
    */
-  (selector: ProviderToken<unknown>|Function|string,
-   opts?: {read?: any, emitDistinctChangesOnly?: boolean}): any;
-  new(selector: ProviderToken<unknown>|Function|string,
-      opts?: {read?: any, emitDistinctChangesOnly?: boolean}): ViewChildren;
+  (
+    selector: ProviderToken<unknown> | Function | string,
+    opts?: {read?: any; emitDistinctChangesOnly?: boolean},
+  ): any;
+  new (
+    selector: ProviderToken<unknown> | Function | string,
+    opts?: {read?: any; emitDistinctChangesOnly?: boolean},
+  ): ViewChildren;
 }
 
 /**
@@ -372,15 +391,17 @@ export type ViewChildren = Query;
  * @publicApi
  */
 export const ViewChildren: ViewChildrenDecorator = makePropDecorator(
-    'ViewChildren', (selector?: any, opts: any = {}) => ({
-                      selector,
-                      first: false,
-                      isViewQuery: true,
-                      descendants: true,
-                      emitDistinctChangesOnly: emitDistinctChangesOnlyDefaultValue,
-                      ...opts
-                    }),
-    Query);
+  'ViewChildren',
+  (selector?: any, opts: any = {}) => ({
+    selector,
+    first: false,
+    isViewQuery: true,
+    descendants: true,
+    emitDistinctChangesOnly: emitDistinctChangesOnlyDefaultValue,
+    ...opts,
+  }),
+  Query,
+);
 
 /**
  * Type of the ViewChild decorator / constructor function.
@@ -443,9 +464,14 @@ export interface ViewChildDecorator {
    *
    * @Annotation
    */
-  (selector: ProviderToken<unknown>|Function|string, opts?: {read?: any, static?: boolean}): any;
-  new(selector: ProviderToken<unknown>|Function|string,
-      opts?: {read?: any, static?: boolean}): ViewChild;
+  (
+    selector: ProviderToken<unknown> | Function | string,
+    opts?: {read?: any; static?: boolean},
+  ): any;
+  new (
+    selector: ProviderToken<unknown> | Function | string,
+    opts?: {read?: any; static?: boolean},
+  ): ViewChild;
 }
 
 /**
@@ -462,7 +488,13 @@ export type ViewChild = Query;
  * @publicApi
  */
 export const ViewChild: ViewChildDecorator = makePropDecorator(
-    'ViewChild',
-    (selector: any, opts: any) =>
-        ({selector, first: true, isViewQuery: true, descendants: true, ...opts}),
-    Query);
+  'ViewChild',
+  (selector: any, opts: any) => ({
+    selector,
+    first: true,
+    isViewQuery: true,
+    descendants: true,
+    ...opts,
+  }),
+  Query,
+);
diff --git a/packages/core/src/metadata/directives.ts b/packages/core/src/metadata/directives.ts
index f5afb6ef217a5..cd6b9cd12d03c 100644
--- a/packages/core/src/metadata/directives.ts
+++ b/packages/core/src/metadata/directives.ts
@@ -16,8 +16,6 @@ import {makeDecorator, makePropDecorator, TypeDecorator} from '../util/decorator
 import {SchemaMetadata} from './schema';
 import {ViewEncapsulation} from './view';
 
-
-
 /**
  * Type of the Directive decorator / constructor function.
  * @publicApi
@@ -105,7 +103,7 @@ export interface DirectiveDecorator {
   /**
    * See the `Directive` decorator.
    */
-  new(obj?: Directive): Directive;
+  new (obj?: Directive): Directive;
 }
 
 /**
@@ -182,12 +180,15 @@ export interface Directive {
    * ```
    *
    */
-  inputs?: ({
-    name: string,
-    alias?: string,
-    required?: boolean,
-    transform?: (value: any) => any,
-  }|string)[];
+  inputs?: (
+    | {
+        name: string;
+        alias?: string;
+        required?: boolean;
+        transform?: (value: any) => any;
+      }
+    | string
+  )[];
 
   /**
    * Enumerates the set of event-bound output properties.
@@ -359,11 +360,14 @@ export interface Directive {
    * defines an input named `menuDisabled`, you can alias this to `disabled` by adding
    * `'menuDisabled: disabled'` as an entry to `inputs`.
    */
-  hostDirectives?: (Type<unknown>|{
-    directive: Type<unknown>,
-    inputs?: string[],
-    outputs?: string[],
-  })[];
+  hostDirectives?: (
+    | Type<unknown>
+    | {
+        directive: Type<unknown>;
+        inputs?: string[];
+        outputs?: string[];
+      }
+  )[];
 }
 
 /**
@@ -372,8 +376,12 @@ export interface Directive {
  * @publicApi
  */
 export const Directive: DirectiveDecorator = makeDecorator(
-    'Directive', (dir: Directive = {}) => dir, undefined, undefined,
-    (type: Type<any>, meta: Directive) => compileDirective(type, meta));
+  'Directive',
+  (dir: Directive = {}) => dir,
+  undefined,
+  undefined,
+  (type: Type<any>, meta: Directive) => compileDirective(type, meta),
+);
 
 /**
  * Component decorator interface
@@ -522,7 +530,7 @@ export interface ComponentDecorator {
   /**
    * See the `Component` decorator.
    */
-  new(obj: Component): Component;
+  new (obj: Component): Component;
 }
 
 /**
@@ -588,7 +596,7 @@ export interface Component extends Directive {
    * One or more inline CSS stylesheets to use
    * in this component.
    */
-  styles?: string|string[];
+  styles?: string | string[];
 
   /**
    * One or more animation `trigger()` calls, containing
@@ -649,7 +657,7 @@ export interface Component extends Directive {
    * More information about standalone components, directives, and pipes can be found in [this
    * guide](guide/components/importing).
    */
-  imports?: (Type<any>|ReadonlyArray<any>)[];
+  imports?: (Type<any> | ReadonlyArray<any>)[];
 
   /**
    * The `deferredImports` property specifies a standalone component's template dependencies,
@@ -660,7 +668,7 @@ export interface Component extends Directive {
    * Note: this is an internal-only field, use regular `@Component.imports` field instead.
    * @internal
    */
-  deferredImports?: (Type<any>|ReadonlyArray<any>)[];
+  deferredImports?: (Type<any> | ReadonlyArray<any>)[];
 
   /**
    * The set of schemas that declare elements to be allowed in a standalone component. Elements and
@@ -682,8 +690,12 @@ export interface Component extends Directive {
  * @publicApi
  */
 export const Component: ComponentDecorator = makeDecorator(
-    'Component', (c: Component = {}) => ({changeDetection: ChangeDetectionStrategy.Default, ...c}),
-    Directive, undefined, (type: Type<any>, meta: Component) => compileComponent(type, meta));
+  'Component',
+  (c: Component = {}) => ({changeDetection: ChangeDetectionStrategy.Default, ...c}),
+  Directive,
+  undefined,
+  (type: Type<any>, meta: Component) => compileComponent(type, meta),
+);
 
 /**
  * Type of the Pipe decorator / constructor function.
@@ -717,7 +729,7 @@ export interface PipeDecorator {
   /**
    * See the `Pipe` decorator.
    */
-  new(obj: Pipe): Pipe;
+  new (obj: Pipe): Pipe;
 }
 
 /**
@@ -760,9 +772,12 @@ export interface Pipe {
  * @publicApi
  */
 export const Pipe: PipeDecorator = makeDecorator(
-    'Pipe', (p: Pipe) => ({pure: true, ...p}), undefined, undefined,
-    (type: Type<any>, meta: Pipe) => compilePipe(type, meta));
-
+  'Pipe',
+  (p: Pipe) => ({pure: true, ...p}),
+  undefined,
+  undefined,
+  (type: Type<any>, meta: Pipe) => compilePipe(type, meta),
+);
 
 /**
  * @publicApi
@@ -820,8 +835,8 @@ export interface InputDecorator {
    * @see [Input properties](guide/components/inputs)
    * @see [Output properties](guide/components/outputs)
    */
-  (arg?: string|Input): any;
-  new(arg?: string|Input): any;
+  (arg?: string | Input): any;
+  new (arg?: string | Input): any;
 }
 
 /**
@@ -864,13 +879,15 @@ export interface Input {
  * @Annotation
  * @publicApi
  */
-export const Input: InputDecorator =
-    makePropDecorator('Input', (arg?: string|{alias?: string, required?: boolean}) => {
-      if (!arg) {
-        return {};
-      }
-      return typeof arg === 'string' ? {alias: arg} : arg;
-    });
+export const Input: InputDecorator = makePropDecorator(
+  'Input',
+  (arg?: string | {alias?: string; required?: boolean}) => {
+    if (!arg) {
+      return {};
+    }
+    return typeof arg === 'string' ? {alias: arg} : arg;
+  },
+);
 
 /**
  * Type of the Output decorator / constructor function.
@@ -896,7 +913,7 @@ export interface OutputDecorator {
    *
    */
   (alias?: string): any;
-  new(alias?: string): any;
+  new (alias?: string): any;
 }
 
 /**
@@ -917,8 +934,6 @@ export interface Output {
  */
 export const Output: OutputDecorator = makePropDecorator('Output', (alias?: string) => ({alias}));
 
-
-
 /**
  * Type of the HostBinding decorator / constructor function.
  *
@@ -967,7 +982,7 @@ export interface HostBindingDecorator {
    *
    */
   (hostPropertyName?: string): any;
-  new(hostPropertyName?: string): any;
+  new (hostPropertyName?: string): any;
 }
 
 /**
@@ -990,9 +1005,10 @@ export interface HostBinding {
  * @Annotation
  * @publicApi
  */
-export const HostBinding: HostBindingDecorator =
-    makePropDecorator('HostBinding', (hostPropertyName?: string) => ({hostPropertyName}));
-
+export const HostBinding: HostBindingDecorator = makePropDecorator(
+  'HostBinding',
+  (hostPropertyName?: string) => ({hostPropertyName}),
+);
 
 /**
  * Type of the HostListener decorator / constructor function.
@@ -1064,7 +1080,7 @@ export interface HostListenerDecorator {
    *
    */
   (eventName: string, args?: string[]): any;
-  new(eventName: string, args?: string[]): any;
+  new (eventName: string, args?: string[]): any;
 }
 
 /**
@@ -1087,5 +1103,7 @@ export interface HostListener {
  * @Annotation
  * @publicApi
  */
-export const HostListener: HostListenerDecorator =
-    makePropDecorator('HostListener', (eventName?: string, args?: string[]) => ({eventName, args}));
+export const HostListener: HostListenerDecorator = makePropDecorator(
+  'HostListener',
+  (eventName?: string, args?: string[]) => ({eventName, args}),
+);
diff --git a/packages/core/src/metadata/do_bootstrap.ts b/packages/core/src/metadata/do_bootstrap.ts
index d9b1ce22637d9..9c33eb53bd251 100644
--- a/packages/core/src/metadata/do_bootstrap.ts
+++ b/packages/core/src/metadata/do_bootstrap.ts
@@ -8,7 +8,6 @@
 
 import {ApplicationRef} from '../application/application_ref';
 
-
 /**
  * @description
  * Hook for manual bootstrapping of the application instead of using `bootstrap` array in @NgModule
diff --git a/packages/core/src/metadata/ng_module.ts b/packages/core/src/metadata/ng_module.ts
index b3c6310d67716..abef6c4acabd1 100644
--- a/packages/core/src/metadata/ng_module.ts
+++ b/packages/core/src/metadata/ng_module.ts
@@ -12,7 +12,6 @@ import {SchemaMetadata} from '../metadata/schema';
 import {compileNgModule} from '../render3/jit/module';
 import {makeDecorator, TypeDecorator} from '../util/decorators';
 
-
 /**
  * Type of the NgModule decorator / constructor function.
  *
@@ -23,7 +22,7 @@ export interface NgModuleDecorator {
    * Decorator that marks a class as an NgModule and supplies configuration metadata.
    */
   (obj?: NgModule): TypeDecorator;
-  new(obj?: NgModule): NgModule;
+  new (obj?: NgModule): NgModule;
 }
 
 /**
@@ -79,7 +78,7 @@ export interface NgModule {
    * }
    * ```
    */
-  providers?: Array<Provider|EnvironmentProviders>;
+  providers?: Array<Provider | EnvironmentProviders>;
 
   /**
    * The set of components, directives, and pipes (declarables
@@ -107,7 +106,7 @@ export interface NgModule {
    * }
    * ```
    */
-  declarations?: Array<Type<any>|any[]>;
+  declarations?: Array<Type<any> | any[]>;
 
   /**
    * The set of NgModules whose exported declarables
@@ -136,7 +135,7 @@ export interface NgModule {
    * ```
    *
    */
-  imports?: Array<Type<any>|ModuleWithProviders<{}>|any[]>;
+  imports?: Array<Type<any> | ModuleWithProviders<{}> | any[]>;
 
   /**
    * The set of components, directives, and pipes declared in this
@@ -168,12 +167,12 @@ export interface NgModule {
    * }
    * ```
    */
-  exports?: Array<Type<any>|any[]>;
+  exports?: Array<Type<any> | any[]>;
 
   /**
    * The set of components that are bootstrapped when this module is bootstrapped.
    */
-  bootstrap?: Array<Type<any>|any[]>;
+  bootstrap?: Array<Type<any> | any[]>;
 
   /**
    * The set of schemas that declare elements to be allowed in the NgModule.
@@ -185,7 +184,7 @@ export interface NgModule {
    * @security When using one of `NO_ERRORS_SCHEMA` or `CUSTOM_ELEMENTS_SCHEMA`
    * you must ensure that allowed elements and properties securely escape inputs.
    */
-  schemas?: Array<SchemaMetadata|any[]>;
+  schemas?: Array<SchemaMetadata | any[]>;
 
   /**
    * A name or path that uniquely identifies this NgModule in `getNgModuleById`.
@@ -206,16 +205,20 @@ export interface NgModule {
  * @Annotation
  */
 export const NgModule: NgModuleDecorator = makeDecorator(
-    'NgModule', (ngModule: NgModule) => ngModule, undefined, undefined,
-    /**
-     * Decorator that marks the following class as an NgModule, and supplies
-     * configuration metadata for it.
-     *
-     * * The `declarations` option configures the compiler
-     * with information about what belongs to the NgModule.
-     * * The `providers` options configures the NgModule's injector to provide
-     * dependencies the NgModule members.
-     * * The `imports` and `exports` options bring in members from other modules, and make
-     * this module's members available to others.
-     */
-    (type: Type<any>, meta: NgModule) => compileNgModule(type, meta));
+  'NgModule',
+  (ngModule: NgModule) => ngModule,
+  undefined,
+  undefined,
+  /**
+   * Decorator that marks the following class as an NgModule, and supplies
+   * configuration metadata for it.
+   *
+   * * The `declarations` option configures the compiler
+   * with information about what belongs to the NgModule.
+   * * The `providers` options configures the NgModule's injector to provide
+   * dependencies the NgModule members.
+   * * The `imports` and `exports` options bring in members from other modules, and make
+   * this module's members available to others.
+   */
+  (type: Type<any>, meta: NgModule) => compileNgModule(type, meta),
+);
diff --git a/packages/core/src/metadata/ng_module_def.ts b/packages/core/src/metadata/ng_module_def.ts
index 25a1370e4bb64..13ba8da789547 100644
--- a/packages/core/src/metadata/ng_module_def.ts
+++ b/packages/core/src/metadata/ng_module_def.ts
@@ -10,7 +10,6 @@ import {Type} from '../interface/type';
 
 import {SchemaMetadata} from './schema';
 
-
 export interface NgModuleType<T = any> extends Type<T> {
   ɵmod: NgModuleDef<T>;
 }
@@ -25,9 +24,9 @@ export interface NgModuleType<T = any> extends Type<T> {
  * to module A's compilation scope when module A imports B).
  */
 export interface NgModuleTransitiveScopes {
-  compilation: {directives: Set<any>; pipes: Set<any>;};
-  exported: {directives: Set<any>; pipes: Set<any>;};
-  schemas: SchemaMetadata[]|null;
+  compilation: {directives: Set<any>; pipes: Set<any>};
+  exported: {directives: Set<any>; pipes: Set<any>};
+  schemas: SchemaMetadata[] | null;
 }
 
 /**
@@ -49,30 +48,30 @@ export interface NgModuleDef<T> {
    *
    * @see {NgModuleScopeInfoFromDecorator} This field is only used in global compilation mode. In local compilation mode the bootstrap info is computed and added in runtime.
    */
-  bootstrap: Type<any>[]|(() => Type<any>[]);
+  bootstrap: Type<any>[] | (() => Type<any>[]);
 
   /** List of components, directives, and pipes declared by this module. */
-  declarations: Type<any>[]|(() => Type<any>[]);
+  declarations: Type<any>[] | (() => Type<any>[]);
 
   /** List of modules or `ModuleWithProviders` imported by this module. */
-  imports: Type<any>[]|(() => Type<any>[]);
+  imports: Type<any>[] | (() => Type<any>[]);
 
   /**
    * List of modules, `ModuleWithProviders`, components, directives, or pipes exported by this
    * module.
    */
-  exports: Type<any>[]|(() => Type<any>[]);
+  exports: Type<any>[] | (() => Type<any>[]);
 
   /**
    * Cached value of computed `transitiveCompileScopes` for this module.
    *
    * This should never be read directly, but accessed via `transitiveScopesFor`.
    */
-  transitiveCompileScopes: NgModuleTransitiveScopes|null;
+  transitiveCompileScopes: NgModuleTransitiveScopes | null;
 
   /** The set of schemas that declare elements to be allowed in the NgModule. */
-  schemas: SchemaMetadata[]|null;
+  schemas: SchemaMetadata[] | null;
 
   /** Unique ID for the module with which it should be registered.  */
-  id: string|null;
+  id: string | null;
 }
diff --git a/packages/core/src/metadata/resource_loading.ts b/packages/core/src/metadata/resource_loading.ts
index c8c77f2d95bd5..d1c091c0482ba 100644
--- a/packages/core/src/metadata/resource_loading.ts
+++ b/packages/core/src/metadata/resource_loading.ts
@@ -10,7 +10,6 @@ import {Type} from '../interface/type';
 
 import {Component} from './directives';
 
-
 /**
  * Used to resolve resource URLs on `@Component` when used with JIT compilation.
  *
@@ -44,7 +43,8 @@ import {Component} from './directives';
  * contents of the resolved URL. Browser's `fetch()` method is a good default implementation.
  */
 export function resolveComponentResources(
-    resourceResolver: (url: string) => (Promise<string|{text(): Promise<string>}>)): Promise<void> {
+  resourceResolver: (url: string) => Promise<string | {text(): Promise<string>}>,
+): Promise<void> {
   // Store all promises which are fetching the resources.
   const componentResolved: Promise<void>[] = [];
 
@@ -54,7 +54,7 @@ export function resolveComponentResources(
     let promise = urlMap.get(url);
     if (!promise) {
       const resp = resourceResolver(url);
-      urlMap.set(url, promise = resp.then(unwrapResponse));
+      urlMap.set(url, (promise = resp.then(unwrapResponse)));
     }
     return promise;
   }
@@ -62,36 +62,43 @@ export function resolveComponentResources(
   componentResourceResolutionQueue.forEach((component: Component, type: Type<any>) => {
     const promises: Promise<void>[] = [];
     if (component.templateUrl) {
-      promises.push(cachedResourceResolve(component.templateUrl).then((template) => {
-        component.template = template;
-      }));
+      promises.push(
+        cachedResourceResolve(component.templateUrl).then((template) => {
+          component.template = template;
+        }),
+      );
     }
     const styles =
-        typeof component.styles === 'string' ? [component.styles] : (component.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');
+        '@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;
-          }
-        }));
+        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;
-      }));
+      promises.push(
+        cachedResourceResolve(component.styleUrl).then((style) => {
+          styles.push(style);
+          component.styleUrl = undefined;
+        }),
+      );
     }
 
     const fullyResolved = Promise.all(promises).then(() => componentDefResolved(type));
@@ -119,8 +126,10 @@ export function isComponentDefPendingResolution(type: Type<any>): boolean {
 
 export function componentNeedsResolution(component: Component): boolean {
   return !!(
-      (component.templateUrl && !component.hasOwnProperty('template')) ||
-      (component.styleUrls && component.styleUrls.length) || component.styleUrl);
+    (component.templateUrl && !component.hasOwnProperty('template')) ||
+    (component.styleUrls && component.styleUrls.length) ||
+    component.styleUrl
+  );
 }
 export function clearResolutionOfComponentResourcesQueue(): Map<Type<any>, Component> {
   const old = componentResourceResolutionQueue;
@@ -138,7 +147,7 @@ export function isComponentResourceResolutionQueueEmpty() {
   return componentResourceResolutionQueue.size === 0;
 }
 
-function unwrapResponse(response: string|{text(): Promise<string>}): string|Promise<string> {
+function unwrapResponse(response: string | {text(): Promise<string>}): string | Promise<string> {
   return typeof response == 'string' ? response : response.text();
 }
 
diff --git a/packages/core/src/metadata/schema.ts b/packages/core/src/metadata/schema.ts
index a1cf63aed10de..0c11dd4505a60 100644
--- a/packages/core/src/metadata/schema.ts
+++ b/packages/core/src/metadata/schema.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 /**
  * A schema definition associated with an NgModule.
  *
@@ -31,7 +30,7 @@ export interface SchemaMetadata {
  * @publicApi
  */
 export const CUSTOM_ELEMENTS_SCHEMA: SchemaMetadata = {
-  name: 'custom-elements'
+  name: 'custom-elements',
 };
 
 /**
@@ -44,5 +43,5 @@ export const CUSTOM_ELEMENTS_SCHEMA: SchemaMetadata = {
  * @publicApi
  */
 export const NO_ERRORS_SCHEMA: SchemaMetadata = {
-  name: 'no-errors-schema'
+  name: 'no-errors-schema',
 };
diff --git a/packages/core/src/metadata/view.ts b/packages/core/src/metadata/view.ts
index 04838345b191c..fa5ab885918e5 100644
--- a/packages/core/src/metadata/view.ts
+++ b/packages/core/src/metadata/view.ts
@@ -46,5 +46,5 @@ export enum ViewEncapsulation {
    * a ShadowRoot for the component's host element which is then used to encapsulate
    * all the Component's styling.
    */
-  ShadowDom = 3
+  ShadowDom = 3,
 }
diff --git a/packages/core/src/platform/platform.ts b/packages/core/src/platform/platform.ts
index 244d50fd554a3..f6aac1eced3af 100644
--- a/packages/core/src/platform/platform.ts
+++ b/packages/core/src/platform/platform.ts
@@ -6,7 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {publishDefaultGlobalUtils, publishSignalConfiguration} from '../application/application_ref';
+import {
+  publishDefaultGlobalUtils,
+  publishSignalConfiguration,
+} from '../application/application_ref';
 import {PLATFORM_INITIALIZER} from '../application/application_tokens';
 import {InjectionToken, Injector, StaticProvider} from '../di';
 import {INJECTOR_SCOPE} from '../di/scope';
@@ -14,14 +17,15 @@ import {RuntimeError, RuntimeErrorCode} from '../errors';
 
 import {PLATFORM_DESTROY_LISTENERS, PlatformRef} from './platform_ref';
 
-let _platformInjector: Injector|null = null;
+let _platformInjector: Injector | null = 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.
  */
-export const ALLOW_MULTIPLE_PLATFORMS =
-    new InjectionToken<boolean>(ngDevMode ? 'AllowMultipleToken' : '');
+export const ALLOW_MULTIPLE_PLATFORMS = new InjectionToken<boolean>(
+  ngDevMode ? 'AllowMultipleToken' : '',
+);
 
 /**
  * Creates a platform.
@@ -32,9 +36,9 @@ export const ALLOW_MULTIPLE_PLATFORMS =
 export function createPlatform(injector: Injector): PlatformRef {
   if (_platformInjector && !_platformInjector.get(ALLOW_MULTIPLE_PLATFORMS, false)) {
     throw new RuntimeError(
-        RuntimeErrorCode.MULTIPLE_PLATFORMS,
-        ngDevMode &&
-            'There can be only one platform. Destroy the previous one to create a new one.');
+      RuntimeErrorCode.MULTIPLE_PLATFORMS,
+      ngDevMode && 'There can be only one platform. Destroy the previous one to create a new one.',
+    );
   }
   publishDefaultGlobalUtils();
   publishSignalConfiguration();
@@ -56,15 +60,20 @@ export function createPlatform(injector: Injector): PlatformRef {
  * @publicApi
  */
 export function createPlatformFactory(
-    parentPlatformFactory: ((extraProviders?: StaticProvider[]) => PlatformRef)|null, name: string,
-    providers: StaticProvider[] = []): (extraProviders?: StaticProvider[]) => PlatformRef {
+  parentPlatformFactory: ((extraProviders?: StaticProvider[]) => PlatformRef) | null,
+  name: string,
+  providers: StaticProvider[] = [],
+): (extraProviders?: StaticProvider[]) => PlatformRef {
   const desc = `Platform: ${name}`;
   const marker = new InjectionToken(desc);
   return (extraProviders: StaticProvider[] = []) => {
     let platform = getPlatform();
     if (!platform || platform.injector.get(ALLOW_MULTIPLE_PLATFORMS, false)) {
-      const platformProviders: StaticProvider[] =
-          [...providers, ...extraProviders, {provide: marker, useValue: true}];
+      const platformProviders: StaticProvider[] = [
+        ...providers,
+        ...extraProviders,
+        {provide: marker, useValue: true},
+      ];
       if (parentPlatformFactory) {
         parentPlatformFactory(platformProviders);
       } else {
@@ -84,8 +93,8 @@ function createPlatformInjector(providers: StaticProvider[] = [], name?: string)
     name,
     providers: [
       {provide: INJECTOR_SCOPE, useValue: 'platform'},
-      {provide: PLATFORM_DESTROY_LISTENERS, useValue: new Set([() => _platformInjector = null])},
-      ...providers
+      {provide: PLATFORM_DESTROY_LISTENERS, useValue: new Set([() => (_platformInjector = null)])},
+      ...providers,
     ],
   });
 }
@@ -102,11 +111,14 @@ export function assertPlatform(requiredToken: any): PlatformRef {
     throw new RuntimeError(RuntimeErrorCode.PLATFORM_NOT_FOUND, ngDevMode && 'No platform exists!');
   }
 
-  if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
-      !platform.injector.get(requiredToken, null)) {
+  if (
+    (typeof ngDevMode === 'undefined' || ngDevMode) &&
+    !platform.injector.get(requiredToken, null)
+  ) {
     throw new RuntimeError(
-        RuntimeErrorCode.MULTIPLE_PLATFORMS,
-        'A platform with a different configuration has been created. Please destroy it first.');
+      RuntimeErrorCode.MULTIPLE_PLATFORMS,
+      'A platform with a different configuration has been created. Please destroy it first.',
+    );
   }
 
   return platform;
@@ -117,7 +129,7 @@ export function assertPlatform(requiredToken: any): PlatformRef {
  *
  * @publicApi
  */
-export function getPlatform(): PlatformRef|null {
+export function getPlatform(): PlatformRef | null {
   return _platformInjector?.get(PlatformRef) ?? null;
 }
 
diff --git a/packages/core/src/platform/platform_core_providers.ts b/packages/core/src/platform/platform_core_providers.ts
index 75bc072fecf60..04220af429c67 100644
--- a/packages/core/src/platform/platform_core_providers.ts
+++ b/packages/core/src/platform/platform_core_providers.ts
@@ -16,5 +16,5 @@ import {PlatformRef} from './platform_ref';
  *
  * @publicApi
  */
-export const platformCore: (extraProviders?: StaticProvider[]|undefined) => PlatformRef =
-    createPlatformFactory(null, 'core', []);
+export const platformCore: (extraProviders?: StaticProvider[] | undefined) => PlatformRef =
+  createPlatformFactory(null, 'core', []);
diff --git a/packages/core/src/platform/platform_ref.ts b/packages/core/src/platform/platform_ref.ts
index 06735ab8446f2..37cf8724f9d59 100644
--- a/packages/core/src/platform/platform_ref.ts
+++ b/packages/core/src/platform/platform_ref.ts
@@ -8,8 +8,18 @@
 
 import {ApplicationInitStatus} from '../application/application_init';
 import {compileNgModuleFactory} from '../application/application_ngmodule_factory_compiler';
-import {_callAndReportToErrorHandler, ApplicationRef, BootstrapOptions, optionsReducer, remove} from '../application/application_ref';
-import {getNgZoneOptions, internalProvideZoneChangeDetection, PROVIDED_NG_ZONE} from '../change_detection/scheduling/ng_zone_scheduling';
+import {
+  _callAndReportToErrorHandler,
+  ApplicationRef,
+  BootstrapOptions,
+  optionsReducer,
+  remove,
+} from '../application/application_ref';
+import {
+  getNgZoneOptions,
+  internalProvideZoneChangeDetection,
+  PROVIDED_NG_ZONE,
+} from '../change_detection/scheduling/ng_zone_scheduling';
 import {Injectable, InjectionToken, Injector} from '../di';
 import {ErrorHandler} from '../error_handler';
 import {RuntimeError, RuntimeErrorCode} from '../errors';
@@ -23,15 +33,15 @@ import {createNgModuleRefWithProviders} from '../render3/ng_module_ref';
 import {stringify} from '../util/stringify';
 import {getNgZone} from '../zone/ng_zone';
 
-
 /**
  * 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.
  */
-export const PLATFORM_DESTROY_LISTENERS =
-    new InjectionToken<Set<VoidFunction>>(ngDevMode ? 'PlatformDestroyListeners' : '');
+export const PLATFORM_DESTROY_LISTENERS = new InjectionToken<Set<VoidFunction>>(
+  ngDevMode ? 'PlatformDestroyListeners' : '',
+);
 
 /**
  * The Angular platform is the entry point for Angular on a web page.
@@ -57,16 +67,21 @@ export class PlatformRef {
    * @deprecated Passing NgModule factories as the `PlatformRef.bootstrapModuleFactory` function
    *     argument is deprecated. Use the `PlatformRef.bootstrapModule` API instead.
    */
-  bootstrapModuleFactory<M>(moduleFactory: NgModuleFactory<M>, options?: BootstrapOptions):
-      Promise<NgModuleRef<M>> {
+  bootstrapModuleFactory<M>(
+    moduleFactory: NgModuleFactory<M>,
+    options?: BootstrapOptions,
+  ): Promise<NgModuleRef<M>> {
     // 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
-                             }));
+    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
@@ -74,30 +89,33 @@ export class PlatformRef {
     return ngZone.run(() => {
       const ignoreChangesOutsideZone = options?.ignoreChangesOutsideZone;
       const moduleRef = createNgModuleRefWithProviders(
-          moduleFactory.moduleType,
-          this.injector,
-          internalProvideZoneChangeDetection(
-              {ngZoneFactory: () => ngZone, ignoreChangesOutsideZone}),
+        moduleFactory.moduleType,
+        this.injector,
+        internalProvideZoneChangeDetection({ngZoneFactory: () => ngZone, ignoreChangesOutsideZone}),
       );
 
-      if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
-          moduleRef.injector.get(PROVIDED_NG_ZONE, null) !== null) {
+      if (
+        (typeof ngDevMode === 'undefined' || ngDevMode) &&
+        moduleRef.injector.get(PROVIDED_NG_ZONE, null) !== null
+      ) {
         throw new RuntimeError(
-            RuntimeErrorCode.PROVIDER_IN_WRONG_CONTEXT,
-            '`bootstrapModule` does not support `provideZoneChangeDetection`. Use `BootstrapOptions` instead.');
+          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(
-            RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP,
-            'No ErrorHandler. Is platform module (BrowserModule) included?');
+          RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP,
+          'No ErrorHandler. Is platform module (BrowserModule) included?',
+        );
       }
       ngZone.runOutsideAngular(() => {
         const subscription = ngZone.onError.subscribe({
           next: (error: any) => {
             exceptionHandler!.handleError(error);
-          }
+          },
         });
         moduleRef.onDestroy(() => {
           remove(this._modules, moduleRef);
@@ -135,27 +153,31 @@ export class PlatformRef {
    *
    */
   bootstrapModule<M>(
-      moduleType: Type<M>,
-      compilerOptions: (CompilerOptions&BootstrapOptions)|
-      Array<CompilerOptions&BootstrapOptions> = []): Promise<NgModuleRef<M>> {
+    moduleType: Type<M>,
+    compilerOptions:
+      | (CompilerOptions & BootstrapOptions)
+      | Array<CompilerOptions & BootstrapOptions> = [],
+  ): Promise<NgModuleRef<M>> {
     const options = optionsReducer({}, compilerOptions);
-    return compileNgModuleFactory(this.injector, options, moduleType)
-        .then(moduleFactory => this.bootstrapModuleFactory(moduleFactory, options));
+    return compileNgModuleFactory(this.injector, options, moduleType).then((moduleFactory) =>
+      this.bootstrapModuleFactory(moduleFactory, options),
+    );
   }
 
   private _moduleDoBootstrap(moduleRef: InternalNgModuleRef<any>): void {
     const appRef = moduleRef.injector.get(ApplicationRef);
     if (moduleRef._bootstrapComponents.length > 0) {
-      moduleRef._bootstrapComponents.forEach(f => appRef.bootstrap(f));
+      moduleRef._bootstrapComponents.forEach((f) => appRef.bootstrap(f));
     } else if (moduleRef.instance.ngDoBootstrap) {
       moduleRef.instance.ngDoBootstrap(appRef);
     } else {
       throw new RuntimeError(
-          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.`);
+        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);
   }
@@ -182,15 +204,16 @@ export class PlatformRef {
   destroy() {
     if (this._destroyed) {
       throw new RuntimeError(
-          RuntimeErrorCode.PLATFORM_ALREADY_DESTROYED,
-          ngDevMode && 'The platform has already been destroyed!');
+        RuntimeErrorCode.PLATFORM_ALREADY_DESTROYED,
+        ngDevMode && 'The platform has already been destroyed!',
+      );
     }
-    this._modules.slice().forEach(module => module.destroy());
-    this._destroyListeners.forEach(listener => listener());
+    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.forEach((listener) => listener());
       destroyListeners.clear();
     }
 
diff --git a/packages/core/src/r3_symbols.ts b/packages/core/src/r3_symbols.ts
index 90ccc0bf7ebf1..c4051acf00251 100644
--- a/packages/core/src/r3_symbols.ts
+++ b/packages/core/src/r3_symbols.ts
@@ -25,13 +25,15 @@ export {ɵɵinject} from './di/injector_compatibility';
 export {ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵInjectableDeclaration} from './di/interface/defs';
 export {NgModuleDef} from './metadata/ng_module_def';
 export {ɵɵdefineNgModule} from './render3/definition';
-export {ɵɵFactoryDeclaration, ɵɵInjectorDeclaration, ɵɵNgModuleDeclaration} from './render3/interfaces/public_definitions';
+export {
+  ɵɵFactoryDeclaration,
+  ɵɵInjectorDeclaration,
+  ɵɵNgModuleDeclaration,
+} from './render3/interfaces/public_definitions';
 export {setClassMetadata, setClassMetadataAsync} from './render3/metadata';
 export {NgModuleFactory} from './render3/ng_module_ref';
 export {noSideEffects as ɵnoSideEffects} from './util/closure';
 
-
-
 /**
  * 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.
diff --git a/packages/core/src/reflection/reflection_capabilities.ts b/packages/core/src/reflection/reflection_capabilities.ts
index f6e7c014551b3..1d989e44f4882 100644
--- a/packages/core/src/reflection/reflection_capabilities.ts
+++ b/packages/core/src/reflection/reflection_capabilities.ts
@@ -13,8 +13,6 @@ import {global} from '../util/global';
 
 import {PlatformReflectionCapabilities} from './platform_reflection_capabilities';
 
-
-
 /*
  * #########################
  * Attention: These Regular expressions have to hold even if the code is minified!
@@ -47,7 +45,7 @@ import {PlatformReflectionCapabilities} from './platform_reflection_capabilities
  * More details can be found in: https://github.com/angular/angular/issues/38453.
  */
 export const ES5_DELEGATE_CTOR =
-    /^function\s+\S+\(\)\s*{[\s\S]+\.apply\(this,\s*(arguments|(?:[^()]+\(\[\],)?[^()]+\(arguments\).*)\)/;
+  /^function\s+\S+\(\)\s*{[\s\S]+\.apply\(this,\s*(arguments|(?:[^()]+\(\[\],)?[^()]+\(arguments\).*)\)/;
 /** Regular expression that detects ES2015 classes which extend from other classes. */
 export const ES2015_INHERITED_CLASS = /^class\s+[A-Za-z\d$_]*\s*extends\s+[^{]+{/;
 /**
@@ -55,13 +53,13 @@ export const ES2015_INHERITED_CLASS = /^class\s+[A-Za-z\d$_]*\s*extends\s+[^{]+{
  * have an explicit constructor defined.
  */
 export const ES2015_INHERITED_CLASS_WITH_CTOR =
-    /^class\s+[A-Za-z\d$_]*\s*extends\s+[^{]+{[\s\S]*constructor\s*\(/;
+  /^class\s+[A-Za-z\d$_]*\s*extends\s+[^{]+{[\s\S]*constructor\s*\(/;
 /**
  * Regular expression that detects ES2015 classes which extend from other classes
  * and inherit a constructor.
  */
 export const ES2015_INHERITED_CLASS_WITH_DELEGATE_CTOR =
-    /^class\s+[A-Za-z\d$_]*\s*extends\s+[^{]+{[\s\S]*constructor\s*\(\)\s*{[^}]*super\(\.\.\.arguments\)/;
+  /^class\s+[A-Za-z\d$_]*\s*extends\s+[^{]+{[\s\S]*constructor\s*\(\)\s*{[^}]*super\(\.\.\.arguments\)/;
 
 /**
  * Determine whether a stringified type is a class which delegates its constructor
@@ -72,9 +70,11 @@ export const ES2015_INHERITED_CLASS_WITH_DELEGATE_CTOR =
  * an initialized instance property.
  */
 export function isDelegateCtor(typeStr: string): boolean {
-  return ES5_DELEGATE_CTOR.test(typeStr) ||
-      ES2015_INHERITED_CLASS_WITH_DELEGATE_CTOR.test(typeStr) ||
-      (ES2015_INHERITED_CLASS.test(typeStr) && !ES2015_INHERITED_CLASS_WITH_CTOR.test(typeStr));
+  return (
+    ES5_DELEGATE_CTOR.test(typeStr) ||
+    ES2015_INHERITED_CLASS_WITH_DELEGATE_CTOR.test(typeStr) ||
+    (ES2015_INHERITED_CLASS.test(typeStr) && !ES2015_INHERITED_CLASS_WITH_CTOR.test(typeStr))
+  );
 }
 
 export class ReflectionCapabilities implements PlatformReflectionCapabilities {
@@ -116,7 +116,7 @@ export class ReflectionCapabilities implements PlatformReflectionCapabilities {
     return result;
   }
 
-  private _ownParameters(type: Type<any>, parentCtor: any): any[][]|null {
+  private _ownParameters(type: Type<any>, parentCtor: any): any[][] | null {
     const typeStr = type.toString();
     // If we have no decorators, we only have function.length as metadata.
     // In that case, to detect whether a child class declared an own constructor or not,
@@ -140,18 +140,20 @@ export class ReflectionCapabilities implements PlatformReflectionCapabilities {
       // Newer tsickle uses a function closure
       // Retain the non-function case for compatibility with older tsickle
       const ctorParameters =
-          typeof tsickleCtorParams === 'function' ? tsickleCtorParams() : tsickleCtorParams;
+        typeof tsickleCtorParams === 'function' ? tsickleCtorParams() : tsickleCtorParams;
       const paramTypes = ctorParameters.map((ctorParam: any) => ctorParam && ctorParam.type);
       const paramAnnotations = ctorParameters.map(
-          (ctorParam: any) =>
-              ctorParam && convertTsickleDecoratorIntoMetadata(ctorParam.decorators));
+        (ctorParam: any) => ctorParam && convertTsickleDecoratorIntoMetadata(ctorParam.decorators),
+      );
       return this._zipTypesAndAnnotations(paramTypes, paramAnnotations);
     }
 
     // API for metadata created by invoking the decorators.
     const paramAnnotations = type.hasOwnProperty(PARAMETERS) && (type as any)[PARAMETERS];
-    const paramTypes = this._reflect && this._reflect.getOwnMetadata &&
-        this._reflect.getOwnMetadata('design:paramtypes', type);
+    const paramTypes =
+      this._reflect &&
+      this._reflect.getOwnMetadata &&
+      this._reflect.getOwnMetadata('design:paramtypes', type);
     if (paramTypes || paramAnnotations) {
       return this._zipTypesAndAnnotations(paramTypes, paramAnnotations);
     }
@@ -177,7 +179,7 @@ export class ReflectionCapabilities implements PlatformReflectionCapabilities {
     return parameters || [];
   }
 
-  private _ownAnnotations(typeOrFunc: Type<any>, parentCtor: any): any[]|null {
+  private _ownAnnotations(typeOrFunc: Type<any>, parentCtor: any): any[] | null {
     // Prefer the direct API.
     if ((<any>typeOrFunc).annotations && (<any>typeOrFunc).annotations !== parentCtor.annotations) {
       let annotations = (<any>typeOrFunc).annotations;
@@ -209,10 +211,12 @@ export class ReflectionCapabilities implements PlatformReflectionCapabilities {
     return parentAnnotations.concat(ownAnnotations);
   }
 
-  private _ownPropMetadata(typeOrFunc: any, parentCtor: any): {[key: string]: any[]}|null {
+  private _ownPropMetadata(typeOrFunc: any, parentCtor: any): {[key: string]: any[]} | null {
     // Prefer the direct API.
-    if ((<any>typeOrFunc).propMetadata &&
-        (<any>typeOrFunc).propMetadata !== parentCtor.propMetadata) {
+    if (
+      (<any>typeOrFunc).propMetadata &&
+      (<any>typeOrFunc).propMetadata !== parentCtor.propMetadata
+    ) {
       let propMetadata = (<any>typeOrFunc).propMetadata;
       if (typeof propMetadata === 'function' && propMetadata.propMetadata) {
         propMetadata = propMetadata.propMetadata;
@@ -221,11 +225,13 @@ export class ReflectionCapabilities implements PlatformReflectionCapabilities {
     }
 
     // API of tsickle for lowering decorators to properties on the class.
-    if ((<any>typeOrFunc).propDecorators &&
-        (<any>typeOrFunc).propDecorators !== parentCtor.propDecorators) {
+    if (
+      (<any>typeOrFunc).propDecorators &&
+      (<any>typeOrFunc).propDecorators !== parentCtor.propDecorators
+    ) {
       const propDecorators = (<any>typeOrFunc).propDecorators;
       const propMetadata = <{[key: string]: any[]}>{};
-      Object.keys(propDecorators).forEach(prop => {
+      Object.keys(propDecorators).forEach((prop) => {
         propMetadata[prop] = convertTsickleDecoratorIntoMetadata(propDecorators[prop]);
       });
       return propMetadata;
@@ -280,7 +286,7 @@ function convertTsickleDecoratorIntoMetadata(decoratorInvocations: any[]): any[]
   if (!decoratorInvocations) {
     return [];
   }
-  return decoratorInvocations.map(decoratorInvocation => {
+  return decoratorInvocations.map((decoratorInvocation) => {
     const decoratorType = decoratorInvocation.type;
     const annotationCls = decoratorType.annotationCls;
     const annotationArgs = decoratorInvocation.args ? decoratorInvocation.args : [];
diff --git a/packages/core/src/render/api.ts b/packages/core/src/render/api.ts
index f473b061a64ec..11945267ed509 100644
--- a/packages/core/src/render/api.ts
+++ b/packages/core/src/render/api.ts
@@ -13,7 +13,6 @@ import {getComponentLViewByIndex} from '../render3/util/view_utils';
 
 import {RendererStyleFlags2, RendererType2} from './api_flags';
 
-
 /**
  * Creates and initializes a custom renderer that implements the `Renderer2` base class.
  *
@@ -26,7 +25,7 @@ export abstract class RendererFactory2 {
    * @param type The base class to implement.
    * @returns The new custom renderer instance.
    */
-  abstract createRenderer(hostElement: any, type: RendererType2|null): Renderer2;
+  abstract createRenderer(hostElement: any, type: RendererType2 | null): Renderer2;
   /**
    * A callback invoked when rendering has begun.
    */
@@ -42,7 +41,6 @@ export abstract class RendererFactory2 {
   abstract whenRenderingDone?(): Promise<any>;
 }
 
-
 /**
  * Extend this base class to implement custom rendering. By default, Angular
  * renders a template into DOM. You can use custom rendering to intercept
@@ -76,7 +74,7 @@ export abstract class Renderer2 {
    * @param namespace The namespace for the new element.
    * @returns The new element.
    */
-  abstract createElement(name: string, namespace?: string|null): any;
+  abstract createElement(name: string, namespace?: string | null): any;
   /**
    * Implement this callback to add a comment to the DOM of the host element.
    * @param value The comment text.
@@ -94,7 +92,7 @@ export abstract class Renderer2 {
    * If null or undefined, the view engine won't call it.
    * This is used as a performance optimization for production mode.
    */
-  destroyNode: ((node: any) => void)|null = null;
+  destroyNode: ((node: any) => void) | null = null;
   /**
    * Appends a child to a given parent node in the host element DOM.
    * @param parent The parent node.
@@ -132,7 +130,7 @@ export abstract class Renderer2 {
    * content projection via `<slot>` elements.
    * @returns The root element.
    */
-  abstract selectRootElement(selectorOrNode: string|any, preserveContent?: boolean): any;
+  abstract selectRootElement(selectorOrNode: string | any, preserveContent?: boolean): any;
   /**
    * Implement this callback to get the parent of a given node
    * in the host element's DOM.
@@ -157,7 +155,7 @@ export abstract class Renderer2 {
    * @param value The new value.
    * @param namespace The namespace.
    */
-  abstract setAttribute(el: any, name: string, value: string, namespace?: string|null): void;
+  abstract setAttribute(el: any, name: string, value: string, namespace?: string | null): void;
 
   /**
    * Implement this callback to remove an attribute from an element in the DOM.
@@ -165,7 +163,7 @@ export abstract class Renderer2 {
    * @param name The attribute name.
    * @param namespace The namespace.
    */
-  abstract removeAttribute(el: any, name: string, namespace?: string|null): void;
+  abstract removeAttribute(el: any, name: string, namespace?: string | null): void;
   /**
    * Implement this callback to add a class to an element in the DOM.
    * @param el The element.
@@ -222,8 +220,10 @@ export abstract class Renderer2 {
    * @returns An "unlisten" function for disposing of this handler.
    */
   abstract listen(
-      target: 'window'|'document'|'body'|any, eventName: string,
-      callback: (event: any) => boolean | void): () => void;
+    target: 'window' | 'document' | 'body' | any,
+    eventName: string,
+    callback: (event: any) => boolean | void,
+  ): () => void;
 
   /**
    * @internal
diff --git a/packages/core/src/render/api_flags.ts b/packages/core/src/render/api_flags.ts
index 66cdd62cf1ed0..5aa6d4207bf11 100644
--- a/packages/core/src/render/api_flags.ts
+++ b/packages/core/src/render/api_flags.ts
@@ -8,7 +8,6 @@
 
 import {ViewEncapsulation} from '../metadata/view';
 
-
 /**
  * Used by `RendererFactory2` to associate custom rendering data and styles
  * with a rendering implementation.
@@ -42,7 +41,6 @@ export interface RendererType2 {
   data: {[kind: string]: any};
 }
 
-
 /**
  * Flags for renderer-specific style modifiers.
  * @publicApi
@@ -58,5 +56,5 @@ export enum RendererStyleFlags2 {
   /**
    * Marks a style as using dash case naming (this-is-dash-case).
    */
-  DashCase = 1 << 1
+  DashCase = 1 << 1,
 }
diff --git a/packages/core/src/render3/after_render_hooks.ts b/packages/core/src/render3/after_render_hooks.ts
index 6104f196371c4..5b0037969f0e7 100644
--- a/packages/core/src/render3/after_render_hooks.ts
+++ b/packages/core/src/render3/after_render_hooks.ts
@@ -6,7 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionScheduler, NotificationSource} from '../change_detection/scheduling/zoneless_scheduling';
+import {
+  ChangeDetectionScheduler,
+  NotificationSource,
+} from '../change_detection/scheduling/zoneless_scheduling';
 import {assertInInjectionContext, Injector, runInInjectionContext, ɵɵdefineInjectable} from '../di';
 import {inject} from '../di/injector_compatibility';
 import {ErrorHandler} from '../error_handler';
@@ -138,7 +141,7 @@ export interface InternalAfterNextRenderOptions {
 
 /** `AfterRenderRef` that does nothing. */
 const NOOP_AFTER_RENDER_REF: AfterRenderRef = {
-  destroy() {}
+  destroy() {},
 };
 
 /**
@@ -157,7 +160,9 @@ const NOOP_AFTER_RENDER_REF: AfterRenderRef = {
  *       to be tree-shaken, and the framework shouldn't need much of the behavior.
  */
 export function internalAfterNextRender(
-    callback: VoidFunction, options?: InternalAfterNextRenderOptions) {
+  callback: VoidFunction,
+  options?: InternalAfterNextRenderOptions,
+) {
   const injector = options?.injector ?? inject(Injector);
 
   // Similarly to the public `afterNextRender` function, an internal one
@@ -218,10 +223,11 @@ export function internalAfterNextRender(
  */
 export function afterRender(callback: VoidFunction, options?: AfterRenderOptions): AfterRenderRef {
   ngDevMode &&
-      assertNotInReactiveContext(
-          afterRender,
-          'Call `afterRender` outside of a reactive context. For example, schedule the render ' +
-              'callback inside the component constructor`.');
+    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);
@@ -235,7 +241,8 @@ export function afterRender(callback: VoidFunction, options?: AfterRenderOptions
   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 callbackHandler = (afterRenderEventManager.handler ??=
+    new AfterRenderCallbackHandlerImpl());
   const phase = options?.phase ?? AfterRenderPhase.MixedReadWrite;
   const destroy = () => {
     callbackHandler.unregister(instance);
@@ -298,7 +305,9 @@ export function afterRender(callback: VoidFunction, options?: AfterRenderOptions
  * @developerPreview
  */
 export function afterNextRender(
-    callback: VoidFunction, options?: AfterRenderOptions): AfterRenderRef {
+  callback: VoidFunction,
+  options?: AfterRenderOptions,
+): AfterRenderRef {
   !options && assertInInjectionContext(afterNextRender);
   const injector = options?.injector ?? inject(Injector);
 
@@ -311,17 +320,22 @@ export function afterNextRender(
   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 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 = runInInjectionContext(injector, () => new AfterRenderCallback(phase, () => {
-                                                     destroy();
-                                                     callback();
-                                                   }));
+  const instance = runInInjectionContext(
+    injector,
+    () =>
+      new AfterRenderCallback(phase, () => {
+        destroy();
+        callback();
+      }),
+  );
 
   callbackHandler.register(instance);
   return {destroy};
@@ -333,7 +347,10 @@ export function afterNextRender(
 class AfterRenderCallback {
   private errorHandler = inject(ErrorHandler, {optional: true});
 
-  constructor(readonly phase: AfterRenderPhase, private callbackFn: VoidFunction) {
+  constructor(
+    readonly phase: AfterRenderPhase,
+    private callbackFn: VoidFunction,
+  ) {
     // Registering a callback will notify the scheduler.
     inject(ChangeDetectionScheduler, {optional: true})?.notify(NotificationSource.NewRenderHook);
   }
@@ -428,7 +445,7 @@ class AfterRenderCallbackHandlerImpl implements AfterRenderCallbackHandler {
  */
 export class AfterRenderEventManager {
   /* @internal */
-  handler: AfterRenderCallbackHandler|null = null;
+  handler: AfterRenderCallbackHandler | null = null;
 
   /* @internal */
   internalCallbacks: VoidFunction[] = [];
diff --git a/packages/core/src/render3/apply_value_input_field.ts b/packages/core/src/render3/apply_value_input_field.ts
index 7c493b0c422db..1bfabd10ab304 100644
--- a/packages/core/src/render3/apply_value_input_field.ts
+++ b/packages/core/src/render3/apply_value_input_field.ts
@@ -6,12 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {InputSignalNode} from '../authoring/input/input_signal_node';
 
 export function applyValueToInputField<T>(
-    instance: T, inputSignalNode: null|InputSignalNode<unknown, unknown>, privateName: string,
-    value: unknown) {
+  instance: T,
+  inputSignalNode: null | InputSignalNode<unknown, unknown>,
+  privateName: string,
+  value: unknown,
+) {
   if (inputSignalNode !== null) {
     inputSignalNode.applyValueToInputSignal(inputSignalNode, value);
   } else {
diff --git a/packages/core/src/render3/assert.ts b/packages/core/src/render3/assert.ts
index 26dfb38ffadc0..63abb415bfe0f 100644
--- a/packages/core/src/render3/assert.ts
+++ b/packages/core/src/render3/assert.ts
@@ -16,12 +16,20 @@ import {TIcu} from './interfaces/i18n';
 import {NodeInjectorOffset} from './interfaces/injector';
 import {TNode} from './interfaces/node';
 import {isLContainer, isLView} from './interfaces/type_checks';
-import {DECLARATION_COMPONENT_VIEW, FLAGS, HEADER_OFFSET, LView, LViewFlags, T_HOST, TVIEW, TView} from './interfaces/view';
+import {
+  DECLARATION_COMPONENT_VIEW,
+  FLAGS,
+  HEADER_OFFSET,
+  LView,
+  LViewFlags,
+  T_HOST,
+  TVIEW,
+  TView,
+} from './interfaces/view';
 
 // [Assert functions do not constraint type when they are guarded by a truthy
 // expression.](https://github.com/microsoft/TypeScript/issues/37295)
 
-
 export function assertTNodeForLView(tNode: TNode, lView: LView) {
   assertTNodeForTView(tNode, lView[TVIEW]);
 }
@@ -44,7 +52,6 @@ export function assertTNode(tNode: TNode) {
   }
 }
 
-
 export function assertTIcu(tIcu: TIcu) {
   assertDefined(tIcu, 'Expected TIcu to be defined');
   if (!(typeof tIcu.currentCaseLViewIndex === 'number')) {
@@ -53,16 +60,18 @@ export function assertTIcu(tIcu: TIcu) {
 }
 
 export function assertComponentType(
-    actual: any,
-    msg: string = 'Type passed in is not ComponentType, it does not have \'ɵcmp\' property.') {
+  actual: any,
+  msg: string = "Type passed in is not ComponentType, it does not have 'ɵcmp' property.",
+) {
   if (!getComponentDef(actual)) {
     throwError(msg);
   }
 }
 
 export function assertNgModuleType(
-    actual: any,
-    msg: string = 'Type passed in is not NgModuleType, it does not have \'ɵmod\' property.') {
+  actual: any,
+  msg: string = "Type passed in is not NgModuleType, it does not have 'ɵmod' property.",
+) {
   if (!getNgModuleDef(actual)) {
     throwError(msg);
   }
@@ -72,7 +81,7 @@ export function assertCurrentTNodeIsParent(isParent: boolean) {
   assertEqual(isParent, true, 'currentTNode should be a parent');
 }
 
-export function assertHasParent(tNode: TNode|null) {
+export function assertHasParent(tNode: TNode | null) {
   assertDefined(tNode, 'currentTNode should exist!');
   assertDefined(tNode!.parent, 'currentTNode should have a parent');
 }
@@ -82,7 +91,7 @@ export function assertLContainer(value: any): asserts value is LContainer {
   assertEqual(isLContainer(value), true, 'Expecting LContainer');
 }
 
-export function assertLViewOrUndefined(value: any): asserts value is LView|null|undefined {
+export function assertLViewOrUndefined(value: any): asserts value is LView | null | undefined {
   value && assertEqual(isLView(value), true, 'Expecting LView or undefined or null');
 }
 
@@ -93,12 +102,18 @@ export function assertLView(value: any): asserts value is LView {
 
 export function assertFirstCreatePass(tView: TView, errMessage?: string) {
   assertEqual(
-      tView.firstCreatePass, true, errMessage || 'Should only be called in first create pass.');
+    tView.firstCreatePass,
+    true,
+    errMessage || 'Should only be called in first create pass.',
+  );
 }
 
 export function assertFirstUpdatePass(tView: TView, errMessage?: string) {
   assertEqual(
-      tView.firstUpdatePass, true, errMessage || 'Should only be called in first update pass.');
+    tView.firstUpdatePass,
+    true,
+    errMessage || 'Should only be called in first update pass.',
+  );
 }
 
 /**
@@ -108,7 +123,8 @@ export function assertFirstUpdatePass(tView: TView, errMessage?: string) {
 export function assertDirectiveDef<T>(obj: any): asserts obj is DirectiveDef<T> {
   if (obj.type === undefined || obj.selectors == undefined || obj.inputs === undefined) {
     throwError(
-        `Expected a DirectiveDef/ComponentDef and this object does not seem to have the expected shape.`);
+      `Expected a DirectiveDef/ComponentDef and this object does not seem to have the expected shape.`,
+    );
   }
 }
 
@@ -130,15 +146,17 @@ export function assertBetween(lower: number, upper: number, index: number) {
 export function assertProjectionSlots(lView: LView, errMessage?: string) {
   assertDefined(lView[DECLARATION_COMPONENT_VIEW], 'Component views should exist.');
   assertDefined(
-      lView[DECLARATION_COMPONENT_VIEW][T_HOST]!.projection,
-      errMessage ||
-          'Components with projection nodes (<ng-content>) must have projection slots defined.');
+    lView[DECLARATION_COMPONENT_VIEW][T_HOST]!.projection,
+    errMessage ||
+      'Components with projection nodes (<ng-content>) must have projection slots defined.',
+  );
 }
 
-export function assertParentView(lView: LView|null, errMessage?: string) {
+export function assertParentView(lView: LView | null, errMessage?: string) {
   assertDefined(
-      lView,
-      errMessage || 'Component views should always have a parent view (component\'s host view)');
+    lView,
+    errMessage || "Component views should always have a parent view (component's host view)",
+  );
 }
 
 export function assertNoDuplicateDirectives(directives: DirectiveDef<unknown>[]): void {
@@ -152,9 +170,10 @@ export function assertNoDuplicateDirectives(directives: DirectiveDef<unknown>[])
   for (const current of directives) {
     if (seenDirectives.has(current)) {
       throw new RuntimeError(
-          RuntimeErrorCode.DUPLICATE_DIRECTIVE,
-          `Directive ${current.type.name} matches multiple times on the same element. ` +
-              `Directives can only match an element once.`);
+        RuntimeErrorCode.DUPLICATE_DIRECTIVE,
+        `Directive ${current.type.name} matches multiple times on the same element. ` +
+          `Directives can only match an element once.`,
+      );
     }
     seenDirectives.add(current);
   }
@@ -179,6 +198,7 @@ export function assertNodeInjector(lView: LView, injectorIndex: number) {
   assertNumber(lView[injectorIndex + 6], 'injectorIndex should point to a bloom filter');
   assertNumber(lView[injectorIndex + 7], 'injectorIndex should point to a bloom filter');
   assertNumber(
-      lView[injectorIndex + NodeInjectorOffset.PARENT],
-      'injectorIndex should point to parent injector');
+    lView[injectorIndex + NodeInjectorOffset.PARENT],
+    'injectorIndex should point to parent injector',
+  );
 }
diff --git a/packages/core/src/render3/bindings.ts b/packages/core/src/render3/bindings.ts
index 719f2a2131073..9fe63c1f30c73 100644
--- a/packages/core/src/render3/bindings.ts
+++ b/packages/core/src/render3/bindings.ts
@@ -14,19 +14,17 @@ import {LView} from './interfaces/view';
 import {isInCheckNoChangesMode} from './state';
 import {NO_CHANGE} from './tokens';
 
-
 // TODO(misko): consider inlining
 /** Updates binding and returns the value. */
 export function updateBinding(lView: LView, bindingIndex: number, value: any): any {
-  return lView[bindingIndex] = value;
+  return (lView[bindingIndex] = value);
 }
 
-
 /** Gets the current binding value. */
 export function getBinding(lView: LView, bindingIndex: number): any {
   ngDevMode && assertIndexInRange(lView, bindingIndex);
   ngDevMode &&
-      assertNotSame(lView[bindingIndex], NO_CHANGE, 'Stored value should never be NO_CHANGE.');
+    assertNotSame(lView[bindingIndex], NO_CHANGE, 'Stored value should never be NO_CHANGE.');
   return lView[bindingIndex];
 }
 
@@ -46,7 +44,7 @@ export function getBinding(lView: LView, bindingIndex: number): any {
 export function bindingUpdated(lView: LView, bindingIndex: number, value: any): boolean {
   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`);
+    assertLessThan(bindingIndex, lView.length, `Slot should have been initialized to NO_CHANGE`);
   const oldValue = lView[bindingIndex];
 
   if (Object.is(oldValue, value)) {
@@ -57,10 +55,19 @@ export function bindingUpdated(lView: LView, bindingIndex: number, value: any):
       // (before the change detection was run).
       const oldValueToCompare = oldValue !== NO_CHANGE ? oldValue : undefined;
       if (!devModeEqual(oldValueToCompare, value)) {
-        const details =
-            getExpressionChangedErrorDetails(lView, bindingIndex, oldValueToCompare, value);
+        const details = getExpressionChangedErrorDetails(
+          lView,
+          bindingIndex,
+          oldValueToCompare,
+          value,
+        );
         throwErrorIfNoChangesMode(
-            oldValue === NO_CHANGE, details.oldValue, details.newValue, details.propName, lView);
+          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
@@ -81,14 +88,25 @@ export function bindingUpdated2(lView: LView, bindingIndex: number, exp1: any, e
 
 /** Updates 3 bindings if changed, then returns whether any was updated. */
 export function bindingUpdated3(
-    lView: LView, bindingIndex: number, exp1: any, exp2: any, exp3: any): boolean {
+  lView: LView,
+  bindingIndex: number,
+  exp1: any,
+  exp2: any,
+  exp3: any,
+): boolean {
   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. */
 export function bindingUpdated4(
-    lView: LView, bindingIndex: number, exp1: any, exp2: any, exp3: any, exp4: any): boolean {
+  lView: LView,
+  bindingIndex: number,
+  exp1: any,
+  exp2: any,
+  exp3: any,
+  exp4: any,
+): boolean {
   const different = bindingUpdated2(lView, bindingIndex, exp1, exp2);
   return bindingUpdated2(lView, bindingIndex + 2, exp3, exp4) || different;
 }
diff --git a/packages/core/src/render3/collect_native_nodes.ts b/packages/core/src/render3/collect_native_nodes.ts
index 7a264ea2b1de8..8e5ee0e2be50d 100644
--- a/packages/core/src/render3/collect_native_nodes.ts
+++ b/packages/core/src/render3/collect_native_nodes.ts
@@ -17,15 +17,19 @@ import {assertTNodeType} from './node_assert';
 import {getProjectionNodes} from './node_manipulation';
 import {getLViewParent, unwrapRNode} from './util/view_utils';
 
-
 export function collectNativeNodes(
-    tView: TView, lView: LView, tNode: TNode|null, result: any[],
-    isProjection: boolean = false): any[] {
+  tView: TView,
+  lView: LView,
+  tNode: TNode | null,
+  result: any[],
+  isProjection: boolean = false,
+): any[] {
   while (tNode !== null) {
     ngDevMode &&
-        assertTNodeType(
-            tNode,
-            TNodeType.AnyRNode | TNodeType.AnyContainer | TNodeType.Projection | TNodeType.Icu);
+      assertTNodeType(
+        tNode,
+        TNodeType.AnyRNode | TNodeType.AnyContainer | TNodeType.Projection | TNodeType.Icu,
+      );
 
     const lNode = lView[tNode.index];
     if (lNode !== null) {
@@ -44,8 +48,8 @@ export function collectNativeNodes(
       collectNativeNodes(tView, lView, tNode.child, result);
     } else if (tNodeType & TNodeType.Icu) {
       const nextRNode = icuContainerIterate(tNode as TIcuContainerNode, lView);
-      let rNode: RNode|null;
-      while (rNode = nextRNode()) {
+      let rNode: RNode | null;
+      while ((rNode = nextRNode())) {
         result.push(rNode);
       }
     } else if (tNodeType & TNodeType.Projection) {
diff --git a/packages/core/src/render3/component.ts b/packages/core/src/render3/component.ts
index ae5e3429a026a..583cfc9b92f1b 100644
--- a/packages/core/src/render3/component.ts
+++ b/packages/core/src/render3/component.ts
@@ -74,18 +74,25 @@ import {assertComponentDef} from './errors';
  *
  * @publicApi
  */
-export function createComponent<C>(component: Type<C>, options: {
-  environmentInjector: EnvironmentInjector,
-  hostElement?: Element,
-  elementInjector?: Injector,
-  projectableNodes?: Node[][],
-}): ComponentRef<C> {
+export function createComponent<C>(
+  component: Type<C>,
+  options: {
+    environmentInjector: EnvironmentInjector;
+    hostElement?: Element;
+    elementInjector?: Injector;
+    projectableNodes?: Node[][];
+  },
+): ComponentRef<C> {
   ngDevMode && assertComponentDef(component);
   const componentDef = getComponentDef(component)!;
   const elementInjector = options.elementInjector || getNullInjector();
   const factory = new ComponentFactory<C>(componentDef);
   return factory.create(
-      elementInjector, options.projectableNodes, options.hostElement, options.environmentInjector);
+    elementInjector,
+    options.projectableNodes,
+    options.hostElement,
+    options.environmentInjector,
+  );
 }
 
 /**
@@ -107,14 +114,14 @@ export interface ComponentMirror<C> {
    * The inputs of the component.
    */
   get inputs(): ReadonlyArray<{
-    readonly propName: string,
-    readonly templateName: string,
-    readonly transform?: (value: any) => any,
+    readonly propName: string;
+    readonly templateName: string;
+    readonly transform?: (value: any) => any;
   }>;
   /**
    * The outputs of the component.
    */
-  get outputs(): ReadonlyArray<{readonly propName: string, readonly templateName: string}>;
+  get outputs(): ReadonlyArray<{readonly propName: string; readonly templateName: string}>;
   /**
    * Selector for all <ng-content> elements in the component.
    */
@@ -170,7 +177,7 @@ export interface ComponentMirror<C> {
  *
  * @publicApi
  */
-export function reflectComponentType<C>(component: Type<C>): ComponentMirror<C>|null {
+export function reflectComponentType<C>(component: Type<C>): ComponentMirror<C> | null {
   const componentDef = getComponentDef(component);
   if (!componentDef) return null;
 
@@ -183,13 +190,13 @@ export function reflectComponentType<C>(component: Type<C>): ComponentMirror<C>|
       return factory.componentType;
     },
     get inputs(): ReadonlyArray<{
-      propName: string,
-      templateName: string,
-      transform?: (value: any) => any,
+      propName: string;
+      templateName: string;
+      transform?: (value: any) => any;
     }> {
       return factory.inputs;
     },
-    get outputs(): ReadonlyArray<{propName: string, templateName: string}> {
+    get outputs(): ReadonlyArray<{propName: string; templateName: string}> {
       return factory.outputs;
     },
     get ngContentSelectors(): ReadonlyArray<string> {
diff --git a/packages/core/src/render3/component_ref.ts b/packages/core/src/render3/component_ref.ts
index 933cc8c0c023f..ace80e5e02303 100644
--- a/packages/core/src/render3/component_ref.ts
+++ b/packages/core/src/render3/component_ref.ts
@@ -9,7 +9,10 @@
 import {setActiveConsumer} from '@angular/core/primitives/signals';
 
 import {ChangeDetectorRef} from '../change_detection/change_detector_ref';
-import {ChangeDetectionScheduler, NotificationSource} from '../change_detection/scheduling/zoneless_scheduling';
+import {
+  ChangeDetectionScheduler,
+  NotificationSource,
+} from '../change_detection/scheduling/zoneless_scheduling';
 import {Injector} from '../di/injector';
 import {convertToBitFlags} from '../di/injector_compatibility';
 import {InjectFlags, InjectOptions} from '../di/interface/injector';
@@ -19,7 +22,10 @@ import {RuntimeError, RuntimeErrorCode} from '../errors';
 import {DehydratedView} from '../hydration/interfaces';
 import {retrieveHydrationInfo} from '../hydration/utils';
 import {Type} from '../interface/type';
-import {ComponentFactory as AbstractComponentFactory, ComponentRef as AbstractComponentRef} from '../linker/component_factory';
+import {
+  ComponentFactory as AbstractComponentFactory,
+  ComponentRef as AbstractComponentRef,
+} from '../linker/component_factory';
 import {ComponentFactoryResolver as AbstractComponentFactoryResolver} from '../linker/component_factory_resolver';
 import {createElementRef, ElementRef} from '../linker/element_ref';
 import {NgModuleRef} from '../linker/ng_module_factory';
@@ -38,16 +44,47 @@ import {registerPostOrderHooks} from './hooks';
 import {reportUnknownPropertyError} from './instructions/element_validation';
 import {markViewDirty} from './instructions/mark_view_dirty';
 import {renderView} from './instructions/render';
-import {addToViewTree, createLView, createTView, executeContentQueries, getOrCreateComponentTView, getOrCreateTNode, initializeDirectives, invokeDirectivesHostBindings, locateHostElement, markAsComponentHost, setInputsForProperty} from './instructions/shared';
+import {
+  addToViewTree,
+  createLView,
+  createTView,
+  executeContentQueries,
+  getOrCreateComponentTView,
+  getOrCreateTNode,
+  initializeDirectives,
+  invokeDirectivesHostBindings,
+  locateHostElement,
+  markAsComponentHost,
+  setInputsForProperty,
+} from './instructions/shared';
 import {ComponentDef, DirectiveDef, HostDirectiveDefs} from './interfaces/definition';
 import {InputFlags} from './interfaces/input_flags';
-import {NodeInputBindings, TContainerNode, TElementContainerNode, TElementNode, TNode, TNodeType} from './interfaces/node';
+import {
+  NodeInputBindings,
+  TContainerNode,
+  TElementContainerNode,
+  TElementNode,
+  TNode,
+  TNodeType,
+} from './interfaces/node';
 import {Renderer} from './interfaces/renderer';
 import {RElement, RNode} from './interfaces/renderer_dom';
-import {CONTEXT, HEADER_OFFSET, INJECTOR, LView, LViewEnvironment, LViewFlags, TVIEW, TViewType} from './interfaces/view';
+import {
+  CONTEXT,
+  HEADER_OFFSET,
+  INJECTOR,
+  LView,
+  LViewEnvironment,
+  LViewFlags,
+  TVIEW,
+  TViewType,
+} from './interfaces/view';
 import {MATH_ML_NAMESPACE, SVG_NAMESPACE} from './namespaces';
 import {createElementNode, setupStaticAttributes, writeDirectClass} from './node_manipulation';
-import {extractAttrsAndClassesFromSelector, stringifyCSSSelectorList} from './node_selector_matcher';
+import {
+  extractAttrsAndClassesFromSelector,
+  stringifyCSSSelectorList,
+} from './node_selector_matcher';
 import {enterView, getCurrentTNode, getLView, leaveView} from './state';
 import {computeStaticStyling} from './styling/static_styling';
 import {mergeHostAttrs, setUpAttributes} from './util/attrs_utils';
@@ -70,9 +107,10 @@ export class ComponentFactoryResolver extends AbstractComponentFactoryResolver {
   }
 }
 
-function toRefArray<T>(map: {[P in keyof T]?: string|[minifiedName: string, flags: InputFlags]}):
-    {propName: string; templateName: string}[] {
-  const array: {propName: string; templateName: string;}[] = [];
+function toRefArray<T>(map: {
+  [P in keyof T]?: string | [minifiedName: string, flags: InputFlags];
+}): {propName: string; templateName: string}[] {
+  const array: {propName: string; templateName: string}[] = [];
   for (const publicName in map) {
     if (!map.hasOwnProperty(publicName)) {
       continue;
@@ -91,9 +129,9 @@ function toRefArray<T>(map: {[P in keyof T]?: string|[minifiedName: string, flag
   return array;
 }
 
-function getNamespace(elementName: string): string|null {
+function getNamespace(elementName: string): string | null {
   const name = elementName.toLowerCase();
-  return name === 'svg' ? SVG_NAMESPACE : (name === 'math' ? MATH_ML_NAMESPACE : null);
+  return name === 'svg' ? SVG_NAMESPACE : name === 'math' ? MATH_ML_NAMESPACE : null;
 }
 
 /**
@@ -101,15 +139,23 @@ function getNamespace(elementName: string): string|null {
  * injector. Used primarily when creating components or embedded views dynamically.
  */
 export class ChainedInjector implements Injector {
-  constructor(public injector: Injector, public parentInjector: Injector) {}
+  constructor(
+    public injector: Injector,
+    public parentInjector: Injector,
+  ) {}
 
-  get<T>(token: ProviderToken<T>, notFoundValue?: T, flags?: InjectFlags|InjectOptions): T {
+  get<T>(token: ProviderToken<T>, notFoundValue?: T, flags?: InjectFlags | InjectOptions): T {
     flags = convertToBitFlags(flags);
-    const value = this.injector.get<T|typeof NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR>(
-        token, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, flags);
+    const value = this.injector.get<T | typeof NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR>(
+      token,
+      NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR,
+      flags,
+    );
 
-    if (value !== NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR ||
-        notFoundValue === (NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as unknown as T)) {
+    if (
+      value !== NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR ||
+      notFoundValue === (NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as unknown as T)
+    ) {
       // Return the value from the root element injector when
       // - it provides it
       //   (value !== NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR)
@@ -132,16 +178,16 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
   isBoundToModule: boolean;
 
   override get inputs(): {
-    propName: string,
-    templateName: string,
-    transform?: (value: any) => any,
+    propName: string;
+    templateName: string;
+    transform?: (value: any) => any;
   }[] {
     const componentDef = this.componentDef;
     const inputTransforms = componentDef.inputTransforms;
     const refArray = toRefArray(componentDef.inputs) as {
-      propName: string,
-      templateName: string,
-      transform?: (value: any) => any,
+      propName: string;
+      templateName: string;
+      transform?: (value: any) => any;
     }[];
 
     if (inputTransforms !== null) {
@@ -155,7 +201,7 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
     return refArray;
   }
 
-  override get outputs(): {propName: string; templateName: string;}[] {
+  override get outputs(): {propName: string; templateName: string}[] {
     return toRefArray(this.componentDef.outputs);
   }
 
@@ -163,57 +209,69 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
    * @param componentDef The component definition.
    * @param ngModule The NgModuleRef to which the factory is bound.
    */
-  constructor(private componentDef: ComponentDef<any>, private ngModule?: NgModuleRef<any>) {
+  constructor(
+    private componentDef: ComponentDef<any>,
+    private ngModule?: NgModuleRef<any>,
+  ) {
     super();
     this.componentType = componentDef.type;
     this.selector = stringifyCSSSelectorList(componentDef.selectors);
-    this.ngContentSelectors =
-        componentDef.ngContentSelectors ? componentDef.ngContentSelectors : [];
+    this.ngContentSelectors = componentDef.ngContentSelectors
+      ? componentDef.ngContentSelectors
+      : [];
     this.isBoundToModule = !!ngModule;
   }
 
   override create(
-      injector: Injector, projectableNodes?: any[][]|undefined, rootSelectorOrNode?: any,
-      environmentInjector?: NgModuleRef<any>|EnvironmentInjector|
-      undefined): AbstractComponentRef<T> {
+    injector: Injector,
+    projectableNodes?: any[][] | undefined,
+    rootSelectorOrNode?: any,
+    environmentInjector?: NgModuleRef<any> | EnvironmentInjector | undefined,
+  ): AbstractComponentRef<T> {
     const prevConsumer = setActiveConsumer(null);
     try {
       // Check if the component is orphan
-      if (ngDevMode && (typeof ngJitMode === 'undefined' || ngJitMode) &&
-          this.componentDef.debugInfo?.forbidOrphanRendering) {
+      if (
+        ngDevMode &&
+        (typeof ngJitMode === 'undefined' || ngJitMode) &&
+        this.componentDef.debugInfo?.forbidOrphanRendering
+      ) {
         if (depsTracker.isOrphanComponent(this.componentType)) {
           throw new RuntimeError(
-              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.`);
+            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;
+      let realEnvironmentInjector =
+        environmentInjector instanceof EnvironmentInjector
+          ? environmentInjector
+          : environmentInjector?.injector;
 
       if (realEnvironmentInjector && this.componentDef.getStandaloneInjector !== null) {
         realEnvironmentInjector =
-            this.componentDef.getStandaloneInjector(realEnvironmentInjector) ||
-            realEnvironmentInjector;
+          this.componentDef.getStandaloneInjector(realEnvironmentInjector) ||
+          realEnvironmentInjector;
       }
 
-      const rootViewInjector = realEnvironmentInjector ?
-          new ChainedInjector(injector, realEnvironmentInjector) :
-          injector;
+      const rootViewInjector = realEnvironmentInjector
+        ? new ChainedInjector(injector, realEnvironmentInjector)
+        : injector;
 
       const rendererFactory = rootViewInjector.get(RendererFactory2, null);
       if (rendererFactory === null) {
         throw new RuntimeError(
-            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.');
+          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);
 
@@ -233,11 +291,15 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
       // 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] as string || 'div';
-      const hostRNode = rootSelectorOrNode ?
-          locateHostElement(
-              hostRenderer, rootSelectorOrNode, this.componentDef.encapsulation, rootViewInjector) :
-          createElementNode(hostRenderer, elementName, getNamespace(elementName));
+      const elementName = (this.componentDef.selectors[0][0] as string) || 'div';
+      const hostRNode = rootSelectorOrNode
+        ? locateHostElement(
+            hostRenderer,
+            rootSelectorOrNode,
+            this.componentDef.encapsulation,
+            rootViewInjector,
+          )
+        : createElementNode(hostRenderer, elementName, getNamespace(elementName));
 
       let rootFlags = LViewFlags.IsRoot;
       if (this.componentDef.signals) {
@@ -246,17 +308,38 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
         rootFlags |= LViewFlags.CheckAlways;
       }
 
-      let hydrationInfo: DehydratedView|null = null;
+      let hydrationInfo: DehydratedView | null = null;
       if (hostRNode !== null) {
         hydrationInfo = retrieveHydrationInfo(hostRNode, rootViewInjector, true /* isRootView */);
       }
 
       // Create the root view. Uses empty TView and ContentTemplate.
-      const rootTView =
-          createTView(TViewType.Root, null, null, 1, 0, null, null, null, null, null, null);
+      const rootTView = createTView(
+        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);
+        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
@@ -271,13 +354,16 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
       try {
         const rootComponentDef = this.componentDef;
         let rootDirectives: DirectiveDef<unknown>[];
-        let hostDirectiveDefs: HostDirectiveDefs|null = null;
+        let hostDirectiveDefs: HostDirectiveDefs | null = null;
 
         if (rootComponentDef.findHostDirectiveDefs) {
           rootDirectives = [];
           hostDirectiveDefs = new Map();
           rootComponentDef.findHostDirectiveDefs(
-              rootComponentDef, rootDirectives, hostDirectiveDefs);
+            rootComponentDef,
+            rootDirectives,
+            hostDirectiveDefs,
+          );
           rootDirectives.push(rootComponentDef);
           ngDevMode && assertNoDuplicateDirectives(rootDirectives);
         } else {
@@ -286,8 +372,14 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
 
         const hostTNode = createRootComponentTNode(rootLView, hostRNode);
         const componentView = createRootComponentView(
-            hostTNode, hostRNode, rootComponentDef, rootDirectives, rootLView, environment,
-            hostRenderer);
+          hostTNode,
+          hostRNode,
+          rootComponentDef,
+          rootDirectives,
+          rootLView,
+          environment,
+          hostRenderer,
+        );
 
         tElementNode = getTNode(rootTView, HEADER_OFFSET) as TElementNode;
 
@@ -305,16 +397,25 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
         // 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]);
+          componentView,
+          rootComponentDef,
+          rootDirectives,
+          hostDirectiveDefs,
+          rootLView,
+          [LifecycleHooksFeature],
+        );
         renderView(rootTView, rootLView, null);
       } finally {
         leaveView();
       }
 
       return new ComponentRef(
-          this.componentType, component, createElementRef(tElementNode, rootLView), rootLView,
-          tElementNode);
+        this.componentType,
+        component,
+        createElementRef(tElementNode, rootLView),
+        rootLView,
+        tElementNode,
+      );
     } finally {
       setActiveConsumer(prevConsumer);
     }
@@ -334,30 +435,36 @@ export class ComponentRef<T> extends AbstractComponentRef<T> {
   override hostView: ViewRef<T>;
   override changeDetectorRef: ChangeDetectorRef;
   override componentType: Type<T>;
-  private previousInputValues: Map<string, unknown>|null = null;
+  private previousInputValues: Map<string, unknown> | null = null;
 
   constructor(
-      componentType: Type<T>, instance: T, public location: ElementRef, private _rootLView: LView,
-      private _tNode: TElementNode|TContainerNode|TElementContainerNode) {
+    componentType: Type<T>,
+    instance: T,
+    public location: ElementRef,
+    private _rootLView: LView,
+    private _tNode: TElementNode | TContainerNode | TElementContainerNode,
+  ) {
     super();
     this.instance = instance;
     this.hostView = this.changeDetectorRef = new ViewRef<T>(
-        _rootLView,
-        undefined, /* _cdRefInjectingView */
-        false,     /* notifyErrorHandler */
+      _rootLView,
+      undefined /* _cdRefInjectingView */,
+      false /* notifyErrorHandler */,
     );
     this.componentType = componentType;
   }
 
   override setInput(name: string, value: unknown): void {
     const inputData = this._tNode.inputs;
-    let dataValue: NodeInputBindings[typeof name]|undefined;
+    let dataValue: NodeInputBindings[typeof name] | undefined;
     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)) {
+      if (
+        this.previousInputValues.has(name) &&
+        Object.is(this.previousInputValues.get(name), value)
+      ) {
         return;
       }
 
@@ -369,10 +476,8 @@ export class ComponentRef<T> extends AbstractComponentRef<T> {
     } 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.`;
+        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);
       }
     }
@@ -392,7 +497,7 @@ export class ComponentRef<T> extends AbstractComponentRef<T> {
 }
 
 /** Represents a HostFeature function. */
-type HostFeature = (<T>(component: T, componentDef: ComponentDef<T>) => void);
+type HostFeature = <T>(component: T, componentDef: ComponentDef<T>) => void;
 
 /** Creates a TNode that can be used to instantiate a root component. */
 function createRootComponentTNode(lView: LView, rNode: RNode): TElementNode {
@@ -420,15 +525,20 @@ function createRootComponentTNode(lView: LView, rNode: RNode): TElementNode {
  * @returns Component view created
  */
 function createRootComponentView(
-    tNode: TElementNode, hostRNode: RElement|null, rootComponentDef: ComponentDef<any>,
-    rootDirectives: DirectiveDef<any>[], rootView: LView, environment: LViewEnvironment,
-    hostRenderer: Renderer): LView {
+  tNode: TElementNode,
+  hostRNode: RElement | null,
+  rootComponentDef: ComponentDef<any>,
+  rootDirectives: DirectiveDef<any>[],
+  rootView: LView,
+  environment: LViewEnvironment,
+  hostRenderer: Renderer,
+): LView {
   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: DehydratedView|null = null;
+  let hydrationInfo: DehydratedView | null = null;
   if (hostRNode !== null) {
     hydrationInfo = retrieveHydrationInfo(hostRNode, rootView[INJECTOR]!);
   }
@@ -440,8 +550,18 @@ function createRootComponentView(
     lViewFlags = LViewFlags.Dirty;
   }
   const componentView = createLView(
-      rootView, getOrCreateComponentTView(rootComponentDef), null, lViewFlags,
-      rootView[tNode.index], tNode, environment, viewRenderer, null, null, hydrationInfo);
+    rootView,
+    getOrCreateComponentTView(rootComponentDef),
+    null,
+    lViewFlags,
+    rootView[tNode.index],
+    tNode,
+    environment,
+    viewRenderer,
+    null,
+    null,
+    hydrationInfo,
+  );
 
   if (tView.firstCreatePass) {
     markAsComponentHost(tView, tNode, rootDirectives.length - 1);
@@ -450,13 +570,16 @@ function createRootComponentView(
   addToViewTree(rootView, componentView);
 
   // Store component view at node index, with node as the HOST
-  return rootView[tNode.index] = componentView;
+  return (rootView[tNode.index] = componentView);
 }
 
 /** Sets up the styling information on a root component. */
 function applyRootComponentStyling(
-    rootDirectives: DirectiveDef<any>[], tNode: TElementNode, rNode: RElement|null,
-    hostRenderer: Renderer): void {
+  rootDirectives: DirectiveDef<any>[],
+  tNode: TElementNode,
+  rNode: RElement | null,
+  hostRenderer: Renderer,
+): void {
   for (const def of rootDirectives) {
     tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, def.hostAttrs);
   }
@@ -475,9 +598,13 @@ function applyRootComponentStyling(
  * renderComponent() and ViewContainerRef.createComponent().
  */
 function createRootComponent<T>(
-    componentView: LView, rootComponentDef: ComponentDef<T>, rootDirectives: DirectiveDef<any>[],
-    hostDirectiveDefs: HostDirectiveDefs|null, rootLView: LView,
-    hostFeatures: HostFeature[]|null): any {
+  componentView: LView,
+  rootComponentDef: ComponentDef<T>,
+  rootDirectives: DirectiveDef<any>[],
+  hostDirectiveDefs: HostDirectiveDefs | null,
+  rootLView: LView,
+  hostFeatures: HostFeature[] | null,
+): any {
   const rootTNode = getCurrentTNode() as TElementNode;
   ngDevMode && assertDefined(rootTNode, 'tNode should have been already created');
   const tView = rootLView[TVIEW];
@@ -500,9 +627,13 @@ function createRootComponent<T>(
   // 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');
+    assertGreaterThan(rootTNode.componentOffset, -1, 'componentOffset must be great than -1');
   const component = getNodeInjectable(
-      rootLView, tView, rootTNode.directiveStart + rootTNode.componentOffset, rootTNode);
+    rootLView,
+    tView,
+    rootTNode.directiveStart + rootTNode.componentOffset,
+    rootTNode,
+  );
   componentView[CONTEXT] = rootLView[CONTEXT] = component;
 
   if (hostFeatures !== null) {
@@ -520,8 +651,11 @@ function createRootComponent<T>(
 
 /** Sets the static attributes on a root component. */
 function setRootNodeAttributes(
-    hostRenderer: Renderer2, componentDef: ComponentDef<unknown>, hostRNode: RElement,
-    rootSelectorOrNode: any) {
+  hostRenderer: Renderer2,
+  componentDef: ComponentDef<unknown>,
+  hostRNode: RElement,
+  rootSelectorOrNode: any,
+) {
   if (rootSelectorOrNode) {
     // The placeholder will be replaced with the actual version at build time.
     setUpAttributes(hostRenderer, hostRNode, ['ng-version', '0.0.0-PLACEHOLDER']);
@@ -541,8 +675,11 @@ function setRootNodeAttributes(
 
 /** Projects the `projectableNodes` that were specified when creating a root component. */
 function projectNodes(
-    tNode: TElementNode, ngContentSelectors: string[], projectableNodes: any[][]) {
-  const projection: (TNode|RNode[]|null)[] = tNode.projection = [];
+  tNode: TElementNode,
+  ngContentSelectors: string[],
+  projectableNodes: any[][],
+) {
+  const projection: (TNode | RNode[] | null)[] = (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
diff --git a/packages/core/src/render3/context_discovery.ts b/packages/core/src/render3/context_discovery.ts
index 58c9d1a7b29c5..60306a76e23fa 100644
--- a/packages/core/src/render3/context_discovery.ts
+++ b/packages/core/src/render3/context_discovery.ts
@@ -19,8 +19,6 @@ import {isLView} from './interfaces/type_checks';
 import {CONTEXT, HEADER_OFFSET, HOST, ID, LView, TVIEW} from './interfaces/view';
 import {getComponentLViewByIndex, unwrapRNode} from './util/view_utils';
 
-
-
 /**
  * Returns the matching `LContext` data for a given DOM node, directive or component instance.
  *
@@ -41,7 +39,7 @@ import {getComponentLViewByIndex, unwrapRNode} from './util/view_utils';
  *
  * @param target Component, Directive or DOM Node.
  */
-export function getLContext(target: any): LContext|null {
+export function getLContext(target: any): LContext | null {
   let mpValue = readPatchedData(target);
   if (mpValue) {
     // only when it's an array is it considered an LView instance
@@ -50,7 +48,7 @@ export function getLContext(target: any): LContext|null {
       const lView: LView = mpValue!;
       let nodeIndex: number;
       let component: any = undefined;
-      let directives: any[]|null|undefined = undefined;
+      let directives: any[] | null | undefined = undefined;
 
       if (isComponentInstance(target)) {
         nodeIndex = findViaComponent(lView, target);
@@ -77,9 +75,10 @@ export function getLContext(target: any): LContext|null {
       // with different target values then the missing target data will be filled in.
       const native = unwrapRNode(lView[nodeIndex]);
       const existingCtx = readPatchedData(native);
-      const context: LContext = (existingCtx && !Array.isArray(existingCtx)) ?
-          existingCtx :
-          createLContext(lView, nodeIndex, native);
+      const context: LContext =
+        existingCtx && !Array.isArray(existingCtx)
+          ? existingCtx
+          : createLContext(lView, nodeIndex, native);
 
       // only when the component has been discovered then update the monkey-patch
       if (component && context.component === undefined) {
@@ -105,10 +104,10 @@ export function getLContext(target: any): LContext|null {
     // if the context is not found then we need to traverse upwards up the DOM
     // to find the nearest element that has already been monkey patched with data
     let parent = rElement as any;
-    while (parent = parent.parentNode) {
+    while ((parent = parent.parentNode)) {
       const parentContext = readPatchedData(parent);
       if (parentContext) {
-        const lView = Array.isArray(parentContext) ? parentContext as LView : parentContext.lView;
+        const lView = Array.isArray(parentContext) ? (parentContext as LView) : parentContext.lView;
 
         // the edge of the app was also reached here through another means
         // (maybe because the DOM was changed manually).
@@ -177,7 +176,7 @@ export function attachLViewId(target: any, data: LView) {
  * Returns the monkey-patch value data present on the target (which could be
  * a component, directive or a DOM node).
  */
-export function readLView(target: any): LView|null {
+export function readLView(target: any): LView | null {
   const data = readPatchedData(target);
   if (isLView(data)) {
     return data;
@@ -189,7 +188,7 @@ export function readLView(target: any): LView|null {
  * Assigns the given data to the given target (which could be a component,
  * directive or DOM node instance) using monkey-patching.
  */
-export function attachPatchData(target: any, data: LView|LContext) {
+export function attachPatchData(target: any, data: LView | LContext) {
   ngDevMode && assertDefined(target, 'Target expected');
   // Only attach the ID of the view in order to avoid memory leaks (see #41047). We only do this
   // for `LView`, because we have control over when an `LView` is created and destroyed, whereas
@@ -206,13 +205,13 @@ export function attachPatchData(target: any, data: LView|LContext) {
  * Returns the monkey-patch value data present on the target (which could be
  * a component, directive or a DOM node).
  */
-export function readPatchedData(target: any): LView|LContext|null {
+export function readPatchedData(target: any): LView | LContext | null {
   ngDevMode && assertDefined(target, 'Target expected');
   const data = target[MONKEY_PATCH_KEY_NAME];
-  return (typeof data === 'number') ? getLViewById(data) : data || null;
+  return typeof data === 'number' ? getLViewById(data) : data || null;
 }
 
-export function readPatchedLView<T>(target: any): LView<T>|null {
+export function readPatchedLView<T>(target: any): LView<T> | null {
   const value = readPatchedData(target);
   if (value) {
     return (isLView(value) ? value : value.lView) as LView<T>;
@@ -245,7 +244,7 @@ function findViaNativeElement(lView: LView, target: RElement): number {
 /**
  * Locates the next tNode (child, sibling or parent).
  */
-function traverseNextElement(tNode: TNode): TNode|null {
+function traverseNextElement(tNode: TNode): TNode | null {
   if (tNode.child) {
     return tNode.child;
   } else if (tNode.next) {
@@ -317,7 +316,7 @@ function findViaDirective(lView: LView, directiveInstance: {}): number {
  * @param nodeIndex The node index
  * @param lView The target view data
  */
-export function getDirectivesAtNodeIndex(nodeIndex: number, lView: LView): any[]|null {
+export function getDirectivesAtNodeIndex(nodeIndex: number, lView: LView): any[] | null {
   const tNode = lView[TVIEW].data[nodeIndex] as TNode;
   if (tNode.directiveStart === 0) return EMPTY_ARRAY;
   const results: any[] = [];
@@ -330,7 +329,7 @@ export function getDirectivesAtNodeIndex(nodeIndex: number, lView: LView): any[]
   return results;
 }
 
-export function getComponentAtNodeIndex(nodeIndex: number, lView: LView): {}|null {
+export function getComponentAtNodeIndex(nodeIndex: number, lView: LView): {} | null {
   const tNode = lView[TVIEW].data[nodeIndex] as TNode;
   const {directiveStart, componentOffset} = tNode;
   return componentOffset > -1 ? lView[directiveStart + componentOffset] : null;
@@ -340,7 +339,7 @@ export function getComponentAtNodeIndex(nodeIndex: number, lView: LView): {}|nul
  * Returns a map of local references (local reference name => element or directive instance) that
  * exist on a given element.
  */
-export function discoverLocalRefs(lView: LView, nodeIndex: number): {[key: string]: any}|null {
+export function discoverLocalRefs(lView: LView, nodeIndex: number): {[key: string]: any} | null {
   const tNode = lView[TVIEW].data[nodeIndex] as TNode;
   if (tNode && tNode.localNames) {
     const result: {[key: string]: any} = {};
diff --git a/packages/core/src/render3/debug/framework_injector_profiler.ts b/packages/core/src/render3/debug/framework_injector_profiler.ts
index d5253741bf8cb..8efdfe247cd65 100644
--- a/packages/core/src/render3/debug/framework_injector_profiler.ts
+++ b/packages/core/src/render3/debug/framework_injector_profiler.ts
@@ -16,7 +16,15 @@ import {getNodeInjectorLView, getNodeInjectorTNode, NodeInjector} from '../di';
 import {TNode} from '../interfaces/node';
 import {LView} from '../interfaces/view';
 
-import {InjectedService, InjectorCreatedInstance, InjectorProfilerContext, InjectorProfilerEvent, InjectorProfilerEventType, ProviderRecord, setInjectorProfiler} from './injector_profiler';
+import {
+  InjectedService,
+  InjectorCreatedInstance,
+  InjectorProfilerContext,
+  InjectorProfilerEvent,
+  InjectorProfilerEventType,
+  ProviderRecord,
+  setInjectorProfiler,
+} from './injector_profiler';
 
 /**
  * These are the data structures that our framework injector profiler will fill with data in order
@@ -54,15 +62,19 @@ import {InjectedService, InjectorCreatedInstance, InjectorProfilerContext, Injec
  *
  */
 class DIDebugData {
-  resolverToTokenToDependencies =
-      new WeakMap<Injector|LView, WeakMap<Type<unknown>, InjectedService[]>>();
-  resolverToProviders = new WeakMap<Injector|TNode, ProviderRecord[]>();
+  resolverToTokenToDependencies = new WeakMap<
+    Injector | LView,
+    WeakMap<Type<unknown>, InjectedService[]>
+  >();
+  resolverToProviders = new WeakMap<Injector | TNode, ProviderRecord[]>();
   standaloneInjectorToComponent = new WeakMap<Injector, Type<unknown>>();
 
   reset() {
-    this.resolverToTokenToDependencies =
-        new WeakMap<Injector|LView, WeakMap<Type<unknown>, InjectedService[]>>();
-    this.resolverToProviders = new WeakMap<Injector|TNode, ProviderRecord[]>();
+    this.resolverToTokenToDependencies = new WeakMap<
+      Injector | LView,
+      WeakMap<Type<unknown>, InjectedService[]>
+    >();
+    this.resolverToProviders = new WeakMap<Injector | TNode, ProviderRecord[]>();
     this.standaloneInjectorToComponent = new WeakMap<Injector, Type<unknown>>();
   }
 }
@@ -87,8 +99,9 @@ export function getFrameworkDIDebugData(): DIDebugData {
  */
 export function setupFrameworkInjectorProfiler(): void {
   frameworkDIDebugData.reset();
-  setInjectorProfiler(
-      (injectorProfilerEvent) => handleInjectorProfilerEvent(injectorProfilerEvent));
+  setInjectorProfiler((injectorProfilerEvent) =>
+    handleInjectorProfilerEvent(injectorProfilerEvent),
+  );
 }
 
 function handleInjectorProfilerEvent(injectorProfilerEvent: InjectorProfilerEvent): void {
@@ -157,7 +170,7 @@ function handleInjectEvent(context: InjectorProfilerContext, data: InjectedServi
  * @param injector
  * @returns {lView: LView, tNode: TNode}|undefined
  */
-function getNodeInjectorContext(injector: Injector): {lView: LView, tNode: TNode}|undefined {
+function getNodeInjectorContext(injector: Injector): {lView: LView; tNode: TNode} | undefined {
   if (!(injector instanceof NodeInjector)) {
     throwError('getNodeInjectorContext must be called with a NodeInjector');
   }
@@ -183,7 +196,9 @@ function getNodeInjectorContext(injector: Injector): {lView: LView, tNode: TNode
  *
  */
 function handleInstanceCreatedByInjectorEvent(
-    context: InjectorProfilerContext, data: InjectorCreatedInstance): void {
+  context: InjectorProfilerContext,
+  data: InjectorCreatedInstance,
+): void {
   const {value} = data;
 
   if (getDIResolver(context.injector) === null) {
@@ -192,7 +207,7 @@ function handleInstanceCreatedByInjectorEvent(
 
   // if our value is an instance of a standalone component, map the injector of that standalone
   // component to the component class. Otherwise, this event is a noop.
-  let standaloneComponent: Type<unknown>|undefined = undefined;
+  let standaloneComponent: Type<unknown> | undefined = undefined;
   if (typeof value === 'object') {
     standaloneComponent = value?.constructor as Type<unknown>;
   }
@@ -200,8 +215,11 @@ function handleInstanceCreatedByInjectorEvent(
     return;
   }
 
-  const environmentInjector: EnvironmentInjector|null =
-      context.injector.get(EnvironmentInjector, null, {optional: true});
+  const environmentInjector: EnvironmentInjector | null = context.injector.get(
+    EnvironmentInjector,
+    null,
+    {optional: true},
+  );
   // Standalone components should have an environment injector. If one cannot be
   // found we may be in a test case for low level functionality that did not explicitly
   // setup this injector. In those cases, we simply ignore this event.
@@ -237,10 +255,12 @@ function isStandaloneComponent(value: Type<unknown>): boolean {
  *
  */
 function handleProviderConfiguredEvent(
-    context: InjectorProfilerContext, data: ProviderRecord): void {
+  context: InjectorProfilerContext,
+  data: ProviderRecord,
+): void {
   const {resolverToProviders} = frameworkDIDebugData;
 
-  let diResolver: Injector|TNode;
+  let diResolver: Injector | TNode;
   if (context?.injector instanceof NodeInjector) {
     diResolver = getNodeInjectorTNode(context.injector) as TNode;
   } else {
@@ -258,8 +278,8 @@ function handleProviderConfiguredEvent(
   resolverToProviders.get(diResolver)!.push(data);
 }
 
-function getDIResolver(injector: Injector|undefined): Injector|LView|null {
-  let diResolver: Injector|LView|null = null;
+function getDIResolver(injector: Injector | undefined): Injector | LView | null {
+  let diResolver: Injector | LView | null = null;
 
   if (injector === undefined) {
     return diResolver;
@@ -286,6 +306,8 @@ function getDIResolver(injector: Injector|undefined): Injector|LView|null {
 // https://tc39.es/ecma262/multipage/executable-code-and-execution-contexts.html#sec-canbeheldweakly
 function canBeHeldWeakly(value: any): boolean {
   // we check for value !== null here because typeof null === 'object
-  return value !== null &&
-      (typeof value === 'object' || typeof value === 'function' || typeof value === 'symbol');
+  return (
+    value !== null &&
+    (typeof value === 'object' || typeof value === 'function' || typeof value === 'symbol')
+  );
 }
diff --git a/packages/core/src/render3/debug/injector_profiler.ts b/packages/core/src/render3/debug/injector_profiler.ts
index d47db92a7349d..410cd30e0a876 100644
--- a/packages/core/src/render3/debug/injector_profiler.ts
+++ b/packages/core/src/render3/debug/injector_profiler.ts
@@ -34,7 +34,7 @@ export const enum InjectorProfilerEventType {
   /**
    * Emits when an injector configures a provider.
    */
-  ProviderConfigured
+  ProviderConfigured,
 }
 
 /**
@@ -53,10 +53,9 @@ export interface InjectorProfilerContext {
    *      - Example: if ModuleA --provides--> ServiceA --injects--> ServiceB
    *                 then inject(ServiceB) in ServiceA has ServiceA as a construction context
    */
-  token: Type<unknown>|null;
+  token: Type<unknown> | null;
 }
 
-
 export interface InjectedServiceEvent {
   type: InjectorProfilerEventType.Inject;
   context: InjectorProfilerContext;
@@ -80,7 +79,9 @@ export interface ProviderConfiguredEvent {
  */
 
 export type InjectorProfilerEvent =
-    InjectedServiceEvent|InjectorCreatedInstanceEvent|ProviderConfiguredEvent;
+  | InjectedServiceEvent
+  | InjectorCreatedInstanceEvent
+  | ProviderConfiguredEvent;
 
 /**
  * An object that contains information about a provider that has been configured
@@ -91,7 +92,7 @@ export interface ProviderRecord {
   /**
    * DI token that this provider is configuring
    */
-  token: Type<unknown>|InjectionToken<unknown>;
+  token: Type<unknown> | InjectionToken<unknown>;
 
   /**
    * Determines if provider is configured as view provider.
@@ -127,7 +128,7 @@ export interface InjectedService {
   /**
    * DI token of the Service that is injected
    */
-  token?: Type<unknown>|InjectionToken<unknown>;
+  token?: Type<unknown> | InjectionToken<unknown>;
 
   /**
    * Value of the injected service
@@ -137,7 +138,7 @@ export interface InjectedService {
   /**
    * Flags that this service was injected with
    */
-  flags?: InternalInjectFlags|InjectFlags|InjectOptions;
+  flags?: InternalInjectFlags | InjectFlags | InjectOptions;
 
   /**
    * Injector that this service was provided in.
@@ -147,7 +148,7 @@ export interface InjectedService {
   /**
    * In NodeInjectors, the LView and TNode that serviced this injection.
    */
-  injectedIn?: {lView: LView, tNode: TNode};
+  injectedIn?: {lView: LView; tNode: TNode};
 }
 
 export interface InjectorProfiler {
@@ -168,7 +169,7 @@ export function setInjectorProfilerContext(context: InjectorProfilerContext) {
   return previous;
 }
 
-let injectorProfilerCallback: InjectorProfiler|null = null;
+let injectorProfilerCallback: InjectorProfiler | null = null;
 
 /**
  * Sets the callback function which will be invoked during certain DI events within the
@@ -180,7 +181,7 @@ let injectorProfilerCallback: InjectorProfiler|null = null;
  *
  * @param profiler function provided by the caller or null value to disable profiling.
  */
-export const setInjectorProfiler = (injectorProfiler: InjectorProfiler|null) => {
+export const setInjectorProfiler = (injectorProfiler: InjectorProfiler | null) => {
   !ngDevMode && throwError('setInjectorProfiler should never be called in production mode');
   injectorProfilerCallback = injectorProfiler;
 };
@@ -205,7 +206,9 @@ function injectorProfiler(event: InjectorProfilerEvent): void {
  * @param eventProvider A provider object
  */
 export function emitProviderConfiguredEvent(
-    eventProvider: SingleProvider, isViewProvider: boolean = false): void {
+  eventProvider: SingleProvider,
+  isViewProvider: boolean = false,
+): void {
   !ngDevMode && throwError('Injector profiler should never be called in production mode');
 
   let token;
@@ -228,13 +231,13 @@ export function emitProviderConfiguredEvent(
   // as `ɵprov`. In this case, we want to emit the provider that is attached to the token, not the
   // token itself.
   if (eventProvider instanceof InjectionToken) {
-    provider = eventProvider.ɵprov as FactoryProvider || eventProvider;
+    provider = (eventProvider.ɵprov as FactoryProvider) || eventProvider;
   }
 
   injectorProfiler({
     type: InjectorProfilerEventType.ProviderConfigured,
     context: getInjectorProfilerContext(),
-    providerRecord: {token, provider, isViewProvider}
+    providerRecord: {token, provider, isViewProvider},
   });
 }
 
@@ -250,7 +253,7 @@ export function emitInstanceCreatedByInjectorEvent(instance: unknown): void {
   injectorProfiler({
     type: InjectorProfilerEventType.InstanceCreatedByInjector,
     context: getInjectorProfilerContext(),
-    instance: {value: instance}
+    instance: {value: instance},
   });
 }
 
@@ -265,14 +268,17 @@ export function emitInjectEvent(token: Type<unknown>, value: unknown, flags: Inj
   injectorProfiler({
     type: InjectorProfilerEventType.Inject,
     context: getInjectorProfilerContext(),
-    service: {token, value, flags}
+    service: {token, value, flags},
   });
 }
 
 export function runInInjectorProfilerContext(
-    injector: Injector, token: Type<unknown>, callback: () => void): void {
+  injector: Injector,
+  token: Type<unknown>,
+  callback: () => void,
+): void {
   !ngDevMode &&
-      throwError('runInInjectorProfilerContext should never be called in production mode');
+    throwError('runInInjectorProfilerContext should never be called in production mode');
 
   const prevInjectContext = setInjectorProfilerContext({injector, token});
   try {
diff --git a/packages/core/src/render3/definition.ts b/packages/core/src/render3/definition.ts
index fae41a9578e9a..2abf25d871eee 100644
--- a/packages/core/src/render3/definition.ts
+++ b/packages/core/src/render3/definition.ts
@@ -18,7 +18,22 @@ import {initNgDevMode} from '../util/ng_dev_mode';
 import {stringify} from '../util/stringify';
 
 import {NG_COMP_DEF, NG_DIR_DEF, NG_MOD_DEF, NG_PIPE_DEF} from './fields';
-import type {ComponentDef, ComponentDefFeature, ComponentTemplate, ContentQueriesFunction, DependencyTypeList, DirectiveDef, DirectiveDefFeature, DirectiveDefListOrFactory, HostBindingsFunction, InputTransformFunction, PipeDef, PipeDefListOrFactory, TypeOrFactory, ViewQueriesFunction} from './interfaces/definition';
+import type {
+  ComponentDef,
+  ComponentDefFeature,
+  ComponentTemplate,
+  ContentQueriesFunction,
+  DependencyTypeList,
+  DirectiveDef,
+  DirectiveDefFeature,
+  DirectiveDefListOrFactory,
+  HostBindingsFunction,
+  InputTransformFunction,
+  PipeDef,
+  PipeDefListOrFactory,
+  TypeOrFactory,
+  ViewQueriesFunction,
+} from './interfaces/definition';
 import {InputFlags} from './interfaces/input_flags';
 import type {TAttributes, TConstantsOrFactory} from './interfaces/node';
 import {CssSelectorList} from './interfaces/projection';
@@ -83,12 +98,16 @@ import {stringifyCSSSelectorList} from './node_selector_matcher';
  *    inconsistent behavior in that it uses declared names rather than minified or public.
  */
 type DirectiveInputs<T> = {
-  [P in keyof T]?:
-      // Basic case. Mapping minified name to public name.
-  string|
-  // Complex input when there are flags, or differing public name and declared name, or there
-  // is a transform. Such inputs are not as common, so the array form is only generated then.
-  [flags: InputFlags, publicName: string, declaredName?: string, transform?: InputTransformFunction]
+  [P in keyof T]?:  // Basic case. Mapping minified name to public name.
+    | string
+    // Complex input when there are flags, or differing public name and declared name, or there
+    // is a transform. Such inputs are not as common, so the array form is only generated then.
+    | [
+        flags: InputFlags,
+        publicName: string,
+        declaredName?: string,
+        transform?: InputTransformFunction,
+      ];
 };
 
 interface DirectiveDefinition<T> {
@@ -178,7 +197,7 @@ interface DirectiveDefinition<T> {
    * Additional set of instructions specific to view query processing. This could be seen as a
    * set of instructions to be inserted into the template function.
    */
-  viewQuery?: ViewQueriesFunction<T>|null;
+  viewQuery?: ViewQueriesFunction<T> | null;
 
   /**
    * Defines the name that can be used in the template to assign this directive to a variable.
@@ -298,7 +317,7 @@ interface ComponentDefinition<T> extends Omit<DirectiveDefinition<T>, 'features'
   /**
    * The set of schemas that declare elements to be allowed in the component's template.
    */
-  schemas?: SchemaMetadata[]|null;
+  schemas?: SchemaMetadata[] | null;
 }
 
 /**
@@ -317,8 +336,9 @@ interface ComponentDefinition<T> extends Omit<DirectiveDefinition<T>, 'features'
  * ```
  * @codeGenApi
  */
-export function ɵɵdefineComponent<T>(componentDefinition: ComponentDefinition<T>):
-    Mutable<ComponentDef<any>, keyof ComponentDef<any>> {
+export function ɵɵdefineComponent<T>(
+  componentDefinition: ComponentDefinition<T>,
+): Mutable<ComponentDef<any>, keyof ComponentDef<any>> {
   return noSideEffects(() => {
     // Initialize ngDevMode. This must be the first statement in ɵɵdefineComponent.
     // See the `initNgDevMode` docstring for more information.
@@ -333,9 +353,9 @@ export function ɵɵdefineComponent<T>(componentDefinition: ComponentDefinition<
       consts: componentDefinition.consts || null,
       ngContentSelectors: componentDefinition.ngContentSelectors,
       onPush: componentDefinition.changeDetection === ChangeDetectionStrategy.OnPush,
-      directiveDefs: null!,  // assigned in noSideEffects
-      pipeDefs: null!,       // assigned in noSideEffects
-      dependencies: baseDef.standalone && componentDefinition.dependencies || null,
+      directiveDefs: null!, // assigned in noSideEffects
+      pipeDefs: null!, // assigned in noSideEffects
+      dependencies: (baseDef.standalone && componentDefinition.dependencies) || null,
       getStandaloneInjector: null,
       signals: componentDefinition.signals ?? false,
       data: componentDefinition.data || {},
@@ -357,11 +377,11 @@ export function ɵɵdefineComponent<T>(componentDefinition: ComponentDefinition<
   });
 }
 
-export function extractDirectiveDef(type: Type<any>): DirectiveDef<any>|ComponentDef<any>|null {
+export function extractDirectiveDef(type: Type<any>): DirectiveDef<any> | ComponentDef<any> | null {
   return getComponentDef(type) || getDirectiveDef(type);
 }
 
-function nonNull<T>(value: T|null): value is T {
+function nonNull<T>(value: T | null): value is T {
   return value !== null;
 }
 
@@ -475,16 +495,18 @@ export function ɵɵdefineNgModule<T>(def: {
  *
 
  */
-function parseAndConvertBindingsForDefinition<T>(obj: DirectiveDefinition<T>['outputs']|
-                                                 undefined): Record<keyof T, string>;
 function parseAndConvertBindingsForDefinition<T>(
-    obj: DirectiveInputs<T>|undefined, declaredInputs: Record<string, string>):
-    Record<keyof T, string|[minifiedName: string, flags: InputFlags]>;
+  obj: DirectiveDefinition<T>['outputs'] | undefined,
+): Record<keyof T, string>;
+function parseAndConvertBindingsForDefinition<T>(
+  obj: DirectiveInputs<T> | undefined,
+  declaredInputs: Record<string, string>,
+): Record<keyof T, string | [minifiedName: string, flags: InputFlags]>;
 
 function parseAndConvertBindingsForDefinition<T>(
-    obj: undefined|DirectiveInputs<T>|DirectiveDefinition<T>['outputs'],
-    declaredInputs?: Record<string, string>):
-    Record<keyof T, string|[minifiedName: string, flags: InputFlags]> {
+  obj: undefined | DirectiveInputs<T> | DirectiveDefinition<T>['outputs'],
+  declaredInputs?: Record<string, string>,
+): Record<keyof T, string | [minifiedName: string, flags: InputFlags]> {
   if (obj == null) return EMPTY_OBJ as any;
   const newLookup: any = {};
   for (const minifiedKey in obj) {
@@ -497,7 +519,7 @@ function parseAndConvertBindingsForDefinition<T>(
       if (Array.isArray(value)) {
         inputFlags = value[0];
         publicName = value[1];
-        declaredName = value[2] ?? publicName;  // declared name might not be set to save bytes.
+        declaredName = value[2] ?? publicName; // declared name might not be set to save bytes.
       } else {
         publicName = value;
         declaredName = value;
@@ -507,7 +529,7 @@ function parseAndConvertBindingsForDefinition<T>(
       if (declaredInputs) {
         // Perf note: An array is only allocated for the input if there are flags.
         newLookup[publicName] =
-            inputFlags !== InputFlags.None ? [minifiedKey, inputFlags] : minifiedKey;
+          inputFlags !== InputFlags.None ? [minifiedKey, inputFlags] : minifiedKey;
         declaredInputs[publicName] = declaredName as string;
       } else {
         newLookup[publicName] = minifiedKey;
@@ -533,8 +555,9 @@ function parseAndConvertBindingsForDefinition<T>(
  *
  * @codeGenApi
  */
-export function ɵɵdefineDirective<T>(directiveDefinition: DirectiveDefinition<T>):
-    Mutable<DirectiveDef<any>, keyof DirectiveDef<any>> {
+export function ɵɵdefineDirective<T>(
+  directiveDefinition: DirectiveDefinition<T>,
+): Mutable<DirectiveDef<any>, keyof DirectiveDef<any>> {
   return noSideEffects(() => {
     const def = getNgDirectiveDef(directiveDefinition);
     initFeatures(def);
@@ -574,14 +597,14 @@ export function ɵɵdefinePipe<T>(pipeDef: {
    */
   standalone?: boolean;
 }): unknown {
-  return (<PipeDef<T>>{
+  return <PipeDef<T>>{
     type: pipeDef.type,
     name: pipeDef.name,
     factory: null,
     pure: pipeDef.pure !== false,
     standalone: pipeDef.standalone === true,
-    onDestroy: pipeDef.type.prototype.ngOnDestroy || null
-  });
+    onDestroy: pipeDef.type.prototype.ngOnDestroy || null,
+  };
 }
 
 /**
@@ -590,15 +613,15 @@ export function ɵɵdefinePipe<T>(pipeDef: {
  * explicit. This would require some sort of migration strategy.
  */
 
-export function getComponentDef<T>(type: any): ComponentDef<T>|null {
+export function getComponentDef<T>(type: any): ComponentDef<T> | null {
   return type[NG_COMP_DEF] || null;
 }
 
-export function getDirectiveDef<T>(type: any): DirectiveDef<T>|null {
+export function getDirectiveDef<T>(type: any): DirectiveDef<T> | null {
   return type[NG_DIR_DEF] || null;
 }
 
-export function getPipeDef<T>(type: any): PipeDef<T>|null {
+export function getPipeDef<T>(type: any): PipeDef<T> | null {
   return type[NG_PIPE_DEF] || null;
 }
 
@@ -616,8 +639,8 @@ export function isStandalone(type: Type<unknown>): boolean {
 }
 
 export function getNgModuleDef<T>(type: any, throwNotFound: true): NgModuleDef<T>;
-export function getNgModuleDef<T>(type: any): NgModuleDef<T>|null;
-export function getNgModuleDef<T>(type: any, throwNotFound?: boolean): NgModuleDef<T>|null {
+export function getNgModuleDef<T>(type: any): NgModuleDef<T> | null;
+export function getNgModuleDef<T>(type: any, throwNotFound?: boolean): NgModuleDef<T> | null {
   const ngModuleDef = type[NG_MOD_DEF] || null;
   if (!ngModuleDef && throwNotFound === true) {
     throw new Error(`Type ${stringify(type)} does not have 'ɵmod' property.`);
@@ -625,8 +648,9 @@ export function getNgModuleDef<T>(type: any, throwNotFound?: boolean): NgModuleD
   return ngModuleDef;
 }
 
-function getNgDirectiveDef<T>(directiveDefinition: DirectiveDefinition<T>):
-    Mutable<DirectiveDef<T>, keyof DirectiveDef<T>> {
+function getNgDirectiveDef<T>(
+  directiveDefinition: DirectiveDefinition<T>,
+): Mutable<DirectiveDef<T>, keyof DirectiveDef<T>> {
   const declaredInputs: Record<string, string> = {};
 
   return {
@@ -655,28 +679,36 @@ function getNgDirectiveDef<T>(directiveDefinition: DirectiveDefinition<T>):
   };
 }
 
-function initFeatures<T>(definition:|Mutable<DirectiveDef<T>, keyof DirectiveDef<T>>|
-                         Mutable<ComponentDef<T>, keyof ComponentDef<T>>): void {
+function initFeatures<T>(
+  definition:
+    | Mutable<DirectiveDef<T>, keyof DirectiveDef<T>>
+    | Mutable<ComponentDef<T>, keyof ComponentDef<T>>,
+): void {
   definition.features?.forEach((fn) => fn(definition));
 }
 
 export function extractDefListOrFactory(
-    dependencies: TypeOrFactory<DependencyTypeList>|undefined,
-    pipeDef: false): DirectiveDefListOrFactory|null;
+  dependencies: TypeOrFactory<DependencyTypeList> | undefined,
+  pipeDef: false,
+): DirectiveDefListOrFactory | null;
 export function extractDefListOrFactory(
-    dependencies: TypeOrFactory<DependencyTypeList>|undefined, pipeDef: true): PipeDefListOrFactory|
-    null;
+  dependencies: TypeOrFactory<DependencyTypeList> | undefined,
+  pipeDef: true,
+): PipeDefListOrFactory | null;
 export function extractDefListOrFactory(
-    dependencies: TypeOrFactory<DependencyTypeList>|undefined, pipeDef: boolean): unknown {
+  dependencies: TypeOrFactory<DependencyTypeList> | undefined,
+  pipeDef: boolean,
+): unknown {
   if (!dependencies) {
     return null;
   }
 
   const defExtractor = pipeDef ? getPipeDef : extractDirectiveDef;
 
-  return () => (typeof dependencies === 'function' ? dependencies() : dependencies)
-                   .map(dep => defExtractor(dep))
-                   .filter(nonNull);
+  return () =>
+    (typeof dependencies === 'function' ? dependencies() : dependencies)
+      .map((dep) => defExtractor(dep))
+      .filter(nonNull);
 }
 
 /**
@@ -723,7 +755,7 @@ function getComponentId<T>(componentDef: ComponentDef<T>): string {
   ].join('|');
 
   for (const char of hashSelectors) {
-    hash = Math.imul(31, hash) + char.charCodeAt(0) << 0;
+    hash = (Math.imul(31, hash) + char.charCodeAt(0)) << 0;
   }
 
   // Force positive number hash.
@@ -736,13 +768,16 @@ function getComponentId<T>(componentDef: ComponentDef<T>): string {
     if (GENERATED_COMP_IDS.has(compId)) {
       const previousCompDefType = GENERATED_COMP_IDS.get(compId)!;
       if (previousCompDefType !== componentDef.type) {
-        console.warn(formatRuntimeError(
+        console.warn(
+          formatRuntimeError(
             RuntimeErrorCode.COMPONENT_ID_COLLISION,
             `Component ID generation collision detected. Components '${
-                previousCompDefType.name}' and '${componentDef.type.name}' with selector '${
-                stringifyCSSSelectorList(
-                    componentDef
-                        .selectors)}' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID.`));
+              previousCompDefType.name
+            }' and '${componentDef.type.name}' with selector '${stringifyCSSSelectorList(
+              componentDef.selectors,
+            )}' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID.`,
+          ),
+        );
       }
     } else {
       GENERATED_COMP_IDS.set(compId, componentDef.type);
diff --git a/packages/core/src/render3/definition_factory.ts b/packages/core/src/render3/definition_factory.ts
index 381445c9e307a..e5f6b2e4d55c4 100644
--- a/packages/core/src/render3/definition_factory.ts
+++ b/packages/core/src/render3/definition_factory.ts
@@ -10,7 +10,6 @@ import {Type} from '../interface/type';
 import {stringify} from '../util/stringify';
 import {NG_FACTORY_DEF} from './fields';
 
-
 /**
  * Definition of what a factory function should look like.
  */
@@ -27,10 +26,9 @@ export type FactoryFn<T> = {
   (t?: undefined): T;
 };
 
-
 export function getFactoryDef<T>(type: any, throwNotFound: true): FactoryFn<T>;
-export function getFactoryDef<T>(type: any): FactoryFn<T>|null;
-export function getFactoryDef<T>(type: any, throwNotFound?: boolean): FactoryFn<T>|null {
+export function getFactoryDef<T>(type: any): FactoryFn<T> | null;
+export function getFactoryDef<T>(type: any, throwNotFound?: boolean): FactoryFn<T> | null {
   const hasFactoryDef = type.hasOwnProperty(NG_FACTORY_DEF);
   if (!hasFactoryDef && throwNotFound === true && ngDevMode) {
     throw new Error(`Type ${stringify(type)} does not have 'ɵfac' property.`);
diff --git a/packages/core/src/render3/deps_tracker/api.ts b/packages/core/src/render3/deps_tracker/api.ts
index 9d28e2d40ef73..b08087b0027c4 100644
--- a/packages/core/src/render3/deps_tracker/api.ts
+++ b/packages/core/src/render3/deps_tracker/api.ts
@@ -8,14 +8,20 @@
 
 import {Type} from '../../interface/type';
 import {NgModuleType} from '../../metadata/ng_module_def';
-import {ComponentType, DependencyTypeList, DirectiveType, NgModuleScopeInfoFromDecorator, PipeType} from '../interfaces/definition';
+import {
+  ComponentType,
+  DependencyTypeList,
+  DirectiveType,
+  NgModuleScopeInfoFromDecorator,
+  PipeType,
+} from '../interfaces/definition';
 
 /**
  * Represents the set of dependencies of a type in a certain context.
  */
 interface ScopeData {
   pipes: Set<PipeType<any>>;
-  directives: Set<DirectiveType<any>|ComponentType<any>|Type<any>>;
+  directives: Set<DirectiveType<any> | ComponentType<any> | Type<any>>;
 
   /**
    * If true it indicates that calculating this scope somehow was not successful. The consumers
@@ -75,8 +81,10 @@ export interface DepsTrackerApi {
    * The implementation is expected to use some caching mechanism in order to optimize the resources
    * needed to do this computation.
    */
-  getComponentDependencies(cmp: ComponentType<any>, rawImports?: (Type<any>|(() => Type<any>))[]):
-      ComponentDependencies;
+  getComponentDependencies(
+    cmp: ComponentType<any>,
+    rawImports?: (Type<any> | (() => Type<any>))[],
+  ): ComponentDependencies;
 
   /**
    * Registers an NgModule into the tracker with the given scope info.
@@ -115,8 +123,9 @@ export interface DepsTrackerApi {
    * `clearScopeCacheFor` method.
    */
   getStandaloneComponentScope(
-      type: ComponentType<any>,
-      rawImports: (Type<any>|(() => Type<any>))[]): StandaloneComponentScope;
+    type: ComponentType<any>,
+    rawImports: (Type<any> | (() => Type<any>))[],
+  ): StandaloneComponentScope;
 
   /**
    * Checks if the NgModule declaring the component is not loaded into the browser yet. Always
diff --git a/packages/core/src/render3/deps_tracker/deps_tracker.ts b/packages/core/src/render3/deps_tracker/deps_tracker.ts
index 7bfb51fe38837..dbac3b90aa5ef 100644
--- a/packages/core/src/render3/deps_tracker/deps_tracker.ts
+++ b/packages/core/src/render3/deps_tracker/deps_tracker.ts
@@ -12,11 +12,20 @@ import {Type} from '../../interface/type';
 import {NgModuleType} from '../../metadata/ng_module_def';
 import {flatten} from '../../util/array_utils';
 import {getComponentDef, getNgModuleDef, isStandalone} from '../definition';
-import {ComponentType, NgModuleScopeInfoFromDecorator, RawScopeInfoFromDecorator} from '../interfaces/definition';
+import {
+  ComponentType,
+  NgModuleScopeInfoFromDecorator,
+  RawScopeInfoFromDecorator,
+} from '../interfaces/definition';
 import {isComponent, isDirective, isNgModule, isPipe, verifyStandaloneImport} from '../jit/util';
 import {maybeUnwrapFn} from '../util/misc_utils';
 
-import {ComponentDependencies, DepsTrackerApi, NgModuleScope, StandaloneComponentScope} from './api';
+import {
+  ComponentDependencies,
+  DepsTrackerApi,
+  NgModuleScope,
+  StandaloneComponentScope,
+} from './api';
 
 /**
  * Indicates whether to use the runtime dependency tracker for scope calculation in JIT compilation.
@@ -61,14 +70,17 @@ class DepsTracker implements DepsTrackerApi {
   }
 
   /** @override */
-  getComponentDependencies(type: ComponentType<any>, rawImports?: RawScopeInfoFromDecorator[]):
-      ComponentDependencies {
+  getComponentDependencies(
+    type: ComponentType<any>,
+    rawImports?: RawScopeInfoFromDecorator[],
+  ): ComponentDependencies {
     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}`);
+        `Attempting to get component dependencies for a type that is not a component: ${type}`,
+      );
     }
 
     if (def.standalone) {
@@ -83,7 +95,7 @@ class DepsTracker implements DepsTrackerApi {
           ...scope.compilation.directives,
           ...scope.compilation.pipes,
           ...scope.compilation.ngModules,
-        ]
+        ],
       };
     } else {
       if (!this.ownerNgModule.has(type)) {
@@ -99,10 +111,7 @@ class DepsTracker implements DepsTrackerApi {
       }
 
       return {
-        dependencies: [
-          ...scope.compilation.directives,
-          ...scope.compilation.pipes,
-        ],
+        dependencies: [...scope.compilation.directives, ...scope.compilation.pipes],
       };
     }
   }
@@ -164,8 +173,9 @@ class DepsTracker implements DepsTrackerApi {
         } else {
           // The standalone thing is neither a component nor a directive nor a pipe ... (what?)
           throw new RuntimeError(
-              RuntimeErrorCode.RUNTIME_DEPS_INVALID_IMPORTED_TYPE,
-              'The standalone imported type is neither a component nor a directive nor a pipe');
+            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
@@ -223,8 +233,10 @@ class DepsTracker implements DepsTrackerApi {
   }
 
   /** @override */
-  getStandaloneComponentScope(type: ComponentType<any>, rawImports?: RawScopeInfoFromDecorator[]):
-      StandaloneComponentScope {
+  getStandaloneComponentScope(
+    type: ComponentType<any>,
+    rawImports?: RawScopeInfoFromDecorator[],
+  ): StandaloneComponentScope {
     if (this.standaloneComponentsScopeCache.has(type)) {
       return this.standaloneComponentsScopeCache.get(type)!;
     }
@@ -236,8 +248,9 @@ class DepsTracker implements DepsTrackerApi {
   }
 
   private computeStandaloneComponentScope(
-      type: ComponentType<any>,
-      rawImports?: RawScopeInfoFromDecorator[]): StandaloneComponentScope {
+    type: ComponentType<any>,
+    rawImports?: RawScopeInfoFromDecorator[],
+  ): StandaloneComponentScope {
     const ans: StandaloneComponentScope = {
       compilation: {
         // Standalone components are always able to self-reference.
diff --git a/packages/core/src/render3/di.ts b/packages/core/src/render3/di.ts
index ddcf50f55227f..b052dd307a330 100644
--- a/packages/core/src/render3/di.ts
+++ b/packages/core/src/render3/di.ts
@@ -18,25 +18,60 @@ import {assertDefined, assertEqual, assertIndexInRange} from '../util/assert';
 import {noSideEffects} from '../util/closure';
 
 import {assertDirectiveDef, assertNodeInjector, assertTNodeForLView} from './assert';
-import {emitInstanceCreatedByInjectorEvent, InjectorProfilerContext, runInInjectorProfilerContext, setInjectorProfilerContext} from './debug/injector_profiler';
+import {
+  emitInstanceCreatedByInjectorEvent,
+  InjectorProfilerContext,
+  runInInjectorProfilerContext,
+  setInjectorProfilerContext,
+} from './debug/injector_profiler';
 import {getFactoryDef} from './definition_factory';
 import {throwCyclicDependencyError, throwProviderNotFoundError} from './errors_di';
 import {NG_ELEMENT_ID, NG_FACTORY_DEF} from './fields';
 import {registerPreOrderHooks} from './hooks';
-import { AttributeMarker } from './interfaces/attribute_marker';
+import {AttributeMarker} from './interfaces/attribute_marker';
 import {ComponentDef, DirectiveDef} from './interfaces/definition';
-import {isFactory, NO_PARENT_INJECTOR, NodeInjectorFactory, NodeInjectorOffset, RelativeInjectorLocation, RelativeInjectorLocationFlags} from './interfaces/injector';
-import {TContainerNode, TDirectiveHostNode, TElementContainerNode, TElementNode, TNode, TNodeProviderIndexes, TNodeType} from './interfaces/node';
+import {
+  isFactory,
+  NO_PARENT_INJECTOR,
+  NodeInjectorFactory,
+  NodeInjectorOffset,
+  RelativeInjectorLocation,
+  RelativeInjectorLocationFlags,
+} from './interfaces/injector';
+import {
+  TContainerNode,
+  TDirectiveHostNode,
+  TElementContainerNode,
+  TElementNode,
+  TNode,
+  TNodeProviderIndexes,
+  TNodeType,
+} from './interfaces/node';
 import {isComponentDef, isComponentHost} from './interfaces/type_checks';
-import {DECLARATION_COMPONENT_VIEW, DECLARATION_VIEW, EMBEDDED_VIEW_INJECTOR, FLAGS, INJECTOR, LView, LViewFlags, T_HOST, TData, TVIEW, TView, TViewType} from './interfaces/view';
+import {
+  DECLARATION_COMPONENT_VIEW,
+  DECLARATION_VIEW,
+  EMBEDDED_VIEW_INJECTOR,
+  FLAGS,
+  INJECTOR,
+  LView,
+  LViewFlags,
+  T_HOST,
+  TData,
+  TVIEW,
+  TView,
+  TViewType,
+} from './interfaces/view';
 import {assertTNodeType} from './node_assert';
 import {enterDI, getCurrentTNode, getLView, leaveDI} from './state';
 import {isNameOnlyAttributeMarker} from './util/attrs_utils';
-import {getParentInjectorIndex, getParentInjectorView, hasParentInjector} from './util/injector_utils';
+import {
+  getParentInjectorIndex,
+  getParentInjectorView,
+  hasParentInjector,
+} from './util/injector_utils';
 import {stringifyForError} from './util/stringify_utils';
 
-
-
 /**
  * Defines if the call to `inject` should include `viewProviders` in its resolution.
  *
@@ -111,9 +146,12 @@ const NOT_FOUND = {};
  * @param type The directive token to register
  */
 export function bloomAdd(
-    injectorIndex: number, tView: TView, type: ProviderToken<any>|string): void {
+  injectorIndex: number,
+  tView: TView,
+  type: ProviderToken<any> | string,
+): void {
   ngDevMode && assertEqual(tView.firstCreatePass, true, 'expected firstCreatePass to be true');
-  let id: number|undefined;
+  let id: number | undefined;
   if (typeof type === 'string') {
     id = type.charCodeAt(0) || 0;
   } else if (type.hasOwnProperty(NG_ELEMENT_ID)) {
@@ -149,7 +187,9 @@ export function bloomAdd(
  * @returns Node injector
  */
 export function getOrCreateNodeInjectorForNode(
-    tNode: TElementNode|TContainerNode|TElementContainerNode, lView: LView): number {
+  tNode: TElementNode | TContainerNode | TElementContainerNode,
+  lView: LView,
+): number {
   const existingInjectorIndex = getInjectorIndex(tNode, lView);
   if (existingInjectorIndex !== -1) {
     return existingInjectorIndex;
@@ -158,8 +198,8 @@ export function getOrCreateNodeInjectorForNode(
   const tView = lView[TVIEW];
   if (tView.firstCreatePass) {
     tNode.injectorIndex = lView.length;
-    insertBloom(tView.data, tNode);  // foundation for node bloom
-    insertBloom(lView, null);        // foundation for cumulative bloom
+    insertBloom(tView.data, tNode); // foundation for node bloom
+    insertBloom(lView, null); // foundation for cumulative bloom
     insertBloom(tView.blueprint, null);
   }
 
@@ -183,19 +223,20 @@ export function getOrCreateNodeInjectorForNode(
   return injectorIndex;
 }
 
-function insertBloom(arr: any[], footer: TNode|null): void {
+function insertBloom(arr: any[], footer: TNode | null): void {
   arr.push(0, 0, 0, 0, 0, 0, 0, 0, footer);
 }
 
-
 export function getInjectorIndex(tNode: TNode, lView: LView): number {
-  if (tNode.injectorIndex === -1 ||
-      // If the injector index is the same as its parent's injector index, then the index has been
-      // copied down from the parent node. No injector has been created yet on this node.
-      (tNode.parent && tNode.parent.injectorIndex === tNode.injectorIndex) ||
-      // After the first template pass, the injector index might exist but the parent values
-      // might not have been calculated yet for this instance
-      lView[tNode.injectorIndex + NodeInjectorOffset.PARENT] === null) {
+  if (
+    tNode.injectorIndex === -1 ||
+    // If the injector index is the same as its parent's injector index, then the index has been
+    // copied down from the parent node. No injector has been created yet on this node.
+    (tNode.parent && tNode.parent.injectorIndex === tNode.injectorIndex) ||
+    // After the first template pass, the injector index might exist but the parent values
+    // might not have been calculated yet for this instance
+    lView[tNode.injectorIndex + NodeInjectorOffset.PARENT] === null
+  ) {
     return -1;
   } else {
     ngDevMode && assertIndexInRange(lView, tNode.injectorIndex);
@@ -214,15 +255,15 @@ export function getParentInjectorLocation(tNode: TNode, lView: LView): RelativeI
   if (tNode.parent && tNode.parent.injectorIndex !== -1) {
     // If we have a parent `TNode` and there is an injector associated with it we are done, because
     // the parent injector is within the current `LView`.
-    return tNode.parent.injectorIndex as RelativeInjectorLocation;  // ViewOffset is 0
+    return tNode.parent.injectorIndex as RelativeInjectorLocation; // ViewOffset is 0
   }
 
   // When parent injector location is computed it may be outside of the current view. (ie it could
   // be pointing to a declared parent location). This variable stores number of declaration parents
   // we need to walk up in order to find the parent injector location.
   let declarationViewOffset = 0;
-  let parentTNode: TNode|null = null;
-  let lViewCursor: LView|null = lView;
+  let parentTNode: TNode | null = null;
+  let lViewCursor: LView | null = lView;
 
   // The parent injector is not in the current `LView`. We will have to walk the declared parent
   // `LView` hierarchy and look for it. If we walk of the top, that means that there is no parent
@@ -243,8 +284,8 @@ export function getParentInjectorLocation(tNode: TNode, lView: LView): RelativeI
     if (parentTNode.injectorIndex !== -1) {
       // We found a NodeInjector which points to something.
       return (parentTNode.injectorIndex |
-              (declarationViewOffset << RelativeInjectorLocationFlags.ViewOffsetShift)) as
-          RelativeInjectorLocation;
+        (declarationViewOffset <<
+          RelativeInjectorLocationFlags.ViewOffsetShift)) as RelativeInjectorLocation;
     }
   }
   return NO_PARENT_INJECTOR;
@@ -257,7 +298,10 @@ export function getParentInjectorLocation(tNode: TNode, lView: LView): RelativeI
  * @param token The type or the injection token to be made public
  */
 export function diPublicInInjector(
-    injectorIndex: number, tView: TView, token: ProviderToken<any>): void {
+  injectorIndex: number,
+  tView: TView,
+  token: ProviderToken<any>,
+): void {
   bloomAdd(injectorIndex, tView, token);
 }
 
@@ -292,7 +336,7 @@ export function diPublicInInjector(
  *
  * @publicApi
  */
-export function injectAttributeImpl(tNode: TNode, attrNameToInject: string): string|null {
+export function injectAttributeImpl(tNode: TNode, attrNameToInject: string): string | null {
   ngDevMode && assertTNodeType(tNode, TNodeType.AnyContainer | TNodeType.AnyRNode);
   ngDevMode && assertDefined(tNode, 'expecting tNode');
   if (attrNameToInject === 'class') {
@@ -335,10 +379,12 @@ export function injectAttributeImpl(tNode: TNode, attrNameToInject: string): str
   return null;
 }
 
-
 function notFoundValueOrThrow<T>(
-    notFoundValue: T|null, token: ProviderToken<T>, flags: InjectFlags): T|null {
-  if ((flags & InjectFlags.Optional) || notFoundValue !== undefined) {
+  notFoundValue: T | null,
+  token: ProviderToken<T>,
+  flags: InjectFlags,
+): T | null {
+  if (flags & InjectFlags.Optional || notFoundValue !== undefined) {
     return notFoundValue;
   } else {
     throwProviderNotFoundError(token, 'NodeInjector');
@@ -355,8 +401,12 @@ function notFoundValueOrThrow<T>(
  * @returns the value from the injector or throws an exception
  */
 function lookupTokenUsingModuleInjector<T>(
-    lView: LView, token: ProviderToken<T>, flags: InjectFlags, notFoundValue?: any): T|null {
-  if ((flags & InjectFlags.Optional) && notFoundValue === undefined) {
+  lView: LView,
+  token: ProviderToken<T>,
+  flags: InjectFlags,
+  notFoundValue?: any,
+): T | null {
+  if (flags & InjectFlags.Optional && notFoundValue === undefined) {
     // This must be set or the NullInjector will throw for optional deps
     notFoundValue = null;
   }
@@ -397,17 +447,28 @@ function lookupTokenUsingModuleInjector<T>(
  * @returns the value from the injector, `null` when not found, or `notFoundValue` if provided
  */
 export function getOrCreateInjectable<T>(
-    tNode: TDirectiveHostNode|null, lView: LView, token: ProviderToken<T>,
-    flags: InjectFlags = InjectFlags.Default, notFoundValue?: any): T|null {
+  tNode: TDirectiveHostNode | null,
+  lView: LView,
+  token: ProviderToken<T>,
+  flags: InjectFlags = InjectFlags.Default,
+  notFoundValue?: any,
+): T | null {
   if (tNode !== null) {
     // If the view or any of its ancestors have an embedded
     // view injector, we have to look it up there first.
-    if (lView[FLAGS] & LViewFlags.HasEmbeddedViewInjector &&
-        // The token must be present on the current node injector when the `Self`
-        // flag is set, so the lookup on embedded view injector(s) can be skipped.
-        !(flags & InjectFlags.Self)) {
-      const embeddedInjectorValue =
-          lookupTokenUsingEmbeddedInjector(tNode, lView, token, flags, NOT_FOUND);
+    if (
+      lView[FLAGS] & LViewFlags.HasEmbeddedViewInjector &&
+      // The token must be present on the current node injector when the `Self`
+      // flag is set, so the lookup on embedded view injector(s) can be skipped.
+      !(flags & InjectFlags.Self)
+    ) {
+      const embeddedInjectorValue = lookupTokenUsingEmbeddedInjector(
+        tNode,
+        lView,
+        token,
+        flags,
+        NOT_FOUND,
+      );
       if (embeddedInjectorValue !== NOT_FOUND) {
         return embeddedInjectorValue;
       }
@@ -435,8 +496,12 @@ export function getOrCreateInjectable<T>(
  * @returns the value from the injector, `null` when not found, or `notFoundValue` if provided
  */
 function lookupTokenUsingNodeInjector<T>(
-    tNode: TDirectiveHostNode, lView: LView, token: ProviderToken<T>, flags: InjectFlags,
-    notFoundValue?: any) {
+  tNode: TDirectiveHostNode,
+  lView: LView,
+  token: ProviderToken<T>,
+  flags: InjectFlags,
+  notFoundValue?: any,
+) {
   const bloomHash = bloomHashBitOrFactory(token);
   // If the ID stored here is a function, this is a special object like ElementRef or TemplateRef
   // so just call the factory function to create it.
@@ -444,23 +509,25 @@ function lookupTokenUsingNodeInjector<T>(
     if (!enterDI(lView, tNode, flags)) {
       // Failed to enter DI, try module injector instead. If a token is injected with the @Host
       // flag, the module injector is not searched for that token in Ivy.
-      return (flags & InjectFlags.Host) ?
-          notFoundValueOrThrow<T>(notFoundValue, token, flags) :
-          lookupTokenUsingModuleInjector<T>(lView, token, flags, notFoundValue);
+      return flags & InjectFlags.Host
+        ? notFoundValueOrThrow<T>(notFoundValue, token, flags)
+        : lookupTokenUsingModuleInjector<T>(lView, token, flags, notFoundValue);
     }
     try {
       let value: unknown;
 
       if (ngDevMode) {
         runInInjectorProfilerContext(
-            new NodeInjector(getCurrentTNode() as TElementNode, getLView()), token as Type<T>,
-            () => {
-              value = bloomHash(flags);
-
-              if (value != null) {
-                emitInstanceCreatedByInjectorEvent(value);
-              }
-            });
+          new NodeInjector(getCurrentTNode() as TElementNode, getLView()),
+          token as Type<T>,
+          () => {
+            value = bloomHash(flags);
+
+            if (value != null) {
+              emitInstanceCreatedByInjectorEvent(value);
+            }
+          },
+        );
       } else {
         value = bloomHash(flags);
       }
@@ -477,17 +544,19 @@ function lookupTokenUsingNodeInjector<T>(
     // A reference to the previous injector TView that was found while climbing the element
     // injector tree. This is used to know if viewProviders can be accessed on the current
     // injector.
-    let previousTView: TView|null = null;
+    let previousTView: TView | null = null;
     let injectorIndex = getInjectorIndex(tNode, lView);
     let parentLocation = NO_PARENT_INJECTOR;
-    let hostTElementNode: TNode|null =
-        flags & InjectFlags.Host ? lView[DECLARATION_COMPONENT_VIEW][T_HOST] : null;
+    let hostTElementNode: TNode | null =
+      flags & InjectFlags.Host ? lView[DECLARATION_COMPONENT_VIEW][T_HOST] : null;
 
     // If we should skip this injector, or if there is no injector on this node, start by
     // searching the parent injector.
     if (injectorIndex === -1 || flags & InjectFlags.SkipSelf) {
-      parentLocation = injectorIndex === -1 ? getParentInjectorLocation(tNode, lView) :
-                                              lView[injectorIndex + NodeInjectorOffset.PARENT];
+      parentLocation =
+        injectorIndex === -1
+          ? getParentInjectorLocation(tNode, lView)
+          : lView[injectorIndex + NodeInjectorOffset.PARENT];
 
       if (parentLocation === NO_PARENT_INJECTOR || !shouldSearchParent(flags, false)) {
         injectorIndex = -1;
@@ -506,23 +575,32 @@ function lookupTokenUsingNodeInjector<T>(
       // Check the current injector. If it matches, see if it contains token.
       const tView = lView[TVIEW];
       ngDevMode &&
-          assertTNodeForLView(tView.data[injectorIndex + NodeInjectorOffset.TNODE] as TNode, lView);
+        assertTNodeForLView(tView.data[injectorIndex + NodeInjectorOffset.TNODE] as TNode, lView);
       if (bloomHasToken(bloomHash, injectorIndex, tView.data)) {
         // At this point, we have an injector which *may* contain the token, so we step through
         // the providers and directives associated with the injector's corresponding node to get
         // the instance.
-        const instance: T|{}|null = searchTokensOnInjector<T>(
-            injectorIndex, lView, token, previousTView, flags, hostTElementNode);
+        const instance: T | {} | null = searchTokensOnInjector<T>(
+          injectorIndex,
+          lView,
+          token,
+          previousTView,
+          flags,
+          hostTElementNode,
+        );
         if (instance !== NOT_FOUND) {
           return instance;
         }
       }
       parentLocation = lView[injectorIndex + NodeInjectorOffset.PARENT];
-      if (parentLocation !== NO_PARENT_INJECTOR &&
-          shouldSearchParent(
-              flags,
-              lView[TVIEW].data[injectorIndex + NodeInjectorOffset.TNODE] === hostTElementNode) &&
-          bloomHasToken(bloomHash, injectorIndex, lView)) {
+      if (
+        parentLocation !== NO_PARENT_INJECTOR &&
+        shouldSearchParent(
+          flags,
+          lView[TVIEW].data[injectorIndex + NodeInjectorOffset.TNODE] === hostTElementNode,
+        ) &&
+        bloomHasToken(bloomHash, injectorIndex, lView)
+      ) {
         // The def wasn't found anywhere on this node, so it was a false positive.
         // Traverse up the tree and continue searching.
         previousTView = tView;
@@ -541,35 +619,46 @@ function lookupTokenUsingNodeInjector<T>(
 }
 
 function searchTokensOnInjector<T>(
-    injectorIndex: number, lView: LView, token: ProviderToken<T>, previousTView: TView|null,
-    flags: InjectFlags, hostTElementNode: TNode|null) {
+  injectorIndex: number,
+  lView: LView,
+  token: ProviderToken<T>,
+  previousTView: TView | null,
+  flags: InjectFlags,
+  hostTElementNode: TNode | null,
+) {
   const currentTView = lView[TVIEW];
   const tNode = currentTView.data[injectorIndex + NodeInjectorOffset.TNODE] as TNode;
   // First, we need to determine if view providers can be accessed by the starting element.
   // There are two possibilities
-  const canAccessViewProviders = previousTView == null ?
-      // 1) This is the first invocation `previousTView == null` which means that we are at the
-      // `TNode` of where injector is starting to look. In such a case the only time we are allowed
-      // to look into the ViewProviders is if:
-      // - we are on a component
-      // - AND the injector set `includeViewProviders` to true (implying that the token can see
-      // ViewProviders because it is the Component or a Service which itself was declared in
-      // ViewProviders)
-      (isComponentHost(tNode) && includeViewProviders) :
-      // 2) `previousTView != null` which means that we are now walking across the parent nodes.
-      // In such a case we are only allowed to look into the ViewProviders if:
-      // - We just crossed from child View to Parent View `previousTView != currentTView`
-      // - AND the parent TNode is an Element.
-      // This means that we just came from the Component's View and therefore are allowed to see
-      // into the ViewProviders.
-      (previousTView != currentTView && ((tNode.type & TNodeType.AnyRNode) !== 0));
+  const canAccessViewProviders =
+    previousTView == null
+      ? // 1) This is the first invocation `previousTView == null` which means that we are at the
+        // `TNode` of where injector is starting to look. In such a case the only time we are allowed
+        // to look into the ViewProviders is if:
+        // - we are on a component
+        // - AND the injector set `includeViewProviders` to true (implying that the token can see
+        // ViewProviders because it is the Component or a Service which itself was declared in
+        // ViewProviders)
+        isComponentHost(tNode) && includeViewProviders
+      : // 2) `previousTView != null` which means that we are now walking across the parent nodes.
+        // In such a case we are only allowed to look into the ViewProviders if:
+        // - We just crossed from child View to Parent View `previousTView != currentTView`
+        // - AND the parent TNode is an Element.
+        // This means that we just came from the Component's View and therefore are allowed to see
+        // into the ViewProviders.
+        previousTView != currentTView && (tNode.type & TNodeType.AnyRNode) !== 0;
 
   // This special case happens when there is a @host on the inject and when we are searching
   // on the host element node.
-  const isHostSpecialCase = (flags & InjectFlags.Host) && hostTElementNode === tNode;
+  const isHostSpecialCase = flags & InjectFlags.Host && hostTElementNode === tNode;
 
   const injectableIdx = locateDirectiveOrProvider(
-      tNode, currentTView, token, canAccessViewProviders, isHostSpecialCase);
+    tNode,
+    currentTView,
+    token,
+    canAccessViewProviders,
+    isHostSpecialCase,
+  );
   if (injectableIdx !== null) {
     return getNodeInjectable(lView, currentTView, injectableIdx, tNode as TElementNode);
   } else {
@@ -588,8 +677,12 @@ function searchTokensOnInjector<T>(
  * @returns Index of a found directive or provider, or null when none found.
  */
 export function locateDirectiveOrProvider<T>(
-    tNode: TNode, tView: TView, token: ProviderToken<T>|string, canAccessViewProviders: boolean,
-    isHostSpecialCase: boolean|number): number|null {
+  tNode: TNode,
+  tView: TView,
+  token: ProviderToken<T> | string,
+  canAccessViewProviders: boolean,
+  isHostSpecialCase: boolean | number,
+): number | null {
   const nodeProviderIndexes = tNode.providerIndexes;
   const tInjectables = tView.data;
 
@@ -597,15 +690,18 @@ export function locateDirectiveOrProvider<T>(
   const directivesStart = tNode.directiveStart;
   const directiveEnd = tNode.directiveEnd;
   const cptViewProvidersCount =
-      nodeProviderIndexes >> TNodeProviderIndexes.CptViewProvidersCountShift;
-  const startingIndex =
-      canAccessViewProviders ? injectablesStart : injectablesStart + cptViewProvidersCount;
+    nodeProviderIndexes >> TNodeProviderIndexes.CptViewProvidersCountShift;
+  const startingIndex = canAccessViewProviders
+    ? injectablesStart
+    : injectablesStart + cptViewProvidersCount;
   // When the host special case applies, only the viewProviders and the component are visible
   const endIndex = isHostSpecialCase ? injectablesStart + cptViewProvidersCount : directiveEnd;
   for (let i = startingIndex; i < endIndex; i++) {
-    const providerTokenOrDef = tInjectables[i] as ProviderToken<any>| DirectiveDef<any>| string;
-    if (i < directivesStart && token === providerTokenOrDef ||
-        i >= directivesStart && (providerTokenOrDef as DirectiveDef<any>).type === token) {
+    const providerTokenOrDef = tInjectables[i] as ProviderToken<any> | DirectiveDef<any> | string;
+    if (
+      (i < directivesStart && token === providerTokenOrDef) ||
+      (i >= directivesStart && (providerTokenOrDef as DirectiveDef<any>).type === token)
+    ) {
       return i;
     }
   }
@@ -626,7 +722,11 @@ export function locateDirectiveOrProvider<T>(
  * instantiates the `injectable` and caches the value.
  */
 export function getNodeInjectable(
-    lView: LView, tView: TView, index: number, tNode: TDirectiveHostNode): any {
+  lView: LView,
+  tView: TView,
+  index: number,
+  tNode: TDirectiveHostNode,
+): any {
   let value = lView[index];
   const tData = tView.data;
   if (isFactory(value)) {
@@ -637,25 +737,28 @@ export function getNodeInjectable(
     const previousIncludeViewProviders = setIncludeViewProviders(factory.canSeeViewProviders);
     factory.resolving = true;
 
-    let prevInjectContext: InjectorProfilerContext|undefined;
+    let prevInjectContext: InjectorProfilerContext | undefined;
     if (ngDevMode) {
       // tData indexes mirror the concrete instances in its corresponding LView.
       // lView[index] here is either the injectable instace itself or a factory,
       // therefore tData[index] is the constructor of that injectable or a
       // definition object that contains the constructor in a `.type` field.
       const token =
-          (tData[index] as (DirectiveDef<unknown>| ComponentDef<unknown>)).type || tData[index];
+        (tData[index] as DirectiveDef<unknown> | ComponentDef<unknown>).type || tData[index];
       const injector = new NodeInjector(tNode, lView);
       prevInjectContext = setInjectorProfilerContext({injector, token});
     }
 
-    const previousInjectImplementation =
-        factory.injectImpl ? setInjectImplementation(factory.injectImpl) : null;
+    const previousInjectImplementation = factory.injectImpl
+      ? setInjectImplementation(factory.injectImpl)
+      : null;
     const success = enterDI(lView, tNode, InjectFlags.Default);
     ngDevMode &&
-        assertEqual(
-            success, true,
-            'Because flags do not contain \`SkipSelf\' we expect this to always succeed.');
+      assertEqual(
+        success,
+        true,
+        "Because flags do not contain `SkipSelf' we expect this to always succeed.",
+      );
     try {
       value = lView[index] = factory.factory(undefined, tData, lView, tNode);
 
@@ -675,7 +778,7 @@ export function getNodeInjectable(
       ngDevMode && setInjectorProfilerContext(prevInjectContext!);
 
       previousInjectImplementation !== null &&
-          setInjectImplementation(previousInjectImplementation);
+        setInjectImplementation(previousInjectImplementation);
       setIncludeViewProviders(previousIncludeViewProviders);
       factory.resolving = false;
       leaveDI();
@@ -696,21 +799,23 @@ export function getNodeInjectable(
  * @returns the matching bit to check in the bloom filter or `null` if the token is not known.
  *   When the returned value is negative then it represents special values such as `Injector`.
  */
-export function bloomHashBitOrFactory(token: ProviderToken<any>|string): number|Function|undefined {
+export function bloomHashBitOrFactory(
+  token: ProviderToken<any> | string,
+): number | Function | undefined {
   ngDevMode && assertDefined(token, 'token must be defined');
   if (typeof token === 'string') {
     return token.charCodeAt(0) || 0;
   }
-  const tokenId: number|undefined =
-      // First check with `hasOwnProperty` so we don't get an inherited ID.
-      token.hasOwnProperty(NG_ELEMENT_ID) ? (token as any)[NG_ELEMENT_ID] : undefined;
+  const tokenId: number | undefined =
+    // First check with `hasOwnProperty` so we don't get an inherited ID.
+    token.hasOwnProperty(NG_ELEMENT_ID) ? (token as any)[NG_ELEMENT_ID] : undefined;
   // Negative token IDs are used for special objects such as `Injector`
   if (typeof tokenId === 'number') {
     if (tokenId >= 0) {
       return tokenId & BLOOM_MASK;
     } else {
       ngDevMode &&
-          assertEqual(tokenId, InjectorMarkers.Injector, 'Expecting to get Special Injector Id');
+        assertEqual(tokenId, InjectorMarkers.Injector, 'Expecting to get Special Injector Id');
       return createNodeInjector;
     }
   } else {
@@ -718,7 +823,11 @@ export function bloomHashBitOrFactory(token: ProviderToken<any>|string): number|
   }
 }
 
-export function bloomHasToken(bloomHash: number, injectorIndex: number, injectorView: LView|TData) {
+export function bloomHasToken(
+  bloomHash: number,
+  injectorIndex: number,
+  injectorView: LView | TData,
+) {
   // Create a mask that targets the specific bit associated with the directive we're looking for.
   // JS bit operations are 32 bits, so this will be a number between 2^0 and 2^31, corresponding
   // to bit positions 0 - 31 in a 32 bit integer.
@@ -735,7 +844,7 @@ export function bloomHasToken(bloomHash: number, injectorIndex: number, injector
 }
 
 /** Returns true if flags prevent parent injector from being searched for tokens */
-function shouldSearchParent(flags: InjectFlags, isFirstHostTNode: boolean): boolean|number {
+function shouldSearchParent(flags: InjectFlags, isFirstHostTNode: boolean): boolean | number {
   return !(flags & InjectFlags.Self) && !(flags & InjectFlags.Host && isFirstHostTNode);
 }
 
@@ -743,20 +852,30 @@ export function getNodeInjectorLView(nodeInjector: NodeInjector): LView {
   return (nodeInjector as any)._lView as LView;
 }
 
-export function getNodeInjectorTNode(nodeInjector: NodeInjector): TElementNode|TContainerNode|
-    TElementContainerNode|null {
-  return (nodeInjector as any)._tNode as TElementNode | TContainerNode | TElementContainerNode |
-      null;
+export function getNodeInjectorTNode(
+  nodeInjector: NodeInjector,
+): TElementNode | TContainerNode | TElementContainerNode | null {
+  return (nodeInjector as any)._tNode as
+    | TElementNode
+    | TContainerNode
+    | TElementContainerNode
+    | null;
 }
 
 export class NodeInjector implements Injector {
   constructor(
-      private _tNode: TElementNode|TContainerNode|TElementContainerNode|null,
-      private _lView: LView) {}
+    private _tNode: TElementNode | TContainerNode | TElementContainerNode | null,
+    private _lView: LView,
+  ) {}
 
-  get(token: any, notFoundValue?: any, flags?: InjectFlags|InjectOptions): any {
+  get(token: any, notFoundValue?: any, flags?: InjectFlags | InjectOptions): any {
     return getOrCreateInjectable(
-        this._tNode, this._lView, token, convertToBitFlags(flags), notFoundValue);
+      this._tNode,
+      this._lView,
+      token,
+      convertToBitFlags(flags),
+      notFoundValue,
+    );
   }
 }
 
@@ -799,7 +918,7 @@ export function ɵɵgetInheritedFactory<T>(type: Type<any>): (type: Type<T>) =>
   });
 }
 
-function getFactoryOf<T>(type: Type<any>): ((type?: Type<T>) => T | null)|null {
+function getFactoryOf<T>(type: Type<any>): ((type?: Type<T>) => T | null) | null {
   if (isForwardRef(type)) {
     return () => {
       const factory = getFactoryOf<T>(resolveForwardRef(type));
@@ -820,10 +939,14 @@ function getFactoryOf<T>(type: Type<any>): ((type?: Type<T>) => T | null)|null {
  * @returns the value from the injector, `null` when not found, or `notFoundValue` if provided
  */
 function lookupTokenUsingEmbeddedInjector<T>(
-    tNode: TDirectiveHostNode, lView: LView, token: ProviderToken<T>, flags: InjectFlags,
-    notFoundValue?: any) {
-  let currentTNode: TDirectiveHostNode|null = tNode;
-  let currentLView: LView|null = lView;
+  tNode: TDirectiveHostNode,
+  lView: LView,
+  token: ProviderToken<T>,
+  flags: InjectFlags,
+  notFoundValue?: any,
+) {
+  let currentTNode: TDirectiveHostNode | null = tNode;
+  let currentLView: LView | null = lView;
 
   // When an LView with an embedded view injector is inserted, it'll likely be interlaced with
   // nodes who may have injectors (e.g. node injector -> embedded view injector -> node injector).
@@ -831,22 +954,30 @@ function lookupTokenUsingEmbeddedInjector<T>(
   // have a way of extracting the records from an injector, the only way to maintain the correct
   // hierarchy when resolving the value is to walk it node-by-node while attempting to resolve
   // the token at each level.
-  while (currentTNode !== null && currentLView !== null &&
-         (currentLView[FLAGS] & LViewFlags.HasEmbeddedViewInjector) &&
-         !(currentLView[FLAGS] & LViewFlags.IsRoot)) {
+  while (
+    currentTNode !== null &&
+    currentLView !== null &&
+    currentLView[FLAGS] & LViewFlags.HasEmbeddedViewInjector &&
+    !(currentLView[FLAGS] & LViewFlags.IsRoot)
+  ) {
     ngDevMode && assertTNodeForLView(currentTNode, currentLView);
 
     // Note that this lookup on the node injector is using the `Self` flag, because
     // we don't want the node injector to look at any parent injectors since we
     // may hit the embedded view injector first.
     const nodeInjectorValue = lookupTokenUsingNodeInjector(
-        currentTNode, currentLView, token, flags | InjectFlags.Self, NOT_FOUND);
+      currentTNode,
+      currentLView,
+      token,
+      flags | InjectFlags.Self,
+      NOT_FOUND,
+    );
     if (nodeInjectorValue !== NOT_FOUND) {
       return nodeInjectorValue;
     }
 
     // Has an explicit type due to a TS bug: https://github.com/microsoft/TypeScript/issues/33191
-    let parentTNode: TElementNode|TContainerNode|null = currentTNode.parent;
+    let parentTNode: TElementNode | TContainerNode | null = currentTNode.parent;
 
     // `TNode.parent` includes the parent within the current view only. If it doesn't exist,
     // it means that we've hit the view boundary and we need to go up to the next view.
@@ -854,8 +985,11 @@ function lookupTokenUsingEmbeddedInjector<T>(
       // Before we go to the next LView, check if the token exists on the current embedded injector.
       const embeddedViewInjector = currentLView[EMBEDDED_VIEW_INJECTOR];
       if (embeddedViewInjector) {
-        const embeddedViewInjectorValue =
-            embeddedViewInjector.get(token, NOT_FOUND as T | {}, flags);
+        const embeddedViewInjectorValue = embeddedViewInjector.get(
+          token,
+          NOT_FOUND as T | {},
+          flags,
+        );
         if (embeddedViewInjectorValue !== NOT_FOUND) {
           return embeddedViewInjectorValue;
         }
@@ -873,7 +1007,7 @@ function lookupTokenUsingEmbeddedInjector<T>(
 }
 
 /** Gets the TNode associated with an LView inside of the declaration view. */
-function getTNodeFromLView(lView: LView): TElementNode|TElementContainerNode|null {
+function getTNodeFromLView(lView: LView): TElementNode | TElementContainerNode | null {
   const tView = lView[TVIEW];
   const tViewType = tView.type;
 
diff --git a/packages/core/src/render3/di_setup.ts b/packages/core/src/render3/di_setup.ts
index b56b92bd4ea7a..1279691bacca9 100644
--- a/packages/core/src/render3/di_setup.ts
+++ b/packages/core/src/render3/di_setup.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {resolveForwardRef} from '../di/forward_ref';
 import {ClassProvider, Provider} from '../di/interface/provider';
 import {isClassProvider, isTypeProvider, SingleProvider} from '../di/provider_collection';
@@ -14,17 +13,26 @@ import {providerToFactory} from '../di/r3_injector';
 import {assertDefined} from '../util/assert';
 
 import {emitProviderConfiguredEvent, runInInjectorProfilerContext} from './debug/injector_profiler';
-import {diPublicInInjector, getNodeInjectable, getOrCreateNodeInjectorForNode, NodeInjector} from './di';
+import {
+  diPublicInInjector,
+  getNodeInjectable,
+  getOrCreateNodeInjectorForNode,
+  NodeInjector,
+} from './di';
 import {ɵɵdirectiveInject} from './instructions/all';
 import {DirectiveDef} from './interfaces/definition';
 import {NodeInjectorFactory} from './interfaces/injector';
-import {TContainerNode, TDirectiveHostNode, TElementContainerNode, TElementNode, TNodeProviderIndexes} from './interfaces/node';
+import {
+  TContainerNode,
+  TDirectiveHostNode,
+  TElementContainerNode,
+  TElementNode,
+  TNodeProviderIndexes,
+} from './interfaces/node';
 import {isComponentDef} from './interfaces/type_checks';
 import {DestroyHookData, LView, TData, TVIEW, TView} from './interfaces/view';
 import {getCurrentTNode, getLView, getTView} from './state';
 
-
-
 /**
  * Resolves the providers which are defined in the DirectiveDef.
  *
@@ -44,7 +52,10 @@ import {getCurrentTNode, getLView, getTView} from './state';
  * @param viewProviders: Array of `viewProviders`.
  */
 export function providersResolver<T>(
-    def: DirectiveDef<T>, providers: Provider[], viewProviders: Provider[]): void {
+  def: DirectiveDef<T>,
+  providers: Provider[],
+  viewProviders: Provider[],
+): void {
   const tView = getTView();
   if (tView.firstCreatePass) {
     const isComponent = isComponentDef(def);
@@ -61,8 +72,12 @@ export function providersResolver<T>(
  * Resolves a provider and publishes it to the DI system.
  */
 function resolveProvider(
-    provider: Provider, tInjectables: TData, lInjectablesBlueprint: NodeInjectorFactory[],
-    isComponent: boolean, isViewProvider: boolean): void {
+  provider: Provider,
+  tInjectables: TData,
+  lInjectablesBlueprint: NodeInjectorFactory[],
+  isComponent: boolean,
+  isViewProvider: boolean,
+): void {
   provider = resolveForwardRef(provider);
   if (Array.isArray(provider)) {
     // Recursively call `resolveProvider`
@@ -70,7 +85,12 @@ function resolveProvider(
     // cloning of the initial state.
     for (let i = 0; i < provider.length; i++) {
       resolveProvider(
-          provider[i], tInjectables, lInjectablesBlueprint, isComponent, isViewProvider);
+        provider[i],
+        tInjectables,
+        lInjectablesBlueprint,
+        isComponent,
+        isViewProvider,
+      );
     }
   } else {
     const tView = getTView();
@@ -80,8 +100,10 @@ function resolveProvider(
 
     const providerFactory = providerToFactory(provider);
     if (ngDevMode) {
-      const injector =
-          new NodeInjector(tNode as TElementNode | TContainerNode | TElementContainerNode, lView);
+      const injector = new NodeInjector(
+        tNode as TElementNode | TContainerNode | TElementContainerNode,
+        lView,
+      );
       runInInjectorProfilerContext(injector, token, () => {
         emitProviderConfiguredEvent(provider as SingleProvider, isViewProvider);
       });
@@ -90,19 +112,26 @@ function resolveProvider(
     const beginIndex = tNode.providerIndexes & TNodeProviderIndexes.ProvidersStartIndexMask;
     const endIndex = tNode.directiveStart;
     const cptViewProvidersCount =
-        tNode.providerIndexes >> TNodeProviderIndexes.CptViewProvidersCountShift;
+      tNode.providerIndexes >> TNodeProviderIndexes.CptViewProvidersCountShift;
 
     if (isTypeProvider(provider) || !provider.multi) {
       // Single provider case: the factory is created and pushed immediately
       const factory = new NodeInjectorFactory(providerFactory, isViewProvider, ɵɵdirectiveInject);
       const existingFactoryIndex = indexOf(
-          token, tInjectables, isViewProvider ? beginIndex : beginIndex + cptViewProvidersCount,
-          endIndex);
+        token,
+        tInjectables,
+        isViewProvider ? beginIndex : beginIndex + cptViewProvidersCount,
+        endIndex,
+      );
       if (existingFactoryIndex === -1) {
         diPublicInInjector(
-            getOrCreateNodeInjectorForNode(
-                tNode as TElementNode | TContainerNode | TElementContainerNode, lView),
-            tView, token);
+          getOrCreateNodeInjectorForNode(
+            tNode as TElementNode | TContainerNode | TElementContainerNode,
+            lView,
+          ),
+          tView,
+          token,
+        );
         registerDestroyHooksIfSupported(tView, provider, tInjectables.length);
         tInjectables.push(token);
         tNode.directiveStart++;
@@ -138,25 +167,44 @@ function resolveProvider(
       //      It is also linked to the multi factory for view providers, if it exists.
       //   b) Else, the multi provider is added to the existing multi factory.
 
-      const existingProvidersFactoryIndex =
-          indexOf(token, tInjectables, beginIndex + cptViewProvidersCount, endIndex);
-      const existingViewProvidersFactoryIndex =
-          indexOf(token, tInjectables, beginIndex, beginIndex + cptViewProvidersCount);
-      const doesProvidersFactoryExist = existingProvidersFactoryIndex >= 0 &&
-          lInjectablesBlueprint[existingProvidersFactoryIndex];
-      const doesViewProvidersFactoryExist = existingViewProvidersFactoryIndex >= 0 &&
-          lInjectablesBlueprint[existingViewProvidersFactoryIndex];
+      const existingProvidersFactoryIndex = indexOf(
+        token,
+        tInjectables,
+        beginIndex + cptViewProvidersCount,
+        endIndex,
+      );
+      const existingViewProvidersFactoryIndex = indexOf(
+        token,
+        tInjectables,
+        beginIndex,
+        beginIndex + cptViewProvidersCount,
+      );
+      const doesProvidersFactoryExist =
+        existingProvidersFactoryIndex >= 0 && lInjectablesBlueprint[existingProvidersFactoryIndex];
+      const doesViewProvidersFactoryExist =
+        existingViewProvidersFactoryIndex >= 0 &&
+        lInjectablesBlueprint[existingViewProvidersFactoryIndex];
 
-      if (isViewProvider && !doesViewProvidersFactoryExist ||
-          !isViewProvider && !doesProvidersFactoryExist) {
+      if (
+        (isViewProvider && !doesViewProvidersFactoryExist) ||
+        (!isViewProvider && !doesProvidersFactoryExist)
+      ) {
         // Cases 1.a and 2.a
         diPublicInInjector(
-            getOrCreateNodeInjectorForNode(
-                tNode as TElementNode | TContainerNode | TElementContainerNode, lView),
-            tView, token);
+          getOrCreateNodeInjectorForNode(
+            tNode as TElementNode | TContainerNode | TElementContainerNode,
+            lView,
+          ),
+          tView,
+          token,
+        );
         const factory = multiFactory(
-            isViewProvider ? multiViewProvidersFactoryResolver : multiProvidersFactoryResolver,
-            lInjectablesBlueprint.length, isViewProvider, isComponent, providerFactory);
+          isViewProvider ? multiViewProvidersFactoryResolver : multiProvidersFactoryResolver,
+          lInjectablesBlueprint.length,
+          isViewProvider,
+          isComponent,
+          providerFactory,
+        );
         if (!isViewProvider && doesViewProvidersFactoryExist) {
           lInjectablesBlueprint[existingViewProvidersFactoryIndex].providerFactory = factory;
         }
@@ -172,15 +220,20 @@ function resolveProvider(
       } else {
         // Cases 1.b and 2.b
         const indexInFactory = multiFactoryAdd(
-            lInjectablesBlueprint!
-                [isViewProvider ? existingViewProvidersFactoryIndex :
-                                  existingProvidersFactoryIndex],
-            providerFactory, !isViewProvider && isComponent);
+          lInjectablesBlueprint![
+            isViewProvider ? existingViewProvidersFactoryIndex : existingProvidersFactoryIndex
+          ],
+          providerFactory,
+          !isViewProvider && isComponent,
+        );
         registerDestroyHooksIfSupported(
-            tView, provider,
-            existingProvidersFactoryIndex > -1 ? existingProvidersFactoryIndex :
-                                                 existingViewProvidersFactoryIndex,
-            indexInFactory);
+          tView,
+          provider,
+          existingProvidersFactoryIndex > -1
+            ? existingProvidersFactoryIndex
+            : existingViewProvidersFactoryIndex,
+          indexInFactory,
+        );
       }
       if (!isViewProvider && isComponent && doesViewProvidersFactoryExist) {
         lInjectablesBlueprint[existingViewProvidersFactoryIndex].componentProviders!++;
@@ -198,8 +251,11 @@ function resolveProvider(
  * provider factory.
  */
 function registerDestroyHooksIfSupported(
-    tView: TView, provider: Exclude<Provider, any[]>, contextIndex: number,
-    indexInFactory?: number) {
+  tView: TView,
+  provider: Exclude<Provider, any[]>,
+  contextIndex: number,
+  indexInFactory?: number,
+) {
   const providerIsTypeProvider = isTypeProvider(provider);
   const providerIsClassProvider = isClassProvider(provider);
 
@@ -212,10 +268,12 @@ function registerDestroyHooksIfSupported(
     if (ngOnDestroy) {
       const hooks = tView.destroyHooks || (tView.destroyHooks = []);
 
-      if (!providerIsTypeProvider && ((provider as ClassProvider)).multi) {
+      if (!providerIsTypeProvider && (provider as ClassProvider).multi) {
         ngDevMode &&
-            assertDefined(
-                indexInFactory, 'indexInFactory when registering multi factory destroy hook');
+          assertDefined(
+            indexInFactory,
+            'indexInFactory when registering multi factory destroy hook',
+          );
         const existingCallbacksIndex = hooks.indexOf(contextIndex);
 
         if (existingCallbacksIndex === -1) {
@@ -235,7 +293,10 @@ function registerDestroyHooksIfSupported(
  * @returns Index at which the factory was inserted.
  */
 function multiFactoryAdd(
-    multiFactory: NodeInjectorFactory, factory: () => any, isComponentProvider: boolean): number {
+  multiFactory: NodeInjectorFactory,
+  factory: () => any,
+  isComponentProvider: boolean,
+): number {
   if (isComponentProvider) {
     multiFactory.componentProviders!++;
   }
@@ -256,8 +317,12 @@ function indexOf(item: any, arr: any[], begin: number, end: number) {
  * Use this with `multi` `providers`.
  */
 function multiProvidersFactoryResolver(
-    this: NodeInjectorFactory, _: undefined, tData: TData, lData: LView,
-    tNode: TDirectiveHostNode): any[] {
+  this: NodeInjectorFactory,
+  _: undefined,
+  tData: TData,
+  lData: LView,
+  tNode: TDirectiveHostNode,
+): any[] {
   return multiResolve(this.multi!, []);
 }
 
@@ -267,14 +332,22 @@ function multiProvidersFactoryResolver(
  * This factory knows how to concatenate itself with the existing `multi` `providers`.
  */
 function multiViewProvidersFactoryResolver(
-    this: NodeInjectorFactory, _: undefined, tData: TData, lView: LView,
-    tNode: TDirectiveHostNode): any[] {
+  this: NodeInjectorFactory,
+  _: undefined,
+  tData: TData,
+  lView: LView,
+  tNode: TDirectiveHostNode,
+): any[] {
   const factories = this.multi!;
   let result: any[];
   if (this.providerFactory) {
     const componentCount = this.providerFactory.componentProviders!;
-    const multiProviders =
-        getNodeInjectable(lView, lView[TVIEW], this.providerFactory!.index!, tNode);
+    const multiProviders = getNodeInjectable(
+      lView,
+      lView[TVIEW],
+      this.providerFactory!.index!,
+      tNode,
+    );
     // Copy the section of the array which contains `multi` `providers` from the component
     result = multiProviders.slice(0, componentCount);
     // Insert the `viewProvider` instances.
@@ -306,11 +379,18 @@ function multiResolve(factories: Array<() => any>, result: any[]): any[] {
  * Creates a multi factory.
  */
 function multiFactory(
-    factoryFn: (
-        this: NodeInjectorFactory, _: undefined, tData: TData, lData: LView,
-        tNode: TDirectiveHostNode) => any,
-    index: number, isViewProvider: boolean, isComponent: boolean,
-    f: () => any): NodeInjectorFactory {
+  factoryFn: (
+    this: NodeInjectorFactory,
+    _: undefined,
+    tData: TData,
+    lData: LView,
+    tNode: TDirectiveHostNode,
+  ) => any,
+  index: number,
+  isViewProvider: boolean,
+  isComponent: boolean,
+  f: () => any,
+): NodeInjectorFactory {
   const factory = new NodeInjectorFactory(factoryFn, isViewProvider, ɵɵdirectiveInject);
   factory.multi = [];
   factory.index = index;
diff --git a/packages/core/src/render3/errors.ts b/packages/core/src/render3/errors.ts
index 8f0c5de6b7ae9..00e582f1fe434 100644
--- a/packages/core/src/render3/errors.ts
+++ b/packages/core/src/render3/errors.ts
@@ -1,4 +1,3 @@
-
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -28,11 +27,12 @@ export function assertStandaloneComponentType(type: Type<unknown>) {
   const componentDef = getComponentDef(type)!;
   if (!componentDef.standalone) {
     throw new RuntimeError(
-        RuntimeErrorCode.TYPE_IS_NOT_STANDALONE,
-        `The ${stringifyForError(type)} component is not marked as standalone, ` +
-            `but Angular expects to have a standalone component here. ` +
-            `Please make sure the ${stringifyForError(type)} component has ` +
-            `the \`standalone: true\` flag in the decorator.`);
+      RuntimeErrorCode.TYPE_IS_NOT_STANDALONE,
+      `The ${stringifyForError(type)} component is not marked as standalone, ` +
+        `but Angular expects to have a standalone component here. ` +
+        `Please make sure the ${stringifyForError(type)} component has ` +
+        `the \`standalone: true\` flag in the decorator.`,
+    );
   }
 }
 
@@ -40,37 +40,45 @@ export function assertStandaloneComponentType(type: Type<unknown>) {
 export function assertComponentDef(type: Type<unknown>) {
   if (!getComponentDef(type)) {
     throw new RuntimeError(
-        RuntimeErrorCode.MISSING_GENERATED_DEF,
-        `The ${stringifyForError(type)} is not an Angular component, ` +
-            `make sure it has the \`@Component\` decorator.`);
+      RuntimeErrorCode.MISSING_GENERATED_DEF,
+      `The ${stringifyForError(type)} is not an Angular component, ` +
+        `make sure it has the \`@Component\` decorator.`,
+    );
   }
 }
 
 /** Called when there are multiple component selectors that match a given node */
 export function throwMultipleComponentError(
-    tNode: TNode, first: Type<unknown>, second: Type<unknown>): never {
+  tNode: TNode,
+  first: Type<unknown>,
+  second: Type<unknown>,
+): never {
   throw new RuntimeError(
-      RuntimeErrorCode.MULTIPLE_COMPONENTS_MATCH,
-      `Multiple components match node with tagname ${tNode.value}: ` +
-          `${stringifyForError(first)} and ` +
-          `${stringifyForError(second)}`);
+    RuntimeErrorCode.MULTIPLE_COMPONENTS_MATCH,
+    `Multiple components match node with tagname ${tNode.value}: ` +
+      `${stringifyForError(first)} and ` +
+      `${stringifyForError(second)}`,
+  );
 }
 
 /** Throws an ExpressionChangedAfterChecked error if checkNoChanges mode is on. */
 export function throwErrorIfNoChangesMode(
-    creationMode: boolean, oldValue: any, currValue: any, propName: string|undefined,
-    lView: LView): never {
+  creationMode: boolean,
+  oldValue: any,
+  currValue: any,
+  propName: string | undefined,
+  lView: LView,
+): never {
   const hostComponentDef = getDeclarationComponentDef(lView);
   const componentClassName = hostComponentDef?.type?.name;
   const field = propName ? ` for '${propName}'` : '';
-  let msg =
-      `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value${
-          field}: '${formatValue(oldValue)}'. Current value: '${formatValue(currValue)}'.${
-          componentClassName ? ` Expression location: ${componentClassName} component` : ''}`;
+  let msg = `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value${field}: '${formatValue(oldValue)}'. Current value: '${formatValue(currValue)}'.${
+    componentClassName ? ` Expression location: ${componentClassName} component` : ''
+  }`;
   if (creationMode) {
     msg +=
-        ` It seems like the view has been created after its parent and its children have been dirty checked.` +
-        ` Has it been created in a change detection hook?`;
+      ` It seems like the view has been created after its parent and its children have been dirty checked.` +
+      ` Has it been created in a change detection hook?`;
   }
   throw new RuntimeError(RuntimeErrorCode.EXPRESSION_CHANGED_AFTER_CHECKED, msg);
 }
@@ -83,17 +91,22 @@ function formatValue(value: unknown): string {
     if (Array.isArray(value) || strValue === '[object Object]') {
       strValue = JSON.stringify(value);
     }
-  } catch (error) {
-  }
-  return strValue.length > VALUE_STRING_LENGTH_LIMIT ?
-      (strValue.substring(0, VALUE_STRING_LENGTH_LIMIT) + '…') :
-      strValue;
+  } catch (error) {}
+  return strValue.length > VALUE_STRING_LENGTH_LIMIT
+    ? strValue.substring(0, VALUE_STRING_LENGTH_LIMIT) + '…'
+    : strValue;
 }
 
 function constructDetailsForInterpolation(
-    lView: LView, rootIndex: number, expressionIndex: number, meta: string, changedValue: any) {
+  lView: LView,
+  rootIndex: number,
+  expressionIndex: number,
+  meta: string,
+  changedValue: any,
+) {
   const [propName, prefix, ...chunks] = meta.split(INTERPOLATION_DELIMITER);
-  let oldValue = prefix, newValue = prefix;
+  let oldValue = prefix,
+    newValue = prefix;
   for (let i = 0; i < chunks.length; i++) {
     const slotIdx = rootIndex + i;
     oldValue += `${lView[slotIdx]}${chunks[i]}`;
@@ -111,8 +124,11 @@ function constructDetailsForInterpolation(
  * function description.
  */
 export function getExpressionChangedErrorDetails(
-    lView: LView, bindingIndex: number, oldValue: any,
-    newValue: any): {propName?: string, oldValue: any, newValue: any} {
+  lView: LView,
+  bindingIndex: number,
+  oldValue: any,
+  newValue: any,
+): {propName?: string; oldValue: any; newValue: any} {
   const tData = lView[TVIEW].data;
   const metadata = tData[bindingIndex];
 
@@ -120,7 +136,12 @@ export function getExpressionChangedErrorDetails(
     // metadata for property interpolation
     if (metadata.indexOf(INTERPOLATION_DELIMITER) > -1) {
       return constructDetailsForInterpolation(
-          lView, bindingIndex, bindingIndex, metadata, newValue);
+        lView,
+        bindingIndex,
+        bindingIndex,
+        metadata,
+        newValue,
+      );
     }
     // metadata for property binding
     return {propName: metadata, oldValue, newValue};
@@ -140,7 +161,7 @@ export function getExpressionChangedErrorDetails(
       const matches = meta.match(new RegExp(INTERPOLATION_DELIMITER, 'g'));
       // first interpolation delimiter separates property name from interpolation parts (in case of
       // property interpolations), so we subtract one from total number of found delimiters
-      if (matches && (matches.length - 1) > bindingIndex - idx) {
+      if (matches && matches.length - 1 > bindingIndex - idx) {
         return constructDetailsForInterpolation(lView, idx, bindingIndex, meta, newValue);
       }
     }
diff --git a/packages/core/src/render3/errors_di.ts b/packages/core/src/render3/errors_di.ts
index 7bf41b3e3595e..eef67df6ea9e7 100644
--- a/packages/core/src/render3/errors_di.ts
+++ b/packages/core/src/render3/errors_di.ts
@@ -14,13 +14,13 @@ import {stringify} from '../util/stringify';
 
 import {stringifyForError} from './util/stringify_utils';
 
-
 /** Called when directives inject each other (creating a circular dependency) */
 export function throwCyclicDependencyError(token: string, path?: string[]): never {
   const depPath = path ? `. Dependency path: ${path.join(' > ')} > ${token}` : '';
   throw new RuntimeError(
-      RuntimeErrorCode.CYCLIC_DI_DEPENDENCY,
-      ngDevMode ? `Circular dependency in DI detected for ${token}${depPath}` : token);
+    RuntimeErrorCode.CYCLIC_DI_DEPENDENCY,
+    ngDevMode ? `Circular dependency in DI detected for ${token}${depPath}` : token,
+  );
 }
 
 export function throwMixedMultiProviderError() {
@@ -28,33 +28,41 @@ export function throwMixedMultiProviderError() {
 }
 
 export function throwInvalidProviderError(
-    ngModuleType?: Type<unknown>, providers?: any[], provider?: any): never {
+  ngModuleType?: Type<unknown>,
+  providers?: any[],
+  provider?: any,
+): never {
   if (ngModuleType && providers) {
-    const providerDetail = providers.map(v => v == provider ? '?' + provider + '?' : '...');
-    throw new Error(`Invalid provider for the NgModule '${
-        stringify(ngModuleType)}' - only instances of Provider and Type are allowed, got: [${
-        providerDetail.join(', ')}]`);
+    const providerDetail = providers.map((v) => (v == provider ? '?' + provider + '?' : '...'));
+    throw new Error(
+      `Invalid provider for the NgModule '${stringify(
+        ngModuleType,
+      )}' - only instances of Provider and Type are allowed, got: [${providerDetail.join(', ')}]`,
+    );
   } else if (isEnvironmentProviders(provider)) {
     if (provider.ɵfromNgModule) {
       throw new RuntimeError(
-          RuntimeErrorCode.PROVIDER_IN_WRONG_CONTEXT,
-          `Invalid providers from 'importProvidersFrom' present in a non-environment injector. 'importProvidersFrom' can't be used for component providers.`);
+        RuntimeErrorCode.PROVIDER_IN_WRONG_CONTEXT,
+        `Invalid providers from 'importProvidersFrom' present in a non-environment injector. 'importProvidersFrom' can't be used for component providers.`,
+      );
     } else {
       throw new RuntimeError(
-          RuntimeErrorCode.PROVIDER_IN_WRONG_CONTEXT,
-          `Invalid providers present in a non-environment injector. 'EnvironmentProviders' can't be used for component providers.`);
+        RuntimeErrorCode.PROVIDER_IN_WRONG_CONTEXT,
+        `Invalid providers present in a non-environment injector. 'EnvironmentProviders' can't be used for component providers.`,
+      );
     }
   } else {
     throw new Error('Invalid provider');
   }
 }
 
-
 /** Throws an error when a token is not found in DI. */
 export function throwProviderNotFoundError(
-    token: ProviderToken<unknown>, injectorName?: string): never {
-  const errorMessage = ngDevMode &&
-      `No provider for ${stringifyForError(token)} found${
-                           injectorName ? ` in ${injectorName}` : ''}`;
+  token: ProviderToken<unknown>,
+  injectorName?: string,
+): never {
+  const errorMessage =
+    ngDevMode &&
+    `No provider for ${stringifyForError(token)} found${injectorName ? ` in ${injectorName}` : ''}`;
   throw new RuntimeError(RuntimeErrorCode.PROVIDER_NOT_FOUND, errorMessage);
 }
diff --git a/packages/core/src/render3/features/copy_definition_feature.ts b/packages/core/src/render3/features/copy_definition_feature.ts
index f3b862c4a66bb..5897ab25e0fd7 100644
--- a/packages/core/src/render3/features/copy_definition_feature.ts
+++ b/packages/core/src/render3/features/copy_definition_feature.ts
@@ -64,10 +64,10 @@ const COPY_COMPONENT_FIELDS: Exclude<keyof ComponentDef<unknown>, keyof Directiv
  *
  * @codeGenApi
  */
-export function ɵɵCopyDefinitionFeature(definition: DirectiveDef<any>|ComponentDef<any>): void {
+export function ɵɵCopyDefinitionFeature(definition: DirectiveDef<any> | ComponentDef<any>): void {
   let superType = getSuperType(definition.type)!;
 
-  let superDef: DirectiveDef<any>|ComponentDef<any>|undefined = undefined;
+  let superDef: DirectiveDef<any> | ComponentDef<any> | undefined = undefined;
   if (isComponentDef(definition)) {
     // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
     superDef = superType.ɵcmp!;
@@ -77,7 +77,7 @@ export function ɵɵCopyDefinitionFeature(definition: DirectiveDef<any>|Componen
   }
 
   // Needed because `definition` fields are readonly.
-  const defAny = (definition as any);
+  const defAny = definition as any;
 
   // Copy over any fields that apply to either directives or components.
   for (const field of COPY_DIRECTIVE_FIELDS) {
diff --git a/packages/core/src/render3/features/host_directives_feature.ts b/packages/core/src/render3/features/host_directives_feature.ts
index 6d232cacfa6ea..2e7cce55c182f 100644
--- a/packages/core/src/render3/features/host_directives_feature.ts
+++ b/packages/core/src/render3/features/host_directives_feature.ts
@@ -11,14 +11,22 @@ import {Type} from '../../interface/type';
 import {assertEqual} from '../../util/assert';
 import {EMPTY_OBJ} from '../../util/empty';
 import {getComponentDef, getDirectiveDef} from '../definition';
-import {DirectiveDef, DirectiveDefFeature, HostDirectiveBindingMap, HostDirectiveDef, HostDirectiveDefs} from '../interfaces/definition';
+import {
+  DirectiveDef,
+  DirectiveDefFeature,
+  HostDirectiveBindingMap,
+  HostDirectiveDef,
+  HostDirectiveDefs,
+} from '../interfaces/definition';
 
 /** Values that can be used to define a host directive through the `HostDirectivesFeature`. */
-type HostDirectiveConfig = Type<unknown>|{
-  directive: Type<unknown>;
-  inputs?: string[];
-  outputs?: string[];
-};
+type HostDirectiveConfig =
+  | Type<unknown>
+  | {
+      directive: Type<unknown>;
+      inputs?: string[];
+      outputs?: string[];
+    };
 
 /**
  * This feature adds the host directives behavior to a directive definition by patching a
@@ -40,19 +48,21 @@ type HostDirectiveConfig = Type<unknown>|{
  *
  * @codeGenApi
  */
-export function ɵɵHostDirectivesFeature(rawHostDirectives: HostDirectiveConfig[]|
-                                        (() => HostDirectiveConfig[])) {
+export function ɵɵHostDirectivesFeature(
+  rawHostDirectives: HostDirectiveConfig[] | (() => HostDirectiveConfig[]),
+) {
   const feature: DirectiveDefFeature = (definition: DirectiveDef<unknown>) => {
-    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)
-              };
-        });
+    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;
@@ -65,8 +75,10 @@ export function ɵɵHostDirectivesFeature(rawHostDirectives: HostDirectiveConfig
 }
 
 function findHostDirectiveDefs(
-    currentDef: DirectiveDef<unknown>, matchedDefs: DirectiveDef<unknown>[],
-    hostDirectiveDefs: HostDirectiveDefs): void {
+  currentDef: DirectiveDef<unknown>,
+  matchedDefs: DirectiveDef<unknown>[],
+  hostDirectiveDefs: HostDirectiveDefs,
+): void {
   if (currentDef.hostDirectives !== null) {
     for (const hostDirectiveConfig of currentDef.hostDirectives) {
       const hostDirectiveDef = getDirectiveDef(hostDirectiveConfig.directive)!;
@@ -91,7 +103,7 @@ function findHostDirectiveDefs(
  * Converts an array in the form of `['publicName', 'alias', 'otherPublicName', 'otherAlias']` into
  * a map in the form of `{publicName: 'alias', otherPublicName: 'otherAlias'}`.
  */
-function bindingArrayToMap(bindings: string[]|undefined): HostDirectiveBindingMap {
+function bindingArrayToMap(bindings: string[] | undefined): HostDirectiveBindingMap {
   if (bindings === undefined || bindings.length === 0) {
     return EMPTY_OBJ;
   }
@@ -125,7 +137,9 @@ function bindingArrayToMap(bindings: string[]|undefined): HostDirectiveBindingMa
  * `SimpleChanges` object which won't be reached if an input doesn't exist.
  */
 function patchDeclaredInputs(
-    declaredInputs: Record<string, string>, exposedInputs: HostDirectiveBindingMap): void {
+  declaredInputs: Record<string, string>,
+  exposedInputs: HostDirectiveBindingMap,
+): void {
   for (const publicName in exposedInputs) {
     if (exposedInputs.hasOwnProperty(publicName)) {
       const remappedPublicName = exposedInputs[publicName];
@@ -135,11 +149,15 @@ function patchDeclaredInputs(
       // 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)) {
+      if (
+        (typeof ngDevMode === 'undefined' || ngDevMode) &&
+        declaredInputs.hasOwnProperty(remappedPublicName)
+      ) {
         assertEqual(
-            declaredInputs[remappedPublicName], declaredInputs[publicName],
-            `Conflicting host directive input alias ${publicName}.`);
+          declaredInputs[remappedPublicName],
+          declaredInputs[publicName],
+          `Conflicting host directive input alias ${publicName}.`,
+        );
       }
 
       declaredInputs[remappedPublicName] = privateName;
@@ -153,27 +171,31 @@ function patchDeclaredInputs(
  * @param directiveDef Directive definition of the host directive.
  */
 function validateHostDirective(
-    hostDirectiveConfig: HostDirectiveDef<unknown>,
-    directiveDef: DirectiveDef<any>|null): asserts directiveDef is DirectiveDef<unknown> {
+  hostDirectiveConfig: HostDirectiveDef<unknown>,
+  directiveDef: DirectiveDef<any> | null,
+): asserts directiveDef is DirectiveDef<unknown> {
   const type = hostDirectiveConfig.directive;
 
   if (directiveDef === null) {
     if (getComponentDef(type) !== null) {
       throw new RuntimeError(
-          RuntimeErrorCode.HOST_DIRECTIVE_COMPONENT,
-          `Host directive ${type.name} cannot be a component.`);
+        RuntimeErrorCode.HOST_DIRECTIVE_COMPONENT,
+        `Host directive ${type.name} cannot be a component.`,
+      );
     }
 
     throw new RuntimeError(
-        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.`);
+      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(
-        RuntimeErrorCode.HOST_DIRECTIVE_NOT_STANDALONE,
-        `Host directive ${directiveDef.type.name} must be standalone.`);
+      RuntimeErrorCode.HOST_DIRECTIVE_NOT_STANDALONE,
+      `Host directive ${directiveDef.type.name} must be standalone.`,
+    );
   }
 
   validateMappings('input', directiveDef, hostDirectiveConfig.inputs);
@@ -187,8 +209,10 @@ function validateHostDirective(
  * @param hostDirectiveBindings Host directive mapping object that shold be validated.
  */
 function validateMappings<T>(
-    bindingType: 'input'|'output', def: DirectiveDef<T>,
-    hostDirectiveBindings: HostDirectiveBindingMap) {
+  bindingType: 'input' | 'output',
+  def: DirectiveDef<T>,
+  hostDirectiveBindings: HostDirectiveBindingMap,
+) {
   const className = def.type.name;
   const bindings = bindingType === 'input' ? def.inputs : def.outputs;
 
@@ -196,19 +220,18 @@ function validateMappings<T>(
     if (hostDirectiveBindings.hasOwnProperty(publicName)) {
       if (!bindings.hasOwnProperty(publicName)) {
         throw new RuntimeError(
-            RuntimeErrorCode.HOST_DIRECTIVE_UNDEFINED_BINDING,
-            `Directive ${className} does not have an ${bindingType} with a public name of ${
-                publicName}.`);
+          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(
-            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.`);
+          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.`,
+        );
       }
     }
   }
diff --git a/packages/core/src/render3/features/inherit_definition_feature.ts b/packages/core/src/render3/features/inherit_definition_feature.ts
index 9e281af033eb3..e250c27739224 100644
--- a/packages/core/src/render3/features/inherit_definition_feature.ts
+++ b/packages/core/src/render3/features/inherit_definition_feature.ts
@@ -10,18 +10,27 @@ import {RuntimeError, RuntimeErrorCode} from '../../errors';
 import {Type, Writable} from '../../interface/type';
 import {EMPTY_ARRAY, EMPTY_OBJ} from '../../util/empty';
 import {fillProperties} from '../../util/property';
-import {ComponentDef, ContentQueriesFunction, DirectiveDef, DirectiveDefFeature, HostBindingsFunction, RenderFlags, ViewQueriesFunction} from '../interfaces/definition';
+import {
+  ComponentDef,
+  ContentQueriesFunction,
+  DirectiveDef,
+  DirectiveDefFeature,
+  HostBindingsFunction,
+  RenderFlags,
+  ViewQueriesFunction,
+} from '../interfaces/definition';
 import {TAttributes} from '../interfaces/node';
 import {isComponentDef} from '../interfaces/type_checks';
 import {mergeHostAttrs} from '../util/attrs_utils';
 import {stringifyForError} from '../util/stringify_utils';
 
-export function getSuperType(type: Type<any>): Type<any>&
-    {ɵcmp?: ComponentDef<any>, ɵdir?: DirectiveDef<any>} {
+export function getSuperType(
+  type: Type<any>,
+): Type<any> & {ɵcmp?: ComponentDef<any>; ɵdir?: DirectiveDef<any>} {
   return Object.getPrototypeOf(type.prototype).constructor;
 }
 
-type WritableDef = Writable<DirectiveDef<any>|ComponentDef<any>>;
+type WritableDef = Writable<DirectiveDef<any> | ComponentDef<any>>;
 
 /**
  * Merges the definition from a super class to a sub class.
@@ -29,24 +38,27 @@ type WritableDef = Writable<DirectiveDef<any>|ComponentDef<any>>;
  *
  * @codeGenApi
  */
-export function ɵɵInheritDefinitionFeature(definition: DirectiveDef<any>|ComponentDef<any>): void {
+export function ɵɵInheritDefinitionFeature(
+  definition: DirectiveDef<any> | ComponentDef<any>,
+): void {
   let superType = getSuperType(definition.type);
   let shouldInheritFields = true;
   const inheritanceChain: WritableDef[] = [definition];
 
   while (superType) {
-    let superDef: DirectiveDef<any>|ComponentDef<any>|undefined = undefined;
+    let superDef: DirectiveDef<any> | ComponentDef<any> | undefined = 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(
-            RuntimeErrorCode.INVALID_INHERITANCE,
-            ngDevMode &&
-                `Directives cannot inherit Components. Directive ${
-                    stringifyForError(definition.type)} is attempting to extend component ${
-                    stringifyForError(superType)}`);
+          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;
@@ -155,15 +167,17 @@ function mergeInputsWithTransforms<T>(target: WritableDef, source: DirectiveDef<
  */
 function mergeHostAttrsAcrossInheritance(inheritanceChain: WritableDef[]) {
   let hostVars: number = 0;
-  let hostAttrs: TAttributes|null = null;
+  let hostAttrs: TAttributes | null = 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);
+    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));
+    def.hostAttrs = mergeHostAttrs(
+      def.hostAttrs,
+      (hostAttrs = mergeHostAttrs(hostAttrs, def.hostAttrs)),
+    );
   }
 }
 
@@ -192,7 +206,9 @@ function inheritViewQuery(definition: WritableDef, superViewQuery: ViewQueriesFu
 }
 
 function inheritContentQueries(
-    definition: WritableDef, superContentQueries: ContentQueriesFunction<any>) {
+  definition: WritableDef,
+  superContentQueries: ContentQueriesFunction<any>,
+) {
   const prevContentQueries = definition.contentQueries;
   if (prevContentQueries) {
     definition.contentQueries = (rf, ctx, directiveIndex) => {
@@ -205,7 +221,9 @@ function inheritContentQueries(
 }
 
 function inheritHostBindings(
-    definition: WritableDef, superHostBindings: HostBindingsFunction<any>) {
+  definition: WritableDef,
+  superHostBindings: HostBindingsFunction<any>,
+) {
   const prevHostBindings = definition.hostBindings;
   if (prevHostBindings) {
     definition.hostBindings = (rf: RenderFlags, ctx: any) => {
diff --git a/packages/core/src/render3/features/ng_onchanges_feature.ts b/packages/core/src/render3/features/ng_onchanges_feature.ts
index 962a2a882f443..0cb790916ab85 100644
--- a/packages/core/src/render3/features/ng_onchanges_feature.ts
+++ b/packages/core/src/render3/features/ng_onchanges_feature.ts
@@ -83,31 +83,39 @@ function rememberChangeHistoryAndInvokeOnChangesHook(this: OnChanges) {
   }
 }
 
-
 function ngOnChangesSetInput<T>(
-    this: DirectiveDef<T>, instance: T, inputSignalNode: null|InputSignalNode<unknown, unknown>,
-    value: unknown, publicName: string, privateName: string): void {
+  this: DirectiveDef<T>,
+  instance: T,
+  inputSignalNode: null | InputSignalNode<unknown, unknown>,
+  value: unknown,
+  publicName: string,
+  privateName: string,
+): void {
   const declaredName = (this.declaredInputs as {[key: string]: string})[publicName];
   ngDevMode && assertString(declaredName, 'Name of input in ngOnChanges has to be a string');
-  const simpleChangesStore = getSimpleChangesStore(instance) ||
-      setSimpleChangesStore(instance, {previous: EMPTY_OBJ, current: null});
+  const simpleChangesStore =
+    getSimpleChangesStore(instance) ||
+    setSimpleChangesStore(instance, {previous: EMPTY_OBJ, current: null});
   const current = simpleChangesStore.current || (simpleChangesStore.current = {});
   const previous = simpleChangesStore.previous;
   const previousChange = previous[declaredName];
   current[declaredName] = new SimpleChange(
-      previousChange && previousChange.currentValue, value, previous === EMPTY_OBJ);
+    previousChange && previousChange.currentValue,
+    value,
+    previous === EMPTY_OBJ,
+  );
 
   applyValueToInputField(instance, inputSignalNode, privateName, value);
 }
 
 const SIMPLE_CHANGES_STORE = '__ngSimpleChanges__';
 
-function getSimpleChangesStore(instance: any): null|NgSimpleChangesStore {
+function getSimpleChangesStore(instance: any): null | NgSimpleChangesStore {
   return instance[SIMPLE_CHANGES_STORE] || null;
 }
 
 function setSimpleChangesStore(instance: any, store: NgSimpleChangesStore): NgSimpleChangesStore {
-  return instance[SIMPLE_CHANGES_STORE] = store;
+  return (instance[SIMPLE_CHANGES_STORE] = store);
 }
 
 /**
@@ -116,5 +124,5 @@ function setSimpleChangesStore(instance: any, store: NgSimpleChangesStore): NgSi
  */
 interface NgSimpleChangesStore {
   previous: SimpleChanges;
-  current: SimpleChanges|null;
+  current: SimpleChanges | null;
 }
diff --git a/packages/core/src/render3/features/providers_feature.ts b/packages/core/src/render3/features/providers_feature.ts
index 3c75066753898..0823c8b62e9cc 100644
--- a/packages/core/src/render3/features/providers_feature.ts
+++ b/packages/core/src/render3/features/providers_feature.ts
@@ -43,12 +43,15 @@ import {DirectiveDef} from '../interfaces/definition';
  */
 export function ɵɵProvidersFeature<T>(providers: Provider[], viewProviders: Provider[] = []) {
   return (definition: DirectiveDef<T>) => {
-    definition.providersResolver =
-        (def: DirectiveDef<T>, processProvidersFn?: ProcessProvidersFunction) => {
-          return providersResolver(
-              def,                                                             //
-              processProvidersFn ? processProvidersFn(providers) : providers,  //
-              viewProviders);
-        };
+    definition.providersResolver = (
+      def: DirectiveDef<T>,
+      processProvidersFn?: ProcessProvidersFunction,
+    ) => {
+      return providersResolver(
+        def, //
+        processProvidersFn ? processProvidersFn(providers) : providers, //
+        viewProviders,
+      );
+    };
   };
 }
diff --git a/packages/core/src/render3/features/standalone_feature.ts b/packages/core/src/render3/features/standalone_feature.ts
index 1c2d813cdd274..ec816f271bbb7 100644
--- a/packages/core/src/render3/features/standalone_feature.ts
+++ b/packages/core/src/render3/features/standalone_feature.ts
@@ -20,21 +20,25 @@ import {createEnvironmentInjector} from '../ng_module_ref';
  * collected from the imports graph rooted at a given standalone component.
  */
 class StandaloneService implements OnDestroy {
-  cachedInjectors = new Map<ComponentDef<unknown>, EnvironmentInjector|null>();
+  cachedInjectors = new Map<ComponentDef<unknown>, EnvironmentInjector | null>();
 
   constructor(private _injector: EnvironmentInjector) {}
 
-  getOrCreateStandaloneInjector(componentDef: ComponentDef<unknown>): EnvironmentInjector|null {
+  getOrCreateStandaloneInjector(componentDef: ComponentDef<unknown>): EnvironmentInjector | null {
     if (!componentDef.standalone) {
       return null;
     }
 
     if (!this.cachedInjectors.has(componentDef)) {
       const providers = internalImportProvidersFrom(false, componentDef.type);
-      const standaloneInjector = providers.length > 0 ?
-          createEnvironmentInjector(
-              [providers], this._injector, `Standalone[${componentDef.type.name}]`) :
-          null;
+      const standaloneInjector =
+        providers.length > 0
+          ? createEnvironmentInjector(
+              [providers],
+              this._injector,
+              `Standalone[${componentDef.type.name}]`,
+            )
+          : null;
       this.cachedInjectors.set(componentDef, standaloneInjector);
     }
 
@@ -61,7 +65,6 @@ class StandaloneService implements OnDestroy {
   });
 }
 
-
 /**
  * A feature that acts as a setup code for the {@link StandaloneService}.
  *
diff --git a/packages/core/src/render3/global_utils_api.ts b/packages/core/src/render3/global_utils_api.ts
index b74bedf4afc4c..cc3be1f596ae0 100644
--- a/packages/core/src/render3/global_utils_api.ts
+++ b/packages/core/src/render3/global_utils_api.ts
@@ -16,4 +16,17 @@
  */
 
 export {applyChanges} from './util/change_detection_utils';
-export {ComponentDebugMetadata, DirectiveDebugMetadata, getComponent, getContext, getDirectiveMetadata, getDirectives, getHostElement, getInjector, getListeners, getOwningComponent, getRootComponents, Listener} from './util/discovery_utils';
+export {
+  ComponentDebugMetadata,
+  DirectiveDebugMetadata,
+  getComponent,
+  getContext,
+  getDirectiveMetadata,
+  getDirectives,
+  getHostElement,
+  getInjector,
+  getListeners,
+  getOwningComponent,
+  getRootComponents,
+  Listener,
+} from './util/discovery_utils';
diff --git a/packages/core/src/render3/hooks.ts b/packages/core/src/render3/hooks.ts
index adaf25757ab47..6c5b03bde5037 100644
--- a/packages/core/src/render3/hooks.ts
+++ b/packages/core/src/render3/hooks.ts
@@ -8,19 +8,35 @@
 
 import {setActiveConsumer} from '@angular/core/primitives/signals';
 
-import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, DoCheck, OnChanges, OnDestroy, OnInit} from '../interface/lifecycle_hooks';
+import {
+  AfterContentChecked,
+  AfterContentInit,
+  AfterViewChecked,
+  AfterViewInit,
+  DoCheck,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+} from '../interface/lifecycle_hooks';
 import {assertDefined, assertEqual, assertNotEqual} from '../util/assert';
 
 import {assertFirstCreatePass} from './assert';
 import {NgOnChangesFeatureImpl} from './features/ng_onchanges_feature';
 import {DirectiveDef} from './interfaces/definition';
 import {TNode} from './interfaces/node';
-import {FLAGS, HookData, InitPhaseState, LView, LViewFlags, PREORDER_HOOK_FLAGS, PreOrderHookFlags, TView} from './interfaces/view';
+import {
+  FLAGS,
+  HookData,
+  InitPhaseState,
+  LView,
+  LViewFlags,
+  PREORDER_HOOK_FLAGS,
+  PreOrderHookFlags,
+  TView,
+} from './interfaces/view';
 import {profiler, ProfilerEvent} from './profiler';
 import {isInCheckNoChangesMode} from './state';
 
-
-
 /**
  * Adds all directive lifecycle hooks from the given `DirectiveDef` to the given `TView`.
  *
@@ -34,10 +50,14 @@ import {isInCheckNoChangesMode} from './state';
  * @param tView The current TView
  */
 export function registerPreOrderHooks(
-    directiveIndex: number, directiveDef: DirectiveDef<any>, tView: TView): void {
+  directiveIndex: number,
+  directiveDef: DirectiveDef<any>,
+  tView: TView,
+): void {
   ngDevMode && assertFirstCreatePass(tView);
-  const {ngOnChanges, ngOnInit, ngDoCheck} =
-      directiveDef.type.prototype as OnChanges & OnInit & DoCheck;
+  const {ngOnChanges, ngOnInit, ngDoCheck} = directiveDef.type.prototype as OnChanges &
+    OnInit &
+    DoCheck;
 
   if (ngOnChanges as Function | undefined) {
     const wrappedOnChanges = NgOnChangesFeatureImpl(directiveDef);
@@ -81,14 +101,17 @@ export function registerPostOrderHooks(tView: TView, tNode: TNode): void {
   for (let i = tNode.directiveStart, end = tNode.directiveEnd; i < end; i++) {
     const directiveDef = tView.data[i] as DirectiveDef<any>;
     ngDevMode && assertDefined(directiveDef, 'Expecting DirectiveDef');
-    const lifecycleHooks: AfterContentInit&AfterContentChecked&AfterViewInit&AfterViewChecked&
-        OnDestroy = directiveDef.type.prototype;
+    const lifecycleHooks: AfterContentInit &
+      AfterContentChecked &
+      AfterViewInit &
+      AfterViewChecked &
+      OnDestroy = directiveDef.type.prototype;
     const {
       ngAfterContentInit,
       ngAfterContentChecked,
       ngAfterViewInit,
       ngAfterViewChecked,
-      ngOnDestroy
+      ngOnDestroy,
     } = lifecycleHooks;
 
     if (ngAfterContentInit) {
@@ -135,7 +158,6 @@ export function registerPostOrderHooks(tView: TView, tNode: TNode): void {
  * They are stored as flags in LView[PREORDER_HOOK_FLAGS].
  */
 
-
 /**
  * Executes pre-order check hooks ( OnChanges, DoChanges) given a view where all the init hooks were
  * executed once. This is a light version of executeInitAndCheckPreOrderHooks where we can skip read
@@ -149,7 +171,7 @@ export function registerPostOrderHooks(tView: TView, tNode: TNode): void {
  * - number: execute hooks only from the saved index until that node index exclusive (pre-order
  * case, when executing select(number))
  */
-export function executeCheckHooks(lView: LView, hooks: HookData, nodeIndex?: number|null) {
+export function executeCheckHooks(lView: LView, hooks: HookData, nodeIndex?: number | null) {
   callHooks(lView, hooks, InitPhaseState.InitPhaseCompleted, nodeIndex);
 }
 
@@ -167,11 +189,17 @@ export function executeCheckHooks(lView: LView, hooks: HookData, nodeIndex?: num
  * case, when executing select(number))
  */
 export function executeInitAndCheckHooks(
-    lView: LView, hooks: HookData, initPhase: InitPhaseState, nodeIndex?: number|null) {
+  lView: LView,
+  hooks: HookData,
+  initPhase: InitPhaseState,
+  nodeIndex?: number | null,
+) {
   ngDevMode &&
-      assertNotEqual(
-          initPhase, InitPhaseState.InitPhaseCompleted,
-          'Init pre-order hooks should not be called more than once');
+    assertNotEqual(
+      initPhase,
+      InitPhaseState.InitPhaseCompleted,
+      'Init pre-order hooks should not be called more than once',
+    );
   if ((lView[FLAGS] & LViewFlags.InitPhaseStateMask) === initPhase) {
     callHooks(lView, hooks, initPhase, nodeIndex);
   }
@@ -179,9 +207,11 @@ export function executeInitAndCheckHooks(
 
 export function incrementInitPhaseFlags(lView: LView, initPhase: InitPhaseState): void {
   ngDevMode &&
-      assertNotEqual(
-          initPhase, InitPhaseState.InitPhaseCompleted,
-          'Init hooks phase should not be incremented after all init hooks have been run.');
+    assertNotEqual(
+      initPhase,
+      InitPhaseState.InitPhaseCompleted,
+      'Init hooks phase should not be incremented after all init hooks have been run.',
+    );
   let flags = lView[FLAGS];
   if ((flags & LViewFlags.InitPhaseStateMask) === initPhase) {
     flags &= LViewFlags.IndexWithinInitPhaseReset;
@@ -205,17 +235,23 @@ export function incrementInitPhaseFlags(lView: LView, initPhase: InitPhaseState)
  * case, when executing select(number))
  */
 function callHooks(
-    currentView: LView, arr: HookData, initPhase: InitPhaseState,
-    currentNodeIndex: number|null|undefined): void {
+  currentView: LView,
+  arr: HookData,
+  initPhase: InitPhaseState,
+  currentNodeIndex: number | null | undefined,
+): void {
   ngDevMode &&
-      assertEqual(
-          isInCheckNoChangesMode(), false,
-          'Hooks should never be run when in check no changes mode.');
-  const startIndex = currentNodeIndex !== undefined ?
-      (currentView[PREORDER_HOOK_FLAGS] & PreOrderHookFlags.IndexOfTheNextPreOrderHookMaskMask) :
-      0;
+    assertEqual(
+      isInCheckNoChangesMode(),
+      false,
+      'Hooks should never be run when in check no changes mode.',
+    );
+  const startIndex =
+    currentNodeIndex !== undefined
+      ? currentView[PREORDER_HOOK_FLAGS] & PreOrderHookFlags.IndexOfTheNextPreOrderHookMaskMask
+      : 0;
   const nodeIndexLimit = currentNodeIndex != null ? currentNodeIndex : -1;
-  const max = arr.length - 1;  // Stop the loop at length - 1, because we look for the hook at i + 1
+  const max = arr.length - 1; // Stop the loop at length - 1, because we look for the hook at i + 1
   let lastNodeIndexFound = 0;
   for (let i = startIndex; i < max; i++) {
     const hook = arr[i + 1] as number | (() => void);
@@ -232,8 +268,9 @@ function callHooks(
       if (lastNodeIndexFound < nodeIndexLimit || nodeIndexLimit == -1) {
         callHook(currentView, initPhase, arr, i);
         currentView[PREORDER_HOOK_FLAGS] =
-            (currentView[PREORDER_HOOK_FLAGS] & PreOrderHookFlags.NumberOfInitHooksCalledMask) + i +
-            2;
+          (currentView[PREORDER_HOOK_FLAGS] & PreOrderHookFlags.NumberOfInitHooksCalledMask) +
+          i +
+          2;
       }
       i++;
     }
@@ -267,14 +304,16 @@ function callHookInternal(directive: any, hook: () => void) {
 function callHook(currentView: LView, initPhase: InitPhaseState, arr: HookData, i: number) {
   const isInitHook = (arr[i] as number) < 0;
   const hook = arr[i + 1] as () => void;
-  const directiveIndex = isInitHook ? -arr[i] : arr[i] as number;
+  const directiveIndex = isInitHook ? -arr[i] : (arr[i] as number);
   const directive = currentView[directiveIndex];
   if (isInitHook) {
     const indexWithintInitPhase = currentView[FLAGS] >> LViewFlags.IndexWithinInitPhaseShift;
     // The init phase state must be always checked here as it may have been recursively updated.
-    if (indexWithintInitPhase <
-            (currentView[PREORDER_HOOK_FLAGS] >> PreOrderHookFlags.NumberOfInitHooksCalledShift) &&
-        (currentView[FLAGS] & LViewFlags.InitPhaseStateMask) === initPhase) {
+    if (
+      indexWithintInitPhase <
+        currentView[PREORDER_HOOK_FLAGS] >> PreOrderHookFlags.NumberOfInitHooksCalledShift &&
+      (currentView[FLAGS] & LViewFlags.InitPhaseStateMask) === initPhase
+    ) {
       currentView[FLAGS] += LViewFlags.IndexWithinInitPhaseIncrementer;
       callHookInternal(directive, hook);
     }
diff --git a/packages/core/src/render3/i18n/i18n_apply.ts b/packages/core/src/render3/i18n/i18n_apply.ts
index 29db12430e7c9..ce6098c62f432 100644
--- a/packages/core/src/render3/i18n/i18n_apply.ts
+++ b/packages/core/src/render3/i18n/i18n_apply.ts
@@ -11,24 +11,59 @@ import {claimDehydratedIcuCase, isI18nHydrationSupportEnabled} from '../../hydra
 import {locateI18nRNodeByIndex} from '../../hydration/node_lookup_utils';
 import {isDisconnectedNode, markRNodeAsClaimedByHydration} from '../../hydration/utils';
 import {getPluralCase} from '../../i18n/localization';
-import {assertDefined, assertDomNode, assertEqual, assertGreaterThan, assertIndexInRange, throwError} from '../../util/assert';
+import {
+  assertDefined,
+  assertDomNode,
+  assertEqual,
+  assertGreaterThan,
+  assertIndexInRange,
+  throwError,
+} from '../../util/assert';
 import {assertIndexInExpandoRange, assertTIcu} from '../assert';
 import {attachPatchData} from '../context_discovery';
 import {elementPropertyInternal, setElementAttribute} from '../instructions/shared';
-import {ELEMENT_MARKER, I18nCreateOpCode, I18nCreateOpCodes, I18nUpdateOpCode, I18nUpdateOpCodes, ICU_MARKER, IcuCreateOpCode, IcuCreateOpCodes, IcuType, TI18n, TIcu} from '../interfaces/i18n';
+import {
+  ELEMENT_MARKER,
+  I18nCreateOpCode,
+  I18nCreateOpCodes,
+  I18nUpdateOpCode,
+  I18nUpdateOpCodes,
+  ICU_MARKER,
+  IcuCreateOpCode,
+  IcuCreateOpCodes,
+  IcuType,
+  TI18n,
+  TIcu,
+} from '../interfaces/i18n';
 import {TNode} from '../interfaces/node';
 import {RElement, RNode, RText} from '../interfaces/renderer_dom';
 import {SanitizerFn} from '../interfaces/sanitization';
 import {HEADER_OFFSET, HYDRATION, LView, RENDERER, TView} from '../interfaces/view';
-import {createCommentNode, createElementNode, createTextNode, nativeInsertBefore, nativeParentNode, nativeRemoveNode, updateTextNode} from '../node_manipulation';
-import {getBindingIndex, isInSkipHydrationBlock, lastNodeWasCreated, wasLastNodeCreated} from '../state';
+import {
+  createCommentNode,
+  createElementNode,
+  createTextNode,
+  nativeInsertBefore,
+  nativeParentNode,
+  nativeRemoveNode,
+  updateTextNode,
+} from '../node_manipulation';
+import {
+  getBindingIndex,
+  isInSkipHydrationBlock,
+  lastNodeWasCreated,
+  wasLastNodeCreated,
+} from '../state';
 import {renderStringify} from '../util/stringify_utils';
 import {getNativeByIndex, unwrapRNode} from '../util/view_utils';
 
 import {getLocaleId} from './i18n_locale_id';
-import {getCurrentICUCaseIndex, getParentFromIcuCreateOpCode, getRefFromIcuCreateOpCode, getTIcu} from './i18n_util';
-
-
+import {
+  getCurrentICUCaseIndex,
+  getParentFromIcuCreateOpCode,
+  getRefFromIcuCreateOpCode,
+  getTIcu,
+} from './i18n_util';
 
 /**
  * Keep track of which input bindings in `ɵɵi18nExp` have changed.
@@ -71,8 +106,9 @@ export function applyI18n(tView: TView, lView: LView, index: number) {
     ngDevMode && assertDefined(tView, `tView should be defined`);
     const tI18n = tView.data[index] as TI18n | I18nUpdateOpCodes;
     // When `index` points to an `ɵɵi18nAttributes` then we have an array otherwise `TI18n`
-    const updateOpCodes: I18nUpdateOpCodes =
-        Array.isArray(tI18n) ? tI18n as I18nUpdateOpCodes : (tI18n as TI18n).update;
+    const updateOpCodes: I18nUpdateOpCodes = Array.isArray(tI18n)
+      ? (tI18n as I18nUpdateOpCodes)
+      : (tI18n as TI18n).update;
     const bindingsStartIndex = getBindingIndex() - changeMaskCounter - 1;
     applyUpdateOpCodes(tView, lView, updateOpCodes, bindingsStartIndex, changeMask);
   }
@@ -82,8 +118,10 @@ export function applyI18n(tView: TView, lView: LView, index: number) {
 }
 
 function createNodeWithoutHydration(
-    lView: LView, textOrName: string,
-    nodeType: typeof Node.COMMENT_NODE|typeof Node.TEXT_NODE|typeof Node.ELEMENT_NODE) {
+  lView: LView,
+  textOrName: string,
+  nodeType: typeof Node.COMMENT_NODE | typeof Node.TEXT_NODE | typeof Node.ELEMENT_NODE,
+) {
   const renderer = lView[RENDERER];
 
   switch (nodeType) {
@@ -104,12 +142,18 @@ let _locateOrCreateNode: typeof locateOrCreateNodeImpl = (lView, index, textOrNa
 };
 
 function locateOrCreateNodeImpl(
-    lView: LView, index: number, textOrName: string,
-    nodeType: typeof Node.COMMENT_NODE|typeof Node.TEXT_NODE|typeof Node.ELEMENT_NODE) {
+  lView: LView,
+  index: number,
+  textOrName: string,
+  nodeType: typeof Node.COMMENT_NODE | typeof Node.TEXT_NODE | typeof Node.ELEMENT_NODE,
+) {
   const hydrationInfo = lView[HYDRATION];
   const noOffsetIndex = index - HEADER_OFFSET;
-  const isNodeCreationMode = !isI18nHydrationSupportEnabled() || !hydrationInfo ||
-      isInSkipHydrationBlock() || isDisconnectedNode(hydrationInfo, noOffsetIndex);
+  const isNodeCreationMode =
+    !isI18nHydrationSupportEnabled() ||
+    !hydrationInfo ||
+    isInSkipHydrationBlock() ||
+    isDisconnectedNode(hydrationInfo, noOffsetIndex);
 
   lastNodeWasCreated(isNodeCreationMode);
   if (isNodeCreationMode) {
@@ -126,10 +170,13 @@ function locateOrCreateNodeImpl(
   // need to be able to use the AST to generate a similar message.
   ngDevMode && assertDefined(native, 'expected native element');
   ngDevMode && assertEqual((native as Node).nodeType, nodeType, 'expected matching nodeType');
-  ngDevMode && nodeType === Node.ELEMENT_NODE &&
-      assertEqual(
-          (native as HTMLElement).tagName.toLowerCase(), textOrName.toLowerCase(),
-          'expecting matching tagName');
+  ngDevMode &&
+    nodeType === Node.ELEMENT_NODE &&
+    assertEqual(
+      (native as HTMLElement).tagName.toLowerCase(),
+      textOrName.toLowerCase(),
+      'expecting matching tagName',
+    );
   ngDevMode && markRNodeAsClaimedByHydration(native);
 
   return native;
@@ -151,23 +198,30 @@ export function enableLocateOrCreateI18nNodeImpl() {
  * @param insertInFrontOf DOM node that should be used as an anchor.
  */
 export function applyCreateOpCodes(
-    lView: LView, createOpCodes: I18nCreateOpCodes, parentRNode: RElement|null,
-    insertInFrontOf: RElement|null): void {
+  lView: LView,
+  createOpCodes: I18nCreateOpCodes,
+  parentRNode: RElement | null,
+  insertInFrontOf: RElement | null,
+): void {
   const renderer = lView[RENDERER];
   for (let i = 0; i < createOpCodes.length; i++) {
     const opCode = createOpCodes[i++] as any;
     const text = createOpCodes[i] as string;
     const isComment = (opCode & I18nCreateOpCode.COMMENT) === I18nCreateOpCode.COMMENT;
     const appendNow =
-        (opCode & I18nCreateOpCode.APPEND_EAGERLY) === I18nCreateOpCode.APPEND_EAGERLY;
+      (opCode & I18nCreateOpCode.APPEND_EAGERLY) === I18nCreateOpCode.APPEND_EAGERLY;
     const index = opCode >>> I18nCreateOpCode.SHIFT;
     let rNode = lView[index];
     let lastNodeWasCreated = false;
     if (rNode === null) {
       // We only create new DOM nodes if they don't already exist: If ICU switches case back to a
       // case which was already instantiated, no need to create new DOM nodes.
-      rNode = lView[index] =
-          _locateOrCreateNode(lView, index, text, isComment ? Node.COMMENT_NODE : Node.TEXT_NODE);
+      rNode = lView[index] = _locateOrCreateNode(
+        lView,
+        index,
+        text,
+        isComment ? Node.COMMENT_NODE : Node.TEXT_NODE,
+      );
       lastNodeWasCreated = wasLastNodeCreated();
     }
     if (appendNow && parentRNode !== null && lastNodeWasCreated) {
@@ -185,17 +239,21 @@ export function applyCreateOpCodes(
  * @param anchorRNode place where the i18n node should be inserted.
  */
 export function applyMutableOpCodes(
-    tView: TView, mutableOpCodes: IcuCreateOpCodes, lView: LView, anchorRNode: RNode): void {
+  tView: TView,
+  mutableOpCodes: IcuCreateOpCodes,
+  lView: LView,
+  anchorRNode: RNode,
+): void {
   ngDevMode && assertDomNode(anchorRNode);
   const renderer = lView[RENDERER];
   // `rootIdx` represents the node into which all inserts happen.
-  let rootIdx: number|null = null;
+  let rootIdx: number | null = null;
   // `rootRNode` represents the real node into which we insert. This can be different from
   // `lView[rootIdx]` if we have projection.
   //  - null we don't have a parent (as can be the case in when we are inserting into a root of
   //    LView which has no parent.)
   //  - `RElement` The element representing the root after taking projection into account.
-  let rootRNode!: RElement|null;
+  let rootRNode!: RElement | null;
   for (let i = 0; i < mutableOpCodes.length; i++) {
     const opCode = mutableOpCodes[i];
     if (typeof opCode == 'string') {
@@ -216,8 +274,8 @@ export function applyMutableOpCodes(
             rootIdx = parentIdx;
             rootRNode = nativeParentNode(renderer, anchorRNode);
           }
-          let insertInFrontOf: RNode|null;
-          let parentRNode: RElement|null;
+          let insertInFrontOf: RNode | null;
+          let parentRNode: RElement | null;
           if (parentIdx === rootIdx) {
             insertInFrontOf = anchorRNode;
             parentRNode = rootRNode;
@@ -258,14 +316,21 @@ export function applyMutableOpCodes(
           // This code is used for ICU expressions only, since we don't support
           // directives/components in ICUs, we don't need to worry about inputs here
           setElementAttribute(
-              renderer, getNativeByIndex(elementNodeIndex, lView) as RElement, null, null, attrName,
-              attrValue, null);
+            renderer,
+            getNativeByIndex(elementNodeIndex, lView) as RElement,
+            null,
+            null,
+            attrName,
+            attrValue,
+            null,
+          );
           break;
         default:
           if (ngDevMode) {
             throw new RuntimeError(
-                RuntimeErrorCode.INVALID_I18N_STRUCTURE,
-                `Unable to determine the type of mutate operation for "${opCode}"`);
+              RuntimeErrorCode.INVALID_I18N_STRUCTURE,
+              `Unable to determine the type of mutate operation for "${opCode}"`,
+            );
           }
       }
     } else {
@@ -275,13 +340,19 @@ export function applyMutableOpCodes(
           const commentNodeIndex = mutableOpCodes[++i] as number;
           if (lView[commentNodeIndex] === null) {
             ngDevMode &&
-                assertEqual(
-                    typeof commentValue, 'string',
-                    `Expected "${commentValue}" to be a comment node value`);
+              assertEqual(
+                typeof commentValue,
+                'string',
+                `Expected "${commentValue}" to be a comment node value`,
+              );
             ngDevMode && ngDevMode.rendererCreateComment++;
             ngDevMode && assertIndexInExpandoRange(lView, commentNodeIndex);
-            const commentRNode = lView[commentNodeIndex] =
-                _locateOrCreateNode(lView, commentNodeIndex, commentValue, Node.COMMENT_NODE);
+            const commentRNode = (lView[commentNodeIndex] = _locateOrCreateNode(
+              lView,
+              commentNodeIndex,
+              commentValue,
+              Node.COMMENT_NODE,
+            ));
             // FIXME(misko): Attaching patch data is only needed for the root (Also add tests)
             attachPatchData(commentRNode, lView);
           }
@@ -291,27 +362,32 @@ export function applyMutableOpCodes(
           const elementNodeIndex = mutableOpCodes[++i] as number;
           if (lView[elementNodeIndex] === null) {
             ngDevMode &&
-                assertEqual(
-                    typeof tagName, 'string',
-                    `Expected "${tagName}" to be an element node tag name`);
+              assertEqual(
+                typeof tagName,
+                'string',
+                `Expected "${tagName}" to be an element node tag name`,
+              );
 
             ngDevMode && ngDevMode.rendererCreateElement++;
             ngDevMode && assertIndexInExpandoRange(lView, elementNodeIndex);
-            const elementRNode = lView[elementNodeIndex] =
-                _locateOrCreateNode(lView, elementNodeIndex, tagName, Node.ELEMENT_NODE);
+            const elementRNode = (lView[elementNodeIndex] = _locateOrCreateNode(
+              lView,
+              elementNodeIndex,
+              tagName,
+              Node.ELEMENT_NODE,
+            ));
             // FIXME(misko): Attaching patch data is only needed for the root (Also add tests)
             attachPatchData(elementRNode, lView);
           }
           break;
         default:
           ngDevMode &&
-              throwError(`Unable to determine the type of mutate operation for "${opCode}"`);
+            throwError(`Unable to determine the type of mutate operation for "${opCode}"`);
       }
     }
   }
 }
 
-
 /**
  * Apply `I18nUpdateOpCodes` OpCodes
  *
@@ -323,8 +399,12 @@ export function applyMutableOpCodes(
  *     `bindingsStartIndex`)
  */
 export function applyUpdateOpCodes(
-    tView: TView, lView: LView, updateOpCodes: I18nUpdateOpCodes, bindingsStartIndex: number,
-    changeMask: number) {
+  tView: TView,
+  lView: LView,
+  updateOpCodes: I18nUpdateOpCodes,
+  bindingsStartIndex: number,
+  changeMask: number,
+) {
   for (let i = 0; i < updateOpCodes.length; i++) {
     // bit code to check if we should apply the next update
     const checkBit = updateOpCodes[i] as number;
@@ -333,7 +413,7 @@ export function applyUpdateOpCodes(
     if (checkBit & changeMask) {
       // The value has been updated since last checked
       let value = '';
-      for (let j = i + 1; j <= (i + skipCodes); j++) {
+      for (let j = i + 1; j <= i + skipCodes; j++) {
         const opCode = updateOpCodes[j];
         if (typeof opCode == 'string') {
           value += opCode;
@@ -342,7 +422,7 @@ export function applyUpdateOpCodes(
             // Negative opCode represent `i18nExp` values offset.
             value += renderStringify(lView[bindingsStartIndex - opCode]);
           } else {
-            const nodeIndex = (opCode >>> I18nUpdateOpCode.SHIFT_REF);
+            const nodeIndex = opCode >>> I18nUpdateOpCode.SHIFT_REF;
             switch (opCode & I18nUpdateOpCode.MASK_OPCODE) {
               case I18nUpdateOpCode.Attr:
                 const propName = updateOpCodes[++j] as string;
@@ -354,12 +434,25 @@ export function applyUpdateOpCodes(
                   // not have TNode), in which case we know that there are no directives, and hence
                   // we use attribute setting.
                   setElementAttribute(
-                      lView[RENDERER], lView[nodeIndex], null, tNodeOrTagName, propName, value,
-                      sanitizeFn);
+                    lView[RENDERER],
+                    lView[nodeIndex],
+                    null,
+                    tNodeOrTagName,
+                    propName,
+                    value,
+                    sanitizeFn,
+                  );
                 } else {
                   elementPropertyInternal(
-                      tView, tNodeOrTagName, lView, propName, value, lView[RENDERER], sanitizeFn,
-                      false);
+                    tView,
+                    tNodeOrTagName,
+                    lView,
+                    propName,
+                    value,
+                    lView[RENDERER],
+                    sanitizeFn,
+                    false,
+                  );
                 }
                 break;
               case I18nUpdateOpCode.Text:
@@ -383,7 +476,7 @@ export function applyUpdateOpCodes(
         // we still need to execute `icuUpdateCase` because the case has changed recently due to
         // previous `icuSwitchCase` instruction. (`icuSwitchCase` and `icuUpdateCase` always come in
         // pairs.)
-        const nodeIndex = (opCode >>> I18nUpdateOpCode.SHIFT_REF);
+        const nodeIndex = opCode >>> I18nUpdateOpCode.SHIFT_REF;
         const tIcu = getTIcu(tView, nodeIndex)!;
         const currentIndex = lView[tIcu.currentCaseLViewIndex];
         if (currentIndex < 0) {
@@ -475,14 +568,13 @@ function applyIcuSwitchCaseRemove(tView: TView, tIcu: TIcu, lView: LView) {
   }
 }
 
-
 /**
  * Returns the index of the current case of an ICU expression depending on the main binding value
  *
  * @param icuExpression
  * @param bindingValue The value of the main binding used by this ICU expression
  */
-function getCaseIndex(icuExpression: TIcu, bindingValue: string): number|null {
+function getCaseIndex(icuExpression: TIcu, bindingValue: string): number | null {
   let index = icuExpression.cases.indexOf(bindingValue);
   if (index === -1) {
     switch (icuExpression.type) {
diff --git a/packages/core/src/render3/i18n/i18n_debug.ts b/packages/core/src/render3/i18n/i18n_debug.ts
index cd3c8a6bbf17d..0c1bca94336fc 100644
--- a/packages/core/src/render3/i18n/i18n_debug.ts
+++ b/packages/core/src/render3/i18n/i18n_debug.ts
@@ -7,10 +7,23 @@
  */
 
 import {assertNumber, assertString} from '../../util/assert';
-import {ELEMENT_MARKER, I18nCreateOpCode, I18nCreateOpCodes, I18nRemoveOpCodes, I18nUpdateOpCode, I18nUpdateOpCodes, ICU_MARKER, IcuCreateOpCode, IcuCreateOpCodes} from '../interfaces/i18n';
-
-import {getInstructionFromIcuCreateOpCode, getParentFromIcuCreateOpCode, getRefFromIcuCreateOpCode} from './i18n_util';
+import {
+  ELEMENT_MARKER,
+  I18nCreateOpCode,
+  I18nCreateOpCodes,
+  I18nRemoveOpCodes,
+  I18nUpdateOpCode,
+  I18nUpdateOpCodes,
+  ICU_MARKER,
+  IcuCreateOpCode,
+  IcuCreateOpCodes,
+} from '../interfaces/i18n';
 
+import {
+  getInstructionFromIcuCreateOpCode,
+  getParentFromIcuCreateOpCode,
+  getRefFromIcuCreateOpCode,
+} from './i18n_util';
 
 /**
  * Converts `I18nCreateOpCodes` array into a human readable format.
@@ -23,18 +36,23 @@ import {getInstructionFromIcuCreateOpCode, getParentFromIcuCreateOpCode, getRefF
  * @param opcodes `I18nCreateOpCodes` if invoked as a function.
  */
 export function i18nCreateOpCodesToString(
-    this: I18nCreateOpCodes|void, opcodes?: I18nCreateOpCodes): string[] {
-  const createOpCodes: I18nCreateOpCodes = opcodes || (Array.isArray(this) ? this : [] as any);
+  this: I18nCreateOpCodes | void,
+  opcodes?: I18nCreateOpCodes,
+): string[] {
+  const createOpCodes: I18nCreateOpCodes = opcodes || (Array.isArray(this) ? this : ([] as any));
   let lines: string[] = [];
   for (let i = 0; i < createOpCodes.length; i++) {
     const opCode = createOpCodes[i++] as any;
     const text = createOpCodes[i] as string;
     const isComment = (opCode & I18nCreateOpCode.COMMENT) === I18nCreateOpCode.COMMENT;
     const appendNow =
-        (opCode & I18nCreateOpCode.APPEND_EAGERLY) === I18nCreateOpCode.APPEND_EAGERLY;
+      (opCode & I18nCreateOpCode.APPEND_EAGERLY) === I18nCreateOpCode.APPEND_EAGERLY;
     const index = opCode >>> I18nCreateOpCode.SHIFT;
-    lines.push(`lView[${index}] = document.${isComment ? 'createComment' : 'createText'}(${
-        JSON.stringify(text)});`);
+    lines.push(
+      `lView[${index}] = document.${isComment ? 'createComment' : 'createText'}(${JSON.stringify(
+        text,
+      )});`,
+    );
     if (appendNow) {
       lines.push(`parent.appendChild(lView[${index}]);`);
     }
@@ -53,7 +71,9 @@ export function i18nCreateOpCodesToString(
  * @param opcodes `I18nUpdateOpCodes` if invoked as a function.
  */
 export function i18nUpdateOpCodesToString(
-    this: I18nUpdateOpCodes|void, opcodes?: I18nUpdateOpCodes): string[] {
+  this: I18nUpdateOpCodes | void,
+  opcodes?: I18nUpdateOpCodes,
+): string[] {
   const parser = new OpCodeParser(opcodes || (Array.isArray(this) ? this : []));
   let lines: string[] = [];
 
@@ -76,7 +96,6 @@ export function i18nUpdateOpCodesToString(
     throw new Error('unexpected OpCode');
   }
 
-
   while (parser.hasMore()) {
     let mask = parser.consumeNumber();
     let size = parser.consumeNumber();
@@ -115,7 +134,9 @@ export function i18nUpdateOpCodesToString(
  * @param opcodes `I18nCreateOpCodes` if invoked as a function.
  */
 export function icuCreateOpCodesToString(
-    this: IcuCreateOpCodes|void, opcodes?: IcuCreateOpCodes): string[] {
+  this: IcuCreateOpCodes | void,
+  opcodes?: IcuCreateOpCodes,
+): string[] {
   const parser = new OpCodeParser(opcodes || (Array.isArray(this) ? this : []));
   let lines: string[] = [];
 
@@ -126,8 +147,7 @@ export function icuCreateOpCodesToString(
       case IcuCreateOpCode.AppendChild:
         return `(lView[${parent}] as Element).appendChild(lView[${lastRef}])`;
       case IcuCreateOpCode.Attr:
-        return `(lView[${ref}] as Element).setAttribute("${parser.consumeString()}", "${
-            parser.consumeString()}")`;
+        return `(lView[${ref}] as Element).setAttribute("${parser.consumeString()}", "${parser.consumeString()}")`;
     }
     throw new Error('Unexpected OpCode: ' + getInstructionFromIcuCreateOpCode(opCode));
   }
@@ -168,7 +188,9 @@ export function icuCreateOpCodesToString(
  * @param opcodes `I18nRemoveOpCodes` if invoked as a function.
  */
 export function i18nRemoveOpCodesToString(
-    this: I18nRemoveOpCodes|void, opcodes?: I18nRemoveOpCodes): string[] {
+  this: I18nRemoveOpCodes | void,
+  opcodes?: I18nRemoveOpCodes,
+): string[] {
   const removeCodes = opcodes || (Array.isArray(this) ? this : []);
   let lines: string[] = [];
 
@@ -186,7 +208,6 @@ export function i18nRemoveOpCodesToString(
   return lines;
 }
 
-
 class OpCodeParser {
   i: number = 0;
   codes: any[];
@@ -211,7 +232,7 @@ class OpCodeParser {
     return value;
   }
 
-  consumeFunction(): Function|null {
+  consumeFunction(): Function | null {
     let value = this.codes[this.i++];
     if (value === null || typeof value === 'function') {
       return value;
@@ -219,7 +240,7 @@ class OpCodeParser {
     throw new Error('expecting function in OpCode');
   }
 
-  consumeNumberOrString(): number|string {
+  consumeNumberOrString(): number | string {
     let value = this.codes[this.i++];
     if (typeof value === 'string') {
       return value;
@@ -228,10 +249,14 @@ class OpCodeParser {
     return value;
   }
 
-  consumeNumberStringOrMarker(): number|string|ICU_MARKER|ELEMENT_MARKER {
+  consumeNumberStringOrMarker(): number | string | ICU_MARKER | ELEMENT_MARKER {
     let value = this.codes[this.i++];
-    if (typeof value === 'string' || typeof value === 'number' || value == ICU_MARKER ||
-        value == ELEMENT_MARKER) {
+    if (
+      typeof value === 'string' ||
+      typeof value === 'number' ||
+      value == ICU_MARKER ||
+      value == ELEMENT_MARKER
+    ) {
       return value;
     }
     assertNumber(value, 'expecting number, string, ICU_MARKER or ELEMENT_MARKER in OpCode');
diff --git a/packages/core/src/render3/i18n/i18n_insert_before_index.ts b/packages/core/src/render3/i18n/i18n_insert_before_index.ts
index 9efb2cbc73514..ee89fdb583437 100644
--- a/packages/core/src/render3/i18n/i18n_insert_before_index.ts
+++ b/packages/core/src/render3/i18n/i18n_insert_before_index.ts
@@ -44,7 +44,7 @@ import {getInsertInFrontOfRNodeWithI18n, processI18nInsertBefore} from '../node_
 export function addTNodeAndUpdateInsertBeforeIndex(previousTNodes: TNode[], newTNode: TNode) {
   // Start with Rule1
   ngDevMode &&
-      assertEqual(newTNode.insertBeforeIndex, null, 'We expect that insertBeforeIndex is not set');
+    assertEqual(newTNode.insertBeforeIndex, null, 'We expect that insertBeforeIndex is not set');
 
   previousTNodes.push(newTNode);
   if (previousTNodes.length > 1) {
@@ -53,8 +53,10 @@ export function addTNodeAndUpdateInsertBeforeIndex(previousTNodes: TNode[], newT
       // Text nodes are created eagerly and so they don't need their `indexBeforeIndex` updated.
       // It is safe to ignore them.
       if (!isI18nText(existingTNode)) {
-        if (isNewTNodeCreatedBefore(existingTNode, newTNode) &&
-            getInsertBeforeIndex(existingTNode) === null) {
+        if (
+          isNewTNodeCreatedBefore(existingTNode, newTNode) &&
+          getInsertBeforeIndex(existingTNode) === null
+        ) {
           // If it was created before us in time, (and it does not yet have `insertBeforeIndex`)
           // then add the `insertBeforeIndex`.
           setInsertBeforeIndex(existingTNode, newTNode.index);
@@ -72,7 +74,7 @@ function isNewTNodeCreatedBefore(existingTNode: TNode, newTNode: TNode): boolean
   return isI18nText(newTNode) || existingTNode.index > newTNode.index;
 }
 
-function getInsertBeforeIndex(tNode: TNode): number|null {
+function getInsertBeforeIndex(tNode: TNode): number | null {
   const index = tNode.insertBeforeIndex;
   return Array.isArray(index) ? index[0] : index;
 }
diff --git a/packages/core/src/render3/i18n/i18n_locale_id.ts b/packages/core/src/render3/i18n/i18n_locale_id.ts
index 7fff4d11bf9f4..4d38c6bcc00a0 100644
--- a/packages/core/src/render3/i18n/i18n_locale_id.ts
+++ b/packages/core/src/render3/i18n/i18n_locale_id.ts
@@ -9,7 +9,6 @@
 import {DEFAULT_LOCALE_ID} from '../../i18n/localization';
 import {assertDefined} from '../../util/assert';
 
-
 /**
  * The locale id that the application is currently using (for translations and ICU expressions).
  * This is the ivy version of `LOCALE_ID` that was defined as an injection token for the view engine
diff --git a/packages/core/src/render3/i18n/i18n_parse.ts b/packages/core/src/render3/i18n/i18n_parse.ts
index a0d63b04507d6..c1cf4592d86f5 100644
--- a/packages/core/src/render3/i18n/i18n_parse.ts
+++ b/packages/core/src/render3/i18n/i18n_parse.ts
@@ -9,26 +9,65 @@ import '../../util/ng_dev_mode';
 import '../../util/ng_i18n_closure_mode';
 
 import {XSS_SECURITY_URL} from '../../error_details_base_url';
-import {getTemplateContent, URI_ATTRS, VALID_ATTRS, VALID_ELEMENTS} from '../../sanitization/html_sanitizer';
+import {
+  getTemplateContent,
+  URI_ATTRS,
+  VALID_ATTRS,
+  VALID_ELEMENTS,
+} from '../../sanitization/html_sanitizer';
 import {getInertBodyHelper} from '../../sanitization/inert_body';
 import {_sanitizeUrl} from '../../sanitization/url_sanitizer';
-import {assertDefined, assertEqual, assertGreaterThanOrEqual, assertOneOf, assertString} from '../../util/assert';
+import {
+  assertDefined,
+  assertEqual,
+  assertGreaterThanOrEqual,
+  assertOneOf,
+  assertString,
+} from '../../util/assert';
 import {CharCode} from '../../util/char_code';
 import {loadIcuContainerVisitor} from '../instructions/i18n_icu_container_visitor';
 import {allocExpando, createTNodeAtIndex} from '../instructions/shared';
 import {getDocument} from '../interfaces/document';
-import {ELEMENT_MARKER, I18nCreateOpCode, I18nCreateOpCodes, I18nElementNode, I18nNode, I18nNodeKind, I18nPlaceholderNode, I18nPlaceholderType, I18nRemoveOpCodes, I18nUpdateOpCode, I18nUpdateOpCodes, ICU_MARKER, IcuCreateOpCode, IcuCreateOpCodes, IcuExpression, IcuType, TI18n, TIcu} from '../interfaces/i18n';
+import {
+  ELEMENT_MARKER,
+  I18nCreateOpCode,
+  I18nCreateOpCodes,
+  I18nElementNode,
+  I18nNode,
+  I18nNodeKind,
+  I18nPlaceholderNode,
+  I18nPlaceholderType,
+  I18nRemoveOpCodes,
+  I18nUpdateOpCode,
+  I18nUpdateOpCodes,
+  ICU_MARKER,
+  IcuCreateOpCode,
+  IcuCreateOpCodes,
+  IcuExpression,
+  IcuType,
+  TI18n,
+  TIcu,
+} from '../interfaces/i18n';
 import {TNode, TNodeType} from '../interfaces/node';
 import {SanitizerFn} from '../interfaces/sanitization';
 import {HEADER_OFFSET, LView, TView} from '../interfaces/view';
 import {getCurrentParentTNode, getCurrentTNode, setCurrentTNode} from '../state';
 
-import {i18nCreateOpCodesToString, i18nRemoveOpCodesToString, i18nUpdateOpCodesToString, icuCreateOpCodesToString} from './i18n_debug';
+import {
+  i18nCreateOpCodesToString,
+  i18nRemoveOpCodesToString,
+  i18nUpdateOpCodesToString,
+  icuCreateOpCodesToString,
+} from './i18n_debug';
 import {addTNodeAndUpdateInsertBeforeIndex} from './i18n_insert_before_index';
 import {ensureIcuContainerVisitorLoaded} from './i18n_tree_shaking';
-import {createTNodePlaceholder, icuCreateOpCode, isRootTemplateMessage, setTIcu, setTNodeInsertBeforeIndex} from './i18n_util';
-
-
+import {
+  createTNodePlaceholder,
+  icuCreateOpCode,
+  isRootTemplateMessage,
+  setTIcu,
+  setTNodeInsertBeforeIndex,
+} from './i18n_util';
 
 const BINDING_REGEXP = /�(\d+):?\d*�/gi;
 const ICU_REGEXP = /({\s*�\d+:?\d*�\s*,\s*\S{6}\s*,[\s\S]*})/gi;
@@ -63,7 +102,8 @@ function attachDebugGetter<T>(obj: T, debugGetter: (this: T) => any): void {
     Object.defineProperty(obj, 'debug', {get: debugGetter, enumerable: false});
   } else {
     throw new Error(
-        'This method should be guarded with `ngDevMode` so that it can be tree shaken in production!');
+      'This method should be guarded with `ngDevMode` so that it can be tree shaken in production!',
+    );
   }
 }
 
@@ -82,8 +122,13 @@ function attachDebugGetter<T>(obj: T, debugGetter: (this: T) => any): void {
  *     `ngIf`) (-1 otherwise)
  */
 export function i18nStartFirstCreatePass(
-    tView: TView, parentTNodeIndex: number, lView: LView, index: number, message: string,
-    subTemplateIndex: number) {
+  tView: TView,
+  parentTNodeIndex: number,
+  lView: LView,
+  index: number,
+  message: string,
+  subTemplateIndex: number,
+) {
   const rootTNode = getCurrentParentTNode();
   const createOpCodes: I18nCreateOpCodes = [] as any;
   const updateOpCodes: I18nUpdateOpCodes = [] as any;
@@ -109,8 +154,15 @@ export function i18nStartFirstCreatePass(
           ngDevMode && assertString(text, 'Parsed ICU part should be string');
           if (text !== '') {
             i18nStartFirstCreatePassProcessTextNode(
-                astStack[0], tView, rootTNode, existingTNodeStack[0], createOpCodes, updateOpCodes,
-                lView, text);
+              astStack[0],
+              tView,
+              rootTNode,
+              existingTNodeStack[0],
+              createOpCodes,
+              updateOpCodes,
+              lView,
+              text,
+            );
           }
         } else {
           // `j` is Even therefor `part` is an `ICUExpression`
@@ -125,15 +177,30 @@ export function i18nStartFirstCreatePass(
             throw new Error(`Unable to parse ICU expression in "${message}" message.`);
           }
           const icuContainerTNode = createTNodeAndAddOpCode(
-              tView, rootTNode, existingTNodeStack[0], lView, createOpCodes,
-              ngDevMode ? `ICU ${index}:${icuExpression.mainBinding}` : '', true);
+            tView,
+            rootTNode,
+            existingTNodeStack[0],
+            lView,
+            createOpCodes,
+            ngDevMode ? `ICU ${index}:${icuExpression.mainBinding}` : '',
+            true,
+          );
           const icuNodeIndex = icuContainerTNode.index;
           ngDevMode &&
-              assertGreaterThanOrEqual(
-                  icuNodeIndex, HEADER_OFFSET, 'Index must be in absolute LView offset');
+            assertGreaterThanOrEqual(
+              icuNodeIndex,
+              HEADER_OFFSET,
+              'Index must be in absolute LView offset',
+            );
           icuStart(
-              astStack[0], tView, lView, updateOpCodes, parentTNodeIndex, icuExpression,
-              icuNodeIndex);
+            astStack[0],
+            tView,
+            lView,
+            updateOpCodes,
+            parentTNodeIndex,
+            icuExpression,
+            icuNodeIndex,
+          );
         }
       }
     } else {
@@ -142,7 +209,7 @@ export function i18nStartFirstCreatePass(
       const isClosing = value.charCodeAt(0) === CharCode.SLASH;
       const type = value.charCodeAt(isClosing ? 1 : 0);
       ngDevMode && assertOneOf(type, CharCode.STAR, CharCode.HASH);
-      const index = HEADER_OFFSET + Number.parseInt(value.substring((isClosing ? 2 : 1)));
+      const index = HEADER_OFFSET + Number.parseInt(value.substring(isClosing ? 2 : 1));
       if (isClosing) {
         existingTNodeStack.shift();
         astStack.shift();
@@ -156,8 +223,8 @@ export function i18nStartFirstCreatePass(
           kind: I18nNodeKind.PLACEHOLDER,
           index,
           children: [],
-          type: type === CharCode.HASH ? I18nPlaceholderType.ELEMENT :
-                                         I18nPlaceholderType.SUBTEMPLATE,
+          type:
+            type === CharCode.HASH ? I18nPlaceholderType.ELEMENT : I18nPlaceholderType.SUBTEMPLATE,
         };
         astStack[0].push(placeholderNode);
         astStack.unshift(placeholderNode.children);
@@ -185,8 +252,14 @@ export function i18nStartFirstCreatePass(
  * @param isICU true if a `Comment` node for ICU (instead of `Text`) node should be created.
  */
 function createTNodeAndAddOpCode(
-    tView: TView, rootTNode: TNode|null, existingTNodes: TNode[], lView: LView,
-    createOpCodes: I18nCreateOpCodes, text: string|null, isICU: boolean): TNode {
+  tView: TView,
+  rootTNode: TNode | null,
+  existingTNodes: TNode[],
+  lView: LView,
+  createOpCodes: I18nCreateOpCodes,
+  text: string | null,
+  isICU: boolean,
+): TNode {
   const i18nNodeIdx = allocExpando(tView, lView, 1, null);
   let opCode = i18nNodeIdx << I18nCreateOpCode.SHIFT;
   let parentTNode = getCurrentParentTNode();
@@ -212,8 +285,12 @@ function createTNodeAndAddOpCode(
   // We store `{{?}}` so that when looking at debug `TNodeType.template` we can see where the
   // bindings are.
   const tNode = createTNodeAtIndex(
-      tView, i18nNodeIdx, isICU ? TNodeType.Icu : TNodeType.Text,
-      text === null ? (ngDevMode ? '{{?}}' : '') : text, null);
+    tView,
+    i18nNodeIdx,
+    isICU ? TNodeType.Icu : TNodeType.Text,
+    text === null ? (ngDevMode ? '{{?}}' : '') : text,
+    null,
+  );
   addTNodeAndUpdateInsertBeforeIndex(existingTNodes, tNode);
   const tNodeIdx = tNode.index;
   setCurrentTNode(tNode, false /* Text nodes are self closing */);
@@ -245,12 +322,25 @@ function createTNodeAndAddOpCode(
  * @param text The translated text (which may contain binding)
  */
 function i18nStartFirstCreatePassProcessTextNode(
-    ast: I18nNode[], tView: TView, rootTNode: TNode|null, existingTNodes: TNode[],
-    createOpCodes: I18nCreateOpCodes, updateOpCodes: I18nUpdateOpCodes, lView: LView,
-    text: string): void {
+  ast: I18nNode[],
+  tView: TView,
+  rootTNode: TNode | null,
+  existingTNodes: TNode[],
+  createOpCodes: I18nCreateOpCodes,
+  updateOpCodes: I18nUpdateOpCodes,
+  lView: LView,
+  text: string,
+): void {
   const hasBinding = text.match(BINDING_REGEXP);
   const tNode = createTNodeAndAddOpCode(
-      tView, rootTNode, existingTNodes, lView, createOpCodes, hasBinding ? null : text, false);
+    tView,
+    rootTNode,
+    existingTNodes,
+    lView,
+    createOpCodes,
+    hasBinding ? null : text,
+    false,
+  );
   const index = tNode.index;
   if (hasBinding) {
     generateBindingUpdateOpCodes(updateOpCodes, text, index, null, 0, null);
@@ -281,7 +371,8 @@ export function i18nAttributesFirstPass(tView: TView, index: number, values: str
         // an invalid string while they're developing.
         if (ICU_REGEXP.test(message)) {
           throw new Error(
-              `ICU expressions are not supported in attributes. Message: "${message}".`);
+            `ICU expressions are not supported in attributes. Message: "${message}".`,
+          );
         }
 
         // i18n attributes that hit this code path are guaranteed to have bindings, because
@@ -289,15 +380,19 @@ export function i18nAttributesFirstPass(tView: TView, index: number, values: str
         // Since this may not be the first i18n attribute on this element we need to pass in how
         // many previous bindings there have already been.
         generateBindingUpdateOpCodes(
-            updateOpCodes, message, previousElementIndex, attrName, countBindings(updateOpCodes),
-            null);
+          updateOpCodes,
+          message,
+          previousElementIndex,
+          attrName,
+          countBindings(updateOpCodes),
+          null,
+        );
       }
     }
     tView.data[index] = updateOpCodes;
   }
 }
 
-
 /**
  * Generate the OpCodes to update the bindings of a string.
  *
@@ -310,15 +405,23 @@ export function i18nAttributesFirstPass(tView: TView, index: number, values: str
  * @returns The mask value for these bindings
  */
 function generateBindingUpdateOpCodes(
-    updateOpCodes: I18nUpdateOpCodes, str: string, destinationNode: number, attrName: string|null,
-    bindingStart: number, sanitizeFn: SanitizerFn|null): number {
+  updateOpCodes: I18nUpdateOpCodes,
+  str: string,
+  destinationNode: number,
+  attrName: string | null,
+  bindingStart: number,
+  sanitizeFn: SanitizerFn | null,
+): number {
   ngDevMode &&
-      assertGreaterThanOrEqual(
-          destinationNode, HEADER_OFFSET, 'Index must be in absolute LView offset');
-  const maskIndex = updateOpCodes.length;  // Location of mask
-  const sizeIndex = maskIndex + 1;         // location of size for skipping
-  updateOpCodes.push(null, null);          // Alloc space for mask and size
-  const startIndex = maskIndex + 2;        // location of first allocation.
+    assertGreaterThanOrEqual(
+      destinationNode,
+      HEADER_OFFSET,
+      'Index must be in absolute LView offset',
+    );
+  const maskIndex = updateOpCodes.length; // Location of mask
+  const sizeIndex = maskIndex + 1; // location of size for skipping
+  updateOpCodes.push(null, null); // Alloc space for mask and size
+  const startIndex = maskIndex + 2; // location of first allocation.
   if (ngDevMode) {
     attachDebugGetter(updateOpCodes, i18nUpdateOpCodesToString);
   }
@@ -340,8 +443,9 @@ function generateBindingUpdateOpCodes(
   }
 
   updateOpCodes.push(
-      destinationNode << I18nUpdateOpCode.SHIFT_REF |
-      (attrName ? I18nUpdateOpCode.Attr : I18nUpdateOpCode.Text));
+    (destinationNode << I18nUpdateOpCode.SHIFT_REF) |
+      (attrName ? I18nUpdateOpCode.Attr : I18nUpdateOpCode.Text),
+  );
   if (attrName) {
     updateOpCodes.push(attrName, sanitizeFn);
   }
@@ -409,16 +513,16 @@ function removeInnerTemplateTranslation(message: string): string {
   }
 
   ngDevMode &&
-      assertEqual(
-          inTemplate, false,
-          `Tag mismatch: unable to find the end of the sub-template in the translation "${
-              message}"`);
+    assertEqual(
+      inTemplate,
+      false,
+      `Tag mismatch: unable to find the end of the sub-template in the translation "${message}"`,
+    );
 
   res += message.slice(index);
   return res;
 }
 
-
 /**
  * Extracts a part of a message and removes the rest.
  *
@@ -441,7 +545,7 @@ export function getTranslationForTemplate(message: string, subTemplateIndex: num
   } else {
     // We want a specific sub-template
     const start =
-        message.indexOf(`:${subTemplateIndex}${MARKER}`) + 2 + subTemplateIndex.toString().length;
+      message.indexOf(`:${subTemplateIndex}${MARKER}`) + 2 + subTemplateIndex.toString().length;
     const end = message.search(new RegExp(`${MARKER}\\/\\*\\d+:${subTemplateIndex}${MARKER}`));
     return removeInnerTemplateTranslation(message.substring(start, end));
   }
@@ -456,8 +560,14 @@ export function getTranslationForTemplate(message: string, subTemplateIndex: num
  *   - `tView.data[anchorIdx]` points to the `TIcuContainerNode` if ICU is root (`null` otherwise)
  */
 function icuStart(
-    ast: I18nNode[], tView: TView, lView: LView, updateOpCodes: I18nUpdateOpCodes,
-    parentIdx: number, icuExpression: IcuExpression, anchorIdx: number) {
+  ast: I18nNode[],
+  tView: TView,
+  lView: LView,
+  updateOpCodes: I18nUpdateOpCodes,
+  parentIdx: number,
+  icuExpression: IcuExpression,
+  anchorIdx: number,
+) {
   ngDevMode && assertDefined(icuExpression, 'ICU expression must be defined');
   let bindingMask = 0;
   const tIcu: TIcu = {
@@ -467,7 +577,7 @@ function icuStart(
     cases: [],
     create: [],
     remove: [],
-    update: []
+    update: [],
   };
   addUpdateIcuSwitch(updateOpCodes, icuExpression, anchorIdx);
   setTIcu(tView, anchorIdx, tIcu);
@@ -488,10 +598,18 @@ function icuStart(
     }
     const caseAst: I18nNode[] = [];
     cases.push(caseAst);
-    bindingMask = parseIcuCase(
-                      caseAst, tView, tIcu, lView, updateOpCodes, parentIdx, icuExpression.cases[i],
-                      valueArr.join(''), nestedIcus) |
-        bindingMask;
+    bindingMask =
+      parseIcuCase(
+        caseAst,
+        tView,
+        tIcu,
+        lView,
+        updateOpCodes,
+        parentIdx,
+        icuExpression.cases[i],
+        valueArr.join(''),
+        nestedIcus,
+      ) | bindingMask;
   }
   if (bindingMask) {
     addUpdateIcuUpdate(updateOpCodes, bindingMask, anchorIdx);
@@ -500,7 +618,7 @@ function icuStart(
     kind: I18nNodeKind.ICU,
     index: anchorIdx,
     cases,
-    currentCaseLViewIndex: tIcu.currentCaseLViewIndex
+    currentCaseLViewIndex: tIcu.currentCaseLViewIndex,
   });
 }
 
@@ -513,22 +631,25 @@ function icuStart(
  */
 function parseICUBlock(pattern: string): IcuExpression {
   const cases = [];
-  const values: (string|IcuExpression)[][] = [];
+  const values: (string | IcuExpression)[][] = [];
   let icuType = IcuType.plural;
   let mainBinding = 0;
-  pattern = pattern.replace(ICU_BLOCK_REGEXP, function(str: string, binding: string, type: string) {
-    if (type === 'select') {
-      icuType = IcuType.select;
-    } else {
-      icuType = IcuType.plural;
-    }
-    mainBinding = parseInt(binding.slice(1), 10);
-    return '';
-  });
+  pattern = pattern.replace(
+    ICU_BLOCK_REGEXP,
+    function (str: string, binding: string, type: string) {
+      if (type === 'select') {
+        icuType = IcuType.select;
+      } else {
+        icuType = IcuType.plural;
+      }
+      mainBinding = parseInt(binding.slice(1), 10);
+      return '';
+    },
+  );
 
   const parts = i18nParseTextIntoPartsAndICU(pattern) as string[];
   // Looking for (key block)+ sequence. One of the keys has to be "other".
-  for (let pos = 0; pos < parts.length;) {
+  for (let pos = 0; pos < parts.length; ) {
     let key = parts[pos++].trim();
     if (icuType === IcuType.plural) {
       // Key can be "=x", we just want "x"
@@ -548,7 +669,6 @@ function parseICUBlock(pattern: string): IcuExpression {
   return {type: icuType, mainBinding: mainBinding, cases, values};
 }
 
-
 /**
  * Breaks pattern into strings and top level {...} blocks.
  * Can be used to break a message into text and ICU expressions, or to break an ICU expression
@@ -559,20 +679,20 @@ function parseICUBlock(pattern: string): IcuExpression {
  *   - odd positions: `string` => text between ICU expressions
  *   - even positions: `ICUExpression` => ICU expression parsed into `ICUExpression` record.
  */
-function i18nParseTextIntoPartsAndICU(pattern: string): (string|IcuExpression)[] {
+function i18nParseTextIntoPartsAndICU(pattern: string): (string | IcuExpression)[] {
   if (!pattern) {
     return [];
   }
 
   let prevPos = 0;
   const braceStack = [];
-  const results: (string|IcuExpression)[] = [];
+  const results: (string | IcuExpression)[] = [];
   const braces = /[{}]/g;
   // lastIndex doesn't get set to 0 so we have to.
   braces.lastIndex = 0;
 
   let match;
-  while (match = braces.exec(pattern)) {
+  while ((match = braces.exec(pattern))) {
     const pos = match.index;
     if (match[0] == '}') {
       braceStack.pop();
@@ -603,15 +723,21 @@ function i18nParseTextIntoPartsAndICU(pattern: string): (string|IcuExpression)[]
   return results;
 }
 
-
 /**
  * Parses a node, its children and its siblings, and generates the mutate & update OpCodes.
  *
  */
 function parseIcuCase(
-    ast: I18nNode[], tView: TView, tIcu: TIcu, lView: LView, updateOpCodes: I18nUpdateOpCodes,
-    parentIdx: number, caseName: string, unsafeCaseHtml: string,
-    nestedIcus: IcuExpression[]): number {
+  ast: I18nNode[],
+  tView: TView,
+  tIcu: TIcu,
+  lView: LView,
+  updateOpCodes: I18nUpdateOpCodes,
+  parentIdx: number,
+  caseName: string,
+  unsafeCaseHtml: string,
+  nestedIcus: IcuExpression[],
+): number {
   const create: IcuCreateOpCodes = [] as any;
   const remove: I18nRemoveOpCodes = [] as any;
   const update: I18nUpdateOpCodes = [] as any;
@@ -628,20 +754,41 @@ function parseIcuCase(
   const inertBodyHelper = getInertBodyHelper(getDocument());
   const inertBodyElement = inertBodyHelper.getInertBodyElement(unsafeCaseHtml);
   ngDevMode && assertDefined(inertBodyElement, 'Unable to generate inert body element');
-  const inertRootNode = getTemplateContent(inertBodyElement!) as Element || inertBodyElement;
+  const inertRootNode = (getTemplateContent(inertBodyElement!) as Element) || inertBodyElement;
   if (inertRootNode) {
     return walkIcuTree(
-        ast, tView, tIcu, lView, updateOpCodes, create, remove, update, inertRootNode, parentIdx,
-        nestedIcus, 0);
+      ast,
+      tView,
+      tIcu,
+      lView,
+      updateOpCodes,
+      create,
+      remove,
+      update,
+      inertRootNode,
+      parentIdx,
+      nestedIcus,
+      0,
+    );
   } else {
     return 0;
   }
 }
 
 function walkIcuTree(
-    ast: I18nNode[], tView: TView, tIcu: TIcu, lView: LView, sharedUpdateOpCodes: I18nUpdateOpCodes,
-    create: IcuCreateOpCodes, remove: I18nRemoveOpCodes, update: I18nUpdateOpCodes,
-    parentNode: Element, parentIdx: number, nestedIcus: IcuExpression[], depth: number): number {
+  ast: I18nNode[],
+  tView: TView,
+  tIcu: TIcu,
+  lView: LView,
+  sharedUpdateOpCodes: I18nUpdateOpCodes,
+  create: IcuCreateOpCodes,
+  remove: I18nRemoveOpCodes,
+  update: I18nUpdateOpCodes,
+  parentNode: Element,
+  parentIdx: number,
+  nestedIcus: IcuExpression[],
+  depth: number,
+): number {
   let bindingMask = 0;
   let currentNode = parentNode.firstChild;
   while (currentNode) {
@@ -663,16 +810,23 @@ function walkIcuTree(
               if (VALID_ATTRS.hasOwnProperty(lowerAttrName)) {
                 if (URI_ATTRS[lowerAttrName]) {
                   generateBindingUpdateOpCodes(
-                      update, attr.value, newIndex, attr.name, 0, _sanitizeUrl);
+                    update,
+                    attr.value,
+                    newIndex,
+                    attr.name,
+                    0,
+                    _sanitizeUrl,
+                  );
                 } else {
                   generateBindingUpdateOpCodes(update, attr.value, newIndex, attr.name, 0, null);
                 }
               } else {
                 ngDevMode &&
-                    console.warn(
-                        `WARNING: ignoring unsafe attribute value ` +
-                        `${lowerAttrName} on element ${tagName} ` +
-                        `(see ${XSS_SECURITY_URL})`);
+                  console.warn(
+                    `WARNING: ignoring unsafe attribute value ` +
+                      `${lowerAttrName} on element ${tagName} ` +
+                      `(see ${XSS_SECURITY_URL})`,
+                  );
               }
             } else {
               addCreateAttribute(create, newIndex, attr);
@@ -686,10 +840,20 @@ function walkIcuTree(
           ast.push(elementNode);
           // Parse the children of this node (if any)
           bindingMask =
-              walkIcuTree(
-                  elementNode.children, tView, tIcu, lView, sharedUpdateOpCodes, create, remove,
-                  update, currentNode as Element, newIndex, nestedIcus, depth + 1) |
-              bindingMask;
+            walkIcuTree(
+              elementNode.children,
+              tView,
+              tIcu,
+              lView,
+              sharedUpdateOpCodes,
+              create,
+              remove,
+              update,
+              currentNode as Element,
+              newIndex,
+              nestedIcus,
+              depth + 1,
+            ) | bindingMask;
           addRemoveNode(remove, newIndex, depth);
         }
         break;
@@ -700,7 +864,7 @@ function walkIcuTree(
         addRemoveNode(remove, newIndex, depth);
         if (hasBinding) {
           bindingMask =
-              generateBindingUpdateOpCodes(update, value, newIndex, null, 0, null) | bindingMask;
+            generateBindingUpdateOpCodes(update, value, newIndex, null, 0, null) | bindingMask;
         }
         ast.push({
           kind: I18nNodeKind.TEXT,
@@ -715,8 +879,12 @@ function walkIcuTree(
           const icuExpression: IcuExpression = nestedIcus[nestedIcuIndex];
           // Create the comment node that will anchor the ICU expression
           addCreateNodeAndAppend(
-              create, ICU_MARKER, ngDevMode ? `nested ICU ${nestedIcuIndex}` : '', parentIdx,
-              newIndex);
+            create,
+            ICU_MARKER,
+            ngDevMode ? `nested ICU ${nestedIcuIndex}` : '',
+            parentIdx,
+            newIndex,
+          );
           icuStart(ast, tView, lView, sharedUpdateOpCodes, parentIdx, icuExpression, newIndex);
           addRemoveNestedIcu(remove, newIndex, depth);
         }
@@ -735,33 +903,49 @@ function addRemoveNode(remove: I18nRemoveOpCodes, index: number, depth: number)
 
 function addRemoveNestedIcu(remove: I18nRemoveOpCodes, index: number, depth: number) {
   if (depth === 0) {
-    remove.push(~index);  // remove ICU at `index`
-    remove.push(index);   // remove ICU comment at `index`
+    remove.push(~index); // remove ICU at `index`
+    remove.push(index); // remove ICU comment at `index`
   }
 }
 
 function addUpdateIcuSwitch(
-    update: I18nUpdateOpCodes, icuExpression: IcuExpression, index: number) {
+  update: I18nUpdateOpCodes,
+  icuExpression: IcuExpression,
+  index: number,
+) {
   update.push(
-      toMaskBit(icuExpression.mainBinding), 2, -1 - icuExpression.mainBinding,
-      index << I18nUpdateOpCode.SHIFT_REF | I18nUpdateOpCode.IcuSwitch);
+    toMaskBit(icuExpression.mainBinding),
+    2,
+    -1 - icuExpression.mainBinding,
+    (index << I18nUpdateOpCode.SHIFT_REF) | I18nUpdateOpCode.IcuSwitch,
+  );
 }
 
 function addUpdateIcuUpdate(update: I18nUpdateOpCodes, bindingMask: number, index: number) {
-  update.push(bindingMask, 1, index << I18nUpdateOpCode.SHIFT_REF | I18nUpdateOpCode.IcuUpdate);
+  update.push(bindingMask, 1, (index << I18nUpdateOpCode.SHIFT_REF) | I18nUpdateOpCode.IcuUpdate);
 }
 
 function addCreateNodeAndAppend(
-    create: IcuCreateOpCodes, marker: null|ICU_MARKER|ELEMENT_MARKER, text: string,
-    appendToParentIdx: number, createAtIdx: number) {
+  create: IcuCreateOpCodes,
+  marker: null | ICU_MARKER | ELEMENT_MARKER,
+  text: string,
+  appendToParentIdx: number,
+  createAtIdx: number,
+) {
   if (marker !== null) {
     create.push(marker);
   }
   create.push(
-      text, createAtIdx,
-      icuCreateOpCode(IcuCreateOpCode.AppendChild, appendToParentIdx, createAtIdx));
+    text,
+    createAtIdx,
+    icuCreateOpCode(IcuCreateOpCode.AppendChild, appendToParentIdx, createAtIdx),
+  );
 }
 
 function addCreateAttribute(create: IcuCreateOpCodes, newIndex: number, attr: Attr) {
-  create.push(newIndex << IcuCreateOpCode.SHIFT_REF | IcuCreateOpCode.Attr, attr.name, attr.value);
+  create.push(
+    (newIndex << IcuCreateOpCode.SHIFT_REF) | IcuCreateOpCode.Attr,
+    attr.name,
+    attr.value,
+  );
 }
diff --git a/packages/core/src/render3/i18n/i18n_postprocess.ts b/packages/core/src/render3/i18n/i18n_postprocess.ts
index 10ecf87f092dc..dbf92d1dd712a 100644
--- a/packages/core/src/render3/i18n/i18n_postprocess.ts
+++ b/packages/core/src/render3/i18n/i18n_postprocess.ts
@@ -20,7 +20,6 @@ const PP_TEMPLATE_ID_REGEXP = /\d+\:(\d+)/;
 // Contains the following fields: [templateId, isCloseTemplateTag, placeholder]
 type PostprocessPlaceholder = [number, boolean, string];
 
-
 /**
  * Handles message string post-processing for internationalization.
  *
@@ -42,7 +41,9 @@ type PostprocessPlaceholder = [number, boolean, string];
  * @codeGenApi
  */
 export function i18nPostprocess(
-    message: string, replacements: {[key: string]: (string|string[])} = {}): string {
+  message: string,
+  replacements: {[key: string]: string | string[]} = {},
+): string {
   /**
    * Step 1: resolve all multi-value placeholders like [�#5�|�*1:1��#2:1�|�#4:1�]
    *
@@ -112,7 +113,7 @@ export function i18nPostprocess(
    * Step 3: replace all placeholders used inside ICUs in a form of {PLACEHOLDER}
    */
   result = result.replace(PP_ICU_PLACEHOLDERS_REGEXP, (match, key): string => {
-    return replacements.hasOwnProperty(key) ? replacements[key] as string : match;
+    return replacements.hasOwnProperty(key) ? (replacements[key] as string) : match;
   });
 
   /**
diff --git a/packages/core/src/render3/i18n/i18n_tree_shaking.ts b/packages/core/src/render3/i18n/i18n_tree_shaking.ts
index 52ec6348fab36..654a7d66df5b3 100644
--- a/packages/core/src/render3/i18n/i18n_tree_shaking.ts
+++ b/packages/core/src/render3/i18n/i18n_tree_shaking.ts
@@ -17,15 +17,18 @@ import {TIcuContainerNode} from '../interfaces/node';
 import {RNode} from '../interfaces/renderer_dom';
 import {LView} from '../interfaces/view';
 
-
-let _icuContainerIterate: (tIcuContainerNode: TIcuContainerNode, lView: LView) =>
-    (() => RNode | null);
+let _icuContainerIterate: (
+  tIcuContainerNode: TIcuContainerNode,
+  lView: LView,
+) => () => RNode | null;
 
 /**
  * Iterator which provides ability to visit all of the `TIcuContainerNode` root `RNode`s.
  */
-export function icuContainerIterate(tIcuContainerNode: TIcuContainerNode, lView: LView): () =>
-    RNode | null {
+export function icuContainerIterate(
+  tIcuContainerNode: TIcuContainerNode,
+  lView: LView,
+): () => RNode | null {
   return _icuContainerIterate(tIcuContainerNode, lView);
 }
 
@@ -36,7 +39,8 @@ export function icuContainerIterate(tIcuContainerNode: TIcuContainerNode, lView:
  * bundler to tree shake ICU logic and only load it if ICU instruction is executed.
  */
 export function ensureIcuContainerVisitorLoaded(
-    loader: () => ((tIcuContainerNode: TIcuContainerNode, lView: LView) => (() => RNode | null))) {
+  loader: () => (tIcuContainerNode: TIcuContainerNode, lView: LView) => () => RNode | null,
+) {
   if (_icuContainerIterate === undefined) {
     // Do not inline this function. We want to keep `ensureIcuContainerVisitorLoaded` light, so it
     // can be inlined into call-site.
diff --git a/packages/core/src/render3/i18n/i18n_util.ts b/packages/core/src/render3/i18n/i18n_util.ts
index 67df3b9dc6100..00a89093f32d8 100644
--- a/packages/core/src/render3/i18n/i18n_util.ts
+++ b/packages/core/src/render3/i18n/i18n_util.ts
@@ -6,7 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {assertEqual, assertGreaterThan, assertGreaterThanOrEqual, throwError} from '../../util/assert';
+import {
+  assertEqual,
+  assertGreaterThan,
+  assertGreaterThanOrEqual,
+  throwError,
+} from '../../util/assert';
 import {assertTIcu, assertTNode} from '../assert';
 import {createTNodeAtIndex} from '../instructions/shared';
 import {IcuCreateOpCode, TIcu} from '../interfaces/i18n';
@@ -18,7 +23,6 @@ import {getInsertInFrontOfRNodeWithI18n, processI18nInsertBefore} from '../node_
 
 import {addTNodeAndUpdateInsertBeforeIndex} from './i18n_insert_before_index';
 
-
 /**
  * Retrieve `TIcu` at a given `index`.
  *
@@ -32,19 +36,22 @@ import {addTNodeAndUpdateInsertBeforeIndex} from './i18n_insert_before_index';
  * @param tView Current `TView`.
  * @param index Index where the value should be read from.
  */
-export function getTIcu(tView: TView, index: number): TIcu|null {
+export function getTIcu(tView: TView, index: number): TIcu | null {
   const value = tView.data[index] as null | TIcu | TIcuContainerNode | string;
   if (value === null || typeof value === 'string') return null;
-  if (ngDevMode &&
-      !(value.hasOwnProperty('tView') || value.hasOwnProperty('currentCaseLViewIndex'))) {
-    throwError('We expect to get \'null\'|\'TIcu\'|\'TIcuContainer\', but got: ' + value);
+  if (
+    ngDevMode &&
+    !(value.hasOwnProperty('tView') || value.hasOwnProperty('currentCaseLViewIndex'))
+  ) {
+    throwError("We expect to get 'null'|'TIcu'|'TIcuContainer', but got: " + value);
   }
   // Here the `value.hasOwnProperty('currentCaseLViewIndex')` is a polymorphic read as it can be
   // either TIcu or TIcuContainerNode. This is not ideal, but we still think it is OK because it
   // will be just two cases which fits into the browser inline cache (inline cache can take up to
   // 4)
-  const tIcu = value.hasOwnProperty('currentCaseLViewIndex') ? value as TIcu :
-                                                               (value as TIcuContainerNode).value;
+  const tIcu = value.hasOwnProperty('currentCaseLViewIndex')
+    ? (value as TIcu)
+    : (value as TIcuContainerNode).value;
   ngDevMode && assertTIcu(tIcu);
   return tIcu;
 }
@@ -66,9 +73,11 @@ export function getTIcu(tView: TView, index: number): TIcu|null {
 export function setTIcu(tView: TView, index: number, tIcu: TIcu): void {
   const tNode = tView.data[index] as null | TIcuContainerNode;
   ngDevMode &&
-      assertEqual(
-          tNode === null || tNode.hasOwnProperty('tView'), true,
-          'We expect to get \'null\'|\'TIcuContainer\'');
+    assertEqual(
+      tNode === null || tNode.hasOwnProperty('tView'),
+      true,
+      "We expect to get 'null'|'TIcuContainer'",
+    );
   if (tNode === null) {
     tView.data[index] = tIcu;
   } else {
@@ -87,8 +96,10 @@ export function setTNodeInsertBeforeIndex(tNode: TNode, index: number) {
   let insertBeforeIndex = tNode.insertBeforeIndex;
   if (insertBeforeIndex === null) {
     setI18nHandling(getInsertInFrontOfRNodeWithI18n, processI18nInsertBefore);
-    insertBeforeIndex = tNode.insertBeforeIndex =
-        [null!/* may be updated to number later */, index];
+    insertBeforeIndex = tNode.insertBeforeIndex = [
+      null! /* may be updated to number later */,
+      index,
+    ];
   } else {
     assertEqual(Array.isArray(insertBeforeIndex), true, 'Expecting array here');
     (insertBeforeIndex as number[]).push(index);
@@ -101,13 +112,15 @@ export function setTNodeInsertBeforeIndex(tNode: TNode, index: number) {
  * See `TNodeType.Placeholder` for more information.
  */
 export function createTNodePlaceholder(
-    tView: TView, previousTNodes: TNode[], index: number): TNode {
+  tView: TView,
+  previousTNodes: TNode[],
+  index: number,
+): TNode {
   const tNode = createTNodeAtIndex(tView, index, TNodeType.Placeholder, null, null);
   addTNodeAndUpdateInsertBeforeIndex(previousTNodes, tNode);
   return tNode;
 }
 
-
 /**
  * Returns current ICU case.
  *
@@ -117,8 +130,8 @@ export function createTNodePlaceholder(
  * for cases which have just been switched. This function removes the negative flag.
  */
 export function getCurrentICUCaseIndex(tIcu: TIcu, lView: LView) {
-  const currentCase: number|null = lView[tIcu.currentCaseLViewIndex];
-  return currentCase === null ? currentCase : (currentCase < 0 ? ~currentCase : currentCase);
+  const currentCase: number | null = lView[tIcu.currentCaseLViewIndex];
+  return currentCase === null ? currentCase : currentCase < 0 ? ~currentCase : currentCase;
 }
 
 export function getParentFromIcuCreateOpCode(mergedCode: number): number {
@@ -136,11 +149,13 @@ export function getInstructionFromIcuCreateOpCode(mergedCode: number): number {
 export function icuCreateOpCode(opCode: IcuCreateOpCode, parentIdx: number, refIdx: number) {
   ngDevMode && assertGreaterThanOrEqual(parentIdx, 0, 'Missing parent index');
   ngDevMode && assertGreaterThan(refIdx, 0, 'Missing ref index');
-  return opCode | parentIdx << IcuCreateOpCode.SHIFT_PARENT | refIdx << IcuCreateOpCode.SHIFT_REF;
+  return (
+    opCode | (parentIdx << IcuCreateOpCode.SHIFT_PARENT) | (refIdx << IcuCreateOpCode.SHIFT_REF)
+  );
 }
 
 // Returns whether the given value corresponds to a root template message,
 // or a sub-template.
-export function isRootTemplateMessage(subTemplateIndex: number): subTemplateIndex is - 1 {
+export function isRootTemplateMessage(subTemplateIndex: number): subTemplateIndex is -1 {
   return subTemplateIndex === -1;
 }
diff --git a/packages/core/src/render3/index.ts b/packages/core/src/render3/index.ts
index 03e07ffadc319..10289aaf49cc2 100644
--- a/packages/core/src/render3/index.ts
+++ b/packages/core/src/render3/index.ts
@@ -14,10 +14,32 @@ import {ɵɵInputTransformsFeature} from './features/input_transforms_feature';
 import {ɵɵNgOnChangesFeature} from './features/ng_onchanges_feature';
 import {ɵɵProvidersFeature} from './features/providers_feature';
 import {ɵɵStandaloneFeature} from './features/standalone_feature';
-import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef, DirectiveType, PipeDef} from './interfaces/definition';
-import {ɵɵComponentDeclaration, ɵɵDirectiveDeclaration, ɵɵFactoryDeclaration, ɵɵInjectorDeclaration, ɵɵNgModuleDeclaration, ɵɵPipeDeclaration} from './interfaces/public_definitions';
+import {
+  ComponentDef,
+  ComponentTemplate,
+  ComponentType,
+  DirectiveDef,
+  DirectiveType,
+  PipeDef,
+} from './interfaces/definition';
+import {
+  ɵɵComponentDeclaration,
+  ɵɵDirectiveDeclaration,
+  ɵɵFactoryDeclaration,
+  ɵɵInjectorDeclaration,
+  ɵɵNgModuleDeclaration,
+  ɵɵPipeDeclaration,
+} from './interfaces/public_definitions';
 import {ɵɵsetComponentScope, ɵɵsetNgModuleScope} from './scope';
-import {ComponentDebugMetadata, DirectiveDebugMetadata, getComponent, getDirectiveMetadata, getDirectives, getHostElement, getRenderedText} from './util/discovery_utils';
+import {
+  ComponentDebugMetadata,
+  DirectiveDebugMetadata,
+  getComponent,
+  getDirectiveMetadata,
+  getDirectives,
+  getHostElement,
+  getRenderedText,
+} from './util/discovery_utils';
 
 export {NgModuleType} from '../metadata/ng_module_def';
 export {ComponentFactory, ComponentFactoryResolver, ComponentRef} from './component_ref';
@@ -27,7 +49,6 @@ export {getLocaleId, setLocaleId} from './i18n/i18n_locale_id';
 export {
   store,
   ɵɵadvance,
-
   ɵɵattribute,
   ɵɵattributeInterpolate1,
   ɵɵattributeInterpolate2,
@@ -38,7 +59,6 @@ export {
   ɵɵattributeInterpolate7,
   ɵɵattributeInterpolate8,
   ɵɵattributeInterpolateV,
-
   ɵɵclassMap,
   ɵɵclassMapInterpolate1,
   ɵɵclassMapInterpolate2,
@@ -49,34 +69,24 @@ export {
   ɵɵclassMapInterpolate7,
   ɵɵclassMapInterpolate8,
   ɵɵclassMapInterpolateV,
-
   ɵɵclassProp,
-
   ɵɵcomponentInstance,
-
   ɵɵdirectiveInject,
-
   ɵɵelement,
-
   ɵɵelementContainer,
   ɵɵelementContainerEnd,
   ɵɵelementContainerStart,
   ɵɵelementEnd,
   ɵɵelementStart,
-
   ɵɵgetCurrentView,
   ɵɵhostProperty,
   ɵɵinjectAttribute,
   ɵɵinvalidFactory,
-
   ɵɵlistener,
-
   ɵɵnamespaceHTML,
   ɵɵnamespaceMathML,
   ɵɵnamespaceSVG,
-
   ɵɵnextContext,
-
   ɵɵprojection,
   ɵɵprojectionDef,
   ɵɵproperty,
@@ -90,23 +100,18 @@ export {
   ɵɵpropertyInterpolate7,
   ɵɵpropertyInterpolate8,
   ɵɵpropertyInterpolateV,
-
   ɵɵcontentQuery,
   ɵɵcontentQuerySignal,
-
   ɵɵloadQuery,
   ɵɵqueryRefresh,
   ɵɵqueryAdvance,
   ɵɵviewQuery,
   ɵɵviewQuerySignal,
-
   ɵɵreference,
-
   ɵɵrepeater,
   ɵɵrepeaterCreate,
   ɵɵrepeaterTrackByIdentity,
   ɵɵrepeaterTrackByIndex,
-
   ɵɵstyleMap,
   ɵɵstyleMapInterpolate1,
   ɵɵstyleMapInterpolate2,
@@ -117,7 +122,6 @@ export {
   ɵɵstyleMapInterpolate7,
   ɵɵstyleMapInterpolate8,
   ɵɵstyleMapInterpolateV,
-
   ɵɵstyleProp,
   ɵɵstylePropInterpolate1,
   ɵɵstylePropInterpolate2,
@@ -128,14 +132,10 @@ export {
   ɵɵstylePropInterpolate7,
   ɵɵstylePropInterpolate8,
   ɵɵstylePropInterpolateV,
-
   ɵɵsyntheticHostListener,
   ɵɵsyntheticHostProperty,
-
   ɵɵtemplate,
-
   ɵɵconditional,
-
   ɵɵdefer,
   ɵɵdeferWhen,
   ɵɵdeferOnIdle,
@@ -152,7 +152,6 @@ export {
   ɵɵdeferPrefetchOnInteraction,
   ɵɵdeferPrefetchOnViewport,
   ɵɵdeferEnableTimerScheduling,
-
   ɵɵtext,
   ɵɵtextInterpolate,
   ɵɵtextInterpolate1,
@@ -164,11 +163,9 @@ export {
   ɵɵtextInterpolate7,
   ɵɵtextInterpolate8,
   ɵɵtextInterpolateV,
-
   ɵɵtwoWayProperty,
   ɵɵtwoWayBindingSet,
   ɵɵtwoWayListener,
-
   ɵgetUnknownElementStrictMode,
   ɵsetUnknownElementStrictMode,
   ɵgetUnknownPropertyStrictMode,
@@ -178,28 +175,22 @@ export {
   DEFER_BLOCK_DEPENDENCY_INTERCEPTOR as ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
   DEFER_BLOCK_CONFIG as ɵDEFER_BLOCK_CONFIG,
 } from '../defer/instructions';
+export {DeferBlockDependencyInterceptor as ɵDeferBlockDependencyInterceptor} from '../defer/interfaces';
 export {
-  DeferBlockDependencyInterceptor as ɵDeferBlockDependencyInterceptor,
-} from '../defer/interfaces';
-export {ɵɵi18n, ɵɵi18nApply, ɵɵi18nAttributes, ɵɵi18nEnd, ɵɵi18nExp,ɵɵi18nPostprocess, ɵɵi18nStart} from './instructions/i18n';
+  ɵɵi18n,
+  ɵɵi18nApply,
+  ɵɵi18nAttributes,
+  ɵɵi18nEnd,
+  ɵɵi18nExp,
+  ɵɵi18nPostprocess,
+  ɵɵi18nStart,
+} from './instructions/i18n';
 export {RenderFlags} from './interfaces/definition';
-export {
-  AttributeMarker
-} from './interfaces/attribute_marker';
+export {AttributeMarker} from './interfaces/attribute_marker';
 export {CssSelectorList, ProjectionSlots} from './interfaces/projection';
-export {
-  setClassMetadata,
-  setClassMetadataAsync,
-} from './metadata';
+export {setClassMetadata, setClassMetadataAsync} from './metadata';
 export {NgModuleFactory, NgModuleRef, createEnvironmentInjector} from './ng_module_ref';
-export {
-  ɵɵpipe,
-  ɵɵpipeBind1,
-  ɵɵpipeBind2,
-  ɵɵpipeBind3,
-  ɵɵpipeBind4,
-  ɵɵpipeBindV,
-} from './pipe';
+export {ɵɵpipe, ɵɵpipeBind1, ɵɵpipeBind2, ɵɵpipeBind3, ɵɵpipeBind4, ɵɵpipeBindV} from './pipe';
 export {
   ɵɵpureFunction0,
   ɵɵpureFunction1,
@@ -212,16 +203,10 @@ export {
   ɵɵpureFunction8,
   ɵɵpureFunctionV,
 } from './pure_function';
-export {
-  ɵɵdisableBindings,
-
-  ɵɵenableBindings,
-  ɵɵresetView,
-  ɵɵrestoreView,
-} from './state';
+export {ɵɵdisableBindings, ɵɵenableBindings, ɵɵresetView, ɵɵrestoreView} from './state';
 export {NO_CHANGE} from './tokens';
-export { ɵɵresolveBody, ɵɵresolveDocument,ɵɵresolveWindow} from './util/misc_utils';
-export { ɵɵtemplateRefExtractor} from './view_engine_compatibility_prebound';
+export {ɵɵresolveBody, ɵɵresolveDocument, ɵɵresolveWindow} from './util/misc_utils';
+export {ɵɵtemplateRefExtractor} from './view_engine_compatibility_prebound';
 export {ɵɵgetComponentDepsFactory} from './local_compilation';
 export {ɵsetClassDebugInfo} from './debug/set_debug_info';
 // clang-format on
diff --git a/packages/core/src/render3/instructions/advance.ts b/packages/core/src/render3/instructions/advance.ts
index aaf8148e78b71..891fe17ca1152 100644
--- a/packages/core/src/render3/instructions/advance.ts
+++ b/packages/core/src/render3/instructions/advance.ts
@@ -9,8 +9,13 @@ import {assertGreaterThan} from '../../util/assert';
 import {assertIndexInDeclRange} from '../assert';
 import {executeCheckHooks, executeInitAndCheckHooks} from '../hooks';
 import {FLAGS, InitPhaseState, LView, LViewFlags, TVIEW, TView} from '../interfaces/view';
-import {getLView, getSelectedIndex, getTView, isInCheckNoChangesMode, setSelectedIndex} from '../state';
-
+import {
+  getLView,
+  getSelectedIndex,
+  getTView,
+  isInCheckNoChangesMode,
+  setSelectedIndex,
+} from '../state';
 
 /**
  * Advances to an element for later binding instructions.
@@ -38,18 +43,26 @@ import {getLView, getSelectedIndex, getTView, isInCheckNoChangesMode, setSelecte
 export function ɵɵadvance(delta: number = 1): void {
   ngDevMode && assertGreaterThan(delta, 0, 'Can only advance forward');
   selectIndexInternal(
-      getTView(), getLView(), getSelectedIndex() + delta, !!ngDevMode && isInCheckNoChangesMode());
+    getTView(),
+    getLView(),
+    getSelectedIndex() + delta,
+    !!ngDevMode && isInCheckNoChangesMode(),
+  );
 }
 
 export function selectIndexInternal(
-    tView: TView, lView: LView, index: number, checkNoChangesMode: boolean) {
+  tView: TView,
+  lView: LView,
+  index: number,
+  checkNoChangesMode: boolean,
+) {
   ngDevMode && assertIndexInDeclRange(lView[TVIEW], index);
 
   // Flush the initial hooks for elements in the view that have been added up to this point.
   // PERF WARNING: do NOT extract this to a separate function without running benchmarks
   if (!checkNoChangesMode) {
     const hooksInitPhaseCompleted =
-        (lView[FLAGS] & LViewFlags.InitPhaseStateMask) === InitPhaseState.InitPhaseCompleted;
+      (lView[FLAGS] & LViewFlags.InitPhaseStateMask) === InitPhaseState.InitPhaseCompleted;
     if (hooksInitPhaseCompleted) {
       const preOrderCheckHooks = tView.preOrderCheckHooks;
       if (preOrderCheckHooks !== null) {
diff --git a/packages/core/src/render3/instructions/all.ts b/packages/core/src/render3/instructions/all.ts
index 8eee3b76de8bd..d911f3712cf40 100644
--- a/packages/core/src/render3/instructions/all.ts
+++ b/packages/core/src/render3/instructions/all.ts
@@ -37,7 +37,12 @@ export * from './di';
 export * from './di_attr';
 export * from './element';
 export * from './element_container';
-export {ɵgetUnknownElementStrictMode, ɵgetUnknownPropertyStrictMode, ɵsetUnknownElementStrictMode, ɵsetUnknownPropertyStrictMode} from './element_validation';
+export {
+  ɵgetUnknownElementStrictMode,
+  ɵgetUnknownPropertyStrictMode,
+  ɵsetUnknownElementStrictMode,
+  ɵsetUnknownPropertyStrictMode,
+} from './element_validation';
 export * from './get_current_view';
 export * from './host_property';
 export * from './i18n';
diff --git a/packages/core/src/render3/instructions/attribute.ts b/packages/core/src/render3/instructions/attribute.ts
index 3ba7ee3309795..f3b4ddab3652c 100644
--- a/packages/core/src/render3/instructions/attribute.ts
+++ b/packages/core/src/render3/instructions/attribute.ts
@@ -10,8 +10,6 @@ import {SanitizerFn} from '../interfaces/sanitization';
 import {getLView, getSelectedTNode, getTView, nextBindingIndex} from '../state';
 import {elementAttributeInternal, storePropertyBindingMetadata} from './shared';
 
-
-
 /**
  * Updates the value of or removes a bound attribute on an Element.
  *
@@ -26,8 +24,11 @@ import {elementAttributeInternal, storePropertyBindingMetadata} from './shared';
  * @codeGenApi
  */
 export function ɵɵattribute(
-    name: string, value: any, sanitizer?: SanitizerFn|null,
-    namespace?: string): typeof ɵɵattribute {
+  name: string,
+  value: any,
+  sanitizer?: SanitizerFn | null,
+  namespace?: string,
+): typeof ɵɵattribute {
   const lView = getLView();
   const bindingIndex = nextBindingIndex();
   if (bindingUpdated(lView, bindingIndex, value)) {
diff --git a/packages/core/src/render3/instructions/attribute_interpolation.ts b/packages/core/src/render3/instructions/attribute_interpolation.ts
index 7d8a0a8350990..c15491af9468f 100644
--- a/packages/core/src/render3/instructions/attribute_interpolation.ts
+++ b/packages/core/src/render3/instructions/attribute_interpolation.ts
@@ -8,11 +8,19 @@
 import {SanitizerFn} from '../interfaces/sanitization';
 import {getBindingIndex, getLView, getSelectedTNode, getTView} from '../state';
 import {NO_CHANGE} from '../tokens';
-import {interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV} from './interpolation';
+import {
+  interpolation1,
+  interpolation2,
+  interpolation3,
+  interpolation4,
+  interpolation5,
+  interpolation6,
+  interpolation7,
+  interpolation8,
+  interpolationV,
+} from './interpolation';
 import {elementAttributeInternal, storePropertyBindingMetadata} from './shared';
 
-
-
 /**
  *
  * Update an interpolated attribute on an element with single bound value surrounded by text.
@@ -38,16 +46,27 @@ import {elementAttributeInternal, storePropertyBindingMetadata} from './shared';
  * @codeGenApi
  */
 export function ɵɵattributeInterpolate1(
-    attrName: string, prefix: string, v0: any, suffix: string, sanitizer?: SanitizerFn,
-    namespace?: string): typeof ɵɵattributeInterpolate1 {
+  attrName: string,
+  prefix: string,
+  v0: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+  namespace?: string,
+): typeof ɵɵattributeInterpolate1 {
   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);
+      storePropertyBindingMetadata(
+        getTView().data,
+        tNode,
+        'attr.' + attrName,
+        getBindingIndex() - 1,
+        prefix,
+        suffix,
+      );
   }
   return ɵɵattributeInterpolate1;
 }
@@ -79,16 +98,30 @@ export function ɵɵattributeInterpolate1(
  * @codeGenApi
  */
 export function ɵɵattributeInterpolate2(
-    attrName: string, prefix: string, v0: any, i0: string, v1: any, suffix: string,
-    sanitizer?: SanitizerFn, namespace?: string): typeof ɵɵattributeInterpolate2 {
+  attrName: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+  namespace?: string,
+): typeof ɵɵattributeInterpolate2 {
   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);
+      storePropertyBindingMetadata(
+        getTView().data,
+        tNode,
+        'attr.' + attrName,
+        getBindingIndex() - 2,
+        prefix,
+        i0,
+        suffix,
+      );
   }
   return ɵɵattributeInterpolate2;
 }
@@ -123,17 +156,33 @@ export function ɵɵattributeInterpolate2(
  * @codeGenApi
  */
 export function ɵɵattributeInterpolate3(
-    attrName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any,
-    suffix: string, sanitizer?: SanitizerFn, namespace?: string): typeof ɵɵattributeInterpolate3 {
+  attrName: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+  namespace?: string,
+): typeof ɵɵattributeInterpolate3 {
   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);
+      storePropertyBindingMetadata(
+        getTView().data,
+        tNode,
+        'attr.' + attrName,
+        getBindingIndex() - 3,
+        prefix,
+        i0,
+        i1,
+        suffix,
+      );
   }
   return ɵɵattributeInterpolate3;
 }
@@ -170,18 +219,36 @@ export function ɵɵattributeInterpolate3(
  * @codeGenApi
  */
 export function ɵɵattributeInterpolate4(
-    attrName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, suffix: string, sanitizer?: SanitizerFn,
-    namespace?: string): typeof ɵɵattributeInterpolate4 {
+  attrName: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+  namespace?: string,
+): typeof ɵɵattributeInterpolate4 {
   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);
+      storePropertyBindingMetadata(
+        getTView().data,
+        tNode,
+        'attr.' + attrName,
+        getBindingIndex() - 4,
+        prefix,
+        i0,
+        i1,
+        i2,
+        suffix,
+      );
   }
   return ɵɵattributeInterpolate4;
 }
@@ -220,19 +287,52 @@ export function ɵɵattributeInterpolate4(
  * @codeGenApi
  */
 export function ɵɵattributeInterpolate5(
-    attrName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, suffix: string, sanitizer?: SanitizerFn,
-    namespace?: string): typeof ɵɵattributeInterpolate5 {
+  attrName: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+  namespace?: string,
+): typeof ɵɵattributeInterpolate5 {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
+  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);
+      storePropertyBindingMetadata(
+        getTView().data,
+        tNode,
+        'attr.' + attrName,
+        getBindingIndex() - 5,
+        prefix,
+        i0,
+        i1,
+        i2,
+        i3,
+        suffix,
+      );
   }
   return ɵɵattributeInterpolate5;
 }
@@ -273,19 +373,57 @@ export function ɵɵattributeInterpolate5(
  * @codeGenApi
  */
 export function ɵɵattributeInterpolate6(
-    attrName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, i4: string, v5: any, suffix: string, sanitizer?: SanitizerFn,
-    namespace?: string): typeof ɵɵattributeInterpolate6 {
+  attrName: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+  namespace?: string,
+): typeof ɵɵattributeInterpolate6 {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix);
+  const interpolatedValue = interpolation6(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    suffix,
+  );
   if (interpolatedValue !== NO_CHANGE) {
     const tNode = getSelectedTNode();
     elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
     ngDevMode &&
-        storePropertyBindingMetadata(
-            getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 6, prefix, i0, i1, i2,
-            i3, i4, suffix);
+      storePropertyBindingMetadata(
+        getTView().data,
+        tNode,
+        'attr.' + attrName,
+        getBindingIndex() - 6,
+        prefix,
+        i0,
+        i1,
+        i2,
+        i3,
+        i4,
+        suffix,
+      );
   }
   return ɵɵattributeInterpolate6;
 }
@@ -328,19 +466,62 @@ export function ɵɵattributeInterpolate6(
  * @codeGenApi
  */
 export function ɵɵattributeInterpolate7(
-    attrName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string,
-    sanitizer?: SanitizerFn, namespace?: string): typeof ɵɵattributeInterpolate7 {
+  attrName: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  i5: string,
+  v6: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+  namespace?: string,
+): typeof ɵɵattributeInterpolate7 {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix);
+  const interpolatedValue = interpolation7(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    i5,
+    v6,
+    suffix,
+  );
   if (interpolatedValue !== NO_CHANGE) {
     const tNode = getSelectedTNode();
     elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
     ngDevMode &&
-        storePropertyBindingMetadata(
-            getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 7, prefix, i0, i1, i2,
-            i3, i4, i5, suffix);
+      storePropertyBindingMetadata(
+        getTView().data,
+        tNode,
+        'attr.' + attrName,
+        getBindingIndex() - 7,
+        prefix,
+        i0,
+        i1,
+        i2,
+        i3,
+        i4,
+        i5,
+        suffix,
+      );
   }
   return ɵɵattributeInterpolate7;
 }
@@ -385,19 +566,67 @@ export function ɵɵattributeInterpolate7(
  * @codeGenApi
  */
 export function ɵɵattributeInterpolate8(
-    attrName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any,
-    suffix: string, sanitizer?: SanitizerFn, namespace?: string): typeof ɵɵattributeInterpolate8 {
+  attrName: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  i5: string,
+  v6: any,
+  i6: string,
+  v7: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+  namespace?: string,
+): typeof ɵɵattributeInterpolate8 {
   const lView = getLView();
   const interpolatedValue = interpolation8(
-      lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix);
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    i5,
+    v6,
+    i6,
+    v7,
+    suffix,
+  );
   if (interpolatedValue !== NO_CHANGE) {
     const tNode = getSelectedTNode();
     elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
     ngDevMode &&
-        storePropertyBindingMetadata(
-            getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 8, prefix, i0, i1, i2,
-            i3, i4, i5, i6, suffix);
+      storePropertyBindingMetadata(
+        getTView().data,
+        tNode,
+        'attr.' + attrName,
+        getBindingIndex() - 8,
+        prefix,
+        i0,
+        i1,
+        i2,
+        i3,
+        i4,
+        i5,
+        i6,
+        suffix,
+      );
   }
   return ɵɵattributeInterpolate8;
 }
@@ -429,21 +658,28 @@ export function ɵɵattributeInterpolate8(
  * @codeGenApi
  */
 export function ɵɵattributeInterpolateV(
-    attrName: string, values: any[], sanitizer?: SanitizerFn,
-    namespace?: string): typeof ɵɵattributeInterpolateV {
+  attrName: string,
+  values: any[],
+  sanitizer?: SanitizerFn,
+  namespace?: string,
+): typeof ɵɵattributeInterpolateV {
   const lView = getLView();
   const interpolated = interpolationV(lView, values);
   if (interpolated !== NO_CHANGE) {
     const tNode = getSelectedTNode();
     elementAttributeInternal(tNode, lView, attrName, interpolated, sanitizer, namespace);
     if (ngDevMode) {
-      const interpolationInBetween = [values[0]];  // prefix
+      const interpolationInBetween = [values[0]]; // prefix
       for (let i = 2; i < values.length; i += 2) {
         interpolationInBetween.push(values[i]);
       }
       storePropertyBindingMetadata(
-          getTView().data, tNode, 'attr.' + attrName,
-          getBindingIndex() - interpolationInBetween.length + 1, ...interpolationInBetween);
+        getTView().data,
+        tNode,
+        'attr.' + attrName,
+        getBindingIndex() - interpolationInBetween.length + 1,
+        ...interpolationInBetween,
+      );
     }
   }
   return ɵɵattributeInterpolateV;
diff --git a/packages/core/src/render3/instructions/change_detection.ts b/packages/core/src/render3/instructions/change_detection.ts
index 251b9a74e094c..275a47ed63d12 100644
--- a/packages/core/src/render3/instructions/change_detection.ts
+++ b/packages/core/src/render3/instructions/change_detection.ts
@@ -6,21 +6,70 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {consumerAfterComputation, consumerBeforeComputation, consumerPollProducersForChange, ReactiveNode} from '@angular/core/primitives/signals';
+import {
+  consumerAfterComputation,
+  consumerBeforeComputation,
+  consumerPollProducersForChange,
+  ReactiveNode,
+} from '@angular/core/primitives/signals';
 
 import {RuntimeError, RuntimeErrorCode} from '../../errors';
 import {assertDefined, assertEqual} from '../../util/assert';
 import {assertLContainer} from '../assert';
 import {executeCheckHooks, executeInitAndCheckHooks, incrementInitPhaseFlags} from '../hooks';
-import {CONTAINER_HEADER_OFFSET, LContainer, LContainerFlags, MOVED_VIEWS} from '../interfaces/container';
+import {
+  CONTAINER_HEADER_OFFSET,
+  LContainer,
+  LContainerFlags,
+  MOVED_VIEWS,
+} from '../interfaces/container';
 import {ComponentTemplate, RenderFlags} from '../interfaces/definition';
-import {CONTEXT, EFFECTS_TO_SCHEDULE, ENVIRONMENT, FLAGS, InitPhaseState, LView, LViewFlags, PARENT, REACTIVE_TEMPLATE_CONSUMER, TVIEW, TView, TViewType} from '../interfaces/view';
-import {getOrBorrowReactiveLViewConsumer, maybeReturnReactiveLViewConsumer, ReactiveLViewConsumer} from '../reactive_lview_consumer';
-import {enterView, isInCheckNoChangesMode, isRefreshingViews, leaveView, setBindingIndex, setIsInCheckNoChangesMode, setIsRefreshingViews} from '../state';
+import {
+  CONTEXT,
+  EFFECTS_TO_SCHEDULE,
+  ENVIRONMENT,
+  FLAGS,
+  InitPhaseState,
+  LView,
+  LViewFlags,
+  PARENT,
+  REACTIVE_TEMPLATE_CONSUMER,
+  TVIEW,
+  TView,
+  TViewType,
+} from '../interfaces/view';
+import {
+  getOrBorrowReactiveLViewConsumer,
+  maybeReturnReactiveLViewConsumer,
+  ReactiveLViewConsumer,
+} from '../reactive_lview_consumer';
+import {
+  enterView,
+  isInCheckNoChangesMode,
+  isRefreshingViews,
+  leaveView,
+  setBindingIndex,
+  setIsInCheckNoChangesMode,
+  setIsRefreshingViews,
+} from '../state';
 import {getFirstLContainer, getNextLContainer} from '../util/view_traversal_utils';
-import {getComponentLViewByIndex, isCreationMode, markAncestorsForTraversal, markViewForRefresh, requiresRefreshOrTraversal, resetPreOrderHookFlags, viewAttachedToChangeDetector} from '../util/view_utils';
-
-import {executeTemplate, executeViewQueryFn, handleError, processHostBindingOpCodes, refreshContentQueries} from './shared';
+import {
+  getComponentLViewByIndex,
+  isCreationMode,
+  markAncestorsForTraversal,
+  markViewForRefresh,
+  requiresRefreshOrTraversal,
+  resetPreOrderHookFlags,
+  viewAttachedToChangeDetector,
+} from '../util/view_utils';
+
+import {
+  executeTemplate,
+  executeViewQueryFn,
+  handleError,
+  processHostBindingOpCodes,
+  refreshContentQueries,
+} from './shared';
 
 /**
  * The maximum number of times the change detection traversal will rerun before throwing an error.
@@ -28,7 +77,10 @@ import {executeTemplate, executeViewQueryFn, handleError, processHostBindingOpCo
 export const MAXIMUM_REFRESH_RERUNS = 100;
 
 export function detectChangesInternal(
-    lView: LView, notifyErrorHandler = true, mode = ChangeDetectionMode.Global) {
+  lView: LView,
+  notifyErrorHandler = true,
+  mode = ChangeDetectionMode.Global,
+) {
   const environment = lView[ENVIRONMENT];
   const rendererFactory = environment.rendererFactory;
 
@@ -73,11 +125,12 @@ function detectChangesInViewWhileDirty(lView: LView, mode: ChangeDetectionMode)
     while (requiresRefreshOrTraversal(lView)) {
       if (retries === MAXIMUM_REFRESH_RERUNS) {
         throw new RuntimeError(
-            RuntimeErrorCode.INFINITE_CHANGE_DETECTION,
-            ngDevMode &&
-                'Infinite change detection while trying to refresh views. ' +
-                    'There may be components which each cause the other to require a refresh, ' +
-                    'causing an infinite loop.');
+          RuntimeErrorCode.INFINITE_CHANGE_DETECTION,
+          ngDevMode &&
+            'Infinite change detection while trying to refresh views. ' +
+              'There may be components which each cause the other to require a refresh, ' +
+              'causing an infinite loop.',
+        );
       }
       retries++;
       // Even if this view is detached, we still detect changes in targeted mode because this was
@@ -99,7 +152,6 @@ export function checkNoChangesInternal(lView: LView, notifyErrorHandler = true)
   }
 }
 
-
 /**
  * Different modes of traversing the logical view tree during change detection.
  *
@@ -129,7 +181,11 @@ export const enum ChangeDetectionMode {
  */
 
 export function refreshView<T>(
-    tView: TView, lView: LView, templateFn: ComponentTemplate<{}>|null, context: T) {
+  tView: TView,
+  lView: LView,
+  templateFn: ComponentTemplate<{}> | null,
+  context: T,
+) {
   ngDevMode && assertEqual(isCreationMode(lView), false, 'Should be run in update mode');
   const flags = lView[FLAGS];
   if ((flags & LViewFlags.Destroyed) === LViewFlags.Destroyed) return;
@@ -140,13 +196,12 @@ export function refreshView<T>(
 
   !isInCheckNoChangesPass && lView[ENVIRONMENT].inlineEffectRunner?.flush();
 
-
   // Start component reactive context
   // - We might already be in a reactive context if this is an embedded view of the host.
   // - We might be descending into a view that needs a consumer.
   enterView(lView);
-  let prevConsumer: ReactiveNode|null = null;
-  let currentConsumer: ReactiveLViewConsumer|null = null;
+  let prevConsumer: ReactiveNode | null = null;
+  let currentConsumer: ReactiveLViewConsumer | null = null;
   if (!isInCheckNoChangesPass && viewShouldHaveReactiveConsumer(tView)) {
     currentConsumer = getOrBorrowReactiveLViewConsumer(lView);
     prevConsumer = consumerBeforeComputation(currentConsumer);
@@ -161,7 +216,7 @@ export function refreshView<T>(
     }
 
     const hooksInitPhaseCompleted =
-        (flags & LViewFlags.InitPhaseStateMask) === InitPhaseState.InitPhaseCompleted;
+      (flags & LViewFlags.InitPhaseStateMask) === InitPhaseState.InitPhaseCompleted;
 
     // execute pre-order hooks (OnInit, OnChanges, DoCheck)
     // PERF WARNING: do NOT extract this to a separate function without running benchmarks
@@ -203,7 +258,10 @@ export function refreshView<T>(
         const contentHooks = tView.contentHooks;
         if (contentHooks !== null) {
           executeInitAndCheckHooks(
-              lView, contentHooks, InitPhaseState.AfterContentInitHooksToBeRun);
+            lView,
+            contentHooks,
+            InitPhaseState.AfterContentInitHooksToBeRun,
+          );
         }
         incrementInitPhaseFlags(lView, InitPhaseState.AfterContentInitHooksToBeRun);
       }
@@ -310,8 +368,11 @@ function viewShouldHaveReactiveConsumer(tView: TView) {
  * them by executing an associated template function.
  */
 function detectChangesInEmbeddedViews(lView: LView, mode: ChangeDetectionMode) {
-  for (let lContainer = getFirstLContainer(lView); lContainer !== null;
-       lContainer = getNextLContainer(lContainer)) {
+  for (
+    let lContainer = getFirstLContainer(lView);
+    lContainer !== null;
+    lContainer = getNextLContainer(lContainer)
+  ) {
     for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
       const embeddedLView = lContainer[i];
       detectChangesInViewIfAttached(embeddedLView, mode);
@@ -325,8 +386,11 @@ function detectChangesInEmbeddedViews(lView: LView, mode: ChangeDetectionMode) {
  * @param lView The `LView` that may have transplanted views.
  */
 function markTransplantedViewsForRefresh(lView: LView) {
-  for (let lContainer = getFirstLContainer(lView); lContainer !== null;
-       lContainer = getNextLContainer(lContainer)) {
+  for (
+    let lContainer = getFirstLContainer(lView);
+    lContainer !== null;
+    lContainer = getNextLContainer(lContainer)
+  ) {
     if (!(lContainer[FLAGS] & LContainerFlags.HasTransplantedViews)) continue;
 
     const movedViews = lContainer[MOVED_VIEWS]!;
@@ -345,7 +409,10 @@ function markTransplantedViewsForRefresh(lView: LView) {
  * @param componentHostIdx  Element index in LView[] (adjusted for HEADER_OFFSET)
  */
 function detectChangesInComponent(
-    hostLView: LView, componentHostIdx: number, mode: ChangeDetectionMode): void {
+  hostLView: LView,
+  componentHostIdx: number,
+  mode: ChangeDetectionMode,
+): void {
   ngDevMode && assertEqual(isCreationMode(hostLView), false, 'Should be run in update mode');
   const componentView = getComponentLViewByIndex(componentHostIdx, hostLView);
   detectChangesInViewIfAttached(componentView, mode);
@@ -380,8 +447,9 @@ function detectChangesInView(lView: LView, mode: ChangeDetectionMode) {
   const consumer = lView[REACTIVE_TEMPLATE_CONSUMER];
 
   // Refresh CheckAlways views in Global mode.
-  let shouldRefreshView: boolean =
-      !!(mode === ChangeDetectionMode.Global && flags & LViewFlags.CheckAlways);
+  let shouldRefreshView: boolean = !!(
+    mode === ChangeDetectionMode.Global && flags & LViewFlags.CheckAlways
+  );
 
   // Refresh Dirty views in Global mode, as long as we're not in checkNoChanges.
   // CheckNoChanges never worked with `OnPush` components because the `Dirty` flag was
@@ -390,7 +458,10 @@ function detectChangesInView(lView: LView, mode: ChangeDetectionMode) {
   // before the CheckNoChanges pass. We don't want existing errors that are hidden by the
   // current CheckNoChanges bug to surface when making unrelated changes.
   shouldRefreshView ||= !!(
-      flags & LViewFlags.Dirty && mode === ChangeDetectionMode.Global && !isInCheckNoChangesPass);
+    flags & LViewFlags.Dirty &&
+    mode === ChangeDetectionMode.Global &&
+    !isInCheckNoChangesPass
+  );
 
   // Always refresh views marked for refresh, regardless of mode.
   shouldRefreshView ||= !!(flags & LViewFlags.RefreshView);
@@ -418,7 +489,10 @@ function detectChangesInView(lView: LView, mode: ChangeDetectionMode) {
 
 /** Refreshes child components in the current view (update mode). */
 function detectChangesInChildComponents(
-    hostLView: LView, components: number[], mode: ChangeDetectionMode): void {
+  hostLView: LView,
+  components: number[],
+  mode: ChangeDetectionMode,
+): void {
   for (let i = 0; i < components.length; i++) {
     detectChangesInComponent(hostLView, components[i], mode);
   }
diff --git a/packages/core/src/render3/instructions/class_map_interpolation.ts b/packages/core/src/render3/instructions/class_map_interpolation.ts
index 598da87a121b2..48dada1972f37 100644
--- a/packages/core/src/render3/instructions/class_map_interpolation.ts
+++ b/packages/core/src/render3/instructions/class_map_interpolation.ts
@@ -8,11 +8,19 @@
 
 import {keyValueArraySet} from '../../util/array_utils';
 import {getLView} from '../state';
-import {interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV} from './interpolation';
+import {
+  interpolation1,
+  interpolation2,
+  interpolation3,
+  interpolation4,
+  interpolation5,
+  interpolation6,
+  interpolation7,
+  interpolation8,
+  interpolationV,
+} from './interpolation';
 import {checkStylingMap, classStringParser} from './styling';
 
-
-
 /**
  *
  * Update an interpolated class on an element with single bound value surrounded by text.
@@ -64,7 +72,12 @@ export function ɵɵclassMapInterpolate1(prefix: string, v0: any, suffix: string
  * @codeGenApi
  */
 export function ɵɵclassMapInterpolate2(
-    prefix: string, v0: any, i0: string, v1: any, suffix: string): void {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  suffix: string,
+): void {
   const lView = getLView();
   const interpolatedValue = interpolation2(lView, prefix, v0, i0, v1, suffix);
   checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true);
@@ -97,7 +110,14 @@ export function ɵɵclassMapInterpolate2(
  * @codeGenApi
  */
 export function ɵɵclassMapInterpolate3(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, suffix: string): void {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  suffix: string,
+): void {
   const lView = getLView();
   const interpolatedValue = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix);
   checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true);
@@ -132,8 +152,16 @@ export function ɵɵclassMapInterpolate3(
  * @codeGenApi
  */
 export function ɵɵclassMapInterpolate4(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    suffix: string): void {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  suffix: string,
+): void {
   const lView = getLView();
   const interpolatedValue = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix);
   checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true);
@@ -170,11 +198,33 @@ export function ɵɵclassMapInterpolate4(
  * @codeGenApi
  */
 export function ɵɵclassMapInterpolate5(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    i3: string, v4: any, suffix: string): void {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  suffix: string,
+): void {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
+  const interpolatedValue = interpolation5(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    suffix,
+  );
   checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true);
 }
 
@@ -211,11 +261,37 @@ export function ɵɵclassMapInterpolate5(
  * @codeGenApi
  */
 export function ɵɵclassMapInterpolate6(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    i3: string, v4: any, i4: string, v5: any, suffix: string): void {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  suffix: string,
+): void {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix);
+  const interpolatedValue = interpolation6(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    suffix,
+  );
   checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true);
 }
 
@@ -254,11 +330,41 @@ export function ɵɵclassMapInterpolate6(
  * @codeGenApi
  */
 export function ɵɵclassMapInterpolate7(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string): void {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  i5: string,
+  v6: any,
+  suffix: string,
+): void {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix);
+  const interpolatedValue = interpolation7(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    i5,
+    v6,
+    suffix,
+  );
   checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true);
 }
 
@@ -299,12 +405,45 @@ export function ɵɵclassMapInterpolate7(
  * @codeGenApi
  */
 export function ɵɵclassMapInterpolate8(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any,
-    suffix: string): void {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  i5: string,
+  v6: any,
+  i6: string,
+  v7: any,
+  suffix: string,
+): void {
   const lView = getLView();
   const interpolatedValue = interpolation8(
-      lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix);
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    i5,
+    v6,
+    i6,
+    v7,
+    suffix,
+  );
   checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true);
 }
 
diff --git a/packages/core/src/render3/instructions/component_instance.ts b/packages/core/src/render3/instructions/component_instance.ts
index bc449b53a7de9..ace1d3664330a 100644
--- a/packages/core/src/render3/instructions/component_instance.ts
+++ b/packages/core/src/render3/instructions/component_instance.ts
@@ -10,7 +10,6 @@ import {assertDefined} from '../../util/assert';
 import {CONTEXT, DECLARATION_COMPONENT_VIEW} from '../interfaces/view';
 import {getLView} from '../state';
 
-
 /**
  * Instruction that returns the component instance in which the current instruction is executing.
  * This is a constant-time version of `nextContent` for the case where we know that we need the
diff --git a/packages/core/src/render3/instructions/control_flow.ts b/packages/core/src/render3/instructions/control_flow.ts
index 1710a5e6c4310..b5523d6c18e38 100644
--- a/packages/core/src/render3/instructions/control_flow.ts
+++ b/packages/core/src/render3/instructions/control_flow.ts
@@ -19,13 +19,27 @@ import {bindingUpdated} from '../bindings';
 import {CONTAINER_HEADER_OFFSET, LContainer} from '../interfaces/container';
 import {ComponentTemplate} from '../interfaces/definition';
 import {TNode} from '../interfaces/node';
-import {CONTEXT, DECLARATION_COMPONENT_VIEW, HEADER_OFFSET, HYDRATION, LView, TVIEW, TView} from '../interfaces/view';
+import {
+  CONTEXT,
+  DECLARATION_COMPONENT_VIEW,
+  HEADER_OFFSET,
+  HYDRATION,
+  LView,
+  TVIEW,
+  TView,
+} from '../interfaces/view';
 import {LiveCollection, reconcile} from '../list_reconciliation';
 import {destroyLView, detachView} from '../node_manipulation';
 import {getLView, getSelectedIndex, getTView, nextBindingIndex} from '../state';
 import {NO_CHANGE} from '../tokens';
 import {getConstant, getTNode} from '../util/view_utils';
-import {addLViewToLContainer, createAndRenderEmbeddedLView, getLViewFromLContainer, removeLViewFromLContainer, shouldAddViewToDom} from '../view_manipulation';
+import {
+  addLViewToLContainer,
+  createAndRenderEmbeddedLView,
+  getLViewFromLContainer,
+  removeLViewFromLContainer,
+  shouldAddViewToDom,
+} from '../view_manipulation';
 
 import {declareTemplate} from './template';
 
@@ -45,10 +59,11 @@ export function ɵɵconditional<T>(matchingTemplateIndex: number, contextValue?:
   const hostLView = getLView();
   const bindingIndex = nextBindingIndex();
   const prevMatchingTemplateIndex: number =
-      hostLView[bindingIndex] !== NO_CHANGE ? hostLView[bindingIndex] : -1;
-  const prevContainer = prevMatchingTemplateIndex !== -1 ?
-      getLContainer(hostLView, HEADER_OFFSET + prevMatchingTemplateIndex) :
-      undefined;
+    hostLView[bindingIndex] !== NO_CHANGE ? hostLView[bindingIndex] : -1;
+  const prevContainer =
+    prevMatchingTemplateIndex !== -1
+      ? getLContainer(hostLView, HEADER_OFFSET + prevMatchingTemplateIndex)
+      : undefined;
   const viewInContainerIdx = 0;
 
   if (bindingUpdated(hostLView, bindingIndex, matchingTemplateIndex)) {
@@ -67,14 +82,20 @@ export function ɵɵconditional<T>(matchingTemplateIndex: number, contextValue?:
         const nextContainer = getLContainer(hostLView, nextLContainerIndex);
         const templateTNode = getExistingTNode(hostLView[TVIEW], nextLContainerIndex);
 
-        const dehydratedView =
-            findMatchingDehydratedView(nextContainer, templateTNode.tView!.ssrId);
-        const embeddedLView =
-            createAndRenderEmbeddedLView(hostLView, templateTNode, contextValue, {dehydratedView});
+        const dehydratedView = findMatchingDehydratedView(
+          nextContainer,
+          templateTNode.tView!.ssrId,
+        );
+        const embeddedLView = createAndRenderEmbeddedLView(hostLView, templateTNode, contextValue, {
+          dehydratedView,
+        });
 
         addLViewToLContainer(
-            nextContainer, embeddedLView, viewInContainerIdx,
-            shouldAddViewToDom(templateTNode, dehydratedView));
+          nextContainer,
+          embeddedLView,
+          viewInContainerIdx,
+          shouldAddViewToDom(templateTNode, dehydratedView),
+        );
       }
     } finally {
       setActiveConsumer(prevConsumer);
@@ -82,7 +103,7 @@ export function ɵɵconditional<T>(matchingTemplateIndex: number, contextValue?:
   } else if (prevContainer !== undefined) {
     // We might keep displaying the same template but the actual value of the expression could have
     // changed - re-bind in context.
-    const lView = getLViewFromLContainer<T|undefined>(prevContainer, viewInContainerIdx);
+    const lView = getLViewFromLContainer<T | undefined>(prevContainer, viewInContainerIdx);
     if (lView !== undefined) {
       lView[CONTEXT] = contextValue;
     }
@@ -90,7 +111,11 @@ export function ɵɵconditional<T>(matchingTemplateIndex: number, contextValue?:
 }
 
 export class RepeaterContext<T> {
-  constructor(private lContainer: LContainer, public $implicit: T, public $index: number) {}
+  constructor(
+    private lContainer: LContainer,
+    public $implicit: T,
+    public $index: number,
+  ) {}
 
   get $count(): number {
     return this.lContainer.length - CONTAINER_HEADER_OFFSET;
@@ -122,8 +147,10 @@ export function ɵɵrepeaterTrackByIdentity<T>(_: number, value: T) {
 
 class RepeaterMetadata {
   constructor(
-      public hasEmptyBlock: boolean, public trackByFn: TrackByFunction<unknown>,
-      public liveCollection?: LiveCollectionLContainerImpl) {}
+    public hasEmptyBlock: boolean,
+    public trackByFn: TrackByFunction<unknown>,
+    public liveCollection?: LiveCollectionLContainerImpl,
+  ) {}
 }
 
 /**
@@ -153,42 +180,67 @@ class RepeaterMetadata {
  * @codeGenApi
  */
 export function ɵɵrepeaterCreate(
-    index: number, templateFn: ComponentTemplate<unknown>, decls: number, vars: number,
-    tagName: string|null, attrsIndex: number|null, trackByFn: TrackByFunction<unknown>,
-    trackByUsesComponentInstance?: boolean, emptyTemplateFn?: ComponentTemplate<unknown>,
-    emptyDecls?: number, emptyVars?: number, emptyTagName?: string|null,
-    emptyAttrsIndex?: number|null): void {
+  index: number,
+  templateFn: ComponentTemplate<unknown>,
+  decls: number,
+  vars: number,
+  tagName: string | null,
+  attrsIndex: number | null,
+  trackByFn: TrackByFunction<unknown>,
+  trackByUsesComponentInstance?: boolean,
+  emptyTemplateFn?: ComponentTemplate<unknown>,
+  emptyDecls?: number,
+  emptyVars?: number,
+  emptyTagName?: string | null,
+  emptyAttrsIndex?: number | null,
+): void {
   performanceMarkFeature('NgControlFlow');
 
   ngDevMode &&
-      assertFunction(
-          trackByFn, `A track expression must be a function, was ${typeof trackByFn} instead.`);
+    assertFunction(
+      trackByFn,
+      `A track expression must be a function, was ${typeof trackByFn} instead.`,
+    );
 
   const lView = getLView();
   const tView = getTView();
   const hasEmptyBlock = emptyTemplateFn !== undefined;
   const hostLView = getLView();
-  const boundTrackBy = trackByUsesComponentInstance ?
-      // We only want to bind when necessary, because it produces a
+  const boundTrackBy = trackByUsesComponentInstance
+    ? // We only want to bind when necessary, because it produces a
       // new function. For pure functions it's not necessary.
-      trackByFn.bind(hostLView[DECLARATION_COMPONENT_VIEW][CONTEXT]) :
-      trackByFn;
+      trackByFn.bind(hostLView[DECLARATION_COMPONENT_VIEW][CONTEXT])
+    : trackByFn;
   const metadata = new RepeaterMetadata(hasEmptyBlock, boundTrackBy);
   hostLView[HEADER_OFFSET + index] = metadata;
 
   declareTemplate(
-      lView, tView, index + 1, templateFn, decls, vars, tagName,
-      getConstant(tView.consts, attrsIndex));
+    lView,
+    tView,
+    index + 1,
+    templateFn,
+    decls,
+    vars,
+    tagName,
+    getConstant(tView.consts, attrsIndex),
+  );
 
   if (hasEmptyBlock) {
     ngDevMode &&
-        assertDefined(emptyDecls, 'Missing number of declarations for the empty repeater block.');
+      assertDefined(emptyDecls, 'Missing number of declarations for the empty repeater block.');
     ngDevMode &&
-        assertDefined(emptyVars, 'Missing number of bindings for the empty repeater block.');
+      assertDefined(emptyVars, 'Missing number of bindings for the empty repeater block.');
 
     declareTemplate(
-        lView, tView, index + 2, emptyTemplateFn, emptyDecls!, emptyVars!, emptyTagName,
-        getConstant(tView.consts, emptyAttrsIndex));
+      lView,
+      tView,
+      index + 2,
+      emptyTemplateFn,
+      emptyDecls!,
+      emptyVars!,
+      emptyTagName,
+      getConstant(tView.consts, emptyAttrsIndex),
+    );
   }
 }
 
@@ -226,8 +278,10 @@ class OperationsCounter {
   }
 }
 
-class LiveCollectionLContainerImpl extends
-    LiveCollection<LView<RepeaterContext<unknown>>, unknown> {
+class LiveCollectionLContainerImpl extends LiveCollection<
+  LView<RepeaterContext<unknown>>,
+  unknown
+> {
   operationsCounter = ngDevMode ? new OperationsCounter() : undefined;
 
   /**
@@ -237,7 +291,10 @@ class LiveCollectionLContainerImpl extends
  */
   private needsIndexUpdate = false;
   constructor(
-      private lContainer: LContainer, private hostLView: LView, private templateTNode: TNode) {
+    private lContainer: LContainer,
+    private hostLView: LView,
+    private templateTNode: TNode,
+  ) {
     super();
   }
 
@@ -251,18 +308,27 @@ class LiveCollectionLContainerImpl extends
     const dehydratedView = lView[HYDRATION] as DehydratedContainerView;
     this.needsIndexUpdate ||= index !== this.length;
     addLViewToLContainer(
-        this.lContainer, lView, index, shouldAddViewToDom(this.templateTNode, dehydratedView));
+      this.lContainer,
+      lView,
+      index,
+      shouldAddViewToDom(this.templateTNode, dehydratedView),
+    );
   }
   override detach(index: number): LView<RepeaterContext<unknown>> {
     this.needsIndexUpdate ||= index !== this.length - 1;
     return detachExistingView<RepeaterContext<unknown>>(this.lContainer, index);
   }
   override create(index: number, value: unknown): LView<RepeaterContext<unknown>> {
-    const dehydratedView =
-        findMatchingDehydratedView(this.lContainer, this.templateTNode.tView!.ssrId);
+    const dehydratedView = findMatchingDehydratedView(
+      this.lContainer,
+      this.templateTNode.tView!.ssrId,
+    );
     const embeddedLView = createAndRenderEmbeddedLView(
-        this.hostLView, this.templateTNode, new RepeaterContext(this.lContainer, value, index),
-        {dehydratedView});
+      this.hostLView,
+      this.templateTNode,
+      new RepeaterContext(this.lContainer, value, index),
+      {dehydratedView},
+    );
     this.operationsCounter?.recordCreate();
 
     return embeddedLView;
@@ -300,7 +366,7 @@ class LiveCollectionLContainerImpl extends
  * @param collection - the collection instance to be checked for changes
  * @codeGenApi
  */
-export function ɵɵrepeater(collection: Iterable<unknown>|undefined|null): void {
+export function ɵɵrepeater(collection: Iterable<unknown> | undefined | null): void {
   const prevConsumer = setActiveConsumer(null);
   const metadataSlotIdx = getSelectedIndex();
   try {
@@ -312,8 +378,11 @@ export function ɵɵrepeater(collection: Iterable<unknown>|undefined|null): void
 
     if (metadata.liveCollection === undefined) {
       const itemTemplateTNode = getExistingTNode(hostTView, containerIndex);
-      metadata.liveCollection =
-          new LiveCollectionLContainerImpl(lContainer, hostLView, itemTemplateTNode);
+      metadata.liveCollection = new LiveCollectionLContainerImpl(
+        lContainer,
+        hostLView,
+        itemTemplateTNode,
+      );
     } else {
       metadata.liveCollection.reset();
     }
@@ -325,15 +394,18 @@ export function ɵɵrepeater(collection: Iterable<unknown>|undefined|null): void
     // reconciliation pass. Note that this warning might be "overreacting" and report cases where
     // the collection re-creation is the intended behavior. Still, the assumption is that most of
     // the time it is undesired.
-    if (ngDevMode && metadata.trackByFn === ɵɵrepeaterTrackByIdentity &&
-        liveCollection.operationsCounter?.wasReCreated(liveCollection.length) &&
-        isViewExpensiveToRecreate(getExistingLViewFromLContainer(lContainer, 0))) {
+    if (
+      ngDevMode &&
+      metadata.trackByFn === ɵɵrepeaterTrackByIdentity &&
+      liveCollection.operationsCounter?.wasReCreated(liveCollection.length) &&
+      isViewExpensiveToRecreate(getExistingLViewFromLContainer(lContainer, 0))
+    ) {
       const message = formatRuntimeError(
-          RuntimeErrorCode.LOOP_TRACK_RECREATE,
-          `The configured tracking expression (track by identity) caused re-creation of the entire collection of size ${
-              liveCollection.length}. ` +
-              'This is an expensive operation requiring destruction and subsequent creation of DOM nodes, directives, components etc. ' +
-              'Please review the "track expression" and make sure that it uniquely identifies items in a collection.');
+        RuntimeErrorCode.LOOP_TRACK_RECREATE,
+        `The configured tracking expression (track by identity) caused re-creation of the entire collection of size ${liveCollection.length}. ` +
+          'This is an expensive operation requiring destruction and subsequent creation of DOM nodes, directives, components etc. ' +
+          'Please review the "track expression" and make sure that it uniquely identifies items in a collection.',
+      );
       console.warn(message);
     }
 
@@ -349,13 +421,22 @@ export function ɵɵrepeater(collection: Iterable<unknown>|undefined|null): void
         const lContainerForEmpty = getLContainer(hostLView, emptyTemplateIndex);
         if (isCollectionEmpty) {
           const emptyTemplateTNode = getExistingTNode(hostTView, emptyTemplateIndex);
-          const dehydratedView =
-              findMatchingDehydratedView(lContainerForEmpty, emptyTemplateTNode.tView!.ssrId);
+          const dehydratedView = findMatchingDehydratedView(
+            lContainerForEmpty,
+            emptyTemplateTNode.tView!.ssrId,
+          );
           const embeddedLView = createAndRenderEmbeddedLView(
-              hostLView, emptyTemplateTNode, undefined, {dehydratedView});
+            hostLView,
+            emptyTemplateTNode,
+            undefined,
+            {dehydratedView},
+          );
           addLViewToLContainer(
-              lContainerForEmpty, embeddedLView, 0,
-              shouldAddViewToDom(emptyTemplateTNode, dehydratedView));
+            lContainerForEmpty,
+            embeddedLView,
+            0,
+            shouldAddViewToDom(emptyTemplateTNode, dehydratedView),
+          );
         } else {
           removeLViewFromLContainer(lContainerForEmpty, 0);
         }
diff --git a/packages/core/src/render3/instructions/di.ts b/packages/core/src/render3/instructions/di.ts
index 81870eeb1d8cc..a1577ac503b29 100644
--- a/packages/core/src/render3/instructions/di.ts
+++ b/packages/core/src/render3/instructions/di.ts
@@ -41,7 +41,10 @@ import {getCurrentTNode, getLView} from '../state';
  */
 export function ɵɵdirectiveInject<T>(token: ProviderToken<T>): T;
 export function ɵɵdirectiveInject<T>(token: ProviderToken<T>, flags: InjectFlags): T;
-export function ɵɵdirectiveInject<T>(token: ProviderToken<T>, flags = InjectFlags.Default): T|null {
+export function ɵɵdirectiveInject<T>(
+  token: ProviderToken<T>,
+  flags = InjectFlags.Default,
+): T | null {
   const lView = getLView();
   // Fall back to inject() if view hasn't been created. This situation can happen in tests
   // if inject utilities are used before bootstrapping.
@@ -51,8 +54,12 @@ export function ɵɵdirectiveInject<T>(token: ProviderToken<T>, flags = InjectFl
     return ɵɵinject(token, flags);
   }
   const tNode = getCurrentTNode();
-  const value =
-      getOrCreateInjectable<T>(tNode as TDirectiveHostNode, lView, resolveForwardRef(token), flags);
+  const value = getOrCreateInjectable<T>(
+    tNode as TDirectiveHostNode,
+    lView,
+    resolveForwardRef(token),
+    flags,
+  );
   ngDevMode && emitInjectEvent(token as Type<unknown>, value, flags);
   return value;
 }
@@ -70,7 +77,8 @@ export function ɵɵdirectiveInject<T>(token: ProviderToken<T>, flags = InjectFl
  * @codeGenApi
  */
 export function ɵɵinvalidFactory(): never {
-  const msg =
-      ngDevMode ? `This constructor was not compatible with Dependency Injection.` : 'invalid';
+  const msg = ngDevMode
+    ? `This constructor was not compatible with Dependency Injection.`
+    : 'invalid';
   throw new Error(msg);
 }
diff --git a/packages/core/src/render3/instructions/di_attr.ts b/packages/core/src/render3/instructions/di_attr.ts
index cbaaf1f3f1a36..0f2e2b969b5b0 100644
--- a/packages/core/src/render3/instructions/di_attr.ts
+++ b/packages/core/src/render3/instructions/di_attr.ts
@@ -13,6 +13,6 @@ import {getCurrentTNode} from '../state';
  *
  * @codeGenApi
  */
-export function ɵɵinjectAttribute(attrNameToInject: string): string|null {
+export function ɵɵinjectAttribute(attrNameToInject: string): string | null {
   return injectAttributeImpl(getCurrentTNode()!, attrNameToInject);
 }
diff --git a/packages/core/src/render3/instructions/element.ts b/packages/core/src/render3/instructions/element.ts
index 40c974b65ae5f..3a8fba2a28456 100644
--- a/packages/core/src/render3/instructions/element.ts
+++ b/packages/core/src/render3/instructions/element.ts
@@ -6,34 +6,88 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {invalidSkipHydrationHost, validateMatchingNode, validateNodeExists} from '../../hydration/error_handling';
+import {
+  invalidSkipHydrationHost,
+  validateMatchingNode,
+  validateNodeExists,
+} from '../../hydration/error_handling';
 import {locateNextRNode} from '../../hydration/node_lookup_utils';
-import {hasSkipHydrationAttrOnRElement, hasSkipHydrationAttrOnTNode} from '../../hydration/skip_hydration';
-import {getSerializedContainerViews, isDisconnectedNode, markRNodeAsClaimedByHydration, markRNodeAsSkippedByHydration, setSegmentHead} from '../../hydration/utils';
+import {
+  hasSkipHydrationAttrOnRElement,
+  hasSkipHydrationAttrOnTNode,
+} from '../../hydration/skip_hydration';
+import {
+  getSerializedContainerViews,
+  isDisconnectedNode,
+  markRNodeAsClaimedByHydration,
+  markRNodeAsSkippedByHydration,
+  setSegmentHead,
+} from '../../hydration/utils';
 import {isDetachedByI18n} from '../../i18n/utils';
 import {assertDefined, assertEqual, assertIndexInRange} from '../../util/assert';
 import {assertFirstCreatePass, assertHasParent} from '../assert';
 import {attachPatchData} from '../context_discovery';
 import {registerPostOrderHooks} from '../hooks';
-import {hasClassInput, hasStyleInput, TAttributes, TElementNode, TNode, TNodeFlags, TNodeType} from '../interfaces/node';
+import {
+  hasClassInput,
+  hasStyleInput,
+  TAttributes,
+  TElementNode,
+  TNode,
+  TNodeFlags,
+  TNodeType,
+} from '../interfaces/node';
 import {Renderer} from '../interfaces/renderer';
 import {RElement} from '../interfaces/renderer_dom';
 import {isComponentHost, isContentQueryHost, isDirectiveHost} from '../interfaces/type_checks';
 import {HEADER_OFFSET, HYDRATION, LView, RENDERER, TView} from '../interfaces/view';
 import {assertTNodeType} from '../node_assert';
-import {appendChild, clearElementContents, createElementNode, setupStaticAttributes} from '../node_manipulation';
-import {decreaseElementDepthCount, enterSkipHydrationBlock, getBindingIndex, getCurrentTNode, getElementDepthCount, getLView, getNamespace, getTView, increaseElementDepthCount, isCurrentTNodeParent, isInSkipHydrationBlock, isSkipHydrationRootTNode, lastNodeWasCreated, leaveSkipHydrationBlock, setCurrentTNode, setCurrentTNodeAsNotParent, wasLastNodeCreated} from '../state';
+import {
+  appendChild,
+  clearElementContents,
+  createElementNode,
+  setupStaticAttributes,
+} from '../node_manipulation';
+import {
+  decreaseElementDepthCount,
+  enterSkipHydrationBlock,
+  getBindingIndex,
+  getCurrentTNode,
+  getElementDepthCount,
+  getLView,
+  getNamespace,
+  getTView,
+  increaseElementDepthCount,
+  isCurrentTNodeParent,
+  isInSkipHydrationBlock,
+  isSkipHydrationRootTNode,
+  lastNodeWasCreated,
+  leaveSkipHydrationBlock,
+  setCurrentTNode,
+  setCurrentTNodeAsNotParent,
+  wasLastNodeCreated,
+} from '../state';
 import {computeStaticStyling} from '../styling/static_styling';
 import {getConstant} from '../util/view_utils';
 
 import {validateElementIsKnown} from './element_validation';
 import {setDirectiveInputsWhichShadowsStyling} from './property';
-import {createDirectivesInstances, executeContentQueries, getOrCreateTNode, resolveDirectives, saveResolvedLocalsInData} from './shared';
-
+import {
+  createDirectivesInstances,
+  executeContentQueries,
+  getOrCreateTNode,
+  resolveDirectives,
+  saveResolvedLocalsInData,
+} from './shared';
 
 function elementStartFirstCreatePass(
-    index: number, tView: TView, lView: LView, name: string, attrsIndex?: number|null,
-    localRefsIndex?: number): TElementNode {
+  index: number,
+  tView: TView,
+  lView: LView,
+  name: string,
+  attrsIndex?: number | null,
+  localRefsIndex?: number,
+): TElementNode {
   ngDevMode && assertFirstCreatePass(tView);
   ngDevMode && ngDevMode.firstCreatePass++;
 
@@ -74,22 +128,27 @@ function elementStartFirstCreatePass(
  * @codeGenApi
  */
 export function ɵɵelementStart(
-    index: number, name: string, attrsIndex?: number|null,
-    localRefsIndex?: number): typeof ɵɵelementStart {
+  index: number,
+  name: string,
+  attrsIndex?: number | null,
+  localRefsIndex?: number,
+): typeof ɵɵelementStart {
   const lView = getLView();
   const tView = getTView();
   const adjustedIndex = HEADER_OFFSET + index;
 
   ngDevMode &&
-      assertEqual(
-          getBindingIndex(), tView.bindingStartIndex,
-          'elements should be created before any bindings');
+    assertEqual(
+      getBindingIndex(),
+      tView.bindingStartIndex,
+      'elements should be created before any bindings',
+    );
   ngDevMode && assertIndexInRange(lView, adjustedIndex);
 
   const renderer = lView[RENDERER];
-  const tNode = tView.firstCreatePass ?
-      elementStartFirstCreatePass(adjustedIndex, tView, lView, name, attrsIndex, localRefsIndex) :
-      tView.data[adjustedIndex] as TElementNode;
+  const tNode = tView.firstCreatePass
+    ? elementStartFirstCreatePass(adjustedIndex, tView, lView, name, attrsIndex, localRefsIndex)
+    : (tView.data[adjustedIndex] as TElementNode);
 
   const native = _locateOrCreateElementNode(tView, lView, tNode, renderer, name, index);
   lView[adjustedIndex] = native;
@@ -183,29 +242,46 @@ export function ɵɵelementEnd(): typeof ɵɵelementEnd {
  * @codeGenApi
  */
 export function ɵɵelement(
-    index: number, name: string, attrsIndex?: number|null,
-    localRefsIndex?: number): typeof ɵɵelement {
+  index: number,
+  name: string,
+  attrsIndex?: number | null,
+  localRefsIndex?: number,
+): typeof ɵɵelement {
   ɵɵelementStart(index, name, attrsIndex, localRefsIndex);
   ɵɵelementEnd();
   return ɵɵelement;
 }
 
-let _locateOrCreateElementNode: typeof locateOrCreateElementNodeImpl =
-    (tView: TView, lView: LView, tNode: TNode, renderer: Renderer, name: string, index: number) => {
-      lastNodeWasCreated(true);
-      return createElementNode(renderer, name, getNamespace());
-    };
+let _locateOrCreateElementNode: typeof locateOrCreateElementNodeImpl = (
+  tView: TView,
+  lView: LView,
+  tNode: TNode,
+  renderer: Renderer,
+  name: string,
+  index: number,
+) => {
+  lastNodeWasCreated(true);
+  return createElementNode(renderer, name, getNamespace());
+};
 
 /**
  * Enables hydration code path (to lookup existing elements in DOM)
  * in addition to the regular creation mode of element nodes.
  */
 function locateOrCreateElementNodeImpl(
-    tView: TView, lView: LView, tNode: TNode, renderer: Renderer, name: string,
-    index: number): RElement {
+  tView: TView,
+  lView: LView,
+  tNode: TNode,
+  renderer: Renderer,
+  name: string,
+  index: number,
+): RElement {
   const hydrationInfo = lView[HYDRATION];
-  const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock() ||
-      isDetachedByI18n(tNode) || isDisconnectedNode(hydrationInfo, index);
+  const isNodeCreationMode =
+    !hydrationInfo ||
+    isInSkipHydrationBlock() ||
+    isDetachedByI18n(tNode) ||
+    isDisconnectedNode(hydrationInfo, index);
   lastNodeWasCreated(isNodeCreationMode);
 
   // Regular creation mode.
@@ -234,8 +310,10 @@ function locateOrCreateElementNodeImpl(
   // skip attempting to hydrate this block. We check both TNode and RElement for an
   // attribute: the RElement case is needed for i18n cases, when we add it to host
   // elements during the annotation phase (after all internal data structures are setup).
-  if (hydrationInfo &&
-      (hasSkipHydrationAttrOnTNode(tNode) || hasSkipHydrationAttrOnRElement(native))) {
+  if (
+    hydrationInfo &&
+    (hasSkipHydrationAttrOnTNode(tNode) || hasSkipHydrationAttrOnRElement(native))
+  ) {
     if (isComponentHost(tNode)) {
       enterSkipHydrationBlock(tNode);
 
@@ -244,7 +322,6 @@ function locateOrCreateElementNodeImpl(
       clearElementContents(native);
 
       ngDevMode && markRNodeAsSkippedByHydration(native);
-
     } else if (ngDevMode) {
       // If this is not a component host, throw an error.
       // Hydration can be skipped on per-component basis only.
diff --git a/packages/core/src/render3/instructions/element_container.ts b/packages/core/src/render3/instructions/element_container.ts
index 3c629fd0b2fda..a3f071d05e6e9 100644
--- a/packages/core/src/render3/instructions/element_container.ts
+++ b/packages/core/src/render3/instructions/element_container.ts
@@ -7,7 +7,11 @@
  */
 import {validateMatchingNode, validateNodeExists} from '../../hydration/error_handling';
 import {locateNextRNode, siblingAfter} from '../../hydration/node_lookup_utils';
-import {getNgContainerSize, markRNodeAsClaimedByHydration, setSegmentHead} from '../../hydration/utils';
+import {
+  getNgContainerSize,
+  markRNodeAsClaimedByHydration,
+  setSegmentHead,
+} from '../../hydration/utils';
 import {isDetachedByI18n} from '../../i18n/utils';
 import {assertEqual, assertIndexInRange, assertNumber} from '../../util/assert';
 import {assertHasParent} from '../assert';
@@ -19,15 +23,36 @@ import {isContentQueryHost, isDirectiveHost} from '../interfaces/type_checks';
 import {HEADER_OFFSET, HYDRATION, LView, RENDERER, TView} from '../interfaces/view';
 import {assertTNodeType} from '../node_assert';
 import {appendChild, createCommentNode} from '../node_manipulation';
-import {getBindingIndex, getCurrentTNode, getLView, getTView, isCurrentTNodeParent, isInSkipHydrationBlock, lastNodeWasCreated, setCurrentTNode, setCurrentTNodeAsNotParent, wasLastNodeCreated} from '../state';
+import {
+  getBindingIndex,
+  getCurrentTNode,
+  getLView,
+  getTView,
+  isCurrentTNodeParent,
+  isInSkipHydrationBlock,
+  lastNodeWasCreated,
+  setCurrentTNode,
+  setCurrentTNodeAsNotParent,
+  wasLastNodeCreated,
+} from '../state';
 import {computeStaticStyling} from '../styling/static_styling';
 import {getConstant} from '../util/view_utils';
 
-import {createDirectivesInstances, executeContentQueries, getOrCreateTNode, resolveDirectives, saveResolvedLocalsInData} from './shared';
+import {
+  createDirectivesInstances,
+  executeContentQueries,
+  getOrCreateTNode,
+  resolveDirectives,
+  saveResolvedLocalsInData,
+} from './shared';
 
 function elementContainerStartFirstCreatePass(
-    index: number, tView: TView, lView: LView, attrsIndex?: number|null,
-    localRefsIndex?: number): TElementContainerNode {
+  index: number,
+  tView: TView,
+  lView: LView,
+  attrsIndex?: number | null,
+  localRefsIndex?: number,
+): TElementContainerNode {
   ngDevMode && ngDevMode.firstCreatePass++;
 
   const tViewConsts = tView.consts;
@@ -66,22 +91,25 @@ function elementContainerStartFirstCreatePass(
  * @codeGenApi
  */
 export function ɵɵelementContainerStart(
-    index: number, attrsIndex?: number|null,
-    localRefsIndex?: number): typeof ɵɵelementContainerStart {
+  index: number,
+  attrsIndex?: number | null,
+  localRefsIndex?: number,
+): typeof ɵɵelementContainerStart {
   const lView = getLView();
   const tView = getTView();
   const adjustedIndex = index + HEADER_OFFSET;
 
   ngDevMode && assertIndexInRange(lView, adjustedIndex);
   ngDevMode &&
-      assertEqual(
-          getBindingIndex(), tView.bindingStartIndex,
-          'element containers should be created before any bindings');
-
-  const tNode = tView.firstCreatePass ?
-      elementContainerStartFirstCreatePass(
-          adjustedIndex, tView, lView, attrsIndex, localRefsIndex) :
-      tView.data[adjustedIndex] as TElementContainerNode;
+    assertEqual(
+      getBindingIndex(),
+      tView.bindingStartIndex,
+      'element containers should be created before any bindings',
+    );
+
+  const tNode = tView.firstCreatePass
+    ? elementContainerStartFirstCreatePass(adjustedIndex, tView, lView, attrsIndex, localRefsIndex)
+    : (tView.data[adjustedIndex] as TElementContainerNode);
   setCurrentTNode(tNode, true);
 
   const comment = _locateOrCreateElementContainerNode(tView, lView, tNode, index);
@@ -144,17 +172,24 @@ export function ɵɵelementContainerEnd(): typeof ɵɵelementContainerEnd {
  * @codeGenApi
  */
 export function ɵɵelementContainer(
-    index: number, attrsIndex?: number|null, localRefsIndex?: number): typeof ɵɵelementContainer {
+  index: number,
+  attrsIndex?: number | null,
+  localRefsIndex?: number,
+): typeof ɵɵelementContainer {
   ɵɵelementContainerStart(index, attrsIndex, localRefsIndex);
   ɵɵelementContainerEnd();
   return ɵɵelementContainer;
 }
 
-let _locateOrCreateElementContainerNode: typeof locateOrCreateElementContainerNode =
-    (tView: TView, lView: LView, tNode: TNode, index: number) => {
-      lastNodeWasCreated(true);
-      return createCommentNode(lView[RENDERER], ngDevMode ? 'ng-container' : '');
-    };
+let _locateOrCreateElementContainerNode: typeof locateOrCreateElementContainerNode = (
+  tView: TView,
+  lView: LView,
+  tNode: TNode,
+  index: number,
+) => {
+  lastNodeWasCreated(true);
+  return createCommentNode(lView[RENDERER], ngDevMode ? 'ng-container' : '');
+};
 
 /**
  * Enables hydration code path (to lookup existing elements in DOM)
@@ -162,7 +197,11 @@ let _locateOrCreateElementContainerNode: typeof locateOrCreateElementContainerNo
  * represent <ng-container>'s anchor.
  */
 function locateOrCreateElementContainerNode(
-    tView: TView, lView: LView, tNode: TNode, index: number): RComment {
+  tView: TView,
+  lView: LView,
+  tNode: TNode,
+  index: number,
+): RComment {
   let comment: RComment;
   const hydrationInfo = lView[HYDRATION];
   const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock() || isDetachedByI18n(tNode);
@@ -180,10 +219,10 @@ function locateOrCreateElementContainerNode(
 
   const ngContainerSize = getNgContainerSize(hydrationInfo, index) as number;
   ngDevMode &&
-      assertNumber(
-          ngContainerSize,
-          'Unexpected state: hydrating an <ng-container>, ' +
-              'but no hydration info is available.');
+    assertNumber(
+      ngContainerSize,
+      'Unexpected state: hydrating an <ng-container>, ' + 'but no hydration info is available.',
+    );
 
   setSegmentHead(hydrationInfo, index, currentRNode);
   comment = siblingAfter<RComment>(ngContainerSize, currentRNode)!;
diff --git a/packages/core/src/render3/instructions/element_validation.ts b/packages/core/src/render3/instructions/element_validation.ts
index 8eac61106a9a7..3bbbf94487104 100644
--- a/packages/core/src/render3/instructions/element_validation.ts
+++ b/packages/core/src/render3/instructions/element_validation.ts
@@ -72,8 +72,12 @@ export function ɵgetUnknownPropertyStrictMode() {
  * @param hasDirectives Boolean indicating that the element matches any directive
  */
 export function validateElementIsKnown(
-    element: RElement, lView: LView, tagName: string|null, schemas: SchemaMetadata[]|null,
-    hasDirectives: boolean): void {
+  element: RElement,
+  lView: LView,
+  tagName: string | null,
+  schemas: SchemaMetadata[] | null,
+  hasDirectives: boolean,
+): void {
   // If `schemas` is set to `null`, that's an indication that this Component was compiled in AOT
   // mode where this check happens at compile time. In JIT mode, `schemas` is always present and
   // defined as an array (as an empty array in case `schemas` field is not defined) and we should
@@ -86,12 +90,14 @@ export function validateElementIsKnown(
     // as a custom element. Note that unknown elements with a dash in their name won't be instances
     // of HTMLUnknownElement in browsers that support web components.
     const isUnknown =
-        // Note that we can't check for `typeof HTMLUnknownElement === 'function'` because
-        // Domino doesn't expose HTMLUnknownElement globally.
-        (typeof HTMLUnknownElement !== 'undefined' && HTMLUnknownElement &&
-         element instanceof HTMLUnknownElement) ||
-        (typeof customElements !== 'undefined' && tagName.indexOf('-') > -1 &&
-         !customElements.get(tagName));
+      // Note that we can't check for `typeof HTMLUnknownElement === 'function'` because
+      // Domino doesn't expose HTMLUnknownElement globally.
+      (typeof HTMLUnknownElement !== 'undefined' &&
+        HTMLUnknownElement &&
+        element instanceof HTMLUnknownElement) ||
+      (typeof customElements !== 'undefined' &&
+        tagName.indexOf('-') > -1 &&
+        !customElements.get(tagName));
 
     if (isUnknown && !matchingSchemas(schemas, tagName)) {
       const isHostStandalone = isHostComponentStandalone(lView);
@@ -100,15 +106,14 @@ export function validateElementIsKnown(
 
       let message = `'${tagName}' is not a known element${templateLocation}:\n`;
       message += `1. If '${tagName}' is an Angular component, then verify that it is ${
-          isHostStandalone ? 'included in the \'@Component.imports\' of this component' :
-                             'a part of an @NgModule where this component is declared'}.\n`;
+        isHostStandalone
+          ? "included in the '@Component.imports' of this component"
+          : 'a part of an @NgModule where this component is declared'
+      }.\n`;
       if (tagName && tagName.indexOf('-') > -1) {
-        message +=
-            `2. If '${tagName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the ${
-                schemas} of this component to suppress this message.`;
+        message += `2. If '${tagName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the ${schemas} of this component to suppress this message.`;
       } else {
-        message +=
-            `2. To allow any element add 'NO_ERRORS_SCHEMA' to the ${schemas} of this component.`;
+        message += `2. To allow any element add 'NO_ERRORS_SCHEMA' to the ${schemas} of this component.`;
       }
       if (shouldThrowErrorOnUnknownElement) {
         throw new RuntimeError(RuntimeErrorCode.UNKNOWN_ELEMENT, message);
@@ -136,8 +141,11 @@ export function validateElementIsKnown(
  * @param schemas Array of schemas
  */
 export function isPropertyValid(
-    element: RElement|RComment, propName: string, tagName: string|null,
-    schemas: SchemaMetadata[]|null): boolean {
+  element: RElement | RComment,
+  propName: string,
+  tagName: string | null,
+  schemas: SchemaMetadata[] | null,
+): boolean {
   // If `schemas` is set to `null`, that's an indication that this Component was compiled in AOT
   // mode where this check happens at compile time. In JIT mode, `schemas` is always present and
   // defined as an array (as an empty array in case `schemas` field is not defined) and we should
@@ -163,7 +171,11 @@ export function isPropertyValid(
  * @param lView An `LView` that represents a current component
  */
 export function handleUnknownPropertyError(
-    propName: string, tagName: string|null, nodeType: TNodeType, lView: LView): void {
+  propName: string,
+  tagName: string | null,
+  nodeType: TNodeType,
+  lView: LView,
+): void {
   // Special-case a situation when a structural directive is applied to
   // an `<ng-template>` element, for example: `<ng-template *ngIf="true">`.
   // In this case the compiler generates the `ɵɵtemplate` instruction with
@@ -177,34 +189,37 @@ export function handleUnknownPropertyError(
   const isHostStandalone = isHostComponentStandalone(lView);
   const templateLocation = getTemplateLocationDetails(lView);
 
-  let message = `Can't bind to '${propName}' since it isn't a known property of '${tagName}'${
-      templateLocation}.`;
+  let message = `Can't bind to '${propName}' since it isn't a known property of '${tagName}'${templateLocation}.`;
 
   const schemas = `'${isHostStandalone ? '@Component' : '@NgModule'}.schemas'`;
-  const importLocation = isHostStandalone ?
-      'included in the \'@Component.imports\' of this component' :
-      'a part of an @NgModule where this component is declared';
+  const importLocation = isHostStandalone
+    ? "included in the '@Component.imports' of this component"
+    : 'a part of an @NgModule where this component is declared';
   if (KNOWN_CONTROL_FLOW_DIRECTIVES.has(propName)) {
     // Most likely this is a control flow directive (such as `*ngIf`) used in
     // a template, but the directive or the `CommonModule` is not imported.
     const correspondingImport = KNOWN_CONTROL_FLOW_DIRECTIVES.get(propName);
-    message += `\nIf the '${propName}' is an Angular control flow directive, ` +
-        `please make sure that either the '${
-                   correspondingImport}' directive or the 'CommonModule' is ${importLocation}.`;
+    message +=
+      `\nIf the '${propName}' is an Angular control flow directive, ` +
+      `please make sure that either the '${correspondingImport}' directive or the 'CommonModule' is ${importLocation}.`;
   } else {
     // May be an Angular component, which is not imported/declared?
-    message += `\n1. If '${tagName}' is an Angular component and it has the ` +
-        `'${propName}' input, then verify that it is ${importLocation}.`;
+    message +=
+      `\n1. If '${tagName}' is an Angular component and it has the ` +
+      `'${propName}' input, then verify that it is ${importLocation}.`;
     // May be a Web Component?
     if (tagName && tagName.indexOf('-') > -1) {
-      message += `\n2. If '${tagName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' ` +
-          `to the ${schemas} of this component to suppress this message.`;
-      message += `\n3. To allow any property add 'NO_ERRORS_SCHEMA' to ` +
-          `the ${schemas} of this component.`;
+      message +=
+        `\n2. If '${tagName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' ` +
+        `to the ${schemas} of this component to suppress this message.`;
+      message +=
+        `\n3. To allow any property add 'NO_ERRORS_SCHEMA' to ` +
+        `the ${schemas} of this component.`;
     } else {
       // If it's expected, the error can be suppressed by the `NO_ERRORS_SCHEMA` schema.
-      message += `\n2. To allow any property add 'NO_ERRORS_SCHEMA' to ` +
-          `the ${schemas} of this component.`;
+      message +=
+        `\n2. To allow any property add 'NO_ERRORS_SCHEMA' to ` +
+        `the ${schemas} of this component.`;
     }
   }
 
@@ -228,7 +243,7 @@ export function reportUnknownPropertyError(message: string) {
  *
  * @param lView An `LView` that represents a current component that is being rendered.
  */
-export function getDeclarationComponentDef(lView: LView): ComponentDef<unknown>|null {
+export function getDeclarationComponentDef(lView: LView): ComponentDef<unknown> | null {
   !ngDevMode && throwError('Must never be called in production mode');
 
   const declarationLView = lView[DECLARATION_COMPONENT_VIEW] as LView<Type<unknown>>;
@@ -281,20 +296,24 @@ export function getTemplateLocationDetails(lView: LView): string {
  * that the `CommonModule` should also be included.
  */
 export const KNOWN_CONTROL_FLOW_DIRECTIVES = new Map([
-  ['ngIf', 'NgIf'], ['ngFor', 'NgFor'], ['ngSwitchCase', 'NgSwitchCase'],
-  ['ngSwitchDefault', 'NgSwitchDefault']
+  ['ngIf', 'NgIf'],
+  ['ngFor', 'NgFor'],
+  ['ngSwitchCase', 'NgSwitchCase'],
+  ['ngSwitchDefault', 'NgSwitchDefault'],
 ]);
 /**
  * Returns true if the tag name is allowed by specified schemas.
  * @param schemas Array of schemas
  * @param tagName Name of the tag
  */
-export function matchingSchemas(schemas: SchemaMetadata[]|null, tagName: string|null): boolean {
+export function matchingSchemas(schemas: SchemaMetadata[] | null, tagName: string | null): boolean {
   if (schemas !== null) {
     for (let i = 0; i < schemas.length; i++) {
       const schema = schemas[i];
-      if (schema === NO_ERRORS_SCHEMA ||
-          schema === CUSTOM_ELEMENTS_SCHEMA && tagName && tagName.indexOf('-') > -1) {
+      if (
+        schema === NO_ERRORS_SCHEMA ||
+        (schema === CUSTOM_ELEMENTS_SCHEMA && tagName && tagName.indexOf('-') > -1)
+      ) {
         return true;
       }
     }
diff --git a/packages/core/src/render3/instructions/host_property.ts b/packages/core/src/render3/instructions/host_property.ts
index a6d2549e68ded..73c1c28e8f825 100644
--- a/packages/core/src/render3/instructions/host_property.ts
+++ b/packages/core/src/render3/instructions/host_property.ts
@@ -8,10 +8,20 @@
 import {bindingUpdated} from '../bindings';
 import {SanitizerFn} from '../interfaces/sanitization';
 import {RENDERER} from '../interfaces/view';
-import {getCurrentDirectiveDef, getLView, getSelectedTNode, getTView, nextBindingIndex} from '../state';
+import {
+  getCurrentDirectiveDef,
+  getLView,
+  getSelectedTNode,
+  getTView,
+  nextBindingIndex,
+} from '../state';
 import {NO_CHANGE} from '../tokens';
 
-import {elementPropertyInternal, loadComponentRenderer, storePropertyBindingMetadata} from './shared';
+import {
+  elementPropertyInternal,
+  loadComponentRenderer,
+  storePropertyBindingMetadata,
+} from './shared';
 
 /**
  * Update a property on a host element. Only applies to native node properties, not inputs.
@@ -28,7 +38,10 @@ import {elementPropertyInternal, loadComponentRenderer, storePropertyBindingMeta
  * @codeGenApi
  */
 export function ɵɵhostProperty<T>(
-    propName: string, value: T, sanitizer?: SanitizerFn|null): typeof ɵɵhostProperty {
+  propName: string,
+  value: T,
+  sanitizer?: SanitizerFn | null,
+): typeof ɵɵhostProperty {
   const lView = getLView();
   const bindingIndex = nextBindingIndex();
   if (bindingUpdated(lView, bindingIndex, value)) {
@@ -40,7 +53,6 @@ export function ɵɵhostProperty<T>(
   return ɵɵhostProperty;
 }
 
-
 /**
  * Updates a synthetic host binding (e.g. `[@foo]`) on a component or directive.
  *
@@ -63,8 +75,10 @@ export function ɵɵhostProperty<T>(
  * @codeGenApi
  */
 export function ɵɵsyntheticHostProperty<T>(
-    propName: string, value: T|NO_CHANGE,
-    sanitizer?: SanitizerFn|null): typeof ɵɵsyntheticHostProperty {
+  propName: string,
+  value: T | NO_CHANGE,
+  sanitizer?: SanitizerFn | null,
+): typeof ɵɵsyntheticHostProperty {
   const lView = getLView();
   const bindingIndex = nextBindingIndex();
   if (bindingUpdated(lView, bindingIndex, value)) {
diff --git a/packages/core/src/render3/instructions/i18n.ts b/packages/core/src/render3/instructions/i18n.ts
index 7dbdd71295ddd..07c6d96e475c4 100644
--- a/packages/core/src/render3/instructions/i18n.ts
+++ b/packages/core/src/render3/instructions/i18n.ts
@@ -16,9 +16,22 @@ import {i18nAttributesFirstPass, i18nStartFirstCreatePass} from '../i18n/i18n_pa
 import {i18nPostprocess} from '../i18n/i18n_postprocess';
 import {TI18n} from '../interfaces/i18n';
 import {TElementNode, TNodeType} from '../interfaces/node';
-import {DECLARATION_COMPONENT_VIEW, FLAGS, HEADER_OFFSET, LViewFlags, T_HOST, TViewType} from '../interfaces/view';
+import {
+  DECLARATION_COMPONENT_VIEW,
+  FLAGS,
+  HEADER_OFFSET,
+  LViewFlags,
+  T_HOST,
+  TViewType,
+} from '../interfaces/view';
 import {getClosestRElement} from '../node_manipulation';
-import {getCurrentParentTNode, getLView, getTView, nextBindingIndex, setInI18nBlock} from '../state';
+import {
+  getCurrentParentTNode,
+  getLView,
+  getTView,
+  nextBindingIndex,
+  setInI18nBlock,
+} from '../state';
 import {getConstant} from '../util/view_utils';
 
 /**
@@ -47,7 +60,10 @@ import {getConstant} from '../util/view_utils';
  * @codeGenApi
  */
 export function ɵɵi18nStart(
-    index: number, messageIndex: number, subTemplateIndex: number = -1): void {
+  index: number,
+  messageIndex: number,
+  subTemplateIndex: number = -1,
+): void {
   const tView = getTView();
   const lView = getLView();
   const adjustedIndex = HEADER_OFFSET + index;
@@ -56,8 +72,13 @@ export function ɵɵi18nStart(
   const parentTNode = getCurrentParentTNode() as TElementNode | null;
   if (tView.firstCreatePass) {
     i18nStartFirstCreatePass(
-        tView, parentTNode === null ? 0 : parentTNode.index, lView, adjustedIndex, message,
-        subTemplateIndex);
+      tView,
+      parentTNode === null ? 0 : parentTNode.index,
+      lView,
+      adjustedIndex,
+      message,
+      subTemplateIndex,
+    );
   }
 
   // Set a flag that this LView has i18n blocks.
@@ -77,16 +98,13 @@ export function ɵɵi18nStart(
   const parentRNode = getClosestRElement(tView, sameViewParentTNode, lView);
   // If `parentTNode` is an `ElementContainer` than it has `<!--ng-container--->`.
   // When we do inserts we have to make sure to insert in front of `<!--ng-container--->`.
-  const insertInFrontOf = parentTNode && (parentTNode.type & TNodeType.ElementContainer) ?
-      lView[parentTNode.index] :
-      null;
+  const insertInFrontOf =
+    parentTNode && parentTNode.type & TNodeType.ElementContainer ? lView[parentTNode.index] : null;
   prepareI18nBlockForHydration(lView, adjustedIndex, parentTNode, subTemplateIndex);
   applyCreateOpCodes(lView, tI18n.create, parentRNode, insertInFrontOf);
   setInI18nBlock(true);
 }
 
-
-
 /**
  * Translates a translation block marked by `i18nStart` and `i18nEnd`. It inserts the text/ICU nodes
  * into the render tree, moves the placeholder nodes and removes the deleted nodes.
@@ -143,7 +161,6 @@ export function ɵɵi18nAttributes(index: number, attrsIndex: number): void {
   i18nAttributesFirstPass(tView, index + HEADER_OFFSET, attrs);
 }
 
-
 /**
  * Stores the values of the bindings during each update cycle in order to determine if we need to
  * update the translated nodes.
@@ -193,6 +210,8 @@ export function ɵɵi18nApply(index: number) {
  * @codeGenApi
  */
 export function ɵɵi18nPostprocess(
-    message: string, replacements: {[key: string]: (string|string[])} = {}): string {
+  message: string,
+  replacements: {[key: string]: string | string[]} = {},
+): string {
   return i18nPostprocess(message, replacements);
 }
diff --git a/packages/core/src/render3/instructions/i18n_icu_container_visitor.ts b/packages/core/src/render3/instructions/i18n_icu_container_visitor.ts
index acb42f498cf69..2ac99ecda2aab 100644
--- a/packages/core/src/render3/instructions/i18n_icu_container_visitor.ts
+++ b/packages/core/src/render3/instructions/i18n_icu_container_visitor.ts
@@ -37,8 +37,10 @@ export function loadIcuContainerVisitor() {
    * @param tIcuContainerNode Current `TIcuContainerNode`
    * @param lView `LView` where the `RNode`s should be looked up.
    */
-  function icuContainerIteratorStart(tIcuContainerNode: TIcuContainerNode, lView: LView): () =>
-      RNode | null {
+  function icuContainerIteratorStart(
+    tIcuContainerNode: TIcuContainerNode,
+    lView: LView,
+  ): () => RNode | null {
     _lView = lView;
     while (_stack.length) _stack.pop();
     ngDevMode && assertTNodeForLView(tIcuContainerNode, lView);
@@ -57,8 +59,7 @@ export function loadIcuContainerVisitor() {
     }
   }
 
-
-  function icuContainerIteratorNext(): RNode|null {
+  function icuContainerIteratorNext(): RNode | null {
     if (_index < _removes.length) {
       const removeOpCode = _removes[_index++] as number;
       ngDevMode && assertNumber(removeOpCode, 'Expecting OpCode number');
diff --git a/packages/core/src/render3/instructions/interpolation.ts b/packages/core/src/render3/instructions/interpolation.ts
index ec64e3bbcf5d9..635983dcae9a0 100644
--- a/packages/core/src/render3/instructions/interpolation.ts
+++ b/packages/core/src/render3/instructions/interpolation.ts
@@ -13,8 +13,6 @@ import {getBindingIndex, incrementBindingIndex, nextBindingIndex, setBindingInde
 import {NO_CHANGE} from '../tokens';
 import {renderStringify} from '../util/stringify_utils';
 
-
-
 /**
  * Create interpolation bindings with a variable number of expressions.
  *
@@ -27,7 +25,7 @@ import {renderStringify} from '../util/stringify_utils';
  *
  * Returns the concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
  */
-export function interpolationV(lView: LView, values: any[]): string|NO_CHANGE {
+export function interpolationV(lView: LView, values: any[]): string | NO_CHANGE {
   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;
@@ -59,8 +57,12 @@ export function interpolationV(lView: LView, values: any[]): string|NO_CHANGE {
  * @param v0 value checked for change.
  * @param suffix static value used for concatenation only.
  */
-export function interpolation1(lView: LView, prefix: string, v0: any, suffix: string): string|
-    NO_CHANGE {
+export function interpolation1(
+  lView: LView,
+  prefix: string,
+  v0: any,
+  suffix: string,
+): string | NO_CHANGE {
   const different = bindingUpdated(lView, nextBindingIndex(), v0);
   return different ? prefix + renderStringify(v0) + suffix : NO_CHANGE;
 }
@@ -69,7 +71,13 @@ export function interpolation1(lView: LView, prefix: string, v0: any, suffix: st
  * Creates an interpolation binding with 2 expressions.
  */
 export function interpolation2(
-    lView: LView, prefix: string, v0: any, i0: string, v1: any, suffix: string): string|NO_CHANGE {
+  lView: LView,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  suffix: string,
+): string | NO_CHANGE {
   const bindingIndex = getBindingIndex();
   const different = bindingUpdated2(lView, bindingIndex, v0, v1);
   incrementBindingIndex(2);
@@ -81,97 +89,224 @@ export function interpolation2(
  * Creates an interpolation binding with 3 expressions.
  */
 export function interpolation3(
-    lView: LView, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any,
-    suffix: string): string|NO_CHANGE {
+  lView: LView,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  suffix: string,
+): string | NO_CHANGE {
   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;
+  return different
+    ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + suffix
+    : NO_CHANGE;
 }
 
 /**
  * Create an interpolation binding with 4 expressions.
  */
 export function interpolation4(
-    lView: LView, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, suffix: string): string|NO_CHANGE {
+  lView: LView,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  suffix: string,
+): string | NO_CHANGE {
   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;
+  return different
+    ? prefix +
+        renderStringify(v0) +
+        i0 +
+        renderStringify(v1) +
+        i1 +
+        renderStringify(v2) +
+        i2 +
+        renderStringify(v3) +
+        suffix
+    : NO_CHANGE;
 }
 
 /**
  * Creates an interpolation binding with 5 expressions.
  */
 export function interpolation5(
-    lView: LView, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, suffix: string): string|NO_CHANGE {
+  lView: LView,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  suffix: string,
+): string | NO_CHANGE {
   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;
+  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.
  */
 export function interpolation6(
-    lView: LView, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, i4: string, v5: any, suffix: string): string|NO_CHANGE {
+  lView: LView,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  suffix: string,
+): string | NO_CHANGE {
   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;
+  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.
  */
 export function interpolation7(
-    lView: LView, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string): string|
-    NO_CHANGE {
+  lView: LView,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  i5: string,
+  v6: any,
+  suffix: string,
+): string | NO_CHANGE {
   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;
+  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.
  */
 export function interpolation8(
-    lView: LView, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any,
-    suffix: string): string|NO_CHANGE {
+  lView: LView,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  i5: string,
+  v6: any,
+  i6: string,
+  v7: any,
+  suffix: string,
+): string | NO_CHANGE {
   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;
+  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;
 }
diff --git a/packages/core/src/render3/instructions/listener.ts b/packages/core/src/render3/instructions/listener.ts
index d64f6a88e4c10..6ad6e4f154cf0 100644
--- a/packages/core/src/render3/instructions/listener.ts
+++ b/packages/core/src/render3/instructions/listener.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {setActiveConsumer} from '@angular/core/primitives/signals';
 
 import {NotificationSource} from '../../change_detection/scheduling/zoneless_scheduling';
@@ -22,9 +21,12 @@ import {getCurrentDirectiveDef, getCurrentTNode, getLView, getTView} from '../st
 import {getComponentLViewByIndex, getNativeByTNode, unwrapRNode} from '../util/view_utils';
 
 import {markViewDirty} from './mark_view_dirty';
-import {getOrCreateLViewCleanup, getOrCreateTViewCleanup, handleError, loadComponentRenderer} from './shared';
-
-
+import {
+  getOrCreateLViewCleanup,
+  getOrCreateTViewCleanup,
+  handleError,
+  loadComponentRenderer,
+} from './shared';
 
 /**
  * Adds an event listener to the current node.
@@ -42,13 +44,23 @@ import {getOrCreateLViewCleanup, getOrCreateTViewCleanup, handleError, loadCompo
  * @codeGenApi
  */
 export function ɵɵlistener(
-    eventName: string, listenerFn: (e?: any) => any, useCapture?: boolean,
-    eventTargetResolver?: GlobalTargetResolver): typeof ɵɵlistener {
-  const lView = getLView<{}|null>();
+  eventName: string,
+  listenerFn: (e?: any) => any,
+  useCapture?: boolean,
+  eventTargetResolver?: GlobalTargetResolver,
+): typeof ɵɵlistener {
+  const lView = getLView<{} | null>();
   const tView = getTView();
   const tNode = getCurrentTNode()!;
   listenerInternal(
-      tView, lView, lView[RENDERER], tNode, eventName, listenerFn, eventTargetResolver);
+    tView,
+    lView,
+    lView[RENDERER],
+    tNode,
+    eventName,
+    listenerFn,
+    eventTargetResolver,
+  );
   return ɵɵlistener;
 }
 
@@ -74,9 +86,11 @@ export function ɵɵlistener(
  * @codeGenApi
  */
 export function ɵɵsyntheticHostListener(
-    eventName: string, listenerFn: (e?: any) => any): typeof ɵɵsyntheticHostListener {
+  eventName: string,
+  listenerFn: (e?: any) => any,
+): typeof ɵɵsyntheticHostListener {
   const tNode = getCurrentTNode()!;
-  const lView = getLView<{}|null>();
+  const lView = getLView<{} | null>();
   const tView = getTView();
   const currentDef = getCurrentDirectiveDef(tView.data);
   const renderer = loadComponentRenderer(currentDef, tNode, lView);
@@ -90,7 +104,11 @@ export function ɵɵsyntheticHostListener(
  * are registered for a given element.
  */
 function findExistingListener(
-    tView: TView, lView: LView, eventName: string, tNodeIdx: number): ((e?: any) => any)|null {
+  tView: TView,
+  lView: LView,
+  eventName: string,
+  tNodeIdx: number,
+): ((e?: any) => any) | null {
   const tCleanup = tView.cleanup;
   if (tCleanup != null) {
     for (let i = 0; i < tCleanup.length - 1; i += 2) {
@@ -117,11 +135,17 @@ function findExistingListener(
 }
 
 export function listenerInternal(
-    tView: TView, lView: LView<{}|null>, renderer: Renderer, tNode: TNode, eventName: string,
-    listenerFn: (e?: any) => any, eventTargetResolver?: GlobalTargetResolver): void {
+  tView: TView,
+  lView: LView<{} | null>,
+  renderer: Renderer,
+  tNode: TNode,
+  eventName: string,
+  listenerFn: (e?: any) => any,
+  eventTargetResolver?: GlobalTargetResolver,
+): void {
   const isTNodeDirectiveHost = isDirectiveHost(tNode);
   const firstCreatePass = tView.firstCreatePass;
-  const tCleanup: false|any[] = firstCreatePass && getOrCreateTViewCleanup(tView);
+  const tCleanup: false | any[] = firstCreatePass && getOrCreateTViewCleanup(tView);
   const context = lView[CONTEXT];
 
   // When the ɵɵlistener instruction was generated and is executed we know that there is either a
@@ -137,13 +161,13 @@ export function listenerInternal(
   // - The corresponding TNode represents a DOM element.
   // - The event target has a resolver (usually resulting in a global object,
   //   such as `window` or `document`).
-  if ((tNode.type & TNodeType.AnyRNode) || eventTargetResolver) {
+  if (tNode.type & TNodeType.AnyRNode || eventTargetResolver) {
     const native = getNativeByTNode(tNode, lView) as RElement;
     const target = eventTargetResolver ? eventTargetResolver(native) : native;
     const lCleanupIndex = lCleanup.length;
-    const idxOrTargetGetter = eventTargetResolver ?
-        (_lView: LView) => eventTargetResolver(unwrapRNode(_lView[tNode.index])) :
-        tNode.index;
+    const idxOrTargetGetter = eventTargetResolver
+      ? (_lView: LView) => eventTargetResolver(unwrapRNode(_lView[tNode.index]))
+      : tNode.index;
 
     // In order to match current behavior, native DOM event listeners must be added for all
     // events (including outputs).
@@ -185,7 +209,6 @@ export function listenerInternal(
       lCleanup.push(listenerFn, cleanupFn);
       tCleanup && tCleanup.push(eventName, idxOrTargetGetter, lCleanupIndex, lCleanupIndex + 1);
     }
-
   } else {
     // Even if there is no native listener to add, we still need to wrap the listener so that OnPush
     // ancestors are marked dirty when an event occurs.
@@ -194,7 +217,7 @@ export function listenerInternal(
 
   // subscribe to directive outputs
   const outputs = tNode.outputs;
-  let props: NodeOutputBindings[keyof NodeOutputBindings]|undefined;
+  let props: NodeOutputBindings[keyof NodeOutputBindings] | undefined;
   if (processOutputs && outputs !== null && (props = outputs[eventName])) {
     const propsLength = props.length;
     if (propsLength) {
@@ -206,8 +229,9 @@ export function listenerInternal(
         const output = directiveInstance[minifiedName];
 
         if (ngDevMode && !isOutputSubscribable(output)) {
-          throw new Error(`@Output ${minifiedName} not initialized in '${
-              directiveInstance.constructor.name}'.`);
+          throw new Error(
+            `@Output ${minifiedName} not initialized in '${directiveInstance.constructor.name}'.`,
+          );
         }
 
         const subscription = (output as SubscribableOutput<unknown>).subscribe(listenerFn);
@@ -220,7 +244,11 @@ export function listenerInternal(
 }
 
 function executeListenerWithErrorHandling(
-    lView: LView, context: {}|null, listenerFn: (e?: any) => any, e: any): boolean {
+  lView: LView,
+  context: {} | null,
+  listenerFn: (e?: any) => any,
+  e: any,
+): boolean {
   const prevConsumer = setActiveConsumer(null);
   try {
     profiler(ProfilerEvent.OutputStart, context, listenerFn);
@@ -246,8 +274,12 @@ function executeListenerWithErrorHandling(
  * (the procedural renderer does this already, so in those cases, we should skip)
  */
 function wrapListener(
-    tNode: TNode, lView: LView<{}|null>, context: {}|null, listenerFn: (e?: any) => any,
-    wrapWithPreventDefault: boolean): EventListener {
+  tNode: TNode,
+  lView: LView<{} | null>,
+  context: {} | null,
+  listenerFn: (e?: any) => any,
+  wrapWithPreventDefault: boolean,
+): EventListener {
   // Note: we are performing most of the work in the listener function itself
   // to optimize listener registration.
   return function wrapListenerIn_markDirtyAndPreventDefault(e: any) {
@@ -260,7 +292,7 @@ function wrapListener(
     // In order to be backwards compatible with View Engine, events on component host nodes
     // must also mark the component view itself dirty (i.e. the view that it owns).
     const startView =
-        tNode.componentOffset > -1 ? getComponentLViewByIndex(tNode.index, lView) : lView;
+      tNode.componentOffset > -1 ? getComponentLViewByIndex(tNode.index, lView) : lView;
     markViewDirty(startView, NotificationSource.Listener);
 
     let result = executeListenerWithErrorHandling(lView, context, listenerFn, e);
@@ -283,7 +315,7 @@ function wrapListener(
 
 /** Describes a subscribable output field value. */
 interface SubscribableOutput<T> {
-  subscribe(listener: (v: T) => void): {unsubscribe: () => void;};
+  subscribe(listener: (v: T) => void): {unsubscribe: () => void};
 }
 
 /**
@@ -293,6 +325,7 @@ interface SubscribableOutput<T> {
  * `OutputEmitter`.
  */
 function isOutputSubscribable(value: unknown): value is SubscribableOutput<unknown> {
-  return value != null &&
-      typeof (value as Partial<SubscribableOutput<unknown>>).subscribe === 'function';
+  return (
+    value != null && typeof (value as Partial<SubscribableOutput<unknown>>).subscribe === 'function'
+  );
 }
diff --git a/packages/core/src/render3/instructions/mark_view_dirty.ts b/packages/core/src/render3/instructions/mark_view_dirty.ts
index 380e0696f42a9..2dd8c2910a79a 100644
--- a/packages/core/src/render3/instructions/mark_view_dirty.ts
+++ b/packages/core/src/render3/instructions/mark_view_dirty.ts
@@ -23,15 +23,15 @@ import {getLViewParent} from '../util/view_utils';
  * @param lView The starting LView to mark dirty
  * @returns the root LView
  */
-export function markViewDirty(lView: LView, source: NotificationSource): LView|null {
-  const dirtyBitsToUse = isRefreshingViews() ?
-      // When we are actively refreshing views, we only use the `Dirty` bit to mark a view
+export function markViewDirty(lView: LView, source: NotificationSource): LView | null {
+  const dirtyBitsToUse = isRefreshingViews()
+    ? // When we are actively refreshing views, we only use the `Dirty` bit to mark a view
       // for check. This bit is ignored in ChangeDetectionMode.Targeted, which is used to
       // synchronously rerun change detection on a specific set of views (those which have
       // the `RefreshView` flag and those with dirty signal consumers). `LViewFlags.Dirty`
       // does not support re-entrant change detection on its own.
-      LViewFlags.Dirty :
-      // When we are not actively refreshing a view tree, it is absolutely
+      LViewFlags.Dirty
+    : // When we are not actively refreshing a view tree, it is absolutely
       // valid to update state and mark views dirty. We use the `RefreshView` flag in this
       // case to allow synchronously rerunning change detection. This applies today to
       // afterRender hooks as well as animation listeners which execute after detecting
diff --git a/packages/core/src/render3/instructions/projection.ts b/packages/core/src/render3/instructions/projection.ts
index 56176c57cfb44..bc12118ef7d98 100644
--- a/packages/core/src/render3/instructions/projection.ts
+++ b/packages/core/src/render3/instructions/projection.ts
@@ -11,17 +11,30 @@ import {assertLContainer, assertTNode} from '../assert';
 import {ComponentTemplate} from '../interfaces/definition';
 import {TAttributes, TElementNode, TNode, TNodeFlags, TNodeType} from '../interfaces/node';
 import {ProjectionSlots} from '../interfaces/projection';
-import {DECLARATION_COMPONENT_VIEW, HEADER_OFFSET, HYDRATION, LView, T_HOST, TView} from '../interfaces/view';
+import {
+  DECLARATION_COMPONENT_VIEW,
+  HEADER_OFFSET,
+  HYDRATION,
+  LView,
+  T_HOST,
+  TView,
+} from '../interfaces/view';
 import {applyProjection} from '../node_manipulation';
-import {getProjectAsAttrValue, isNodeMatchingSelectorList, isSelectorInSelectorList} from '../node_selector_matcher';
+import {
+  getProjectAsAttrValue,
+  isNodeMatchingSelectorList,
+  isSelectorInSelectorList,
+} from '../node_selector_matcher';
 import {getLView, getTView, isInSkipHydrationBlock, setCurrentTNodeAsNotParent} from '../state';
-import {addLViewToLContainer, createAndRenderEmbeddedLView, shouldAddViewToDom} from '../view_manipulation';
+import {
+  addLViewToLContainer,
+  createAndRenderEmbeddedLView,
+  shouldAddViewToDom,
+} from '../view_manipulation';
 
 import {getOrCreateTNode} from './shared';
 import {declareTemplate} from './template';
 
-
-
 /**
  * Checks a given node against matching projection slots and returns the
  * determined slot index. Returns "null" if no slot matched the given node.
@@ -30,8 +43,10 @@ import {declareTemplate} from './template';
  * node's attributes. If present, it will check whether the ngProjectAs selector
  * matches any of the projection slot selectors.
  */
-export function matchingProjectionSlotIndex(tNode: TNode, projectionSlots: ProjectionSlots): number|
-    null {
+export function matchingProjectionSlotIndex(
+  tNode: TNode,
+  projectionSlots: ProjectionSlots,
+): number | null {
   let wildcardNgContentIndex = null;
   const ngProjectAsAttrVal = getProjectAsAttrValue(tNode);
   for (let i = 0; i < projectionSlots.length; i++) {
@@ -44,10 +59,12 @@ export function matchingProjectionSlotIndex(tNode: TNode, projectionSlots: Proje
     }
     // If we ran into an `ngProjectAs` attribute, we should match its parsed selector
     // to the list of selectors, otherwise we fall back to matching against the node.
-    if (ngProjectAsAttrVal === null ?
-            isNodeMatchingSelectorList(tNode, slotValue, /* isProjectionMode */ true) :
-            isSelectorInSelectorList(ngProjectAsAttrVal, slotValue)) {
-      return i;  // first matching selector "captures" a given node
+    if (
+      ngProjectAsAttrVal === null
+        ? isNodeMatchingSelectorList(tNode, slotValue, /* isProjectionMode */ true)
+        : isSelectorInSelectorList(ngProjectAsAttrVal, slotValue)
+    ) {
+      return i; // first matching selector "captures" a given node
     }
   }
   return wildcardNgContentIndex;
@@ -85,15 +102,18 @@ export function ɵɵprojectionDef(projectionSlots?: ProjectionSlots): void {
     // If no explicit projection slots are defined, fall back to a single
     // projection slot with the wildcard selector.
     const numProjectionSlots = projectionSlots ? projectionSlots.length : 1;
-    const projectionHeads: (TNode|null)[] = componentNode.projection =
-        newArray(numProjectionSlots, null! as TNode);
-    const tails: (TNode|null)[] = projectionHeads.slice();
+    const projectionHeads: (TNode | null)[] = (componentNode.projection = newArray(
+      numProjectionSlots,
+      null! as TNode,
+    ));
+    const tails: (TNode | null)[] = projectionHeads.slice();
 
-    let componentChild: TNode|null = componentNode.child;
+    let componentChild: TNode | null = componentNode.child;
 
     while (componentChild !== null) {
-      const slotIndex =
-          projectionSlots ? matchingProjectionSlotIndex(componentChild, projectionSlots) : 0;
+      const slotIndex = projectionSlots
+        ? matchingProjectionSlotIndex(componentChild, projectionSlots)
+        : 0;
 
       if (slotIndex !== null) {
         if (tails[slotIndex]) {
@@ -109,7 +129,6 @@ export function ɵɵprojectionDef(projectionSlots?: ProjectionSlots): void {
   }
 }
 
-
 /**
  * Inserts previously re-distributed projected nodes. This instruction must be preceded by a call
  * to the projectionDef instruction.
@@ -127,9 +146,13 @@ export function ɵɵprojectionDef(projectionSlots?: ProjectionSlots): void {
  * @codeGenApi
  */
 export function ɵɵprojection(
-    nodeIndex: number, selectorIndex: number = 0, attrs?: TAttributes,
-    fallbackTemplateFn?: ComponentTemplate<unknown>, fallbackDecls?: number,
-    fallbackVars?: number): void {
+  nodeIndex: number,
+  selectorIndex: number = 0,
+  attrs?: TAttributes,
+  fallbackTemplateFn?: ComponentTemplate<unknown>,
+  fallbackDecls?: number,
+  fallbackVars?: number,
+): void {
   const lView = getLView();
   const tView = getTView();
   const fallbackIndex = fallbackTemplateFn ? nodeIndex + 1 : null;
@@ -139,12 +162,24 @@ export function ɵɵprojection(
   // the projection node in order to work correctly with hydration.
   if (fallbackIndex !== null) {
     declareTemplate(
-        lView, tView, fallbackIndex, fallbackTemplateFn!, fallbackDecls!, fallbackVars!, null,
-        attrs);
+      lView,
+      tView,
+      fallbackIndex,
+      fallbackTemplateFn!,
+      fallbackDecls!,
+      fallbackVars!,
+      null,
+      attrs,
+    );
   }
 
-  const tProjectionNode =
-      getOrCreateTNode(tView, HEADER_OFFSET + nodeIndex, TNodeType.Projection, null, attrs || null);
+  const tProjectionNode = getOrCreateTNode(
+    tView,
+    HEADER_OFFSET + nodeIndex,
+    TNodeType.Projection,
+    null,
+    attrs || null,
+  );
 
   // We can't use viewData[HOST_NODE] because projection nodes can be nested in embedded views.
   if (tProjectionNode.projection === null) {
@@ -163,8 +198,9 @@ export function ɵɵprojection(
   if (isEmpty && fallbackIndex !== null) {
     insertFallbackContent(lView, tView, fallbackIndex);
   } else if (
-      isNodeCreationMode &&
-      (tProjectionNode.flags & TNodeFlags.isDetached) !== TNodeFlags.isDetached) {
+    isNodeCreationMode &&
+    (tProjectionNode.flags & TNodeFlags.isDetached) !== TNodeFlags.isDetached
+  ) {
     // re-distribution of projectable nodes is stored on a component's view level
     applyProjection(tView, lView, tProjectionNode);
   }
@@ -179,8 +215,13 @@ function insertFallbackContent(lView: LView, tView: TView, fallbackIndex: number
   ngDevMode && assertLContainer(fallbackLContainer);
 
   const dehydratedView = findMatchingDehydratedView(fallbackLContainer, fallbackTNode.tView!.ssrId);
-  const fallbackLView =
-      createAndRenderEmbeddedLView(lView, fallbackTNode, undefined, {dehydratedView});
+  const fallbackLView = createAndRenderEmbeddedLView(lView, fallbackTNode, undefined, {
+    dehydratedView,
+  });
   addLViewToLContainer(
-      fallbackLContainer, fallbackLView, 0, shouldAddViewToDom(fallbackTNode, dehydratedView));
+    fallbackLContainer,
+    fallbackLView,
+    0,
+    shouldAddViewToDom(fallbackTNode, dehydratedView),
+  );
 }
diff --git a/packages/core/src/render3/instructions/property.ts b/packages/core/src/render3/instructions/property.ts
index 565e7441bfcaf..ed3c359da5a41 100644
--- a/packages/core/src/render3/instructions/property.ts
+++ b/packages/core/src/render3/instructions/property.ts
@@ -11,8 +11,11 @@ import {SanitizerFn} from '../interfaces/sanitization';
 import {LView, RENDERER, TView} from '../interfaces/view';
 import {getLView, getSelectedTNode, getTView, nextBindingIndex} from '../state';
 
-import {elementPropertyInternal, setInputsForProperty, storePropertyBindingMetadata} from './shared';
-
+import {
+  elementPropertyInternal,
+  setInputsForProperty,
+  storePropertyBindingMetadata,
+} from './shared';
 
 /**
  * Update a property on a selected element.
@@ -33,14 +36,25 @@ import {elementPropertyInternal, setInputsForProperty, storePropertyBindingMetad
  * @codeGenApi
  */
 export function ɵɵproperty<T>(
-    propName: string, value: T, sanitizer?: SanitizerFn|null): typeof ɵɵproperty {
+  propName: string,
+  value: T,
+  sanitizer?: SanitizerFn | null,
+): typeof ɵɵproperty {
   const lView = getLView();
   const bindingIndex = nextBindingIndex();
   if (bindingUpdated(lView, bindingIndex, value)) {
     const tView = getTView();
     const tNode = getSelectedTNode();
     elementPropertyInternal(
-        tView, tNode, lView, propName, value, lView[RENDERER], sanitizer, false);
+      tView,
+      tNode,
+      lView,
+      propName,
+      value,
+      lView[RENDERER],
+      sanitizer,
+      false,
+    );
     ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, bindingIndex);
   }
   return ɵɵproperty;
@@ -51,7 +65,12 @@ export function ɵɵproperty<T>(
  * directive input.
  */
 export function setDirectiveInputsWhichShadowsStyling(
-    tView: TView, tNode: TNode, lView: LView, value: any, isClassBased: boolean) {
+  tView: TView,
+  tNode: TNode,
+  lView: LView,
+  value: any,
+  isClassBased: boolean,
+) {
   const inputs = tNode.inputs!;
   const property = isClassBased ? 'class' : 'style';
   // We support both 'class' and `className` hence the fallback.
diff --git a/packages/core/src/render3/instructions/property_interpolation.ts b/packages/core/src/render3/instructions/property_interpolation.ts
index 37cf538b884bb..c8b835eb1dc38 100644
--- a/packages/core/src/render3/instructions/property_interpolation.ts
+++ b/packages/core/src/render3/instructions/property_interpolation.ts
@@ -10,10 +10,19 @@ import {RENDERER} from '../interfaces/view';
 import {getBindingIndex, getLView, getSelectedTNode, getTView} from '../state';
 import {NO_CHANGE} from '../tokens';
 
-import {interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV} from './interpolation';
+import {
+  interpolation1,
+  interpolation2,
+  interpolation3,
+  interpolation4,
+  interpolation5,
+  interpolation6,
+  interpolation7,
+  interpolation8,
+  interpolationV,
+} from './interpolation';
 import {elementPropertyInternal, storePropertyBindingMetadata} from './shared';
 
-
 /**
  *
  * Update an interpolated property on an element with a lone bound value
@@ -44,12 +53,14 @@ import {elementPropertyInternal, storePropertyBindingMetadata} from './shared';
  * @codeGenApi
  */
 export function ɵɵpropertyInterpolate(
-    propName: string, v0: any, sanitizer?: SanitizerFn): typeof ɵɵpropertyInterpolate {
+  propName: string,
+  v0: any,
+  sanitizer?: SanitizerFn,
+): typeof ɵɵpropertyInterpolate {
   ɵɵpropertyInterpolate1(propName, '', v0, '', sanitizer);
   return ɵɵpropertyInterpolate;
 }
 
-
 /**
  *
  * Update an interpolated property on an element with single bound value surrounded by text.
@@ -79,18 +90,36 @@ export function ɵɵpropertyInterpolate(
  * @codeGenApi
  */
 export function ɵɵpropertyInterpolate1(
-    propName: string, prefix: string, v0: any, suffix: string,
-    sanitizer?: SanitizerFn): typeof ɵɵpropertyInterpolate1 {
+  propName: string,
+  prefix: string,
+  v0: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+): typeof ɵɵpropertyInterpolate1 {
   const lView = getLView();
   const interpolatedValue = interpolation1(lView, prefix, v0, suffix);
   if (interpolatedValue !== NO_CHANGE) {
     const tView = getTView();
     const tNode = getSelectedTNode();
     elementPropertyInternal(
-        tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false);
+      tView,
+      tNode,
+      lView,
+      propName,
+      interpolatedValue,
+      lView[RENDERER],
+      sanitizer,
+      false,
+    );
     ngDevMode &&
-        storePropertyBindingMetadata(
-            tView.data, tNode, propName, getBindingIndex() - 1, prefix, suffix);
+      storePropertyBindingMetadata(
+        tView.data,
+        tNode,
+        propName,
+        getBindingIndex() - 1,
+        prefix,
+        suffix,
+      );
   }
   return ɵɵpropertyInterpolate1;
 }
@@ -126,18 +155,39 @@ export function ɵɵpropertyInterpolate1(
  * @codeGenApi
  */
 export function ɵɵpropertyInterpolate2(
-    propName: string, prefix: string, v0: any, i0: string, v1: any, suffix: string,
-    sanitizer?: SanitizerFn): typeof ɵɵpropertyInterpolate2 {
+  propName: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+): typeof ɵɵpropertyInterpolate2 {
   const lView = getLView();
   const interpolatedValue = interpolation2(lView, prefix, v0, i0, v1, suffix);
   if (interpolatedValue !== NO_CHANGE) {
     const tView = getTView();
     const tNode = getSelectedTNode();
     elementPropertyInternal(
-        tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false);
+      tView,
+      tNode,
+      lView,
+      propName,
+      interpolatedValue,
+      lView[RENDERER],
+      sanitizer,
+      false,
+    );
     ngDevMode &&
-        storePropertyBindingMetadata(
-            tView.data, tNode, propName, getBindingIndex() - 2, prefix, i0, suffix);
+      storePropertyBindingMetadata(
+        tView.data,
+        tNode,
+        propName,
+        getBindingIndex() - 2,
+        prefix,
+        i0,
+        suffix,
+      );
   }
   return ɵɵpropertyInterpolate2;
 }
@@ -176,18 +226,42 @@ export function ɵɵpropertyInterpolate2(
  * @codeGenApi
  */
 export function ɵɵpropertyInterpolate3(
-    propName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any,
-    suffix: string, sanitizer?: SanitizerFn): typeof ɵɵpropertyInterpolate3 {
+  propName: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+): typeof ɵɵpropertyInterpolate3 {
   const lView = getLView();
   const interpolatedValue = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix);
   if (interpolatedValue !== NO_CHANGE) {
     const tView = getTView();
     const tNode = getSelectedTNode();
     elementPropertyInternal(
-        tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false);
+      tView,
+      tNode,
+      lView,
+      propName,
+      interpolatedValue,
+      lView[RENDERER],
+      sanitizer,
+      false,
+    );
     ngDevMode &&
-        storePropertyBindingMetadata(
-            tView.data, tNode, propName, getBindingIndex() - 3, prefix, i0, i1, suffix);
+      storePropertyBindingMetadata(
+        tView.data,
+        tNode,
+        propName,
+        getBindingIndex() - 3,
+        prefix,
+        i0,
+        i1,
+        suffix,
+      );
   }
   return ɵɵpropertyInterpolate3;
 }
@@ -228,18 +302,45 @@ export function ɵɵpropertyInterpolate3(
  * @codeGenApi
  */
 export function ɵɵpropertyInterpolate4(
-    propName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, suffix: string, sanitizer?: SanitizerFn): typeof ɵɵpropertyInterpolate4 {
+  propName: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+): typeof ɵɵpropertyInterpolate4 {
   const lView = getLView();
   const interpolatedValue = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix);
   if (interpolatedValue !== NO_CHANGE) {
     const tView = getTView();
     const tNode = getSelectedTNode();
     elementPropertyInternal(
-        tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false);
+      tView,
+      tNode,
+      lView,
+      propName,
+      interpolatedValue,
+      lView[RENDERER],
+      sanitizer,
+      false,
+    );
     ngDevMode &&
-        storePropertyBindingMetadata(
-            tView.data, tNode, propName, getBindingIndex() - 4, prefix, i0, i1, i2, suffix);
+      storePropertyBindingMetadata(
+        tView.data,
+        tNode,
+        propName,
+        getBindingIndex() - 4,
+        prefix,
+        i0,
+        i1,
+        i2,
+        suffix,
+      );
   }
   return ɵɵpropertyInterpolate4;
 }
@@ -282,20 +383,61 @@ export function ɵɵpropertyInterpolate4(
  * @codeGenApi
  */
 export function ɵɵpropertyInterpolate5(
-    propName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, suffix: string,
-    sanitizer?: SanitizerFn): typeof ɵɵpropertyInterpolate5 {
+  propName: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+): typeof ɵɵpropertyInterpolate5 {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
+  const interpolatedValue = interpolation5(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    suffix,
+  );
   if (interpolatedValue !== NO_CHANGE) {
     const tView = getTView();
     const tNode = getSelectedTNode();
     elementPropertyInternal(
-        tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false);
+      tView,
+      tNode,
+      lView,
+      propName,
+      interpolatedValue,
+      lView[RENDERER],
+      sanitizer,
+      false,
+    );
     ngDevMode &&
-        storePropertyBindingMetadata(
-            tView.data, tNode, propName, getBindingIndex() - 5, prefix, i0, i1, i2, i3, suffix);
+      storePropertyBindingMetadata(
+        tView.data,
+        tNode,
+        propName,
+        getBindingIndex() - 5,
+        prefix,
+        i0,
+        i1,
+        i2,
+        i3,
+        suffix,
+      );
   }
   return ɵɵpropertyInterpolate5;
 }
@@ -340,20 +482,66 @@ export function ɵɵpropertyInterpolate5(
  * @codeGenApi
  */
 export function ɵɵpropertyInterpolate6(
-    propName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, i4: string, v5: any, suffix: string,
-    sanitizer?: SanitizerFn): typeof ɵɵpropertyInterpolate6 {
+  propName: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+): typeof ɵɵpropertyInterpolate6 {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix);
+  const interpolatedValue = interpolation6(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    suffix,
+  );
   if (interpolatedValue !== NO_CHANGE) {
     const tView = getTView();
     const tNode = getSelectedTNode();
     elementPropertyInternal(
-        tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false);
+      tView,
+      tNode,
+      lView,
+      propName,
+      interpolatedValue,
+      lView[RENDERER],
+      sanitizer,
+      false,
+    );
     ngDevMode &&
-        storePropertyBindingMetadata(
-            tView.data, tNode, propName, getBindingIndex() - 6, prefix, i0, i1, i2, i3, i4, suffix);
+      storePropertyBindingMetadata(
+        tView.data,
+        tNode,
+        propName,
+        getBindingIndex() - 6,
+        prefix,
+        i0,
+        i1,
+        i2,
+        i3,
+        i4,
+        suffix,
+      );
   }
   return ɵɵpropertyInterpolate6;
 }
@@ -400,21 +588,71 @@ export function ɵɵpropertyInterpolate6(
  * @codeGenApi
  */
 export function ɵɵpropertyInterpolate7(
-    propName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string,
-    sanitizer?: SanitizerFn): typeof ɵɵpropertyInterpolate7 {
+  propName: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  i5: string,
+  v6: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+): typeof ɵɵpropertyInterpolate7 {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix);
+  const interpolatedValue = interpolation7(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    i5,
+    v6,
+    suffix,
+  );
   if (interpolatedValue !== NO_CHANGE) {
     const tView = getTView();
     const tNode = getSelectedTNode();
     elementPropertyInternal(
-        tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false);
+      tView,
+      tNode,
+      lView,
+      propName,
+      interpolatedValue,
+      lView[RENDERER],
+      sanitizer,
+      false,
+    );
     ngDevMode &&
-        storePropertyBindingMetadata(
-            tView.data, tNode, propName, getBindingIndex() - 7, prefix, i0, i1, i2, i3, i4, i5,
-            suffix);
+      storePropertyBindingMetadata(
+        tView.data,
+        tNode,
+        propName,
+        getBindingIndex() - 7,
+        prefix,
+        i0,
+        i1,
+        i2,
+        i3,
+        i4,
+        i5,
+        suffix,
+      );
   }
   return ɵɵpropertyInterpolate7;
 }
@@ -463,21 +701,76 @@ export function ɵɵpropertyInterpolate7(
  * @codeGenApi
  */
 export function ɵɵpropertyInterpolate8(
-    propName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any,
-    suffix: string, sanitizer?: SanitizerFn): typeof ɵɵpropertyInterpolate8 {
+  propName: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  i5: string,
+  v6: any,
+  i6: string,
+  v7: any,
+  suffix: string,
+  sanitizer?: SanitizerFn,
+): typeof ɵɵpropertyInterpolate8 {
   const lView = getLView();
   const interpolatedValue = interpolation8(
-      lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix);
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    i5,
+    v6,
+    i6,
+    v7,
+    suffix,
+  );
   if (interpolatedValue !== NO_CHANGE) {
     const tView = getTView();
     const tNode = getSelectedTNode();
     elementPropertyInternal(
-        tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false);
+      tView,
+      tNode,
+      lView,
+      propName,
+      interpolatedValue,
+      lView[RENDERER],
+      sanitizer,
+      false,
+    );
     ngDevMode &&
-        storePropertyBindingMetadata(
-            tView.data, tNode, propName, getBindingIndex() - 8, prefix, i0, i1, i2, i3, i4, i5, i6,
-            suffix);
+      storePropertyBindingMetadata(
+        tView.data,
+        tNode,
+        propName,
+        getBindingIndex() - 8,
+        prefix,
+        i0,
+        i1,
+        i2,
+        i3,
+        i4,
+        i5,
+        i6,
+        suffix,
+      );
   }
   return ɵɵpropertyInterpolate8;
 }
@@ -513,22 +806,37 @@ export function ɵɵpropertyInterpolate8(
  * @codeGenApi
  */
 export function ɵɵpropertyInterpolateV(
-    propName: string, values: any[], sanitizer?: SanitizerFn): typeof ɵɵpropertyInterpolateV {
+  propName: string,
+  values: any[],
+  sanitizer?: SanitizerFn,
+): typeof ɵɵpropertyInterpolateV {
   const lView = getLView();
   const interpolatedValue = interpolationV(lView, values);
   if (interpolatedValue !== NO_CHANGE) {
     const tView = getTView();
     const tNode = getSelectedTNode();
     elementPropertyInternal(
-        tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false);
+      tView,
+      tNode,
+      lView,
+      propName,
+      interpolatedValue,
+      lView[RENDERER],
+      sanitizer,
+      false,
+    );
     if (ngDevMode) {
-      const interpolationInBetween = [values[0]];  // prefix
+      const interpolationInBetween = [values[0]]; // prefix
       for (let i = 2; i < values.length; i += 2) {
         interpolationInBetween.push(values[i]);
       }
       storePropertyBindingMetadata(
-          tView.data, tNode, propName, getBindingIndex() - interpolationInBetween.length + 1,
-          ...interpolationInBetween);
+        tView.data,
+        tNode,
+        propName,
+        getBindingIndex() - interpolationInBetween.length + 1,
+        ...interpolationInBetween,
+      );
     }
   }
   return ɵɵpropertyInterpolateV;
diff --git a/packages/core/src/render3/instructions/queries.ts b/packages/core/src/render3/instructions/queries.ts
index 1a2868d1bf747..86626e43f0721 100644
--- a/packages/core/src/render3/instructions/queries.ts
+++ b/packages/core/src/render3/instructions/queries.ts
@@ -10,7 +10,13 @@ import {ProviderToken} from '../../di';
 import {unwrapElementRef} from '../../linker/element_ref';
 import {QueryList} from '../../linker/query_list';
 import {QueryFlags} from '../interfaces/query';
-import {createContentQuery, createViewQuery, getQueryResults, getTQuery, loadQueryInternal} from '../query';
+import {
+  createContentQuery,
+  createViewQuery,
+  getQueryResults,
+  getTQuery,
+  loadQueryInternal,
+} from '../query';
 import {getCurrentQueryIndex, getLView, getTView, setCurrentQueryIndex} from '../state';
 import {isCreationMode} from '../util/view_utils';
 
@@ -27,8 +33,11 @@ import {isCreationMode} from '../util/view_utils';
  * @codeGenApi
  */
 export function ɵɵcontentQuery<T>(
-    directiveIndex: number, predicate: ProviderToken<unknown>|string|string[], flags: QueryFlags,
-    read?: any): void {
+  directiveIndex: number,
+  predicate: ProviderToken<unknown> | string | string[],
+  flags: QueryFlags,
+  read?: any,
+): void {
   createContentQuery<T>(directiveIndex, predicate, flags, read);
 }
 
@@ -42,7 +51,10 @@ export function ɵɵcontentQuery<T>(
  * @codeGenApi
  */
 export function ɵɵviewQuery<T>(
-    predicate: ProviderToken<unknown>|string|string[], flags: QueryFlags, read?: any): void {
+  predicate: ProviderToken<unknown> | string | string[],
+  flags: QueryFlags,
+  read?: any,
+): void {
   createViewQuery(predicate, flags, read);
 }
 
@@ -63,9 +75,11 @@ export function ɵɵqueryRefresh(queryList: QueryList<any>): boolean {
   setCurrentQueryIndex(queryIndex + 1);
 
   const tQuery = getTQuery(tView, queryIndex);
-  if (queryList.dirty &&
-      (isCreationMode(lView) ===
-       ((tQuery.metadata.flags & QueryFlags.isStatic) === QueryFlags.isStatic))) {
+  if (
+    queryList.dirty &&
+    isCreationMode(lView) ===
+      ((tQuery.metadata.flags & QueryFlags.isStatic) === QueryFlags.isStatic)
+  ) {
     if (tQuery.matches === null) {
       queryList.reset([]);
     } else {
diff --git a/packages/core/src/render3/instructions/queries_signals.ts b/packages/core/src/render3/instructions/queries_signals.ts
index 9247352821350..093ab829af28f 100644
--- a/packages/core/src/render3/instructions/queries_signals.ts
+++ b/packages/core/src/render3/instructions/queries_signals.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {ProviderToken} from '../../di/provider_token';
 import {QueryFlags} from '../interfaces/query';
 import {createContentQuery, createViewQuery} from '../query';
@@ -26,8 +25,12 @@ import {getCurrentQueryIndex, setCurrentQueryIndex} from '../state';
  * @codeGenApi
  */
 export function ɵɵcontentQuerySignal<T>(
-  directiveIndex: number, target: Signal<T>, predicate: ProviderToken<unknown>|string[],
-    flags: QueryFlags, read?: any): void {
+  directiveIndex: number,
+  target: Signal<T>,
+  predicate: ProviderToken<unknown> | string[],
+  flags: QueryFlags,
+  read?: any,
+): void {
   bindQueryToSignal(target, createContentQuery(directiveIndex, predicate, flags, read));
 }
 
@@ -43,8 +46,11 @@ export function ɵɵcontentQuerySignal<T>(
  * @codeGenApi
  */
 export function ɵɵviewQuerySignal(
-    target: Signal<unknown>, predicate: ProviderToken<unknown>|string[], flags: QueryFlags,
-    read?: ProviderToken<unknown>): void {
+  target: Signal<unknown>,
+  predicate: ProviderToken<unknown> | string[],
+  flags: QueryFlags,
+  read?: ProviderToken<unknown>,
+): void {
   bindQueryToSignal(target, createViewQuery(predicate, flags, read));
 }
 
diff --git a/packages/core/src/render3/instructions/render.ts b/packages/core/src/render3/instructions/render.ts
index 5d649bb49c5e5..464e4dc2f2e26 100644
--- a/packages/core/src/render3/instructions/render.ts
+++ b/packages/core/src/render3/instructions/render.ts
@@ -9,7 +9,18 @@
 import {retrieveHydrationInfo} from '../../hydration/utils';
 import {assertEqual, assertNotReactive} from '../../util/assert';
 import {RenderFlags} from '../interfaces/definition';
-import {CONTEXT, FLAGS, HOST, HYDRATION, INJECTOR, LView, LViewFlags, QUERIES, TVIEW, TView} from '../interfaces/view';
+import {
+  CONTEXT,
+  FLAGS,
+  HOST,
+  HYDRATION,
+  INJECTOR,
+  LView,
+  LViewFlags,
+  QUERIES,
+  TVIEW,
+  TView,
+} from '../interfaces/view';
 import {enterView, leaveView} from '../state';
 import {getComponentLViewByIndex, isCreationMode} from '../util/view_utils';
 
@@ -119,7 +130,6 @@ export function renderView<T>(tView: TView, lView: LView<T>, context: T): void {
     if (components !== null) {
       renderChildComponents(lView, components);
     }
-
   } catch (error) {
     // If we didn't manage to get past the first template pass due to
     // an error, mark the view as corrupted so we can try to recover.
diff --git a/packages/core/src/render3/instructions/shared.ts b/packages/core/src/render3/instructions/shared.ts
index 55003b7b3af8b..611650802df59 100644
--- a/packages/core/src/render3/instructions/shared.ts
+++ b/packages/core/src/render3/instructions/shared.ts
@@ -19,40 +19,136 @@ import {DoCheck, OnChanges, OnInit} from '../../interface/lifecycle_hooks';
 import {Writable} from '../../interface/type';
 import {SchemaMetadata} from '../../metadata/schema';
 import {ViewEncapsulation} from '../../metadata/view';
-import {validateAgainstEventAttributes, validateAgainstEventProperties} from '../../sanitization/sanitization';
-import {assertDefined, assertEqual, assertGreaterThan, assertGreaterThanOrEqual, assertIndexInRange, assertNotEqual, assertNotSame, assertSame, assertString} from '../../util/assert';
+import {
+  validateAgainstEventAttributes,
+  validateAgainstEventProperties,
+} from '../../sanitization/sanitization';
+import {
+  assertDefined,
+  assertEqual,
+  assertGreaterThan,
+  assertGreaterThanOrEqual,
+  assertIndexInRange,
+  assertNotEqual,
+  assertNotSame,
+  assertSame,
+  assertString,
+} from '../../util/assert';
 import {escapeCommentText} from '../../util/dom';
 import {normalizeDebugBindingName, normalizeDebugBindingValue} from '../../util/ng_reflect';
 import {stringify} from '../../util/stringify';
 import {applyValueToInputField} from '../apply_value_input_field';
-import {assertFirstCreatePass, assertFirstUpdatePass, assertLView, assertNoDuplicateDirectives, assertTNodeForLView, assertTNodeForTView} from '../assert';
+import {
+  assertFirstCreatePass,
+  assertFirstUpdatePass,
+  assertLView,
+  assertNoDuplicateDirectives,
+  assertTNodeForLView,
+  assertTNodeForTView,
+} from '../assert';
 import {attachPatchData} from '../context_discovery';
 import {getFactoryDef} from '../definition_factory';
 import {diPublicInInjector, getNodeInjectable, getOrCreateNodeInjectorForNode} from '../di';
 import {throwMultipleComponentError} from '../errors';
 import {AttributeMarker} from '../interfaces/attribute_marker';
 import {CONTAINER_HEADER_OFFSET, LContainer} from '../interfaces/container';
-import {ComponentDef, ComponentTemplate, DirectiveDef, DirectiveDefListOrFactory, HostBindingsFunction, HostDirectiveBindingMap, HostDirectiveDefs, PipeDefListOrFactory, RenderFlags, ViewQueriesFunction} from '../interfaces/definition';
+import {
+  ComponentDef,
+  ComponentTemplate,
+  DirectiveDef,
+  DirectiveDefListOrFactory,
+  HostBindingsFunction,
+  HostDirectiveBindingMap,
+  HostDirectiveDefs,
+  PipeDefListOrFactory,
+  RenderFlags,
+  ViewQueriesFunction,
+} from '../interfaces/definition';
 import {NodeInjectorFactory} from '../interfaces/injector';
 import {InputFlags} from '../interfaces/input_flags';
 import {getUniqueLViewId} from '../interfaces/lview_tracking';
-import {InitialInputData, InitialInputs, LocalRefExtractor, NodeInputBindings, NodeOutputBindings, TAttributes, TConstantsOrFactory, TContainerNode, TDirectiveHostNode, TElementContainerNode, TElementNode, TIcuContainerNode, TNode, TNodeFlags, TNodeType, TProjectionNode} from '../interfaces/node';
+import {
+  InitialInputData,
+  InitialInputs,
+  LocalRefExtractor,
+  NodeInputBindings,
+  NodeOutputBindings,
+  TAttributes,
+  TConstantsOrFactory,
+  TContainerNode,
+  TDirectiveHostNode,
+  TElementContainerNode,
+  TElementNode,
+  TIcuContainerNode,
+  TNode,
+  TNodeFlags,
+  TNodeType,
+  TProjectionNode,
+} from '../interfaces/node';
 import {Renderer} from '../interfaces/renderer';
 import {RComment, RElement, RNode, RText} from '../interfaces/renderer_dom';
 import {SanitizerFn} from '../interfaces/sanitization';
 import {TStylingRange} from '../interfaces/styling';
 import {isComponentDef, isComponentHost, isContentQueryHost} from '../interfaces/type_checks';
-import {CHILD_HEAD, CHILD_TAIL, CLEANUP, CONTEXT, DECLARATION_COMPONENT_VIEW, DECLARATION_VIEW, EMBEDDED_VIEW_INJECTOR, ENVIRONMENT, FLAGS, HEADER_OFFSET, HOST, HostBindingOpCodes, HYDRATION, ID, INJECTOR, LView, LViewEnvironment, LViewFlags, NEXT, PARENT, RENDERER, T_HOST, TData, TVIEW, TView, TViewType} from '../interfaces/view';
+import {
+  CHILD_HEAD,
+  CHILD_TAIL,
+  CLEANUP,
+  CONTEXT,
+  DECLARATION_COMPONENT_VIEW,
+  DECLARATION_VIEW,
+  EMBEDDED_VIEW_INJECTOR,
+  ENVIRONMENT,
+  FLAGS,
+  HEADER_OFFSET,
+  HOST,
+  HostBindingOpCodes,
+  HYDRATION,
+  ID,
+  INJECTOR,
+  LView,
+  LViewEnvironment,
+  LViewFlags,
+  NEXT,
+  PARENT,
+  RENDERER,
+  T_HOST,
+  TData,
+  TVIEW,
+  TView,
+  TViewType,
+} from '../interfaces/view';
 import {assertPureTNodeType, assertTNodeType} from '../node_assert';
 import {clearElementContents, updateTextNode} from '../node_manipulation';
 import {isInlineTemplate, isNodeMatchingSelectorList} from '../node_selector_matcher';
 import {profiler, ProfilerEvent} from '../profiler';
-import {getBindingsEnabled, getCurrentDirectiveIndex, getCurrentParentTNode, getCurrentTNodePlaceholderOk, getSelectedIndex, isCurrentTNodeParent, isInCheckNoChangesMode, isInI18nBlock, isInSkipHydrationBlock, setBindingRootForHostBindings, setCurrentDirectiveIndex, setCurrentQueryIndex, setCurrentTNode, setSelectedIndex} from '../state';
+import {
+  getBindingsEnabled,
+  getCurrentDirectiveIndex,
+  getCurrentParentTNode,
+  getCurrentTNodePlaceholderOk,
+  getSelectedIndex,
+  isCurrentTNodeParent,
+  isInCheckNoChangesMode,
+  isInI18nBlock,
+  isInSkipHydrationBlock,
+  setBindingRootForHostBindings,
+  setCurrentDirectiveIndex,
+  setCurrentQueryIndex,
+  setCurrentTNode,
+  setSelectedIndex,
+} from '../state';
 import {NO_CHANGE} from '../tokens';
 import {mergeHostAttrs} from '../util/attrs_utils';
 import {INTERPOLATION_DELIMITER} from '../util/misc_utils';
 import {renderStringify} from '../util/stringify_utils';
-import {getComponentLViewByIndex, getNativeByIndex, getNativeByTNode, resetPreOrderHookFlags, unwrapLView} from '../util/view_utils';
+import {
+  getComponentLViewByIndex,
+  getNativeByIndex,
+  getNativeByTNode,
+  resetPreOrderHookFlags,
+  unwrapLView,
+} from '../util/view_utils';
 
 import {selectIndexInternal} from './advance';
 import {ɵɵdirectiveInject} from './di';
@@ -93,38 +189,54 @@ export function processHostBindingOpCodes(tView: TView, lView: LView): void {
 }
 
 export function createLView<T>(
-    parentLView: LView|null, tView: TView, context: T|null, flags: LViewFlags, host: RElement|null,
-    tHostNode: TNode|null, environment: LViewEnvironment|null, renderer: Renderer|null,
-    injector: Injector|null, embeddedViewInjector: Injector|null,
-    hydrationInfo: DehydratedView|null): LView<T> {
+  parentLView: LView | null,
+  tView: TView,
+  context: T | null,
+  flags: LViewFlags,
+  host: RElement | null,
+  tHostNode: TNode | null,
+  environment: LViewEnvironment | null,
+  renderer: Renderer | null,
+  injector: Injector | null,
+  embeddedViewInjector: Injector | null,
+  hydrationInfo: DehydratedView | null,
+): LView<T> {
   const lView = tView.blueprint.slice() as LView;
   lView[HOST] = host;
-  lView[FLAGS] = flags | LViewFlags.CreationMode | LViewFlags.Attached | LViewFlags.FirstLViewPass |
-      LViewFlags.Dirty;
-  if (embeddedViewInjector !== null ||
-      (parentLView && (parentLView[FLAGS] & LViewFlags.HasEmbeddedViewInjector))) {
+  lView[FLAGS] =
+    flags |
+    LViewFlags.CreationMode |
+    LViewFlags.Attached |
+    LViewFlags.FirstLViewPass |
+    LViewFlags.Dirty;
+  if (
+    embeddedViewInjector !== null ||
+    (parentLView && parentLView[FLAGS] & LViewFlags.HasEmbeddedViewInjector)
+  ) {
     lView[FLAGS] |= LViewFlags.HasEmbeddedViewInjector;
   }
   resetPreOrderHookFlags(lView);
   ngDevMode && tView.declTNode && parentLView && assertTNodeForLView(tView.declTNode, parentLView);
   lView[PARENT] = lView[DECLARATION_VIEW] = parentLView;
   lView[CONTEXT] = context;
-  lView[ENVIRONMENT] = (environment || parentLView && parentLView[ENVIRONMENT])!;
+  lView[ENVIRONMENT] = (environment || (parentLView && parentLView[ENVIRONMENT]))!;
   ngDevMode && assertDefined(lView[ENVIRONMENT], 'LViewEnvironment is required');
-  lView[RENDERER] = (renderer || parentLView && parentLView[RENDERER])!;
+  lView[RENDERER] = (renderer || (parentLView && parentLView[RENDERER]))!;
   ngDevMode && assertDefined(lView[RENDERER], 'Renderer is required');
-  lView[INJECTOR as any] = injector || parentLView && parentLView[INJECTOR] || null;
+  lView[INJECTOR as any] = injector || (parentLView && parentLView[INJECTOR]) || null;
   lView[T_HOST] = tHostNode;
   lView[ID] = getUniqueLViewId();
   lView[HYDRATION] = hydrationInfo;
   lView[EMBEDDED_VIEW_INJECTOR as any] = embeddedViewInjector;
 
   ngDevMode &&
-      assertEqual(
-          tView.type == TViewType.Embedded ? parentLView !== null : true, true,
-          'Embedded views must have parentLView');
+    assertEqual(
+      tView.type == TViewType.Embedded ? parentLView !== null : true,
+      true,
+      'Embedded views must have parentLView',
+    );
   lView[DECLARATION_COMPONENT_VIEW] =
-      tView.type == TViewType.Embedded ? parentLView![DECLARATION_COMPONENT_VIEW] : lView;
+    tView.type == TViewType.Embedded ? parentLView![DECLARATION_COMPONENT_VIEW] : lView;
   return lView as LView<T>;
 }
 
@@ -140,26 +252,51 @@ export function createLView<T>(
  * @param attrs Any attrs for the native element, if applicable
  */
 export function getOrCreateTNode(
-    tView: TView, index: number, type: TNodeType.Element|TNodeType.Text, name: string|null,
-    attrs: TAttributes|null): TElementNode;
+  tView: TView,
+  index: number,
+  type: TNodeType.Element | TNodeType.Text,
+  name: string | null,
+  attrs: TAttributes | null,
+): TElementNode;
 export function getOrCreateTNode(
-    tView: TView, index: number, type: TNodeType.Container, name: string|null,
-    attrs: TAttributes|null): TContainerNode;
+  tView: TView,
+  index: number,
+  type: TNodeType.Container,
+  name: string | null,
+  attrs: TAttributes | null,
+): TContainerNode;
 export function getOrCreateTNode(
-    tView: TView, index: number, type: TNodeType.Projection, name: null,
-    attrs: TAttributes|null): TProjectionNode;
+  tView: TView,
+  index: number,
+  type: TNodeType.Projection,
+  name: null,
+  attrs: TAttributes | null,
+): TProjectionNode;
 export function getOrCreateTNode(
-    tView: TView, index: number, type: TNodeType.ElementContainer, name: string|null,
-    attrs: TAttributes|null): TElementContainerNode;
+  tView: TView,
+  index: number,
+  type: TNodeType.ElementContainer,
+  name: string | null,
+  attrs: TAttributes | null,
+): TElementContainerNode;
 export function getOrCreateTNode(
-    tView: TView, index: number, type: TNodeType.Icu, name: null,
-    attrs: TAttributes|null): TElementContainerNode;
+  tView: TView,
+  index: number,
+  type: TNodeType.Icu,
+  name: null,
+  attrs: TAttributes | null,
+): TElementContainerNode;
 export function getOrCreateTNode(
-    tView: TView, index: number, type: TNodeType, name: string|null, attrs: TAttributes|null):
-    TElementNode&TContainerNode&TElementContainerNode&TProjectionNode&TIcuContainerNode {
-  ngDevMode && index !== 0 &&  // 0 are bogus nodes and they are OK. See `createContainerRef` in
-                               // `view_engine_compatibility` for additional context.
-      assertGreaterThanOrEqual(index, HEADER_OFFSET, 'TNodes can\'t be in the LView header.');
+  tView: TView,
+  index: number,
+  type: TNodeType,
+  name: string | null,
+  attrs: TAttributes | null,
+): TElementNode & TContainerNode & TElementContainerNode & TProjectionNode & TIcuContainerNode {
+  ngDevMode &&
+    index !== 0 && // 0 are bogus nodes and they are OK. See `createContainerRef` in
+    // `view_engine_compatibility` for additional context.
+    assertGreaterThanOrEqual(index, HEADER_OFFSET, "TNodes can't be in the LView header.");
   // Keep this function short, so that the VM will inline it.
   ngDevMode && assertPureTNodeType(type);
   let tNode = tView.data[index] as TNode;
@@ -182,18 +319,32 @@ export function getOrCreateTNode(
     ngDevMode && assertEqual(index, tNode.index, 'Expecting same index');
   }
   setCurrentTNode(tNode, true);
-  return tNode as TElementNode & TContainerNode & TElementContainerNode & TProjectionNode &
-      TIcuContainerNode;
+  return tNode as TElementNode &
+    TContainerNode &
+    TElementContainerNode &
+    TProjectionNode &
+    TIcuContainerNode;
 }
 
 export function createTNodeAtIndex(
-    tView: TView, index: number, type: TNodeType, name: string|null, attrs: TAttributes|null) {
+  tView: TView,
+  index: number,
+  type: TNodeType,
+  name: string | null,
+  attrs: TAttributes | null,
+) {
   const currentTNode = getCurrentTNodePlaceholderOk();
   const isParent = isCurrentTNodeParent();
   const parent = isParent ? currentTNode : currentTNode && currentTNode.parent;
   // Parents cannot cross component boundaries because components will be used in multiple places.
-  const tNode = tView.data[index] =
-      createTNode(tView, parent as TElementNode | TContainerNode, type, index, name, attrs);
+  const tNode = (tView.data[index] = createTNode(
+    tView,
+    parent as TElementNode | TContainerNode,
+    type,
+    index,
+    name,
+    attrs,
+  ));
   // Assign a pointer to the first child node of a given view. The first node is not always the one
   // at index 0, in case of i18n, index 0 can be the instruction `i18nStart` and the first node has
   // the index 1 or more, so we can't just check node index.
@@ -230,14 +381,21 @@ export function createTNodeAtIndex(
  * @param initialValue Initial value to store in blueprint
  */
 export function allocExpando(
-    tView: TView, lView: LView, numSlotsToAlloc: number, initialValue: any): number {
+  tView: TView,
+  lView: LView,
+  numSlotsToAlloc: number,
+  initialValue: any,
+): number {
   if (numSlotsToAlloc === 0) return -1;
   if (ngDevMode) {
     assertFirstCreatePass(tView);
     assertSame(tView, lView[TVIEW], '`LView` must be associated with `TView`!');
     assertEqual(tView.data.length, lView.length, 'Expecting LView to be same size as TView');
     assertEqual(
-        tView.data.length, tView.blueprint.length, 'Expecting Blueprint to be same size as TView');
+      tView.data.length,
+      tView.blueprint.length,
+      'Expecting Blueprint to be same size as TView',
+    );
     assertFirstUpdatePass(tView);
   }
   const allocIdx = lView.length;
@@ -250,7 +408,12 @@ export function allocExpando(
 }
 
 export function executeTemplate<T>(
-    tView: TView, lView: LView<T>, templateFn: ComponentTemplate<T>, rf: RenderFlags, context: T) {
+  tView: TView,
+  lView: LView<T>,
+  templateFn: ComponentTemplate<T>,
+  rf: RenderFlags,
+  context: T,
+) {
   const prevSelectedIndex = getSelectedIndex();
   const isUpdatePhase = rf & RenderFlags.Update;
   try {
@@ -261,15 +424,17 @@ export function executeTemplate<T>(
       selectIndexInternal(tView, lView, HEADER_OFFSET, !!ngDevMode && isInCheckNoChangesMode());
     }
 
-    const preHookType =
-        isUpdatePhase ? ProfilerEvent.TemplateUpdateStart : ProfilerEvent.TemplateCreateStart;
+    const preHookType = isUpdatePhase
+      ? ProfilerEvent.TemplateUpdateStart
+      : ProfilerEvent.TemplateCreateStart;
     profiler(preHookType, context as unknown as {});
     templateFn(rf, context);
   } finally {
     setSelectedIndex(prevSelectedIndex);
 
-    const postHookType =
-        isUpdatePhase ? ProfilerEvent.TemplateUpdateEnd : ProfilerEvent.TemplateCreateEnd;
+    const postHookType = isUpdatePhase
+      ? ProfilerEvent.TemplateUpdateEnd
+      : ProfilerEvent.TemplateCreateEnd;
     profiler(postHookType, context as unknown as {});
   }
 }
@@ -289,8 +454,10 @@ export function executeContentQueries(tView: TView, tNode: TNode, lView: LView)
         if (def.contentQueries) {
           const directiveInstance = lView[directiveIndex];
           ngDevMode &&
-              assertDefined(
-                  directiveIndex, 'Incorrect reference to a directive defining a content query');
+            assertDefined(
+              directiveIndex,
+              'Incorrect reference to a directive defining a content query',
+            );
           def.contentQueries(RenderFlags.Create, directiveInstance, directiveIndex);
         }
       }
@@ -300,7 +467,6 @@ export function executeContentQueries(tView: TView, tNode: TNode, lView: LView)
   }
 }
 
-
 /**
  * Creates directive instances.
  */
@@ -317,17 +483,22 @@ export function createDirectivesInstances(tView: TView, lView: LView, tNode: TDi
  * to LView in the same order as they are loaded in the template with load().
  */
 export function saveResolvedLocalsInData(
-    viewData: LView, tNode: TDirectiveHostNode,
-    localRefExtractor: LocalRefExtractor = getNativeByTNode): void {
+  viewData: LView,
+  tNode: TDirectiveHostNode,
+  localRefExtractor: LocalRefExtractor = getNativeByTNode,
+): void {
   const localNames = tNode.localNames;
   if (localNames !== null) {
     let localIndex = tNode.index + 1;
     for (let i = 0; i < localNames.length; i += 2) {
       const index = localNames[i + 1] as number;
-      const value = index === -1 ?
-          localRefExtractor(
-              tNode as TElementNode | TContainerNode | TElementContainerNode, viewData) :
-          viewData[index];
+      const value =
+        index === -1
+          ? localRefExtractor(
+              tNode as TElementNode | TContainerNode | TElementContainerNode,
+              viewData,
+            )
+          : viewData[index];
       viewData[localIndex++] = value;
     }
   }
@@ -349,15 +520,24 @@ export function getOrCreateComponentTView(def: ComponentDef<any>): TView {
     // Declaration node here is null since this function is called when we dynamically create a
     // component and hence there is no declaration.
     const declTNode = null;
-    return def.tView = createTView(
-               TViewType.Component, declTNode, def.template, def.decls, def.vars, def.directiveDefs,
-               def.pipeDefs, def.viewQuery, def.schemas, def.consts, def.id);
+    return (def.tView = createTView(
+      TViewType.Component,
+      declTNode,
+      def.template,
+      def.decls,
+      def.vars,
+      def.directiveDefs,
+      def.pipeDefs,
+      def.viewQuery,
+      def.schemas,
+      def.consts,
+      def.id,
+    ));
   }
 
   return tView;
 }
 
-
 /**
  * Creates a TView instance
  *
@@ -372,10 +552,18 @@ export function getOrCreateComponentTView(def: ComponentDef<any>): TView {
  * @param consts Constants for this view
  */
 export function createTView(
-    type: TViewType, declTNode: TNode|null, templateFn: ComponentTemplate<any>|null, decls: number,
-    vars: number, directives: DirectiveDefListOrFactory|null, pipes: PipeDefListOrFactory|null,
-    viewQuery: ViewQueriesFunction<any>|null, schemas: SchemaMetadata[]|null,
-    constsOrFactory: TConstantsOrFactory|null, ssrId: string|null): TView {
+  type: TViewType,
+  declTNode: TNode | null,
+  templateFn: ComponentTemplate<any> | null,
+  decls: number,
+  vars: number,
+  directives: DirectiveDefListOrFactory | null,
+  pipes: PipeDefListOrFactory | null,
+  viewQuery: ViewQueriesFunction<any> | null,
+  schemas: SchemaMetadata[] | null,
+  constsOrFactory: TConstantsOrFactory | null,
+  ssrId: string | null,
+): TView {
   ngDevMode && ngDevMode.tView++;
   const bindingStartIndex = HEADER_OFFSET + decls;
   // This length does not yet contain host bindings from child directives because at this point,
@@ -384,7 +572,7 @@ export function createTView(
   const initialViewLength = bindingStartIndex + vars;
   const blueprint = createViewBlueprint(bindingStartIndex, initialViewLength);
   const consts = typeof constsOrFactory === 'function' ? constsOrFactory() : constsOrFactory;
-  const tView = blueprint[TVIEW as any] = {
+  const tView = (blueprint[TVIEW as any] = {
     type: type,
     blueprint: blueprint,
     template: templateFn,
@@ -416,7 +604,7 @@ export function createTView(
     consts: consts,
     incompleteFirstPass: false,
     ssrId,
-  };
+  });
   if (ngDevMode) {
     // For performance reasons it is important that the tView retains the same shape during runtime.
     // (To make sure that all of the code is monomorphic.) For this reason we seal the object to
@@ -445,8 +633,11 @@ function createViewBlueprint(bindingStartIndex: number, initialViewLength: numbe
  * @param injector Root view injector instance.
  */
 export function locateHostElement(
-    renderer: Renderer, elementOrSelector: RElement|string, encapsulation: ViewEncapsulation,
-    injector: Injector): RElement {
+  renderer: Renderer,
+  elementOrSelector: RElement | string,
+  encapsulation: ViewEncapsulation,
+  injector: Injector,
+): RElement {
   // Note: we use default value for the `PRESERVE_HOST_CONTENT` here even though it's a
   // tree-shakable one (providedIn:'root'). This code path can be triggered during dynamic
   // component creation (after calling ViewContainerRef.createComponent) when an injector
@@ -515,7 +706,11 @@ export function enableApplyRootElementTransformImpl() {
  * - Index of context we just saved in LView.cleanupInstances
  */
 export function storeCleanupWithContext(
-    tView: TView, lView: LView, context: any, cleanupFn: Function): void {
+  tView: TView,
+  lView: LView,
+  context: any,
+  cleanupFn: Function,
+): void {
   const lCleanup = getOrCreateLViewCleanup(lView);
 
   // Historically the `storeCleanupWithContext` was used to register both framework-level and
@@ -523,8 +718,10 @@ export function storeCleanupWithContext(
   // This dev mode checks assures that user-level cleanup callbacks are _not_ stored in data
   // structures reserved for framework-specific hooks.
   ngDevMode &&
-      assertDefined(
-          context, 'Cleanup context is mandatory when registering framework-level destroy hooks');
+    assertDefined(
+      context,
+      'Cleanup context is mandatory when registering framework-level destroy hooks',
+    );
   lCleanup.push(context);
 
   if (tView.firstCreatePass) {
@@ -550,30 +747,66 @@ export function storeCleanupWithContext(
  * @returns the TNode object
  */
 export function createTNode(
-    tView: TView, tParent: TElementNode|TContainerNode|null, type: TNodeType.Container,
-    index: number, tagName: string|null, attrs: TAttributes|null): TContainerNode;
+  tView: TView,
+  tParent: TElementNode | TContainerNode | null,
+  type: TNodeType.Container,
+  index: number,
+  tagName: string | null,
+  attrs: TAttributes | null,
+): TContainerNode;
 export function createTNode(
-    tView: TView, tParent: TElementNode|TContainerNode|null, type: TNodeType.Element|TNodeType.Text,
-    index: number, tagName: string|null, attrs: TAttributes|null): TElementNode;
+  tView: TView,
+  tParent: TElementNode | TContainerNode | null,
+  type: TNodeType.Element | TNodeType.Text,
+  index: number,
+  tagName: string | null,
+  attrs: TAttributes | null,
+): TElementNode;
 export function createTNode(
-    tView: TView, tParent: TElementNode|TContainerNode|null, type: TNodeType.ElementContainer,
-    index: number, tagName: string|null, attrs: TAttributes|null): TElementContainerNode;
+  tView: TView,
+  tParent: TElementNode | TContainerNode | null,
+  type: TNodeType.ElementContainer,
+  index: number,
+  tagName: string | null,
+  attrs: TAttributes | null,
+): TElementContainerNode;
 export function createTNode(
-    tView: TView, tParent: TElementNode|TContainerNode|null, type: TNodeType.Icu, index: number,
-    tagName: string|null, attrs: TAttributes|null): TIcuContainerNode;
+  tView: TView,
+  tParent: TElementNode | TContainerNode | null,
+  type: TNodeType.Icu,
+  index: number,
+  tagName: string | null,
+  attrs: TAttributes | null,
+): TIcuContainerNode;
 export function createTNode(
-    tView: TView, tParent: TElementNode|TContainerNode|null, type: TNodeType.Projection,
-    index: number, tagName: string|null, attrs: TAttributes|null): TProjectionNode;
+  tView: TView,
+  tParent: TElementNode | TContainerNode | null,
+  type: TNodeType.Projection,
+  index: number,
+  tagName: string | null,
+  attrs: TAttributes | null,
+): TProjectionNode;
 export function createTNode(
-    tView: TView, tParent: TElementNode|TContainerNode|null, type: TNodeType, index: number,
-    tagName: string|null, attrs: TAttributes|null): TNode;
+  tView: TView,
+  tParent: TElementNode | TContainerNode | null,
+  type: TNodeType,
+  index: number,
+  tagName: string | null,
+  attrs: TAttributes | null,
+): TNode;
 export function createTNode(
-    tView: TView, tParent: TElementNode|TContainerNode|null, type: TNodeType, index: number,
-    value: string|null, attrs: TAttributes|null): TNode {
-  ngDevMode && index !== 0 &&  // 0 are bogus nodes and they are OK. See `createContainerRef` in
-                               // `view_engine_compatibility` for additional context.
-      assertGreaterThanOrEqual(index, HEADER_OFFSET, 'TNodes can\'t be in the LView header.');
-  ngDevMode && assertNotSame(attrs, undefined, '\'undefined\' is not valid value for \'attrs\'');
+  tView: TView,
+  tParent: TElementNode | TContainerNode | null,
+  type: TNodeType,
+  index: number,
+  value: string | null,
+  attrs: TAttributes | null,
+): TNode {
+  ngDevMode &&
+    index !== 0 && // 0 are bogus nodes and they are OK. See `createContainerRef` in
+    // `view_engine_compatibility` for additional context.
+    assertGreaterThanOrEqual(index, HEADER_OFFSET, "TNodes can't be in the LView header.");
+  ngDevMode && assertNotSame(attrs, undefined, "'undefined' is not valid value for 'attrs'");
   ngDevMode && ngDevMode.tNode++;
   ngDevMode && tParent && assertTNodeForTView(tParent, tView);
   let injectorIndex = tParent ? tParent.injectorIndex : -1;
@@ -640,9 +873,12 @@ const enum CaptureNodeBindingMode {
  * name inputs/outputs should be exposed under.
  */
 function captureNodeBindings<T>(
-    mode: CaptureNodeBindingMode.Inputs, inputs: DirectiveDef<T>['inputs'], directiveIndex: number,
-    bindingsResult: NodeInputBindings|null,
-    hostDirectiveAliasMap: HostDirectiveBindingMap|null): NodeInputBindings|null;
+  mode: CaptureNodeBindingMode.Inputs,
+  inputs: DirectiveDef<T>['inputs'],
+  directiveIndex: number,
+  bindingsResult: NodeInputBindings | null,
+  hostDirectiveAliasMap: HostDirectiveBindingMap | null,
+): NodeInputBindings | null;
 /**
  * Captures node output bindings for the given directive based on the output metadata.
  * This will be called multiple times to combine inputs from various directives on a node.
@@ -652,15 +888,20 @@ function captureNodeBindings<T>(
  * name inputs/outputs should be exposed under.
  */
 function captureNodeBindings<T>(
-    mode: CaptureNodeBindingMode.Outputs, outputs: DirectiveDef<T>['outputs'],
-    directiveIndex: number, bindingsResult: NodeOutputBindings|null,
-    hostDirectiveAliasMap: HostDirectiveBindingMap|null): NodeOutputBindings|null;
+  mode: CaptureNodeBindingMode.Outputs,
+  outputs: DirectiveDef<T>['outputs'],
+  directiveIndex: number,
+  bindingsResult: NodeOutputBindings | null,
+  hostDirectiveAliasMap: HostDirectiveBindingMap | null,
+): NodeOutputBindings | null;
 
 function captureNodeBindings<T>(
-    mode: CaptureNodeBindingMode, aliasMap: DirectiveDef<T>['inputs']|DirectiveDef<T>['outputs'],
-    directiveIndex: number, bindingsResult: NodeInputBindings|NodeOutputBindings|null,
-    hostDirectiveAliasMap: HostDirectiveBindingMap|null): NodeInputBindings|NodeOutputBindings|
-    null {
+  mode: CaptureNodeBindingMode,
+  aliasMap: DirectiveDef<T>['inputs'] | DirectiveDef<T>['outputs'],
+  directiveIndex: number,
+  bindingsResult: NodeInputBindings | NodeOutputBindings | null,
+  hostDirectiveAliasMap: HostDirectiveBindingMap | null,
+): NodeInputBindings | NodeOutputBindings | null {
   for (let publicName in aliasMap) {
     if (!aliasMap.hasOwnProperty(publicName)) {
       continue;
@@ -703,27 +944,46 @@ function captureNodeBindings<T>(
 
     if (mode === CaptureNodeBindingMode.Inputs) {
       addPropertyBinding(
-          bindingsResult as NodeInputBindings, directiveIndex, finalPublicName, internalName,
-          inputFlags);
+        bindingsResult as NodeInputBindings,
+        directiveIndex,
+        finalPublicName,
+        internalName,
+        inputFlags,
+      );
     } else {
       addPropertyBinding(
-          bindingsResult as NodeOutputBindings, directiveIndex, finalPublicName, internalName);
+        bindingsResult as NodeOutputBindings,
+        directiveIndex,
+        finalPublicName,
+        internalName,
+      );
     }
   }
   return bindingsResult;
 }
 
 function addPropertyBinding(
-    bindings: NodeInputBindings, directiveIndex: number, publicName: string, internalName: string,
-    inputFlags: InputFlags): void;
+  bindings: NodeInputBindings,
+  directiveIndex: number,
+  publicName: string,
+  internalName: string,
+  inputFlags: InputFlags,
+): void;
 function addPropertyBinding(
-    bindings: NodeOutputBindings, directiveIndex: number, publicName: string,
-    internalName: string): void;
+  bindings: NodeOutputBindings,
+  directiveIndex: number,
+  publicName: string,
+  internalName: string,
+): void;
 
 function addPropertyBinding(
-    bindings: NodeInputBindings|NodeOutputBindings, directiveIndex: number, publicName: string,
-    internalName: string, inputFlags?: InputFlags) {
-  let values: (typeof bindings[typeof publicName]);
+  bindings: NodeInputBindings | NodeOutputBindings,
+  directiveIndex: number,
+  publicName: string,
+  internalName: string,
+  inputFlags?: InputFlags,
+) {
+  let values: (typeof bindings)[typeof publicName];
 
   if (bindings.hasOwnProperty(publicName)) {
     (values = bindings[publicName]).push(directiveIndex, internalName);
@@ -741,7 +1001,10 @@ function addPropertyBinding(
  * Initialization is done for all directives matched on a given TNode.
  */
 function initializeInputAndOutputAliases(
-    tView: TView, tNode: TNode, hostDirectiveDefinitionMap: HostDirectiveDefs|null): void {
+  tView: TView,
+  tNode: TNode,
+  hostDirectiveDefinitionMap: HostDirectiveDefs | null,
+): void {
   ngDevMode && assertFirstCreatePass(tView);
 
   const start = tNode.directiveStart;
@@ -750,30 +1013,39 @@ function initializeInputAndOutputAliases(
 
   const tNodeAttrs = tNode.attrs;
   const inputsFromAttrs: InitialInputData = [];
-  let inputsStore: NodeInputBindings|null = null;
-  let outputsStore: NodeOutputBindings|null = null;
+  let inputsStore: NodeInputBindings | null = null;
+  let outputsStore: NodeOutputBindings | null = null;
 
   for (let directiveIndex = start; directiveIndex < end; directiveIndex++) {
     const directiveDef = tViewData[directiveIndex] as DirectiveDef<any>;
-    const aliasData =
-        hostDirectiveDefinitionMap ? hostDirectiveDefinitionMap.get(directiveDef) : null;
+    const aliasData = hostDirectiveDefinitionMap
+      ? hostDirectiveDefinitionMap.get(directiveDef)
+      : null;
     const aliasedInputs = aliasData ? aliasData.inputs : null;
     const aliasedOutputs = aliasData ? aliasData.outputs : null;
 
     inputsStore = captureNodeBindings(
-        CaptureNodeBindingMode.Inputs, directiveDef.inputs, directiveIndex, inputsStore,
-        aliasedInputs);
+      CaptureNodeBindingMode.Inputs,
+      directiveDef.inputs,
+      directiveIndex,
+      inputsStore,
+      aliasedInputs,
+    );
     outputsStore = captureNodeBindings(
-        CaptureNodeBindingMode.Outputs, directiveDef.outputs, directiveIndex, outputsStore,
-        aliasedOutputs);
+      CaptureNodeBindingMode.Outputs,
+      directiveDef.outputs,
+      directiveIndex,
+      outputsStore,
+      aliasedOutputs,
+    );
     // Do not use unbound attributes as inputs to structural directives, since structural
     // directive inputs can only be set using microsyntax (e.g. `<div *dir="exp">`).
     // TODO(FW-1930): microsyntax expressions may also contain unbound/static attributes, which
     // should be set for inline templates.
     const initialInputs =
-        (inputsStore !== null && tNodeAttrs !== null && !isInlineTemplate(tNode)) ?
-        generateInitialInputs(inputsStore, directiveIndex, tNodeAttrs) :
-        null;
+      inputsStore !== null && tNodeAttrs !== null && !isInlineTemplate(tNode)
+        ? generateInitialInputs(inputsStore, directiveIndex, tNodeAttrs)
+        : null;
     inputsFromAttrs.push(initialInputs);
   }
 
@@ -812,12 +1084,19 @@ function mapPropName(name: string): string {
 }
 
 export function elementPropertyInternal<T>(
-    tView: TView, tNode: TNode, lView: LView, propName: string, value: T, renderer: Renderer,
-    sanitizer: SanitizerFn|null|undefined, nativeOnly: boolean): void {
+  tView: TView,
+  tNode: TNode,
+  lView: LView,
+  propName: string,
+  value: T,
+  renderer: Renderer,
+  sanitizer: SanitizerFn | null | undefined,
+  nativeOnly: boolean,
+): void {
   ngDevMode && assertNotSame(value, NO_CHANGE as any, 'Incoming value should never be NO_CHANGE.');
   const element = getNativeByTNode(tNode, lView) as RElement | RComment;
   let inputData = tNode.inputs;
-  let dataValue: NodeInputBindings[typeof propName]|undefined;
+  let dataValue: NodeInputBindings[typeof propName] | undefined;
   if (!nativeOnly && inputData != null && (dataValue = inputData[propName])) {
     setInputsForProperty(tView, lView, dataValue, propName, value);
     if (isComponentHost(tNode)) markDirtyIfOnPush(lView, tNode.index);
@@ -858,26 +1137,36 @@ export function markDirtyIfOnPush(lView: LView, viewIndex: number): void {
 }
 
 function setNgReflectProperty(
-    lView: LView, element: RElement|RComment, type: TNodeType, attrName: string, value: any) {
+  lView: LView,
+  element: RElement | RComment,
+  type: TNodeType,
+  attrName: string,
+  value: any,
+) {
   const renderer = lView[RENDERER];
   attrName = normalizeDebugBindingName(attrName);
   const debugValue = normalizeDebugBindingValue(value);
   if (type & TNodeType.AnyRNode) {
     if (value == null) {
-      renderer.removeAttribute((element as RElement), attrName);
+      renderer.removeAttribute(element as RElement, attrName);
     } else {
-      renderer.setAttribute((element as RElement), attrName, debugValue);
+      renderer.setAttribute(element as RElement, attrName, debugValue);
     }
   } else {
-    const textContent =
-        escapeCommentText(`bindings=${JSON.stringify({[attrName]: debugValue}, null, 2)}`);
-    renderer.setValue((element as RComment), textContent);
+    const textContent = escapeCommentText(
+      `bindings=${JSON.stringify({[attrName]: debugValue}, null, 2)}`,
+    );
+    renderer.setValue(element as RComment, textContent);
   }
 }
 
 export function setNgReflectProperties(
-    lView: LView, element: RElement|RComment, type: TNodeType, dataValue: NodeInputBindings[string],
-    value: any) {
+  lView: LView,
+  element: RElement | RComment,
+  type: TNodeType,
+  dataValue: NodeInputBindings[string],
+  value: any,
+) {
   if (type & (TNodeType.AnyRNode | TNodeType.Container)) {
     /**
      * dataValue is an array containing runtime input or output names for the directives:
@@ -897,17 +1186,20 @@ export function setNgReflectProperties(
  * Resolve the matched directives on a node.
  */
 export function resolveDirectives(
-    tView: TView, lView: LView, tNode: TElementNode|TContainerNode|TElementContainerNode,
-    localRefs: string[]|null): void {
+  tView: TView,
+  lView: LView,
+  tNode: TElementNode | TContainerNode | TElementContainerNode,
+  localRefs: string[] | null,
+): void {
   // Please make sure to have explicit type for `exportsMap`. Inferred type triggers bug in
   // tsickle.
   ngDevMode && assertFirstCreatePass(tView);
 
   if (getBindingsEnabled()) {
-    const exportsMap: ({[key: string]: number}|null) = localRefs === null ? null : {'': -1};
+    const exportsMap: {[key: string]: number} | null = localRefs === null ? null : {'': -1};
     const matchResult = findDirectiveDefMatches(tView, tNode);
-    let directiveDefs: DirectiveDef<unknown>[]|null;
-    let hostDirectiveDefs: HostDirectiveDefs|null;
+    let directiveDefs: DirectiveDef<unknown>[] | null;
+    let hostDirectiveDefs: HostDirectiveDefs | null;
 
     if (matchResult === null) {
       directiveDefs = hostDirectiveDefs = null;
@@ -926,9 +1218,13 @@ export function resolveDirectives(
 
 /** Initializes the data structures necessary for a list of directives to be instantiated. */
 export function initializeDirectives(
-    tView: TView, lView: LView<unknown>, tNode: TElementNode|TContainerNode|TElementContainerNode,
-    directives: DirectiveDef<unknown>[], exportsMap: {[key: string]: number;}|null,
-    hostDirectiveDefs: HostDirectiveDefs|null) {
+  tView: TView,
+  lView: LView<unknown>,
+  tNode: TElementNode | TContainerNode | TElementContainerNode,
+  directives: DirectiveDef<unknown>[],
+  exportsMap: {[key: string]: number} | null,
+  hostDirectiveDefs: HostDirectiveDefs | null,
+) {
   ngDevMode && assertFirstCreatePass(tView);
 
   // Publishes the directive types to DI so they can be injected. Needs to
@@ -953,9 +1249,11 @@ export function initializeDirectives(
   let preOrderCheckHooksFound = false;
   let directiveIdx = allocExpando(tView, lView, directives.length, null);
   ngDevMode &&
-      assertSame(
-          directiveIdx, tNode.directiveStart,
-          'TNode.directiveStart should point to just allocated space');
+    assertSame(
+      directiveIdx,
+      tNode.directiveStart,
+      'TNode.directiveStart should point to just allocated space',
+    );
 
   for (let i = 0; i < directives.length; i++) {
     const def = directives[i];
@@ -970,11 +1268,13 @@ export function initializeDirectives(
     if (def.hostBindings !== null || def.hostAttrs !== null || def.hostVars !== 0)
       tNode.flags |= TNodeFlags.hasHostBindings;
 
-    const lifeCycleHooks: Partial<OnChanges&OnInit&DoCheck> = def.type.prototype;
+    const lifeCycleHooks: Partial<OnChanges & OnInit & DoCheck> = def.type.prototype;
     // Only push a node index into the preOrderHooks array if this is the first
     // pre-order hook found on this node.
-    if (!preOrderHooksFound &&
-        (lifeCycleHooks.ngOnChanges || lifeCycleHooks.ngOnInit || lifeCycleHooks.ngDoCheck)) {
+    if (
+      !preOrderHooksFound &&
+      (lifeCycleHooks.ngOnChanges || lifeCycleHooks.ngOnInit || lifeCycleHooks.ngDoCheck)
+    ) {
       // We will push the actual hook function into this array later during dir instantiation.
       // We cannot do it now because we must ensure hooks are registered in the same
       // order that directives are created (i.e. injection order).
@@ -1003,8 +1303,12 @@ export function initializeDirectives(
  * @param def `ComponentDef`/`DirectiveDef`, which contains the `hostVars`/`hostBindings` to add.
  */
 export function registerHostBindingOpCodes(
-    tView: TView, tNode: TNode, directiveIdx: number, directiveVarsIdx: number,
-    def: ComponentDef<any>|DirectiveDef<any>): void {
+  tView: TView,
+  tNode: TNode,
+  directiveIdx: number,
+  directiveVarsIdx: number,
+  def: ComponentDef<any> | DirectiveDef<any>,
+): void {
   ngDevMode && assertFirstCreatePass(tView);
 
   const hostBindings = def.hostBindings;
@@ -1043,12 +1347,15 @@ function lastSelectedElementIdx(hostBindingOpCodes: HostBindingOpCodes): number
   return 0;
 }
 
-
 /**
  * Instantiate all the directives that were previously resolved on the current node.
  */
 function instantiateAllDirectives(
-    tView: TView, lView: LView, tNode: TDirectiveHostNode, native: RNode) {
+  tView: TView,
+  lView: LView,
+  tNode: TDirectiveHostNode,
+  native: RNode,
+) {
   const start = tNode.directiveStart;
   const end = tNode.directiveEnd;
 
@@ -1057,8 +1364,10 @@ function instantiateAllDirectives(
   if (isComponentHost(tNode)) {
     ngDevMode && assertTNodeType(tNode, TNodeType.AnyRNode);
     addComponentLogic(
-        lView, tNode as TElementNode,
-        tView.data[start + tNode.componentOffset] as ComponentDef<unknown>);
+      lView,
+      tNode as TElementNode,
+      tView.data[start + tNode.componentOffset] as ComponentDef<unknown>,
+    );
   }
 
   if (!tView.firstCreatePass) {
@@ -1122,26 +1431,29 @@ export function invokeHostBindingsInCreationMode(def: DirectiveDef<any>, directi
  * If a component is matched (at most one), it is returned in first position in the array.
  */
 function findDirectiveDefMatches(
-    tView: TView, tNode: TElementNode|TContainerNode|TElementContainerNode):
-    [matches: DirectiveDef<unknown>[], hostDirectiveDefs: HostDirectiveDefs|null]|null {
+  tView: TView,
+  tNode: TElementNode | TContainerNode | TElementContainerNode,
+): [matches: DirectiveDef<unknown>[], hostDirectiveDefs: HostDirectiveDefs | null] | null {
   ngDevMode && assertFirstCreatePass(tView);
   ngDevMode && assertTNodeType(tNode, TNodeType.AnyRNode | TNodeType.AnyContainer);
 
   const registry = tView.directiveRegistry;
-  let matches: DirectiveDef<unknown>[]|null = null;
-  let hostDirectiveDefs: HostDirectiveDefs|null = null;
+  let matches: DirectiveDef<unknown>[] | null = null;
+  let hostDirectiveDefs: HostDirectiveDefs | null = null;
   if (registry) {
     for (let i = 0; i < registry.length; i++) {
-      const def = registry[i] as ComponentDef<any>| DirectiveDef<any>;
+      const def = registry[i] as ComponentDef<any> | DirectiveDef<any>;
       if (isNodeMatchingSelectorList(tNode, def.selectors!, /* isProjectionMode */ false)) {
         matches || (matches = []);
 
         if (isComponentDef(def)) {
           if (ngDevMode) {
             assertTNodeType(
-                tNode, TNodeType.Element,
-                `"${tNode.value}" tags cannot be used as component hosts. ` +
-                    `Please use a different tag to activate the ${stringify(def.type)} component.`);
+              tNode,
+              TNodeType.Element,
+              `"${tNode.value}" tags cannot be used as component hosts. ` +
+                `Please use a different tag to activate the ${stringify(def.type)} component.`,
+            );
 
             if (isComponentHost(tNode)) {
               throwMultipleComponentError(tNode, matches.find(isComponentDef)!.type, def.type);
@@ -1202,9 +1514,12 @@ export function markAsComponentHost(tView: TView, hostTNode: TNode, componentOff
 
 /** Caches local names and their matching directive indices for query and template lookups. */
 function cacheMatchingLocalNames(
-    tNode: TNode, localRefs: string[]|null, exportsMap: {[key: string]: number}): void {
+  tNode: TNode,
+  localRefs: string[] | null,
+  exportsMap: {[key: string]: number},
+): void {
   if (localRefs) {
-    const localNames: (string|number)[] = tNode.localNames = [];
+    const localNames: (string | number)[] = (tNode.localNames = []);
 
     // Local names must be stored in tNode in the same order that localRefs are defined
     // in the template to ensure the data is loaded in the same slots as their refs
@@ -1213,8 +1528,9 @@ function cacheMatchingLocalNames(
       const index = exportsMap[localRefs[i + 1]];
       if (index == null)
         throw new RuntimeError(
-            RuntimeErrorCode.EXPORT_NOT_FOUND,
-            ngDevMode && `Export of name '${localRefs[i + 1]}' not found!`);
+          RuntimeErrorCode.EXPORT_NOT_FOUND,
+          ngDevMode && `Export of name '${localRefs[i + 1]}' not found!`,
+        );
       localNames.push(localRefs[i], index);
     }
   }
@@ -1225,8 +1541,10 @@ function cacheMatchingLocalNames(
  * to their directive instances.
  */
 function saveNameToExportMap(
-    directiveIdx: number, def: DirectiveDef<any>|ComponentDef<any>,
-    exportsMap: {[key: string]: number}|null) {
+  directiveIdx: number,
+  def: DirectiveDef<any> | ComponentDef<any>,
+  exportsMap: {[key: string]: number} | null,
+) {
   if (exportsMap) {
     if (def.exportAs) {
       for (let i = 0; i < def.exportAs.length; i++) {
@@ -1244,9 +1562,11 @@ function saveNameToExportMap(
  */
 export function initTNodeFlags(tNode: TNode, index: number, numberOfDirectives: number) {
   ngDevMode &&
-      assertNotEqual(
-          numberOfDirectives, tNode.directiveEnd - tNode.directiveStart,
-          'Reached the max number of directives');
+    assertNotEqual(
+      numberOfDirectives,
+      tNode.directiveEnd - tNode.directiveStart,
+      'Reached the max number of directives',
+    );
   tNode.flags |= TNodeFlags.isDirectiveHost;
   // When the first directive is created on a node, save the index
   tNode.directiveStart = index;
@@ -1267,22 +1587,35 @@ export function initTNodeFlags(tNode: TNode, index: number, numberOfDirectives:
  * @param def `DirectiveDef`
  */
 export function configureViewWithDirective<T>(
-    tView: TView, tNode: TNode, lView: LView, directiveIndex: number, def: DirectiveDef<T>): void {
+  tView: TView,
+  tNode: TNode,
+  lView: LView,
+  directiveIndex: number,
+  def: DirectiveDef<T>,
+): void {
   ngDevMode &&
-      assertGreaterThanOrEqual(directiveIndex, HEADER_OFFSET, 'Must be in Expando section');
+    assertGreaterThanOrEqual(directiveIndex, HEADER_OFFSET, 'Must be in Expando section');
   tView.data[directiveIndex] = def;
   const directiveFactory =
-      def.factory || ((def as Writable<DirectiveDef<T>>).factory = getFactoryDef(def.type, true));
+    def.factory || ((def as Writable<DirectiveDef<T>>).factory = getFactoryDef(def.type, true));
   // Even though `directiveFactory` will already be using `ɵɵdirectiveInject` in its generated code,
   // we also want to support `inject()` directly from the directive constructor context so we set
   // `ɵɵdirectiveInject` as the inject implementation here too.
-  const nodeInjectorFactory =
-      new NodeInjectorFactory(directiveFactory, isComponentDef(def), ɵɵdirectiveInject);
+  const nodeInjectorFactory = new NodeInjectorFactory(
+    directiveFactory,
+    isComponentDef(def),
+    ɵɵdirectiveInject,
+  );
   tView.blueprint[directiveIndex] = nodeInjectorFactory;
   lView[directiveIndex] = nodeInjectorFactory;
 
   registerHostBindingOpCodes(
-      tView, tNode, directiveIndex, allocExpando(tView, lView, def.hostVars, NO_CHANGE), def);
+    tView,
+    tNode,
+    directiveIndex,
+    allocExpando(tView, lView, def.hostVars, NO_CHANGE),
+    def,
+  );
 }
 
 function addComponentLogic<T>(lView: LView, hostTNode: TElementNode, def: ComponentDef<T>): void {
@@ -1299,10 +1632,21 @@ function addComponentLogic<T>(lView: LView, hostTNode: TElementNode, def: Compon
     lViewFlags = LViewFlags.Dirty;
   }
   const componentView = addToViewTree(
+    lView,
+    createLView(
       lView,
-      createLView(
-          lView, tView, null, lViewFlags, native, hostTNode as TElementNode, null,
-          rendererFactory.createRenderer(native, def), null, null, null));
+      tView,
+      null,
+      lViewFlags,
+      native,
+      hostTNode as TElementNode,
+      null,
+      rendererFactory.createRenderer(native, def),
+      null,
+      null,
+      null,
+    ),
+  );
 
   // Component view will always be created before any injected LContainers,
   // so this is a regular element, wrap it with the component view
@@ -1310,31 +1654,43 @@ function addComponentLogic<T>(lView: LView, hostTNode: TElementNode, def: Compon
 }
 
 export function elementAttributeInternal(
-    tNode: TNode, lView: LView, name: string, value: any, sanitizer: SanitizerFn|null|undefined,
-    namespace: string|null|undefined) {
+  tNode: TNode,
+  lView: LView,
+  name: string,
+  value: any,
+  sanitizer: SanitizerFn | null | undefined,
+  namespace: string | null | undefined,
+) {
   if (ngDevMode) {
     assertNotSame(value, NO_CHANGE as any, 'Incoming value should never be NO_CHANGE.');
     validateAgainstEventAttributes(name);
     assertTNodeType(
-        tNode, TNodeType.Element,
-        `Attempted to set attribute \`${name}\` on a container node. ` +
-            `Host bindings are not valid on ng-container or ng-template.`);
+      tNode,
+      TNodeType.Element,
+      `Attempted to set attribute \`${name}\` on a container node. ` +
+        `Host bindings are not valid on ng-container or ng-template.`,
+    );
   }
   const element = getNativeByTNode(tNode, lView) as RElement;
   setElementAttribute(lView[RENDERER], element, namespace, tNode.value, name, value, sanitizer);
 }
 
 export function setElementAttribute(
-    renderer: Renderer, element: RElement, namespace: string|null|undefined, tagName: string|null,
-    name: string, value: any, sanitizer: SanitizerFn|null|undefined) {
+  renderer: Renderer,
+  element: RElement,
+  namespace: string | null | undefined,
+  tagName: string | null,
+  name: string,
+  value: any,
+  sanitizer: SanitizerFn | null | undefined,
+) {
   if (value == null) {
     ngDevMode && ngDevMode.rendererRemoveAttribute++;
     renderer.removeAttribute(element, name, namespace);
   } else {
     ngDevMode && ngDevMode.rendererSetAttribute++;
     const strValue =
-        sanitizer == null ? renderStringify(value) : sanitizer(value, tagName || '', name);
-
+      sanitizer == null ? renderStringify(value) : sanitizer(value, tagName || '', name);
 
     renderer.setAttribute(element, name, strValue as string, namespace);
   }
@@ -1350,11 +1706,16 @@ export function setElementAttribute(
  * @param tNode The static data for this node
  */
 function setInputsFromAttrs<T>(
-    lView: LView, directiveIndex: number, instance: T, def: DirectiveDef<T>, tNode: TNode,
-    initialInputData: InitialInputData): void {
-  const initialInputs: InitialInputs|null = initialInputData![directiveIndex];
+  lView: LView,
+  directiveIndex: number,
+  instance: T,
+  def: DirectiveDef<T>,
+  tNode: TNode,
+  initialInputData: InitialInputData,
+): void {
+  const initialInputs: InitialInputs | null = initialInputData![directiveIndex];
   if (initialInputs !== null) {
-    for (let i = 0; i < initialInputs.length;) {
+    for (let i = 0; i < initialInputs.length; ) {
       const publicName = initialInputs[i++] as string;
       const privateName = initialInputs[i++] as string;
       const flags = initialInputs[i++] as InputFlags;
@@ -1386,8 +1747,11 @@ function setInputsFromAttrs<T>(
  * @param attrs Static attrs on this node.
  */
 function generateInitialInputs(
-    inputs: NodeInputBindings, directiveIndex: number, attrs: TAttributes): InitialInputs|null {
-  let inputsToStore: InitialInputs|null = null;
+  inputs: NodeInputBindings,
+  directiveIndex: number,
+  attrs: TAttributes,
+): InitialInputs | null {
+  let inputsToStore: InitialInputs | null = null;
   let i = 0;
   while (i < attrs.length) {
     const attrName = attrs[i];
@@ -1414,8 +1778,11 @@ function generateInitialInputs(
       for (let j = 0; j < inputConfig.length; j += 3) {
         if (inputConfig[j] === directiveIndex) {
           inputsToStore.push(
-              attrName as string, inputConfig[j + 1] as string, inputConfig[j + 2] as InputFlags,
-              attrs[i + 1] as string);
+            attrName as string,
+            inputConfig[j + 1] as string,
+            inputConfig[j + 2] as InputFlags,
+            attrs[i + 1] as string,
+          );
           // A directive can't have multiple inputs with the same name so we can break here.
           break;
         }
@@ -1442,25 +1809,30 @@ function generateInitialInputs(
  * @returns LContainer
  */
 export function createLContainer(
-    hostNative: RElement|RComment|LView, currentView: LView, native: RComment,
-    tNode: TNode): LContainer {
+  hostNative: RElement | RComment | LView,
+  currentView: LView,
+  native: RComment,
+  tNode: TNode,
+): LContainer {
   ngDevMode && assertLView(currentView);
   const lContainer: LContainer = [
-    hostNative,   // host native
-    true,         // Boolean `true` in this position signifies that this is an `LContainer`
-    0,            // flags
-    currentView,  // parent
-    null,         // next
-    tNode,        // t_host
-    null,         // dehydrated views
-    native,       // native,
-    null,         // view refs
-    null,         // moved views
+    hostNative, // host native
+    true, // Boolean `true` in this position signifies that this is an `LContainer`
+    0, // flags
+    currentView, // parent
+    null, // next
+    tNode, // t_host
+    null, // dehydrated views
+    native, // native,
+    null, // view refs
+    null, // moved views
   ];
   ngDevMode &&
-      assertEqual(
-          lContainer.length, CONTAINER_HEADER_OFFSET,
-          'Should allocate correct number of slots for LContainer header.');
+    assertEqual(
+      lContainer.length,
+      CONTAINER_HEADER_OFFSET,
+      'Should allocate correct number of slots for LContainer header.',
+    );
   return lContainer;
 }
 
@@ -1477,8 +1849,7 @@ export function refreshContentQueries(tView: TView, lView: LView): void {
           const directiveDef = tView.data[directiveDefIdx] as DirectiveDef<any>;
           ngDevMode && assertDefined(directiveDef, 'DirectiveDef not found.');
           ngDevMode &&
-              assertDefined(
-                  directiveDef.contentQueries, 'contentQueries function should be defined');
+            assertDefined(directiveDef.contentQueries, 'contentQueries function should be defined');
           setCurrentQueryIndex(queryStartIdx);
           directiveDef.contentQueries!(RenderFlags.Update, lView[directiveDefIdx], directiveDefIdx);
         }
@@ -1500,7 +1871,7 @@ export function refreshContentQueries(tView: TView, lView: LView): void {
  * @param lViewOrLContainer The LView or LContainer to add to the view tree
  * @returns The state passed in
  */
-export function addToViewTree<T extends LView|LContainer>(lView: LView, lViewOrLContainer: T): T {
+export function addToViewTree<T extends LView | LContainer>(lView: LView, lViewOrLContainer: T): T {
   // TODO(benlesh/misko): This implementation is incorrect, because it always adds the LContainer
   // to the end of the queue, which means if the developer retrieves the LContainers from RNodes out
   // of order, the change detection will run out of order, as the act of retrieving the the
@@ -1519,7 +1890,10 @@ export function addToViewTree<T extends LView|LContainer>(lView: LView, lViewOrL
 ///////////////////////////////
 
 export function executeViewQueryFn<T>(
-    flags: RenderFlags, viewQueryFn: ViewQueriesFunction<T>, component: T): void {
+  flags: RenderFlags,
+  viewQueryFn: ViewQueriesFunction<T>,
+  component: T,
+): void {
   ngDevMode && assertDefined(viewQueryFn, 'View queries function to execute must be defined.');
   setCurrentQueryIndex(0);
   const prevConsumer = setActiveConsumer(null);
@@ -1556,8 +1930,12 @@ export function executeViewQueryFn<T>(
  * @param interpolationParts static interpolation parts (for property interpolations)
  */
 export function storePropertyBindingMetadata(
-    tData: TData, tNode: TNode, propertyName: string, bindingIndex: number,
-    ...interpolationParts: string[]) {
+  tData: TData,
+  tNode: TNode,
+  propertyName: string,
+  bindingIndex: number,
+  ...interpolationParts: string[]
+) {
   // Binding meta-data are stored only the first time a given property instruction is processed.
   // Since we don't have a concept of the "first update pass" we need to check for presence of the
   // binding meta-data to decide if one should be stored (or if was stored already).
@@ -1568,7 +1946,7 @@ export function storePropertyBindingMetadata(
       let bindingMetadata = propertyName;
       if (interpolationParts.length > 0) {
         bindingMetadata +=
-            INTERPOLATION_DELIMITER + interpolationParts.join(INTERPOLATION_DELIMITER);
+          INTERPOLATION_DELIMITER + interpolationParts.join(INTERPOLATION_DELIMITER);
       }
       tData[bindingIndex] = bindingMetadata;
     }
@@ -1589,7 +1967,10 @@ export function getOrCreateTViewCleanup(tView: TView): any[] {
  * instead of the current renderer (see the componentSyntheticHost* instructions).
  */
 export function loadComponentRenderer(
-    currentDef: DirectiveDef<any>|null, tNode: TNode, lView: LView): Renderer {
+  currentDef: DirectiveDef<any> | null,
+  tNode: TNode,
+  lView: LView,
+): Renderer {
   // TODO(FW-2043): the `currentDef` is null when host bindings are invoked while creating root
   // component (see packages/core/src/render3/component.ts). This is not consistent with the process
   // of creating inner components, when current directive index is available in the state. In order
@@ -1619,9 +2000,13 @@ export function handleError(lView: LView, error: any): void {
  * @param value Value to set.
  */
 export function setInputsForProperty(
-    tView: TView, lView: LView, inputs: NodeInputBindings[typeof publicName], publicName: string,
-    value: unknown): void {
-  for (let i = 0; i < inputs.length;) {
+  tView: TView,
+  lView: LView,
+  inputs: NodeInputBindings[typeof publicName],
+  publicName: string,
+  value: unknown,
+): void {
+  for (let i = 0; i < inputs.length; ) {
     const index = inputs[i++] as number;
     const privateName = inputs[i++] as string;
     const flags = inputs[i++] as InputFlags;
diff --git a/packages/core/src/render3/instructions/storage.ts b/packages/core/src/render3/instructions/storage.ts
index 676ee4d92824c..39b1dd17523b3 100644
--- a/packages/core/src/render3/instructions/storage.ts
+++ b/packages/core/src/render3/instructions/storage.ts
@@ -9,7 +9,6 @@ import {HEADER_OFFSET, LView, TView} from '../interfaces/view';
 import {getContextLView} from '../state';
 import {load} from '../util/view_utils';
 
-
 /** Store a value in the `data` at a given `index`. */
 export function store<T>(tView: TView, lView: LView, index: number, value: T): void {
   // We don't store any static data for local variables, so the first time
diff --git a/packages/core/src/render3/instructions/style_map_interpolation.ts b/packages/core/src/render3/instructions/style_map_interpolation.ts
index 42466eec0dd23..f279e21bba632 100644
--- a/packages/core/src/render3/instructions/style_map_interpolation.ts
+++ b/packages/core/src/render3/instructions/style_map_interpolation.ts
@@ -7,10 +7,19 @@
  */
 
 import {getLView} from '../state';
-import {interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV} from './interpolation';
+import {
+  interpolation1,
+  interpolation2,
+  interpolation3,
+  interpolation4,
+  interpolation5,
+  interpolation6,
+  interpolation7,
+  interpolation8,
+  interpolationV,
+} from './interpolation';
 import {ɵɵstyleMap} from './styling';
 
-
 /**
  *
  * Update an interpolated style on an element with single bound value surrounded by text.
@@ -62,7 +71,12 @@ export function ɵɵstyleMapInterpolate1(prefix: string, v0: any, suffix: string
  * @codeGenApi
  */
 export function ɵɵstyleMapInterpolate2(
-    prefix: string, v0: any, i0: string, v1: any, suffix: string): void {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  suffix: string,
+): void {
   const lView = getLView();
   const interpolatedValue = interpolation2(lView, prefix, v0, i0, v1, suffix);
   ɵɵstyleMap(interpolatedValue);
@@ -95,7 +109,14 @@ export function ɵɵstyleMapInterpolate2(
  * @codeGenApi
  */
 export function ɵɵstyleMapInterpolate3(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, suffix: string): void {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  suffix: string,
+): void {
   const lView = getLView();
   const interpolatedValue = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix);
   ɵɵstyleMap(interpolatedValue);
@@ -130,8 +151,16 @@ export function ɵɵstyleMapInterpolate3(
  * @codeGenApi
  */
 export function ɵɵstyleMapInterpolate4(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    suffix: string): void {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  suffix: string,
+): void {
   const lView = getLView();
   const interpolatedValue = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix);
   ɵɵstyleMap(interpolatedValue);
@@ -168,11 +197,33 @@ export function ɵɵstyleMapInterpolate4(
  * @codeGenApi
  */
 export function ɵɵstyleMapInterpolate5(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    i3: string, v4: any, suffix: string): void {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  suffix: string,
+): void {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
+  const interpolatedValue = interpolation5(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    suffix,
+  );
   ɵɵstyleMap(interpolatedValue);
 }
 
@@ -211,11 +262,37 @@ export function ɵɵstyleMapInterpolate5(
  * @codeGenApi
  */
 export function ɵɵstyleMapInterpolate6(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    i3: string, v4: any, i4: string, v5: any, suffix: string): void {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  suffix: string,
+): void {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix);
+  const interpolatedValue = interpolation6(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    suffix,
+  );
   ɵɵstyleMap(interpolatedValue);
 }
 
@@ -256,11 +333,41 @@ export function ɵɵstyleMapInterpolate6(
  * @codeGenApi
  */
 export function ɵɵstyleMapInterpolate7(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string): void {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  i5: string,
+  v6: any,
+  suffix: string,
+): void {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix);
+  const interpolatedValue = interpolation7(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    i5,
+    v6,
+    suffix,
+  );
   ɵɵstyleMap(interpolatedValue);
 }
 
@@ -303,12 +410,45 @@ export function ɵɵstyleMapInterpolate7(
  * @codeGenApi
  */
 export function ɵɵstyleMapInterpolate8(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any,
-    suffix: string): void {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  i5: string,
+  v6: any,
+  i6: string,
+  v7: any,
+  suffix: string,
+): void {
   const lView = getLView();
   const interpolatedValue = interpolation8(
-      lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix);
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    i5,
+    v6,
+    i6,
+    v7,
+    suffix,
+  );
   ɵɵstyleMap(interpolatedValue);
 }
 
diff --git a/packages/core/src/render3/instructions/style_prop_interpolation.ts b/packages/core/src/render3/instructions/style_prop_interpolation.ts
index edb4dd2f48dd6..7ac6b7983cf09 100644
--- a/packages/core/src/render3/instructions/style_prop_interpolation.ts
+++ b/packages/core/src/render3/instructions/style_prop_interpolation.ts
@@ -6,11 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {getLView,} from '../state';
-import {interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV} from './interpolation';
+import {getLView} from '../state';
+import {
+  interpolation1,
+  interpolation2,
+  interpolation3,
+  interpolation4,
+  interpolation5,
+  interpolation6,
+  interpolation7,
+  interpolation8,
+  interpolationV,
+} from './interpolation';
 import {checkStylingProperty} from './styling';
 
-
 /**
  *
  * Update an interpolated style property on an element with single bound value surrounded by text.
@@ -38,8 +47,12 @@ import {checkStylingProperty} from './styling';
  * @codeGenApi
  */
 export function ɵɵstylePropInterpolate1(
-    prop: string, prefix: string, v0: any, suffix: string,
-    valueSuffix?: string|null): typeof ɵɵstylePropInterpolate1 {
+  prop: string,
+  prefix: string,
+  v0: any,
+  suffix: string,
+  valueSuffix?: string | null,
+): typeof ɵɵstylePropInterpolate1 {
   const lView = getLView();
   const interpolatedValue = interpolation1(lView, prefix, v0, suffix);
   checkStylingProperty(prop, interpolatedValue, valueSuffix, false);
@@ -75,8 +88,14 @@ export function ɵɵstylePropInterpolate1(
  * @codeGenApi
  */
 export function ɵɵstylePropInterpolate2(
-    prop: string, prefix: string, v0: any, i0: string, v1: any, suffix: string,
-    valueSuffix?: string|null): typeof ɵɵstylePropInterpolate2 {
+  prop: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  suffix: string,
+  valueSuffix?: string | null,
+): typeof ɵɵstylePropInterpolate2 {
   const lView = getLView();
   const interpolatedValue = interpolation2(lView, prefix, v0, i0, v1, suffix);
   checkStylingProperty(prop, interpolatedValue, valueSuffix, false);
@@ -114,8 +133,16 @@ export function ɵɵstylePropInterpolate2(
  * @codeGenApi
  */
 export function ɵɵstylePropInterpolate3(
-    prop: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, suffix: string,
-    valueSuffix?: string|null): typeof ɵɵstylePropInterpolate3 {
+  prop: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  suffix: string,
+  valueSuffix?: string | null,
+): typeof ɵɵstylePropInterpolate3 {
   const lView = getLView();
   const interpolatedValue = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix);
   checkStylingProperty(prop, interpolatedValue, valueSuffix, false);
@@ -155,8 +182,18 @@ export function ɵɵstylePropInterpolate3(
  * @codeGenApi
  */
 export function ɵɵstylePropInterpolate4(
-    prop: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, suffix: string, valueSuffix?: string|null): typeof ɵɵstylePropInterpolate4 {
+  prop: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  suffix: string,
+  valueSuffix?: string | null,
+): typeof ɵɵstylePropInterpolate4 {
   const lView = getLView();
   const interpolatedValue = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix);
   checkStylingProperty(prop, interpolatedValue, valueSuffix, false);
@@ -198,12 +235,35 @@ export function ɵɵstylePropInterpolate4(
  * @codeGenApi
  */
 export function ɵɵstylePropInterpolate5(
-    prop: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, suffix: string,
-    valueSuffix?: string|null): typeof ɵɵstylePropInterpolate5 {
+  prop: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  suffix: string,
+  valueSuffix?: string | null,
+): typeof ɵɵstylePropInterpolate5 {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
+  const interpolatedValue = interpolation5(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    suffix,
+  );
   checkStylingProperty(prop, interpolatedValue, valueSuffix, false);
   return ɵɵstylePropInterpolate5;
 }
@@ -245,12 +305,39 @@ export function ɵɵstylePropInterpolate5(
  * @codeGenApi
  */
 export function ɵɵstylePropInterpolate6(
-    prop: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, i4: string, v5: any, suffix: string,
-    valueSuffix?: string|null): typeof ɵɵstylePropInterpolate6 {
+  prop: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  suffix: string,
+  valueSuffix?: string | null,
+): typeof ɵɵstylePropInterpolate6 {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix);
+  const interpolatedValue = interpolation6(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    suffix,
+  );
   checkStylingProperty(prop, interpolatedValue, valueSuffix, false);
   return ɵɵstylePropInterpolate6;
 }
@@ -295,12 +382,43 @@ export function ɵɵstylePropInterpolate6(
  * @codeGenApi
  */
 export function ɵɵstylePropInterpolate7(
-    prop: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string,
-    valueSuffix?: string|null): typeof ɵɵstylePropInterpolate7 {
+  prop: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  i5: string,
+  v6: any,
+  suffix: string,
+  valueSuffix?: string | null,
+): typeof ɵɵstylePropInterpolate7 {
   const lView = getLView();
-  const interpolatedValue =
-      interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix);
+  const interpolatedValue = interpolation7(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    i5,
+    v6,
+    suffix,
+  );
   checkStylingProperty(prop, interpolatedValue, valueSuffix, false);
   return ɵɵstylePropInterpolate7;
 }
@@ -347,12 +465,47 @@ export function ɵɵstylePropInterpolate7(
  * @codeGenApi
  */
 export function ɵɵstylePropInterpolate8(
-    prop: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string,
-    v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any,
-    suffix: string, valueSuffix?: string|null): typeof ɵɵstylePropInterpolate8 {
+  prop: string,
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  i5: string,
+  v6: any,
+  i6: string,
+  v7: any,
+  suffix: string,
+  valueSuffix?: string | null,
+): typeof ɵɵstylePropInterpolate8 {
   const lView = getLView();
   const interpolatedValue = interpolation8(
-      lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix);
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    i5,
+    v6,
+    i6,
+    v7,
+    suffix,
+  );
   checkStylingProperty(prop, interpolatedValue, valueSuffix, false);
   return ɵɵstylePropInterpolate8;
 }
@@ -388,7 +541,10 @@ export function ɵɵstylePropInterpolate8(
  * @codeGenApi
  */
 export function ɵɵstylePropInterpolateV(
-    prop: string, values: any[], valueSuffix?: string|null): typeof ɵɵstylePropInterpolateV {
+  prop: string,
+  values: any[],
+  valueSuffix?: string | null,
+): typeof ɵɵstylePropInterpolateV {
   const lView = getLView();
   const interpolatedValue = interpolationV(lView, values);
   checkStylingProperty(prop, interpolatedValue, valueSuffix, false);
diff --git a/packages/core/src/render3/instructions/styling.ts b/packages/core/src/render3/instructions/styling.ts
index 449f3d8f4cb1b..fe43b244cef48 100644
--- a/packages/core/src/render3/instructions/styling.ts
+++ b/packages/core/src/render3/instructions/styling.ts
@@ -8,28 +8,53 @@
 
 import {SafeValue, unwrapSafeValue} from '../../sanitization/bypass';
 import {KeyValueArray, keyValueArrayGet, keyValueArraySet} from '../../util/array_utils';
-import {assertDefined, assertEqual, assertLessThan, assertNotEqual, throwError} from '../../util/assert';
+import {
+  assertDefined,
+  assertEqual,
+  assertLessThan,
+  assertNotEqual,
+  throwError,
+} from '../../util/assert';
 import {EMPTY_ARRAY} from '../../util/empty';
 import {concatStringsWithSpace, stringify} from '../../util/stringify';
 import {assertFirstUpdatePass} from '../assert';
 import {bindingUpdated} from '../bindings';
-import { AttributeMarker } from '../interfaces/attribute_marker';
+import {AttributeMarker} from '../interfaces/attribute_marker';
 import {DirectiveDef} from '../interfaces/definition';
 import {TAttributes, TNode, TNodeFlags, TNodeType} from '../interfaces/node';
 import {Renderer} from '../interfaces/renderer';
 import {RElement} from '../interfaces/renderer_dom';
-import {getTStylingRangeNext, getTStylingRangeNextDuplicate, getTStylingRangePrev, getTStylingRangePrevDuplicate, TStylingKey, TStylingRange} from '../interfaces/styling';
+import {
+  getTStylingRangeNext,
+  getTStylingRangeNextDuplicate,
+  getTStylingRangePrev,
+  getTStylingRangePrevDuplicate,
+  TStylingKey,
+  TStylingRange,
+} from '../interfaces/styling';
 import {LView, RENDERER, TData, TView} from '../interfaces/view';
 import {applyStyling} from '../node_manipulation';
-import {getCurrentDirectiveDef, getLView, getSelectedIndex, getTView, incrementBindingIndex} from '../state';
+import {
+  getCurrentDirectiveDef,
+  getLView,
+  getSelectedIndex,
+  getTView,
+  incrementBindingIndex,
+} from '../state';
 import {insertTStylingBinding} from '../styling/style_binding_list';
-import {getLastParsedKey, getLastParsedValue, parseClassName, parseClassNameNext, parseStyle, parseStyleNext} from '../styling/styling_parser';
+import {
+  getLastParsedKey,
+  getLastParsedValue,
+  parseClassName,
+  parseClassNameNext,
+  parseStyle,
+  parseStyleNext,
+} from '../styling/styling_parser';
 import {NO_CHANGE} from '../tokens';
 import {getNativeByIndex} from '../util/view_utils';
 
 import {setDirectiveInputsWhichShadowsStyling} from './property';
 
-
 /**
  * Update a style binding on an element with the provided value.
  *
@@ -50,8 +75,10 @@ import {setDirectiveInputsWhichShadowsStyling} from './property';
  * @codeGenApi
  */
 export function ɵɵstyleProp(
-    prop: string, value: string|number|SafeValue|undefined|null,
-    suffix?: string|null): typeof ɵɵstyleProp {
+  prop: string,
+  value: string | number | SafeValue | undefined | null,
+  suffix?: string | null,
+): typeof ɵɵstyleProp {
   checkStylingProperty(prop, value, suffix, false);
   return ɵɵstyleProp;
 }
@@ -71,12 +98,14 @@ export function ɵɵstyleProp(
  *
  * @codeGenApi
  */
-export function ɵɵclassProp(className: string, value: boolean|undefined|null): typeof ɵɵclassProp {
+export function ɵɵclassProp(
+  className: string,
+  value: boolean | undefined | null,
+): typeof ɵɵclassProp {
   checkStylingProperty(className, value, null, true);
   return ɵɵclassProp;
 }
 
-
 /**
  * Update style bindings using an object literal on an element.
  *
@@ -96,11 +125,10 @@ export function ɵɵclassProp(className: string, value: boolean|undefined|null):
  *
  * @codeGenApi
  */
-export function ɵɵstyleMap(styles: {[styleName: string]: any}|string|undefined|null): void {
+export function ɵɵstyleMap(styles: {[styleName: string]: any} | string | undefined | null): void {
   checkStylingMap(styleKeyValueArraySet, styleStringParser, styles, false);
 }
 
-
 /**
  * Parse text as style and add values to KeyValueArray.
  *
@@ -116,7 +144,6 @@ export function styleStringParser(keyValueArray: KeyValueArray<any>, text: strin
   }
 }
 
-
 /**
  * Update class bindings using an object literal or class-string on an element.
  *
@@ -135,8 +162,9 @@ export function styleStringParser(keyValueArray: KeyValueArray<any>, text: strin
  *
  * @codeGenApi
  */
-export function ɵɵclassMap(classes: {[className: string]: boolean|undefined|null}|string|undefined|
-                           null): void {
+export function ɵɵclassMap(
+  classes: {[className: string]: boolean | undefined | null} | string | undefined | null,
+): void {
   checkStylingMap(classKeyValueArraySet, classStringParser, classes, true);
 }
 
@@ -164,8 +192,11 @@ export function classStringParser(keyValueArray: KeyValueArray<any>, text: strin
  * @param isClassBased `true` if `class` change (`false` if `style`)
  */
 export function checkStylingProperty(
-    prop: string, value: any|NO_CHANGE, suffix: string|undefined|null,
-    isClassBased: boolean): void {
+  prop: string,
+  value: any | NO_CHANGE,
+  suffix: string | undefined | null,
+  isClassBased: boolean,
+): void {
   const lView = getLView();
   const tView = getTView();
   // Styling instructions use 2 slots per binding.
@@ -178,8 +209,15 @@ export function checkStylingProperty(
   if (value !== NO_CHANGE && bindingUpdated(lView, bindingIndex, value)) {
     const tNode = tView.data[getSelectedIndex()] as TNode;
     updateStyling(
-        tView, tNode, lView, lView[RENDERER], prop,
-        lView[bindingIndex + 1] = normalizeSuffix(value, suffix), isClassBased, bindingIndex);
+      tView,
+      tNode,
+      lView,
+      lView[RENDERER],
+      prop,
+      (lView[bindingIndex + 1] = normalizeSuffix(value, suffix)),
+      isClassBased,
+      bindingIndex,
+    );
   }
 }
 
@@ -194,9 +232,11 @@ export function checkStylingProperty(
  * @param isClassBased `true` if `class` change (`false` if `style`)
  */
 export function checkStylingMap(
-    keyValueArraySet: (keyValueArray: KeyValueArray<any>, key: string, value: any) => void,
-    stringParser: (styleKeyValueArray: KeyValueArray<any>, text: string) => void,
-    value: any|NO_CHANGE, isClassBased: boolean): void {
+  keyValueArraySet: (keyValueArray: KeyValueArray<any>, key: string, value: any) => void,
+  stringParser: (styleKeyValueArray: KeyValueArray<any>, text: string) => void,
+  value: any | NO_CHANGE,
+  isClassBased: boolean,
+): void {
   const tView = getTView();
   const bindingIndex = incrementBindingIndex(2);
   if (tView.firstUpdatePass) {
@@ -213,8 +253,10 @@ export function checkStylingMap(
         // processing this binding in styling resolution.
         const tStylingKey = tView.data[bindingIndex];
         assertEqual(
-            Array.isArray(tStylingKey) ? tStylingKey[1] : tStylingKey, false,
-            'Styling linked list shadow input should be marked as \'false\'');
+          Array.isArray(tStylingKey) ? tStylingKey[1] : tStylingKey,
+          false,
+          "Styling linked list shadow input should be marked as 'false'",
+        );
       }
       // VE does not concatenate the static portion like we are doing here.
       // Instead VE just ignores the static completely if dynamic binding is present.
@@ -224,9 +266,10 @@ export function checkStylingMap(
       // thing as it would think that the static portion was removed. For this reason we
       // concatenate it so that `[ngStyle]`/`[ngClass]`  can continue to work on changed.
       let staticPrefix = isClassBased ? tNode.classesWithoutHost : tNode.stylesWithoutHost;
-      ngDevMode && isClassBased === false && staticPrefix !== null &&
-          assertEqual(
-              staticPrefix.endsWith(';'), true, 'Expecting static portion to end with \';\'');
+      ngDevMode &&
+        isClassBased === false &&
+        staticPrefix !== null &&
+        assertEqual(staticPrefix.endsWith(';'), true, "Expecting static portion to end with ';'");
       if (staticPrefix !== null) {
         // We want to make sure that falsy values of `value` become empty strings.
         value = concatStringsWithSpace(staticPrefix, value ? value : '');
@@ -236,9 +279,15 @@ export function checkStylingMap(
       setDirectiveInputsWhichShadowsStyling(tView, tNode, lView, value, isClassBased);
     } else {
       updateStylingMap(
-          tView, tNode, lView, lView[RENDERER], lView[bindingIndex + 1],
-          lView[bindingIndex + 1] = toStylingKeyValueArray(keyValueArraySet, stringParser, value),
-          isClassBased, bindingIndex);
+        tView,
+        tNode,
+        lView,
+        lView[RENDERER],
+        lView[bindingIndex + 1],
+        (lView[bindingIndex + 1] = toStylingKeyValueArray(keyValueArraySet, stringParser, value)),
+        isClassBased,
+        bindingIndex,
+      );
     }
   }
 }
@@ -264,7 +313,11 @@ function isInHostBindings(tView: TView, bindingIndex: number): boolean {
  * @param isClassBased `true` if `class` change (`false` if `style`)
  */
 function stylingFirstUpdatePass(
-    tView: TView, tStylingKey: TStylingKey, bindingIndex: number, isClassBased: boolean): void {
+  tView: TView,
+  tStylingKey: TStylingKey,
+  bindingIndex: number,
+  isClassBased: boolean,
+): void {
   ngDevMode && assertFirstUpdatePass(tView);
   const tData = tView.data;
   if (tData[bindingIndex + 1] === null) {
@@ -303,7 +356,11 @@ function stylingFirstUpdatePass(
  * @param isClassBased `true` if `class` (`false` if `style`)
  */
 export function wrapInStaticStylingKey(
-    tData: TData, tNode: TNode, stylingKey: TStylingKey, isClassBased: boolean): TStylingKey {
+  tData: TData,
+  tNode: TNode,
+  stylingKey: TStylingKey,
+  isClassBased: boolean,
+): TStylingKey {
   const hostDirectiveDef = getCurrentDirectiveDef(tData);
   let residual = isClassBased ? tNode.residualClasses : tNode.residualStyles;
   if (hostDirectiveDef === null) {
@@ -312,7 +369,7 @@ export function wrapInStaticStylingKey(
     // styling and there is no need to collect them again. We know that we are the first styling
     // instruction because the `TNode.*Bindings` points to 0 (nothing has been inserted yet).
     const isFirstStylingInstructionInTemplate =
-        (isClassBased ? tNode.classBindings : tNode.styleBindings) as any as number === 0;
+      ((isClassBased ? tNode.classBindings : tNode.styleBindings) as any as number) === 0;
     if (isFirstStylingInstructionInTemplate) {
       // It would be nice to be able to get the statics from `mergeAttrs`, however, at this point
       // they are already merged and it would not be possible to figure which property belongs where
@@ -327,10 +384,15 @@ export function wrapInStaticStylingKey(
     // This means that we need to compute the residual.
     const directiveStylingLast = tNode.directiveStylingLast;
     const isFirstStylingInstructionInHostBinding =
-        directiveStylingLast === -1 || tData[directiveStylingLast] !== hostDirectiveDef;
+      directiveStylingLast === -1 || tData[directiveStylingLast] !== hostDirectiveDef;
     if (isFirstStylingInstructionInHostBinding) {
-      stylingKey =
-          collectStylingFromDirectives(hostDirectiveDef, tData, tNode, stylingKey, isClassBased);
+      stylingKey = collectStylingFromDirectives(
+        hostDirectiveDef,
+        tData,
+        tNode,
+        stylingKey,
+        isClassBased,
+      );
       if (residual === null) {
         // - If `null` than either:
         //    - Template styling instruction already ran and it has consumed the static
@@ -344,10 +406,17 @@ export function wrapInStaticStylingKey(
           // then there is nothing to do since this operation can only produce less static keys, not
           // more.)
           templateStylingKey = collectStylingFromDirectives(
-              null, tData, tNode, templateStylingKey[1] /* unwrap previous statics */,
-              isClassBased);
-          templateStylingKey =
-              collectStylingFromTAttrs(templateStylingKey, tNode.attrs, isClassBased);
+            null,
+            tData,
+            tNode,
+            templateStylingKey[1] /* unwrap previous statics */,
+            isClassBased,
+          );
+          templateStylingKey = collectStylingFromTAttrs(
+            templateStylingKey,
+            tNode.attrs,
+            isClassBased,
+          );
           setTemplateHeadTStylingKey(tData, tNode, isClassBased, templateStylingKey);
         }
       } else {
@@ -379,8 +448,11 @@ export function wrapInStaticStylingKey(
  * @param isClassBased `true` if `class` (`false` if `style`)
  * @return `TStylingKey` if found or `undefined` if not found.
  */
-function getTemplateHeadTStylingKey(tData: TData, tNode: TNode, isClassBased: boolean): TStylingKey|
-    undefined {
+function getTemplateHeadTStylingKey(
+  tData: TData,
+  tNode: TNode,
+  isClassBased: boolean,
+): TStylingKey | undefined {
   const bindings = isClassBased ? tNode.classBindings : tNode.styleBindings;
   if (getTStylingRangeNext(bindings) === 0) {
     // There does not seem to be a styling instruction in the `template`.
@@ -442,12 +514,18 @@ function getTemplateHeadTStylingKey(tData: TData, tNode: TNode, isClassBased: bo
  * @param tStylingKey New `TStylingKey` which is replacing the old one.
  */
 function setTemplateHeadTStylingKey(
-    tData: TData, tNode: TNode, isClassBased: boolean, tStylingKey: TStylingKey): void {
+  tData: TData,
+  tNode: TNode,
+  isClassBased: boolean,
+  tStylingKey: TStylingKey,
+): void {
   const bindings = isClassBased ? tNode.classBindings : tNode.styleBindings;
   ngDevMode &&
-      assertNotEqual(
-          getTStylingRangeNext(bindings), 0,
-          'Expecting to have at least one template styling binding.');
+    assertNotEqual(
+      getTStylingRangeNext(bindings),
+      0,
+      'Expecting to have at least one template styling binding.',
+    );
   tData[getTStylingRangePrev(bindings)] = tStylingKey;
 }
 
@@ -461,21 +539,26 @@ function setTemplateHeadTStylingKey(
  * @param tNode `TNode` which contains the directive range.
  * @param isClassBased `true` if `class` (`false` if `style`)
  */
-function collectResidual(tData: TData, tNode: TNode, isClassBased: boolean): KeyValueArray<any>|
-    null {
-  let residual: KeyValueArray<any>|null|undefined = undefined;
+function collectResidual(
+  tData: TData,
+  tNode: TNode,
+  isClassBased: boolean,
+): KeyValueArray<any> | null {
+  let residual: KeyValueArray<any> | null | undefined = undefined;
   const directiveEnd = tNode.directiveEnd;
   ngDevMode &&
-      assertNotEqual(
-          tNode.directiveStylingLast, -1,
-          'By the time this function gets called at least one hostBindings-node styling instruction must have executed.');
+    assertNotEqual(
+      tNode.directiveStylingLast,
+      -1,
+      'By the time this function gets called at least one hostBindings-node styling instruction must have executed.',
+    );
   // We add `1 + tNode.directiveStart` because we need to skip the current directive (as we are
   // collecting things after the last `hostBindings` directive which had a styling instruction.)
   for (let i = 1 + tNode.directiveStylingLast; i < directiveEnd; i++) {
     const attrs = (tData[i] as DirectiveDef<any>).hostAttrs;
-    residual = collectStylingFromTAttrs(residual, attrs, isClassBased) as KeyValueArray<any>| null;
+    residual = collectStylingFromTAttrs(residual, attrs, isClassBased) as KeyValueArray<any> | null;
   }
-  return collectStylingFromTAttrs(residual, tNode.attrs, isClassBased) as KeyValueArray<any>| null;
+  return collectStylingFromTAttrs(residual, tNode.attrs, isClassBased) as KeyValueArray<any> | null;
 }
 
 /**
@@ -491,11 +574,15 @@ function collectResidual(tData: TData, tNode: TNode, isClassBased: boolean): Key
  * @param isClassBased `true` if `class` (`false` if `style`)
  */
 function collectStylingFromDirectives(
-    hostDirectiveDef: DirectiveDef<any>|null, tData: TData, tNode: TNode, stylingKey: TStylingKey,
-    isClassBased: boolean): TStylingKey {
+  hostDirectiveDef: DirectiveDef<any> | null,
+  tData: TData,
+  tNode: TNode,
+  stylingKey: TStylingKey,
+  isClassBased: boolean,
+): TStylingKey {
   // We need to loop because there can be directives which have `hostAttrs` but don't have
   // `hostBindings` so this loop catches up to the current directive..
-  let currentDirective: DirectiveDef<any>|null = null;
+  let currentDirective: DirectiveDef<any> | null = null;
   const directiveEnd = tNode.directiveEnd;
   let directiveStylingLast = tNode.directiveStylingLast;
   if (directiveStylingLast === -1) {
@@ -527,8 +614,10 @@ function collectStylingFromDirectives(
  * @param isClassBased `true` if `class` (`false` if `style`)
  */
 function collectStylingFromTAttrs(
-    stylingKey: TStylingKey|undefined, attrs: TAttributes|null,
-    isClassBased: boolean): TStylingKey {
+  stylingKey: TStylingKey | undefined,
+  attrs: TAttributes | null,
+  isClassBased: boolean,
+): TStylingKey {
   const desiredMarker = isClassBased ? AttributeMarker.Classes : AttributeMarker.Styles;
   let currentMarker = AttributeMarker.ImplicitAttributes;
   if (attrs !== null) {
@@ -539,10 +628,13 @@ function collectStylingFromTAttrs(
       } else {
         if (currentMarker === desiredMarker) {
           if (!Array.isArray(stylingKey)) {
-            stylingKey = stylingKey === undefined ? [] : ['', stylingKey] as any;
+            stylingKey = stylingKey === undefined ? [] : (['', stylingKey] as any);
           }
           keyValueArraySet(
-              stylingKey as KeyValueArray<any>, item, isClassBased ? true : attrs[++i]);
+            stylingKey as KeyValueArray<any>,
+            item,
+            isClassBased ? true : attrs[++i],
+          );
         }
       }
     }
@@ -579,9 +671,10 @@ function collectStylingFromTAttrs(
  * @param value The value to parse/convert to `KeyValueArray`
  */
 export function toStylingKeyValueArray(
-    keyValueArraySet: (keyValueArray: KeyValueArray<any>, key: string, value: any) => void,
-    stringParser: (styleKeyValueArray: KeyValueArray<any>, text: string) => void,
-    value: string|string[]|{[key: string]: any}|SafeValue|null|undefined): KeyValueArray<any> {
+  keyValueArraySet: (keyValueArray: KeyValueArray<any>, key: string, value: any) => void,
+  stringParser: (styleKeyValueArray: KeyValueArray<any>, text: string) => void,
+  value: string | string[] | {[key: string]: any} | SafeValue | null | undefined,
+): KeyValueArray<any> {
   if (value == null /*|| value === undefined */ || value === '') return EMPTY_ARRAY as any;
   const styleKeyValueArray: KeyValueArray<any> = [] as any;
   const unwrappedValue = unwrapSafeValue(value) as string | string[] | {[key: string]: any};
@@ -599,7 +692,7 @@ export function toStylingKeyValueArray(
     stringParser(styleKeyValueArray, unwrappedValue);
   } else {
     ngDevMode &&
-        throwError('Unsupported styling type ' + typeof unwrappedValue + ': ' + unwrappedValue);
+      throwError('Unsupported styling type ' + typeof unwrappedValue + ': ' + unwrappedValue);
   }
   return styleKeyValueArray;
 }
@@ -657,25 +750,31 @@ export function classKeyValueArraySet(keyValueArray: KeyValueArray<any>, key: un
  * @param bindingIndex Binding index of the binding.
  */
 function updateStylingMap(
-    tView: TView, tNode: TNode, lView: LView, renderer: Renderer,
-    oldKeyValueArray: KeyValueArray<any>, newKeyValueArray: KeyValueArray<any>,
-    isClassBased: boolean, bindingIndex: number) {
-  if (oldKeyValueArray as KeyValueArray<any>| NO_CHANGE === NO_CHANGE) {
+  tView: TView,
+  tNode: TNode,
+  lView: LView,
+  renderer: Renderer,
+  oldKeyValueArray: KeyValueArray<any>,
+  newKeyValueArray: KeyValueArray<any>,
+  isClassBased: boolean,
+  bindingIndex: number,
+) {
+  if ((oldKeyValueArray as KeyValueArray<any> | NO_CHANGE) === NO_CHANGE) {
     // On first execution the oldKeyValueArray is NO_CHANGE => treat it as empty KeyValueArray.
     oldKeyValueArray = EMPTY_ARRAY as any;
   }
   let oldIndex = 0;
   let newIndex = 0;
-  let oldKey: string|null = 0 < oldKeyValueArray.length ? oldKeyValueArray[0] : null;
-  let newKey: string|null = 0 < newKeyValueArray.length ? newKeyValueArray[0] : null;
+  let oldKey: string | null = 0 < oldKeyValueArray.length ? oldKeyValueArray[0] : null;
+  let newKey: string | null = 0 < newKeyValueArray.length ? newKeyValueArray[0] : null;
   while (oldKey !== null || newKey !== null) {
     ngDevMode && assertLessThan(oldIndex, 999, 'Are we stuck in infinite loop?');
     ngDevMode && assertLessThan(newIndex, 999, 'Are we stuck in infinite loop?');
     const oldValue =
-        oldIndex < oldKeyValueArray.length ? oldKeyValueArray[oldIndex + 1] : undefined;
+      oldIndex < oldKeyValueArray.length ? oldKeyValueArray[oldIndex + 1] : undefined;
     const newValue =
-        newIndex < newKeyValueArray.length ? newKeyValueArray[newIndex + 1] : undefined;
-    let setKey: string|null = null;
+      newIndex < newKeyValueArray.length ? newKeyValueArray[newIndex + 1] : undefined;
+    let setKey: string | null = null;
     let setValue: any = undefined;
     if (oldKey === newKey) {
       // UPDATE: Keys are equal => new value is overwriting old value.
@@ -685,7 +784,7 @@ function updateStylingMap(
         setKey = newKey;
         setValue = newValue;
       }
-    } else if (newKey === null || oldKey !== null && oldKey < newKey!) {
+    } else if (newKey === null || (oldKey !== null && oldKey < newKey!)) {
       // DELETE: oldKey key is missing or we did not find the oldKey in the newValue
       // (because the keyValueArray is sorted and `newKey` is found later alphabetically).
       // `"background" < "color"` so we need to delete `"background"` because it is not found in the
@@ -727,8 +826,15 @@ function updateStylingMap(
  * @param bindingIndex Binding index of the binding.
  */
 function updateStyling(
-    tView: TView, tNode: TNode, lView: LView, renderer: Renderer, prop: string,
-    value: string|undefined|null|boolean, isClassBased: boolean, bindingIndex: number) {
+  tView: TView,
+  tNode: TNode,
+  lView: LView,
+  renderer: Renderer,
+  prop: string,
+  value: string | undefined | null | boolean,
+  isClassBased: boolean,
+  bindingIndex: number,
+) {
   if (!(tNode.type & TNodeType.AnyRNode)) {
     // It is possible to have styling on non-elements (such as ng-container).
     // This is rare, but it does happen. In such a case, just ignore the binding.
@@ -736,9 +842,9 @@ function updateStyling(
   }
   const tData = tView.data;
   const tRange = tData[bindingIndex + 1] as TStylingRange;
-  const higherPriorityValue = getTStylingRangeNextDuplicate(tRange) ?
-      findStylingValue(tData, tNode, lView, prop, getTStylingRangeNext(tRange), isClassBased) :
-      undefined;
+  const higherPriorityValue = getTStylingRangeNextDuplicate(tRange)
+    ? findStylingValue(tData, tNode, lView, prop, getTStylingRangeNext(tRange), isClassBased)
+    : undefined;
   if (!isStylingValuePresent(higherPriorityValue)) {
     // We don't have a next duplicate, or we did not find a duplicate value.
     if (!isStylingValuePresent(value)) {
@@ -782,8 +888,13 @@ function updateStyling(
  * @param isClassBased `true` if `class` (`false` if `style`)
  */
 function findStylingValue(
-    tData: TData, tNode: TNode|null, lView: LView, prop: string, index: number,
-    isClassBased: boolean): any {
+  tData: TData,
+  tNode: TNode | null,
+  lView: LView,
+  prop: string,
+  index: number,
+  isClassBased: boolean,
+): any {
   // `TNode` to use for resolving static styling. Also controls search direction.
   //   - `TNode` search next and quit as soon as `isStylingValuePresent(value)` is true.
   //      If no value found consult `tNode.residualStyle`/`tNode.residualClass` for default value.
@@ -808,8 +919,11 @@ function findStylingValue(
       // binding actually executes.)
       valueAtLViewIndex = isStylingMap ? EMPTY_ARRAY : undefined;
     }
-    let currentValue = isStylingMap ? keyValueArrayGet(valueAtLViewIndex, prop) :
-                                      (key === prop ? valueAtLViewIndex : undefined);
+    let currentValue = isStylingMap
+      ? keyValueArrayGet(valueAtLViewIndex, prop)
+      : key === prop
+        ? valueAtLViewIndex
+        : undefined;
     if (containsStatics && !isStylingValuePresent(currentValue)) {
       currentValue = keyValueArrayGet(rawKey as KeyValueArray<any>, prop);
     }
@@ -854,7 +968,10 @@ function isStylingValuePresent(value: any): boolean {
  * @param value
  * @param suffix
  */
-function normalizeSuffix(value: any, suffix: string|undefined|null): string|null|undefined|boolean {
+function normalizeSuffix(
+  value: any,
+  suffix: string | undefined | null,
+): string | null | undefined | boolean {
   if (value == null || value === '') {
     // do nothing
     // Do not add the suffix if the value is going to be empty.
@@ -868,7 +985,6 @@ function normalizeSuffix(value: any, suffix: string|undefined|null): string|null
   return value;
 }
 
-
 /**
  * Tests if the `TNode` has input shadow.
  *
diff --git a/packages/core/src/render3/instructions/template.ts b/packages/core/src/render3/instructions/template.ts
index 9c6ea30fe6bde..d18c9355a76a8 100644
--- a/packages/core/src/render3/instructions/template.ts
+++ b/packages/core/src/render3/instructions/template.ts
@@ -8,7 +8,12 @@
 import {validateMatchingNode, validateNodeExists} from '../../hydration/error_handling';
 import {TEMPLATES} from '../../hydration/interfaces';
 import {locateNextRNode, siblingAfter} from '../../hydration/node_lookup_utils';
-import {calcSerializedContainerSize, isDisconnectedNode, markRNodeAsClaimedByHydration, setSegmentHead} from '../../hydration/utils';
+import {
+  calcSerializedContainerSize,
+  isDisconnectedNode,
+  markRNodeAsClaimedByHydration,
+  setSegmentHead,
+} from '../../hydration/utils';
 import {isDetachedByI18n} from '../../i18n/utils';
 import {populateDehydratedViewsInLContainer} from '../../linker/view_container_ref';
 import {assertEqual} from '../../util/assert';
@@ -21,15 +26,37 @@ import {RComment} from '../interfaces/renderer_dom';
 import {isDirectiveHost} from '../interfaces/type_checks';
 import {HEADER_OFFSET, HYDRATION, LView, RENDERER, TView, TViewType} from '../interfaces/view';
 import {appendChild} from '../node_manipulation';
-import {getLView, getTView, isInSkipHydrationBlock, lastNodeWasCreated, setCurrentTNode, wasLastNodeCreated} from '../state';
+import {
+  getLView,
+  getTView,
+  isInSkipHydrationBlock,
+  lastNodeWasCreated,
+  setCurrentTNode,
+  wasLastNodeCreated,
+} from '../state';
 import {getConstant} from '../util/view_utils';
 
-import {addToViewTree, createDirectivesInstances, createLContainer, createTView, getOrCreateTNode, resolveDirectives, saveResolvedLocalsInData} from './shared';
+import {
+  addToViewTree,
+  createDirectivesInstances,
+  createLContainer,
+  createTView,
+  getOrCreateTNode,
+  resolveDirectives,
+  saveResolvedLocalsInData,
+} from './shared';
 
 function templateFirstCreatePass(
-    index: number, tView: TView, lView: LView, templateFn: ComponentTemplate<any>|null,
-    decls: number, vars: number, tagName?: string|null, attrs?: TAttributes|null,
-    localRefsIndex?: number|null): TContainerNode {
+  index: number,
+  tView: TView,
+  lView: LView,
+  templateFn: ComponentTemplate<any> | null,
+  decls: number,
+  vars: number,
+  tagName?: string | null,
+  attrs?: TAttributes | null,
+  localRefsIndex?: number | null,
+): TContainerNode {
   ngDevMode && assertFirstCreatePass(tView);
   ngDevMode && ngDevMode.firstCreatePass++;
   const tViewConsts = tView.consts;
@@ -40,9 +67,19 @@ function templateFirstCreatePass(
   resolveDirectives(tView, lView, tNode, getConstant<string[]>(tViewConsts, localRefsIndex));
   registerPostOrderHooks(tView, tNode);
 
-  const embeddedTView = tNode.tView = createTView(
-      TViewType.Embedded, tNode, templateFn, decls, vars, tView.directiveRegistry,
-      tView.pipeRegistry, null, tView.schemas, tViewConsts, null /* ssrId */);
+  const embeddedTView = (tNode.tView = createTView(
+    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);
@@ -68,20 +105,39 @@ function templateFirstCreatePass(
  *        Defaults to the current element associated with the local-ref.
  */
 export function declareTemplate(
-    declarationLView: LView, declarationTView: TView, index: number,
-    templateFn: ComponentTemplate<any>|null, decls: number, vars: number, tagName?: string|null,
-    attrs?: TAttributes|null, localRefsIndex?: number|null,
-    localRefExtractor?: LocalRefExtractor): TNode {
+  declarationLView: LView,
+  declarationTView: TView,
+  index: number,
+  templateFn: ComponentTemplate<any> | null,
+  decls: number,
+  vars: number,
+  tagName?: string | null,
+  attrs?: TAttributes | null,
+  localRefsIndex?: number | null,
+  localRefExtractor?: LocalRefExtractor,
+): TNode {
   const adjustedIndex = index + HEADER_OFFSET;
-  const tNode = declarationTView.firstCreatePass ?
-      templateFirstCreatePass(
-          adjustedIndex, declarationTView, declarationLView, templateFn, decls, vars, tagName,
-          attrs, localRefsIndex) :
-      declarationTView.data[adjustedIndex] as TContainerNode;
+  const tNode = declarationTView.firstCreatePass
+    ? templateFirstCreatePass(
+        adjustedIndex,
+        declarationTView,
+        declarationLView,
+        templateFn,
+        decls,
+        vars,
+        tagName,
+        attrs,
+        localRefsIndex,
+      )
+    : (declarationTView.data[adjustedIndex] as TContainerNode);
   setCurrentTNode(tNode, false);
 
-  const comment =
-      _locateOrCreateContainerAnchor(declarationTView, declarationLView, tNode, index) as RComment;
+  const comment = _locateOrCreateContainerAnchor(
+    declarationTView,
+    declarationLView,
+    tNode,
+    index,
+  ) as RComment;
 
   if (wasLastNodeCreated()) {
     appendChild(declarationTView, declarationLView, comment, tNode);
@@ -128,15 +184,30 @@ export function declareTemplate(
  * @codeGenApi
  */
 export function ɵɵtemplate(
-    index: number, templateFn: ComponentTemplate<any>|null, decls: number, vars: number,
-    tagName?: string|null, attrsIndex?: number|null, localRefsIndex?: number|null,
-    localRefExtractor?: LocalRefExtractor): typeof ɵɵtemplate {
+  index: number,
+  templateFn: ComponentTemplate<any> | null,
+  decls: number,
+  vars: number,
+  tagName?: string | null,
+  attrsIndex?: number | null,
+  localRefsIndex?: number | null,
+  localRefExtractor?: LocalRefExtractor,
+): typeof ɵɵtemplate {
   const lView = getLView();
   const tView = getTView();
   const attrs = getConstant<TAttributes>(tView.consts, attrsIndex);
   declareTemplate(
-      lView, tView, index, templateFn, decls, vars, tagName, attrs, localRefsIndex,
-      localRefExtractor);
+    lView,
+    tView,
+    index,
+    templateFn,
+    decls,
+    vars,
+    tagName,
+    attrs,
+    localRefsIndex,
+    localRefExtractor,
+  );
   return ɵɵtemplate;
 }
 
@@ -146,7 +217,11 @@ let _locateOrCreateContainerAnchor = createContainerAnchorImpl;
  * Regular creation mode for LContainers and their anchor (comment) nodes.
  */
 function createContainerAnchorImpl(
-    tView: TView, lView: LView, tNode: TNode, index: number): RComment {
+  tView: TView,
+  lView: LView,
+  tNode: TNode,
+  index: number,
+): RComment {
   lastNodeWasCreated(true);
   return lView[RENDERER].createComment(ngDevMode ? 'container' : '');
 }
@@ -157,10 +232,17 @@ function createContainerAnchorImpl(
  * anchor (comment) nodes.
  */
 function locateOrCreateContainerAnchorImpl(
-    tView: TView, lView: LView, tNode: TNode, index: number): RComment {
+  tView: TView,
+  lView: LView,
+  tNode: TNode,
+  index: number,
+): RComment {
   const hydrationInfo = lView[HYDRATION];
-  const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock() ||
-      isDetachedByI18n(tNode) || isDisconnectedNode(hydrationInfo, index);
+  const isNodeCreationMode =
+    !hydrationInfo ||
+    isInSkipHydrationBlock() ||
+    isDetachedByI18n(tNode) ||
+    isDisconnectedNode(hydrationInfo, index);
   lastNodeWasCreated(isNodeCreationMode);
 
   // Regular creation mode.
@@ -183,7 +265,7 @@ function locateOrCreateContainerAnchorImpl(
       tNode.tView.ssrId = ssrId;
     } else {
       ngDevMode &&
-          assertEqual(tNode.tView.ssrId, ssrId, 'Unexpected value of the `ssrId` for this TView');
+        assertEqual(tNode.tView.ssrId, ssrId, 'Unexpected value of the `ssrId` for this TView');
     }
   }
 
diff --git a/packages/core/src/render3/instructions/text.ts b/packages/core/src/render3/instructions/text.ts
index 0b824c9fb2c4c..1b4cd5b270aa4 100644
--- a/packages/core/src/render3/instructions/text.ts
+++ b/packages/core/src/render3/instructions/text.ts
@@ -14,12 +14,18 @@ import {TElementNode, TNode, TNodeType} from '../interfaces/node';
 import {RText} from '../interfaces/renderer_dom';
 import {HEADER_OFFSET, HYDRATION, LView, RENDERER, T_HOST, TView} from '../interfaces/view';
 import {appendChild, createTextNode} from '../node_manipulation';
-import {getBindingIndex, getLView, getTView, isInSkipHydrationBlock, lastNodeWasCreated, setCurrentTNode, wasLastNodeCreated} from '../state';
+import {
+  getBindingIndex,
+  getLView,
+  getTView,
+  isInSkipHydrationBlock,
+  lastNodeWasCreated,
+  setCurrentTNode,
+  wasLastNodeCreated,
+} from '../state';
 
 import {getOrCreateTNode} from './shared';
 
-
-
 /**
  * Create static text node
  *
@@ -34,14 +40,16 @@ export function ɵɵtext(index: number, value: string = ''): void {
   const adjustedIndex = index + HEADER_OFFSET;
 
   ngDevMode &&
-      assertEqual(
-          getBindingIndex(), tView.bindingStartIndex,
-          'text nodes should be created before any bindings');
+    assertEqual(
+      getBindingIndex(),
+      tView.bindingStartIndex,
+      'text nodes should be created before any bindings',
+    );
   ngDevMode && assertIndexInRange(lView, adjustedIndex);
 
-  const tNode = tView.firstCreatePass ?
-      getOrCreateTNode(tView, adjustedIndex, TNodeType.Text, value, null) :
-      tView.data[adjustedIndex] as TElementNode;
+  const tNode = tView.firstCreatePass
+    ? getOrCreateTNode(tView, adjustedIndex, TNodeType.Text, value, null)
+    : (tView.data[adjustedIndex] as TElementNode);
 
   const textNative = _locateOrCreateTextNode(tView, lView, tNode, value, index);
   lView[adjustedIndex] = textNative;
@@ -54,21 +62,34 @@ export function ɵɵtext(index: number, value: string = ''): void {
   setCurrentTNode(tNode, false);
 }
 
-let _locateOrCreateTextNode: typeof locateOrCreateTextNodeImpl =
-    (tView: TView, lView: LView, tNode: TNode, value: string, index: number) => {
-      lastNodeWasCreated(true);
-      return createTextNode(lView[RENDERER], value);
-    };
+let _locateOrCreateTextNode: typeof locateOrCreateTextNodeImpl = (
+  tView: TView,
+  lView: LView,
+  tNode: TNode,
+  value: string,
+  index: number,
+) => {
+  lastNodeWasCreated(true);
+  return createTextNode(lView[RENDERER], value);
+};
 
 /**
  * Enables hydration code path (to lookup existing elements in DOM)
  * in addition to the regular creation mode of text nodes.
  */
 function locateOrCreateTextNodeImpl(
-    tView: TView, lView: LView, tNode: TNode, value: string, index: number): RText {
+  tView: TView,
+  lView: LView,
+  tNode: TNode,
+  value: string,
+  index: number,
+): RText {
   const hydrationInfo = lView[HYDRATION];
-  const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock() ||
-      isDetachedByI18n(tNode) || isDisconnectedNode(hydrationInfo, index);
+  const isNodeCreationMode =
+    !hydrationInfo ||
+    isInSkipHydrationBlock() ||
+    isDetachedByI18n(tNode) ||
+    isDisconnectedNode(hydrationInfo, index);
   lastNodeWasCreated(isNodeCreationMode);
 
   // Regular creation mode.
diff --git a/packages/core/src/render3/instructions/text_interpolation.ts b/packages/core/src/render3/instructions/text_interpolation.ts
index d66a595a4dcfb..622dc3dfdbc83 100644
--- a/packages/core/src/render3/instructions/text_interpolation.ts
+++ b/packages/core/src/render3/instructions/text_interpolation.ts
@@ -8,10 +8,19 @@
 import {getLView, getSelectedIndex} from '../state';
 import {NO_CHANGE} from '../tokens';
 
-import {interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV} from './interpolation';
+import {
+  interpolation1,
+  interpolation2,
+  interpolation3,
+  interpolation4,
+  interpolation5,
+  interpolation6,
+  interpolation7,
+  interpolation8,
+  interpolationV,
+} from './interpolation';
 import {textBindingInternal} from './shared';
 
-
 /**
  *
  * Update text content with a lone bound value
@@ -37,7 +46,6 @@ export function ɵɵtextInterpolate(v0: any): typeof ɵɵtextInterpolate {
   return ɵɵtextInterpolate;
 }
 
-
 /**
  *
  * Update text content with single bound value surrounded by other text.
@@ -58,7 +66,10 @@ export function ɵɵtextInterpolate(v0: any): typeof ɵɵtextInterpolate {
  * @codeGenApi
  */
 export function ɵɵtextInterpolate1(
-    prefix: string, v0: any, suffix: string): typeof ɵɵtextInterpolate1 {
+  prefix: string,
+  v0: any,
+  suffix: string,
+): typeof ɵɵtextInterpolate1 {
   const lView = getLView();
   const interpolated = interpolation1(lView, prefix, v0, suffix);
   if (interpolated !== NO_CHANGE) {
@@ -87,7 +98,12 @@ export function ɵɵtextInterpolate1(
  * @codeGenApi
  */
 export function ɵɵtextInterpolate2(
-    prefix: string, v0: any, i0: string, v1: any, suffix: string): typeof ɵɵtextInterpolate2 {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  suffix: string,
+): typeof ɵɵtextInterpolate2 {
   const lView = getLView();
   const interpolated = interpolation2(lView, prefix, v0, i0, v1, suffix);
   if (interpolated !== NO_CHANGE) {
@@ -117,8 +133,14 @@ export function ɵɵtextInterpolate2(
  * @codeGenApi
  */
 export function ɵɵtextInterpolate3(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any,
-    suffix: string): typeof ɵɵtextInterpolate3 {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  suffix: string,
+): typeof ɵɵtextInterpolate3 {
   const lView = getLView();
   const interpolated = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix);
   if (interpolated !== NO_CHANGE) {
@@ -148,8 +170,16 @@ export function ɵɵtextInterpolate3(
  * @codeGenApi
  */
 export function ɵɵtextInterpolate4(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    suffix: string): typeof ɵɵtextInterpolate4 {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  suffix: string,
+): typeof ɵɵtextInterpolate4 {
   const lView = getLView();
   const interpolated = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix);
   if (interpolated !== NO_CHANGE) {
@@ -179,8 +209,18 @@ export function ɵɵtextInterpolate4(
  * @codeGenApi
  */
 export function ɵɵtextInterpolate5(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    i3: string, v4: any, suffix: string): typeof ɵɵtextInterpolate5 {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  suffix: string,
+): typeof ɵɵtextInterpolate5 {
   const lView = getLView();
   const interpolated = interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
   if (interpolated !== NO_CHANGE) {
@@ -212,11 +252,37 @@ export function ɵɵtextInterpolate5(
  * @codeGenApi
  */
 export function ɵɵtextInterpolate6(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    i3: string, v4: any, i4: string, v5: any, suffix: string): typeof ɵɵtextInterpolate6 {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  suffix: string,
+): typeof ɵɵtextInterpolate6 {
   const lView = getLView();
-  const interpolated =
-      interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix);
+  const interpolated = interpolation6(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    suffix,
+  );
   if (interpolated !== NO_CHANGE) {
     textBindingInternal(lView, getSelectedIndex(), interpolated as string);
   }
@@ -244,12 +310,41 @@ export function ɵɵtextInterpolate6(
  * @codeGenApi
  */
 export function ɵɵtextInterpolate7(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    i3: string, v4: any, i4: string, v5: any, i5: string, v6: any,
-    suffix: string): typeof ɵɵtextInterpolate7 {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  i5: string,
+  v6: any,
+  suffix: string,
+): typeof ɵɵtextInterpolate7 {
   const lView = getLView();
-  const interpolated =
-      interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix);
+  const interpolated = interpolation7(
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    i5,
+    v6,
+    suffix,
+  );
   if (interpolated !== NO_CHANGE) {
     textBindingInternal(lView, getSelectedIndex(), interpolated as string);
   }
@@ -277,12 +372,45 @@ export function ɵɵtextInterpolate7(
  * @codeGenApi
  */
 export function ɵɵtextInterpolate8(
-    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
-    i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any,
-    suffix: string): typeof ɵɵtextInterpolate8 {
+  prefix: string,
+  v0: any,
+  i0: string,
+  v1: any,
+  i1: string,
+  v2: any,
+  i2: string,
+  v3: any,
+  i3: string,
+  v4: any,
+  i4: string,
+  v5: any,
+  i5: string,
+  v6: any,
+  i6: string,
+  v7: any,
+  suffix: string,
+): typeof ɵɵtextInterpolate8 {
   const lView = getLView();
   const interpolated = interpolation8(
-      lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix);
+    lView,
+    prefix,
+    v0,
+    i0,
+    v1,
+    i1,
+    v2,
+    i2,
+    v3,
+    i3,
+    v4,
+    i4,
+    v5,
+    i5,
+    v6,
+    i6,
+    v7,
+    suffix,
+  );
   if (interpolated !== NO_CHANGE) {
     textBindingInternal(lView, getSelectedIndex(), interpolated as string);
   }
diff --git a/packages/core/src/render3/instructions/two_way.ts b/packages/core/src/render3/instructions/two_way.ts
index 695aeba2c507d..f18d4d9c58f70 100644
--- a/packages/core/src/render3/instructions/two_way.ts
+++ b/packages/core/src/render3/instructions/two_way.ts
@@ -15,7 +15,6 @@ import {getCurrentTNode, getLView, getSelectedTNode, getTView, nextBindingIndex}
 import {listenerInternal} from './listener';
 import {elementPropertyInternal, storePropertyBindingMetadata} from './shared';
 
-
 /**
  * Update a two-way bound property on a selected element.
  *
@@ -30,8 +29,10 @@ import {elementPropertyInternal, storePropertyBindingMetadata} from './shared';
  * @codeGenApi
  */
 export function ɵɵtwoWayProperty<T>(
-    propName: string, value: T|WritableSignal<T>,
-    sanitizer?: SanitizerFn|null): typeof ɵɵtwoWayProperty {
+  propName: string,
+  value: T | WritableSignal<T>,
+  sanitizer?: SanitizerFn | null,
+): typeof ɵɵtwoWayProperty {
   // TODO(crisbeto): perf impact of re-evaluating this on each change detection?
   if (isWritableSignal(value)) {
     value = value();
@@ -43,7 +44,15 @@ export function ɵɵtwoWayProperty<T>(
     const tView = getTView();
     const tNode = getSelectedTNode();
     elementPropertyInternal(
-        tView, tNode, lView, propName, value, lView[RENDERER], sanitizer, false);
+      tView,
+      tNode,
+      lView,
+      propName,
+      value,
+      lView[RENDERER],
+      sanitizer,
+      false,
+    );
     ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, bindingIndex);
   }
 
@@ -73,8 +82,10 @@ export function ɵɵtwoWayBindingSet<T>(target: unknown, value: T): boolean {
  * @codeGenApi
  */
 export function ɵɵtwoWayListener(
-    eventName: string, listenerFn: (e?: any) => any): typeof ɵɵtwoWayListener {
-  const lView = getLView<{}|null>();
+  eventName: string,
+  listenerFn: (e?: any) => any,
+): typeof ɵɵtwoWayListener {
+  const lView = getLView<{} | null>();
   const tView = getTView();
   const tNode = getCurrentTNode()!;
   listenerInternal(tView, lView, lView[RENDERER], tNode, eventName, listenerFn);
diff --git a/packages/core/src/render3/instructions/write_to_directive_input.ts b/packages/core/src/render3/instructions/write_to_directive_input.ts
index 47dadd1c2c4dd..d901575bfd8a5 100644
--- a/packages/core/src/render3/instructions/write_to_directive_input.ts
+++ b/packages/core/src/render3/instructions/write_to_directive_input.ts
@@ -12,18 +12,23 @@ import {InputSignalWithTransform} from '../../authoring/input/input_signal';
 import {InputSignalNode} from '../../authoring/input/input_signal_node';
 import {applyValueToInputField} from '../apply_value_input_field';
 import {DirectiveDef} from '../interfaces/definition';
-import { InputFlags } from '../interfaces/input_flags';
+import {InputFlags} from '../interfaces/input_flags';
 
 export function writeToDirectiveInput<T>(
-    def: DirectiveDef<T>, instance: T, publicName: string, privateName: string, flags: InputFlags,
-    value: unknown) {
+  def: DirectiveDef<T>,
+  instance: T,
+  publicName: string,
+  privateName: string,
+  flags: InputFlags,
+  value: unknown,
+) {
   const prevConsumer = setActiveConsumer(null);
   try {
     // If we know we are dealing with a signal input, we cache its reference
     // in a tree-shakable way. The input signal node can then be used for
     // value transform execution or actual value updates without introducing
     // additional megamorphic accesses for accessing the instance field.
-    let inputSignalNode: InputSignalNode<unknown, unknown>|null = null;
+    let inputSignalNode: InputSignalNode<unknown, unknown> | null = null;
     if ((flags & InputFlags.SignalBased) !== 0) {
       const field = (instance as any)[privateName] as InputSignalWithTransform<unknown, unknown>;
       inputSignalNode = field[SIGNAL];
diff --git a/packages/core/src/render3/interfaces/container.ts b/packages/core/src/render3/interfaces/container.ts
index 7d608a9187fec..84d124897e094 100644
--- a/packages/core/src/render3/interfaces/container.ts
+++ b/packages/core/src/render3/interfaces/container.ts
@@ -12,7 +12,6 @@ import {TNode} from './node';
 import {RComment, RElement} from './renderer_dom';
 import {FLAGS, HOST, LView, NEXT, PARENT, T_HOST} from './view';
 
-
 /**
  * Special location which allows easy identification of type. If we have an array which was
  * retrieved from the `LView` and that array has `true` at `TYPE` location, we know it is
@@ -57,7 +56,7 @@ export interface LContainer extends Array<any> {
    * The host could be an LView if this container is on a component node.
    * In that case, the component LView is its HOST.
    */
-  readonly[HOST]: RElement|RComment|LView;
+  readonly [HOST]: RElement | RComment | LView;
 
   /**
    * This is a type field which allows us to differentiate `LContainer` from `StylingContext` in an
@@ -78,14 +77,14 @@ export interface LContainer extends Array<any> {
    * This allows us to jump from a container to a sibling container or component
    * view with the same parent, so we can remove listeners efficiently.
    */
-  [NEXT]: LView|LContainer|null;
+  [NEXT]: LView | LContainer | null;
 
   /**
    * A collection of views created based on the underlying `<ng-template>` element but inserted into
    * a different `LContainer`. We need to track views created from a given declaration point since
    * queries collect matches from the embedded view declaration point and _not_ the insertion point.
    */
-  [MOVED_VIEWS]: LView[]|null;
+  [MOVED_VIEWS]: LView[] | null;
 
   /**
    * Pointer to the `TNode` which represents the host of the container.
@@ -103,7 +102,7 @@ export interface LContainer extends Array<any> {
    * NOTE: This is stored as `any[]` because render3 should really not be aware of `ViewRef` and
    * doing so creates circular dependency.
    */
-  [VIEW_REFS]: unknown[]|null;
+  [VIEW_REFS]: unknown[] | null;
 
   /**
    * Array of dehydrated views within this container.
@@ -115,7 +114,7 @@ export interface LContainer extends Array<any> {
    * "garbage-collected" later on, i.e. removed from the DOM once the hydration
    * logic finishes.
    */
-  [DEHYDRATED_VIEWS]: DehydratedContainerView[]|null;
+  [DEHYDRATED_VIEWS]: DehydratedContainerView[] | null;
 }
 
 /** Flags associated with an LContainer (saved in LContainer[FLAGS]) */
diff --git a/packages/core/src/render3/interfaces/context.ts b/packages/core/src/render3/interfaces/context.ts
index e097719190d11..c9217c90cde86 100644
--- a/packages/core/src/render3/interfaces/context.ts
+++ b/packages/core/src/render3/interfaces/context.ts
@@ -6,12 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {getLViewById} from './lview_tracking';
 import {RNode} from './renderer_dom';
 import {LView} from './view';
 
-
 /**
  * The internal view context which is specific to a given DOM element, directive or
  * component instance. Each value in here (besides the LView and element node details)
@@ -26,37 +24,38 @@ export class LContext {
   /**
    * The instance of the Component node.
    */
-  public component: {}|null|undefined;
+  public component: {} | null | undefined;
 
   /**
    * The list of active directives that exist on this element.
    */
-  public directives: any[]|null|undefined;
+  public directives: any[] | null | undefined;
 
   /**
    * The map of local references (local reference name => element or directive instance) that
    * exist on this element.
    */
-  public localRefs: {[key: string]: any}|null|undefined;
+  public localRefs: {[key: string]: any} | null | undefined;
 
   /** Component's parent view data. */
-  get lView(): LView|null {
+  get lView(): LView | null {
     return getLViewById(this.lViewId);
   }
 
   constructor(
-      /**
-       * ID of the component's parent view data.
-       */
-      private lViewId: number,
-
-      /**
-       * The index instance of the node.
-       */
-      public nodeIndex: number,
-
-      /**
-       * The instance of the DOM node that is attached to the lNode.
-       */
-      public native: RNode) {}
+    /**
+     * ID of the component's parent view data.
+     */
+    private lViewId: number,
+
+    /**
+     * The index instance of the node.
+     */
+    public nodeIndex: number,
+
+    /**
+     * The instance of the DOM node that is attached to the lNode.
+     */
+    public native: RNode,
+  ) {}
 }
diff --git a/packages/core/src/render3/interfaces/definition.ts b/packages/core/src/render3/interfaces/definition.ts
index 0e51ce40567ac..245595222dd1f 100644
--- a/packages/core/src/render3/interfaces/definition.ts
+++ b/packages/core/src/render3/interfaces/definition.ts
@@ -19,7 +19,6 @@ import {CssSelectorList} from './projection';
 import type {TView} from './view';
 import {InputFlags} from './input_flags';
 
-
 /**
  * Definition of what a template rendering function should look like for a component.
  */
@@ -27,7 +26,7 @@ export type ComponentTemplate<T> = {
   // Note: the ctx parameter is typed as T|U, as using only U would prevent a template with
   // e.g. ctx: {} from being assigned to ComponentTemplate<any> as TypeScript won't infer U = any
   // in that scenario. By including T this incompatibility is resolved.
-  <U extends T>(rf: RenderFlags, ctx: T|U): void;
+  <U extends T>(rf: RenderFlags, ctx: T | U): void;
 };
 
 /**
@@ -38,8 +37,11 @@ export type ViewQueriesFunction<T> = <U extends T>(rf: RenderFlags, ctx: U) => v
 /**
  * Definition of what a content queries function should look like.
  */
-export type ContentQueriesFunction<T> =
-    <U extends T>(rf: RenderFlags, ctx: U, directiveIndex: number) => void;
+export type ContentQueriesFunction<T> = <U extends T>(
+  rf: RenderFlags,
+  ctx: U,
+  directiveIndex: number,
+) => void;
 
 export interface ClassDebugInfo {
   className: string;
@@ -61,7 +63,7 @@ export const enum RenderFlags {
   Create = 0b01,
 
   /* Whether to run the update block (e.g. refresh bindings) */
-  Update = 0b10
+  Update = 0b10,
 }
 
 /**
@@ -108,7 +110,7 @@ export interface DirectiveDef<T> {
    * A dictionary mapping the inputs' public name to their minified property names
    * (along with flags if there are any).
    */
-  readonly inputs: {[P in keyof T]?: string|[minifiedName: string, flags: InputFlags]};
+  readonly inputs: {[P in keyof T]?: string | [minifiedName: string, flags: InputFlags]};
 
   /**
    * A dictionary mapping the private names of inputs to their transformation functions.
@@ -118,14 +120,15 @@ export interface DirectiveDef<T> {
    * Note: Signal inputs will not have transforms captured here. This is because their
    * transform function is already integrated into the `InputSignal`.
    */
-  readonly inputTransforms: {[classPropertyName: string]: InputTransformFunction}|null;
+  readonly inputTransforms: {[classPropertyName: string]: InputTransformFunction} | null;
 
   /**
    * Contains the raw input information produced by the compiler. Can be
    * used to do further processing after the `inputs` have been inverted.
    */
-  readonly inputConfig:
-      {[P in keyof T]?: string|[InputFlags, string, string?, InputTransformFunction?]};
+  readonly inputConfig: {
+    [P in keyof T]?: string | [InputFlags, string, string?, InputTransformFunction?];
+  };
 
   /**
    * @deprecated This is only here because `NgOnChanges` incorrectly uses declared name instead of
@@ -143,19 +146,19 @@ export interface DirectiveDef<T> {
   /**
    * Function to create and refresh content queries associated with a given directive.
    */
-  contentQueries: ContentQueriesFunction<T>|null;
+  contentQueries: ContentQueriesFunction<T> | null;
 
   /**
    * Query-related instructions for a directive. Note that while directives don't have a
    * view and as such view queries won't necessarily do anything, there might be
    * components that extend the directive.
    */
-  viewQuery: ViewQueriesFunction<T>|null;
+  viewQuery: ViewQueriesFunction<T> | null;
 
   /**
    * Refreshes host bindings on the associated directive.
    */
-  readonly hostBindings: HostBindingsFunction<T>|null;
+  readonly hostBindings: HostBindingsFunction<T> | null;
 
   /**
    * The number of bindings in this directive `hostBindings` (including pure fn bindings).
@@ -195,15 +198,15 @@ export interface DirectiveDef<T> {
    * the entries. The marker values themselves are set via entries found in the
    * [AttributeMarker] enum.
    */
-  readonly hostAttrs: TAttributes|null;
+  readonly hostAttrs: TAttributes | null;
 
   /** Token representing the directive. Used by DI. */
   readonly type: Type<T>;
 
   /** Function that resolves providers and publishes them into the DI system. */
   providersResolver:
-      (<U extends T>(def: DirectiveDef<U>, processProvidersFn?: ProcessProvidersFunction) =>
-           void)|null;
+    | (<U extends T>(def: DirectiveDef<U>, processProvidersFn?: ProcessProvidersFunction) => void)
+    | null;
 
   /** The selectors that will be used to match nodes to this directive. */
   readonly selectors: CssSelectorList;
@@ -211,7 +214,7 @@ export interface DirectiveDef<T> {
   /**
    * Name under which the directive is exported (for use with local references in template)
    */
-  readonly exportAs: string[]|null;
+  readonly exportAs: string[] | null;
 
   /**
    * Whether this directive (or component) is standalone.
@@ -227,18 +230,18 @@ export interface DirectiveDef<T> {
    * Factory function used to create a new directive instance. Will be null initially.
    * Populated when the factory is first requested by directive instantiation logic.
    */
-  readonly factory: FactoryFn<T>|null;
+  readonly factory: FactoryFn<T> | null;
 
   /**
    * The features applied to this directive
    */
-  readonly features: DirectiveDefFeature[]|null;
+  readonly features: DirectiveDefFeature[] | null;
 
   /**
    * Info related to debugging/troubleshooting for this component. This info is only available in
    * dev mode.
    */
-  debugInfo: ClassDebugInfo|null;
+  debugInfo: ClassDebugInfo | null;
 
   /**
    * Function that will add the host directives to the list of matches during directive matching.
@@ -250,17 +253,26 @@ export interface DirectiveDef<T> {
    * configuration. Host directives will be added to the map as they're being matched to the node.
    */
   findHostDirectiveDefs:
-      ((currentDef: DirectiveDef<unknown>, matchedDefs: DirectiveDef<unknown>[],
-        hostDirectiveDefs: HostDirectiveDefs) => void)|null;
+    | ((
+        currentDef: DirectiveDef<unknown>,
+        matchedDefs: DirectiveDef<unknown>[],
+        hostDirectiveDefs: HostDirectiveDefs,
+      ) => void)
+    | null;
 
   /** Additional directives to be applied whenever the directive has been matched. */
-  hostDirectives: HostDirectiveDef[]|null;
+  hostDirectives: HostDirectiveDef[] | null;
 
   setInput:
-      (<U extends T>(
-           this: DirectiveDef<U>, instance: U,
-           inputSignalNode: null|InputSignalNode<unknown, unknown>, value: any, publicName: string,
-           privateName: string) => void)|null;
+    | (<U extends T>(
+        this: DirectiveDef<U>,
+        instance: U,
+        inputSignalNode: null | InputSignalNode<unknown, unknown>,
+        value: any,
+        publicName: string,
+        privateName: string,
+      ) => void)
+    | null;
 }
 
 /**
@@ -288,7 +300,7 @@ export interface ComponentDef<T> extends DirectiveDef<T> {
   readonly template: ComponentTemplate<T>;
 
   /** Constants associated with the component's view. */
-  readonly consts: TConstantsOrFactory|null;
+  readonly consts: TConstantsOrFactory | null;
 
   /**
    * An array of `ngContent[selector]` values that were found in the template.
@@ -320,7 +332,7 @@ export interface ComponentDef<T> extends DirectiveDef<T> {
   /**
    * Query-related instructions for a component.
    */
-  viewQuery: ViewQueriesFunction<T>|null;
+  viewQuery: ViewQueriesFunction<T> | null;
 
   /**
    * The view encapsulation type, which determines how styles are applied to
@@ -338,8 +350,8 @@ export interface ComponentDef<T> extends DirectiveDef<T> {
    * This is useful for renderers that delegate to other renderers.
    */
   readonly data: {
-    [kind: string]: any,
-    animation?: any[],
+    [kind: string]: any;
+    animation?: any[];
   };
 
   /** Whether or not this component's ChangeDetectionStrategy is OnPush */
@@ -354,7 +366,7 @@ export interface ComponentDef<T> extends DirectiveDef<T> {
    * The property is either an array of `DirectiveDef`s or a function which returns the array of
    * `DirectiveDef`s. The function is necessary to be able to support forward declarations.
    */
-  directiveDefs: DirectiveDefListOrFactory|null;
+  directiveDefs: DirectiveDefListOrFactory | null;
 
   /**
    * Registry of pipes that may be found in this view.
@@ -362,29 +374,31 @@ export interface ComponentDef<T> extends DirectiveDef<T> {
    * The property is either an array of `PipeDefs`s or a function which returns the array of
    * `PipeDefs`s. The function is necessary to be able to support forward declarations.
    */
-  pipeDefs: PipeDefListOrFactory|null;
+  pipeDefs: PipeDefListOrFactory | null;
 
   /**
    * Unfiltered list of all dependencies of a component, or `null` if none.
    */
-  dependencies: TypeOrFactory<DependencyTypeList>|null;
+  dependencies: TypeOrFactory<DependencyTypeList> | null;
 
   /**
    * The set of schemas that declare elements to be allowed in the component's template.
    */
-  schemas: SchemaMetadata[]|null;
+  schemas: SchemaMetadata[] | null;
 
   /**
    * Ivy runtime uses this place to store the computed tView for the component. This gets filled on
    * the first run of component.
    */
-  tView: TView|null;
+  tView: TView | null;
 
   /**
    * A function added by the {@link ɵɵStandaloneFeature} and used by the framework to create
    * standalone injectors.
    */
-  getStandaloneInjector: ((parentInjector: EnvironmentInjector) => EnvironmentInjector | null)|null;
+  getStandaloneInjector:
+    | ((parentInjector: EnvironmentInjector) => EnvironmentInjector | null)
+    | null;
 
   /**
    * Used to store the result of `noSideEffects` function so that it is not removed by closure
@@ -420,7 +434,7 @@ export interface PipeDef<T> {
    * Factory function used to create a new pipe instance. Will be null initially.
    * Populated when the factory is first requested by pipe instantiation logic.
    */
-  factory: FactoryFn<T>|null;
+  factory: FactoryFn<T> | null;
 
   /**
    * Whether or not the pipe is pure.
@@ -436,7 +450,7 @@ export interface PipeDef<T> {
   readonly standalone: boolean;
 
   /* The following are lifecycle hooks for this pipe */
-  onDestroy: (() => void)|null;
+  onDestroy: (() => void) | null;
 }
 
 export interface DirectiveDefFeature {
@@ -470,7 +484,7 @@ export interface HostDirectiveDef<T = unknown> {
  * the author has decided to expose.
  */
 export type HostDirectiveBindingMap = {
-  [publicName: string]: string
+  [publicName: string]: string;
 };
 
 /**
@@ -500,23 +514,25 @@ export type InputTransformFunction = (value: any) => any;
  *
  * The function is necessary to be able to support forward declarations.
  */
-export type DirectiveDefListOrFactory = (() => DirectiveDefList)|DirectiveDefList;
+export type DirectiveDefListOrFactory = (() => DirectiveDefList) | DirectiveDefList;
 
-export type DirectiveDefList = (DirectiveDef<any>|ComponentDef<any>)[];
+export type DirectiveDefList = (DirectiveDef<any> | ComponentDef<any>)[];
 
-export type DependencyDef = DirectiveDef<unknown>|ComponentDef<unknown>|PipeDef<unknown>;
+export type DependencyDef = DirectiveDef<unknown> | ComponentDef<unknown> | PipeDef<unknown>;
 
-export type DirectiveTypesOrFactory = (() => DirectiveTypeList)|DirectiveTypeList;
+export type DirectiveTypesOrFactory = (() => DirectiveTypeList) | DirectiveTypeList;
 
-export type DirectiveTypeList =
-    (DirectiveType<any>|ComponentType<any>|
-     Type<any>/* Type as workaround for: Microsoft/TypeScript/issues/4881 */)[];
+export type DirectiveTypeList = (
+  | DirectiveType<any>
+  | ComponentType<any>
+  | Type<any>
+) /* Type as workaround for: Microsoft/TypeScript/issues/4881 */[];
 
-export type DependencyType = DirectiveType<any>|ComponentType<any>|PipeType<any>|Type<any>;
+export type DependencyType = DirectiveType<any> | ComponentType<any> | PipeType<any> | Type<any>;
 
 export type DependencyTypeList = Array<DependencyType>;
 
-export type TypeOrFactory<T> = T|(() => T);
+export type TypeOrFactory<T> = T | (() => T);
 
 export type HostBindingsFunction<T> = <U extends T>(rf: RenderFlags, ctx: U) => void;
 
@@ -525,14 +541,16 @@ export type HostBindingsFunction<T> = <U extends T>(rf: RenderFlags, ctx: U) =>
  *
  * The function is necessary to be able to support forward declarations.
  */
-export type PipeDefListOrFactory = (() => PipeDefList)|PipeDefList;
+export type PipeDefListOrFactory = (() => PipeDefList) | PipeDefList;
 
 export type PipeDefList = PipeDef<any>[];
 
-export type PipeTypesOrFactory = (() => PipeTypeList)|PipeTypeList;
+export type PipeTypesOrFactory = (() => PipeTypeList) | PipeTypeList;
 
-export type PipeTypeList =
-    (PipeType<any>|Type<any>/* Type as workaround for: Microsoft/TypeScript/issues/4881 */)[];
+export type PipeTypeList = (
+  | PipeType<any>
+  | Type<any>
+) /* Type as workaround for: Microsoft/TypeScript/issues/4881 */[];
 
 /**
  * NgModule scope info as provided by AoT compiler
@@ -547,23 +565,23 @@ export type PipeTypeList =
  */
 export interface NgModuleScopeInfoFromDecorator {
   /** List of components, directives, and pipes declared by this module. */
-  declarations?: Type<any>[]|(() => Type<any>[])|RawScopeInfoFromDecorator[];
+  declarations?: Type<any>[] | (() => Type<any>[]) | RawScopeInfoFromDecorator[];
 
   /** List of modules or `ModuleWithProviders` or standalone components imported by this module. */
-  imports?: Type<any>[]|(() => Type<any>[])|RawScopeInfoFromDecorator[];
+  imports?: Type<any>[] | (() => Type<any>[]) | RawScopeInfoFromDecorator[];
 
   /**
    * List of modules, `ModuleWithProviders`, components, directives, or pipes exported by this
    * module.
    */
-  exports?: Type<any>[]|(() => Type<any>[])|RawScopeInfoFromDecorator[];
+  exports?: Type<any>[] | (() => Type<any>[]) | RawScopeInfoFromDecorator[];
 
   /**
    * The set of components that are bootstrapped when this module is bootstrapped. This field is
    * only available in local compilation mode. In full compilation mode bootstrap info is passed
    * directly to the module def runtime after statically analyzed and resolved.
    */
-  bootstrap?: Type<any>[]|(() => Type<any>[])|RawScopeInfoFromDecorator[];
+  bootstrap?: Type<any>[] | (() => Type<any>[]) | RawScopeInfoFromDecorator[];
 }
 
 /**
@@ -572,4 +590,8 @@ export interface NgModuleScopeInfoFromDecorator {
  *  - standalone component annotation imports field
  */
 export type RawScopeInfoFromDecorator =
-    Type<any>|ModuleWithProviders<any>|(() => Type<any>)|(() => ModuleWithProviders<any>)|any[];
+  | Type<any>
+  | ModuleWithProviders<any>
+  | (() => Type<any>)
+  | (() => ModuleWithProviders<any>)
+  | any[];
diff --git a/packages/core/src/render3/interfaces/document.ts b/packages/core/src/render3/interfaces/document.ts
index 72aec8a5d4553..30b0045844d08 100644
--- a/packages/core/src/render3/interfaces/document.ts
+++ b/packages/core/src/render3/interfaces/document.ts
@@ -24,7 +24,7 @@ import {RuntimeError, RuntimeErrorCode} from '../../errors';
  * Angular does this for us in each of the standard platforms (`Browser` and `Server`)
  * by calling `setDocument()` when providing the `DOCUMENT` token.
  */
-let DOCUMENT: Document|undefined = undefined;
+let DOCUMENT: Document | undefined = undefined;
 
 /**
  * Tell ivy what the `document` is for this platform.
@@ -33,7 +33,7 @@ let DOCUMENT: Document|undefined = undefined;
  *
  * @param document The object representing the global `document` in this environment.
  */
-export function setDocument(document: Document|undefined): void {
+export function setDocument(document: Document | undefined): void {
   DOCUMENT = document;
 }
 
@@ -51,9 +51,10 @@ export function getDocument(): Document {
   }
 
   throw new RuntimeError(
-      RuntimeErrorCode.MISSING_DOCUMENT,
-      (typeof ngDevMode === 'undefined' || ngDevMode) &&
-          `The document object is not available in this context. Make sure the DOCUMENT injection token is provided.`);
+    RuntimeErrorCode.MISSING_DOCUMENT,
+    (typeof ngDevMode === 'undefined' || ngDevMode) &&
+      `The document object is not available in this context. Make sure the DOCUMENT injection token is provided.`,
+  );
 
   // No "document" can be found. This should only happen if we are running ivy outside Angular and
   // the current platform is not a browser. Since this is not a supported scenario at the moment
diff --git a/packages/core/src/render3/interfaces/i18n.ts b/packages/core/src/render3/interfaces/i18n.ts
index 97f8cd8ad1007..2802e40e87fcd 100644
--- a/packages/core/src/render3/interfaces/i18n.ts
+++ b/packages/core/src/render3/interfaces/i18n.ts
@@ -8,7 +8,6 @@
 
 import {SanitizerFn} from './sanitization';
 
-
 /**
  * Stores a list of nodes which need to be removed.
  *
@@ -75,7 +74,6 @@ export const enum IcuCreateOpCode {
   Attr = 0b1,
 }
 
-
 /**
  * Array storing OpCode for dynamically creating `i18n` blocks.
  *
@@ -121,8 +119,9 @@ export const enum IcuCreateOpCode {
  * ];
  * ```
  */
-export interface IcuCreateOpCodes extends Array<number|string|ELEMENT_MARKER|ICU_MARKER|null>,
-                                          I18nDebug {
+export interface IcuCreateOpCodes
+  extends Array<number | string | ELEMENT_MARKER | ICU_MARKER | null>,
+    I18nDebug {
   __brand__: 'I18nCreateOpCodes';
 }
 
@@ -160,7 +159,7 @@ export const enum I18nUpdateOpCode {
  * See `I18nMutateOpCodes` documentation.
  */
 export const ELEMENT_MARKER: ELEMENT_MARKER = {
-  marker: 'element'
+  marker: 'element',
 };
 export interface ELEMENT_MARKER {
   marker: 'element';
@@ -172,7 +171,7 @@ export interface ELEMENT_MARKER {
  * See `I18nMutateOpCodes` documentation.
  */
 export const ICU_MARKER: ICU_MARKER = {
-  marker: 'ICU'
+  marker: 'ICU',
 };
 
 export interface ICU_MARKER {
@@ -223,7 +222,7 @@ export interface I18nDebug {
  * }
  * ```
  */
-export interface I18nCreateOpCodes extends Array<number|string>, I18nDebug {
+export interface I18nCreateOpCodes extends Array<number | string>, I18nDebug {
   __brand__: 'I18nCreateOpCodes';
 }
 
@@ -248,7 +247,6 @@ export enum I18nCreateOpCode {
   COMMENT = 0b10,
 }
 
-
 /**
  * Stores DOM operations which need to be applied to update DOM render tree due to changes in
  * expressions.
@@ -321,7 +319,7 @@ export enum I18nCreateOpCode {
  * ```
  *
  */
-export interface I18nUpdateOpCodes extends Array<string|number|SanitizerFn|null>, I18nDebug {
+export interface I18nUpdateOpCodes extends Array<string | number | SanitizerFn | null>, I18nDebug {
   __brand__: 'I18nUpdateOpCodes';
 }
 
@@ -412,11 +410,11 @@ export interface IcuExpression {
   type: IcuType;
   mainBinding: number;
   cases: string[];
-  values: (string|IcuExpression)[][];
+  values: (string | IcuExpression)[][];
 }
 
 // A parsed I18n AST Node
-export type I18nNode = I18nTextNode|I18nElementNode|I18nICUNode|I18nPlaceholderNode;
+export type I18nNode = I18nTextNode | I18nElementNode | I18nICUNode | I18nPlaceholderNode;
 
 /**
  * Represents a block of text in a translation, such as `Hello, {{ name }}!`.
diff --git a/packages/core/src/render3/interfaces/injector.ts b/packages/core/src/render3/interfaces/injector.ts
index 2d3bce896005c..ed0bd2e07724e 100644
--- a/packages/core/src/render3/interfaces/injector.ts
+++ b/packages/core/src/render3/interfaces/injector.ts
@@ -64,7 +64,7 @@ export const enum NodeInjectorOffset {
  * The interfaces encodes number of parents `LView`s to traverse and index in the `LView`
  * pointing to the parent injector.
  */
-export type RelativeInjectorLocation = number&{
+export type RelativeInjectorLocation = number & {
   __brand__: 'RelativeInjectorLocationFlags';
 };
 
@@ -175,7 +175,7 @@ export class NodeInjectorFactory {
   /**
    * The inject implementation to be activated when using the factory.
    */
-  injectImpl: null|(<T>(token: ProviderToken<T>, flags?: InjectFlags) => T);
+  injectImpl: null | (<T>(token: ProviderToken<T>, flags?: InjectFlags) => T);
 
   /**
    * Marker set to true during factory invocation to see if we get into recursive loop.
@@ -251,34 +251,36 @@ export class NodeInjectorFactory {
    * `providers` (`['all']`) and then extend it with `viewProviders` (`['all'] + ['viewOnly'] =
    * ['all', 'viewOnly']`).
    */
-  providerFactory?: NodeInjectorFactory|null;
-
+  providerFactory?: NodeInjectorFactory | null;
 
   constructor(
+    /**
+     * Factory to invoke in order to create a new instance.
+     */
+    public factory: (
+      this: NodeInjectorFactory,
+      _: undefined,
+      /**
+       * array where injectables tokens are stored. This is used in
+       * case of an error reporting to produce friendlier errors.
+       */
+      tData: TData,
       /**
-       * Factory to invoke in order to create a new instance.
+       * array where existing instances of injectables are stored. This is used in case
+       * of multi shadow is needed. See `multi` field documentation.
        */
-      public factory:
-          (this: NodeInjectorFactory, _: undefined,
-           /**
-            * array where injectables tokens are stored. This is used in
-            * case of an error reporting to produce friendlier errors.
-            */
-           tData: TData,
-           /**
-            * array where existing instances of injectables are stored. This is used in case
-            * of multi shadow is needed. See `multi` field documentation.
-            */
-           lView: LView,
-           /**
-            * The TNode of the same element injector.
-            */
-           tNode: TDirectiveHostNode) => any,
+      lView: LView,
       /**
-       * Set to `true` if the token is declared in `viewProviders` (or if it is component).
+       * The TNode of the same element injector.
        */
-      isViewProvider: boolean,
-      injectImplementation: null|(<T>(token: ProviderToken<T>, flags?: InjectFlags) => T)) {
+      tNode: TDirectiveHostNode,
+    ) => any,
+    /**
+     * Set to `true` if the token is declared in `viewProviders` (or if it is component).
+     */
+    isViewProvider: boolean,
+    injectImplementation: null | (<T>(token: ProviderToken<T>, flags?: InjectFlags) => T),
+  ) {
     ngDevMode && assertDefined(factory, 'Factory not specified');
     ngDevMode && assertEqual(typeof factory, 'function', 'Expected factory function.');
     this.canSeeViewProviders = isViewProvider;
diff --git a/packages/core/src/render3/interfaces/lview_tracking.ts b/packages/core/src/render3/interfaces/lview_tracking.ts
index 7123fbcbbc263..607867891cb95 100644
--- a/packages/core/src/render3/interfaces/lview_tracking.ts
+++ b/packages/core/src/render3/interfaces/lview_tracking.ts
@@ -28,7 +28,7 @@ export function registerLView(lView: LView): void {
 }
 
 /** Gets an LView by its unique ID. */
-export function getLViewById(id: number): LView|null {
+export function getLViewById(id: number): LView | null {
   ngDevMode && assertNumber(id, 'ID used for LView lookup must be a number');
   return TRACKED_LVIEWS.get(id) || null;
 }
diff --git a/packages/core/src/render3/interfaces/node.ts b/packages/core/src/render3/interfaces/node.ts
index 17c711f959f5f..3233facd9a881 100644
--- a/packages/core/src/render3/interfaces/node.ts
+++ b/packages/core/src/render3/interfaces/node.ts
@@ -7,7 +7,7 @@
  */
 import {KeyValueArray} from '../../util/array_utils';
 import {TStylingRange} from '../interfaces/styling';
-import { AttributeMarker } from './attribute_marker';
+import {AttributeMarker} from './attribute_marker';
 
 import {InputFlags} from './input_flags';
 import {TIcu} from './i18n';
@@ -15,7 +15,6 @@ import {CssSelector} from './projection';
 import {RNode} from './renderer_dom';
 import type {LView, TView} from './view';
 
-
 /**
  * TNodeType corresponds to the {@link TNode} `type` property.
  *
@@ -78,8 +77,8 @@ export const enum TNodeType {
   // if `TNode.type` is one of several choices.
 
   // See: https://github.com/microsoft/TypeScript/issues/35875 why we can't refer to existing enum.
-  AnyRNode = 0b11,        // Text | Element
-  AnyContainer = 0b1100,  // Container | ElementContainer
+  AnyRNode = 0b11, // Text | Element
+  AnyContainer = 0b1100, // Container | ElementContainer
 }
 
 /**
@@ -88,13 +87,13 @@ export const enum TNodeType {
  */
 export function toTNodeTypeAsString(tNodeType: TNodeType): string {
   let text = '';
-  (tNodeType & TNodeType.Text) && (text += '|Text');
-  (tNodeType & TNodeType.Element) && (text += '|Element');
-  (tNodeType & TNodeType.Container) && (text += '|Container');
-  (tNodeType & TNodeType.ElementContainer) && (text += '|ElementContainer');
-  (tNodeType & TNodeType.Projection) && (text += '|Projection');
-  (tNodeType & TNodeType.Icu) && (text += '|IcuContainer');
-  (tNodeType & TNodeType.Placeholder) && (text += '|Placeholder');
+  tNodeType & TNodeType.Text && (text += '|Text');
+  tNodeType & TNodeType.Element && (text += '|Element');
+  tNodeType & TNodeType.Container && (text += '|Container');
+  tNodeType & TNodeType.ElementContainer && (text += '|ElementContainer');
+  tNodeType & TNodeType.Projection && (text += '|Projection');
+  tNodeType & TNodeType.Icu && (text += '|IcuContainer');
+  tNodeType & TNodeType.Placeholder && (text += '|Placeholder');
   return text.length > 0 ? text.substring(1) : text;
 }
 
@@ -108,10 +107,13 @@ export function toTNodeTypeAsString(tNodeType: TNodeType): string {
  * within `TView.data`.
  */
 export function isTNodeShape(value: unknown): value is TNode {
-  return value != null && typeof value === 'object' &&
-      ((value as TNode).insertBeforeIndex === null ||
-       typeof (value as TNode).insertBeforeIndex === 'number' ||
-       Array.isArray((value as TNode).insertBeforeIndex));
+  return (
+    value != null &&
+    typeof value === 'object' &&
+    ((value as TNode).insertBeforeIndex === null ||
+      typeof (value as TNode).insertBeforeIndex === 'number' ||
+      Array.isArray((value as TNode).insertBeforeIndex))
+  );
 }
 
 /**
@@ -171,7 +173,7 @@ export const enum TNodeProviderIndexes {
  * - Special markers acting as flags to alter attributes processing.
  * - Parsed ngProjectAs selectors.
  */
-export type TAttributes = (string|AttributeMarker|CssSelector)[];
+export type TAttributes = (string | AttributeMarker | CssSelector)[];
 
 /**
  * Constants that are associated with a view. Includes:
@@ -179,7 +181,7 @@ export type TAttributes = (string|AttributeMarker|CssSelector)[];
  * - Local definition arrays.
  * - Translated messages (i18n).
  */
-export type TConstants = (TAttributes|string)[];
+export type TConstants = (TAttributes | string)[];
 
 /**
  * Factory function that returns an array of consts. Consts can be represented as a function in
@@ -193,7 +195,7 @@ export type TConstantsFactory = () => TConstants;
  * TConstants type that describes how the `consts` field is generated on ComponentDef: it can be
  * either an array or a factory function that returns that array.
  */
-export type TConstantsOrFactory = TConstants|TConstantsFactory;
+export type TConstantsOrFactory = TConstants | TConstantsFactory;
 
 /**
  * Binding data (flyweight) for a particular node that is shared between all templates
@@ -330,7 +332,7 @@ export interface TNode {
    * Stores indexes of property bindings. This field is only set in the ngDevMode and holds
    * indexes of property bindings so TestBed can get bound property metadata for a given node.
    */
-  propertyBindings: number[]|null;
+  propertyBindings: number[] | null;
 
   /**
    * Stores if Node isComponent, isProjected, hasContentQuery, hasClassInput and hasStyleInput
@@ -370,7 +372,7 @@ export interface TNode {
    * This array can contain flags that will indicate "special attributes" (attributes with
    * namespaces, attributes extracted from bindings and outputs).
    */
-  attrs: TAttributes|null;
+  attrs: TAttributes | null;
 
   /**
    * Same as `TNode.attrs` but contains merged data across all directive host bindings.
@@ -383,7 +385,7 @@ export interface TNode {
    * - Directives' `hostAttrs`
    * - Template `TNode.attrs` associated with the current `TNode`.
    */
-  mergedAttrs: TAttributes|null;
+  mergedAttrs: TAttributes | null;
 
   /**
    * A set of local names under which a given element is exported in a template and
@@ -402,22 +404,22 @@ export interface TNode {
    * - `<my-cmpt #foo #bar="directiveExportAs">` => `["foo", myCmptIdx, "bar", directiveIdx]`
    * - `<div #foo #bar="directiveExportAs">` => `["foo", -1, "bar", directiveIdx]`
    */
-  localNames: (string|number)[]|null;
+  localNames: (string | number)[] | null;
 
   /** Information about input properties that need to be set once from attribute data. */
-  initialInputs: InitialInputData|null|undefined;
+  initialInputs: InitialInputData | null | undefined;
 
   /**
    * Input data for all directives on this node. `null` means that there are no directives with
    * inputs on this node.
    */
-  inputs: NodeInputBindings|null;
+  inputs: NodeInputBindings | null;
 
   /**
    * Output data for all directives on this node. `null` means that there are no directives with
    * outputs on this node.
    */
-  outputs: NodeOutputBindings|null;
+  outputs: NodeOutputBindings | null;
 
   /**
    * The TView attached to this node.
@@ -427,19 +429,19 @@ export interface TNode {
    *
    * If this TNode corresponds to an element, tView will be `null`.
    */
-  tView: TView|null;
+  tView: TView | null;
 
   /**
    * The next sibling node. Necessary so we can propagate through the root nodes of a view
    * to insert them or remove them from the DOM.
    */
-  next: TNode|null;
+  next: TNode | null;
 
   /**
    * The previous sibling node.
    * This simplifies operations when we need a pointer to the previous node.
    */
-  prev: TNode|null;
+  prev: TNode | null;
 
   /**
    * The next projected sibling. Since in Angular content projection works on the node-by-node
@@ -447,7 +449,7 @@ export interface TNode {
    * (target view). At the same time we need to keep initial relationship between nodes as
    * expressed in content view.
    */
-  projectionNext: TNode|null;
+  projectionNext: TNode | null;
 
   /**
    * First child of the current node.
@@ -455,7 +457,7 @@ export interface TNode {
    * For component nodes, the child will always be a ContentChild (in same view).
    * For embedded view nodes, the child will be in their child view.
    */
-  child: TNode|null;
+  child: TNode | null;
 
   /**
    * Parent node (in the same view only).
@@ -471,7 +473,7 @@ export interface TNode {
    *
    * If this is an inline view node (V), the parent will be its container.
    */
-  parent: TElementNode|TContainerNode|null;
+  parent: TElementNode | TContainerNode | null;
 
   /**
    * List of projected TNodes for a given component host element OR index into the said nodes.
@@ -512,7 +514,7 @@ export interface TNode {
    * If `projection` is of type `RNode[][]` than we have a collection of native nodes passed as
    * projectable nodes during dynamic component creation.
    */
-  projection: (TNode|RNode[])[]|number|null;
+  projection: (TNode | RNode[])[] | number | null;
 
   /**
    * A collection of all `style` static values for an element (including from host).
@@ -523,8 +525,7 @@ export interface TNode {
    * - There are one or more initial `style`s on a directive/component host
    *   (e.g. `@Directive({host: {style: "width:200px;" } }`)
    */
-  styles: string|null;
-
+  styles: string | null;
 
   /**
    * A collection of all `style` static values for an element excluding host sources.
@@ -537,7 +538,7 @@ export interface TNode {
    * would have to concatenate the attributes on every template pass. Instead, we process once on
    * first create pass and store here.
    */
-  stylesWithoutHost: string|null;
+  stylesWithoutHost: string | null;
 
   /**
    * A `KeyValueArray` version of residual `styles`.
@@ -566,7 +567,7 @@ export interface TNode {
    * - `null`: initialized but `styles` is `null`
    * - `KeyValueArray`: parsed version of `styles`.
    */
-  residualStyles: KeyValueArray<any>|undefined|null;
+  residualStyles: KeyValueArray<any> | undefined | null;
 
   /**
    * A collection of all class static values for an element (including from host).
@@ -577,7 +578,7 @@ export interface TNode {
    * - There are one or more initial classes on an directive/component host
    *   (e.g. `@Directive({host: {class: "SOME_CLASS" } }`)
    */
-  classes: string|null;
+  classes: string | null;
 
   /**
    * A collection of all class static values for an element excluding host sources.
@@ -590,7 +591,7 @@ export interface TNode {
    * `tNode.attrs`, we would have to concatenate the attributes on every template pass. Instead,
    * we process once on first create pass and store here.
    */
-  classesWithoutHost: string|null;
+  classesWithoutHost: string | null;
 
   /**
    * A `KeyValueArray` version of residual `classes`.
@@ -601,7 +602,7 @@ export interface TNode {
    * - `null`: initialized but `classes` is `null`
    * - `KeyValueArray`: parsed version of `classes`.
    */
-  residualClasses: KeyValueArray<any>|undefined|null;
+  residualClasses: KeyValueArray<any> | undefined | null;
 
   /**
    * Stores the head/tail index of the class bindings.
@@ -637,19 +638,19 @@ export interface TNode {
 /**
  * See `TNode.insertBeforeIndex`
  */
-export type InsertBeforeIndex = null|number|number[];
+export type InsertBeforeIndex = null | number | number[];
 
 /** Static data for an element  */
 export interface TElementNode extends TNode {
   /** Index in the data[] array */
   index: number;
-  child: TElementNode|TTextNode|TElementContainerNode|TContainerNode|TProjectionNode|null;
+  child: TElementNode | TTextNode | TElementContainerNode | TContainerNode | TProjectionNode | null;
   /**
    * Element nodes will have parents unless they are the first node of a component or
    * embedded view (which means their parent is in a different view and must be
    * retrieved using viewData[HOST_NODE]).
    */
-  parent: TElementNode|TElementContainerNode|null;
+  parent: TElementNode | TElementContainerNode | null;
   tView: null;
 
   /**
@@ -657,7 +658,7 @@ export interface TElementNode extends TNode {
    * TNodes or native nodes (see TNode.projection for more info). If it's a regular element node
    * or a component without projection, it will be null.
    */
-  projection: (TNode|RNode[])[]|null;
+  projection: (TNode | RNode[])[] | null;
 
   /**
    * Stores TagName
@@ -675,7 +676,7 @@ export interface TTextNode extends TNode {
    * embedded view (which means their parent is in a different view and must be
    * retrieved using LView.node).
    */
-  parent: TElementNode|TElementContainerNode|null;
+  parent: TElementNode | TElementContainerNode | null;
   tView: null;
   projection: null;
 }
@@ -697,8 +698,8 @@ export interface TContainerNode extends TNode {
    * - They are the first node of a component or embedded view
    * - They are dynamically created
    */
-  parent: TElementNode|TElementContainerNode|null;
-  tView: TView|null;
+  parent: TElementNode | TElementContainerNode | null;
+  tView: TView | null;
   projection: null;
   value: null;
 }
@@ -707,8 +708,8 @@ export interface TContainerNode extends TNode {
 export interface TElementContainerNode extends TNode {
   /** Index in the LView[] array. */
   index: number;
-  child: TElementNode|TTextNode|TContainerNode|TElementContainerNode|TProjectionNode|null;
-  parent: TElementNode|TElementContainerNode|null;
+  child: TElementNode | TTextNode | TContainerNode | TElementContainerNode | TProjectionNode | null;
+  parent: TElementNode | TElementContainerNode | null;
   tView: null;
   projection: null;
 }
@@ -718,7 +719,7 @@ export interface TIcuContainerNode extends TNode {
   /** Index in the LView[] array. */
   index: number;
   child: null;
-  parent: TElementNode|TElementContainerNode|null;
+  parent: TElementNode | TElementContainerNode | null;
   tView: null;
   projection: null;
   value: TIcu;
@@ -733,7 +734,7 @@ export interface TProjectionNode extends TNode {
    * or embedded view (which means their parent is in a different view and must be
    * retrieved using LView.node).
    */
-  parent: TElementNode|TElementContainerNode|null;
+  parent: TElementNode | TElementContainerNode | null;
   tView: null;
 
   /** Index of the projection node. (See TNode.projection for more info.) */
@@ -744,7 +745,7 @@ export interface TProjectionNode extends TNode {
 /**
  * A union type representing all TNode types that can host a directive.
  */
-export type TDirectiveHostNode = TElementNode|TContainerNode|TElementContainerNode;
+export type TDirectiveHostNode = TElementNode | TContainerNode | TElementContainerNode;
 
 /**
  * Store the runtime output names for all the directives.
@@ -758,7 +759,7 @@ export type TDirectiveHostNode = TElementNode|TContainerNode|TElementContainerNo
  *   "publicName": [0, 'change-minified']
  * }
  */
-export type NodeOutputBindings = Record<string, (number|string)[]>;
+export type NodeOutputBindings = Record<string, (number | string)[]>;
 
 /**
  * Store the runtime input for all directives applied to a node.
@@ -777,7 +778,7 @@ export type NodeOutputBindings = Record<string, (number|string)[]>;
  * }
  * ```
  */
-export type NodeInputBindings = Record<string, (number|string|InputFlags)[]>;
+export type NodeInputBindings = Record<string, (number | string | InputFlags)[]>;
 
 /**
  * This array contains information about input properties that
@@ -797,7 +798,7 @@ export type NodeInputBindings = Record<string, (number|string|InputFlags)[]>;
  *
  * e.g. [null, ['role-min', 'minified-input', 'button']]
  */
-export type InitialInputData = (InitialInputs|null)[];
+export type InitialInputData = (InitialInputs | null)[];
 
 /**
  * Used by InitialInputData to store input properties
@@ -810,12 +811,12 @@ export type InitialInputData = (InitialInputs|null)[];
  *
  * e.g. ['role-min', 'minified-input', 'button']
  */
-export type InitialInputs = (string|InputFlags)[];
+export type InitialInputs = (string | InputFlags)[];
 
 /**
  * Type representing a set of TNodes that can have local refs (`#foo`) placed on them.
  */
-export type TNodeWithLocalRefs = TContainerNode|TElementNode|TElementContainerNode;
+export type TNodeWithLocalRefs = TContainerNode | TElementNode | TElementContainerNode;
 
 /**
  * Type for a function that extracts a value for a local refs.
diff --git a/packages/core/src/render3/interfaces/projection.ts b/packages/core/src/render3/interfaces/projection.ts
index 66c3c7435699d..38b9a27ec8d48 100644
--- a/packages/core/src/render3/interfaces/projection.ts
+++ b/packages/core/src/render3/interfaces/projection.ts
@@ -1,4 +1,3 @@
-
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -7,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 /**
  * Expresses a single CSS Selector.
  *
@@ -37,7 +35,7 @@
  *
  * See more examples in node_selector_matcher_spec.ts
  */
-export type CssSelector = (string|SelectorFlags)[];
+export type CssSelector = (string | SelectorFlags)[];
 
 /**
  * A list of CssSelectors.
@@ -58,7 +56,7 @@ export type CssSelectorList = CssSelector[];
  * using {@link ViewContainerRef#createComponent}. The last slot that specifies the
  * wildcard selector will retrieve all projectable nodes which do not match any selector.
  */
-export type ProjectionSlots = (CssSelectorList|'*')[];
+export type ProjectionSlots = (CssSelectorList | '*')[];
 
 /** Flags used to build up CssSelectors */
 export const enum SelectorFlags {
diff --git a/packages/core/src/render3/interfaces/public_definitions.ts b/packages/core/src/render3/interfaces/public_definitions.ts
index 4d436122f39b6..00fd19ef78a5f 100644
--- a/packages/core/src/render3/interfaces/public_definitions.ts
+++ b/packages/core/src/render3/interfaces/public_definitions.ts
@@ -19,7 +19,9 @@ export type ɵɵDirectiveDeclaration<
   Selector extends string,
   ExportAs extends string[],
   // `string` keys are for backwards compatibility with pre-16 versions.
-  InputMap extends {[key: string]: string|{alias: string|null, required: boolean, isSignal?: boolean}},
+  InputMap extends {
+    [key: string]: string | {alias: string | null; required: boolean; isSignal?: boolean};
+  },
   OutputMap extends {[key: string]: string},
   QueryFields extends string[],
   // Optional as this was added to align the `IsStandalone` parameters
@@ -29,7 +31,8 @@ export type ɵɵDirectiveDeclaration<
   // are not standalone.
   IsStandalone extends boolean = false,
   HostDirectives = never,
-  IsSignal extends boolean = false> = unknown;
+  IsSignal extends boolean = false,
+> = unknown;
 
 /**
  * @publicApi
@@ -39,7 +42,7 @@ export type ɵɵComponentDeclaration<
   Selector extends String,
   ExportAs extends string[],
   // `string` keys are for backwards compatibility with pre-16 versions.
-  InputMap extends {[key: string]: string|{alias: string|null, required: boolean}},
+  InputMap extends {[key: string]: string | {alias: string | null; required: boolean}},
   OutputMap extends {[key: string]: string},
   QueryFields extends string[],
   NgContentSelectors extends string[],
@@ -47,7 +50,8 @@ export type ɵɵComponentDeclaration<
   // are not standalone.
   IsStandalone extends boolean = false,
   HostDirectives = never,
-  IsSignal extends boolean = false> = unknown;
+  IsSignal extends boolean = false,
+> = unknown;
 
 /**
  * @publicApi
@@ -56,13 +60,14 @@ export type ɵɵNgModuleDeclaration<T, Declarations, Imports, Exports> = unknown
 
 /**
  * @publicApi
-  */
+ */
 export type ɵɵPipeDeclaration<
   T,
   Name extends string,
   // Optional as this was added in Angular v14. All pre-existing directives
   // are not standalone.
-  IsStandalone extends boolean = false> = unknown;
+  IsStandalone extends boolean = false,
+> = unknown;
 // clang-format on
 
 /**
@@ -87,7 +92,7 @@ export type CtorDependency = {
    * attribute name is a dynamic expression instead of a string literal, this will be the unknown
    * type.
    */
-  attribute?: string|unknown;
+  attribute?: string | unknown;
 
   /**
    * If `@Optional()` is used, this key is set to true.
@@ -108,4 +113,4 @@ export type CtorDependency = {
    * If `@SkipSelf` is used, this key is set to true.
    */
   skipSelf?: true;
-}|null;
+} | null;
diff --git a/packages/core/src/render3/interfaces/query.ts b/packages/core/src/render3/interfaces/query.ts
index 8f9aabb21a006..d1d1c1dec475a 100644
--- a/packages/core/src/render3/interfaces/query.ts
+++ b/packages/core/src/render3/interfaces/query.ts
@@ -16,7 +16,7 @@ import {TView} from './view';
  * An object representing query metadata extracted from query annotations.
  */
 export interface TQueryMetadata {
-  predicate: ProviderToken<unknown>|string[];
+  predicate: ProviderToken<unknown> | string[];
   read: any;
   flags: QueryFlags;
 }
@@ -87,7 +87,7 @@ export interface TQuery {
    * ng-template and ElementRef for other elements);
    * - a positive number - index of an injectable to be read from the element injector.
    */
-  matches: number[]|null;
+  matches: number[] | null;
 
   /**
    * A flag indicating if a given query crosses an <ng-template> element. This flag exists for
@@ -126,7 +126,7 @@ export interface TQuery {
    * @param tNode
    * @param childQueryIndex
    */
-  embeddedTView(tNode: TNode, childQueryIndex: number): TQuery|null;
+  embeddedTView(tNode: TNode, childQueryIndex: number): TQuery | null;
 }
 
 /**
@@ -179,7 +179,7 @@ export interface TQueries {
    * `embeddedTView` on each and every TQuery.
    * @param tNode
    */
-  embeddedTView(tNode: TNode): TQueries|null;
+  embeddedTView(tNode: TNode): TQueries | null;
 }
 
 /**
@@ -193,7 +193,7 @@ export interface LQuery<T> {
    * Materialized query matches for a given view only (!). Results are initialized lazily so the
    * array of matches is set to `null` initially.
    */
-  matches: (T|null)[]|null;
+  matches: (T | null)[] | null;
 
   /**
    * A QueryList where materialized query results should be reported.
@@ -226,7 +226,7 @@ export interface LQueries {
    * for a new embedded view is instantiated (cloned) from the declaration view.
    * @param tView
    */
-  createEmbeddedView(tView: TView): LQueries|null;
+  createEmbeddedView(tView: TView): LQueries | null;
 
   /**
    * A method called when an embedded view is inserted into a container. As a result all impacted
diff --git a/packages/core/src/render3/interfaces/renderer.ts b/packages/core/src/render3/interfaces/renderer.ts
index ee5d2bb7aebce..b00e80dbe0d15 100644
--- a/packages/core/src/render3/interfaces/renderer.ts
+++ b/packages/core/src/render3/interfaces/renderer.ts
@@ -20,7 +20,7 @@ import {RComment, RElement, RNode, RText} from './renderer_dom';
  * it will be easy to implement such API.
  */
 
-export type GlobalTargetName = 'document'|'window'|'body';
+export type GlobalTargetName = 'document' | 'window' | 'body';
 
 export type GlobalTargetResolver = (element: any) => EventTarget;
 
@@ -33,41 +33,46 @@ export type GlobalTargetResolver = (element: any) => EventTarget;
 export interface Renderer {
   destroy(): void;
   createComment(value: string): RComment;
-  createElement(name: string, namespace?: string|null): RElement;
+  createElement(name: string, namespace?: string | null): RElement;
   createText(value: string): RText;
   /**
    * This property is allowed to be null / undefined,
    * in which case the view engine won't call it.
    * This is used as a performance optimization for production mode.
    */
-  destroyNode?: ((node: RNode) => void)|null;
+  destroyNode?: ((node: RNode) => void) | null;
   appendChild(parent: RElement, newChild: RNode): void;
-  insertBefore(parent: RNode, newChild: RNode, refChild: RNode|null, isMove?: boolean): void;
+  insertBefore(parent: RNode, newChild: RNode, refChild: RNode | null, isMove?: boolean): void;
   removeChild(parent: RElement, oldChild: RNode, isHostElement?: boolean): void;
-  selectRootElement(selectorOrNode: string|any, preserveContent?: boolean): RElement;
+  selectRootElement(selectorOrNode: string | any, preserveContent?: boolean): RElement;
 
-  parentNode(node: RNode): RElement|null;
-  nextSibling(node: RNode): RNode|null;
+  parentNode(node: RNode): RElement | null;
+  nextSibling(node: RNode): RNode | null;
 
   setAttribute(
-      el: RElement, name: string, value: string|TrustedHTML|TrustedScript|TrustedScriptURL,
-      namespace?: string|null): void;
-  removeAttribute(el: RElement, name: string, namespace?: string|null): void;
+    el: RElement,
+    name: string,
+    value: string | TrustedHTML | TrustedScript | TrustedScriptURL,
+    namespace?: string | null,
+  ): void;
+  removeAttribute(el: RElement, name: string, namespace?: string | null): void;
   addClass(el: RElement, name: string): void;
   removeClass(el: RElement, name: string): void;
   setStyle(el: RElement, style: string, value: any, flags?: RendererStyleFlags2): void;
   removeStyle(el: RElement, style: string, flags?: RendererStyleFlags2): void;
   setProperty(el: RElement, name: string, value: any): void;
-  setValue(node: RText|RComment, value: string): void;
+  setValue(node: RText | RComment, value: string): void;
 
   // TODO(misko): Deprecate in favor of addEventListener/removeEventListener
   listen(
-      target: GlobalTargetName|RNode, eventName: string,
-      callback: (event: any) => boolean | void): () => void;
+    target: GlobalTargetName | RNode,
+    eventName: string,
+    callback: (event: any) => boolean | void,
+  ): () => void;
 }
 
 export interface RendererFactory {
-  createRenderer(hostElement: RElement|null, rendererType: RendererType2|null): Renderer;
+  createRenderer(hostElement: RElement | null, rendererType: RendererType2 | null): Renderer;
   begin?(): void;
   end?(): void;
 }
diff --git a/packages/core/src/render3/interfaces/renderer_dom.ts b/packages/core/src/render3/interfaces/renderer_dom.ts
index f6a0d7d4c3d5f..3830bf46af3b4 100644
--- a/packages/core/src/render3/interfaces/renderer_dom.ts
+++ b/packages/core/src/render3/interfaces/renderer_dom.ts
@@ -22,18 +22,17 @@ export interface RNode {
   /**
    * Returns the parent Element, Document, or DocumentFragment
    */
-  parentNode: RNode|null;
-
+  parentNode: RNode | null;
 
   /**
    * Returns the parent Element if there is one
    */
-  parentElement: RElement|null;
+  parentElement: RElement | null;
 
   /**
    * Gets the Node immediately following this one in the parent's childNodes
    */
-  nextSibling: RNode|null;
+  nextSibling: RNode | null;
 
   /**
    * Removes a child from the current node and returns the removed node
@@ -46,7 +45,7 @@ export interface RNode {
    *
    * Used exclusively for adding View root nodes into ViewAnchor location.
    */
-  insertBefore(newChild: RNode, refChild: RNode|null, isViewRoot: boolean): void;
+  insertBefore(newChild: RNode, refChild: RNode | null, isViewRoot: boolean): void;
 
   /**
    * Append a child node.
@@ -61,19 +60,21 @@ export interface RNode {
  * listeners on Element.
  */
 export interface RElement extends RNode {
-  firstChild: RNode|null;
+  firstChild: RNode | null;
   style: RCssStyleDeclaration;
   classList: RDomTokenList;
   className: string;
   tagName: string;
-  textContent: string|null;
+  textContent: string | null;
   hasAttribute(name: string): boolean;
-  getAttribute(name: string): string|null;
-  setAttribute(name: string, value: string|TrustedHTML|TrustedScript|TrustedScriptURL): void;
+  getAttribute(name: string): string | null;
+  setAttribute(name: string, value: string | TrustedHTML | TrustedScript | TrustedScriptURL): void;
   removeAttribute(name: string): void;
   setAttributeNS(
-      namespaceURI: string, qualifiedName: string,
-      value: string|TrustedHTML|TrustedScript|TrustedScriptURL): void;
+    namespaceURI: string,
+    qualifiedName: string,
+    value: string | TrustedHTML | TrustedScript | TrustedScriptURL,
+  ): void;
   addEventListener(type: string, listener: EventListener, useCapture?: boolean): void;
   removeEventListener(type: string, listener?: EventListener, options?: boolean): void;
 
@@ -82,7 +83,7 @@ export interface RElement extends RNode {
 
 export interface RCssStyleDeclaration {
   removeProperty(propertyName: string): string;
-  setProperty(propertyName: string, value: string|null, priority?: string): void;
+  setProperty(propertyName: string, value: string | null, priority?: string): void;
 }
 
 export interface RDomTokenList {
@@ -91,11 +92,11 @@ export interface RDomTokenList {
 }
 
 export interface RText extends RNode {
-  textContent: string|null;
+  textContent: string | null;
 }
 
 export interface RComment extends RNode {
-  textContent: string|null;
+  textContent: string | null;
 }
 
 export interface RTemplate extends RElement {
diff --git a/packages/core/src/render3/interfaces/sanitization.ts b/packages/core/src/render3/interfaces/sanitization.ts
index 3ebbb7c35affd..b8c09549a9347 100644
--- a/packages/core/src/render3/interfaces/sanitization.ts
+++ b/packages/core/src/render3/interfaces/sanitization.ts
@@ -11,5 +11,8 @@ import {TrustedHTML, TrustedScript, TrustedScriptURL} from '../../util/security/
 /**
  * Function used to sanitize the value before writing it into the renderer.
  */
-export type SanitizerFn = (value: any, tagName?: string, propName?: string) =>
-    string|TrustedHTML|TrustedScript|TrustedScriptURL;
+export type SanitizerFn = (
+  value: any,
+  tagName?: string,
+  propName?: string,
+) => string | TrustedHTML | TrustedScript | TrustedScriptURL;
diff --git a/packages/core/src/render3/interfaces/styling.ts b/packages/core/src/render3/interfaces/styling.ts
index 59755ef585a76..54aacff920b60 100644
--- a/packages/core/src/render3/interfaces/styling.ts
+++ b/packages/core/src/render3/interfaces/styling.ts
@@ -14,8 +14,7 @@ import {assertNumber, assertNumberInRange} from '../../util/assert';
  *
  * See: `TStylingKeyPrimitive` and `TStylingStatic`
  */
-export type TStylingKey = TStylingKeyPrimitive|TStylingStatic;
-
+export type TStylingKey = TStylingKeyPrimitive | TStylingStatic;
 
 /**
  * The primitive portion (`TStylingStatic` removed) of the value stored in the `TData` which is
@@ -27,7 +26,7 @@ export type TStylingKey = TStylingKeyPrimitive|TStylingStatic;
  *   is combined with directive which shadows its input `@Input('class')`. That way the binding
  *   should not participate in the styling resolution.
  */
-export type TStylingKeyPrimitive = string|null|false;
+export type TStylingKeyPrimitive = string | null | false;
 
 /**
  * Store the static values for the styling binding.
@@ -119,7 +118,7 @@ export interface TStylingStatic extends KeyValueArray<any> {}
  *
  * NOTE: `0` has special significance and represents `null` as in no additional pointer.
  */
-export type TStylingRange = number&{
+export type TStylingRange = number & {
   __brand__: 'TStylingRange';
 };
 
@@ -130,15 +129,15 @@ export const enum StylingRange {
   /// Number of bits to shift for the previous pointer
   PREV_SHIFT = 17,
   /// Previous pointer mask.
-  PREV_MASK = 0xFFFE0000,
+  PREV_MASK = 0xfffe0000,
 
   /// Number of bits to shift for the next pointer
   NEXT_SHIFT = 2,
   /// Next pointer mask.
-  NEXT_MASK = 0x001FFFC,
+  NEXT_MASK = 0x001fffc,
 
   // Mask to remove negative bit. (interpret number as positive)
-  UNSIGNED_MASK = 0x7FFF,
+  UNSIGNED_MASK = 0x7fff,
 
   /**
    * This bit is set if the previous bindings contains a binding which could possibly cause a
@@ -157,11 +156,10 @@ export const enum StylingRange {
   NEXT_DUPLICATE = 0x01,
 }
 
-
 export function toTStylingRange(prev: number, next: number): TStylingRange {
   ngDevMode && assertNumberInRange(prev, 0, StylingRange.UNSIGNED_MASK);
   ngDevMode && assertNumberInRange(next, 0, StylingRange.UNSIGNED_MASK);
-  return (prev << StylingRange.PREV_SHIFT | next << StylingRange.NEXT_SHIFT) as TStylingRange;
+  return ((prev << StylingRange.PREV_SHIFT) | (next << StylingRange.NEXT_SHIFT)) as TStylingRange;
 }
 
 export function getTStylingRangePrev(tStylingRange: TStylingRange): number {
@@ -175,11 +173,13 @@ export function getTStylingRangePrevDuplicate(tStylingRange: TStylingRange): boo
 }
 
 export function setTStylingRangePrev(
-    tStylingRange: TStylingRange, previous: number): TStylingRange {
+  tStylingRange: TStylingRange,
+  previous: number,
+): TStylingRange {
   ngDevMode && assertNumber(tStylingRange, 'expected number');
   ngDevMode && assertNumberInRange(previous, 0, StylingRange.UNSIGNED_MASK);
-  return ((tStylingRange & ~StylingRange.PREV_MASK) | (previous << StylingRange.PREV_SHIFT)) as
-      TStylingRange;
+  return ((tStylingRange & ~StylingRange.PREV_MASK) |
+    (previous << StylingRange.PREV_SHIFT)) as TStylingRange;
 }
 
 export function setTStylingRangePrevDuplicate(tStylingRange: TStylingRange): TStylingRange {
@@ -195,13 +195,13 @@ export function getTStylingRangeNext(tStylingRange: TStylingRange): number {
 export function setTStylingRangeNext(tStylingRange: TStylingRange, next: number): TStylingRange {
   ngDevMode && assertNumber(tStylingRange, 'expected number');
   ngDevMode && assertNumberInRange(next, 0, StylingRange.UNSIGNED_MASK);
-  return ((tStylingRange & ~StylingRange.NEXT_MASK) |  //
-          next << StylingRange.NEXT_SHIFT) as TStylingRange;
+  return ((tStylingRange & ~StylingRange.NEXT_MASK) | //
+    (next << StylingRange.NEXT_SHIFT)) as TStylingRange;
 }
 
 export function getTStylingRangeNextDuplicate(tStylingRange: TStylingRange): boolean {
   ngDevMode && assertNumber(tStylingRange, 'expected number');
-  return ((tStylingRange) & StylingRange.NEXT_DUPLICATE) === StylingRange.NEXT_DUPLICATE;
+  return (tStylingRange & StylingRange.NEXT_DUPLICATE) === StylingRange.NEXT_DUPLICATE;
 }
 
 export function setTStylingRangeNextDuplicate(tStylingRange: TStylingRange): TStylingRange {
diff --git a/packages/core/src/render3/interfaces/type_checks.ts b/packages/core/src/render3/interfaces/type_checks.ts
index 3239b4cc25221..cb813ce063545 100644
--- a/packages/core/src/render3/interfaces/type_checks.ts
+++ b/packages/core/src/render3/interfaces/type_checks.ts
@@ -12,12 +12,11 @@ import {TNode, TNodeFlags, TNodeType} from './node';
 import {RNode} from './renderer_dom';
 import {FLAGS, LView, LViewFlags} from './view';
 
-
 /**
  * True if `value` is `LView`.
  * @param value wrapped value of `RNode`, `LView`, `LContainer`
  */
-export function isLView(value: RNode|LView|LContainer|{}|null): value is LView {
+export function isLView(value: RNode | LView | LContainer | {} | null): value is LView {
   return Array.isArray(value) && typeof value[TYPE] === 'object';
 }
 
@@ -25,7 +24,7 @@ export function isLView(value: RNode|LView|LContainer|{}|null): value is LView {
  * True if `value` is `LContainer`.
  * @param value wrapped value of `RNode`, `LView`, `LContainer`
  */
-export function isLContainer(value: RNode|LView|LContainer|{}|null): value is LContainer {
+export function isLContainer(value: RNode | LView | LContainer | {} | null): value is LContainer {
   return Array.isArray(value) && value[TYPE] === true;
 }
 
diff --git a/packages/core/src/render3/interfaces/view.ts b/packages/core/src/render3/interfaces/view.ts
index 8a321f6db2b0f..04eb6fb5fe78a 100644
--- a/packages/core/src/render3/interfaces/view.ts
+++ b/packages/core/src/render3/interfaces/view.ts
@@ -18,7 +18,16 @@ import type {ReactiveLViewConsumer} from '../reactive_lview_consumer';
 import type {EffectScheduler} from '../reactivity/effect';
 
 import {LContainer} from './container';
-import {ComponentDef, ComponentTemplate, DirectiveDef, DirectiveDefList, HostBindingsFunction, PipeDef, PipeDefList, ViewQueriesFunction} from './definition';
+import {
+  ComponentDef,
+  ComponentTemplate,
+  DirectiveDef,
+  DirectiveDefList,
+  HostBindingsFunction,
+  PipeDef,
+  PipeDefList,
+  ViewQueriesFunction,
+} from './definition';
 import {I18nUpdateOpCodes, TI18n, TIcu} from './i18n';
 import {TConstants, TNode} from './node';
 import type {LQueries, TQueries} from './query';
@@ -26,8 +35,6 @@ import {Renderer, RendererFactory} from './renderer';
 import {RElement} from './renderer_dom';
 import {TStylingKey, TStylingRange} from './styling';
 
-
-
 // Below are constants for LView indices to help us look up LView members
 // without having to remember the specific indices.
 // Uglify will inline these when minifying so there shouldn't be a cost.
@@ -70,7 +77,6 @@ export const REACTIVE_TEMPLATE_CONSUMER = 23;
  */
 export const HEADER_OFFSET = 25;
 
-
 // This interface replaces the real LView interface if it is an arg or a
 // return value of a public instruction. This ensures we don't need to expose
 // the actual interface, which should be kept private.
@@ -78,7 +84,6 @@ export interface OpaqueViewState {
   '__brand__': 'Brand for OpaqueViewState that nothing will match';
 }
 
-
 /**
  * `LView` stores all of the information needed to process the instructions as
  * they are invoked from the template. Each embedded view and component view has its
@@ -93,14 +98,14 @@ export interface LView<T = unknown> extends Array<any> {
   /**
    * The node into which this `LView` is inserted.
    */
-  [HOST]: RElement|null;
+  [HOST]: RElement | null;
 
   /**
    * The static data for this view. We need a reference to this so we can easily walk up the
    * node tree in DI and get the TView.data array associated with a node (where the
    * directive defs are stored).
    */
-  readonly[TVIEW]: TView;
+  readonly [TVIEW]: TView;
 
   /** Flags for this view. See LViewFlags for more info. */
   [FLAGS]: LViewFlags;
@@ -114,7 +119,7 @@ export interface LView<T = unknown> extends Array<any> {
    *
    * `LContainer` - The current view is part of a container, and is an embedded view.
    */
-  [PARENT]: LView|LContainer|null;
+  [PARENT]: LView | LContainer | null;
 
   /**
    *
@@ -125,10 +130,10 @@ export interface LView<T = unknown> extends Array<any> {
    * views in the same container. We need a way to link component views and views
    * across containers as well.
    */
-  [NEXT]: LView|LContainer|null;
+  [NEXT]: LView | LContainer | null;
 
   /** Queries active for this view - nodes from a view are reported to those queries. */
-  [QUERIES]: LQueries|null;
+  [QUERIES]: LQueries | null;
 
   /**
    * Store the `TNode` of the location where the current `LView` is inserted into.
@@ -159,7 +164,7 @@ export interface LView<T = unknown> extends Array<any> {
    * If `null`, this is the root view of an application (root component is in this view) and it has
    * no parents.
    */
-  [T_HOST]: TNode|null;
+  [T_HOST]: TNode | null;
 
   /**
    * When a view is destroyed, listeners need to be released and outputs need to be
@@ -173,7 +178,7 @@ export interface LView<T = unknown> extends Array<any> {
    * end of the `lView[CLEANUP]` because we know that no more `T` level cleanup functions will be
    * added here.
    */
-  [CLEANUP]: any[]|null;
+  [CLEANUP]: any[] | null;
 
   /**
    * - For dynamic views, this is the context with which to render the template (e.g.
@@ -185,7 +190,7 @@ export interface LView<T = unknown> extends Array<any> {
   [CONTEXT]: T;
 
   /** An optional Module Injector to be used as fall back after Element Injectors are consulted. */
-  readonly[INJECTOR]: Injector|null;
+  readonly [INJECTOR]: Injector | null;
 
   /**
    * Contextual data that is shared across multiple instances of `LView` in the same application.
@@ -202,7 +207,7 @@ export interface LView<T = unknown> extends Array<any> {
    * Necessary to store this so views can traverse through their nested views
    * to remove listeners and call onDestroy callbacks.
    */
-  [CHILD_HEAD]: LView|LContainer|null;
+  [CHILD_HEAD]: LView | LContainer | null;
 
   /**
    * The last LView or LContainer beneath this LView in the hierarchy.
@@ -210,7 +215,7 @@ export interface LView<T = unknown> extends Array<any> {
    * The tail allows us to quickly add a new state to the end of the view list
    * without having to propagate starting from the first child.
    */
-  [CHILD_TAIL]: LView|LContainer|null;
+  [CHILD_TAIL]: LView | LContainer | null;
 
   /**
    * View where this view's template was declared.
@@ -234,8 +239,7 @@ export interface LView<T = unknown> extends Array<any> {
    * template function during change detection, we need the declaration view to get inherited
    * context.
    */
-  [DECLARATION_VIEW]: LView|null;
-
+  [DECLARATION_VIEW]: LView | null;
 
   /**
    * Points to the declaration component view, used to track transplanted `LView`s.
@@ -316,7 +320,7 @@ export interface LView<T = unknown> extends Array<any> {
    * query matches in a proper order (query matches are ordered based on their declaration point and
    * _not_ the insertion point).
    */
-  [DECLARATION_LCONTAINER]: LContainer|null;
+  [DECLARATION_LCONTAINER]: LContainer | null;
 
   /**
    * More flags for this view. See PreOrderHookFlags for more info.
@@ -329,25 +333,25 @@ export interface LView<T = unknown> extends Array<any> {
   /**
    * A container related to hydration annotation information that's associated with this LView.
    */
-  [HYDRATION]: DehydratedView|null;
+  [HYDRATION]: DehydratedView | null;
 
   /**
    * Optional injector assigned to embedded views that takes
    * precedence over the element and module injectors.
    */
-  readonly[EMBEDDED_VIEW_INJECTOR]: Injector|null;
+  readonly [EMBEDDED_VIEW_INJECTOR]: Injector | null;
 
   /**
    * Effect scheduling operations that need to run during this views's update pass.
    */
-  [EFFECTS_TO_SCHEDULE]: Array<() => void>|null;
+  [EFFECTS_TO_SCHEDULE]: Array<() => void> | null;
 
   /**
    * A collection of callbacks functions that are executed when a given LView is destroyed. Those
    * are user defined, LView-specific destroy callbacks that don't have any corresponding TView
    * entries.
    */
-  [ON_DESTROY_HOOKS]: Array<() => void>|null;
+  [ON_DESTROY_HOOKS]: Array<() => void> | null;
 
   /**
    * The `Consumer` for this `LView`'s template so that signal reads can be tracked.
@@ -355,7 +359,7 @@ export interface LView<T = unknown> extends Array<any> {
    * This is initially `null` and gets assigned a consumer after template execution
    * if any signals were read.
    */
-  [REACTIVE_TEMPLATE_CONSUMER]: ReactiveLViewConsumer|null;
+  [REACTIVE_TEMPLATE_CONSUMER]: ReactiveLViewConsumer | null;
 }
 
 /**
@@ -366,16 +370,16 @@ export interface LViewEnvironment {
   rendererFactory: RendererFactory;
 
   /** An optional custom sanitizer. */
-  sanitizer: Sanitizer|null;
+  sanitizer: Sanitizer | null;
 
   /** Container for reactivity system `effect`s. */
-  inlineEffectRunner: EffectScheduler|null;
+  inlineEffectRunner: EffectScheduler | null;
 
   /** Container for after render hooks */
-  afterRenderEventManager: AfterRenderEventManager|null;
+  afterRenderEventManager: AfterRenderEventManager | null;
 
   /** Scheduler for change detection to notify when application state changes. */
-  changeDetectionScheduler: ChangeDetectionScheduler|null;
+  changeDetectionScheduler: ChangeDetectionScheduler | null;
 }
 
 /** Flags associated with an LView (saved in LView[FLAGS]) */
@@ -547,7 +551,7 @@ export const enum PreOrderHookFlags {
  * ```
  *
  */
-export interface HostBindingOpCodes extends Array<number|HostBindingsFunction<any>> {
+export interface HostBindingOpCodes extends Array<number | HostBindingsFunction<any>> {
   __brand__: 'HostBindingOpCodes';
   debug?: string[];
 }
@@ -603,17 +607,17 @@ export interface TView {
    * The template function used to refresh the view of dynamically created views
    * and components. Will be null for inline views.
    */
-  template: ComponentTemplate<{}>|null;
+  template: ComponentTemplate<{}> | null;
 
   /**
    * A function containing query-related instructions.
    */
-  viewQuery: ViewQueriesFunction<{}>|null;
+  viewQuery: ViewQueriesFunction<{}> | null;
 
   /**
    * A `TNode` representing the declaration location of this `TView` (not part of this TView).
    */
-  declTNode: TNode|null;
+  declTNode: TNode | null;
 
   // FIXME(misko): Why does `TView` not have `declarationTView` property?
 
@@ -677,14 +681,14 @@ export interface TView {
   /**
    * A reference to the first child node located in the view.
    */
-  firstChild: TNode|null;
+  firstChild: TNode | null;
 
   /**
    * Stores the OpCodes to be replayed during change-detection to process the `HostBindings`
    *
    * See `HostBindingOpCodes` for encoding details.
    */
-  hostBindingOpCodes: HostBindingOpCodes|null;
+  hostBindingOpCodes: HostBindingOpCodes | null;
 
   /**
    * Full registry of directives and components that may be found in this view.
@@ -692,7 +696,7 @@ export interface TView {
    * It's necessary to keep a copy of the full def list on the TView so it's possible
    * to render template functions without a host component.
    */
-  directiveRegistry: DirectiveDefList|null;
+  directiveRegistry: DirectiveDefList | null;
 
   /**
    * Full registry of pipes that may be found in this view.
@@ -703,7 +707,7 @@ export interface TView {
    * It's necessary to keep a copy of the full def list on the TView so it's possible
    * to render template functions without a host component.
    */
-  pipeRegistry: PipeDefList|null;
+  pipeRegistry: PipeDefList | null;
 
   /**
    * Array of ngOnInit, ngOnChanges and ngDoCheck hooks that should be executed for this view in
@@ -716,14 +720,14 @@ export interface TView {
    * function. This is done so that at runtime the system can efficiently iterate over all of the
    * functions to invoke without having to make any decisions/lookups.
    */
-  preOrderHooks: HookData|null;
+  preOrderHooks: HookData | null;
 
   /**
    * Array of ngOnChanges and ngDoCheck hooks that should be executed for this view in update mode.
    *
    * This array has the same structure as the `preOrderHooks` one.
    */
-  preOrderCheckHooks: HookData|null;
+  preOrderCheckHooks: HookData | null;
 
   /**
    * Array of ngAfterContentInit and ngAfterContentChecked hooks that should be executed
@@ -732,7 +736,7 @@ export interface TView {
    * Even indices: Directive index
    * Odd indices: Hook function
    */
-  contentHooks: HookData|null;
+  contentHooks: HookData | null;
 
   /**
    * Array of ngAfterContentChecked hooks that should be executed for this view in update
@@ -741,7 +745,7 @@ export interface TView {
    * Even indices: Directive index
    * Odd indices: Hook function
    */
-  contentCheckHooks: HookData|null;
+  contentCheckHooks: HookData | null;
 
   /**
    * Array of ngAfterViewInit and ngAfterViewChecked hooks that should be executed for
@@ -750,7 +754,7 @@ export interface TView {
    * Even indices: Directive index
    * Odd indices: Hook function
    */
-  viewHooks: HookData|null;
+  viewHooks: HookData | null;
 
   /**
    * Array of ngAfterViewChecked hooks that should be executed for this view in
@@ -759,7 +763,7 @@ export interface TView {
    * Even indices: Directive index
    * Odd indices: Hook function
    */
-  viewCheckHooks: HookData|null;
+  viewCheckHooks: HookData | null;
 
   /**
    * Array of ngOnDestroy hooks that should be executed when this view is destroyed.
@@ -767,7 +771,7 @@ export interface TView {
    * Even indices: Directive index
    * Odd indices: Hook function
    */
-  destroyHooks: DestroyHookData|null;
+  destroyHooks: DestroyHookData | null;
 
   /**
    * When a view is destroyed, listeners need to be released and outputs need to be
@@ -795,7 +799,7 @@ export interface TView {
    * 2nd index is: index of function context in LView.cleanupInstances[]
    *               `tView.cleanup[i+0].call(lView[CLEANUP][tView.cleanup[i+1]])`
    */
-  cleanup: any[]|null;
+  cleanup: any[] | null;
 
   /**
    * A list of element indices for child components that will need to be
@@ -803,12 +807,12 @@ export interface TView {
    * already been adjusted for the HEADER_OFFSET.
    *
    */
-  components: number[]|null;
+  components: number[] | null;
 
   /**
    * A collection of queries tracked in a given view.
    */
-  queries: TQueries|null;
+  queries: TQueries | null;
 
   /**
    * An array of indices pointing to directives with content queries alongside with the
@@ -819,18 +823,18 @@ export interface TView {
    * We are storing those indexes so we can refresh content queries as part of a view refresh
    * process.
    */
-  contentQueries: number[]|null;
+  contentQueries: number[] | null;
 
   /**
    * Set of schemas that declare elements to be allowed inside the view.
    */
-  schemas: SchemaMetadata[]|null;
+  schemas: SchemaMetadata[] | null;
 
   /**
    * Array of constants for the view. Includes attribute arrays, local definition arrays etc.
    * Used for directive matching, attribute bindings, local definitions and more.
    */
-  consts: TConstants|null;
+  consts: TConstants | null;
 
   /**
    * Indicates that there was an error before we managed to complete the first create pass of the
@@ -844,7 +848,7 @@ export interface TView {
    * - TViewType.Component: an id generated based on component properties
    *                        (see `getComponentId` function for details)
    */
-  ssrId: string|null;
+  ssrId: string | null;
 }
 
 /** Single hook callback function. */
@@ -854,7 +858,7 @@ export type HookFn = () => void;
  * Information necessary to call a hook. E.g. the callback that
  * needs to invoked and the index at which to find its context.
  */
-export type HookEntry = number|HookFn;
+export type HookEntry = number | HookFn;
 
 /**
  * Array of hooks that should be executed for a view and their directive indices.
@@ -888,7 +892,7 @@ export type HookData = HookEntry[];
  * `CService` and `DService` are part of a `multi` provider where only `BService` and `DService`
  * have an `ngOnDestroy` hook.
  */
-export type DestroyHookData = (HookEntry|HookData)[];
+export type DestroyHookData = (HookEntry | HookData)[];
 
 /**
  * Static data that corresponds to the instance-specific data array on an LView.
@@ -917,6 +921,19 @@ export type DestroyHookData = (HookEntry|HookData)[];
  *
  * Injector bloom filters are also stored here.
  */
-export type TData =
-    (TNode|PipeDef<any>|DirectiveDef<any>|ComponentDef<any>|number|TStylingRange|TStylingKey|
-     ProviderToken<any>|TI18n|I18nUpdateOpCodes|TIcu|null|string|TDeferBlockDetails)[];
+export type TData = (
+  | TNode
+  | PipeDef<any>
+  | DirectiveDef<any>
+  | ComponentDef<any>
+  | number
+  | TStylingRange
+  | TStylingKey
+  | ProviderToken<any>
+  | TI18n
+  | I18nUpdateOpCodes
+  | TIcu
+  | null
+  | string
+  | TDeferBlockDetails
+)[];
diff --git a/packages/core/src/render3/jit/directive.ts b/packages/core/src/render3/jit/directive.ts
index 185b108473285..0300b477128a4 100644
--- a/packages/core/src/render3/jit/directive.ts
+++ b/packages/core/src/render3/jit/directive.ts
@@ -6,14 +6,24 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {getCompilerFacade, JitCompilerUsage, R3DirectiveMetadataFacade} from '../../compiler/compiler_facade';
-import {R3ComponentMetadataFacade, R3QueryMetadataFacade} from '../../compiler/compiler_facade_interface';
+import {
+  getCompilerFacade,
+  JitCompilerUsage,
+  R3DirectiveMetadataFacade,
+} from '../../compiler/compiler_facade';
+import {
+  R3ComponentMetadataFacade,
+  R3QueryMetadataFacade,
+} from '../../compiler/compiler_facade_interface';
 import {resolveForwardRef} from '../../di/forward_ref';
 import {getReflect, reflectDependencies} from '../../di/jit/util';
 import {Type} from '../../interface/type';
 import {Query} from '../../metadata/di';
 import {Component, Directive, Input} from '../../metadata/directives';
-import {componentNeedsResolution, maybeQueueResolutionOfComponentResources} from '../../metadata/resource_loading';
+import {
+  componentNeedsResolution,
+  maybeQueueResolutionOfComponentResources,
+} from '../../metadata/resource_loading';
 import {ViewEncapsulation} from '../../metadata/view';
 import {flatten} from '../../util/array_utils';
 import {EMPTY_ARRAY, EMPTY_OBJ} from '../../util/empty';
@@ -26,7 +36,11 @@ import {stringifyForError} from '../util/stringify_utils';
 
 import {angularCoreEnv} from './environment';
 import {getJitOptions} from './jit_options';
-import {flushModuleScopingQueueAsMuchAsPossible, patchComponentDefWithScope, transitiveScopesFor} from './module';
+import {
+  flushModuleScopingQueueAsMuchAsPossible,
+  patchComponentDefWithScope,
+  transitiveScopesFor,
+} from './module';
 import {isComponent, verifyStandaloneImport} from './util';
 
 /**
@@ -58,7 +72,7 @@ export function compileComponent(type: Type<any>, metadata: Component): void {
   // See the `initNgDevMode` docstring for more information.
   (typeof ngDevMode === 'undefined' || ngDevMode) && initNgDevMode();
 
-  let ngComponentDef: ComponentDef<unknown>|null = null;
+  let ngComponentDef: ComponentDef<unknown> | null = null;
 
   // Metadata may have resources which need to be resolved.
   maybeQueueResolutionOfComponentResources(type, metadata);
@@ -71,8 +85,11 @@ export function compileComponent(type: Type<any>, metadata: Component): void {
   Object.defineProperty(type, NG_COMP_DEF, {
     get: () => {
       if (ngComponentDef === null) {
-        const compiler =
-            getCompilerFacade({usage: JitCompilerUsage.Decorator, kind: 'component', type: type});
+        const compiler = getCompilerFacade({
+          usage: JitCompilerUsage.Decorator,
+          kind: 'component',
+          type: type,
+        });
 
         if (componentNeedsResolution(metadata)) {
           const error = [`Component '${type.name}' is not resolved:`];
@@ -117,8 +134,10 @@ export function compileComponent(type: Type<any>, metadata: Component): void {
           typeSourceSpan: compiler.createParseSourceSpan('Component', type.name, templateUrl),
           template: metadata.template || '',
           preserveWhitespaces,
-          styles: typeof metadata.styles === 'string' ? [metadata.styles] :
-                                                        (metadata.styles || EMPTY_ARRAY),
+          styles:
+            typeof metadata.styles === 'string'
+              ? [metadata.styles]
+              : metadata.styles || EMPTY_ARRAY,
           animations: metadata.animations,
           // JIT components are always compiled against an empty set of `declarations`. Instead, the
           // `directiveDefs` and `pipeDefs` are updated at a later point:
@@ -137,8 +156,11 @@ export function compileComponent(type: Type<any>, metadata: Component): void {
           if (meta.usesInheritance) {
             addDirectiveDefToUndecoratedParents(type);
           }
-          ngComponentDef =
-              compiler.compileComponent(angularCoreEnv, templateUrl, meta) as ComponentDef<unknown>;
+          ngComponentDef = compiler.compileComponent(
+            angularCoreEnv,
+            templateUrl,
+            meta,
+          ) as ComponentDef<unknown>;
 
           if (metadata.standalone) {
             // Patch the component definition for standalone components with `directiveDefs` and
@@ -177,8 +199,11 @@ export function compileComponent(type: Type<any>, metadata: Component): void {
           if (metadata.standalone) {
             ngComponentDef.schemas = metadata.schemas;
           } else {
-            throw new Error(`The 'schemas' was specified for the ${
-                stringifyForError(type)} but is only valid on a component that is standalone.`);
+            throw new Error(
+              `The 'schemas' was specified for the ${stringifyForError(
+                type,
+              )} but is only valid on a component that is standalone.`,
+            );
           }
         } else if (metadata.standalone) {
           ngComponentDef.schemas = [];
@@ -197,12 +222,15 @@ export function compileComponent(type: Type<any>, metadata: Component): void {
  * memoized functions here allows for the delayed resolution of any `forwardRef`s present in the
  * component's `imports`.
  */
-function getStandaloneDefFunctions(type: Type<any>, imports: Type<any>[]): {
-  directiveDefs: () => DirectiveDefList,
-  pipeDefs: () => PipeDefList,
+function getStandaloneDefFunctions(
+  type: Type<any>,
+  imports: Type<any>[],
+): {
+  directiveDefs: () => DirectiveDefList;
+  pipeDefs: () => PipeDefList;
 } {
-  let cachedDirectiveDefs: DirectiveDefList|null = null;
-  let cachedPipeDefs: PipeDefList|null = null;
+  let cachedDirectiveDefs: DirectiveDefList | null = null;
+  let cachedPipeDefs: PipeDefList | null = null;
   const directiveDefs = () => {
     if (!USE_RUNTIME_DEPS_TRACKER_FOR_JIT) {
       if (cachedDirectiveDefs === null) {
@@ -252,8 +280,8 @@ function getStandaloneDefFunctions(type: Type<any>, imports: Type<any>[]): {
       const scope = depsTracker.getStandaloneComponentScope(type, imports);
 
       return [...scope.compilation.directives]
-          .map(p => (getComponentDef(p) || getDirectiveDef(p))!)
-          .filter(d => d !== null);
+        .map((p) => (getComponentDef(p) || getDirectiveDef(p))!)
+        .filter((d) => d !== null);
     }
   };
 
@@ -301,7 +329,7 @@ function getStandaloneDefFunctions(type: Type<any>, imports: Type<any>[]): {
 
       const scope = depsTracker.getStandaloneComponentScope(type, imports);
 
-      return [...scope.compilation.pipes].map(p => getPipeDef(p)!).filter(d => d !== null);
+      return [...scope.compilation.pipes].map((p) => getPipeDef(p)!).filter((d) => d !== null);
     }
   };
 
@@ -311,8 +339,9 @@ function getStandaloneDefFunctions(type: Type<any>, imports: Type<any>[]): {
   };
 }
 
-function hasSelectorScope<T>(component: Type<T>):
-    component is(Type<T>& {ngSelectorScope: Type<any>}) {
+function hasSelectorScope<T>(
+  component: Type<T>,
+): component is Type<T> & {ngSelectorScope: Type<any>} {
   return (component as {ngSelectorScope?: any}).ngSelectorScope !== undefined;
 }
 
@@ -323,7 +352,7 @@ function hasSelectorScope<T>(component: Type<T>):
  * In the event that compilation is not immediate, `compileDirective` will return a `Promise` which
  * will resolve when compilation completes and the directive becomes usable.
  */
-export function compileDirective(type: Type<any>, directive: Directive|null): void {
+export function compileDirective(type: Type<any>, directive: Directive | null): void {
   let ngDirectiveDef: any = null;
 
   addDirectiveFactoryDef(type, directive || {});
@@ -335,10 +364,16 @@ export function compileDirective(type: Type<any>, directive: Directive|null): vo
         // that use `@Directive()` with no selector. In that case, pass empty object to the
         // `directiveMetadata` function instead of null.
         const meta = getDirectiveMetadata(type, directive || {});
-        const compiler =
-            getCompilerFacade({usage: JitCompilerUsage.Decorator, kind: 'directive', type});
-        ngDirectiveDef =
-            compiler.compileDirective(angularCoreEnv, meta.sourceMapUrl, meta.metadata);
+        const compiler = getCompilerFacade({
+          usage: JitCompilerUsage.Decorator,
+          kind: 'directive',
+          type,
+        });
+        ngDirectiveDef = compiler.compileDirective(
+          angularCoreEnv,
+          meta.sourceMapUrl,
+          meta.metadata,
+        );
       }
       return ngDirectiveDef;
     },
@@ -359,21 +394,24 @@ function getDirectiveMetadata(type: Type<any>, metadata: Directive) {
   return {metadata: facade, sourceMapUrl};
 }
 
-function addDirectiveFactoryDef(type: Type<any>, metadata: Directive|Component) {
+function addDirectiveFactoryDef(type: Type<any>, metadata: Directive | Component) {
   let ngFactoryDef: any = null;
 
   Object.defineProperty(type, NG_FACTORY_DEF, {
     get: () => {
       if (ngFactoryDef === null) {
         const meta = getDirectiveMetadata(type, metadata);
-        const compiler =
-            getCompilerFacade({usage: JitCompilerUsage.Decorator, kind: 'directive', type});
+        const compiler = getCompilerFacade({
+          usage: JitCompilerUsage.Decorator,
+          kind: 'directive',
+          type,
+        });
         ngFactoryDef = compiler.compileFactory(angularCoreEnv, `ng:///${type.name}/ɵfac.js`, {
           name: meta.metadata.name,
           type: meta.metadata.type,
           typeArgumentCount: 0,
           deps: reflectDependencies(type),
-          target: compiler.FactoryTarget.Directive
+          target: compiler.FactoryTarget.Directive,
         });
       }
       return ngFactoryDef;
@@ -413,9 +451,10 @@ export function directiveMetadata(type: Type<any>, metadata: Directive): R3Direc
     viewQueries: extractQueriesMetadata(type, propMetadata, isViewQuery),
     isStandalone: !!metadata.standalone,
     isSignal: !!metadata.signals,
-    hostDirectives: metadata.hostDirectives?.map(
-                        directive => typeof directive === 'function' ? {directive} : directive) ||
-        null
+    hostDirectives:
+      metadata.hostDirectives?.map((directive) =>
+        typeof directive === 'function' ? {directive} : directive,
+      ) || null,
   };
 }
 
@@ -430,15 +469,18 @@ function addDirectiveDefToUndecoratedParents(type: Type<any>) {
   while (parent && parent !== objPrototype) {
     // Since inheritance works if the class was annotated already, we only need to add
     // the def if there are no annotations and the def hasn't been created already.
-    if (!getDirectiveDef(parent) && !getComponentDef(parent) &&
-        shouldAddAbstractDirective(parent)) {
+    if (
+      !getDirectiveDef(parent) &&
+      !getComponentDef(parent) &&
+      shouldAddAbstractDirective(parent)
+    ) {
       compileDirective(parent, null);
     }
     parent = Object.getPrototypeOf(parent);
   }
 }
 
-function convertToR3QueryPredicate(selector: any): any|string[] {
+function convertToR3QueryPredicate(selector: any): any | string[] {
   return typeof selector === 'string' ? splitByComma(selector) : resolveForwardRef(selector);
 }
 
@@ -455,18 +497,21 @@ export function convertToR3QueryMetadata(propertyName: string, ann: Query): R3Qu
   };
 }
 function extractQueriesMetadata(
-    type: Type<any>, propMetadata: {[key: string]: any[]},
-    isQueryAnn: (ann: any) => ann is Query): R3QueryMetadataFacade[] {
+  type: Type<any>,
+  propMetadata: {[key: string]: any[]},
+  isQueryAnn: (ann: any) => ann is Query,
+): R3QueryMetadataFacade[] {
   const queriesMeta: R3QueryMetadataFacade[] = [];
   for (const field in propMetadata) {
     if (propMetadata.hasOwnProperty(field)) {
       const annotations = propMetadata[field];
-      annotations.forEach(ann => {
+      annotations.forEach((ann) => {
         if (isQueryAnn(ann)) {
           if (!ann.selector) {
             throw new Error(
-                `Can't construct a query for the property "${field}" of ` +
-                `"${stringifyForError(type)}" since the query selector wasn't defined.`);
+              `Can't construct a query for the property "${field}" of ` +
+                `"${stringifyForError(type)}" since the query selector wasn't defined.`,
+            );
           }
           if (annotations.some(isInputAnnotation)) {
             throw new Error(`Cannot combine @Input decorators with query decorators`);
@@ -479,7 +524,7 @@ function extractQueriesMetadata(
   return queriesMeta;
 }
 
-function extractExportAs(exportAs: string|undefined): string[]|null {
+function extractExportAs(exportAs: string | undefined): string[] | null {
   return exportAs === undefined ? null : splitByComma(exportAs);
 }
 
@@ -498,18 +543,24 @@ function isInputAnnotation(value: any): value is Input {
 }
 
 function splitByComma(value: string): string[] {
-  return value.split(',').map(piece => piece.trim());
+  return value.split(',').map((piece) => piece.trim());
 }
 
 const LIFECYCLE_HOOKS = [
-  'ngOnChanges', 'ngOnInit', 'ngOnDestroy', 'ngDoCheck', 'ngAfterViewInit', 'ngAfterViewChecked',
-  'ngAfterContentInit', 'ngAfterContentChecked'
+  'ngOnChanges',
+  'ngOnInit',
+  'ngOnDestroy',
+  'ngDoCheck',
+  'ngAfterViewInit',
+  'ngAfterViewChecked',
+  'ngAfterContentInit',
+  'ngAfterContentChecked',
 ];
 
 function shouldAddAbstractDirective(type: Type<any>): boolean {
   const reflect = getReflect();
 
-  if (LIFECYCLE_HOOKS.some(hookName => reflect.hasLifecycleHook(type, hookName))) {
+  if (LIFECYCLE_HOOKS.some((hookName) => reflect.hasLifecycleHook(type, hookName))) {
     return true;
   }
 
@@ -522,9 +573,14 @@ function shouldAddAbstractDirective(type: Type<any>): boolean {
       const current = annotations[i];
       const metadataName = current.ngMetadataName;
 
-      if (isInputAnnotation(current) || isContentQuery(current) || isViewQuery(current) ||
-          metadataName === 'Output' || metadataName === 'HostBinding' ||
-          metadataName === 'HostListener') {
+      if (
+        isInputAnnotation(current) ||
+        isContentQuery(current) ||
+        isViewQuery(current) ||
+        metadataName === 'Output' ||
+        metadataName === 'HostBinding' ||
+        metadataName === 'HostListener'
+      ) {
         return true;
       }
     }
diff --git a/packages/core/src/render3/jit/environment.ts b/packages/core/src/render3/jit/environment.ts
index 8be3dbf1f982b..6416025045d71 100644
--- a/packages/core/src/render3/jit/environment.ts
+++ b/packages/core/src/render3/jit/environment.ts
@@ -14,196 +14,194 @@ import * as iframe_attrs_validation from '../../sanitization/iframe_attrs_valida
 import * as sanitization from '../../sanitization/sanitization';
 import * as r3 from '../index';
 
-
 /**
  * A mapping of the @angular/core API surface used in generated expressions to the actual symbols.
  *
  * This should be kept up to date with the public exports of @angular/core.
  */
-export const angularCoreEnv: {[name: string]: unknown} =
-    (() => ({
-       'ɵɵattribute': r3.ɵɵattribute,
-       'ɵɵattributeInterpolate1': r3.ɵɵattributeInterpolate1,
-       'ɵɵattributeInterpolate2': r3.ɵɵattributeInterpolate2,
-       'ɵɵattributeInterpolate3': r3.ɵɵattributeInterpolate3,
-       'ɵɵattributeInterpolate4': r3.ɵɵattributeInterpolate4,
-       'ɵɵattributeInterpolate5': r3.ɵɵattributeInterpolate5,
-       'ɵɵattributeInterpolate6': r3.ɵɵattributeInterpolate6,
-       'ɵɵattributeInterpolate7': r3.ɵɵattributeInterpolate7,
-       'ɵɵattributeInterpolate8': r3.ɵɵattributeInterpolate8,
-       'ɵɵattributeInterpolateV': r3.ɵɵattributeInterpolateV,
-       'ɵɵdefineComponent': r3.ɵɵdefineComponent,
-       'ɵɵdefineDirective': r3.ɵɵdefineDirective,
-       'ɵɵdefineInjectable': ɵɵdefineInjectable,
-       'ɵɵdefineInjector': ɵɵdefineInjector,
-       'ɵɵdefineNgModule': r3.ɵɵdefineNgModule,
-       'ɵɵdefinePipe': r3.ɵɵdefinePipe,
-       'ɵɵdirectiveInject': r3.ɵɵdirectiveInject,
-       'ɵɵgetInheritedFactory': r3.ɵɵgetInheritedFactory,
-       'ɵɵinject': ɵɵinject,
-       'ɵɵinjectAttribute': r3.ɵɵinjectAttribute,
-       'ɵɵinvalidFactory': r3.ɵɵinvalidFactory,
-       'ɵɵinvalidFactoryDep': ɵɵinvalidFactoryDep,
-       'ɵɵtemplateRefExtractor': r3.ɵɵtemplateRefExtractor,
-       'ɵɵresetView': r3.ɵɵresetView,
-       'ɵɵHostDirectivesFeature': r3.ɵɵHostDirectivesFeature,
-       'ɵɵNgOnChangesFeature': r3.ɵɵNgOnChangesFeature,
-       'ɵɵProvidersFeature': r3.ɵɵProvidersFeature,
-       'ɵɵCopyDefinitionFeature': r3.ɵɵCopyDefinitionFeature,
-       'ɵɵInheritDefinitionFeature': r3.ɵɵInheritDefinitionFeature,
-       'ɵɵInputTransformsFeature': r3.ɵɵInputTransformsFeature,
-       'ɵɵStandaloneFeature': r3.ɵɵStandaloneFeature,
-       'ɵɵnextContext': r3.ɵɵnextContext,
-       'ɵɵnamespaceHTML': r3.ɵɵnamespaceHTML,
-       'ɵɵnamespaceMathML': r3.ɵɵnamespaceMathML,
-       'ɵɵnamespaceSVG': r3.ɵɵnamespaceSVG,
-       'ɵɵenableBindings': r3.ɵɵenableBindings,
-       'ɵɵdisableBindings': r3.ɵɵdisableBindings,
-       'ɵɵelementStart': r3.ɵɵelementStart,
-       'ɵɵelementEnd': r3.ɵɵelementEnd,
-       'ɵɵelement': r3.ɵɵelement,
-       'ɵɵelementContainerStart': r3.ɵɵelementContainerStart,
-       'ɵɵelementContainerEnd': r3.ɵɵelementContainerEnd,
-       'ɵɵelementContainer': r3.ɵɵelementContainer,
-       'ɵɵpureFunction0': r3.ɵɵpureFunction0,
-       'ɵɵpureFunction1': r3.ɵɵpureFunction1,
-       'ɵɵpureFunction2': r3.ɵɵpureFunction2,
-       'ɵɵpureFunction3': r3.ɵɵpureFunction3,
-       'ɵɵpureFunction4': r3.ɵɵpureFunction4,
-       'ɵɵpureFunction5': r3.ɵɵpureFunction5,
-       'ɵɵpureFunction6': r3.ɵɵpureFunction6,
-       'ɵɵpureFunction7': r3.ɵɵpureFunction7,
-       'ɵɵpureFunction8': r3.ɵɵpureFunction8,
-       'ɵɵpureFunctionV': r3.ɵɵpureFunctionV,
-       'ɵɵgetCurrentView': r3.ɵɵgetCurrentView,
-       'ɵɵrestoreView': r3.ɵɵrestoreView,
-       'ɵɵlistener': r3.ɵɵlistener,
-       'ɵɵprojection': r3.ɵɵprojection,
-       'ɵɵsyntheticHostProperty': r3.ɵɵsyntheticHostProperty,
-       'ɵɵsyntheticHostListener': r3.ɵɵsyntheticHostListener,
-       'ɵɵpipeBind1': r3.ɵɵpipeBind1,
-       'ɵɵpipeBind2': r3.ɵɵpipeBind2,
-       'ɵɵpipeBind3': r3.ɵɵpipeBind3,
-       'ɵɵpipeBind4': r3.ɵɵpipeBind4,
-       'ɵɵpipeBindV': r3.ɵɵpipeBindV,
-       'ɵɵprojectionDef': r3.ɵɵprojectionDef,
-       'ɵɵhostProperty': r3.ɵɵhostProperty,
-       'ɵɵproperty': r3.ɵɵproperty,
-       'ɵɵpropertyInterpolate': r3.ɵɵpropertyInterpolate,
-       'ɵɵpropertyInterpolate1': r3.ɵɵpropertyInterpolate1,
-       'ɵɵpropertyInterpolate2': r3.ɵɵpropertyInterpolate2,
-       'ɵɵpropertyInterpolate3': r3.ɵɵpropertyInterpolate3,
-       'ɵɵpropertyInterpolate4': r3.ɵɵpropertyInterpolate4,
-       'ɵɵpropertyInterpolate5': r3.ɵɵpropertyInterpolate5,
-       'ɵɵpropertyInterpolate6': r3.ɵɵpropertyInterpolate6,
-       'ɵɵpropertyInterpolate7': r3.ɵɵpropertyInterpolate7,
-       'ɵɵpropertyInterpolate8': r3.ɵɵpropertyInterpolate8,
-       'ɵɵpropertyInterpolateV': r3.ɵɵpropertyInterpolateV,
-       'ɵɵpipe': r3.ɵɵpipe,
-       'ɵɵqueryRefresh': r3.ɵɵqueryRefresh,
-       'ɵɵqueryAdvance': r3.ɵɵqueryAdvance,
-       'ɵɵviewQuery': r3.ɵɵviewQuery,
-       'ɵɵviewQuerySignal': r3.ɵɵviewQuerySignal,
-       'ɵɵloadQuery': r3.ɵɵloadQuery,
-       'ɵɵcontentQuery': r3.ɵɵcontentQuery,
-       'ɵɵcontentQuerySignal': r3.ɵɵcontentQuerySignal,
-       'ɵɵreference': r3.ɵɵreference,
-       'ɵɵclassMap': r3.ɵɵclassMap,
-       'ɵɵclassMapInterpolate1': r3.ɵɵclassMapInterpolate1,
-       'ɵɵclassMapInterpolate2': r3.ɵɵclassMapInterpolate2,
-       'ɵɵclassMapInterpolate3': r3.ɵɵclassMapInterpolate3,
-       'ɵɵclassMapInterpolate4': r3.ɵɵclassMapInterpolate4,
-       'ɵɵclassMapInterpolate5': r3.ɵɵclassMapInterpolate5,
-       'ɵɵclassMapInterpolate6': r3.ɵɵclassMapInterpolate6,
-       'ɵɵclassMapInterpolate7': r3.ɵɵclassMapInterpolate7,
-       'ɵɵclassMapInterpolate8': r3.ɵɵclassMapInterpolate8,
-       'ɵɵclassMapInterpolateV': r3.ɵɵclassMapInterpolateV,
-       'ɵɵstyleMap': r3.ɵɵstyleMap,
-       'ɵɵstyleMapInterpolate1': r3.ɵɵstyleMapInterpolate1,
-       'ɵɵstyleMapInterpolate2': r3.ɵɵstyleMapInterpolate2,
-       'ɵɵstyleMapInterpolate3': r3.ɵɵstyleMapInterpolate3,
-       'ɵɵstyleMapInterpolate4': r3.ɵɵstyleMapInterpolate4,
-       'ɵɵstyleMapInterpolate5': r3.ɵɵstyleMapInterpolate5,
-       'ɵɵstyleMapInterpolate6': r3.ɵɵstyleMapInterpolate6,
-       'ɵɵstyleMapInterpolate7': r3.ɵɵstyleMapInterpolate7,
-       'ɵɵstyleMapInterpolate8': r3.ɵɵstyleMapInterpolate8,
-       'ɵɵstyleMapInterpolateV': r3.ɵɵstyleMapInterpolateV,
-       'ɵɵstyleProp': r3.ɵɵstyleProp,
-       'ɵɵstylePropInterpolate1': r3.ɵɵstylePropInterpolate1,
-       'ɵɵstylePropInterpolate2': r3.ɵɵstylePropInterpolate2,
-       'ɵɵstylePropInterpolate3': r3.ɵɵstylePropInterpolate3,
-       'ɵɵstylePropInterpolate4': r3.ɵɵstylePropInterpolate4,
-       'ɵɵstylePropInterpolate5': r3.ɵɵstylePropInterpolate5,
-       'ɵɵstylePropInterpolate6': r3.ɵɵstylePropInterpolate6,
-       'ɵɵstylePropInterpolate7': r3.ɵɵstylePropInterpolate7,
-       'ɵɵstylePropInterpolate8': r3.ɵɵstylePropInterpolate8,
-       'ɵɵstylePropInterpolateV': r3.ɵɵstylePropInterpolateV,
-       'ɵɵclassProp': r3.ɵɵclassProp,
-       'ɵɵadvance': r3.ɵɵadvance,
-       'ɵɵtemplate': r3.ɵɵtemplate,
-       'ɵɵconditional': r3.ɵɵconditional,
-       'ɵɵdefer': r3.ɵɵdefer,
-       'ɵɵdeferWhen': r3.ɵɵdeferWhen,
-       'ɵɵdeferOnIdle': r3.ɵɵdeferOnIdle,
-       'ɵɵdeferOnImmediate': r3.ɵɵdeferOnImmediate,
-       'ɵɵdeferOnTimer': r3.ɵɵdeferOnTimer,
-       'ɵɵdeferOnHover': r3.ɵɵdeferOnHover,
-       'ɵɵdeferOnInteraction': r3.ɵɵdeferOnInteraction,
-       'ɵɵdeferOnViewport': r3.ɵɵdeferOnViewport,
-       'ɵɵdeferPrefetchWhen': r3.ɵɵdeferPrefetchWhen,
-       'ɵɵdeferPrefetchOnIdle': r3.ɵɵdeferPrefetchOnIdle,
-       'ɵɵdeferPrefetchOnImmediate': r3.ɵɵdeferPrefetchOnImmediate,
-       'ɵɵdeferPrefetchOnTimer': r3.ɵɵdeferPrefetchOnTimer,
-       'ɵɵdeferPrefetchOnHover': r3.ɵɵdeferPrefetchOnHover,
-       'ɵɵdeferPrefetchOnInteraction': r3.ɵɵdeferPrefetchOnInteraction,
-       'ɵɵdeferPrefetchOnViewport': r3.ɵɵdeferPrefetchOnViewport,
-       'ɵɵdeferEnableTimerScheduling': r3.ɵɵdeferEnableTimerScheduling,
-       'ɵɵrepeater': r3.ɵɵrepeater,
-       'ɵɵrepeaterCreate': r3.ɵɵrepeaterCreate,
-       'ɵɵrepeaterTrackByIndex': r3.ɵɵrepeaterTrackByIndex,
-       'ɵɵrepeaterTrackByIdentity': r3.ɵɵrepeaterTrackByIdentity,
-       'ɵɵcomponentInstance': r3.ɵɵcomponentInstance,
-       'ɵɵtext': r3.ɵɵtext,
-       'ɵɵtextInterpolate': r3.ɵɵtextInterpolate,
-       'ɵɵtextInterpolate1': r3.ɵɵtextInterpolate1,
-       'ɵɵtextInterpolate2': r3.ɵɵtextInterpolate2,
-       'ɵɵtextInterpolate3': r3.ɵɵtextInterpolate3,
-       'ɵɵtextInterpolate4': r3.ɵɵtextInterpolate4,
-       'ɵɵtextInterpolate5': r3.ɵɵtextInterpolate5,
-       'ɵɵtextInterpolate6': r3.ɵɵtextInterpolate6,
-       'ɵɵtextInterpolate7': r3.ɵɵtextInterpolate7,
-       'ɵɵtextInterpolate8': r3.ɵɵtextInterpolate8,
-       'ɵɵtextInterpolateV': r3.ɵɵtextInterpolateV,
-       'ɵɵi18n': r3.ɵɵi18n,
-       'ɵɵi18nAttributes': r3.ɵɵi18nAttributes,
-       'ɵɵi18nExp': r3.ɵɵi18nExp,
-       'ɵɵi18nStart': r3.ɵɵi18nStart,
-       'ɵɵi18nEnd': r3.ɵɵi18nEnd,
-       'ɵɵi18nApply': r3.ɵɵi18nApply,
-       'ɵɵi18nPostprocess': r3.ɵɵi18nPostprocess,
-       'ɵɵresolveWindow': r3.ɵɵresolveWindow,
-       'ɵɵresolveDocument': r3.ɵɵresolveDocument,
-       'ɵɵresolveBody': r3.ɵɵresolveBody,
-       'ɵɵsetComponentScope': r3.ɵɵsetComponentScope,
-       'ɵɵsetNgModuleScope': r3.ɵɵsetNgModuleScope,
-       'ɵɵregisterNgModuleType': registerNgModuleType,
-       'ɵɵgetComponentDepsFactory': r3.ɵɵgetComponentDepsFactory,
-       'ɵsetClassDebugInfo': r3.ɵsetClassDebugInfo,
+export const angularCoreEnv: {[name: string]: unknown} = (() => ({
+  'ɵɵattribute': r3.ɵɵattribute,
+  'ɵɵattributeInterpolate1': r3.ɵɵattributeInterpolate1,
+  'ɵɵattributeInterpolate2': r3.ɵɵattributeInterpolate2,
+  'ɵɵattributeInterpolate3': r3.ɵɵattributeInterpolate3,
+  'ɵɵattributeInterpolate4': r3.ɵɵattributeInterpolate4,
+  'ɵɵattributeInterpolate5': r3.ɵɵattributeInterpolate5,
+  'ɵɵattributeInterpolate6': r3.ɵɵattributeInterpolate6,
+  'ɵɵattributeInterpolate7': r3.ɵɵattributeInterpolate7,
+  'ɵɵattributeInterpolate8': r3.ɵɵattributeInterpolate8,
+  'ɵɵattributeInterpolateV': r3.ɵɵattributeInterpolateV,
+  'ɵɵdefineComponent': r3.ɵɵdefineComponent,
+  'ɵɵdefineDirective': r3.ɵɵdefineDirective,
+  'ɵɵdefineInjectable': ɵɵdefineInjectable,
+  'ɵɵdefineInjector': ɵɵdefineInjector,
+  'ɵɵdefineNgModule': r3.ɵɵdefineNgModule,
+  'ɵɵdefinePipe': r3.ɵɵdefinePipe,
+  'ɵɵdirectiveInject': r3.ɵɵdirectiveInject,
+  'ɵɵgetInheritedFactory': r3.ɵɵgetInheritedFactory,
+  'ɵɵinject': ɵɵinject,
+  'ɵɵinjectAttribute': r3.ɵɵinjectAttribute,
+  'ɵɵinvalidFactory': r3.ɵɵinvalidFactory,
+  'ɵɵinvalidFactoryDep': ɵɵinvalidFactoryDep,
+  'ɵɵtemplateRefExtractor': r3.ɵɵtemplateRefExtractor,
+  'ɵɵresetView': r3.ɵɵresetView,
+  'ɵɵHostDirectivesFeature': r3.ɵɵHostDirectivesFeature,
+  'ɵɵNgOnChangesFeature': r3.ɵɵNgOnChangesFeature,
+  'ɵɵProvidersFeature': r3.ɵɵProvidersFeature,
+  'ɵɵCopyDefinitionFeature': r3.ɵɵCopyDefinitionFeature,
+  'ɵɵInheritDefinitionFeature': r3.ɵɵInheritDefinitionFeature,
+  'ɵɵInputTransformsFeature': r3.ɵɵInputTransformsFeature,
+  'ɵɵStandaloneFeature': r3.ɵɵStandaloneFeature,
+  'ɵɵnextContext': r3.ɵɵnextContext,
+  'ɵɵnamespaceHTML': r3.ɵɵnamespaceHTML,
+  'ɵɵnamespaceMathML': r3.ɵɵnamespaceMathML,
+  'ɵɵnamespaceSVG': r3.ɵɵnamespaceSVG,
+  'ɵɵenableBindings': r3.ɵɵenableBindings,
+  'ɵɵdisableBindings': r3.ɵɵdisableBindings,
+  'ɵɵelementStart': r3.ɵɵelementStart,
+  'ɵɵelementEnd': r3.ɵɵelementEnd,
+  'ɵɵelement': r3.ɵɵelement,
+  'ɵɵelementContainerStart': r3.ɵɵelementContainerStart,
+  'ɵɵelementContainerEnd': r3.ɵɵelementContainerEnd,
+  'ɵɵelementContainer': r3.ɵɵelementContainer,
+  'ɵɵpureFunction0': r3.ɵɵpureFunction0,
+  'ɵɵpureFunction1': r3.ɵɵpureFunction1,
+  'ɵɵpureFunction2': r3.ɵɵpureFunction2,
+  'ɵɵpureFunction3': r3.ɵɵpureFunction3,
+  'ɵɵpureFunction4': r3.ɵɵpureFunction4,
+  'ɵɵpureFunction5': r3.ɵɵpureFunction5,
+  'ɵɵpureFunction6': r3.ɵɵpureFunction6,
+  'ɵɵpureFunction7': r3.ɵɵpureFunction7,
+  'ɵɵpureFunction8': r3.ɵɵpureFunction8,
+  'ɵɵpureFunctionV': r3.ɵɵpureFunctionV,
+  'ɵɵgetCurrentView': r3.ɵɵgetCurrentView,
+  'ɵɵrestoreView': r3.ɵɵrestoreView,
+  'ɵɵlistener': r3.ɵɵlistener,
+  'ɵɵprojection': r3.ɵɵprojection,
+  'ɵɵsyntheticHostProperty': r3.ɵɵsyntheticHostProperty,
+  'ɵɵsyntheticHostListener': r3.ɵɵsyntheticHostListener,
+  'ɵɵpipeBind1': r3.ɵɵpipeBind1,
+  'ɵɵpipeBind2': r3.ɵɵpipeBind2,
+  'ɵɵpipeBind3': r3.ɵɵpipeBind3,
+  'ɵɵpipeBind4': r3.ɵɵpipeBind4,
+  'ɵɵpipeBindV': r3.ɵɵpipeBindV,
+  'ɵɵprojectionDef': r3.ɵɵprojectionDef,
+  'ɵɵhostProperty': r3.ɵɵhostProperty,
+  'ɵɵproperty': r3.ɵɵproperty,
+  'ɵɵpropertyInterpolate': r3.ɵɵpropertyInterpolate,
+  'ɵɵpropertyInterpolate1': r3.ɵɵpropertyInterpolate1,
+  'ɵɵpropertyInterpolate2': r3.ɵɵpropertyInterpolate2,
+  'ɵɵpropertyInterpolate3': r3.ɵɵpropertyInterpolate3,
+  'ɵɵpropertyInterpolate4': r3.ɵɵpropertyInterpolate4,
+  'ɵɵpropertyInterpolate5': r3.ɵɵpropertyInterpolate5,
+  'ɵɵpropertyInterpolate6': r3.ɵɵpropertyInterpolate6,
+  'ɵɵpropertyInterpolate7': r3.ɵɵpropertyInterpolate7,
+  'ɵɵpropertyInterpolate8': r3.ɵɵpropertyInterpolate8,
+  'ɵɵpropertyInterpolateV': r3.ɵɵpropertyInterpolateV,
+  'ɵɵpipe': r3.ɵɵpipe,
+  'ɵɵqueryRefresh': r3.ɵɵqueryRefresh,
+  'ɵɵqueryAdvance': r3.ɵɵqueryAdvance,
+  'ɵɵviewQuery': r3.ɵɵviewQuery,
+  'ɵɵviewQuerySignal': r3.ɵɵviewQuerySignal,
+  'ɵɵloadQuery': r3.ɵɵloadQuery,
+  'ɵɵcontentQuery': r3.ɵɵcontentQuery,
+  'ɵɵcontentQuerySignal': r3.ɵɵcontentQuerySignal,
+  'ɵɵreference': r3.ɵɵreference,
+  'ɵɵclassMap': r3.ɵɵclassMap,
+  'ɵɵclassMapInterpolate1': r3.ɵɵclassMapInterpolate1,
+  'ɵɵclassMapInterpolate2': r3.ɵɵclassMapInterpolate2,
+  'ɵɵclassMapInterpolate3': r3.ɵɵclassMapInterpolate3,
+  'ɵɵclassMapInterpolate4': r3.ɵɵclassMapInterpolate4,
+  'ɵɵclassMapInterpolate5': r3.ɵɵclassMapInterpolate5,
+  'ɵɵclassMapInterpolate6': r3.ɵɵclassMapInterpolate6,
+  'ɵɵclassMapInterpolate7': r3.ɵɵclassMapInterpolate7,
+  'ɵɵclassMapInterpolate8': r3.ɵɵclassMapInterpolate8,
+  'ɵɵclassMapInterpolateV': r3.ɵɵclassMapInterpolateV,
+  'ɵɵstyleMap': r3.ɵɵstyleMap,
+  'ɵɵstyleMapInterpolate1': r3.ɵɵstyleMapInterpolate1,
+  'ɵɵstyleMapInterpolate2': r3.ɵɵstyleMapInterpolate2,
+  'ɵɵstyleMapInterpolate3': r3.ɵɵstyleMapInterpolate3,
+  'ɵɵstyleMapInterpolate4': r3.ɵɵstyleMapInterpolate4,
+  'ɵɵstyleMapInterpolate5': r3.ɵɵstyleMapInterpolate5,
+  'ɵɵstyleMapInterpolate6': r3.ɵɵstyleMapInterpolate6,
+  'ɵɵstyleMapInterpolate7': r3.ɵɵstyleMapInterpolate7,
+  'ɵɵstyleMapInterpolate8': r3.ɵɵstyleMapInterpolate8,
+  'ɵɵstyleMapInterpolateV': r3.ɵɵstyleMapInterpolateV,
+  'ɵɵstyleProp': r3.ɵɵstyleProp,
+  'ɵɵstylePropInterpolate1': r3.ɵɵstylePropInterpolate1,
+  'ɵɵstylePropInterpolate2': r3.ɵɵstylePropInterpolate2,
+  'ɵɵstylePropInterpolate3': r3.ɵɵstylePropInterpolate3,
+  'ɵɵstylePropInterpolate4': r3.ɵɵstylePropInterpolate4,
+  'ɵɵstylePropInterpolate5': r3.ɵɵstylePropInterpolate5,
+  'ɵɵstylePropInterpolate6': r3.ɵɵstylePropInterpolate6,
+  'ɵɵstylePropInterpolate7': r3.ɵɵstylePropInterpolate7,
+  'ɵɵstylePropInterpolate8': r3.ɵɵstylePropInterpolate8,
+  'ɵɵstylePropInterpolateV': r3.ɵɵstylePropInterpolateV,
+  'ɵɵclassProp': r3.ɵɵclassProp,
+  'ɵɵadvance': r3.ɵɵadvance,
+  'ɵɵtemplate': r3.ɵɵtemplate,
+  'ɵɵconditional': r3.ɵɵconditional,
+  'ɵɵdefer': r3.ɵɵdefer,
+  'ɵɵdeferWhen': r3.ɵɵdeferWhen,
+  'ɵɵdeferOnIdle': r3.ɵɵdeferOnIdle,
+  'ɵɵdeferOnImmediate': r3.ɵɵdeferOnImmediate,
+  'ɵɵdeferOnTimer': r3.ɵɵdeferOnTimer,
+  'ɵɵdeferOnHover': r3.ɵɵdeferOnHover,
+  'ɵɵdeferOnInteraction': r3.ɵɵdeferOnInteraction,
+  'ɵɵdeferOnViewport': r3.ɵɵdeferOnViewport,
+  'ɵɵdeferPrefetchWhen': r3.ɵɵdeferPrefetchWhen,
+  'ɵɵdeferPrefetchOnIdle': r3.ɵɵdeferPrefetchOnIdle,
+  'ɵɵdeferPrefetchOnImmediate': r3.ɵɵdeferPrefetchOnImmediate,
+  'ɵɵdeferPrefetchOnTimer': r3.ɵɵdeferPrefetchOnTimer,
+  'ɵɵdeferPrefetchOnHover': r3.ɵɵdeferPrefetchOnHover,
+  'ɵɵdeferPrefetchOnInteraction': r3.ɵɵdeferPrefetchOnInteraction,
+  'ɵɵdeferPrefetchOnViewport': r3.ɵɵdeferPrefetchOnViewport,
+  'ɵɵdeferEnableTimerScheduling': r3.ɵɵdeferEnableTimerScheduling,
+  'ɵɵrepeater': r3.ɵɵrepeater,
+  'ɵɵrepeaterCreate': r3.ɵɵrepeaterCreate,
+  'ɵɵrepeaterTrackByIndex': r3.ɵɵrepeaterTrackByIndex,
+  'ɵɵrepeaterTrackByIdentity': r3.ɵɵrepeaterTrackByIdentity,
+  'ɵɵcomponentInstance': r3.ɵɵcomponentInstance,
+  'ɵɵtext': r3.ɵɵtext,
+  'ɵɵtextInterpolate': r3.ɵɵtextInterpolate,
+  'ɵɵtextInterpolate1': r3.ɵɵtextInterpolate1,
+  'ɵɵtextInterpolate2': r3.ɵɵtextInterpolate2,
+  'ɵɵtextInterpolate3': r3.ɵɵtextInterpolate3,
+  'ɵɵtextInterpolate4': r3.ɵɵtextInterpolate4,
+  'ɵɵtextInterpolate5': r3.ɵɵtextInterpolate5,
+  'ɵɵtextInterpolate6': r3.ɵɵtextInterpolate6,
+  'ɵɵtextInterpolate7': r3.ɵɵtextInterpolate7,
+  'ɵɵtextInterpolate8': r3.ɵɵtextInterpolate8,
+  'ɵɵtextInterpolateV': r3.ɵɵtextInterpolateV,
+  'ɵɵi18n': r3.ɵɵi18n,
+  'ɵɵi18nAttributes': r3.ɵɵi18nAttributes,
+  'ɵɵi18nExp': r3.ɵɵi18nExp,
+  'ɵɵi18nStart': r3.ɵɵi18nStart,
+  'ɵɵi18nEnd': r3.ɵɵi18nEnd,
+  'ɵɵi18nApply': r3.ɵɵi18nApply,
+  'ɵɵi18nPostprocess': r3.ɵɵi18nPostprocess,
+  'ɵɵresolveWindow': r3.ɵɵresolveWindow,
+  'ɵɵresolveDocument': r3.ɵɵresolveDocument,
+  'ɵɵresolveBody': r3.ɵɵresolveBody,
+  'ɵɵsetComponentScope': r3.ɵɵsetComponentScope,
+  'ɵɵsetNgModuleScope': r3.ɵɵsetNgModuleScope,
+  'ɵɵregisterNgModuleType': registerNgModuleType,
+  'ɵɵgetComponentDepsFactory': r3.ɵɵgetComponentDepsFactory,
+  'ɵsetClassDebugInfo': r3.ɵsetClassDebugInfo,
 
-       'ɵɵsanitizeHtml': sanitization.ɵɵsanitizeHtml,
-       'ɵɵsanitizeStyle': sanitization.ɵɵsanitizeStyle,
-       'ɵɵsanitizeResourceUrl': sanitization.ɵɵsanitizeResourceUrl,
-       'ɵɵsanitizeScript': sanitization.ɵɵsanitizeScript,
-       'ɵɵsanitizeUrl': sanitization.ɵɵsanitizeUrl,
-       'ɵɵsanitizeUrlOrResourceUrl': sanitization.ɵɵsanitizeUrlOrResourceUrl,
-       'ɵɵtrustConstantHtml': sanitization.ɵɵtrustConstantHtml,
-       'ɵɵtrustConstantResourceUrl': sanitization.ɵɵtrustConstantResourceUrl,
-       'ɵɵvalidateIframeAttribute': iframe_attrs_validation.ɵɵvalidateIframeAttribute,
+  'ɵɵsanitizeHtml': sanitization.ɵɵsanitizeHtml,
+  'ɵɵsanitizeStyle': sanitization.ɵɵsanitizeStyle,
+  'ɵɵsanitizeResourceUrl': sanitization.ɵɵsanitizeResourceUrl,
+  'ɵɵsanitizeScript': sanitization.ɵɵsanitizeScript,
+  'ɵɵsanitizeUrl': sanitization.ɵɵsanitizeUrl,
+  'ɵɵsanitizeUrlOrResourceUrl': sanitization.ɵɵsanitizeUrlOrResourceUrl,
+  'ɵɵtrustConstantHtml': sanitization.ɵɵtrustConstantHtml,
+  'ɵɵtrustConstantResourceUrl': sanitization.ɵɵtrustConstantResourceUrl,
+  'ɵɵvalidateIframeAttribute': iframe_attrs_validation.ɵɵvalidateIframeAttribute,
 
-       'forwardRef': forwardRef,
-       'resolveForwardRef': resolveForwardRef,
+  'forwardRef': forwardRef,
+  'resolveForwardRef': resolveForwardRef,
 
-       'ɵɵtwoWayProperty': r3.ɵɵtwoWayProperty,
-       'ɵɵtwoWayBindingSet': r3.ɵɵtwoWayBindingSet,
-       'ɵɵtwoWayListener': r3.ɵɵtwoWayListener,
-     }))();
+  'ɵɵtwoWayProperty': r3.ɵɵtwoWayProperty,
+  'ɵɵtwoWayBindingSet': r3.ɵɵtwoWayBindingSet,
+  'ɵɵtwoWayListener': r3.ɵɵtwoWayListener,
+}))();
diff --git a/packages/core/src/render3/jit/jit_options.ts b/packages/core/src/render3/jit/jit_options.ts
index a7a862fe6d80a..dca7edc004911 100644
--- a/packages/core/src/render3/jit/jit_options.ts
+++ b/packages/core/src/render3/jit/jit_options.ts
@@ -12,27 +12,29 @@ export interface JitCompilerOptions {
   preserveWhitespaces?: boolean;
 }
 
-let jitOptions: JitCompilerOptions|null = null;
+let jitOptions: JitCompilerOptions | null = null;
 
 export function setJitOptions(options: JitCompilerOptions): void {
   if (jitOptions !== null) {
     if (options.defaultEncapsulation !== jitOptions.defaultEncapsulation) {
       ngDevMode &&
-          console.error(
-              'Provided value for `defaultEncapsulation` can not be changed once it has been set.');
+        console.error(
+          'Provided value for `defaultEncapsulation` can not be changed once it has been set.',
+        );
       return;
     }
     if (options.preserveWhitespaces !== jitOptions.preserveWhitespaces) {
       ngDevMode &&
-          console.error(
-              'Provided value for `preserveWhitespaces` can not be changed once it has been set.');
+        console.error(
+          'Provided value for `preserveWhitespaces` can not be changed once it has been set.',
+        );
       return;
     }
   }
   jitOptions = options;
 }
 
-export function getJitOptions(): JitCompilerOptions|null {
+export function getJitOptions(): JitCompilerOptions | null {
   return jitOptions;
 }
 
diff --git a/packages/core/src/render3/jit/module.ts b/packages/core/src/render3/jit/module.ts
index 370c008fbbae6..ee2d1c7f631c7 100644
--- a/packages/core/src/render3/jit/module.ts
+++ b/packages/core/src/render3/jit/module.ts
@@ -6,7 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {getCompilerFacade, JitCompilerUsage, R3InjectorMetadataFacade} from '../../compiler/compiler_facade';
+import {
+  getCompilerFacade,
+  JitCompilerUsage,
+  R3InjectorMetadataFacade,
+} from '../../compiler/compiler_facade';
 import {resolveForwardRef} from '../../di/forward_ref';
 import {NG_INJ_DEF} from '../../di/interface/defs';
 import {ModuleWithProviders} from '../../di/interface/provider';
@@ -19,7 +23,14 @@ import {NgModuleDef, NgModuleTransitiveScopes, NgModuleType} from '../../metadat
 import {deepForEach, flatten} from '../../util/array_utils';
 import {assertDefined} from '../../util/assert';
 import {EMPTY_ARRAY} from '../../util/empty';
-import {GENERATED_COMP_IDS, getComponentDef, getDirectiveDef, getNgModuleDef, getPipeDef, isStandalone} from '../definition';
+import {
+  GENERATED_COMP_IDS,
+  getComponentDef,
+  getDirectiveDef,
+  getNgModuleDef,
+  getPipeDef,
+  isStandalone,
+} from '../definition';
 import {depsTracker, USE_RUNTIME_DEPS_TRACKER_FOR_JIT} from '../deps_tracker/deps_tracker';
 import {NG_COMP_DEF, NG_DIR_DEF, NG_FACTORY_DEF, NG_MOD_DEF, NG_PIPE_DEF} from '../fields';
 import {ComponentDef} from '../interfaces/definition';
@@ -75,7 +86,7 @@ export function flushModuleScopingQueueAsMuchAsPossible() {
  * an array of declarations, it will recurse to check each declaration in that array
  * (which may also be arrays).
  */
-function isResolvedDeclaration(declaration: any[]|Type<any>): boolean {
+function isResolvedDeclaration(declaration: any[] | Type<any>): boolean {
   if (Array.isArray(declaration)) {
     return declaration.every(isResolvedDeclaration);
   }
@@ -108,8 +119,10 @@ export function compileNgModule(moduleType: Type<any>, ngModule: NgModule = {}):
  * root.
  */
 export function compileNgModuleDefs(
-    moduleType: NgModuleType, ngModule: NgModule,
-    allowDuplicateDeclarationsInRoot: boolean = false): void {
+  moduleType: NgModuleType,
+  ngModule: NgModule,
+  allowDuplicateDeclarationsInRoot: boolean = false,
+): void {
   ngDevMode && assertDefined(moduleType, 'Required value moduleType');
   ngDevMode && assertDefined(ngModule, 'Required value ngModule');
   const declarations: Type<any>[] = flatten(ngModule.declarations || EMPTY_ARRAY);
@@ -123,18 +136,21 @@ export function compileNgModuleDefs(
           // go into an infinite loop before we've reached the point where we throw all the errors.
           throw new Error(`'${stringifyForError(moduleType)}' module can't import itself`);
         }
-        const compiler = getCompilerFacade(
-            {usage: JitCompilerUsage.Decorator, kind: 'NgModule', type: moduleType});
+        const compiler = getCompilerFacade({
+          usage: JitCompilerUsage.Decorator,
+          kind: 'NgModule',
+          type: moduleType,
+        });
         ngModuleDef = compiler.compileNgModule(angularCoreEnv, `ng:///${moduleType.name}/ɵmod.js`, {
           type: moduleType,
           bootstrap: flatten(ngModule.bootstrap || EMPTY_ARRAY).map(resolveForwardRef),
           declarations: declarations.map(resolveForwardRef),
           imports: flatten(ngModule.imports || EMPTY_ARRAY)
-                       .map(resolveForwardRef)
-                       .map(expandModuleWithProviders),
+            .map(resolveForwardRef)
+            .map(expandModuleWithProviders),
           exports: flatten(ngModule.exports || EMPTY_ARRAY)
-                       .map(resolveForwardRef)
-                       .map(expandModuleWithProviders),
+            .map(resolveForwardRef)
+            .map(expandModuleWithProviders),
           schemas: ngModule.schemas ? flatten(ngModule.schemas) : null,
           id: ngModule.id || null,
         });
@@ -147,15 +163,18 @@ export function compileNgModuleDefs(
         }
       }
       return ngModuleDef;
-    }
+    },
   });
 
   let ngFactoryDef: any = null;
   Object.defineProperty(moduleType, NG_FACTORY_DEF, {
     get: () => {
       if (ngFactoryDef === null) {
-        const compiler = getCompilerFacade(
-            {usage: JitCompilerUsage.Decorator, kind: 'NgModule', type: moduleType});
+        const compiler = getCompilerFacade({
+          usage: JitCompilerUsage.Decorator,
+          kind: 'NgModule',
+          type: moduleType,
+        });
         ngFactoryDef = compiler.compileFactory(angularCoreEnv, `ng:///${moduleType.name}/ɵfac.js`, {
           name: moduleType.name,
           type: moduleType,
@@ -184,10 +203,16 @@ export function compileNgModuleDefs(
             (ngModule.exports || EMPTY_ARRAY).map(resolveForwardRef),
           ],
         };
-        const compiler = getCompilerFacade(
-            {usage: JitCompilerUsage.Decorator, kind: 'NgModule', type: moduleType});
-        ngInjectorDef =
-            compiler.compileInjector(angularCoreEnv, `ng:///${moduleType.name}/ɵinj.js`, meta);
+        const compiler = getCompilerFacade({
+          usage: JitCompilerUsage.Decorator,
+          kind: 'NgModule',
+          type: moduleType,
+        });
+        ngInjectorDef = compiler.compileInjector(
+          angularCoreEnv,
+          `ng:///${moduleType.name}/ɵinj.js`,
+          meta,
+        );
       }
       return ngInjectorDef;
     },
@@ -198,14 +223,17 @@ export function compileNgModuleDefs(
 
 export function generateStandaloneInDeclarationsError(type: Type<any>, location: string) {
   const prefix = `Unexpected "${stringifyForError(type)}" found in the "declarations" array of the`;
-  const suffix = `"${stringifyForError(type)}" is marked as standalone and can't be declared ` +
-      'in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?';
+  const suffix =
+    `"${stringifyForError(type)}" is marked as standalone and can't be declared ` +
+    'in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?';
   return `${prefix} ${location}, ${suffix}`;
 }
 
 function verifySemanticsOfNgModuleDef(
-    moduleType: NgModuleType, allowDuplicateDeclarationsInRoot: boolean,
-    importingModule?: NgModuleType): void {
+  moduleType: NgModuleType,
+  allowDuplicateDeclarationsInRoot: boolean,
+  importingModule?: NgModuleType,
+): void {
   if (verifiedNgModule.get(moduleType)) return;
 
   // skip verifications of standalone components, directives, and pipes
@@ -217,8 +245,9 @@ function verifySemanticsOfNgModuleDef(
   if (importingModule) {
     ngModuleDef = getNgModuleDef(moduleType)!;
     if (!ngModuleDef) {
-      throw new Error(`Unexpected value '${moduleType.name}' imported by the module '${
-          importingModule.name}'. Please add an @NgModule annotation.`);
+      throw new Error(
+        `Unexpected value '${moduleType.name}' imported by the module '${importingModule.name}'. Please add an @NgModule annotation.`,
+      );
     }
   } else {
     ngModuleDef = getNgModuleDef(moduleType, true);
@@ -226,10 +255,12 @@ function verifySemanticsOfNgModuleDef(
   const errors: string[] = [];
   const declarations = maybeUnwrapFn(ngModuleDef.declarations);
   const imports = maybeUnwrapFn(ngModuleDef.imports);
-  flatten(imports).map(unwrapModuleWithProvidersImports).forEach(modOrStandaloneCmpt => {
-    verifySemanticsOfNgModuleImport(modOrStandaloneCmpt, moduleType);
-    verifySemanticsOfNgModuleDef(modOrStandaloneCmpt, false, moduleType);
-  });
+  flatten(imports)
+    .map(unwrapModuleWithProvidersImports)
+    .forEach((modOrStandaloneCmpt) => {
+      verifySemanticsOfNgModuleImport(modOrStandaloneCmpt, moduleType);
+      verifySemanticsOfNgModuleDef(modOrStandaloneCmpt, false, moduleType);
+    });
   const exports = maybeUnwrapFn(ngModuleDef.exports);
   declarations.forEach(verifyDeclarationsHaveDefinitions);
   declarations.forEach(verifyDirectivesHaveSelector);
@@ -239,12 +270,14 @@ function verifySemanticsOfNgModuleDef(
     ...flatten(imports.map(computeCombinedExports)).map(resolveForwardRef),
   ];
   exports.forEach(verifyExportsAreDeclaredOrReExported);
-  declarations.forEach(decl => verifyDeclarationIsUnique(decl, allowDuplicateDeclarationsInRoot));
+  declarations.forEach((decl) => verifyDeclarationIsUnique(decl, allowDuplicateDeclarationsInRoot));
 
   const ngModule = getAnnotation<NgModule>(moduleType, 'NgModule');
   if (ngModule) {
     ngModule.imports &&
-        flatten(ngModule.imports).map(unwrapModuleWithProvidersImports).forEach(mod => {
+      flatten(ngModule.imports)
+        .map(unwrapModuleWithProvidersImports)
+        .forEach((mod) => {
           verifySemanticsOfNgModuleImport(mod, moduleType);
           verifySemanticsOfNgModuleDef(mod, false, moduleType);
         });
@@ -261,8 +294,11 @@ function verifySemanticsOfNgModuleDef(
     type = resolveForwardRef(type);
     const def = getComponentDef(type) || getDirectiveDef(type) || getPipeDef(type);
     if (!def) {
-      errors.push(`Unexpected value '${stringifyForError(type)}' declared by the module '${
-          stringifyForError(moduleType)}'. Please add a @Pipe/@Directive/@Component annotation.`);
+      errors.push(
+        `Unexpected value '${stringifyForError(type)}' declared by the module '${stringifyForError(
+          moduleType,
+        )}'. Please add a @Pipe/@Directive/@Component annotation.`,
+      );
     }
   }
 
@@ -285,15 +321,20 @@ function verifySemanticsOfNgModuleDef(
 
   function verifyExportsAreDeclaredOrReExported(type: Type<any>) {
     type = resolveForwardRef(type);
-    const kind = getComponentDef(type) && 'component' || getDirectiveDef(type) && 'directive' ||
-        getPipeDef(type) && 'pipe';
+    const kind =
+      (getComponentDef(type) && 'component') ||
+      (getDirectiveDef(type) && 'directive') ||
+      (getPipeDef(type) && 'pipe');
     if (kind) {
       // only checked if we are declared as Component, Directive, or Pipe
       // Modules don't need to be declared or imported.
       if (combinedDeclarations.lastIndexOf(type) === -1) {
         // We are exporting something which we don't explicitly declare or import.
-        errors.push(`Can't export ${kind} ${stringifyForError(type)} from ${
-            stringifyForError(moduleType)} as it was neither declared nor imported!`);
+        errors.push(
+          `Can't export ${kind} ${stringifyForError(type)} from ${stringifyForError(
+            moduleType,
+          )} as it was neither declared nor imported!`,
+        );
       }
     }
   }
@@ -305,13 +346,16 @@ function verifySemanticsOfNgModuleDef(
       if (!suppressErrors) {
         const modules = [existingModule, moduleType].map(stringifyForError).sort();
         errors.push(
-            `Type ${stringifyForError(type)} is part of the declarations of 2 modules: ${
-                modules[0]} and ${modules[1]}! ` +
+          `Type ${stringifyForError(type)} is part of the declarations of 2 modules: ${
+            modules[0]
+          } and ${modules[1]}! ` +
             `Please consider moving ${stringifyForError(type)} to a higher module that imports ${
-                modules[0]} and ${modules[1]}. ` +
-            `You can also create a new NgModule that exports and includes ${
-                stringifyForError(
-                    type)} then import that NgModule in ${modules[0]} and ${modules[1]}.`);
+              modules[0]
+            } and ${modules[1]}. ` +
+            `You can also create a new NgModule that exports and includes ${stringifyForError(
+              type,
+            )} then import that NgModule in ${modules[0]} and ${modules[1]}.`,
+        );
       }
     } else {
       // Mark type as having owner.
@@ -323,9 +367,11 @@ function verifySemanticsOfNgModuleDef(
     type = resolveForwardRef(type);
     const existingModule = ownerNgModule.get(type);
     if (!existingModule && !isStandalone(type)) {
-      errors.push(`Component ${
-          stringifyForError(
-              type)} is not part of any NgModule or the module has not been imported into your module.`);
+      errors.push(
+        `Component ${stringifyForError(
+          type,
+        )} is not part of any NgModule or the module has not been imported into your module.`,
+      );
     }
   }
 
@@ -338,9 +384,10 @@ function verifySemanticsOfNgModuleDef(
       // Note: this error should be the same as the
       // `NGMODULE_BOOTSTRAP_IS_STANDALONE` one in AOT compiler.
       errors.push(
-          `The \`${stringifyForError(type)}\` class is a standalone component, which can ` +
+        `The \`${stringifyForError(type)}\` class is a standalone component, which can ` +
           `not be used in the \`@NgModule.bootstrap\` array. Use the \`bootstrapApplication\` ` +
-          `function for bootstrap instead.`);
+          `function for bootstrap instead.`,
+      );
     }
   }
 
@@ -349,38 +396,43 @@ function verifySemanticsOfNgModuleDef(
 
     const directiveDef = getComponentDef(type) || getDirectiveDef(type);
     if (directiveDef !== null && !directiveDef.standalone) {
-      throw new Error(`Unexpected directive '${type.name}' imported by the module '${
-          importingModule.name}'. Please add an @NgModule annotation.`);
+      throw new Error(
+        `Unexpected directive '${type.name}' imported by the module '${importingModule.name}'. Please add an @NgModule annotation.`,
+      );
     }
 
     const pipeDef = getPipeDef(type);
     if (pipeDef !== null && !pipeDef.standalone) {
-      throw new Error(`Unexpected pipe '${type.name}' imported by the module '${
-          importingModule.name}'. Please add an @NgModule annotation.`);
+      throw new Error(
+        `Unexpected pipe '${type.name}' imported by the module '${importingModule.name}'. Please add an @NgModule annotation.`,
+      );
     }
   }
 }
 
-function unwrapModuleWithProvidersImports(typeOrWithProviders: NgModuleType<any>|
-                                          {ngModule: NgModuleType<any>}): NgModuleType<any> {
+function unwrapModuleWithProvidersImports(
+  typeOrWithProviders: NgModuleType<any> | {ngModule: NgModuleType<any>},
+): NgModuleType<any> {
   typeOrWithProviders = resolveForwardRef(typeOrWithProviders);
   return (typeOrWithProviders as any).ngModule || typeOrWithProviders;
 }
 
-function getAnnotation<T>(type: any, name: string): T|null {
-  let annotation: T|null = null;
+function getAnnotation<T>(type: any, name: string): T | null {
+  let annotation: T | null = null;
   collect(type.__annotations__);
   collect(type.decorators);
   return annotation;
 
-  function collect(annotations: any[]|null) {
+  function collect(annotations: any[] | null) {
     if (annotations) {
       annotations.forEach(readAnnotation);
     }
   }
 
-  function readAnnotation(
-      decorator: {type: {prototype: {ngMetadataName: string}, args: any[]}, args: any}): void {
+  function readAnnotation(decorator: {
+    type: {prototype: {ngMetadataName: string}; args: any[]};
+    args: any;
+  }): void {
     if (!annotation) {
       const proto = Object.getPrototypeOf(decorator);
       if (proto.ngMetadataName == name) {
@@ -425,15 +477,17 @@ function computeCombinedExports(type: Type<any>): Type<any>[] {
     return [type];
   }
 
-  return flatten(maybeUnwrapFn(ngModuleDef.exports).map((type) => {
-    const ngModuleDef = getNgModuleDef(type);
-    if (ngModuleDef) {
-      verifySemanticsOfNgModuleDef(type as any as NgModuleType, false);
-      return computeCombinedExports(type);
-    } else {
-      return type;
-    }
-  }));
+  return flatten(
+    maybeUnwrapFn(ngModuleDef.exports).map((type) => {
+      const ngModuleDef = getNgModuleDef(type);
+      if (ngModuleDef) {
+        verifySemanticsOfNgModuleDef(type as any as NgModuleType, false);
+        return computeCombinedExports(type);
+      } else {
+        return type;
+      }
+    }),
+  );
 }
 
 /**
@@ -446,17 +500,19 @@ function setScopeOnDeclaredComponents(moduleType: Type<any>, ngModule: NgModule)
 
   const transitiveScopes = transitiveScopesFor(moduleType);
 
-  declarations.forEach(declaration => {
+  declarations.forEach((declaration) => {
     declaration = resolveForwardRef(declaration);
     if (declaration.hasOwnProperty(NG_COMP_DEF)) {
       // A `ɵcmp` field exists - go ahead and patch the component directly.
-      const component = declaration as Type<any>& {ɵcmp: ComponentDef<any>};
+      const component = declaration as Type<any> & {ɵcmp: ComponentDef<any>};
       const componentDef = getComponentDef(component)!;
       patchComponentDefWithScope(componentDef, transitiveScopes);
     } else if (
-        !declaration.hasOwnProperty(NG_DIR_DEF) && !declaration.hasOwnProperty(NG_PIPE_DEF)) {
+      !declaration.hasOwnProperty(NG_DIR_DEF) &&
+      !declaration.hasOwnProperty(NG_PIPE_DEF)
+    ) {
       // Set `ngSelectorScope` for future reference when the component compilation finishes.
-      (declaration as Type<any>& {ngSelectorScope?: any}).ngSelectorScope = moduleType;
+      (declaration as Type<any> & {ngSelectorScope?: any}).ngSelectorScope = moduleType;
     }
   });
 }
@@ -466,15 +522,17 @@ function setScopeOnDeclaredComponents(moduleType: Type<any>, ngModule: NgModule)
  * a given module.
  */
 export function patchComponentDefWithScope<C>(
-    componentDef: ComponentDef<C>, transitiveScopes: NgModuleTransitiveScopes) {
+  componentDef: ComponentDef<C>,
+  transitiveScopes: NgModuleTransitiveScopes,
+) {
   componentDef.directiveDefs = () =>
-      Array.from(transitiveScopes.compilation.directives)
-          .map(
-              dir => dir.hasOwnProperty(NG_COMP_DEF) ? getComponentDef(dir)! : getDirectiveDef(dir)!
-              )
-          .filter(def => !!def);
+    Array.from(transitiveScopes.compilation.directives)
+      .map((dir) =>
+        dir.hasOwnProperty(NG_COMP_DEF) ? getComponentDef(dir)! : getDirectiveDef(dir)!,
+      )
+      .filter((def) => !!def);
   componentDef.pipeDefs = () =>
-      Array.from(transitiveScopes.compilation.pipes).map(pipe => getPipeDef(pipe)!);
+    Array.from(transitiveScopes.compilation.pipes).map((pipe) => getPipeDef(pipe)!);
   componentDef.schemas = transitiveScopes.schemas;
 
   // Since we avoid Components/Directives/Pipes recompiling in case there are no overrides, we
@@ -568,12 +626,12 @@ export function transitiveScopesForNgModule<T>(moduleType: Type<T>): NgModuleTra
     // When this module imports another, the imported module's exported directives and pipes are
     // added to the compilation scope of this module.
     const importedScope = transitiveScopesFor(imported);
-    importedScope.exported.directives.forEach(entry => scopes.compilation.directives.add(entry));
-    importedScope.exported.pipes.forEach(entry => scopes.compilation.pipes.add(entry));
+    importedScope.exported.directives.forEach((entry) => scopes.compilation.directives.add(entry));
+    importedScope.exported.pipes.forEach((entry) => scopes.compilation.pipes.add(entry));
   });
 
-  maybeUnwrapFn(def.declarations).forEach(declared => {
-    const declaredWithDefs = declared as Type<any>& {
+  maybeUnwrapFn(def.declarations).forEach((declared) => {
+    const declaredWithDefs = declared as Type<any> & {
       ɵpipe?: any;
     };
 
@@ -588,7 +646,7 @@ export function transitiveScopesForNgModule<T>(moduleType: Type<T>): NgModuleTra
   });
 
   maybeUnwrapFn(def.exports).forEach(<E>(exported: Type<E>) => {
-    const exportedType = exported as Type<E>& {
+    const exportedType = exported as Type<E> & {
       // Components, Directives, NgModules, and Pipes can all be exported.
       ɵcmp?: any;
       ɵdir?: any;
@@ -602,11 +660,11 @@ export function transitiveScopesForNgModule<T>(moduleType: Type<T>): NgModuleTra
       // 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 = transitiveScopesFor(exportedType);
-      exportedScope.exported.directives.forEach(entry => {
+      exportedScope.exported.directives.forEach((entry) => {
         scopes.compilation.directives.add(entry);
         scopes.exported.directives.add(entry);
       });
-      exportedScope.exported.pipes.forEach(entry => {
+      exportedScope.exported.pipes.forEach((entry) => {
         scopes.compilation.pipes.add(entry);
         scopes.exported.pipes.add(entry);
       });
@@ -621,7 +679,7 @@ export function transitiveScopesForNgModule<T>(moduleType: Type<T>): NgModuleTra
   return scopes;
 }
 
-function expandModuleWithProviders(value: Type<any>|ModuleWithProviders<{}>): Type<any> {
+function expandModuleWithProviders(value: Type<any> | ModuleWithProviders<{}>): Type<any> {
   if (isModuleWithProviders(value)) {
     return value.ngModule;
   }
diff --git a/packages/core/src/render3/jit/partial.ts b/packages/core/src/render3/jit/partial.ts
index 58f132487c324..e049ddaee0522 100644
--- a/packages/core/src/render3/jit/partial.ts
+++ b/packages/core/src/render3/jit/partial.ts
@@ -6,7 +6,18 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {FactoryTarget, getCompilerFacade, JitCompilerUsage, R3DeclareComponentFacade, R3DeclareDirectiveFacade, R3DeclareFactoryFacade, R3DeclareInjectableFacade, R3DeclareInjectorFacade, R3DeclareNgModuleFacade, R3DeclarePipeFacade} from '../../compiler/compiler_facade';
+import {
+  FactoryTarget,
+  getCompilerFacade,
+  JitCompilerUsage,
+  R3DeclareComponentFacade,
+  R3DeclareDirectiveFacade,
+  R3DeclareFactoryFacade,
+  R3DeclareInjectableFacade,
+  R3DeclareInjectorFacade,
+  R3DeclareNgModuleFacade,
+  R3DeclarePipeFacade,
+} from '../../compiler/compiler_facade';
 import {Type} from '../../interface/type';
 import {setClassMetadata, setClassMetadataAsync} from '../metadata';
 
@@ -18,10 +29,16 @@ import {angularCoreEnv} from './environment';
  * @codeGenApi
  */
 export function ɵɵngDeclareDirective(decl: R3DeclareDirectiveFacade): unknown {
-  const compiler = getCompilerFacade(
-      {usage: JitCompilerUsage.PartialDeclaration, kind: 'directive', type: decl.type});
+  const compiler = getCompilerFacade({
+    usage: JitCompilerUsage.PartialDeclaration,
+    kind: 'directive',
+    type: decl.type,
+  });
   return compiler.compileDirectiveDeclaration(
-      angularCoreEnv, `ng:///${decl.type.name}/ɵfac.js`, decl);
+    angularCoreEnv,
+    `ng:///${decl.type.name}/ɵfac.js`,
+    decl,
+  );
 }
 
 /**
@@ -30,12 +47,17 @@ export function ɵɵngDeclareDirective(decl: R3DeclareDirectiveFacade): unknown
  * @codeGenApi
  */
 export function ɵɵngDeclareClassMetadata(decl: {
-  type: Type<any>; decorators: any[];
+  type: Type<any>;
+  decorators: any[];
   ctorParameters?: () => any[];
   propDecorators?: {[field: string]: any};
 }): void {
   setClassMetadata(
-      decl.type, decl.decorators, decl.ctorParameters ?? null, decl.propDecorators ?? null);
+    decl.type,
+    decl.decorators,
+    decl.ctorParameters ?? null,
+    decl.propDecorators ?? null,
+  );
 }
 
 /**
@@ -44,13 +66,13 @@ export function ɵɵngDeclareClassMetadata(decl: {
  * @codeGenApi
  */
 export function ɵɵngDeclareClassMetadataAsync(decl: {
-  type: Type<any>,
-  resolveDeferredDeps: () => Promise<Type<unknown>>[],
+  type: Type<any>;
+  resolveDeferredDeps: () => Promise<Type<unknown>>[];
   resolveMetadata: (...types: Type<unknown>[]) => {
     decorators: any[];
-    ctorParameters: (() => any[])|null;
-    propDecorators: ({[field: string]: any})|null;
-  },
+    ctorParameters: (() => any[]) | null;
+    propDecorators: {[field: string]: any} | null;
+  };
 }): void {
   setClassMetadataAsync(decl.type, decl.resolveDeferredDeps, (...types: Type<unknown>[]) => {
     const meta = decl.resolveMetadata(...types);
@@ -64,10 +86,16 @@ export function ɵɵngDeclareClassMetadataAsync(decl: {
  * @codeGenApi
  */
 export function ɵɵngDeclareComponent(decl: R3DeclareComponentFacade): unknown {
-  const compiler = getCompilerFacade(
-      {usage: JitCompilerUsage.PartialDeclaration, kind: 'component', type: decl.type});
+  const compiler = getCompilerFacade({
+    usage: JitCompilerUsage.PartialDeclaration,
+    kind: 'component',
+    type: decl.type,
+  });
   return compiler.compileComponentDeclaration(
-      angularCoreEnv, `ng:///${decl.type.name}/ɵcmp.js`, decl);
+    angularCoreEnv,
+    `ng:///${decl.type.name}/ɵcmp.js`,
+    decl,
+  );
 }
 
 /**
@@ -79,10 +107,13 @@ export function ɵɵngDeclareFactory(decl: R3DeclareFactoryFacade): unknown {
   const compiler = getCompilerFacade({
     usage: JitCompilerUsage.PartialDeclaration,
     kind: getFactoryKind(decl.target),
-    type: decl.type
+    type: decl.type,
   });
   return compiler.compileFactoryDeclaration(
-      angularCoreEnv, `ng:///${decl.type.name}/ɵfac.js`, decl);
+    angularCoreEnv,
+    `ng:///${decl.type.name}/ɵfac.js`,
+    decl,
+  );
 }
 
 function getFactoryKind(target: FactoryTarget) {
@@ -106,10 +137,16 @@ function getFactoryKind(target: FactoryTarget) {
  * @codeGenApi
  */
 export function ɵɵngDeclareInjectable(decl: R3DeclareInjectableFacade): unknown {
-  const compiler = getCompilerFacade(
-      {usage: JitCompilerUsage.PartialDeclaration, kind: 'injectable', type: decl.type});
+  const compiler = getCompilerFacade({
+    usage: JitCompilerUsage.PartialDeclaration,
+    kind: 'injectable',
+    type: decl.type,
+  });
   return compiler.compileInjectableDeclaration(
-      angularCoreEnv, `ng:///${decl.type.name}/ɵprov.js`, decl);
+    angularCoreEnv,
+    `ng:///${decl.type.name}/ɵprov.js`,
+    decl,
+  );
 }
 
 /**
@@ -123,10 +160,16 @@ export {FactoryTarget} from '../../compiler/compiler_facade';
  * @codeGenApi
  */
 export function ɵɵngDeclareInjector(decl: R3DeclareInjectorFacade): unknown {
-  const compiler = getCompilerFacade(
-      {usage: JitCompilerUsage.PartialDeclaration, kind: 'NgModule', type: decl.type});
+  const compiler = getCompilerFacade({
+    usage: JitCompilerUsage.PartialDeclaration,
+    kind: 'NgModule',
+    type: decl.type,
+  });
   return compiler.compileInjectorDeclaration(
-      angularCoreEnv, `ng:///${decl.type.name}/ɵinj.js`, decl);
+    angularCoreEnv,
+    `ng:///${decl.type.name}/ɵinj.js`,
+    decl,
+  );
 }
 
 /**
@@ -135,10 +178,16 @@ export function ɵɵngDeclareInjector(decl: R3DeclareInjectorFacade): unknown {
  * @codeGenApi
  */
 export function ɵɵngDeclareNgModule(decl: R3DeclareNgModuleFacade): unknown {
-  const compiler = getCompilerFacade(
-      {usage: JitCompilerUsage.PartialDeclaration, kind: 'NgModule', type: decl.type});
+  const compiler = getCompilerFacade({
+    usage: JitCompilerUsage.PartialDeclaration,
+    kind: 'NgModule',
+    type: decl.type,
+  });
   return compiler.compileNgModuleDeclaration(
-      angularCoreEnv, `ng:///${decl.type.name}/ɵmod.js`, decl);
+    angularCoreEnv,
+    `ng:///${decl.type.name}/ɵmod.js`,
+    decl,
+  );
 }
 
 /**
@@ -147,7 +196,10 @@ export function ɵɵngDeclareNgModule(decl: R3DeclareNgModuleFacade): unknown {
  * @codeGenApi
  */
 export function ɵɵngDeclarePipe(decl: R3DeclarePipeFacade): unknown {
-  const compiler = getCompilerFacade(
-      {usage: JitCompilerUsage.PartialDeclaration, kind: 'pipe', type: decl.type});
+  const compiler = getCompilerFacade({
+    usage: JitCompilerUsage.PartialDeclaration,
+    kind: 'pipe',
+    type: decl.type,
+  });
   return compiler.compilePipeDeclaration(angularCoreEnv, `ng:///${decl.type.name}/ɵpipe.js`, decl);
 }
diff --git a/packages/core/src/render3/jit/pipe.ts b/packages/core/src/render3/jit/pipe.ts
index c5dc68001ba69..cb244ead1bcb8 100644
--- a/packages/core/src/render3/jit/pipe.ts
+++ b/packages/core/src/render3/jit/pipe.ts
@@ -6,7 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {getCompilerFacade, JitCompilerUsage, R3PipeMetadataFacade} from '../../compiler/compiler_facade';
+import {
+  getCompilerFacade,
+  JitCompilerUsage,
+  R3PipeMetadataFacade,
+} from '../../compiler/compiler_facade';
 import {reflectDependencies} from '../../di/jit/util';
 import {Type} from '../../interface/type';
 import {Pipe} from '../../metadata/directives';
@@ -22,14 +26,17 @@ export function compilePipe(type: Type<any>, meta: Pipe): void {
     get: () => {
       if (ngFactoryDef === null) {
         const metadata = getPipeMetadata(type, meta);
-        const compiler = getCompilerFacade(
-            {usage: JitCompilerUsage.Decorator, kind: 'pipe', type: metadata.type});
+        const compiler = getCompilerFacade({
+          usage: JitCompilerUsage.Decorator,
+          kind: 'pipe',
+          type: metadata.type,
+        });
         ngFactoryDef = compiler.compileFactory(angularCoreEnv, `ng:///${metadata.name}/ɵfac.js`, {
           name: metadata.name,
           type: metadata.type,
           typeArgumentCount: 0,
           deps: reflectDependencies(type),
-          target: compiler.FactoryTarget.Pipe
+          target: compiler.FactoryTarget.Pipe,
         });
       }
       return ngFactoryDef;
@@ -42,10 +49,16 @@ export function compilePipe(type: Type<any>, meta: Pipe): void {
     get: () => {
       if (ngPipeDef === null) {
         const metadata = getPipeMetadata(type, meta);
-        const compiler = getCompilerFacade(
-            {usage: JitCompilerUsage.Decorator, kind: 'pipe', type: metadata.type});
-        ngPipeDef =
-            compiler.compilePipe(angularCoreEnv, `ng:///${metadata.name}/ɵpipe.js`, metadata);
+        const compiler = getCompilerFacade({
+          usage: JitCompilerUsage.Decorator,
+          kind: 'pipe',
+          type: metadata.type,
+        });
+        ngPipeDef = compiler.compilePipe(
+          angularCoreEnv,
+          `ng:///${metadata.name}/ɵpipe.js`,
+          metadata,
+        );
       }
       return ngPipeDef;
     },
diff --git a/packages/core/src/render3/jit/util.ts b/packages/core/src/render3/jit/util.ts
index b844b16c4f62f..ef3220819ac7e 100644
--- a/packages/core/src/render3/jit/util.ts
+++ b/packages/core/src/render3/jit/util.ts
@@ -18,7 +18,7 @@ export function isModuleWithProviders(value: any): value is ModuleWithProviders<
   return (value as {ngModule?: any}).ngModule !== undefined;
 }
 
-export function isNgModule<T>(value: Type<T>): value is Type<T>&{ɵmod: NgModuleDef<T>} {
+export function isNgModule<T>(value: Type<T>): value is Type<T> & {ɵmod: NgModuleDef<T>} {
   return !!getNgModuleDef(value);
 }
 
@@ -45,9 +45,13 @@ export function verifyStandaloneImport(depType: Type<unknown>, importingType: Ty
   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}".`);
+      throw new Error(
+        `Expected forwardRef function, imported from "${stringifyForError(
+          importingType,
+        )}", to return a standalone entity or NgModule but got "${
+          stringifyForError(depType) || depType
+        }".`,
+      );
     }
   }
 
@@ -56,21 +60,28 @@ export function verifyStandaloneImport(depType: Type<unknown>, importingType: Ty
     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?`);
+        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.`);
+        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?`);
+        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?`,
+        );
       }
     }
   }
diff --git a/packages/core/src/render3/list_reconciliation.ts b/packages/core/src/render3/list_reconciliation.ts
index 250aab0a6c2a8..09c6509897e1d 100644
--- a/packages/core/src/render3/list_reconciliation.ts
+++ b/packages/core/src/render3/list_reconciliation.ts
@@ -51,8 +51,12 @@ export abstract class LiveCollection<T, V> {
 }
 
 function valuesMatching<V>(
-    liveIdx: number, liveValue: V, newIdx: number, newValue: V,
-    trackBy: TrackByFunction<V>): number {
+  liveIdx: number,
+  liveValue: V,
+  newIdx: number,
+  newValue: V,
+  trackBy: TrackByFunction<V>,
+): number {
   if (liveIdx === newIdx && Object.is(liveValue, newValue)) {
     // matching and no value identity to update
     return 1;
@@ -98,10 +102,12 @@ function recordDuplicateKeys(keyToIdx: Map<unknown, Set<number>>, key: unknown,
  *     incoming collection;
  */
 export function reconcile<T, V>(
-    liveCollection: LiveCollection<T, V>, newCollection: Iterable<V>|undefined|null,
-    trackByFn: TrackByFunction<V>): void {
-  let detachedItems: UniqueValueMultiKeyMap<unknown, T>|undefined = undefined;
-  let liveKeysInTheFuture: Set<unknown>|undefined = undefined;
+  liveCollection: LiveCollection<T, V>,
+  newCollection: Iterable<V> | undefined | null,
+  trackByFn: TrackByFunction<V>,
+): void {
+  let detachedItems: UniqueValueMultiKeyMap<unknown, T> | undefined = undefined;
+  let liveKeysInTheFuture: Set<unknown> | undefined = undefined;
 
   let liveStartIdx = 0;
   let liveEndIdx = liveCollection.length - 1;
@@ -120,8 +126,13 @@ export function reconcile<T, V>(
         recordDuplicateKeys(duplicateKeys!, trackByFn(liveStartIdx, newStartValue), liveStartIdx);
       }
 
-      const isStartMatching =
-          valuesMatching(liveStartIdx, liveStartValue, liveStartIdx, newStartValue, trackByFn);
+      const isStartMatching = valuesMatching(
+        liveStartIdx,
+        liveStartValue,
+        liveStartIdx,
+        newStartValue,
+        trackByFn,
+      );
       if (isStartMatching !== 0) {
         if (isStartMatching < 0) {
           liveCollection.updateValue(liveStartIdx, newStartValue);
@@ -139,8 +150,13 @@ export function reconcile<T, V>(
         recordDuplicateKeys(duplicateKeys!, trackByFn(newEndIdx, newEndValue), newEndIdx);
       }
 
-      const isEndMatching =
-          valuesMatching(liveEndIdx, liveEndValue, newEndIdx, newEndValue, trackByFn);
+      const isEndMatching = valuesMatching(
+        liveEndIdx,
+        liveEndValue,
+        newEndIdx,
+        newEndValue,
+        trackByFn,
+      );
       if (isEndMatching !== 0) {
         if (isEndMatching < 0) {
           liveCollection.updateValue(liveEndIdx, newEndValue);
@@ -175,8 +191,12 @@ export function reconcile<T, V>(
       // Fallback to the slow path: we need to learn more about the content of the live and new
       // collections.
       detachedItems ??= new UniqueValueMultiKeyMap();
-      liveKeysInTheFuture ??=
-          initLiveItemsInTheFuture(liveCollection, liveStartIdx, liveEndIdx, trackByFn);
+      liveKeysInTheFuture ??= initLiveItemsInTheFuture(
+        liveCollection,
+        liveStartIdx,
+        liveEndIdx,
+        trackByFn,
+      );
 
       // Check if I'm inserting a previously detached item: if so, attach it here
       if (attachPreviouslyDetached(liveCollection, detachedItems, liveStartIdx, newStartKey)) {
@@ -202,10 +222,14 @@ export function reconcile<T, V>(
     // - more items in the new collection => insert
     while (liveStartIdx <= newEndIdx) {
       createOrAttach(
-          liveCollection, detachedItems, trackByFn, liveStartIdx, newCollection[liveStartIdx]);
+        liveCollection,
+        detachedItems,
+        trackByFn,
+        liveStartIdx,
+        newCollection[liveStartIdx],
+      );
       liveStartIdx++;
     }
-
   } else if (newCollection != null) {
     // iterable - immediately fallback to the slow path
     const newCollectionIterator = newCollection[Symbol.iterator]();
@@ -218,8 +242,13 @@ export function reconcile<T, V>(
         recordDuplicateKeys(duplicateKeys!, trackByFn(liveStartIdx, newValue), liveStartIdx);
       }
 
-      const isStartMatching =
-          valuesMatching(liveStartIdx, liveValue, liveStartIdx, newValue, trackByFn);
+      const isStartMatching = valuesMatching(
+        liveStartIdx,
+        liveValue,
+        liveStartIdx,
+        newValue,
+        trackByFn,
+      );
       if (isStartMatching !== 0) {
         // found a match - move on, but update value
         if (isStartMatching < 0) {
@@ -229,8 +258,12 @@ export function reconcile<T, V>(
         newIterationResult = newCollectionIterator.next();
       } else {
         detachedItems ??= new UniqueValueMultiKeyMap();
-        liveKeysInTheFuture ??=
-            initLiveItemsInTheFuture(liveCollection, liveStartIdx, liveEndIdx, trackByFn);
+        liveKeysInTheFuture ??= initLiveItemsInTheFuture(
+          liveCollection,
+          liveStartIdx,
+          liveEndIdx,
+          trackByFn,
+        );
 
         // Check if I'm inserting a previously detached item: if so, attach it here
         const newKey = trackByFn(liveStartIdx, newValue);
@@ -257,8 +290,12 @@ export function reconcile<T, V>(
     // previously detached one
     while (!newIterationResult.done) {
       createOrAttach(
-          liveCollection, detachedItems, trackByFn, liveCollection.length,
-          newIterationResult.value);
+        liveCollection,
+        detachedItems,
+        trackByFn,
+        liveCollection.length,
+        newIterationResult.value,
+      );
       newIterationResult = newCollectionIterator.next();
     }
   }
@@ -269,9 +306,8 @@ export function reconcile<T, V>(
     liveCollection.destroy(liveCollection.detach(liveEndIdx--));
   }
 
-
   // - destroy items that were detached but never attached again.
-  detachedItems?.forEach(item => {
+  detachedItems?.forEach((item) => {
     liveCollection.destroy(item);
   });
 
@@ -283,17 +319,21 @@ export function reconcile<T, V>(
         const idx = [...idxSet].sort((a, b) => a - b);
         for (let i = 1; i < idx.length; i++) {
           duplicatedKeysMsg.push(
-              `key "${stringifyForError(key)}" at index "${idx[i - 1]}" and "${idx[i]}"`);
+            `key "${stringifyForError(key)}" at index "${idx[i - 1]}" and "${idx[i]}"`,
+          );
         }
       }
     }
 
     if (duplicatedKeysMsg.length > 0) {
       const message = formatRuntimeError(
-          RuntimeErrorCode.LOOP_TRACK_DUPLICATE_KEYS,
-          'The provided track expression resulted in duplicated keys for a given collection. ' +
-              'Adjust the tracking expression such that it uniquely identifies all the items in the collection. ' +
-              'Duplicated keys were: \n' + duplicatedKeysMsg.join(', \n') + '.');
+        RuntimeErrorCode.LOOP_TRACK_DUPLICATE_KEYS,
+        'The provided track expression resulted in duplicated keys for a given collection. ' +
+          'Adjust the tracking expression such that it uniquely identifies all the items in the collection. ' +
+          'Duplicated keys were: \n' +
+          duplicatedKeysMsg.join(', \n') +
+          '.',
+      );
 
       // tslint:disable-next-line:no-console
       console.warn(message);
@@ -302,9 +342,11 @@ export function reconcile<T, V>(
 }
 
 function attachPreviouslyDetached<T, V>(
-    prevCollection: LiveCollection<T, V>,
-    detachedItems: UniqueValueMultiKeyMap<unknown, T>|undefined, index: number,
-    key: unknown): boolean {
+  prevCollection: LiveCollection<T, V>,
+  detachedItems: UniqueValueMultiKeyMap<unknown, T> | undefined,
+  index: number,
+  key: unknown,
+): boolean {
   if (detachedItems !== undefined && detachedItems.has(key)) {
     prevCollection.attach(index, detachedItems.get(key)!);
     detachedItems.delete(key);
@@ -314,9 +356,12 @@ function attachPreviouslyDetached<T, V>(
 }
 
 function createOrAttach<T, V>(
-    liveCollection: LiveCollection<T, V>,
-    detachedItems: UniqueValueMultiKeyMap<unknown, T>|undefined,
-    trackByFn: TrackByFunction<unknown>, index: number, value: V) {
+  liveCollection: LiveCollection<T, V>,
+  detachedItems: UniqueValueMultiKeyMap<unknown, T> | undefined,
+  trackByFn: TrackByFunction<unknown>,
+  index: number,
+  value: V,
+) {
   if (!attachPreviouslyDetached(liveCollection, detachedItems, index, trackByFn(index, value))) {
     const newItem = liveCollection.create(index, value);
     liveCollection.attach(index, newItem);
@@ -326,8 +371,11 @@ function createOrAttach<T, V>(
 }
 
 function initLiveItemsInTheFuture<T>(
-    liveCollection: LiveCollection<unknown, unknown>, start: number, end: number,
-    trackByFn: TrackByFunction<unknown>): Set<unknown> {
+  liveCollection: LiveCollection<unknown, unknown>,
+  start: number,
+  end: number,
+  trackByFn: TrackByFunction<unknown>,
+): Set<unknown> {
   const keys = new Set();
   for (let i = start; i <= end; i++) {
     keys.add(trackByFn(i, liveCollection.at(i)));
@@ -353,7 +401,7 @@ export class UniqueValueMultiKeyMap<K, V> {
   // A map that acts as a linked list of values - each value maps to the next value in this "linked
   // list" (this only works if values are unique). Allocated lazily to avoid memory consumption when
   // there are no duplicated values.
-  private _vMap: Map<V, V>|undefined = undefined;
+  private _vMap: Map<V, V> | undefined = undefined;
 
   has(key: K): boolean {
     return this.kvMap.has(key);
@@ -373,7 +421,7 @@ export class UniqueValueMultiKeyMap<K, V> {
     return true;
   }
 
-  get(key: K): V|undefined {
+  get(key: K): V | undefined {
     return this.kvMap.get(key);
   }
 
@@ -381,8 +429,7 @@ export class UniqueValueMultiKeyMap<K, V> {
     if (this.kvMap.has(key)) {
       let prevValue = this.kvMap.get(key)!;
       ngDevMode &&
-          assertNotSame(
-              prevValue, value, `Detected a duplicated value ${value} for the key ${key}`);
+        assertNotSame(prevValue, value, `Detected a duplicated value ${value} for the key ${key}`);
 
       if (this._vMap === undefined) {
         this._vMap = new Map();
diff --git a/packages/core/src/render3/local_compilation.ts b/packages/core/src/render3/local_compilation.ts
index c03d5abb118cf..aa07a6acc9e53 100644
--- a/packages/core/src/render3/local_compilation.ts
+++ b/packages/core/src/render3/local_compilation.ts
@@ -7,18 +7,24 @@
  */
 
 import {depsTracker} from './deps_tracker/deps_tracker';
-import {ComponentType, DependencyTypeList, RawScopeInfoFromDecorator} from './interfaces/definition';
+import {
+  ComponentType,
+  DependencyTypeList,
+  RawScopeInfoFromDecorator,
+} from './interfaces/definition';
 
 export function ɵɵgetComponentDepsFactory(
-    type: ComponentType<any>, rawImports?: RawScopeInfoFromDecorator[]): () => DependencyTypeList {
+  type: ComponentType<any>,
+  rawImports?: RawScopeInfoFromDecorator[],
+): () => DependencyTypeList {
   return () => {
     try {
       return depsTracker.getComponentDependencies(type, rawImports).dependencies;
     } catch (e) {
       console.error(
-          `Computing dependencies in local compilation mode for the component "${
-              type.name}" failed with the exception:`,
-          e);
+        `Computing dependencies in local compilation mode for the component "${type.name}" failed with the exception:`,
+        e,
+      );
       throw e;
     }
   };
diff --git a/packages/core/src/render3/metadata.ts b/packages/core/src/render3/metadata.ts
index 48935849f4b28..c2f9649d58d11 100644
--- a/packages/core/src/render3/metadata.ts
+++ b/packages/core/src/render3/metadata.ts
@@ -27,9 +27,10 @@ const ASYNC_COMPONENT_METADATA_FN = '__ngAsyncComponentMetadataFn__';
  * to a function that applies component metadata after resolving defer-loadable
  * dependencies. Otherwise - this function returns `null`.
  */
-export function getAsyncClassMetadataFn(type: Type<unknown>): (() => Promise<Array<Type<unknown>>>)|
-    null {
-  const componentClass = type as any;  // cast to `any`, so that we can read a monkey-patched field
+export function getAsyncClassMetadataFn(
+  type: Type<unknown>,
+): (() => Promise<Array<Type<unknown>>>) | null {
+  const componentClass = type as any; // cast to `any`, so that we can read a monkey-patched field
   return componentClass[ASYNC_COMPONENT_METADATA_FN] ?? null;
 }
 
@@ -42,18 +43,20 @@ export function getAsyncClassMetadataFn(type: Type<unknown>): (() => Promise<Arr
  * @param metadataSetterFn Function that forms a scope in which the `setClassMetadata` is invoked
  */
 export function setClassMetadataAsync(
-    type: Type<any>, dependencyLoaderFn: () => Array<Promise<Type<unknown>>>,
-    metadataSetterFn: (...types: Type<unknown>[]) => void): () => Promise<Array<Type<unknown>>> {
-  const componentClass = type as any;  // cast to `any`, so that we can monkey-patch it
+  type: Type<any>,
+  dependencyLoaderFn: () => Array<Promise<Type<unknown>>>,
+  metadataSetterFn: (...types: Type<unknown>[]) => void,
+): () => Promise<Array<Type<unknown>>> {
+  const componentClass = type as any; // 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;
+    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 dependencies;
+    });
   return componentClass[ASYNC_COMPONENT_METADATA_FN];
 }
 
@@ -67,34 +70,37 @@ export function setClassMetadataAsync(
  * being tree-shaken away during production builds.
  */
 export function setClassMetadata(
-    type: Type<any>, decorators: any[]|null, ctorParameters: (() => any[])|null,
-    propDecorators: {[field: string]: any}|null): void {
+  type: Type<any>,
+  decorators: any[] | null,
+  ctorParameters: (() => any[]) | null,
+  propDecorators: {[field: string]: any} | null,
+): void {
   return noSideEffects(() => {
-           const clazz = type as TypeWithMetadata;
+    const clazz = type as TypeWithMetadata;
 
-           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;
-             }
-           }
-         }) as never;
+    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;
+      }
+    }
+  }) as never;
 }
diff --git a/packages/core/src/render3/ng_module_ref.ts b/packages/core/src/render3/ng_module_ref.ts
index 4bc4cb2bb881b..1adcc753a1317 100644
--- a/packages/core/src/render3/ng_module_ref.ts
+++ b/packages/core/src/render3/ng_module_ref.ts
@@ -12,7 +12,11 @@ import {EnvironmentProviders, Provider, StaticProvider} from '../di/interface/pr
 import {EnvironmentInjector, getNullInjector, R3Injector} from '../di/r3_injector';
 import {Type} from '../interface/type';
 import {ComponentFactoryResolver as viewEngine_ComponentFactoryResolver} from '../linker/component_factory_resolver';
-import {InternalNgModuleRef, NgModuleFactory as viewEngine_NgModuleFactory, NgModuleRef as viewEngine_NgModuleRef} from '../linker/ng_module_factory';
+import {
+  InternalNgModuleRef,
+  NgModuleFactory as viewEngine_NgModuleFactory,
+  NgModuleRef as viewEngine_NgModuleRef,
+} from '../linker/ng_module_factory';
 import {assertDefined} from '../util/assert';
 import {stringify} from '../util/stringify';
 
@@ -31,7 +35,9 @@ import {maybeUnwrapFn} from './util/misc_utils';
  * @publicApi
  */
 export function createNgModule<T>(
-    ngModule: Type<T>, parentInjector?: Injector): viewEngine_NgModuleRef<T> {
+  ngModule: Type<T>,
+  parentInjector?: Injector,
+): viewEngine_NgModuleRef<T> {
   return new NgModuleRef<T>(ngModule, parentInjector ?? null, []);
 }
 
@@ -48,7 +54,7 @@ export class NgModuleRef<T> extends viewEngine_NgModuleRef<T> implements Interna
   // tslint:disable-next-line:require-internal-with-underscore
   _r3Injector: R3Injector;
   override instance: T;
-  destroyCbs: (() => void)[]|null = [];
+  destroyCbs: (() => void)[] | null = [];
 
   // When bootstrapping a module we have a dependency graph that looks like this:
   // ApplicationRef -> ComponentFactoryResolver -> NgModuleRef. The problem is that if the
@@ -57,28 +63,36 @@ export class NgModuleRef<T> extends viewEngine_NgModuleRef<T> implements Interna
   // exist yet. We work around the issue by creating the ComponentFactoryResolver ourselves
   // and providing it, rather than letting the injector resolve it.
   override readonly componentFactoryResolver: ComponentFactoryResolver =
-      new ComponentFactoryResolver(this);
+    new ComponentFactoryResolver(this);
 
   constructor(
-      ngModuleType: Type<T>, public _parent: Injector|null, additionalProviders: StaticProvider[]) {
+    ngModuleType: Type<T>,
+    public _parent: Injector | null,
+    additionalProviders: StaticProvider[],
+  ) {
     super();
     const ngModuleDef = getNgModuleDef(ngModuleType);
     ngDevMode &&
-        assertDefined(
-            ngModuleDef,
-            `NgModule '${stringify(ngModuleType)}' is not a subtype of 'NgModuleType'.`);
+      assertDefined(
+        ngModuleDef,
+        `NgModule '${stringify(ngModuleType)}' is not a subtype of 'NgModuleType'.`,
+      );
 
     this._bootstrapComponents = maybeUnwrapFn(ngModuleDef!.bootstrap);
     this._r3Injector = createInjectorWithoutInjectorInstances(
-                           ngModuleType, _parent,
-                           [
-                             {provide: viewEngine_NgModuleRef, useValue: this}, {
-                               provide: viewEngine_ComponentFactoryResolver,
-                               useValue: this.componentFactoryResolver
-                             },
-                             ...additionalProviders
-                           ],
-                           stringify(ngModuleType), new Set(['environment'])) as R3Injector;
+      ngModuleType,
+      _parent,
+      [
+        {provide: viewEngine_NgModuleRef, useValue: this},
+        {
+          provide: viewEngine_ComponentFactoryResolver,
+          useValue: this.componentFactoryResolver,
+        },
+        ...additionalProviders,
+      ],
+      stringify(ngModuleType),
+      new Set(['environment']),
+    ) as R3Injector;
 
     // 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
@@ -95,7 +109,7 @@ export class NgModuleRef<T> extends viewEngine_NgModuleRef<T> implements Interna
     ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
     const injector = this._r3Injector;
     !injector.destroyed && injector.destroy();
-    this.destroyCbs!.forEach(fn => fn());
+    this.destroyCbs!.forEach((fn) => fn());
     this.destroyCbs = null;
   }
   override onDestroy(callback: () => void): void {
@@ -109,37 +123,42 @@ export class NgModuleFactory<T> extends viewEngine_NgModuleFactory<T> {
     super();
   }
 
-  override create(parentInjector: Injector|null): viewEngine_NgModuleRef<T> {
+  override create(parentInjector: Injector | null): viewEngine_NgModuleRef<T> {
     return new NgModuleRef(this.moduleType, parentInjector, []);
   }
 }
 
 export function createNgModuleRefWithProviders<T>(
-    moduleType: Type<T>, parentInjector: Injector|null,
-    additionalProviders: StaticProvider[]): InternalNgModuleRef<T> {
+  moduleType: Type<T>,
+  parentInjector: Injector | null,
+  additionalProviders: StaticProvider[],
+): InternalNgModuleRef<T> {
   return new NgModuleRef(moduleType, parentInjector, additionalProviders);
 }
 
 export class EnvironmentNgModuleRefAdapter extends viewEngine_NgModuleRef<null> {
   override readonly injector: R3Injector;
   override readonly componentFactoryResolver: ComponentFactoryResolver =
-      new ComponentFactoryResolver(this);
+    new ComponentFactoryResolver(this);
   override readonly instance = null;
 
   constructor(config: {
-    providers: Array<Provider|EnvironmentProviders>,
-    parent: EnvironmentInjector|null,
-    debugName: string|null,
-    runEnvironmentInitializers: boolean
+    providers: Array<Provider | EnvironmentProviders>;
+    parent: EnvironmentInjector | null;
+    debugName: string | null;
+    runEnvironmentInitializers: boolean;
   }) {
     super();
     const injector = new R3Injector(
-        [
-          ...config.providers,
-          {provide: viewEngine_NgModuleRef, useValue: this},
-          {provide: viewEngine_ComponentFactoryResolver, useValue: this.componentFactoryResolver},
-        ],
-        config.parent || getNullInjector(), config.debugName, new Set(['environment']));
+      [
+        ...config.providers,
+        {provide: viewEngine_NgModuleRef, useValue: this},
+        {provide: viewEngine_ComponentFactoryResolver, useValue: this.componentFactoryResolver},
+      ],
+      config.parent || getNullInjector(),
+      config.debugName,
+      new Set(['environment']),
+    );
     this.injector = injector;
     if (config.runEnvironmentInitializers) {
       injector.resolveInjectorInitializers();
@@ -166,9 +185,15 @@ export class EnvironmentNgModuleRefAdapter extends viewEngine_NgModuleRef<null>
  * @publicApi
  */
 export function createEnvironmentInjector(
-    providers: Array<Provider|EnvironmentProviders>, parent: EnvironmentInjector,
-    debugName: string|null = null): EnvironmentInjector {
-  const adapter = new EnvironmentNgModuleRefAdapter(
-      {providers, parent, debugName, runEnvironmentInitializers: true});
+  providers: Array<Provider | EnvironmentProviders>,
+  parent: EnvironmentInjector,
+  debugName: string | null = null,
+): EnvironmentInjector {
+  const adapter = new EnvironmentNgModuleRefAdapter({
+    providers,
+    parent,
+    debugName,
+    runEnvironmentInitializers: true,
+  });
   return adapter.injector;
 }
diff --git a/packages/core/src/render3/node_assert.ts b/packages/core/src/render3/node_assert.ts
index 41dbccca47ab0..a63366db8e20d 100644
--- a/packages/core/src/render3/node_assert.ts
+++ b/packages/core/src/render3/node_assert.ts
@@ -10,25 +10,37 @@ import {assertDefined, throwError} from '../util/assert';
 import {TNode, TNodeType, toTNodeTypeAsString} from './interfaces/node';
 
 export function assertTNodeType(
-    tNode: TNode|null, expectedTypes: TNodeType, message?: string): void {
+  tNode: TNode | null,
+  expectedTypes: TNodeType,
+  message?: string,
+): void {
   assertDefined(tNode, 'should be called with a TNode');
   if ((tNode.type & expectedTypes) === 0) {
     throwError(
-        message ||
-        `Expected [${toTNodeTypeAsString(expectedTypes)}] but got ${
-            toTNodeTypeAsString(tNode.type)}.`);
+      message ||
+        `Expected [${toTNodeTypeAsString(expectedTypes)}] but got ${toTNodeTypeAsString(
+          tNode.type,
+        )}.`,
+    );
   }
 }
 
 export function assertPureTNodeType(type: TNodeType) {
-  if (!(type === TNodeType.Element ||           //
-        type === TNodeType.Text ||              //
-        type === TNodeType.Container ||         //
-        type === TNodeType.ElementContainer ||  //
-        type === TNodeType.Icu ||               //
-        type === TNodeType.Projection ||        //
-        type === TNodeType.Placeholder)) {
-    throwError(`Expected TNodeType to have only a single type selected, but got ${
-        toTNodeTypeAsString(type)}.`);
+  if (
+    !(
+      type === TNodeType.Element || //
+      type === TNodeType.Text || //
+      type === TNodeType.Container || //
+      type === TNodeType.ElementContainer || //
+      type === TNodeType.Icu || //
+      type === TNodeType.Projection || //
+      type === TNodeType.Placeholder
+    )
+  ) {
+    throwError(
+      `Expected TNodeType to have only a single type selected, but got ${toTNodeTypeAsString(
+        type,
+      )}.`,
+    );
   }
 }
diff --git a/packages/core/src/render3/node_manipulation.ts b/packages/core/src/render3/node_manipulation.ts
index 0ff1c8b1eaaaf..efe09d6c77992 100644
--- a/packages/core/src/render3/node_manipulation.ts
+++ b/packages/core/src/render3/node_manipulation.ts
@@ -6,32 +6,90 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {consumerDestroy, getActiveConsumer, setActiveConsumer} from '@angular/core/primitives/signals';
+import {
+  consumerDestroy,
+  getActiveConsumer,
+  setActiveConsumer,
+} from '@angular/core/primitives/signals';
 
 import {NotificationSource} from '../change_detection/scheduling/zoneless_scheduling';
 import {hasInSkipHydrationBlockFlag} from '../hydration/skip_hydration';
 import {ViewEncapsulation} from '../metadata/view';
 import {RendererStyleFlags2} from '../render/api_flags';
 import {addToArray, removeFromArray} from '../util/array_utils';
-import {assertDefined, assertEqual, assertFunction, assertNotReactive, assertNumber, assertString} from '../util/assert';
+import {
+  assertDefined,
+  assertEqual,
+  assertFunction,
+  assertNotReactive,
+  assertNumber,
+  assertString,
+} from '../util/assert';
 import {escapeCommentText} from '../util/dom';
 
-import {assertLContainer, assertLView, assertParentView, assertProjectionSlots, assertTNodeForLView} from './assert';
+import {
+  assertLContainer,
+  assertLView,
+  assertParentView,
+  assertProjectionSlots,
+  assertTNodeForLView,
+} from './assert';
 import {attachPatchData} from './context_discovery';
 import {icuContainerIterate} from './i18n/i18n_tree_shaking';
-import {CONTAINER_HEADER_OFFSET, LContainer, LContainerFlags, MOVED_VIEWS, NATIVE} from './interfaces/container';
+import {
+  CONTAINER_HEADER_OFFSET,
+  LContainer,
+  LContainerFlags,
+  MOVED_VIEWS,
+  NATIVE,
+} from './interfaces/container';
 import {ComponentDef} from './interfaces/definition';
 import {NodeInjectorFactory} from './interfaces/injector';
 import {unregisterLView} from './interfaces/lview_tracking';
-import {TElementNode, TIcuContainerNode, TNode, TNodeFlags, TNodeType, TProjectionNode} from './interfaces/node';
+import {
+  TElementNode,
+  TIcuContainerNode,
+  TNode,
+  TNodeFlags,
+  TNodeType,
+  TProjectionNode,
+} from './interfaces/node';
 import {Renderer} from './interfaces/renderer';
 import {RComment, RElement, RNode, RTemplate, RText} from './interfaces/renderer_dom';
 import {isLContainer, isLView} from './interfaces/type_checks';
-import {CHILD_HEAD, CLEANUP, DECLARATION_COMPONENT_VIEW, DECLARATION_LCONTAINER, DestroyHookData, ENVIRONMENT, FLAGS, HookData, HookFn, HOST, LView, LViewFlags, NEXT, ON_DESTROY_HOOKS, PARENT, QUERIES, REACTIVE_TEMPLATE_CONSUMER, RENDERER, T_HOST, TVIEW, TView, TViewType} from './interfaces/view';
+import {
+  CHILD_HEAD,
+  CLEANUP,
+  DECLARATION_COMPONENT_VIEW,
+  DECLARATION_LCONTAINER,
+  DestroyHookData,
+  ENVIRONMENT,
+  FLAGS,
+  HookData,
+  HookFn,
+  HOST,
+  LView,
+  LViewFlags,
+  NEXT,
+  ON_DESTROY_HOOKS,
+  PARENT,
+  QUERIES,
+  REACTIVE_TEMPLATE_CONSUMER,
+  RENDERER,
+  T_HOST,
+  TVIEW,
+  TView,
+  TViewType,
+} from './interfaces/view';
 import {assertTNodeType} from './node_assert';
 import {profiler, ProfilerEvent} from './profiler';
 import {setUpAttributes} from './util/attrs_utils';
-import {getLViewParent, getNativeByTNode, unwrapRNode, updateAncestorTraversalFlagsOnAttach} from './util/view_utils';
+import {
+  getLViewParent,
+  getNativeByTNode,
+  unwrapRNode,
+  updateAncestorTraversalFlagsOnAttach,
+} from './util/view_utils';
 
 const enum WalkTNodeTreeAction {
   /** node create in the native environment. Run on initial creation. */
@@ -50,21 +108,23 @@ const enum WalkTNodeTreeAction {
   Destroy = 3,
 }
 
-
-
 /**
  * NOTE: for performance reasons, the possible actions are inlined within the function instead of
  * being passed as an argument.
  */
 function applyToElementOrContainer(
-    action: WalkTNodeTreeAction, renderer: Renderer, parent: RElement|null,
-    lNodeToHandle: RNode|LContainer|LView, beforeNode?: RNode|null) {
+  action: WalkTNodeTreeAction,
+  renderer: Renderer,
+  parent: RElement | null,
+  lNodeToHandle: RNode | LContainer | LView,
+  beforeNode?: RNode | null,
+) {
   // If this slot was allocated for a text node dynamically created by i18n, the text node itself
   // won't be created until i18nApply() in the update block, so this node should be skipped.
   // For more info, see "ICU expressions should work inside an ngTemplateOutlet inside an ngFor"
   // in `i18n_spec.ts`.
   if (lNodeToHandle != null) {
-    let lContainer: LContainer|undefined;
+    let lContainer: LContainer | undefined;
     let isComponent = false;
     // We are expecting an RNode, but in the case of a component or LContainer the `RNode` is
     // wrapped in an array which needs to be unwrapped. We need to know if it is a component and if
@@ -122,12 +182,14 @@ export function createCommentNode(renderer: Renderer, value: string): RComment {
  * @returns the element created
  */
 export function createElementNode(
-    renderer: Renderer, name: string, namespace: string|null): RElement {
+  renderer: Renderer,
+  name: string,
+  namespace: string | null,
+): RElement {
   ngDevMode && ngDevMode.rendererCreateElement++;
   return renderer.createElement(name, namespace);
 }
 
-
 /**
  * Removes all DOM elements associated with a view.
  *
@@ -159,14 +221,18 @@ export function removeViewFromDOM(tView: TView, lView: LView): void {
  * @param beforeNode The node before which elements should be added, if insert mode
  */
 export function addViewToDOM(
-    tView: TView, parentTNode: TNode, renderer: Renderer, lView: LView, parentNativeNode: RElement,
-    beforeNode: RNode|null): void {
+  tView: TView,
+  parentTNode: TNode,
+  renderer: Renderer,
+  lView: LView,
+  parentNativeNode: RElement,
+  beforeNode: RNode | null,
+): void {
   lView[HOST] = parentNativeNode;
   lView[T_HOST] = parentTNode;
   applyView(tView, lView, renderer, WalkTNodeTreeAction.Insert, parentNativeNode, beforeNode);
 }
 
-
 /**
  * Detach a `LView` from the DOM by detaching its nodes.
  *
@@ -202,7 +268,7 @@ export function destroyViewTree(rootView: LView): void {
   }
 
   while (lViewOrLContainer) {
-    let next: LView|LContainer|null = null;
+    let next: LView | LContainer | null = null;
 
     if (isLView(lViewOrLContainer)) {
       // If LView, traverse down to child.
@@ -210,7 +276,7 @@ export function destroyViewTree(rootView: LView): void {
     } else {
       ngDevMode && assertLContainer(lViewOrLContainer);
       // If container, traverse down to its first LView.
-      const firstView: LView|undefined = lViewOrLContainer[CONTAINER_HEADER_OFFSET];
+      const firstView: LView | undefined = lViewOrLContainer[CONTAINER_HEADER_OFFSET];
       if (firstView) next = firstView;
     }
 
@@ -317,9 +383,10 @@ export function trackMovedView(declarationContainer: LContainer, lView: LView) {
 export function detachMovedView(declarationContainer: LContainer, lView: LView) {
   ngDevMode && assertLContainer(declarationContainer);
   ngDevMode &&
-      assertDefined(
-          declarationContainer[MOVED_VIEWS],
-          'A projected view should belong to a non-empty projected views collection');
+    assertDefined(
+      declarationContainer[MOVED_VIEWS],
+      'A projected view should belong to a non-empty projected views collection',
+    );
   const movedViews = declarationContainer[MOVED_VIEWS]!;
   const declarationViewIndex = movedViews.indexOf(lView);
   movedViews.splice(declarationViewIndex, 1);
@@ -335,7 +402,7 @@ export function detachMovedView(declarationContainer: LContainer, lView: LView)
  * @param removeIndex The index of the view to detach
  * @returns Detached LView instance.
  */
-export function detachView(lContainer: LContainer, removeIndex: number): LView|undefined {
+export function detachView(lContainer: LContainer, removeIndex: number): LView | undefined {
   if (lContainer.length <= CONTAINER_HEADER_OFFSET) return;
 
   const indexInContainer = CONTAINER_HEADER_OFFSET + removeIndex;
@@ -347,7 +414,6 @@ export function detachView(lContainer: LContainer, removeIndex: number): LView|u
       detachMovedView(declarationLContainer, viewToDetach);
     }
 
-
     if (removeIndex > 0) {
       lContainer[indexInContainer - 1][NEXT] = viewToDetach[NEXT] as LView;
     }
@@ -491,7 +557,7 @@ function processCleanups(tView: TView, lView: LView): void {
 /** Calls onDestroy hooks for this view */
 function executeOnDestroys(tView: TView, lView: LView): void {
   ngDevMode && assertNotReactive(executeOnDestroys.name);
-  let destroyHooks: DestroyHookData|null;
+  let destroyHooks: DestroyHookData | null;
 
   if (tView != null && (destroyHooks = tView.destroyHooks) != null) {
     for (let i = 0; i < destroyHooks.length; i += 2) {
@@ -541,7 +607,7 @@ function executeOnDestroys(tView: TView, lView: LView): void {
  * @param tNode: `TNode` for which we wish to retrieve render parent.
  * @param lView: Current `LView`.
  */
-export function getParentRElement(tView: TView, tNode: TNode, lView: LView): RElement|null {
+export function getParentRElement(tView: TView, tNode: TNode, lView: LView): RElement | null {
   return getClosestRElement(tView, tNode.parent, lView);
 }
 
@@ -560,12 +626,15 @@ export function getParentRElement(tView: TView, tNode: TNode, lView: LView): REl
  * @param lView: Current `LView`.
  * @returns `null` if the `RElement` can't be determined at this time (no parent / projection)
  */
-export function getClosestRElement(tView: TView, tNode: TNode|null, lView: LView): RElement|null {
-  let parentTNode: TNode|null = tNode;
+export function getClosestRElement(
+  tView: TView,
+  tNode: TNode | null,
+  lView: LView,
+): RElement | null {
+  let parentTNode: TNode | null = tNode;
   // Skip over element and ICU containers as those are represented by a comment node and
   // can't be used as a render parent.
-  while (parentTNode !== null &&
-         (parentTNode.type & (TNodeType.ElementContainer | TNodeType.Icu))) {
+  while (parentTNode !== null && parentTNode.type & (TNodeType.ElementContainer | TNodeType.Icu)) {
     tNode = parentTNode;
     parentTNode = tNode.parent;
   }
@@ -581,16 +650,19 @@ export function getClosestRElement(tView: TView, tNode: TNode|null, lView: LView
     const {componentOffset} = parentTNode;
     if (componentOffset > -1) {
       ngDevMode && assertTNodeForLView(parentTNode, lView);
-      const {encapsulation} =
-          (tView.data[parentTNode.directiveStart + componentOffset] as ComponentDef<unknown>);
+      const {encapsulation} = tView.data[
+        parentTNode.directiveStart + componentOffset
+      ] as ComponentDef<unknown>;
       // We've got a parent which is an element in the current view. We just need to verify if the
       // parent element is not a component. Component's content nodes are not inserted immediately
       // because they will be projected, and so doing insert at this point would be wasteful.
       // Since the projection would then move it to its final destination. Note that we can't
       // make this assumption when using the Shadow DOM, because the native projection placeholders
       // (<content> or <slot>) have to be in place as elements are being inserted.
-      if (encapsulation === ViewEncapsulation.None ||
-          encapsulation === ViewEncapsulation.Emulated) {
+      if (
+        encapsulation === ViewEncapsulation.None ||
+        encapsulation === ViewEncapsulation.Emulated
+      ) {
         return null;
       }
     }
@@ -604,8 +676,12 @@ export function getClosestRElement(tView: TView, tNode: TNode|null, lView: LView
  * This is a utility function that can be used when native nodes were determined.
  */
 export function nativeInsertBefore(
-    renderer: Renderer, parent: RElement, child: RNode, beforeNode: RNode|null,
-    isMove: boolean): void {
+  renderer: Renderer,
+  parent: RElement,
+  child: RNode,
+  beforeNode: RNode | null,
+  isMove: boolean,
+): void {
   ngDevMode && ngDevMode.rendererInsertBefore++;
   renderer.insertBefore(parent, child, beforeNode, isMove);
 }
@@ -617,7 +693,12 @@ function nativeAppendChild(renderer: Renderer, parent: RElement, child: RNode):
 }
 
 function nativeAppendOrInsertBefore(
-    renderer: Renderer, parent: RElement, child: RNode, beforeNode: RNode|null, isMove: boolean) {
+  renderer: Renderer,
+  parent: RElement,
+  child: RNode,
+  beforeNode: RNode | null,
+  isMove: boolean,
+) {
   if (beforeNode !== null) {
     nativeInsertBefore(renderer, parent, child, beforeNode, isMove);
   } else {
@@ -627,7 +708,11 @@ function nativeAppendOrInsertBefore(
 
 /** Removes a node from the DOM given its native parent. */
 function nativeRemoveChild(
-    renderer: Renderer, parent: RElement, child: RNode, isHostElement?: boolean): void {
+  renderer: Renderer,
+  parent: RElement,
+  child: RNode,
+  isHostElement?: boolean,
+): void {
   renderer.removeChild(parent, child, isHostElement);
 }
 
@@ -639,14 +724,14 @@ function isTemplateNode(node: RElement): node is RTemplate {
 /**
  * Returns a native parent of a given native node.
  */
-export function nativeParentNode(renderer: Renderer, node: RNode): RElement|null {
+export function nativeParentNode(renderer: Renderer, node: RNode): RElement | null {
   return renderer.parentNode(node);
 }
 
 /**
  * Returns a native sibling of a given native node.
  */
-export function nativeNextSibling(renderer: Renderer, node: RNode): RNode|null {
+export function nativeNextSibling(renderer: Renderer, node: RNode): RNode | null {
   return renderer.nextSibling(node);
 }
 
@@ -660,12 +745,14 @@ export function nativeNextSibling(renderer: Renderer, node: RNode): RNode|null {
  * @param currentTNode current `TNode` (The node which we would like to insert into the DOM)
  * @param lView current `LView`
  */
-function getInsertInFrontOfRNode(parentTNode: TNode, currentTNode: TNode, lView: LView): RNode|
-    null {
+function getInsertInFrontOfRNode(
+  parentTNode: TNode,
+  currentTNode: TNode,
+  lView: LView,
+): RNode | null {
   return _getInsertInFrontOfRNodeWithI18n(parentTNode, currentTNode, lView);
 }
 
-
 /**
  * Find a node in front of which `currentTNode` should be inserted. (Does not take i18n into
  * account)
@@ -678,7 +765,10 @@ function getInsertInFrontOfRNode(parentTNode: TNode, currentTNode: TNode, lView:
  * @param lView current `LView`
  */
 export function getInsertInFrontOfRNodeWithNoI18n(
-    parentTNode: TNode, currentTNode: TNode, lView: LView): RNode|null {
+  parentTNode: TNode,
+  currentTNode: TNode,
+  lView: LView,
+): RNode | null {
   if (parentTNode.type & (TNodeType.ElementContainer | TNodeType.Icu)) {
     return getNativeByTNode(parentTNode, lView);
   }
@@ -690,8 +780,11 @@ export function getInsertInFrontOfRNodeWithNoI18n(
  *
  * This function will only be set if i18n code runs.
  */
-let _getInsertInFrontOfRNodeWithI18n: (parentTNode: TNode, currentTNode: TNode, lView: LView) =>
-    RNode | null = getInsertInFrontOfRNodeWithNoI18n;
+let _getInsertInFrontOfRNodeWithI18n: (
+  parentTNode: TNode,
+  currentTNode: TNode,
+  lView: LView,
+) => RNode | null = getInsertInFrontOfRNodeWithNoI18n;
 
 /**
  * Tree shakable boundary for `processI18nInsertBefore` function.
@@ -699,15 +792,27 @@ let _getInsertInFrontOfRNodeWithI18n: (parentTNode: TNode, currentTNode: TNode,
  * This function will only be set if i18n code runs.
  */
 let _processI18nInsertBefore: (
-    renderer: Renderer, childTNode: TNode, lView: LView, childRNode: RNode|RNode[],
-    parentRElement: RElement|null) => void;
+  renderer: Renderer,
+  childTNode: TNode,
+  lView: LView,
+  childRNode: RNode | RNode[],
+  parentRElement: RElement | null,
+) => void;
 
 export function setI18nHandling(
-    getInsertInFrontOfRNodeWithI18n: (parentTNode: TNode, currentTNode: TNode, lView: LView) =>
-        RNode | null,
-    processI18nInsertBefore: (
-        renderer: Renderer, childTNode: TNode, lView: LView, childRNode: RNode|RNode[],
-        parentRElement: RElement|null) => void) {
+  getInsertInFrontOfRNodeWithI18n: (
+    parentTNode: TNode,
+    currentTNode: TNode,
+    lView: LView,
+  ) => RNode | null,
+  processI18nInsertBefore: (
+    renderer: Renderer,
+    childTNode: TNode,
+    lView: LView,
+    childRNode: RNode | RNode[],
+    parentRElement: RElement | null,
+  ) => void,
+) {
   _getInsertInFrontOfRNodeWithI18n = getInsertInFrontOfRNodeWithI18n;
   _processI18nInsertBefore = processI18nInsertBefore;
 }
@@ -721,7 +826,11 @@ export function setI18nHandling(
  * @param childTNode The TNode of the child element
  */
 export function appendChild(
-    tView: TView, lView: LView, childRNode: RNode|RNode[], childTNode: TNode): void {
+  tView: TView,
+  lView: LView,
+  childRNode: RNode | RNode[],
+  childTNode: TNode,
+): void {
   const parentRNode = getParentRElement(tView, childTNode, lView);
   const renderer = lView[RENDERER];
   const parentTNode: TNode = childTNode.parent || lView[T_HOST]!;
@@ -737,7 +846,7 @@ export function appendChild(
   }
 
   _processI18nInsertBefore !== undefined &&
-      _processI18nInsertBefore(renderer, childTNode, lView, childRNode, parentRNode);
+    _processI18nInsertBefore(renderer, childTNode, lView, childRNode, parentRNode);
 }
 
 /**
@@ -745,12 +854,13 @@ export function appendChild(
  *
  * Native nodes are returned in the order in which those appear in the native tree (DOM).
  */
-export function getFirstNativeNode(lView: LView, tNode: TNode|null): RNode|null {
+export function getFirstNativeNode(lView: LView, tNode: TNode | null): RNode | null {
   if (tNode !== null) {
     ngDevMode &&
-        assertTNodeType(
-            tNode,
-            TNodeType.AnyRNode | TNodeType.AnyContainer | TNodeType.Icu | TNodeType.Projection);
+      assertTNodeType(
+        tNode,
+        TNodeType.AnyRNode | TNodeType.AnyContainer | TNodeType.Icu | TNodeType.Projection,
+      );
 
     const tNodeType = tNode.type;
     if (tNodeType & TNodeType.AnyRNode) {
@@ -771,7 +881,7 @@ export function getFirstNativeNode(lView: LView, tNode: TNode|null): RNode|null
       }
     } else if (tNodeType & TNodeType.Icu) {
       let nextRNode = icuContainerIterate(tNode as TIcuContainerNode, lView);
-      let rNode: RNode|null = nextRNode();
+      let rNode: RNode | null = nextRNode();
       // If the ICU container has no nodes, than we use the ICU anchor as the node.
       return rNode || unwrapRNode(lView[tNode.index]);
     } else {
@@ -792,7 +902,7 @@ export function getFirstNativeNode(lView: LView, tNode: TNode|null): RNode|null
   return null;
 }
 
-export function getProjectionNodes(lView: LView, tNode: TNode|null): TNode|RNode[]|null {
+export function getProjectionNodes(lView: LView, tNode: TNode | null): TNode | RNode[] | null {
   if (tNode !== null) {
     const componentView = lView[DECLARATION_COMPONENT_VIEW];
     const componentHost = componentView[T_HOST] as TElementNode;
@@ -803,8 +913,10 @@ export function getProjectionNodes(lView: LView, tNode: TNode|null): TNode|RNode
   return null;
 }
 
-export function getBeforeNodeForView(viewIndexInContainer: number, lContainer: LContainer): RNode|
-    null {
+export function getBeforeNodeForView(
+  viewIndexInContainer: number,
+  lContainer: LContainer,
+): RNode | null {
   const nextViewIndex = CONTAINER_HEADER_OFFSET + viewIndexInContainer + 1;
   if (nextViewIndex < lContainer.length) {
     const lView = lContainer[nextViewIndex] as LView;
@@ -843,20 +955,26 @@ export function clearElementContents(rElement: RElement): void {
   rElement.textContent = '';
 }
 
-
 /**
  * Performs the operation of `action` on the node. Typically this involves inserting or removing
  * nodes on the LView or projection boundary.
  */
 function applyNodes(
-    renderer: Renderer, action: WalkTNodeTreeAction, tNode: TNode|null, lView: LView,
-    parentRElement: RElement|null, beforeNode: RNode|null, isProjection: boolean) {
+  renderer: Renderer,
+  action: WalkTNodeTreeAction,
+  tNode: TNode | null,
+  lView: LView,
+  parentRElement: RElement | null,
+  beforeNode: RNode | null,
+  isProjection: boolean,
+) {
   while (tNode != null) {
     ngDevMode && assertTNodeForLView(tNode, lView);
     ngDevMode &&
-        assertTNodeType(
-            tNode,
-            TNodeType.AnyRNode | TNodeType.AnyContainer | TNodeType.Projection | TNodeType.Icu);
+      assertTNodeType(
+        tNode,
+        TNodeType.AnyRNode | TNodeType.AnyContainer | TNodeType.Projection | TNodeType.Icu,
+      );
     const rawSlotValue = lView[tNode.index];
     const tNodeType = tNode.type;
     if (isProjection) {
@@ -871,14 +989,20 @@ function applyNodes(
         applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode);
       } else if (tNodeType & TNodeType.Icu) {
         const nextRNode = icuContainerIterate(tNode as TIcuContainerNode, lView);
-        let rNode: RNode|null;
-        while (rNode = nextRNode()) {
+        let rNode: RNode | null;
+        while ((rNode = nextRNode())) {
           applyToElementOrContainer(action, renderer, parentRElement, rNode, beforeNode);
         }
         applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode);
       } else if (tNodeType & TNodeType.Projection) {
         applyProjectionRecursive(
-            renderer, action, lView, tNode as TProjectionNode, parentRElement, beforeNode);
+          renderer,
+          action,
+          lView,
+          tNode as TProjectionNode,
+          parentRElement,
+          beforeNode,
+        );
       } else {
         ngDevMode && assertTNodeType(tNode, TNodeType.AnyRNode | TNodeType.Container);
         applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode);
@@ -888,7 +1012,6 @@ function applyNodes(
   }
 }
 
-
 /**
  * `applyView` performs operation on the view as specified in `action` (insert, detach, destroy)
  *
@@ -913,14 +1036,29 @@ function applyNodes(
  * @param beforeNode Before which node the insertions should happen.
  */
 function applyView(
-    tView: TView, lView: LView, renderer: Renderer, action: WalkTNodeTreeAction.Destroy,
-    parentRElement: null, beforeNode: null): void;
+  tView: TView,
+  lView: LView,
+  renderer: Renderer,
+  action: WalkTNodeTreeAction.Destroy,
+  parentRElement: null,
+  beforeNode: null,
+): void;
 function applyView(
-    tView: TView, lView: LView, renderer: Renderer, action: WalkTNodeTreeAction,
-    parentRElement: RElement|null, beforeNode: RNode|null): void;
+  tView: TView,
+  lView: LView,
+  renderer: Renderer,
+  action: WalkTNodeTreeAction,
+  parentRElement: RElement | null,
+  beforeNode: RNode | null,
+): void;
 function applyView(
-    tView: TView, lView: LView, renderer: Renderer, action: WalkTNodeTreeAction,
-    parentRElement: RElement|null, beforeNode: RNode|null): void {
+  tView: TView,
+  lView: LView,
+  renderer: Renderer,
+  action: WalkTNodeTreeAction,
+  parentRElement: RElement | null,
+  beforeNode: RNode | null,
+): void {
   applyNodes(renderer, action, tView.firstChild, lView, parentRElement, beforeNode, false);
 }
 
@@ -940,7 +1078,13 @@ export function applyProjection(tView: TView, lView: LView, tProjectionNode: TPr
   const parentTNode = tProjectionNode.parent || lView[T_HOST]!;
   let beforeNode = getInsertInFrontOfRNode(parentTNode, tProjectionNode, lView);
   applyProjectionRecursive(
-      renderer, WalkTNodeTreeAction.Create, lView, tProjectionNode, parentRNode, beforeNode);
+    renderer,
+    WalkTNodeTreeAction.Create,
+    lView,
+    tProjectionNode,
+    parentRNode,
+    beforeNode,
+  );
 }
 
 /**
@@ -958,12 +1102,17 @@ export function applyProjection(tView: TView, lView: LView, tProjectionNode: TPr
  * @param beforeNode Before which node the insertions should happen.
  */
 function applyProjectionRecursive(
-    renderer: Renderer, action: WalkTNodeTreeAction, lView: LView, tProjectionNode: TProjectionNode,
-    parentRElement: RElement|null, beforeNode: RNode|null) {
+  renderer: Renderer,
+  action: WalkTNodeTreeAction,
+  lView: LView,
+  tProjectionNode: TProjectionNode,
+  parentRElement: RElement | null,
+  beforeNode: RNode | null,
+) {
   const componentLView = lView[DECLARATION_COMPONENT_VIEW];
   const componentNode = componentLView[T_HOST] as TElementNode;
   ngDevMode &&
-      assertEqual(typeof tProjectionNode.projection, 'number', 'expecting projection index');
+    assertEqual(typeof tProjectionNode.projection, 'number', 'expecting projection index');
   const nodeToProjectOrRNodes = componentNode.projection![tProjectionNode.projection]!;
   if (Array.isArray(nodeToProjectOrRNodes)) {
     // This should not exist, it is a bit of a hack. When we bootstrap a top level node and we
@@ -976,7 +1125,7 @@ function applyProjectionRecursive(
       applyToElementOrContainer(action, renderer, parentRElement, rNode, beforeNode);
     }
   } else {
-    let nodeToProject: TNode|null = nodeToProjectOrRNodes;
+    let nodeToProject: TNode | null = nodeToProjectOrRNodes;
     const projectedComponentLView = componentLView[PARENT] as LView;
     // If a parent <ng-content> is located within a skip hydration block,
     // annotate an actual node that is being projected with the same flag too.
@@ -984,11 +1133,17 @@ function applyProjectionRecursive(
       nodeToProject.flags |= TNodeFlags.inSkipHydrationBlock;
     }
     applyNodes(
-        renderer, action, nodeToProject, projectedComponentLView, parentRElement, beforeNode, true);
+      renderer,
+      action,
+      nodeToProject,
+      projectedComponentLView,
+      parentRElement,
+      beforeNode,
+      true,
+    );
   }
 }
 
-
 /**
  * `applyContainer` performs an operation on the container and its views as specified by
  * `action` (insert, detach, destroy)
@@ -1003,10 +1158,14 @@ function applyProjectionRecursive(
  * @param beforeNode Before which node the insertions should happen.
  */
 function applyContainer(
-    renderer: Renderer, action: WalkTNodeTreeAction, lContainer: LContainer,
-    parentRElement: RElement|null, beforeNode: RNode|null|undefined) {
+  renderer: Renderer,
+  action: WalkTNodeTreeAction,
+  lContainer: LContainer,
+  parentRElement: RElement | null,
+  beforeNode: RNode | null | undefined,
+) {
   ngDevMode && assertLContainer(lContainer);
-  const anchor = lContainer[NATIVE];  // LContainer has its own before node.
+  const anchor = lContainer[NATIVE]; // LContainer has its own before node.
   const native = unwrapRNode(lContainer);
   // An LContainer can be created dynamically on any node by injecting ViewContainerRef.
   // Asking for a ViewContainerRef on an element will result in a creation of a separate anchor
@@ -1038,7 +1197,12 @@ function applyContainer(
  *        otherwise).
  */
 export function applyStyling(
-    renderer: Renderer, isClassBased: boolean, rNode: RElement, prop: string, value: any) {
+  renderer: Renderer,
+  isClassBased: boolean,
+  rNode: RElement,
+  prop: string,
+  value: any,
+) {
   if (isClassBased) {
     // We actually want JS true/false here because any truthy value should add the class
     if (!value) {
@@ -1049,7 +1213,7 @@ export function applyStyling(
       renderer.addClass(rNode, prop);
     }
   } else {
-    let flags = prop.indexOf('-') === -1 ? undefined : RendererStyleFlags2.DashCase as number;
+    let flags = prop.indexOf('-') === -1 ? undefined : (RendererStyleFlags2.DashCase as number);
     if (value == null /** || value === undefined */) {
       ngDevMode && ngDevMode.rendererRemoveStyle++;
       renderer.removeStyle(rNode, prop, flags);
@@ -1070,7 +1234,6 @@ export function applyStyling(
   }
 }
 
-
 /**
  * Write `cssText` to `RElement`.
  *
@@ -1082,7 +1245,7 @@ export function applyStyling(
  * @param newValue The new class list to write.
  */
 export function writeDirectStyle(renderer: Renderer, element: RElement, newValue: string) {
-  ngDevMode && assertString(newValue, '\'newValue\' should be a string');
+  ngDevMode && assertString(newValue, "'newValue' should be a string");
   renderer.setAttribute(element, 'style', newValue);
   ngDevMode && ngDevMode.rendererSetStyle++;
 }
@@ -1098,7 +1261,7 @@ export function writeDirectStyle(renderer: Renderer, element: RElement, newValue
  * @param newValue The new class list to write.
  */
 export function writeDirectClass(renderer: Renderer, element: RElement, newValue: string) {
-  ngDevMode && assertString(newValue, '\'newValue\' should be a string');
+  ngDevMode && assertString(newValue, "'newValue' should be a string");
   if (newValue === '') {
     // There are tests in `google3` which expect `element.getAttribute('class')` to be `null`.
     renderer.removeAttribute(element, 'class');
diff --git a/packages/core/src/render3/node_manipulation_i18n.ts b/packages/core/src/render3/node_manipulation_i18n.ts
index 2db01123eb775..6eb45b8ff1103 100644
--- a/packages/core/src/render3/node_manipulation_i18n.ts
+++ b/packages/core/src/render3/node_manipulation_i18n.ts
@@ -15,7 +15,6 @@ import {LView} from './interfaces/view';
 import {getInsertInFrontOfRNodeWithNoI18n, nativeInsertBefore} from './node_manipulation';
 import {unwrapRNode} from './util/view_utils';
 
-
 /**
  * Find a node in front of which `currentTNode` should be inserted (takes i18n into account).
  *
@@ -27,10 +26,14 @@ import {unwrapRNode} from './util/view_utils';
  * @param lView current `LView`
  */
 export function getInsertInFrontOfRNodeWithI18n(
-    parentTNode: TNode, currentTNode: TNode, lView: LView): RNode|null {
+  parentTNode: TNode,
+  currentTNode: TNode,
+  lView: LView,
+): RNode | null {
   const tNodeInsertBeforeIndex = currentTNode.insertBeforeIndex;
-  const insertBeforeIndex =
-      Array.isArray(tNodeInsertBeforeIndex) ? tNodeInsertBeforeIndex[0] : tNodeInsertBeforeIndex;
+  const insertBeforeIndex = Array.isArray(tNodeInsertBeforeIndex)
+    ? tNodeInsertBeforeIndex[0]
+    : tNodeInsertBeforeIndex;
   if (insertBeforeIndex === null) {
     return getInsertInFrontOfRNodeWithNoI18n(parentTNode, currentTNode, lView);
   } else {
@@ -39,15 +42,18 @@ export function getInsertInFrontOfRNodeWithI18n(
   }
 }
 
-
 /**
  * Process `TNode.insertBeforeIndex` by adding i18n text nodes.
  *
  * See `TNode.insertBeforeIndex`
  */
 export function processI18nInsertBefore(
-    renderer: Renderer, childTNode: TNode, lView: LView, childRNode: RNode|RNode[],
-    parentRElement: RElement|null): void {
+  renderer: Renderer,
+  childTNode: TNode,
+  lView: LView,
+  childRNode: RNode | RNode[],
+  parentRElement: RElement | null,
+): void {
   const tNodeInsertBeforeIndex = childTNode.insertBeforeIndex;
   if (Array.isArray(tNodeInsertBeforeIndex)) {
     // An array indicates that there are i18n nodes that need to be added as children of this
@@ -56,8 +62,8 @@ export function processI18nInsertBefore(
     // insert the `childRNode`. Additional elements are the extra nodes to be added as children of
     // `childRNode`.
     ngDevMode && assertDomNode(childRNode);
-    let i18nParent: RElement|null = childRNode as RElement;
-    let anchorRNode: RNode|null = null;
+    let i18nParent: RElement | null = childRNode as RElement;
+    let anchorRNode: RNode | null = null;
     if (!(childTNode.type & TNodeType.AnyRNode)) {
       anchorRNode = i18nParent;
       i18nParent = parentRElement;
diff --git a/packages/core/src/render3/node_selector_matcher.ts b/packages/core/src/render3/node_selector_matcher.ts
index f5031e754f169..833723dcfee17 100644
--- a/packages/core/src/render3/node_selector_matcher.ts
+++ b/packages/core/src/render3/node_selector_matcher.ts
@@ -28,16 +28,25 @@ const NG_TEMPLATE_SELECTOR = 'ng-template';
  *    addition to the `AttributeMarker.Classes`.
  */
 function isCssClassMatching(
-    tNode: TNode, attrs: TAttributes, cssClassToMatch: string, isProjectionMode: boolean): boolean {
+  tNode: TNode,
+  attrs: TAttributes,
+  cssClassToMatch: string,
+  isProjectionMode: boolean,
+): boolean {
   ngDevMode &&
-      assertEqual(
-          cssClassToMatch, cssClassToMatch.toLowerCase(), 'Class name expected to be lowercase.');
+    assertEqual(
+      cssClassToMatch,
+      cssClassToMatch.toLowerCase(),
+      'Class name expected to be lowercase.',
+    );
   let i = 0;
   if (isProjectionMode) {
     for (; i < attrs.length && typeof attrs[i] === 'string'; i += 2) {
       // Search for an implicit `class` attribute and check if its value matches `cssClassToMatch`.
-      if (attrs[i] === 'class' &&
-          classIndexOf((attrs[i + 1] as string).toLowerCase(), cssClassToMatch, 0) !== -1) {
+      if (
+        attrs[i] === 'class' &&
+        classIndexOf((attrs[i + 1] as string).toLowerCase(), cssClassToMatch, 0) !== -1
+      ) {
         return true;
       }
     }
@@ -83,9 +92,12 @@ export function isInlineTemplate(tNode: TNode): boolean {
  * (applicable to TNodeType.Container only).
  */
 function hasTagAndTypeMatch(
-    tNode: TNode, currentSelector: string, isProjectionMode: boolean): boolean {
+  tNode: TNode,
+  currentSelector: string,
+  isProjectionMode: boolean,
+): boolean {
   const tagNameToCompare =
-      tNode.type === TNodeType.Container && !isProjectionMode ? NG_TEMPLATE_SELECTOR : tNode.value;
+    tNode.type === TNodeType.Container && !isProjectionMode ? NG_TEMPLATE_SELECTOR : tNode.value;
   return currentSelector === tagNameToCompare;
 }
 
@@ -99,7 +111,10 @@ function hasTagAndTypeMatch(
  * @returns true if node matches the selector.
  */
 export function isNodeMatchingSelector(
-    tNode: TNode, selector: CssSelector, isProjectionMode: boolean): boolean {
+  tNode: TNode,
+  selector: CssSelector,
+  isProjectionMode: boolean,
+): boolean {
   ngDevMode && assertDefined(selector[0], 'Selector should have a tag name');
   let mode: SelectorFlags = SelectorFlags.ELEMENT;
   const nodeAttrs = tNode.attrs;
@@ -129,9 +144,11 @@ export function isNodeMatchingSelector(
     if (skipToNextSelector) continue;
 
     if (mode & SelectorFlags.ELEMENT) {
-      mode = SelectorFlags.ATTRIBUTE | mode & SelectorFlags.NOT;
-      if (current !== '' && !hasTagAndTypeMatch(tNode, current, isProjectionMode) ||
-          current === '' && selector.length === 1) {
+      mode = SelectorFlags.ATTRIBUTE | (mode & SelectorFlags.NOT);
+      if (
+        (current !== '' && !hasTagAndTypeMatch(tNode, current, isProjectionMode)) ||
+        (current === '' && selector.length === 1)
+      ) {
         if (isPositive(mode)) return false;
         skipToNextSelector = true;
       }
@@ -142,8 +159,12 @@ export function isNodeMatchingSelector(
       }
     } else {
       const selectorAttrValue = selector[++i];
-      const attrIndexInNode =
-          findAttrIndexInNode(current, nodeAttrs, isInlineTemplate(tNode), isProjectionMode);
+      const attrIndexInNode = findAttrIndexInNode(
+        current,
+        nodeAttrs,
+        isInlineTemplate(tNode),
+        isProjectionMode,
+      );
 
       if (attrIndexInNode === -1) {
         if (isPositive(mode)) return false;
@@ -157,9 +178,11 @@ export function isNodeMatchingSelector(
           nodeAttrValue = '';
         } else {
           ngDevMode &&
-              assertNotEqual(
-                  nodeAttrs![attrIndexInNode], AttributeMarker.NamespaceURI,
-                  'We do not match directives on namespaced attributes');
+            assertNotEqual(
+              nodeAttrs![attrIndexInNode],
+              AttributeMarker.NamespaceURI,
+              'We do not match directives on namespaced attributes',
+            );
           // we lowercase the attribute value to be able to match
           // selectors without case-sensitivity
           // (selectors are already in lowercase when generated)
@@ -211,8 +234,11 @@ function isPositive(mode: SelectorFlags): boolean {
  * matching against directives.
  */
 function findAttrIndexInNode(
-    name: string, attrs: TAttributes|null, isInlineTemplate: boolean,
-    isProjectionMode: boolean): number {
+  name: string,
+  attrs: TAttributes | null,
+  isInlineTemplate: boolean,
+  isProjectionMode: boolean,
+): number {
   if (attrs === null) return -1;
 
   let i = 0;
@@ -224,10 +250,14 @@ function findAttrIndexInNode(
       if (maybeAttrName === name) {
         return i;
       } else if (
-          maybeAttrName === AttributeMarker.Bindings || maybeAttrName === AttributeMarker.I18n) {
+        maybeAttrName === AttributeMarker.Bindings ||
+        maybeAttrName === AttributeMarker.I18n
+      ) {
         bindingsMode = true;
       } else if (
-          maybeAttrName === AttributeMarker.Classes || maybeAttrName === AttributeMarker.Styles) {
+        maybeAttrName === AttributeMarker.Classes ||
+        maybeAttrName === AttributeMarker.Styles
+      ) {
         let value = attrs[++i];
         // We should skip classes here because we have a separate mechanism for
         // matching classes in projection mode.
@@ -254,7 +284,10 @@ function findAttrIndexInNode(
 }
 
 export function isNodeMatchingSelectorList(
-    tNode: TNode, selector: CssSelectorList, isProjectionMode: boolean = false): boolean {
+  tNode: TNode,
+  selector: CssSelectorList,
+  isProjectionMode: boolean = false,
+): boolean {
   for (let i = 0; i < selector.length; i++) {
     if (isNodeMatchingSelector(tNode, selector[i], isProjectionMode)) {
       return true;
@@ -264,7 +297,7 @@ export function isNodeMatchingSelectorList(
   return false;
 }
 
-export function getProjectAsAttrValue(tNode: TNode): CssSelector|null {
+export function getProjectAsAttrValue(tNode: TNode): CssSelector | null {
   const nodeAttrs = tNode.attrs;
   if (nodeAttrs != null) {
     const ngProjectAsAttrIdx = nodeAttrs.indexOf(AttributeMarker.ProjectAs);
@@ -340,7 +373,7 @@ function stringifyCSSSelector(selector: CssSelector): string {
       if (mode & SelectorFlags.ATTRIBUTE) {
         const attrValue = selector[++i] as string;
         currentChunk +=
-            '[' + valueOrMarker + (attrValue.length > 0 ? '="' + attrValue + '"' : '') + ']';
+          '[' + valueOrMarker + (attrValue.length > 0 ? '="' + attrValue + '"' : '') + ']';
       } else if (mode & SelectorFlags.CLASS) {
         currentChunk += '.' + valueOrMarker;
       } else if (mode & SelectorFlags.ELEMENT) {
@@ -407,8 +440,10 @@ export function stringifyCSSSelectorList(selectorList: CssSelectorList): string
  * @param selector CSS selector in parsed form (in a form of array)
  * @returns object with `attrs` and `classes` fields that contain extracted information
  */
-export function extractAttrsAndClassesFromSelector(selector: CssSelector):
-    {attrs: string[], classes: string[]} {
+export function extractAttrsAndClassesFromSelector(selector: CssSelector): {
+  attrs: string[];
+  classes: string[];
+} {
   const attrs: string[] = [];
   const classes: string[] = [];
   let i = 1;
diff --git a/packages/core/src/render3/pipe.ts b/packages/core/src/render3/pipe.ts
index deb89a9855f8f..79e76d5b7b73a 100644
--- a/packages/core/src/render3/pipe.ts
+++ b/packages/core/src/render3/pipe.ts
@@ -19,12 +19,16 @@ import {isHostComponentStandalone} from './instructions/element_validation';
 import {PipeDef, PipeDefList} from './interfaces/definition';
 import {TTextNode} from './interfaces/node';
 import {CONTEXT, DECLARATION_COMPONENT_VIEW, HEADER_OFFSET, LView, TVIEW} from './interfaces/view';
-import {pureFunction1Internal, pureFunction2Internal, pureFunction3Internal, pureFunction4Internal, pureFunctionVInternal} from './pure_function';
+import {
+  pureFunction1Internal,
+  pureFunction2Internal,
+  pureFunction3Internal,
+  pureFunction4Internal,
+  pureFunctionVInternal,
+} from './pure_function';
 import {getBindingRoot, getCurrentTNode, getLView, getTView} from './state';
 import {load} from './util/view_utils';
 
-
-
 /**
  * Create a pipe.
  *
@@ -57,7 +61,7 @@ export function ɵɵpipe(index: number, pipeName: string): any {
   if (ngDevMode) {
     previousInjectorProfilerContext = setInjectorProfilerContext({
       injector: new NodeInjector(getCurrentTNode() as TTextNode, getLView()),
-      token: pipeDef.type
+      token: pipeDef.type,
     });
   }
   const previousInjectImplementation = setInjectImplementation(ɵɵdirectiveInject);
@@ -85,14 +89,18 @@ export function ɵɵpipe(index: number, pipeName: string): any {
  * @param registry Full list of available pipes
  * @returns Matching PipeDef
  */
-function getPipeDef(name: string, registry: PipeDefList|null): PipeDef<any>|undefined {
+function getPipeDef(name: string, registry: PipeDefList | null): PipeDef<any> | undefined {
   if (registry) {
     if (ngDevMode) {
-      const pipes = registry.filter(pipe => pipe.name === name);
+      const pipes = registry.filter((pipe) => pipe.name === name);
       // TODO: Throw an error in the next major
       if (pipes.length > 1) {
-        console.warn(formatRuntimeError(
-            RuntimeErrorCode.MULTIPLE_MATCHING_PIPES, getMultipleMatchingPipesMessage(name)));
+        console.warn(
+          formatRuntimeError(
+            RuntimeErrorCode.MULTIPLE_MATCHING_PIPES,
+            getMultipleMatchingPipesMessage(name),
+          ),
+        );
       }
     }
     for (let i = registry.length - 1; i >= 0; i--) {
@@ -121,10 +129,9 @@ function getMultipleMatchingPipesMessage(name: string) {
   const hostIsStandalone = isHostComponentStandalone(lView);
   const componentInfoMessage = context ? ` in the '${context.constructor.name}' component` : '';
   const verifyMessage = `check ${
-      hostIsStandalone ? '\'@Component.imports\' of this component' :
-                         'the imports of this module'}`;
-  const errorMessage =
-      `Multiple pipes match the name \`${name}\`${componentInfoMessage}. ${verifyMessage}`;
+    hostIsStandalone ? "'@Component.imports' of this component" : 'the imports of this module'
+  }`;
+  const errorMessage = `Multiple pipes match the name \`${name}\`${componentInfoMessage}. ${verifyMessage}`;
   return errorMessage;
 }
 
@@ -141,10 +148,11 @@ function getPipeNotFoundErrorMessage(name: string) {
   const hostIsStandalone = isHostComponentStandalone(lView);
   const componentInfoMessage = context ? ` in the '${context.constructor.name}' component` : '';
   const verifyMessage = `Verify that it is ${
-      hostIsStandalone ? 'included in the \'@Component.imports\' of this component' :
-                         'declared or imported in this module'}`;
-  const errorMessage =
-      `The pipe '${name}' could not be found${componentInfoMessage}. ${verifyMessage}`;
+    hostIsStandalone
+      ? "included in the '@Component.imports' of this component"
+      : 'declared or imported in this module'
+  }`;
+  const errorMessage = `The pipe '${name}' could not be found${componentInfoMessage}. ${verifyMessage}`;
   return errorMessage;
 }
 
@@ -164,10 +172,16 @@ export function ɵɵpipeBind1(index: number, offset: number, v1: any): any {
   const adjustedIndex = index + HEADER_OFFSET;
   const lView = getLView();
   const pipeInstance = load<PipeTransform>(lView, adjustedIndex);
-  return isPure(lView, adjustedIndex) ?
-      pureFunction1Internal(
-          lView, getBindingRoot(), offset, pipeInstance.transform, v1, pipeInstance) :
-      pipeInstance.transform(v1);
+  return isPure(lView, adjustedIndex)
+    ? pureFunction1Internal(
+        lView,
+        getBindingRoot(),
+        offset,
+        pipeInstance.transform,
+        v1,
+        pipeInstance,
+      )
+    : pipeInstance.transform(v1);
 }
 
 /**
@@ -187,10 +201,17 @@ export function ɵɵpipeBind2(index: number, slotOffset: number, v1: any, v2: an
   const adjustedIndex = index + HEADER_OFFSET;
   const lView = getLView();
   const pipeInstance = load<PipeTransform>(lView, adjustedIndex);
-  return isPure(lView, adjustedIndex) ?
-      pureFunction2Internal(
-          lView, getBindingRoot(), slotOffset, pipeInstance.transform, v1, v2, pipeInstance) :
-      pipeInstance.transform(v1, v2);
+  return isPure(lView, adjustedIndex)
+    ? pureFunction2Internal(
+        lView,
+        getBindingRoot(),
+        slotOffset,
+        pipeInstance.transform,
+        v1,
+        v2,
+        pipeInstance,
+      )
+    : pipeInstance.transform(v1, v2);
 }
 
 /**
@@ -211,10 +232,18 @@ export function ɵɵpipeBind3(index: number, slotOffset: number, v1: any, v2: an
   const adjustedIndex = index + HEADER_OFFSET;
   const lView = getLView();
   const pipeInstance = load<PipeTransform>(lView, adjustedIndex);
-  return isPure(lView, adjustedIndex) ?
-      pureFunction3Internal(
-          lView, getBindingRoot(), slotOffset, pipeInstance.transform, v1, v2, v3, pipeInstance) :
-      pipeInstance.transform(v1, v2, v3);
+  return isPure(lView, adjustedIndex)
+    ? pureFunction3Internal(
+        lView,
+        getBindingRoot(),
+        slotOffset,
+        pipeInstance.transform,
+        v1,
+        v2,
+        v3,
+        pipeInstance,
+      )
+    : pipeInstance.transform(v1, v2, v3);
 }
 
 /**
@@ -233,14 +262,29 @@ export function ɵɵpipeBind3(index: number, slotOffset: number, v1: any, v2: an
  * @codeGenApi
  */
 export function ɵɵpipeBind4(
-    index: number, slotOffset: number, v1: any, v2: any, v3: any, v4: any): any {
+  index: number,
+  slotOffset: number,
+  v1: any,
+  v2: any,
+  v3: any,
+  v4: any,
+): any {
   const adjustedIndex = index + HEADER_OFFSET;
   const lView = getLView();
   const pipeInstance = load<PipeTransform>(lView, adjustedIndex);
-  return isPure(lView, adjustedIndex) ? pureFunction4Internal(
-                                            lView, getBindingRoot(), slotOffset,
-                                            pipeInstance.transform, v1, v2, v3, v4, pipeInstance) :
-                                        pipeInstance.transform(v1, v2, v3, v4);
+  return isPure(lView, adjustedIndex)
+    ? pureFunction4Internal(
+        lView,
+        getBindingRoot(),
+        slotOffset,
+        pipeInstance.transform,
+        v1,
+        v2,
+        v3,
+        v4,
+        pipeInstance,
+      )
+    : pipeInstance.transform(v1, v2, v3, v4);
 }
 
 /**
@@ -259,10 +303,16 @@ export function ɵɵpipeBindV(index: number, slotOffset: number, values: [any, .
   const adjustedIndex = index + HEADER_OFFSET;
   const lView = getLView();
   const pipeInstance = load<PipeTransform>(lView, adjustedIndex);
-  return isPure(lView, adjustedIndex) ?
-      pureFunctionVInternal(
-          lView, getBindingRoot(), slotOffset, pipeInstance.transform, values, pipeInstance) :
-      pipeInstance.transform.apply(pipeInstance, values);
+  return isPure(lView, adjustedIndex)
+    ? pureFunctionVInternal(
+        lView,
+        getBindingRoot(),
+        slotOffset,
+        pipeInstance.transform,
+        values,
+        pipeInstance,
+      )
+    : pipeInstance.transform.apply(pipeInstance, values);
 }
 
 function isPure(lView: LView, index: number): boolean {
diff --git a/packages/core/src/render3/profiler.ts b/packages/core/src/render3/profiler.ts
index fd908f5db07f0..b60fd56028080 100644
--- a/packages/core/src/render3/profiler.ts
+++ b/packages/core/src/render3/profiler.ts
@@ -64,11 +64,10 @@ export const enum ProfilerEvent {
  * Profiler function which the runtime will invoke before and after user code.
  */
 export interface Profiler {
-  (event: ProfilerEvent, instance: {}|null, hookOrListener?: (e?: any) => any): void;
+  (event: ProfilerEvent, instance: {} | null, hookOrListener?: (e?: any) => any): void;
 }
 
-
-let profilerCallback: Profiler|null = null;
+let profilerCallback: Profiler | null = null;
 
 /**
  * Sets the callback function which will be invoked before and after performing certain actions at
@@ -80,7 +79,7 @@ let profilerCallback: Profiler|null = null;
  *
  * @param profiler function provided by the caller or null value to disable profiling.
  */
-export const setProfiler = (profiler: Profiler|null) => {
+export const setProfiler = (profiler: Profiler | null) => {
   profilerCallback = profiler;
 };
 
@@ -93,8 +92,11 @@ export const setProfiler = (profiler: Profiler|null) => {
  *  execution context
  * @returns
  */
-export const profiler: Profiler = function(
-    event: ProfilerEvent, instance: {}|null, hookOrListener?: (e?: any) => any) {
+export const profiler: Profiler = function (
+  event: ProfilerEvent,
+  instance: {} | null,
+  hookOrListener?: (e?: any) => any,
+) {
   if (profilerCallback != null /* both `null` and `undefined` */) {
     profilerCallback(event, instance, hookOrListener);
   }
diff --git a/packages/core/src/render3/pure_function.ts b/packages/core/src/render3/pure_function.ts
index 6db19df34d4bd..d6249a3e907c4 100644
--- a/packages/core/src/render3/pure_function.ts
+++ b/packages/core/src/render3/pure_function.ts
@@ -7,12 +7,18 @@
  */
 
 import {assertIndexInRange} from '../util/assert';
-import {bindingUpdated, bindingUpdated2, bindingUpdated3, bindingUpdated4, getBinding, updateBinding} from './bindings';
+import {
+  bindingUpdated,
+  bindingUpdated2,
+  bindingUpdated3,
+  bindingUpdated4,
+  getBinding,
+  updateBinding,
+} from './bindings';
 import {LView} from './interfaces/view';
 import {getBindingRoot, getLView} from './state';
 import {NO_CHANGE} from './tokens';
 
-
 /**
  * Bindings for pure functions are stored after regular bindings.
  *
@@ -45,9 +51,9 @@ import {NO_CHANGE} from './tokens';
 export function ɵɵpureFunction0<T>(slotOffset: number, pureFn: () => T, thisArg?: any): T {
   const bindingIndex = getBindingRoot() + slotOffset;
   const lView = getLView();
-  return lView[bindingIndex] === NO_CHANGE ?
-      updateBinding(lView, bindingIndex, thisArg ? pureFn.call(thisArg) : pureFn()) :
-      getBinding(lView, bindingIndex);
+  return lView[bindingIndex] === NO_CHANGE
+    ? updateBinding(lView, bindingIndex, thisArg ? pureFn.call(thisArg) : pureFn())
+    : getBinding(lView, bindingIndex);
 }
 
 /**
@@ -63,7 +69,11 @@ export function ɵɵpureFunction0<T>(slotOffset: number, pureFn: () => T, thisAr
  * @codeGenApi
  */
 export function ɵɵpureFunction1(
-    slotOffset: number, pureFn: (v: any) => any, exp: any, thisArg?: any): any {
+  slotOffset: number,
+  pureFn: (v: any) => any,
+  exp: any,
+  thisArg?: any,
+): any {
   return pureFunction1Internal(getLView(), getBindingRoot(), slotOffset, pureFn, exp, thisArg);
 }
 
@@ -81,10 +91,21 @@ export function ɵɵpureFunction1(
  * @codeGenApi
  */
 export function ɵɵpureFunction2(
-    slotOffset: number, pureFn: (v1: any, v2: any) => any, exp1: any, exp2: any,
-    thisArg?: any): any {
+  slotOffset: number,
+  pureFn: (v1: any, v2: any) => any,
+  exp1: any,
+  exp2: any,
+  thisArg?: any,
+): any {
   return pureFunction2Internal(
-      getLView(), getBindingRoot(), slotOffset, pureFn, exp1, exp2, thisArg);
+    getLView(),
+    getBindingRoot(),
+    slotOffset,
+    pureFn,
+    exp1,
+    exp2,
+    thisArg,
+  );
 }
 
 /**
@@ -102,10 +123,23 @@ export function ɵɵpureFunction2(
  * @codeGenApi
  */
 export function ɵɵpureFunction3(
-    slotOffset: number, pureFn: (v1: any, v2: any, v3: any) => any, exp1: any, exp2: any, exp3: any,
-    thisArg?: any): any {
+  slotOffset: number,
+  pureFn: (v1: any, v2: any, v3: any) => any,
+  exp1: any,
+  exp2: any,
+  exp3: any,
+  thisArg?: any,
+): any {
   return pureFunction3Internal(
-      getLView(), getBindingRoot(), slotOffset, pureFn, exp1, exp2, exp3, thisArg);
+    getLView(),
+    getBindingRoot(),
+    slotOffset,
+    pureFn,
+    exp1,
+    exp2,
+    exp3,
+    thisArg,
+  );
 }
 
 /**
@@ -124,10 +158,25 @@ export function ɵɵpureFunction3(
  * @codeGenApi
  */
 export function ɵɵpureFunction4(
-    slotOffset: number, pureFn: (v1: any, v2: any, v3: any, v4: any) => any, exp1: any, exp2: any,
-    exp3: any, exp4: any, thisArg?: any): any {
+  slotOffset: number,
+  pureFn: (v1: any, v2: any, v3: any, v4: any) => any,
+  exp1: any,
+  exp2: any,
+  exp3: any,
+  exp4: any,
+  thisArg?: any,
+): any {
   return pureFunction4Internal(
-      getLView(), getBindingRoot(), slotOffset, pureFn, exp1, exp2, exp3, exp4, thisArg);
+    getLView(),
+    getBindingRoot(),
+    slotOffset,
+    pureFn,
+    exp1,
+    exp2,
+    exp3,
+    exp4,
+    thisArg,
+  );
 }
 
 /**
@@ -147,17 +196,27 @@ export function ɵɵpureFunction4(
  * @codeGenApi
  */
 export function ɵɵpureFunction5(
-    slotOffset: number, pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any) => any, exp1: any,
-    exp2: any, exp3: any, exp4: any, exp5: any, thisArg?: any): any {
+  slotOffset: number,
+  pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any) => any,
+  exp1: any,
+  exp2: any,
+  exp3: any,
+  exp4: any,
+  exp5: any,
+  thisArg?: any,
+): any {
   const bindingIndex = getBindingRoot() + slotOffset;
   const lView = getLView();
   const different = bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4);
-  return bindingUpdated(lView, bindingIndex + 4, exp5) || different ?
-      updateBinding(
-          lView, bindingIndex + 5,
-          thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5) :
-                    pureFn(exp1, exp2, exp3, exp4, exp5)) :
-      getBinding(lView, bindingIndex + 5);
+  return bindingUpdated(lView, bindingIndex + 4, exp5) || different
+    ? updateBinding(
+        lView,
+        bindingIndex + 5,
+        thisArg
+          ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5)
+          : pureFn(exp1, exp2, exp3, exp4, exp5),
+      )
+    : getBinding(lView, bindingIndex + 5);
 }
 
 /**
@@ -178,17 +237,28 @@ export function ɵɵpureFunction5(
  * @codeGenApi
  */
 export function ɵɵpureFunction6(
-    slotOffset: number, pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any) => any,
-    exp1: any, exp2: any, exp3: any, exp4: any, exp5: any, exp6: any, thisArg?: any): any {
+  slotOffset: number,
+  pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any) => any,
+  exp1: any,
+  exp2: any,
+  exp3: any,
+  exp4: any,
+  exp5: any,
+  exp6: any,
+  thisArg?: any,
+): any {
   const bindingIndex = getBindingRoot() + slotOffset;
   const lView = getLView();
   const different = bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4);
-  return bindingUpdated2(lView, bindingIndex + 4, exp5, exp6) || different ?
-      updateBinding(
-          lView, bindingIndex + 6,
-          thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6) :
-                    pureFn(exp1, exp2, exp3, exp4, exp5, exp6)) :
-      getBinding(lView, bindingIndex + 6);
+  return bindingUpdated2(lView, bindingIndex + 4, exp5, exp6) || different
+    ? updateBinding(
+        lView,
+        bindingIndex + 6,
+        thisArg
+          ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6)
+          : pureFn(exp1, exp2, exp3, exp4, exp5, exp6),
+      )
+    : getBinding(lView, bindingIndex + 6);
 }
 
 /**
@@ -210,18 +280,29 @@ export function ɵɵpureFunction6(
  * @codeGenApi
  */
 export function ɵɵpureFunction7(
-    slotOffset: number,
-    pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any) => any, exp1: any,
-    exp2: any, exp3: any, exp4: any, exp5: any, exp6: any, exp7: any, thisArg?: any): any {
+  slotOffset: number,
+  pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any) => any,
+  exp1: any,
+  exp2: any,
+  exp3: any,
+  exp4: any,
+  exp5: any,
+  exp6: any,
+  exp7: any,
+  thisArg?: any,
+): any {
   const bindingIndex = getBindingRoot() + slotOffset;
   const lView = getLView();
   let different = bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4);
-  return bindingUpdated3(lView, bindingIndex + 4, exp5, exp6, exp7) || different ?
-      updateBinding(
-          lView, bindingIndex + 7,
-          thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6, exp7) :
-                    pureFn(exp1, exp2, exp3, exp4, exp5, exp6, exp7)) :
-      getBinding(lView, bindingIndex + 7);
+  return bindingUpdated3(lView, bindingIndex + 4, exp5, exp6, exp7) || different
+    ? updateBinding(
+        lView,
+        bindingIndex + 7,
+        thisArg
+          ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6, exp7)
+          : pureFn(exp1, exp2, exp3, exp4, exp5, exp6, exp7),
+      )
+    : getBinding(lView, bindingIndex + 7);
 }
 
 /**
@@ -244,19 +325,30 @@ export function ɵɵpureFunction7(
  * @codeGenApi
  */
 export function ɵɵpureFunction8(
-    slotOffset: number,
-    pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any, v8: any) => any,
-    exp1: any, exp2: any, exp3: any, exp4: any, exp5: any, exp6: any, exp7: any, exp8: any,
-    thisArg?: any): any {
+  slotOffset: number,
+  pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any, v8: any) => any,
+  exp1: any,
+  exp2: any,
+  exp3: any,
+  exp4: any,
+  exp5: any,
+  exp6: any,
+  exp7: any,
+  exp8: any,
+  thisArg?: any,
+): any {
   const bindingIndex = getBindingRoot() + slotOffset;
   const lView = getLView();
   const different = bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4);
-  return bindingUpdated4(lView, bindingIndex + 4, exp5, exp6, exp7, exp8) || different ?
-      updateBinding(
-          lView, bindingIndex + 8,
-          thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8) :
-                    pureFn(exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8)) :
-      getBinding(lView, bindingIndex + 8);
+  return bindingUpdated4(lView, bindingIndex + 4, exp5, exp6, exp7, exp8) || different
+    ? updateBinding(
+        lView,
+        bindingIndex + 8,
+        thisArg
+          ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8)
+          : pureFn(exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8),
+      )
+    : getBinding(lView, bindingIndex + 8);
 }
 
 /**
@@ -275,7 +367,11 @@ export function ɵɵpureFunction8(
  * @codeGenApi
  */
 export function ɵɵpureFunctionV(
-    slotOffset: number, pureFn: (...v: any[]) => any, exps: any[], thisArg?: any): any {
+  slotOffset: number,
+  pureFn: (...v: any[]) => any,
+  exps: any[],
+  thisArg?: any,
+): any {
   return pureFunctionVInternal(getLView(), getBindingRoot(), slotOffset, pureFn, exps, thisArg);
 }
 
@@ -305,15 +401,19 @@ function getPureFunctionReturnValue(lView: LView, returnValueIndex: number) {
  * @returns Updated or cached value
  */
 export function pureFunction1Internal(
-    lView: LView, bindingRoot: number, slotOffset: number, pureFn: (v: any) => any, exp: any,
-    thisArg?: any): any {
+  lView: LView,
+  bindingRoot: number,
+  slotOffset: number,
+  pureFn: (v: any) => any,
+  exp: any,
+  thisArg?: any,
+): any {
   const bindingIndex = bindingRoot + slotOffset;
-  return bindingUpdated(lView, bindingIndex, exp) ?
-      updateBinding(lView, bindingIndex + 1, thisArg ? pureFn.call(thisArg, exp) : pureFn(exp)) :
-      getPureFunctionReturnValue(lView, bindingIndex + 1);
+  return bindingUpdated(lView, bindingIndex, exp)
+    ? updateBinding(lView, bindingIndex + 1, thisArg ? pureFn.call(thisArg, exp) : pureFn(exp))
+    : getPureFunctionReturnValue(lView, bindingIndex + 1);
 }
 
-
 /**
  * If the value of any provided exp has changed, calls the pure function to return
  * an updated value. Or if no values have changed, returns cached value.
@@ -328,14 +428,22 @@ export function pureFunction1Internal(
  * @returns Updated or cached value
  */
 export function pureFunction2Internal(
-    lView: LView, bindingRoot: number, slotOffset: number, pureFn: (v1: any, v2: any) => any,
-    exp1: any, exp2: any, thisArg?: any): any {
+  lView: LView,
+  bindingRoot: number,
+  slotOffset: number,
+  pureFn: (v1: any, v2: any) => any,
+  exp1: any,
+  exp2: any,
+  thisArg?: any,
+): any {
   const bindingIndex = bindingRoot + slotOffset;
-  return bindingUpdated2(lView, bindingIndex, exp1, exp2) ?
-      updateBinding(
-          lView, bindingIndex + 2,
-          thisArg ? pureFn.call(thisArg, exp1, exp2) : pureFn(exp1, exp2)) :
-      getPureFunctionReturnValue(lView, bindingIndex + 2);
+  return bindingUpdated2(lView, bindingIndex, exp1, exp2)
+    ? updateBinding(
+        lView,
+        bindingIndex + 2,
+        thisArg ? pureFn.call(thisArg, exp1, exp2) : pureFn(exp1, exp2),
+      )
+    : getPureFunctionReturnValue(lView, bindingIndex + 2);
 }
 
 /**
@@ -353,18 +461,25 @@ export function pureFunction2Internal(
  * @returns Updated or cached value
  */
 export function pureFunction3Internal(
-    lView: LView, bindingRoot: number, slotOffset: number,
-    pureFn: (v1: any, v2: any, v3: any) => any, exp1: any, exp2: any, exp3: any,
-    thisArg?: any): any {
+  lView: LView,
+  bindingRoot: number,
+  slotOffset: number,
+  pureFn: (v1: any, v2: any, v3: any) => any,
+  exp1: any,
+  exp2: any,
+  exp3: any,
+  thisArg?: any,
+): any {
   const bindingIndex = bindingRoot + slotOffset;
-  return bindingUpdated3(lView, bindingIndex, exp1, exp2, exp3) ?
-      updateBinding(
-          lView, bindingIndex + 3,
-          thisArg ? pureFn.call(thisArg, exp1, exp2, exp3) : pureFn(exp1, exp2, exp3)) :
-      getPureFunctionReturnValue(lView, bindingIndex + 3);
+  return bindingUpdated3(lView, bindingIndex, exp1, exp2, exp3)
+    ? updateBinding(
+        lView,
+        bindingIndex + 3,
+        thisArg ? pureFn.call(thisArg, exp1, exp2, exp3) : pureFn(exp1, exp2, exp3),
+      )
+    : getPureFunctionReturnValue(lView, bindingIndex + 3);
 }
 
-
 /**
  * If the value of any provided exp has changed, calls the pure function to return
  * an updated value. Or if no values have changed, returns cached value.
@@ -382,15 +497,24 @@ export function pureFunction3Internal(
  *
  */
 export function pureFunction4Internal(
-    lView: LView, bindingRoot: number, slotOffset: number,
-    pureFn: (v1: any, v2: any, v3: any, v4: any) => any, exp1: any, exp2: any, exp3: any, exp4: any,
-    thisArg?: any): any {
+  lView: LView,
+  bindingRoot: number,
+  slotOffset: number,
+  pureFn: (v1: any, v2: any, v3: any, v4: any) => any,
+  exp1: any,
+  exp2: any,
+  exp3: any,
+  exp4: any,
+  thisArg?: any,
+): any {
   const bindingIndex = bindingRoot + slotOffset;
-  return bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4) ?
-      updateBinding(
-          lView, bindingIndex + 4,
-          thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4) : pureFn(exp1, exp2, exp3, exp4)) :
-      getPureFunctionReturnValue(lView, bindingIndex + 4);
+  return bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4)
+    ? updateBinding(
+        lView,
+        bindingIndex + 4,
+        thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4) : pureFn(exp1, exp2, exp3, exp4),
+      )
+    : getPureFunctionReturnValue(lView, bindingIndex + 4);
 }
 
 /**
@@ -409,13 +533,19 @@ export function pureFunction4Internal(
  * @returns Updated or cached value
  */
 export function pureFunctionVInternal(
-    lView: LView, bindingRoot: number, slotOffset: number, pureFn: (...v: any[]) => any,
-    exps: any[], thisArg?: any): any {
+  lView: LView,
+  bindingRoot: number,
+  slotOffset: number,
+  pureFn: (...v: any[]) => any,
+  exps: any[],
+  thisArg?: any,
+): any {
   let bindingIndex = bindingRoot + slotOffset;
   let different = false;
   for (let i = 0; i < exps.length; i++) {
     bindingUpdated(lView, bindingIndex++, exps[i]) && (different = true);
   }
-  return different ? updateBinding(lView, bindingIndex, pureFn.apply(thisArg, exps)) :
-                     getPureFunctionReturnValue(lView, bindingIndex);
+  return different
+    ? updateBinding(lView, bindingIndex, pureFn.apply(thisArg, exps))
+    : getPureFunctionReturnValue(lView, bindingIndex);
 }
diff --git a/packages/core/src/render3/query.ts b/packages/core/src/render3/query.ts
index 7b44a51428fac..f6a820776c9c3 100644
--- a/packages/core/src/render3/query.ts
+++ b/packages/core/src/render3/query.ts
@@ -21,14 +21,20 @@ import {assertFirstCreatePass, assertLContainer} from './assert';
 import {getNodeInjectable, locateDirectiveOrProvider} from './di';
 import {storeCleanupWithContext} from './instructions/shared';
 import {CONTAINER_HEADER_OFFSET, LContainer, MOVED_VIEWS} from './interfaces/container';
-import {TContainerNode, TElementContainerNode, TElementNode, TNode, TNodeType} from './interfaces/node';
+import {
+  TContainerNode,
+  TElementContainerNode,
+  TElementNode,
+  TNode,
+  TNodeType,
+} from './interfaces/node';
 import {LQueries, LQuery, QueryFlags, TQueries, TQuery, TQueryMetadata} from './interfaces/query';
 import {DECLARATION_LCONTAINER, LView, PARENT, QUERIES, TVIEW, TView} from './interfaces/view';
 import {assertTNodeType} from './node_assert';
 import {getCurrentTNode, getLView, getTView} from './state';
 
 class LQuery_<T> implements LQuery<T> {
-  matches: (T|null)[]|null = null;
+  matches: (T | null)[] | null = null;
   constructor(public queryList: QueryList<T>) {}
   clone(): LQuery<T> {
     return new LQuery_(this.queryList);
@@ -41,11 +47,11 @@ class LQuery_<T> implements LQuery<T> {
 class LQueries_ implements LQueries {
   constructor(public queries: LQuery<any>[] = []) {}
 
-  createEmbeddedView(tView: TView): LQueries|null {
+  createEmbeddedView(tView: TView): LQueries | null {
     const tQueries = tView.queries;
     if (tQueries !== null) {
       const noOfInheritedQueries =
-          tView.contentQueries !== null ? tView.contentQueries[0] : tQueries.length;
+        tView.contentQueries !== null ? tView.contentQueries[0] : tQueries.length;
       const viewLQueries: LQuery<any>[] = [];
 
       // An embedded view has queries propagated from a declaration view at the beginning of the
@@ -86,10 +92,12 @@ class LQueries_ implements LQueries {
 }
 
 export class TQueryMetadata_ implements TQueryMetadata {
-  public predicate: ProviderToken<unknown>|string[];
+  public predicate: ProviderToken<unknown> | string[];
   constructor(
-      predicate: ProviderToken<unknown>|string[]|string, public flags: QueryFlags,
-      public read: any = null) {
+    predicate: ProviderToken<unknown> | string[] | string,
+    public flags: QueryFlags,
+    public read: any = null,
+  ) {
     // Compiler might not be able to pre-optimize and split multiple selectors.
     if (typeof predicate === 'string') {
       this.predicate = splitQueryMultiSelectors(predicate);
@@ -104,8 +112,10 @@ class TQueries_ implements TQueries {
 
   elementStart(tView: TView, tNode: TNode): void {
     ngDevMode &&
-        assertFirstCreatePass(
-            tView, 'Queries should collect results on the first template pass only');
+      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);
     }
@@ -115,8 +125,8 @@ class TQueries_ implements TQueries {
       this.queries[i].elementEnd(tNode);
     }
   }
-  embeddedTView(tNode: TNode): TQueries|null {
-    let queriesForTemplateRef: TQuery[]|null = null;
+  embeddedTView(tNode: TNode): TQueries | null {
+    let queriesForTemplateRef: TQuery[] | null = null;
 
     for (let i = 0; i < this.length; i++) {
       const childQueryIndex = queriesForTemplateRef !== null ? queriesForTemplateRef.length : 0;
@@ -137,8 +147,10 @@ class TQueries_ implements TQueries {
 
   template(tView: TView, tNode: TNode): void {
     ngDevMode &&
-        assertFirstCreatePass(
-            tView, 'Queries should collect results on the first template pass only');
+      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);
     }
@@ -159,7 +171,7 @@ class TQueries_ implements TQueries {
 }
 
 class TQuery_ implements TQuery {
-  matches: number[]|null = null;
+  matches: number[] | null = null;
   indexInDeclarationView = -1;
   crossesNgTemplate = false;
 
@@ -177,7 +189,10 @@ class TQuery_ implements TQuery {
    */
   private _appliesToNextNode = true;
 
-  constructor(public metadata: TQueryMetadata, nodeIndex: number = -1) {
+  constructor(
+    public metadata: TQueryMetadata,
+    nodeIndex: number = -1,
+  ) {
     this._declarationNodeIndex = nodeIndex;
   }
 
@@ -197,7 +212,7 @@ class TQuery_ implements TQuery {
     this.elementStart(tView, tNode);
   }
 
-  embeddedTView(tNode: TNode, childQueryIndex: number): TQuery|null {
+  embeddedTView(tNode: TNode, childQueryIndex: number): TQuery | null {
     if (this.isApplyingToNode(tNode)) {
       this.crossesNgTemplate = true;
       // A marker indicating a `<ng-template>` element (a placeholder for query results from
@@ -209,8 +224,10 @@ class TQuery_ implements TQuery {
   }
 
   private isApplyingToNode(tNode: TNode): boolean {
-    if (this._appliesToNextNode &&
-        (this.metadata.flags & QueryFlags.descendants) !== QueryFlags.descendants) {
+    if (
+      this._appliesToNextNode &&
+      (this.metadata.flags & QueryFlags.descendants) !== 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
@@ -223,8 +240,11 @@ class TQuery_ implements TQuery {
       // - <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 & TNodeType.ElementContainer) &&
-             parent.index !== declarationNodeIdx) {
+      while (
+        parent !== null &&
+        parent.type & TNodeType.ElementContainer &&
+        parent.index !== declarationNodeIdx
+      ) {
         parent = parent.parent;
       }
       return declarationNodeIdx === (parent !== null ? parent.index : -1);
@@ -240,7 +260,10 @@ class TQuery_ implements TQuery {
         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));
+          tView,
+          tNode,
+          locateDirectiveOrProvider(tNode, tView, name, false, false),
+        );
       }
     } else {
       if ((predicate as any) === ViewEngine_TemplateRef) {
@@ -249,21 +272,32 @@ class TQuery_ implements TQuery {
         }
       } else {
         this.matchTNodeWithReadOption(
-            tView, tNode, locateDirectiveOrProvider(tNode, tView, predicate, false, false));
+          tView,
+          tNode,
+          locateDirectiveOrProvider(tNode, tView, predicate, false, false),
+        );
       }
     }
   }
 
-  private matchTNodeWithReadOption(tView: TView, tNode: TNode, nodeMatchIdx: number|null): void {
+  private matchTNodeWithReadOption(tView: TView, tNode: TNode, nodeMatchIdx: number | null): void {
     if (nodeMatchIdx !== null) {
       const read = this.metadata.read;
       if (read !== null) {
-        if (read === ViewEngine_ElementRef || read === ViewContainerRef ||
-            read === ViewEngine_TemplateRef && (tNode.type & TNodeType.Container)) {
+        if (
+          read === ViewEngine_ElementRef ||
+          read === ViewContainerRef ||
+          (read === ViewEngine_TemplateRef && tNode.type & TNodeType.Container)
+        ) {
           this.addMatch(tNode.index, -2);
         } else {
-          const directiveOrProviderIdx =
-              locateDirectiveOrProvider(tNode, tView, read, false, false);
+          const directiveOrProviderIdx = locateDirectiveOrProvider(
+            tNode,
+            tView,
+            read,
+            false,
+            false,
+          );
           if (directiveOrProviderIdx !== null) {
             this.addMatch(tNode.index, directiveOrProviderIdx);
           }
@@ -291,7 +325,7 @@ class TQuery_ implements TQuery {
  * @param selector selector to match
  * @returns directive index, -1 or null if a selector didn't match any of the local names
  */
-function getIdxOfMatchingSelector(tNode: TNode, selector: string): number|null {
+function getIdxOfMatchingSelector(tNode: TNode, selector: string): number | null {
   const localNames = tNode.localNames;
   if (localNames !== null) {
     for (let i = 0; i < localNames.length; i += 2) {
@@ -303,7 +337,6 @@ function getIdxOfMatchingSelector(tNode: TNode, selector: string): number|null {
   return null;
 }
 
-
 function createResultByTNodeType(tNode: TNode, currentView: LView): any {
   if (tNode.type & (TNodeType.AnyRNode | TNodeType.ElementContainer)) {
     return createElementRef(tNode, currentView);
@@ -313,7 +346,6 @@ function createResultByTNodeType(tNode: TNode, currentView: LView): any {
   return null;
 }
 
-
 function createResultForNode(lView: LView, tNode: TNode, matchingIdx: number, read: any): any {
   if (matchingIdx === -1) {
     // if read token and / or strategy is not specified, detect it using appropriate tNode type
@@ -335,12 +367,16 @@ function createSpecialToken(lView: LView, tNode: TNode, read: any): any {
   } else if (read === ViewContainerRef) {
     ngDevMode && assertTNodeType(tNode, TNodeType.AnyRNode | TNodeType.AnyContainer);
     return createContainerRef(
-        tNode as TElementNode | TContainerNode | TElementContainerNode, lView);
+      tNode as TElementNode | TContainerNode | TElementContainerNode,
+      lView,
+    );
   } else {
     ngDevMode &&
-        throwError(
-            `Special token to read should be one of ElementRef, TemplateRef or ViewContainerRef but got ${
-                stringify(read)}.`);
+      throwError(
+        `Special token to read should be one of ElementRef, TemplateRef or ViewContainerRef but got ${stringify(
+          read,
+        )}.`,
+      );
   }
 }
 
@@ -350,12 +386,16 @@ function createSpecialToken(lView: LView, tNode: TNode, read: any): any {
  * doesn't change).
  */
 function materializeViewResults<T>(
-    tView: TView, lView: LView, tQuery: TQuery, queryIndex: number): T[] {
+  tView: TView,
+  lView: LView,
+  tQuery: TQuery,
+  queryIndex: number,
+): T[] {
   const lQuery = lView[QUERIES]!.queries![queryIndex];
   if (lQuery.matches === null) {
     const tViewData = tView.data;
     const tQueryMatches = tQuery.matches;
-    const result: Array<T|null> = [];
+    const result: Array<T | null> = [];
     for (let i = 0; tQueryMatches !== null && i < tQueryMatches.length; i += 2) {
       const matchedNodeIdx = tQueryMatches[i];
       if (matchedNodeIdx < 0) {
@@ -418,11 +458,9 @@ function collectQueryResults<T>(tView: TView, lView: LView, queryIndex: number,
   return result;
 }
 
-
-
 export function loadQueryInternal<T>(lView: LView, queryIndex: number): QueryList<T> {
   ngDevMode &&
-      assertDefined(lView[QUERIES], 'LQueries should be defined when trying to load a query');
+    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;
 }
@@ -434,7 +472,8 @@ export function loadQueryInternal<T>(lView: LView, queryIndex: number): QueryLis
  */
 function createLQuery<T>(tView: TView, lView: LView, flags: QueryFlags): number {
   const queryList = new QueryList<T>(
-      (flags & QueryFlags.emitDistinctChangesOnly) === QueryFlags.emitDistinctChangesOnly);
+    (flags & QueryFlags.emitDistinctChangesOnly) === QueryFlags.emitDistinctChangesOnly,
+  );
 
   storeCleanupWithContext(tView, lView, queryList, queryList.destroy);
 
@@ -443,7 +482,10 @@ function createLQuery<T>(tView: TView, lView: LView, flags: QueryFlags): number
 }
 
 export function createViewQuery<T>(
-    predicate: ProviderToken<unknown>|string[]|string, flags: QueryFlags, read?: any): number {
+  predicate: ProviderToken<unknown> | string[] | string,
+  flags: QueryFlags,
+  read?: any,
+): number {
   ngDevMode && assertNumber(flags, 'Expecting flags');
   const tView = getTView();
   if (tView.firstCreatePass) {
@@ -457,8 +499,11 @@ export function createViewQuery<T>(
 }
 
 export function createContentQuery<T>(
-    directiveIndex: number, predicate: ProviderToken<unknown>|string[]|string, flags: QueryFlags,
-    read?: ProviderToken<T>): number {
+  directiveIndex: number,
+  predicate: ProviderToken<unknown> | string[] | string,
+  flags: QueryFlags,
+  read?: ProviderToken<T>,
+): number {
   ngDevMode && assertNumber(flags, 'Expecting flags');
   const tView = getTView();
   if (tView.firstCreatePass) {
@@ -475,7 +520,7 @@ export function createContentQuery<T>(
 
 /** Splits multiple selectors in the locator. */
 function splitQueryMultiSelectors(locator: string): string[] {
-  return locator.split(',').map(s => s.trim());
+  return locator.split(',').map((s) => s.trim());
 }
 
 export function createTQuery(tView: TView, metadata: TQueryMetadata, nodeIndex: number): void {
@@ -485,8 +530,9 @@ export function createTQuery(tView: TView, metadata: TQueryMetadata, nodeIndex:
 
 export function saveContentQueryAndDirectiveIndex(tView: TView, directiveIndex: number) {
   const tViewContentQueries = tView.contentQueries || (tView.contentQueries = []);
-  const lastSavedDirectiveIndex =
-      tViewContentQueries.length ? tViewContentQueries[tViewContentQueries.length - 1] : -1;
+  const lastSavedDirectiveIndex = tViewContentQueries.length
+    ? tViewContentQueries[tViewContentQueries.length - 1]
+    : -1;
   if (directiveIndex !== lastSavedDirectiveIndex) {
     tViewContentQueries.push(tView.queries!.length - 1, directiveIndex);
   }
@@ -505,6 +551,7 @@ export function getTQuery(tView: TView, index: number): TQuery {
 export function getQueryResults<V>(lView: LView, queryIndex: number): V[] {
   const tView = lView[TVIEW];
   const tQuery = getTQuery(tView, queryIndex);
-  return tQuery.crossesNgTemplate ? collectQueryResults<V>(tView, lView, queryIndex, []) :
-                                    materializeViewResults<V>(tView, lView, tQuery, queryIndex);
+  return tQuery.crossesNgTemplate
+    ? collectQueryResults<V>(tView, lView, queryIndex, [])
+    : materializeViewResults<V>(tView, lView, tQuery, queryIndex);
 }
diff --git a/packages/core/src/render3/query_reactive.ts b/packages/core/src/render3/query_reactive.ts
index 07c9382186093..afafee0347498 100644
--- a/packages/core/src/render3/query_reactive.ts
+++ b/packages/core/src/render3/query_reactive.ts
@@ -19,7 +19,7 @@ import {Signal} from './reactivity/api';
 import {signal, WritableSignal} from './reactivity/signal';
 import {getLView} from './state';
 
-interface QuerySignalNode<T> extends ComputedNode<T|ReadonlyArray<T>> {
+interface QuerySignalNode<T> extends ComputedNode<T | ReadonlyArray<T>> {
   _lView?: LView;
   _queryIndex?: number;
   _queryList?: QueryList<T>;
@@ -28,7 +28,7 @@ interface QuerySignalNode<T> extends ComputedNode<T|ReadonlyArray<T>> {
    * Stores the last seen, flattened results for a query. This is to avoid marking the signal result
    * computed as dirty when there was view manipulation that didn't impact final results.
    */
-  _flatValue?: T|ReadonlyArray<T>;
+  _flatValue?: T | ReadonlyArray<T>;
 }
 
 /**
@@ -55,8 +55,9 @@ function createQuerySignalFn<V>(firstOnly: boolean, required: boolean) {
 
     if (required && value === undefined) {
       throw new RuntimeError(
-          RuntimeErrorCode.REQUIRED_QUERY_NO_VALUE,
-          ngDevMode && 'Child query result is required but no value is available.');
+        RuntimeErrorCode.REQUIRED_QUERY_NO_VALUE,
+        ngDevMode && 'Child query result is required but no value is available.',
+      );
     }
 
     return value;
@@ -72,8 +73,10 @@ function createQuerySignalFn<V>(firstOnly: boolean, required: boolean) {
   return signalFn;
 }
 
-export function createSingleResultOptionalQuerySignalFn<ReadT>(): Signal<ReadT|undefined> {
-  return createQuerySignalFn(/* firstOnly */ true, /* required */ false) as Signal<ReadT|undefined>;
+export function createSingleResultOptionalQuerySignalFn<ReadT>(): Signal<ReadT | undefined> {
+  return createQuerySignalFn(/* firstOnly */ true, /* required */ false) as Signal<
+    ReadT | undefined
+  >;
 }
 
 export function createSingleResultRequiredQuerySignalFn<ReadT>(): Signal<ReadT> {
@@ -81,8 +84,9 @@ export function createSingleResultRequiredQuerySignalFn<ReadT>(): Signal<ReadT>
 }
 
 export function createMultiResultQuerySignalFn<ReadT>(): Signal<ReadonlyArray<ReadT>> {
-  return createQuerySignalFn(/* firstOnly */ false, /* required */ false) as
-      Signal<ReadonlyArray<ReadT>>;
+  return createQuerySignalFn(/* firstOnly */ false, /* required */ false) as Signal<
+    ReadonlyArray<ReadT>
+  >;
 }
 
 export function bindQueryToSignal(target: Signal<unknown>, queryIndex: number): void {
@@ -90,10 +94,10 @@ export function bindQueryToSignal(target: Signal<unknown>, queryIndex: number):
   node._lView = getLView();
   node._queryIndex = queryIndex;
   node._queryList = loadQueryInternal(node._lView, queryIndex);
-  node._queryList.onDirty(() => node._dirtyCounter.update(v => v + 1));
+  node._queryList.onDirty(() => node._dirtyCounter.update((v) => v + 1));
 }
 
-function refreshSignalQuery<V>(node: QuerySignalNode<V>, firstOnly: boolean): V|ReadonlyArray<V> {
+function refreshSignalQuery<V>(node: QuerySignalNode<V>, firstOnly: boolean): V | ReadonlyArray<V> {
   const lView = node._lView;
   const queryIndex = node._queryIndex;
 
@@ -108,7 +112,7 @@ function refreshSignalQuery<V>(node: QuerySignalNode<V>, firstOnly: boolean): V|
   // 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] & LViewFlags.CreationMode)) {
+  if (lView === undefined || queryIndex === undefined || lView[FLAGS] & LViewFlags.CreationMode) {
     return (firstOnly ? undefined : EMPTY_ARRAY) as V;
   }
 
@@ -124,7 +128,7 @@ function refreshSignalQuery<V>(node: QuerySignalNode<V>, firstOnly: boolean): V|
     // QueryList in the signal-based queries (perf follow-up)
     const resultChanged = (queryList as any as {_changesDetected: boolean})._changesDetected;
     if (resultChanged || node._flatValue === undefined) {
-      return node._flatValue = queryList.toArray();
+      return (node._flatValue = queryList.toArray());
     }
     return node._flatValue;
   }
diff --git a/packages/core/src/render3/queue_state_update.ts b/packages/core/src/render3/queue_state_update.ts
index 7f60c721e2b9c..8262758c5a39d 100644
--- a/packages/core/src/render3/queue_state_update.ts
+++ b/packages/core/src/render3/queue_state_update.ts
@@ -26,7 +26,7 @@ import {internalAfterNextRender} from './after_render_hooks';
  * in production.
  */
 
-export function queueStateUpdate(callback: VoidFunction, options?: {injector?: Injector;}): void {
+export function queueStateUpdate(callback: VoidFunction, options?: {injector?: Injector}): void {
   !options && assertInInjectionContext(queueStateUpdate);
   const injector = options?.injector ?? inject(Injector);
   const appRef = injector.get(ApplicationRef);
diff --git a/packages/core/src/render3/reactive_lview_consumer.ts b/packages/core/src/render3/reactive_lview_consumer.ts
index aae10bc9835a3..0f18a26bbaa39 100644
--- a/packages/core/src/render3/reactive_lview_consumer.ts
+++ b/packages/core/src/render3/reactive_lview_consumer.ts
@@ -13,7 +13,7 @@ import {markAncestorsForTraversal} from './util/view_utils';
 
 let freeConsumers: ReactiveLViewConsumer[] = [];
 export interface ReactiveLViewConsumer extends ReactiveNode {
-  lView: LView|null;
+  lView: LView | null;
   slot: typeof REACTIVE_TEMPLATE_CONSUMER;
 }
 
@@ -28,7 +28,7 @@ export function getOrBorrowReactiveLViewConsumer(lView: LView): ReactiveLViewCon
 
 function borrowReactiveLViewConsumer(lView: LView): ReactiveLViewConsumer {
   const consumer: ReactiveLViewConsumer =
-      freeConsumers.pop() ?? Object.create(REACTIVE_LVIEW_CONSUMER_NODE);
+    freeConsumers.pop() ?? Object.create(REACTIVE_LVIEW_CONSUMER_NODE);
   consumer.lView = lView;
   return consumer;
 }
@@ -42,7 +42,7 @@ export function maybeReturnReactiveLViewConsumer(consumer: ReactiveLViewConsumer
   freeConsumers.push(consumer);
 }
 
-const REACTIVE_LVIEW_CONSUMER_NODE: Omit<ReactiveLViewConsumer, 'lView'|'slot'> = {
+const REACTIVE_LVIEW_CONSUMER_NODE: Omit<ReactiveLViewConsumer, 'lView' | 'slot'> = {
   ...REACTIVE_NODE,
   consumerIsAlwaysLive: true,
   consumerMarkedDirty: (node: ReactiveLViewConsumer) => {
diff --git a/packages/core/src/render3/reactivity/api.ts b/packages/core/src/render3/reactivity/api.ts
index 633eb235000d0..be321f4138568 100644
--- a/packages/core/src/render3/reactivity/api.ts
+++ b/packages/core/src/render3/reactivity/api.ts
@@ -16,7 +16,7 @@ import {SIGNAL} from '@angular/core/primitives/signals';
  *
  * Ordinary values can be turned into `Signal`s with the `signal` function.
  */
-export type Signal<T> = (() => T)&{
+export type Signal<T> = (() => T) & {
   [SIGNAL]: unknown;
 };
 
diff --git a/packages/core/src/render3/reactivity/asserts.ts b/packages/core/src/render3/reactivity/asserts.ts
index e6cb3d7db6b64..7c174b8f45610 100644
--- a/packages/core/src/render3/reactivity/asserts.ts
+++ b/packages/core/src/render3/reactivity/asserts.ts
@@ -23,9 +23,11 @@ export function assertNotInReactiveContext(debugFn: Function, extraContext?: str
   // from being retained in the bundle regardless of minification.
   if (getActiveConsumer() !== null) {
     throw new RuntimeError(
-        RuntimeErrorCode.ASSERTION_NOT_INSIDE_REACTIVE_CONTEXT,
-        ngDevMode &&
-            `${debugFn.name}() cannot be called from within a reactive context.${
-                extraContext ? ` ${extraContext}` : ''}`);
+      RuntimeErrorCode.ASSERTION_NOT_INSIDE_REACTIVE_CONTEXT,
+      ngDevMode &&
+        `${debugFn.name}() cannot be called from within a reactive context.${
+          extraContext ? ` ${extraContext}` : ''
+        }`,
+    );
   }
 }
diff --git a/packages/core/src/render3/reactivity/effect.ts b/packages/core/src/render3/reactivity/effect.ts
index 34ee25f5af9a0..be05f978d2b65 100644
--- a/packages/core/src/render3/reactivity/effect.ts
+++ b/packages/core/src/render3/reactivity/effect.ts
@@ -23,7 +23,6 @@ import {assertNotInReactiveContext} from './asserts';
 import {performanceMarkFeature} from '../../util/performance';
 import {PendingTasks} from '../../pending_tasks';
 
-
 /**
  * An effect can, optionally, register a cleanup function. If registered, the cleanup is executed
  * before the next effect run. The cleanup function makes it possible to "cancel" any work that the
@@ -84,15 +83,15 @@ export abstract class EffectScheduler {
  */
 export class ZoneAwareEffectScheduler implements EffectScheduler {
   private queuedEffectCount = 0;
-  private queues = new Map<Zone|null, Set<SchedulableEffect>>();
+  private queues = new Map<Zone | null, Set<SchedulableEffect>>();
   private readonly pendingTasks = inject(PendingTasks);
-  private taskId: number|null = null;
+  private taskId: number | null = null;
 
   scheduleEffect(handle: SchedulableEffect): void {
     this.enqueue(handle);
 
     if (this.taskId === null) {
-      const taskId = this.taskId = this.pendingTasks.add();
+      const taskId = (this.taskId = this.pendingTasks.add());
       queueMicrotask(() => {
         this.flush();
         this.pendingTasks.remove(taskId);
@@ -153,16 +152,22 @@ export class ZoneAwareEffectScheduler implements EffectScheduler {
  * available/requested.
  */
 class EffectHandle implements EffectRef, SchedulableEffect {
-  unregisterOnDestroy: (() => void)|undefined;
+  unregisterOnDestroy: (() => void) | undefined;
   readonly watcher: Watch;
 
   constructor(
-      private scheduler: EffectScheduler,
-      private effectFn: (onCleanup: EffectCleanupRegisterFn) => void,
-      public creationZone: Zone|null, destroyRef: DestroyRef|null, private injector: Injector,
-      allowSignalWrites: boolean) {
+    private scheduler: EffectScheduler,
+    private effectFn: (onCleanup: EffectCleanupRegisterFn) => void,
+    public creationZone: Zone | null,
+    destroyRef: DestroyRef | null,
+    private injector: Injector,
+    allowSignalWrites: boolean,
+  ) {
     this.watcher = createWatch(
-        (onCleanup) => this.runEffect(onCleanup), () => this.schedule(), allowSignalWrites);
+      (onCleanup) => this.runEffect(onCleanup),
+      () => this.schedule(),
+      allowSignalWrites,
+    );
     this.unregisterOnDestroy = destroyRef?.onDestroy(() => this.destroy());
   }
 
@@ -243,23 +248,29 @@ export interface CreateEffectOptions {
  * @developerPreview
  */
 export function effect(
-    effectFn: (onCleanup: EffectCleanupRegisterFn) => void,
-    options?: CreateEffectOptions): EffectRef {
+  effectFn: (onCleanup: EffectCleanupRegisterFn) => void,
+  options?: CreateEffectOptions,
+): EffectRef {
   performanceMarkFeature('NgSignals');
   ngDevMode &&
-      assertNotInReactiveContext(
-          effect,
-          'Call `effect` outside of a reactive context. For example, schedule the ' +
-              'effect inside the component constructor.');
+    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);
+    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
@@ -269,7 +280,7 @@ export function effect(
   // 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}) as ViewRef<unknown>| null;
+  const cdr = injector.get(ChangeDetectorRef, null, {optional: true}) as ViewRef<unknown> | null;
   if (!cdr || !(cdr._lView[FLAGS] & 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
diff --git a/packages/core/src/render3/reactivity/signal.ts b/packages/core/src/render3/reactivity/signal.ts
index 4f55ac9ce81cd..912e8770bb9cb 100644
--- a/packages/core/src/render3/reactivity/signal.ts
+++ b/packages/core/src/render3/reactivity/signal.ts
@@ -6,7 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {createSignal, SIGNAL, SignalGetter, SignalNode, signalSetFn, signalUpdateFn} from '@angular/core/primitives/signals';
+import {
+  createSignal,
+  SIGNAL,
+  SignalGetter,
+  SignalNode,
+  signalSetFn,
+  signalUpdateFn,
+} from '@angular/core/primitives/signals';
 
 import {performanceMarkFeature} from '../../util/performance';
 
@@ -44,7 +51,7 @@ export interface WritableSignal<T> extends Signal<T> {
  * Utility function used during template type checking to extract the value from a `WritableSignal`.
  * @codeGenApi
  */
-export function ɵunwrapWritableSignal<T>(value: T|{[ɵWRITABLE_SIGNAL]: T}): T {
+export function ɵunwrapWritableSignal<T>(value: T | {[ɵWRITABLE_SIGNAL]: T}): T {
   // Note: the function uses `WRITABLE_SIGNAL` as a brand instead of `WritableSignal<T>`,
   // because the latter incorrectly unwraps non-signal getter functions.
   return null!;
@@ -65,7 +72,7 @@ export interface CreateSignalOptions<T> {
  */
 export function signal<T>(initialValue: T, options?: CreateSignalOptions<T>): WritableSignal<T> {
   performanceMarkFeature('NgSignals');
-  const signalFn = createSignal(initialValue) as SignalGetter<T>& WritableSignal<T>;
+  const signalFn = createSignal(initialValue) as SignalGetter<T> & WritableSignal<T>;
   const node = signalFn[SIGNAL];
   if (options?.equal) {
     node.equal = options.equal;
@@ -81,7 +88,7 @@ export function signal<T>(initialValue: T, options?: CreateSignalOptions<T>): Wr
 }
 
 export function signalAsReadonlyFn<T>(this: SignalGetter<T>): Signal<T> {
-  const node = this[SIGNAL] as SignalNode<T>& {readonlyFn?: Signal<T>};
+  const node = this[SIGNAL] as SignalNode<T> & {readonlyFn?: Signal<T>};
   if (node.readonlyFn === undefined) {
     const readonlyFn = () => this();
     (readonlyFn as any)[SIGNAL] = node;
diff --git a/packages/core/src/render3/scope.ts b/packages/core/src/render3/scope.ts
index c9d5846fe1e73..9290fac147e13 100644
--- a/packages/core/src/render3/scope.ts
+++ b/packages/core/src/render3/scope.ts
@@ -14,7 +14,12 @@ import {EMPTY_ARRAY} from '../util/empty';
 
 import {extractDefListOrFactory, getNgModuleDef} from './definition';
 import {depsTracker} from './deps_tracker/deps_tracker';
-import {ComponentDef, ComponentType, NgModuleScopeInfoFromDecorator, RawScopeInfoFromDecorator} from './interfaces/definition';
+import {
+  ComponentDef,
+  ComponentType,
+  NgModuleScopeInfoFromDecorator,
+  RawScopeInfoFromDecorator,
+} from './interfaces/definition';
 import {isModuleWithProviders} from './jit/util';
 
 /**
@@ -27,8 +32,10 @@ import {isModuleWithProviders} from './jit/util';
  * @codeGenApi
  */
 export function ɵɵsetComponentScope(
-    type: ComponentType<any>, directives: Type<any>[]|(() => Type<any>[]),
-    pipes: Type<any>[]|(() => Type<any>[])): void {
+  type: ComponentType<any>,
+  directives: Type<any>[] | (() => Type<any>[]),
+  pipes: Type<any>[] | (() => Type<any>[]),
+): void {
   const def = type.ɵcmp as ComponentDef<any>;
   def.directiveDefs = extractDefListOrFactory(directives, /* pipeDef */ false);
   def.pipeDefs = extractDefListOrFactory(pipes, /* pipeDef */ true);
@@ -60,8 +67,9 @@ export function ɵɵsetNgModuleScope(type: any, scope: NgModuleScopeInfoFromDeco
   });
 }
 
-function convertToTypeArray(values: Type<any>[]|(() => Type<any>[])|
-                            RawScopeInfoFromDecorator[]): Type<any>[]|(() => Type<any>[]) {
+function convertToTypeArray(
+  values: Type<any>[] | (() => Type<any>[]) | RawScopeInfoFromDecorator[],
+): Type<any>[] | (() => Type<any>[]) {
   if (typeof values === 'function') {
     return values;
   }
@@ -76,5 +84,5 @@ function convertToTypeArray(values: Type<any>[]|(() => Type<any>[])|
 }
 
 function maybeUnwrapModuleWithProviders(value: any): Type<any> {
-  return isModuleWithProviders(value) ? value.ngModule : value as Type<any>;
+  return isModuleWithProviders(value) ? value.ngModule : (value as Type<any>);
 }
diff --git a/packages/core/src/render3/state.ts b/packages/core/src/render3/state.ts
index 37c5b15d8aea5..9dae40cfc4cfe 100644
--- a/packages/core/src/render3/state.ts
+++ b/packages/core/src/render3/state.ts
@@ -7,16 +7,33 @@
  */
 
 import {InjectFlags} from '../di/interface/injector';
-import {assertDefined, assertEqual, assertGreaterThanOrEqual, assertLessThan, assertNotEqual, throwError} from '../util/assert';
+import {
+  assertDefined,
+  assertEqual,
+  assertGreaterThanOrEqual,
+  assertLessThan,
+  assertNotEqual,
+  throwError,
+} from '../util/assert';
 
 import {assertLViewOrUndefined, assertTNodeForLView, assertTNodeForTView} from './assert';
 import {DirectiveDef} from './interfaces/definition';
 import {TNode, TNodeType} from './interfaces/node';
-import {CONTEXT, DECLARATION_VIEW, HEADER_OFFSET, LView, OpaqueViewState, T_HOST, TData, TVIEW, TView, TViewType} from './interfaces/view';
+import {
+  CONTEXT,
+  DECLARATION_VIEW,
+  HEADER_OFFSET,
+  LView,
+  OpaqueViewState,
+  T_HOST,
+  TData,
+  TVIEW,
+  TView,
+  TViewType,
+} from './interfaces/view';
 import {MATH_ML_NAMESPACE, SVG_NAMESPACE} from './namespaces';
 import {getTNode, walkUpViews} from './util/view_utils';
 
-
 /**
  *
  */
@@ -33,7 +50,7 @@ interface LFrame {
    *
    * This is used to cache existing LFrames to relieve the memory pressure.
    */
-  child: LFrame|null;
+  child: LFrame | null;
 
   /**
    * State of the current view being processed.
@@ -56,7 +73,7 @@ interface LFrame {
    *
    * This is used in conjunction with `isParent`.
    */
-  currentTNode: TNode|null;
+  currentTNode: TNode | null;
 
   /**
    * If `isParent` is:
@@ -83,7 +100,7 @@ interface LFrame {
    *
    * e.g. const inner = x().$implicit; const outer = x().$implicit;
    */
-  contextLView: LView|null;
+  contextLView: LView | null;
 
   /**
    * Store the element depth count. This is used to identify the root elements of the template
@@ -96,8 +113,7 @@ interface LFrame {
   /**
    * Current namespace to be used when creating elements
    */
-  currentNamespace: string|null;
-
+  currentNamespace: string | null;
 
   /**
    * The root index from which pure function instructions should calculate their binding
@@ -183,7 +199,7 @@ interface InstructionState {
    * </my-comp>
    * ```
    */
-  skipHydrationRootTNode: TNode|null;
+  skipHydrationRootTNode: TNode | null;
 }
 
 const instructionState: InstructionState = {
@@ -218,7 +234,6 @@ export function specOnlyIsInstructionStateEmpty(): boolean {
   return instructionState.lFrame.parent === null;
 }
 
-
 export function getElementDepthCount() {
   return instructionState.lFrame.elementDepthCount;
 }
@@ -344,20 +359,18 @@ export function ɵɵrestoreView<T = any>(viewToRestore: OpaqueViewState): T {
   return (viewToRestore as any as LView)[CONTEXT] as unknown as T;
 }
 
-
 /**
  * Clears the view set in `ɵɵrestoreView` from memory. Returns the passed in
  * value so that it can be used as a return value of an instruction.
  *
  * @codeGenApi
  */
-export function ɵɵresetView<T>(value?: T): T|undefined {
+export function ɵɵresetView<T>(value?: T): T | undefined {
   instructionState.lFrame.contextLView = null;
   return value;
 }
 
-
-export function getCurrentTNode(): TNode|null {
+export function getCurrentTNode(): TNode | null {
   let currentTNode = getCurrentTNodePlaceholderOk();
   while (currentTNode !== null && currentTNode.type === TNodeType.Placeholder) {
     currentTNode = currentTNode.parent;
@@ -365,17 +378,17 @@ export function getCurrentTNode(): TNode|null {
   return currentTNode;
 }
 
-export function getCurrentTNodePlaceholderOk(): TNode|null {
+export function getCurrentTNodePlaceholderOk(): TNode | null {
   return instructionState.lFrame.currentTNode;
 }
 
-export function getCurrentParentTNode(): TNode|null {
+export function getCurrentParentTNode(): TNode | null {
   const lFrame = instructionState.lFrame;
   const currentTNode = lFrame.currentTNode;
   return lFrame.isParent ? currentTNode : currentTNode!.parent;
 }
 
-export function setCurrentTNode(tNode: TNode|null, isParent: boolean) {
+export function setCurrentTNode(tNode: TNode | null, isParent: boolean) {
   ngDevMode && tNode && assertTNodeForTView(tNode, instructionState.lFrame.tView);
   const lFrame = instructionState.lFrame;
   lFrame.currentTNode = tNode;
@@ -429,7 +442,7 @@ export function getBindingIndex(): number {
 }
 
 export function setBindingIndex(value: number): number {
-  return instructionState.lFrame.bindingIndex = value;
+  return (instructionState.lFrame.bindingIndex = value);
 }
 
 export function nextBindingIndex(): number {
@@ -463,7 +476,9 @@ export function setInI18nBlock(isInI18nBlock: boolean): void {
  *        whose `hostBindings` are being processed.
  */
 export function setBindingRootForHostBindings(
-    bindingRootIndex: number, currentDirectiveIndex: number) {
+  bindingRootIndex: number,
+  currentDirectiveIndex: number,
+) {
   const lFrame = instructionState.lFrame;
   lFrame.bindingIndex = lFrame.bindingRootIndex = bindingRootIndex;
   setCurrentDirectiveIndex(currentDirectiveIndex);
@@ -493,9 +508,9 @@ export function setCurrentDirectiveIndex(currentDirectiveIndex: number): void {
  *
  * @param tData Current `TData` where the `DirectiveDef` will be looked up at.
  */
-export function getCurrentDirectiveDef(tData: TData): DirectiveDef<any>|null {
+export function getCurrentDirectiveDef(tData: TData): DirectiveDef<any> | null {
   const currentDirectiveIndex = instructionState.lFrame.currentDirectiveIndex;
-  return currentDirectiveIndex === -1 ? null : tData[currentDirectiveIndex] as DirectiveDef<any>;
+  return currentDirectiveIndex === -1 ? null : (tData[currentDirectiveIndex] as DirectiveDef<any>);
 }
 
 export function getCurrentQueryIndex(): number {
@@ -511,7 +526,7 @@ export function setCurrentQueryIndex(value: number): void {
  *
  * @param lView an `LView` that we want to find parent `TNode` for.
  */
-function getDeclarationTNode(lView: LView): TNode|null {
+function getDeclarationTNode(lView: LView): TNode | null {
   const tView = lView[TVIEW];
 
   // Return the declaration parent for embedded views
@@ -585,7 +600,7 @@ export function enterDI(lView: LView, tNode: TNode, flags: InjectFlags) {
   }
 
   ngDevMode && assertTNodeForLView(tNode, lView);
-  const lFrame = instructionState.lFrame = allocLFrame();
+  const lFrame = (instructionState.lFrame = allocLFrame());
   lFrame.currentTNode = tNode;
   lFrame.lView = lView;
 
@@ -639,7 +654,7 @@ function allocLFrame() {
   return newLFrame;
 }
 
-function createLFrame(parent: LFrame|null): LFrame {
+function createLFrame(parent: LFrame | null): LFrame {
   const lFrame: LFrame = {
     currentTNode: null,
     isParent: true,
@@ -657,7 +672,7 @@ function createLFrame(parent: LFrame|null): LFrame {
     child: null,
     inI18n: false,
   };
-  parent !== null && (parent.child = lFrame);  // link the new LFrame for reuse.
+  parent !== null && (parent.child = lFrame); // link the new LFrame for reuse.
   return lFrame;
 }
 
@@ -709,8 +724,10 @@ export function leaveView() {
 }
 
 export function nextContextImpl<T = any>(level: number): T {
-  const contextLView = instructionState.lFrame.contextLView =
-      walkUpViews(level, instructionState.lFrame.contextLView!);
+  const contextLView = (instructionState.lFrame.contextLView = walkUpViews(
+    level,
+    instructionState.lFrame.contextLView!,
+  ));
   return contextLView[CONTEXT] as unknown as T;
 }
 
@@ -734,11 +751,15 @@ export function getSelectedIndex() {
  * run if and when the provided `index` value is different from the current selected index value.)
  */
 export function setSelectedIndex(index: number) {
-  ngDevMode && index !== -1 &&
-      assertGreaterThanOrEqual(index, HEADER_OFFSET, 'Index must be past HEADER_OFFSET (or -1).');
   ngDevMode &&
-      assertLessThan(
-          index, instructionState.lFrame.lView.length, 'Can\'t set index passed end of LView');
+    index !== -1 &&
+    assertGreaterThanOrEqual(index, HEADER_OFFSET, 'Index must be past HEADER_OFFSET (or -1).');
+  ngDevMode &&
+    assertLessThan(
+      index,
+      instructionState.lFrame.lView.length,
+      "Can't set index passed end of LView",
+    );
   instructionState.lFrame.selectedIndex = index;
 }
 
@@ -786,7 +807,7 @@ export function namespaceHTMLInternal() {
   instructionState.lFrame.currentNamespace = null;
 }
 
-export function getNamespace(): string|null {
+export function getNamespace(): string | null {
   return instructionState.lFrame.currentNamespace;
 }
 
diff --git a/packages/core/src/render3/styling/class_differ.ts b/packages/core/src/render3/styling/class_differ.ts
index 98868d8d7103b..04cac148c7f62 100644
--- a/packages/core/src/render3/styling/class_differ.ts
+++ b/packages/core/src/render3/styling/class_differ.ts
@@ -9,7 +9,6 @@
 import {assertNotEqual} from '../../util/assert';
 import {CharCode} from '../../util/char_code';
 
-
 /**
  * Returns an index of `classToSearch` in `className` taking token boundaries into account.
  *
@@ -21,7 +20,10 @@ import {CharCode} from '../../util/char_code';
  * @returns an index of the located class (or -1 if not found)
  */
 export function classIndexOf(
-    className: string, classToSearch: string, startingIndex: number): number {
+  className: string,
+  classToSearch: string,
+  startingIndex: number,
+): number {
   ngDevMode && assertNotEqual(classToSearch, '', 'can not look for "" string.');
   let end = className.length;
   while (true) {
@@ -30,8 +32,10 @@ export function classIndexOf(
     if (foundIndex === 0 || className.charCodeAt(foundIndex - 1) <= CharCode.SPACE) {
       // Ensure that it has leading whitespace
       const length = classToSearch.length;
-      if (foundIndex + length === end ||
-          className.charCodeAt(foundIndex + length) <= CharCode.SPACE) {
+      if (
+        foundIndex + length === end ||
+        className.charCodeAt(foundIndex + length) <= CharCode.SPACE
+      ) {
         // Ensure that it has trailing whitespace
         return foundIndex;
       }
diff --git a/packages/core/src/render3/styling/static_styling.ts b/packages/core/src/render3/styling/static_styling.ts
index 3bf5ecbded600..8ab0c16b62a1b 100644
--- a/packages/core/src/render3/styling/static_styling.ts
+++ b/packages/core/src/render3/styling/static_styling.ts
@@ -8,7 +8,7 @@
 
 import {concatStringsWithSpace} from '../../util/stringify';
 import {assertFirstCreatePass} from '../assert';
-import { AttributeMarker } from '../interfaces/attribute_marker';
+import {AttributeMarker} from '../interfaces/attribute_marker';
 import {TAttributes, TNode} from '../interfaces/node';
 import {getTView} from '../state';
 
@@ -24,12 +24,15 @@ import {getTView} from '../state';
  *   - `true` Write to `TNode.styles` / `TNode.classes`
  */
 export function computeStaticStyling(
-    tNode: TNode, attrs: TAttributes|null, writeToHost: boolean): void {
+  tNode: TNode,
+  attrs: TAttributes | null,
+  writeToHost: boolean,
+): void {
   ngDevMode &&
-      assertFirstCreatePass(getTView(), 'Expecting to be called in first template pass only');
-  let styles: string|null = writeToHost ? tNode.styles : null;
-  let classes: string|null = writeToHost ? tNode.classes : null;
-  let mode: AttributeMarker|0 = 0;
+    assertFirstCreatePass(getTView(), 'Expecting to be called in first template pass only');
+  let styles: string | null = writeToHost ? tNode.styles : null;
+  let classes: string | null = writeToHost ? tNode.classes : null;
+  let mode: AttributeMarker | 0 = 0;
   if (attrs !== null) {
     for (let i = 0; i < attrs.length; i++) {
       const value = attrs[i];
@@ -44,6 +47,6 @@ export function computeStaticStyling(
       }
     }
   }
-  writeToHost ? tNode.styles = styles : tNode.stylesWithoutHost = styles;
-  writeToHost ? tNode.classes = classes : tNode.classesWithoutHost = classes;
+  writeToHost ? (tNode.styles = styles) : (tNode.stylesWithoutHost = styles);
+  writeToHost ? (tNode.classes = classes) : (tNode.classesWithoutHost = classes);
 }
diff --git a/packages/core/src/render3/styling/style_binding_list.ts b/packages/core/src/render3/styling/style_binding_list.ts
index 401d7e536f275..d5773b9d35013 100644
--- a/packages/core/src/render3/styling/style_binding_list.ts
+++ b/packages/core/src/render3/styling/style_binding_list.ts
@@ -10,11 +10,21 @@ import {KeyValueArray, keyValueArrayIndexOf} from '../../util/array_utils';
 import {assertEqual, assertIndexInRange, assertNotEqual} from '../../util/assert';
 import {assertFirstUpdatePass} from '../assert';
 import {TNode} from '../interfaces/node';
-import {getTStylingRangeNext, getTStylingRangePrev, setTStylingRangeNext, setTStylingRangeNextDuplicate, setTStylingRangePrev, setTStylingRangePrevDuplicate, toTStylingRange, TStylingKey, TStylingKeyPrimitive, TStylingRange} from '../interfaces/styling';
+import {
+  getTStylingRangeNext,
+  getTStylingRangePrev,
+  setTStylingRangeNext,
+  setTStylingRangeNextDuplicate,
+  setTStylingRangePrev,
+  setTStylingRangePrevDuplicate,
+  toTStylingRange,
+  TStylingKey,
+  TStylingKeyPrimitive,
+  TStylingRange,
+} from '../interfaces/styling';
 import {TData} from '../interfaces/view';
 import {getTView} from '../state';
 
-
 /**
  * NOTE: The word `styling` is used interchangeably as style or class styling.
  *
@@ -191,8 +201,13 @@ let __unused_const_as_closure_does_not_like_standalone_comment_blocks__: undefin
  *                       `tNode.classBindings` should be used (or `tNode.styleBindings` otherwise.)
  */
 export function insertTStylingBinding(
-    tData: TData, tNode: TNode, tStylingKeyWithStatic: TStylingKey, index: number,
-    isHostBinding: boolean, isClassBinding: boolean): void {
+  tData: TData,
+  tNode: TNode,
+  tStylingKeyWithStatic: TStylingKey,
+  index: number,
+  isHostBinding: boolean,
+  isClassBinding: boolean,
+): void {
   ngDevMode && assertFirstUpdatePass(getTView());
   let tBindings = isClassBinding ? tNode.classBindings : tNode.styleBindings;
   let tmplHead = getTStylingRangePrev(tBindings);
@@ -204,10 +219,12 @@ export function insertTStylingBinding(
   if (Array.isArray(tStylingKeyWithStatic)) {
     // We are case when the `TStylingKey` contains static fields as well.
     const staticKeyValueArray = tStylingKeyWithStatic as KeyValueArray<any>;
-    tStylingKey = staticKeyValueArray[1];  // unwrap.
+    tStylingKey = staticKeyValueArray[1]; // unwrap.
     // We need to check if our key is present in the static so that we can mark it as duplicate.
-    if (tStylingKey === null ||
-        keyValueArrayIndexOf(staticKeyValueArray, tStylingKey as string) > 0) {
+    if (
+      tStylingKey === null ||
+      keyValueArrayIndexOf(staticKeyValueArray, tStylingKey as string) > 0
+    ) {
       // tStylingKey is present in the statics, need to mark it as duplicate.
       isKeyDuplicateOfStatic = true;
     }
@@ -229,8 +246,10 @@ export function insertTStylingBinding(
       // binding to point to this one
       if (previousNode !== 0) {
         // We need to update the template-tail value to point to us.
-        tData[previousNode + 1] =
-            setTStylingRangeNext(tData[previousNode + 1] as TStylingRange, index);
+        tData[previousNode + 1] = setTStylingRangeNext(
+          tData[previousNode + 1] as TStylingRange,
+          index,
+        );
       }
       // The "previous" of the template binding head should point to this host binding
       tData[tmplHead + 1] = setTStylingRangePrev(tData[tmplHead + 1] as TStylingRange, index);
@@ -250,9 +269,11 @@ export function insertTStylingBinding(
     // We need to set this binding's "previous" to the current template tail
     tData[index + 1] = toTStylingRange(tmplTail, 0);
     ngDevMode &&
-        assertEqual(
-            tmplHead !== 0 && tmplTail === 0, false,
-            'Adding template bindings after hostBindings is not allowed.');
+      assertEqual(
+        tmplHead !== 0 && tmplTail === 0,
+        false,
+        'Adding template bindings after hostBindings is not allowed.',
+      );
     if (tmplHead === 0) {
       tmplHead = index;
     } else {
@@ -290,16 +311,23 @@ export function insertTStylingBinding(
  *                       `tNode.classBindings` should be used (or `tNode.styleBindings` otherwise.)
  */
 function markDuplicateOfResidualStyling(
-    tNode: TNode, tStylingKey: TStylingKey, tData: TData, index: number, isClassBinding: boolean) {
+  tNode: TNode,
+  tStylingKey: TStylingKey,
+  tData: TData,
+  index: number,
+  isClassBinding: boolean,
+) {
   const residual = isClassBinding ? tNode.residualClasses : tNode.residualStyles;
-  if (residual != null /* or undefined */ && typeof tStylingKey == 'string' &&
-      keyValueArrayIndexOf(residual, tStylingKey) >= 0) {
+  if (
+    residual != null /* or undefined */ &&
+    typeof tStylingKey == 'string' &&
+    keyValueArrayIndexOf(residual, tStylingKey) >= 0
+  ) {
     // We have duplicate in the residual so mark ourselves as duplicate.
     tData[index + 1] = setTStylingRangeNextDuplicate(tData[index + 1] as TStylingRange);
   }
 }
 
-
 /**
  * Marks `TStyleValue`s as duplicates if another style binding in the list has the same
  * `TStyleValue`.
@@ -357,15 +385,16 @@ function markDuplicateOfResidualStyling(
  *        - `false` for next (higher priority).
  */
 function markDuplicates(
-    tData: TData,
-    tStylingKey: TStylingKeyPrimitive,
-    index: number,
-    isPrevDir: boolean,
+  tData: TData,
+  tStylingKey: TStylingKeyPrimitive,
+  index: number,
+  isPrevDir: boolean,
 ) {
   const tStylingAtIndex = tData[index + 1] as TStylingRange;
   const isMap = tStylingKey === null;
-  let cursor =
-      isPrevDir ? getTStylingRangePrev(tStylingAtIndex) : getTStylingRangeNext(tStylingAtIndex);
+  let cursor = isPrevDir
+    ? getTStylingRangePrev(tStylingAtIndex)
+    : getTStylingRangeNext(tStylingAtIndex);
   let foundDuplicate = false;
   // We keep iterating as long as we have a cursor
   // AND either:
@@ -378,16 +407,19 @@ function markDuplicates(
     const tStyleRangeAtCursor = tData[cursor + 1] as TStylingRange;
     if (isStylingMatch(tStylingValueAtCursor, tStylingKey)) {
       foundDuplicate = true;
-      tData[cursor + 1] = isPrevDir ? setTStylingRangeNextDuplicate(tStyleRangeAtCursor) :
-                                      setTStylingRangePrevDuplicate(tStyleRangeAtCursor);
+      tData[cursor + 1] = isPrevDir
+        ? setTStylingRangeNextDuplicate(tStyleRangeAtCursor)
+        : setTStylingRangePrevDuplicate(tStyleRangeAtCursor);
     }
-    cursor = isPrevDir ? getTStylingRangePrev(tStyleRangeAtCursor) :
-                         getTStylingRangeNext(tStyleRangeAtCursor);
+    cursor = isPrevDir
+      ? getTStylingRangePrev(tStyleRangeAtCursor)
+      : getTStylingRangeNext(tStyleRangeAtCursor);
   }
   if (foundDuplicate) {
     // if we found a duplicate, than mark ourselves.
-    tData[index + 1] = isPrevDir ? setTStylingRangePrevDuplicate(tStylingAtIndex) :
-                                   setTStylingRangeNextDuplicate(tStylingAtIndex);
+    tData[index + 1] = isPrevDir
+      ? setTStylingRangePrevDuplicate(tStylingAtIndex)
+      : setTStylingRangeNextDuplicate(tStylingAtIndex);
   }
 }
 
@@ -411,22 +443,23 @@ function markDuplicates(
  */
 function isStylingMatch(tStylingKeyCursor: TStylingKey, tStylingKey: TStylingKeyPrimitive) {
   ngDevMode &&
-      assertNotEqual(
-          Array.isArray(tStylingKey), true, 'Expected that \'tStylingKey\' has been unwrapped');
+    assertNotEqual(
+      Array.isArray(tStylingKey),
+      true,
+      "Expected that 'tStylingKey' has been unwrapped",
+    );
   if (
-      tStylingKeyCursor === null ||  // If the cursor is `null` it means that we have map at that
-                                     // location so we must assume that we have a match.
-      tStylingKey == null ||  // If `tStylingKey` is `null` then it is a map therefor assume that it
-                              // contains a match.
-      (Array.isArray(tStylingKeyCursor) ? tStylingKeyCursor[1] : tStylingKeyCursor) ===
-          tStylingKey  // If the keys match explicitly than we are a match.
+    tStylingKeyCursor === null || // If the cursor is `null` it means that we have map at that
+    // location so we must assume that we have a match.
+    tStylingKey == null || // If `tStylingKey` is `null` then it is a map therefor assume that it
+    // contains a match.
+    (Array.isArray(tStylingKeyCursor) ? tStylingKeyCursor[1] : tStylingKeyCursor) === tStylingKey // If the keys match explicitly than we are a match.
   ) {
     return true;
   } else if (Array.isArray(tStylingKeyCursor) && typeof tStylingKey === 'string') {
     // if we did not find a match, but `tStylingKeyCursor` is `KeyValueArray` that means cursor has
     // statics and we need to check those as well.
-    return keyValueArrayIndexOf(tStylingKeyCursor, tStylingKey) >=
-        0;  // see if we are matching the key
+    return keyValueArrayIndexOf(tStylingKeyCursor, tStylingKey) >= 0; // see if we are matching the key
   }
   return false;
 }
diff --git a/packages/core/src/render3/styling/styling_parser.ts b/packages/core/src/render3/styling/styling_parser.ts
index 299a9a327773b..7b8c00e7a7972 100644
--- a/packages/core/src/render3/styling/styling_parser.ts
+++ b/packages/core/src/render3/styling/styling_parser.ts
@@ -103,7 +103,7 @@ export function parseClassNameNext(text: string, index: number): number {
   if (end === index) {
     return -1;
   }
-  index = parserState.keyEnd = consumeClassToken(text, parserState.key = index, end);
+  index = parserState.keyEnd = consumeClassToken(text, (parserState.key = index), end);
   return consumeWhitespace(text, index, end);
 }
 
@@ -143,7 +143,7 @@ export function parseStyle(text: string): number {
  */
 export function parseStyleNext(text: string, startIndex: number): number {
   const end = parserState.textEnd;
-  let index = parserState.key = consumeWhitespace(text, startIndex, end);
+  let index = (parserState.key = consumeWhitespace(text, startIndex, end));
   if (end === index) {
     // we reached an end so just quit
     return -1;
@@ -208,10 +208,13 @@ export function consumeClassToken(text: string, startIndex: number, endIndex: nu
  */
 export function consumeStyleKey(text: string, startIndex: number, endIndex: number): number {
   let ch: number;
-  while (startIndex < endIndex &&
-         ((ch = text.charCodeAt(startIndex)) === CharCode.DASH || ch === CharCode.UNDERSCORE ||
-          ((ch & CharCode.UPPER_CASE) >= CharCode.A && (ch & CharCode.UPPER_CASE) <= CharCode.Z) ||
-          (ch >= CharCode.ZERO && ch <= CharCode.NINE))) {
+  while (
+    startIndex < endIndex &&
+    ((ch = text.charCodeAt(startIndex)) === CharCode.DASH ||
+      ch === CharCode.UNDERSCORE ||
+      ((ch & CharCode.UPPER_CASE) >= CharCode.A && (ch & CharCode.UPPER_CASE) <= CharCode.Z) ||
+      (ch >= CharCode.ZERO && ch <= CharCode.NINE))
+  ) {
     startIndex++;
   }
   return startIndex;
@@ -226,7 +229,11 @@ export function consumeStyleKey(text: string, startIndex: number, endIndex: numb
  * @returns Index after separator and surrounding whitespace.
  */
 export function consumeSeparator(
-    text: string, startIndex: number, endIndex: number, separator: number): number {
+  text: string,
+  startIndex: number,
+  endIndex: number,
+  separator: number,
+): number {
   startIndex = consumeWhitespace(text, startIndex, endIndex);
   if (startIndex < endIndex) {
     if (ngDevMode && text.charCodeAt(startIndex) !== separator) {
@@ -237,7 +244,6 @@ export function consumeSeparator(
   return startIndex;
 }
 
-
 /**
  * Consumes style value honoring `url()` and `""` text.
  *
@@ -247,9 +253,9 @@ export function consumeSeparator(
  * @returns Index after last style value character.
  */
 export function consumeStyleValue(text: string, startIndex: number, endIndex: number): number {
-  let ch1 = -1;  // 1st previous character
-  let ch2 = -1;  // 2nd previous character
-  let ch3 = -1;  // 3rd previous character
+  let ch1 = -1; // 1st previous character
+  let ch2 = -1; // 2nd previous character
+  let ch3 = -1; // 3rd previous character
   let i = startIndex;
   let lastChIndex = i;
   while (i < endIndex) {
@@ -259,10 +265,12 @@ export function consumeStyleValue(text: string, startIndex: number, endIndex: nu
     } else if (ch === CharCode.DOUBLE_QUOTE || ch === CharCode.SINGLE_QUOTE) {
       lastChIndex = i = consumeQuotedText(text, ch, i, endIndex);
     } else if (
-        startIndex ===
-            i - 4 &&  // We have seen only 4 characters so far "URL(" (Ignore "foo_URL()")
-        ch3 === CharCode.U &&
-        ch2 === CharCode.R && ch1 === CharCode.L && ch === CharCode.OPEN_PAREN) {
+      startIndex === i - 4 && // We have seen only 4 characters so far "URL(" (Ignore "foo_URL()")
+      ch3 === CharCode.U &&
+      ch2 === CharCode.R &&
+      ch1 === CharCode.L &&
+      ch === CharCode.OPEN_PAREN
+    ) {
       lastChIndex = i = consumeQuotedText(text, CharCode.CLOSE_PAREN, i, endIndex);
     } else if (ch > CharCode.SPACE) {
       // if we have a non-whitespace character then capture its location
@@ -285,8 +293,12 @@ export function consumeStyleValue(text: string, startIndex: number, endIndex: nu
  * @returns Index after quoted characters.
  */
 export function consumeQuotedText(
-    text: string, quoteCharCode: number, startIndex: number, endIndex: number): number {
-  let ch1 = -1;  // 1st previous character
+  text: string,
+  quoteCharCode: number,
+  startIndex: number,
+  endIndex: number,
+): number {
+  let ch1 = -1; // 1st previous character
   let index = startIndex;
   while (index < endIndex) {
     const ch = text.charCodeAt(index++);
@@ -301,14 +313,20 @@ export function consumeQuotedText(
       ch1 = ch;
     }
   }
-  throw ngDevMode ? malformedStyleError(text, String.fromCharCode(quoteCharCode), endIndex) :
-                    new Error();
+  throw ngDevMode
+    ? malformedStyleError(text, String.fromCharCode(quoteCharCode), endIndex)
+    : new Error();
 }
 
 function malformedStyleError(text: string, expecting: string, index: number): never {
   ngDevMode && assertEqual(typeof text === 'string', true, 'String expected here');
   throw throwError(
-      `Malformed style at location ${index} in string '` + text.substring(0, index) + '[>>' +
-      text.substring(index, index + 1) + '<<]' + text.slice(index + 1) +
-      `'. Expecting '${expecting}'.`);
+    `Malformed style at location ${index} in string '` +
+      text.substring(0, index) +
+      '[>>' +
+      text.substring(index, index + 1) +
+      '<<]' +
+      text.slice(index + 1) +
+      `'. Expecting '${expecting}'.`,
+  );
 }
diff --git a/packages/core/src/render3/tokens.ts b/packages/core/src/render3/tokens.ts
index 4504ffb87e448..c734831fd1cf3 100644
--- a/packages/core/src/render3/tokens.ts
+++ b/packages/core/src/render3/tokens.ts
@@ -13,4 +13,4 @@ export interface NO_CHANGE {
 
 /** A special value which designates that a value has not changed. */
 export const NO_CHANGE: NO_CHANGE =
-    (typeof ngDevMode === 'undefined' || ngDevMode) ? {__brand__: 'NO_CHANGE'} : ({} as NO_CHANGE);
+  typeof ngDevMode === 'undefined' || ngDevMode ? {__brand__: 'NO_CHANGE'} : ({} as NO_CHANGE);
diff --git a/packages/core/src/render3/util/attrs_utils.ts b/packages/core/src/render3/util/attrs_utils.ts
index aaa870c2b732b..5d2a5e7804874 100644
--- a/packages/core/src/render3/util/attrs_utils.ts
+++ b/packages/core/src/render3/util/attrs_utils.ts
@@ -6,14 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {CharCode} from '../../util/char_code';
-import { AttributeMarker } from '../interfaces/attribute_marker';
+import {AttributeMarker} from '../interfaces/attribute_marker';
 import {TAttributes} from '../interfaces/node';
 import {CssSelector} from '../interfaces/projection';
 import {Renderer} from '../interfaces/renderer';
 import {RElement} from '../interfaces/renderer_dom';
 
-
-
 /**
  * Assigns all attribute values to the provided element via the inferred renderer.
  *
@@ -90,9 +88,12 @@ export function setUpAttributes(renderer: Renderer, native: RElement, attrs: TAt
  * @param marker The attribute marker to test.
  * @returns true if the marker is a "name-only" marker (e.g. `Bindings`, `Template` or `I18n`).
  */
-export function isNameOnlyAttributeMarker(marker: string|AttributeMarker|CssSelector) {
-  return marker === AttributeMarker.Bindings || marker === AttributeMarker.Template ||
-      marker === AttributeMarker.I18n;
+export function isNameOnlyAttributeMarker(marker: string | AttributeMarker | CssSelector) {
+  return (
+    marker === AttributeMarker.Bindings ||
+    marker === AttributeMarker.Template ||
+    marker === AttributeMarker.I18n
+  );
 }
 
 export function isAnimationProp(name: string): boolean {
@@ -110,7 +111,10 @@ export function isAnimationProp(name: string): boolean {
  * @param dst Location of where the merged `TAttributes` should end up.
  * @param src `TAttributes` which should be appended to `dst`
  */
-export function mergeHostAttrs(dst: TAttributes|null, src: TAttributes|null): TAttributes|null {
+export function mergeHostAttrs(
+  dst: TAttributes | null,
+  src: TAttributes | null,
+): TAttributes | null {
   if (src === null || src.length === 0) {
     // do nothing
   } else if (dst === null || dst.length === 0) {
@@ -126,8 +130,9 @@ export function mergeHostAttrs(dst: TAttributes|null, src: TAttributes|null): TA
         if (srcMarker === AttributeMarker.NamespaceURI) {
           // Case where we need to consume `key1`, `key2`, `value` items.
         } else if (
-            srcMarker === AttributeMarker.ImplicitAttributes ||
-            srcMarker === AttributeMarker.Styles) {
+          srcMarker === AttributeMarker.ImplicitAttributes ||
+          srcMarker === AttributeMarker.Styles
+        ) {
           // Case where we have to consume `key1` and `value` only.
           mergeHostAttribute(dst, srcMarker, item as string, null, src[++i] as string);
         } else {
@@ -150,8 +155,12 @@ export function mergeHostAttrs(dst: TAttributes|null, src: TAttributes|null): TA
  * @param value Value to add or to overwrite to `TAttributes` Only used if `marker` is not Class.
  */
 export function mergeHostAttribute(
-    dst: TAttributes, marker: AttributeMarker, key1: string, key2: string|null,
-    value: string|null): void {
+  dst: TAttributes,
+  marker: AttributeMarker,
+  key1: string,
+  key2: string | null,
+  value: string | null,
+): void {
   let i = 0;
   // Assume that new markers will be inserted at the end.
   let markerInsertPosition = dst.length;
diff --git a/packages/core/src/render3/util/change_detection_utils.ts b/packages/core/src/render3/util/change_detection_utils.ts
index 03159cc07e505..c2af422db19b3 100644
--- a/packages/core/src/render3/util/change_detection_utils.ts
+++ b/packages/core/src/render3/util/change_detection_utils.ts
@@ -27,7 +27,7 @@ import {getRootComponents} from './discovery_utils';
 export function applyChanges(component: {}): void {
   ngDevMode && assertDefined(component, 'component');
   markViewDirty(getComponentViewByInstance(component), NotificationSource.DebugApplyChanges);
-  getRootComponents(component).forEach(rootComponent => detectChanges(rootComponent));
+  getRootComponents(component).forEach((rootComponent) => detectChanges(rootComponent));
 }
 
 /**
diff --git a/packages/core/src/render3/util/discovery_utils.ts b/packages/core/src/render3/util/discovery_utils.ts
index e777fce394caa..a1f1a8e6474d7 100644
--- a/packages/core/src/render3/util/discovery_utils.ts
+++ b/packages/core/src/render3/util/discovery_utils.ts
@@ -10,7 +10,13 @@ import {ChangeDetectionStrategy} from '../../change_detection/constants';
 import {Injector} from '../../di/injector';
 import {ViewEncapsulation} from '../../metadata/view';
 import {assertLView} from '../assert';
-import {discoverLocalRefs, getComponentAtNodeIndex, getDirectivesAtNodeIndex, getLContext, readPatchedLView} from '../context_discovery';
+import {
+  discoverLocalRefs,
+  getComponentAtNodeIndex,
+  getDirectivesAtNodeIndex,
+  getLContext,
+  readPatchedLView,
+} from '../context_discovery';
 import {getComponentDef, getDirectiveDef} from '../definition';
 import {NodeInjector} from '../di';
 import {DirectiveDef} from '../interfaces/definition';
@@ -20,8 +26,6 @@ import {CLEANUP, CONTEXT, FLAGS, LView, LViewFlags, TVIEW, TViewType} from '../i
 import {getRootContext} from './view_traversal_utils';
 import {getLViewParent, unwrapRNode} from './view_utils';
 
-
-
 /**
  * Retrieves the component instance associated with a given DOM element.
  *
@@ -49,7 +53,7 @@ import {getLViewParent, unwrapRNode} from './view_utils';
  * @publicApi
  * @globalApi ng
  */
-export function getComponent<T>(element: Element): T|null {
+export function getComponent<T>(element: Element): T | null {
   ngDevMode && assertDomElement(element);
   const context = getLContext(element);
   if (context === null) return null;
@@ -65,7 +69,6 @@ export function getComponent<T>(element: Element): T|null {
   return context.component as unknown as T;
 }
 
-
 /**
  * If inside an embedded view (e.g. `*ngIf` or `*ngFor`), retrieves the context of the embedded
  * view that the element is part of. Otherwise retrieves the instance of the component whose view
@@ -78,11 +81,11 @@ export function getComponent<T>(element: Element): T|null {
  * @publicApi
  * @globalApi ng
  */
-export function getContext<T extends {}>(element: Element): T|null {
+export function getContext<T extends {}>(element: Element): T | null {
   assertDomElement(element);
   const context = getLContext(element)!;
   const lView = context ? context.lView : null;
-  return lView === null ? null : lView[CONTEXT] as T;
+  return lView === null ? null : (lView[CONTEXT] as T);
 }
 
 /**
@@ -100,16 +103,16 @@ export function getContext<T extends {}>(element: Element): T|null {
  * @publicApi
  * @globalApi ng
  */
-export function getOwningComponent<T>(elementOrDir: Element|{}): T|null {
+export function getOwningComponent<T>(elementOrDir: Element | {}): T | null {
   const context = getLContext(elementOrDir)!;
   let lView = context ? context.lView : null;
   if (lView === null) return null;
 
-  let parent: LView|null;
+  let parent: LView | null;
   while (lView[TVIEW].type === TViewType.Embedded && (parent = getLViewParent(lView)!)) {
     lView = parent;
   }
-  return lView[FLAGS] & LViewFlags.IsRoot ? null : lView[CONTEXT] as unknown as T;
+  return lView[FLAGS] & LViewFlags.IsRoot ? null : (lView[CONTEXT] as unknown as T);
 }
 
 /**
@@ -123,7 +126,7 @@ export function getOwningComponent<T>(elementOrDir: Element|{}): T|null {
  * @publicApi
  * @globalApi ng
  */
-export function getRootComponents(elementOrDir: Element|{}): {}[] {
+export function getRootComponents(elementOrDir: Element | {}): {}[] {
   const lView = readPatchedLView<{}>(elementOrDir);
   return lView !== null ? [getRootContext(lView)] : [];
 }
@@ -138,7 +141,7 @@ export function getRootComponents(elementOrDir: Element|{}): {}[] {
  * @publicApi
  * @globalApi ng
  */
-export function getInjector(elementOrDir: Element|{}): Injector {
+export function getInjector(elementOrDir: Element | {}): Injector {
   const context = getLContext(elementOrDir)!;
   const lView = context ? context.lView : null;
   if (lView === null) return Injector.NULL;
@@ -265,8 +268,9 @@ export interface ComponentDebugMetadata extends DirectiveDebugMetadata {
  * @publicApi
  * @globalApi ng
  */
-export function getDirectiveMetadata(directiveOrComponentInstance: any): ComponentDebugMetadata|
-    DirectiveDebugMetadata|null {
+export function getDirectiveMetadata(
+  directiveOrComponentInstance: any,
+): ComponentDebugMetadata | DirectiveDebugMetadata | null {
   const {constructor} = directiveOrComponentInstance;
   if (!constructor) {
     throw new Error('Unable to find the instance constructor');
@@ -280,8 +284,9 @@ export function getDirectiveMetadata(directiveOrComponentInstance: any): Compone
       inputs,
       outputs: componentDef.outputs,
       encapsulation: componentDef.encapsulation,
-      changeDetection: componentDef.onPush ? ChangeDetectionStrategy.OnPush :
-                                             ChangeDetectionStrategy.Default
+      changeDetection: componentDef.onPush
+        ? ChangeDetectionStrategy.OnPush
+        : ChangeDetectionStrategy.Default,
     };
   }
   const directiveDef = getDirectiveDef(constructor);
@@ -361,10 +366,9 @@ export interface Listener {
   /**
    * Type of the listener (e.g. a native DOM event or a custom @Output).
    */
-  type: 'dom'|'output';
+  type: 'dom' | 'output';
 }
 
-
 /**
  * Retrieves a list of event listeners associated with a DOM element. The list does include host
  * listeners, but it does not include event listeners defined outside of the Angular context
@@ -407,7 +411,7 @@ export function getListeners(element: Element): Listener[] {
   const tCleanup = tView.cleanup;
   const listeners: Listener[] = [];
   if (tCleanup && lCleanup) {
-    for (let i = 0; i < tCleanup.length;) {
+    for (let i = 0; i < tCleanup.length; ) {
       const firstParam = tCleanup[i++];
       const secondParam = tCleanup[i++];
       if (typeof firstParam === 'string') {
@@ -419,7 +423,7 @@ export function getListeners(element: Element): Listener[] {
         // if useCaptureOrIndx is positive number then it in unsubscribe method
         // if useCaptureOrIndx is negative number then it is a Subscription
         const type =
-            (typeof useCaptureOrIndx === 'boolean' || useCaptureOrIndx >= 0) ? 'dom' : 'output';
+          typeof useCaptureOrIndx === 'boolean' || useCaptureOrIndx >= 0 ? 'dom' : 'output';
         const useCapture = typeof useCaptureOrIndx === 'boolean' ? useCaptureOrIndx : false;
         if (element == listenerElement) {
           listeners.push({element, name, callback, useCapture, type});
@@ -442,8 +446,11 @@ function sortListeners(a: Listener, b: Listener) {
  * See call site for more info.
  */
 function isDirectiveDefHack(obj: any): obj is DirectiveDef<any> {
-  return obj.type !== undefined && obj.declaredInputs !== undefined &&
-      obj.findHostDirectiveDefs !== undefined;
+  return (
+    obj.type !== undefined &&
+    obj.declaredInputs !== undefined &&
+    obj.findHostDirectiveDefs !== undefined
+  );
 }
 
 /**
diff --git a/packages/core/src/render3/util/global_utils.ts b/packages/core/src/render3/util/global_utils.ts
index e96704672b873..1ab5709f59588 100644
--- a/packages/core/src/render3/util/global_utils.ts
+++ b/packages/core/src/render3/util/global_utils.ts
@@ -12,10 +12,23 @@ import {setProfiler} from '../profiler';
 import {isSignal} from '../reactivity/api';
 
 import {applyChanges} from './change_detection_utils';
-import {getComponent, getContext, getDirectiveMetadata, getDirectives, getHostElement, getInjector, getListeners, getOwningComponent, getRootComponents} from './discovery_utils';
-import {getDependenciesFromInjectable, getInjectorMetadata, getInjectorProviders, getInjectorResolutionPath} from './injector_discovery_utils';
-
-
+import {
+  getComponent,
+  getContext,
+  getDirectiveMetadata,
+  getDirectives,
+  getHostElement,
+  getInjector,
+  getListeners,
+  getOwningComponent,
+  getRootComponents,
+} from './discovery_utils';
+import {
+  getDependenciesFromInjectable,
+  getInjectorMetadata,
+  getInjectorProviders,
+  getInjectorResolutionPath,
+} from './injector_discovery_utils';
 
 /**
  * This file introduces series of globally accessible debug tools
@@ -94,7 +107,9 @@ export type GlobalDevModeUtils = {
  * used from the browser console when an application is not in production.
  */
 export function publishGlobalUtil<K extends GlobalUtilsFunctions>(
-    name: K, fn: typeof globalUtilsFunctions[K]): void {
+  name: K,
+  fn: (typeof globalUtilsFunctions)[K],
+): void {
   if (typeof COMPILED === 'undefined' || !COMPILED) {
     // Note: we can't export `ng` when using closure enhanced optimization as:
     // - closure declares globals itself for minified names, which sometimes clobber our `ng` global
diff --git a/packages/core/src/render3/util/injector_discovery_utils.ts b/packages/core/src/render3/util/injector_discovery_utils.ts
index 136937dd28a2b..135b41cf259aa 100644
--- a/packages/core/src/render3/util/injector_discovery_utils.ts
+++ b/packages/core/src/render3/util/injector_discovery_utils.ts
@@ -25,7 +25,12 @@ import {ChainedInjector} from '../component_ref';
 import {getFrameworkDIDebugData} from '../debug/framework_injector_profiler';
 import {InjectedService, ProviderRecord} from '../debug/injector_profiler';
 import {getComponentDef} from '../definition';
-import {getNodeInjectorLView, getNodeInjectorTNode, getParentInjectorLocation, NodeInjector} from '../di';
+import {
+  getNodeInjectorLView,
+  getNodeInjectorTNode,
+  getParentInjectorLocation,
+  NodeInjector,
+} from '../di';
 import {NodeInjectorOffset} from '../interfaces/injector';
 import {TContainerNode, TElementContainerNode, TElementNode, TNode} from '../interfaces/node';
 import {RElement} from '../interfaces/renderer_dom';
@@ -45,8 +50,9 @@ import {getNativeByTNode} from './view_utils';
  * injector.
  */
 export function getDependenciesFromInjectable<T>(
-    injector: Injector, token: Type<T>|InjectionToken<T>):
-    {instance: T; dependencies: Omit<InjectedService, 'injectedIn'>[]}|undefined {
+  injector: Injector,
+  token: Type<T> | InjectionToken<T>,
+): {instance: T; dependencies: Omit<InjectedService, 'injectedIn'>[]} | undefined {
   // First we check to see if the token given maps to an actual instance in the injector given.
   // We use `self: true` because we only want to look at the injector we were given.
   // We use `optional: true` because it's possible that the token we were given was never
@@ -59,7 +65,7 @@ export function getDependenciesFromInjectable<T>(
   const unformattedDependencies = getDependenciesForTokenInInjector(token, injector);
   const resolutionPath = getInjectorResolutionPath(injector);
 
-  const dependencies = unformattedDependencies.map(dep => {
+  const dependencies = unformattedDependencies.map((dep) => {
     // injectedIn contains private fields, so we omit it from the response
     const formattedDependency: Omit<InjectedService, 'injectedIn'> = {
       value: dep.value,
@@ -74,7 +80,6 @@ export function getDependenciesFromInjectable<T>(
       skipSelf: (InternalInjectFlags.SkipSelf & flags) === InternalInjectFlags.SkipSelf,
     };
 
-
     // find the injector that provided the dependency
     for (let i = 0; i < resolutionPath.length; i++) {
       const injectorToCheck = resolutionPath[i];
@@ -89,8 +94,10 @@ export function getDependenciesFromInjectable<T>(
         break;
       }
 
-      const instance =
-          injectorToCheck.get(dep.token as Type<unknown>, null, {self: true, optional: true});
+      const instance = injectorToCheck.get(dep.token as Type<unknown>, null, {
+        self: true,
+        optional: true,
+      });
 
       if (instance !== null) {
         // if host flag is true we double check that we can get the service from the first element
@@ -99,8 +106,10 @@ export function getDependenciesFromInjectable<T>(
         // a router outlet.
         if (formattedDependency.flags.host) {
           const firstInjector = resolutionPath[0];
-          const lookupFromFirstInjector = firstInjector.get(
-              dep.token as Type<unknown>, null, {...formattedDependency.flags, optional: true});
+          const lookupFromFirstInjector = firstInjector.get(dep.token as Type<unknown>, null, {
+            ...formattedDependency.flags,
+            optional: true,
+          });
 
           if (lookupFromFirstInjector !== null) {
             formattedDependency.providedIn = injectorToCheck;
@@ -128,7 +137,9 @@ export function getDependenciesFromInjectable<T>(
 }
 
 function getDependenciesForTokenInInjector<T>(
-    token: Type<T>|InjectionToken<T>, injector: Injector): InjectedService[] {
+  token: Type<T> | InjectionToken<T>,
+  injector: Injector,
+): InjectedService[] {
   const {resolverToTokenToDependencies} = getFrameworkDIDebugData();
 
   if (!(injector instanceof NodeInjector)) {
@@ -142,7 +153,7 @@ function getDependenciesForTokenInInjector<T>(
   // In the NodeInjector case, all injections for every node are stored in the same lView.
   // We use the injectedIn field of the dependency to filter out the dependencies that
   // do not come from the same node as the instance we're looking at.
-  return dependencies.filter(dependency => {
+  return dependencies.filter((dependency) => {
     const dependencyNode = dependency.injectedIn?.tNode;
     if (dependencyNode === undefined) {
       return false;
@@ -167,7 +178,7 @@ function getDependenciesForTokenInInjector<T>(
  * @param injector Injector an injector instance
  * @returns the constructor where the `imports` array that configures this injector is located
  */
-function getProviderImportsContainer(injector: Injector): Type<unknown>|null {
+function getProviderImportsContainer(injector: Injector): Type<unknown> | null {
   const {standaloneInjectorToComponent} = getFrameworkDIDebugData();
 
   // standalone components configure providers through a component def, so we have to
@@ -230,9 +241,10 @@ function getNodeInjectorProviders(injector: NodeInjector): ProviderRecord[] {
  *     path
  *
  */
-function getProviderImportPaths(providerImportsContainer: Type<unknown>):
-    Map<SingleProvider, (Type<unknown>| InjectorType<unknown>)[]> {
-  const providerToPath = new Map<SingleProvider, (Type<unknown>| InjectorType<unknown>)[]>();
+function getProviderImportPaths(
+  providerImportsContainer: Type<unknown>,
+): Map<SingleProvider, (Type<unknown> | InjectorType<unknown>)[]> {
+  const providerToPath = new Map<SingleProvider, (Type<unknown> | InjectorType<unknown>)[]>();
   const visitedContainers = new Set<Type<unknown>>();
   const visitor = walkProviderTreeToDiscoverImportPaths(providerToPath, visitedContainers);
 
@@ -334,10 +346,10 @@ function getProviderImportPaths(providerImportsContainer: Type<unknown>):
  *     void
  */
 function walkProviderTreeToDiscoverImportPaths(
-    providerToPath: Map<SingleProvider, (Type<unknown>| InjectorType<unknown>)[]>,
-    visitedContainers: Set<Type<unknown>>):
-    (provider: SingleProvider, container: Type<unknown>|InjectorType<unknown>) => void {
-  return (provider: SingleProvider, container: Type<unknown>|InjectorType<unknown>) => {
+  providerToPath: Map<SingleProvider, (Type<unknown> | InjectorType<unknown>)[]>,
+  visitedContainers: Set<Type<unknown>>,
+): (provider: SingleProvider, container: Type<unknown> | InjectorType<unknown>) => void {
+  return (provider: SingleProvider, container: Type<unknown> | InjectorType<unknown>) => {
     // If the provider is not already in the providerToPath map,
     // add an entry with the provider as the key and an array containing the current container as
     // the value
@@ -356,8 +368,9 @@ function walkProviderTreeToDiscoverImportPaths(
 
         let containerDef = getInjectorDef(container);
         if (!containerDef) {
-          const ngModule: Type<unknown>|undefined =
-              (container as any).ngModule as Type<unknown>| undefined;
+          const ngModule: Type<unknown> | undefined = (container as any).ngModule as
+            | Type<unknown>
+            | undefined;
           containerDef = getInjectorDef(ngModule);
         }
 
@@ -373,8 +386,9 @@ function walkProviderTreeToDiscoverImportPaths(
             return;
           }
 
-          isNextStepInPath = (moduleImport as any).ngModule === lastContainerAddedToPath ||
-              moduleImport === lastContainerAddedToPath;
+          isNextStepInPath =
+            (moduleImport as any).ngModule === lastContainerAddedToPath ||
+            moduleImport === lastContainerAddedToPath;
 
           if (isNextStepInPath) {
             providerToPath.get(prov)?.unshift(container);
@@ -395,7 +409,7 @@ function walkProviderTreeToDiscoverImportPaths(
  */
 function getEnvironmentInjectorProviders(injector: EnvironmentInjector): ProviderRecord[] {
   const providerRecordsWithoutImportPaths =
-      getFrameworkDIDebugData().resolverToProviders.get(injector) ?? [];
+    getFrameworkDIDebugData().resolverToProviders.get(injector) ?? [];
 
   // platform injector has no provider imports container so can we skip trying to
   // find import paths
@@ -478,8 +492,13 @@ export function getInjectorProviders(injector: Injector): ProviderRecord[] {
  * @returns an object containing the type and source of the given injector. If the injector metadata
  *     cannot be determined, returns null.
  */
-export function getInjectorMetadata(injector: Injector): {type: 'element', source: RElement}|
-    {type: 'environment', source: string | null}|{type: 'null', source: null}|null {
+export function getInjectorMetadata(
+  injector: Injector,
+):
+  | {type: 'element'; source: RElement}
+  | {type: 'environment'; source: string | null}
+  | {type: 'null'; source: null}
+  | null {
   if (injector instanceof NodeInjector) {
     const lView = getNodeInjectorLView(injector);
     const tNode = getNodeInjectorTNode(injector)!;
@@ -506,7 +525,9 @@ export function getInjectorResolutionPath(injector: Injector): Injector[] {
 }
 
 function getInjectorResolutionPathHelper(
-    injector: Injector, resolutionPath: Injector[]): Injector[] {
+  injector: Injector,
+  resolutionPath: Injector[],
+): Injector[] {
   const parent = getInjectorParent(injector);
 
   // if getInjectorParent can't find a parent, then we've either reached the end
@@ -573,12 +594,12 @@ function getInjectorResolutionPathHelper(
  * @param injector an Injector to get the parent of
  * @returns Injector the parent of the given injector
  */
-function getInjectorParent(injector: Injector): Injector|null {
+function getInjectorParent(injector: Injector): Injector | null {
   if (injector instanceof R3Injector) {
     return injector.parent;
   }
 
-  let tNode: TElementNode|TContainerNode|TElementContainerNode|null;
+  let tNode: TElementNode | TContainerNode | TElementContainerNode | null;
   let lView: LView<unknown>;
   if (injector instanceof NodeInjector) {
     tNode = getNodeInjectorTNode(injector);
@@ -589,11 +610,14 @@ function getInjectorParent(injector: Injector): Injector|null {
     return injector.parentInjector;
   } else {
     throwError(
-        'getInjectorParent only support injectors of type R3Injector, NodeInjector, NullInjector, ChainedInjector');
+      'getInjectorParent only support injectors of type R3Injector, NodeInjector, NullInjector, ChainedInjector',
+    );
   }
 
   const parentLocation = getParentInjectorLocation(
-      tNode as TElementNode | TContainerNode | TElementContainerNode, lView);
+    tNode as TElementNode | TContainerNode | TElementContainerNode,
+    lView,
+  );
 
   if (hasParentInjector(parentLocation)) {
     const parentInjectorIndex = getParentInjectorIndex(parentLocation);
@@ -601,7 +625,9 @@ function getInjectorParent(injector: Injector): Injector|null {
     const parentTView = parentLView[TVIEW];
     const parentTNode = parentTView.data[parentInjectorIndex + NodeInjectorOffset.TNODE] as TNode;
     return new NodeInjector(
-        parentTNode as TElementNode | TContainerNode | TElementContainerNode, parentLView);
+      parentTNode as TElementNode | TContainerNode | TElementContainerNode,
+      parentLView,
+    );
   } else {
     const chainedInjector = lView[INJECTOR] as ChainedInjector;
 
@@ -636,7 +662,7 @@ function getModuleInjectorOfNodeInjector(injector: NodeInjector): Injector {
   }
 
   const inj = lView[INJECTOR] as R3Injector | ChainedInjector;
-  const moduleInjector = (inj instanceof ChainedInjector) ? inj.parentInjector : inj.parent;
+  const moduleInjector = inj instanceof ChainedInjector ? inj.parentInjector : inj.parent;
   if (!moduleInjector) {
     throwError('NodeInjector must have some connection to the module injector tree');
   }
diff --git a/packages/core/src/render3/util/injector_utils.ts b/packages/core/src/render3/util/injector_utils.ts
index ef90e52c159c2..ead2c8ba3e034 100644
--- a/packages/core/src/render3/util/injector_utils.ts
+++ b/packages/core/src/render3/util/injector_utils.ts
@@ -7,10 +7,13 @@
  */
 
 import {assertGreaterThan, assertNotEqual, assertNumber} from '../../util/assert';
-import {NO_PARENT_INJECTOR, RelativeInjectorLocation, RelativeInjectorLocationFlags} from '../interfaces/injector';
+import {
+  NO_PARENT_INJECTOR,
+  RelativeInjectorLocation,
+  RelativeInjectorLocationFlags,
+} from '../interfaces/injector';
 import {DECLARATION_VIEW, HEADER_OFFSET, LView} from '../interfaces/view';
 
-
 /// Parent Injector Utils ///////////////////////////////////////////////////////////////
 export function hasParentInjector(parentLocation: RelativeInjectorLocation): boolean {
   return parentLocation !== NO_PARENT_INJECTOR;
@@ -23,7 +26,10 @@ export function getParentInjectorIndex(parentLocation: RelativeInjectorLocation)
     const parentInjectorIndex = parentLocation & RelativeInjectorLocationFlags.InjectorIndexMask;
 
     assertGreaterThan(
-        parentInjectorIndex, HEADER_OFFSET, 'Parent injector must be pointing past HEADER_OFFSET.');
+      parentInjectorIndex,
+      HEADER_OFFSET,
+      'Parent injector must be pointing past HEADER_OFFSET.',
+    );
   }
   return parentLocation & RelativeInjectorLocationFlags.InjectorIndexMask;
 }
diff --git a/packages/core/src/render3/util/misc_utils.ts b/packages/core/src/render3/util/misc_utils.ts
index a7e53237297f6..ca3d6b916d4bf 100644
--- a/packages/core/src/render3/util/misc_utils.ts
+++ b/packages/core/src/render3/util/misc_utils.ts
@@ -15,7 +15,7 @@ import {RElement} from '../interfaces/renderer_dom';
  *
  * @codeGenApi
  */
-export function ɵɵresolveWindow(element: RElement&{ownerDocument: Document}) {
+export function ɵɵresolveWindow(element: RElement & {ownerDocument: Document}) {
   return element.ownerDocument.defaultView;
 }
 
@@ -23,7 +23,7 @@ export function ɵɵresolveWindow(element: RElement&{ownerDocument: Document}) {
  *
  * @codeGenApi
  */
-export function ɵɵresolveDocument(element: RElement&{ownerDocument: Document}) {
+export function ɵɵresolveDocument(element: RElement & {ownerDocument: Document}) {
   return element.ownerDocument;
 }
 
@@ -31,7 +31,7 @@ export function ɵɵresolveDocument(element: RElement&{ownerDocument: Document})
  *
  * @codeGenApi
  */
-export function ɵɵresolveBody(element: RElement&{ownerDocument: Document}) {
+export function ɵɵresolveBody(element: RElement & {ownerDocument: Document}) {
   return element.ownerDocument.body;
 }
 
@@ -54,7 +54,7 @@ export const INTERPOLATION_DELIMITER = `�`;
 /**
  * Unwrap a value which might be behind a closure (for forward declaration reasons).
  */
-export function maybeUnwrapFn<T>(value: T|(() => T)): T {
+export function maybeUnwrapFn<T>(value: T | (() => T)): T {
   if (value instanceof Function) {
     return value();
   } else {
diff --git a/packages/core/src/render3/util/stringify_utils.ts b/packages/core/src/render3/util/stringify_utils.ts
index 7a8ac5f4ae8bd..2868f21fd09cf 100644
--- a/packages/core/src/render3/util/stringify_utils.ts
+++ b/packages/core/src/render3/util/stringify_utils.ts
@@ -23,7 +23,6 @@ export function renderStringify(value: any): string {
   return String(value);
 }
 
-
 /**
  * Used to stringify a value so that it can be displayed in an error message.
  *
diff --git a/packages/core/src/render3/util/view_traversal_utils.ts b/packages/core/src/render3/util/view_traversal_utils.ts
index 4c41eebc0cc84..1d1fbcd662e8a 100644
--- a/packages/core/src/render3/util/view_traversal_utils.ts
+++ b/packages/core/src/render3/util/view_traversal_utils.ts
@@ -15,14 +15,13 @@ import {CHILD_HEAD, CONTEXT, FLAGS, LView, LViewFlags, NEXT, PARENT} from '../in
 
 import {getLViewParent} from './view_utils';
 
-
 /**
  * Retrieve the root view from any component or `LView` by walking the parent `LView` until
  * reaching the root `LView`.
  *
  * @param componentOrLView any component or `LView`
  */
-export function getRootView<T>(componentOrLView: LView|{}): LView<T> {
+export function getRootView<T>(componentOrLView: LView | {}): LView<T> {
   ngDevMode && assertDefined(componentOrLView, 'component');
   let lView = isLView(componentOrLView) ? componentOrLView : readPatchedLView(componentOrLView)!;
   while (lView && !(lView[FLAGS] & LViewFlags.IsRoot)) {
@@ -39,29 +38,28 @@ export function getRootView<T>(componentOrLView: LView|{}): LView<T> {
  *
  * @param viewOrComponent the `LView` or component to get the root context for.
  */
-export function getRootContext<T>(viewOrComponent: LView<T>|{}): T {
+export function getRootContext<T>(viewOrComponent: LView<T> | {}): T {
   const rootView = getRootView(viewOrComponent);
   ngDevMode &&
-      assertDefined(rootView[CONTEXT], 'Root view has no context. Perhaps it is disconnected?');
+    assertDefined(rootView[CONTEXT], 'Root view has no context. Perhaps it is disconnected?');
   return rootView[CONTEXT] as T;
 }
 
-
 /**
  * Gets the first `LContainer` in the LView or `null` if none exists.
  */
-export function getFirstLContainer(lView: LView): LContainer|null {
+export function getFirstLContainer(lView: LView): LContainer | null {
   return getNearestLContainer(lView[CHILD_HEAD]);
 }
 
 /**
  * Gets the next `LContainer` that is a sibling of the given container.
  */
-export function getNextLContainer(container: LContainer): LContainer|null {
+export function getNextLContainer(container: LContainer): LContainer | null {
   return getNearestLContainer(container[NEXT]);
 }
 
-function getNearestLContainer(viewOrContainer: LContainer|LView|null) {
+function getNearestLContainer(viewOrContainer: LContainer | LView | null) {
   while (viewOrContainer !== null && !isLContainer(viewOrContainer)) {
     viewOrContainer = viewOrContainer[NEXT];
   }
diff --git a/packages/core/src/render3/util/view_utils.ts b/packages/core/src/render3/util/view_utils.ts
index 817c6271b813c..eb80c455a2560 100644
--- a/packages/core/src/render3/util/view_utils.ts
+++ b/packages/core/src/render3/util/view_utils.ts
@@ -8,15 +8,34 @@
 
 import {NotificationSource} from '../../change_detection/scheduling/zoneless_scheduling';
 import {RuntimeError, RuntimeErrorCode} from '../../errors';
-import {assertDefined, assertGreaterThan, assertGreaterThanOrEqual, assertIndexInRange, assertLessThan} from '../../util/assert';
+import {
+  assertDefined,
+  assertGreaterThan,
+  assertGreaterThanOrEqual,
+  assertIndexInRange,
+  assertLessThan,
+} from '../../util/assert';
 import {assertLView, assertTNode, assertTNodeForLView} from '../assert';
 import {LContainer, TYPE} from '../interfaces/container';
 import {TConstants, TNode} from '../interfaces/node';
 import {RNode} from '../interfaces/renderer_dom';
 import {isLContainer, isLView} from '../interfaces/type_checks';
-import {DECLARATION_VIEW, ENVIRONMENT, FLAGS, HEADER_OFFSET, HOST, LView, LViewFlags, ON_DESTROY_HOOKS, PARENT, PREORDER_HOOK_FLAGS, PreOrderHookFlags, REACTIVE_TEMPLATE_CONSUMER, TData, TView} from '../interfaces/view';
-
-
+import {
+  DECLARATION_VIEW,
+  ENVIRONMENT,
+  FLAGS,
+  HEADER_OFFSET,
+  HOST,
+  LView,
+  LViewFlags,
+  ON_DESTROY_HOOKS,
+  PARENT,
+  PREORDER_HOOK_FLAGS,
+  PreOrderHookFlags,
+  REACTIVE_TEMPLATE_CONSUMER,
+  TData,
+  TView,
+} from '../interfaces/view';
 
 /**
  * For efficiency reasons we often put several different data types (`RNode`, `LView`, `LContainer`)
@@ -39,7 +58,7 @@ import {DECLARATION_VIEW, ENVIRONMENT, FLAGS, HEADER_OFFSET, HOST, LView, LViewF
  * Returns `RNode`.
  * @param value wrapped value of `RNode`, `LView`, `LContainer`
  */
-export function unwrapRNode(value: RNode|LView|LContainer): RNode {
+export function unwrapRNode(value: RNode | LView | LContainer): RNode {
   while (Array.isArray(value)) {
     value = value[HOST] as any;
   }
@@ -50,7 +69,7 @@ export function unwrapRNode(value: RNode|LView|LContainer): RNode {
  * Returns `LView` or `null` if not found.
  * @param value wrapped value of `RNode`, `LView`, `LContainer`
  */
-export function unwrapLView(value: RNode|LView|LContainer): LView|null {
+export function unwrapLView(value: RNode | LView | LContainer): LView | null {
   while (Array.isArray(value)) {
     // This check is same as `isLView()` but we don't call at as we don't want to call
     // `Array.isArray()` twice and give JITer more work for inlining.
@@ -93,17 +112,16 @@ export function getNativeByTNode(tNode: TNode, lView: LView): RNode {
  * @param tNode
  * @param lView
  */
-export function getNativeByTNodeOrNull(tNode: TNode|null, lView: LView): RNode|null {
+export function getNativeByTNodeOrNull(tNode: TNode | null, lView: LView): RNode | null {
   const index = tNode === null ? -1 : tNode.index;
   if (index !== -1) {
     ngDevMode && assertTNodeForLView(tNode!, lView);
-    const node: RNode|null = unwrapRNode(lView[index]);
+    const node: RNode | null = unwrapRNode(lView[index]);
     return node;
   }
   return null;
 }
 
-
 // fixme(misko): The return Type should be `TNode|null`
 export function getTNode(tView: TView, index: number): TNode {
   ngDevMode && assertGreaterThan(index, -1, 'wrong index for TNode');
@@ -114,7 +132,7 @@ export function getTNode(tView: TView, index: number): TNode {
 }
 
 /** Retrieves a value from any `LView` or `TData`. */
-export function load<T>(view: LView|TData, index: number): T {
+export function load<T>(view: LView | TData, index: number): T {
   ngDevMode && assertIndexInRange(view, index);
   return view[index];
 }
@@ -148,10 +166,16 @@ export function viewAttachedToContainer(view: LView): boolean {
 }
 
 /** Returns a constant from `TConstants` instance. */
-export function getConstant<T>(consts: TConstants|null, index: null|undefined): null;
-export function getConstant<T>(consts: TConstants, index: number): T|null;
-export function getConstant<T>(consts: TConstants|null, index: number|null|undefined): T|null;
-export function getConstant<T>(consts: TConstants|null, index: number|null|undefined): T|null {
+export function getConstant<T>(consts: TConstants | null, index: null | undefined): null;
+export function getConstant<T>(consts: TConstants, index: number): T | null;
+export function getConstant<T>(
+  consts: TConstants | null,
+  index: number | null | undefined,
+): T | null;
+export function getConstant<T>(
+  consts: TConstants | null,
+  index: number | null | undefined,
+): T | null {
   if (index === null || index === undefined) return null;
   ngDevMode && assertIndexInRange(consts!, index);
   return consts![index] as unknown as T;
@@ -187,9 +211,10 @@ export function markViewForRefresh(lView: LView) {
 export function walkUpViews(nestingLevel: number, currentView: LView): LView {
   while (nestingLevel > 0) {
     ngDevMode &&
-        assertDefined(
-            currentView[DECLARATION_VIEW],
-            'Declaration view should be defined if nesting level is greater than 0.');
+      assertDefined(
+        currentView[DECLARATION_VIEW],
+        'Declaration view should be defined if nesting level is greater than 0.',
+      );
     currentView = currentView[DECLARATION_VIEW]!;
     nestingLevel--;
   }
@@ -198,11 +223,11 @@ export function walkUpViews(nestingLevel: number, currentView: LView): LView {
 
 export function requiresRefreshOrTraversal(lView: LView) {
   return !!(
-      lView[FLAGS] & (LViewFlags.RefreshView | LViewFlags.HasChildViewsToRefresh) ||
-      lView[REACTIVE_TEMPLATE_CONSUMER]?.dirty);
+    lView[FLAGS] & (LViewFlags.RefreshView | LViewFlags.HasChildViewsToRefresh) ||
+    lView[REACTIVE_TEMPLATE_CONSUMER]?.dirty
+  );
 }
 
-
 /**
  * Updates the `HasChildViewsToRefresh` flag on the parents of the `LView` as well as the
  * parents above.
@@ -248,7 +273,9 @@ export function markAncestorsForTraversal(lView: LView) {
 export function storeLViewOnDestroy(lView: LView, onDestroyCallback: () => void) {
   if ((lView[FLAGS] & LViewFlags.Destroyed) === LViewFlags.Destroyed) {
     throw new RuntimeError(
-        RuntimeErrorCode.VIEW_ALREADY_DESTROYED, ngDevMode && 'View has already been destroyed.');
+      RuntimeErrorCode.VIEW_ALREADY_DESTROYED,
+      ngDevMode && 'View has already been destroyed.',
+    );
   }
   if (lView[ON_DESTROY_HOOKS] === null) {
     lView[ON_DESTROY_HOOKS] = [];
@@ -273,7 +300,7 @@ export function removeLViewOnDestroy(lView: LView, onDestroyCallback: () => void
  * that LContainer, which is an LView
  * @param lView the lView whose parent to get
  */
-export function getLViewParent(lView: LView): LView|null {
+export function getLViewParent(lView: LView): LView | null {
   ngDevMode && assertLView(lView);
   const parent = lView[PARENT];
   return isLContainer(parent) ? parent[PARENT] : parent;
diff --git a/packages/core/src/render3/view_engine_compatibility_prebound.ts b/packages/core/src/render3/view_engine_compatibility_prebound.ts
index 3ad181e1e0dd0..5ce6091fad110 100644
--- a/packages/core/src/render3/view_engine_compatibility_prebound.ts
+++ b/packages/core/src/render3/view_engine_compatibility_prebound.ts
@@ -6,18 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {createTemplateRef, TemplateRef} from '../linker/template_ref';
 import {TNode} from './interfaces/node';
 import {LView} from './interfaces/view';
 
-
 /**
  * Retrieves `TemplateRef` instance from `Injector` when a local reference is placed on the
  * `<ng-template>` element.
  *
  * @codeGenApi
  */
-export function ɵɵtemplateRefExtractor(tNode: TNode, lView: LView): TemplateRef<any>|null {
+export function ɵɵtemplateRefExtractor(tNode: TNode, lView: LView): TemplateRef<any> | null {
   return createTemplateRef(tNode, lView);
 }
diff --git a/packages/core/src/render3/view_manipulation.ts b/packages/core/src/render3/view_manipulation.ts
index 0aeb771bde69f..8b59b4739f7f7 100644
--- a/packages/core/src/render3/view_manipulation.ts
+++ b/packages/core/src/render3/view_manipulation.ts
@@ -19,15 +19,36 @@ import {createLView} from './instructions/shared';
 import {CONTAINER_HEADER_OFFSET, LContainer, NATIVE} from './interfaces/container';
 import {TNode} from './interfaces/node';
 import {RComment, RElement} from './interfaces/renderer_dom';
-import {DECLARATION_LCONTAINER, FLAGS, HYDRATION, LView, LViewFlags, QUERIES, RENDERER, T_HOST, TVIEW} from './interfaces/view';
-import {addViewToDOM, destroyLView, detachView, getBeforeNodeForView, insertView, nativeParentNode} from './node_manipulation';
+import {
+  DECLARATION_LCONTAINER,
+  FLAGS,
+  HYDRATION,
+  LView,
+  LViewFlags,
+  QUERIES,
+  RENDERER,
+  T_HOST,
+  TVIEW,
+} from './interfaces/view';
+import {
+  addViewToDOM,
+  destroyLView,
+  detachView,
+  getBeforeNodeForView,
+  insertView,
+  nativeParentNode,
+} from './node_manipulation';
 
 export function createAndRenderEmbeddedLView<T>(
-    declarationLView: LView<unknown>, templateTNode: TNode, context: T, options?: {
-      injector?: Injector,
-      embeddedViewInjector?: Injector,
-      dehydratedView?: DehydratedContainerView|null
-    }): LView<T> {
+  declarationLView: LView<unknown>,
+  templateTNode: TNode,
+  context: T,
+  options?: {
+    injector?: Injector;
+    embeddedViewInjector?: Injector;
+    dehydratedView?: DehydratedContainerView | null;
+  },
+): LView<T> {
   const prevConsumer = setActiveConsumer(null);
   try {
     const embeddedTView = templateTNode.tView!;
@@ -38,9 +59,18 @@ export function createAndRenderEmbeddedLView<T>(
     const isSignalView = declarationLView[FLAGS] & LViewFlags.SignalView;
     const viewFlags = isSignalView ? LViewFlags.SignalView : LViewFlags.CheckAlways;
     const embeddedLView = createLView<T>(
-        declarationLView, embeddedTView, context, viewFlags, null, templateTNode, null, null,
-        options?.injector ?? null, options?.embeddedViewInjector ?? null,
-        options?.dehydratedView ?? null);
+      declarationLView,
+      embeddedTView,
+      context,
+      viewFlags,
+      null,
+      templateTNode,
+      null,
+      null,
+      options?.injector ?? null,
+      options?.embeddedViewInjector ?? null,
+      options?.dehydratedView ?? null,
+    );
 
     const declarationLContainer = declarationLView[templateTNode.index];
     ngDevMode && assertLContainer(declarationLContainer);
@@ -60,8 +90,10 @@ export function createAndRenderEmbeddedLView<T>(
   }
 }
 
-export function getLViewFromLContainer<T>(lContainer: LContainer, index: number): LView<T>|
-    undefined {
+export function getLViewFromLContainer<T>(
+  lContainer: LContainer,
+  index: number,
+): LView<T> | undefined {
   const adjustedIndex = CONTAINER_HEADER_OFFSET + index;
   // avoid reading past the array boundaries
   if (adjustedIndex < lContainer.length) {
@@ -80,13 +112,20 @@ export function getLViewFromLContainer<T>(lContainer: LContainer, index: number)
  * block (in which case view contents was re-created, thus needing insertion).
  */
 export function shouldAddViewToDom(
-    tNode: TNode, dehydratedView?: DehydratedContainerView|null): boolean {
-  return !dehydratedView || dehydratedView.firstChild === null ||
-      hasInSkipHydrationBlockFlag(tNode);
+  tNode: TNode,
+  dehydratedView?: DehydratedContainerView | null,
+): boolean {
+  return (
+    !dehydratedView || dehydratedView.firstChild === null || hasInSkipHydrationBlockFlag(tNode)
+  );
 }
 
 export function addLViewToLContainer(
-    lContainer: LContainer, lView: LView<unknown>, index: number, addToDOM = true): void {
+  lContainer: LContainer,
+  lView: LView<unknown>,
+  index: number,
+  addToDOM = true,
+): void {
   const tView = lView[TVIEW];
 
   // Insert into the view tree so the new view can be change-detected
@@ -111,8 +150,10 @@ export function addLViewToLContainer(
   }
 }
 
-export function removeLViewFromLContainer(lContainer: LContainer, index: number): LView<unknown>|
-    undefined {
+export function removeLViewFromLContainer(
+  lContainer: LContainer,
+  index: number,
+): LView<unknown> | undefined {
   const lView = detachView(lContainer, index);
   if (lView !== undefined) {
     destroyLView(lView[TVIEW], lView);
diff --git a/packages/core/src/render3/view_ref.ts b/packages/core/src/render3/view_ref.ts
index 2e350bbdbed27..90a794f17aa84 100644
--- a/packages/core/src/render3/view_ref.ts
+++ b/packages/core/src/render3/view_ref.ts
@@ -18,18 +18,31 @@ import {checkNoChangesInternal, detectChangesInternal} from './instructions/chan
 import {markViewDirty} from './instructions/mark_view_dirty';
 import {CONTAINER_HEADER_OFFSET, VIEW_REFS} from './interfaces/container';
 import {isLContainer, isRootView} from './interfaces/type_checks';
-import {CONTEXT, DECLARATION_LCONTAINER, FLAGS, LView, LViewFlags, PARENT, TVIEW} from './interfaces/view';
-import {destroyLView, detachMovedView, detachView, detachViewFromDOM, trackMovedView} from './node_manipulation';
+import {
+  CONTEXT,
+  DECLARATION_LCONTAINER,
+  FLAGS,
+  LView,
+  LViewFlags,
+  PARENT,
+  TVIEW,
+} from './interfaces/view';
+import {
+  destroyLView,
+  detachMovedView,
+  detachView,
+  detachViewFromDOM,
+  trackMovedView,
+} from './node_manipulation';
 import {storeLViewOnDestroy, updateAncestorTraversalFlagsOnAttach} from './util/view_utils';
 
-
 // Needed due to tsickle downleveling where multiple `implements` with classes creates
 // multiple @extends in Closure annotations, which is illegal. This workaround fixes
 // the multiple @extends by making the annotation @implements instead
 interface ChangeDetectorRefInterface extends ChangeDetectorRef {}
 
 export class ViewRef<T> implements EmbeddedViewRef<T>, ChangeDetectorRefInterface {
-  private _appRef: ViewRefTracker|null = null;
+  private _appRef: ViewRefTracker | null = null;
   private _attachedToViewContainer = false;
 
   get rootNodes(): any[] {
@@ -39,26 +52,28 @@ export class ViewRef<T> implements EmbeddedViewRef<T>, ChangeDetectorRefInterfac
   }
 
   constructor(
-      /**
-       * This represents `LView` associated with the component when ViewRef is a ChangeDetectorRef.
-       *
-       * When ViewRef is created for a dynamic component, this also represents the `LView` for the
-       * component.
-       *
-       * For a "regular" ViewRef created for an embedded view, this is the `LView` for the embedded
-       * view.
-       *
-       * @internal
-       */
-      public _lView: LView,
+    /**
+     * This represents `LView` associated with the component when ViewRef is a ChangeDetectorRef.
+     *
+     * When ViewRef is created for a dynamic component, this also represents the `LView` for the
+     * component.
+     *
+     * For a "regular" ViewRef created for an embedded view, this is the `LView` for the embedded
+     * view.
+     *
+     * @internal
+     */
+    public _lView: LView,
 
-      /**
-       * This represents the `LView` associated with the point where `ChangeDetectorRef` was
-       * requested.
-       *
-       * This may be different from `_lView` if the `_cdRefInjectingView` is an embedded view.
-       */
-      private _cdRefInjectingView?: LView, readonly notifyErrorHandler = true) {}
+    /**
+     * This represents the `LView` associated with the point where `ChangeDetectorRef` was
+     * requested.
+     *
+     * This may be different from `_lView` if the `_cdRefInjectingView` is an embedded view.
+     */
+    private _cdRefInjectingView?: LView,
+    readonly notifyErrorHandler = true,
+  ) {}
 
   get context(): T {
     return this._lView[CONTEXT] as unknown as T;
@@ -74,7 +89,8 @@ export class ViewRef<T> implements EmbeddedViewRef<T>, ChangeDetectorRefInterfac
       // Note: We have a warning message here because the `@deprecated` JSDoc will not be picked
       // up for assignments on the setter. We want to let users know about the deprecated usage.
       console.warn(
-          'Angular: Replacing the `context` object of an `EmbeddedViewRef` is deprecated.');
+        'Angular: Replacing the `context` object of an `EmbeddedViewRef` is deprecated.',
+      );
     }
 
     this._lView[CONTEXT] = value as unknown as {};
@@ -94,9 +110,11 @@ export class ViewRef<T> implements EmbeddedViewRef<T>, ChangeDetectorRefInterfac
         const index = viewRefs ? viewRefs.indexOf(this) : -1;
         if (index > -1) {
           ngDevMode &&
-              assertEqual(
-                  index, parent.indexOf(this._lView) - CONTAINER_HEADER_OFFSET,
-                  'An attached view should be in the same position within its container as its ViewRef in the VIEW_REFS array.');
+            assertEqual(
+              index,
+              parent.indexOf(this._lView) - CONTAINER_HEADER_OFFSET,
+              'An attached view should be in the same position within its container as its ViewRef in the VIEW_REFS array.',
+            );
           detachView(parent, index);
           removeFromArray(viewRefs!, index);
         }
@@ -309,8 +327,9 @@ export class ViewRef<T> implements EmbeddedViewRef<T>, ChangeDetectorRefInterfac
   attachToViewContainerRef() {
     if (this._appRef) {
       throw new RuntimeError(
-          RuntimeErrorCode.VIEW_ALREADY_ATTACHED,
-          ngDevMode && 'This view is already attached directly to the ApplicationRef!');
+        RuntimeErrorCode.VIEW_ALREADY_ATTACHED,
+        ngDevMode && 'This view is already attached directly to the ApplicationRef!',
+      );
     }
     this._attachedToViewContainer = true;
   }
@@ -328,8 +347,9 @@ export class ViewRef<T> implements EmbeddedViewRef<T>, ChangeDetectorRefInterfac
   attachToAppRef(appRef: ViewRefTracker) {
     if (this._attachedToViewContainer) {
       throw new RuntimeError(
-          RuntimeErrorCode.VIEW_ALREADY_ATTACHED,
-          ngDevMode && 'This view is already attached to a ViewContainer!');
+        RuntimeErrorCode.VIEW_ALREADY_ATTACHED,
+        ngDevMode && 'This view is already attached to a ViewContainer!',
+      );
     }
     this._appRef = appRef;
     const isRoot = isRootView(this._lView);
diff --git a/packages/core/src/sanitization/bypass.ts b/packages/core/src/sanitization/bypass.ts
index e2209bb09ea23..53934892d44c1 100644
--- a/packages/core/src/sanitization/bypass.ts
+++ b/packages/core/src/sanitization/bypass.ts
@@ -58,15 +58,16 @@ export interface SafeUrl extends SafeValue {}
  */
 export interface SafeResourceUrl extends SafeValue {}
 
-
 abstract class SafeValueImpl implements SafeValue {
   constructor(public changingThisBreaksApplicationSecurity: string) {}
 
   abstract getTypeName(): string;
 
   toString() {
-    return `SafeValue must use [property]=binding: ${this.changingThisBreaksApplicationSecurity}` +
-        ` (see ${XSS_SECURITY_URL})`;
+    return (
+      `SafeValue must use [property]=binding: ${this.changingThisBreaksApplicationSecurity}` +
+      ` (see ${XSS_SECURITY_URL})`
+    );
   }
 }
 
@@ -98,20 +99,28 @@ class SafeResourceUrlImpl extends SafeValueImpl implements SafeResourceUrl {
 
 export function unwrapSafeValue(value: SafeValue): string;
 export function unwrapSafeValue<T>(value: T): T;
-export function unwrapSafeValue<T>(value: T|SafeValue): T {
-  return value instanceof SafeValueImpl ? value.changingThisBreaksApplicationSecurity as any as T :
-                                          value as any as T;
+export function unwrapSafeValue<T>(value: T | SafeValue): T {
+  return value instanceof SafeValueImpl
+    ? (value.changingThisBreaksApplicationSecurity as any as T)
+    : (value as any as T);
 }
 
-
 export function allowSanitizationBypassAndThrow(
-    value: any, type: BypassType.Html): value is SafeHtml;
+  value: any,
+  type: BypassType.Html,
+): value is SafeHtml;
 export function allowSanitizationBypassAndThrow(
-    value: any, type: BypassType.ResourceUrl): value is SafeResourceUrl;
+  value: any,
+  type: BypassType.ResourceUrl,
+): value is SafeResourceUrl;
 export function allowSanitizationBypassAndThrow(
-    value: any, type: BypassType.Script): value is SafeScript;
+  value: any,
+  type: BypassType.Script,
+): value is SafeScript;
 export function allowSanitizationBypassAndThrow(
-    value: any, type: BypassType.Style): value is SafeStyle;
+  value: any,
+  type: BypassType.Style,
+): value is SafeStyle;
 export function allowSanitizationBypassAndThrow(value: any, type: BypassType.Url): value is SafeUrl;
 export function allowSanitizationBypassAndThrow(value: any, type: BypassType): boolean;
 export function allowSanitizationBypassAndThrow(value: any, type: BypassType): boolean {
@@ -124,8 +133,8 @@ export function allowSanitizationBypassAndThrow(value: any, type: BypassType): b
   return actualType === type;
 }
 
-export function getSanitizationBypassType(value: any): BypassType|null {
-  return value instanceof SafeValueImpl && value.getTypeName() as BypassType || null;
+export function getSanitizationBypassType(value: any): BypassType | null {
+  return (value instanceof SafeValueImpl && (value.getTypeName() as BypassType)) || null;
 }
 
 /**
diff --git a/packages/core/src/sanitization/html_sanitizer.ts b/packages/core/src/sanitization/html_sanitizer.ts
index dbfdb703051f2..58648b0f9e1b9 100644
--- a/packages/core/src/sanitization/html_sanitizer.ts
+++ b/packages/core/src/sanitization/html_sanitizer.ts
@@ -41,47 +41,59 @@ const VOID_ELEMENTS = tagSet('area,br,col,hr,img,wbr');
 // https://html.spec.whatwg.org/#optional-tags
 const OPTIONAL_END_TAG_BLOCK_ELEMENTS = tagSet('colgroup,dd,dt,li,p,tbody,td,tfoot,th,thead,tr');
 const OPTIONAL_END_TAG_INLINE_ELEMENTS = tagSet('rp,rt');
-const OPTIONAL_END_TAG_ELEMENTS =
-    merge(OPTIONAL_END_TAG_INLINE_ELEMENTS, OPTIONAL_END_TAG_BLOCK_ELEMENTS);
+const OPTIONAL_END_TAG_ELEMENTS = merge(
+  OPTIONAL_END_TAG_INLINE_ELEMENTS,
+  OPTIONAL_END_TAG_BLOCK_ELEMENTS,
+);
 
 // Safe Block Elements - HTML5
 const BLOCK_ELEMENTS = merge(
-    OPTIONAL_END_TAG_BLOCK_ELEMENTS,
-    tagSet(
-        'address,article,' +
-        'aside,blockquote,caption,center,del,details,dialog,dir,div,dl,figure,figcaption,footer,h1,h2,h3,h4,h5,' +
-        'h6,header,hgroup,hr,ins,main,map,menu,nav,ol,pre,section,summary,table,ul'));
+  OPTIONAL_END_TAG_BLOCK_ELEMENTS,
+  tagSet(
+    'address,article,' +
+      'aside,blockquote,caption,center,del,details,dialog,dir,div,dl,figure,figcaption,footer,h1,h2,h3,h4,h5,' +
+      'h6,header,hgroup,hr,ins,main,map,menu,nav,ol,pre,section,summary,table,ul',
+  ),
+);
 
 // Inline Elements - HTML5
 const INLINE_ELEMENTS = merge(
-    OPTIONAL_END_TAG_INLINE_ELEMENTS,
-    tagSet(
-        'a,abbr,acronym,audio,b,' +
-        'bdi,bdo,big,br,cite,code,del,dfn,em,font,i,img,ins,kbd,label,map,mark,picture,q,ruby,rp,rt,s,' +
-        'samp,small,source,span,strike,strong,sub,sup,time,track,tt,u,var,video'));
-
-export const VALID_ELEMENTS =
-    merge(VOID_ELEMENTS, BLOCK_ELEMENTS, INLINE_ELEMENTS, OPTIONAL_END_TAG_ELEMENTS);
+  OPTIONAL_END_TAG_INLINE_ELEMENTS,
+  tagSet(
+    'a,abbr,acronym,audio,b,' +
+      'bdi,bdo,big,br,cite,code,del,dfn,em,font,i,img,ins,kbd,label,map,mark,picture,q,ruby,rp,rt,s,' +
+      'samp,small,source,span,strike,strong,sub,sup,time,track,tt,u,var,video',
+  ),
+);
+
+export const VALID_ELEMENTS = merge(
+  VOID_ELEMENTS,
+  BLOCK_ELEMENTS,
+  INLINE_ELEMENTS,
+  OPTIONAL_END_TAG_ELEMENTS,
+);
 
 // Attributes that have href and hence need to be sanitized
 export const URI_ATTRS = tagSet('background,cite,href,itemtype,longdesc,poster,src,xlink:href');
 
 const HTML_ATTRS = tagSet(
-    'abbr,accesskey,align,alt,autoplay,axis,bgcolor,border,cellpadding,cellspacing,class,clear,color,cols,colspan,' +
+  'abbr,accesskey,align,alt,autoplay,axis,bgcolor,border,cellpadding,cellspacing,class,clear,color,cols,colspan,' +
     'compact,controls,coords,datetime,default,dir,download,face,headers,height,hidden,hreflang,hspace,' +
     'ismap,itemscope,itemprop,kind,label,lang,language,loop,media,muted,nohref,nowrap,open,preload,rel,rev,role,rows,rowspan,rules,' +
     'scope,scrolling,shape,size,sizes,span,srclang,srcset,start,summary,tabindex,target,title,translate,type,usemap,' +
-    'valign,value,vspace,width');
+    'valign,value,vspace,width',
+);
 
 // Accessibility attributes as per WAI-ARIA 1.1 (W3C Working Draft 14 December 2018)
 const ARIA_ATTRS = tagSet(
-    'aria-activedescendant,aria-atomic,aria-autocomplete,aria-busy,aria-checked,aria-colcount,aria-colindex,' +
+  'aria-activedescendant,aria-atomic,aria-autocomplete,aria-busy,aria-checked,aria-colcount,aria-colindex,' +
     'aria-colspan,aria-controls,aria-current,aria-describedby,aria-details,aria-disabled,aria-dropeffect,' +
     'aria-errormessage,aria-expanded,aria-flowto,aria-grabbed,aria-haspopup,aria-hidden,aria-invalid,' +
     'aria-keyshortcuts,aria-label,aria-labelledby,aria-level,aria-live,aria-modal,aria-multiline,' +
     'aria-multiselectable,aria-orientation,aria-owns,aria-placeholder,aria-posinset,aria-pressed,aria-readonly,' +
     'aria-relevant,aria-required,aria-roledescription,aria-rowcount,aria-rowindex,aria-rowspan,aria-selected,' +
-    'aria-setsize,aria-sort,aria-valuemax,aria-valuemin,aria-valuenow,aria-valuetext');
+    'aria-setsize,aria-sort,aria-valuemax,aria-valuemin,aria-valuenow,aria-valuetext',
+);
 
 // NB: This currently consciously doesn't support SVG. SVG sanitization has had several security
 // issues in the past, so it seems safer to leave it out if possible. If support for binding SVG via
@@ -207,15 +219,17 @@ class SanitizingHtmlSerializer {
  * accessing `.firstChild` results in an unexpected node returned.
  */
 function isClobberedElement(parentNode: Node, childNode: Node): boolean {
-  return (parentNode.compareDocumentPosition(childNode) & Node.DOCUMENT_POSITION_CONTAINED_BY) !==
-      Node.DOCUMENT_POSITION_CONTAINED_BY;
+  return (
+    (parentNode.compareDocumentPosition(childNode) & Node.DOCUMENT_POSITION_CONTAINED_BY) !==
+    Node.DOCUMENT_POSITION_CONTAINED_BY
+  );
 }
 
 /**
  * Retrieves next sibling node and makes sure that there is no
  * clobbering of the `nextSibling` property happening.
  */
-function getNextSibling(node: Node): Node|null {
+function getNextSibling(node: Node): Node | null {
   const nextSibling = node.nextSibling;
   // Make sure there is no `nextSibling` clobbering: navigating to
   // the next sibling and going back to the previous one should result
@@ -230,7 +244,7 @@ function getNextSibling(node: Node): Node|null {
  * Retrieves first child node and makes sure that there is no
  * clobbering of the `firstChild` property happening.
  */
-function getFirstChild(node: Node): Node|null {
+function getFirstChild(node: Node): Node | null {
   const firstChild = node.firstChild;
   if (firstChild && isClobberedElement(node, firstChild)) {
     throw clobberedElementError(firstChild);
@@ -242,12 +256,13 @@ function getFirstChild(node: Node): Node|null {
 export function getNodeName(node: Node): string {
   const nodeName = node.nodeName;
   // If the property is clobbered, assume it is an `HTMLFormElement`.
-  return (typeof nodeName === 'string') ? nodeName : 'FORM';
+  return typeof nodeName === 'string' ? nodeName : 'FORM';
 }
 
 function clobberedElementError(node: Node) {
   return new Error(
-      `Failed to sanitize html because the element is clobbered: ${(node as Element).outerHTML}`);
+    `Failed to sanitize html because the element is clobbered: ${(node as Element).outerHTML}`,
+  );
 }
 
 // Regular Expressions for parsing tags and attributes
@@ -262,21 +277,18 @@ const NON_ALPHANUMERIC_REGEXP = /([^\#-~ |!])/g;
  * @param value
  */
 function encodeEntities(value: string) {
-  return value.replace(/&/g, '&amp;')
-      .replace(
-          SURROGATE_PAIR_REGEXP,
-          function(match: string) {
-            const hi = match.charCodeAt(0);
-            const low = match.charCodeAt(1);
-            return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
-          })
-      .replace(
-          NON_ALPHANUMERIC_REGEXP,
-          function(match: string) {
-            return '&#' + match.charCodeAt(0) + ';';
-          })
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;');
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(SURROGATE_PAIR_REGEXP, function (match: string) {
+      const hi = match.charCodeAt(0);
+      const low = match.charCodeAt(1);
+      return '&#' + ((hi - 0xd800) * 0x400 + (low - 0xdc00) + 0x10000) + ';';
+    })
+    .replace(NON_ALPHANUMERIC_REGEXP, function (match: string) {
+      return '&#' + match.charCodeAt(0) + ';';
+    })
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
 }
 
 let inertBodyHelper: InertBodyHelper;
@@ -285,8 +297,8 @@ let inertBodyHelper: InertBodyHelper;
  * Sanitizes the given unsafe, untrusted HTML fragment, and returns HTML text that is safe to add to
  * the DOM in a browser environment.
  */
-export function _sanitizeHtml(defaultDoc: any, unsafeHtmlInput: string): TrustedHTML|string {
-  let inertBodyElement: HTMLElement|null = null;
+export function _sanitizeHtml(defaultDoc: any, unsafeHtmlInput: string): TrustedHTML | string {
+  let inertBodyElement: HTMLElement | null = null;
   try {
     inertBodyHelper = inertBodyHelper || getInertBodyHelper(defaultDoc);
     // Make sure unsafeHtml is actually a string (TypeScript types are not enforced at runtime).
@@ -311,7 +323,8 @@ export function _sanitizeHtml(defaultDoc: any, unsafeHtmlInput: string): Trusted
 
     const sanitizer = new SanitizingHtmlSerializer();
     const safeHtml = sanitizer.sanitizeChildren(
-        getTemplateContent(inertBodyElement!) as Element || inertBodyElement);
+      (getTemplateContent(inertBodyElement!) as Element) || inertBodyElement,
+    );
     if ((typeof ngDevMode === 'undefined' || ngDevMode) && sanitizer.sanitizedSomething) {
       console.warn(`WARNING: sanitizing HTML stripped some content, see ${XSS_SECURITY_URL}`);
     }
@@ -328,10 +341,10 @@ export function _sanitizeHtml(defaultDoc: any, unsafeHtmlInput: string): Trusted
   }
 }
 
-export function getTemplateContent(el: Node): Node|null {
-  return 'content' in (el as any /** Microsoft/TypeScript#21517 */) && isTemplateElement(el) ?
-      el.content :
-      null;
+export function getTemplateContent(el: Node): Node | null {
+  return 'content' in (el as any) /** Microsoft/TypeScript#21517 */ && isTemplateElement(el)
+    ? el.content
+    : null;
 }
 function isTemplateElement(el: Node): el is HTMLTemplateElement {
   return el.nodeType === Node.ELEMENT_NODE && el.nodeName === 'TEMPLATE';
diff --git a/packages/core/src/sanitization/iframe_attrs_validation.ts b/packages/core/src/sanitization/iframe_attrs_validation.ts
index 07e08eb64254f..ce0a047ae244a 100644
--- a/packages/core/src/sanitization/iframe_attrs_validation.ts
+++ b/packages/core/src/sanitization/iframe_attrs_validation.ts
@@ -16,7 +16,6 @@ import {getLView, getSelectedTNode} from '../render3/state';
 import {getNativeByTNode} from '../render3/util/view_utils';
 import {trustedHTMLFromString} from '../util/security/trusted_types';
 
-
 /**
  * Validation function invoked at runtime for each binding that might potentially
  * represent a security-sensitive attribute of an <iframe>.
@@ -44,13 +43,14 @@ export function ɵɵvalidateIframeAttribute(attrValue: any, tagName: string, att
     // 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.`;
+    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(RuntimeErrorCode.UNSAFE_IFRAME_ATTRS, errorMessage);
   }
   return attrValue;
diff --git a/packages/core/src/sanitization/inert_body.ts b/packages/core/src/sanitization/inert_body.ts
index 299e75f42d9f0..1cb91f0fb7ade 100644
--- a/packages/core/src/sanitization/inert_body.ts
+++ b/packages/core/src/sanitization/inert_body.ts
@@ -34,16 +34,17 @@ export interface InertBodyHelper {
 class DOMParserHelper implements InertBodyHelper {
   constructor(private inertDocumentHelper: InertBodyHelper) {}
 
-  getInertBodyElement(html: string): HTMLElement|null {
+  getInertBodyElement(html: string): HTMLElement | null {
     // We add these extra elements to ensure that the rest of the content is parsed as expected
     // e.g. leading whitespace is maintained and tags like `<meta>` do not get hoisted to the
     // `<head>` tag. Note that the `<body>` tag is closed implicitly to prevent unclosed tags
     // in `html` from consuming the otherwise explicit `</body>` tag.
     html = '<body><remove></remove>' + html;
     try {
-      const body = new window.DOMParser()
-                       .parseFromString(trustedHTMLFromString(html) as string, 'text/html')
-                       .body as HTMLBodyElement;
+      const body = new window.DOMParser().parseFromString(
+        trustedHTMLFromString(html) as string,
+        'text/html',
+      ).body as HTMLBodyElement;
       if (body === null) {
         // In some browsers (e.g. Mozilla/5.0 iPad AppleWebKit Mobile) the `body` property only
         // becomes available in the following tick of the JS engine. In that case we fall back to
@@ -69,7 +70,7 @@ class InertDocumentHelper implements InertBodyHelper {
     this.inertDocument = this.defaultDoc.implementation.createHTMLDocument('sanitization-inert');
   }
 
-  getInertBodyElement(html: string): HTMLElement|null {
+  getInertBodyElement(html: string): HTMLElement | null {
     const templateEl = this.inertDocument.createElement('template');
     templateEl.innerHTML = trustedHTMLFromString(html) as string;
     return templateEl;
@@ -86,7 +87,9 @@ class InertDocumentHelper implements InertBodyHelper {
 export function isDOMParserAvailable() {
   try {
     return !!new window.DOMParser().parseFromString(
-        trustedHTMLFromString('') as string, 'text/html');
+      trustedHTMLFromString('') as string,
+      'text/html',
+    );
   } catch {
     return false;
   }
diff --git a/packages/core/src/sanitization/sanitization.ts b/packages/core/src/sanitization/sanitization.ts
index 4a08638e4286a..2b4b1cbdab76a 100644
--- a/packages/core/src/sanitization/sanitization.ts
+++ b/packages/core/src/sanitization/sanitization.ts
@@ -14,7 +14,11 @@ import {getLView} from '../render3/state';
 import {renderStringify} from '../render3/util/stringify_utils';
 import {TrustedHTML, TrustedScript, TrustedScriptURL} from '../util/security/trusted_type_defs';
 import {trustedHTMLFromString, trustedScriptURLFromString} from '../util/security/trusted_types';
-import {trustedHTMLFromStringBypass, trustedScriptFromStringBypass, trustedScriptURLFromStringBypass} from '../util/security/trusted_types_bypass';
+import {
+  trustedHTMLFromStringBypass,
+  trustedScriptFromStringBypass,
+  trustedScriptURLFromStringBypass,
+} from '../util/security/trusted_types_bypass';
 
 import {allowSanitizationBypassAndThrow, BypassType, unwrapSafeValue} from './bypass';
 import {_sanitizeHtml as _sanitizeHtml} from './html_sanitizer';
@@ -22,8 +26,6 @@ import {Sanitizer} from './sanitizer';
 import {SecurityContext} from './security';
 import {_sanitizeUrl as _sanitizeUrl} from './url_sanitizer';
 
-
-
 /**
  * An `html` sanitizer which converts untrusted `html` **string** into trusted string by removing
  * dangerous content.
@@ -39,7 +41,7 @@ import {_sanitizeUrl as _sanitizeUrl} from './url_sanitizer';
  *
  * @codeGenApi
  */
-export function ɵɵsanitizeHtml(unsafeHtml: any): TrustedHTML|string {
+export function ɵɵsanitizeHtml(unsafeHtml: any): TrustedHTML | string {
   const sanitizer = getSanitizer();
   if (sanitizer) {
     return trustedHTMLFromStringBypass(sanitizer.sanitize(SecurityContext.HTML, unsafeHtml) || '');
@@ -110,18 +112,20 @@ export function ɵɵsanitizeUrl(unsafeUrl: any): string {
  *
  * @codeGenApi
  */
-export function ɵɵsanitizeResourceUrl(unsafeResourceUrl: any): TrustedScriptURL|string {
+export function ɵɵsanitizeResourceUrl(unsafeResourceUrl: any): TrustedScriptURL | string {
   const sanitizer = getSanitizer();
   if (sanitizer) {
     return trustedScriptURLFromStringBypass(
-        sanitizer.sanitize(SecurityContext.RESOURCE_URL, unsafeResourceUrl) || '');
+      sanitizer.sanitize(SecurityContext.RESOURCE_URL, unsafeResourceUrl) || '',
+    );
   }
   if (allowSanitizationBypassAndThrow(unsafeResourceUrl, BypassType.ResourceUrl)) {
     return trustedScriptURLFromStringBypass(unwrapSafeValue(unsafeResourceUrl));
   }
   throw new RuntimeError(
-      RuntimeErrorCode.UNSAFE_VALUE_IN_RESOURCE_URL,
-      ngDevMode && `unsafe value used in a resource URL context (see ${XSS_SECURITY_URL})`);
+    RuntimeErrorCode.UNSAFE_VALUE_IN_RESOURCE_URL,
+    ngDevMode && `unsafe value used in a resource URL context (see ${XSS_SECURITY_URL})`,
+  );
 }
 
 /**
@@ -136,18 +140,20 @@ export function ɵɵsanitizeResourceUrl(unsafeResourceUrl: any): TrustedScriptUR
  *
  * @codeGenApi
  */
-export function ɵɵsanitizeScript(unsafeScript: any): TrustedScript|string {
+export function ɵɵsanitizeScript(unsafeScript: any): TrustedScript | string {
   const sanitizer = getSanitizer();
   if (sanitizer) {
     return trustedScriptFromStringBypass(
-        sanitizer.sanitize(SecurityContext.SCRIPT, unsafeScript) || '');
+      sanitizer.sanitize(SecurityContext.SCRIPT, unsafeScript) || '',
+    );
   }
   if (allowSanitizationBypassAndThrow(unsafeScript, BypassType.Script)) {
     return trustedScriptFromStringBypass(unwrapSafeValue(unsafeScript));
   }
   throw new RuntimeError(
-      RuntimeErrorCode.UNSAFE_VALUE_IN_SCRIPT,
-      ngDevMode && 'unsafe value used in a script context');
+    RuntimeErrorCode.UNSAFE_VALUE_IN_SCRIPT,
+    ngDevMode && 'unsafe value used in a script context',
+  );
 }
 
 /**
@@ -163,7 +169,7 @@ export function ɵɵsanitizeScript(unsafeScript: any): TrustedScript|string {
  *
  * @codeGenApi
  */
-export function ɵɵtrustConstantHtml(html: TemplateStringsArray): TrustedHTML|string {
+export function ɵɵtrustConstantHtml(html: TemplateStringsArray): TrustedHTML | string {
   // The following runtime check ensures that the function was called as a
   // template tag (e.g. ɵɵtrustConstantHtml`content`), without any interpolation
   // (e.g. not ɵɵtrustConstantHtml`content ${variable}`). A TemplateStringsArray
@@ -189,7 +195,7 @@ export function ɵɵtrustConstantHtml(html: TemplateStringsArray): TrustedHTML|s
  *
  * @codeGenApi
  */
-export function ɵɵtrustConstantResourceUrl(url: TemplateStringsArray): TrustedScriptURL|string {
+export function ɵɵtrustConstantResourceUrl(url: TemplateStringsArray): TrustedScriptURL | string {
   // The following runtime check ensures that the function was called as a
   // template tag (e.g. ɵɵtrustConstantResourceUrl`content`), without any
   // interpolation (e.g. not ɵɵtrustConstantResourceUrl`content ${variable}`). A
@@ -210,10 +216,15 @@ export function ɵɵtrustConstantResourceUrl(url: TemplateStringsArray): Trusted
  * If tag and prop names don't match Resource URL schema, use URL sanitizer.
  */
 export function getUrlSanitizer(tag: string, prop: string) {
-  if ((prop === 'src' &&
-       (tag === 'embed' || tag === 'frame' || tag === 'iframe' || tag === 'media' ||
+  if (
+    (prop === 'src' &&
+      (tag === 'embed' ||
+        tag === 'frame' ||
+        tag === 'iframe' ||
+        tag === 'media' ||
         tag === 'script')) ||
-      (prop === 'href' && (tag === 'base' || tag === 'link'))) {
+    (prop === 'href' && (tag === 'base' || tag === 'link'))
+  ) {
     return ɵɵsanitizeResourceUrl;
   }
   return ɵɵsanitizeUrl;
@@ -241,10 +252,10 @@ export function ɵɵsanitizeUrlOrResourceUrl(unsafeUrl: any, tag: string, prop:
 export function validateAgainstEventProperties(name: string) {
   if (name.toLowerCase().startsWith('on')) {
     const errorMessage =
-        `Binding to event property '${name}' is disallowed for security reasons, ` +
-        `please use (${name.slice(2)})=...` +
-        `\nIf '${name}' is a directive input, make sure the directive is imported by the` +
-        ` current module.`;
+      `Binding to event property '${name}' is disallowed for security reasons, ` +
+      `please use (${name.slice(2)})=...` +
+      `\nIf '${name}' is a directive input, make sure the directive is imported by the` +
+      ` current module.`;
     throw new RuntimeError(RuntimeErrorCode.INVALID_EVENT_BINDING, errorMessage);
   }
 }
@@ -252,13 +263,13 @@ export function validateAgainstEventProperties(name: string) {
 export function validateAgainstEventAttributes(name: string) {
   if (name.toLowerCase().startsWith('on')) {
     const errorMessage =
-        `Binding to event attribute '${name}' is disallowed for security reasons, ` +
-        `please use (${name.slice(2)})=...`;
+      `Binding to event attribute '${name}' is disallowed for security reasons, ` +
+      `please use (${name.slice(2)})=...`;
     throw new RuntimeError(RuntimeErrorCode.INVALID_EVENT_BINDING, errorMessage);
   }
 }
 
-function getSanitizer(): Sanitizer|null {
+function getSanitizer(): Sanitizer | null {
   const lView = getLView();
   return lView && lView[ENVIRONMENT].sanitizer;
 }
diff --git a/packages/core/src/sanitization/sanitizer.ts b/packages/core/src/sanitization/sanitizer.ts
index adf9523725d98..14f150ec237b4 100644
--- a/packages/core/src/sanitization/sanitizer.ts
+++ b/packages/core/src/sanitization/sanitizer.ts
@@ -15,7 +15,7 @@ import {SecurityContext} from './security';
  * @publicApi
  */
 export abstract class Sanitizer {
-  abstract sanitize(context: SecurityContext, value: {}|string|null): string|null;
+  abstract sanitize(context: SecurityContext, value: {} | string | null): string | null;
   /** @nocollapse */
   static ɵprov = /** @pureOrBreakMyCode */ ɵɵdefineInjectable({
     token: Sanitizer,
diff --git a/packages/core/src/testability/testability.externs.js b/packages/core/src/testability/testability.externs.js
index 1954a3fcbb42e..db7aaac9c56b2 100644
--- a/packages/core/src/testability/testability.externs.js
+++ b/packages/core/src/testability/testability.externs.js
@@ -6,7 +6,7 @@ function PublicTestability() {}
 /**
  * @return {?}
  */
-PublicTestability.prototype.isStable = function() {};
+PublicTestability.prototype.isStable = function () {};
 
 /**
  * @param {?} callback
@@ -14,7 +14,7 @@ PublicTestability.prototype.isStable = function() {};
  * @param {?} updateCallback
  * @return {?}
  */
-PublicTestability.prototype.whenStable = function(callback, timeout, updateCallback) {};
+PublicTestability.prototype.whenStable = function (callback, timeout, updateCallback) {};
 
 /**
  * @param {?} using
@@ -22,4 +22,4 @@ PublicTestability.prototype.whenStable = function(callback, timeout, updateCallb
  * @param {?} exactMatch
  * @return {?}
  */
-PublicTestability.prototype.findProviders = function(using, provider, exactMatch) {};
+PublicTestability.prototype.findProviders = function (using, provider, exactMatch) {};
diff --git a/packages/core/src/testability/testability.ts b/packages/core/src/testability/testability.ts
index f1c14112ea494..67f57504f1395 100644
--- a/packages/core/src/testability/testability.ts
+++ b/packages/core/src/testability/testability.ts
@@ -84,11 +84,13 @@ export class Testability implements PublicTestability {
   private _isZoneStable: boolean = true;
   private _callbacks: WaitCallback[] = [];
 
-  private taskTrackingZone: {macroTasks: Task[]}|null = null;
+  private taskTrackingZone: {macroTasks: Task[]} | null = null;
 
   constructor(
-      private _ngZone: NgZone, private registry: TestabilityRegistry,
-      @Inject(TESTABILITY_GETTER) testabilityGetter: GetTestability) {
+    private _ngZone: NgZone,
+    private registry: TestabilityRegistry,
+    @Inject(TESTABILITY_GETTER) testabilityGetter: GetTestability,
+  ) {
     // If there was no Testability logic registered in the global scope
     // before, register the current testability getter as a global one.
     if (!_testabilityGetter) {
@@ -98,7 +100,7 @@ export class Testability implements PublicTestability {
     this._watchAngularEvents();
     _ngZone.run(() => {
       this.taskTrackingZone =
-          typeof Zone == 'undefined' ? null : Zone.current.get('TaskTrackingZone');
+        typeof Zone == 'undefined' ? null : Zone.current.get('TaskTrackingZone');
     });
   }
 
@@ -106,7 +108,7 @@ export class Testability implements PublicTestability {
     this._ngZone.onUnstable.subscribe({
       next: () => {
         this._isZoneStable = false;
-      }
+      },
     });
 
     this._ngZone.runOutsideAngular(() => {
@@ -117,7 +119,7 @@ export class Testability implements PublicTestability {
             this._isZoneStable = true;
             this._runCallbacksIfReady();
           });
-        }
+        },
       });
     });
   }
@@ -165,7 +167,7 @@ export class Testability implements PublicTestability {
         // From TaskTrackingZone:
         // https://github.com/angular/zone.js/blob/master/lib/zone-spec/task-tracking.ts#L40
         creationLocation: (t as any).creationLocation as Error,
-        data: t.data
+        data: t.data,
       };
     });
   }
@@ -196,8 +198,9 @@ export class Testability implements PublicTestability {
   whenStable(doneCb: Function, timeout?: number, updateCb?: Function): void {
     if (updateCb && !this.taskTrackingZone) {
       throw new Error(
-          'Task tracking zone is required when passing an update callback to ' +
-          'whenStable(). Is "zone.js/plugins/task-tracking" loaded?');
+        'Task tracking zone is required when passing an update callback to ' +
+          'whenStable(). Is "zone.js/plugins/task-tracking" loaded?',
+      );
     }
     this.addCallback(doneCb, timeout, updateCb);
     this._runCallbacksIfReady();
@@ -272,7 +275,7 @@ export class TestabilityRegistry {
    * Get a testability hook associated with the application
    * @param elem root element
    */
-  getTestability(elem: any): Testability|null {
+  getTestability(elem: any): Testability | null {
     return this._applications.get(elem) || null;
   }
 
@@ -296,7 +299,7 @@ export class TestabilityRegistry {
    * @param findInAncestors whether finding testability in ancestors if testability was not found in
    * current node
    */
-  findTestabilityInTree(elem: Node, findInAncestors: boolean = true): Testability|null {
+  findTestabilityInTree(elem: Node, findInAncestors: boolean = true): Testability | null {
     return _testabilityGetter?.findTestabilityInTree(this, elem, findInAncestors) ?? null;
   }
 }
@@ -309,8 +312,11 @@ export class TestabilityRegistry {
  */
 export interface GetTestability {
   addToWindow(registry: TestabilityRegistry): void;
-  findTestabilityInTree(registry: TestabilityRegistry, elem: any, findInAncestors: boolean):
-      Testability|null;
+  findTestabilityInTree(
+    registry: TestabilityRegistry,
+    elem: any,
+    findInAncestors: boolean,
+  ): Testability | null;
 }
 
 /**
@@ -321,4 +327,4 @@ export function setTestabilityGetter(getter: GetTestability): void {
   _testabilityGetter = getter;
 }
 
-let _testabilityGetter: GetTestability|undefined;
+let _testabilityGetter: GetTestability | undefined;
diff --git a/packages/core/src/transfer_state.ts b/packages/core/src/transfer_state.ts
index fda90ca8874b9..6bee557d48287 100644
--- a/packages/core/src/transfer_state.ts
+++ b/packages/core/src/transfer_state.ts
@@ -25,9 +25,9 @@ import {getDocument} from './render3/interfaces/document';
  *
  * @publicApi
  */
-export type StateKey<T> = string&{
-  __not_a_string: never,
-  __value_type?: T,
+export type StateKey<T> = string & {
+  __not_a_string: never;
+  __value_type?: T;
 };
 
 /**
@@ -74,15 +74,14 @@ function initTransferState(): TransferState {
  */
 export class TransferState {
   /** @nocollapse */
-  static ɵprov =
-      /** @pureOrBreakMyCode */ ɵɵdefineInjectable({
-        token: TransferState,
-        providedIn: 'root',
-        factory: initTransferState,
-      });
+  static ɵprov = /** @pureOrBreakMyCode */ ɵɵdefineInjectable({
+    token: TransferState,
+    providedIn: 'root',
+    factory: initTransferState,
+  });
 
   /** @internal */
-  store: Record<string, unknown|undefined> = {};
+  store: Record<string, unknown | undefined> = {};
 
   private onSerializeCallbacks: {[k: string]: () => unknown | undefined} = {};
 
@@ -90,7 +89,7 @@ export class TransferState {
    * Get the value corresponding to a key. Return `defaultValue` if key is not found.
    */
   get<T>(key: StateKey<T>, defaultValue: T): T {
-    return this.store[key] !== undefined ? this.store[key] as T : defaultValue;
+    return this.store[key] !== undefined ? (this.store[key] as T) : defaultValue;
   }
 
   /**
@@ -149,7 +148,10 @@ export class TransferState {
   }
 }
 
-function retrieveTransferredState(doc: Document, appId: string): Record<string, unknown|undefined> {
+function retrieveTransferredState(
+  doc: Document,
+  appId: string,
+): Record<string, unknown | undefined> {
   // Locate the script tag with the JSON data transferred from the server.
   // The id of the script tag is set to the Angular appId + 'state'.
   const script = doc.getElementById(appId + '-state');
diff --git a/packages/core/src/util/array_utils.ts b/packages/core/src/util/array_utils.ts
index f16953b044b14..9e39c772f03d7 100644
--- a/packages/core/src/util/array_utils.ts
+++ b/packages/core/src/util/array_utils.ts
@@ -39,8 +39,8 @@ export function flatten(list: any[]): any[] {
   return list.flat(Number.POSITIVE_INFINITY);
 }
 
-export function deepForEach<T>(input: (T|any[])[], fn: (value: T) => void): void {
-  input.forEach(value => Array.isArray(value) ? deepForEach(value, fn) : fn(value));
+export function deepForEach<T>(input: (T | any[])[], fn: (value: T) => void): void {
+  input.forEach((value) => (Array.isArray(value) ? deepForEach(value, fn) : fn(value)));
 }
 
 export function addToArray(arr: any[], index: number, value: any): void {
@@ -91,7 +91,7 @@ export function arraySplice(array: any[], index: number, count: number): void {
     index++;
   }
   while (count--) {
-    array.pop();  // shrink the array
+    array.pop(); // shrink the array
   }
 }
 
@@ -107,7 +107,7 @@ export function arraySplice(array: any[], index: number, count: number): void {
  * @param value Value to add to array.
  */
 export function arrayInsert(array: any[], index: number, value: any): void {
-  ngDevMode && assertLessThanOrEqual(index, array.length, 'Can\'t insert past array end.');
+  ngDevMode && assertLessThanOrEqual(index, array.length, "Can't insert past array end.");
   let end = array.length;
   while (end > index) {
     const previousEnd = end - 1;
@@ -130,7 +130,7 @@ export function arrayInsert(array: any[], index: number, value: any): void {
  * @param value2 Value to add to array.
  */
 export function arrayInsert2(array: any[], index: number, value1: any, value2: any): void {
-  ngDevMode && assertLessThanOrEqual(index, array.length, 'Can\'t insert past array end.');
+  ngDevMode && assertLessThanOrEqual(index, array.length, "Can't insert past array end.");
   let end = array.length;
   if (end == index) {
     // inserting at the end.
@@ -152,7 +152,6 @@ export function arrayInsert2(array: any[], index: number, value1: any, value2: a
   }
 }
 
-
 /**
  * Get an index of an `value` in a sorted `array`.
  *
@@ -170,7 +169,6 @@ export function arrayIndexOfSorted(array: string[], value: string): number {
   return _arrayIndexOfSorted(array, value, 0);
 }
 
-
 /**
  * `KeyValueArray` is an array where even positions contain keys and odd positions contain values.
  *
@@ -183,7 +181,7 @@ export function arrayIndexOfSorted(array: string[], value: string): number {
  *
  * See: `keyValueArraySet`, `keyValueArrayGet`, `keyValueArrayIndexOf`, `keyValueArrayDelete`.
  */
-export interface KeyValueArray<VALUE> extends Array<VALUE|string> {
+export interface KeyValueArray<VALUE> extends Array<VALUE | string> {
   __brand__: 'array-map';
 }
 
@@ -196,7 +194,10 @@ export interface KeyValueArray<VALUE> extends Array<VALUE|string> {
  * @returns index (always even) of where the value vas set.
  */
 export function keyValueArraySet<V>(
-    keyValueArray: KeyValueArray<V>, key: string, value: V): number {
+  keyValueArray: KeyValueArray<V>,
+  key: string,
+  value: V,
+): number {
   let index = keyValueArrayIndexOf(keyValueArray, key);
   if (index >= 0) {
     // if we found it set it.
@@ -215,7 +216,7 @@ export function keyValueArraySet<V>(
  * @param key The key to locate.
  * @return The `value` stored at the `key` location or `undefined if not found.
  */
-export function keyValueArrayGet<V>(keyValueArray: KeyValueArray<V>, key: string): V|undefined {
+export function keyValueArrayGet<V>(keyValueArray: KeyValueArray<V>, key: string): V | undefined {
   const index = keyValueArrayIndexOf(keyValueArray, key);
   if (index >= 0) {
     // if we found it retrieve it.
@@ -257,7 +258,6 @@ export function keyValueArrayDelete<V>(keyValueArray: KeyValueArray<V>, key: str
   return index;
 }
 
-
 /**
  * INTERNAL: Get an index of an `value` in a sorted `array` by grouping search by `shift`.
  *
@@ -280,14 +280,14 @@ function _arrayIndexOfSorted(array: string[], value: string, shift: number): num
   let start = 0;
   let end = array.length >> shift;
   while (end !== start) {
-    const middle = start + ((end - start) >> 1);  // find the middle.
+    const middle = start + ((end - start) >> 1); // find the middle.
     const current = array[middle << shift];
     if (value === current) {
-      return (middle << shift);
+      return middle << shift;
     } else if (current > value) {
       end = middle;
     } else {
-      start = middle + 1;  // We already searched middle so make it non-inclusive by adding 1
+      start = middle + 1; // We already searched middle so make it non-inclusive by adding 1
     }
   }
   return ~(end << shift);
diff --git a/packages/core/src/util/assert.ts b/packages/core/src/util/assert.ts
index bf7b08ca708cc..4509fc1fc58df 100644
--- a/packages/core/src/util/assert.ts
+++ b/packages/core/src/util/assert.ts
@@ -21,7 +21,10 @@ export function assertNumber(actual: any, msg: string): asserts actual is number
 }
 
 export function assertNumberInRange(
-    actual: any, minInclusive: number, maxInclusive: number): asserts actual is number {
+  actual: any,
+  minInclusive: number,
+  maxInclusive: number,
+): asserts actual is number {
   assertNumber(actual, 'Expected a number');
   assertLessThanOrEqual(actual, maxInclusive, 'Expected number to be less than or equal to');
   assertGreaterThanOrEqual(actual, minInclusive, 'Expected number to be greater than or equal to');
@@ -82,7 +85,10 @@ export function assertGreaterThan<T>(actual: T, expected: T, msg: string): asser
 }
 
 export function assertGreaterThanOrEqual<T>(
-    actual: T, expected: T, msg: string): asserts actual is T {
+  actual: T,
+  expected: T,
+  msg: string,
+): asserts actual is T {
   if (!(actual >= expected)) {
     throwError(msg, actual, expected, '>=');
   }
@@ -94,7 +100,7 @@ export function assertNotDefined<T>(actual: T, msg: string) {
   }
 }
 
-export function assertDefined<T>(actual: T|null|undefined, msg: string): asserts actual is T {
+export function assertDefined<T>(actual: T | null | undefined, msg: string): asserts actual is T {
   if (actual == null) {
     throwError(msg, actual, null, '!=');
   }
@@ -104,8 +110,9 @@ export function throwError(msg: string): never;
 export function throwError(msg: string, actual: any, expected: any, comparison: string): never;
 export function throwError(msg: string, actual?: any, expected?: any, comparison?: string): never {
   throw new Error(
-      `ASSERTION ERROR: ${msg}` +
-      (comparison == null ? '' : ` [Expected=> ${expected} ${comparison} ${actual} <=Actual]`));
+    `ASSERTION ERROR: ${msg}` +
+      (comparison == null ? '' : ` [Expected=> ${expected} ${comparison} ${actual} <=Actual]`),
+  );
 }
 
 export function assertDomNode(node: any): asserts node is Node {
@@ -130,8 +137,9 @@ export function assertIndexInRange(arr: any[], index: number) {
 
 export function assertOneOf(value: any, ...validValues: any[]) {
   if (validValues.indexOf(value) !== -1) return true;
-  throwError(`Expected value to be one of ${JSON.stringify(validValues)} but was ${
-      JSON.stringify(value)}.`);
+  throwError(
+    `Expected value to be one of ${JSON.stringify(validValues)} but was ${JSON.stringify(value)}.`,
+  );
 }
 
 export function assertNotReactive(fn: string): void {
diff --git a/packages/core/src/util/callback_scheduler.ts b/packages/core/src/util/callback_scheduler.ts
index a9f43825695b8..dc8168f56aadb 100644
--- a/packages/core/src/util/callback_scheduler.ts
+++ b/packages/core/src/util/callback_scheduler.ts
@@ -34,20 +34,23 @@ import {global} from './global';
  *
  * @returns a function to cancel the scheduled callback
  */
-export function scheduleCallbackWithRafRace(callback: Function, useNativeTimers = true): () =>
-    void {
+export function scheduleCallbackWithRafRace(
+  callback: Function,
+  useNativeTimers = true,
+): () => void {
   // Note: the `scheduleCallback` 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 hasRequestAnimationFrame = typeof global['requestAnimationFrame'] === 'function';
-  let nativeRequestAnimationFrame =
-      hasRequestAnimationFrame ? global['requestAnimationFrame'] : null;
+  let nativeRequestAnimationFrame = hasRequestAnimationFrame
+    ? global['requestAnimationFrame']
+    : null;
   let nativeSetTimeout = global['setTimeout'];
   if (typeof Zone !== 'undefined' && useNativeTimers) {
     if (hasRequestAnimationFrame) {
       nativeRequestAnimationFrame =
-          global[Zone.__symbol__('requestAnimationFrame')] ?? nativeRequestAnimationFrame;
+        global[Zone.__symbol__('requestAnimationFrame')] ?? nativeRequestAnimationFrame;
     }
     nativeSetTimeout = global[Zone.__symbol__('setTimeout')] ?? nativeSetTimeout;
   }
diff --git a/packages/core/src/util/char_code.ts b/packages/core/src/util/char_code.ts
index c14efdacbd9e3..91d312d7b9fc4 100644
--- a/packages/core/src/util/char_code.ts
+++ b/packages/core/src/util/char_code.ts
@@ -10,38 +10,38 @@
  * List ASCII char codes to be used with `String.charCodeAt`
  */
 export const enum CharCode {
-  UPPER_CASE = ~32,   // & with this will make the char uppercase
-  SPACE = 32,         // " "
-  DOUBLE_QUOTE = 34,  // "\""
-  HASH = 35,          // "#"
-  SINGLE_QUOTE = 39,  // "'"
-  OPEN_PAREN = 40,    // "("
-  CLOSE_PAREN = 41,   // ")"
-  STAR = 42,          // "*"
-  SLASH = 47,         // "/"
-  _0 = 48,            // "0"
-  _1 = 49,            // "1"
-  _2 = 50,            // "2"
-  _3 = 51,            // "3"
-  _4 = 52,            // "4"
-  _5 = 53,            // "5"
-  _6 = 54,            // "6"
-  _7 = 55,            // "7"
-  _8 = 56,            // "8"
-  _9 = 57,            // "9"
-  COLON = 58,         // ":"
-  DASH = 45,          // "-"
-  UNDERSCORE = 95,    // "_"
-  SEMI_COLON = 59,    // ";"
-  BACK_SLASH = 92,    // "\\"
-  AT_SIGN = 64,       // "@"
-  ZERO = 48,          // "0"
-  NINE = 57,          // "9"
-  A = 65,             // "A"
-  U = 85,             // "U"
-  R = 82,             // "R"
-  L = 76,             // "L"
-  Z = 90,             // "A"
-  a = 97,             // "a"
-  z = 122,            // "z"
+  UPPER_CASE = ~32, // & with this will make the char uppercase
+  SPACE = 32, // " "
+  DOUBLE_QUOTE = 34, // "\""
+  HASH = 35, // "#"
+  SINGLE_QUOTE = 39, // "'"
+  OPEN_PAREN = 40, // "("
+  CLOSE_PAREN = 41, // ")"
+  STAR = 42, // "*"
+  SLASH = 47, // "/"
+  _0 = 48, // "0"
+  _1 = 49, // "1"
+  _2 = 50, // "2"
+  _3 = 51, // "3"
+  _4 = 52, // "4"
+  _5 = 53, // "5"
+  _6 = 54, // "6"
+  _7 = 55, // "7"
+  _8 = 56, // "8"
+  _9 = 57, // "9"
+  COLON = 58, // ":"
+  DASH = 45, // "-"
+  UNDERSCORE = 95, // "_"
+  SEMI_COLON = 59, // ";"
+  BACK_SLASH = 92, // "\\"
+  AT_SIGN = 64, // "@"
+  ZERO = 48, // "0"
+  NINE = 57, // "9"
+  A = 65, // "A"
+  U = 85, // "U"
+  R = 82, // "R"
+  L = 76, // "L"
+  Z = 90, // "A"
+  a = 97, // "a"
+  z = 122, // "z"
 }
diff --git a/packages/core/src/util/coercion.ts b/packages/core/src/util/coercion.ts
index 0f8b05298b3fb..6620b2641143a 100644
--- a/packages/core/src/util/coercion.ts
+++ b/packages/core/src/util/coercion.ts
@@ -19,7 +19,7 @@
  * @publicApi
  */
 export function booleanAttribute(value: unknown): boolean {
-  return typeof value === 'boolean' ? value : (value != null && value !== 'false');
+  return typeof value === 'boolean' ? value : value != null && value !== 'false';
 }
 
 /**
diff --git a/packages/core/src/util/decorators.ts b/packages/core/src/util/decorators.ts
index f16bb02b79883..0aec3782228d0 100644
--- a/packages/core/src/util/decorators.ts
+++ b/packages/core/src/util/decorators.ts
@@ -10,8 +10,6 @@ import {Type} from '../interface/type';
 
 import {noSideEffects} from './closure';
 
-
-
 /**
  * An interface implemented by all Angular type decorators, which allows them to be used as
  * decorators as well as Angular syntax.
@@ -33,7 +31,7 @@ export interface TypeDecorator {
   // ParameterDecorator is declared in lib.d.ts as a `declare type`
   // so we cannot declare this interface as a subtype.
   // see https://github.com/angular/angular/issues/3379#issuecomment-126169417
-  (target: Object, propertyKey?: string|symbol, parameterIndex?: number): void;
+  (target: Object, propertyKey?: string | symbol, parameterIndex?: number): void;
   // Standard (non-experimental) Decorator signature that avoids direct usage of
   // any TS 5.0+ specific types.
   (target: unknown, context: unknown): void;
@@ -47,15 +45,19 @@ export const PROP_METADATA = '__prop__metadata__';
  * @suppress {globalThis}
  */
 export function makeDecorator<T>(
-    name: string, props?: (...args: any[]) => any, parentClass?: any,
-    additionalProcessing?: (type: Type<T>) => void,
-    typeFn?: (type: Type<T>, ...args: any[]) => void):
-    {new (...args: any[]): any; (...args: any[]): any; (...args: any[]): (cls: any) => any;} {
+  name: string,
+  props?: (...args: any[]) => any,
+  parentClass?: any,
+  additionalProcessing?: (type: Type<T>) => void,
+  typeFn?: (type: Type<T>, ...args: any[]) => void,
+): {new (...args: any[]): any; (...args: any[]): any; (...args: any[]): (cls: any) => any} {
   return noSideEffects(() => {
     const metaCtor = makeMetadataCtor(props);
 
     function DecoratorFactory(
-        this: unknown|typeof DecoratorFactory, ...args: any[]): (cls: Type<T>) => any {
+      this: unknown | typeof DecoratorFactory,
+      ...args: any[]
+    ): (cls: Type<T>) => any {
       if (this instanceof DecoratorFactory) {
         metaCtor.call(this, ...args);
         return this as typeof DecoratorFactory;
@@ -66,12 +68,11 @@ export function makeDecorator<T>(
         if (typeFn) typeFn(cls, ...args);
         // Use of Object.defineProperty is important since it creates non-enumerable property which
         // prevents the property is copied during subclassing.
-        const annotations = cls.hasOwnProperty(ANNOTATIONS) ?
-            (cls as any)[ANNOTATIONS] :
-            (Object.defineProperty(cls, ANNOTATIONS, {value: []}) as any)[ANNOTATIONS];
+        const annotations = cls.hasOwnProperty(ANNOTATIONS)
+          ? (cls as any)[ANNOTATIONS]
+          : (Object.defineProperty(cls, ANNOTATIONS, {value: []}) as any)[ANNOTATIONS];
         annotations.push(annotationInstance);
 
-
         if (additionalProcessing) additionalProcessing(cls);
 
         return cls;
@@ -100,11 +101,16 @@ function makeMetadataCtor(props?: (...args: any[]) => any): any {
 }
 
 export function makeParamDecorator(
-    name: string, props?: (...args: any[]) => any, parentClass?: any): any {
+  name: string,
+  props?: (...args: any[]) => any,
+  parentClass?: any,
+): any {
   return noSideEffects(() => {
     const metaCtor = makeMetadataCtor(props);
     function ParamDecoratorFactory(
-        this: unknown|typeof ParamDecoratorFactory, ...args: any[]): any {
+      this: unknown | typeof ParamDecoratorFactory,
+      ...args: any[]
+    ): any {
       if (this instanceof ParamDecoratorFactory) {
         metaCtor.apply(this, args);
         return this;
@@ -117,9 +123,9 @@ export function makeParamDecorator(
       function ParamDecorator(cls: any, unusedKey: any, index: number): any {
         // Use of Object.defineProperty is important since it creates non-enumerable property which
         // prevents the property is copied during subclassing.
-        const parameters = cls.hasOwnProperty(PARAMETERS) ?
-            (cls as any)[PARAMETERS] :
-            Object.defineProperty(cls, PARAMETERS, {value: []})[PARAMETERS];
+        const parameters = cls.hasOwnProperty(PARAMETERS)
+          ? (cls as any)[PARAMETERS]
+          : Object.defineProperty(cls, PARAMETERS, {value: []})[PARAMETERS];
 
         // there might be gaps if some in between parameters do not have annotations.
         // we pad with nulls.
@@ -141,12 +147,18 @@ export function makeParamDecorator(
 }
 
 export function makePropDecorator(
-    name: string, props?: (...args: any[]) => any, parentClass?: any,
-    additionalProcessing?: (target: any, name: string, ...args: any[]) => void): any {
+  name: string,
+  props?: (...args: any[]) => any,
+  parentClass?: any,
+  additionalProcessing?: (target: any, name: string, ...args: any[]) => void,
+): any {
   return noSideEffects(() => {
     const metaCtor = makeMetadataCtor(props);
 
-    function PropDecoratorFactory(this: unknown|typeof PropDecoratorFactory, ...args: any[]): any {
+    function PropDecoratorFactory(
+      this: unknown | typeof PropDecoratorFactory,
+      ...args: any[]
+    ): any {
       if (this instanceof PropDecoratorFactory) {
         metaCtor.apply(this, args);
         return this;
@@ -164,10 +176,10 @@ export function makePropDecorator(
         const constructor = target.constructor;
         // Use of Object.defineProperty is important because it creates a non-enumerable property
         // which prevents the property from being copied during subclassing.
-        const meta = constructor.hasOwnProperty(PROP_METADATA) ?
-            (constructor as any)[PROP_METADATA] :
-            Object.defineProperty(constructor, PROP_METADATA, {value: {}})[PROP_METADATA];
-        meta[name] = meta.hasOwnProperty(name) && meta[name] || [];
+        const meta = constructor.hasOwnProperty(PROP_METADATA)
+          ? (constructor as any)[PROP_METADATA]
+          : Object.defineProperty(constructor, PROP_METADATA, {value: {}})[PROP_METADATA];
+        meta[name] = (meta.hasOwnProperty(name) && meta[name]) || [];
         meta[name].unshift(decoratorInstance);
 
         if (additionalProcessing) additionalProcessing(target, name, ...args);
diff --git a/packages/core/src/util/dom.ts b/packages/core/src/util/dom.ts
index 673eb57ea42f6..acb508331061a 100644
--- a/packages/core/src/util/dom.ts
+++ b/packages/core/src/util/dom.ts
@@ -46,6 +46,7 @@ const COMMENT_DELIMITER_ESCAPED = '\u200B$1\u200B';
  *     sequence.
  */
 export function escapeCommentText(value: string): string {
-  return value.replace(
-      COMMENT_DISALLOWED, (text) => text.replace(COMMENT_DELIMITER, COMMENT_DELIMITER_ESCAPED));
+  return value.replace(COMMENT_DISALLOWED, (text) =>
+    text.replace(COMMENT_DELIMITER, COMMENT_DELIMITER_ESCAPED),
+  );
 }
diff --git a/packages/core/src/util/errors.ts b/packages/core/src/util/errors.ts
index 7a15fee4c9fcd..2aaeba04ab4a4 100644
--- a/packages/core/src/util/errors.ts
+++ b/packages/core/src/util/errors.ts
@@ -10,7 +10,8 @@ export const ERROR_ORIGINAL_ERROR = 'ngOriginalError';
 
 export function wrappedError(message: string, originalError: any): Error {
   const msg = `${message} caused by: ${
-      originalError instanceof Error ? originalError.message : originalError}`;
+    originalError instanceof Error ? originalError.message : originalError
+  }`;
   const error = Error(msg);
   (error as any)[ERROR_ORIGINAL_ERROR] = originalError;
   return error;
diff --git a/packages/core/src/util/iterable.ts b/packages/core/src/util/iterable.ts
index 6c4b8b667ff54..71876e8b02e26 100644
--- a/packages/core/src/util/iterable.ts
+++ b/packages/core/src/util/iterable.ts
@@ -12,13 +12,18 @@ export function isIterable(obj: any): obj is Iterable<any> {
 
 export function isListLikeIterable(obj: any): boolean {
   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
+  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
 }
 
 export function areIterablesEqual<T>(
-    a: Iterable<T>, b: Iterable<T>, comparator: (a: T, b: T) => boolean): boolean {
+  a: Iterable<T>,
+  b: Iterable<T>,
+  comparator: (a: T, b: T) => boolean,
+): boolean {
   const iterator1 = a[Symbol.iterator]();
   const iterator2 = b[Symbol.iterator]();
 
@@ -39,7 +44,7 @@ export function iterateListLike<T>(obj: Iterable<T>, fn: (p: T) => void) {
   } else {
     const iterator = obj[Symbol.iterator]();
     let item: IteratorResult<T, any>;
-    while (!((item = iterator.next()).done)) {
+    while (!(item = iterator.next()).done) {
       fn(item.value);
     }
   }
diff --git a/packages/core/src/util/lang.ts b/packages/core/src/util/lang.ts
index f7a7dd9f64b38..84944c21417b6 100644
--- a/packages/core/src/util/lang.ts
+++ b/packages/core/src/util/lang.ts
@@ -20,6 +20,6 @@ export function isPromise<T = any>(obj: any): obj is Promise<T> {
 /**
  * Determine if the argument is a Subscribable
  */
-export function isSubscribable<T>(obj: any|Subscribable<T>): obj is Subscribable<T> {
+export function isSubscribable<T>(obj: any | Subscribable<T>): obj is Subscribable<T> {
   return !!obj && typeof obj.subscribe === 'function';
 }
diff --git a/packages/core/src/util/ng_dev_mode.ts b/packages/core/src/util/ng_dev_mode.ts
index 933c85dbcb5a0..5c3dadbef2e86 100644
--- a/packages/core/src/util/ng_dev_mode.ts
+++ b/packages/core/src/util/ng_dev_mode.ts
@@ -23,7 +23,7 @@ declare global {
    * - The URL contains a `ngDevMode=false` text.
    * Finally, ngDevMode may not have been defined at all.
    */
-  const ngDevMode: null|NgDevModePerfCounters;
+  const ngDevMode: null | NgDevModePerfCounters;
 
   interface NgDevModePerfCounters {
     namedConstructors: boolean;
diff --git a/packages/core/src/util/ng_i18n_closure_mode.ts b/packages/core/src/util/ng_i18n_closure_mode.ts
index fe20c18375655..c30484709548e 100644
--- a/packages/core/src/util/ng_i18n_closure_mode.ts
+++ b/packages/core/src/util/ng_i18n_closure_mode.ts
@@ -20,11 +20,11 @@ if (typeof ngI18nClosureMode === 'undefined') {
   // when optimizing code and the whole if statement will be dropped.
   // Make sure to refer to ngI18nClosureMode as ['ngI18nClosureMode'] for closure.
   // NOTE: we need to have it in IIFE so that the tree-shaker is happy.
-  (function() {
+  (function () {
     // tslint:disable-next-line:no-toplevel-property-access
     global['ngI18nClosureMode'] =
-        // TODO(FW-1250): validate that this actually, you know, works.
-        // tslint:disable-next-line:no-toplevel-property-access
-        typeof goog !== 'undefined' && typeof goog.getMsg === 'function';
+      // TODO(FW-1250): validate that this actually, you know, works.
+      // tslint:disable-next-line:no-toplevel-property-access
+      typeof goog !== 'undefined' && typeof goog.getMsg === 'function';
   })();
 }
diff --git a/packages/core/src/util/property.ts b/packages/core/src/util/property.ts
index 2adb4b9d43730..91d06dc6137b9 100644
--- a/packages/core/src/util/property.ts
+++ b/packages/core/src/util/property.ts
@@ -8,7 +8,7 @@
 
 export function getClosureSafeProperty<T>(objWithPropertyToExtract: T): string {
   for (let key in objWithPropertyToExtract) {
-    if (objWithPropertyToExtract[key] === getClosureSafeProperty as any) {
+    if (objWithPropertyToExtract[key] === (getClosureSafeProperty as any)) {
       return key;
     }
   }
diff --git a/packages/core/src/util/security/trusted_type_defs.ts b/packages/core/src/util/security/trusted_type_defs.ts
index ba3f45f4434fa..22a9274bbca58 100644
--- a/packages/core/src/util/security/trusted_type_defs.ts
+++ b/packages/core/src/util/security/trusted_type_defs.ts
@@ -25,23 +25,26 @@
  * but restricted to the API surface used within Angular.
  */
 
-export type TrustedHTML = string&{
+export type TrustedHTML = string & {
   __brand__: 'TrustedHTML';
 };
-export type TrustedScript = string&{
+export type TrustedScript = string & {
   __brand__: 'TrustedScript';
 };
-export type TrustedScriptURL = string&{
+export type TrustedScriptURL = string & {
   __brand__: 'TrustedScriptURL';
 };
 
 export interface TrustedTypePolicyFactory {
-  createPolicy(policyName: string, policyOptions: {
-    createHTML?: (input: string) => string,
-    createScript?: (input: string) => string,
-    createScriptURL?: (input: string) => string,
-  }): TrustedTypePolicy;
-  getAttributeType(tagName: string, attribute: string): string|null;
+  createPolicy(
+    policyName: string,
+    policyOptions: {
+      createHTML?: (input: string) => string;
+      createScript?: (input: string) => string;
+      createScriptURL?: (input: string) => string;
+    },
+  ): TrustedTypePolicy;
+  getAttributeType(tagName: string, attribute: string): string | null;
 }
 
 export interface TrustedTypePolicy {
diff --git a/packages/core/src/util/security/trusted_types.ts b/packages/core/src/util/security/trusted_types.ts
index 8295f1e738cfc..67f90d4192aec 100644
--- a/packages/core/src/util/security/trusted_types.ts
+++ b/packages/core/src/util/security/trusted_types.ts
@@ -18,19 +18,25 @@
 
 import {global} from '../global';
 
-import {TrustedHTML, TrustedScript, TrustedScriptURL, TrustedTypePolicy, TrustedTypePolicyFactory} from './trusted_type_defs';
+import {
+  TrustedHTML,
+  TrustedScript,
+  TrustedScriptURL,
+  TrustedTypePolicy,
+  TrustedTypePolicyFactory,
+} from './trusted_type_defs';
 
 /**
  * The Trusted Types policy, or null if Trusted Types are not
  * enabled/supported, or undefined if the policy has not been created yet.
  */
-let policy: TrustedTypePolicy|null|undefined;
+let policy: TrustedTypePolicy | null | undefined;
 
 /**
  * Returns the Trusted Types policy, or null if Trusted Types are not
  * enabled/supported. The first call to this function will create the policy.
  */
-function getPolicy(): TrustedTypePolicy|null {
+function getPolicy(): TrustedTypePolicy | null {
   if (policy === undefined) {
     policy = null;
     if (global.trustedTypes) {
@@ -60,7 +66,7 @@ function getPolicy(): TrustedTypePolicy|null {
  * that will be interpreted as HTML by a browser, e.g. when assigning to
  * element.innerHTML.
  */
-export function trustedHTMLFromString(html: string): TrustedHTML|string {
+export function trustedHTMLFromString(html: string): TrustedHTML | string {
   return getPolicy()?.createHTML(html) || html;
 }
 
@@ -71,7 +77,7 @@ export function trustedHTMLFromString(html: string): TrustedHTML|string {
  * never cause an XSS vulnerability if used in a context that will be
  * interpreted and executed as a script by a browser, e.g. when calling eval.
  */
-export function trustedScriptFromString(script: string): TrustedScript|string {
+export function trustedScriptFromString(script: string): TrustedScript | string {
   return getPolicy()?.createScript(script) || script;
 }
 
@@ -84,7 +90,7 @@ export function trustedScriptFromString(script: string): TrustedScript|string {
  * that will cause a browser to load and execute a resource, e.g. when
  * assigning to script.src.
  */
-export function trustedScriptURLFromString(url: string): TrustedScriptURL|string {
+export function trustedScriptURLFromString(url: string): TrustedScriptURL | string {
   return getPolicy()?.createScriptURL(url) || url;
 }
 
diff --git a/packages/core/src/util/security/trusted_types_bypass.ts b/packages/core/src/util/security/trusted_types_bypass.ts
index 3280785d08413..133ff9f6f7f3b 100644
--- a/packages/core/src/util/security/trusted_types_bypass.ts
+++ b/packages/core/src/util/security/trusted_types_bypass.ts
@@ -18,29 +18,37 @@
  */
 
 import {global} from '../global';
-import {TrustedHTML, TrustedScript, TrustedScriptURL, TrustedTypePolicy, TrustedTypePolicyFactory} from './trusted_type_defs';
+import {
+  TrustedHTML,
+  TrustedScript,
+  TrustedScriptURL,
+  TrustedTypePolicy,
+  TrustedTypePolicyFactory,
+} from './trusted_type_defs';
 
 /**
  * The Trusted Types policy, or null if Trusted Types are not
  * enabled/supported, or undefined if the policy has not been created yet.
  */
-let policy: TrustedTypePolicy|null|undefined;
+let policy: TrustedTypePolicy | null | undefined;
 
 /**
  * Returns the Trusted Types policy, or null if Trusted Types are not
  * enabled/supported. The first call to this function will create the policy.
  */
-function getPolicy(): TrustedTypePolicy|null {
+function getPolicy(): TrustedTypePolicy | null {
   if (policy === undefined) {
     policy = null;
     if (global.trustedTypes) {
       try {
-        policy = (global.trustedTypes as TrustedTypePolicyFactory)
-                     .createPolicy('angular#unsafe-bypass', {
-                       createHTML: (s: string) => s,
-                       createScript: (s: string) => s,
-                       createScriptURL: (s: string) => s,
-                     });
+        policy = (global.trustedTypes as TrustedTypePolicyFactory).createPolicy(
+          'angular#unsafe-bypass',
+          {
+            createHTML: (s: string) => s,
+            createScript: (s: string) => s,
+            createScriptURL: (s: string) => s,
+          },
+        );
       } catch {
         // trustedTypes.createPolicy throws if called with a name that is
         // already registered, even in report-only mode. Until the API changes,
@@ -60,7 +68,7 @@ function getPolicy(): TrustedTypePolicy|null {
  * is only passed strings that come directly from custom sanitizers or the
  * bypassSecurityTrust* functions.
  */
-export function trustedHTMLFromStringBypass(html: string): TrustedHTML|string {
+export function trustedHTMLFromStringBypass(html: string): TrustedHTML | string {
   return getPolicy()?.createHTML(html) || html;
 }
 
@@ -72,7 +80,7 @@ export function trustedHTMLFromStringBypass(html: string): TrustedHTML|string {
  * is only passed strings that come directly from custom sanitizers or the
  * bypassSecurityTrust* functions.
  */
-export function trustedScriptFromStringBypass(script: string): TrustedScript|string {
+export function trustedScriptFromStringBypass(script: string): TrustedScript | string {
   return getPolicy()?.createScript(script) || script;
 }
 
@@ -84,6 +92,6 @@ export function trustedScriptFromStringBypass(script: string): TrustedScript|str
  * is only passed strings that come directly from custom sanitizers or the
  * bypassSecurityTrust* functions.
  */
-export function trustedScriptURLFromStringBypass(url: string): TrustedScriptURL|string {
+export function trustedScriptURLFromStringBypass(url: string): TrustedScriptURL | string {
   return getPolicy()?.createScriptURL(url) || url;
 }
diff --git a/packages/core/src/util/stringify.ts b/packages/core/src/util/stringify.ts
index fa604facb94aa..5efdb0b5f1ae0 100644
--- a/packages/core/src/util/stringify.ts
+++ b/packages/core/src/util/stringify.ts
@@ -45,10 +45,14 @@ export function stringify(token: any): string {
  * @param after after string.
  * @returns concatenated string.
  */
-export function concatStringsWithSpace(before: string|null, after: string|null): string {
-  return (before == null || before === '') ?
-      (after === null ? '' : after) :
-      ((after == null || after === '') ? before : before + ' ' + after);
+export function concatStringsWithSpace(before: string | null, after: string | null): string {
+  return before == null || before === ''
+    ? after === null
+      ? ''
+      : after
+    : after == null || after === ''
+      ? before
+      : before + ' ' + after;
 }
 
 /**
diff --git a/packages/core/src/zone/async-stack-tagging.ts b/packages/core/src/zone/async-stack-tagging.ts
index 9846c1038e638..5bd7fae029d54 100644
--- a/packages/core/src/zone/async-stack-tagging.ts
+++ b/packages/core/src/zone/async-stack-tagging.ts
@@ -22,7 +22,9 @@ export class AsyncStackTaggingZoneSpec implements ZoneSpec {
   createTask: ConsoleWithAsyncTagging['createTask'];
 
   constructor(
-      namePrefix: string, consoleAsyncStackTaggingImpl: ConsoleWithAsyncTagging = console as any) {
+    namePrefix: string,
+    consoleAsyncStackTaggingImpl: ConsoleWithAsyncTagging = console as any,
+  ) {
     this.name = 'asyncStackTagging for ' + namePrefix;
     this.createTask = consoleAsyncStackTaggingImpl?.createTask ?? (() => null);
   }
@@ -30,15 +32,24 @@ export class AsyncStackTaggingZoneSpec implements ZoneSpec {
   // ZoneSpec implementation below.
   name: string;
 
-  onScheduleTask(delegate: ZoneDelegate, _current: Zone, target: Zone, task: ZoneConsoleTask):
-      Task {
+  onScheduleTask(
+    delegate: ZoneDelegate,
+    _current: Zone,
+    target: Zone,
+    task: ZoneConsoleTask,
+  ): Task {
     task.consoleTask = this.createTask(`Zone - ${task.source || task.type}`);
     return delegate.scheduleTask(target, task);
   }
 
   onInvokeTask(
-      delegate: ZoneDelegate, _currentZone: Zone, targetZone: Zone, task: ZoneConsoleTask,
-      applyThis: any, applyArgs?: any[]) {
+    delegate: ZoneDelegate,
+    _currentZone: Zone,
+    targetZone: Zone,
+    task: ZoneConsoleTask,
+    applyThis: any,
+    applyArgs?: any[],
+  ) {
     let ret;
     if (task.consoleTask) {
       ret = task.consoleTask.run(() => delegate.invokeTask(targetZone, task, applyThis, applyArgs));
diff --git a/packages/core/src/zone/ng_zone.ts b/packages/core/src/zone/ng_zone.ts
index aa10e0c425de0..a3bcb68517292 100644
--- a/packages/core/src/zone/ng_zone.ts
+++ b/packages/core/src/zone/ng_zone.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {RuntimeError, RuntimeErrorCode} from '../errors';
 import {EventEmitter} from '../event_emitter';
 import {scheduleCallbackWithRafRace} from '../util/callback_scheduler';
@@ -129,12 +128,13 @@ export class NgZone {
   constructor({
     enableLongStackTrace = false,
     shouldCoalesceEventChangeDetection = false,
-    shouldCoalesceRunChangeDetection = false
+    shouldCoalesceRunChangeDetection = false,
   }) {
     if (typeof Zone == 'undefined') {
       throw new RuntimeError(
-          RuntimeErrorCode.MISSING_ZONEJS,
-          ngDevMode && `In this configuration Angular requires Zone.js`);
+        RuntimeErrorCode.MISSING_ZONEJS,
+        ngDevMode && `In this configuration Angular requires Zone.js`,
+      );
     }
 
     Zone.assertZonePatched();
@@ -153,7 +153,7 @@ export class NgZone {
     }
 
     if ((Zone as any)['TaskTrackingZoneSpec']) {
-      self._inner = self._inner.fork(new ((Zone as any)['TaskTrackingZoneSpec'] as any));
+      self._inner = self._inner.fork(new ((Zone as any)['TaskTrackingZoneSpec'] as any)());
     }
 
     if (enableLongStackTrace && (Zone as any)['longStackTraceZoneSpec']) {
@@ -162,7 +162,7 @@ export class NgZone {
     // 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;
+      !shouldCoalesceRunChangeDetection && shouldCoalesceEventChangeDetection;
     self.shouldCoalesceRunChangeDetection = shouldCoalesceRunChangeDetection;
     self.callbackScheduled = false;
     self.scheduleCallback = scheduleCallbackWithRafRace;
@@ -183,8 +183,9 @@ export class NgZone {
   static assertInAngularZone(): void {
     if (!NgZone.isInAngularZone()) {
       throw new RuntimeError(
-          RuntimeErrorCode.UNEXPECTED_ZONE_STATE,
-          ngDevMode && 'Expected to be in Angular Zone, but it is not!');
+        RuntimeErrorCode.UNEXPECTED_ZONE_STATE,
+        ngDevMode && 'Expected to be in Angular Zone, but it is not!',
+      );
     }
   }
 
@@ -194,8 +195,9 @@ export class NgZone {
   static assertNotInAngularZone(): void {
     if (NgZone.isInAngularZone()) {
       throw new RuntimeError(
-          RuntimeErrorCode.UNEXPECTED_ZONE_STATE,
-          ngDevMode && 'Expected to not be in Angular Zone, but it is!');
+        RuntimeErrorCode.UNEXPECTED_ZONE_STATE,
+        ngDevMode && 'Expected to not be in Angular Zone, but it is!',
+      );
     }
   }
 
@@ -394,13 +396,19 @@ function delayChangeDetectionForEvents(zone: NgZonePrivate) {
     //  will prevent the microtasks queue from getting drained in between the coalescing
     // eventTask execution.
     if (!zone.fakeTopEventTask) {
-      zone.fakeTopEventTask = Zone.root.scheduleEventTask('fakeTopEventTask', () => {
-        zone.callbackScheduled = false;
-        updateMicroTaskStatus(zone);
-        zone.isCheckStableRunning = true;
-        checkStable(zone);
-        zone.isCheckStableRunning = false;
-      }, undefined, () => {}, () => {});
+      zone.fakeTopEventTask = Zone.root.scheduleEventTask(
+        'fakeTopEventTask',
+        () => {
+          zone.callbackScheduled = false;
+          updateMicroTaskStatus(zone);
+          zone.isCheckStableRunning = true;
+          checkStable(zone);
+          zone.isCheckStableRunning = false;
+        },
+        undefined,
+        () => {},
+        () => {},
+      );
     }
     zone.fakeTopEventTask.invoke();
   });
@@ -414,78 +422,100 @@ function forkInnerZoneWithAngularBehavior(zone: NgZonePrivate) {
   zone._inner = zone._inner.fork({
     name: 'angular',
     properties: <any>{'isAngularZone': true},
-    onInvokeTask:
-        (delegate: ZoneDelegate, current: Zone, target: Zone, task: Task, applyThis: any,
-         applyArgs: any): any => {
-          // Prevent triggering change detection when the flag is detected.
-          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);
-          }
-        },
+    onInvokeTask: (
+      delegate: ZoneDelegate,
+      current: Zone,
+      target: Zone,
+      task: Task,
+      applyThis: any,
+      applyArgs: any,
+    ): any => {
+      // Prevent triggering change detection when the flag is detected.
+      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: ZoneDelegate, current: Zone, target: Zone, callback: Function, applyThis: any,
-        applyArgs?: any[], source?: string): any => {
+      delegate: ZoneDelegate,
+      current: Zone,
+      target: Zone,
+      callback: Function,
+      applyThis: any,
+      applyArgs?: any[],
+      source?: string,
+    ): any => {
       try {
         onEnter(zone);
         return delegate.invoke(target, callback, applyThis, applyArgs, source);
       } finally {
-        if (zone.shouldCoalesceRunChangeDetection &&
-            // Do not delay change detection when the task is the scheduler's tick.
-            // We need to synchronously trigger the stability logic so that the
-            // zone-based scheduler can prevent a duplicate ApplicationRef.tick
-            // by first checking if the scheduler tick is running. This does seem a bit roundabout,
-            // but we _do_ still want to trigger all the correct events when we exit the zone.run
-            // (`onMicrotaskEmpty` and `onStable` _should_ emit; developers can have code which
-            // relies on these events happening after change detection runs).
-            // Note: `zone.callbackScheduled` is already in delayChangeDetectionForEventsDelegate
-            // but is added here as well to prevent reads of applyArgs when not necessary
-            !zone.callbackScheduled && !isSchedulerTick(applyArgs)) {
+        if (
+          zone.shouldCoalesceRunChangeDetection &&
+          // Do not delay change detection when the task is the scheduler's tick.
+          // We need to synchronously trigger the stability logic so that the
+          // zone-based scheduler can prevent a duplicate ApplicationRef.tick
+          // by first checking if the scheduler tick is running. This does seem a bit roundabout,
+          // but we _do_ still want to trigger all the correct events when we exit the zone.run
+          // (`onMicrotaskEmpty` and `onStable` _should_ emit; developers can have code which
+          // relies on these events happening after change detection runs).
+          // Note: `zone.callbackScheduled` is already in delayChangeDetectionForEventsDelegate
+          // but is added here as well to prevent reads of applyArgs when not necessary
+          !zone.callbackScheduled &&
+          !isSchedulerTick(applyArgs)
+        ) {
           delayChangeDetectionForEventsDelegate();
         }
         onLeave(zone);
       }
     },
 
-    onHasTask:
-        (delegate: ZoneDelegate, current: Zone, target: Zone, hasTaskState: 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;
-            }
-          }
-        },
+    onHasTask: (
+      delegate: ZoneDelegate,
+      current: Zone,
+      target: Zone,
+      hasTaskState: 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: ZoneDelegate, current: Zone, target: Zone, error: any): boolean => {
       delegate.handleError(target, error);
       zone.runOutsideAngular(() => zone.onError.emit(error));
       return false;
-    }
+    },
   });
 }
 
 function updateMicroTaskStatus(zone: NgZonePrivate) {
-  if (zone._hasPendingMicrotasks ||
-      ((zone.shouldCoalesceEventChangeDetection || zone.shouldCoalesceRunChangeDetection) &&
-       zone.callbackScheduled === true)) {
+  if (
+    zone._hasPendingMicrotasks ||
+    ((zone.shouldCoalesceEventChangeDetection || zone.shouldCoalesceRunChangeDetection) &&
+      zone.callbackScheduled === true)
+  ) {
     zone.hasPendingMicrotasks = true;
   } else {
     zone.hasPendingMicrotasks = false;
@@ -535,7 +565,6 @@ export class NoopNgZone implements NgZone {
   }
 }
 
-
 function shouldBeIgnoredByZone(applyArgs: unknown): boolean {
   return hasApplyArgsData(applyArgs, '__ignore_ng_zone__');
 }
@@ -558,7 +587,6 @@ function hasApplyArgsData(applyArgs: unknown, key: string) {
   return applyArgs[0]?.data?.[key] === true;
 }
 
-
 // Set of options recognized by the NgZone.
 export interface InternalNgZoneOptions {
   enableLongStackTrace: boolean;
@@ -566,9 +594,10 @@ export interface InternalNgZoneOptions {
   shouldCoalesceRunChangeDetection: boolean;
 }
 
-
 export function getNgZone(
-    ngZoneToUse: NgZone|'zone.js'|'noop' = 'zone.js', options: InternalNgZoneOptions): NgZone {
+  ngZoneToUse: NgZone | 'zone.js' | 'noop' = 'zone.js',
+  options: InternalNgZoneOptions,
+): NgZone {
   if (ngZoneToUse === 'noop') {
     return new NoopNgZone();
   }
diff --git a/packages/core/test/acceptance/after_render_hook_spec.ts b/packages/core/test/acceptance/after_render_hook_spec.ts
index 1d478c64f6093..68dcc5037851e 100644
--- a/packages/core/test/acceptance/after_render_hook_spec.ts
+++ b/packages/core/test/acceptance/after_render_hook_spec.ts
@@ -7,7 +7,29 @@
  */
 
 import {PLATFORM_BROWSER_ID, PLATFORM_SERVER_ID} from '@angular/common/src/platform_id';
-import {afterNextRender, afterRender, AfterRenderPhase, AfterRenderRef, ApplicationRef, ChangeDetectorRef, Component, computed, createComponent, effect, ErrorHandler, inject, Injector, NgZone, PLATFORM_ID, signal, Type, untracked, ViewContainerRef, ɵinternalAfterNextRender as internalAfterNextRender, ɵqueueStateUpdate as queueStateUpdate} from '@angular/core';
+import {
+  afterNextRender,
+  afterRender,
+  AfterRenderPhase,
+  AfterRenderRef,
+  ApplicationRef,
+  ChangeDetectorRef,
+  Component,
+  computed,
+  createComponent,
+  effect,
+  ErrorHandler,
+  inject,
+  Injector,
+  NgZone,
+  PLATFORM_ID,
+  signal,
+  Type,
+  untracked,
+  ViewContainerRef,
+  ɵinternalAfterNextRender as internalAfterNextRender,
+  ɵqueueStateUpdate as queueStateUpdate,
+} from '@angular/core';
 import {NoopNgZone} from '@angular/core/src/zone/ng_zone';
 import {TestBed} from '@angular/core/testing';
 import {bootstrapApplication} from '@angular/platform-browser';
@@ -17,8 +39,9 @@ import {destroyPlatform} from '../../src/core';
 import {EnvironmentInjector} from '../../src/di';
 
 function createAndAttachComponent<T>(component: Type<T>) {
-  const componentRef =
-      createComponent(component, {environmentInjector: TestBed.inject(EnvironmentInjector)});
+  const componentRef = createComponent(component, {
+    environmentInjector: TestBed.inject(EnvironmentInjector),
+  });
   TestBed.inject(ApplicationRef).attachView(componentRef.hostView);
   return componentRef;
 }
@@ -26,7 +49,7 @@ function createAndAttachComponent<T>(component: Type<T>) {
 describe('after render hooks', () => {
   describe('browser', () => {
     const COMMON_CONFIGURATION = {
-      providers: [{provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID}]
+      providers: [{provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID}],
     };
 
     describe('internalAfterNextRender', () => {
@@ -50,17 +73,27 @@ describe('after render hooks', () => {
               log.push('internalAfterNextRender #1');
             });
 
-            forEachPhase(phase => afterRender(() => {
-                           log.push(`afterRender (${AfterRenderPhase[phase]})`);
-                         }, {phase}));
+            forEachPhase((phase) =>
+              afterRender(
+                () => {
+                  log.push(`afterRender (${AfterRenderPhase[phase]})`);
+                },
+                {phase},
+              ),
+            );
 
             internalAfterNextRender(() => {
               log.push('internalAfterNextRender #2');
             });
 
-            forEachPhase(phase => afterNextRender(() => {
-                           log.push(`afterNextRender (${AfterRenderPhase[phase]})`);
-                         }, {phase}));
+            forEachPhase((phase) =>
+              afterNextRender(
+                () => {
+                  log.push(`afterNextRender (${AfterRenderPhase[phase]})`);
+                },
+                {phase},
+              ),
+            );
 
             internalAfterNextRender(() => {
               log.push('internalAfterNextRender #3');
@@ -105,8 +138,8 @@ describe('after render hooks', () => {
       });
 
       it('should refresh views if state changed before user-defined render hooks', () => {
-        let stateInAfterNextRender: number|null = null;
-        let stateInAfterRender: number|null = null;
+        let stateInAfterNextRender: number | null = null;
+        let stateInAfterRender: number | null = null;
         let afterRenderRuns = 0;
         TestBed.configureTestingModule({
           ...COMMON_CONFIGURATION,
@@ -138,33 +171,37 @@ describe('after render hooks', () => {
         expect(stateInAfterRender!).toEqual(2);
       });
 
-      it('does not execute queueStateUpdate if application is destroyed',
-         withBody('<app></app>', async () => {
-           destroyPlatform();
-           let executedCallback = false;
-           TestBed.configureTestingModule({
-             ...COMMON_CONFIGURATION,
-           });
-           @Component({
-             template: '',
-             selector: 'app',
-             standalone: true,
-           })
-           class App {
-           }
-
-           const app = await bootstrapApplication(App);
-           queueStateUpdate(() => {
-             executedCallback = true;
-           }, {injector: app.injector});
-           app.destroy();
-
-           // wait a macrotask - at this point the Promise in queueStateUpdate will have been
-           // resolved
-           await new Promise(resolve => setTimeout(resolve));
-           expect(executedCallback).toBeFalse();
-           destroyPlatform();
-         }));
+      it(
+        'does not execute queueStateUpdate if application is destroyed',
+        withBody('<app></app>', async () => {
+          destroyPlatform();
+          let executedCallback = false;
+          TestBed.configureTestingModule({
+            ...COMMON_CONFIGURATION,
+          });
+          @Component({
+            template: '',
+            selector: 'app',
+            standalone: true,
+          })
+          class App {}
+
+          const app = await bootstrapApplication(App);
+          queueStateUpdate(
+            () => {
+              executedCallback = true;
+            },
+            {injector: app.injector},
+          );
+          app.destroy();
+
+          // wait a macrotask - at this point the Promise in queueStateUpdate will have been
+          // resolved
+          await new Promise((resolve) => setTimeout(resolve));
+          expect(executedCallback).toBeFalse();
+          destroyPlatform();
+        }),
+      );
     });
 
     describe('afterRender', () => {
@@ -221,7 +258,6 @@ describe('after render hooks', () => {
         expect(dynamicCompRef.instance.afterRenderCount).toBe(1);
         expect(compInstance.afterRenderCount).toBe(1);
 
-
         // Running change detection after removing view.
         viewContainerRef.remove();
         TestBed.inject(ApplicationRef).tick();
@@ -280,7 +316,6 @@ describe('after render hooks', () => {
         expect(dynamicCompRef.instance.afterRenderCount).toBe(1);
         expect(compInstance.afterRenderCount).toBe(2);
 
-
         // Running change detection after removing view.
         viewContainerRef.remove();
         fixture.detectChanges();
@@ -331,7 +366,6 @@ describe('after render hooks', () => {
         expect(log).toEqual(['pre-cd', 'post-cd', 'parent-comp', 'child-comp']);
       });
 
-
       it('should run hooks once after tick even if there are multiple root views', () => {
         let log: string[] = [];
 
@@ -361,7 +395,7 @@ describe('after render hooks', () => {
       });
 
       it('should unsubscribe when calling destroy', () => {
-        let hookRef: AfterRenderRef|null = null;
+        let hookRef: AfterRenderRef | null = null;
         let afterRenderCount = 0;
 
         @Component({selector: 'comp'})
@@ -402,9 +436,12 @@ describe('after render hooks', () => {
           constructor() {
             afterRender(() => {
               outerHookCount++;
-              afterNextRender(() => {
-                innerHookCount++;
-              }, {injector: this.injector});
+              afterNextRender(
+                () => {
+                  innerHookCount++;
+                },
+                {injector: this.injector},
+              );
             });
           }
         }
@@ -469,7 +506,7 @@ describe('after render hooks', () => {
 
         @Component({
           selector: 'comp',
-          providers: [{provide: ErrorHandler, useFactory: () => new FakeErrorHandler()}]
+          providers: [{provide: ErrorHandler, useFactory: () => new FakeErrorHandler()}],
         })
         class Comp {
           constructor() {
@@ -506,48 +543,71 @@ describe('after render hooks', () => {
         const log: string[] = [];
 
         @Component({selector: 'root', template: `<comp-a></comp-a><comp-b></comp-b>`})
-        class Root {
-        }
+        class Root {}
 
         @Component({selector: 'comp-a'})
         class CompA {
           constructor() {
-            afterRender(() => {
-              log.push('early-read-1');
-            }, {phase: AfterRenderPhase.EarlyRead});
+            afterRender(
+              () => {
+                log.push('early-read-1');
+              },
+              {phase: AfterRenderPhase.EarlyRead},
+            );
 
-            afterRender(() => {
-              log.push('write-1');
-            }, {phase: AfterRenderPhase.Write});
+            afterRender(
+              () => {
+                log.push('write-1');
+              },
+              {phase: AfterRenderPhase.Write},
+            );
 
-            afterRender(() => {
-              log.push('mixed-read-write-1');
-            }, {phase: AfterRenderPhase.MixedReadWrite});
+            afterRender(
+              () => {
+                log.push('mixed-read-write-1');
+              },
+              {phase: AfterRenderPhase.MixedReadWrite},
+            );
 
-            afterRender(() => {
-              log.push('read-1');
-            }, {phase: AfterRenderPhase.Read});
+            afterRender(
+              () => {
+                log.push('read-1');
+              },
+              {phase: AfterRenderPhase.Read},
+            );
           }
         }
 
         @Component({selector: 'comp-b'})
         class CompB {
           constructor() {
-            afterRender(() => {
-              log.push('read-2');
-            }, {phase: AfterRenderPhase.Read});
+            afterRender(
+              () => {
+                log.push('read-2');
+              },
+              {phase: AfterRenderPhase.Read},
+            );
 
-            afterRender(() => {
-              log.push('mixed-read-write-2');
-            }, {phase: AfterRenderPhase.MixedReadWrite});
+            afterRender(
+              () => {
+                log.push('mixed-read-write-2');
+              },
+              {phase: AfterRenderPhase.MixedReadWrite},
+            );
 
-            afterRender(() => {
-              log.push('write-2');
-            }, {phase: AfterRenderPhase.Write});
+            afterRender(
+              () => {
+                log.push('write-2');
+              },
+              {phase: AfterRenderPhase.Write},
+            );
 
-            afterRender(() => {
-              log.push('early-read-2');
-            }, {phase: AfterRenderPhase.EarlyRead});
+            afterRender(
+              () => {
+                log.push('early-read-2');
+              },
+              {phase: AfterRenderPhase.EarlyRead},
+            );
           }
         }
 
@@ -560,8 +620,14 @@ describe('after render hooks', () => {
         expect(log).toEqual([]);
         TestBed.inject(ApplicationRef).tick();
         expect(log).toEqual([
-          'early-read-1', 'early-read-2', 'write-1', 'write-2', 'mixed-read-write-1',
-          'mixed-read-write-2', 'read-1', 'read-2'
+          'early-read-1',
+          'early-read-2',
+          'write-1',
+          'write-2',
+          'mixed-read-write-1',
+          'mixed-read-write-2',
+          'read-1',
+          'read-2',
         ]);
       });
 
@@ -575,8 +641,9 @@ describe('after render hooks', () => {
           }
 
           const fixture = TestBed.createComponent(TestCmp);
-          expect(() => fixture.detectChanges())
-              .toThrowError(/afterRender\(\) cannot be called from within a reactive context/);
+          expect(() => fixture.detectChanges()).toThrowError(
+            /afterRender\(\) cannot be called from within a reactive context/,
+          );
         });
 
         it('inside computed', () => {
@@ -584,8 +651,9 @@ describe('after render hooks', () => {
             afterRender(() => {});
           });
 
-          expect(() => testComputed())
-              .toThrowError(/afterRender\(\) cannot be called from within a reactive context/);
+          expect(() => testComputed()).toThrowError(
+            /afterRender\(\) cannot be called from within a reactive context/,
+          );
         });
 
         it('inside effect', () => {
@@ -605,18 +673,20 @@ describe('after render hooks', () => {
           TestBed.configureTestingModule({
             providers: [
               {
-                provide: ErrorHandler, useClass: class extends ErrorHandler{
+                provide: ErrorHandler,
+                useClass: class extends ErrorHandler {
                   override handleError(e: Error) {
                     throw e;
                   }
                 },
               },
-            ]
+            ],
           });
           const fixture = TestBed.createComponent(TestCmp);
 
-          expect(() => fixture.detectChanges())
-              .toThrowError(/afterRender\(\) cannot be called from within a reactive context/);
+          expect(() => fixture.detectChanges()).toThrowError(
+            /afterRender\(\) cannot be called from within a reactive context/,
+          );
         });
       });
     });
@@ -726,7 +796,7 @@ describe('after render hooks', () => {
       });
 
       it('should unsubscribe when calling destroy', () => {
-        let hookRef: AfterRenderRef|null = null;
+        let hookRef: AfterRenderRef | null = null;
         let afterRenderCount = 0;
 
         @Component({selector: 'comp'})
@@ -765,9 +835,12 @@ describe('after render hooks', () => {
           injector = inject(EnvironmentInjector);
 
           ngOnInit() {
-            afterNextRender(() => {
-              this.appRef.tick();
-            }, {injector: this.injector});
+            afterNextRender(
+              () => {
+                this.appRef.tick();
+              },
+              {injector: this.injector},
+            );
           }
         }
 
@@ -776,12 +849,13 @@ describe('after render hooks', () => {
           ...COMMON_CONFIGURATION,
           providers: [
             {provide: ErrorHandler, useClass: RethrowErrorHandler},
-            ...COMMON_CONFIGURATION.providers
-          ]
+            ...COMMON_CONFIGURATION.providers,
+          ],
         });
         createAndAttachComponent(Comp);
-        expect(() => TestBed.inject(ApplicationRef).tick())
-            .toThrowError(/ApplicationRef.tick is called recursively/);
+        expect(() => TestBed.inject(ApplicationRef).tick()).toThrowError(
+          /ApplicationRef.tick is called recursively/,
+        );
       });
 
       it('should defer nested hooks to the next cycle', () => {
@@ -796,9 +870,12 @@ describe('after render hooks', () => {
             afterNextRender(() => {
               outerHookCount++;
 
-              afterNextRender(() => {
-                innerHookCount++;
-              }, {injector: this.injector});
+              afterNextRender(
+                () => {
+                  innerHookCount++;
+                },
+                {injector: this.injector},
+              );
             });
           }
         }
@@ -863,7 +940,7 @@ describe('after render hooks', () => {
 
         @Component({
           selector: 'comp',
-          providers: [{provide: ErrorHandler, useFactory: () => new FakeErrorHandler()}]
+          providers: [{provide: ErrorHandler, useFactory: () => new FakeErrorHandler()}],
         })
         class Comp {
           constructor() {
@@ -900,48 +977,71 @@ describe('after render hooks', () => {
         const log: string[] = [];
 
         @Component({selector: 'root', template: `<comp-a></comp-a><comp-b></comp-b>`})
-        class Root {
-        }
+        class Root {}
 
         @Component({selector: 'comp-a'})
         class CompA {
           constructor() {
-            afterNextRender(() => {
-              log.push('early-read-1');
-            }, {phase: AfterRenderPhase.EarlyRead});
+            afterNextRender(
+              () => {
+                log.push('early-read-1');
+              },
+              {phase: AfterRenderPhase.EarlyRead},
+            );
 
-            afterNextRender(() => {
-              log.push('write-1');
-            }, {phase: AfterRenderPhase.Write});
+            afterNextRender(
+              () => {
+                log.push('write-1');
+              },
+              {phase: AfterRenderPhase.Write},
+            );
 
-            afterNextRender(() => {
-              log.push('mixed-read-write-1');
-            }, {phase: AfterRenderPhase.MixedReadWrite});
+            afterNextRender(
+              () => {
+                log.push('mixed-read-write-1');
+              },
+              {phase: AfterRenderPhase.MixedReadWrite},
+            );
 
-            afterNextRender(() => {
-              log.push('read-1');
-            }, {phase: AfterRenderPhase.Read});
+            afterNextRender(
+              () => {
+                log.push('read-1');
+              },
+              {phase: AfterRenderPhase.Read},
+            );
           }
         }
 
         @Component({selector: 'comp-b'})
         class CompB {
           constructor() {
-            afterNextRender(() => {
-              log.push('read-2');
-            }, {phase: AfterRenderPhase.Read});
+            afterNextRender(
+              () => {
+                log.push('read-2');
+              },
+              {phase: AfterRenderPhase.Read},
+            );
 
-            afterNextRender(() => {
-              log.push('mixed-read-write-2');
-            }, {phase: AfterRenderPhase.MixedReadWrite});
+            afterNextRender(
+              () => {
+                log.push('mixed-read-write-2');
+              },
+              {phase: AfterRenderPhase.MixedReadWrite},
+            );
 
-            afterNextRender(() => {
-              log.push('write-2');
-            }, {phase: AfterRenderPhase.Write});
+            afterNextRender(
+              () => {
+                log.push('write-2');
+              },
+              {phase: AfterRenderPhase.Write},
+            );
 
-            afterNextRender(() => {
-              log.push('early-read-2');
-            }, {phase: AfterRenderPhase.EarlyRead});
+            afterNextRender(
+              () => {
+                log.push('early-read-2');
+              },
+              {phase: AfterRenderPhase.EarlyRead},
+            );
           }
         }
 
@@ -954,8 +1054,14 @@ describe('after render hooks', () => {
         expect(log).toEqual([]);
         TestBed.inject(ApplicationRef).tick();
         expect(log).toEqual([
-          'early-read-1', 'early-read-2', 'write-1', 'write-2', 'mixed-read-write-1',
-          'mixed-read-write-2', 'read-1', 'read-2'
+          'early-read-1',
+          'early-read-2',
+          'write-1',
+          'write-2',
+          'mixed-read-write-1',
+          'mixed-read-write-2',
+          'read-1',
+          'read-2',
         ]);
       });
     });
@@ -972,13 +1078,17 @@ describe('after render hooks', () => {
         counter = counter;
         injector = inject(EnvironmentInjector);
         ngOnInit() {
-          afterNextRender(() => {
-            this.counter.set(1);
-          }, {injector: this.injector});
+          afterNextRender(
+            () => {
+              this.counter.set(1);
+            },
+            {injector: this.injector},
+          );
         }
       }
-      TestBed.configureTestingModule(
-          {providers: [{provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID}]});
+      TestBed.configureTestingModule({
+        providers: [{provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID}],
+      });
 
       const fixture = TestBed.createComponent(TestCmp);
       const appRef = TestBed.inject(ApplicationRef);
@@ -998,14 +1108,18 @@ describe('after render hooks', () => {
         injector = inject(EnvironmentInjector);
         cdr = inject(ChangeDetectorRef);
         ngOnInit() {
-          afterNextRender(() => {
-            this.counter = 1;
-            this.cdr.markForCheck();
-          }, {injector: this.injector});
+          afterNextRender(
+            () => {
+              this.counter = 1;
+              this.cdr.markForCheck();
+            },
+            {injector: this.injector},
+          );
         }
       }
-      TestBed.configureTestingModule(
-          {providers: [{provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID}]});
+      TestBed.configureTestingModule({
+        providers: [{provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID}],
+      });
 
       const fixture = TestBed.createComponent(TestCmp);
       const appRef = TestBed.inject(ApplicationRef);
@@ -1026,22 +1140,26 @@ describe('after render hooks', () => {
         counter = counter;
         injector = inject(EnvironmentInjector);
         ngOnInit() {
-          afterRender(() => {
-            this.counter.update(v => v + 1);
-          }, {injector: this.injector});
+          afterRender(
+            () => {
+              this.counter.update((v) => v + 1);
+            },
+            {injector: this.injector},
+          );
         }
       }
       TestBed.configureTestingModule({
         providers: [
           {provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID},
           {
-            provide: ErrorHandler, useClass: class extends ErrorHandler {
+            provide: ErrorHandler,
+            useClass: class extends ErrorHandler {
               override handleError(error: any) {
                 throw error;
               }
-            }
+            },
           },
-        ]
+        ],
       });
 
       const fixture = TestBed.createComponent(TestCmp);
@@ -1055,7 +1173,7 @@ describe('after render hooks', () => {
 
   describe('server', () => {
     const COMMON_CONFIGURATION = {
-      providers: [{provide: PLATFORM_ID, useValue: PLATFORM_SERVER_ID}]
+      providers: [{provide: PLATFORM_ID, useValue: PLATFORM_SERVER_ID}],
     };
 
     describe('afterRender', () => {
diff --git a/packages/core/test/acceptance/attributes_spec.ts b/packages/core/test/acceptance/attributes_spec.ts
index 963d3855d2e5a..6057cdb49367f 100644
--- a/packages/core/test/acceptance/attributes_spec.ts
+++ b/packages/core/test/acceptance/attributes_spec.ts
@@ -15,8 +15,7 @@ describe('attribute creation', () => {
     @Component({
       template: `<div id="test" title="Hello"></div>`,
     })
-    class Comp {
-    }
+    class Comp {}
 
     TestBed.configureTestingModule({declarations: [Comp]});
     const fixture = TestBed.createComponent(Comp);
@@ -30,14 +29,12 @@ describe('attribute creation', () => {
     @Component({
       template: `<div id="test" xlink:href="bar" title="Hello"></div>`,
     })
-    class Comp {
-    }
+    class Comp {}
 
     TestBed.configureTestingModule({declarations: [Comp]});
     const fixture = TestBed.createComponent(Comp);
     fixture.detectChanges();
 
-
     const div = fixture.debugElement.query(By.css('div')).nativeElement;
     const attrs = div.attributes;
 
@@ -137,7 +134,6 @@ describe('attribute binding', () => {
     expect(button.getAttribute('title')).toBe('hello');
   });
 
-
   it('should be able to bind attributes both to parent and child nodes', () => {
     @Component({
       template: `
@@ -176,7 +172,7 @@ describe('attribute binding', () => {
       template: `<a [attr.href]="badUrl"></a>`,
     })
     class Comp {
-      badUrl: string|SafeUrl = 'javascript:true';
+      badUrl: string | SafeUrl = 'javascript:true';
     }
 
     TestBed.configureTestingModule({declarations: [Comp]});
@@ -188,8 +184,9 @@ describe('attribute binding', () => {
     expect(a.href.indexOf('unsafe:')).toBe(0);
 
     const domSanitizer: DomSanitizer = TestBed.inject(DomSanitizer);
-    fixture.componentInstance.badUrl =
-        domSanitizer.bypassSecurityTrustUrl('javascript:alert("this is fine")');
+    fixture.componentInstance.badUrl = domSanitizer.bypassSecurityTrustUrl(
+      'javascript:alert("this is fine")',
+    );
     fixture.detectChanges();
 
     // should not start with `unsafe:`.
@@ -211,7 +208,7 @@ describe('attribute interpolation', () => {
         <div attr.title="a{{a}}b{{b}}c"></div>
         <div attr.title="a{{a}}b"></div>
         <div attr.title="{{a}}"></div>
-      `
+      `,
     })
     class App {
       a = 1;
@@ -233,7 +230,7 @@ describe('attribute interpolation', () => {
 
     const divs = fixture.debugElement.queryAll(By.css('div[title]'));
 
-    expect(divs.map(el => el.nativeElement.getAttribute('title'))).toEqual([
+    expect(divs.map((el) => el.nativeElement.getAttribute('title'))).toEqual([
       'a1b2c3d4e5f6g7h8i9j',
       'a1b2c3d4e5f6g7h8i',
       'a1b2c3d4e5f6g7h',
diff --git a/packages/core/test/acceptance/authoring/authoring_test_compiler.ts b/packages/core/test/acceptance/authoring/authoring_test_compiler.ts
index 45dd8510261c2..a365f4cbd1bc3 100644
--- a/packages/core/test/acceptance/authoring/authoring_test_compiler.ts
+++ b/packages/core/test/acceptance/authoring/authoring_test_compiler.ts
@@ -13,7 +13,7 @@ import fs from 'fs';
 import path from 'path';
 import ts from 'typescript';
 
-main().catch(e => {
+main().catch((e) => {
   console.error(e);
   process.exitCode = 1;
 });
@@ -33,12 +33,14 @@ async function main() {
 
   for (const inputFileExecpath of inputFileExecpaths) {
     const outputFile = ts.transform(
-        program.getSourceFile(inputFileExecpath)!,
-        [getInitializerApiJitTransform(host, importTracker, /* isCore */ false)],
-        program.getCompilerOptions());
+      program.getSourceFile(inputFileExecpath)!,
+      [getInitializerApiJitTransform(host, importTracker, /* isCore */ false)],
+      program.getCompilerOptions(),
+    );
 
     await fs.promises.writeFile(
-        path.join(outputDirExecPath, `transformed_${path.basename(inputFileExecpath)}`),
-        ts.createPrinter().printFile(outputFile.transformed[0]));
+      path.join(outputDirExecPath, `transformed_${path.basename(inputFileExecpath)}`),
+      ts.createPrinter().printFile(outputFile.transformed[0]),
+    );
   }
 }
diff --git a/packages/core/test/acceptance/authoring/model_inputs_spec.ts b/packages/core/test/acceptance/authoring/model_inputs_spec.ts
index 3750868da2afb..45b8ae80ddb83 100644
--- a/packages/core/test/acceptance/authoring/model_inputs_spec.ts
+++ b/packages/core/test/acceptance/authoring/model_inputs_spec.ts
@@ -6,7 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, EventEmitter, Input, model, OnChanges, Output, signal, SimpleChange, SimpleChanges, ViewChild} from '@angular/core';
+import {
+  Component,
+  Directive,
+  EventEmitter,
+  Input,
+  model,
+  OnChanges,
+  Output,
+  signal,
+  SimpleChange,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 describe('model inputs', () => {
@@ -194,7 +206,7 @@ describe('model inputs', () => {
     fixture.detectChanges();
     expect(emittedValues).toEqual([1]);
 
-    host.dir.value.update(value => value * 5);
+    host.dir.value.update((value) => value * 5);
     fixture.detectChanges();
     expect(emittedValues).toEqual([1, 5]);
   });
@@ -373,8 +385,9 @@ describe('model inputs', () => {
       value = 1;
     }
 
-    expect(() => TestBed.createComponent(App))
-        .toThrowError(/Model is required but no value is available yet/);
+    expect(() => TestBed.createComponent(App)).toThrowError(
+      /Model is required but no value is available yet/,
+    );
   });
 
   it('should throw if a required model input is updated too early', () => {
@@ -383,7 +396,7 @@ describe('model inputs', () => {
       value = model.required<number>();
 
       constructor() {
-        this.value.update(prev => prev * 2);
+        this.value.update((prev) => prev * 2);
       }
     }
 
@@ -396,8 +409,9 @@ describe('model inputs', () => {
       value = 1;
     }
 
-    expect(() => TestBed.createComponent(App))
-        .toThrowError(/Model is required but no value is available yet/);
+    expect(() => TestBed.createComponent(App)).toThrowError(
+      /Model is required but no value is available yet/,
+    );
   });
 
   it('should stop emitting to the output on destroy', () => {
@@ -443,8 +457,7 @@ describe('model inputs', () => {
     }
 
     @Directive({selector: '[dir]', standalone: true})
-    class Dir extends BaseDir {
-    }
+    class Dir extends BaseDir {}
 
     @Component({
       template: '<div [(value)]="value" dir></div>',
@@ -483,13 +496,13 @@ describe('model inputs', () => {
       standalone: true,
       host: {
         '(click)': 'increment()',
-      }
+      },
     })
     class Dir {
       value = model(0);
 
       increment() {
-        this.value.update(previous => previous + 1);
+        this.value.update((previous) => previous + 1);
       }
     }
 
@@ -542,11 +555,13 @@ describe('model inputs', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    expect(changes).toEqual([jasmine.objectContaining({
-      previousValue: undefined,
-      currentValue: 1,
-      firstChange: true,
-    })]);
+    expect(changes).toEqual([
+      jasmine.objectContaining({
+        previousValue: undefined,
+        currentValue: 1,
+        firstChange: true,
+      }),
+    ]);
 
     fixture.componentInstance.value.set(2);
     fixture.detectChanges();
diff --git a/packages/core/test/acceptance/authoring/output_function_spec.ts b/packages/core/test/acceptance/authoring/output_function_spec.ts
index e84f6372910f0..41162ba86b6e3 100644
--- a/packages/core/test/acceptance/authoring/output_function_spec.ts
+++ b/packages/core/test/acceptance/authoring/output_function_spec.ts
@@ -6,7 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, effect, ErrorHandler, EventEmitter, output, signal} from '@angular/core';
+import {
+  Component,
+  Directive,
+  effect,
+  ErrorHandler,
+  EventEmitter,
+  output,
+  signal,
+} from '@angular/core';
 import {outputFromObservable} from '@angular/core/rxjs-interop';
 import {TestBed} from '@angular/core/testing';
 import {BehaviorSubject, Observable, share, Subject} from 'rxjs';
@@ -145,8 +153,9 @@ describe('output() function', () => {
     fixture.componentInstance.show = false;
     fixture.detectChanges();
 
-    expect(() => dir.onBla.subscribe(() => {}))
-        .toThrowError(/Unexpected subscription to destroyed `OutputRef`/);
+    expect(() => dir.onBla.subscribe(() => {})).toThrowError(
+      /Unexpected subscription to destroyed `OutputRef`/,
+    );
   });
 
   it('should run listeners outside of `emit` reactive context', () => {
@@ -186,7 +195,7 @@ describe('output() function', () => {
     fixture.detectChanges();
 
     expect(dir.effectCount).toEqual(1);
-    fixture.componentInstance.signalUnrelatedToDir.update(v => v + 1);
+    fixture.componentInstance.signalUnrelatedToDir.update((v) => v + 1);
     fixture.detectChanges();
 
     expect(dir.effectCount).toEqual(1);
@@ -293,10 +302,10 @@ describe('output() function', () => {
       })
       class Dir {
         streamStarted = false;
-        onBla$ = new Observable(obs => {
-                   this.streamStarted = true;
-                   obs.next(1);
-                 }).pipe(share());
+        onBla$ = new Observable((obs) => {
+          this.streamStarted = true;
+          obs.next(1);
+        }).pipe(share());
 
         onBla = outputFromObservable(this.onBla$);
       }
@@ -309,8 +318,7 @@ describe('output() function', () => {
         standalone: true,
         imports: [Dir],
       })
-      class App {
-      }
+      class App {}
 
       const fixture = TestBed.createComponent(App);
       const dir = fixture.debugElement.children[0].injector.get(Dir);
@@ -338,18 +346,20 @@ describe('output() function', () => {
         standalone: true,
         imports: [Dir],
       })
-      class App {
-      }
+      class App {}
 
       let handledErrors: unknown[] = [];
       TestBed.configureTestingModule({
-        providers: [{
-          provide: ErrorHandler, useClass: class Handler extends ErrorHandler {
-            override handleError(error: unknown): void {
-              handledErrors.push(error);
-            }
-          }
-        }],
+        providers: [
+          {
+            provide: ErrorHandler,
+            useClass: class Handler extends ErrorHandler {
+              override handleError(error: unknown): void {
+                handledErrors.push(error);
+              }
+            },
+          },
+        ],
       });
 
       const fixture = TestBed.createComponent(App);
diff --git a/packages/core/test/acceptance/authoring/signal_inputs_spec.ts b/packages/core/test/acceptance/authoring/signal_inputs_spec.ts
index 187da91772357..bc984caa26924 100644
--- a/packages/core/test/acceptance/authoring/signal_inputs_spec.ts
+++ b/packages/core/test/acceptance/authoring/signal_inputs_spec.ts
@@ -6,13 +6,24 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, computed, Directive, effect, EventEmitter, input, Output, ViewChild} from '@angular/core';
+import {
+  Component,
+  computed,
+  Directive,
+  effect,
+  EventEmitter,
+  input,
+  Output,
+  ViewChild,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 describe('signal inputs', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    errorOnUnknownProperties: true,
-  }));
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      errorOnUnknownProperties: true,
+    }),
+  );
 
   it('should be possible to bind to an input', () => {
     @Component({
@@ -194,8 +205,9 @@ describe('signal inputs', () => {
       value = 1;
     }
 
-    expect(() => TestBed.createComponent(TestCmp))
-        .toThrowError(/Input is required but no value is available yet/);
+    expect(() => TestBed.createComponent(TestCmp)).toThrowError(
+      /Input is required but no value is available yet/,
+    );
   });
 
   it('should be possible to bind to an inherited input', () => {
@@ -209,8 +221,7 @@ describe('signal inputs', () => {
       standalone: true,
       template: 'input:{{input()}}',
     })
-    class InputComp extends BaseDir {
-    }
+    class InputComp extends BaseDir {}
 
     @Component({
       standalone: true,
diff --git a/packages/core/test/acceptance/authoring/signal_queries_spec.ts b/packages/core/test/acceptance/authoring/signal_queries_spec.ts
index e9c41155b5d30..0ac8a9504b64b 100644
--- a/packages/core/test/acceptance/authoring/signal_queries_spec.ts
+++ b/packages/core/test/acceptance/authoring/signal_queries_spec.ts
@@ -6,7 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, computed, contentChild, contentChildren, createComponent, Directive, ElementRef, EnvironmentInjector, QueryList, viewChild, ViewChildren, viewChildren} from '@angular/core';
+import {
+  Component,
+  computed,
+  contentChild,
+  contentChildren,
+  createComponent,
+  Directive,
+  ElementRef,
+  EnvironmentInjector,
+  QueryList,
+  viewChild,
+  ViewChildren,
+  viewChildren,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
@@ -34,7 +47,7 @@ describe('queries as signals', () => {
     });
 
     it('should return undefined if optional query is read in the constructor', () => {
-      let result: {}|undefined = {};
+      let result: {} | undefined = {};
 
       @Component({
         standalone: true,
@@ -127,7 +140,7 @@ describe('queries as signals', () => {
     });
 
     it('should return an empty array when reading children query in the constructor', () => {
-      let result: readonly ElementRef[]|undefined;
+      let result: readonly ElementRef[] | undefined;
 
       @Component({
         standalone: true,
@@ -196,36 +209,35 @@ describe('queries as signals', () => {
       expect(fixture.componentInstance.isThere()).toBe(1);
     });
 
-    it('should return the same array instance when there were no changes in results after view manipulation',
-       () => {
-         @Component({
-           standalone: true,
-           template: `
+    it('should return the same array instance when there were no changes in results after view manipulation', () => {
+      @Component({
+        standalone: true,
+        template: `
             <div #el></div>
             @if (show) {
               <div></div>
             }
           `,
-         })
-         class AppComponent {
-           divEls = viewChildren<ElementRef<HTMLDivElement>>('el');
-
-           show = false;
-         }
-
-         const fixture = TestBed.createComponent(AppComponent);
-         fixture.detectChanges();
-         const result1 = fixture.componentInstance.divEls();
-         expect(result1.length).toBe(1);
-
-         fixture.componentInstance.show = true;
-         fixture.detectChanges();
-         // subsequent reads should return the same result instance since the query results didn't
-         // change
-         const result2 = fixture.componentInstance.divEls();
-         expect(result2.length).toBe(1);
-         expect(result2).toBe(result1);
-       });
+      })
+      class AppComponent {
+        divEls = viewChildren<ElementRef<HTMLDivElement>>('el');
+
+        show = false;
+      }
+
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      const result1 = fixture.componentInstance.divEls();
+      expect(result1.length).toBe(1);
+
+      fixture.componentInstance.show = true;
+      fixture.detectChanges();
+      // subsequent reads should return the same result instance since the query results didn't
+      // change
+      const result2 = fixture.componentInstance.divEls();
+      expect(result2.length).toBe(1);
+      expect(result2).toBe(result1);
+    });
 
     it('should be empty when no query matches exist', () => {
       @Component({
@@ -258,8 +270,11 @@ describe('queries as signals', () => {
         elementReq = contentChild.required('el');
 
         noOfEls = computed(
-            () => this.elements().length + (this.element() !== undefined ? 1 : 0) +
-                (this.elementReq() !== undefined ? 1 : 0));
+          () =>
+            this.elements().length +
+            (this.element() !== undefined ? 1 : 0) +
+            (this.elementReq() !== undefined ? 1 : 0),
+        );
       }
 
       @Component({
@@ -303,8 +318,11 @@ describe('queries as signals', () => {
         elementReq = contentChild.required('el');
 
         noOfEls = computed(
-            () => this.elements().length + (this.element() !== undefined ? 1 : 0) +
-                (this.elementReq() !== undefined ? 1 : 0));
+          () =>
+            this.elements().length +
+            (this.element() !== undefined ? 1 : 0) +
+            (this.elementReq() !== undefined ? 1 : 0),
+        );
       }
 
       @Component({
@@ -338,8 +356,7 @@ describe('queries as signals', () => {
 
     it('should not return partial results during the first-time view rendering', () => {
       @Directive({selector: '[marker]', standalone: true})
-      class MarkerForResults {
-      }
+      class MarkerForResults {}
 
       @Directive({
         selector: '[declare]',
@@ -349,7 +366,6 @@ describe('queries as signals', () => {
         results = contentChildren(MarkerForResults);
       }
 
-
       @Directive({selector: '[inspect]', standalone: true})
       class InspectsQueryResults {
         constructor(declaration: DeclareQuery) {
@@ -369,13 +385,13 @@ describe('queries as signals', () => {
                 </div>
              `,
       })
-      class AppComponent {
-      }
+      class AppComponent {}
 
       const fixture = TestBed.createComponent(AppComponent);
       fixture.detectChanges();
-      const queryDir =
-          fixture.debugElement.query(By.directive(DeclareQuery)).injector.get(DeclareQuery);
+      const queryDir = fixture.debugElement
+        .query(By.directive(DeclareQuery))
+        .injector.get(DeclareQuery);
 
       expect(queryDir.results().length).toBe(2);
     });
@@ -395,13 +411,13 @@ describe('queries as signals', () => {
         imports: [DeclareQuery],
         template: `<div declare></div>`,
       })
-      class AppComponent {
-      }
+      class AppComponent {}
 
       const fixture = TestBed.createComponent(AppComponent);
       fixture.detectChanges();
-      const queryDir =
-          fixture.debugElement.query(By.directive(DeclareQuery)).injector.get(DeclareQuery);
+      const queryDir = fixture.debugElement
+        .query(By.directive(DeclareQuery))
+        .injector.get(DeclareQuery);
 
       expect(queryDir.result()).toBeUndefined();
       expect(queryDir.results().length).toBe(0);
@@ -409,80 +425,78 @@ describe('queries as signals', () => {
   });
 
   describe('reactivity and performance', () => {
-    it('should not dirty a children query when a list of matches does not change - a view with matches',
-       () => {
-         let recomputeCount = 0;
+    it('should not dirty a children query when a list of matches does not change - a view with matches', () => {
+      let recomputeCount = 0;
 
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
           <div #el></div>
           @if (show) {
             <div #el></div>
           }
         `,
-         })
-         class AppComponent {
-           divEls = viewChildren<ElementRef<HTMLDivElement>>('el');
-           foundElCount = computed(() => {
-             recomputeCount++;
-             return this.divEls().length;
-           });
-           show = false;
-         }
-
-         const fixture = TestBed.createComponent(AppComponent);
-         fixture.detectChanges();
-         expect(fixture.componentInstance.foundElCount()).toBe(1);
-         expect(recomputeCount).toBe(1);
-
-         // trigger view manipulation that should dirty queries but not change the results
-         fixture.componentInstance.show = true;
-         fixture.detectChanges();
-         fixture.componentInstance.show = false;
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.foundElCount()).toBe(1);
-         expect(recomputeCount).toBe(1);
-       });
-
-    it('should not dirty a children query when a list of matches does not change - a view with another container',
-       () => {
-         let recomputeCount = 0;
-
-         @Component({
-           standalone: true,
-           template: `
+      })
+      class AppComponent {
+        divEls = viewChildren<ElementRef<HTMLDivElement>>('el');
+        foundElCount = computed(() => {
+          recomputeCount++;
+          return this.divEls().length;
+        });
+        show = false;
+      }
+
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.foundElCount()).toBe(1);
+      expect(recomputeCount).toBe(1);
+
+      // trigger view manipulation that should dirty queries but not change the results
+      fixture.componentInstance.show = true;
+      fixture.detectChanges();
+      fixture.componentInstance.show = false;
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.foundElCount()).toBe(1);
+      expect(recomputeCount).toBe(1);
+    });
+
+    it('should not dirty a children query when a list of matches does not change - a view with another container', () => {
+      let recomputeCount = 0;
+
+      @Component({
+        standalone: true,
+        template: `
           <div #el></div>
           @if (show) {
             <!-- an empty if to create a container -->
             @if (true) {}
           }
         `,
-         })
-         class AppComponent {
-           divEls = viewChildren<ElementRef<HTMLDivElement>>('el');
-           foundElCount = computed(() => {
-             recomputeCount++;
-             return this.divEls().length;
-           });
-           show = false;
-         }
-
-         const fixture = TestBed.createComponent(AppComponent);
-         fixture.detectChanges();
-         expect(fixture.componentInstance.foundElCount()).toBe(1);
-         expect(recomputeCount).toBe(1);
-
-         // trigger view manipulation that should dirty queries but not change the results
-         fixture.componentInstance.show = true;
-         fixture.detectChanges();
-         fixture.componentInstance.show = false;
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.foundElCount()).toBe(1);
-         expect(recomputeCount).toBe(1);
-       });
+      })
+      class AppComponent {
+        divEls = viewChildren<ElementRef<HTMLDivElement>>('el');
+        foundElCount = computed(() => {
+          recomputeCount++;
+          return this.divEls().length;
+        });
+        show = false;
+      }
+
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.foundElCount()).toBe(1);
+      expect(recomputeCount).toBe(1);
+
+      // trigger view manipulation that should dirty queries but not change the results
+      fixture.componentInstance.show = true;
+      fixture.detectChanges();
+      fixture.componentInstance.show = false;
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.foundElCount()).toBe(1);
+      expect(recomputeCount).toBe(1);
+    });
   });
 
   describe('dynamic component creation', () => {
@@ -519,7 +533,6 @@ describe('queries as signals', () => {
     });
   });
 
-
   describe('mix of signal and decorator queries', () => {
     it('should allow specifying both types of queries in one component', () => {
       @Component({
@@ -577,7 +590,7 @@ describe('queries as signals', () => {
             @if (show) {
               <div #el></div>
             }
-          `
+          `,
       })
       class AppComponent extends BaseComponent {
         @ViewChildren('el') divElsDecorator!: QueryList<ElementRef<HTMLDivElement>>;
diff --git a/packages/core/test/acceptance/bootstrap_spec.ts b/packages/core/test/acceptance/bootstrap_spec.ts
index 1e8f1bd599ae3..8f3b6c7b0c159 100644
--- a/packages/core/test/acceptance/bootstrap_spec.ts
+++ b/packages/core/test/acceptance/bootstrap_spec.ts
@@ -6,7 +6,18 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ApplicationRef, COMPILER_OPTIONS, Component, destroyPlatform, forwardRef, NgModule, NgZone, TestabilityRegistry, ViewContainerRef, ViewEncapsulation} from '@angular/core';
+import {
+  ApplicationRef,
+  COMPILER_OPTIONS,
+  Component,
+  destroyPlatform,
+  forwardRef,
+  NgModule,
+  NgZone,
+  TestabilityRegistry,
+  ViewContainerRef,
+  ViewEncapsulation,
+} from '@angular/core';
 import {bootstrapApplication, BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {withBody} from '@angular/private/testing';
@@ -15,58 +26,66 @@ describe('bootstrap', () => {
   beforeEach(destroyPlatform);
   afterEach(destroyPlatform);
 
-  it('should bootstrap using #id selector',
-     withBody('<div>before|</div><button id="my-app"></button>', async () => {
-       try {
-         const ngModuleRef = await platformBrowserDynamic().bootstrapModule(IdSelectorAppModule);
-         expect(document.body.textContent).toEqual('before|works!');
-         ngModuleRef.destroy();
-       } catch (err) {
-         console.error(err);
-       }
-     }));
-
-  it('should bootstrap using one of selectors from the list',
-     withBody('<div>before|</div><div class="bar"></div>', async () => {
-       try {
-         const ngModuleRef =
-             await platformBrowserDynamic().bootstrapModule(MultipleSelectorsAppModule);
-         expect(document.body.textContent).toEqual('before|works!');
-         ngModuleRef.destroy();
-       } catch (err) {
-         console.error(err);
-       }
-     }));
-
-
-  it('should allow injecting VCRef into the root (bootstrapped) component',
-     withBody('before|<test-cmp></test-cmp>|after', async () => {
-       @Component({selector: 'dynamic-cmp', standalone: true, template: 'dynamic'})
-       class DynamicCmp {
-       }
-
-       @Component({selector: 'test-cmp', standalone: true, template: '(test)'})
-       class TestCmp {
-         constructor(public vcRef: ViewContainerRef) {}
-       }
-
-       expect(document.body.textContent).toEqual('before||after');
-
-       const appRef = await bootstrapApplication(TestCmp);
-       expect(document.body.textContent).toEqual('before|(test)|after');
-
-       appRef.components[0].instance.vcRef.createComponent(DynamicCmp);
-       expect(document.body.textContent).toEqual('before|(test)dynamic|after');
-
-       appRef.destroy();
-       expect(document.body.textContent).toEqual('before||after');
-     }));
+  it(
+    'should bootstrap using #id selector',
+    withBody('<div>before|</div><button id="my-app"></button>', async () => {
+      try {
+        const ngModuleRef = await platformBrowserDynamic().bootstrapModule(IdSelectorAppModule);
+        expect(document.body.textContent).toEqual('before|works!');
+        ngModuleRef.destroy();
+      } catch (err) {
+        console.error(err);
+      }
+    }),
+  );
+
+  it(
+    'should bootstrap using one of selectors from the list',
+    withBody('<div>before|</div><div class="bar"></div>', async () => {
+      try {
+        const ngModuleRef = await platformBrowserDynamic().bootstrapModule(
+          MultipleSelectorsAppModule,
+        );
+        expect(document.body.textContent).toEqual('before|works!');
+        ngModuleRef.destroy();
+      } catch (err) {
+        console.error(err);
+      }
+    }),
+  );
+
+  it(
+    'should allow injecting VCRef into the root (bootstrapped) component',
+    withBody('before|<test-cmp></test-cmp>|after', async () => {
+      @Component({selector: 'dynamic-cmp', standalone: true, template: 'dynamic'})
+      class DynamicCmp {}
+
+      @Component({selector: 'test-cmp', standalone: true, template: '(test)'})
+      class TestCmp {
+        constructor(public vcRef: ViewContainerRef) {}
+      }
+
+      expect(document.body.textContent).toEqual('before||after');
+
+      const appRef = await bootstrapApplication(TestCmp);
+      expect(document.body.textContent).toEqual('before|(test)|after');
+
+      appRef.components[0].instance.vcRef.createComponent(DynamicCmp);
+      expect(document.body.textContent).toEqual('before|(test)dynamic|after');
+
+      appRef.destroy();
+      expect(document.body.textContent).toEqual('before||after');
+    }),
+  );
 
   describe('options', () => {
     function createComponentAndModule(
-        options:
-            {encapsulation?: ViewEncapsulation; preserveWhitespaces?: boolean;
-             selector?: string} = {}) {
+      options: {
+        encapsulation?: ViewEncapsulation;
+        preserveWhitespaces?: boolean;
+        selector?: string;
+      } = {},
+    ) {
       @Component({
         selector: options.selector || 'my-app',
         styles: [''],
@@ -75,8 +94,7 @@ describe('bootstrap', () => {
         preserveWhitespaces: options.preserveWhitespaces,
         jit: true,
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @NgModule({
         imports: [BrowserModule],
@@ -84,251 +102,281 @@ describe('bootstrap', () => {
         bootstrap: [TestComponent],
         jit: true,
       })
-      class TestModule {
-      }
+      class TestModule {}
 
       return TestModule;
     }
 
-    it('should use ViewEncapsulation.Emulated as default',
-       withBody('<my-app></my-app>', async () => {
-         const TestModule = createComponentAndModule();
-
-         const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
-         expect(document.body.innerHTML).toContain('<span _ngcontent-');
-         ngModuleRef.destroy();
-       }));
-
-    it('should allow setting defaultEncapsulation using bootstrap option',
-       withBody('<my-app></my-app>', async () => {
-         const TestModule = createComponentAndModule();
-
-         const ngModuleRef = await platformBrowserDynamic().bootstrapModule(
-             TestModule, {defaultEncapsulation: ViewEncapsulation.None});
-         expect(document.body.innerHTML).toContain('<span>');
-         expect(document.body.innerHTML).not.toContain('_ngcontent-');
-         ngModuleRef.destroy();
-       }));
-
-    it('should allow setting defaultEncapsulation using compiler option',
-       withBody('<my-app></my-app>', async () => {
-         const TestModule = createComponentAndModule();
-
-         const ngModuleRef = await platformBrowserDynamic([{
-                               provide: COMPILER_OPTIONS,
-                               useValue: {defaultEncapsulation: ViewEncapsulation.None},
-                               multi: true
-                             }]).bootstrapModule(TestModule);
-         expect(document.body.innerHTML).toContain('<span>');
-         expect(document.body.innerHTML).not.toContain('_ngcontent-');
-         ngModuleRef.destroy();
-       }));
-
-    it('should prefer encapsulation on component over bootstrap option',
-       withBody('<my-app></my-app>', async () => {
-         const TestModule = createComponentAndModule({encapsulation: ViewEncapsulation.Emulated});
-
-         const ngModuleRef = await platformBrowserDynamic().bootstrapModule(
-             TestModule, {defaultEncapsulation: ViewEncapsulation.None});
-         expect(document.body.innerHTML).toContain('<span _ngcontent-');
-         ngModuleRef.destroy();
-       }));
-
-    it('should use preserveWhitespaces: false as default',
-       withBody('<my-app></my-app>', async () => {
-         const TestModule = createComponentAndModule();
-
-         const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
-         expect(document.body.innerHTML).toContain('a b');
-         ngModuleRef.destroy();
-       }));
-
-    it('should allow setting preserveWhitespaces using bootstrap option',
-       withBody('<my-app></my-app>', async () => {
-         const TestModule = createComponentAndModule();
-
-         const ngModuleRef = await platformBrowserDynamic().bootstrapModule(
-             TestModule, {preserveWhitespaces: true});
-         expect(document.body.innerHTML).toContain('a    b');
-         ngModuleRef.destroy();
-       }));
-
-    it('should allow setting preserveWhitespaces using compiler option',
-       withBody('<my-app></my-app>', async () => {
-         const TestModule = createComponentAndModule();
-
-         const ngModuleRef =
-             await platformBrowserDynamic([
-               {provide: COMPILER_OPTIONS, useValue: {preserveWhitespaces: true}, multi: true}
-             ]).bootstrapModule(TestModule);
-         expect(document.body.innerHTML).toContain('a    b');
-         ngModuleRef.destroy();
-       }));
-
-    it('should prefer preserveWhitespaces on component over bootstrap option',
-       withBody('<my-app></my-app>', async () => {
-         const TestModule = createComponentAndModule({preserveWhitespaces: false});
-
-         const ngModuleRef = await platformBrowserDynamic().bootstrapModule(
-             TestModule, {preserveWhitespaces: true});
-         expect(document.body.innerHTML).toContain('a b');
-         ngModuleRef.destroy();
-       }));
+    it(
+      'should use ViewEncapsulation.Emulated as default',
+      withBody('<my-app></my-app>', async () => {
+        const TestModule = createComponentAndModule();
+
+        const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
+        expect(document.body.innerHTML).toContain('<span _ngcontent-');
+        ngModuleRef.destroy();
+      }),
+    );
+
+    it(
+      'should allow setting defaultEncapsulation using bootstrap option',
+      withBody('<my-app></my-app>', async () => {
+        const TestModule = createComponentAndModule();
+
+        const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule, {
+          defaultEncapsulation: ViewEncapsulation.None,
+        });
+        expect(document.body.innerHTML).toContain('<span>');
+        expect(document.body.innerHTML).not.toContain('_ngcontent-');
+        ngModuleRef.destroy();
+      }),
+    );
+
+    it(
+      'should allow setting defaultEncapsulation using compiler option',
+      withBody('<my-app></my-app>', async () => {
+        const TestModule = createComponentAndModule();
+
+        const ngModuleRef = await platformBrowserDynamic([
+          {
+            provide: COMPILER_OPTIONS,
+            useValue: {defaultEncapsulation: ViewEncapsulation.None},
+            multi: true,
+          },
+        ]).bootstrapModule(TestModule);
+        expect(document.body.innerHTML).toContain('<span>');
+        expect(document.body.innerHTML).not.toContain('_ngcontent-');
+        ngModuleRef.destroy();
+      }),
+    );
+
+    it(
+      'should prefer encapsulation on component over bootstrap option',
+      withBody('<my-app></my-app>', async () => {
+        const TestModule = createComponentAndModule({encapsulation: ViewEncapsulation.Emulated});
+
+        const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule, {
+          defaultEncapsulation: ViewEncapsulation.None,
+        });
+        expect(document.body.innerHTML).toContain('<span _ngcontent-');
+        ngModuleRef.destroy();
+      }),
+    );
+
+    it(
+      'should use preserveWhitespaces: false as default',
+      withBody('<my-app></my-app>', async () => {
+        const TestModule = createComponentAndModule();
+
+        const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
+        expect(document.body.innerHTML).toContain('a b');
+        ngModuleRef.destroy();
+      }),
+    );
+
+    it(
+      'should allow setting preserveWhitespaces using bootstrap option',
+      withBody('<my-app></my-app>', async () => {
+        const TestModule = createComponentAndModule();
+
+        const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule, {
+          preserveWhitespaces: true,
+        });
+        expect(document.body.innerHTML).toContain('a    b');
+        ngModuleRef.destroy();
+      }),
+    );
+
+    it(
+      'should allow setting preserveWhitespaces using compiler option',
+      withBody('<my-app></my-app>', async () => {
+        const TestModule = createComponentAndModule();
+
+        const ngModuleRef = await platformBrowserDynamic([
+          {provide: COMPILER_OPTIONS, useValue: {preserveWhitespaces: true}, multi: true},
+        ]).bootstrapModule(TestModule);
+        expect(document.body.innerHTML).toContain('a    b');
+        ngModuleRef.destroy();
+      }),
+    );
+
+    it(
+      'should prefer preserveWhitespaces on component over bootstrap option',
+      withBody('<my-app></my-app>', async () => {
+        const TestModule = createComponentAndModule({preserveWhitespaces: false});
+
+        const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule, {
+          preserveWhitespaces: true,
+        });
+        expect(document.body.innerHTML).toContain('a b');
+        ngModuleRef.destroy();
+      }),
+    );
 
     describe('ApplicationRef cleanup', () => {
-      it('should cleanup ApplicationRef when Injector is destroyed',
-         withBody('<my-app></my-app>', async () => {
-           const TestModule = createComponentAndModule();
-
-           const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
-           const appRef = ngModuleRef.injector.get(ApplicationRef);
-           const testabilityRegistry = ngModuleRef.injector.get(TestabilityRegistry);
-
-           expect(appRef.components.length).toBe(1);
-           expect(testabilityRegistry.getAllRootElements().length).toBe(1);
-
-           ngModuleRef.destroy();  // also destroys an Injector instance.
-
-           expect(appRef.components.length).toBe(0);
-           expect(testabilityRegistry.getAllRootElements().length).toBe(0);
-         }));
-
-      it('should cleanup ApplicationRef when ComponentRef is destroyed',
-         withBody('<my-app></my-app>', async () => {
-           const TestModule = createComponentAndModule();
-
-           const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
-           const appRef = ngModuleRef.injector.get(ApplicationRef);
-           const testabilityRegistry = ngModuleRef.injector.get(TestabilityRegistry);
-           const componentRef = appRef.components[0];
-
-           expect(appRef.components.length).toBe(1);
-           expect(testabilityRegistry.getAllRootElements().length).toBe(1);
-
-           componentRef.destroy();
-
-           expect(appRef.components.length).toBe(0);
-           expect(testabilityRegistry.getAllRootElements().length).toBe(0);
-         }));
-
-      it('should not throw in case ComponentRef is destroyed and Injector is destroyed after that',
-         withBody('<my-app></my-app>', async () => {
-           const TestModule = createComponentAndModule();
-
-           const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
-           const appRef = ngModuleRef.injector.get(ApplicationRef);
-           const testabilityRegistry = ngModuleRef.injector.get(TestabilityRegistry);
-           const componentRef = appRef.components[0];
-
-           expect(appRef.components.length).toBe(1);
-           expect(testabilityRegistry.getAllRootElements().length).toBe(1);
-
-           componentRef.destroy();
-           ngModuleRef.destroy();  // also destroys an Injector instance.
-
-           expect(appRef.components.length).toBe(0);
-           expect(testabilityRegistry.getAllRootElements().length).toBe(0);
-         }));
-
-      it('should not throw in case Injector is destroyed and ComponentRef is destroyed after that',
-         withBody('<my-app></my-app>', async () => {
-           const TestModule = createComponentAndModule();
-
-           const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
-           const appRef = ngModuleRef.injector.get(ApplicationRef);
-           const testabilityRegistry = ngModuleRef.injector.get(TestabilityRegistry);
-           const componentRef = appRef.components[0];
-
-           expect(appRef.components.length).toBe(1);
-           expect(testabilityRegistry.getAllRootElements().length).toBe(1);
-
-           ngModuleRef.destroy();  // also destroys an Injector instance.
-           componentRef.destroy();
-
-           expect(appRef.components.length).toBe(0);
-           expect(testabilityRegistry.getAllRootElements().length).toBe(0);
-         }));
-
-      it('should throw when standalone component is used in @NgModule.bootstrap',
-         withBody('<my-app></my-app>', async () => {
-           @Component({
-             standalone: true,
-             selector: 'standalone-comp',
-             template: '...',
-           })
-           class StandaloneComponent {
-           }
-
-           @NgModule({
-             bootstrap: [StandaloneComponent],
-           })
-           class MyModule {
-           }
-
-           try {
-             await platformBrowserDynamic().bootstrapModule(MyModule);
-
-             // This test tries to bootstrap a standalone component using NgModule-based bootstrap
-             // mechanisms. We expect standalone components to be bootstrapped via
-             // `bootstrapApplication` API instead.
-             fail('Expected to throw');
-           } catch (e: unknown) {
-             const expectedErrorMessage =
-                 'The `StandaloneComponent` class is a standalone component, ' +
-                 'which can not be used in the `@NgModule.bootstrap` array.';
-             expect(e).toBeInstanceOf(Error);
-             expect((e as Error).message).toContain(expectedErrorMessage);
-           }
-         }));
-
-      it('should throw when standalone component wrapped in `forwardRef` is used in @NgModule.bootstrap',
-         withBody('<my-app></my-app>', async () => {
-           @Component({
-             standalone: true,
-             selector: 'standalone-comp',
-             template: '...',
-           })
-           class StandaloneComponent {
-           }
-
-           @NgModule({
-             bootstrap: [forwardRef(() => StandaloneComponent)],
-           })
-           class MyModule {
-           }
-
-           try {
-             await platformBrowserDynamic().bootstrapModule(MyModule);
-
-             // This test tries to bootstrap a standalone component using NgModule-based bootstrap
-             // mechanisms. We expect standalone components to be bootstrapped via
-             // `bootstrapApplication` API instead.
-             fail('Expected to throw');
-           } catch (e: unknown) {
-             const expectedErrorMessage =
-                 'The `StandaloneComponent` class is a standalone component, which ' +
-                 'can not be used in the `@NgModule.bootstrap` array. Use the `bootstrapApplication` ' +
-                 'function for bootstrap instead.';
-             expect(e).toBeInstanceOf(Error);
-             expect((e as Error).message).toContain(expectedErrorMessage);
-           }
-         }));
+      it(
+        'should cleanup ApplicationRef when Injector is destroyed',
+        withBody('<my-app></my-app>', async () => {
+          const TestModule = createComponentAndModule();
+
+          const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
+          const appRef = ngModuleRef.injector.get(ApplicationRef);
+          const testabilityRegistry = ngModuleRef.injector.get(TestabilityRegistry);
+
+          expect(appRef.components.length).toBe(1);
+          expect(testabilityRegistry.getAllRootElements().length).toBe(1);
+
+          ngModuleRef.destroy(); // also destroys an Injector instance.
+
+          expect(appRef.components.length).toBe(0);
+          expect(testabilityRegistry.getAllRootElements().length).toBe(0);
+        }),
+      );
+
+      it(
+        'should cleanup ApplicationRef when ComponentRef is destroyed',
+        withBody('<my-app></my-app>', async () => {
+          const TestModule = createComponentAndModule();
+
+          const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
+          const appRef = ngModuleRef.injector.get(ApplicationRef);
+          const testabilityRegistry = ngModuleRef.injector.get(TestabilityRegistry);
+          const componentRef = appRef.components[0];
+
+          expect(appRef.components.length).toBe(1);
+          expect(testabilityRegistry.getAllRootElements().length).toBe(1);
+
+          componentRef.destroy();
+
+          expect(appRef.components.length).toBe(0);
+          expect(testabilityRegistry.getAllRootElements().length).toBe(0);
+        }),
+      );
+
+      it(
+        'should not throw in case ComponentRef is destroyed and Injector is destroyed after that',
+        withBody('<my-app></my-app>', async () => {
+          const TestModule = createComponentAndModule();
+
+          const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
+          const appRef = ngModuleRef.injector.get(ApplicationRef);
+          const testabilityRegistry = ngModuleRef.injector.get(TestabilityRegistry);
+          const componentRef = appRef.components[0];
+
+          expect(appRef.components.length).toBe(1);
+          expect(testabilityRegistry.getAllRootElements().length).toBe(1);
+
+          componentRef.destroy();
+          ngModuleRef.destroy(); // also destroys an Injector instance.
+
+          expect(appRef.components.length).toBe(0);
+          expect(testabilityRegistry.getAllRootElements().length).toBe(0);
+        }),
+      );
+
+      it(
+        'should not throw in case Injector is destroyed and ComponentRef is destroyed after that',
+        withBody('<my-app></my-app>', async () => {
+          const TestModule = createComponentAndModule();
+
+          const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
+          const appRef = ngModuleRef.injector.get(ApplicationRef);
+          const testabilityRegistry = ngModuleRef.injector.get(TestabilityRegistry);
+          const componentRef = appRef.components[0];
+
+          expect(appRef.components.length).toBe(1);
+          expect(testabilityRegistry.getAllRootElements().length).toBe(1);
+
+          ngModuleRef.destroy(); // also destroys an Injector instance.
+          componentRef.destroy();
+
+          expect(appRef.components.length).toBe(0);
+          expect(testabilityRegistry.getAllRootElements().length).toBe(0);
+        }),
+      );
+
+      it(
+        'should throw when standalone component is used in @NgModule.bootstrap',
+        withBody('<my-app></my-app>', async () => {
+          @Component({
+            standalone: true,
+            selector: 'standalone-comp',
+            template: '...',
+          })
+          class StandaloneComponent {}
+
+          @NgModule({
+            bootstrap: [StandaloneComponent],
+          })
+          class MyModule {}
+
+          try {
+            await platformBrowserDynamic().bootstrapModule(MyModule);
+
+            // This test tries to bootstrap a standalone component using NgModule-based bootstrap
+            // mechanisms. We expect standalone components to be bootstrapped via
+            // `bootstrapApplication` API instead.
+            fail('Expected to throw');
+          } catch (e: unknown) {
+            const expectedErrorMessage =
+              'The `StandaloneComponent` class is a standalone component, ' +
+              'which can not be used in the `@NgModule.bootstrap` array.';
+            expect(e).toBeInstanceOf(Error);
+            expect((e as Error).message).toContain(expectedErrorMessage);
+          }
+        }),
+      );
+
+      it(
+        'should throw when standalone component wrapped in `forwardRef` is used in @NgModule.bootstrap',
+        withBody('<my-app></my-app>', async () => {
+          @Component({
+            standalone: true,
+            selector: 'standalone-comp',
+            template: '...',
+          })
+          class StandaloneComponent {}
+
+          @NgModule({
+            bootstrap: [forwardRef(() => StandaloneComponent)],
+          })
+          class MyModule {}
+
+          try {
+            await platformBrowserDynamic().bootstrapModule(MyModule);
+
+            // This test tries to bootstrap a standalone component using NgModule-based bootstrap
+            // mechanisms. We expect standalone components to be bootstrapped via
+            // `bootstrapApplication` API instead.
+            fail('Expected to throw');
+          } catch (e: unknown) {
+            const expectedErrorMessage =
+              'The `StandaloneComponent` class is a standalone component, which ' +
+              'can not be used in the `@NgModule.bootstrap` array. Use the `bootstrapApplication` ' +
+              'function for bootstrap instead.';
+            expect(e).toBeInstanceOf(Error);
+            expect((e as Error).message).toContain(expectedErrorMessage);
+          }
+        }),
+      );
     });
 
     describe('PlatformRef cleanup', () => {
-      it('should unsubscribe from `onError` when Injector is destroyed',
-         withBody('<my-app></my-app>', async () => {
-           const TestModule = createComponentAndModule();
+      it(
+        'should unsubscribe from `onError` when Injector is destroyed',
+        withBody('<my-app></my-app>', async () => {
+          const TestModule = createComponentAndModule();
 
-           const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
-           const ngZone = ngModuleRef.injector.get(NgZone);
+          const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
+          const ngZone = ngModuleRef.injector.get(NgZone);
 
-           expect(ngZone.onError.observers.length).toBe(1);
+          expect(ngZone.onError.observers.length).toBe(1);
 
-           ngModuleRef.destroy();
+          ngModuleRef.destroy();
 
-           expect(ngZone.onError.observers.length).toBe(0);
-         }));
+          expect(ngZone.onError.observers.length).toBe(0);
+        }),
+      );
     });
 
     describe('changing bootstrap options', () => {
@@ -336,107 +384,125 @@ describe('bootstrap', () => {
         spyOn(console, 'error');
       });
 
-      it('should log an error when changing defaultEncapsulation bootstrap options',
-         withBody('<my-app-a></my-app-a><my-app-b></my-app-b>', async () => {
-           const platformRef = platformBrowserDynamic();
-
-           const TestModuleA = createComponentAndModule({selector: 'my-app-a'});
-           const ngModuleRefA = await platformRef.bootstrapModule(
-               TestModuleA, {defaultEncapsulation: ViewEncapsulation.None});
-           ngModuleRefA.destroy();
-
-           const TestModuleB = createComponentAndModule({selector: 'my-app-b'});
-           const ngModuleRefB = await platformRef.bootstrapModule(
-               TestModuleB, {defaultEncapsulation: ViewEncapsulation.ShadowDom});
-           expect(console.error)
-               .toHaveBeenCalledWith(
-                   'Provided value for `defaultEncapsulation` can not be changed once it has been set.');
-
-           // The options should not have been changed
-           expect(document.body.innerHTML).not.toContain('_ngcontent-');
-
-           ngModuleRefB.destroy();
-         }));
-
-      it('should log an error when changing preserveWhitespaces bootstrap options',
-         withBody('<my-app-a></my-app-a><my-app-b></my-app-b>', async () => {
-           const platformRef = platformBrowserDynamic();
-
-           const TestModuleA = createComponentAndModule({selector: 'my-app-a'});
-           const ngModuleRefA =
-               await platformRef.bootstrapModule(TestModuleA, {preserveWhitespaces: true});
-           ngModuleRefA.destroy();
-
-           const TestModuleB = createComponentAndModule({selector: 'my-app-b'});
-           const ngModuleRefB =
-               await platformRef.bootstrapModule(TestModuleB, {preserveWhitespaces: false});
-           expect(console.error)
-               .toHaveBeenCalledWith(
-                   'Provided value for `preserveWhitespaces` can not be changed once it has been set.');
-
-           // The options should not have been changed
-           expect(document.body.innerHTML).toContain('a    b');
-
-           ngModuleRefB.destroy();
-         }));
-
-      it('should log an error when changing defaultEncapsulation to its default',
-         withBody('<my-app-a></my-app-a><my-app-b></my-app-b>', async () => {
-           const platformRef = platformBrowserDynamic();
-
-           const TestModuleA = createComponentAndModule({selector: 'my-app-a'});
-           const ngModuleRefA = await platformRef.bootstrapModule(TestModuleA);
-           ngModuleRefA.destroy();
-
-           const TestModuleB = createComponentAndModule({selector: 'my-app-b'});
-           const ngModuleRefB = await platformRef.bootstrapModule(
-               TestModuleB, {defaultEncapsulation: ViewEncapsulation.Emulated});
-           // Although the configured value may be identical to the default, the provided set of
-           // options has still been changed compared to the previously provided options.
-           expect(console.error)
-               .toHaveBeenCalledWith(
-                   'Provided value for `defaultEncapsulation` can not be changed once it has been set.');
-
-           ngModuleRefB.destroy();
-         }));
-
-      it('should log an error when changing preserveWhitespaces to its default',
-         withBody('<my-app-a></my-app-a><my-app-b></my-app-b>', async () => {
-           const platformRef = platformBrowserDynamic();
-
-           const TestModuleA = createComponentAndModule({selector: 'my-app-a'});
-           const ngModuleRefA = await platformRef.bootstrapModule(TestModuleA);
-           ngModuleRefA.destroy();
-
-           const TestModuleB = createComponentAndModule({selector: 'my-app-b'});
-           const ngModuleRefB =
-               await platformRef.bootstrapModule(TestModuleB, {preserveWhitespaces: false});
-           // Although the configured value may be identical to the default, the provided set of
-           // options has still been changed compared to the previously provided options.
-           expect(console.error)
-               .toHaveBeenCalledWith(
-                   'Provided value for `preserveWhitespaces` can not be changed once it has been set.');
-
-           ngModuleRefB.destroy();
-         }));
-
-      it('should not log an error when passing identical bootstrap options',
-         withBody('<my-app-a></my-app-a><my-app-b></my-app-b>', async () => {
-           const platformRef = platformBrowserDynamic();
-
-           const TestModuleA = createComponentAndModule({selector: 'my-app-a'});
-           const ngModuleRefA = await platformRef.bootstrapModule(
-               TestModuleA,
-               {defaultEncapsulation: ViewEncapsulation.None, preserveWhitespaces: true});
-           ngModuleRefA.destroy();
-
-           // Bootstrapping multiple modules using the exact same options should be allowed.
-           const TestModuleB = createComponentAndModule({selector: 'my-app-b'});
-           const ngModuleRefB = await platformRef.bootstrapModule(
-               TestModuleB,
-               {defaultEncapsulation: ViewEncapsulation.None, preserveWhitespaces: true});
-           ngModuleRefB.destroy();
-         }));
+      it(
+        'should log an error when changing defaultEncapsulation bootstrap options',
+        withBody('<my-app-a></my-app-a><my-app-b></my-app-b>', async () => {
+          const platformRef = platformBrowserDynamic();
+
+          const TestModuleA = createComponentAndModule({selector: 'my-app-a'});
+          const ngModuleRefA = await platformRef.bootstrapModule(TestModuleA, {
+            defaultEncapsulation: ViewEncapsulation.None,
+          });
+          ngModuleRefA.destroy();
+
+          const TestModuleB = createComponentAndModule({selector: 'my-app-b'});
+          const ngModuleRefB = await platformRef.bootstrapModule(TestModuleB, {
+            defaultEncapsulation: ViewEncapsulation.ShadowDom,
+          });
+          expect(console.error).toHaveBeenCalledWith(
+            'Provided value for `defaultEncapsulation` can not be changed once it has been set.',
+          );
+
+          // The options should not have been changed
+          expect(document.body.innerHTML).not.toContain('_ngcontent-');
+
+          ngModuleRefB.destroy();
+        }),
+      );
+
+      it(
+        'should log an error when changing preserveWhitespaces bootstrap options',
+        withBody('<my-app-a></my-app-a><my-app-b></my-app-b>', async () => {
+          const platformRef = platformBrowserDynamic();
+
+          const TestModuleA = createComponentAndModule({selector: 'my-app-a'});
+          const ngModuleRefA = await platformRef.bootstrapModule(TestModuleA, {
+            preserveWhitespaces: true,
+          });
+          ngModuleRefA.destroy();
+
+          const TestModuleB = createComponentAndModule({selector: 'my-app-b'});
+          const ngModuleRefB = await platformRef.bootstrapModule(TestModuleB, {
+            preserveWhitespaces: false,
+          });
+          expect(console.error).toHaveBeenCalledWith(
+            'Provided value for `preserveWhitespaces` can not be changed once it has been set.',
+          );
+
+          // The options should not have been changed
+          expect(document.body.innerHTML).toContain('a    b');
+
+          ngModuleRefB.destroy();
+        }),
+      );
+
+      it(
+        'should log an error when changing defaultEncapsulation to its default',
+        withBody('<my-app-a></my-app-a><my-app-b></my-app-b>', async () => {
+          const platformRef = platformBrowserDynamic();
+
+          const TestModuleA = createComponentAndModule({selector: 'my-app-a'});
+          const ngModuleRefA = await platformRef.bootstrapModule(TestModuleA);
+          ngModuleRefA.destroy();
+
+          const TestModuleB = createComponentAndModule({selector: 'my-app-b'});
+          const ngModuleRefB = await platformRef.bootstrapModule(TestModuleB, {
+            defaultEncapsulation: ViewEncapsulation.Emulated,
+          });
+          // Although the configured value may be identical to the default, the provided set of
+          // options has still been changed compared to the previously provided options.
+          expect(console.error).toHaveBeenCalledWith(
+            'Provided value for `defaultEncapsulation` can not be changed once it has been set.',
+          );
+
+          ngModuleRefB.destroy();
+        }),
+      );
+
+      it(
+        'should log an error when changing preserveWhitespaces to its default',
+        withBody('<my-app-a></my-app-a><my-app-b></my-app-b>', async () => {
+          const platformRef = platformBrowserDynamic();
+
+          const TestModuleA = createComponentAndModule({selector: 'my-app-a'});
+          const ngModuleRefA = await platformRef.bootstrapModule(TestModuleA);
+          ngModuleRefA.destroy();
+
+          const TestModuleB = createComponentAndModule({selector: 'my-app-b'});
+          const ngModuleRefB = await platformRef.bootstrapModule(TestModuleB, {
+            preserveWhitespaces: false,
+          });
+          // Although the configured value may be identical to the default, the provided set of
+          // options has still been changed compared to the previously provided options.
+          expect(console.error).toHaveBeenCalledWith(
+            'Provided value for `preserveWhitespaces` can not be changed once it has been set.',
+          );
+
+          ngModuleRefB.destroy();
+        }),
+      );
+
+      it(
+        'should not log an error when passing identical bootstrap options',
+        withBody('<my-app-a></my-app-a><my-app-b></my-app-b>', async () => {
+          const platformRef = platformBrowserDynamic();
+
+          const TestModuleA = createComponentAndModule({selector: 'my-app-a'});
+          const ngModuleRefA = await platformRef.bootstrapModule(TestModuleA, {
+            defaultEncapsulation: ViewEncapsulation.None,
+            preserveWhitespaces: true,
+          });
+          ngModuleRefA.destroy();
+
+          // Bootstrapping multiple modules using the exact same options should be allowed.
+          const TestModuleB = createComponentAndModule({selector: 'my-app-b'});
+          const ngModuleRefB = await platformRef.bootstrapModule(TestModuleB, {
+            defaultEncapsulation: ViewEncapsulation.None,
+            preserveWhitespaces: true,
+          });
+          ngModuleRefB.destroy();
+        }),
+      );
     });
   });
 });
@@ -445,28 +511,24 @@ describe('bootstrap', () => {
   selector: '#my-app',
   template: 'works!',
 })
-export class IdSelectorAppComponent {
-}
+export class IdSelectorAppComponent {}
 
 @NgModule({
   imports: [BrowserModule],
   declarations: [IdSelectorAppComponent],
   bootstrap: [IdSelectorAppComponent],
 })
-export class IdSelectorAppModule {
-}
+export class IdSelectorAppModule {}
 
 @Component({
   selector: '[foo],span,.bar',
   template: 'works!',
 })
-export class MultipleSelectorsAppComponent {
-}
+export class MultipleSelectorsAppComponent {}
 
 @NgModule({
   imports: [BrowserModule],
   declarations: [MultipleSelectorsAppComponent],
   bootstrap: [MultipleSelectorsAppComponent],
 })
-export class MultipleSelectorsAppModule {
-}
+export class MultipleSelectorsAppModule {}
diff --git a/packages/core/test/acceptance/change_detection_signals_in_zones_spec.ts b/packages/core/test/acceptance/change_detection_signals_in_zones_spec.ts
index 23f675ee5bb74..d37ed0c9bdc97 100644
--- a/packages/core/test/acceptance/change_detection_signals_in_zones_spec.ts
+++ b/packages/core/test/acceptance/change_detection_signals_in_zones_spec.ts
@@ -8,7 +8,23 @@
 
 import {NgFor, NgIf} from '@angular/common';
 import {PLATFORM_BROWSER_ID} from '@angular/common/src/platform_id';
-import {afterNextRender, ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, Directive, EnvironmentInjector, inject, Input, PLATFORM_ID, signal, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  afterNextRender,
+  ApplicationRef,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  computed,
+  Directive,
+  EnvironmentInjector,
+  inject,
+  Input,
+  PLATFORM_ID,
+  signal,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {ReactiveNode, SIGNAL} from '@angular/core/primitives/signals';
 import {TestBed} from '@angular/core/testing';
 
@@ -78,10 +94,9 @@ describe('CheckAlways components', () => {
       template: `<check-always />`,
       standalone: true,
       imports: [CheckAlwaysCmp],
-      changeDetection: ChangeDetectionStrategy.OnPush
+      changeDetection: ChangeDetectionStrategy.OnPush,
     })
-    class OnPushParent {
-    }
+    class OnPushParent {}
     const fixture = TestBed.createComponent(OnPushParent);
     fixture.detectChanges();
     expect(fixture.nativeElement.textContent.trim()).toEqual('initial');
@@ -121,8 +136,7 @@ describe('CheckAlways components', () => {
     }
 
     @Component({template: '<a-comp />-<b-comp />', standalone: true, imports: [A, B]})
-    class App {
-    }
+    class App {}
 
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
@@ -151,7 +165,7 @@ describe('CheckAlways components', () => {
         // Update signal in parent view every time we check the child view
         // (ExpressionChangedAfterItWasCheckedError but not for signals)
         if (val() < incrementAfterCheckedUntil) {
-          val.update(v => ++v);
+          val.update((v) => ++v);
         }
       }
     }
@@ -181,7 +195,7 @@ describe('CheckAlways components', () => {
     class App {
       val = val;
       ngOnInit() {
-        this.val.update(v => v + 1);
+        this.val.update((v) => v + 1);
       }
     }
     const fixture = TestBed.createComponent(App);
@@ -196,7 +210,6 @@ describe('CheckAlways components', () => {
   });
 });
 
-
 describe('OnPush components with signals', () => {
   it('marks view dirty', () => {
     @Component({
@@ -229,7 +242,7 @@ describe('OnPush components with signals', () => {
     expect(instance.value()).toBe('new');
   });
 
-  it('does not refresh a component when a signal notifies but isn\'t actually updated', () => {
+  it("does not refresh a component when a signal notifies but isn't actually updated", () => {
     @Component({
       template: `{{memo()}}{{incrementTemplateExecutions()}}`,
       changeDetection: ChangeDetectionStrategy.OnPush,
@@ -251,114 +264,112 @@ describe('OnPush components with signals', () => {
     expect(instance.numTemplateExecutions).toBe(1);
     expect(fixture.nativeElement.textContent.trim()).toEqual('initial');
 
-    instance.value.update(v => ({...v}));
+    instance.value.update((v) => ({...v}));
     fixture.detectChanges();
     expect(instance.numTemplateExecutions).toBe(1);
 
-    instance.value.update(v => ({value: 'new'}));
+    instance.value.update((v) => ({value: 'new'}));
     fixture.detectChanges();
     expect(instance.numTemplateExecutions).toBe(2);
     expect(fixture.nativeElement.textContent.trim()).toEqual('new');
   });
 
-  it('should not mark components as dirty when signal is read in a constructor of a child component',
-     () => {
-       const state = signal('initial');
-
-       @Component({
-         selector: 'child',
-         template: `child`,
-         changeDetection: ChangeDetectionStrategy.OnPush,
-         standalone: true,
-       })
-       class ChildReadingSignalCmp {
-         constructor() {
-           state();
-         }
-       }
-
-       @Component({
-         template: `
+  it('should not mark components as dirty when signal is read in a constructor of a child component', () => {
+    const state = signal('initial');
+
+    @Component({
+      selector: 'child',
+      template: `child`,
+      changeDetection: ChangeDetectionStrategy.OnPush,
+      standalone: true,
+    })
+    class ChildReadingSignalCmp {
+      constructor() {
+        state();
+      }
+    }
+
+    @Component({
+      template: `
             {{incrementTemplateExecutions()}}
             <!-- Template constructed to execute child component constructor in the update pass of a host component -->
             <ng-template [ngIf]="true"><child></child></ng-template>
           `,
-         changeDetection: ChangeDetectionStrategy.OnPush,
-         standalone: true,
-         imports: [NgIf, ChildReadingSignalCmp],
-       })
-       class OnPushCmp {
-         numTemplateExecutions = 0;
-         incrementTemplateExecutions() {
-           this.numTemplateExecutions++;
-           return '';
-         }
-       }
-
-       const fixture = TestBed.createComponent(OnPushCmp);
-       const instance = fixture.componentInstance;
-
-       fixture.detectChanges();
-       expect(instance.numTemplateExecutions).toBe(1);
-       expect(fixture.nativeElement.textContent.trim()).toEqual('child');
-
-       // The "state" signal is not accesses in the template's update function anywhere so it
-       // shouldn't mark components as dirty / impact change detection.
-       state.set('new');
-       fixture.detectChanges();
-       expect(instance.numTemplateExecutions).toBe(1);
-     });
-
-  it('should not mark components as dirty when signal is read in an input of a child component',
-     () => {
-       const state = signal('initial');
-
-       @Component({
-         selector: 'with-input-setter',
-         standalone: true,
-         template: '{{test}}',
-       })
-       class WithInputSetter {
-         test = '';
-
-         @Input()
-         set testInput(newValue: string) {
-           this.test = state() + ':' + newValue;
-         }
-       }
-
-       @Component({
-         template: `
+      changeDetection: ChangeDetectionStrategy.OnPush,
+      standalone: true,
+      imports: [NgIf, ChildReadingSignalCmp],
+    })
+    class OnPushCmp {
+      numTemplateExecutions = 0;
+      incrementTemplateExecutions() {
+        this.numTemplateExecutions++;
+        return '';
+      }
+    }
+
+    const fixture = TestBed.createComponent(OnPushCmp);
+    const instance = fixture.componentInstance;
+
+    fixture.detectChanges();
+    expect(instance.numTemplateExecutions).toBe(1);
+    expect(fixture.nativeElement.textContent.trim()).toEqual('child');
+
+    // The "state" signal is not accesses in the template's update function anywhere so it
+    // shouldn't mark components as dirty / impact change detection.
+    state.set('new');
+    fixture.detectChanges();
+    expect(instance.numTemplateExecutions).toBe(1);
+  });
+
+  it('should not mark components as dirty when signal is read in an input of a child component', () => {
+    const state = signal('initial');
+
+    @Component({
+      selector: 'with-input-setter',
+      standalone: true,
+      template: '{{test}}',
+    })
+    class WithInputSetter {
+      test = '';
+
+      @Input()
+      set testInput(newValue: string) {
+        this.test = state() + ':' + newValue;
+      }
+    }
+
+    @Component({
+      template: `
             {{incrementTemplateExecutions()}}
             <!-- Template constructed to execute child component constructor in the update pass of a host component -->
             <ng-template [ngIf]="true"><with-input-setter [testInput]="'input'" /></ng-template>
           `,
-         changeDetection: ChangeDetectionStrategy.OnPush,
-         standalone: true,
-         imports: [NgIf, WithInputSetter],
-       })
-       class OnPushCmp {
-         numTemplateExecutions = 0;
-         incrementTemplateExecutions() {
-           this.numTemplateExecutions++;
-           return '';
-         }
-       }
-
-       const fixture = TestBed.createComponent(OnPushCmp);
-       const instance = fixture.componentInstance;
-
-       fixture.detectChanges();
-       expect(instance.numTemplateExecutions).toBe(1);
-       expect(fixture.nativeElement.textContent.trim()).toEqual('initial:input');
-
-       // The "state" signal is not accesses in the template's update function anywhere so it
-       // shouldn't mark components as dirty / impact change detection.
-       state.set('new');
-       fixture.detectChanges();
-       expect(instance.numTemplateExecutions).toBe(1);
-       expect(fixture.nativeElement.textContent.trim()).toEqual('initial:input');
-     });
+      changeDetection: ChangeDetectionStrategy.OnPush,
+      standalone: true,
+      imports: [NgIf, WithInputSetter],
+    })
+    class OnPushCmp {
+      numTemplateExecutions = 0;
+      incrementTemplateExecutions() {
+        this.numTemplateExecutions++;
+        return '';
+      }
+    }
+
+    const fixture = TestBed.createComponent(OnPushCmp);
+    const instance = fixture.componentInstance;
+
+    fixture.detectChanges();
+    expect(instance.numTemplateExecutions).toBe(1);
+    expect(fixture.nativeElement.textContent.trim()).toEqual('initial:input');
+
+    // The "state" signal is not accesses in the template's update function anywhere so it
+    // shouldn't mark components as dirty / impact change detection.
+    state.set('new');
+    fixture.detectChanges();
+    expect(instance.numTemplateExecutions).toBe(1);
+    expect(fixture.nativeElement.textContent.trim()).toEqual('initial:input');
+  });
 
   it('should not mark components as dirty when signal is read in a query result setter', () => {
     const state = signal('initial');
@@ -465,10 +476,9 @@ describe('OnPush components with signals', () => {
       imports: [ChildCmp],
       standalone: true,
     })
-    class ParentCmp {
-    }
+    class ParentCmp {}
     const fixture = TestBed.createComponent(ParentCmp);
-    const child = fixture.debugElement.query(p => p.componentInstance instanceof ChildCmp);
+    const child = fixture.debugElement.query((p) => p.componentInstance instanceof ChildCmp);
     const childInstance = child.componentInstance as ChildCmp;
 
     fixture.detectChanges();
@@ -512,14 +522,13 @@ describe('OnPush components with signals', () => {
       imports: [ParentCmp],
       standalone: true,
     })
-    class TestWrapper {
-    }
+    class TestWrapper {}
 
     const fixture = TestBed.createComponent(TestWrapper);
-    const parent = fixture.debugElement.query(p => p.componentInstance instanceof ParentCmp)
-                       .componentInstance as ParentCmp;
-    const child = fixture.debugElement.query(p => p.componentInstance instanceof ChildCmp)
-                      .componentInstance as ChildCmp;
+    const parent = fixture.debugElement.query((p) => p.componentInstance instanceof ParentCmp)
+      .componentInstance as ParentCmp;
+    const child = fixture.debugElement.query((p) => p.componentInstance instanceof ChildCmp)
+      .componentInstance as ChildCmp;
 
     fixture.detectChanges();
     expect(fixture.nativeElement.outerHTML).toContain('initial');
@@ -540,39 +549,38 @@ describe('OnPush components with signals', () => {
     expect(fixture.nativeElement.outerHTML).not.toContain('blue');
   });
 
-  it('should be able to write to signals during change-detecting a given template, in advance()',
-     () => {
-       const counter = signal(0);
-
-       @Directive({
-         standalone: true,
-         selector: '[misunderstood]',
-       })
-       class MisunderstoodDir {
-         ngOnInit(): void {
-           counter.update((c) => c + 1);
-         }
-       }
-
-       @Component({
-         selector: 'test-component',
-         standalone: true,
-         imports: [MisunderstoodDir],
-         template: `
+  it('should be able to write to signals during change-detecting a given template, in advance()', () => {
+    const counter = signal(0);
+
+    @Directive({
+      standalone: true,
+      selector: '[misunderstood]',
+    })
+    class MisunderstoodDir {
+      ngOnInit(): void {
+        counter.update((c) => c + 1);
+      }
+    }
+
+    @Component({
+      selector: 'test-component',
+      standalone: true,
+      imports: [MisunderstoodDir],
+      template: `
           {{counter()}}<div misunderstood></div>{{ 'force advance()' }}
         `,
-       })
-       class TestCmp {
-         counter = counter;
-       }
-
-       const fixture = TestBed.createComponent(TestCmp);
-       // CheckNoChanges should not throw ExpressionChanged error
-       // and signal value is updated to latest value with 1 `detectChanges`
-       fixture.detectChanges();
-       expect(fixture.nativeElement.innerText).toContain('1');
-       expect(fixture.nativeElement.innerText).toContain('force advance()');
-     });
+    })
+    class TestCmp {
+      counter = counter;
+    }
+
+    const fixture = TestBed.createComponent(TestCmp);
+    // CheckNoChanges should not throw ExpressionChanged error
+    // and signal value is updated to latest value with 1 `detectChanges`
+    fixture.detectChanges();
+    expect(fixture.nativeElement.innerText).toContain('1');
+    expect(fixture.nativeElement.innerText).toContain('force advance()');
+  });
 
   it('should allow writing to signals during change-detecting a given template, at the end', () => {
     const counter = signal(0);
@@ -737,7 +745,6 @@ describe('OnPush components with signals', () => {
       expect(trim(fixture.nativeElement.textContent)).toEqual('new new new');
     });
 
-
     it('refreshes entire component, including embedded views, when signal updates', () => {
       @Component({
         selector: 'signal-component',
@@ -769,7 +776,6 @@ describe('OnPush components with signals', () => {
       expect(fixture.componentInstance.embeddedViewExecutions).toEqual(2);
     });
 
-
     it('re-executes deep embedded template if signal updates', () => {
       @Component({
         selector: 'signal-component',
@@ -868,18 +874,17 @@ describe('OnPush components with signals', () => {
     // Note: Design decision for signals because that's how the hooks work today
     // We have considered actually running a component's `afterViewChecked` hook if it's refreshed
     // in targeted mode (meaning the parent did not refresh) and could change this decision.
-    it('does not run afterViewChecked hooks because parent view was not dirty (those hooks are executed by the parent)',
-       () => {
-         const fixture = TestBed.createComponent(OnPushParent);
-         fixture.detectChanges();
-         // hook run once on initialization
-         expect(fixture.componentInstance.signalChild.afterViewCheckedRuns).toBe(1);
-         fixture.componentInstance.signalChild.value.set('new');
-         fixture.detectChanges();
-         expect(trim(fixture.nativeElement.textContent)).toEqual('new');
-         // hook did not run again because host view was not refreshed
-         expect(fixture.componentInstance.signalChild.afterViewCheckedRuns).toBe(1);
-       });
+    it('does not run afterViewChecked hooks because parent view was not dirty (those hooks are executed by the parent)', () => {
+      const fixture = TestBed.createComponent(OnPushParent);
+      fixture.detectChanges();
+      // hook run once on initialization
+      expect(fixture.componentInstance.signalChild.afterViewCheckedRuns).toBe(1);
+      fixture.componentInstance.signalChild.value.set('new');
+      fixture.detectChanges();
+      expect(trim(fixture.nativeElement.textContent)).toEqual('new');
+      // hook did not run again because host view was not refreshed
+      expect(fixture.componentInstance.signalChild.afterViewCheckedRuns).toBe(1);
+    });
   });
 
   it('can refresh the root of change detection if updated after checked', () => {
@@ -958,7 +963,6 @@ describe('OnPush components with signals', () => {
   });
 });
 
-
-function trim(text: string|null): string {
+function trim(text: string | null): string {
   return text ? text.replace(/[\s\n]+/gm, ' ').trim() : '';
 }
diff --git a/packages/core/test/acceptance/change_detection_spec.ts b/packages/core/test/acceptance/change_detection_spec.ts
index 176a1fa14fe52..6f7e394f7a676 100644
--- a/packages/core/test/acceptance/change_detection_spec.ts
+++ b/packages/core/test/acceptance/change_detection_spec.ts
@@ -6,9 +6,30 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {CommonModule} from '@angular/common';
-import {ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentRef, Directive, DoCheck, EmbeddedViewRef, ErrorHandler, EventEmitter, inject, Input, NgModule, OnInit, Output, QueryList, TemplateRef, Type, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
+import {
+  ApplicationRef,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ComponentRef,
+  Directive,
+  DoCheck,
+  EmbeddedViewRef,
+  ErrorHandler,
+  EventEmitter,
+  inject,
+  Input,
+  NgModule,
+  OnInit,
+  Output,
+  QueryList,
+  TemplateRef,
+  Type,
+  ViewChild,
+  ViewChildren,
+  ViewContainerRef,
+} from '@angular/core';
 import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 import {BehaviorSubject} from 'rxjs';
@@ -18,8 +39,10 @@ describe('change detection', () => {
     @Directive({selector: '[viewManipulation]', exportAs: 'vm'})
     class ViewManipulation {
       constructor(
-          private _tplRef: TemplateRef<{}>, public vcRef: ViewContainerRef,
-          private _appRef: ApplicationRef) {}
+        private _tplRef: TemplateRef<{}>,
+        public vcRef: ViewContainerRef,
+        private _appRef: ApplicationRef,
+      ) {}
 
       insertIntoVcRef() {
         return this.vcRef.createEmbeddedView(this._tplRef);
@@ -36,10 +59,9 @@ describe('change detection', () => {
       selector: 'test-cmp',
       template: `
         <ng-template #vm="vm" viewManipulation>{{'change-detected'}}</ng-template>
-      `
+      `,
     })
-    class TestCmpt {
-    }
+    class TestCmpt {}
 
     it('should detect changes for embedded views inserted through ViewContainerRef', () => {
       TestBed.configureTestingModule({declarations: [TestCmpt, ViewManipulation]});
@@ -71,7 +93,7 @@ describe('change detection', () => {
         selector: 'onpush',
         template: '',
         standalone: true,
-        changeDetection: ChangeDetectionStrategy.OnPush
+        changeDetection: ChangeDetectionStrategy.OnPush,
       })
       class OnPushComponent {
         checks = 0;
@@ -109,7 +131,7 @@ describe('change detection', () => {
         `,
       })
       class App {
-        increment(counter: 'componentView'|'embeddedView') {
+        increment(counter: 'componentView' | 'embeddedView') {
           counters[counter]++;
         }
       }
@@ -135,17 +157,16 @@ describe('change detection', () => {
 
       @Component({
         template: `<ng-template #vm="vm" viewManipulation></ng-template>`,
-        changeDetection: ChangeDetectionStrategy.OnPush
+        changeDetection: ChangeDetectionStrategy.OnPush,
       })
-      class App {
-      }
+      class App {}
 
       @Component({
         template: `
           <button (click)="noop()">Trigger change detection</button>
           <div>{{increment()}}</div>
         `,
-        changeDetection: ChangeDetectionStrategy.OnPush
+        changeDetection: ChangeDetectionStrategy.OnPush,
       })
       class DynamicComp {
         increment() {
@@ -203,7 +224,7 @@ describe('change detection', () => {
         selector: 'dynamic-cmpt',
         template: `dynamic|{{binding}}`,
         standalone: true,
-        changeDetection: ChangeDetectionStrategy.OnPush
+        changeDetection: ChangeDetectionStrategy.OnPush,
       })
       class DynamicCmpt {
         @Input() binding = 'binding';
@@ -251,7 +272,7 @@ describe('change detection', () => {
         template: '..',
         host: {
           '[class.x]': 'x',
-        }
+        },
       })
       class HasHostBinding {
         x = true;
@@ -284,8 +305,7 @@ describe('change detection', () => {
         selector: 'root',
         template: '<child [input]="3"></child>',
       })
-      class Root {
-      }
+      class Root {}
 
       TestBed.configureTestingModule({
         declarations: [Root, Child, HasHostBinding],
@@ -299,7 +319,7 @@ describe('change detection', () => {
     @Component({
       selector: 'my-comp',
       changeDetection: ChangeDetectionStrategy.OnPush,
-      template: `{{ doCheckCount }} - {{ name }} <button (click)="onClick()"></button>`
+      template: `{{ doCheckCount }} - {{ name }} <button (click)="onClick()"></button>`,
     })
     class MyComponent implements DoCheck {
       @Input() name = 'Nancy';
@@ -403,7 +423,7 @@ describe('change detection', () => {
     it('should not check OnPush components in update mode when parent events occur', () => {
       @Component({
         selector: 'button-parent',
-        template: '<my-comp></my-comp><button id="parent" (click)="noop()"></button>'
+        template: '<my-comp></my-comp><button id="parent" (click)="noop()"></button>',
       })
       class ButtonParent {
         @ViewChild(MyComponent) comp!: MyComponent;
@@ -429,7 +449,7 @@ describe('change detection', () => {
       @Component({
         selector: 'button-parent',
         template: '{{ doCheckCount }} - <my-comp></my-comp>',
-        changeDetection: ChangeDetectionStrategy.OnPush
+        changeDetection: ChangeDetectionStrategy.OnPush,
       })
       class ButtonParent implements DoCheck {
         @ViewChild(MyComponent) comp!: MyComponent;
@@ -476,40 +496,39 @@ describe('change detection', () => {
       expect(fixture.nativeElement.textContent.trim()).toEqual('3 - 2 - Nancy');
     });
 
-    it('should check parent OnPush components when child directive on a template emits event',
-       fakeAsync(() => {
-         @Directive({
-           selector: '[emitter]',
-         })
-         class Emitter {
-           @Output() event = new EventEmitter<string>();
-
-           ngOnInit() {
-             setTimeout(() => {
-               this.event.emit('new message');
-             });
-           }
-         }
-
-
-         @Component({
-           selector: 'my-app',
-           template: '{{message}} <ng-template emitter (event)="message = $event"></ng-template>',
-           changeDetection: ChangeDetectionStrategy.OnPush
-         })
-         class MyApp {
-           message = 'initial message';
-         }
-
-         const fixture = TestBed.configureTestingModule({declarations: [MyApp, Emitter]})
-                             .createComponent(MyApp);
-         fixture.detectChanges();
-
-         expect(fixture.nativeElement.textContent.trim()).toEqual('initial message');
-         tick();
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toEqual('new message');
-       }));
+    it('should check parent OnPush components when child directive on a template emits event', fakeAsync(() => {
+      @Directive({
+        selector: '[emitter]',
+      })
+      class Emitter {
+        @Output() event = new EventEmitter<string>();
+
+        ngOnInit() {
+          setTimeout(() => {
+            this.event.emit('new message');
+          });
+        }
+      }
+
+      @Component({
+        selector: 'my-app',
+        template: '{{message}} <ng-template emitter (event)="message = $event"></ng-template>',
+        changeDetection: ChangeDetectionStrategy.OnPush,
+      })
+      class MyApp {
+        message = 'initial message';
+      }
+
+      const fixture = TestBed.configureTestingModule({
+        declarations: [MyApp, Emitter],
+      }).createComponent(MyApp);
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.textContent.trim()).toEqual('initial message');
+      tick();
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toEqual('new message');
+    }));
   });
 
   describe('ChangeDetectorRef', () => {
@@ -517,7 +536,7 @@ describe('change detection', () => {
       @Component({
         selector: 'my-comp',
         template: '{{ name }}',
-        changeDetection: ChangeDetectionStrategy.OnPush
+        changeDetection: ChangeDetectionStrategy.OnPush,
       })
       class MyComp implements DoCheck {
         doCheckCount = 0;
@@ -548,19 +567,17 @@ describe('change detection', () => {
         constructor(public cdr: ChangeDetectorRef) {}
       }
 
-      it('should check the component view when called by component (even when OnPush && clean)',
-         () => {
-           TestBed.configureTestingModule({declarations: [MyComp]});
-           const fixture = TestBed.createComponent(MyComp);
-           fixture.detectChanges();
+      it('should check the component view when called by component (even when OnPush && clean)', () => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+        const fixture = TestBed.createComponent(MyComp);
+        fixture.detectChanges();
 
-           expect(fixture.nativeElement.textContent).toEqual('Nancy');
+        expect(fixture.nativeElement.textContent).toEqual('Nancy');
 
-           fixture.componentInstance.name =
-               'Bess';  // as this is not an Input, the component stays clean
-           fixture.componentInstance.cdr.detectChanges();
-           expect(fixture.nativeElement.textContent).toEqual('Bess');
-         });
+        fixture.componentInstance.name = 'Bess'; // as this is not an Input, the component stays clean
+        fixture.componentInstance.cdr.detectChanges();
+        expect(fixture.nativeElement.textContent).toEqual('Bess');
+      });
 
       it('should NOT call component doCheck when called by a component', () => {
         TestBed.configureTestingModule({declarations: [MyComp]});
@@ -589,20 +606,19 @@ describe('change detection', () => {
         expect(fixture.nativeElement.textContent).toEqual('1 - Nancy');
       });
 
-      it('should check component children when called by component if dirty or check-always',
-         () => {
-           TestBed.configureTestingModule({declarations: [MyComp, ParentComp]});
-           const fixture = TestBed.createComponent(ParentComp);
-           fixture.detectChanges();
-           expect(fixture.componentInstance.doCheckCount).toEqual(1);
-
-           fixture.componentInstance.myComp.name = 'Bess';
-           fixture.componentInstance.cdr.detectChanges();
-           expect(fixture.componentInstance.doCheckCount).toEqual(1);
-           expect(fixture.componentInstance.myComp.doCheckCount).toEqual(2);
-           // OnPush child is not dirty, so its change isn't rendered.
-           expect(fixture.nativeElement.textContent).toEqual('1 - Nancy');
-         });
+      it('should check component children when called by component if dirty or check-always', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, ParentComp]});
+        const fixture = TestBed.createComponent(ParentComp);
+        fixture.detectChanges();
+        expect(fixture.componentInstance.doCheckCount).toEqual(1);
+
+        fixture.componentInstance.myComp.name = 'Bess';
+        fixture.componentInstance.cdr.detectChanges();
+        expect(fixture.componentInstance.doCheckCount).toEqual(1);
+        expect(fixture.componentInstance.myComp.doCheckCount).toEqual(2);
+        // OnPush child is not dirty, so its change isn't rendered.
+        expect(fixture.nativeElement.textContent).toEqual('1 - Nancy');
+      });
 
       it('should not group detectChanges calls (call every time)', () => {
         TestBed.configureTestingModule({declarations: [MyComp, ParentComp]});
@@ -694,7 +710,7 @@ describe('change detection', () => {
         expect(fixture.nativeElement.textContent).toEqual('1');
       });
 
-      ['OnInit', 'AfterContentInit', 'AfterViewInit', 'OnChanges'].forEach(hook => {
+      ['OnInit', 'AfterContentInit', 'AfterViewInit', 'OnChanges'].forEach((hook) => {
         it(`should not go infinite loop when recursively called from children's ng${hook}`, () => {
           @Component({template: '<child-comp [inp]="true"></child-comp>'})
           class ParentComp {
@@ -767,7 +783,7 @@ describe('change detection', () => {
           selector: 'app',
           template: `
             <div *ngIf="visible" #ref>Visible text</div>
-          `
+          `,
         })
         class App {
           @ViewChildren('ref') ref!: QueryList<any>;
@@ -815,7 +831,7 @@ describe('change detection', () => {
         it('should support ViewRef.detectChanges()', () => {
           @Component({
             template:
-                '<ng-template #foo let-ctx="ctx">{{ ctx.value }}</ng-template><structural-comp [tmp]="foo"></structural-comp>'
+              '<ng-template #foo let-ctx="ctx">{{ ctx.value }}</ng-template><structural-comp [tmp]="foo"></structural-comp>',
           })
           class App {
             @ViewChild(StructuralComp) structuralComp!: StructuralComp;
@@ -844,7 +860,7 @@ describe('change detection', () => {
 
         it('should support ViewRef.detectChanges() directly after creation', () => {
           @Component({
-            template: '<ng-template #foo>Template text</ng-template><structural-comp [tmp]="foo">'
+            template: '<ng-template #foo>Template text</ng-template><structural-comp [tmp]="foo">',
           })
           class App {
             @ViewChild(StructuralComp) structuralComp!: StructuralComp;
@@ -977,7 +993,7 @@ describe('change detection', () => {
         @Component({
           selector: 'on-push-comp',
           template: '{{ value }}',
-          changeDetection: ChangeDetectionStrategy.OnPush
+          changeDetection: ChangeDetectionStrategy.OnPush,
         })
         class OnPushComp {
           @Input() value!: string;
@@ -1016,7 +1032,7 @@ describe('change detection', () => {
       @Component({
         selector: 'on-push-comp',
         template: '{{ value }}',
-        changeDetection: ChangeDetectionStrategy.OnPush
+        changeDetection: ChangeDetectionStrategy.OnPush,
       })
       class OnPushComp implements DoCheck {
         value = 'one';
@@ -1032,7 +1048,7 @@ describe('change detection', () => {
 
       @Component({
         template: '{{ value }} - <on-push-comp></on-push-comp>',
-        changeDetection: ChangeDetectionStrategy.OnPush
+        changeDetection: ChangeDetectionStrategy.OnPush,
       })
       class OnPushParent {
         @ViewChild(OnPushComp) comp!: OnPushComp;
@@ -1093,7 +1109,7 @@ describe('change detection', () => {
       it('should ensure OnPush components in embedded views are checked', () => {
         @Component({
           template: '{{ value }} - <on-push-comp *ngIf="showing"></on-push-comp>',
-          changeDetection: ChangeDetectionStrategy.OnPush
+          changeDetection: ChangeDetectionStrategy.OnPush,
         })
         class EmbeddedViewParent {
           @ViewChild(OnPushComp) comp!: OnPushComp;
@@ -1101,8 +1117,10 @@ describe('change detection', () => {
           showing = true;
         }
 
-        TestBed.configureTestingModule(
-            {declarations: [EmbeddedViewParent, OnPushComp], imports: [CommonModule]});
+        TestBed.configureTestingModule({
+          declarations: [EmbeddedViewParent, OnPushComp],
+          imports: [CommonModule],
+        });
         const fixture = TestBed.createComponent(EmbeddedViewParent);
         fixture.detectChanges();
 
@@ -1128,40 +1146,40 @@ describe('change detection', () => {
         expect(fixture.nativeElement.textContent).toEqual('two - two');
       });
 
-      it('async pipe should trigger CD for embedded views where the declaration and insertion views are different',
-         () => {
-           @Component({
-             selector: 'insertion',
-             changeDetection: ChangeDetectionStrategy.OnPush,
-             template: ` <ng-container [ngTemplateOutlet]="template"> </ng-container> `
-           })
-           class Insertion {
-             @Input() template!: TemplateRef<{}>;
-           }
-
-           // This component uses async pipe (which calls markForCheck) in a view that has different
-           // insertion and declaration views.
-           @Component({
-             changeDetection: ChangeDetectionStrategy.OnPush,
-             template: `
+      it('async pipe should trigger CD for embedded views where the declaration and insertion views are different', () => {
+        @Component({
+          selector: 'insertion',
+          changeDetection: ChangeDetectionStrategy.OnPush,
+          template: ` <ng-container [ngTemplateOutlet]="template"> </ng-container> `,
+        })
+        class Insertion {
+          @Input() template!: TemplateRef<{}>;
+        }
+
+        // This component uses async pipe (which calls markForCheck) in a view that has different
+        // insertion and declaration views.
+        @Component({
+          changeDetection: ChangeDetectionStrategy.OnPush,
+          template: `
           <insertion [template]="ref"></insertion>
           <ng-template #ref>
             <span>{{value | async}}</span>
           </ng-template>
-          `
-           })
-           class Declaration {
-             value = new BehaviorSubject('initial value');
-           }
-
-           const fixture = TestBed.configureTestingModule({declarations: [Insertion, Declaration]})
-                               .createComponent(Declaration);
-           fixture.detectChanges();
-           expect(fixture.debugElement.nativeElement.textContent).toContain('initial value');
-           fixture.componentInstance.value.next('new value');
-           fixture.detectChanges();
-           expect(fixture.debugElement.nativeElement.textContent).toContain('new value');
-         });
+          `,
+        })
+        class Declaration {
+          value = new BehaviorSubject('initial value');
+        }
+
+        const fixture = TestBed.configureTestingModule({
+          declarations: [Insertion, Declaration],
+        }).createComponent(Declaration);
+        fixture.detectChanges();
+        expect(fixture.debugElement.nativeElement.textContent).toContain('initial value');
+        fixture.componentInstance.value.next('new value');
+        fixture.detectChanges();
+        expect(fixture.debugElement.nativeElement.textContent).toContain('new value');
+      });
 
       // TODO(kara): add test for dynamic views once bug fix is in
     });
@@ -1211,27 +1229,27 @@ describe('change detection', () => {
       it('should throw if bindings in current view have changed', () => {
         TestBed.configureTestingModule({
           declarations: [NoChangesComp],
-          providers: [{provide: ErrorHandler, useClass: RethrowErrorHandler}]
+          providers: [{provide: ErrorHandler, useClass: RethrowErrorHandler}],
         });
         const fixture = TestBed.createComponent(NoChangesComp);
 
         expect(() => {
           fixture.componentInstance.cdr.checkNoChanges();
-        })
-            .toThrowError(
-                /ExpressionChangedAfterItHasBeenCheckedError: .+ Previous value: '.*undefined'. Current value: '.*1'/gi);
+        }).toThrowError(
+          /ExpressionChangedAfterItHasBeenCheckedError: .+ Previous value: '.*undefined'. Current value: '.*1'/gi,
+        );
       });
 
       it('should throw if interpolations in current view have changed', () => {
         TestBed.configureTestingModule({
           declarations: [AppComp, NoChangesComp],
-          providers: [{provide: ErrorHandler, useClass: RethrowErrorHandler}]
+          providers: [{provide: ErrorHandler, useClass: RethrowErrorHandler}],
         });
         const fixture = TestBed.createComponent(AppComp);
 
-        expect(() => fixture.componentInstance.cdr.checkNoChanges())
-            .toThrowError(
-                /ExpressionChangedAfterItHasBeenCheckedError: .+ Previous value: '.*undefined'. Current value: '.*1'/gi);
+        expect(() => fixture.componentInstance.cdr.checkNoChanges()).toThrowError(
+          /ExpressionChangedAfterItHasBeenCheckedError: .+ Previous value: '.*undefined'. Current value: '.*1'/gi,
+        );
       });
 
       it('should throw if bindings in embedded view have changed', () => {
@@ -1244,19 +1262,19 @@ describe('change detection', () => {
         TestBed.configureTestingModule({
           declarations: [EmbeddedViewApp],
           imports: [CommonModule],
-          providers: [{provide: ErrorHandler, useClass: RethrowErrorHandler}]
+          providers: [{provide: ErrorHandler, useClass: RethrowErrorHandler}],
         });
         const fixture = TestBed.createComponent(EmbeddedViewApp);
 
-        expect(() => fixture.componentInstance.cdr.checkNoChanges())
-            .toThrowError(
-                /ExpressionChangedAfterItHasBeenCheckedError: .+ Previous value: '.*undefined'. Current value: '.*true'/gi);
+        expect(() => fixture.componentInstance.cdr.checkNoChanges()).toThrowError(
+          /ExpressionChangedAfterItHasBeenCheckedError: .+ Previous value: '.*undefined'. Current value: '.*true'/gi,
+        );
       });
 
       it('should NOT call lifecycle hooks', () => {
         TestBed.configureTestingModule({
           declarations: [AppComp, NoChangesComp],
-          providers: [{provide: ErrorHandler, useClass: RethrowErrorHandler}]
+          providers: [{provide: ErrorHandler, useClass: RethrowErrorHandler}],
         });
 
         const fixture = TestBed.createComponent(AppComp);
@@ -1275,7 +1293,6 @@ describe('change detection', () => {
     });
   });
 
-
   describe('OnPush markForCheck in lifecycle hooks', () => {
     describe('with check no changes enabled', () => createOnPushMarkForCheckTests(true));
     describe('with check no changes disabled', () => createOnPushMarkForCheckTests(false));
@@ -1292,50 +1309,53 @@ describe('change detection', () => {
       //    cycle before "OnPushComp" is considered for refreshing. Hence marking as dirty from
       //    within such a hook can cause the component to checked/refreshed as intended.
       ['ngAfterViewInit', 'ngAfterViewChecked', 'ngAfterContentChecked', 'ngDoCheck'].forEach(
-          hookName => {
-            it(`should be able to mark component as dirty from within ${hookName}`, () => {
-              @Component({
-                selector: 'on-push-comp',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `<p>{{text}}</p>`,
-              })
-              class OnPushComp {
-                text = 'initial';
-
-                constructor(private _cdRef: ChangeDetectorRef) {}
-
-                [hookName]() {
-                  this._cdRef.markForCheck();
-                }
+        (hookName) => {
+          it(`should be able to mark component as dirty from within ${hookName}`, () => {
+            @Component({
+              selector: 'on-push-comp',
+              changeDetection: ChangeDetectionStrategy.OnPush,
+              template: `<p>{{text}}</p>`,
+            })
+            class OnPushComp {
+              text = 'initial';
+
+              constructor(private _cdRef: ChangeDetectorRef) {}
+
+              [hookName]() {
+                this._cdRef.markForCheck();
               }
+            }
 
-              @Component({template: `<on-push-comp></on-push-comp>`})
-              class TestApp {
-                @ViewChild(OnPushComp) onPushComp!: OnPushComp;
-              }
+            @Component({template: `<on-push-comp></on-push-comp>`})
+            class TestApp {
+              @ViewChild(OnPushComp) onPushComp!: OnPushComp;
+            }
 
-              TestBed.configureTestingModule(
-                  {declarations: [TestApp, OnPushComp], imports: [CommonModule]});
-              const fixture = TestBed.createComponent(TestApp);
-              const pElement = fixture.nativeElement.querySelector('p') as HTMLElement;
-
-              detectChanges(fixture);
-              expect(pElement.textContent).toBe('initial');
-
-              // "OnPushComp" component should be re-checked since it has been left dirty
-              // in the first change detection (through the lifecycle hook). Hence, setting
-              // a programmatic value and triggering a new change detection cycle should cause
-              // the text to be updated in the view.
-              fixture.componentInstance.onPushComp.text = 'new';
-              detectChanges(fixture);
-              expect(pElement.textContent).toBe('new');
+            TestBed.configureTestingModule({
+              declarations: [TestApp, OnPushComp],
+              imports: [CommonModule],
             });
+            const fixture = TestBed.createComponent(TestApp);
+            const pElement = fixture.nativeElement.querySelector('p') as HTMLElement;
+
+            detectChanges(fixture);
+            expect(pElement.textContent).toBe('initial');
+
+            // "OnPushComp" component should be re-checked since it has been left dirty
+            // in the first change detection (through the lifecycle hook). Hence, setting
+            // a programmatic value and triggering a new change detection cycle should cause
+            // the text to be updated in the view.
+            fixture.componentInstance.onPushComp.text = 'new';
+            detectChanges(fixture);
+            expect(pElement.textContent).toBe('new');
           });
+        },
+      );
 
       // ngOnInit and ngAfterContentInit lifecycle hooks run once before "OnPushComp" is
       // refreshed/checked. This means they cannot mark the component as dirty because the
       // component dirty state will immediately reset after these hooks complete.
-      ['ngOnInit', 'ngAfterContentInit'].forEach(hookName => {
+      ['ngOnInit', 'ngAfterContentInit'].forEach((hookName) => {
         it(`should not be able to mark component as dirty from within ${hookName}`, () => {
           @Component({
             selector: 'on-push-comp',
@@ -1357,8 +1377,10 @@ describe('change detection', () => {
             @ViewChild(OnPushComp) onPushComp!: OnPushComp;
           }
 
-          TestBed.configureTestingModule(
-              {declarations: [TestApp, OnPushComp], imports: [CommonModule]});
+          TestBed.configureTestingModule({
+            declarations: [TestApp, OnPushComp],
+            imports: [CommonModule],
+          });
           const fixture = TestBed.createComponent(TestApp);
           const pElement = fixture.nativeElement.querySelector('p') as HTMLElement;
 
@@ -1384,8 +1406,8 @@ describe('change detection', () => {
       unstableBooleanExpression: boolean = true;
       unstableStringExpression: string = 'initial';
       unstableColorExpression: string = 'red';
-      unstableStyleMapExpression: {[key: string]: string;} = {'color': 'red', 'margin': '10px'};
-      unstableClassMapExpression: {[key: string]: boolean;} = {'classA': true, 'classB': false};
+      unstableStyleMapExpression: {[key: string]: string} = {'color': 'red', 'margin': '10px'};
+      unstableClassMapExpression: {[key: string]: boolean} = {'classA': true, 'classB': false};
 
       ngAfterViewChecked() {
         this.unstableBooleanExpression = false;
@@ -1413,94 +1435,102 @@ describe('change detection', () => {
 
     it('should include field name in case of property binding', () => {
       const message = `Previous value for 'id': 'initial'. Current value: 'changed'`;
-      expect(() => initWithTemplate('<div [id]="unstableStringExpression"></div>'))
-          .toThrowError(new RegExp(message));
+      expect(() => initWithTemplate('<div [id]="unstableStringExpression"></div>')).toThrowError(
+        new RegExp(message),
+      );
     });
 
     it('should include field name in case of property interpolation', () => {
-      const message =
-          `Previous value for 'id': 'Expressions: a and initial!'. Current value: 'Expressions: a and changed!'`;
-      expect(
-          () => initWithTemplate(
-              '<div id="Expressions: {{ a }} and {{ unstableStringExpression }}!"></div>'))
-          .toThrowError(new RegExp(message));
+      const message = `Previous value for 'id': 'Expressions: a and initial!'. Current value: 'Expressions: a and changed!'`;
+      expect(() =>
+        initWithTemplate(
+          '<div id="Expressions: {{ a }} and {{ unstableStringExpression }}!"></div>',
+        ),
+      ).toThrowError(new RegExp(message));
     });
 
     it('should include field name in case of attribute binding', () => {
       const message = `Previous value for 'attr.id': 'initial'. Current value: 'changed'`;
-      expect(() => initWithTemplate('<div [attr.id]="unstableStringExpression"></div>'))
-          .toThrowError(new RegExp(message));
+      expect(() =>
+        initWithTemplate('<div [attr.id]="unstableStringExpression"></div>'),
+      ).toThrowError(new RegExp(message));
     });
 
     it('should include field name in case of attribute interpolation', () => {
-      const message =
-          `Previous value for 'attr.id': 'Expressions: a and initial!'. Current value: 'Expressions: a and changed!'`;
-      expect(
-          () => initWithTemplate(
-              '<div attr.id="Expressions: {{ a }} and {{ unstableStringExpression }}!"></div>'))
-          .toThrowError(new RegExp(message));
+      const message = `Previous value for 'attr.id': 'Expressions: a and initial!'. Current value: 'Expressions: a and changed!'`;
+      expect(() =>
+        initWithTemplate(
+          '<div attr.id="Expressions: {{ a }} and {{ unstableStringExpression }}!"></div>',
+        ),
+      ).toThrowError(new RegExp(message));
+    });
+
+    it('should only display a value of an expression that was changed in text interpolation', () => {
+      expect(() =>
+        initWithTemplate('Expressions: {{ a }} and {{ unstableStringExpression }}!'),
+      ).toThrowError(/Previous value: '.*?initial'. Current value: '.*?changed'/);
     });
 
-    it('should only display a value of an expression that was changed in text interpolation',
-       () => {
-         expect(() => initWithTemplate('Expressions: {{ a }} and {{ unstableStringExpression }}!'))
-             .toThrowError(/Previous value: '.*?initial'. Current value: '.*?changed'/);
-       });
-
-    it('should only display a value of an expression that was changed in text interpolation ' +
-           'that follows an element with property interpolation',
-       () => {
-         expect(() => {
-           initWithTemplate(`
+    it(
+      'should only display a value of an expression that was changed in text interpolation ' +
+        'that follows an element with property interpolation',
+      () => {
+        expect(() => {
+          initWithTemplate(`
              <div id="Prop interpolation: {{ aVal }}"></div>
              Text interpolation: {{ unstableStringExpression }}.
            `);
-         }).toThrowError(/Previous value: '.*?initial'. Current value: '.*?changed'/);
-       });
+        }).toThrowError(/Previous value: '.*?initial'. Current value: '.*?changed'/);
+      },
+    );
 
     it('should include style prop name in case of style binding', () => {
       const message = `Previous value for 'color': 'red'. Current value: 'green'`;
-      expect(() => initWithTemplate('<div [style.color]="unstableColorExpression"></div>'))
-          .toThrowError(new RegExp(message));
+      expect(() =>
+        initWithTemplate('<div [style.color]="unstableColorExpression"></div>'),
+      ).toThrowError(new RegExp(message));
     });
 
     it('should include class name in case of class binding', () => {
       const message = `Previous value for 'someClass': 'true'. Current value: 'false'`;
-      expect(() => initWithTemplate('<div [class.someClass]="unstableBooleanExpression"></div>'))
-          .toThrowError(new RegExp(message));
+      expect(() =>
+        initWithTemplate('<div [class.someClass]="unstableBooleanExpression"></div>'),
+      ).toThrowError(new RegExp(message));
+    });
+
+    it('should only display a value of an expression that was changed in text interpolation inside i18n block', () => {
+      expect(() =>
+        initWithTemplate('<div i18n>Expression: {{ unstableStringExpression }}</div>'),
+      ).toThrowError(/Previous value: '.*?initial'. Current value: '.*?changed'/);
     });
 
-    it('should only display a value of an expression that was changed in text interpolation inside i18n block',
-       () => {
-         expect(
-             () => initWithTemplate('<div i18n>Expression: {{ unstableStringExpression }}</div>'))
-             .toThrowError(/Previous value: '.*?initial'. Current value: '.*?changed'/);
-       });
-
-    it('should only display a value of an expression for interpolation inside an i18n property',
-       () => {
-         expect(
-             () => initWithTemplate(
-                 '<div i18n-title title="Expression: {{ unstableStringExpression }}"></div>'))
-             .toThrowError(/Previous value: '.*?initial'. Current value: '.*?changed'/);
-       });
+    it('should only display a value of an expression for interpolation inside an i18n property', () => {
+      expect(() =>
+        initWithTemplate(
+          '<div i18n-title title="Expression: {{ unstableStringExpression }}"></div>',
+        ),
+      ).toThrowError(/Previous value: '.*?initial'. Current value: '.*?changed'/);
+    });
 
     it('should include field name in case of host property binding', () => {
       const message = `Previous value for 'id': 'initial'. Current value: 'changed'`;
-      expect(() => initWithHostBindings({'[id]': 'unstableStringExpression'}))
-          .toThrowError(new RegExp(message));
+      expect(() => initWithHostBindings({'[id]': 'unstableStringExpression'})).toThrowError(
+        new RegExp(message),
+      );
     });
 
     it('should include style prop name in case of host style bindings', () => {
       const message = `Previous value for 'color': 'red'. Current value: 'green'`;
-      expect(() => initWithHostBindings({'[style.color]': 'unstableColorExpression'}))
-          .toThrowError(new RegExp(message));
+      expect(() => initWithHostBindings({'[style.color]': 'unstableColorExpression'})).toThrowError(
+        new RegExp(message),
+      );
     });
 
     it('should include class name in case of host class bindings', () => {
       const message = `Previous value for 'someClass': 'true'. Current value: 'false'`;
-      expect(() => initWithHostBindings({'[class.someClass]': 'unstableBooleanExpression'}))
-          .toThrowError(new RegExp(message));
+      expect(() =>
+        initWithHostBindings({'[class.someClass]': 'unstableBooleanExpression'}),
+      ).toThrowError(new RegExp(message));
     });
 
     // Note: the tests below currently fail in Ivy, but not in VE. VE behavior is correct and Ivy's
diff --git a/packages/core/test/acceptance/change_detection_transplanted_view_spec.ts b/packages/core/test/acceptance/change_detection_transplanted_view_spec.ts
index d9eb65af3ab6c..e6653321a1fa7 100644
--- a/packages/core/test/acceptance/change_detection_transplanted_view_spec.ts
+++ b/packages/core/test/acceptance/change_detection_transplanted_view_spec.ts
@@ -7,7 +7,27 @@
  */
 
 import {AsyncPipe, CommonModule, NgTemplateOutlet} from '@angular/common';
-import {AfterViewChecked, ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, createComponent, Directive, DoCheck, EmbeddedViewRef, EnvironmentInjector, ErrorHandler, inject, Input, signal, TemplateRef, Type, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  AfterViewChecked,
+  ApplicationRef,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  computed,
+  createComponent,
+  Directive,
+  DoCheck,
+  EmbeddedViewRef,
+  EnvironmentInjector,
+  ErrorHandler,
+  inject,
+  Input,
+  signal,
+  TemplateRef,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 import {of} from 'rxjs';
@@ -73,7 +93,7 @@ describe('change detection for transplanted views', () => {
         <ng-template #myTmpl let-greeting>
           {{greeting}} {{logName()}}!
         </ng-template>
-      `
+      `,
     })
     class CheckAlwaysDeclareComp extends DeclareComp {
       constructor(changeDetector: ChangeDetectorRef) {
@@ -89,7 +109,7 @@ describe('change detection for transplanted views', () => {
         <ng-template #myTmpl let-greeting>
           {{greeting}} {{logName()}}!
         </ng-template>`,
-      changeDetection: ChangeDetectionStrategy.OnPush
+      changeDetection: ChangeDetectionStrategy.OnPush,
     })
     class OnPushDeclareComp extends DeclareComp {
       constructor(changeDetector: ChangeDetectorRef) {
@@ -106,7 +126,7 @@ describe('change detection for transplanted views', () => {
           {{greeting}} {{surname()}}{{logExecutionContext()}}!
         </ng-template>
       `,
-      changeDetection: ChangeDetectionStrategy.OnPush
+      changeDetection: ChangeDetectionStrategy.OnPush,
     })
     class SignalOnPushDeclareComp {
       @ViewChild('myTmpl') myTmpl!: TemplateRef<any>;
@@ -143,7 +163,7 @@ describe('change detection for transplanted views', () => {
       <signal-onpush-declare-comp *ngIf="showSignalOnPushDeclare" />
 
       <onpush-insert-comp *ngIf="showOnPushInsert" />
-      `
+      `,
     })
     class AppComp {
       showCheckAlwaysDeclare = false;
@@ -155,8 +175,8 @@ describe('change detection for transplanted views', () => {
       }
     }
 
-    let viewExecutionLog!: Array<string|null>;
-    let logValue!: string|null;
+    let viewExecutionLog!: Array<string | null>;
+    let logValue!: string | null;
     let fixture!: ComponentFixture<AppComp>;
     let appComp!: AppComp;
     let onPushInsertComp!: OnPushInsertComp;
@@ -168,8 +188,11 @@ describe('change detection for transplanted views', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
         declarations: [
-          OnPushInsertComp, SignalOnPushDeclareComp, CheckAlwaysDeclareComp, OnPushDeclareComp,
-          AppComp
+          OnPushInsertComp,
+          SignalOnPushDeclareComp,
+          CheckAlwaysDeclareComp,
+          OnPushDeclareComp,
+          AppComp,
         ],
         imports: [CommonModule],
       });
@@ -187,8 +210,9 @@ describe('change detection for transplanted views', () => {
 
       it('should set up the component under test correctly', () => {
         expect(viewExecutionLog.length).toEqual(0);
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual('SignalOnPushDeclareComp(world) OnPushInsertComp(Hello) Hello templateName!');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'SignalOnPushDeclareComp(world) OnPushInsertComp(Hello) Hello templateName!',
+        );
       });
 
       it('should CD at insertion and declaration', () => {
@@ -197,26 +221,26 @@ describe('change detection for transplanted views', () => {
         expect(viewExecutionLog).toEqual(['Insert']);
         viewExecutionLog.length = 0;
         expect(trim(fixture.nativeElement.textContent))
-            .withContext(
-                'CD did not run on the transplanted template because it is inside an OnPush component and no signal changed')
-            .toEqual(
-                'SignalOnPushDeclareComp(Angular) OnPushInsertComp(Hello) Hello templateName!');
+          .withContext(
+            'CD did not run on the transplanted template because it is inside an OnPush component and no signal changed',
+          )
+          .toEqual('SignalOnPushDeclareComp(Angular) OnPushInsertComp(Hello) Hello templateName!');
 
         onPushInsertComp.greeting = 'Hi';
         fixture.detectChanges(false);
         expect(viewExecutionLog).toEqual([]);
         viewExecutionLog.length = 0;
         expect(trim(fixture.nativeElement.textContent))
-            .withContext('Insertion component is OnPush.')
-            .toEqual(
-                'SignalOnPushDeclareComp(Angular) OnPushInsertComp(Hello) Hello templateName!');
+          .withContext('Insertion component is OnPush.')
+          .toEqual('SignalOnPushDeclareComp(Angular) OnPushInsertComp(Hello) Hello templateName!');
 
         onPushInsertComp.changeDetectorRef.markForCheck();
         fixture.detectChanges(false);
         expect(viewExecutionLog).toEqual(['Insert']);
         viewExecutionLog.length = 0;
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual('SignalOnPushDeclareComp(Angular) OnPushInsertComp(Hi) Hi templateName!');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'SignalOnPushDeclareComp(Angular) OnPushInsertComp(Hi) Hi templateName!',
+        );
 
         // Destroy insertion should also destroy declaration
         appComp.showOnPushInsert = false;
@@ -230,9 +254,9 @@ describe('change detection for transplanted views', () => {
         fixture.detectChanges(false);
         expect(viewExecutionLog).toEqual(['Insert']);
         viewExecutionLog.length = 0;
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual(
-                'SignalOnPushDeclareComp(Angular) OnPushInsertComp(Hello) Hello templateName!');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'SignalOnPushDeclareComp(Angular) OnPushInsertComp(Hello) Hello templateName!',
+        );
       });
     });
 
@@ -246,8 +270,9 @@ describe('change detection for transplanted views', () => {
 
       it('should set up the component under test correctly', () => {
         expect(viewExecutionLog.length).toEqual(0);
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual('DeclareComp(world) OnPushInsertComp(Hello) Hello world!');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'DeclareComp(world) OnPushInsertComp(Hello) Hello world!',
+        );
       });
 
       it('should CD at insertion point only', () => {
@@ -255,26 +280,27 @@ describe('change detection for transplanted views', () => {
         fixture.detectChanges(false);
         expect(viewExecutionLog).toEqual(['Insert']);
         viewExecutionLog.length = 0;
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual(
-                'DeclareComp(Angular) OnPushInsertComp(Hello) Hello Angular!',
-                'Expect transplanted LView to be CD because the declaration is CD.');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'DeclareComp(Angular) OnPushInsertComp(Hello) Hello Angular!',
+          'Expect transplanted LView to be CD because the declaration is CD.',
+        );
 
         onPushInsertComp.greeting = 'Hi';
         fixture.detectChanges(false);
         expect(viewExecutionLog).toEqual(['Insert']);
         viewExecutionLog.length = 0;
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual(
-                'DeclareComp(Angular) OnPushInsertComp(Hello) Hello Angular!',
-                'expect no change because it is on push.');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'DeclareComp(Angular) OnPushInsertComp(Hello) Hello Angular!',
+          'expect no change because it is on push.',
+        );
 
         onPushInsertComp.changeDetectorRef.markForCheck();
         fixture.detectChanges(false);
         expect(viewExecutionLog).toEqual(['Insert']);
         viewExecutionLog.length = 0;
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual('DeclareComp(Angular) OnPushInsertComp(Hi) Hi Angular!');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'DeclareComp(Angular) OnPushInsertComp(Hi) Hi Angular!',
+        );
 
         // Destroy insertion should also destroy declaration
         appComp.showOnPushInsert = false;
@@ -288,8 +314,9 @@ describe('change detection for transplanted views', () => {
         fixture.detectChanges(false);
         expect(viewExecutionLog).toEqual(['Insert']);
         viewExecutionLog.length = 0;
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual('DeclareComp(Angular) OnPushInsertComp(Hello) Hello Angular!');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'DeclareComp(Angular) OnPushInsertComp(Hello) Hello Angular!',
+        );
 
         // Destroy declaration, But we should still be able to see updates in insertion
         appComp.showCheckAlwaysDeclare = false;
@@ -298,8 +325,9 @@ describe('change detection for transplanted views', () => {
         fixture.detectChanges(false);
         expect(viewExecutionLog).toEqual(['Insert']);
         viewExecutionLog.length = 0;
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual('OnPushInsertComp(Hello) Hello Angular!');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'OnPushInsertComp(Hello) Hello Angular!',
+        );
       });
 
       it('is not checked if detectChanges is called in declaration component', () => {
@@ -307,17 +335,21 @@ describe('change detection for transplanted views', () => {
         declareComp.changeDetector.detectChanges();
         expect(viewExecutionLog).toEqual([]);
         viewExecutionLog.length = 0;
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual('DeclareComp(Angular) OnPushInsertComp(Hello) Hello world!');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'DeclareComp(Angular) OnPushInsertComp(Hello) Hello world!',
+        );
       });
 
       it('is checked as part of CheckNoChanges pass', () => {
         fixture.detectChanges(true);
-        expect(viewExecutionLog)
-            .toEqual(['Insert', null /* logName set to null afterViewChecked */]);
+        expect(viewExecutionLog).toEqual([
+          'Insert',
+          null /* logName set to null afterViewChecked */,
+        ]);
         viewExecutionLog.length = 0;
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual('DeclareComp(world) OnPushInsertComp(Hello) Hello world!');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'DeclareComp(world) OnPushInsertComp(Hello) Hello world!',
+        );
       });
     });
 
@@ -331,8 +363,9 @@ describe('change detection for transplanted views', () => {
 
       it('should set up component under test correctly', () => {
         expect(viewExecutionLog.length).toEqual(0);
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual('OnPushDeclareComp(world) OnPushInsertComp(Hello) Hello world!');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'OnPushDeclareComp(world) OnPushInsertComp(Hello) Hello world!',
+        );
       });
 
       it('should not check anything when no views are dirty', () => {
@@ -348,16 +381,18 @@ describe('change detection for transplanted views', () => {
         fixture.detectChanges(false);
         expect(viewExecutionLog).toEqual(['Insert']);
         viewExecutionLog.length = 0;
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual('OnPushDeclareComp(Angular) OnPushInsertComp(Hello) Hello Angular!');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'OnPushDeclareComp(Angular) OnPushInsertComp(Hello) Hello Angular!',
+        );
 
         // mark insertion point dirty
         onPushInsertComp.changeDetectorRef.markForCheck();
         fixture.detectChanges(false);
         expect(viewExecutionLog).toEqual(['Insert']);
         viewExecutionLog.length = 0;
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual('OnPushDeclareComp(Angular) OnPushInsertComp(Hi) Hi Angular!');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'OnPushDeclareComp(Angular) OnPushInsertComp(Hi) Hi Angular!',
+        );
 
         // mark both insertion and declaration point dirty
         onPushInsertComp.changeDetectorRef.markForCheck();
@@ -370,8 +405,9 @@ describe('change detection for transplanted views', () => {
       it('is checked if detectChanges is called in declaration component', () => {
         onPushDeclareComp.name = 'Angular';
         onPushDeclareComp.changeDetector.detectChanges();
-        expect(trim(fixture.nativeElement.textContent))
-            .toEqual('OnPushDeclareComp(Angular) OnPushInsertComp(Hello) Hello world!');
+        expect(trim(fixture.nativeElement.textContent)).toEqual(
+          'OnPushDeclareComp(Angular) OnPushInsertComp(Hello) Hello world!',
+        );
       });
 
       // TODO(FW-1774): blocked by https://github.com/angular/angular/pull/34443
@@ -379,8 +415,10 @@ describe('change detection for transplanted views', () => {
         // mark declaration point dirty
         onPushDeclareComp.changeDetector.markForCheck();
         fixture.detectChanges(false);
-        expect(viewExecutionLog)
-            .toEqual(['Insert', null /* logName set to null in afterViewChecked */]);
+        expect(viewExecutionLog).toEqual([
+          'Insert',
+          null /* logName set to null in afterViewChecked */,
+        ]);
         viewExecutionLog.length = 0;
 
         // mark insertion point dirty
@@ -397,23 +435,22 @@ describe('change detection for transplanted views', () => {
         viewExecutionLog.length = 0;
       });
 
-      it('does not cause infinite change detection if transplanted view is dirty and destroyed before refresh',
-         () => {
-           // mark declaration point dirty
-           onPushDeclareComp.changeDetector.markForCheck();
-           // detach insertion so the transplanted view doesn't get refreshed when CD runs
-           onPushInsertComp.changeDetectorRef.detach();
-           // run CD, which will set the `RefreshView` flag on the transplanted view
-           fixture.detectChanges(false);
-           // reattach insertion so the DESCENDANT_VIEWS counters update
-           onPushInsertComp.changeDetectorRef.reattach();
-           // make it so the insertion is destroyed before getting refreshed
-           fixture.componentInstance.showOnPushInsert = false;
-           // run CD again. If we didn't clear the flag/counters when destroying the view, this
-           // would cause an infinite CD because the counters will be >1 but we will never reach a
-           // view to refresh and decrement the counters.
-           fixture.detectChanges(false);
-         });
+      it('does not cause infinite change detection if transplanted view is dirty and destroyed before refresh', () => {
+        // mark declaration point dirty
+        onPushDeclareComp.changeDetector.markForCheck();
+        // detach insertion so the transplanted view doesn't get refreshed when CD runs
+        onPushInsertComp.changeDetectorRef.detach();
+        // run CD, which will set the `RefreshView` flag on the transplanted view
+        fixture.detectChanges(false);
+        // reattach insertion so the DESCENDANT_VIEWS counters update
+        onPushInsertComp.changeDetectorRef.reattach();
+        // make it so the insertion is destroyed before getting refreshed
+        fixture.componentInstance.showOnPushInsert = false;
+        // run CD again. If we didn't clear the flag/counters when destroying the view, this
+        // would cause an infinite CD because the counters will be >1 but we will never reach a
+        // view to refresh and decrement the counters.
+        fixture.detectChanges(false);
+      });
     });
   });
 
@@ -424,7 +461,7 @@ describe('change detection for transplanted views', () => {
             <div>Insertion({{name}})</div>
             <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{$implicit: name}">
             </ng-container>`,
-      changeDetection: ChangeDetectionStrategy.OnPush
+      changeDetection: ChangeDetectionStrategy.OnPush,
     })
     class Insertion {
       @Input() template!: TemplateRef<{}>;
@@ -442,7 +479,7 @@ describe('change detection for transplanted views', () => {
             <div>TemplateContext({{contextName}})</div>
           </ng-template>
         `,
-      changeDetection: ChangeDetectionStrategy.OnPush
+      changeDetection: ChangeDetectionStrategy.OnPush,
     })
     class Declaration {
       @ViewChild('template') template?: TemplateRef<{}>;
@@ -461,7 +498,7 @@ describe('change detection for transplanted views', () => {
         <insertion *ngIf="showInsertion" [template]="declaration?.template">
         </insertion>
         <declaration></declaration>
-        `
+        `,
     })
     class App {
       @ViewChild(Declaration) declaration!: Declaration;
@@ -471,8 +508,9 @@ describe('change detection for transplanted views', () => {
     }
 
     beforeEach(() => {
-      fixture = TestBed.configureTestingModule({declarations: [App, Declaration, Insertion]})
-                    .createComponent(App);
+      fixture = TestBed.configureTestingModule({
+        declarations: [App, Declaration, Insertion],
+      }).createComponent(App);
       appComponent = fixture.componentInstance;
       fixture.detectChanges(false);
       appComponent.showInsertion = true;
@@ -481,24 +519,22 @@ describe('change detection for transplanted views', () => {
     });
 
     it('should set up component under test correctly', () => {
-      expect(fixture.nativeElement.textContent)
-          .toEqual(
-              'Insertion(initial)TemplateDeclaration(initial)TemplateContext(initial)Declaration(initial)');
+      expect(fixture.nativeElement.textContent).toEqual(
+        'Insertion(initial)TemplateDeclaration(initial)TemplateContext(initial)Declaration(initial)',
+      );
       expect(appComponent.declaration.transplantedViewRefreshCount).toEqual(0);
     });
 
-
-    it('should update declaration view when there is a change in the declaration and insertion is marked dirty',
-       () => {
-         appComponent.declaration.name = 'new name';
-         appComponent.insertion.changeDetectorRef.markForCheck();
-         fixture.detectChanges(false);
-         expect(fixture.nativeElement.textContent)
-             .toEqual(
-                 'Insertion(initial)TemplateDeclaration(new name)TemplateContext(initial)Declaration(initial)',
-                 'Name should not update in declaration view because only insertion was marked dirty');
-         expect(appComponent.declaration.transplantedViewRefreshCount).toEqual(1);
-       });
+    it('should update declaration view when there is a change in the declaration and insertion is marked dirty', () => {
+      appComponent.declaration.name = 'new name';
+      appComponent.insertion.changeDetectorRef.markForCheck();
+      fixture.detectChanges(false);
+      expect(fixture.nativeElement.textContent).toEqual(
+        'Insertion(initial)TemplateDeclaration(new name)TemplateContext(initial)Declaration(initial)',
+        'Name should not update in declaration view because only insertion was marked dirty',
+      );
+      expect(appComponent.declaration.transplantedViewRefreshCount).toEqual(1);
+    });
 
     it('updates the declaration view when there is a change to either declaration or insertion', () => {
       appComponent.declaration.name = 'new name';
@@ -506,7 +542,7 @@ describe('change detection for transplanted views', () => {
       fixture.detectChanges(false);
 
       const expectedContent =
-          'Insertion(initial)TemplateDeclaration(new name)TemplateContext(initial)Declaration(new name)';
+        'Insertion(initial)TemplateDeclaration(new name)TemplateContext(initial)Declaration(new name)';
       expect(fixture.nativeElement.textContent).toEqual(expectedContent);
       expect(appComponent.declaration.transplantedViewRefreshCount).toEqual(1);
     });
@@ -515,22 +551,21 @@ describe('change detection for transplanted views', () => {
       appComponent.insertion.name = 'new name';
       appComponent.declaration.changeDetectorRef.markForCheck();
       fixture.detectChanges(false);
-      expect(fixture.nativeElement.textContent)
-          .toEqual(
-              'Insertion(initial)TemplateDeclaration(initial)TemplateContext(initial)Declaration(initial)');
+      expect(fixture.nativeElement.textContent).toEqual(
+        'Insertion(initial)TemplateDeclaration(initial)TemplateContext(initial)Declaration(initial)',
+      );
       expect(appComponent.declaration.transplantedViewRefreshCount).toEqual(1);
     });
 
-    it('should update insertion view and template when there is a change to insertion and insertion marked dirty',
-       () => {
-         appComponent.insertion.name = 'new name';
-         appComponent.insertion.changeDetectorRef.markForCheck();
-         fixture.detectChanges(false);
-         expect(fixture.nativeElement.textContent)
-             .toEqual(
-                 'Insertion(new name)TemplateDeclaration(initial)TemplateContext(new name)Declaration(initial)');
-         expect(appComponent.declaration.transplantedViewRefreshCount).toEqual(1);
-       });
+    it('should update insertion view and template when there is a change to insertion and insertion marked dirty', () => {
+      appComponent.insertion.name = 'new name';
+      appComponent.insertion.changeDetectorRef.markForCheck();
+      fixture.detectChanges(false);
+      expect(fixture.nativeElement.textContent).toEqual(
+        'Insertion(new name)TemplateDeclaration(initial)TemplateContext(new name)Declaration(initial)',
+      );
+      expect(appComponent.declaration.transplantedViewRefreshCount).toEqual(1);
+    });
 
     it('should not refresh the template if nothing is marked dirty', () => {
       fixture.detectChanges(false);
@@ -542,16 +577,17 @@ describe('change detection for transplanted views', () => {
       appComponent.insertion.changeDetectorRef.markForCheck();
       fixture.detectChanges(false);
       expect(appComponent.declaration.transplantedViewRefreshCount)
-          .withContext(
-              'Should refresh twice because insertion executes and then declaration marks transplanted view dirty again')
-          .toEqual(2);
+        .withContext(
+          'Should refresh twice because insertion executes and then declaration marks transplanted view dirty again',
+        )
+        .toEqual(2);
     });
   });
 
   describe('transplanted views shielded by OnPush', () => {
     @Component({
       selector: 'check-always-insertion',
-      template: `<ng-container [ngTemplateOutlet]="template"></ng-container>`
+      template: `<ng-container [ngTemplateOutlet]="template"></ng-container>`,
     })
     class CheckAlwaysInsertion {
       @Input() template!: TemplateRef<{}>;
@@ -560,7 +596,7 @@ describe('change detection for transplanted views', () => {
     @Component({
       selector: 'on-push-insertion-host',
       template: `<check-always-insertion [template]="template"></check-always-insertion>`,
-      changeDetection: ChangeDetectionStrategy.OnPush
+      changeDetection: ChangeDetectionStrategy.OnPush,
     })
     class OnPushInsertionHost {
       @Input() template!: TemplateRef<{}>;
@@ -571,7 +607,7 @@ describe('change detection for transplanted views', () => {
       <ng-template #template>{{value}}</ng-template>
       <on-push-insertion-host [template]="template"></on-push-insertion-host>
       `,
-      changeDetection: ChangeDetectionStrategy.OnPush
+      changeDetection: ChangeDetectionStrategy.OnPush,
     })
     class OnPushDeclaration {
       @ViewChild(OnPushInsertionHost) onPushInsertionHost?: OnPushInsertionHost;
@@ -593,7 +629,7 @@ describe('change detection for transplanted views', () => {
       template: `
       <ng-template #template>{{value}}</ng-template>
       <on-push-insertion-host [template]="template"></on-push-insertion-host>
-      `
+      `,
     })
     class CheckAlwaysDeclaration {
       @ViewChild(OnPushInsertionHost) onPushInsertionHost?: OnPushInsertionHost;
@@ -601,13 +637,14 @@ describe('change detection for transplanted views', () => {
     }
 
     function getFixture<T>(componentUnderTest: Type<T>): ComponentFixture<T> {
-      return TestBed
-          .configureTestingModule({
-            declarations: [
-              CheckAlwaysDeclaration, OnPushDeclaration, CheckAlwaysInsertion, OnPushInsertionHost
-            ]
-          })
-          .createComponent(componentUnderTest);
+      return TestBed.configureTestingModule({
+        declarations: [
+          CheckAlwaysDeclaration,
+          OnPushDeclaration,
+          CheckAlwaysInsertion,
+          OnPushInsertionHost,
+        ],
+      }).createComponent(componentUnderTest);
     }
 
     it('can recover from errors thrown during change detection', () => {
@@ -668,7 +705,7 @@ describe('change detection for transplanted views', () => {
     @Component({
       selector: 'triple',
       template: '<div *ngFor="let unused of [1,2,3]; template: template"></div>',
-      changeDetection: ChangeDetectionStrategy.OnPush
+      changeDetection: ChangeDetectionStrategy.OnPush,
     })
     class TripleTemplate {
       @Input() template!: TemplateRef<{}>;
@@ -678,22 +715,23 @@ describe('change detection for transplanted views', () => {
       template: `
         <ng-template #template>{{name}}</ng-template>
         <triple [template]="template"></triple>
-      `
+      `,
     })
     class App {
       name = 'Penny';
     }
 
-    const fixture =
-        TestBed.configureTestingModule({declarations: [App, TripleTemplate]}).createComponent(App);
+    const fixture = TestBed.configureTestingModule({
+      declarations: [App, TripleTemplate],
+    }).createComponent(App);
     fixture.detectChanges();
     expect(fixture.nativeElement.textContent).toEqual('PennyPennyPenny');
     fixture.componentInstance.name = 'Sheldon';
     fixture.detectChanges();
-    expect(fixture.nativeElement.textContent)
-        .toEqual(
-            'SheldonSheldonSheldon',
-            'Expected transplanted view to be refreshed even when insertion is not dirty');
+    expect(fixture.nativeElement.textContent).toEqual(
+      'SheldonSheldonSheldon',
+      'Expected transplanted view to be refreshed even when insertion is not dirty',
+    );
   });
 
   describe('ViewRef and ViewContainerRef operations', () => {
@@ -702,7 +740,9 @@ describe('change detection for transplanted views', () => {
       @ViewChild(TemplateRef) templateRef!: TemplateRef<{}>;
 
       constructor(
-          readonly rootViewContainerRef: ViewContainerRef, readonly cdr: ChangeDetectorRef) {}
+        readonly rootViewContainerRef: ViewContainerRef,
+        readonly cdr: ChangeDetectorRef,
+      ) {}
 
       checks = 0;
       incrementChecks() {
@@ -714,8 +754,9 @@ describe('change detection for transplanted views', () => {
     let component: AppComponent;
     let viewRef: EmbeddedViewRef<{}>;
     beforeEach(() => {
-      fixture = TestBed.configureTestingModule({declarations: [AppComponent]})
-                    .createComponent(AppComponent);
+      fixture = TestBed.configureTestingModule({declarations: [AppComponent]}).createComponent(
+        AppComponent,
+      );
       component = fixture.componentInstance;
       fixture.detectChanges();
       viewRef = component.templateRef.createEmbeddedView({});
@@ -737,44 +778,42 @@ describe('change detection for transplanted views', () => {
       expect(component.checks).toEqual(1);
     });
 
-    it('should work when change detecting detached transplanted view already marked for refresh',
-       () => {
-         // detach the viewRef only. This just removes the LViewFlags.Attached rather than actually
-         // detaching the view from the container.
-         viewRef.detach();
-         // Calling detectChanges marks transplanted views for check
-         component.cdr.detectChanges();
-         expect(() => {
-           // Calling detectChanges on the transplanted view itself will clear the refresh flag. It
-           // _should not_ also attempt to update the parent counters because it's detached and
-           // should not affect parent counters.
-           viewRef.detectChanges();
-         }).not.toThrow();
-         expect(component.checks).toEqual(1);
-       });
-
-    it('should work when re-inserting a previously detached transplanted view marked for refresh',
-       () => {
-         // Test case for inserting a view with refresh flag
-         viewRef.detach();
-         // mark transplanted views for check but does not refresh transplanted view because it is
-         // detached
-         component.cdr.detectChanges();
-         // reattach view itself
-         viewRef.reattach();
-         expect(() => {
-           // detach and reattach view from ViewContainerRef
-           component.rootViewContainerRef.detach();
-           component.rootViewContainerRef.insert(viewRef);
-           // calling detectChanges will clear the refresh flag. If the above operations messed up
-           // the counter, this would fail when attempted to decrement.
-           fixture.detectChanges(false);
-         }).not.toThrow();
-         // The transplanted view gets refreshed twice because it's actually inserted "backwards"
-         // The view is defined in AppComponent but inserted in its ViewContainerRef (as an
-         // embedded view in AppComponent's host view).
-         expect(component.checks).toEqual(2);
-       });
+    it('should work when change detecting detached transplanted view already marked for refresh', () => {
+      // detach the viewRef only. This just removes the LViewFlags.Attached rather than actually
+      // detaching the view from the container.
+      viewRef.detach();
+      // Calling detectChanges marks transplanted views for check
+      component.cdr.detectChanges();
+      expect(() => {
+        // Calling detectChanges on the transplanted view itself will clear the refresh flag. It
+        // _should not_ also attempt to update the parent counters because it's detached and
+        // should not affect parent counters.
+        viewRef.detectChanges();
+      }).not.toThrow();
+      expect(component.checks).toEqual(1);
+    });
+
+    it('should work when re-inserting a previously detached transplanted view marked for refresh', () => {
+      // Test case for inserting a view with refresh flag
+      viewRef.detach();
+      // mark transplanted views for check but does not refresh transplanted view because it is
+      // detached
+      component.cdr.detectChanges();
+      // reattach view itself
+      viewRef.reattach();
+      expect(() => {
+        // detach and reattach view from ViewContainerRef
+        component.rootViewContainerRef.detach();
+        component.rootViewContainerRef.insert(viewRef);
+        // calling detectChanges will clear the refresh flag. If the above operations messed up
+        // the counter, this would fail when attempted to decrement.
+        fixture.detectChanges(false);
+      }).not.toThrow();
+      // The transplanted view gets refreshed twice because it's actually inserted "backwards"
+      // The view is defined in AppComponent but inserted in its ViewContainerRef (as an
+      // embedded view in AppComponent's host view).
+      expect(component.checks).toEqual(2);
+    });
 
     it('should work when detaching an attached transplanted view with the refresh flag', () => {
       viewRef.detach();
@@ -805,14 +844,13 @@ describe('change detection for transplanted views', () => {
     });
   });
 
-
   describe('when detached', () => {
     @Component({
       selector: 'on-push-component',
       template: `
           <ng-container #vc></ng-container>
         `,
-      changeDetection: ChangeDetectionStrategy.OnPush
+      changeDetection: ChangeDetectionStrategy.OnPush,
     })
     class OnPushComponent {
       @ViewChild('vc', {read: ViewContainerRef}) viewContainer!: ViewContainerRef;
@@ -847,7 +885,7 @@ describe('change detection for transplanted views', () => {
       <ng-template #transplantedTemplate>{{ incrementChecks() }}</ng-template>
       <on-push-component [template]="transplantedTemplate"></on-push-component>
       <check-always-component [template]="transplantedTemplate"></check-always-component>
-        `
+        `,
     })
     class App {
       @ViewChild(OnPushComponent) onPushComponent!: OnPushComponent;
@@ -943,7 +981,7 @@ describe('change detection for transplanted views', () => {
           <ng-template #transplantedTemplate></ng-template>
           <insertion [template]="transplantedTemplate"></insertion>
         `,
-        imports: [Insertion]
+        imports: [Insertion],
       })
       class Root {
         readonly cdr = inject(ChangeDetectorRef);
@@ -959,7 +997,7 @@ describe('change detection for transplanted views', () => {
         standalone: true,
         selector: 'insertion',
         template: `<ng-container #vc></ng-container>`,
-        changeDetection: ChangeDetectionStrategy.OnPush
+        changeDetection: ChangeDetectionStrategy.OnPush,
       })
       class Insertion {
         @ViewChild('vc', {read: ViewContainerRef, static: true}) viewContainer!: ViewContainerRef;
@@ -986,7 +1024,7 @@ describe('change detection for transplanted views', () => {
           <declaration [value]="value"></declaration>
           {{incrementChecks()}}
         `,
-        imports: [Insertion, Declaration]
+        imports: [Insertion, Declaration],
       })
       class Root {
         @ViewChild(Declaration, {static: true}) declaration!: Declaration;
@@ -1014,60 +1052,61 @@ describe('change detection for transplanted views', () => {
     });
   });
 
-  it('can use AsyncPipe on new Observable in insertion tree when used as backwards reference',
-     () => {
-       @Component({
-         selector: 'insertion',
-         imports: [NgTemplateOutlet],
-         standalone: true,
-         template: ` <ng-container [ngTemplateOutlet]="template"> </ng-container>`,
-       })
-       class Insertion {
-         @Input() template!: TemplateRef<{}>;
-         constructor(readonly changeDetectorRef: ChangeDetectorRef) {}
-       }
-
-       @Component({
-         imports: [Insertion, AsyncPipe],
-         template: `<ng-template #myTmpl> {{newObservable() | async}} </ng-template>`,
-         standalone: true,
-         selector: 'declaration'
-       })
-       class Declaration {
-         @ViewChild('myTmpl', {static: true}) template!: TemplateRef<{}>;
-         newObservable() {
-           return of('');
-         }
-       }
-       @Component({
-         standalone: true,
-         imports: [Declaration, Insertion],
-         template: '<insertion [template]="declaration.template"/><declaration #declaration/>'
-       })
-       class App {
-       }
-
-       TestBed.configureTestingModule({
-         providers: [{
-           provide: ErrorHandler, useClass: class extends ErrorHandler {
-             override handleError(e: any) {
-               throw e;
-             }
-           }
-         }]
-       });
-
-       const app = createComponent(App, {environmentInjector: TestBed.inject(EnvironmentInjector)});
-       const appRef = TestBed.inject(ApplicationRef);
-       appRef.attachView(app.hostView);
-       // ApplicationRef has a loop to continue refreshing dirty views. If done incorrectly,
-       // refreshing the backwards reference transplanted view can cause an infinite loop because it
-       // goes and marks the root view dirty, which then starts the process all over again by
-       // checking the declaration.
-       expect(() => appRef.tick()).not.toThrow();
-     });
+  it('can use AsyncPipe on new Observable in insertion tree when used as backwards reference', () => {
+    @Component({
+      selector: 'insertion',
+      imports: [NgTemplateOutlet],
+      standalone: true,
+      template: ` <ng-container [ngTemplateOutlet]="template"> </ng-container>`,
+    })
+    class Insertion {
+      @Input() template!: TemplateRef<{}>;
+      constructor(readonly changeDetectorRef: ChangeDetectorRef) {}
+    }
+
+    @Component({
+      imports: [Insertion, AsyncPipe],
+      template: `<ng-template #myTmpl> {{newObservable() | async}} </ng-template>`,
+      standalone: true,
+      selector: 'declaration',
+    })
+    class Declaration {
+      @ViewChild('myTmpl', {static: true}) template!: TemplateRef<{}>;
+      newObservable() {
+        return of('');
+      }
+    }
+    @Component({
+      standalone: true,
+      imports: [Declaration, Insertion],
+      template: '<insertion [template]="declaration.template"/><declaration #declaration/>',
+    })
+    class App {}
+
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: ErrorHandler,
+          useClass: class extends ErrorHandler {
+            override handleError(e: any) {
+              throw e;
+            }
+          },
+        },
+      ],
+    });
+
+    const app = createComponent(App, {environmentInjector: TestBed.inject(EnvironmentInjector)});
+    const appRef = TestBed.inject(ApplicationRef);
+    appRef.attachView(app.hostView);
+    // ApplicationRef has a loop to continue refreshing dirty views. If done incorrectly,
+    // refreshing the backwards reference transplanted view can cause an infinite loop because it
+    // goes and marks the root view dirty, which then starts the process all over again by
+    // checking the declaration.
+    expect(() => appRef.tick()).not.toThrow();
+  });
 });
 
-function trim(text: string|null): string {
+function trim(text: string | null): string {
   return text ? text.replace(/[\s\n]+/gm, ' ').trim() : '';
 }
diff --git a/packages/core/test/acceptance/common_integration_spec.ts b/packages/core/test/acceptance/common_integration_spec.ts
index c51ef1340264a..013f462e3e356 100644
--- a/packages/core/test/acceptance/common_integration_spec.ts
+++ b/packages/core/test/acceptance/common_integration_spec.ts
@@ -13,12 +13,10 @@ import {By} from '@angular/platform-browser';
 describe('@angular/common integration', () => {
   describe('NgForOf', () => {
     @Directive({selector: '[dir]'})
-    class MyDirective {
-    }
+    class MyDirective {}
 
     @Component({selector: 'app-child', template: '<div dir>comp text</div>'})
-    class ChildComponent {
-    }
+    class ChildComponent {}
 
     @Component({selector: 'app-root', template: ''})
     class AppComponent {
@@ -31,18 +29,21 @@ describe('@angular/common integration', () => {
 
     it('should update a loop', () => {
       TestBed.overrideTemplate(
-          AppComponent, '<ul><li *ngFor="let item of items">{{item}}</li></ul>');
+        AppComponent,
+        '<ul><li *ngFor="let item of items">{{item}}</li></ul>',
+      );
       const fixture = TestBed.createComponent(AppComponent);
       fixture.detectChanges();
 
-      let listItems =
-          Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
-      expect(listItems.map(li => li.textContent)).toEqual(['first', 'second']);
+      let listItems = Array.from(
+        (fixture.nativeElement as HTMLUListElement).querySelectorAll('li'),
+      );
+      expect(listItems.map((li) => li.textContent)).toEqual(['first', 'second']);
 
       // change detection cycle, no model changes
       fixture.detectChanges();
       listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
-      expect(listItems.map(li => li.textContent)).toEqual(['first', 'second']);
+      expect(listItems.map((li) => li.textContent)).toEqual(['first', 'second']);
 
       // remove the last item
       const items = fixture.componentInstance.items;
@@ -50,39 +51,43 @@ describe('@angular/common integration', () => {
       fixture.detectChanges();
 
       listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
-      expect(listItems.map(li => li.textContent)).toEqual(['first']);
+      expect(listItems.map((li) => li.textContent)).toEqual(['first']);
 
       // change an item
       items[0] = 'one';
       fixture.detectChanges();
       listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
-      expect(listItems.map(li => li.textContent)).toEqual(['one']);
+      expect(listItems.map((li) => li.textContent)).toEqual(['one']);
 
       // add an item
       items.push('two');
       fixture.detectChanges();
       listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
-      expect(listItems.map(li => li.textContent)).toEqual(['one', 'two']);
+      expect(listItems.map((li) => li.textContent)).toEqual(['one', 'two']);
     });
 
     it('should support ngForOf context variables', () => {
       TestBed.overrideTemplate(
-          AppComponent,
-          '<ul><li *ngFor="let item of items; index as myIndex; count as myCount">{{myIndex}} of {{myCount}}: {{item}}</li></ul>');
+        AppComponent,
+        '<ul><li *ngFor="let item of items; index as myIndex; count as myCount">{{myIndex}} of {{myCount}}: {{item}}</li></ul>',
+      );
       const fixture = TestBed.createComponent(AppComponent);
       fixture.detectChanges();
 
-      let listItems =
-          Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
-      expect(listItems.map(li => li.textContent)).toEqual(['0 of 2: first', '1 of 2: second']);
+      let listItems = Array.from(
+        (fixture.nativeElement as HTMLUListElement).querySelectorAll('li'),
+      );
+      expect(listItems.map((li) => li.textContent)).toEqual(['0 of 2: first', '1 of 2: second']);
 
       // add an item in the middle
       const items = fixture.componentInstance.items;
       items.splice(1, 0, 'middle');
       fixture.detectChanges();
       listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
-      expect(listItems.map(li => li.textContent)).toEqual([
-        '0 of 3: first', '1 of 3: middle', '2 of 3: second'
+      expect(listItems.map((li) => li.textContent)).toEqual([
+        '0 of 3: first',
+        '1 of 3: middle',
+        '2 of 3: second',
       ]);
     });
 
@@ -95,8 +100,9 @@ describe('@angular/common integration', () => {
 
       // expect 2 children, each one with a directive
       expect(children.length).toBe(2);
-      expect(children.map(child => child.nativeElement.innerHTML)).toEqual([
-        '<div dir="">comp text</div>', '<div dir="">comp text</div>'
+      expect(children.map((child) => child.nativeElement.innerHTML)).toEqual([
+        '<div dir="">comp text</div>',
+        '<div dir="">comp text</div>',
       ]);
       let directive = children[0].query(By.directive(MyDirective));
       expect(directive).not.toBeNull();
@@ -111,8 +117,10 @@ describe('@angular/common integration', () => {
       const childrenAfterAdd = fixture.debugElement.queryAll(By.directive(ChildComponent));
 
       expect(childrenAfterAdd.length).toBe(3);
-      expect(childrenAfterAdd.map(child => child.nativeElement.innerHTML)).toEqual([
-        '<div dir="">comp text</div>', '<div dir="">comp text</div>', '<div dir="">comp text</div>'
+      expect(childrenAfterAdd.map((child) => child.nativeElement.innerHTML)).toEqual([
+        '<div dir="">comp text</div>',
+        '<div dir="">comp text</div>',
+        '<div dir="">comp text</div>',
       ]);
       directive = childrenAfterAdd[2].query(By.directive(MyDirective));
       expect(directive).not.toBeNull();
@@ -124,7 +132,7 @@ describe('@angular/common integration', () => {
         template: `<button (click)="toggle()">Toggle List</button>
          <ul>
             <li *ngFor="let item of items">{{item}}</li>
-         </ul>`
+         </ul>`,
       })
       class ToggleComponent {
         private _data: number[] = [1, 2, 3];
@@ -144,8 +152,9 @@ describe('@angular/common integration', () => {
       fixture.detectChanges();
 
       // no elements in the list
-      let listItems =
-          Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
+      let listItems = Array.from(
+        (fixture.nativeElement as HTMLUListElement).querySelectorAll('li'),
+      );
       expect(listItems.length).toBe(0);
 
       // this will fill the list
@@ -153,7 +162,7 @@ describe('@angular/common integration', () => {
       fixture.detectChanges();
       listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
       expect(listItems.length).toBe(3);
-      expect(listItems.map(li => li.textContent)).toEqual(['1', '2', '3']);
+      expect(listItems.map((li) => li.textContent)).toEqual(['1', '2', '3']);
 
       // now toggle via the button
       const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
@@ -176,10 +185,13 @@ describe('@angular/common integration', () => {
           <li *ngFor="let row of items">
             <span *ngFor="let cell of row.data">{{cell}} - {{ row.value }} - {{ items.length }}</span>
           </li>
-       </ul>`
+       </ul>`,
       })
       class MultiLevelComponent {
-        items: any[] = [{data: ['1', '2'], value: 'first'}, {data: ['3', '4'], value: 'second'}];
+        items: any[] = [
+          {data: ['1', '2'], value: 'first'},
+          {data: ['3', '4'], value: 'second'},
+        ];
       }
 
       TestBed.configureTestingModule({declarations: [MultiLevelComponent]});
@@ -187,13 +199,17 @@ describe('@angular/common integration', () => {
       fixture.detectChanges();
 
       // change detection cycle, no model changes
-      let listItems =
-          Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
+      let listItems = Array.from(
+        (fixture.nativeElement as HTMLUListElement).querySelectorAll('li'),
+      );
       expect(listItems.length).toBe(2);
       let spanItems = Array.from(listItems[0].querySelectorAll('span'));
-      expect(spanItems.map(span => span.textContent)).toEqual(['1 - first - 2', '2 - first - 2']);
+      expect(spanItems.map((span) => span.textContent)).toEqual(['1 - first - 2', '2 - first - 2']);
       spanItems = Array.from(listItems[1].querySelectorAll('span'));
-      expect(spanItems.map(span => span.textContent)).toEqual(['3 - second - 2', '4 - second - 2']);
+      expect(spanItems.map((span) => span.textContent)).toEqual([
+        '3 - second - 2',
+        '4 - second - 2',
+      ]);
 
       // remove the last item
       const items = fixture.componentInstance.items;
@@ -203,7 +219,7 @@ describe('@angular/common integration', () => {
       listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
       expect(listItems.length).toBe(1);
       spanItems = Array.from(listItems[0].querySelectorAll('span'));
-      expect(spanItems.map(span => span.textContent)).toEqual(['1 - first - 1', '2 - first - 1']);
+      expect(spanItems.map((span) => span.textContent)).toEqual(['1 - first - 1', '2 - first - 1']);
 
       // change an item
       items[0].data[0] = 'one';
@@ -212,7 +228,10 @@ describe('@angular/common integration', () => {
       listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
       expect(listItems.length).toBe(1);
       spanItems = Array.from(listItems[0].querySelectorAll('span'));
-      expect(spanItems.map(span => span.textContent)).toEqual(['one - first - 1', '2 - first - 1']);
+      expect(spanItems.map((span) => span.textContent)).toEqual([
+        'one - first - 1',
+        '2 - first - 1',
+      ]);
 
       // add an item
       items[1] = {data: ['three', '4'], value: 'third'};
@@ -221,10 +240,14 @@ describe('@angular/common integration', () => {
       listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
       expect(listItems.length).toBe(2);
       spanItems = Array.from(listItems[0].querySelectorAll('span'));
-      expect(spanItems.map(span => span.textContent)).toEqual(['one - first - 2', '2 - first - 2']);
+      expect(spanItems.map((span) => span.textContent)).toEqual([
+        'one - first - 2',
+        '2 - first - 2',
+      ]);
       spanItems = Array.from(listItems[1].querySelectorAll('span'));
-      expect(spanItems.map(span => span.textContent)).toEqual([
-        'three - third - 2', '4 - third - 2'
+      expect(spanItems.map((span) => span.textContent)).toEqual([
+        'three - third - 2',
+        '4 - third - 2',
       ]);
     });
 
@@ -236,7 +259,7 @@ describe('@angular/common integration', () => {
             <span (click)="onClick(row.value, name)"></span>
             {{ row.value }} - {{ name }}
           </p>
-        </div>`
+        </div>`,
       })
       class MultiLevelWithListenerComponent {
         items: any[] = [{data: ['1'], value: 'first'}];
@@ -275,16 +298,16 @@ describe('@angular/common integration', () => {
            <div *ngFor="let cell of row">
               <span *ngFor="let span of cell.data">{{ cell.value }} - {{ name }}</span>
            </div>
-        </div>`
+        </div>`,
       })
       class SkippingContextComponent {
         name = 'app';
         items: any[] = [
           [
             // row
-            {value: 'one', data: ['1', '2']}  // cell
+            {value: 'one', data: ['1', '2']}, // cell
           ],
-          [{value: 'two', data: ['3', '4']}]
+          [{value: 'two', data: ['3', '4']}],
         ];
       }
 
@@ -326,81 +349,111 @@ describe('@angular/common integration', () => {
                    </span>
                </span>
             </span>
-         </div>`
+         </div>`,
       })
       class NineLevelsComponent {
         value = 'App';
         items: any[] = [
           {
             // item0
-            data: [{
-              // item1
-              data: [{
-                // item2
-                data: [{
-                  // item3
-                  data: [{
-                    // item4
-                    data: [{
-                      // item5
-                      data: [{
-                        // item6
-                        data: [{
-                          // item7
-                          data: [
-                            '1', '2'  // item8
-                          ],
-                          value: 'h'
-                        }],
-                        value: 'g'
-                      }],
-                      value: 'f'
-                    }],
-                    value: 'e'
-                  }],
-                  value: 'd'
-                }],
-                value: 'c'
-              }],
-              value: 'b'
-            }],
-            value: 'a'
+            data: [
+              {
+                // item1
+                data: [
+                  {
+                    // item2
+                    data: [
+                      {
+                        // item3
+                        data: [
+                          {
+                            // item4
+                            data: [
+                              {
+                                // item5
+                                data: [
+                                  {
+                                    // item6
+                                    data: [
+                                      {
+                                        // item7
+                                        data: [
+                                          '1',
+                                          '2', // item8
+                                        ],
+                                        value: 'h',
+                                      },
+                                    ],
+                                    value: 'g',
+                                  },
+                                ],
+                                value: 'f',
+                              },
+                            ],
+                            value: 'e',
+                          },
+                        ],
+                        value: 'd',
+                      },
+                    ],
+                    value: 'c',
+                  },
+                ],
+                value: 'b',
+              },
+            ],
+            value: 'a',
           },
           {
             // item0
-            data: [{
-              // item1
-              data: [{
-                // item2
-                data: [{
-                  // item3
-                  data: [{
-                    // item4
-                    data: [{
-                      // item5
-                      data: [{
-                        // item6
-                        data: [{
-                          // item7
-                          data: [
-                            '3', '4'  // item8
-                          ],
-                          value: 'H'
-                        }],
-                        value: 'G'
-                      }],
-                      value: 'F'
-                    }],
-                    value: 'E'
-                  }],
-                  value: 'D'
-                }],
-                value: 'C'
-              }],
-              value: 'B'
-            }],
-            value: 'A'
-          }
+            data: [
+              {
+                // item1
+                data: [
+                  {
+                    // item2
+                    data: [
+                      {
+                        // item3
+                        data: [
+                          {
+                            // item4
+                            data: [
+                              {
+                                // item5
+                                data: [
+                                  {
+                                    // item6
+                                    data: [
+                                      {
+                                        // item7
+                                        data: [
+                                          '3',
+                                          '4', // item8
+                                        ],
+                                        value: 'H',
+                                      },
+                                    ],
+                                    value: 'G',
+                                  },
+                                ],
+                                value: 'F',
+                              },
+                            ],
+                            value: 'E',
+                          },
+                        ],
+                        value: 'D',
+                      },
+                    ],
+                    value: 'C',
+                  },
+                ],
+                value: 'B',
+              },
+            ],
+            value: 'A',
+          },
         ];
       }
 
@@ -409,15 +462,17 @@ describe('@angular/common integration', () => {
       fixture.detectChanges();
 
       const divItems = (fixture.nativeElement as HTMLElement).querySelectorAll('div');
-      expect(divItems.length).toBe(2);  // 2 outer loops
-      let spanItems =
-          divItems[0].querySelectorAll('span > span > span > span > span > span > span > span');
-      expect(spanItems.length).toBe(2);  // 2 inner elements
+      expect(divItems.length).toBe(2); // 2 outer loops
+      let spanItems = divItems[0].querySelectorAll(
+        'span > span > span > span > span > span > span > span',
+      );
+      expect(spanItems.length).toBe(2); // 2 inner elements
       expect(spanItems[0].textContent).toBe('1.h.g.f.e.d.c.b.a.App');
       expect(spanItems[1].textContent).toBe('2.h.g.f.e.d.c.b.a.App');
-      spanItems =
-          divItems[1].querySelectorAll('span > span > span > span > span > span > span > span');
-      expect(spanItems.length).toBe(2);  // 2 inner elements
+      spanItems = divItems[1].querySelectorAll(
+        'span > span > span > span > span > span > span > span',
+      );
+      expect(spanItems.length).toBe(2); // 2 inner elements
       expect(spanItems[0].textContent).toBe('3.H.G.F.E.D.C.B.A.App');
       expect(spanItems[1].textContent).toBe('4.H.G.F.E.D.C.B.A.App');
     });
@@ -430,7 +485,7 @@ describe('@angular/common integration', () => {
         template: `
           <div *ngIf="showing">{{ valueOne }}</div>
           <div *ngIf="showing">{{ valueTwo }}</div>
-        `
+        `,
       })
       class SimpleConditionComponent {
         showing = true;
@@ -462,7 +517,7 @@ describe('@angular/common integration', () => {
               <div *ngIf="innerShowing">{{ name }}</div>
             </div>
           </div>
-        `
+        `,
       })
       class NestedConditionsComponent {
         showing = true;
@@ -491,7 +546,7 @@ describe('@angular/common integration', () => {
         selector: 'app-multi',
         template: `<ng-template #tpl>from tpl</ng-template>
           <ng-template [ngTemplateOutlet]="showing ? tpl : null"></ng-template>
-        `
+        `,
       })
       class EmbeddedViewsComponent {
         showing = false;
@@ -517,7 +572,7 @@ describe('@angular/common integration', () => {
         selector: 'app-multi',
         template: `<ng-template #tpl>from tpl</ng-template>
           <ng-container [ngTemplateOutlet]="showing ? tpl : null"></ng-container>
-        `
+        `,
       })
       class NgContainerComponent {
         showing = false;
diff --git a/packages/core/test/acceptance/component_spec.ts b/packages/core/test/acceptance/component_spec.ts
index a8a7160d54bbd..8cbe7f12934ac 100644
--- a/packages/core/test/acceptance/component_spec.ts
+++ b/packages/core/test/acceptance/component_spec.ts
@@ -7,14 +7,40 @@
  */
 
 import {DOCUMENT, NgIf} from '@angular/common';
-import {ApplicationRef, Component, ComponentRef, createComponent, createEnvironmentInjector, Directive, ElementRef, EmbeddedViewRef, EnvironmentInjector, forwardRef, inject, Injectable, InjectionToken, Injector, Input, NgModule, OnDestroy, reflectComponentType, Renderer2, Type, ViewChild, ViewContainerRef, ViewEncapsulation, ɵsetClassDebugInfo, ɵsetDocument, ɵɵdefineComponent} from '@angular/core';
+import {
+  ApplicationRef,
+  Component,
+  ComponentRef,
+  createComponent,
+  createEnvironmentInjector,
+  Directive,
+  ElementRef,
+  EmbeddedViewRef,
+  EnvironmentInjector,
+  forwardRef,
+  inject,
+  Injectable,
+  InjectionToken,
+  Injector,
+  Input,
+  NgModule,
+  OnDestroy,
+  reflectComponentType,
+  Renderer2,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+  ViewEncapsulation,
+  ɵsetClassDebugInfo,
+  ɵsetDocument,
+  ɵɵdefineComponent,
+} from '@angular/core';
 import {stringifyForError} from '@angular/core/src/render3/util/stringify_utils';
 import {TestBed} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
 import {global} from '../../src/util/global';
 
-
 describe('component', () => {
   describe('view destruction', () => {
     it('should invoke onDestroy only once when a component is registered as a provider', () => {
@@ -24,7 +50,7 @@ describe('component', () => {
       @Component({
         selector: 'comp-with-on-destroy',
         template: '',
-        providers: [{provide: testToken, useExisting: ParentWithOnDestroy}]
+        providers: [{provide: testToken, useExisting: ParentWithOnDestroy}],
       })
       class ParentWithOnDestroy {
         ngOnDestroy() {
@@ -43,10 +69,9 @@ describe('component', () => {
           <comp-with-on-destroy>
             <child></child>
           </comp-with-on-destroy>
-        `
+        `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, ParentWithOnDestroy, ChildComponent]});
       const fixture = TestBed.createComponent(App);
@@ -57,98 +82,93 @@ describe('component', () => {
     });
   });
 
-  it('should be able to dynamically insert a component into a view container at the root of a component',
-     () => {
-       @Component({template: 'hello'})
-       class HelloComponent {
-       }
+  it('should be able to dynamically insert a component into a view container at the root of a component', () => {
+    @Component({template: 'hello'})
+    class HelloComponent {}
 
-       @Component({selector: 'wrapper', template: '<ng-content></ng-content>'})
-       class Wrapper {
-       }
+    @Component({selector: 'wrapper', template: '<ng-content></ng-content>'})
+    class Wrapper {}
 
-       @Component({
-         template: `
+    @Component({
+      template: `
             <wrapper>
               <div #insertionPoint></div>
             </wrapper>
-          `
-       })
-       class App {
-         @ViewChild('insertionPoint', {read: ViewContainerRef}) viewContainerRef!: ViewContainerRef;
-       }
-
-       TestBed.configureTestingModule({declarations: [App, Wrapper, HelloComponent]});
-       const fixture = TestBed.createComponent(App);
-       fixture.detectChanges();
-
-       const instance = fixture.componentInstance;
-       instance.viewContainerRef.createComponent(HelloComponent);
-
-       expect(fixture.nativeElement.textContent.trim()).toBe('hello');
-     });
-
-  it('should not throw when calling `detectChanges` on the ChangeDetectorRef of a destroyed view',
-     () => {
-       @Component({template: 'hello'})
-       class HelloComponent {
-       }
-
-       @Component({template: `<div #insertionPoint></div>`})
-       class App {
-         @ViewChild('insertionPoint', {read: ViewContainerRef}) viewContainerRef!: ViewContainerRef;
-       }
-
-       TestBed.configureTestingModule({declarations: [App, HelloComponent]});
-       const fixture = TestBed.createComponent(App);
-       fixture.detectChanges();
-
-       const componentRef =
-           fixture.componentInstance.viewContainerRef.createComponent(HelloComponent);
-       fixture.detectChanges();
-
-       expect(() => {
-         componentRef.destroy();
-         componentRef.changeDetectorRef.detectChanges();
-       }).not.toThrow();
-     });
+          `,
+    })
+    class App {
+      @ViewChild('insertionPoint', {read: ViewContainerRef}) viewContainerRef!: ViewContainerRef;
+    }
+
+    TestBed.configureTestingModule({declarations: [App, Wrapper, HelloComponent]});
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    const instance = fixture.componentInstance;
+    instance.viewContainerRef.createComponent(HelloComponent);
+
+    expect(fixture.nativeElement.textContent.trim()).toBe('hello');
+  });
+
+  it('should not throw when calling `detectChanges` on the ChangeDetectorRef of a destroyed view', () => {
+    @Component({template: 'hello'})
+    class HelloComponent {}
+
+    @Component({template: `<div #insertionPoint></div>`})
+    class App {
+      @ViewChild('insertionPoint', {read: ViewContainerRef}) viewContainerRef!: ViewContainerRef;
+    }
+
+    TestBed.configureTestingModule({declarations: [App, HelloComponent]});
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    const componentRef = fixture.componentInstance.viewContainerRef.createComponent(HelloComponent);
+    fixture.detectChanges();
+
+    expect(() => {
+      componentRef.destroy();
+      componentRef.changeDetectorRef.detectChanges();
+    }).not.toThrow();
+  });
 
   // TODO: add tests with Native once tests run in real browser (domino doesn't support shadow root)
   describe('encapsulation', () => {
     @Component({
       selector: 'wrapper',
       encapsulation: ViewEncapsulation.None,
-      template: `<encapsulated></encapsulated>`
+      template: `<encapsulated></encapsulated>`,
     })
-    class WrapperComponent {
-    }
+    class WrapperComponent {}
 
     @Component({
       selector: 'encapsulated',
       encapsulation: ViewEncapsulation.Emulated,
       // styles array must contain a value (even empty) to trigger `ViewEncapsulation.Emulated`
       styles: [``],
-      template: `foo<leaf></leaf>`
+      template: `foo<leaf></leaf>`,
     })
-    class EncapsulatedComponent {
-    }
+    class EncapsulatedComponent {}
 
-    @Component(
-        {selector: 'leaf', encapsulation: ViewEncapsulation.None, template: `<span>bar</span>`})
-    class LeafComponent {
-    }
+    @Component({
+      selector: 'leaf',
+      encapsulation: ViewEncapsulation.None,
+      template: `<span>bar</span>`,
+    })
+    class LeafComponent {}
 
     beforeEach(() => {
-      TestBed.configureTestingModule(
-          {declarations: [WrapperComponent, EncapsulatedComponent, LeafComponent]});
+      TestBed.configureTestingModule({
+        declarations: [WrapperComponent, EncapsulatedComponent, LeafComponent],
+      });
     });
 
     it('should encapsulate children, but not host nor grand children', () => {
       const fixture = TestBed.createComponent(WrapperComponent);
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toMatch(
-              /<encapsulated _nghost-[a-z\-]+(\d+)="">foo<leaf _ngcontent-[a-z\-]+\1=""><span>bar<\/span><\/leaf><\/encapsulated>/);
+      expect(fixture.nativeElement.innerHTML).toMatch(
+        /<encapsulated _nghost-[a-z\-]+(\d+)="">foo<leaf _ngcontent-[a-z\-]+\1=""><span>bar<\/span><\/leaf><\/encapsulated>/,
+      );
     });
 
     it('should encapsulate host', () => {
@@ -162,8 +182,9 @@ describe('component', () => {
 
     it('should encapsulate host and children with different attributes', () => {
       // styles array must contain a value (even empty) to trigger `ViewEncapsulation.Emulated`
-      TestBed.overrideComponent(
-          LeafComponent, {set: {encapsulation: ViewEncapsulation.Emulated, styles: [``]}});
+      TestBed.overrideComponent(LeafComponent, {
+        set: {encapsulation: ViewEncapsulation.Emulated, styles: [``]},
+      });
       const fixture = TestBed.createComponent(EncapsulatedComponent);
       fixture.detectChanges();
       const html = fixture.nativeElement.outerHTML;
@@ -171,8 +192,11 @@ describe('component', () => {
       expect(match).toBeDefined();
       expect(match.length).toEqual(2);
       expect(html).toMatch(
-          `<leaf ${match[0].replace('_nghost', '_ngcontent')}="" ${match[1]}=""><span ${
-              match[1].replace('_nghost', '_ngcontent')}="">bar</span></leaf></div>`);
+        `<leaf ${match[0].replace('_nghost', '_ngcontent')}="" ${match[1]}=""><span ${match[1].replace(
+          '_nghost',
+          '_ngcontent',
+        )}="">bar</span></leaf></div>`,
+      );
     });
   });
 
@@ -192,142 +216,147 @@ describe('component', () => {
       // child of the root view, then the onDestroy hook on the child view will never be called
       // when the view tree is torn down following the destruction of that root view.
       @Component({selector: `test-app`, template: `<comp-with-destroy></comp-with-destroy>`})
-      class TestApp {
-      }
+      class TestApp {}
 
       TestBed.configureTestingModule({declarations: [ComponentWithOnDestroy, TestApp]});
       const fixture = TestBed.createComponent(TestApp);
       fixture.detectChanges();
       fixture.destroy();
-      expect(wasOnDestroyCalled)
-          .toBe(
-              true,
-              'Expected component onDestroy method to be called when its parent view is destroyed');
+      expect(wasOnDestroyCalled).toBe(
+        true,
+        'Expected component onDestroy method to be called when its parent view is destroyed',
+      );
     });
   });
 
-  it('should clear the contents of dynamically created component when it\'s attached to ApplicationRef',
-     () => {
-       let wasOnDestroyCalled = false;
-       @Component({
-         selector: '[comp]',
-         template: 'comp content',
-       })
-       class DynamicComponent {
-         ngOnDestroy() {
-           wasOnDestroyCalled = true;
-         }
-       }
-
-       @Component({
-         selector: 'button',
-         template: `
+  it("should clear the contents of dynamically created component when it's attached to ApplicationRef", () => {
+    let wasOnDestroyCalled = false;
+    @Component({
+      selector: '[comp]',
+      template: 'comp content',
+    })
+    class DynamicComponent {
+      ngOnDestroy() {
+        wasOnDestroyCalled = true;
+      }
+    }
+
+    @Component({
+      selector: 'button',
+      template: `
            <div class="wrapper"></div>
            <div id="app-root"></div>
            <div class="wrapper"></div>
          `,
-       })
-       class App {
-         componentRef!: ComponentRef<DynamicComponent>;
-
-         constructor(
-             private injector: EnvironmentInjector, private appRef: ApplicationRef,
-             private elementRef: ElementRef) {}
-
-         create() {
-           // Component to be bootstrapped into an element with the `app-root` id.
-           this.componentRef = createComponent(DynamicComponent, {
-             environmentInjector: this.injector,
-             hostElement: this.elementRef.nativeElement.querySelector('#app-root')!
-           });
-           this.appRef.attachView(this.componentRef.hostView);
-         }
-
-         destroy() {
-           this.componentRef.destroy();
-         }
-       }
-
-       TestBed.configureTestingModule({declarations: [App, DynamicComponent]});
-       const fixture = TestBed.createComponent(App);
-       fixture.detectChanges();
-
-       let appRootEl = fixture.nativeElement.querySelector('#app-root');
-       expect(appRootEl).toBeDefined();
-       expect(appRootEl.innerHTML).toBe('');  // app container content is empty
-
-       fixture.componentInstance.create();
-
-       appRootEl = fixture.nativeElement.querySelector('#app-root');
-       expect(appRootEl).toBeDefined();
-       expect(appRootEl.innerHTML).toBe('comp content');
-
-       fixture.componentInstance.destroy();
-       fixture.detectChanges();
-
-       appRootEl = fixture.nativeElement.querySelector('#app-root');
-       expect(appRootEl).toBeFalsy();  // host element is removed
-       const wrapperEls = fixture.nativeElement.querySelectorAll('.wrapper');
-       expect(wrapperEls.length).toBe(2);  // other elements are preserved
-     });
+    })
+    class App {
+      componentRef!: ComponentRef<DynamicComponent>;
+
+      constructor(
+        private injector: EnvironmentInjector,
+        private appRef: ApplicationRef,
+        private elementRef: ElementRef,
+      ) {}
+
+      create() {
+        // Component to be bootstrapped into an element with the `app-root` id.
+        this.componentRef = createComponent(DynamicComponent, {
+          environmentInjector: this.injector,
+          hostElement: this.elementRef.nativeElement.querySelector('#app-root')!,
+        });
+        this.appRef.attachView(this.componentRef.hostView);
+      }
+
+      destroy() {
+        this.componentRef.destroy();
+      }
+    }
+
+    TestBed.configureTestingModule({declarations: [App, DynamicComponent]});
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    let appRootEl = fixture.nativeElement.querySelector('#app-root');
+    expect(appRootEl).toBeDefined();
+    expect(appRootEl.innerHTML).toBe(''); // app container content is empty
+
+    fixture.componentInstance.create();
+
+    appRootEl = fixture.nativeElement.querySelector('#app-root');
+    expect(appRootEl).toBeDefined();
+    expect(appRootEl.innerHTML).toBe('comp content');
+
+    fixture.componentInstance.destroy();
+    fixture.detectChanges();
+
+    appRootEl = fixture.nativeElement.querySelector('#app-root');
+    expect(appRootEl).toBeFalsy(); // host element is removed
+    const wrapperEls = fixture.nativeElement.querySelectorAll('.wrapper');
+    expect(wrapperEls.length).toBe(2); // other elements are preserved
+  });
 
   describe('with ngDevMode', () => {
     const _global: {ngDevMode: any} = global;
     let saveNgDevMode!: typeof ngDevMode;
-    beforeEach(() => saveNgDevMode = ngDevMode);
-    afterEach(() => _global.ngDevMode = saveNgDevMode);
+    beforeEach(() => (saveNgDevMode = ngDevMode));
+    afterEach(() => (_global.ngDevMode = saveNgDevMode));
     // In dev mode we have some additional logic to freeze `TView.cleanup` array
     // (see `storeCleanupWithContext` function).
     // The tests below verify that this action doesn't trigger any change in behaviour
     // for prod mode. See https://github.com/angular/angular/issues/40105.
     ['ngDevMode off', 'ngDevMode on'].forEach((mode) => {
-      it('should invoke `onDestroy` callbacks of dynamically created component with ' + mode,
-         () => {
-           if (mode === 'ngDevMode off') {
-             _global.ngDevMode = false;
-           }
-           let wasOnDestroyCalled = false;
-           @Component({
-             selector: '[comp]',
-             template: 'comp content',
-           })
-           class DynamicComponent {
-           }
-
-           @Component({
-             selector: 'button',
-             template: '<div id="app-root" #anchor></div>',
-           })
-           class App {
-             @ViewChild('anchor', {read: ViewContainerRef}) anchor!: ViewContainerRef;
-
-             constructor(private vcr: ViewContainerRef, private injector: Injector) {}
-
-             create() {
-               const componentRef =
-                   this.vcr.createComponent(DynamicComponent, {injector: this.injector});
-               componentRef.onDestroy(() => {
-                 wasOnDestroyCalled = true;
-               });
-               this.anchor.insert(componentRef.hostView);
-             }
-
-             clear() {
-               this.anchor.clear();
-             }
-           }
-
-           TestBed.configureTestingModule({declarations: [App, DynamicComponent]});
-           const fixture = TestBed.createComponent(App);
-           fixture.detectChanges();
-
-           // Add ComponentRef to ViewContainerRef instance.
-           fixture.componentInstance.create();
-           // Clear ViewContainerRef to invoke `onDestroy` callbacks on ComponentRef.
-           fixture.componentInstance.clear();
-
-           expect(wasOnDestroyCalled).toBeTrue();
-         });
+      it(
+        'should invoke `onDestroy` callbacks of dynamically created component with ' + mode,
+        () => {
+          if (mode === 'ngDevMode off') {
+            _global.ngDevMode = false;
+          }
+          let wasOnDestroyCalled = false;
+          @Component({
+            selector: '[comp]',
+            template: 'comp content',
+          })
+          class DynamicComponent {}
+
+          @Component({
+            selector: 'button',
+            template: '<div id="app-root" #anchor></div>',
+          })
+          class App {
+            @ViewChild('anchor', {read: ViewContainerRef}) anchor!: ViewContainerRef;
+
+            constructor(
+              private vcr: ViewContainerRef,
+              private injector: Injector,
+            ) {}
+
+            create() {
+              const componentRef = this.vcr.createComponent(DynamicComponent, {
+                injector: this.injector,
+              });
+              componentRef.onDestroy(() => {
+                wasOnDestroyCalled = true;
+              });
+              this.anchor.insert(componentRef.hostView);
+            }
+
+            clear() {
+              this.anchor.clear();
+            }
+          }
+
+          TestBed.configureTestingModule({declarations: [App, DynamicComponent]});
+          const fixture = TestBed.createComponent(App);
+          fixture.detectChanges();
+
+          // Add ComponentRef to ViewContainerRef instance.
+          fixture.componentInstance.create();
+          // Clear ViewContainerRef to invoke `onDestroy` callbacks on ComponentRef.
+          fixture.componentInstance.clear();
+
+          expect(wasOnDestroyCalled).toBeTrue();
+        },
+      );
     });
   });
 
@@ -337,20 +366,18 @@ describe('component', () => {
         selector: 'ng-container',
         template: '...',
       })
-      class Comp {
-      }
+      class Comp {}
 
       @Component({
         selector: 'root',
         template: '<ng-container></ng-container>',
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Comp]});
-      expect(() => TestBed.createComponent(App))
-          .toThrowError(
-              /"ng-container" tags cannot be used as component hosts. Please use a different tag to activate the Comp component/);
+      expect(() => TestBed.createComponent(App)).toThrowError(
+        /"ng-container" tags cannot be used as component hosts. Please use a different tag to activate the Comp component/,
+      );
     });
 
     it('should throw when <ng-template> is used as a host element for a Component', () => {
@@ -358,20 +385,18 @@ describe('component', () => {
         selector: 'ng-template',
         template: '...',
       })
-      class Comp {
-      }
+      class Comp {}
 
       @Component({
         selector: 'root',
         template: '<ng-template></ng-template>',
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Comp]});
-      expect(() => TestBed.createComponent(App))
-          .toThrowError(
-              /"ng-template" tags cannot be used as component hosts. Please use a different tag to activate the Comp component/);
+      expect(() => TestBed.createComponent(App)).toThrowError(
+        /"ng-template" tags cannot be used as component hosts. Please use a different tag to activate the Comp component/,
+      );
     });
 
     it('should throw when multiple components match the same element', () => {
@@ -379,26 +404,23 @@ describe('component', () => {
         selector: 'comp',
         template: '...',
       })
-      class CompA {
-      }
+      class CompA {}
 
       @Component({
         selector: 'comp',
         template: '...',
       })
-      class CompB {
-      }
+      class CompB {}
 
       @Component({
         template: '<comp></comp>',
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, CompA, CompB]});
-      expect(() => TestBed.createComponent(App))
-          .toThrowError(
-              /NG0300: Multiple components match node with tagname comp: CompA and CompB/);
+      expect(() => TestBed.createComponent(App)).toThrowError(
+        /NG0300: Multiple components match node with tagname comp: CompA and CompB/,
+      );
     });
 
     it('should not throw if a standalone component imports itself', () => {
@@ -406,7 +428,7 @@ describe('component', () => {
         selector: 'comp',
         template: '<comp *ngIf="recurse"/>hello',
         standalone: true,
-        imports: [Comp, NgIf]
+        imports: [Comp, NgIf],
       })
       class Comp {
         @Input() recurse = false;
@@ -417,8 +439,7 @@ describe('component', () => {
         standalone: true,
         imports: [Comp],
       })
-      class App {
-      }
+      class App {}
 
       let textContent = '';
 
@@ -437,7 +458,7 @@ describe('component', () => {
         selector: 'comp',
         template: '<comp *ngIf="recurse"/>hello',
         standalone: true,
-        imports: [forwardRef(() => Comp), NgIf]
+        imports: [forwardRef(() => Comp), NgIf],
       })
       class Comp {
         @Input() recurse = false;
@@ -448,8 +469,7 @@ describe('component', () => {
         standalone: true,
         imports: [Comp],
       })
-      class App {
-      }
+      class App {}
 
       let textContent = '';
 
@@ -468,16 +488,15 @@ describe('component', () => {
     @Component({
       selector: 'app-root',
       template: '<parent-comp></parent-comp>',
-      styles: [':host { color: red; }'],  // `styles` must exist for encapsulation to apply.
+      styles: [':host { color: red; }'], // `styles` must exist for encapsulation to apply.
       encapsulation: ViewEncapsulation.Emulated,
     })
-    class AppRoot {
-    }
+    class AppRoot {}
 
     @Component({
       selector: 'parent-comp',
       template: '',
-      styles: [':host { color: orange; }'],  // `styles` must exist for encapsulation to apply.
+      styles: [':host { color: orange; }'], // `styles` must exist for encapsulation to apply.
       encapsulation: ViewEncapsulation.Emulated,
     })
     class ParentComponent {
@@ -494,17 +513,19 @@ describe('component', () => {
     const secondParentEl: HTMLElement = fixture.nativeElement.querySelector('parent-comp');
     const elementFromRenderer: HTMLElement = fixture.nativeElement.querySelector('p');
     const getNgContentAttr = (element: HTMLElement) => {
-      return Array.from(element.attributes).map(a => a.name).find(a => /ngcontent/.test(a));
+      return Array.from(element.attributes)
+        .map((a) => a.name)
+        .find((a) => /ngcontent/.test(a));
     };
 
     const hostNgContentAttr = getNgContentAttr(secondParentEl);
     const viewNgContentAttr = getNgContentAttr(elementFromRenderer);
 
-    expect(hostNgContentAttr)
-        .not.toBe(
-            viewNgContentAttr,
-            'Expected child manually created via Renderer2 to have a different view encapsulation' +
-                'attribute than its host element');
+    expect(hostNgContentAttr).not.toBe(
+      viewNgContentAttr,
+      'Expected child manually created via Renderer2 to have a different view encapsulation' +
+        'attribute than its host element',
+    );
   });
 
   it('should create a new Renderer2 for each component', () => {
@@ -534,8 +555,10 @@ describe('component', () => {
     fixture.detectChanges();
 
     // Assert like this, rather than `.not.toBe` so we get a better failure message.
-    expect(componentInstance.renderer !== componentInstance.childInstance.renderer)
-        .toBe(true, 'Expected renderers to be different.');
+    expect(componentInstance.renderer !== componentInstance.childInstance.renderer).toBe(
+      true,
+      'Expected renderers to be different.',
+    );
   });
 
   it('components should not share the same context when creating with a root element', () => {
@@ -567,9 +590,10 @@ describe('component', () => {
       constructor(private _injector: EnvironmentInjector) {}
 
       createComponent() {
-        return createComponent(
-            CompA,
-            {environmentInjector: this._injector, hostElement: document.createElement('div')});
+        return createComponent(CompA, {
+          environmentInjector: this._injector,
+          hostElement: document.createElement('div'),
+        });
       }
     }
 
@@ -578,19 +602,18 @@ describe('component', () => {
       constructor(private envInjector: EnvironmentInjector) {}
 
       createComponent() {
-        return createComponent(
-            CompB,
-            {environmentInjector: this.envInjector, hostElement: document.createElement('div')});
+        return createComponent(CompB, {
+          environmentInjector: this.envInjector,
+          hostElement: document.createElement('div'),
+        });
       }
     }
 
     @NgModule({declarations: [CompA]})
-    class MyModuleA {
-    }
+    class MyModuleA {}
 
     @NgModule({declarations: [CompB]})
-    class MyModuleB {
-    }
+    class MyModuleB {}
 
     TestBed.configureTestingModule({
       declarations: [MyCompA, MyCompB],
@@ -604,7 +627,7 @@ describe('component', () => {
 
     expect(log).toEqual(['CompA:ngDoCheck']);
 
-    log.length = 0;  // reset the log
+    log.length = 0; // reset the log
 
     const fixtureB = TestBed.createComponent(MyCompB);
     fixtureB.detectChanges();
@@ -617,8 +640,7 @@ describe('component', () => {
 
   it('should preserve simple component selector in a component factory', () => {
     @Component({selector: '[foo]', template: ''})
-    class AttSelectorCmp {
-    }
+    class AttSelectorCmp {}
 
     const selector = reflectComponentType(AttSelectorCmp)?.selector;
 
@@ -627,8 +649,7 @@ describe('component', () => {
 
   it('should preserve complex component selector in a component factory', () => {
     @Component({selector: '[foo],div:not(.bar)', template: ''})
-    class ComplexSelectorCmp {
-    }
+    class ComplexSelectorCmp {}
 
     const selector = reflectComponentType(ComplexSelectorCmp)?.selector;
 
@@ -640,8 +661,7 @@ describe('component', () => {
       selector: 'dynamic-comp',
       template: 'DynamicComponent Content',
     })
-    class DynamicComponent {
-    }
+    class DynamicComponent {}
 
     @Component({
       selector: 'app',
@@ -660,8 +680,10 @@ describe('component', () => {
       constructor(public injector: EnvironmentInjector) {}
 
       createDynamicComponent(target: any) {
-        createComponent(
-            DynamicComponent, {hostElement: target, environmentInjector: this.injector});
+        createComponent(DynamicComponent, {
+          hostElement: target,
+          environmentInjector: this.injector,
+        });
       }
     }
 
@@ -673,9 +695,7 @@ describe('component', () => {
 
     TestBed.configureTestingModule({
       declarations: [App, DynamicComponent],
-      providers: [
-        {provide: DOCUMENT, useFactory: _document, deps: []},
-      ],
+      providers: [{provide: DOCUMENT, useFactory: _document, deps: []}],
     });
 
     const fixture = TestBed.createComponent(App);
@@ -730,13 +750,14 @@ describe('component', () => {
       @NgModule({
         declarations: [NgModuleBasedComponent],
       })
-      class AppModule {
-      }
+      class AppModule {}
 
       const hostElement = document.createElement('div');
       const environmentInjector = TestBed.inject(EnvironmentInjector);
-      const componentRef =
-          createComponent(NgModuleBasedComponent, {hostElement, environmentInjector});
+      const componentRef = createComponent(NgModuleBasedComponent, {
+        hostElement,
+        environmentInjector,
+      });
 
       componentRef.changeDetectorRef.detectChanges();
       expect(hostElement.textContent).toBe('Hello Angular!');
@@ -756,8 +777,7 @@ describe('component', () => {
           <ng-content></ng-content>
         `,
       })
-      class StandaloneComponent {
-      }
+      class StandaloneComponent {}
 
       // Helper method to create a `<p>` element
       const p = (content: string): Element => {
@@ -768,8 +788,11 @@ describe('component', () => {
       const hostElement = document.createElement('div');
       const environmentInjector = TestBed.inject(EnvironmentInjector);
       const projectableNodes = [[p('1')], [p('2')], [p('3')]];
-      const componentRef = createComponent(
-          StandaloneComponent, {hostElement, environmentInjector, projectableNodes});
+      const componentRef = createComponent(StandaloneComponent, {
+        hostElement,
+        environmentInjector,
+        projectableNodes,
+      });
 
       componentRef.changeDetectorRef.detectChanges();
       expect(hostElement.innerHTML.replace(/\s*/g, '')).toBe('<p>1</p>|<p>2</p>|<p>3</p>');
@@ -810,7 +833,7 @@ describe('component', () => {
       @Component({
         standalone: true,
         template: 'Tokens: <div #target></div>',
-        providers: [{provide: A, useValue: 'ElementInjector(A)'}]
+        providers: [{provide: A, useValue: 'ElementInjector(A)'}],
       })
       class RootStandaloneComponent {
         @ViewChild('target', {read: ElementRef}) target!: ElementRef;
@@ -821,12 +844,14 @@ describe('component', () => {
           const parentInjector = this.injector.get(EnvironmentInjector);
           const providers = [
             {provide: A, useValue: 'EnvironmentInjector(A)'},
-            {provide: B, useValue: 'EnvironmentInjector(B)'}
+            {provide: B, useValue: 'EnvironmentInjector(B)'},
           ];
           const environmentInjector = createEnvironmentInjector(providers, parentInjector);
-          const childComponentRef = createComponent(
-              ChildStandaloneComponent,
-              {hostElement, elementInjector: this.injector, environmentInjector});
+          const childComponentRef = createComponent(ChildStandaloneComponent, {
+            hostElement,
+            elementInjector: this.injector,
+            environmentInjector,
+          });
           childComponentRef.changeDetectorRef.detectChanges();
         }
       }
@@ -857,8 +882,8 @@ describe('component', () => {
       const componentRef = createComponent(StandaloneComponent, {environmentInjector});
       componentRef.changeDetectorRef.detectChanges();
 
-      const hostElement =
-          (componentRef.hostView as EmbeddedViewRef<StandaloneComponent>).rootNodes[0];
+      const hostElement = (componentRef.hostView as EmbeddedViewRef<StandaloneComponent>)
+        .rootNodes[0];
 
       // A host element that matches component's selector.
       expect(hostElement.tagName.toLowerCase()).toBe(selector);
@@ -866,58 +891,61 @@ describe('component', () => {
       expect(hostElement.textContent).toBe('Hello Angular!');
     });
 
-    it('should fall-back to use a `div` as a host element if none provided ' +
-           'and element selector does not have a tag name',
-       () => {
-         @Component({
-           selector: '.some-class',
-           standalone: true,
-           template: 'Hello {{ name }}!',
-         })
-         class StandaloneComponent {
-           name = 'Angular';
-         }
+    it(
+      'should fall-back to use a `div` as a host element if none provided ' +
+        'and element selector does not have a tag name',
+      () => {
+        @Component({
+          selector: '.some-class',
+          standalone: true,
+          template: 'Hello {{ name }}!',
+        })
+        class StandaloneComponent {
+          name = 'Angular';
+        }
 
-         const environmentInjector = TestBed.inject(EnvironmentInjector);
-         const componentRef = createComponent(StandaloneComponent, {environmentInjector});
-         componentRef.changeDetectorRef.detectChanges();
+        const environmentInjector = TestBed.inject(EnvironmentInjector);
+        const componentRef = createComponent(StandaloneComponent, {environmentInjector});
+        componentRef.changeDetectorRef.detectChanges();
 
-         const hostElement =
-             (componentRef.hostView as EmbeddedViewRef<StandaloneComponent>).rootNodes[0];
+        const hostElement = (componentRef.hostView as EmbeddedViewRef<StandaloneComponent>)
+          .rootNodes[0];
 
-         // A host element has the `div` tag name, since component's selector doesn't contain
-         // tag name information (only a class name).
-         expect(hostElement.tagName.toLowerCase()).toBe('div');
+        // A host element has the `div` tag name, since component's selector doesn't contain
+        // tag name information (only a class name).
+        expect(hostElement.tagName.toLowerCase()).toBe('div');
 
-         expect(hostElement.textContent).toBe('Hello Angular!');
-       });
+        expect(hostElement.textContent).toBe('Hello Angular!');
+      },
+    );
 
     describe('error checking', () => {
       it('should throw when provided class is not a component', () => {
         class NotAComponent {}
 
         @Directive()
-        class ADirective {
-        }
+        class ADirective {}
 
         @Injectable()
-        class AnInjectiable {
-        }
+        class AnInjectiable {}
 
         const errorFor = (type: Type<unknown>): string =>
-            `NG0906: The ${stringifyForError(type)} is not an Angular component, ` +
-            `make sure it has the \`@Component\` decorator.`;
+          `NG0906: The ${stringifyForError(type)} is not an Angular component, ` +
+          `make sure it has the \`@Component\` decorator.`;
         const hostElement = document.createElement('div');
         const environmentInjector = TestBed.inject(EnvironmentInjector);
 
-        expect(() => createComponent(NotAComponent, {hostElement, environmentInjector}))
-            .toThrowError(errorFor(NotAComponent));
+        expect(() =>
+          createComponent(NotAComponent, {hostElement, environmentInjector}),
+        ).toThrowError(errorFor(NotAComponent));
 
-        expect(() => createComponent(ADirective, {hostElement, environmentInjector}))
-            .toThrowError(errorFor(ADirective));
+        expect(() => createComponent(ADirective, {hostElement, environmentInjector})).toThrowError(
+          errorFor(ADirective),
+        );
 
-        expect(() => createComponent(AnInjectiable, {hostElement, environmentInjector}))
-            .toThrowError(errorFor(AnInjectiable));
+        expect(() =>
+          createComponent(AnInjectiable, {hostElement, environmentInjector}),
+        ).toThrowError(errorFor(AnInjectiable));
       });
     });
   });
@@ -954,10 +982,13 @@ describe('component', () => {
       ]);
       expect(mirror.outputs).toEqual([
         {propName: 'output-a', templateName: 'output-a'},
-        {propName: 'output-b', templateName: 'output-alias-b'}
+        {propName: 'output-b', templateName: 'output-alias-b'},
       ]);
       expect(mirror.ngContentSelectors).toEqual([
-        '*', 'content-selector-a', 'content-selector-b', '*'
+        '*',
+        'content-selector-a',
+        'content-selector-b',
+        '*',
       ]);
     });
 
@@ -991,10 +1022,13 @@ describe('component', () => {
       ]);
       expect(mirror.outputs).toEqual([
         {propName: 'output-a', templateName: 'output-a'},
-        {propName: 'output-b', templateName: 'output-alias-b'}
+        {propName: 'output-b', templateName: 'output-alias-b'},
       ]);
       expect(mirror.ngContentSelectors).toEqual([
-        '*', 'content-selector-a', 'content-selector-b', '*'
+        '*',
+        'content-selector-a',
+        'content-selector-b',
+        '*',
       ]);
     });
 
@@ -1003,12 +1037,10 @@ describe('component', () => {
         class NotAnnotated {}
 
         @Directive()
-        class ADirective {
-        }
+        class ADirective {}
 
         @Injectable()
-        class AnInjectiable {
-        }
+        class AnInjectiable {}
 
         expect(reflectComponentType(NotAnnotated)).toBe(null);
         expect(reflectComponentType(ADirective)).toBe(null);
diff --git a/packages/core/test/acceptance/content_spec.ts b/packages/core/test/acceptance/content_spec.ts
index 573451ecf4f34..59fb8effb9b6e 100644
--- a/packages/core/test/acceptance/content_spec.ts
+++ b/packages/core/test/acceptance/content_spec.ts
@@ -7,25 +7,36 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {ChangeDetectorRef, Component, createComponent, Directive, EnvironmentInjector, inject, Input, OnDestroy, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  createComponent,
+  Directive,
+  EnvironmentInjector,
+  inject,
+  Input,
+  OnDestroy,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
 describe('projection', () => {
   function getElementHtml(element: HTMLElement) {
-    return element.innerHTML.replace(/<!--(\W|\w)*?-->/g, '')
-        .replace(/\sng-reflect-\S*="[^"]*"/g, '');
+    return element.innerHTML
+      .replace(/<!--(\W|\w)*?-->/g, '')
+      .replace(/\sng-reflect-\S*="[^"]*"/g, '');
   }
 
   it('should project content', () => {
     @Component({selector: 'child', template: `<div><ng-content></ng-content></div>`})
-    class Child {
-    }
+    class Child {}
 
     @Component({selector: 'parent', template: '<child>content</child>'})
-    class Parent {
-    }
+    class Parent {}
 
     TestBed.configureTestingModule({declarations: [Parent, Child]});
     const fixture = TestBed.createComponent(Parent);
@@ -39,15 +50,13 @@ describe('projection', () => {
       selector: 'child',
       template: '<ng-content></ng-content>',
     })
-    class Child {
-    }
+    class Child {}
 
     @Component({
       selector: 'parent',
       template: '<child>content</child>',
     })
-    class Parent {
-    }
+    class Parent {}
 
     TestBed.configureTestingModule({declarations: [Parent, Child]});
     const fixture = TestBed.createComponent(Parent);
@@ -58,13 +67,10 @@ describe('projection', () => {
 
   it('should project content with siblings', () => {
     @Component({selector: 'child', template: '<ng-content></ng-content>'})
-    class Child {
-    }
+    class Child {}
 
     @Component({selector: 'parent', template: `<child>before<div>content</div>after</child>`})
-    class Parent {
-    }
-
+    class Parent {}
 
     TestBed.configureTestingModule({declarations: [Parent, Child]});
     const fixture = TestBed.createComponent(Parent);
@@ -75,27 +81,27 @@ describe('projection', () => {
 
   it('should be able to re-project content', () => {
     @Component({selector: 'grand-child', template: `<div><ng-content></ng-content></div>`})
-    class GrandChild {
-    }
+    class GrandChild {}
 
-    @Component(
-        {selector: 'child', template: `<grand-child><ng-content></ng-content></grand-child>`})
-    class Child {
-    }
+    @Component({
+      selector: 'child',
+      template: `<grand-child><ng-content></ng-content></grand-child>`,
+    })
+    class Child {}
 
     @Component({
       selector: 'parent',
       template: `<child><b>Hello</b>World!</child>`,
     })
-    class Parent {
-    }
+    class Parent {}
 
     TestBed.configureTestingModule({declarations: [Parent, Child, GrandChild]});
     const fixture = TestBed.createComponent(Parent);
     fixture.detectChanges();
 
-    expect(fixture.nativeElement.innerHTML)
-        .toBe('<child><grand-child><div><b>Hello</b>World!</div></grand-child></child>');
+    expect(fixture.nativeElement.innerHTML).toBe(
+      '<child><grand-child><div><b>Hello</b>World!</div></grand-child></child>',
+    );
   });
 
   it('should project components', () => {
@@ -103,36 +109,32 @@ describe('projection', () => {
       selector: 'child',
       template: `<div><ng-content></ng-content></div>`,
     })
-    class Child {
-    }
+    class Child {}
 
     @Component({
       selector: 'projected-comp',
       template: 'content',
     })
-    class ProjectedComp {
-    }
+    class ProjectedComp {}
 
     @Component({selector: 'parent', template: `<child><projected-comp></projected-comp></child>`})
-    class Parent {
-    }
+    class Parent {}
 
     TestBed.configureTestingModule({declarations: [Parent, Child, ProjectedComp]});
     const fixture = TestBed.createComponent(Parent);
     fixture.detectChanges();
 
-    expect(fixture.nativeElement.innerHTML)
-        .toBe('<child><div><projected-comp>content</projected-comp></div></child>');
+    expect(fixture.nativeElement.innerHTML).toBe(
+      '<child><div><projected-comp>content</projected-comp></div></child>',
+    );
   });
 
   it('should project components that have their own projection', () => {
     @Component({selector: 'child', template: `<div><ng-content></ng-content></div>`})
-    class Child {
-    }
+    class Child {}
 
     @Component({selector: 'projected-comp', template: `<p><ng-content></ng-content></p>`})
-    class ProjectedComp {
-    }
+    class ProjectedComp {}
 
     @Component({
       selector: 'parent',
@@ -141,26 +143,23 @@ describe('projection', () => {
           <projected-comp><div>Some content</div>Other content</projected-comp>
         </child>`,
     })
-    class Parent {
-    }
+    class Parent {}
 
     TestBed.configureTestingModule({declarations: [Parent, Child, ProjectedComp]});
     const fixture = TestBed.createComponent(Parent);
     fixture.detectChanges();
 
-    expect(fixture.nativeElement.innerHTML)
-        .toBe(
-            `<child><div><projected-comp><p><div>Some content</div>Other content</p></projected-comp></div></child>`);
+    expect(fixture.nativeElement.innerHTML).toBe(
+      `<child><div><projected-comp><p><div>Some content</div>Other content</p></projected-comp></div></child>`,
+    );
   });
 
   it('should project with multiple instances of a component with projection', () => {
     @Component({selector: 'child', template: `<div><ng-content></ng-content></div>`})
-    class Child {
-    }
+    class Child {}
 
     @Component({selector: 'projected-comp', template: `Before<ng-content></ng-content>After`})
-    class ProjectedComp {
-    }
+    class ProjectedComp {}
 
     @Component({
       selector: 'parent',
@@ -170,29 +169,26 @@ describe('projection', () => {
           <projected-comp><div>B</div><p>456</p></projected-comp>
         </child>`,
     })
-    class Parent {
-    }
+    class Parent {}
 
     TestBed.configureTestingModule({declarations: [Parent, Child, ProjectedComp]});
     const fixture = TestBed.createComponent(Parent);
     fixture.detectChanges();
 
-    expect(fixture.nativeElement.innerHTML)
-        .toBe(
-            '<child><div>' +
-            '<projected-comp>Before<div>A</div><p>123</p>After</projected-comp>' +
-            '<projected-comp>Before<div>B</div><p>456</p>After</projected-comp>' +
-            '</div></child>');
+    expect(fixture.nativeElement.innerHTML).toBe(
+      '<child><div>' +
+        '<projected-comp>Before<div>A</div><p>123</p>After</projected-comp>' +
+        '<projected-comp>Before<div>B</div><p>456</p>After</projected-comp>' +
+        '</div></child>',
+    );
   });
 
   it('should re-project with multiple instances of a component with projection', () => {
     @Component({selector: 'child', template: `<div><ng-content></ng-content></div>`})
-    class Child {
-    }
+    class Child {}
 
     @Component({selector: 'projected-comp', template: `Before<ng-content></ng-content>After`})
-    class ProjectedComp {
-    }
+    class ProjectedComp {}
 
     @Component({
       selector: 'parent',
@@ -202,8 +198,7 @@ describe('projection', () => {
           <projected-comp><div>B</div><p>456</p></projected-comp>
         </child>`,
     })
-    class Parent {
-    }
+    class Parent {}
 
     @Component({
       selector: 'app',
@@ -212,37 +207,35 @@ describe('projection', () => {
         <parent>**DEF**</parent>
      `,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, Parent, Child, ProjectedComp]});
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    expect(fixture.nativeElement.innerHTML)
-        .toBe(
-            '<parent><child><div>' +
-            '<projected-comp>Before<div>A</div>**ABC**<p>123</p>After</projected-comp>' +
-            '<projected-comp>Before<div>B</div><p>456</p>After</projected-comp>' +
-            '</div></child></parent>' +
-            '<parent><child><div>' +
-            '<projected-comp>Before<div>A</div>**DEF**<p>123</p>After</projected-comp>' +
-            '<projected-comp>Before<div>B</div><p>456</p>After</projected-comp>' +
-            '</div></child></parent>');
+    expect(fixture.nativeElement.innerHTML).toBe(
+      '<parent><child><div>' +
+        '<projected-comp>Before<div>A</div>**ABC**<p>123</p>After</projected-comp>' +
+        '<projected-comp>Before<div>B</div><p>456</p>After</projected-comp>' +
+        '</div></child></parent>' +
+        '<parent><child><div>' +
+        '<projected-comp>Before<div>A</div>**DEF**<p>123</p>After</projected-comp>' +
+        '<projected-comp>Before<div>B</div><p>456</p>After</projected-comp>' +
+        '</div></child></parent>',
+    );
   });
 
   it('should project into dynamic views (with createEmbeddedView)', () => {
     @Component({
       selector: 'child',
-      template: `Before-<ng-template [ngIf]="showing"><ng-content></ng-content></ng-template>-After`
+      template: `Before-<ng-template [ngIf]="showing"><ng-content></ng-content></ng-template>-After`,
     })
     class Child {
       showing = false;
     }
 
     @Component({selector: 'parent', template: `<child><div>A</div>Some text</child>`})
-    class Parent {
-    }
+    class Parent {}
 
     TestBed.configureTestingModule({declarations: [Parent, Child], imports: [CommonModule]});
 
@@ -275,7 +268,7 @@ describe('projection', () => {
         <ng-template [ngIf]="showing">
           <ng-content select="div"></ng-content>
         </ng-template>
-        -After`
+        -After`,
     })
     class Child {
       showing = false;
@@ -288,10 +281,9 @@ describe('projection', () => {
           <div>A</div>
           <span>B</span>
         </child>
-      `
+      `,
     })
-    class Parent {
-    }
+    class Parent {}
 
     TestBed.configureTestingModule({declarations: [Parent, Child], imports: [CommonModule]});
 
@@ -302,81 +294,81 @@ describe('projection', () => {
     childInstance.showing = true;
     fixture.detectChanges();
 
-    expect(getElementHtml(fixture.nativeElement))
-        .toBe('<child><span>B</span> Before- <div>A</div> -After</child>');
+    expect(getElementHtml(fixture.nativeElement)).toBe(
+      '<child><span>B</span> Before- <div>A</div> -After</child>',
+    );
 
     childInstance.showing = false;
     fixture.detectChanges();
-    expect(getElementHtml(fixture.nativeElement))
-        .toBe('<child><span>B</span> Before-  -After</child>');
+    expect(getElementHtml(fixture.nativeElement)).toBe(
+      '<child><span>B</span> Before-  -After</child>',
+    );
 
     childInstance.showing = true;
     fixture.detectChanges();
-    expect(getElementHtml(fixture.nativeElement))
-        .toBe('<child><span>B</span> Before- <div>A</div> -After</child>');
+    expect(getElementHtml(fixture.nativeElement)).toBe(
+      '<child><span>B</span> Before- <div>A</div> -After</child>',
+    );
   });
 
-  it('should project if <ng-content> is in a template that has different declaration/insertion points',
-     () => {
-       @Component(
-           {selector: 'comp', template: `<ng-template><ng-content></ng-content></ng-template>`})
-       class Comp {
-         @ViewChild(TemplateRef, {static: true}) template!: TemplateRef<any>;
-       }
+  it('should project if <ng-content> is in a template that has different declaration/insertion points', () => {
+    @Component({selector: 'comp', template: `<ng-template><ng-content></ng-content></ng-template>`})
+    class Comp {
+      @ViewChild(TemplateRef, {static: true}) template!: TemplateRef<any>;
+    }
 
-       @Directive({selector: '[trigger]'})
-       class Trigger {
-         @Input() trigger!: Comp;
+    @Directive({selector: '[trigger]'})
+    class Trigger {
+      @Input() trigger!: Comp;
 
-         constructor(public vcr: ViewContainerRef) {}
+      constructor(public vcr: ViewContainerRef) {}
 
-         open() {
-           this.vcr.createEmbeddedView(this.trigger.template);
-         }
-       }
+      open() {
+        this.vcr.createEmbeddedView(this.trigger.template);
+      }
+    }
 
-       @Component({
-         selector: 'parent',
-         template: `
+    @Component({
+      selector: 'parent',
+      template: `
         <button [trigger]="comp"></button>
         <comp #comp>Some content</comp>
-      `
-       })
-       class Parent {
-       }
+      `,
+    })
+    class Parent {}
 
-       TestBed.configureTestingModule({declarations: [Parent, Trigger, Comp]});
+    TestBed.configureTestingModule({declarations: [Parent, Trigger, Comp]});
 
-       const fixture = TestBed.createComponent(Parent);
-       const trigger = fixture.debugElement.query(By.directive(Trigger)).injector.get(Trigger);
-       fixture.detectChanges();
+    const fixture = TestBed.createComponent(Parent);
+    const trigger = fixture.debugElement.query(By.directive(Trigger)).injector.get(Trigger);
+    fixture.detectChanges();
 
-       expect(getElementHtml(fixture.nativeElement)).toBe(`<button></button><comp></comp>`);
+    expect(getElementHtml(fixture.nativeElement)).toBe(`<button></button><comp></comp>`);
 
-       trigger.open();
-       expect(getElementHtml(fixture.nativeElement))
-           .toBe(`<button></button>Some content<comp></comp>`);
-     });
+    trigger.open();
+    expect(getElementHtml(fixture.nativeElement)).toBe(
+      `<button></button>Some content<comp></comp>`,
+    );
+  });
 
   it('should project nodes into the last ng-content', () => {
     @Component({
       selector: 'child',
       template: `<div><ng-content></ng-content></div>
-          <span><ng-content></ng-content></span>`
+          <span><ng-content></ng-content></span>`,
     })
-    class Child {
-    }
+    class Child {}
 
     @Component({selector: 'parent', template: `<child>content</child>`})
-    class Parent {
-    }
+    class Parent {}
 
     TestBed.configureTestingModule({declarations: [Parent, Child], imports: [CommonModule]});
     const fixture = TestBed.createComponent(Parent);
     fixture.detectChanges();
 
-    expect(getElementHtml(fixture.nativeElement))
-        .toBe('<child><div></div><span>content</span></child>');
+    expect(getElementHtml(fixture.nativeElement)).toBe(
+      '<child><div></div><span>content</span></child>',
+    );
   });
 
   // https://stackblitz.com/edit/angular-ceqmnw?file=src%2Fapp%2Fapp.component.ts
@@ -384,34 +376,31 @@ describe('projection', () => {
     @Component({
       selector: 'child',
       template:
-          '<div *ngFor="let item of [1, 2]; let i = index">({{i}}):<ng-content></ng-content></div>'
+        '<div *ngFor="let item of [1, 2]; let i = index">({{i}}):<ng-content></ng-content></div>',
     })
-    class Child {
-    }
+    class Child {}
 
     @Component({selector: 'parent', template: '<child>content</child>'})
-    class Parent {
-    }
+    class Parent {}
 
     TestBed.configureTestingModule({declarations: [Parent, Child], imports: [CommonModule]});
     const fixture = TestBed.createComponent(Parent);
     fixture.detectChanges();
 
-    expect(getElementHtml(fixture.nativeElement))
-        .toBe('<child><div>(0):</div><div>(1):content</div></child>');
+    expect(getElementHtml(fixture.nativeElement)).toBe(
+      '<child><div>(0):</div><div>(1):content</div></child>',
+    );
   });
 
   it('should handle projected containers inside other containers', () => {
     @Component({selector: 'nested-comp', template: `<div>Child content</div>`})
-    class NestedComp {
-    }
+    class NestedComp {}
 
     @Component({
       selector: 'root-comp',
       template: `<ng-content></ng-content>`,
     })
-    class RootComp {
-    }
+    class RootComp {}
 
     @Component({
       selector: 'my-app',
@@ -421,14 +410,16 @@ describe('projection', () => {
             <nested-comp *ngIf="!last"></nested-comp>
           </ng-container>
         </root-comp>
-      `
+      `,
     })
     class MyApp {
       items = [1, 2];
     }
 
-    TestBed.configureTestingModule(
-        {declarations: [MyApp, RootComp, NestedComp], imports: [CommonModule]});
+    TestBed.configureTestingModule({
+      declarations: [MyApp, RootComp, NestedComp],
+      imports: [CommonModule],
+    });
     const fixture = TestBed.createComponent(MyApp);
     fixture.detectChanges();
 
@@ -462,7 +453,7 @@ describe('projection', () => {
     @Component({
       selector: 'my-app',
       template: `<root-comp [show]="show"><div></div></root-comp>
-      `
+      `,
     })
     class MyApp {
       show = true;
@@ -490,7 +481,7 @@ describe('projection', () => {
 
     @Component({
       selector: 'my-app',
-      template: `<root-comp [show]="show"><ng-container><div></div></ng-container></root-comp>`
+      template: `<root-comp [show]="show"><ng-container><div></div></ng-container></root-comp>`,
     })
     class MyApp {
       show = true;
@@ -509,8 +500,7 @@ describe('projection', () => {
 
   it('should project ng-container at the content root', () => {
     @Component({selector: 'child', template: `<ng-content></ng-content>`})
-    class Child {
-    }
+    class Child {}
 
     @Component({
       selector: 'parent',
@@ -519,10 +509,9 @@ describe('projection', () => {
         <ng-container>content</ng-container>
       </ng-container>
     </child>
-      `
+      `,
     })
-    class Parent {
-    }
+    class Parent {}
 
     TestBed.configureTestingModule({declarations: [Parent, Child]});
     const fixture = TestBed.createComponent(Parent);
@@ -533,17 +522,15 @@ describe('projection', () => {
 
   it('should re-project ng-container at the content root', () => {
     @Component({selector: 'grand-child', template: `<ng-content></ng-content>`})
-    class GrandChild {
-    }
+    class GrandChild {}
 
     @Component({
       selector: 'child',
       template: `<grand-child>
       <ng-content></ng-content>
-    </grand-child>`
+    </grand-child>`,
     })
-    class Child {
-    }
+    class Child {}
 
     @Component({
       selector: 'parent',
@@ -552,17 +539,17 @@ describe('projection', () => {
         <ng-container>content</ng-container>
       </ng-container>
     </child>
-      `
+      `,
     })
-    class Parent {
-    }
+    class Parent {}
 
     TestBed.configureTestingModule({declarations: [Parent, Child, GrandChild]});
     const fixture = TestBed.createComponent(Parent);
 
     fixture.detectChanges();
-    expect(getElementHtml(fixture.nativeElement))
-        .toBe('<child><grand-child>content</grand-child></child>');
+    expect(getElementHtml(fixture.nativeElement)).toBe(
+      '<child><grand-child>content</grand-child></child>',
+    );
   });
 
   it('should handle re-projection at the root of an embedded view', () => {
@@ -576,14 +563,16 @@ describe('projection', () => {
 
     @Component({
       selector: 'parent-comp',
-      template: `<child-comp [show]="show"><ng-content></ng-content></child-comp>`
+      template: `<child-comp [show]="show"><ng-content></ng-content></child-comp>`,
     })
     class ParentComp {
       @Input() show: boolean = true;
     }
 
-    @Component(
-        {selector: 'my-app', template: `<parent-comp [show]="show"><div></div></parent-comp>`})
+    @Component({
+      selector: 'my-app',
+      template: `<parent-comp [show]="show"><div></div></parent-comp>`,
+    })
     class MyApp {
       show = true;
     }
@@ -605,23 +594,21 @@ describe('projection', () => {
         template: `<div id="first"><ng-content select="span[title=toFirst]"></ng-content></div>
           <div id="second"><ng-content select="span[title=toSecond]"></ng-content></div>`,
       })
-      class Child {
-      }
+      class Child {}
 
       @Component({
         selector: 'parent',
-        template: `<child><span title="toFirst">1</span><span title="toSecond">2</span></child>`
+        template: `<child><span title="toFirst">1</span><span title="toSecond">2</span></child>`,
       })
-      class Parent {
-      }
+      class Parent {}
 
       TestBed.configureTestingModule({declarations: [Child, Parent]});
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<child><div id="first"><span title="toFirst">1</span></div><div id="second"><span title="toSecond">2</span></div></child>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child><div id="first"><span title="toFirst">1</span></div><div id="second"><span title="toSecond">2</span></div></child>',
+      );
     });
 
     it('should project nodes using class selectors', () => {
@@ -630,125 +617,113 @@ describe('projection', () => {
         template: `<div id="first"><ng-content select="span.toFirst"></ng-content></div>
           <div id="second"><ng-content select="span.toSecond"></ng-content></div>`,
       })
-      class Child {
-      }
+      class Child {}
 
       @Component({
         selector: 'parent',
-        template: `<child><span class="toFirst">1</span><span class="toSecond">2</span></child>`
+        template: `<child><span class="toFirst">1</span><span class="toSecond">2</span></child>`,
       })
-      class Parent {
-      }
+      class Parent {}
 
       TestBed.configureTestingModule({declarations: [Child, Parent]});
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<child><div id="first"><span class="toFirst">1</span></div><div id="second"><span class="toSecond">2</span></div></child>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child><div id="first"><span class="toFirst">1</span></div><div id="second"><span class="toSecond">2</span></div></child>',
+      );
     });
 
     it('should project nodes using class selectors when element has multiple classes', () => {
       @Component({
         selector: 'child',
         template: `<div id="first"><ng-content select="span.toFirst"></ng-content></div>
-          <div id="second"><ng-content select="span.toSecond"></ng-content></div>`
+          <div id="second"><ng-content select="span.toSecond"></ng-content></div>`,
       })
-      class Child {
-      }
+      class Child {}
 
       @Component({
         selector: 'parent',
-        template:
-            `<child><span class="other toFirst">1</span><span class="noise toSecond">2</span></child>`
+        template: `<child><span class="other toFirst">1</span><span class="noise toSecond">2</span></child>`,
       })
-      class Parent {
-      }
+      class Parent {}
 
       TestBed.configureTestingModule({declarations: [Child, Parent]});
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<child><div id="first"><span class="other toFirst">1</span></div><div id="second"><span class="noise toSecond">2</span></div></child>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child><div id="first"><span class="other toFirst">1</span></div><div id="second"><span class="noise toSecond">2</span></div></child>',
+      );
     });
 
     it('should project nodes into the first matching selector', () => {
       @Component({
         selector: 'child',
         template: `<div id="first"><ng-content select="span"></ng-content></div>
-          <div id="second"><ng-content select="span.toSecond"></ng-content></div>`
+          <div id="second"><ng-content select="span.toSecond"></ng-content></div>`,
       })
-      class Child {
-      }
+      class Child {}
 
       @Component({
         selector: 'parent',
-        template: `<child><span class="toFirst">1</span><span class="toSecond">2</span></child>`
+        template: `<child><span class="toFirst">1</span><span class="toSecond">2</span></child>`,
       })
-      class Parent {
-      }
+      class Parent {}
 
       TestBed.configureTestingModule({declarations: [Child, Parent]});
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<child><div id="first"><span class="toFirst">1</span><span class="toSecond">2</span></div><div id="second"></div></child>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child><div id="first"><span class="toFirst">1</span><span class="toSecond">2</span></div><div id="second"></div></child>',
+      );
     });
 
     it('should allow mixing ng-content with and without selectors', () => {
       @Component({
         selector: 'child',
         template: `<div id="first"><ng-content select="span.toFirst"></ng-content></div>
-          <div id="second"><ng-content></ng-content></div>`
+          <div id="second"><ng-content></ng-content></div>`,
       })
-      class Child {
-      }
+      class Child {}
 
       @Component({
         selector: 'parent',
-        template:
-            `<child><span class="toFirst">1</span><span>remaining</span>more remaining</child>`
+        template: `<child><span class="toFirst">1</span><span>remaining</span>more remaining</child>`,
       })
-      class Parent {
-      }
+      class Parent {}
 
       TestBed.configureTestingModule({declarations: [Child, Parent]});
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<child><div id="first"><span class="toFirst">1</span></div><div id="second"><span>remaining</span>more remaining</div></child>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child><div id="first"><span class="toFirst">1</span></div><div id="second"><span>remaining</span>more remaining</div></child>',
+      );
     });
 
     it('should allow mixing ng-content with and without selectors - ng-content first', () => {
       @Component({
         selector: 'child',
         template: `<div id="first"><ng-content></ng-content></div>
-          <div id="second"><ng-content select="span.toSecond"></ng-content></div>`
+          <div id="second"><ng-content select="span.toSecond"></ng-content></div>`,
       })
-      class Child {
-      }
+      class Child {}
 
       @Component({
         selector: 'parent',
-        template: `<child><span>1</span><span class="toSecond">2</span>remaining</child>`
+        template: `<child><span>1</span><span class="toSecond">2</span>remaining</child>`,
       })
-      class Parent {
-      }
+      class Parent {}
 
       TestBed.configureTestingModule({declarations: [Child, Parent]});
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<child><div id="first"><span>1</span>remaining</div><div id="second"><span class="toSecond">2</span></div></child>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child><div id="first"><span>1</span>remaining</div><div id="second"><span class="toSecond">2</span></div></child>',
+      );
     });
 
     /**
@@ -758,85 +733,76 @@ describe('projection', () => {
     it('should not descend into re-projected content', () => {
       @Component({
         selector: 'grand-child',
-        template: `<ng-content select="span"></ng-content><hr><ng-content></ng-content>`
+        template: `<ng-content select="span"></ng-content><hr><ng-content></ng-content>`,
       })
-      class GrandChild {
-      }
+      class GrandChild {}
 
       @Component({
         selector: 'child',
         template: `<grand-child>
             <ng-content></ng-content>
             <span>in child template</span>
-          </grand-child>`
+          </grand-child>`,
       })
-      class Child {
-      }
+      class Child {}
 
       @Component({selector: 'parent', template: `<child><span>parent content</span></child>`})
-      class Parent {
-      }
+      class Parent {}
 
       TestBed.configureTestingModule({declarations: [GrandChild, Child, Parent]});
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<child><grand-child><span>in child template</span><hr><span>parent content</span></grand-child></child>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child><grand-child><span>in child template</span><hr><span>parent content</span></grand-child></child>',
+      );
     });
 
     it('should not descend into re-projected content', () => {
       @Component({
         selector: 'card',
-        template:
-            `<ng-content select="[card-title]"></ng-content><hr><ng-content select="[card-content]"></ng-content>`
+        template: `<ng-content select="[card-title]"></ng-content><hr><ng-content select="[card-content]"></ng-content>`,
       })
-      class Card {
-      }
+      class Card {}
 
       @Component({
         selector: 'card-with-title',
         template: `<card>
          <h1 card-title>Title</h1>
          <ng-content card-content></ng-content>
-       </card>`
+       </card>`,
       })
-      class CardWithTitle {
-      }
+      class CardWithTitle {}
 
       @Component({selector: 'parent', template: `<card-with-title>content</card-with-title>`})
-      class Parent {
-      }
+      class Parent {}
 
       TestBed.configureTestingModule({declarations: [Card, CardWithTitle, Parent]});
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<card-with-title><card><h1 card-title="">Title</h1><hr>content</card></card-with-title>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<card-with-title><card><h1 card-title="">Title</h1><hr>content</card></card-with-title>',
+      );
     });
 
     it('should not match selectors against node having ngProjectAs attribute', () => {
       @Component({selector: 'child', template: `<ng-content select="div"></ng-content>`})
-      class Child {
-      }
+      class Child {}
 
       @Component({
         selector: 'parent',
-        template:
-            `<child><div ngProjectAs="span">should not project</div><div>should project</div></child>`
+        template: `<child><div ngProjectAs="span">should not project</div><div>should project</div></child>`,
       })
-      class Parent {
-      }
+      class Parent {}
 
       TestBed.configureTestingModule({declarations: [Child, Parent]});
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<child><div>should project</div></child>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child><div>should project</div></child>',
+      );
     });
 
     // https://stackblitz.com/edit/angular-psokum?file=src%2Fapp%2Fapp.module.ts
@@ -845,29 +811,29 @@ describe('projection', () => {
         selector: 'child',
         template: `<ng-content select="[title]"></ng-content>`,
       })
-      class Child {
-      }
+      class Child {}
 
       @Component({
         selector: 'parent',
-        template: `<child><span [title]="'Some title'">Has title</span></child>`
+        template: `<child><span [title]="'Some title'">Has title</span></child>`,
       })
-      class Parent {
-      }
+      class Parent {}
 
       TestBed.configureTestingModule({declarations: [Child, Parent]});
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<child><span title="Some title">Has title</span></child>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child><span title="Some title">Has title</span></child>',
+      );
     });
 
     it('should match selectors against projected containers', () => {
-      @Component(
-          {selector: 'child', template: `<span><ng-content select="div"></ng-content></span>`})
-      class Child {
-      }
+      @Component({
+        selector: 'child',
+        template: `<span><ng-content select="div"></ng-content></span>`,
+      })
+      class Child {}
 
       @Component({template: `<child><div *ngIf="value">content</div></child>`})
       class Parent {
@@ -879,25 +845,24 @@ describe('projection', () => {
       fixture.componentInstance.value = true;
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<child><span><div>content</div></span></child>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child><span><div>content</div></span></child>',
+      );
     });
   });
 
   it('should handle projected containers inside other containers', () => {
     @Component({
-      selector: 'child-comp',  //
-      template: '<ng-content></ng-content>'
+      selector: 'child-comp', //
+      template: '<ng-content></ng-content>',
     })
-    class ChildComp {
-    }
+    class ChildComp {}
 
     @Component({
-      selector: 'root-comp',  //
-      template: '<ng-content></ng-content>'
+      selector: 'root-comp', //
+      template: '<ng-content></ng-content>',
     })
-    class RootComp {
-    }
+    class RootComp {}
 
     @Component({
       selector: 'my-app',
@@ -907,7 +872,7 @@ describe('projection', () => {
             <child-comp *ngIf="!last">{{ item }}|</child-comp>
           </ng-container>
         </root-comp>
-      `
+      `,
     })
     class MyApp {
       items: number[] = [1, 2, 3];
@@ -944,10 +909,9 @@ describe('projection', () => {
         <my-comp>
           <p>hello</p>
         </my-comp>
-      `
+      `,
     })
-    class MyApp {
-    }
+    class MyApp {}
 
     TestBed.configureTestingModule({declarations: [MyComp, MyApp]});
     const fixture = TestBed.createComponent(MyApp);
@@ -972,10 +936,9 @@ describe('projection', () => {
         <ng-content select="[card-content]"></ng-content>
         ---
         <ng-content select="[card-footer]"></ng-content>
-      `
+      `,
     })
-    class Card {
-    }
+    class Card {}
 
     @Component({
       selector: 'card-with-title',
@@ -986,10 +949,9 @@ describe('projection', () => {
          <div style="font-color: blue;" ngProjectAs="[card-content]">content</div>
          <div [color]="'blue'" ngProjectAs="[card-footer]">footer</div>
         </card>
-      `
+      `,
     })
-    class CardWithTitle {
-    }
+    class CardWithTitle {}
 
     TestBed.configureTestingModule({declarations: [Card, CardWithTitle, ElDecorator]});
     const fixture = TestBed.createComponent(CardWithTitle);
@@ -1005,10 +967,9 @@ describe('projection', () => {
         <ng-content select="[card-title]"></ng-content>
         ---
         <ng-content select="[card-content]"></ng-content>
-      `
+      `,
     })
-    class Card {
-    }
+    class Card {}
 
     @Component({
       selector: 'card-with-title',
@@ -1017,19 +978,17 @@ describe('projection', () => {
          <h1 ngProjectAs="[card-title]">Title</h1>
          <ng-content ngProjectAs="[card-content]"></ng-content>
         </card>
-      `
+      `,
     })
-    class CardWithTitle {
-    }
+    class CardWithTitle {}
 
     @Component({
       selector: 'app',
       template: `
         <card-with-title>content</card-with-title>
-      `
+      `,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [Card, CardWithTitle, App]});
     const fixture = TestBed.createComponent(App);
@@ -1044,20 +1003,18 @@ describe('projection', () => {
       template: `
         <ng-content select="[card-title]"></ng-content>
         content
-      `
+      `,
     })
-    class Card {
-    }
+    class Card {}
 
     @Component({
       template: `
         <card>
          <h1 ngProjectAs="[non-existing-title-slot],[card-title]">Title</h1>
         </card>
-      `
+      `,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [Card, App]});
     const fixture = TestBed.createComponent(App);
@@ -1071,18 +1028,16 @@ describe('projection', () => {
       selector: 'projector',
       template: `<ng-content select="projectMe"></ng-content>`,
     })
-    class Projector {
-    }
+    class Projector {}
 
     @Component({
       template: `
         <projector>
           <div ngProjectAs="projectMe" title="some title"></div>
         </projector>
-      `
+      `,
     })
-    class Root {
-    }
+    class Root {}
 
     TestBed.configureTestingModule({
       declarations: [Root, Projector],
@@ -1100,8 +1055,7 @@ describe('projection', () => {
     it('should work when matching the element name', () => {
       let divDirectives = 0;
       @Component({selector: 'selector-proj', template: '<ng-content select="div"></ng-content>'})
-      class SelectedNgContentComp {
-      }
+      class SelectedNgContentComp {}
 
       @Directive({selector: 'div'})
       class DivDirective {
@@ -1112,13 +1066,13 @@ describe('projection', () => {
 
       @Component({
         selector: 'main-selector',
-        template: '<selector-proj><div x="true" *ngIf="true">Hello world!</div></selector-proj>'
+        template: '<selector-proj><div x="true" *ngIf="true">Hello world!</div></selector-proj>',
       })
-      class SelectorMainComp {
-      }
+      class SelectorMainComp {}
 
-      TestBed.configureTestingModule(
-          {declarations: [DivDirective, SelectedNgContentComp, SelectorMainComp]});
+      TestBed.configureTestingModule({
+        declarations: [DivDirective, SelectedNgContentComp, SelectorMainComp],
+      });
       const fixture = TestBed.createComponent<SelectorMainComp>(SelectorMainComp);
 
       fixture.detectChanges();
@@ -1129,8 +1083,7 @@ describe('projection', () => {
     it('should work when matching attributes', () => {
       let xDirectives = 0;
       @Component({selector: 'selector-proj', template: '<ng-content select="[x]"></ng-content>'})
-      class SelectedNgContentComp {
-      }
+      class SelectedNgContentComp {}
 
       @Directive({selector: '[x]'})
       class XDirective {
@@ -1141,13 +1094,13 @@ describe('projection', () => {
 
       @Component({
         selector: 'main-selector',
-        template: '<selector-proj><div x="true" *ngIf="true">Hello world!</div></selector-proj>'
+        template: '<selector-proj><div x="true" *ngIf="true">Hello world!</div></selector-proj>',
       })
-      class SelectorMainComp {
-      }
+      class SelectorMainComp {}
 
-      TestBed.configureTestingModule(
-          {declarations: [XDirective, SelectedNgContentComp, SelectorMainComp]});
+      TestBed.configureTestingModule({
+        declarations: [XDirective, SelectedNgContentComp, SelectorMainComp],
+      });
       const fixture = TestBed.createComponent<SelectorMainComp>(SelectorMainComp);
 
       fixture.detectChanges();
@@ -1158,8 +1111,7 @@ describe('projection', () => {
     it('should work when matching classes', () => {
       let xDirectives = 0;
       @Component({selector: 'selector-proj', template: '<ng-content select=".x"></ng-content>'})
-      class SelectedNgContentComp {
-      }
+      class SelectedNgContentComp {}
 
       @Directive({selector: '.x'})
       class XDirective {
@@ -1170,13 +1122,13 @@ describe('projection', () => {
 
       @Component({
         selector: 'main-selector',
-        template: '<selector-proj><div class="x" *ngIf="true">Hello world!</div></selector-proj>'
+        template: '<selector-proj><div class="x" *ngIf="true">Hello world!</div></selector-proj>',
       })
-      class SelectorMainComp {
-      }
+      class SelectorMainComp {}
 
-      TestBed.configureTestingModule(
-          {declarations: [XDirective, SelectedNgContentComp, SelectorMainComp]});
+      TestBed.configureTestingModule({
+        declarations: [XDirective, SelectedNgContentComp, SelectorMainComp],
+      });
       const fixture = TestBed.createComponent<SelectorMainComp>(SelectorMainComp);
 
       fixture.detectChanges();
@@ -1185,16 +1137,17 @@ describe('projection', () => {
     });
 
     it('should ignore synthesized attributes (e.g. ngTrackBy)', () => {
-      @Component(
-          {selector: 'selector-proj', template: '<ng-content select="[ngTrackBy]"></ng-content>'})
-      class SelectedNgContentComp {
-      }
+      @Component({
+        selector: 'selector-proj',
+        template: '<ng-content select="[ngTrackBy]"></ng-content>',
+      })
+      class SelectedNgContentComp {}
 
       @Component({
         selector: 'main-selector',
         template:
-            'inline(<selector-proj><div *ngFor="let item of items trackBy getItemId">{{item.name}}</div></selector-proj>)' +
-            'ng-template(<selector-proj><ng-template ngFor [ngForOf]="items" let-item ngTrackBy="getItemId"><div>{{item.name}}</div></ng-template></selector-proj>)'
+          'inline(<selector-proj><div *ngFor="let item of items trackBy getItemId">{{item.name}}</div></selector-proj>)' +
+          'ng-template(<selector-proj><ng-template ngFor [ngForOf]="items" let-item ngTrackBy="getItemId"><div>{{item.name}}</div></ng-template></selector-proj>)',
       })
       class SelectorMainComp {
         items = [
@@ -1224,8 +1177,7 @@ describe('projection', () => {
           <ng-content select=".foo"></ng-content>
         `,
       })
-      class ProjectorApp {
-      }
+      class ProjectorApp {}
 
       @Component({
         selector: 'root-comp',
@@ -1265,8 +1217,7 @@ describe('projection', () => {
       it('should work when matching attributes', () => {
         let xDirectives = 0;
         @Component({selector: 'selector-proj', template: '<ng-content select="[x]"></ng-content>'})
-        class SelectedNgContentComp {
-        }
+        class SelectedNgContentComp {}
 
         @Directive({selector: '[x]'})
         class XDirective {
@@ -1278,13 +1229,13 @@ describe('projection', () => {
         @Component({
           selector: 'main-selector',
           template:
-              '<selector-proj><ng-container x="true">Hello world!</ng-container></selector-proj>'
+            '<selector-proj><ng-container x="true">Hello world!</ng-container></selector-proj>',
         })
-        class SelectorMainComp {
-        }
+        class SelectorMainComp {}
 
-        TestBed.configureTestingModule(
-            {declarations: [XDirective, SelectedNgContentComp, SelectorMainComp]});
+        TestBed.configureTestingModule({
+          declarations: [XDirective, SelectedNgContentComp, SelectorMainComp],
+        });
         const fixture = TestBed.createComponent<SelectorMainComp>(SelectorMainComp);
 
         fixture.detectChanges();
@@ -1295,8 +1246,7 @@ describe('projection', () => {
       it('should work when matching classes', () => {
         let xDirectives = 0;
         @Component({selector: 'selector-proj', template: '<ng-content select=".x"></ng-content>'})
-        class SelectedNgContentComp {
-        }
+        class SelectedNgContentComp {}
 
         @Directive({selector: '.x'})
         class XDirective {
@@ -1308,13 +1258,13 @@ describe('projection', () => {
         @Component({
           selector: 'main-selector',
           template:
-              '<selector-proj><ng-container class="x">Hello world!</ng-container></selector-proj>'
+            '<selector-proj><ng-container class="x">Hello world!</ng-container></selector-proj>',
         })
-        class SelectorMainComp {
-        }
+        class SelectorMainComp {}
 
-        TestBed.configureTestingModule(
-            {declarations: [XDirective, SelectedNgContentComp, SelectorMainComp]});
+        TestBed.configureTestingModule({
+          declarations: [XDirective, SelectedNgContentComp, SelectorMainComp],
+        });
         const fixture = TestBed.createComponent<SelectorMainComp>(SelectorMainComp);
 
         fixture.detectChanges();
@@ -1322,40 +1272,36 @@ describe('projection', () => {
         expect(xDirectives).toEqual(1);
       });
 
-      it('should work without exception when subelement has both ngIf and class as interpolation',
-         () => {
-           @Component(
-               {selector: 'child-comp', template: '<ng-content select=".nomatch"></ng-content>'})
-           class ChildComp {
-           }
-
-           @Component({
-             selector: 'parent-comp',
-             template: `<child-comp><span *ngIf="true" class="{{'a'}}"></span></child-comp>`
-           })
-           class ParentComp {
-           }
-
-           TestBed.configureTestingModule({declarations: [ParentComp, ChildComp]});
-           const fixture = TestBed.createComponent<ParentComp>(ParentComp);
-
-           fixture.detectChanges();
-           expect(fixture.nativeElement.innerHTML).toBe('<child-comp></child-comp>');
-         });
+      it('should work without exception when subelement has both ngIf and class as interpolation', () => {
+        @Component({
+          selector: 'child-comp',
+          template: '<ng-content select=".nomatch"></ng-content>',
+        })
+        class ChildComp {}
+
+        @Component({
+          selector: 'parent-comp',
+          template: `<child-comp><span *ngIf="true" class="{{'a'}}"></span></child-comp>`,
+        })
+        class ParentComp {}
+
+        TestBed.configureTestingModule({declarations: [ParentComp, ChildComp]});
+        const fixture = TestBed.createComponent<ParentComp>(ParentComp);
+
+        fixture.detectChanges();
+        expect(fixture.nativeElement.innerHTML).toBe('<child-comp></child-comp>');
+      });
     });
 
     it('selection of child element should properly work even with confusing attribute names', () => {
       @Component({selector: 'child-comp', template: '<ng-content select=".title"></ng-content>'})
-      class ChildComp {
-      }
+      class ChildComp {}
 
       @Component({
         selector: 'parent-comp',
-        template:
-            `<child-comp><span *ngIf="true" id="5" jjj="class" class="{{'a'}}" [title]="'abc'"></span></child-comp>`
+        template: `<child-comp><span *ngIf="true" id="5" jjj="class" class="{{'a'}}" [title]="'abc'"></span></child-comp>`,
       })
-      class ParentComp {
-      }
+      class ParentComp {}
 
       TestBed.configureTestingModule({declarations: [ParentComp, ChildComp]});
       const fixture = TestBed.createComponent<ParentComp>(ParentComp);
@@ -1373,16 +1319,16 @@ describe('projection', () => {
     it('should render the fallback content if nothing is projected into a slot', () => {
       @Component({
         selector: 'projection',
-        template: `
+        template:
+          `
           <ng-content select="[one]">One fallback</ng-content>|` +
-            `<ng-content>Catch-all fallback</ng-content>|` +
-            `<ng-content select="[two]">Two fallback</ng-content>` +
-            `<ng-content select="[three]">Three fallback</ng-content>
+          `<ng-content>Catch-all fallback</ng-content>|` +
+          `<ng-content select="[two]">Two fallback</ng-content>` +
+          `<ng-content select="[three]">Three fallback</ng-content>
         `,
         standalone: true,
       })
-      class Projection {
-      }
+      class Projection {}
 
       @Component({
         standalone: true,
@@ -1392,57 +1338,52 @@ describe('projection', () => {
             <span one>One</span>
             <div three>Three</div>
           </projection>
-        `
+        `,
       })
-      class App {
-      }
+      class App {}
 
       const fixture = TestBed.createComponent(App);
-      expect(getElementHtml(fixture.nativeElement))
-          .toContain(
-              `<projection><span one="">One</span>|` +
-              `Catch-all fallback|Two fallback<div three="">Three</div></projection>`);
+      expect(getElementHtml(fixture.nativeElement)).toContain(
+        `<projection><span one="">One</span>|` +
+          `Catch-all fallback|Two fallback<div three="">Three</div></projection>`,
+      );
     });
 
-    it('should render the catch-all slots fallback content if the element only contains comments',
-       () => {
-         @Component({
-           selector: 'projection',
-           template: `<ng-content>Fallback content</ng-content>`,
-           standalone: true,
-         })
-         class Projection {
-         }
-
-         @Component({
-           standalone: true,
-           imports: [Projection],
-           template: `
+    it('should render the catch-all slots fallback content if the element only contains comments', () => {
+      @Component({
+        selector: 'projection',
+        template: `<ng-content>Fallback content</ng-content>`,
+        standalone: true,
+      })
+      class Projection {}
+
+      @Component({
+        standalone: true,
+        imports: [Projection],
+        template: `
             <projection>
               <!-- One -->
 
 
               <!-- Two -->
             </projection>
-          `
-         })
-         class App {
-         }
+          `,
+      })
+      class App {}
 
-         const fixture = TestBed.createComponent(App);
-         expect(getElementHtml(fixture.nativeElement))
-             .toContain(`<projection>Fallback content</projection>`);
-       });
+      const fixture = TestBed.createComponent(App);
+      expect(getElementHtml(fixture.nativeElement)).toContain(
+        `<projection>Fallback content</projection>`,
+      );
+    });
 
     it('should account for ngProjectAs when rendering fallback content', () => {
       @Component({
         selector: 'projection',
-        template:
-            `<ng-content select="div">I have no divs</ng-content>|<ng-content select="span">I have no spans</ng-content>`,
+        template: `<ng-content select="div">I have no divs</ng-content>|<ng-content select="span">I have no spans</ng-content>`,
         standalone: true,
       })
-      class Projection {
-      }
+      class Projection {}
 
       @Component({
         standalone: true,
@@ -1458,21 +1399,19 @@ describe('projection', () => {
       }
 
       const fixture = TestBed.createComponent(App);
-      expect(getElementHtml(fixture.nativeElement))
-          .toContain(
-              `<projection>I have no divs|` +
-              `<div ngprojectas="span">div pretending to be a span</div></projection>`);
+      expect(getElementHtml(fixture.nativeElement)).toContain(
+        `<projection>I have no divs|` +
+          `<div ngprojectas="span">div pretending to be a span</div></projection>`,
+      );
     });
 
     it('should not render the fallback content if there is a control flow expression', () => {
       @Component({
         selector: 'projection',
-        template:
-            `<ng-content>Wildcard fallback</ng-content>|<ng-content select="span">Span fallback</ng-content>`,
+        template: `<ng-content>Wildcard fallback</ng-content>|<ng-content select="span">Span fallback</ng-content>`,
         standalone: true,
       })
-      class Projection {
-      }
+      class Projection {}
 
       @Component({
         standalone: true,
@@ -1483,7 +1422,7 @@ describe('projection', () => {
               <span>Span override</span>
             }
           </projection>
-        `
+        `,
       })
       class App {
         showSpan = false;
@@ -1491,18 +1430,21 @@ describe('projection', () => {
 
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toContain(`<projection>Wildcard fallback|</projection>`);
+      expect(getElementHtml(fixture.nativeElement)).toContain(
+        `<projection>Wildcard fallback|</projection>`,
+      );
 
       fixture.componentInstance.showSpan = true;
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toContain(`<projection>Wildcard fallback|<span>Span override</span></projection>`);
+      expect(getElementHtml(fixture.nativeElement)).toContain(
+        `<projection>Wildcard fallback|<span>Span override</span></projection>`,
+      );
 
       fixture.componentInstance.showSpan = false;
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toContain(`<projection>Wildcard fallback|</projection>`);
+      expect(getElementHtml(fixture.nativeElement)).toContain(
+        `<projection>Wildcard fallback|</projection>`,
+      );
     });
 
     it('should not render the fallback content if there is an ng-container', () => {
@@ -1511,15 +1453,14 @@ describe('projection', () => {
         template: `<ng-content>Fallback</ng-content>`,
         standalone: true,
       })
-      class Projection {
-      }
+      class Projection {}
 
       @Component({
         standalone: true,
         imports: [Projection],
         template: `
           <projection><ng-container/></projection>
-        `
+        `,
       })
       class App {
         showSpan = false;
@@ -1574,8 +1515,7 @@ describe('projection', () => {
       }
 
       @Component({standalone: true, imports: [Projection], template: `<projection/>`})
-      class App {
-      }
+      class App {}
 
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -1609,8 +1549,7 @@ describe('projection', () => {
         standalone: true,
         imports: [FallbackDir],
       })
-      class Projection {
-      }
+      class Projection {}
 
       @Component({
         standalone: true,
@@ -1619,7 +1558,7 @@ describe('projection', () => {
           @if (hasProjection) {
             <projection/>
           }
-        `
+        `,
       })
       class App {
         hasProjection = true;
@@ -1635,7 +1574,7 @@ describe('projection', () => {
     });
 
     it('should be able to query inside the fallback content', () => {
-      let directiveInstance: FallbackDir|undefined;
+      let directiveInstance: FallbackDir | undefined;
 
       @Directive({
         selector: 'fallback-dir',
@@ -1707,34 +1646,34 @@ describe('projection', () => {
       expect(instance.projection.fallback.host).toBe(instance.projection);
     });
 
-    it('should render the fallback content if content is not provided through projectableNodes',
-       () => {
-         @Component({
-           standalone: true,
-           template: `<ng-content>One fallback</ng-content>|` +
-               `<ng-content>Two fallback</ng-content>|<ng-content>Three fallback</ng-content>`,
-         })
-         class Projection {
-         }
-
-         const hostElement = document.createElement('div');
-         const environmentInjector = TestBed.inject(EnvironmentInjector);
-         const paragraph = document.createElement('p');
-         paragraph.textContent = 'override';
-         const projectableNodes = [[paragraph]];
-         const componentRef =
-             createComponent(Projection, {hostElement, environmentInjector, projectableNodes});
-         componentRef.changeDetectorRef.detectChanges();
-
-         expect(getElementHtml(hostElement))
-             .toContain('<p>override</p>|Two fallback|Three fallback');
-       });
+    it('should render the fallback content if content is not provided through projectableNodes', () => {
+      @Component({
+        standalone: true,
+        template:
+          `<ng-content>One fallback</ng-content>|` +
+          `<ng-content>Two fallback</ng-content>|<ng-content>Three fallback</ng-content>`,
+      })
+      class Projection {}
+
+      const hostElement = document.createElement('div');
+      const environmentInjector = TestBed.inject(EnvironmentInjector);
+      const paragraph = document.createElement('p');
+      paragraph.textContent = 'override';
+      const projectableNodes = [[paragraph]];
+      const componentRef = createComponent(Projection, {
+        hostElement,
+        environmentInjector,
+        projectableNodes,
+      });
+      componentRef.changeDetectorRef.detectChanges();
+
+      expect(getElementHtml(hostElement)).toContain('<p>override</p>|Two fallback|Three fallback');
+    });
 
     it('should render fallback content when ng-content is inside an ng-template', () => {
       @Component({
         selector: 'projection',
-        template:
-            `<ng-container #ref/><ng-template #template><ng-content>Fallback</ng-content></ng-template>`,
+        template: `<ng-container #ref/><ng-template #template><ng-content>Fallback</ng-content></ng-template>`,
         standalone: true,
       })
       class Projection {
@@ -1773,8 +1712,7 @@ describe('projection', () => {
         `,
         standalone: true,
       })
-      class InnerProjection {
-      }
+      class InnerProjection {}
 
       @Component({
         selector: 'projection',
@@ -1787,8 +1725,7 @@ describe('projection', () => {
         standalone: true,
         imports: [InnerProjection],
       })
-      class Projection {
-      }
+      class Projection {}
 
       @Component({
         standalone: true,
@@ -1797,10 +1734,9 @@ describe('projection', () => {
           <projection>
             <span outer-header>Outer header override</span>
           </projection>
-        `
+        `,
       })
-      class App {
-      }
+      class App {}
 
       const fixture = TestBed.createComponent(App);
       const content = getElementHtml(fixture.nativeElement);
@@ -1829,74 +1765,74 @@ describe('projection', () => {
         standalone: true,
         imports: [Fallback],
       })
-      class Projection {
-      }
+      class Projection {}
 
       @Component({
         standalone: true,
         imports: [Projection],
         template: `<projection>Hello</projection>`,
       })
-      class App {
-      }
+      class App {}
 
       const fixture = TestBed.createComponent(App);
       expect(creationCount).toBe(0);
       expect(getElementHtml(fixture.nativeElement)).toContain(`<projection>Hello</projection>`);
     });
 
-    it('should render the fallback content when an instance of a component that uses ' +
-           'fallback content is declared after one that does not',
-       () => {
-         @Component({
-           selector: 'projection',
-           template: `<ng-content>Fallback</ng-content>`,
-           standalone: true,
-         })
-         class Projection {
-         }
-
-         @Component({
-           standalone: true,
-           imports: [Projection],
-           template: `
+    it(
+      'should render the fallback content when an instance of a component that uses ' +
+        'fallback content is declared after one that does not',
+      () => {
+        @Component({
+          selector: 'projection',
+          template: `<ng-content>Fallback</ng-content>`,
+          standalone: true,
+        })
+        class Projection {}
+
+        @Component({
+          standalone: true,
+          imports: [Projection],
+          template: `
             <projection>Content</projection>
             <projection/>
-          `
-         })
-         class App {
-         }
-
-         const fixture = TestBed.createComponent(App);
-         expect(getElementHtml(fixture.nativeElement))
-             .toContain('<projection>Content</projection><projection>Fallback</projection>');
-       });
-
-    it('should render the fallback content when an instance of a component that uses ' +
-           'fallback content is declared before one that does not',
-       () => {
-         @Component({
-           selector: 'projection',
-           template: `<ng-content>Fallback</ng-content>`,
-           standalone: true,
-         })
-         class Projection {
-         }
-
-         @Component({
-           standalone: true,
-           imports: [Projection],
-           template: `
+          `,
+        })
+        class App {}
+
+        const fixture = TestBed.createComponent(App);
+        expect(getElementHtml(fixture.nativeElement)).toContain(
+          '<projection>Content</projection><projection>Fallback</projection>',
+        );
+      },
+    );
+
+    it(
+      'should render the fallback content when an instance of a component that uses ' +
+        'fallback content is declared before one that does not',
+      () => {
+        @Component({
+          selector: 'projection',
+          template: `<ng-content>Fallback</ng-content>`,
+          standalone: true,
+        })
+        class Projection {}
+
+        @Component({
+          standalone: true,
+          imports: [Projection],
+          template: `
             <projection/>
             <projection>Content</projection>
-          `
-         })
-         class App {
-         }
-
-         const fixture = TestBed.createComponent(App);
-         expect(getElementHtml(fixture.nativeElement))
-             .toContain('<projection>Fallback</projection><projection>Content</projection>');
-       });
+          `,
+        })
+        class App {}
+
+        const fixture = TestBed.createComponent(App);
+        expect(getElementHtml(fixture.nativeElement)).toContain(
+          '<projection>Fallback</projection><projection>Content</projection>',
+        );
+      },
+    );
   });
 });
diff --git a/packages/core/test/acceptance/control_flow_for_spec.ts b/packages/core/test/acceptance/control_flow_for_spec.ts
index 6bbda54b97f9e..118ffe7414ec5 100644
--- a/packages/core/test/acceptance/control_flow_for_spec.ts
+++ b/packages/core/test/acceptance/control_flow_for_spec.ts
@@ -6,9 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {NgIf} from '@angular/common';
-import {ChangeDetectorRef, Component, Directive, inject, Input, OnInit, Pipe, PipeTransform, TemplateRef, ViewContainerRef} from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  Directive,
+  inject,
+  Input,
+  OnInit,
+  Pipe,
+  PipeTransform,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 describe('control flow - for', () => {
@@ -43,7 +53,11 @@ describe('control flow - for', () => {
       template: '@for ((item of items.keys()); track $index) {{{item}}|}',
     })
     class TestComponent {
-      items = new Map([['a', 1], ['b', 2], ['c', 3]]);
+      items = new Map([
+        ['a', 1],
+        ['b', 2],
+        ['c', 3],
+      ]);
     }
 
     const fixture = TestBed.createComponent(TestComponent);
@@ -82,7 +96,7 @@ describe('control flow - for', () => {
       template: '@for ((item of items); track idx; let idx = $index) {|} @empty {Empty}',
     })
     class TestComponent {
-      items: number[]|null|undefined = [1, 2, 3];
+      items: number[] | null | undefined = [1, 2, 3];
     }
 
     const fixture = TestBed.createComponent(TestComponent);
@@ -123,7 +137,7 @@ describe('control flow - for', () => {
     @Component({
       template: '@for (item of items | test; track item;) {{{item}}|}',
       imports: [TestPipe],
-      standalone: true
+      standalone: true,
     })
     class TestComponent {
       items = [1, 2, 3];
@@ -160,8 +174,7 @@ describe('control flow - for', () => {
         }
       `,
     })
-    class TestComponent {
-    }
+    class TestComponent {}
 
     const fixture = TestBed.createComponent(TestComponent);
     fixture.detectChanges();
@@ -171,7 +184,7 @@ describe('control flow - for', () => {
   it('should expose variables both under their real names and aliases', () => {
     @Component({
       template:
-          '@for ((item of items); track item; let idx = $index) {{{item}}({{$index}}/{{idx}})|}',
+        '@for ((item of items); track item; let idx = $index) {{{item}}({{$index}}/{{idx}})|}',
     })
     class TestComponent {
       items = [1, 2, 3];
@@ -215,34 +228,32 @@ describe('control flow - for', () => {
       expect(offsetReads).toBeGreaterThan(prevReads);
     });
 
-    it('should be able to access component properties in the tracking function from a loop at the root of the template',
-       () => {
-         const calls = new Set();
-
-         @Component({
-           template: `@for ((item of items); track trackingFn(item, compProp)) {{{item}}}`,
-         })
-         class TestComponent {
-           items = ['a', 'b'];
-           compProp = 'hello';
-
-           trackingFn(item: string, message: string) {
-             calls.add(`${item}:${message}`);
-             return item;
-           }
-         }
-
-         const fixture = TestBed.createComponent(TestComponent);
-         fixture.detectChanges();
-         expect([...calls].sort()).toEqual(['a:hello', 'b:hello']);
-       });
-
-    it('should be able to access component properties in the tracking function from a nested template',
-       () => {
-         const calls = new Set();
-
-         @Component({
-           template: `
+    it('should be able to access component properties in the tracking function from a loop at the root of the template', () => {
+      const calls = new Set();
+
+      @Component({
+        template: `@for ((item of items); track trackingFn(item, compProp)) {{{item}}}`,
+      })
+      class TestComponent {
+        items = ['a', 'b'];
+        compProp = 'hello';
+
+        trackingFn(item: string, message: string) {
+          calls.add(`${item}:${message}`);
+          return item;
+        }
+      }
+
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+      expect([...calls].sort()).toEqual(['a:hello', 'b:hello']);
+    });
+
+    it('should be able to access component properties in the tracking function from a nested template', () => {
+      const calls = new Set();
+
+      @Component({
+        template: `
             @if (true) {
               @if (true) {
                 @if (true) {
@@ -251,21 +262,21 @@ describe('control flow - for', () => {
               }
             }
           `,
-         })
-         class TestComponent {
-           items = ['a', 'b'];
-           compProp = 'hello';
-
-           trackingFn(item: string, message: string) {
-             calls.add(`${item}:${message}`);
-             return item;
-           }
-         }
-
-         const fixture = TestBed.createComponent(TestComponent);
-         fixture.detectChanges();
-         expect([...calls].sort()).toEqual(['a:hello', 'b:hello']);
-       });
+      })
+      class TestComponent {
+        items = ['a', 'b'];
+        compProp = 'hello';
+
+        trackingFn(item: string, message: string) {
+          calls.add(`${item}:${message}`);
+          return item;
+        }
+      }
+
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+      expect([...calls].sort()).toEqual(['a:hello', 'b:hello']);
+    });
 
     it('should invoke method tracking function with the correct context', () => {
       let context = null as TestComponent | null;
@@ -301,16 +312,22 @@ describe('control flow - for', () => {
       fixture.detectChanges();
       expect(fixture.nativeElement.textContent).toBe('abaca');
       expect(console.warn).toHaveBeenCalledTimes(1);
-      expect(console.warn)
-          .toHaveBeenCalledWith(jasmine.stringContaining(
-              `NG0955: The provided track expression resulted in duplicated keys for a given collection.`));
-      expect(console.warn)
-          .toHaveBeenCalledWith(jasmine.stringContaining(
-              `Adjust the tracking expression such that it uniquely identifies all the items in the collection. `));
-      expect(console.warn)
-          .toHaveBeenCalledWith(jasmine.stringContaining(`key "a" at index "0" and "2"`));
-      expect(console.warn)
-          .toHaveBeenCalledWith(jasmine.stringContaining(`key "a" at index "2" and "4"`));
+      expect(console.warn).toHaveBeenCalledWith(
+        jasmine.stringContaining(
+          `NG0955: The provided track expression resulted in duplicated keys for a given collection.`,
+        ),
+      );
+      expect(console.warn).toHaveBeenCalledWith(
+        jasmine.stringContaining(
+          `Adjust the tracking expression such that it uniquely identifies all the items in the collection. `,
+        ),
+      );
+      expect(console.warn).toHaveBeenCalledWith(
+        jasmine.stringContaining(`key "a" at index "0" and "2"`),
+      );
+      expect(console.warn).toHaveBeenCalledWith(
+        jasmine.stringContaining(`key "a" at index "2" and "4"`),
+      );
     });
 
     it('should warn about duplicated keys when using iterables', () => {
@@ -318,7 +335,13 @@ describe('control flow - for', () => {
         template: `@for (item of items.values(); track item) {{{item}}}`,
       })
       class TestComponent {
-        items = new Map([[1, 'a'], [2, 'b'], [3, 'a'], [4, 'c'], [5, 'a']]);
+        items = new Map([
+          [1, 'a'],
+          [2, 'b'],
+          [3, 'a'],
+          [4, 'c'],
+          [5, 'a'],
+        ]);
       }
 
       spyOn(console, 'warn');
@@ -327,16 +350,22 @@ describe('control flow - for', () => {
       fixture.detectChanges();
       expect(fixture.nativeElement.textContent).toBe('abaca');
       expect(console.warn).toHaveBeenCalledTimes(1);
-      expect(console.warn)
-          .toHaveBeenCalledWith(jasmine.stringContaining(
-              `NG0955: The provided track expression resulted in duplicated keys for a given collection.`));
-      expect(console.warn)
-          .toHaveBeenCalledWith(jasmine.stringContaining(
-              `Adjust the tracking expression such that it uniquely identifies all the items in the collection. `));
-      expect(console.warn)
-          .toHaveBeenCalledWith(jasmine.stringContaining(`key "a" at index "0" and "2"`));
-      expect(console.warn)
-          .toHaveBeenCalledWith(jasmine.stringContaining(`key "a" at index "2" and "4"`));
+      expect(console.warn).toHaveBeenCalledWith(
+        jasmine.stringContaining(
+          `NG0955: The provided track expression resulted in duplicated keys for a given collection.`,
+        ),
+      );
+      expect(console.warn).toHaveBeenCalledWith(
+        jasmine.stringContaining(
+          `Adjust the tracking expression such that it uniquely identifies all the items in the collection. `,
+        ),
+      );
+      expect(console.warn).toHaveBeenCalledWith(
+        jasmine.stringContaining(`key "a" at index "0" and "2"`),
+      );
+      expect(console.warn).toHaveBeenCalledWith(
+        jasmine.stringContaining(`key "a" at index "2" and "4"`),
+      );
     });
 
     it('should warn about duplicate keys when keys are expressed as symbols', () => {
@@ -346,15 +375,19 @@ describe('control flow - for', () => {
         template: `@for (item of items.values(); track item) {}`,
       })
       class TestComponent {
-        items = new Map([[1, value], [2, value]]);
+        items = new Map([
+          [1, value],
+          [2, value],
+        ]);
       }
 
       spyOn(console, 'warn');
 
       const fixture = TestBed.createComponent(TestComponent);
       fixture.detectChanges();
-      expect(console.warn)
-          .toHaveBeenCalledWith(jasmine.stringContaining(`Symbol(a)" at index "0" and "1".`));
+      expect(console.warn).toHaveBeenCalledWith(
+        jasmine.stringContaining(`Symbol(a)" at index "0" and "1".`),
+      );
     });
 
     it('should not warn about duplicate keys iterating over the new collection only', () => {
@@ -391,58 +424,59 @@ describe('control flow - for', () => {
       expect(fixture.nativeElement.textContent).toBe('(0)(1)');
       expect(console.warn).not.toHaveBeenCalled();
 
-      fixture.componentInstance.items =
-          fixture.componentInstance.items.map(item => ({value: item.value + 1}));
+      fixture.componentInstance.items = fixture.componentInstance.items.map((item) => ({
+        value: item.value + 1,
+      }));
       fixture.detectChanges();
       expect(fixture.nativeElement.textContent).toBe('(1)(2)');
       expect(console.warn).toHaveBeenCalled();
     });
 
-    it('should NOT warn about collection re-creation when a view is not considered expensive',
-       () => {
-         @Component({
-           template: `@for (item of items; track item) {({{item.value}})}`,
-         })
-         class TestComponent {
-           items = [{value: 0}, {value: 1}];
-         }
-
-         spyOn(console, 'warn');
-
-         const fixture = TestBed.createComponent(TestComponent);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('(0)(1)');
-         expect(console.warn).not.toHaveBeenCalled();
-
-         fixture.componentInstance.items =
-             fixture.componentInstance.items.map(item => ({value: item.value + 1}));
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('(1)(2)');
-         expect(console.warn).not.toHaveBeenCalled();
-       });
-
-    it('should NOT warn about collection re-creation when a trackBy function is not identity',
-       () => {
-         @Component({
-           template: `@for (item of items; track item.value) {({{item.value}})}`,
-         })
-         class TestComponent {
-           items = [{value: 0}, {value: 1}];
-         }
-
-         spyOn(console, 'warn');
-
-         const fixture = TestBed.createComponent(TestComponent);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('(0)(1)');
-         expect(console.warn).not.toHaveBeenCalled();
-
-         fixture.componentInstance.items =
-             fixture.componentInstance.items.map(item => ({value: item.value + 1}));
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('(1)(2)');
-         expect(console.warn).not.toHaveBeenCalled();
-       });
+    it('should NOT warn about collection re-creation when a view is not considered expensive', () => {
+      @Component({
+        template: `@for (item of items; track item) {({{item.value}})}`,
+      })
+      class TestComponent {
+        items = [{value: 0}, {value: 1}];
+      }
+
+      spyOn(console, 'warn');
+
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('(0)(1)');
+      expect(console.warn).not.toHaveBeenCalled();
+
+      fixture.componentInstance.items = fixture.componentInstance.items.map((item) => ({
+        value: item.value + 1,
+      }));
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('(1)(2)');
+      expect(console.warn).not.toHaveBeenCalled();
+    });
+
+    it('should NOT warn about collection re-creation when a trackBy function is not identity', () => {
+      @Component({
+        template: `@for (item of items; track item.value) {({{item.value}})}`,
+      })
+      class TestComponent {
+        items = [{value: 0}, {value: 1}];
+      }
+
+      spyOn(console, 'warn');
+
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('(0)(1)');
+      expect(console.warn).not.toHaveBeenCalled();
+
+      fixture.componentInstance.items = fixture.componentInstance.items.map((item) => ({
+        value: item.value + 1,
+      }));
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('(1)(2)');
+      expect(console.warn).not.toHaveBeenCalled();
+    });
   });
 
   describe('list diffing and view operations', () => {
@@ -476,7 +510,6 @@ describe('control flow - for', () => {
       fixture.detectChanges();
       expect(fixture.nativeElement.textContent).toBe('1(0)|3(1)|');
 
-
       // add in the middle
       fixture.componentInstance.items.splice(1, 0, 2);
       fixture.detectChanges();
@@ -495,7 +528,6 @@ describe('control flow - for', () => {
       fixture.detectChanges();
       expect(fixture.nativeElement.textContent).toBe('1(0)|2(1)|3(2)|');
 
-
       // an item in the middle stays the same, the rest gets replaced
       fixture.componentInstance.items = [5, 2, 7];
       fixture.detectChanges();
@@ -526,7 +558,6 @@ describe('control flow - for', () => {
         {'name': 'Task 14', 'id': 14},
         {'name': 'Task 70', 'id': 70},
         {'name': 'Task 34', 'id': 34},
-
       ];
 
       const AFTER = [
@@ -540,8 +571,7 @@ describe('control flow - for', () => {
         template: ``,
         selector: 'child-cmp',
       })
-      class ChildCmp {
-      }
+      class ChildCmp {}
 
       @Component({
         standalone: true,
@@ -574,8 +604,7 @@ describe('control flow - for', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -584,7 +613,7 @@ describe('control flow - for', () => {
         <test>Before @for (item of items; track $index) {
           <span foo>{{item}}</span>
         } After</test>
-      `
+      `,
       })
       class App {
         items = [1, 2, 3];
@@ -602,8 +631,7 @@ describe('control flow - for', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -612,7 +640,7 @@ describe('control flow - for', () => {
         <test>Before @for (item of items; track $index) {} @empty {
           <span foo>Empty</span>
         } After</test>
-      `
+      `,
       })
       class App {
         items = [];
@@ -629,10 +657,9 @@ describe('control flow - for', () => {
         standalone: true,
         selector: 'test',
         template:
-            'Main: <ng-content/> Loop slot: <ng-content select="[loop]"/> Empty slot: <ng-content select="[empty]"/>',
+          'Main: <ng-content/> Loop slot: <ng-content select="[loop]"/> Empty slot: <ng-content select="[empty]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -643,7 +670,7 @@ describe('control flow - for', () => {
         } @empty {
           <span empty>Empty</span>
         } After</test>
-      `
+      `,
       })
       class App {
         items = [1, 2, 3];
@@ -652,13 +679,15 @@ describe('control flow - for', () => {
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.textContent)
-          .toBe('Main: Before  After Loop slot: 123 Empty slot: ');
+      expect(fixture.nativeElement.textContent).toBe(
+        'Main: Before  After Loop slot: 123 Empty slot: ',
+      );
 
       fixture.componentInstance.items = [];
       fixture.detectChanges();
-      expect(fixture.nativeElement.textContent)
-          .toBe('Main: Before  After Loop slot:  Empty slot: Empty');
+      expect(fixture.nativeElement.textContent).toBe(
+        'Main: Before  After Loop slot:  Empty slot: Empty',
+      );
     });
 
     it('should project an @for with multiple root nodes into the catch-all slot', () => {
@@ -667,8 +696,7 @@ describe('control flow - for', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -678,7 +706,7 @@ describe('control flow - for', () => {
           <span foo>one{{item}}</span>
           <div foo>two{{item}}</div>
         } After</test>
-      `
+      `,
       })
       class App {
         items = [1, 2];
@@ -707,8 +735,7 @@ describe('control flow - for', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -717,7 +744,7 @@ describe('control flow - for', () => {
         <test>Before @for (item of items; track $index) {
           <span [foo]="item">{{item}}</span>
         } After</test>
-      `
+      `,
       })
       class App {
         items = [1, 2, 3];
@@ -736,8 +763,7 @@ describe('control flow - for', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -749,7 +775,7 @@ describe('control flow - for', () => {
             <span>|</span>
           </ng-container>
         } After</test>
-      `
+      `,
       })
       class App {
         items = [1, 2, 3];
@@ -769,8 +795,7 @@ describe('control flow - for', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -781,7 +806,7 @@ describe('control flow - for', () => {
           <span foo>{{item}}</span>
           <!-- after -->
         } After</test>
-      `
+      `,
       })
       class App {
         items = [1, 2, 3];
@@ -793,63 +818,58 @@ describe('control flow - for', () => {
       expect(fixture.nativeElement.textContent).toBe('Main: Before  After Slot: 123');
     });
 
-    it('should project the root node when preserveWhitespaces is enabled and there are no whitespace nodes',
-       () => {
-         @Component({
-           standalone: true,
-           selector: 'test',
-           template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
-         })
-         class TestComponent {
-         }
-
-         @Component({
-           standalone: true,
-           imports: [TestComponent],
-           preserveWhitespaces: true,
-           // Note the whitespace due to the indentation inside @for.
-           template:
-               '<test>Before @for (item of items; track $index) {<span foo>{{item}}</span>} After</test>'
-         })
-         class App {
-           items = [1, 2, 3];
-         }
-
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('Main: Before  After Slot: 123');
-       });
-
-    it('should not project the root node when preserveWhitespaces is enabled and there are whitespace nodes',
-       () => {
-         @Component({
-           standalone: true,
-           selector: 'test',
-           template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
-         })
-         class TestComponent {
-         }
-
-         @Component({
-           standalone: true,
-           imports: [TestComponent],
-           preserveWhitespaces: true,
-           // Note the whitespace due to the indentation inside @for.
-           template: `
+    it('should project the root node when preserveWhitespaces is enabled and there are no whitespace nodes', () => {
+      @Component({
+        standalone: true,
+        selector: 'test',
+        template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
+      })
+      class TestComponent {}
+
+      @Component({
+        standalone: true,
+        imports: [TestComponent],
+        preserveWhitespaces: true,
+        // Note the whitespace due to the indentation inside @for.
+        template:
+          '<test>Before @for (item of items; track $index) {<span foo>{{item}}</span>} After</test>',
+      })
+      class App {
+        items = [1, 2, 3];
+      }
+
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('Main: Before  After Slot: 123');
+    });
+
+    it('should not project the root node when preserveWhitespaces is enabled and there are whitespace nodes', () => {
+      @Component({
+        standalone: true,
+        selector: 'test',
+        template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
+      })
+      class TestComponent {}
+
+      @Component({
+        standalone: true,
+        imports: [TestComponent],
+        preserveWhitespaces: true,
+        // Note the whitespace due to the indentation inside @for.
+        template: `
               <test>Before @for (item of items; track $index) {
                 <span foo>{{item}}</span>
               } After</test>
-            `
-         })
-         class App {
-           items = [1, 2, 3];
-         }
-
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent)
-             .toMatch(/Main: Before\s+1\s+2\s+3\s+After Slot:/);
-       });
+            `,
+      })
+      class App {
+        items = [1, 2, 3];
+      }
+
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toMatch(/Main: Before\s+1\s+2\s+3\s+After Slot:/);
+    });
 
     it('should not project the root node across multiple layers of @for', () => {
       @Component({
@@ -857,8 +877,7 @@ describe('control flow - for', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -869,7 +888,7 @@ describe('control flow - for', () => {
             <span foo>{{item}}</span>
           }
         } After</test>
-      `
+      `,
       })
       class App {
         items = [1, 2];
@@ -886,15 +905,14 @@ describe('control flow - for', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
         imports: [TestComponent, NgIf],
         template: `<test>Before @for (item of items; track $index) {
         <span *ngIf="true" foo>{{item}}</span>
-      } After</test>`
+      } After</test>`,
       })
       class App {
         items = [1, 2];
@@ -917,8 +935,7 @@ describe('control flow - for', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Directive({
         selector: '[foo]',
@@ -936,7 +953,7 @@ describe('control flow - for', () => {
         template: `<test>Before @for (item of items; track $index) {
         <span foo>{{item}}</span>
       } After</test>
-      `
+      `,
       })
       class App {
         items = [1];
@@ -957,8 +974,7 @@ describe('control flow - for', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Directive({
         selector: '[templateDir]',
@@ -966,8 +982,8 @@ describe('control flow - for', () => {
       })
       class TemplateDirective implements OnInit {
         constructor(
-            private viewContainerRef: ViewContainerRef,
-            private templateRef: TemplateRef<any>,
+          private viewContainerRef: ViewContainerRef,
+          private templateRef: TemplateRef<any>,
         ) {
           directiveCount++;
         }
@@ -984,7 +1000,7 @@ describe('control flow - for', () => {
         template: `<test>Before @for (item of items; track $index) {
         <span *templateDir foo>{{item}}</span>
       } After</test>
-      `
+      `,
       })
       class App {
         items = [1];
@@ -1005,8 +1021,7 @@ describe('control flow - for', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Directive({
         selector: '[templateDir]',
@@ -1014,8 +1029,8 @@ describe('control flow - for', () => {
       })
       class TemplateDirective implements OnInit {
         constructor(
-            private viewContainerRef: ViewContainerRef,
-            private templateRef: TemplateRef<any>,
+          private viewContainerRef: ViewContainerRef,
+          private templateRef: TemplateRef<any>,
         ) {
           directiveCount++;
         }
@@ -1032,7 +1047,7 @@ describe('control flow - for', () => {
         template: `<test>Before @for (item of items; track $index) {
         <ng-template templateDir foo>{{item}}</ng-template>
       } After</test>
-      `
+      `,
       })
       class App {
         items = [1];
diff --git a/packages/core/test/acceptance/control_flow_if_spec.ts b/packages/core/test/acceptance/control_flow_if_spec.ts
index 4d8290eca6813..c544a08c6b2c5 100644
--- a/packages/core/test/acceptance/control_flow_if_spec.ts
+++ b/packages/core/test/acceptance/control_flow_if_spec.ts
@@ -6,9 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {NgFor} from '@angular/common';
-import {ChangeDetectorRef, Component, Directive, inject, Input, OnInit, Pipe, PipeTransform, TemplateRef, ViewContainerRef} from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  Directive,
+  inject,
+  Input,
+  OnInit,
+  Pipe,
+  PipeTransform,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 // Basic shared pipe used during testing.
@@ -152,18 +162,26 @@ describe('control flow - if', () => {
     const fixture = TestBed.createComponent(TestComponent);
     fixture.detectChanges();
     const buttons = Array.from<HTMLButtonElement>(fixture.nativeElement.querySelectorAll('button'));
-    buttons.forEach(button => button.click());
+    buttons.forEach((button) => button.click());
     fixture.detectChanges();
 
-    expect(logs).toEqual([['Root', 1, 2], ['Inner', 1, 2, 3], ['Innermost', 1, 2, 3, 4]]);
+    expect(logs).toEqual([
+      ['Root', 1, 2],
+      ['Inner', 1, 2, 3],
+      ['Innermost', 1, 2, 3, 4],
+    ]);
 
     logs = [];
     fixture.componentInstance.value = 2;
     fixture.detectChanges();
 
-    buttons.forEach(button => button.click());
+    buttons.forEach((button) => button.click());
     fixture.detectChanges();
-    expect(logs).toEqual([['Root', 2, 4], ['Inner', 2, 4, 6], ['Innermost', 2, 4, 6, 8]]);
+    expect(logs).toEqual([
+      ['Root', 2, 4],
+      ['Inner', 2, 4, 6],
+      ['Innermost', 2, 4, 6, 8],
+    ]);
   });
 
   it('should expose expression value passed through a pipe in context', () => {
@@ -266,8 +284,7 @@ describe('control flow - if', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -276,10 +293,9 @@ describe('control flow - if', () => {
         <test>Before @if (true) {
           <span foo>foo</span>
         } After</test>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -304,8 +320,7 @@ describe('control flow - if', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -314,7 +329,7 @@ describe('control flow - if', () => {
         <test>Before @if (true) {
           <span [foo]="value">foo</span>
         } After</test>
-      `
+      `,
       })
       class App {
         value = 1;
@@ -333,8 +348,7 @@ describe('control flow - if', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -344,10 +358,9 @@ describe('control flow - if', () => {
           <span foo>one</span>
           <div foo>two</div>
         } After</test>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -361,8 +374,7 @@ describe('control flow - if', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -374,10 +386,9 @@ describe('control flow - if', () => {
             <span>bar</span>
           </ng-container>
         } After</test>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -393,8 +404,7 @@ describe('control flow - if', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -405,10 +415,9 @@ describe('control flow - if', () => {
           <span foo>foo</span>
           <!-- after -->
         } After</test>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -421,10 +430,9 @@ describe('control flow - if', () => {
         standalone: true,
         selector: 'test',
         template:
-            'if: (<ng-content select="[if_case]"/>),  else: (<ng-content select="[else_case]"/>)',
+          'if: (<ng-content select="[if_case]"/>),  else: (<ng-content select="[else_case]"/>)',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -437,7 +445,7 @@ describe('control flow - if', () => {
             <span else_case>else content</span>
           }
         </test>
-      `
+      `,
       })
       class App {
         value = true;
@@ -456,20 +464,18 @@ describe('control flow - if', () => {
       expect(fixture.nativeElement.textContent).toBe('if: (if content), else: ()');
     });
 
-    it('should project @if an @else content into separate slots when if has default content',
-       () => {
-         @Component({
-           standalone: true,
-           selector: 'test',
-           template: 'if: (<ng-content />),  else: (<ng-content select="[else_case]"/>)',
-         })
-         class TestComponent {
-         }
-
-         @Component({
-           standalone: true,
-           imports: [TestComponent],
-           template: `
+    it('should project @if an @else content into separate slots when if has default content', () => {
+      @Component({
+        standalone: true,
+        selector: 'test',
+        template: 'if: (<ng-content />),  else: (<ng-content select="[else_case]"/>)',
+      })
+      class TestComponent {}
+
+      @Component({
+        standalone: true,
+        imports: [TestComponent],
+        template: `
               <test>
                 @if (value) {
                   <span>if content</span>
@@ -477,39 +483,37 @@ describe('control flow - if', () => {
                   <span else_case>else content</span>
                 }
               </test>
-            `
-         })
-         class App {
-           value = true;
-         }
-
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('if: (if content), else: ()');
-
-         fixture.componentInstance.value = false;
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('if: (), else: (else content)');
-
-         fixture.componentInstance.value = true;
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('if: (if content), else: ()');
-       });
-
-    it('should project @if an @else content into separate slots when else has default content',
-       () => {
-         @Component({
-           standalone: true,
-           selector: 'test',
-           template: 'if: (<ng-content select="[if_case]"/>),  else: (<ng-content/>)',
-         })
-         class TestComponent {
-         }
-
-         @Component({
-           standalone: true,
-           imports: [TestComponent],
-           template: `
+            `,
+      })
+      class App {
+        value = true;
+      }
+
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('if: (if content), else: ()');
+
+      fixture.componentInstance.value = false;
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('if: (), else: (else content)');
+
+      fixture.componentInstance.value = true;
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('if: (if content), else: ()');
+    });
+
+    it('should project @if an @else content into separate slots when else has default content', () => {
+      @Component({
+        standalone: true,
+        selector: 'test',
+        template: 'if: (<ng-content select="[if_case]"/>),  else: (<ng-content/>)',
+      })
+      class TestComponent {}
+
+      @Component({
+        standalone: true,
+        imports: [TestComponent],
+        template: `
         <test>
           @if (value) {
             <span if_case>if content</span>
@@ -517,77 +521,71 @@ describe('control flow - if', () => {
             <span>else content</span>
           }
         </test>
-      `
-         })
-         class App {
-           value = true;
-         }
-
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('if: (if content), else: ()');
-
-         fixture.componentInstance.value = false;
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('if: (), else: (else content)');
-
-         fixture.componentInstance.value = true;
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('if: (if content), else: ()');
-       });
-
-    it('should project the root node when preserveWhitespaces is enabled and there are no whitespace nodes',
-       () => {
-         @Component({
-           standalone: true,
-           selector: 'test',
-           template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
-         })
-         class TestComponent {
-         }
-
-         @Component({
-           standalone: true,
-           imports: [TestComponent],
-           preserveWhitespaces: true,
-           template: '<test>Before @if (true) {<span foo>one</span>} After</test>'
-         })
-         class App {
-         }
-
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('Main: Before  After Slot: one');
-       });
-
-    it('should not project the root node when preserveWhitespaces is enabled and there are whitespace nodes',
-       () => {
-         @Component({
-           standalone: true,
-           selector: 'test',
-           template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
-         })
-         class TestComponent {
-         }
-
-         @Component({
-           standalone: true,
-           imports: [TestComponent],
-           preserveWhitespaces: true,
-           // Note the whitespace due to the indentation inside @if.
-           template: `
+      `,
+      })
+      class App {
+        value = true;
+      }
+
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('if: (if content), else: ()');
+
+      fixture.componentInstance.value = false;
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('if: (), else: (else content)');
+
+      fixture.componentInstance.value = true;
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('if: (if content), else: ()');
+    });
+
+    it('should project the root node when preserveWhitespaces is enabled and there are no whitespace nodes', () => {
+      @Component({
+        standalone: true,
+        selector: 'test',
+        template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
+      })
+      class TestComponent {}
+
+      @Component({
+        standalone: true,
+        imports: [TestComponent],
+        preserveWhitespaces: true,
+        template: '<test>Before @if (true) {<span foo>one</span>} After</test>',
+      })
+      class App {}
+
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('Main: Before  After Slot: one');
+    });
+
+    it('should not project the root node when preserveWhitespaces is enabled and there are whitespace nodes', () => {
+      @Component({
+        standalone: true,
+        selector: 'test',
+        template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
+      })
+      class TestComponent {}
+
+      @Component({
+        standalone: true,
+        imports: [TestComponent],
+        preserveWhitespaces: true,
+        // Note the whitespace due to the indentation inside @if.
+        template: `
             <test>Before @if (true) {
               <span foo>one</span>
             } After</test>
-          `
-         })
-         class App {
-         }
+          `,
+      })
+      class App {}
 
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toMatch(/Main: Before\s+one\s+After Slot:/);
-       });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toMatch(/Main: Before\s+one\s+After Slot:/);
+    });
 
     it('should not project the root node across multiple layers of @if', () => {
       @Component({
@@ -595,8 +593,7 @@ describe('control flow - if', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
@@ -607,10 +604,9 @@ describe('control flow - if', () => {
             <span foo>one</span>
           }
         } After</test>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -623,15 +619,14 @@ describe('control flow - if', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Component({
         standalone: true,
         imports: [TestComponent, NgFor],
         template: `<test>Before @if (true) {
         <span *ngFor="let item of items" foo>{{item}}</span>
-      } After</test>`
+      } After</test>`,
       })
       class App {
         items = [1, 2];
@@ -654,8 +649,7 @@ describe('control flow - if', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Directive({
         selector: '[foo]',
@@ -673,10 +667,9 @@ describe('control flow - if', () => {
         template: `<test>Before @if (true) {
         <span foo>foo</span>
       } After</test>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -693,8 +686,7 @@ describe('control flow - if', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Directive({
         selector: '[templateDir]',
@@ -702,8 +694,8 @@ describe('control flow - if', () => {
       })
       class TemplateDirective implements OnInit {
         constructor(
-            private viewContainerRef: ViewContainerRef,
-            private templateRef: TemplateRef<any>,
+          private viewContainerRef: ViewContainerRef,
+          private templateRef: TemplateRef<any>,
         ) {
           directiveCount++;
         }
@@ -720,10 +712,9 @@ describe('control flow - if', () => {
         template: `<test>Before @if (true) {
         <span *templateDir foo>foo</span>
       } After</test>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -740,8 +731,7 @@ describe('control flow - if', () => {
         selector: 'test',
         template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       @Directive({
         selector: '[templateDir]',
@@ -749,8 +739,8 @@ describe('control flow - if', () => {
       })
       class TemplateDirective implements OnInit {
         constructor(
-            private viewContainerRef: ViewContainerRef,
-            private templateRef: TemplateRef<any>,
+          private viewContainerRef: ViewContainerRef,
+          private templateRef: TemplateRef<any>,
         ) {
           directiveCount++;
         }
@@ -767,10 +757,9 @@ describe('control flow - if', () => {
         template: `<test>Before @if (true) {
           <ng-template templateDir foo>foo</ng-template>
       } After</test>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -779,51 +768,49 @@ describe('control flow - if', () => {
       expect(fixture.nativeElement.textContent).toBe('Main: Before  After Slot: foo');
     });
 
-    it('should not match a directive with a class-based selector only meant for content projection',
-       () => {
-         let directiveCount = 0;
-
-         @Component({
-           standalone: true,
-           selector: 'test',
-           template: 'Main: <ng-content/> Slot: <ng-content select=".foo"/>',
-         })
-         class TestComponent {
-         }
-
-         @Directive({
-           selector: '.foo',
-           standalone: true,
-         })
-         class TemplateDirective {
-           constructor() {
-             directiveCount++;
-           }
-         }
-
-         @Component({
-           standalone: true,
-           imports: [TestComponent, TemplateDirective],
-           template: `<test>Before @if (condition) {
+    it('should not match a directive with a class-based selector only meant for content projection', () => {
+      let directiveCount = 0;
+
+      @Component({
+        standalone: true,
+        selector: 'test',
+        template: 'Main: <ng-content/> Slot: <ng-content select=".foo"/>',
+      })
+      class TestComponent {}
+
+      @Directive({
+        selector: '.foo',
+        standalone: true,
+      })
+      class TemplateDirective {
+        constructor() {
+          directiveCount++;
+        }
+      }
+
+      @Component({
+        standalone: true,
+        imports: [TestComponent, TemplateDirective],
+        template: `<test>Before @if (condition) {
           <div class="foo">foo</div>
       } After</test>
-      `
-         })
-         class App {
-           condition = false;
-         }
+      `,
+      })
+      class App {
+        condition = false;
+      }
 
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
 
-         expect(directiveCount).toBe(0);
-         expect(fixture.nativeElement.textContent).toBe('Main: Before  After Slot: ');
+      expect(directiveCount).toBe(0);
+      expect(fixture.nativeElement.textContent).toBe('Main: Before  After Slot: ');
 
-         fixture.componentInstance.condition = true;
-         fixture.detectChanges();
+      fixture.componentInstance.condition = true;
+      fixture.detectChanges();
 
-         expect(directiveCount).toBe(1);
-         expect(fixture.nativeElement.textContent).toBe('Main: Before  After Slot: foo');
-       });
+      expect(directiveCount).toBe(1);
+      expect(fixture.nativeElement.textContent).toBe('Main: Before  After Slot: foo');
+    });
   });
 });
diff --git a/packages/core/test/acceptance/control_flow_switch_spec.ts b/packages/core/test/acceptance/control_flow_switch_spec.ts
index d37dab18d3675..8fcf26da53847 100644
--- a/packages/core/test/acceptance/control_flow_switch_spec.ts
+++ b/packages/core/test/acceptance/control_flow_switch_spec.ts
@@ -27,7 +27,7 @@ describe('control flow - switch', () => {
             @case (1) {case 1}
             @default {default}
           }
-        `
+        `,
     })
     class TestComponent {
       case = 0;
@@ -57,7 +57,7 @@ describe('control flow - switch', () => {
             @case (2) {case 2}
             @default {default}
           }
-        `
+        `,
     })
     class TestComponent {
       case = 0;
@@ -87,7 +87,7 @@ describe('control flow - switch', () => {
             @case (2 | multiply:2) {case 4}
             @default {default}
           }
-        `
+        `,
     })
     class TestComponent {
       case = 0;
@@ -136,21 +136,19 @@ describe('control flow - switch', () => {
     expect(fixture.nativeElement.textContent).toBe('One');
   });
 
-  it('should project @switch cases into appropriate slots when selectors are used for all cases',
-     () => {
-       @Component({
-         standalone: true,
-         selector: 'test',
-         template:
-             'case 1: (<ng-content select="[case_1]"/>), case 2: (<ng-content select="[case_2]"/>), case 3: (<ng-content select="[case_3]"/>)',
-       })
-       class TestComponent {
-       }
-
-       @Component({
-         standalone: true,
-         imports: [TestComponent],
-         template: `
+  it('should project @switch cases into appropriate slots when selectors are used for all cases', () => {
+    @Component({
+      standalone: true,
+      selector: 'test',
+      template:
+        'case 1: (<ng-content select="[case_1]"/>), case 2: (<ng-content select="[case_2]"/>), case 3: (<ng-content select="[case_3]"/>)',
+    })
+    class TestComponent {}
+
+    @Component({
+      standalone: true,
+      imports: [TestComponent],
+      template: `
             <test>
               @switch (value) {
                 @case (1) {
@@ -164,40 +162,38 @@ describe('control flow - switch', () => {
                 }
               }
             </test>
-          `
-       })
-       class App {
-         value = 1;
-       }
-
-       const fixture = TestBed.createComponent(App);
-       fixture.detectChanges();
-       expect(fixture.nativeElement.textContent).toBe('case 1: (value 1), case 2: (), case 3: ()');
-
-       fixture.componentInstance.value = 2;
-       fixture.detectChanges();
-       expect(fixture.nativeElement.textContent).toBe('case 1: (), case 2: (value 2), case 3: ()');
-
-       fixture.componentInstance.value = 3;
-       fixture.detectChanges();
-       expect(fixture.nativeElement.textContent).toBe('case 1: (), case 2: (), case 3: (value 3)');
-     });
-
-  it('should project @switch cases into appropriate slots when selectors are used for some cases',
-     () => {
-       @Component({
-         standalone: true,
-         selector: 'test',
-         template:
-             'case 1: (<ng-content select="[case_1]"/>), case 2: (<ng-content />), case 3: (<ng-content select="[case_3]"/>)',
-       })
-       class TestComponent {
-       }
-
-       @Component({
-         standalone: true,
-         imports: [TestComponent],
-         template: `
+          `,
+    })
+    class App {
+      value = 1;
+    }
+
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toBe('case 1: (value 1), case 2: (), case 3: ()');
+
+    fixture.componentInstance.value = 2;
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toBe('case 1: (), case 2: (value 2), case 3: ()');
+
+    fixture.componentInstance.value = 3;
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toBe('case 1: (), case 2: (), case 3: (value 3)');
+  });
+
+  it('should project @switch cases into appropriate slots when selectors are used for some cases', () => {
+    @Component({
+      standalone: true,
+      selector: 'test',
+      template:
+        'case 1: (<ng-content select="[case_1]"/>), case 2: (<ng-content />), case 3: (<ng-content select="[case_3]"/>)',
+    })
+    class TestComponent {}
+
+    @Component({
+      standalone: true,
+      imports: [TestComponent],
+      template: `
           <test>
             @switch (value) {
               @case (1) {
@@ -211,22 +207,22 @@ describe('control flow - switch', () => {
               }
             }
           </test>
-        `
-       })
-       class App {
-         value = 1;
-       }
-
-       const fixture = TestBed.createComponent(App);
-       fixture.detectChanges();
-       expect(fixture.nativeElement.textContent).toBe('case 1: (value 1), case 2: (), case 3: ()');
-
-       fixture.componentInstance.value = 2;
-       fixture.detectChanges();
-       expect(fixture.nativeElement.textContent).toBe('case 1: (), case 2: (value 2), case 3: ()');
-
-       fixture.componentInstance.value = 3;
-       fixture.detectChanges();
-       expect(fixture.nativeElement.textContent).toBe('case 1: (), case 2: (), case 3: (value 3)');
-     });
+        `,
+    })
+    class App {
+      value = 1;
+    }
+
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toBe('case 1: (value 1), case 2: (), case 3: ()');
+
+    fixture.componentInstance.value = 2;
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toBe('case 1: (), case 2: (value 2), case 3: ()');
+
+    fixture.componentInstance.value = 3;
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toBe('case 1: (), case 2: (), case 3: (value 3)');
+  });
 });
diff --git a/packages/core/test/acceptance/copy_definition_feature_spec.ts b/packages/core/test/acceptance/copy_definition_feature_spec.ts
index bca21b65eb5b6..1d75d0417a169 100644
--- a/packages/core/test/acceptance/copy_definition_feature_spec.ts
+++ b/packages/core/test/acceptance/copy_definition_feature_spec.ts
@@ -6,7 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, NgModule, ɵɵCopyDefinitionFeature as CopyDefinitionFeature, ɵɵdefineComponent as defineComponent, ɵɵInheritDefinitionFeature as InheritDefinitionFeature} from '@angular/core';
+import {
+  Component,
+  NgModule,
+  ɵɵCopyDefinitionFeature as CopyDefinitionFeature,
+  ɵɵdefineComponent as defineComponent,
+  ɵɵInheritDefinitionFeature as InheritDefinitionFeature,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 describe('CopyDefinitionFeature', () => {
@@ -23,11 +29,10 @@ describe('CopyDefinitionFeature', () => {
         decls: 0,
         vars: 0,
         inputs: {name: 'name'},
-        template:
-            function BaseComponent_Template(rf, ctx) {
-              ctx.rendered = true;
-            },
-        encapsulation: 2
+        template: function BaseComponent_Template(rf, ctx) {
+          ctx.rendered = true;
+        },
+        encapsulation: 2,
       });
       static ɵfac = function BaseComponent_Factory(t: any) {
         return new (t || BaseComponent)();
@@ -44,7 +49,7 @@ describe('CopyDefinitionFeature', () => {
         decls: 0,
         vars: 0,
         template: function ChildComponent_Template(rf, ctx) {},
-        encapsulation: 2
+        encapsulation: 2,
       });
       static override ɵfac = function ChildComponent_Factory(t: any) {
         return new (t || ChildComponent)();
@@ -55,15 +60,13 @@ describe('CopyDefinitionFeature', () => {
       declarations: [ChildComponent],
       exports: [ChildComponent],
     })
-    class Module {
-    }
+    class Module {}
 
     @Component({
       selector: 'test-cmp',
       template: '<some-cmp name="Success!"></some-cmp>',
     })
-    class TestCmp {
-    }
+    class TestCmp {}
 
     TestBed.configureTestingModule({
       declarations: [TestCmp],
diff --git a/packages/core/test/acceptance/csp_spec.ts b/packages/core/test/acceptance/csp_spec.ts
index 6cf23fc06aaab..5f17d01c34f57 100644
--- a/packages/core/test/acceptance/csp_spec.ts
+++ b/packages/core/test/acceptance/csp_spec.ts
@@ -6,7 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, CSP_NONCE, destroyPlatform, ElementRef, inject, ViewEncapsulation} from '@angular/core';
+import {
+  Component,
+  CSP_NONCE,
+  destroyPlatform,
+  ElementRef,
+  inject,
+  ViewEncapsulation,
+} from '@angular/core';
 import {bootstrapApplication} from '@angular/platform-browser';
 import {withBody} from '@angular/private/testing';
 
@@ -31,121 +38,121 @@ describe('CSP integration', () => {
     return nonces;
   }
 
-  it('should use the predefined ngCspNonce when inserting styles with emulated encapsulation',
-     withBody('<app ngCspNonce="emulated-nonce"></app>', async () => {
-       @Component({
-         selector: 'uses-styles',
-         template: '',
-         styles: [testStyles],
-         standalone: true,
-         encapsulation: ViewEncapsulation.Emulated
-       })
-       class UsesStyles {
-       }
-
-       @Component({
-         selector: 'app',
-         standalone: true,
-         template: '<uses-styles></uses-styles>',
-         imports: [UsesStyles]
-       })
-       class App {
-       }
-
-       const appRef = await bootstrapApplication(App);
-
-       expect(findTestNonces(document)).toEqual(['emulated-nonce']);
-
-       appRef.destroy();
-     }));
-
-  it('should use the predefined ngCspNonce when inserting styles with no encapsulation',
-     withBody('<app ngCspNonce="disabled-nonce"></app>', async () => {
-       @Component({
-         selector: 'uses-styles',
-         template: '',
-         styles: [testStyles],
-         standalone: true,
-         encapsulation: ViewEncapsulation.None
-       })
-       class UsesStyles {
-       }
-
-       @Component({
-         selector: 'app',
-         standalone: true,
-         template: '<uses-styles></uses-styles>',
-         imports: [UsesStyles]
-       })
-       class App {
-       }
-
-       const appRef = await bootstrapApplication(App);
-
-       expect(findTestNonces(document)).toEqual(['disabled-nonce']);
-
-       appRef.destroy();
-     }));
-
-
-  it('should use the predefined ngCspNonce when inserting styles with shadow DOM encapsulation',
-     withBody('<app ngCspNonce="shadow-nonce"></app>', async () => {
-       if (!document.body.attachShadow) {
-         return;
-       }
-
-       let usesStylesRootNode!: HTMLElement;
-
-       @Component({
-         selector: 'uses-styles',
-         template: '',
-         styles: [testStyles],
-         standalone: true,
-         encapsulation: ViewEncapsulation.ShadowDom
-       })
-       class UsesStyles {
-         constructor() {
-           usesStylesRootNode = inject(ElementRef).nativeElement;
-         }
-       }
-
-       @Component({
-         selector: 'app',
-         standalone: true,
-         template: '<uses-styles></uses-styles>',
-         imports: [UsesStyles]
-       })
-       class App {
-       }
-
-       const appRef = await bootstrapApplication(App);
-
-       expect(findTestNonces(usesStylesRootNode.shadowRoot!)).toEqual(['shadow-nonce']);
-
-       appRef.destroy();
-     }));
-
-  it('should prefer nonce provided through DI over one provided in the DOM',
-     withBody('<app ngCspNonce="dom-nonce"></app>', async () => {
-       @Component({selector: 'uses-styles', template: '', styles: [testStyles], standalone: true})
-       class UsesStyles {
-       }
-
-       @Component({
-         selector: 'app',
-         standalone: true,
-         template: '<uses-styles></uses-styles>',
-         imports: [UsesStyles]
-       })
-       class App {
-       }
-
-       const appRef = await bootstrapApplication(App, {
-         providers: [{provide: CSP_NONCE, useValue: 'di-nonce'}],
-       });
-
-       expect(findTestNonces(document)).toEqual(['di-nonce']);
-
-       appRef.destroy();
-     }));
+  it(
+    'should use the predefined ngCspNonce when inserting styles with emulated encapsulation',
+    withBody('<app ngCspNonce="emulated-nonce"></app>', async () => {
+      @Component({
+        selector: 'uses-styles',
+        template: '',
+        styles: [testStyles],
+        standalone: true,
+        encapsulation: ViewEncapsulation.Emulated,
+      })
+      class UsesStyles {}
+
+      @Component({
+        selector: 'app',
+        standalone: true,
+        template: '<uses-styles></uses-styles>',
+        imports: [UsesStyles],
+      })
+      class App {}
+
+      const appRef = await bootstrapApplication(App);
+
+      expect(findTestNonces(document)).toEqual(['emulated-nonce']);
+
+      appRef.destroy();
+    }),
+  );
+
+  it(
+    'should use the predefined ngCspNonce when inserting styles with no encapsulation',
+    withBody('<app ngCspNonce="disabled-nonce"></app>', async () => {
+      @Component({
+        selector: 'uses-styles',
+        template: '',
+        styles: [testStyles],
+        standalone: true,
+        encapsulation: ViewEncapsulation.None,
+      })
+      class UsesStyles {}
+
+      @Component({
+        selector: 'app',
+        standalone: true,
+        template: '<uses-styles></uses-styles>',
+        imports: [UsesStyles],
+      })
+      class App {}
+
+      const appRef = await bootstrapApplication(App);
+
+      expect(findTestNonces(document)).toEqual(['disabled-nonce']);
+
+      appRef.destroy();
+    }),
+  );
+
+  it(
+    'should use the predefined ngCspNonce when inserting styles with shadow DOM encapsulation',
+    withBody('<app ngCspNonce="shadow-nonce"></app>', async () => {
+      if (!document.body.attachShadow) {
+        return;
+      }
+
+      let usesStylesRootNode!: HTMLElement;
+
+      @Component({
+        selector: 'uses-styles',
+        template: '',
+        styles: [testStyles],
+        standalone: true,
+        encapsulation: ViewEncapsulation.ShadowDom,
+      })
+      class UsesStyles {
+        constructor() {
+          usesStylesRootNode = inject(ElementRef).nativeElement;
+        }
+      }
+
+      @Component({
+        selector: 'app',
+        standalone: true,
+        template: '<uses-styles></uses-styles>',
+        imports: [UsesStyles],
+      })
+      class App {}
+
+      const appRef = await bootstrapApplication(App);
+
+      expect(findTestNonces(usesStylesRootNode.shadowRoot!)).toEqual(['shadow-nonce']);
+
+      appRef.destroy();
+    }),
+  );
+
+  it(
+    'should prefer nonce provided through DI over one provided in the DOM',
+    withBody('<app ngCspNonce="dom-nonce"></app>', async () => {
+      @Component({selector: 'uses-styles', template: '', styles: [testStyles], standalone: true})
+      class UsesStyles {}
+
+      @Component({
+        selector: 'app',
+        standalone: true,
+        template: '<uses-styles></uses-styles>',
+        imports: [UsesStyles],
+      })
+      class App {}
+
+      const appRef = await bootstrapApplication(App, {
+        providers: [{provide: CSP_NONCE, useValue: 'di-nonce'}],
+      });
+
+      expect(findTestNonces(document)).toEqual(['di-nonce']);
+
+      appRef.destroy();
+    }),
+  );
 });
diff --git a/packages/core/test/acceptance/defer_spec.ts b/packages/core/test/acceptance/defer_spec.ts
index afe4e88b4d7d3..b3b67c68fb749 100644
--- a/packages/core/test/acceptance/defer_spec.ts
+++ b/packages/core/test/acceptance/defer_spec.ts
@@ -7,12 +7,46 @@
  */
 
 import {CommonModule, ɵPLATFORM_BROWSER_ID as PLATFORM_BROWSER_ID} from '@angular/common';
-import {ApplicationRef, Attribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentRef, createComponent, DebugElement, Directive, EnvironmentInjector, ErrorHandler, getDebugNode, inject, Injectable, InjectionToken, Injector, Input, NgModule, NgZone, Pipe, PipeTransform, PLATFORM_ID, QueryList, Type, ViewChildren, ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR} from '@angular/core';
+import {
+  ApplicationRef,
+  Attribute,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ComponentRef,
+  createComponent,
+  DebugElement,
+  Directive,
+  EnvironmentInjector,
+  ErrorHandler,
+  getDebugNode,
+  inject,
+  Injectable,
+  InjectionToken,
+  Injector,
+  Input,
+  NgModule,
+  NgZone,
+  Pipe,
+  PipeTransform,
+  PLATFORM_ID,
+  QueryList,
+  Type,
+  ViewChildren,
+  ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
+} from '@angular/core';
 import {isRouterOutletInjector} from '@angular/core/src/defer/instructions';
 import {getComponentDef} from '@angular/core/src/render3/definition';
 import {NodeInjector} from '@angular/core/src/render3/di';
 import {getInjectorResolutionPath} from '@angular/core/src/render3/util/injector_discovery_utils';
-import {ComponentFixture, DeferBlockBehavior, fakeAsync, flush, TestBed, tick} from '@angular/core/testing';
+import {
+  ComponentFixture,
+  DeferBlockBehavior,
+  fakeAsync,
+  flush,
+  TestBed,
+  tick,
+} from '@angular/core/testing';
 import {ActivatedRoute, provideRouter, Router, RouterOutlet} from '@angular/router';
 
 /**
@@ -38,7 +72,7 @@ function clearDirectiveDefs(type: Type<unknown>): void {
  * of a macrotask queue.
  */
 function dynamicImportOf<T>(type: T, timeout = 0): Promise<T> {
-  return new Promise<T>(resolve => {
+  return new Promise<T>((resolve) => {
     setTimeout(() => resolve(type), timeout);
   });
 }
@@ -76,10 +110,11 @@ function timer(delay: number): Promise<void> {
  * is invoked at a specified time.
  */
 async function verifyTimeline(
-    fixture: ComponentFixture<unknown>,
-    ...slots: Array<[time: number, expected: string|VoidFunction]>) {
+  fixture: ComponentFixture<unknown>,
+  ...slots: Array<[time: number, expected: string | VoidFunction]>
+) {
   for (let i = 0; i < slots.length; i++) {
-    const timeToWait = i === 0 ? slots[0][0] : (slots[i][0] - slots[i - 1][0]);
+    const timeToWait = i === 0 ? slots[0][0] : slots[i][0] - slots[i - 1][0];
     const slotValue = slots[i][1];
     // This is an action, just invoke a function.
     if (typeof slotValue === 'function') {
@@ -94,7 +129,6 @@ async function verifyTimeline(
   }
 }
 
-
 /**
  * Given a template, creates a component fixture and returns
  * a set of helper functions to trigger rendering of prefetching
@@ -127,7 +161,7 @@ function createFixture(template: string) {
       return () => {
         return [dynamicImportOf(NestedCmp, loadingTimeout)];
       };
-    }
+    },
   };
 
   TestBed.configureTestingModule({
@@ -172,8 +206,7 @@ describe('@defer', () => {
       standalone: true,
       template: 'Hi!',
     })
-    class MyLazyCmp {
-    }
+    class MyLazyCmp {}
 
     @Component({
       standalone: true,
@@ -189,7 +222,7 @@ describe('@defer', () => {
         } @error {
           Failed to load dependencies :(
         }
-      `
+      `,
     })
     class MyCmp {
       isVisible = false;
@@ -218,8 +251,7 @@ describe('@defer', () => {
       standalone: true,
       template: 'Hi!',
     })
-    class MyLazyCmp {
-    }
+    class MyLazyCmp {}
 
     @Component({
       standalone: true,
@@ -230,7 +262,7 @@ describe('@defer', () => {
         @defer (when isVisible) {
           <my-lazy-cmp />
         }
-      `
+      `,
     })
     class MyCmp {
       isVisible = false;
@@ -264,7 +296,7 @@ describe('@defer', () => {
     @Component({
       standalone: true,
       imports: [TestPipe],
-      template: `@defer (when isVisible | test; prefetch when isVisible | test) {Hello}`
+      template: `@defer (when isVisible | test; prefetch when isVisible | test) {Hello}`,
     })
     class MyCmp {
       isVisible = false;
@@ -330,7 +362,7 @@ describe('@defer', () => {
           <div mode="defer" dirA dirB dirC></div>
         }
         <div mode="eager" dirA dirB dirC></div>
-      `
+      `,
     })
     class MyCmp {
       isVisible = true;
@@ -371,10 +403,9 @@ describe('@defer', () => {
           @defer (on immediate) {
             <my-lazy-cmp />
           }
-        `
+        `,
       })
-      class MyCmp {
-      }
+      class MyCmp {}
 
       const fixture = TestBed.createComponent(MyCmp);
       fixture.detectChanges();
@@ -405,10 +436,9 @@ describe('@defer', () => {
           @defer (on immediate) {
             <my-lazy-cmp />
           }
-        `
+        `,
       })
-      class MyCmp {
-      }
+      class MyCmp {}
 
       const fixture = TestBed.createComponent(MyCmp);
       fixture.detectChanges();
@@ -440,10 +470,9 @@ describe('@defer', () => {
           @defer (on immediate) {
             <my-lazy-cmp />
           }
-        `
+        `,
       })
-      class MyCmp {
-      }
+      class MyCmp {}
 
       const fixture = TestBed.createComponent(MyCmp);
       fixture.detectChanges();
@@ -455,66 +484,66 @@ describe('@defer', () => {
       expect(fixture.nativeElement.outerHTML).toContain('<my-lazy-cmp>bar</my-lazy-cmp>');
     });
 
-    it('should render when both OnPush components used in other blocks (e.g. @placeholder)',
-       async () => {
-         @Component({
-           selector: 'my-lazy-cmp',
-           standalone: true,
-           changeDetection: ChangeDetectionStrategy.OnPush,
-           template: '{{ foo }}',
-         })
-         class MyLazyCmp {
-           foo = 'main';
-         }
+    it('should render when both OnPush components used in other blocks (e.g. @placeholder)', async () => {
+      @Component({
+        selector: 'my-lazy-cmp',
+        standalone: true,
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: '{{ foo }}',
+      })
+      class MyLazyCmp {
+        foo = 'main';
+      }
 
-         @Component({
-           selector: 'another-lazy-cmp',
-           standalone: true,
-           changeDetection: ChangeDetectionStrategy.OnPush,
-           template: '{{ foo }}',
-         })
-         class AnotherLazyCmp {
-           foo = 'placeholder';
-         }
+      @Component({
+        selector: 'another-lazy-cmp',
+        standalone: true,
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: '{{ foo }}',
+      })
+      class AnotherLazyCmp {
+        foo = 'placeholder';
+      }
 
-         @Component({
-           standalone: true,
-           selector: 'simple-app',
-           imports: [MyLazyCmp, AnotherLazyCmp],
-           changeDetection: ChangeDetectionStrategy.OnPush,
-           template: `
+      @Component({
+        standalone: true,
+        selector: 'simple-app',
+        imports: [MyLazyCmp, AnotherLazyCmp],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: `
               @defer (when isVisible) {
                 <my-lazy-cmp />
               } @placeholder {
                 <another-lazy-cmp />
               }
-            `
-         })
-         class MyCmp {
-           isVisible = false;
-           changeDetectorRef = inject(ChangeDetectorRef);
-
-           triggerDeferBlock() {
-             this.isVisible = true;
-             this.changeDetectorRef.detectChanges();
-           }
-         }
+            `,
+      })
+      class MyCmp {
+        isVisible = false;
+        changeDetectorRef = inject(ChangeDetectorRef);
+
+        triggerDeferBlock() {
+          this.isVisible = true;
+          this.changeDetectorRef.detectChanges();
+        }
+      }
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         // Expect placeholder to be rendered correctly.
-         expect(fixture.nativeElement.outerHTML)
-             .toContain('<another-lazy-cmp>placeholder</another-lazy-cmp>');
+      // Expect placeholder to be rendered correctly.
+      expect(fixture.nativeElement.outerHTML).toContain(
+        '<another-lazy-cmp>placeholder</another-lazy-cmp>',
+      );
 
-         fixture.componentInstance.triggerDeferBlock();
+      fixture.componentInstance.triggerDeferBlock();
 
-         // Wait for dependencies to load.
-         await allPendingDynamicImports();
-         fixture.detectChanges();
+      // Wait for dependencies to load.
+      await allPendingDynamicImports();
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.outerHTML).toContain('<my-lazy-cmp>main</my-lazy-cmp>');
-       });
+      expect(fixture.nativeElement.outerHTML).toContain('<my-lazy-cmp>main</my-lazy-cmp>');
+    });
   });
 
   describe('`on` conditions', () => {
@@ -540,10 +569,9 @@ describe('@defer', () => {
           } @loading {
             Loading
           }
-        `
+        `,
       })
-      class RootCmp {
-      }
+      class RootCmp {}
 
       let loadingFnInvokedTimes = 0;
       const deferDepsInterceptor = {
@@ -552,7 +580,7 @@ describe('@defer', () => {
             loadingFnInvokedTimes++;
             return [dynamicImportOf(NestedCmp)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
@@ -582,16 +610,15 @@ describe('@defer', () => {
 
       // Verify primary block content.
       const primaryBlockHTML = fixture.nativeElement.outerHTML;
-      expect(primaryBlockHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>');
+      expect(primaryBlockHTML).toContain(
+        '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>',
+      );
 
       // Expect that the loading resources function was not invoked again (counter remains 1).
       expect(loadingFnInvokedTimes).toBe(1);
     });
   });
 
-
   describe('directive matching', () => {
     it('should support directive matching in all blocks', async () => {
       @Component({
@@ -620,7 +647,7 @@ describe('@defer', () => {
           Failed to load dependencies :(
           <nested-cmp [block]="'error'" />
         }
-      `
+      `,
       })
       class MyCmp {
         isVisible = false;
@@ -629,30 +656,30 @@ describe('@defer', () => {
       const fixture = TestBed.createComponent(MyCmp);
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.outerHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="placeholder">Rendering placeholder block.</nested-cmp>');
+      expect(fixture.nativeElement.outerHTML).toContain(
+        '<nested-cmp ng-reflect-block="placeholder">Rendering placeholder block.</nested-cmp>',
+      );
 
       fixture.componentInstance.isVisible = true;
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.outerHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="loading">Rendering loading block.</nested-cmp>');
+      expect(fixture.nativeElement.outerHTML).toContain(
+        '<nested-cmp ng-reflect-block="loading">Rendering loading block.</nested-cmp>',
+      );
 
       // Wait for dependencies to load.
       await allPendingDynamicImports();
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.outerHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>');
+      expect(fixture.nativeElement.outerHTML).toContain(
+        '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>',
+      );
     });
   });
 
   describe('minimum and after conditions', () => {
     it('should support minimum and after conditions', fakeAsync(() => {
-         const {trigger, fixture} = createFixture(`
+      const {trigger, fixture} = createFixture(`
             @defer (when trigger; prefetch when prefetchTrigger) {
               <nested-cmp [block]="'Main'" />
             } @loading (after 100ms; minimum 150ms) {
@@ -664,19 +691,19 @@ describe('@defer', () => {
             }
           `);
 
-         verifyTimeline(
-             fixture,
-             [50, 'Placeholder'],
-             [100, trigger(170)],
-             [150, 'Placeholder'],
-             [250, 'Loading'],
-             [300, 'Loading'],
-             [450, 'Main'],
-         );
-       }));
+      verifyTimeline(
+        fixture,
+        [50, 'Placeholder'],
+        [100, trigger(170)],
+        [150, 'Placeholder'],
+        [250, 'Loading'],
+        [300, 'Loading'],
+        [450, 'Main'],
+      );
+    }));
 
     it('should support @placeholder with `minimum`', fakeAsync(() => {
-         const {trigger, fixture} = createFixture(`
+      const {trigger, fixture} = createFixture(`
           @defer (when trigger; prefetch when prefetchTrigger) {
             <nested-cmp [block]="'Main'" />
           } @placeholder (minimum 100ms) {
@@ -684,16 +711,11 @@ describe('@defer', () => {
           }
         `);
 
-         verifyTimeline(
-             fixture,
-             [0, trigger(40)],
-             [90, 'Placeholder'],
-             [100, 'Main'],
-         );
-       }));
+      verifyTimeline(fixture, [0, trigger(40)], [90, 'Placeholder'], [100, 'Main']);
+    }));
 
     it('should keep rendering @placeholder if trigger happened later', fakeAsync(() => {
-         const {trigger, fixture} = createFixture(`
+      const {trigger, fixture} = createFixture(`
           @defer (when trigger; prefetch when prefetchTrigger) {
             <nested-cmp [block]="'Main'" />
           } @placeholder (minimum 100ms) {
@@ -701,19 +723,19 @@ describe('@defer', () => {
           }
         `);
 
-         verifyTimeline(
-             fixture,
-             [0, 'Placeholder'],
-             [50, trigger(20)],
-             [90, 'Placeholder'],
-             [100, 'Main'],
-         );
-       }));
-
-    it('should transition from @placeholder to primary content ' +
-           'if it was prefetched',
-       fakeAsync(() => {
-         const {trigger, triggerPrefetch, fixture} = createFixture(`
+      verifyTimeline(
+        fixture,
+        [0, 'Placeholder'],
+        [50, trigger(20)],
+        [90, 'Placeholder'],
+        [100, 'Main'],
+      );
+    }));
+
+    it(
+      'should transition from @placeholder to primary content ' + 'if it was prefetched',
+      fakeAsync(() => {
+        const {trigger, triggerPrefetch, fixture} = createFixture(`
          @defer (when trigger; prefetch when prefetchTrigger) {
            <nested-cmp [block]="'Main'" />
          } @placeholder (minimum 100ms) {
@@ -721,18 +743,19 @@ describe('@defer', () => {
          }
        `);
 
-         verifyTimeline(
-             fixture,
-             [0, 'Placeholder'],
-             [20, triggerPrefetch(20)],
-             [150, 'Placeholder'],
-             [200, trigger(0)],
-             [225, 'Main'],
-         );
-       }));
+        verifyTimeline(
+          fixture,
+          [0, 'Placeholder'],
+          [20, triggerPrefetch(20)],
+          [150, 'Placeholder'],
+          [200, trigger(0)],
+          [225, 'Main'],
+        );
+      }),
+    );
 
     it('should support @loading with `minimum`', fakeAsync(() => {
-         const {trigger, fixture} = createFixture(`
+      const {trigger, fixture} = createFixture(`
           @defer (when trigger; prefetch when prefetchTrigger) {
             <nested-cmp [block]="'Main'" />
           } @loading (minimum 100ms) {
@@ -740,19 +763,19 @@ describe('@defer', () => {
           }
         `);
 
-         verifyTimeline(
-             fixture,
-             [0, trigger(20)],
-             // Even though loading happened in 20ms,
-             // we still render @loading block for longer
-             // period of time, since there was `minimum` defined.
-             [95, 'Loading'],
-             [100, 'Main'],
-         );
-       }));
+      verifyTimeline(
+        fixture,
+        [0, trigger(20)],
+        // Even though loading happened in 20ms,
+        // we still render @loading block for longer
+        // period of time, since there was `minimum` defined.
+        [95, 'Loading'],
+        [100, 'Main'],
+      );
+    }));
 
     it('should support @loading with `after` and `minimum`', fakeAsync(() => {
-         const {trigger, fixture} = createFixture(`
+      const {trigger, fixture} = createFixture(`
          @defer (when trigger; prefetch when prefetchTrigger) {
            <nested-cmp [block]="'Main'" />
          } @loading (after 100ms; minimum 150ms) {
@@ -760,21 +783,21 @@ describe('@defer', () => {
          }
        `);
 
-         verifyTimeline(
-             fixture,
-             [0, trigger(150)],
-             [50, ''],
-             // Start showing loading after `after` ms.
-             [100, 'Loading'],
-             [150, 'Loading'],
-             [200, 'Loading'],
-             // Render main content after `after` + `minimum` ms.
-             [300, 'Main'],
-         );
-       }));
+      verifyTimeline(
+        fixture,
+        [0, trigger(150)],
+        [50, ''],
+        // Start showing loading after `after` ms.
+        [100, 'Loading'],
+        [150, 'Loading'],
+        [200, 'Loading'],
+        // Render main content after `after` + `minimum` ms.
+        [300, 'Main'],
+      );
+    }));
 
     it('should skip @loading when resources were prefetched', fakeAsync(() => {
-         const {trigger, triggerPrefetch, fixture} = createFixture(`
+      const {trigger, triggerPrefetch, fixture} = createFixture(`
           @defer (when trigger; prefetch when prefetchTrigger) {
             <nested-cmp [block]="'Main'" />
           } @loading (minimum 100ms) {
@@ -782,17 +805,17 @@ describe('@defer', () => {
           }
         `);
 
-         verifyTimeline(
-             fixture,
-             [0, triggerPrefetch(50)],
-             [50, ''],
-             [75, ''],
-             [100, trigger(0)],
-             // We go directly into the final state, since
-             // resources were already preloaded.
-             [125, 'Main'],
-         );
-       }));
+      verifyTimeline(
+        fixture,
+        [0, triggerPrefetch(50)],
+        [50, ''],
+        [75, ''],
+        [100, trigger(0)],
+        // We go directly into the final state, since
+        // resources were already preloaded.
+        [125, 'Main'],
+      );
+    }));
   });
 
   describe('error handling', () => {
@@ -821,7 +844,7 @@ describe('@defer', () => {
             Failed to load dependencies :(
             <nested-cmp [block]="'error'" />
           }
-          `
+          `,
       })
       class MyCmp {
         isVisible = false;
@@ -831,13 +854,11 @@ describe('@defer', () => {
       const deferDepsInterceptor = {
         intercept() {
           return () => [failedDynamicImport()];
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
       });
 
       const fixture = TestBed.createComponent(MyCmp);
@@ -856,8 +877,9 @@ describe('@defer', () => {
 
       // Verify that the error block is rendered.
       // Also verify that selector matching works in an error block.
-      expect(fixture.nativeElement.outerHTML)
-          .toContain('<nested-cmp ng-reflect-block="error">Rendering error block.</nested-cmp>');
+      expect(fixture.nativeElement.outerHTML).toContain(
+        '<nested-cmp ng-reflect-block="error">Rendering error block.</nested-cmp>',
+      );
 
       // Verify that queries work within an error block.
       expect(fixture.componentInstance.cmps.length).toBe(1);
@@ -870,8 +892,7 @@ describe('@defer', () => {
         standalone: true,
         template: 'NestedCmp',
       })
-      class NestedCmp {
-      }
+      class NestedCmp {}
 
       @Component({
         standalone: true,
@@ -885,7 +906,7 @@ describe('@defer', () => {
           } @placeholder {
             Placeholder
           }
-        `
+        `,
       })
       class MyCmp {
         isVisible = false;
@@ -894,7 +915,7 @@ describe('@defer', () => {
       const deferDepsInterceptor = {
         intercept() {
           return () => [failedDynamicImport()];
-        }
+        },
       };
 
       const reportedErrors: Error[] = [];
@@ -905,7 +926,8 @@ describe('@defer', () => {
             useValue: deferDepsInterceptor,
           },
           {
-            provide: ErrorHandler, useClass: class extends ErrorHandler{
+            provide: ErrorHandler,
+            useClass: class extends ErrorHandler {
               override handleError(error: Error) {
                 reportedErrors.push(error);
               }
@@ -960,7 +982,7 @@ describe('@defer', () => {
           } @placeholder {
             Placeholder
           }
-        `
+        `,
       })
       class MyCmp {
         isVisible = false;
@@ -969,7 +991,7 @@ describe('@defer', () => {
       const deferDepsInterceptor = {
         intercept() {
           return () => [dynamicImportOf(CmpWithError)];
-        }
+        },
       };
 
       const reportedErrors: Error[] = [];
@@ -980,7 +1002,8 @@ describe('@defer', () => {
             useValue: deferDepsInterceptor,
           },
           {
-            provide: ErrorHandler, useClass: class extends ErrorHandler{
+            provide: ErrorHandler,
+            useClass: class extends ErrorHandler {
               override handleError(error: Error) {
                 reportedErrors.push(error);
               }
@@ -1041,7 +1064,7 @@ describe('@defer', () => {
             Failed to load dependencies :(
             <nested-cmp [block]="'error'" />
           }
-        `
+        `,
       })
       class MyCmp {
         isVisible = false;
@@ -1054,18 +1077,18 @@ describe('@defer', () => {
 
       expect(fixture.componentInstance.cmps.length).toBe(1);
       expect(fixture.componentInstance.cmps.get(0)?.block).toBe('placeholder');
-      expect(fixture.nativeElement.outerHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="placeholder">Rendering placeholder block.</nested-cmp>');
+      expect(fixture.nativeElement.outerHTML).toContain(
+        '<nested-cmp ng-reflect-block="placeholder">Rendering placeholder block.</nested-cmp>',
+      );
 
       fixture.componentInstance.isVisible = true;
       fixture.detectChanges();
 
       expect(fixture.componentInstance.cmps.length).toBe(1);
       expect(fixture.componentInstance.cmps.get(0)?.block).toBe('loading');
-      expect(fixture.nativeElement.outerHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="loading">Rendering loading block.</nested-cmp>');
+      expect(fixture.nativeElement.outerHTML).toContain(
+        '<nested-cmp ng-reflect-block="loading">Rendering loading block.</nested-cmp>',
+      );
 
       // Wait for dependencies to load.
       await allPendingDynamicImports();
@@ -1073,9 +1096,9 @@ describe('@defer', () => {
 
       expect(fixture.componentInstance.cmps.length).toBe(1);
       expect(fixture.componentInstance.cmps.get(0)?.block).toBe('primary');
-      expect(fixture.nativeElement.outerHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>');
+      expect(fixture.nativeElement.outerHTML).toContain(
+        '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>',
+      );
     });
   });
 
@@ -1086,16 +1109,14 @@ describe('@defer', () => {
         standalone: true,
         template: 'CmpA',
       })
-      class CmpA {
-      }
+      class CmpA {}
 
       @Component({
         selector: 'cmp-b',
         standalone: true,
         template: 'CmpB',
       })
-      class CmpB {
-      }
+      class CmpB {}
 
       @Component({
         selector: 'nested-cmp',
@@ -1124,7 +1145,7 @@ describe('@defer', () => {
             Failed to load dependencies :(
             <nested-cmp [block]="'error'" />
           }
-        `
+        `,
       })
       class MyCmp {
         @Input() isVisible = false;
@@ -1145,7 +1166,7 @@ describe('@defer', () => {
               Projected defer block placeholder.
             }
           </my-app>
-        `
+        `,
       })
       class RootCmp {
         isVisible = false;
@@ -1155,16 +1176,16 @@ describe('@defer', () => {
       const fixture = TestBed.createComponent(RootCmp);
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.outerHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="placeholder">Rendering placeholder block.</nested-cmp>');
+      expect(fixture.nativeElement.outerHTML).toContain(
+        '<nested-cmp ng-reflect-block="placeholder">Rendering placeholder block.</nested-cmp>',
+      );
 
       fixture.componentInstance.isVisible = true;
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.outerHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="loading">Rendering loading block.</nested-cmp>');
+      expect(fixture.nativeElement.outerHTML).toContain(
+        '<nested-cmp ng-reflect-block="loading">Rendering loading block.</nested-cmp>',
+      );
 
       // Wait for dependencies to load.
       await allPendingDynamicImports();
@@ -1172,9 +1193,9 @@ describe('@defer', () => {
 
       // Verify primary block content.
       const primaryBlockHTML = fixture.nativeElement.outerHTML;
-      expect(primaryBlockHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>');
+      expect(primaryBlockHTML).toContain(
+        '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>',
+      );
       expect(primaryBlockHTML).toContain('Projected content.');
       expect(primaryBlockHTML).toContain('<b>Including tags</b>');
       expect(primaryBlockHTML).toContain('<cmp-a>CmpA</cmp-a>');
@@ -1199,8 +1220,7 @@ describe('@defer', () => {
         standalone: true,
         template: 'CmpA',
       })
-      class CmpA {
-      }
+      class CmpA {}
 
       @Component({
         selector: 'nested-cmp',
@@ -1227,7 +1247,7 @@ describe('@defer', () => {
           } @placeholder {
             <nested-cmp [block]="'placeholder'" />
           }
-        `
+        `,
       })
       class RootCmp {
         isVisible = false;
@@ -1237,9 +1257,9 @@ describe('@defer', () => {
       const fixture = TestBed.createComponent(RootCmp);
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.outerHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="placeholder">Rendering placeholder block.</nested-cmp>');
+      expect(fixture.nativeElement.outerHTML).toContain(
+        '<nested-cmp ng-reflect-block="placeholder">Rendering placeholder block.</nested-cmp>',
+      );
 
       fixture.componentInstance.isVisible = true;
       fixture.detectChanges();
@@ -1249,9 +1269,9 @@ describe('@defer', () => {
 
       // Verify primary block content.
       const primaryBlockHTML = fixture.nativeElement.outerHTML;
-      expect(primaryBlockHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>');
+      expect(primaryBlockHTML).toContain(
+        '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>',
+      );
 
       // Make sure we have a nested block in a placeholder state.
       expect(primaryBlockHTML).toContain('Nested defer block placeholder.');
@@ -1274,8 +1294,7 @@ describe('@defer', () => {
         standalone: true,
         template: 'CmpA',
       })
-      class CmpA {
-      }
+      class CmpA {}
 
       @Component({
         standalone: true,
@@ -1289,23 +1308,20 @@ describe('@defer', () => {
               <cmp-a />
             }
           }
-        `
+        `,
       })
-      class RootCmp {
-      }
+      class RootCmp {}
 
       const deferDepsInterceptor = {
         intercept() {
           return () => {
             return [dynamicImportOf(CmpA)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
       });
 
       const fixture = TestBed.createComponent(RootCmp);
@@ -1319,8 +1335,9 @@ describe('@defer', () => {
       await fixture.whenStable();
 
       // Expect both <cmp-a> components to be rendered.
-      expect(fixture.nativeElement.innerHTML.replaceAll('<!--container-->', ''))
-          .toBe('<cmp-a>CmpA</cmp-a><cmp-a>CmpA</cmp-a>');
+      expect(fixture.nativeElement.innerHTML.replaceAll('<!--container-->', '')).toBe(
+        '<cmp-a>CmpA</cmp-a><cmp-a>CmpA</cmp-a>',
+      );
     });
   });
 
@@ -1343,18 +1360,22 @@ describe('@defer', () => {
     }
     resetCounters();
 
-    let nativeRequestIdleCallback: (callback: IdleRequestCallback, options?: IdleRequestOptions) =>
-        number;
+    let nativeRequestIdleCallback: (
+      callback: IdleRequestCallback,
+      options?: IdleRequestOptions,
+    ) => number;
     let nativeCancelIdleCallback: (id: number) => void;
 
-    const mockRequestIdleCallback =
-        (callback: IdleRequestCallback, options?: IdleRequestOptions): number => {
-          onIdleCallbackQueue.set(id, callback);
-          expect(idleCallbacksRequested).toBe(0);
-          expect(NgZone.isInAngularZone()).toBe(true);
-          idleCallbacksRequested++;
-          return id++;
-        };
+    const mockRequestIdleCallback = (
+      callback: IdleRequestCallback,
+      options?: IdleRequestOptions,
+    ): number => {
+      onIdleCallbackQueue.set(id, callback);
+      expect(idleCallbacksRequested).toBe(0);
+      expect(NgZone.isInAngularZone()).toBe(true);
+      idleCallbacksRequested++;
+      return id++;
+    };
 
     const mockCancelIdleCallback = (id: number) => {
       onIdleCallbackQueue.delete(id);
@@ -1405,7 +1426,7 @@ describe('@defer', () => {
           } @placeholder {
             Placeholder
           }
-        `
+        `,
       })
       class RootCmp {
         deferCond = false;
@@ -1419,13 +1440,11 @@ describe('@defer', () => {
             loadingFnInvokedTimes++;
             return [dynamicImportOf(NestedCmp)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
       });
 
       clearDirectiveDefs(RootCmp);
@@ -1460,9 +1479,9 @@ describe('@defer', () => {
 
       // Verify primary block content.
       const primaryBlockHTML = fixture.nativeElement.outerHTML;
-      expect(primaryBlockHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>');
+      expect(primaryBlockHTML).toContain(
+        '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>',
+      );
 
       // Expect that the loading resources function was not invoked again (counter remains 1).
       expect(loadingFnInvokedTimes).toBe(1);
@@ -1490,7 +1509,7 @@ describe('@defer', () => {
           } @placeholder {
             Placeholder
           }
-        `
+        `,
       })
       class RootCmp {
         deferCond = false;
@@ -1504,13 +1523,11 @@ describe('@defer', () => {
             loadingFnInvokedTimes++;
             return [failedDynamicImport()];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
       });
 
       clearDirectiveDefs(RootCmp);
@@ -1572,7 +1589,7 @@ describe('@defer', () => {
           } @placeholder {
             Placeholder
           }
-        `
+        `,
       })
       class RootCmp {
         deferCond = false;
@@ -1585,13 +1602,11 @@ describe('@defer', () => {
             loadingFnInvokedTimes++;
             return [dynamicImportOf(NestedCmp)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
       });
 
       clearDirectiveDefs(RootCmp);
@@ -1640,7 +1655,7 @@ describe('@defer', () => {
           } @placeholder {
             Placeholder
           }
-        `
+        `,
       })
       class RootCmp {
         deferCond = false;
@@ -1653,13 +1668,11 @@ describe('@defer', () => {
             loadingFnInvokedTimes++;
             return [dynamicImportOf(NestedCmp)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
       });
 
       clearDirectiveDefs(RootCmp);
@@ -1691,9 +1704,9 @@ describe('@defer', () => {
 
       // Verify primary block content.
       const primaryBlockHTML = fixture.nativeElement.outerHTML;
-      expect(primaryBlockHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>');
+      expect(primaryBlockHTML).toContain(
+        '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>',
+      );
 
       // Expect that the loading resources function was not invoked again (counter remains 1).
       expect(loadingFnInvokedTimes).toBe(1);
@@ -1721,7 +1734,7 @@ describe('@defer', () => {
               Placeholder \`{{ item }}\`
             }
           }
-        `
+        `,
       })
       class RootCmp {
         deferCond = false;
@@ -1735,13 +1748,11 @@ describe('@defer', () => {
             loadingFnInvokedTimes++;
             return [dynamicImportOf(NestedCmp)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
       });
 
       clearDirectiveDefs(RootCmp);
@@ -1804,7 +1815,7 @@ describe('@defer', () => {
               Placeholder \`{{ item }}\`
             }
           }
-        `
+        `,
       })
       class RootCmp {
         items = ['a', 'b', 'c'];
@@ -1817,13 +1828,11 @@ describe('@defer', () => {
             loadingFnInvokedTimes++;
             return [dynamicImportOf(NestedCmp)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
       });
 
       clearDirectiveDefs(RootCmp);
@@ -1874,7 +1883,7 @@ describe('@defer', () => {
           } @placeholder {
             Placeholder
           }
-        `
+        `,
       })
       class RootCmp {
         deferCond = false;
@@ -1887,7 +1896,7 @@ describe('@defer', () => {
             loadingFnInvokedTimes++;
             return [dynamicImportOf(NestedCmp)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
@@ -1925,9 +1934,9 @@ describe('@defer', () => {
 
       // Verify primary block content.
       const primaryBlockHTML = fixture.nativeElement.outerHTML;
-      expect(primaryBlockHTML)
-          .toContain(
-              '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>');
+      expect(primaryBlockHTML).toContain(
+        '<nested-cmp ng-reflect-block="primary">Rendering primary block.</nested-cmp>',
+      );
 
       // Expect that the loading resources function was not invoked again (counter remains 1).
       expect(loadingFnInvokedTimes).toBe(1);
@@ -1948,8 +1957,7 @@ describe('@defer', () => {
         standalone: true,
         template: 'Nested block component.',
       })
-      class AnotherNestedCmp {
-      }
+      class AnotherNestedCmp {}
 
       @Component({
         standalone: true,
@@ -1974,10 +1982,9 @@ describe('@defer', () => {
           } @placeholder {
             Root block placeholder
           }
-        `
+        `,
       })
-      class RootCmp {
-      }
+      class RootCmp {}
 
       let loadingFnInvokedTimes = 0;
       const deferDepsInterceptor = {
@@ -1985,16 +1992,14 @@ describe('@defer', () => {
           return () => {
             loadingFnInvokedTimes++;
             const nextDeferredComponent =
-                loadingFnInvokedTimes === 1 ? NestedCmp : AnotherNestedCmp;
+              loadingFnInvokedTimes === 1 ? NestedCmp : AnotherNestedCmp;
             return [dynamicImportOf(nextDeferredComponent)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
       });
 
       clearDirectiveDefs(RootCmp);
@@ -2057,7 +2062,7 @@ describe('@defer', () => {
               Placeholder \`{{ item }}\`
             }
           }
-        `
+        `,
       })
       class RootCmp {
         items = ['a', 'b', 'c'];
@@ -2070,13 +2075,11 @@ describe('@defer', () => {
             loadingFnInvokedTimes++;
             return [dynamicImportOf(NestedCmp)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
       });
 
       clearDirectiveDefs(RootCmp);
@@ -2123,8 +2126,7 @@ describe('@defer', () => {
         standalone: true,
         template: 'Nested block component.',
       })
-      class AnotherNestedCmp {
-      }
+      class AnotherNestedCmp {}
 
       @Component({
         standalone: true,
@@ -2148,10 +2150,9 @@ describe('@defer', () => {
           } @placeholder {
             Root block placeholder
           }
-        `
+        `,
       })
-      class RootCmp {
-      }
+      class RootCmp {}
 
       let loadingFnInvokedTimes = 0;
       const deferDepsInterceptor = {
@@ -2159,16 +2160,14 @@ describe('@defer', () => {
           return () => {
             loadingFnInvokedTimes++;
             const nextDeferredComponent =
-                loadingFnInvokedTimes === 1 ? NestedCmp : AnotherNestedCmp;
+              loadingFnInvokedTimes === 1 ? NestedCmp : AnotherNestedCmp;
             return [dynamicImportOf(nextDeferredComponent)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
       });
 
       clearDirectiveDefs(RootCmp);
@@ -2217,7 +2216,7 @@ describe('@defer', () => {
           @defer (when isVisible; on idle; prefetch on idle) {
             Hello world!
           }
-        `
+        `,
       })
       class RootCmp {
         isVisible = false;
@@ -2253,9 +2252,9 @@ describe('@defer', () => {
   // the resolution logic is the same for all triggers.
   describe('trigger resolution', () => {
     it('should resolve a trigger is outside the defer block', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
             @defer (on interaction(trigger)) {
               Main content
             } @placeholder {
@@ -2269,30 +2268,28 @@ describe('@defer', () => {
                 </div>
             </div>
           </div>
-          `
-         })
-         class MyCmp {
-         }
+          `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
 
     it('should resolve a trigger on a component outside the defer block', fakeAsync(() => {
-         @Component({selector: 'some-comp', template: '<button></button>', standalone: true})
-         class SomeComp {
-         }
+      @Component({selector: 'some-comp', template: '<button></button>', standalone: true})
+      class SomeComp {}
 
-         @Component({
-           standalone: true,
-           imports: [SomeComp],
-           template: `
+      @Component({
+        standalone: true,
+        imports: [SomeComp],
+        template: `
             @defer (on interaction(trigger)) {
               Main content
             } @placeholder {
@@ -2306,25 +2303,24 @@ describe('@defer', () => {
                 </div>
               </div>
             </div>
-          `
-         })
-         class MyCmp {
-         }
+          `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
 
     it('should resolve a trigger that is on a parent element', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
             <button #trigger>
               <div>
                 <div>
@@ -2336,25 +2332,24 @@ describe('@defer', () => {
                 </div>
               </div>
             </button>
-          `
-         })
-         class MyCmp {
-         }
+          `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
 
     it('should resolve a trigger that is inside a parent embedded view', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
             @if (cond) {
               <button #trigger></button>
 
@@ -2368,32 +2363,30 @@ describe('@defer', () => {
                 }
               }
             }
-          `
-         })
-         class MyCmp {
-           cond = true;
-         }
+          `,
+      })
+      class MyCmp {
+        cond = true;
+      }
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
 
-    it('should resolve a trigger that is on a component in a parent embedded view',
-       fakeAsync(() => {
-         @Component({selector: 'some-comp', template: '<button></button>', standalone: true})
-         class SomeComp {
-         }
+    it('should resolve a trigger that is on a component in a parent embedded view', fakeAsync(() => {
+      @Component({selector: 'some-comp', template: '<button></button>', standalone: true})
+      class SomeComp {}
 
-         @Component({
-           standalone: true,
-           imports: [SomeComp],
-           template: `
+      @Component({
+        standalone: true,
+        imports: [SomeComp],
+        template: `
               @if (cond) {
                 <some-comp #trigger/>
 
@@ -2407,81 +2400,78 @@ describe('@defer', () => {
                   }
                 }
               }
-            `
-         })
-         class MyCmp {
-           cond = true;
-         }
+            `,
+      })
+      class MyCmp {
+        cond = true;
+      }
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
 
     it('should resolve a trigger that is inside the placeholder', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
               @defer (on interaction(trigger)) {
                 Main content
               } @placeholder {
                 Placeholder <div><div><div><button #trigger></button></div></div></div>
               }
-            `
-         })
-         class MyCmp {
-         }
+            `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
 
     it('should resolve a trigger that is a component inside the placeholder', fakeAsync(() => {
-         @Component({selector: 'some-comp', template: '<button></button>', standalone: true})
-         class SomeComp {
-         }
+      @Component({selector: 'some-comp', template: '<button></button>', standalone: true})
+      class SomeComp {}
 
-         @Component({
-           standalone: true,
-           imports: [SomeComp],
-           template: `
+      @Component({
+        standalone: true,
+        imports: [SomeComp],
+        template: `
               @defer (on interaction(trigger)) {
                 Main content
               } @placeholder {
                 Placeholder <div><div><div><some-comp #trigger/></div></div></div>
               }
-            `
-         })
-         class MyCmp {
-         }
+            `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
   });
 
   describe('interaction triggers', () => {
     it('should load the deferred content when the trigger is clicked', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
               @defer (on interaction(trigger)) {
                 Main content
               } @placeholder {
@@ -2489,31 +2479,29 @@ describe('@defer', () => {
               }
 
               <button #trigger></button>
-            `
-         })
-         class MyCmp {
-         }
+            `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
-
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
-
-    it('should load the deferred content when the trigger receives a keyboard event',
-       fakeAsync(() => {
-         // Domino doesn't support creating custom events so we have to skip this test.
-         if (!isBrowser) {
-           return;
-         }
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         @Component({
-           standalone: true,
-           template: `
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
+
+    it('should load the deferred content when the trigger receives a keyboard event', fakeAsync(() => {
+      // Domino doesn't support creating custom events so we have to skip this test.
+      if (!isBrowser) {
+        return;
+      }
+
+      @Component({
+        standalone: true,
+        template: `
               @defer (on interaction(trigger)) {
                 Main content
               } @placeholder {
@@ -2521,51 +2509,49 @@ describe('@defer', () => {
               }
 
               <button #trigger></button>
-            `
-         })
-         class MyCmp {
-         }
+            `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         button.dispatchEvent(new Event('keydown'));
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      button.dispatchEvent(new Event('keydown'));
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
 
     it('should load the deferred content when an implicit trigger is clicked', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
              @defer (on interaction) {
                Main content
              } @placeholder {
                <button>Placeholder</button>
              }
-           `
-         })
-         class MyCmp {
-         }
+           `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-         flush();
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
 
     it('should load the deferred content if a child of the trigger is clicked', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
               @defer (on interaction(trigger)) {
                 Main content
               } @placeholder {
@@ -2577,25 +2563,24 @@ describe('@defer', () => {
                 <button></button>
                </div>
              </div>
-           `
-         })
-         class MyCmp {
-         }
+           `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
 
     it('should support multiple deferred blocks with the same trigger', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
              @defer (on interaction(trigger)) {
               Main content 1
              } @placeholder {
@@ -2609,108 +2594,106 @@ describe('@defer', () => {
              }
 
              <button #trigger></button>
-           `
-         })
-         class MyCmp {
-         }
+           `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder 1  Placeholder 2');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder 1  Placeholder 2');
 
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content 1  Main content 2');
-       }));
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content 1  Main content 2');
+    }));
 
     it('should unbind the trigger events when the deferred block is loaded', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
              @defer (on interaction(trigger)) {Main content}
              <button #trigger></button>
-           `
-         })
-         class MyCmp {
-         }
+           `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         const button = fixture.nativeElement.querySelector('button');
-         const spy = spyOn(button, 'removeEventListener');
+      const button = fixture.nativeElement.querySelector('button');
+      const spy = spyOn(button, 'removeEventListener');
 
-         button.click();
-         fixture.detectChanges();
-         flush();
+      button.click();
+      fixture.detectChanges();
+      flush();
 
-         expect(spy).toHaveBeenCalledTimes(2);
-         expect(spy).toHaveBeenCalledWith('click', jasmine.any(Function), jasmine.any(Object));
-         expect(spy).toHaveBeenCalledWith('keydown', jasmine.any(Function), jasmine.any(Object));
-       }));
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(spy).toHaveBeenCalledWith('click', jasmine.any(Function), jasmine.any(Object));
+      expect(spy).toHaveBeenCalledWith('keydown', jasmine.any(Function), jasmine.any(Object));
+    }));
 
     it('should unbind the trigger events when the trigger is destroyed', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
             @if (renderBlock) {
               @defer (on interaction(trigger)) {Main content}
               <button #trigger></button>
             }
-          `
-         })
-         class MyCmp {
-           renderBlock = true;
-         }
+          `,
+      })
+      class MyCmp {
+        renderBlock = true;
+      }
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         const button = fixture.nativeElement.querySelector('button');
-         const spy = spyOn(button, 'removeEventListener');
+      const button = fixture.nativeElement.querySelector('button');
+      const spy = spyOn(button, 'removeEventListener');
 
-         fixture.componentInstance.renderBlock = false;
-         fixture.detectChanges();
+      fixture.componentInstance.renderBlock = false;
+      fixture.detectChanges();
 
-         expect(spy).toHaveBeenCalledTimes(2);
-         expect(spy).toHaveBeenCalledWith('click', jasmine.any(Function), jasmine.any(Object));
-         expect(spy).toHaveBeenCalledWith('keydown', jasmine.any(Function), jasmine.any(Object));
-       }));
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(spy).toHaveBeenCalledWith('click', jasmine.any(Function), jasmine.any(Object));
+      expect(spy).toHaveBeenCalledWith('keydown', jasmine.any(Function), jasmine.any(Object));
+    }));
 
     it('should unbind the trigger events when the deferred block is destroyed', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
               @if (renderBlock) {
                 @defer (on interaction(trigger)) {Main content}
               }
 
               <button #trigger></button>
-            `
-         })
-         class MyCmp {
-           renderBlock = true;
-         }
+            `,
+      })
+      class MyCmp {
+        renderBlock = true;
+      }
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         const button = fixture.nativeElement.querySelector('button');
-         const spy = spyOn(button, 'removeEventListener');
+      const button = fixture.nativeElement.querySelector('button');
+      const spy = spyOn(button, 'removeEventListener');
 
-         fixture.componentInstance.renderBlock = false;
-         fixture.detectChanges();
+      fixture.componentInstance.renderBlock = false;
+      fixture.detectChanges();
 
-         expect(spy).toHaveBeenCalledTimes(2);
-         expect(spy).toHaveBeenCalledWith('click', jasmine.any(Function), jasmine.any(Object));
-         expect(spy).toHaveBeenCalledWith('keydown', jasmine.any(Function), jasmine.any(Object));
-       }));
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(spy).toHaveBeenCalledWith('click', jasmine.any(Function), jasmine.any(Object));
+      expect(spy).toHaveBeenCalledWith('keydown', jasmine.any(Function), jasmine.any(Object));
+    }));
 
     it('should remove placeholder content on interaction', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
            @defer (on interaction(trigger)) {
              Main content
            } @placeholder {
@@ -2718,132 +2701,130 @@ describe('@defer', () => {
            }
 
            <button #trigger></button>
-         `
-         })
-         class MyCmp {
-         }
-         TestBed.configureTestingModule({});
-
-         const appRef = TestBed.inject(ApplicationRef);
-         const zone = TestBed.inject(NgZone);
-         const componentRef =
-             createComponent(MyCmp, {environmentInjector: TestBed.inject(EnvironmentInjector)});
-         const button = componentRef.location.nativeElement.querySelector('button');
-         zone.run(() => {
-           appRef.attachView(componentRef.hostView);
-         });
-         expect(componentRef.location.nativeElement.innerHTML).toContain('<div>placeholder</div>');
-         zone.run(() => {
-           button.click();
-         });
-         tick();
-         expect(componentRef.location.nativeElement.innerHTML)
-             .not.toContain('<div>placeholder</div>');
-       }));
+         `,
+      })
+      class MyCmp {}
+      TestBed.configureTestingModule({});
+
+      const appRef = TestBed.inject(ApplicationRef);
+      const zone = TestBed.inject(NgZone);
+      const componentRef = createComponent(MyCmp, {
+        environmentInjector: TestBed.inject(EnvironmentInjector),
+      });
+      const button = componentRef.location.nativeElement.querySelector('button');
+      zone.run(() => {
+        appRef.attachView(componentRef.hostView);
+      });
+      expect(componentRef.location.nativeElement.innerHTML).toContain('<div>placeholder</div>');
+      zone.run(() => {
+        button.click();
+      });
+      tick();
+      expect(componentRef.location.nativeElement.innerHTML).not.toContain('<div>placeholder</div>');
+    }));
 
     it('should prefetch resources on interaction', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           selector: 'root-app',
-           template: `
+      @Component({
+        standalone: true,
+        selector: 'root-app',
+        template: `
               @defer (when isLoaded; prefetch on interaction(trigger)) {Main content}
               <button #trigger></button>
-            `
-         })
-         class MyCmp {
-           // We need a `when` trigger here so that `on idle` doesn't get added automatically.
-           readonly isLoaded = false;
-         }
-
-         let loadingFnInvokedTimes = 0;
+            `,
+      })
+      class MyCmp {
+        // We need a `when` trigger here so that `on idle` doesn't get added automatically.
+        readonly isLoaded = false;
+      }
 
-         TestBed.configureTestingModule({
-           providers: [
-             {
-               provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
-               useValue: {
-                 intercept: () => () => {
-                   loadingFnInvokedTimes++;
-                   return [];
-                 }
-               }
-             },
-           ],
-         });
+      let loadingFnInvokedTimes = 0;
 
-         clearDirectiveDefs(MyCmp);
+      TestBed.configureTestingModule({
+        providers: [
+          {
+            provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
+            useValue: {
+              intercept: () => () => {
+                loadingFnInvokedTimes++;
+                return [];
+              },
+            },
+          },
+        ],
+      });
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      clearDirectiveDefs(MyCmp);
 
-         expect(loadingFnInvokedTimes).toBe(0);
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-         flush();
+      expect(loadingFnInvokedTimes).toBe(0);
 
-         expect(loadingFnInvokedTimes).toBe(1);
-       }));
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+      flush();
 
+      expect(loadingFnInvokedTimes).toBe(1);
+    }));
 
     it('should prefetch resources on interaction with an implicit trigger', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           selector: 'root-app',
-           template: `
+      @Component({
+        standalone: true,
+        selector: 'root-app',
+        template: `
              @defer (when isLoaded; prefetch on interaction) {
               Main content
              } @placeholder {
               <button></button>
              }
-           `
-         })
-         class MyCmp {
-           // We need a `when` trigger here so that `on idle` doesn't get added automatically.
-           readonly isLoaded = false;
-         }
+           `,
+      })
+      class MyCmp {
+        // We need a `when` trigger here so that `on idle` doesn't get added automatically.
+        readonly isLoaded = false;
+      }
 
-         let loadingFnInvokedTimes = 0;
+      let loadingFnInvokedTimes = 0;
 
-         TestBed.configureTestingModule({
-           providers: [
-             {
-               provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
-               useValue: {
-                 intercept: () => () => {
-                   loadingFnInvokedTimes++;
-                   return [];
-                 }
-               }
-             },
-           ],
-         });
+      TestBed.configureTestingModule({
+        providers: [
+          {
+            provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
+            useValue: {
+              intercept: () => () => {
+                loadingFnInvokedTimes++;
+                return [];
+              },
+            },
+          },
+        ],
+      });
 
-         clearDirectiveDefs(MyCmp);
+      clearDirectiveDefs(MyCmp);
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         expect(loadingFnInvokedTimes).toBe(0);
+      expect(loadingFnInvokedTimes).toBe(0);
 
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-         flush();
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+      flush();
 
-         expect(loadingFnInvokedTimes).toBe(1);
-       }));
+      expect(loadingFnInvokedTimes).toBe(1);
+    }));
   });
 
   describe('hover triggers', () => {
     it('should load the deferred content when the trigger is hovered', fakeAsync(() => {
-         // Domino doesn't support creating custom events so we have to skip this test.
-         if (!isBrowser) {
-           return;
-         }
+      // Domino doesn't support creating custom events so we have to skip this test.
+      if (!isBrowser) {
+        return;
+      }
 
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
               @defer (on hover(trigger)) {
                 Main content
               } @placeholder {
@@ -2851,62 +2832,60 @@ describe('@defer', () => {
               }
 
               <button #trigger></button>
-            `
-         })
-         class MyCmp {
-         }
+            `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         button.dispatchEvent(new Event('mouseenter'));
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      button.dispatchEvent(new Event('mouseenter'));
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
 
     it('should load the deferred content with an implicit trigger element', fakeAsync(() => {
-         // Domino doesn't support creating custom events so we have to skip this test.
-         if (!isBrowser) {
-           return;
-         }
+      // Domino doesn't support creating custom events so we have to skip this test.
+      if (!isBrowser) {
+        return;
+      }
 
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
              @defer (on hover) {
                Main content
              } @placeholder {
               <button>Placeholder</button>
              }
-           `
-         })
-         class MyCmp {
-         }
+           `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         button.dispatchEvent(new Event('mouseenter'));
-         fixture.detectChanges();
-         flush();
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      button.dispatchEvent(new Event('mouseenter'));
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
 
     it('should support multiple deferred blocks with the same hover trigger', fakeAsync(() => {
-         // Domino doesn't support creating custom events so we have to skip this test.
-         if (!isBrowser) {
-           return;
-         }
+      // Domino doesn't support creating custom events so we have to skip this test.
+      if (!isBrowser) {
+        return;
+      }
 
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
               @defer (on hover(trigger)) {
                 Main content 1
               } @placeholder {
@@ -2920,99 +2899,97 @@ describe('@defer', () => {
               }
 
               <button #trigger></button>
-           `
-         })
-         class MyCmp {
-         }
+           `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder 1  Placeholder 2');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder 1  Placeholder 2');
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         button.dispatchEvent(new Event('mouseenter'));
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content 1  Main content 2');
-       }));
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      button.dispatchEvent(new Event('mouseenter'));
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content 1  Main content 2');
+    }));
 
     it('should unbind the trigger events when the deferred block is loaded', fakeAsync(() => {
-         // Domino doesn't support creating custom events so we have to skip this test.
-         if (!isBrowser) {
-           return;
-         }
+      // Domino doesn't support creating custom events so we have to skip this test.
+      if (!isBrowser) {
+        return;
+      }
 
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
              @defer (on hover(trigger)) {
               Main content
              }
              <button #trigger></button>
-           `
-         })
-         class MyCmp {
-         }
+           `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         const button = fixture.nativeElement.querySelector('button');
-         const spy = spyOn(button, 'removeEventListener');
+      const button = fixture.nativeElement.querySelector('button');
+      const spy = spyOn(button, 'removeEventListener');
 
-         button.dispatchEvent(new Event('mouseenter'));
-         fixture.detectChanges();
-         flush();
+      button.dispatchEvent(new Event('mouseenter'));
+      fixture.detectChanges();
+      flush();
 
-         expect(spy).toHaveBeenCalledTimes(2);
-         expect(spy).toHaveBeenCalledWith('mouseenter', jasmine.any(Function), jasmine.any(Object));
-         expect(spy).toHaveBeenCalledWith('focusin', jasmine.any(Function), jasmine.any(Object));
-       }));
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(spy).toHaveBeenCalledWith('mouseenter', jasmine.any(Function), jasmine.any(Object));
+      expect(spy).toHaveBeenCalledWith('focusin', jasmine.any(Function), jasmine.any(Object));
+    }));
 
     it('should unbind the trigger events when the trigger is destroyed', fakeAsync(() => {
-         // Domino doesn't support creating custom events so we have to skip this test.
-         if (!isBrowser) {
-           return;
-         }
+      // Domino doesn't support creating custom events so we have to skip this test.
+      if (!isBrowser) {
+        return;
+      }
 
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
             @if (renderBlock) {
               @defer (on hover(trigger)) {
                 Main content
               }
               <button #trigger></button>
             }
-          `
-         })
-         class MyCmp {
-           renderBlock = true;
-         }
+          `,
+      })
+      class MyCmp {
+        renderBlock = true;
+      }
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         const spy = spyOn(button, 'removeEventListener');
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      const spy = spyOn(button, 'removeEventListener');
 
-         fixture.componentInstance.renderBlock = false;
-         fixture.detectChanges();
+      fixture.componentInstance.renderBlock = false;
+      fixture.detectChanges();
 
-         expect(spy).toHaveBeenCalledTimes(2);
-         expect(spy).toHaveBeenCalledWith('mouseenter', jasmine.any(Function), jasmine.any(Object));
-         expect(spy).toHaveBeenCalledWith('focusin', jasmine.any(Function), jasmine.any(Object));
-       }));
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(spy).toHaveBeenCalledWith('mouseenter', jasmine.any(Function), jasmine.any(Object));
+      expect(spy).toHaveBeenCalledWith('focusin', jasmine.any(Function), jasmine.any(Object));
+    }));
 
     it('should unbind the trigger events when the deferred block is destroyed', fakeAsync(() => {
-         // Domino doesn't support creating custom events so we have to skip this test.
-         if (!isBrowser) {
-           return;
-         }
+      // Domino doesn't support creating custom events so we have to skip this test.
+      if (!isBrowser) {
+        return;
+      }
 
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
               @if (renderBlock) {
                 @defer (on hover(trigger)) {
                   Main content
@@ -3020,131 +2997,130 @@ describe('@defer', () => {
               }
 
               <button #trigger></button>
-            `
-         })
-         class MyCmp {
-           renderBlock = true;
-         }
+            `,
+      })
+      class MyCmp {
+        renderBlock = true;
+      }
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         const button = fixture.nativeElement.querySelector('button');
-         const spy = spyOn(button, 'removeEventListener');
+      const button = fixture.nativeElement.querySelector('button');
+      const spy = spyOn(button, 'removeEventListener');
 
-         fixture.componentInstance.renderBlock = false;
-         fixture.detectChanges();
+      fixture.componentInstance.renderBlock = false;
+      fixture.detectChanges();
 
-         expect(spy).toHaveBeenCalledTimes(2);
-         expect(spy).toHaveBeenCalledWith('mouseenter', jasmine.any(Function), jasmine.any(Object));
-         expect(spy).toHaveBeenCalledWith('focusin', jasmine.any(Function), jasmine.any(Object));
-       }));
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(spy).toHaveBeenCalledWith('mouseenter', jasmine.any(Function), jasmine.any(Object));
+      expect(spy).toHaveBeenCalledWith('focusin', jasmine.any(Function), jasmine.any(Object));
+    }));
 
     it('should prefetch resources on hover', fakeAsync(() => {
-         // Domino doesn't support creating custom events so we have to skip this test.
-         if (!isBrowser) {
-           return;
-         }
+      // Domino doesn't support creating custom events so we have to skip this test.
+      if (!isBrowser) {
+        return;
+      }
 
-         @Component({
-           standalone: true,
-           selector: 'root-app',
-           template: `
+      @Component({
+        standalone: true,
+        selector: 'root-app',
+        template: `
               @defer (when isLoaded; prefetch on hover(trigger)) {
                 Main content
               }
               <button #trigger></button>
-            `
-         })
-         class MyCmp {
-           // We need a `when` trigger here so that `on idle` doesn't get added automatically.
-           readonly isLoaded = false;
-         }
-
-         let loadingFnInvokedTimes = 0;
+            `,
+      })
+      class MyCmp {
+        // We need a `when` trigger here so that `on idle` doesn't get added automatically.
+        readonly isLoaded = false;
+      }
 
-         TestBed.configureTestingModule({
-           providers: [
-             {
-               provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
-               useValue: {
-                 intercept: () => () => {
-                   loadingFnInvokedTimes++;
-                   return [];
-                 }
-               }
-             },
-           ],
-         });
+      let loadingFnInvokedTimes = 0;
 
-         clearDirectiveDefs(MyCmp);
+      TestBed.configureTestingModule({
+        providers: [
+          {
+            provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
+            useValue: {
+              intercept: () => () => {
+                loadingFnInvokedTimes++;
+                return [];
+              },
+            },
+          },
+        ],
+      });
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      clearDirectiveDefs(MyCmp);
 
-         expect(loadingFnInvokedTimes).toBe(0);
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         button.dispatchEvent(new Event('mouseenter'));
-         fixture.detectChanges();
-         flush();
+      expect(loadingFnInvokedTimes).toBe(0);
 
-         expect(loadingFnInvokedTimes).toBe(1);
-       }));
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      button.dispatchEvent(new Event('mouseenter'));
+      fixture.detectChanges();
+      flush();
 
+      expect(loadingFnInvokedTimes).toBe(1);
+    }));
 
     it('should prefetch resources when an implicit trigger is hovered', fakeAsync(() => {
-         // Domino doesn't support creating custom events so we have to skip this test.
-         if (!isBrowser) {
-           return;
-         }
+      // Domino doesn't support creating custom events so we have to skip this test.
+      if (!isBrowser) {
+        return;
+      }
 
-         @Component({
-           standalone: true,
-           selector: 'root-app',
-           template: `
+      @Component({
+        standalone: true,
+        selector: 'root-app',
+        template: `
              @defer (when isLoaded; prefetch on hover) {
                Main content
              } @placeholder {
                <button></button>
              }
-           `
-         })
-         class MyCmp {
-           // We need a `when` trigger here so that `on idle` doesn't get added automatically.
-           readonly isLoaded = false;
-         }
+           `,
+      })
+      class MyCmp {
+        // We need a `when` trigger here so that `on idle` doesn't get added automatically.
+        readonly isLoaded = false;
+      }
 
-         let loadingFnInvokedTimes = 0;
+      let loadingFnInvokedTimes = 0;
 
-         TestBed.configureTestingModule({
-           providers: [
-             {
-               provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
-               useValue: {
-                 intercept: () => () => {
-                   loadingFnInvokedTimes++;
-                   return [];
-                 }
-               }
-             },
-           ],
-         });
+      TestBed.configureTestingModule({
+        providers: [
+          {
+            provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
+            useValue: {
+              intercept: () => () => {
+                loadingFnInvokedTimes++;
+                return [];
+              },
+            },
+          },
+        ],
+      });
 
-         clearDirectiveDefs(MyCmp);
+      clearDirectiveDefs(MyCmp);
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         expect(loadingFnInvokedTimes).toBe(0);
+      expect(loadingFnInvokedTimes).toBe(0);
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         button.dispatchEvent(new Event('mouseenter'));
-         fixture.detectChanges();
-         flush();
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      button.dispatchEvent(new Event('mouseenter'));
+      fixture.detectChanges();
+      flush();
 
-         expect(loadingFnInvokedTimes).toBe(1);
-       }));
+      expect(loadingFnInvokedTimes).toBe(1);
+    }));
   });
 
   describe('`on timer` triggers', () => {
@@ -3170,7 +3146,7 @@ describe('@defer', () => {
                 Placeholder \`{{ item }}\`
               }
             }
-          `
+          `,
       })
       class RootCmp {
         items = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
@@ -3183,13 +3159,11 @@ describe('@defer', () => {
             loadingFnInvokedTimes++;
             return [dynamicImportOf(NestedCmp)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
       });
 
       clearDirectiveDefs(RootCmp);
@@ -3205,7 +3179,7 @@ describe('@defer', () => {
       expect(loadingFnInvokedTimes).toBe(0);
 
       await timer(1000);
-      await allPendingDynamicImports();  // fetching dependencies of the defer block
+      await allPendingDynamicImports(); // fetching dependencies of the defer block
       fixture.detectChanges();
 
       // Expect that the loading resources function was invoked once.
@@ -3243,10 +3217,9 @@ describe('@defer', () => {
           } @placeholder {
             placeholder[top]
           }
-        `
+        `,
       })
-      class RootCmp {
-      }
+      class RootCmp {}
 
       TestBed.configureTestingModule({});
 
@@ -3296,7 +3269,7 @@ describe('@defer', () => {
                 Placeholder \`{{ item }}\`
               }
             }
-          `
+          `,
       })
       class RootCmp {
         shouldTrigger = false;
@@ -3310,13 +3283,11 @@ describe('@defer', () => {
             loadingFnInvokedTimes++;
             return [dynamicImportOf(NestedCmp)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
       });
 
       clearDirectiveDefs(RootCmp);
@@ -3332,7 +3303,7 @@ describe('@defer', () => {
       expect(loadingFnInvokedTimes).toBe(0);
 
       await timer(200);
-      await allPendingDynamicImports();  // fetching dependencies of the defer block
+      await allPendingDynamicImports(); // fetching dependencies of the defer block
       fixture.detectChanges();
 
       // Expect that the loading resources function was invoked once.
@@ -3352,7 +3323,7 @@ describe('@defer', () => {
     });
 
     it('should trigger prefetching and rendering based on `on timer` condition', fakeAsync(() => {
-         const {fixture} = createFixture(`
+      const {fixture} = createFixture(`
             @defer (on timer(200ms); prefetch on timer(100ms)) {
               <nested-cmp [block]="'Main'" />
             } @placeholder {
@@ -3360,47 +3331,42 @@ describe('@defer', () => {
             }
           `);
 
-         verifyTimeline(
-             fixture,
-             [50, 'Placeholder'],
-             [150, 'Placeholder'],
-             [250, 'Main'],
-         );
-       }));
+      verifyTimeline(fixture, [50, 'Placeholder'], [150, 'Placeholder'], [250, 'Main']);
+    }));
 
     it('should clear timeout callbacks when defer block is triggered', fakeAsync(() => {
-         const setSpy = spyOn(globalThis, 'setTimeout');
-         const clearSpy = spyOn(globalThis, 'clearTimeout');
+      const setSpy = spyOn(globalThis, 'setTimeout');
+      const clearSpy = spyOn(globalThis, 'clearTimeout');
 
-         @Component({
-           standalone: true,
-           selector: 'root-app',
-           template: `
+      @Component({
+        standalone: true,
+        selector: 'root-app',
+        template: `
               @defer (when isVisible; on timer(200ms); prefetch on timer(100ms)) {
                 Hello world!
               }
-            `
-         })
-         class RootCmp {
-           isVisible = false;
-         }
+            `,
+      })
+      class RootCmp {
+        isVisible = false;
+      }
 
-         TestBed.configureTestingModule({});
+      TestBed.configureTestingModule({});
 
-         clearDirectiveDefs(RootCmp);
+      clearDirectiveDefs(RootCmp);
 
-         const fixture = TestBed.createComponent(RootCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(RootCmp);
+      fixture.detectChanges();
 
-         // Trigger defer block
-         fixture.componentInstance.isVisible = true;
-         fixture.detectChanges();
+      // Trigger defer block
+      fixture.componentInstance.isVisible = true;
+      fixture.detectChanges();
 
-         // The `clearTimeout` was called synchronously, because the `when`
-         // condition was triggered, which resulted in timers cleanup.
-         expect(setSpy).toHaveBeenCalledTimes(2);
-         expect(clearSpy).toHaveBeenCalledTimes(2);
-       }));
+      // The `clearTimeout` was called synchronously, because the `when`
+      // condition was triggered, which resulted in timers cleanup.
+      expect(setSpy).toHaveBeenCalledTimes(2);
+      expect(clearSpy).toHaveBeenCalledTimes(2);
+    }));
   });
 
   describe('viewport triggers', () => {
@@ -3458,7 +3424,8 @@ describe('@defer', () => {
       private invokeCallback() {
         for (const el of this.observedElements) {
           this.callback(
-              [{
+            [
+              {
                 target: el,
                 isIntersecting: this.elementsInView.has(el),
 
@@ -3468,8 +3435,10 @@ describe('@defer', () => {
                 intersectionRect: null!,
                 rootBounds: null,
                 time: null!,
-              }],
-              this);
+              },
+            ],
+            this,
+          );
         }
       }
 
@@ -3495,9 +3464,9 @@ describe('@defer', () => {
     }
 
     it('should load the deferred content when the trigger is in the viewport', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
               @defer (on viewport(trigger)) {
                 Main content
               } @placeholder {
@@ -3505,55 +3474,52 @@ describe('@defer', () => {
               }
 
               <button #trigger></button>
-            `
-         })
-         class MyCmp {
-         }
+            `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         MockIntersectionObserver.invokeCallbacksForElement(button, true);
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      MockIntersectionObserver.invokeCallbacksForElement(button, true);
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
 
-    it('should load the deferred content when an implicit trigger is in the viewport',
-       fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+    it('should load the deferred content when an implicit trigger is in the viewport', fakeAsync(() => {
+      @Component({
+        standalone: true,
+        template: `
              @defer (on viewport) {
                Main content
              } @placeholder {
               <button>Placeholder</button>
              }
-           `
-         })
-         class MyCmp {
-         }
+           `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         MockIntersectionObserver.invokeCallbacksForElement(button, true);
-         fixture.detectChanges();
-         flush();
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      MockIntersectionObserver.invokeCallbacksForElement(button, true);
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
 
     it('should not load the content if the trigger is not in the view yet', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
              @defer (on viewport(trigger)) {
               Main content
              } @placeholder {
@@ -3561,38 +3527,37 @@ describe('@defer', () => {
              }
 
              <button #trigger></button>
-           `
-         })
-         class MyCmp {
-         }
+           `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         MockIntersectionObserver.invokeCallbacksForElement(button, false);
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      MockIntersectionObserver.invokeCallbacksForElement(button, false);
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         MockIntersectionObserver.invokeCallbacksForElement(button, false);
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
+      MockIntersectionObserver.invokeCallbacksForElement(button, false);
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder');
 
-         MockIntersectionObserver.invokeCallbacksForElement(button, true);
-         fixture.detectChanges();
-         flush();
+      MockIntersectionObserver.invokeCallbacksForElement(button, true);
+      fixture.detectChanges();
+      flush();
 
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
-       }));
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content');
+    }));
 
     it('should support multiple deferred blocks with the same trigger', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
             @defer (on viewport(trigger)) {
               Main content 1
             } @placeholder {
@@ -3606,86 +3571,84 @@ describe('@defer', () => {
             }
 
             <button #trigger></button>
-          `
-         })
-         class MyCmp {
-         }
+          `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder 1  Placeholder 2');
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Placeholder 1  Placeholder 2');
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         MockIntersectionObserver.invokeCallbacksForElement(button, true);
-         fixture.detectChanges();
-         flush();
-         expect(fixture.nativeElement.textContent.trim()).toBe('Main content 1  Main content 2');
-       }));
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      MockIntersectionObserver.invokeCallbacksForElement(button, true);
+      fixture.detectChanges();
+      flush();
+      expect(fixture.nativeElement.textContent.trim()).toBe('Main content 1  Main content 2');
+    }));
 
     it('should stop observing the trigger when the deferred block is loaded', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
             @defer (on viewport(trigger)) {
               Main content
             }
             <button #trigger></button>
-          `
-         })
-         class MyCmp {
-         }
+          `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         expect(activeObservers.length).toBe(1);
-         expect(activeObservers[0].observedElements.size).toBe(1);
-         expect(activeObservers[0].observedElements.has(button)).toBe(true);
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      expect(activeObservers.length).toBe(1);
+      expect(activeObservers[0].observedElements.size).toBe(1);
+      expect(activeObservers[0].observedElements.has(button)).toBe(true);
 
-         MockIntersectionObserver.invokeCallbacksForElement(button, true);
-         fixture.detectChanges();
-         flush();
+      MockIntersectionObserver.invokeCallbacksForElement(button, true);
+      fixture.detectChanges();
+      flush();
 
-         expect(activeObservers.length).toBe(1);
-         expect(activeObservers[0].observedElements.size).toBe(0);
-       }));
+      expect(activeObservers.length).toBe(1);
+      expect(activeObservers[0].observedElements.size).toBe(0);
+    }));
 
     it('should stop observing the trigger when the trigger is destroyed', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
            @if (renderBlock) {
              @defer (on viewport(trigger)) {
               Main content
              }
              <button #trigger></button>
            }
-         `
-         })
-         class MyCmp {
-           renderBlock = true;
-         }
+         `,
+      })
+      class MyCmp {
+        renderBlock = true;
+      }
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         expect(activeObservers.length).toBe(1);
-         expect(activeObservers[0].observedElements.size).toBe(1);
-         expect(activeObservers[0].observedElements.has(button)).toBe(true);
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      expect(activeObservers.length).toBe(1);
+      expect(activeObservers[0].observedElements.size).toBe(1);
+      expect(activeObservers[0].observedElements.has(button)).toBe(true);
 
-         fixture.componentInstance.renderBlock = false;
-         fixture.detectChanges();
+      fixture.componentInstance.renderBlock = false;
+      fixture.detectChanges();
 
-         expect(activeObservers.length).toBe(1);
-         expect(activeObservers[0].observedElements.size).toBe(0);
-       }));
+      expect(activeObservers.length).toBe(1);
+      expect(activeObservers[0].observedElements.size).toBe(0);
+    }));
 
     it('should stop observing the trigger when the deferred block is destroyed', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
              @if (renderBlock) {
               @defer (on viewport(trigger)) {
                 Main content
@@ -3693,32 +3656,31 @@ describe('@defer', () => {
              }
 
              <button #trigger></button>
-           `
-         })
-         class MyCmp {
-           renderBlock = true;
-         }
+           `,
+      })
+      class MyCmp {
+        renderBlock = true;
+      }
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         expect(activeObservers.length).toBe(1);
-         expect(activeObservers[0].observedElements.size).toBe(1);
-         expect(activeObservers[0].observedElements.has(button)).toBe(true);
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      expect(activeObservers.length).toBe(1);
+      expect(activeObservers[0].observedElements.size).toBe(1);
+      expect(activeObservers[0].observedElements.has(button)).toBe(true);
 
-         fixture.componentInstance.renderBlock = false;
-         fixture.detectChanges();
+      fixture.componentInstance.renderBlock = false;
+      fixture.detectChanges();
 
-         expect(activeObservers.length).toBe(1);
-         expect(activeObservers[0].observedElements.size).toBe(0);
-       }));
+      expect(activeObservers.length).toBe(1);
+      expect(activeObservers[0].observedElements.size).toBe(0);
+    }));
 
-    it('should disconnect the intersection observer once all deferred blocks have been loaded',
-       fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+    it('should disconnect the intersection observer once all deferred blocks have been loaded', fakeAsync(() => {
+      @Component({
+        standalone: true,
+        template: `
             <button #triggerOne></button>
             @defer (on viewport(triggerOne)) {
               One
@@ -3728,168 +3690,166 @@ describe('@defer', () => {
             @defer (on viewport(triggerTwo)) {
               Two
             }
-          `
-         })
-         class MyCmp {
-         }
+          `,
+      })
+      class MyCmp {}
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         expect(activeObservers.length).toBe(1);
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      expect(activeObservers.length).toBe(1);
 
-         const buttons = Array.from<HTMLElement>(fixture.nativeElement.querySelectorAll('button'));
-         const observer = activeObservers[0];
-         const disconnectSpy = spyOn(observer, 'disconnect').and.callThrough();
+      const buttons = Array.from<HTMLElement>(fixture.nativeElement.querySelectorAll('button'));
+      const observer = activeObservers[0];
+      const disconnectSpy = spyOn(observer, 'disconnect').and.callThrough();
 
-         expect(Array.from(observer.observedElements)).toEqual(buttons);
+      expect(Array.from(observer.observedElements)).toEqual(buttons);
 
-         MockIntersectionObserver.invokeCallbacksForElement(buttons[0], true);
-         fixture.detectChanges();
+      MockIntersectionObserver.invokeCallbacksForElement(buttons[0], true);
+      fixture.detectChanges();
 
-         expect(disconnectSpy).not.toHaveBeenCalled();
-         expect(Array.from(observer.observedElements)).toEqual([buttons[1]]);
+      expect(disconnectSpy).not.toHaveBeenCalled();
+      expect(Array.from(observer.observedElements)).toEqual([buttons[1]]);
 
-         MockIntersectionObserver.invokeCallbacksForElement(buttons[1], true);
-         fixture.detectChanges();
+      MockIntersectionObserver.invokeCallbacksForElement(buttons[1], true);
+      fixture.detectChanges();
 
-         expect(disconnectSpy).toHaveBeenCalled();
-         expect(observer.observedElements.size).toBe(0);
-       }));
+      expect(disconnectSpy).toHaveBeenCalled();
+      expect(observer.observedElements.size).toBe(0);
+    }));
 
     it('should prefetch resources when the trigger comes into the viewport', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           selector: 'root-app',
-           template: `
+      @Component({
+        standalone: true,
+        selector: 'root-app',
+        template: `
              @defer (when isLoaded; prefetch on viewport(trigger)) {
               Main content
              }
              <button #trigger></button>
-           `
-         })
-         class MyCmp {
-           // We need a `when` trigger here so that `on idle` doesn't get added automatically.
-           readonly isLoaded = false;
-         }
+           `,
+      })
+      class MyCmp {
+        // We need a `when` trigger here so that `on idle` doesn't get added automatically.
+        readonly isLoaded = false;
+      }
 
-         let loadingFnInvokedTimes = 0;
-
-         TestBed.configureTestingModule({
-           providers: [
-             {
-               provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
-               useValue: {
-                 intercept: () => () => {
-                   loadingFnInvokedTimes++;
-                   return [];
-                 }
-               }
-             },
-           ],
-         });
-
-         clearDirectiveDefs(MyCmp);
-
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-
-         expect(loadingFnInvokedTimes).toBe(0);
-
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         MockIntersectionObserver.invokeCallbacksForElement(button, true);
-         fixture.detectChanges();
-         flush();
-
-         expect(loadingFnInvokedTimes).toBe(1);
-       }));
-
-    it('should prefetch resources when an implicit trigger comes into the viewport',
-       fakeAsync(() => {
-         @Component({
-           standalone: true,
-           selector: 'root-app',
-           template: `
+      let loadingFnInvokedTimes = 0;
+
+      TestBed.configureTestingModule({
+        providers: [
+          {
+            provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
+            useValue: {
+              intercept: () => () => {
+                loadingFnInvokedTimes++;
+                return [];
+              },
+            },
+          },
+        ],
+      });
+
+      clearDirectiveDefs(MyCmp);
+
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+
+      expect(loadingFnInvokedTimes).toBe(0);
+
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      MockIntersectionObserver.invokeCallbacksForElement(button, true);
+      fixture.detectChanges();
+      flush();
+
+      expect(loadingFnInvokedTimes).toBe(1);
+    }));
+
+    it('should prefetch resources when an implicit trigger comes into the viewport', fakeAsync(() => {
+      @Component({
+        standalone: true,
+        selector: 'root-app',
+        template: `
              @defer (when isLoaded; prefetch on viewport) {
               Main content
              } @placeholder {
                <button></button>
              }
-           `
-         })
-         class MyCmp {
-           // We need a `when` trigger here so that `on idle` doesn't get added automatically.
-           readonly isLoaded = false;
-         }
+           `,
+      })
+      class MyCmp {
+        // We need a `when` trigger here so that `on idle` doesn't get added automatically.
+        readonly isLoaded = false;
+      }
 
-         let loadingFnInvokedTimes = 0;
+      let loadingFnInvokedTimes = 0;
 
-         TestBed.configureTestingModule({
-           providers: [
-             {
-               provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
-               useValue: {
-                 intercept: () => () => {
-                   loadingFnInvokedTimes++;
-                   return [];
-                 }
-               }
-             },
-           ],
-         });
+      TestBed.configureTestingModule({
+        providers: [
+          {
+            provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
+            useValue: {
+              intercept: () => () => {
+                loadingFnInvokedTimes++;
+                return [];
+              },
+            },
+          },
+        ],
+      });
 
-         clearDirectiveDefs(MyCmp);
+      clearDirectiveDefs(MyCmp);
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
 
-         expect(loadingFnInvokedTimes).toBe(0);
+      expect(loadingFnInvokedTimes).toBe(0);
 
-         const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
-         MockIntersectionObserver.invokeCallbacksForElement(button, true);
-         fixture.detectChanges();
-         flush();
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
+      MockIntersectionObserver.invokeCallbacksForElement(button, true);
+      fixture.detectChanges();
+      flush();
 
-         expect(loadingFnInvokedTimes).toBe(1);
-       }));
+      expect(loadingFnInvokedTimes).toBe(1);
+    }));
 
     it('should load deferred content in a loop', fakeAsync(() => {
-         @Component({
-           standalone: true,
-           template: `
+      @Component({
+        standalone: true,
+        template: `
               @for (item of items; track item) {
                 @defer (on viewport) {d{{item}} }
                 @placeholder {<button>p{{item}} </button>}
               }
-           `
-         })
-         class MyCmp {
-           items = [1, 2, 3, 4, 5, 6];
-         }
+           `,
+      })
+      class MyCmp {
+        items = [1, 2, 3, 4, 5, 6];
+      }
 
-         const fixture = TestBed.createComponent(MyCmp);
-         fixture.detectChanges();
-         const buttons = Array.from<Element>(fixture.nativeElement.querySelectorAll('button'));
-         const items = fixture.componentInstance.items;
+      const fixture = TestBed.createComponent(MyCmp);
+      fixture.detectChanges();
+      const buttons = Array.from<Element>(fixture.nativeElement.querySelectorAll('button'));
+      const items = fixture.componentInstance.items;
 
-         // None of the blocks are loaded yet.
-         expect(fixture.nativeElement.textContent.trim()).toBe('p1 p2 p3 p4 p5 p6');
+      // None of the blocks are loaded yet.
+      expect(fixture.nativeElement.textContent.trim()).toBe('p1 p2 p3 p4 p5 p6');
 
-         // First half of the blocks is loaded.
-         for (let i = 0; i < items.length / 2; i++) {
-           MockIntersectionObserver.invokeCallbacksForElement(buttons[i], true);
-           fixture.detectChanges();
-           flush();
-         }
-         expect(fixture.nativeElement.textContent.trim()).toBe('d1 d2 d3 p4 p5 p6');
+      // First half of the blocks is loaded.
+      for (let i = 0; i < items.length / 2; i++) {
+        MockIntersectionObserver.invokeCallbacksForElement(buttons[i], true);
+        fixture.detectChanges();
+        flush();
+      }
+      expect(fixture.nativeElement.textContent.trim()).toBe('d1 d2 d3 p4 p5 p6');
 
-         // Second half of the blocks is loaded.
-         for (let i = items.length / 2; i < items.length; i++) {
-           MockIntersectionObserver.invokeCallbacksForElement(buttons[i], true);
-           fixture.detectChanges();
-           flush();
-         }
-         expect(fixture.nativeElement.textContent.trim()).toBe('d1 d2 d3 d4 d5 d6');
-       }));
+      // Second half of the blocks is loaded.
+      for (let i = items.length / 2; i < items.length; i++) {
+        MockIntersectionObserver.invokeCallbacksForElement(buttons[i], true);
+        fixture.detectChanges();
+        flush();
+      }
+      expect(fixture.nativeElement.textContent.trim()).toBe('d1 d2 d3 d4 d5 d6');
+    }));
   });
 
   describe('DOM-based events cleanup', () => {
@@ -3904,7 +3864,7 @@ describe('@defer', () => {
           ) { Main content }
           <button #trigger></button>
           <div #prefetchTrigger></div>
-        `
+        `,
       })
       class MyCmp {
         isVisible = false;
@@ -3927,14 +3887,20 @@ describe('@defer', () => {
       // Verify that trigger element is cleaned up.
       expect(triggerSpy).toHaveBeenCalledTimes(2);
       expect(triggerSpy).toHaveBeenCalledWith('click', jasmine.any(Function), jasmine.any(Object));
-      expect(triggerSpy)
-          .toHaveBeenCalledWith('keydown', jasmine.any(Function), jasmine.any(Object));
+      expect(triggerSpy).toHaveBeenCalledWith(
+        'keydown',
+        jasmine.any(Function),
+        jasmine.any(Object),
+      );
 
       // Verify that prefetch trigger element is cleaned up.
       expect(prefetchSpy).toHaveBeenCalledTimes(2);
       expect(prefetchSpy).toHaveBeenCalledWith('click', jasmine.any(Function), jasmine.any(Object));
-      expect(prefetchSpy)
-          .toHaveBeenCalledWith('keydown', jasmine.any(Function), jasmine.any(Object));
+      expect(prefetchSpy).toHaveBeenCalledWith(
+        'keydown',
+        jasmine.any(Function),
+        jasmine.any(Object),
+      );
     });
 
     it('should unbind `hover` trigger events when the deferred block is loaded', async () => {
@@ -3948,7 +3914,7 @@ describe('@defer', () => {
           ) { Main content }
           <button #trigger></button>
           <div #prefetchTrigger></div>
-        `
+        `,
       })
       class MyCmp {
         isVisible = false;
@@ -3970,17 +3936,29 @@ describe('@defer', () => {
 
       // Verify that trigger element is cleaned up.
       expect(triggerSpy).toHaveBeenCalledTimes(2);
-      expect(triggerSpy)
-          .toHaveBeenCalledWith('mouseenter', jasmine.any(Function), jasmine.any(Object));
-      expect(triggerSpy)
-          .toHaveBeenCalledWith('focusin', jasmine.any(Function), jasmine.any(Object));
+      expect(triggerSpy).toHaveBeenCalledWith(
+        'mouseenter',
+        jasmine.any(Function),
+        jasmine.any(Object),
+      );
+      expect(triggerSpy).toHaveBeenCalledWith(
+        'focusin',
+        jasmine.any(Function),
+        jasmine.any(Object),
+      );
 
       // Verify that prefetch trigger element is cleaned up.
       expect(prefetchSpy).toHaveBeenCalledTimes(2);
-      expect(prefetchSpy)
-          .toHaveBeenCalledWith('mouseenter', jasmine.any(Function), jasmine.any(Object));
-      expect(prefetchSpy)
-          .toHaveBeenCalledWith('focusin', jasmine.any(Function), jasmine.any(Object));
+      expect(prefetchSpy).toHaveBeenCalledWith(
+        'mouseenter',
+        jasmine.any(Function),
+        jasmine.any(Object),
+      );
+      expect(prefetchSpy).toHaveBeenCalledWith(
+        'focusin',
+        jasmine.any(Function),
+        jasmine.any(Object),
+      );
     });
   });
 
@@ -3995,8 +3973,7 @@ describe('@defer', () => {
         template: '<ng-content />',
         providers: [{provide: TokenA, useValue: 'TokenA.ParentCmp'}],
       })
-      class ParentCmp {
-      }
+      class ParentCmp {}
 
       @Component({
         standalone: true,
@@ -4019,7 +3996,7 @@ describe('@defer', () => {
           </parent-cmp>
         `,
         imports: [ChildCmp, ParentCmp],
-        providers: [{provide: TokenB, useValue: 'TokenB.RootCmp'}]
+        providers: [{provide: TokenB, useValue: 'TokenB.RootCmp'}],
       })
       class RootCmp {
         isVisible = true;
@@ -4030,13 +4007,11 @@ describe('@defer', () => {
           return () => {
             return [dynamicImportOf(ChildCmp)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
         deferBlockBehavior: DeferBlockBehavior.Playthrough,
       });
 
@@ -4051,8 +4026,9 @@ describe('@defer', () => {
       const tokenA = 'TokenA.ParentCmp';
       const tokenB = 'TokenB.RootCmp';
 
-      expect(fixture.nativeElement.innerHTML)
-          .toContain(`<child-cmp>Token A: ${tokenA} | Token B: ${tokenB}</child-cmp>`);
+      expect(fixture.nativeElement.innerHTML).toContain(
+        `<child-cmp>Token A: ${tokenA} | Token B: ${tokenB}</child-cmp>`,
+      );
     });
   });
 
@@ -4084,8 +4060,7 @@ describe('@defer', () => {
         declarations: [Chart],
         exports: [Chart],
       })
-      class ChartsModule {
-      }
+      class ChartsModule {}
 
       @Component({
         selector: 'chart-collection',
@@ -4093,8 +4068,7 @@ describe('@defer', () => {
         standalone: true,
         imports: [ChartsModule],
       })
-      class ChartCollectionComponent {
-      }
+      class ChartCollectionComponent {}
 
       @Component({
         selector: 'app-root',
@@ -4107,7 +4081,7 @@ describe('@defer', () => {
           }
         `,
         imports: [ChartCollectionComponent],
-        providers: [{provide: TokenA, useValue: 'MyCmp.A'}]
+        providers: [{provide: TokenA, useValue: 'MyCmp.A'}],
       })
       class MyCmp {
         items = [1, 2, 3];
@@ -4119,13 +4093,11 @@ describe('@defer', () => {
           return () => {
             return [dynamicImportOf(ChartCollectionComponent)];
           };
-        }
+        },
       };
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
-        ],
+        providers: [{provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor}],
         deferBlockBehavior: DeferBlockBehavior.Playthrough,
       });
 
@@ -4151,8 +4123,9 @@ describe('@defer', () => {
       // can inject tokens provided in parent component (that contains `@defer`
       // in its template).
       const tokenFromRootComponent = 'TokenA:MyCmp.A';
-      expect(fixture.nativeElement.innerHTML)
-          .toContain(`<chart>${serviceFromNgModule}|${tokenFromRootComponent}</chart>`);
+      expect(fixture.nativeElement.innerHTML).toContain(
+        `<chart>${serviceFromNgModule}|${tokenFromRootComponent}</chart>`,
+      );
     });
   });
 
@@ -4165,16 +4138,14 @@ describe('@defer', () => {
       @NgModule({
         providers: [{provide: TokenA, useValue: 'nested'}],
       })
-      class MyModuleA {
-      }
+      class MyModuleA {}
 
       @Component({
         standalone: true,
         imports: [RouterOutlet],
         template: '<router-outlet />',
       })
-      class App {
-      }
+      class App {}
 
       @Component({
         standalone: true,
diff --git a/packages/core/test/acceptance/destroy_ref_spec.ts b/packages/core/test/acceptance/destroy_ref_spec.ts
index 369b4a65db755..ec5024907448e 100644
--- a/packages/core/test/acceptance/destroy_ref_spec.ts
+++ b/packages/core/test/acceptance/destroy_ref_spec.ts
@@ -7,7 +7,14 @@
  */
 
 import {NgIf} from '@angular/common';
-import {Component, createEnvironmentInjector, DestroyRef, Directive, EnvironmentInjector, inject} from '@angular/core';
+import {
+  Component,
+  createEnvironmentInjector,
+  DestroyRef,
+  Directive,
+  EnvironmentInjector,
+  inject,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 describe('DestroyRef', () => {
@@ -16,7 +23,7 @@ describe('DestroyRef', () => {
       let destroyed = false;
       const envInjector = createEnvironmentInjector([], TestBed.inject(EnvironmentInjector));
 
-      envInjector.get(DestroyRef).onDestroy(() => destroyed = true);
+      envInjector.get(DestroyRef).onDestroy(() => (destroyed = true));
       expect(destroyed).toBe(false);
 
       envInjector.destroy();
@@ -27,7 +34,7 @@ describe('DestroyRef', () => {
       let destroyed = false;
       const envInjector = createEnvironmentInjector([], TestBed.inject(EnvironmentInjector));
 
-      const unRegFn = envInjector.get(DestroyRef).onDestroy(() => destroyed = true);
+      const unRegFn = envInjector.get(DestroyRef).onDestroy(() => (destroyed = true));
       expect(destroyed).toBe(false);
 
       // explicitly unregister before destroy
@@ -80,7 +87,7 @@ describe('DestroyRef', () => {
       })
       class TestCmp {
         constructor(destroyCtx: DestroyRef) {
-          destroyCtx.onDestroy(() => destroyed = true);
+          destroyCtx.onDestroy(() => (destroyed = true));
         }
       }
 
@@ -100,7 +107,7 @@ describe('DestroyRef', () => {
       })
       class WithCleanupDirective {
         constructor() {
-          inject(DestroyRef).onDestroy(() => destroyed = true);
+          inject(DestroyRef).onDestroy(() => (destroyed = true));
         }
       }
 
@@ -133,7 +140,7 @@ describe('DestroyRef', () => {
       })
       class WithCleanupDirective {
         constructor() {
-          inject(DestroyRef).onDestroy(() => destroyed = true);
+          inject(DestroyRef).onDestroy(() => (destroyed = true));
         }
       }
 
@@ -196,7 +203,7 @@ describe('DestroyRef', () => {
     class TestCmp {
       unRegFn: () => void;
       constructor(destroyCtx: DestroyRef) {
-        this.unRegFn = destroyCtx.onDestroy(() => destroyed = true);
+        this.unRegFn = destroyCtx.onDestroy(() => (destroyed = true));
       }
     }
 
@@ -251,7 +258,6 @@ describe('DestroyRef', () => {
       constructor(public destroyRef: DestroyRef) {}
     }
 
-
     const fixture = TestBed.createComponent(TestCmp);
     const destroyRef = fixture.componentRef.instance.destroyRef;
     fixture.componentRef.destroy();
diff --git a/packages/core/test/acceptance/di_forward_ref_spec.ts b/packages/core/test/acceptance/di_forward_ref_spec.ts
index 4551399ee92e2..c418760ea52a9 100644
--- a/packages/core/test/acceptance/di_forward_ref_spec.ts
+++ b/packages/core/test/acceptance/di_forward_ref_spec.ts
@@ -26,13 +26,12 @@ describe('di with forwardRef', () => {
       }
 
       @Component({template: '<div dirA dirB></div>'})
-      class MyComp {
-      }
+      class MyComp {}
 
       TestBed.configureTestingModule({declarations: [DirectiveA, DirectiveB, MyComp]});
-      expect(() => TestBed.createComponent(MyComp))
-          .toThrowError(
-              'NG0200: Circular dependency in DI detected for DirectiveA. Find more at https://angular.io/errors/NG0200');
+      expect(() => TestBed.createComponent(MyComp)).toThrowError(
+        'NG0200: Circular dependency in DI detected for DirectiveA. Find more at https://angular.io/errors/NG0200',
+      );
     });
 
     describe('flags', () => {
diff --git a/packages/core/test/acceptance/di_spec.ts b/packages/core/test/acceptance/di_spec.ts
index 387f6cf0971d9..a88a2d42d9833 100644
--- a/packages/core/test/acceptance/di_spec.ts
+++ b/packages/core/test/acceptance/di_spec.ts
@@ -7,27 +7,81 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {assertInInjectionContext, Attribute, ChangeDetectorRef, Component, ComponentRef, createEnvironmentInjector, createNgModule, Directive, ElementRef, ENVIRONMENT_INITIALIZER, EnvironmentInjector, EventEmitter, forwardRef, Host, HOST_TAG_NAME, HostAttributeToken, HostBinding, importProvidersFrom, ImportProvidersSource, inject, Inject, Injectable, InjectFlags, InjectionToken, InjectOptions, INJECTOR, Injector, Input, LOCALE_ID, makeEnvironmentProviders, ModuleWithProviders, NgModule, NgModuleRef, NgZone, Optional, Output, Pipe, PipeTransform, Provider, runInInjectionContext, Self, SkipSelf, TemplateRef, Type, ViewChild, ViewContainerRef, ViewEncapsulation, ViewRef, ɵcreateInjector as createInjector, ɵDEFAULT_LOCALE_ID as DEFAULT_LOCALE_ID, ɵINJECTOR_SCOPE, ɵInternalEnvironmentProviders as InternalEnvironmentProviders} from '@angular/core';
+import {
+  assertInInjectionContext,
+  Attribute,
+  ChangeDetectorRef,
+  Component,
+  ComponentRef,
+  createEnvironmentInjector,
+  createNgModule,
+  Directive,
+  ElementRef,
+  ENVIRONMENT_INITIALIZER,
+  EnvironmentInjector,
+  EventEmitter,
+  forwardRef,
+  Host,
+  HOST_TAG_NAME,
+  HostAttributeToken,
+  HostBinding,
+  importProvidersFrom,
+  ImportProvidersSource,
+  inject,
+  Inject,
+  Injectable,
+  InjectFlags,
+  InjectionToken,
+  InjectOptions,
+  INJECTOR,
+  Injector,
+  Input,
+  LOCALE_ID,
+  makeEnvironmentProviders,
+  ModuleWithProviders,
+  NgModule,
+  NgModuleRef,
+  NgZone,
+  Optional,
+  Output,
+  Pipe,
+  PipeTransform,
+  Provider,
+  runInInjectionContext,
+  Self,
+  SkipSelf,
+  TemplateRef,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+  ViewEncapsulation,
+  ViewRef,
+  ɵcreateInjector as createInjector,
+  ɵDEFAULT_LOCALE_ID as DEFAULT_LOCALE_ID,
+  ɵINJECTOR_SCOPE,
+  ɵInternalEnvironmentProviders as InternalEnvironmentProviders,
+} from '@angular/core';
 import {RuntimeError, RuntimeErrorCode} from '@angular/core/src/errors';
 import {ViewRef as ViewRefInternal} from '@angular/core/src/render3/view_ref';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BehaviorSubject} from 'rxjs';
 
-const getProvidersByToken =
-    (providers: Provider[], token: Type<unknown>|InjectionToken<unknown>): Provider[] =>
-        providers.filter(provider => (provider as any).provide === token);
+const getProvidersByToken = (
+  providers: Provider[],
+  token: Type<unknown> | InjectionToken<unknown>,
+): Provider[] => providers.filter((provider) => (provider as any).provide === token);
 
 const hasProviderWithToken = (providers: Provider[], token: InjectionToken<unknown>): boolean =>
-    getProvidersByToken(providers, token).length > 0;
+  getProvidersByToken(providers, token).length > 0;
 
 const collectEnvironmentInitializerProviders = (providers: Provider[]) =>
-    getProvidersByToken(providers, ENVIRONMENT_INITIALIZER);
+  getProvidersByToken(providers, ENVIRONMENT_INITIALIZER);
 
 function unwrappedImportProvidersFrom(...sources: ImportProvidersSource[]): Provider[] {
-  const providers =
-      (importProvidersFrom(...sources) as unknown as InternalEnvironmentProviders).ɵproviders;
-  if (providers.some(provider => 'ɵproviders' in provider)) {
+  const providers = (importProvidersFrom(...sources) as unknown as InternalEnvironmentProviders)
+    .ɵproviders;
+  if (providers.some((provider) => 'ɵproviders' in provider)) {
     throw new Error(`Unexpected nested EnvironmentProviders in test`);
   }
   return providers as Provider[];
@@ -47,8 +101,7 @@ describe('importProvidersFrom', () => {
         {provide: D, useValue: 'D'},
       ],
     })
-    class MyModule2 {
-    }
+    class MyModule2 {}
     @NgModule({
       imports: [MyModule2],
       providers: [
@@ -56,8 +109,7 @@ describe('importProvidersFrom', () => {
         {provide: B, useValue: 'B'},
       ],
     })
-    class MyModule {
-    }
+    class MyModule {}
     const providers = unwrappedImportProvidersFrom(MyModule);
 
     // 4 tokens (A, B, C, D) + 2 providers for each NgModule:
@@ -77,8 +129,7 @@ describe('importProvidersFrom', () => {
 
   it('should collect providers from directly imported ModuleWithProviders', () => {
     @NgModule({})
-    class Module {
-    }
+    class Module {}
 
     const providers = unwrappedImportProvidersFrom({
       ngModule: Module,
@@ -87,40 +138,38 @@ describe('importProvidersFrom', () => {
     expect(hasProviderWithToken(providers, A)).toBe(true);
   });
 
-  it('should collect all providers when a module is used twice with different providers (via ModuleWithProviders)',
-     () => {
-       @NgModule({
-         providers: [
-           {provide: A, useValue: 'A'}  //
-         ]
-       })
-       class ModuleA {
-       }
-
-       @NgModule({imports: [ModuleA]})
-       class ModuleB {
-         static forRoot(): ModuleWithProviders<ModuleB> {
-           return {ngModule: ModuleB, providers: [{provide: B, useValue: 'B'}]};
-         }
-         static forChild(): ModuleWithProviders<ModuleB> {
-           return {ngModule: ModuleB, providers: [{provide: C, useValue: 'C'}]};
-         }
-       }
-
-       const providers = unwrappedImportProvidersFrom(ModuleB.forRoot(), ModuleB.forChild());
-
-       // Expect 2 `ENVIRONMENT_INITIALIZER` providers: one for `ModuleA`, another one for `ModuleB`
-       expect(collectEnvironmentInitializerProviders(providers).length).toBe(2);
-
-       // Expect exactly 1 provider for each module: `ModuleA` and `ModuleB`
-       expect(getProvidersByToken(providers, ModuleA).length).toBe(1);
-       expect(getProvidersByToken(providers, ModuleB).length).toBe(1);
-
-       // Expect all tokens to be collected.
-       expect(hasProviderWithToken(providers, A)).toBe(true);
-       expect(hasProviderWithToken(providers, B)).toBe(true);
-       expect(hasProviderWithToken(providers, C)).toBe(true);
-     });
+  it('should collect all providers when a module is used twice with different providers (via ModuleWithProviders)', () => {
+    @NgModule({
+      providers: [
+        {provide: A, useValue: 'A'}, //
+      ],
+    })
+    class ModuleA {}
+
+    @NgModule({imports: [ModuleA]})
+    class ModuleB {
+      static forRoot(): ModuleWithProviders<ModuleB> {
+        return {ngModule: ModuleB, providers: [{provide: B, useValue: 'B'}]};
+      }
+      static forChild(): ModuleWithProviders<ModuleB> {
+        return {ngModule: ModuleB, providers: [{provide: C, useValue: 'C'}]};
+      }
+    }
+
+    const providers = unwrappedImportProvidersFrom(ModuleB.forRoot(), ModuleB.forChild());
+
+    // Expect 2 `ENVIRONMENT_INITIALIZER` providers: one for `ModuleA`, another one for `ModuleB`
+    expect(collectEnvironmentInitializerProviders(providers).length).toBe(2);
+
+    // Expect exactly 1 provider for each module: `ModuleA` and `ModuleB`
+    expect(getProvidersByToken(providers, ModuleA).length).toBe(1);
+    expect(getProvidersByToken(providers, ModuleB).length).toBe(1);
+
+    // Expect all tokens to be collected.
+    expect(hasProviderWithToken(providers, A)).toBe(true);
+    expect(hasProviderWithToken(providers, B)).toBe(true);
+    expect(hasProviderWithToken(providers, C)).toBe(true);
+  });
 
   it('should process nested arrays within a provider set of ModuleWithProviders type', () => {
     @NgModule()
@@ -131,8 +180,8 @@ describe('importProvidersFrom', () => {
           providers: [
             {provide: A, useValue: 'A'},
             // Nested arrays inside the list of providers:
-            [{provide: B, useValue: 'B'}, [{provide: C, useValue: 'C'}]]
-          ]
+            [{provide: B, useValue: 'B'}, [{provide: C, useValue: 'C'}]],
+          ],
         };
       }
     }
@@ -151,85 +200,81 @@ describe('importProvidersFrom', () => {
     expect(hasProviderWithToken(providers, C)).toBe(true);
   });
 
-  it('should process nested arrays within provider set of an imported ModuleWithProviders type',
-     () => {
-       @NgModule()
-       class ModuleA {
-         static forRoot(): ModuleWithProviders<ModuleA> {
-           return {
-             ngModule: ModuleA,
-             providers: [
-               {provide: A, useValue: 'A'},
-               // Nested arrays inside the list of providers:
-               [{provide: B, useValue: 'B'}, [{provide: C, useValue: 'C'}]]
-             ]
-           };
-         }
-       }
-
-       @NgModule({imports: [ModuleA.forRoot()]})
-       class ModuleB {
-       }
-
-       const providers = unwrappedImportProvidersFrom(ModuleB);
-
-       // Expect 2 `ENVIRONMENT_INITIALIZER` providers: one for `ModuleA`, another one for `ModuleB`
-       expect(collectEnvironmentInitializerProviders(providers).length).toBe(2);
-
-       // Expect exactly 1 provider for each module: `ModuleA` and `ModuleB`
-       expect(getProvidersByToken(providers, ModuleA).length).toBe(1);
-       expect(getProvidersByToken(providers, ModuleB).length).toBe(1);
-
-       // Expect all tokens to be collected.
-       expect(hasProviderWithToken(providers, A)).toBe(true);
-       expect(hasProviderWithToken(providers, B)).toBe(true);
-       expect(hasProviderWithToken(providers, C)).toBe(true);
-     });
-
-  it('should collect providers defined via `@NgModule.providers` when ModuleWithProviders type is used',
-     () => {
-       @NgModule({
-         providers: [
-           {provide: A, useValue: 'Original A'},  //
-           {provide: B, useValue: 'B'},           //
-           {provide: D, useValue: 'Original D', multi: true}
-         ]
-       })
-       class ModuleA {
-         static forRoot(): ModuleWithProviders<ModuleA> {
-           return {
-             ngModule: ModuleA,
-             providers: [
-               {provide: A, useValue: 'Overridden A'},  //
-               {provide: C, useValue: 'C'},             //
-               {provide: D, useValue: 'Extra D', multi: true}
-             ]
-           };
-         }
-       }
-
-       const providers = unwrappedImportProvidersFrom(ModuleA.forRoot());
-
-       // Expect all tokens to be collected.
-       expect(hasProviderWithToken(providers, A)).toBe(true);
-       expect(hasProviderWithToken(providers, B)).toBe(true);
-       expect(hasProviderWithToken(providers, C)).toBe(true);
-       expect(hasProviderWithToken(providers, D)).toBe(true);
-
-       const parentEnvInjector = TestBed.inject(EnvironmentInjector);
-       const injector = createEnvironmentInjector(providers, parentEnvInjector);
-
-       // Verify that overridden token A has the right value.
-       expect(injector.get(A)).toBe('Overridden A');
-
-       // Verify that a multi-provider has both values.
-       expect(injector.get(D)).toEqual(['Original D', 'Extra D']);
-     });
+  it('should process nested arrays within provider set of an imported ModuleWithProviders type', () => {
+    @NgModule()
+    class ModuleA {
+      static forRoot(): ModuleWithProviders<ModuleA> {
+        return {
+          ngModule: ModuleA,
+          providers: [
+            {provide: A, useValue: 'A'},
+            // Nested arrays inside the list of providers:
+            [{provide: B, useValue: 'B'}, [{provide: C, useValue: 'C'}]],
+          ],
+        };
+      }
+    }
+
+    @NgModule({imports: [ModuleA.forRoot()]})
+    class ModuleB {}
+
+    const providers = unwrappedImportProvidersFrom(ModuleB);
+
+    // Expect 2 `ENVIRONMENT_INITIALIZER` providers: one for `ModuleA`, another one for `ModuleB`
+    expect(collectEnvironmentInitializerProviders(providers).length).toBe(2);
+
+    // Expect exactly 1 provider for each module: `ModuleA` and `ModuleB`
+    expect(getProvidersByToken(providers, ModuleA).length).toBe(1);
+    expect(getProvidersByToken(providers, ModuleB).length).toBe(1);
+
+    // Expect all tokens to be collected.
+    expect(hasProviderWithToken(providers, A)).toBe(true);
+    expect(hasProviderWithToken(providers, B)).toBe(true);
+    expect(hasProviderWithToken(providers, C)).toBe(true);
+  });
+
+  it('should collect providers defined via `@NgModule.providers` when ModuleWithProviders type is used', () => {
+    @NgModule({
+      providers: [
+        {provide: A, useValue: 'Original A'}, //
+        {provide: B, useValue: 'B'}, //
+        {provide: D, useValue: 'Original D', multi: true},
+      ],
+    })
+    class ModuleA {
+      static forRoot(): ModuleWithProviders<ModuleA> {
+        return {
+          ngModule: ModuleA,
+          providers: [
+            {provide: A, useValue: 'Overridden A'}, //
+            {provide: C, useValue: 'C'}, //
+            {provide: D, useValue: 'Extra D', multi: true},
+          ],
+        };
+      }
+    }
+
+    const providers = unwrappedImportProvidersFrom(ModuleA.forRoot());
+
+    // Expect all tokens to be collected.
+    expect(hasProviderWithToken(providers, A)).toBe(true);
+    expect(hasProviderWithToken(providers, B)).toBe(true);
+    expect(hasProviderWithToken(providers, C)).toBe(true);
+    expect(hasProviderWithToken(providers, D)).toBe(true);
+
+    const parentEnvInjector = TestBed.inject(EnvironmentInjector);
+    const injector = createEnvironmentInjector(providers, parentEnvInjector);
+
+    // Verify that overridden token A has the right value.
+    expect(injector.get(A)).toBe('Overridden A');
+
+    // Verify that a multi-provider has both values.
+    expect(injector.get(D)).toEqual(['Original D', 'Extra D']);
+  });
 
   it('should not be allowed in component providers', () => {
     @NgModule({})
-    class Module {
-    }
+    class Module {}
 
     expect(() => {
       @Component({
@@ -239,8 +284,7 @@ describe('importProvidersFrom', () => {
         // `any[]` option.
         providers: [[importProvidersFrom(Module)]],
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       TestBed.createComponent(Cmp);
     }).toThrowError(/NG0207/);
@@ -248,12 +292,10 @@ describe('importProvidersFrom', () => {
 
   it('should import providers from an array of NgModules (may be nested)', () => {
     @NgModule({providers: [{provide: A, useValue: 'A'}]})
-    class ModuleA {
-    }
+    class ModuleA {}
 
     @NgModule({providers: [{provide: B, useValue: 'B'}]})
-    class ModuleB {
-    }
+    class ModuleB {}
 
     const providers = unwrappedImportProvidersFrom([ModuleA, [ModuleB]]);
 
@@ -263,31 +305,31 @@ describe('importProvidersFrom', () => {
 
   it('should throw when trying to import providers from standalone components', () => {
     @NgModule({providers: [{provide: A, useValue: 'A'}]})
-    class ModuleA {
-    }
+    class ModuleA {}
 
     @Component({
       standalone: true,
       template: '',
       imports: [ModuleA],
     })
-    class StandaloneCmp {
-    }
+    class StandaloneCmp {}
 
     expect(() => {
       importProvidersFrom(StandaloneCmp);
-    })
-        .toThrowError(
-            'NG0800: Importing providers supports NgModule or ModuleWithProviders but got a standalone component "StandaloneCmp"');
+    }).toThrowError(
+      'NG0800: Importing providers supports NgModule or ModuleWithProviders but got a standalone component "StandaloneCmp"',
+    );
   });
 });
 
 describe('EnvironmentProviders', () => {
   const TOKEN = new InjectionToken<string>('TOKEN');
-  const environmentProviders = makeEnvironmentProviders([{
-    provide: TOKEN,
-    useValue: 'token!',
-  }]);
+  const environmentProviders = makeEnvironmentProviders([
+    {
+      provide: TOKEN,
+      useValue: 'token!',
+    },
+  ]);
 
   it('should be accepted by TestBed providers', () => {
     TestBed.configureTestingModule({
@@ -301,8 +343,7 @@ describe('EnvironmentProviders', () => {
     @NgModule({
       providers: [environmentProviders],
     })
-    class TestModule {
-    }
+    class TestModule {}
 
     const inj = createNgModule(TestModule).injector;
     expect(inj.get(TOKEN)).toEqual('token!');
@@ -312,8 +353,7 @@ describe('EnvironmentProviders', () => {
     @NgModule({
       providers: [environmentProviders],
     })
-    class TestModule {
-    }
+    class TestModule {}
 
     TestBed.configureTestingModule({
       imports: [TestModule],
@@ -324,8 +364,7 @@ describe('EnvironmentProviders', () => {
 
   it('should be accepted in ModuleWithProviders & createNgModule', () => {
     @NgModule({})
-    class EmptyModule {
-    }
+    class EmptyModule {}
 
     const mwp: ModuleWithProviders<EmptyModule> = {
       ngModule: EmptyModule,
@@ -335,8 +374,7 @@ describe('EnvironmentProviders', () => {
     @NgModule({
       imports: [mwp],
     })
-    class TestModule {
-    }
+    class TestModule {}
 
     const inj = createNgModule(TestModule).injector;
     expect(inj.get(TOKEN)).toEqual('token!');
@@ -344,8 +382,10 @@ describe('EnvironmentProviders', () => {
 
   it('should be accepted by createEnvironmentInjector', () => {
     TestBed.configureTestingModule({});
-    const inj =
-        createEnvironmentInjector([environmentProviders], TestBed.inject(EnvironmentInjector));
+    const inj = createEnvironmentInjector(
+      [environmentProviders],
+      TestBed.inject(EnvironmentInjector),
+    );
     expect(inj.get(TOKEN)).toEqual('token!');
   });
 
@@ -388,8 +428,7 @@ describe('di', () => {
         value = 'Created';
       }
       @Component({template: '<div dir #dir="dir">{{ dir.value }}</div>'})
-      class MyComp {
-      }
+      class MyComp {}
       TestBed.configureTestingModule({declarations: [MyDirective, MyComp]});
       const fixture = TestBed.createComponent(MyComp);
       fixture.detectChanges();
@@ -404,12 +443,10 @@ describe('di', () => {
       const testToken = new InjectionToken<string[]>('test-multi');
 
       @NgModule({providers: [{provide: testToken, useValue: 'A', multi: true}]})
-      class TestModuleA {
-      }
+      class TestModuleA {}
 
       @NgModule({providers: [{provide: testToken, useValue: 'B', multi: true}]})
-      class TestModuleB {
-      }
+      class TestModuleB {}
 
       TestBed.configureTestingModule({
         imports: [
@@ -418,7 +455,7 @@ describe('di', () => {
             providers: [{provide: testToken, useValue: 'C', multi: true}],
           },
           TestModuleB,
-        ]
+        ],
       });
 
       expect(TestBed.inject(testToken)).toEqual(['A', 'B', 'C']);
@@ -437,7 +474,7 @@ describe('di', () => {
       }
     }
 
-    beforeEach(() => log = []);
+    beforeEach(() => (log = []));
 
     it('should create directive with intra view dependencies', () => {
       @Directive({selector: '[dirA]', exportAs: 'dirA'})
@@ -459,10 +496,9 @@ describe('di', () => {
         <div dirA>
           <span dirB dirC #dir="dirC">{{ dir.value }}</span>
         </div>
-      `
+      `,
       })
-      class MyComp {
-      }
+      class MyComp {}
 
       TestBed.configureTestingModule({declarations: [DirectiveA, DirectiveB, DirectiveC, MyComp]});
       const fixture = TestBed.createComponent(MyComp);
@@ -483,8 +519,7 @@ describe('di', () => {
       }
 
       @Component({template: '<div dirA dirB></div>'})
-      class MyComp {
-      }
+      class MyComp {}
 
       TestBed.configureTestingModule({declarations: [DirectiveA, DirectiveB, MyComp]});
       const fixture = TestBed.createComponent(MyComp);
@@ -507,12 +542,11 @@ describe('di', () => {
       // - then when dirA tries to inject dirB, it will check the node injector first tree
       // - if not found, it will check the module injector tree
       @Component({template: '<div dirB></div><div dirA></div>'})
-      class MyComp {
-      }
+      class MyComp {}
 
       TestBed.configureTestingModule({
         declarations: [DirectiveA, DirectiveB, MyComp],
-        providers: [{provide: DirectiveB, useValue: {value: 'module'}}]
+        providers: [{provide: DirectiveB, useValue: {value: 'module'}}],
       });
       const fixture = TestBed.createComponent(MyComp);
       fixture.detectChanges();
@@ -529,8 +563,7 @@ describe('di', () => {
       }
 
       @Component({template: '<my-comp dirB></my-comp>'})
-      class MyApp {
-      }
+      class MyApp {}
 
       TestBed.configureTestingModule({declarations: [DirectiveB, MyComp, MyApp]});
       const fixture = TestBed.createComponent(MyApp);
@@ -556,8 +589,14 @@ describe('di', () => {
       const fixture = TestBed.createComponent(MyComp);
       fixture.detectChanges();
 
-      expect(log).toEqual(
-          ['DirB', 'DirA (dep: DirB)', 'DirB', 'DirA (dep: DirB)', 'DirB', 'DirA (dep: DirB)']);
+      expect(log).toEqual([
+        'DirB',
+        'DirA (dep: DirB)',
+        'DirB',
+        'DirA (dep: DirB)',
+        'DirB',
+        'DirA (dep: DirB)',
+      ]);
     });
 
     it('should instantiate directives with multiple out-of-order dependencies', () => {
@@ -587,8 +626,7 @@ describe('di', () => {
       }
 
       @Component({template: '<div dirA dirB dirC></div>'})
-      class MyComp {
-      }
+      class MyComp {}
 
       TestBed.configureTestingModule({declarations: [DirectiveA, DirectiveB, DirectiveC, MyComp]});
       const fixture = TestBed.createComponent(MyComp);
@@ -633,16 +671,21 @@ describe('di', () => {
       }
 
       @Component({template: '<my-comp dirA dirB dirC dirD></my-comp>'})
-      class MyApp {
-      }
+      class MyApp {}
 
-      TestBed.configureTestingModule(
-          {declarations: [DirectiveA, DirectiveB, DirectiveC, DirectiveD, MyComp, MyApp]});
+      TestBed.configureTestingModule({
+        declarations: [DirectiveA, DirectiveB, DirectiveC, DirectiveD, MyComp, MyApp],
+      });
       const fixture = TestBed.createComponent(MyApp);
       fixture.detectChanges();
 
-      expect(log).toEqual(
-          ['DirB', 'DirC (dep: DirB)', 'DirA (dep: DirC)', 'DirD (dep: DirA)', 'Comp (dep: DirD)']);
+      expect(log).toEqual([
+        'DirB',
+        'DirC (dep: DirB)',
+        'DirA (dep: DirC)',
+        'DirD (dep: DirA)',
+        'Comp (dep: DirD)',
+      ]);
     });
 
     it('should instantiate in correct order with mixed parent and peer dependencies', () => {
@@ -686,12 +729,10 @@ describe('di', () => {
       }
 
       @Component({selector: 'my-comp', template: '<div dirA dirB></div>'})
-      class MyComp {
-      }
+      class MyComp {}
 
       @Component({template: '<my-comp dirB></my-comp>'})
-      class MyApp {
-      }
+      class MyApp {}
 
       TestBed.configureTestingModule({declarations: [DirectiveA, DirectiveB, MyComp, MyApp]});
       const fixture = TestBed.createComponent(MyApp);
@@ -705,20 +746,23 @@ describe('di', () => {
       class DirectiveA {
         injector: Injector;
 
-        constructor(public dirB: DirectiveB, public vcr: ViewContainerRef) {
+        constructor(
+          public dirB: DirectiveB,
+          public vcr: ViewContainerRef,
+        ) {
           this.injector = vcr.injector;
         }
       }
 
-      @Component(
-          {selector: 'my-comp', template: '<div dirA #dir="dirA">{{ dir.dirB.value }}</div>'})
-      class MyComp {
-      }
+      @Component({
+        selector: 'my-comp',
+        template: '<div dirA #dir="dirA">{{ dir.dirB.value }}</div>',
+      })
+      class MyComp {}
 
       it('should find dependencies on component hosts', () => {
         @Component({template: '<my-comp dirB></my-comp>'})
-        class MyApp {
-        }
+        class MyApp {}
 
         TestBed.configureTestingModule({declarations: [DirectiveA, DirectiveB, MyComp, MyApp]});
         const fixture = TestBed.createComponent(MyApp);
@@ -734,7 +778,7 @@ describe('di', () => {
             <div *ngIf="showing">
               <div dirA #dir="dirA">{{ dir.dirB.value }}</div>
             </div>
-          </div>`
+          </div>`,
         })
         class MyApp {
           showing = false;
@@ -757,7 +801,7 @@ describe('di', () => {
                 <div dirA #dir="dirA">{{ dir.dirB.value }}</div>
               </ng-container>
             </ng-container>
-          </div>`
+          </div>`,
         })
         class MyApp {
           skipContent = false;
@@ -794,14 +838,15 @@ describe('di', () => {
          <div dirB value="insertion">
            <div structuralDir [tmp]="foo"></div>
            <!-- insertion point -->
-         </div>`
+         </div>`,
         })
         class MyComp {
           @ViewChild(StructuralDirective) structuralDir!: StructuralDirective;
         }
 
-        TestBed.configureTestingModule(
-            {declarations: [StructuralDirective, DirectiveA, DirectiveB, MyComp]});
+        TestBed.configureTestingModule({
+          declarations: [StructuralDirective, DirectiveA, DirectiveB, MyComp],
+        });
         const fixture = TestBed.createComponent(MyComp);
         fixture.detectChanges();
         fixture.componentInstance.structuralDir.create();
@@ -816,10 +861,9 @@ describe('di', () => {
           template: `<div>
             <my-comp dirB></my-comp>
             <my-comp dirB></my-comp>
-          </div>`
+          </div>`,
         })
-        class MyApp {
-        }
+        class MyApp {}
 
         TestBed.configureTestingModule({declarations: [DirectiveA, DirectiveB, MyComp, MyApp]});
         const fixture = TestBed.createComponent(MyApp);
@@ -838,15 +882,16 @@ describe('di', () => {
         @Component({
           template: `<div dirB hostBindingDir>
             <p dirA #dir="dirA">{{ dir.dirB.value }}</p>
-          </div>`
+          </div>`,
         })
         class MyApp {
           @ViewChild(HostBindingDirective) hostBindingDir!: HostBindingDirective;
           @ViewChild(DirectiveA) dirA!: DirectiveA;
         }
 
-        TestBed.configureTestingModule(
-            {declarations: [DirectiveA, DirectiveB, HostBindingDirective, MyApp]});
+        TestBed.configureTestingModule({
+          declarations: [DirectiveA, DirectiveB, HostBindingDirective, MyApp],
+        });
         const fixture = TestBed.createComponent(MyApp);
         fixture.detectChanges();
 
@@ -865,21 +910,21 @@ describe('di', () => {
 
       it('dynamic components should find dependencies when parent is projected', () => {
         @Directive({selector: '[dirA]'})
-        class DirA {
-        }
+        class DirA {}
         @Directive({selector: '[dirB]'})
-        class DirB {
-        }
+        class DirB {}
         @Component({selector: 'child', template: ''})
         class Child {
-          constructor(@Optional() readonly dirA: DirA, @Optional() readonly dirB: DirB) {}
+          constructor(
+            @Optional() readonly dirA: DirA,
+            @Optional() readonly dirB: DirB,
+          ) {}
         }
         @Component({
           selector: 'projector',
           template: '<ng-content></ng-content>',
         })
-        class Projector {
-        }
+        class Projector {}
 
         @Component({
           template: `
@@ -888,7 +933,7 @@ describe('di', () => {
               <ng-container #childOrigin></ng-container>
               <ng-container #childOriginWithDirB dirB></ng-container>
             </div>
-          </projector>`
+          </projector>`,
         })
         class MyApp {
           @ViewChild('childOrigin', {read: ViewContainerRef, static: true})
@@ -904,24 +949,25 @@ describe('di', () => {
           }
         }
 
-        const fixture =
-            TestBed.configureTestingModule({declarations: [Child, DirA, DirB, Projector, MyApp]})
-                .createComponent(MyApp);
+        const fixture = TestBed.configureTestingModule({
+          declarations: [Child, DirA, DirB, Projector, MyApp],
+        }).createComponent(MyApp);
         const child = fixture.componentInstance.addChild();
         expect(child).toBeDefined();
         expect(child.instance.dirA)
-            .withContext('dirA should be found. It is on the parent of the viewContainerRef.')
-            .not.toBeNull();
+          .withContext('dirA should be found. It is on the parent of the viewContainerRef.')
+          .not.toBeNull();
         const child2 = fixture.componentInstance.addChildWithDirB();
         expect(child2).toBeDefined();
         expect(child2.instance.dirA)
-            .withContext('dirA should be found. It is on the parent of the viewContainerRef.')
-            .not.toBeNull();
+          .withContext('dirA should be found. It is on the parent of the viewContainerRef.')
+          .not.toBeNull();
         expect(child2.instance.dirB)
-            .withContext(
-                'dirB appears on the ng-container and should not be found because the ' +
-                'viewContainerRef.createComponent node is inserted next to the container.')
-            .toBeNull();
+          .withContext(
+            'dirB appears on the ng-container and should not be found because the ' +
+              'viewContainerRef.createComponent node is inserted next to the container.',
+          )
+          .toBeNull();
       });
     });
 
@@ -937,8 +983,7 @@ describe('di', () => {
       }
 
       @Component({template: '<div dirA></div>'})
-      class MyComp {
-      }
+      class MyComp {}
 
       TestBed.configureTestingModule({declarations: [DirectiveA, DirectiveB, MyComp]});
       expect(() => TestBed.createComponent(MyComp)).toThrowError(/No provider for DirectiveB/);
@@ -956,99 +1001,96 @@ describe('di', () => {
       }
 
       @Component({template: '<div dirA></div><div dirB></div>'})
-      class MyComp {
-      }
+      class MyComp {}
 
       TestBed.configureTestingModule({declarations: [DirectiveA, DirectiveB, MyComp]});
       expect(() => TestBed.createComponent(MyComp)).toThrowError(/No provider for DirectiveB/);
     });
 
-    it('should not have access to the directive injector in a standalone injector from within a directive-level provider factory',
-       () => {
-         // https://github.com/angular/angular/issues/42651
-         class TestA {
-           constructor(public injector: string) {}
-         }
-         class TestB {
-           constructor(public a: TestA) {}
-         }
-
-         function createTestB() {
-           // Setup a standalone injector that provides `TestA`, which is resolved from a
-           // standalone child injector that requests `TestA` as a dependency for `TestB`.
-           // Although we're inside a directive factory and therefore have access to the
-           // directive-level injector, `TestA` has to be resolved from the standalone injector.
-           const parent = Injector.create({
-             providers: [{provide: TestA, useFactory: () => new TestA('standalone'), deps: []}],
-             name: 'TestA',
-           });
-           const child = Injector.create({
-             providers: [{provide: TestB, useClass: TestB, deps: [TestA]}],
-             parent,
-             name: 'TestB',
-           });
-           return child.get(TestB);
-         }
-
-         @Component({
-           template: '',
-           providers: [
-             {provide: TestA, useFactory: () => new TestA('component'), deps: []},
-             {provide: TestB, useFactory: createTestB},
-           ],
-         })
-         class MyComp {
-           constructor(public readonly testB: TestB) {}
-         }
-
-         TestBed.configureTestingModule({declarations: [MyComp]});
-
-         const cmp = TestBed.createComponent(MyComp);
-         expect(cmp.componentInstance.testB).toBeInstanceOf(TestB);
-         expect(cmp.componentInstance.testB.a.injector).toBe('standalone');
-       });
-
-    it('should not have access to the directive injector in a standalone injector from within a directive-level provider factory',
-       () => {
-         class TestA {
-           constructor(public injector: string) {}
-         }
-         class TestB {
-           constructor(public a: TestA|null) {}
-         }
-
-         function createTestB() {
-           // Setup a standalone injector that provides `TestB` with an optional dependency of
-           // `TestA`. Since `TestA` is not provided by the standalone injector it should resolve
-           // to null; both the NgModule providers and the component-level providers should not
-           // be considered.
-           const injector = Injector.create({
-             providers: [{provide: TestB, useClass: TestB, deps: [[TestA, new Optional()]]}],
-             name: 'TestB',
-           });
-           return injector.get(TestB);
-         }
-
-         @Component({
-           template: '',
-           providers: [
-             {provide: TestA, useFactory: () => new TestA('component'), deps: []},
-             {provide: TestB, useFactory: createTestB},
-           ],
-         })
-         class MyComp {
-           constructor(public readonly testB: TestB) {}
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [MyComp],
-           providers: [{provide: TestA, useFactory: () => new TestA('module'), deps: []}]
-         });
-
-         const cmp = TestBed.createComponent(MyComp);
-         expect(cmp.componentInstance.testB).toBeInstanceOf(TestB);
-         expect(cmp.componentInstance.testB.a).toBeNull();
-       });
+    it('should not have access to the directive injector in a standalone injector from within a directive-level provider factory', () => {
+      // https://github.com/angular/angular/issues/42651
+      class TestA {
+        constructor(public injector: string) {}
+      }
+      class TestB {
+        constructor(public a: TestA) {}
+      }
+
+      function createTestB() {
+        // Setup a standalone injector that provides `TestA`, which is resolved from a
+        // standalone child injector that requests `TestA` as a dependency for `TestB`.
+        // Although we're inside a directive factory and therefore have access to the
+        // directive-level injector, `TestA` has to be resolved from the standalone injector.
+        const parent = Injector.create({
+          providers: [{provide: TestA, useFactory: () => new TestA('standalone'), deps: []}],
+          name: 'TestA',
+        });
+        const child = Injector.create({
+          providers: [{provide: TestB, useClass: TestB, deps: [TestA]}],
+          parent,
+          name: 'TestB',
+        });
+        return child.get(TestB);
+      }
+
+      @Component({
+        template: '',
+        providers: [
+          {provide: TestA, useFactory: () => new TestA('component'), deps: []},
+          {provide: TestB, useFactory: createTestB},
+        ],
+      })
+      class MyComp {
+        constructor(public readonly testB: TestB) {}
+      }
+
+      TestBed.configureTestingModule({declarations: [MyComp]});
+
+      const cmp = TestBed.createComponent(MyComp);
+      expect(cmp.componentInstance.testB).toBeInstanceOf(TestB);
+      expect(cmp.componentInstance.testB.a.injector).toBe('standalone');
+    });
+
+    it('should not have access to the directive injector in a standalone injector from within a directive-level provider factory', () => {
+      class TestA {
+        constructor(public injector: string) {}
+      }
+      class TestB {
+        constructor(public a: TestA | null) {}
+      }
+
+      function createTestB() {
+        // Setup a standalone injector that provides `TestB` with an optional dependency of
+        // `TestA`. Since `TestA` is not provided by the standalone injector it should resolve
+        // to null; both the NgModule providers and the component-level providers should not
+        // be considered.
+        const injector = Injector.create({
+          providers: [{provide: TestB, useClass: TestB, deps: [[TestA, new Optional()]]}],
+          name: 'TestB',
+        });
+        return injector.get(TestB);
+      }
+
+      @Component({
+        template: '',
+        providers: [
+          {provide: TestA, useFactory: () => new TestA('component'), deps: []},
+          {provide: TestB, useFactory: createTestB},
+        ],
+      })
+      class MyComp {
+        constructor(public readonly testB: TestB) {}
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [MyComp],
+        providers: [{provide: TestA, useFactory: () => new TestA('module'), deps: []}],
+      });
+
+      const cmp = TestBed.createComponent(MyComp);
+      expect(cmp.componentInstance.testB).toBeInstanceOf(TestB);
+      expect(cmp.componentInstance.testB.a).toBeNull();
+    });
 
     it('should throw if directive tries to inject itself', () => {
       @Directive({selector: '[dirA]'})
@@ -1057,13 +1099,12 @@ describe('di', () => {
       }
 
       @Component({template: '<div dirA></div>'})
-      class MyComp {
-      }
+      class MyComp {}
 
       TestBed.configureTestingModule({declarations: [DirectiveA, DirectiveB, MyComp]});
-      expect(() => TestBed.createComponent(MyComp))
-          .toThrowError(
-              'NG0200: Circular dependency in DI detected for DirectiveA. Find more at https://angular.io/errors/NG0200');
+      expect(() => TestBed.createComponent(MyComp)).toThrowError(
+        'NG0200: Circular dependency in DI detected for DirectiveA. Find more at https://angular.io/errors/NG0200',
+      );
     });
 
     describe('flags', () => {
@@ -1135,7 +1176,7 @@ describe('di', () => {
 
           @Component({template: ''})
           class MyComp {
-            value: string|undefined;
+            value: string | undefined;
             constructor(injector: Injector) {
               this.value = injector.get(NON_EXISTING_PROVIDER, 'default', InjectFlags.Host);
             }
@@ -1156,11 +1197,11 @@ describe('di', () => {
         }
 
         @Component({template: '<div dirB><div dirA></div></div>'})
-        class MyComp {
-        }
+        class MyComp {}
         TestBed.configureTestingModule({declarations: [DirectiveA, DirectiveB, MyComp]});
-        expect(() => TestBed.createComponent(MyComp))
-            .toThrowError(/NG0201: No provider for DirectiveB found in NodeInjector/);
+        expect(() => TestBed.createComponent(MyComp)).toThrowError(
+          /NG0201: No provider for DirectiveB found in NodeInjector/,
+        );
       });
 
       describe('SkipSelf', () => {
@@ -1169,24 +1210,30 @@ describe('di', () => {
             @Component({
               selector: 'parent',
               template: '<child></child>',
-              providers: [{
-                provide: 'token',
-                useValue: 'PARENT',
-              }]
+              providers: [
+                {
+                  provide: 'token',
+                  useValue: 'PARENT',
+                },
+              ],
             })
-            class ParentComponent {
-            }
+            class ParentComponent {}
 
             @Component({
               selector: 'child',
               template: '...',
-              providers: [{
-                provide: 'token',
-                useValue: 'CHILD',
-              }]
+              providers: [
+                {
+                  provide: 'token',
+                  useValue: 'CHILD',
+                },
+              ],
             })
             class ChildComponent {
-              constructor(public injector: Injector, @SkipSelf() public parentInjector: Injector) {}
+              constructor(
+                public injector: Injector,
+                @SkipSelf() public parentInjector: Injector,
+              ) {}
             }
 
             TestBed.configureTestingModule({
@@ -1195,342 +1242,350 @@ describe('di', () => {
             const fixture = TestBed.createComponent(ParentComponent);
             fixture.detectChanges();
 
-            const childComponent =
-                fixture.debugElement.query(By.directive(ChildComponent)).componentInstance;
+            const childComponent = fixture.debugElement.query(
+              By.directive(ChildComponent),
+            ).componentInstance;
             expect(childComponent.injector.get('token')).toBe('CHILD');
             expect(childComponent.parentInjector.get('token')).toBe('PARENT');
           });
 
-          it('should lookup module injector in case @SkipSelf is used and no suitable Injector found in element injector tree',
-             () => {
-               let componentInjector: Injector;
-               let moduleInjector: Injector;
-               @Component({
-                 selector: 'child',
-                 template: '...',
-                 providers: [{
-                   provide: 'token',
-                   useValue: 'CHILD',
-                 }]
-               })
-               class MyComponent {
-                 constructor(@SkipSelf() public injector: Injector) {
-                   componentInjector = injector;
-                 }
-               }
-
-               @NgModule({
-                 declarations: [MyComponent],
-                 providers: [{
-                   provide: 'token',
-                   useValue: 'NG_MODULE',
-                 }]
-               })
-               class MyModule {
-                 constructor(public injector: Injector) {
-                   moduleInjector = injector;
-                 }
-               }
-
-               TestBed.configureTestingModule({
-                 imports: [MyModule],
-               });
-               const fixture = TestBed.createComponent(MyComponent);
-               fixture.detectChanges();
-
-               expect(componentInjector!.get('token')).toBe('NG_MODULE');
-               expect(moduleInjector!.get('token')).toBe('NG_MODULE');
-             });
-
-          it('should respect @Host in case @SkipSelf is used and no suitable Injector found in element injector tree',
-             () => {
-               let componentInjector: Injector;
-               let moduleInjector: Injector;
-               @Component({
-                 selector: 'child',
-                 template: '...',
-                 providers: [{
-                   provide: 'token',
-                   useValue: 'CHILD',
-                 }]
-               })
-               class MyComponent {
-                 constructor(@Host() @SkipSelf() public injector: Injector) {
-                   componentInjector = injector;
-                 }
-               }
-
-               @NgModule({
-                 declarations: [MyComponent],
-                 providers: [{
-                   provide: 'token',
-                   useValue: 'NG_MODULE',
-                 }]
-               })
-               class MyModule {
-                 constructor(public injector: Injector) {
-                   moduleInjector = injector;
-                 }
-               }
-
-               TestBed.configureTestingModule({
-                 imports: [MyModule],
-               });
-
-               expect(() => TestBed.createComponent(MyComponent))
-                   .toThrowError(/NG0201: No provider for Injector found in NodeInjector/);
-             });
-
-          it('should throw when injecting Injectors using @SkipSelf and @Host and no Injectors are available in a current view',
-             () => {
-               @Component({
-                 selector: 'parent',
-                 template: '<child></child>',
-                 providers: [{
-                   provide: 'token',
-                   useValue: 'PARENT',
-                 }]
-               })
-               class ParentComponent {
-               }
-
-               @Component({
-                 selector: 'child',
-                 template: '...',
-                 providers: [{
-                   provide: 'token',
-                   useValue: 'CHILD',
-                 }]
-               })
-               class ChildComponent {
-                 constructor(@Host() @SkipSelf() public injector: Injector) {}
-               }
-
-               TestBed.configureTestingModule({
-                 declarations: [ParentComponent, ChildComponent],
-               });
-
-               const expectedErrorMessage =
-                   /NG0201: No provider for Injector found in NodeInjector/;
-               expect(() => TestBed.createComponent(ParentComponent))
-                   .toThrowError(expectedErrorMessage);
-             });
-
-          it('should not throw when injecting Injectors using @SkipSelf, @Host, and @Optional and no Injectors are available in a current view',
-             () => {
-               @Component({
-                 selector: 'parent',
-                 template: '<child></child>',
-                 providers: [{
-                   provide: 'token',
-                   useValue: 'PARENT',
-                 }]
-               })
-               class ParentComponent {
-               }
-
-               @Component({
-                 selector: 'child',
-                 template: '...',
-                 providers: [{
-                   provide: 'token',
-                   useValue: 'CHILD',
-                 }]
-               })
-               class ChildComponent {
-                 constructor(@Host() @SkipSelf() @Optional() public injector: Injector) {}
-               }
-
-               TestBed.configureTestingModule({
-                 declarations: [ParentComponent, ChildComponent],
-               });
-
-               const expectedErrorMessage =
-                   /NG0201: No provider for Injector found in NodeInjector/;
-               expect(() => TestBed.createComponent(ParentComponent))
-                   .not.toThrowError(expectedErrorMessage);
-             });
-        });
-
-        describe('ElementRef', () => {
-          // While tokens like `ElementRef` make sense only in a context of a NodeInjector,
-          // ViewEngine also used `ModuleInjector` tree to lookup such tokens. In Ivy we replicate
-          // this behavior for now to avoid breaking changes.
-          it('should lookup module injector in case @SkipSelf is used for `ElementRef` token and Component has no parent',
-             () => {
-               let componentElement: ElementRef;
-               let moduleElement: ElementRef;
-               @Component({template: '<div>component</div>'})
-               class MyComponent {
-                 constructor(@SkipSelf() public el: ElementRef) {
-                   componentElement = el;
-                 }
-               }
-
-               @NgModule({
-                 declarations: [MyComponent],
-                 providers: [{
-                   provide: ElementRef,
-                   useValue: {from: 'NG_MODULE'},
-                 }]
-               })
-               class MyModule {
-                 constructor(public el: ElementRef) {
-                   moduleElement = el;
-                 }
-               }
-
-               TestBed.configureTestingModule({
-                 imports: [MyModule],
-               });
-               const fixture = TestBed.createComponent(MyComponent);
-               fixture.detectChanges();
-
-               expect((moduleElement! as any).from).toBe('NG_MODULE');
-               expect((componentElement! as any).from).toBe('NG_MODULE');
-             });
-
-          it('should return host node when @SkipSelf is used for `ElementRef` token and Component has no parent node',
-             () => {
-               let parentElement: ElementRef;
-               let componentElement: ElementRef;
-               @Component({selector: 'child', template: '...'})
-               class MyComponent {
-                 constructor(@SkipSelf() public el: ElementRef) {
-                   componentElement = el;
-                 }
-               }
-
-               @Component({
-                 template: '<child></child>',
-               })
-               class ParentComponent {
-                 constructor(public el: ElementRef) {
-                   parentElement = el;
-                 }
-               }
-
-               TestBed.configureTestingModule({
-                 imports: [CommonModule],
-                 declarations: [ParentComponent, MyComponent],
-               });
-               const fixture = TestBed.createComponent(ParentComponent);
-               fixture.detectChanges();
-
-               expect(componentElement!).toEqual(parentElement!);
-             });
-
-          it('should @SkipSelf on child directive node when injecting ElementRef on nested parent directive',
-             () => {
-               let parentRef: ElementRef;
-               let childRef: ElementRef;
-
-               @Directive({selector: '[parent]'})
-               class ParentDirective {
-                 constructor(elementRef: ElementRef) {
-                   parentRef = elementRef;
-                 }
-               }
-
-               @Directive({selector: '[child]'})
-               class ChildDirective {
-                 constructor(@SkipSelf() elementRef: ElementRef) {
-                   childRef = elementRef;
-                 }
-               }
-
-               @Component({template: '<div parent>parent <span child>child</span></div>'})
-               class MyComp {
-               }
-
-               TestBed.configureTestingModule(
-                   {declarations: [ParentDirective, ChildDirective, MyComp]});
-               const fixture = TestBed.createComponent(MyComp);
-               fixture.detectChanges();
-
-               // Assert against the `nativeElement` since Ivy always returns a new ElementRef.
-               expect(childRef!.nativeElement).toBe(parentRef!.nativeElement);
-               expect(childRef!.nativeElement.tagName).toBe('DIV');
-             });
-        });
-
-        describe('@SkipSelf when parent contains embedded views', () => {
-          it('should work for `ElementRef` token', () => {
-            let requestedElementRef: ElementRef;
+          it('should lookup module injector in case @SkipSelf is used and no suitable Injector found in element injector tree', () => {
+            let componentInjector: Injector;
+            let moduleInjector: Injector;
             @Component({
               selector: 'child',
               template: '...',
+              providers: [
+                {
+                  provide: 'token',
+                  useValue: 'CHILD',
+                },
+              ],
             })
-            class ChildComponent {
-              constructor(@SkipSelf() public elementRef: ElementRef) {
-                requestedElementRef = elementRef;
+            class MyComponent {
+              constructor(@SkipSelf() public injector: Injector) {
+                componentInjector = injector;
               }
             }
-            @Component({
-              selector: 'root',
-              template: '<div><child *ngIf="true"></child></div>',
+
+            @NgModule({
+              declarations: [MyComponent],
+              providers: [
+                {
+                  provide: 'token',
+                  useValue: 'NG_MODULE',
+                },
+              ],
             })
-            class ParentComponent {
+            class MyModule {
+              constructor(public injector: Injector) {
+                moduleInjector = injector;
+              }
             }
 
             TestBed.configureTestingModule({
-              imports: [CommonModule],
-              declarations: [ParentComponent, ChildComponent],
+              imports: [MyModule],
             });
-            const fixture = TestBed.createComponent(ParentComponent);
+            const fixture = TestBed.createComponent(MyComponent);
             fixture.detectChanges();
 
-            expect(requestedElementRef!.nativeElement).toEqual(fixture.nativeElement.firstChild);
-            expect(requestedElementRef!.nativeElement.tagName).toEqual('DIV');
+            expect(componentInjector!.get('token')).toBe('NG_MODULE');
+            expect(moduleInjector!.get('token')).toBe('NG_MODULE');
           });
 
-          it('should work for `ElementRef` token with expanded *ngIf', () => {
-            let requestedElementRef: ElementRef;
+          it('should respect @Host in case @SkipSelf is used and no suitable Injector found in element injector tree', () => {
+            let componentInjector: Injector;
+            let moduleInjector: Injector;
             @Component({
               selector: 'child',
               template: '...',
+              providers: [
+                {
+                  provide: 'token',
+                  useValue: 'CHILD',
+                },
+              ],
             })
-            class ChildComponent {
-              constructor(@SkipSelf() public elementRef: ElementRef) {
-                requestedElementRef = elementRef;
+            class MyComponent {
+              constructor(@Host() @SkipSelf() public injector: Injector) {
+                componentInjector = injector;
               }
             }
-            @Component({
-              selector: 'root',
-              template: '<div><ng-template [ngIf]="true"><child></child></ng-template></div>',
+
+            @NgModule({
+              declarations: [MyComponent],
+              providers: [
+                {
+                  provide: 'token',
+                  useValue: 'NG_MODULE',
+                },
+              ],
             })
-            class ParentComponent {
+            class MyModule {
+              constructor(public injector: Injector) {
+                moduleInjector = injector;
+              }
             }
 
             TestBed.configureTestingModule({
-              imports: [CommonModule],
-              declarations: [ParentComponent, ChildComponent],
+              imports: [MyModule],
             });
-            const fixture = TestBed.createComponent(ParentComponent);
-            fixture.detectChanges();
 
-            expect(requestedElementRef!.nativeElement).toEqual(fixture.nativeElement.firstChild);
-            expect(requestedElementRef!.nativeElement.tagName).toEqual('DIV');
+            expect(() => TestBed.createComponent(MyComponent)).toThrowError(
+              /NG0201: No provider for Injector found in NodeInjector/,
+            );
           });
 
-          it('should work for `ViewContainerRef` token', () => {
-            let requestedRef: ViewContainerRef;
+          it('should throw when injecting Injectors using @SkipSelf and @Host and no Injectors are available in a current view', () => {
+            @Component({
+              selector: 'parent',
+              template: '<child></child>',
+              providers: [
+                {
+                  provide: 'token',
+                  useValue: 'PARENT',
+                },
+              ],
+            })
+            class ParentComponent {}
+
             @Component({
               selector: 'child',
               template: '...',
+              providers: [
+                {
+                  provide: 'token',
+                  useValue: 'CHILD',
+                },
+              ],
             })
             class ChildComponent {
-              constructor(@SkipSelf() public ref: ViewContainerRef) {
-                requestedRef = ref;
+              constructor(@Host() @SkipSelf() public injector: Injector) {}
+            }
+
+            TestBed.configureTestingModule({
+              declarations: [ParentComponent, ChildComponent],
+            });
+
+            const expectedErrorMessage = /NG0201: No provider for Injector found in NodeInjector/;
+            expect(() => TestBed.createComponent(ParentComponent)).toThrowError(
+              expectedErrorMessage,
+            );
+          });
+
+          it('should not throw when injecting Injectors using @SkipSelf, @Host, and @Optional and no Injectors are available in a current view', () => {
+            @Component({
+              selector: 'parent',
+              template: '<child></child>',
+              providers: [
+                {
+                  provide: 'token',
+                  useValue: 'PARENT',
+                },
+              ],
+            })
+            class ParentComponent {}
+
+            @Component({
+              selector: 'child',
+              template: '...',
+              providers: [
+                {
+                  provide: 'token',
+                  useValue: 'CHILD',
+                },
+              ],
+            })
+            class ChildComponent {
+              constructor(@Host() @SkipSelf() @Optional() public injector: Injector) {}
+            }
+
+            TestBed.configureTestingModule({
+              declarations: [ParentComponent, ChildComponent],
+            });
+
+            const expectedErrorMessage = /NG0201: No provider for Injector found in NodeInjector/;
+            expect(() => TestBed.createComponent(ParentComponent)).not.toThrowError(
+              expectedErrorMessage,
+            );
+          });
+        });
+
+        describe('ElementRef', () => {
+          // While tokens like `ElementRef` make sense only in a context of a NodeInjector,
+          // ViewEngine also used `ModuleInjector` tree to lookup such tokens. In Ivy we replicate
+          // this behavior for now to avoid breaking changes.
+          it('should lookup module injector in case @SkipSelf is used for `ElementRef` token and Component has no parent', () => {
+            let componentElement: ElementRef;
+            let moduleElement: ElementRef;
+            @Component({template: '<div>component</div>'})
+            class MyComponent {
+              constructor(@SkipSelf() public el: ElementRef) {
+                componentElement = el;
+              }
+            }
+
+            @NgModule({
+              declarations: [MyComponent],
+              providers: [
+                {
+                  provide: ElementRef,
+                  useValue: {from: 'NG_MODULE'},
+                },
+              ],
+            })
+            class MyModule {
+              constructor(public el: ElementRef) {
+                moduleElement = el;
+              }
+            }
+
+            TestBed.configureTestingModule({
+              imports: [MyModule],
+            });
+            const fixture = TestBed.createComponent(MyComponent);
+            fixture.detectChanges();
+
+            expect((moduleElement! as any).from).toBe('NG_MODULE');
+            expect((componentElement! as any).from).toBe('NG_MODULE');
+          });
+
+          it('should return host node when @SkipSelf is used for `ElementRef` token and Component has no parent node', () => {
+            let parentElement: ElementRef;
+            let componentElement: ElementRef;
+            @Component({selector: 'child', template: '...'})
+            class MyComponent {
+              constructor(@SkipSelf() public el: ElementRef) {
+                componentElement = el;
+              }
+            }
+
+            @Component({
+              template: '<child></child>',
+            })
+            class ParentComponent {
+              constructor(public el: ElementRef) {
+                parentElement = el;
               }
             }
 
+            TestBed.configureTestingModule({
+              imports: [CommonModule],
+              declarations: [ParentComponent, MyComponent],
+            });
+            const fixture = TestBed.createComponent(ParentComponent);
+            fixture.detectChanges();
+
+            expect(componentElement!).toEqual(parentElement!);
+          });
+
+          it('should @SkipSelf on child directive node when injecting ElementRef on nested parent directive', () => {
+            let parentRef: ElementRef;
+            let childRef: ElementRef;
+
+            @Directive({selector: '[parent]'})
+            class ParentDirective {
+              constructor(elementRef: ElementRef) {
+                parentRef = elementRef;
+              }
+            }
+
+            @Directive({selector: '[child]'})
+            class ChildDirective {
+              constructor(@SkipSelf() elementRef: ElementRef) {
+                childRef = elementRef;
+              }
+            }
+
+            @Component({template: '<div parent>parent <span child>child</span></div>'})
+            class MyComp {}
+
+            TestBed.configureTestingModule({
+              declarations: [ParentDirective, ChildDirective, MyComp],
+            });
+            const fixture = TestBed.createComponent(MyComp);
+            fixture.detectChanges();
+
+            // Assert against the `nativeElement` since Ivy always returns a new ElementRef.
+            expect(childRef!.nativeElement).toBe(parentRef!.nativeElement);
+            expect(childRef!.nativeElement.tagName).toBe('DIV');
+          });
+        });
+
+        describe('@SkipSelf when parent contains embedded views', () => {
+          it('should work for `ElementRef` token', () => {
+            let requestedElementRef: ElementRef;
+            @Component({
+              selector: 'child',
+              template: '...',
+            })
+            class ChildComponent {
+              constructor(@SkipSelf() public elementRef: ElementRef) {
+                requestedElementRef = elementRef;
+              }
+            }
             @Component({
               selector: 'root',
               template: '<div><child *ngIf="true"></child></div>',
             })
-            class ParentComponent {
+            class ParentComponent {}
+
+            TestBed.configureTestingModule({
+              imports: [CommonModule],
+              declarations: [ParentComponent, ChildComponent],
+            });
+            const fixture = TestBed.createComponent(ParentComponent);
+            fixture.detectChanges();
+
+            expect(requestedElementRef!.nativeElement).toEqual(fixture.nativeElement.firstChild);
+            expect(requestedElementRef!.nativeElement.tagName).toEqual('DIV');
+          });
+
+          it('should work for `ElementRef` token with expanded *ngIf', () => {
+            let requestedElementRef: ElementRef;
+            @Component({
+              selector: 'child',
+              template: '...',
+            })
+            class ChildComponent {
+              constructor(@SkipSelf() public elementRef: ElementRef) {
+                requestedElementRef = elementRef;
+              }
             }
+            @Component({
+              selector: 'root',
+              template: '<div><ng-template [ngIf]="true"><child></child></ng-template></div>',
+            })
+            class ParentComponent {}
+
+            TestBed.configureTestingModule({
+              imports: [CommonModule],
+              declarations: [ParentComponent, ChildComponent],
+            });
+            const fixture = TestBed.createComponent(ParentComponent);
+            fixture.detectChanges();
+
+            expect(requestedElementRef!.nativeElement).toEqual(fixture.nativeElement.firstChild);
+            expect(requestedElementRef!.nativeElement.tagName).toEqual('DIV');
+          });
+
+          it('should work for `ViewContainerRef` token', () => {
+            let requestedRef: ViewContainerRef;
+            @Component({
+              selector: 'child',
+              template: '...',
+            })
+            class ChildComponent {
+              constructor(@SkipSelf() public ref: ViewContainerRef) {
+                requestedRef = ref;
+              }
+            }
+
+            @Component({
+              selector: 'root',
+              template: '<div><child *ngIf="true"></child></div>',
+            })
+            class ParentComponent {}
 
             TestBed.configureTestingModule({
               imports: [CommonModule],
@@ -1559,8 +1614,7 @@ describe('di', () => {
               selector: 'root',
               template: '<child *ngIf="true"></child>',
             })
-            class ParentComponent {
-            }
+            class ParentComponent {}
 
             TestBed.configureTestingModule({
               imports: [CommonModule],
@@ -1580,10 +1634,12 @@ describe('di', () => {
             @Component({
               selector: 'parent',
               template: '<child *ngIf="true"></child>',
-              providers: [{
-                provide: 'token',
-                useValue: 'PARENT',
-              }]
+              providers: [
+                {
+                  provide: 'token',
+                  useValue: 'PARENT',
+                },
+              ],
             })
             class ParentComponent {
               constructor(public injector: Injector) {
@@ -1594,10 +1650,12 @@ describe('di', () => {
             @Component({
               selector: 'child',
               template: '...',
-              providers: [{
-                provide: 'token',
-                useValue: 'CHILD',
-              }]
+              providers: [
+                {
+                  provide: 'token',
+                  useValue: 'CHILD',
+                },
+              ],
             })
             class ChildComponent {
               constructor(@SkipSelf() public injector: Injector) {
@@ -1611,8 +1669,9 @@ describe('di', () => {
             const fixture = TestBed.createComponent(ParentComponent);
             fixture.detectChanges();
 
-            expect(childComponentInjector!.get('token'))
-                .toBe(parentComponentInjector!.get('token'));
+            expect(childComponentInjector!.get('token')).toBe(
+              parentComponentInjector!.get('token'),
+            );
           });
 
           it('should work for Injectors with expanded *ngIf', () => {
@@ -1621,10 +1680,12 @@ describe('di', () => {
             @Component({
               selector: 'parent',
               template: '<ng-template [ngIf]="true"><child></child></ng-template>',
-              providers: [{
-                provide: 'token',
-                useValue: 'PARENT',
-              }]
+              providers: [
+                {
+                  provide: 'token',
+                  useValue: 'PARENT',
+                },
+              ],
             })
             class ParentComponent {
               constructor(public injector: Injector) {
@@ -1635,10 +1696,12 @@ describe('di', () => {
             @Component({
               selector: 'child',
               template: '...',
-              providers: [{
-                provide: 'token',
-                useValue: 'CHILD',
-              }]
+              providers: [
+                {
+                  provide: 'token',
+                  useValue: 'CHILD',
+                },
+              ],
             })
             class ChildComponent {
               constructor(@SkipSelf() public injector: Injector) {
@@ -1652,8 +1715,9 @@ describe('di', () => {
             const fixture = TestBed.createComponent(ParentComponent);
             fixture.detectChanges();
 
-            expect(childComponentInjector!.get('token'))
-                .toBe(parentComponentInjector!.get('token'));
+            expect(childComponentInjector!.get('token')).toBe(
+              parentComponentInjector!.get('token'),
+            );
           });
         });
 
@@ -1703,8 +1767,7 @@ describe('di', () => {
               selector: 'root',
               template: '<ng-template dirA></ng-template>',
             })
-            class MyComp {
-            }
+            class MyComp {}
 
             TestBed.configureTestingModule({
               imports: [CommonModule],
@@ -1730,8 +1793,7 @@ describe('di', () => {
               selector: 'root',
               template: '<ng-template dirA></ng-template>',
             })
-            class MyComp {
-            }
+            class MyComp {}
 
             TestBed.configureTestingModule({
               imports: [CommonModule],
@@ -1754,8 +1816,7 @@ describe('di', () => {
               selector: 'root',
               template: '<ng-template dirA></ng-template>',
             })
-            class MyComp {
-            }
+            class MyComp {}
 
             TestBed.configureTestingModule({
               imports: [CommonModule],
@@ -1786,17 +1847,18 @@ describe('di', () => {
             }
 
             @Component({template: '<div parent>parent <span child>child</span></div>'})
-            class MyComp {
-            }
+            class MyComp {}
 
-            TestBed.configureTestingModule(
-                {declarations: [ParentDirective, ChildDirective, MyComp]});
+            TestBed.configureTestingModule({
+              declarations: [ParentDirective, ChildDirective, MyComp],
+            });
             const fixture = TestBed.createComponent(MyComp);
             fixture.detectChanges();
 
             // Assert against the `element` since Ivy always returns a new ViewContainerRef.
-            expect(childViewContainer!.element.nativeElement)
-                .toBe(parentViewContainer!.element.nativeElement);
+            expect(childViewContainer!.element.nativeElement).toBe(
+              parentViewContainer!.element.nativeElement,
+            );
             expect(parentViewContainer!.element.nativeElement.tagName).toBe('DIV');
           });
 
@@ -1819,17 +1881,18 @@ describe('di', () => {
             }
 
             @Component({template: '<div parent>parent <span child>child</span></div>'})
-            class MyComp {
-            }
+            class MyComp {}
 
-            TestBed.configureTestingModule(
-                {declarations: [ParentDirective, ChildDirective, MyComp]});
+            TestBed.configureTestingModule({
+              declarations: [ParentDirective, ChildDirective, MyComp],
+            });
 
             const fixture = TestBed.createComponent(MyComp);
             fixture.detectChanges();
 
-            expect(childViewContainer!.element.nativeElement)
-                .toBe(parentViewContainer!.element.nativeElement);
+            expect(childViewContainer!.element.nativeElement).toBe(
+              parentViewContainer!.element.nativeElement,
+            );
             expect(parentViewContainer!.element.nativeElement.tagName).toBe('DIV');
           });
 
@@ -1844,8 +1907,7 @@ describe('di', () => {
             }
 
             @Component({template: '<div parent>parent</div>'})
-            class MyComp {
-            }
+            class MyComp {}
 
             TestBed.configureTestingModule({declarations: [ParentDirective, MyComp]});
 
@@ -1855,24 +1917,24 @@ describe('di', () => {
             expect(parentViewContainer!.element.nativeElement.tagName).toBe('DIV');
           });
 
-          it('should throw when injecting ViewContainerRef using @SkipSelf and no ViewContainerRef are available in a current view',
-             () => {
-               @Component({template: '<span>component</span>'})
-               class MyComp {
-                 constructor(@SkipSelf() vc: ViewContainerRef) {}
-               }
+          it('should throw when injecting ViewContainerRef using @SkipSelf and no ViewContainerRef are available in a current view', () => {
+            @Component({template: '<span>component</span>'})
+            class MyComp {
+              constructor(@SkipSelf() vc: ViewContainerRef) {}
+            }
 
-               TestBed.configureTestingModule({declarations: [MyComp]});
+            TestBed.configureTestingModule({declarations: [MyComp]});
 
-               expect(() => TestBed.createComponent(MyComp))
-                   .toThrowError(/No provider for ViewContainerRef/);
-             });
+            expect(() => TestBed.createComponent(MyComp)).toThrowError(
+              /No provider for ViewContainerRef/,
+            );
+          });
         });
 
         describe('ChangeDetectorRef', () => {
           it('should support @SkipSelf when injecting ChangeDetectorRef', () => {
-            let parentRef: ChangeDetectorRef|undefined;
-            let childRef: ChangeDetectorRef|undefined;
+            let parentRef: ChangeDetectorRef | undefined;
+            let childRef: ChangeDetectorRef | undefined;
 
             @Directive({selector: '[parent]'})
             class ParentDirective {
@@ -1889,21 +1951,22 @@ describe('di', () => {
             }
 
             @Component({template: '<div parent>parent <span child>child</span></div>'})
-            class MyComp {
-            }
+            class MyComp {}
 
-            TestBed.configureTestingModule(
-                {declarations: [ParentDirective, ChildDirective, MyComp]});
+            TestBed.configureTestingModule({
+              declarations: [ParentDirective, ChildDirective, MyComp],
+            });
             const fixture = TestBed.createComponent(MyComp);
             fixture.detectChanges();
 
             // Assert against the `rootNodes` since Ivy always returns a new ChangeDetectorRef.
-            expect((parentRef as ViewRefInternal<any>).rootNodes)
-                .toEqual((childRef as ViewRefInternal<any>).rootNodes);
+            expect((parentRef as ViewRefInternal<any>).rootNodes).toEqual(
+              (childRef as ViewRefInternal<any>).rootNodes,
+            );
           });
 
           it('should inject host component ChangeDetectorRef when @SkipSelf', () => {
-            let childRef: ChangeDetectorRef|undefined;
+            let childRef: ChangeDetectorRef | undefined;
 
             @Component({selector: 'child', template: '...'})
             class ChildComp {
@@ -1922,8 +1985,9 @@ describe('di', () => {
             fixture.detectChanges();
 
             // Assert against the `rootNodes` since Ivy always returns a new ChangeDetectorRef.
-            expect((childRef as ViewRefInternal<any>).rootNodes)
-                .toEqual((fixture.componentInstance.cdr as ViewRefInternal<any>).rootNodes);
+            expect((childRef as ViewRefInternal<any>).rootNodes).toEqual(
+              (fixture.componentInstance.cdr as ViewRefInternal<any>).rootNodes,
+            );
           });
 
           it('should throw when ChangeDetectorRef and @SkipSelf and not found', () => {
@@ -1935,50 +1999,51 @@ describe('di', () => {
             @NgModule({
               declarations: [MyComponent],
             })
+            class MyModule {}
+
+            TestBed.configureTestingModule({
+              imports: [MyModule],
+            });
+
+            expect(() => TestBed.createComponent(MyComponent)).toThrowError(
+              /No provider for ChangeDetectorRef/,
+            );
+          });
+
+          it('should lookup module injector in case @SkipSelf is used for `ChangeDetectorRef` token and Component has no parent', () => {
+            let componentCDR: ChangeDetectorRef;
+            let moduleCDR: ChangeDetectorRef;
+            @Component({selector: 'child', template: '...'})
+            class MyComponent {
+              constructor(@SkipSelf() public injector: ChangeDetectorRef) {
+                componentCDR = injector;
+              }
+            }
+
+            @NgModule({
+              declarations: [MyComponent],
+              providers: [
+                {
+                  provide: ChangeDetectorRef,
+                  useValue: {from: 'NG_MODULE'},
+                },
+              ],
+            })
             class MyModule {
+              constructor(public injector: ChangeDetectorRef) {
+                moduleCDR = injector;
+              }
             }
 
             TestBed.configureTestingModule({
               imports: [MyModule],
             });
+            const fixture = TestBed.createComponent(MyComponent);
+            fixture.detectChanges();
 
-            expect(() => TestBed.createComponent(MyComponent))
-                .toThrowError(/No provider for ChangeDetectorRef/);
+            expect((moduleCDR! as any).from).toBe('NG_MODULE');
+            expect((componentCDR! as any).from).toBe('NG_MODULE');
           });
-
-          it('should lookup module injector in case @SkipSelf is used for `ChangeDetectorRef` token and Component has no parent',
-             () => {
-               let componentCDR: ChangeDetectorRef;
-               let moduleCDR: ChangeDetectorRef;
-               @Component({selector: 'child', template: '...'})
-               class MyComponent {
-                 constructor(@SkipSelf() public injector: ChangeDetectorRef) {
-                   componentCDR = injector;
-                 }
-               }
-
-               @NgModule({
-                 declarations: [MyComponent],
-                 providers: [{
-                   provide: ChangeDetectorRef,
-                   useValue: {from: 'NG_MODULE'},
-                 }]
-               })
-               class MyModule {
-                 constructor(public injector: ChangeDetectorRef) {
-                   moduleCDR = injector;
-                 }
-               }
-
-               TestBed.configureTestingModule({
-                 imports: [MyModule],
-               });
-               const fixture = TestBed.createComponent(MyComponent);
-               fixture.detectChanges();
-
-               expect((moduleCDR! as any).from).toBe('NG_MODULE');
-               expect((componentCDR! as any).from).toBe('NG_MODULE');
-             });
         });
 
         describe('viewProviders', () => {
@@ -1990,13 +2055,13 @@ describe('di', () => {
               viewProviders: [
                 {provide: 'Foo', useValue: 'Foo as ViewProvider'},
                 {provide: 'Bar', useValue: 'Bar as ViewProvider'},
-              ]
+              ],
             })
             class Child {
               constructor(
-                  @Inject('Blah') public blah: String,
-                  @Inject('Foo') public foo: String,
-                  @SkipSelf() @Inject('Bar') public bar: String,
+                @Inject('Blah') public blah: String,
+                @Inject('Foo') public foo: String,
+                @SkipSelf() @Inject('Bar') public bar: String,
               ) {}
             }
 
@@ -2010,10 +2075,9 @@ describe('di', () => {
               viewProviders: [
                 {provide: 'Foo', useValue: 'Foo as ViewProvider'},
                 {provide: 'Bar', useValue: 'Bar as ViewProvider'},
-              ]
+              ],
             })
-            class Parent {
-            }
+            class Parent {}
 
             @Component({selector: 'my-app', template: '<parent><child></child></parent>'})
             class MyApp {
@@ -2037,13 +2101,13 @@ describe('di', () => {
               viewProviders: [
                 {provide: 'Foo', useValue: 'Foo as ViewProvider'},
                 {provide: 'Bar', useValue: 'Bar as ViewProvider'},
-              ]
+              ],
             })
             class Child {
               constructor(
-                  @Inject('Blah') public blah: String,
-                  @Inject('Foo') public foo: String,
-                  @SkipSelf() @Inject('Bar') public bar: String,
+                @Inject('Blah') public blah: String,
+                @Inject('Foo') public foo: String,
+                @SkipSelf() @Inject('Bar') public bar: String,
               ) {}
             }
 
@@ -2054,59 +2118,54 @@ describe('di', () => {
               viewProviders: [
                 {provide: 'Foo', useValue: 'Foo as ViewProvider'},
                 {provide: 'Bar', useValue: 'Bar as ViewProvider'},
-              ]
+              ],
             })
-            class Parent {
-            }
+            class Parent {}
 
             @Component({selector: 'my-app', template: '<parent><child></child></parent>'})
-            class MyApp {
-            }
+            class MyApp {}
 
             TestBed.configureTestingModule({declarations: [Child, Parent, MyApp]});
 
             expect(() => TestBed.createComponent(MyApp)).toThrowError(/No provider for Bar/);
           });
 
-          it('should not throw when @SkipSelf and @Optional with no accessible viewProvider',
-             () => {
-               @Component({
-                 selector: 'child',
-                 template: '{{ blah | json }}<br />{{ foo | json }}<br />{{ bar | json }}',
-                 providers: [{provide: 'Blah', useValue: 'Blah as Provider'}],
-                 viewProviders: [
-                   {provide: 'Foo', useValue: 'Foo as ViewProvider'},
-                   {provide: 'Bar', useValue: 'Bar as ViewProvider'},
-                 ]
-               })
-               class Child {
-                 constructor(
-                     @Inject('Blah') public blah: String,
-                     @Inject('Foo') public foo: String,
-                     @SkipSelf() @Optional() @Inject('Bar') public bar: String,
-                 ) {}
-               }
-
-               @Component({
-                 selector: 'parent',
-                 template: '<ng-content></ng-content>',
-                 providers: [{provide: 'Blah', useValue: 'Blah as provider'}],
-                 viewProviders: [
-                   {provide: 'Foo', useValue: 'Foo as ViewProvider'},
-                   {provide: 'Bar', useValue: 'Bar as ViewProvider'},
-                 ]
-               })
-               class Parent {
-               }
-
-               @Component({selector: 'my-app', template: '<parent><child></child></parent>'})
-               class MyApp {
-               }
-
-               TestBed.configureTestingModule({declarations: [Child, Parent, MyApp]});
-
-               expect(() => TestBed.createComponent(MyApp)).not.toThrowError(/No provider for Bar/);
-             });
+          it('should not throw when @SkipSelf and @Optional with no accessible viewProvider', () => {
+            @Component({
+              selector: 'child',
+              template: '{{ blah | json }}<br />{{ foo | json }}<br />{{ bar | json }}',
+              providers: [{provide: 'Blah', useValue: 'Blah as Provider'}],
+              viewProviders: [
+                {provide: 'Foo', useValue: 'Foo as ViewProvider'},
+                {provide: 'Bar', useValue: 'Bar as ViewProvider'},
+              ],
+            })
+            class Child {
+              constructor(
+                @Inject('Blah') public blah: String,
+                @Inject('Foo') public foo: String,
+                @SkipSelf() @Optional() @Inject('Bar') public bar: String,
+              ) {}
+            }
+
+            @Component({
+              selector: 'parent',
+              template: '<ng-content></ng-content>',
+              providers: [{provide: 'Blah', useValue: 'Blah as provider'}],
+              viewProviders: [
+                {provide: 'Foo', useValue: 'Foo as ViewProvider'},
+                {provide: 'Bar', useValue: 'Bar as ViewProvider'},
+              ],
+            })
+            class Parent {}
+
+            @Component({selector: 'my-app', template: '<parent><child></child></parent>'})
+            class MyApp {}
+
+            TestBed.configureTestingModule({declarations: [Child, Parent, MyApp]});
+
+            expect(() => TestBed.createComponent(MyApp)).not.toThrowError(/No provider for Bar/);
+          });
         });
       });
 
@@ -2125,7 +2184,7 @@ describe('di', () => {
           @Component({
             selector: 'my-comp',
             template: '<div dirString></div>',
-            viewProviders: [{provide: String, useValue: 'Foo'}]
+            viewProviders: [{provide: String, useValue: 'Foo'}],
           })
           class MyComp {
             @ViewChild(DirectiveString) dirString!: DirectiveString;
@@ -2148,39 +2207,36 @@ describe('di', () => {
           @Component({
             selector: 'my-comp',
             template: '<div dirString></div>',
-            providers: [{provide: String, useValue: 'Foo'}]
+            providers: [{provide: String, useValue: 'Foo'}],
           })
-          class MyComp {
-          }
+          class MyComp {}
 
           @Component({template: '<my-comp></my-comp>'})
-          class MyApp {
-          }
+          class MyApp {}
 
           TestBed.configureTestingModule({declarations: [DirectiveString, MyComp, MyApp]});
-          expect(() => TestBed.createComponent(MyApp))
-              .toThrowError(
-                  'NG0201: No provider for String found in NodeInjector. Find more at https://angular.io/errors/NG0201');
+          expect(() => TestBed.createComponent(MyApp)).toThrowError(
+            'NG0201: No provider for String found in NodeInjector. Find more at https://angular.io/errors/NG0201',
+          );
         });
 
         it('should not find other directives on the host itself', () => {
           @Component({selector: 'my-comp', template: '<div dirA></div>'})
-          class MyComp {
-          }
+          class MyComp {}
 
           @Component({template: '<my-comp dirB></my-comp>'})
-          class MyApp {
-          }
+          class MyApp {}
 
           TestBed.configureTestingModule({declarations: [DirectiveA, DirectiveB, MyComp, MyApp]});
-          expect(() => TestBed.createComponent(MyApp))
-              .toThrowError(/NG0201: No provider for DirectiveB found in NodeInjector/);
+          expect(() => TestBed.createComponent(MyApp)).toThrowError(
+            /NG0201: No provider for DirectiveB found in NodeInjector/,
+          );
         });
 
         it('should not find providers on the host itself if in inline view', () => {
           @Component({
             selector: 'my-comp',
-            template: '<ng-container *ngIf="showing"><div dirA></div></ng-container>'
+            template: '<ng-container *ngIf="showing"><div dirA></div></ng-container>',
           })
           class MyComp {
             showing = false;
@@ -2221,8 +2277,7 @@ describe('di', () => {
 
         it('should not find component above the host', () => {
           @Component({template: '<my-comp></my-comp>'})
-          class MyApp {
-          }
+          class MyApp {}
 
           @Directive({selector: '[dirComp]'})
           class DirectiveComp {
@@ -2230,66 +2285,63 @@ describe('di', () => {
           }
 
           @Component({selector: 'my-comp', template: '<div dirComp></div>'})
-          class MyComp {
-          }
+          class MyComp {}
 
           TestBed.configureTestingModule({declarations: [DirectiveComp, MyComp, MyApp]});
-          expect(() => TestBed.createComponent(MyApp))
-              .toThrowError(
-                  'NG0201: No provider for MyApp found in NodeInjector. Find more at https://angular.io/errors/NG0201');
+          expect(() => TestBed.createComponent(MyApp)).toThrowError(
+            'NG0201: No provider for MyApp found in NodeInjector. Find more at https://angular.io/errors/NG0201',
+          );
         });
 
         describe('regression', () => {
           // based on https://stackblitz.com/edit/angular-riss8k?file=src/app/app.component.ts
-          it('should allow directives with Host flag to inject view providers from containing component',
-             () => {
-               class ControlContainer {}
-               let controlContainers: ControlContainer[] = [];
-               let injectedControlContainer: ControlContainer|null = null;
-
-               @Directive({
-                 selector: '[group]',
-                 providers: [{provide: ControlContainer, useExisting: GroupDirective}]
-               })
-               class GroupDirective {
-                 constructor() {
-                   controlContainers.push(this);
-                 }
-               }
-
-               @Directive({selector: '[control]'})
-               class ControlDirective {
-                 constructor(@Host() @SkipSelf() @Inject(ControlContainer) parent:
-                                 ControlContainer) {
-                   injectedControlContainer = parent;
-                 }
-               }
-
-               @Component({
-                 selector: 'my-comp',
-                 template: '<input control>',
-                 viewProviders: [{provide: ControlContainer, useExisting: GroupDirective}]
-               })
-               class MyComp {
-               }
-
-               @Component({
-                 template: `
+          it('should allow directives with Host flag to inject view providers from containing component', () => {
+            class ControlContainer {}
+            let controlContainers: ControlContainer[] = [];
+            let injectedControlContainer: ControlContainer | null = null;
+
+            @Directive({
+              selector: '[group]',
+              providers: [{provide: ControlContainer, useExisting: GroupDirective}],
+            })
+            class GroupDirective {
+              constructor() {
+                controlContainers.push(this);
+              }
+            }
+
+            @Directive({selector: '[control]'})
+            class ControlDirective {
+              constructor(@Host() @SkipSelf() @Inject(ControlContainer) parent: ControlContainer) {
+                injectedControlContainer = parent;
+              }
+            }
+
+            @Component({
+              selector: 'my-comp',
+              template: '<input control>',
+              viewProviders: [{provide: ControlContainer, useExisting: GroupDirective}],
+            })
+            class MyComp {}
+
+            @Component({
+              template: `
                    <div group>
                      <my-comp></my-comp>
                    </div>
-                 `
-               })
-               class MyApp {
-               }
-
-               TestBed.configureTestingModule(
-                   {declarations: [GroupDirective, ControlDirective, MyComp, MyApp]});
-               const fixture = TestBed.createComponent(MyApp);
-               expect(fixture.nativeElement.innerHTML)
-                   .toBe('<div group=""><my-comp><input control=""></my-comp></div>');
-               expect(controlContainers).toEqual([injectedControlContainer!]);
-             });
+                 `,
+            })
+            class MyApp {}
+
+            TestBed.configureTestingModule({
+              declarations: [GroupDirective, ControlDirective, MyComp, MyApp],
+            });
+            const fixture = TestBed.createComponent(MyApp);
+            expect(fixture.nativeElement.innerHTML).toBe(
+              '<div group=""><my-comp><input control=""></my-comp></div>',
+            );
+            expect(controlContainers).toEqual([injectedControlContainer!]);
+          });
         });
       });
 
@@ -2300,42 +2352,48 @@ describe('di', () => {
           class MyComp {
             tokenViaInjector = this.injector.get(NON_EXISTING_PROVIDER, null, InjectFlags.Optional);
             constructor(
-                public injector: Injector,
-                @Inject(NON_EXISTING_PROVIDER) @Optional() public tokenViaConstructor: string) {}
+              public injector: Injector,
+              @Inject(NON_EXISTING_PROVIDER) @Optional() public tokenViaConstructor: string,
+            ) {}
           }
           TestBed.configureTestingModule({declarations: [MyComp]});
           const fixture = TestBed.createComponent(MyComp);
           fixture.detectChanges();
           expect(fixture.componentInstance.tokenViaInjector).toBe(null);
-          expect(fixture.componentInstance.tokenViaInjector)
-              .toBe(fixture.componentInstance.tokenViaConstructor);
+          expect(fixture.componentInstance.tokenViaInjector).toBe(
+            fixture.componentInstance.tokenViaConstructor,
+          );
         });
         it('should support SkipSelf flag in NodeInjector', () => {
           const TOKEN = new InjectionToken<string>('token');
           @Component({
             selector: 'parent',
             template: '<child></child>',
-            providers: [{
-              provide: TOKEN,
-              useValue: 'PARENT',
-            }]
+            providers: [
+              {
+                provide: TOKEN,
+                useValue: 'PARENT',
+              },
+            ],
           })
-          class ParentComponent {
-          }
+          class ParentComponent {}
 
           @Component({
             selector: 'child',
             template: '...',
-            providers: [{
-              provide: TOKEN,
-              useValue: 'CHILD',
-            }]
+            providers: [
+              {
+                provide: TOKEN,
+                useValue: 'CHILD',
+              },
+            ],
           })
           class ChildComponent {
             tokenViaInjector = this.injector.get(TOKEN, null, InjectFlags.SkipSelf);
             constructor(
-                public injector: Injector,
-                @Inject(TOKEN) @SkipSelf() public tokenViaConstructor: string) {}
+              public injector: Injector,
+              @Inject(TOKEN) @SkipSelf() public tokenViaConstructor: string,
+            ) {}
           }
 
           TestBed.configureTestingModule({
@@ -2344,8 +2402,9 @@ describe('di', () => {
           const fixture = TestBed.createComponent(ParentComponent);
           fixture.detectChanges();
 
-          const childComponent =
-              fixture.debugElement.query(By.directive(ChildComponent)).componentInstance;
+          const childComponent = fixture.debugElement.query(
+            By.directive(ChildComponent),
+          ).componentInstance;
           expect(childComponent.tokenViaInjector).toBe('PARENT');
           expect(childComponent.tokenViaConstructor).toBe(childComponent.tokenViaInjector);
         });
@@ -2355,13 +2414,14 @@ describe('di', () => {
           class DirectiveString {
             tokenViaInjector = this.injector.get(TOKEN, null, InjectFlags.Host);
             constructor(
-                public injector: Injector,
-                @Inject(TOKEN) @Host() public tokenViaConstructor: string) {}
+              public injector: Injector,
+              @Inject(TOKEN) @Host() public tokenViaConstructor: string,
+            ) {}
           }
 
           @Component({
             template: '<div dirString></div>',
-            viewProviders: [{provide: TOKEN, useValue: 'Foo'}]
+            viewProviders: [{provide: TOKEN, useValue: 'Foo'}],
           })
           class MyComp {
             @ViewChild(DirectiveString) dirString!: DirectiveString;
@@ -2377,19 +2437,24 @@ describe('di', () => {
         });
         it('should support multiple flags in NodeInjector', () => {
           @Directive({selector: '[dirA]'})
-          class DirectiveA {
-          }
+          class DirectiveA {}
           @Directive({selector: '[dirB]'})
           class DirectiveB {
-            public tokenSelfViaInjector =
-                this.injector.get(DirectiveA, null, InjectFlags.Self|InjectFlags.Optional);
-            public tokenHostViaInjector =
-                this.injector.get(DirectiveA, null, InjectFlags.Host|InjectFlags.Optional);
+            public tokenSelfViaInjector = this.injector.get(
+              DirectiveA,
+              null,
+              InjectFlags.Self | InjectFlags.Optional,
+            );
+            public tokenHostViaInjector = this.injector.get(
+              DirectiveA,
+              null,
+              InjectFlags.Host | InjectFlags.Optional,
+            );
             constructor(
-                public injector: Injector,
-                @Inject(DirectiveA) @Self() @Optional() public tokenSelfViaConstructor: DirectiveA,
-                @Inject(DirectiveA) @Host() @Optional() public tokenHostViaConstructor:
-                    DirectiveA) {}
+              public injector: Injector,
+              @Inject(DirectiveA) @Self() @Optional() public tokenSelfViaConstructor: DirectiveA,
+              @Inject(DirectiveA) @Host() @Optional() public tokenHostViaConstructor: DirectiveA,
+            ) {}
           }
 
           @Component({template: '<div dirB></div>'})
@@ -2461,8 +2526,7 @@ describe('di', () => {
       }
 
       @NgModule({declarations: [Comp], exports: [Comp], providers: [ProviderDep]})
-      class Module {
-      }
+      class Module {}
 
       TestBed.configureTestingModule({imports: [Module]});
       const fixture = TestBed.createComponent(Comp);
@@ -2490,8 +2554,7 @@ describe('di', () => {
 
     it('should support sub-classes with no @Injectable decorator', () => {
       @Injectable()
-      class Dependency {
-      }
+      class Dependency {}
 
       @Injectable()
       class SuperClass {
@@ -2508,7 +2571,7 @@ describe('di', () => {
       }
       TestBed.configureTestingModule({
         declarations: [MyComp],
-        providers: [{provide: SuperClass, useClass: SubSubClass}, Dependency]
+        providers: [{provide: SuperClass, useClass: SubSubClass}, Dependency],
       });
 
       const warnSpy = spyOn(console, 'warn');
@@ -2516,8 +2579,9 @@ describe('di', () => {
       expect(fixture.componentInstance.myService.dep instanceof Dependency).toBe(true);
 
       expect(warnSpy).toHaveBeenCalledWith(
-          `DEPRECATED: DI is instantiating a token "SubSubClass" that inherits its @Injectable decorator but does not provide one itself.\n` +
-          `This will become an error in a future version of Angular. Please add @Injectable() to the "SubSubClass" class.`);
+        `DEPRECATED: DI is instantiating a token "SubSubClass" that inherits its @Injectable decorator but does not provide one itself.\n` +
+          `This will become an error in a future version of Angular. Please add @Injectable() to the "SubSubClass" class.`,
+      );
     });
 
     it('should instantiate correct class when undecorated class extends an injectable', () => {
@@ -2531,8 +2595,7 @@ describe('di', () => {
       }
 
       @Component({template: ''})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App], providers: [MyRootService]});
       const warnSpy = spyOn(console, 'warn');
@@ -2545,24 +2608,25 @@ describe('di', () => {
       expect(provider.id).toBe(2);
 
       expect(warnSpy).toHaveBeenCalledWith(
-          `DEPRECATED: DI is instantiating a token "MyRootService" that inherits its @Injectable decorator but does not provide one itself.\n` +
-          `This will become an error in a future version of Angular. Please add @Injectable() to the "MyRootService" class.`);
+        `DEPRECATED: DI is instantiating a token "MyRootService" that inherits its @Injectable decorator but does not provide one itself.\n` +
+          `This will become an error in a future version of Angular. Please add @Injectable() to the "MyRootService" class.`,
+      );
     });
 
     it('should inject services in constructor with overloads', () => {
       @Injectable({providedIn: 'root'})
-      class MyService {
-      }
+      class MyService {}
 
       @Injectable({providedIn: 'root'})
-      class MyOtherService {
-      }
+      class MyOtherService {}
 
       @Component({template: ''})
       class MyComp {
         constructor(myService: MyService);
         constructor(
-            public myService: MyService, @Optional() public myOtherService?: MyOtherService) {}
+          public myService: MyService,
+          @Optional() public myOtherService?: MyOtherService,
+        ) {}
       }
       TestBed.configureTestingModule({declarations: [MyComp]});
       const fixture = TestBed.createComponent(MyComp);
@@ -2601,7 +2665,7 @@ describe('di', () => {
     }
 
     it('should use @Injectable useClass config when token is not provided', () => {
-      let provider: FooService|BarService;
+      let provider: FooService | BarService;
 
       @Component({template: ''})
       class App {
@@ -2618,29 +2682,29 @@ describe('di', () => {
       expect(provider!.dep.name).toBe('BarServiceDep');
     });
 
-    it('should use constructor config directly when token is explicitly provided via useClass',
-       () => {
-         let provider: FooService|BarService;
+    it('should use constructor config directly when token is explicitly provided via useClass', () => {
+      let provider: FooService | BarService;
 
-         @Component({template: ''})
-         class App {
-           constructor(service: FooService) {
-             provider = service;
-           }
-         }
-
-         TestBed.configureTestingModule(
-             {declarations: [App], providers: [{provide: FooService, useClass: FooService}]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
+      @Component({template: ''})
+      class App {
+        constructor(service: FooService) {
+          provider = service;
+        }
+      }
 
-         expect(provider!.getMessage()).toBe('foo');
-       });
+      TestBed.configureTestingModule({
+        declarations: [App],
+        providers: [{provide: FooService, useClass: FooService}],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
 
+      expect(provider!.getMessage()).toBe('foo');
+    });
 
     it('should inject correct provider when re-providing an injectable that has useClass', () => {
-      let directProvider: FooService|BarService;
-      let overriddenProvider: FooService|BarService;
+      let directProvider: FooService | BarService;
+      let overriddenProvider: FooService | BarService;
 
       @Component({template: ''})
       class App {
@@ -2650,8 +2714,10 @@ describe('di', () => {
         }
       }
 
-      TestBed.configureTestingModule(
-          {declarations: [App], providers: [{provide: 'stringToken', useClass: FooService}]});
+      TestBed.configureTestingModule({
+        declarations: [App],
+        providers: [{provide: 'stringToken', useClass: FooService}],
+      });
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
@@ -2661,31 +2727,29 @@ describe('di', () => {
       expect(overriddenProvider!.dep.name).toBe('FooServiceDep');
     });
 
-    it('should use constructor config directly when token is explicitly provided as a type provider',
-       () => {
-         let provider: FooService|BarService;
+    it('should use constructor config directly when token is explicitly provided as a type provider', () => {
+      let provider: FooService | BarService;
 
-         @Component({template: ''})
-         class App {
-           constructor(service: FooService) {
-             provider = service;
-           }
-         }
+      @Component({template: ''})
+      class App {
+        constructor(service: FooService) {
+          provider = service;
+        }
+      }
 
-         TestBed.configureTestingModule({declarations: [App], providers: [FooService]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
+      TestBed.configureTestingModule({declarations: [App], providers: [FooService]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
 
-         expect(provider!.getMessage()).toBe('foo');
-         expect(provider!.dep.name).toBe('FooServiceDep');
-       });
+      expect(provider!.getMessage()).toBe('foo');
+      expect(provider!.dep.name).toBe('FooServiceDep');
+    });
   });
 
   describe('inject', () => {
     it('should inject from parent view', () => {
       @Directive({selector: '[parentDir]'})
-      class ParentDirective {
-      }
+      class ParentDirective {}
 
       @Directive({selector: '[childDir]', exportAs: 'childDir'})
       class ChildDirective {
@@ -2708,13 +2772,14 @@ describe('di', () => {
           <ng-container *ngIf="showing">
             <span childDir child2Dir #child1="childDir" #child2="child2Dir">{{ child1.value }}-{{ child2.value }}</span>
           </ng-container>
-        </div>`
+        </div>`,
       })
       class MyComp {
         showing = true;
       }
-      TestBed.configureTestingModule(
-          {declarations: [ParentDirective, ChildDirective, Child2Directive, MyComp]});
+      TestBed.configureTestingModule({
+        declarations: [ParentDirective, ChildDirective, Child2Directive, MyComp],
+      });
       const fixture = TestBed.createComponent(MyComp);
       fixture.detectChanges();
 
@@ -2733,7 +2798,10 @@ describe('di', () => {
 
         @Directive({selector: '[otherInjectorDir]'})
         class OtherInjectorDir {
-          constructor(public otherDir: InjectorDir, public injector: Injector) {}
+          constructor(
+            public otherDir: InjectorDir,
+            public injector: Injector,
+          ) {}
         }
 
         @Component({template: '<div injectorDir otherInjectorDir></div>'})
@@ -2793,7 +2861,10 @@ describe('di', () => {
         @Directive({selector: '[otherDir]'})
         class MyOtherDir {
           isSameInstance: boolean;
-          constructor(public elementRef: ElementRef, public directive: MyDir) {
+          constructor(
+            public elementRef: ElementRef,
+            public directive: MyDir,
+          ) {
             this.isSameInstance = elementRef === directive.elementRef;
           }
         }
@@ -2820,31 +2891,30 @@ describe('di', () => {
         expect(otherDirective.isSameInstance).toBe(false);
       });
 
-      it('should create ElementRef with comment if requesting directive is on <ng-template> node',
-         () => {
-           @Directive({selector: '[dir]'})
-           class MyDir {
-             value: string;
-             constructor(public elementRef: ElementRef<Node>) {
-               this.value = (elementRef.constructor as any).name;
-             }
-           }
+      it('should create ElementRef with comment if requesting directive is on <ng-template> node', () => {
+        @Directive({selector: '[dir]'})
+        class MyDir {
+          value: string;
+          constructor(public elementRef: ElementRef<Node>) {
+            this.value = (elementRef.constructor as any).name;
+          }
+        }
 
-           @Component({template: '<ng-template dir></ng-template>'})
-           class MyComp {
-             @ViewChild(MyDir) directive!: MyDir;
-           }
+        @Component({template: '<ng-template dir></ng-template>'})
+        class MyComp {
+          @ViewChild(MyDir) directive!: MyDir;
+        }
 
-           TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
-           const fixture = TestBed.createComponent(MyComp);
-           fixture.detectChanges();
+        TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
+        const fixture = TestBed.createComponent(MyComp);
+        fixture.detectChanges();
 
-           const directive = fixture.componentInstance.directive;
+        const directive = fixture.componentInstance.directive;
 
-           expect(directive.value).toContain('ElementRef');
-           // the nativeElement should be a comment
-           expect(directive.elementRef.nativeElement.nodeType).toEqual(Node.COMMENT_NODE);
-         });
+        expect(directive.value).toContain('ElementRef');
+        // the nativeElement should be a comment
+        expect(directive.elementRef.nativeElement.nodeType).toEqual(Node.COMMENT_NODE);
+      });
 
       it('should be available if used in conjunction with other tokens', () => {
         @Injectable()
@@ -2861,7 +2931,10 @@ describe('di', () => {
 
         @Directive({selector: '[dir]'})
         class DirectiveA {
-          constructor(public service: ServiceA, public elementRef: ElementRef) {}
+          constructor(
+            public service: ServiceA,
+            public elementRef: ElementRef,
+          ) {}
         }
 
         @Component({
@@ -2915,13 +2988,17 @@ describe('di', () => {
         @Directive({selector: '[otherDir]', exportAs: 'otherDir'})
         class MyOtherDir {
           isSameInstance: boolean;
-          constructor(public templateRef: TemplateRef<any>, public directive: MyDir) {
+          constructor(
+            public templateRef: TemplateRef<any>,
+            public directive: MyDir,
+          ) {
             this.isSameInstance = templateRef === directive.templateRef;
           }
         }
 
-        @Component(
-            {template: '<ng-template dir otherDir #dir="dir" #otherDir="otherDir"></ng-template>'})
+        @Component({
+          template: '<ng-template dir otherDir #dir="dir" #otherDir="otherDir"></ng-template>',
+        })
         class MyComp {
           @ViewChild(MyDir) directive!: MyDir;
           @ViewChild(MyOtherDir) otherDirective!: MyOtherDir;
@@ -2944,8 +3021,7 @@ describe('di', () => {
 
       it('should throw if injected on an element', () => {
         @Component({template: '<div dir></div>'})
-        class MyComp {
-        }
+        class MyComp {}
 
         TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
         expect(() => TestBed.createComponent(MyComp)).toThrowError(/No provider for TemplateRef/);
@@ -2953,8 +3029,7 @@ describe('di', () => {
 
       it('should throw if injected on an ng-container', () => {
         @Component({template: '<ng-container dir></ng-container>'})
-        class MyComp {
-        }
+        class MyComp {}
 
         TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
         expect(() => TestBed.createComponent(MyComp)).toThrowError(/No provider for TemplateRef/);
@@ -2989,7 +3064,10 @@ describe('di', () => {
         @Directive({selector: '[otherDir]', exportAs: 'otherDir'})
         class MyOtherDir {
           isSameInstance: boolean;
-          constructor(public viewContainerRef: ViewContainerRef, public directive: MyDir) {
+          constructor(
+            public viewContainerRef: ViewContainerRef,
+            public directive: MyDir,
+          ) {
             this.isSameInstance = viewContainerRef === directive.viewContainerRef;
           }
         }
@@ -3022,7 +3100,10 @@ describe('di', () => {
         class Root {
           @ViewChild(TemplateRef, {static: true}) tmpl!: TemplateRef<any>;
 
-          constructor(public vcr: ViewContainerRef, public vcr2: ViewContainerRef) {}
+          constructor(
+            public vcr: ViewContainerRef,
+            public vcr2: ViewContainerRef,
+          ) {}
 
           ngOnInit(): void {
             this.vcr.createEmbeddedView(this.tmpl);
@@ -3091,88 +3172,86 @@ describe('di', () => {
         TestBed.configureTestingModule({declarations: [MyApp, MyPipe], imports: [CommonModule]});
         const fixture = TestBed.createComponent(MyApp);
         fixture.detectChanges();
-        expect((pipeInstance!.cdr as ViewRefInternal<MyApp>).context)
-            .toBe(fixture.componentInstance);
+        expect((pipeInstance!.cdr as ViewRefInternal<MyApp>).context).toBe(
+          fixture.componentInstance,
+        );
       });
 
-      it('should inject current component ChangeDetectorRef into directives on the same node as components',
-         () => {
-           @Component({selector: 'my-app', template: '<my-comp dir otherDir #dir="dir"></my-comp>'})
-           class MyApp {
-             @ViewChild(MyComp) component!: MyComp;
-             @ViewChild(MyDir) directive!: MyDir;
-             @ViewChild(MyOtherDir) otherDirective!: MyOtherDir;
-           }
-           TestBed.configureTestingModule({declarations: [MyApp, MyComp, MyDir, MyOtherDir]});
-           const fixture = TestBed.createComponent(MyApp);
-           fixture.detectChanges();
-           const app = fixture.componentInstance;
-           const comp = fixture.componentInstance.component;
-           expect((comp!.cdr as ViewRefInternal<MyComp>).context).toBe(comp);
-           // ChangeDetectorRef is the token, ViewRef has historically been the constructor
-           expect(app.directive.value).toContain('ViewRef');
-
-           // Each ChangeDetectorRef instance should be unique
-           expect(app.directive!.cdr).not.toBe(comp!.cdr);
-           expect(app.directive!.cdr).not.toBe(app.otherDirective!.cdr);
-         });
-
-      it('should inject host component ChangeDetectorRef into directives on normal elements',
-         () => {
-           @Component({selector: 'my-comp', template: '<div dir otherDir #dir="dir"></div>'})
-           class MyComp {
-             constructor(public cdr: ChangeDetectorRef) {}
-             @ViewChild(MyDir) directive!: MyDir;
-             @ViewChild(MyOtherDir) otherDirective!: MyOtherDir;
-           }
-           TestBed.configureTestingModule({declarations: [MyComp, MyDir, MyOtherDir]});
-           const fixture = TestBed.createComponent(MyComp);
-           fixture.detectChanges();
-           const comp = fixture.componentInstance;
-           expect((comp!.cdr as ViewRefInternal<MyComp>).context).toBe(comp);
-           // ChangeDetectorRef is the token, ViewRef has historically been the constructor
-           expect(comp.directive.value).toContain('ViewRef');
-
-           // Each ChangeDetectorRef instance should be unique
-           expect(comp.directive!.cdr).not.toBe(comp.cdr);
-           expect(comp.directive!.cdr).not.toBe(comp.otherDirective!.cdr);
-         });
-
-      it('should inject host component ChangeDetectorRef into directives in a component\'s ContentChildren',
-         () => {
-           @Component({
-             selector: 'my-app',
-             template: `<my-comp>
+      it('should inject current component ChangeDetectorRef into directives on the same node as components', () => {
+        @Component({selector: 'my-app', template: '<my-comp dir otherDir #dir="dir"></my-comp>'})
+        class MyApp {
+          @ViewChild(MyComp) component!: MyComp;
+          @ViewChild(MyDir) directive!: MyDir;
+          @ViewChild(MyOtherDir) otherDirective!: MyOtherDir;
+        }
+        TestBed.configureTestingModule({declarations: [MyApp, MyComp, MyDir, MyOtherDir]});
+        const fixture = TestBed.createComponent(MyApp);
+        fixture.detectChanges();
+        const app = fixture.componentInstance;
+        const comp = fixture.componentInstance.component;
+        expect((comp!.cdr as ViewRefInternal<MyComp>).context).toBe(comp);
+        // ChangeDetectorRef is the token, ViewRef has historically been the constructor
+        expect(app.directive.value).toContain('ViewRef');
+
+        // Each ChangeDetectorRef instance should be unique
+        expect(app.directive!.cdr).not.toBe(comp!.cdr);
+        expect(app.directive!.cdr).not.toBe(app.otherDirective!.cdr);
+      });
+
+      it('should inject host component ChangeDetectorRef into directives on normal elements', () => {
+        @Component({selector: 'my-comp', template: '<div dir otherDir #dir="dir"></div>'})
+        class MyComp {
+          constructor(public cdr: ChangeDetectorRef) {}
+          @ViewChild(MyDir) directive!: MyDir;
+          @ViewChild(MyOtherDir) otherDirective!: MyOtherDir;
+        }
+        TestBed.configureTestingModule({declarations: [MyComp, MyDir, MyOtherDir]});
+        const fixture = TestBed.createComponent(MyComp);
+        fixture.detectChanges();
+        const comp = fixture.componentInstance;
+        expect((comp!.cdr as ViewRefInternal<MyComp>).context).toBe(comp);
+        // ChangeDetectorRef is the token, ViewRef has historically been the constructor
+        expect(comp.directive.value).toContain('ViewRef');
+
+        // Each ChangeDetectorRef instance should be unique
+        expect(comp.directive!.cdr).not.toBe(comp.cdr);
+        expect(comp.directive!.cdr).not.toBe(comp.otherDirective!.cdr);
+      });
+
+      it("should inject host component ChangeDetectorRef into directives in a component's ContentChildren", () => {
+        @Component({
+          selector: 'my-app',
+          template: `<my-comp>
                <div dir otherDir #dir="dir"></div>
              </my-comp>
-              `
-           })
-           class MyApp {
-             constructor(public cdr: ChangeDetectorRef) {}
-             @ViewChild(MyComp) component!: MyComp;
-             @ViewChild(MyDir) directive!: MyDir;
-             @ViewChild(MyOtherDir) otherDirective!: MyOtherDir;
-           }
-           TestBed.configureTestingModule({declarations: [MyApp, MyComp, MyDir, MyOtherDir]});
-           const fixture = TestBed.createComponent(MyApp);
-           fixture.detectChanges();
-           const app = fixture.componentInstance;
-           expect((app!.cdr as ViewRefInternal<MyApp>).context).toBe(app);
-           const comp = fixture.componentInstance.component;
-           // ChangeDetectorRef is the token, ViewRef has historically been the constructor
-           expect(app.directive.value).toContain('ViewRef');
-
-           // Each ChangeDetectorRef instance should be unique
-           expect(app.directive!.cdr).not.toBe(comp.cdr);
-           expect(app.directive!.cdr).not.toBe(app.otherDirective!.cdr);
-         });
+              `,
+        })
+        class MyApp {
+          constructor(public cdr: ChangeDetectorRef) {}
+          @ViewChild(MyComp) component!: MyComp;
+          @ViewChild(MyDir) directive!: MyDir;
+          @ViewChild(MyOtherDir) otherDirective!: MyOtherDir;
+        }
+        TestBed.configureTestingModule({declarations: [MyApp, MyComp, MyDir, MyOtherDir]});
+        const fixture = TestBed.createComponent(MyApp);
+        fixture.detectChanges();
+        const app = fixture.componentInstance;
+        expect((app!.cdr as ViewRefInternal<MyApp>).context).toBe(app);
+        const comp = fixture.componentInstance.component;
+        // ChangeDetectorRef is the token, ViewRef has historically been the constructor
+        expect(app.directive.value).toContain('ViewRef');
+
+        // Each ChangeDetectorRef instance should be unique
+        expect(app.directive!.cdr).not.toBe(comp.cdr);
+        expect(app.directive!.cdr).not.toBe(app.otherDirective!.cdr);
+      });
 
       it('should inject host component ChangeDetectorRef into directives in embedded views', () => {
         @Component({
           selector: 'my-comp',
           template: `<ng-container *ngIf="showing">
             <div dir otherDir #dir="dir" *ngIf="showing"></div>
-          </ng-container>`
+          </ng-container>`,
         })
         class MyComp {
           showing = true;
@@ -3195,8 +3274,10 @@ describe('di', () => {
       });
 
       it('should inject host component ChangeDetectorRef into directives on containers', () => {
-        @Component(
-            {selector: 'my-comp', template: '<div dir otherDir #dir="dir" *ngIf="showing"></div>'})
+        @Component({
+          selector: 'my-comp',
+          template: '<div dir otherDir #dir="dir" *ngIf="showing"></div>',
+        })
         class MyComp {
           showing = true;
           constructor(public cdr: ChangeDetectorRef) {}
@@ -3238,8 +3319,9 @@ describe('di', () => {
         TestBed.configureTestingModule({declarations: [MyApp, MyDirective]});
         const fixture = TestBed.createComponent(MyApp);
         fixture.detectChanges();
-        expect((dirInstance!.cdr as ViewRefInternal<MyApp>).context)
-            .toBe(fixture.componentInstance);
+        expect((dirInstance!.cdr as ViewRefInternal<MyApp>).context).toBe(
+          fixture.componentInstance,
+        );
       });
     });
   });
@@ -3275,11 +3357,13 @@ describe('di', () => {
       @Component({
         selector: 'my-comp',
         template: '...',
-        providers: [{
-          provide: TOKEN,
-          deps: [[new Attribute('token')]],
-          useFactory: factory,
-        }]
+        providers: [
+          {
+            provide: TOKEN,
+            deps: [[new Attribute('token')]],
+            useFactory: factory,
+          },
+        ],
       })
       class MyComp {
         constructor(@Inject(TOKEN) readonly token: string) {}
@@ -3346,7 +3430,6 @@ describe('di', () => {
       expect(fixture.nativeElement.innerHTML).toEqual('injected value');
     });
 
-
     it('should be able to inject special tokens like ChangeDetectorRef', () => {
       const TOKEN = new InjectionToken<string>('TOKEN');
 
@@ -3517,8 +3600,7 @@ describe('di', () => {
           providers: [{provide: TOKEN, useValue: 'from parent'}],
           encapsulation: ViewEncapsulation.None,
         })
-        class ParentCmp {
-        }
+        class ParentCmp {}
 
         const fixture = TestBed.createComponent(ParentCmp);
         fixture.detectChanges();
@@ -3670,7 +3752,7 @@ describe('di', () => {
         class ChildCmp {
           nodeInjector = inject(Injector);
           a = this.nodeInjector.get(TOKEN, 'not found', {host: true, optional: true});
-          b = this.nodeInjector.get(TOKEN, 'not found', InjectFlags.Host|InjectFlags.Optional);
+          b = this.nodeInjector.get(TOKEN, 'not found', InjectFlags.Host | InjectFlags.Optional);
         }
 
         @Component({
@@ -3680,8 +3762,7 @@ describe('di', () => {
           providers: [{provide: TOKEN, useValue: 'from parent'}],
           encapsulation: ViewEncapsulation.None,
         })
-        class ParentCmp {
-        }
+        class ParentCmp {}
 
         const fixture = TestBed.createComponent(ParentCmp);
         fixture.detectChanges();
@@ -3691,7 +3772,7 @@ describe('di', () => {
   });
 
   describe('runInInjectionContext', () => {
-    it('should return the function\'s return value', () => {
+    it("should return the function's return value", () => {
       const injector = TestBed.inject(EnvironmentInjector);
       const returnValue = runInInjectionContext(injector, () => 3);
       expect(returnValue).toBe(3);
@@ -3713,7 +3794,9 @@ describe('di', () => {
     it('should make inject() available', () => {
       const TOKEN = new InjectionToken<string>('TOKEN');
       const injector = createEnvironmentInjector(
-          [{provide: TOKEN, useValue: 'from injector'}], TestBed.inject(EnvironmentInjector));
+        [{provide: TOKEN, useValue: 'from injector'}],
+        TestBed.inject(EnvironmentInjector),
+      );
 
       const result = runInInjectionContext(injector, () => inject(TOKEN));
       expect(result).toEqual('from injector');
@@ -3729,9 +3812,11 @@ describe('di', () => {
     it('should properly clean up after the function throws', () => {
       const TOKEN = new InjectionToken<string>('TOKEN');
       const injector = TestBed.inject(EnvironmentInjector);
-      expect(() => runInInjectionContext(injector, () => {
-               throw new Error('crashes!');
-             })).toThrow();
+      expect(() =>
+        runInInjectionContext(injector, () => {
+          throw new Error('crashes!');
+        }),
+      ).toThrow();
       expect(() => inject(TOKEN, InjectFlags.Optional)).toThrow();
     });
 
@@ -3754,8 +3839,9 @@ describe('di', () => {
 
         // Attempt to inject ViewContainerRef within the environment injector's context. This should
         // not be available, so the result should be `null`.
-        vcrFromEnvContext = runInInjectionContext(
-            this.envInjector, () => inject(ViewContainerRef, InjectFlags.Optional));
+        vcrFromEnvContext = runInInjectionContext(this.envInjector, () =>
+          inject(ViewContainerRef, InjectFlags.Optional),
+        );
       }
 
       const instance = TestBed.createComponent(TestCmp).componentInstance;
@@ -3772,8 +3858,9 @@ describe('di', () => {
       class TestCmp {
         injector = inject(Injector);
 
-        vcrFromEnvContext =
-            runInInjectionContext(this.injector, () => inject(ViewContainerRef, {optional: true}));
+        vcrFromEnvContext = runInInjectionContext(this.injector, () =>
+          inject(ViewContainerRef, {optional: true}),
+        );
       }
 
       const instance = TestBed.createComponent(TestCmp).componentInstance;
@@ -3787,8 +3874,10 @@ describe('di', () => {
       });
 
       const parentInjector = TestBed.inject(EnvironmentInjector);
-      const childInjector =
-          createEnvironmentInjector([{provide: TOKEN, useValue: 'from child'}], parentInjector);
+      const childInjector = createEnvironmentInjector(
+        [{provide: TOKEN, useValue: 'from child'}],
+        parentInjector,
+      );
 
       const results = runInInjectionContext(parentInjector, () => {
         const fromParentBefore = inject(TOKEN);
@@ -3813,10 +3902,10 @@ describe('di', () => {
     function placeholder() {}
 
     it('should throw if not in an injection context', () => {
-      expect(() => assertInInjectionContext(placeholder))
-          .toThrowMatching(
-              (e: Error) => e instanceof RuntimeError &&
-                  e.code === RuntimeErrorCode.MISSING_INJECTION_CONTEXT);
+      expect(() => assertInInjectionContext(placeholder)).toThrowMatching(
+        (e: Error) =>
+          e instanceof RuntimeError && e.code === RuntimeErrorCode.MISSING_INJECTION_CONTEXT,
+      );
     });
 
     it('should not throw if in an EnvironmentInjector context', () => {
@@ -3827,12 +3916,10 @@ describe('di', () => {
       }).not.toThrow();
     });
 
-
     it('should not throw if in an element injector context', () => {
       expect(() => {
         @Component({template: ''})
-        class EmptyCmp {
-        }
+        class EmptyCmp {}
 
         const fixture = TestBed.createComponent(EmptyCmp);
         runInInjectionContext(fixture.componentRef.injector, () => {
@@ -3851,22 +3938,25 @@ describe('di', () => {
     @Component({
       selector: 'root',
       template: '<comp></comp>',
-      viewProviders: [{
-        provide: 'A',
-        useValue: 'A from Root',
-      }]
+      viewProviders: [
+        {
+          provide: 'A',
+          useValue: 'A from Root',
+        },
+      ],
     })
-    class Root {
-    }
+    class Root {}
 
     @Component({
       selector: 'comp',
       template: '{{ token }}',
-      viewProviders: [{
-        provide: 'B',
-        deps: [[new Inject('A'), new Host()]],
-        useFactory: (token: string) => `${token} (processed by useFactory)`,
-      }]
+      viewProviders: [
+        {
+          provide: 'B',
+          deps: [[new Inject('A'), new Host()]],
+          useFactory: (token: string) => `${token} (processed by useFactory)`,
+        },
+      ],
     })
     class Comp {
       constructor(@Inject('B') readonly token: string) {}
@@ -3875,8 +3965,7 @@ describe('di', () => {
     @Component({
       template: `<root></root>`,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [Root, Comp, App]});
 
@@ -3897,30 +3986,32 @@ describe('di', () => {
     @Component({
       selector: 'root',
       template: '<intermediate></intermediate>',
-      viewProviders: [{
-        provide: 'A',
-        useValue: 'A from Root',
-      }]
+      viewProviders: [
+        {
+          provide: 'A',
+          useValue: 'A from Root',
+        },
+      ],
     })
-    class Root {
-    }
+    class Root {}
 
     @Component({
       selector: 'intermediate',
       template: '<comp></comp>',
     })
-    class Intermediate {
-    }
+    class Intermediate {}
 
     @Component({
       selector: 'comp',
       template: '{{ token }}',
-      viewProviders: [{
-        provide: 'B',
-        deps: [[new Inject('A'), new Host(), new Optional()]],
-        useFactory: (token: string) =>
+      viewProviders: [
+        {
+          provide: 'B',
+          deps: [[new Inject('A'), new Host(), new Optional()]],
+          useFactory: (token: string) =>
             token ? `${token} (processed by useFactory)` : 'No token A found',
-      }]
+        },
+      ],
     })
     class Comp {
       constructor(@Inject('B') readonly token: string) {}
@@ -3929,8 +4020,7 @@ describe('di', () => {
     @Component({
       template: `<root></root>`,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [Root, Comp, App, Intermediate]});
 
@@ -3946,14 +4036,16 @@ describe('di', () => {
     @Component({
       selector: 'my-comp',
       template: '...',
-      providers: [{
-        provide: LOCALE_ID,
-        useFactory: () => 'ja-JP',
-        // Note: `LOCALE_ID` is also provided within APPLICATION_MODULE_PROVIDERS, so we use it
-        // here as a dep and making sure it doesn't cause cyclic dependency (since @SkipSelf is
-        // present)
-        deps: [[new Inject(LOCALE_ID), new Optional(), new SkipSelf()]]
-      }]
+      providers: [
+        {
+          provide: LOCALE_ID,
+          useFactory: () => 'ja-JP',
+          // Note: `LOCALE_ID` is also provided within APPLICATION_MODULE_PROVIDERS, so we use it
+          // here as a dep and making sure it doesn't cause cyclic dependency (since @SkipSelf is
+          // present)
+          deps: [[new Inject(LOCALE_ID), new Optional(), new SkipSelf()]],
+        },
+      ],
     })
     class MyComp {
       constructor(@Inject(LOCALE_ID) public localeId: string) {}
@@ -3969,10 +4061,12 @@ describe('di', () => {
     @Component({
       selector: 'my-comp',
       template: '...',
-      providers: [{
-        provide: 'LOCALE_ID_DEP',  //
-        useValue: 'LOCALE_ID_DEP_VALUE'
-      }]
+      providers: [
+        {
+          provide: 'LOCALE_ID_DEP', //
+          useValue: 'LOCALE_ID_DEP_VALUE',
+        },
+      ],
     })
     class MyComp {
       constructor(@Inject(LOCALE_ID) public localeId: string) {}
@@ -3980,12 +4074,14 @@ describe('di', () => {
 
     TestBed.configureTestingModule({
       declarations: [MyComp],
-      providers: [{
-        provide: LOCALE_ID,
-        // we expect `localeDepValue` to be undefined, since it's not provided at a module level
-        useFactory: (localeDepValue: any) => localeDepValue || 'en-GB',
-        deps: [[new Inject('LOCALE_ID_DEP'), new Optional()]]
-      }]
+      providers: [
+        {
+          provide: LOCALE_ID,
+          // we expect `localeDepValue` to be undefined, since it's not provided at a module level
+          useFactory: (localeDepValue: any) => localeDepValue || 'en-GB',
+          deps: [[new Inject('LOCALE_ID_DEP'), new Optional()]],
+        },
+      ],
     });
     const fixture = TestBed.createComponent(MyComp);
     fixture.detectChanges();
@@ -3996,7 +4092,7 @@ describe('di', () => {
     @Component({
       selector: 'my-comp',
       template: '...',
-      providers: [{provide: LOCALE_ID, useFactory: () => 'en-GB'}]
+      providers: [{provide: LOCALE_ID, useFactory: () => 'en-GB'}],
     })
     class MyComp {
       constructor(@SkipSelf() @Inject(LOCALE_ID) public localeId: string) {}
@@ -4011,8 +4107,8 @@ describe('di', () => {
 
   it('should work when injecting dependency in Directives', () => {
     @Directive({
-      selector: '[dir]',  //
-      providers: [{provide: LOCALE_ID, useValue: 'ja-JP'}]
+      selector: '[dir]', //
+      providers: [{provide: LOCALE_ID, useValue: 'ja-JP'}],
     })
     class MyDir {
       constructor(@SkipSelf() @Inject(LOCALE_ID) public localeId: string) {}
@@ -4020,7 +4116,7 @@ describe('di', () => {
     @Component({
       selector: 'my-comp',
       template: '<div dir></div>',
-      providers: [{provide: LOCALE_ID, useValue: 'en-GB'}]
+      providers: [{provide: LOCALE_ID, useValue: 'en-GB'}],
     })
     class MyComp {
       @ViewChild(MyDir) myDir!: MyDir;
@@ -4038,8 +4134,9 @@ describe('di', () => {
       @Directive({selector: '[dir]'})
       class MyDir {
         constructor(
-            @Attribute('exist') public exist: string,
-            @Attribute('nonExist') public nonExist: string) {}
+          @Attribute('exist') public exist: string,
+          @Attribute('nonExist') public nonExist: string,
+        ) {}
       }
 
       @Component({template: '<div dir exist="existValue" other="ignore"></div>'})
@@ -4061,12 +4158,14 @@ describe('di', () => {
       @Directive({selector: '[dir]'})
       class MyDir {
         constructor(
-            @Attribute('exist') public exist: string,
-            @Attribute('dir') public myDirectiveAttrValue: string) {}
+          @Attribute('exist') public exist: string,
+          @Attribute('dir') public myDirectiveAttrValue: string,
+        ) {}
       }
 
-      @Component(
-          {template: '<ng-template dir="initial" exist="existValue" other="ignore"></ng-template>'})
+      @Component({
+        template: '<ng-template dir="initial" exist="existValue" other="ignore"></ng-template>',
+      })
       class MyComp {
         @ViewChild(MyDir) directiveInstance!: MyDir;
       }
@@ -4085,12 +4184,13 @@ describe('di', () => {
       @Directive({selector: '[dir]'})
       class MyDir {
         constructor(
-            @Attribute('exist') public exist: string,
-            @Attribute('dir') public myDirectiveAttrValue: string) {}
+          @Attribute('exist') public exist: string,
+          @Attribute('dir') public myDirectiveAttrValue: string,
+        ) {}
       }
 
       @Component({
-        template: '<ng-container dir="initial" exist="existValue" other="ignore"></ng-container>'
+        template: '<ng-container dir="initial" exist="existValue" other="ignore"></ng-container>',
       })
       class MyComp {
         @ViewChild(MyDir) directiveInstance!: MyDir;
@@ -4110,14 +4210,15 @@ describe('di', () => {
       @Directive({selector: '[dir]'})
       class MyDir {
         constructor(
-            @Attribute('class') public className: string,
-            @Attribute('style') public inlineStyles: string,
-            @Attribute('other-attr') public otherAttr: string) {}
+          @Attribute('class') public className: string,
+          @Attribute('style') public inlineStyles: string,
+          @Attribute('other-attr') public otherAttr: string,
+        ) {}
       }
 
       @Component({
         template:
-            '<div dir style="margin: 1px; color: red;" class="hello there" other-attr="value"></div>'
+          '<div dir style="margin: 1px; color: red;" class="hello there" other-attr="value"></div>',
       })
       class MyComp {
         @ViewChild(MyDir) directiveInstance!: MyDir;
@@ -4139,13 +4240,15 @@ describe('di', () => {
       @Directive({selector: '[dir]'})
       class MyDir {
         constructor(
-            @Attribute('exist') public exist: string,
-            @Attribute('svg:exist') public namespacedExist: string,
-            @Attribute('other') public other: string) {}
+          @Attribute('exist') public exist: string,
+          @Attribute('svg:exist') public namespacedExist: string,
+          @Attribute('other') public other: string,
+        ) {}
       }
 
       @Component({
-        template: '<div dir exist="existValue" svg:exist="testExistValue" other="otherValue"></div>'
+        template:
+          '<div dir exist="existValue" svg:exist="testExistValue" other="otherValue"></div>',
       })
       class MyComp {
         @ViewChild(MyDir) directiveInstance!: MyDir;
@@ -4168,15 +4271,16 @@ describe('di', () => {
         @Input() binding!: string;
         @Output() output = new EventEmitter();
         constructor(
-            @Attribute('exist') public exist: string,
-            @Attribute('binding') public bindingAttr: string,
-            @Attribute('output') public outputAttr: string,
-            @Attribute('other') public other: string) {}
+          @Attribute('exist') public exist: string,
+          @Attribute('binding') public bindingAttr: string,
+          @Attribute('output') public outputAttr: string,
+          @Attribute('other') public other: string,
+        ) {}
       }
 
       @Component({
         template:
-            '<div dir exist="existValue" [binding]="bindingValue" (output)="outputValue" other="otherValue" ignore="ignoreValue"></div>'
+          '<div dir exist="existValue" [binding]="bindingValue" (output)="outputValue" other="otherValue" ignore="ignoreValue"></div>',
       })
       class MyComp {
         @ViewChild(MyDir) directiveInstance!: MyDir;
@@ -4325,30 +4429,30 @@ describe('di', () => {
         @ViewChild(Dir) dir!: Dir;
       }
 
-      expect(() => TestBed.createComponent(TestCmp))
-          .toThrowError(/No provider for HostAttributeToken some-attr found/);
+      expect(() => TestBed.createComponent(TestCmp)).toThrowError(
+        /No provider for HostAttributeToken some-attr found/,
+      );
     });
 
-    it('should not throw a DI error when injecting a non-existent attribute with optional: true',
-       () => {
-         @Directive({selector: '[dir]', standalone: true})
-         class Dir {
-           value = inject(new HostAttributeToken('some-attr'), {optional: true});
-         }
-
-         @Component({
-           standalone: true,
-           template: '<div dir other="ignore"></div>',
-           imports: [Dir],
-         })
-         class TestCmp {
-           @ViewChild(Dir) dir!: Dir;
-         }
-
-         const fixture = TestBed.createComponent(TestCmp);
-         fixture.detectChanges();
-         expect(fixture.componentInstance.dir.value).toBe(null);
-       });
+    it('should not throw a DI error when injecting a non-existent attribute with optional: true', () => {
+      @Directive({selector: '[dir]', standalone: true})
+      class Dir {
+        value = inject(new HostAttributeToken('some-attr'), {optional: true});
+      }
+
+      @Component({
+        standalone: true,
+        template: '<div dir other="ignore"></div>',
+        imports: [Dir],
+      })
+      class TestCmp {
+        @ViewChild(Dir) dir!: Dir;
+      }
+
+      const fixture = TestBed.createComponent(TestCmp);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.dir.value).toBe(null);
+    });
 
     it('should not inject attributes with namespace', () => {
       @Directive({selector: '[dir]', standalone: true})
@@ -4400,7 +4504,7 @@ describe('di', () => {
             [binding]="bindingValue"
             (output)="noop()"
             other="otherValue"
-            ignore="ignoreValue"></div>`
+            ignore="ignoreValue"></div>`,
       })
       class TestCmp {
         @ViewChild(Dir) dir!: Dir;
@@ -4480,8 +4584,9 @@ describe('di', () => {
         @ViewChild(Dir) dir!: Dir;
       }
 
-      expect(() => TestBed.createComponent(TestCmp))
-          .toThrowError(/No provider for HostAttributeToken some-attr found/);
+      expect(() => TestBed.createComponent(TestCmp)).toThrowError(
+        /No provider for HostAttributeToken some-attr found/,
+      );
     });
 
     it('should not throw when injecting a non-existent attribute using @Inject @Optional', () => {
@@ -4489,7 +4594,7 @@ describe('di', () => {
 
       @Directive({selector: '[dir]', standalone: true})
       class Dir {
-        constructor(@Inject(TOKEN) @Optional() readonly value: string|null) {}
+        constructor(@Inject(TOKEN) @Optional() readonly value: string | null) {}
       }
 
       @Component({
@@ -4566,13 +4671,13 @@ describe('di', () => {
         @ViewChild(Dir) dir!: Dir;
       }
 
-      expect(() => TestBed.createComponent(TestNgContainer))
-          .toThrowError(
-              /HOST_TAG_NAME was used on an <ng-container> which doesn't have an underlying element in the DOM/);
+      expect(() => TestBed.createComponent(TestNgContainer)).toThrowError(
+        /HOST_TAG_NAME was used on an <ng-container> which doesn't have an underlying element in the DOM/,
+      );
 
-      expect(() => TestBed.createComponent(TestNgTemplate))
-          .toThrowError(
-              /HOST_TAG_NAME was used on an <ng-template> which doesn't have an underlying element in the DOM/);
+      expect(() => TestBed.createComponent(TestNgTemplate)).toThrowError(
+        /HOST_TAG_NAME was used on an <ng-template> which doesn't have an underlying element in the DOM/,
+      );
     });
 
     it('should not throw a DI error when injecting into non-DOM nodes with optional: true', () => {
@@ -4619,7 +4724,7 @@ describe('di', () => {
           =1 {One}
           other {Other value is: {{count | somePipe}}}
         }</div>
-      `
+      `,
     })
     class MyComp {
       count = '2';
@@ -4657,7 +4762,7 @@ describe('di', () => {
           {{count | somePipe}} <span>items</span>
         </ng-template>
         <ng-container #target></ng-container>
-      `
+      `,
     })
     class MyComp {
       count = '2';
@@ -4687,11 +4792,9 @@ describe('di', () => {
   it('should prioritize useFactory over useExisting', () => {
     abstract class Base {}
     @Directive({selector: '[dirA]'})
-    class DirA implements Base {
-    }
+    class DirA implements Base {}
     @Directive({selector: '[dirB]'})
-    class DirB implements Base {
-    }
+    class DirB implements Base {}
 
     const PROVIDER = {provide: Base, useExisting: DirA, useFactory: () => new DirB()};
 
@@ -4706,16 +4809,16 @@ describe('di', () => {
       @ViewChild(Child) child!: Child;
     }
 
-    const fixture = TestBed.configureTestingModule({declarations: [DirA, DirB, App, Child]})
-                        .createComponent(App);
+    const fixture = TestBed.configureTestingModule({
+      declarations: [DirA, DirB, App, Child],
+    }).createComponent(App);
     fixture.detectChanges();
-    expect(fixture.componentInstance.dirA)
-        .not.toEqual(
-            fixture.componentInstance.child.base,
-            'should not get dirA from parent, but create new dirB from the useFactory provider');
+    expect(fixture.componentInstance.dirA).not.toEqual(
+      fixture.componentInstance.child.base,
+      'should not get dirA from parent, but create new dirB from the useFactory provider',
+    );
   });
 
-
   describe('provider access on the same node', () => {
     const token = new InjectionToken<number>('token');
 
@@ -4732,7 +4835,7 @@ describe('di', () => {
       @Component({
         selector: 'child-comp',
         template: '{{value}}',
-        providers: [{provide: token, useValue: 'child'}]
+        providers: [{provide: token, useValue: 'child'}],
       })
       class ChildComp {
         @Input() value: any;
@@ -4740,10 +4843,9 @@ describe('di', () => {
 
       @Component({
         template: `<child-comp [value]="'' | token"></child-comp>`,
-        providers: [{provide: token, useValue: 'parent'}]
+        providers: [{provide: token, useValue: 'parent'}],
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, ChildComp, TokenPipe]});
       const fixture = TestBed.createComponent(App);
@@ -4765,7 +4867,7 @@ describe('di', () => {
       @Component({
         selector: 'child-comp',
         template: '{{value}}',
-        viewProviders: [{provide: token, useValue: 'child'}]
+        viewProviders: [{provide: token, useValue: 'child'}],
       })
       class ChildComp {
         @Input() value: any;
@@ -4773,10 +4875,9 @@ describe('di', () => {
 
       @Component({
         template: `<child-comp [value]="'' | token"></child-comp>`,
-        viewProviders: [{provide: token, useValue: 'parent'}]
+        viewProviders: [{provide: token, useValue: 'parent'}],
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, ChildComp, TokenPipe]});
       const fixture = TestBed.createComponent(App);
@@ -4796,12 +4897,11 @@ describe('di', () => {
         template: '',
         providers: [{provide: token, useValue: 'child'}],
       })
-      class ChildComp {
-      }
+      class ChildComp {}
 
       @Component({
         template: '<child-comp dir></child-comp>',
-        providers: [{provide: token, useValue: 'parent'}]
+        providers: [{provide: token, useValue: 'parent'}],
       })
       class App {
         @ViewChild(Dir) dir!: Dir;
@@ -4823,14 +4923,13 @@ describe('di', () => {
       @Component({
         selector: 'child-comp',
         template: '',
-        viewProviders: [{provide: token, useValue: 'child'}]
+        viewProviders: [{provide: token, useValue: 'child'}],
       })
-      class ChildComp {
-      }
+      class ChildComp {}
 
       @Component({
         template: '<child-comp dir></child-comp>',
-        viewProviders: [{provide: token, useValue: 'parent'}]
+        viewProviders: [{provide: token, useValue: 'parent'}],
       })
       class App {
         @ViewChild(Dir) dir!: Dir;
@@ -4863,7 +4962,7 @@ describe('di', () => {
 
       constructor(private viewContainerRef: ViewContainerRef) {}
 
-      open(injector: Injector|undefined) {
+      open(injector: Injector | undefined) {
         this.viewContainerRef.createEmbeddedView(this.menu, undefined, {injector});
       }
     }
@@ -4880,7 +4979,7 @@ describe('di', () => {
           <ng-template #menuTemplate>
             <menu></menu>
           </ng-template>
-      `
+      `,
       })
       class App {
         @ViewChild(MenuTrigger) trigger!: MenuTrigger;
@@ -4898,47 +4997,45 @@ describe('di', () => {
       expect(fixture.componentInstance.menu.tokenValue).toBe('hello');
     });
 
-    it('should check only the current node with @Self when providing an injection token through an embedded view injector',
-       () => {
-         @Directive({selector: 'menu'})
-         class Menu {
-           constructor(@Inject(token) @Self() @Optional() public tokenValue: string) {}
-         }
+    it('should check only the current node with @Self when providing an injection token through an embedded view injector', () => {
+      @Directive({selector: 'menu'})
+      class Menu {
+        constructor(@Inject(token) @Self() @Optional() public tokenValue: string) {}
+      }
 
-         @Component({
-           template: `
+      @Component({
+        template: `
           <menu-trigger [triggerFor]="menuTemplate"></menu-trigger>
           <ng-template #menuTemplate>
             <menu></menu>
           </ng-template>
         `,
-           providers: [{provide: token, useValue: 'root'}]
-         })
-         class App {
-           @ViewChild(MenuTrigger) trigger!: MenuTrigger;
-           @ViewChild(Menu) menu!: Menu;
-         }
-
-         TestBed.configureTestingModule({declarations: [App, MenuTrigger, Menu]});
-         const injector = Injector.create({providers: [{provide: token, useValue: 'hello'}]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         fixture.componentInstance.trigger.open(injector);
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.menu.tokenValue).toBeNull();
-       });
-
-    it('should be able to provide an injection token to a nested template through a custom injector',
-       () => {
-         @Directive({selector: 'menu'})
-         class Menu {
-           constructor(@Inject(token) public tokenValue: string) {}
-         }
-
-         @Component({
-           template: `
+        providers: [{provide: token, useValue: 'root'}],
+      })
+      class App {
+        @ViewChild(MenuTrigger) trigger!: MenuTrigger;
+        @ViewChild(Menu) menu!: Menu;
+      }
+
+      TestBed.configureTestingModule({declarations: [App, MenuTrigger, Menu]});
+      const injector = Injector.create({providers: [{provide: token, useValue: 'hello'}]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.open(injector);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.menu.tokenValue).toBeNull();
+    });
+
+    it('should be able to provide an injection token to a nested template through a custom injector', () => {
+      @Directive({selector: 'menu'})
+      class Menu {
+        constructor(@Inject(token) public tokenValue: string) {}
+      }
+
+      @Component({
+        template: `
             <menu-trigger #outerTrigger [triggerFor]="outerTemplate"></menu-trigger>
             <ng-template #outerTemplate>
               <menu></menu>
@@ -4948,37 +5045,37 @@ describe('di', () => {
                 <menu #innerMenu></menu>
               </ng-template>
             </ng-template>
-          `
-         })
-         class App {
-           @ViewChild('outerTrigger', {read: MenuTrigger}) outerTrigger!: MenuTrigger;
-           @ViewChild('innerTrigger', {read: MenuTrigger}) innerTrigger!: MenuTrigger;
-           @ViewChild('innerMenu', {read: Menu}) innerMenu!: Menu;
-         }
-
-         TestBed.configureTestingModule({declarations: [App, MenuTrigger, Menu]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         fixture.componentInstance.outerTrigger.open(
-             Injector.create({providers: [{provide: token, useValue: 'hello'}]}));
-         fixture.detectChanges();
-
-         fixture.componentInstance.innerTrigger.open(undefined);
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.innerMenu.tokenValue).toBe('hello');
-       });
-
-    it('should be able to resolve a token from a custom grandparent injector if the token is not provided in the parent',
-       () => {
-         @Directive({selector: 'menu'})
-         class Menu {
-           constructor(@Inject(token) public tokenValue: string) {}
-         }
-
-         @Component({
-           template: `
+          `,
+      })
+      class App {
+        @ViewChild('outerTrigger', {read: MenuTrigger}) outerTrigger!: MenuTrigger;
+        @ViewChild('innerTrigger', {read: MenuTrigger}) innerTrigger!: MenuTrigger;
+        @ViewChild('innerMenu', {read: Menu}) innerMenu!: Menu;
+      }
+
+      TestBed.configureTestingModule({declarations: [App, MenuTrigger, Menu]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      fixture.componentInstance.outerTrigger.open(
+        Injector.create({providers: [{provide: token, useValue: 'hello'}]}),
+      );
+      fixture.detectChanges();
+
+      fixture.componentInstance.innerTrigger.open(undefined);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.innerMenu.tokenValue).toBe('hello');
+    });
+
+    it('should be able to resolve a token from a custom grandparent injector if the token is not provided in the parent', () => {
+      @Directive({selector: 'menu'})
+      class Menu {
+        constructor(@Inject(token) public tokenValue: string) {}
+      }
+
+      @Component({
+        template: `
             <menu-trigger #grandparentTrigger [triggerFor]="grandparentTemplate"></menu-trigger>
             <ng-template #grandparentTemplate>
               <menu></menu>
@@ -4993,31 +5090,32 @@ describe('di', () => {
                 </ng-template>
               </ng-template>
             </ng-template>
-          `
-         })
-         class App {
-           @ViewChild('grandparentTrigger', {read: MenuTrigger}) grandparentTrigger!: MenuTrigger;
-           @ViewChild('parentTrigger', {read: MenuTrigger}) parentTrigger!: MenuTrigger;
-           @ViewChild('childTrigger', {read: MenuTrigger}) childTrigger!: MenuTrigger;
-           @ViewChild('childMenu', {read: Menu}) childMenu!: Menu;
-         }
+          `,
+      })
+      class App {
+        @ViewChild('grandparentTrigger', {read: MenuTrigger}) grandparentTrigger!: MenuTrigger;
+        @ViewChild('parentTrigger', {read: MenuTrigger}) parentTrigger!: MenuTrigger;
+        @ViewChild('childTrigger', {read: MenuTrigger}) childTrigger!: MenuTrigger;
+        @ViewChild('childMenu', {read: Menu}) childMenu!: Menu;
+      }
 
-         TestBed.configureTestingModule({declarations: [App, MenuTrigger, Menu]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
+      TestBed.configureTestingModule({declarations: [App, MenuTrigger, Menu]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
 
-         fixture.componentInstance.grandparentTrigger.open(
-             Injector.create({providers: [{provide: token, useValue: 'hello'}]}));
-         fixture.detectChanges();
+      fixture.componentInstance.grandparentTrigger.open(
+        Injector.create({providers: [{provide: token, useValue: 'hello'}]}),
+      );
+      fixture.detectChanges();
 
-         fixture.componentInstance.parentTrigger.open(Injector.create({providers: []}));
-         fixture.detectChanges();
+      fixture.componentInstance.parentTrigger.open(Injector.create({providers: []}));
+      fixture.detectChanges();
 
-         fixture.componentInstance.childTrigger.open(undefined);
-         fixture.detectChanges();
+      fixture.componentInstance.childTrigger.open(undefined);
+      fixture.detectChanges();
 
-         expect(fixture.componentInstance.childMenu.tokenValue).toBe('hello');
-       });
+      expect(fixture.componentInstance.childMenu.tokenValue).toBe('hello');
+    });
 
     it('should resolve value from node injector if it is lower than embedded view injector', () => {
       @Directive({selector: 'menu'})
@@ -5033,7 +5131,7 @@ describe('di', () => {
           <ng-template #menuTemplate>
             <menu></menu>
           </ng-template>
-        `
+        `,
       })
       class Wrapper {
         @ViewChild(MenuTrigger) trigger!: MenuTrigger;
@@ -5046,7 +5144,7 @@ describe('di', () => {
           <ng-template #menuTemplate>
             <wrapper></wrapper>
           </ng-template>
-        `
+        `,
       })
       class App {
         @ViewChild(MenuTrigger) trigger!: MenuTrigger;
@@ -5058,7 +5156,8 @@ describe('di', () => {
       fixture.detectChanges();
 
       fixture.componentInstance.trigger.open(
-          Injector.create({providers: [{provide: token, useValue: 'hello from injector'}]}));
+        Injector.create({providers: [{provide: token, useValue: 'hello from injector'}]}),
+      );
       fixture.detectChanges();
 
       fixture.componentInstance.wrapper.trigger.open(undefined);
@@ -5079,7 +5178,7 @@ describe('di', () => {
           <ng-template #menuTemplate>
             <menu></menu>
           </ng-template>
-      `
+      `,
       })
       class App {
         @ViewChild(MenuTrigger) trigger!: MenuTrigger;
@@ -5089,10 +5188,9 @@ describe('di', () => {
       @NgModule({
         declarations: [App, MenuTrigger, Menu],
         exports: [App, MenuTrigger, Menu],
-        providers: [{provide: token, useValue: 'hello'}]
+        providers: [{provide: token, useValue: 'hello'}],
       })
-      class Module {
-      }
+      class Module {}
 
       TestBed.configureTestingModule({imports: [Module]});
       const injector = Injector.create({providers: []});
@@ -5117,7 +5215,7 @@ describe('di', () => {
           <ng-template #menuTemplate>
             <menu></menu>
           </ng-template>
-      `
+      `,
       })
       class App {
         @ViewChild(MenuTrigger) trigger!: MenuTrigger;
@@ -5127,14 +5225,14 @@ describe('di', () => {
       @NgModule({
         declarations: [App, MenuTrigger, Menu],
         exports: [App, MenuTrigger, Menu],
-        providers: [{provide: token, useValue: 'hello from module'}]
+        providers: [{provide: token, useValue: 'hello from module'}],
       })
-      class Module {
-      }
+      class Module {}
 
       TestBed.configureTestingModule({imports: [Module]});
-      const injector =
-          Injector.create({providers: [{provide: token, useValue: 'hello from injector'}]});
+      const injector = Injector.create({
+        providers: [{provide: token, useValue: 'hello from injector'}],
+      });
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
@@ -5157,7 +5255,7 @@ describe('di', () => {
             <menu></menu>
           </ng-template>
       `,
-        providers: [{provide: token, useValue: 'hello from parent'}]
+        providers: [{provide: token, useValue: 'hello from parent'}],
       })
       class App {
         @ViewChild(MenuTrigger) trigger!: MenuTrigger;
@@ -5168,12 +5266,12 @@ describe('di', () => {
         declarations: [App, MenuTrigger, Menu],
         exports: [App, MenuTrigger, Menu],
       })
-      class Module {
-      }
+      class Module {}
 
       TestBed.configureTestingModule({imports: [Module]});
-      const injector =
-          Injector.create({providers: [{provide: token, useValue: 'hello from injector'}]});
+      const injector = Injector.create({
+        providers: [{provide: token, useValue: 'hello from injector'}],
+      });
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
@@ -5186,7 +5284,10 @@ describe('di', () => {
     it('should be able to inject built-in tokens when a custom injector is provided', () => {
       @Directive({selector: 'menu'})
       class Menu {
-        constructor(public elementRef: ElementRef, public changeDetectorRef: ChangeDetectorRef) {}
+        constructor(
+          public elementRef: ElementRef,
+          public changeDetectorRef: ChangeDetectorRef,
+        ) {}
       }
 
       @Component({
@@ -5195,7 +5296,7 @@ describe('di', () => {
           <ng-template #menuTemplate>
             <menu></menu>
           </ng-template>
-      `
+      `,
       })
       class App {
         @ViewChild(MenuTrigger) trigger!: MenuTrigger;
@@ -5210,50 +5311,49 @@ describe('di', () => {
       fixture.componentInstance.trigger.open(injector);
       fixture.detectChanges();
 
-      expect(fixture.componentInstance.menu.elementRef.nativeElement)
-          .toBe(fixture.nativeElement.querySelector('menu'));
+      expect(fixture.componentInstance.menu.elementRef.nativeElement).toBe(
+        fixture.nativeElement.querySelector('menu'),
+      );
       expect(fixture.componentInstance.menu.changeDetectorRef).toBeTruthy();
     });
 
-    it('should have value from parent component injector take precedence over module injector',
-       () => {
-         @Directive({selector: 'menu'})
-         class Menu {
-           constructor(@Inject(token) public tokenValue: string) {}
-         }
+    it('should have value from parent component injector take precedence over module injector', () => {
+      @Directive({selector: 'menu'})
+      class Menu {
+        constructor(@Inject(token) public tokenValue: string) {}
+      }
 
-         @Component({
-           template: `
+      @Component({
+        template: `
             <menu-trigger [triggerFor]="menuTemplate"></menu-trigger>
             <ng-template #menuTemplate>
               <menu></menu>
             </ng-template>
           `,
-           providers: [{provide: token, useValue: 'hello from parent'}]
-         })
-         class App {
-           @ViewChild(MenuTrigger) trigger!: MenuTrigger;
-           @ViewChild(Menu) menu!: Menu;
-         }
-
-         @NgModule({
-           declarations: [App, MenuTrigger, Menu],
-           exports: [App, MenuTrigger, Menu],
-           providers: [{provide: token, useValue: 'hello from module'}]
-         })
-         class Module {
-         }
-
-         TestBed.configureTestingModule({imports: [Module]});
-         const injector = Injector.create({providers: []});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         fixture.componentInstance.trigger.open(injector);
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.menu.tokenValue).toBe('hello from parent');
-       });
+        providers: [{provide: token, useValue: 'hello from parent'}],
+      })
+      class App {
+        @ViewChild(MenuTrigger) trigger!: MenuTrigger;
+        @ViewChild(Menu) menu!: Menu;
+      }
+
+      @NgModule({
+        declarations: [App, MenuTrigger, Menu],
+        exports: [App, MenuTrigger, Menu],
+        providers: [{provide: token, useValue: 'hello from module'}],
+      })
+      class Module {}
+
+      TestBed.configureTestingModule({imports: [Module]});
+      const injector = Injector.create({providers: []});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.open(injector);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.menu.tokenValue).toBe('hello from parent');
+    });
 
     it('should be able to inject an injectable with dependencies', () => {
       @Injectable()
@@ -5276,7 +5376,7 @@ describe('di', () => {
           <ng-template #menuTemplate>
             <menu></menu>
           </ng-template>
-      `
+      `,
       })
       class App {
         @ViewChild(MenuTrigger) trigger!: MenuTrigger;
@@ -5286,17 +5386,16 @@ describe('di', () => {
       @NgModule({
         declarations: [App, MenuTrigger, Menu],
         exports: [App, MenuTrigger, Menu],
-        providers: [{provide: token, useValue: 'module'}]
+        providers: [{provide: token, useValue: 'module'}],
       })
-      class Module {
-      }
+      class Module {}
 
       TestBed.configureTestingModule({imports: [Module]});
       const injector = Injector.create({
         providers: [
           {provide: Greeter, useClass: Greeter},
           {provide: token, useValue: 'injector'},
-        ]
+        ],
       });
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -5307,48 +5406,47 @@ describe('di', () => {
       expect(fixture.componentInstance.menu.greeter.greet()).toBe('hello from injector');
     });
 
-    it('should be able to inject a value from a grandparent component when a custom injector is provided',
-       () => {
-         @Directive({selector: 'menu'})
-         class Menu {
-           constructor(@Inject(token) public tokenValue: string) {}
-         }
+    it('should be able to inject a value from a grandparent component when a custom injector is provided', () => {
+      @Directive({selector: 'menu'})
+      class Menu {
+        constructor(@Inject(token) public tokenValue: string) {}
+      }
 
-         @Component({
-           selector: 'parent',
-           template: `
+      @Component({
+        selector: 'parent',
+        template: `
             <menu-trigger [triggerFor]="menuTemplate"></menu-trigger>
             <ng-template #menuTemplate>
               <menu></menu>
             </ng-template>
-           `
-         })
-         class Parent {
-           @ViewChild(MenuTrigger) trigger!: MenuTrigger;
-           @ViewChild(Menu) menu!: Menu;
-         }
-
-         @Component({
-           template: '<parent></parent>',
-           providers: [{provide: token, useValue: 'hello from grandparent'}]
-         })
-         class GrandParent {
-           @ViewChild(Parent) parent!: Parent;
-         }
-
-         TestBed.configureTestingModule({declarations: [GrandParent, Parent, MenuTrigger, Menu]});
-         const injector = Injector.create({providers: []});
-         const fixture = TestBed.createComponent(GrandParent);
-         fixture.detectChanges();
-
-         fixture.componentInstance.parent.trigger.open(injector);
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.parent.menu.tokenValue).toBe('hello from grandparent');
-       });
+           `,
+      })
+      class Parent {
+        @ViewChild(MenuTrigger) trigger!: MenuTrigger;
+        @ViewChild(Menu) menu!: Menu;
+      }
+
+      @Component({
+        template: '<parent></parent>',
+        providers: [{provide: token, useValue: 'hello from grandparent'}],
+      })
+      class GrandParent {
+        @ViewChild(Parent) parent!: Parent;
+      }
+
+      TestBed.configureTestingModule({declarations: [GrandParent, Parent, MenuTrigger, Menu]});
+      const injector = Injector.create({providers: []});
+      const fixture = TestBed.createComponent(GrandParent);
+      fixture.detectChanges();
+
+      fixture.componentInstance.parent.trigger.open(injector);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.parent.menu.tokenValue).toBe('hello from grandparent');
+    });
 
     it('should be able to use a custom injector when created through TemplateRef', () => {
-      let injectedValue: string|undefined;
+      let injectedValue: string | undefined;
 
       @Directive({selector: 'menu'})
       class Menu {
@@ -5362,7 +5460,7 @@ describe('di', () => {
           <ng-template>
             <menu></menu>
           </ng-template>
-        `
+        `,
       })
       class App {
         @ViewChild(TemplateRef) template!: TemplateRef<unknown>;
@@ -5371,14 +5469,14 @@ describe('di', () => {
       @NgModule({
         declarations: [App, Menu],
         exports: [App, Menu],
-        providers: [{provide: token, useValue: 'hello from module'}]
+        providers: [{provide: token, useValue: 'hello from module'}],
       })
-      class Module {
-      }
+      class Module {}
 
       TestBed.configureTestingModule({imports: [Module]});
-      const injector =
-          Injector.create({providers: [{provide: token, useValue: 'hello from injector'}]});
+      const injector = Injector.create({
+        providers: [{provide: token, useValue: 'hello from injector'}],
+      });
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
@@ -5388,64 +5486,63 @@ describe('di', () => {
       expect(injectedValue).toBe('hello from injector');
     });
 
-    it('should use a custom injector when the view is created outside of the declaration view',
-       () => {
-         const declarerToken = new InjectionToken<string>('declarerToken');
-         const creatorToken = new InjectionToken<string>('creatorToken');
-
-         @Directive({selector: 'menu'})
-         class Menu {
-           constructor(
-               @Inject(token) public tokenValue: string,
-               @Optional() @Inject(declarerToken) public declarerTokenValue: string,
-               @Optional() @Inject(creatorToken) public creatorTokenValue: string) {}
-         }
-
-         @Component({
-           selector: 'declarer',
-           template: '<ng-template><menu></menu></ng-template>',
-           providers: [{provide: declarerToken, useValue: 'hello from declarer'}]
-         })
-         class Declarer {
-           @ViewChild(Menu) menu!: Menu;
-           @ViewChild(TemplateRef) template!: TemplateRef<unknown>;
-         }
-
-         @Component({
-           selector: 'creator',
-           template: '<menu-trigger></menu-trigger>',
-           providers: [{provide: creatorToken, useValue: 'hello from creator'}]
-         })
-         class Creator {
-           @ViewChild(MenuTrigger) trigger!: MenuTrigger;
-         }
-
-         @Component({
-           template: `
+    it('should use a custom injector when the view is created outside of the declaration view', () => {
+      const declarerToken = new InjectionToken<string>('declarerToken');
+      const creatorToken = new InjectionToken<string>('creatorToken');
+
+      @Directive({selector: 'menu'})
+      class Menu {
+        constructor(
+          @Inject(token) public tokenValue: string,
+          @Optional() @Inject(declarerToken) public declarerTokenValue: string,
+          @Optional() @Inject(creatorToken) public creatorTokenValue: string,
+        ) {}
+      }
+
+      @Component({
+        selector: 'declarer',
+        template: '<ng-template><menu></menu></ng-template>',
+        providers: [{provide: declarerToken, useValue: 'hello from declarer'}],
+      })
+      class Declarer {
+        @ViewChild(Menu) menu!: Menu;
+        @ViewChild(TemplateRef) template!: TemplateRef<unknown>;
+      }
+
+      @Component({
+        selector: 'creator',
+        template: '<menu-trigger></menu-trigger>',
+        providers: [{provide: creatorToken, useValue: 'hello from creator'}],
+      })
+      class Creator {
+        @ViewChild(MenuTrigger) trigger!: MenuTrigger;
+      }
+
+      @Component({
+        template: `
               <declarer></declarer>
               <creator></creator>
-            `
-         })
-         class App {
-           @ViewChild(Declarer) declarer!: Declarer;
-           @ViewChild(Creator) creator!: Creator;
-         }
-
-         TestBed.configureTestingModule(
-             {declarations: [App, MenuTrigger, Menu, Declarer, Creator]});
-         const injector = Injector.create({providers: [{provide: token, useValue: 'hello'}]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         const {declarer, creator} = fixture.componentInstance;
-
-         creator.trigger.menu = declarer.template;
-         creator.trigger.open(injector);
-         fixture.detectChanges();
-
-         expect(declarer.menu.tokenValue).toBe('hello');
-         expect(declarer.menu.declarerTokenValue).toBe('hello from declarer');
-         expect(declarer.menu.creatorTokenValue).toBeNull();
-       });
+            `,
+      })
+      class App {
+        @ViewChild(Declarer) declarer!: Declarer;
+        @ViewChild(Creator) creator!: Creator;
+      }
+
+      TestBed.configureTestingModule({declarations: [App, MenuTrigger, Menu, Declarer, Creator]});
+      const injector = Injector.create({providers: [{provide: token, useValue: 'hello'}]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      const {declarer, creator} = fixture.componentInstance;
+
+      creator.trigger.menu = declarer.template;
+      creator.trigger.open(injector);
+      fixture.detectChanges();
+
+      expect(declarer.menu.tokenValue).toBe('hello');
+      expect(declarer.menu.declarerTokenValue).toBe('hello from declarer');
+      expect(declarer.menu.creatorTokenValue).toBeNull();
+    });
 
     it('should give precedence to value provided lower in the tree over custom injector', () => {
       @Directive({selector: 'menu'})
@@ -5455,10 +5552,9 @@ describe('di', () => {
 
       @Directive({
         selector: '[provide-token]',
-        providers: [{provide: token, useValue: 'hello from directive'}]
+        providers: [{provide: token, useValue: 'hello from directive'}],
       })
-      class ProvideToken {
-      }
+      class ProvideToken {}
 
       @Component({
         template: `
@@ -5471,7 +5567,7 @@ describe('di', () => {
             </section>
           </ng-template>
         `,
-        providers: [{provide: token, useValue: 'hello from parent'}]
+        providers: [{provide: token, useValue: 'hello from parent'}],
       })
       class App {
         @ViewChild(MenuTrigger) trigger!: MenuTrigger;
@@ -5482,12 +5578,12 @@ describe('di', () => {
         declarations: [App, MenuTrigger, Menu, ProvideToken],
         exports: [App, MenuTrigger, Menu, ProvideToken],
       })
-      class Module {
-      }
+      class Module {}
 
       TestBed.configureTestingModule({imports: [Module]});
-      const injector =
-          Injector.create({providers: [{provide: token, useValue: 'hello from injector'}]});
+      const injector = Injector.create({
+        providers: [{provide: token, useValue: 'hello from injector'}],
+      });
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
@@ -5497,22 +5593,20 @@ describe('di', () => {
       expect(fixture.componentInstance.menu.tokenValue).toBe('hello from directive');
     });
 
-    it('should give precedence to value provided in custom injector over one provided higher',
-       () => {
-         @Directive({selector: 'menu'})
-         class Menu {
-           constructor(@Inject(token) public tokenValue: string) {}
-         }
-
-         @Directive({
-           selector: '[provide-token]',
-           providers: [{provide: token, useValue: 'hello from directive'}]
-         })
-         class ProvideToken {
-         }
-
-         @Component({
-           template: `
+    it('should give precedence to value provided in custom injector over one provided higher', () => {
+      @Directive({selector: 'menu'})
+      class Menu {
+        constructor(@Inject(token) public tokenValue: string) {}
+      }
+
+      @Directive({
+        selector: '[provide-token]',
+        providers: [{provide: token, useValue: 'hello from directive'}],
+      })
+      class ProvideToken {}
+
+      @Component({
+        template: `
               <menu-trigger [triggerFor]="menuTemplate"></menu-trigger>
               <div provide-token>
                 <ng-template #menuTemplate>
@@ -5520,53 +5614,51 @@ describe('di', () => {
                 </ng-template>
               </div>
             `,
-           providers: [{provide: token, useValue: 'hello from parent'}]
-         })
-         class App {
-           @ViewChild(MenuTrigger) trigger!: MenuTrigger;
-           @ViewChild(Menu) menu!: Menu;
-         }
-
-         @NgModule({
-           declarations: [App, MenuTrigger, Menu, ProvideToken],
-           exports: [App, MenuTrigger, Menu, ProvideToken],
-         })
-         class Module {
-         }
-
-         TestBed.configureTestingModule({imports: [Module]});
-         const injector =
-             Injector.create({providers: [{provide: token, useValue: 'hello from injector'}]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         fixture.componentInstance.trigger.open(injector);
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.menu.tokenValue).toBe('hello from injector');
-       });
-
-    it('should give precedence to value provided lower in the tree over custom injector when crossing view boundaries',
-       () => {
-         @Directive({selector: 'menu'})
-         class Menu {
-           constructor(@Inject(token) public tokenValue: string) {}
-         }
-
-         @Directive({
-           selector: '[provide-token]',
-           providers: [{provide: token, useValue: 'hello from directive'}]
-         })
-         class ProvideToken {
-         }
-
-         @Component({selector: 'wrapper', template: `<div><menu></menu></div>`})
-         class Wrapper {
-           @ViewChild(Menu) menu!: Menu;
-         }
-
-         @Component({
-           template: `
+        providers: [{provide: token, useValue: 'hello from parent'}],
+      })
+      class App {
+        @ViewChild(MenuTrigger) trigger!: MenuTrigger;
+        @ViewChild(Menu) menu!: Menu;
+      }
+
+      @NgModule({
+        declarations: [App, MenuTrigger, Menu, ProvideToken],
+        exports: [App, MenuTrigger, Menu, ProvideToken],
+      })
+      class Module {}
+
+      TestBed.configureTestingModule({imports: [Module]});
+      const injector = Injector.create({
+        providers: [{provide: token, useValue: 'hello from injector'}],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.open(injector);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.menu.tokenValue).toBe('hello from injector');
+    });
+
+    it('should give precedence to value provided lower in the tree over custom injector when crossing view boundaries', () => {
+      @Directive({selector: 'menu'})
+      class Menu {
+        constructor(@Inject(token) public tokenValue: string) {}
+      }
+
+      @Directive({
+        selector: '[provide-token]',
+        providers: [{provide: token, useValue: 'hello from directive'}],
+      })
+      class ProvideToken {}
+
+      @Component({selector: 'wrapper', template: `<div><menu></menu></div>`})
+      class Wrapper {
+        @ViewChild(Menu) menu!: Menu;
+      }
+
+      @Component({
+        template: `
               <menu-trigger [triggerFor]="menuTemplate"></menu-trigger>
               <ng-template #menuTemplate>
                 <section provide-token>
@@ -5574,54 +5666,51 @@ describe('di', () => {
                 </section>
               </ng-template>
             `,
-           providers: [{provide: token, useValue: 'hello from parent'}]
-         })
-         class App {
-           @ViewChild(MenuTrigger) trigger!: MenuTrigger;
-           @ViewChild(Wrapper) wrapper!: Wrapper;
-         }
-
-         @NgModule({
-           declarations: [App, MenuTrigger, Menu, ProvideToken, Wrapper],
-           exports: [App, MenuTrigger, Menu, ProvideToken, Wrapper],
-         })
-         class Module {
-         }
-
-         TestBed.configureTestingModule({imports: [Module]});
-         const injector =
-             Injector.create({providers: [{provide: token, useValue: 'hello from injector'}]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         fixture.componentInstance.trigger.open(injector);
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.wrapper.menu.tokenValue).toBe('hello from directive');
-       });
-
-    it('should give precedence to value provided in custom injector over one provided higher when crossing view boundaries',
-       () => {
-         @Directive({selector: 'menu'})
-         class Menu {
-           constructor(@Inject(token) public tokenValue: string) {}
-         }
-
-         @Directive({
-           selector: '[provide-token]',
-           providers: [{provide: token, useValue: 'hello from directive'}]
-         })
-         class ProvideToken {
-         }
-
-         @Component({selector: 'wrapper', template: `<div><menu></menu></div>`})
-         class Wrapper {
-           @ViewChild(Menu) menu!: Menu;
-         }
-
-
-         @Component({
-           template: `
+        providers: [{provide: token, useValue: 'hello from parent'}],
+      })
+      class App {
+        @ViewChild(MenuTrigger) trigger!: MenuTrigger;
+        @ViewChild(Wrapper) wrapper!: Wrapper;
+      }
+
+      @NgModule({
+        declarations: [App, MenuTrigger, Menu, ProvideToken, Wrapper],
+        exports: [App, MenuTrigger, Menu, ProvideToken, Wrapper],
+      })
+      class Module {}
+
+      TestBed.configureTestingModule({imports: [Module]});
+      const injector = Injector.create({
+        providers: [{provide: token, useValue: 'hello from injector'}],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.open(injector);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.wrapper.menu.tokenValue).toBe('hello from directive');
+    });
+
+    it('should give precedence to value provided in custom injector over one provided higher when crossing view boundaries', () => {
+      @Directive({selector: 'menu'})
+      class Menu {
+        constructor(@Inject(token) public tokenValue: string) {}
+      }
+
+      @Directive({
+        selector: '[provide-token]',
+        providers: [{provide: token, useValue: 'hello from directive'}],
+      })
+      class ProvideToken {}
+
+      @Component({selector: 'wrapper', template: `<div><menu></menu></div>`})
+      class Wrapper {
+        @ViewChild(Menu) menu!: Menu;
+      }
+
+      @Component({
+        template: `
               <menu-trigger [triggerFor]="menuTemplate"></menu-trigger>
               <div provide-token>
                 <ng-template #menuTemplate>
@@ -5629,31 +5718,31 @@ describe('di', () => {
                 </ng-template>
               </div>
             `,
-           providers: [{provide: token, useValue: 'hello from parent'}]
-         })
-         class App {
-           @ViewChild(MenuTrigger) trigger!: MenuTrigger;
-           @ViewChild(Wrapper) wrapper!: Wrapper;
-         }
-
-         @NgModule({
-           declarations: [App, MenuTrigger, Menu, ProvideToken, Wrapper],
-           exports: [App, MenuTrigger, Menu, ProvideToken, Wrapper],
-         })
-         class Module {
-         }
-
-         TestBed.configureTestingModule({imports: [Module]});
-         const injector =
-             Injector.create({providers: [{provide: token, useValue: 'hello from injector'}]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         fixture.componentInstance.trigger.open(injector);
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.wrapper.menu.tokenValue).toBe('hello from injector');
-       });
+        providers: [{provide: token, useValue: 'hello from parent'}],
+      })
+      class App {
+        @ViewChild(MenuTrigger) trigger!: MenuTrigger;
+        @ViewChild(Wrapper) wrapper!: Wrapper;
+      }
+
+      @NgModule({
+        declarations: [App, MenuTrigger, Menu, ProvideToken, Wrapper],
+        exports: [App, MenuTrigger, Menu, ProvideToken, Wrapper],
+      })
+      class Module {}
+
+      TestBed.configureTestingModule({imports: [Module]});
+      const injector = Injector.create({
+        providers: [{provide: token, useValue: 'hello from injector'}],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.open(injector);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.wrapper.menu.tokenValue).toBe('hello from injector');
+    });
 
     it('should not resolve value at insertion location', () => {
       @Directive({selector: 'menu'})
@@ -5663,10 +5752,9 @@ describe('di', () => {
 
       @Directive({
         selector: '[provide-token]',
-        providers: [{provide: token, useValue: 'hello from directive'}]
+        providers: [{provide: token, useValue: 'hello from directive'}],
       })
-      class ProvideToken {
-      }
+      class ProvideToken {}
 
       @Component({
         template: `
@@ -5678,7 +5766,7 @@ describe('di', () => {
             <menu></menu>
           </ng-template>
         `,
-        providers: [{provide: token, useValue: 'hello from parent'}]
+        providers: [{provide: token, useValue: 'hello from parent'}],
       })
       class App {
         @ViewChild(MenuTrigger) trigger!: MenuTrigger;
@@ -5689,8 +5777,7 @@ describe('di', () => {
         declarations: [App, MenuTrigger, Menu, ProvideToken],
         exports: [App, MenuTrigger, Menu, ProvideToken],
       })
-      class Module {
-      }
+      class Module {}
 
       TestBed.configureTestingModule({imports: [Module]});
       // Provide an empty injector so we hit the new code path.
@@ -5709,11 +5796,11 @@ describe('di', () => {
     const token = new InjectionToken('token');
 
     @NgModule({providers: [{provide: token, useValue: 'module'}]})
-    class ModuleWithProvider {
-    }
+    class ModuleWithProvider {}
 
-    const injector =
-        createInjector(ModuleWithProvider, null, [{provide: token, useValue: 'additional'}]);
+    const injector = createInjector(ModuleWithProvider, null, [
+      {provide: token, useValue: 'additional'},
+    ]);
 
     expect(injector.get(token)).toBe('module');
   });
diff --git a/packages/core/test/acceptance/directive_spec.ts b/packages/core/test/acceptance/directive_spec.ts
index 18a5b281effce..dcafcc24ac3cf 100644
--- a/packages/core/test/acceptance/directive_spec.ts
+++ b/packages/core/test/acceptance/directive_spec.ts
@@ -7,7 +7,21 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {Component, Directive, ElementRef, EventEmitter, Input, NgModule, OnChanges, Output, SimpleChange, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  Component,
+  Directive,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgModule,
+  OnChanges,
+  Output,
+  SimpleChange,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
@@ -19,17 +33,15 @@ describe('directives', () => {
     }
 
     @Directive({selector: '[title]'})
-    class TitleDirective {
-    }
+    class TitleDirective {}
 
     @Component({selector: 'test-cmpt', template: ''})
-    class TestComponent {
-    }
+    class TestComponent {}
 
     it('should match directives with attribute selectors on bindings', () => {
       @Directive({selector: '[test]'})
       class TestDir {
-        testValue: boolean|undefined;
+        testValue: boolean | undefined;
 
         /** Setter to assert that a binding is not invoked with stringified attribute value */
         @Input()
@@ -58,44 +70,44 @@ describe('directives', () => {
       expect(testDir.testValue).toBe(false);
     });
 
-    it('should not accidentally set inputs from attributes extracted from bindings / outputs',
-       () => {
-         @Directive({selector: '[test]'})
-         class TestDir {
-           @Input() prop1: boolean|undefined;
-           @Input() prop2: boolean|undefined;
-           testValue: boolean|undefined;
-
-           /** Setter to assert that a binding is not invoked with stringified attribute value */
-           @Input()
-           set test(value: any) {
-             // Assert that the binding is processed correctly. The property should be set
-             // to a "false" boolean and never to the "false" string literal.
-             this.testValue = value;
-             if (value !== false) {
-               fail('Should only be called with a false Boolean value, got a non-falsy value');
-             }
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [TestComponent, TestDir]});
-         TestBed.overrideTemplate(
-             TestComponent,
-             `<span class="fade" [prop1]="true" [test]="false" [prop2]="true"></span>`);
-
-         const fixture = TestBed.createComponent(TestComponent);
-         const testDir = fixture.debugElement.query(By.directive(TestDir)).injector.get(TestDir);
-         const spanEl = fixture.nativeElement.children[0];
-         fixture.detectChanges();
-
-         // the "test" attribute should not be reflected in the DOM as it is here only
-         // for directive matching purposes
-         expect(spanEl.hasAttribute('test')).toBe(false);
-         expect(spanEl.hasAttribute('prop1')).toBe(false);
-         expect(spanEl.hasAttribute('prop2')).toBe(false);
-         expect(spanEl.getAttribute('class')).toBe('fade');
-         expect(testDir.testValue).toBe(false);
-       });
+    it('should not accidentally set inputs from attributes extracted from bindings / outputs', () => {
+      @Directive({selector: '[test]'})
+      class TestDir {
+        @Input() prop1: boolean | undefined;
+        @Input() prop2: boolean | undefined;
+        testValue: boolean | undefined;
+
+        /** Setter to assert that a binding is not invoked with stringified attribute value */
+        @Input()
+        set test(value: any) {
+          // Assert that the binding is processed correctly. The property should be set
+          // to a "false" boolean and never to the "false" string literal.
+          this.testValue = value;
+          if (value !== false) {
+            fail('Should only be called with a false Boolean value, got a non-falsy value');
+          }
+        }
+      }
+
+      TestBed.configureTestingModule({declarations: [TestComponent, TestDir]});
+      TestBed.overrideTemplate(
+        TestComponent,
+        `<span class="fade" [prop1]="true" [test]="false" [prop2]="true"></span>`,
+      );
+
+      const fixture = TestBed.createComponent(TestComponent);
+      const testDir = fixture.debugElement.query(By.directive(TestDir)).injector.get(TestDir);
+      const spanEl = fixture.nativeElement.children[0];
+      fixture.detectChanges();
+
+      // the "test" attribute should not be reflected in the DOM as it is here only
+      // for directive matching purposes
+      expect(spanEl.hasAttribute('test')).toBe(false);
+      expect(spanEl.hasAttribute('prop1')).toBe(false);
+      expect(spanEl.hasAttribute('prop2')).toBe(false);
+      expect(spanEl.getAttribute('class')).toBe('fade');
+      expect(testDir.testValue).toBe(false);
+    });
 
     it('should match directives on ng-template', () => {
       TestBed.configureTestingModule({declarations: [TestComponent, TestDirective]});
@@ -105,8 +117,9 @@ describe('directives', () => {
       const nodesWithDirective = fixture.debugElement.queryAllNodes(By.directive(TestDirective));
 
       expect(nodesWithDirective.length).toBe(1);
-      expect(nodesWithDirective[0].injector.get(TestDirective).templateRef instanceof TemplateRef)
-          .toBe(true);
+      expect(
+        nodesWithDirective[0].injector.get(TestDirective).templateRef instanceof TemplateRef,
+      ).toBe(true);
     });
 
     it('should match directives on ng-template created by * syntax', () => {
@@ -130,14 +143,16 @@ describe('directives', () => {
         template: `
           <ng-container *ngIf="visible" directiveA>
             <span>Some content</span>
-          </ng-container>`
+          </ng-container>`,
       })
       class MyComponent {
         visible = true;
       }
 
-      TestBed.configureTestingModule(
-          {declarations: [MyComponent, DirectiveA], imports: [CommonModule]});
+      TestBed.configureTestingModule({
+        declarations: [MyComponent, DirectiveA],
+        imports: [CommonModule],
+      });
       const fixture = TestBed.createComponent(MyComponent);
       fixture.detectChanges();
       const directiveA = fixture.debugElement.query(By.css('span')).injector.get(DirectiveA);
@@ -147,9 +162,12 @@ describe('directives', () => {
 
     it('should match directives on i18n-annotated attributes', () => {
       TestBed.configureTestingModule({declarations: [TestComponent, TitleDirective]});
-      TestBed.overrideTemplate(TestComponent, `
+      TestBed.overrideTemplate(
+        TestComponent,
+        `
         <div title="My title" i18n-title="Title translation description"></div>
-      `);
+      `,
+      );
 
       const fixture = TestBed.createComponent(TestComponent);
       const nodesWithDirective = fixture.debugElement.queryAllNodes(By.directive(TitleDirective));
@@ -159,9 +177,12 @@ describe('directives', () => {
 
     it('should match a mix of bound directives and classes', () => {
       TestBed.configureTestingModule({declarations: [TestComponent, TitleDirective]});
-      TestBed.overrideTemplate(TestComponent, `
+      TestBed.overrideTemplate(
+        TestComponent,
+        `
         <div class="one two" [id]="someId" [title]="title"></div>
-      `);
+      `,
+      );
 
       const fixture = TestBed.createComponent(TestComponent);
       const nodesWithDirective = fixture.debugElement.queryAllNodes(By.directive(TitleDirective));
@@ -171,42 +192,47 @@ describe('directives', () => {
 
     it('should match classes to directive selectors without case sensitivity', () => {
       @Directive({selector: '.Titledir'})
-      class TitleClassDirective {
-      }
+      class TitleClassDirective {}
 
       TestBed.configureTestingModule({declarations: [TestComponent, TitleClassDirective]});
-      TestBed.overrideTemplate(TestComponent, `
+      TestBed.overrideTemplate(
+        TestComponent,
+        `
         <div class="titleDir" [id]="someId"></div>
-      `);
+      `,
+      );
 
       const fixture = TestBed.createComponent(TestComponent);
-      const nodesWithDirective =
-          fixture.debugElement.queryAllNodes(By.directive(TitleClassDirective));
+      const nodesWithDirective = fixture.debugElement.queryAllNodes(
+        By.directive(TitleClassDirective),
+      );
 
       expect(nodesWithDirective.length).toBe(1);
     });
 
     it('should match class selectors on ng-template', () => {
       @Directive({selector: '.titleDir'})
-      class TitleClassDirective {
-      }
+      class TitleClassDirective {}
 
       TestBed.configureTestingModule({declarations: [TestComponent, TitleClassDirective]});
-      TestBed.overrideTemplate(TestComponent, `
+      TestBed.overrideTemplate(
+        TestComponent,
+        `
         <ng-template class="titleDir"></ng-template>
-      `);
+      `,
+      );
 
       const fixture = TestBed.createComponent(TestComponent);
-      const nodesWithDirective =
-          fixture.debugElement.queryAllNodes(By.directive(TitleClassDirective));
+      const nodesWithDirective = fixture.debugElement.queryAllNodes(
+        By.directive(TitleClassDirective),
+      );
 
       expect(nodesWithDirective.length).toBe(1);
     });
 
     it('should NOT match class selectors on ng-template created by * syntax', () => {
       @Directive({selector: '.titleDir'})
-      class TitleClassDirective {
-      }
+      class TitleClassDirective {}
 
       @Component({selector: 'test-cmp', template: `<div *ngIf="condition" class="titleDir"></div>`})
       class TestCmp {
@@ -217,23 +243,28 @@ describe('directives', () => {
 
       const fixture = TestBed.createComponent(TestCmp);
 
-      const initialNodesWithDirective =
-          fixture.debugElement.queryAllNodes(By.directive(TitleClassDirective));
+      const initialNodesWithDirective = fixture.debugElement.queryAllNodes(
+        By.directive(TitleClassDirective),
+      );
       expect(initialNodesWithDirective.length).toBe(0);
 
       fixture.componentInstance.condition = true;
       fixture.detectChanges();
 
-      const changedNodesWithDirective =
-          fixture.debugElement.queryAllNodes(By.directive(TitleClassDirective));
+      const changedNodesWithDirective = fixture.debugElement.queryAllNodes(
+        By.directive(TitleClassDirective),
+      );
       expect(changedNodesWithDirective.length).toBe(1);
     });
 
     it('should NOT match classes to directive selectors', () => {
       TestBed.configureTestingModule({declarations: [TestComponent, TitleDirective]});
-      TestBed.overrideTemplate(TestComponent, `
+      TestBed.overrideTemplate(
+        TestComponent,
+        `
         <div class="title" [id]="someId"></div>
-      `);
+      `,
+      );
 
       const fixture = TestBed.createComponent(TestComponent);
       const nodesWithDirective = fixture.debugElement.queryAllNodes(By.directive(TitleDirective));
@@ -243,17 +274,20 @@ describe('directives', () => {
 
     it('should match attributes to directive selectors without case sensitivity', () => {
       @Directive({selector: '[title=Titledir]'})
-      class TitleAttributeDirective {
-      }
+      class TitleAttributeDirective {}
 
       TestBed.configureTestingModule({declarations: [TestComponent, TitleAttributeDirective]});
-      TestBed.overrideTemplate(TestComponent, `
+      TestBed.overrideTemplate(
+        TestComponent,
+        `
         <div title="titleDir" [id]="someId"></div>
-      `);
+      `,
+      );
 
       const fixture = TestBed.createComponent(TestComponent);
-      const nodesWithDirective =
-          fixture.debugElement.queryAllNodes(By.directive(TitleAttributeDirective));
+      const nodesWithDirective = fixture.debugElement.queryAllNodes(
+        By.directive(TitleAttributeDirective),
+      );
 
       expect(nodesWithDirective.length).toBe(1);
     });
@@ -317,8 +351,7 @@ describe('directives', () => {
         selector: `my-comp`,
         template: `<svg dir><text dir></text></svg>`,
       })
-      class MyComp {
-      }
+      class MyComp {}
 
       TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
       const fixture = TestBed.createComponent(MyComp);
@@ -342,8 +375,7 @@ describe('directives', () => {
         selector: `my-comp`,
         template: `<svg dir><text dir></text></svg>`,
       })
-      class MyComp {
-      }
+      class MyComp {}
 
       TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
       const fixture = TestBed.createComponent(MyComp);
@@ -371,7 +403,7 @@ describe('directives', () => {
         // one `class`, one `attribute` and one other binding.
         template: `
           <div class="a" style="font-size: 10px;" [disabled]="true" [test]="test"></div>
-        `
+        `,
       })
       class MyComp {
         test = '';
@@ -437,31 +469,30 @@ describe('directives', () => {
       expect(dirInstance!.dir).toBe('Hello');
     });
 
-    it('should allow directive inputs (as an interpolated prop) on <ng-template> with structural directives',
-       () => {
-         let dirInstance: WithInput;
-         @Directive({selector: '[dir]'})
-         class WithInput {
-           constructor() {
-             dirInstance = this;
-           }
-           @Input() dir: string = '';
-         }
-
-         @Component({
-           selector: 'my-app',
-           template: '<ng-template *ngIf="true" dir="{{ message }}"></ng-template>',
-         })
-         class TestComp {
-           message = 'Hello';
-         }
-
-         TestBed.configureTestingModule({declarations: [TestComp, WithInput]});
-         const fixture = TestBed.createComponent(TestComp);
-         fixture.detectChanges();
-
-         expect(dirInstance!.dir).toBe('Hello');
-       });
+    it('should allow directive inputs (as an interpolated prop) on <ng-template> with structural directives', () => {
+      let dirInstance: WithInput;
+      @Directive({selector: '[dir]'})
+      class WithInput {
+        constructor() {
+          dirInstance = this;
+        }
+        @Input() dir: string = '';
+      }
+
+      @Component({
+        selector: 'my-app',
+        template: '<ng-template *ngIf="true" dir="{{ message }}"></ng-template>',
+      })
+      class TestComp {
+        message = 'Hello';
+      }
+
+      TestBed.configureTestingModule({declarations: [TestComp, WithInput]});
+      const fixture = TestBed.createComponent(TestComp);
+      fixture.detectChanges();
+
+      expect(dirInstance!.dir).toBe('Hello');
+    });
 
     it('should not set structural directive inputs from static element attrs', () => {
       const dirInstances: StructuralDir[] = [];
@@ -553,8 +584,8 @@ describe('directives', () => {
     it('should allow directive inputs specified using the object literal syntax in @Input', () => {
       @Directive({selector: '[dir]'})
       class Dir {
-        @Input() plainInput: number|undefined;
-        @Input({alias: 'alias'}) aliasedInput: number|undefined;
+        @Input() plainInput: number | undefined;
+        @Input({alias: 'alias'}) aliasedInput: number | undefined;
       }
 
       @Component({template: '<div dir [plainInput]="plainValue" [alias]="aliasedValue"></div>'})
@@ -573,37 +604,36 @@ describe('directives', () => {
       expect(dirInstance.aliasedInput).toBe(aliasedValue);
     });
 
-    it('should allow directive inputs specified using the object literal syntax in the `inputs` array',
-       () => {
-         @Directive({
-           selector: '[dir]',
-           inputs: [{name: 'plainInput'}, {name: 'aliasedInput', alias: 'alias'}]
-         })
-         class Dir {
-           plainInput: number|undefined;
-           aliasedInput: number|undefined;
-         }
-
-         @Component({template: '<div dir [plainInput]="plainValue" [alias]="aliasedValue"></div>'})
-         class App {
-           @ViewChild(Dir) dirInstance!: Dir;
-           plainValue = 123;
-           aliasedValue = 321;
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Dir]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         const {dirInstance, plainValue, aliasedValue} = fixture.componentInstance;
-
-         expect(dirInstance.plainInput).toBe(plainValue);
-         expect(dirInstance.aliasedInput).toBe(aliasedValue);
-       });
+    it('should allow directive inputs specified using the object literal syntax in the `inputs` array', () => {
+      @Directive({
+        selector: '[dir]',
+        inputs: [{name: 'plainInput'}, {name: 'aliasedInput', alias: 'alias'}],
+      })
+      class Dir {
+        plainInput: number | undefined;
+        aliasedInput: number | undefined;
+      }
+
+      @Component({template: '<div dir [plainInput]="plainValue" [alias]="aliasedValue"></div>'})
+      class App {
+        @ViewChild(Dir) dirInstance!: Dir;
+        plainValue = 123;
+        aliasedValue = 321;
+      }
+
+      TestBed.configureTestingModule({declarations: [App, Dir]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      const {dirInstance, plainValue, aliasedValue} = fixture.componentInstance;
+
+      expect(dirInstance.plainInput).toBe(plainValue);
+      expect(dirInstance.aliasedInput).toBe(aliasedValue);
+    });
 
     it('should transform incoming input values', () => {
       @Directive({selector: '[dir]'})
       class Dir {
-        @Input({transform: (value: string) => value ? 1 : 0}) value = -1;
+        @Input({transform: (value: string) => (value ? 1 : 0)}) value = -1;
       }
 
       @Component({template: '<div dir [value]="assignedValue"></div>'})
@@ -627,7 +657,7 @@ describe('directives', () => {
     it('should transform incoming input values when declared through the `inputs` array', () => {
       @Directive({
         selector: '[dir]',
-        inputs: [{name: 'value', transform: (value: string) => value ? 1 : 0}]
+        inputs: [{name: 'value', transform: (value: string) => (value ? 1 : 0)}],
       })
       class Dir {
         value = -1;
@@ -654,7 +684,7 @@ describe('directives', () => {
     it('should transform incoming static input values', () => {
       @Directive({selector: '[dir]'})
       class Dir {
-        @Input({transform: (value: string) => value ? 1 : 0}) value = -1;
+        @Input({transform: (value: string) => (value ? 1 : 0)}) value = -1;
       }
 
       @Component({template: '<div dir value="staticValue"></div>'})
@@ -672,7 +702,7 @@ describe('directives', () => {
     it('should transform incoming values for aliased inputs', () => {
       @Directive({selector: '[dir]'})
       class Dir {
-        @Input({alias: 'valueAlias', transform: (value: string) => value ? 1 : 0}) value = -1;
+        @Input({alias: 'valueAlias', transform: (value: string) => (value ? 1 : 0)}) value = -1;
       }
 
       @Component({template: '<div dir [valueAlias]="assignedValue"></div>'})
@@ -696,12 +726,11 @@ describe('directives', () => {
     it('should transform incoming inherited input values', () => {
       @Directive()
       class Parent {
-        @Input({transform: (value: string) => value ? 1 : 0}) value = -1;
+        @Input({transform: (value: string) => (value ? 1 : 0)}) value = -1;
       }
 
       @Directive({selector: '[dir]'})
-      class Dir extends Parent {
-      }
+      class Dir extends Parent {}
 
       @Component({template: '<div dir [value]="assignedValue"></div>'})
       class TestComp {
@@ -724,15 +753,14 @@ describe('directives', () => {
     it('should transform aliased inputs coming from host directives', () => {
       @Directive({standalone: true})
       class HostDir {
-        @Input({transform: (value: string) => value ? 1 : 0}) value = -1;
+        @Input({transform: (value: string) => (value ? 1 : 0)}) value = -1;
       }
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: HostDir, inputs: ['value: valueAlias']}]
+        hostDirectives: [{directive: HostDir, inputs: ['value: valueAlias']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<div dir [valueAlias]="assignedValue"></div>'})
       class TestComp {
@@ -757,7 +785,7 @@ describe('directives', () => {
 
       @Directive({selector: '[dir]'})
       class Dir implements OnChanges {
-        @Input({transform: (value: string) => value ? 1 : 0}) value = -1;
+        @Input({transform: (value: string) => (value ? 1 : 0)}) value = -1;
 
         ngOnChanges(changes: SimpleChanges): void {
           if (changes['value']) {
@@ -776,20 +804,21 @@ describe('directives', () => {
       const fixture = TestBed.createComponent(TestComp);
       fixture.detectChanges();
 
-      expect(trackedChanges).toEqual([jasmine.objectContaining(
-          {previousValue: undefined, currentValue: 0})]);
+      expect(trackedChanges).toEqual([
+        jasmine.objectContaining({previousValue: undefined, currentValue: 0}),
+      ]);
 
       fixture.componentInstance.assignedValue = 'hello';
       fixture.detectChanges();
 
       expect(trackedChanges).toEqual([
         jasmine.objectContaining({previousValue: undefined, currentValue: 0}),
-        jasmine.objectContaining({previousValue: 0, currentValue: 1})
+        jasmine.objectContaining({previousValue: 0, currentValue: 1}),
       ]);
     });
 
     it('should invoke the transform function with the directive instance as the context', () => {
-      let instance: Dir|undefined;
+      let instance: Dir | undefined;
 
       function transform(this: Dir, _value: string) {
         instance = this;
@@ -816,7 +845,7 @@ describe('directives', () => {
     it('should transform value assigned using setInput', () => {
       @Component({selector: 'comp', template: ''})
       class Comp {
-        @Input({transform: (value: string) => value ? 1 : 0}) value = -1;
+        @Input({transform: (value: string) => (value ? 1 : 0)}) value = -1;
       }
 
       @Component({template: '<ng-container #location/>'})
@@ -847,7 +876,7 @@ describe('directives', () => {
     it('should allow outputs of directive on ng-template', () => {
       @Component({template: `<ng-template (out)="value = true"></ng-template>`})
       class TestComp {
-        @ViewChild(TestDir, {static: true}) testDir: TestDir|undefined;
+        @ViewChild(TestDir, {static: true}) testDir: TestDir | undefined;
         value = false;
       }
 
@@ -868,7 +897,7 @@ describe('directives', () => {
         template: `
           <ng-container (out)="value = true">
             <span>Hello</span>
-          </ng-container>`
+          </ng-container>`,
       })
       class TestComp {
         value = false;
@@ -900,7 +929,26 @@ describe('directives', () => {
 
     it('should set both the div attribute and the directive input for `title="value"`', () => {
       @Component({template: `<div dir-with-title title="a"></div>`})
+      class App {}
+
+      TestBed.configureTestingModule({
+        declarations: [App, DirWithTitle],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      const dirWithTitle = fixture.debugElement
+        .query(By.directive(DirWithTitle))
+        .injector.get(DirWithTitle);
+      const div = fixture.nativeElement.querySelector('div');
+      expect(dirWithTitle.title).toBe('a');
+      expect(div.getAttribute('title')).toBe('a');
+    });
+
+    it('should set the directive input only, shadowing the title property of the div, for `[title]="value"`', () => {
+      @Component({template: `<div dir-with-title [title]="value"></div>`})
       class App {
+        value = 'a';
       }
 
       TestBed.configureTestingModule({
@@ -909,224 +957,204 @@ describe('directives', () => {
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
-      const dirWithTitle =
-          fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
+      const dirWithTitle = fixture.debugElement
+        .query(By.directive(DirWithTitle))
+        .injector.get(DirWithTitle);
       const div = fixture.nativeElement.querySelector('div');
+      // We are checking the property here, not the attribute, because in the case of
+      // [key]="value" we are always setting the property of the instance, and actually setting
+      // the attribute is just a side-effect of the DOM implementation.
       expect(dirWithTitle.title).toBe('a');
+      expect(div.title).toBe('');
+    });
+
+    it('should allow setting directive `title` input with `[title]="value"` and a "attr.title" attribute with `attr.title="test"`', () => {
+      @Component({template: `<div dir-with-title [title]="value" attr.title="test"></div>`})
+      class App {
+        value = 'a';
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [App, DirWithTitle],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      const dirWithTitle = fixture.debugElement
+        .query(By.directive(DirWithTitle))
+        .injector.get(DirWithTitle);
+      const div = fixture.nativeElement.querySelector('div');
+      expect(dirWithTitle.title).toBe('a');
+      expect(div.getAttribute('attr.title')).toBe('test');
+      expect(div.title).toBe('');
+    });
+
+    it('should allow setting directive `title` input with `[title]="value1"` and attribute with `[attr.title]="value2"`', () => {
+      @Component({template: `<div dir-with-title [title]="value1" [attr.title]="value2"></div>`})
+      class App {
+        value1 = 'a';
+        value2 = 'b';
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [App, DirWithTitle],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      const dirWithTitle = fixture.debugElement
+        .query(By.directive(DirWithTitle))
+        .injector.get(DirWithTitle);
+      const div = fixture.nativeElement.querySelector('div');
+      expect(dirWithTitle.title).toBe('a');
+      expect(div.getAttribute('title')).toBe('b');
+    });
+
+    it('should allow setting directive `title` input with `[title]="value1"` and attribute with `attr.title="{{value2}}"`', () => {
+      @Component({template: `<div dir-with-title [title]="value1" attr.title="{{value2}}"></div>`})
+      class App {
+        value1 = 'a';
+        value2 = 'b';
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [App, DirWithTitle],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      const dirWithTitle = fixture.debugElement
+        .query(By.directive(DirWithTitle))
+        .injector.get(DirWithTitle);
+      const div = fixture.nativeElement.querySelector('div');
+      expect(dirWithTitle.title).toBe('a');
+      expect(div.getAttribute('title')).toBe('b');
+    });
+
+    it('should allow setting directive `title` input with `title="{{value}}"` and a "attr.title" attribute with `attr.title="test"`', () => {
+      @Component({template: `<div dir-with-title title="{{value}}" attr.title="test"></div>`})
+      class App {
+        value = 'a';
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [App, DirWithTitle],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      const dirWithTitle = fixture.debugElement
+        .query(By.directive(DirWithTitle))
+        .injector.get(DirWithTitle);
+      const div = fixture.nativeElement.querySelector('div');
+      expect(dirWithTitle.title).toBe('a');
+      expect(div.getAttribute('attr.title')).toBe('test');
+      expect(div.title).toBe('');
+    });
+
+    it('should allow setting directive `title` input with `title="{{value1}}"` and attribute with `[attr.title]="value2"`', () => {
+      @Component({template: `<div dir-with-title title="{{value1}}" [attr.title]="value2"></div>`})
+      class App {
+        value1 = 'a';
+        value2 = 'b';
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [App, DirWithTitle],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      const dirWithTitle = fixture.debugElement
+        .query(By.directive(DirWithTitle))
+        .injector.get(DirWithTitle);
+      const div = fixture.nativeElement.querySelector('div');
+      expect(dirWithTitle.title).toBe('a');
+      expect(div.getAttribute('title')).toBe('b');
+    });
+
+    it('should allow setting directive `title` input with `title="{{value1}}"` and attribute with `attr.title="{{value2}}"`', () => {
+      @Component({
+        template: `<div dir-with-title title="{{value1}}" attr.title="{{value2}}"></div>`,
+      })
+      class App {
+        value1 = 'a';
+        value2 = 'b';
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [App, DirWithTitle],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      const dirWithTitle = fixture.debugElement
+        .query(By.directive(DirWithTitle))
+        .injector.get(DirWithTitle);
+      const div = fixture.nativeElement.querySelector('div');
+      expect(dirWithTitle.title).toBe('a');
+      expect(div.getAttribute('title')).toBe('b');
+    });
+
+    it('should set the directive input only, shadowing the title property on the div, for `title="{{value}}"`', () => {
+      @Component({template: `<div dir-with-title title="{{value}}"></div>`})
+      class App {
+        value = 'a';
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [App, DirWithTitle],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      const dirWithTitle = fixture.debugElement
+        .query(By.directive(DirWithTitle))
+        .injector.get(DirWithTitle);
+      const div = fixture.nativeElement.querySelector('div');
+      expect(dirWithTitle.title).toBe('a');
+      expect(div.title).toBe('');
+    });
+
+    it('should set the title attribute only, not directive input, for `attr.title="{{value}}"`', () => {
+      @Component({template: `<div dir-with-title attr.title="{{value}}"></div>`})
+      class App {
+        value = 'a';
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [App, DirWithTitle],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      const dirWithTitle = fixture.debugElement
+        .query(By.directive(DirWithTitle))
+        .injector.get(DirWithTitle);
+      const div = fixture.nativeElement.querySelector('div');
+      expect(dirWithTitle.title).toBe('');
       expect(div.getAttribute('title')).toBe('a');
     });
 
-    it('should set the directive input only, shadowing the title property of the div, for `[title]="value"`',
-       () => {
-         @Component({template: `<div dir-with-title [title]="value"></div>`})
-         class App {
-           value = 'a';
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [App, DirWithTitle],
-         });
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         const dirWithTitle =
-             fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
-         const div = fixture.nativeElement.querySelector('div');
-         // We are checking the property here, not the attribute, because in the case of
-         // [key]="value" we are always setting the property of the instance, and actually setting
-         // the attribute is just a side-effect of the DOM implementation.
-         expect(dirWithTitle.title).toBe('a');
-         expect(div.title).toBe('');
-       });
-
-    it('should allow setting directive `title` input with `[title]="value"` and a "attr.title" attribute with `attr.title="test"`',
-       () => {
-         @Component({template: `<div dir-with-title [title]="value" attr.title="test"></div>`})
-         class App {
-           value = 'a';
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [App, DirWithTitle],
-         });
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         const dirWithTitle =
-             fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
-         const div = fixture.nativeElement.querySelector('div');
-         expect(dirWithTitle.title).toBe('a');
-         expect(div.getAttribute('attr.title')).toBe('test');
-         expect(div.title).toBe('');
-       });
-
-    it('should allow setting directive `title` input with `[title]="value1"` and attribute with `[attr.title]="value2"`',
-       () => {
-         @Component({template: `<div dir-with-title [title]="value1" [attr.title]="value2"></div>`})
-         class App {
-           value1 = 'a';
-           value2 = 'b';
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [App, DirWithTitle],
-         });
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         const dirWithTitle =
-             fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
-         const div = fixture.nativeElement.querySelector('div');
-         expect(dirWithTitle.title).toBe('a');
-         expect(div.getAttribute('title')).toBe('b');
-       });
-
-    it('should allow setting directive `title` input with `[title]="value1"` and attribute with `attr.title="{{value2}}"`',
-       () => {
-         @Component(
-             {template: `<div dir-with-title [title]="value1" attr.title="{{value2}}"></div>`})
-         class App {
-           value1 = 'a';
-           value2 = 'b';
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [App, DirWithTitle],
-         });
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         const dirWithTitle =
-             fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
-         const div = fixture.nativeElement.querySelector('div');
-         expect(dirWithTitle.title).toBe('a');
-         expect(div.getAttribute('title')).toBe('b');
-       });
-
-    it('should allow setting directive `title` input with `title="{{value}}"` and a "attr.title" attribute with `attr.title="test"`',
-       () => {
-         @Component({template: `<div dir-with-title title="{{value}}" attr.title="test"></div>`})
-         class App {
-           value = 'a';
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [App, DirWithTitle],
-         });
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         const dirWithTitle =
-             fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
-         const div = fixture.nativeElement.querySelector('div');
-         expect(dirWithTitle.title).toBe('a');
-         expect(div.getAttribute('attr.title')).toBe('test');
-         expect(div.title).toBe('');
-       });
-
-    it('should allow setting directive `title` input with `title="{{value1}}"` and attribute with `[attr.title]="value2"`',
-       () => {
-         @Component(
-             {template: `<div dir-with-title title="{{value1}}" [attr.title]="value2"></div>`})
-         class App {
-           value1 = 'a';
-           value2 = 'b';
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [App, DirWithTitle],
-         });
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         const dirWithTitle =
-             fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
-         const div = fixture.nativeElement.querySelector('div');
-         expect(dirWithTitle.title).toBe('a');
-         expect(div.getAttribute('title')).toBe('b');
-       });
-
-    it('should allow setting directive `title` input with `title="{{value1}}"` and attribute with `attr.title="{{value2}}"`',
-       () => {
-         @Component(
-             {template: `<div dir-with-title title="{{value1}}" attr.title="{{value2}}"></div>`})
-         class App {
-           value1 = 'a';
-           value2 = 'b';
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [App, DirWithTitle],
-         });
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         const dirWithTitle =
-             fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
-         const div = fixture.nativeElement.querySelector('div');
-         expect(dirWithTitle.title).toBe('a');
-         expect(div.getAttribute('title')).toBe('b');
-       });
-
-    it('should set the directive input only, shadowing the title property on the div, for `title="{{value}}"`',
-       () => {
-         @Component({template: `<div dir-with-title title="{{value}}"></div>`})
-         class App {
-           value = 'a';
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [App, DirWithTitle],
-         });
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         const dirWithTitle =
-             fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
-         const div = fixture.nativeElement.querySelector('div');
-         expect(dirWithTitle.title).toBe('a');
-         expect(div.title).toBe('');
-       });
-
-    it('should set the title attribute only, not directive input, for `attr.title="{{value}}"`',
-       () => {
-         @Component({template: `<div dir-with-title attr.title="{{value}}"></div>`})
-         class App {
-           value = 'a';
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [App, DirWithTitle],
-         });
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         const dirWithTitle =
-             fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
-         const div = fixture.nativeElement.querySelector('div');
-         expect(dirWithTitle.title).toBe('');
-         expect(div.getAttribute('title')).toBe('a');
-       });
-
-    it('should set the title attribute only, not directive input, for `[attr.title]="value"`',
-       () => {
-         @Component({template: `<div dir-with-title [attr.title]="value"></div>`})
-         class App {
-           value = 'a';
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [App, DirWithTitle],
-         });
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         const dirWithTitle =
-             fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
-         const div = fixture.nativeElement.querySelector('div');
-         expect(dirWithTitle.title).toBe('');
-         expect(div.getAttribute('title')).toBe('a');
-       });
+    it('should set the title attribute only, not directive input, for `[attr.title]="value"`', () => {
+      @Component({template: `<div dir-with-title [attr.title]="value"></div>`})
+      class App {
+        value = 'a';
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [App, DirWithTitle],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      const dirWithTitle = fixture.debugElement
+        .query(By.directive(DirWithTitle))
+        .injector.get(DirWithTitle);
+      const div = fixture.nativeElement.querySelector('div');
+      expect(dirWithTitle.title).toBe('');
+      expect(div.getAttribute('title')).toBe('a');
+    });
   });
 
   describe('directives with the same selector', () => {
@@ -1146,8 +1174,7 @@ describe('directives', () => {
         declarations: [DirectiveA],
         exports: [DirectiveA],
       })
-      class ModuleA {
-      }
+      class ModuleA {}
 
       @Directive({selector: '[dir]'})
       class DirectiveB {
@@ -1163,8 +1190,7 @@ describe('directives', () => {
         selector: 'app',
         template: '<div dir></div>',
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         imports: [ModuleA],
@@ -1174,8 +1200,10 @@ describe('directives', () => {
       fixture.detectChanges();
 
       expect(log).toEqual([
-        'DirectiveA.constructor', 'DirectiveB.constructor', 'DirectiveA.ngOnInit',
-        'DirectiveB.ngOnInit'
+        'DirectiveA.constructor',
+        'DirectiveB.constructor',
+        'DirectiveA.ngOnInit',
+        'DirectiveB.ngOnInit',
       ]);
     });
 
@@ -1195,8 +1223,7 @@ describe('directives', () => {
         declarations: [DirectiveA],
         exports: [DirectiveA],
       })
-      class ModuleA {
-      }
+      class ModuleA {}
 
       @Directive({selector: '[dir]'})
       class DirectiveB {
@@ -1212,15 +1239,13 @@ describe('directives', () => {
         declarations: [DirectiveB],
         exports: [DirectiveB],
       })
-      class ModuleB {
-      }
+      class ModuleB {}
 
       @Component({
         selector: 'app',
         template: '<div dir></div>',
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         imports: [ModuleA, ModuleB],
@@ -1230,8 +1255,10 @@ describe('directives', () => {
       fixture.detectChanges();
 
       expect(log).toEqual([
-        'DirectiveA.constructor', 'DirectiveB.constructor', 'DirectiveA.ngOnInit',
-        'DirectiveB.ngOnInit'
+        'DirectiveA.constructor',
+        'DirectiveB.constructor',
+        'DirectiveA.ngOnInit',
+        'DirectiveB.ngOnInit',
       ]);
     });
   });
diff --git a/packages/core/test/acceptance/discover_utils_spec.ts b/packages/core/test/acceptance/discover_utils_spec.ts
index 9da34723999fd..db25dc16dcbdb 100644
--- a/packages/core/test/acceptance/discover_utils_spec.ts
+++ b/packages/core/test/acceptance/discover_utils_spec.ts
@@ -6,7 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {CommonModule} from '@angular/common';
-import {ChangeDetectionStrategy, Component, Directive, InjectionToken, Input, Output, ViewChild, ViewEncapsulation} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Directive,
+  InjectionToken,
+  Input,
+  Output,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
 import {EventEmitter} from '@angular/core/src/event_emitter';
 import {isLView} from '@angular/core/src/render3/interfaces/type_checks';
 import {CONTEXT} from '@angular/core/src/render3/interfaces/view';
@@ -14,13 +23,26 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {getLContext} from '../../src/render3/context_discovery';
 import {getHostElement} from '../../src/render3/index';
-import {ComponentDebugMetadata, getComponent, getComponentLView, getContext, getDirectiveMetadata, getDirectives, getInjectionTokens, getInjector, getListeners, getLocalRefs, getOwningComponent, getRootComponents} from '../../src/render3/util/discovery_utils';
+import {
+  ComponentDebugMetadata,
+  getComponent,
+  getComponentLView,
+  getContext,
+  getDirectiveMetadata,
+  getDirectives,
+  getInjectionTokens,
+  getInjector,
+  getListeners,
+  getLocalRefs,
+  getOwningComponent,
+  getRootComponents,
+} from '../../src/render3/util/discovery_utils';
 
 describe('discovery utils', () => {
   let fixture: ComponentFixture<MyApp>;
   let myApp: MyApp;
   let dirA: DirectiveA[];
-  let childComponent: (DirectiveA|Child)[];
+  let childComponent: (DirectiveA | Child)[];
   let child: NodeListOf<Element>;
   let span: NodeListOf<Element>;
   let div: NodeListOf<Element>;
@@ -34,7 +56,7 @@ describe('discovery utils', () => {
     TestBed.configureTestingModule({
       imports: [CommonModule],
       declarations: [MyApp, DirectiveA, Child],
-      providers: [{provide: String, useValue: 'Module'}]
+      providers: [{provide: String, useValue: 'Module'}],
     });
     fixture = TestBed.createComponent(MyApp);
     fixture.detectChanges();
@@ -44,8 +66,11 @@ describe('discovery utils', () => {
     p = fixture.nativeElement.querySelectorAll('p');
   });
 
-  @Component(
-      {selector: 'child', template: '<p></p>', providers: [{provide: String, useValue: 'Child'}]})
+  @Component({
+    selector: 'child',
+    template: '<p></p>',
+    providers: [{provide: String, useValue: 'Child'}],
+  })
   class Child {
     constructor() {
       childComponent.push(this);
@@ -71,7 +96,7 @@ describe('discovery utils', () => {
       <child dirA *ngIf="conditionalChildVisible"></child>
       <ng-container><p></p></ng-container>
       <b *ngIf="visible">Bold</b>
-    `
+    `,
   })
   class MyApp {
     text: string = 'INIT';
@@ -157,7 +182,7 @@ describe('discovery utils', () => {
       expect(getHostElement(dirA[1])).toEqual(child[1]);
     });
     it('should throw on unknown target', () => {
-      expect(() => getHostElement({})).toThrowError();  //
+      expect(() => getHostElement({})).toThrowError(); //
     });
     it('should return element for destroyed node', () => {
       expect(getHostElement(span[0])).toEqual(span[0]);
@@ -331,18 +356,19 @@ describe('discovery utils', () => {
     });
 
     it('should work on templates', () => {
-      const templateComment = Array.from((fixture.nativeElement as HTMLElement).childNodes)
-                                  .find((node: ChildNode) => node.nodeType === Node.COMMENT_NODE)!;
+      const templateComment = Array.from((fixture.nativeElement as HTMLElement).childNodes).find(
+        (node: ChildNode) => node.nodeType === Node.COMMENT_NODE,
+      )!;
       const lContext = getLContext(templateComment)!;
       expect(lContext).toBeDefined();
       expect(lContext.native as any).toBe(templateComment);
     });
 
     it('should work on ng-container', () => {
-      const ngContainerComment = Array.from((fixture.nativeElement as HTMLElement).childNodes)
-                                     .find(
-                                         (node: ChildNode) => node.nodeType === Node.COMMENT_NODE &&
-                                             node.textContent === `ng-container`)!;
+      const ngContainerComment = Array.from((fixture.nativeElement as HTMLElement).childNodes).find(
+        (node: ChildNode) =>
+          node.nodeType === Node.COMMENT_NODE && node.textContent === `ng-container`,
+      )!;
       const lContext = getLContext(ngContainerComment)!;
       expect(lContext).toBeDefined();
       expect(lContext.native as any).toBe(ngContainerComment);
@@ -354,8 +380,9 @@ describe('discovery utils', () => {
       const metadata = getDirectiveMetadata(myApp);
       expect(metadata!.inputs).toEqual({a: 'b'});
       expect(metadata!.outputs).toEqual({c: 'd'});
-      expect((metadata as ComponentDebugMetadata).changeDetection)
-          .toBe(ChangeDetectionStrategy.Default);
+      expect((metadata as ComponentDebugMetadata).changeDetection).toBe(
+        ChangeDetectionStrategy.Default,
+      );
       expect((metadata as ComponentDebugMetadata).encapsulation).toBe(ViewEncapsulation.None);
     });
 
@@ -371,12 +398,10 @@ describe('discovery utils deprecated', () => {
   describe('getRootComponents()', () => {
     it('should return a list of the root components of the application from an element', () => {
       @Component({selector: 'inner-comp', template: '<div></div>'})
-      class InnerComp {
-      }
+      class InnerComp {}
 
       @Component({selector: 'comp', template: '<inner-comp></inner-comp>'})
-      class Comp {
-      }
+      class Comp {}
 
       TestBed.configureTestingModule({declarations: [Comp, InnerComp]});
       const fixture = TestBed.createComponent(Comp);
@@ -396,23 +421,20 @@ describe('discovery utils deprecated', () => {
   describe('getDirectives()', () => {
     it('should return a list of the directives that are on the given element', () => {
       @Directive({selector: '[my-dir-1]'})
-      class MyDir1 {
-      }
+      class MyDir1 {}
 
       @Directive({selector: '[my-dir-2]'})
-      class MyDir2 {
-      }
+      class MyDir2 {}
 
       @Directive({selector: '[my-dir-3]'})
-      class MyDir3 {
-      }
+      class MyDir3 {}
 
       @Component({
         selector: 'comp',
         template: `
           <div my-dir-1 my-dir-2></div>
           <div my-dir-3></div>
-        `
+        `,
       })
       class Comp {
         @ViewChild(MyDir1) myDir1Instance!: MyDir1;
@@ -451,8 +473,7 @@ describe('discovery utils deprecated', () => {
   describe('getInjector', () => {
     it('should return an injector that can return directive instances', () => {
       @Component({template: ''})
-      class Comp {
-      }
+      class Comp {}
 
       TestBed.configureTestingModule({declarations: [Comp]});
       const fixture = TestBed.createComponent(Comp);
@@ -462,14 +483,15 @@ describe('discovery utils deprecated', () => {
 
     it('should return an injector that falls-back to a module injector', () => {
       @Component({template: ''})
-      class Comp {
-      }
+      class Comp {}
 
       class TestToken {}
       const token = new InjectionToken<TestToken>('test token');
 
-      TestBed.configureTestingModule(
-          {declarations: [Comp], providers: [{provide: token, useValue: new TestToken()}]});
+      TestBed.configureTestingModule({
+        declarations: [Comp],
+        providers: [{provide: token, useValue: new TestToken()}],
+      });
       const fixture = TestBed.createComponent(Comp);
       const nodeInjector = getInjector(fixture.nativeElement);
       expect(nodeInjector.get(token)).toEqual(jasmine.any(TestToken));
@@ -479,12 +501,10 @@ describe('discovery utils deprecated', () => {
   describe('getLocalRefs', () => {
     it('should return a map of local refs for an element', () => {
       @Directive({selector: '[myDir]', exportAs: 'myDir'})
-      class MyDir {
-      }
+      class MyDir {}
 
       @Component({template: '<div myDir #elRef #dirRef="myDir"></div>'})
-      class Comp {
-      }
+      class Comp {}
 
       TestBed.configureTestingModule({declarations: [Comp, MyDir]});
       const fixture = TestBed.createComponent(Comp);
diff --git a/packages/core/test/acceptance/embedded_views_spec.ts b/packages/core/test/acceptance/embedded_views_spec.ts
index bd46ccf2427a8..b08c8db0b305f 100644
--- a/packages/core/test/acceptance/embedded_views_spec.ts
+++ b/packages/core/test/acceptance/embedded_views_spec.ts
@@ -18,7 +18,7 @@ describe('embedded views', () => {
       template: 'Child',
     })
     class ChildCmp {
-      @Input() addItemFn: Function|undefined;
+      @Input() addItemFn: Function | undefined;
     }
 
     @Component({
@@ -45,8 +45,7 @@ describe('embedded views', () => {
 
   it('should resolve template input variables through the implicit receiver', () => {
     @Component({template: `<ng-template let-a [ngIf]="true">{{this.a}}</ng-template>`})
-    class TestCmp {
-    }
+    class TestCmp {}
 
     TestBed.configureTestingModule({declarations: [TestCmp]});
     const fixture = TestBed.createComponent(TestCmp);
@@ -60,7 +59,7 @@ describe('embedded views', () => {
       template: `
         <ng-template [ngIf]="true">
           <ng-template [ngIf]="true">{{this.myProp}}{{myProp}}</ng-template>
-        </ng-template>`
+        </ng-template>`,
     })
     class TestCmp {
       myProp = 'Hello';
diff --git a/packages/core/test/acceptance/env_injector_standalone_spec.ts b/packages/core/test/acceptance/env_injector_standalone_spec.ts
index 03bb175529100..cbca6df6d119f 100644
--- a/packages/core/test/acceptance/env_injector_standalone_spec.ts
+++ b/packages/core/test/acceptance/env_injector_standalone_spec.ts
@@ -6,7 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, createEnvironmentInjector, EnvironmentInjector, importProvidersFrom, InjectionToken, NgModule} from '@angular/core';
+import {
+  Component,
+  createEnvironmentInjector,
+  EnvironmentInjector,
+  importProvidersFrom,
+  InjectionToken,
+  NgModule,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 import {internalImportProvidersFrom} from '../../src/di/provider_collection';
@@ -16,16 +23,16 @@ describe('environment injector and standalone components', () => {
     class ModuleService {}
 
     @NgModule({providers: [ModuleService]})
-    class Module {
-    }
+    class Module {}
 
     @Component({standalone: true, imports: [Module]})
-    class StandaloneComponent {
-    }
+    class StandaloneComponent {}
 
     const parentEnvInjector = TestBed.inject(EnvironmentInjector);
     const envInjector = createEnvironmentInjector(
-        internalImportProvidersFrom(false, StandaloneComponent), parentEnvInjector);
+      internalImportProvidersFrom(false, StandaloneComponent),
+      parentEnvInjector,
+    );
     expect(envInjector.get(ModuleService)).toBeInstanceOf(ModuleService);
   });
 
@@ -33,20 +40,19 @@ describe('environment injector and standalone components', () => {
     class ModuleService {}
 
     @NgModule({providers: [ModuleService]})
-    class Module {
-    }
+    class Module {}
 
     @Component({standalone: true, imports: [Module]})
-    class StandaloneComponent {
-    }
+    class StandaloneComponent {}
 
     @NgModule({imports: [StandaloneComponent], exports: [StandaloneComponent]})
-    class AppModule {
-    }
+    class AppModule {}
 
     const parentEnvInjector = TestBed.inject(EnvironmentInjector);
-    const envInjector =
-        createEnvironmentInjector([importProvidersFrom(AppModule)], parentEnvInjector);
+    const envInjector = createEnvironmentInjector(
+      [importProvidersFrom(AppModule)],
+      parentEnvInjector,
+    );
     expect(envInjector.get(ModuleService)).toBeInstanceOf(ModuleService);
   });
 
@@ -54,27 +60,25 @@ describe('environment injector and standalone components', () => {
     class ModuleService {}
 
     @NgModule({providers: [{provide: ModuleService, useClass: ModuleService, multi: true}]})
-    class Module {
-    }
+    class Module {}
 
     @Component({standalone: true, imports: [Module]})
-    class StandaloneComponent1 {
-    }
+    class StandaloneComponent1 {}
 
     @Component({standalone: true, imports: [Module]})
-    class StandaloneComponent2 {
-    }
+    class StandaloneComponent2 {}
 
     @NgModule({
       imports: [StandaloneComponent1, StandaloneComponent2],
-      exports: [StandaloneComponent1, StandaloneComponent2]
+      exports: [StandaloneComponent1, StandaloneComponent2],
     })
-    class AppModule {
-    }
+    class AppModule {}
 
     const parentEnvInjector = TestBed.inject(EnvironmentInjector);
-    const envInjector =
-        createEnvironmentInjector([importProvidersFrom(AppModule)], parentEnvInjector);
+    const envInjector = createEnvironmentInjector(
+      [importProvidersFrom(AppModule)],
+      parentEnvInjector,
+    );
     const services = envInjector.get(ModuleService) as ModuleService[];
 
     expect(services.length).toBe(1);
@@ -87,14 +91,15 @@ describe('environment injector and standalone components', () => {
     const MULTI = new InjectionToken('D');
 
     const providers = [
-      {provide: MULTI, useValue: 1, multi: true}, {provide: A, useValue: 'A'},  //
+      {provide: MULTI, useValue: 1, multi: true},
+      {provide: A, useValue: 'A'}, //
       [
         {provide: B, useValue: 'B'},
         [
           {provide: C, useValue: 'C'},
           {provide: MULTI, useValue: 2, multi: true},
-        ]
-      ]
+        ],
+      ],
     ];
     const parentEnvInjector = TestBed.inject(EnvironmentInjector);
     const envInjector = createEnvironmentInjector(providers, parentEnvInjector);
diff --git a/packages/core/test/acceptance/environment_injector_spec.ts b/packages/core/test/acceptance/environment_injector_spec.ts
index eafc15aa684e9..6600a95c31077 100644
--- a/packages/core/test/acceptance/environment_injector_spec.ts
+++ b/packages/core/test/acceptance/environment_injector_spec.ts
@@ -6,7 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, createComponent, createEnvironmentInjector, DestroyRef, ENVIRONMENT_INITIALIZER, EnvironmentInjector, inject, InjectFlags, InjectionToken, INJECTOR, Injector, NgModuleRef, ViewContainerRef} from '@angular/core';
+import {
+  Component,
+  createComponent,
+  createEnvironmentInjector,
+  DestroyRef,
+  ENVIRONMENT_INITIALIZER,
+  EnvironmentInjector,
+  inject,
+  InjectFlags,
+  InjectionToken,
+  INJECTOR,
+  Injector,
+  NgModuleRef,
+  ViewContainerRef,
+} from '@angular/core';
 import {R3Injector} from '@angular/core/src/di/r3_injector';
 import {RuntimeError, RuntimeErrorCode} from '@angular/core/src/errors';
 import {TestBed} from '@angular/core/testing';
@@ -18,7 +32,7 @@ describe('environment injector', () => {
     let destroyed = false;
     const parentEnvInjector = TestBed.inject(EnvironmentInjector);
     const envInjector = createEnvironmentInjector([Service], parentEnvInjector) as R3Injector;
-    envInjector.onDestroy(() => destroyed = true);
+    envInjector.onDestroy(() => (destroyed = true));
 
     const service = envInjector.get(Service);
     expect(service).toBeInstanceOf(Service);
@@ -52,8 +66,10 @@ describe('environment injector', () => {
     class Service {}
 
     const parentEnvInjector = TestBed.inject(EnvironmentInjector);
-    const envInjector =
-        createEnvironmentInjector([], createEnvironmentInjector([Service], parentEnvInjector));
+    const envInjector = createEnvironmentInjector(
+      [],
+      createEnvironmentInjector([Service], parentEnvInjector),
+    );
     expect(envInjector.get(Service)).toBeInstanceOf(Service);
   });
 
@@ -62,8 +78,9 @@ describe('environment injector', () => {
 
     const parentEnvInjector = TestBed.inject(EnvironmentInjector);
     const envInjector = createEnvironmentInjector(
-        [{provide: token, useValue: 'child'}],
-        createEnvironmentInjector([{provide: token, useValue: 'parent'}], parentEnvInjector));
+      [{provide: token, useValue: 'child'}],
+      createEnvironmentInjector([{provide: token, useValue: 'parent'}], parentEnvInjector),
+    );
     expect(envInjector.get(token)).toBe('child');
   });
 
@@ -100,44 +117,49 @@ describe('environment injector', () => {
     expect(ngModuleRef.instance).toBeNull();
   });
 
-  it('should expose the ComponentFactoryResolver token bound to env injector with specified providers',
-     () => {
-       class Service {}
+  it('should expose the ComponentFactoryResolver token bound to env injector with specified providers', () => {
+    class Service {}
 
-       @Component({selector: 'test-cmp'})
-       class TestComponent {
-         constructor(readonly service: Service) {}
-       }
+    @Component({selector: 'test-cmp'})
+    class TestComponent {
+      constructor(readonly service: Service) {}
+    }
 
-       const parentEnvInjector = TestBed.inject(EnvironmentInjector);
-       const environmentInjector = createEnvironmentInjector([Service], parentEnvInjector);
-       const cRef = createComponent(TestComponent, {environmentInjector});
+    const parentEnvInjector = TestBed.inject(EnvironmentInjector);
+    const environmentInjector = createEnvironmentInjector([Service], parentEnvInjector);
+    const cRef = createComponent(TestComponent, {environmentInjector});
 
-       expect(cRef.instance.service).toBeInstanceOf(Service);
-     });
+    expect(cRef.instance.service).toBeInstanceOf(Service);
+  });
 
   it('should support the ENVIRONMENT_INITIALIZER multi-token', () => {
     let initialized = false;
     const parentEnvInjector = TestBed.inject(EnvironmentInjector);
     createEnvironmentInjector(
-        [{
+      [
+        {
           provide: ENVIRONMENT_INITIALIZER,
-          useValue: () => initialized = true,
+          useValue: () => (initialized = true),
           multi: true,
-        }],
-        parentEnvInjector);
+        },
+      ],
+      parentEnvInjector,
+    );
 
     expect(initialized).toBeTrue();
   });
 
   it('should throw when the ENVIRONMENT_INITIALIZER is not a multi-token', () => {
     const parentEnvInjector = TestBed.inject(EnvironmentInjector);
-    const providers = [{
-      provide: ENVIRONMENT_INITIALIZER,
-      useValue: () => {},
-    }];
-    expect(() => createEnvironmentInjector(providers, parentEnvInjector))
-        .toThrowMatching((e: RuntimeError) => e.code === RuntimeErrorCode.INVALID_MULTI_PROVIDER);
+    const providers = [
+      {
+        provide: ENVIRONMENT_INITIALIZER,
+        useValue: () => {},
+      },
+    ];
+    expect(() => createEnvironmentInjector(providers, parentEnvInjector)).toThrowMatching(
+      (e: RuntimeError) => e.code === RuntimeErrorCode.INVALID_MULTI_PROVIDER,
+    );
   });
 
   it('should adopt environment-scoped providers', () => {
@@ -151,7 +173,7 @@ describe('environment injector', () => {
   });
 
   describe('runInContext()', () => {
-    it('should return the function\'s return value', () => {
+    it("should return the function's return value", () => {
       const injector = TestBed.inject(EnvironmentInjector);
       const returnValue = injector.runInContext(() => 3);
       expect(returnValue).toBe(3);
@@ -173,7 +195,9 @@ describe('environment injector', () => {
     it('should make inject() available', () => {
       const TOKEN = new InjectionToken<string>('TOKEN');
       const injector = createEnvironmentInjector(
-          [{provide: TOKEN, useValue: 'from injector'}], TestBed.inject(EnvironmentInjector));
+        [{provide: TOKEN, useValue: 'from injector'}],
+        TestBed.inject(EnvironmentInjector),
+      );
 
       const result = injector.runInContext(() => inject(TOKEN));
       expect(result).toEqual('from injector');
@@ -189,9 +213,11 @@ describe('environment injector', () => {
     it('should properly clean up after the function throws', () => {
       const TOKEN = new InjectionToken<string>('TOKEN');
       const injector = TestBed.inject(EnvironmentInjector);
-      expect(() => injector.runInContext(() => {
-        throw new Error('crashes!');
-      })).toThrow();
+      expect(() =>
+        injector.runInContext(() => {
+          throw new Error('crashes!');
+        }),
+      ).toThrow();
       expect(() => inject(TOKEN, InjectFlags.Optional)).toThrow();
     });
 
@@ -214,8 +240,9 @@ describe('environment injector', () => {
 
         // Attempt to inject ViewContainerRef within the environment injector's context. This should
         // not be available, so the result should be `null`.
-        vcrFromEnvContext =
-            this.envInjector.runInContext(() => inject(ViewContainerRef, InjectFlags.Optional));
+        vcrFromEnvContext = this.envInjector.runInContext(() =>
+          inject(ViewContainerRef, InjectFlags.Optional),
+        );
       }
 
       const instance = TestBed.createComponent(TestCmp).componentInstance;
@@ -231,8 +258,10 @@ describe('environment injector', () => {
       });
 
       const parentInjector = TestBed.inject(EnvironmentInjector);
-      const childInjector =
-          createEnvironmentInjector([{provide: TOKEN, useValue: 'from child'}], parentInjector);
+      const childInjector = createEnvironmentInjector(
+        [{provide: TOKEN, useValue: 'from child'}],
+        parentInjector,
+      );
 
       const results = parentInjector.runInContext(() => {
         const fromParentBefore = inject(TOKEN);
diff --git a/packages/core/test/acceptance/exports_spec.ts b/packages/core/test/acceptance/exports_spec.ts
index 7db61a63a6745..8c03902594687 100644
--- a/packages/core/test/acceptance/exports_spec.ts
+++ b/packages/core/test/acceptance/exports_spec.ts
@@ -6,16 +6,28 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, DoCheck, Input, OnChanges, OnInit, SimpleChanges, Type} from '@angular/core';
+import {
+  Component,
+  Directive,
+  DoCheck,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  Type,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 describe('exports', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [
-        AppComp, ComponentToReference, DirToReference, DirToReferenceWithPreOrderHooks,
-        DirWithCompInput
-      ]
+        AppComp,
+        ComponentToReference,
+        DirToReference,
+        DirToReferenceWithPreOrderHooks,
+        DirWithCompInput,
+      ],
     });
   });
 
@@ -27,8 +39,10 @@ describe('exports', () => {
   });
 
   it('should support basic export of component', () => {
-    const fixture =
-        initWithTemplate(AppComp, '<comp-to-ref #myComp></comp-to-ref> {{ myComp.name }}');
+    const fixture = initWithTemplate(
+      AppComp,
+      '<comp-to-ref #myComp></comp-to-ref> {{ myComp.name }}',
+    );
     fixture.detectChanges();
     expect(fixture.nativeElement.innerHTML).toEqual('<comp-to-ref></comp-to-ref> Nancy');
   });
@@ -42,36 +56,43 @@ describe('exports', () => {
   describe('input changes in hooks', () => {
     it('should support forward reference', () => {
       const fixture = initWithTemplate(
-          AppComp, '<div dir-on-change #myDir="dirOnChange" [in]="true"></div> {{ myDir.name }}');
+        AppComp,
+        '<div dir-on-change #myDir="dirOnChange" [in]="true"></div> {{ myDir.name }}',
+      );
       fixture.detectChanges();
-      expect(fixture.nativeElement.firstChild.title).toBe('Drew!?@');            // div element
-      expect(fixture.nativeElement.lastChild.textContent).toContain('Drew!?@');  // text node
+      expect(fixture.nativeElement.firstChild.title).toBe('Drew!?@'); // div element
+      expect(fixture.nativeElement.lastChild.textContent).toContain('Drew!?@'); // text node
     });
 
     it('should not support backward reference', () => {
       expect(() => {
         const fixture = initWithTemplate(
-            AppComp, '{{ myDir.name }} <div dir-on-change #myDir="dirOnChange" [in]="true"></div>');
+          AppComp,
+          '{{ myDir.name }} <div dir-on-change #myDir="dirOnChange" [in]="true"></div>',
+        );
         fixture.detectChanges();
-      })
-          .toThrowError(
-              /ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.*AppComp/);
+      }).toThrowError(
+        /ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.*AppComp/,
+      );
     });
 
     it('should not support reference on the same node', () => {
       expect(() => {
         const fixture = initWithTemplate(
-            AppComp,
-            '<div dir-on-change #myDir="dirOnChange" [in]="true" [id]="myDir.name"></div>');
+          AppComp,
+          '<div dir-on-change #myDir="dirOnChange" [in]="true" [id]="myDir.name"></div>',
+        );
         fixture.detectChanges();
-      })
-          .toThrowError(
-              /ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.*AppComp/);
+      }).toThrowError(
+        /ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.*AppComp/,
+      );
     });
 
     it('should support input referenced by host binding on that directive', () => {
-      const fixture =
-          initWithTemplate(AppComp, '<div dir-on-change #myDir="dirOnChange" [in]="true"></div>');
+      const fixture = initWithTemplate(
+        AppComp,
+        '<div dir-on-change #myDir="dirOnChange" [in]="true"></div>',
+      );
       fixture.detectChanges();
       expect(fixture.nativeElement.firstChild.title).toBe('Drew!?@');
     });
@@ -86,7 +107,9 @@ describe('exports', () => {
 
   it('should support component instance fed into directive', () => {
     const fixture = initWithTemplate(
-        AppComp, '<comp-to-ref #myComp></comp-to-ref> <div [dirWithInput]="myComp"></div>');
+      AppComp,
+      '<comp-to-ref #myComp></comp-to-ref> <div [dirWithInput]="myComp"></div>',
+    );
     fixture.detectChanges();
 
     const myComp = fixture.debugElement.children[0].injector.get(ComponentToReference);
@@ -96,14 +119,17 @@ describe('exports', () => {
   });
 
   it('should point to the first declared ref', () => {
-    const fixture = initWithTemplate(AppComp, `
+    const fixture = initWithTemplate(
+      AppComp,
+      `
           <div>
             <input value="First" #ref />
             <input value="Second" #ref />
             <input value="Third" #ref />
             <span>{{ ref.value }}</span>
           </div>
-        `);
+        `,
+    );
     fixture.detectChanges();
     expect(fixture.nativeElement.querySelector('span').innerHTML).toBe('First');
   });
@@ -118,7 +144,9 @@ describe('exports', () => {
 
     it('should work with element properties', () => {
       const fixture = initWithTemplate(
-          AppComp, '<div [title]="myInput.value"></div> <input value="one" #myInput>');
+        AppComp,
+        '<div [title]="myInput.value"></div> <input value="one" #myInput>',
+      );
       fixture.detectChanges();
 
       expect(fixture.nativeElement.innerHTML).toEqual('<div title="one"></div><input value="one">');
@@ -126,17 +154,21 @@ describe('exports', () => {
 
     it('should work with element attrs', () => {
       const fixture = initWithTemplate(
-          AppComp, '<div [attr.aria-label]="myInput.value"></div> <input value="one" #myInput>');
+        AppComp,
+        '<div [attr.aria-label]="myInput.value"></div> <input value="one" #myInput>',
+      );
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual('<div aria-label="one"></div><input value="one">');
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        '<div aria-label="one"></div><input value="one">',
+      );
     });
 
     it('should work with element classes', () => {
       const fixture = initWithTemplate(
-          AppComp,
-          '<div [class.red]="myInput.checked"></div> <input type="checkbox" checked #myInput>');
+        AppComp,
+        '<div [class.red]="myInput.checked"></div> <input type="checkbox" checked #myInput>',
+      );
       fixture.detectChanges();
 
       expect(fixture.nativeElement.innerHTML).toContain('<div class="red"></div>');
@@ -144,7 +176,9 @@ describe('exports', () => {
 
     it('should work with component refs', () => {
       const fixture = initWithTemplate(
-          AppComp, '<div [dirWithInput]="myComp"></div><comp-to-ref #myComp></comp-to-ref>');
+        AppComp,
+        '<div [dirWithInput]="myComp"></div><comp-to-ref #myComp></comp-to-ref>',
+      );
       fixture.detectChanges();
 
       const dirWithInput = fixture.debugElement.children[0].injector.get(DirWithCompInput);
@@ -155,16 +189,20 @@ describe('exports', () => {
 
     it('should work with multiple forward refs', () => {
       const fixture = initWithTemplate(
-          AppComp,
-          '{{ myInput.value }} {{ myComp.name }} <comp-to-ref #myComp></comp-to-ref> <input value="one" #myInput>');
+        AppComp,
+        '{{ myInput.value }} {{ myComp.name }} <comp-to-ref #myComp></comp-to-ref> <input value="one" #myInput>',
+      );
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual('one Nancy <comp-to-ref></comp-to-ref><input value="one">');
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        'one Nancy <comp-to-ref></comp-to-ref><input value="one">',
+      );
     });
 
     it('should support local refs in nested dynamic views', () => {
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <input value="one" #outerInput>
         <div *ngIf="outer">
           {{ outerInput.value }}
@@ -173,7 +211,8 @@ describe('exports', () => {
                 {{ outerInput.value }} - {{ innerInput.value}}
             </div>
         </div>
-      `);
+      `,
+      );
       fixture.detectChanges();
       fixture.componentInstance.outer = true;
       fixture.componentInstance.inner = true;
@@ -212,12 +251,12 @@ class DirToReference {
 
 @Directive({selector: '[dirWithInput]'})
 class DirWithCompInput {
-  @Input('dirWithInput') comp: ComponentToReference|null = null;
+  @Input('dirWithInput') comp: ComponentToReference | null = null;
 }
 
 @Directive({selector: '[dir-on-change]', exportAs: 'dirOnChange', host: {'[title]': 'name'}})
 class DirToReferenceWithPreOrderHooks implements OnInit, OnChanges, DoCheck {
-  @Input() in : any = null;
+  @Input() in: any = null;
   name = 'Drew';
   ngOnChanges(changes: SimpleChanges) {
     this.name += '!';
diff --git a/packages/core/test/acceptance/host_binding_spec.ts b/packages/core/test/acceptance/host_binding_spec.ts
index 8477d9747515f..fd97311fc797b 100644
--- a/packages/core/test/acceptance/host_binding_spec.ts
+++ b/packages/core/test/acceptance/host_binding_spec.ts
@@ -8,8 +8,30 @@
 
 import {state, style, transition, trigger} from '@angular/animations';
 import {CommonModule} from '@angular/common';
-import {AfterContentInit, Component, ComponentRef, ContentChildren, Directive, DoCheck, HostBinding, HostListener, Injectable, Input, NgModule, OnChanges, OnInit, QueryList, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
-import {bypassSanitizationTrustHtml, bypassSanitizationTrustStyle, bypassSanitizationTrustUrl} from '@angular/core/src/sanitization/bypass';
+import {
+  AfterContentInit,
+  Component,
+  ComponentRef,
+  ContentChildren,
+  Directive,
+  DoCheck,
+  HostBinding,
+  HostListener,
+  Injectable,
+  Input,
+  NgModule,
+  OnChanges,
+  OnInit,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+  ViewContainerRef,
+} from '@angular/core';
+import {
+  bypassSanitizationTrustHtml,
+  bypassSanitizationTrustStyle,
+  bypassSanitizationTrustUrl,
+} from '@angular/core/src/sanitization/bypass';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -47,12 +69,10 @@ describe('host bindings', () => {
   describe('defined in @Component', () => {
     it('should combine the inherited static classes of a parent and child component', () => {
       @Component({template: '...', host: {'class': 'foo bar'}})
-      class ParentCmp {
-      }
+      class ParentCmp {}
 
       @Component({template: '...', host: {'class': 'foo baz'}})
-      class ChildCmp extends ParentCmp {
-      }
+      class ChildCmp extends ParentCmp {}
 
       TestBed.configureTestingModule({declarations: [ChildCmp]});
       const fixture = TestBed.createComponent(ChildCmp);
@@ -66,8 +86,7 @@ describe('host bindings', () => {
 
     it('should render host class and style on the root component', () => {
       @Component({template: '...', host: {class: 'foo', style: 'color: red'}})
-      class MyApp {
-      }
+      class MyApp {}
 
       TestBed.configureTestingModule({declarations: [MyApp]});
       const fixture = TestBed.createComponent(MyApp);
@@ -78,7 +97,6 @@ describe('host bindings', () => {
       expect(element.classList.contains('foo')).toBeTruthy();
     });
 
-
     it('should not cause problems if detectChanges is called when a property updates', () => {
       /**
        * Angular Material CDK Tree contains a code path whereby:
@@ -101,8 +119,7 @@ describe('host bindings', () => {
         selector: 'child',
         template: `...`,
       })
-      class ChildCmp {
-      }
+      class ChildCmp {}
 
       @Component({
         selector: 'parent',
@@ -176,12 +193,9 @@ describe('host bindings', () => {
       @Component({
         selector: 'my-comp',
         template: '<div animationPropDir>Some content</div>',
-        animations: [
-          trigger('myAnimation', [state('color', style({color: 'red'}))]),
-        ],
+        animations: [trigger('myAnimation', [state('color', style({color: 'red'}))])],
       })
-      class Comp {
-      }
+      class Comp {}
 
       TestBed.configureTestingModule({
         declarations: [Comp, AnimationPropDir],
@@ -193,52 +207,43 @@ describe('host bindings', () => {
       expect(queryResult.nativeElement.style.color).toBe('red');
     });
 
-    it('should work when directive contains synthetic props and directive is applied to a component',
-       () => {
-         @Directive({
-           selector: '[animationPropDir]',
-         })
-         class AnimationPropDir {
-           @HostBinding('@myAnimation') myAnimation: string = 'color';
-         }
-
-         @Component({
-           selector: 'my-comp',
-           template: 'Some content',
-           animations: [
-             trigger('myAnimation', [state('color', style({color: 'red'}))]),
-           ],
-         })
-         class Comp {
-         }
-
-         @Component({
-           selector: 'app',
-           template: '<my-comp animationPropDir></my-comp>',
-           animations: [
-             trigger('myAnimation', [state('color', style({color: 'green'}))]),
-           ],
-         })
-         class App {
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [App, Comp, AnimationPropDir],
-           imports: [NoopAnimationsModule],
-         });
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         const queryResult = fixture.debugElement.query(By.directive(AnimationPropDir));
-         expect(queryResult.nativeElement.style.color).toBe('green');
-       });
+    it('should work when directive contains synthetic props and directive is applied to a component', () => {
+      @Directive({
+        selector: '[animationPropDir]',
+      })
+      class AnimationPropDir {
+        @HostBinding('@myAnimation') myAnimation: string = 'color';
+      }
+
+      @Component({
+        selector: 'my-comp',
+        template: 'Some content',
+        animations: [trigger('myAnimation', [state('color', style({color: 'red'}))])],
+      })
+      class Comp {}
+
+      @Component({
+        selector: 'app',
+        template: '<my-comp animationPropDir></my-comp>',
+        animations: [trigger('myAnimation', [state('color', style({color: 'green'}))])],
+      })
+      class App {}
+
+      TestBed.configureTestingModule({
+        declarations: [App, Comp, AnimationPropDir],
+        imports: [NoopAnimationsModule],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      const queryResult = fixture.debugElement.query(By.directive(AnimationPropDir));
+      expect(queryResult.nativeElement.style.color).toBe('green');
+    });
 
     it('should work when component contains synthetic props', () => {
       @Component({
         selector: 'my-comp',
         template: '<div>Some content/div>',
-        animations: [
-          trigger('myAnimation', [state('color', style({color: 'red'}))]),
-        ],
+        animations: [trigger('myAnimation', [state('color', style({color: 'red'}))])],
       })
       class Comp {
         @HostBinding('@myAnimation') myAnimation: string = 'color';
@@ -257,9 +262,7 @@ describe('host bindings', () => {
       @Component({
         selector: 'my-comp',
         template: '<div>Some content/div>',
-        animations: [
-          trigger('myAnimation', [state('color', style({color: 'red'}))]),
-        ],
+        animations: [trigger('myAnimation', [state('color', style({color: 'red'}))])],
       })
       class Comp {
         @HostBinding('@myAnimation') myAnimation: string = 'color';
@@ -268,8 +271,7 @@ describe('host bindings', () => {
       @Component({
         template: '<my-comp></my-comp>',
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, Comp],
@@ -292,12 +294,9 @@ describe('host bindings', () => {
       @Component({
         selector: 'my-comp',
         template: '<div>Some content</div>',
-        animations: [
-          trigger('myAnimation', [state('color', style({color: 'red'}))]),
-        ],
+        animations: [trigger('myAnimation', [state('color', style({color: 'red'}))])],
       })
-      class Comp extends AnimationDir {
-      }
+      class Comp extends AnimationDir {}
 
       TestBed.configureTestingModule({
         declarations: [Comp, AnimationDir],
@@ -335,8 +334,7 @@ describe('host bindings', () => {
           trigger('myAnimation', [state('a', style({color: 'yellow'})), transition('* => a', [])]),
         ],
       })
-      class Comp {
-      }
+      class Comp {}
 
       TestBed.configureTestingModule({
         declarations: [Comp, AnimationPropDir],
@@ -344,7 +342,7 @@ describe('host bindings', () => {
       });
       const fixture = TestBed.createComponent(Comp);
       fixture.detectChanges();
-      await fixture.whenStable();  // wait for animations to complete
+      await fixture.whenStable(); // wait for animations to complete
       const queryResult = fixture.debugElement.query(By.directive(AnimationPropDir));
       expect(queryResult.nativeElement.style.color).toBe('yellow');
       expect(events).toEqual(['@myAnimation.start', '@myAnimation.done']);
@@ -380,7 +378,7 @@ describe('host bindings', () => {
       });
       const fixture = TestBed.createComponent(Comp);
       fixture.detectChanges();
-      await fixture.whenStable();  // wait for animations to complete
+      await fixture.whenStable(); // wait for animations to complete
       expect(fixture.nativeElement.style.color).toBe('yellow');
       expect(events).toEqual(['@myAnimation.start', '@myAnimation.done']);
     });
@@ -412,8 +410,7 @@ describe('host bindings', () => {
       @Component({
         template: '<my-comp></my-comp>',
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, Comp],
@@ -421,54 +418,51 @@ describe('host bindings', () => {
       });
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
-      await fixture.whenStable();  // wait for animations to complete
+      await fixture.whenStable(); // wait for animations to complete
       const queryResult = fixture.debugElement.query(By.directive(Comp));
       expect(queryResult.nativeElement.style.color).toBe('yellow');
       expect(events).toEqual(['@myAnimation.start', '@myAnimation.done']);
     });
 
-    it('should work when component extends a directive that contains synthetic listeners',
-       async () => {
-         const events: string[] = [];
-
-         @Directive({
-           selector: 'animation-dir',
-         })
-         class AnimationDir {
-           @HostBinding('@myAnimation') myAnimation: string = 'a';
-
-           @HostListener('@myAnimation.start')
-           onAnimationStart() {
-             events.push('@myAnimation.start');
-           }
-
-           @HostListener('@myAnimation.done')
-           onAnimationDone() {
-             events.push('@myAnimation.done');
-           }
-         }
-
-         @Component({
-           selector: 'my-comp',
-           template: '<div>Some content</div>',
-           animations: [
-             trigger(
-                 'myAnimation', [state('a', style({color: 'yellow'})), transition('* => a', [])]),
-           ],
-         })
-         class Comp extends AnimationDir {
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [Comp],
-           imports: [NoopAnimationsModule],
-         });
-         const fixture = TestBed.createComponent(Comp);
-         fixture.detectChanges();
-         await fixture.whenStable();  // wait for animations to complete
-         expect(fixture.nativeElement.style.color).toBe('yellow');
-         expect(events).toEqual(['@myAnimation.start', '@myAnimation.done']);
-       });
+    it('should work when component extends a directive that contains synthetic listeners', async () => {
+      const events: string[] = [];
+
+      @Directive({
+        selector: 'animation-dir',
+      })
+      class AnimationDir {
+        @HostBinding('@myAnimation') myAnimation: string = 'a';
+
+        @HostListener('@myAnimation.start')
+        onAnimationStart() {
+          events.push('@myAnimation.start');
+        }
+
+        @HostListener('@myAnimation.done')
+        onAnimationDone() {
+          events.push('@myAnimation.done');
+        }
+      }
+
+      @Component({
+        selector: 'my-comp',
+        template: '<div>Some content</div>',
+        animations: [
+          trigger('myAnimation', [state('a', style({color: 'yellow'})), transition('* => a', [])]),
+        ],
+      })
+      class Comp extends AnimationDir {}
+
+      TestBed.configureTestingModule({
+        declarations: [Comp],
+        imports: [NoopAnimationsModule],
+      });
+      const fixture = TestBed.createComponent(Comp);
+      fixture.detectChanges();
+      await fixture.whenStable(); // wait for animations to complete
+      expect(fixture.nativeElement.style.color).toBe('yellow');
+      expect(events).toEqual(['@myAnimation.start', '@myAnimation.done']);
+    });
   });
 
   describe('via @HostBinding', () => {
@@ -476,10 +470,9 @@ describe('host bindings', () => {
       @Component({
         template: `
         <child-and-parent-cmp></child-and-parent-cmp>
-      `
+      `,
       })
-      class MyApp {
-      }
+      class MyApp {}
 
       @Component({template: '...'})
       class ParentCmp {
@@ -505,95 +498,92 @@ describe('host bindings', () => {
       expect(childElement.style.opacity).toEqual('0.5');
     });
 
-    it('should prioritize styling present in the order of directive hostBinding evaluation, but consider sub-classed directive styling to be the most important',
-       () => {
-         @Component({template: '<div child-dir sibling-dir></div>'})
-         class MyApp {
-         }
-
-         @Directive({selector: '[parent-dir]'})
-         class ParentDir {
-           @HostBinding('style.width')
-           get width1() {
-             return '100px';
-           }
-
-           @HostBinding('style.height')
-           get height1() {
-             return '100px';
-           }
-
-           @HostBinding('style.color')
-           get color1() {
-             return 'red';
-           }
-         }
-
-         @Directive({selector: '[child-dir]'})
-         class ChildDir extends ParentDir {
-           @HostBinding('style.width')
-           get width2() {
-             return '200px';
-           }
-
-           @HostBinding('style.height')
-           get height2() {
-             return '200px';
-           }
-         }
-
-         @Directive({selector: '[sibling-dir]'})
-         class SiblingDir {
-           @HostBinding('style.width')
-           get width3() {
-             return '300px';
-           }
-
-           @HostBinding('style.height')
-           get height3() {
-             return '300px';
-           }
-
-           @HostBinding('style.opacity')
-           get opacity3() {
-             return '0.5';
-           }
-
-           @HostBinding('style.color')
-           get color1() {
-             return 'blue';
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [MyApp, ParentDir, SiblingDir, ChildDir]});
-         const fixture = TestBed.createComponent(MyApp);
-         const element = fixture.nativeElement;
-         fixture.detectChanges();
-
-         const childElement = element.querySelector('div');
-
-         // width/height values were set in all directives, but the sub-class directive
-         // (ChildDir) had priority over the parent directive (ParentDir) which is why its
-         // value won. It also won over Dir because the SiblingDir directive was declared
-         // later in `declarations`.
-         expect(childElement.style.width).toEqual('200px');
-         expect(childElement.style.height).toEqual('200px');
-
-         // ParentDir styled the color first before Dir
-         expect(childElement.style.color).toEqual('red');
-
-         // Dir was the only directive to style opacity
-         expect(childElement.style.opacity).toEqual('0.5');
-       });
+    it('should prioritize styling present in the order of directive hostBinding evaluation, but consider sub-classed directive styling to be the most important', () => {
+      @Component({template: '<div child-dir sibling-dir></div>'})
+      class MyApp {}
+
+      @Directive({selector: '[parent-dir]'})
+      class ParentDir {
+        @HostBinding('style.width')
+        get width1() {
+          return '100px';
+        }
+
+        @HostBinding('style.height')
+        get height1() {
+          return '100px';
+        }
+
+        @HostBinding('style.color')
+        get color1() {
+          return 'red';
+        }
+      }
+
+      @Directive({selector: '[child-dir]'})
+      class ChildDir extends ParentDir {
+        @HostBinding('style.width')
+        get width2() {
+          return '200px';
+        }
+
+        @HostBinding('style.height')
+        get height2() {
+          return '200px';
+        }
+      }
+
+      @Directive({selector: '[sibling-dir]'})
+      class SiblingDir {
+        @HostBinding('style.width')
+        get width3() {
+          return '300px';
+        }
+
+        @HostBinding('style.height')
+        get height3() {
+          return '300px';
+        }
+
+        @HostBinding('style.opacity')
+        get opacity3() {
+          return '0.5';
+        }
+
+        @HostBinding('style.color')
+        get color1() {
+          return 'blue';
+        }
+      }
+
+      TestBed.configureTestingModule({declarations: [MyApp, ParentDir, SiblingDir, ChildDir]});
+      const fixture = TestBed.createComponent(MyApp);
+      const element = fixture.nativeElement;
+      fixture.detectChanges();
+
+      const childElement = element.querySelector('div');
+
+      // width/height values were set in all directives, but the sub-class directive
+      // (ChildDir) had priority over the parent directive (ParentDir) which is why its
+      // value won. It also won over Dir because the SiblingDir directive was declared
+      // later in `declarations`.
+      expect(childElement.style.width).toEqual('200px');
+      expect(childElement.style.height).toEqual('200px');
+
+      // ParentDir styled the color first before Dir
+      expect(childElement.style.color).toEqual('red');
+
+      // Dir was the only directive to style opacity
+      expect(childElement.style.opacity).toEqual('0.5');
+    });
 
     it('should allow class-bindings to be placed on ng-container elements', () => {
       @Component({
         template: `
         <ng-container [class.foo]="true" dir-that-adds-other-classes>...</ng-container>
-      `
+      `,
       })
-      class MyApp {
-      }
+      class MyApp {}
 
       @Directive({selector: '[dir-that-adds-other-classes]'})
       class DirThatAddsOtherClasses {
@@ -637,7 +627,6 @@ describe('host bindings', () => {
     expect(element.innerHTML).toContain('class="bar"');
   });
 
-
   it('should support host bindings on root component', () => {
     @Component({template: ''})
     class HostBindingComp {
@@ -670,7 +659,10 @@ describe('host bindings', () => {
 
     @Component({template: '', providers: [ServiceOne, ServiceTwo]})
     class App {
-      constructor(public serviceOne: ServiceOne, public serviceTwo: ServiceTwo) {}
+      constructor(
+        public serviceOne: ServiceOne,
+        public serviceTwo: ServiceTwo,
+      ) {}
 
       @HostBinding() title = 'my-title';
     }
@@ -691,8 +683,7 @@ describe('host bindings', () => {
 
   it('should support host bindings on multiple nodes', () => {
     @Directive({selector: '[someDir]'})
-    class SomeDir {
-    }
+    class SomeDir {}
 
     @Component({selector: 'host-title-comp', template: ''})
     class HostTitleComp {
@@ -704,7 +695,7 @@ describe('host bindings', () => {
           <div hostBindingDir></div>
           <div someDir></div>
           <host-title-comp></host-title-comp>
-        `
+        `,
     })
     class App {
       @ViewChild(HostBindingDir) hostBindingDir!: HostBindingDir;
@@ -735,7 +726,7 @@ describe('host bindings', () => {
       template: `
           <host-binding-comp></host-binding-comp>
           <host-binding-comp></host-binding-comp>
-        `
+        `,
     })
     class App {
       @ViewChildren(HostBindingComp) hostBindingComp!: QueryList<HostBindingComp>;
@@ -746,8 +737,9 @@ describe('host bindings', () => {
     fixture.detectChanges();
     const comps = fixture.componentInstance.hostBindingComp.toArray();
 
-    const hostBindingEls =
-        fixture.nativeElement.querySelectorAll('host-binding-comp') as NodeListOf<HTMLElement>;
+    const hostBindingEls = fixture.nativeElement.querySelectorAll(
+      'host-binding-comp',
+    ) as NodeListOf<HTMLElement>;
 
     expect(hostBindingEls.length).toBe(2);
 
@@ -765,31 +757,26 @@ describe('host bindings', () => {
     expect(hostBindingEls[1].id).toBe('red');
   });
 
+  it('should support dirs with host bindings on the same node as dirs without host bindings', () => {
+    @Directive({selector: '[someDir]'})
+    class SomeDir {}
 
-  it('should support dirs with host bindings on the same node as dirs without host bindings',
-     () => {
-       @Directive({selector: '[someDir]'})
-       class SomeDir {
-       }
-
-       @Component({template: '<div someDir hostBindingDir></div>'})
-       class App {
-         @ViewChild(HostBindingDir) hostBindingDir!: HostBindingDir;
-       }
-
-       TestBed.configureTestingModule({declarations: [App, SomeDir, HostBindingDir]});
-       const fixture = TestBed.createComponent(App);
-       fixture.detectChanges();
-
-       const hostBindingDiv = fixture.nativeElement.querySelector('div') as HTMLElement;
-       expect(hostBindingDiv.id).toEqual('foo');
+    @Component({template: '<div someDir hostBindingDir></div>'})
+    class App {
+      @ViewChild(HostBindingDir) hostBindingDir!: HostBindingDir;
+    }
 
-       fixture.componentInstance.hostBindingDir!.id = 'bar';
-       fixture.detectChanges();
-       expect(hostBindingDiv.id).toEqual('bar');
-     });
+    TestBed.configureTestingModule({declarations: [App, SomeDir, HostBindingDir]});
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
 
+    const hostBindingDiv = fixture.nativeElement.querySelector('div') as HTMLElement;
+    expect(hostBindingDiv.id).toEqual('foo');
 
+    fixture.componentInstance.hostBindingDir!.id = 'bar';
+    fixture.detectChanges();
+    expect(hostBindingDiv.id).toEqual('bar');
+  });
 
   it('should support host bindings that rely on values from init hooks', () => {
     @Component({template: '', selector: 'init-hook-comp'})
@@ -871,17 +858,15 @@ describe('host bindings', () => {
 
   it('should support host bindings on second template pass', () => {
     @Component({selector: 'parent', template: '<div hostBindingDir></div>'})
-    class Parent {
-    }
+    class Parent {}
 
     @Component({
       template: `
           <parent></parent>
           <parent></parent>
-        `
+        `,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, Parent, HostBindingDir]});
     const fixture = TestBed.createComponent(App);
@@ -898,7 +883,7 @@ describe('host bindings', () => {
           <div *ngFor="let row of rows">
             <p hostBindingDir></p>
           </div>
-        `
+        `,
     })
     class App {
       rows: number[] = [];
@@ -930,7 +915,7 @@ describe('host bindings', () => {
       template: `
           <name-comp [names]="['Nancy', name, 'Ned']"></name-comp>
           <host-binding-comp></host-binding-comp>
-        `
+        `,
     })
     class App {
       @ViewChild(NameComp) nameComp!: NameComp;
@@ -958,7 +943,6 @@ describe('host bindings', () => {
     expect(nameComp.names).toEqual(['Nancy', 'my-id', 'Ned']);
   });
 
-
   // Note: This is a contrived example. For feature parity with render2, we should make sure it
   // works in this way (see https://stackblitz.com/edit/angular-cbqpbe), but a more realistic
   // example would be an animation host binding with a literal defining the animation config.
@@ -972,7 +956,7 @@ describe('host bindings', () => {
     @Component({
       selector: 'host-binding-comp',
       host: {'[id]': `['red', id]`, '[dir]': `dir`, '[title]': `[title, otherTitle]`},
-      template: ''
+      template: '',
     })
     class HostBindingComp {
       id = 'blue';
@@ -985,7 +969,7 @@ describe('host bindings', () => {
       template: `
           <name-comp [names]="[name, 'Nancy', otherName]"></name-comp>
           <host-binding-comp></host-binding-comp>
-        `
+        `,
     })
     class App {
       @ViewChild(HostBindingComp) hostBindingComp!: HostBindingComp;
@@ -1039,8 +1023,7 @@ describe('host bindings', () => {
     }
 
     @Component({template: '<button hostListenerDir hostDir>Click</button>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, HostBindingDir, HostListenerDir]});
     const fixture = TestBed.createComponent(App);
@@ -1092,8 +1075,8 @@ describe('host bindings', () => {
       host: {
         // Use `attr` since IE doesn't support the `title` property on all elements.
         '[attr.id]': `condition ? ['red', id] : 'green'`,
-        '[attr.title]': `otherCondition ? [title] : 'other title'`
-      }
+        '[attr.title]': `otherCondition ? [title] : 'other title'`,
+      },
     })
     class HostBindingComp {
       condition = true;
@@ -1134,15 +1117,12 @@ describe('host bindings', () => {
 
   it('should merge attributes on host and template', () => {
     @Directive({selector: '[dir1]', host: {id: 'dir1'}})
-    class MyDir1 {
-    }
+    class MyDir1 {}
     @Directive({selector: '[dir2]', host: {id: 'dir2'}})
-    class MyDir2 {
-    }
+    class MyDir2 {}
 
     @Component({template: `<div dir1 dir2 id="tmpl"></div>`})
-    class MyComp {
-    }
+    class MyComp {}
 
     TestBed.configureTestingModule({declarations: [MyComp, MyDir1, MyDir2]});
     const fixture = TestBed.createComponent(MyComp);
@@ -1166,7 +1146,7 @@ describe('host bindings', () => {
       template: `
         <div subDir></div>
         <div superDir></div>
-      `
+      `,
     })
     class App {
       @ViewChild(SubDirective) subDir!: SubDirective;
@@ -1205,12 +1185,10 @@ describe('host bindings', () => {
 
   it('should support host attributes', () => {
     @Directive({selector: '[hostAttributeDir]', host: {'role': 'listbox'}})
-    class HostAttributeDir {
-    }
+    class HostAttributeDir {}
 
     @Component({template: '<div hostAttributeDir></div>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, HostAttributeDir]});
     const fixture = TestBed.createComponent(App);
@@ -1221,7 +1199,7 @@ describe('host bindings', () => {
     @Component({
       selector: 'host-binding-comp',
       template: '<ng-content></ng-content>',
-      host: {'[id]': 'foos.length'}
+      host: {'[id]': 'foos.length'},
     })
     class HostBindingWithContentChildren {
       @ContentChildren('foo') foos!: QueryList<any>;
@@ -1233,10 +1211,9 @@ describe('host bindings', () => {
             <div #foo></div>
             <div #foo></div>
           </host-binding-comp>
-        `
+        `,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, HostBindingWithContentChildren]});
     const fixture = TestBed.createComponent(App);
@@ -1257,8 +1234,7 @@ describe('host bindings', () => {
     }
 
     @Component({template: '<host-binding-comp></host-binding-comp>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, HostBindingWithContentHooks]});
     const fixture = TestBed.createComponent(App);
@@ -1270,8 +1246,11 @@ describe('host bindings', () => {
 
   describe('styles', () => {
     it('should bind to host styles', () => {
-      @Component(
-          {selector: 'host-binding-to-styles', host: {'[style.width.px]': 'width'}, template: ''})
+      @Component({
+        selector: 'host-binding-to-styles',
+        host: {'[style.width.px]': 'width'},
+        template: '',
+      })
       class HostBindingToStyles {
         width = 2;
       }
@@ -1285,8 +1264,9 @@ describe('host bindings', () => {
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
-      const hostBindingEl =
-          fixture.nativeElement.querySelector('host-binding-to-styles') as HTMLElement;
+      const hostBindingEl = fixture.nativeElement.querySelector(
+        'host-binding-to-styles',
+      ) as HTMLElement;
       expect(hostBindingEl.style.width).toEqual('2px');
 
       fixture.componentInstance.hostBindingDir.width = 5;
@@ -1324,12 +1304,10 @@ describe('host bindings', () => {
 
     it('should apply static host classes', () => {
       @Component({selector: 'static-host-class', host: {'class': 'mat-toolbar'}, template: ''})
-      class StaticHostClass {
-      }
+      class StaticHostClass {}
 
       @Component({template: '<static-host-class></static-host-class>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, StaticHostClass]});
       const fixture = TestBed.createComponent(App);
@@ -1344,15 +1322,21 @@ describe('host bindings', () => {
     function identity(value: any) {
       return value;
     }
-    function verify(tag: string, prop: string, value: any, expectedSanitizedValue: any,
-                    bypassFn: Function, isAttribute: boolean = true,
-                    throws: boolean = false) {
+    function verify(
+      tag: string,
+      prop: string,
+      value: any,
+      expectedSanitizedValue: any,
+      bypassFn: Function,
+      isAttribute: boolean = true,
+      throws: boolean = false,
+    ) {
       it(`should sanitize <${tag} ${prop}> ${isAttribute ? 'properties' : 'attributes'}`, () => {
         @Directive({
           selector: '[unsafeUrlHostBindingDir]',
           host: {
             [`[${isAttribute ? 'attr.' : ''}${prop}]`]: 'value',
-          }
+          },
         })
         class UnsafeDir {
           value: any = value;
@@ -1367,7 +1351,7 @@ describe('host bindings', () => {
         const fixture = TestBed.createComponent(App);
         fixture.detectChanges();
         const el = fixture.nativeElement.querySelector(tag)!;
-        const current = () => isAttribute ? el.getAttribute(prop) : (el as any)[prop];
+        const current = () => (isAttribute ? el.getAttribute(prop) : (el as any)[prop]);
 
         fixture.componentInstance.unsafeDir.value = value;
         fixture.detectChanges();
@@ -1384,23 +1368,47 @@ describe('host bindings', () => {
     }
 
     verify(
-        'a', 'href', 'javascript:alert(1)', 'unsafe:javascript:alert(1)',
-        bypassSanitizationTrustUrl);
+      'a',
+      'href',
+      'javascript:alert(1)',
+      'unsafe:javascript:alert(1)',
+      bypassSanitizationTrustUrl,
+    );
     verify('a', 'href', 'javascript:alert(1.1)', 'unsafe:javascript:alert(1.1)', identity);
     verify(
-        'a', 'href', 'javascript:alert(1.2)', 'unsafe:javascript:alert(1.2)',
-        bypassSanitizationTrustStyle, true, true);
+      'a',
+      'href',
+      'javascript:alert(1.2)',
+      'unsafe:javascript:alert(1.2)',
+      bypassSanitizationTrustStyle,
+      true,
+      true,
+    );
     verify(
-        'blockquote', 'cite', 'javascript:alert(2)', 'unsafe:javascript:alert(2)',
-        bypassSanitizationTrustUrl);
+      'blockquote',
+      'cite',
+      'javascript:alert(2)',
+      'unsafe:javascript:alert(2)',
+      bypassSanitizationTrustUrl,
+    );
     verify('blockquote', 'cite', 'javascript:alert(2.1)', 'unsafe:javascript:alert(2.1)', identity);
     verify(
-        'blockquote', 'cite', 'javascript:alert(2.2)', 'unsafe:javascript:alert(2.2)',
-        bypassSanitizationTrustHtml, true, true);
+      'blockquote',
+      'cite',
+      'javascript:alert(2.2)',
+      'unsafe:javascript:alert(2.2)',
+      bypassSanitizationTrustHtml,
+      true,
+      true,
+    );
     verify(
-        'b', 'innerHTML', '<img src="javascript:alert(3)">',
-        '<img src="unsafe:javascript:alert(3)">', bypassSanitizationTrustHtml,
-        /* isAttribute */ false);
+      'b',
+      'innerHTML',
+      '<img src="javascript:alert(3)">',
+      '<img src="unsafe:javascript:alert(3)">',
+      bypassSanitizationTrustHtml,
+      /* isAttribute */ false,
+    );
   });
 
   describe('host binding on containers', () => {
@@ -1420,35 +1428,33 @@ describe('host bindings', () => {
         template: `
           <ng-template #ref></ng-template>
           <ng-container [ngTemplateOutlet]="ref" staticHostAtt dynamicHostAtt></ng-container>
-        `
+        `,
       })
-      class App {
-      }
+      class App {}
 
-      const comp =
-          TestBed.configureTestingModule({declarations: [App, StaticHostAttr, DynamicHostAttr]})
-              .createComponent(App);
+      const comp = TestBed.configureTestingModule({
+        declarations: [App, StaticHostAttr, DynamicHostAttr],
+      }).createComponent(App);
       // TODO(FW-2202): binding static attrs won't throw an error. We should be more consistent.
-      expect(() => comp.detectChanges())
-          .toThrowError(
-              /Attempted to set attribute `dynamic` on a container node. Host bindings are not valid on ng-container or ng-template./);
+      expect(() => comp.detectChanges()).toThrowError(
+        /Attempted to set attribute `dynamic` on a container node. Host bindings are not valid on ng-container or ng-template./,
+      );
     });
 
     it('should fail with expected error with ng-template', () => {
       @Component({
         selector: 'my-app',
-        template: ` <ng-template staticHostAtt dynamicHostAtt></ng-template> `
+        template: ` <ng-template staticHostAtt dynamicHostAtt></ng-template> `,
       })
-      class App {
-      }
+      class App {}
 
-      const comp =
-          TestBed.configureTestingModule({declarations: [App, StaticHostAttr, DynamicHostAttr]})
-              .createComponent(App);
+      const comp = TestBed.configureTestingModule({
+        declarations: [App, StaticHostAttr, DynamicHostAttr],
+      }).createComponent(App);
       // TODO(FW-2202): binding static attrs won't throw an error. We should be more consistent.
-      expect(() => comp.detectChanges())
-          .toThrowError(
-              /Attempted to set attribute `dynamic` on a container node. Host bindings are not valid on ng-container or ng-template./);
+      expect(() => comp.detectChanges()).toThrowError(
+        /Attempted to set attribute `dynamic` on a container node. Host bindings are not valid on ng-container or ng-template./,
+      );
     });
   });
 
@@ -1459,7 +1465,7 @@ describe('host bindings', () => {
         host: {
           '[class.a]': 'true',
           '[class.b]': 'false',
-        }
+        },
       })
       class MyDirective {
         @HostBinding('class.c') true: any;
diff --git a/packages/core/test/acceptance/host_directives_spec.ts b/packages/core/test/acceptance/host_directives_spec.ts
index 5cb8f7b33778c..73c86d843f01f 100644
--- a/packages/core/test/acceptance/host_directives_spec.ts
+++ b/packages/core/test/acceptance/host_directives_spec.ts
@@ -6,20 +6,39 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterViewChecked, AfterViewInit, ChangeDetectorRef, Component, Directive, ElementRef, EventEmitter, forwardRef, inject, Inject, InjectionToken, Input, OnChanges, OnInit, Output, SimpleChanges, Type, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  AfterViewChecked,
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  Directive,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  inject,
+  Inject,
+  InjectionToken,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
 import {getComponent, getDirectives} from '../../src/render3/util/discovery_utils';
 
-
 describe('host directives', () => {
   it('should apply a basic host directive', () => {
     const logs: string[] = [];
 
     @Directive({
       standalone: true,
-      host: {'host-dir-attr': '', 'class': 'host-dir', 'style': 'height: 50px'}
+      host: {'host-dir-attr': '', 'class': 'host-dir', 'style': 'height: 50px'},
     })
     class HostDir {
       constructor() {
@@ -30,7 +49,7 @@ describe('host directives', () => {
     @Directive({
       selector: '[dir]',
       host: {'host-attr': '', 'class': 'dir', 'style': 'width: 50px'},
-      hostDirectives: [HostDir]
+      hostDirectives: [HostDir],
     })
     class Dir {
       constructor() {
@@ -39,18 +58,17 @@ describe('host directives', () => {
     }
 
     @Component({template: '<div dir></div>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, Dir]});
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
     expect(logs).toEqual(['HostDir', 'Dir']);
-    expect(fixture.nativeElement.innerHTML)
-        .toBe(
-            '<div host-dir-attr="" host-attr="" dir="" ' +
-            'class="host-dir dir" style="height: 50px; width: 50px;"></div>');
+    expect(fixture.nativeElement.innerHTML).toBe(
+      '<div host-dir-attr="" host-attr="" dir="" ' +
+        'class="host-dir dir" style="height: 50px; width: 50px;"></div>',
+    );
   });
 
   it('should apply a host directive referenced through a forwardRef', () => {
@@ -58,7 +76,7 @@ describe('host directives', () => {
 
     @Directive({
       selector: '[dir]',
-      hostDirectives: [forwardRef(() => HostDir), {directive: forwardRef(() => OtherHostDir)}]
+      hostDirectives: [forwardRef(() => HostDir), {directive: forwardRef(() => OtherHostDir)}],
     })
     class Dir {
       constructor() {
@@ -81,8 +99,7 @@ describe('host directives', () => {
     }
 
     @Component({template: '<div dir></div>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, Dir]});
     const fixture = TestBed.createComponent(App);
@@ -102,7 +119,7 @@ describe('host directives', () => {
         'id': 'leaf-id',
       },
       providers: [{provide: token, useValue: 'leaf value'}],
-      standalone: true
+      standalone: true,
     })
     class Chain1_3 {
       constructor(@Inject(token) tokenValue: string) {
@@ -203,16 +220,16 @@ describe('host directives', () => {
     }
 
     @Component({template: '<my-comp selector-matched-dir></my-comp>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, MyComp, SelectorMatchedDir]});
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
     expect(diTokenValue!).toBe('host value');
-    expect(fixture.nativeElement.innerHTML)
-        .toBe('<my-comp id="host-id" selector-matched-dir="" class="leaf middle host"></my-comp>');
+    expect(fixture.nativeElement.innerHTML).toBe(
+      '<my-comp id="host-id" selector-matched-dir="" class="leaf middle host"></my-comp>',
+    );
     expect(logs).toEqual([
       'Chain1 - level 3',
       'Chain1 - level 2',
@@ -283,8 +300,7 @@ describe('host directives', () => {
     }
 
     @Directive({selector: '[dir]', hostDirectives: [FirstHostDir]})
-    class Host {
-    }
+    class Host {}
 
     @Component({
       template: `
@@ -292,10 +308,9 @@ describe('host directives', () => {
           dir
           #firstHost="firstHost"
           #secondHost="secondHost">{{firstHost.name}} | {{secondHost.name}}</div>
-      `
+      `,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, Host]});
     const fixture = TestBed.createComponent(App);
@@ -373,8 +388,7 @@ describe('host directives', () => {
     }
 
     @Component({template: '<div dir></div>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, Dir]});
     const fixture = TestBed.createComponent(App);
@@ -443,8 +457,7 @@ describe('host directives', () => {
       }
 
       @Component({template: '<div dir></div>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
       const fixture = TestBed.createComponent(App);
@@ -526,8 +539,7 @@ describe('host directives', () => {
       }
 
       @Component({template: '<parent plain-dir="PlainDir on parent"></parent>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Parent, Child, PlainDir]});
       const fixture = TestBed.createComponent(App);
@@ -604,8 +616,12 @@ describe('host directives', () => {
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
-      expect(logs).toEqual(
-          ['HostDir - hello', 'OtherHostDir - hello', 'HostComp - hello', 'PlainDir - hello']);
+      expect(logs).toEqual([
+        'HostDir - hello',
+        'OtherHostDir - hello',
+        'HostComp - hello',
+        'PlainDir - hello',
+      ]);
 
       logs = [];
       fixture.componentInstance.inputValue = 'changed';
@@ -631,8 +647,10 @@ describe('host directives', () => {
         }
       }
 
-      @Directive(
-          {standalone: true, host: {'other-host-dir-attr': 'true', '(click)': 'handleClick()'}})
+      @Directive({
+        standalone: true,
+        host: {'other-host-dir-attr': 'true', '(click)': 'handleClick()'},
+      })
       class OtherHostDir {
         handleClick() {
           clicks.push('OtherHostDir');
@@ -642,7 +660,7 @@ describe('host directives', () => {
       @Directive({
         selector: '[dir]',
         host: {'host-attr': 'true', '(click)': 'handleClick()'},
-        hostDirectives: [HostDir, OtherHostDir]
+        hostDirectives: [HostDir, OtherHostDir],
       })
       class Dir {
         handleClick() {
@@ -651,8 +669,7 @@ describe('host directives', () => {
       }
 
       @Component({template: '<button dir></button>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
       const fixture = TestBed.createComponent(App);
@@ -660,9 +677,9 @@ describe('host directives', () => {
 
       const host = fixture.nativeElement.querySelector('[dir]');
 
-      expect(host.outerHTML)
-          .toBe(
-              '<button host-dir-attr="true" other-host-dir-attr="true" host-attr="true" dir=""></button>');
+      expect(host.outerHTML).toBe(
+        '<button host-dir-attr="true" other-host-dir-attr="true" host-attr="true" dir=""></button>',
+      );
 
       host.click();
       fixture.detectChanges();
@@ -670,31 +687,25 @@ describe('host directives', () => {
       expect(clicks).toEqual(['HostDir', 'OtherHostDir', 'Dir']);
     });
 
-    it('should have the host bindings take precedence over the ones from the host directives',
-       () => {
-         @Directive({standalone: true, host: {'id': 'host-dir'}})
-         class HostDir {
-         }
+    it('should have the host bindings take precedence over the ones from the host directives', () => {
+      @Directive({standalone: true, host: {'id': 'host-dir'}})
+      class HostDir {}
 
-         @Directive({standalone: true, host: {'id': 'other-host-dir'}})
-         class OtherHostDir {
-         }
+      @Directive({standalone: true, host: {'id': 'other-host-dir'}})
+      class OtherHostDir {}
 
-         @Directive(
-             {selector: '[dir]', host: {'id': 'host'}, hostDirectives: [HostDir, OtherHostDir]})
-         class Dir {
-         }
+      @Directive({selector: '[dir]', host: {'id': 'host'}, hostDirectives: [HostDir, OtherHostDir]})
+      class Dir {}
 
-         @Component({template: '<div dir></div>'})
-         class App {
-         }
+      @Component({template: '<div dir></div>'})
+      class App {}
 
-         TestBed.configureTestingModule({declarations: [App, Dir]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
+      TestBed.configureTestingModule({declarations: [App, Dir]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.querySelector('[dir]').getAttribute('id')).toBe('host');
-       });
+      expect(fixture.nativeElement.querySelector('[dir]').getAttribute('id')).toBe('host');
+    });
   });
 
   describe('dependency injection', () => {
@@ -728,8 +739,7 @@ describe('host directives', () => {
       }
 
       @Component({template: '<div dir></div>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Host]});
       const fixture = TestBed.createComponent(App);
@@ -812,8 +822,7 @@ describe('host directives', () => {
       }
 
       @Component({template: '<div dir></div>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Host]});
       const fixture = TestBed.createComponent(App);
@@ -827,80 +836,76 @@ describe('host directives', () => {
       expect(secondHostDirInstance.host).toBe(hostInstance);
     });
 
-    it('should give precedence to the DI tokens from the host over the host directive tokens',
-       () => {
-         const token = new InjectionToken<string>('token');
-         let hostInstance!: Host;
-         let firstHostDirInstance!: FirstHostDir;
-         let secondHostDirInstance!: SecondHostDir;
-
-         @Directive({standalone: true, providers: [{provide: token, useValue: 'SecondDir'}]})
-         class SecondHostDir {
-           tokenValue = inject(token);
-
-           constructor() {
-             secondHostDirInstance = this;
-           }
-         }
-
-         @Directive({
-           standalone: true,
-           hostDirectives: [SecondHostDir],
-           providers: [{provide: token, useValue: 'FirstDir'}]
-         })
-         class FirstHostDir {
-           tokenValue = inject(token);
-
-           constructor() {
-             firstHostDirInstance = this;
-           }
-         }
-
-         @Directive({
-           selector: '[dir]',
-           hostDirectives: [FirstHostDir],
-           providers: [{provide: token, useValue: 'HostDir'}]
-         })
-         class Host {
-           tokenValue = inject(token);
-
-           constructor() {
-             hostInstance = this;
-           }
-         }
-
-         @Component({template: '<div dir></div>'})
-         class App {
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Host]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         expect(hostInstance instanceof Host).toBe(true);
-         expect(firstHostDirInstance instanceof FirstHostDir).toBe(true);
-         expect(secondHostDirInstance instanceof SecondHostDir).toBe(true);
-
-         expect(hostInstance.tokenValue).toBe('HostDir');
-         expect(firstHostDirInstance.tokenValue).toBe('HostDir');
-         expect(secondHostDirInstance.tokenValue).toBe('HostDir');
-       });
+    it('should give precedence to the DI tokens from the host over the host directive tokens', () => {
+      const token = new InjectionToken<string>('token');
+      let hostInstance!: Host;
+      let firstHostDirInstance!: FirstHostDir;
+      let secondHostDirInstance!: SecondHostDir;
+
+      @Directive({standalone: true, providers: [{provide: token, useValue: 'SecondDir'}]})
+      class SecondHostDir {
+        tokenValue = inject(token);
+
+        constructor() {
+          secondHostDirInstance = this;
+        }
+      }
+
+      @Directive({
+        standalone: true,
+        hostDirectives: [SecondHostDir],
+        providers: [{provide: token, useValue: 'FirstDir'}],
+      })
+      class FirstHostDir {
+        tokenValue = inject(token);
+
+        constructor() {
+          firstHostDirInstance = this;
+        }
+      }
+
+      @Directive({
+        selector: '[dir]',
+        hostDirectives: [FirstHostDir],
+        providers: [{provide: token, useValue: 'HostDir'}],
+      })
+      class Host {
+        tokenValue = inject(token);
+
+        constructor() {
+          hostInstance = this;
+        }
+      }
+
+      @Component({template: '<div dir></div>'})
+      class App {}
+
+      TestBed.configureTestingModule({declarations: [App, Host]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      expect(hostInstance instanceof Host).toBe(true);
+      expect(firstHostDirInstance instanceof FirstHostDir).toBe(true);
+      expect(secondHostDirInstance instanceof SecondHostDir).toBe(true);
+
+      expect(hostInstance.tokenValue).toBe('HostDir');
+      expect(firstHostDirInstance.tokenValue).toBe('HostDir');
+      expect(secondHostDirInstance.tokenValue).toBe('HostDir');
+    });
 
     it('should allow the host to inject tokens from the host directives', () => {
       const firstToken = new InjectionToken<string>('firstToken');
       const secondToken = new InjectionToken<string>('secondToken');
 
       @Directive({standalone: true, providers: [{provide: secondToken, useValue: 'SecondDir'}]})
-      class SecondHostDir {
-      }
+      class SecondHostDir {}
 
       @Directive({
         standalone: true,
         hostDirectives: [SecondHostDir],
-        providers: [{provide: firstToken, useValue: 'FirstDir'}]
+        providers: [{provide: firstToken, useValue: 'FirstDir'}],
       })
-      class FirstHostDir {
-      }
+      class FirstHostDir {}
 
       @Directive({selector: '[dir]', hostDirectives: [FirstHostDir]})
       class Host {
@@ -921,45 +926,41 @@ describe('host directives', () => {
       expect(fixture.componentInstance.host.secondTokenValue).toBe('SecondDir');
     });
 
-    it('should not give precedence to tokens from host directives over ones in viewProviders',
-       () => {
-         const token = new InjectionToken<string>('token');
-         let tokenValue: string|undefined;
+    it('should not give precedence to tokens from host directives over ones in viewProviders', () => {
+      const token = new InjectionToken<string>('token');
+      let tokenValue: string | undefined;
 
-         @Directive({standalone: true, providers: [{provide: token, useValue: 'host-dir'}]})
-         class HostDir {
-         }
+      @Directive({standalone: true, providers: [{provide: token, useValue: 'host-dir'}]})
+      class HostDir {}
 
-         @Component({
-           selector: 'host',
-           hostDirectives: [HostDir],
-           providers: [{provide: token, useValue: 'host'}],
-           template: '<span child></span>',
-         })
-         class Host {
-         }
+      @Component({
+        selector: 'host',
+        hostDirectives: [HostDir],
+        providers: [{provide: token, useValue: 'host'}],
+        template: '<span child></span>',
+      })
+      class Host {}
 
-         @Directive({selector: '[child]'})
-         class Child {
-           constructor() {
-             tokenValue = inject(token);
-           }
-         }
+      @Directive({selector: '[child]'})
+      class Child {
+        constructor() {
+          tokenValue = inject(token);
+        }
+      }
 
-         @Component({template: '<host></host>'})
-         class App {
-         }
+      @Component({template: '<host></host>'})
+      class App {}
 
-         TestBed.configureTestingModule({declarations: [App, Host, Child]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
+      TestBed.configureTestingModule({declarations: [App, Host, Child]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
 
-         expect(tokenValue).toBe('host');
-       });
+      expect(tokenValue).toBe('host');
+    });
 
     it('should not be able to access viewProviders from the host in the host directives', () => {
       const token = new InjectionToken<string>('token');
-      let tokenValue: string|null = null;
+      let tokenValue: string | null = null;
 
       @Directive({standalone: true})
       class HostDir {
@@ -974,12 +975,10 @@ describe('host directives', () => {
         viewProviders: [{provide: token, useValue: 'host'}],
         template: '',
       })
-      class Host {
-      }
+      class Host {}
 
       @Component({template: '<host></host>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Host]});
       const fixture = TestBed.createComponent(App);
@@ -988,29 +987,28 @@ describe('host directives', () => {
       expect(tokenValue).toBe(null);
     });
 
-    it('should throw a circular dependency error if a host and a host directive inject each other',
-       () => {
-         @Directive({standalone: true})
-         class HostDir {
-           host = inject(Host);
-         }
+    it('should throw a circular dependency error if a host and a host directive inject each other', () => {
+      @Directive({standalone: true})
+      class HostDir {
+        host = inject(Host);
+      }
 
-         @Directive({selector: '[dir]', hostDirectives: [HostDir]})
-         class Host {
-           hostDir = inject(HostDir);
-         }
+      @Directive({selector: '[dir]', hostDirectives: [HostDir]})
+      class Host {
+        hostDir = inject(HostDir);
+      }
 
-         @Component({template: '<div dir></div>'})
-         class App {
-         }
+      @Component({template: '<div dir></div>'})
+      class App {}
 
-         TestBed.configureTestingModule({declarations: [App, Host]});
-         expect(() => TestBed.createComponent(App))
-             .toThrowError(/NG0200: Circular dependency in DI detected for HostDir/);
-       });
+      TestBed.configureTestingModule({declarations: [App, Host]});
+      expect(() => TestBed.createComponent(App)).toThrowError(
+        /NG0200: Circular dependency in DI detected for HostDir/,
+      );
+    });
 
     it('should inject a valid ChangeDetectorRef when attached to a component', () => {
-      type InternalChangeDetectorRef = ChangeDetectorRef&{_lView: unknown};
+      type InternalChangeDetectorRef = ChangeDetectorRef & {_lView: unknown};
 
       @Directive({standalone: true})
       class HostDir {
@@ -1050,7 +1048,7 @@ describe('host directives', () => {
 
   describe('outputs', () => {
     it('should not emit to an output of a host directive that has not been exposed', () => {
-      let hostDirectiveInstance: HostDir|undefined;
+      let hostDirectiveInstance: HostDir | undefined;
 
       @Directive({standalone: true, host: {'(click)': 'hasBeenClicked.emit()'}})
       class HostDir {
@@ -1062,8 +1060,7 @@ describe('host directives', () => {
       }
 
       @Directive({selector: '[dir]', hostDirectives: [HostDir]})
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir (hasBeenClicked)="spy()"></button>'})
       class App {
@@ -1089,13 +1086,14 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{
-          directive: HostDir,
-          outputs: ['hasBeenClicked'],
-        }]
+        hostDirectives: [
+          {
+            directive: HostDir,
+            outputs: ['hasBeenClicked'],
+          },
+        ],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir (hasBeenClicked)="spy($event)"></button>'})
       class App {
@@ -1120,14 +1118,13 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: HostDir, outputs: ['hasBeenClicked: wasClicked']}]
+        hostDirectives: [{directive: HostDir, outputs: ['hasBeenClicked: wasClicked']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({
         template: `
-          <button dir (wasClicked)="validSpy($event)" (hasBeenClicked)="invalidSpy($event)"></button>`
+          <button dir (wasClicked)="validSpy($event)" (hasBeenClicked)="invalidSpy($event)"></button>`,
       })
       class App {
         validSpy = jasmine.createSpy('valid spy');
@@ -1153,19 +1150,16 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [
-          {directive: HostDir, outputs: ['wasClicked: clickOccurred']},
-        ]
+        hostDirectives: [{directive: HostDir, outputs: ['wasClicked: clickOccurred']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({
         template: `
           <button
             dir
             (clickOccurred)="validSpy($event)"
-            (hasBeenClicked)="invalidSpy($event)"></button>`
+            (hasBeenClicked)="invalidSpy($event)"></button>`,
       })
       class App {
         validSpy = jasmine.createSpy('valid spy');
@@ -1183,102 +1177,99 @@ describe('host directives', () => {
       expect(fixture.componentInstance.invalidSpy).not.toHaveBeenCalled();
     });
 
-    it('should emit to an output of a host that has the same name as a non-exposed output of a host directive',
-       () => {
-         @Directive({standalone: true, host: {'(click)': 'hasBeenClicked.emit("HostDir")'}})
-         class HostDir {
-           @Output() hasBeenClicked = new EventEmitter<string>();
-         }
-
-         @Directive({
-           selector: '[dir]',
-           hostDirectives: [HostDir],
-           host: {'(click)': 'hasBeenClicked.emit("Dir")'}
-         })
-         class Dir {
-           @Output() hasBeenClicked = new EventEmitter<string>();
-         }
-
-         @Component({template: '<button dir (hasBeenClicked)="spy($event)"></button>'})
-         class App {
-           spy = jasmine.createSpy('click spy');
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Dir]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.spy).toHaveBeenCalledOnceWith('Dir');
-       });
-
-    it('should emit to an output of a host that has the same name as an exposed output of a host directive',
-       () => {
-         @Directive({standalone: true, host: {'(click)': 'hasBeenClicked.emit("HostDir")'}})
-         class HostDir {
-           @Output() hasBeenClicked = new EventEmitter<string>();
-         }
-
-         @Directive({
-           selector: '[dir]',
-           hostDirectives: [{directive: HostDir, outputs: ['hasBeenClicked']}],
-           host: {'(click)': 'hasBeenClicked.emit("Dir")'}
-         })
-         class Dir {
-           @Output() hasBeenClicked = new EventEmitter<string>();
-         }
-
-         @Component({template: '<button dir (hasBeenClicked)="spy($event)"></button>'})
-         class App {
-           spy = jasmine.createSpy('click spy');
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Dir]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.spy).toHaveBeenCalledTimes(2);
-         expect(fixture.componentInstance.spy).toHaveBeenCalledWith('HostDir');
-         expect(fixture.componentInstance.spy).toHaveBeenCalledWith('Dir');
-       });
-
-    it('should emit to an output of a host that has the same name as the alias of a host directive output',
-       () => {
-         @Directive({standalone: true, host: {'(click)': 'hasBeenClicked.emit("HostDir")'}})
-         class HostDir {
-           @Output() hasBeenClicked = new EventEmitter<string>();
-         }
-
-         @Directive({
-           selector: '[dir]',
-           hostDirectives: [{directive: HostDir, outputs: ['hasBeenClicked: wasClicked']}],
-           host: {'(click)': 'wasClicked.emit("Dir")'}
-         })
-         class Dir {
-           @Output() wasClicked = new EventEmitter<string>();
-         }
-
-         @Component({template: '<button dir (wasClicked)="spy($event)"></button>'})
-         class App {
-           spy = jasmine.createSpy('click spy');
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Dir]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.spy).toHaveBeenCalledTimes(2);
-         expect(fixture.componentInstance.spy).toHaveBeenCalledWith('HostDir');
-         expect(fixture.componentInstance.spy).toHaveBeenCalledWith('Dir');
-       });
+    it('should emit to an output of a host that has the same name as a non-exposed output of a host directive', () => {
+      @Directive({standalone: true, host: {'(click)': 'hasBeenClicked.emit("HostDir")'}})
+      class HostDir {
+        @Output() hasBeenClicked = new EventEmitter<string>();
+      }
+
+      @Directive({
+        selector: '[dir]',
+        hostDirectives: [HostDir],
+        host: {'(click)': 'hasBeenClicked.emit("Dir")'},
+      })
+      class Dir {
+        @Output() hasBeenClicked = new EventEmitter<string>();
+      }
+
+      @Component({template: '<button dir (hasBeenClicked)="spy($event)"></button>'})
+      class App {
+        spy = jasmine.createSpy('click spy');
+      }
+
+      TestBed.configureTestingModule({declarations: [App, Dir]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.spy).toHaveBeenCalledOnceWith('Dir');
+    });
+
+    it('should emit to an output of a host that has the same name as an exposed output of a host directive', () => {
+      @Directive({standalone: true, host: {'(click)': 'hasBeenClicked.emit("HostDir")'}})
+      class HostDir {
+        @Output() hasBeenClicked = new EventEmitter<string>();
+      }
+
+      @Directive({
+        selector: '[dir]',
+        hostDirectives: [{directive: HostDir, outputs: ['hasBeenClicked']}],
+        host: {'(click)': 'hasBeenClicked.emit("Dir")'},
+      })
+      class Dir {
+        @Output() hasBeenClicked = new EventEmitter<string>();
+      }
+
+      @Component({template: '<button dir (hasBeenClicked)="spy($event)"></button>'})
+      class App {
+        spy = jasmine.createSpy('click spy');
+      }
+
+      TestBed.configureTestingModule({declarations: [App, Dir]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.spy).toHaveBeenCalledTimes(2);
+      expect(fixture.componentInstance.spy).toHaveBeenCalledWith('HostDir');
+      expect(fixture.componentInstance.spy).toHaveBeenCalledWith('Dir');
+    });
+
+    it('should emit to an output of a host that has the same name as the alias of a host directive output', () => {
+      @Directive({standalone: true, host: {'(click)': 'hasBeenClicked.emit("HostDir")'}})
+      class HostDir {
+        @Output() hasBeenClicked = new EventEmitter<string>();
+      }
+
+      @Directive({
+        selector: '[dir]',
+        hostDirectives: [{directive: HostDir, outputs: ['hasBeenClicked: wasClicked']}],
+        host: {'(click)': 'wasClicked.emit("Dir")'},
+      })
+      class Dir {
+        @Output() wasClicked = new EventEmitter<string>();
+      }
+
+      @Component({template: '<button dir (wasClicked)="spy($event)"></button>'})
+      class App {
+        spy = jasmine.createSpy('click spy');
+      }
+
+      TestBed.configureTestingModule({declarations: [App, Dir]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.spy).toHaveBeenCalledTimes(2);
+      expect(fixture.componentInstance.spy).toHaveBeenCalledWith('HostDir');
+      expect(fixture.componentInstance.spy).toHaveBeenCalledWith('Dir');
+    });
 
     it('should not expose the same output more than once', () => {
       @Directive({standalone: true, host: {'(click)': 'hasBeenClicked.emit()'}})
@@ -1288,10 +1279,9 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: HostDir, outputs: ['hasBeenClicked', 'hasBeenClicked']}]
+        hostDirectives: [{directive: HostDir, outputs: ['hasBeenClicked', 'hasBeenClicked']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir (hasBeenClicked)="spy($event)"></button>'})
       class App {
@@ -1315,15 +1305,13 @@ describe('host directives', () => {
       }
 
       @Directive({standalone: true})
-      class HostDir extends ParentDir {
-      }
+      class HostDir extends ParentDir {}
 
       @Directive({
         selector: '[dir]',
         hostDirectives: [{directive: HostDir, outputs: ['hasBeenClicked']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir (hasBeenClicked)="spy($event)"></button>'})
       class App {
@@ -1353,10 +1341,12 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: ExposedHostDir, outputs: ['hasBeenClicked']}, UnExposedHostDir]
+        hostDirectives: [
+          {directive: ExposedHostDir, outputs: ['hasBeenClicked']},
+          UnExposedHostDir,
+        ],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir (hasBeenClicked)="spy($event)"></button>'})
       class App {
@@ -1374,50 +1364,48 @@ describe('host directives', () => {
       expect(fixture.componentInstance.spy).not.toHaveBeenCalledWith('UnExposedHostDir');
     });
 
-    it('should emit to outputs from different host directives that have been aliased to the same name',
-       () => {
-         @Directive({
-           standalone: true,
-           host: {'(click)': 'firstHasBeenClicked.emit("FirstHostDir")'},
-         })
-         class FirstHostDir {
-           @Output() firstHasBeenClicked = new EventEmitter<string>();
-         }
-
-         @Directive({
-           standalone: true,
-           host: {'(click)': 'secondHasBeenClicked.emit("SecondHostDir")'},
-         })
-         class SecondHostDir {
-           @Output() secondHasBeenClicked = new EventEmitter<string>();
-         }
-
-         @Directive({
-           selector: '[dir]',
-           hostDirectives: [
-             {directive: FirstHostDir, outputs: ['firstHasBeenClicked: wasClicked']},
-             {directive: SecondHostDir, outputs: ['secondHasBeenClicked: wasClicked']}
-           ]
-         })
-         class Dir {
-         }
-
-         @Component({template: '<button dir (wasClicked)="spy($event)"></button>'})
-         class App {
-           spy = jasmine.createSpy('click spy');
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Dir]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         fixture.nativeElement.querySelector('button').click();
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.spy).toHaveBeenCalledTimes(2);
-         expect(fixture.componentInstance.spy).toHaveBeenCalledWith('FirstHostDir');
-         expect(fixture.componentInstance.spy).toHaveBeenCalledWith('SecondHostDir');
-       });
+    it('should emit to outputs from different host directives that have been aliased to the same name', () => {
+      @Directive({
+        standalone: true,
+        host: {'(click)': 'firstHasBeenClicked.emit("FirstHostDir")'},
+      })
+      class FirstHostDir {
+        @Output() firstHasBeenClicked = new EventEmitter<string>();
+      }
+
+      @Directive({
+        standalone: true,
+        host: {'(click)': 'secondHasBeenClicked.emit("SecondHostDir")'},
+      })
+      class SecondHostDir {
+        @Output() secondHasBeenClicked = new EventEmitter<string>();
+      }
+
+      @Directive({
+        selector: '[dir]',
+        hostDirectives: [
+          {directive: FirstHostDir, outputs: ['firstHasBeenClicked: wasClicked']},
+          {directive: SecondHostDir, outputs: ['secondHasBeenClicked: wasClicked']},
+        ],
+      })
+      class Dir {}
+
+      @Component({template: '<button dir (wasClicked)="spy($event)"></button>'})
+      class App {
+        spy = jasmine.createSpy('click spy');
+      }
+
+      TestBed.configureTestingModule({declarations: [App, Dir]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      fixture.nativeElement.querySelector('button').click();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.spy).toHaveBeenCalledTimes(2);
+      expect(fixture.componentInstance.spy).toHaveBeenCalledWith('FirstHostDir');
+      expect(fixture.componentInstance.spy).toHaveBeenCalledWith('SecondHostDir');
+    });
 
     it('should emit to an output of an inherited host directive that has been exposed', () => {
       @Directive({standalone: true, host: {'(click)': 'hasBeenClicked.emit("hello")'}})
@@ -1426,17 +1414,17 @@ describe('host directives', () => {
       }
 
       @Directive({
-        hostDirectives: [{
-          directive: HostDir,
-          outputs: ['hasBeenClicked'],
-        }]
+        hostDirectives: [
+          {
+            directive: HostDir,
+            outputs: ['hasBeenClicked'],
+          },
+        ],
       })
-      class Parent {
-      }
+      class Parent {}
 
       @Directive({selector: '[dir]'})
-      class Dir extends Parent {
-      }
+      class Dir extends Parent {}
 
       @Component({template: '<button dir (hasBeenClicked)="spy($event)"></button>'})
       class App {
@@ -1462,8 +1450,7 @@ describe('host directives', () => {
       }
 
       @Directive({selector: '[dir]', hostDirectives: [HostDir]})
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir [color]="color"></button>'})
       class App {
@@ -1485,8 +1472,7 @@ describe('host directives', () => {
       }
 
       @Directive({selector: '[dir]', hostDirectives: [{directive: HostDir, inputs: ['color']}]})
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir [color]="color"></button>'})
       class App {
@@ -1512,10 +1498,9 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: HostDir, inputs: ['color: buttonColor']}]
+        hostDirectives: [{directive: HostDir, inputs: ['color: buttonColor']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir [buttonColor]="color"></button>'})
       class App {
@@ -1541,10 +1526,9 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: HostDir, inputs: ['colorAlias: buttonColor']}]
+        hostDirectives: [{directive: HostDir, inputs: ['colorAlias: buttonColor']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir [buttonColor]="color"></button>'})
       class App {
@@ -1562,131 +1546,126 @@ describe('host directives', () => {
       expect(fixture.componentInstance.hostDir.color).toBe('green');
     });
 
-    it('should set an input of a host that has the same name as a non-exposed input of a host directive',
-       () => {
-         @Directive({standalone: true})
-         class HostDir {
-           @Input() color?: string;
-         }
-
-         @Directive({
-           selector: '[dir]',
-           hostDirectives: [HostDir],
-         })
-         class Dir {
-           @Input() color?: string;
-         }
-
-         @Component({template: '<button dir [color]="color"></button>'})
-         class App {
-           @ViewChild(Dir) dir!: Dir;
-           @ViewChild(HostDir) hostDir!: HostDir;
-           color = 'red';
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Dir]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         const {dir, hostDir} = fixture.componentInstance;
-
-         expect(dir.color).toBe('red');
-         expect(hostDir.color).toBe(undefined);
-
-         fixture.componentInstance.color = 'green';
-         fixture.detectChanges();
-
-         expect(dir.color).toBe('green');
-         expect(hostDir.color).toBe(undefined);
-       });
-
-    it('should set an input of a host that has the same name as an exposed input of a host directive',
-       () => {
-         @Directive({standalone: true})
-         class HostDir {
-           @Input() color?: string;
-         }
-
-         @Directive({selector: '[dir]', hostDirectives: [{directive: HostDir, inputs: ['color']}]})
-         class Dir {
-           @Input() color?: string;
-         }
-
-         @Component({template: '<button dir [color]="color"></button>'})
-         class App {
-           @ViewChild(Dir) dir!: Dir;
-           @ViewChild(HostDir) hostDir!: HostDir;
-           color = 'red';
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Dir]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         const {dir, hostDir} = fixture.componentInstance;
-
-         expect(dir.color).toBe('red');
-         expect(hostDir.color).toBe('red');
-
-         fixture.componentInstance.color = 'green';
-         fixture.detectChanges();
-
-         expect(dir.color).toBe('green');
-         expect(hostDir.color).toBe('green');
-       });
-
-    it('should set an input of a host that has the same name as the alias of a host directive input',
-       () => {
-         @Directive({standalone: true})
-         class HostDir {
-           @Input() color?: string;
-         }
-
-         @Directive({
-           selector: '[dir]',
-           hostDirectives: [{directive: HostDir, inputs: ['color: buttonColor']}]
-         })
-         class Dir {
-           @Input() buttonColor?: string;
-         }
-
-         @Component({template: '<button dir [buttonColor]="color"></button>'})
-         class App {
-           @ViewChild(Dir) dir!: Dir;
-           @ViewChild(HostDir) hostDir!: HostDir;
-           color = 'red';
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Dir]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         const {dir, hostDir} = fixture.componentInstance;
-
-         expect(dir.buttonColor).toBe('red');
-         expect(hostDir.color).toBe('red');
-
-         fixture.componentInstance.color = 'green';
-         fixture.detectChanges();
-
-         expect(dir.buttonColor).toBe('green');
-         expect(hostDir.color).toBe('green');
-       });
-
-    it('should set an inherited input of a host directive', () => {
-      @Directive()
-      class ParentDir {
+    it('should set an input of a host that has the same name as a non-exposed input of a host directive', () => {
+      @Directive({standalone: true})
+      class HostDir {
+        @Input() color?: string;
+      }
+
+      @Directive({
+        selector: '[dir]',
+        hostDirectives: [HostDir],
+      })
+      class Dir {
         @Input() color?: string;
       }
 
+      @Component({template: '<button dir [color]="color"></button>'})
+      class App {
+        @ViewChild(Dir) dir!: Dir;
+        @ViewChild(HostDir) hostDir!: HostDir;
+        color = 'red';
+      }
+
+      TestBed.configureTestingModule({declarations: [App, Dir]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      const {dir, hostDir} = fixture.componentInstance;
+
+      expect(dir.color).toBe('red');
+      expect(hostDir.color).toBe(undefined);
+
+      fixture.componentInstance.color = 'green';
+      fixture.detectChanges();
+
+      expect(dir.color).toBe('green');
+      expect(hostDir.color).toBe(undefined);
+    });
+
+    it('should set an input of a host that has the same name as an exposed input of a host directive', () => {
       @Directive({standalone: true})
-      class HostDir extends ParentDir {
+      class HostDir {
+        @Input() color?: string;
+      }
+
+      @Directive({selector: '[dir]', hostDirectives: [{directive: HostDir, inputs: ['color']}]})
+      class Dir {
+        @Input() color?: string;
+      }
+
+      @Component({template: '<button dir [color]="color"></button>'})
+      class App {
+        @ViewChild(Dir) dir!: Dir;
+        @ViewChild(HostDir) hostDir!: HostDir;
+        color = 'red';
+      }
+
+      TestBed.configureTestingModule({declarations: [App, Dir]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      const {dir, hostDir} = fixture.componentInstance;
+
+      expect(dir.color).toBe('red');
+      expect(hostDir.color).toBe('red');
+
+      fixture.componentInstance.color = 'green';
+      fixture.detectChanges();
+
+      expect(dir.color).toBe('green');
+      expect(hostDir.color).toBe('green');
+    });
+
+    it('should set an input of a host that has the same name as the alias of a host directive input', () => {
+      @Directive({standalone: true})
+      class HostDir {
+        @Input() color?: string;
       }
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: HostDir, inputs: ['color']}],
+        hostDirectives: [{directive: HostDir, inputs: ['color: buttonColor']}],
       })
       class Dir {
+        @Input() buttonColor?: string;
+      }
+
+      @Component({template: '<button dir [buttonColor]="color"></button>'})
+      class App {
+        @ViewChild(Dir) dir!: Dir;
+        @ViewChild(HostDir) hostDir!: HostDir;
+        color = 'red';
+      }
+
+      TestBed.configureTestingModule({declarations: [App, Dir]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      const {dir, hostDir} = fixture.componentInstance;
+
+      expect(dir.buttonColor).toBe('red');
+      expect(hostDir.color).toBe('red');
+
+      fixture.componentInstance.color = 'green';
+      fixture.detectChanges();
+
+      expect(dir.buttonColor).toBe('green');
+      expect(hostDir.color).toBe('green');
+    });
+
+    it('should set an inherited input of a host directive', () => {
+      @Directive()
+      class ParentDir {
+        @Input() color?: string;
       }
 
+      @Directive({standalone: true})
+      class HostDir extends ParentDir {}
+
+      @Directive({
+        selector: '[dir]',
+        hostDirectives: [{directive: HostDir, inputs: ['color']}],
+      })
+      class Dir {}
+
       @Component({template: '<button dir [color]="color"></button>'})
       class App {
         @ViewChild(HostDir) hostDir!: HostDir;
@@ -1718,10 +1697,9 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: ExposedHostDir, inputs: ['color']}, UnExposedHostDir]
+        hostDirectives: [{directive: ExposedHostDir, inputs: ['color']}, UnExposedHostDir],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir [color]="color"></button>'})
       class App {
@@ -1745,49 +1723,47 @@ describe('host directives', () => {
       expect(unExposedHostDir.color).toBe(undefined);
     });
 
-    it('should set inputs from different host directives that have been aliased to the same name',
-       () => {
-         @Directive({standalone: true})
-         class FirstHostDir {
-           @Input() firstColor?: string;
-         }
-
-         @Directive({standalone: true})
-         class SecondHostDir {
-           @Input() secondColor?: string;
-         }
-
-         @Directive({
-           selector: '[dir]',
-           hostDirectives: [
-             {directive: FirstHostDir, inputs: ['firstColor: buttonColor']},
-             {directive: SecondHostDir, inputs: ['secondColor: buttonColor']}
-           ]
-         })
-         class Dir {
-         }
-
-         @Component({template: '<button dir [buttonColor]="color"></button>'})
-         class App {
-           @ViewChild(FirstHostDir) firstHostDir!: FirstHostDir;
-           @ViewChild(SecondHostDir) secondHostDir!: SecondHostDir;
-           color = 'red';
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Dir]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         const {firstHostDir, secondHostDir} = fixture.componentInstance;
-
-         expect(firstHostDir.firstColor).toBe('red');
-         expect(secondHostDir.secondColor).toBe('red');
-
-         fixture.componentInstance.color = 'green';
-         fixture.detectChanges();
-
-         expect(firstHostDir.firstColor).toBe('green');
-         expect(secondHostDir.secondColor).toBe('green');
-       });
+    it('should set inputs from different host directives that have been aliased to the same name', () => {
+      @Directive({standalone: true})
+      class FirstHostDir {
+        @Input() firstColor?: string;
+      }
+
+      @Directive({standalone: true})
+      class SecondHostDir {
+        @Input() secondColor?: string;
+      }
+
+      @Directive({
+        selector: '[dir]',
+        hostDirectives: [
+          {directive: FirstHostDir, inputs: ['firstColor: buttonColor']},
+          {directive: SecondHostDir, inputs: ['secondColor: buttonColor']},
+        ],
+      })
+      class Dir {}
+
+      @Component({template: '<button dir [buttonColor]="color"></button>'})
+      class App {
+        @ViewChild(FirstHostDir) firstHostDir!: FirstHostDir;
+        @ViewChild(SecondHostDir) secondHostDir!: SecondHostDir;
+        color = 'red';
+      }
+
+      TestBed.configureTestingModule({declarations: [App, Dir]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      const {firstHostDir, secondHostDir} = fixture.componentInstance;
+
+      expect(firstHostDir.firstColor).toBe('red');
+      expect(secondHostDir.secondColor).toBe('red');
+
+      fixture.componentInstance.color = 'green';
+      fixture.detectChanges();
+
+      expect(firstHostDir.firstColor).toBe('green');
+      expect(secondHostDir.secondColor).toBe('green');
+    });
 
     it('should not set a static input of a host directive that has not been exposed', () => {
       @Directive({standalone: true})
@@ -1796,8 +1772,7 @@ describe('host directives', () => {
       }
 
       @Directive({selector: '[dir]', hostDirectives: [HostDir]})
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir color="red"></button>'})
       class App {
@@ -1818,8 +1793,7 @@ describe('host directives', () => {
       }
 
       @Directive({selector: '[dir]', hostDirectives: [{directive: HostDir, inputs: ['color']}]})
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir color="red"></button>'})
       class App {
@@ -1840,11 +1814,33 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: HostDir, inputs: ['color: buttonColor']}]
+        hostDirectives: [{directive: HostDir, inputs: ['color: buttonColor']}],
       })
-      class Dir {
+      class Dir {}
+
+      @Component({template: '<button dir buttonColor="red"></button>'})
+      class App {
+        @ViewChild(HostDir) hostDir!: HostDir;
       }
 
+      TestBed.configureTestingModule({declarations: [App, Dir]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.hostDir.color).toBe('red');
+    });
+
+    it('should alias to the public name of a static host directive input, not the private one', () => {
+      @Directive({standalone: true})
+      class HostDir {
+        @Input('colorAlias') color?: string;
+      }
+
+      @Directive({
+        selector: '[dir]',
+        hostDirectives: [{directive: HostDir, inputs: ['colorAlias: buttonColor']}],
+      })
+      class Dir {}
+
       @Component({template: '<button dir buttonColor="red"></button>'})
       class App {
         @ViewChild(HostDir) hostDir!: HostDir;
@@ -1856,147 +1852,116 @@ describe('host directives', () => {
       expect(fixture.componentInstance.hostDir.color).toBe('red');
     });
 
-    it('should alias to the public name of a static host directive input, not the private one',
-       () => {
-         @Directive({standalone: true})
-         class HostDir {
-           @Input('colorAlias') color?: string;
-         }
-
-         @Directive({
-           selector: '[dir]',
-           hostDirectives: [{directive: HostDir, inputs: ['colorAlias: buttonColor']}]
-         })
-         class Dir {
-         }
-
-         @Component({template: '<button dir buttonColor="red"></button>'})
-         class App {
-           @ViewChild(HostDir) hostDir!: HostDir;
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Dir]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         expect(fixture.componentInstance.hostDir.color).toBe('red');
-       });
-
-    it('should set a static input that was exposed from one host directive, but not another',
-       () => {
-         @Directive({standalone: true})
-         class ExposedHostDir {
-           @Input() color?: string;
-         }
-
-         @Directive({standalone: true})
-         class UnExposedHostDir {
-           @Input() color?: string;
-         }
-
-         @Directive({
-           selector: '[dir]',
-           hostDirectives: [{directive: ExposedHostDir, inputs: ['color']}, UnExposedHostDir]
-         })
-         class Dir {
-         }
-
-         @Component({template: '<button dir color="red"></button>'})
-         class App {
-           @ViewChild(ExposedHostDir) exposedHostDir!: ExposedHostDir;
-           @ViewChild(UnExposedHostDir) unExposedHostDir!: UnExposedHostDir;
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Dir]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.exposedHostDir.color).toBe('red');
-         expect(fixture.componentInstance.unExposedHostDir.color).toBe(undefined);
-       });
-
-    it('should set static inputs from different host directives that have been aliased to the same name',
-       () => {
-         @Directive({standalone: true})
-         class FirstHostDir {
-           @Input() firstColor?: string;
-         }
-
-         @Directive({standalone: true})
-         class SecondHostDir {
-           @Input() secondColor?: string;
-         }
-
-         @Directive({
-           selector: '[dir]',
-           hostDirectives: [
-             {directive: FirstHostDir, inputs: ['firstColor: buttonColor']},
-             {directive: SecondHostDir, inputs: ['secondColor: buttonColor']}
-           ]
-         })
-         class Dir {
-         }
-
-         @Component({template: '<button dir buttonColor="red"></button>'})
-         class App {
-           @ViewChild(FirstHostDir) firstHostDir!: FirstHostDir;
-           @ViewChild(SecondHostDir) secondHostDir!: SecondHostDir;
-           color = 'red';
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Dir]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.firstHostDir.firstColor).toBe('red');
-         expect(fixture.componentInstance.secondHostDir.secondColor).toBe('red');
-       });
-
-    it('should not expose an input under its host directive alias if a host directive is not applied',
-       () => {
-         const logs: string[] = [];
-
-         @Directive({selector: '[host-dir]', standalone: true})
-         class HostDir implements OnChanges {
-           @Input('colorAlias') color?: string;
-
-           ngOnChanges(changes: SimpleChanges) {
-             logs.push(changes['color'].currentValue);
-           }
-         }
-
-         @Directive({
-           selector: '[dir]',
-           standalone: true,
-           hostDirectives: [{directive: HostDir, inputs: ['colorAlias: buttonColor']}]
-         })
-         class Dir {
-         }
-
-         @Component({
-           standalone: true,
-           imports: [Dir, HostDir],
-           // Note that `[dir]` doesn't match on the `button` on purpose.
-           // The wrong behavior would be if the `buttonColor` binding worked on `host-dir`.
-           template: `
+    it('should set a static input that was exposed from one host directive, but not another', () => {
+      @Directive({standalone: true})
+      class ExposedHostDir {
+        @Input() color?: string;
+      }
+
+      @Directive({standalone: true})
+      class UnExposedHostDir {
+        @Input() color?: string;
+      }
+
+      @Directive({
+        selector: '[dir]',
+        hostDirectives: [{directive: ExposedHostDir, inputs: ['color']}, UnExposedHostDir],
+      })
+      class Dir {}
+
+      @Component({template: '<button dir color="red"></button>'})
+      class App {
+        @ViewChild(ExposedHostDir) exposedHostDir!: ExposedHostDir;
+        @ViewChild(UnExposedHostDir) unExposedHostDir!: UnExposedHostDir;
+      }
+
+      TestBed.configureTestingModule({declarations: [App, Dir]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.exposedHostDir.color).toBe('red');
+      expect(fixture.componentInstance.unExposedHostDir.color).toBe(undefined);
+    });
+
+    it('should set static inputs from different host directives that have been aliased to the same name', () => {
+      @Directive({standalone: true})
+      class FirstHostDir {
+        @Input() firstColor?: string;
+      }
+
+      @Directive({standalone: true})
+      class SecondHostDir {
+        @Input() secondColor?: string;
+      }
+
+      @Directive({
+        selector: '[dir]',
+        hostDirectives: [
+          {directive: FirstHostDir, inputs: ['firstColor: buttonColor']},
+          {directive: SecondHostDir, inputs: ['secondColor: buttonColor']},
+        ],
+      })
+      class Dir {}
+
+      @Component({template: '<button dir buttonColor="red"></button>'})
+      class App {
+        @ViewChild(FirstHostDir) firstHostDir!: FirstHostDir;
+        @ViewChild(SecondHostDir) secondHostDir!: SecondHostDir;
+        color = 'red';
+      }
+
+      TestBed.configureTestingModule({declarations: [App, Dir]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.firstHostDir.firstColor).toBe('red');
+      expect(fixture.componentInstance.secondHostDir.secondColor).toBe('red');
+    });
+
+    it('should not expose an input under its host directive alias if a host directive is not applied', () => {
+      const logs: string[] = [];
+
+      @Directive({selector: '[host-dir]', standalone: true})
+      class HostDir implements OnChanges {
+        @Input('colorAlias') color?: string;
+
+        ngOnChanges(changes: SimpleChanges) {
+          logs.push(changes['color'].currentValue);
+        }
+      }
+
+      @Directive({
+        selector: '[dir]',
+        standalone: true,
+        hostDirectives: [{directive: HostDir, inputs: ['colorAlias: buttonColor']}],
+      })
+      class Dir {}
+
+      @Component({
+        standalone: true,
+        imports: [Dir, HostDir],
+        // Note that `[dir]` doesn't match on the `button` on purpose.
+        // The wrong behavior would be if the `buttonColor` binding worked on `host-dir`.
+        template: `
               <span dir [buttonColor]="spanValue"></span>
               <button host-dir [buttonColor]="buttonValue"></button>
-            `
-         })
-         class App {
-           spanValue = 'spanValue';
-           buttonValue = 'buttonValue';
-         }
+            `,
+      })
+      class App {
+        spanValue = 'spanValue';
+        buttonValue = 'buttonValue';
+      }
 
-         TestBed.configureTestingModule({errorOnUnknownProperties: true});
+      TestBed.configureTestingModule({errorOnUnknownProperties: true});
 
-         expect(() => {
-           const fixture = TestBed.createComponent(App);
-           fixture.detectChanges();
-         }).toThrowError(/Can't bind to 'buttonColor' since it isn't a known property of 'button'/);
+      expect(() => {
+        const fixture = TestBed.createComponent(App);
+        fixture.detectChanges();
+      }).toThrowError(/Can't bind to 'buttonColor' since it isn't a known property of 'button'/);
 
-         // The input on the button instance should not have been written to.
-         expect(logs).toEqual(['spanValue']);
-       });
+      // The input on the button instance should not have been written to.
+      expect(logs).toEqual(['spanValue']);
+    });
 
     it('should set the input of an inherited host directive that has been exposed', () => {
       @Directive({standalone: true})
@@ -2005,12 +1970,10 @@ describe('host directives', () => {
       }
 
       @Directive({hostDirectives: [{directive: HostDir, inputs: ['color']}]})
-      class Parent {
-      }
+      class Parent {}
 
       @Directive({selector: '[dir]'})
-      class Dir extends Parent {
-      }
+      class Dir extends Parent {}
 
       @Component({template: '<button dir [color]="color"></button>'})
       class App {
@@ -2031,8 +1994,8 @@ describe('host directives', () => {
 
   describe('ngOnChanges', () => {
     it('should invoke ngOnChanges when an input is set on a host directive', () => {
-      let firstDirChangeEvent: SimpleChanges|undefined;
-      let secondDirChangeEvent: SimpleChanges|undefined;
+      let firstDirChangeEvent: SimpleChanges | undefined;
+      let secondDirChangeEvent: SimpleChanges | undefined;
 
       @Directive({standalone: true})
       class FirstHostDir implements OnChanges {
@@ -2056,11 +2019,10 @@ describe('host directives', () => {
         selector: '[dir]',
         hostDirectives: [
           {directive: FirstHostDir, inputs: ['color']},
-          {directive: SecondHostDir, inputs: ['color']}
+          {directive: SecondHostDir, inputs: ['color']},
         ],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir [color]="color"></button>'})
       class App {
@@ -2071,44 +2033,52 @@ describe('host directives', () => {
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
-      expect(firstDirChangeEvent).toEqual(jasmine.objectContaining({
-        color: jasmine.objectContaining({
-          firstChange: true,
-          previousValue: undefined,
-          currentValue: 'red',
-        })
-      }));
+      expect(firstDirChangeEvent).toEqual(
+        jasmine.objectContaining({
+          color: jasmine.objectContaining({
+            firstChange: true,
+            previousValue: undefined,
+            currentValue: 'red',
+          }),
+        }),
+      );
 
-      expect(secondDirChangeEvent).toEqual(jasmine.objectContaining({
-        color: jasmine.objectContaining({
-          firstChange: true,
-          previousValue: undefined,
-          currentValue: 'red',
-        })
-      }));
+      expect(secondDirChangeEvent).toEqual(
+        jasmine.objectContaining({
+          color: jasmine.objectContaining({
+            firstChange: true,
+            previousValue: undefined,
+            currentValue: 'red',
+          }),
+        }),
+      );
 
       fixture.componentInstance.color = 'green';
       fixture.detectChanges();
 
-      expect(firstDirChangeEvent).toEqual(jasmine.objectContaining({
-        color: jasmine.objectContaining({
-          firstChange: false,
-          previousValue: 'red',
-          currentValue: 'green',
-        })
-      }));
-      expect(secondDirChangeEvent).toEqual(jasmine.objectContaining({
-        color: jasmine.objectContaining({
-          firstChange: false,
-          previousValue: 'red',
-          currentValue: 'green',
-        })
-      }));
+      expect(firstDirChangeEvent).toEqual(
+        jasmine.objectContaining({
+          color: jasmine.objectContaining({
+            firstChange: false,
+            previousValue: 'red',
+            currentValue: 'green',
+          }),
+        }),
+      );
+      expect(secondDirChangeEvent).toEqual(
+        jasmine.objectContaining({
+          color: jasmine.objectContaining({
+            firstChange: false,
+            previousValue: 'red',
+            currentValue: 'green',
+          }),
+        }),
+      );
     });
 
     it('should invoke ngOnChanges when an aliased property is set on a host directive', () => {
-      let firstDirChangeEvent: SimpleChanges|undefined;
-      let secondDirChangeEvent: SimpleChanges|undefined;
+      let firstDirChangeEvent: SimpleChanges | undefined;
+      let secondDirChangeEvent: SimpleChanges | undefined;
 
       @Directive({standalone: true})
       class FirstHostDir implements OnChanges {
@@ -2132,11 +2102,10 @@ describe('host directives', () => {
         selector: '[dir]',
         hostDirectives: [
           {directive: FirstHostDir, inputs: ['firstAlias: buttonColor']},
-          {directive: SecondHostDir, inputs: ['secondAlias: buttonColor']}
+          {directive: SecondHostDir, inputs: ['secondAlias: buttonColor']},
         ],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir [buttonColor]="color"></button>'})
       class App {
@@ -2147,44 +2116,52 @@ describe('host directives', () => {
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
-      expect(firstDirChangeEvent).toEqual(jasmine.objectContaining({
-        color: jasmine.objectContaining({
-          firstChange: true,
-          previousValue: undefined,
-          currentValue: 'red',
-        })
-      }));
+      expect(firstDirChangeEvent).toEqual(
+        jasmine.objectContaining({
+          color: jasmine.objectContaining({
+            firstChange: true,
+            previousValue: undefined,
+            currentValue: 'red',
+          }),
+        }),
+      );
 
-      expect(secondDirChangeEvent).toEqual(jasmine.objectContaining({
-        color: jasmine.objectContaining({
-          firstChange: true,
-          previousValue: undefined,
-          currentValue: 'red',
-        })
-      }));
+      expect(secondDirChangeEvent).toEqual(
+        jasmine.objectContaining({
+          color: jasmine.objectContaining({
+            firstChange: true,
+            previousValue: undefined,
+            currentValue: 'red',
+          }),
+        }),
+      );
 
       fixture.componentInstance.color = 'green';
       fixture.detectChanges();
 
-      expect(firstDirChangeEvent).toEqual(jasmine.objectContaining({
-        color: jasmine.objectContaining({
-          firstChange: false,
-          previousValue: 'red',
-          currentValue: 'green',
-        })
-      }));
-      expect(secondDirChangeEvent).toEqual(jasmine.objectContaining({
-        color: jasmine.objectContaining({
-          firstChange: false,
-          previousValue: 'red',
-          currentValue: 'green',
-        })
-      }));
+      expect(firstDirChangeEvent).toEqual(
+        jasmine.objectContaining({
+          color: jasmine.objectContaining({
+            firstChange: false,
+            previousValue: 'red',
+            currentValue: 'green',
+          }),
+        }),
+      );
+      expect(secondDirChangeEvent).toEqual(
+        jasmine.objectContaining({
+          color: jasmine.objectContaining({
+            firstChange: false,
+            previousValue: 'red',
+            currentValue: 'green',
+          }),
+        }),
+      );
     });
 
     it('should only invoke ngOnChanges on the directives that have exposed an input', () => {
-      let firstDirChangeEvent: SimpleChanges|undefined;
-      let secondDirChangeEvent: SimpleChanges|undefined;
+      let firstDirChangeEvent: SimpleChanges | undefined;
+      let secondDirChangeEvent: SimpleChanges | undefined;
 
       @Directive({standalone: true})
       class FirstHostDir implements OnChanges {
@@ -2208,8 +2185,7 @@ describe('host directives', () => {
         selector: '[dir]',
         hostDirectives: [FirstHostDir, {directive: SecondHostDir, inputs: ['color']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir [color]="color"></button>'})
       class App {
@@ -2221,29 +2197,33 @@ describe('host directives', () => {
       fixture.detectChanges();
 
       expect(firstDirChangeEvent).toBe(undefined);
-      expect(secondDirChangeEvent).toEqual(jasmine.objectContaining({
-        color: jasmine.objectContaining({
-          firstChange: true,
-          previousValue: undefined,
-          currentValue: 'red',
-        })
-      }));
+      expect(secondDirChangeEvent).toEqual(
+        jasmine.objectContaining({
+          color: jasmine.objectContaining({
+            firstChange: true,
+            previousValue: undefined,
+            currentValue: 'red',
+          }),
+        }),
+      );
 
       fixture.componentInstance.color = 'green';
       fixture.detectChanges();
 
       expect(firstDirChangeEvent).toBe(undefined);
-      expect(secondDirChangeEvent).toEqual(jasmine.objectContaining({
-        color: jasmine.objectContaining({
-          firstChange: false,
-          previousValue: 'red',
-          currentValue: 'green',
-        })
-      }));
+      expect(secondDirChangeEvent).toEqual(
+        jasmine.objectContaining({
+          color: jasmine.objectContaining({
+            firstChange: false,
+            previousValue: 'red',
+            currentValue: 'green',
+          }),
+        }),
+      );
     });
 
     it('should invoke ngOnChanges when a static aliased host directive input is set', () => {
-      let latestChangeEvent: SimpleChanges|undefined;
+      let latestChangeEvent: SimpleChanges | undefined;
 
       @Directive({standalone: true})
       class HostDir implements OnChanges {
@@ -2256,26 +2236,26 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: HostDir, inputs: ['colorAlias: buttonColor']}]
+        hostDirectives: [{directive: HostDir, inputs: ['colorAlias: buttonColor']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<button dir buttonColor="red"></button>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
-      expect(latestChangeEvent).toEqual(jasmine.objectContaining({
-        color: jasmine.objectContaining({
-          firstChange: true,
-          previousValue: undefined,
-          currentValue: 'red',
-        })
-      }));
+      expect(latestChangeEvent).toEqual(
+        jasmine.objectContaining({
+          color: jasmine.objectContaining({
+            firstChange: true,
+            previousValue: undefined,
+            currentValue: 'red',
+          }),
+        }),
+      );
     });
   });
 
@@ -2311,12 +2291,10 @@ describe('host directives', () => {
         template: '',
         hostDirectives: [HostDir, OtherHostDir],
       })
-      class Comp {
-      }
+      class Comp {}
 
       @Component({template: '<comp plain-dir></comp>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Comp, PlainDir]});
       const fixture = TestBed.createComponent(App);
@@ -2327,79 +2305,74 @@ describe('host directives', () => {
       expect(otherHostDirInstance instanceof OtherHostDir).toBe(true);
       expect(plainDirInstance instanceof PlainDir).toBe(true);
       expect(getDirectives(componentHost)).toEqual([
-        hostDirInstance, otherHostDirInstance, plainDirInstance
+        hostDirInstance,
+        otherHostDirInstance,
+        plainDirInstance,
       ]);
     });
 
-    it('should be able to retrieve components that have host directives using ng.getComponent',
-       () => {
-         let compInstance!: Comp;
-
-         @Directive({standalone: true})
-         class HostDir {
-         }
-
-         @Component({
-           selector: 'comp',
-           template: '',
-           hostDirectives: [HostDir],
-         })
-         class Comp {
-           constructor() {
-             compInstance = this;
-           }
-         }
-
-         @Component({template: '<comp></comp>'})
-         class App {
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Comp]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         const componentHost = fixture.nativeElement.querySelector('comp');
-
-         expect(compInstance instanceof Comp).toBe(true);
-         expect(getComponent(componentHost)).toBe(compInstance);
-       });
-
-    it('should be able to retrieve components that have host directives using DebugNode.componentInstance',
-       () => {
-         let compInstance!: Comp;
-
-         @Directive({standalone: true})
-         class HostDir {
-         }
-
-         @Component({
-           selector: 'comp',
-           template: '',
-           hostDirectives: [HostDir],
-         })
-         class Comp {
-           constructor() {
-             compInstance = this;
-           }
-         }
-
-         @Component({template: '<comp></comp>'})
-         class App {
-         }
-
-         TestBed.configureTestingModule({declarations: [App, Comp]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         const node = fixture.debugElement.query(By.css('comp'));
-
-         expect(compInstance instanceof Comp).toBe(true);
-         expect(node.componentInstance).toBe(compInstance);
-       });
+    it('should be able to retrieve components that have host directives using ng.getComponent', () => {
+      let compInstance!: Comp;
 
-    it('should be able to query by a host directive', () => {
       @Directive({standalone: true})
-      class HostDir {
+      class HostDir {}
+
+      @Component({
+        selector: 'comp',
+        template: '',
+        hostDirectives: [HostDir],
+      })
+      class Comp {
+        constructor() {
+          compInstance = this;
+        }
+      }
+
+      @Component({template: '<comp></comp>'})
+      class App {}
+
+      TestBed.configureTestingModule({declarations: [App, Comp]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      const componentHost = fixture.nativeElement.querySelector('comp');
+
+      expect(compInstance instanceof Comp).toBe(true);
+      expect(getComponent(componentHost)).toBe(compInstance);
+    });
+
+    it('should be able to retrieve components that have host directives using DebugNode.componentInstance', () => {
+      let compInstance!: Comp;
+
+      @Directive({standalone: true})
+      class HostDir {}
+
+      @Component({
+        selector: 'comp',
+        template: '',
+        hostDirectives: [HostDir],
+      })
+      class Comp {
+        constructor() {
+          compInstance = this;
+        }
       }
 
+      @Component({template: '<comp></comp>'})
+      class App {}
+
+      TestBed.configureTestingModule({declarations: [App, Comp]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      const node = fixture.debugElement.query(By.css('comp'));
+
+      expect(compInstance instanceof Comp).toBe(true);
+      expect(node.componentInstance).toBe(compInstance);
+    });
+
+    it('should be able to query by a host directive', () => {
+      @Directive({standalone: true})
+      class HostDir {}
+
       @Component({
         selector: 'comp',
         template: '',
@@ -2448,7 +2421,7 @@ describe('host directives', () => {
 
       @Directive({
         standalone: true,
-        host: {'host-dir-attr': '', 'class': 'host-dir', 'style': 'height: 50px'}
+        host: {'host-dir-attr': '', 'class': 'host-dir', 'style': 'height: 50px'},
       })
       class HostDir {
         constructor() {
@@ -2471,10 +2444,10 @@ describe('host directives', () => {
       const {fixture} = createRootComponent(HostComp);
 
       expect(logs).toEqual(['HostDir', 'HostComp']);
-      expect(fixture.nativeElement.innerHTML)
-          .toContain(
-              '<host host-dir-attr="" host-attr="" class="host-dir dir" ' +
-              'style="height: 50px; width: 50px;"></host>');
+      expect(fixture.nativeElement.innerHTML).toContain(
+        '<host host-dir-attr="" host-attr="" class="host-dir dir" ' +
+          'style="height: 50px; width: 50px;"></host>',
+      );
     });
 
     it('should invoke lifecycle hooks on host directives applied to a root component', () => {
@@ -2548,7 +2521,7 @@ describe('host directives', () => {
           host: {
             '[attr.host-dir-only]': 'value',
             '[attr.shadowed-attr]': 'value',
-          }
+          },
         })
         class HostDir {
           value = 'host-dir';
@@ -2559,7 +2532,7 @@ describe('host directives', () => {
           host: {
             '[attr.other-host-dir-only]': 'value',
             '[attr.shadowed-attr]': 'value',
-          }
+          },
         })
         class OtherHostDir {
           value = 'other-host-dir';
@@ -2570,7 +2543,7 @@ describe('host directives', () => {
           host: {
             '[attr.shadowed-attr]': 'value',
           },
-          hostDirectives: [HostDir, OtherHostDir]
+          hostDirectives: [HostDir, OtherHostDir],
         })
         class HostComp {
           value = 'host';
@@ -2581,20 +2554,20 @@ describe('host directives', () => {
         const {fixture, ref} = createRootComponent(HostComp);
         fixture.detectChanges();
 
-        expect(fixture.nativeElement.innerHTML)
-            .toContain(
-                '<host-comp host-dir-only="host-dir" shadowed-attr="host" ' +
-                'other-host-dir-only="other-host-dir"></host-comp>');
+        expect(fixture.nativeElement.innerHTML).toContain(
+          '<host-comp host-dir-only="host-dir" shadowed-attr="host" ' +
+            'other-host-dir-only="other-host-dir"></host-comp>',
+        );
 
         ref.instance.hostDir.value = 'host-dir-changed';
         ref.instance.otherHostDir.value = 'other-host-dir-changed';
         ref.instance.value = 'host-changed';
         fixture.detectChanges();
 
-        expect(fixture.nativeElement.innerHTML)
-            .toContain(
-                '<host-comp host-dir-only="host-dir-changed" shadowed-attr="host-changed" ' +
-                'other-host-dir-only="other-host-dir-changed"></host-comp>');
+        expect(fixture.nativeElement.innerHTML).toContain(
+          '<host-comp host-dir-only="host-dir-changed" shadowed-attr="host-changed" ' +
+            'other-host-dir-only="other-host-dir-changed"></host-comp>',
+        );
       });
 
       it('should support host event bindings coming from the host directives', () => {
@@ -2617,7 +2590,7 @@ describe('host directives', () => {
         @Component({
           selector: 'host-comp',
           host: {'(click)': 'handleClick()'},
-          hostDirectives: [HostDir, OtherHostDir]
+          hostDirectives: [HostDir, OtherHostDir],
         })
         class HostComp {
           handleClick() {
@@ -2633,28 +2606,24 @@ describe('host directives', () => {
         expect(logs).toEqual(['HostDir', 'OtherHostDir', 'HostComp']);
       });
 
-      it('should have the host bindings of the root component take precedence over the ones from the host directives',
-         () => {
-           @Directive({standalone: true, host: {'id': 'host-dir'}})
-           class HostDir {
-           }
+      it('should have the host bindings of the root component take precedence over the ones from the host directives', () => {
+        @Directive({standalone: true, host: {'id': 'host-dir'}})
+        class HostDir {}
 
-           @Directive({standalone: true, host: {'id': 'other-host-dir'}})
-           class OtherHostDir {
-           }
+        @Directive({standalone: true, host: {'id': 'other-host-dir'}})
+        class OtherHostDir {}
 
-           @Component({
-             template: '',
-             host: {'id': 'host'},
-             hostDirectives: [HostDir, OtherHostDir],
-           })
-           class HostComp {
-           }
+        @Component({
+          template: '',
+          host: {'id': 'host'},
+          hostDirectives: [HostDir, OtherHostDir],
+        })
+        class HostComp {}
 
-           const {ref, fixture} = createRootComponent(HostComp);
-           fixture.detectChanges();
-           expect(ref.location.nativeElement.getAttribute('id')).toBe('host');
-         });
+        const {ref, fixture} = createRootComponent(HostComp);
+        fixture.detectChanges();
+        expect(ref.location.nativeElement.getAttribute('id')).toBe('host');
+      });
     });
 
     describe('dependency injection', () => {
@@ -2671,8 +2640,7 @@ describe('host directives', () => {
         }
 
         @Component({hostDirectives: [HostDir], template: ''})
-        class HostComp {
-        }
+        class HostComp {}
 
         const {ref} = createRootComponent(HostComp);
 
@@ -2700,74 +2668,71 @@ describe('host directives', () => {
         expect(ref.instance.hostDir).toBe(hostDirInstance);
       });
 
-      it('should give precedence to the DI tokens from the root component over the host directive tokens',
-         () => {
-           const token = new InjectionToken<string>('token');
-           let hostInstance!: HostComp;
-           let firstHostDirInstance!: FirstHostDir;
-           let secondHostDirInstance!: SecondHostDir;
-
-           @Directive({standalone: true, providers: [{provide: token, useValue: 'SecondDir'}]})
-           class SecondHostDir {
-             tokenValue = inject(token);
-
-             constructor() {
-               secondHostDirInstance = this;
-             }
-           }
-
-           @Directive({
-             standalone: true,
-             hostDirectives: [SecondHostDir],
-             providers: [{provide: token, useValue: 'FirstDir'}]
-           })
-           class FirstHostDir {
-             tokenValue = inject(token);
-
-             constructor() {
-               firstHostDirInstance = this;
-             }
-           }
-
-           @Component({
-             template: '',
-             hostDirectives: [FirstHostDir],
-             providers: [{provide: token, useValue: 'HostDir'}]
-           })
-           class HostComp {
-             tokenValue = inject(token);
-
-             constructor() {
-               hostInstance = this;
-             }
-           }
-
-           createRootComponent(HostComp);
-
-           expect(hostInstance instanceof HostComp).toBe(true);
-           expect(firstHostDirInstance instanceof FirstHostDir).toBe(true);
-           expect(secondHostDirInstance instanceof SecondHostDir).toBe(true);
-
-           expect(hostInstance.tokenValue).toBe('HostDir');
-           expect(firstHostDirInstance.tokenValue).toBe('HostDir');
-           expect(secondHostDirInstance.tokenValue).toBe('HostDir');
-         });
+      it('should give precedence to the DI tokens from the root component over the host directive tokens', () => {
+        const token = new InjectionToken<string>('token');
+        let hostInstance!: HostComp;
+        let firstHostDirInstance!: FirstHostDir;
+        let secondHostDirInstance!: SecondHostDir;
+
+        @Directive({standalone: true, providers: [{provide: token, useValue: 'SecondDir'}]})
+        class SecondHostDir {
+          tokenValue = inject(token);
+
+          constructor() {
+            secondHostDirInstance = this;
+          }
+        }
+
+        @Directive({
+          standalone: true,
+          hostDirectives: [SecondHostDir],
+          providers: [{provide: token, useValue: 'FirstDir'}],
+        })
+        class FirstHostDir {
+          tokenValue = inject(token);
+
+          constructor() {
+            firstHostDirInstance = this;
+          }
+        }
+
+        @Component({
+          template: '',
+          hostDirectives: [FirstHostDir],
+          providers: [{provide: token, useValue: 'HostDir'}],
+        })
+        class HostComp {
+          tokenValue = inject(token);
+
+          constructor() {
+            hostInstance = this;
+          }
+        }
+
+        createRootComponent(HostComp);
+
+        expect(hostInstance instanceof HostComp).toBe(true);
+        expect(firstHostDirInstance instanceof FirstHostDir).toBe(true);
+        expect(secondHostDirInstance instanceof SecondHostDir).toBe(true);
+
+        expect(hostInstance.tokenValue).toBe('HostDir');
+        expect(firstHostDirInstance.tokenValue).toBe('HostDir');
+        expect(secondHostDirInstance.tokenValue).toBe('HostDir');
+      });
 
       it('should allow the root component to inject tokens from the host directives', () => {
         const firstToken = new InjectionToken<string>('firstToken');
         const secondToken = new InjectionToken<string>('secondToken');
 
         @Directive({standalone: true, providers: [{provide: secondToken, useValue: 'SecondDir'}]})
-        class SecondHostDir {
-        }
+        class SecondHostDir {}
 
         @Directive({
           standalone: true,
           hostDirectives: [SecondHostDir],
-          providers: [{provide: firstToken, useValue: 'FirstDir'}]
+          providers: [{provide: firstToken, useValue: 'FirstDir'}],
         })
-        class FirstHostDir {
-        }
+        class FirstHostDir {}
 
         @Component({template: '', hostDirectives: [FirstHostDir]})
         class HostComp {
@@ -2782,59 +2747,58 @@ describe('host directives', () => {
     });
 
     describe('inputs', () => {
-      it('should set inputs on root component and all host directive instances using `setInput`',
-         () => {
-           let hostDirInstance!: HostDir;
-           let otherHostDirInstance!: OtherHostDir;
-
-           @Directive({standalone: true})
-           class HostDir {
-             @Input() color?: string;
-
-             constructor() {
-               hostDirInstance = this;
-             }
-           }
-
-           @Directive({standalone: true})
-           class OtherHostDir {
-             @Input() color?: string;
-
-             constructor() {
-               otherHostDirInstance = this;
-             }
-           }
-
-           @Component({
-             selector: 'host-comp',
-             hostDirectives: [
-               {
-                 directive: HostDir,
-                 inputs: ['color'],
-               },
-               {
-                 directive: OtherHostDir,
-                 inputs: ['color'],
-               }
-             ]
-           })
-           class HostComp {
-             @Input() color?: string;
-           }
-
-           const {fixture, ref} = createRootComponent(HostComp);
-           fixture.detectChanges();
-
-           expect(hostDirInstance.color).toBe(undefined);
-           expect(otherHostDirInstance.color).toBe(undefined);
-           expect(ref.instance.color).toBe(undefined);
-
-           ref.setInput('color', 'green');
-
-           expect(hostDirInstance.color).toBe('green');
-           expect(otherHostDirInstance.color).toBe('green');
-           expect(ref.instance.color).toBe('green');
-         });
+      it('should set inputs on root component and all host directive instances using `setInput`', () => {
+        let hostDirInstance!: HostDir;
+        let otherHostDirInstance!: OtherHostDir;
+
+        @Directive({standalone: true})
+        class HostDir {
+          @Input() color?: string;
+
+          constructor() {
+            hostDirInstance = this;
+          }
+        }
+
+        @Directive({standalone: true})
+        class OtherHostDir {
+          @Input() color?: string;
+
+          constructor() {
+            otherHostDirInstance = this;
+          }
+        }
+
+        @Component({
+          selector: 'host-comp',
+          hostDirectives: [
+            {
+              directive: HostDir,
+              inputs: ['color'],
+            },
+            {
+              directive: OtherHostDir,
+              inputs: ['color'],
+            },
+          ],
+        })
+        class HostComp {
+          @Input() color?: string;
+        }
+
+        const {fixture, ref} = createRootComponent(HostComp);
+        fixture.detectChanges();
+
+        expect(hostDirInstance.color).toBe(undefined);
+        expect(otherHostDirInstance.color).toBe(undefined);
+        expect(ref.instance.color).toBe(undefined);
+
+        ref.setInput('color', 'green');
+
+        expect(hostDirInstance.color).toBe('green');
+        expect(otherHostDirInstance.color).toBe('green');
+        expect(ref.instance.color).toBe('green');
+      });
 
       it('should set inputs that only exist on a host directive when using `setInput`', () => {
         let hostDirInstance!: HostDir;
@@ -2850,13 +2814,15 @@ describe('host directives', () => {
 
         @Component({
           selector: 'host-comp',
-          hostDirectives: [{
-            directive: HostDir,
-            inputs: ['color'],
-          }]
+          hostDirectives: [
+            {
+              directive: HostDir,
+              inputs: ['color'],
+            },
+          ],
         })
         class HostComp {
-          color?: string;  // Note: intentionally not marked as @Input.
+          color?: string; // Note: intentionally not marked as @Input.
         }
 
         const {ref} = createRootComponent(HostComp);
@@ -2884,7 +2850,7 @@ describe('host directives', () => {
 
         @Component({
           selector: 'host-comp',
-          hostDirectives: [HostDir]  // Note: `color` input has intentionally not been exposed.
+          hostDirectives: [HostDir], // Note: `color` input has intentionally not been exposed.
         })
         class HostComp {
           @Input() color?: string;
@@ -2916,13 +2882,14 @@ describe('host directives', () => {
 
         @Component({
           selector: 'host-comp',
-          hostDirectives: [{
-            directive: HostDir,
-            inputs: ['alias: customAlias'],
-          }]
+          hostDirectives: [
+            {
+              directive: HostDir,
+              inputs: ['alias: customAlias'],
+            },
+          ],
         })
-        class HostComp {
-        }
+        class HostComp {}
 
         const {ref, fixture} = createRootComponent(HostComp);
         fixture.detectChanges();
@@ -2930,10 +2897,12 @@ describe('host directives', () => {
         expect(hostDirInstance.color).toBe(undefined);
 
         // Check that the old alias or the original name aren't available first.
-        expect(() => ref.setInput('color', 'hello'))
-            .toThrowError(/NG0303: Can't set value of the 'color' input/);
-        expect(() => ref.setInput('alias', 'hello'))
-            .toThrowError(/NG0303: Can't set value of the 'alias' input/);
+        expect(() => ref.setInput('color', 'hello')).toThrowError(
+          /NG0303: Can't set value of the 'color' input/,
+        );
+        expect(() => ref.setInput('alias', 'hello')).toThrowError(
+          /NG0303: Can't set value of the 'alias' input/,
+        );
         expect(hostDirInstance.color).toBe(undefined);
 
         // Check the alias.
@@ -2942,7 +2911,7 @@ describe('host directives', () => {
       });
 
       it('should invoke ngOnChanges when setting host directive inputs using setInput', () => {
-        let latestChanges: SimpleChanges|undefined;
+        let latestChanges: SimpleChanges | undefined;
 
         @Directive({standalone: true})
         class HostDir implements OnChanges {
@@ -2957,8 +2926,7 @@ describe('host directives', () => {
           selector: 'host-comp',
           hostDirectives: [{directive: HostDir, inputs: ['alias: customAlias']}],
         })
-        class HostComp {
-        }
+        class HostComp {}
 
         const {ref, fixture} = createRootComponent(HostComp);
 
@@ -2967,49 +2935,49 @@ describe('host directives', () => {
         ref.setInput('customAlias', 'red');
         fixture.detectChanges();
 
-        expect(latestChanges).toEqual(jasmine.objectContaining({
-          color: jasmine.objectContaining({
-            previousValue: undefined,
-            currentValue: 'red',
-            firstChange: true,
-          })
-        }));
+        expect(latestChanges).toEqual(
+          jasmine.objectContaining({
+            color: jasmine.objectContaining({
+              previousValue: undefined,
+              currentValue: 'red',
+              firstChange: true,
+            }),
+          }),
+        );
 
         ref.setInput('customAlias', 'green');
         fixture.detectChanges();
 
-        expect(latestChanges).toEqual(jasmine.objectContaining({
-          color: jasmine.objectContaining({
-            previousValue: 'red',
-            currentValue: 'green',
-            firstChange: false,
-          })
-        }));
+        expect(latestChanges).toEqual(
+          jasmine.objectContaining({
+            color: jasmine.objectContaining({
+              previousValue: 'red',
+              currentValue: 'green',
+              firstChange: false,
+            }),
+          }),
+        );
       });
     });
 
     it('should throw an error if a host directive is applied multiple times to a root component', () => {
       @Directive({standalone: true})
-      class DuplicateHostDir {
-      }
+      class DuplicateHostDir {}
 
       @Directive({standalone: true, hostDirectives: [DuplicateHostDir]})
-      class HostDir {
-      }
+      class HostDir {}
 
       @Directive({standalone: true, hostDirectives: [HostDir, DuplicateHostDir]})
-      class Dir {
-      }
+      class Dir {}
 
       @Component({
         hostDirectives: [Dir],
       })
-      class HostComp {
-      }
+      class HostComp {}
 
-      expect(() => createRootComponent(HostComp))
-          .toThrowError(
-              'NG0309: Directive DuplicateHostDir matches multiple times on the same element. Directives can only match an element once.');
+      expect(() => createRootComponent(HostComp)).toThrowError(
+        'NG0309: Directive DuplicateHostDir matches multiple times on the same element. Directives can only match an element once.',
+      );
     });
   });
 
@@ -3018,66 +2986,58 @@ describe('host directives', () => {
       class HostDir {}
 
       @Directive({selector: '[dir]', hostDirectives: [HostDir]})
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<div dir></div>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
 
-      expect(() => TestBed.createComponent(App))
-          .toThrowError(
-              'NG0307: Could not resolve metadata for host directive HostDir. ' +
-              'Make sure that the HostDir class is annotated with an @Directive decorator.');
+      expect(() => TestBed.createComponent(App)).toThrowError(
+        'NG0307: Could not resolve metadata for host directive HostDir. ' +
+          'Make sure that the HostDir class is annotated with an @Directive decorator.',
+      );
     });
 
     it('should throw an error if a host directive is not standalone', () => {
       @Directive({standalone: false})
-      class HostDir {
-      }
+      class HostDir {}
 
       @Directive({selector: '[dir]', hostDirectives: [HostDir]})
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<div dir></div>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
 
-      expect(() => TestBed.createComponent(App))
-          .toThrowError('NG0308: Host directive HostDir must be standalone.');
+      expect(() => TestBed.createComponent(App)).toThrowError(
+        'NG0308: Host directive HostDir must be standalone.',
+      );
     });
 
     it('should throw an error if a host directive matches multiple times in a template', () => {
       @Directive({standalone: true, selector: '[dir]'})
-      class HostDir {
-      }
+      class HostDir {}
 
       @Directive({
         selector: '[dir]',
         hostDirectives: [HostDir],
         standalone: true,
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<div dir></div>', standalone: true, imports: [HostDir, Dir]})
-      class App {
-      }
+      class App {}
 
-      expect(() => TestBed.createComponent(App))
-          .toThrowError(
-              'NG0309: Directive HostDir matches multiple times on the same element. Directives can only match an element once.');
+      expect(() => TestBed.createComponent(App)).toThrowError(
+        'NG0309: Directive HostDir matches multiple times on the same element. Directives can only match an element once.',
+      );
     });
 
     it('should throw an error if a host directive matches multiple times on a component', () => {
       @Directive({standalone: true, selector: '[dir]'})
-      class HostDir {
-      }
+      class HostDir {}
 
       @Component({
         selector: 'comp',
@@ -3085,8 +3045,7 @@ describe('host directives', () => {
         standalone: true,
         template: '',
       })
-      class Comp {
-      }
+      class Comp {}
 
       const baseAppMetadata = {
         template: '<comp dir></comp>',
@@ -3094,69 +3053,61 @@ describe('host directives', () => {
       };
 
       const expectedError =
-          'NG0309: Directive HostDir matches multiple times on the same element. Directives can only match an element once.';
+        'NG0309: Directive HostDir matches multiple times on the same element. Directives can only match an element once.';
 
       // Note: the definition order in `imports` seems to affect the
       // directive matching order so we test both scenarios.
       expect(() => {
         @Component({...baseAppMetadata, imports: [Comp, HostDir]})
-        class App {
-        }
+        class App {}
         TestBed.createComponent(App);
       }).toThrowError(expectedError);
 
       expect(() => {
         @Component({...baseAppMetadata, imports: [HostDir, Comp]})
-        class App {
-        }
+        class App {}
         TestBed.createComponent(App);
       }).toThrowError(expectedError);
     });
 
     it('should throw an error if a host directive appears multiple times in a chain', () => {
       @Directive({standalone: true})
-      class DuplicateHostDir {
-      }
+      class DuplicateHostDir {}
 
       @Directive({standalone: true, hostDirectives: [DuplicateHostDir]})
-      class HostDir {
-      }
+      class HostDir {}
 
       @Directive({
         selector: '[dir]',
         hostDirectives: [HostDir, DuplicateHostDir],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<div dir></div>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
 
-      expect(() => TestBed.createComponent(App))
-          .toThrowError(
-              'NG0309: Directive DuplicateHostDir matches multiple times on the same element. Directives can only match an element once.');
+      expect(() => TestBed.createComponent(App)).toThrowError(
+        'NG0309: Directive DuplicateHostDir matches multiple times on the same element. Directives can only match an element once.',
+      );
     });
 
     it('should throw an error if a host directive is a component', () => {
       @Component({standalone: true, template: '', selector: 'host-comp'})
-      class HostComp {
-      }
+      class HostComp {}
 
       @Directive({selector: '[dir]', hostDirectives: [HostComp]})
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<div dir></div>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
 
-      expect(() => TestBed.createComponent(App))
-          .toThrowError('NG0310: Host directive HostComp cannot be a component.');
+      expect(() => TestBed.createComponent(App)).toThrowError(
+        'NG0310: Host directive HostComp cannot be a component.',
+      );
     });
 
     it('should throw an error if a host directive output does not exist', () => {
@@ -3167,23 +3118,23 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{
-          directive: HostDir,
-          outputs: ['doesNotExist'],
-        }]
+        hostDirectives: [
+          {
+            directive: HostDir,
+            outputs: ['doesNotExist'],
+          },
+        ],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<div dir></div>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
 
-      expect(() => TestBed.createComponent(App))
-          .toThrowError(
-              'NG0311: Directive HostDir does not have an output with a public name of doesNotExist.');
+      expect(() => TestBed.createComponent(App)).toThrowError(
+        'NG0311: Directive HostDir does not have an output with a public name of doesNotExist.',
+      );
     });
 
     it('should throw an error if a host directive output alias does not exist', () => {
@@ -3194,23 +3145,23 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{
-          directive: HostDir,
-          outputs: ['foo'],
-        }]
+        hostDirectives: [
+          {
+            directive: HostDir,
+            outputs: ['foo'],
+          },
+        ],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<div dir></div>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
 
-      expect(() => TestBed.createComponent(App))
-          .toThrowError(
-              'NG0311: Directive HostDir does not have an output with a public name of foo.');
+      expect(() => TestBed.createComponent(App)).toThrowError(
+        'NG0311: Directive HostDir does not have an output with a public name of foo.',
+      );
     });
 
     it('should throw an error if a host directive input does not exist', () => {
@@ -3221,23 +3172,23 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{
-          directive: HostDir,
-          inputs: ['doesNotExist'],
-        }]
+        hostDirectives: [
+          {
+            directive: HostDir,
+            inputs: ['doesNotExist'],
+          },
+        ],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<div dir></div>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
 
-      expect(() => TestBed.createComponent(App))
-          .toThrowError(
-              'NG0311: Directive HostDir does not have an input with a public name of doesNotExist.');
+      expect(() => TestBed.createComponent(App)).toThrowError(
+        'NG0311: Directive HostDir does not have an input with a public name of doesNotExist.',
+      );
     });
 
     it('should throw an error if a host directive input alias does not exist', () => {
@@ -3250,18 +3201,16 @@ describe('host directives', () => {
         selector: '[dir]',
         hostDirectives: [{directive: HostDir, inputs: ['foo']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({template: '<div dir></div>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
 
-      expect(() => TestBed.createComponent(App))
-          .toThrowError(
-              'NG0311: Directive HostDir does not have an input with a public name of foo.');
+      expect(() => TestBed.createComponent(App)).toThrowError(
+        'NG0311: Directive HostDir does not have an input with a public name of foo.',
+      );
     });
 
     it('should throw an error if a host directive tries to alias to an existing input', () => {
@@ -3273,24 +3222,22 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: HostDir, inputs: ['colorAlias: buttonColor']}]
+        hostDirectives: [{directive: HostDir, inputs: ['colorAlias: buttonColor']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({imports: [Dir, HostDir], template: '<button dir buttonColor="red"></button>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
 
       expect(() => {
         const fixture = TestBed.createComponent(App);
         fixture.detectChanges();
-      })
-          .toThrowError(
-              'NG0312: Cannot alias input colorAlias of host directive HostDir ' +
-              'to buttonColor, because it already has a different input with the same public name.');
+      }).toThrowError(
+        'NG0312: Cannot alias input colorAlias of host directive HostDir ' +
+          'to buttonColor, because it already has a different input with the same public name.',
+      );
     });
 
     it('should throw an error if a host directive tries to alias to an existing input alias', () => {
@@ -3302,27 +3249,25 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: HostDir, inputs: ['colorAlias: buttonColorAlias']}]
+        hostDirectives: [{directive: HostDir, inputs: ['colorAlias: buttonColorAlias']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({
         imports: [Dir, HostDir],
         template: '<button dir buttonColorAlias="red"></button>',
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
 
       expect(() => {
         const fixture = TestBed.createComponent(App);
         fixture.detectChanges();
-      })
-          .toThrowError(
-              'NG0312: Cannot alias input colorAlias of host directive HostDir ' +
-              'to buttonColorAlias, because it already has a different input with the same public name.');
+      }).toThrowError(
+        'NG0312: Cannot alias input colorAlias of host directive HostDir ' +
+          'to buttonColorAlias, because it already has a different input with the same public name.',
+      );
     });
 
     it('should not throw if a host directive input aliases to the same name', () => {
@@ -3333,14 +3278,12 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: HostDir, inputs: ['color: buttonColor']}]
+        hostDirectives: [{directive: HostDir, inputs: ['color: buttonColor']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({imports: [Dir, HostDir], template: '<button dir buttonColor="red"></button>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
 
@@ -3359,10 +3302,9 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: HostDir, outputs: ['clickedAlias: tappedAlias']}]
+        hostDirectives: [{directive: HostDir, outputs: ['clickedAlias: tappedAlias']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({
         imports: [Dir, HostDir],
@@ -3377,10 +3319,10 @@ describe('host directives', () => {
       expect(() => {
         const fixture = TestBed.createComponent(App);
         fixture.detectChanges();
-      })
-          .toThrowError(
-              'NG0312: Cannot alias output clickedAlias of host directive HostDir ' +
-              'to tappedAlias, because it already has a different output with the same public name.');
+      }).toThrowError(
+        'NG0312: Cannot alias output clickedAlias of host directive HostDir ' +
+          'to tappedAlias, because it already has a different output with the same public name.',
+      );
     });
 
     it('should not throw if a host directive output aliases to the same name', () => {
@@ -3391,10 +3333,9 @@ describe('host directives', () => {
 
       @Directive({
         selector: '[dir]',
-        hostDirectives: [{directive: HostDir, outputs: ['clicked: wasClicked']}]
+        hostDirectives: [{directive: HostDir, outputs: ['clicked: wasClicked']}],
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({
         imports: [Dir, HostDir],
@@ -3425,14 +3366,12 @@ describe('host directives', () => {
       @Directive({
         standalone: true,
         selector: '[host]',
-        hostDirectives: [{directive: Trigger, outputs: ['triggerOpened']}]
+        hostDirectives: [{directive: Trigger, outputs: ['triggerOpened']}],
       })
-      class Host {
-      }
+      class Host {}
 
       @Component({template: '<div host></div>', standalone: true, imports: [Host]})
-      class App {
-      }
+      class App {}
 
       expect(() => {
         const fixture = TestBed.createComponent(App);
@@ -3451,20 +3390,17 @@ describe('host directives', () => {
         selector: '[trigger]',
         standalone: true,
       })
-      class Trigger extends Base {
-      }
+      class Trigger extends Base {}
 
       @Directive({
         standalone: true,
         selector: '[host]',
-        hostDirectives: [{directive: Trigger, outputs: ['triggerOpened: hostOpened']}]
+        hostDirectives: [{directive: Trigger, outputs: ['triggerOpened: hostOpened']}],
       })
-      class Host {
-      }
+      class Host {}
 
       @Component({template: '<div host></div>', standalone: true, imports: [Host]})
-      class App {
-      }
+      class App {}
 
       expect(() => {
         const fixture = TestBed.createComponent(App);
@@ -3474,30 +3410,25 @@ describe('host directives', () => {
 
     it('should throw an error if a duplicate directive is inherited', () => {
       @Directive({standalone: true})
-      class HostDir {
-      }
+      class HostDir {}
 
       @Directive({standalone: true, hostDirectives: [HostDir]})
-      class Grandparent {
-      }
+      class Grandparent {}
 
       @Directive({standalone: true})
-      class Parent extends Grandparent {
-      }
+      class Parent extends Grandparent {}
 
       @Directive({selector: '[dir]', hostDirectives: [HostDir]})
-      class Dir extends Parent {
-      }
+      class Dir extends Parent {}
 
       @Component({template: '<div dir></div>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, Dir]});
 
-      expect(() => TestBed.createComponent(App))
-          .toThrowError(
-              'NG0309: Directive HostDir matches multiple times on the same element. Directives can only match an element once.');
+      expect(() => TestBed.createComponent(App)).toThrowError(
+        'NG0309: Directive HostDir matches multiple times on the same element. Directives can only match an element once.',
+      );
     });
   });
 });
diff --git a/packages/core/test/acceptance/i18n_spec.ts b/packages/core/test/acceptance/i18n_spec.ts
index 9cc60d94baf1c..284fd4a8bb4a2 100644
--- a/packages/core/test/acceptance/i18n_spec.ts
+++ b/packages/core/test/acceptance/i18n_spec.ts
@@ -13,7 +13,26 @@ import {CommonModule, DOCUMENT, registerLocaleData} from '@angular/common';
 import localeEs from '@angular/common/locales/es';
 import localeRo from '@angular/common/locales/ro';
 import {computeMsgId} from '@angular/compiler';
-import {Attribute, Component, ContentChild, ContentChildren, Directive, ElementRef, HostBinding, Input, LOCALE_ID, NO_ERRORS_SCHEMA, Pipe, PipeTransform, QueryList, TemplateRef, Type, ViewChild, ViewContainerRef, ɵsetDocument} from '@angular/core';
+import {
+  Attribute,
+  Component,
+  ContentChild,
+  ContentChildren,
+  Directive,
+  ElementRef,
+  HostBinding,
+  Input,
+  LOCALE_ID,
+  NO_ERRORS_SCHEMA,
+  Pipe,
+  PipeTransform,
+  QueryList,
+  TemplateRef,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+  ɵsetDocument,
+} from '@angular/core';
 import {HEADER_OFFSET} from '@angular/core/src/render3/interfaces/view';
 import {getComponentLView} from '@angular/core/src/render3/util/discovery_utils';
 import {DeferBlockBehavior, DeferBlockState, TestBed} from '@angular/core/testing';
@@ -22,8 +41,6 @@ import {By} from '@angular/platform-browser';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 import {BehaviorSubject} from 'rxjs';
 
-
-
 describe('runtime i18n', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -57,14 +74,17 @@ describe('runtime i18n', () => {
   it('should support named interpolations', () => {
     loadTranslations({
       [computeMsgId(' Hello {$USER_NAME}! Emails: {$AMOUNT_OF_EMAILS_RECEIVED} ')]:
-          ' Bonjour {$USER_NAME}! Emails: {$AMOUNT_OF_EMAILS_RECEIVED} '
+        ' Bonjour {$USER_NAME}! Emails: {$AMOUNT_OF_EMAILS_RECEIVED} ',
     });
-    const fixture = initWithTemplate(AppComp, `
+    const fixture = initWithTemplate(
+      AppComp,
+      `
       <div i18n>
         Hello {{ name // i18n(ph="user_name") }}!
         Emails: {{ count // i18n(ph="amount of emails received") }}
       </div>
-    `);
+    `,
+    );
     expect(fixture.nativeElement.innerHTML).toEqual(`<div> Bonjour Angular! Emails: 0 </div>`);
     fixture.componentRef.instance.name = `John`;
     fixture.componentRef.instance.count = 5;
@@ -73,19 +93,24 @@ describe('runtime i18n', () => {
   });
 
   it('should support named interpolations with the same name', () => {
-    loadTranslations(
-        {[computeMsgId(' Hello {$PH_NAME} {$PH_NAME_1}! ')]: ' Bonjour {$PH_NAME} {$PH_NAME_1}! '});
-    const fixture = initWithTemplate(AppComp, `
+    loadTranslations({
+      [computeMsgId(' Hello {$PH_NAME} {$PH_NAME_1}! ')]: ' Bonjour {$PH_NAME} {$PH_NAME_1}! ',
+    });
+    const fixture = initWithTemplate(
+      AppComp,
+      `
       <div i18n>
         Hello {{ name // i18n(ph="ph_name") }} {{ description // i18n(ph="ph_name") }}!
       </div>
-    `);
+    `,
+    );
     expect(fixture.nativeElement.innerHTML).toEqual(`<div> Bonjour Angular Web Framework! </div>`);
     fixture.componentRef.instance.name = 'Other';
     fixture.componentRef.instance.description = 'Backend Framework';
     fixture.detectChanges();
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(`<div> Bonjour Other Backend Framework! </div>`);
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      `<div> Bonjour Other Backend Framework! </div>`,
+    );
   });
 
   it('should support interpolations with custom interpolation config', () => {
@@ -108,15 +133,18 @@ describe('runtime i18n', () => {
   it('should support interpolations with complex expressions', () => {
     loadTranslations({
       [computeMsgId(' {$INTERPOLATION} - {$INTERPOLATION_1} - {$INTERPOLATION_2} ')]:
-          ' {$INTERPOLATION} - {$INTERPOLATION_1} - {$INTERPOLATION_2} (fr) '
+        ' {$INTERPOLATION} - {$INTERPOLATION_1} - {$INTERPOLATION_2} (fr) ',
     });
-    const fixture = initWithTemplate(AppComp, `
+    const fixture = initWithTemplate(
+      AppComp,
+      `
       <div i18n>
         {{ name | uppercase }} -
         {{ obj?.a?.b }} -
         {{ obj?.getA()?.b }}
       </div>
-    `);
+    `,
+    );
     // the `obj` field is not yet defined, so 2nd and 3rd interpolations return empty
     // strings
     expect(fixture.nativeElement.innerHTML).toEqual(`<div> ANGULAR -  -  (fr) </div>`);
@@ -126,60 +154,75 @@ describe('runtime i18n', () => {
       getA: () => ({b: 'value 2'}),
     };
     fixture.detectChanges();
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(`<div> ANGULAR - value 1 - value 2 (fr) </div>`);
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      `<div> ANGULAR - value 1 - value 2 (fr) </div>`,
+    );
   });
 
   it('should support elements', () => {
     loadTranslations({
       [computeMsgId(
-          'Hello {$START_TAG_SPAN}world{$CLOSE_TAG_SPAN} and {$START_TAG_DIV}universe{$CLOSE_TAG_DIV}!',
-          '')]:
-          'Bonjour {$START_TAG_SPAN}monde{$CLOSE_TAG_SPAN} et {$START_TAG_DIV}univers{$CLOSE_TAG_DIV}!'
+        'Hello {$START_TAG_SPAN}world{$CLOSE_TAG_SPAN} and {$START_TAG_DIV}universe{$CLOSE_TAG_DIV}!',
+        '',
+      )]:
+        'Bonjour {$START_TAG_SPAN}monde{$CLOSE_TAG_SPAN} et {$START_TAG_DIV}univers{$CLOSE_TAG_DIV}!',
     });
     const fixture = initWithTemplate(
-        AppComp, `<div i18n>Hello <span>world</span> and <div>universe</div>!</div>`);
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(`<div>Bonjour <span>monde</span> et <div>univers</div>!</div>`);
+      AppComp,
+      `<div i18n>Hello <span>world</span> and <div>universe</div>!</div>`,
+    );
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      `<div>Bonjour <span>monde</span> et <div>univers</div>!</div>`,
+    );
   });
 
   it('should support removing elements', () => {
     loadTranslations({
       [computeMsgId(
-          'Hello {$START_BOLD_TEXT}my{$CLOSE_BOLD_TEXT}{$START_TAG_SPAN}world{$CLOSE_TAG_SPAN}',
-          '')]: 'Bonjour {$START_TAG_SPAN}monde{$CLOSE_TAG_SPAN}'
+        'Hello {$START_BOLD_TEXT}my{$CLOSE_BOLD_TEXT}{$START_TAG_SPAN}world{$CLOSE_TAG_SPAN}',
+        '',
+      )]: 'Bonjour {$START_TAG_SPAN}monde{$CLOSE_TAG_SPAN}',
     });
-    const fixture =
-        initWithTemplate(AppComp, `<div i18n>Hello <b>my</b><span>world</span></div><div>!</div>`);
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(`<div>Bonjour <span>monde</span></div><div>!</div>`);
+    const fixture = initWithTemplate(
+      AppComp,
+      `<div i18n>Hello <b>my</b><span>world</span></div><div>!</div>`,
+    );
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      `<div>Bonjour <span>monde</span></div><div>!</div>`,
+    );
   });
 
   it('should support moving elements', () => {
     loadTranslations({
       [computeMsgId(
-          'Hello {$START_TAG_SPAN}world{$CLOSE_TAG_SPAN} and {$START_TAG_DIV}universe{$CLOSE_TAG_DIV}!',
-          '')]:
-          'Bonjour {$START_TAG_DIV}univers{$CLOSE_TAG_DIV} et {$START_TAG_SPAN}monde{$CLOSE_TAG_SPAN}!'
+        'Hello {$START_TAG_SPAN}world{$CLOSE_TAG_SPAN} and {$START_TAG_DIV}universe{$CLOSE_TAG_DIV}!',
+        '',
+      )]:
+        'Bonjour {$START_TAG_DIV}univers{$CLOSE_TAG_DIV} et {$START_TAG_SPAN}monde{$CLOSE_TAG_SPAN}!',
     });
     const fixture = initWithTemplate(
-        AppComp, `<div i18n>Hello <span>world</span> and <div>universe</div>!</div>`);
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(`<div>Bonjour <div>univers</div> et <span>monde</span>!</div>`);
+      AppComp,
+      `<div i18n>Hello <span>world</span> and <div>universe</div>!</div>`,
+    );
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      `<div>Bonjour <div>univers</div> et <span>monde</span>!</div>`,
+    );
   });
 
   it('should support template directives', () => {
     loadTranslations({
       [computeMsgId(
-          'Content: {$START_TAG_DIV}before{$START_TAG_SPAN}middle{$CLOSE_TAG_SPAN}after{$CLOSE_TAG_DIV}!',
-          '')]:
-          'Contenu: {$START_TAG_DIV}avant{$START_TAG_SPAN}milieu{$CLOSE_TAG_SPAN}après{$CLOSE_TAG_DIV}!'
+        'Content: {$START_TAG_DIV}before{$START_TAG_SPAN}middle{$CLOSE_TAG_SPAN}after{$CLOSE_TAG_DIV}!',
+        '',
+      )]:
+        'Contenu: {$START_TAG_DIV}avant{$START_TAG_SPAN}milieu{$CLOSE_TAG_SPAN}après{$CLOSE_TAG_DIV}!',
     });
     const fixture = initWithTemplate(
-        AppComp,
-        `<div i18n>Content: <div *ngIf="visible">before<span>middle</span>after</div>!</div>`);
+      AppComp,
+      `<div i18n>Content: <div *ngIf="visible">before<span>middle</span>after</div>!</div>`,
+    );
     expect(fixture.nativeElement.innerHTML)
-        .toEqual(`<div>Contenu: <div>avant<span>milieu</span>après</div><!--bindings={
+      .toEqual(`<div>Contenu: <div>avant<span>milieu</span>après</div><!--bindings={
   "ng-reflect-ng-if": "true"
 }-->!</div>`);
 
@@ -194,12 +237,15 @@ describe('runtime i18n', () => {
     loadTranslations({
       [computeMsgId('trad {$INTERPOLATION}')]: 'traduction {$INTERPOLATION}',
       [computeMsgId('start {$INTERPOLATION} middle {$INTERPOLATION_1} end')]:
-          'start {$INTERPOLATION_1} middle {$INTERPOLATION} end',
+        'start {$INTERPOLATION_1} middle {$INTERPOLATION} end',
       [computeMsgId(
-          '{$START_TAG_C}trad{$CLOSE_TAG_C}{$START_TAG_D}{$CLOSE_TAG_D}{$START_TAG_E}{$CLOSE_TAG_E}',
-          '')]: '{$START_TAG_E}{$CLOSE_TAG_E}{$START_TAG_C}traduction{$CLOSE_TAG_C}'
+        '{$START_TAG_C}trad{$CLOSE_TAG_C}{$START_TAG_D}{$CLOSE_TAG_D}{$START_TAG_E}{$CLOSE_TAG_E}',
+        '',
+      )]: '{$START_TAG_E}{$CLOSE_TAG_E}{$START_TAG_C}traduction{$CLOSE_TAG_C}',
     });
-    const fixture = initWithTemplate(AppComp, `
+    const fixture = initWithTemplate(
+      AppComp,
+      `
       <div>
         <a i18n>trad {{name}}</a>
         hello
@@ -208,10 +254,11 @@ describe('runtime i18n', () => {
           <d></d>
           <e></e>
         </b>
-      </div>`);
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(
-            `<div><a>traduction Angular</a> hello <b title="start Angular middle 0 end"><e></e><c>traduction</c></b></div>`);
+      </div>`,
+    );
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      `<div><a>traduction Angular</a> hello <b title="start Angular middle 0 end"><e></e><c>traduction</c></b></div>`,
+    );
   });
 
   it('should support multiple sibling i18n blocks', () => {
@@ -220,14 +267,18 @@ describe('runtime i18n', () => {
       [computeMsgId('Section 2')]: 'Section deux',
       [computeMsgId('Section 3')]: 'Section trois',
     });
-    const fixture = initWithTemplate(AppComp, `
+    const fixture = initWithTemplate(
+      AppComp,
+      `
       <div>
         <div i18n>Section 1</div>
         <div i18n>Section 2</div>
         <div i18n>Section 3</div>
-      </div>`);
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(`<div><div>Section un</div><div>Section deux</div><div>Section trois</div></div>`);
+      </div>`,
+    );
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      `<div><div>Section un</div><div>Section deux</div><div>Section trois</div></div>`,
+    );
   });
 
   it('should support multiple sibling i18n blocks inside of a template directive', () => {
@@ -236,38 +287,47 @@ describe('runtime i18n', () => {
       [computeMsgId('Section 2')]: 'Section deux',
       [computeMsgId('Section 3')]: 'Section trois',
     });
-    const fixture = initWithTemplate(AppComp, `
+    const fixture = initWithTemplate(
+      AppComp,
+      `
       <ul *ngFor="let item of [1,2,3]">
         <li i18n>Section 1</li>
         <li i18n>Section 2</li>
         <li i18n>Section 3</li>
-      </ul>`);
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(
-            `<ul><li>Section un</li><li>Section deux</li><li>Section trois</li></ul><ul><li>Section un</li><li>Section deux</li><li>Section trois</li></ul><ul><li>Section un</li><li>Section deux</li><li>Section trois</li></ul><!--bindings={
+      </ul>`,
+    );
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      `<ul><li>Section un</li><li>Section deux</li><li>Section trois</li></ul><ul><li>Section un</li><li>Section deux</li><li>Section trois</li></ul><ul><li>Section un</li><li>Section deux</li><li>Section trois</li></ul><!--bindings={
   "ng-reflect-ng-for-of": "1,2,3"
-}-->`);
+}-->`,
+    );
   });
 
   it('should properly escape quotes in content', () => {
     loadTranslations({
       [computeMsgId('\'Single quotes\' and "Double quotes"')]:
-          '\'Guillemets simples\' et "Guillemets doubles"'
+        '\'Guillemets simples\' et "Guillemets doubles"',
     });
-    const fixture =
-        initWithTemplate(AppComp, `<div i18n>'Single quotes' and "Double quotes"</div>`);
+    const fixture = initWithTemplate(
+      AppComp,
+      `<div i18n>'Single quotes' and "Double quotes"</div>`,
+    );
 
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual('<div>\'Guillemets simples\' et "Guillemets doubles"</div>');
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      '<div>\'Guillemets simples\' et "Guillemets doubles"</div>',
+    );
   });
 
   it('should correctly bind to context in nested template', () => {
     loadTranslations({[computeMsgId('Item {$INTERPOLATION}')]: 'Article {$INTERPOLATION}'});
-    const fixture = initWithTemplate(AppComp, `
+    const fixture = initWithTemplate(
+      AppComp,
+      `
           <div *ngFor='let id of items'>
             <div i18n>Item {{ id }}</div>
           </div>
-        `);
+        `,
+    );
 
     const element = fixture.nativeElement;
     for (let i = 0; i < element.children.length; i++) {
@@ -290,8 +350,10 @@ describe('runtime i18n', () => {
   it('should work correctly with event listeners', () => {
     loadTranslations({[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}'});
 
-    @Component(
-        {selector: 'app-comp', template: `<div i18n (click)="onClick()">Hello {{ name }}</div>`})
+    @Component({
+      selector: 'app-comp',
+      template: `<div i18n (click)="onClick()">Hello {{ name }}</div>`,
+    })
     class ListenerComp {
       name = `Angular`;
       clicks = 0;
@@ -318,20 +380,21 @@ describe('runtime i18n', () => {
   it('should support local refs inside i18n block', () => {
     loadTranslations({
       [computeMsgId(
-          '{$START_TAG_NG_CONTAINER} One {$CLOSE_TAG_NG_CONTAINER}' +
+        '{$START_TAG_NG_CONTAINER} One {$CLOSE_TAG_NG_CONTAINER}' +
           '{$START_TAG_DIV} Two {$CLOSE_TAG_DIV}' +
           '{$START_TAG_SPAN} Three {$CLOSE_TAG_SPAN}' +
           '{$START_TAG_NG_TEMPLATE} Four {$CLOSE_TAG_NG_TEMPLATE}' +
-          '{$START_TAG_NG_CONTAINER_1}{$CLOSE_TAG_NG_CONTAINER}')]:
-
-          '{$START_TAG_NG_CONTAINER} Une {$CLOSE_TAG_NG_CONTAINER}' +
-          '{$START_TAG_DIV} Deux {$CLOSE_TAG_DIV}' +
-          '{$START_TAG_SPAN} Trois {$CLOSE_TAG_SPAN}' +
-          '{$START_TAG_NG_TEMPLATE} Quatre {$CLOSE_TAG_NG_TEMPLATE}' +
-          '{$START_TAG_NG_CONTAINER_1}{$CLOSE_TAG_NG_CONTAINER}'
-
+          '{$START_TAG_NG_CONTAINER_1}{$CLOSE_TAG_NG_CONTAINER}',
+      )]:
+        '{$START_TAG_NG_CONTAINER} Une {$CLOSE_TAG_NG_CONTAINER}' +
+        '{$START_TAG_DIV} Deux {$CLOSE_TAG_DIV}' +
+        '{$START_TAG_SPAN} Trois {$CLOSE_TAG_SPAN}' +
+        '{$START_TAG_NG_TEMPLATE} Quatre {$CLOSE_TAG_NG_TEMPLATE}' +
+        '{$START_TAG_NG_CONTAINER_1}{$CLOSE_TAG_NG_CONTAINER}',
     });
-    const fixture = initWithTemplate(AppComp, `
+    const fixture = initWithTemplate(
+      AppComp,
+      `
       <div i18n>
         <ng-container #localRefA> One </ng-container>
         <div #localRefB> Two </div>
@@ -340,154 +403,169 @@ describe('runtime i18n', () => {
         <ng-template #localRefD> Four </ng-template>
         <ng-container *ngTemplateOutlet="localRefD"></ng-container>
       </div>
-    `);
+    `,
+    );
     expect(fixture.nativeElement.textContent).toBe(' Une  Deux  Trois  Quatre ');
   });
 
   it('should handle local refs correctly in case an element is removed in translation', () => {
     loadTranslations({
       [computeMsgId(
-          '{$START_TAG_NG_CONTAINER} One {$CLOSE_TAG_NG_CONTAINER}' +
+        '{$START_TAG_NG_CONTAINER} One {$CLOSE_TAG_NG_CONTAINER}' +
           '{$START_TAG_DIV} Two {$CLOSE_TAG_DIV}' +
-          '{$START_TAG_SPAN} Three {$CLOSE_TAG_SPAN}')]: '{$START_TAG_DIV} Deux {$CLOSE_TAG_DIV}'
+          '{$START_TAG_SPAN} Three {$CLOSE_TAG_SPAN}',
+      )]: '{$START_TAG_DIV} Deux {$CLOSE_TAG_DIV}',
     });
-    const fixture = initWithTemplate(AppComp, `
+    const fixture = initWithTemplate(
+      AppComp,
+      `
       <div i18n>
         <ng-container #localRefA> One </ng-container>
         <div #localRefB> Two </div>
         <span #localRefC> Three </span>
       </div>
-    `);
+    `,
+    );
     expect(fixture.nativeElement.textContent).toBe(' Deux ');
   });
 
   it('should support conditional blocks', () => {
     loadTranslations({
       [computeMsgId(
-          'Content: {$START_BLOCK_IF}before{$START_TAG_SPAN}zero{$CLOSE_TAG_SPAN}after' +
-              '{$CLOSE_BLOCK_IF}{$START_BLOCK_ELSE_IF}before{$START_TAG_DIV}one{$CLOSE_TAG_DIV}' +
-              'after{$CLOSE_BLOCK_ELSE_IF}{$START_BLOCK_ELSE}before{$START_TAG_BUTTON}' +
-              'otherwise{$CLOSE_TAG_BUTTON}after{$CLOSE_BLOCK_ELSE}!',
-          '')]: 'Contenido: {$START_BLOCK_IF}antes{$START_TAG_SPAN}cero{$CLOSE_TAG_SPAN}después' +
-          '{$CLOSE_BLOCK_IF}{$START_BLOCK_ELSE_IF}antes{$START_TAG_DIV}uno{$CLOSE_TAG_DIV}' +
-          'después{$CLOSE_BLOCK_ELSE_IF}{$START_BLOCK_ELSE}antes{$START_TAG_BUTTON}' +
-          'si no{$CLOSE_TAG_BUTTON}después{$CLOSE_BLOCK_ELSE}!'
+        'Content: {$START_BLOCK_IF}before{$START_TAG_SPAN}zero{$CLOSE_TAG_SPAN}after' +
+          '{$CLOSE_BLOCK_IF}{$START_BLOCK_ELSE_IF}before{$START_TAG_DIV}one{$CLOSE_TAG_DIV}' +
+          'after{$CLOSE_BLOCK_ELSE_IF}{$START_BLOCK_ELSE}before{$START_TAG_BUTTON}' +
+          'otherwise{$CLOSE_TAG_BUTTON}after{$CLOSE_BLOCK_ELSE}!',
+        '',
+      )]:
+        'Contenido: {$START_BLOCK_IF}antes{$START_TAG_SPAN}cero{$CLOSE_TAG_SPAN}después' +
+        '{$CLOSE_BLOCK_IF}{$START_BLOCK_ELSE_IF}antes{$START_TAG_DIV}uno{$CLOSE_TAG_DIV}' +
+        'después{$CLOSE_BLOCK_ELSE_IF}{$START_BLOCK_ELSE}antes{$START_TAG_BUTTON}' +
+        'si no{$CLOSE_TAG_BUTTON}después{$CLOSE_BLOCK_ELSE}!',
     });
 
     const fixture = initWithTemplate(
-        AppComp,
-        '<div i18n>Content: @if (count === 0) {before<span>zero</span>after} ' +
-            '@else if (count === 1) {before<div>one</div>after} ' +
-            '@else {before<button>otherwise</button>after}!</div>');
+      AppComp,
+      '<div i18n>Content: @if (count === 0) {before<span>zero</span>after} ' +
+        '@else if (count === 1) {before<div>one</div>after} ' +
+        '@else {before<button>otherwise</button>after}!</div>',
+    );
 
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(
-            '<div>Contenido: antes<span>cero</span>después<!--container--><!--container-->' +
-            '<!--container-->!</div>');
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      '<div>Contenido: antes<span>cero</span>después<!--container--><!--container-->' +
+        '<!--container-->!</div>',
+    );
 
     fixture.componentInstance.count = 1;
     fixture.detectChanges();
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(
-            '<div>Contenido: <!--container-->antes<div>uno</div>después<!--container-->' +
-            '<!--container-->!</div>');
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      '<div>Contenido: <!--container-->antes<div>uno</div>después<!--container-->' +
+        '<!--container-->!</div>',
+    );
 
     fixture.componentInstance.count = 2;
     fixture.detectChanges();
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(
-            '<div>Contenido: <!--container--><!--container-->antes<button>si no</button>después' +
-            '<!--container-->!</div>');
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      '<div>Contenido: <!--container--><!--container-->antes<button>si no</button>después' +
+        '<!--container-->!</div>',
+    );
   });
 
   it('should support switch blocks', () => {
     loadTranslations({
       [computeMsgId(
-          'Content: {$START_BLOCK_CASE}before{$START_TAG_SPAN}zero{$CLOSE_TAG_SPAN}after' +
-              '{$CLOSE_BLOCK_CASE}{$START_BLOCK_CASE_1}before{$START_TAG_DIV}one' +
-              '{$CLOSE_TAG_DIV}after{$CLOSE_BLOCK_CASE}{$START_BLOCK_DEFAULT}before' +
-              '{$START_TAG_BUTTON}otherwise{$CLOSE_TAG_BUTTON}after{$CLOSE_BLOCK_DEFAULT}',
-          '')]: 'Contenido: {$START_BLOCK_CASE}antes{$START_TAG_SPAN}cero{$CLOSE_TAG_SPAN}después' +
-          '{$CLOSE_BLOCK_CASE}{$START_BLOCK_CASE_1}antes{$START_TAG_DIV}uno' +
-          '{$CLOSE_TAG_DIV}después{$CLOSE_BLOCK_CASE}{$START_BLOCK_DEFAULT}antes' +
-          '{$START_TAG_BUTTON}si no{$CLOSE_TAG_BUTTON}después{$CLOSE_BLOCK_DEFAULT}'
+        'Content: {$START_BLOCK_CASE}before{$START_TAG_SPAN}zero{$CLOSE_TAG_SPAN}after' +
+          '{$CLOSE_BLOCK_CASE}{$START_BLOCK_CASE_1}before{$START_TAG_DIV}one' +
+          '{$CLOSE_TAG_DIV}after{$CLOSE_BLOCK_CASE}{$START_BLOCK_DEFAULT}before' +
+          '{$START_TAG_BUTTON}otherwise{$CLOSE_TAG_BUTTON}after{$CLOSE_BLOCK_DEFAULT}',
+        '',
+      )]:
+        'Contenido: {$START_BLOCK_CASE}antes{$START_TAG_SPAN}cero{$CLOSE_TAG_SPAN}después' +
+        '{$CLOSE_BLOCK_CASE}{$START_BLOCK_CASE_1}antes{$START_TAG_DIV}uno' +
+        '{$CLOSE_TAG_DIV}después{$CLOSE_BLOCK_CASE}{$START_BLOCK_DEFAULT}antes' +
+        '{$START_TAG_BUTTON}si no{$CLOSE_TAG_BUTTON}después{$CLOSE_BLOCK_DEFAULT}',
     });
 
     const fixture = initWithTemplate(
-        AppComp,
-        '<div i18n>Content: @switch (count) {' +
-            '@case (0) {before<span>zero</span>after}' +
-            '@case (1) {before<div>one</div>after}' +
-            '@default {before<button>otherwise</button>after}' +
-            '}</div>');
-
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(
-            '<div>Contenido: antes<span>cero</span>después<!--container--><!--container-->' +
-            '<!--container--></div>');
+      AppComp,
+      '<div i18n>Content: @switch (count) {' +
+        '@case (0) {before<span>zero</span>after}' +
+        '@case (1) {before<div>one</div>after}' +
+        '@default {before<button>otherwise</button>after}' +
+        '}</div>',
+    );
+
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      '<div>Contenido: antes<span>cero</span>después<!--container--><!--container-->' +
+        '<!--container--></div>',
+    );
 
     fixture.componentInstance.count = 1;
     fixture.detectChanges();
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(
-            '<div>Contenido: <!--container-->antes<div>uno</div>después<!--container-->' +
-            '<!--container--></div>');
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      '<div>Contenido: <!--container-->antes<div>uno</div>después<!--container-->' +
+        '<!--container--></div>',
+    );
 
     fixture.componentInstance.count = 2;
     fixture.detectChanges();
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(
-            '<div>Contenido: <!--container--><!--container-->antes<button>si no</button>después' +
-            '<!--container--></div>');
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      '<div>Contenido: <!--container--><!--container-->antes<button>si no</button>después' +
+        '<!--container--></div>',
+    );
   });
 
   it('should support for loop blocks', () => {
     loadTranslations({
       [computeMsgId(
-          'Content: {$START_BLOCK_FOR}before{$START_TAG_SPAN}' +
+        'Content: {$START_BLOCK_FOR}before{$START_TAG_SPAN}' +
           'middle{$CLOSE_TAG_SPAN}after{$CLOSE_BLOCK_FOR}{$START_BLOCK_EMPTY}' +
-          'before{$START_TAG_DIV}empty{$CLOSE_TAG_DIV}after{$CLOSE_BLOCK_EMPTY}!')]:
-          'Contenido: {$START_BLOCK_FOR}antes{$START_TAG_SPAN}' +
-          'medio{$CLOSE_TAG_SPAN}después{$CLOSE_BLOCK_FOR}{$START_BLOCK_EMPTY}' +
-          'antes{$START_TAG_DIV}vacío{$CLOSE_TAG_DIV}después{$CLOSE_BLOCK_EMPTY}!'
+          'before{$START_TAG_DIV}empty{$CLOSE_TAG_DIV}after{$CLOSE_BLOCK_EMPTY}!',
+      )]:
+        'Contenido: {$START_BLOCK_FOR}antes{$START_TAG_SPAN}' +
+        'medio{$CLOSE_TAG_SPAN}después{$CLOSE_BLOCK_FOR}{$START_BLOCK_EMPTY}' +
+        'antes{$START_TAG_DIV}vacío{$CLOSE_TAG_DIV}después{$CLOSE_BLOCK_EMPTY}!',
     });
 
     const fixture = initWithTemplate(
-        AppComp,
-        '<div i18n>Content: @for (item of items; track item) {before<span>middle</span>after}' +
-            '@empty {before<div>empty</div>after}!</div>');
+      AppComp,
+      '<div i18n>Content: @for (item of items; track item) {before<span>middle</span>after}' +
+        '@empty {before<div>empty</div>after}!</div>',
+    );
 
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(
-            '<div>Contenido: antes<span>medio</span>' +
-            'despuésantes<span>medio</span>despuésantes<span>medio</span>' +
-            'después<!--container--><!--container-->!</div>');
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      '<div>Contenido: antes<span>medio</span>' +
+        'despuésantes<span>medio</span>despuésantes<span>medio</span>' +
+        'después<!--container--><!--container-->!</div>',
+    );
 
     fixture.componentInstance.items = [];
     fixture.detectChanges();
 
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(
-            '<div>Contenido: <!--container-->antes<div>' +
-            'vacío</div>después<!--container-->!</div>');
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      '<div>Contenido: <!--container-->antes<div>' + 'vacío</div>después<!--container-->!</div>',
+    );
   });
 
   it('should support deferred blocks', async () => {
     loadTranslations({
       [computeMsgId(
-          'Content: {$START_BLOCK_DEFER}before{$START_TAG_SPAN}middle' +
-              '{$CLOSE_TAG_SPAN}after{$CLOSE_BLOCK_DEFER}{$START_BLOCK_PLACEHOLDER}before' +
-              '{$START_TAG_DIV}placeholder{$CLOSE_TAG_DIV}after{$CLOSE_BLOCK_PLACEHOLDER}!',
-          '')]: 'Contenido: {$START_BLOCK_DEFER}before{$START_TAG_SPAN}medio' +
+        'Content: {$START_BLOCK_DEFER}before{$START_TAG_SPAN}middle' +
           '{$CLOSE_TAG_SPAN}after{$CLOSE_BLOCK_DEFER}{$START_BLOCK_PLACEHOLDER}before' +
-          '{$START_TAG_DIV}marcador de posición{$CLOSE_TAG_DIV}after{$CLOSE_BLOCK_PLACEHOLDER}!'
+          '{$START_TAG_DIV}placeholder{$CLOSE_TAG_DIV}after{$CLOSE_BLOCK_PLACEHOLDER}!',
+        '',
+      )]:
+        'Contenido: {$START_BLOCK_DEFER}before{$START_TAG_SPAN}medio' +
+        '{$CLOSE_TAG_SPAN}after{$CLOSE_BLOCK_DEFER}{$START_BLOCK_PLACEHOLDER}before' +
+        '{$START_TAG_DIV}marcador de posición{$CLOSE_TAG_DIV}after{$CLOSE_BLOCK_PLACEHOLDER}!',
     });
 
     @Component({
       selector: 'defer-comp',
       standalone: true,
-      template: '<div i18n>Content: @defer (when isLoaded) {before<span>middle</span>after} ' +
-          '@placeholder {before<div>placeholder</div>after}!</div>'
+      template:
+        '<div i18n>Content: @defer (when isLoaded) {before<span>middle</span>after} ' +
+        '@placeholder {before<div>placeholder</div>after}!</div>',
     })
     class DeferComp {
       isLoaded = false;
@@ -502,20 +580,20 @@ describe('runtime i18n', () => {
     const fixture = TestBed.createComponent(DeferComp);
     fixture.detectChanges();
 
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(
-            '<div>Contenido: <!--container-->' +
-            '<!--container-->!before<div>marcador de posición</div>after<!--container--></div>');
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      '<div>Contenido: <!--container-->' +
+        '<!--container-->!before<div>marcador de posición</div>after<!--container--></div>',
+    );
 
     const deferBlock = (await fixture.getDeferBlocks())[0];
     fixture.componentInstance.isLoaded = true;
     fixture.detectChanges();
     await deferBlock.render(DeferBlockState.Complete);
 
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(
-            '<div>Contenido: <!--container-->' +
-            '<!--container-->!before<span>medio</span>after<!--container--></div>');
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      '<div>Contenido: <!--container-->' +
+        '<!--container-->!before<span>medio</span>after<!--container--></div>',
+    );
   });
 
   describe('ng-container and ng-template support', () => {
@@ -527,8 +605,10 @@ describe('runtime i18n', () => {
 
     it('should handle single translation message within ng-template', () => {
       loadTranslations({[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}'});
-      const fixture =
-          initWithTemplate(AppComp, `<ng-template i18n tplRef>Hello {{ name }}</ng-template>`);
+      const fixture = initWithTemplate(
+        AppComp,
+        `<ng-template i18n tplRef>Hello {{ name }}</ng-template>`,
+      );
 
       const element = fixture.nativeElement;
       expect(element).toHaveText('Bonjour Angular');
@@ -539,7 +619,9 @@ describe('runtime i18n', () => {
     it('should handle structural directives on ng-template', () => {
       loadTranslations({[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}'});
       const fixture = initWithTemplate(
-          AppComp, `<ng-template *ngIf="name" i18n tplRef>Hello {{ name }}</ng-template>`);
+        AppComp,
+        `<ng-template *ngIf="name" i18n tplRef>Hello {{ name }}</ng-template>`,
+      );
 
       const element = fixture.nativeElement;
       expect(element).toHaveText('Bonjour Angular');
@@ -548,11 +630,14 @@ describe('runtime i18n', () => {
     it('should be able to act as child elements inside i18n block (plain text content)', () => {
       loadTranslations({
         [computeMsgId(
-            '{$START_TAG_NG_TEMPLATE} Hello {$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER} Bye {$CLOSE_TAG_NG_CONTAINER}',
-            '')]:
-            '{$START_TAG_NG_TEMPLATE} Bonjour {$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER} Au revoir {$CLOSE_TAG_NG_CONTAINER}'
+          '{$START_TAG_NG_TEMPLATE} Hello {$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER} Bye {$CLOSE_TAG_NG_CONTAINER}',
+          '',
+        )]:
+          '{$START_TAG_NG_TEMPLATE} Bonjour {$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER} Au revoir {$CLOSE_TAG_NG_CONTAINER}',
       });
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <div i18n>
           <ng-template tplRef>
             Hello
@@ -561,7 +646,8 @@ describe('runtime i18n', () => {
             Bye
           </ng-container>
         </div>
-      `);
+      `,
+      );
 
       const element = fixture.nativeElement.firstChild;
       expect(element.textContent.replace(/\s+/g, ' ').trim()).toBe('Bonjour Au revoir');
@@ -570,11 +656,14 @@ describe('runtime i18n', () => {
     it('should be able to act as child elements inside i18n block (text + tags)', () => {
       loadTranslations({
         [computeMsgId(
-            '{$START_TAG_NG_TEMPLATE}{$START_TAG_SPAN}Hello{$CLOSE_TAG_SPAN}{$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER}{$START_TAG_SPAN}Hello{$CLOSE_TAG_SPAN}{$CLOSE_TAG_NG_CONTAINER}',
-            '')]:
-            '{$START_TAG_NG_TEMPLATE}{$START_TAG_SPAN}Bonjour{$CLOSE_TAG_SPAN}{$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER}{$START_TAG_SPAN}Bonjour{$CLOSE_TAG_SPAN}{$CLOSE_TAG_NG_CONTAINER}'
+          '{$START_TAG_NG_TEMPLATE}{$START_TAG_SPAN}Hello{$CLOSE_TAG_SPAN}{$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER}{$START_TAG_SPAN}Hello{$CLOSE_TAG_SPAN}{$CLOSE_TAG_NG_CONTAINER}',
+          '',
+        )]:
+          '{$START_TAG_NG_TEMPLATE}{$START_TAG_SPAN}Bonjour{$CLOSE_TAG_SPAN}{$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER}{$START_TAG_SPAN}Bonjour{$CLOSE_TAG_SPAN}{$CLOSE_TAG_NG_CONTAINER}',
       });
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <div i18n>
           <ng-template tplRef>
             <span>Hello</span>
@@ -583,7 +672,8 @@ describe('runtime i18n', () => {
             <span>Hello</span>
           </ng-container>
         </div>
-      `);
+      `,
+      );
 
       const element = fixture.nativeElement;
       const spans = element.getElementsByTagName('span');
@@ -595,16 +685,20 @@ describe('runtime i18n', () => {
     it('should be able to act as child elements inside i18n block (text + pipes)', () => {
       loadTranslations({
         [computeMsgId(
-            '{$START_TAG_NG_TEMPLATE}Hello {$INTERPOLATION}{$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER}Bye {$INTERPOLATION}{$CLOSE_TAG_NG_CONTAINER}',
-            '')]:
-            '{$START_TAG_NG_TEMPLATE}Hej {$INTERPOLATION}{$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER}Vi ses {$INTERPOLATION}{$CLOSE_TAG_NG_CONTAINER}'
+          '{$START_TAG_NG_TEMPLATE}Hello {$INTERPOLATION}{$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER}Bye {$INTERPOLATION}{$CLOSE_TAG_NG_CONTAINER}',
+          '',
+        )]:
+          '{$START_TAG_NG_TEMPLATE}Hej {$INTERPOLATION}{$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER}Vi ses {$INTERPOLATION}{$CLOSE_TAG_NG_CONTAINER}',
       });
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <div i18n>
           <ng-template tplRef>Hello {{name | uppercase}}</ng-template>
           <ng-container>Bye {{name | uppercase}}</ng-container>
         </div>
-      `);
+      `,
+      );
 
       const element = fixture.nativeElement.firstChild;
       expect(element.textContent.replace(/\s+/g, ' ').trim()).toBe('Hej ANGULARVi ses ANGULAR');
@@ -613,11 +707,14 @@ describe('runtime i18n', () => {
     it('should be able to handle deep nested levels with templates', () => {
       loadTranslations({
         [computeMsgId(
-            '{$START_TAG_SPAN} Hello - 1 {$CLOSE_TAG_SPAN}{$START_TAG_SPAN_1} Hello - 2 {$START_TAG_SPAN_1} Hello - 3 {$START_TAG_SPAN_1} Hello - 4 {$CLOSE_TAG_SPAN}{$CLOSE_TAG_SPAN}{$CLOSE_TAG_SPAN}{$START_TAG_SPAN} Hello - 5 {$CLOSE_TAG_SPAN}',
-            '')]:
-            '{$START_TAG_SPAN} Bonjour - 1 {$CLOSE_TAG_SPAN}{$START_TAG_SPAN_1} Bonjour - 2 {$START_TAG_SPAN_1} Bonjour - 3 {$START_TAG_SPAN_1} Bonjour - 4 {$CLOSE_TAG_SPAN}{$CLOSE_TAG_SPAN}{$CLOSE_TAG_SPAN}{$START_TAG_SPAN} Bonjour - 5 {$CLOSE_TAG_SPAN}'
+          '{$START_TAG_SPAN} Hello - 1 {$CLOSE_TAG_SPAN}{$START_TAG_SPAN_1} Hello - 2 {$START_TAG_SPAN_1} Hello - 3 {$START_TAG_SPAN_1} Hello - 4 {$CLOSE_TAG_SPAN}{$CLOSE_TAG_SPAN}{$CLOSE_TAG_SPAN}{$START_TAG_SPAN} Hello - 5 {$CLOSE_TAG_SPAN}',
+          '',
+        )]:
+          '{$START_TAG_SPAN} Bonjour - 1 {$CLOSE_TAG_SPAN}{$START_TAG_SPAN_1} Bonjour - 2 {$START_TAG_SPAN_1} Bonjour - 3 {$START_TAG_SPAN_1} Bonjour - 4 {$CLOSE_TAG_SPAN}{$CLOSE_TAG_SPAN}{$CLOSE_TAG_SPAN}{$START_TAG_SPAN} Bonjour - 5 {$CLOSE_TAG_SPAN}',
       });
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <div i18n>
           <span>
             Hello - 1
@@ -635,7 +732,8 @@ describe('runtime i18n', () => {
             Hello - 5
           </span>
         </div>
-      `);
+      `,
+      );
 
       const element = fixture.nativeElement;
       const spans = element.getElementsByTagName('span');
@@ -647,17 +745,20 @@ describe('runtime i18n', () => {
     it('should handle self-closing tags as content', () => {
       loadTranslations({
         [computeMsgId('{$START_TAG_SPAN}My logo{$TAG_IMG}{$CLOSE_TAG_SPAN}')]:
-            '{$START_TAG_SPAN}Mon logo{$TAG_IMG}{$CLOSE_TAG_SPAN}'
+          '{$START_TAG_SPAN}Mon logo{$TAG_IMG}{$CLOSE_TAG_SPAN}',
       });
       const content = `My logo<img src="logo.png" title="Logo">`;
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <ng-container i18n>
           <span>${content}</span>
         </ng-container>
         <ng-template i18n tplRef>
           <span>${content}</span>
         </ng-template>
-      `);
+      `,
+      );
 
       const element = fixture.nativeElement;
       const spans = element.getElementsByTagName('span');
@@ -670,7 +771,7 @@ describe('runtime i18n', () => {
     it('should correctly find context for an element inside i18n section in <ng-template>', () => {
       loadTranslations({
         [computeMsgId('{$START_LINK}Not logged in{$CLOSE_LINK}')]:
-            '{$START_LINK}Not logged in{$CLOSE_LINK}'
+          '{$START_LINK}Not logged in{$CLOSE_LINK}',
       });
       @Directive({selector: '[myDir]'})
       class Dir {
@@ -713,22 +814,23 @@ describe('runtime i18n', () => {
       }
 
       TestBed.configureTestingModule({
-        providers: [
-          {provide: DOCUMENT, useFactory: _document, deps: []},
-        ],
+        providers: [{provide: DOCUMENT, useFactory: _document, deps: []}],
       });
     });
 
     it('should handle namespaces inside i18n blocks', () => {
       loadTranslations({
         [computeMsgId(
-            '{$START_TAG__XHTML_DIV} Hello ' +
-            '{$START_TAG__XHTML_SPAN}world{$CLOSE_TAG__XHTML_SPAN}{$CLOSE_TAG__XHTML_DIV}')]:
-            '{$START_TAG__XHTML_DIV} Bonjour ' +
-            '{$START_TAG__XHTML_SPAN}monde{$CLOSE_TAG__XHTML_SPAN}{$CLOSE_TAG__XHTML_DIV}'
+          '{$START_TAG__XHTML_DIV} Hello ' +
+            '{$START_TAG__XHTML_SPAN}world{$CLOSE_TAG__XHTML_SPAN}{$CLOSE_TAG__XHTML_DIV}',
+        )]:
+          '{$START_TAG__XHTML_DIV} Bonjour ' +
+          '{$START_TAG__XHTML_SPAN}monde{$CLOSE_TAG__XHTML_SPAN}{$CLOSE_TAG__XHTML_DIV}',
       });
 
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <svg xmlns="http://www.w3.org/2000/svg">
           <foreignObject i18n>
             <xhtml:div xmlns="http://www.w3.org/1999/xhtml">
@@ -736,7 +838,8 @@ describe('runtime i18n', () => {
             </xhtml:div>
           </foreignObject>
         </svg>
-      `);
+      `,
+      );
 
       const element = fixture.nativeElement;
       expect(element.textContent.trim()).toBe('Bonjour monde');
@@ -748,10 +851,12 @@ describe('runtime i18n', () => {
     it('should handle namespaces on i18n block containers', () => {
       loadTranslations({
         [computeMsgId(' Hello {$START_TAG__XHTML_SPAN}world{$CLOSE_TAG__XHTML_SPAN}')]:
-            ' Bonjour {$START_TAG__XHTML_SPAN}monde{$CLOSE_TAG__XHTML_SPAN}'
+          ' Bonjour {$START_TAG__XHTML_SPAN}monde{$CLOSE_TAG__XHTML_SPAN}',
       });
 
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <svg xmlns="http://www.w3.org/2000/svg">
           <foreignObject>
             <xhtml:div xmlns="http://www.w3.org/1999/xhtml" i18n>
@@ -759,7 +864,8 @@ describe('runtime i18n', () => {
             </xhtml:div>
           </foreignObject>
         </svg>
-      `);
+      `,
+      );
 
       const element = fixture.nativeElement;
       expect(element.textContent.trim()).toBe('Bonjour monde');
@@ -778,25 +884,31 @@ describe('runtime i18n', () => {
       // instances may have different selections active and hence have different shape. In
       // such a case a single `TIcuContainerNode` should be generated only.
       it('should create a single dynamic TNode for ICU', () => {
-        const fixture = initWithTemplate(AppComp, `
+        const fixture = initWithTemplate(
+          AppComp,
+          `
           {count, plural,
             =0 {just now}
             =1 {one minute ago}
             other {{{count}} minutes ago}
           }
-        `.trim());
+        `.trim(),
+        );
         const lView = getComponentLView(fixture.componentInstance);
         fixture.detectChanges();
         expect((fixture.nativeElement as Element).textContent).toEqual('just now');
         // We want to ensure that the ICU container does not have any content!
         // This is because the content is instance dependent and therefore can't be shared
         // across `TNode`s.
-        expect(fixture.nativeElement.innerHTML)
-            .toEqual(`just now<!--ICU ${HEADER_OFFSET + 0}:0-->`);
+        expect(fixture.nativeElement.innerHTML).toEqual(
+          `just now<!--ICU ${HEADER_OFFSET + 0}:0-->`,
+        );
       });
 
       it('should support multiple ICUs', () => {
-        const fixture = initWithTemplate(AppComp, `
+        const fixture = initWithTemplate(
+          AppComp,
+          `
           {count, plural,
             =0 {just now}
             =1 {one minute ago}
@@ -806,13 +918,14 @@ describe('runtime i18n', () => {
             Angular {Mr. Angular}
             other {Sir}
           }
-        `);
+        `,
+        );
         // We want to ensure that the ICU container does not have any content!
         // This is because the content is instance dependent and therefore can't be shared
         // across `TNode`s.
-        expect(fixture.nativeElement.innerHTML)
-            .toEqual(`just now<!--ICU ${HEADER_OFFSET + 0}:0-->Mr. Angular<!--ICU ${
-                HEADER_OFFSET + 1}:0-->`);
+        expect(fixture.nativeElement.innerHTML).toEqual(
+          `just now<!--ICU ${HEADER_OFFSET + 0}:0-->Mr. Angular<!--ICU ${HEADER_OFFSET + 1}:0-->`,
+        );
       });
     });
   });
@@ -821,10 +934,12 @@ describe('runtime i18n', () => {
     it('with no root node', () => {
       loadTranslations({
         [computeMsgId('{VAR_SELECT, select, 10 {ten} 20 {twenty} other {other}}')]:
-            '{VAR_SELECT, select, 10 {dix} 20 {vingt} other {autre}}'
+          '{VAR_SELECT, select, 10 {dix} 20 {vingt} other {autre}}',
       });
-      const fixture =
-          initWithTemplate(AppComp, `{count, select, 10 {ten} 20 {twenty} other {other}}`);
+      const fixture = initWithTemplate(
+        AppComp,
+        `{count, select, 10 {ten} 20 {twenty} other {other}}`,
+      );
 
       const element = fixture.nativeElement;
       expect(element).toHaveText('autre');
@@ -833,13 +948,16 @@ describe('runtime i18n', () => {
     it('with no root node and text surrounding ICU', () => {
       loadTranslations({
         [computeMsgId('{VAR_SELECT, select, 10 {Ten} 20 {Twenty} other {Other}}')]:
-            '{VAR_SELECT, select, 10 {Dix} 20 {Vingt} other {Autre}}'
+          '{VAR_SELECT, select, 10 {Dix} 20 {Vingt} other {Autre}}',
       });
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         ICU start -->
         {count, select, 10 {Ten} 20 {Twenty} other {Other}}
         <-- ICU end
-      `);
+      `,
+      );
 
       const element = fixture.nativeElement;
       expect(element.textContent).toContain('ICU start --> Autre <-- ICU end');
@@ -848,16 +966,19 @@ describe('runtime i18n', () => {
     it('when `select` or `plural` keywords have spaces after them', () => {
       loadTranslations({
         [computeMsgId('{VAR_SELECT , select , 10 {ten} 20 {twenty} other {other}}')]:
-            '{VAR_SELECT , select , 10 {dix} 20 {vingt} other {autre}}',
+          '{VAR_SELECT , select , 10 {dix} 20 {vingt} other {autre}}',
         [computeMsgId('{VAR_PLURAL , plural , =0 {zero} =1 {one} other {other}}')]:
-            '{VAR_PLURAL , plural , =0 {zéro} =1 {une} other {autre}}'
+          '{VAR_PLURAL , plural , =0 {zéro} =1 {une} other {autre}}',
       });
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <div i18n>
           {count, select , 10 {ten} 20 {twenty} other {other}} -
           {count, plural , =0 {zero} =1 {one} other {other}}
         </div>
-      `);
+      `,
+      );
 
       const element = fixture.nativeElement;
       expect(element.textContent).toContain('autre - zéro');
@@ -866,13 +987,16 @@ describe('runtime i18n', () => {
     it('with no root node and text and DOM nodes surrounding ICU', () => {
       loadTranslations({
         [computeMsgId('{VAR_SELECT, select, 10 {Ten} 20 {Twenty} other {Other}}')]:
-            '{VAR_SELECT, select, 10 {Dix} 20 {Vingt} other {Autre}}'
+          '{VAR_SELECT, select, 10 {Dix} 20 {Vingt} other {Autre}}',
       });
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <span>ICU start --> </span>
         {count, select, 10 {Ten} 20 {Twenty} other {Other}}
         <-- ICU end
-      `);
+      `,
+      );
 
       const element = fixture.nativeElement;
       expect(element.textContent).toContain('ICU start --> Autre <-- ICU end');
@@ -881,10 +1005,12 @@ describe('runtime i18n', () => {
     it('with no i18n tag', () => {
       loadTranslations({
         [computeMsgId('{VAR_SELECT, select, 10 {ten} 20 {twenty} other {other}}')]:
-            '{VAR_SELECT, select, 10 {dix} 20 {vingt} other {autre}}'
+          '{VAR_SELECT, select, 10 {dix} 20 {vingt} other {autre}}',
       });
       const fixture = initWithTemplate(
-          AppComp, `<div>{count, select, 10 {ten} 20 {twenty} other {other}}</div>`);
+        AppComp,
+        `<div>{count, select, 10 {ten} 20 {twenty} other {other}}</div>`,
+      );
 
       const element = fixture.nativeElement;
       expect(element).toHaveText('autre');
@@ -893,47 +1019,59 @@ describe('runtime i18n', () => {
     it('multiple', () => {
       loadTranslations({
         [computeMsgId(
-            '{VAR_PLURAL, plural, =0 {no {START_BOLD_TEXT}emails{CLOSE_BOLD_TEXT}!} =1 {one {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} {START_TAG_SPAN}emails{CLOSE_TAG_SPAN}}}',
-            '')]:
-            '{VAR_PLURAL, plural, =0 {aucun {START_BOLD_TEXT}email{CLOSE_BOLD_TEXT}!} =1 {un {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} {START_TAG_SPAN}emails{CLOSE_TAG_SPAN}}}',
+          '{VAR_PLURAL, plural, =0 {no {START_BOLD_TEXT}emails{CLOSE_BOLD_TEXT}!} =1 {one {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} {START_TAG_SPAN}emails{CLOSE_TAG_SPAN}}}',
+          '',
+        )]:
+          '{VAR_PLURAL, plural, =0 {aucun {START_BOLD_TEXT}email{CLOSE_BOLD_TEXT}!} =1 {un {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} {START_TAG_SPAN}emails{CLOSE_TAG_SPAN}}}',
         [computeMsgId('{VAR_SELECT, select, other {({INTERPOLATION})}}')]:
-            '{VAR_SELECT, select, other {({INTERPOLATION})}}',
+          '{VAR_SELECT, select, other {({INTERPOLATION})}}',
         [computeMsgId('{$ICU} - {$ICU_1}')]: '{$ICU} - {$ICU_1}',
       });
-      const fixture = initWithTemplate(AppComp, `<div i18n>{count, plural,
+      const fixture = initWithTemplate(
+        AppComp,
+        `<div i18n>{count, plural,
         =0 {no <b>emails</b>!}
         =1 {one <i>email</i>}
         other {{{count}} <span title="{{name}}">emails</span>}
       } - {name, select,
         other {({{name}})}
-      }</div>`);
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<div>aucun <b>email</b>!<!--ICU ${HEADER_OFFSET + 1}:0--> - (Angular)<!--ICU ${
-              HEADER_OFFSET + 1}:3--></div>`);
+      }</div>`,
+      );
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<div>aucun <b>email</b>!<!--ICU ${HEADER_OFFSET + 1}:0--> - (Angular)<!--ICU ${
+          HEADER_OFFSET + 1
+        }:3--></div>`,
+      );
 
       fixture.componentRef.instance.count = 4;
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<div>4 <span title="Angular">emails</span><!--ICU ${
-              HEADER_OFFSET + 1}:0--> - (Angular)<!--ICU ${HEADER_OFFSET + 1}:3--></div>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<div>4 <span title="Angular">emails</span><!--ICU ${
+          HEADER_OFFSET + 1
+        }:0--> - (Angular)<!--ICU ${HEADER_OFFSET + 1}:3--></div>`,
+      );
 
       fixture.componentRef.instance.count = 0;
       fixture.componentRef.instance.name = 'John';
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<div>aucun <b>email</b>!<!--ICU ${HEADER_OFFSET + 1}:0--> - (John)<!--ICU ${
-              HEADER_OFFSET + 1}:3--></div>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<div>aucun <b>email</b>!<!--ICU ${HEADER_OFFSET + 1}:0--> - (John)<!--ICU ${
+          HEADER_OFFSET + 1
+        }:3--></div>`,
+      );
     });
 
     it('with custom interpolation config', () => {
       loadTranslations({
         [computeMsgId('{VAR_SELECT, select, 10 {ten} other {{INTERPOLATION}}}')]:
-            '{VAR_SELECT, select, 10 {dix} other {{INTERPOLATION}}}'
+          '{VAR_SELECT, select, 10 {dix} other {{INTERPOLATION}}}',
       });
       const interpolation = ['{%', '%}'] as [string, string];
       TestBed.overrideComponent(AppComp, {set: {interpolation}});
-      const fixture =
-          initWithTemplate(AppComp, `<div i18n>{count, select, 10 {ten} other {{% name %}}}</div>`);
+      const fixture = initWithTemplate(
+        AppComp,
+        `<div i18n>{count, select, 10 {ten} other {{% name %}}}</div>`,
+      );
 
       expect(fixture.nativeElement).toHaveText(`Angular`);
     });
@@ -941,66 +1079,73 @@ describe('runtime i18n', () => {
     it('inside HTML elements', () => {
       loadTranslations({
         [computeMsgId(
-            '{VAR_PLURAL, plural, =0 {no {START_BOLD_TEXT}emails{CLOSE_BOLD_TEXT}!} =1 {one {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} {START_TAG_SPAN}emails{CLOSE_TAG_SPAN}}}',
-            '')]:
-            '{VAR_PLURAL, plural, =0 {aucun {START_BOLD_TEXT}email{CLOSE_BOLD_TEXT}!} =1 {un {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} {START_TAG_SPAN}emails{CLOSE_TAG_SPAN}}}',
+          '{VAR_PLURAL, plural, =0 {no {START_BOLD_TEXT}emails{CLOSE_BOLD_TEXT}!} =1 {one {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} {START_TAG_SPAN}emails{CLOSE_TAG_SPAN}}}',
+          '',
+        )]:
+          '{VAR_PLURAL, plural, =0 {aucun {START_BOLD_TEXT}email{CLOSE_BOLD_TEXT}!} =1 {un {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} {START_TAG_SPAN}emails{CLOSE_TAG_SPAN}}}',
         [computeMsgId('{VAR_SELECT, select, other {({INTERPOLATION})}}')]:
-            '{VAR_SELECT, select, other {({INTERPOLATION})}}',
+          '{VAR_SELECT, select, other {({INTERPOLATION})}}',
         [computeMsgId(
-            '{$START_TAG_SPAN_1}{$ICU}{$CLOSE_TAG_SPAN} - ' +
-            '{$START_TAG_SPAN_1}{$ICU_1}{$CLOSE_TAG_SPAN}')]:
-            '{$START_TAG_SPAN_1}{$ICU}{$CLOSE_TAG_SPAN} - {$START_TAG_SPAN_1}{$ICU_1}{$CLOSE_TAG_SPAN}',
+          '{$START_TAG_SPAN_1}{$ICU}{$CLOSE_TAG_SPAN} - ' +
+            '{$START_TAG_SPAN_1}{$ICU_1}{$CLOSE_TAG_SPAN}',
+        )]:
+          '{$START_TAG_SPAN_1}{$ICU}{$CLOSE_TAG_SPAN} - {$START_TAG_SPAN_1}{$ICU_1}{$CLOSE_TAG_SPAN}',
       });
-      const fixture = initWithTemplate(AppComp, `<div i18n><span>{count, plural,
+      const fixture = initWithTemplate(
+        AppComp,
+        `<div i18n><span>{count, plural,
         =0 {no <b>emails</b>!}
         =1 {one <i>email</i>}
         other {{{count}} <span title="{{name}}">emails</span>}
       }</span> - <span>{name, select,
         other {({{name}})}
-      }</span></div>`);
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(
-              `<div>` +
-              `<span>aucun <b>email</b>!<!--ICU ${HEADER_OFFSET + 1}:0--></span>` +
-              ` - ` +
-              `<span>(Angular)<!--ICU ${HEADER_OFFSET + 1}:3--></span>` +
-              `</div>`);
+      }</span></div>`,
+      );
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<div>` +
+          `<span>aucun <b>email</b>!<!--ICU ${HEADER_OFFSET + 1}:0--></span>` +
+          ` - ` +
+          `<span>(Angular)<!--ICU ${HEADER_OFFSET + 1}:3--></span>` +
+          `</div>`,
+      );
 
       fixture.componentRef.instance.count = 4;
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(
-              `<div>` +
-              `<span>4 <span title="Angular">emails</span><!--ICU ${
-                  HEADER_OFFSET + 1}:0--></span>` +
-              ` - ` +
-              `<span>(Angular)<!--ICU ${HEADER_OFFSET + 1}:3--></span>` +
-              `</div>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<div>` +
+          `<span>4 <span title="Angular">emails</span><!--ICU ${HEADER_OFFSET + 1}:0--></span>` +
+          ` - ` +
+          `<span>(Angular)<!--ICU ${HEADER_OFFSET + 1}:3--></span>` +
+          `</div>`,
+      );
 
       fixture.componentRef.instance.count = 0;
       fixture.componentRef.instance.name = 'John';
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(
-              `<div>` +
-              `<span>aucun <b>email</b>!<!--ICU ${HEADER_OFFSET + 1}:0--></span>` +
-              ` - ` +
-              `<span>(John)<!--ICU ${HEADER_OFFSET + 1}:3--></span>` +
-              `</div>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<div>` +
+          `<span>aucun <b>email</b>!<!--ICU ${HEADER_OFFSET + 1}:0--></span>` +
+          ` - ` +
+          `<span>(John)<!--ICU ${HEADER_OFFSET + 1}:3--></span>` +
+          `</div>`,
+      );
     });
 
     it('inside template directives', () => {
       loadTranslations({
         [computeMsgId('{$START_TAG_SPAN}{$ICU}{$CLOSE_TAG_SPAN}')]:
-            '{$START_TAG_SPAN}{$ICU}{$CLOSE_TAG_SPAN}',
+          '{$START_TAG_SPAN}{$ICU}{$CLOSE_TAG_SPAN}',
         [computeMsgId('{VAR_SELECT, select, other {({INTERPOLATION})}}')]:
-            '{VAR_SELECT, select, other {({INTERPOLATION})}}'
+          '{VAR_SELECT, select, other {({INTERPOLATION})}}',
       });
-      const fixture = initWithTemplate(AppComp, `<div i18n><span *ngIf="visible">{name, select,
+      const fixture = initWithTemplate(
+        AppComp,
+        `<div i18n><span *ngIf="visible">{name, select,
         other {({{name}})}
-      }</span></div>`);
+      }</span></div>`,
+      );
       expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<div><span>(Angular)<!--ICU ${HEADER_OFFSET + 0}:0--></span><!--bindings={
+        .toEqual(`<div><span>(Angular)<!--ICU ${HEADER_OFFSET + 0}:0--></span><!--bindings={
   "ng-reflect-ng-if": "true"
 }--></div>`);
 
@@ -1014,27 +1159,32 @@ describe('runtime i18n', () => {
     it('inside ng-container', () => {
       loadTranslations({
         [computeMsgId('{VAR_SELECT, select, other {({INTERPOLATION})}}')]:
-            '{VAR_SELECT, select, other {({INTERPOLATION})}}'
+          '{VAR_SELECT, select, other {({INTERPOLATION})}}',
       });
-      const fixture = initWithTemplate(AppComp, `<ng-container i18n>{name, select,
+      const fixture = initWithTemplate(
+        AppComp,
+        `<ng-container i18n>{name, select,
         other {({{name}})}
-      }</ng-container>`);
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`(Angular)<!--ICU ${HEADER_OFFSET + 1}:0--><!--ng-container-->`);
+      }</ng-container>`,
+      );
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `(Angular)<!--ICU ${HEADER_OFFSET + 1}:0--><!--ng-container-->`,
+      );
     });
 
     it('inside <ng-template>', () => {
       loadTranslations({
         [computeMsgId('{VAR_SELECT, select, 10 {ten} 20 {twenty} other {other}}')]:
-            '{VAR_SELECT, select, 10 {dix} 20 {vingt} other {autre}}'
+          '{VAR_SELECT, select, 10 {dix} 20 {vingt} other {autre}}',
       });
       const fixture = initWithTemplate(
-          AppComp,
-          `
+        AppComp,
+        `
         <ng-template i18n tplRef>` +
-              `{count, select, 10 {ten} 20 {twenty} other {other}}` +
-              `</ng-template>
-      `);
+          `{count, select, 10 {ten} 20 {twenty} other {other}}` +
+          `</ng-template>
+      `,
+      );
 
       const element = fixture.nativeElement;
       expect(element).toHaveText('autre');
@@ -1043,36 +1193,45 @@ describe('runtime i18n', () => {
     it('nested', () => {
       loadTranslations({
         [computeMsgId(
-            '{VAR_PLURAL, plural, =0 {zero} other {{INTERPOLATION} {VAR_SELECT, select, cat {cats} dog {dogs} other {animals}}!}}',
-            '')]:
-            '{VAR_PLURAL, plural, =0 {zero} other {{INTERPOLATION} {VAR_SELECT, select, cat {chats} dog {chiens} other {animaux}}!}}'
+          '{VAR_PLURAL, plural, =0 {zero} other {{INTERPOLATION} {VAR_SELECT, select, cat {cats} dog {dogs} other {animals}}!}}',
+          '',
+        )]:
+          '{VAR_PLURAL, plural, =0 {zero} other {{INTERPOLATION} {VAR_SELECT, select, cat {chats} dog {chiens} other {animaux}}!}}',
       });
-      const fixture = initWithTemplate(AppComp, `<div i18n>{count, plural,
+      const fixture = initWithTemplate(
+        AppComp,
+        `<div i18n>{count, plural,
         =0 {zero}
         other {{{count}} {name, select,
                        cat {cats}
                        dog {dogs}
                        other {animals}
                      }!}
-      }</div>`);
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<div>zero<!--ICU ${HEADER_OFFSET + 1}:1--></div>`);
+      }</div>`,
+      );
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<div>zero<!--ICU ${HEADER_OFFSET + 1}:1--></div>`,
+      );
 
       fixture.componentRef.instance.count = 4;
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<div>4 animaux<!--nested ICU 0-->!<!--ICU ${HEADER_OFFSET + 1}:1--></div>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<div>4 animaux<!--nested ICU 0-->!<!--ICU ${HEADER_OFFSET + 1}:1--></div>`,
+      );
     });
 
     it('nested with interpolations in "other" blocks', () => {
       loadTranslations({
         [computeMsgId(
-            '{VAR_PLURAL, plural, =0 {zero} =2 {{INTERPOLATION} {VAR_SELECT, select, cat {cats} dog {dogs} other {animals}}!} other {other - {INTERPOLATION}}}',
-            '')]:
-            '{VAR_PLURAL, plural, =0 {zero} =2 {{INTERPOLATION} {VAR_SELECT, select, cat {chats} dog {chiens} other {animaux}}!} other {autre - {INTERPOLATION}}}'
+          '{VAR_PLURAL, plural, =0 {zero} =2 {{INTERPOLATION} {VAR_SELECT, select, cat {cats} dog {dogs} other {animals}}!} other {other - {INTERPOLATION}}}',
+          '',
+        )]:
+          '{VAR_PLURAL, plural, =0 {zero} =2 {{INTERPOLATION} {VAR_SELECT, select, cat {chats} dog {chiens} other {animaux}}!} other {autre - {INTERPOLATION}}}',
       });
 
-      const fixture = initWithTemplate(AppComp, `<div i18n>{count, plural,
+      const fixture = initWithTemplate(
+        AppComp,
+        `<div i18n>{count, plural,
         =0 {zero}
         =2 {{{count}} {name, select,
                        cat {cats}
@@ -1080,19 +1239,23 @@ describe('runtime i18n', () => {
                        other {animals}
                      }!}
         other {other - {{count}}}
-      }</div>`);
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<div>zero<!--ICU ${HEADER_OFFSET + 1}:1--></div>`);
+      }</div>`,
+      );
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<div>zero<!--ICU ${HEADER_OFFSET + 1}:1--></div>`,
+      );
 
       fixture.componentRef.instance.count = 2;
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<div>2 animaux<!--nested ICU 0-->!<!--ICU ${HEADER_OFFSET + 1}:1--></div>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<div>2 animaux<!--nested ICU 0-->!<!--ICU ${HEADER_OFFSET + 1}:1--></div>`,
+      );
 
       fixture.componentRef.instance.count = 4;
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<div>autre - 4<!--ICU ${HEADER_OFFSET + 1}:1--></div>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<div>autre - 4<!--ICU ${HEADER_OFFSET + 1}:1--></div>`,
+      );
     });
 
     it('should return the correct plural form for ICU expressions when using "ro" locale', () => {
@@ -1111,19 +1274,23 @@ describe('runtime i18n', () => {
       // Compare this to the "es" locale in the next test
       loadTranslations({
         [computeMsgId(
-            '{VAR_PLURAL, plural, =0 {no email} =one {one email} =few {a few emails} =other {lots of emails}}')]:
-            '{VAR_PLURAL, plural, =0 {no email} =one {one email} =few {a few emails} =other {lots of emails}}'
+          '{VAR_PLURAL, plural, =0 {no email} =one {one email} =few {a few emails} =other {lots of emails}}',
+        )]:
+          '{VAR_PLURAL, plural, =0 {no email} =one {one email} =few {a few emails} =other {lots of emails}}',
       });
       registerLocaleData(localeRo);
       TestBed.configureTestingModule({providers: [{provide: LOCALE_ID, useValue: 'ro'}]});
       // We could also use `TestBed.overrideProvider(LOCALE_ID, {useValue: 'ro'});`
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
           {count, plural,
             =0 {no email}
             =one {one email}
             =few {a few emails}
             =other {lots of emails}
-          }`);
+          }`,
+      );
 
       expect(fixture.nativeElement.innerHTML).toEqual(`no email<!--ICU ${HEADER_OFFSET + 0}:0-->`);
 
@@ -1133,8 +1300,9 @@ describe('runtime i18n', () => {
 
       fixture.componentInstance.count = 3;
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`a few emails<!--ICU ${HEADER_OFFSET + 0}:0-->`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `a few emails<!--ICU ${HEADER_OFFSET + 0}:0-->`,
+      );
 
       fixture.componentInstance.count = 1;
       fixture.detectChanges();
@@ -1142,13 +1310,15 @@ describe('runtime i18n', () => {
 
       fixture.componentInstance.count = 10;
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`a few emails<!--ICU ${HEADER_OFFSET + 0}:0-->`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `a few emails<!--ICU ${HEADER_OFFSET + 0}:0-->`,
+      );
 
       fixture.componentInstance.count = 20;
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`lots of emails<!--ICU ${HEADER_OFFSET + 0}:0-->`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `lots of emails<!--ICU ${HEADER_OFFSET + 0}:0-->`,
+      );
 
       fixture.componentInstance.count = 0;
       fixture.detectChanges();
@@ -1165,19 +1335,23 @@ describe('runtime i18n', () => {
       // }
       //
       // Compare this to the "ro" locale in the previous test
-      const icuMessage = '{VAR_PLURAL, plural, =0 {no email} =one ' +
-          '{one email} =few {a few emails} =other {lots of emails}}';
+      const icuMessage =
+        '{VAR_PLURAL, plural, =0 {no email} =one ' +
+        '{one email} =few {a few emails} =other {lots of emails}}';
       loadTranslations({[computeMsgId(icuMessage)]: icuMessage});
       registerLocaleData(localeEs);
       TestBed.configureTestingModule({providers: [{provide: LOCALE_ID, useValue: 'es'}]});
       // We could also use `TestBed.overrideProvider(LOCALE_ID, {useValue: 'es'});`
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
           {count, plural,
             =0 {no email}
             =one {one email}
             =few {a few emails}
             =other {lots of emails}
-          }`);
+          }`,
+      );
 
       expect(fixture.nativeElement.innerHTML).toEqual(`no email<!--ICU ${HEADER_OFFSET + 0}:0-->`);
 
@@ -1187,8 +1361,9 @@ describe('runtime i18n', () => {
 
       fixture.componentInstance.count = 3;
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`lots of emails<!--ICU ${HEADER_OFFSET + 0}:0-->`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `lots of emails<!--ICU ${HEADER_OFFSET + 0}:0-->`,
+      );
 
       fixture.componentInstance.count = 1;
       fixture.detectChanges();
@@ -1196,13 +1371,15 @@ describe('runtime i18n', () => {
 
       fixture.componentInstance.count = 10;
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`lots of emails<!--ICU ${HEADER_OFFSET + 0}:0-->`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `lots of emails<!--ICU ${HEADER_OFFSET + 0}:0-->`,
+      );
 
       fixture.componentInstance.count = 20;
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`lots of emails<!--ICU ${HEADER_OFFSET + 0}:0-->`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `lots of emails<!--ICU ${HEADER_OFFSET + 0}:0-->`,
+      );
 
       fixture.componentInstance.count = 0;
       fixture.detectChanges();
@@ -1212,11 +1389,10 @@ describe('runtime i18n', () => {
     it('projection', () => {
       loadTranslations({
         [computeMsgId('{VAR_PLURAL, plural, =1 {one} other {at least {INTERPOLATION} .}}')]:
-            '{VAR_PLURAL, plural, =1 {one} other {at least {INTERPOLATION} .}}'
+          '{VAR_PLURAL, plural, =1 {one} other {at least {INTERPOLATION} .}}',
       });
       @Component({selector: 'child', template: '<div><ng-content></ng-content></div>'})
-      class Child {
-      }
+      class Child {}
 
       @Component({
         selector: 'parent',
@@ -1226,7 +1402,7 @@ describe('runtime i18n', () => {
         plural,
          =1 {one}
         other {at least {{value}} .}
-      }</child>`
+      }</child>`,
       })
       class Parent {
         value = 3;
@@ -1242,7 +1418,7 @@ describe('runtime i18n', () => {
     it('with empty values', () => {
       loadTranslations({
         [computeMsgId('{VAR_SELECT, select, 10 {} 20 {twenty} other {other}}')]:
-            '{VAR_SELECT, select, 10 {} 20 {twenty} other {other}}'
+          '{VAR_SELECT, select, 10 {} 20 {twenty} other {other}}',
       });
       const fixture = initWithTemplate(AppComp, `{count, select, 10 {} 20 {twenty} other {other}}`);
 
@@ -1253,15 +1429,16 @@ describe('runtime i18n', () => {
     it('inside a container when creating a view via vcr.createEmbeddedView', () => {
       loadTranslations({
         [computeMsgId('{VAR_PLURAL, plural, =1 {ONE} other {OTHER}}')]:
-            '{VAR_PLURAL, plural, =1 {ONE} other {OTHER}}'
+          '{VAR_PLURAL, plural, =1 {ONE} other {OTHER}}',
       });
       @Directive({
         selector: '[someDir]',
       })
       class Dir {
         constructor(
-            private readonly viewContainerRef: ViewContainerRef,
-            private readonly templateRef: TemplateRef<any>) {}
+          private readonly viewContainerRef: ViewContainerRef,
+          private readonly templateRef: TemplateRef<any>,
+        ) {}
 
         ngOnInit() {
           this.viewContainerRef.createEmbeddedView(this.templateRef);
@@ -1276,8 +1453,7 @@ describe('runtime i18n', () => {
               </div>
             `,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       @Component({
         selector: 'my-app',
@@ -1300,15 +1476,15 @@ describe('runtime i18n', () => {
       });
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
-      expect(fixture.debugElement.nativeElement.innerHTML)
-          .toContain(
-              `<my-cmp><div>ONE<!--ICU ${HEADER_OFFSET + 1}:0--></div><!--container--></my-cmp>`);
+      expect(fixture.debugElement.nativeElement.innerHTML).toContain(
+        `<my-cmp><div>ONE<!--ICU ${HEADER_OFFSET + 1}:0--></div><!--container--></my-cmp>`,
+      );
 
       fixture.componentRef.instance.count = 2;
       fixture.detectChanges();
-      expect(fixture.debugElement.nativeElement.innerHTML)
-          .toContain(
-              `<my-cmp><div>OTHER<!--ICU ${HEADER_OFFSET + 1}:0--></div><!--container--></my-cmp>`);
+      expect(fixture.debugElement.nativeElement.innerHTML).toContain(
+        `<my-cmp><div>OTHER<!--ICU ${HEADER_OFFSET + 1}:0--></div><!--container--></my-cmp>`,
+      );
 
       // destroy component
       fixture.componentInstance.condition = false;
@@ -1319,51 +1495,51 @@ describe('runtime i18n', () => {
       fixture.componentInstance.condition = true;
       fixture.componentInstance.count = 1;
       fixture.detectChanges();
-      expect(fixture.debugElement.nativeElement.innerHTML)
-          .toContain(
-              `<my-cmp><div>ONE<!--ICU ${HEADER_OFFSET + 1}:0--></div><!--container--></my-cmp>`);
-    });
-
-    it('with nested ICU expression and inside a container when creating a view via vcr.createEmbeddedView',
-       () => {
-         loadTranslations({
-           [computeMsgId(
-               '{VAR_PLURAL, plural, =1 {ONE} other {{INTERPOLATION} ' +
-               '{VAR_SELECT, select, cat {cats} dog {dogs} other {animals}}!}}')]:
-               '{VAR_PLURAL, plural, =1 {ONE} other {{INTERPOLATION} ' +
-               '{VAR_SELECT, select, cat {cats} dog {dogs} other {animals}}!}}'
-         });
-
-         let dir: Dir|null = null;
-         @Directive({
-           selector: '[someDir]',
-         })
-         class Dir {
-           constructor(
-               private readonly viewContainerRef: ViewContainerRef,
-               private readonly templateRef: TemplateRef<any>) {
-             dir = this;
-           }
-
-           attachEmbeddedView() {
-             this.viewContainerRef.createEmbeddedView(this.templateRef);
-           }
-         }
+      expect(fixture.debugElement.nativeElement.innerHTML).toContain(
+        `<my-cmp><div>ONE<!--ICU ${HEADER_OFFSET + 1}:0--></div><!--container--></my-cmp>`,
+      );
+    });
+
+    it('with nested ICU expression and inside a container when creating a view via vcr.createEmbeddedView', () => {
+      loadTranslations({
+        [computeMsgId(
+          '{VAR_PLURAL, plural, =1 {ONE} other {{INTERPOLATION} ' +
+            '{VAR_SELECT, select, cat {cats} dog {dogs} other {animals}}!}}',
+        )]:
+          '{VAR_PLURAL, plural, =1 {ONE} other {{INTERPOLATION} ' +
+          '{VAR_SELECT, select, cat {cats} dog {dogs} other {animals}}!}}',
+      });
+
+      let dir: Dir | null = null;
+      @Directive({
+        selector: '[someDir]',
+      })
+      class Dir {
+        constructor(
+          private readonly viewContainerRef: ViewContainerRef,
+          private readonly templateRef: TemplateRef<any>,
+        ) {
+          dir = this;
+        }
 
-         @Component({
-           selector: 'my-cmp',
-           template: `
+        attachEmbeddedView() {
+          this.viewContainerRef.createEmbeddedView(this.templateRef);
+        }
+      }
+
+      @Component({
+        selector: 'my-cmp',
+        template: `
               <div *someDir>
                 <ng-content></ng-content>
               </div>
             `,
-         })
-         class Cmp {
-         }
+      })
+      class Cmp {}
 
-         @Component({
-           selector: 'my-app',
-           template: `
+      @Component({
+        selector: 'my-app',
+        template: `
             <my-cmp i18n="test">{
               count,
               plural,
@@ -1375,39 +1551,42 @@ describe('runtime i18n', () => {
               }!}
             }</my-cmp>
           `,
-         })
-         class App {
-           count = 1;
-         }
+      })
+      class App {
+        count = 1;
+      }
 
-         TestBed.configureTestingModule({
-           declarations: [App, Cmp, Dir],
-         });
-         const fixture = TestBed.createComponent(App);
-         fixture.componentRef.instance.count = 2;
-         fixture.detectChanges();
-         expect(fixture.debugElement.nativeElement.innerHTML)
-             .toBe('<my-cmp><!--container--></my-cmp>');
-
-         dir!.attachEmbeddedView();
-         fixture.detectChanges();
-         expect(fixture.debugElement.nativeElement.innerHTML)
-             .toBe(`<my-cmp><div>2 animals<!--nested ICU 0-->!<!--ICU ${
-                 HEADER_OFFSET + 1}:1--></div><!--container--></my-cmp>`);
-
-         fixture.componentRef.instance.count = 1;
-         fixture.detectChanges();
-         expect(fixture.debugElement.nativeElement.innerHTML)
-             .toBe(`<my-cmp><div>ONE<!--ICU ${
-                 HEADER_OFFSET + 1}:1--></div><!--container--></my-cmp>`);
-       });
+      TestBed.configureTestingModule({
+        declarations: [App, Cmp, Dir],
+      });
+      const fixture = TestBed.createComponent(App);
+      fixture.componentRef.instance.count = 2;
+      fixture.detectChanges();
+      expect(fixture.debugElement.nativeElement.innerHTML).toBe(
+        '<my-cmp><!--container--></my-cmp>',
+      );
+
+      dir!.attachEmbeddedView();
+      fixture.detectChanges();
+      expect(fixture.debugElement.nativeElement.innerHTML).toBe(
+        `<my-cmp><div>2 animals<!--nested ICU 0-->!<!--ICU ${
+          HEADER_OFFSET + 1
+        }:1--></div><!--container--></my-cmp>`,
+      );
+
+      fixture.componentRef.instance.count = 1;
+      fixture.detectChanges();
+      expect(fixture.debugElement.nativeElement.innerHTML).toBe(
+        `<my-cmp><div>ONE<!--ICU ${HEADER_OFFSET + 1}:1--></div><!--container--></my-cmp>`,
+      );
+    });
 
     it('with nested containers', () => {
       loadTranslations({
         [computeMsgId('{VAR_SELECT, select, A {A } B {B } other {C }}')]:
-            '{VAR_SELECT, select, A {A } B {B } other {C }}',
+          '{VAR_SELECT, select, A {A } B {B } other {C }}',
         [computeMsgId('{VAR_SELECT, select, A1 {A1 } B1 {B1 } other {C1 }}')]:
-            '{VAR_SELECT, select, A1 {A1 } B1 {B1 } other {C1 }}',
+          '{VAR_SELECT, select, A1 {A1 } B1 {B1 } other {C1 }}',
         [computeMsgId(' {$ICU} ')]: ' {$ICU} ',
       });
       @Component({
@@ -1448,10 +1627,11 @@ describe('runtime i18n', () => {
     it('with named interpolations', () => {
       loadTranslations({
         [computeMsgId(
-            '{VAR_SELECT, select, A {A - {PH_A}} ' +
-            'B {B - {PH_B}} other {other - {PH_WITH_SPACES}}}')]:
-            '{VAR_SELECT, select, A {A (translated) - {PH_A}} ' +
-            'B {B (translated) - {PH_B}} other {other (translated) - {PH_WITH_SPACES}}}',
+          '{VAR_SELECT, select, A {A - {PH_A}} ' +
+            'B {B - {PH_B}} other {other - {PH_WITH_SPACES}}}',
+        )]:
+          '{VAR_SELECT, select, A {A (translated) - {PH_A}} ' +
+          'B {B (translated) - {PH_B}} other {other (translated) - {PH_WITH_SPACES}}}',
       });
       @Component({
         selector: 'comp',
@@ -1479,7 +1659,7 @@ describe('runtime i18n', () => {
 
       expect(fixture.debugElement.nativeElement.innerHTML).toContain('A (translated) - Type A');
 
-      fixture.componentInstance.type = 'C';  // trigger "other" case
+      fixture.componentInstance.type = 'C'; // trigger "other" case
       fixture.detectChanges();
 
       expect(fixture.debugElement.nativeElement.innerHTML).not.toContain('A (translated) - Type A');
@@ -1489,8 +1669,8 @@ describe('runtime i18n', () => {
     it('should work inside an ngTemplateOutlet inside an ngFor', () => {
       loadTranslations({
         [computeMsgId('{VAR_SELECT, select, A {A } B {B } other {other - {PH_WITH_SPACES}}}')]:
-            '{VAR_SELECT, select, A {A } B {B } other {other - {PH_WITH_SPACES}}}',
-        [computeMsgId('{$ICU} ')]: '{$ICU} '
+          '{VAR_SELECT, select, A {A } B {B } other {other - {PH_WITH_SPACES}}}',
+        [computeMsgId('{$ICU} ')]: '{$ICU} ',
       });
 
       @Component({
@@ -1509,7 +1689,7 @@ describe('runtime i18n', () => {
             <ng-container *ngTemplateOutlet="myTemp; context: {$implicit: type}">
             </ng-container>
           </div>
-        `
+        `,
       })
       class AppComponent {
         types = ['A', 'B', 'C'];
@@ -1525,13 +1705,13 @@ describe('runtime i18n', () => {
     });
 
     it('should use metadata from container element if a message is a single ICU', () => {
-      loadTranslations({idA: '{VAR_SELECT, select, 1 {un} other {plus d\'un}}'});
+      loadTranslations({idA: "{VAR_SELECT, select, 1 {un} other {plus d'un}}"});
 
       @Component({
         selector: 'app',
         template: `
           <div i18n="@@idA">{count, select, 1 {one} other {more than one}}</div>
-        `
+        `,
       })
       class AppComponent {
         count = 2;
@@ -1541,7 +1721,7 @@ describe('runtime i18n', () => {
 
       const fixture = TestBed.createComponent(AppComponent);
       fixture.detectChanges();
-      expect(fixture.debugElement.nativeElement.innerHTML).toContain('plus d\'un');
+      expect(fixture.debugElement.nativeElement.innerHTML).toContain("plus d'un");
     });
 
     it('should support ICUs without "other" cases', () => {
@@ -1555,7 +1735,7 @@ describe('runtime i18n', () => {
         template: `
           <div i18n="@@idA">{count, select, 1 {one (select)} 2 {two (select)}}</div> -
           <div i18n="@@idB">{count, plural, =1 {one (plural)} =2 {two (plural)}}</div>
-        `
+        `,
       })
       class AppComponent {
         count = 1;
@@ -1590,10 +1770,12 @@ describe('runtime i18n', () => {
 
     it('should support nested ICUs without "other" cases', () => {
       loadTranslations({
-        idA: '{VAR_SELECT_1, select, A {{VAR_SELECT, select, ' +
-            '1 {un (select)} 2 {deux (select)}}} other {}}',
-        idB: '{VAR_SELECT, select, A {{VAR_PLURAL, plural, ' +
-            '=1 {un (plural)} =2 {deux (plural)}}} other {}}',
+        idA:
+          '{VAR_SELECT_1, select, A {{VAR_SELECT, select, ' +
+          '1 {un (select)} 2 {deux (select)}}} other {}}',
+        idB:
+          '{VAR_SELECT, select, A {{VAR_PLURAL, plural, ' +
+          '=1 {un (plural)} =2 {deux (plural)}}} other {}}',
       });
 
       @Component({
@@ -1609,7 +1791,7 @@ describe('runtime i18n', () => {
               A {{count, plural, =1 {one (plural)} =2 {two (plural)}}}
               other {}
           }</div>
-        `
+        `,
       })
       class AppComponent {
         type = 'A';
@@ -1658,7 +1840,7 @@ describe('runtime i18n', () => {
         selector: 'app',
         template: `
           <div i18n="@@idA">{count$ | async, select, 1 {{{count$ | async}} item} 2 {two items}}</div>
-        `
+        `,
       })
       class AppComponent {
         count$ = new BehaviorSubject<number>(1);
@@ -1685,9 +1867,12 @@ describe('runtime i18n', () => {
     });
 
     it('should handle select expressions without an `other` parameter inside a template', () => {
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <ng-container *ngFor="let item of items">{item.value, select, 0 {A} 1 {B} 2 {C}}</ng-container>
-      `);
+      `,
+      );
       fixture.componentInstance.items = [{value: 0}, {value: 1}, {value: 1337}];
       fixture.detectChanges();
       expect(fixture.nativeElement.textContent.trim()).toBe('AB');
@@ -1698,9 +1883,12 @@ describe('runtime i18n', () => {
     });
 
     it('should render an element whose case did not match initially', () => {
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <p *ngFor="let item of items">{item.value, select, 0 {A} 1 {B} 2 {C}}</p>
-      `);
+      `,
+      );
       fixture.componentInstance.items = [{value: 0}, {value: 1}, {value: 1337}];
       fixture.detectChanges();
       expect(fixture.nativeElement.textContent.trim()).toBe('AB');
@@ -1711,9 +1899,12 @@ describe('runtime i18n', () => {
     });
 
     it('should remove an element whose case matched initially, but does not anymore', () => {
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <p *ngFor="let item of items">{item.value, select, 0 {A} 1 {B} 2 {C}}</p>
-      `);
+      `,
+      );
       fixture.componentInstance.items = [{value: 0}, {value: 1}];
       fixture.detectChanges();
       expect(fixture.nativeElement.textContent.trim()).toBe('AB');
@@ -1733,8 +1924,10 @@ describe('runtime i18n', () => {
 
     it('interpolations', () => {
       loadTranslations({[computeMsgId('hello {$INTERPOLATION}')]: 'bonjour {$INTERPOLATION}'});
-      const fixture =
-          initWithTemplate(AppComp, `<div i18n i18n-title title="hello {{name}}"></div>`);
+      const fixture = initWithTemplate(
+        AppComp,
+        `<div i18n i18n-title title="hello {{name}}"></div>`,
+      );
       expect(fixture.nativeElement.innerHTML).toEqual(`<div title="bonjour Angular"></div>`);
 
       fixture.componentRef.instance.name = 'John';
@@ -1745,28 +1938,33 @@ describe('runtime i18n', () => {
     it('with pipes', () => {
       loadTranslations({[computeMsgId('hello {$INTERPOLATION}')]: 'bonjour {$INTERPOLATION}'});
       const fixture = initWithTemplate(
-          AppComp, `<div i18n i18n-title title="hello {{name | uppercase}}"></div>`);
+        AppComp,
+        `<div i18n i18n-title title="hello {{name | uppercase}}"></div>`,
+      );
       expect(fixture.nativeElement.innerHTML).toEqual(`<div title="bonjour ANGULAR"></div>`);
     });
 
     it('multiple attributes', () => {
       loadTranslations({
         [computeMsgId('hello {$INTERPOLATION} - {$INTERPOLATION_1}')]:
-            'bonjour {$INTERPOLATION} - {$INTERPOLATION_1}',
+          'bonjour {$INTERPOLATION} - {$INTERPOLATION_1}',
         [computeMsgId('bye {$INTERPOLATION} - {$INTERPOLATION_1}')]:
-            'au revoir {$INTERPOLATION} - {$INTERPOLATION_1}',
+          'au revoir {$INTERPOLATION} - {$INTERPOLATION_1}',
       });
       const fixture = initWithTemplate(
-          AppComp,
-          `<input i18n i18n-title title="hello {{name}} - {{count}}" i18n-placeholder placeholder="bye {{count}} - {{name}}">`);
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<input title="bonjour Angular - 0" placeholder="au revoir 0 - Angular">`);
+        AppComp,
+        `<input i18n i18n-title title="hello {{name}} - {{count}}" i18n-placeholder placeholder="bye {{count}} - {{name}}">`,
+      );
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<input title="bonjour Angular - 0" placeholder="au revoir 0 - Angular">`,
+      );
 
       fixture.componentRef.instance.name = 'John';
       fixture.componentRef.instance.count = 5;
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<input title="bonjour John - 5" placeholder="au revoir 5 - John">`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<input title="bonjour John - 5" placeholder="au revoir 5 - John">`,
+      );
     });
 
     it('on removed elements', () => {
@@ -1774,8 +1972,10 @@ describe('runtime i18n', () => {
         [computeMsgId('text')]: 'texte',
         [computeMsgId('{$START_TAG_SPAN}content{$CLOSE_TAG_SPAN}')]: 'contenu',
       });
-      const fixture =
-          initWithTemplate(AppComp, `<div i18n><span i18n-title title="text">content</span></div>`);
+      const fixture = initWithTemplate(
+        AppComp,
+        `<div i18n><span i18n-title title="text">content</span></div>`,
+      );
       expect(fixture.nativeElement.innerHTML).toEqual(`<div>contenu</div>`);
     });
 
@@ -1783,8 +1983,10 @@ describe('runtime i18n', () => {
       loadTranslations({[computeMsgId('Hello {$INTERPOLATION}', 'm')]: 'Bonjour {$INTERPOLATION}'});
       const interpolation = ['{%', '%}'] as [string, string];
       TestBed.overrideComponent(AppComp, {set: {interpolation}});
-      const fixture =
-          initWithTemplate(AppComp, `<div i18n-title="m|d" title="Hello {% name %}"></div>`);
+      const fixture = initWithTemplate(
+        AppComp,
+        `<div i18n-title="m|d" title="Hello {% name %}"></div>`,
+      );
 
       const element = fixture.nativeElement.firstChild;
       expect(element.title).toBe('Bonjour Angular');
@@ -1792,10 +1994,13 @@ describe('runtime i18n', () => {
 
     it('in nested template', () => {
       loadTranslations({[computeMsgId('Item {$INTERPOLATION}', 'm')]: 'Article {$INTERPOLATION}'});
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
           <div *ngFor='let item of [1,2,3]'>
             <div i18n-title='m|d' title='Item {{ item }}'></div>
-          </div>`);
+          </div>`,
+      );
 
       const element = fixture.nativeElement;
       for (let i = 0; i < element.children.length; i++) {
@@ -1806,8 +2011,10 @@ describe('runtime i18n', () => {
 
     it('should add i18n attributes on self-closing tags', () => {
       loadTranslations({[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}'});
-      const fixture =
-          initWithTemplate(AppComp, `<img src="logo.png" i18n-title title="Hello {{ name }}">`);
+      const fixture = initWithTemplate(
+        AppComp,
+        `<img src="logo.png" i18n-title title="Hello {{ name }}">`,
+      );
 
       const element = fixture.nativeElement.firstChild;
       expect(element.title).toBe('Bonjour Angular');
@@ -1831,8 +2038,7 @@ describe('runtime i18n', () => {
         selector: 'comp',
         template: '<ng-template i18n-title title="Hello"></ng-template>',
       })
-      class Comp {
-      }
+      class Comp {}
 
       TestBed.configureTestingModule({
         declarations: [Comp, TitleDir],
@@ -1865,8 +2071,7 @@ describe('runtime i18n', () => {
           <button *ngIf="true" i18n-title title="Hello"></button>
         `,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       TestBed.configureTestingModule({
         imports: [CommonModule],
@@ -1890,8 +2095,7 @@ describe('runtime i18n', () => {
           <div *ngIf="true" i18n-title title="Hello"></div>
         `,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       TestBed.configureTestingModule({
         imports: [CommonModule],
@@ -1930,34 +2134,36 @@ describe('runtime i18n', () => {
       expect(dirInstance!.dir).toBe('Bonjour Angular');
     });
 
-    it('should allow directive inputs (as interpolated props)' +
-           'on <ng-template> with structural directives present',
-       () => {
-         loadTranslations({[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}'});
+    it(
+      'should allow directive inputs (as interpolated props)' +
+        'on <ng-template> with structural directives present',
+      () => {
+        loadTranslations({[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}'});
 
-         let dirInstance: WithInput;
-         @Directive({selector: '[dir]'})
-         class WithInput {
-           constructor() {
-             dirInstance = this;
-           }
-           @Input() dir: string = '';
-         }
+        let dirInstance: WithInput;
+        @Directive({selector: '[dir]'})
+        class WithInput {
+          constructor() {
+            dirInstance = this;
+          }
+          @Input() dir: string = '';
+        }
 
-         @Component({
-           selector: 'my-app',
-           template: '<ng-template *ngIf="true" i18n-dir dir="Hello {{ name }}"></ng-template>',
-         })
-         class TestComp {
-           name = 'Angular';
-         }
+        @Component({
+          selector: 'my-app',
+          template: '<ng-template *ngIf="true" i18n-dir dir="Hello {{ name }}"></ng-template>',
+        })
+        class TestComp {
+          name = 'Angular';
+        }
 
-         TestBed.configureTestingModule({declarations: [TestComp, WithInput]});
-         const fixture = TestBed.createComponent(TestComp);
-         fixture.detectChanges();
+        TestBed.configureTestingModule({declarations: [TestComp, WithInput]});
+        const fixture = TestBed.createComponent(TestComp);
+        fixture.detectChanges();
 
-         expect(dirInstance!.dir).toBe('Bonjour Angular');
-       });
+        expect(dirInstance!.dir).toBe('Bonjour Angular');
+      },
+    );
 
     it('should apply i18n attributes during second template pass', () => {
       loadTranslations({[computeMsgId('Set')]: 'Set'});
@@ -1966,25 +2172,22 @@ describe('runtime i18n', () => {
         inputs: ['test'],
         exportAs: 'dir',
       })
-      class Dir {
-      }
+      class Dir {}
 
       @Component({
         selector: 'other',
-        template: `<div i18n #ref="dir" test="Set" i18n-test="This is also a test"></div>`
+        template: `<div i18n #ref="dir" test="Set" i18n-test="This is also a test"></div>`,
       })
-      class Other {
-      }
+      class Other {}
 
       @Component({
         selector: 'blah',
         template: `
           <other></other>
           <other></other>
-        `
+        `,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       TestBed.configureTestingModule({
         declarations: [Dir, Cmp, Other],
@@ -1999,11 +2202,14 @@ describe('runtime i18n', () => {
     it('with complex expressions', () => {
       loadTranslations({
         [computeMsgId('{$INTERPOLATION} - {$INTERPOLATION_1} - {$INTERPOLATION_2}')]:
-            '{$INTERPOLATION} - {$INTERPOLATION_1} - {$INTERPOLATION_2} (fr)'
+          '{$INTERPOLATION} - {$INTERPOLATION_1} - {$INTERPOLATION_2} (fr)',
       });
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <div i18n-title title="{{ name | uppercase }} - {{ obj?.a?.b }} - {{ obj?.getA()?.b }}"></div>
-      `);
+      `,
+      );
       // the `obj` field is not yet defined, so 2nd and 3rd interpolations return empty
       // strings
       expect(fixture.nativeElement.firstChild.title).toEqual(`ANGULAR -  -  (fr)`);
@@ -2030,8 +2236,7 @@ describe('runtime i18n', () => {
           <ng-container i18n-mydir="meaning|description" mydir="Hello"></ng-container>
         `,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       TestBed.configureTestingModule({
         declarations: [Cmp, Dir],
@@ -2054,17 +2259,21 @@ describe('runtime i18n', () => {
     it('should replace existing DOM elements with empty translation', () => {
       loadTranslations({
         [computeMsgId(
-            ' Start {$START_TAG_DIV}DIV{$CLOSE_TAG_DIV}' +
-            '{$START_TAG_SPAN}SPAN{$CLOSE_TAG_SPAN} End ')]: '',
+          ' Start {$START_TAG_DIV}DIV{$CLOSE_TAG_DIV}' +
+            '{$START_TAG_SPAN}SPAN{$CLOSE_TAG_SPAN} End ',
+        )]: '',
       });
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <div i18n>
           Start
           <div>DIV</div>
           <span>SPAN</span>
           End
         </div>
-      `);
+      `,
+      );
       expect(fixture.nativeElement.textContent).toBe('');
     });
 
@@ -2072,9 +2281,12 @@ describe('runtime i18n', () => {
       loadTranslations({
         [computeMsgId('{VAR_PLURAL, plural, =0 {zero} other {more than zero}}')]: '',
       });
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <div i18n>{count, plural, =0 {zero} other {more than zero}}</div>
-      `);
+      `,
+      );
       expect(fixture.nativeElement.textContent).toBe('');
     });
   });
@@ -2100,7 +2312,7 @@ describe('runtime i18n', () => {
               =1 {one <i>email</i>}
               other {{{exp1}} emails}
          }
-      </div><div test inner></div>`
+      </div><div test inner></div>`,
     })
     class MyApp {
       exp1 = 1;
@@ -2111,11 +2323,12 @@ describe('runtime i18n', () => {
     loadTranslations({
       // Note that this translation switches the order of the expressions!
       [computeMsgId('start {$INTERPOLATION} middle {$INTERPOLATION_1} end')]:
-          'début {$INTERPOLATION_1} milieu {$INTERPOLATION} fin',
+        'début {$INTERPOLATION_1} milieu {$INTERPOLATION} fin',
       [computeMsgId(
-          '{VAR_PLURAL, plural, =0 {no {START_BOLD_TEXT}emails{CLOSE_BOLD_TEXT}!} =1 {one {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} emails}}')]:
-          '{VAR_PLURAL, plural, =0 {aucun {START_BOLD_TEXT}email{CLOSE_BOLD_TEXT}!} =1 {un {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} emails}}',
-      [computeMsgId(' trad: {$ICU} ')]: ' traduction: {$ICU} '
+        '{VAR_PLURAL, plural, =0 {no {START_BOLD_TEXT}emails{CLOSE_BOLD_TEXT}!} =1 {one {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} emails}}',
+      )]:
+        '{VAR_PLURAL, plural, =0 {aucun {START_BOLD_TEXT}email{CLOSE_BOLD_TEXT}!} =1 {un {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} emails}}',
+      [computeMsgId(' trad: {$ICU} ')]: ' traduction: {$ICU} ',
     });
     const fixture = TestBed.createComponent(MyApp);
     fixture.detectChanges();
@@ -2131,7 +2344,7 @@ describe('runtime i18n', () => {
     expect(outerDiv.textContent!.trim()).toBe('traduction: un email');
     expect(innerDiv.getAttribute('class')).toBe('foo');
 
-    directiveInstances.forEach(instance => instance.klass = 'bar');
+    directiveInstances.forEach((instance) => (instance.klass = 'bar'));
     fixture.componentRef.instance.exp1 = 2;
     fixture.componentRef.instance.exp2 = 3;
     fixture.detectChanges();
@@ -2174,8 +2387,9 @@ describe('runtime i18n', () => {
       [computeMsgId('works')]: 'fonctionne',
     });
     const fixture = initWithTemplate(
-        AppComp,
-        `<my-comp i18n i18n-title title="works" i18n-value="hi" value="Hello {{name}}"></my-comp>`);
+      AppComp,
+      `<my-comp i18n i18n-title title="works" i18n-value="hi" value="Hello {{name}}"></my-comp>`,
+    );
     fixture.detectChanges();
 
     const directive = fixture.debugElement.children[0].injector.get(MyComp);
@@ -2188,20 +2402,24 @@ describe('runtime i18n', () => {
   it('should support adding/moving/removing nodes', () => {
     loadTranslations({
       [computeMsgId(
-          '{$START_TAG_DIV2}{$CLOSE_TAG_DIV2}' +
+        '{$START_TAG_DIV2}{$CLOSE_TAG_DIV2}' +
           '{$START_TAG_DIV3}{$CLOSE_TAG_DIV3}' +
           '{$START_TAG_DIV4}{$CLOSE_TAG_DIV4}' +
           '{$START_TAG_DIV5}{$CLOSE_TAG_DIV5}' +
           '{$START_TAG_DIV6}{$CLOSE_TAG_DIV6}' +
           '{$START_TAG_DIV7}{$CLOSE_TAG_DIV7}' +
-          '{$START_TAG_DIV8}{$CLOSE_TAG_DIV8}')]: '{$START_TAG_DIV2}{$CLOSE_TAG_DIV2}' +
-          '{$START_TAG_DIV8}{$CLOSE_TAG_DIV8}' +
-          '{$START_TAG_DIV4}{$CLOSE_TAG_DIV4}' +
-          '{$START_TAG_DIV5}{$CLOSE_TAG_DIV5}Bonjour monde' +
-          '{$START_TAG_DIV3}{$CLOSE_TAG_DIV3}' +
-          '{$START_TAG_DIV7}{$CLOSE_TAG_DIV7}'
+          '{$START_TAG_DIV8}{$CLOSE_TAG_DIV8}',
+      )]:
+        '{$START_TAG_DIV2}{$CLOSE_TAG_DIV2}' +
+        '{$START_TAG_DIV8}{$CLOSE_TAG_DIV8}' +
+        '{$START_TAG_DIV4}{$CLOSE_TAG_DIV4}' +
+        '{$START_TAG_DIV5}{$CLOSE_TAG_DIV5}Bonjour monde' +
+        '{$START_TAG_DIV3}{$CLOSE_TAG_DIV3}' +
+        '{$START_TAG_DIV7}{$CLOSE_TAG_DIV7}',
     });
-    const fixture = initWithTemplate(AppComp, `
+    const fixture = initWithTemplate(
+      AppComp,
+      `
       <div i18n>
         <div2></div2>
         <div3></div3>
@@ -2210,17 +2428,17 @@ describe('runtime i18n', () => {
         <div6></div6>
         <div7></div7>
         <div8></div8>
-      </div>`);
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual(
-            `<div><div2></div2><div8></div8><div4></div4><div5></div5>Bonjour monde<div3></div3><div7></div7></div>`);
+      </div>`,
+    );
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      `<div><div2></div2><div8></div8><div4></div4><div5></div5>Bonjour monde<div3></div3><div7></div7></div>`,
+    );
   });
 
   describe('projection', () => {
     it('should project the translations', () => {
       @Component({selector: 'child', template: '<p><ng-content></ng-content></p>'})
-      class Child {
-      }
+      class Child {}
 
       @Component({
         selector: 'parent',
@@ -2231,7 +2449,7 @@ describe('runtime i18n', () => {
                 <remove-me-2></remove-me-2>
               </child>
               <remove-me-3></remove-me-3>
-            </div>`
+            </div>`,
       })
       class Parent {
         name: string = 'Parent';
@@ -2240,24 +2458,24 @@ describe('runtime i18n', () => {
       loadTranslations({
         [computeMsgId('Child of {$INTERPOLATION}')]: 'Enfant de {$INTERPOLATION}',
         [computeMsgId(
-            '{$START_TAG_CHILD}I am projected from' +
+          '{$START_TAG_CHILD}I am projected from' +
             ' {$START_BOLD_TEXT}{$INTERPOLATION}{$START_TAG_REMOVE_ME_1}{$CLOSE_TAG_REMOVE_ME_1}{$CLOSE_BOLD_TEXT}' +
             '{$START_TAG_REMOVE_ME_2}{$CLOSE_TAG_REMOVE_ME_2}' +
             '{$CLOSE_TAG_CHILD}' +
-            '{$START_TAG_REMOVE_ME_3}{$CLOSE_TAG_REMOVE_ME_3}')]:
-            '{$START_TAG_CHILD}Je suis projeté depuis {$START_BOLD_TEXT}{$INTERPOLATION}{$CLOSE_BOLD_TEXT}{$CLOSE_TAG_CHILD}'
+            '{$START_TAG_REMOVE_ME_3}{$CLOSE_TAG_REMOVE_ME_3}',
+        )]:
+          '{$START_TAG_CHILD}Je suis projeté depuis {$START_BOLD_TEXT}{$INTERPOLATION}{$CLOSE_BOLD_TEXT}{$CLOSE_TAG_CHILD}',
       });
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(
-              `<div><child><p>Je suis projeté depuis <b title="Enfant de Parent">Parent</b></p></child></div>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<div><child><p>Je suis projeté depuis <b title="Enfant de Parent">Parent</b></p></child></div>`,
+      );
     });
 
     it('should project a translated i18n block', () => {
       @Component({selector: 'child', template: '<p><ng-content></ng-content></p>'})
-      class Child {
-      }
+      class Child {}
 
       @Component({
         selector: 'parent',
@@ -2268,7 +2486,7 @@ describe('runtime i18n', () => {
               <b i18n i18n-title title="Child of {{name}}">I am projected from {{name}}</b>
               <any></any>
             </child>
-          </div>`
+          </div>`,
       })
       class Parent {
         name: string = 'Parent';
@@ -2277,13 +2495,13 @@ describe('runtime i18n', () => {
       loadTranslations({
         [computeMsgId('Child of {$INTERPOLATION}')]: 'Enfant de {$INTERPOLATION}',
         [computeMsgId('I am projected from {$INTERPOLATION}')]:
-            'Je suis projeté depuis {$INTERPOLATION}'
+          'Je suis projeté depuis {$INTERPOLATION}',
       });
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(
-              `<div><child><p><any></any><b title="Enfant de Parent">Je suis projeté depuis Parent</b><any></any></p></child></div>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<div><child><p><any></any><b title="Enfant de Parent">Je suis projeté depuis Parent</b><any></any></p></child></div>`,
+      );
 
       // it should be able to render a new component with the same template code
       const fixture2 = TestBed.createComponent(Parent);
@@ -2292,9 +2510,9 @@ describe('runtime i18n', () => {
 
       fixture2.componentRef.instance.name = 'Parent 2';
       fixture2.detectChanges();
-      expect(fixture2.nativeElement.innerHTML)
-          .toEqual(
-              `<div><child><p><any></any><b title="Enfant de Parent 2">Je suis projeté depuis Parent 2</b><any></any></p></child></div>`);
+      expect(fixture2.nativeElement.innerHTML).toEqual(
+        `<div><child><p><any></any><b title="Enfant de Parent 2">Je suis projeté depuis Parent 2</b><any></any></p></child></div>`,
+      );
 
       // The first fixture should not have changed
       expect(fixture.nativeElement.innerHTML).not.toEqual(fixture2.nativeElement.innerHTML);
@@ -2302,13 +2520,13 @@ describe('runtime i18n', () => {
 
     it('should re-project translations when multiple projections', () => {
       @Component({selector: 'grand-child', template: '<div><ng-content></ng-content></div>'})
-      class GrandChild {
-      }
+      class GrandChild {}
 
-      @Component(
-          {selector: 'child', template: '<grand-child><ng-content></ng-content></grand-child>'})
-      class Child {
-      }
+      @Component({
+        selector: 'child',
+        template: '<grand-child><ng-content></ng-content></grand-child>',
+      })
+      class Child {}
 
       @Component({selector: 'parent', template: `<child i18n><b>Hello</b> World!</child>`})
       class Parent {
@@ -2318,23 +2536,24 @@ describe('runtime i18n', () => {
       TestBed.configureTestingModule({declarations: [Parent, Child, GrandChild]});
       loadTranslations({
         [computeMsgId('{$START_BOLD_TEXT}Hello{$CLOSE_BOLD_TEXT} World!')]:
-            '{$START_BOLD_TEXT}Bonjour{$CLOSE_BOLD_TEXT} monde!'
+          '{$START_BOLD_TEXT}Bonjour{$CLOSE_BOLD_TEXT} monde!',
       });
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual('<child><grand-child><div><b>Bonjour</b> monde!</div></grand-child></child>');
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        '<child><grand-child><div><b>Bonjour</b> monde!</div></grand-child></child>',
+      );
     });
 
     it('should be able to remove projected placeholders', () => {
       @Component({selector: 'grand-child', template: '<div><ng-content></ng-content></div>'})
-      class GrandChild {
-      }
+      class GrandChild {}
 
-      @Component(
-          {selector: 'child', template: '<grand-child><ng-content></ng-content></grand-child>'})
-      class Child {
-      }
+      @Component({
+        selector: 'child',
+        template: '<grand-child><ng-content></ng-content></grand-child>',
+      })
+      class Child {}
 
       @Component({selector: 'parent', template: `<child i18n><b>Hello</b> World!</child>`})
       class Parent {
@@ -2342,18 +2561,19 @@ describe('runtime i18n', () => {
       }
 
       TestBed.configureTestingModule({declarations: [Parent, Child, GrandChild]});
-      loadTranslations(
-          {[computeMsgId('{$START_BOLD_TEXT}Hello{$CLOSE_BOLD_TEXT} World!')]: 'Bonjour monde!'});
+      loadTranslations({
+        [computeMsgId('{$START_BOLD_TEXT}Hello{$CLOSE_BOLD_TEXT} World!')]: 'Bonjour monde!',
+      });
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual('<child><grand-child><div>Bonjour monde!</div></grand-child></child>');
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        '<child><grand-child><div>Bonjour monde!</div></grand-child></child>',
+      );
     });
 
     it('should project translations with selectors', () => {
       @Component({selector: 'child', template: `<ng-content select='span'></ng-content>`})
-      class Child {
-      }
+      class Child {}
 
       @Component({
         selector: 'parent',
@@ -2362,29 +2582,28 @@ describe('runtime i18n', () => {
             <span title="keepMe"></span>
             <span title="deleteMe"></span>
           </child>
-        `
+        `,
       })
-      class Parent {
-      }
+      class Parent {}
 
       TestBed.configureTestingModule({declarations: [Parent, Child]});
       loadTranslations({
         [computeMsgId('{$START_TAG_SPAN}{$CLOSE_TAG_SPAN}{$START_TAG_SPAN_1}{$CLOSE_TAG_SPAN}')]:
-            '{$START_TAG_SPAN}Contenu{$CLOSE_TAG_SPAN}'
+          '{$START_TAG_SPAN}Contenu{$CLOSE_TAG_SPAN}',
       });
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual('<child><span title="keepMe">Contenu</span></child>');
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        '<child><span title="keepMe">Contenu</span></child>',
+      );
     });
 
     it('should project content in i18n blocks', () => {
       @Component({
         selector: 'child',
-        template: `<div i18n>Content projected from <ng-content></ng-content></div>`
+        template: `<div i18n>Content projected from <ng-content></ng-content></div>`,
       })
-      class Child {
-      }
+      class Child {}
 
       @Component({selector: 'parent', template: `<child>{{name}}</child>`})
       class Parent {
@@ -2393,27 +2612,28 @@ describe('runtime i18n', () => {
       TestBed.configureTestingModule({declarations: [Parent, Child]});
       loadTranslations({
         [computeMsgId('Content projected from {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}')]:
-            'Contenu projeté depuis {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}'
+          'Contenu projeté depuis {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}',
       });
 
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<child><div>Contenu projeté depuis Parent</div></child>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<child><div>Contenu projeté depuis Parent</div></child>`,
+      );
 
       fixture.componentRef.instance.name = 'Parent component';
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<child><div>Contenu projeté depuis Parent component</div></child>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<child><div>Contenu projeté depuis Parent component</div></child>`,
+      );
     });
 
     it('should project content in i18n blocks with placeholders', () => {
       @Component({
         selector: 'child',
-        template: `<div i18n>Content projected from <ng-content></ng-content></div>`
+        template: `<div i18n>Content projected from <ng-content></ng-content></div>`,
       })
-      class Child {
-      }
+      class Child {}
 
       @Component({selector: 'parent', template: `<child><b>{{name}}</b></child>`})
       class Parent {
@@ -2422,19 +2642,21 @@ describe('runtime i18n', () => {
       TestBed.configureTestingModule({declarations: [Parent, Child]});
       loadTranslations({
         [computeMsgId('Content projected from {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}')]:
-            '{$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT} a projeté le contenu'
+          '{$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT} a projeté le contenu',
       });
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<child><div><b>Parent</b> a projeté le contenu</div></child>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<child><div><b>Parent</b> a projeté le contenu</div></child>`,
+      );
     });
 
     it('should project translated content in i18n blocks', () => {
-      @Component(
-          {selector: 'child', template: `<div i18n>Child content <ng-content></ng-content></div>`})
-      class Child {
-      }
+      @Component({
+        selector: 'child',
+        template: `<div i18n>Child content <ng-content></ng-content></div>`,
+      })
+      class Child {}
 
       @Component({selector: 'parent', template: `<child i18n>and projection from {{name}}</child>`})
       class Parent {
@@ -2443,24 +2665,24 @@ describe('runtime i18n', () => {
       TestBed.configureTestingModule({declarations: [Parent, Child]});
       loadTranslations({
         [computeMsgId('Child content {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}')]:
-            'Contenu enfant {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}',
+          'Contenu enfant {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}',
         [computeMsgId('and projection from {$INTERPOLATION}')]:
-            'et projection depuis {$INTERPOLATION}'
+          'et projection depuis {$INTERPOLATION}',
       });
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<child><div>Contenu enfant et projection depuis Parent</div></child>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<child><div>Contenu enfant et projection depuis Parent</div></child>`,
+      );
     });
 
     it('should project bare ICU expressions', () => {
       loadTranslations({
         [computeMsgId('{VAR_PLURAL, plural, =1 {one} other {at least {INTERPOLATION} .}}')]:
-            '{VAR_PLURAL, plural, =1 {one} other {at least {INTERPOLATION} .}}'
+          '{VAR_PLURAL, plural, =1 {one} other {at least {INTERPOLATION} .}}',
       });
       @Component({selector: 'child', template: '<div><ng-content></ng-content></div>'})
-      class Child {
-      }
+      class Child {}
 
       @Component({
         selector: 'parent',
@@ -2470,7 +2692,7 @@ describe('runtime i18n', () => {
         plural,
          =1 {one}
         other {at least {{value}} .}
-      }</child>`
+      }</child>`,
       })
       class Parent {
         value = 3;
@@ -2484,15 +2706,15 @@ describe('runtime i18n', () => {
     });
 
     it('should project ICUs in i18n blocks', () => {
-      @Component(
-          {selector: 'child', template: `<div i18n>Child content <ng-content></ng-content></div>`})
-      class Child {
-      }
+      @Component({
+        selector: 'child',
+        template: `<div i18n>Child content <ng-content></ng-content></div>`,
+      })
+      class Child {}
 
       @Component({
         selector: 'parent',
-        template:
-            `<child i18n>and projection from {name, select, angular {Angular} other {{{name}}}}</child>`
+        template: `<child i18n>and projection from {name, select, angular {Angular} other {{{name}}}}</child>`,
       })
       class Parent {
         name: string = 'Parent';
@@ -2500,29 +2722,34 @@ describe('runtime i18n', () => {
       TestBed.configureTestingModule({declarations: [Parent, Child]});
       loadTranslations({
         [computeMsgId('{VAR_SELECT, select, angular {Angular} other {{INTERPOLATION}}}')]:
-            '{VAR_SELECT, select, angular {Angular} other {{INTERPOLATION}}}',
+          '{VAR_SELECT, select, angular {Angular} other {{INTERPOLATION}}}',
         [computeMsgId('Child content {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}')]:
-            'Contenu enfant {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}',
-        [computeMsgId('and projection from {$ICU}')]: 'et projection depuis {$ICU}'
+          'Contenu enfant {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}',
+        [computeMsgId('and projection from {$ICU}')]: 'et projection depuis {$ICU}',
       });
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<child><div>Contenu enfant et projection depuis Parent<!--ICU ${
-              HEADER_OFFSET + 1}:0--></div></child>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<child><div>Contenu enfant et projection depuis Parent<!--ICU ${
+          HEADER_OFFSET + 1
+        }:0--></div></child>`,
+      );
 
       fixture.componentRef.instance.name = 'angular';
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(`<child><div>Contenu enfant et projection depuis Angular<!--ICU ${
-              HEADER_OFFSET + 1}:0--></div></child>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        `<child><div>Contenu enfant et projection depuis Angular<!--ICU ${
+          HEADER_OFFSET + 1
+        }:0--></div></child>`,
+      );
     });
 
     it(`shouldn't project deleted projections in i18n blocks`, () => {
-      @Component(
-          {selector: 'child', template: `<div i18n>Child content <ng-content></ng-content></div>`})
-      class Child {
-      }
+      @Component({
+        selector: 'child',
+        template: `<div i18n>Child content <ng-content></ng-content></div>`,
+      })
+      class Child {}
 
       @Component({selector: 'parent', template: `<child i18n>and projection from {{name}}</child>`})
       class Parent {
@@ -2531,9 +2758,9 @@ describe('runtime i18n', () => {
       TestBed.configureTestingModule({declarations: [Parent, Child]});
       loadTranslations({
         [computeMsgId('Child content {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}')]:
-            'Contenu enfant',
+          'Contenu enfant',
         [computeMsgId('and projection from {$INTERPOLATION}')]:
-            'et projection depuis {$INTERPOLATION}'
+          'et projection depuis {$INTERPOLATION}',
       });
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
@@ -2543,22 +2770,21 @@ describe('runtime i18n', () => {
     it('should display/destroy projected i18n content', () => {
       loadTranslations({
         [computeMsgId('{VAR_SELECT, select, A {A} B {B} other {other}}')]:
-            '{VAR_SELECT, select, A {A} B {B} other {other}}'
+          '{VAR_SELECT, select, A {A} B {B} other {other}}',
       });
       @Component({
         selector: 'app',
         template: `
             <ng-container>(<ng-content></ng-content>)</ng-container>
-        `
+        `,
       })
-      class MyContentApp {
-      }
+      class MyContentApp {}
 
       @Component({
         selector: 'my-app',
         template: `
           <app i18n *ngIf="condition">{type, select, A {A} B {B} other {other}}</app>
-        `
+        `,
       })
       class MyApp {
         type = 'A';
@@ -2591,14 +2817,15 @@ describe('runtime i18n', () => {
 
   describe('queries', () => {
     function toHtml(element: Element): string {
-      return element.innerHTML.replace(/\sng-reflect-\S*="[^"]*"/g, '')
-          .replace(/<!--bindings=\{(\W.*\W\s*)?\}-->/g, '');
+      return element.innerHTML
+        .replace(/\sng-reflect-\S*="[^"]*"/g, '')
+        .replace(/<!--bindings=\{(\W.*\W\s*)?\}-->/g, '');
     }
 
     it('detached nodes should still be part of query', () => {
       @Directive({selector: '[text]', inputs: ['text'], exportAs: 'textDir'})
       class TextDirective {
-        text: string|undefined;
+        text: string | undefined;
         constructor() {}
       }
 
@@ -2622,14 +2849,16 @@ describe('runtime i18n', () => {
       TestBed.configureTestingModule({declarations: [TextDirective, DivQuery]});
       loadTranslations({
         [computeMsgId(
-            '{$START_TAG_NG_TEMPLATE}{$START_TAG_DIV_1}' +
+          '{$START_TAG_NG_TEMPLATE}{$START_TAG_DIV_1}' +
             '{$START_TAG_DIV}' +
             '{$START_TAG_SPAN}Content{$CLOSE_TAG_SPAN}' +
             '{$CLOSE_TAG_DIV}' +
-            '{$CLOSE_TAG_DIV}{$CLOSE_TAG_NG_TEMPLATE}')]:
-            '{$START_TAG_NG_TEMPLATE}Contenu{$CLOSE_TAG_NG_TEMPLATE}'
+            '{$CLOSE_TAG_DIV}{$CLOSE_TAG_NG_TEMPLATE}',
+        )]: '{$START_TAG_NG_TEMPLATE}Contenu{$CLOSE_TAG_NG_TEMPLATE}',
       });
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
           <div-query #q i18n>
             <ng-template>
               <div>
@@ -2639,7 +2868,8 @@ describe('runtime i18n', () => {
               </div>
             </ng-template>
           </div-query>
-        `);
+        `,
+      );
       const q = fixture.debugElement.children[0].references['q'];
       expect(q.query.length).toEqual(0);
 
@@ -2647,44 +2877,50 @@ describe('runtime i18n', () => {
       q.create();
       fixture.detectChanges();
       expect(q.query.length).toEqual(1);
-      expect(toHtml(fixture.nativeElement))
-          .toEqual(`<div-query>Contenu<!--ng-container--></div-query>`);
+      expect(toHtml(fixture.nativeElement)).toEqual(
+        `<div-query>Contenu<!--ng-container--></div-query>`,
+      );
 
       // Disable ng-if
       fixture.componentInstance.visible = false;
       fixture.detectChanges();
       expect(q.query.length).toEqual(0);
-      expect(toHtml(fixture.nativeElement))
-          .toEqual(`<div-query>Contenu<!--ng-container--></div-query>`);
+      expect(toHtml(fixture.nativeElement)).toEqual(
+        `<div-query>Contenu<!--ng-container--></div-query>`,
+      );
     });
   });
 
   describe('invalid translations handling', () => {
     it('should throw in case invalid ICU is present in a template', () => {
       // Error message is produced by Compiler.
-      expect(() => initWithTemplate(AppComp, '{count, select, 10 {ten} other {other}'))
-          .toThrowError(
-              /Invalid ICU message. Missing '}'. \("{count, select, 10 {ten} other {other}\[ERROR ->\]"\)/);
+      expect(() =>
+        initWithTemplate(AppComp, '{count, select, 10 {ten} other {other}'),
+      ).toThrowError(
+        /Invalid ICU message. Missing '}'. \("{count, select, 10 {ten} other {other}\[ERROR ->\]"\)/,
+      );
     });
 
     it('should throw in case invalid ICU is present in translation', () => {
       loadTranslations({
         [computeMsgId('{VAR_SELECT, select, 10 {ten} other {other}}')]:
-            // Missing "}" at the end of translation.
-            '{VAR_SELECT, select, 10 {dix} other {autre}'
+          // Missing "}" at the end of translation.
+          '{VAR_SELECT, select, 10 {dix} other {autre}',
       });
 
       // Error message is produced at runtime.
-      expect(() => initWithTemplate(AppComp, '{count, select, 10 {ten} other {other}}'))
-          .toThrowError(
-              /Unable to parse ICU expression in "{�0�, select, 10 {dix} other {autre}" message./);
+      expect(() =>
+        initWithTemplate(AppComp, '{count, select, 10 {ten} other {other}}'),
+      ).toThrowError(
+        /Unable to parse ICU expression in "{�0�, select, 10 {dix} other {autre}" message./,
+      );
     });
 
     it('should throw in case unescaped curly braces are present in a template', () => {
       // Error message is produced by Compiler.
-      expect(() => initWithTemplate(AppComp, 'Text { count }'))
-          .toThrowError(
-              /Do you have an unescaped "{" in your template\? Use "{{ '{' }}"\) to escape it/);
+      expect(() => initWithTemplate(AppComp, 'Text { count }')).toThrowError(
+        /Do you have an unescaped "{" in your template\? Use "{{ '{' }}"\) to escape it/,
+      );
     });
 
     it('should throw in case curly braces are added into translation', () => {
@@ -2692,8 +2928,9 @@ describe('runtime i18n', () => {
         // Curly braces which were not present in a template were added into translation.
         [computeMsgId('Text')]: 'Text { count }',
       });
-      expect(() => initWithTemplate(AppComp, '<div i18n>Text</div>'))
-          .toThrowError(/Unable to parse ICU expression in "Text { count }" message./);
+      expect(() => initWithTemplate(AppComp, '<div i18n>Text</div>')).toThrowError(
+        /Unable to parse ICU expression in "Text { count }" message./,
+      );
     });
   });
 
@@ -2721,10 +2958,9 @@ describe('runtime i18n', () => {
       template: `
         <input #myinput>
         <div i18n>{{myinput.value}}</div>
-      `
+      `,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, InputsDir]});
 
@@ -2747,27 +2983,28 @@ describe('runtime i18n', () => {
       template: `
         <input #myinput>
         <div i18n-title title="{{myinput.value}}"></div>
-      `
+      `,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, InputsDir]});
 
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    expect(fixture.nativeElement.querySelector('div').title)
-        .toContain('value set in Directive.ngOnInit');
+    expect(fixture.nativeElement.querySelector('div').title).toContain(
+      'value set in Directive.ngOnInit',
+    );
   });
 
   it('should not alloc expando slots when there is no new variable to create', () => {
     loadTranslations({
       [computeMsgId('{$START_TAG_DIV} Some content {$CLOSE_TAG_DIV}')]:
-          '{$START_TAG_DIV} Some content {$CLOSE_TAG_DIV}',
+        '{$START_TAG_DIV} Some content {$CLOSE_TAG_DIV}',
       [computeMsgId(
-          '{$START_TAG_SPAN_1}{$ICU}{$CLOSE_TAG_SPAN} - {$START_TAG_SPAN_1}{$ICU_1}{$CLOSE_TAG_SPAN}')]:
-          '{$START_TAG_SPAN_1}{$ICU}{$CLOSE_TAG_SPAN} - {$START_TAG_SPAN_1}{$ICU_1}{$CLOSE_TAG_SPAN}',
+        '{$START_TAG_SPAN_1}{$ICU}{$CLOSE_TAG_SPAN} - {$START_TAG_SPAN_1}{$ICU_1}{$CLOSE_TAG_SPAN}',
+      )]:
+        '{$START_TAG_SPAN_1}{$ICU}{$CLOSE_TAG_SPAN} - {$START_TAG_SPAN_1}{$ICU_1}{$CLOSE_TAG_SPAN}',
     });
     @Component({
       template: `
@@ -2777,7 +3014,7 @@ describe('runtime i18n', () => {
           </div>
       </div>
       <button [close]="true">Button label</button>
-  `
+  `,
     })
     class ContentElementDialog {
       data = false;
@@ -2802,37 +3039,43 @@ describe('runtime i18n', () => {
     it('should work with i18n content that includes elements', () => {
       loadTranslations({
         [computeMsgId('{$START_TAG_SPAN}A{$CLOSE_TAG_SPAN} B ')]:
-            '{$START_TAG_SPAN}a{$CLOSE_TAG_SPAN} b',
+          '{$START_TAG_SPAN}a{$CLOSE_TAG_SPAN} b',
       });
 
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <ng-container *ngTemplateOutlet="tmpl"></ng-container>
         <ng-template #tmpl i18n>
           <span>A</span> B
         </ng-template>
-      `);
+      `,
+      );
       expect(fixture.nativeElement.textContent).toContain('a b');
     });
 
     it('should work with i18n content that includes other templates (*ngIf)', () => {
       loadTranslations({
         [computeMsgId('{$START_TAG_SPAN}A{$CLOSE_TAG_SPAN} B ')]:
-            '{$START_TAG_SPAN}a{$CLOSE_TAG_SPAN} b',
+          '{$START_TAG_SPAN}a{$CLOSE_TAG_SPAN} b',
       });
 
-      const fixture = initWithTemplate(AppComp, `
+      const fixture = initWithTemplate(
+        AppComp,
+        `
         <ng-container *ngTemplateOutlet="tmpl"></ng-container>
         <ng-template #tmpl i18n>
           <span *ngIf="visible">A</span> B
         </ng-template>
-      `);
+      `,
+      );
       expect(fixture.nativeElement.textContent).toContain('a b');
     });
 
     it('should work with i18n content that includes projection', () => {
       loadTranslations({
         [computeMsgId('{$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT} B ')]:
-            '{$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT} b',
+          '{$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT} b',
       });
 
       @Component({
@@ -2842,19 +3085,17 @@ describe('runtime i18n', () => {
           <ng-template #tmpl i18n>
             <ng-content></ng-content> B
           </ng-template>
-        `
+        `,
       })
-      class Projector {
-      }
+      class Projector {}
 
       @Component({
         selector: 'app',
         template: `
           <projector>a</projector>
-        `
+        `,
       })
-      class AppComponent {
-      }
+      class AppComponent {}
 
       TestBed.configureTestingModule({declarations: [AppComponent, Projector]});
 
@@ -2874,10 +3115,9 @@ describe('runtime i18n', () => {
       @Component({
         template: `
             <div i18n>before|<div myDir>inside</div>|after</div>
-          `
+          `,
       })
-      class MyApp {
-      }
+      class MyApp {}
 
       @Directive({selector: '[myDir]'})
       class MyDir {
@@ -2887,7 +3127,6 @@ describe('runtime i18n', () => {
       }
       let myDir!: MyDir;
 
-
       TestBed.configureTestingModule({declarations: [MyApp, MyDir]});
       const fixture = TestBed.createComponent(MyApp);
       fixture.detectChanges();
@@ -2910,7 +3149,7 @@ describe('runtime i18n', () => {
                   registerItemCount
                 }} items)</span>
               }
-          }</h1>`
+          }</h1>`,
     })
     class MyApp {
       registerItemCount = 1;
@@ -2926,15 +3165,13 @@ describe('runtime i18n', () => {
     // This test demonstrates an issue with setting attributes on ICU elements.
     // NOTE: This test is extracted from g3.
     @Component({template: `<div i18n>before|<child>TextNotProjected</child>|after</div>`})
-    class MyApp {
-    }
+    class MyApp {}
 
     @Component({
       selector: 'child',
       template: 'CHILD',
     })
-    class Child {
-    }
+    class Child {}
 
     TestBed.configureTestingModule({declarations: [MyApp, Child]});
     const fixture = TestBed.createComponent(MyApp);
@@ -2950,10 +3187,9 @@ describe('runtime i18n', () => {
     @Component({
       template: `
       <div i18n [title]="null | async"><div>A</div></div>
-      <div i18n>{{(null | async)||'B'}}<div></div></div>`
+      <div i18n>{{(null | async)||'B'}}<div></div></div>`,
     })
-    class MyApp {
-    }
+    class MyApp {}
 
     TestBed.configureTestingModule({declarations: [MyApp]});
     const fixture = TestBed.createComponent(MyApp);
@@ -2961,7 +3197,6 @@ describe('runtime i18n', () => {
     expect(fixture.nativeElement.textContent).toEqual(`AB`);
   });
 
-
   it('should copy injector information unto placeholder', () => {
     // This test demonstrates an issue with i18n Placeholders loosing `injectorIndex` information.
     // NOTE: This test is extracted from g3.
@@ -2971,26 +3206,22 @@ describe('runtime i18n', () => {
           <middle>
             <child>Text</child>
           </middle>
-        </parent>`
+        </parent>`,
     })
-    class MyApp {
-    }
+    class MyApp {}
 
     @Component({selector: 'parent'})
-    class Parent {
-    }
+    class Parent {}
 
     @Component({selector: 'middle'})
-    class Middle {
-    }
+    class Middle {}
     @Component({selector: 'child'})
     class Child {
       constructor(public middle: Middle) {
         child = this;
       }
     }
-    let child: Child|undefined;
-
+    let child: Child | undefined;
 
     TestBed.configureTestingModule({declarations: [MyApp, Parent, Middle, Child]});
     const fixture = TestBed.createComponent(MyApp);
@@ -3006,10 +3237,9 @@ describe('runtime i18n', () => {
       <div *ngFor="let i of [1,2]">
         <ng-template #tmpl i18n><span *ngIf="true">X</span></ng-template>
         <span [ngTemplateOutlet]="tmpl"></span>
-      </div>`
+      </div>`,
     })
-    class MyApp {
-    }
+    class MyApp {}
 
     TestBed.configureTestingModule({declarations: [MyApp]});
     const fixture = TestBed.createComponent(MyApp);
@@ -3017,7 +3247,6 @@ describe('runtime i18n', () => {
     expect(fixture.nativeElement.textContent).toEqual(`XX`);
   });
 
-
   it('should link text after ICU', () => {
     // i18n block must restore the current `currentTNode` so that trailing text node can link to it.
     // NOTE: This test is extracted from g3.
@@ -3044,16 +3273,15 @@ describe('runtime i18n', () => {
           {index, plural, =1 {first} other {rest}}
           {{']'}}
         </ng-container>
-      `
+      `,
     })
-    class MyApp {
-    }
+    class MyApp {}
 
     TestBed.configureTestingModule({declarations: [MyApp]});
     const fixture = TestBed.createComponent(MyApp);
     fixture.detectChanges();
     const textContent = fixture.nativeElement.textContent as string;
-    expect(textContent.split('/').map(s => s.trim())).toEqual([
+    expect(textContent.split('/').map((s) => s.trim())).toEqual([
       '[ 1 one - + - first ]  [ * many - + - rest ]',
       '[ 1 one - + - first ]  [ * many - + - rest ]',
     ]);
@@ -3094,7 +3322,7 @@ describe('runtime i18n', () => {
           other {}
           }
         |after.
-      `
+      `,
     })
     class MyApp {
       retention = {
@@ -3121,7 +3349,7 @@ describe('runtime i18n', () => {
           other {Affects {{parameters.length}} parameters, including <span
               class="parameter-name">{{parameters[0].name}}</span>}
           }</div>
-        `
+        `,
     })
     class MyApp {
       parameters = [{name: 'void_abt_param'}];
@@ -3144,7 +3372,7 @@ describe('runtime i18n', () => {
           =1 {<b>one</b>}
           =2 {<i>two</i>}
       },</li>
-      </ul>`
+      </ul>`,
     })
     class MyApp {
       items = [1, 2];
@@ -3200,8 +3428,9 @@ describe('runtime i18n', () => {
     fixture.detectChanges();
 
     expect(fixture.componentInstance.dir.title).toBeNull();
-    expect(fixture.nativeElement.querySelector('div').getAttribute('title'))
-        .toBe('translatedText value');
+    expect(fixture.nativeElement.querySelector('div').getAttribute('title')).toBe(
+      'translatedText value',
+    );
   });
 });
 
@@ -3226,14 +3455,16 @@ class AppComp {
   template: ``,
   preserveWhitespaces: true,
 })
-class AppCompWithWhitespaces {
-}
+class AppCompWithWhitespaces {}
 
 @Directive({
   selector: '[tplRef]',
 })
 class DirectiveWithTplRef {
-  constructor(public vcRef: ViewContainerRef, public tplRef: TemplateRef<{}>) {}
+  constructor(
+    public vcRef: ViewContainerRef,
+    public tplRef: TemplateRef<{}>,
+  ) {}
   ngOnInit() {
     this.vcRef.createEmbeddedView(this.tplRef, {});
   }
@@ -3247,8 +3478,7 @@ class UppercasePipe implements PipeTransform {
 }
 
 @Directive({selector: `[dialog]`})
-export class DialogDir {
-}
+export class DialogDir {}
 
 @Directive({selector: `button[close]`, host: {'[title]': 'name'}})
 export class CloseBtn {
diff --git a/packages/core/test/acceptance/inherit_definition_feature_spec.ts b/packages/core/test/acceptance/inherit_definition_feature_spec.ts
index c2d4fc3e6fd82..05c32a9410651 100644
--- a/packages/core/test/acceptance/inherit_definition_feature_spec.ts
+++ b/packages/core/test/acceptance/inherit_definition_feature_spec.ts
@@ -7,7 +7,19 @@
  */
 
 import {state, style, trigger} from '@angular/animations';
-import {Component, ContentChildren, Directive, EventEmitter, HostBinding, HostListener, Input, OnChanges, Output, QueryList, ViewChildren} from '@angular/core';
+import {
+  Component,
+  ContentChildren,
+  Directive,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  OnChanges,
+  Output,
+  QueryList,
+  ViewChildren,
+} from '@angular/core';
 import {getDirectiveDef} from '@angular/core/src/render3/definition';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
@@ -19,20 +31,17 @@ describe('inheritance', () => {
       selector: 'my-comp',
       template: '<div></div>',
     })
-    class MyComponent {
-    }
+    class MyComponent {}
 
     @Directive({
       selector: '[my-dir]',
     })
-    class MyDirective extends MyComponent {
-    }
+    class MyDirective extends MyComponent {}
 
     @Component({
       template: `<div my-dir></div>`,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({
       declarations: [App, MyComponent, MyDirective],
@@ -40,13 +49,13 @@ describe('inheritance', () => {
 
     expect(() => {
       TestBed.createComponent(App);
-    })
-        .toThrowError(
-            'NG0903: Directives cannot inherit Components. Directive MyDirective is attempting to extend component MyComponent');
+    }).toThrowError(
+      'NG0903: Directives cannot inherit Components. Directive MyDirective is attempting to extend component MyComponent',
+    );
   });
 
   describe('multiple children', () => {
-    it('should ensure that multiple child classes don\'t cause multiple parent execution', () => {
+    it("should ensure that multiple child classes don't cause multiple parent execution", () => {
       // Assume this inheritance:
       //         Base
       //           |
@@ -102,19 +111,22 @@ describe('inheritance', () => {
       }
 
       @Component({template: `<div subDir1 subDir2></div>`})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, Sub1Directive, Sub2Directive, SuperDirective],
       });
       const fixture = TestBed.createComponent(App);
-      fixture.detectChanges(false);  // Don't check for no changes (so that assertion does not need
+      fixture.detectChanges(false); // Don't check for no changes (so that assertion does not need
       // to worry about it.)
 
       expect(log).toEqual([
-        'Base.backgroundColor', 'Super.color', 'Sub1.height',  //
-        'Base.backgroundColor', 'Super.color', 'Sub2.width',   //
+        'Base.backgroundColor',
+        'Super.color',
+        'Sub1.height', //
+        'Base.backgroundColor',
+        'Super.color',
+        'Sub2.width', //
       ]);
       expect(getDirectiveDef(BaseDirective)!.hostVars).toEqual(2);
       expect(getDirectiveDef(SuperDirective)!.hostVars).toEqual(4);
@@ -137,12 +149,10 @@ describe('inheritance', () => {
       }
 
       @Directive({selector: '[subDir]'})
-      class SubDirective extends SuperDirective {
-      }
+      class SubDirective extends SuperDirective {}
 
       @Component({template: `<div subDir [someInput]="1"></div>`})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, SubDirective, SuperDirective],
@@ -168,8 +178,7 @@ describe('inheritance', () => {
       }
 
       @Component({template: `<div subDir [someInput]="1"></div>`})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, SubDirective],
@@ -193,17 +202,13 @@ describe('inheritance', () => {
       }
 
       @Directive({selector: '[superDir]'})
-      class SuperDirective extends GrandSuperDirective {
-      }
+      class SuperDirective extends GrandSuperDirective {}
 
       @Directive({selector: '[subDir]'})
-      class SubDirective extends SuperDirective {
-      }
-
+      class SubDirective extends SuperDirective {}
 
       @Component({template: `<div subDir [someInput]="1"></div>`})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, SubDirective, SuperDirective, GrandSuperDirective],
@@ -229,13 +234,10 @@ describe('inheritance', () => {
       }
 
       @Directive({selector: '[subDir]'})
-      class SubDirective extends SuperDirective {
-      }
-
+      class SubDirective extends SuperDirective {}
 
       @Component({template: `<div subDir [someInput]="1"></div>`})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, SubDirective, SuperDirective],
@@ -261,13 +263,10 @@ describe('inheritance', () => {
       class SuperClass extends GrandSuperDirective {}
 
       @Directive({selector: '[subDir]'})
-      class SubDirective extends SuperClass {
-      }
-
+      class SubDirective extends SuperClass {}
 
       @Component({template: `<div subDir [someInput]="1"></div>`})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, SubDirective, GrandSuperDirective],
@@ -294,10 +293,8 @@ describe('inheritance', () => {
         @Input() someInput = '';
       }
 
-
       @Component({template: `<div subDir [someInput]="1"></div>`})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, SubDirective],
@@ -373,7 +370,7 @@ describe('inheritance', () => {
         }
       }
 
-      beforeEach(() => fired.length = 0);
+      beforeEach(() => (fired.length = 0));
 
       it('ngOnInit', () => {
         @Directive({
@@ -411,9 +408,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngDoCheck', () => {
@@ -452,9 +447,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentInit', () => {
@@ -493,9 +486,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentChecked', () => {
@@ -534,9 +525,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewInit', () => {
@@ -575,9 +564,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewChecked', () => {
@@ -616,9 +603,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngOnDestroy', () => {
@@ -657,9 +642,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'sub destroy',
-        ]);
+        expect(fired).toEqual(['sub destroy']);
       });
     });
 
@@ -700,8 +683,9 @@ describe('inheritance', () => {
         const fixture = TestBed.createComponent(App);
         fixture.detectChanges();
 
-        const subDir =
-            fixture.debugElement.query(By.directive(SubDirective)).injector.get(SubDirective);
+        const subDir = fixture.debugElement
+          .query(By.directive(SubDirective))
+          .injector.get(SubDirective);
 
         expect(subDir.foo).toBe('a');
         expect(subDir.bar).toBe('b');
@@ -712,7 +696,7 @@ describe('inheritance', () => {
       it('should not inherit transforms if inputs are re-declared', () => {
         @Directive()
         class Base {
-          @Input({transform: v => `${v}-transformed`}) someInput: string = '';
+          @Input({transform: (v) => `${v}-transformed`}) someInput: string = '';
         }
 
         @Directive({
@@ -720,22 +704,21 @@ describe('inheritance', () => {
           selector: 'dir',
           inputs: ['someInput'],
         })
-        class ActualDir extends Base {
-        }
+        class ActualDir extends Base {}
 
         @Component({
           standalone: true,
           imports: [ActualDir],
           template: `<dir someInput="newValue">`,
         })
-        class TestCmp {
-        }
+        class TestCmp {}
 
         const fixture = TestBed.createComponent(TestCmp);
         fixture.detectChanges();
 
-        const actualDir =
-            fixture.debugElement.query(By.directive(ActualDir)).injector.get(ActualDir);
+        const actualDir = fixture.debugElement
+          .query(By.directive(ActualDir))
+          .injector.get(ActualDir);
 
         expect(actualDir.someInput).toEqual('newValue');
       });
@@ -743,29 +726,29 @@ describe('inheritance', () => {
       it('should inherit transforms if inputs are aliased', () => {
         @Directive()
         class Base {
-          @Input({transform: v => `${v}-transformed`, alias: 'publicName'}) fieldName: string = '';
+          @Input({transform: (v) => `${v}-transformed`, alias: 'publicName'}) fieldName: string =
+            '';
         }
 
         @Directive({
           standalone: true,
           selector: 'dir',
         })
-        class ActualDir extends Base {
-        }
+        class ActualDir extends Base {}
 
         @Component({
           standalone: true,
           imports: [ActualDir],
           template: `<dir publicName="newValue">`,
         })
-        class TestCmp {
-        }
+        class TestCmp {}
 
         const fixture = TestBed.createComponent(TestCmp);
         fixture.detectChanges();
 
-        const actualDir =
-            fixture.debugElement.query(By.directive(ActualDir)).injector.get(ActualDir);
+        const actualDir = fixture.debugElement
+          .query(By.directive(ActualDir))
+          .injector.get(ActualDir);
 
         expect(actualDir.fieldName).toEqual('newValue-transformed');
       });
@@ -794,7 +777,7 @@ describe('inheritance', () => {
         @Component({
           template: `
         <div sub-dir (foo)="handleFoo($event)"></div>
-      `
+      `,
         })
         class App {
           foo = '';
@@ -828,16 +811,14 @@ describe('inheritance', () => {
         @Directive({
           selector: '[sub-dir]',
         })
-        class SubDirective extends SuperDirective {
-        }
+        class SubDirective extends SuperDirective {}
 
         @Component({
           template: `
           <p sub-dir>test</p>
-        `
+        `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, SubDirective],
@@ -868,15 +849,13 @@ describe('inheritance', () => {
         @Directive({
           selector: '[sub-dir]',
         })
-        class SubDirective extends SuperDirective {
-        }
+        class SubDirective extends SuperDirective {}
         @Component({
           template: `
         <p sub-dir superTitle="test">test</p>
-      `
+      `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, SubDirective],
@@ -896,8 +875,7 @@ describe('inheritance', () => {
         let foundQueryList: QueryList<ChildDir>;
 
         @Directive({selector: '[child-dir]'})
-        class ChildDir {
-        }
+        class ChildDir {}
 
         class SuperDirective {
           @ContentChildren(ChildDir) customDirs!: QueryList<ChildDir>;
@@ -918,10 +896,9 @@ describe('inheritance', () => {
           <li child-dir>one</li>
           <li child-dir>two</li>
         </ul>
-      `
+      `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, SubDirective, ChildDir],
@@ -933,7 +910,6 @@ describe('inheritance', () => {
       });
     });
 
-
     // TODO: sub has Input and super has Output on same property
     // TODO: sub has Input and super has HostBinding on same property
     // TODO: sub has Input and super has ViewChild on same property
@@ -991,7 +967,7 @@ describe('inheritance', () => {
         }
       }
 
-      beforeEach(() => fired.length = 0);
+      beforeEach(() => (fired.length = 0));
 
       it('ngOnInit', () => {
         @Directive({
@@ -1029,9 +1005,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngDoCheck', () => {
@@ -1070,9 +1044,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentInit', () => {
@@ -1111,9 +1083,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentChecked', () => {
@@ -1152,9 +1122,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewInit', () => {
@@ -1193,9 +1161,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewChecked', () => {
@@ -1234,9 +1200,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngOnDestroy', () => {
@@ -1275,9 +1239,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'sub destroy',
-        ]);
+        expect(fired).toEqual(['sub destroy']);
       });
     });
 
@@ -1319,8 +1281,9 @@ describe('inheritance', () => {
         const fixture = TestBed.createComponent(App);
         fixture.detectChanges();
 
-        const subDir =
-            fixture.debugElement.query(By.directive(SubDirective)).injector.get(SubDirective);
+        const subDir = fixture.debugElement
+          .query(By.directive(SubDirective))
+          .injector.get(SubDirective);
 
         expect(subDir.foo).toBe('a');
         expect(subDir.bar).toBe('b');
@@ -1355,7 +1318,7 @@ describe('inheritance', () => {
         @Component({
           template: `
         <div sub-dir (foo)="handleFoo($event)"></div>
-      `
+      `,
         })
         class App {
           foo = '';
@@ -1392,16 +1355,14 @@ describe('inheritance', () => {
         @Directive({
           selector: '[sub-dir]',
         })
-        class SubDirective extends SuperDirective {
-        }
+        class SubDirective extends SuperDirective {}
 
         @Component({
           template: `
         <p sub-dir>test</p>
-      `
+      `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, SubDirective, SuperDirective],
@@ -1435,15 +1396,13 @@ describe('inheritance', () => {
         @Directive({
           selector: '[sub-dir]',
         })
-        class SubDirective extends SuperDirective {
-        }
+        class SubDirective extends SuperDirective {}
         @Component({
           template: `
         <p sub-dir superTitle="test">test</p>
-      `
+      `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, SubDirective, SuperDirective],
@@ -1460,8 +1419,7 @@ describe('inheritance', () => {
       let foundQueryList: QueryList<ChildDir>;
 
       @Directive({selector: '[child-dir]'})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       @Directive({
         selector: '[super-dir]',
@@ -1485,10 +1443,9 @@ describe('inheritance', () => {
           <li child-dir>one</li>
           <li child-dir>two</li>
         </ul>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, SubDirective, ChildDir, SuperDirective],
@@ -1499,7 +1456,6 @@ describe('inheritance', () => {
       expect(foundQueryList!.length).toBe(2);
     });
 
-
     // TODO: sub has Input and super has Output on same property
     // TODO: sub has Input and super has HostBinding on same property
     // TODO: sub has Input and super has ViewChild on same property
@@ -1558,7 +1514,7 @@ describe('inheritance', () => {
 
       class SuperDirective extends SuperSuperDirective {}
 
-      beforeEach(() => fired.length = 0);
+      beforeEach(() => (fired.length = 0));
 
       it('ngOnInit', () => {
         @Directive({
@@ -1596,9 +1552,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngDoCheck', () => {
@@ -1637,9 +1591,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentInit', () => {
@@ -1678,9 +1630,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentChecked', () => {
@@ -1719,9 +1669,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewInit', () => {
@@ -1760,9 +1708,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewChecked', () => {
@@ -1801,9 +1747,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngOnDestroy', () => {
@@ -1842,9 +1786,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'sub destroy',
-        ]);
+        expect(fired).toEqual(['sub destroy']);
       });
     });
 
@@ -1891,8 +1833,9 @@ describe('inheritance', () => {
         const fixture = TestBed.createComponent(App);
         fixture.detectChanges();
 
-        const subDir =
-            fixture.debugElement.query(By.directive(SubDirective)).injector.get(SubDirective);
+        const subDir = fixture.debugElement
+          .query(By.directive(SubDirective))
+          .injector.get(SubDirective);
 
         expect(subDir.foo).toBe('a');
         expect(subDir.bar).toBe('b');
@@ -1932,7 +1875,7 @@ describe('inheritance', () => {
         @Component({
           template: `
           <div sub-dir (foo)="handleFoo($event)" (bar)="handleBar($event)"></div>
-        `
+        `,
         })
         class App {
           foo = '';
@@ -1978,16 +1921,14 @@ describe('inheritance', () => {
         @Directive({
           selector: '[sub-dir]',
         })
-        class SubDirective extends SuperDirective {
-        }
+        class SubDirective extends SuperDirective {}
 
         @Component({
           template: `
           <p sub-dir>test</p>
-        `
+        `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, SubDirective, SuperDirective, SuperSuperDirective],
@@ -2030,23 +1971,22 @@ describe('inheritance', () => {
         @Directive({
           selector: '[sub-dir]',
         })
-        class SubDirective extends SuperDirective {
-        }
+        class SubDirective extends SuperDirective {}
         @Component({
           template: `
         <p sub-dir superTitle="test1" superAccessKey="test2">test</p>
-      `
+      `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, SubDirective, SuperDirective, SuperSuperDirective],
         });
         const fixture = TestBed.createComponent(App);
         fixture.detectChanges();
-        const p: HTMLParagraphElement =
-            fixture.debugElement.query(By.directive(SubDirective)).nativeElement;
+        const p: HTMLParagraphElement = fixture.debugElement.query(
+          By.directive(SubDirective),
+        ).nativeElement;
 
         expect(p.title).toBe('test1!!!');
         expect(p.accessKey).toBe('test2???');
@@ -2058,12 +1998,10 @@ describe('inheritance', () => {
       let foundChildDir2s: QueryList<ChildDir2>;
 
       @Directive({selector: '[child-dir-one]'})
-      class ChildDir1 {
-      }
+      class ChildDir1 {}
 
       @Directive({selector: '[child-dir-two]'})
-      class ChildDir2 {
-      }
+      class ChildDir2 {}
 
       @Directive({
         selector: '[super-dir]',
@@ -2093,10 +2031,9 @@ describe('inheritance', () => {
           <li child-dir-one>two</li>
           <li child-dir-two>three</li>
         </ul>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, SubDirective, ChildDir1, SuperDirective],
@@ -2108,7 +2045,6 @@ describe('inheritance', () => {
       expect(foundChildDir2s!.length).toBe(2);
     });
 
-
     // TODO: sub has Input and super has Output on same property
     // TODO: sub has Input and super has HostBinding on same property
     // TODO: sub has Input and super has ViewChild on same property
@@ -2162,7 +2098,7 @@ describe('inheritance', () => {
         }
       }
 
-      beforeEach(() => fired.length = 0);
+      beforeEach(() => (fired.length = 0));
 
       it('ngOnInit', () => {
         @Component({selector: 'my-comp', template: `<p>test</p>`})
@@ -2198,9 +2134,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngDoCheck', () => {
@@ -2239,9 +2173,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentInit', () => {
@@ -2281,9 +2213,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentChecked', () => {
@@ -2323,9 +2253,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewInit', () => {
@@ -2365,9 +2293,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewChecked', () => {
@@ -2407,9 +2333,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngOnDestroy', () => {
@@ -2449,9 +2373,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'sub destroy',
-        ]);
+        expect(fired).toEqual(['sub destroy']);
       });
     });
 
@@ -2490,8 +2412,9 @@ describe('inheritance', () => {
         const fixture = TestBed.createComponent(App);
         fixture.detectChanges();
 
-        const subDir: MyComponent =
-            fixture.debugElement.query(By.directive(MyComponent)).componentInstance;
+        const subDir: MyComponent = fixture.debugElement.query(
+          By.directive(MyComponent),
+        ).componentInstance;
 
         expect(subDir.foo).toEqual('a');
         expect(subDir.bar).toEqual('b');
@@ -2524,7 +2447,7 @@ describe('inheritance', () => {
         @Component({
           template: `
           <my-comp (foo)="handleFoo($event)"></my-comp>
-        `
+        `,
         })
         class App {
           foo = '';
@@ -2559,16 +2482,14 @@ describe('inheritance', () => {
           selector: 'my-comp',
           template: `<p>test</p>`,
         })
-        class MyComponent extends SuperComponent {
-        }
+        class MyComponent extends SuperComponent {}
 
         @Component({
           template: `
           <my-comp>test</my-comp>
-        `
+        `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, MyComponent],
@@ -2600,15 +2521,13 @@ describe('inheritance', () => {
           selector: 'my-comp',
           template: `<p>test</p>`,
         })
-        class MyComponent extends SuperComponent {
-        }
+        class MyComponent extends SuperComponent {}
         @Component({
           template: `
         <my-comp superTitle="test">test</my-comp>
-      `
+      `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, MyComponent],
@@ -2625,8 +2544,7 @@ describe('inheritance', () => {
       let foundQueryList: QueryList<ChildDir>;
 
       @Directive({selector: '[child-dir]'})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       class SuperComponent {
         @ContentChildren(ChildDir) customDirs!: QueryList<ChildDir>;
@@ -2645,10 +2563,9 @@ describe('inheritance', () => {
           <li child-dir>one</li>
           <li child-dir>two</li>
         </my-comp>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, MyComponent, ChildDir],
@@ -2659,7 +2576,6 @@ describe('inheritance', () => {
       expect(foundQueryList!.length).toBe(2);
     });
 
-
     // TODO: sub has Input and super has Output on same property
     // TODO: sub has Input and super has HostBinding on same property
     // TODO: sub has Input and super has ViewChild on same property
@@ -2716,7 +2632,7 @@ describe('inheritance', () => {
         }
       }
 
-      beforeEach(() => fired.length = 0);
+      beforeEach(() => (fired.length = 0));
 
       it('ngOnInit', () => {
         @Component({selector: 'my-comp', template: `<p>test</p>`})
@@ -2752,9 +2668,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngDoCheck', () => {
@@ -2794,9 +2708,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentInit', () => {
@@ -2836,9 +2748,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentChecked', () => {
@@ -2878,9 +2788,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewInit', () => {
@@ -2920,9 +2828,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewChecked', () => {
@@ -2962,9 +2868,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngOnDestroy', () => {
@@ -3004,9 +2908,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'sub destroy',
-        ]);
+        expect(fired).toEqual(['sub destroy']);
       });
     });
 
@@ -3048,8 +2950,9 @@ describe('inheritance', () => {
         const fixture = TestBed.createComponent(App);
         fixture.detectChanges();
 
-        const subDir: MyComponent =
-            fixture.debugElement.query(By.directive(MyComponent)).componentInstance;
+        const subDir: MyComponent = fixture.debugElement.query(
+          By.directive(MyComponent),
+        ).componentInstance;
 
         expect(subDir.foo).toEqual('a');
         expect(subDir.bar).toEqual('b');
@@ -3085,7 +2988,7 @@ describe('inheritance', () => {
         @Component({
           template: `
           <my-comp (foo)="handleFoo($event)"></my-comp>
-        `
+        `,
         })
         class App {
           foo = '';
@@ -3123,16 +3026,14 @@ describe('inheritance', () => {
           selector: 'my-comp',
           template: `<p>test</p>`,
         })
-        class MyComponent extends SuperDirective {
-        }
+        class MyComponent extends SuperDirective {}
 
         @Component({
           template: `
           <my-comp>test</my-comp>
-        `
+        `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, MyComponent, SuperDirective],
@@ -3167,15 +3068,13 @@ describe('inheritance', () => {
           selector: 'my-comp',
           template: `<p>test</p>`,
         })
-        class MyComponent extends SuperDirective {
-        }
+        class MyComponent extends SuperDirective {}
         @Component({
           template: `
         <my-comp superTitle="test">test</my-comp>
-      `
+      `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, MyComponent],
@@ -3192,8 +3091,7 @@ describe('inheritance', () => {
       let foundQueryList: QueryList<ChildDir>;
 
       @Directive({selector: '[child-dir]'})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       @Directive({
         selector: '[super-dir]',
@@ -3215,10 +3113,9 @@ describe('inheritance', () => {
           <li child-dir>one</li>
           <li child-dir>two</li>
         </my-comp>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, MyComponent, SuperDirective, ChildDir],
@@ -3233,8 +3130,7 @@ describe('inheritance', () => {
       let foundQueryList: QueryList<ChildDir>;
 
       @Directive({selector: '[child-dir]'})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       @Directive({
         selector: '[super-dir]',
@@ -3261,10 +3157,9 @@ describe('inheritance', () => {
       @Component({
         template: `
         <my-comp></my-comp>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, MyComponent, ChildDir, SuperDirective],
@@ -3275,7 +3170,6 @@ describe('inheritance', () => {
       expect(foundQueryList!.length).toBe(5);
     });
 
-
     // TODO: sub has Input and super has Output on same property
     // TODO: sub has Input and super has HostBinding on same property
     // TODO: sub has Input and super has ViewChild on same property
@@ -3334,7 +3228,7 @@ describe('inheritance', () => {
 
       class BareClass extends SuperDirective {}
 
-      beforeEach(() => fired.length = 0);
+      beforeEach(() => (fired.length = 0));
 
       it('ngOnInit', () => {
         @Component({selector: 'my-comp', template: `<p>test</p>`})
@@ -3370,9 +3264,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngDoCheck', () => {
@@ -3411,9 +3303,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentInit', () => {
@@ -3453,9 +3343,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentChecked', () => {
@@ -3495,9 +3383,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewInit', () => {
@@ -3537,9 +3423,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewChecked', () => {
@@ -3579,9 +3463,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngOnDestroy', () => {
@@ -3621,9 +3503,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'sub destroy',
-        ]);
+        expect(fired).toEqual(['sub destroy']);
       });
     });
 
@@ -3667,8 +3547,9 @@ describe('inheritance', () => {
         const fixture = TestBed.createComponent(App);
         fixture.detectChanges();
 
-        const subDir: MyComponent =
-            fixture.debugElement.query(By.directive(MyComponent)).componentInstance;
+        const subDir: MyComponent = fixture.debugElement.query(
+          By.directive(MyComponent),
+        ).componentInstance;
 
         expect(subDir.foo).toEqual('a');
         expect(subDir.bar).toEqual('b');
@@ -3706,7 +3587,7 @@ describe('inheritance', () => {
         @Component({
           template: `
           <my-comp (foo)="handleFoo($event)"></my-comp>
-        `
+        `,
         })
         class App {
           foo = '';
@@ -3746,16 +3627,14 @@ describe('inheritance', () => {
           selector: 'my-comp',
           template: `<p>test</p>`,
         })
-        class MyComponent extends BareClass {
-        }
+        class MyComponent extends BareClass {}
 
         @Component({
           template: `
           <my-comp>test</my-comp>
-        `
+        `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, MyComponent],
@@ -3799,15 +3678,13 @@ describe('inheritance', () => {
           selector: 'my-comp',
           template: `<p>test</p>`,
         })
-        class MyComponent extends BareClass {
-        }
+        class MyComponent extends BareClass {}
         @Component({
           template: `
           <my-comp superTitle="test1" superAccessKey="test2">test</my-comp>
-        `
+        `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, SuperDirective, BareClass, MyComponent],
@@ -3825,8 +3702,7 @@ describe('inheritance', () => {
       let foundQueryList: QueryList<ChildDir>;
 
       @Directive({selector: '[child-dir]'})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       @Directive({
         selector: '[super-dir]',
@@ -3853,10 +3729,9 @@ describe('inheritance', () => {
           <li child-dir>one</li>
           <li child-dir>two</li>
         </my-comp>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, MyComponent, ChildDir, SuperDirective],
@@ -3871,8 +3746,7 @@ describe('inheritance', () => {
       let foundQueryList: QueryList<ChildDir>;
 
       @Directive({selector: '[child-dir]'})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       @Directive({
         selector: '[super-dir]',
@@ -3901,10 +3775,9 @@ describe('inheritance', () => {
       @Component({
         template: `
         <my-comp></my-comp>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, MyComponent, ChildDir, SuperDirective],
@@ -3915,7 +3788,6 @@ describe('inheritance', () => {
       expect(foundQueryList!.length).toBe(5);
     });
 
-
     // TODO: sub has Input and super has Output on same property
     // TODO: sub has Input and super has HostBinding on same property
     // TODO: sub has Input and super has ViewChild on same property
@@ -3973,7 +3845,7 @@ describe('inheritance', () => {
         }
       }
 
-      beforeEach(() => fired.length = 0);
+      beforeEach(() => (fired.length = 0));
 
       it('ngOnInit', () => {
         @Component({
@@ -4012,9 +3884,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngDoCheck', () => {
@@ -4054,9 +3924,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentInit', () => {
@@ -4096,9 +3964,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentChecked', () => {
@@ -4138,9 +4004,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewInit', () => {
@@ -4180,9 +4044,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewChecked', () => {
@@ -4222,9 +4084,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngOnDestroy', () => {
@@ -4264,9 +4124,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'sub destroy',
-        ]);
+        expect(fired).toEqual(['sub destroy']);
       });
     });
 
@@ -4309,8 +4167,9 @@ describe('inheritance', () => {
         const fixture = TestBed.createComponent(App);
         fixture.detectChanges();
 
-        const subDir: MyComponent =
-            fixture.debugElement.query(By.directive(MyComponent)).componentInstance;
+        const subDir: MyComponent = fixture.debugElement.query(
+          By.directive(MyComponent),
+        ).componentInstance;
 
         expect(subDir.foo).toEqual('a');
         expect(subDir.bar).toEqual('b');
@@ -4347,7 +4206,7 @@ describe('inheritance', () => {
         @Component({
           template: `
           <my-comp (foo)="handleFoo($event)"></my-comp>
-        `
+        `,
         })
         class App {
           foo = '';
@@ -4376,9 +4235,7 @@ describe('inheritance', () => {
           host: {
             '[@animation]': 'colorExp',
           },
-          animations: [
-            trigger('animation', [state('color', style({color: 'red'}))]),
-          ],
+          animations: [trigger('animation', [state('color', style({color: 'red'}))])],
         })
         class SuperComponent {
           colorExp = 'color';
@@ -4388,14 +4245,12 @@ describe('inheritance', () => {
           selector: 'my-comp',
           template: `<div>my-comp</div>`,
         })
-        class MyComponent extends SuperComponent {
-        }
+        class MyComponent extends SuperComponent {}
 
         @Component({
           template: '<my-comp>app</my-comp>',
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, MyComponent, SuperComponent],
@@ -4417,8 +4272,7 @@ describe('inheritance', () => {
             trigger('animation2', [state('opacity', style({opacity: '0.5'}))]),
           ],
         })
-        class SuperComponent {
-        }
+        class SuperComponent {}
 
         @Component({
           selector: 'my-comp',
@@ -4442,8 +4296,7 @@ describe('inheritance', () => {
         @Component({
           template: '<my-comp>app</my-comp>',
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, MyComponent, SuperComponent],
@@ -4477,16 +4330,14 @@ describe('inheritance', () => {
           selector: 'my-comp',
           template: `<p>test</p>`,
         })
-        class MyComponent extends SuperComponent {
-        }
+        class MyComponent extends SuperComponent {}
 
         @Component({
           template: `
           <my-comp>test</my-comp>
-        `
+        `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, MyComponent, SuperComponent],
@@ -4522,15 +4373,13 @@ describe('inheritance', () => {
           selector: 'my-comp',
           template: `<p>test</p>`,
         })
-        class MyComponent extends SuperComponent {
-        }
+        class MyComponent extends SuperComponent {}
         @Component({
           template: `
         <my-comp superTitle="test">test</my-comp>
-      `
+      `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, MyComponent],
@@ -4547,8 +4396,7 @@ describe('inheritance', () => {
       let foundQueryList: QueryList<ChildDir>;
 
       @Directive({selector: '[child-dir]'})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       @Component({
         selector: 'super-comp',
@@ -4574,10 +4422,9 @@ describe('inheritance', () => {
           <li child-dir>one</li>
           <li child-dir>two</li>
         </my-comp>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, MyComponent, SuperComponent, ChildDir],
@@ -4592,8 +4439,7 @@ describe('inheritance', () => {
       let foundQueryList: QueryList<ChildDir>;
 
       @Directive({selector: '[child-dir]'})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       @Component({
         selector: 'super-comp',
@@ -4621,10 +4467,9 @@ describe('inheritance', () => {
       @Component({
         template: `
         <my-comp></my-comp>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, MyComponent, ChildDir, SuperComponent],
@@ -4658,8 +4503,7 @@ describe('inheritance', () => {
         // component def, which would trigger `hostBindings` functions merge operation in
         // InheritDefinitionFeature logic (merging Child and Base host binding functions)
         @HostListener('focus')
-        focused() {
-        }
+        focused() {}
 
         override clicked() {
           events.push('ChildComponent.clicked');
@@ -4675,8 +4519,7 @@ describe('inheritance', () => {
         // component def, which would trigger `hostBindings` functions merge operation in
         // InheritDefinitionFeature logic (merging GrandChild and Child host binding functions)
         @HostListener('blur')
-        blurred() {
-        }
+        blurred() {}
 
         override clicked() {
           events.push('GrandChildComponent.clicked');
@@ -4691,8 +4534,7 @@ describe('inheritance', () => {
           <app-grand-child></app-grand-child>
         `,
       })
-      class RootApp {
-      }
+      class RootApp {}
 
       const components = [BaseComponent, ChildComponent, GrandChildComponent];
       TestBed.configureTestingModule({
@@ -4701,14 +4543,16 @@ describe('inheritance', () => {
       const fixture = TestBed.createComponent(RootApp);
       fixture.detectChanges();
 
-      components.forEach(component => {
+      components.forEach((component) => {
         fixture.debugElement.query(By.directive(component)).nativeElement.click();
       });
-      expect(events).toEqual(
-          ['BaseComponent.clicked', 'ChildComponent.clicked', 'GrandChildComponent.clicked']);
+      expect(events).toEqual([
+        'BaseComponent.clicked',
+        'ChildComponent.clicked',
+        'GrandChildComponent.clicked',
+      ]);
     });
 
-
     // TODO: sub has Input and super has Output on same property
     // TODO: sub has Input and super has HostBinding on same property
     // TODO: sub has Input and super has ViewChild on same property
@@ -4768,7 +4612,7 @@ describe('inheritance', () => {
 
       class SuperComponent extends SuperSuperComponent {}
 
-      beforeEach(() => fired.length = 0);
+      beforeEach(() => (fired.length = 0));
 
       it('ngOnInit', () => {
         @Component({
@@ -4807,9 +4651,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngDoCheck', () => {
@@ -4849,9 +4691,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentInit', () => {
@@ -4891,9 +4731,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterContentChecked', () => {
@@ -4933,9 +4771,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewInit', () => {
@@ -4975,9 +4811,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngAfterViewChecked', () => {
@@ -5017,9 +4851,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'super destroy',
-        ]);
+        expect(fired).toEqual(['super destroy']);
       });
 
       it('ngOnDestroy', () => {
@@ -5059,9 +4891,7 @@ describe('inheritance', () => {
         fixture.componentInstance.showing = false;
         fixture.detectChanges();
 
-        expect(fired).toEqual([
-          'sub destroy',
-        ]);
+        expect(fired).toEqual(['sub destroy']);
       });
     });
 
@@ -5106,8 +4936,9 @@ describe('inheritance', () => {
         const fixture = TestBed.createComponent(App);
         fixture.detectChanges();
 
-        const myComp: MyComponent =
-            fixture.debugElement.query(By.directive(MyComponent)).componentInstance;
+        const myComp: MyComponent = fixture.debugElement.query(
+          By.directive(MyComponent),
+        ).componentInstance;
 
         expect(myComp.foo).toEqual('a');
         expect(myComp.bar).toEqual('b');
@@ -5149,7 +4980,7 @@ describe('inheritance', () => {
         @Component({
           template: `
           <my-comp (foo)="handleFoo($event)" (bar)="handleBar($event)"></my-comp>
-        `
+        `,
         })
         class App {
           foo = '';
@@ -5200,8 +5031,7 @@ describe('inheritance', () => {
           selector: 'intermediate-comp',
           template: '...',
         })
-        class IntermediateComponent extends SuperComponent {
-        }
+        class IntermediateComponent extends SuperComponent {}
 
         @Component({
           selector: 'my-comp',
@@ -5224,8 +5054,7 @@ describe('inheritance', () => {
         @Component({
           template: '<my-comp>app</my-comp>',
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, MyComponent, IntermediateComponent, SuperComponent],
@@ -5260,16 +5089,14 @@ describe('inheritance', () => {
           selector: 'my-comp',
           template: `<p>test</p>`,
         })
-        class MyComponent extends SuperComponent {
-        }
+        class MyComponent extends SuperComponent {}
 
         @Component({
           template: `
           <my-comp>test</my-comp>
-        `
+        `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, MyComponent, SuperComponent, SuperSuperComponent],
@@ -5314,15 +5141,13 @@ describe('inheritance', () => {
           selector: 'my-comp',
           template: `<p>test</p>`,
         })
-        class MyComponent extends SuperComponent {
-        }
+        class MyComponent extends SuperComponent {}
         @Component({
           template: `
           <my-comp superTitle="test1" superAccessKey="test2">test</my-comp>
-        `
+        `,
         })
-        class App {
-        }
+        class App {}
 
         TestBed.configureTestingModule({
           declarations: [App, MyComponent, SuperComponent, SuperSuperComponent],
@@ -5341,8 +5166,7 @@ describe('inheritance', () => {
       let foundQueryList: QueryList<ChildDir>;
 
       @Directive({selector: '[child-dir]'})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       @Component({
         selector: 'super-comp',
@@ -5368,10 +5192,9 @@ describe('inheritance', () => {
           <li child-dir>one</li>
           <li child-dir>two</li>
         </my-comp>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, MyComponent, SuperComponent, ChildDir],
@@ -5386,8 +5209,7 @@ describe('inheritance', () => {
       let foundQueryList: QueryList<ChildDir>;
 
       @Directive({selector: '[child-dir]'})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       @Component({
         selector: 'super-comp',
@@ -5415,10 +5237,9 @@ describe('inheritance', () => {
       @Component({
         template: `
         <my-comp></my-comp>
-      `
+      `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, MyComponent, ChildDir, SuperComponent],
@@ -5429,7 +5250,6 @@ describe('inheritance', () => {
       expect(foundQueryList!.length).toBe(5);
     });
 
-
     // TODO: sub has Input and super has Output on same property
     // TODO: sub has Input and super has HostBinding on same property
     // TODO: sub has Input and super has ViewChild on same property
diff --git a/packages/core/test/acceptance/injector_profiler_spec.ts b/packages/core/test/acceptance/injector_profiler_spec.ts
index 09395686680c0..ebd183204560a 100644
--- a/packages/core/test/acceptance/injector_profiler_spec.ts
+++ b/packages/core/test/acceptance/injector_profiler_spec.ts
@@ -8,14 +8,48 @@
 
 import {NgForOf, PercentPipe} from '@angular/common';
 import {inject} from '@angular/core';
-import {afterRender, ClassProvider, Component, Directive, ElementRef, Injectable, InjectFlags, InjectionToken, Injector, NgModule, NgModuleRef, QueryList, ViewChild, ViewChildren} from '@angular/core/src/core';
+import {
+  afterRender,
+  ClassProvider,
+  Component,
+  Directive,
+  ElementRef,
+  Injectable,
+  InjectFlags,
+  InjectionToken,
+  Injector,
+  NgModule,
+  NgModuleRef,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core/src/core';
 import {NullInjector} from '@angular/core/src/di/null_injector';
-import {isClassProvider, isExistingProvider, isFactoryProvider, isTypeProvider, isValueProvider} from '@angular/core/src/di/provider_collection';
+import {
+  isClassProvider,
+  isExistingProvider,
+  isFactoryProvider,
+  isTypeProvider,
+  isValueProvider,
+} from '@angular/core/src/di/provider_collection';
 import {EnvironmentInjector, R3Injector} from '@angular/core/src/di/r3_injector';
 import {setupFrameworkInjectorProfiler} from '@angular/core/src/render3/debug/framework_injector_profiler';
-import {getInjectorProfilerContext, InjectedServiceEvent, InjectorCreatedInstanceEvent, InjectorProfilerEvent, InjectorProfilerEventType, ProviderConfiguredEvent, setInjectorProfiler} from '@angular/core/src/render3/debug/injector_profiler';
+import {
+  getInjectorProfilerContext,
+  InjectedServiceEvent,
+  InjectorCreatedInstanceEvent,
+  InjectorProfilerEvent,
+  InjectorProfilerEventType,
+  ProviderConfiguredEvent,
+  setInjectorProfiler,
+} from '@angular/core/src/render3/debug/injector_profiler';
 import {getNodeInjectorLView, NodeInjector} from '@angular/core/src/render3/di';
-import {getDependenciesFromInjectable, getInjectorMetadata, getInjectorProviders, getInjectorResolutionPath} from '@angular/core/src/render3/util/injector_discovery_utils';
+import {
+  getDependenciesFromInjectable,
+  getInjectorMetadata,
+  getInjectorProviders,
+  getInjectorResolutionPath,
+} from '@angular/core/src/render3/util/injector_discovery_utils';
 import {fakeAsync, tick} from '@angular/core/testing';
 import {TestBed} from '@angular/core/testing/src/test_bed';
 import {BrowserModule} from '@angular/platform-browser';
@@ -27,8 +61,10 @@ describe('setProfiler', () => {
   let providerConfiguredEvents: ProviderConfiguredEvent[] = [];
 
   function searchForProfilerEvent<T extends InjectorProfilerEvent>(
-      events: T[], condition: ((event: T) => boolean)): T|undefined {
-    return events.find(event => condition(event)) as T;
+    events: T[],
+    condition: (event: T) => boolean,
+  ): T | undefined {
+    return events.find((event) => condition(event)) as T;
   }
 
   beforeEach(() => {
@@ -36,27 +72,30 @@ describe('setProfiler', () => {
     createEvents = [];
     providerConfiguredEvents = [];
 
-    setInjectorProfiler(((injectorProfilerEvent: InjectorProfilerEvent) => {
+    setInjectorProfiler((injectorProfilerEvent: InjectorProfilerEvent) => {
       const {type} = injectorProfilerEvent;
       if (type === InjectorProfilerEventType.Inject) {
-        injectEvents.push(
-            {service: injectorProfilerEvent.service, context: getInjectorProfilerContext(), type});
+        injectEvents.push({
+          service: injectorProfilerEvent.service,
+          context: getInjectorProfilerContext(),
+          type,
+        });
       }
       if (type === InjectorProfilerEventType.InstanceCreatedByInjector) {
         createEvents.push({
           instance: injectorProfilerEvent.instance,
           context: getInjectorProfilerContext(),
-          type
+          type,
         });
       }
       if (type === InjectorProfilerEventType.ProviderConfigured) {
         providerConfiguredEvents.push({
           providerRecord: injectorProfilerEvent.providerRecord,
           context: getInjectorProfilerContext(),
-          type
+          type,
         });
       }
-    }));
+    });
   });
 
   afterAll(() => setInjectorProfiler(null));
@@ -67,9 +106,7 @@ describe('setProfiler', () => {
     @Component({
       selector: 'my-comp',
       template: 'hello world',
-      providers: [
-        MyService,
-      ]
+      providers: [MyService],
     })
     class MyComponent {
       myService = inject(MyService);
@@ -81,12 +118,16 @@ describe('setProfiler', () => {
 
     // MyService should have been configured
     const myServiceProviderConfiguredEvent = searchForProfilerEvent<ProviderConfiguredEvent>(
-        providerConfiguredEvents, (event) => event.providerRecord.token === MyService);
+      providerConfiguredEvents,
+      (event) => event.providerRecord.token === MyService,
+    );
     expect(myServiceProviderConfiguredEvent).toBeTruthy();
 
     // inject(MyService) was called
     const myServiceInjectEvent = searchForProfilerEvent<InjectedServiceEvent>(
-        injectEvents, (event) => event.service.token === MyService);
+      injectEvents,
+      (event) => event.service.token === MyService,
+    );
     expect(myServiceInjectEvent).toBeTruthy();
     expect(myServiceInjectEvent!.service.value).toBe(myComp.myService);
     expect(myServiceInjectEvent!.service.flags).toBe(InjectFlags.Default);
@@ -94,7 +135,9 @@ describe('setProfiler', () => {
     // myComp is an angular instance that is able to call `inject` in it's constructor, so a
     // create event should have been emitted for it
     const componentCreateEvent = searchForProfilerEvent<InjectorCreatedInstanceEvent>(
-        createEvents, (event) => (event.instance.value === myComp));
+      createEvents,
+      (event) => event.instance.value === myComp,
+    );
     expect(componentCreateEvent).toBeTruthy();
   });
 
@@ -106,7 +149,7 @@ describe('setProfiler', () => {
     @Component({
       selector: 'my-comp',
       template: 'hello world',
-      providers: [MyService, {provide: MyServiceB, useValue: 0}]
+      providers: [MyService, {provide: MyServiceB, useValue: 0}],
     })
     class MyComponent {
       myService = inject(MyService, {self: true});
@@ -116,16 +159,22 @@ describe('setProfiler', () => {
 
     TestBed.configureTestingModule({
       providers: [MyServiceB, MyServiceC, {provide: MyServiceB, useValue: 1}],
-      declarations: [MyComponent]
+      declarations: [MyComponent],
     });
     TestBed.createComponent(MyComponent);
 
     const myServiceInjectEvent = searchForProfilerEvent<InjectedServiceEvent>(
-        injectEvents, (event) => event.service.token === MyService);
-    const myServiceBInjectEvent =
-        searchForProfilerEvent(injectEvents, (event) => event.service.token === MyServiceB);
-    const myServiceCInjectEvent =
-        searchForProfilerEvent(injectEvents, (event) => event.service.token === MyServiceC);
+      injectEvents,
+      (event) => event.service.token === MyService,
+    );
+    const myServiceBInjectEvent = searchForProfilerEvent(
+      injectEvents,
+      (event) => event.service.token === MyServiceB,
+    );
+    const myServiceCInjectEvent = searchForProfilerEvent(
+      injectEvents,
+      (event) => event.service.token === MyServiceC,
+    );
 
     expect(myServiceInjectEvent!.service.flags).toBe(InjectFlags.Self);
     expect(myServiceBInjectEvent!.service.flags).toBe(InjectFlags.SkipSelf);
@@ -133,55 +182,63 @@ describe('setProfiler', () => {
     expect(myServiceCInjectEvent!.service.flags).toBe(InjectFlags.Optional);
   });
 
-  it('should emit correct DI events when providers are configured with useFactory, useExisting, useClass, useValue',
-     () => {
-       class MyService {}
-       class MyServiceB {}
-       class MyServiceC {}
-       class MyServiceD {}
-       class MyServiceE {}
-
-       @Component({
-         selector: 'my-comp',
-         template: 'hello world',
-         providers: [
-           MyService,
-           {provide: MyServiceB, useFactory: () => new MyServiceB()},
-           {provide: MyServiceC, useExisting: MyService},
-           {provide: MyServiceD, useValue: 'hello world'},
-           {provide: MyServiceE, useClass: class MyExampleClass {}},
-         ]
-       })
-       class MyComponent {
-         myService = inject(MyService);
-       }
-
-       TestBed.configureTestingModule({declarations: [MyComponent]});
-       TestBed.createComponent(MyComponent);
-
-       // MyService should have been configured
-       const myServiceProviderConfiguredEvent = searchForProfilerEvent<ProviderConfiguredEvent>(
-           providerConfiguredEvents, (event) => event.providerRecord.token === MyService);
-       const myServiceBProviderConfiguredEvent = searchForProfilerEvent<ProviderConfiguredEvent>(
-           providerConfiguredEvents, (event) => event.providerRecord.token === MyServiceB);
-       const myServiceCProviderConfiguredEvent = searchForProfilerEvent<ProviderConfiguredEvent>(
-           providerConfiguredEvents, (event) => event.providerRecord.token === MyServiceC);
-       const myServiceDProviderConfiguredEvent = searchForProfilerEvent<ProviderConfiguredEvent>(
-           providerConfiguredEvents, (event) => event.providerRecord.token === MyServiceD);
-       const myServiceEProviderConfiguredEvent = searchForProfilerEvent<ProviderConfiguredEvent>(
-           providerConfiguredEvents, (event) => event.providerRecord.token === MyServiceE);
-
-       expect(isTypeProvider(myServiceProviderConfiguredEvent!.providerRecord.provider!))
-           .toBeTrue();
-       expect(isFactoryProvider(myServiceBProviderConfiguredEvent!.providerRecord.provider!))
-           .toBeTrue();
-       expect(isExistingProvider(myServiceCProviderConfiguredEvent!.providerRecord.provider!))
-           .toBeTrue();
-       expect(isValueProvider(myServiceDProviderConfiguredEvent!.providerRecord.provider!))
-           .toBeTrue();
-       expect(isClassProvider(myServiceEProviderConfiguredEvent!.providerRecord.provider!))
-           .toBeTrue();
-     });
+  it('should emit correct DI events when providers are configured with useFactory, useExisting, useClass, useValue', () => {
+    class MyService {}
+    class MyServiceB {}
+    class MyServiceC {}
+    class MyServiceD {}
+    class MyServiceE {}
+
+    @Component({
+      selector: 'my-comp',
+      template: 'hello world',
+      providers: [
+        MyService,
+        {provide: MyServiceB, useFactory: () => new MyServiceB()},
+        {provide: MyServiceC, useExisting: MyService},
+        {provide: MyServiceD, useValue: 'hello world'},
+        {provide: MyServiceE, useClass: class MyExampleClass {}},
+      ],
+    })
+    class MyComponent {
+      myService = inject(MyService);
+    }
+
+    TestBed.configureTestingModule({declarations: [MyComponent]});
+    TestBed.createComponent(MyComponent);
+
+    // MyService should have been configured
+    const myServiceProviderConfiguredEvent = searchForProfilerEvent<ProviderConfiguredEvent>(
+      providerConfiguredEvents,
+      (event) => event.providerRecord.token === MyService,
+    );
+    const myServiceBProviderConfiguredEvent = searchForProfilerEvent<ProviderConfiguredEvent>(
+      providerConfiguredEvents,
+      (event) => event.providerRecord.token === MyServiceB,
+    );
+    const myServiceCProviderConfiguredEvent = searchForProfilerEvent<ProviderConfiguredEvent>(
+      providerConfiguredEvents,
+      (event) => event.providerRecord.token === MyServiceC,
+    );
+    const myServiceDProviderConfiguredEvent = searchForProfilerEvent<ProviderConfiguredEvent>(
+      providerConfiguredEvents,
+      (event) => event.providerRecord.token === MyServiceD,
+    );
+    const myServiceEProviderConfiguredEvent = searchForProfilerEvent<ProviderConfiguredEvent>(
+      providerConfiguredEvents,
+      (event) => event.providerRecord.token === MyServiceE,
+    );
+
+    expect(isTypeProvider(myServiceProviderConfiguredEvent!.providerRecord.provider!)).toBeTrue();
+    expect(
+      isFactoryProvider(myServiceBProviderConfiguredEvent!.providerRecord.provider!),
+    ).toBeTrue();
+    expect(
+      isExistingProvider(myServiceCProviderConfiguredEvent!.providerRecord.provider!),
+    ).toBeTrue();
+    expect(isValueProvider(myServiceDProviderConfiguredEvent!.providerRecord.provider!)).toBeTrue();
+    expect(isClassProvider(myServiceEProviderConfiguredEvent!.providerRecord.provider!)).toBeTrue();
+  });
 
   it('should emit correct DI events when providers are configured with multi', () => {
     class MyService {}
@@ -193,7 +250,7 @@ describe('setProfiler', () => {
         {provide: MyService, useClass: MyService, multi: true},
         {provide: MyService, useFactory: () => new MyService(), multi: true},
         {provide: MyService, useValue: 'hello world', multi: true},
-      ]
+      ],
     })
     class MyComponent {
       myService = inject(MyService);
@@ -204,26 +261,31 @@ describe('setProfiler', () => {
 
     // MyService should have been configured
     const myServiceProviderConfiguredEvent = searchForProfilerEvent<ProviderConfiguredEvent>(
-        providerConfiguredEvents, (event) => event.providerRecord.token === MyService);
+      providerConfiguredEvents,
+      (event) => event.providerRecord.token === MyService,
+    );
 
-    expect(((myServiceProviderConfiguredEvent!.providerRecord)?.provider as ClassProvider).multi)
-        .toBeTrue();
+    expect(
+      (myServiceProviderConfiguredEvent!.providerRecord?.provider as ClassProvider).multi,
+    ).toBeTrue();
   });
 
   it('should emit correct DI events when service providers are configured with providedIn', () => {
     @Injectable({providedIn: 'root'})
-    class RootService {
-    }
+    class RootService {}
 
     @Injectable({providedIn: 'platform'})
-    class PlatformService {
-    }
+    class PlatformService {}
 
-    const providedInRootInjectionToken = new InjectionToken(
-        'providedInRootInjectionToken', {providedIn: 'root', factory: () => 'hello world'});
+    const providedInRootInjectionToken = new InjectionToken('providedInRootInjectionToken', {
+      providedIn: 'root',
+      factory: () => 'hello world',
+    });
 
-    const providedInPlatformToken = new InjectionToken(
-        'providedInPlatformToken', {providedIn: 'platform', factory: () => 'hello world'});
+    const providedInPlatformToken = new InjectionToken('providedInPlatformToken', {
+      providedIn: 'platform',
+      factory: () => 'hello world',
+    });
 
     @Component({
       selector: 'my-comp',
@@ -241,136 +303,155 @@ describe('setProfiler', () => {
 
     // MyService should have been configured
     const rootServiceProviderConfiguredEvent = searchForProfilerEvent<ProviderConfiguredEvent>(
-        providerConfiguredEvents, (event) => event.providerRecord.token === RootService);
+      providerConfiguredEvents,
+      (event) => event.providerRecord.token === RootService,
+    );
 
     expect(rootServiceProviderConfiguredEvent).toBeTruthy();
     expect(rootServiceProviderConfiguredEvent!.context).toBeTruthy();
     expect(rootServiceProviderConfiguredEvent!.context!.injector).toBeInstanceOf(R3Injector);
-    expect((rootServiceProviderConfiguredEvent!.context!.injector as R3Injector).scopes.has('root'))
-        .toBeTrue();
+    expect(
+      (rootServiceProviderConfiguredEvent!.context!.injector as R3Injector).scopes.has('root'),
+    ).toBeTrue();
 
     const platformServiceProviderConfiguredEvent = searchForProfilerEvent<ProviderConfiguredEvent>(
-        providerConfiguredEvents, (event) => event.providerRecord.token === PlatformService);
+      providerConfiguredEvents,
+      (event) => event.providerRecord.token === PlatformService,
+    );
     expect(platformServiceProviderConfiguredEvent).toBeTruthy();
     expect(platformServiceProviderConfiguredEvent!.context).toBeTruthy();
     expect(platformServiceProviderConfiguredEvent!.context!.injector).toBeInstanceOf(R3Injector);
-    expect((platformServiceProviderConfiguredEvent!.context!.injector as R3Injector)
-               .scopes.has('platform'))
-        .toBeTrue();
+    expect(
+      (platformServiceProviderConfiguredEvent!.context!.injector as R3Injector).scopes.has(
+        'platform',
+      ),
+    ).toBeTrue();
 
     const providedInRootInjectionTokenProviderConfiguredEvent =
-        searchForProfilerEvent<ProviderConfiguredEvent>(
-            providerConfiguredEvents,
-            (event) => event.providerRecord.token === providedInRootInjectionToken);
+      searchForProfilerEvent<ProviderConfiguredEvent>(
+        providerConfiguredEvents,
+        (event) => event.providerRecord.token === providedInRootInjectionToken,
+      );
     expect(providedInRootInjectionTokenProviderConfiguredEvent).toBeTruthy();
     expect(providedInRootInjectionTokenProviderConfiguredEvent!.context).toBeTruthy();
-    expect(providedInRootInjectionTokenProviderConfiguredEvent!.context!.injector)
-        .toBeInstanceOf(R3Injector);
-    expect((providedInRootInjectionTokenProviderConfiguredEvent!.context!.injector as R3Injector)
-               .scopes.has('root'))
-        .toBeTrue();
-    expect(providedInRootInjectionTokenProviderConfiguredEvent!.providerRecord.token)
-        .toBe(providedInRootInjectionToken);
+    expect(providedInRootInjectionTokenProviderConfiguredEvent!.context!.injector).toBeInstanceOf(
+      R3Injector,
+    );
+    expect(
+      (
+        providedInRootInjectionTokenProviderConfiguredEvent!.context!.injector as R3Injector
+      ).scopes.has('root'),
+    ).toBeTrue();
+    expect(providedInRootInjectionTokenProviderConfiguredEvent!.providerRecord.token).toBe(
+      providedInRootInjectionToken,
+    );
 
     const providedInPlatformTokenProviderConfiguredEvent =
-        searchForProfilerEvent<ProviderConfiguredEvent>(
-            providerConfiguredEvents,
-            (event) => event.providerRecord.token === providedInPlatformToken);
+      searchForProfilerEvent<ProviderConfiguredEvent>(
+        providerConfiguredEvents,
+        (event) => event.providerRecord.token === providedInPlatformToken,
+      );
     expect(providedInPlatformTokenProviderConfiguredEvent).toBeTruthy();
     expect(providedInPlatformTokenProviderConfiguredEvent!.context).toBeTruthy();
-    expect(providedInPlatformTokenProviderConfiguredEvent!.context!.injector)
-        .toBeInstanceOf(R3Injector);
-    expect((providedInPlatformTokenProviderConfiguredEvent!.context!.injector as R3Injector)
-               .scopes.has('platform'))
-        .toBeTrue();
-    expect(providedInPlatformTokenProviderConfiguredEvent!.providerRecord.token)
-        .toBe(providedInPlatformToken);
+    expect(providedInPlatformTokenProviderConfiguredEvent!.context!.injector).toBeInstanceOf(
+      R3Injector,
+    );
+    expect(
+      (providedInPlatformTokenProviderConfiguredEvent!.context!.injector as R3Injector).scopes.has(
+        'platform',
+      ),
+    ).toBeTrue();
+    expect(providedInPlatformTokenProviderConfiguredEvent!.providerRecord.token).toBe(
+      providedInPlatformToken,
+    );
   });
 });
 
 describe('getInjectorMetadata', () => {
   it('should be able to determine injector type and name', fakeAsync(() => {
-       class MyServiceA {}
-       @NgModule({providers: [MyServiceA]})
-       class ModuleA {
-       }
-
-       class MyServiceB {}
-       @NgModule({providers: [MyServiceB]})
-       class ModuleB {
-       }
-
-       @Component({
-         selector: 'lazy-comp',
-         template: `lazy component`,
-         standalone: true,
-         imports: [ModuleB]
-       })
-       class LazyComponent {
-         lazyComponentNodeInjector = inject(Injector);
-         elementRef = inject(ElementRef);
-
-         constructor() {
-           afterRender(() => afterLazyComponentRendered(this));
-         }
-       }
-
-       @Component({
-         standalone: true,
-         imports: [RouterOutlet, ModuleA],
-         template: `<router-outlet/>`,
-       })
-       class MyStandaloneComponent {
-         @ViewChild(RouterOutlet, {read: ElementRef}) routerOutlet: ElementRef|undefined;
-         elementRef = inject(ElementRef);
-       }
-
-       TestBed.configureTestingModule({
-         imports: [RouterModule.forRoot([{
-           path: 'lazy',
-           loadComponent: () => LazyComponent,
-         }])]
-       });
-
-       const root = TestBed.createComponent(MyStandaloneComponent);
-       TestBed.inject(Router).navigateByUrl('/lazy');
-       tick();
-       root.detectChanges();
-
-       function afterLazyComponentRendered(lazyComponent: LazyComponent) {
-         const {lazyComponentNodeInjector} = lazyComponent;
-         const myStandaloneComponent =
-             lazyComponentNodeInjector.get(MyStandaloneComponent, null, {skipSelf: true})!;
-         expect(myStandaloneComponent).toBeInstanceOf(MyStandaloneComponent);
-         expect(myStandaloneComponent.routerOutlet).toBeInstanceOf(ElementRef);
-
-         const injectorPath = getInjectorResolutionPath(lazyComponentNodeInjector);
-         const injectorMetadata = injectorPath.map(injector => getInjectorMetadata(injector));
-
-         expect(injectorMetadata[0]).toBeDefined();
-         expect(injectorMetadata[1]).toBeDefined();
-         expect(injectorMetadata[2]).toBeDefined();
-         expect(injectorMetadata[3]).toBeDefined();
-         expect(injectorMetadata[4]).toBeDefined();
-         expect(injectorMetadata[5]).toBeDefined();
-         expect(injectorMetadata[6]).toBeDefined();
-
-         expect(injectorMetadata[0]!.source).toBe(lazyComponent.elementRef.nativeElement);
-         expect(injectorMetadata[1]!.source)
-             .toBe(myStandaloneComponent.routerOutlet!.nativeElement);
-         expect(injectorMetadata[2]!.source).toBe(myStandaloneComponent.elementRef.nativeElement);
-         expect(injectorMetadata[3]!.source).toBe('Standalone[LazyComponent]');
-         expect(injectorMetadata[4]!.source).toBe('DynamicTestModule');
-         expect(injectorMetadata[5]!.source).toBe('Platform: core');
-
-         expect(injectorMetadata[0]!.type).toBe('element');
-         expect(injectorMetadata[1]!.type).toBe('element');
-         expect(injectorMetadata[2]!.type).toBe('element');
-         expect(injectorMetadata[3]!.type).toBe('environment');
-         expect(injectorMetadata[4]!.type).toBe('environment');
-         expect(injectorMetadata[5]!.type).toBe('environment');
-       }
-     }));
+    class MyServiceA {}
+    @NgModule({providers: [MyServiceA]})
+    class ModuleA {}
+
+    class MyServiceB {}
+    @NgModule({providers: [MyServiceB]})
+    class ModuleB {}
+
+    @Component({
+      selector: 'lazy-comp',
+      template: `lazy component`,
+      standalone: true,
+      imports: [ModuleB],
+    })
+    class LazyComponent {
+      lazyComponentNodeInjector = inject(Injector);
+      elementRef = inject(ElementRef);
+
+      constructor() {
+        afterRender(() => afterLazyComponentRendered(this));
+      }
+    }
+
+    @Component({
+      standalone: true,
+      imports: [RouterOutlet, ModuleA],
+      template: `<router-outlet/>`,
+    })
+    class MyStandaloneComponent {
+      @ViewChild(RouterOutlet, {read: ElementRef}) routerOutlet: ElementRef | undefined;
+      elementRef = inject(ElementRef);
+    }
+
+    TestBed.configureTestingModule({
+      imports: [
+        RouterModule.forRoot([
+          {
+            path: 'lazy',
+            loadComponent: () => LazyComponent,
+          },
+        ]),
+      ],
+    });
+
+    const root = TestBed.createComponent(MyStandaloneComponent);
+    TestBed.inject(Router).navigateByUrl('/lazy');
+    tick();
+    root.detectChanges();
+
+    function afterLazyComponentRendered(lazyComponent: LazyComponent) {
+      const {lazyComponentNodeInjector} = lazyComponent;
+      const myStandaloneComponent = lazyComponentNodeInjector.get(MyStandaloneComponent, null, {
+        skipSelf: true,
+      })!;
+      expect(myStandaloneComponent).toBeInstanceOf(MyStandaloneComponent);
+      expect(myStandaloneComponent.routerOutlet).toBeInstanceOf(ElementRef);
+
+      const injectorPath = getInjectorResolutionPath(lazyComponentNodeInjector);
+      const injectorMetadata = injectorPath.map((injector) => getInjectorMetadata(injector));
+
+      expect(injectorMetadata[0]).toBeDefined();
+      expect(injectorMetadata[1]).toBeDefined();
+      expect(injectorMetadata[2]).toBeDefined();
+      expect(injectorMetadata[3]).toBeDefined();
+      expect(injectorMetadata[4]).toBeDefined();
+      expect(injectorMetadata[5]).toBeDefined();
+      expect(injectorMetadata[6]).toBeDefined();
+
+      expect(injectorMetadata[0]!.source).toBe(lazyComponent.elementRef.nativeElement);
+      expect(injectorMetadata[1]!.source).toBe(myStandaloneComponent.routerOutlet!.nativeElement);
+      expect(injectorMetadata[2]!.source).toBe(myStandaloneComponent.elementRef.nativeElement);
+      expect(injectorMetadata[3]!.source).toBe('Standalone[LazyComponent]');
+      expect(injectorMetadata[4]!.source).toBe('DynamicTestModule');
+      expect(injectorMetadata[5]!.source).toBe('Platform: core');
+
+      expect(injectorMetadata[0]!.type).toBe('element');
+      expect(injectorMetadata[1]!.type).toBe('element');
+      expect(injectorMetadata[2]!.type).toBe('element');
+      expect(injectorMetadata[3]!.type).toBe('environment');
+      expect(injectorMetadata[4]!.type).toBe('environment');
+      expect(injectorMetadata[5]!.type).toBe('environment');
+    }
+  }));
 
   it('should return null for injectors it does not recognize', () => {
     class MockInjector extends Injector {
@@ -402,7 +483,7 @@ describe('getInjectorProviders', () => {
       template: `
       {{b | percent:'4.3-5' }}
     `,
-      providers: [MyService]
+      providers: [MyService],
     })
     class MyComponent {
       b = 1.3495;
@@ -424,7 +505,7 @@ describe('getInjectorProviders', () => {
       template: `
       {{b | percent:'4.3-5' }}
     `,
-      viewProviders: [MyService]
+      viewProviders: [MyService],
     })
     class MyComponent {
       b = 1.3495;
@@ -439,438 +520,427 @@ describe('getInjectorProviders', () => {
     expect(providers[0].isViewProvider).toBe(true);
   });
 
-  it('should be able to determine import paths after module provider flattening in the NgModule bootstrap case',
-     () => {
-       //                ┌─────────┐
-       //                │AppModule│
-       //                └────┬────┘
-       //                     │
-       //                  imports
-       //                     │
-       //                ┌────▼────┐
-       //      ┌─imports─┤ ModuleD ├──imports─┐
-       //      │         └─────────┘          │
-       //      │                        ┌─────▼─────┐
-       //  ┌───▼───┐                    │  ModuleC  │
-       //  │ModuleB│                    │-MyServiceB│
-       //  └───┬───┘                    └───────────┘
-       //      │
-       //   imports
-       //      │
-       // ┌────▼─────┐
-       // │ ModuleA  │
-       // │-MyService│
-       // └──────────┘
-
-       class MyService {}
-       class MyServiceB {}
-
-       @NgModule({providers: [MyService]})
-       class ModuleA {
-       }
-       @NgModule({
-         imports: [ModuleA],
-       })
-       class ModuleB {
-       }
-
-       @NgModule({providers: [MyServiceB]})
-       class ModuleC {
-       }
-
-       @NgModule({
-         imports: [ModuleB, ModuleC],
-       })
-       class ModuleD {
-       }
-
-       @Component({
-         selector: 'my-comp',
-         template: 'hello world',
-       })
-       class MyComponent {
-       }
-
-       @NgModule({
-         imports: [ModuleD, BrowserModule],
-         declarations: [MyComponent],
-       })
-       class AppModule {
-       }
-
-       TestBed.configureTestingModule({imports: [AppModule]});
-       const root = TestBed.createComponent(MyComponent);
-       root.detectChanges();
-
-       const appModuleInjector = root.componentRef.injector.get(EnvironmentInjector);
-       const providers = getInjectorProviders(appModuleInjector);
-
-       const myServiceProvider = providers.find(provider => provider.token === MyService);
-       const myServiceBProvider = providers.find(provider => provider.token === MyServiceB);
-
-       const testModuleType = root.componentRef.injector.get(NgModuleRef).instance.constructor;
-
-       expect(myServiceProvider).toBeTruthy();
-       expect(myServiceBProvider).toBeTruthy();
-
-       expect(myServiceProvider!.importPath).toBeInstanceOf(Array);
-       expect(myServiceProvider!.importPath!.length).toBe(5);
-       expect(myServiceProvider!.importPath![0]).toBe(testModuleType);
-       expect(myServiceProvider!.importPath![1]).toBe(AppModule);
-       expect(myServiceProvider!.importPath![2]).toBe(ModuleD);
-       expect(myServiceProvider!.importPath![3]).toBe(ModuleB);
-       expect(myServiceProvider!.importPath![4]).toBe(ModuleA);
-
-       expect(myServiceBProvider!.importPath).toBeInstanceOf(Array);
-       expect(myServiceBProvider!.importPath!.length).toBe(4);
-       expect(myServiceBProvider!.importPath![0]).toBe(testModuleType);
-       expect(myServiceBProvider!.importPath![1]).toBe(AppModule);
-       expect(myServiceBProvider!.importPath![2]).toBe(ModuleD);
-       expect(myServiceBProvider!.importPath![3]).toBe(ModuleC);
-     });
-
-  it('should be able to determine import paths after module provider flattening in the standalone component case',
-     () => {
-       //            ┌────────────────────imports───────────────────────┐
-       //            │                                                  │
-       //            │ ┌───────imports────────┐                         │
-       //            │ │                      │                         │
-       //            │ │                      │                         │
-       //  ┌─────────┴─┴─────────┐  ┌─────────▼────────────┐ ┌──────────▼───────────┐
-       //  │MyStandaloneComponent│  │MyStandaloneComponentB│ │MyStandaloneComponentC│
-       //  └──────────┬──────────┘  └──────────┬────┬──────┘ └────┬────────┬────────┘
-       //             │                        │    │             │        │
-       //             └──imports─┐     ┌imports┘    └────┐        │        │
-       //                        │     │                 │        │     imports
-       //                       ┌▼─────▼┐             imports     │        │
-       //                  ┌────┤ModuleD├─────┐          │     imports     │
-       //               imports └───────┘     │          │        │    ┌───▼────────┐
-       //                  │                imports   ┌──▼─────┐  │    │ ModuleE    │
-       //               ┌──▼────┐             │       │ModuleF │  │    │-MyServiceC │
-       //               │ModuleB│             │       └────────┘  │    └────────────┘
-       //               └──┬────┘       ┌─────▼─────┐             │
-       //               imports         │ ModuleC   │             │
-       //             ┌────▼─────┐      │-MyServiceB│◄────────────┘
-       //             │ ModuleA  │      └───────────┘
-       //             │-MyService│
-       //             └──────────┘
-
-
-       class MyService {}
-       class MyServiceB {}
-       class MyServiceC {}
-
-       @NgModule({providers: [MyService]})
-       class ModuleA {
-       }
-       @NgModule({
-         imports: [ModuleA],
-       })
-       class ModuleB {
-       }
-
-       @NgModule({providers: [MyServiceB]})
-       class ModuleC {
-       }
-
-       @NgModule({
-         imports: [ModuleB, ModuleC],
-       })
-       class ModuleD {
-       }
-
-       @NgModule({
-         providers: [MyServiceC],
-       })
-       class ModuleE {
-       }
-
-       @NgModule({})
-       class ModuleF {
-       }
-
-
-       @Component({
-         selector: 'my-comp-c',
-         template: 'hello world',
-         imports: [ModuleE, ModuleC],
-         standalone: true
-       })
-       class MyStandaloneComponentC {
-       }
-
-       @Component({
-         selector: 'my-comp-b',
-         template: 'hello world',
-         imports: [ModuleD, ModuleF],
-         standalone: true
-       })
-       class MyStandaloneComponentB {
-       }
-
-       @Component({
-         selector: 'my-comp',
-         template: `
+  it('should be able to determine import paths after module provider flattening in the NgModule bootstrap case', () => {
+    //                ┌─────────┐
+    //                │AppModule│
+    //                └────┬────┘
+    //                     │
+    //                  imports
+    //                     │
+    //                ┌────▼────┐
+    //      ┌─imports─┤ ModuleD ├──imports─┐
+    //      │         └─────────┘          │
+    //      │                        ┌─────▼─────┐
+    //  ┌───▼───┐                    │  ModuleC  │
+    //  │ModuleB│                    │-MyServiceB│
+    //  └───┬───┘                    └───────────┘
+    //      │
+    //   imports
+    //      │
+    // ┌────▼─────┐
+    // │ ModuleA  │
+    // │-MyService│
+    // └──────────┘
+
+    class MyService {}
+    class MyServiceB {}
+
+    @NgModule({providers: [MyService]})
+    class ModuleA {}
+    @NgModule({
+      imports: [ModuleA],
+    })
+    class ModuleB {}
+
+    @NgModule({providers: [MyServiceB]})
+    class ModuleC {}
+
+    @NgModule({
+      imports: [ModuleB, ModuleC],
+    })
+    class ModuleD {}
+
+    @Component({
+      selector: 'my-comp',
+      template: 'hello world',
+    })
+    class MyComponent {}
+
+    @NgModule({
+      imports: [ModuleD, BrowserModule],
+      declarations: [MyComponent],
+    })
+    class AppModule {}
+
+    TestBed.configureTestingModule({imports: [AppModule]});
+    const root = TestBed.createComponent(MyComponent);
+    root.detectChanges();
+
+    const appModuleInjector = root.componentRef.injector.get(EnvironmentInjector);
+    const providers = getInjectorProviders(appModuleInjector);
+
+    const myServiceProvider = providers.find((provider) => provider.token === MyService);
+    const myServiceBProvider = providers.find((provider) => provider.token === MyServiceB);
+
+    const testModuleType = root.componentRef.injector.get(NgModuleRef).instance.constructor;
+
+    expect(myServiceProvider).toBeTruthy();
+    expect(myServiceBProvider).toBeTruthy();
+
+    expect(myServiceProvider!.importPath).toBeInstanceOf(Array);
+    expect(myServiceProvider!.importPath!.length).toBe(5);
+    expect(myServiceProvider!.importPath![0]).toBe(testModuleType);
+    expect(myServiceProvider!.importPath![1]).toBe(AppModule);
+    expect(myServiceProvider!.importPath![2]).toBe(ModuleD);
+    expect(myServiceProvider!.importPath![3]).toBe(ModuleB);
+    expect(myServiceProvider!.importPath![4]).toBe(ModuleA);
+
+    expect(myServiceBProvider!.importPath).toBeInstanceOf(Array);
+    expect(myServiceBProvider!.importPath!.length).toBe(4);
+    expect(myServiceBProvider!.importPath![0]).toBe(testModuleType);
+    expect(myServiceBProvider!.importPath![1]).toBe(AppModule);
+    expect(myServiceBProvider!.importPath![2]).toBe(ModuleD);
+    expect(myServiceBProvider!.importPath![3]).toBe(ModuleC);
+  });
+
+  it('should be able to determine import paths after module provider flattening in the standalone component case', () => {
+    //            ┌────────────────────imports───────────────────────┐
+    //            │                                                  │
+    //            │ ┌───────imports────────┐                         │
+    //            │ │                      │                         │
+    //            │ │                      │                         │
+    //  ┌─────────┴─┴─────────┐  ┌─────────▼────────────┐ ┌──────────▼───────────┐
+    //  │MyStandaloneComponent│  │MyStandaloneComponentB│ │MyStandaloneComponentC│
+    //  └──────────┬──────────┘  └──────────┬────┬──────┘ └────┬────────┬────────┘
+    //             │                        │    │             │        │
+    //             └──imports─┐     ┌imports┘    └────┐        │        │
+    //                        │     │                 │        │     imports
+    //                       ┌▼─────▼┐             imports     │        │
+    //                  ┌────┤ModuleD├─────┐          │     imports     │
+    //               imports └───────┘     │          │        │    ┌───▼────────┐
+    //                  │                imports   ┌──▼─────┐  │    │ ModuleE    │
+    //               ┌──▼────┐             │       │ModuleF │  │    │-MyServiceC │
+    //               │ModuleB│             │       └────────┘  │    └────────────┘
+    //               └──┬────┘       ┌─────▼─────┐             │
+    //               imports         │ ModuleC   │             │
+    //             ┌────▼─────┐      │-MyServiceB│◄────────────┘
+    //             │ ModuleA  │      └───────────┘
+    //             │-MyService│
+    //             └──────────┘
+
+    class MyService {}
+    class MyServiceB {}
+    class MyServiceC {}
+
+    @NgModule({providers: [MyService]})
+    class ModuleA {}
+    @NgModule({
+      imports: [ModuleA],
+    })
+    class ModuleB {}
+
+    @NgModule({providers: [MyServiceB]})
+    class ModuleC {}
+
+    @NgModule({
+      imports: [ModuleB, ModuleC],
+    })
+    class ModuleD {}
+
+    @NgModule({
+      providers: [MyServiceC],
+    })
+    class ModuleE {}
+
+    @NgModule({})
+    class ModuleF {}
+
+    @Component({
+      selector: 'my-comp-c',
+      template: 'hello world',
+      imports: [ModuleE, ModuleC],
+      standalone: true,
+    })
+    class MyStandaloneComponentC {}
+
+    @Component({
+      selector: 'my-comp-b',
+      template: 'hello world',
+      imports: [ModuleD, ModuleF],
+      standalone: true,
+    })
+    class MyStandaloneComponentB {}
+
+    @Component({
+      selector: 'my-comp',
+      template: `
          <my-comp-b/>
          <my-comp-c/>
         `,
-         imports: [ModuleD, MyStandaloneComponentB, MyStandaloneComponentC],
-         standalone: true
-       })
-       class MyStandaloneComponent {
-       }
-
-       const root = TestBed.createComponent(MyStandaloneComponent);
-       root.detectChanges();
-
-       const appComponentEnvironmentInjector = root.componentRef.injector.get(EnvironmentInjector);
-       const providers = getInjectorProviders(appComponentEnvironmentInjector);
-
-       // There are 2 paths from MyStandaloneComponent to MyService
-       //
-       // path 1: MyStandaloneComponent -> ModuleD => ModuleB -> ModuleA
-       // path 2: MyStandaloneComponent -> MyStandaloneComponentB -> ModuleD => ModuleB -> ModuleA
-       //
-       // Angular discovers this provider through the first path it visits
-       // during it's postorder traversal (in this case path 1). Therefore
-       // we expect myServiceProvider.importPath to have 4 DI containers
-       //
-       const myServiceProvider = providers.find(provider => provider.token === MyService);
-       expect(myServiceProvider).toBeTruthy();
-       expect(myServiceProvider!.importPath).toBeInstanceOf(Array);
-       expect(myServiceProvider!.importPath!.length).toBe(4);
-       expect(myServiceProvider!.importPath![0]).toBe(MyStandaloneComponent);
-       expect(myServiceProvider!.importPath![1]).toBe(ModuleD);
-       expect(myServiceProvider!.importPath![2]).toBe(ModuleB);
-       expect(myServiceProvider!.importPath![3]).toBe(ModuleA);
-
-       // Similarly to above there are multiple paths from MyStandaloneComponent MyServiceB
-       //
-       // path 1: MyStandaloneComponent -> ModuleD => ModuleC
-       // path 2: MyStandaloneComponent -> MyStandaloneComponentB -> ModuleD => ModuleC
-       // path 3: MyStandaloneComponent -> MyStandaloneComponentC -> ModuleC
-       //
-       // Angular discovers this provider through the first path it visits
-       // during it's postorder traversal (in this case path 1). Therefore
-       // we expect myServiceProvider.importPath to have 4 DI containers
-       //
-       const myServiceBProvider = providers.find(provider => provider.token === MyServiceB);
-       expect(myServiceBProvider).toBeTruthy();
-       expect(myServiceBProvider!.importPath).toBeInstanceOf(Array);
-       expect(myServiceBProvider!.importPath!.length).toBe(3);
-       expect(myServiceBProvider!.importPath![0]).toBe(MyStandaloneComponent);
-       expect(myServiceBProvider!.importPath![1]).toBe(ModuleD);
-       expect(myServiceBProvider!.importPath![2]).toBe(ModuleC);
-     });
-
-  it('should be able to determine import paths after module provider flattening in the standalone component case with lazy components',
-     fakeAsync(() => {
-       class MyService {}
-
-       @NgModule({providers: [MyService]})
-       class ModuleA {
-       }
-
-       @Component(
-           {selector: 'my-comp-b', template: 'hello world', imports: [ModuleA], standalone: true})
-       class MyStandaloneComponentB {
-         injector = inject(Injector);
-       }
-
-       @Component({
-         selector: 'my-comp',
-         template: `<router-outlet/>`,
-         imports: [MyStandaloneComponentB, RouterOutlet],
-         standalone: true
-       })
-       class MyStandaloneComponent {
-         injector = inject(Injector);
-         @ViewChild(RouterOutlet) routerOutlet: RouterOutlet|undefined;
-       }
-
-       TestBed.configureTestingModule({
-         imports: [RouterModule.forRoot([{
-           path: 'lazy',
-           loadComponent: () => MyStandaloneComponentB,
-         }])]
-       });
-       const root = TestBed.createComponent(MyStandaloneComponent);
-       TestBed.inject(Router).navigateByUrl('/lazy');
-       tick();
-       root.detectChanges();
-
-       const myStandaloneComponentNodeInjector = root.componentRef.injector;
-       const myStandaloneComponentEnvironmentInjector =
-           myStandaloneComponentNodeInjector.get(EnvironmentInjector);
-       const myStandalonecomponentB =
-           root.componentRef.instance!.routerOutlet!.component as MyStandaloneComponentB;
-       const myComponentBNodeInjector = myStandalonecomponentB.injector;
-       const myComponentBEnvironmentInjector = myComponentBNodeInjector.get(EnvironmentInjector);
-       const myStandaloneComponentEnvironmentInjectorProviders =
-           getInjectorProviders(myStandaloneComponentEnvironmentInjector);
-       const myComponentBEnvironmentInjectorProviders =
-           getInjectorProviders(myComponentBEnvironmentInjector);
-
-       // Lazy component should have its own environment injector and therefore different
-       // providers
-       expect(myStandaloneComponentEnvironmentInjectorProviders)
-           .not.toEqual(myComponentBEnvironmentInjectorProviders);
-
-       const myServiceProviderRecord =
-           myComponentBEnvironmentInjectorProviders.find(provider => provider.token === MyService);
-
-       expect(myServiceProviderRecord).toBeTruthy();
-       expect(myServiceProviderRecord!.importPath).toBeInstanceOf(Array);
-       expect(myServiceProviderRecord!.importPath!.length).toBe(2);
-       expect(myServiceProviderRecord!.importPath![0]).toBe(MyStandaloneComponentB);
-       expect(myServiceProviderRecord!.importPath![1]).toBe(ModuleA);
-     }));
+      imports: [ModuleD, MyStandaloneComponentB, MyStandaloneComponentC],
+      standalone: true,
+    })
+    class MyStandaloneComponent {}
+
+    const root = TestBed.createComponent(MyStandaloneComponent);
+    root.detectChanges();
+
+    const appComponentEnvironmentInjector = root.componentRef.injector.get(EnvironmentInjector);
+    const providers = getInjectorProviders(appComponentEnvironmentInjector);
+
+    // There are 2 paths from MyStandaloneComponent to MyService
+    //
+    // path 1: MyStandaloneComponent -> ModuleD => ModuleB -> ModuleA
+    // path 2: MyStandaloneComponent -> MyStandaloneComponentB -> ModuleD => ModuleB -> ModuleA
+    //
+    // Angular discovers this provider through the first path it visits
+    // during it's postorder traversal (in this case path 1). Therefore
+    // we expect myServiceProvider.importPath to have 4 DI containers
+    //
+    const myServiceProvider = providers.find((provider) => provider.token === MyService);
+    expect(myServiceProvider).toBeTruthy();
+    expect(myServiceProvider!.importPath).toBeInstanceOf(Array);
+    expect(myServiceProvider!.importPath!.length).toBe(4);
+    expect(myServiceProvider!.importPath![0]).toBe(MyStandaloneComponent);
+    expect(myServiceProvider!.importPath![1]).toBe(ModuleD);
+    expect(myServiceProvider!.importPath![2]).toBe(ModuleB);
+    expect(myServiceProvider!.importPath![3]).toBe(ModuleA);
+
+    // Similarly to above there are multiple paths from MyStandaloneComponent MyServiceB
+    //
+    // path 1: MyStandaloneComponent -> ModuleD => ModuleC
+    // path 2: MyStandaloneComponent -> MyStandaloneComponentB -> ModuleD => ModuleC
+    // path 3: MyStandaloneComponent -> MyStandaloneComponentC -> ModuleC
+    //
+    // Angular discovers this provider through the first path it visits
+    // during it's postorder traversal (in this case path 1). Therefore
+    // we expect myServiceProvider.importPath to have 4 DI containers
+    //
+    const myServiceBProvider = providers.find((provider) => provider.token === MyServiceB);
+    expect(myServiceBProvider).toBeTruthy();
+    expect(myServiceBProvider!.importPath).toBeInstanceOf(Array);
+    expect(myServiceBProvider!.importPath!.length).toBe(3);
+    expect(myServiceBProvider!.importPath![0]).toBe(MyStandaloneComponent);
+    expect(myServiceBProvider!.importPath![1]).toBe(ModuleD);
+    expect(myServiceBProvider!.importPath![2]).toBe(ModuleC);
+  });
+
+  it('should be able to determine import paths after module provider flattening in the standalone component case with lazy components', fakeAsync(() => {
+    class MyService {}
+
+    @NgModule({providers: [MyService]})
+    class ModuleA {}
+
+    @Component({
+      selector: 'my-comp-b',
+      template: 'hello world',
+      imports: [ModuleA],
+      standalone: true,
+    })
+    class MyStandaloneComponentB {
+      injector = inject(Injector);
+    }
+
+    @Component({
+      selector: 'my-comp',
+      template: `<router-outlet/>`,
+      imports: [MyStandaloneComponentB, RouterOutlet],
+      standalone: true,
+    })
+    class MyStandaloneComponent {
+      injector = inject(Injector);
+      @ViewChild(RouterOutlet) routerOutlet: RouterOutlet | undefined;
+    }
+
+    TestBed.configureTestingModule({
+      imports: [
+        RouterModule.forRoot([
+          {
+            path: 'lazy',
+            loadComponent: () => MyStandaloneComponentB,
+          },
+        ]),
+      ],
+    });
+    const root = TestBed.createComponent(MyStandaloneComponent);
+    TestBed.inject(Router).navigateByUrl('/lazy');
+    tick();
+    root.detectChanges();
+
+    const myStandaloneComponentNodeInjector = root.componentRef.injector;
+    const myStandaloneComponentEnvironmentInjector =
+      myStandaloneComponentNodeInjector.get(EnvironmentInjector);
+    const myStandalonecomponentB = root.componentRef.instance!.routerOutlet!
+      .component as MyStandaloneComponentB;
+    const myComponentBNodeInjector = myStandalonecomponentB.injector;
+    const myComponentBEnvironmentInjector = myComponentBNodeInjector.get(EnvironmentInjector);
+    const myStandaloneComponentEnvironmentInjectorProviders = getInjectorProviders(
+      myStandaloneComponentEnvironmentInjector,
+    );
+    const myComponentBEnvironmentInjectorProviders = getInjectorProviders(
+      myComponentBEnvironmentInjector,
+    );
+
+    // Lazy component should have its own environment injector and therefore different
+    // providers
+    expect(myStandaloneComponentEnvironmentInjectorProviders).not.toEqual(
+      myComponentBEnvironmentInjectorProviders,
+    );
+
+    const myServiceProviderRecord = myComponentBEnvironmentInjectorProviders.find(
+      (provider) => provider.token === MyService,
+    );
+
+    expect(myServiceProviderRecord).toBeTruthy();
+    expect(myServiceProviderRecord!.importPath).toBeInstanceOf(Array);
+    expect(myServiceProviderRecord!.importPath!.length).toBe(2);
+    expect(myServiceProviderRecord!.importPath![0]).toBe(MyStandaloneComponentB);
+    expect(myServiceProviderRecord!.importPath![1]).toBe(ModuleA);
+  }));
 
   it('should be able to determine providers in a lazy route that has providers', fakeAsync(() => {
-       class MyService {}
-
-       @Component({selector: 'my-comp-b', template: 'hello world', standalone: true})
-       class MyStandaloneComponentB {
-         injector = inject(Injector);
-       }
-
-       @Component({
-         selector: 'my-comp',
-         template: `<router-outlet/>`,
-         imports: [MyStandaloneComponentB, RouterOutlet],
-         standalone: true
-       })
-       class MyStandaloneComponent {
-         injector = inject(Injector);
-         @ViewChild(RouterOutlet) routerOutlet: RouterOutlet|undefined;
-       }
-
-       TestBed.configureTestingModule({
-         imports: [RouterModule.forRoot([
-           {
-             path: 'lazy',
-             loadComponent: () => MyStandaloneComponentB,
-             providers: [MyService],
-           },
-         ])]
-       });
-       const root = TestBed.createComponent(MyStandaloneComponent);
-       TestBed.inject(Router).navigateByUrl('/lazy');
-       tick();
-       root.detectChanges();
-
-       const myStandalonecomponentB =
-           root.componentRef.instance!.routerOutlet!.component as MyStandaloneComponentB;
-       const routeEnvironmentInjector =
-           (myStandalonecomponentB.injector.get(EnvironmentInjector) as R3Injector);
-       expect(routeEnvironmentInjector).toBeTruthy();
-       expect(routeEnvironmentInjector.source).toBeTruthy();
-       expect(routeEnvironmentInjector.source!.startsWith('Route:')).toBeTrue();
-
-       const myComponentBEnvironmentInjectorProviders =
-           getInjectorProviders(routeEnvironmentInjector);
-       const myServiceProviderRecord =
-           myComponentBEnvironmentInjectorProviders.find(provider => provider.token === MyService);
-       expect(myServiceProviderRecord).toBeTruthy();
-       expect(myServiceProviderRecord!.provider).toBe(MyService);
-       expect(myServiceProviderRecord!.token).toBe(MyService);
-     }));
-
-  it('should be able to determine providers in an injector that was created manually',
-     fakeAsync(() => {
-       class MyService {}
-       const injector = Injector.create({providers: [MyService]}) as EnvironmentInjector;
-       const providers = getInjectorProviders(injector);
-       expect(providers.length).toBe(1);
-       expect(providers[0].token).toBe(MyService);
-       expect(providers[0].provider).toBe(MyService);
-     }));
-
-  it('should be able to get injector providers for element injectors created by components rendering in an ngFor',
-     () => {
-       class MyService {}
-
-       @Component(
-           {selector: 'item-cmp', template: 'item', standalone: true, providers: [MyService]})
-       class ItemComponent {
-         injector = inject(Injector);
-       }
-
-       @Component({
-         selector: 'my-comp',
-         template: `
+    class MyService {}
+
+    @Component({selector: 'my-comp-b', template: 'hello world', standalone: true})
+    class MyStandaloneComponentB {
+      injector = inject(Injector);
+    }
+
+    @Component({
+      selector: 'my-comp',
+      template: `<router-outlet/>`,
+      imports: [MyStandaloneComponentB, RouterOutlet],
+      standalone: true,
+    })
+    class MyStandaloneComponent {
+      injector = inject(Injector);
+      @ViewChild(RouterOutlet) routerOutlet: RouterOutlet | undefined;
+    }
+
+    TestBed.configureTestingModule({
+      imports: [
+        RouterModule.forRoot([
+          {
+            path: 'lazy',
+            loadComponent: () => MyStandaloneComponentB,
+            providers: [MyService],
+          },
+        ]),
+      ],
+    });
+    const root = TestBed.createComponent(MyStandaloneComponent);
+    TestBed.inject(Router).navigateByUrl('/lazy');
+    tick();
+    root.detectChanges();
+
+    const myStandalonecomponentB = root.componentRef.instance!.routerOutlet!
+      .component as MyStandaloneComponentB;
+    const routeEnvironmentInjector = myStandalonecomponentB.injector.get(
+      EnvironmentInjector,
+    ) as R3Injector;
+    expect(routeEnvironmentInjector).toBeTruthy();
+    expect(routeEnvironmentInjector.source).toBeTruthy();
+    expect(routeEnvironmentInjector.source!.startsWith('Route:')).toBeTrue();
+
+    const myComponentBEnvironmentInjectorProviders = getInjectorProviders(routeEnvironmentInjector);
+    const myServiceProviderRecord = myComponentBEnvironmentInjectorProviders.find(
+      (provider) => provider.token === MyService,
+    );
+    expect(myServiceProviderRecord).toBeTruthy();
+    expect(myServiceProviderRecord!.provider).toBe(MyService);
+    expect(myServiceProviderRecord!.token).toBe(MyService);
+  }));
+
+  it('should be able to determine providers in an injector that was created manually', fakeAsync(() => {
+    class MyService {}
+    const injector = Injector.create({providers: [MyService]}) as EnvironmentInjector;
+    const providers = getInjectorProviders(injector);
+    expect(providers.length).toBe(1);
+    expect(providers[0].token).toBe(MyService);
+    expect(providers[0].provider).toBe(MyService);
+  }));
+
+  it('should be able to get injector providers for element injectors created by components rendering in an ngFor', () => {
+    class MyService {}
+
+    @Component({selector: 'item-cmp', template: 'item', standalone: true, providers: [MyService]})
+    class ItemComponent {
+      injector = inject(Injector);
+    }
+
+    @Component({
+      selector: 'my-comp',
+      template: `
         <item-cmp *ngFor="let item of items"></item-cmp>
        `,
-         imports: [ItemComponent, NgForOf],
-         standalone: true
-       })
-       class MyStandaloneComponent {
-         injector = inject(Injector);
-         items = [1, 2, 3];
-
-         @ViewChildren(ItemComponent) itemComponents: QueryList<ItemComponent>|undefined;
-       }
-
-       const root = TestBed.createComponent(MyStandaloneComponent);
-       root.detectChanges();
-
-       const myStandaloneComponent = root.componentRef.instance;
-       const itemComponents = myStandaloneComponent.itemComponents;
-       expect(itemComponents).toBeInstanceOf(QueryList);
-       expect(itemComponents?.length).toBe(3);
-       itemComponents!.forEach(item => {
-         const itemProviders = getInjectorProviders(item.injector);
-         expect(itemProviders).toBeInstanceOf(Array);
-         expect(itemProviders.length).toBe(1);
-         expect(itemProviders[0].token).toBe(MyService);
-         expect(itemProviders[0].provider).toBe(MyService);
-         expect(itemProviders[0].isViewProvider).toBe(false);
-       });
-     });
-
-  it('should be able to get injector providers for element injectors created by components rendering in a @for',
-     () => {
-       class MyService {}
-
-       @Component(
-           {selector: 'item-cmp', template: 'item', standalone: true, providers: [MyService]})
-       class ItemComponent {
-         injector = inject(Injector);
-       }
-
-       @Component({
-         selector: 'my-comp',
-         template: `
+      imports: [ItemComponent, NgForOf],
+      standalone: true,
+    })
+    class MyStandaloneComponent {
+      injector = inject(Injector);
+      items = [1, 2, 3];
+
+      @ViewChildren(ItemComponent) itemComponents: QueryList<ItemComponent> | undefined;
+    }
+
+    const root = TestBed.createComponent(MyStandaloneComponent);
+    root.detectChanges();
+
+    const myStandaloneComponent = root.componentRef.instance;
+    const itemComponents = myStandaloneComponent.itemComponents;
+    expect(itemComponents).toBeInstanceOf(QueryList);
+    expect(itemComponents?.length).toBe(3);
+    itemComponents!.forEach((item) => {
+      const itemProviders = getInjectorProviders(item.injector);
+      expect(itemProviders).toBeInstanceOf(Array);
+      expect(itemProviders.length).toBe(1);
+      expect(itemProviders[0].token).toBe(MyService);
+      expect(itemProviders[0].provider).toBe(MyService);
+      expect(itemProviders[0].isViewProvider).toBe(false);
+    });
+  });
+
+  it('should be able to get injector providers for element injectors created by components rendering in a @for', () => {
+    class MyService {}
+
+    @Component({selector: 'item-cmp', template: 'item', standalone: true, providers: [MyService]})
+    class ItemComponent {
+      injector = inject(Injector);
+    }
+
+    @Component({
+      selector: 'my-comp',
+      template: `
         @for (item of items; track item) {
           <item-cmp></item-cmp>
         }
        `,
-         imports: [ItemComponent],
-         standalone: true
-       })
-       class MyStandaloneComponent {
-         injector = inject(Injector);
-         items = [1, 2, 3];
-
-         @ViewChildren(ItemComponent) itemComponents: QueryList<ItemComponent>|undefined;
-       }
-
-       const root = TestBed.createComponent(MyStandaloneComponent);
-       root.detectChanges();
-
-       const myStandaloneComponent = root.componentRef.instance;
-       const itemComponents = myStandaloneComponent.itemComponents;
-       expect(itemComponents).toBeInstanceOf(QueryList);
-       expect(itemComponents?.length).toBe(3);
-       itemComponents!.forEach(item => {
-         const itemProviders = getInjectorProviders(item.injector);
-         expect(itemProviders).toBeInstanceOf(Array);
-         expect(itemProviders.length).toBe(1);
-         expect(itemProviders[0].token).toBe(MyService);
-         expect(itemProviders[0].provider).toBe(MyService);
-         expect(itemProviders[0].isViewProvider).toBe(false);
-       });
-     });
+      imports: [ItemComponent],
+      standalone: true,
+    })
+    class MyStandaloneComponent {
+      injector = inject(Injector);
+      items = [1, 2, 3];
+
+      @ViewChildren(ItemComponent) itemComponents: QueryList<ItemComponent> | undefined;
+    }
+
+    const root = TestBed.createComponent(MyStandaloneComponent);
+    root.detectChanges();
+
+    const myStandaloneComponent = root.componentRef.instance;
+    const itemComponents = myStandaloneComponent.itemComponents;
+    expect(itemComponents).toBeInstanceOf(QueryList);
+    expect(itemComponents?.length).toBe(3);
+    itemComponents!.forEach((item) => {
+      const itemProviders = getInjectorProviders(item.injector);
+      expect(itemProviders).toBeInstanceOf(Array);
+      expect(itemProviders.length).toBe(1);
+      expect(itemProviders[0].token).toBe(MyService);
+      expect(itemProviders[0].provider).toBe(MyService);
+      expect(itemProviders[0].isViewProvider).toBe(false);
+    });
+  });
 });
 
 describe('getDependenciesFromInjectable', () => {
@@ -878,280 +948,294 @@ describe('getDependenciesFromInjectable', () => {
   afterAll(() => setInjectorProfiler(null));
 
   it('should be able to determine which injector dependencies come from', fakeAsync(() => {
-       class MyService {}
-       class MyServiceB {}
-       class MyServiceC {}
-       class MyServiceD {}
-       class MyServiceG {}
-       class MyServiceH {}
-
-       const myInjectionToken = new InjectionToken('myInjectionToken');
-       const myServiceCInstance = new MyServiceC();
-
-       @NgModule({
-         providers: [
-           MyService, {provide: MyServiceB, useValue: 'hello world'},
-           {provide: MyServiceC, useFactory: () => 123},
-           {provide: myInjectionToken, useValue: myServiceCInstance}
-         ]
-       })
-       class ModuleA {
-       }
-
-       @Directive({
-         selector: '[my-directive]',
-         standalone: true,
-       })
-       class MyStandaloneDirective {
-         serviceFromHost = inject(MyServiceH, {host: true, optional: true});
-         injector = inject(Injector);
-
-         ngOnInit() {
-           onMyStandaloneDirectiveCreated(this);
-         }
-       }
-
-       @Component({
-         selector: 'my-comp-c',
-         template: 'hello world',
-         imports: [],
-         standalone: true,
-       })
-       class MyStandaloneComponentC {
-       }
-
-       @Component({
-         selector: 'my-comp-b',
-         template: '<my-comp-c my-directive/>',
-         imports: [MyStandaloneComponentC, MyStandaloneDirective],
-         standalone: true
-       })
-       class MyStandaloneComponentB {
-         myService = inject(MyService, {optional: true});
-         myServiceB = inject(MyServiceB, {optional: true});
-         myServiceC = inject(MyServiceC, {skipSelf: true, optional: true});
-         myInjectionTokenValue = inject(myInjectionToken, {optional: true});
-         injector = inject(Injector, {self: true, host: true});
-         myServiceD = inject(MyServiceD);
-         myServiceG = inject(MyServiceG);
-         parentComponent = inject(MyStandaloneComponent);
-       }
-
-       @Component({
-         selector: 'my-comp',
-         template: `<router-outlet/>`,
-         imports: [RouterOutlet, ModuleA],
-         providers: [MyServiceG, {provide: MyServiceH, useValue: 'MyStandaloneComponent'}],
-         standalone: true
-       })
-       class MyStandaloneComponent {
-         injector = inject(Injector);
-         @ViewChild(RouterOutlet) routerOutlet: RouterOutlet|undefined;
-       }
-
-       TestBed.configureTestingModule({
-         providers: [{provide: MyServiceD, useValue: '123'}],
-         imports:
-             [RouterModule.forRoot([{path: 'lazy', loadComponent: () => MyStandaloneComponentB}])]
-       });
-
-       const root = TestBed.createComponent(MyStandaloneComponent);
-       TestBed.inject(Router).navigateByUrl('/lazy');
-       tick();
-       root.detectChanges();
-
-       const myStandalonecomponentB =
-           root.componentRef.instance!.routerOutlet!.component as MyStandaloneComponentB;
-
-       const {dependencies: dependenciesOfMyStandaloneComponentB} =
-           getDependenciesFromInjectable(myStandalonecomponentB.injector, MyStandaloneComponentB)!;
-       const standaloneInjector =
-           root.componentInstance.injector.get(EnvironmentInjector) as EnvironmentInjector;
-
-       expect(dependenciesOfMyStandaloneComponentB).toBeInstanceOf(Array);
-       expect(dependenciesOfMyStandaloneComponentB.length).toBe(8);
-
-       const myServiceDep = dependenciesOfMyStandaloneComponentB[0];
-       const myServiceBDep = dependenciesOfMyStandaloneComponentB[1];
-       const myServiceCDep = dependenciesOfMyStandaloneComponentB[2];
-       const myInjectionTokenValueDep = dependenciesOfMyStandaloneComponentB[3];
-       const injectorDep = dependenciesOfMyStandaloneComponentB[4];
-       const myServiceDDep = dependenciesOfMyStandaloneComponentB[5];
-       const myServiceGDep = dependenciesOfMyStandaloneComponentB[6];
-       const parentComponentDep = dependenciesOfMyStandaloneComponentB[7];
-
-       expect(myServiceDep.token).toBe(MyService);
-       expect(myServiceBDep.token).toBe(MyServiceB);
-       expect(myServiceCDep.token).toBe(MyServiceC);
-       expect(myInjectionTokenValueDep.token).toBe(myInjectionToken);
-       expect(injectorDep.token).toBe(Injector);
-       expect(myServiceDDep.token).toBe(MyServiceD);
-       expect(myServiceGDep.token).toBe(MyServiceG);
-       expect(parentComponentDep.token).toBe(MyStandaloneComponent);
-
-       expect(dependenciesOfMyStandaloneComponentB[0].flags).toEqual({
-         optional: true,
-         skipSelf: false,
-         self: false,
-         host: false,
-       });
-       expect(myServiceBDep.flags).toEqual({
-         optional: true,
-         skipSelf: false,
-         self: false,
-         host: false,
-       });
-       expect(myServiceCDep.flags).toEqual({
-         optional: true,
-         skipSelf: true,
-         self: false,
-         host: false,
-       });
-       expect(myInjectionTokenValueDep.flags).toEqual({
-         optional: true,
-         skipSelf: false,
-         self: false,
-         host: false,
-       });
-       expect(injectorDep.flags).toEqual({
-         optional: false,
-         skipSelf: false,
-         self: true,
-         host: true,
-       });
-       expect(myServiceDDep.flags).toEqual({
-         optional: false,
-         skipSelf: false,
-         self: false,
-         host: false,
-       });
-       expect(myServiceGDep.flags).toEqual({
-         optional: false,
-         skipSelf: false,
-         self: false,
-         host: false,
-       });
-       expect(parentComponentDep.flags).toEqual({
-         optional: false,
-         skipSelf: false,
-         self: false,
-         host: false,
-       });
-
-
-       expect(dependenciesOfMyStandaloneComponentB[0].value).toBe(myStandalonecomponentB.myService);
-       expect(myServiceBDep.value).toBe(null);
-       expect(myServiceCDep.value).toBe(null);
-       expect(myInjectionTokenValueDep.value).toBe(null);
-       expect(injectorDep.value).toBe(myStandalonecomponentB.injector);
-       expect(myServiceDDep.value).toBe('123');
-       expect(myServiceGDep.value).toBe(myStandalonecomponentB.myServiceG);
-       expect(parentComponentDep.value).toBe(myStandalonecomponentB.parentComponent);
-
-       expect(dependenciesOfMyStandaloneComponentB[0].providedIn).toBe(undefined);
-       expect(myServiceBDep.providedIn).toBe(undefined);
-       expect(myServiceCDep.providedIn).toBe(undefined);
-       expect(myInjectionTokenValueDep.providedIn).toBe(undefined);
-       expect(injectorDep.providedIn).toBe(myStandalonecomponentB.injector);
-       expect(myServiceDDep.providedIn).toBe(standaloneInjector.get(Injector, null, {
-         skipSelf: true
-       }) as Injector);
-       expect(getNodeInjectorLView(myServiceGDep.providedIn as NodeInjector))
-           .toBe(getNodeInjectorLView(
-               myStandalonecomponentB.parentComponent.injector as NodeInjector));
-
-       function onMyStandaloneDirectiveCreated(myStandaloneDirective: MyStandaloneDirective) {
-         const injector = myStandaloneDirective.injector;
-         const deps = getDependenciesFromInjectable(injector, MyStandaloneDirective);
-         expect(deps).not.toBeNull();
-         expect(deps!.dependencies.length).toBe(2);  // MyServiceH, Injector
-         expect(deps!.dependencies[0].token).toBe(MyServiceH);
-         expect(deps!.dependencies[0].flags)
-             .toEqual({optional: true, host: true, self: false, skipSelf: false});
-         // The NodeInjector that provides MyService is not in the host path of this injector.
-         expect(deps!.dependencies[0].providedIn).toBeUndefined();
-       }
-     }));
-
-  it('should be able to recursively determine dependencies of dependencies by using the providedIn field',
-     fakeAsync(() => {
-       @Injectable()
-       class MyService {
-         myServiceB = inject(MyServiceB);
-       }
-
-       @Injectable()
-       class MyServiceB {
-         router = inject(Router);
-       }
-
-       @NgModule({providers: [MyService]})
-       class ModuleA {
-       }
-
-       @NgModule({imports: [ModuleA]})
-       class ModuleB {
-       }
-
-       @NgModule({providers: [MyServiceB]})
-       class ModuleC {
-       }
-
-       @NgModule({imports: [ModuleB, ModuleC]})
-       class ModuleD {
-       }
-
-       @Component(
-           {selector: 'my-comp', template: 'hello world', imports: [ModuleD], standalone: true})
-       class MyStandaloneComponent {
-         myService = inject(MyService);
-       }
-
-       TestBed.configureTestingModule({imports: [RouterModule]});
-       const root = TestBed.createComponent(MyStandaloneComponent);
-
-       const {instance, dependencies} = getDependenciesFromInjectable(
-           root.componentRef.injector, root.componentRef.componentType)!;
-       const standaloneInjector = root.componentRef.injector.get(EnvironmentInjector);
-
-       expect(instance).toBeInstanceOf(MyStandaloneComponent);
-       expect(dependencies).toBeInstanceOf(Array);
-       expect(dependencies.length).toBe(1);
-
-       const myServiceDependency = dependencies[0];
-
-       expect(myServiceDependency.token).toBe(MyService);
-       expect(myServiceDependency.value).toBe((instance as MyStandaloneComponent).myService);
-       expect(myServiceDependency.flags)
-           .toEqual({optional: false, skipSelf: false, self: false, host: false});
-       expect(myServiceDependency.providedIn).toBe(standaloneInjector);
-
-       const {instance: myServiceInstance, dependencies: myServiceDependencies} =
-           getDependenciesFromInjectable(
-               myServiceDependency.providedIn!, myServiceDependency.token!)!;
-       expect(myServiceDependencies).toBeInstanceOf(Array);
-       expect(myServiceDependencies.length).toBe(1);
-       const myServiceBDependency = myServiceDependencies[0];
-
-       expect(myServiceBDependency.token).toBe(MyServiceB);
-       expect(myServiceBDependency.value).toBe((myServiceInstance as MyService).myServiceB);
-       expect(myServiceBDependency.flags)
-           .toEqual({optional: false, skipSelf: false, self: false, host: false});
-       expect(myServiceBDependency.providedIn).toBe(standaloneInjector);
-
-       const {instance: myServiceBInstance, dependencies: myServiceBDependencies} =
-           getDependenciesFromInjectable(
-               myServiceBDependency.providedIn!, myServiceBDependency.token!)!;
-       expect(myServiceBDependencies).toBeInstanceOf(Array);
-       expect(myServiceBDependencies.length).toBe(1);
-       const routerDependency = myServiceBDependencies[0];
-
-       expect(routerDependency.token).toBe(Router);
-       expect(routerDependency.value).toBe((myServiceBInstance as MyServiceB).router);
-       expect(routerDependency.flags)
-           .toEqual({optional: false, skipSelf: false, self: false, host: false});
-       expect(routerDependency.providedIn).toBe((standaloneInjector as R3Injector).parent);
-     }));
+    class MyService {}
+    class MyServiceB {}
+    class MyServiceC {}
+    class MyServiceD {}
+    class MyServiceG {}
+    class MyServiceH {}
+
+    const myInjectionToken = new InjectionToken('myInjectionToken');
+    const myServiceCInstance = new MyServiceC();
+
+    @NgModule({
+      providers: [
+        MyService,
+        {provide: MyServiceB, useValue: 'hello world'},
+        {provide: MyServiceC, useFactory: () => 123},
+        {provide: myInjectionToken, useValue: myServiceCInstance},
+      ],
+    })
+    class ModuleA {}
+
+    @Directive({
+      selector: '[my-directive]',
+      standalone: true,
+    })
+    class MyStandaloneDirective {
+      serviceFromHost = inject(MyServiceH, {host: true, optional: true});
+      injector = inject(Injector);
+
+      ngOnInit() {
+        onMyStandaloneDirectiveCreated(this);
+      }
+    }
+
+    @Component({
+      selector: 'my-comp-c',
+      template: 'hello world',
+      imports: [],
+      standalone: true,
+    })
+    class MyStandaloneComponentC {}
+
+    @Component({
+      selector: 'my-comp-b',
+      template: '<my-comp-c my-directive/>',
+      imports: [MyStandaloneComponentC, MyStandaloneDirective],
+      standalone: true,
+    })
+    class MyStandaloneComponentB {
+      myService = inject(MyService, {optional: true});
+      myServiceB = inject(MyServiceB, {optional: true});
+      myServiceC = inject(MyServiceC, {skipSelf: true, optional: true});
+      myInjectionTokenValue = inject(myInjectionToken, {optional: true});
+      injector = inject(Injector, {self: true, host: true});
+      myServiceD = inject(MyServiceD);
+      myServiceG = inject(MyServiceG);
+      parentComponent = inject(MyStandaloneComponent);
+    }
+
+    @Component({
+      selector: 'my-comp',
+      template: `<router-outlet/>`,
+      imports: [RouterOutlet, ModuleA],
+      providers: [MyServiceG, {provide: MyServiceH, useValue: 'MyStandaloneComponent'}],
+      standalone: true,
+    })
+    class MyStandaloneComponent {
+      injector = inject(Injector);
+      @ViewChild(RouterOutlet) routerOutlet: RouterOutlet | undefined;
+    }
+
+    TestBed.configureTestingModule({
+      providers: [{provide: MyServiceD, useValue: '123'}],
+      imports: [
+        RouterModule.forRoot([{path: 'lazy', loadComponent: () => MyStandaloneComponentB}]),
+      ],
+    });
+
+    const root = TestBed.createComponent(MyStandaloneComponent);
+    TestBed.inject(Router).navigateByUrl('/lazy');
+    tick();
+    root.detectChanges();
+
+    const myStandalonecomponentB = root.componentRef.instance!.routerOutlet!
+      .component as MyStandaloneComponentB;
+
+    const {dependencies: dependenciesOfMyStandaloneComponentB} = getDependenciesFromInjectable(
+      myStandalonecomponentB.injector,
+      MyStandaloneComponentB,
+    )!;
+    const standaloneInjector = root.componentInstance.injector.get(
+      EnvironmentInjector,
+    ) as EnvironmentInjector;
+
+    expect(dependenciesOfMyStandaloneComponentB).toBeInstanceOf(Array);
+    expect(dependenciesOfMyStandaloneComponentB.length).toBe(8);
+
+    const myServiceDep = dependenciesOfMyStandaloneComponentB[0];
+    const myServiceBDep = dependenciesOfMyStandaloneComponentB[1];
+    const myServiceCDep = dependenciesOfMyStandaloneComponentB[2];
+    const myInjectionTokenValueDep = dependenciesOfMyStandaloneComponentB[3];
+    const injectorDep = dependenciesOfMyStandaloneComponentB[4];
+    const myServiceDDep = dependenciesOfMyStandaloneComponentB[5];
+    const myServiceGDep = dependenciesOfMyStandaloneComponentB[6];
+    const parentComponentDep = dependenciesOfMyStandaloneComponentB[7];
+
+    expect(myServiceDep.token).toBe(MyService);
+    expect(myServiceBDep.token).toBe(MyServiceB);
+    expect(myServiceCDep.token).toBe(MyServiceC);
+    expect(myInjectionTokenValueDep.token).toBe(myInjectionToken);
+    expect(injectorDep.token).toBe(Injector);
+    expect(myServiceDDep.token).toBe(MyServiceD);
+    expect(myServiceGDep.token).toBe(MyServiceG);
+    expect(parentComponentDep.token).toBe(MyStandaloneComponent);
+
+    expect(dependenciesOfMyStandaloneComponentB[0].flags).toEqual({
+      optional: true,
+      skipSelf: false,
+      self: false,
+      host: false,
+    });
+    expect(myServiceBDep.flags).toEqual({
+      optional: true,
+      skipSelf: false,
+      self: false,
+      host: false,
+    });
+    expect(myServiceCDep.flags).toEqual({
+      optional: true,
+      skipSelf: true,
+      self: false,
+      host: false,
+    });
+    expect(myInjectionTokenValueDep.flags).toEqual({
+      optional: true,
+      skipSelf: false,
+      self: false,
+      host: false,
+    });
+    expect(injectorDep.flags).toEqual({
+      optional: false,
+      skipSelf: false,
+      self: true,
+      host: true,
+    });
+    expect(myServiceDDep.flags).toEqual({
+      optional: false,
+      skipSelf: false,
+      self: false,
+      host: false,
+    });
+    expect(myServiceGDep.flags).toEqual({
+      optional: false,
+      skipSelf: false,
+      self: false,
+      host: false,
+    });
+    expect(parentComponentDep.flags).toEqual({
+      optional: false,
+      skipSelf: false,
+      self: false,
+      host: false,
+    });
+
+    expect(dependenciesOfMyStandaloneComponentB[0].value).toBe(myStandalonecomponentB.myService);
+    expect(myServiceBDep.value).toBe(null);
+    expect(myServiceCDep.value).toBe(null);
+    expect(myInjectionTokenValueDep.value).toBe(null);
+    expect(injectorDep.value).toBe(myStandalonecomponentB.injector);
+    expect(myServiceDDep.value).toBe('123');
+    expect(myServiceGDep.value).toBe(myStandalonecomponentB.myServiceG);
+    expect(parentComponentDep.value).toBe(myStandalonecomponentB.parentComponent);
+
+    expect(dependenciesOfMyStandaloneComponentB[0].providedIn).toBe(undefined);
+    expect(myServiceBDep.providedIn).toBe(undefined);
+    expect(myServiceCDep.providedIn).toBe(undefined);
+    expect(myInjectionTokenValueDep.providedIn).toBe(undefined);
+    expect(injectorDep.providedIn).toBe(myStandalonecomponentB.injector);
+    expect(myServiceDDep.providedIn).toBe(
+      standaloneInjector.get(Injector, null, {
+        skipSelf: true,
+      }) as Injector,
+    );
+    expect(getNodeInjectorLView(myServiceGDep.providedIn as NodeInjector)).toBe(
+      getNodeInjectorLView(myStandalonecomponentB.parentComponent.injector as NodeInjector),
+    );
+
+    function onMyStandaloneDirectiveCreated(myStandaloneDirective: MyStandaloneDirective) {
+      const injector = myStandaloneDirective.injector;
+      const deps = getDependenciesFromInjectable(injector, MyStandaloneDirective);
+      expect(deps).not.toBeNull();
+      expect(deps!.dependencies.length).toBe(2); // MyServiceH, Injector
+      expect(deps!.dependencies[0].token).toBe(MyServiceH);
+      expect(deps!.dependencies[0].flags).toEqual({
+        optional: true,
+        host: true,
+        self: false,
+        skipSelf: false,
+      });
+      // The NodeInjector that provides MyService is not in the host path of this injector.
+      expect(deps!.dependencies[0].providedIn).toBeUndefined();
+    }
+  }));
+
+  it('should be able to recursively determine dependencies of dependencies by using the providedIn field', fakeAsync(() => {
+    @Injectable()
+    class MyService {
+      myServiceB = inject(MyServiceB);
+    }
+
+    @Injectable()
+    class MyServiceB {
+      router = inject(Router);
+    }
+
+    @NgModule({providers: [MyService]})
+    class ModuleA {}
+
+    @NgModule({imports: [ModuleA]})
+    class ModuleB {}
+
+    @NgModule({providers: [MyServiceB]})
+    class ModuleC {}
+
+    @NgModule({imports: [ModuleB, ModuleC]})
+    class ModuleD {}
+
+    @Component({selector: 'my-comp', template: 'hello world', imports: [ModuleD], standalone: true})
+    class MyStandaloneComponent {
+      myService = inject(MyService);
+    }
+
+    TestBed.configureTestingModule({imports: [RouterModule]});
+    const root = TestBed.createComponent(MyStandaloneComponent);
+
+    const {instance, dependencies} = getDependenciesFromInjectable(
+      root.componentRef.injector,
+      root.componentRef.componentType,
+    )!;
+    const standaloneInjector = root.componentRef.injector.get(EnvironmentInjector);
+
+    expect(instance).toBeInstanceOf(MyStandaloneComponent);
+    expect(dependencies).toBeInstanceOf(Array);
+    expect(dependencies.length).toBe(1);
+
+    const myServiceDependency = dependencies[0];
+
+    expect(myServiceDependency.token).toBe(MyService);
+    expect(myServiceDependency.value).toBe((instance as MyStandaloneComponent).myService);
+    expect(myServiceDependency.flags).toEqual({
+      optional: false,
+      skipSelf: false,
+      self: false,
+      host: false,
+    });
+    expect(myServiceDependency.providedIn).toBe(standaloneInjector);
+
+    const {instance: myServiceInstance, dependencies: myServiceDependencies} =
+      getDependenciesFromInjectable(myServiceDependency.providedIn!, myServiceDependency.token!)!;
+    expect(myServiceDependencies).toBeInstanceOf(Array);
+    expect(myServiceDependencies.length).toBe(1);
+    const myServiceBDependency = myServiceDependencies[0];
+
+    expect(myServiceBDependency.token).toBe(MyServiceB);
+    expect(myServiceBDependency.value).toBe((myServiceInstance as MyService).myServiceB);
+    expect(myServiceBDependency.flags).toEqual({
+      optional: false,
+      skipSelf: false,
+      self: false,
+      host: false,
+    });
+    expect(myServiceBDependency.providedIn).toBe(standaloneInjector);
+
+    const {instance: myServiceBInstance, dependencies: myServiceBDependencies} =
+      getDependenciesFromInjectable(myServiceBDependency.providedIn!, myServiceBDependency.token!)!;
+    expect(myServiceBDependencies).toBeInstanceOf(Array);
+    expect(myServiceBDependencies.length).toBe(1);
+    const routerDependency = myServiceBDependencies[0];
+
+    expect(routerDependency.token).toBe(Router);
+    expect(routerDependency.value).toBe((myServiceBInstance as MyServiceB).router);
+    expect(routerDependency.flags).toEqual({
+      optional: false,
+      skipSelf: false,
+      self: false,
+      host: false,
+    });
+    expect(routerDependency.providedIn).toBe((standaloneInjector as R3Injector).parent);
+  }));
 });
 
 describe('getInjectorResolutionPath', () => {
@@ -1159,139 +1243,142 @@ describe('getInjectorResolutionPath', () => {
   afterAll(() => setInjectorProfiler(null));
 
   it('should be able to inspect injector hierarchy structure', fakeAsync(() => {
-       class MyServiceA {}
-       @NgModule({providers: [MyServiceA]})
-       class ModuleA {
-       }
-
-       class MyServiceB {}
-       @NgModule({providers: [MyServiceB]})
-       class ModuleB {
-       }
-
-       @Component({
-         selector: 'lazy-comp',
-         template: `lazy component`,
-         standalone: true,
-         imports: [ModuleB],
-       })
-       class LazyComponent {
-         constructor() {
-           onLazyComponentCreated();
-         }
-       }
-
-       @Component({
-         standalone: true,
-         imports: [RouterOutlet, ModuleA],
-         template: `<router-outlet/>`,
-       })
-       class MyStandaloneComponent {
-         nodeInjector = inject(Injector);
-         envInjector = inject(EnvironmentInjector);
-       }
-
-       TestBed.configureTestingModule({
-         imports: [RouterModule.forRoot([{
-           path: 'lazy',
-           loadComponent: () => LazyComponent,
-         }])]
-       });
-       const root = TestBed.createComponent(MyStandaloneComponent);
-       TestBed.inject(Router).navigateByUrl('/lazy');
-       tick();
-       root.detectChanges();
-
-       function onLazyComponentCreated() {
-         const lazyComponentNodeInjector = inject(Injector);
-         const lazyComponentEnvironmentInjector = inject(EnvironmentInjector);
-
-         const routerOutletNodeInjector = inject(Injector, {skipSelf: true}) as NodeInjector;
-
-         const myStandaloneComponent = inject(MyStandaloneComponent);
-         const myStandaloneComponentNodeInjector =
-             myStandaloneComponent.nodeInjector as NodeInjector;
-
-         const path = getInjectorResolutionPath(lazyComponentNodeInjector);
-
-         /**
-          *
-          * Here is a diagram of the injectors in our application:
-          *
-          *
-          *
-          *                                ┌────────────┐
-          *                                │NullInjector│
-          *                                └─────▲──────┘
-          *                                      │
-          *                         ┌────────────┴────────────────┐
-          *                         │EnvironmentInjector(Platform)│
-          *                         └────────────▲────────────────┘
-          *                                      │
-          *                         ┌────────────┴────────────┐
-          *                         │EnvironmentInjector(Root)│
-          *                         └───────────────▲─────────┘
-          *                                         │
-          *                                         │
-          *                                         │
-          *┌────────────────────────────────────┐  ┌─┴────────────────────────────────────────┐
-          *│ NodeInjector(MyStandaloneComponent)├─►| EnvironmentInjector(MyStandaloneComponent│
-          *└────────────────▲───────────────────┘  └────────────▲─────────────────────────────┘
-          *                 │                                   │
-          *                 │                                   │
-          *                 │                                   │
-          *    ┌────────────┴─────────────┐                     │
-          *    │NodeInjector(RouterOutlet)├──────────┐          │
-          *    └────────────▲─────────────┘          │          │
-          *                 │                        │          │
-          *                 │                        │          │
-          *                 │                        │          │
-          *                 │                        │          │
-          *   ┌─────────────┴──────────────┐  ┌──────▼──────────┴────────────────┐
-          *   │ NodeInjector(LazyComponent)├──►EnvironmentInjector(LazyComponent)│
-          *   └────────────────────────────┘  └──────────────────────────────────┘
-          *
-          *
-          *
-          *
-          *
-          * The Resolution path if we start at NodeInjector(LazyComponent) should be
-          * [
-          *    NodeInjector[LazyComponent],
-          *    NodeInjector[RouterOutlet],
-          *    NodeInjector[MyStandaloneComponent],
-          *    R3Injector[LazyComponent],
-          *    R3Injector[Root],
-          *    R3Injector[Platform],
-          *    NullInjector
-          * ]
-          */
-         expect(path.length).toBe(7);
-
-         expect(path[0]).toBe(lazyComponentNodeInjector);
-
-         expect(path[1]).toBeInstanceOf(NodeInjector);
-         expect(getNodeInjectorLView(path[1] as NodeInjector))
-             .toBe(getNodeInjectorLView(routerOutletNodeInjector));
-
-         expect(path[2]).toBeInstanceOf(NodeInjector);
-         expect(getNodeInjectorLView(path[2] as NodeInjector))
-             .toBe(getNodeInjectorLView(myStandaloneComponentNodeInjector));
-
-         expect(path[3]).toBeInstanceOf(R3Injector);
-         expect(path[3]).toBe(lazyComponentEnvironmentInjector);
-         expect((path[3] as R3Injector).scopes.has('environment')).toBeTrue();
-         expect((path[3] as R3Injector).source).toBe('Standalone[LazyComponent]');
-
-         expect(path[4]).toBeInstanceOf(R3Injector);
-         expect((path[4] as R3Injector).scopes.has('environment')).toBeTrue();
-         expect((path[4] as R3Injector).source).toBe('DynamicTestModule');
-         expect((path[4] as R3Injector).scopes.has('root')).toBeTrue();
-
-         expect(path[5]).toBeInstanceOf(R3Injector);
-         expect((path[5] as R3Injector).scopes.has('platform')).toBeTrue();
-
-         expect(path[6]).toBeInstanceOf(NullInjector);
-       }
-     }));
+    class MyServiceA {}
+    @NgModule({providers: [MyServiceA]})
+    class ModuleA {}
+
+    class MyServiceB {}
+    @NgModule({providers: [MyServiceB]})
+    class ModuleB {}
+
+    @Component({
+      selector: 'lazy-comp',
+      template: `lazy component`,
+      standalone: true,
+      imports: [ModuleB],
+    })
+    class LazyComponent {
+      constructor() {
+        onLazyComponentCreated();
+      }
+    }
+
+    @Component({
+      standalone: true,
+      imports: [RouterOutlet, ModuleA],
+      template: `<router-outlet/>`,
+    })
+    class MyStandaloneComponent {
+      nodeInjector = inject(Injector);
+      envInjector = inject(EnvironmentInjector);
+    }
+
+    TestBed.configureTestingModule({
+      imports: [
+        RouterModule.forRoot([
+          {
+            path: 'lazy',
+            loadComponent: () => LazyComponent,
+          },
+        ]),
+      ],
+    });
+    const root = TestBed.createComponent(MyStandaloneComponent);
+    TestBed.inject(Router).navigateByUrl('/lazy');
+    tick();
+    root.detectChanges();
+
+    function onLazyComponentCreated() {
+      const lazyComponentNodeInjector = inject(Injector);
+      const lazyComponentEnvironmentInjector = inject(EnvironmentInjector);
+
+      const routerOutletNodeInjector = inject(Injector, {skipSelf: true}) as NodeInjector;
+
+      const myStandaloneComponent = inject(MyStandaloneComponent);
+      const myStandaloneComponentNodeInjector = myStandaloneComponent.nodeInjector as NodeInjector;
+
+      const path = getInjectorResolutionPath(lazyComponentNodeInjector);
+
+      /**
+       *
+       * Here is a diagram of the injectors in our application:
+       *
+       *
+       *
+       *                                ┌────────────┐
+       *                                │NullInjector│
+       *                                └─────▲──────┘
+       *                                      │
+       *                         ┌────────────┴────────────────┐
+       *                         │EnvironmentInjector(Platform)│
+       *                         └────────────▲────────────────┘
+       *                                      │
+       *                         ┌────────────┴────────────┐
+       *                         │EnvironmentInjector(Root)│
+       *                         └───────────────▲─────────┘
+       *                                         │
+       *                                         │
+       *                                         │
+       *┌────────────────────────────────────┐  ┌─┴────────────────────────────────────────┐
+       *│ NodeInjector(MyStandaloneComponent)├─►| EnvironmentInjector(MyStandaloneComponent│
+       *└────────────────▲───────────────────┘  └────────────▲─────────────────────────────┘
+       *                 │                                   │
+       *                 │                                   │
+       *                 │                                   │
+       *    ┌────────────┴─────────────┐                     │
+       *    │NodeInjector(RouterOutlet)├──────────┐          │
+       *    └────────────▲─────────────┘          │          │
+       *                 │                        │          │
+       *                 │                        │          │
+       *                 │                        │          │
+       *                 │                        │          │
+       *   ┌─────────────┴──────────────┐  ┌──────▼──────────┴────────────────┐
+       *   │ NodeInjector(LazyComponent)├──►EnvironmentInjector(LazyComponent)│
+       *   └────────────────────────────┘  └──────────────────────────────────┘
+       *
+       *
+       *
+       *
+       *
+       * The Resolution path if we start at NodeInjector(LazyComponent) should be
+       * [
+       *    NodeInjector[LazyComponent],
+       *    NodeInjector[RouterOutlet],
+       *    NodeInjector[MyStandaloneComponent],
+       *    R3Injector[LazyComponent],
+       *    R3Injector[Root],
+       *    R3Injector[Platform],
+       *    NullInjector
+       * ]
+       */
+      expect(path.length).toBe(7);
+
+      expect(path[0]).toBe(lazyComponentNodeInjector);
+
+      expect(path[1]).toBeInstanceOf(NodeInjector);
+      expect(getNodeInjectorLView(path[1] as NodeInjector)).toBe(
+        getNodeInjectorLView(routerOutletNodeInjector),
+      );
+
+      expect(path[2]).toBeInstanceOf(NodeInjector);
+      expect(getNodeInjectorLView(path[2] as NodeInjector)).toBe(
+        getNodeInjectorLView(myStandaloneComponentNodeInjector),
+      );
+
+      expect(path[3]).toBeInstanceOf(R3Injector);
+      expect(path[3]).toBe(lazyComponentEnvironmentInjector);
+      expect((path[3] as R3Injector).scopes.has('environment')).toBeTrue();
+      expect((path[3] as R3Injector).source).toBe('Standalone[LazyComponent]');
+
+      expect(path[4]).toBeInstanceOf(R3Injector);
+      expect((path[4] as R3Injector).scopes.has('environment')).toBeTrue();
+      expect((path[4] as R3Injector).source).toBe('DynamicTestModule');
+      expect((path[4] as R3Injector).scopes.has('root')).toBeTrue();
+
+      expect(path[5]).toBeInstanceOf(R3Injector);
+      expect((path[5] as R3Injector).scopes.has('platform')).toBeTrue();
+
+      expect(path[6]).toBeInstanceOf(NullInjector);
+    }
+  }));
 });
diff --git a/packages/core/test/acceptance/integration_spec.ts b/packages/core/test/acceptance/integration_spec.ts
index 34646a8bafd5c..281cc689a74c9 100644
--- a/packages/core/test/acceptance/integration_spec.ts
+++ b/packages/core/test/acceptance/integration_spec.ts
@@ -9,7 +9,25 @@ import {animate, AnimationEvent, state, style, transition, trigger} from '@angul
 import {AnimationDriver} from '@angular/animations/browser';
 import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing';
 import {CommonModule} from '@angular/common';
-import {Component, ContentChild, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, OnInit, Output, Pipe, QueryList, TemplateRef, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
+import {
+  Component,
+  ContentChild,
+  Directive,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  NgModule,
+  OnInit,
+  Output,
+  Pipe,
+  QueryList,
+  TemplateRef,
+  ViewChild,
+  ViewChildren,
+  ViewContainerRef,
+} from '@angular/core';
 import {Inject} from '@angular/core/src/di';
 import {readPatchedLView} from '@angular/core/src/render3/context_discovery';
 import {LContainer} from '@angular/core/src/render3/interfaces/container';
@@ -30,8 +48,7 @@ describe('acceptance integration tests', () => {
   describe('render', () => {
     it('should render basic template', () => {
       @Component({template: '<span title="Hello">Greetings</span>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App]});
       const fixture = TestBed.createComponent(App);
@@ -59,8 +76,8 @@ describe('acceptance integration tests', () => {
 
       expect(fixture.nativeElement.innerHTML).toEqual('<h1>Hello, World!</h1>');
       expectPerfCounters({
-        tView: 2,  // Host view + App
-        tNode: 3,  // Host Node + <h1> + #text
+        tView: 2, // Host view + App
+        tNode: 3, // Host Node + <h1> + #text
       });
 
       fixture.componentInstance.name = 'New World';
@@ -77,23 +94,24 @@ describe('acceptance integration tests', () => {
 
   describe('ng-container', () => {
     it('should insert as a child of a regular element', () => {
-      @Component(
-          {template: '<div>before|<ng-container>Greetings<span></span></ng-container>|after</div>'})
-      class App {
-      }
+      @Component({
+        template: '<div>before|<ng-container>Greetings<span></span></ng-container>|after</div>',
+      })
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App]});
       const fixture = TestBed.createComponent(App);
 
       // Strip comments since VE and Ivy put them in different places.
-      expect(stripHtmlComments(fixture.nativeElement.innerHTML))
-          .toBe('<div>before|Greetings<span></span>|after</div>');
+      expect(stripHtmlComments(fixture.nativeElement.innerHTML)).toBe(
+        '<div>before|Greetings<span></span>|after</div>',
+      );
     });
 
     it('should add and remove DOM nodes when ng-container is a child of a regular element', () => {
       @Component({
         template:
-            '<ng-template [ngIf]="render"><div><ng-container>content</ng-container></div></ng-template>'
+          '<ng-template [ngIf]="render"><div><ng-container>content</ng-container></div></ng-template>',
       })
       class App {
         render = false;
@@ -134,84 +152,89 @@ describe('acceptance integration tests', () => {
     });
 
     // https://stackblitz.com/edit/angular-tfhcz1?file=src%2Fapp%2Fapp.component.ts
-    it('should add and remove DOM nodes when ng-container is a child of a delayed embedded view',
-       () => {
-         @Directive({selector: '[testDirective]'})
-         class TestDirective {
-           constructor(private _tplRef: TemplateRef<any>, private _vcRef: ViewContainerRef) {}
-
-           createAndInsert() {
-             this._vcRef.insert(this._tplRef.createEmbeddedView({}));
-           }
-
-           clear() {
-             this._vcRef.clear();
-           }
-         }
-
-         @Component({
-           template: '<ng-template testDirective><ng-container>content</ng-container></ng-template>'
-         })
-         class App {
-           @ViewChild(TestDirective, {static: true}) testDirective!: TestDirective;
-         }
-
-         TestBed.configureTestingModule({declarations: [App, TestDirective]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         expect(stripHtmlComments(fixture.nativeElement.innerHTML)).toBe('');
-
-         fixture.componentInstance.testDirective.createAndInsert();
-         fixture.detectChanges();
-         expect(stripHtmlComments(fixture.nativeElement.innerHTML)).toBe('content');
-
-         fixture.componentInstance.testDirective.clear();
-         fixture.detectChanges();
-         expect(stripHtmlComments(fixture.nativeElement.innerHTML)).toBe('');
-       });
+    it('should add and remove DOM nodes when ng-container is a child of a delayed embedded view', () => {
+      @Directive({selector: '[testDirective]'})
+      class TestDirective {
+        constructor(
+          private _tplRef: TemplateRef<any>,
+          private _vcRef: ViewContainerRef,
+        ) {}
 
-    it('should render at the component view root', () => {
-      @Component(
-          {selector: 'test-cmpt', template: '<ng-container>component template</ng-container>'})
-      class TestCmpt {
+        createAndInsert() {
+          this._vcRef.insert(this._tplRef.createEmbeddedView({}));
+        }
+
+        clear() {
+          this._vcRef.clear();
+        }
       }
 
-      @Component({template: '<test-cmpt></test-cmpt>'})
+      @Component({
+        template: '<ng-template testDirective><ng-container>content</ng-container></ng-template>',
+      })
       class App {
+        @ViewChild(TestDirective, {static: true}) testDirective!: TestDirective;
       }
 
+      TestBed.configureTestingModule({declarations: [App, TestDirective]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      expect(stripHtmlComments(fixture.nativeElement.innerHTML)).toBe('');
+
+      fixture.componentInstance.testDirective.createAndInsert();
+      fixture.detectChanges();
+      expect(stripHtmlComments(fixture.nativeElement.innerHTML)).toBe('content');
+
+      fixture.componentInstance.testDirective.clear();
+      fixture.detectChanges();
+      expect(stripHtmlComments(fixture.nativeElement.innerHTML)).toBe('');
+    });
+
+    it('should render at the component view root', () => {
+      @Component({
+        selector: 'test-cmpt',
+        template: '<ng-container>component template</ng-container>',
+      })
+      class TestCmpt {}
+
+      @Component({template: '<test-cmpt></test-cmpt>'})
+      class App {}
+
       TestBed.configureTestingModule({declarations: [App, TestCmpt]});
       const fixture = TestBed.createComponent(App);
 
-      expect(stripHtmlComments(fixture.nativeElement.innerHTML))
-          .toBe('<test-cmpt>component template</test-cmpt>');
+      expect(stripHtmlComments(fixture.nativeElement.innerHTML)).toBe(
+        '<test-cmpt>component template</test-cmpt>',
+      );
     });
 
     it('should render inside another ng-container', () => {
       @Component({
         selector: 'test-cmpt',
         template:
-            '<ng-container><ng-container><ng-container>content</ng-container></ng-container></ng-container>'
+          '<ng-container><ng-container><ng-container>content</ng-container></ng-container></ng-container>',
       })
-      class TestCmpt {
-      }
+      class TestCmpt {}
 
       @Component({template: '<test-cmpt></test-cmpt>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, TestCmpt]});
       const fixture = TestBed.createComponent(App);
 
-      expect(stripHtmlComments(fixture.nativeElement.innerHTML))
-          .toBe('<test-cmpt>content</test-cmpt>');
+      expect(stripHtmlComments(fixture.nativeElement.innerHTML)).toBe(
+        '<test-cmpt>content</test-cmpt>',
+      );
     });
 
     it('should render inside another ng-container at the root of a delayed view', () => {
       @Directive({selector: '[testDirective]'})
       class TestDirective {
-        constructor(private _tplRef: TemplateRef<any>, private _vcRef: ViewContainerRef) {}
+        constructor(
+          private _tplRef: TemplateRef<any>,
+          private _vcRef: ViewContainerRef,
+        ) {}
 
         createAndInsert() {
           this._vcRef.insert(this._tplRef.createEmbeddedView({}));
@@ -224,7 +247,7 @@ describe('acceptance integration tests', () => {
 
       @Component({
         template:
-            '<ng-template testDirective><ng-container><ng-container><ng-container>content</ng-container></ng-container></ng-container></ng-template>'
+          '<ng-template testDirective><ng-container><ng-container><ng-container>content</ng-container></ng-container></ng-container></ng-template>',
       })
       class App {
         @ViewChild(TestDirective, {static: true}) testDirective!: TestDirective;
@@ -265,14 +288,15 @@ describe('acceptance integration tests', () => {
       fixture.detectChanges();
 
       expect(stripHtmlComments(fixture.nativeElement.innerHTML)).toEqual('<div></div>');
-      expect(fixture.componentInstance.testDirective.elRef.nativeElement.nodeType)
-          .toBe(Node.COMMENT_NODE);
+      expect(fixture.componentInstance.testDirective.elRef.nativeElement.nodeType).toBe(
+        Node.COMMENT_NODE,
+      );
     });
 
     it('should support ViewContainerRef when ng-container is at the root of a view', () => {
       @Directive({selector: '[dir]'})
       class TestDirective {
-        @Input() contentTpl: TemplateRef<{}>|null = null;
+        @Input() contentTpl: TemplateRef<{}> | null = null;
 
         constructor(private _vcRef: ViewContainerRef) {}
 
@@ -287,7 +311,7 @@ describe('acceptance integration tests', () => {
 
       @Component({
         template:
-            '<ng-container dir [contentTpl]="content"><ng-template #content>Content</ng-template></ng-container>'
+          '<ng-container dir [contentTpl]="content"><ng-template #content>Content</ng-template></ng-container>',
       })
       class App {
         @ViewChild(TestDirective) testDirective!: TestDirective;
@@ -311,7 +335,10 @@ describe('acceptance integration tests', () => {
     it('should support ViewContainerRef on <ng-template> inside <ng-container>', () => {
       @Directive({selector: '[dir]'})
       class TestDirective {
-        constructor(private _tplRef: TemplateRef<{}>, private _vcRef: ViewContainerRef) {}
+        constructor(
+          private _tplRef: TemplateRef<{}>,
+          private _vcRef: ViewContainerRef,
+        ) {}
 
         insertView() {
           this._vcRef.createEmbeddedView(this._tplRef);
@@ -344,8 +371,7 @@ describe('acceptance integration tests', () => {
 
     it('should not set any attributes', () => {
       @Component({template: '<div><ng-container id="foo"></ng-container></div>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App]});
       const fixture = TestBed.createComponent(App);
@@ -359,7 +385,7 @@ describe('acceptance integration tests', () => {
     it('should render "undefined" as ""', () => {
       @Component({template: '{{name}}'})
       class App {
-        name: string|undefined = 'benoit';
+        name: string | undefined = 'benoit';
       }
 
       TestBed.configureTestingModule({declarations: [App]});
@@ -377,7 +403,7 @@ describe('acceptance integration tests', () => {
     it('should render "null" as ""', () => {
       @Component({template: '{{name}}'})
       class App {
-        name: string|null = 'benoit';
+        name: string | null = 'benoit';
       }
 
       TestBed.configureTestingModule({declarations: [App]});
@@ -419,17 +445,17 @@ describe('acceptance integration tests', () => {
             <i>Hello {{ name }}!</i>
           </b>
           {{ myRef.id }}
-        `
+        `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App]});
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
-      expect(stripNgNonBindable(fixture.nativeElement.innerHTML))
-          .toEqual('<b id="my-id"><i>Hello {{ name }}!</i></b> my-id ');
+      expect(stripNgNonBindable(fixture.nativeElement.innerHTML)).toEqual(
+        '<b id="my-id"><i>Hello {{ name }}!</i></b> my-id ',
+      );
     });
 
     it('should invoke directives for host element', () => {
@@ -447,7 +473,7 @@ describe('acceptance integration tests', () => {
           <b ngNonBindable directive>
             <i>Hello {{ name }}!</i>
           </b>
-        `
+        `,
       })
       class App {
         name = 'World';
@@ -457,8 +483,9 @@ describe('acceptance integration tests', () => {
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
-      expect(stripNgNonBindable(fixture.nativeElement.innerHTML))
-          .toEqual('<b directive=""><i>Hello {{ name }}!</i></b>');
+      expect(stripNgNonBindable(fixture.nativeElement.innerHTML)).toEqual(
+        '<b directive=""><i>Hello {{ name }}!</i></b>',
+      );
       expect(directiveInvoked).toEqual(true);
     });
 
@@ -477,7 +504,7 @@ describe('acceptance integration tests', () => {
           <b ngNonBindable>
             <i directive>Hello {{ name }}!</i>
           </b>
-        `
+        `,
       })
       class App {
         name = 'World';
@@ -487,8 +514,9 @@ describe('acceptance integration tests', () => {
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
-      expect(stripNgNonBindable(fixture.nativeElement.innerHTML))
-          .toEqual('<b><i directive="">Hello {{ name }}!</i></b>');
+      expect(stripNgNonBindable(fixture.nativeElement.innerHTML)).toEqual(
+        '<b><i directive="">Hello {{ name }}!</i></b>',
+      );
       expect(directiveInvoked).toEqual(false);
     });
   });
@@ -565,13 +593,15 @@ describe('acceptance integration tests', () => {
 
       fixture.componentInstance.id = 'foo';
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual('<b><span></span><span class="foo" id="foo"></span></b>');
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        '<b><span></span><span class="foo" id="foo"></span></b>',
+      );
 
       fixture.componentInstance.id = 'bar';
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual('<b><span></span><span class="foo" id="bar"></span></b>');
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        '<b><span></span><span class="foo" id="bar"></span></b>',
+      );
     });
 
     it('should handle sibling text node after element with child text node', () => {
@@ -603,8 +633,7 @@ describe('acceptance integration tests', () => {
 
     it('should support a basic component template', () => {
       @Component({template: '<todo></todo>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, TodoComponent]});
       const fixture = TestBed.createComponent(App);
@@ -615,8 +644,7 @@ describe('acceptance integration tests', () => {
 
     it('should support a component template with sibling', () => {
       @Component({template: '<todo></todo>two'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, TodoComponent]});
       const fixture = TestBed.createComponent(App);
@@ -627,15 +655,15 @@ describe('acceptance integration tests', () => {
 
     it('should support a component template with component sibling', () => {
       @Component({template: '<todo></todo><todo></todo>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, TodoComponent]});
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual('<todo><p>Todo one</p></todo><todo><p>Todo one</p></todo>');
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        '<todo><p>Todo one</p></todo><todo><p>Todo one</p></todo>',
+      );
     });
 
     it('should support a component with binding on host element', () => {
@@ -663,8 +691,7 @@ describe('acceptance integration tests', () => {
 
     it('should support root component with host attribute', () => {
       @Component({selector: 'host-attr-comp', template: '', host: {'role': 'button'}})
-      class HostAttributeComp {
-      }
+      class HostAttributeComp {}
 
       TestBed.configureTestingModule({declarations: [HostAttributeComp]});
       const fixture = TestBed.createComponent(HostAttributeComp);
@@ -680,8 +707,7 @@ describe('acceptance integration tests', () => {
       }
 
       @Component({template: '<comp></comp>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, MyComp]});
       const fixture = TestBed.createComponent(App);
@@ -721,7 +747,7 @@ describe('acceptance integration tests', () => {
       it('should support attribute bindings', () => {
         @Component({template: '<button [attr.title]="title"></button>'})
         class App {
-          title: string|null = '';
+          title: string | null = '';
         }
 
         TestBed.configureTestingModule({declarations: [App]});
@@ -756,8 +782,9 @@ describe('acceptance integration tests', () => {
 
         fixture.componentInstance.title = {toString: () => 'Custom toString'};
         fixture.detectChanges();
-        expect(fixture.nativeElement.innerHTML)
-            .toEqual('<button title="Custom toString"></button>');
+        expect(fixture.nativeElement.innerHTML).toEqual(
+          '<button title="Custom toString"></button>',
+        );
       });
 
       it('should update bindings', () => {
@@ -773,7 +800,7 @@ describe('acceptance integration tests', () => {
             'a6:{{c[0]}}{{c[1]}}{{c[2]}}{{c[3]}}{{c[4]}}{{c[5]}}{{c[6]}}{{c[7]}}{{c[8]}}{{c[9]}}{{c[10]}}{{c[11]}}{{c[16]}}',
             'a7:{{c[0]}}{{c[1]}}{{c[2]}}{{c[3]}}{{c[4]}}{{c[5]}}{{c[6]}}{{c[7]}}{{c[8]}}{{c[9]}}{{c[10]}}{{c[11]}}{{c[12]}}{{c[13]}}{{c[16]}}',
             'a8:{{c[0]}}{{c[1]}}{{c[2]}}{{c[3]}}{{c[4]}}{{c[5]}}{{c[6]}}{{c[7]}}{{c[8]}}{{c[9]}}{{c[10]}}{{c[11]}}{{c[12]}}{{c[13]}}{{c[14]}}{{c[15]}}{{c[16]}}',
-          ].join('\n')
+          ].join('\n'),
         })
         class App {
           c = ['(', 0, 'a', 1, 'b', 2, 'c', 3, 'd', 4, 'e', 5, 'f', 6, 'g', 7, ')'];
@@ -783,50 +810,56 @@ describe('acceptance integration tests', () => {
         const fixture = TestBed.createComponent(App);
         fixture.detectChanges();
 
-        expect(fixture.nativeElement.textContent.trim()).toEqual([
-          'a:(0a1b2c3d4e5f6g7)',
-          'a0:0',
-          'a1:(0)',
-          'a2:(0a1)',
-          'a3:(0a1b2)',
-          'a4:(0a1b2c3)',
-          'a5:(0a1b2c3d4)',
-          'a6:(0a1b2c3d4e5)',
-          'a7:(0a1b2c3d4e5f6)',
-          'a8:(0a1b2c3d4e5f6g7)',
-        ].join('\n'));
+        expect(fixture.nativeElement.textContent.trim()).toEqual(
+          [
+            'a:(0a1b2c3d4e5f6g7)',
+            'a0:0',
+            'a1:(0)',
+            'a2:(0a1)',
+            'a3:(0a1b2)',
+            'a4:(0a1b2c3)',
+            'a5:(0a1b2c3d4)',
+            'a6:(0a1b2c3d4e5)',
+            'a7:(0a1b2c3d4e5f6)',
+            'a8:(0a1b2c3d4e5f6g7)',
+          ].join('\n'),
+        );
 
         fixture.componentInstance.c.reverse();
         fixture.detectChanges();
 
-        expect(fixture.nativeElement.textContent.trim()).toEqual([
-          'a:)7g6f5e4d3c2b1a0(',
-          'a0:7',
-          'a1:)7(',
-          'a2:)7g6(',
-          'a3:)7g6f5(',
-          'a4:)7g6f5e4(',
-          'a5:)7g6f5e4d3(',
-          'a6:)7g6f5e4d3c2(',
-          'a7:)7g6f5e4d3c2b1(',
-          'a8:)7g6f5e4d3c2b1a0(',
-        ].join('\n'));
+        expect(fixture.nativeElement.textContent.trim()).toEqual(
+          [
+            'a:)7g6f5e4d3c2b1a0(',
+            'a0:7',
+            'a1:)7(',
+            'a2:)7g6(',
+            'a3:)7g6f5(',
+            'a4:)7g6f5e4(',
+            'a5:)7g6f5e4d3(',
+            'a6:)7g6f5e4d3c2(',
+            'a7:)7g6f5e4d3c2b1(',
+            'a8:)7g6f5e4d3c2b1a0(',
+          ].join('\n'),
+        );
 
         fixture.componentInstance.c.reverse();
         fixture.detectChanges();
 
-        expect(fixture.nativeElement.textContent.trim()).toEqual([
-          'a:(0a1b2c3d4e5f6g7)',
-          'a0:0',
-          'a1:(0)',
-          'a2:(0a1)',
-          'a3:(0a1b2)',
-          'a4:(0a1b2c3)',
-          'a5:(0a1b2c3d4)',
-          'a6:(0a1b2c3d4e5)',
-          'a7:(0a1b2c3d4e5f6)',
-          'a8:(0a1b2c3d4e5f6g7)',
-        ].join('\n'));
+        expect(fixture.nativeElement.textContent.trim()).toEqual(
+          [
+            'a:(0a1b2c3d4e5f6g7)',
+            'a0:0',
+            'a1:(0)',
+            'a2:(0a1)',
+            'a3:(0a1b2)',
+            'a4:(0a1b2c3)',
+            'a5:(0a1b2c3d4)',
+            'a6:(0a1b2c3d4e5)',
+            'a7:(0a1b2c3d4e5f6)',
+            'a8:(0a1b2c3d4e5f6g7)',
+          ].join('\n'),
+        );
       });
 
       it('should not update DOM if context has not changed', () => {
@@ -835,10 +868,10 @@ describe('acceptance integration tests', () => {
             <span [attr.title]="title">
               <b [attr.title]="title" *ngIf="shouldRender"></b>
             </span>
-          `
+          `,
         })
         class App {
-          title: string|null = '';
+          title: string | null = '';
           shouldRender = true;
         }
 
@@ -901,7 +934,7 @@ describe('acceptance integration tests', () => {
       it('should support binding to styles', () => {
         @Component({template: '<span [style.font-size]="size"></span>'})
         class App {
-          size: string|null = '';
+          size: string | null = '';
         }
 
         TestBed.configureTestingModule({declarations: [App]});
@@ -924,7 +957,7 @@ describe('acceptance integration tests', () => {
       it('should support binding to styles with suffix', () => {
         @Component({template: '<span [style.font-size.px]="size"></span>'})
         class App {
-          size: string|number|null = '';
+          size: string | number | null = '';
         }
 
         TestBed.configureTestingModule({declarations: [App]});
@@ -1006,8 +1039,7 @@ describe('acceptance integration tests', () => {
 
       it('should apply classes properly when nodes are components', () => {
         @Component({selector: 'my-comp', template: 'Comp Content'})
-        class MyComp {
-        }
+        class MyComp {}
 
         @Component({template: '<my-comp [class.active]="value"></my-comp>'})
         class App {
@@ -1044,7 +1076,7 @@ describe('acceptance integration tests', () => {
           template: `
             <ng-template #foo>Temp Content</ng-template>
             <structural-comp [class.active]="value" [tmp]="foo"></structural-comp>
-          `
+          `,
         })
         class App {
           @ViewChild(StructuralComp) structuralComp!: StructuralComp;
@@ -1088,323 +1120,315 @@ describe('acceptance integration tests', () => {
         }
       }
 
-      it('should delegate initial classes to a [class] input binding if present on a directive on the same element',
-         () => {
-           @Component({template: '<div class="apple orange banana" DirWithClass></div>'})
-           class App {
-             @ViewChild(DirWithClassDirective) mockClassDirective!: DirWithClassDirective;
-           }
-
-           TestBed.configureTestingModule({declarations: [App, DirWithClassDirective]});
-           const fixture = TestBed.createComponent(App);
-           fixture.detectChanges();
-
-           // the initial values always get sorted in non VE code
-           // but there is no sorting guarantee within VE code
-           expect(fixture.componentInstance.mockClassDirective.classesVal.split(/\s+/).sort())
-               .toEqual(['apple', 'banana', 'orange']);
-         });
-
-      it('should delegate initial styles to a [style] input binding if present on a directive on the same element',
-         () => {
-           @Component({template: '<div style="width: 100px; height: 200px" DirWithStyle></div>'})
-           class App {
-             @ViewChild(DirWithStyleDirective) mockStyleDirective!: DirWithStyleDirective;
-           }
-
-           TestBed.configureTestingModule({declarations: [App, DirWithStyleDirective]});
-           const fixture = TestBed.createComponent(App);
-           fixture.detectChanges();
-
-           const styles = fixture.componentInstance.mockStyleDirective.stylesVal;
-
-           expect(styles).toEqual('width: 100px; height: 200px;');
-         });
-
-      it('should update `[class]` and bindings in the provided directive if the input is matched',
-         () => {
-           @Component({template: '<div DirWithClass [class]="value"></div>'})
-           class App {
-             @ViewChild(DirWithClassDirective) mockClassDirective!: DirWithClassDirective;
-             value = '';
-           }
-
-           TestBed.configureTestingModule({declarations: [App, DirWithClassDirective]});
-           const fixture = TestBed.createComponent(App);
-           fixture.componentInstance.value = 'cucumber grape';
-           fixture.detectChanges();
-
-           expect(fixture.componentInstance.mockClassDirective.classesVal)
-               .toEqual('cucumber grape');
-         });
-
-      it('should update `[style]` and bindings in the provided directive if the input is matched',
-         () => {
-           @Component({template: '<div DirWithStyle [style]="value"></div>'})
-           class App {
-             @ViewChild(DirWithStyleDirective) mockStyleDirective!: DirWithStyleDirective;
-             value!: {[key: string]: string};
-           }
-
-           TestBed.configureTestingModule({declarations: [App, DirWithStyleDirective]});
-           const fixture = TestBed.createComponent(App);
-           fixture.componentInstance.value = {width: '200px', height: '500px'};
-           fixture.detectChanges();
-
-           expect(fixture.componentInstance.mockStyleDirective.stylesVal)
-               .toEqual({width: '200px', height: '500px'});
-         });
-
-      it('should apply initial styling to the element that contains the directive with host styling',
-         () => {
-           @Directive({
-             selector: '[DirWithInitialStyling]',
-             host: {
-               'title': 'foo',
-               'class': 'heavy golden',
-               'style': 'color: purple',
-               '[style.font-weight]': '"bold"'
-             }
-           })
-           class DirWithInitialStyling {
-           }
-
-           @Component({
-             template: `
+      it('should delegate initial classes to a [class] input binding if present on a directive on the same element', () => {
+        @Component({template: '<div class="apple orange banana" DirWithClass></div>'})
+        class App {
+          @ViewChild(DirWithClassDirective) mockClassDirective!: DirWithClassDirective;
+        }
+
+        TestBed.configureTestingModule({declarations: [App, DirWithClassDirective]});
+        const fixture = TestBed.createComponent(App);
+        fixture.detectChanges();
+
+        // the initial values always get sorted in non VE code
+        // but there is no sorting guarantee within VE code
+        expect(fixture.componentInstance.mockClassDirective.classesVal.split(/\s+/).sort()).toEqual(
+          ['apple', 'banana', 'orange'],
+        );
+      });
+
+      it('should delegate initial styles to a [style] input binding if present on a directive on the same element', () => {
+        @Component({template: '<div style="width: 100px; height: 200px" DirWithStyle></div>'})
+        class App {
+          @ViewChild(DirWithStyleDirective) mockStyleDirective!: DirWithStyleDirective;
+        }
+
+        TestBed.configureTestingModule({declarations: [App, DirWithStyleDirective]});
+        const fixture = TestBed.createComponent(App);
+        fixture.detectChanges();
+
+        const styles = fixture.componentInstance.mockStyleDirective.stylesVal;
+
+        expect(styles).toEqual('width: 100px; height: 200px;');
+      });
+
+      it('should update `[class]` and bindings in the provided directive if the input is matched', () => {
+        @Component({template: '<div DirWithClass [class]="value"></div>'})
+        class App {
+          @ViewChild(DirWithClassDirective) mockClassDirective!: DirWithClassDirective;
+          value = '';
+        }
+
+        TestBed.configureTestingModule({declarations: [App, DirWithClassDirective]});
+        const fixture = TestBed.createComponent(App);
+        fixture.componentInstance.value = 'cucumber grape';
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.mockClassDirective.classesVal).toEqual('cucumber grape');
+      });
+
+      it('should update `[style]` and bindings in the provided directive if the input is matched', () => {
+        @Component({template: '<div DirWithStyle [style]="value"></div>'})
+        class App {
+          @ViewChild(DirWithStyleDirective) mockStyleDirective!: DirWithStyleDirective;
+          value!: {[key: string]: string};
+        }
+
+        TestBed.configureTestingModule({declarations: [App, DirWithStyleDirective]});
+        const fixture = TestBed.createComponent(App);
+        fixture.componentInstance.value = {width: '200px', height: '500px'};
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.mockStyleDirective.stylesVal).toEqual({
+          width: '200px',
+          height: '500px',
+        });
+      });
+
+      it('should apply initial styling to the element that contains the directive with host styling', () => {
+        @Directive({
+          selector: '[DirWithInitialStyling]',
+          host: {
+            'title': 'foo',
+            'class': 'heavy golden',
+            'style': 'color: purple',
+            '[style.font-weight]': '"bold"',
+          },
+        })
+        class DirWithInitialStyling {}
+
+        @Component({
+          template: `
                 <div DirWithInitialStyling
                   class="big"
                   style="color:black; font-size:200px"></div>
-             `
-           })
-           class App {
-           }
-
-           TestBed.configureTestingModule({declarations: [App, DirWithInitialStyling]});
-           const fixture = TestBed.createComponent(App);
-           fixture.detectChanges();
-
-           const target: HTMLDivElement = fixture.nativeElement.querySelector('div');
-           const classes = target.getAttribute('class')!.split(/\s+/).sort();
-           expect(classes).toEqual(['big', 'golden', 'heavy']);
-
-           expect(target.getAttribute('title')).toEqual('foo');
-           expect(target.style.getPropertyValue('color')).toEqual('black');
-           expect(target.style.getPropertyValue('font-size')).toEqual('200px');
-           expect(target.style.getPropertyValue('font-weight')).toEqual('bold');
-         });
-
-      it('should apply single styling bindings present within a directive onto the same element and defer the element\'s initial styling values when missing',
-         () => {
-           @Directive({
-             selector: '[DirWithSingleStylingBindings]',
-             host: {
-               'class': 'def',
-               '[class.xyz]': 'activateXYZClass',
-               '[style.width]': 'width',
-               '[style.height]': 'height'
-             }
-           })
-           class DirWithSingleStylingBindings {
-             width: string|null|undefined = undefined;
-             height: string|null|undefined = undefined;
-             activateXYZClass: boolean = false;
-           }
-
-           @Component({
-             template: `
+             `,
+        })
+        class App {}
+
+        TestBed.configureTestingModule({declarations: [App, DirWithInitialStyling]});
+        const fixture = TestBed.createComponent(App);
+        fixture.detectChanges();
+
+        const target: HTMLDivElement = fixture.nativeElement.querySelector('div');
+        const classes = target.getAttribute('class')!.split(/\s+/).sort();
+        expect(classes).toEqual(['big', 'golden', 'heavy']);
+
+        expect(target.getAttribute('title')).toEqual('foo');
+        expect(target.style.getPropertyValue('color')).toEqual('black');
+        expect(target.style.getPropertyValue('font-size')).toEqual('200px');
+        expect(target.style.getPropertyValue('font-weight')).toEqual('bold');
+      });
+
+      it("should apply single styling bindings present within a directive onto the same element and defer the element's initial styling values when missing", () => {
+        @Directive({
+          selector: '[DirWithSingleStylingBindings]',
+          host: {
+            'class': 'def',
+            '[class.xyz]': 'activateXYZClass',
+            '[style.width]': 'width',
+            '[style.height]': 'height',
+          },
+        })
+        class DirWithSingleStylingBindings {
+          width: string | null | undefined = undefined;
+          height: string | null | undefined = undefined;
+          activateXYZClass: boolean = false;
+        }
+
+        @Component({
+          template: `
               <div DirWithSingleStylingBindings class="abc" style="width:100px;"></div>
-            `
-           })
-           class App {
-             @ViewChild(DirWithSingleStylingBindings) dirInstance!: DirWithSingleStylingBindings;
-           }
-
-           TestBed.configureTestingModule({declarations: [App, DirWithSingleStylingBindings]});
-           const fixture = TestBed.createComponent(App);
-           fixture.detectChanges();
-           const dirInstance = fixture.componentInstance.dirInstance;
-           const target: HTMLDivElement = fixture.nativeElement.querySelector('div');
-           expect(target.style.getPropertyValue('width')).toEqual('100px');
-           expect(target.style.getPropertyValue('height')).toEqual('');
-           expect(target.classList.contains('abc')).toBeTruthy();
-           expect(target.classList.contains('def')).toBeTruthy();
-           expect(target.classList.contains('xyz')).toBeFalsy();
-
-           dirInstance.width = '444px';
-           dirInstance.height = '999px';
-           dirInstance.activateXYZClass = true;
-           fixture.detectChanges();
-
-           expect(target.style.getPropertyValue('width')).toEqual('100px');
-           expect(target.style.getPropertyValue('height')).toEqual('999px');
-           expect(target.classList.contains('abc')).toBeTruthy();
-           expect(target.classList.contains('def')).toBeTruthy();
-           expect(target.classList.contains('xyz')).toBeTruthy();
-
-           dirInstance.width = undefined;
-           dirInstance.height = undefined;
-           fixture.detectChanges();
-
-           expect(target.style.getPropertyValue('width')).toEqual('100px');
-           expect(target.style.getPropertyValue('height')).toEqual('');
-           expect(target.classList.contains('abc')).toBeTruthy();
-           expect(target.classList.contains('def')).toBeTruthy();
-           expect(target.classList.contains('xyz')).toBeTruthy();
-         });
-
-      it('should properly prioritize single style binding collisions when they exist on multiple directives',
-         () => {
-           @Directive({selector: '[Dir1WithStyle]', host: {'[style.width]': 'width'}})
-           class Dir1WithStyle {
-             width: null|string|undefined = undefined;
-           }
-
-           @Directive({
-             selector: '[Dir2WithStyle]',
-             host: {'style': 'width: 111px', '[style.width]': 'width'}
-           })
-           class Dir2WithStyle {
-             width: null|string|undefined = undefined;
-           }
-
-           @Component({template: '<div Dir1WithStyle Dir2WithStyle [style.width]="width"></div>'})
-           class App {
-             @ViewChild(Dir1WithStyle) dir1Instance!: Dir1WithStyle;
-             @ViewChild(Dir2WithStyle) dir2Instance!: Dir2WithStyle;
-             width: string|null|undefined = undefined;
-           }
-
-           TestBed.configureTestingModule({declarations: [App, Dir2WithStyle, Dir1WithStyle]});
-           const fixture = TestBed.createComponent(App);
-           fixture.detectChanges();
-           const {dir1Instance, dir2Instance} = fixture.componentInstance;
-
-           const target: HTMLDivElement = fixture.nativeElement.querySelector('div');
-           expect(target.style.getPropertyValue('width')).toEqual('111px');
-
-           fixture.componentInstance.width = '999px';
-           dir1Instance.width = '222px';
-           dir2Instance.width = '333px';
-           fixture.detectChanges();
-           expect(target.style.getPropertyValue('width')).toEqual('999px');
-
-           fixture.componentInstance.width = undefined;
-           fixture.detectChanges();
-           expect(target.style.getPropertyValue('width')).toEqual('222px');
-
-           dir1Instance.width = undefined;
-           fixture.detectChanges();
-           expect(target.style.getPropertyValue('width')).toEqual('333px');
-
-           dir2Instance.width = undefined;
-           fixture.detectChanges();
-           expect(target.style.getPropertyValue('width')).toEqual('111px');
-
-           dir1Instance.width = '666px';
-           fixture.detectChanges();
-           expect(target.style.getPropertyValue('width')).toEqual('666px');
-
-           fixture.componentInstance.width = '777px';
-           fixture.detectChanges();
-           expect(target.style.getPropertyValue('width')).toEqual('777px');
-         });
-
-      it('should properly prioritize multi style binding collisions when they exist on multiple directives',
-         () => {
-           @Directive({
-             selector: '[Dir1WithStyling]',
-             host: {'[style]': 'stylesExp', '[class]': 'classesExp'}
-           })
-           class Dir1WithStyling {
-             classesExp: any = {};
-             stylesExp: any = {};
-           }
-
-           @Directive({
-             selector: '[Dir2WithStyling]',
-             host: {'style': 'width: 111px', '[style]': 'stylesExp'}
-           })
-           class Dir2WithStyling {
-             stylesExp: any = {};
-           }
-
-           @Component({
-             template:
-                 '<div Dir1WithStyling Dir2WithStyling [style]="stylesExp" [class]="classesExp"></div>'
-           })
-           class App {
-             @ViewChild(Dir1WithStyling) dir1Instance!: Dir1WithStyling;
-             @ViewChild(Dir2WithStyling) dir2Instance!: Dir2WithStyling;
-             stylesExp: any = {};
-             classesExp: any = {};
-           }
-
-           TestBed.configureTestingModule({declarations: [App, Dir2WithStyling, Dir1WithStyling]});
-           const fixture = TestBed.createComponent(App);
-           fixture.detectChanges();
-           const {dir1Instance, dir2Instance} = fixture.componentInstance;
-
-           const target = fixture.nativeElement.querySelector('div')!;
-           expect(target.style.getPropertyValue('width')).toEqual('111px');
-
-           const compInstance = fixture.componentInstance;
-           compInstance.stylesExp = {width: '999px', height: undefined};
-           compInstance.classesExp = {one: true, two: false};
-           dir1Instance.stylesExp = {width: '222px'};
-           dir1Instance.classesExp = {two: true, three: false};
-           dir2Instance.stylesExp = {width: '333px', height: '100px'};
-           fixture.detectChanges();
-           expect(target.style.getPropertyValue('width')).toEqual('999px');
-           expect(target.style.getPropertyValue('height')).toEqual('100px');
-           expect(target.classList.contains('one')).toBeTruthy();
-           expect(target.classList.contains('two')).toBeFalsy();
-           expect(target.classList.contains('three')).toBeFalsy();
-
-           compInstance.stylesExp = {};
-           compInstance.classesExp = {};
-           dir1Instance.stylesExp = {width: '222px', height: '200px'};
-           fixture.detectChanges();
-           expect(target.style.getPropertyValue('width')).toEqual('222px');
-           expect(target.style.getPropertyValue('height')).toEqual('200px');
-           expect(target.classList.contains('one')).toBeFalsy();
-           expect(target.classList.contains('two')).toBeTruthy();
-           expect(target.classList.contains('three')).toBeFalsy();
-
-           dir1Instance.stylesExp = {};
-           dir1Instance.classesExp = {};
-           fixture.detectChanges();
-           expect(target.style.getPropertyValue('width')).toEqual('333px');
-           expect(target.style.getPropertyValue('height')).toEqual('100px');
-           expect(target.classList.contains('one')).toBeFalsy();
-           expect(target.classList.contains('two')).toBeFalsy();
-           expect(target.classList.contains('three')).toBeFalsy();
-
-           dir2Instance.stylesExp = {};
-           compInstance.stylesExp = {height: '900px'};
-           fixture.detectChanges();
-           expect(target.style.getPropertyValue('width')).toEqual('111px');
-           expect(target.style.getPropertyValue('height')).toEqual('900px');
-
-           dir1Instance.stylesExp = {width: '666px', height: '600px'};
-           dir1Instance.classesExp = {four: true, one: true};
-           fixture.detectChanges();
-           expect(target.style.getPropertyValue('width')).toEqual('666px');
-           expect(target.style.getPropertyValue('height')).toEqual('900px');
-           expect(target.classList.contains('one')).toBeTruthy();
-           expect(target.classList.contains('two')).toBeFalsy();
-           expect(target.classList.contains('three')).toBeFalsy();
-           expect(target.classList.contains('four')).toBeTruthy();
-
-           compInstance.stylesExp = {width: '777px'};
-           compInstance.classesExp = {four: false};
-           fixture.detectChanges();
-           expect(target.style.getPropertyValue('width')).toEqual('777px');
-           expect(target.style.getPropertyValue('height')).toEqual('600px');
-           expect(target.classList.contains('one')).toBeTruthy();
-           expect(target.classList.contains('two')).toBeFalsy();
-           expect(target.classList.contains('three')).toBeFalsy();
-           expect(target.classList.contains('four')).toBeFalsy();
-         });
+            `,
+        })
+        class App {
+          @ViewChild(DirWithSingleStylingBindings) dirInstance!: DirWithSingleStylingBindings;
+        }
+
+        TestBed.configureTestingModule({declarations: [App, DirWithSingleStylingBindings]});
+        const fixture = TestBed.createComponent(App);
+        fixture.detectChanges();
+        const dirInstance = fixture.componentInstance.dirInstance;
+        const target: HTMLDivElement = fixture.nativeElement.querySelector('div');
+        expect(target.style.getPropertyValue('width')).toEqual('100px');
+        expect(target.style.getPropertyValue('height')).toEqual('');
+        expect(target.classList.contains('abc')).toBeTruthy();
+        expect(target.classList.contains('def')).toBeTruthy();
+        expect(target.classList.contains('xyz')).toBeFalsy();
+
+        dirInstance.width = '444px';
+        dirInstance.height = '999px';
+        dirInstance.activateXYZClass = true;
+        fixture.detectChanges();
+
+        expect(target.style.getPropertyValue('width')).toEqual('100px');
+        expect(target.style.getPropertyValue('height')).toEqual('999px');
+        expect(target.classList.contains('abc')).toBeTruthy();
+        expect(target.classList.contains('def')).toBeTruthy();
+        expect(target.classList.contains('xyz')).toBeTruthy();
+
+        dirInstance.width = undefined;
+        dirInstance.height = undefined;
+        fixture.detectChanges();
+
+        expect(target.style.getPropertyValue('width')).toEqual('100px');
+        expect(target.style.getPropertyValue('height')).toEqual('');
+        expect(target.classList.contains('abc')).toBeTruthy();
+        expect(target.classList.contains('def')).toBeTruthy();
+        expect(target.classList.contains('xyz')).toBeTruthy();
+      });
+
+      it('should properly prioritize single style binding collisions when they exist on multiple directives', () => {
+        @Directive({selector: '[Dir1WithStyle]', host: {'[style.width]': 'width'}})
+        class Dir1WithStyle {
+          width: null | string | undefined = undefined;
+        }
+
+        @Directive({
+          selector: '[Dir2WithStyle]',
+          host: {'style': 'width: 111px', '[style.width]': 'width'},
+        })
+        class Dir2WithStyle {
+          width: null | string | undefined = undefined;
+        }
+
+        @Component({template: '<div Dir1WithStyle Dir2WithStyle [style.width]="width"></div>'})
+        class App {
+          @ViewChild(Dir1WithStyle) dir1Instance!: Dir1WithStyle;
+          @ViewChild(Dir2WithStyle) dir2Instance!: Dir2WithStyle;
+          width: string | null | undefined = undefined;
+        }
+
+        TestBed.configureTestingModule({declarations: [App, Dir2WithStyle, Dir1WithStyle]});
+        const fixture = TestBed.createComponent(App);
+        fixture.detectChanges();
+        const {dir1Instance, dir2Instance} = fixture.componentInstance;
+
+        const target: HTMLDivElement = fixture.nativeElement.querySelector('div');
+        expect(target.style.getPropertyValue('width')).toEqual('111px');
+
+        fixture.componentInstance.width = '999px';
+        dir1Instance.width = '222px';
+        dir2Instance.width = '333px';
+        fixture.detectChanges();
+        expect(target.style.getPropertyValue('width')).toEqual('999px');
+
+        fixture.componentInstance.width = undefined;
+        fixture.detectChanges();
+        expect(target.style.getPropertyValue('width')).toEqual('222px');
+
+        dir1Instance.width = undefined;
+        fixture.detectChanges();
+        expect(target.style.getPropertyValue('width')).toEqual('333px');
+
+        dir2Instance.width = undefined;
+        fixture.detectChanges();
+        expect(target.style.getPropertyValue('width')).toEqual('111px');
+
+        dir1Instance.width = '666px';
+        fixture.detectChanges();
+        expect(target.style.getPropertyValue('width')).toEqual('666px');
+
+        fixture.componentInstance.width = '777px';
+        fixture.detectChanges();
+        expect(target.style.getPropertyValue('width')).toEqual('777px');
+      });
+
+      it('should properly prioritize multi style binding collisions when they exist on multiple directives', () => {
+        @Directive({
+          selector: '[Dir1WithStyling]',
+          host: {'[style]': 'stylesExp', '[class]': 'classesExp'},
+        })
+        class Dir1WithStyling {
+          classesExp: any = {};
+          stylesExp: any = {};
+        }
+
+        @Directive({
+          selector: '[Dir2WithStyling]',
+          host: {'style': 'width: 111px', '[style]': 'stylesExp'},
+        })
+        class Dir2WithStyling {
+          stylesExp: any = {};
+        }
+
+        @Component({
+          template:
+            '<div Dir1WithStyling Dir2WithStyling [style]="stylesExp" [class]="classesExp"></div>',
+        })
+        class App {
+          @ViewChild(Dir1WithStyling) dir1Instance!: Dir1WithStyling;
+          @ViewChild(Dir2WithStyling) dir2Instance!: Dir2WithStyling;
+          stylesExp: any = {};
+          classesExp: any = {};
+        }
+
+        TestBed.configureTestingModule({declarations: [App, Dir2WithStyling, Dir1WithStyling]});
+        const fixture = TestBed.createComponent(App);
+        fixture.detectChanges();
+        const {dir1Instance, dir2Instance} = fixture.componentInstance;
+
+        const target = fixture.nativeElement.querySelector('div')!;
+        expect(target.style.getPropertyValue('width')).toEqual('111px');
+
+        const compInstance = fixture.componentInstance;
+        compInstance.stylesExp = {width: '999px', height: undefined};
+        compInstance.classesExp = {one: true, two: false};
+        dir1Instance.stylesExp = {width: '222px'};
+        dir1Instance.classesExp = {two: true, three: false};
+        dir2Instance.stylesExp = {width: '333px', height: '100px'};
+        fixture.detectChanges();
+        expect(target.style.getPropertyValue('width')).toEqual('999px');
+        expect(target.style.getPropertyValue('height')).toEqual('100px');
+        expect(target.classList.contains('one')).toBeTruthy();
+        expect(target.classList.contains('two')).toBeFalsy();
+        expect(target.classList.contains('three')).toBeFalsy();
+
+        compInstance.stylesExp = {};
+        compInstance.classesExp = {};
+        dir1Instance.stylesExp = {width: '222px', height: '200px'};
+        fixture.detectChanges();
+        expect(target.style.getPropertyValue('width')).toEqual('222px');
+        expect(target.style.getPropertyValue('height')).toEqual('200px');
+        expect(target.classList.contains('one')).toBeFalsy();
+        expect(target.classList.contains('two')).toBeTruthy();
+        expect(target.classList.contains('three')).toBeFalsy();
+
+        dir1Instance.stylesExp = {};
+        dir1Instance.classesExp = {};
+        fixture.detectChanges();
+        expect(target.style.getPropertyValue('width')).toEqual('333px');
+        expect(target.style.getPropertyValue('height')).toEqual('100px');
+        expect(target.classList.contains('one')).toBeFalsy();
+        expect(target.classList.contains('two')).toBeFalsy();
+        expect(target.classList.contains('three')).toBeFalsy();
+
+        dir2Instance.stylesExp = {};
+        compInstance.stylesExp = {height: '900px'};
+        fixture.detectChanges();
+        expect(target.style.getPropertyValue('width')).toEqual('111px');
+        expect(target.style.getPropertyValue('height')).toEqual('900px');
+
+        dir1Instance.stylesExp = {width: '666px', height: '600px'};
+        dir1Instance.classesExp = {four: true, one: true};
+        fixture.detectChanges();
+        expect(target.style.getPropertyValue('width')).toEqual('666px');
+        expect(target.style.getPropertyValue('height')).toEqual('900px');
+        expect(target.classList.contains('one')).toBeTruthy();
+        expect(target.classList.contains('two')).toBeFalsy();
+        expect(target.classList.contains('three')).toBeFalsy();
+        expect(target.classList.contains('four')).toBeTruthy();
+
+        compInstance.stylesExp = {width: '777px'};
+        compInstance.classesExp = {four: false};
+        fixture.detectChanges();
+        expect(target.style.getPropertyValue('width')).toEqual('777px');
+        expect(target.style.getPropertyValue('height')).toEqual('600px');
+        expect(target.classList.contains('one')).toBeTruthy();
+        expect(target.classList.contains('two')).toBeFalsy();
+        expect(target.classList.contains('three')).toBeFalsy();
+        expect(target.classList.contains('four')).toBeFalsy();
+      });
     });
 
     it('should properly handle and render interpolation for class attribute bindings', () => {
@@ -1431,12 +1455,10 @@ describe('acceptance integration tests', () => {
   describe('NgModule assertions', () => {
     it('should throw with descriptive error message when a module imports itself', () => {
       @Component({template: ''})
-      class FixtureComponent {
-      }
+      class FixtureComponent {}
 
       @NgModule({imports: [SomeModule], declarations: [FixtureComponent]})
-      class SomeModule {
-      }
+      class SomeModule {}
       expect(() => {
         TestBed.configureTestingModule({imports: [SomeModule]}).createComponent(FixtureComponent);
       }).toThrowError(`'SomeModule' module can't import itself`);
@@ -1444,100 +1466,88 @@ describe('acceptance integration tests', () => {
 
     it('should throw with descriptive error message when a directive is passed to imports', () => {
       @Component({template: ''})
-      class SomeComponent {
-      }
+      class SomeComponent {}
 
       @NgModule({imports: [SomeComponent]})
-      class ModuleWithImportedComponent {
-      }
+      class ModuleWithImportedComponent {}
       expect(() => {
-        TestBed.configureTestingModule({imports: [ModuleWithImportedComponent]})
-            .createComponent(SomeComponent);
-      })
-          .toThrowError(
-              /^Unexpected directive 'SomeComponent' imported by the module 'ModuleWithImportedComponent'\. Please add an @NgModule annotation\.$/);
+        TestBed.configureTestingModule({imports: [ModuleWithImportedComponent]}).createComponent(
+          SomeComponent,
+        );
+      }).toThrowError(
+        /^Unexpected directive 'SomeComponent' imported by the module 'ModuleWithImportedComponent'\. Please add an @NgModule annotation\.$/,
+      );
     });
 
     it('should throw with descriptive error message when a pipe is passed to imports', () => {
       @Component({template: ''})
-      class FixtureComponent {
-      }
+      class FixtureComponent {}
       @Pipe({name: 'somePipe'})
-      class SomePipe {
-      }
+      class SomePipe {}
       @NgModule({imports: [SomePipe], declarations: [FixtureComponent]})
-      class ModuleWithImportedPipe {
-      }
+      class ModuleWithImportedPipe {}
       expect(() => {
-        TestBed.configureTestingModule({imports: [ModuleWithImportedPipe]})
-            .createComponent(FixtureComponent);
-      })
-          .toThrowError(
-              /^Unexpected pipe 'SomePipe' imported by the module 'ModuleWithImportedPipe'\. Please add an @NgModule annotation\.$/);
+        TestBed.configureTestingModule({imports: [ModuleWithImportedPipe]}).createComponent(
+          FixtureComponent,
+        );
+      }).toThrowError(
+        /^Unexpected pipe 'SomePipe' imported by the module 'ModuleWithImportedPipe'\. Please add an @NgModule annotation\.$/,
+      );
     });
 
     it('should throw with descriptive error message when a module is passed to declarations', () => {
       @Component({template: ''})
-      class FixtureComponent {
-      }
+      class FixtureComponent {}
       @NgModule({})
-      class SomeModule {
-      }
+      class SomeModule {}
       @NgModule({declarations: [SomeModule, FixtureComponent]})
-      class ModuleWithDeclaredModule {
-      }
+      class ModuleWithDeclaredModule {}
 
-      const expectedErrorMessage =
-          `Unexpected value 'SomeModule' declared by the module 'ModuleWithDeclaredModule'. Please add a @Pipe/@Directive/@Component annotation.`;
+      const expectedErrorMessage = `Unexpected value 'SomeModule' declared by the module 'ModuleWithDeclaredModule'. Please add a @Pipe/@Directive/@Component annotation.`;
 
       expect(() => {
-        TestBed.configureTestingModule({imports: [ModuleWithDeclaredModule]})
-            .createComponent(FixtureComponent);
+        TestBed.configureTestingModule({imports: [ModuleWithDeclaredModule]}).createComponent(
+          FixtureComponent,
+        );
       }).toThrowError(expectedErrorMessage);
     });
 
     it('should throw with descriptive error message when a declaration is missing annotation', () => {
       @Component({template: ''})
-      class FixtureComponent {
-      }
+      class FixtureComponent {}
       class SomeClass {}
       @NgModule({declarations: [SomeClass, FixtureComponent]})
-      class SomeModule {
-      }
+      class SomeModule {}
       expect(() => {
         TestBed.configureTestingModule({imports: [SomeModule]}).createComponent(FixtureComponent);
-      })
-          .toThrowError(
-              `Unexpected value 'SomeClass' declared by the module 'SomeModule'. Please add a @Pipe/@Directive/@Component annotation.`);
+      }).toThrowError(
+        `Unexpected value 'SomeClass' declared by the module 'SomeModule'. Please add a @Pipe/@Directive/@Component annotation.`,
+      );
     });
 
-    it('should throw with descriptive error message when an imported module is missing annotation',
-       () => {
-         @Component({template: ''})
-         class FixtureComponent {
-         }
-         class SomeModule {}
-         @NgModule({imports: [SomeModule], declarations: [FixtureComponent]})
-         class ModuleWithImportedModule {
-         }
-         expect(() => {
-           TestBed.configureTestingModule({imports: [ModuleWithImportedModule]})
-               .createComponent(FixtureComponent);
-         })
-             .toThrowError(
-                 /^Unexpected value 'SomeModule' imported by the module 'ModuleWithImportedModule'\. Please add an @NgModule annotation\.$/);
-       });
+    it('should throw with descriptive error message when an imported module is missing annotation', () => {
+      @Component({template: ''})
+      class FixtureComponent {}
+      class SomeModule {}
+      @NgModule({imports: [SomeModule], declarations: [FixtureComponent]})
+      class ModuleWithImportedModule {}
+      expect(() => {
+        TestBed.configureTestingModule({imports: [ModuleWithImportedModule]}).createComponent(
+          FixtureComponent,
+        );
+      }).toThrowError(
+        /^Unexpected value 'SomeModule' imported by the module 'ModuleWithImportedModule'\. Please add an @NgModule annotation\.$/,
+      );
+    });
   });
 
   describe('self-closing tags', () => {
     it('should allow a self-closing tag for a custom tag name', () => {
       @Component({selector: 'my-comp', template: 'hello'})
-      class MyComp {
-      }
+      class MyComp {}
 
       @Component({template: '<my-comp/>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, MyComp]});
       const fixture = TestBed.createComponent(App);
@@ -1547,18 +1557,17 @@ describe('acceptance integration tests', () => {
 
     it('should not confuse self-closing tag for an end tag', () => {
       @Component({selector: 'my-comp', template: '<ng-content/>'})
-      class MyComp {
-      }
+      class MyComp {}
 
       @Component({template: '<my-comp title="a">Before<my-comp title="b"/>After</my-comp>'})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, MyComp]});
       const fixture = TestBed.createComponent(App);
 
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual('<my-comp title="a">Before<my-comp title="b"></my-comp>After</my-comp>');
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        '<my-comp title="a">Before<my-comp title="b"></my-comp>After</my-comp>',
+      );
     });
   });
 
@@ -1574,12 +1583,10 @@ describe('acceptance integration tests', () => {
     }
 
     @Component({selector: 'button[custom-button]', template: ''})
-    class ButtonSubClass extends ButtonSuperClass {
-    }
+    class ButtonSubClass extends ButtonSuperClass {}
 
     @Component({template: '<button custom-button></button>'})
-    class MyApp {
-    }
+    class MyApp {}
 
     TestBed.configureTestingModule({declarations: [MyApp, ButtonSuperClass, ButtonSubClass]});
     const fixture = TestBed.createComponent(MyApp);
@@ -1594,8 +1601,7 @@ describe('acceptance integration tests', () => {
 
   it('should support inherited view queries', () => {
     @Directive({selector: '[someDir]'})
-    class SomeDir {
-    }
+    class SomeDir {}
 
     @Component({template: '<div someDir></div>'})
     class SuperComp {
@@ -1603,12 +1609,10 @@ describe('acceptance integration tests', () => {
     }
 
     @Component({selector: 'button[custom-button]', template: '<div someDir></div>'})
-    class SubComp extends SuperComp {
-    }
+    class SubComp extends SuperComp {}
 
     @Component({template: '<button custom-button></button>'})
-    class MyApp {
-    }
+    class MyApp {}
 
     TestBed.configureTestingModule({declarations: [MyApp, SuperComp, SubComp, SomeDir]});
     const fixture = TestBed.createComponent(MyApp);
@@ -1660,8 +1664,11 @@ describe('acceptance integration tests', () => {
   });
 
   it('should support host attribute and @ContentChild on the same component', () => {
-    @Component(
-        {selector: 'test-component', template: `foo`, host: {'[attr.aria-disabled]': 'true'}})
+    @Component({
+      selector: 'test-component',
+      template: `foo`,
+      host: {'[attr.aria-disabled]': 'true'},
+    })
     class TestComponent {
       @ContentChild(TemplateRef, {static: true}) tpl!: TemplateRef<any>;
     }
@@ -1680,8 +1687,7 @@ describe('acceptance integration tests', () => {
     }
 
     @Component({selector: 'button[custom-button]', template: ''})
-    class ButtonSubClass extends ButtonSuperClass {
-    }
+    class ButtonSubClass extends ButtonSuperClass {}
 
     @Component({template: '<button custom-button [isDisabled]="disableButton"></button>'})
     class MyApp {
@@ -1712,8 +1718,7 @@ describe('acceptance integration tests', () => {
     }
 
     @Component({selector: 'button[custom-button]', template: ''})
-    class ButtonSubClass extends ButtonSuperClass {
-    }
+    class ButtonSubClass extends ButtonSuperClass {}
 
     @Component({template: '<button custom-button (clicked)="handleClick()"></button>'})
     class MyApp {
@@ -1738,12 +1743,10 @@ describe('acceptance integration tests', () => {
     }
 
     @Component({selector: '[sub-button]', template: '<ng-content></ng-content>'})
-    class SubButton extends BaseButton {
-    }
+    class SubButton extends BaseButton {}
 
     @Component({template: '<button sub-button>Click me</button>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [SubButton, App]});
     const fixture = TestBed.createComponent(App);
@@ -1766,12 +1769,10 @@ describe('acceptance integration tests', () => {
     class BaseButton extends SuperBaseButton {}
 
     @Component({selector: '[sub-button]', template: '<ng-content></ng-content>'})
-    class SubButton extends BaseButton {
-    }
+    class SubButton extends BaseButton {}
 
     @Component({template: '<button sub-button>Click me</button>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [SubButton, App]});
     const fixture = TestBed.createComponent(App);
@@ -1797,12 +1798,10 @@ describe('acceptance integration tests', () => {
     }
 
     @Component({selector: '[sub-button]', template: '<ng-content></ng-content>'})
-    class SubButton extends BaseButton {
-    }
+    class SubButton extends BaseButton {}
 
     @Component({template: '<button sub-button>Click me</button>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [SubButton, App]});
     const fixture = TestBed.createComponent(App);
@@ -1826,12 +1825,10 @@ describe('acceptance integration tests', () => {
     }
 
     @Component({selector: '[subButton]', template: '<ng-content></ng-content>'})
-    class SubButton extends BaseButton {
-    }
+    class SubButton extends BaseButton {}
 
     @Component({template: '<button subButton>Click me</button>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [SubButton, BaseButton, App]});
     const fixture = TestBed.createComponent(App);
@@ -1855,16 +1852,13 @@ describe('acceptance integration tests', () => {
     }
 
     @Directive({selector: '[baseButton]'})
-    class BaseButton extends SuperBaseButton {
-    }
+    class BaseButton extends SuperBaseButton {}
 
     @Component({selector: '[subButton]', template: '<ng-content></ng-content>'})
-    class SubButton extends BaseButton {
-    }
+    class SubButton extends BaseButton {}
 
     @Component({template: '<button subButton>Click me</button>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [SubButton, SuperBaseButton, BaseButton, App]});
     const fixture = TestBed.createComponent(App);
@@ -1888,23 +1882,20 @@ describe('acceptance integration tests', () => {
     }
 
     @Directive({selector: '[superBaseButton]'})
-    class SuperBaseButton extends SuperSuperBaseButton {
-    }
+    class SuperBaseButton extends SuperSuperBaseButton {}
 
     @Directive({selector: '[baseButton]'})
-    class BaseButton extends SuperBaseButton {
-    }
+    class BaseButton extends SuperBaseButton {}
 
     @Component({selector: '[subButton]', template: '<ng-content></ng-content>'})
-    class SubButton extends BaseButton {
-    }
+    class SubButton extends BaseButton {}
 
     @Component({template: '<button subButton>Click me</button>'})
-    class App {
-    }
+    class App {}
 
-    TestBed.configureTestingModule(
-        {declarations: [SubButton, SuperBaseButton, SuperSuperBaseButton, BaseButton, App]});
+    TestBed.configureTestingModule({
+      declarations: [SubButton, SuperBaseButton, SuperSuperBaseButton, BaseButton, App],
+    });
     const fixture = TestBed.createComponent(App);
     const button = fixture.debugElement.query(By.directive(SubButton)).nativeElement;
 
@@ -1956,11 +1947,11 @@ describe('acceptance integration tests', () => {
           Hello, {{ firstName ?? 'Frodo' }}!
           You are a Balrog: {{ falsyValue ?? true }}
         </span>
-      `
+      `,
     })
     class App {
-      firstName: string|null = null;
-      lastName: string|null = null;
+      firstName: string | null = null;
+      lastName: string | null = null;
       lastNameFallback = 'Baggins';
       falsyValue = false;
     }
@@ -1984,10 +1975,10 @@ describe('acceptance integration tests', () => {
         You are an Elf: {{ speciesMap?.[keys?.[0] ?? 'key'] }}
         You are an Orc: {{ speciesMap?.['key'] }}
       </span>
-    `
+    `,
     })
     class App {
-      unknownNames: string[]|null = null;
+      unknownNames: string[] | null = null;
       knownNames: string[][] = [['Frodo', 'Bilbo']];
       species = null;
       keys = null;
@@ -2012,13 +2003,13 @@ describe('acceptance integration tests', () => {
           Hello, {{ person.getName?.() }}!
           You are a Balrog: {{ person.getSpecies?.()?.()?.()?.()?.() || 'unknown' }}
         </span>
-      `
+      `,
     })
     class App {
       person: {
-        getName: () => string,
-        getLastName?: () => string,
-        getSpecies?: () => () => () => () => () => string,
+        getName: () => string;
+        getLastName?: () => string;
+        getSpecies?: () => () => () => () => () => string;
       } = {getName: () => 'Bilbo'};
     }
 
@@ -2065,12 +2056,12 @@ describe('acceptance integration tests', () => {
       selector: '[some-dir]',
       host: {
         '[attr.first-name]': `'Hello, ' + (firstName ?? 'Frodo') + '!'`,
-        '(click)': `logLastName(lastName ?? lastNameFallback ?? 'unknown')`
-      }
+        '(click)': `logLastName(lastName ?? lastNameFallback ?? 'unknown')`,
+      },
     })
     class Dir {
-      firstName: string|null = null;
-      lastName: string|null = null;
+      firstName: string | null = null;
+      lastName: string | null = null;
       lastNameFallback = 'Baggins';
 
       logLastName(name: string) {
@@ -2079,8 +2070,7 @@ describe('acceptance integration tests', () => {
     }
 
     @Component({template: `<button some-dir>Click me</button>`})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, Dir]});
     const fixture = TestBed.createComponent(App);
@@ -2151,7 +2141,7 @@ describe('acceptance integration tests', () => {
     @Component({
       template: `
       <span>Hello, {{ (person?.getName() || 'unknown') }}!</span>
-    `
+    `,
     })
     class App {
       person = null;
@@ -2168,9 +2158,12 @@ describe('acceptance integration tests', () => {
     const log: string[] = [];
 
     class Person {
-      constructor(public name: string, public title: string) {}
+      constructor(
+        public name: string,
+        public title: string,
+      ) {}
 
-      getName(includeTitle: boolean|undefined) {
+      getName(includeTitle: boolean | undefined) {
         log.push(`person.getName(${includeTitle})`);
         return includeTitle ? `${this.title} ${this.name}` : this.name;
       }
@@ -2179,13 +2172,13 @@ describe('acceptance integration tests', () => {
     @Component({
       template: `
       <span>Hello, {{ (person?.getName(getConfig('showTitle')?.enabled ?? getDefaultShowTitle()) ?? getFallbackName()) }}!</span>
-    `
+    `,
     })
     class App {
-      person: Person|null = null;
-      showTitle: boolean|null = null;
+      person: Person | null = null;
+      showTitle: boolean | null = null;
 
-      getConfig(name: string): {enabled: boolean}|null {
+      getConfig(name: string): {enabled: boolean} | null {
         log.push(`getConfig(${name})`);
         return this.showTitle !== null ? {enabled: this.showTitle} : null;
       }
@@ -2229,16 +2222,13 @@ describe('acceptance integration tests', () => {
 
   it('should remove child LView from the registry when the root view is destroyed', () => {
     @Component({template: '<child></child>'})
-    class App {
-    }
+    class App {}
 
     @Component({selector: 'child', template: '<grand-child></grand-child>'})
-    class Child {
-    }
+    class Child {}
 
     @Component({selector: 'grand-child', template: ''})
-    class GrandChild {
-    }
+    class GrandChild {}
 
     TestBed.configureTestingModule({declarations: [App, Child, GrandChild]});
     const fixture = TestBed.createComponent(App);
@@ -2246,7 +2236,7 @@ describe('acceptance integration tests', () => {
     fixture.detectChanges();
     const leafLView = readPatchedLView(grandChild)!;
     const lViewIds: number[] = [];
-    let current: LView|LContainer|null = leafLView;
+    let current: LView | LContainer | null = leafLView;
 
     while (current) {
       isLView(current) && lViewIds.push(current[ID]);
@@ -2255,7 +2245,7 @@ describe('acceptance integration tests', () => {
 
     // We expect 3 views: `GrandChild`, `Child` and `App`.
     expect(lViewIds).toEqual([leafLView[ID], leafLView[ID] - 1, leafLView[ID] - 2]);
-    expect(lViewIds.every(id => getLViewById(id) !== null)).toBe(true);
+    expect(lViewIds.every((id) => getLViewById(id) !== null)).toBe(true);
 
     fixture.destroy();
 
@@ -2265,8 +2255,7 @@ describe('acceptance integration tests', () => {
 
   it('should handle content inside <template> elements', () => {
     @Component({template: '<template><strong>Hello</strong><em>World</em></template>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App]});
     const fixture = TestBed.createComponent(App);
@@ -2364,95 +2353,92 @@ describe('acceptance integration tests', () => {
       expect(element.getAttribute('data-dir')).toEqual(value);
     }
 
-    it('should be marked with `firstUpdatePass` up until the template and host bindings are evaluated',
-       () => {
-         @Directive({
-           selector: '[dir]',
-         })
-         class Dir {
-           @HostBinding('attr.data-dir')
-           get text() {
-             return isFirstUpdatePass() ? 'first-update-pass' : 'post-update-pass';
-           }
-         }
-
-         @Component({
-           template: '<div [attr.data-comp]="text" dir></div>',
-         })
-         class Cmp {
-           get text() {
-             return isFirstUpdatePass() ? 'first-update-pass' : 'post-update-pass';
-           }
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [Cmp, Dir],
-         });
-         const fixture = TestBed.createComponent(Cmp);
-         fixture.detectChanges(false);
-         const element = fixture.nativeElement.querySelector('div')!;
-
-         assertAttrValues(element, 'first-update-pass');
-
-         fixture.detectChanges(false);
-
-         assertAttrValues(element, 'post-update-pass');
-       });
-
-    it('tView.firstUpdatePass should be applied immediately after the first embedded view is processed',
-       () => {
-         @Directive({
-           selector: '[dir]',
-         })
-         class Dir {
-           @HostBinding('attr.data-dir')
-           get text() {
-             return isFirstUpdatePass() ? 'first-update-pass' : 'post-update-pass';
-           }
-         }
-
-         @Component({
-           template: `
+    it('should be marked with `firstUpdatePass` up until the template and host bindings are evaluated', () => {
+      @Directive({
+        selector: '[dir]',
+      })
+      class Dir {
+        @HostBinding('attr.data-dir')
+        get text() {
+          return isFirstUpdatePass() ? 'first-update-pass' : 'post-update-pass';
+        }
+      }
+
+      @Component({
+        template: '<div [attr.data-comp]="text" dir></div>',
+      })
+      class Cmp {
+        get text() {
+          return isFirstUpdatePass() ? 'first-update-pass' : 'post-update-pass';
+        }
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [Cmp, Dir],
+      });
+      const fixture = TestBed.createComponent(Cmp);
+      fixture.detectChanges(false);
+      const element = fixture.nativeElement.querySelector('div')!;
+
+      assertAttrValues(element, 'first-update-pass');
+
+      fixture.detectChanges(false);
+
+      assertAttrValues(element, 'post-update-pass');
+    });
+
+    it('tView.firstUpdatePass should be applied immediately after the first embedded view is processed', () => {
+      @Directive({
+        selector: '[dir]',
+      })
+      class Dir {
+        @HostBinding('attr.data-dir')
+        get text() {
+          return isFirstUpdatePass() ? 'first-update-pass' : 'post-update-pass';
+        }
+      }
+
+      @Component({
+        template: `
           <div *ngFor="let item of items" dir [attr.data-comp]="text">
             ...
           </div>
-        `
-         })
-         class Cmp {
-           items = [1, 2, 3];
-           get text() {
-             return isFirstUpdatePass() ? 'first-update-pass' : 'post-update-pass';
-           }
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [Cmp, Dir],
-         });
-         const fixture = TestBed.createComponent(Cmp);
-         fixture.detectChanges(false);
-
-         const elements = fixture.nativeElement.querySelectorAll('div');
-         assertAttrValues(elements[0], 'first-update-pass');
-         assertAttrValues(elements[1], 'post-update-pass');
-         assertAttrValues(elements[2], 'post-update-pass');
-
-         fixture.detectChanges(false);
-         assertAttrValues(elements[0], 'post-update-pass');
-         assertAttrValues(elements[1], 'post-update-pass');
-         assertAttrValues(elements[2], 'post-update-pass');
-       });
+        `,
+      })
+      class Cmp {
+        items = [1, 2, 3];
+        get text() {
+          return isFirstUpdatePass() ? 'first-update-pass' : 'post-update-pass';
+        }
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [Cmp, Dir],
+      });
+      const fixture = TestBed.createComponent(Cmp);
+      fixture.detectChanges(false);
+
+      const elements = fixture.nativeElement.querySelectorAll('div');
+      assertAttrValues(elements[0], 'first-update-pass');
+      assertAttrValues(elements[1], 'post-update-pass');
+      assertAttrValues(elements[2], 'post-update-pass');
+
+      fixture.detectChanges(false);
+      assertAttrValues(elements[0], 'post-update-pass');
+      assertAttrValues(elements[1], 'post-update-pass');
+      assertAttrValues(elements[2], 'post-update-pass');
+    });
   });
 
   describe('animations', () => {
-    it('should apply triggers for a list of items when they are sorted and reSorted',
-       fakeAsync(() => {
-         interface Item {
-           value: any;
-           id: number;
-         }
-
-         @Component({
-           template: `
+    it('should apply triggers for a list of items when they are sorted and reSorted', fakeAsync(() => {
+      interface Item {
+        value: any;
+        id: number;
+      }
+
+      @Component({
+        template: `
           <div *ngIf="showWarningMessage; else listOfItems">
             Nooo!
           </div>
@@ -2462,98 +2448,91 @@ describe('acceptance integration tests', () => {
               {{ item.value }}
             </animation-comp>
           </ng-template>
-        `
-         })
-         class Cmp {
-           showWarningMessage = false;
-
-           items: Item[] = [
-             {value: 1, id: 1},
-             {value: 2, id: 2},
-             {value: 3, id: 3},
-             {value: 4, id: 4},
-             {value: 5, id: 5},
-           ];
-
-           itemTrackFn(value: Item) {
-             return value.id;
-           }
-         }
-
-         @Component({
-           selector: 'animation-comp',
-           animations: [
-             trigger(
-                 'host',
-                 [
-                   state('void', style({height: '0px'})),
-                   transition(
-                       '* => *',
-                       [
-                         animate('1s'),
-                       ]),
-                 ]),
-           ],
-           template: `
+        `,
+      })
+      class Cmp {
+        showWarningMessage = false;
+
+        items: Item[] = [
+          {value: 1, id: 1},
+          {value: 2, id: 2},
+          {value: 3, id: 3},
+          {value: 4, id: 4},
+          {value: 5, id: 5},
+        ];
+
+        itemTrackFn(value: Item) {
+          return value.id;
+        }
+      }
+
+      @Component({
+        selector: 'animation-comp',
+        animations: [
+          trigger('host', [
+            state('void', style({height: '0px'})),
+            transition('* => *', [animate('1s')]),
+          ]),
+        ],
+        template: `
                   <ng-content></ng-content>
-                `
-         })
-         class AnimationComp {
-           @HostBinding('@host') public hostState = '';
-
-           @HostListener('@host.start', ['$event'])
-           onLeaveStart(event: AnimationEvent) {
-             // we just want to register the listener
-           }
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [Cmp, AnimationComp],
-           providers: [{provide: AnimationDriver, useClass: MockAnimationDriver}],
-         });
-         const fixture = TestBed.createComponent(Cmp);
-         fixture.detectChanges();
-
-         let elements = queryAll(fixture.nativeElement, 'animation-comp');
-         expect(elements.length).toEqual(5);
-         expect(elements.map(e => e.textContent?.trim())).toEqual(['1', '2', '3', '4', '5']);
-
-         const items = fixture.componentInstance.items;
-         arraySwap(items, 2, 0);  // 3 2 1 4 5
-         arraySwap(items, 2, 1);  // 3 1 2 4 5
-         const first = items.shift()!;
-         items.push(first);  // 1 2 4 5 3
-         fixture.detectChanges();
-
-         elements = queryAll(fixture.nativeElement, 'animation-comp');
-         expect(elements.length).toEqual(5);
-         expect(elements.map(e => e.textContent?.trim())).toEqual(['1', '2', '4', '5', '3']);
-         completeAnimations();
-
-         fixture.componentInstance.showWarningMessage = true;
-         fixture.detectChanges();
-         completeAnimations();
-
-         elements = queryAll(fixture.nativeElement, 'animation-comp');
-         expect(elements.length).toEqual(0);
-         expect(fixture.nativeElement.textContent.trim()).toEqual('Nooo!');
-
-         fixture.componentInstance.showWarningMessage = false;
-         fixture.detectChanges();
-
-         elements = queryAll(fixture.nativeElement, 'animation-comp');
-         expect(elements.length).toEqual(5);
-       }));
-
-    it('should insert and remove views in the correct order when animations are present',
-       fakeAsync(() => {
-         @Component({
-           animations: [
-             trigger('root', [transition('* => *', [])]),
-             trigger('outer', [transition('* => *', [])]),
-             trigger('inner', [transition('* => *', [])]),
-           ],
-           template: `
+                `,
+      })
+      class AnimationComp {
+        @HostBinding('@host') public hostState = '';
+
+        @HostListener('@host.start', ['$event'])
+        onLeaveStart(event: AnimationEvent) {
+          // we just want to register the listener
+        }
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [Cmp, AnimationComp],
+        providers: [{provide: AnimationDriver, useClass: MockAnimationDriver}],
+      });
+      const fixture = TestBed.createComponent(Cmp);
+      fixture.detectChanges();
+
+      let elements = queryAll(fixture.nativeElement, 'animation-comp');
+      expect(elements.length).toEqual(5);
+      expect(elements.map((e) => e.textContent?.trim())).toEqual(['1', '2', '3', '4', '5']);
+
+      const items = fixture.componentInstance.items;
+      arraySwap(items, 2, 0); // 3 2 1 4 5
+      arraySwap(items, 2, 1); // 3 1 2 4 5
+      const first = items.shift()!;
+      items.push(first); // 1 2 4 5 3
+      fixture.detectChanges();
+
+      elements = queryAll(fixture.nativeElement, 'animation-comp');
+      expect(elements.length).toEqual(5);
+      expect(elements.map((e) => e.textContent?.trim())).toEqual(['1', '2', '4', '5', '3']);
+      completeAnimations();
+
+      fixture.componentInstance.showWarningMessage = true;
+      fixture.detectChanges();
+      completeAnimations();
+
+      elements = queryAll(fixture.nativeElement, 'animation-comp');
+      expect(elements.length).toEqual(0);
+      expect(fixture.nativeElement.textContent.trim()).toEqual('Nooo!');
+
+      fixture.componentInstance.showWarningMessage = false;
+      fixture.detectChanges();
+
+      elements = queryAll(fixture.nativeElement, 'animation-comp');
+      expect(elements.length).toEqual(5);
+    }));
+
+    it('should insert and remove views in the correct order when animations are present', fakeAsync(() => {
+      @Component({
+        animations: [
+          trigger('root', [transition('* => *', [])]),
+          trigger('outer', [transition('* => *', [])]),
+          trigger('inner', [transition('* => *', [])]),
+        ],
+        template: `
           <div *ngIf="showRoot" (@root.start)="track('root', $event)" @root>
             <div *ngIf="showIfContents; else innerCompList" (@outer.start)="track('outer', $event)" @outer>
               Nooo!
@@ -2565,81 +2544,79 @@ describe('acceptance integration tests', () => {
               </inner-comp>
             </ng-template>
           </div>
-        `
-         })
-         class Cmp {
-           showRoot = true;
-           showIfContents = true;
-           items = [1];
-           log: string[] = [];
-
-           track(name: string, event: AnimationEvent) {
-             this.log.push(name);
-           }
-         }
-
-         @Component({
-           selector: 'inner-comp',
-           animations: [
-             trigger('host', [transition('* => *', [])]),
-           ],
-           template: `
+        `,
+      })
+      class Cmp {
+        showRoot = true;
+        showIfContents = true;
+        items = [1];
+        log: string[] = [];
+
+        track(name: string, event: AnimationEvent) {
+          this.log.push(name);
+        }
+      }
+
+      @Component({
+        selector: 'inner-comp',
+        animations: [trigger('host', [transition('* => *', [])])],
+        template: `
                   <ng-content></ng-content>
-                `
-         })
-         class InnerComp {
-           @HostBinding('@host') public hostState = '';
-
-           constructor(@Inject(Cmp) private parent: Cmp) {}
-
-           @HostListener('@host.start', ['$event'])
-           onLeaveStart(event: AnimationEvent) {
-             this.parent.log.push('host');
-           }
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [Cmp, InnerComp],
-           providers: [{provide: AnimationDriver, useClass: MockAnimationDriver}],
-         });
-         const fixture = TestBed.createComponent(Cmp);
-         fixture.detectChanges();
-         completeAnimations();
-         const comp = fixture.componentInstance;
-         expect(comp.log).toEqual([
-           'root',   // insertion of the inner-comp content
-           'outer',  // insertion of the default ngIf
-         ]);
-
-         comp.log = [];
-         comp.showIfContents = false;
-         fixture.detectChanges();
-         completeAnimations();
-
-         expect(comp.log).toEqual([
-           'host',   // insertion of the inner-comp content
-           'outer',  // insertion of the template into the ngIf
-           'inner'   // insertion of the inner comp element
-         ]);
-
-         comp.log = [];
-         comp.showRoot = false;
-         fixture.detectChanges();
-         completeAnimations();
-
-         expect(comp.log).toEqual([
-           'root',  // removal the root div container
-           'host',  // removal of the inner-comp content
-           'inner'  // removal of the inner comp element
-         ]);
-       }));
+                `,
+      })
+      class InnerComp {
+        @HostBinding('@host') public hostState = '';
+
+        constructor(@Inject(Cmp) private parent: Cmp) {}
+
+        @HostListener('@host.start', ['$event'])
+        onLeaveStart(event: AnimationEvent) {
+          this.parent.log.push('host');
+        }
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [Cmp, InnerComp],
+        providers: [{provide: AnimationDriver, useClass: MockAnimationDriver}],
+      });
+      const fixture = TestBed.createComponent(Cmp);
+      fixture.detectChanges();
+      completeAnimations();
+      const comp = fixture.componentInstance;
+      expect(comp.log).toEqual([
+        'root', // insertion of the inner-comp content
+        'outer', // insertion of the default ngIf
+      ]);
+
+      comp.log = [];
+      comp.showIfContents = false;
+      fixture.detectChanges();
+      completeAnimations();
+
+      expect(comp.log).toEqual([
+        'host', // insertion of the inner-comp content
+        'outer', // insertion of the template into the ngIf
+        'inner', // insertion of the inner comp element
+      ]);
+
+      comp.log = [];
+      comp.showRoot = false;
+      fixture.detectChanges();
+      completeAnimations();
+
+      expect(comp.log).toEqual([
+        'root', // removal the root div container
+        'host', // removal of the inner-comp content
+        'inner', // removal of the inner comp element
+      ]);
+    }));
   });
 });
 
 function completeAnimations() {
   flushMicrotasks();
   const log = MockAnimationDriver.log as MockAnimationPlayer[];
-  log.forEach(player => player.finish());
+  log.forEach((player) => player.finish());
   flushMicrotasks();
 }
 
diff --git a/packages/core/test/acceptance/lifecycle_spec.ts b/packages/core/test/acceptance/lifecycle_spec.ts
index 538dfbd1abee9..c8b031aa843e1 100644
--- a/packages/core/test/acceptance/lifecycle_spec.ts
+++ b/packages/core/test/acceptance/lifecycle_spec.ts
@@ -7,7 +7,23 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {AfterViewInit, ChangeDetectorRef, Component, ContentChildren, Directive, DoCheck, Input, NgModule, OnChanges, QueryList, SimpleChange, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  Directive,
+  DoCheck,
+  Input,
+  NgModule,
+  OnChanges,
+  QueryList,
+  SimpleChange,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
@@ -29,8 +45,10 @@ describe('onChanges', () => {
       }
     }
 
-    @Component(
-        {selector: 'app-comp', template: '<child-comp [a]="a" [b]="b" [c]="c"></child-comp>'})
+    @Component({
+      selector: 'app-comp',
+      template: '<child-comp [a]="a" [b]="b" [c]="c"></child-comp>',
+    })
     class AppComp {
       a = 0;
       b = 0;
@@ -89,27 +107,30 @@ describe('onChanges', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    expect(events).toEqual([{
-      name: 'comp',
-      changes: {
-        val1: new SimpleChange(undefined, 'a2', true),
-        val2: new SimpleChange(undefined, 'b2', true),
-      }
-    }]);
+    expect(events).toEqual([
+      {
+        name: 'comp',
+        changes: {
+          val1: new SimpleChange(undefined, 'a2', true),
+          val2: new SimpleChange(undefined, 'b2', true),
+        },
+      },
+    ]);
 
     events.length = 0;
     fixture.componentInstance.val1 = 'a3';
     fixture.componentInstance.val2 = 'b3';
     fixture.detectChanges();
 
-
-    expect(events).toEqual([{
-      name: 'comp',
-      changes: {
-        val1: new SimpleChange('a2', 'a3', false),
-        val2: new SimpleChange('b2', 'b3', false),
-      }
-    }]);
+    expect(events).toEqual([
+      {
+        name: 'comp',
+        changes: {
+          val1: new SimpleChange('a2', 'a3', false),
+          val2: new SimpleChange('b2', 'b3', false),
+        },
+      },
+    ]);
   });
 
   it('should call parent onChanges before child onChanges', () => {
@@ -155,14 +176,14 @@ describe('onChanges', () => {
         name: 'parent',
         changes: {
           val: new SimpleChange(undefined, 'foo', true),
-        }
+        },
       },
       {
         name: 'child',
         changes: {
           val: new SimpleChange(undefined, 'foo', true),
-        }
-      }
+        },
+      },
     ]);
 
     events.length = 0;
@@ -174,14 +195,14 @@ describe('onChanges', () => {
         name: 'parent',
         changes: {
           val: new SimpleChange('foo', 'bar', false),
-        }
+        },
       },
       {
         name: 'child',
         changes: {
           val: new SimpleChange('foo', 'bar', false),
-        }
-      }
+        },
+      },
     ]);
   });
 
@@ -220,7 +241,7 @@ describe('onChanges', () => {
       template: `
         <parent name="1" [val]="val"></parent>
         <parent name="2" [val]="val"></parent>
-      `
+      `,
     })
     class App {
       val = 'foo';
@@ -238,28 +259,28 @@ describe('onChanges', () => {
         changes: {
           name: new SimpleChange(undefined, '1', true),
           val: new SimpleChange(undefined, 'foo', true),
-        }
+        },
       },
       {
         name: 'parent 2',
         changes: {
           name: new SimpleChange(undefined, '2', true),
           val: new SimpleChange(undefined, 'foo', true),
-        }
+        },
       },
       {
         name: 'child 1',
         changes: {
           name: new SimpleChange(undefined, '1', true),
           val: new SimpleChange(undefined, 'foo', true),
-        }
+        },
       },
       {
         name: 'child 2',
         changes: {
           name: new SimpleChange(undefined, '2', true),
           val: new SimpleChange(undefined, 'foo', true),
-        }
+        },
       },
     ]);
 
@@ -272,25 +293,25 @@ describe('onChanges', () => {
         name: 'parent 1',
         changes: {
           val: new SimpleChange('foo', 'bar', false),
-        }
+        },
       },
       {
         name: 'parent 2',
         changes: {
           val: new SimpleChange('foo', 'bar', false),
-        }
+        },
       },
       {
         name: 'child 1',
         changes: {
           val: new SimpleChange('foo', 'bar', false),
-        }
+        },
       },
       {
         name: 'child 2',
         changes: {
           val: new SimpleChange('foo', 'bar', false),
-        }
+        },
       },
     ]);
   });
@@ -324,12 +345,14 @@ describe('onChanges', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    expect(events).toEqual([{
-      name: 'comp',
-      changes: {
-        val: new SimpleChange(undefined, 'a', true),
-      }
-    }]);
+    expect(events).toEqual([
+      {
+        name: 'comp',
+        changes: {
+          val: new SimpleChange(undefined, 'a', true),
+        },
+      },
+    ]);
 
     events.length = 0;
     fixture.componentInstance.show = false;
@@ -341,12 +364,14 @@ describe('onChanges', () => {
     fixture.componentInstance.show = true;
     fixture.detectChanges();
 
-    expect(events).toEqual([{
-      name: 'comp',
-      changes: {
-        val: new SimpleChange(undefined, 'b', true),
-      }
-    }]);
+    expect(events).toEqual([
+      {
+        name: 'comp',
+        changes: {
+          val: new SimpleChange(undefined, 'b', true),
+        },
+      },
+    ]);
   });
 
   it('should call onChanges in hosts before their content children', () => {
@@ -393,13 +418,13 @@ describe('onChanges', () => {
         name: 'comp',
         changes: {
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'projected',
         changes: {
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
     ]);
 
@@ -412,13 +437,13 @@ describe('onChanges', () => {
         name: 'comp',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'projected',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
     ]);
   });
@@ -479,28 +504,28 @@ describe('onChanges', () => {
         changes: {
           name: new SimpleChange(undefined, '1', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'projected 1',
         changes: {
           name: new SimpleChange(undefined, '1', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'comp 2',
         changes: {
           name: new SimpleChange(undefined, '2', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'projected 2',
         changes: {
           name: new SimpleChange(undefined, '2', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
     ]);
 
@@ -513,25 +538,25 @@ describe('onChanges', () => {
         name: 'comp 1',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'projected 1',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'comp 2',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'projected 2',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
     ]);
   });
@@ -580,14 +605,14 @@ describe('onChanges', () => {
         name: 'comp',
         changes: {
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'dir',
         changes: {
           dir: new SimpleChange(undefined, 'a', true),
-        }
-      }
+        },
+      },
     ]);
 
     events.length = 0;
@@ -599,14 +624,14 @@ describe('onChanges', () => {
         name: 'comp',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'dir',
         changes: {
           dir: new SimpleChange('a', 'b', false),
-        }
-      }
+        },
+      },
     ]);
   });
 
@@ -656,14 +681,14 @@ describe('onChanges', () => {
         name: 'dir',
         changes: {
           dir: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'comp',
         changes: {
           val: new SimpleChange(undefined, 'a', true),
-        }
-      }
+        },
+      },
     ]);
 
     events.length = 0;
@@ -675,14 +700,14 @@ describe('onChanges', () => {
         name: 'dir',
         changes: {
           dir: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'comp',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
-      }
+        },
+      },
     ]);
   });
 
@@ -731,18 +756,17 @@ describe('onChanges', () => {
         name: 'dir',
         changes: {
           dir: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'injectionDir',
         changes: {
           injectionDir: new SimpleChange(undefined, 'a', true),
-        }
-      }
+        },
+      },
     ]);
   });
 
-
   it('should be called on directives on an element', () => {
     const events: any[] = [];
 
@@ -771,25 +795,29 @@ describe('onChanges', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    expect(events).toEqual([{
-      name: 'dir',
-      changes: {
-        dir: new SimpleChange(undefined, 'a', true),
-        val: new SimpleChange(undefined, 'b', true),
-      }
-    }]);
+    expect(events).toEqual([
+      {
+        name: 'dir',
+        changes: {
+          dir: new SimpleChange(undefined, 'a', true),
+          val: new SimpleChange(undefined, 'b', true),
+        },
+      },
+    ]);
 
     events.length = 0;
     fixture.componentInstance.val1 = 'a1';
     fixture.componentInstance.val2 = 'b1';
     fixture.detectChanges();
-    expect(events).toEqual([{
-      name: 'dir',
-      changes: {
-        dir: new SimpleChange('a', 'a1', false),
-        val: new SimpleChange('b', 'b1', false),
-      }
-    }]);
+    expect(events).toEqual([
+      {
+        name: 'dir',
+        changes: {
+          dir: new SimpleChange('a', 'a1', false),
+          val: new SimpleChange('b', 'b1', false),
+        },
+      },
+    ]);
   });
 
   it('should call onChanges properly in for loop', () => {
@@ -814,7 +842,7 @@ describe('onChanges', () => {
       <comp name="0" [val]="val"></comp>
       <comp *ngFor="let number of numbers" [name]="number" [val]="val"></comp>
       <comp name="1" [val]="val"></comp>
-      `
+      `,
     })
     class App {
       val = 'a';
@@ -835,36 +863,36 @@ describe('onChanges', () => {
         changes: {
           name: new SimpleChange(undefined, '0', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'comp 1',
         changes: {
           name: new SimpleChange(undefined, '1', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'comp 2',
         changes: {
           name: new SimpleChange(undefined, '2', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'comp 3',
         changes: {
           name: new SimpleChange(undefined, '3', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'comp 4',
         changes: {
           name: new SimpleChange(undefined, '4', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
-      }
+        },
+      },
     ]);
 
     events.length = 0;
@@ -876,32 +904,32 @@ describe('onChanges', () => {
         name: 'comp 0',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'comp 1',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'comp 2',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'comp 3',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'comp 4',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
-      }
+        },
+      },
     ]);
   });
 
@@ -941,7 +969,7 @@ describe('onChanges', () => {
         <parent name="0" [val]="val"></parent>
         <parent *ngFor="let number of numbers" [name]="number" [val]="val"></parent>
         <parent name="1" [val]="val"></parent>
-      `
+      `,
     })
     class App {
       val = 'a';
@@ -961,70 +989,70 @@ describe('onChanges', () => {
         changes: {
           name: new SimpleChange(undefined, '0', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'parent 1',
         changes: {
           name: new SimpleChange(undefined, '1', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'parent 2',
         changes: {
           name: new SimpleChange(undefined, '2', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'child of parent 2',
         changes: {
           name: new SimpleChange(undefined, '2', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'parent 3',
         changes: {
           name: new SimpleChange(undefined, '3', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'child of parent 3',
         changes: {
           name: new SimpleChange(undefined, '3', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'parent 4',
         changes: {
           name: new SimpleChange(undefined, '4', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'child of parent 4',
         changes: {
           name: new SimpleChange(undefined, '4', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'child of parent 0',
         changes: {
           name: new SimpleChange(undefined, '0', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
       {
         name: 'child of parent 1',
         changes: {
           name: new SimpleChange(undefined, '1', true),
           val: new SimpleChange(undefined, 'a', true),
-        }
+        },
       },
     ]);
 
@@ -1037,61 +1065,61 @@ describe('onChanges', () => {
         name: 'parent 0',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'parent 1',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'parent 2',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'child of parent 2',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'parent 3',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'child of parent 3',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'parent 4',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'child of parent 4',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'child of parent 0',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
       {
         name: 'child of parent 1',
         changes: {
           val: new SimpleChange('a', 'b', false),
-        }
+        },
       },
     ]);
   });
@@ -1127,8 +1155,7 @@ describe('meta-programming', () => {
     const events: any[] = [];
 
     @Component({template: `<child name="value"></child>`})
-    class App {
-    }
+    class App {}
 
     @Component({selector: 'child', template: `empty`})
     class Child {
@@ -1158,62 +1185,71 @@ describe('meta-programming', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(events).toEqual([
-      'ngOnChanges', 'onInit', 'ngDoCheck', 'ngAfterContentInit', 'ngAfterContentChecked',
-      'ngAfterViewInit', 'ngAfterViewChecked', 'ngOnDestroy'
+      'ngOnChanges',
+      'onInit',
+      'ngDoCheck',
+      'ngAfterContentInit',
+      'ngAfterContentChecked',
+      'ngAfterViewInit',
+      'ngAfterViewChecked',
+      'ngOnDestroy',
     ]);
   });
 
-  it('should allow adding lifecycle hook methods with inheritance any time before first instance creation',
-     () => {
-       const events: any[] = [];
-
-       @Component({template: `<child name="value"></child>`})
-       class App {
-       }
-
-       class BaseChild {}
-
-       @Component({selector: 'child', template: `empty`})
-       class Child extends BaseChild {
-         @Input() name: string = '';
-       }
-
-       // These are defined on the base class
-       const BasePrototype = BaseChild.prototype as any;
-       BasePrototype.ngOnInit = () => events.push('onInit');
-       BasePrototype.ngOnChanges = (e: SimpleChanges) => {
-         const name = e['name'];
-         expect(name.previousValue).toEqual(undefined);
-         expect(name.currentValue).toEqual('value');
-         expect(name.firstChange).toEqual(true);
-         events.push('ngOnChanges');
-       };
-
-       // These will be overwritten later
-       BasePrototype.ngDoCheck = () => events.push('Expected to be overbidden');
-       BasePrototype.ngAfterContentInit = () => events.push('Expected to be overbidden');
-
-
-       // These are define on the concrete class
-       const ChildPrototype = Child.prototype as any;
-       ChildPrototype.ngDoCheck = () => events.push('ngDoCheck');
-       ChildPrototype.ngAfterContentInit = () => events.push('ngAfterContentInit');
-       ChildPrototype.ngAfterContentChecked = () => events.push('ngAfterContentChecked');
-       ChildPrototype.ngAfterViewInit = () => events.push('ngAfterViewInit');
-       ChildPrototype.ngAfterViewChecked = () => events.push('ngAfterViewChecked');
-       ChildPrototype.ngOnDestroy = () => events.push('ngOnDestroy');
-
-       TestBed.configureTestingModule({
-         declarations: [App, Child],
-       });
-       const fixture = TestBed.createComponent(App);
-       fixture.detectChanges();
-       fixture.destroy();
-       expect(events).toEqual([
-         'ngOnChanges', 'onInit', 'ngDoCheck', 'ngAfterContentInit', 'ngAfterContentChecked',
-         'ngAfterViewInit', 'ngAfterViewChecked', 'ngOnDestroy'
-       ]);
-     });
+  it('should allow adding lifecycle hook methods with inheritance any time before first instance creation', () => {
+    const events: any[] = [];
+
+    @Component({template: `<child name="value"></child>`})
+    class App {}
+
+    class BaseChild {}
+
+    @Component({selector: 'child', template: `empty`})
+    class Child extends BaseChild {
+      @Input() name: string = '';
+    }
+
+    // These are defined on the base class
+    const BasePrototype = BaseChild.prototype as any;
+    BasePrototype.ngOnInit = () => events.push('onInit');
+    BasePrototype.ngOnChanges = (e: SimpleChanges) => {
+      const name = e['name'];
+      expect(name.previousValue).toEqual(undefined);
+      expect(name.currentValue).toEqual('value');
+      expect(name.firstChange).toEqual(true);
+      events.push('ngOnChanges');
+    };
+
+    // These will be overwritten later
+    BasePrototype.ngDoCheck = () => events.push('Expected to be overbidden');
+    BasePrototype.ngAfterContentInit = () => events.push('Expected to be overbidden');
+
+    // These are define on the concrete class
+    const ChildPrototype = Child.prototype as any;
+    ChildPrototype.ngDoCheck = () => events.push('ngDoCheck');
+    ChildPrototype.ngAfterContentInit = () => events.push('ngAfterContentInit');
+    ChildPrototype.ngAfterContentChecked = () => events.push('ngAfterContentChecked');
+    ChildPrototype.ngAfterViewInit = () => events.push('ngAfterViewInit');
+    ChildPrototype.ngAfterViewChecked = () => events.push('ngAfterViewChecked');
+    ChildPrototype.ngOnDestroy = () => events.push('ngOnDestroy');
+
+    TestBed.configureTestingModule({
+      declarations: [App, Child],
+    });
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+    fixture.destroy();
+    expect(events).toEqual([
+      'ngOnChanges',
+      'onInit',
+      'ngDoCheck',
+      'ngAfterContentInit',
+      'ngAfterContentChecked',
+      'ngAfterViewInit',
+      'ngAfterViewChecked',
+      'ngOnDestroy',
+    ]);
+  });
 });
 
 it('should call all hooks in correct order when several directives on same node', () => {
@@ -1266,8 +1302,7 @@ it('should call all hooks in correct order when several directives on same node'
   }
 
   @Component({selector: 'app-comp', template: '<div [a]="1" [b]="2" [c]="3"></div>'})
-  class AppComp {
-  }
+  class AppComp {}
 
   TestBed.configureTestingModule({declarations: [AppComp, DirA, DirB, DirC]});
   const fixture = TestBed.createComponent(AppComp);
@@ -1294,7 +1329,7 @@ it('should call all hooks in correct order when several directives on same node'
     'afterViewInit2',
     'afterViewChecked2',
     'afterViewInit3',
-    'afterViewChecked3'
+    'afterViewChecked3',
   ]);
 });
 
@@ -1333,7 +1368,7 @@ it('should call hooks after setting directives inputs', () => {
 
   @Component({
     selector: 'app-comp',
-    template: '<div [a]="id" [b]="id" [c]="id"></div><div [a]="id" [b]="id" [c]="id"></div>'
+    template: '<div [a]="id" [b]="id" [c]="id"></div><div [a]="id" [b]="id" [c]="id"></div>',
   })
   class AppComp {
     id = 0;
@@ -1344,8 +1379,16 @@ it('should call hooks after setting directives inputs', () => {
   fixture.detectChanges();
 
   expect(log).toEqual([
-    'onInitA0', 'onInitB0', 'doCheckB0', 'onInitC0', 'doCheckC0', 'onInitA0', 'onInitB0',
-    'doCheckB0', 'onInitC0', 'doCheckC0'
+    'onInitA0',
+    'onInitB0',
+    'doCheckB0',
+    'onInitC0',
+    'doCheckC0',
+    'onInitA0',
+    'onInitB0',
+    'doCheckB0',
+    'onInitC0',
+    'doCheckC0',
   ]);
 
   log = [];
@@ -1483,10 +1526,9 @@ describe('onInit', () => {
       template: `
         <parent-comp name="1"></parent-comp>
         <parent-comp name="2"></parent-comp>
-      `
+      `,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({
       declarations: [App, ParentComp, ChildComp],
@@ -1510,7 +1552,7 @@ describe('onInit', () => {
     @Component({
       template: `
         <div *ngIf="show"><my-comp></my-comp></div>
-      `
+      `,
     })
     class App {
       show = true;
@@ -1550,8 +1592,7 @@ describe('onInit', () => {
         <my-comp></my-comp>
       `,
     })
-    class DynamicComp {
-    }
+    class DynamicComp {}
 
     @Component({
       template: `
@@ -1606,7 +1647,7 @@ describe('onInit', () => {
         <comp>
           <projected></projected>
         </comp>
-      `
+      `,
     })
     class App {
       ngOnInit() {
@@ -1623,7 +1664,6 @@ describe('onInit', () => {
     expect(initialized).toEqual(['app', 'comp', 'projected']);
   });
 
-
   it('should call onInit in host and its content children before next host', () => {
     const initialized: string[] = [];
 
@@ -1659,7 +1699,7 @@ describe('onInit', () => {
         <comp name="2">
           <projected name="2"></projected>
         </comp>
-      `
+      `,
     })
     class App {
       ngOnInit() {
@@ -1706,7 +1746,7 @@ describe('onInit', () => {
       template: `
         <comp name="1" dir dir-name="1"></comp>
         <comp name="2" dir dir-name="2"></comp>
-      `
+      `,
     })
     class App {
       ngOnInit() {
@@ -1802,7 +1842,7 @@ describe('onInit', () => {
       template: `
         <comp name="1" dir dir-name="1"></comp>
         <comp name="2" dir dir-name="2"></comp>
-      `
+      `,
     })
     class App {
       ngOnInit() {
@@ -1837,7 +1877,7 @@ describe('onInit', () => {
       template: `
         <p name="1" dir dir-name="1"></p>
         <p name="2" dir dir-name="2"></p>
-      `
+      `,
     })
     class App {
       ngOnInit() {
@@ -1854,7 +1894,6 @@ describe('onInit', () => {
     expect(initialized).toEqual(['app', 'dir 1', 'dir 2']);
   });
 
-
   it('should call onInit properly in for loop', () => {
     const initialized: string[] = [];
 
@@ -1875,7 +1914,7 @@ describe('onInit', () => {
         <comp name="0"></comp>
         <comp *ngFor="let number of numbers" [name]="number"></comp>
         <comp name="1"></comp>
-      `
+      `,
     })
     class App {
       numbers = [2, 3, 4, 5, 6];
@@ -1889,7 +1928,13 @@ describe('onInit', () => {
     fixture.detectChanges();
 
     expect(initialized).toEqual([
-      'comp 0', 'comp 1', 'comp 2', 'comp 3', 'comp 4', 'comp 5', 'comp 6'
+      'comp 0',
+      'comp 1',
+      'comp 2',
+      'comp 3',
+      'comp 4',
+      'comp 5',
+      'comp 6',
     ]);
   });
 
@@ -1922,7 +1967,7 @@ describe('onInit', () => {
         <parent name="0"></parent>
         <parent *ngFor="let number of numbers" [name]="number"></parent>
         <parent name="1"></parent>
-      `
+      `,
     })
     class App {
       numbers = [2, 3, 4, 5, 6];
@@ -2073,7 +2118,7 @@ describe('doCheck', () => {
       template: `
       <comp name="1" dir="1"></comp>
       <comp name="2" dir="2"></comp>
-    `
+    `,
     })
     class App {
       ngDoCheck() {
@@ -2121,7 +2166,7 @@ describe('doCheck', () => {
       template: `
       <comp name="1" dir="1"></comp>
       <comp name="2" dir="2"></comp>
-    `
+    `,
     })
     class App {
       ngDoCheck() {
@@ -2203,7 +2248,7 @@ describe('doCheck', () => {
       template: `
         <p dir="1"></p>
         <p dir="2"></p>
-      `
+      `,
     })
     class App {
       ngDoCheck() {
@@ -2235,8 +2280,7 @@ describe('afterContentinit', () => {
       }
     }
     @Component({template: `<comp></comp>`})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({
       declarations: [App, Comp],
@@ -2313,9 +2357,11 @@ describe('afterContentinit', () => {
     fixture.componentInstance.show = true;
     fixture.detectChanges();
 
-
-    expect(events).toEqual(
-        ['app afterContentInit', 'comp afterContentInit', 'comp afterContentInit']);
+    expect(events).toEqual([
+      'app afterContentInit',
+      'comp afterContentInit',
+      'comp afterContentInit',
+    ]);
   });
 
   it('should be called in parents before children', () => {
@@ -2349,7 +2395,7 @@ describe('afterContentinit', () => {
       template: `
       <parent name="1"></parent>
       <parent name="2"></parent>
-      `
+      `,
     })
     class App {
       ngAfterContentInit() {
@@ -2363,8 +2409,13 @@ describe('afterContentinit', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    expect(events).toEqual(
-        ['app', 'parent 1', 'parent 2', 'child of parent 1', 'child of parent 2']);
+    expect(events).toEqual([
+      'app',
+      'parent 1',
+      'parent 2',
+      'child of parent 1',
+      'child of parent 2',
+    ]);
   });
 
   it('should be called in projected components before their hosts', () => {
@@ -2416,7 +2467,7 @@ describe('afterContentinit', () => {
           <projected name="3"></projected>
           <projected name="4"></projected>
         </comp>
-      `
+      `,
     })
     class App {
       ngAfterContentInit() {
@@ -2471,7 +2522,7 @@ describe('afterContentinit', () => {
         <comp name="4"></comp>
         <comp *ngFor="let number of numbers" [name]="number"></comp>
         <comp name="5"></comp>
-      `
+      `,
     })
     class App {
       numbers = [0, 1, 2, 3];
@@ -2523,7 +2574,7 @@ describe('afterContentinit', () => {
         <parent name="4"></parent>
         <parent *ngFor="let number of numbers" [name]="number"></parent>
         <parent name="5"></parent>
-      `
+      `,
     })
     class App {
       numbers = [0, 1, 2, 3];
@@ -2588,7 +2639,7 @@ describe('afterContentinit', () => {
       template: `
         <comp name="1" dir="1"></comp>
         <comp name="2" dir="2"></comp>
-      `
+      `,
     })
     class App {
       ngAfterContentInit() {
@@ -2602,13 +2653,7 @@ describe('afterContentinit', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    expect(events).toEqual([
-      'app',
-      'comp 1',
-      'dir 1',
-      'comp 2',
-      'dir 2',
-    ]);
+    expect(events).toEqual(['app', 'comp 1', 'dir 1', 'comp 2', 'dir 2']);
   });
 });
 
@@ -2671,8 +2716,7 @@ describe('afterViewInit', () => {
     }
 
     @Component({template: `<comp></comp>`})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({
       declarations: [App, Comp],
@@ -2784,7 +2828,7 @@ describe('afterViewInit', () => {
       template: `
         <parent name="1"></parent>
         <parent name="2"></parent>
-      `
+      `,
     })
     class App {
       ngAfterViewInit() {
@@ -2838,7 +2882,7 @@ describe('afterViewInit', () => {
       template: `
         <comp name="1"><projected name="1"></projected></comp>
         <comp name="2"><projected name="2"></projected></comp>
-      `
+      `,
     })
     class App {
       ngAfterViewInit() {
@@ -2852,14 +2896,7 @@ describe('afterViewInit', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-
-    expect(events).toEqual([
-      'projected 1',
-      'comp 1',
-      'projected 2',
-      'comp 2',
-      'app',
-    ]);
+    expect(events).toEqual(['projected 1', 'comp 1', 'projected 2', 'comp 2', 'app']);
   });
 
   it('should call afterViewInit in content children and host before next host', () => {
@@ -2905,7 +2942,7 @@ describe('afterViewInit', () => {
       template: `
         <comp name="1"><projected name="1"></projected></comp>
         <comp name="2"><projected name="2"></projected></comp>
-      `
+      `,
     })
     class App {
       ngAfterViewInit() {
@@ -2950,7 +2987,7 @@ describe('afterViewInit', () => {
         <comp name="4"></comp>
         <comp *ngFor="let number of numbers" [name]="number"></comp>
         <comp name="5"></comp>
-      `
+      `,
     })
     class App {
       numbers = [0, 1, 2, 3];
@@ -2967,15 +3004,7 @@ describe('afterViewInit', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    expect(events).toEqual([
-      'comp 0',
-      'comp 1',
-      'comp 2',
-      'comp 3',
-      'comp 4',
-      'comp 5',
-      'app',
-    ]);
+    expect(events).toEqual(['comp 0', 'comp 1', 'comp 2', 'comp 3', 'comp 4', 'comp 5', 'app']);
   });
 
   it('should be called in correct order with for loops with children', () => {
@@ -3009,7 +3038,7 @@ describe('afterViewInit', () => {
         <parent name="4"></parent>
         <parent *ngFor="let number of numbers" [name]="number"></parent>
         <parent name="5"></parent>
-      `
+      `,
     })
     class App {
       numbers = [0, 1, 2, 3];
@@ -3073,7 +3102,7 @@ describe('afterViewInit', () => {
       template: `
         <comp name="1" dir="1"></comp>
         <comp name="2" dir="2"></comp>
-      `
+      `,
     })
     class App {
       ngAfterViewInit() {
@@ -3087,13 +3116,7 @@ describe('afterViewInit', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    expect(events).toEqual([
-      'comp 1',
-      'dir 1',
-      'comp 2',
-      'dir 2',
-      'app',
-    ]);
+    expect(events).toEqual(['comp 1', 'dir 1', 'comp 2', 'dir 2', 'app']);
   });
 
   it('should be called on directives on an element', () => {
@@ -3114,7 +3137,7 @@ describe('afterViewInit', () => {
       template: `
         <div dir="1"></div>
         <div dir="2"></div>
-      `
+      `,
     })
     class App {
       ngAfterViewInit() {
@@ -3128,11 +3151,7 @@ describe('afterViewInit', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    expect(events).toEqual([
-      'dir 1',
-      'dir 2',
-      'app',
-    ]);
+    expect(events).toEqual(['dir 1', 'dir 2', 'app']);
   });
 });
 
@@ -3151,8 +3170,7 @@ describe('afterViewChecked', () => {
     }
 
     @Component({template: `<comp></comp>`})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({
       declarations: [App, Comp],
@@ -3257,7 +3275,7 @@ describe('afterViewChecked', () => {
       <parent name="4"></parent>
       <parent *ngFor="let number of numbers" [name]="number"></parent>
       <parent name="5"></parent>
-      `
+      `,
     })
     class App {
       numbers = [0, 1, 2, 3];
@@ -3320,7 +3338,7 @@ describe('afterViewChecked', () => {
       template: `
       <comp name="1" dir="1"></comp>
       <comp name="2" dir="2"></comp>
-    `
+    `,
     })
     class App {
       ngAfterViewChecked() {
@@ -3334,13 +3352,7 @@ describe('afterViewChecked', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    expect(events).toEqual([
-      'comp 1',
-      'dir 1',
-      'comp 2',
-      'dir 2',
-      'app',
-    ]);
+    expect(events).toEqual(['comp 1', 'dir 1', 'comp 2', 'dir 2', 'app']);
   });
 
   it('should be called on directives on an element', () => {
@@ -3361,7 +3373,7 @@ describe('afterViewChecked', () => {
       template: `
       <div dir="1"></div>
       <div dir="2"></div>
-    `
+    `,
     })
     class App {
       ngAfterViewChecked() {
@@ -3375,11 +3387,7 @@ describe('afterViewChecked', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    expect(events).toEqual([
-      'dir 1',
-      'dir 2',
-      'app',
-    ]);
+    expect(events).toEqual(['dir 1', 'dir 2', 'app']);
   });
 });
 
@@ -3450,7 +3458,7 @@ describe('onDestroy', () => {
           <comp name="1"></comp>
           <comp name="2"></comp>
         </div>
-      `
+      `,
     })
     class App {
       show = true;
@@ -3503,7 +3511,7 @@ describe('onDestroy', () => {
           <parent name="1"></parent>
           <parent name="2"></parent>
         </div>
-      `
+      `,
     })
     class App {
       show = true;
@@ -3521,12 +3529,7 @@ describe('onDestroy', () => {
     fixture.componentInstance.show = false;
     fixture.detectChanges();
 
-    expect(events).toEqual([
-      'child of parent 1',
-      'child of parent 2',
-      'parent 1',
-      'parent 2',
-    ]);
+    expect(events).toEqual(['child of parent 1', 'child of parent 2', 'parent 1', 'parent 2']);
   });
 
   it('should be called bottom up with children nested 2 levels deep', () => {
@@ -3572,7 +3575,7 @@ describe('onDestroy', () => {
           <grandparent name="1"></grandparent>
           <grandparent name="2"></grandparent>
         </div>
-      `
+      `,
     })
     class App {
       show = true;
@@ -3637,7 +3640,7 @@ describe('onDestroy', () => {
             <projected name="2"></projected>
           </comp>
         </div>
-      `
+      `,
     })
     class App {
       show = true;
@@ -3654,15 +3657,9 @@ describe('onDestroy', () => {
     fixture.componentInstance.show = false;
     fixture.detectChanges();
 
-    expect(events).toEqual([
-      'projected 1',
-      'comp 1',
-      'projected 2',
-      'comp 2',
-    ]);
+    expect(events).toEqual(['projected 1', 'comp 1', 'projected 2', 'comp 2']);
   });
 
-
   it('should be called in consistent order if views are removed and re-added', () => {
     const events: string[] = [];
 
@@ -3685,7 +3682,7 @@ describe('onDestroy', () => {
         <comp *ngIf="showMiddle" name="2"></comp>
         <comp name="3"></comp>
       </div>
-      `
+      `,
     })
     class App {
       showAll = true;
@@ -3707,31 +3704,16 @@ describe('onDestroy', () => {
 
     fixture.componentInstance.showAll = false;
     fixture.detectChanges();
-    expect(events).toEqual([
-      'comp 2',
-      'comp 1',
-      'comp 3',
-    ]);
+    expect(events).toEqual(['comp 2', 'comp 1', 'comp 3']);
 
     fixture.componentInstance.showAll = true;
     fixture.componentInstance.showMiddle = true;
     fixture.detectChanges();
-    expect(events).toEqual([
-      'comp 2',
-      'comp 1',
-      'comp 3',
-    ]);
+    expect(events).toEqual(['comp 2', 'comp 1', 'comp 3']);
 
     fixture.componentInstance.showAll = false;
     fixture.detectChanges();
-    expect(events).toEqual([
-      'comp 2',
-      'comp 1',
-      'comp 3',
-      'comp 2',
-      'comp 1',
-      'comp 3',
-    ]);
+    expect(events).toEqual(['comp 2', 'comp 1', 'comp 3', 'comp 2', 'comp 1', 'comp 3']);
   });
 
   it('should be called on every iteration of a destroyed for loop', () => {
@@ -3754,7 +3736,7 @@ describe('onDestroy', () => {
         <div *ngIf="show">
           <comp *ngFor="let number of numbers" [name]="number"></comp>
         </div>
-      `
+      `,
     })
     class App {
       show = true;
@@ -3772,32 +3754,16 @@ describe('onDestroy', () => {
     fixture.componentInstance.show = false;
     fixture.detectChanges();
 
-    expect(events).toEqual([
-      'comp 0',
-      'comp 1',
-      'comp 2',
-      'comp 3',
-    ]);
+    expect(events).toEqual(['comp 0', 'comp 1', 'comp 2', 'comp 3']);
 
     fixture.componentInstance.show = true;
     fixture.detectChanges();
 
-    expect(events).toEqual([
-      'comp 0',
-      'comp 1',
-      'comp 2',
-      'comp 3',
-    ]);
+    expect(events).toEqual(['comp 0', 'comp 1', 'comp 2', 'comp 3']);
 
     fixture.componentInstance.numbers.splice(1, 1);
     fixture.detectChanges();
-    expect(events).toEqual([
-      'comp 0',
-      'comp 1',
-      'comp 2',
-      'comp 3',
-      'comp 1',
-    ]);
+    expect(events).toEqual(['comp 0', 'comp 1', 'comp 2', 'comp 3', 'comp 1']);
 
     fixture.componentInstance.show = false;
     fixture.detectChanges();
@@ -3832,7 +3798,7 @@ describe('onDestroy', () => {
           <comp></comp>
           <button (click)="handleClick2()">test 2</button>
         </div>
-      `
+      `,
     })
     class App {
       show = true;
@@ -3857,7 +3823,7 @@ describe('onDestroy', () => {
     fixture.detectChanges();
 
     const buttons = fixture.debugElement.queryAll(By.css('button'));
-    buttons.forEach(button => button.nativeElement.click());
+    buttons.forEach((button) => button.nativeElement.click());
 
     expect(fixture.componentInstance.clicksToButton1).toBe(1);
     expect(fixture.componentInstance.clicksToButton2).toBe(1);
@@ -3866,7 +3832,7 @@ describe('onDestroy', () => {
     fixture.componentInstance.show = false;
     fixture.detectChanges();
 
-    buttons.forEach(button => button.nativeElement.click());
+    buttons.forEach((button) => button.nativeElement.click());
     expect(fixture.componentInstance.clicksToButton1).toBe(1);
     expect(fixture.componentInstance.clicksToButton2).toBe(1);
 
@@ -3875,8 +3841,7 @@ describe('onDestroy', () => {
 
   it('should not produce errors if change detection is triggered during ngOnDestroy', () => {
     @Component({selector: 'child', template: `<ng-content></ng-content>`})
-    class Child {
-    }
+    class Child {}
 
     @Component({selector: 'parent', template: `<ng-content></ng-content>`})
     class Parent {
@@ -3892,7 +3857,7 @@ describe('onDestroy', () => {
           </parent>
         </ng-template>
         <div #container dir></div>
-      `
+      `,
     })
     class App {
       @ViewChild('container', {read: ViewContainerRef, static: true}) container!: ViewContainerRef;
@@ -3958,7 +3923,7 @@ describe('onDestroy', () => {
           <comp name="1" dir="1"></comp>
           <comp name="2" dir="2"></comp>
         </div>
-      `
+      `,
     })
     class App {
       show = true;
@@ -3976,12 +3941,7 @@ describe('onDestroy', () => {
     fixture.componentInstance.show = false;
     fixture.detectChanges();
 
-    expect(events).toEqual([
-      'comp 1',
-      'dir 1',
-      'comp 2',
-      'dir 2',
-    ]);
+    expect(events).toEqual(['comp 1', 'dir 1', 'comp 2', 'dir 2']);
   });
 
   it('should be called on directives on an element', () => {
@@ -4020,7 +3980,7 @@ describe('onDestroy', () => {
 describe('hook order', () => {
   let events: string[] = [];
 
-  beforeEach(() => events = []);
+  beforeEach(() => (events = []));
 
   @Component({
     selector: 'comp',
@@ -4066,11 +4026,9 @@ describe('hook order', () => {
 
   @Component({
     selector: 'parent',
-    template:
-        `<comp [name]="'child of ' + this.name" [value]="value"><ng-content></ng-content></comp>`,
+    template: `<comp [name]="'child of ' + this.name" [value]="value"><ng-content></ng-content></comp>`,
   })
-  class Parent extends Comp {
-  }
+  class Parent extends Comp {}
 
   it('should call all hooks in correct order', () => {
     @Component({template: `<comp *ngIf="show" name="comp" [value]="value"></comp>`})
@@ -4099,11 +4057,7 @@ describe('hook order', () => {
 
     events.length = 0;
     fixture.detectChanges();
-    expect(events).toEqual([
-      'comp doCheck',
-      'comp afterContentChecked',
-      'comp afterViewChecked',
-    ]);
+    expect(events).toEqual(['comp doCheck', 'comp afterContentChecked', 'comp afterViewChecked']);
 
     events.length = 0;
     fixture.componentInstance.value = 'b';
@@ -4118,9 +4072,7 @@ describe('hook order', () => {
     events.length = 0;
     fixture.componentInstance.show = false;
     fixture.detectChanges();
-    expect(events).toEqual([
-      'comp onDestroy',
-    ]);
+    expect(events).toEqual(['comp onDestroy']);
   });
 
   it('should call all hooks in correct order with children', () => {
@@ -4130,7 +4082,7 @@ describe('hook order', () => {
           <parent name="parent1" [value]="value"></parent>
           <parent name="parent2" [value]="value"></parent>
         </div>
-      `
+      `,
     })
     class App {
       value = 'a';
@@ -4223,7 +4175,7 @@ describe('hook order', () => {
             <comp name="projected2" [value]="value"></comp>
           </parent>
         </div>
-      `
+      `,
     })
     class App {
       value = 'a';
@@ -4344,7 +4296,7 @@ describe('non-regression', () => {
     @Component({
       template: `<ng-template [ngIf]="show">
         <ng-template onDestroyDir>content</ng-template>
-      </ng-template>`
+      </ng-template>`,
     })
     class App {
       show = true;
@@ -4364,37 +4316,36 @@ describe('non-regression', () => {
     expect(destroyed).toBeTruthy();
   });
 
-  it('should not throw when calling detectChanges from a setter in the presence of a data binding, ngOnChanges and ngAfterViewInit',
-     () => {
-       const hooks: string[] = [];
-
-       @Directive({selector: '[testDir]'})
-       class TestDirective implements OnChanges, AfterViewInit {
-         constructor(private _changeDetectorRef: ChangeDetectorRef) {}
-
-         @Input('testDir')
-         set value(_value: any) {
-           this._changeDetectorRef.detectChanges();
-         }
-         ngOnChanges() {
-           hooks.push('ngOnChanges');
-         }
-         ngAfterViewInit() {
-           hooks.push('ngAfterViewInit');
-         }
-       }
-
-       @Component({template: `<div [testDir]="value">{{value}}</div>`})
-       class App {
-         value = 1;
-       }
-
-       TestBed.configureTestingModule({declarations: [App, TestDirective]});
-       const fixture = TestBed.createComponent(App);
-       expect(() => fixture.detectChanges()).not.toThrow();
-       expect(hooks).toEqual(['ngOnChanges', 'ngAfterViewInit']);
-       expect(fixture.nativeElement.textContent.trim()).toBe('1');
-     });
+  it('should not throw when calling detectChanges from a setter in the presence of a data binding, ngOnChanges and ngAfterViewInit', () => {
+    const hooks: string[] = [];
+
+    @Directive({selector: '[testDir]'})
+    class TestDirective implements OnChanges, AfterViewInit {
+      constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+
+      @Input('testDir')
+      set value(_value: any) {
+        this._changeDetectorRef.detectChanges();
+      }
+      ngOnChanges() {
+        hooks.push('ngOnChanges');
+      }
+      ngAfterViewInit() {
+        hooks.push('ngAfterViewInit');
+      }
+    }
+
+    @Component({template: `<div [testDir]="value">{{value}}</div>`})
+    class App {
+      value = 1;
+    }
+
+    TestBed.configureTestingModule({declarations: [App, TestDirective]});
+    const fixture = TestBed.createComponent(App);
+    expect(() => fixture.detectChanges()).not.toThrow();
+    expect(hooks).toEqual(['ngOnChanges', 'ngAfterViewInit']);
+    expect(fixture.nativeElement.textContent.trim()).toBe('1');
+  });
 
   it('should call hooks in the correct order when calling detectChanges in a setter', () => {
     const hooks: string[] = [];
diff --git a/packages/core/test/acceptance/listener_spec.ts b/packages/core/test/acceptance/listener_spec.ts
index f186c31caafc1..652931041c62e 100644
--- a/packages/core/test/acceptance/listener_spec.ts
+++ b/packages/core/test/acceptance/listener_spec.ts
@@ -7,7 +7,21 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {Component, Directive, ErrorHandler, EventEmitter, HostListener, Input, OnInit, Output, QueryList, TemplateRef, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
+import {
+  Component,
+  Directive,
+  ErrorHandler,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnInit,
+  Output,
+  QueryList,
+  TemplateRef,
+  ViewChild,
+  ViewChildren,
+  ViewContainerRef,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
@@ -110,8 +124,8 @@ describe('event listeners', () => {
     });
 
     it('should be able to access a property called $event using `this`', () => {
-      let eventVariable: number|undefined;
-      let eventObject: MouseEvent|undefined;
+      let eventVariable: number | undefined;
+      let eventObject: MouseEvent | undefined;
 
       @Component({
         template: `
@@ -137,30 +151,29 @@ describe('event listeners', () => {
       expect(eventObject?.type).toBe('click');
     });
 
-    it('should be able to use a keyed write on `this` from a listener inside an ng-template',
-       () => {
-         @Component({
-           template: `
+    it('should be able to use a keyed write on `this` from a listener inside an ng-template', () => {
+      @Component({
+        template: `
           <ng-template #template>
             <button (click)="this['mes' + 'sage'] = 'hello'">Click me</button>
           </ng-template>
   
           <ng-container [ngTemplateOutlet]="template"></ng-container>
-        `
-         })
-         class MyComp {
-           message = '';
-         }
-
-         TestBed.configureTestingModule({declarations: [MyComp], imports: [CommonModule]});
-         const fixture = TestBed.createComponent(MyComp);
-         fixture.detectChanges();
-         const button = fixture.nativeElement.querySelector('button');
-         button.click();
-         fixture.detectChanges();
-
-         expect(fixture.componentInstance.message).toBe('hello');
-       });
+        `,
+      })
+      class MyComp {
+        message = '';
+      }
+
+      TestBed.configureTestingModule({declarations: [MyComp], imports: [CommonModule]});
+      const fixture = TestBed.createComponent(MyComp);
+      fixture.detectChanges();
+      const button = fixture.nativeElement.querySelector('button');
+      button.click();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.message).toBe('hello');
+    });
 
     it('should reference the correct context object if it is swapped out', () => {
       @Component({
@@ -170,7 +183,7 @@ describe('event listeners', () => {
           </ng-template>
   
           <ng-container *ngTemplateOutlet="template; context: {$implicit: current}"></ng-container>
-        `
+        `,
       })
       class MyComp {
         one = {value: 'one'};
@@ -209,8 +222,7 @@ describe('event listeners', () => {
         standalone: true,
         template: ``,
       })
-      class MyComp {
-      }
+      class MyComp {}
 
       @Component({
         standalone: true,
@@ -221,7 +233,7 @@ describe('event listeners', () => {
         `,
       })
       class App {
-        comp: MyComp|null = null;
+        comp: MyComp | null = null;
 
         onClick(comp: MyComp) {
           this.comp = comp;
@@ -244,16 +256,17 @@ describe('event listeners', () => {
         template: `<button (click)="onClick($event)">Click</button>`,
       })
       class MyComp {
-        handlerReturnValue: boolean|undefined;
-        event: Event|undefined;
+        handlerReturnValue: boolean | undefined;
+        event: Event | undefined;
 
         onClick(e: any) {
           this.event = e;
 
           // stub preventDefault() to check whether it's called
-          Object.defineProperty(
-              this.event, 'preventDefault',
-              {value: jasmine.createSpy('preventDefault'), writable: true});
+          Object.defineProperty(this.event, 'preventDefault', {
+            value: jasmine.createSpy('preventDefault'),
+            writable: true,
+          });
 
           return this.handlerReturnValue;
         }
@@ -283,7 +296,7 @@ describe('event listeners', () => {
   describe('coalescing', () => {
     @Component({
       selector: 'with-clicks-cmpt',
-      template: `<button likes-clicks (click)="count()" md-button>Click me!</button>`
+      template: `<button likes-clicks (click)="count()" md-button>Click me!</button>`,
     })
     class WithClicksCmpt {
       counter = 0;
@@ -314,7 +327,7 @@ describe('event listeners', () => {
     class ReturnsFalse {
       counter = 0;
       event!: Event;
-      handlerShouldReturn: boolean|undefined = undefined;
+      handlerShouldReturn: boolean | undefined = undefined;
 
       @HostListener('click', ['$event'])
       count(e: Event) {
@@ -322,9 +335,10 @@ describe('event listeners', () => {
         this.event = e;
 
         // stub preventDefault() to check whether it's called
-        Object.defineProperty(
-            this.event, 'preventDefault',
-            {value: jasmine.createSpy('preventDefault'), writable: true});
+        Object.defineProperty(this.event, 'preventDefault', {
+          value: jasmine.createSpy('preventDefault'),
+          writable: true,
+        });
 
         return this.handlerShouldReturn;
       }
@@ -333,13 +347,13 @@ describe('event listeners', () => {
     it('should coalesce multiple event listeners for the same event on the same element', () => {
       @Component({
         selector: 'test-cmpt',
-        template: `<with-clicks-cmpt></with-clicks-cmpt><with-clicks-cmpt></with-clicks-cmpt>`
+        template: `<with-clicks-cmpt></with-clicks-cmpt><with-clicks-cmpt></with-clicks-cmpt>`,
       })
-      class TestCmpt {
-      }
+      class TestCmpt {}
 
-      TestBed.configureTestingModule(
-          {declarations: [TestCmpt, WithClicksCmpt, LikesClicks, MdButton]});
+      TestBed.configureTestingModule({
+        declarations: [TestCmpt, WithClicksCmpt, LikesClicks, MdButton],
+      });
       const noOfEventListenersRegisteredSoFar = getNoOfNativeListeners();
       const fixture = TestBed.createComponent(TestCmpt);
       fixture.detectChanges();
@@ -371,7 +385,7 @@ describe('event listeners', () => {
     it('should coalesce multiple event listeners in presence of queries', () => {
       @Component({
         selector: 'test-cmpt',
-        template: `<button likes-clicks (click)="counter = counter+1">Click me!</button>`
+        template: `<button likes-clicks (click)="counter = counter+1">Click me!</button>`,
       })
       class TestCmpt {
         counter = 0;
@@ -395,20 +409,20 @@ describe('event listeners', () => {
       expect(fixture.componentInstance.counter).toBe(1);
     });
 
-
     it('should try to execute remaining coalesced listeners if one of the listeners throws', () => {
       @Directive({selector: '[throws-on-clicks]'})
       class ThrowsOnClicks {
         @HostListener('click')
         dontCount() {
-          throw new Error('I was clicked and I don\'t like it!');
+          throw new Error("I was clicked and I don't like it!");
         }
       }
 
-      @Component(
-          {selector: 'test-cmpt', template: `<button throws-on-clicks likes-clicks><button>`})
-      class TestCmpt {
-      }
+      @Component({
+        selector: 'test-cmpt',
+        template: `<button throws-on-clicks likes-clicks><button>`,
+      })
+      class TestCmpt {}
 
       let noOfErrors = 0;
 
@@ -420,7 +434,7 @@ describe('event listeners', () => {
 
       TestBed.configureTestingModule({
         declarations: [TestCmpt, LikesClicks, ThrowsOnClicks],
-        providers: [{provide: ErrorHandler, useClass: CountingErrorHandler}]
+        providers: [{provide: ErrorHandler, useClass: CountingErrorHandler}],
       });
       const fixture = TestBed.createComponent(TestCmpt);
       fixture.detectChanges();
@@ -438,10 +452,9 @@ describe('event listeners', () => {
         selector: 'test-cmpt',
         template: `
           <button returns-false likes-clicks></button>
-        `
+        `,
       })
-      class TestCmpt {
-      }
+      class TestCmpt {}
 
       TestBed.configureTestingModule({declarations: [TestCmpt, ReturnsFalse, LikesClicks]});
       const fixture = TestBed.createComponent(TestCmpt);
@@ -480,13 +493,13 @@ describe('event listeners', () => {
 
       @Component({
         selector: 'test-component',
-        template: `<div [(foo)]="someValue" (fooChange)="fooChange($event)"></div>`
+        template: `<div [(foo)]="someValue" (fooChange)="fooChange($event)"></div>`,
       })
       class TestComponent {
         count = 0;
         someValue = -1;
 
-        @ViewChild(FooDirective) fooDirective: FooDirective|null = null;
+        @ViewChild(FooDirective) fooDirective: FooDirective | null = null;
 
         fooChange() {
           this.count++;
@@ -728,8 +741,7 @@ describe('event listeners', () => {
         imports: [HostListenerDir],
         template: `<button hostListenerDir>Click</button>`,
       })
-      class MyComp {
-      }
+      class MyComp {}
 
       const fixture = TestBed.createComponent(MyComp);
       fixture.detectChanges();
@@ -762,8 +774,7 @@ describe('event listeners', () => {
         imports: [HostListenerDir],
         template: `<button hostListenerDir>Click</button>`,
       })
-      class MyComp {
-      }
+      class MyComp {}
 
       const fixture = TestBed.createComponent(MyComp);
       fixture.detectChanges();
@@ -795,10 +806,9 @@ describe('event listeners', () => {
               <ng-container add-global-listener>
                 <button>Click me!</button>
               </ng-container>
-            `
+            `,
       })
-      class MyComp {
-      }
+      class MyComp {}
 
       TestBed.configureTestingModule({declarations: [MyComp, AddGlobalListener]});
       const fixture = TestBed.createComponent(MyComp);
@@ -827,13 +837,14 @@ describe('event listeners', () => {
               </ng-template>
   
               <ng-container [ngTemplateOutlet]="template"></ng-container>
-            `
+            `,
       })
-      class MyComp {
-      }
+      class MyComp {}
 
-      TestBed.configureTestingModule(
-          {declarations: [MyComp, AddGlobalListener], imports: [CommonModule]});
+      TestBed.configureTestingModule({
+        declarations: [MyComp, AddGlobalListener],
+        imports: [CommonModule],
+      });
       const fixture = TestBed.createComponent(MyComp);
       fixture.detectChanges();
       const button = fixture.nativeElement.querySelector('button');
@@ -852,7 +863,10 @@ describe('event listeners', () => {
           clicks++;
         }
 
-        constructor(private _vcr: ViewContainerRef, private _templateRef: TemplateRef<any>) {}
+        constructor(
+          private _vcr: ViewContainerRef,
+          private _templateRef: TemplateRef<any>,
+        ) {}
 
         ngOnInit() {
           this._vcr.createEmbeddedView(this._templateRef);
@@ -864,10 +878,9 @@ describe('event listeners', () => {
               <div *add-global-listener>
                 <button>Click me!</button>
               </div>
-            `
+            `,
       })
-      class MyComp {
-      }
+      class MyComp {}
 
       TestBed.configureTestingModule({declarations: [MyComp, AddGlobalListener]});
       const fixture = TestBed.createComponent(MyComp);
diff --git a/packages/core/test/acceptance/local_compilation_spec.ts b/packages/core/test/acceptance/local_compilation_spec.ts
index 96132dfcbd36c..741bada1c6943 100644
--- a/packages/core/test/acceptance/local_compilation_spec.ts
+++ b/packages/core/test/acceptance/local_compilation_spec.ts
@@ -6,15 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, forwardRef, ɵɵdefineNgModule, ɵɵgetComponentDepsFactory, ɵɵsetNgModuleScope} from '@angular/core';
+import {
+  Component,
+  forwardRef,
+  ɵɵdefineNgModule,
+  ɵɵgetComponentDepsFactory,
+  ɵɵsetNgModuleScope,
+} from '@angular/core';
 import {ComponentType} from '@angular/core/src/render3';
 import {getNgModuleDef} from '@angular/core/src/render3/definition';
 
 describe('component dependencies in local compilation', () => {
   it('should compute correct set of dependencies when importing ng-modules directly', () => {
     @Component({selector: 'sub'})
-    class SubComponent {
-    }
+    class SubComponent {}
 
     class SubModule {
       static ɵmod = ɵɵdefineNgModule({type: SubModule});
@@ -22,8 +27,7 @@ describe('component dependencies in local compilation', () => {
     ɵɵsetNgModuleScope(SubModule, {exports: [SubComponent]});
 
     @Component({})
-    class MainComponent {
-    }
+    class MainComponent {}
 
     class MainModule {
       static ɵmod = ɵɵdefineNgModule({type: MainModule});
@@ -35,35 +39,31 @@ describe('component dependencies in local compilation', () => {
     expect(deps).toEqual(jasmine.arrayWithExactContents([SubComponent, MainComponent]));
   });
 
-  it('should compute correct set of dependencies when importing ng-modules - nested array case',
-     () => {
-       @Component({selector: 'sub'})
-       class SubComponent {
-       }
+  it('should compute correct set of dependencies when importing ng-modules - nested array case', () => {
+    @Component({selector: 'sub'})
+    class SubComponent {}
 
-       class SubModule {
-         static ɵmod = ɵɵdefineNgModule({type: SubModule});
-       }
-       ɵɵsetNgModuleScope(SubModule, {exports: [[[SubComponent]]]});
+    class SubModule {
+      static ɵmod = ɵɵdefineNgModule({type: SubModule});
+    }
+    ɵɵsetNgModuleScope(SubModule, {exports: [[[SubComponent]]]});
 
-       @Component({})
-       class MainComponent {
-       }
+    @Component({})
+    class MainComponent {}
 
-       class MainModule {
-         static ɵmod = ɵɵdefineNgModule({type: MainModule});
-       }
-       ɵɵsetNgModuleScope(MainModule, {imports: [[SubModule]], declarations: [[MainComponent]]});
+    class MainModule {
+      static ɵmod = ɵɵdefineNgModule({type: MainModule});
+    }
+    ɵɵsetNgModuleScope(MainModule, {imports: [[SubModule]], declarations: [[MainComponent]]});
 
-       const deps = ɵɵgetComponentDepsFactory(MainComponent as ComponentType<any>)();
+    const deps = ɵɵgetComponentDepsFactory(MainComponent as ComponentType<any>)();
 
-       expect(deps).toEqual(jasmine.arrayWithExactContents([SubComponent, MainComponent]));
-     });
+    expect(deps).toEqual(jasmine.arrayWithExactContents([SubComponent, MainComponent]));
+  });
 
   it('should compute correct set of dependencies when importing ng-modules with providers', () => {
     @Component({selector: 'sub'})
-    class SubComponent {
-    }
+    class SubComponent {}
 
     class SubModule {
       static ɵmod = ɵɵdefineNgModule({type: SubModule});
@@ -71,166 +71,151 @@ describe('component dependencies in local compilation', () => {
     ɵɵsetNgModuleScope(SubModule, {exports: [SubComponent]});
 
     @Component({})
-    class MainComponent {
+    class MainComponent {}
+
+    class MainModule {
+      static ɵmod = ɵɵdefineNgModule({type: MainModule});
     }
+    ɵɵsetNgModuleScope(MainModule, {
+      imports: [{ngModule: SubModule, providers: []}],
+      declarations: [MainComponent],
+    });
+
+    const deps = ɵɵgetComponentDepsFactory(MainComponent as ComponentType<any>)();
+
+    expect(deps).toEqual(jasmine.arrayWithExactContents([SubComponent, MainComponent]));
+  });
+
+  it('should compute correct set of dependencies when importing ng-modules with providers - nested array case', () => {
+    @Component({selector: 'sub'})
+    class SubComponent {}
+
+    class SubModule {
+      static ɵmod = ɵɵdefineNgModule({type: SubModule});
+    }
+    ɵɵsetNgModuleScope(SubModule, {exports: [[[SubComponent]]]});
+
+    @Component({})
+    class MainComponent {}
 
     class MainModule {
       static ɵmod = ɵɵdefineNgModule({type: MainModule});
     }
-    ɵɵsetNgModuleScope(
-        MainModule,
-        {imports: [{ngModule: SubModule, providers: []}], declarations: [MainComponent]});
+    ɵɵsetNgModuleScope(MainModule, {
+      imports: [[{ngModule: SubModule, providers: []}]],
+      declarations: [[MainComponent]],
+    });
 
     const deps = ɵɵgetComponentDepsFactory(MainComponent as ComponentType<any>)();
 
     expect(deps).toEqual(jasmine.arrayWithExactContents([SubComponent, MainComponent]));
   });
 
-  it('should compute correct set of dependencies when importing ng-modules with providers - nested array case',
-     () => {
-       @Component({selector: 'sub'})
-       class SubComponent {
-       }
-
-       class SubModule {
-         static ɵmod = ɵɵdefineNgModule({type: SubModule});
-       }
-       ɵɵsetNgModuleScope(SubModule, {exports: [[[SubComponent]]]});
-
-       @Component({})
-       class MainComponent {
-       }
-
-       class MainModule {
-         static ɵmod = ɵɵdefineNgModule({type: MainModule});
-       }
-       ɵɵsetNgModuleScope(
-           MainModule,
-           {imports: [[{ngModule: SubModule, providers: []}]], declarations: [[MainComponent]]});
-
-       const deps = ɵɵgetComponentDepsFactory(MainComponent as ComponentType<any>)();
-
-       expect(deps).toEqual(jasmine.arrayWithExactContents([SubComponent, MainComponent]));
-     });
-
-  it('should compute correct set of dependencies when importing ng-modules using forward ref',
-     () => {
-       @Component({selector: 'sub'})
-       class SubComponent {
-       }
-
-       class SubModule {
-         static ɵmod = ɵɵdefineNgModule({type: SubModule});
-       }
-       ɵɵsetNgModuleScope(SubModule, {exports: [forwardRef(() => SubComponent)]});
-
-       @Component({})
-       class MainComponent {
-       }
-
-       class MainModule {
-         static ɵmod = ɵɵdefineNgModule({type: MainModule});
-       }
-       ɵɵsetNgModuleScope(MainModule, {
-         imports: [forwardRef(() => SubModule)],
-         declarations: [forwardRef(() => MainComponent)]
-       });
-
-       const deps = ɵɵgetComponentDepsFactory(MainComponent as ComponentType<any>)();
-
-       expect(deps).toEqual(jasmine.arrayWithExactContents([SubComponent, MainComponent]));
-     });
-
-  it('should compute correct set of dependencies when importing ng-modules using forward ref - nested array case',
-     () => {
-       @Component({selector: 'sub'})
-       class SubComponent {
-       }
-
-       class SubModule {
-         static ɵmod = ɵɵdefineNgModule({type: SubModule});
-       }
-       ɵɵsetNgModuleScope(SubModule, {exports: [[[forwardRef(() => SubComponent)]]]});
-
-       @Component({})
-       class MainComponent {
-       }
-
-       class MainModule {
-         static ɵmod = ɵɵdefineNgModule({type: MainModule});
-       }
-       ɵɵsetNgModuleScope(MainModule, {
-         imports: [[forwardRef(() => SubModule)]],
-         declarations: [[forwardRef(() => MainComponent)]]
-       });
-
-       const deps = ɵɵgetComponentDepsFactory(MainComponent as ComponentType<any>)();
-
-       expect(deps).toEqual(jasmine.arrayWithExactContents([SubComponent, MainComponent]));
-     });
-
-  it('should compute correct set of dependencies when importing ng-modules with providers using forward ref',
-     () => {
-       @Component({selector: 'sub'})
-       class SubComponent {
-       }
-
-       class SubModule {
-         static ɵmod = ɵɵdefineNgModule({type: SubModule});
-       }
-       ɵɵsetNgModuleScope(SubModule, {exports: [SubComponent]});
-
-       @Component({})
-       class MainComponent {
-       }
-
-       class MainModule {
-         static ɵmod = ɵɵdefineNgModule({type: MainModule});
-       }
-       ɵɵsetNgModuleScope(MainModule, {
-         imports: [forwardRef(() => ({ngModule: SubModule, providers: []}))],
-         declarations: [MainComponent]
-       });
-
-       const deps = ɵɵgetComponentDepsFactory(MainComponent as ComponentType<any>)();
-
-       expect(deps).toEqual(jasmine.arrayWithExactContents([SubComponent, MainComponent]));
-     });
-
-  it('should compute correct set of dependencies when importing ng-modules with providers using forward ref',
-     () => {
-       @Component({selector: 'sub'})
-       class SubComponent {
-       }
-
-       class SubModule {
-         static ɵmod = ɵɵdefineNgModule({type: SubModule});
-       }
-       ɵɵsetNgModuleScope(SubModule, {exports: [[[SubComponent]]]});
-
-       @Component({})
-       class MainComponent {
-       }
-
-       class MainModule {
-         static ɵmod = ɵɵdefineNgModule({type: MainModule});
-       }
-       ɵɵsetNgModuleScope(MainModule, {
-         imports: [[forwardRef(() => ({ngModule: SubModule, providers: []}))]],
-         declarations: [[MainComponent]]
-       });
-
-       const deps = ɵɵgetComponentDepsFactory(MainComponent as ComponentType<any>)();
-
-       expect(deps).toEqual(jasmine.arrayWithExactContents([SubComponent, MainComponent]));
-     });
+  it('should compute correct set of dependencies when importing ng-modules using forward ref', () => {
+    @Component({selector: 'sub'})
+    class SubComponent {}
+
+    class SubModule {
+      static ɵmod = ɵɵdefineNgModule({type: SubModule});
+    }
+    ɵɵsetNgModuleScope(SubModule, {exports: [forwardRef(() => SubComponent)]});
+
+    @Component({})
+    class MainComponent {}
+
+    class MainModule {
+      static ɵmod = ɵɵdefineNgModule({type: MainModule});
+    }
+    ɵɵsetNgModuleScope(MainModule, {
+      imports: [forwardRef(() => SubModule)],
+      declarations: [forwardRef(() => MainComponent)],
+    });
+
+    const deps = ɵɵgetComponentDepsFactory(MainComponent as ComponentType<any>)();
+
+    expect(deps).toEqual(jasmine.arrayWithExactContents([SubComponent, MainComponent]));
+  });
+
+  it('should compute correct set of dependencies when importing ng-modules using forward ref - nested array case', () => {
+    @Component({selector: 'sub'})
+    class SubComponent {}
+
+    class SubModule {
+      static ɵmod = ɵɵdefineNgModule({type: SubModule});
+    }
+    ɵɵsetNgModuleScope(SubModule, {exports: [[[forwardRef(() => SubComponent)]]]});
+
+    @Component({})
+    class MainComponent {}
+
+    class MainModule {
+      static ɵmod = ɵɵdefineNgModule({type: MainModule});
+    }
+    ɵɵsetNgModuleScope(MainModule, {
+      imports: [[forwardRef(() => SubModule)]],
+      declarations: [[forwardRef(() => MainComponent)]],
+    });
+
+    const deps = ɵɵgetComponentDepsFactory(MainComponent as ComponentType<any>)();
+
+    expect(deps).toEqual(jasmine.arrayWithExactContents([SubComponent, MainComponent]));
+  });
+
+  it('should compute correct set of dependencies when importing ng-modules with providers using forward ref', () => {
+    @Component({selector: 'sub'})
+    class SubComponent {}
+
+    class SubModule {
+      static ɵmod = ɵɵdefineNgModule({type: SubModule});
+    }
+    ɵɵsetNgModuleScope(SubModule, {exports: [SubComponent]});
+
+    @Component({})
+    class MainComponent {}
+
+    class MainModule {
+      static ɵmod = ɵɵdefineNgModule({type: MainModule});
+    }
+    ɵɵsetNgModuleScope(MainModule, {
+      imports: [forwardRef(() => ({ngModule: SubModule, providers: []}))],
+      declarations: [MainComponent],
+    });
+
+    const deps = ɵɵgetComponentDepsFactory(MainComponent as ComponentType<any>)();
+
+    expect(deps).toEqual(jasmine.arrayWithExactContents([SubComponent, MainComponent]));
+  });
+
+  it('should compute correct set of dependencies when importing ng-modules with providers using forward ref', () => {
+    @Component({selector: 'sub'})
+    class SubComponent {}
+
+    class SubModule {
+      static ɵmod = ɵɵdefineNgModule({type: SubModule});
+    }
+    ɵɵsetNgModuleScope(SubModule, {exports: [[[SubComponent]]]});
+
+    @Component({})
+    class MainComponent {}
+
+    class MainModule {
+      static ɵmod = ɵɵdefineNgModule({type: MainModule});
+    }
+    ɵɵsetNgModuleScope(MainModule, {
+      imports: [[forwardRef(() => ({ngModule: SubModule, providers: []}))]],
+      declarations: [[MainComponent]],
+    });
+
+    const deps = ɵɵgetComponentDepsFactory(MainComponent as ComponentType<any>)();
+
+    expect(deps).toEqual(jasmine.arrayWithExactContents([SubComponent, MainComponent]));
+  });
 });
 
 describe('component bootstrap info', () => {
   it('should include the bootstrap info in local compilation mode', () => {
     @Component({})
-    class MainComponent {
-    }
+    class MainComponent {}
 
     class MainModule {
       static ɵmod = ɵɵdefineNgModule({type: MainModule});
@@ -243,8 +228,7 @@ describe('component bootstrap info', () => {
 
   it('should flatten the bootstrap info in local compilation mode', () => {
     @Component({})
-    class MainComponent {
-    }
+    class MainComponent {}
 
     class MainModule {
       static ɵmod = ɵɵdefineNgModule({type: MainModule});
@@ -257,8 +241,7 @@ describe('component bootstrap info', () => {
 
   it('should include the bootstrap info in full compilation mode', () => {
     @Component({})
-    class MainComponent {
-    }
+    class MainComponent {}
 
     class MainModule {
       static ɵmod = ɵɵdefineNgModule({type: MainModule, bootstrap: [MainComponent]});
diff --git a/packages/core/test/acceptance/ng_module_spec.ts b/packages/core/test/acceptance/ng_module_spec.ts
index 919bceff68459..df8b62874601b 100644
--- a/packages/core/test/acceptance/ng_module_spec.ts
+++ b/packages/core/test/acceptance/ng_module_spec.ts
@@ -7,7 +7,25 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {Component, createNgModule, CUSTOM_ELEMENTS_SCHEMA, destroyPlatform, Directive, Injectable, InjectionToken, NgModule, NgModuleRef, NO_ERRORS_SCHEMA, Pipe, ɵsetClassMetadata as setClassMetadata, ɵɵdefineComponent as defineComponent, ɵɵdefineInjector as defineInjector, ɵɵdefineNgModule as defineNgModule, ɵɵelement as element, ɵɵproperty as property,} from '@angular/core';
+import {
+  Component,
+  createNgModule,
+  CUSTOM_ELEMENTS_SCHEMA,
+  destroyPlatform,
+  Directive,
+  Injectable,
+  InjectionToken,
+  NgModule,
+  NgModuleRef,
+  NO_ERRORS_SCHEMA,
+  Pipe,
+  ɵsetClassMetadata as setClassMetadata,
+  ɵɵdefineComponent as defineComponent,
+  ɵɵdefineInjector as defineInjector,
+  ɵɵdefineNgModule as defineNgModule,
+  ɵɵelement as element,
+  ɵɵproperty as property,
+} from '@angular/core';
 import {KNOWN_CONTROL_FLOW_DIRECTIVES} from '@angular/core/src/render3/instructions/element_validation';
 import {TestBed} from '@angular/core/testing';
 import {BrowserModule} from '@angular/platform-browser';
@@ -16,18 +34,15 @@ import {withBody} from '@angular/private/testing';
 
 describe('NgModule', () => {
   @Component({template: 'hello'})
-  class TestCmp {
-  }
+  class TestCmp {}
 
   @Component({template: 'hello'})
-  class TestCmp2 {
-  }
+  class TestCmp2 {}
 
   describe('bootstrap', () => {
     it('should throw when specified bootstrap component is not added to a module', () => {
       @NgModule({bootstrap: [TestCmp, [TestCmp2]]})
-      class MyModule {
-      }
+      class MyModule {}
 
       TestBed.configureTestingModule({imports: [MyModule]});
 
@@ -39,8 +54,7 @@ describe('NgModule', () => {
 
     it('should not throw when specified bootstrap component is added to a module', () => {
       @NgModule({declarations: [TestCmp, TestCmp2], bootstrap: [TestCmp, [TestCmp2]]})
-      class MyModule {
-      }
+      class MyModule {}
 
       TestBed.configureTestingModule({imports: [MyModule]});
 
@@ -81,22 +95,20 @@ describe('NgModule', () => {
         standalone: true,
         template: '',
       })
-      class MyComp {
-      }
+      class MyComp {}
 
       @NgModule({
         declarations: [MyComp],
       })
-      class MyModule {
-      }
+      class MyModule {}
 
       TestBed.configureTestingModule({imports: [MyModule]});
 
       expect(() => {
         TestBed.createComponent(MyComp);
-      })
-          .toThrowError(
-              `Unexpected "MyComp" found in the "declarations" array of the "MyModule" NgModule, "MyComp" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?`);
+      }).toThrowError(
+        `Unexpected "MyComp" found in the "declarations" array of the "MyModule" NgModule, "MyComp" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?`,
+      );
     });
 
     it('should throw when a standalone directive is added to NgModule declarations', () => {
@@ -104,29 +116,26 @@ describe('NgModule', () => {
         selector: '[my-dir]',
         standalone: true,
       })
-      class MyDir {
-      }
+      class MyDir {}
 
       @Component({
         selector: 'my-comp',
         template: '',
       })
-      class MyComp {
-      }
+      class MyComp {}
 
       @NgModule({
         declarations: [MyDir],
       })
-      class MyModule {
-      }
+      class MyModule {}
 
       TestBed.configureTestingModule({declarations: [MyComp], imports: [MyModule]});
 
       expect(() => {
         TestBed.createComponent(MyComp);
-      })
-          .toThrowError(
-              `Unexpected "MyDir" found in the "declarations" array of the "MyModule" NgModule, "MyDir" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?`);
+      }).toThrowError(
+        `Unexpected "MyDir" found in the "declarations" array of the "MyModule" NgModule, "MyDir" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?`,
+      );
     });
 
     it('should throw when a standalone pipe is added to NgModule declarations', () => {
@@ -134,85 +143,81 @@ describe('NgModule', () => {
         name: 'my-pipe',
         standalone: true,
       })
-      class MyPipe {
-      }
+      class MyPipe {}
 
       @Component({
         selector: 'my-comp',
         template: '',
       })
-      class MyComp {
-      }
+      class MyComp {}
 
       @NgModule({
         declarations: [MyPipe],
       })
-      class MyModule {
-      }
+      class MyModule {}
 
       TestBed.configureTestingModule({declarations: [MyComp], imports: [MyModule]});
 
       expect(() => {
         TestBed.createComponent(MyComp);
-      })
-          .toThrowError(
-              `Unexpected "MyPipe" found in the "declarations" array of the "MyModule" NgModule, "MyPipe" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?`);
+      }).toThrowError(
+        `Unexpected "MyPipe" found in the "declarations" array of the "MyModule" NgModule, "MyPipe" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?`,
+      );
     });
 
-    it('should throw a testing specific error when a standalone component is added to the configureTestingModule declarations',
-       () => {
-         @Component({
-           selector: 'my-comp',
-           template: '',
-           standalone: true,
-         })
-         class MyComp {
-         }
-
-         expect(() => {
-           TestBed.configureTestingModule({declarations: [MyComp]});
-         })
-             .toThrowError(
-                 `Unexpected "MyComp" found in the "declarations" array of the "TestBed.configureTestingModule" call, "MyComp" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?`);
-       });
+    it('should throw a testing specific error when a standalone component is added to the configureTestingModule declarations', () => {
+      @Component({
+        selector: 'my-comp',
+        template: '',
+        standalone: true,
+      })
+      class MyComp {}
+
+      expect(() => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+      }).toThrowError(
+        `Unexpected "MyComp" found in the "declarations" array of the "TestBed.configureTestingModule" call, "MyComp" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?`,
+      );
+    });
   });
 
   describe('destroy', () => {
     beforeEach(destroyPlatform);
     afterEach(destroyPlatform);
 
-    it('should clear bootstrapped component contents',
-       withBody('<div>before</div><button></button><div>after</div>', async () => {
-         let wasOnDestroyCalled = false;
-         @Component({
-           selector: 'button',
-           template: 'button content',
-         })
-         class App {
-           ngOnDestroy() {
-             wasOnDestroyCalled = true;
-           }
-         }
-
-         @NgModule({
-           imports: [BrowserModule],
-           declarations: [App],
-           bootstrap: [App],
-         })
-         class AppModule {
-         }
-         const ngModuleRef = await platformBrowserDynamic().bootstrapModule(AppModule);
-
-         const button = document.body.querySelector('button')!;
-         expect(button.textContent).toEqual('button content');
-         expect(document.body.childNodes.length).toEqual(3);
-
-         ngModuleRef.destroy();
-
-         expect(wasOnDestroyCalled).toEqual(true);
-         expect(document.body.querySelector('button')).toBeFalsy();  // host element is removed
-         expect(document.body.childNodes.length).toEqual(2);         // other elements are preserved
-       }));
+    it(
+      'should clear bootstrapped component contents',
+      withBody('<div>before</div><button></button><div>after</div>', async () => {
+        let wasOnDestroyCalled = false;
+        @Component({
+          selector: 'button',
+          template: 'button content',
+        })
+        class App {
+          ngOnDestroy() {
+            wasOnDestroyCalled = true;
+          }
+        }
+
+        @NgModule({
+          imports: [BrowserModule],
+          declarations: [App],
+          bootstrap: [App],
+        })
+        class AppModule {}
+        const ngModuleRef = await platformBrowserDynamic().bootstrapModule(AppModule);
+
+        const button = document.body.querySelector('button')!;
+        expect(button.textContent).toEqual('button content');
+        expect(document.body.childNodes.length).toEqual(3);
+
+        ngModuleRef.destroy();
+
+        expect(wasOnDestroyCalled).toEqual(true);
+        expect(document.body.querySelector('button')).toBeFalsy(); // host element is removed
+        expect(document.body.childNodes.length).toEqual(2); // other elements are preserved
+      }),
+    );
   });
 
   describe('schemas', () => {
@@ -233,17 +238,16 @@ describe('NgModule', () => {
         imports: [CommonModule],
         declarations: [MyComp],
       })
-      class MyModule {
-      }
+      class MyModule {}
 
       TestBed.configureTestingModule({imports: [MyModule]});
 
       const spy = spyOn(console, 'error');
       const fixture = TestBed.createComponent(MyComp);
       fixture.detectChanges();
-      expect(spy.calls.mostRecent().args[0])
-          .toMatch(
-              /Can't bind to 'unknown-prop' since it isn't a known property of 'div' \(used in the 'MyComp' component template\)/);
+      expect(spy.calls.mostRecent().args[0]).toMatch(
+        /Can't bind to 'unknown-prop' since it isn't a known property of 'div' \(used in the 'MyComp' component template\)/,
+      );
     });
 
     it('should log an error on unknown props of `ng-template` if NO_ERRORS_SCHEMA is absent', () => {
@@ -258,8 +262,7 @@ describe('NgModule', () => {
       @NgModule({
         declarations: [MyComp],
       })
-      class MyModule {
-      }
+      class MyModule {}
 
       TestBed.configureTestingModule({imports: [MyModule]});
 
@@ -267,9 +270,9 @@ describe('NgModule', () => {
       const fixture = TestBed.createComponent(MyComp);
       fixture.detectChanges();
 
-      expect(spy.calls.mostRecent().args[0])
-          .toMatch(
-              /Can't bind to 'ngIf' since it isn't a known property of 'ng-template' \(used in the 'MyComp' component template\)/);
+      expect(spy.calls.mostRecent().args[0]).toMatch(
+        /Can't bind to 'ngIf' since it isn't a known property of 'ng-template' \(used in the 'MyComp' component template\)/,
+      );
     });
 
     it('should log an error on unknown props of `ng-container` if NO_ERRORS_SCHEMA is absent', () => {
@@ -284,8 +287,7 @@ describe('NgModule', () => {
       @NgModule({
         declarations: [MyComp],
       })
-      class MyModule {
-      }
+      class MyModule {}
 
       TestBed.configureTestingModule({imports: [MyModule]});
 
@@ -293,9 +295,9 @@ describe('NgModule', () => {
       const fixture = TestBed.createComponent(MyComp);
       fixture.detectChanges();
 
-      expect(spy.calls.mostRecent().args[0])
-          .toMatch(
-              /Can't bind to 'ngIf' since it isn't a known property of 'ng-container' \(used in the 'MyComp' component template\)/);
+      expect(spy.calls.mostRecent().args[0]).toMatch(
+        /Can't bind to 'ngIf' since it isn't a known property of 'ng-container' \(used in the 'MyComp' component template\)/,
+      );
     });
 
     it('should log an error on unknown props of `ng-content` if NO_ERRORS_SCHEMA is absent', () => {
@@ -310,8 +312,7 @@ describe('NgModule', () => {
       @NgModule({
         declarations: [MyComp],
       })
-      class MyModule {
-      }
+      class MyModule {}
 
       TestBed.configureTestingModule({imports: [MyModule]});
 
@@ -319,41 +320,39 @@ describe('NgModule', () => {
       const fixture = TestBed.createComponent(MyComp);
       fixture.detectChanges();
 
-      expect(spy.calls.mostRecent().args[0])
-          .toMatch(
-              /Can't bind to 'ngIf' since it isn't a known property of 'ng-content' \(used in the 'MyComp' component template\)/);
+      expect(spy.calls.mostRecent().args[0]).toMatch(
+        /Can't bind to 'ngIf' since it isn't a known property of 'ng-content' \(used in the 'MyComp' component template\)/,
+      );
     });
 
-    it('should throw an error with errorOnUnknownProperties on unknown props if NO_ERRORS_SCHEMA is absent',
-       () => {
-         @Component({
-           selector: 'my-comp',
-           template: `
+    it('should throw an error with errorOnUnknownProperties on unknown props if NO_ERRORS_SCHEMA is absent', () => {
+      @Component({
+        selector: 'my-comp',
+        template: `
           <ng-container *ngIf="condition">
             <div [unknown-prop]="true"></div>
           </ng-container>
         `,
-         })
-         class MyComp {
-           condition = true;
-         }
-
-         @NgModule({
-           imports: [CommonModule],
-           declarations: [MyComp],
-         })
-         class MyModule {
-         }
-
-         TestBed.configureTestingModule({imports: [MyModule], errorOnUnknownProperties: true});
-
-         expect(() => {
-           const fixture = TestBed.createComponent(MyComp);
-           fixture.detectChanges();
-         })
-             .toThrowError(
-                 /NG0303: Can't bind to 'unknown-prop' since it isn't a known property of 'div' \(used in the 'MyComp' component template\)/g);
-       });
+      })
+      class MyComp {
+        condition = true;
+      }
+
+      @NgModule({
+        imports: [CommonModule],
+        declarations: [MyComp],
+      })
+      class MyModule {}
+
+      TestBed.configureTestingModule({imports: [MyModule], errorOnUnknownProperties: true});
+
+      expect(() => {
+        const fixture = TestBed.createComponent(MyComp);
+        fixture.detectChanges();
+      }).toThrowError(
+        /NG0303: Can't bind to 'unknown-prop' since it isn't a known property of 'div' \(used in the 'MyComp' component template\)/g,
+      );
+    });
 
     it('should not throw on unknown props if NO_ERRORS_SCHEMA is present', () => {
       @Component({
@@ -373,8 +372,7 @@ describe('NgModule', () => {
         schemas: [NO_ERRORS_SCHEMA],
         declarations: [MyComp],
       })
-      class MyModule {
-      }
+      class MyModule {}
 
       TestBed.configureTestingModule({imports: [MyModule]});
 
@@ -384,188 +382,167 @@ describe('NgModule', () => {
       }).not.toThrow();
     });
 
-    it('should not throw on unknown props with errorOnUnknownProperties if NO_ERRORS_SCHEMA is present',
-       () => {
-         @Component({
-           selector: 'my-comp',
-           template: `
+    it('should not throw on unknown props with errorOnUnknownProperties if NO_ERRORS_SCHEMA is present', () => {
+      @Component({
+        selector: 'my-comp',
+        template: `
           <ng-container *ngIf="condition">
             <div [unknown-prop]="true"></div>
           </ng-container>
         `,
-         })
-         class MyComp {
-           condition = true;
-         }
-
-         @NgModule({
-           imports: [CommonModule],
-           schemas: [NO_ERRORS_SCHEMA],
-           declarations: [MyComp],
-         })
-         class MyModule {
-         }
-
-         TestBed.configureTestingModule({imports: [MyModule], errorOnUnknownProperties: true});
-
-         expect(() => {
-           const fixture = TestBed.createComponent(MyComp);
-           fixture.detectChanges();
-         }).not.toThrow();
-       });
-
-    it('should log an error about unknown element without CUSTOM_ELEMENTS_SCHEMA for element with dash in tag name',
-       () => {
-         @Component({template: `<custom-el></custom-el>`})
-         class MyComp {
-         }
-
-         const spy = spyOn(console, 'error');
-         TestBed.configureTestingModule({declarations: [MyComp]});
-         const fixture = TestBed.createComponent(MyComp);
-         fixture.detectChanges();
-         expect(spy.calls.mostRecent().args[0]).toMatch(/'custom-el' is not a known element/);
-       });
-
-    it('should log an error about unknown element for a standalone component without CUSTOM_ELEMENTS_SCHEMA',
-       () => {
-         @Component({
-           template: `<custom-el></custom-el>`,
-           standalone: true,
-         })
-         class MyComp {
-         }
-
-         const spy = spyOn(console, 'error');
-         TestBed.configureTestingModule({imports: [MyComp]});
-         const fixture = TestBed.createComponent(MyComp);
-         fixture.detectChanges();
-         expect(spy.calls.mostRecent().args[0]).toMatch(/'custom-el' is not a known element/);
-       });
-
-    it('should not log an error about unknown element for a standalone component with CUSTOM_ELEMENTS_SCHEMA',
-       () => {
-         @Component({
-           template: `<custom-el></custom-el>`,
-           standalone: true,
-           schemas: [CUSTOM_ELEMENTS_SCHEMA],
-         })
-         class MyComp {
-         }
-
-         const spy = spyOn(console, 'error');
-         TestBed.configureTestingModule({imports: [MyComp]});
-         const fixture = TestBed.createComponent(MyComp);
-         fixture.detectChanges();
-         expect(spy).not.toHaveBeenCalled();
-       });
-
-    it('should throw an error about unknown element without CUSTOM_ELEMENTS_SCHEMA for element with dash in tag name',
-       () => {
-         @Component({template: `<custom-el></custom-el>`})
-         class MyComp {
-         }
-
-         TestBed.configureTestingModule({declarations: [MyComp], errorOnUnknownElements: true});
-         expect(() => {
-           const fixture = TestBed.createComponent(MyComp);
-           fixture.detectChanges();
-         }).toThrowError(/NG0304: 'custom-el' is not a known element/g);
-       });
-
-    it('should log an error about unknown element without CUSTOM_ELEMENTS_SCHEMA for element without dash in tag name',
-       () => {
-         @Component({template: `<custom></custom>`})
-         class MyComp {
-         }
-
-         const spy = spyOn(console, 'error');
-         TestBed.configureTestingModule({declarations: [MyComp]});
-         const fixture = TestBed.createComponent(MyComp);
-         fixture.detectChanges();
-         expect(spy.calls.mostRecent().args[0]).toMatch(/'custom' is not a known element/);
-       });
-
-    it('should throw an error about unknown element without CUSTOM_ELEMENTS_SCHEMA for element without dash in tag name',
-       () => {
-         @Component({template: `<custom></custom>`})
-         class MyComp {
-         }
-
-         TestBed.configureTestingModule({declarations: [MyComp], errorOnUnknownElements: true});
-         expect(() => {
-           const fixture = TestBed.createComponent(MyComp);
-           fixture.detectChanges();
-         }).toThrowError(/NG0304: 'custom' is not a known element/g);
-       });
+      })
+      class MyComp {
+        condition = true;
+      }
+
+      @NgModule({
+        imports: [CommonModule],
+        schemas: [NO_ERRORS_SCHEMA],
+        declarations: [MyComp],
+      })
+      class MyModule {}
+
+      TestBed.configureTestingModule({imports: [MyModule], errorOnUnknownProperties: true});
+
+      expect(() => {
+        const fixture = TestBed.createComponent(MyComp);
+        fixture.detectChanges();
+      }).not.toThrow();
+    });
+
+    it('should log an error about unknown element without CUSTOM_ELEMENTS_SCHEMA for element with dash in tag name', () => {
+      @Component({template: `<custom-el></custom-el>`})
+      class MyComp {}
+
+      const spy = spyOn(console, 'error');
+      TestBed.configureTestingModule({declarations: [MyComp]});
+      const fixture = TestBed.createComponent(MyComp);
+      fixture.detectChanges();
+      expect(spy.calls.mostRecent().args[0]).toMatch(/'custom-el' is not a known element/);
+    });
+
+    it('should log an error about unknown element for a standalone component without CUSTOM_ELEMENTS_SCHEMA', () => {
+      @Component({
+        template: `<custom-el></custom-el>`,
+        standalone: true,
+      })
+      class MyComp {}
+
+      const spy = spyOn(console, 'error');
+      TestBed.configureTestingModule({imports: [MyComp]});
+      const fixture = TestBed.createComponent(MyComp);
+      fixture.detectChanges();
+      expect(spy.calls.mostRecent().args[0]).toMatch(/'custom-el' is not a known element/);
+    });
+
+    it('should not log an error about unknown element for a standalone component with CUSTOM_ELEMENTS_SCHEMA', () => {
+      @Component({
+        template: `<custom-el></custom-el>`,
+        standalone: true,
+        schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      })
+      class MyComp {}
+
+      const spy = spyOn(console, 'error');
+      TestBed.configureTestingModule({imports: [MyComp]});
+      const fixture = TestBed.createComponent(MyComp);
+      fixture.detectChanges();
+      expect(spy).not.toHaveBeenCalled();
+    });
+
+    it('should throw an error about unknown element without CUSTOM_ELEMENTS_SCHEMA for element with dash in tag name', () => {
+      @Component({template: `<custom-el></custom-el>`})
+      class MyComp {}
+
+      TestBed.configureTestingModule({declarations: [MyComp], errorOnUnknownElements: true});
+      expect(() => {
+        const fixture = TestBed.createComponent(MyComp);
+        fixture.detectChanges();
+      }).toThrowError(/NG0304: 'custom-el' is not a known element/g);
+    });
+
+    it('should log an error about unknown element without CUSTOM_ELEMENTS_SCHEMA for element without dash in tag name', () => {
+      @Component({template: `<custom></custom>`})
+      class MyComp {}
+
+      const spy = spyOn(console, 'error');
+      TestBed.configureTestingModule({declarations: [MyComp]});
+      const fixture = TestBed.createComponent(MyComp);
+      fixture.detectChanges();
+      expect(spy.calls.mostRecent().args[0]).toMatch(/'custom' is not a known element/);
+    });
+
+    it('should throw an error about unknown element without CUSTOM_ELEMENTS_SCHEMA for element without dash in tag name', () => {
+      @Component({template: `<custom></custom>`})
+      class MyComp {}
+
+      TestBed.configureTestingModule({declarations: [MyComp], errorOnUnknownElements: true});
+      expect(() => {
+        const fixture = TestBed.createComponent(MyComp);
+        fixture.detectChanges();
+      }).toThrowError(/NG0304: 'custom' is not a known element/g);
+    });
 
     it('should report unknown property bindings on ng-content', () => {
       @Component({template: `<ng-content *unknownProp="123"></ng-content>`})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App]});
       const spy = spyOn(console, 'error');
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
-      expect(spy.calls.mostRecent()?.args[0])
-          .toMatch(
-              /Can't bind to 'unknownProp' since it isn't a known property of 'ng-content' \(used in the 'App' component template\)/);
+      expect(spy.calls.mostRecent()?.args[0]).toMatch(
+        /Can't bind to 'unknownProp' since it isn't a known property of 'ng-content' \(used in the 'App' component template\)/,
+      );
     });
 
-    it('should throw an error on unknown property bindings on ng-content when errorOnUnknownProperties is enabled',
-       () => {
-         @Component({template: `<ng-content *unknownProp="123"></ng-content>`})
-         class App {
-         }
-
-         TestBed.configureTestingModule({declarations: [App], errorOnUnknownProperties: true});
-         expect(() => {
-           const fixture = TestBed.createComponent(App);
-           fixture.detectChanges();
-         })
-             .toThrowError(
-                 /NG0303: Can't bind to 'unknownProp' since it isn't a known property of 'ng-content' \(used in the 'App' component template\)/g);
-       });
+    it('should throw an error on unknown property bindings on ng-content when errorOnUnknownProperties is enabled', () => {
+      @Component({template: `<ng-content *unknownProp="123"></ng-content>`})
+      class App {}
+
+      TestBed.configureTestingModule({declarations: [App], errorOnUnknownProperties: true});
+      expect(() => {
+        const fixture = TestBed.createComponent(App);
+        fixture.detectChanges();
+      }).toThrowError(
+        /NG0303: Can't bind to 'unknownProp' since it isn't a known property of 'ng-content' \(used in the 'App' component template\)/g,
+      );
+    });
 
     it('should report unknown property bindings on ng-container', () => {
       @Component({template: `<ng-container [unknown-prop]="123"></ng-container>`})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App]});
       const spy = spyOn(console, 'error');
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
-      expect(spy.calls.mostRecent()?.args[0])
-          .toMatch(
-              /Can't bind to 'unknown-prop' since it isn't a known property of 'ng-container' \(used in the 'App' component template\)/);
+      expect(spy.calls.mostRecent()?.args[0]).toMatch(
+        /Can't bind to 'unknown-prop' since it isn't a known property of 'ng-container' \(used in the 'App' component template\)/,
+      );
     });
 
-    it('should throw error on unknown property bindings on ng-container when errorOnUnknownProperties is enabled',
-       () => {
-         @Component({template: `<ng-container [unknown-prop]="123"></ng-container>`})
-         class App {
-         }
-
-         TestBed.configureTestingModule({declarations: [App], errorOnUnknownProperties: true});
-         expect(() => {
-           const fixture = TestBed.createComponent(App);
-           fixture.detectChanges();
-         })
-             .toThrowError(
-                 /NG0303: Can't bind to 'unknown-prop' since it isn't a known property of 'ng-container' \(used in the 'App' component template\)/g);
-       });
+    it('should throw error on unknown property bindings on ng-container when errorOnUnknownProperties is enabled', () => {
+      @Component({template: `<ng-container [unknown-prop]="123"></ng-container>`})
+      class App {}
+
+      TestBed.configureTestingModule({declarations: [App], errorOnUnknownProperties: true});
+      expect(() => {
+        const fixture = TestBed.createComponent(App);
+        fixture.detectChanges();
+      }).toThrowError(
+        /NG0303: Can't bind to 'unknown-prop' since it isn't a known property of 'ng-container' \(used in the 'App' component template\)/g,
+      );
+    });
 
     it('should log an error on unknown props and include a note on Web Components', () => {
       @Component({
         selector: 'may-be-web-component',
         template: `...`,
       })
-      class MaybeWebComp {
-      }
+      class MaybeWebComp {}
 
       @Component({
         selector: 'my-comp',
@@ -578,8 +555,7 @@ describe('NgModule', () => {
       @NgModule({
         declarations: [MyComp, MaybeWebComp],
       })
-      class MyModule {
-      }
+      class MyModule {}
 
       TestBed.configureTestingModule({imports: [MyModule]});
 
@@ -600,72 +576,74 @@ describe('NgModule', () => {
     });
 
     KNOWN_CONTROL_FLOW_DIRECTIVES.forEach((correspondingImport, directive) => {
-      it(`should produce a warning when the '${directive}' directive ` +
-             `is used in a template, but not imported in corresponding NgModule`,
-         () => {
-           @Component({
-             template: `<div *${directive}="expr"></div>`,
-           })
-           class App {
-             expr = true;
-           }
-
-           @NgModule({
-             declarations: [App],
-           })
-           class Module {
-           }
-
-           TestBed.configureTestingModule({imports: [Module]});
-           const spy = spyOn(console, 'error');
-           const fixture = TestBed.createComponent(App);
-           fixture.detectChanges();
-
-           const errorMessage = spy.calls.mostRecent()?.args[0];
-
-           // Split the error message into chunks, so it's easier to debug if needed.
-           const lines = [
-             `NG0303: Can't bind to '${
-                 directive}' since it isn't a known property of 'div' \\(used in the 'App' component template\\).`,
-             `If the '${directive}' is an Angular control flow directive, please make sure ` +
-                 `that either the '${
-                     correspondingImport}' directive or the 'CommonModule' is a part of an @NgModule where this component is declared.`,
-           ];
-           lines.forEach((line) => expect(errorMessage).toMatch(line));
-         });
-
-      it(`should produce a warning when the '${directive}' directive ` +
-             `is used in a template, but not imported in a standalone component`,
-         () => {
-           @Component({
-             standalone: true,
-             template: `<div *${directive}="expr"></div>`,
-           })
-           class App {
-             expr = true;
-           }
-
-           const spy = spyOn(console, 'error');
-           const fixture = TestBed.createComponent(App);
-           fixture.detectChanges();
-
-           const errorMessage = spy.calls.mostRecent()?.args[0];
-
-           // Split the error message into chunks, so it's easier to debug if needed.
-           const lines = [
-             `NG0303: Can't bind to '${
-                 directive}' since it isn't a known property of 'div' \\(used in the 'App' component template\\).`,
-             `If the '${directive}' is an Angular control flow directive, please make sure ` +
-                 `that either the '${
-                     correspondingImport}' directive or the 'CommonModule' is included in the '@Component.imports' of this component.`,
-           ];
-           lines.forEach((line) => expect(errorMessage).toMatch(line));
-         });
+      it(
+        `should produce a warning when the '${directive}' directive ` +
+          `is used in a template, but not imported in corresponding NgModule`,
+        () => {
+          @Component({
+            template: `<div *${directive}="expr"></div>`,
+          })
+          class App {
+            expr = true;
+          }
+
+          @NgModule({
+            declarations: [App],
+          })
+          class Module {}
+
+          TestBed.configureTestingModule({imports: [Module]});
+          const spy = spyOn(console, 'error');
+          const fixture = TestBed.createComponent(App);
+          fixture.detectChanges();
+
+          const errorMessage = spy.calls.mostRecent()?.args[0];
+
+          // Split the error message into chunks, so it's easier to debug if needed.
+          const lines = [
+            `NG0303: Can't bind to '${directive}' since it isn't a known property of 'div' \\(used in the 'App' component template\\).`,
+            `If the '${directive}' is an Angular control flow directive, please make sure ` +
+              `that either the '${correspondingImport}' directive or the 'CommonModule' is a part of an @NgModule where this component is declared.`,
+          ];
+          lines.forEach((line) => expect(errorMessage).toMatch(line));
+        },
+      );
+
+      it(
+        `should produce a warning when the '${directive}' directive ` +
+          `is used in a template, but not imported in a standalone component`,
+        () => {
+          @Component({
+            standalone: true,
+            template: `<div *${directive}="expr"></div>`,
+          })
+          class App {
+            expr = true;
+          }
+
+          const spy = spyOn(console, 'error');
+          const fixture = TestBed.createComponent(App);
+          fixture.detectChanges();
+
+          const errorMessage = spy.calls.mostRecent()?.args[0];
+
+          // Split the error message into chunks, so it's easier to debug if needed.
+          const lines = [
+            `NG0303: Can't bind to '${directive}' since it isn't a known property of 'div' \\(used in the 'App' component template\\).`,
+            `If the '${directive}' is an Angular control flow directive, please make sure ` +
+              `that either the '${correspondingImport}' directive or the 'CommonModule' is included in the '@Component.imports' of this component.`,
+          ];
+          lines.forEach((line) => expect(errorMessage).toMatch(line));
+        },
+      );
     });
 
     describe('AOT-compiled components', () => {
       function createComponent(
-          template: (rf: any) => void, vars: number, consts?: (number|string)[][]) {
+        template: (rf: any) => void,
+        vars: number,
+        consts?: (number | string)[][],
+      ) {
         class Comp {
           static ɵfac = () => new Comp();
           static ɵcmp = defineComponent({
@@ -679,14 +657,16 @@ describe('NgModule', () => {
           });
         }
         setClassMetadata(
-            Comp,
-            [
-              {
-                type: Component,
-                args: [{selector: 'comp', template: '...'}],
-              },
-            ],
-            null, null);
+          Comp,
+          [
+            {
+              type: Component,
+              args: [{selector: 'comp', template: '...'}],
+            },
+          ],
+          null,
+          null,
+        );
         return Comp;
       }
 
@@ -696,19 +676,21 @@ describe('NgModule', () => {
           static ɵinj = defineInjector({});
         }
         setClassMetadata(
-            Module,
-            [
-              {
-                type: NgModule,
-                args: [
-                  {
-                    declarations: [Comp],
-                    schemas: [NO_ERRORS_SCHEMA],
-                  },
-                ],
-              },
-            ],
-            null, null);
+          Module,
+          [
+            {
+              type: NgModule,
+              args: [
+                {
+                  declarations: [Comp],
+                  schemas: [NO_ERRORS_SCHEMA],
+                },
+              ],
+            },
+          ],
+          null,
+          null,
+        );
         return Module;
       }
 
@@ -756,14 +738,18 @@ describe('NgModule', () => {
          *  })
          *  class MyComp {}
          */
-        const MyComp = createComponent((rf: any) => {
-          if (rf & 1) {
-            element(0, 'div', 0);
-          }
-          if (rf & 2) {
-            property('foo', true);
-          }
-        }, 1, [[3, 'foo']]);
+        const MyComp = createComponent(
+          (rf: any) => {
+            if (rf & 1) {
+              element(0, 'div', 0);
+            }
+            if (rf & 2) {
+              property('foo', true);
+            }
+          },
+          1,
+          [[3, 'foo']],
+        );
 
         /*
          *  @NgModule({
@@ -787,8 +773,7 @@ describe('NgModule', () => {
 
     it('should not log an error about unknown elements with CUSTOM_ELEMENTS_SCHEMA', () => {
       @Component({template: `<custom-el></custom-el>`})
-      class MyComp {
-      }
+      class MyComp {}
 
       const spy = spyOn(console, 'error');
       TestBed.configureTestingModule({
@@ -803,8 +788,7 @@ describe('NgModule', () => {
 
     it('should not throw an error about unknown elements with CUSTOM_ELEMENTS_SCHEMA', () => {
       @Component({template: `<custom-el></custom-el>`})
-      class MyComp {
-      }
+      class MyComp {}
 
       const spy = spyOn(console, 'error');
       TestBed.configureTestingModule({
@@ -822,8 +806,7 @@ describe('NgModule', () => {
 
     it('should not log an error about unknown elements with NO_ERRORS_SCHEMA', () => {
       @Component({template: `<custom-el></custom-el>`})
-      class MyComp {
-      }
+      class MyComp {}
 
       const spy = spyOn(console, 'error');
       TestBed.configureTestingModule({
@@ -838,8 +821,7 @@ describe('NgModule', () => {
 
     it('should not throw an error about unknown elements with NO_ERRORS_SCHEMA', () => {
       @Component({template: `<custom-el></custom-el>`})
-      class MyComp {
-      }
+      class MyComp {}
 
       const spy = spyOn(console, 'error');
       TestBed.configureTestingModule({
@@ -860,12 +842,10 @@ describe('NgModule', () => {
         selector: 'custom-el',
         template: '',
       })
-      class CustomEl {
-      }
+      class CustomEl {}
 
       @Component({template: `<custom-el></custom-el>`})
-      class MyComp {
-      }
+      class MyComp {}
 
       const spy = spyOn(console, 'error');
       TestBed.configureTestingModule({declarations: [MyComp, CustomEl]});
@@ -880,12 +860,10 @@ describe('NgModule', () => {
         selector: 'custom-el',
         template: '',
       })
-      class CustomEl {
-      }
+      class CustomEl {}
 
       @Component({template: `<custom-el></custom-el>`})
-      class MyComp {
-      }
+      class MyComp {}
 
       const spy = spyOn(console, 'error');
       TestBed.configureTestingModule({
@@ -910,12 +888,10 @@ describe('NgModule', () => {
           </svg>
         `,
       })
-      class MyComp {
-      }
+      class MyComp {}
 
       @NgModule({declarations: [MyComp]})
-      class MyModule {
-      }
+      class MyModule {}
 
       const spy = spyOn(console, 'error');
       TestBed.configureTestingModule({imports: [MyModule]});
@@ -935,12 +911,10 @@ describe('NgModule', () => {
           </svg>
         `,
       })
-      class MyComp {
-      }
+      class MyComp {}
 
       @NgModule({declarations: [MyComp]})
-      class MyModule {
-      }
+      class MyModule {}
 
       const spy = spyOn(console, 'error');
       TestBed.configureTestingModule({imports: [MyModule], errorOnUnknownElements: true});
@@ -960,14 +934,12 @@ describe('NgModule', () => {
       @NgModule({
         providers: [{provide: TOKEN_A, useValue: 'TokenValueA'}],
       })
-      class AppModule {
-      }
+      class AppModule {}
 
       @NgModule({
         providers: [{provide: TOKEN_B, useValue: 'TokenValueB'}],
       })
-      class ChildModule {
-      }
+      class ChildModule {}
 
       // Simple case, just passing NgModule class.
       const ngModuleRef = createNgModule(AppModule);
@@ -985,7 +957,7 @@ describe('NgModule', () => {
 
   it('should be able to use DI through the NgModuleRef inside the module constructor', () => {
     const token = new InjectionToken<string>('token');
-    let value: string|undefined;
+    let value: string | undefined;
 
     @NgModule({
       imports: [CommonModule],
@@ -1004,23 +976,22 @@ describe('NgModule', () => {
     expect(value).toBe('foo');
   });
 
-  it('should be able to create a component through the ComponentFactoryResolver of an NgModuleRef in a module constructor',
-     () => {
-       let componentInstance: TestCmp|undefined;
-
-       @NgModule({
-         declarations: [TestCmp],
-         exports: [TestCmp],
-       })
-       class MyModule {
-         constructor(ngModuleRef: NgModuleRef<any>) {
-           const factory = ngModuleRef.componentFactoryResolver.resolveComponentFactory(TestCmp);
-           componentInstance = factory.create(ngModuleRef.injector).instance;
-         }
-       }
-
-       TestBed.configureTestingModule({imports: [MyModule]});
-       TestBed.createComponent(TestCmp);
-       expect(componentInstance).toBeInstanceOf(TestCmp);
-     });
+  it('should be able to create a component through the ComponentFactoryResolver of an NgModuleRef in a module constructor', () => {
+    let componentInstance: TestCmp | undefined;
+
+    @NgModule({
+      declarations: [TestCmp],
+      exports: [TestCmp],
+    })
+    class MyModule {
+      constructor(ngModuleRef: NgModuleRef<any>) {
+        const factory = ngModuleRef.componentFactoryResolver.resolveComponentFactory(TestCmp);
+        componentInstance = factory.create(ngModuleRef.injector).instance;
+      }
+    }
+
+    TestBed.configureTestingModule({imports: [MyModule]});
+    TestBed.createComponent(TestCmp);
+    expect(componentInstance).toBeInstanceOf(TestCmp);
+  });
 });
diff --git a/packages/core/test/acceptance/ngmodule_scope_spec.ts b/packages/core/test/acceptance/ngmodule_scope_spec.ts
index 3f6e167b9a7ee..2dee9b4668215 100644
--- a/packages/core/test/acceptance/ngmodule_scope_spec.ts
+++ b/packages/core/test/acceptance/ngmodule_scope_spec.ts
@@ -15,44 +15,43 @@ describe('NgModule scopes', () => {
   beforeEach(destroyPlatform);
   afterEach(destroyPlatform);
 
-  it('should apply NgModule scope to a component that extends another component class',
-     withBody('<my-app></my-app>', async () => {
-       // Regression test for https://github.com/angular/angular/issues/37105
-       //
-       // This test reproduces a scenario that used to fail due to a reentrancy issue in Ivy's JIT
-       // compiler. Extending a component from a decorated baseclass would inadvertently compile
-       // the subclass twice. NgModule scope information would only be present on the initial
-       // compilation, but then overwritten during the second compilation. This meant that the
-       // baseclass did not have a NgModule scope, such that declarations are not available.
-       //
-       // The scenario cannot be tested using TestBed as it influences how NgModule
-       // scopes are applied, preventing the issue from occurring.
-
-       @Pipe({name: 'multiply'})
-       class MultiplyPipe implements PipeTransform {
-         transform(value: number, factor: number): number {
-           return value * factor;
-         }
-       }
-
-       @Component({template: '...'})
-       class BaseComponent {
-       }
-
-       @Component({selector: 'my-app', template: 'App - {{ 3 | multiply:2 }}'})
-       class App extends BaseComponent {
-       }
-
-       @NgModule({
-         imports: [BrowserModule],
-         declarations: [App, BaseComponent, MultiplyPipe],
-         bootstrap: [App],
-       })
-       class Mod {
-       }
-
-       const ngModuleRef = await platformBrowserDynamic().bootstrapModule(Mod);
-       expect(document.body.textContent).toContain('App - 6');
-       ngModuleRef.destroy();
-     }));
+  it(
+    'should apply NgModule scope to a component that extends another component class',
+    withBody('<my-app></my-app>', async () => {
+      // Regression test for https://github.com/angular/angular/issues/37105
+      //
+      // This test reproduces a scenario that used to fail due to a reentrancy issue in Ivy's JIT
+      // compiler. Extending a component from a decorated baseclass would inadvertently compile
+      // the subclass twice. NgModule scope information would only be present on the initial
+      // compilation, but then overwritten during the second compilation. This meant that the
+      // baseclass did not have a NgModule scope, such that declarations are not available.
+      //
+      // The scenario cannot be tested using TestBed as it influences how NgModule
+      // scopes are applied, preventing the issue from occurring.
+
+      @Pipe({name: 'multiply'})
+      class MultiplyPipe implements PipeTransform {
+        transform(value: number, factor: number): number {
+          return value * factor;
+        }
+      }
+
+      @Component({template: '...'})
+      class BaseComponent {}
+
+      @Component({selector: 'my-app', template: 'App - {{ 3 | multiply:2 }}'})
+      class App extends BaseComponent {}
+
+      @NgModule({
+        imports: [BrowserModule],
+        declarations: [App, BaseComponent, MultiplyPipe],
+        bootstrap: [App],
+      })
+      class Mod {}
+
+      const ngModuleRef = await platformBrowserDynamic().bootstrapModule(Mod);
+      expect(document.body.textContent).toContain('App - 6');
+      ngModuleRef.destroy();
+    }),
+  );
 });
diff --git a/packages/core/test/acceptance/outputs_spec.ts b/packages/core/test/acceptance/outputs_spec.ts
index 10a234722f7a0..b661fba30ac1e 100644
--- a/packages/core/test/acceptance/outputs_spec.ts
+++ b/packages/core/test/acceptance/outputs_spec.ts
@@ -7,7 +7,15 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {Component, Directive, EventEmitter, Input, OnDestroy, Output, ViewChild} from '@angular/core';
+import {
+  Component,
+  Directive,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  ViewChild,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 describe('outputs', () => {
@@ -61,8 +69,9 @@ describe('outputs', () => {
     let counter = 0;
     let resetCounter = 0;
 
-    @Component(
-        {template: '<button-toggle (change)="onChange()" (reset)="onReset()"></button-toggle>'})
+    @Component({
+      template: '<button-toggle (change)="onChange()" (reset)="onReset()"></button-toggle>',
+    })
     class App {
       @ViewChild(ButtonToggle) buttonToggle!: ButtonToggle;
       onChange() {
@@ -103,8 +112,9 @@ describe('outputs', () => {
   it('should unsubscribe from output when view is destroyed', () => {
     let counter = 0;
 
-    @Component(
-        {template: '<button-toggle *ngIf="condition" (change)="onChange()"></button-toggle>'})
+    @Component({
+      template: '<button-toggle *ngIf="condition" (change)="onChange()"></button-toggle>',
+    })
     class App {
       @ViewChild(ButtonToggle) buttonToggle!: ButtonToggle;
       condition = true;
@@ -136,7 +146,7 @@ describe('outputs', () => {
         <div *ngIf="condition">
           <button-toggle *ngIf="condition2" (change)="onChange()"></button-toggle>
         </div>
-      `
+      `,
     })
     class App {
       @ViewChild(ButtonToggle) buttonToggle!: ButtonToggle;
@@ -173,7 +183,7 @@ describe('outputs', () => {
           <button-toggle (change)="onChange()"></button-toggle>
           <destroy-comp></destroy-comp>
         </div>
-      `
+      `,
     })
     class App {
       @ViewChild(ButtonToggle) buttonToggle!: ButtonToggle;
@@ -187,8 +197,10 @@ describe('outputs', () => {
         changeCounter++;
       }
     }
-    TestBed.configureTestingModule(
-        {imports: [CommonModule], declarations: [App, ButtonToggle, DestroyComp]});
+    TestBed.configureTestingModule({
+      imports: [CommonModule],
+      declarations: [App, ButtonToggle, DestroyComp],
+    });
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
     const {buttonToggle, destroyComp} = fixture.componentInstance;
@@ -269,7 +281,7 @@ describe('outputs', () => {
 
     @Component({
       template:
-          '<button-toggle (change)="onChange()" otherChangeDir [change]="change"></button-toggle>'
+        '<button-toggle (change)="onChange()" otherChangeDir [change]="change"></button-toggle>',
     })
     class App {
       @ViewChild(ButtonToggle) buttonToggle!: ButtonToggle;
diff --git a/packages/core/test/acceptance/pending_tasks_spec.ts b/packages/core/test/acceptance/pending_tasks_spec.ts
index 25b107b8a1565..28750cc55cb77 100644
--- a/packages/core/test/acceptance/pending_tasks_spec.ts
+++ b/packages/core/test/acceptance/pending_tasks_spec.ts
@@ -85,9 +85,9 @@ function applicationRefIsStable(applicationRef: ApplicationRef) {
 
 function hasPendingTasks(pendingTasks: PendingTasks): Promise<boolean> {
   return of(EMPTY)
-             .pipe(
-                 withLatestFrom(pendingTasks.hasPendingTasks),
-                 map(([_, hasPendingTasks]) => hasPendingTasks),
-                 )
-             .toPromise() as Promise<boolean>;
+    .pipe(
+      withLatestFrom(pendingTasks.hasPendingTasks),
+      map(([_, hasPendingTasks]) => hasPendingTasks),
+    )
+    .toPromise() as Promise<boolean>;
 }
diff --git a/packages/core/test/acceptance/pipe_spec.ts b/packages/core/test/acceptance/pipe_spec.ts
index 19122cd156dcc..b3722ffbf05d7 100644
--- a/packages/core/test/acceptance/pipe_spec.ts
+++ b/packages/core/test/acceptance/pipe_spec.ts
@@ -7,7 +7,27 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, Inject, Injectable, InjectionToken, Input, NgModule, OnChanges, OnDestroy, Pipe, PipeTransform, SimpleChanges, ViewChild, ɵɵdefineInjectable, ɵɵdefinePipe, ɵɵgetInheritedFactory, ɵɵinject} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Directive,
+  Inject,
+  Injectable,
+  InjectionToken,
+  Input,
+  NgModule,
+  OnChanges,
+  OnDestroy,
+  Pipe,
+  PipeTransform,
+  SimpleChanges,
+  ViewChild,
+  ɵɵdefineInjectable,
+  ɵɵdefinePipe,
+  ɵɵgetInheritedFactory,
+  ɵɵinject,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
@@ -111,8 +131,7 @@ describe('pipe', () => {
       declarations: [PipeA],
       exports: [PipeA],
     })
-    class ModuleA {
-    }
+    class ModuleA {}
 
     @Pipe({name: 'number'})
     class PipeB implements PipeTransform {
@@ -139,53 +158,50 @@ describe('pipe', () => {
     expect(fixture.nativeElement.textContent).toBe('PipeB: 10');
   });
 
-  it('should respect imported module order when selecting Pipe (last imported Pipe is used)',
-     () => {
-       @Pipe({name: 'number'})
-       class PipeA implements PipeTransform {
-         transform(value: any) {
-           return `PipeA: ${value}`;
-         }
-       }
-
-       @NgModule({
-         declarations: [PipeA],
-         exports: [PipeA],
-       })
-       class ModuleA {
-       }
-
-       @Pipe({name: 'number'})
-       class PipeB implements PipeTransform {
-         transform(value: any) {
-           return `PipeB: ${value}`;
-         }
-       }
-
-       @NgModule({
-         declarations: [PipeB],
-         exports: [PipeB],
-       })
-       class ModuleB {
-       }
-
-       @Component({
-         selector: 'app',
-         template: '{{ count | number }}',
-       })
-       class App {
-         count = 10;
-       }
-
-       TestBed.configureTestingModule({
-         imports: [ModuleA, ModuleB],
-         declarations: [App],
-       });
-       const fixture = TestBed.createComponent(App);
-       fixture.detectChanges();
-
-       expect(fixture.nativeElement.textContent).toBe('PipeB: 10');
-     });
+  it('should respect imported module order when selecting Pipe (last imported Pipe is used)', () => {
+    @Pipe({name: 'number'})
+    class PipeA implements PipeTransform {
+      transform(value: any) {
+        return `PipeA: ${value}`;
+      }
+    }
+
+    @NgModule({
+      declarations: [PipeA],
+      exports: [PipeA],
+    })
+    class ModuleA {}
+
+    @Pipe({name: 'number'})
+    class PipeB implements PipeTransform {
+      transform(value: any) {
+        return `PipeB: ${value}`;
+      }
+    }
+
+    @NgModule({
+      declarations: [PipeB],
+      exports: [PipeB],
+    })
+    class ModuleB {}
+
+    @Component({
+      selector: 'app',
+      template: '{{ count | number }}',
+    })
+    class App {
+      count = 10;
+    }
+
+    TestBed.configureTestingModule({
+      imports: [ModuleA, ModuleB],
+      declarations: [App],
+    });
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toBe('PipeB: 10');
+  });
 
   it('should do nothing when no change', () => {
     let calls: any[] = [];
@@ -288,7 +304,7 @@ describe('pipe', () => {
     class ParentPipe {
       constructor(protected sayHelloService: SayHelloService) {}
 
-      static ɵfac = (t?: any) => new(t || ParentPipe)(ɵɵinject(SayHelloService));
+      static ɵfac = (t?: any) => new (t || ParentPipe)(ɵɵinject(SayHelloService));
       static ɵprov = ɵɵdefineInjectable({token: ParentPipe, factory: ParentPipe.ɵfac});
     }
 
@@ -300,15 +316,19 @@ describe('pipe', () => {
       }
 
       static override ɵfac = (t?: any) => ɵɵgetInheritedFactory(t || SayHelloPipe)(SayHelloPipe);
-      static ɵpipe =
-          ɵɵdefinePipe({name: 'sayHello', type: SayHelloPipe, pure: true, standalone: true});
+      static ɵpipe = ɵɵdefinePipe({
+        name: 'sayHello',
+        type: SayHelloPipe,
+        pure: true,
+        standalone: true,
+      });
     }
 
     @Component({
       standalone: true,
       selector: 'app',
       template: '{{ value | sayHello }}',
-      imports: [SayHelloPipe]
+      imports: [SayHelloPipe],
     })
     class AppComponent {
       value = 'test';
@@ -372,8 +392,8 @@ describe('pipe', () => {
       }
     }
 
-    beforeEach(() => impurePipeInstances = []);
-    afterEach(() => impurePipeInstances = []);
+    beforeEach(() => (impurePipeInstances = []));
+    afterEach(() => (impurePipeInstances = []));
 
     it('should call impure pipes on each change detection run', () => {
       @Component({
@@ -404,8 +424,7 @@ describe('pipe', () => {
           <div [id]="2 | countingImpurePipe">{{3 | countingImpurePipe}}</div>
         `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, CountingImpurePipe]});
       TestBed.createComponent(App);
@@ -438,8 +457,7 @@ describe('pipe', () => {
       @Component({
         template: '{{1 | pipeWithOnDestroy}}',
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, PipeWithOnDestroy]});
       const fixture = TestBed.createComponent(App);
@@ -503,7 +521,7 @@ describe('pipe', () => {
 
       TestBed.configureTestingModule({
         declarations: [App, ConcatPipe],
-        providers: [{provide: token, useValue: new Service()}]
+        providers: [{provide: token, useValue: new Service()}],
       });
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -518,8 +536,7 @@ describe('pipe', () => {
       }
 
       @NgModule({providers: [Service]})
-      class SomeModule {
-      }
+      class SomeModule {}
 
       @Pipe({name: 'myConcatPipe'})
       class ConcatPipe implements PipeTransform {
@@ -543,111 +560,109 @@ describe('pipe', () => {
       expect(fixture.nativeElement.textContent).toBe('MyComponent Title - Service Title');
     });
 
-    it('should inject the ChangeDetectorRef of the containing view when using pipe inside a component input',
-       () => {
-         let pipeChangeDetectorRef: ChangeDetectorRef|undefined;
-
-         @Component({
-           changeDetection: ChangeDetectionStrategy.OnPush,
-           selector: 'some-comp',
-           template: 'Inner value: "{{displayValue}}"',
-         })
-         class SomeComp {
-           @Input() value: any;
-           displayValue = 0;
-         }
-
-         @Component({
-           changeDetection: ChangeDetectionStrategy.OnPush,
-           template: `
+    it('should inject the ChangeDetectorRef of the containing view when using pipe inside a component input', () => {
+      let pipeChangeDetectorRef: ChangeDetectorRef | undefined;
+
+      @Component({
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        selector: 'some-comp',
+        template: 'Inner value: "{{displayValue}}"',
+      })
+      class SomeComp {
+        @Input() value: any;
+        displayValue = 0;
+      }
+
+      @Component({
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: `
               <some-comp [value]="pipeValue | testPipe"></some-comp>
               Outer value: "{{displayValue}}"
             `,
-         })
-         class App {
-           @Input() something: any;
-           @ViewChild(SomeComp) comp!: SomeComp;
-           pipeValue = 10;
-           displayValue = 0;
-         }
-
-         @Pipe({name: 'testPipe'})
-         class TestPipe implements PipeTransform {
-           constructor(changeDetectorRef: ChangeDetectorRef) {
-             pipeChangeDetectorRef = changeDetectorRef;
-           }
-
-           transform() {
-             return '';
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [App, SomeComp, TestPipe]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         fixture.componentInstance.displayValue = 1;
-         fixture.componentInstance.comp.displayValue = 1;
-         pipeChangeDetectorRef!.markForCheck();
-         fixture.detectChanges();
-
-         expect(fixture.nativeElement.textContent).toContain('Outer value: "1"');
-         expect(fixture.nativeElement.textContent).toContain('Inner value: "0"');
-       });
-
-    it('should inject the ChangeDetectorRef of the containing view when using pipe inside a component input which has child nodes',
-       () => {
-         let pipeChangeDetectorRef: ChangeDetectorRef|undefined;
-
-         @Component({
-           changeDetection: ChangeDetectionStrategy.OnPush,
-           selector: 'some-comp',
-           template: 'Inner value: "{{displayValue}}" <ng-content></ng-content>',
-         })
-         class SomeComp {
-           @Input() value: any;
-           displayValue = 0;
-         }
-
-         @Component({
-           changeDetection: ChangeDetectionStrategy.OnPush,
-           template: `
+      })
+      class App {
+        @Input() something: any;
+        @ViewChild(SomeComp) comp!: SomeComp;
+        pipeValue = 10;
+        displayValue = 0;
+      }
+
+      @Pipe({name: 'testPipe'})
+      class TestPipe implements PipeTransform {
+        constructor(changeDetectorRef: ChangeDetectorRef) {
+          pipeChangeDetectorRef = changeDetectorRef;
+        }
+
+        transform() {
+          return '';
+        }
+      }
+
+      TestBed.configureTestingModule({declarations: [App, SomeComp, TestPipe]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      fixture.componentInstance.displayValue = 1;
+      fixture.componentInstance.comp.displayValue = 1;
+      pipeChangeDetectorRef!.markForCheck();
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.textContent).toContain('Outer value: "1"');
+      expect(fixture.nativeElement.textContent).toContain('Inner value: "0"');
+    });
+
+    it('should inject the ChangeDetectorRef of the containing view when using pipe inside a component input which has child nodes', () => {
+      let pipeChangeDetectorRef: ChangeDetectorRef | undefined;
+
+      @Component({
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        selector: 'some-comp',
+        template: 'Inner value: "{{displayValue}}" <ng-content></ng-content>',
+      })
+      class SomeComp {
+        @Input() value: any;
+        displayValue = 0;
+      }
+
+      @Component({
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: `
               <some-comp [value]="pipeValue | testPipe">
                 <div>Hello</div>
               </some-comp>
               Outer value: "{{displayValue}}"
             `,
-         })
-         class App {
-           @Input() something: any;
-           @ViewChild(SomeComp) comp!: SomeComp;
-           pipeValue = 10;
-           displayValue = 0;
-         }
-
-         @Pipe({name: 'testPipe'})
-         class TestPipe implements PipeTransform {
-           constructor(changeDetectorRef: ChangeDetectorRef) {
-             pipeChangeDetectorRef = changeDetectorRef;
-           }
-
-           transform() {
-             return '';
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [App, SomeComp, TestPipe]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-
-         fixture.componentInstance.displayValue = 1;
-         fixture.componentInstance.comp.displayValue = 1;
-         pipeChangeDetectorRef!.markForCheck();
-         fixture.detectChanges();
-
-         expect(fixture.nativeElement.textContent).toContain('Outer value: "1"');
-         expect(fixture.nativeElement.textContent).toContain('Inner value: "0"');
-       });
+      })
+      class App {
+        @Input() something: any;
+        @ViewChild(SomeComp) comp!: SomeComp;
+        pipeValue = 10;
+        displayValue = 0;
+      }
+
+      @Pipe({name: 'testPipe'})
+      class TestPipe implements PipeTransform {
+        constructor(changeDetectorRef: ChangeDetectorRef) {
+          pipeChangeDetectorRef = changeDetectorRef;
+        }
+
+        transform() {
+          return '';
+        }
+      }
+
+      TestBed.configureTestingModule({declarations: [App, SomeComp, TestPipe]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+
+      fixture.componentInstance.displayValue = 1;
+      fixture.componentInstance.comp.displayValue = 1;
+      pipeChangeDetectorRef!.markForCheck();
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.textContent).toContain('Outer value: "1"');
+      expect(fixture.nativeElement.textContent).toContain('Inner value: "0"');
+    });
   });
 
   describe('pure pipe error handling', () => {
@@ -663,8 +678,9 @@ describe('pipe', () => {
         val = 'anything';
       }
 
-      const fixture =
-          TestBed.configureTestingModule({declarations: [App, ThrowPipe]}).createComponent(App);
+      const fixture = TestBed.configureTestingModule({
+        declarations: [App, ThrowPipe],
+      }).createComponent(App);
 
       // first invocation
       expect(() => fixture.detectChanges()).toThrowError(/ThrowPipeError/);
@@ -673,7 +689,6 @@ describe('pipe', () => {
       fixture.detectChanges();
     });
 
-
     it('should display the last known result from a pure pipe when it throws', () => {
       @Pipe({name: 'throwPipe', pure: true})
       class ThrowPipe implements PipeTransform {
@@ -691,20 +706,19 @@ describe('pipe', () => {
         val = 'anything';
       }
 
-      const fixture =
-          TestBed.configureTestingModule({declarations: [App, ThrowPipe]}).createComponent(App);
+      const fixture = TestBed.configureTestingModule({
+        declarations: [App, ThrowPipe],
+      }).createComponent(App);
 
       // first invocation - no error thrown
       fixture.detectChanges();
       expect(fixture.nativeElement.textContent).toBe('anything');
 
-
       // second invocation when the error is thrown
       fixture.componentInstance.val = 'KO';
       expect(() => fixture.detectChanges()).toThrowError(/ThrowPipeError/);
       expect(fixture.nativeElement.textContent).toBe('anything');
 
-
       // third invocation with no changes to input - should not thrown and preserve the last known
       // results
       fixture.detectChanges();
@@ -714,201 +728,194 @@ describe('pipe', () => {
     describe('pure pipe error handling with multiple arguments', () => {
       const args: string[] = new Array(10).fill(':0');
       for (let numberOfPipeArgs = 0; numberOfPipeArgs < args.length; numberOfPipeArgs++) {
-        it(`should not invoke ${
-               numberOfPipeArgs} argument pure pipe second time if it throws unless input changes`,
-           () => {
-             // https://stackblitz.com/edit/angular-mbx2pg
-             const log: string[] = [];
-             @Pipe({name: 'throw', pure: true})
-             class ThrowPipe implements PipeTransform {
-               transform(): never {
-                 log.push('throw');
-                 throw new Error('ThrowPipeError');
-               }
-             }
-             @Component({template: `{{val | throw${args.slice(0, numberOfPipeArgs).join('')}}}`})
-             class App {
-               val = 'anything';
-             }
-
-             const fixture = TestBed.configureTestingModule({declarations: [App, ThrowPipe]})
-                                 .createComponent(App);
-             // First invocation of detect changes should throw.
-             expect(() => fixture.detectChanges()).toThrowError(/ThrowPipeError/);
-             expect(log).toEqual(['throw']);
-             // Second invocation should not throw as input to the `throw` pipe has not changed and
-             // the pipe is pure.
-             log.length = 0;
-             expect(() => fixture.detectChanges()).not.toThrow();
-             expect(log).toEqual([]);
-             fixture.componentInstance.val = 'change';
-             // First invocation of detect changes should throw because the input changed.
-             expect(() => fixture.detectChanges()).toThrowError(/ThrowPipeError/);
-             expect(log).toEqual(['throw']);
-             // Second invocation should not throw as input to the `throw` pipe has not changed and
-             // the pipe is pure.
-             log.length = 0;
-             expect(() => fixture.detectChanges()).not.toThrow();
-             expect(log).toEqual([]);
-           });
+        it(`should not invoke ${numberOfPipeArgs} argument pure pipe second time if it throws unless input changes`, () => {
+          // https://stackblitz.com/edit/angular-mbx2pg
+          const log: string[] = [];
+          @Pipe({name: 'throw', pure: true})
+          class ThrowPipe implements PipeTransform {
+            transform(): never {
+              log.push('throw');
+              throw new Error('ThrowPipeError');
+            }
+          }
+          @Component({template: `{{val | throw${args.slice(0, numberOfPipeArgs).join('')}}}`})
+          class App {
+            val = 'anything';
+          }
+
+          const fixture = TestBed.configureTestingModule({
+            declarations: [App, ThrowPipe],
+          }).createComponent(App);
+          // First invocation of detect changes should throw.
+          expect(() => fixture.detectChanges()).toThrowError(/ThrowPipeError/);
+          expect(log).toEqual(['throw']);
+          // Second invocation should not throw as input to the `throw` pipe has not changed and
+          // the pipe is pure.
+          log.length = 0;
+          expect(() => fixture.detectChanges()).not.toThrow();
+          expect(log).toEqual([]);
+          fixture.componentInstance.val = 'change';
+          // First invocation of detect changes should throw because the input changed.
+          expect(() => fixture.detectChanges()).toThrowError(/ThrowPipeError/);
+          expect(log).toEqual(['throw']);
+          // Second invocation should not throw as input to the `throw` pipe has not changed and
+          // the pipe is pure.
+          log.length = 0;
+          expect(() => fixture.detectChanges()).not.toThrow();
+          expect(log).toEqual([]);
+        });
       }
     });
   });
 
-  [false, true].forEach(componentIsStandalone => {
+  [false, true].forEach((componentIsStandalone) => {
     const expectedThrowRegex = new RegExp(
-        'The pipe \'testMissingPipe\' could not be found in the \'TestComponent\' component.' +
-        (componentIsStandalone ?
-             ' Verify that it is included in the \'@Component.imports\' of this component' :
-             ' Verify that it is declared or imported in this module'));
-
-    describe(
-        `missing pipe detection logic (inside ${
-            componentIsStandalone ? '' : 'non-'}standalone component)`,
-        () => {
-          it(`should throw an error if a pipe is not found in a component`, () => {
-            @Component({template: '{{ 1 | testMissingPipe }}', standalone: componentIsStandalone})
-            class TestComponent {
-            }
-
-            if (!componentIsStandalone) {
-              TestBed.configureTestingModule({declarations: [TestComponent]});
-            }
+      "The pipe 'testMissingPipe' could not be found in the 'TestComponent' component." +
+        (componentIsStandalone
+          ? " Verify that it is included in the '@Component.imports' of this component"
+          : ' Verify that it is declared or imported in this module'),
+    );
+
+    describe(`missing pipe detection logic (inside ${
+      componentIsStandalone ? '' : 'non-'
+    }standalone component)`, () => {
+      it(`should throw an error if a pipe is not found in a component`, () => {
+        @Component({template: '{{ 1 | testMissingPipe }}', standalone: componentIsStandalone})
+        class TestComponent {}
+
+        if (!componentIsStandalone) {
+          TestBed.configureTestingModule({declarations: [TestComponent]});
+        }
 
-            expect(() => {
-              const fixture = TestBed.createComponent(TestComponent);
-              fixture.detectChanges();
-            }).toThrowError(expectedThrowRegex);
-          });
+        expect(() => {
+          const fixture = TestBed.createComponent(TestComponent);
+          fixture.detectChanges();
+        }).toThrowError(expectedThrowRegex);
+      });
 
-          it('should throw an error if a pipe is not found inside an inline template', () => {
-            @Component({
-              template: `
+      it('should throw an error if a pipe is not found inside an inline template', () => {
+        @Component({
+          template: `
             <ng-container *ngIf="true">
               {{ value | testMissingPipe }}
             </ng-container>`,
-              standalone: componentIsStandalone,
-              ...(componentIsStandalone ? {imports: [CommonModule]} : {}),
-            })
-            class TestComponent {
-              value: string = 'test';
-            }
+          standalone: componentIsStandalone,
+          ...(componentIsStandalone ? {imports: [CommonModule]} : {}),
+        })
+        class TestComponent {
+          value: string = 'test';
+        }
 
-            if (!componentIsStandalone) {
-              TestBed.configureTestingModule({declarations: [TestComponent]});
-            }
+        if (!componentIsStandalone) {
+          TestBed.configureTestingModule({declarations: [TestComponent]});
+        }
 
-            expect(() => {
-              const fixture = TestBed.createComponent(TestComponent);
-              fixture.detectChanges();
-            }).toThrowError(expectedThrowRegex);
-          });
-
-          it('should throw an error if a pipe is not found inside a projected content', () => {
-            @Component({
-              selector: 'app-test-child',
-              template: '<ng-content></ng-content>',
-              standalone: componentIsStandalone
-            })
-            class TestChildComponent {
-            }
+        expect(() => {
+          const fixture = TestBed.createComponent(TestComponent);
+          fixture.detectChanges();
+        }).toThrowError(expectedThrowRegex);
+      });
+
+      it('should throw an error if a pipe is not found inside a projected content', () => {
+        @Component({
+          selector: 'app-test-child',
+          template: '<ng-content></ng-content>',
+          standalone: componentIsStandalone,
+        })
+        class TestChildComponent {}
 
-            @Component({
-              template: `
+        @Component({
+          template: `
             <app-test-child>
               {{ value | testMissingPipe }}
             </app-test-child>`,
-              standalone: componentIsStandalone,
-              ...(componentIsStandalone ? {imports: [TestChildComponent]} : {}),
-            })
-            class TestComponent {
-              value: string = 'test';
-            }
+          standalone: componentIsStandalone,
+          ...(componentIsStandalone ? {imports: [TestChildComponent]} : {}),
+        })
+        class TestComponent {
+          value: string = 'test';
+        }
 
-            if (!componentIsStandalone) {
-              TestBed.configureTestingModule({declarations: [TestComponent, TestChildComponent]});
-            }
+        if (!componentIsStandalone) {
+          TestBed.configureTestingModule({declarations: [TestComponent, TestChildComponent]});
+        }
+
+        expect(() => {
+          const fixture = TestBed.createComponent(TestComponent);
+          fixture.detectChanges();
+        }).toThrowError(expectedThrowRegex);
+      });
 
-            expect(() => {
-              const fixture = TestBed.createComponent(TestComponent);
-              fixture.detectChanges();
-            }).toThrowError(expectedThrowRegex);
-          });
-
-          it('should throw an error if a pipe is not found inside a projected content in an inline template',
-             () => {
-               @Component({
-                 selector: 'app-test-child',
-                 template: '<ng-content></ng-content>',
-                 standalone: componentIsStandalone
-               })
-               class TestChildComponent {
-               }
-
-               @Component({
-                 template: `
+      it('should throw an error if a pipe is not found inside a projected content in an inline template', () => {
+        @Component({
+          selector: 'app-test-child',
+          template: '<ng-content></ng-content>',
+          standalone: componentIsStandalone,
+        })
+        class TestChildComponent {}
+
+        @Component({
+          template: `
               <app-test-child>
                 <ng-container *ngIf="true">
                   {{ value | testMissingPipe }}
                 </ng-container>
               </app-test-child>`,
-                 standalone: componentIsStandalone,
-                 ...(componentIsStandalone ? {imports: [TestChildComponent, CommonModule]} : {}),
-               })
-               class TestComponent {
-                 value: string = 'test';
-               }
-
-               if (!componentIsStandalone) {
-                 TestBed.configureTestingModule(
-                     {declarations: [TestComponent, TestChildComponent]});
-               }
-
-               expect(() => {
-                 const fixture = TestBed.createComponent(TestComponent);
-                 fixture.detectChanges();
-               }).toThrowError(expectedThrowRegex);
-             });
-
-          it('should throw an error if a pipe is not found in a property binding', () => {
-            @Component({
-              template: '<div [title]="value | testMissingPipe"></div>',
-              standalone: componentIsStandalone
-            })
-            class TestComponent {
-              value: string = 'test';
-            }
+          standalone: componentIsStandalone,
+          ...(componentIsStandalone ? {imports: [TestChildComponent, CommonModule]} : {}),
+        })
+        class TestComponent {
+          value: string = 'test';
+        }
 
-            if (!componentIsStandalone) {
-              TestBed.configureTestingModule({declarations: [TestComponent]});
-            }
+        if (!componentIsStandalone) {
+          TestBed.configureTestingModule({declarations: [TestComponent, TestChildComponent]});
+        }
 
-            expect(() => {
-              const fixture = TestBed.createComponent(TestComponent);
-              fixture.detectChanges();
-            }).toThrowError(expectedThrowRegex);
-          });
-
-          it('should throw an error if a pipe is not found inside a structural directive input',
-             () => {
-               @Component({
-                 template: '<div *ngIf="isVisible | testMissingPipe"></div>',
-                 standalone: componentIsStandalone,
-                 ...(componentIsStandalone ? {imports: [CommonModule]} : {})
-               })
-               class TestComponent {
-                 isVisible: boolean = true;
-               }
-
-               if (!componentIsStandalone) {
-                 TestBed.configureTestingModule({declarations: [TestComponent]});
-               }
-
-               expect(() => {
-                 const fixture = TestBed.createComponent(TestComponent);
-                 fixture.detectChanges();
-               }).toThrowError(expectedThrowRegex);
-             });
-        });
+        expect(() => {
+          const fixture = TestBed.createComponent(TestComponent);
+          fixture.detectChanges();
+        }).toThrowError(expectedThrowRegex);
+      });
+
+      it('should throw an error if a pipe is not found in a property binding', () => {
+        @Component({
+          template: '<div [title]="value | testMissingPipe"></div>',
+          standalone: componentIsStandalone,
+        })
+        class TestComponent {
+          value: string = 'test';
+        }
+
+        if (!componentIsStandalone) {
+          TestBed.configureTestingModule({declarations: [TestComponent]});
+        }
+
+        expect(() => {
+          const fixture = TestBed.createComponent(TestComponent);
+          fixture.detectChanges();
+        }).toThrowError(expectedThrowRegex);
+      });
+
+      it('should throw an error if a pipe is not found inside a structural directive input', () => {
+        @Component({
+          template: '<div *ngIf="isVisible | testMissingPipe"></div>',
+          standalone: componentIsStandalone,
+          ...(componentIsStandalone ? {imports: [CommonModule]} : {}),
+        })
+        class TestComponent {
+          isVisible: boolean = true;
+        }
+
+        if (!componentIsStandalone) {
+          TestBed.configureTestingModule({declarations: [TestComponent]});
+        }
+
+        expect(() => {
+          const fixture = TestBed.createComponent(TestComponent);
+          fixture.detectChanges();
+        }).toThrowError(expectedThrowRegex);
+      });
+    });
   });
 });
diff --git a/packages/core/test/acceptance/profiler_spec.ts b/packages/core/test/acceptance/profiler_spec.ts
index 5ab678beba239..443610f6c73a9 100644
--- a/packages/core/test/acceptance/profiler_spec.ts
+++ b/packages/core/test/acceptance/profiler_spec.ts
@@ -9,8 +9,22 @@
 import {ProfilerEvent, setProfiler} from '@angular/core/src/render3/profiler';
 import {TestBed} from '@angular/core/testing';
 
-import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, DoCheck, ErrorHandler, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, ViewChild} from '../../src/core';
-
+import {
+  AfterContentChecked,
+  AfterContentInit,
+  AfterViewChecked,
+  AfterViewInit,
+  Component,
+  DoCheck,
+  ErrorHandler,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+} from '../../src/core';
 
 describe('profiler', () => {
   class Profiler {
@@ -27,14 +41,17 @@ describe('profiler', () => {
 
   afterAll(() => setProfiler(null));
 
-  function findProfilerCall(condition: ProfilerEvent|((args: any[]) => boolean)) {
-    let predicate: (args: any[]) => boolean = _ => true;
+  function findProfilerCall(condition: ProfilerEvent | ((args: any[]) => boolean)) {
+    let predicate: (args: any[]) => boolean = (_) => true;
     if (typeof condition !== 'function') {
       predicate = (args: any[]) => args[0] === condition;
     } else {
       predicate = condition;
     }
-    return profilerSpy.calls.all().map((call: any) => call.args).find(predicate);
+    return profilerSpy.calls
+      .all()
+      .map((call: any) => call.args)
+      .find(predicate);
   }
 
   describe('change detection hooks', () => {
@@ -50,11 +67,13 @@ describe('profiler', () => {
       expect(profilerSpy).toHaveBeenCalled();
 
       const templateCreateStart = findProfilerCall(
-          (args: any[]) => args[0] === ProfilerEvent.TemplateCreateStart &&
-              args[1] === fixture.componentInstance);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.TemplateCreateStart && args[1] === fixture.componentInstance,
+      );
       const templateCreateEnd = findProfilerCall(
-          (args: any[]) =>
-              args[0] === ProfilerEvent.TemplateCreateEnd && args[1] === fixture.componentInstance);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.TemplateCreateEnd && args[1] === fixture.componentInstance,
+      );
 
       expect(templateCreateStart).toBeTruthy();
       expect(templateCreateEnd).toBeTruthy();
@@ -62,11 +81,13 @@ describe('profiler', () => {
       fixture.detectChanges();
 
       const templateUpdateStart = findProfilerCall(
-          (args: any[]) => args[0] === ProfilerEvent.TemplateUpdateStart &&
-              args[1] === fixture.componentInstance);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.TemplateUpdateStart && args[1] === fixture.componentInstance,
+      );
       const templateUpdateEnd = findProfilerCall(
-          (args: any[]) =>
-              args[0] === ProfilerEvent.TemplateUpdateEnd && args[1] === fixture.componentInstance);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.TemplateUpdateEnd && args[1] === fixture.componentInstance,
+      );
 
       expect(templateUpdateStart).toBeTruthy();
       expect(templateUpdateEnd).toBeTruthy();
@@ -92,9 +113,11 @@ describe('profiler', () => {
       expect(profilerSpy).toHaveBeenCalled();
 
       const templateCreateStart = findProfilerCall(
-          (args: any[]) => args[0] === ProfilerEvent.TemplateCreateStart && args[1] === myComp);
+        (args: any[]) => args[0] === ProfilerEvent.TemplateCreateStart && args[1] === myComp,
+      );
       const templateCreateEnd = findProfilerCall(
-          (args: any[]) => args[0] === ProfilerEvent.TemplateCreateEnd && args[1] === myComp);
+        (args: any[]) => args[0] === ProfilerEvent.TemplateCreateEnd && args[1] === myComp,
+      );
 
       expect(templateCreateStart).toBeTruthy();
       expect(templateCreateEnd).toBeTruthy();
@@ -137,8 +160,10 @@ describe('profiler', () => {
       const handler = new ErrorHandler();
       const errorSpy = spyOn(handler, 'handleError');
 
-      TestBed.configureTestingModule(
-          {declarations: [MyComponent], providers: [{provide: ErrorHandler, useValue: handler}]});
+      TestBed.configureTestingModule({
+        declarations: [MyComponent],
+        providers: [{provide: ErrorHandler, useValue: handler}],
+      });
 
       const fixture = TestBed.createComponent(MyComponent);
       const myComp = fixture.componentInstance;
@@ -189,8 +214,17 @@ describe('profiler', () => {
         ngOnDestroy() {}
       }
       @Component({selector: 'my-comp', template: '{{prop}}', providers: [Service]})
-      class MyComponent implements OnInit, AfterViewInit, AfterViewChecked, AfterContentInit,
-                                   AfterContentChecked, OnChanges, DoCheck, OnDestroy {
+      class MyComponent
+        implements
+          OnInit,
+          AfterViewInit,
+          AfterViewChecked,
+          AfterContentInit,
+          AfterContentChecked,
+          OnChanges,
+          DoCheck,
+          OnDestroy
+      {
         @Input() prop = 1;
 
         constructor(private service: Service) {}
@@ -220,66 +254,75 @@ describe('profiler', () => {
       const myComp = fixture.componentInstance.child;
 
       const ngOnInitStart = findProfilerCall(
-          (args: any[]) =>
-              args[0] === ProfilerEvent.LifecycleHookStart && args[2] === myComp.ngOnInit);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookStart && args[2] === myComp.ngOnInit,
+      );
       const ngOnInitEnd = findProfilerCall(
-          (args: any[]) =>
-              args[0] === ProfilerEvent.LifecycleHookEnd && args[2] === myComp.ngOnInit);
+        (args: any[]) => args[0] === ProfilerEvent.LifecycleHookEnd && args[2] === myComp.ngOnInit,
+      );
 
       expect(ngOnInitStart).toBeTruthy();
       expect(ngOnInitEnd).toBeTruthy();
 
       const ngOnDoCheckStart = findProfilerCall(
-          (args: any[]) =>
-              args[0] === ProfilerEvent.LifecycleHookStart && args[2] === myComp.ngDoCheck);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookStart && args[2] === myComp.ngDoCheck,
+      );
       const ngOnDoCheckEnd = findProfilerCall(
-          (args: any[]) =>
-              args[0] === ProfilerEvent.LifecycleHookEnd && args[2] === myComp.ngDoCheck);
+        (args: any[]) => args[0] === ProfilerEvent.LifecycleHookEnd && args[2] === myComp.ngDoCheck,
+      );
 
       expect(ngOnDoCheckStart).toBeTruthy();
       expect(ngOnDoCheckEnd).toBeTruthy();
 
       const ngAfterViewInitStart = findProfilerCall(
-          (args: any[]) =>
-              args[0] === ProfilerEvent.LifecycleHookStart && args[2] === myComp.ngAfterViewInit);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookStart && args[2] === myComp.ngAfterViewInit,
+      );
       const ngAfterViewInitEnd = findProfilerCall(
-          (args: any[]) =>
-              args[0] === ProfilerEvent.LifecycleHookEnd && args[2] === myComp.ngAfterViewInit);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookEnd && args[2] === myComp.ngAfterViewInit,
+      );
 
       expect(ngAfterViewInitStart).toBeTruthy();
       expect(ngAfterViewInitEnd).toBeTruthy();
 
       const ngAfterViewCheckedStart = findProfilerCall(
-          (args: any[]) => args[0] === ProfilerEvent.LifecycleHookStart &&
-              args[2] === myComp.ngAfterViewChecked);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookStart && args[2] === myComp.ngAfterViewChecked,
+      );
       const ngAfterViewCheckedEnd = findProfilerCall(
-          (args: any[]) =>
-              args[0] === ProfilerEvent.LifecycleHookEnd && args[2] === myComp.ngAfterViewChecked);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookEnd && args[2] === myComp.ngAfterViewChecked,
+      );
 
       expect(ngAfterViewCheckedStart).toBeTruthy();
       expect(ngAfterViewCheckedEnd).toBeTruthy();
 
       const ngAfterContentInitStart = findProfilerCall(
-          (args: any[]) => args[0] === ProfilerEvent.LifecycleHookStart &&
-              args[2] === myComp.ngAfterContentInit);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookStart && args[2] === myComp.ngAfterContentInit,
+      );
       const ngAfterContentInitEnd = findProfilerCall(
-          (args: any[]) =>
-              args[0] === ProfilerEvent.LifecycleHookEnd && args[2] === myComp.ngAfterContentInit);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookEnd && args[2] === myComp.ngAfterContentInit,
+      );
 
       expect(ngAfterContentInitStart).toBeTruthy();
       expect(ngAfterContentInitEnd).toBeTruthy();
 
       const ngAfterContentCheckedStart = findProfilerCall(
-          (args: any[]) => args[0] === ProfilerEvent.LifecycleHookStart &&
-              args[2] === myComp.ngAfterContentChecked);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookStart && args[2] === myComp.ngAfterContentChecked,
+      );
       const ngAfterContentChecked = findProfilerCall(
-          (args: any[]) => args[0] === ProfilerEvent.LifecycleHookEnd &&
-              args[2] === myComp.ngAfterContentChecked);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookEnd && args[2] === myComp.ngAfterContentChecked,
+      );
 
       expect(ngAfterContentCheckedStart).toBeTruthy();
       expect(ngAfterContentChecked).toBeTruthy();
 
-
       // Verify we call `ngOnChanges` and the corresponding profiler hooks
       const onChangesSpy = spyOn(myComp, 'ngOnChanges');
       profilerSpy.calls.reset();
@@ -288,11 +331,19 @@ describe('profiler', () => {
       fixture.detectChanges();
 
       const ngOnChangesStart = findProfilerCall(
-          (args: any[]) => args[0] === ProfilerEvent.LifecycleHookStart && args[2] &&
-              args[2].name && args[2].name.indexOf('OnChangesHook') >= 0);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookStart &&
+          args[2] &&
+          args[2].name &&
+          args[2].name.indexOf('OnChangesHook') >= 0,
+      );
       const ngOnChangesEnd = findProfilerCall(
-          (args: any[]) => args[0] === ProfilerEvent.LifecycleHookEnd && args[2] && args[2].name &&
-              args[2].name.indexOf('OnChangesHook') >= 0);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookEnd &&
+          args[2] &&
+          args[2].name &&
+          args[2].name.indexOf('OnChangesHook') >= 0,
+      );
 
       expect(onChangesSpy).toHaveBeenCalled();
       expect(ngOnChangesStart).toBeTruthy();
@@ -300,21 +351,25 @@ describe('profiler', () => {
 
       fixture.destroy();
       const ngOnDestroyStart = findProfilerCall(
-          (args: any[]) =>
-              args[0] === ProfilerEvent.LifecycleHookStart && args[2] === myComp.ngOnDestroy);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookStart && args[2] === myComp.ngOnDestroy,
+      );
       const ngOnDestroyEnd = findProfilerCall(
-          (args: any[]) =>
-              args[0] === ProfilerEvent.LifecycleHookEnd && args[2] === myComp.ngOnDestroy);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookEnd && args[2] === myComp.ngOnDestroy,
+      );
 
       expect(ngOnDestroyStart).toBeTruthy();
       expect(ngOnDestroyEnd).toBeTruthy();
 
       const serviceNgOnDestroyStart = findProfilerCall(
-          (args: any[]) => args[0] === ProfilerEvent.LifecycleHookStart &&
-              args[2] === Service.prototype.ngOnDestroy);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookStart && args[2] === Service.prototype.ngOnDestroy,
+      );
       const serviceNgOnDestroyEnd = findProfilerCall(
-          (args: any[]) => args[0] === ProfilerEvent.LifecycleHookEnd &&
-              args[2] === Service.prototype.ngOnDestroy);
+        (args: any[]) =>
+          args[0] === ProfilerEvent.LifecycleHookEnd && args[2] === Service.prototype.ngOnDestroy,
+      );
 
       expect(serviceNgOnDestroyStart).toBeTruthy();
       expect(serviceNgOnDestroyEnd).toBeTruthy();
diff --git a/packages/core/test/acceptance/property_binding_spec.ts b/packages/core/test/acceptance/property_binding_spec.ts
index 092fccf69f89b..cb7c71deafad5 100644
--- a/packages/core/test/acceptance/property_binding_spec.ts
+++ b/packages/core/test/acceptance/property_binding_spec.ts
@@ -15,7 +15,7 @@ describe('property bindings', () => {
   it('should support bindings to properties', () => {
     @Component({template: `<span [id]="id"></span>`})
     class Comp {
-      id: string|undefined;
+      id: string | undefined;
     }
 
     TestBed.configureTestingModule({declarations: [Comp]});
@@ -88,41 +88,43 @@ describe('property bindings', () => {
     expect(labelNode.nativeElement.getAttribute('for')).toBe('some-textarea');
   });
 
-  it('should not map properties whose names do not correspond to their attribute names, ' +
-         'if they correspond to inputs',
-     () => {
-       @Component({template: '', selector: 'my-comp'})
-       class MyComp {
-          @Input() for !:string;
-       }
-
-       @Component({template: '<my-comp [for]="forValue"></my-comp>'})
-       class App {
-         forValue?: string;
-       }
-
-       TestBed.configureTestingModule({declarations: [App, MyComp]});
-       const fixture = TestBed.createComponent(App);
-       const myCompNode = fixture.debugElement.query(By.directive(MyComp));
-       fixture.componentInstance.forValue = 'hello';
-       fixture.detectChanges();
-       expect(myCompNode.nativeElement.getAttribute('for')).toBeFalsy();
-       expect(myCompNode.componentInstance.for).toBe('hello');
-
-       fixture.componentInstance.forValue = 'hej';
-       fixture.detectChanges();
-       expect(myCompNode.nativeElement.getAttribute('for')).toBeFalsy();
-       expect(myCompNode.componentInstance.for).toBe('hej');
-     });
+  it(
+    'should not map properties whose names do not correspond to their attribute names, ' +
+      'if they correspond to inputs',
+    () => {
+      @Component({template: '', selector: 'my-comp'})
+      class MyComp {
+        @Input() for!: string;
+      }
+
+      @Component({template: '<my-comp [for]="forValue"></my-comp>'})
+      class App {
+        forValue?: string;
+      }
+
+      TestBed.configureTestingModule({declarations: [App, MyComp]});
+      const fixture = TestBed.createComponent(App);
+      const myCompNode = fixture.debugElement.query(By.directive(MyComp));
+      fixture.componentInstance.forValue = 'hello';
+      fixture.detectChanges();
+      expect(myCompNode.nativeElement.getAttribute('for')).toBeFalsy();
+      expect(myCompNode.componentInstance.for).toBe('hello');
+
+      fixture.componentInstance.forValue = 'hej';
+      fixture.detectChanges();
+      expect(myCompNode.nativeElement.getAttribute('for')).toBeFalsy();
+      expect(myCompNode.componentInstance.for).toBe('hej');
+    },
+  );
 
   it('should use the sanitizer in bound properties', () => {
     @Component({
       template: `
         <a [href]="url">
-      `
+      `,
     })
     class App {
-      url: string|SafeUrl = 'javascript:alert("haha, I am taking over your computer!!!");';
+      url: string | SafeUrl = 'javascript:alert("haha, I am taking over your computer!!!");';
     }
 
     TestBed.configureTestingModule({declarations: [App]});
@@ -133,8 +135,9 @@ describe('property bindings', () => {
     expect(a.href.indexOf('unsafe:')).toBe(0);
 
     const domSanitzer: DomSanitizer = TestBed.inject(DomSanitizer);
-    fixture.componentInstance.url =
-        domSanitzer.bypassSecurityTrustUrl('javascript:alert("the developer wanted this");');
+    fixture.componentInstance.url = domSanitzer.bypassSecurityTrustUrl(
+      'javascript:alert("the developer wanted this");',
+    );
     fixture.detectChanges();
 
     expect(a.href.indexOf('unsafe:')).toBe(-1);
@@ -158,7 +161,7 @@ describe('property bindings', () => {
   it('should support interpolation for properties', () => {
     @Component({template: `<span id="{{'_' + id + '_'}}"></span>`})
     class Comp {
-      id: string|undefined;
+      id: string | undefined;
     }
 
     TestBed.configureTestingModule({declarations: [Comp]});
@@ -179,14 +182,14 @@ describe('property bindings', () => {
       selector: '[myButton]',
     })
     class MyButton {
-      @Input() disabled: boolean|undefined;
+      @Input() disabled: boolean | undefined;
     }
 
     @Directive({
       selector: '[otherDir]',
     })
     class OtherDir {
-      @Input() id: number|undefined;
+      @Input() id: number | undefined;
       @Output('click') clickStream = new EventEmitter<void>();
     }
 
@@ -194,19 +197,19 @@ describe('property bindings', () => {
       selector: '[otherDisabledDir]',
     })
     class OtherDisabledDir {
-      @Input() disabled: boolean|undefined;
+      @Input() disabled: boolean | undefined;
     }
 
     @Directive({
       selector: '[idDir]',
     })
     class IdDir {
-      @Input('id') idNumber: string|undefined;
+      @Input('id') idNumber: string | undefined;
     }
 
     it('should check input properties before setting (directives)', () => {
       @Component({
-        template: `<button myButton otherDir [id]="id" [disabled]="isDisabled">Click me</button>`
+        template: `<button myButton otherDir [id]="id" [disabled]="isDisabled">Click me</button>`,
       })
       class App {
         id = 0;
@@ -271,7 +274,7 @@ describe('property bindings', () => {
         template: '',
       })
       class Comp {
-        @Input() id: number|undefined;
+        @Input() id: number | undefined;
       }
 
       @Component({template: `<comp [id]="id"></comp>`})
@@ -295,8 +298,9 @@ describe('property bindings', () => {
     });
 
     it('should support two input properties with the same name', () => {
-      @Component(
-          {template: `<button myButton otherDisabledDir [disabled]="isDisabled">Click me</button>`})
+      @Component({
+        template: `<button myButton otherDisabledDir [disabled]="isDisabled">Click me</button>`,
+      })
       class App {
         isDisabled = true;
       }
@@ -304,8 +308,9 @@ describe('property bindings', () => {
       TestBed.configureTestingModule({declarations: [App, MyButton, OtherDisabledDir]});
       const fixture = TestBed.createComponent(App);
       const button = fixture.debugElement.query(By.directive(MyButton)).injector.get(MyButton);
-      const otherDisabledDir =
-          fixture.debugElement.query(By.directive(OtherDisabledDir)).injector.get(OtherDisabledDir);
+      const otherDisabledDir = fixture.debugElement
+        .query(By.directive(OtherDisabledDir))
+        .injector.get(OtherDisabledDir);
       const buttonEl = fixture.nativeElement.children[0];
       fixture.detectChanges();
 
@@ -354,7 +359,7 @@ describe('property bindings', () => {
           <button idDir [id]="id1">Click me</button>
           <button *ngIf="condition" [id]="id2">Click me too (2)</button>
           <button *ngIf="!condition" otherDir [id]="id3">Click me too (3)</button>
-        `
+        `,
       })
       class App {
         condition = true;
@@ -363,8 +368,10 @@ describe('property bindings', () => {
         id3 = 3;
       }
 
-      TestBed.configureTestingModule(
-          {declarations: [App, IdDir, OtherDir], imports: [CommonModule]});
+      TestBed.configureTestingModule({
+        declarations: [App, IdDir, OtherDir],
+        imports: [CommonModule],
+      });
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
       let buttonElements = fixture.nativeElement.querySelectorAll('button');
@@ -394,20 +401,19 @@ describe('property bindings', () => {
   describe('attributes and input properties', () => {
     @Directive({selector: '[myDir]', exportAs: 'myDir'})
     class MyDir {
-      @Input() role: string|undefined;
-      @Input('dir') direction: string|undefined;
+      @Input() role: string | undefined;
+      @Input('dir') direction: string | undefined;
       @Output('change') changeStream = new EventEmitter<void>();
     }
 
     @Directive({selector: '[myDirB]'})
     class MyDirB {
-      @Input('role') roleB: string|undefined;
+      @Input('role') roleB: string | undefined;
     }
 
     it('should set input property based on attribute if existing', () => {
       @Component({template: `<div role="button" myDir></div>`})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, MyDir]});
       const fixture = TestBed.createComponent(App);
@@ -442,8 +448,7 @@ describe('property bindings', () => {
 
     it('should set two directive input properties based on same attribute', () => {
       @Component({template: `<div role="button" myDir myDirB></div>`})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, MyDir, MyDirB]});
       const fixture = TestBed.createComponent(App);
@@ -461,8 +466,7 @@ describe('property bindings', () => {
       @Component({
         template: `<div role="button" dir="rtl" myDir></div>`,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, MyDir]});
       const fixture = TestBed.createComponent(App);
@@ -503,8 +507,7 @@ describe('property bindings', () => {
           <div role="listbox" myDirB></div>
         `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, MyDir, MyDirB]});
       const fixture = TestBed.createComponent(App);
@@ -567,18 +570,16 @@ describe('property bindings', () => {
     it('should process attributes properly inside a for loop', () => {
       @Component({
         selector: 'comp',
-        template: `<div role="button" myDir #dir="myDir"></div>role: {{dir.role}}`
+        template: `<div role="button" myDir #dir="myDir"></div>role: {{dir.role}}`,
       })
-      class Comp {
-      }
+      class Comp {}
 
       @Component({
         template: `
           <comp *ngFor="let i of [0, 1]"></comp>
-        `
+        `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, MyDir, Comp], imports: [CommonModule]});
       const fixture = TestBed.createComponent(App);
@@ -605,38 +606,34 @@ describe('property bindings', () => {
     });
   });
 
-  it('should not throw on synthetic property bindings when a directive on the same element injects ViewContainerRef',
-     () => {
-       @Component({
-         selector: 'my-comp',
-         template: '',
-         animations: [trigger('trigger', [state('void', style({opacity: 0}))])],
-         host: {'[@trigger]': '"void"'}
-       })
-       class MyComp {
-       }
-
-       @Directive({selector: '[my-dir]'})
-       class MyDir {
-         constructor(public viewContainerRef: ViewContainerRef) {}
-       }
-
-       @Component({template: '<my-comp my-dir></my-comp>'})
-       class App {
-       }
-
-       TestBed.configureTestingModule({declarations: [App, MyDir, MyComp]});
-
-       expect(() => {
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-       }).not.toThrow();
-     });
+  it('should not throw on synthetic property bindings when a directive on the same element injects ViewContainerRef', () => {
+    @Component({
+      selector: 'my-comp',
+      template: '',
+      animations: [trigger('trigger', [state('void', style({opacity: 0}))])],
+      host: {'[@trigger]': '"void"'},
+    })
+    class MyComp {}
+
+    @Directive({selector: '[my-dir]'})
+    class MyDir {
+      constructor(public viewContainerRef: ViewContainerRef) {}
+    }
+
+    @Component({template: '<my-comp my-dir></my-comp>'})
+    class App {}
+
+    TestBed.configureTestingModule({declarations: [App, MyDir, MyComp]});
+
+    expect(() => {
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+    }).not.toThrow();
+  });
 
   it('should allow quoted binding syntax inside property binding', () => {
     @Component({template: `<span [id]="'{{ id }}'"></span>`})
-    class Comp {
-    }
+    class Comp {}
 
     TestBed.configureTestingModule({declarations: [Comp]});
     const fixture = TestBed.createComponent(Comp);
@@ -646,12 +643,11 @@ describe('property bindings', () => {
 
   it('should allow quoted binding syntax with escaped quotes inside property binding', () => {
     @Component({template: `<span [id]="'{{ \\' }}'"></span>`})
-    class Comp {
-    }
+    class Comp {}
 
     TestBed.configureTestingModule({declarations: [Comp]});
     const fixture = TestBed.createComponent(Comp);
     fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('span').id).toBe('{{ \' }}');
+    expect(fixture.nativeElement.querySelector('span').id).toBe("{{ ' }}");
   });
 });
diff --git a/packages/core/test/acceptance/property_interpolation_spec.ts b/packages/core/test/acceptance/property_interpolation_spec.ts
index 262fab5918dc4..aabfb0e306278 100644
--- a/packages/core/test/acceptance/property_interpolation_spec.ts
+++ b/packages/core/test/acceptance/property_interpolation_spec.ts
@@ -24,7 +24,7 @@ describe('property interpolation', () => {
         <div title="a{{one}}b{{two}}c"></div>
         <div title="a{{one}}b"></div>
         <div title="{{one}}"></div>
-      `
+      `,
     })
     class App {
       one = 1;
@@ -42,9 +42,9 @@ describe('property interpolation', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    const titles =
-        Array.from(<NodeListOf<HTMLDivElement>>fixture.nativeElement.querySelectorAll('div[title]'))
-            .map((div: HTMLDivElement) => div.title);
+    const titles = Array.from(
+      <NodeListOf<HTMLDivElement>>fixture.nativeElement.querySelectorAll('div[title]'),
+    ).map((div: HTMLDivElement) => div.title);
 
     expect(titles).toEqual([
       'a1b2c3d4e5f6g7h8i9j',
@@ -64,7 +64,7 @@ describe('property interpolation', () => {
     @Component({
       template: `
         <img title="{{(details | async)?.title}}" src="{{(details | async)?.url}}" />
-      `
+      `,
     })
     class App {
       details = of({
@@ -87,7 +87,7 @@ describe('property interpolation', () => {
     @Component({
       template: `
         <img src="{{leadSurgeon?.getCommonInfo()?.getPhotoUrl() }}">
-      `
+      `,
     })
     class App {
       /** Clearly this is a doctor of heavy metals. */
@@ -96,9 +96,9 @@ describe('property interpolation', () => {
           return {
             getPhotoUrl() {
               return 'http://somecooldomain:1234/cool_image.png';
-            }
+            },
           };
-        }
+        },
       };
     }
 
@@ -114,7 +114,7 @@ describe('property interpolation', () => {
     @Component({
       template: `
         <img src="{{naughty}}">
-      `
+      `,
     })
     class App {
       naughty = 'javascript:alert("haha, I am taking over your computer!!!");';
@@ -132,7 +132,7 @@ describe('property interpolation', () => {
     @Component({
       template: `
         <img src="{{ja}}{{va}}script:{{naughty}}">
-      `
+      `,
     })
     class App {
       ja = 'ja';
@@ -152,18 +152,17 @@ describe('property interpolation', () => {
     @Component({
       selector: 'app-comp',
       template: `
-        <a href="http://g.com/?one={{'1'}}&two={{'2'}}&three={{'3'}}&four={{'4'}}&five={{'5'}}&six={{'6'}}&seven={{'7'}}&eight={{'8'}}&nine={{'9'}}&ten={{'10'}}">link2</a>`
+        <a href="http://g.com/?one={{'1'}}&two={{'2'}}&three={{'3'}}&four={{'4'}}&five={{'5'}}&six={{'6'}}&seven={{'7'}}&eight={{'8'}}&nine={{'9'}}&ten={{'10'}}">link2</a>`,
     })
-    class AppComp {
-    }
+    class AppComp {}
 
     TestBed.configureTestingModule({declarations: [AppComp]});
     const fixture = TestBed.createComponent(AppComp);
     fixture.detectChanges();
     const anchor = fixture.debugElement.query(By.css('a')).nativeElement;
-    expect(anchor.getAttribute('href'))
-        .toEqual(
-            `http://g.com/?one=1&two=2&three=3&four=4&five=5&six=6&seven=7&eight=8&nine=9&ten=10`);
+    expect(anchor.getAttribute('href')).toEqual(
+      `http://g.com/?one=1&two=2&three=3&four=4&five=5&six=6&seven=7&eight=8&nine=9&ten=10`,
+    );
   });
 
   it('should support the chained use cases of propertyInterpolate instructions', () => {
@@ -181,7 +180,7 @@ describe('property interpolation', () => {
       <img title="a{{one}}b{{two}}c" alt="a{{one}}b{{two}}c"/>
       <img title="a{{one}}b" alt="a{{one}}b"/>
       <img title="{{one}}" alt="{{one}}"/>
-      `
+      `,
     })
     class AppComp {
       one = 1;
@@ -199,10 +198,9 @@ describe('property interpolation', () => {
     const fixture = TestBed.createComponent(AppComp);
     fixture.detectChanges();
 
-    const titles = Array
-                       .from(<NodeListOf<HTMLImageElement>>fixture.nativeElement.querySelectorAll(
-                           'img[title]'))
-                       .map((img: HTMLImageElement) => img.title);
+    const titles = Array.from(
+      <NodeListOf<HTMLImageElement>>fixture.nativeElement.querySelectorAll('img[title]'),
+    ).map((img: HTMLImageElement) => img.title);
 
     expect(titles).toEqual([
       'a1b2c3d4e5f6g7h8i9j',
@@ -217,9 +215,9 @@ describe('property interpolation', () => {
       '1',
     ]);
 
-    const others =
-        Array.from(<NodeListOf<HTMLImageElement>>fixture.nativeElement.querySelectorAll('img[alt]'))
-            .map((img: HTMLImageElement) => img.alt);
+    const others = Array.from(
+      <NodeListOf<HTMLImageElement>>fixture.nativeElement.querySelectorAll('img[alt]'),
+    ).map((img: HTMLImageElement) => img.alt);
 
     expect(others).toEqual([
       'a1b2c3d4e5f6g7h8i9j',
diff --git a/packages/core/test/acceptance/providers_spec.ts b/packages/core/test/acceptance/providers_spec.ts
index cac80668c7a9d..b3e46f82a021b 100644
--- a/packages/core/test/acceptance/providers_spec.ts
+++ b/packages/core/test/acceptance/providers_spec.ts
@@ -7,7 +7,17 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {Component, Directive, forwardRef, Inject, Injectable, InjectionToken, Injector, NgModule, Optional} from '@angular/core';
+import {
+  Component,
+  Directive,
+  forwardRef,
+  Inject,
+  Injectable,
+  InjectionToken,
+  Injector,
+  NgModule,
+  Optional,
+} from '@angular/core';
 import {leaveView, specOnlyIsInstructionStateEmpty} from '@angular/core/src/render3/state';
 import {inject, TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
@@ -20,17 +30,15 @@ describe('providers', () => {
 
       @Directive({
         selector: '[super-dir]',
-        providers: [{provide: SOME_DIRS, useClass: SuperDirective, multi: true}]
+        providers: [{provide: SOME_DIRS, useClass: SuperDirective, multi: true}],
       })
-      class SuperDirective {
-      }
+      class SuperDirective {}
 
       @Directive({
         selector: '[sub-dir]',
-        providers: [{provide: SOME_DIRS, useClass: SubDirective, multi: true}]
+        providers: [{provide: SOME_DIRS, useClass: SubDirective, multi: true}],
       })
-      class SubDirective extends SuperDirective {
-      }
+      class SubDirective extends SuperDirective {}
 
       @Directive({selector: '[other-dir]'})
       class OtherDirective {
@@ -38,11 +46,11 @@ describe('providers', () => {
       }
 
       @Component({selector: 'app-comp', template: `<div other-dir sub-dir></div>`})
-      class App {
-      }
+      class App {}
 
-      TestBed.configureTestingModule(
-          {declarations: [SuperDirective, SubDirective, OtherDirective, App]});
+      TestBed.configureTestingModule({
+        declarations: [SuperDirective, SubDirective, OtherDirective, App],
+      });
 
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -65,8 +73,7 @@ describe('providers', () => {
       }
 
       @Injectable()
-      class SubInjectableWithDestroyHook extends SuperInjectableWithDestroyHook {
-      }
+      class SubInjectableWithDestroyHook extends SuperInjectableWithDestroyHook {}
 
       @Component({template: '', providers: [SubInjectableWithDestroyHook]})
       class App {
@@ -92,8 +99,7 @@ describe('providers', () => {
       }
 
       @Component({template: '', providers: [InjectableWithDestroyHook]})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App]});
       const fixture = TestBed.createComponent(App);
@@ -123,10 +129,9 @@ describe('providers', () => {
           <my-cmp></my-cmp>
           <my-cmp></my-cmp>
         `,
-        providers: [InjectableWithDestroyHook]
+        providers: [InjectableWithDestroyHook],
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App, MyComponent]});
       const fixture = TestBed.createComponent(App);
@@ -148,7 +153,7 @@ describe('providers', () => {
 
       @Component({
         template: '',
-        providers: [{provide: InjectableWithDestroyHook, useClass: InjectableWithDestroyHook}]
+        providers: [{provide: InjectableWithDestroyHook, useClass: InjectableWithDestroyHook}],
       })
       class App {
         constructor(foo: InjectableWithDestroyHook) {}
@@ -181,8 +186,9 @@ describe('providers', () => {
 
       @Component({
         template: '',
-        providers:
-            [{provide: InjectableWithDestroyHookToken, useClass: InjectableWithDestroyHookValue}]
+        providers: [
+          {provide: InjectableWithDestroyHookToken, useClass: InjectableWithDestroyHookValue},
+        ],
       })
       class App {
         constructor(foo: InjectableWithDestroyHookToken) {}
@@ -217,12 +223,14 @@ describe('providers', () => {
         template: '',
         providers: [
           InjectableWithDestroyHookExisting,
-          {provide: InjectableWithDestroyHookToken, useExisting: InjectableWithDestroyHookExisting}
-        ]
+          {provide: InjectableWithDestroyHookToken, useExisting: InjectableWithDestroyHookExisting},
+        ],
       })
       class App {
-        constructor(foo1: InjectableWithDestroyHookExisting, foo2: InjectableWithDestroyHookToken) {
-        }
+        constructor(
+          foo1: InjectableWithDestroyHookExisting,
+          foo2: InjectableWithDestroyHookToken,
+        ) {}
       }
 
       TestBed.configureTestingModule({declarations: [App]});
@@ -233,112 +241,107 @@ describe('providers', () => {
       expect(logs).toEqual(['OnDestroy Existing']);
     });
 
-    it('should invoke ngOnDestroy with the correct context when providing a type provider multiple times on the same node',
-       () => {
-         const resolvedServices: (DestroyService|undefined)[] = [];
-         const destroyContexts: (DestroyService|undefined)[] = [];
-         let parentService: DestroyService|undefined;
-         let childService: DestroyService|undefined;
-
-         @Injectable()
-         class DestroyService {
-           constructor() {
-             resolvedServices.push(this);
-           }
-           ngOnDestroy() {
-             destroyContexts.push(this);
-           }
-         }
-
-         @Directive({selector: '[dir-one]', providers: [DestroyService]})
-         class DirOne {
-           constructor(service: DestroyService) {
-             childService = service;
-           }
-         }
-
-         @Directive({selector: '[dir-two]', providers: [DestroyService]})
-         class DirTwo {
-           constructor(service: DestroyService) {
-             childService = service;
-           }
-         }
-
-         @Component({template: '<div dir-one dir-two></div>', providers: [DestroyService]})
-         class App {
-           constructor(service: DestroyService) {
-             parentService = service;
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [App, DirOne, DirTwo]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         fixture.destroy();
-
-         expect(parentService).toBeDefined();
-         expect(childService).toBeDefined();
-         expect(parentService).not.toBe(childService);
-         expect(resolvedServices).toEqual([parentService, childService]);
-         expect(destroyContexts).toEqual([parentService, childService]);
-       });
-
-    it('should invoke ngOnDestroy with the correct context when providing a class provider multiple times on the same node',
-       () => {
-         const resolvedServices: (DestroyService|undefined)[] = [];
-         const destroyContexts: (DestroyService|undefined)[] = [];
-         const token = new InjectionToken<any>('token');
-         let parentService: DestroyService|undefined;
-         let childService: DestroyService|undefined;
-
-         @Injectable()
-         class DestroyService {
-           constructor() {
-             resolvedServices.push(this);
-           }
-           ngOnDestroy() {
-             destroyContexts.push(this);
-           }
-         }
-
-         @Directive(
-             {selector: '[dir-one]', providers: [{provide: token, useClass: DestroyService}]})
-         class DirOne {
-           constructor(@Inject(token) service: DestroyService) {
-             childService = service;
-           }
-         }
-
-         @Directive(
-             {selector: '[dir-two]', providers: [{provide: token, useClass: DestroyService}]})
-         class DirTwo {
-           constructor(@Inject(token) service: DestroyService) {
-             childService = service;
-           }
-         }
-
-         @Component({
-           template: '<div dir-one dir-two></div>',
-           providers: [{provide: token, useClass: DestroyService}]
-         })
-         class App {
-           constructor(@Inject(token) service: DestroyService) {
-             parentService = service;
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [App, DirOne, DirTwo]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         fixture.destroy();
-
-         expect(parentService).toBeDefined();
-         expect(childService).toBeDefined();
-         expect(parentService).not.toBe(childService);
-         expect(resolvedServices).toEqual([parentService, childService]);
-         expect(destroyContexts).toEqual([parentService, childService]);
-       });
+    it('should invoke ngOnDestroy with the correct context when providing a type provider multiple times on the same node', () => {
+      const resolvedServices: (DestroyService | undefined)[] = [];
+      const destroyContexts: (DestroyService | undefined)[] = [];
+      let parentService: DestroyService | undefined;
+      let childService: DestroyService | undefined;
+
+      @Injectable()
+      class DestroyService {
+        constructor() {
+          resolvedServices.push(this);
+        }
+        ngOnDestroy() {
+          destroyContexts.push(this);
+        }
+      }
+
+      @Directive({selector: '[dir-one]', providers: [DestroyService]})
+      class DirOne {
+        constructor(service: DestroyService) {
+          childService = service;
+        }
+      }
+
+      @Directive({selector: '[dir-two]', providers: [DestroyService]})
+      class DirTwo {
+        constructor(service: DestroyService) {
+          childService = service;
+        }
+      }
+
+      @Component({template: '<div dir-one dir-two></div>', providers: [DestroyService]})
+      class App {
+        constructor(service: DestroyService) {
+          parentService = service;
+        }
+      }
+
+      TestBed.configureTestingModule({declarations: [App, DirOne, DirTwo]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      fixture.destroy();
+
+      expect(parentService).toBeDefined();
+      expect(childService).toBeDefined();
+      expect(parentService).not.toBe(childService);
+      expect(resolvedServices).toEqual([parentService, childService]);
+      expect(destroyContexts).toEqual([parentService, childService]);
+    });
+
+    it('should invoke ngOnDestroy with the correct context when providing a class provider multiple times on the same node', () => {
+      const resolvedServices: (DestroyService | undefined)[] = [];
+      const destroyContexts: (DestroyService | undefined)[] = [];
+      const token = new InjectionToken<any>('token');
+      let parentService: DestroyService | undefined;
+      let childService: DestroyService | undefined;
+
+      @Injectable()
+      class DestroyService {
+        constructor() {
+          resolvedServices.push(this);
+        }
+        ngOnDestroy() {
+          destroyContexts.push(this);
+        }
+      }
+
+      @Directive({selector: '[dir-one]', providers: [{provide: token, useClass: DestroyService}]})
+      class DirOne {
+        constructor(@Inject(token) service: DestroyService) {
+          childService = service;
+        }
+      }
+
+      @Directive({selector: '[dir-two]', providers: [{provide: token, useClass: DestroyService}]})
+      class DirTwo {
+        constructor(@Inject(token) service: DestroyService) {
+          childService = service;
+        }
+      }
+
+      @Component({
+        template: '<div dir-one dir-two></div>',
+        providers: [{provide: token, useClass: DestroyService}],
+      })
+      class App {
+        constructor(@Inject(token) service: DestroyService) {
+          parentService = service;
+        }
+      }
+
+      TestBed.configureTestingModule({declarations: [App, DirOne, DirTwo]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      fixture.destroy();
 
+      expect(parentService).toBeDefined();
+      expect(childService).toBeDefined();
+      expect(parentService).not.toBe(childService);
+      expect(resolvedServices).toEqual([parentService, childService]);
+      expect(destroyContexts).toEqual([parentService, childService]);
+    });
 
     describe('ngOnDestroy on multi providers', () => {
       it('should invoke ngOnDestroy on multi providers with the correct context', () => {
@@ -364,7 +367,7 @@ describe('providers', () => {
           providers: [
             {provide: SERVICES, useClass: DestroyService, multi: true},
             {provide: SERVICES, useClass: OtherDestroyService, multi: true},
-          ]
+          ],
         })
         class App {
           constructor(@Inject(SERVICES) s: any) {}
@@ -376,57 +379,55 @@ describe('providers', () => {
         fixture.destroy();
 
         expect(destroyCalls).toEqual([
-          jasmine.any(DestroyService), jasmine.any(OtherDestroyService)
+          jasmine.any(DestroyService),
+          jasmine.any(OtherDestroyService),
         ]);
       });
 
-      it('should invoke destroy hooks on multi providers with the correct context, if only some have a destroy hook',
-         () => {
-           const destroyCalls: any[] = [];
-           const SERVICES = new InjectionToken<any>('SERVICES');
-
-           @Injectable()
-           class Service1 {
-           }
-
-           @Injectable()
-           class Service2 {
-             ngOnDestroy() {
-               destroyCalls.push(this);
-             }
-           }
-
-           @Injectable()
-           class Service3 {
-           }
-
-           @Injectable()
-           class Service4 {
-             ngOnDestroy() {
-               destroyCalls.push(this);
-             }
-           }
-
-           @Component({
-             template: '<div></div>',
-             providers: [
-               {provide: SERVICES, useClass: Service1, multi: true},
-               {provide: SERVICES, useClass: Service2, multi: true},
-               {provide: SERVICES, useClass: Service3, multi: true},
-               {provide: SERVICES, useClass: Service4, multi: true},
-             ]
-           })
-           class App {
-             constructor(@Inject(SERVICES) s: any) {}
-           }
-
-           TestBed.configureTestingModule({declarations: [App]});
-           const fixture = TestBed.createComponent(App);
-           fixture.detectChanges();
-           fixture.destroy();
-
-           expect(destroyCalls).toEqual([jasmine.any(Service2), jasmine.any(Service4)]);
-         });
+      it('should invoke destroy hooks on multi providers with the correct context, if only some have a destroy hook', () => {
+        const destroyCalls: any[] = [];
+        const SERVICES = new InjectionToken<any>('SERVICES');
+
+        @Injectable()
+        class Service1 {}
+
+        @Injectable()
+        class Service2 {
+          ngOnDestroy() {
+            destroyCalls.push(this);
+          }
+        }
+
+        @Injectable()
+        class Service3 {}
+
+        @Injectable()
+        class Service4 {
+          ngOnDestroy() {
+            destroyCalls.push(this);
+          }
+        }
+
+        @Component({
+          template: '<div></div>',
+          providers: [
+            {provide: SERVICES, useClass: Service1, multi: true},
+            {provide: SERVICES, useClass: Service2, multi: true},
+            {provide: SERVICES, useClass: Service3, multi: true},
+            {provide: SERVICES, useClass: Service4, multi: true},
+          ],
+        })
+        class App {
+          constructor(@Inject(SERVICES) s: any) {}
+        }
+
+        TestBed.configureTestingModule({declarations: [App]});
+        const fixture = TestBed.createComponent(App);
+        fixture.detectChanges();
+        fixture.destroy();
+
+        expect(destroyCalls).toEqual([jasmine.any(Service2), jasmine.any(Service4)]);
+      });
 
       it('should not invoke ngOnDestroy on multi providers created via useFactory', () => {
         let destroyCalls = 0;
@@ -451,7 +452,7 @@ describe('providers', () => {
           providers: [
             {provide: SERVICES, useFactory: () => new DestroyService(), multi: true},
             {provide: SERVICES, useFactory: () => new OtherDestroyService(), multi: true},
-          ]
+          ],
         })
         class App {
           constructor(@Inject(SERVICES) s: any) {}
@@ -525,8 +526,7 @@ describe('providers', () => {
 
     it('should support providing components in tests without @Injectable', () => {
       @Component({selector: 'test-comp', template: '<my-comp></my-comp>'})
-      class TestComp {
-      }
+      class TestComp {}
 
       TestBed.configureTestingModule({
         declarations: [TestComp, MyComp],
@@ -541,8 +541,7 @@ describe('providers', () => {
 
     it('should support providing directives in tests without @Injectable', () => {
       @Component({selector: 'test-comp', template: '<div some-dir></div>'})
-      class TestComp {
-      }
+      class TestComp {}
 
       TestBed.configureTestingModule({
         declarations: [TestComp, MyDir],
@@ -567,10 +566,11 @@ describe('providers', () => {
         TestBed.configureTestingModule({declarations: [MyComp], providers: [MyComp, MyService]});
       });
 
-      it('should support injecting without bootstrapping',
-         waitForAsync(inject([MyComp, MyService], (comp: MyComp, service: MyService) => {
-           expect(comp.svc.value).toEqual('some value');
-         })));
+      it('should support injecting without bootstrapping', waitForAsync(
+        inject([MyComp, MyService], (comp: MyComp, service: MyService) => {
+          expect(comp.svc.value).toEqual('some value');
+        }),
+      ));
     });
   });
 
@@ -591,16 +591,16 @@ describe('providers', () => {
 
       @NgModule({
         providers: [
-          OtherService, {
+          OtherService,
+          {
             provide: MyService,
             useFactory: (dep: {value: string}) => new MyService(dep),
-            deps: [forwardRef(() => OtherService)]
-          }
+            deps: [forwardRef(() => OtherService)],
+          },
         ],
-        declarations: [AppComp]
+        declarations: [AppComp],
       })
-      class MyModule {
-      }
+      class MyModule {}
 
       TestBed.configureTestingModule({imports: [MyModule]});
 
@@ -610,12 +610,10 @@ describe('providers', () => {
 
     it('should support forward refs in useClass when impl version is also provided', () => {
       @Injectable({providedIn: 'root', useClass: forwardRef(() => SomeProviderImpl)})
-      abstract class SomeProvider {
-      }
+      abstract class SomeProvider {}
 
       @Injectable()
-      class SomeProviderImpl extends SomeProvider {
-      }
+      class SomeProviderImpl extends SomeProvider {}
 
       @Component({selector: 'my-app', template: ''})
       class App {
@@ -632,15 +630,12 @@ describe('providers', () => {
       expect(fixture.componentInstance.foo).toBeInstanceOf(SomeProviderImpl);
     });
 
-
     it('should support forward refs in useClass when token is provided', () => {
       @Injectable({providedIn: 'root'})
-      abstract class SomeProvider {
-      }
+      abstract class SomeProvider {}
 
       @Injectable()
-      class SomeProviderImpl extends SomeProvider {
-      }
+      class SomeProviderImpl extends SomeProvider {}
 
       @Component({selector: 'my-app', template: ''})
       class App {
@@ -649,7 +644,7 @@ describe('providers', () => {
 
       TestBed.configureTestingModule({
         declarations: [App],
-        providers: [{provide: SomeProvider, useClass: forwardRef(() => SomeProviderImpl)}]
+        providers: [{provide: SomeProvider, useClass: forwardRef(() => SomeProviderImpl)}],
       });
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -660,21 +655,23 @@ describe('providers', () => {
 
   describe('flags', () => {
     class MyService {
-      constructor(public value: OtherService|null) {}
+      constructor(public value: OtherService | null) {}
     }
 
     class OtherService {}
 
     it('should support Optional flag in deps', () => {
-      const injector = Injector.create(
-          {providers: [{provide: MyService, deps: [[new Optional(), OtherService]]}]});
+      const injector = Injector.create({
+        providers: [{provide: MyService, deps: [[new Optional(), OtherService]]}],
+      });
 
       expect(injector.get(MyService).value).toBe(null);
     });
 
     it('should support Optional flag in deps without instantiating it', () => {
-      const injector =
-          Injector.create({providers: [{provide: MyService, deps: [[Optional, OtherService]]}]});
+      const injector = Injector.create({
+        providers: [{provide: MyService, deps: [[Optional, OtherService]]}],
+      });
 
       expect(injector.get(MyService).value).toBe(null);
     });
@@ -685,16 +682,17 @@ describe('providers', () => {
       @Component({
         selector: 'comp',
         template: '{{s}}-{{n}}',
-        providers: [
-          {provide: Number, useValue: 1, multi: true},
-        ],
+        providers: [{provide: Number, useValue: 1, multi: true}],
         viewProviders: [
           {provide: String, useValue: 'bar'},
           {provide: Number, useValue: 2, multi: true},
-        ]
+        ],
       })
       class Comp {
-        constructor(private s: String, private n: Number) {}
+        constructor(
+          private s: String,
+          private n: Number,
+        ) {}
       }
 
       TestBed.configureTestingModule({declarations: [Comp]});
@@ -711,7 +709,10 @@ describe('providers', () => {
         template: '[{{s}}-{{n}}]',
       })
       class Repeated {
-        constructor(private s: String, private n: Number) {}
+        constructor(
+          private s: String,
+          private n: Number,
+        ) {}
       }
 
       @Component({
@@ -722,9 +723,7 @@ describe('providers', () => {
             </ng-container>
           </div>
         `,
-        providers: [
-          {provide: Number, useValue: 1, multi: true},
-        ],
+        providers: [{provide: Number, useValue: 1, multi: true}],
         viewProviders: [
           {provide: String, useValue: 'foo'},
           {provide: Number, useValue: 2, multi: true},
diff --git a/packages/core/test/acceptance/pure_function_spec.ts b/packages/core/test/acceptance/pure_function_spec.ts
index d0cfb7837948b..ad7a3ed2fd8b7 100644
--- a/packages/core/test/acceptance/pure_function_spec.ts
+++ b/packages/core/test/acceptance/pure_function_spec.ts
@@ -20,7 +20,6 @@ describe('components using pure function instructions internally', () => {
       @Input() names: string[] = [];
     }
 
-
     it('should support an array literal with a binding', () => {
       @Component({
         template: `
@@ -61,7 +60,6 @@ describe('components using pure function instructions internally', () => {
       expect(myComp!.names).toEqual(['should not be overwritten']);
     });
 
-
     it('should support array literals in dynamic views', () => {
       @Component({
         template: `
@@ -123,13 +121,12 @@ describe('components using pure function instructions internally', () => {
       expect(manyPropComp!.names2).toEqual(['Carson']);
     });
 
-
     it('should support an array literals inside fn calls', () => {
       @Component({
         selector: 'parent-comp',
         template: `
                 <my-comp [names]="someFn(['Nancy', customName])"></my-comp>
-              `
+              `,
       })
       class ParentComp {
         customName = 'Bess';
@@ -144,19 +141,18 @@ describe('components using pure function instructions internally', () => {
         template: `
                 <parent-comp></parent-comp>
                 <parent-comp></parent-comp>
-              `
+              `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, MyComp, ParentComp],
       });
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
-      const myComps =
-          fixture.debugElement.queryAll(By.directive(MyComp)).map(f => f.componentInstance);
-
+      const myComps = fixture.debugElement
+        .queryAll(By.directive(MyComp))
+        .map((f) => f.componentInstance);
 
       const firstArray = myComps[0].names;
       const secondArray = myComps[1].names;
@@ -171,7 +167,6 @@ describe('components using pure function instructions internally', () => {
       expect(secondArray).toBe(myComps[1].names);
     });
 
-
     it('should support an array literal with more than 1 binding', () => {
       @Component({
         template: `
@@ -216,7 +211,6 @@ describe('components using pure function instructions internally', () => {
       expect(myComp.names).toEqual(['should not be overwritten']);
     });
 
-
     it('should work up to 8 bindings', () => {
       @Component({
         template: `
@@ -228,7 +222,7 @@ describe('components using pure function instructions internally', () => {
                 <my-comp [names]="['a', 'b', v3, v4, v5, v6, v7, v8]"></my-comp>
                 <my-comp [names]="['a', v2, v3, v4, v5, v6, v7, v8]"></my-comp>
                 <my-comp [names]="[v1, v2, v3, v4, v5, v6, v7, v8]"></my-comp>
-              `
+              `,
       })
       class App {
         v1 = 'a';
@@ -247,10 +241,11 @@ describe('components using pure function instructions internally', () => {
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
-      const myComps =
-          fixture.debugElement.queryAll(By.directive(MyComp)).map(f => f.componentInstance);
+      const myComps = fixture.debugElement
+        .queryAll(By.directive(MyComp))
+        .map((f) => f.componentInstance);
 
-      myComps.forEach(myComp => {
+      myComps.forEach((myComp) => {
         expect(myComp.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']);
       });
 
@@ -294,7 +289,7 @@ describe('components using pure function instructions internally', () => {
         template: `
                 <my-comp [names]="['start', v0, v1, v2, v3, 'modified_' + v4, v5, v6, v7, v8, 'end']">
                 </my-comp>
-              `
+              `,
       })
       class App {
         v0 = 'a';
@@ -316,21 +311,51 @@ describe('components using pure function instructions internally', () => {
       const app = fixture.componentInstance;
 
       expect(myComp.names).toEqual([
-        'start', 'a', 'b', 'c', 'd', 'modified_e', 'f', 'g', 'h', 'i', 'end'
+        'start',
+        'a',
+        'b',
+        'c',
+        'd',
+        'modified_e',
+        'f',
+        'g',
+        'h',
+        'i',
+        'end',
       ]);
 
       app.v0 = 'a1';
       fixture.detectChanges();
 
       expect(myComp.names).toEqual([
-        'start', 'a1', 'b', 'c', 'd', 'modified_e', 'f', 'g', 'h', 'i', 'end'
+        'start',
+        'a1',
+        'b',
+        'c',
+        'd',
+        'modified_e',
+        'f',
+        'g',
+        'h',
+        'i',
+        'end',
       ]);
 
       app.v4 = 'e5';
       fixture.detectChanges();
 
       expect(myComp.names).toEqual([
-        'start', 'a1', 'b', 'c', 'd', 'modified_e5', 'f', 'g', 'h', 'i', 'end'
+        'start',
+        'a1',
+        'b',
+        'c',
+        'd',
+        'modified_e5',
+        'f',
+        'g',
+        'h',
+        'i',
+        'end',
       ]);
     });
   });
@@ -375,7 +400,6 @@ describe('components using pure function instructions internally', () => {
       expect(firstObj).not.toBe(objectComp.config);
     });
 
-
     it('should support expressions nested deeply in object/array literals', () => {
       @Component({
         template: `
@@ -399,14 +423,20 @@ describe('components using pure function instructions internally', () => {
 
       expect(objectComp.config).toEqual({
         animation: 'slide',
-        actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 100}]
+        actions: [
+          {opacity: 0, duration: 0},
+          {opacity: 1, duration: 100},
+        ],
       });
       const firstConfig = objectComp.config;
 
       fixture.detectChanges();
       expect(objectComp.config).toEqual({
         animation: 'slide',
-        actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 100}]
+        actions: [
+          {opacity: 0, duration: 0},
+          {opacity: 1, duration: 100},
+        ],
       });
       expect(objectComp.config).toBe(firstConfig);
 
@@ -414,7 +444,10 @@ describe('components using pure function instructions internally', () => {
       fixture.detectChanges();
       expect(objectComp.config).toEqual({
         animation: 'slide',
-        actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 50}]
+        actions: [
+          {opacity: 0, duration: 0},
+          {opacity: 1, duration: 50},
+        ],
       });
       expect(objectComp.config).not.toBe(firstConfig);
 
@@ -422,7 +455,10 @@ describe('components using pure function instructions internally', () => {
       fixture.detectChanges();
       expect(objectComp.config).toEqual({
         animation: 'tap',
-        actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 50}]
+        actions: [
+          {opacity: 0, duration: 0},
+          {opacity: 1, duration: 50},
+        ],
       });
 
       fixture.componentInstance.name = 'drag';
@@ -430,7 +466,10 @@ describe('components using pure function instructions internally', () => {
       fixture.detectChanges();
       expect(objectComp.config).toEqual({
         animation: 'drag',
-        actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 500}]
+        actions: [
+          {opacity: 0, duration: 0},
+          {opacity: 1, duration: 500},
+        ],
       });
 
       // The property should not be set if the exp value is the same, so artificially
@@ -462,8 +501,9 @@ describe('components using pure function instructions internally', () => {
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
       const app = fixture.componentInstance;
-      const objectComps =
-          fixture.debugElement.queryAll(By.directive(ObjectComp)).map(f => f.componentInstance);
+      const objectComps = fixture.debugElement
+        .queryAll(By.directive(ObjectComp))
+        .map((f) => f.componentInstance);
 
       expect(objectComps[0].config).toEqual({opacity: 0, duration: 500});
       expect(objectComps[1].config).toEqual({opacity: 1, duration: 600});
@@ -486,7 +526,7 @@ describe('components using pure function instructions internally', () => {
         template: `
           <div [dir]="{}"></div>
           <div [dir]="{}"></div>
-        `
+        `,
       })
       class App {
         @ViewChildren(Dir) directives!: QueryList<Dir>;
@@ -505,7 +545,7 @@ describe('components using pure function instructions internally', () => {
         template: `
           <div [dir]="[]"></div>
           <div [dir]="[]"></div>
-        `
+        `,
       })
       class App {
         @ViewChildren(Dir) directives!: QueryList<Dir>;
@@ -532,8 +572,9 @@ describe('components using pure function instructions internally', () => {
       const secondFixture = TestBed.createComponent(App);
       secondFixture.detectChanges();
 
-      expect(firstFixture.componentInstance.directive.value)
-          .not.toBe(secondFixture.componentInstance.directive.value);
+      expect(firstFixture.componentInstance.directive.value).not.toBe(
+        secondFixture.componentInstance.directive.value,
+      );
     });
 
     it('should not share array literals across component instances', () => {
@@ -549,8 +590,9 @@ describe('components using pure function instructions internally', () => {
       const secondFixture = TestBed.createComponent(App);
       secondFixture.detectChanges();
 
-      expect(firstFixture.componentInstance.directive.value)
-          .not.toBe(secondFixture.componentInstance.directive.value);
+      expect(firstFixture.componentInstance.directive.value).not.toBe(
+        secondFixture.componentInstance.directive.value,
+      );
     });
 
     it('should not confuse object literals and null inside of a literal', () => {
@@ -558,7 +600,7 @@ describe('components using pure function instructions internally', () => {
         template: `
           <div [dir]="{foo: null}"></div>
           <div [dir]="{foo: {}}"></div>
-        `
+        `,
       })
       class App {
         @ViewChildren(Dir) directives!: QueryList<Dir>;
@@ -567,7 +609,7 @@ describe('components using pure function instructions internally', () => {
       TestBed.configureTestingModule({declarations: [Dir, App]});
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
-      const values = fixture.componentInstance.directives.map(directive => directive.value);
+      const values = fixture.componentInstance.directives.map((directive) => directive.value);
 
       expect(values).toEqual([{foo: null}, {foo: {}}]);
     });
@@ -577,7 +619,7 @@ describe('components using pure function instructions internally', () => {
         template: `
           <div [dir]="{foo: null}"></div>
           <div [dir]="{foo: []}"></div>
-        `
+        `,
       })
       class App {
         @ViewChildren(Dir) directives!: QueryList<Dir>;
@@ -586,7 +628,7 @@ describe('components using pure function instructions internally', () => {
       TestBed.configureTestingModule({declarations: [Dir, App]});
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
-      const values = fixture.componentInstance.directives.map(directive => directive.value);
+      const values = fixture.componentInstance.directives.map((directive) => directive.value);
 
       expect(values).toEqual([{foo: null}, {foo: []}]);
     });
@@ -596,7 +638,7 @@ describe('components using pure function instructions internally', () => {
         template: `
           <div [dir]="{foo: null}"></div>
           <div [dir]="{foo: getFoo()}"></div>
-        `
+        `,
       })
       class App {
         @ViewChildren(Dir) directives!: QueryList<Dir>;
@@ -608,7 +650,7 @@ describe('components using pure function instructions internally', () => {
       TestBed.configureTestingModule({declarations: [Dir, App]});
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
-      const values = fixture.componentInstance.directives.map(directive => directive.value);
+      const values = fixture.componentInstance.directives.map((directive) => directive.value);
 
       expect(values).toEqual([{foo: null}, {foo: 'foo!'}]);
     });
diff --git a/packages/core/test/acceptance/query_spec.ts b/packages/core/test/acceptance/query_spec.ts
index 33b5a94bbc186..f96eff79fdf4d 100644
--- a/packages/core/test/acceptance/query_spec.ts
+++ b/packages/core/test/acceptance/query_spec.ts
@@ -7,7 +7,25 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {AfterViewInit, Component, ContentChild, ContentChildren, Directive, ElementRef, EventEmitter, forwardRef, InjectionToken, Input, QueryList, TemplateRef, Type, ViewChild, ViewChildren, ViewContainerRef, ViewRef} from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  ContentChild,
+  ContentChildren,
+  Directive,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  InjectionToken,
+  Input,
+  QueryList,
+  TemplateRef,
+  Type,
+  ViewChild,
+  ViewChildren,
+  ViewContainerRef,
+  ViewRef,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
@@ -32,7 +50,7 @@ describe('query logic', () => {
         TestComponentWithToken,
         TestInjectionTokenContentQueries,
         TestInjectionTokenQueries,
-      ]
+      ],
     });
   });
 
@@ -105,8 +123,9 @@ describe('query logic', () => {
       const fixture = initWithTemplate(QueryComp, template);
       const comp = fixture.componentInstance;
       expect(comp.viewChild).toBeInstanceOf(TemplateRef);
-      expect(comp.viewChild.elementRef.nativeElement)
-          .toBe(fixture.debugElement.childNodes[0].nativeNode);
+      expect(comp.viewChild.elementRef.nativeElement).toBe(
+        fixture.debugElement.childNodes[0].nativeNode,
+      );
 
       expect(comp.viewChildren.first).toBeInstanceOf(TemplateRef);
       expect(comp.viewChildren.last).toBeInstanceOf(TemplateRef);
@@ -193,8 +212,9 @@ describe('query logic', () => {
 
       expect(comp.headers).toBeTruthy();
       expect(comp.headers.length).toBe(2);
-      expect(comp.headers.toArray().every(result => result instanceof SuperDirectiveQueryTarget))
-          .toBe(true);
+      expect(
+        comp.headers.toArray().every((result) => result instanceof SuperDirectiveQueryTarget),
+      ).toBe(true);
     });
 
     it('should support ViewChild query inherited from undecorated superclasses', () => {
@@ -203,8 +223,7 @@ describe('query logic', () => {
       }
 
       @Component({selector: 'sub-comp', template: '<div #foo></div>'})
-      class SubComp extends MyComp {
-      }
+      class SubComp extends MyComp {}
 
       TestBed.configureTestingModule({declarations: [SubComp]});
 
@@ -221,8 +240,7 @@ describe('query logic', () => {
       class MyComp extends MySuperComp {}
 
       @Component({selector: 'sub-comp', template: '<div #foo></div>'})
-      class SubComp extends MyComp {
-      }
+      class SubComp extends MyComp {}
 
       TestBed.configureTestingModule({declarations: [SubComp]});
 
@@ -233,8 +251,7 @@ describe('query logic', () => {
 
     it('should support ViewChildren query inherited from undecorated superclasses', () => {
       @Directive({selector: '[some-dir]'})
-      class SomeDir {
-      }
+      class SomeDir {}
 
       class MyComp {
         @ViewChildren(SomeDir) foo!: QueryList<SomeDir>;
@@ -245,10 +262,9 @@ describe('query logic', () => {
         template: `
           <div some-dir></div>
           <div some-dir></div>
-        `
+        `,
       })
-      class SubComp extends MyComp {
-      }
+      class SubComp extends MyComp {}
 
       TestBed.configureTestingModule({declarations: [SubComp, SomeDir]});
 
@@ -260,8 +276,7 @@ describe('query logic', () => {
 
     it('should support ViewChildren query inherited from undecorated grand superclasses', () => {
       @Directive({selector: '[some-dir]'})
-      class SomeDir {
-      }
+      class SomeDir {}
 
       class MySuperComp {
         @ViewChildren(SomeDir) foo!: QueryList<SomeDir>;
@@ -274,10 +289,9 @@ describe('query logic', () => {
         template: `
           <div some-dir></div>
           <div some-dir></div>
-        `
+        `,
       })
-      class SubComp extends MyComp {
-      }
+      class SubComp extends MyComp {}
 
       TestBed.configureTestingModule({declarations: [SubComp, SomeDir]});
 
@@ -289,12 +303,11 @@ describe('query logic', () => {
 
     it('should support ViewChild query where template is inserted in child component', () => {
       @Component({selector: 'required', template: ''})
-      class Required {
-      }
+      class Required {}
 
       @Component({
         selector: 'insertion',
-        template: `<ng-container [ngTemplateOutlet]="content"></ng-container>`
+        template: `<ng-container [ngTemplateOutlet]="content"></ng-container>`,
       })
       class Insertion {
         @Input() content!: TemplateRef<{}>;
@@ -306,7 +319,7 @@ describe('query logic', () => {
             <required></required>
           </ng-template>
           <insertion [content]="template"></insertion>
-          `
+          `,
       })
       class App {
         @ViewChild(Required) requiredEl!: Required;
@@ -317,8 +330,9 @@ describe('query logic', () => {
         }
       }
 
-      const fixture = TestBed.configureTestingModule({declarations: [App, Insertion, Required]})
-                          .createComponent(App);
+      const fixture = TestBed.configureTestingModule({
+        declarations: [App, Insertion, Required],
+      }).createComponent(App);
       fixture.detectChanges();
       expect(fixture.componentInstance.viewChildAvailableInAfterViewInit).toBe(true);
     });
@@ -346,7 +360,7 @@ describe('query logic', () => {
           <ng-container *ngIf="condition">
             <comp-with-view-query></comp-with-view-query>
           </ng-container>
-        `
+        `,
       })
       class Root {
         condition = true;
@@ -384,8 +398,9 @@ describe('query logic', () => {
 
     it('should support selecting InjectionToken', () => {
       const fixture = TestBed.createComponent(TestInjectionTokenContentQueries);
-      const instance =
-          fixture.debugElement.query(By.directive(TestInjectionTokenQueries)).componentInstance;
+      const instance = fixture.debugElement.query(
+        By.directive(TestInjectionTokenQueries),
+      ).componentInstance;
       fixture.detectChanges();
       expect(instance.contentFirstOption).toBeDefined();
       expect(instance.contentFirstOption instanceof TestComponentWithToken).toBe(true);
@@ -408,7 +423,6 @@ describe('query logic', () => {
       expect(comp.contentChildren.length).toBe(2);
     });
 
-
     it('should return ElementRef when HTML element is labeled and retrieved', () => {
       const template = `
          <local-ref-query-component #q>
@@ -469,34 +483,33 @@ describe('query logic', () => {
       expect(comp.contentChildren.length).toBe(2);
     });
 
-    it('should set static content child queries in creation mode (and just in creation mode)',
-       () => {
-         const template = `
+    it('should set static content child queries in creation mode (and just in creation mode)', () => {
+      const template = `
               <static-content-query-comp>
                   <div [text]="text"></div>
                   <span #foo></span>
               </static-content-query-comp>
             `;
-         TestBed.overrideComponent(AppComp, {set: new Component({template})});
-         const fixture = TestBed.createComponent(AppComp);
-         const component = fixture.debugElement.children[0].injector.get(StaticContentQueryComp);
+      TestBed.overrideComponent(AppComp, {set: new Component({template})});
+      const fixture = TestBed.createComponent(AppComp);
+      const component = fixture.debugElement.children[0].injector.get(StaticContentQueryComp);
 
-         // static ContentChild query should be set in creation mode, before CD runs
-         expect(component.textDir).toBeInstanceOf(TextDirective);
-         expect(component.textDir.text).toEqual('');
-         expect(component.setEvents).toEqual(['textDir set']);
+      // static ContentChild query should be set in creation mode, before CD runs
+      expect(component.textDir).toBeInstanceOf(TextDirective);
+      expect(component.textDir.text).toEqual('');
+      expect(component.setEvents).toEqual(['textDir set']);
 
-         // dynamic ContentChild query should not have been resolved yet
-         expect(component.foo).not.toBeDefined();
+      // dynamic ContentChild query should not have been resolved yet
+      expect(component.foo).not.toBeDefined();
 
-         const span = fixture.nativeElement.querySelector('span');
-         (fixture.componentInstance as any).text = 'some text';
-         fixture.detectChanges();
+      const span = fixture.nativeElement.querySelector('span');
+      (fixture.componentInstance as any).text = 'some text';
+      fixture.detectChanges();
 
-         expect(component.textDir.text).toEqual('some text');
-         expect(component.foo.nativeElement).toBe(span);
-         expect(component.setEvents).toEqual(['textDir set', 'foo set']);
-       });
+      expect(component.textDir.text).toEqual('some text');
+      expect(component.foo.nativeElement).toBe(span);
+      expect(component.setEvents).toEqual(['textDir set', 'foo set']);
+    });
 
     it('should support static content child queries inherited from superclasses', () => {
       const template = `
@@ -509,8 +522,9 @@ describe('query logic', () => {
             `;
       TestBed.overrideComponent(AppComp, {set: new Component({template})});
       const fixture = TestBed.createComponent(AppComp);
-      const component =
-          fixture.debugElement.children[0].injector.get(SubclassStaticContentQueryComp);
+      const component = fixture.debugElement.children[0].injector.get(
+        SubclassStaticContentQueryComp,
+      );
       const divs = fixture.nativeElement.querySelectorAll('div');
       const spans = fixture.nativeElement.querySelectorAll('span');
 
@@ -606,8 +620,7 @@ describe('query logic', () => {
       }
 
       @Component({selector: 'sub-comp', template: '<ng-content></ng-content>'})
-      class SubComp extends MyComp {
-      }
+      class SubComp extends MyComp {}
 
       @Component({template: '<sub-comp><div #foo></div></sub-comp>'})
       class App {
@@ -629,8 +642,7 @@ describe('query logic', () => {
       class MyComp extends MySuperComp {}
 
       @Component({selector: 'sub-comp', template: '<ng-content></ng-content>'})
-      class SubComp extends MyComp {
-      }
+      class SubComp extends MyComp {}
 
       @Component({template: '<sub-comp><div #foo></div></sub-comp>'})
       class App {
@@ -646,16 +658,14 @@ describe('query logic', () => {
 
     it('should support ContentChildren query inherited from undecorated superclasses', () => {
       @Directive({selector: '[some-dir]'})
-      class SomeDir {
-      }
+      class SomeDir {}
 
       class MyComp {
         @ContentChildren(SomeDir) foo!: QueryList<SomeDir>;
       }
 
       @Component({selector: 'sub-comp', template: '<ng-content></ng-content>'})
-      class SubComp extends MyComp {
-      }
+      class SubComp extends MyComp {}
 
       @Component({
         template: `
@@ -663,7 +673,7 @@ describe('query logic', () => {
           <div some-dir></div>
           <div some-dir></div>
         </sub-comp>
-      `
+      `,
       })
       class App {
         @ViewChild(SubComp) subComp!: SubComp;
@@ -679,8 +689,7 @@ describe('query logic', () => {
 
     it('should support ContentChildren query inherited from undecorated grand superclasses', () => {
       @Directive({selector: '[some-dir]'})
-      class SomeDir {
-      }
+      class SomeDir {}
 
       class MySuperComp {
         @ContentChildren(SomeDir) foo!: QueryList<SomeDir>;
@@ -689,8 +698,7 @@ describe('query logic', () => {
       class MyComp extends MySuperComp {}
 
       @Component({selector: 'sub-comp', template: '<ng-content></ng-content>'})
-      class SubComp extends MyComp {
-      }
+      class SubComp extends MyComp {}
 
       @Component({
         template: `
@@ -698,7 +706,7 @@ describe('query logic', () => {
           <div some-dir></div>
           <div some-dir></div>
         </sub-comp>
-      `
+      `,
       })
       class App {
         @ViewChild(SubComp) subComp!: SubComp;
@@ -719,7 +727,7 @@ describe('query logic', () => {
           <shallow-comp>
             <div *ngIf="showing" #foo></div>
           </shallow-comp>
-        `
+        `,
       })
       class TestComponent {
         showing = false;
@@ -733,8 +741,10 @@ describe('query logic', () => {
         @ContentChildren('foo', {descendants: false}) foos!: QueryList<ElementRef>;
       }
 
-      TestBed.configureTestingModule(
-          {declarations: [TestComponent, ShallowComp], imports: [CommonModule]});
+      TestBed.configureTestingModule({
+        declarations: [TestComponent, ShallowComp],
+        imports: [CommonModule],
+      });
       const fixture = TestBed.createComponent(TestComponent);
       fixture.detectChanges();
 
@@ -798,18 +808,20 @@ describe('query logic', () => {
       fixture.detectChanges();
 
       for (let i = 0; i < 3; i++) {
-        expect(withContentInstances[i].foos.length)
-            .toBe(1, `Expected content query to match <span #foo>.`);
+        expect(withContentInstances[i].foos.length).toBe(
+          1,
+          `Expected content query to match <span #foo>.`,
+        );
 
-        expect(withContentInstances[i].contentInitQuerySnapshot)
-            .toBe(
-                1,
-                `Expected content query results to be available when ngAfterContentInit was called.`);
+        expect(withContentInstances[i].contentInitQuerySnapshot).toBe(
+          1,
+          `Expected content query results to be available when ngAfterContentInit was called.`,
+        );
 
-        expect(withContentInstances[i].contentCheckedQuerySnapshot)
-            .toBe(
-                1,
-                `Expected content query results to be available when ngAfterContentChecked was called.`);
+        expect(withContentInstances[i].contentCheckedQuerySnapshot).toBe(
+          1,
+          `Expected content query results to be available when ngAfterContentChecked was called.`,
+        );
       }
     });
 
@@ -825,7 +837,7 @@ describe('query logic', () => {
       @Component({
         standalone: true,
         imports: [ContentQueryDirective],
-        template: `<div content-query #foo></div>`
+        template: `<div content-query #foo></div>`,
       })
       class TestCmp {
         @ViewChild(ContentQueryDirective, {static: true})
@@ -856,10 +868,10 @@ describe('query logic', () => {
             </div>
             <span #baz></span>
           </div>
-        `
+        `,
       })
       class TestCmp {
-        @ViewChild('in', {static: true}) in !: ContentQueryDirective;
+        @ViewChild('in', {static: true}) in!: ContentQueryDirective;
         @ViewChild('out', {static: true}) out!: ContentQueryDirective;
       }
 
@@ -888,10 +900,10 @@ describe('query logic', () => {
               <span #foo></span>
             </div>
           </div>
-        `
+        `,
       })
       class TestCmp {
-        @ViewChild('in', {static: true}) in !: ContentQueryDirective;
+        @ViewChild('in', {static: true}) in!: ContentQueryDirective;
         @ViewChild('out', {static: true}) out!: ContentQueryDirective;
       }
 
@@ -905,52 +917,50 @@ describe('query logic', () => {
       expect(outQList.length).toBe(1);
     });
 
-    it('should respect shallow flag on content queries when mixing deep and shallow queries',
-       () => {
-         @Directive(
-             {selector: '[shallow-content-query]', standalone: true, exportAs: 'shallow-query'})
-         class ShallowContentQueryDirective {
-           @ContentChildren('foo') qlist!: QueryList<ElementRef>;
-         }
+    it('should respect shallow flag on content queries when mixing deep and shallow queries', () => {
+      @Directive({selector: '[shallow-content-query]', standalone: true, exportAs: 'shallow-query'})
+      class ShallowContentQueryDirective {
+        @ContentChildren('foo') qlist!: QueryList<ElementRef>;
+      }
 
-         @Directive({selector: '[deep-content-query]', standalone: true, exportAs: 'deep-query'})
-         class DeepContentQueryDirective {
-           @ContentChildren('foo', {descendants: true}) qlist!: QueryList<ElementRef>;
-         }
+      @Directive({selector: '[deep-content-query]', standalone: true, exportAs: 'deep-query'})
+      class DeepContentQueryDirective {
+        @ContentChildren('foo', {descendants: true}) qlist!: QueryList<ElementRef>;
+      }
 
-         @Component({
-           standalone: true,
-           imports: [ShallowContentQueryDirective, DeepContentQueryDirective],
-           template: `
+      @Component({
+        standalone: true,
+        imports: [ShallowContentQueryDirective, DeepContentQueryDirective],
+        template: `
           <div shallow-content-query #shallow="shallow-query" deep-content-query #deep="deep-query">
             <span #foo></span>
             <div>
               <span #foo></span>
             </div>
           </div>
-        `
-         })
-         class TestCmp {
-           @ViewChild('shallow', {static: true}) shallow!: ShallowContentQueryDirective;
-           @ViewChild('deep', {static: true}) deep!: DeepContentQueryDirective;
-         }
+        `,
+      })
+      class TestCmp {
+        @ViewChild('shallow', {static: true}) shallow!: ShallowContentQueryDirective;
+        @ViewChild('deep', {static: true}) deep!: DeepContentQueryDirective;
+      }
 
-         const fixture = TestBed.createComponent(TestCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(TestCmp);
+      fixture.detectChanges();
 
-         const inQList = fixture.componentInstance.shallow.qlist;
-         expect(inQList.length).toBe(1);
+      const inQList = fixture.componentInstance.shallow.qlist;
+      expect(inQList.length).toBe(1);
 
-         const outQList = fixture.componentInstance.deep.qlist;
-         expect(outQList.length).toBe(2);
-       });
+      const outQList = fixture.componentInstance.deep.qlist;
+      expect(outQList.length).toBe(2);
+    });
 
     it('should support shallow ContentChild queries', () => {
       @Directive({selector: '[query-dir]', standalone: true})
       class ContentQueryDirective {
-        @ContentChild('foo', {descendants: false}) shallow: ElementRef|undefined;
+        @ContentChild('foo', {descendants: false}) shallow: ElementRef | undefined;
         // ContentChild queries have {descendants: true} option by default
-        @ContentChild('foo') deep: ElementRef|undefined;
+        @ContentChild('foo') deep: ElementRef | undefined;
       }
 
       @Component({
@@ -962,7 +972,7 @@ describe('query logic', () => {
               <span #foo></span>
             </div>
           </div>
-        `
+        `,
       })
       class TestCmp {
         @ViewChild(ContentQueryDirective, {static: true}) queryDir!: ContentQueryDirective;
@@ -992,7 +1002,7 @@ describe('query logic', () => {
             <div id="contentAndView" #foo></div>
           </div>
           <div id="contentOnly" #bar></div>
-        `
+        `,
       })
       class TestCmp {
         @ViewChild(ContentQueryDirective, {static: true}) contentQueryDir!: ContentQueryDirective;
@@ -1016,7 +1026,7 @@ describe('query logic', () => {
   describe('query order', () => {
     @Directive({selector: '[text]', standalone: true})
     class TextDirective {
-      @Input() text: string|undefined;
+      @Input() text: string | undefined;
     }
 
     it('should register view query matches from top to bottom', () => {
@@ -1030,7 +1040,7 @@ describe('query logic', () => {
               <span text="D"></span>
             </span>
           </div>
-          <span text="E"></span>`
+          <span text="E"></span>`,
       })
       class TestCmp {
         @ViewChildren(TextDirective) texts!: QueryList<TextDirective>;
@@ -1039,8 +1049,12 @@ describe('query logic', () => {
       const fixture = TestBed.createComponent(TestCmp);
       fixture.detectChanges();
 
-      expect(fixture.componentInstance.texts.map(item => item.text)).toEqual([
-        'A', 'B', 'C', 'D', 'E'
+      expect(fixture.componentInstance.texts.map((item) => item.text)).toEqual([
+        'A',
+        'B',
+        'C',
+        'D',
+        'E',
       ]);
     });
 
@@ -1065,7 +1079,7 @@ describe('query logic', () => {
               </span>
             </div>
             <span text="E"></span>
-          </div>`
+          </div>`,
       })
       class TestCmp {
         @ViewChild(ContentQueryDirective, {static: true})
@@ -1075,9 +1089,9 @@ describe('query logic', () => {
       const fixture = TestBed.createComponent(TestCmp);
       fixture.detectChanges();
 
-      expect(fixture.componentInstance.contentQueryDirective.texts.map(item => item.text)).toEqual([
-        'A', 'B', 'C', 'D', 'E'
-      ]);
+      expect(
+        fixture.componentInstance.contentQueryDirective.texts.map((item) => item.text),
+      ).toEqual(['A', 'B', 'C', 'D', 'E']);
     });
   });
 
@@ -1102,28 +1116,24 @@ describe('query logic', () => {
       return result.nativeElement != null;
     }
 
-    it('should match directives on elements that used to be wrapped by a required parent in HTML parser',
-       () => {
-         @Directive({selector: '[myDef]'})
-         class MyDef {
-         }
-
-         @Component({selector: 'my-container', template: ``})
-         class MyContainer {
-           @ContentChildren(MyDef) myDefs!: QueryList<MyDef>;
-         }
-         @Component(
-             {selector: 'test-cmpt', template: `<my-container><tr myDef></tr></my-container>`})
-         class TestCmpt {
-         }
-
-         TestBed.configureTestingModule({declarations: [TestCmpt, MyContainer, MyDef]});
-         const fixture = TestBed.createComponent(TestCmpt);
-         const cmptWithQuery = fixture.debugElement.children[0].injector.get(MyContainer);
-
-         fixture.detectChanges();
-         expect(cmptWithQuery.myDefs.length).toBe(1);
-       });
+    it('should match directives on elements that used to be wrapped by a required parent in HTML parser', () => {
+      @Directive({selector: '[myDef]'})
+      class MyDef {}
+
+      @Component({selector: 'my-container', template: ``})
+      class MyContainer {
+        @ContentChildren(MyDef) myDefs!: QueryList<MyDef>;
+      }
+      @Component({selector: 'test-cmpt', template: `<my-container><tr myDef></tr></my-container>`})
+      class TestCmpt {}
+
+      TestBed.configureTestingModule({declarations: [TestCmpt, MyContainer, MyDef]});
+      const fixture = TestBed.createComponent(TestCmpt);
+      const cmptWithQuery = fixture.debugElement.children[0].injector.get(MyContainer);
+
+      fixture.detectChanges();
+      expect(cmptWithQuery.myDefs.length).toBe(1);
+    });
 
     it('should match elements with local refs inside <ng-container>', () => {
       @Component({selector: 'needs-target', template: ``})
@@ -1140,8 +1150,7 @@ describe('query logic', () => {
           </needs-target>
         `,
       })
-      class TestCmpt {
-      }
+      class TestCmpt {}
 
       TestBed.configureTestingModule({declarations: [TestCmpt, NeedsTarget]});
       const fixture = TestBed.createComponent(TestCmpt);
@@ -1172,8 +1181,7 @@ describe('query logic', () => {
           </needs-target>
         `,
       })
-      class TestCmpt {
-      }
+      class TestCmpt {}
 
       TestBed.configureTestingModule({declarations: [TestCmpt, NeedsTarget]});
       const fixture = TestBed.createComponent(TestCmpt);
@@ -1186,8 +1194,7 @@ describe('query logic', () => {
 
     it('should match directives inside <ng-container>', () => {
       @Directive({selector: '[targetDir]'})
-      class TargetDir {
-      }
+      class TargetDir {}
 
       @Component({selector: 'needs-target', template: ``})
       class NeedsTarget {
@@ -1204,8 +1211,7 @@ describe('query logic', () => {
           </needs-target>
         `,
       })
-      class TestCmpt {
-      }
+      class TestCmpt {}
 
       TestBed.configureTestingModule({declarations: [TestCmpt, NeedsTarget, TargetDir]});
       const fixture = TestBed.createComponent(TestCmpt);
@@ -1218,8 +1224,7 @@ describe('query logic', () => {
 
     it('should match directives inside nested <ng-container>', () => {
       @Directive({selector: '[targetDir]'})
-      class TargetDir {
-      }
+      class TargetDir {}
 
       @Component({selector: 'needs-target', template: ``})
       class NeedsTarget {
@@ -1240,8 +1245,7 @@ describe('query logic', () => {
           </needs-target>
         `,
       })
-      class TestCmpt {
-      }
+      class TestCmpt {}
 
       TestBed.configureTestingModule({declarations: [TestCmpt, NeedsTarget, TargetDir]});
       const fixture = TestBed.createComponent(TestCmpt);
@@ -1254,8 +1258,7 @@ describe('query logic', () => {
 
     it('should cross child ng-container when query is declared on ng-container', () => {
       @Directive({selector: '[targetDir]'})
-      class TargetDir {
-      }
+      class TargetDir {}
 
       @Directive({selector: '[needs-target]'})
       class NeedsTarget {
@@ -1274,8 +1277,7 @@ describe('query logic', () => {
           </ng-container>
         `,
       })
-      class TestCmpt {
-      }
+      class TestCmpt {}
 
       TestBed.configureTestingModule({declarations: [TestCmpt, NeedsTarget, TargetDir]});
       const fixture = TestBed.createComponent(TestCmpt);
@@ -1288,8 +1290,7 @@ describe('query logic', () => {
 
     it('should match nodes when using structural directives (*syntax) on <ng-container>', () => {
       @Directive({selector: '[targetDir]'})
-      class TargetDir {
-      }
+      class TargetDir {}
 
       @Component({selector: 'needs-target', template: ``})
       class NeedsTarget {
@@ -1308,8 +1309,7 @@ describe('query logic', () => {
           </needs-target>
         `,
       })
-      class TestCmpt {
-      }
+      class TestCmpt {}
 
       TestBed.configureTestingModule({declarations: [TestCmpt, NeedsTarget, TargetDir]});
       const fixture = TestBed.createComponent(TestCmpt);
@@ -1324,8 +1324,7 @@ describe('query logic', () => {
 
     it('should match directives on <ng-container> when crossing nested <ng-container>', () => {
       @Directive({selector: '[targetDir]'})
-      class TargetDir {
-      }
+      class TargetDir {}
 
       @Component({selector: 'needs-target', template: ``})
       class NeedsTarget {
@@ -1346,8 +1345,7 @@ describe('query logic', () => {
           </needs-target>
         `,
       })
-      class TestCmpt {
-      }
+      class TestCmpt {}
 
       TestBed.configureTestingModule({declarations: [TestCmpt, NeedsTarget, TargetDir]});
       const fixture = TestBed.createComponent(TestCmpt);
@@ -1360,12 +1358,10 @@ describe('query logic', () => {
 
   describe('read option', () => {
     @Directive({selector: '[child]', standalone: true})
-    class Child {
-    }
+    class Child {}
 
     @Directive({selector: '[otherChild]', standalone: true})
-    class OtherChild {
-    }
+    class OtherChild {}
 
     it('should query using type predicate and read ElementRef', () => {
       @Component({
@@ -1490,23 +1486,22 @@ describe('query logic', () => {
       expect(qList.first.nativeElement).toBe(elToQuery);
     });
 
-    it('should query for <ng-container> and read ElementRef with a native element pointing to comment node',
-       () => {
-         @Component({
-           standalone: true,
-           template: `<ng-container #foo></ng-container>`,
-         })
-         class TestCmp {
-           @ViewChildren('foo', {read: ElementRef}) query?: QueryList<ElementRef>;
-         }
+    it('should query for <ng-container> and read ElementRef with a native element pointing to comment node', () => {
+      @Component({
+        standalone: true,
+        template: `<ng-container #foo></ng-container>`,
+      })
+      class TestCmp {
+        @ViewChildren('foo', {read: ElementRef}) query?: QueryList<ElementRef>;
+      }
 
-         const fixture = TestBed.createComponent(TestCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(TestCmp);
+      fixture.detectChanges();
 
-         const qList = fixture.componentInstance.query!;
-         expect(qList.length).toBe(1);
-         expect(qList.first.nativeElement.nodeType).toBe(Node.COMMENT_NODE);
-       });
+      const qList = fixture.componentInstance.query!;
+      expect(qList.length).toBe(1);
+      expect(qList.first.nativeElement.nodeType).toBe(Node.COMMENT_NODE);
+    });
 
     it('should query for <ng-container> and read ElementRef without explicit read option', () => {
       @Component({
@@ -1559,23 +1554,22 @@ describe('query logic', () => {
       expect(qList.first).toBeInstanceOf(ViewContainerRef);
     });
 
-    it('should read ElementRef with a native element pointing to comment DOM node from ng-template',
-       () => {
-         @Component({
-           standalone: true,
-           template: `<ng-template #foo></ng-template>`,
-         })
-         class TestCmp {
-           @ViewChildren('foo', {read: ElementRef}) query?: QueryList<ElementRef>;
-         }
+    it('should read ElementRef with a native element pointing to comment DOM node from ng-template', () => {
+      @Component({
+        standalone: true,
+        template: `<ng-template #foo></ng-template>`,
+      })
+      class TestCmp {
+        @ViewChildren('foo', {read: ElementRef}) query?: QueryList<ElementRef>;
+      }
 
-         const fixture = TestBed.createComponent(TestCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(TestCmp);
+      fixture.detectChanges();
 
-         const qList = fixture.componentInstance.query!;
-         expect(qList.length).toBe(1);
-         expect(qList.first.nativeElement.nodeType).toBe(Node.COMMENT_NODE);
-       });
+      const qList = fixture.componentInstance.query!;
+      expect(qList.length).toBe(1);
+      expect(qList.first.nativeElement.nodeType).toBe(Node.COMMENT_NODE);
+    });
 
     it('should read TemplateRef from ng-template by default', () => {
       @Component({
@@ -1613,8 +1607,7 @@ describe('query logic', () => {
 
     it('should read component instance if element queried for is a component host', () => {
       @Component({selector: 'child-cmp', standalone: true, template: ''})
-      class ChildCmp {
-      }
+      class ChildCmp {}
 
       @Component({
         standalone: true,
@@ -1640,8 +1633,7 @@ describe('query logic', () => {
         standalone: true,
         template: '',
       })
-      class ChildCmp {
-      }
+      class ChildCmp {}
 
       @Component({
         standalone: true,
@@ -1660,37 +1652,33 @@ describe('query logic', () => {
       expect(qList.first).toBeInstanceOf(ChildCmp);
     });
 
-    it('should read directive instance if element queried for has an exported directive with a matching name',
-       () => {
-         @Directive({selector: '[child]', exportAs: 'child', standalone: true})
-         class ChildDirective {
-         }
+    it('should read directive instance if element queried for has an exported directive with a matching name', () => {
+      @Directive({selector: '[child]', exportAs: 'child', standalone: true})
+      class ChildDirective {}
 
-         @Component({
-           standalone: true,
-           imports: [ChildDirective],
-           template: `<div #foo="child" child></div>`,
-         })
-         class TestCmp {
-           @ViewChildren('foo') query?: QueryList<ChildDirective>;
-         }
+      @Component({
+        standalone: true,
+        imports: [ChildDirective],
+        template: `<div #foo="child" child></div>`,
+      })
+      class TestCmp {
+        @ViewChildren('foo') query?: QueryList<ChildDirective>;
+      }
 
-         const fixture = TestBed.createComponent(TestCmp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(TestCmp);
+      fixture.detectChanges();
 
-         const qList = fixture.componentInstance.query!;
-         expect(qList.length).toBe(1);
-         expect(qList.first).toBeInstanceOf(ChildDirective);
-       });
+      const qList = fixture.componentInstance.query!;
+      expect(qList.length).toBe(1);
+      expect(qList.first).toBeInstanceOf(ChildDirective);
+    });
 
     it('should read all matching directive instances from a given element', () => {
       @Directive({selector: '[child1]', exportAs: 'child1', standalone: true})
-      class Child1Dir {
-      }
+      class Child1Dir {}
 
       @Directive({selector: '[child2]', exportAs: 'child2', standalone: true})
-      class Child2Dir {
-      }
+      class Child2Dir {}
 
       @Component({
         standalone: true,
@@ -1712,8 +1700,7 @@ describe('query logic', () => {
 
     it('should read multiple locals exporting the same directive from a given element', () => {
       @Directive({selector: '[child]', exportAs: 'child', standalone: true})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       @Component({
         standalone: true,
@@ -1764,8 +1751,7 @@ describe('query logic', () => {
 
     it('should match on exported directive name and read a requested token', () => {
       @Directive({selector: '[child]', exportAs: 'child', standalone: true})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       @Component({
         standalone: true,
@@ -1786,8 +1772,7 @@ describe('query logic', () => {
 
     it('should support reading a mix of ElementRef and directive instances', () => {
       @Directive({selector: '[child]', exportAs: 'child', standalone: true})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       @Component({
         standalone: true,
@@ -1809,8 +1794,7 @@ describe('query logic', () => {
 
     it('should not add results to selector-based query if a requested token cant be read', () => {
       @Directive({selector: '[child]', standalone: true})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       @Component({
         standalone: true,
@@ -1830,12 +1814,10 @@ describe('query logic', () => {
 
     it('should not add results to directive-based query if only read token matches', () => {
       @Directive({selector: '[child]', standalone: true})
-      class ChildDir {
-      }
+      class ChildDir {}
 
       @Directive({selector: '[otherChild]', standalone: true})
-      class OtherChildDir {
-      }
+      class OtherChildDir {}
 
       @Component({
         standalone: true,
@@ -1931,7 +1913,6 @@ describe('query logic', () => {
     });
   });
 
-
   describe('observable interface', () => {
     it('should allow observing changes to query list', () => {
       const fixture = TestBed.createComponent(QueryCompWithChanges);
@@ -1958,8 +1939,9 @@ describe('query logic', () => {
       // Recomputing the query may result in no changes to the query (the item added/removed was
       // not part of the query). This tests asserts that the query does not fire when no changes
       // occur.
-      TestBed.configureTestingModule(
-          {declarations: [QueryCompWithStrictChangeEmitParent, QueryCompWithNoChanges]});
+      TestBed.configureTestingModule({
+        declarations: [QueryCompWithStrictChangeEmitParent, QueryCompWithNoChanges],
+      });
       const fixture = TestBed.createComponent(QueryCompWithNoChanges);
       let changesStrict = 0;
       const componentInstance = fixture.componentInstance.queryComp;
@@ -1973,20 +1955,19 @@ describe('query logic', () => {
       // First verify that the subscription is working.
       fixture.componentInstance.innerShowing = false;
       fixture.detectChanges();
-      expect(changesStrict).toBe(1);  // We detected a change
+      expect(changesStrict).toBe(1); // We detected a change
       expect(componentInstance.foos.toArray().length).toEqual(1);
 
-
       // now verify that removing a view does not needlessly fire subscription
       fixture.componentInstance.showing = false;
       fixture.detectChanges();
-      expect(changesStrict).toBe(1);  // We detected a change
+      expect(changesStrict).toBe(1); // We detected a change
       expect(componentInstance.foos.toArray().length).toEqual(1);
 
       // now verify that adding a view does not needlessly fire subscription
       fixture.componentInstance.showing = true;
       fixture.detectChanges();
-      expect(changesStrict).toBe(1);  // We detected a change
+      expect(changesStrict).toBe(1); // We detected a change
       // Note: even though the `showing` is `true` and the second `<div>` is displayed, the
       // child element of that <div> is hidden because the `innerShowing` flag is still `false`,
       // so we expect only one element to be present in the `foos` array.
@@ -2020,7 +2001,7 @@ describe('query logic', () => {
             <ng-template [ngIf]="value">
               <div #foo></div>
             </ng-template>
-          `
+          `,
         })
         class TestComponent {
           value: boolean = false;
@@ -2054,7 +2035,7 @@ describe('query logic', () => {
           `,
         })
         class TestComponent {
-          value: string[]|undefined;
+          value: string[] | undefined;
           @ViewChildren('foo') query!: QueryList<any>;
         }
 
@@ -2087,45 +2068,45 @@ describe('query logic', () => {
        * when the previous and new indexes for the move operation are the same;
        * - detect the situation where the indexes are the same and do no processing in such case.
        */
-      it('should NOT notify on changes when a given view is removed and re-inserted at the same index',
-         () => {
-           @Component({
-             selector: 'test-comp',
-             template: `
+      it('should NOT notify on changes when a given view is removed and re-inserted at the same index', () => {
+        @Component({
+          selector: 'test-comp',
+          template: `
               <ng-template #tpl><div #foo>match</div></ng-template>
               <ng-template vc></ng-template>
             `,
-           })
-           class TestComponent implements AfterViewInit {
-             queryListNotificationCounter = 0;
-
-             @ViewChild(ViewContainerManipulatorDirective) vc!: ViewContainerManipulatorDirective;
-             @ViewChild('tpl') tpl!: TemplateRef<any>;
-             @ViewChildren('foo') query!: QueryList<any>;
-
-             ngAfterViewInit() {
-               this.query.changes.subscribe(() => this.queryListNotificationCounter++);
-             }
-           }
-
-           TestBed.configureTestingModule(
-               {declarations: [ViewContainerManipulatorDirective, TestComponent]});
-           const fixture = TestBed.createComponent(TestComponent);
-           fixture.detectChanges();
-
-           const queryList = fixture.componentInstance.query;
-           const {tpl, vc} = fixture.componentInstance;
-
-           const viewRef = vc.insertTpl(tpl, {}, 0);
-           fixture.detectChanges();
-           expect(queryList.length).toBe(1);
-           expect(fixture.componentInstance.queryListNotificationCounter).toBe(1);
-
-           vc.move(viewRef, 0);
-           fixture.detectChanges();
-           expect(queryList.length).toBe(1);
-           expect(fixture.componentInstance.queryListNotificationCounter).toBe(1);
-         });
+        })
+        class TestComponent implements AfterViewInit {
+          queryListNotificationCounter = 0;
+
+          @ViewChild(ViewContainerManipulatorDirective) vc!: ViewContainerManipulatorDirective;
+          @ViewChild('tpl') tpl!: TemplateRef<any>;
+          @ViewChildren('foo') query!: QueryList<any>;
+
+          ngAfterViewInit() {
+            this.query.changes.subscribe(() => this.queryListNotificationCounter++);
+          }
+        }
+
+        TestBed.configureTestingModule({
+          declarations: [ViewContainerManipulatorDirective, TestComponent],
+        });
+        const fixture = TestBed.createComponent(TestComponent);
+        fixture.detectChanges();
+
+        const queryList = fixture.componentInstance.query;
+        const {tpl, vc} = fixture.componentInstance;
+
+        const viewRef = vc.insertTpl(tpl, {}, 0);
+        fixture.detectChanges();
+        expect(queryList.length).toBe(1);
+        expect(fixture.componentInstance.queryListNotificationCounter).toBe(1);
+
+        vc.move(viewRef, 0);
+        fixture.detectChanges();
+        expect(queryList.length).toBe(1);
+        expect(fixture.componentInstance.queryListNotificationCounter).toBe(1);
+      });
 
       it('should support a mix of content queries from the declaration and embedded view', () => {
         @Directive({selector: '[query-for-lots-of-content]'})
@@ -2149,14 +2130,15 @@ describe('query logic', () => {
                 </div>
               </ng-template>
             </div>
-          `
+          `,
         })
         class TestComponent {
           items = [1, 2];
         }
 
-        TestBed.configureTestingModule(
-            {declarations: [TestComponent, QueryForContent, QueryForLotsOfContent]});
+        TestBed.configureTestingModule({
+          declarations: [TestComponent, QueryForContent, QueryForLotsOfContent],
+        });
 
         const fixture = TestBed.createComponent(TestComponent);
         fixture.detectChanges();
@@ -2178,11 +2160,10 @@ describe('query logic', () => {
       });
 
       // https://stackblitz.com/edit/angular-rrmmuf?file=src/app/app.component.ts
-      it('should report results when different instances of TemplateRef are inserted into one ViewContainerRefs',
-         () => {
-           @Component({
-             selector: 'test-comp',
-             template: `
+      it('should report results when different instances of TemplateRef are inserted into one ViewContainerRefs', () => {
+        @Component({
+          selector: 'test-comp',
+          template: `
                <ng-template #tpl1 let-idx="idx">
                  <div #foo [id]="'foo1_' + idx"></div>
                </ng-template>
@@ -2195,70 +2176,70 @@ describe('query logic', () => {
 
                <ng-template vc></ng-template>
              `,
-           })
-           class TestComponent {
-             @ViewChild(ViewContainerManipulatorDirective) vc!: ViewContainerManipulatorDirective;
-             @ViewChild('tpl1') tpl1!: TemplateRef<any>;
-             @ViewChild('tpl2') tpl2!: TemplateRef<any>;
-             @ViewChildren('foo') query!: QueryList<any>;
-           }
-
-           TestBed.configureTestingModule(
-               {declarations: [ViewContainerManipulatorDirective, TestComponent]});
-           const fixture = TestBed.createComponent(TestComponent);
-           fixture.detectChanges();
-
-           const queryList = fixture.componentInstance.query;
-           const {tpl1, tpl2, vc} = fixture.componentInstance;
-
-           expect(queryList.length).toBe(1);
-           expect(queryList.first.nativeElement.getAttribute('id')).toBe('middle');
-
-           vc.insertTpl(tpl1!, {idx: 0}, 0);
-           vc.insertTpl(tpl2!, {idx: 1}, 1);
-           fixture.detectChanges();
-
-           expect(queryList.length).toBe(3);
-           let qListArr = queryList.toArray();
-           expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo1_0');
-           expect(qListArr[1].nativeElement.getAttribute('id')).toBe('middle');
-           expect(qListArr[2].nativeElement.getAttribute('id')).toBe('foo2_1');
-
-           vc.insertTpl(tpl1!, {idx: 1}, 1);
-           fixture.detectChanges();
-
-           expect(queryList.length).toBe(4);
-           qListArr = queryList.toArray();
-           expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo1_0');
-           expect(qListArr[1].nativeElement.getAttribute('id')).toBe('foo1_1');
-           expect(qListArr[2].nativeElement.getAttribute('id')).toBe('middle');
-           expect(qListArr[3].nativeElement.getAttribute('id')).toBe('foo2_1');
-
-           vc.remove(1);
-           fixture.detectChanges();
-
-           expect(queryList.length).toBe(3);
-           qListArr = queryList.toArray();
-           expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo1_0');
-           expect(qListArr[1].nativeElement.getAttribute('id')).toBe('middle');
-           expect(qListArr[2].nativeElement.getAttribute('id')).toBe('foo2_1');
-
-           vc.remove(1);
-           fixture.detectChanges();
-
-           expect(queryList.length).toBe(2);
-           qListArr = queryList.toArray();
-           expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo1_0');
-           expect(qListArr[1].nativeElement.getAttribute('id')).toBe('middle');
-         });
+        })
+        class TestComponent {
+          @ViewChild(ViewContainerManipulatorDirective) vc!: ViewContainerManipulatorDirective;
+          @ViewChild('tpl1') tpl1!: TemplateRef<any>;
+          @ViewChild('tpl2') tpl2!: TemplateRef<any>;
+          @ViewChildren('foo') query!: QueryList<any>;
+        }
+
+        TestBed.configureTestingModule({
+          declarations: [ViewContainerManipulatorDirective, TestComponent],
+        });
+        const fixture = TestBed.createComponent(TestComponent);
+        fixture.detectChanges();
+
+        const queryList = fixture.componentInstance.query;
+        const {tpl1, tpl2, vc} = fixture.componentInstance;
+
+        expect(queryList.length).toBe(1);
+        expect(queryList.first.nativeElement.getAttribute('id')).toBe('middle');
+
+        vc.insertTpl(tpl1!, {idx: 0}, 0);
+        vc.insertTpl(tpl2!, {idx: 1}, 1);
+        fixture.detectChanges();
+
+        expect(queryList.length).toBe(3);
+        let qListArr = queryList.toArray();
+        expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo1_0');
+        expect(qListArr[1].nativeElement.getAttribute('id')).toBe('middle');
+        expect(qListArr[2].nativeElement.getAttribute('id')).toBe('foo2_1');
+
+        vc.insertTpl(tpl1!, {idx: 1}, 1);
+        fixture.detectChanges();
+
+        expect(queryList.length).toBe(4);
+        qListArr = queryList.toArray();
+        expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo1_0');
+        expect(qListArr[1].nativeElement.getAttribute('id')).toBe('foo1_1');
+        expect(qListArr[2].nativeElement.getAttribute('id')).toBe('middle');
+        expect(qListArr[3].nativeElement.getAttribute('id')).toBe('foo2_1');
+
+        vc.remove(1);
+        fixture.detectChanges();
+
+        expect(queryList.length).toBe(3);
+        qListArr = queryList.toArray();
+        expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo1_0');
+        expect(qListArr[1].nativeElement.getAttribute('id')).toBe('middle');
+        expect(qListArr[2].nativeElement.getAttribute('id')).toBe('foo2_1');
+
+        vc.remove(1);
+        fixture.detectChanges();
+
+        expect(queryList.length).toBe(2);
+        qListArr = queryList.toArray();
+        expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo1_0');
+        expect(qListArr[1].nativeElement.getAttribute('id')).toBe('middle');
+      });
 
       // https://stackblitz.com/edit/angular-7vvo9j?file=src%2Fapp%2Fapp.component.ts
       // https://stackblitz.com/edit/angular-xzwp6n
-      it('should report results when the same TemplateRef is inserted into different ViewContainerRefs',
-         () => {
-           @Component({
-             selector: 'test-comp',
-             template: `
+      it('should report results when the same TemplateRef is inserted into different ViewContainerRefs', () => {
+        @Component({
+          selector: 'test-comp',
+          template: `
                <ng-template #tpl let-idx="idx" let-container_idx="container_idx">
                  <div #foo [id]="'foo_' + container_idx + '_' + idx"></div>
                </ng-template>
@@ -2266,44 +2247,45 @@ describe('query logic', () => {
                <ng-template vc #vi0="vc"></ng-template>
                <ng-template vc #vi1="vc"></ng-template>
              `,
-           })
-           class TestComponent {
-             @ViewChild('tpl') tpl!: TemplateRef<any>;
-             @ViewChild('vi0') vi0!: ViewContainerManipulatorDirective;
-             @ViewChild('vi1') vi1!: ViewContainerManipulatorDirective;
-             @ViewChildren('foo') query!: QueryList<any>;
-           }
+        })
+        class TestComponent {
+          @ViewChild('tpl') tpl!: TemplateRef<any>;
+          @ViewChild('vi0') vi0!: ViewContainerManipulatorDirective;
+          @ViewChild('vi1') vi1!: ViewContainerManipulatorDirective;
+          @ViewChildren('foo') query!: QueryList<any>;
+        }
 
-           TestBed.configureTestingModule(
-               {declarations: [ViewContainerManipulatorDirective, TestComponent]});
-           const fixture = TestBed.createComponent(TestComponent);
-           fixture.detectChanges();
+        TestBed.configureTestingModule({
+          declarations: [ViewContainerManipulatorDirective, TestComponent],
+        });
+        const fixture = TestBed.createComponent(TestComponent);
+        fixture.detectChanges();
 
-           const queryList = fixture.componentInstance.query;
-           const {tpl, vi0, vi1} = fixture.componentInstance;
+        const queryList = fixture.componentInstance.query;
+        const {tpl, vi0, vi1} = fixture.componentInstance;
 
-           expect(queryList.length).toBe(0);
+        expect(queryList.length).toBe(0);
 
-           vi0.insertTpl(tpl!, {idx: 0, container_idx: 0}, 0);
-           vi1.insertTpl(tpl!, {idx: 0, container_idx: 1}, 0);
-           fixture.detectChanges();
+        vi0.insertTpl(tpl!, {idx: 0, container_idx: 0}, 0);
+        vi1.insertTpl(tpl!, {idx: 0, container_idx: 1}, 0);
+        fixture.detectChanges();
 
-           expect(queryList.length).toBe(2);
-           let qListArr = queryList.toArray();
-           expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo_0_0');
-           expect(qListArr[1].nativeElement.getAttribute('id')).toBe('foo_1_0');
+        expect(queryList.length).toBe(2);
+        let qListArr = queryList.toArray();
+        expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo_0_0');
+        expect(qListArr[1].nativeElement.getAttribute('id')).toBe('foo_1_0');
 
-           vi0.remove();
-           fixture.detectChanges();
+        vi0.remove();
+        fixture.detectChanges();
 
-           expect(queryList.length).toBe(1);
-           qListArr = queryList.toArray();
-           expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo_1_0');
+        expect(queryList.length).toBe(1);
+        qListArr = queryList.toArray();
+        expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo_1_0');
 
-           vi1.remove();
-           fixture.detectChanges();
-           expect(queryList.length).toBe(0);
-         });
+        vi1.remove();
+        fixture.detectChanges();
+        expect(queryList.length).toBe(0);
+      });
 
       // https://stackblitz.com/edit/angular-wpd6gv?file=src%2Fapp%2Fapp.component.ts
       it('should report results from views inserted in a lifecycle hook', () => {
@@ -2344,17 +2326,14 @@ describe('query logic', () => {
   describe('non-regression', () => {
     it('should query by provider super-type in an embedded view', () => {
       @Directive({selector: '[child]'})
-      class Child {
-      }
+      class Child {}
 
       @Directive({selector: '[parent]', providers: [{provide: Child, useExisting: Parent}]})
-      class Parent extends Child {
-      }
+      class Parent extends Child {}
 
       @Component({
         selector: 'test-cmpt',
-        template:
-            `<ng-template [ngIf]="true"><ng-template [ngIf]="true"><div parent></div></ng-template></ng-template>`
+        template: `<ng-template [ngIf]="true"><ng-template [ngIf]="true"><div parent></div></ng-template></ng-template>`,
       })
       class TestCmpt {
         @ViewChildren(Child) instances!: QueryList<Child>;
@@ -2373,11 +2352,11 @@ describe('query logic', () => {
       @Component({
         selector: 'with-multi-provider',
         template: '',
-        providers:
-            [{provide: MyClass, useExisting: forwardRef(() => WithMultiProvider), multi: true}]
+        providers: [
+          {provide: MyClass, useExisting: forwardRef(() => WithMultiProvider), multi: true},
+        ],
       })
-      class WithMultiProvider {
-      }
+      class WithMultiProvider {}
 
       @Component({selector: 'test-cmpt', template: `<with-multi-provider></with-multi-provider>`})
       class TestCmpt {
@@ -2398,18 +2377,18 @@ describe('query logic', () => {
       @Component({
         selector: 'with-multi-provider',
         template: '',
-        providers:
-            [{provide: MyClass, useExisting: forwardRef(() => WithMultiProvider), multi: true}]
+        providers: [
+          {provide: MyClass, useExisting: forwardRef(() => WithMultiProvider), multi: true},
+        ],
       })
-      class WithMultiProvider {
-      }
+      class WithMultiProvider {}
 
       @Component({
         selector: 'test-cmpt',
         template: `
           <ng-template [ngIf]="true"><with-multi-provider></with-multi-provider></ng-template>
           <with-multi-provider></with-multi-provider>
-        `
+        `,
       })
       class TestCmpt {
         @ViewChildren(MyClass) queryResults!: QueryList<WithMultiProvider>;
@@ -2426,13 +2405,13 @@ describe('query logic', () => {
 
     it('should allow undefined provider value in a [View/Content]Child queries', () => {
       @Directive({selector: '[group]'})
-      class GroupDir {
-      }
+      class GroupDir {}
 
-      @Directive(
-          {selector: '[undefinedGroup]', providers: [{provide: GroupDir, useValue: undefined}]})
-      class UndefinedGroup {
-      }
+      @Directive({
+        selector: '[undefinedGroup]',
+        providers: [{provide: GroupDir, useValue: undefined}],
+      })
+      class UndefinedGroup {}
 
       @Component({
         template: `
@@ -2440,14 +2419,16 @@ describe('query logic', () => {
           <ng-template [ngIf]="true">
             <div undefinedGroup></div>
           </ng-template>
-        `
+        `,
       })
       class App {
         @ViewChild(GroupDir) group!: GroupDir;
       }
 
-      TestBed.configureTestingModule(
-          {declarations: [App, GroupDir, UndefinedGroup], imports: [CommonModule]});
+      TestBed.configureTestingModule({
+        declarations: [App, GroupDir, UndefinedGroup],
+        imports: [CommonModule],
+      });
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
@@ -2456,17 +2437,16 @@ describe('query logic', () => {
 
     it('should allow null / undefined provider value in a [View/Content]Children queries', () => {
       @Directive({selector: '[group]'})
-      class GroupDir {
-      }
+      class GroupDir {}
 
       @Directive({selector: '[nullGroup]', providers: [{provide: GroupDir, useValue: null}]})
-      class NullGroup {
-      }
+      class NullGroup {}
 
-      @Directive(
-          {selector: '[undefinedGroup]', providers: [{provide: GroupDir, useValue: undefined}]})
-      class UndefinedGroup {
-      }
+      @Directive({
+        selector: '[undefinedGroup]',
+        providers: [{provide: GroupDir, useValue: undefined}],
+      })
+      class UndefinedGroup {}
 
       @Component({
         template: `
@@ -2477,14 +2457,16 @@ describe('query logic', () => {
           <ng-template [ngIf]="true">
             <div undefinedGroup></div>
           </ng-template>
-        `
+        `,
       })
       class App {
         @ViewChildren(GroupDir) groups!: QueryList<GroupDir>;
       }
 
-      TestBed.configureTestingModule(
-          {declarations: [App, GroupDir, NullGroup, UndefinedGroup], imports: [CommonModule]});
+      TestBed.configureTestingModule({
+        declarations: [App, GroupDir, NullGroup, UndefinedGroup],
+        imports: [CommonModule],
+      });
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
 
@@ -2503,8 +2485,7 @@ describe('query logic', () => {
       selector: '[text-token]',
       providers: [{provide: 'Token', useExisting: TextTokenDirective}],
     })
-    class TextTokenDirective {
-    }
+    class TextTokenDirective {}
 
     it('should match string injection token in a ViewChild query', () => {
       @Component({template: '<div text-token></div>'})
@@ -2518,18 +2499,17 @@ describe('query logic', () => {
       expect(fixture.componentInstance.token).toBeInstanceOf(TextTokenDirective);
     });
 
-    it('should give precedence to local reference if both a reference and a string injection token provider match a ViewChild query',
-       () => {
-         @Component({template: '<div text-token #Token></div>'})
-         class App {
-           @ViewChild('Token') token: any;
-         }
+    it('should give precedence to local reference if both a reference and a string injection token provider match a ViewChild query', () => {
+      @Component({template: '<div text-token #Token></div>'})
+      class App {
+        @ViewChild('Token') token: any;
+      }
 
-         TestBed.configureTestingModule({declarations: [App, TextTokenDirective]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
-         expect(fixture.componentInstance.token).toBeInstanceOf(ElementRef);
-       });
+      TestBed.configureTestingModule({declarations: [App, TextTokenDirective]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.token).toBeInstanceOf(ElementRef);
+    });
 
     it('should match string injection token in a ViewChildren query', () => {
       @Component({template: '<div text-token></div>'})
@@ -2546,21 +2526,21 @@ describe('query logic', () => {
       expect(tokens.first).toBeInstanceOf(TextTokenDirective);
     });
 
-    it('should match both string injection token and local reference inside a ViewChildren query',
-       () => {
-         @Component({template: '<div text-token #Token></div>'})
-         class App {
-           @ViewChildren('Token') tokens!: QueryList<any>;
-         }
+    it('should match both string injection token and local reference inside a ViewChildren query', () => {
+      @Component({template: '<div text-token #Token></div>'})
+      class App {
+        @ViewChildren('Token') tokens!: QueryList<any>;
+      }
 
-         TestBed.configureTestingModule({declarations: [App, TextTokenDirective]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
+      TestBed.configureTestingModule({declarations: [App, TextTokenDirective]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
 
-         expect(fixture.componentInstance.tokens.toArray()).toEqual([
-           jasmine.any(ElementRef), jasmine.any(TextTokenDirective)
-         ]);
-       });
+      expect(fixture.componentInstance.tokens.toArray()).toEqual([
+        jasmine.any(ElementRef),
+        jasmine.any(TextTokenDirective),
+      ]);
+    });
 
     it('should match string injection token in a ContentChild query', () => {
       @Component({selector: 'has-query', template: '<ng-content></ng-content>'})
@@ -2580,24 +2560,23 @@ describe('query logic', () => {
       expect(fixture.componentInstance.queryComp.token).toBeInstanceOf(TextTokenDirective);
     });
 
-    it('should give precedence to local reference if both a reference and a string injection token provider match a ContentChild query',
-       () => {
-         @Component({selector: 'has-query', template: '<ng-content></ng-content>'})
-         class HasQuery {
-           @ContentChild('Token') token: any;
-         }
+    it('should give precedence to local reference if both a reference and a string injection token provider match a ContentChild query', () => {
+      @Component({selector: 'has-query', template: '<ng-content></ng-content>'})
+      class HasQuery {
+        @ContentChild('Token') token: any;
+      }
 
-         @Component({template: '<has-query><div text-token #Token></div></has-query>'})
-         class App {
-           @ViewChild(HasQuery) queryComp!: HasQuery;
-         }
+      @Component({template: '<has-query><div text-token #Token></div></has-query>'})
+      class App {
+        @ViewChild(HasQuery) queryComp!: HasQuery;
+      }
 
-         TestBed.configureTestingModule({declarations: [App, HasQuery, TextTokenDirective]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
+      TestBed.configureTestingModule({declarations: [App, HasQuery, TextTokenDirective]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
 
-         expect(fixture.componentInstance.queryComp.token).toBeInstanceOf(ElementRef);
-       });
+      expect(fixture.componentInstance.queryComp.token).toBeInstanceOf(ElementRef);
+    });
 
     it('should match string injection token in a ContentChildren query', () => {
       @Component({selector: 'has-query', template: '<ng-content></ng-content>'})
@@ -2619,26 +2598,26 @@ describe('query logic', () => {
       expect(tokens.first).toBeInstanceOf(TextTokenDirective);
     });
 
-    it('should match both string injection token and local reference inside a ContentChildren query',
-       () => {
-         @Component({selector: 'has-query', template: '<ng-content></ng-content>'})
-         class HasQuery {
-           @ContentChildren('Token') tokens!: QueryList<any>;
-         }
+    it('should match both string injection token and local reference inside a ContentChildren query', () => {
+      @Component({selector: 'has-query', template: '<ng-content></ng-content>'})
+      class HasQuery {
+        @ContentChildren('Token') tokens!: QueryList<any>;
+      }
 
-         @Component({template: '<has-query><div text-token #Token></div></has-query>'})
-         class App {
-           @ViewChild(HasQuery) queryComp!: HasQuery;
-         }
+      @Component({template: '<has-query><div text-token #Token></div></has-query>'})
+      class App {
+        @ViewChild(HasQuery) queryComp!: HasQuery;
+      }
 
-         TestBed.configureTestingModule({declarations: [App, HasQuery, TextTokenDirective]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
+      TestBed.configureTestingModule({declarations: [App, HasQuery, TextTokenDirective]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
 
-         expect(fixture.componentInstance.queryComp.tokens.toArray()).toEqual([
-           jasmine.any(ElementRef), jasmine.any(TextTokenDirective)
-         ]);
-       });
+      expect(fixture.componentInstance.queryComp.tokens.toArray()).toEqual([
+        jasmine.any(ElementRef),
+        jasmine.any(TextTokenDirective),
+      ]);
+    });
 
     it('should match string token specified through the `read` option of a view query', () => {
       @Component({template: '<div text-token #Token></div>'})
@@ -2689,16 +2668,13 @@ class QueryComp {
 }
 
 @Component({selector: 'app-comp', template: ``})
-class AppComp {
-}
+class AppComp {}
 
 @Component({selector: 'simple-comp-a', template: ''})
-class SimpleCompA {
-}
+class SimpleCompA {}
 
 @Component({selector: 'simple-comp-b', template: ''})
-class SimpleCompB {
-}
+class SimpleCompB {}
 
 @Directive({selector: '[text]'})
 class TextDirective {
@@ -2710,7 +2686,7 @@ class TextDirective {
   template: `
     <div [text]="text"></div>
     <span #foo></span>
-  `
+  `,
 })
 class StaticViewQueryComp {
   private _textDir!: TextDirective;
@@ -2748,7 +2724,7 @@ class StaticViewQueryComp {
 
     <div #bar></div>
     <span #baz></span>
-  `
+  `,
 })
 class SubclassStaticViewQueryComp extends StaticViewQueryComp {
   @ViewChild('bar', {static: true}) bar!: ElementRef;
@@ -2756,7 +2732,6 @@ class SubclassStaticViewQueryComp extends StaticViewQueryComp {
   @ViewChild('baz') baz!: ElementRef;
 }
 
-
 @Component({selector: 'static-content-query-comp', template: `<ng-content></ng-content>`})
 class StaticContentQueryComp {
   private _textDir!: TextDirective;
@@ -2822,7 +2797,7 @@ class SubclassStaticContentQueryComp extends StaticContentQueryComp {
   selector: 'query-with-changes',
   template: `
     <div *ngIf="showing" #foo></div>
-  `
+  `,
 })
 export class QueryCompWithChanges {
   @ViewChildren('foo') foos!: QueryList<any>;
@@ -2840,7 +2815,7 @@ export class QueryCompWithChanges {
         <div *ngIf="innerShowing" #foo></div>
       </div>
     </query-component>
-  `
+  `,
 })
 export class QueryCompWithNoChanges {
   showing: boolean = true;
@@ -2862,8 +2837,7 @@ export class QueryCompWithStrictChangeEmitParent {
 }
 
 @Component({selector: 'query-target', template: '<ng-content></ng-content>'})
-class SuperDirectiveQueryTarget {
-}
+class SuperDirectiveQueryTarget {}
 
 @Directive({selector: '[super-directive]'})
 class SuperDirective {
@@ -2874,10 +2848,9 @@ class SuperDirective {
   template: `
     <query-target>One</query-target>
     <query-target>Two</query-target>
-  `
+  `,
 })
-class SubComponent extends SuperDirective {
-}
+class SubComponent extends SuperDirective {}
 
 const MY_OPTION_TOKEN = new InjectionToken<TestComponentWithToken>('ComponentWithToken');
 
@@ -2886,8 +2859,7 @@ const MY_OPTION_TOKEN = new InjectionToken<TestComponentWithToken>('ComponentWit
   template: 'Option',
   providers: [{provide: MY_OPTION_TOKEN, useExisting: TestComponentWithToken}],
 })
-class TestComponentWithToken {
-}
+class TestComponentWithToken {}
 
 @Component({
   selector: 'test-injection-token',
@@ -2895,7 +2867,7 @@ class TestComponentWithToken {
     <my-option></my-option>
     <my-option></my-option>
     <ng-content></ng-content>
-  `
+  `,
 })
 class TestInjectionTokenQueries {
   @ViewChild(MY_OPTION_TOKEN) viewFirstOption!: TestComponentWithToken;
@@ -2910,7 +2882,6 @@ class TestInjectionTokenQueries {
       <my-option></my-option>
       <my-option></my-option>
     </test-injection-token>
-  `
+  `,
 })
-class TestInjectionTokenContentQueries {
-}
+class TestInjectionTokenContentQueries {}
diff --git a/packages/core/test/acceptance/renderer_factory_spec.ts b/packages/core/test/acceptance/renderer_factory_spec.ts
index fdb7a09c45d5e..f8e288426972c 100644
--- a/packages/core/test/acceptance/renderer_factory_spec.ts
+++ b/packages/core/test/acceptance/renderer_factory_spec.ts
@@ -7,11 +7,24 @@
  */
 
 import {AnimationEvent} from '@angular/animations';
-import {ɵAnimationEngine, ɵAnimationRendererFactory, ɵNoopAnimationStyleNormalizer} from '@angular/animations/browser';
+import {
+  ɵAnimationEngine,
+  ɵAnimationRendererFactory,
+  ɵNoopAnimationStyleNormalizer,
+} from '@angular/animations/browser';
 import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing';
 import {CommonModule, DOCUMENT} from '@angular/common';
 import {PLATFORM_BROWSER_ID, PLATFORM_SERVER_ID} from '@angular/common/src/platform_id';
-import {Component, DoCheck, NgZone, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, ViewEncapsulation} from '@angular/core';
+import {
+  Component,
+  DoCheck,
+  NgZone,
+  Renderer2,
+  RendererFactory2,
+  RendererStyleFlags2,
+  RendererType2,
+  ViewEncapsulation,
+} from '@angular/core';
 import {RElement} from '@angular/core/src/render3/interfaces/renderer_dom';
 import {ngDevModeResetPerfCounters} from '@angular/core/src/util/ng_dev_mode';
 import {NoopNgZone} from '@angular/core/src/zone/ng_zone';
@@ -22,7 +35,7 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
 
 describe('renderer factory lifecycle', () => {
   let logs: string[] = [];
-  let lastCapturedType: RendererType2|null = null;
+  let lastCapturedType: RendererType2 | null = null;
 
   @Component({selector: 'some-component', template: `foo`})
   class SomeComponent implements DoCheck {
@@ -56,7 +69,7 @@ describe('renderer factory lifecycle', () => {
     let rendererFactory = getRendererFactory2(document);
     const createRender = rendererFactory.createRenderer;
 
-    rendererFactory.createRenderer = (hostElement: any, type: RendererType2|null) => {
+    rendererFactory.createRenderer = (hostElement: any, type: RendererType2 | null) => {
       logs.push('create');
       lastCapturedType = type;
       return createRender.apply(rendererFactory, [hostElement, type]);
@@ -73,19 +86,27 @@ describe('renderer factory lifecycle', () => {
 
     TestBed.configureTestingModule({
       declarations: [SomeComponent, SomeComponentWhichThrows, TestComponent],
-      providers: [{
-        provide: RendererFactory2,
-        useFactory: (document: any) => createPatchedRendererFactory(document),
-        deps: [DOCUMENT]
-      }]
+      providers: [
+        {
+          provide: RendererFactory2,
+          useFactory: (document: any) => createPatchedRendererFactory(document),
+          deps: [DOCUMENT],
+        },
+      ],
     });
   });
 
   it('should work with a component', () => {
     const fixture = TestBed.createComponent(SomeComponent);
     fixture.detectChanges();
-    expect(logs).toEqual(
-        ['create', 'create', 'begin', 'some_component create', 'some_component update', 'end']);
+    expect(logs).toEqual([
+      'create',
+      'create',
+      'begin',
+      'some_component create',
+      'some_component update',
+      'end',
+    ]);
     logs = [];
     fixture.detectChanges();
     expect(logs).toEqual(['begin', 'some_component update', 'end']);
@@ -106,8 +127,7 @@ describe('renderer factory lifecycle', () => {
       template: '...',
       encapsulation: ViewEncapsulation.ShadowDom,
     })
-    class StyledComp {
-    }
+    class StyledComp {}
 
     TestBed.createComponent(StyledComp);
 
@@ -123,13 +143,9 @@ describe('renderer factory lifecycle', () => {
       @Component({
         standalone: true,
         template: '',
-        animations: [
-          animA,
-          animB,
-        ],
+        animations: [animA, animB],
       })
-      class AnimComp {
-      }
+      class AnimComp {}
 
       TestBed.createComponent(AnimComp);
 
@@ -146,8 +162,7 @@ describe('renderer factory lifecycle', () => {
         template: '...',
         animations: [],
       })
-      class AnimComp {
-      }
+      class AnimComp {}
 
       TestBed.createComponent(AnimComp);
 
@@ -161,17 +176,18 @@ describe('renderer factory lifecycle', () => {
         template: '<div @fooAnimation></div>',
         animations: [],
       })
-      class AnimComp {
-      }
+      class AnimComp {}
 
       const rendererFactory = new MockRendererFactory(['setProperty']);
 
       TestBed.configureTestingModule({
-        providers: [{
-          provide: RendererFactory2,
-          useValue: rendererFactory,
-          deps: [DOCUMENT],
-        }]
+        providers: [
+          {
+            provide: RendererFactory2,
+            useValue: rendererFactory,
+            deps: [DOCUMENT],
+          },
+        ],
       });
 
       const fixture = TestBed.createComponent(AnimComp);
@@ -201,11 +217,13 @@ describe('renderer factory lifecycle', () => {
 
     const rendererFactory = new MockRendererFactory(['destroy', 'createElement']);
     TestBed.configureTestingModule({
-      providers: [{
-        provide: RendererFactory2,
-        useValue: rendererFactory,
-        deps: [DOCUMENT],
-      }]
+      providers: [
+        {
+          provide: RendererFactory2,
+          useValue: rendererFactory,
+          deps: [DOCUMENT],
+        },
+      ],
     });
 
     const fixture = TestBed.createComponent(Comp);
@@ -233,7 +251,7 @@ describe('renderer factory lifecycle', () => {
 
 describe('animation renderer factory', () => {
   let eventLogs: string[] = [];
-  let rendererFactory: RendererFactory2|null = null;
+  let rendererFactory: RendererFactory2 | null = null;
 
   function getAnimationLog(): MockAnimationPlayer[] {
     return MockAnimationDriver.log as MockAnimationPlayer[];
@@ -246,11 +264,13 @@ describe('animation renderer factory', () => {
 
     TestBed.configureTestingModule({
       declarations: [SomeComponentWithAnimation, SomeComponent],
-      providers: [{
-        provide: RendererFactory2,
-        useFactory: (d: Document) => rendererFactory = getAnimationRendererFactory2(d),
-        deps: [DOCUMENT]
-      }]
+      providers: [
+        {
+          provide: RendererFactory2,
+          useFactory: (d: Document) => (rendererFactory = getAnimationRendererFactory2(d)),
+          deps: [DOCUMENT],
+        },
+      ],
     });
   });
 
@@ -263,20 +283,26 @@ describe('animation renderer factory', () => {
         foo
       </div>
     `,
-    animations: [{
-      type: 7,
-      name: 'myAnimation',
-      definitions: [{
-        type: 1,
-        expr: '* => on',
-        animation: [{type: 4, styles: {type: 6, styles: {opacity: 1}, offset: null}, timings: 10}],
-        options: null
-      }],
-      options: {}
-    }]
+    animations: [
+      {
+        type: 7,
+        name: 'myAnimation',
+        definitions: [
+          {
+            type: 1,
+            expr: '* => on',
+            animation: [
+              {type: 4, styles: {type: 6, styles: {opacity: 1}, offset: null}, timings: 10},
+            ],
+            options: null,
+          },
+        ],
+        options: {},
+      },
+    ],
   })
   class SomeComponentWithAnimation {
-    exp: string|undefined;
+    exp: string | undefined;
 
     callback(event: AnimationEvent) {
       eventLogs.push(`${event.fromState ? event.fromState : event.toState} - ${event.phaseName}`);
@@ -284,8 +310,7 @@ describe('animation renderer factory', () => {
   }
 
   @Component({selector: 'some-component', template: 'foo'})
-  class SomeComponent {
-  }
+  class SomeComponent {}
 
   it('should work with components without animations', () => {
     const fixture = TestBed.createComponent(SomeComponent);
@@ -293,29 +318,37 @@ describe('animation renderer factory', () => {
     expect(fixture.nativeElement.innerHTML).toEqual('foo');
   });
 
-  isBrowser && it('should work with animated components', (done) => {
-    const fixture = TestBed.createComponent(SomeComponentWithAnimation);
-    fixture.detectChanges();
-
-    expect(rendererFactory).toBeTruthy();
-    expect(fixture.nativeElement.innerHTML)
-        .toMatch(/<div class="ng-tns-c\d+-0 ng-trigger ng-trigger-myAnimation">\s+foo\s+<\/div>/);
+  isBrowser &&
+    it('should work with animated components', (done) => {
+      const fixture = TestBed.createComponent(SomeComponentWithAnimation);
+      fixture.detectChanges();
 
-    fixture.componentInstance.exp = 'on';
-    fixture.detectChanges();
+      expect(rendererFactory).toBeTruthy();
+      expect(fixture.nativeElement.innerHTML).toMatch(
+        /<div class="ng-tns-c\d+-0 ng-trigger ng-trigger-myAnimation">\s+foo\s+<\/div>/,
+      );
 
-    const [player] = getAnimationLog();
-    expect(player.keyframes).toEqual([
-      new Map<string, string|number>([['opacity', '*'], ['offset', 0]]),
-      new Map<string, string|number>([['opacity', 1], ['offset', 1]]),
-    ]);
-    player.finish();
+      fixture.componentInstance.exp = 'on';
+      fixture.detectChanges();
 
-    rendererFactory!.whenRenderingDone!().then(() => {
-      expect(eventLogs).toEqual(['void - start', 'void - done', 'on - start', 'on - done']);
-      done();
+      const [player] = getAnimationLog();
+      expect(player.keyframes).toEqual([
+        new Map<string, string | number>([
+          ['opacity', '*'],
+          ['offset', 0],
+        ]),
+        new Map<string, string | number>([
+          ['opacity', 1],
+          ['offset', 1],
+        ]),
+      ]);
+      player.finish();
+
+      rendererFactory!.whenRenderingDone!().then(() => {
+        expect(eventLogs).toEqual(['void - start', 'void - done', 'on - start', 'on - done']);
+        done();
+      });
     });
-  });
 });
 
 function getRendererFactory2(document: Document): RendererFactory2 {
@@ -323,10 +356,16 @@ function getRendererFactory2(document: Document): RendererFactory2 {
   const eventManager = new EventManager([], fakeNgZone);
   const appId = 'app-id';
   const rendererFactory = new DomRendererFactory2(
-      eventManager, new ɵSharedStylesHost(document, appId), appId, true, document,
-      isNode ? PLATFORM_SERVER_ID : PLATFORM_BROWSER_ID, fakeNgZone);
+    eventManager,
+    new ɵSharedStylesHost(document, appId),
+    appId,
+    true,
+    document,
+    isNode ? PLATFORM_SERVER_ID : PLATFORM_BROWSER_ID,
+    fakeNgZone,
+  );
   const origCreateRenderer = rendererFactory.createRenderer;
-  rendererFactory.createRenderer = function(element: any, type: RendererType2|null) {
+  rendererFactory.createRenderer = function (element: any, type: RendererType2 | null) {
     const renderer = origCreateRenderer.call(this, element, type);
     renderer.destroyNode = () => {};
     return renderer;
@@ -337,10 +376,15 @@ function getRendererFactory2(document: Document): RendererFactory2 {
 function getAnimationRendererFactory2(document: Document): RendererFactory2 {
   const fakeNgZone: NgZone = new NoopNgZone();
   return new ɵAnimationRendererFactory(
-      getRendererFactory2(document),
-      new ɵAnimationEngine(
-          document, new MockAnimationDriver(), new ɵNoopAnimationStyleNormalizer(), null),
-      fakeNgZone);
+    getRendererFactory2(document),
+    new ɵAnimationEngine(
+      document,
+      new MockAnimationDriver(),
+      new ɵNoopAnimationStyleNormalizer(),
+      null,
+    ),
+    fakeNgZone,
+  );
 }
 
 describe('custom renderer', () => {
@@ -348,8 +392,7 @@ describe('custom renderer', () => {
     selector: 'some-component',
     template: `<div><span></span></div>`,
   })
-  class SomeComponent {
-  }
+  class SomeComponent {}
 
   /**
    * Creates a patched renderer factory that creates elements with a shape different than DOM node
@@ -357,7 +400,7 @@ describe('custom renderer', () => {
   function createPatchedRendererFactory(document: Document) {
     let rendererFactory = getRendererFactory2(document);
     const origCreateRenderer = rendererFactory.createRenderer;
-    rendererFactory.createRenderer = function(element: any, type: RendererType2|null) {
+    rendererFactory.createRenderer = function (element: any, type: RendererType2 | null) {
       const renderer = origCreateRenderer.call(this, element, type);
       renderer.appendChild = () => {};
       renderer.createElement = (name: string) => ({
@@ -373,11 +416,13 @@ describe('custom renderer', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [SomeComponent],
-      providers: [{
-        provide: RendererFactory2,
-        useFactory: (document: Document) => createPatchedRendererFactory(document),
-        deps: [DOCUMENT]
-      }]
+      providers: [
+        {
+          provide: RendererFactory2,
+          useFactory: (document: Document) => createPatchedRendererFactory(document),
+          deps: [DOCUMENT],
+        },
+      ],
     });
   });
 
@@ -406,8 +451,7 @@ describe('Renderer2 destruction hooks', () => {
     selector: 'basic-comp',
     template: 'comp(<ng-content></ng-content>)',
   })
-  class BasicComponent {
-  }
+  class BasicComponent {}
 
   @Component({
     selector: 'some-component',
@@ -428,11 +472,13 @@ describe('Renderer2 destruction hooks', () => {
 
     TestBed.configureTestingModule({
       declarations: [SimpleApp, AppWithComponents, BasicComponent],
-      providers: [{
-        provide: RendererFactory2,
-        useFactory: (document: Document) => getRendererFactory2(document),
-        deps: [DOCUMENT]
-      }]
+      providers: [
+        {
+          provide: RendererFactory2,
+          useFactory: (document: Document) => getRendererFactory2(document),
+          deps: [DOCUMENT],
+        },
+      ],
     });
   });
 
@@ -473,8 +519,8 @@ export class MockRendererFactory implements RendererFactory2 {
     this._spyOnMethods = spyOnMethods || [];
   }
 
-  createRenderer(hostElement: RElement|null, rendererType: RendererType2|null): Renderer2 {
-    const renderer = this.lastRenderer = new MockRenderer(this._spyOnMethods);
+  createRenderer(hostElement: RElement | null, rendererType: RendererType2 | null): Renderer2 {
+    const renderer = (this.lastRenderer = new MockRenderer(this._spyOnMethods));
     return renderer;
   }
 }
@@ -483,10 +529,10 @@ class MockRenderer implements Renderer2 {
   public spies: {[methodName: string]: any} = {};
   data = {};
 
-  destroyNode: ((node: any) => void)|null = null;
+  destroyNode: ((node: any) => void) | null = null;
 
   constructor(spyOnMethods: string[]) {
-    spyOnMethods.forEach(methodName => {
+    spyOnMethods.forEach((methodName) => {
       this.spies[methodName] = spyOn(this as any, methodName).and.callThrough();
     });
   }
@@ -495,7 +541,7 @@ class MockRenderer implements Renderer2 {
   createComment(value: string): Comment {
     return document.createComment(value);
   }
-  createElement(name: string, namespace?: string|null): Element {
+  createElement(name: string, namespace?: string | null): Element {
     return namespace ? document.createElementNS(namespace, name) : document.createElement(name);
   }
   createText(value: string): Text {
@@ -504,23 +550,24 @@ class MockRenderer implements Renderer2 {
   appendChild(parent: RElement, newChild: Node): void {
     parent.appendChild(newChild);
   }
-  insertBefore(parent: Node, newChild: Node, refChild: Node|null): void {
+  insertBefore(parent: Node, newChild: Node, refChild: Node | null): void {
     parent.insertBefore(newChild, refChild);
   }
   removeChild(parent: RElement, oldChild: Node): void {
     parent.removeChild(oldChild);
   }
-  selectRootElement(selectorOrNode: string|any): RElement {
-    return typeof selectorOrNode === 'string' ? document.querySelector(selectorOrNode) :
-                                                selectorOrNode;
+  selectRootElement(selectorOrNode: string | any): RElement {
+    return typeof selectorOrNode === 'string'
+      ? document.querySelector(selectorOrNode)
+      : selectorOrNode;
   }
-  parentNode(node: Node): Element|null {
+  parentNode(node: Node): Element | null {
     return node.parentNode as Element;
   }
-  nextSibling(node: Node): Node|null {
+  nextSibling(node: Node): Node | null {
     return node.nextSibling;
   }
-  setAttribute(el: RElement, name: string, value: string, namespace?: string|null): void {
+  setAttribute(el: RElement, name: string, value: string, namespace?: string | null): void {
     // set all synthetic attributes as properties
     if (name[0] === '@') {
       this.setProperty(el, name, value);
@@ -528,7 +575,7 @@ class MockRenderer implements Renderer2 {
       el.setAttribute(name, value);
     }
   }
-  removeAttribute(el: RElement, name: string, namespace?: string|null): void {}
+  removeAttribute(el: RElement, name: string, namespace?: string | null): void {}
   addClass(el: RElement, name: string): void {}
   removeClass(el: RElement, name: string): void {}
   setStyle(el: RElement, style: string, value: any, flags?: RendererStyleFlags2): void {}
diff --git a/packages/core/test/acceptance/router_integration_spec.ts b/packages/core/test/acceptance/router_integration_spec.ts
index 059bc20607eef..2d68f55afaade 100644
--- a/packages/core/test/acceptance/router_integration_spec.ts
+++ b/packages/core/test/acceptance/router_integration_spec.ts
@@ -23,8 +23,7 @@ describe('router integration acceptance', () => {
         ]),
       ],
     })
-    class Level1AModule {
-    }
+    class Level1AModule {}
 
     @NgModule({
       imports: [
@@ -34,8 +33,7 @@ describe('router integration acceptance', () => {
         ]),
       ],
     })
-    class Level1BModule {
-    }
+    class Level1BModule {}
 
     @NgModule({
       imports: [
@@ -43,17 +41,14 @@ describe('router integration acceptance', () => {
         Level1AModule,
         Level1BModule,
       ],
-      providers: [
-        {provide: APP_BASE_HREF, useValue: '/'},
-      ]
+      providers: [{provide: APP_BASE_HREF, useValue: '/'}],
     })
-    class RootModule {
-    }
+    class RootModule {}
 
     TestBed.configureTestingModule({
       imports: [RootModule],
     });
-    expect((TestBed.inject(Router)).config.map(r => r.path)).toEqual([
+    expect(TestBed.inject(Router).config.map((r) => r.path)).toEqual([
       '1a:1',
       '1a:2',
       '1b:1',
diff --git a/packages/core/test/acceptance/security_spec.ts b/packages/core/test/acceptance/security_spec.ts
index f529eacddb826..1c508296301e0 100644
--- a/packages/core/test/acceptance/security_spec.ts
+++ b/packages/core/test/acceptance/security_spec.ts
@@ -7,7 +7,15 @@
  */
 
 import {NgIf} from '@angular/common';
-import {Component, Directive, inject, TemplateRef, Type, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  Component,
+  Directive,
+  inject,
+  TemplateRef,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {RuntimeErrorCode} from '@angular/core/src/errors';
 import {global} from '@angular/core/src/util/global';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
@@ -15,33 +23,36 @@ import {DomSanitizer} from '@angular/platform-browser';
 
 describe('comment node text escaping', () => {
   // see: https://html.spec.whatwg.org/multipage/syntax.html#comments
-  ['>',         // self closing
-   '-->',       // standard closing
-   '--!>',      // alternate closing
-   '<!-- -->',  // embedded comment.
+  [
+    '>', // self closing
+    '-->', // standard closing
+    '--!>', // alternate closing
+    '<!-- -->', // embedded comment.
   ].forEach((xssValue) => {
-    it('should not be possible to do XSS through comment reflect data when writing: ' + xssValue,
-       () => {
-         @Component({template: `<div><span *ngIf="xssValue"></span><div>`})
-         class XSSComp {
-           // ngIf serializes the `xssValue` into a comment for debugging purposes.
-           xssValue: string = xssValue + '<script>"evil"</script>';
-         }
-
-         TestBed.configureTestingModule({declarations: [XSSComp]});
-         const fixture = TestBed.createComponent(XSSComp);
-         fixture.detectChanges();
-         const div = fixture.nativeElement.querySelector('div') as HTMLElement;
-         // Serialize into a string to mimic SSR serialization.
-         const html = div.innerHTML;
-         // This must be escaped or we have XSS.
-         expect(html).not.toContain('--><script');
-         // Now parse it back into DOM (from string)
-         div.innerHTML = html;
-         // Verify that we did not accidentally deserialize the `<script>`
-         const script = div.querySelector('script');
-         expect(script).toBeFalsy();
-       });
+    it(
+      'should not be possible to do XSS through comment reflect data when writing: ' + xssValue,
+      () => {
+        @Component({template: `<div><span *ngIf="xssValue"></span><div>`})
+        class XSSComp {
+          // ngIf serializes the `xssValue` into a comment for debugging purposes.
+          xssValue: string = xssValue + '<script>"evil"</script>';
+        }
+
+        TestBed.configureTestingModule({declarations: [XSSComp]});
+        const fixture = TestBed.createComponent(XSSComp);
+        fixture.detectChanges();
+        const div = fixture.nativeElement.querySelector('div') as HTMLElement;
+        // Serialize into a string to mimic SSR serialization.
+        const html = div.innerHTML;
+        // This must be escaped or we have XSS.
+        expect(html).not.toContain('--><script');
+        // Now parse it back into DOM (from string)
+        div.innerHTML = html;
+        // Verify that we did not accidentally deserialize the `<script>`
+        const script = div.querySelector('script');
+        expect(script).toBeFalsy();
+      },
+    );
   });
 });
 
@@ -58,7 +69,7 @@ describe('iframe processing', () => {
   }
 
   function expectIframeCreationToFail<T>(component: Type<T>): ComponentFixture<T> {
-    let fixture: ComponentFixture<T>|undefined;
+    let fixture: ComponentFixture<T> | undefined;
     expect(() => {
       fixture = TestBed.createComponent(component);
       fixture.detectChanges();
@@ -69,7 +80,9 @@ describe('iframe processing', () => {
   }
 
   function expectIframeToBeCreated<T>(
-      component: Type<T>, attrsToCheck: {[key: string]: string}): ComponentFixture<T> {
+    component: Type<T>,
+    attrsToCheck: {[key: string]: string},
+  ): ComponentFixture<T> {
     let fixture: ComponentFixture<T>;
     expect(() => {
       fixture = TestBed.createComponent(component);
@@ -86,8 +99,14 @@ describe('iframe processing', () => {
 
   // *Must* be in sync with the `SECURITY_SENSITIVE_ATTRS` list
   // from the `packages/compiler/src/schema/dom_security_schema.ts`.
-  const SECURITY_SENSITIVE_ATTRS =
-      ['sandbox', 'allow', 'allowFullscreen', 'referrerPolicy', 'csp', 'fetchPriority'];
+  const SECURITY_SENSITIVE_ATTRS = [
+    'sandbox',
+    'allow',
+    'allowFullscreen',
+    'referrerPolicy',
+    'csp',
+    'fetchPriority',
+  ];
 
   const TEST_IFRAME_URL = 'https://angular.io/assets/images/logos/angular/angular.png';
 
@@ -101,7 +120,7 @@ describe('iframe processing', () => {
     global['ngDevMode'] = oldNgDevMode;
   });
 
-  [true, false].forEach(devModeFlag => {
+  [true, false].forEach((devModeFlag) => {
     beforeAll(() => {
       global['ngDevMode'] = devModeFlag;
 
@@ -113,131 +132,136 @@ describe('iframe processing', () => {
     describe(`with ngDevMode = ${devModeFlag}`, () => {
       SECURITY_SENSITIVE_ATTRS.forEach((securityAttr: string) => {
         ['src', 'srcdoc'].forEach((srcAttr: string) => {
-          it(`should work when a security-sensitive attribute is set ` +
-                 `as a static attribute (checking \`${securityAttr}\`)`,
-             () => {
-               @Component({
-                 standalone: true,
-                 selector: 'my-comp',
-                 template: `
+          it(
+            `should work when a security-sensitive attribute is set ` +
+              `as a static attribute (checking \`${securityAttr}\`)`,
+            () => {
+              @Component({
+                standalone: true,
+                selector: 'my-comp',
+                template: `
                   <iframe
                     ${srcAttr}="${TEST_IFRAME_URL}"
                     ${securityAttr}="">
                   </iframe>`,
-               })
-               class IframeComp {
-               }
-
-               expectIframeToBeCreated(IframeComp, {[srcAttr]: TEST_IFRAME_URL});
-             });
-
-          it(`should work when a security-sensitive attribute is set ` +
-                 `as a static attribute (checking \`${securityAttr}\` and ` +
-                 `making sure it's case-insensitive)`,
-             () => {
-               @Component({
-                 standalone: true,
-                 selector: 'my-comp',
-                 template: `
+              })
+              class IframeComp {}
+
+              expectIframeToBeCreated(IframeComp, {[srcAttr]: TEST_IFRAME_URL});
+            },
+          );
+
+          it(
+            `should work when a security-sensitive attribute is set ` +
+              `as a static attribute (checking \`${securityAttr}\` and ` +
+              `making sure it's case-insensitive)`,
+            () => {
+              @Component({
+                standalone: true,
+                selector: 'my-comp',
+                template: `
                   <iframe
                     ${srcAttr}="${TEST_IFRAME_URL}"
                     ${securityAttr.toUpperCase()}="">
                   </iframe>`,
-               })
-               class IframeComp {
-               }
-
-               expectIframeToBeCreated(IframeComp, {[srcAttr]: TEST_IFRAME_URL});
-             });
-
-          it(`should error when a security-sensitive attribute is applied ` +
-                 `using a property binding (checking \`${securityAttr}\`)`,
-             () => {
-               @Component({
-                 standalone: true,
-                 selector: 'my-comp',
-                 template:
-                     `<iframe ${srcAttr}="${TEST_IFRAME_URL}" [${securityAttr}]="''"></iframe>`,
-               })
-               class IframeComp {
-               }
-
-               expectIframeCreationToFail(IframeComp);
-             });
-
-          it(`should error when a security-sensitive attribute is applied ` +
-                 `using a property interpolation (checking \`${securityAttr}\`)`,
-             () => {
-               @Component({
-                 standalone: true,
-                 selector: 'my-comp',
-                 template:
-                     `<iframe ${srcAttr}="${TEST_IFRAME_URL}" ${securityAttr}="{{''}}"></iframe>`,
-               })
-               class IframeComp {
-               }
-
-               expectIframeCreationToFail(IframeComp);
-             });
-
-          it(`should error when a security-sensitive attribute is applied ` +
-                 `using a property binding (checking \`${securityAttr}\`, making ` +
-                 `sure it's case-insensitive)`,
-             () => {
-               @Component({
-                 standalone: true,
-                 selector: 'my-comp',
-                 template: `
+              })
+              class IframeComp {}
+
+              expectIframeToBeCreated(IframeComp, {[srcAttr]: TEST_IFRAME_URL});
+            },
+          );
+
+          it(
+            `should error when a security-sensitive attribute is applied ` +
+              `using a property binding (checking \`${securityAttr}\`)`,
+            () => {
+              @Component({
+                standalone: true,
+                selector: 'my-comp',
+                template: `<iframe ${srcAttr}="${TEST_IFRAME_URL}" [${securityAttr}]="''"></iframe>`,
+              })
+              class IframeComp {}
+
+              expectIframeCreationToFail(IframeComp);
+            },
+          );
+
+          it(
+            `should error when a security-sensitive attribute is applied ` +
+              `using a property interpolation (checking \`${securityAttr}\`)`,
+            () => {
+              @Component({
+                standalone: true,
+                selector: 'my-comp',
+                template: `<iframe ${srcAttr}="${TEST_IFRAME_URL}" ${securityAttr}="{{''}}"></iframe>`,
+              })
+              class IframeComp {}
+
+              expectIframeCreationToFail(IframeComp);
+            },
+          );
+
+          it(
+            `should error when a security-sensitive attribute is applied ` +
+              `using a property binding (checking \`${securityAttr}\`, making ` +
+              `sure it's case-insensitive)`,
+            () => {
+              @Component({
+                standalone: true,
+                selector: 'my-comp',
+                template: `
                     <iframe
                       ${srcAttr}="${TEST_IFRAME_URL}"
                       [${securityAttr.toUpperCase()}]="''"
                     ></iframe>
                   `,
-               })
-               class IframeComp {
-               }
-
-               expectIframeCreationToFail(IframeComp);
-             });
-
-          it(`should error when a security-sensitive attribute is applied ` +
-                 `using a property binding (checking \`${securityAttr}\`)`,
-             () => {
-               @Component({
-                 standalone: true,
-                 selector: 'my-comp',
-                 template: `
+              })
+              class IframeComp {}
+
+              expectIframeCreationToFail(IframeComp);
+            },
+          );
+
+          it(
+            `should error when a security-sensitive attribute is applied ` +
+              `using a property binding (checking \`${securityAttr}\`)`,
+            () => {
+              @Component({
+                standalone: true,
+                selector: 'my-comp',
+                template: `
                     <iframe
                       ${srcAttr}="${TEST_IFRAME_URL}"
                       [attr.${securityAttr}]="''"
                     ></iframe>
                   `,
-               })
-               class IframeComp {
-               }
-
-               expectIframeCreationToFail(IframeComp);
-             });
-
-          it(`should error when a security-sensitive attribute is applied ` +
-                 `using a property binding (checking \`${securityAttr}\`, making ` +
-                 `sure it's case-insensitive)`,
-             () => {
-               @Component({
-                 standalone: true,
-                 selector: 'my-comp',
-                 template: `
+              })
+              class IframeComp {}
+
+              expectIframeCreationToFail(IframeComp);
+            },
+          );
+
+          it(
+            `should error when a security-sensitive attribute is applied ` +
+              `using a property binding (checking \`${securityAttr}\`, making ` +
+              `sure it's case-insensitive)`,
+            () => {
+              @Component({
+                standalone: true,
+                selector: 'my-comp',
+                template: `
                     <iframe
                       ${srcAttr}="${TEST_IFRAME_URL}"
                       [attr.${securityAttr.toUpperCase()}]="''"
                     ></iframe>
                   `,
-               })
-               class IframeComp {
-               }
+              })
+              class IframeComp {}
 
-               expectIframeCreationToFail(IframeComp);
-             });
+              expectIframeCreationToFail(IframeComp);
+            },
+          );
 
           it(`should allow changing \`${srcAttr}\` after initial render`, () => {
             @Component({
@@ -255,8 +279,9 @@ describe('iframe processing', () => {
               src = this.sanitizeFn(TEST_IFRAME_URL);
 
               get sanitizeFn() {
-                return srcAttr === 'src' ? this.sanitizer.bypassSecurityTrustResourceUrl :
-                                           this.sanitizer.bypassSecurityTrustHtml;
+                return srcAttr === 'src'
+                  ? this.sanitizer.bypassSecurityTrustResourceUrl
+                  : this.sanitizer.bypassSecurityTrustHtml;
               }
             }
 
@@ -272,215 +297,205 @@ describe('iframe processing', () => {
         });
       });
 
-      it('should work when a directive sets a security-sensitive attribute as a static attribute',
-         () => {
-           @Directive({
-             standalone: true,
-             selector: '[dir]',
-             host: {
-               'src': TEST_IFRAME_URL,
-               'sandbox': '',
-             },
-           })
-           class IframeDir {
-           }
-           @Component({
-             standalone: true,
-             imports: [IframeDir],
-             selector: 'my-comp',
-             template: '<iframe dir></iframe>',
-           })
-           class IframeComp {
-           }
-
-           expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
-         });
-
-      it('should work when a directive sets a security-sensitive host attribute on a non-iframe element',
-         () => {
-           @Directive({
-             standalone: true,
-             selector: '[dir]',
-             host: {
-               'src': TEST_IFRAME_URL,
-               'sandbox': '',
-             },
-           })
-           class Dir {
-           }
-
-           @Component({
-             standalone: true,
-             imports: [Dir],
-             selector: 'my-comp',
-             template: '<img dir>',
-           })
-           class NonIframeComp {
-           }
-
-           const fixture = TestBed.createComponent(NonIframeComp);
-           fixture.detectChanges();
-
-           expect(fixture.nativeElement.firstChild.src).toEqual(TEST_IFRAME_URL);
-         });
-
-
-      it('should work when a security-sensitive attribute on an <iframe> ' +
-             'which also has a structural directive (*ngIf)',
-         () => {
-           @Component({
-             standalone: true,
-             imports: [NgIf],
-             selector: 'my-comp',
-             template: `<iframe *ngIf="visible" src="${TEST_IFRAME_URL}" sandbox=""></iframe>`,
-           })
-           class IframeComp {
-             visible = true;
-           }
-
-           expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
-         });
-
-      it('should work when a security-sensitive attribute is set between `src` and `srcdoc`',
-         () => {
-           @Component({
-             standalone: true,
-             selector: 'my-comp',
-             template: `<iframe src="${TEST_IFRAME_URL}" sandbox srcdoc="Hi!"></iframe>`,
-           })
-           class IframeComp {
-           }
-
-           expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
-         });
-
-      it('should work when a directive sets a security-sensitive attribute before setting `src`',
-         () => {
-           @Directive({
-             standalone: true,
-             selector: '[dir]',
-             host: {
-               'sandbox': '',
-               'src': TEST_IFRAME_URL,
-             },
-           })
-           class IframeDir {
-           }
-
-           @Component({
-             standalone: true,
-             imports: [IframeDir],
-             selector: 'my-comp',
-             template: '<iframe dir></iframe>',
-           })
-           class IframeComp {
-           }
-
-           expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
-         });
-
-      it('should work when a directive sets an `src` and ' +
-             'there was a security-sensitive attribute set in a template' +
-             '(directive attribute after `sandbox`)',
-         () => {
-           @Directive({
-             standalone: true,
-             selector: '[dir]',
-             host: {
-               'src': TEST_IFRAME_URL,
-             },
-           })
-           class IframeDir {
-           }
-
-           @Component({
-             standalone: true,
-             imports: [IframeDir],
-             selector: 'my-comp',
-             template: '<iframe sandbox dir></iframe>',
-           })
-           class IframeComp {
-           }
-
-           expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
-         });
-
-      it('should error when a directive sets a security-sensitive attribute ' +
-             'as an attribute binding (checking that it\'s case-insensitive)',
-         () => {
-           @Directive({
-             standalone: true,
-             selector: '[dir]',
-             host: {
-               '[attr.SANDBOX]': '\'\'',
-             },
-           })
-           class IframeDir {
-           }
-
-           @Component({
-             standalone: true,
-             imports: [IframeDir],
-             selector: 'my-comp',
-             template: `<IFRAME dir src="${TEST_IFRAME_URL}"></IFRAME>`,
-           })
-           class IframeComp {
-           }
-
-           expectIframeCreationToFail(IframeComp);
-         });
-
-      it('should work when a directive sets an `src` and ' +
-             'there was a security-sensitive attribute set in a template' +
-             '(directive attribute before `sandbox`)',
-         () => {
-           @Directive({
-             standalone: true,
-             selector: '[dir]',
-             host: {
-               'src': TEST_IFRAME_URL,
-             },
-           })
-           class IframeDir {
-           }
-
-           @Component({
-             standalone: true,
-             imports: [IframeDir],
-             selector: 'my-comp',
-             template: '<iframe dir sandbox></iframe>',
-           })
-           class IframeComp {
-           }
-
-           expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
-         });
-
-      it('should work when a directive sets a security-sensitive attribute and ' +
-             'there was an `src` attribute set in a template' +
-             '(directive attribute after `src`)',
-         () => {
-           @Directive({
-             standalone: true,
-             selector: '[dir]',
-             host: {
-               'sandbox': '',
-             },
-           })
-           class IframeDir {
-           }
-
-           @Component({
-             standalone: true,
-             imports: [IframeDir],
-             selector: 'my-comp',
-             template: `<iframe src="${TEST_IFRAME_URL}" dir></iframe>`,
-           })
-           class IframeComp {
-           }
-
-           expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
-         });
+      it('should work when a directive sets a security-sensitive attribute as a static attribute', () => {
+        @Directive({
+          standalone: true,
+          selector: '[dir]',
+          host: {
+            'src': TEST_IFRAME_URL,
+            'sandbox': '',
+          },
+        })
+        class IframeDir {}
+        @Component({
+          standalone: true,
+          imports: [IframeDir],
+          selector: 'my-comp',
+          template: '<iframe dir></iframe>',
+        })
+        class IframeComp {}
+
+        expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
+      });
+
+      it('should work when a directive sets a security-sensitive host attribute on a non-iframe element', () => {
+        @Directive({
+          standalone: true,
+          selector: '[dir]',
+          host: {
+            'src': TEST_IFRAME_URL,
+            'sandbox': '',
+          },
+        })
+        class Dir {}
+
+        @Component({
+          standalone: true,
+          imports: [Dir],
+          selector: 'my-comp',
+          template: '<img dir>',
+        })
+        class NonIframeComp {}
+
+        const fixture = TestBed.createComponent(NonIframeComp);
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.firstChild.src).toEqual(TEST_IFRAME_URL);
+      });
+
+      it(
+        'should work when a security-sensitive attribute on an <iframe> ' +
+          'which also has a structural directive (*ngIf)',
+        () => {
+          @Component({
+            standalone: true,
+            imports: [NgIf],
+            selector: 'my-comp',
+            template: `<iframe *ngIf="visible" src="${TEST_IFRAME_URL}" sandbox=""></iframe>`,
+          })
+          class IframeComp {
+            visible = true;
+          }
+
+          expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
+        },
+      );
+
+      it('should work when a security-sensitive attribute is set between `src` and `srcdoc`', () => {
+        @Component({
+          standalone: true,
+          selector: 'my-comp',
+          template: `<iframe src="${TEST_IFRAME_URL}" sandbox srcdoc="Hi!"></iframe>`,
+        })
+        class IframeComp {}
+
+        expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
+      });
+
+      it('should work when a directive sets a security-sensitive attribute before setting `src`', () => {
+        @Directive({
+          standalone: true,
+          selector: '[dir]',
+          host: {
+            'sandbox': '',
+            'src': TEST_IFRAME_URL,
+          },
+        })
+        class IframeDir {}
+
+        @Component({
+          standalone: true,
+          imports: [IframeDir],
+          selector: 'my-comp',
+          template: '<iframe dir></iframe>',
+        })
+        class IframeComp {}
+
+        expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
+      });
+
+      it(
+        'should work when a directive sets an `src` and ' +
+          'there was a security-sensitive attribute set in a template' +
+          '(directive attribute after `sandbox`)',
+        () => {
+          @Directive({
+            standalone: true,
+            selector: '[dir]',
+            host: {
+              'src': TEST_IFRAME_URL,
+            },
+          })
+          class IframeDir {}
+
+          @Component({
+            standalone: true,
+            imports: [IframeDir],
+            selector: 'my-comp',
+            template: '<iframe sandbox dir></iframe>',
+          })
+          class IframeComp {}
+
+          expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
+        },
+      );
+
+      it(
+        'should error when a directive sets a security-sensitive attribute ' +
+          "as an attribute binding (checking that it's case-insensitive)",
+        () => {
+          @Directive({
+            standalone: true,
+            selector: '[dir]',
+            host: {
+              '[attr.SANDBOX]': "''",
+            },
+          })
+          class IframeDir {}
+
+          @Component({
+            standalone: true,
+            imports: [IframeDir],
+            selector: 'my-comp',
+            template: `<IFRAME dir src="${TEST_IFRAME_URL}"></IFRAME>`,
+          })
+          class IframeComp {}
+
+          expectIframeCreationToFail(IframeComp);
+        },
+      );
+
+      it(
+        'should work when a directive sets an `src` and ' +
+          'there was a security-sensitive attribute set in a template' +
+          '(directive attribute before `sandbox`)',
+        () => {
+          @Directive({
+            standalone: true,
+            selector: '[dir]',
+            host: {
+              'src': TEST_IFRAME_URL,
+            },
+          })
+          class IframeDir {}
+
+          @Component({
+            standalone: true,
+            imports: [IframeDir],
+            selector: 'my-comp',
+            template: '<iframe dir sandbox></iframe>',
+          })
+          class IframeComp {}
+
+          expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
+        },
+      );
+
+      it(
+        'should work when a directive sets a security-sensitive attribute and ' +
+          'there was an `src` attribute set in a template' +
+          '(directive attribute after `src`)',
+        () => {
+          @Directive({
+            standalone: true,
+            selector: '[dir]',
+            host: {
+              'sandbox': '',
+            },
+          })
+          class IframeDir {}
+
+          @Component({
+            standalone: true,
+            imports: [IframeDir],
+            selector: 'my-comp',
+            template: `<iframe src="${TEST_IFRAME_URL}" dir></iframe>`,
+          })
+          class IframeComp {}
+
+          expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
+        },
+      );
 
       it('should work when a security-sensitive attribute is set as a static attribute', () => {
         @Component({
@@ -490,8 +505,7 @@ describe('iframe processing', () => {
             <iframe referrerPolicy="no-referrer" src="${TEST_IFRAME_URL}"></iframe>
           `,
         })
-        class IframeComp {
-        }
+        class IframeComp {}
 
         expectIframeToBeCreated(IframeComp, {
           src: TEST_IFRAME_URL,
@@ -499,232 +513,233 @@ describe('iframe processing', () => {
         });
       });
 
-      it('should error when a security-sensitive attribute is set ' +
-             'as a property binding and an <iframe> is wrapped into another element',
-         () => {
-           @Component({
-             standalone: true,
-             selector: 'my-comp',
-             template: `
+      it(
+        'should error when a security-sensitive attribute is set ' +
+          'as a property binding and an <iframe> is wrapped into another element',
+        () => {
+          @Component({
+            standalone: true,
+            selector: 'my-comp',
+            template: `
                 <section>
                   <iframe
                     src="${TEST_IFRAME_URL}"
                     [referrerPolicy]="'no-referrer'"
                   ></iframe>
                 </section>`,
-           })
-           class IframeComp {
-           }
-
-           expectIframeCreationToFail(IframeComp);
-         });
-
-      it('should work when a directive sets a security-sensitive attribute and ' +
-             'there was an `src` attribute set in a template' +
-             '(directive attribute before `src`)',
-         () => {
-           @Directive({
-             standalone: true,
-             selector: '[dir]',
-             host: {
-               'sandbox': '',
-             },
-           })
-           class IframeDir {
-           }
-
-           @Component({
-             standalone: true,
-             imports: [IframeDir],
-             selector: 'my-comp',
-             template: `<iframe dir src="${TEST_IFRAME_URL}"></iframe>`,
-           })
-           class IframeComp {
-           }
-
-           expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
-         });
-
-      it('should work when a directive that sets a security-sensitive attribute goes ' +
-             'before the directive that sets an `src` attribute value',
-         () => {
-           @Directive({
-             standalone: true,
-             selector: '[set-src]',
-             host: {
-               'src': TEST_IFRAME_URL,
-             },
-           })
-           class DirThatSetsSrc {
-           }
-
-           @Directive({
-             standalone: true,
-             selector: '[set-sandbox]',
-             host: {
-               'sandbox': '',
-             },
-           })
-           class DirThatSetsSandbox {
-           }
-
-           @Component({
-             standalone: true,
-             imports: [DirThatSetsSandbox, DirThatSetsSrc],
-             selector: 'my-comp',
-             // Important note: even though the `set-sandbox` goes after the `set-src`,
-             // the directive matching order (thus the order of host attributes) is
-             // based on the imports order, so the `sandbox` gets set first and the `src` second.
-             template: '<iframe set-src set-sandbox></iframe>',
-           })
-           class IframeComp {
-           }
-
-           expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
-         });
-
-      it('should work when a directive that sets a security-sensitive attribute has ' +
-             'a host directive that sets an `src` attribute value',
-         () => {
-           @Directive({
-             standalone: true,
-             selector: '[set-src-dir]',
-             host: {
-               'src': TEST_IFRAME_URL,
-             },
-           })
-           class DirThatSetsSrc {
-           }
-
-           @Directive({
-             standalone: true,
-             selector: '[dir]',
-             hostDirectives: [DirThatSetsSrc],
-             host: {
-               'sandbox': '',
-             },
-           })
-           class DirThatSetsSandbox {
-           }
-
-           @Component({
-             standalone: true,
-             imports: [DirThatSetsSandbox],
-             selector: 'my-comp',
-             template: '<iframe dir></iframe>',
-           })
-           class IframeComp {
-           }
-
-           expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
-         });
-
-      it('should work when a directive that sets an `src` has ' +
-             'a host directive that sets a security-sensitive attribute value',
-         () => {
-           @Directive({
-             standalone: true,
-             selector: '[set-sandbox-dir]',
-             host: {
-               'sandbox': '',
-             },
-           })
-           class DirThatSetsSandbox {
-           }
-
-           @Directive({
-             standalone: true,
-             selector: '[dir]',
-             hostDirectives: [DirThatSetsSandbox],
-             host: {
-               'src': TEST_IFRAME_URL,
-             },
-           })
-           class DirThatSetsSrc {
-           }
-
-           @Component({
-             standalone: true,
-             imports: [DirThatSetsSrc],
-             selector: 'my-comp',
-             template: '<iframe dir></iframe>',
-           })
-           class IframeComp {
-           }
-
-           expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
-         });
-
-
-      it('should error when creating a view that contains an <iframe> ' +
-             'with security-sensitive attributes set via property bindings',
-         () => {
-           @Component({
-             standalone: true,
-             selector: 'my-comp',
-             template: `
+          })
+          class IframeComp {}
+
+          expectIframeCreationToFail(IframeComp);
+        },
+      );
+
+      it(
+        'should work when a directive sets a security-sensitive attribute and ' +
+          'there was an `src` attribute set in a template' +
+          '(directive attribute before `src`)',
+        () => {
+          @Directive({
+            standalone: true,
+            selector: '[dir]',
+            host: {
+              'sandbox': '',
+            },
+          })
+          class IframeDir {}
+
+          @Component({
+            standalone: true,
+            imports: [IframeDir],
+            selector: 'my-comp',
+            template: `<iframe dir src="${TEST_IFRAME_URL}"></iframe>`,
+          })
+          class IframeComp {}
+
+          expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
+        },
+      );
+
+      it(
+        'should work when a directive that sets a security-sensitive attribute goes ' +
+          'before the directive that sets an `src` attribute value',
+        () => {
+          @Directive({
+            standalone: true,
+            selector: '[set-src]',
+            host: {
+              'src': TEST_IFRAME_URL,
+            },
+          })
+          class DirThatSetsSrc {}
+
+          @Directive({
+            standalone: true,
+            selector: '[set-sandbox]',
+            host: {
+              'sandbox': '',
+            },
+          })
+          class DirThatSetsSandbox {}
+
+          @Component({
+            standalone: true,
+            imports: [DirThatSetsSandbox, DirThatSetsSrc],
+            selector: 'my-comp',
+            // Important note: even though the `set-sandbox` goes after the `set-src`,
+            // the directive matching order (thus the order of host attributes) is
+            // based on the imports order, so the `sandbox` gets set first and the `src` second.
+            template: '<iframe set-src set-sandbox></iframe>',
+          })
+          class IframeComp {}
+
+          expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
+        },
+      );
+
+      it(
+        'should work when a directive that sets a security-sensitive attribute has ' +
+          'a host directive that sets an `src` attribute value',
+        () => {
+          @Directive({
+            standalone: true,
+            selector: '[set-src-dir]',
+            host: {
+              'src': TEST_IFRAME_URL,
+            },
+          })
+          class DirThatSetsSrc {}
+
+          @Directive({
+            standalone: true,
+            selector: '[dir]',
+            hostDirectives: [DirThatSetsSrc],
+            host: {
+              'sandbox': '',
+            },
+          })
+          class DirThatSetsSandbox {}
+
+          @Component({
+            standalone: true,
+            imports: [DirThatSetsSandbox],
+            selector: 'my-comp',
+            template: '<iframe dir></iframe>',
+          })
+          class IframeComp {}
+
+          expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
+        },
+      );
+
+      it(
+        'should work when a directive that sets an `src` has ' +
+          'a host directive that sets a security-sensitive attribute value',
+        () => {
+          @Directive({
+            standalone: true,
+            selector: '[set-sandbox-dir]',
+            host: {
+              'sandbox': '',
+            },
+          })
+          class DirThatSetsSandbox {}
+
+          @Directive({
+            standalone: true,
+            selector: '[dir]',
+            hostDirectives: [DirThatSetsSandbox],
+            host: {
+              'src': TEST_IFRAME_URL,
+            },
+          })
+          class DirThatSetsSrc {}
+
+          @Component({
+            standalone: true,
+            imports: [DirThatSetsSrc],
+            selector: 'my-comp',
+            template: '<iframe dir></iframe>',
+          })
+          class IframeComp {}
+
+          expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
+        },
+      );
+
+      it(
+        'should error when creating a view that contains an <iframe> ' +
+          'with security-sensitive attributes set via property bindings',
+        () => {
+          @Component({
+            standalone: true,
+            selector: 'my-comp',
+            template: `
                 <ng-container #container></ng-container>
                 <ng-template #template>
                   <iframe src="${TEST_IFRAME_URL}" [sandbox]="''"></iframe>
                 </ng-template>
               `,
-           })
-           class IframeComp {
-             @ViewChild('container', {read: ViewContainerRef}) container!: ViewContainerRef;
-             @ViewChild('template') template!: TemplateRef<unknown>;
+          })
+          class IframeComp {
+            @ViewChild('container', {read: ViewContainerRef}) container!: ViewContainerRef;
+            @ViewChild('template') template!: TemplateRef<unknown>;
 
-             createEmbeddedView() {
-               this.container.createEmbeddedView(this.template);
-             }
-           }
+            createEmbeddedView() {
+              this.container.createEmbeddedView(this.template);
+            }
+          }
 
-           const fixture = TestBed.createComponent(IframeComp);
-           fixture.detectChanges();
+          const fixture = TestBed.createComponent(IframeComp);
+          fixture.detectChanges();
 
-           expect(() => {
-             fixture.componentInstance.createEmbeddedView();
-             fixture.detectChanges();
-           }).toThrowError(getErrorMessageRegexp());
+          expect(() => {
+            fixture.componentInstance.createEmbeddedView();
+            fixture.detectChanges();
+          }).toThrowError(getErrorMessageRegexp());
 
-           ensureNoIframePresent(fixture);
-         });
+          ensureNoIframePresent(fixture);
+        },
+      );
 
       describe('i18n', () => {
-        it('should error when a security-sensitive attribute is set as ' +
-               'a property binding on an <iframe> inside i18n block',
-           () => {
-             @Component({
-               standalone: true,
-               selector: 'my-comp',
-               template: `
+        it(
+          'should error when a security-sensitive attribute is set as ' +
+            'a property binding on an <iframe> inside i18n block',
+          () => {
+            @Component({
+              standalone: true,
+              selector: 'my-comp',
+              template: `
                   <section i18n>
                     <iframe src="${TEST_IFRAME_URL}" [sandbox]="''">
                     </iframe>
                   </section>
                 `,
-             })
-             class IframeComp {
-             }
-
-             expectIframeCreationToFail(IframeComp);
-           });
-
-        it('should error when a security-sensitive attribute is set as ' +
-               'a property binding on an <iframe> annotated with i18n attribute',
-           () => {
-             @Component({
-               standalone: true,
-               selector: 'my-comp',
-               template: `
+            })
+            class IframeComp {}
+
+            expectIframeCreationToFail(IframeComp);
+          },
+        );
+
+        it(
+          'should error when a security-sensitive attribute is set as ' +
+            'a property binding on an <iframe> annotated with i18n attribute',
+          () => {
+            @Component({
+              standalone: true,
+              selector: 'my-comp',
+              template: `
                   <iframe i18n src="${TEST_IFRAME_URL}" [sandbox]="''">
                   </iframe>
                 `,
-             })
-             class IframeComp {
-             }
+            })
+            class IframeComp {}
 
-             expectIframeCreationToFail(IframeComp);
-           });
+            expectIframeCreationToFail(IframeComp);
+          },
+        );
 
         it('should work when a security-sensitive attributes are marked for translation', () => {
           @Component({
@@ -735,8 +750,7 @@ describe('iframe processing', () => {
               </iframe>
             `,
           })
-          class IframeComp {
-          }
+          class IframeComp {}
 
           expectIframeToBeCreated(IframeComp, {src: TEST_IFRAME_URL});
         });
diff --git a/packages/core/test/acceptance/standalone_injector_spec.ts b/packages/core/test/acceptance/standalone_injector_spec.ts
index afa8e378b269d..75c0e4fd49ab2 100644
--- a/packages/core/test/acceptance/standalone_injector_spec.ts
+++ b/packages/core/test/acceptance/standalone_injector_spec.ts
@@ -6,7 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, createComponent, createEnvironmentInjector, EnvironmentInjector, NgModule, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  Component,
+  createComponent,
+  createEnvironmentInjector,
+  EnvironmentInjector,
+  NgModule,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 describe('standalone injector', () => {
@@ -18,14 +26,13 @@ describe('standalone injector', () => {
     }
 
     @NgModule({providers: [Service]})
-    class ModuleWithAService {
-    }
+    class ModuleWithAService {}
 
     @Component({
       selector: 'standalone',
       standalone: true,
       imports: [ModuleWithAService],
-      template: `({{service.value}})`
+      template: `({{service.value}})`,
     })
     class TestComponent {
       constructor(readonly service: Service) {}
@@ -66,27 +73,27 @@ describe('standalone injector', () => {
     }
 
     @NgModule({providers: [Service]})
-    class ModuleWithAService {
-    }
+    class ModuleWithAService {}
 
     @Component({
       selector: 'standalone',
       standalone: true,
       imports: [ModuleWithAService],
-      template: `{{service.value}}`
+      template: `{{service.value}}`,
     })
     class DynamicComponent {
       constructor(readonly service: Service) {}
     }
 
     @Component({})
-    class AppComponent {
-    }
+    class AppComponent {}
 
     const fixture = TestBed.createComponent(AppComponent);
 
-    const environmentInjector =
-        createEnvironmentInjector([Service], TestBed.inject(EnvironmentInjector));
+    const environmentInjector = createEnvironmentInjector(
+      [Service],
+      TestBed.inject(EnvironmentInjector),
+    );
     const componentRef = createComponent(DynamicComponent, {environmentInjector});
     componentRef.changeDetectorRef.detectChanges();
 
diff --git a/packages/core/test/acceptance/standalone_spec.ts b/packages/core/test/acceptance/standalone_spec.ts
index 4d38d46058abe..fd2885a0f4dd8 100644
--- a/packages/core/test/acceptance/standalone_spec.ts
+++ b/packages/core/test/acceptance/standalone_spec.ts
@@ -7,7 +7,25 @@
  */
 
 import {CommonModule, NgComponentOutlet} from '@angular/common';
-import {Component, createEnvironmentInjector, Directive, EnvironmentInjector, forwardRef, inject, Injectable, Injector, Input, isStandalone, NgModule, NO_ERRORS_SCHEMA, OnInit, Pipe, PipeTransform, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  Component,
+  createEnvironmentInjector,
+  Directive,
+  EnvironmentInjector,
+  forwardRef,
+  inject,
+  Injectable,
+  Injector,
+  Input,
+  isStandalone,
+  NgModule,
+  NO_ERRORS_SCHEMA,
+  OnInit,
+  Pipe,
+  PipeTransform,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 describe('standalone components, directives, and pipes', () => {
@@ -16,8 +34,7 @@ describe('standalone components, directives, and pipes', () => {
       standalone: true,
       template: 'Look at me, no NgModule!',
     })
-    class StandaloneCmp {
-    }
+    class StandaloneCmp {}
 
     const fixture = TestBed.createComponent(StandaloneCmp);
     fixture.detectChanges();
@@ -28,17 +45,15 @@ describe('standalone components, directives, and pipes', () => {
     @Component({
       selector: 'tree',
       standalone: true,
-      template:
-          `({{level}})<ng-template [ngIf]="level > 0"><tree [level]="level - 1"></tree></ng-template>`,
-      imports: [CommonModule]
+      template: `({{level}})<ng-template [ngIf]="level > 0"><tree [level]="level - 1"></tree></ng-template>`,
+      imports: [CommonModule],
     })
     class TreeCmp {
       @Input() level = 0;
     }
 
     @Component({standalone: true, template: '<tree [level]="3"></tree>', imports: [TreeCmp]})
-    class StandaloneCmp {
-    }
+    class StandaloneCmp {}
 
     const fixture = TestBed.createComponent(StandaloneCmp);
     fixture.detectChanges();
@@ -51,51 +66,47 @@ describe('standalone components, directives, and pipes', () => {
       selector: 'inner-cmp',
       template: 'Look at me, no NgModule!',
     })
-    class InnerCmp {
-    }
+    class InnerCmp {}
 
     @Component({
       standalone: true,
       template: '<inner-cmp></inner-cmp>',
       imports: [InnerCmp],
     })
-    class StandaloneCmp {
-    }
+    class StandaloneCmp {}
 
     const fixture = TestBed.createComponent(StandaloneCmp);
     fixture.detectChanges();
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual('<inner-cmp>Look at me, no NgModule!</inner-cmp>');
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      '<inner-cmp>Look at me, no NgModule!</inner-cmp>',
+    );
   });
 
-
   it('should render a standalone component with an NgModule-based dependency', () => {
     @Component({
       selector: 'inner-cmp',
       template: 'Look at me, no NgModule (kinda)!',
     })
-    class InnerCmp {
-    }
+    class InnerCmp {}
 
     @NgModule({
       declarations: [InnerCmp],
       exports: [InnerCmp],
     })
-    class Module {
-    }
+    class Module {}
 
     @Component({
       standalone: true,
       template: '<inner-cmp></inner-cmp>',
       imports: [Module],
     })
-    class StandaloneCmp {
-    }
+    class StandaloneCmp {}
 
     const fixture = TestBed.createComponent(StandaloneCmp);
     fixture.detectChanges();
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual('<inner-cmp>Look at me, no NgModule (kinda)!</inner-cmp>');
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      '<inner-cmp>Look at me, no NgModule (kinda)!</inner-cmp>',
+    );
   });
 
   it('should allow exporting standalone components, directives, and pipes from NgModule', () => {
@@ -104,18 +115,16 @@ describe('standalone components, directives, and pipes', () => {
       standalone: true,
       template: `standalone`,
     })
-    class StandaloneCmp {
-    }
+    class StandaloneCmp {}
 
     @Directive({
       selector: '[standalone-dir]',
       host: {
         '[attr.id]': '"standalone"',
       },
-      standalone: true
+      standalone: true,
     })
-    class StandaloneDir {
-    }
+    class StandaloneDir {}
 
     @Pipe({name: 'standalonePipe', standalone: true})
     class StandalonePipe implements PipeTransform {
@@ -128,15 +137,13 @@ describe('standalone components, directives, and pipes', () => {
       imports: [StandaloneCmp, StandaloneDir, StandalonePipe],
       exports: [StandaloneCmp, StandaloneDir, StandalonePipe],
     })
-    class LibModule {
-    }
+    class LibModule {}
 
     @Component({
       selector: 'app-cmpt',
       template: `<standalone-cmp standalone-dir></standalone-cmp>{{'standalone' | standalonePipe}}`,
     })
-    class AppComponent {
-    }
+    class AppComponent {}
 
     TestBed.configureTestingModule({
       imports: [LibModule],
@@ -147,27 +154,25 @@ describe('standalone components, directives, and pipes', () => {
     fixture.detectChanges();
 
     expect(fixture.nativeElement.textContent).toBe('standalone|standalone');
-    expect(fixture.nativeElement.querySelector('standalone-cmp').getAttribute('id'))
-        .toBe('standalone');
+    expect(fixture.nativeElement.querySelector('standalone-cmp').getAttribute('id')).toBe(
+      'standalone',
+    );
   });
 
-
   it('should render a standalone component with dependencies and ambient providers', () => {
     @Component({
       standalone: true,
       template: 'Inner',
       selector: 'inner-cmp',
     })
-    class InnerCmp {
-    }
+    class InnerCmp {}
 
     class Service {
       value = 'Service';
     }
 
     @NgModule({providers: [Service]})
-    class ModuleWithAProvider {
-    }
+    class ModuleWithAProvider {}
 
     @Component({
       standalone: true,
@@ -189,8 +194,7 @@ describe('standalone components, directives, and pipes', () => {
     }
 
     @NgModule({providers: [Service]})
-    class ModuleWithAProvider {
-    }
+    class ModuleWithAProvider {}
 
     @Component({
       standalone: true,
@@ -213,30 +217,27 @@ describe('standalone components, directives, and pipes', () => {
 
     const fixture = TestBed.createComponent(OuterCmp);
     fixture.detectChanges();
-    expect(fixture.nativeElement.innerHTML)
-        .toEqual('Outer<inner-cmp>Inner(Service)</inner-cmp>Service');
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      'Outer<inner-cmp>Inner(Service)</inner-cmp>Service',
+    );
   });
 
   it('should correctly associate an injector with a standalone component def', () => {
     @Injectable()
-    class MyServiceA {
-    }
+    class MyServiceA {}
 
     @Injectable()
-    class MyServiceB {
-    }
+    class MyServiceB {}
 
     @NgModule({
       providers: [MyServiceA],
     })
-    class MyModuleA {
-    }
+    class MyModuleA {}
 
     @NgModule({
       providers: [MyServiceB],
     })
-    class MyModuleB {
-    }
+    class MyModuleB {}
 
     @Component({
       selector: 'duplicate-selector',
@@ -286,8 +287,7 @@ describe('standalone components, directives, and pipes', () => {
     }
 
     @NgModule({providers: [Service]})
-    class Module {
-    }
+    class Module {}
 
     @Component({
       standalone: true,
@@ -317,118 +317,120 @@ describe('standalone components, directives, and pipes', () => {
     expect(fixture.nativeElement.textContent).toBe('Inner(Service)');
   });
 
-  it('should dynamically insert a standalone component with ambient providers override in the "left / node" injector',
-     () => {
-       class Service {
-         constructor(readonly value = 'Service') {}
-       }
-
-       class NodeOverrideService extends Service {
-         constructor() {
-           super('NodeOverrideService');
-         }
-       }
-
-       class EnvOverrideService extends Service {
-         constructor() {
-           super('EnvOverrideService');
-         }
-       }
-
-       @NgModule({providers: [Service]})
-       class Module {
-       }
-
-       @Component({
-         standalone: true,
-         template: 'Inner({{service.value}})',
-         selector: 'inner-cmp',
-         imports: [Module],
-       })
-       class InnerCmp {
-         constructor(readonly service: Service) {}
-       }
-
-       @Component({
-         standalone: true,
-         template: '<ng-template #insert></ng-template>',
-         imports: [InnerCmp],
-       })
-       class AppCmp implements OnInit {
-         @ViewChild('insert', {read: ViewContainerRef, static: true}) vcRef!: ViewContainerRef;
-
-
-         constructor(readonly inj: Injector, readonly envInj: EnvironmentInjector) {}
-
-         ngOnInit(): void {
-           const lhsInj = Injector.create({
-             providers: [{provide: Service, useClass: NodeOverrideService}],
-             parent: this.inj,
-           });
-
-           const rhsInj = createEnvironmentInjector(
-               [{provide: Service, useClass: EnvOverrideService}], this.envInj);
-
-           this.vcRef.createComponent(InnerCmp, {injector: lhsInj, environmentInjector: rhsInj});
-         }
-       }
-
-       const fixture = TestBed.createComponent(AppCmp);
-       fixture.detectChanges();
-       expect(fixture.nativeElement.textContent).toBe('Inner(NodeOverrideService)');
-     });
-
-  it('should consult ambient providers before environment injector when inserting a component dynamically',
-     () => {
-       class Service {
-         constructor(readonly value = 'Service') {}
-       }
-
-       class EnvOverrideService extends Service {
-         constructor() {
-           super('EnvOverrideService');
-         }
-       }
-
-       @NgModule({providers: [Service]})
-       class Module {
-       }
-
-       @Component({
-         standalone: true,
-         template: 'Inner({{service.value}})',
-         selector: 'inner-cmp',
-         imports: [Module],
-       })
-       class InnerCmp {
-         constructor(readonly service: Service) {}
-       }
-
-       @Component({
-         standalone: true,
-         template: '<ng-template #insert></ng-template>',
-         imports: [InnerCmp],
-       })
-       class AppCmp implements OnInit {
-         @ViewChild('insert', {read: ViewContainerRef, static: true}) vcRef!: ViewContainerRef;
-
-         constructor(readonly envInj: EnvironmentInjector) {}
-
-         ngOnInit(): void {
-           const rhsInj = createEnvironmentInjector(
-               [{provide: Service, useClass: EnvOverrideService}], this.envInj);
-
-           this.vcRef.createComponent(InnerCmp, {environmentInjector: rhsInj});
-         }
-       }
-
-       const fixture = TestBed.createComponent(AppCmp);
-       fixture.detectChanges();
-
-       // The Service (an ambient provider) gets injected here as the standalone injector is a child
-       // of the user-created environment injector.
-       expect(fixture.nativeElement.textContent).toBe('Inner(Service)');
-     });
+  it('should dynamically insert a standalone component with ambient providers override in the "left / node" injector', () => {
+    class Service {
+      constructor(readonly value = 'Service') {}
+    }
+
+    class NodeOverrideService extends Service {
+      constructor() {
+        super('NodeOverrideService');
+      }
+    }
+
+    class EnvOverrideService extends Service {
+      constructor() {
+        super('EnvOverrideService');
+      }
+    }
+
+    @NgModule({providers: [Service]})
+    class Module {}
+
+    @Component({
+      standalone: true,
+      template: 'Inner({{service.value}})',
+      selector: 'inner-cmp',
+      imports: [Module],
+    })
+    class InnerCmp {
+      constructor(readonly service: Service) {}
+    }
+
+    @Component({
+      standalone: true,
+      template: '<ng-template #insert></ng-template>',
+      imports: [InnerCmp],
+    })
+    class AppCmp implements OnInit {
+      @ViewChild('insert', {read: ViewContainerRef, static: true}) vcRef!: ViewContainerRef;
+
+      constructor(
+        readonly inj: Injector,
+        readonly envInj: EnvironmentInjector,
+      ) {}
+
+      ngOnInit(): void {
+        const lhsInj = Injector.create({
+          providers: [{provide: Service, useClass: NodeOverrideService}],
+          parent: this.inj,
+        });
+
+        const rhsInj = createEnvironmentInjector(
+          [{provide: Service, useClass: EnvOverrideService}],
+          this.envInj,
+        );
+
+        this.vcRef.createComponent(InnerCmp, {injector: lhsInj, environmentInjector: rhsInj});
+      }
+    }
+
+    const fixture = TestBed.createComponent(AppCmp);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toBe('Inner(NodeOverrideService)');
+  });
+
+  it('should consult ambient providers before environment injector when inserting a component dynamically', () => {
+    class Service {
+      constructor(readonly value = 'Service') {}
+    }
+
+    class EnvOverrideService extends Service {
+      constructor() {
+        super('EnvOverrideService');
+      }
+    }
+
+    @NgModule({providers: [Service]})
+    class Module {}
+
+    @Component({
+      standalone: true,
+      template: 'Inner({{service.value}})',
+      selector: 'inner-cmp',
+      imports: [Module],
+    })
+    class InnerCmp {
+      constructor(readonly service: Service) {}
+    }
+
+    @Component({
+      standalone: true,
+      template: '<ng-template #insert></ng-template>',
+      imports: [InnerCmp],
+    })
+    class AppCmp implements OnInit {
+      @ViewChild('insert', {read: ViewContainerRef, static: true}) vcRef!: ViewContainerRef;
+
+      constructor(readonly envInj: EnvironmentInjector) {}
+
+      ngOnInit(): void {
+        const rhsInj = createEnvironmentInjector(
+          [{provide: Service, useClass: EnvOverrideService}],
+          this.envInj,
+        );
+
+        this.vcRef.createComponent(InnerCmp, {environmentInjector: rhsInj});
+      }
+    }
+
+    const fixture = TestBed.createComponent(AppCmp);
+    fixture.detectChanges();
+
+    // The Service (an ambient provider) gets injected here as the standalone injector is a child
+    // of the user-created environment injector.
+    expect(fixture.nativeElement.textContent).toBe('Inner(Service)');
+  });
 
   it('should render a recursive cycle of standalone components', () => {
     @Component({
@@ -437,8 +439,7 @@ describe('standalone components, directives, and pipes', () => {
       template: '<ng-template [ngIf]="false"><cmp-c></cmp-c></ng-template>A',
       imports: [forwardRef(() => StandaloneCmpC)],
     })
-    class StandaloneCmpA {
-    }
+    class StandaloneCmpA {}
 
     @Component({
       selector: 'cmp-b',
@@ -446,8 +447,7 @@ describe('standalone components, directives, and pipes', () => {
       template: '(<cmp-a></cmp-a>)B',
       imports: [StandaloneCmpA],
     })
-    class StandaloneCmpB {
-    }
+    class StandaloneCmpB {}
 
     @Component({
       selector: 'cmp-c',
@@ -455,8 +455,7 @@ describe('standalone components, directives, and pipes', () => {
       template: '(<cmp-b></cmp-b>)C',
       imports: [StandaloneCmpB],
     })
-    class StandaloneCmpC {
-    }
+    class StandaloneCmpC {}
 
     const fixture = TestBed.createComponent(StandaloneCmpC);
     fixture.detectChanges();
@@ -469,17 +468,15 @@ describe('standalone components, directives, and pipes', () => {
     }
 
     @NgModule({providers: [Service]})
-    class ModuleWithAService {
-    }
+    class ModuleWithAService {}
 
     @NgModule({exports: [ModuleWithAService]})
-    class ExportingModule {
-    }
+    class ExportingModule {}
     @Component({
       selector: 'standalone',
       standalone: true,
       imports: [ExportingModule],
-      template: `({{service.value}})`
+      template: `({{service.value}})`,
     })
     class TestComponent {
       constructor(readonly service: Service) {}
@@ -492,8 +489,7 @@ describe('standalone components, directives, and pipes', () => {
 
   it('should support nested arrays in @Component.imports', () => {
     @Directive({selector: '[red]', standalone: true, host: {'[attr.red]': 'true'}})
-    class RedIdDirective {
-    }
+    class RedIdDirective {}
 
     @Pipe({name: 'blue', pure: true, standalone: true})
     class BluePipe implements PipeTransform {
@@ -508,8 +504,7 @@ describe('standalone components, directives, and pipes', () => {
       template: `<div red>{{'' | blue}}</div>`,
       imports: [[RedIdDirective, [BluePipe]]],
     })
-    class TestComponent {
-    }
+    class TestComponent {}
 
     const fixture = TestBed.createComponent(TestComponent);
     fixture.detectChanges();
@@ -518,8 +513,7 @@ describe('standalone components, directives, and pipes', () => {
 
   it('should support readonly arrays in @Component.imports', () => {
     @Directive({selector: '[red]', standalone: true, host: {'[attr.red]': 'true'}})
-    class RedIdDirective {
-    }
+    class RedIdDirective {}
 
     @Pipe({name: 'blue', pure: true, standalone: true})
     class BluePipe implements PipeTransform {
@@ -536,8 +530,7 @@ describe('standalone components, directives, and pipes', () => {
       template: `<div red>{{'' | blue}}</div>`,
       imports: [DirAndPipe],
     })
-    class TestComponent {
-    }
+    class TestComponent {}
 
     const fixture = TestBed.createComponent(TestComponent);
     fixture.detectChanges();
@@ -546,24 +539,19 @@ describe('standalone components, directives, and pipes', () => {
 
   it('should deduplicate declarations', () => {
     @Component({selector: 'test-red', standalone: true, template: 'red(<ng-content></ng-content>)'})
-    class RedComponent {
-    }
+    class RedComponent {}
 
     @Component({selector: 'test-blue', template: 'blue(<ng-content></ng-content>)'})
-    class BlueComponent {
-    }
+    class BlueComponent {}
 
     @NgModule({declarations: [BlueComponent], exports: [BlueComponent]})
-    class BlueModule {
-    }
+    class BlueModule {}
 
     @NgModule({exports: [BlueModule]})
-    class BlueAModule {
-    }
+    class BlueAModule {}
 
     @NgModule({exports: [BlueModule]})
-    class BlueBModule {
-    }
+    class BlueBModule {}
 
     @Component({
       selector: 'standalone',
@@ -571,13 +559,13 @@ describe('standalone components, directives, and pipes', () => {
       template: `<test-red><test-blue>orange</test-blue></test-red>`,
       imports: [RedComponent, RedComponent, BlueAModule, BlueBModule],
     })
-    class TestComponent {
-    }
+    class TestComponent {}
 
     const fixture = TestBed.createComponent(TestComponent);
     fixture.detectChanges();
-    expect(fixture.nativeElement.innerHTML)
-        .toBe('<test-red>red(<test-blue>blue(orange)</test-blue>)</test-red>');
+    expect(fixture.nativeElement.innerHTML).toBe(
+      '<test-red>red(<test-blue>blue(orange)</test-blue>)</test-red>',
+    );
   });
 
   it('should error when forwardRef does not resolve to a truthy value', () => {
@@ -587,13 +575,12 @@ describe('standalone components, directives, and pipes', () => {
       imports: [forwardRef(() => null)],
       template: '',
     })
-    class TestComponent {
-    }
+    class TestComponent {}
     expect(() => {
       TestBed.createComponent(TestComponent);
-    })
-        .toThrowError(
-            'Expected forwardRef function, imported from "TestComponent", to return a standalone entity or NgModule but got "null".');
+    }).toThrowError(
+      'Expected forwardRef function, imported from "TestComponent", to return a standalone entity or NgModule but got "null".',
+    );
   });
 
   it('should error when a non-standalone component is imported', () => {
@@ -601,8 +588,7 @@ describe('standalone components, directives, and pipes', () => {
       selector: 'not-a-standalone',
       template: '',
     })
-    class NonStandaloneCmp {
-    }
+    class NonStandaloneCmp {}
 
     @Component({
       selector: 'standalone',
@@ -610,20 +596,18 @@ describe('standalone components, directives, and pipes', () => {
       template: '',
       imports: [NonStandaloneCmp],
     })
-    class StandaloneCmp {
-    }
+    class StandaloneCmp {}
 
     expect(() => {
       TestBed.createComponent(StandaloneCmp);
-    })
-        .toThrowError(
-            'The "NonStandaloneCmp" component, imported from "StandaloneCmp", is not standalone. Did you forget to add the standalone: true flag?');
+    }).toThrowError(
+      'The "NonStandaloneCmp" component, imported from "StandaloneCmp", is not standalone. Did you forget to add the standalone: true flag?',
+    );
   });
 
   it('should error when a non-standalone directive is imported', () => {
     @Directive({selector: '[not-a-standalone]'})
-    class NonStandaloneDirective {
-    }
+    class NonStandaloneDirective {}
 
     @Component({
       selector: 'standalone',
@@ -631,20 +615,18 @@ describe('standalone components, directives, and pipes', () => {
       template: '',
       imports: [NonStandaloneDirective],
     })
-    class StandaloneCmp {
-    }
+    class StandaloneCmp {}
 
     expect(() => {
       TestBed.createComponent(StandaloneCmp);
-    })
-        .toThrowError(
-            'The "NonStandaloneDirective" directive, imported from "StandaloneCmp", is not standalone. Did you forget to add the standalone: true flag?');
+    }).toThrowError(
+      'The "NonStandaloneDirective" directive, imported from "StandaloneCmp", is not standalone. Did you forget to add the standalone: true flag?',
+    );
   });
 
   it('should error when a non-standalone pipe is imported', () => {
     @Pipe({name: 'not-a-standalone'})
-    class NonStandalonePipe {
-    }
+    class NonStandalonePipe {}
 
     @Component({
       selector: 'standalone',
@@ -652,14 +634,13 @@ describe('standalone components, directives, and pipes', () => {
       template: '',
       imports: [NonStandalonePipe],
     })
-    class StandaloneCmp {
-    }
+    class StandaloneCmp {}
 
     expect(() => {
       TestBed.createComponent(StandaloneCmp);
-    })
-        .toThrowError(
-            'The "NonStandalonePipe" pipe, imported from "StandaloneCmp", is not standalone. Did you forget to add the standalone: true flag?');
+    }).toThrowError(
+      'The "NonStandalonePipe" pipe, imported from "StandaloneCmp", is not standalone. Did you forget to add the standalone: true flag?',
+    );
   });
 
   it('should error when an unknown type is imported', () => {
@@ -671,20 +652,18 @@ describe('standalone components, directives, and pipes', () => {
       template: '',
       imports: [SthElse],
     })
-    class StandaloneCmp {
-    }
+    class StandaloneCmp {}
 
     expect(() => {
       TestBed.createComponent(StandaloneCmp);
-    })
-        .toThrowError(
-            'The "SthElse" type, imported from "StandaloneCmp", must be a standalone component / directive / pipe or an NgModule. Did you forget to add the required @Component / @Directive / @Pipe or @NgModule annotation?');
+    }).toThrowError(
+      'The "SthElse" type, imported from "StandaloneCmp", must be a standalone component / directive / pipe or an NgModule. Did you forget to add the required @Component / @Directive / @Pipe or @NgModule annotation?',
+    );
   });
 
   it('should error when a module with providers is imported', () => {
     @NgModule()
-    class OtherModule {
-    }
+    class OtherModule {}
 
     @NgModule()
     class LibModule {
@@ -700,14 +679,13 @@ describe('standalone components, directives, and pipes', () => {
       // are disallowed on the type level
       imports: [[LibModule.forComponent()]],
     })
-    class StandaloneCmp {
-    }
+    class StandaloneCmp {}
 
     expect(() => {
       TestBed.createComponent(StandaloneCmp);
-    })
-        .toThrowError(
-            'A module with providers was imported from "StandaloneCmp". Modules with providers are not supported in standalone components imports.');
+    }).toThrowError(
+      'A module with providers was imported from "StandaloneCmp". Modules with providers are not supported in standalone components imports.',
+    );
   });
 
   it('should support forwardRef imports', () => {
@@ -715,14 +693,12 @@ describe('standalone components, directives, and pipes', () => {
       selector: 'test',
       standalone: true,
       imports: [forwardRef(() => StandaloneComponent)],
-      template: `(<other-standalone></other-standalone>)`
+      template: `(<other-standalone></other-standalone>)`,
     })
-    class TestComponent {
-    }
+    class TestComponent {}
 
     @Component({selector: 'other-standalone', standalone: true, template: `standalone component`})
-    class StandaloneComponent {
-    }
+    class StandaloneComponent {}
 
     const fixture = TestBed.createComponent(TestComponent);
     fixture.detectChanges();
@@ -734,10 +710,9 @@ describe('standalone components, directives, and pipes', () => {
       @Component({
         standalone: true,
         template: '<maybe-custom-elm></maybe-custom-elm>',
-        schemas: [NO_ERRORS_SCHEMA]
+        schemas: [NO_ERRORS_SCHEMA],
       })
-      class AppCmp {
-      }
+      class AppCmp {}
 
       const fixture = TestBed.createComponent(AppCmp);
       fixture.detectChanges();
@@ -746,25 +721,21 @@ describe('standalone components, directives, and pipes', () => {
 
     it('should error when schemas are specified for a non-standalone component', () => {
       @Component({template: '', schemas: [NO_ERRORS_SCHEMA]})
-      class AppCmp {
-      }
+      class AppCmp {}
 
       expect(() => {
         TestBed.createComponent(AppCmp);
-      })
-          .toThrowError(
-              `The 'schemas' was specified for the AppCmp but is only valid on a component that is standalone.`);
+      }).toThrowError(
+        `The 'schemas' was specified for the AppCmp but is only valid on a component that is standalone.`,
+      );
     });
   });
 
   describe('unknown template elements', () => {
     const unknownElErrorRegex = (tag: string) => {
-      const prefix =
-          `'${tag}' is not a known element \\(used in the 'AppCmp' component template\\):`;
-      const message1 = `1. If '${
-          tag}' is an Angular component, then verify that it is included in the '@Component.imports' of this component.`;
-      const message2 = `2. If '${
-          tag}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.`;
+      const prefix = `'${tag}' is not a known element \\(used in the 'AppCmp' component template\\):`;
+      const message1 = `1. If '${tag}' is an Angular component, then verify that it is included in the '@Component.imports' of this component.`;
+      const message2 = `2. If '${tag}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.`;
       return new RegExp(`${prefix}s*\ns*${message1}s*\ns*${message2}`);
     };
 
@@ -774,8 +745,7 @@ describe('standalone components, directives, and pipes', () => {
         standalone: true,
         template: '<unknown-tag></unknown-tag>',
       })
-      class AppCmp {
-      }
+      class AppCmp {}
 
       TestBed.createComponent(AppCmp);
 
@@ -789,8 +759,7 @@ describe('standalone components, directives, and pipes', () => {
         standalone: true,
         template: '<unknown-tag-A></unknown-tag-A><unknown-tag-B></unknown-tag-B>',
       })
-      class AppCmp {
-      }
+      class AppCmp {}
 
       TestBed.createComponent(AppCmp);
 
@@ -807,31 +776,28 @@ describe('standalone components, directives, and pipes', () => {
         standalone: true,
         template: '<ng-template><unknown-tag></unknown-tag><ng-template>',
       })
-      class AppCmp {
-      }
+      class AppCmp {}
 
       TestBed.createComponent(AppCmp);
 
       expect(spy).not.toHaveBeenCalled();
     });
 
-    it('should warn the user when an unknown element is present in an instantiated embedded view',
-       () => {
-         const spy = spyOn(console, 'error');
-         @Component({
-           standalone: true,
-           template: '<ng-template [ngIf]="true"><unknown-tag></unknown-tag><ng-template>',
-           imports: [CommonModule],
-         })
-         class AppCmp {
-         }
-
-         const fixture = TestBed.createComponent(AppCmp);
-         fixture.detectChanges();
-
-         const errorRegex = unknownElErrorRegex('unknown-tag');
-         expect(spy).toHaveBeenCalledOnceWith(jasmine.stringMatching(errorRegex));
-       });
+    it('should warn the user when an unknown element is present in an instantiated embedded view', () => {
+      const spy = spyOn(console, 'error');
+      @Component({
+        standalone: true,
+        template: '<ng-template [ngIf]="true"><unknown-tag></unknown-tag><ng-template>',
+        imports: [CommonModule],
+      })
+      class AppCmp {}
+
+      const fixture = TestBed.createComponent(AppCmp);
+      fixture.detectChanges();
+
+      const errorRegex = unknownElErrorRegex('unknown-tag');
+      expect(spy).toHaveBeenCalledOnceWith(jasmine.stringMatching(errorRegex));
+    });
   });
 
   /*
@@ -850,12 +816,11 @@ describe('standalone components, directives, and pipes', () => {
     it('should allow extending a regular component and turn it into a standalone one', () => {
       @Component({selector: 'regular', template: 'regular: {{in}}'})
       class RegularCmp {
-        @Input() in : string|undefined;
+        @Input() in: string | undefined;
       }
 
       @Component({selector: 'standalone', template: 'standalone: {{in}}', standalone: true})
-      class StandaloneCmp extends RegularCmp {
-      }
+      class StandaloneCmp extends RegularCmp {}
 
       const fixture = TestBed.createComponent(StandaloneCmp);
       fixture.componentInstance.in = 'input value';
@@ -866,12 +831,11 @@ describe('standalone components, directives, and pipes', () => {
     it('should allow extending a regular component and turn it into a standalone one', () => {
       @Component({selector: 'standalone', template: 'standalone: {{in}}', standalone: true})
       class StandaloneCmp {
-        @Input() in : string|undefined;
+        @Input() in: string | undefined;
       }
 
       @Component({selector: 'regular', template: 'regular: {{in}}'})
-      class RegularCmp extends StandaloneCmp {
-      }
+      class RegularCmp extends StandaloneCmp {}
 
       const fixture = TestBed.createComponent(RegularCmp);
       fixture.componentInstance.in = 'input value';
@@ -885,22 +849,20 @@ describe('standalone components, directives, and pipes', () => {
         template: 'inner',
         standalone: true,
       })
-      class InnerCmp {
-      }
+      class InnerCmp {}
 
       @Component({
         selector: 'standalone',
         standalone: true,
         template: 'standalone: {{in}}; (<inner></inner>)',
-        imports: [InnerCmp]
+        imports: [InnerCmp],
       })
       class StandaloneCmp {
-        @Input() in : string|undefined;
+        @Input() in: string | undefined;
       }
 
       @Component({selector: 'regular'})
-      class RegularCmp extends StandaloneCmp {
-      }
+      class RegularCmp extends StandaloneCmp {}
 
       const fixture = TestBed.createComponent(RegularCmp);
       fixture.componentInstance.in = 'input value';
@@ -914,48 +876,42 @@ describe('standalone components, directives, and pipes', () => {
   describe('isStandalone()', () => {
     it('should return `true` if component is standalone', () => {
       @Component({selector: 'standalone-cmp', standalone: true})
-      class StandaloneCmp {
-      }
+      class StandaloneCmp {}
 
       expect(isStandalone(StandaloneCmp)).toBeTrue();
     });
 
     it('should return `false` if component is not standalone', () => {
       @Component({selector: 'standalone-cmp', standalone: false})
-      class StandaloneCmp {
-      }
+      class StandaloneCmp {}
 
       expect(isStandalone(StandaloneCmp)).toBeFalse();
     });
 
     it('should return `true` if directive is standalone', () => {
       @Directive({selector: '[standaloneDir]', standalone: true})
-      class StandAloneDirective {
-      }
+      class StandAloneDirective {}
 
       expect(isStandalone(StandAloneDirective)).toBeTrue();
     });
 
     it('should return `false` if directive is standalone', () => {
       @Directive({selector: '[standaloneDir]', standalone: false})
-      class StandAloneDirective {
-      }
+      class StandAloneDirective {}
 
       expect(isStandalone(StandAloneDirective)).toBeFalse();
     });
 
     it('should return `true` if pipe is standalone', () => {
       @Pipe({name: 'standalonePipe', standalone: true})
-      class StandAlonePipe {
-      }
+      class StandAlonePipe {}
 
       expect(isStandalone(StandAlonePipe)).toBeTrue();
     });
 
     it('should return `false` if pipe is standalone', () => {
       @Pipe({name: 'standalonePipe', standalone: false})
-      class StandAlonePipe {
-      }
+      class StandAlonePipe {}
 
       expect(isStandalone(StandAlonePipe)).toBeFalse();
     });
@@ -968,8 +924,7 @@ describe('standalone components, directives, and pipes', () => {
 
     it('should return `false` if the class is an NgModule', () => {
       @NgModule({})
-      class Module {
-      }
+      class Module {}
 
       expect(isStandalone(Module)).toBeFalse();
     });
@@ -981,8 +936,7 @@ describe('standalone components, directives, and pipes', () => {
         template: '<ng-template [ngIf]="false"><cmp-c></cmp-c></ng-template>A',
         imports: [forwardRef(() => StandaloneCmpC)],
       })
-      class StandaloneCmpA {
-      }
+      class StandaloneCmpA {}
 
       @Component({
         selector: 'cmp-b',
@@ -990,8 +944,7 @@ describe('standalone components, directives, and pipes', () => {
         template: '(<cmp-a></cmp-a>)B',
         imports: [StandaloneCmpA],
       })
-      class StandaloneCmpB {
-      }
+      class StandaloneCmpB {}
 
       @Component({
         selector: 'cmp-c',
@@ -999,8 +952,7 @@ describe('standalone components, directives, and pipes', () => {
         template: '(<cmp-b></cmp-b>)C',
         imports: [StandaloneCmpB],
       })
-      class StandaloneCmpC {
-      }
+      class StandaloneCmpC {}
 
       TestBed.configureTestingModule({imports: [StandaloneCmpC]});
       const fixture = TestBed.createComponent(StandaloneCmpC);
diff --git a/packages/core/test/acceptance/styling_spec.ts b/packages/core/test/acceptance/styling_spec.ts
index 6566c99d6eaa6..2da56a210cbbe 100644
--- a/packages/core/test/acceptance/styling_spec.ts
+++ b/packages/core/test/acceptance/styling_spec.ts
@@ -6,11 +6,26 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {CommonModule} from '@angular/common';
-import {Component, ComponentRef, Directive, ElementRef, HostBinding, Input, Renderer2, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  Component,
+  ComponentRef,
+  Directive,
+  ElementRef,
+  HostBinding,
+  Input,
+  Renderer2,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {bypassSanitizationTrustStyle} from '@angular/core/src/sanitization/bypass';
 import {ngDevModeResetPerfCounters} from '@angular/core/src/util/ng_dev_mode';
 import {TestBed} from '@angular/core/testing';
-import {getElementClasses, getElementStyles, getSortedClassName, getSortedStyle} from '@angular/core/testing/src/styling';
+import {
+  getElementClasses,
+  getElementStyles,
+  getSortedClassName,
+  getSortedStyle,
+} from '@angular/core/testing/src/styling';
 import {By, DomSanitizer, SafeStyle} from '@angular/platform-browser';
 import {expectPerfCounters} from '@angular/private/testing';
 
@@ -20,8 +35,7 @@ describe('styling', () => {
   describe('apply in prioritization order', () => {
     it('should perform static bindings', () => {
       @Component({template: `<div class="STATIC" style="color: blue"></div>`})
-      class Cmp {
-      }
+      class Cmp {}
 
       TestBed.configureTestingModule({declarations: [Cmp]});
       const fixture = TestBed.createComponent(Cmp);
@@ -35,10 +49,9 @@ describe('styling', () => {
       @Component({
         template: `<div [class.dynamic]="true"
                         [style.color]="'blue'"
-                        [style.width.px]="100"></div>`
+                        [style.width.px]="100"></div>`,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       TestBed.configureTestingModule({declarations: [Cmp]});
       const fixture = TestBed.createComponent(Cmp);
@@ -52,10 +65,9 @@ describe('styling', () => {
     it('should perform map bindings', () => {
       @Component({
         template: `<div [class]="{dynamic: true}"
-                        [style]="{color: 'blue', width: '100px'}"></div>`
+                        [style]="{color: 'blue', width: '100px'}"></div>`,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       TestBed.configureTestingModule({declarations: [Cmp]});
       const fixture = TestBed.createComponent(Cmp);
@@ -70,10 +82,9 @@ describe('styling', () => {
       @Component({
         template: `<div class="static {{'dynamic'}}"
                         style.color="blu{{'e'}}"
-                        style="width: {{'100'}}px"></div>`
+                        style="width: {{'100'}}px"></div>`,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       TestBed.configureTestingModule({declarations: [Cmp]});
       const fixture = TestBed.createComponent(Cmp);
@@ -86,24 +97,20 @@ describe('styling', () => {
 
     it('should support hostBindings', () => {
       @Component({
-        template:
-            `<div my-host-bindings-2 my-host-bindings-1 class="STATIC" style="color: blue"></div>`
+        template: `<div my-host-bindings-2 my-host-bindings-1 class="STATIC" style="color: blue"></div>`,
       })
-      class Cmp {
-      }
+      class Cmp {}
       @Directive({
         selector: '[my-host-bindings-1]',
-        host: {'class': 'HOST_STATIC_1', 'style': 'font-family: "c1"'}
+        host: {'class': 'HOST_STATIC_1', 'style': 'font-family: "c1"'},
       })
-      class Dir1 {
-      }
+      class Dir1 {}
 
       @Directive({
         selector: '[my-host-bindings-2]',
-        host: {'class': 'HOST_STATIC_2', 'style': 'font-family: "c2"'}
+        host: {'class': 'HOST_STATIC_2', 'style': 'font-family: "c2"'},
       })
-      class Dir2 {
-      }
+      class Dir2 {}
 
       TestBed.configureTestingModule({
         declarations: [
@@ -114,7 +121,7 @@ describe('styling', () => {
           // Even thought component is at the end, it will still have lowest priority because
           // components are special that way.
           Cmp,
-        ]
+        ],
       });
       const fixture = TestBed.createComponent(Cmp);
       fixture.detectChanges();
@@ -127,17 +134,14 @@ describe('styling', () => {
 
     it('should support hostBindings inheritance', () => {
       @Component({template: `<div my-host-bindings class="STATIC" style="color: blue;"></div>`})
-      class Cmp {
-      }
+      class Cmp {}
       @Directive({host: {'class': 'SUPER_STATIC', 'style': 'font-family: "super";'}})
-      class SuperDir {
-      }
+      class SuperDir {}
       @Directive({
         selector: '[my-host-bindings]',
-        host: {'class': 'HOST_STATIC', 'style': 'font-family: "host font"'}
+        host: {'class': 'HOST_STATIC', 'style': 'font-family: "host font"'},
       })
-      class Dir extends SuperDir {
-      }
+      class Dir extends SuperDir {}
 
       TestBed.configureTestingModule({declarations: [Cmp, Dir]});
       const fixture = TestBed.createComponent(Cmp);
@@ -147,8 +151,9 @@ describe('styling', () => {
       expect(getSortedClassName(div)).toEqual('HOST_STATIC STATIC SUPER_STATIC');
       // Browsers keep the '"' around the font name, but Domino removes it some we do search and
       // replace. Yes we could do `replace(/"/g, '')` but that fails on android.
-      expect(getSortedStyle(div).replace('"', '').replace('"', ''))
-          .toEqual('color: blue; font-family: host font;');
+      expect(getSortedStyle(div).replace('"', '').replace('"', '')).toEqual(
+        'color: blue; font-family: host font;',
+      );
     });
 
     it('should apply style properties that require quote wrapping', () => {
@@ -158,10 +163,9 @@ describe('styling', () => {
           <div style="content: &quot;foo&quot;"></div>
           <div style='content: "foo"'></div>
           <div style="content: 'foo'"></div>
-        `
+        `,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       TestBed.configureTestingModule({declarations: [Cmp]});
       const fixture = TestBed.createComponent(Cmp);
@@ -180,10 +184,9 @@ describe('styling', () => {
              [class]="{foo: true, DELETE_MAP_A: false}"
              [class.bar]="true"
              [class.DELETE_PROP_B]="false"></div>
-        `
+        `,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       TestBed.configureTestingModule({declarations: [Cmp]});
       const fixture = TestBed.createComponent(Cmp);
@@ -200,25 +203,25 @@ describe('styling', () => {
              [style]="{width: '110px', height: null}"
              [style.color]=" 'blue' "
              [style.height.px]="undefined"></div>
-        `
+        `,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       TestBed.configureTestingModule({declarations: [Cmp]});
       const fixture = TestBed.createComponent(Cmp);
       fixture.detectChanges();
 
       const styleDiv = fixture.nativeElement.querySelector('div');
-      expect(getSortedStyle(styleDiv))
-          .toEqual('background-color: yellow; color: blue; width: 110px;');
+      expect(getSortedStyle(styleDiv)).toEqual(
+        'background-color: yellow; color: blue; width: 110px;',
+      );
     });
 
     it('should work with ngClass/ngStyle', () => {
-      @Component(
-          {template: `<div [ngClass]="['dynamic']" [ngStyle]="{'font-family': 'dynamic'}"></div>`})
-      class Cmp {
-      }
+      @Component({
+        template: `<div [ngClass]="['dynamic']" [ngStyle]="{'font-family': 'dynamic'}"></div>`,
+      })
+      class Cmp {}
       TestBed.configureTestingModule({declarations: [Cmp]});
       const fixture = TestBed.createComponent(Cmp);
       fixture.detectChanges();
@@ -230,9 +233,11 @@ describe('styling', () => {
   });
 
   describe('css variables', () => {
-    const supportsCssVariables = typeof getComputedStyle !== 'undefined' &&
-        typeof CSS !== 'undefined' && typeof CSS.supports !== 'undefined' &&
-        CSS.supports('color', 'var(--fake-var)');
+    const supportsCssVariables =
+      typeof getComputedStyle !== 'undefined' &&
+      typeof CSS !== 'undefined' &&
+      typeof CSS.supports !== 'undefined' &&
+      CSS.supports('color', 'var(--fake-var)');
 
     it('should support css variables', () => {
       // This test only works in browsers which support CSS variables.
@@ -245,10 +250,9 @@ describe('styling', () => {
           <div [style.--my-var]="'100px'">
             <span style="width: var(--my-var)">CONTENT</span>
           </div>
-        `
+        `,
       })
-      class Cmp {
-      }
+      class Cmp {}
       TestBed.configureTestingModule({declarations: [Cmp]});
       const fixture = TestBed.createComponent(Cmp);
       fixture.detectChanges();
@@ -286,10 +290,9 @@ describe('styling', () => {
           <div [style.--MyVar]="'100px'">
             <span style="width: var(--MyVar)">CONTENT</span>
           </div>
-        `
+        `,
       })
-      class Cmp {
-      }
+      class Cmp {}
       TestBed.configureTestingModule({declarations: [Cmp]});
       const fixture = TestBed.createComponent(Cmp);
       fixture.detectChanges();
@@ -305,8 +308,7 @@ describe('styling', () => {
         template: `<div [class]="['a', null, 'c']" [class.extra]="true"></div>`,
         standalone: true,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       const fixture = TestBed.createComponent(Cmp);
       fixture.detectChanges();
@@ -319,8 +321,7 @@ describe('styling', () => {
         template: `<div [class]="['a', undefined, 'c']" [class.extra]="true"></div>`,
         standalone: true,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       const fixture = TestBed.createComponent(Cmp);
       fixture.detectChanges();
@@ -333,8 +334,7 @@ describe('styling', () => {
         template: `<div [class]="['a', 0, 'c']" [class.extra]="true"></div>`,
         standalone: true,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       const fixture = TestBed.createComponent(Cmp);
       fixture.detectChanges();
@@ -347,8 +347,7 @@ describe('styling', () => {
         template: `<div [class]="['a', false, 'c']" [class.extra]="true"></div>`,
         standalone: true,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       const fixture = TestBed.createComponent(Cmp);
       fixture.detectChanges();
@@ -361,8 +360,7 @@ describe('styling', () => {
         template: `<div [class]="['a', '', 'c']" [class.extra]="true"></div>`,
         standalone: true,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       const fixture = TestBed.createComponent(Cmp);
       fixture.detectChanges();
@@ -375,8 +373,7 @@ describe('styling', () => {
         template: `<div [class]="['a', 'hello there', 'c']" [class.extra]="true"></div>`,
         standalone: true,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       const fixture = TestBed.createComponent(Cmp);
       fixture.detectChanges();
@@ -386,12 +383,10 @@ describe('styling', () => {
 
     it('should ignore a string containing spaces in a class object literal binding', () => {
       @Component({
-        template:
-            `<div [class]="{a: true, 'hello there': true, c: true}" [class.extra]="true"></div>`,
+        template: `<div [class]="{a: true, 'hello there': true, c: true}" [class.extra]="true"></div>`,
         standalone: true,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       const fixture = TestBed.createComponent(Cmp);
       fixture.detectChanges();
@@ -404,8 +399,7 @@ describe('styling', () => {
         template: `<div [class]="['a', {foo: true}, 'c']" [class.extra]="true"></div>`,
         standalone: true,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       const fixture = TestBed.createComponent(Cmp);
       fixture.detectChanges();
@@ -418,8 +412,7 @@ describe('styling', () => {
         template: `<div [class]="['a', ['foo', 'bar'], 'c']" [class.extra]="true"></div>`,
         standalone: true,
       })
-      class Cmp {
-      }
+      class Cmp {}
 
       const fixture = TestBed.createComponent(Cmp);
       fixture.detectChanges();
@@ -433,10 +426,9 @@ describe('styling', () => {
       template: `
       <div class="s1" [class]=" 'd1' " dir-shadows-class-input></div>
       <div class="s2 {{'d2'}}" dir-shadows-class-input></div>
-      `
+      `,
     })
-    class Cmp {
-    }
+    class Cmp {}
 
     @Directive({selector: '[dir-shadows-class-input]'})
     class DirectiveShadowsClassInput {
@@ -470,10 +462,9 @@ describe('styling', () => {
       template: `
           <div class="s1" dir-shadows-class-input></div>
           <div class="s1" [class]=" 'd1' " dir-shadows-class-input></div>
-          `
+          `,
     })
-    class Cmp {
-    }
+    class Cmp {}
 
     @Directive({selector: '[dir-shadows-class-input]', host: {'class': 'DIRECTIVE'}})
     class DirectiveShadowsClassInput {
@@ -506,10 +497,9 @@ describe('styling', () => {
       template: `
           <div style="width: 1px;" dir-shadows-class-input></div>
           <div style="width: 1px;" [style]=" 'height:1px;' " dir-shadows-class-input></div>
-          `
+          `,
     })
-    class Cmp {
-    }
+    class Cmp {}
 
     @Directive({selector: '[dir-shadows-class-input]', host: {'style': 'color: red;'}})
     class DirectiveShadowsStyleInput {
@@ -537,59 +527,56 @@ describe('styling', () => {
     expect(divBinding.getAttribute('shadow-style')).toEqual('width: 1px; height:1px;');
   });
 
-  it('should bind [class] as input to directive when both static and falsy dynamic values are present',
-     () => {
-       @Component({
-         template: `
+  it('should bind [class] as input to directive when both static and falsy dynamic values are present', () => {
+    @Component({
+      template: `
                 <div class="s1" [class]="classBinding" dir-shadows-class-input></div>
-              `
-       })
-       class Cmp {
-         classBinding: any = undefined;
-       }
-
-       @Directive({selector: '[dir-shadows-class-input]'})
-       class DirectiveShadowsClassInput {
-         constructor(private elementRef: ElementRef) {}
-         @Input('class')
-         set klass(value: string) {
-           this.elementRef.nativeElement.setAttribute('shadow-class', value);
-         }
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp, DirectiveShadowsClassInput]});
-       const fixture = TestBed.createComponent(Cmp);
-       fixture.detectChanges();
-
-       const div = fixture.nativeElement.querySelector('div');
-       expect(div.className).toEqual('s1');
-       expect(div.getAttribute('shadow-class')).toEqual('s1');
-
-       fixture.componentInstance.classBinding = null;
-       fixture.detectChanges();
-       expect(div.className).toEqual('s1');
-       expect(div.getAttribute('shadow-class')).toEqual('s1');
-
-       fixture.componentInstance.classBinding = false;
-       fixture.detectChanges();
-       expect(div.className).toEqual('s1');
-       expect(div.getAttribute('shadow-class')).toEqual('s1');
-
-
-       fixture.componentInstance.classBinding = {toString: () => 'd1'};
-       fixture.detectChanges();
-       expect(div.className).toEqual('s1');
-       expect(div.getAttribute('shadow-class')).toEqual('s1 d1');
-     });
+              `,
+    })
+    class Cmp {
+      classBinding: any = undefined;
+    }
+
+    @Directive({selector: '[dir-shadows-class-input]'})
+    class DirectiveShadowsClassInput {
+      constructor(private elementRef: ElementRef) {}
+      @Input('class')
+      set klass(value: string) {
+        this.elementRef.nativeElement.setAttribute('shadow-class', value);
+      }
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp, DirectiveShadowsClassInput]});
+    const fixture = TestBed.createComponent(Cmp);
+    fixture.detectChanges();
+
+    const div = fixture.nativeElement.querySelector('div');
+    expect(div.className).toEqual('s1');
+    expect(div.getAttribute('shadow-class')).toEqual('s1');
+
+    fixture.componentInstance.classBinding = null;
+    fixture.detectChanges();
+    expect(div.className).toEqual('s1');
+    expect(div.getAttribute('shadow-class')).toEqual('s1');
+
+    fixture.componentInstance.classBinding = false;
+    fixture.detectChanges();
+    expect(div.className).toEqual('s1');
+    expect(div.getAttribute('shadow-class')).toEqual('s1');
+
+    fixture.componentInstance.classBinding = {toString: () => 'd1'};
+    fixture.detectChanges();
+    expect(div.className).toEqual('s1');
+    expect(div.getAttribute('shadow-class')).toEqual('s1 d1');
+  });
 
   it('should bind [style] as input to directive', () => {
     @Component({
       template: `
           <div style="color: red;" [style]=" 'width: 100px;' " dir-shadows-style-input></div>
-          `
+          `,
     })
-    class Cmp {
-    }
+    class Cmp {}
 
     @Directive({selector: '[dir-shadows-style-input]'})
     class DirectiveShadowsStyleInput {
@@ -611,12 +598,11 @@ describe('styling', () => {
 
   it('should prevent circular ExpressionChangedAfterItHasBeenCheckedError on shadow inputs', () => {
     @Component({template: `<div class="s1" dir-shadows-class-input></div>`})
-    class Cmp {
-    }
+    class Cmp {}
 
     @Directive({selector: '[dir-shadows-class-input]'})
     class DirectiveShadowsClassInput {
-      @Input('class') klass: string|undefined;
+      @Input('class') klass: string | undefined;
 
       @HostBinding('class')
       get hostClasses() {
@@ -638,11 +624,11 @@ describe('styling', () => {
       <div [id]="maybeThrow(id)">
         <span my-dir [class]="maybeThrow(klass)" [class.foo]="maybeThrow(foo)"></span>
       </div>
-      `
+      `,
     })
     class Cmp {
       id = 'throw_id';
-      klass: string|string[] = 'throw_klass';
+      klass: string | string[] = 'throw_klass';
       foo = `throw_foo`;
 
       maybeThrow(value: any) {
@@ -696,44 +682,41 @@ describe('styling', () => {
     expectClass(span).toEqual({BAR: true, foo: true, myDir: true});
   });
 
-  it('should render inline style and class attribute values on the element before a directive is instantiated',
-     () => {
-       @Component({
-         template: `
+  it('should render inline style and class attribute values on the element before a directive is instantiated', () => {
+    @Component({
+      template: `
         <div directive-expecting-styling style="width:200px" class="abc xyz"></div>
-      `
-       })
-       class Cmp {
-       }
-
-       @Directive({selector: '[directive-expecting-styling]'})
-       class DirectiveExpectingStyling {
-         constructor(elm: ElementRef) {
-           const native = elm.nativeElement;
-           native.setAttribute('data-captured-width', native.style.width);
-           native.setAttribute('data-captured-classes', native.className);
-         }
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp, DirectiveExpectingStyling]});
-       const fixture = TestBed.createComponent(Cmp);
-       fixture.detectChanges();
-
-       const element = fixture.nativeElement.querySelector('div');
-       expect(element.style.width).toEqual('200px');
-       expect(element.getAttribute('data-captured-width')).toEqual('200px');
-       expect(element.className.trim()).toEqual('abc xyz');
-       expect(element.getAttribute('data-captured-classes')).toEqual('abc xyz');
-     });
+      `,
+    })
+    class Cmp {}
+
+    @Directive({selector: '[directive-expecting-styling]'})
+    class DirectiveExpectingStyling {
+      constructor(elm: ElementRef) {
+        const native = elm.nativeElement;
+        native.setAttribute('data-captured-width', native.style.width);
+        native.setAttribute('data-captured-classes', native.className);
+      }
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp, DirectiveExpectingStyling]});
+    const fixture = TestBed.createComponent(Cmp);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement.querySelector('div');
+    expect(element.style.width).toEqual('200px');
+    expect(element.getAttribute('data-captured-width')).toEqual('200px');
+    expect(element.className.trim()).toEqual('abc xyz');
+    expect(element.getAttribute('data-captured-classes')).toEqual('abc xyz');
+  });
 
   it('should only render the same initial styling values once before a directive runs', () => {
     @Component({
       template: `
         <div directive-expecting-styling style="width:200px" class="abc"></div>
-      `
+      `,
     })
-    class Cmp {
-    }
+    class Cmp {}
 
     @Directive({selector: '[directive-expecting-styling]'})
     class DirectiveExpectingStyling {
@@ -753,60 +736,56 @@ describe('styling', () => {
     expect(element.classList.contains('abc')).toBeFalsy();
   });
 
-  it('should ensure that static classes are assigned to ng-container elements and picked up for content projection',
-     () => {
-       @Component({
-         template: `
+  it('should ensure that static classes are assigned to ng-container elements and picked up for content projection', () => {
+    @Component({
+      template: `
             <project>
               outer
               <ng-container class="inner">
                 inner
               </ng-container>
             </project>
-          `
-       })
-       class MyApp {
-       }
-
-       @Component({
-         selector: 'project',
-         template: `
+          `,
+    })
+    class MyApp {}
+
+    @Component({
+      selector: 'project',
+      template: `
             <div class="outer-area">
               <ng-content></ng-content>
             </div>
             <div class="inner-area">
               <ng-content select=".inner"></ng-content>
             </div>
-          `
-       })
-       class ProjectCmp {
-       }
-
-       TestBed.configureTestingModule({declarations: [MyApp, ProjectCmp]});
-       const fixture = TestBed.createComponent(MyApp);
-       const element = fixture.nativeElement;
-       fixture.detectChanges();
-
-       const inner = element.querySelector('.inner-area');
-       expect(inner.textContent.trim()).toEqual('inner');
-       const outer = element.querySelector('.outer-area');
-       expect(outer.textContent.trim()).toEqual('outer');
-     });
+          `,
+    })
+    class ProjectCmp {}
+
+    TestBed.configureTestingModule({declarations: [MyApp, ProjectCmp]});
+    const fixture = TestBed.createComponent(MyApp);
+    const element = fixture.nativeElement;
+    fixture.detectChanges();
+
+    const inner = element.querySelector('.inner-area');
+    expect(inner.textContent.trim()).toEqual('inner');
+    const outer = element.querySelector('.outer-area');
+    expect(outer.textContent.trim()).toEqual('outer');
+  });
 
   it('should render initial styling for repeated nodes that a component host', () => {
     @Component({
       selector: '[comp]',
       template: '',
     })
-    class Comp {
-    }
+    class Comp {}
 
     @Component({
       template: `
         <ng-template ngFor [ngForOf]="items" let-item>
           <p comp class="a">A</p>
         </ng-template>
-      `
+      `,
     })
     class App {
       items = [1, 2, 3];
@@ -823,8 +802,7 @@ describe('styling', () => {
 
   it('should do nothing for empty style bindings', () => {
     @Component({template: '<div [style.color]></div>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App]});
     const fixture = TestBed.createComponent(App);
@@ -835,8 +813,7 @@ describe('styling', () => {
 
   it('should do nothing for empty class bindings', () => {
     @Component({template: '<div [class.is-open]></div>'})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App]});
     const fixture = TestBed.createComponent(App);
@@ -1001,8 +978,7 @@ describe('styling', () => {
     }
 
     @Component({selector: 'app-comp', template: `<ng-template styleDir></ng-template>`})
-    class MyApp {
-    }
+    class MyApp {}
 
     TestBed.configureTestingModule({declarations: [MyApp, StyleDir]});
     TestBed.createComponent(MyApp).detectChanges();
@@ -1041,7 +1017,7 @@ describe('styling', () => {
         <div class="a{{one}}b{{two}}c"></div>
         <div class="a{{one}}b"></div>
         <div class="{{one}}"></div>
-      `
+      `,
     })
     class Cmp {
       one = '1';
@@ -1073,8 +1049,16 @@ describe('styling', () => {
     expect(divs[8].getAttribute('class')).toBe('a1b');
     expect(divs[9].getAttribute('class')).toBe('1');
 
-    instance.one = instance.two = instance.three = instance.four = instance.five = instance.six =
-        instance.seven = instance.eight = instance.nine = '';
+    instance.one =
+      instance.two =
+      instance.three =
+      instance.four =
+      instance.five =
+      instance.six =
+      instance.seven =
+      instance.eight =
+      instance.nine =
+        '';
     fixture.detectChanges();
 
     expect(divs[0].getAttribute('class')).toBe('abcdefghij');
@@ -1102,7 +1086,7 @@ describe('styling', () => {
         <div style="content: &quot;a{{one}}b{{two}}c&quot;"></div>
         <div style="content: &quot;a{{one}}b&quot;"></div>
         <div style="{{self}}"></div>
-      `
+      `,
     })
     class Cmp {
       self = 'content: "self"';
@@ -1135,8 +1119,17 @@ describe('styling', () => {
     expect(divs[8].style.getPropertyValue('content')).toBe('"a1b"');
     expect(divs[9].style.getPropertyValue('content')).toBe('"self"');
 
-    instance.one = instance.two = instance.three = instance.four = instance.five = instance.six =
-        instance.seven = instance.eight = instance.nine = instance.self = '';
+    instance.one =
+      instance.two =
+      instance.three =
+      instance.four =
+      instance.five =
+      instance.six =
+      instance.seven =
+      instance.eight =
+      instance.nine =
+      instance.self =
+        '';
     fixture.detectChanges();
 
     expect(divs[0].style.getPropertyValue('content')).toBe('"abcdefghij"');
@@ -1191,10 +1184,10 @@ describe('styling', () => {
         <div style.font-family="f{{one}}{{two}}"></div>
         <div style.font-family="f{{one}}"></div>
         <div style.width="{{singleBinding}}"></div>
-      `
+      `,
     })
     class Cmp {
-      singleBinding: string|null = '1337px';
+      singleBinding: string | null = '1337px';
       one = 1;
       two = 2;
       three = 3;
@@ -1225,8 +1218,16 @@ describe('styling', () => {
     expect(divs[9].style.width).toBe('1337px');
 
     instance.singleBinding = null;
-    instance.one = instance.two = instance.three = instance.four = instance.five = instance.six =
-        instance.seven = instance.eight = instance.nine = 1;
+    instance.one =
+      instance.two =
+      instance.three =
+      instance.four =
+      instance.five =
+      instance.six =
+      instance.seven =
+      instance.eight =
+      instance.nine =
+        1;
     fixture.detectChanges();
 
     expect(divs[0].style.fontFamily).toBe('f111111111');
@@ -1262,107 +1263,105 @@ describe('styling', () => {
     expect(div.style.width).toBe('2667px');
   });
 
-  it('should not write to a `class` input binding in the event that there is no static class value',
-     () => {
-       let capturedClassBindingCount = 0;
-       let capturedClassBindingValue: string|null|undefined = undefined;
-       let capturedMyClassBindingCount = 0;
-       let capturedMyClassBindingValue: string|null|undefined = undefined;
-
-       @Component({template: '<div [class]="c" [my-class-dir]="x"></div>'})
-       class Cmp {
-         c: any = null;
-         x = 'foo';
-       }
-
-       @Directive({selector: '[my-class-dir]'})
-       class MyClassDir {
-         @Input('class')
-         set classVal(v: string) {
-           capturedClassBindingCount++;
-           capturedClassBindingValue = v;
-         }
-
-         @Input('my-class-dir')
-         set myClassVal(v: string) {
-           capturedMyClassBindingCount++;
-           capturedMyClassBindingValue = v;
-         }
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp, MyClassDir]});
-       const fixture = TestBed.createComponent(Cmp);
-       fixture.detectChanges();
-
-       expect(capturedClassBindingCount).toEqual(1);
-       expect(capturedClassBindingValue as any).toEqual(null);
-       expect(capturedMyClassBindingCount).toEqual(1);
-       expect(capturedMyClassBindingValue!).toEqual('foo');
-
-       fixture.componentInstance.c = 'dynamic-value';
-       fixture.detectChanges();
-
-       expect(capturedClassBindingCount).toEqual(2);
-       expect(capturedClassBindingValue!).toEqual('dynamic-value');
-       expect(capturedMyClassBindingCount).toEqual(1);
-       expect(capturedMyClassBindingValue!).toEqual('foo');
-
-       fixture.componentInstance.c = null;
-       fixture.detectChanges();
-
-       expect(capturedClassBindingCount).toEqual(3);
-       expect(capturedClassBindingValue as any).toEqual(null);
-       expect(capturedMyClassBindingCount).toEqual(1);
-       expect(capturedMyClassBindingValue!).toEqual('foo');
-
-       fixture.componentInstance.c = '';
-       fixture.detectChanges();
-
-       expect(capturedClassBindingCount).toEqual(4);
-       expect(capturedClassBindingValue as any).toEqual('');
-       expect(capturedMyClassBindingCount).toEqual(1);
-       expect(capturedMyClassBindingValue!).toEqual('foo');
-     });
-
-  it('should write to [class] binding during `update` mode if there is an instantiation-level value',
-     () => {
-       let capturedClassBindingCount = 0;
-       let capturedClassBindingValue: string|null|undefined = undefined;
-
-       @Component({template: '<div [class]="c" my-class-dir></div>'})
-       class Cmp {
-         c: any = 'bar';
-       }
-
-       @Directive({selector: '[my-class-dir]'})
-       class MyClassDir {
-         @Input('class')
-         set classVal(v: string) {
-           capturedClassBindingCount++;
-           capturedClassBindingValue = v;
-         }
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp, MyClassDir]});
-       const fixture = TestBed.createComponent(Cmp);
-       expect(capturedClassBindingCount).toEqual(0);
-       fixture.detectChanges();
-
-       expect(capturedClassBindingCount).toEqual(1);
-       expect(capturedClassBindingValue as any).toEqual('bar');
-
-       fixture.componentInstance.c = 'dynamic-bar';
-       fixture.detectChanges();
-
-       expect(capturedClassBindingCount).toEqual(2);
-       expect(capturedClassBindingValue!).toEqual('dynamic-bar');
-     });
+  it('should not write to a `class` input binding in the event that there is no static class value', () => {
+    let capturedClassBindingCount = 0;
+    let capturedClassBindingValue: string | null | undefined = undefined;
+    let capturedMyClassBindingCount = 0;
+    let capturedMyClassBindingValue: string | null | undefined = undefined;
+
+    @Component({template: '<div [class]="c" [my-class-dir]="x"></div>'})
+    class Cmp {
+      c: any = null;
+      x = 'foo';
+    }
+
+    @Directive({selector: '[my-class-dir]'})
+    class MyClassDir {
+      @Input('class')
+      set classVal(v: string) {
+        capturedClassBindingCount++;
+        capturedClassBindingValue = v;
+      }
+
+      @Input('my-class-dir')
+      set myClassVal(v: string) {
+        capturedMyClassBindingCount++;
+        capturedMyClassBindingValue = v;
+      }
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp, MyClassDir]});
+    const fixture = TestBed.createComponent(Cmp);
+    fixture.detectChanges();
+
+    expect(capturedClassBindingCount).toEqual(1);
+    expect(capturedClassBindingValue as any).toEqual(null);
+    expect(capturedMyClassBindingCount).toEqual(1);
+    expect(capturedMyClassBindingValue!).toEqual('foo');
+
+    fixture.componentInstance.c = 'dynamic-value';
+    fixture.detectChanges();
+
+    expect(capturedClassBindingCount).toEqual(2);
+    expect(capturedClassBindingValue!).toEqual('dynamic-value');
+    expect(capturedMyClassBindingCount).toEqual(1);
+    expect(capturedMyClassBindingValue!).toEqual('foo');
+
+    fixture.componentInstance.c = null;
+    fixture.detectChanges();
+
+    expect(capturedClassBindingCount).toEqual(3);
+    expect(capturedClassBindingValue as any).toEqual(null);
+    expect(capturedMyClassBindingCount).toEqual(1);
+    expect(capturedMyClassBindingValue!).toEqual('foo');
+
+    fixture.componentInstance.c = '';
+    fixture.detectChanges();
+
+    expect(capturedClassBindingCount).toEqual(4);
+    expect(capturedClassBindingValue as any).toEqual('');
+    expect(capturedMyClassBindingCount).toEqual(1);
+    expect(capturedMyClassBindingValue!).toEqual('foo');
+  });
+
+  it('should write to [class] binding during `update` mode if there is an instantiation-level value', () => {
+    let capturedClassBindingCount = 0;
+    let capturedClassBindingValue: string | null | undefined = undefined;
+
+    @Component({template: '<div [class]="c" my-class-dir></div>'})
+    class Cmp {
+      c: any = 'bar';
+    }
+
+    @Directive({selector: '[my-class-dir]'})
+    class MyClassDir {
+      @Input('class')
+      set classVal(v: string) {
+        capturedClassBindingCount++;
+        capturedClassBindingValue = v;
+      }
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp, MyClassDir]});
+    const fixture = TestBed.createComponent(Cmp);
+    expect(capturedClassBindingCount).toEqual(0);
+    fixture.detectChanges();
+
+    expect(capturedClassBindingCount).toEqual(1);
+    expect(capturedClassBindingValue as any).toEqual('bar');
+
+    fixture.componentInstance.c = 'dynamic-bar';
+    fixture.detectChanges();
+
+    expect(capturedClassBindingCount).toEqual(2);
+    expect(capturedClassBindingValue!).toEqual('dynamic-bar');
+  });
 
   it('should write to a `class` input binding if there is a static class value', () => {
     let capturedClassBindingCount = 0;
-    let capturedClassBindingValue: string|null = null;
+    let capturedClassBindingValue: string | null = null;
     let capturedMyClassBindingCount = 0;
-    let capturedMyClassBindingValue: string|null = null;
+    let capturedMyClassBindingValue: string | null = null;
 
     @Component({template: '<div class="static-val" [my-class-dir]="x"></div>'})
     class Cmp {
@@ -1405,8 +1404,7 @@ describe('styling', () => {
     @Component({
       template: `<comp [className]="'my-className'"></comp>`,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [Comp, App]});
     const fixture = TestBed.createComponent(App);
@@ -1426,8 +1424,7 @@ describe('styling', () => {
     @Component({
       template: `<comp class="static" [class]="'my-className'"></comp>`,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [Comp, App]});
     const fixture = TestBed.createComponent(App);
@@ -1435,92 +1432,87 @@ describe('styling', () => {
     expect(fixture.debugElement.nativeElement.firstChild.innerHTML).toBe('static my-className');
   });
 
-  it('should write to a `class` input binding if there is a static class value and there is a binding value',
-     () => {
-       let capturedClassBindingCount = 0;
-       let capturedClassBindingValue: string|null = null;
-       let capturedMyClassBindingCount = 0;
-       let capturedMyClassBindingValue: string|null = null;
-
-       @Component({template: '<div class="static-val" [class]="c" [my-class-dir]="x"></div>'})
-       class Cmp {
-         c: any = null;
-         x: any = 'foo';
-       }
-
-       @Directive({selector: '[my-class-dir]'})
-       class MyClassDir {
-         @Input('class')
-         set classVal(v: string) {
-           capturedClassBindingCount++;
-           capturedClassBindingValue = v;
-         }
-
-         @Input('my-class-dir')
-         set myClassVal(v: string) {
-           capturedMyClassBindingCount++;
-           capturedMyClassBindingValue = v;
-         }
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp, MyClassDir]});
-       const fixture = TestBed.createComponent(Cmp);
-       fixture.detectChanges();
-
-       expect(capturedClassBindingCount)
-           .toEqual(
-               2
-               // '2' is not ideal as '1' would be preferred.
-               // The reason for two writes is that one is for the  static
-               // `class="static-val"` and one for `[class]="c"`. This means that
-               // `class="static-val"` is written during the create block which is not ideal.
-               // To do this correctly we would have to delay the `class="static-val"` until
-               // the update block, but that would be expensive since it would require that we
-               // would check if we possibly have this situation on every `advance()`
-               // instruction. We don't think this is worth it, and we are just going to live
-               // with this.
-           );
-       expect(capturedClassBindingValue!).toEqual('static-val');
-       expect(capturedMyClassBindingCount).toEqual(1);
-       expect(capturedMyClassBindingValue!).toEqual('foo');
-
-       capturedClassBindingCount = 0;
-       fixture.componentInstance.c = 'dynamic-val';
-       fixture.detectChanges();
-
-       expect(capturedClassBindingCount).toEqual(1);
-       expect(capturedClassBindingValue!).toEqual('static-val dynamic-val');
-       expect(capturedMyClassBindingCount).toEqual(1);
-       expect(capturedMyClassBindingValue!).toEqual('foo');
-     });
-
-  it('should allow multiple directives to set dynamic and static classes independent of one another',
-     () => {
-       @Component({
-         template: `
+  it('should write to a `class` input binding if there is a static class value and there is a binding value', () => {
+    let capturedClassBindingCount = 0;
+    let capturedClassBindingValue: string | null = null;
+    let capturedMyClassBindingCount = 0;
+    let capturedMyClassBindingValue: string | null = null;
+
+    @Component({template: '<div class="static-val" [class]="c" [my-class-dir]="x"></div>'})
+    class Cmp {
+      c: any = null;
+      x: any = 'foo';
+    }
+
+    @Directive({selector: '[my-class-dir]'})
+    class MyClassDir {
+      @Input('class')
+      set classVal(v: string) {
+        capturedClassBindingCount++;
+        capturedClassBindingValue = v;
+      }
+
+      @Input('my-class-dir')
+      set myClassVal(v: string) {
+        capturedMyClassBindingCount++;
+        capturedMyClassBindingValue = v;
+      }
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp, MyClassDir]});
+    const fixture = TestBed.createComponent(Cmp);
+    fixture.detectChanges();
+
+    expect(capturedClassBindingCount).toEqual(
+      2,
+      // '2' is not ideal as '1' would be preferred.
+      // The reason for two writes is that one is for the  static
+      // `class="static-val"` and one for `[class]="c"`. This means that
+      // `class="static-val"` is written during the create block which is not ideal.
+      // To do this correctly we would have to delay the `class="static-val"` until
+      // the update block, but that would be expensive since it would require that we
+      // would check if we possibly have this situation on every `advance()`
+      // instruction. We don't think this is worth it, and we are just going to live
+      // with this.
+    );
+    expect(capturedClassBindingValue!).toEqual('static-val');
+    expect(capturedMyClassBindingCount).toEqual(1);
+    expect(capturedMyClassBindingValue!).toEqual('foo');
+
+    capturedClassBindingCount = 0;
+    fixture.componentInstance.c = 'dynamic-val';
+    fixture.detectChanges();
+
+    expect(capturedClassBindingCount).toEqual(1);
+    expect(capturedClassBindingValue!).toEqual('static-val dynamic-val');
+    expect(capturedMyClassBindingCount).toEqual(1);
+    expect(capturedMyClassBindingValue!).toEqual('foo');
+  });
+
+  it('should allow multiple directives to set dynamic and static classes independent of one another', () => {
+    @Component({
+      template: `
         <div dir-one dir-two></div>
-      `
-       })
-       class Cmp {
-       }
+      `,
+    })
+    class Cmp {}
 
-       @Directive({selector: '[dir-one]', host: {'[class.dir-one]': 'dirOneExp'}})
-       class DirOne {
-         dirOneExp = true;
-       }
+    @Directive({selector: '[dir-one]', host: {'[class.dir-one]': 'dirOneExp'}})
+    class DirOne {
+      dirOneExp = true;
+    }
 
-       @Directive({selector: '[dir-two]', host: {'class': 'dir-two'}})
-       class DirTwo {
-       }
+    @Directive({selector: '[dir-two]', host: {'class': 'dir-two'}})
+    class DirTwo {}
 
-       TestBed.configureTestingModule({declarations: [Cmp, DirOne, DirTwo]});
-       const fixture = TestBed.createComponent(Cmp);
-       fixture.detectChanges();
+    TestBed.configureTestingModule({declarations: [Cmp, DirOne, DirTwo]});
+    const fixture = TestBed.createComponent(Cmp);
+    fixture.detectChanges();
 
-       const element = fixture.nativeElement.querySelector('div');
-       expect(element.classList.contains('dir-one')).toBeTruthy();
-       expect(element.classList.contains('dir-two')).toBeTruthy();
-     });
+    const element = fixture.nativeElement.querySelector('div');
+    expect(element.classList.contains('dir-one')).toBeTruthy();
+    expect(element.classList.contains('dir-two')).toBeTruthy();
+  });
 
   it('should not write empty style values to the DOM', () => {
     @Component({
@@ -1530,10 +1522,9 @@ describe('styling', () => {
             [style.--bg-color]="undefined"
             [style.margin]="''"
             [style.font-size]="'   '"></div>
-        `
+        `,
     })
-    class Cmp {
-    }
+    class Cmp {}
 
     TestBed.configureTestingModule({declarations: [Cmp]});
     const fixture = TestBed.createComponent(Cmp);
@@ -1549,8 +1540,7 @@ describe('styling', () => {
     // be found by DI when ChildDir is instantiated.
     it('should not overwrite other directive info when using NgClass', () => {
       @Directive({selector: '[test-dir]'})
-      class TestDir {
-      }
+      class TestDir {}
 
       @Directive({selector: '[child-dir]'})
       class ChildDir {
@@ -1563,7 +1553,7 @@ describe('styling', () => {
           <div class="my-class" [ngClass]="classMap" test-dir>
             <div *ngIf="showing" child-dir>Hello</div>
           </div>
-        `
+        `,
       })
       class AppComponent {
         classMap = {'with-button': true};
@@ -1629,58 +1619,57 @@ describe('styling', () => {
     expect(classList.contains('two')).toBe(true);
   });
 
-  it('should apply single property styles/classes to the element and default to any static styling values',
-     () => {
-       @Component({
-         template: `
+  it('should apply single property styles/classes to the element and default to any static styling values', () => {
+    @Component({
+      template: `
         <div [style.width]="w"
              [style.height]="h"
              [style.opacity]="o"
              style="width:200px; height:200px;"
              [class.abc]="abc"
              [class.xyz]="xyz"></div>
-      `
-       })
-       class Cmp {
-         w: string|null|undefined = '100px';
-         h: string|null|undefined = '100px';
-         o: string|null|undefined = '0.5';
-         abc = true;
-         xyz = false;
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp]});
-       const fixture = TestBed.createComponent(Cmp);
-       fixture.detectChanges();
-
-       const element = fixture.nativeElement.querySelector('div');
-       expect(element.style.width).toEqual('100px');
-       expect(element.style.height).toEqual('100px');
-       expect(element.style.opacity).toEqual('0.5');
-       expect(element.classList.contains('abc')).toBeTruthy();
-       expect(element.classList.contains('xyz')).toBeFalsy();
-
-       fixture.componentInstance.w = undefined;
-       fixture.componentInstance.h = undefined;
-       fixture.componentInstance.o = undefined;
-       fixture.componentInstance.abc = false;
-       fixture.componentInstance.xyz = true;
-       fixture.detectChanges();
-
-       expect(element.style.width).toEqual('200px');
-       expect(element.style.height).toEqual('200px');
-       expect(element.style.opacity).toBeFalsy();
-       expect(element.classList.contains('abc')).toBeFalsy();
-       expect(element.classList.contains('xyz')).toBeTruthy();
-
-       fixture.componentInstance.w = null;
-       fixture.componentInstance.h = null;
-       fixture.componentInstance.o = null;
-       fixture.detectChanges();
-       expect(element.style.width).toBeFalsy();
-       expect(element.style.height).toBeFalsy();
-       expect(element.style.opacity).toBeFalsy();
-     });
+      `,
+    })
+    class Cmp {
+      w: string | null | undefined = '100px';
+      h: string | null | undefined = '100px';
+      o: string | null | undefined = '0.5';
+      abc = true;
+      xyz = false;
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp]});
+    const fixture = TestBed.createComponent(Cmp);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement.querySelector('div');
+    expect(element.style.width).toEqual('100px');
+    expect(element.style.height).toEqual('100px');
+    expect(element.style.opacity).toEqual('0.5');
+    expect(element.classList.contains('abc')).toBeTruthy();
+    expect(element.classList.contains('xyz')).toBeFalsy();
+
+    fixture.componentInstance.w = undefined;
+    fixture.componentInstance.h = undefined;
+    fixture.componentInstance.o = undefined;
+    fixture.componentInstance.abc = false;
+    fixture.componentInstance.xyz = true;
+    fixture.detectChanges();
+
+    expect(element.style.width).toEqual('200px');
+    expect(element.style.height).toEqual('200px');
+    expect(element.style.opacity).toBeFalsy();
+    expect(element.classList.contains('abc')).toBeFalsy();
+    expect(element.classList.contains('xyz')).toBeTruthy();
+
+    fixture.componentInstance.w = null;
+    fixture.componentInstance.h = null;
+    fixture.componentInstance.o = null;
+    fixture.detectChanges();
+    expect(element.style.width).toBeFalsy();
+    expect(element.style.height).toBeFalsy();
+    expect(element.style.opacity).toBeFalsy();
+  });
 
   it('should apply single style/class across the template and directive host bindings', () => {
     @Directive({selector: '[dir-that-sets-width]'})
@@ -1698,16 +1687,17 @@ describe('styling', () => {
         <div [style.width]="w0"
              [dir-that-sets-width]="w1"
              [another-dir-that-sets-width]="w2">
-      `
+      `,
     })
     class Cmp {
-      w0: string|null|undefined = null;
-      w1: string|null|undefined = null;
-      w2: string|null|undefined = null;
+      w0: string | null | undefined = null;
+      w1: string | null | undefined = null;
+      w2: string | null | undefined = null;
     }
 
-    TestBed.configureTestingModule(
-        {declarations: [Cmp, DirThatSetsWidthDirective, AnotherDirThatSetsWidthDirective]});
+    TestBed.configureTestingModule({
+      declarations: [Cmp, DirThatSetsWidthDirective, AnotherDirThatSetsWidthDirective],
+    });
     const fixture = TestBed.createComponent(Cmp);
     fixture.componentInstance.w0 = '100px';
     fixture.componentInstance.w1 = '200px';
@@ -1744,136 +1734,138 @@ describe('styling', () => {
     expect(element.style.width).toEqual('600px');
   });
 
-  it('should only run stylingFlush once when there are no collisions between styling properties',
-     () => {
-       @Directive({selector: '[dir-with-styling]'})
-       class DirWithStyling {
-         @HostBinding('style.font-size') public fontSize = '100px';
-       }
+  it('should only run stylingFlush once when there are no collisions between styling properties', () => {
+    @Directive({selector: '[dir-with-styling]'})
+    class DirWithStyling {
+      @HostBinding('style.font-size') public fontSize = '100px';
+    }
 
-       @Component({selector: 'comp-with-styling'})
-       class CompWithStyling {
-         @HostBinding('style.width') public width = '900px';
+    @Component({selector: 'comp-with-styling'})
+    class CompWithStyling {
+      @HostBinding('style.width') public width = '900px';
 
-         @HostBinding('style.height') public height = '900px';
-       }
+      @HostBinding('style.height') public height = '900px';
+    }
 
-       @Component({
-         template: `
+    @Component({
+      template: `
         <comp-with-styling
           [style.opacity]="opacity"
           dir-with-styling>...</comp-with-styling>
-      `
-       })
-       class Cmp {
-         opacity: string|null = '0.5';
-         @ViewChild(CompWithStyling, {static: true}) compWithStyling: CompWithStyling|null = null;
-         @ViewChild(DirWithStyling, {static: true}) dirWithStyling: DirWithStyling|null = null;
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp, DirWithStyling, CompWithStyling]});
-       const fixture = TestBed.createComponent(Cmp);
-       fixture.detectChanges();
-
-       const component = fixture.componentInstance;
-       const element = fixture.nativeElement.querySelector('comp-with-styling');
-
-       expect(element.style.opacity).toEqual('0.5');
-       expect(element.style.width).toEqual('900px');
-       expect(element.style.height).toEqual('900px');
-       expect(element.style.fontSize).toEqual('100px');
-
-       // once for the template flush and again for the host bindings
-       expect(ngDevMode!.rendererSetStyle).toEqual(4);
-       ngDevModeResetPerfCounters();
-
-       component.opacity = '0.6';
-       component.compWithStyling!.height = '100px';
-       component.compWithStyling!.width = '100px';
-       component.dirWithStyling!.fontSize = '50px';
-       fixture.detectChanges();
-
-       expect(element.style.opacity).toEqual('0.6');
-       expect(element.style.width).toEqual('100px');
-       expect(element.style.height).toEqual('100px');
-       expect(element.style.fontSize).toEqual('50px');
-
-       // once for the template flush and again for the host bindings
-       expect(ngDevMode!.rendererSetStyle).toEqual(4);
-     });
-
-  it('should combine all styling across the template, directive and component host bindings',
-     () => {
-       @Directive({selector: '[dir-with-styling]'})
-       class DirWithStyling {
-         @HostBinding('style.color') public color = 'red';
-
-         @HostBinding('style.font-size') public fontSize = '100px';
-
-         @HostBinding('class.dir') public dirClass = true;
-       }
-
-       @Component({selector: 'comp-with-styling'})
-       class CompWithStyling {
-         @HostBinding('style.width') public width = '900px';
-
-         @HostBinding('style.height') public height = '900px';
-
-         @HostBinding('class.comp') public compClass = true;
-       }
-
-       @Component({
-         template: `
+      `,
+    })
+    class Cmp {
+      opacity: string | null = '0.5';
+      @ViewChild(CompWithStyling, {static: true}) compWithStyling: CompWithStyling | null = null;
+      @ViewChild(DirWithStyling, {static: true}) dirWithStyling: DirWithStyling | null = null;
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp, DirWithStyling, CompWithStyling]});
+    const fixture = TestBed.createComponent(Cmp);
+    fixture.detectChanges();
+
+    const component = fixture.componentInstance;
+    const element = fixture.nativeElement.querySelector('comp-with-styling');
+
+    expect(element.style.opacity).toEqual('0.5');
+    expect(element.style.width).toEqual('900px');
+    expect(element.style.height).toEqual('900px');
+    expect(element.style.fontSize).toEqual('100px');
+
+    // once for the template flush and again for the host bindings
+    expect(ngDevMode!.rendererSetStyle).toEqual(4);
+    ngDevModeResetPerfCounters();
+
+    component.opacity = '0.6';
+    component.compWithStyling!.height = '100px';
+    component.compWithStyling!.width = '100px';
+    component.dirWithStyling!.fontSize = '50px';
+    fixture.detectChanges();
+
+    expect(element.style.opacity).toEqual('0.6');
+    expect(element.style.width).toEqual('100px');
+    expect(element.style.height).toEqual('100px');
+    expect(element.style.fontSize).toEqual('50px');
+
+    // once for the template flush and again for the host bindings
+    expect(ngDevMode!.rendererSetStyle).toEqual(4);
+  });
+
+  it('should combine all styling across the template, directive and component host bindings', () => {
+    @Directive({selector: '[dir-with-styling]'})
+    class DirWithStyling {
+      @HostBinding('style.color') public color = 'red';
+
+      @HostBinding('style.font-size') public fontSize = '100px';
+
+      @HostBinding('class.dir') public dirClass = true;
+    }
+
+    @Component({selector: 'comp-with-styling'})
+    class CompWithStyling {
+      @HostBinding('style.width') public width = '900px';
+
+      @HostBinding('style.height') public height = '900px';
+
+      @HostBinding('class.comp') public compClass = true;
+    }
+
+    @Component({
+      template: `
         <comp-with-styling
           [style.opacity]="opacity"
           [style.width]="width"
           [class.tpl]="tplClass"
           dir-with-styling>...</comp-with-styling>
-      `
-       })
-       class Cmp {
-         opacity: string|null|undefined = '0.5';
-         width: string|null|undefined = 'auto';
-         tplClass = true;
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp, DirWithStyling, CompWithStyling]});
-       const fixture = TestBed.createComponent(Cmp);
-       fixture.detectChanges();
-
-       const element = fixture.nativeElement.querySelector('comp-with-styling');
-
-       expectStyle(element).toEqual({
-         'color': 'red',
-         'font-size': '100px',
-         'height': '900px',
-         'opacity': '0.5',
-         'width': 'auto',
-       });
-       expectClass(element).toEqual({
-         'dir': true,
-         'comp': true,
-         'tpl': true,
-       });
-
-       fixture.componentInstance.width = undefined;
-       fixture.componentInstance.opacity = undefined;
-       fixture.componentInstance.tplClass = false;
-       fixture.detectChanges();
-
-       expectStyle(element).toEqual(
-           {'color': 'red', 'width': '900px', 'height': '900px', 'font-size': '100px'});
-       expectClass(element).toEqual({
-         'dir': true,
-         'comp': true,
-       });
-
-       fixture.componentInstance.width = null;
-       fixture.componentInstance.opacity = null;
-       fixture.detectChanges();
-
-       expectStyle(element).toEqual({'color': 'red', 'height': '900px', 'font-size': '100px'});
-     });
+      `,
+    })
+    class Cmp {
+      opacity: string | null | undefined = '0.5';
+      width: string | null | undefined = 'auto';
+      tplClass = true;
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp, DirWithStyling, CompWithStyling]});
+    const fixture = TestBed.createComponent(Cmp);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement.querySelector('comp-with-styling');
+
+    expectStyle(element).toEqual({
+      'color': 'red',
+      'font-size': '100px',
+      'height': '900px',
+      'opacity': '0.5',
+      'width': 'auto',
+    });
+    expectClass(element).toEqual({
+      'dir': true,
+      'comp': true,
+      'tpl': true,
+    });
+
+    fixture.componentInstance.width = undefined;
+    fixture.componentInstance.opacity = undefined;
+    fixture.componentInstance.tplClass = false;
+    fixture.detectChanges();
+
+    expectStyle(element).toEqual({
+      'color': 'red',
+      'width': '900px',
+      'height': '900px',
+      'font-size': '100px',
+    });
+    expectClass(element).toEqual({
+      'dir': true,
+      'comp': true,
+    });
+
+    fixture.componentInstance.width = null;
+    fixture.componentInstance.opacity = null;
+    fixture.detectChanges();
+
+    expectStyle(element).toEqual({'color': 'red', 'height': '900px', 'font-size': '100px'});
+  });
 
   it('should properly apply styling across sub and super class directive host bindings', () => {
     @Directive({selector: '[super-class-dir]'})
@@ -1889,10 +1881,10 @@ describe('styling', () => {
     @Component({
       template: `
           <div sub-class-dir [style.width]="w3"></div>
-      `
+      `,
     })
     class Cmp {
-      w3: string|null|undefined = '300px';
+      w3: string | null | undefined = '300px';
     }
 
     TestBed.configureTestingModule({declarations: [Cmp, SuperClassDirective, SubClassDirective]});
@@ -1918,23 +1910,22 @@ describe('styling', () => {
     });
   });
 
-
   it('should apply map-based style and class entries', () => {
     @Component({template: '<div [style]="s" [class]="c"></div>'})
     class Cmp {
-      public c: {[key: string]: any}|null = null;
+      public c: {[key: string]: any} | null = null;
       updateClasses(classes: string) {
         const c = this.c || (this.c = {});
-        Object.keys(this.c).forEach(className => {
+        Object.keys(this.c).forEach((className) => {
           c[className] = false;
         });
-        classes.split(/\s+/).forEach(className => {
+        classes.split(/\s+/).forEach((className) => {
           c[className] = true;
         });
       }
 
-      public s: {[key: string]: any}|null = null;
-      updateStyles(prop: string, value: string|number|null) {
+      public s: {[key: string]: any} | null = null;
+      updateStyles(prop: string, value: string | number | null) {
         const s = this.s || (this.s = {});
         Object.assign(s, {[prop]: value});
       }
@@ -1967,214 +1958,212 @@ describe('styling', () => {
     expectClass(element).toEqual({def: true});
   });
 
-  it('should resolve styling collisions across templates, directives and components for prop and map-based entries',
-     () => {
-       @Directive({selector: '[dir-that-sets-styling]'})
-       class DirThatSetsStyling {
-         @HostBinding('style') public map: any = {color: 'red', width: '777px'};
-       }
+  it('should resolve styling collisions across templates, directives and components for prop and map-based entries', () => {
+    @Directive({selector: '[dir-that-sets-styling]'})
+    class DirThatSetsStyling {
+      @HostBinding('style') public map: any = {color: 'red', width: '777px'};
+    }
 
-       @Component({
-         template: `
+    @Component({
+      template: `
         <div [style.width]="width"
              [style]="map"
              style="width:200px; font-size:99px"
              dir-that-sets-styling
              #dir
              [class.xyz]="xyz"></div>
-      `
-       })
-       class Cmp {
-         map: any = {width: '111px', opacity: '0.5'};
-         width: string|null|undefined = '555px';
-
-         @ViewChild('dir', {read: DirThatSetsStyling, static: true}) dir!: DirThatSetsStyling;
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp, DirThatSetsStyling]});
-       const fixture = TestBed.createComponent(Cmp);
-       const comp = fixture.componentInstance;
-       fixture.detectChanges();
-
-       const element = fixture.nativeElement.querySelector('div');
-       expectStyle(element).toEqual({
-         'width': '555px',
-         'color': 'red',
-         'font-size': '99px',
-         'opacity': '0.5',
-       });
-
-       comp.width = undefined;
-       fixture.detectChanges();
-
-       expectStyle(element).toEqual({
-         'width': '111px',
-         'color': 'red',
-         'font-size': '99px',
-         'opacity': '0.5',
-       });
-
-       comp.map = null;
-       fixture.detectChanges();
-
-       expectStyle(element).toEqual({
-         'width': '200px',
-         'color': 'red',
-         'font-size': '99px',
-       });
-
-       comp.dir.map = null;
-       fixture.detectChanges();
-
-       expectStyle(element).toEqual({
-         'width': '200px',
-         'font-size': '99px',
-       });
-     });
-
-  it('should only apply each styling property once per CD across templates, components, directives',
-     () => {
-       @Directive({selector: '[dir-that-sets-styling]', host: {'style': 'width:0px; height:0px'}})
-       class DirThatSetsStyling {
-         @HostBinding('style') public map: any = {width: '999px', height: '999px'};
-       }
-
-       @Component({
-         template: `
+      `,
+    })
+    class Cmp {
+      map: any = {width: '111px', opacity: '0.5'};
+      width: string | null | undefined = '555px';
+
+      @ViewChild('dir', {read: DirThatSetsStyling, static: true}) dir!: DirThatSetsStyling;
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp, DirThatSetsStyling]});
+    const fixture = TestBed.createComponent(Cmp);
+    const comp = fixture.componentInstance;
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement.querySelector('div');
+    expectStyle(element).toEqual({
+      'width': '555px',
+      'color': 'red',
+      'font-size': '99px',
+      'opacity': '0.5',
+    });
+
+    comp.width = undefined;
+    fixture.detectChanges();
+
+    expectStyle(element).toEqual({
+      'width': '111px',
+      'color': 'red',
+      'font-size': '99px',
+      'opacity': '0.5',
+    });
+
+    comp.map = null;
+    fixture.detectChanges();
+
+    expectStyle(element).toEqual({
+      'width': '200px',
+      'color': 'red',
+      'font-size': '99px',
+    });
+
+    comp.dir.map = null;
+    fixture.detectChanges();
+
+    expectStyle(element).toEqual({
+      'width': '200px',
+      'font-size': '99px',
+    });
+  });
+
+  it('should only apply each styling property once per CD across templates, components, directives', () => {
+    @Directive({selector: '[dir-that-sets-styling]', host: {'style': 'width:0px; height:0px'}})
+    class DirThatSetsStyling {
+      @HostBinding('style') public map: any = {width: '999px', height: '999px'};
+    }
+
+    @Component({
+      template: `
                 <div #dir
                   [style.width]="width"
                   [style.height]="height"
                   [style]="map"
                   dir-that-sets-styling></div>
-              `
-       })
-       class Cmp {
-         width: string|null|undefined = '111px';
-         height: string|null|undefined = '111px';
-
-         map: any = {width: '555px', height: '555px'};
-
-         @ViewChild('dir', {read: DirThatSetsStyling, static: true}) dir!: DirThatSetsStyling;
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp, DirThatSetsStyling]});
-       const fixture = TestBed.createComponent(Cmp);
-       const comp = fixture.componentInstance;
-
-       ngDevModeResetPerfCounters();
-       fixture.detectChanges();
-       const element = fixture.nativeElement.querySelector('div');
-
-       assertStyleCounters(4, 0);
-       assertStyle(element, 'width', '111px');
-       assertStyle(element, 'height', '111px');
-
-       comp.width = '222px';
-       ngDevModeResetPerfCounters();
-       fixture.detectChanges();
-
-       assertStyleCounters(1, 0);
-       assertStyle(element, 'width', '222px');
-       assertStyle(element, 'height', '111px');
-
-       comp.height = '222px';
-       ngDevModeResetPerfCounters();
-       fixture.detectChanges();
-
-       assertStyleCounters(1, 0);
-       assertStyle(element, 'width', '222px');
-       assertStyle(element, 'height', '222px');
-
-       comp.width = undefined;
-       ngDevModeResetPerfCounters();
-       fixture.detectChanges();
-
-       assertStyleCounters(1, 0);
-       assertStyle(element, 'width', '555px');
-       assertStyle(element, 'height', '222px');
-
-       comp.width = '123px';
-       comp.height = '123px';
-       ngDevModeResetPerfCounters();
-       fixture.detectChanges();
-
-       assertStyle(element, 'width', '123px');
-       assertStyle(element, 'height', '123px');
-
-       comp.map = {};
-       ngDevModeResetPerfCounters();
-       fixture.detectChanges();
-
-       // No change, hence no write
-       assertStyleCounters(0, 0);
-       assertStyle(element, 'width', '123px');
-       assertStyle(element, 'height', '123px');
-
-       comp.width = undefined;
-       ngDevModeResetPerfCounters();
-       fixture.detectChanges();
-
-       assertStyleCounters(1, 0);
-       assertStyle(element, 'width', '999px');
-       assertStyle(element, 'height', '123px');
-
-       comp.dir.map = null;
-       ngDevModeResetPerfCounters();
-       fixture.detectChanges();
-
-       // the width is only applied once
-       assertStyleCounters(1, 0);
-       assertStyle(element, 'width', '0px');
-       assertStyle(element, 'height', '123px');
-
-       comp.dir.map = {width: '1000px', height: '1100px', color: 'red'};
-       ngDevModeResetPerfCounters();
-       fixture.detectChanges();
-
-       assertStyleCounters(2, 0);
-       assertStyle(element, 'width', '1000px');
-       assertStyle(element, 'height', '123px');
-       assertStyle(element, 'color', 'red');
-
-       comp.height = undefined;
-       ngDevModeResetPerfCounters();
-       fixture.detectChanges();
-
-       // height gets applied twice and all other
-       // values get applied
-       assertStyleCounters(1, 0);
-       assertStyle(element, 'width', '1000px');
-       assertStyle(element, 'height', '1100px');
-       assertStyle(element, 'color', 'red');
-
-       comp.map = {color: 'blue', width: '2000px', opacity: '0.5'};
-       ngDevModeResetPerfCounters();
-       fixture.detectChanges();
-
-       assertStyleCounters(3, 0);
-       assertStyle(element, 'width', '2000px');
-       assertStyle(element, 'height', '1100px');
-       assertStyle(element, 'color', 'blue');
-       assertStyle(element, 'opacity', '0.5');
-
-       comp.map = {color: 'blue', width: '2000px'};
-       ngDevModeResetPerfCounters();
-       fixture.detectChanges();
-
-       // all four are applied because the map was altered
-       assertStyleCounters(0, 1);
-       assertStyle(element, 'width', '2000px');
-       assertStyle(element, 'height', '1100px');
-       assertStyle(element, 'color', 'blue');
-       assertStyle(element, 'opacity', '');
-     });
+              `,
+    })
+    class Cmp {
+      width: string | null | undefined = '111px';
+      height: string | null | undefined = '111px';
+
+      map: any = {width: '555px', height: '555px'};
+
+      @ViewChild('dir', {read: DirThatSetsStyling, static: true}) dir!: DirThatSetsStyling;
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp, DirThatSetsStyling]});
+    const fixture = TestBed.createComponent(Cmp);
+    const comp = fixture.componentInstance;
+
+    ngDevModeResetPerfCounters();
+    fixture.detectChanges();
+    const element = fixture.nativeElement.querySelector('div');
+
+    assertStyleCounters(4, 0);
+    assertStyle(element, 'width', '111px');
+    assertStyle(element, 'height', '111px');
+
+    comp.width = '222px';
+    ngDevModeResetPerfCounters();
+    fixture.detectChanges();
+
+    assertStyleCounters(1, 0);
+    assertStyle(element, 'width', '222px');
+    assertStyle(element, 'height', '111px');
+
+    comp.height = '222px';
+    ngDevModeResetPerfCounters();
+    fixture.detectChanges();
+
+    assertStyleCounters(1, 0);
+    assertStyle(element, 'width', '222px');
+    assertStyle(element, 'height', '222px');
+
+    comp.width = undefined;
+    ngDevModeResetPerfCounters();
+    fixture.detectChanges();
+
+    assertStyleCounters(1, 0);
+    assertStyle(element, 'width', '555px');
+    assertStyle(element, 'height', '222px');
+
+    comp.width = '123px';
+    comp.height = '123px';
+    ngDevModeResetPerfCounters();
+    fixture.detectChanges();
+
+    assertStyle(element, 'width', '123px');
+    assertStyle(element, 'height', '123px');
+
+    comp.map = {};
+    ngDevModeResetPerfCounters();
+    fixture.detectChanges();
+
+    // No change, hence no write
+    assertStyleCounters(0, 0);
+    assertStyle(element, 'width', '123px');
+    assertStyle(element, 'height', '123px');
+
+    comp.width = undefined;
+    ngDevModeResetPerfCounters();
+    fixture.detectChanges();
+
+    assertStyleCounters(1, 0);
+    assertStyle(element, 'width', '999px');
+    assertStyle(element, 'height', '123px');
+
+    comp.dir.map = null;
+    ngDevModeResetPerfCounters();
+    fixture.detectChanges();
+
+    // the width is only applied once
+    assertStyleCounters(1, 0);
+    assertStyle(element, 'width', '0px');
+    assertStyle(element, 'height', '123px');
+
+    comp.dir.map = {width: '1000px', height: '1100px', color: 'red'};
+    ngDevModeResetPerfCounters();
+    fixture.detectChanges();
+
+    assertStyleCounters(2, 0);
+    assertStyle(element, 'width', '1000px');
+    assertStyle(element, 'height', '123px');
+    assertStyle(element, 'color', 'red');
+
+    comp.height = undefined;
+    ngDevModeResetPerfCounters();
+    fixture.detectChanges();
+
+    // height gets applied twice and all other
+    // values get applied
+    assertStyleCounters(1, 0);
+    assertStyle(element, 'width', '1000px');
+    assertStyle(element, 'height', '1100px');
+    assertStyle(element, 'color', 'red');
+
+    comp.map = {color: 'blue', width: '2000px', opacity: '0.5'};
+    ngDevModeResetPerfCounters();
+    fixture.detectChanges();
+
+    assertStyleCounters(3, 0);
+    assertStyle(element, 'width', '2000px');
+    assertStyle(element, 'height', '1100px');
+    assertStyle(element, 'color', 'blue');
+    assertStyle(element, 'opacity', '0.5');
+
+    comp.map = {color: 'blue', width: '2000px'};
+    ngDevModeResetPerfCounters();
+    fixture.detectChanges();
+
+    // all four are applied because the map was altered
+    assertStyleCounters(0, 1);
+    assertStyle(element, 'width', '2000px');
+    assertStyle(element, 'height', '1100px');
+    assertStyle(element, 'color', 'blue');
+    assertStyle(element, 'opacity', '');
+  });
 
   it('should not sanitize style values before writing them', () => {
     @Component({
       template: `
                         <div [style.width]="widthExp"
                              [style.background-image]="bgImageExp"></div>
-                      `
+                      `,
     })
     class Cmp {
       widthExp = '';
@@ -2207,7 +2196,7 @@ describe('styling', () => {
       template: `
                     <div [style.width]="widthExp"
                          [style]="styleMapExp"></div>
-                  `
+                  `,
     })
     class Cmp {
       widthExp = '';
@@ -2228,7 +2217,7 @@ describe('styling', () => {
     // Prove that bindings work.
     comp.widthExp = '789px';
     comp.styleMapExp = {
-      'background-image': bypassSanitizationTrustStyle(comp.styleMapExp['background-image'])
+      'background-image': bypassSanitizationTrustStyle(comp.styleMapExp['background-image']),
     };
     fixture.detectChanges();
 
@@ -2241,11 +2230,11 @@ describe('styling', () => {
       template: `
             <div [style.width.px]="widthExp"
                  [style.height.em]="heightExp"></div>
-          `
+          `,
     })
     class Cmp {
-      widthExp: string|number|null = '';
-      heightExp: string|number|null = '';
+      widthExp: string | number | null = '';
+      heightExp: string | number | null = '';
     }
 
     TestBed.configureTestingModule({declarations: [Cmp]});
@@ -2373,7 +2362,7 @@ describe('styling', () => {
               [style]="map"
               dir-with-styling
               dir-with-styling-part2></div>
-      `
+      `,
     })
     class Cmp {
       map: any = null;
@@ -2401,7 +2390,7 @@ describe('styling', () => {
                   class="initial-class item-{{ item }}">
               {{ item }}
             </div>
-          `
+          `,
     })
     class Cmp {
       items = [1, 2, 3];
@@ -2417,7 +2406,11 @@ describe('styling', () => {
     }
 
     function getItemClasses(): string[] {
-      return getItemElements().map(e => e.className).sort().join(' ').split(' ');
+      return getItemElements()
+        .map((e) => e.className)
+        .sort()
+        .join(' ')
+        .split(' ');
     }
 
     expect(getItemElements().length).toEqual(3);
@@ -2446,50 +2439,46 @@ describe('styling', () => {
     ]);
   });
 
-  it('should create and update multiple class bindings across multiple elements in a template',
-     () => {
-       @Component({
-         template: `
+  it('should create and update multiple class bindings across multiple elements in a template', () => {
+    @Component({
+      template: `
             <header class="header">header</header>
             <div *ngFor="let item of items" class="item item-{{ item }}">
               {{ item }}
             </div>
             <footer class="footer">footer</footer>
-          `
-       })
-       class Cmp {
-         items = [1, 2, 3];
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp]});
-       const fixture = TestBed.createComponent(Cmp);
-       const comp = fixture.componentInstance;
-       fixture.detectChanges();
-
-       function getItemElements(): HTMLElement[] {
-         return [].slice.call(fixture.nativeElement.querySelectorAll('div'));
-       }
-
-       function getItemClasses(): string[] {
-         return getItemElements().map(e => e.className).sort().join(' ').split(' ');
-       }
-
-       const header = fixture.nativeElement.querySelector('header');
-       expect(header.classList.contains('header')).toBeTrue();
-
-       const footer = fixture.nativeElement.querySelector('footer');
-       expect(footer.classList.contains('footer')).toBeTrue();
-
-       expect(getItemElements().length).toEqual(3);
-       expect(getItemClasses()).toEqual([
-         'item',
-         'item-1',
-         'item',
-         'item-2',
-         'item',
-         'item-3',
-       ]);
-     });
+          `,
+    })
+    class Cmp {
+      items = [1, 2, 3];
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp]});
+    const fixture = TestBed.createComponent(Cmp);
+    const comp = fixture.componentInstance;
+    fixture.detectChanges();
+
+    function getItemElements(): HTMLElement[] {
+      return [].slice.call(fixture.nativeElement.querySelectorAll('div'));
+    }
+
+    function getItemClasses(): string[] {
+      return getItemElements()
+        .map((e) => e.className)
+        .sort()
+        .join(' ')
+        .split(' ');
+    }
+
+    const header = fixture.nativeElement.querySelector('header');
+    expect(header.classList.contains('header')).toBeTrue();
+
+    const footer = fixture.nativeElement.querySelector('footer');
+    expect(footer.classList.contains('footer')).toBeTrue();
+
+    expect(getItemElements().length).toEqual(3);
+    expect(getItemClasses()).toEqual(['item', 'item-1', 'item', 'item-2', 'item', 'item-3']);
+  });
 
   it('should understand multiple directives which contain initial classes', () => {
     @Directive({selector: 'dir-one'})
@@ -2507,10 +2496,9 @@ describe('styling', () => {
             <dir-one></dir-one>
             <div class="initial"></div>
             <dir-two></dir-two>
-          `
+          `,
     })
-    class Cmp {
-    }
+    class Cmp {}
 
     TestBed.configureTestingModule({declarations: [Cmp, DirOne, DirTwo]});
     const fixture = TestBed.createComponent(Cmp);
@@ -2525,43 +2513,42 @@ describe('styling', () => {
     expect(div.classList.contains('initial')).toBeTruthy();
   });
 
-  it('should evaluate styling across the template directives when there are multiple elements/sources of styling',
-     () => {
-       @Directive({selector: '[one]'})
-       class DirOne {
-         @HostBinding('class') public className = 'dir-one';
-       }
+  it('should evaluate styling across the template directives when there are multiple elements/sources of styling', () => {
+    @Directive({selector: '[one]'})
+    class DirOne {
+      @HostBinding('class') public className = 'dir-one';
+    }
 
-       @Directive({selector: '[two]'})
-       class DirTwo {
-         @HostBinding('class') public className = 'dir-two';
-       }
+    @Directive({selector: '[two]'})
+    class DirTwo {
+      @HostBinding('class') public className = 'dir-two';
+    }
 
-       @Component({
-         template: `
+    @Component({
+      template: `
                 <div class="a" [style.width.px]="w" one></div>
                 <div class="b" [style.height.px]="h" one two></div>
                 <div class="c" [style.color]="c" two></div>
-              `
-       })
-       class Cmp {
-         w = 100;
-         h = 200;
-         c = 'red';
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp, DirOne, DirTwo]});
-       const fixture = TestBed.createComponent(Cmp);
-       fixture.detectChanges();
-
-       const divA = fixture.nativeElement.querySelector('.a');
-       const divB = fixture.nativeElement.querySelector('.b');
-       const divC = fixture.nativeElement.querySelector('.c');
-
-       expect(divA.style.width).toEqual('100px');
-       expect(divB.style.height).toEqual('200px');
-       expect(divC.style.color).toEqual('red');
-     });
+              `,
+    })
+    class Cmp {
+      w = 100;
+      h = 200;
+      c = 'red';
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp, DirOne, DirTwo]});
+    const fixture = TestBed.createComponent(Cmp);
+    fixture.detectChanges();
+
+    const divA = fixture.nativeElement.querySelector('.a');
+    const divB = fixture.nativeElement.querySelector('.b');
+    const divC = fixture.nativeElement.querySelector('.c');
+
+    expect(divA.style.width).toEqual('100px');
+    expect(divB.style.height).toEqual('200px');
+    expect(divC.style.color).toEqual('red');
+  });
 
   it('should evaluate styling across the template and directives within embedded views', () => {
     @Directive({selector: '[some-dir-with-styling]'})
@@ -2585,7 +2572,7 @@ describe('styling', () => {
                 </div>
                 <section [style.width.px]="w"></section>
                 <p [style.height.px]="h"></p>
-              `
+              `,
     })
     class Cmp {
       items: any[] = [];
@@ -2614,7 +2601,7 @@ describe('styling', () => {
     expect(p.style['height']).toEqual('100px');
   });
 
-  it('should flush bindings even if any styling hasn\'t changed in a previous directive', () => {
+  it("should flush bindings even if any styling hasn't changed in a previous directive", () => {
     @Directive({selector: '[one]'})
     class DirOne {
       @HostBinding('style.width') w = '100px';
@@ -2659,7 +2646,7 @@ describe('styling', () => {
               [style.width]="w"
               style.height="{{ h }}"
               [style.opacity]="o"></div>
-          `
+          `,
     })
     class Cmp {
       w: any = null;
@@ -2694,7 +2681,7 @@ describe('styling', () => {
     @Component({
       template: `
             <div [ngClass]="c" [ngStyle]="s"></div>
-          `
+          `,
     })
     class Cmp {
       c: any = 'foo bar';
@@ -2715,7 +2702,7 @@ describe('styling', () => {
     @Component({
       template: `
         <div [ngStyle]="s"></div>
-      `
+      `,
     })
     class Cmp {
       s: any = {opacity: '1'};
@@ -2739,191 +2726,188 @@ describe('styling', () => {
     expect(div.style.opacity).toEqual('');
   });
 
-  it('should allow detectChanges to be run in a property change that causes additional styling to be rendered',
-     () => {
-       @Component({
-         selector: 'child',
-         template: `
+  it('should allow detectChanges to be run in a property change that causes additional styling to be rendered', () => {
+    @Component({
+      selector: 'child',
+      template: `
           <div [class.ready-child]="readyTpl"></div>
         `,
-       })
-       class ChildCmp {
-         readyTpl = false;
+    })
+    class ChildCmp {
+      readyTpl = false;
 
-         @HostBinding('class.ready-host') readyHost = false;
-       }
+      @HostBinding('class.ready-host') readyHost = false;
+    }
 
-       @Component({
-         selector: 'parent',
-         template: `
+    @Component({
+      selector: 'parent',
+      template: `
         <div>
           <div #template></div>
           <p>{{prop}}</p>
         </div>
       `,
-         host: {
-           '[style.color]': 'color',
-         },
-       })
-       class ParentCmp {
-         private _prop = '';
-
-         @ViewChild('template', {read: ViewContainerRef}) vcr: ViewContainerRef = null!;
-
-         private child: ComponentRef<ChildCmp> = null!;
-
-         @Input()
-         set prop(value: string) {
-           this._prop = value;
-           if (this.child && value === 'go') {
-             this.child.instance.readyHost = true;
-             this.child.instance.readyTpl = true;
-             this.child.changeDetectorRef.detectChanges();
-           }
-         }
-
-         get prop() {
-           return this._prop;
-         }
-
-         ngAfterViewInit() {
-           this.child = this.vcr.createComponent(ChildCmp);
-         }
-       }
-
-       @Component({
-         template: `<parent [prop]="prop"></parent>`,
-       })
-       class App {
-         prop = 'a';
-       }
-
-       TestBed.configureTestingModule({declarations: [App, ParentCmp, ChildCmp]});
-       const fixture = TestBed.createComponent(App);
-       fixture.detectChanges(false);
-
-       let readyHost = fixture.nativeElement.querySelector('.ready-host');
-       let readyChild = fixture.nativeElement.querySelector('.ready-child');
-
-       expect(readyHost).toBeFalsy();
-       expect(readyChild).toBeFalsy();
-
-       fixture.componentInstance.prop = 'go';
-       fixture.detectChanges(false);
-
-       readyHost = fixture.nativeElement.querySelector('.ready-host');
-       readyChild = fixture.nativeElement.querySelector('.ready-child');
-       expect(readyHost).toBeTruthy();
-       expect(readyChild).toBeTruthy();
-     });
-
-  it('should allow detectChanges to be run in a hook that causes additional styling to be rendered',
-     () => {
-       @Component({
-         selector: 'child',
-         template: `
+      host: {
+        '[style.color]': 'color',
+      },
+    })
+    class ParentCmp {
+      private _prop = '';
+
+      @ViewChild('template', {read: ViewContainerRef}) vcr: ViewContainerRef = null!;
+
+      private child: ComponentRef<ChildCmp> = null!;
+
+      @Input()
+      set prop(value: string) {
+        this._prop = value;
+        if (this.child && value === 'go') {
+          this.child.instance.readyHost = true;
+          this.child.instance.readyTpl = true;
+          this.child.changeDetectorRef.detectChanges();
+        }
+      }
+
+      get prop() {
+        return this._prop;
+      }
+
+      ngAfterViewInit() {
+        this.child = this.vcr.createComponent(ChildCmp);
+      }
+    }
+
+    @Component({
+      template: `<parent [prop]="prop"></parent>`,
+    })
+    class App {
+      prop = 'a';
+    }
+
+    TestBed.configureTestingModule({declarations: [App, ParentCmp, ChildCmp]});
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges(false);
+
+    let readyHost = fixture.nativeElement.querySelector('.ready-host');
+    let readyChild = fixture.nativeElement.querySelector('.ready-child');
+
+    expect(readyHost).toBeFalsy();
+    expect(readyChild).toBeFalsy();
+
+    fixture.componentInstance.prop = 'go';
+    fixture.detectChanges(false);
+
+    readyHost = fixture.nativeElement.querySelector('.ready-host');
+    readyChild = fixture.nativeElement.querySelector('.ready-child');
+    expect(readyHost).toBeTruthy();
+    expect(readyChild).toBeTruthy();
+  });
+
+  it('should allow detectChanges to be run in a hook that causes additional styling to be rendered', () => {
+    @Component({
+      selector: 'child',
+      template: `
           <div [class.ready-child]="readyTpl"></div>
         `,
-       })
-       class ChildCmp {
-         readyTpl = false;
+    })
+    class ChildCmp {
+      readyTpl = false;
 
-         @HostBinding('class.ready-host') readyHost = false;
-       }
+      @HostBinding('class.ready-host') readyHost = false;
+    }
 
-       @Component({
-         selector: 'parent',
-         template: `
+    @Component({
+      selector: 'parent',
+      template: `
           <div>
             <div #template></div>
             <p>{{prop}}</p>
           </div>
         `,
-       })
-       class ParentCmp {
-         updateChild = false;
-
-         @ViewChild('template', {read: ViewContainerRef}) vcr: ViewContainerRef = null!;
-
-         private child: ComponentRef<ChildCmp> = null!;
-
-         ngDoCheck() {
-           if (this.updateChild) {
-             this.child.instance.readyHost = true;
-             this.child.instance.readyTpl = true;
-             this.child.changeDetectorRef.detectChanges();
-           }
-         }
-
-         ngAfterViewInit() {
-           this.child = this.vcr.createComponent(ChildCmp);
-         }
-       }
-
-       @Component({
-         template: `<parent #parent></parent>`,
-       })
-       class App {
-         @ViewChild('parent', {static: true}) public parent: ParentCmp|null = null;
-       }
-
-       TestBed.configureTestingModule({declarations: [App, ParentCmp, ChildCmp]});
-       const fixture = TestBed.createComponent(App);
-       fixture.detectChanges(false);
-
-       let readyHost = fixture.nativeElement.querySelector('.ready-host');
-       let readyChild = fixture.nativeElement.querySelector('.ready-child');
-       expect(readyHost).toBeFalsy();
-       expect(readyChild).toBeFalsy();
-
-       const parent = fixture.componentInstance.parent!;
-       parent.updateChild = true;
-       fixture.detectChanges(false);
-
-       readyHost = fixture.nativeElement.querySelector('.ready-host');
-       readyChild = fixture.nativeElement.querySelector('.ready-child');
-       expect(readyHost).toBeTruthy();
-       expect(readyChild).toBeTruthy();
-     });
-
-  it('should allow various duplicate properties to be defined in various styling maps within the template and directive styling bindings',
-     () => {
-       @Component({
-         template: `
+    })
+    class ParentCmp {
+      updateChild = false;
+
+      @ViewChild('template', {read: ViewContainerRef}) vcr: ViewContainerRef = null!;
+
+      private child: ComponentRef<ChildCmp> = null!;
+
+      ngDoCheck() {
+        if (this.updateChild) {
+          this.child.instance.readyHost = true;
+          this.child.instance.readyTpl = true;
+          this.child.changeDetectorRef.detectChanges();
+        }
+      }
+
+      ngAfterViewInit() {
+        this.child = this.vcr.createComponent(ChildCmp);
+      }
+    }
+
+    @Component({
+      template: `<parent #parent></parent>`,
+    })
+    class App {
+      @ViewChild('parent', {static: true}) public parent: ParentCmp | null = null;
+    }
+
+    TestBed.configureTestingModule({declarations: [App, ParentCmp, ChildCmp]});
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges(false);
+
+    let readyHost = fixture.nativeElement.querySelector('.ready-host');
+    let readyChild = fixture.nativeElement.querySelector('.ready-child');
+    expect(readyHost).toBeFalsy();
+    expect(readyChild).toBeFalsy();
+
+    const parent = fixture.componentInstance.parent!;
+    parent.updateChild = true;
+    fixture.detectChanges(false);
+
+    readyHost = fixture.nativeElement.querySelector('.ready-host');
+    readyChild = fixture.nativeElement.querySelector('.ready-child');
+    expect(readyHost).toBeTruthy();
+    expect(readyChild).toBeTruthy();
+  });
+
+  it('should allow various duplicate properties to be defined in various styling maps within the template and directive styling bindings', () => {
+    @Component({
+      template: `
            <div [style.width]="w"
                 [style.height]="h"
                 [style]="s1"
                 [dir-with-styling]="s2">
-         `
-       })
-       class Cmp {
-         h = '100px';
-         w = '100px';
-         s1: any = {border: '10px solid black', width: '200px'};
-         s2: any = {border: '10px solid red', width: '300px'};
-       }
-
-       @Directive({selector: '[dir-with-styling]'})
-       class DirectiveExpectingStyling {
-         @Input('dir-with-styling') @HostBinding('style') public styles: any = null;
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp, DirectiveExpectingStyling]});
-       const fixture = TestBed.createComponent(Cmp);
-       fixture.detectChanges();
-
-       const element = fixture.nativeElement.querySelector('div');
-       expect(element.style.border).toEqual('10px solid black');
-       expect(element.style.width).toEqual('100px');
-       expect(element.style.height).toEqual('100px');
-
-       fixture.componentInstance.s1 = null;
-       fixture.detectChanges();
-
-       expect(element.style.border).toEqual('10px solid red');
-       expect(element.style.width).toEqual('100px');
-       expect(element.style.height).toEqual('100px');
-     });
+         `,
+    })
+    class Cmp {
+      h = '100px';
+      w = '100px';
+      s1: any = {border: '10px solid black', width: '200px'};
+      s2: any = {border: '10px solid red', width: '300px'};
+    }
+
+    @Directive({selector: '[dir-with-styling]'})
+    class DirectiveExpectingStyling {
+      @Input('dir-with-styling') @HostBinding('style') public styles: any = null;
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp, DirectiveExpectingStyling]});
+    const fixture = TestBed.createComponent(Cmp);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement.querySelector('div');
+    expect(element.style.border).toEqual('10px solid black');
+    expect(element.style.width).toEqual('100px');
+    expect(element.style.height).toEqual('100px');
+
+    fixture.componentInstance.s1 = null;
+    fixture.detectChanges();
+
+    expect(element.style.border).toEqual('10px solid red');
+    expect(element.style.width).toEqual('100px');
+    expect(element.style.height).toEqual('100px');
+  });
 
   it('should retrieve styles set via Renderer2', () => {
     let dirInstance: any;
@@ -2931,7 +2915,10 @@ describe('styling', () => {
       selector: '[dir]',
     })
     class Dir {
-      constructor(public elementRef: ElementRef, public renderer: Renderer2) {
+      constructor(
+        public elementRef: ElementRef,
+        public renderer: Renderer2,
+      ) {
         dirInstance = this;
       }
 
@@ -2943,8 +2930,7 @@ describe('styling', () => {
     }
 
     @Component({template: `<div dir></div>`})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({
       declarations: [App, Dir],
@@ -2964,14 +2950,16 @@ describe('styling', () => {
       selector: '[dir]',
     })
     class Dir {
-      constructor(public elementRef: ElementRef, public renderer: Renderer2) {
+      constructor(
+        public elementRef: ElementRef,
+        public renderer: Renderer2,
+      ) {
         dirInstance = this;
       }
     }
 
     @Component({template: `<div dir></div>`})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({
       declarations: [App, Dir],
@@ -3003,7 +2991,6 @@ describe('styling', () => {
         <div [style.background]="background"></div>
       `,
     })
-
     class AppComponent {
       isDisabled = false;
       background = 'orange';
@@ -3021,93 +3008,92 @@ describe('styling', () => {
     expect(span.classList).not.toContain('disabled');
   });
 
-  it('should not set classes when falsy value is passed while a sanitizer from host bindings is present',
-     () => {
-       @Directive({selector: '[blockStyles]'})
-       class StylesDirective {
-         @HostBinding('style.border') border = '1px solid red';
+  it('should not set classes when falsy value is passed while a sanitizer from host bindings is present', () => {
+    @Directive({selector: '[blockStyles]'})
+    class StylesDirective {
+      @HostBinding('style.border') border = '1px solid red';
 
-         @HostBinding('style.background') background = 'white';
-       }
+      @HostBinding('style.background') background = 'white';
+    }
 
-       @Component({
-         template: `<div class="container" [ngClass]="{disabled: isDisabled}" blockStyles></div>`,
-       })
-       class AppComponent {
-         isDisabled = false;
-       }
+    @Component({
+      template: `<div class="container" [ngClass]="{disabled: isDisabled}" blockStyles></div>`,
+    })
+    class AppComponent {
+      isDisabled = false;
+    }
 
-       TestBed.configureTestingModule({declarations: [AppComponent, StylesDirective]});
-       const fixture = TestBed.createComponent(AppComponent);
-       fixture.detectChanges();
+    TestBed.configureTestingModule({declarations: [AppComponent, StylesDirective]});
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
 
-       const div = fixture.nativeElement.querySelector('div');
-       expect(div.classList.contains('disabled')).toBe(false);
+    const div = fixture.nativeElement.querySelector('div');
+    expect(div.classList.contains('disabled')).toBe(false);
 
-       // The issue we're testing for happens after the second change detection.
-       fixture.detectChanges();
-       expect(div.classList.contains('disabled')).toBe(false);
-     });
+    // The issue we're testing for happens after the second change detection.
+    fixture.detectChanges();
+    expect(div.classList.contains('disabled')).toBe(false);
+  });
 
-  it('should throw an error if a prop-based style/class binding value is changed during checkNoChanges',
-     () => {
-       @Component({
-         template: `
+  it('should throw an error if a prop-based style/class binding value is changed during checkNoChanges', () => {
+    @Component({
+      template: `
         <div [style.color]="color" [class.foo]="fooClass"></div>
-      `
-       })
-       class Cmp {
-         color = 'red';
-         fooClass = true;
-
-         ngAfterViewInit() {
-           this.color = 'blue';
-           this.fooClass = false;
-         }
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp]});
-       const fixture = TestBed.createComponent(Cmp);
-
-       expect(() => {
-         fixture.detectChanges();
-       }).toThrowError(/ExpressionChangedAfterItHasBeenCheckedError/);
-     });
-
-  it('should throw an error if a map-based style/class binding value is changed during checkNoChanges',
-     () => {
-       @Component({
-         template: `
+      `,
+    })
+    class Cmp {
+      color = 'red';
+      fooClass = true;
+
+      ngAfterViewInit() {
+        this.color = 'blue';
+        this.fooClass = false;
+      }
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp]});
+    const fixture = TestBed.createComponent(Cmp);
+
+    expect(() => {
+      fixture.detectChanges();
+    }).toThrowError(/ExpressionChangedAfterItHasBeenCheckedError/);
+  });
+
+  it('should throw an error if a map-based style/class binding value is changed during checkNoChanges', () => {
+    @Component({
+      template: `
                 <div [style]="style" [class]="klass"></div>
-              `
-       })
-       class Cmp {
-         style: any = 'width: 100px';
-         klass: any = 'foo';
-
-         ngAfterViewInit() {
-           this.style = 'height: 200px';
-           this.klass = 'bar';
-         }
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp]});
-       const fixture = TestBed.createComponent(Cmp);
-
-       expect(() => {
-         fixture.detectChanges();
-       }).toThrowError(/ExpressionChangedAfterItHasBeenCheckedError/);
-     });
+              `,
+    })
+    class Cmp {
+      style: any = 'width: 100px';
+      klass: any = 'foo';
+
+      ngAfterViewInit() {
+        this.style = 'height: 200px';
+        this.klass = 'bar';
+      }
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp]});
+    const fixture = TestBed.createComponent(Cmp);
+
+    expect(() => {
+      fixture.detectChanges();
+    }).toThrowError(/ExpressionChangedAfterItHasBeenCheckedError/);
+  });
 
   it('should properly merge class interpolation with class-based directives', () => {
-    @Component(
-        {template: `<div class="zero {{one}}" [class.two]="true" [ngClass]="'three'"></div>`})
+    @Component({
+      template: `<div class="zero {{one}}" [class.two]="true" [ngClass]="'three'"></div>`,
+    })
     class MyComp {
       one = 'one';
     }
 
-    const fixture =
-        TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+    const fixture = TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(
+      MyComp,
+    );
     fixture.detectChanges();
 
     expect(fixture.debugElement.nativeElement.innerHTML).toContain('zero');
@@ -3200,8 +3186,9 @@ describe('styling', () => {
       exp = '';
     }
 
-    const fixture =
-        TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+    const fixture = TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(
+      MyComp,
+    );
     fixture.detectChanges();
 
     const div = fixture.nativeElement.querySelector('div')!;
@@ -3235,41 +3222,41 @@ describe('styling', () => {
         constructor(private sanitizer: DomSanitizer) {}
       }
 
-      const fixture =
-          TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+      const fixture = TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(
+        MyComp,
+      );
       fixture.detectChanges(true /* Verify that check no changes does not cause an exception */);
       const div: HTMLElement = fixture.nativeElement.querySelector('div');
-      expect(div.style.getPropertyValue('background-image'))
-          .toEqual('url("https://i.imgur.com/4AiXzf8.jpg")');
+      expect(div.style.getPropertyValue('background-image')).toEqual(
+        'url("https://i.imgur.com/4AiXzf8.jpg")',
+      );
     });
   });
 
-  isBrowser && it('should process <style> tag contents extracted from template', () => {
-    @Component({
-      template: `
+  isBrowser &&
+    it('should process <style> tag contents extracted from template', () => {
+      @Component({
+        template: `
         <style>
           div { width: 10px; }
         </style>
         <div></div>
       `,
-      styles: [
-        'div { width: 100px; }',
-      ]
-    })
-    class MyComp {
-    }
+        styles: ['div { width: 100px; }'],
+      })
+      class MyComp {}
 
-    TestBed.configureTestingModule({
-      declarations: [MyComp],
-    });
+      TestBed.configureTestingModule({
+        declarations: [MyComp],
+      });
 
-    const fixture = TestBed.createComponent(MyComp);
-    fixture.detectChanges();
+      const fixture = TestBed.createComponent(MyComp);
+      fixture.detectChanges();
 
-    // `styles` array values are applied first, styles from <style> tags second.
-    const div = fixture.nativeElement.querySelector('div');
-    expect(getComputedStyle(div).width).toBe('10px');
-  });
+      // `styles` array values are applied first, styles from <style> tags second.
+      const div = fixture.nativeElement.querySelector('div');
+      expect(getComputedStyle(div).width).toBe('10px');
+    });
 
   it('should allow multiple styling bindings to work alongside property/attribute bindings', () => {
     @Component({
@@ -3279,10 +3266,9 @@ describe('styling', () => {
             [style]="{'font-size': '300px'}"
             [attr.title]="'my-title'"
             [attr.data-foo]="'my-foo'">
-        </div>`
+        </div>`,
     })
-    class MyComp {
-    }
+    class MyComp {}
 
     @Directive({selector: '[dir-that-sets-styles]'})
     class DirThatSetsStyling {
@@ -3290,8 +3276,9 @@ describe('styling', () => {
       @HostBinding('style.height') public h = '200px';
     }
 
-    const fixture = TestBed.configureTestingModule({declarations: [MyComp, DirThatSetsStyling]})
-                        .createComponent(MyComp);
+    const fixture = TestBed.configureTestingModule({
+      declarations: [MyComp, DirThatSetsStyling],
+    }).createComponent(MyComp);
     fixture.detectChanges();
     const div = fixture.nativeElement.querySelector('div')!;
     expect(div.style.getPropertyValue('width')).toEqual('100px');
@@ -3307,8 +3294,9 @@ describe('styling', () => {
       @HostBinding('class') public classes = '';
     }
 
-    const fixture =
-        TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+    const fixture = TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(
+      MyComp,
+    );
     fixture.detectChanges();
     const root = fixture.nativeElement as HTMLElement;
     expect(root.className).toEqual('');
@@ -3327,8 +3315,7 @@ describe('styling', () => {
 
   it('should apply camelCased class names', () => {
     @Component({template: `<div [class]="'fooBar'" [class.barFoo]="true"></div>`})
-    class MyComp {
-    }
+    class MyComp {}
 
     TestBed.configureTestingModule({
       declarations: [MyComp],
@@ -3386,81 +3373,76 @@ describe('styling', () => {
     expect(div.style.getPropertyValue('height')).toEqual('200px');
   });
 
-  it('should prioritize host bindings for templates first, then directives and finally components',
-     () => {
-       @Component({selector: 'my-comp-with-styling', template: ''})
-       class MyCompWithStyling {
-         @HostBinding('style') myStyles: any = {width: '300px'};
+  it('should prioritize host bindings for templates first, then directives and finally components', () => {
+    @Component({selector: 'my-comp-with-styling', template: ''})
+    class MyCompWithStyling {
+      @HostBinding('style') myStyles: any = {width: '300px'};
 
-         @HostBinding('style.height') myHeight: any = '305px';
-       }
+      @HostBinding('style.height') myHeight: any = '305px';
+    }
 
-       @Directive({selector: '[my-dir-with-styling]'})
-       class MyDirWithStyling {
-         @HostBinding('style') myStyles: any = {width: '200px'};
+    @Directive({selector: '[my-dir-with-styling]'})
+    class MyDirWithStyling {
+      @HostBinding('style') myStyles: any = {width: '200px'};
 
-         @HostBinding('style.height') myHeight: any = '205px';
-       }
+      @HostBinding('style.height') myHeight: any = '205px';
+    }
 
-       @Component({
-         template: `
+    @Component({
+      template: `
           <my-comp-with-styling
             style="height:1px; width:2px"
             my-dir-with-styling
             [style.height]="myHeight"
             [style]="myStyles">
           </my-comp-with-styling>
-      `
-       })
-       class MyComp {
-         myStyles: {width?: string} = {width: '100px'};
-         myHeight: string|null|undefined = '100px';
-
-         @ViewChild(MyDirWithStyling) dir!: MyDirWithStyling;
-         @ViewChild(MyCompWithStyling) comp!: MyCompWithStyling;
-       }
-
-       TestBed.configureTestingModule(
-           {declarations: [MyComp, MyCompWithStyling, MyDirWithStyling]});
-       const fixture = TestBed.createComponent(MyComp);
-       const comp = fixture.componentInstance;
-       const elm = fixture.nativeElement.querySelector('my-comp-with-styling')!;
-
-       fixture.detectChanges();
-       expect(elm.style.width).toEqual('100px');
-       expect(elm.style.height).toEqual('100px');
-
-       comp.myStyles = {};
-       comp.myHeight = undefined;
-       fixture.detectChanges();
-       expect(elm.style.width).toEqual('2px');
-       expect(elm.style.height).toEqual('1px');
-
-       comp.comp.myStyles = {};
-       comp.comp.myHeight = undefined;
-       fixture.detectChanges();
-       expect(elm.style.width).toEqual('2px');
-       expect(elm.style.height).toEqual('1px');
-
-       comp.dir.myStyles = {};
-       comp.dir.myHeight = undefined;
-       fixture.detectChanges();
-       expect(elm.style.width).toEqual('2px');
-       expect(elm.style.height).toEqual('1px');
-     });
+      `,
+    })
+    class MyComp {
+      myStyles: {width?: string} = {width: '100px'};
+      myHeight: string | null | undefined = '100px';
+
+      @ViewChild(MyDirWithStyling) dir!: MyDirWithStyling;
+      @ViewChild(MyCompWithStyling) comp!: MyCompWithStyling;
+    }
+
+    TestBed.configureTestingModule({declarations: [MyComp, MyCompWithStyling, MyDirWithStyling]});
+    const fixture = TestBed.createComponent(MyComp);
+    const comp = fixture.componentInstance;
+    const elm = fixture.nativeElement.querySelector('my-comp-with-styling')!;
+
+    fixture.detectChanges();
+    expect(elm.style.width).toEqual('100px');
+    expect(elm.style.height).toEqual('100px');
+
+    comp.myStyles = {};
+    comp.myHeight = undefined;
+    fixture.detectChanges();
+    expect(elm.style.width).toEqual('2px');
+    expect(elm.style.height).toEqual('1px');
+
+    comp.comp.myStyles = {};
+    comp.comp.myHeight = undefined;
+    fixture.detectChanges();
+    expect(elm.style.width).toEqual('2px');
+    expect(elm.style.height).toEqual('1px');
+
+    comp.dir.myStyles = {};
+    comp.dir.myHeight = undefined;
+    fixture.detectChanges();
+    expect(elm.style.width).toEqual('2px');
+    expect(elm.style.height).toEqual('1px');
+  });
 
   it('should prioritize directive static bindings over components', () => {
     @Component({selector: 'my-comp-with-styling', host: {style: 'color: blue'}, template: ''})
-    class MyCompWithStyling {
-    }
+    class MyCompWithStyling {}
 
     @Directive({selector: '[my-dir-with-styling]', host: {style: 'color: red'}})
-    class MyDirWithStyling {
-    }
+    class MyDirWithStyling {}
 
     @Component({template: `<my-comp-with-styling my-dir-with-styling></my-comp-with-styling>`})
-    class MyComp {
-    }
+    class MyComp {}
 
     TestBed.configureTestingModule({declarations: [MyComp, MyCompWithStyling, MyDirWithStyling]});
     const fixture = TestBed.createComponent(MyComp);
@@ -3470,7 +3452,6 @@ describe('styling', () => {
     expect(elm.style.color).toEqual('red');
   });
 
-
   it('should combine host class.foo bindings from multiple directives', () => {
     @Directive({
       selector: '[dir-that-sets-one-two]',
@@ -3499,26 +3480,27 @@ describe('styling', () => {
              [class.zero]="zero"
              dir-that-sets-one-two
              dir-that-sets-three-four></div>
-         `
+         `,
     })
     class MyComp {
       @ViewChild('div1', {static: true, read: DirThatSetsOneTwo})
-      public dirOneA: DirThatSetsOneTwo|null = null;
+      public dirOneA: DirThatSetsOneTwo | null = null;
 
       @ViewChild('div1', {static: true, read: DirThatSetsThreeFour})
-      public dirTwoA: DirThatSetsThreeFour|null = null;
+      public dirTwoA: DirThatSetsThreeFour | null = null;
 
       @ViewChild('div2', {static: true, read: DirThatSetsOneTwo})
-      public dirOneB: DirThatSetsOneTwo|null = null;
+      public dirOneB: DirThatSetsOneTwo | null = null;
 
       @ViewChild('div2', {static: true, read: DirThatSetsThreeFour})
-      public dirTwoB: DirThatSetsThreeFour|null = null;
+      public dirTwoB: DirThatSetsThreeFour | null = null;
 
       zero = false;
     }
 
-    TestBed.configureTestingModule(
-        {declarations: [MyComp, DirThatSetsThreeFour, DirThatSetsOneTwo]});
+    TestBed.configureTestingModule({
+      declarations: [MyComp, DirThatSetsThreeFour, DirThatSetsOneTwo],
+    });
 
     const fixture = TestBed.createComponent(MyComp);
     fixture.detectChanges();
@@ -3584,21 +3566,20 @@ describe('styling', () => {
     }
 
     @Component({
-      template: `<comp-with-classes class="inline" *ngFor="let item of items"></comp-with-classes>`
+      template: `<comp-with-classes class="inline" *ngFor="let item of items"></comp-with-classes>`,
     })
     class MyComp {
       items = [1, 2, 3];
     }
 
-    const fixture = TestBed
-                        .configureTestingModule({
-                          declarations: [MyComp, CompWithClasses],
-                        })
-                        .createComponent(MyComp);
+    const fixture = TestBed.configureTestingModule({
+      declarations: [MyComp, CompWithClasses],
+    }).createComponent(MyComp);
     fixture.detectChanges();
 
-    const [one, two, three] =
-        fixture.nativeElement.querySelectorAll('comp-with-classes') as HTMLDivElement[];
+    const [one, two, three] = fixture.nativeElement.querySelectorAll(
+      'comp-with-classes',
+    ) as HTMLDivElement[];
 
     expect(one.classList.contains('custom')).toBeTruthy();
     expect(one.classList.contains('inline')).toBeTruthy();
@@ -3615,8 +3596,7 @@ describe('styling', () => {
 
   it('should allow a single style host binding on an element', () => {
     @Component({template: `<div single-host-style-dir></div>`})
-    class Cmp {
-    }
+    class Cmp {}
 
     @Directive({selector: '[single-host-style-dir]'})
     class SingleHostStyleDir {
@@ -3633,16 +3613,14 @@ describe('styling', () => {
 
   it('should override class bindings when a directive extends another directive', () => {
     @Component({template: `<child-comp class="template"></child-comp>`})
-    class Cmp {
-    }
+    class Cmp {}
 
     @Component({
       selector: 'parent-comp',
       host: {'class': 'parent-comp', '[class.parent-comp-active]': 'true'},
       template: '...',
     })
-    class ParentComp {
-    }
+    class ParentComp {}
 
     @Component({
       selector: 'child-comp',
@@ -3650,12 +3628,11 @@ describe('styling', () => {
         'class': 'child-comp',
         '[class.child-comp-active]': 'true',
         '[class.parent-comp]': 'false',
-        '[class.parent-comp-active]': 'false'
+        '[class.parent-comp-active]': 'false',
       },
       template: '...',
     })
-    class ChildComp extends ParentComp {
-    }
+    class ChildComp extends ParentComp {}
 
     TestBed.configureTestingModule({declarations: [Cmp, ChildComp, ParentComp]});
     const fixture = TestBed.createComponent(Cmp);
@@ -3684,10 +3661,9 @@ describe('styling', () => {
 
     @Component({
       // Note that we shouldn't have a `class` attribute here.
-      template: `<div test></div>`
+      template: `<div test></div>`,
     })
-    class MyComp {
-    }
+    class MyComp {}
 
     TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
     const fixture = TestBed.createComponent(MyComp);
@@ -3705,8 +3681,7 @@ describe('styling', () => {
       template: `<span>Hello</span>`,
       styles: `span {font-size: 10px}`,
     })
-    class Cmp {
-    }
+    class Cmp {}
     TestBed.configureTestingModule({declarations: [Cmp]});
     const fixture = TestBed.createComponent(Cmp);
     fixture.detectChanges();
@@ -3735,7 +3710,7 @@ describe('styling', () => {
         template: ``,
         host: {
           '[class.foo]': 'hostClass',
-        }
+        },
       })
       class MyCmp {
         hostClass = true;
@@ -3745,7 +3720,7 @@ describe('styling', () => {
         selector: '[host-styling]',
         host: {
           '[class]': 'hostClass',
-        }
+        },
       })
       class HostStylingsDir {
         hostClass = {'bar': true};
@@ -3780,8 +3755,7 @@ describe('styling', () => {
         @Input() className: string = 'unbound';
       }
       @Component({template: `<my-cmp [class]="'bound'"></my-cmp>`})
-      class MyApp {
-      }
+      class MyApp {}
 
       TestBed.configureTestingModule({declarations: [MyApp, MyCmp]});
       const fixture = TestBed.createComponent(MyApp);
@@ -3798,8 +3772,7 @@ describe('styling', () => {
         @Input() className: string = 'unbound';
       }
       @Component({template: `<my-cmp class="bound"></my-cmp>`})
-      class MyApp {
-      }
+      class MyApp {}
 
       TestBed.configureTestingModule({declarations: [MyApp, MyCmp]});
       const fixture = TestBed.createComponent(MyApp);
diff --git a/packages/core/test/acceptance/template_ref_spec.ts b/packages/core/test/acceptance/template_ref_spec.ts
index c1c22702e6c6b..15ace8006cd0e 100644
--- a/packages/core/test/acceptance/template_ref_spec.ts
+++ b/packages/core/test/acceptance/template_ref_spec.ts
@@ -31,10 +31,10 @@ describe('TemplateRef', () => {
       return embeddedView.rootNodes;
     }
 
-
     it('should return root render nodes for an embedded view instance', () => {
-      const rootNodes =
-          getRootNodes(`<ng-template #templateRef><div></div>some text<span></span></ng-template>`);
+      const rootNodes = getRootNodes(
+        `<ng-template #templateRef><div></div>some text<span></span></ng-template>`,
+      );
       expect(rootNodes.length).toBe(3);
     });
 
@@ -52,7 +52,7 @@ describe('TemplateRef', () => {
                 <ng-content></ng-content>
               </ng-template>
             `,
-        exportAs: 'menuContent'
+        exportAs: 'menuContent',
       })
       class MenuContent {
         @ViewChild(TemplateRef, {static: true}) template!: TemplateRef<any>;
@@ -65,7 +65,7 @@ describe('TemplateRef', () => {
                 <button>Item two</button>
                 <ng-template [ngIf]="true"><button>Item three</button></ng-template>
               </menu-content>
-            `
+            `,
       })
       class App {
         @ViewChild(MenuContent) content!: MenuContent;
@@ -79,9 +79,9 @@ describe('TemplateRef', () => {
 
       const instance = fixture.componentInstance;
       const viewRef = instance.viewContainerRef.createEmbeddedView(instance.content.template);
-      const rootNodeTextContent =
-          viewRef.rootNodes.map(node => node && node.textContent.trim())
-              .filter(text => text !== '' && text.indexOf('ng-reflect-ng-if') === -1);
+      const rootNodeTextContent = viewRef.rootNodes
+        .map((node) => node && node.textContent.trim())
+        .filter((text) => text !== '' && text.indexOf('ng-reflect-ng-if') === -1);
 
       expect(rootNodeTextContent).toEqual(['Header', 'Item one', 'Item two', 'Item three']);
     });
@@ -156,25 +156,25 @@ describe('TemplateRef', () => {
         `);
 
       expect(rootNodes.length).toBe(4);
-      expect(rootNodes[0].nodeType).toBe(Node.COMMENT_NODE);  // ng-container
-      expect(rootNodes[1].nodeType).toBe(Node.TEXT_NODE);     // "Updated " text
-      expect(rootNodes[2].nodeType).toBe(Node.COMMENT_NODE);  // ICU container
-      expect(rootNodes[3].nodeType).toBe(Node.TEXT_NODE);     // "one minute ago" text
+      expect(rootNodes[0].nodeType).toBe(Node.COMMENT_NODE); // ng-container
+      expect(rootNodes[1].nodeType).toBe(Node.TEXT_NODE); // "Updated " text
+      expect(rootNodes[2].nodeType).toBe(Node.COMMENT_NODE); // ICU container
+      expect(rootNodes[3].nodeType).toBe(Node.TEXT_NODE); // "one minute ago" text
     });
 
-    it('should return an empty array for an embedded view with projection and no projectable nodes',
-       () => {
-         const rootNodes =
-             getRootNodes(`<ng-template #templateRef><ng-content></ng-content></ng-template>`);
-         expect(rootNodes.length).toBe(0);
-       });
+    it('should return an empty array for an embedded view with projection and no projectable nodes', () => {
+      const rootNodes = getRootNodes(
+        `<ng-template #templateRef><ng-content></ng-content></ng-template>`,
+      );
+      expect(rootNodes.length).toBe(0);
+    });
 
-    it('should return an empty array for an embedded view with multiple projections and no projectable nodes',
-       () => {
-         const rootNodes = getRootNodes(
-             `<ng-template #templateRef><ng-content></ng-content><ng-content select="foo"></ng-content></ng-template>`);
-         expect(rootNodes.length).toBe(0);
-       });
+    it('should return an empty array for an embedded view with multiple projections and no projectable nodes', () => {
+      const rootNodes = getRootNodes(
+        `<ng-template #templateRef><ng-content></ng-content><ng-content select="foo"></ng-content></ng-template>`,
+      );
+      expect(rootNodes.length).toBe(0);
+    });
 
     describe('projectable nodes provided to a dynamically created component', () => {
       @Component({selector: 'dynamic', template: ''})
@@ -193,14 +193,18 @@ describe('TemplateRef', () => {
 
       it('should return projectable nodes when provided', () => {
         TestBed.overrideTemplate(
-            DynamicCmp, `<ng-template #templateRef><ng-content></ng-content></ng-template>`);
+          DynamicCmp,
+          `<ng-template #templateRef><ng-content></ng-content></ng-template>`,
+        );
 
         const fixture = TestBed.createComponent(TestCmp);
         // Number of projectable nodes matches the number of slots - all nodes should be returned
         const projectableNodes = [[document.createTextNode('textNode')]];
 
-        const cmptRef = fixture.componentInstance.vcr.createComponent(
-            DynamicCmp, {injector: Injector.NULL, projectableNodes});
+        const cmptRef = fixture.componentInstance.vcr.createComponent(DynamicCmp, {
+          injector: Injector.NULL,
+          projectableNodes,
+        });
 
         const viewRef = cmptRef.instance.templateRef.createEmbeddedView({});
         expect(viewRef.rootNodes.length).toBe(1);
@@ -208,31 +212,36 @@ describe('TemplateRef', () => {
 
       it('should return an empty collection when no projectable nodes were provided', () => {
         TestBed.overrideTemplate(
-            DynamicCmp, `<ng-template #templateRef><ng-content></ng-content></ng-template>`);
+          DynamicCmp,
+          `<ng-template #templateRef><ng-content></ng-content></ng-template>`,
+        );
 
         const fixture = TestBed.createComponent(TestCmp);
 
         // There are slots but projectable nodes were not provided - nothing should be returned
-        const cmptRef = fixture.componentInstance.vcr.createComponent(
-            DynamicCmp, {injector: Injector.NULL, projectableNodes: []});
+        const cmptRef = fixture.componentInstance.vcr.createComponent(DynamicCmp, {
+          injector: Injector.NULL,
+          projectableNodes: [],
+        });
         const viewRef = cmptRef.instance.templateRef.createEmbeddedView({});
         expect(viewRef.rootNodes.length).toBe(0);
       });
 
-      it('should return an empty collection when projectable nodes were provided but there are no slots',
-         () => {
-           TestBed.overrideTemplate(DynamicCmp, `<ng-template #templateRef></ng-template>`);
+      it('should return an empty collection when projectable nodes were provided but there are no slots', () => {
+        TestBed.overrideTemplate(DynamicCmp, `<ng-template #templateRef></ng-template>`);
 
-           const fixture = TestBed.createComponent(TestCmp);
+        const fixture = TestBed.createComponent(TestCmp);
 
-           // There are no slots but projectable were provided - nothing should be returned
-           const projectableNodes = [[document.createTextNode('textNode')]];
+        // There are no slots but projectable were provided - nothing should be returned
+        const projectableNodes = [[document.createTextNode('textNode')]];
 
-           const cmptRef = fixture.componentInstance.vcr.createComponent(
-               DynamicCmp, {injector: Injector.NULL, projectableNodes});
-           const viewRef = cmptRef.instance.templateRef.createEmbeddedView({});
-           expect(viewRef.rootNodes.length).toBe(0);
-         });
+        const cmptRef = fixture.componentInstance.vcr.createComponent(DynamicCmp, {
+          injector: Injector.NULL,
+          projectableNodes,
+        });
+        const viewRef = cmptRef.instance.templateRef.createEmbeddedView({});
+        expect(viewRef.rootNodes.length).toBe(0);
+      });
     });
   });
 
@@ -241,7 +250,7 @@ describe('TemplateRef', () => {
       template: `
       <ng-template #templateRef let-name="name">{{name}}</ng-template>
       <ng-container #containerRef></ng-container>
-    `
+    `,
     })
     class App {
       @ViewChild('templateRef') templateRef!: TemplateRef<any>;
@@ -290,7 +299,7 @@ describe('TemplateRef', () => {
             <button (click)="log(name)"></button>
           </ng-template>
           <ng-container #containerRef></ng-container>
-        `
+        `,
       })
       class ListenerTest {
         @ViewChild('templateRef') templateRef!: TemplateRef<any>;
@@ -333,9 +342,11 @@ describe('TemplateRef', () => {
       fixture.detectChanges();
 
       expect(console.warn).toHaveBeenCalledTimes(1);
-      expect(console.warn)
-          .toHaveBeenCalledWith(jasmine.stringContaining(
-              'Replacing the `context` object of an `EmbeddedViewRef` is deprecated'));
+      expect(console.warn).toHaveBeenCalledWith(
+        jasmine.stringContaining(
+          'Replacing the `context` object of an `EmbeddedViewRef` is deprecated',
+        ),
+      );
       expect(fixture.nativeElement.textContent).toBe('Bilbo');
     });
   });
diff --git a/packages/core/test/acceptance/text_spec.ts b/packages/core/test/acceptance/text_spec.ts
index c08efd47a5e1d..a5a8db8a99cb4 100644
--- a/packages/core/test/acceptance/text_spec.ts
+++ b/packages/core/test/acceptance/text_spec.ts
@@ -23,7 +23,7 @@ describe('text instructions', () => {
         <div>a{{one}}b{{two}}c</div>
         <div>a{{one}}b</div>
         <div>{{one}}</div>
-      `
+      `,
     })
     class App {
       one = 1;
@@ -41,9 +41,9 @@ describe('text instructions', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    const allTextContent =
-        Array.from((fixture.nativeElement as HTMLElement).querySelectorAll('div'))
-            .map((div: HTMLDivElement) => div.textContent);
+    const allTextContent = Array.from(
+      (fixture.nativeElement as HTMLElement).querySelectorAll('div'),
+    ).map((div: HTMLDivElement) => div.textContent);
 
     expect(allTextContent).toEqual([
       'a1b2c3d4e5f6g7h8i9j',
@@ -63,7 +63,7 @@ describe('text instructions', () => {
     @Component({
       template: `
         <p>{{who | async}} sells {{(item | async)?.what}} down by the {{(item | async)?.where}}.</p>
-      `
+      `,
     })
     class App {
       who = of('Sally');
@@ -94,8 +94,9 @@ describe('text instructions', () => {
     fixture.detectChanges();
     const p = fixture.nativeElement.querySelector('p');
 
-    expect(p.textContent)
-        .toBe('javascript:alert("image_of_dog_with_coffee_in_burning_building.gif")');
+    expect(p.textContent).toBe(
+      'javascript:alert("image_of_dog_with_coffee_in_burning_building.gif")',
+    );
   });
 
   it('should not allow writing HTML in interpolated text', () => {
@@ -177,8 +178,7 @@ describe('text instructions', () => {
     @Component({
       template: `{{'Interpolations look like {{this}}'}}`,
     })
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App]});
     const fixture = TestBed.createComponent(App);
diff --git a/packages/core/test/acceptance/view_container_ref_spec.ts b/packages/core/test/acceptance/view_container_ref_spec.ts
index ab399bba69c27..9ebd3df9b6915 100644
--- a/packages/core/test/acceptance/view_container_ref_spec.ts
+++ b/packages/core/test/acceptance/view_container_ref_spec.ts
@@ -8,7 +8,39 @@
 
 import {CommonModule, DOCUMENT} from '@angular/common';
 import {computeMsgId} from '@angular/compiler';
-import {ChangeDetectorRef, Compiler, Component, createComponent, createEnvironmentInjector, Directive, DoCheck, ElementRef, EmbeddedViewRef, EnvironmentInjector, ErrorHandler, InjectionToken, Injector, Input, NgModule, NgModuleRef, NO_ERRORS_SCHEMA, OnDestroy, OnInit, Pipe, PipeTransform, QueryList, Renderer2, RendererFactory2, RendererType2, Sanitizer, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, ɵsetDocument} from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Compiler,
+  Component,
+  createComponent,
+  createEnvironmentInjector,
+  Directive,
+  DoCheck,
+  ElementRef,
+  EmbeddedViewRef,
+  EnvironmentInjector,
+  ErrorHandler,
+  InjectionToken,
+  Injector,
+  Input,
+  NgModule,
+  NgModuleRef,
+  NO_ERRORS_SCHEMA,
+  OnDestroy,
+  OnInit,
+  Pipe,
+  PipeTransform,
+  QueryList,
+  Renderer2,
+  RendererFactory2,
+  RendererType2,
+  Sanitizer,
+  TemplateRef,
+  ViewChild,
+  ViewChildren,
+  ViewContainerRef,
+  ɵsetDocument,
+} from '@angular/core';
 import {ngDevModeResetPerfCounters} from '@angular/core/src/util/ng_dev_mode';
 import {ComponentFixture, TestBed, TestComponentRenderer} from '@angular/core/testing';
 import {clearTranslations, loadTranslations} from '@angular/localize';
@@ -21,8 +53,9 @@ describe('ViewContainerRef', () => {
    * reflect attributes omitted. This makes HTML comparisons easier and less verbose.
    */
   function getElementHtml(element: Element) {
-    return element.innerHTML.replace(/<!--(\W|\w)*?-->/g, '')
-        .replace(/\sng-reflect-\S*="[^"]*"/g, '');
+    return element.innerHTML
+      .replace(/<!--(\W|\w)*?-->/g, '')
+      .replace(/\sng-reflect-\S*="[^"]*"/g, '');
   }
 
   /**
@@ -37,9 +70,14 @@ describe('ViewContainerRef', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [
-        StructDir, ViewContainerRefComp, ViewContainerRefApp, DestroyCasesComp, ConstructorDir,
-        ConstructorApp, ConstructorAppWithQueries
-      ]
+        StructDir,
+        ViewContainerRefComp,
+        ViewContainerRefApp,
+        DestroyCasesComp,
+        ConstructorDir,
+        ConstructorApp,
+        ConstructorAppWithQueries,
+      ],
     });
   });
 
@@ -50,42 +88,38 @@ describe('ViewContainerRef', () => {
       const fixture = TestBed.createComponent(ConstructorApp);
       fixture.detectChanges();
       expect(fixture.componentInstance.foo).toBeInstanceOf(ElementRef);
-      expect(fixture.componentInstance.foo.nativeElement)
-          .toEqual(fixture.debugElement.nativeElement.querySelector('span'));
+      expect(fixture.componentInstance.foo.nativeElement).toEqual(
+        fixture.debugElement.nativeElement.querySelector('span'),
+      );
     });
 
-    it('should ensure results in views created in constructors do not appear before template node results',
-       () => {
-         const fixture = TestBed.createComponent(ConstructorAppWithQueries);
-         fixture.detectChanges();
-         expect(fixture.componentInstance.foo).toBeInstanceOf(TemplateRef);
-       });
+    it('should ensure results in views created in constructors do not appear before template node results', () => {
+      const fixture = TestBed.createComponent(ConstructorAppWithQueries);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.foo).toBeInstanceOf(TemplateRef);
+    });
 
-    it('should construct proper TNode / DOM tree when embedded views are created in a directive constructor',
-       () => {
-         @Component({
-           selector: 'view-insertion-test-cmpt',
-           template:
-               `<div>before<ng-template constructorDir><span>|middle|</span></ng-template>after</div>`
-         })
-         class ViewInsertionTestCmpt {
-         }
+    it('should construct proper TNode / DOM tree when embedded views are created in a directive constructor', () => {
+      @Component({
+        selector: 'view-insertion-test-cmpt',
+        template: `<div>before<ng-template constructorDir><span>|middle|</span></ng-template>after</div>`,
+      })
+      class ViewInsertionTestCmpt {}
 
-         TestBed.configureTestingModule({declarations: [ViewInsertionTestCmpt, ConstructorDir]});
+      TestBed.configureTestingModule({declarations: [ViewInsertionTestCmpt, ConstructorDir]});
 
-         const fixture = TestBed.createComponent(ViewInsertionTestCmpt);
-         expect(fixture.nativeElement).toHaveText('before|middle|after');
-       });
+      const fixture = TestBed.createComponent(ViewInsertionTestCmpt);
+      expect(fixture.nativeElement).toHaveText('before|middle|after');
+    });
 
     it('should use comment node of host ng-container as insertion marker', () => {
       @Component({template: 'hello'})
-      class HelloComp {
-      }
+      class HelloComp {}
 
       @Component({
         template: `
           <ng-container vcref></ng-container>
-        `
+        `,
       })
       class TestComp {
         @ViewChild(VCRefDirective, {static: true}) vcRefDir!: VCRefDirective;
@@ -96,8 +130,10 @@ describe('ViewContainerRef', () => {
       const {vcref, elementRef} = fixture.componentInstance.vcRefDir;
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.innerHTML)
-          .toMatch(/<!--(ng-container)?-->/, 'Expected only one comment node to be generated.');
+      expect(fixture.nativeElement.innerHTML).toMatch(
+        /<!--(ng-container)?-->/,
+        'Expected only one comment node to be generated.',
+      );
 
       const testParent = document.createElement('div');
       testParent.appendChild(elementRef.nativeElement);
@@ -120,13 +156,12 @@ describe('ViewContainerRef', () => {
 
     it('should support attribute selectors in dynamically created components', () => {
       @Component({selector: '[hello]', template: 'Hello'})
-      class HelloComp {
-      }
+      class HelloComp {}
 
       @Component({
         template: `
           <ng-container #container></ng-container>
-        `
+        `,
       })
       class TestComp {
         @ViewChild('container', {read: ViewContainerRef}) vcRef!: ViewContainerRef;
@@ -178,21 +213,19 @@ describe('ViewContainerRef', () => {
             selector: svgSelector,
             template: '<svg><g></g></svg>',
           })
-          class SvgComp {
-          }
+          class SvgComp {}
 
           @Component({
             selector: mathMLSelector,
             template: '<math><matrix></matrix></math>',
           })
-          class MathMLComp {
-          }
+          class MathMLComp {}
 
           @Component({
             template: `
               <ng-container #svg></ng-container>
               <ng-container #mathml></ng-container>
-            `
+            `,
           })
           class TestComp {
             @ViewChild('svg', {read: ViewContainerRef}) svgVCRef!: ViewContainerRef;
@@ -214,9 +247,7 @@ describe('ViewContainerRef', () => {
 
           TestBed.configureTestingModule({
             declarations: [TestComp, SvgComp, MathMLComp],
-            providers: [
-              {provide: DOCUMENT, useFactory: _document, deps: []},
-            ],
+            providers: [{provide: DOCUMENT, useFactory: _document, deps: []}],
           });
           const fixture = TestBed.createComponent(TestComp);
           fixture.detectChanges();
@@ -224,10 +255,12 @@ describe('ViewContainerRef', () => {
           fixture.componentInstance.createDynamicComponents();
           fixture.detectChanges();
 
-          expect(fixture.nativeElement.querySelector('svg').namespaceURI)
-              .toEqual('http://www.w3.org/2000/svg');
-          expect(fixture.nativeElement.querySelector('math').namespaceURI)
-              .toEqual('http://www.w3.org/1998/MathML/');
+          expect(fixture.nativeElement.querySelector('svg').namespaceURI).toEqual(
+            'http://www.w3.org/2000/svg',
+          );
+          expect(fixture.nativeElement.querySelector('math').namespaceURI).toEqual(
+            'http://www.w3.org/1998/MathML/',
+          );
         });
       }
 
@@ -240,10 +273,9 @@ describe('ViewContainerRef', () => {
     it('should apply attributes and classes to host element based on selector', () => {
       @Component({
         selector: '[attr-a=a].class-a:not(.class-b):not([attr-b=b]).class-c[attr-c]',
-        template: 'Hello'
+        template: 'Hello',
       })
-      class HelloComp {
-      }
+      class HelloComp {}
 
       @Component({
         template: `
@@ -251,13 +283,15 @@ describe('ViewContainerRef', () => {
           <div id="vcr">
             <ng-container #container></ng-container>
           </div>
-        `
+        `,
       })
       class TestComp {
         @ViewChild('container', {read: ViewContainerRef}) vcRef!: ViewContainerRef;
 
-
-        constructor(public injector: EnvironmentInjector, private elementRef: ElementRef) {}
+        constructor(
+          public injector: EnvironmentInjector,
+          private elementRef: ElementRef,
+        ) {}
 
         createComponentViaVCRef() {
           this.vcRef.createComponent(HelloComp);
@@ -266,7 +300,7 @@ describe('ViewContainerRef', () => {
         createComponentViaFactory() {
           createComponent(HelloComp, {
             environmentInjector: this.injector,
-            hostElement: this.elementRef.nativeElement.querySelector('#factory')
+            hostElement: this.elementRef.nativeElement.querySelector('#factory'),
           });
         }
       }
@@ -366,7 +400,7 @@ describe('ViewContainerRef', () => {
         template: `
           <ng-template #t>content</ng-template>
           before|<ng-template #c1></ng-template>|middle|<ng-template #c2></ng-template>|after
-        `
+        `,
       })
       class TestComponent {
         @ViewChild('t', {static: true}) t!: TemplateRef<{}>;
@@ -395,32 +429,31 @@ describe('ViewContainerRef', () => {
       expect(cmpt.c2.indexOf(viewRef)).toBe(0);
     });
 
-    it('should add embedded views at the right position in the DOM tree (ng-template next to other ng-template)',
-       () => {
-         @Component({
-           template: `before|<ng-template #a>A</ng-template><ng-template #b>B</ng-template>|after`
-         })
-         class TestCmp {
-           @ViewChild('a', {static: true}) ta!: TemplateRef<{}>;
-           @ViewChild('b', {static: true}) tb!: TemplateRef<{}>;
-           @ViewChild('a', {static: true, read: ViewContainerRef}) ca!: ViewContainerRef;
-           @ViewChild('b', {static: true, read: ViewContainerRef}) cb!: ViewContainerRef;
-         }
-
-         const fixture = TestBed.createComponent(TestCmp);
-         const testCmpInstance = fixture.componentInstance;
-
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('before||after');
-
-         testCmpInstance.cb.createEmbeddedView(testCmpInstance.tb);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('before|B|after');
-
-         testCmpInstance.ca.createEmbeddedView(testCmpInstance.ta);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('before|AB|after');
-       });
+    it('should add embedded views at the right position in the DOM tree (ng-template next to other ng-template)', () => {
+      @Component({
+        template: `before|<ng-template #a>A</ng-template><ng-template #b>B</ng-template>|after`,
+      })
+      class TestCmp {
+        @ViewChild('a', {static: true}) ta!: TemplateRef<{}>;
+        @ViewChild('b', {static: true}) tb!: TemplateRef<{}>;
+        @ViewChild('a', {static: true, read: ViewContainerRef}) ca!: ViewContainerRef;
+        @ViewChild('b', {static: true, read: ViewContainerRef}) cb!: ViewContainerRef;
+      }
+
+      const fixture = TestBed.createComponent(TestCmp);
+      const testCmpInstance = fixture.componentInstance;
+
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('before||after');
+
+      testCmpInstance.cb.createEmbeddedView(testCmpInstance.tb);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('before|B|after');
+
+      testCmpInstance.ca.createEmbeddedView(testCmpInstance.ta);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('before|AB|after');
+    });
   });
 
   describe('move', () => {
@@ -464,7 +497,7 @@ describe('ViewContainerRef', () => {
   describe('destroy should clean the DOM in all cases:', () => {
     function executeTest(template: string) {
       TestBed.overrideTemplate(DestroyCasesComp, template).configureTestingModule({
-        schemas: [NO_ERRORS_SCHEMA]
+        schemas: [NO_ERRORS_SCHEMA],
       });
 
       const fixture = TestBed.createComponent(DestroyCasesComp);
@@ -473,11 +506,11 @@ describe('ViewContainerRef', () => {
 
       const structDirs = fixture.componentInstance.structDirs.toArray();
 
-      structDirs.forEach(structDir => structDir.create());
+      structDirs.forEach((structDir) => structDir.create());
       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('Foo');
 
-      structDirs.forEach(structDir => structDir.destroy());
+      structDirs.forEach((structDir) => structDir.destroy());
       fixture.detectChanges();
       expect(fixture.nativeElement.innerHTML).toEqual(initial);
     }
@@ -563,8 +596,8 @@ describe('ViewContainerRef', () => {
       loadTranslations({
         [computeMsgId('Bar')]: 'o',
         [computeMsgId(
-            '{$START_TAG_BEFORE}{$CLOSE_TAG_BEFORE}{$START_TAG_DIV}{$START_TAG_INSIDE}{$CLOSE_TAG_INSIDE}{$CLOSE_TAG_DIV}{$START_TAG_AFTER}{$CLOSE_TAG_AFTER}')]:
-            'F{$START_TAG_DIV}{$CLOSE_TAG_DIV}o',
+          '{$START_TAG_BEFORE}{$CLOSE_TAG_BEFORE}{$START_TAG_DIV}{$START_TAG_INSIDE}{$CLOSE_TAG_INSIDE}{$CLOSE_TAG_DIV}{$START_TAG_AFTER}{$CLOSE_TAG_AFTER}',
+        )]: 'F{$START_TAG_DIV}{$CLOSE_TAG_DIV}o',
       });
       executeTest(`
       <ng-template #foo>
@@ -587,10 +620,10 @@ describe('ViewContainerRef', () => {
     it('when ViewContainerRef is on an element, and i18n is on the parent ViewContainerRef', () => {
       loadTranslations({
         [computeMsgId(
-            '{$START_TAG_BEFORE}{$CLOSE_TAG_BEFORE}{$START_TAG_DIV}{$START_TAG_IN}{$CLOSE_TAG_IN}{$CLOSE_TAG_DIV}{$START_TAG_AFTER}{$CLOSE_TAG_AFTER}')]:
-            '{$START_TAG_DIV}{$CLOSE_TAG_DIV}{$START_TAG_BEFORE}oo{$CLOSE_TAG_BEFORE}',
+          '{$START_TAG_BEFORE}{$CLOSE_TAG_BEFORE}{$START_TAG_DIV}{$START_TAG_IN}{$CLOSE_TAG_IN}{$CLOSE_TAG_DIV}{$START_TAG_AFTER}{$CLOSE_TAG_AFTER}',
+        )]: '{$START_TAG_DIV}{$CLOSE_TAG_DIV}{$START_TAG_BEFORE}oo{$CLOSE_TAG_BEFORE}',
         [computeMsgId('{VAR_SELECT, select, other {|{INTERPOLATION}|}}')]:
-            '{VAR_SELECT, select, other {|{INTERPOLATION}|}}',
+          '{VAR_SELECT, select, other {|{INTERPOLATION}|}}',
       });
       executeTest(`
       <ng-template #foo>
@@ -611,8 +644,9 @@ describe('ViewContainerRef', () => {
     it('should return the number of embedded views', () => {
       TestBed.configureTestingModule({declarations: [EmbeddedViewInsertionComp, VCRefDirective]});
       const fixture = TestBed.createComponent(EmbeddedViewInsertionComp);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       expect(vcRefDir.vcref.length).toEqual(0);
@@ -640,8 +674,9 @@ describe('ViewContainerRef', () => {
 
     it('should retrieve a ViewRef from its index, and vice versa', () => {
       const fixture = TestBed.createComponent(EmbeddedViewInsertionComp);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       vcRefDir.createView('A');
@@ -661,8 +696,9 @@ describe('ViewContainerRef', () => {
 
     it('should handle out of bounds cases', () => {
       const fixture = TestBed.createComponent(EmbeddedViewInsertionComp);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       vcRefDir.createView('A');
@@ -699,8 +735,9 @@ describe('ViewContainerRef', () => {
     it('should move embedded views and associated DOM nodes without recreating them', () => {
       TestBed.configureTestingModule({declarations: [EmbeddedViewInsertionComp, VCRefDirective]});
       const fixture = TestBed.createComponent(EmbeddedViewInsertionComp);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       vcRefDir.createView('A');
@@ -738,7 +775,7 @@ describe('ViewContainerRef', () => {
         template: `
           <ng-template vcref let-name>{{name}}</ng-template>
           <footer></footer>
-        `
+        `,
       })
       class TestComponent {
         @ViewChild(VCRefDirective, {static: true}) vcRefDir!: VCRefDirective;
@@ -754,10 +791,12 @@ describe('ViewContainerRef', () => {
       // that the comment is a placeholder for a container.
       expect(vcRefDir.vcref.element.nativeElement.textContent).toEqual('container');
 
-      expect(vcRefDir.vcref.injector.get(ElementRef).nativeElement.textContent)
-          .toEqual('container');
-      expect(getElementHtml(vcRefDir.vcref.parentInjector.get(ElementRef).nativeElement))
-          .toBe('<footer></footer>');
+      expect(vcRefDir.vcref.injector.get(ElementRef).nativeElement.textContent).toEqual(
+        'container',
+      );
+      expect(getElementHtml(vcRefDir.vcref.parentInjector.get(ElementRef).nativeElement)).toBe(
+        '<footer></footer>',
+      );
     });
 
     it('should work on elements', () => {
@@ -765,7 +804,7 @@ describe('ViewContainerRef', () => {
         template: `
           <header vcref></header>
           <footer></footer>
-        `
+        `,
       })
       class TestComponent {
         @ViewChild(VCRefDirective, {static: true}) vcRefDir!: VCRefDirective;
@@ -782,14 +821,13 @@ describe('ViewContainerRef', () => {
 
     it('should work on components', () => {
       @Component({selector: 'header-cmp', template: ``})
-      class HeaderCmp {
-      }
+      class HeaderCmp {}
 
       @Component({
         template: `
           <header-cmp vcref></header-cmp>
           <footer></footer>
-        `
+        `,
       })
       class TestComponent {
         @ViewChild(VCRefDirective, {static: true}) vcRefDir!: VCRefDirective;
@@ -801,8 +839,9 @@ describe('ViewContainerRef', () => {
       const vcref = fixture.componentInstance.vcRefDir.vcref;
 
       expect(vcref.element.nativeElement.tagName.toLowerCase()).toEqual('header-cmp');
-      expect(vcref.injector.get(ElementRef).nativeElement.tagName.toLowerCase())
-          .toEqual('header-cmp');
+      expect(vcref.injector.get(ElementRef).nativeElement.tagName.toLowerCase()).toEqual(
+        'header-cmp',
+      );
     });
   });
 
@@ -817,8 +856,9 @@ describe('ViewContainerRef', () => {
 
     it('should detach the right embedded view when an index is specified', () => {
       const fixture = TestBed.createComponent(EmbeddedViewInsertionComp);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       const viewA = vcRefDir.createView('A');
@@ -846,8 +886,9 @@ describe('ViewContainerRef', () => {
 
     it('should detach the last embedded view when no index is specified', () => {
       const fixture = TestBed.createComponent(EmbeddedViewInsertionComp);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       vcRefDir.createView('A');
@@ -867,8 +908,7 @@ describe('ViewContainerRef', () => {
 
     it('should not throw when destroying a detached component view', () => {
       @Component({selector: 'dynamic-cmp'})
-      class DynamicCmp {
-      }
+      class DynamicCmp {}
 
       @Component({selector: 'test-cmp'})
       class TestCmp {
@@ -897,7 +937,7 @@ describe('ViewContainerRef', () => {
       const _origRendererFactory = TestBed.inject(RendererFactory2);
       const _origCreateRenderer = _origRendererFactory.createRenderer;
 
-      _origRendererFactory.createRenderer = function(element: any, type: RendererType2|null) {
+      _origRendererFactory.createRenderer = function (element: any, type: RendererType2 | null) {
         const renderer = _origCreateRenderer.call(_origRendererFactory, element, type);
         renderer.destroyNode = () => {};
         return renderer;
@@ -910,8 +950,9 @@ describe('ViewContainerRef', () => {
 
     it('should remove the right embedded view when an index is specified', () => {
       const fixture = TestBed.createComponent(EmbeddedViewInsertionComp);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       const viewA = vcRefDir.createView('A');
@@ -939,8 +980,9 @@ describe('ViewContainerRef', () => {
 
     it('should remove the last embedded view when no index is specified', () => {
       const fixture = TestBed.createComponent(EmbeddedViewInsertionComp);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       vcRefDir.createView('A');
@@ -960,8 +1002,9 @@ describe('ViewContainerRef', () => {
 
     it('should throw when trying to insert a removed or destroyed view', () => {
       const fixture = TestBed.createComponent(EmbeddedViewInsertionComp);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       const viewA = vcRefDir.createView('A');
@@ -989,7 +1032,7 @@ describe('ViewContainerRef', () => {
           <ng-template #child>
               I am child template
           </ng-template>
-        `
+        `,
       })
       class AppComponent {
         visible = true;
@@ -1043,34 +1086,38 @@ describe('ViewContainerRef', () => {
         <footer></footer>
       `,
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       TestBed.configureTestingModule({declarations: [TestComponent, VCRefDirective]});
 
       const fixture = TestBed.createComponent(TestComponent);
-      const vcRef =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRef = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
 
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<header vcref=""></header><footer></footer>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<header vcref=""></header><footer></footer>',
+      );
 
       vcRef.createView('A');
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<header vcref=""></header>A<footer></footer>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<header vcref=""></header>A<footer></footer>',
+      );
 
       vcRef.createView('B');
       vcRef.createView('C');
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<header vcref=""></header>ABC<footer></footer>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<header vcref=""></header>ABC<footer></footer>',
+      );
 
       vcRef.createView('Y', 0);
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<header vcref=""></header>YABC<footer></footer>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<header vcref=""></header>YABC<footer></footer>',
+      );
 
       expect(() => vcRef.createView('Z', -1)).toThrow();
       expect(() => vcRef.createView('Z', 5)).toThrow();
@@ -1078,8 +1125,7 @@ describe('ViewContainerRef', () => {
 
     it('should work on components', () => {
       @Component({selector: 'header-cmp', template: ``})
-      class HeaderComponent {
-      }
+      class HeaderComponent {}
 
       @Component({
         template: `
@@ -1088,34 +1134,39 @@ describe('ViewContainerRef', () => {
           <footer></footer>
           `,
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
-      TestBed.configureTestingModule(
-          {declarations: [TestComponent, HeaderComponent, VCRefDirective]});
+      TestBed.configureTestingModule({
+        declarations: [TestComponent, HeaderComponent, VCRefDirective],
+      });
       const fixture = TestBed.createComponent(TestComponent);
-      const vcRef =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRef = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<header-cmp vcref=""></header-cmp><footer></footer>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<header-cmp vcref=""></header-cmp><footer></footer>',
+      );
 
       vcRef.createView('A');
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<header-cmp vcref=""></header-cmp>A<footer></footer>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<header-cmp vcref=""></header-cmp>A<footer></footer>',
+      );
 
       vcRef.createView('B');
       vcRef.createView('C');
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<header-cmp vcref=""></header-cmp>ABC<footer></footer>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<header-cmp vcref=""></header-cmp>ABC<footer></footer>',
+      );
 
       vcRef.createView('Y', 0);
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<header-cmp vcref=""></header-cmp>YABC<footer></footer>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<header-cmp vcref=""></header-cmp>YABC<footer></footer>',
+      );
 
       expect(() => vcRef.createView('Z', -1)).toThrow();
       expect(() => vcRef.createView('Z', 5)).toThrow();
@@ -1129,23 +1180,25 @@ describe('ViewContainerRef', () => {
           <div vcref [tplRef]="tplRef"></div>
         `,
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       TestBed.configureTestingModule({declarations: [TestComponent, VCRefDirective]});
       const fixture = TestBed.createComponent(TestComponent);
-      const vcRefs = fixture.debugElement.queryAll(By.directive(VCRefDirective))
-                         .map(debugEl => debugEl.injector.get(VCRefDirective));
+      const vcRefs = fixture.debugElement
+        .queryAll(By.directive(VCRefDirective))
+        .map((debugEl) => debugEl.injector.get(VCRefDirective));
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<div vcref=""></div><div vcref=""></div>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<div vcref=""></div><div vcref=""></div>',
+      );
 
       vcRefs[0].createView('A');
       vcRefs[1].createView('B');
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<div vcref=""></div>A<div vcref=""></div>B');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<div vcref=""></div>A<div vcref=""></div>B',
+      );
     });
 
     it('should work on templates', () => {
@@ -1153,7 +1206,7 @@ describe('ViewContainerRef', () => {
         template: `
           <ng-template vcref #tplRef [tplRef]="tplRef" let-name>{{name}}</ng-template>
           <footer></footer>
-        `
+        `,
       })
       class TestComponent {
         @ViewChild(VCRefDirective, {static: true}) vcRef!: VCRefDirective;
@@ -1185,7 +1238,7 @@ describe('ViewContainerRef', () => {
     it('should apply directives and pipes of the host view to the TemplateRef', () => {
       @Component({selector: 'child', template: `{{name}}`})
       class Child {
-        @Input() name: string|undefined;
+        @Input() name: string | undefined;
       }
 
       @Pipe({name: 'starPipe'})
@@ -1202,32 +1255,33 @@ describe('ViewContainerRef', () => {
             </ng-template>
             <child vcref [tplRef]="foo" [name]="'A' | starPipe"></child>
             <child [name]="'B' | starPipe"></child>
-          `
+          `,
       })
-      class SomeComponent {
-      }
+      class SomeComponent {}
 
-      TestBed.configureTestingModule(
-          {declarations: [Child, StarPipe, SomeComponent, VCRefDirective]});
+      TestBed.configureTestingModule({
+        declarations: [Child, StarPipe, SomeComponent, VCRefDirective],
+      });
       const fixture = TestBed.createComponent(SomeComponent);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       vcRefDir.vcref.createEmbeddedView(vcRefDir.tplRef!);
       vcRefDir.vcref.createEmbeddedView(vcRefDir.tplRef!);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<child vcref="">**A**</child><child>**C**</child><child>**C**</child><child>**B**</child>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child vcref="">**A**</child><child>**C**</child><child>**C**</child><child>**B**</child>',
+      );
     });
   });
 
   describe('createComponent', () => {
     let templateExecutionCounter = 0;
 
-    beforeEach(() => templateExecutionCounter = 0);
+    beforeEach(() => (templateExecutionCounter = 0));
 
     it('should work without Injector and NgModuleRef', () => {
       @Component({selector: 'embedded-cmp', template: `foo`})
@@ -1241,11 +1295,13 @@ describe('ViewContainerRef', () => {
         }
       }
 
-      TestBed.configureTestingModule(
-          {declarations: [EmbeddedViewInsertionComp, VCRefDirective, EmbeddedComponent]});
+      TestBed.configureTestingModule({
+        declarations: [EmbeddedViewInsertionComp, VCRefDirective, EmbeddedComponent],
+      });
       const fixture = TestBed.createComponent(EmbeddedViewInsertionComp);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       expect(getElementHtml(fixture.nativeElement)).toEqual('<p vcref=""></p>');
@@ -1253,8 +1309,9 @@ describe('ViewContainerRef', () => {
 
       const componentRef = vcRefDir.vcref.createComponent(EmbeddedComponent);
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<p vcref=""></p><embedded-cmp>foo</embedded-cmp>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<p vcref=""></p><embedded-cmp>foo</embedded-cmp>',
+      );
       expect(templateExecutionCounter).toEqual(2);
 
       vcRefDir.vcref.detach(0);
@@ -1264,8 +1321,9 @@ describe('ViewContainerRef', () => {
 
       vcRefDir.vcref.insert(componentRef.hostView);
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<p vcref=""></p><embedded-cmp>foo</embedded-cmp>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<p vcref=""></p><embedded-cmp>foo</embedded-cmp>',
+      );
       expect(templateExecutionCounter).toEqual(3);
     });
 
@@ -1286,8 +1344,9 @@ describe('ViewContainerRef', () => {
         }
       }
 
-      TestBed.configureTestingModule(
-          {declarations: [EmbeddedViewInsertionComp, VCRefDirective, EmbeddedComponent]});
+      TestBed.configureTestingModule({
+        declarations: [EmbeddedViewInsertionComp, VCRefDirective, EmbeddedComponent],
+      });
 
       @NgModule({
         providers: [
@@ -1297,14 +1356,12 @@ describe('ViewContainerRef', () => {
           {provide: Sanitizer, useValue: TestBed.inject(DomSanitizer)},
           {provide: ErrorHandler, useValue: TestBed.inject(ErrorHandler)},
           {provide: RendererFactory2, useValue: TestBed.inject(RendererFactory2)},
-        ]
+        ],
       })
-      class MyAppModule {
-      }
+      class MyAppModule {}
 
       @NgModule({providers: [{provide: String, useValue: 'some_module'}]})
-      class SomeModule {
-      }
+      class SomeModule {}
 
       // Compile test modules in order to be able to pass the NgModuleRef or the
       // module injector to the ViewContainerRef create component method.
@@ -1315,28 +1372,34 @@ describe('ViewContainerRef', () => {
       const someModuleRef = someModuleFactory.create(null);
 
       const fixture = TestBed.createComponent(EmbeddedViewInsertionComp);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       expect(getElementHtml(fixture.nativeElement)).toEqual('<p vcref=""></p>');
       expect(templateExecutionCounter).toEqual(0);
 
-      let componentRef = vcRefDir.vcref.createComponent(
-          EmbeddedComponent, {index: 0, injector: someModuleRef.injector});
+      let componentRef = vcRefDir.vcref.createComponent(EmbeddedComponent, {
+        index: 0,
+        injector: someModuleRef.injector,
+      });
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<p vcref=""></p><embedded-cmp>foo</embedded-cmp>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<p vcref=""></p><embedded-cmp>foo</embedded-cmp>',
+      );
       expect(templateExecutionCounter).toEqual(2);
       expect(componentRef.instance.s).toEqual('some_module');
 
-      componentRef =
-          vcRefDir.vcref.createComponent(EmbeddedComponent, {index: 0, ngModuleRef: appModuleRef});
+      componentRef = vcRefDir.vcref.createComponent(EmbeddedComponent, {
+        index: 0,
+        ngModuleRef: appModuleRef,
+      });
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<p vcref=""></p><embedded-cmp>foo</embedded-cmp><embedded-cmp>foo</embedded-cmp>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<p vcref=""></p><embedded-cmp>foo</embedded-cmp><embedded-cmp>foo</embedded-cmp>',
+      );
       expect(componentRef.instance.s).toEqual('root_module');
       expect(templateExecutionCounter).toEqual(5);
     });
@@ -1346,8 +1409,9 @@ describe('ViewContainerRef', () => {
         declarations: [EmbeddedViewInsertionComp, VCRefDirective, EmbeddedComponentWithNgContent],
       });
       const fixture = TestBed.createComponent(EmbeddedViewInsertionComp);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       expect(getElementHtml(fixture.nativeElement)).toEqual('<p vcref=""></p>');
@@ -1358,33 +1422,36 @@ describe('ViewContainerRef', () => {
       myNode.appendChild(myText);
       myNode.appendChild(myText2);
 
-      vcRefDir.vcref.createComponent(
-          EmbeddedComponentWithNgContent, {index: 0, projectableNodes: [[myNode]]});
+      vcRefDir.vcref.createComponent(EmbeddedComponentWithNgContent, {
+        index: 0,
+        projectableNodes: [[myNode]],
+      });
       fixture.detectChanges();
 
-
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<p vcref=""></p><embedded-cmp-with-ngcontent><div>barbaz</div><hr></embedded-cmp-with-ngcontent>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<p vcref=""></p><embedded-cmp-with-ngcontent><div>barbaz</div><hr></embedded-cmp-with-ngcontent>',
+      );
     });
 
     it('should support reprojection of projectable nodes', () => {
       @Component({
         selector: 'reprojector',
-        template:
-            `<embedded-cmp-with-ngcontent><ng-content></ng-content></embedded-cmp-with-ngcontent>`,
+        template: `<embedded-cmp-with-ngcontent><ng-content></ng-content></embedded-cmp-with-ngcontent>`,
       })
-      class Reprojector {
-      }
+      class Reprojector {}
 
       TestBed.configureTestingModule({
         declarations: [
-          EmbeddedViewInsertionComp, VCRefDirective, Reprojector, EmbeddedComponentWithNgContent
+          EmbeddedViewInsertionComp,
+          VCRefDirective,
+          Reprojector,
+          EmbeddedComponentWithNgContent,
         ],
       });
       const fixture = TestBed.createComponent(EmbeddedViewInsertionComp);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       expect(getElementHtml(fixture.nativeElement)).toEqual('<p vcref=""></p>');
@@ -1398,18 +1465,19 @@ describe('ViewContainerRef', () => {
       vcRefDir.vcref.createComponent(Reprojector, {index: 0, projectableNodes: [[myNode]]});
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<p vcref=""></p><reprojector><embedded-cmp-with-ngcontent><hr><div>barbaz</div></embedded-cmp-with-ngcontent></reprojector>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<p vcref=""></p><reprojector><embedded-cmp-with-ngcontent><hr><div>barbaz</div></embedded-cmp-with-ngcontent></reprojector>',
+      );
     });
 
     it('should support many projectable nodes with many slots', () => {
       TestBed.configureTestingModule({
-        declarations: [EmbeddedViewInsertionComp, VCRefDirective, EmbeddedComponentWithNgContent]
+        declarations: [EmbeddedViewInsertionComp, VCRefDirective, EmbeddedComponentWithNgContent],
       });
       const fixture = TestBed.createComponent(EmbeddedViewInsertionComp);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
       expect(getElementHtml(fixture.nativeElement)).toEqual('<p vcref=""></p>');
@@ -1418,20 +1486,19 @@ describe('ViewContainerRef', () => {
         index: 0,
         projectableNodes: [
           [document.createTextNode('1'), document.createTextNode('2')],
-          [document.createTextNode('3'), document.createTextNode('4')]
-        ]
+          [document.createTextNode('3'), document.createTextNode('4')],
+        ],
       });
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<p vcref=""></p><embedded-cmp-with-ngcontent>12<hr>34</embedded-cmp-with-ngcontent>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<p vcref=""></p><embedded-cmp-with-ngcontent>12<hr>34</embedded-cmp-with-ngcontent>',
+      );
     });
 
     it('should not throw when calling destroy() multiple times for a ComponentRef', () => {
       @Component({template: ''})
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({declarations: [App]});
       const fixture = TestBed.createComponent(App);
@@ -1447,15 +1514,14 @@ describe('ViewContainerRef', () => {
           <div>Some random content</div>
           <!-- Note that it's important for the test that the <svg> element is last. -->
           <svg></svg>
-        `
+        `,
       })
       class TestComp {
         constructor(public viewContainerRef: ViewContainerRef) {}
       }
 
       @Component({selector: 'dynamic-comp', template: ''})
-      class DynamicComponent {
-      }
+      class DynamicComponent {}
 
       TestBed.configureTestingModule({declarations: [DynamicComponent]});
       const fixture = TestBed.createComponent(TestComp);
@@ -1465,43 +1531,41 @@ describe('ViewContainerRef', () => {
       // namespace state which will make the test pass.
 
       const componentRef =
-          fixture.componentInstance.viewContainerRef.createComponent(DynamicComponent);
+        fixture.componentInstance.viewContainerRef.createComponent(DynamicComponent);
       const element = componentRef.location.nativeElement;
       expect((element.namespaceURI || '').toLowerCase()).not.toContain('svg');
     });
 
-    it('should be compatible with componentRef generated via TestBed.createComponent in component factory',
-       () => {
-         @Component({
-           selector: 'child',
-           template: `Child Component`,
-         })
-         class Child {
-         }
+    it('should be compatible with componentRef generated via TestBed.createComponent in component factory', () => {
+      @Component({
+        selector: 'child',
+        template: `Child Component`,
+      })
+      class Child {}
 
-         @Component({
-           selector: 'comp',
-           template: '<ng-template #ref></ng-template>',
-         })
-         class Comp {
-           @ViewChild('ref', {read: ViewContainerRef, static: true})
-           viewContainerRef!: ViewContainerRef;
+      @Component({
+        selector: 'comp',
+        template: '<ng-template #ref></ng-template>',
+      })
+      class Comp {
+        @ViewChild('ref', {read: ViewContainerRef, static: true})
+        viewContainerRef!: ViewContainerRef;
 
-           ngOnInit() {
-             const makeComponentFactory = (componentType: any) => ({
-               create: () => TestBed.createComponent(componentType).componentRef,
-             });
-             this.viewContainerRef.createComponent(makeComponentFactory(Child) as any);
-           }
-         }
+        ngOnInit() {
+          const makeComponentFactory = (componentType: any) => ({
+            create: () => TestBed.createComponent(componentType).componentRef,
+          });
+          this.viewContainerRef.createComponent(makeComponentFactory(Child) as any);
+        }
+      }
 
-         TestBed.configureTestingModule({declarations: [Comp, Child]});
+      TestBed.configureTestingModule({declarations: [Comp, Child]});
 
-         const fixture = TestBed.createComponent(Comp);
-         fixture.detectChanges();
+      const fixture = TestBed.createComponent(Comp);
+      fixture.detectChanges();
 
-         expect(fixture.debugElement.nativeElement.innerHTML).toContain('Child Component');
-       });
+      expect(fixture.debugElement.nativeElement.innerHTML).toContain('Child Component');
+    });
 
     it('should return ComponentRef with ChangeDetectorRef attached to root view', () => {
       @Component({selector: 'dynamic-cmp', template: ``})
@@ -1548,8 +1612,7 @@ describe('ViewContainerRef', () => {
         selector: 'child-a',
         template: `[Child Component A]`,
       })
-      class ChildA {
-      }
+      class ChildA {}
 
       @Component({
         selector: 'child-b',
@@ -1561,7 +1624,10 @@ describe('ViewContainerRef', () => {
         `,
       })
       class ChildB {
-        constructor(private injector: Injector, public renderer: Renderer2) {}
+        constructor(
+          private injector: Injector,
+          public renderer: Renderer2,
+        ) {}
         get tokenA() {
           return this.injector.get(TOKEN_A);
         }
@@ -1573,24 +1639,21 @@ describe('ViewContainerRef', () => {
       @Component({
         selector: 'app',
         template: '',
-        providers: [
-          {provide: TOKEN_B, useValue: '[TokenB - Value]'},
-        ]
+        providers: [{provide: TOKEN_B, useValue: '[TokenB - Value]'}],
       })
       class App {
         constructor(
-            public viewContainerRef: ViewContainerRef, public ngModuleRef: NgModuleRef<unknown>,
-            public injector: Injector) {}
+          public viewContainerRef: ViewContainerRef,
+          public ngModuleRef: NgModuleRef<unknown>,
+          public injector: Injector,
+        ) {}
       }
 
       @NgModule({
         declarations: [App, ChildA, ChildB],
-        providers: [
-          {provide: TOKEN_A, useValue: '[TokenA - Value]'},
-        ]
+        providers: [{provide: TOKEN_A, useValue: '[TokenA - Value]'}],
       })
-      class AppModule {
-      }
+      class AppModule {}
 
       let fixture!: ComponentFixture<App>;
       beforeEach(() => {
@@ -1607,10 +1670,9 @@ describe('ViewContainerRef', () => {
       it('should maintain connection with module injector when custom injector is provided', () => {
         const comp = fixture.componentInstance;
         const environmentInjector = createEnvironmentInjector(
-            [
-              {provide: TOKEN_B, useValue: '[TokenB - CustomValue]'},
-            ],
-            TestBed.inject(EnvironmentInjector));
+          [{provide: TOKEN_B, useValue: '[TokenB - CustomValue]'}],
+          TestBed.inject(EnvironmentInjector),
+        );
 
         // Use factory-less way of creating a component.
         comp.viewContainerRef.createComponent(ChildB, {injector: environmentInjector});
@@ -1618,8 +1680,9 @@ describe('ViewContainerRef', () => {
 
         // Custom injector provides only `TOKEN_B`,
         // so `TOKEN_A` should be retrieved from the module injector.
-        expect(getElementText(fixture.nativeElement.parentNode))
-            .toContain('[TokenA - Value] [TokenB - CustomValue]');
+        expect(getElementText(fixture.nativeElement.parentNode)).toContain(
+          '[TokenA - Value] [TokenB - CustomValue]',
+        );
 
         // Use factory-based API to compare the output with the factory-less one.
         const factoryBasedChildB = createComponent(ChildB, {environmentInjector});
@@ -1627,18 +1690,21 @@ describe('ViewContainerRef', () => {
 
         // Custom injector provides only `TOKEN_B`,
         // so `TOKEN_A` should be retrieved from the module injector
-        expect(getElementText(fixture.nativeElement.parentNode))
-            .toContain('[TokenA - Value] [TokenB - CustomValue]');
+        expect(getElementText(fixture.nativeElement.parentNode)).toContain(
+          '[TokenA - Value] [TokenB - CustomValue]',
+        );
       });
 
       it('should throw if class without @Component decorator is used as Component type', () => {
         class MyClassWithoutComponentDecorator {}
         const createComponent = () => {
           fixture.componentInstance.viewContainerRef.createComponent(
-              MyClassWithoutComponentDecorator);
+            MyClassWithoutComponentDecorator,
+          );
         };
-        expect(createComponent)
-            .toThrowError(/Provided Component class doesn't contain Component definition./);
+        expect(createComponent).toThrowError(
+          /Provided Component class doesn't contain Component definition./,
+        );
       });
 
       describe('`options` argument handling', () => {
@@ -1657,18 +1723,22 @@ describe('ViewContainerRef', () => {
           const projectableNodes = [[projectableNode]];
 
           // Insert ChildB in front of ChildA (since index = 0)
-          viewContainerRef.createComponent(
-              ChildB, {index: 0, injector, ngModuleRef, projectableNodes});
+          viewContainerRef.createComponent(ChildB, {
+            index: 0,
+            injector,
+            ngModuleRef,
+            projectableNodes,
+          });
 
           fixture.detectChanges();
 
-          expect(getElementText(fixture.nativeElement.parentNode))
-              .toContain(
-                  '[Child Component B] ' +
-                  '[Projectable Node] ' +
-                  '[TokenA - Value] ' +
-                  '[TokenB - Value] ' +
-                  '[Child Component A]');
+          expect(getElementText(fixture.nativeElement.parentNode)).toContain(
+            '[Child Component B] ' +
+              '[Projectable Node] ' +
+              '[TokenA - Value] ' +
+              '[TokenB - Value] ' +
+              '[Child Component A]',
+          );
         });
       });
     });
@@ -1678,7 +1748,7 @@ describe('ViewContainerRef', () => {
     @Directive({selector: '[tplDir]'})
     class InsertionDir {
       @Input()
-      set tplDir(tpl: TemplateRef<any>|null) {
+      set tplDir(tpl: TemplateRef<any> | null) {
         tpl ? this.vcr.createEmbeddedView(tpl) : this.vcr.clear();
       }
 
@@ -1689,7 +1759,7 @@ describe('ViewContainerRef', () => {
     it('should work with a template declared in a different component view from insertion', () => {
       @Component({selector: 'child', template: `<div [tplDir]="tpl">{{name}}</div>`})
       class Child {
-        @Input() tpl: TemplateRef<any>|null = null;
+        @Input() tpl: TemplateRef<any> | null = null;
         name = 'Child';
       }
 
@@ -1700,7 +1770,7 @@ describe('ViewContainerRef', () => {
           </ng-template>
 
           <child [tpl]="foo"></child>
-        `
+        `,
       })
       class Parent {
         name = 'Parent';
@@ -1713,8 +1783,9 @@ describe('ViewContainerRef', () => {
 
       // Context should be inherited from the declaration point, not the
       // insertion point, so the template should read 'Parent'.
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(`<child><div>Child</div><div>Parent</div></child>`);
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        `<child><div>Child</div><div>Parent</div></child>`,
+      );
 
       child.tpl = null;
       fixture.detectChanges();
@@ -1751,38 +1822,43 @@ describe('ViewContainerRef', () => {
       })
       class Parent {
         name = 'Parent';
-        rows = [{data: ['1', '2'], value: 'one'}, {data: ['3', '4'], value: 'two'}];
+        rows = [
+          {data: ['1', '2'], value: 'one'},
+          {data: ['3', '4'], value: 'two'},
+        ];
       }
 
       TestBed.configureTestingModule({declarations: [LoopComp, Parent], imports: [CommonModule]});
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<loop-comp>' +
-              '<loop-comp><div>1 - one - Parent</div><div>2 - one - Parent</div></loop-comp>' +
-              '<loop-comp><div>3 - two - Parent</div><div>4 - two - Parent</div></loop-comp>' +
-              '</loop-comp>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<loop-comp>' +
+          '<loop-comp><div>1 - one - Parent</div><div>2 - one - Parent</div></loop-comp>' +
+          '<loop-comp><div>3 - two - Parent</div><div>4 - two - Parent</div></loop-comp>' +
+          '</loop-comp>',
+      );
 
-      fixture.componentInstance.rows =
-          [{data: ['5', '6'], value: 'three'}, {data: ['7'], value: 'four'}];
+      fixture.componentInstance.rows = [
+        {data: ['5', '6'], value: 'three'},
+        {data: ['7'], value: 'four'},
+      ];
       fixture.componentInstance.name = 'New name!';
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<loop-comp>' +
-              '<loop-comp><div>5 - three - New name!</div><div>6 - three - New name!</div></loop-comp>' +
-              '<loop-comp><div>7 - four - New name!</div></loop-comp>' +
-              '</loop-comp>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<loop-comp>' +
+          '<loop-comp><div>5 - three - New name!</div><div>6 - three - New name!</div></loop-comp>' +
+          '<loop-comp><div>7 - four - New name!</div></loop-comp>' +
+          '</loop-comp>',
+      );
     });
 
     it('should insert elements in the proper order when template root is an ng-container', () => {
       @Component({
         template: `
           <ng-container *ngFor="let item of items">|{{ item }}|</ng-container>
-        `
+        `,
       })
       class App {
         items = ['one', 'two', 'three'];
@@ -1807,149 +1883,150 @@ describe('ViewContainerRef', () => {
       fixture.componentInstance.items.splice(3, 0, 'two point five');
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.textContent)
-          .toBe('|zero||one||two||two point five||three||four|');
+      expect(fixture.nativeElement.textContent).toBe(
+        '|zero||one||two||two point five||three||four|',
+      );
     });
 
-    it('should insert elements in the proper order when template root is an ng-container and is wrapped by an ng-container',
-       () => {
-         @Component({
-           template: `
+    it('should insert elements in the proper order when template root is an ng-container and is wrapped by an ng-container', () => {
+      @Component({
+        template: `
               <ng-container>
                 <ng-container *ngFor="let item of items">|{{ item }}|</ng-container>
               </ng-container>
-            `
-         })
-         class App {
-           items = ['one', 'two', 'three'];
-         }
+            `,
+      })
+      class App {
+        items = ['one', 'two', 'three'];
+      }
 
-         TestBed.configureTestingModule({imports: [CommonModule], declarations: [App]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
+      TestBed.configureTestingModule({imports: [CommonModule], declarations: [App]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent).toBe('|one||two||three|');
+      expect(fixture.nativeElement.textContent).toBe('|one||two||three|');
 
-         fixture.componentInstance.items.unshift('zero');
-         fixture.detectChanges();
+      fixture.componentInstance.items.unshift('zero');
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three|');
+      expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three|');
 
-         fixture.componentInstance.items.push('four');
-         fixture.detectChanges();
+      fixture.componentInstance.items.push('four');
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three||four|');
+      expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three||four|');
 
-         fixture.componentInstance.items.splice(3, 0, 'two point five');
-         fixture.detectChanges();
+      fixture.componentInstance.items.splice(3, 0, 'two point five');
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent)
-             .toBe('|zero||one||two||two point five||three||four|');
-       });
+      expect(fixture.nativeElement.textContent).toBe(
+        '|zero||one||two||two point five||three||four|',
+      );
+    });
 
-    it('should insert elements in the proper order when template root is an ng-container and first node is a ng-container',
-       () => {
-         @Component({
-           template: `
+    it('should insert elements in the proper order when template root is an ng-container and first node is a ng-container', () => {
+      @Component({
+        template: `
             <ng-container *ngFor="let item of items"><ng-container>|{{ item }}|</ng-container></ng-container>
-          `
-         })
-         class App {
-           items = ['one', 'two', 'three'];
-         }
+          `,
+      })
+      class App {
+        items = ['one', 'two', 'three'];
+      }
 
-         TestBed.configureTestingModule({imports: [CommonModule], declarations: [App]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
+      TestBed.configureTestingModule({imports: [CommonModule], declarations: [App]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent).toBe('|one||two||three|');
+      expect(fixture.nativeElement.textContent).toBe('|one||two||three|');
 
-         fixture.componentInstance.items.unshift('zero');
-         fixture.detectChanges();
+      fixture.componentInstance.items.unshift('zero');
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three|');
+      expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three|');
 
-         fixture.componentInstance.items.push('four');
-         fixture.detectChanges();
+      fixture.componentInstance.items.push('four');
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three||four|');
+      expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three||four|');
 
-         fixture.componentInstance.items.splice(3, 0, 'two point five');
-         fixture.detectChanges();
+      fixture.componentInstance.items.splice(3, 0, 'two point five');
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent)
-             .toBe('|zero||one||two||two point five||three||four|');
-       });
+      expect(fixture.nativeElement.textContent).toBe(
+        '|zero||one||two||two point five||three||four|',
+      );
+    });
 
-    it('should insert elements in the proper order when template root is an ng-container, wrapped in an ng-container with the root node as an ng-container',
-       () => {
-         @Component({
-           template: `
+    it('should insert elements in the proper order when template root is an ng-container, wrapped in an ng-container with the root node as an ng-container', () => {
+      @Component({
+        template: `
             <ng-container>
               <ng-container *ngFor="let item of items"><ng-container>|{{ item }}|</ng-container></ng-container>
             </ng-container>
-          `
-         })
-         class App {
-           items = ['one', 'two', 'three'];
-         }
+          `,
+      })
+      class App {
+        items = ['one', 'two', 'three'];
+      }
 
-         TestBed.configureTestingModule({imports: [CommonModule], declarations: [App]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
+      TestBed.configureTestingModule({imports: [CommonModule], declarations: [App]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent).toBe('|one||two||three|');
+      expect(fixture.nativeElement.textContent).toBe('|one||two||three|');
 
-         fixture.componentInstance.items.unshift('zero');
-         fixture.detectChanges();
+      fixture.componentInstance.items.unshift('zero');
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three|');
+      expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three|');
 
-         fixture.componentInstance.items.push('four');
-         fixture.detectChanges();
+      fixture.componentInstance.items.push('four');
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three||four|');
+      expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three||four|');
 
-         fixture.componentInstance.items.splice(3, 0, 'two point five');
-         fixture.detectChanges();
+      fixture.componentInstance.items.splice(3, 0, 'two point five');
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent)
-             .toBe('|zero||one||two||two point five||three||four|');
-       });
+      expect(fixture.nativeElement.textContent).toBe(
+        '|zero||one||two||two point five||three||four|',
+      );
+    });
 
-    it('should insert elements in the proper order when the first child node is an ICU expression',
-       () => {
-         @Component({
-           template: `
+    it('should insert elements in the proper order when the first child node is an ICU expression', () => {
+      @Component({
+        template: `
           <ng-container *ngFor="let item of items">{count, select, other {|{{ item }}|}}</ng-container>
-        `
-         })
-         class App {
-           items = ['one', 'two', 'three'];
-         }
+        `,
+      })
+      class App {
+        items = ['one', 'two', 'three'];
+      }
 
-         TestBed.configureTestingModule({imports: [CommonModule], declarations: [App]});
-         const fixture = TestBed.createComponent(App);
-         fixture.detectChanges();
+      TestBed.configureTestingModule({imports: [CommonModule], declarations: [App]});
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent).toBe('|one||two||three|');
+      expect(fixture.nativeElement.textContent).toBe('|one||two||three|');
 
-         fixture.componentInstance.items.unshift('zero');
-         fixture.detectChanges();
+      fixture.componentInstance.items.unshift('zero');
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three|');
+      expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three|');
 
-         fixture.componentInstance.items.push('four');
-         fixture.detectChanges();
+      fixture.componentInstance.items.push('four');
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three||four|');
+      expect(fixture.nativeElement.textContent).toBe('|zero||one||two||three||four|');
 
-         fixture.componentInstance.items.splice(3, 0, 'two point five');
-         fixture.detectChanges();
+      fixture.componentInstance.items.splice(3, 0, 'two point five');
+      fixture.detectChanges();
 
-         expect(fixture.nativeElement.textContent)
-             .toBe('|zero||one||two||two point five||three||four|');
-       });
+      expect(fixture.nativeElement.textContent).toBe(
+        '|zero||one||two||two point five||three||four|',
+      );
+    });
   });
 
   describe('lifecycle hooks', () => {
@@ -1958,7 +2035,7 @@ describe('ViewContainerRef', () => {
 
     @Component({selector: 'hooks', template: `{{name}}`})
     class ComponentWithHooks {
-      @Input() name: string|undefined;
+      @Input() name: string | undefined;
 
       private log(msg: string) {
         log.push(msg);
@@ -2001,10 +2078,9 @@ describe('ViewContainerRef', () => {
           </ng-template>
           <hooks vcref [tplRef]="foo" [name]="'A'"></hooks>
           <hooks [name]="'B'"></hooks>
-        `
+        `,
       })
-      class SomeComponent {
-      }
+      class SomeComponent {}
 
       log.length = 0;
 
@@ -2012,69 +2088,119 @@ describe('ViewContainerRef', () => {
         declarations: [SomeComponent, ComponentWithHooks, VCRefDirective],
       });
       const fixture = TestBed.createComponent(SomeComponent);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
 
       fixture.detectChanges();
       expect(log).toEqual([
-        'onChanges-A', 'onInit-A', 'doCheck-A', 'onChanges-B', 'onInit-B', 'doCheck-B',
-        'afterContentInit-A', 'afterContentChecked-A', 'afterContentInit-B',
-        'afterContentChecked-B', 'afterViewInit-A', 'afterViewChecked-A', 'afterViewInit-B',
-        'afterViewChecked-B'
+        'onChanges-A',
+        'onInit-A',
+        'doCheck-A',
+        'onChanges-B',
+        'onInit-B',
+        'doCheck-B',
+        'afterContentInit-A',
+        'afterContentChecked-A',
+        'afterContentInit-B',
+        'afterContentChecked-B',
+        'afterViewInit-A',
+        'afterViewChecked-A',
+        'afterViewInit-B',
+        'afterViewChecked-B',
       ]);
 
       log.length = 0;
       fixture.detectChanges();
       expect(log).toEqual([
-        'doCheck-A', 'doCheck-B', 'afterContentChecked-A', 'afterContentChecked-B',
-        'afterViewChecked-A', 'afterViewChecked-B'
+        'doCheck-A',
+        'doCheck-B',
+        'afterContentChecked-A',
+        'afterContentChecked-B',
+        'afterViewChecked-A',
+        'afterViewChecked-B',
       ]);
 
       log.length = 0;
       vcRefDir.vcref.createEmbeddedView(vcRefDir.tplRef!);
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<hooks vcref="">A</hooks><hooks></hooks><hooks>B</hooks>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<hooks vcref="">A</hooks><hooks></hooks><hooks>B</hooks>',
+      );
       expect(log).toEqual([]);
 
       log.length = 0;
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<hooks vcref="">A</hooks><hooks>C</hooks><hooks>B</hooks>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<hooks vcref="">A</hooks><hooks>C</hooks><hooks>B</hooks>',
+      );
       expect(log).toEqual([
-        'doCheck-A', 'doCheck-B', 'onChanges-C', 'onInit-C', 'doCheck-C', 'afterContentInit-C',
-        'afterContentChecked-C', 'afterViewInit-C', 'afterViewChecked-C', 'afterContentChecked-A',
-        'afterContentChecked-B', 'afterViewChecked-A', 'afterViewChecked-B'
+        'doCheck-A',
+        'doCheck-B',
+        'onChanges-C',
+        'onInit-C',
+        'doCheck-C',
+        'afterContentInit-C',
+        'afterContentChecked-C',
+        'afterViewInit-C',
+        'afterViewChecked-C',
+        'afterContentChecked-A',
+        'afterContentChecked-B',
+        'afterViewChecked-A',
+        'afterViewChecked-B',
       ]);
 
       log.length = 0;
       fixture.detectChanges();
       expect(log).toEqual([
-        'doCheck-A', 'doCheck-B', 'doCheck-C', 'afterContentChecked-C', 'afterViewChecked-C',
-        'afterContentChecked-A', 'afterContentChecked-B', 'afterViewChecked-A', 'afterViewChecked-B'
+        'doCheck-A',
+        'doCheck-B',
+        'doCheck-C',
+        'afterContentChecked-C',
+        'afterViewChecked-C',
+        'afterContentChecked-A',
+        'afterContentChecked-B',
+        'afterViewChecked-A',
+        'afterViewChecked-B',
       ]);
 
       log.length = 0;
       const viewRef = vcRefDir.vcref.detach(0);
       fixture.detectChanges();
       expect(log).toEqual([
-        'doCheck-A', 'doCheck-B', 'afterContentChecked-A', 'afterContentChecked-B',
-        'afterViewChecked-A', 'afterViewChecked-B'
+        'doCheck-A',
+        'doCheck-B',
+        'afterContentChecked-A',
+        'afterContentChecked-B',
+        'afterViewChecked-A',
+        'afterViewChecked-B',
       ]);
 
       log.length = 0;
       vcRefDir.vcref.insert(viewRef!);
       fixture.detectChanges();
       expect(log).toEqual([
-        'doCheck-A', 'doCheck-B', 'doCheck-C', 'afterContentChecked-C', 'afterViewChecked-C',
-        'afterContentChecked-A', 'afterContentChecked-B', 'afterViewChecked-A', 'afterViewChecked-B'
+        'doCheck-A',
+        'doCheck-B',
+        'doCheck-C',
+        'afterContentChecked-C',
+        'afterViewChecked-C',
+        'afterContentChecked-A',
+        'afterContentChecked-B',
+        'afterViewChecked-A',
+        'afterViewChecked-B',
       ]);
 
       log.length = 0;
       vcRefDir.vcref.remove(0);
       fixture.detectChanges();
       expect(log).toEqual([
-        'onDestroy-C', 'doCheck-A', 'doCheck-B', 'afterContentChecked-A', 'afterContentChecked-B',
-        'afterViewChecked-A', 'afterViewChecked-B'
+        'onDestroy-C',
+        'doCheck-A',
+        'doCheck-B',
+        'afterContentChecked-A',
+        'afterContentChecked-B',
+        'afterViewChecked-A',
+        'afterViewChecked-B',
       ]);
     });
 
@@ -2083,88 +2209,140 @@ describe('ViewContainerRef', () => {
         template: `
           <hooks vcref [name]="'A'"></hooks>
           <hooks [name]="'B'"></hooks>
-        `
+        `,
       })
-      class SomeComponent {
-      }
+      class SomeComponent {}
 
       log.length = 0;
 
-      TestBed.configureTestingModule(
-          {declarations: [SomeComponent, VCRefDirective, ComponentWithHooks]});
+      TestBed.configureTestingModule({
+        declarations: [SomeComponent, VCRefDirective, ComponentWithHooks],
+      });
       const fixture = TestBed.createComponent(SomeComponent);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
 
       fixture.detectChanges();
       expect(log).toEqual([
-        'onChanges-A', 'onInit-A', 'doCheck-A', 'onChanges-B', 'onInit-B', 'doCheck-B',
-        'afterContentInit-A', 'afterContentChecked-A', 'afterContentInit-B',
-        'afterContentChecked-B', 'afterViewInit-A', 'afterViewChecked-A', 'afterViewInit-B',
-        'afterViewChecked-B'
+        'onChanges-A',
+        'onInit-A',
+        'doCheck-A',
+        'onChanges-B',
+        'onInit-B',
+        'doCheck-B',
+        'afterContentInit-A',
+        'afterContentChecked-A',
+        'afterContentInit-B',
+        'afterContentChecked-B',
+        'afterViewInit-A',
+        'afterViewChecked-A',
+        'afterViewInit-B',
+        'afterViewChecked-B',
       ]);
 
       log.length = 0;
       fixture.detectChanges();
       expect(log).toEqual([
-        'doCheck-A', 'doCheck-B', 'afterContentChecked-A', 'afterContentChecked-B',
-        'afterViewChecked-A', 'afterViewChecked-B'
+        'doCheck-A',
+        'doCheck-B',
+        'afterContentChecked-A',
+        'afterContentChecked-B',
+        'afterViewChecked-A',
+        'afterViewChecked-B',
       ]);
 
       log.length = 0;
       const componentRef = vcRefDir.vcref.createComponent(ComponentWithHooks);
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<hooks vcref="">A</hooks><hooks></hooks><hooks>B</hooks>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<hooks vcref="">A</hooks><hooks></hooks><hooks>B</hooks>',
+      );
       expect(log).toEqual([]);
 
       componentRef.instance.name = 'D';
       log.length = 0;
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<hooks vcref="">A</hooks><hooks>D</hooks><hooks>B</hooks>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<hooks vcref="">A</hooks><hooks>D</hooks><hooks>B</hooks>',
+      );
       expect(log).toEqual([
-        'doCheck-A', 'doCheck-B', 'onInit-D', 'doCheck-D', 'afterContentInit-D',
-        'afterContentChecked-D', 'afterViewInit-D', 'afterViewChecked-D', 'afterContentChecked-A',
-        'afterContentChecked-B', 'afterViewChecked-A', 'afterViewChecked-B'
+        'doCheck-A',
+        'doCheck-B',
+        'onInit-D',
+        'doCheck-D',
+        'afterContentInit-D',
+        'afterContentChecked-D',
+        'afterViewInit-D',
+        'afterViewChecked-D',
+        'afterContentChecked-A',
+        'afterContentChecked-B',
+        'afterViewChecked-A',
+        'afterViewChecked-B',
       ]);
 
       log.length = 0;
       fixture.detectChanges();
       expect(log).toEqual([
-        'doCheck-A', 'doCheck-B', 'doCheck-D', 'afterContentChecked-D', 'afterViewChecked-D',
-        'afterContentChecked-A', 'afterContentChecked-B', 'afterViewChecked-A', 'afterViewChecked-B'
+        'doCheck-A',
+        'doCheck-B',
+        'doCheck-D',
+        'afterContentChecked-D',
+        'afterViewChecked-D',
+        'afterContentChecked-A',
+        'afterContentChecked-B',
+        'afterViewChecked-A',
+        'afterViewChecked-B',
       ]);
 
       log.length = 0;
       const viewRef = vcRefDir.vcref.detach(0);
       fixture.detectChanges();
       expect(log).toEqual([
-        'doCheck-A', 'doCheck-B', 'afterContentChecked-A', 'afterContentChecked-B',
-        'afterViewChecked-A', 'afterViewChecked-B'
+        'doCheck-A',
+        'doCheck-B',
+        'afterContentChecked-A',
+        'afterContentChecked-B',
+        'afterViewChecked-A',
+        'afterViewChecked-B',
       ]);
 
       log.length = 0;
       vcRefDir.vcref.insert(viewRef!);
       fixture.detectChanges();
       expect(log).toEqual([
-        'doCheck-A', 'doCheck-B', 'doCheck-D', 'afterContentChecked-D', 'afterViewChecked-D',
-        'afterContentChecked-A', 'afterContentChecked-B', 'afterViewChecked-A', 'afterViewChecked-B'
+        'doCheck-A',
+        'doCheck-B',
+        'doCheck-D',
+        'afterContentChecked-D',
+        'afterViewChecked-D',
+        'afterContentChecked-A',
+        'afterContentChecked-B',
+        'afterViewChecked-A',
+        'afterViewChecked-B',
       ]);
 
       log.length = 0;
       vcRefDir.vcref.remove(0);
       fixture.detectChanges();
       expect(log).toEqual([
-        'onDestroy-D', 'doCheck-A', 'doCheck-B', 'afterContentChecked-A', 'afterContentChecked-B',
-        'afterViewChecked-A', 'afterViewChecked-B'
+        'onDestroy-D',
+        'doCheck-A',
+        'doCheck-B',
+        'afterContentChecked-A',
+        'afterContentChecked-B',
+        'afterViewChecked-A',
+        'afterViewChecked-B',
       ]);
     });
   });
 
   describe('host bindings', () => {
     it('should support host bindings on dynamically created components', () => {
-      @Component(
-          {selector: 'host-bindings', host: {'id': 'attribute', '[title]': 'title'}, template: ``})
+      @Component({
+        selector: 'host-bindings',
+        host: {'id': 'attribute', '[title]': 'title'},
+        template: ``,
+      })
       class HostBindingCmpt {
         title = 'initial';
       }
@@ -2174,8 +2352,9 @@ describe('ViewContainerRef', () => {
         @ViewChild(VCRefDirective, {static: true}) vcRefDir!: VCRefDirective;
       }
 
-      TestBed.configureTestingModule(
-          {declarations: [TestComponent, VCRefDirective, HostBindingCmpt]});
+      TestBed.configureTestingModule({
+        declarations: [TestComponent, VCRefDirective, HostBindingCmpt],
+      });
       const fixture = TestBed.createComponent(TestComponent);
       const {vcRefDir} = fixture.componentInstance;
 
@@ -2201,8 +2380,7 @@ describe('ViewContainerRef', () => {
   describe('projection', () => {
     it('should project the ViewContainerRef content along its host, in an element', () => {
       @Component({selector: 'child', template: '<div><ng-content></ng-content></div>'})
-      class Child {
-      }
+      class Child {}
 
       @Component({
         selector: 'parent',
@@ -2213,7 +2391,7 @@ describe('ViewContainerRef', () => {
 
           <child>
             <header vcref [tplRef]="foo" [name]="name">blah</header>
-          </child>`
+          </child>`,
       })
       class Parent {
         name: string = 'bar';
@@ -2221,23 +2399,26 @@ describe('ViewContainerRef', () => {
 
       TestBed.configureTestingModule({declarations: [Child, Parent, VCRefDirective]});
       const fixture = TestBed.createComponent(Parent);
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<child><div><header vcref="">blah</header></div></child>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child><div><header vcref="">blah</header></div></child>',
+      );
 
       vcRefDir.vcref.createEmbeddedView(vcRefDir.tplRef!);
       fixture.detectChanges();
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual('<child><div><header vcref="">blah</header><span>bar</span></div></child>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child><div><header vcref="">blah</header><span>bar</span></div></child>',
+      );
     });
 
     it('should project the ViewContainerRef content along its host, in a view', () => {
       @Component({
         selector: 'child-with-view',
-        template: `Before (inside)-<ng-content *ngIf="show"></ng-content>-After (inside)`
+        template: `Before (inside)-<ng-content *ngIf="show"></ng-content>-After (inside)`,
       })
       class ChildWithView {
         show: boolean = true;
@@ -2253,7 +2434,7 @@ describe('ViewContainerRef', () => {
             Before projected
             <header vcref [tplRef]="foo" [name]="name">blah</header>
             After projected
-          </child-with-view>`
+          </child-with-view>`,
       })
       class Parent {
         name: string = 'bar';
@@ -2262,19 +2443,20 @@ describe('ViewContainerRef', () => {
       TestBed.configureTestingModule({declarations: [ChildWithView, Parent, VCRefDirective]});
       const fixture = TestBed.createComponent(Parent);
       fixture.detectChanges();
-      const vcRefDir =
-          fixture.debugElement.query(By.directive(VCRefDirective)).injector.get(VCRefDirective);
+      const vcRefDir = fixture.debugElement
+        .query(By.directive(VCRefDirective))
+        .injector.get(VCRefDirective);
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<child-with-view>Before (inside)- Before projected <header vcref="">blah</header> After projected -After (inside)</child-with-view>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child-with-view>Before (inside)- Before projected <header vcref="">blah</header> After projected -After (inside)</child-with-view>',
+      );
 
       vcRefDir.vcref.createEmbeddedView(vcRefDir.tplRef!);
       fixture.detectChanges();
 
-      expect(getElementHtml(fixture.nativeElement))
-          .toEqual(
-              '<child-with-view>Before (inside)- Before projected <header vcref="">blah</header><span>bar</span> After projected -After (inside)</child-with-view>');
+      expect(getElementHtml(fixture.nativeElement)).toEqual(
+        '<child-with-view>Before (inside)- Before projected <header vcref="">blah</header><span>bar</span> After projected -After (inside)</child-with-view>',
+      );
     });
 
     it('should handle empty re-projection into the root of a view', () => {
@@ -2288,7 +2470,7 @@ describe('ViewContainerRef', () => {
 
       @Component({
         selector: 'my-app',
-        template: `<root-comp [show]="show"><ng-content></ng-content><div></div></root-comp>`
+        template: `<root-comp [show]="show"><ng-content></ng-content><div></div></root-comp>`,
       })
       class MyApp {
         show = true;
@@ -2311,52 +2493,49 @@ describe('ViewContainerRef', () => {
           <p class="a"><ng-content select="header"></ng-content></p>
           <p class="b"><ng-content></ng-content></p>`,
       })
-      class ChildWithSelector {
-      }
+      class ChildWithSelector {}
 
-      it('should project the ViewContainerRef content along its host, when the host matches a selector',
-         () => {
-           @Component({
-             selector: 'parent',
-             template: `
+      it('should project the ViewContainerRef content along its host, when the host matches a selector', () => {
+        @Component({
+          selector: 'parent',
+          template: `
             <ng-template #foo>
               <span>{{name}}</span>
             </ng-template>
             <child-with-selector>
               <header vcref [tplRef]="foo" [name]="name">blah</header>
             </child-with-selector>
-          `
-           })
-           class Parent {
-             name: string = 'bar';
-           }
-
-           TestBed.configureTestingModule(
-               {declarations: [Parent, ChildWithSelector, VCRefDirective]});
-           const fixture = TestBed.createComponent(Parent);
-           const vcRefDir = fixture.debugElement.query(By.directive(VCRefDirective))
-                                .injector.get(VCRefDirective);
-           fixture.detectChanges();
-
-           expect(getElementHtml(fixture.nativeElement))
-               .toEqual(
-                   '<child-with-selector><p class="a"><header vcref="">blah</header></p><p class="b"></p></child-with-selector>');
-
-           vcRefDir.vcref.createEmbeddedView(vcRefDir.tplRef!);
-           fixture.detectChanges();
-
-           expect(getElementHtml(fixture.nativeElement))
-               .toEqual(
-                   '<child-with-selector><p class="a"><header vcref="">blah</header><span>bar</span></p><p class="b"></p></child-with-selector>');
-         });
+          `,
+        })
+        class Parent {
+          name: string = 'bar';
+        }
+
+        TestBed.configureTestingModule({declarations: [Parent, ChildWithSelector, VCRefDirective]});
+        const fixture = TestBed.createComponent(Parent);
+        const vcRefDir = fixture.debugElement
+          .query(By.directive(VCRefDirective))
+          .injector.get(VCRefDirective);
+        fixture.detectChanges();
+
+        expect(getElementHtml(fixture.nativeElement)).toEqual(
+          '<child-with-selector><p class="a"><header vcref="">blah</header></p><p class="b"></p></child-with-selector>',
+        );
+
+        vcRefDir.vcref.createEmbeddedView(vcRefDir.tplRef!);
+        fixture.detectChanges();
+
+        expect(getElementHtml(fixture.nativeElement)).toEqual(
+          '<child-with-selector><p class="a"><header vcref="">blah</header><span>bar</span></p><p class="b"></p></child-with-selector>',
+        );
+      });
 
       it('should create embedded view when ViewContainerRef is inside projection', () => {
         @Component({
           selector: 'content-comp',
           template: '<ng-content></ng-content>',
         })
-        class ContentComp {
-        }
+        class ContentComp {}
 
         @Component({
           selector: 'my-comp',
@@ -2366,7 +2545,7 @@ describe('ViewContainerRef', () => {
           </content-comp>
 
           <ng-template #source>My Content</ng-template>
-        `
+        `,
         })
         class MyComp {
           @ViewChild('source', {static: true}) source!: TemplateRef<{}>;
@@ -2384,48 +2563,47 @@ describe('ViewContainerRef', () => {
         expect(fixture.debugElement.nativeElement.innerHTML).toContain('My Content');
       });
 
-      it('should not project the ViewContainerRef content, when the host does not match a selector',
-         () => {
-           @Component({
-             selector: 'parent',
-             template: `
+      it('should not project the ViewContainerRef content, when the host does not match a selector', () => {
+        @Component({
+          selector: 'parent',
+          template: `
             <ng-template #foo>
               <span>{{name}}</span>
             </ng-template>
             <child-with-selector>
               <footer vcref [tplRef]="foo" [name]="name">blah</footer>
             </child-with-selector>
-          `
-           })
-           class Parent {
-             name: string = 'bar';
-           }
-
-           TestBed.configureTestingModule(
-               {declarations: [Parent, ChildWithSelector, VCRefDirective]});
-           const fixture = TestBed.createComponent(Parent);
-           const vcRefDir = fixture.debugElement.query(By.directive(VCRefDirective))
-                                .injector.get(VCRefDirective);
-           fixture.detectChanges();
-
-           expect(getElementHtml(fixture.nativeElement))
-               .toEqual(
-                   '<child-with-selector><p class="a"></p><p class="b"><footer vcref="">blah</footer></p></child-with-selector>');
-
-           vcRefDir.vcref.createEmbeddedView(vcRefDir.tplRef!);
-           fixture.detectChanges();
-
-           expect(getElementHtml(fixture.nativeElement))
-               .toEqual(
-                   '<child-with-selector><p class="a"></p><p class="b"><footer vcref="">blah</footer><span>bar</span></p></child-with-selector>');
-         });
+          `,
+        })
+        class Parent {
+          name: string = 'bar';
+        }
+
+        TestBed.configureTestingModule({declarations: [Parent, ChildWithSelector, VCRefDirective]});
+        const fixture = TestBed.createComponent(Parent);
+        const vcRefDir = fixture.debugElement
+          .query(By.directive(VCRefDirective))
+          .injector.get(VCRefDirective);
+        fixture.detectChanges();
+
+        expect(getElementHtml(fixture.nativeElement)).toEqual(
+          '<child-with-selector><p class="a"></p><p class="b"><footer vcref="">blah</footer></p></child-with-selector>',
+        );
+
+        vcRefDir.vcref.createEmbeddedView(vcRefDir.tplRef!);
+        fixture.detectChanges();
+
+        expect(getElementHtml(fixture.nativeElement)).toEqual(
+          '<child-with-selector><p class="a"></p><p class="b"><footer vcref="">blah</footer><span>bar</span></p></child-with-selector>',
+        );
+      });
     });
   });
 
   describe('root view container ref', () => {
-    let containerEl: HTMLElement|null = null;
+    let containerEl: HTMLElement | null = null;
 
-    beforeEach(() => containerEl = null);
+    beforeEach(() => (containerEl = null));
 
     /**
      * Creates a new test component renderer instance that wraps the root element
@@ -2446,14 +2624,14 @@ describe('ViewContainerRef', () => {
           if (containerEl) {
             containerEl.parentNode?.removeChild(containerEl);
           }
-        }
+        },
       };
     }
 
     const TEST_COMPONENT_RENDERER = {
       provide: TestComponentRenderer,
       useFactory: createTestComponentRenderer,
-      deps: [DOCUMENT]
+      deps: [DOCUMENT],
     };
 
     it('should check bindings for components dynamically created by root component', () => {
@@ -2474,10 +2652,9 @@ describe('ViewContainerRef', () => {
         constructor(public vcRef: ViewContainerRef) {}
       }
 
-
       TestBed.configureTestingModule({
         declarations: [TestComp, DynamicCompWithBindings],
-        providers: [TEST_COMPONENT_RENDERER]
+        providers: [TEST_COMPONENT_RENDERER],
       });
       const fixture = TestBed.createComponent(TestComp);
       const {vcRef} = fixture.componentInstance;
@@ -2512,13 +2689,11 @@ describe('ViewContainerRef', () => {
       }
 
       @Component({selector: 'dynamic-cmpt-with-children', template: `<child></child>`})
-      class DynamicCompWithChildren {
-      }
-
+      class DynamicCompWithChildren {}
 
       TestBed.configureTestingModule({
         declarations: [TestComp, DynamicCompWithChildren, Child],
-        providers: [TEST_COMPONENT_RENDERER]
+        providers: [TEST_COMPONENT_RENDERER],
       });
 
       const fixture = TestBed.createComponent(TestComp);
@@ -2533,14 +2708,16 @@ describe('ViewContainerRef', () => {
       vcRef.createComponent(DynamicCompWithChildren);
 
       expect(containerEl!.childNodes.length).toBe(3);
-      expect(getElementHtml(containerEl!.childNodes[1] as Element))
-          .toBe('<child><div></div></child>');
+      expect(getElementHtml(containerEl!.childNodes[1] as Element)).toBe(
+        '<child><div></div></child>',
+      );
 
       fixture.detectChanges();
 
       expect(containerEl!.childNodes.length).toBe(3);
-      expect(getElementHtml(containerEl!.childNodes[1] as Element))
-          .toBe(`<child><div>text</div></child>`);
+      expect(getElementHtml(containerEl!.childNodes[1] as Element)).toBe(
+        `<child><div>text</div></child>`,
+      );
     });
   });
 });
@@ -2551,19 +2728,21 @@ describe('ViewContainerRef', () => {
     <p vcref [tplRef]="tplRef"></p>
   `,
 })
-class EmbeddedViewInsertionComp {
-}
+class EmbeddedViewInsertionComp {}
 
 @Directive({
   selector: '[vcref]',
 })
 class VCRefDirective {
-  @Input() tplRef: TemplateRef<any>|undefined;
+  @Input() tplRef: TemplateRef<any> | undefined;
   @Input() name: string = '';
 
   // Injecting the ViewContainerRef to create a dynamic container in which
   // embedded views will be created
-  constructor(public vcref: ViewContainerRef, public elementRef: ElementRef) {}
+  constructor(
+    public vcref: ViewContainerRef,
+    public elementRef: ElementRef,
+  ) {}
 
   createView(s: string, index?: number): EmbeddedViewRef<any> {
     if (!this.tplRef) {
@@ -2576,10 +2755,9 @@ class VCRefDirective {
 
 @Component({
   selector: `embedded-cmp-with-ngcontent`,
-  template: `<ng-content></ng-content><hr><ng-content></ng-content>`
+  template: `<ng-content></ng-content><hr><ng-content></ng-content>`,
 })
-class EmbeddedComponentWithNgContent {
-}
+class EmbeddedComponentWithNgContent {}
 
 @Component({
   selector: 'view-container-ref-comp',
@@ -2587,7 +2765,7 @@ class EmbeddedComponentWithNgContent {
     <ng-template #ref0>0</ng-template>
     <ng-template #ref1>1</ng-template>
     <ng-template #ref2>2</ng-template>
-  `
+  `,
 })
 class ViewContainerRefComp {
   @ViewChildren(TemplateRef) templates!: QueryList<TemplateRef<any>>;
@@ -2599,7 +2777,7 @@ class ViewContainerRefComp {
   selector: 'view-container-ref-app',
   template: `
     <view-container-ref-comp></view-container-ref-comp>
-  `
+  `,
 })
 class ViewContainerRefApp {
   @ViewChild(ViewContainerRefComp) vcrComp!: ViewContainerRefComp;
@@ -2607,7 +2785,10 @@ class ViewContainerRefApp {
 
 @Directive({selector: '[structDir]'})
 export class StructDir {
-  constructor(private vcref: ViewContainerRef, private tplRef: TemplateRef<any>) {}
+  constructor(
+    private vcref: ViewContainerRef,
+    private tplRef: TemplateRef<any>,
+  ) {}
 
   create() {
     this.vcref.createEmbeddedView(this.tplRef);
@@ -2636,7 +2817,7 @@ class ConstructorDir {
     <div *constructorDir>
       <span *constructorDir #foo></span>
     </div>
-  `
+  `,
 })
 class ConstructorApp {
   @ViewChild('foo', {static: true}) foo!: ElementRef;
@@ -2648,7 +2829,7 @@ class ConstructorApp {
     <ng-template constructorDir #foo>
       <div #foo></div>
     </ng-template>
-  `
+  `,
 })
 class ConstructorAppWithQueries {
   @ViewChild('foo', {static: true}) foo!: TemplateRef<any>;
diff --git a/packages/core/test/acceptance/view_insertion_spec.ts b/packages/core/test/acceptance/view_insertion_spec.ts
index 3462b2ccaf0d9..189958c4c0e0a 100644
--- a/packages/core/test/acceptance/view_insertion_spec.ts
+++ b/packages/core/test/acceptance/view_insertion_spec.ts
@@ -7,7 +7,19 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {ChangeDetectorRef, Component, Directive, EmbeddedViewRef, Injectable, Injector, Input, TemplateRef, ViewChild, ViewContainerRef, ViewRef} from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  Directive,
+  EmbeddedViewRef,
+  Injectable,
+  Injector,
+  Input,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+  ViewRef,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
@@ -28,7 +40,7 @@ describe('view insertion', () => {
         template: `
               <ng-template #simple><increment-comp></increment-comp></ng-template>
               <div #container></div>
-            `
+            `,
       })
       class App {
         @ViewChild('container', {read: ViewContainerRef, static: true})
@@ -45,16 +57,16 @@ describe('view insertion', () => {
 
         ngAfterViewInit() {
           // insert at the front
-          this.view1 = this.container.createEmbeddedView(this.simple);  // "created0"
+          this.view1 = this.container.createEmbeddedView(this.simple); // "created0"
 
           // insert at the front again
-          this.view0 = this.container.createEmbeddedView(this.simple, {}, 0);  // "created1"
+          this.view0 = this.container.createEmbeddedView(this.simple, {}, 0); // "created1"
 
           // insert at the end
-          this.view3 = this.container.createEmbeddedView(this.simple);  // "created2"
+          this.view3 = this.container.createEmbeddedView(this.simple); // "created2"
 
           // insert in the middle
-          this.view2 = this.container.createEmbeddedView(this.simple, {}, 2);  // "created3"
+          this.view2 = this.container.createEmbeddedView(this.simple, {}, 2); // "created3"
 
           // We need to run change detection here to avoid
           // ExpressionChangedAfterItHasBeenCheckedError because of the value updating in
@@ -85,7 +97,7 @@ describe('view insertion', () => {
         template: `
               <ng-template #empty></ng-template>
               <div #container></div>
-            `
+            `,
       })
       class App {
         @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef = null!;
@@ -133,7 +145,7 @@ describe('view insertion', () => {
         template: `
                   <ng-template #projection><ng-content></ng-content></ng-template>
                   <div #container></div>
-                `
+                `,
       })
       class Comp {
         @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef = null!;
@@ -163,10 +175,9 @@ describe('view insertion', () => {
       @Component({
         template: `
           <comp>test</comp>
-        `
+        `,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, Comp],
@@ -192,7 +203,7 @@ describe('view insertion', () => {
         template: `
                   <ng-template #subContainer><div class="dynamic" *ngIf="true">test</div></ng-template>
                   <div #container></div>
-                `
+                `,
       })
       class App {
         @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef = null!;
@@ -279,12 +290,15 @@ describe('view insertion', () => {
       });
 
       function createAndInsertViews(beforeTpl: string): any {
-        TestBed.overrideTemplate(TestCmpt, `
+        TestBed.overrideTemplate(
+          TestCmpt,
+          `
           <ng-template #insert>insert</ng-template>
           <ng-template #before>${beforeTpl}</ng-template>
 
           <div><ng-template #vi="vi" viewInserting></ng-template></div>
-        `);
+        `,
+        );
         const fixture = TestBed.createComponent(TestCmpt);
         fixture.detectChanges();
 
@@ -294,7 +308,6 @@ describe('view insertion', () => {
         return fixture.nativeElement;
       }
 
-
       it('should insert before a view with the text node as the first root node', () => {
         expect(createAndInsertViews('|before').textContent).toBe('insert|before');
       });
@@ -304,63 +317,68 @@ describe('view insertion', () => {
       });
 
       it('should insert before a view with the ng-container as the first root node', () => {
-        expect(createAndInsertViews(`
+        expect(
+          createAndInsertViews(`
           <ng-container>
             <ng-container>|before</ng-container>
           </ng-container>
-        `).textContent)
-            .toBe('insert|before');
+        `).textContent,
+        ).toBe('insert|before');
       });
 
       it('should insert before a view with the empty ng-container as the first root node', () => {
-        expect(createAndInsertViews(`<ng-container></ng-container>|before`).textContent)
-            .toBe('insert|before');
+        expect(createAndInsertViews(`<ng-container></ng-container>|before`).textContent).toBe(
+          'insert|before',
+        );
       });
 
-      it('should insert before a view with ICU container inside a ng-container as the first root node',
-         () => {
-           expect(
-               createAndInsertViews(
-                   `<ng-container i18n>{minutes, plural, =0 {just now} =1 {one minute ago} other {|before}}</ng-container>`)
-                   .textContent)
-               .toBe('insert|before');
-         });
+      it('should insert before a view with ICU container inside a ng-container as the first root node', () => {
+        expect(
+          createAndInsertViews(
+            `<ng-container i18n>{minutes, plural, =0 {just now} =1 {one minute ago} other {|before}}</ng-container>`,
+          ).textContent,
+        ).toBe('insert|before');
+      });
 
       it('should insert before a view with a container as the first root node', () => {
-        expect(createAndInsertViews(`<ng-template [ngIf]="true">|before</ng-template>`).textContent)
-            .toBe('insert|before');
+        expect(
+          createAndInsertViews(`<ng-template [ngIf]="true">|before</ng-template>`).textContent,
+        ).toBe('insert|before');
       });
 
       it('should insert before a view with an empty container as the first root node', () => {
-        expect(createAndInsertViews(`<ng-template [ngIf]="true"></ng-template>|before`).textContent)
-            .toBe('insert|before');
+        expect(
+          createAndInsertViews(`<ng-template [ngIf]="true"></ng-template>|before`).textContent,
+        ).toBe('insert|before');
       });
 
-      it('should insert before a view with a ng-container where ViewContainerRef is injected',
-         () => {
-           expect(createAndInsertViews(`
+      it('should insert before a view with a ng-container where ViewContainerRef is injected', () => {
+        expect(
+          createAndInsertViews(`
           <ng-container [ngTemplateOutlet]="after">|before</ng-container>
           <ng-template #after>|after</ng-template>
-        `).textContent)
-               .toBe('insert|before|after');
-         });
-
+        `).textContent,
+        ).toBe('insert|before|after');
+      });
 
       it('should insert before a view with an element where ViewContainerRef is injected', () => {
-        expect(createAndInsertViews(`
+        expect(
+          createAndInsertViews(`
           <div [ngTemplateOutlet]="after">|before</div>
           <ng-template #after>|after</ng-template>
-        `).textContent)
-            .toBe('insert|before|after');
+        `).textContent,
+        ).toBe('insert|before|after');
       });
 
       it('should insert before a view with an empty projection as the first root node', () => {
-        expect(createAndInsertViews(`<ng-content></ng-content>|before`).textContent)
-            .toBe('insert|before');
+        expect(createAndInsertViews(`<ng-content></ng-content>|before`).textContent).toBe(
+          'insert|before',
+        );
       });
 
       it('should insert before a view with complex node structure', () => {
-        expect(createAndInsertViews(`
+        expect(
+          createAndInsertViews(`
           <ng-template [ngIf]="true">
             <ng-container>
               <ng-container>
@@ -368,8 +386,8 @@ describe('view insertion', () => {
               </ng-container>
             </ng-container>
           </ng-template>
-        `).textContent)
-            .toBe('insert|before');
+        `).textContent,
+        ).toBe('insert|before');
       });
 
       it('should insert before a ng-container with a ViewContainerRef on it', () => {
@@ -382,7 +400,7 @@ describe('view insertion', () => {
             <div>|end</div>
 
             <ng-template #tpl>test</ng-template>
-          `
+          `,
         })
         class AppComponent {
           insertTpl = false;
@@ -411,7 +429,7 @@ describe('view insertion', () => {
           <ng-template #insert>insert</ng-template>
           <ng-template #before><ng-content></ng-content></ng-template>
           <div><ng-template #vi="vi" viewInserting></ng-template></div>
-        `
+        `,
       })
       class WithContentCmpt {
         @ViewChild('insert', {static: true}) insertTpl!: TemplateRef<{}>;
@@ -451,8 +469,9 @@ describe('view insertion', () => {
 
       it('should insert before a view with projected container', () => {
         TestBed.overrideTemplate(
-            TestCmpt,
-            `<with-content #wc><ng-template [ngIf]="true">|before</ng-template></with-content>`);
+          TestCmpt,
+          `<with-content #wc><ng-template [ngIf]="true">|before</ng-template></with-content>`,
+        );
 
         const fixture = TestBed.createComponent(TestCmpt);
         fixture.detectChanges();
@@ -476,8 +495,7 @@ describe('view insertion', () => {
       }
 
       @Component({selector: 'dynamic-cmpt', template: '|before'})
-      class DynamicComponent {
-      }
+      class DynamicComponent {}
 
       it('should insert in front a dynamic component view', () => {
         @Component({
@@ -485,27 +503,31 @@ describe('view insertion', () => {
           template: `
                 <ng-template #insert>insert</ng-template>
                 <div><ng-template #vi="vi" viewInserting></ng-template></div>
-              `
+              `,
         })
         class TestCmpt {
           @ViewChild('insert', {static: true}) insertTpl!: TemplateRef<{}>;
           @ViewChild('vi', {static: true}) viewInsertingDir!: ViewInsertingDir;
 
-          constructor(private _vcr: ViewContainerRef, private _injector: Injector) {}
+          constructor(
+            private _vcr: ViewContainerRef,
+            private _injector: Injector,
+          ) {}
 
           insert() {
             // create a dynamic component view to act as an "insert before" view
-            const beforeView =
-                this._vcr.createComponent(DynamicComponent, {injector: this._injector}).hostView;
+            const beforeView = this._vcr.createComponent(DynamicComponent, {
+              injector: this._injector,
+            }).hostView;
             // change-detect the "before view" to create all child views
             beforeView.detectChanges();
             this.viewInsertingDir.insert(beforeView, this.insertTpl);
           }
         }
 
-
-        TestBed.configureTestingModule(
-            {declarations: [TestCmpt, ViewInsertingDir, DynamicComponent]});
+        TestBed.configureTestingModule({
+          declarations: [TestCmpt, ViewInsertingDir, DynamicComponent],
+        });
 
         const fixture = TestBed.createComponent(TestCmpt);
         fixture.detectChanges();
@@ -520,77 +542,74 @@ describe('view insertion', () => {
 
   describe('non-regression', () => {
     // https://github.com/angular/angular/issues/31971
-    it('should insert component views into ViewContainerRef injected by querying <ng-container>',
-       () => {
-         @Component({selector: 'dynamic-cmpt', template: 'dynamic'})
-         class DynamicComponent {
-         }
-
-         @Component({
-           selector: 'app-root',
-           template: `
+    it('should insert component views into ViewContainerRef injected by querying <ng-container>', () => {
+      @Component({selector: 'dynamic-cmpt', template: 'dynamic'})
+      class DynamicComponent {}
+
+      @Component({
+        selector: 'app-root',
+        template: `
             <div>start|</div>
             <ng-container #container></ng-container>
             <div>|end</div>
 
             <div (click)="click()" >|click</div>
-        `
-         })
-         class AppComponent {
-           @ViewChild('container', {read: ViewContainerRef, static: true}) vcr!: ViewContainerRef;
-
-           click() {
-             this.vcr.createComponent(DynamicComponent);
-           }
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [AppComponent, DynamicComponent],
-         });
-         const fixture = TestBed.createComponent(AppComponent);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('start||end|click');
-
-         fixture.componentInstance.click();
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('start|dynamic|end|click');
-       });
+        `,
+      })
+      class AppComponent {
+        @ViewChild('container', {read: ViewContainerRef, static: true}) vcr!: ViewContainerRef;
+
+        click() {
+          this.vcr.createComponent(DynamicComponent);
+        }
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [AppComponent, DynamicComponent],
+      });
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('start||end|click');
+
+      fixture.componentInstance.click();
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('start|dynamic|end|click');
+    });
 
     // https://github.com/angular/angular/issues/33679
-    it('should insert embedded views into ViewContainerRef injected by querying <ng-container>',
-       () => {
-         @Component({
-           selector: 'app-root',
-           template: `
+    it('should insert embedded views into ViewContainerRef injected by querying <ng-container>', () => {
+      @Component({
+        selector: 'app-root',
+        template: `
         <div>container start|</div>
         <ng-container #container></ng-container>
         <div>|container end</div>
 
         <ng-template #template >test</ng-template>
         <div (click)="click()" >|click</div>
-        `
-         })
-         class AppComponent {
-           @ViewChild('container', {read: ViewContainerRef, static: true}) vcr!: ViewContainerRef;
-
-           @ViewChild('template', {read: TemplateRef, static: true}) template!: TemplateRef<any>;
-
-           click() {
-             this.vcr.createEmbeddedView(this.template, undefined, 0);
-           }
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [AppComponent],
-         });
-         const fixture = TestBed.createComponent(AppComponent);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('container start||container end|click');
-
-         fixture.componentInstance.click();
-         fixture.detectChanges();
-         expect(fixture.nativeElement.textContent).toBe('container start|test|container end|click');
-       });
+        `,
+      })
+      class AppComponent {
+        @ViewChild('container', {read: ViewContainerRef, static: true}) vcr!: ViewContainerRef;
+
+        @ViewChild('template', {read: TemplateRef, static: true}) template!: TemplateRef<any>;
+
+        click() {
+          this.vcr.createEmbeddedView(this.template, undefined, 0);
+        }
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [AppComponent],
+      });
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('container start||container end|click');
+
+      fixture.componentInstance.click();
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('container start|test|container end|click');
+    });
 
     it('should properly insert before views in a ViewContainerRef injected on ng-container', () => {
       @Component({
@@ -603,7 +622,7 @@ describe('view insertion', () => {
             [ngTemplateOutlet]="parameterListItem"
             [ngTemplateOutletContext]="{parameter:parameter}">
           </ng-container>
-        `
+        `,
       })
       class AppComponent {
         items = [1];
@@ -639,8 +658,7 @@ describe('view insertion', () => {
       @Component({
         template: `<div failInConstructorAlways></div>`,
       })
-      class TestCmpt {
-      }
+      class TestCmpt {}
 
       TestBed.configureTestingModule({
         declarations: [TestCmpt, FailInConstructorAlways],
@@ -673,8 +691,7 @@ describe('view insertion', () => {
       @Component({
         template: `<div failInConstructorOnce>OK</div>`,
       })
-      class TestCmpt {
-      }
+      class TestCmpt {}
 
       TestBed.configureTestingModule({
         declarations: [TestCmpt, FailInConstructorOnce],
@@ -702,8 +719,7 @@ describe('view insertion', () => {
       @Component({
         template: `<div failInInputAlways="static"></div>`,
       })
-      class TestCmpt {
-      }
+      class TestCmpt {}
 
       TestBed.configureTestingModule({
         declarations: [TestCmpt, FailInInputAlways],
@@ -722,8 +738,7 @@ describe('view insertion', () => {
       @Directive({
         selector: '[someDir]',
       })
-      class SomeDirective {
-      }
+      class SomeDirective {}
 
       @Component({
         template: `<div someDir></div>`,
@@ -754,8 +769,7 @@ describe('view insertion', () => {
       @Directive({
         selector: '[someDir]',
       })
-      class SomeDirective {
-      }
+      class SomeDirective {}
 
       @Component({
         template: `<div someDir></div>`,
@@ -809,8 +823,7 @@ describe('view insertion', () => {
       @Component({
         template: `<test><test><test></test></test></test>`,
       })
-      class App {
-      }
+      class App {}
 
       TestBed.configureTestingModule({
         declarations: [App, TestCmpt],
@@ -870,8 +883,7 @@ describe('view insertion', () => {
     it('should consistently report errors raised by createEmbeddedView', () => {
       // Intentionally hasn't been added to `providers` so that it throws a DI error.
       @Injectable()
-      class DoesNotExist {
-      }
+      class DoesNotExist {}
 
       @Directive({selector: 'dir'})
       class Dir {
diff --git a/packages/core/test/acceptance/view_ref_spec.ts b/packages/core/test/acceptance/view_ref_spec.ts
index a0716f5178ef2..4b206763a4b69 100644
--- a/packages/core/test/acceptance/view_ref_spec.ts
+++ b/packages/core/test/acceptance/view_ref_spec.ts
@@ -6,11 +6,23 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ApplicationRef, ChangeDetectorRef, Component, ComponentRef, createComponent, ElementRef, EmbeddedViewRef, EnvironmentInjector, Injector, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  ApplicationRef,
+  ChangeDetectorRef,
+  Component,
+  ComponentRef,
+  createComponent,
+  ElementRef,
+  EmbeddedViewRef,
+  EnvironmentInjector,
+  Injector,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {ViewRef as InternalViewRef} from '@angular/core/src/render3/view_ref';
 import {TestBed} from '@angular/core/testing';
 
-
 describe('ViewRef', () => {
   it('should remove nodes from DOM when the view is detached from app ref', () => {
     @Component({selector: 'dynamic-cpt', template: '<div></div>'})
@@ -21,7 +33,10 @@ describe('ViewRef', () => {
     @Component({template: `<span></span>`})
     class App {
       componentRef!: ComponentRef<DynamicComponent>;
-      constructor(public appRef: ApplicationRef, private injector: EnvironmentInjector) {}
+      constructor(
+        public appRef: ApplicationRef,
+        private injector: EnvironmentInjector,
+      ) {}
 
       create() {
         this.componentRef = createComponent(DynamicComponent, {environmentInjector: this.injector});
@@ -54,7 +69,7 @@ describe('ViewRef', () => {
     @Component({template: ''})
     class App {
       constructor(changeDetectorRef: ChangeDetectorRef) {
-        (changeDetectorRef as InternalViewRef<unknown>).onDestroy(() => called = true);
+        (changeDetectorRef as InternalViewRef<unknown>).onDestroy(() => (called = true));
       }
     }
 
diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts
index ef742b3780d4a..6d59624991dbe 100644
--- a/packages/core/test/animation/animation_integration_spec.ts
+++ b/packages/core/test/animation/animation_integration_spec.ts
@@ -5,3890 +5,4245 @@
  * 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
  */
-import {animate, animateChild, animation, AnimationEvent, AnimationMetadata, AnimationOptions, AUTO_STYLE, group, keyframes, query, sequence, state, style, transition, trigger, useAnimation, ɵPRE_STYLE as PRE_STYLE} from '@angular/animations';
+import {
+  animate,
+  animateChild,
+  animation,
+  AnimationEvent,
+  AnimationMetadata,
+  AnimationOptions,
+  AUTO_STYLE,
+  group,
+  keyframes,
+  query,
+  sequence,
+  state,
+  style,
+  transition,
+  trigger,
+  useAnimation,
+  ɵPRE_STYLE as PRE_STYLE,
+} from '@angular/animations';
 import {AnimationDriver, NoopAnimationDriver, ɵAnimationEngine} from '@angular/animations/browser';
 import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing';
-import {ChangeDetectorRef, Component, HostBinding, HostListener, Inject, RendererFactory2, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  HostListener,
+  Inject,
+  RendererFactory2,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {fakeAsync, flushMicrotasks, TestBed} from '@angular/core/testing';
 import {ɵDomRendererFactory2} from '@angular/platform-browser';
-import {ANIMATION_MODULE_TYPE, BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {
+  ANIMATION_MODULE_TYPE,
+  BrowserAnimationsModule,
+  NoopAnimationsModule,
+} from '@angular/platform-browser/animations';
 import {hasStyle} from '@angular/platform-browser/testing/src/browser_util';
 
 const DEFAULT_NAMESPACE_ID = 'id';
 const DEFAULT_COMPONENT_ID = '1';
 
-(function() {
-// these tests are only meant to be run within the DOM (for now)
-if (isNode) return;
+(function () {
+  // these tests are only meant to be run within the DOM (for now)
+  if (isNode) return;
 
-describe('animation tests', function() {
-  function getLog(): MockAnimationPlayer[] {
-    return MockAnimationDriver.log as MockAnimationPlayer[];
-  }
+  describe('animation tests', function () {
+    function getLog(): MockAnimationPlayer[] {
+      return MockAnimationDriver.log as MockAnimationPlayer[];
+    }
 
-  function resetLog() {
-    MockAnimationDriver.log = [];
-  }
+    function resetLog() {
+      MockAnimationDriver.log = [];
+    }
 
-  beforeEach(() => {
-    resetLog();
-    TestBed.configureTestingModule({
-      providers: [{provide: AnimationDriver, useClass: MockAnimationDriver}],
-      imports: [BrowserAnimationsModule]
+    beforeEach(() => {
+      resetLog();
+      TestBed.configureTestingModule({
+        providers: [{provide: AnimationDriver, useClass: MockAnimationDriver}],
+        imports: [BrowserAnimationsModule],
+      });
     });
-  });
 
-  describe('animation modules', function() {
-    it('should hint at BrowserAnimationsModule being used', () => {
-      TestBed.resetTestingModule();
-      TestBed.configureTestingModule(
-          {declarations: [SharedAnimationCmp], imports: [BrowserAnimationsModule]});
+    describe('animation modules', function () {
+      it('should hint at BrowserAnimationsModule being used', () => {
+        TestBed.resetTestingModule();
+        TestBed.configureTestingModule({
+          declarations: [SharedAnimationCmp],
+          imports: [BrowserAnimationsModule],
+        });
 
-      const fixture = TestBed.createComponent(SharedAnimationCmp);
-      expect(fixture.componentInstance.animationType).toEqual('BrowserAnimations');
-    });
+        const fixture = TestBed.createComponent(SharedAnimationCmp);
+        expect(fixture.componentInstance.animationType).toEqual('BrowserAnimations');
+      });
 
-    it('should hint at NoopAnimationsModule being used', () => {
-      TestBed.resetTestingModule();
-      TestBed.configureTestingModule(
-          {declarations: [SharedAnimationCmp], imports: [NoopAnimationsModule]});
+      it('should hint at NoopAnimationsModule being used', () => {
+        TestBed.resetTestingModule();
+        TestBed.configureTestingModule({
+          declarations: [SharedAnimationCmp],
+          imports: [NoopAnimationsModule],
+        });
 
-      const fixture = TestBed.createComponent(SharedAnimationCmp);
-      expect(fixture.componentInstance.animationType).toEqual('NoopAnimations');
-    });
+        const fixture = TestBed.createComponent(SharedAnimationCmp);
+        expect(fixture.componentInstance.animationType).toEqual('NoopAnimations');
+      });
 
-    it('should hint at NoopAnimationsModule being used when BrowserAnimationsModule is provided with disabled animations',
-       () => {
-         TestBed.resetTestingModule();
-         TestBed.configureTestingModule({
-           declarations: [SharedAnimationCmp],
-           imports: [BrowserAnimationsModule.withConfig({disableAnimations: true})]
-         });
-
-         const fixture = TestBed.createComponent(SharedAnimationCmp);
-         expect(fixture.componentInstance.animationType).toEqual('NoopAnimations');
-       });
-  });
+      it('should hint at NoopAnimationsModule being used when BrowserAnimationsModule is provided with disabled animations', () => {
+        TestBed.resetTestingModule();
+        TestBed.configureTestingModule({
+          declarations: [SharedAnimationCmp],
+          imports: [BrowserAnimationsModule.withConfig({disableAnimations: true})],
+        });
 
-  @Component({template: '<p>template text</p>'})
-  class SharedAnimationCmp {
-    constructor(@Inject(ANIMATION_MODULE_TYPE) public animationType: 'NoopAnimations'|
-                'BrowserAnimations') {}
-  }
+        const fixture = TestBed.createComponent(SharedAnimationCmp);
+        expect(fixture.componentInstance.animationType).toEqual('NoopAnimations');
+      });
+    });
 
-  describe('fakeAsync testing', () => {
-    it('should only require one flushMicrotasks call to kick off animation callbacks',
-       fakeAsync(() => {
-         @Component({
-           selector: 'cmp',
-           template: `
+    @Component({template: '<p>template text</p>'})
+    class SharedAnimationCmp {
+      constructor(
+        @Inject(ANIMATION_MODULE_TYPE) public animationType: 'NoopAnimations' | 'BrowserAnimations',
+      ) {}
+    }
+
+    describe('fakeAsync testing', () => {
+      it('should only require one flushMicrotasks call to kick off animation callbacks', fakeAsync(() => {
+        @Component({
+          selector: 'cmp',
+          template: `
             <div [@myAnimation]="exp" (@myAnimation.start)="cb('start')" (@myAnimation.done)="cb('done')"></div>
           `,
-           animations: [trigger(
-               'myAnimation',
-               [transition('* => on, * => off', [animate(1000, style({opacity: 1}))])])]
-         })
-         class Cmp {
-           exp: any = false;
-           status: string = '';
-           cb(status: string) {
-             this.status = status;
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         cmp.exp = 'on';
-         fixture.detectChanges();
-         expect(cmp.status).toEqual('');
-
-         flushMicrotasks();
-         expect(cmp.status).toEqual('start');
-
-         let player = MockAnimationDriver.log.pop()!;
-         player.finish();
-         expect(cmp.status).toEqual('done');
-
-         cmp.status = '';
-         cmp.exp = 'off';
-         fixture.detectChanges();
-         expect(cmp.status).toEqual('');
-
-         player = MockAnimationDriver.log.pop()!;
-         player.finish();
-         expect(cmp.status).toEqual('');
-         flushMicrotasks();
-         expect(cmp.status).toEqual('done');
-       }));
-
-    it('should always run .start callbacks before .done callbacks even for noop animations',
-       fakeAsync(() => {
-         @Component({
-           selector: 'cmp',
-           template: `
+          animations: [
+            trigger('myAnimation', [
+              transition('* => on, * => off', [animate(1000, style({opacity: 1}))]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp: any = false;
+          status: string = '';
+          cb(status: string) {
+            this.status = status;
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = 'on';
+        fixture.detectChanges();
+        expect(cmp.status).toEqual('');
+
+        flushMicrotasks();
+        expect(cmp.status).toEqual('start');
+
+        let player = MockAnimationDriver.log.pop()!;
+        player.finish();
+        expect(cmp.status).toEqual('done');
+
+        cmp.status = '';
+        cmp.exp = 'off';
+        fixture.detectChanges();
+        expect(cmp.status).toEqual('');
+
+        player = MockAnimationDriver.log.pop()!;
+        player.finish();
+        expect(cmp.status).toEqual('');
+        flushMicrotasks();
+        expect(cmp.status).toEqual('done');
+      }));
+
+      it('should always run .start callbacks before .done callbacks even for noop animations', fakeAsync(() => {
+        @Component({
+          selector: 'cmp',
+          template: `
                 <div [@myAnimation]="exp" (@myAnimation.start)="cb('start')" (@myAnimation.done)="cb('done')"></div>
           `,
-           animations: [
-             trigger(
-                 'myAnimation',
-                 [
-                   transition('* => go', []),
-                 ]),
-           ]
-         })
-         class Cmp {
-           exp: any = false;
-           log: string[] = [];
-           cb(status: string) {
-             this.log.push(status);
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         cmp.exp = 'go';
-         fixture.detectChanges();
-         expect(cmp.log).toEqual([]);
-
-         flushMicrotasks();
-         expect(cmp.log).toEqual(['start', 'done']);
-       }));
-
-    it('should emit the correct totalTime value for a noop-animation', fakeAsync(() => {
-         @Component({
-           selector: 'cmp',
-           template: `
-                <div [@myAnimation]="exp" (@myAnimation.start)="cb($event)" (@myAnimation.done)="cb($event)"></div>
-          `,
-           animations: [
-             trigger(
-                 'myAnimation',
-                 [
-                   transition(
-                       '* => go',
-                       [
-                         animate('1s', style({opacity: 0})),
-                       ]),
-                 ]),
-           ]
-         })
-         class Cmp {
-           exp: any = false;
-           log: AnimationEvent[] = [];
-           cb(event: AnimationEvent) {
-             this.log.push(event);
-           }
-         }
-
-         TestBed.configureTestingModule({
-           declarations: [Cmp],
-           providers: [
-             {provide: AnimationDriver, useClass: NoopAnimationDriver},
-           ],
-         });
-
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         cmp.exp = 'go';
-         fixture.detectChanges();
-         expect(cmp.log).toEqual([]);
-
-         flushMicrotasks();
-         expect(cmp.log.length).toEqual(2);
-         const [start, end] = cmp.log;
-         expect(start.totalTime).toEqual(1000);
-         expect(end.totalTime).toEqual(1000);
-       }));
-  });
+          animations: [trigger('myAnimation', [transition('* => go', [])])],
+        })
+        class Cmp {
+          exp: any = false;
+          log: string[] = [];
+          cb(status: string) {
+            this.log.push(status);
+          }
+        }
 
-  describe('component fixture integration', () => {
-    describe('whenRenderingDone', () => {
-      it('should wait until the animations are finished until continuing', fakeAsync(() => {
-           @Component({
-             selector: 'cmp',
-             template: `
-              <div [@myAnimation]="exp"></div>
-            `,
-             animations: [trigger(
-                 'myAnimation', [transition('* => on', [animate(1000, style({opacity: 1}))])])]
-           })
-           class Cmp {
-             exp: any = false;
-           }
-
-           TestBed.configureTestingModule({declarations: [Cmp]});
-           const engine = TestBed.inject(ɵAnimationEngine);
-           const fixture = TestBed.createComponent(Cmp);
-           const cmp = fixture.componentInstance;
-
-           let isDone = false;
-           fixture.whenRenderingDone().then(() => isDone = true);
-           expect(isDone).toBe(false);
-
-           cmp.exp = 'on';
-           fixture.detectChanges();
-           engine.flush();
-           expect(isDone).toBe(false);
-
-           const players = engine.players;
-           expect(players.length).toEqual(1);
-           players[0].finish();
-           expect(isDone).toBe(false);
-
-           flushMicrotasks();
-           expect(isDone).toBe(true);
-         }));
-
-      it('should wait for a noop animation to finish before continuing', fakeAsync(() => {
-           @Component({
-             selector: 'cmp',
-             template: `
-              <div [@myAnimation]="exp"></div>
-            `,
-             animations: [trigger(
-                 'myAnimation', [transition('* => on', [animate(1000, style({opacity: 1}))])])]
-           })
-           class Cmp {
-             exp: any = false;
-           }
-
-           TestBed.configureTestingModule({
-             providers: [{provide: AnimationDriver, useClass: NoopAnimationDriver}],
-             declarations: [Cmp]
-           });
-
-           const engine = TestBed.inject(ɵAnimationEngine);
-           const fixture = TestBed.createComponent(Cmp);
-           const cmp = fixture.componentInstance;
-
-           let isDone = false;
-           fixture.whenRenderingDone().then(() => isDone = true);
-           expect(isDone).toBe(false);
-
-           cmp.exp = 'off';
-           fixture.detectChanges();
-           engine.flush();
-           expect(isDone).toBe(false);
-
-           flushMicrotasks();
-           expect(isDone).toBe(true);
-         }));
-
-      it('should wait for active animations to finish even if they have already started',
-         fakeAsync(() => {
-           @Component({
-             selector: 'cmp',
-             template: `
-                <div [@myAnimation]="exp"></div>
-              `,
-             animations: [trigger(
-                 'myAnimation', [transition('* => on', [animate(1000, style({opacity: 1}))])])]
-           })
-           class Cmp {
-             exp: any = false;
-           }
-
-           TestBed.configureTestingModule({declarations: [Cmp]});
-           const engine = TestBed.inject(ɵAnimationEngine);
-           const fixture = TestBed.createComponent(Cmp);
-           const cmp = fixture.componentInstance;
-           cmp.exp = 'on';
-           fixture.detectChanges();
-           engine.flush();
-
-           const players = engine.players;
-           expect(players.length).toEqual(1);
-
-           let isDone = false;
-           fixture.whenRenderingDone().then(() => isDone = true);
-           flushMicrotasks();
-           expect(isDone).toBe(false);
-
-           players[0].finish();
-           flushMicrotasks();
-           expect(isDone).toBe(true);
-         }));
-    });
-  });
+        TestBed.configureTestingModule({declarations: [Cmp]});
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        expect(cmp.log).toEqual([]);
 
-  describe('animation triggers', () => {
-    it('should trigger a state change animation from void => state', () => {
-      @Component({
-        selector: 'if-cmp',
-        template: `
-          <div *ngIf="exp" [@myAnimation]="exp"></div>
-        `,
-        animations: [trigger(
-            'myAnimation',
-            [transition(
-                'void => *', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
-      })
-      class Cmp {
-        exp: any = false;
-      }
+        flushMicrotasks();
+        expect(cmp.log).toEqual(['start', 'done']);
+      }));
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+      it('should emit the correct totalTime value for a noop-animation', fakeAsync(() => {
+        @Component({
+          selector: 'cmp',
+          template: `
+                <div [@myAnimation]="exp" (@myAnimation.start)="cb($event)" (@myAnimation.done)="cb($event)"></div>
+          `,
+          animations: [
+            trigger('myAnimation', [transition('* => go', [animate('1s', style({opacity: 0}))])]),
+          ],
+        })
+        class Cmp {
+          exp: any = false;
+          log: AnimationEvent[] = [];
+          cb(event: AnimationEvent) {
+            this.log.push(event);
+          }
+        }
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-      cmp.exp = true;
-      fixture.detectChanges();
-      engine.flush();
+        TestBed.configureTestingModule({
+          declarations: [Cmp],
+          providers: [{provide: AnimationDriver, useClass: NoopAnimationDriver}],
+        });
 
-      expect(getLog().length).toEqual(1);
-      expect(getLog().pop()!.keyframes).toEqual([
-        new Map<string, string|number>([['offset', 0], ['opacity', '0']]),
-        new Map<string, string|number>([['offset', 1], ['opacity', '1']])
-      ]);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        expect(cmp.log).toEqual([]);
+
+        flushMicrotasks();
+        expect(cmp.log.length).toEqual(2);
+        const [start, end] = cmp.log;
+        expect(start.totalTime).toEqual(1000);
+        expect(end.totalTime).toEqual(1000);
+      }));
     });
 
-    // https://github.com/angular/angular/issues/32794
-    it('should support nested animation triggers', () => {
-      const REUSABLE_ANIMATION = [trigger('myAnimation', [
-        transition('void => *', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])
-      ])];
+    describe('component fixture integration', () => {
+      describe('whenRenderingDone', () => {
+        it('should wait until the animations are finished until continuing', fakeAsync(() => {
+          @Component({
+            selector: 'cmp',
+            template: `
+              <div [@myAnimation]="exp"></div>
+            `,
+            animations: [
+              trigger('myAnimation', [transition('* => on', [animate(1000, style({opacity: 1}))])]),
+            ],
+          })
+          class Cmp {
+            exp: any = false;
+          }
 
-      @Component({
-        selector: 'if-cmp',
-        template: `
-          <div @myAnimation></div>
-        `,
-        animations: [REUSABLE_ANIMATION],
-      })
-      class Cmp {
-      }
+          TestBed.configureTestingModule({declarations: [Cmp]});
+          const engine = TestBed.inject(ɵAnimationEngine);
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+          let isDone = false;
+          fixture.whenRenderingDone().then(() => (isDone = true));
+          expect(isDone).toBe(false);
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      fixture.detectChanges();
-      engine.flush();
+          cmp.exp = 'on';
+          fixture.detectChanges();
+          engine.flush();
+          expect(isDone).toBe(false);
 
-      expect(getLog().length).toEqual(1);
-      expect(getLog().pop()!.keyframes).toEqual([
-        new Map<string, string|number>([['offset', 0], ['opacity', '0']]),
-        new Map<string, string|number>([['offset', 1], ['opacity', '1']])
-      ]);
-    });
+          const players = engine.players;
+          expect(players.length).toEqual(1);
+          players[0].finish();
+          expect(isDone).toBe(false);
 
-    it('should allow a transition to use a function to determine what method to run', () => {
-      let valueToMatch = '';
-      let capturedElement: any;
-      const transitionFn = (fromState: string, toState: string, element: any) => {
-        capturedElement = element;
-        return toState == valueToMatch;
-      };
+          flushMicrotasks();
+          expect(isDone).toBe(true);
+        }));
 
-      @Component({
-        selector: 'if-cmp',
-        template: '<div #element [@myAnimation]="exp"></div>',
-        animations: [
-          trigger('myAnimation', [transition(
-                                     transitionFn,
-                                     [style({opacity: 0}), animate(1234, style({opacity: 1}))])]),
-        ]
-      })
-      class Cmp {
-        @ViewChild('element') element: any;
-        exp: any = '';
-      }
+        it('should wait for a noop animation to finish before continuing', fakeAsync(() => {
+          @Component({
+            selector: 'cmp',
+            template: `
+              <div [@myAnimation]="exp"></div>
+            `,
+            animations: [
+              trigger('myAnimation', [transition('* => on', [animate(1000, style({opacity: 1}))])]),
+            ],
+          })
+          class Cmp {
+            exp: any = false;
+          }
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+          TestBed.configureTestingModule({
+            providers: [{provide: AnimationDriver, useClass: NoopAnimationDriver}],
+            declarations: [Cmp],
+          });
 
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-      valueToMatch = cmp.exp = 'something';
-      fixture.detectChanges();
-      const element = cmp.element.nativeElement;
+          const engine = TestBed.inject(ɵAnimationEngine);
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
 
-      let players = getLog();
-      expect(players.length).toEqual(1);
-      let [p1] = players;
-      expect(p1.totalTime).toEqual(1234);
-      expect(capturedElement).toEqual(element);
-      resetLog();
+          let isDone = false;
+          fixture.whenRenderingDone().then(() => (isDone = true));
+          expect(isDone).toBe(false);
 
-      valueToMatch = 'something-else';
-      cmp.exp = 'this-wont-match';
-      fixture.detectChanges();
+          cmp.exp = 'off';
+          fixture.detectChanges();
+          engine.flush();
+          expect(isDone).toBe(false);
 
-      players = getLog();
-      expect(players.length).toEqual(0);
-    });
+          flushMicrotasks();
+          expect(isDone).toBe(true);
+        }));
 
-    it('should allow a transition to use a function to determine what method to run and expose any parameter values',
-       () => {
-         const transitionFn =
-             (fromState: string, toState: string, element?: any, params?: {[key: string]: any}) => {
-               return params!['doMatch'] == true;
-             };
-
-         @Component({
-           selector: 'if-cmp',
-           template: '<div [@myAnimation]="{value:exp, params: {doMatch:doMatch}}"></div>',
-           animations: [
-             trigger(
-                 'myAnimation',
-                 [transition(
-                     transitionFn, [style({opacity: 0}), animate(3333, style({opacity: 1}))])]),
-           ]
-         })
-         class Cmp {
-           doMatch = false;
-           exp: any = '';
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         cmp.doMatch = true;
-         fixture.detectChanges();
-
-         let players = getLog();
-         expect(players.length).toEqual(1);
-         let [p1] = players;
-         expect(p1.totalTime).toEqual(3333);
-         resetLog();
-
-         cmp.doMatch = false;
-         cmp.exp = 'this-wont-match';
-         fixture.detectChanges();
-
-         players = getLog();
-         expect(players.length).toEqual(0);
-       });
-
-    it('should allow a state value to be `0`', () => {
-      @Component({
-        selector: 'if-cmp',
-        template: `
-            <div [@myAnimation]="exp"></div>
-          `,
-        animations: [trigger(
-            'myAnimation',
-            [
-              transition(
-                  '0 => 1', [style({height: '0px'}), animate(1234, style({height: '100px'}))]),
-              transition('* => 1', [style({width: '0px'}), animate(4567, style({width: '100px'}))])
-            ])]
-      })
-      class Cmp {
-        exp: any = false;
-      }
+        it('should wait for active animations to finish even if they have already started', fakeAsync(() => {
+          @Component({
+            selector: 'cmp',
+            template: `
+                <div [@myAnimation]="exp"></div>
+              `,
+            animations: [
+              trigger('myAnimation', [transition('* => on', [animate(1000, style({opacity: 1}))])]),
+            ],
+          })
+          class Cmp {
+            exp: any = false;
+          }
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+          TestBed.configureTestingModule({declarations: [Cmp]});
+          const engine = TestBed.inject(ɵAnimationEngine);
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          cmp.exp = 'on';
+          fixture.detectChanges();
+          engine.flush();
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-      cmp.exp = 0;
-      fixture.detectChanges();
-      engine.flush();
-      resetLog();
+          const players = engine.players;
+          expect(players.length).toEqual(1);
 
-      cmp.exp = 1;
-      fixture.detectChanges();
-      engine.flush();
+          let isDone = false;
+          fixture.whenRenderingDone().then(() => (isDone = true));
+          flushMicrotasks();
+          expect(isDone).toBe(false);
 
-      expect(getLog().length).toEqual(1);
-      const player = getLog().pop()!;
-      expect(player.duration).toEqual(1234);
+          players[0].finish();
+          flushMicrotasks();
+          expect(isDone).toBe(true);
+        }));
+      });
     });
 
-    it('should always cancel the previous transition if a follow-up transition is not matched',
-       fakeAsync(() => {
-         @Component({
-           selector: 'if-cmp',
-           template: `
-          <div [@myAnimation]="exp" (@myAnimation.start)="callback($event)" (@myAnimation.done)="callback($event)"></div>
-        `,
-           animations: [trigger(
-               'myAnimation',
-               [transition(
-                   'a => b', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
-         })
-         class Cmp {
-           exp: any;
-           startEvent: any;
-           doneEvent: any;
-
-           callback(event: any) {
-             if (event.phaseName == 'done') {
-               this.doneEvent = event;
-             } else {
-               this.startEvent = event;
-             }
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = 'a';
-         fixture.detectChanges();
-         engine.flush();
-         expect(getLog().length).toEqual(0);
-         expect(engine.players.length).toEqual(0);
-
-         flushMicrotasks();
-         expect(cmp.startEvent.toState).toEqual('a');
-         expect(cmp.startEvent.totalTime).toEqual(0);
-         expect(cmp.startEvent.toState).toEqual('a');
-         expect(cmp.startEvent.totalTime).toEqual(0);
-         resetLog();
-
-         cmp.exp = 'b';
-         fixture.detectChanges();
-         engine.flush();
-
-         const players = getLog();
-         expect(players.length).toEqual(1);
-         expect(engine.players.length).toEqual(1);
-
-         flushMicrotasks();
-         expect(cmp.startEvent.toState).toEqual('b');
-         expect(cmp.startEvent.totalTime).toEqual(500);
-         expect(cmp.startEvent.toState).toEqual('b');
-         expect(cmp.startEvent.totalTime).toEqual(500);
-         resetLog();
-
-         let completed = false;
-         players[0].onDone(() => completed = true);
-
-         cmp.exp = 'c';
-         fixture.detectChanges();
-         engine.flush();
-
-         expect(engine.players.length).toEqual(0);
-         expect(getLog().length).toEqual(0);
-
-         flushMicrotasks();
-         expect(cmp.startEvent.toState).toEqual('c');
-         expect(cmp.startEvent.totalTime).toEqual(0);
-         expect(cmp.startEvent.toState).toEqual('c');
-         expect(cmp.startEvent.totalTime).toEqual(0);
-
-         expect(completed).toBe(true);
-       }));
-
-    it('should always fire inner callbacks even if no animation is fired when a view is inserted',
-       fakeAsync(() => {
-         @Component({
-           selector: 'if-cmp',
-           template: `
-          <div *ngIf="exp">
-            <div @myAnimation (@myAnimation.start)="track($event)" (@myAnimation.done)="track($event)"></div>
-          </div>
-        `,
-           animations: [
-             trigger('myAnimation', []),
-           ]
-         })
-         class Cmp {
-           exp: any = false;
-           log: string[] = [];
-           track(event: any) {
-             this.log.push(`${event.triggerName}-${event.phaseName}`);
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         expect(cmp.log).toEqual([]);
-
-         cmp.exp = true;
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         expect(cmp.log).toEqual(['myAnimation-start', 'myAnimation-done']);
-       }));
-
-    it('should only turn a view removal as into `void` state transition', () => {
-      @Component({
-        selector: 'if-cmp',
-        template: `
-          <div *ngIf="exp1" [@myAnimation]="exp2"></div>
+    describe('animation triggers', () => {
+      it('should trigger a state change animation from void => state', () => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div *ngIf="exp" [@myAnimation]="exp"></div>
         `,
-        animations: [trigger(
-            'myAnimation',
-            [
-              transition(
-                  'void <=> *', [style({width: '0px'}), animate(1000, style({width: '100px'}))]),
-              transition(
-                  '* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))]),
-            ])]
-      })
-      class Cmp {
-        exp1: any = false;
-        exp2: any = false;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
+          animations: [
+            trigger('myAnimation', [
+              transition('void => *', [
+                style({'opacity': '0'}),
+                animate(500, style({'opacity': '1'})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp: any = false;
+        }
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      function resetState() {
-        cmp.exp2 = 'something';
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = true;
         fixture.detectChanges();
         engine.flush();
-        resetLog();
-      }
 
-      cmp.exp1 = true;
-      cmp.exp2 = null;
-
-      fixture.detectChanges();
-      engine.flush();
-
-      expect(getLog().pop()!.keyframes).toEqual([
-        new Map<string, string|number>([['offset', 0], ['width', '0px']]),
-        new Map<string, string|number>([['offset', 1], ['width', '100px']])
-      ]);
-
-      resetState();
-      cmp.exp2 = false;
-
-      fixture.detectChanges();
-      engine.flush();
+        expect(getLog().length).toEqual(1);
+        expect(getLog().pop()!.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['offset', 0],
+            ['opacity', '0'],
+          ]),
+          new Map<string, string | number>([
+            ['offset', 1],
+            ['opacity', '1'],
+          ]),
+        ]);
+      });
 
-      expect(getLog().pop()!.keyframes).toEqual([
-        new Map<string, string|number>([['offset', 0], ['height', '0px']]),
-        new Map<string, string|number>([['offset', 1], ['height', '100px']])
-      ]);
+      // https://github.com/angular/angular/issues/32794
+      it('should support nested animation triggers', () => {
+        const REUSABLE_ANIMATION = [
+          trigger('myAnimation', [
+            transition('void => *', [
+              style({'opacity': '0'}),
+              animate(500, style({'opacity': '1'})),
+            ]),
+          ]),
+        ];
 
-      resetState();
-      cmp.exp2 = 0;
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div @myAnimation></div>
+        `,
+          animations: [REUSABLE_ANIMATION],
+        })
+        class Cmp {}
 
-      fixture.detectChanges();
-      engine.flush();
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      expect(getLog().pop()!.keyframes).toEqual([
-        new Map<string, string|number>([['offset', 0], ['height', '0px']]),
-        new Map<string, string|number>([['offset', 1], ['height', '100px']])
-      ]);
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        fixture.detectChanges();
+        engine.flush();
 
-      resetState();
-      cmp.exp2 = '';
+        expect(getLog().length).toEqual(1);
+        expect(getLog().pop()!.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['offset', 0],
+            ['opacity', '0'],
+          ]),
+          new Map<string, string | number>([
+            ['offset', 1],
+            ['opacity', '1'],
+          ]),
+        ]);
+      });
 
-      fixture.detectChanges();
-      engine.flush();
+      it('should allow a transition to use a function to determine what method to run', () => {
+        let valueToMatch = '';
+        let capturedElement: any;
+        const transitionFn = (fromState: string, toState: string, element: any) => {
+          capturedElement = element;
+          return toState == valueToMatch;
+        };
 
-      expect(getLog().pop()!.keyframes).toEqual([
-        new Map<string, string|number>([['offset', 0], ['height', '0px']]),
-        new Map<string, string|number>([['offset', 1], ['height', '100px']])
-      ]);
+        @Component({
+          selector: 'if-cmp',
+          template: '<div #element [@myAnimation]="exp"></div>',
+          animations: [
+            trigger('myAnimation', [
+              transition(transitionFn, [style({opacity: 0}), animate(1234, style({opacity: 1}))]),
+            ]),
+          ],
+        })
+        class Cmp {
+          @ViewChild('element') element: any;
+          exp: any = '';
+        }
 
-      resetState();
-      cmp.exp2 = undefined;
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      fixture.detectChanges();
-      engine.flush();
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        valueToMatch = cmp.exp = 'something';
+        fixture.detectChanges();
+        const element = cmp.element.nativeElement;
 
-      expect(getLog().pop()!.keyframes).toEqual([
-        new Map<string, string|number>([['offset', 0], ['height', '0px']]),
-        new Map<string, string|number>([['offset', 1], ['height', '100px']])
-      ]);
+        let players = getLog();
+        expect(players.length).toEqual(1);
+        let [p1] = players;
+        expect(p1.totalTime).toEqual(1234);
+        expect(capturedElement).toEqual(element);
+        resetLog();
 
-      resetState();
-      cmp.exp1 = false;
-      cmp.exp2 = 'abc';
+        valueToMatch = 'something-else';
+        cmp.exp = 'this-wont-match';
+        fixture.detectChanges();
 
-      fixture.detectChanges();
-      engine.flush();
+        players = getLog();
+        expect(players.length).toEqual(0);
+      });
 
-      expect(getLog().pop()!.keyframes).toEqual([
-        new Map<string, string|number>([['offset', 0], ['width', '0px']]),
-        new Map<string, string|number>([['offset', 1], ['width', '100px']])
-      ]);
-    });
+      it('should allow a transition to use a function to determine what method to run and expose any parameter values', () => {
+        const transitionFn = (
+          fromState: string,
+          toState: string,
+          element?: any,
+          params?: {[key: string]: any},
+        ) => {
+          return params!['doMatch'] == true;
+        };
 
-    it('should stringify boolean triggers to `1` and `0`', () => {
-      @Component({
-        selector: 'if-cmp',
-        template: `
-          <div [@myAnimation]="exp"></div>
-        `,
-        animations: [trigger(
-            'myAnimation',
-            [
-              transition('void => 1', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
-              transition('1 => 0', [style({opacity: 1}), animate(1000, style({opacity: 0}))])
-            ])]
-      })
-      class Cmp {
-        exp: any = false;
-      }
+        @Component({
+          selector: 'if-cmp',
+          template: '<div [@myAnimation]="{value:exp, params: {doMatch:doMatch}}"></div>',
+          animations: [
+            trigger('myAnimation', [
+              transition(transitionFn, [style({opacity: 0}), animate(3333, style({opacity: 1}))]),
+            ]),
+          ],
+        })
+        class Cmp {
+          doMatch = false;
+          exp: any = '';
+        }
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.doMatch = true;
+        fixture.detectChanges();
 
-      cmp.exp = true;
-      fixture.detectChanges();
-      engine.flush();
+        let players = getLog();
+        expect(players.length).toEqual(1);
+        let [p1] = players;
+        expect(p1.totalTime).toEqual(3333);
+        resetLog();
 
-      expect(getLog().pop()!.keyframes).toEqual([
-        new Map<string, string|number>([['offset', 0], ['opacity', '0']]),
-        new Map<string, string|number>([['offset', 1], ['opacity', '1']])
-      ]);
+        cmp.doMatch = false;
+        cmp.exp = 'this-wont-match';
+        fixture.detectChanges();
 
-      cmp.exp = false;
-      fixture.detectChanges();
-      engine.flush();
+        players = getLog();
+        expect(players.length).toEqual(0);
+      });
 
-      expect(getLog().pop()!.keyframes).toEqual([
-        new Map<string, string|number>([['offset', 0], ['opacity', '1']]),
-        new Map<string, string|number>([['offset', 1], ['opacity', '0']])
-      ]);
-    });
+      it('should allow a state value to be `0`', () => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+            <div [@myAnimation]="exp"></div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              transition('0 => 1', [
+                style({height: '0px'}),
+                animate(1234, style({height: '100px'})),
+              ]),
+              transition('* => 1', [style({width: '0px'}), animate(4567, style({width: '100px'}))]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp: any = false;
+        }
 
-    it('should understand boolean values as `true` and `false` for transition animations', () => {
-      @Component({
-        selector: 'if-cmp',
-        template: `
-          <div [@myAnimation]="exp"></div>
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = 0;
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp = 1;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().length).toEqual(1);
+        const player = getLog().pop()!;
+        expect(player.duration).toEqual(1234);
+      });
+
+      it('should always cancel the previous transition if a follow-up transition is not matched', fakeAsync(() => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div [@myAnimation]="exp" (@myAnimation.start)="callback($event)" (@myAnimation.done)="callback($event)"></div>
         `,
-        animations: [
-          trigger(
-              'myAnimation',
-              [
-                transition(
-                    'true => false',
-                    [
-                      style({opacity: 0}),
-                      animate(1234, style({opacity: 1})),
-                    ]),
-                transition(
-                    'false => true',
-                    [
-                      style({opacity: 1}),
-                      animate(4567, style({opacity: 0})),
-                    ])
+          animations: [
+            trigger('myAnimation', [
+              transition('a => b', [
+                style({'opacity': '0'}),
+                animate(500, style({'opacity': '1'})),
               ]),
-        ]
-      })
-      class Cmp {
-        exp: any = false;
-      }
+            ]),
+          ],
+        })
+        class Cmp {
+          exp: any;
+          startEvent: any;
+          doneEvent: any;
+
+          callback(event: any) {
+            if (event.phaseName == 'done') {
+              this.doneEvent = event;
+            } else {
+              this.startEvent = event;
+            }
+          }
+        }
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-      cmp.exp = true;
-      fixture.detectChanges();
+        cmp.exp = 'a';
+        fixture.detectChanges();
+        engine.flush();
+        expect(getLog().length).toEqual(0);
+        expect(engine.players.length).toEqual(0);
 
-      cmp.exp = false;
-      fixture.detectChanges();
+        flushMicrotasks();
+        expect(cmp.startEvent.toState).toEqual('a');
+        expect(cmp.startEvent.totalTime).toEqual(0);
+        expect(cmp.startEvent.toState).toEqual('a');
+        expect(cmp.startEvent.totalTime).toEqual(0);
+        resetLog();
 
-      let players = getLog();
-      expect(players.length).toEqual(1);
-      let [player] = players;
+        cmp.exp = 'b';
+        fixture.detectChanges();
+        engine.flush();
 
-      expect(player.duration).toEqual(1234);
-    });
+        const players = getLog();
+        expect(players.length).toEqual(1);
+        expect(engine.players.length).toEqual(1);
 
-    it('should understand boolean values as `true` and `false` for transition animations and apply the corresponding state() value',
-       () => {
-         @Component({
-           selector: 'if-cmp',
-           template: `
-          <div [@myAnimation]="exp"></div>
-        `,
-           animations: [
-             trigger(
-                 'myAnimation',
-                 [
-                   state('true', style({color: 'red'})),
-                   state('false', style({color: 'blue'})),
-                   transition(
-                       'true <=> false',
-                       [
-                         animate(1000, style({color: 'gold'})),
-                         animate(1000),
-                       ]),
-                 ]),
-           ]
-         })
-         class Cmp {
-           exp: any = false;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = false;
-         fixture.detectChanges();
-
-         cmp.exp = true;
-         fixture.detectChanges();
-
-         let players = getLog();
-         expect(players.length).toEqual(1);
-         let [player] = players;
-
-         expect(player.keyframes).toEqual([
-           new Map<string, string|number>([['color', 'blue'], ['offset', 0]]),
-           new Map<string, string|number>([['color', 'gold'], ['offset', 0.5]]),
-           new Map<string, string|number>([['color', 'red'], ['offset', 1]])
-         ]);
-       });
-
-    it('should not throw an error if a trigger with the same name exists in separate components',
-       () => {
-         @Component({selector: 'cmp1', template: '...', animations: [trigger('trig', [])]})
-         class Cmp1 {
-         }
-
-         @Component({selector: 'cmp2', template: '...', animations: [trigger('trig', [])]})
-         class Cmp2 {
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp1, Cmp2]});
-         const cmp1 = TestBed.createComponent(Cmp1);
-         const cmp2 = TestBed.createComponent(Cmp2);
-       });
-
-    describe('host bindings', () => {
-      it('should trigger a state change animation from state => state on the component host element',
-         fakeAsync(() => {
-           @Component({
-             selector: 'my-cmp',
-             template: '...',
-             animations: [trigger(
-                 'myAnimation',
-                 [transition(
-                     'a => b', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
-           })
-           class Cmp {
-             @HostBinding('@myAnimation') exp = 'a';
-           }
-
-           TestBed.configureTestingModule({declarations: [Cmp]});
-
-           const engine = TestBed.inject(ɵAnimationEngine);
-           const fixture = TestBed.createComponent(Cmp);
-           const cmp = fixture.componentInstance;
-           fixture.detectChanges();
-           engine.flush();
-           expect(getLog().length).toEqual(0);
-
-           cmp.exp = 'b';
-           fixture.detectChanges();
-           engine.flush();
-           expect(getLog().length).toEqual(1);
-
-           const data = getLog().pop()!;
-           expect(data.element).toEqual(fixture.elementRef.nativeElement);
-           expect(data.keyframes).toEqual([
-             new Map<string, string|number>([['offset', 0], ['opacity', '0']]),
-             new Map<string, string|number>([['offset', 1], ['opacity', '1']])
-           ]);
-         }));
-
-      it('should trigger a leave animation when the inner has ViewContainerRef injected',
-         fakeAsync(() => {
-           @Component({
-             selector: 'parent-cmp',
-             template: `
-             <child-cmp *ngIf="exp"></child-cmp>
-           `
-           })
-           class ParentCmp {
-             public exp = true;
-           }
-
-           @Component({
-             selector: 'child-cmp',
-             template: '...',
-             animations: [trigger(
-                 'host',
-                 [transition(':leave', [style({opacity: 1}), animate(1000, style({opacity: 0}))])])]
-           })
-           class ChildCmp {
-             @HostBinding('@host') public hostAnimation = true;
-             constructor(private vcr: ViewContainerRef) {}
-           }
-
-           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-
-           const engine = TestBed.inject(ɵAnimationEngine);
-           const fixture = TestBed.createComponent(ParentCmp);
-           const cmp = fixture.componentInstance;
-           fixture.detectChanges();
-           engine.flush();
-           expect(getLog().length).toEqual(0);
-
-           cmp.exp = false;
-           fixture.detectChanges();
-           expect(fixture.debugElement.nativeElement.children.length).toBe(1);
-
-           engine.flush();
-           expect(getLog().length).toEqual(1);
-
-           const [player] = getLog();
-           expect(player.keyframes).toEqual([
-             new Map<string, string|number>([['opacity', '1'], ['offset', 0]]),
-             new Map<string, string|number>([['opacity', '0'], ['offset', 1]]),
-           ]);
-
-           player.finish();
-           expect(fixture.debugElement.nativeElement.children.length).toBe(0);
-         }));
-
-      it('should trigger a leave animation when the inner components host binding updates',
-         fakeAsync(() => {
-           @Component({
-             selector: 'parent-cmp',
-             template: `
-                <child-cmp *ngIf="exp"></child-cmp>
-              `
-           })
-           class ParentCmp {
-             public exp = true;
-           }
-
-           @Component({
-             selector: 'child-cmp',
-             template: '...',
-             animations: [trigger(
-                 'host',
-                 [transition(':leave', [style({opacity: 1}), animate(1000, style({opacity: 0}))])])]
-           })
-           class ChildCmp {
-             @HostBinding('@host') public hostAnimation = true;
-           }
-
-           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-
-           const engine = TestBed.inject(ɵAnimationEngine);
-           const fixture = TestBed.createComponent(ParentCmp);
-           const cmp = fixture.componentInstance;
-           fixture.detectChanges();
-           engine.flush();
-           expect(getLog().length).toEqual(0);
-
-           cmp.exp = false;
-           fixture.detectChanges();
-           expect(fixture.debugElement.nativeElement.children.length).toBe(1);
-
-           engine.flush();
-           expect(getLog().length).toEqual(1);
-
-           const [player] = getLog();
-           expect(player.keyframes).toEqual([
-             new Map<string, string|number>([['opacity', '1'], ['offset', 0]]),
-             new Map<string, string|number>([['opacity', '0'], ['offset', 1]]),
-           ]);
-
-           player.finish();
-           expect(fixture.debugElement.nativeElement.children.length).toBe(0);
-         }));
-
-      it('should wait for child animations before removing parent', fakeAsync(() => {
-           @Component({
-             template: '<child-cmp *ngIf="exp" @parentTrigger></child-cmp>',
-             animations: [trigger(
-                 'parentTrigger', [transition(':leave', [group([query('@*', animateChild())])])])]
-           })
-           class ParentCmp {
-             exp = true;
-           }
-
-           @Component({
-             selector: 'child-cmp',
-             template: '<p @childTrigger>Hello there</p>',
-             animations: [trigger(
-                 'childTrigger',
-                 [transition(
-                     ':leave', [style({opacity: 1}), animate('200ms', style({opacity: 0}))])])]
-           })
-           class ChildCmp {
-           }
-
-           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-           const engine = TestBed.inject(ɵAnimationEngine);
-           const fixture = TestBed.createComponent(ParentCmp);
-
-           fixture.detectChanges();
-           engine.flush();
-           expect(getLog().length).toBe(0);
-
-           fixture.componentInstance.exp = false;
-           fixture.detectChanges();
-           expect(fixture.nativeElement.children.length).toBe(1);
-
-           engine.flush();
-           expect(getLog().length).toBe(2);
-
-           const player = getLog()[1];
-           expect(player.keyframes).toEqual([
-             new Map<string, string|number>([['opacity', '1'], ['offset', 0]]),
-             new Map<string, string|number>([['opacity', '0'], ['offset', 1]]),
-           ]);
-
-           player.finish();
-           flushMicrotasks();
-           expect(fixture.nativeElement.children.length).toBe(0);
-         }));
-
-      // animationRenderer => nonAnimationRenderer
-      it('should trigger a leave animation when the outer components element binding updates on the host component element',
-         fakeAsync(() => {
-           @Component({
-             selector: 'parent-cmp',
-             animations: [trigger(
-                 'host',
-                 [transition(
-                     ':leave', [style({opacity: 1}), animate(1000, style({opacity: 0}))])])],
-             template: `
-                <child-cmp *ngIf="exp" @host></child-cmp>
-              `
-           })
-           class ParentCmp {
-             public exp = true;
-           }
-
-           @Component({
-             selector: 'child-cmp',
-             template: '...',
-           })
-           class ChildCmp {
-           }
-
-           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-
-           const engine = TestBed.inject(ɵAnimationEngine);
-           const fixture = TestBed.createComponent(ParentCmp);
-           const cmp = fixture.componentInstance;
-           fixture.detectChanges();
-           engine.flush();
-           expect(getLog().length).toEqual(0);
-
-           cmp.exp = false;
-           fixture.detectChanges();
-           expect(fixture.debugElement.nativeElement.children.length).toBe(1);
-
-           engine.flush();
-           expect(getLog().length).toEqual(1);
-
-           const [player] = getLog();
-           expect(player.keyframes).toEqual([
-             new Map<string, string|number>([['opacity', '1'], ['offset', 0]]),
-             new Map<string, string|number>([['opacity', '0'], ['offset', 1]]),
-           ]);
-
-           player.finish();
-           flushMicrotasks();
-           expect(fixture.debugElement.nativeElement.children.length).toBe(0);
-         }));
-
-      it('should trigger a leave animation when both the inner and outer components trigger on the same element',
-         fakeAsync(() => {
-           @Component({
-             selector: 'parent-cmp',
-             animations: [trigger(
-                 'host', [transition(
-                             ':leave',
-                             [style({height: '100px'}), animate(1000, style({height: '0px'}))])])],
-             template: `
-                <child-cmp *ngIf="exp" @host></child-cmp>
-              `
-           })
-           class ParentCmp {
-             public exp = true;
-           }
-
-           @Component({
-             selector: 'child-cmp',
-             template: '...',
-             animations: [trigger(
-                 'host',
-                 [transition(
-                     ':leave', [style({width: '100px'}), animate(1000, style({width: '0px'}))])])]
-           })
-           class ChildCmp {
-             @HostBinding('@host') public hostAnimation = true;
-           }
-
-           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-
-           const engine = TestBed.inject(ɵAnimationEngine);
-           const fixture = TestBed.createComponent(ParentCmp);
-           const cmp = fixture.componentInstance;
-           fixture.detectChanges();
-           engine.flush();
-           expect(getLog().length).toEqual(0);
-
-           cmp.exp = false;
-           fixture.detectChanges();
-           expect(fixture.debugElement.nativeElement.children.length).toBe(1);
-
-           engine.flush();
-           expect(getLog().length).toEqual(2);
-
-           const [p1, p2] = getLog();
-           expect(p1.keyframes).toEqual([
-             new Map<string, string|number>([['width', '100px'], ['offset', 0]]),
-             new Map<string, string|number>([['width', '0px'], ['offset', 1]]),
-           ]);
-
-           expect(p2.keyframes).toEqual([
-             new Map<string, string|number>([['height', '100px'], ['offset', 0]]),
-             new Map<string, string|number>([['height', '0px'], ['offset', 1]]),
-           ]);
-
-           p1.finish();
-           p2.finish();
-           flushMicrotasks();
-           expect(fixture.debugElement.nativeElement.children.length).toBe(0);
-         }));
-
-      it('should not throw when the host element is removed and no animation triggers',
-         fakeAsync(() => {
-           @Component({
-             selector: 'parent-cmp',
-             template: `
-                <child-cmp *ngIf="exp"></child-cmp>
-              `
-           })
-           class ParentCmp {
-             public exp = true;
-           }
-
-           @Component({
-             selector: 'child-cmp',
-             template: '...',
-             animations: [trigger('host', [transition('a => b', [style({height: '100px'})])])],
-           })
-           class ChildCmp {
-             @HostBinding('@host') public hostAnimation = 'a';
-           }
-
-           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-
-           const engine = TestBed.inject(ɵAnimationEngine);
-           const fixture = TestBed.createComponent(ParentCmp);
-           const cmp = fixture.componentInstance;
-           fixture.detectChanges();
-           expect(fixture.debugElement.nativeElement.children.length).toBe(1);
-
-           engine.flush();
-           expect(getLog().length).toEqual(0);
-
-           cmp.exp = false;
-           fixture.detectChanges();
-           engine.flush();
-           flushMicrotasks();
-           expect(getLog().length).toEqual(0);
-           expect(fixture.debugElement.nativeElement.children.length).toBe(0);
-
-           flushMicrotasks();
-           expect(fixture.debugElement.nativeElement.children.length).toBe(0);
-         }));
-
-      it('should properly evaluate pre/auto-style values when components are inserted/removed which contain host animations',
-         fakeAsync(() => {
-           @Component({
-             selector: 'parent-cmp',
-             template: `
-                <child-cmp *ngFor="let item of items"></child-cmp>
-              `
-           })
-           class ParentCmp {
-             items: any[] = [1, 2, 3, 4, 5];
-           }
-
-           @Component({
-             selector: 'child-cmp',
-             template: '... child ...',
-             animations:
-                 [trigger('host', [transition(':leave', [animate(1000, style({opacity: 0}))])])]
-           })
-           class ChildCmp {
-             @HostBinding('@host') public hostAnimation = 'a';
-           }
-
-           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-
-           const engine = TestBed.inject(ɵAnimationEngine);
-           const fixture = TestBed.createComponent(ParentCmp);
-           const cmp = fixture.componentInstance;
-           const element = fixture.nativeElement;
-           fixture.detectChanges();
-
-           cmp.items = [0, 2, 4, 6];  // 1,3,5 get removed
-           fixture.detectChanges();
-
-           const items = element.querySelectorAll('child-cmp');
-           for (let i = 0; i < items.length; i++) {
-             const item = items[i];
-             expect(item.style['display']).toBeFalsy();
-           }
-         }));
-    });
+        flushMicrotasks();
+        expect(cmp.startEvent.toState).toEqual('b');
+        expect(cmp.startEvent.totalTime).toEqual(500);
+        expect(cmp.startEvent.toState).toEqual('b');
+        expect(cmp.startEvent.totalTime).toEqual(500);
+        resetLog();
 
-    it('should cancel and merge in mid-animation styles into the follow-up animation, but only for animation keyframes that start right away',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-          <div [@myAnimation]="exp"></div>
-        `,
-           animations: [trigger(
-               'myAnimation',
-               [
-                 transition(
-                     'a => b',
-                     [
-                       style({'opacity': '0'}),
-                       animate(500, style({'opacity': '1'})),
-                     ]),
-                 transition(
-                     'b => c',
-                     [
-                       group([
-                         animate(500, style({'width': '100px'})),
-                         animate(500, style({'height': '100px'})),
-                       ]),
-                       animate(500, keyframes([style({'opacity': '0'}), style({'opacity': '1'})]))
-                     ]),
-               ])],
-         })
-         class Cmp {
-           exp: any = false;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = 'a';
-         fixture.detectChanges();
-         engine.flush();
-         expect(getLog().length).toEqual(0);
-         resetLog();
-
-         cmp.exp = 'b';
-         fixture.detectChanges();
-         engine.flush();
-         expect(getLog().length).toEqual(1);
-         resetLog();
-
-         cmp.exp = 'c';
-         fixture.detectChanges();
-         engine.flush();
-
-         const players = getLog();
-         expect(players.length).toEqual(3);
-         const [p1, p2, p3] = players;
-         expect(p1.previousStyles).toEqual(new Map([['opacity', AUTO_STYLE]]));
-         expect(p2.previousStyles).toEqual(new Map([['opacity', AUTO_STYLE]]));
-         expect(p3.previousStyles).toEqual(new Map());
-       });
-
-    it('should provide the styling of previous players that are grouped', () => {
-      @Component({
-          selector: 'ani-cmp',
+        let completed = false;
+        players[0].onDone(() => (completed = true));
+
+        cmp.exp = 'c';
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(engine.players.length).toEqual(0);
+        expect(getLog().length).toEqual(0);
+
+        flushMicrotasks();
+        expect(cmp.startEvent.toState).toEqual('c');
+        expect(cmp.startEvent.totalTime).toEqual(0);
+        expect(cmp.startEvent.toState).toEqual('c');
+        expect(cmp.startEvent.totalTime).toEqual(0);
+
+        expect(completed).toBe(true);
+      }));
+
+      it('should always fire inner callbacks even if no animation is fired when a view is inserted', fakeAsync(() => {
+        @Component({
+          selector: 'if-cmp',
           template: `
-          <div [@myAnimation]="exp"></div>
+          <div *ngIf="exp">
+            <div @myAnimation (@myAnimation.start)="track($event)" (@myAnimation.done)="track($event)"></div>
+          </div>
         `,
-          animations: [trigger(
-              'myAnimation',
-              [
-                transition(
-                    '1 => 2',
-                    [
-                      group([
-                        animate(500, style({'width': '100px'})),
-                        animate(500, style({'height': '100px'})),
-                      ]),
-                      animate(500, keyframes([
-                        style({'opacity': '0'}),
-                        style({'opacity': '1'})
-                      ]))
-                    ]),
-                transition(
-                    '2 => 3',
-                    [
-                      style({'opacity': '0'}),
-                      animate(500, style({'opacity': '1'})),
-                    ]),
-              ])],
+          animations: [trigger('myAnimation', [])],
         })
         class Cmp {
-        exp: any = false;
-      }
+          exp: any = false;
+          log: string[] = [];
+          track(event: any) {
+            this.log.push(`${event.triggerName}-${event.phaseName}`);
+          }
+        }
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+        flushMicrotasks();
 
-      fixture.detectChanges();
-      engine.flush();
+        expect(cmp.log).toEqual([]);
 
-      cmp.exp = '1';
-      fixture.detectChanges();
-      engine.flush();
-      expect(getLog().length).toEqual(0);
-      resetLog();
+        cmp.exp = true;
+        fixture.detectChanges();
+        flushMicrotasks();
 
-      cmp.exp = '2';
-      fixture.detectChanges();
-      engine.flush();
-      expect(getLog().length).toEqual(3);
-      resetLog();
+        expect(cmp.log).toEqual(['myAnimation-start', 'myAnimation-done']);
+      }));
 
-      cmp.exp = '3';
-      fixture.detectChanges();
-      engine.flush();
+      it('should only turn a view removal as into `void` state transition', () => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div *ngIf="exp1" [@myAnimation]="exp2"></div>
+        `,
+          animations: [
+            trigger('myAnimation', [
+              transition('void <=> *', [
+                style({width: '0px'}),
+                animate(1000, style({width: '100px'})),
+              ]),
+              transition('* => *', [
+                style({height: '0px'}),
+                animate(1000, style({height: '100px'})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp1: any = false;
+          exp2: any = false;
+        }
 
-      const players = getLog();
-      expect(players.length).toEqual(1);
-      const player = players[0] as MockAnimationPlayer;
-      const pp = player.previousPlayers as MockAnimationPlayer[];
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      expect(pp.length).toEqual(3);
-      expect(pp[0].currentSnapshot).toEqual(new Map([['width', AUTO_STYLE]]));
-      expect(pp[1].currentSnapshot).toEqual(new Map([['height', AUTO_STYLE]]));
-      expect(pp[2].currentSnapshot).toEqual(new Map([['opacity', AUTO_STYLE]]));
-    });
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-    it('should provide the styling of previous players that are grouped and queried and make sure match the players with the correct elements',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-          <div class="container" [@myAnimation]="exp">
-            <div class="inner"></div>
-          </div>
-        `,
-           animations: [
-             trigger(
-                 'myAnimation',
-                 [
-                   transition(
-                       '1 => 2',
-                       [
-                         style({fontSize: '10px'}),
-                         query(
-                             '.inner',
-                             [
-                               style({fontSize: '20px'}),
-                             ]),
-                         animate('1s', style({fontSize: '100px'})),
-                         query(
-                             '.inner',
-                             [
-                               animate('1s', style({fontSize: '200px'})),
-                             ]),
-                       ]),
-                   transition(
-                       '2 => 3',
-                       [
-                         animate('1s', style({fontSize: '0px'})),
-                         query(
-                             '.inner',
-                             [
-                               animate('1s', style({fontSize: '0px'})),
-                             ]),
-                       ]),
-                 ]),
-           ],
-         })
-         class Cmp {
-           exp: any = false;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         fixture.detectChanges();
-
-         cmp.exp = '1';
-         fixture.detectChanges();
-         resetLog();
-
-         cmp.exp = '2';
-         fixture.detectChanges();
-         resetLog();
-
-         cmp.exp = '3';
-         fixture.detectChanges();
-         const players = getLog();
-         expect(players.length).toEqual(2);
-         const [p1, p2] = players as MockAnimationPlayer[];
-
-         const pp1 = p1.previousPlayers as MockAnimationPlayer[];
-         expect(p1.element.classList.contains('container')).toBeTruthy();
-         for (let i = 0; i < pp1.length; i++) {
-           expect(pp1[i].element).toEqual(p1.element);
-         }
-
-         const pp2 = p2.previousPlayers as MockAnimationPlayer[];
-         expect(p2.element.classList.contains('inner')).toBeTruthy();
-         for (let i = 0; i < pp2.length; i++) {
-           expect(pp2[i].element).toEqual(p2.element);
-         }
-       });
-
-    it('should properly balance styles between states even if there are no destination state styles',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-            <div @myAnimation *ngIf="exp"></div>
-          `,
-           animations: [trigger(
-               'myAnimation',
-               [
-                 state('void', style({opacity: 0, width: '0px', height: '0px'})),
-                 transition(':enter', animate(1000))
-               ])]
-         })
-         class Cmp {
-           exp: boolean = false;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         cmp.exp = true;
-
-         fixture.detectChanges();
-         engine.flush();
-
-         const [p1] = getLog();
-         expect(p1.keyframes).toEqual([
-           new Map<string, string|number>(
-               [['opacity', '0'], ['width', '0px'], ['height', '0px'], ['offset', 0]]),
-           new Map<string, string|number>([
-             ['opacity', AUTO_STYLE], ['width', AUTO_STYLE], ['height', AUTO_STYLE], ['offset', 1]
-           ])
-         ]);
-       });
-
-    it('should not apply the destination styles if the final animate step already contains styles',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-            <div @myAnimation *ngIf="exp"></div>
-          `,
-           animations: [trigger(
-               'myAnimation',
-               [
-                 state('void', style({color: 'red'})), state('*', style({color: 'blue'})),
-                 transition(
-                     ':enter',
-                     [style({fontSize: '0px '}), animate(1000, style({fontSize: '100px'}))])
-               ])]
-         })
-         class Cmp {
-           exp: boolean = false;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         cmp.exp = true;
-
-         fixture.detectChanges();
-         engine.flush();
-
-         const players = getLog();
-         expect(players.length).toEqual(1);
-
-         // notice how the final color is NOT blue
-         expect(players[0].keyframes).toEqual([
-           new Map<string, string|number>([['fontSize', '0px'], ['color', 'red'], ['offset', 0]]),
-           new Map<string, string|number>([['fontSize', '100px'], ['color', 'red'], ['offset', 1]])
-         ]);
-       });
-
-    it('should invoke an animation trigger that is state-less', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
-            <div *ngFor="let item of items" @myAnimation></div>
-          `,
-        animations: [trigger(
-            'myAnimation',
-            [transition(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))])])]
-      })
-      class Cmp {
-        items: number[] = [];
-      }
+        function resetState() {
+          cmp.exp2 = 'something';
+          fixture.detectChanges();
+          engine.flush();
+          resetLog();
+        }
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        cmp.exp1 = true;
+        cmp.exp2 = null;
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+        engine.flush();
 
-      cmp.items = [1, 2, 3, 4, 5];
-      fixture.detectChanges();
-      engine.flush();
-      expect(getLog().length).toEqual(5);
-
-      for (let i = 0; i < 5; i++) {
-        const item = getLog()[i];
-        expect(item.duration).toEqual(1000);
-        expect(item.keyframes).toEqual([
-          new Map<string, string|number>([['opacity', '0'], ['offset', 0]]),
-          new Map<string, string|number>([['opacity', '1'], ['offset', 1]])
+        expect(getLog().pop()!.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['offset', 0],
+            ['width', '0px'],
+          ]),
+          new Map<string, string | number>([
+            ['offset', 1],
+            ['width', '100px'],
+          ]),
         ]);
-      }
-    });
 
-    it('should retain styles on the element once the animation is complete', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
-            <div #green @green></div>
-          `,
-        animations: [trigger(
-            'green',
-            [state('*', style({backgroundColor: 'green'})), transition('* => *', animate(500))])]
-      })
-      class Cmp {
-        @ViewChild('green') public element: any;
-      }
+        resetState();
+        cmp.exp2 = false;
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        fixture.detectChanges();
+        engine.flush();
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-      fixture.detectChanges();
-      engine.flush();
+        expect(getLog().pop()!.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['offset', 0],
+            ['height', '0px'],
+          ]),
+          new Map<string, string | number>([
+            ['offset', 1],
+            ['height', '100px'],
+          ]),
+        ]);
 
-      const player = engine.players.pop()!;
-      player.finish();
+        resetState();
+        cmp.exp2 = 0;
 
-      expect(hasStyle(cmp.element.nativeElement, 'background-color', 'green')).toBeTruthy();
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().pop()!.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['offset', 0],
+            ['height', '0px'],
+          ]),
+          new Map<string, string | number>([
+            ['offset', 1],
+            ['height', '100px'],
+          ]),
+        ]);
+
+        resetState();
+        cmp.exp2 = '';
+
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().pop()!.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['offset', 0],
+            ['height', '0px'],
+          ]),
+          new Map<string, string | number>([
+            ['offset', 1],
+            ['height', '100px'],
+          ]),
+        ]);
+
+        resetState();
+        cmp.exp2 = undefined;
+
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().pop()!.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['offset', 0],
+            ['height', '0px'],
+          ]),
+          new Map<string, string | number>([
+            ['offset', 1],
+            ['height', '100px'],
+          ]),
+        ]);
+
+        resetState();
+        cmp.exp1 = false;
+        cmp.exp2 = 'abc';
+
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().pop()!.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['offset', 0],
+            ['width', '0px'],
+          ]),
+          new Map<string, string | number>([
+            ['offset', 1],
+            ['width', '100px'],
+          ]),
+        ]);
+      });
+
+      it('should stringify boolean triggers to `1` and `0`', () => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+          animations: [
+            trigger('myAnimation', [
+              transition('void => 1', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+              transition('1 => 0', [style({opacity: 1}), animate(1000, style({opacity: 0}))]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp: any = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = true;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().pop()!.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['offset', 0],
+            ['opacity', '0'],
+          ]),
+          new Map<string, string | number>([
+            ['offset', 1],
+            ['opacity', '1'],
+          ]),
+        ]);
+
+        cmp.exp = false;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().pop()!.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['offset', 0],
+            ['opacity', '1'],
+          ]),
+          new Map<string, string | number>([
+            ['offset', 1],
+            ['opacity', '0'],
+          ]),
+        ]);
+      });
+
+      it('should understand boolean values as `true` and `false` for transition animations', () => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+          animations: [
+            trigger('myAnimation', [
+              transition('true => false', [
+                style({opacity: 0}),
+                animate(1234, style({opacity: 1})),
+              ]),
+              transition('false => true', [
+                style({opacity: 1}),
+                animate(4567, style({opacity: 0})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp: any = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = true;
+        fixture.detectChanges();
+
+        cmp.exp = false;
+        fixture.detectChanges();
+
+        let players = getLog();
+        expect(players.length).toEqual(1);
+        let [player] = players;
+
+        expect(player.duration).toEqual(1234);
+      });
+
+      it('should understand boolean values as `true` and `false` for transition animations and apply the corresponding state() value', () => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+          animations: [
+            trigger('myAnimation', [
+              state('true', style({color: 'red'})),
+              state('false', style({color: 'blue'})),
+              transition('true <=> false', [animate(1000, style({color: 'gold'})), animate(1000)]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp: any = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = false;
+        fixture.detectChanges();
+
+        cmp.exp = true;
+        fixture.detectChanges();
+
+        let players = getLog();
+        expect(players.length).toEqual(1);
+        let [player] = players;
+
+        expect(player.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['color', 'blue'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['color', 'gold'],
+            ['offset', 0.5],
+          ]),
+          new Map<string, string | number>([
+            ['color', 'red'],
+            ['offset', 1],
+          ]),
+        ]);
+      });
+
+      it('should not throw an error if a trigger with the same name exists in separate components', () => {
+        @Component({selector: 'cmp1', template: '...', animations: [trigger('trig', [])]})
+        class Cmp1 {}
+
+        @Component({selector: 'cmp2', template: '...', animations: [trigger('trig', [])]})
+        class Cmp2 {}
+
+        TestBed.configureTestingModule({declarations: [Cmp1, Cmp2]});
+        const cmp1 = TestBed.createComponent(Cmp1);
+        const cmp2 = TestBed.createComponent(Cmp2);
+      });
+
+      describe('host bindings', () => {
+        it('should trigger a state change animation from state => state on the component host element', fakeAsync(() => {
+          @Component({
+            selector: 'my-cmp',
+            template: '...',
+            animations: [
+              trigger('myAnimation', [
+                transition('a => b', [
+                  style({'opacity': '0'}),
+                  animate(500, style({'opacity': '1'})),
+                ]),
+              ]),
+            ],
+          })
+          class Cmp {
+            @HostBinding('@myAnimation') exp = 'a';
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+
+          const engine = TestBed.inject(ɵAnimationEngine);
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          fixture.detectChanges();
+          engine.flush();
+          expect(getLog().length).toEqual(0);
+
+          cmp.exp = 'b';
+          fixture.detectChanges();
+          engine.flush();
+          expect(getLog().length).toEqual(1);
+
+          const data = getLog().pop()!;
+          expect(data.element).toEqual(fixture.elementRef.nativeElement);
+          expect(data.keyframes).toEqual([
+            new Map<string, string | number>([
+              ['offset', 0],
+              ['opacity', '0'],
+            ]),
+            new Map<string, string | number>([
+              ['offset', 1],
+              ['opacity', '1'],
+            ]),
+          ]);
+        }));
+
+        it('should trigger a leave animation when the inner has ViewContainerRef injected', fakeAsync(() => {
+          @Component({
+            selector: 'parent-cmp',
+            template: `
+             <child-cmp *ngIf="exp"></child-cmp>
+           `,
+          })
+          class ParentCmp {
+            public exp = true;
+          }
+
+          @Component({
+            selector: 'child-cmp',
+            template: '...',
+            animations: [
+              trigger('host', [
+                transition(':leave', [style({opacity: 1}), animate(1000, style({opacity: 0}))]),
+              ]),
+            ],
+          })
+          class ChildCmp {
+            @HostBinding('@host') public hostAnimation = true;
+            constructor(private vcr: ViewContainerRef) {}
+          }
+
+          TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+          const engine = TestBed.inject(ɵAnimationEngine);
+          const fixture = TestBed.createComponent(ParentCmp);
+          const cmp = fixture.componentInstance;
+          fixture.detectChanges();
+          engine.flush();
+          expect(getLog().length).toEqual(0);
+
+          cmp.exp = false;
+          fixture.detectChanges();
+          expect(fixture.debugElement.nativeElement.children.length).toBe(1);
+
+          engine.flush();
+          expect(getLog().length).toEqual(1);
+
+          const [player] = getLog();
+          expect(player.keyframes).toEqual([
+            new Map<string, string | number>([
+              ['opacity', '1'],
+              ['offset', 0],
+            ]),
+            new Map<string, string | number>([
+              ['opacity', '0'],
+              ['offset', 1],
+            ]),
+          ]);
+
+          player.finish();
+          expect(fixture.debugElement.nativeElement.children.length).toBe(0);
+        }));
+
+        it('should trigger a leave animation when the inner components host binding updates', fakeAsync(() => {
+          @Component({
+            selector: 'parent-cmp',
+            template: `
+                <child-cmp *ngIf="exp"></child-cmp>
+              `,
+          })
+          class ParentCmp {
+            public exp = true;
+          }
+
+          @Component({
+            selector: 'child-cmp',
+            template: '...',
+            animations: [
+              trigger('host', [
+                transition(':leave', [style({opacity: 1}), animate(1000, style({opacity: 0}))]),
+              ]),
+            ],
+          })
+          class ChildCmp {
+            @HostBinding('@host') public hostAnimation = true;
+          }
+
+          TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+          const engine = TestBed.inject(ɵAnimationEngine);
+          const fixture = TestBed.createComponent(ParentCmp);
+          const cmp = fixture.componentInstance;
+          fixture.detectChanges();
+          engine.flush();
+          expect(getLog().length).toEqual(0);
+
+          cmp.exp = false;
+          fixture.detectChanges();
+          expect(fixture.debugElement.nativeElement.children.length).toBe(1);
+
+          engine.flush();
+          expect(getLog().length).toEqual(1);
+
+          const [player] = getLog();
+          expect(player.keyframes).toEqual([
+            new Map<string, string | number>([
+              ['opacity', '1'],
+              ['offset', 0],
+            ]),
+            new Map<string, string | number>([
+              ['opacity', '0'],
+              ['offset', 1],
+            ]),
+          ]);
+
+          player.finish();
+          expect(fixture.debugElement.nativeElement.children.length).toBe(0);
+        }));
+
+        it('should wait for child animations before removing parent', fakeAsync(() => {
+          @Component({
+            template: '<child-cmp *ngIf="exp" @parentTrigger></child-cmp>',
+            animations: [
+              trigger('parentTrigger', [
+                transition(':leave', [group([query('@*', animateChild())])]),
+              ]),
+            ],
+          })
+          class ParentCmp {
+            exp = true;
+          }
+
+          @Component({
+            selector: 'child-cmp',
+            template: '<p @childTrigger>Hello there</p>',
+            animations: [
+              trigger('childTrigger', [
+                transition(':leave', [style({opacity: 1}), animate('200ms', style({opacity: 0}))]),
+              ]),
+            ],
+          })
+          class ChildCmp {}
+
+          TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+          const engine = TestBed.inject(ɵAnimationEngine);
+          const fixture = TestBed.createComponent(ParentCmp);
+
+          fixture.detectChanges();
+          engine.flush();
+          expect(getLog().length).toBe(0);
+
+          fixture.componentInstance.exp = false;
+          fixture.detectChanges();
+          expect(fixture.nativeElement.children.length).toBe(1);
+
+          engine.flush();
+          expect(getLog().length).toBe(2);
+
+          const player = getLog()[1];
+          expect(player.keyframes).toEqual([
+            new Map<string, string | number>([
+              ['opacity', '1'],
+              ['offset', 0],
+            ]),
+            new Map<string, string | number>([
+              ['opacity', '0'],
+              ['offset', 1],
+            ]),
+          ]);
+
+          player.finish();
+          flushMicrotasks();
+          expect(fixture.nativeElement.children.length).toBe(0);
+        }));
+
+        // animationRenderer => nonAnimationRenderer
+        it('should trigger a leave animation when the outer components element binding updates on the host component element', fakeAsync(() => {
+          @Component({
+            selector: 'parent-cmp',
+            animations: [
+              trigger('host', [
+                transition(':leave', [style({opacity: 1}), animate(1000, style({opacity: 0}))]),
+              ]),
+            ],
+            template: `
+                <child-cmp *ngIf="exp" @host></child-cmp>
+              `,
+          })
+          class ParentCmp {
+            public exp = true;
+          }
+
+          @Component({
+            selector: 'child-cmp',
+            template: '...',
+          })
+          class ChildCmp {}
+
+          TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+          const engine = TestBed.inject(ɵAnimationEngine);
+          const fixture = TestBed.createComponent(ParentCmp);
+          const cmp = fixture.componentInstance;
+          fixture.detectChanges();
+          engine.flush();
+          expect(getLog().length).toEqual(0);
+
+          cmp.exp = false;
+          fixture.detectChanges();
+          expect(fixture.debugElement.nativeElement.children.length).toBe(1);
+
+          engine.flush();
+          expect(getLog().length).toEqual(1);
+
+          const [player] = getLog();
+          expect(player.keyframes).toEqual([
+            new Map<string, string | number>([
+              ['opacity', '1'],
+              ['offset', 0],
+            ]),
+            new Map<string, string | number>([
+              ['opacity', '0'],
+              ['offset', 1],
+            ]),
+          ]);
+
+          player.finish();
+          flushMicrotasks();
+          expect(fixture.debugElement.nativeElement.children.length).toBe(0);
+        }));
+
+        it('should trigger a leave animation when both the inner and outer components trigger on the same element', fakeAsync(() => {
+          @Component({
+            selector: 'parent-cmp',
+            animations: [
+              trigger('host', [
+                transition(':leave', [
+                  style({height: '100px'}),
+                  animate(1000, style({height: '0px'})),
+                ]),
+              ]),
+            ],
+            template: `
+                <child-cmp *ngIf="exp" @host></child-cmp>
+              `,
+          })
+          class ParentCmp {
+            public exp = true;
+          }
+
+          @Component({
+            selector: 'child-cmp',
+            template: '...',
+            animations: [
+              trigger('host', [
+                transition(':leave', [
+                  style({width: '100px'}),
+                  animate(1000, style({width: '0px'})),
+                ]),
+              ]),
+            ],
+          })
+          class ChildCmp {
+            @HostBinding('@host') public hostAnimation = true;
+          }
+
+          TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+          const engine = TestBed.inject(ɵAnimationEngine);
+          const fixture = TestBed.createComponent(ParentCmp);
+          const cmp = fixture.componentInstance;
+          fixture.detectChanges();
+          engine.flush();
+          expect(getLog().length).toEqual(0);
+
+          cmp.exp = false;
+          fixture.detectChanges();
+          expect(fixture.debugElement.nativeElement.children.length).toBe(1);
+
+          engine.flush();
+          expect(getLog().length).toEqual(2);
+
+          const [p1, p2] = getLog();
+          expect(p1.keyframes).toEqual([
+            new Map<string, string | number>([
+              ['width', '100px'],
+              ['offset', 0],
+            ]),
+            new Map<string, string | number>([
+              ['width', '0px'],
+              ['offset', 1],
+            ]),
+          ]);
+
+          expect(p2.keyframes).toEqual([
+            new Map<string, string | number>([
+              ['height', '100px'],
+              ['offset', 0],
+            ]),
+            new Map<string, string | number>([
+              ['height', '0px'],
+              ['offset', 1],
+            ]),
+          ]);
+
+          p1.finish();
+          p2.finish();
+          flushMicrotasks();
+          expect(fixture.debugElement.nativeElement.children.length).toBe(0);
+        }));
+
+        it('should not throw when the host element is removed and no animation triggers', fakeAsync(() => {
+          @Component({
+            selector: 'parent-cmp',
+            template: `
+                <child-cmp *ngIf="exp"></child-cmp>
+              `,
+          })
+          class ParentCmp {
+            public exp = true;
+          }
+
+          @Component({
+            selector: 'child-cmp',
+            template: '...',
+            animations: [trigger('host', [transition('a => b', [style({height: '100px'})])])],
+          })
+          class ChildCmp {
+            @HostBinding('@host') public hostAnimation = 'a';
+          }
+
+          TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+          const engine = TestBed.inject(ɵAnimationEngine);
+          const fixture = TestBed.createComponent(ParentCmp);
+          const cmp = fixture.componentInstance;
+          fixture.detectChanges();
+          expect(fixture.debugElement.nativeElement.children.length).toBe(1);
+
+          engine.flush();
+          expect(getLog().length).toEqual(0);
+
+          cmp.exp = false;
+          fixture.detectChanges();
+          engine.flush();
+          flushMicrotasks();
+          expect(getLog().length).toEqual(0);
+          expect(fixture.debugElement.nativeElement.children.length).toBe(0);
+
+          flushMicrotasks();
+          expect(fixture.debugElement.nativeElement.children.length).toBe(0);
+        }));
+
+        it('should properly evaluate pre/auto-style values when components are inserted/removed which contain host animations', fakeAsync(() => {
+          @Component({
+            selector: 'parent-cmp',
+            template: `
+                <child-cmp *ngFor="let item of items"></child-cmp>
+              `,
+          })
+          class ParentCmp {
+            items: any[] = [1, 2, 3, 4, 5];
+          }
+
+          @Component({
+            selector: 'child-cmp',
+            template: '... child ...',
+            animations: [
+              trigger('host', [transition(':leave', [animate(1000, style({opacity: 0}))])]),
+            ],
+          })
+          class ChildCmp {
+            @HostBinding('@host') public hostAnimation = 'a';
+          }
+
+          TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+          const engine = TestBed.inject(ɵAnimationEngine);
+          const fixture = TestBed.createComponent(ParentCmp);
+          const cmp = fixture.componentInstance;
+          const element = fixture.nativeElement;
+          fixture.detectChanges();
+
+          cmp.items = [0, 2, 4, 6]; // 1,3,5 get removed
+          fixture.detectChanges();
+
+          const items = element.querySelectorAll('child-cmp');
+          for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            expect(item.style['display']).toBeFalsy();
+          }
+        }));
+      });
+
+      it('should cancel and merge in mid-animation styles into the follow-up animation, but only for animation keyframes that start right away', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+          animations: [
+            trigger('myAnimation', [
+              transition('a => b', [
+                style({'opacity': '0'}),
+                animate(500, style({'opacity': '1'})),
+              ]),
+              transition('b => c', [
+                group([
+                  animate(500, style({'width': '100px'})),
+                  animate(500, style({'height': '100px'})),
+                ]),
+                animate(500, keyframes([style({'opacity': '0'}), style({'opacity': '1'})])),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp: any = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'a';
+        fixture.detectChanges();
+        engine.flush();
+        expect(getLog().length).toEqual(0);
+        resetLog();
+
+        cmp.exp = 'b';
+        fixture.detectChanges();
+        engine.flush();
+        expect(getLog().length).toEqual(1);
+        resetLog();
+
+        cmp.exp = 'c';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(3);
+        const [p1, p2, p3] = players;
+        expect(p1.previousStyles).toEqual(new Map([['opacity', AUTO_STYLE]]));
+        expect(p2.previousStyles).toEqual(new Map([['opacity', AUTO_STYLE]]));
+        expect(p3.previousStyles).toEqual(new Map());
+      });
+
+      it('should provide the styling of previous players that are grouped', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+          animations: [
+            trigger('myAnimation', [
+              transition('1 => 2', [
+                group([
+                  animate(500, style({'width': '100px'})),
+                  animate(500, style({'height': '100px'})),
+                ]),
+                animate(500, keyframes([style({'opacity': '0'}), style({'opacity': '1'})])),
+              ]),
+              transition('2 => 3', [
+                style({'opacity': '0'}),
+                animate(500, style({'opacity': '1'})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp: any = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        fixture.detectChanges();
+        engine.flush();
+
+        cmp.exp = '1';
+        fixture.detectChanges();
+        engine.flush();
+        expect(getLog().length).toEqual(0);
+        resetLog();
+
+        cmp.exp = '2';
+        fixture.detectChanges();
+        engine.flush();
+        expect(getLog().length).toEqual(3);
+        resetLog();
+
+        cmp.exp = '3';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(1);
+        const player = players[0] as MockAnimationPlayer;
+        const pp = player.previousPlayers as MockAnimationPlayer[];
+
+        expect(pp.length).toEqual(3);
+        expect(pp[0].currentSnapshot).toEqual(new Map([['width', AUTO_STYLE]]));
+        expect(pp[1].currentSnapshot).toEqual(new Map([['height', AUTO_STYLE]]));
+        expect(pp[2].currentSnapshot).toEqual(new Map([['opacity', AUTO_STYLE]]));
+      });
+
+      it('should provide the styling of previous players that are grouped and queried and make sure match the players with the correct elements', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+          <div class="container" [@myAnimation]="exp">
+            <div class="inner"></div>
+          </div>
+        `,
+          animations: [
+            trigger('myAnimation', [
+              transition('1 => 2', [
+                style({fontSize: '10px'}),
+                query('.inner', [style({fontSize: '20px'})]),
+                animate('1s', style({fontSize: '100px'})),
+                query('.inner', [animate('1s', style({fontSize: '200px'}))]),
+              ]),
+              transition('2 => 3', [
+                animate('1s', style({fontSize: '0px'})),
+                query('.inner', [animate('1s', style({fontSize: '0px'}))]),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp: any = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        fixture.detectChanges();
+
+        cmp.exp = '1';
+        fixture.detectChanges();
+        resetLog();
+
+        cmp.exp = '2';
+        fixture.detectChanges();
+        resetLog();
+
+        cmp.exp = '3';
+        fixture.detectChanges();
+        const players = getLog();
+        expect(players.length).toEqual(2);
+        const [p1, p2] = players as MockAnimationPlayer[];
+
+        const pp1 = p1.previousPlayers as MockAnimationPlayer[];
+        expect(p1.element.classList.contains('container')).toBeTruthy();
+        for (let i = 0; i < pp1.length; i++) {
+          expect(pp1[i].element).toEqual(p1.element);
+        }
+
+        const pp2 = p2.previousPlayers as MockAnimationPlayer[];
+        expect(p2.element.classList.contains('inner')).toBeTruthy();
+        for (let i = 0; i < pp2.length; i++) {
+          expect(pp2[i].element).toEqual(p2.element);
+        }
+      });
+
+      it('should properly balance styles between states even if there are no destination state styles', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div @myAnimation *ngIf="exp"></div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              state('void', style({opacity: 0, width: '0px', height: '0px'})),
+              transition(':enter', animate(1000)),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp: boolean = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = true;
+
+        fixture.detectChanges();
+        engine.flush();
+
+        const [p1] = getLog();
+        expect(p1.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['opacity', '0'],
+            ['width', '0px'],
+            ['height', '0px'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['opacity', AUTO_STYLE],
+            ['width', AUTO_STYLE],
+            ['height', AUTO_STYLE],
+            ['offset', 1],
+          ]),
+        ]);
+      });
+
+      it('should not apply the destination styles if the final animate step already contains styles', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div @myAnimation *ngIf="exp"></div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              state('void', style({color: 'red'})),
+              state('*', style({color: 'blue'})),
+              transition(':enter', [
+                style({fontSize: '0px '}),
+                animate(1000, style({fontSize: '100px'})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp: boolean = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = true;
+
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(1);
+
+        // notice how the final color is NOT blue
+        expect(players[0].keyframes).toEqual([
+          new Map<string, string | number>([
+            ['fontSize', '0px'],
+            ['color', 'red'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['fontSize', '100px'],
+            ['color', 'red'],
+            ['offset', 1],
+          ]),
+        ]);
+      });
+
+      it('should invoke an animation trigger that is state-less', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div *ngFor="let item of items" @myAnimation></div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              transition(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+            ]),
+          ],
+        })
+        class Cmp {
+          items: number[] = [];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.items = [1, 2, 3, 4, 5];
+        fixture.detectChanges();
+        engine.flush();
+        expect(getLog().length).toEqual(5);
+
+        for (let i = 0; i < 5; i++) {
+          const item = getLog()[i];
+          expect(item.duration).toEqual(1000);
+          expect(item.keyframes).toEqual([
+            new Map<string, string | number>([
+              ['opacity', '0'],
+              ['offset', 0],
+            ]),
+            new Map<string, string | number>([
+              ['opacity', '1'],
+              ['offset', 1],
+            ]),
+          ]);
+        }
+      });
+
+      it('should retain styles on the element once the animation is complete', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div #green @green></div>
+          `,
+          animations: [
+            trigger('green', [
+              state('*', style({backgroundColor: 'green'})),
+              transition('* => *', animate(500)),
+            ]),
+          ],
+        })
+        class Cmp {
+          @ViewChild('green') public element: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+        engine.flush();
+
+        const player = engine.players.pop()!;
+        player.finish();
+
+        expect(hasStyle(cmp.element.nativeElement, 'background-color', 'green')).toBeTruthy();
+      });
+
+      it('should retain state styles when the underlying DOM structure changes even if there are no insert/remove animations', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div class="item" *ngFor="let item of items" [@color]="colorExp">
+              {{ item }}
+            </div>
+          `,
+          animations: [trigger('color', [state('green', style({backgroundColor: 'green'}))])],
+        })
+        class Cmp {
+          public colorExp = 'green';
+          public items = [0, 1, 2, 3];
+
+          reorder() {
+            const temp = this.items[0];
+            this.items[0] = this.items[1];
+            this.items[1] = temp;
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+
+        let elements: HTMLElement[] = fixture.nativeElement.querySelectorAll('.item');
+        assertBackgroundColor(elements[0], 'green');
+        assertBackgroundColor(elements[1], 'green');
+        assertBackgroundColor(elements[2], 'green');
+        assertBackgroundColor(elements[3], 'green');
+
+        elements[0].title = '0a';
+        elements[1].title = '1a';
+
+        cmp.reorder();
+        fixture.detectChanges();
+
+        elements = fixture.nativeElement.querySelectorAll('.item');
+        assertBackgroundColor(elements[0], 'green');
+        assertBackgroundColor(elements[1], 'green');
+        assertBackgroundColor(elements[2], 'green');
+        assertBackgroundColor(elements[3], 'green');
+
+        function assertBackgroundColor(element: HTMLElement, color: string) {
+          expect(element.style.getPropertyValue('background-color')).toEqual(color);
+        }
+      });
+
+      it('should retain state styles when the underlying DOM structure changes even if there are insert/remove animations', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div class="item" *ngFor="let item of items" [@color]="colorExp">
+              {{ item }}
+            </div>
+          `,
+          animations: [
+            trigger('color', [
+              transition('* => *', animate(500)),
+              state('green', style({backgroundColor: 'green'})),
+            ]),
+          ],
+        })
+        class Cmp {
+          public colorExp = 'green';
+          public items = [0, 1, 2, 3];
+
+          reorder() {
+            const temp = this.items[0];
+            this.items[0] = this.items[1];
+            this.items[1] = temp;
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+
+        getLog().forEach((p) => p.finish());
+
+        let elements: HTMLElement[] = fixture.nativeElement.querySelectorAll('.item');
+        assertBackgroundColor(elements[0], 'green');
+        assertBackgroundColor(elements[1], 'green');
+        assertBackgroundColor(elements[2], 'green');
+        assertBackgroundColor(elements[3], 'green');
+
+        elements[0].title = '0a';
+        elements[1].title = '1a';
+
+        cmp.reorder();
+        fixture.detectChanges();
+
+        getLog().forEach((p) => p.finish());
+
+        elements = fixture.nativeElement.querySelectorAll('.item');
+        assertBackgroundColor(elements[0], 'green');
+        assertBackgroundColor(elements[1], 'green');
+        assertBackgroundColor(elements[2], 'green');
+        assertBackgroundColor(elements[3], 'green');
+
+        function assertBackgroundColor(element: HTMLElement, color: string) {
+          expect(element.style.getPropertyValue('background-color')).toEqual(color);
+        }
+      });
+
+      it('should keep/restore the trigger value when there are move operations (with *ngFor + trackBy)', fakeAsync(() => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+          <div *ngFor="let item of items, trackBy: trackItem"
+               @myAnimation (@myAnimation.start)="cb($event)">
+            item{{ item }}
+          </div>
+        `,
+          animations: [trigger('myAnimation', [])],
+        })
+        class Cmp {
+          public items: number[] = [];
+
+          log: string[] = [];
+          cb(event: AnimationEvent) {
+            this.log.push(
+              `[${event.element.innerText.trim()}] ${event.fromState} => ${event.toState}`,
+            );
+          }
+
+          trackItem(_index: number, item: number) {
+            return item.toString();
+          }
+          addItem() {
+            this.items.push(this.items.length);
+          }
+          removeItem() {
+            this.items.pop();
+          }
+          reverseItems() {
+            this.items = this.items.reverse();
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+
+        const completeAnimations = () => {
+          fixture.detectChanges();
+          flushMicrotasks();
+          engine.players.forEach((player) => player.finish());
+        };
+
+        cmp.log = [];
+        [0, 1, 2].forEach(() => cmp.addItem());
+        completeAnimations();
+        expect(cmp.log).toEqual([
+          '[item0] void => null',
+          '[item1] void => null',
+          '[item2] void => null',
+        ]);
+
+        cmp.reverseItems();
+        completeAnimations();
+
+        cmp.log = [];
+        [0, 1, 2].forEach(() => cmp.removeItem());
+        completeAnimations();
+        expect(cmp.log).toEqual([
+          '[item2] null => void',
+          '[item1] null => void',
+          '[item0] null => void',
+        ]);
+      }));
+
+      it('should animate removals of nodes to the `void` state for each animation trigger, but treat all auto styles as pre styles', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div *ngIf="exp" class="ng-if" [@trig1]="exp2" @trig2></div>
+          `,
+          animations: [
+            trigger('trig1', [transition('state => void', [animate(1000, style({opacity: 0}))])]),
+            trigger('trig2', [transition(':leave', [animate(1000, style({width: '0px'}))])]),
+          ],
+        })
+        class Cmp {
+          public exp = true;
+          public exp2 = 'state';
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = true;
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        const element = fixture.nativeElement.querySelector('.ng-if');
+        assertHasParent(element, true);
+
+        cmp.exp = false;
+        fixture.detectChanges();
+        engine.flush();
+
+        assertHasParent(element, true);
+
+        expect(getLog().length).toEqual(2);
+
+        const player2 = getLog().pop()!;
+        const player1 = getLog().pop()!;
+
+        expect(player2.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['width', PRE_STYLE],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['width', '0px'],
+            ['offset', 1],
+          ]),
+        ]);
+
+        expect(player1.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['opacity', PRE_STYLE],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['opacity', '0'],
+            ['offset', 1],
+          ]),
+        ]);
+
+        player2.finish();
+        player1.finish();
+        assertHasParent(element, false);
+      });
+
+      it('should properly cancel all existing animations when a removal occurs', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div *ngIf="exp" [@myAnimation]="exp"></div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              transition('* => go', [
+                style({width: '0px'}),
+                animate(1000, style({width: '100px'})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: string | null | undefined;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
+        expect(getLog().length).toEqual(1);
+        const [player1] = getLog();
+        resetLog();
+
+        let finished = false;
+        player1.onDone(() => (finished = true));
+
+        let destroyed = false;
+        player1.onDestroy(() => (destroyed = true));
+
+        cmp.exp = null;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(finished).toBeTruthy();
+        expect(destroyed).toBeTruthy();
+      });
+
+      it('should not run inner child animations when a parent is set to be removed', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div *ngIf="exp" class="parent" >
+              <div [@myAnimation]="exp2"></div>
+            </div>
+          `,
+          animations: [
+            trigger('myAnimation', [transition('a => b', [animate(1000, style({width: '0px'}))])]),
+          ],
+        })
+        class Cmp {
+          public exp = true;
+          public exp2 = '0';
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = true;
+        cmp.exp2 = 'a';
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp = false;
+        cmp.exp2 = 'b';
+        fixture.detectChanges();
+        engine.flush();
+        expect(getLog().length).toEqual(0);
+      });
+
+      it('should cancel all active inner child animations when a parent removal animation is set to go', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div *ngIf="exp1" @parent>
+              <div [@child]="exp2" class="child1"></div>
+              <div [@child]="exp2" class="child2"></div>
+            </div>
+          `,
+          animations: [
+            trigger('parent', [
+              transition(':leave', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+            ]),
+            trigger('child', [
+              transition('a => b', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = true;
+        cmp.exp2 = 'a';
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp2 = 'b';
+        fixture.detectChanges();
+        engine.flush();
+
+        let players = getLog();
+        expect(players.length).toEqual(2);
+        const [p1, p2] = players;
+
+        let count = 0;
+        p1.onDone(() => count++);
+        p2.onDone(() => count++);
+
+        cmp.exp1 = false;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(count).toEqual(2);
+      });
+
+      it('should destroy inner animations when a parent node is set for removal', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div #parent class="parent">
+              <div [@child]="exp" class="child1"></div>
+              <div [@child]="exp" class="child2"></div>
+            </div>
+          `,
+          animations: [
+            trigger('child', [
+              transition('a => b', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+
+          @ViewChild('parent') public parentElement: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        const someTrigger = trigger('someTrigger', []);
+        const hostElement = fixture.nativeElement;
+        engine.register(DEFAULT_NAMESPACE_ID, hostElement);
+        engine.registerTrigger(
+          DEFAULT_COMPONENT_ID,
+          DEFAULT_NAMESPACE_ID,
+          hostElement,
+          someTrigger.name,
+          someTrigger,
+        );
+
+        cmp.exp = 'a';
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp = 'b';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(2);
+        const [p1, p2] = players;
+
+        let count = 0;
+        p1.onDone(() => count++);
+        p2.onDone(() => count++);
+
+        engine.onRemove(DEFAULT_NAMESPACE_ID, cmp.parentElement.nativeElement, null);
+        expect(count).toEqual(2);
+      });
+
+      it('should allow inner removals to happen when a non removal-based parent animation is set to animate', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div #parent [@parent]="exp1" class="parent">
+              <div #child *ngIf="exp2" class="child"></div>
+            </div>
+          `,
+          animations: [
+            trigger('parent', [
+              transition('a => b', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+
+          @ViewChild('parent') public parent: any;
+
+          @ViewChild('child') public child: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = 'a';
+        cmp.exp2 = true;
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp1 = 'b';
+        fixture.detectChanges();
+        engine.flush();
+
+        const player = getLog()[0];
+        const p = cmp.parent.nativeElement;
+        const c = cmp.child.nativeElement;
+
+        expect(p.contains(c)).toBeTruthy();
+
+        cmp.exp2 = false;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(p.contains(c)).toBeFalsy();
+
+        player.finish();
+
+        expect(p.contains(c)).toBeFalsy();
+      });
+
+      it('should make inner removals wait until a parent based removal animation has finished', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div #parent *ngIf="exp1" @parent class="parent">
+              <div #child1 *ngIf="exp2" class="child1"></div>
+              <div #child2 *ngIf="exp2" class="child2"></div>
+            </div>
+          `,
+          animations: [
+            trigger('parent', [
+              transition(':leave', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+
+          @ViewChild('parent') public parent: any;
+
+          @ViewChild('child1') public child1Elm: any;
+
+          @ViewChild('child2') public child2Elm: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = true;
+        cmp.exp2 = true;
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        const p = cmp.parent.nativeElement;
+        const c1 = cmp.child1Elm.nativeElement;
+        const c2 = cmp.child2Elm.nativeElement;
+
+        cmp.exp1 = false;
+        cmp.exp2 = false;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(p.contains(c1)).toBeTruthy();
+        expect(p.contains(c2)).toBeTruthy();
+
+        cmp.exp2 = false;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(p.contains(c1)).toBeTruthy();
+        expect(p.contains(c2)).toBeTruthy();
+      });
+
+      it('should detect trigger changes based on object.value properties', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="{value:exp}"></div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              transition('* => 1', [animate(1234, style({opacity: 0}))]),
+              transition('* => 2', [animate(5678, style({opacity: 0}))]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = '1';
+        fixture.detectChanges();
+        engine.flush();
+        let players = getLog();
+        expect(players.length).toEqual(1);
+        expect(players[0].duration).toEqual(1234);
+        resetLog();
+
+        cmp.exp = '2';
+        fixture.detectChanges();
+        engine.flush();
+        players = getLog();
+        expect(players.length).toEqual(1);
+        expect(players[0].duration).toEqual(5678);
+      });
+
+      it('should not render animations when the object expression value is the same as it was previously', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="{value:exp,params:params}"></div>
+          `,
+          animations: [
+            trigger('myAnimation', [transition('* => *', [animate(1234, style({opacity: 0}))])]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+          public params: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = '1';
+        cmp.params = {};
+        fixture.detectChanges();
+        engine.flush();
+        let players = getLog();
+        expect(players.length).toEqual(1);
+        expect(players[0].duration).toEqual(1234);
+        resetLog();
+
+        cmp.exp = '1';
+        cmp.params = {};
+        fixture.detectChanges();
+        engine.flush();
+        players = getLog();
+        expect(players.length).toEqual(0);
+      });
+
+      it("should update the final state styles when params update even if the expression hasn't changed", fakeAsync(() => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="{value:exp,params:{color:color}}"></div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              state('*', style({color: '{{ color }}'}), {params: {color: 'black'}}),
+              transition('* => 1', animate(500)),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+          public color: string | null | undefined;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = '1';
+        cmp.color = 'red';
+        fixture.detectChanges();
+        const player = getLog()[0]!;
+        const element = player.element;
+        player.finish();
+
+        flushMicrotasks();
+        expect(hasStyle(element, 'color', 'red')).toBeTruthy();
+
+        cmp.exp = '1';
+        cmp.color = 'blue';
+        fixture.detectChanges();
+        resetLog();
+
+        flushMicrotasks();
+        expect(hasStyle(element, 'color', 'blue')).toBeTruthy();
+
+        cmp.exp = '1';
+        cmp.color = null;
+        fixture.detectChanges();
+        resetLog();
+
+        flushMicrotasks();
+        expect(hasStyle(element, 'color', 'black')).toBeTruthy();
+      }));
+
+      it('should substitute in values if the provided state match is an object with values', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp"></div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              transition(
+                'a => b',
+                [style({opacity: '{{ start }}'}), animate(1000, style({opacity: '{{ end }}'}))],
+                buildParams({start: '0', end: '1'}),
+              ),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = {value: 'a'};
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp = {value: 'b', params: {start: 0.3, end: 0.6}};
+        fixture.detectChanges();
+        engine.flush();
+        const player = getLog().pop()!;
+        expect(player.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['opacity', '0.3'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['opacity', '0.6'],
+            ['offset', 1],
+          ]),
+        ]);
+      });
+
+      it('should retain substituted styles on the element once the animation is complete if referenced in the final state', fakeAsync(() => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="{value:exp, params: { color: color }}"></div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              state(
+                'start',
+                style({
+                  color: '{{ color }}',
+                  fontSize: '{{ fontSize }}px',
+                  width: '{{ width }}',
+                }),
+                {params: {color: 'red', fontSize: '200', width: '10px'}},
+              ),
+
+              state(
+                'final',
+                style({color: '{{ color }}', fontSize: '{{ fontSize }}px', width: '888px'}),
+                {params: {color: 'green', fontSize: '50', width: '100px'}},
+              ),
+
+              transition('start => final', animate(500)),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+          public color: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'start';
+        cmp.color = 'red';
+        fixture.detectChanges();
+        resetLog();
+
+        cmp.exp = 'final';
+        cmp.color = 'blue';
+        fixture.detectChanges();
+
+        const players = getLog();
+        expect(players.length).toEqual(1);
+        const [p1] = players;
+
+        expect(p1.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['color', 'red'],
+            ['fontSize', '200px'],
+            ['width', '10px'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['color', 'blue'],
+            ['fontSize', '50px'],
+            ['width', '888px'],
+            ['offset', 1],
+          ]),
+        ]);
+
+        const element = p1.element;
+        p1.finish();
+        flushMicrotasks();
+
+        expect(hasStyle(element, 'color', 'blue')).toBeTruthy();
+        expect(hasStyle(element, 'fontSize', '50px')).toBeTruthy();
+        expect(hasStyle(element, 'width', '888px')).toBeTruthy();
+      }));
+
+      it('should only evaluate final state param substitutions from the expression and state values and not from the transition options ', fakeAsync(() => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp"></div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              state(
+                'start',
+                style({
+                  width: '{{ width }}',
+                  height: '{{ height }}',
+                }),
+                {params: {width: '0px', height: '0px'}},
+              ),
+
+              state(
+                'final',
+                style({
+                  width: '{{ width }}',
+                  height: '{{ height }}',
+                }),
+                {params: {width: '100px', height: '100px'}},
+              ),
+
+              transition('start => final', [animate(500)], {
+                params: {width: '333px', height: '666px'},
+              }),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'start';
+        fixture.detectChanges();
+        resetLog();
+
+        cmp.exp = 'final';
+        fixture.detectChanges();
+
+        const players = getLog();
+        expect(players.length).toEqual(1);
+        const [p1] = players;
+
+        expect(p1.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['width', '0px'],
+            ['height', '0px'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['width', '100px'],
+            ['height', '100px'],
+            ['offset', 1],
+          ]),
+        ]);
+
+        const element = p1.element;
+        p1.finish();
+        flushMicrotasks();
+
+        expect(hasStyle(element, 'width', '100px')).toBeTruthy();
+        expect(hasStyle(element, 'height', '100px')).toBeTruthy();
+      }));
+
+      it('should apply default params when resolved animation value is null or undefined', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `<div [@myAnimation]="exp"></div>`,
+          animations: [
+            trigger('myAnimation', [
+              transition(
+                'a => b',
+                [style({opacity: '{{ start }}'}), animate(1000, style({opacity: '{{ end }}'}))],
+                buildParams({start: '0.4', end: '0.7'}),
+              ),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = {value: 'a'};
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp = {value: 'b', params: {start: undefined, end: null}};
+        fixture.detectChanges();
+        engine.flush();
+        const player = getLog().pop()!;
+        expect(player.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['opacity', '0.4'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['opacity', '0.7'],
+            ['offset', 1],
+          ]),
+        ]);
+      });
+
+      it('should not flush animations twice when an inner component runs change detection', () => {
+        @Component({
+          selector: 'outer-cmp',
+          template: `
+            <div *ngIf="exp" @outer></div>
+            <inner-cmp #inner></inner-cmp>
+          `,
+          animations: [
+            trigger('outer', [
+              transition(':enter', [style({opacity: 0}), animate('1s', style({opacity: 1}))]),
+            ]),
+          ],
+        })
+        class OuterCmp {
+          @ViewChild('inner') public inner: any;
+          public exp: any = null;
+
+          update() {
+            this.exp = 'go';
+          }
+
+          ngDoCheck() {
+            if (this.exp == 'go') {
+              this.inner.update();
+            }
+          }
+        }
+
+        @Component({
+          selector: 'inner-cmp',
+          template: `
+            <div *ngIf="exp" @inner></div>
+          `,
+          animations: [
+            trigger('inner', [
+              transition(':enter', [style({opacity: 0}), animate('1s', style({opacity: 1}))]),
+            ]),
+          ],
+        })
+        class InnerCmp {
+          public exp: any;
+          constructor(private _ref: ChangeDetectorRef) {}
+          update() {
+            this.exp = 'go';
+            this._ref.detectChanges();
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [OuterCmp, InnerCmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(OuterCmp);
+        const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+        expect(getLog()).toEqual([]);
+
+        cmp.update();
+        fixture.detectChanges();
+
+        const players = getLog();
+        expect(players.length).toEqual(2);
+      });
+
+      describe('transition aliases', () => {
+        describe(':increment', () => {
+          it('should detect when a value has incremented', () => {
+            @Component({
+              selector: 'if-cmp',
+              template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+              animations: [
+                trigger('myAnimation', [
+                  transition(':increment', [animate(1234, style({background: 'red'}))]),
+                ]),
+              ],
+            })
+            class Cmp {
+              exp: number = 0;
+            }
+
+            TestBed.configureTestingModule({declarations: [Cmp]});
+            const fixture = TestBed.createComponent(Cmp);
+            const cmp = fixture.componentInstance;
+            fixture.detectChanges();
+            let players = getLog();
+            expect(players.length).toEqual(0);
+
+            cmp.exp++;
+            fixture.detectChanges();
+            players = getLog();
+            expect(players.length).toEqual(1);
+            expect(players[0].duration).toEqual(1234);
+            resetLog();
+
+            cmp.exp = 5;
+            fixture.detectChanges();
+            players = getLog();
+            expect(players.length).toEqual(1);
+            expect(players[0].duration).toEqual(1234);
+          });
+        });
+
+        describe(':decrement', () => {
+          it('should detect when a value has decremented', () => {
+            @Component({
+              selector: 'if-cmp',
+              template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+              animations: [
+                trigger('myAnimation', [
+                  transition(':decrement', [animate(1234, style({background: 'red'}))]),
+                ]),
+              ],
+            })
+            class Cmp {
+              exp: number = 5;
+            }
+
+            TestBed.configureTestingModule({declarations: [Cmp]});
+            const fixture = TestBed.createComponent(Cmp);
+            const cmp = fixture.componentInstance;
+            fixture.detectChanges();
+            let players = getLog();
+            expect(players.length).toEqual(0);
+
+            cmp.exp--;
+            fixture.detectChanges();
+            players = getLog();
+            expect(players.length).toEqual(1);
+            expect(players[0].duration).toEqual(1234);
+            resetLog();
+
+            cmp.exp = 0;
+            fixture.detectChanges();
+            players = getLog();
+            expect(players.length).toEqual(1);
+            expect(players[0].duration).toEqual(1234);
+          });
+        });
+      });
+
+      it('should animate nodes properly when they have been re-ordered', () => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+                <div *ngFor="let item of items" [class]="'class-' + item.value">
+                  <div [@myAnimation]="item.count">
+                    {{ item.value }}
+                  </div>
+                </div>
+              `,
+          animations: [
+            trigger('myAnimation', [
+              state('0', style({opacity: 0})),
+              state('1', style({opacity: 0.4})),
+              state('2', style({opacity: 0.8})),
+              transition('* => 1, * => 2', [animate(1000)]),
+            ]),
+          ],
+        })
+        class Cmp {
+          items = [
+            {value: '1', count: 0},
+            {value: '2', count: 0},
+            {value: '3', count: 0},
+            {value: '4', count: 0},
+            {value: '5', count: 0},
+          ];
+
+          reOrder() {
+            this.items = [
+              this.items[4],
+              this.items[1],
+              this.items[3],
+              this.items[0],
+              this.items[2],
+            ];
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        const one = cmp.items[0];
+        const two = cmp.items[1];
+        one.count++;
+        fixture.detectChanges();
+
+        cmp.reOrder();
+        fixture.detectChanges();
+        resetLog();
+
+        one.count++;
+        two.count++;
+        fixture.detectChanges();
+
+        const players = getLog();
+        expect(players.length).toEqual(2);
+      });
+    });
+
+    it('should not animate i18n insertBefore', () => {
+      // I18n uses `insertBefore` API to insert nodes in correct order. Animation assumes that
+      // any `insertBefore` is a move and tries to animate it.
+      // NOTE: This test was extracted from `g3`
+      @Component({
+        template: `<div i18n>Hello <span>World</span>!</div>`,
+        animations: [trigger('myAnimation', [transition('* => *', [animate(1000)])])],
+      })
+      class Cmp {}
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+      const fixture = TestBed.createComponent(Cmp);
+      fixture.detectChanges();
+      const players = getLog();
+      const span = fixture.debugElement.nativeElement.querySelector('span');
+      expect(span.innerText).toEqual('World');
+      // We should not insert `ng-star-inserted` into the span class.
+      expect(span.className).not.toContain('ng-star-inserted');
     });
 
-    it('should retain state styles when the underlying DOM structure changes even if there are no insert/remove animations',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-            <div class="item" *ngFor="let item of items" [@color]="colorExp">
-              {{ item }}
-            </div>
-          `,
-           animations: [trigger('color', [state('green', style({backgroundColor: 'green'}))])]
-         })
-         class Cmp {
-           public colorExp = 'green';
-           public items = [0, 1, 2, 3];
-
-           reorder() {
-             const temp = this.items[0];
-             this.items[0] = this.items[1];
-             this.items[1] = temp;
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         fixture.detectChanges();
-
-         let elements: HTMLElement[] = fixture.nativeElement.querySelectorAll('.item');
-         assertBackgroundColor(elements[0], 'green');
-         assertBackgroundColor(elements[1], 'green');
-         assertBackgroundColor(elements[2], 'green');
-         assertBackgroundColor(elements[3], 'green');
-
-         elements[0].title = '0a';
-         elements[1].title = '1a';
-
-         cmp.reorder();
-         fixture.detectChanges();
-
-         elements = fixture.nativeElement.querySelectorAll('.item');
-         assertBackgroundColor(elements[0], 'green');
-         assertBackgroundColor(elements[1], 'green');
-         assertBackgroundColor(elements[2], 'green');
-         assertBackgroundColor(elements[3], 'green');
-
-         function assertBackgroundColor(element: HTMLElement, color: string) {
-           expect(element.style.getPropertyValue('background-color')).toEqual(color);
-         }
-       });
-
-    it('should retain state styles when the underlying DOM structure changes even if there are insert/remove animations',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-            <div class="item" *ngFor="let item of items" [@color]="colorExp">
-              {{ item }}
-            </div>
-          `,
-           animations: [trigger(
-               'color',
-               [
-                 transition('* => *', animate(500)),
-                 state('green', style({backgroundColor: 'green'}))
-               ])]
-         })
-         class Cmp {
-           public colorExp = 'green';
-           public items = [0, 1, 2, 3];
-
-           reorder() {
-             const temp = this.items[0];
-             this.items[0] = this.items[1];
-             this.items[1] = temp;
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         fixture.detectChanges();
-
-         getLog().forEach(p => p.finish());
-
-         let elements: HTMLElement[] = fixture.nativeElement.querySelectorAll('.item');
-         assertBackgroundColor(elements[0], 'green');
-         assertBackgroundColor(elements[1], 'green');
-         assertBackgroundColor(elements[2], 'green');
-         assertBackgroundColor(elements[3], 'green');
-
-         elements[0].title = '0a';
-         elements[1].title = '1a';
-
-         cmp.reorder();
-         fixture.detectChanges();
-
-         getLog().forEach(p => p.finish());
-
-         elements = fixture.nativeElement.querySelectorAll('.item');
-         assertBackgroundColor(elements[0], 'green');
-         assertBackgroundColor(elements[1], 'green');
-         assertBackgroundColor(elements[2], 'green');
-         assertBackgroundColor(elements[3], 'green');
-
-         function assertBackgroundColor(element: HTMLElement, color: string) {
-           expect(element.style.getPropertyValue('background-color')).toEqual(color);
-         }
-       });
-
-    it('should keep/restore the trigger value when there are move operations (with *ngFor + trackBy)',
-       fakeAsync(() => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-          <div *ngFor="let item of items, trackBy: trackItem"
-               @myAnimation (@myAnimation.start)="cb($event)">
-            item{{ item }}
-          </div>
-        `,
-           animations: [trigger('myAnimation', [])]
-         })
-         class Cmp {
-           public items: number[] = [];
-
-           log: string[] = [];
-           cb(event: AnimationEvent) {
-             this.log.push(
-                 `[${event.element.innerText.trim()}] ${event.fromState} => ${event.toState}`);
-           }
-
-           trackItem(_index: number, item: number) {
-             return item.toString();
-           }
-           addItem() {
-             this.items.push(this.items.length);
-           }
-           removeItem() {
-             this.items.pop();
-           }
-           reverseItems() {
-             this.items = this.items.reverse();
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         fixture.detectChanges();
-
-         const completeAnimations = () => {
-           fixture.detectChanges();
-           flushMicrotasks();
-           engine.players.forEach(player => player.finish());
-         };
-
-         cmp.log = [];
-         [0, 1, 2].forEach(() => cmp.addItem());
-         completeAnimations();
-         expect(cmp.log).toEqual(
-             ['[item0] void => null', '[item1] void => null', '[item2] void => null']);
-
-         cmp.reverseItems();
-         completeAnimations();
-
-         cmp.log = [];
-         [0, 1, 2].forEach(() => cmp.removeItem());
-         completeAnimations();
-         expect(cmp.log).toEqual(
-             ['[item2] null => void', '[item1] null => void', '[item0] null => void']);
-       }));
-
-    it('should animate removals of nodes to the `void` state for each animation trigger, but treat all auto styles as pre styles',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-            <div *ngIf="exp" class="ng-if" [@trig1]="exp2" @trig2></div>
-          `,
-           animations: [
-             trigger('trig1', [transition('state => void', [animate(1000, style({opacity: 0}))])]),
-             trigger('trig2', [transition(':leave', [animate(1000, style({width: '0px'}))])])
-           ]
-         })
-         class Cmp {
-           public exp = true;
-           public exp2 = 'state';
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         cmp.exp = true;
-         fixture.detectChanges();
-         engine.flush();
-         resetLog();
-
-         const element = fixture.nativeElement.querySelector('.ng-if');
-         assertHasParent(element, true);
-
-         cmp.exp = false;
-         fixture.detectChanges();
-         engine.flush();
-
-         assertHasParent(element, true);
-
-         expect(getLog().length).toEqual(2);
-
-         const player2 = getLog().pop()!;
-         const player1 = getLog().pop()!;
-
-         expect(player2.keyframes).toEqual([
-           new Map<string, string|number>([['width', PRE_STYLE], ['offset', 0]]),
-           new Map<string, string|number>([['width', '0px'], ['offset', 1]]),
-         ]);
-
-         expect(player1.keyframes).toEqual([
-           new Map<string, string|number>([['opacity', PRE_STYLE], ['offset', 0]]),
-           new Map<string, string|number>([['opacity', '0'], ['offset', 1]])
-         ]);
-
-         player2.finish();
-         player1.finish();
-         assertHasParent(element, false);
-       });
-
-    it('should properly cancel all existing animations when a removal occurs', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
-            <div *ngIf="exp" [@myAnimation]="exp"></div>
-          `,
-        animations: [
-          trigger(
-              'myAnimation',
-              [
-                transition(
-                    '* => go', [style({width: '0px'}), animate(1000, style({width: '100px'}))]),
+    describe('animation listeners', () => {
+      it('should trigger a `start` state change listener for when the animation changes state from void => state', fakeAsync(() => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div *ngIf="exp" [@myAnimation]="exp" (@myAnimation.start)="callback($event)"></div>
+        `,
+          animations: [
+            trigger('myAnimation', [
+              transition('void => *', [
+                style({'opacity': '0'}),
+                animate(500, style({'opacity': '1'})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp: any = false;
+          event: AnimationEvent | undefined;
+
+          callback = (event: any) => {
+            this.event = event;
+          };
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = 'true';
+        fixture.detectChanges();
+        flushMicrotasks();
+
+        expect(cmp.event?.triggerName).toEqual('myAnimation');
+        expect(cmp.event?.phaseName).toEqual('start');
+        expect(cmp.event?.totalTime).toEqual(500);
+        expect(cmp.event?.fromState).toEqual('void');
+        expect(cmp.event?.toState).toEqual('true');
+      }));
+
+      it('should trigger a `done` state change listener for when the animation changes state from a => b', fakeAsync(() => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div *ngIf="exp" [@myAnimation123]="exp" (@myAnimation123.done)="callback($event)"></div>
+        `,
+          animations: [
+            trigger('myAnimation123', [
+              transition('* => b', [
+                style({'opacity': '0'}),
+                animate(999, style({'opacity': '1'})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp: any = false;
+          event: AnimationEvent | undefined;
+
+          callback = (event: any) => {
+            this.event = event;
+          };
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'b';
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(cmp.event).toBeFalsy();
+
+        const player = engine.players.pop()!;
+        player.finish();
+        flushMicrotasks();
+
+        expect(cmp.event?.triggerName).toEqual('myAnimation123');
+        expect(cmp.event?.phaseName).toEqual('done');
+        expect(cmp.event?.totalTime).toEqual(999);
+        expect(cmp.event?.fromState).toEqual('void');
+        expect(cmp.event?.toState).toEqual('b');
+      }));
+
+      it('should handle callbacks for multiple triggers running simultaneously', fakeAsync(() => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div [@ani1]="exp1" (@ani1.done)="callback1($event)"></div>
+          <div [@ani2]="exp2" (@ani2.done)="callback2($event)"></div>
+        `,
+          animations: [
+            trigger('ani1', [
+              transition('* => a', [
+                style({'opacity': '0'}),
+                animate(999, style({'opacity': '1'})),
+              ]),
+            ]),
+            trigger('ani2', [
+              transition('* => b', [
+                style({'width': '0px'}),
+                animate(999, style({'width': '100px'})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp1: any = false;
+          exp2: any = false;
+          event1: AnimationEvent | undefined;
+          event2: AnimationEvent | undefined;
+          // tslint:disable:semicolon
+          callback1 = (event: any) => {
+            this.event1 = event;
+          };
+          // tslint:disable:semicolon
+          callback2 = (event: any) => {
+            this.event2 = event;
+          };
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = 'a';
+        cmp.exp2 = 'b';
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(cmp.event1).toBeFalsy();
+        expect(cmp.event2).toBeFalsy();
+
+        const player1 = engine.players[0];
+        const player2 = engine.players[1];
+
+        player1.finish();
+        player2.finish();
+        expect(cmp.event1).toBeFalsy();
+        expect(cmp.event2).toBeFalsy();
+
+        flushMicrotasks();
+        expect(cmp.event1?.triggerName).toBeTruthy('ani1');
+        expect(cmp.event2?.triggerName).toBeTruthy('ani2');
+      }));
+
+      it('should handle callbacks for multiple triggers running simultaneously on the same element', fakeAsync(() => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div [@ani1]="exp1" (@ani1.done)="callback1($event)" [@ani2]="exp2" (@ani2.done)="callback2($event)"></div>
+        `,
+          animations: [
+            trigger('ani1', [
+              transition('* => a', [
+                style({'opacity': '0'}),
+                animate(999, style({'opacity': '1'})),
+              ]),
+            ]),
+            trigger('ani2', [
+              transition('* => b', [
+                style({'width': '0px'}),
+                animate(999, style({'width': '100px'})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          exp1: any = false;
+          exp2: any = false;
+          event1: AnimationEvent | undefined;
+          event2: AnimationEvent | undefined;
+          callback1 = (event: any) => {
+            this.event1 = event;
+          };
+          callback2 = (event: any) => {
+            this.event2 = event;
+          };
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = 'a';
+        cmp.exp2 = 'b';
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(cmp.event1).toBeFalsy();
+        expect(cmp.event2).toBeFalsy();
+
+        const player1 = engine.players[0];
+        const player2 = engine.players[1];
+
+        player1.finish();
+        player2.finish();
+        expect(cmp.event1).toBeFalsy();
+        expect(cmp.event2).toBeFalsy();
+
+        flushMicrotasks();
+        expect(cmp.event1?.triggerName).toBeTruthy('ani1');
+        expect(cmp.event2?.triggerName).toBeTruthy('ani2');
+      }));
+
+      it('should handle a leave animation for multiple triggers even if not all triggers have their own leave transition specified', fakeAsync(() => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+               <div *ngIf="exp" @foo @bar>123</div>
+             `,
+          animations: [
+            trigger('foo', [
+              transition(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+            ]),
+            trigger('bar', [transition(':leave', [animate(1000, style({opacity: 0}))])]),
+          ],
+        })
+        class Cmp {
+          exp: boolean = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+        const fixture = TestBed.createComponent(Cmp);
+        const elm = fixture.elementRef.nativeElement;
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = true;
+        fixture.detectChanges();
+
+        let players = getLog();
+        expect(players.length).toEqual(1);
+        let [p1] = players;
+        p1.finish();
+        flushMicrotasks();
+        expect(elm.innerText.trim()).toEqual('123');
+
+        resetLog();
+        cmp.exp = false;
+        fixture.detectChanges();
+
+        players = getLog();
+        expect(players.length).toEqual(1);
+        [p1] = players;
+        p1.finish();
+        flushMicrotasks();
+        expect(elm.innerText.trim()).toEqual('');
+      }));
+
+      it('should trigger a state change listener for when the animation changes state from void => state on the host element', fakeAsync(() => {
+        @Component({
+          selector: 'my-cmp',
+          template: `...`,
+          animations: [
+            trigger('myAnimation2', [
+              transition('void => *', [
+                style({'opacity': '0'}),
+                animate(1000, style({'opacity': '1'})),
               ]),
-        ]
-      })
-      class Cmp {
-        public exp: string|null|undefined;
-      }
+            ]),
+          ],
+        })
+        class Cmp {
+          event: AnimationEvent | undefined;
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+          @HostBinding('@myAnimation2') exp: any = false;
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-      cmp.exp = 'go';
-      fixture.detectChanges();
-      engine.flush();
-      expect(getLog().length).toEqual(1);
-      const [player1] = getLog();
-      resetLog();
+          @HostListener('@myAnimation2.start', ['$event'])
+          callback = (event: any) => {
+            this.event = event;
+          };
+        }
 
-      let finished = false;
-      player1.onDone(() => finished = true);
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      let destroyed = false;
-      player1.onDestroy(() => destroyed = true);
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = 'TRUE';
+        fixture.detectChanges();
+        flushMicrotasks();
 
-      cmp.exp = null;
-      fixture.detectChanges();
-      engine.flush();
+        expect(cmp.event?.triggerName).toEqual('myAnimation2');
+        expect(cmp.event?.phaseName).toEqual('start');
+        expect(cmp.event?.totalTime).toEqual(1000);
+        expect(cmp.event?.fromState).toEqual('void');
+        expect(cmp.event?.toState).toEqual('TRUE');
+      }));
 
-      expect(finished).toBeTruthy();
-      expect(destroyed).toBeTruthy();
-    });
+      it('should always fire callbacks even when a transition is not detected', fakeAsync(() => {
+        @Component({
+          selector: 'my-cmp',
+          template: `
+              <div [@myAnimation]="exp" (@myAnimation.start)="callback($event)" (@myAnimation.done)="callback($event)"></div>
+            `,
+          animations: [trigger('myAnimation', [])],
+        })
+        class Cmp {
+          exp: string | undefined;
+          log: any[] = [];
+          callback = (event: any) => this.log.push(`${event.phaseName} => ${event.toState}`);
+        }
 
-    it('should not run inner child animations when a parent is set to be removed', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
-            <div *ngIf="exp" class="parent" >
-              <div [@myAnimation]="exp2"></div>
-            </div>
-          `,
-        animations:
-            [trigger('myAnimation', [transition('a => b', [animate(1000, style({width: '0px'}))])])]
-      })
-      class Cmp {
-        public exp = true;
-        public exp2 = '0';
-      }
+        TestBed.configureTestingModule({
+          providers: [{provide: AnimationDriver, useClass: NoopAnimationDriver}],
+          declarations: [Cmp],
+        });
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+        cmp.exp = 'a';
+        fixture.detectChanges();
+        flushMicrotasks();
+        expect(cmp.log).toEqual(['start => a', 'done => a']);
 
-      cmp.exp = true;
-      cmp.exp2 = 'a';
-      fixture.detectChanges();
-      engine.flush();
-      resetLog();
+        cmp.log = [];
+        cmp.exp = 'b';
+        fixture.detectChanges();
+        flushMicrotasks();
 
-      cmp.exp = false;
-      cmp.exp2 = 'b';
-      fixture.detectChanges();
-      engine.flush();
-      expect(getLog().length).toEqual(0);
-    });
+        expect(cmp.log).toEqual(['start => b', 'done => b']);
+      }));
 
-    it('should cancel all active inner child animations when a parent removal animation is set to go',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-            <div *ngIf="exp1" @parent>
-              <div [@child]="exp2" class="child1"></div>
-              <div [@child]="exp2" class="child2"></div>
-            </div>
-          `,
-           animations: [
-             trigger(
-                 'parent',
-                 [transition(':leave', [style({opacity: 0}), animate(1000, style({opacity: 1}))])]),
-             trigger(
-                 'child',
-                 [transition('a => b', [style({opacity: 0}), animate(1000, style({opacity: 1}))])])
-           ]
-         })
-         class Cmp {
-           public exp1: any;
-           public exp2: any;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp1 = true;
-         cmp.exp2 = 'a';
-         fixture.detectChanges();
-         engine.flush();
-         resetLog();
-
-         cmp.exp2 = 'b';
-         fixture.detectChanges();
-         engine.flush();
-
-         let players = getLog();
-         expect(players.length).toEqual(2);
-         const [p1, p2] = players;
-
-         let count = 0;
-         p1.onDone(() => count++);
-         p2.onDone(() => count++);
-
-         cmp.exp1 = false;
-         fixture.detectChanges();
-         engine.flush();
-
-         expect(count).toEqual(2);
-       });
-
-    it('should destroy inner animations when a parent node is set for removal', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
-            <div #parent class="parent">
-              <div [@child]="exp" class="child1"></div>
-              <div [@child]="exp" class="child2"></div>
-            </div>
-          `,
-        animations: [trigger(
-            'child',
-            [transition('a => b', [style({opacity: 0}), animate(1000, style({opacity: 1}))])])]
-      })
-      class Cmp {
-        public exp: any;
+      it('should fire callback events for leave animations even if there is no leave transition', fakeAsync(() => {
+        @Component({
+          selector: 'my-cmp',
+          template: `
+              <div *ngIf="exp" @myAnimation (@myAnimation.start)="callback($event)" (@myAnimation.done)="callback($event)"></div>
+            `,
+          animations: [trigger('myAnimation', [])],
+        })
+        class Cmp {
+          exp: boolean = false;
+          log: any[] = [];
+          callback = (event: any) => {
+            const state = event.toState || '_default_';
+            this.log.push(`${event.phaseName} => ${state}`);
+          };
+        }
 
-        @ViewChild('parent') public parentElement: any;
-      }
+        TestBed.configureTestingModule({
+          providers: [{provide: AnimationDriver, useClass: NoopAnimationDriver}],
+          declarations: [Cmp],
+        });
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+        cmp.exp = true;
+        fixture.detectChanges();
+        flushMicrotasks();
+        expect(cmp.log).toEqual(['start => _default_', 'done => _default_']);
 
-      const someTrigger = trigger('someTrigger', []);
-      const hostElement = fixture.nativeElement;
-      engine.register(DEFAULT_NAMESPACE_ID, hostElement);
-      engine.registerTrigger(
-          DEFAULT_COMPONENT_ID, DEFAULT_NAMESPACE_ID, hostElement, someTrigger.name, someTrigger);
+        cmp.log = [];
 
-      cmp.exp = 'a';
-      fixture.detectChanges();
-      engine.flush();
-      resetLog();
+        cmp.exp = false;
+        fixture.detectChanges();
+        flushMicrotasks();
 
-      cmp.exp = 'b';
-      fixture.detectChanges();
-      engine.flush();
+        expect(cmp.log).toEqual(['start => void', 'done => void']);
+      }));
 
-      const players = getLog();
-      expect(players.length).toEqual(2);
-      const [p1, p2] = players;
+      it('should fire callbacks on a sub animation once it starts and finishes', fakeAsync(() => {
+        @Component({
+          selector: 'my-cmp',
+          template: `
+              <div class="parent"
+                  [@parent]="exp1"
+                  (@parent.start)="cb('parent-start',$event)"
+                  (@parent.done)="cb('parent-done', $event)">
+                <div class="child"
+                  [@child]="exp2"
+                  (@child.start)="cb('child-start',$event)"
+                  (@child.done)="cb('child-done', $event)"></div>
+              </div>
+            `,
+          animations: [
+            trigger('parent', [
+              transition('* => go', [
+                style({width: '0px'}),
+                animate(1000, style({width: '100px'})),
+                query('.child', [animateChild({duration: '1s'})]),
+                animate(1000, style({width: '0px'})),
+              ]),
+            ]),
+            trigger('child', [
+              transition('* => go', [
+                style({height: '0px'}),
+                animate(1000, style({height: '100px'})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          log: string[] = [];
+          exp1: string | undefined;
+          exp2: string | undefined;
+
+          cb(name: string, event: AnimationEvent) {
+            this.log.push(name);
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp1 = 'go';
+        cmp.exp2 = 'go';
+        fixture.detectChanges();
+        engine.flush();
+        flushMicrotasks();
+
+        expect(cmp.log).toEqual(['parent-start', 'child-start']);
+        cmp.log = [];
+
+        const players = getLog();
+        expect(players.length).toEqual(4);
+
+        // players:
+        //  - _scp (skipped child player): player for the child animation
+        //  - pp1 (parent player 1): player for parent animation (from 0px to 100px)
+        //  - pcp (parent child player):
+        //     player for child animation executed by parent via query and animateChild
+        //  - pp2 (parent player 2): player for parent animation (from 100px to 0px)
+        const [_scp, pp1, pcp, pp2] = players;
+
+        pp1.finish();
+        flushMicrotasks();
+        expect(cmp.log).toEqual([]);
+
+        pcp.finish();
+        flushMicrotasks();
+        expect(cmp.log).toEqual([]);
+
+        pp2.finish();
+        flushMicrotasks();
+        expect(cmp.log).toEqual(['parent-done', 'child-done']);
+      }));
+
+      it('should fire callbacks and collect the correct the totalTime and element details for any queried sub animations', fakeAsync(() => {
+        @Component({
+          selector: 'my-cmp',
+          template: `
+              <div class="parent" [@parent]="exp" (@parent.done)="cb('all','done', $event)">
+                <div *ngFor="let item of items"
+                     class="item item-{{ item }}"
+                     @child
+                     (@child.start)="cb('c-' + item, 'start', $event)"
+                     (@child.done)="cb('c-' + item, 'done', $event)">
+                  {{ item }}
+                </div>
+              </div>
+            `,
+          animations: [
+            trigger('parent', [
+              transition('* => go', [
+                style({opacity: 0}),
+                animate('1s', style({opacity: 1})),
+                query('.item', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+                query('.item', [animateChild({duration: '1.8s', delay: '300ms'})]),
+              ]),
+            ]),
+            trigger('child', [
+              transition(':enter', [style({opacity: 0}), animate(1500, style({opacity: 1}))]),
+            ]),
+          ],
+        })
+        class Cmp {
+          log: string[] = [];
+          events: {[name: string]: any} = {};
+          exp: string | undefined;
+          items: any = [0, 1, 2, 3];
+
+          cb(name: string, phase: string, event: AnimationEvent) {
+            this.log.push(name + '-' + phase);
+            this.events[name] = event;
+          }
+        }
 
-      let count = 0;
-      p1.onDone(() => count++);
-      p2.onDone(() => count++);
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      engine.onRemove(DEFAULT_NAMESPACE_ID, cmp.parentElement.nativeElement, null);
-      expect(count).toEqual(2);
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
+        flushMicrotasks();
+
+        expect(cmp.log).toEqual(['c-0-start', 'c-1-start', 'c-2-start', 'c-3-start']);
+        cmp.log = [];
+
+        const players = getLog();
+        expect(players.length).toEqual(13);
+
+        // players:
+        //  - _sc1p, _sc2p, _sc3p, _sc4p (skipped child n (1 to 4) players):
+        //     players for the children animations
+        //  - pp1 (parent player 1): player for parent animation (from opacity 0 to opacity 1)
+        //  - pc1p1, pc2p1, pc3p1, pc4p1 (parent child n (1 to 4) player 1):
+        //     players for children animations executed by parent via query and animate
+        //     (from opacity 0 to opacity 1)
+        //  - pc1p2, pc2p2, pc3p2, pc4p2 (parent child n (1 to 4) player 2):
+        //     players for children animations executed by parent via query and animateChild
+        const [
+          _sc1p,
+          _sc2p,
+          _sc3p,
+          _sc4p,
+          pp1,
+          pc1p1,
+          pc2p1,
+          pc3p1,
+          pc4p1,
+          pc1p2,
+          pc2p2,
+          pc3p2,
+          pc4p2,
+        ] = getLog();
+        pp1.finish();
+        pc1p1.finish();
+        pc2p1.finish();
+        pc3p1.finish();
+        pc4p1.finish();
+        flushMicrotasks();
+
+        expect(cmp.log).toEqual([]);
+        pc1p2.finish();
+        pc2p2.finish();
+        pc3p2.finish();
+        pc4p2.finish();
+        flushMicrotasks();
+
+        expect(cmp.log).toEqual(['all-done', 'c-0-done', 'c-1-done', 'c-2-done', 'c-3-done']);
+
+        expect(cmp.events['all'].totalTime).toEqual(4100); // 1000 + 1000 + 1800 + 300
+        expect(cmp.events['all'].element.innerText.trim().replaceAll('\n', ' ')).toEqual('0 1 2 3');
+        expect(cmp.events['c-0'].totalTime).toEqual(1500);
+        expect(cmp.events['c-0'].element.innerText.trim()).toEqual('0');
+        expect(cmp.events['c-1'].totalTime).toEqual(1500);
+        expect(cmp.events['c-1'].element.innerText.trim()).toEqual('1');
+        expect(cmp.events['c-2'].totalTime).toEqual(1500);
+        expect(cmp.events['c-2'].element.innerText.trim()).toEqual('2');
+        expect(cmp.events['c-3'].totalTime).toEqual(1500);
+        expect(cmp.events['c-3'].element.innerText.trim()).toEqual('3');
+      }));
     });
 
-    it('should allow inner removals to happen when a non removal-based parent animation is set to animate',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-            <div #parent [@parent]="exp1" class="parent">
-              <div #child *ngIf="exp2" class="child"></div>
-            </div>
-          `,
-           animations: [trigger(
-               'parent',
-               [transition('a => b', [style({opacity: 0}), animate(1000, style({opacity: 1}))])])]
-         })
-         class Cmp {
-           public exp1: any;
-           public exp2: any;
+    describe('animation control flags', () => {
+      describe('[@.disabled]', () => {
+        it('should disable child animations when set to true', () => {
+          @Component({
+            selector: 'if-cmp',
+            template: `
+              <div [@.disabled]="disableExp">
+                <div [@myAnimation]="exp"></div>
+              </div>
+            `,
+            animations: [
+              trigger('myAnimation', [
+                transition('* => 1, * => 2', [animate(1234, style({width: '100px'}))]),
+              ]),
+            ],
+          })
+          class Cmp {
+            exp: any = false;
+            disableExp = false;
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          fixture.detectChanges();
+          resetLog();
 
-           @ViewChild('parent') public parent: any;
+          cmp.disableExp = true;
+          cmp.exp = '1';
+          fixture.detectChanges();
 
-           @ViewChild('child') public child: any;
-         }
+          let players = getLog();
+          expect(players.length).toEqual(0);
 
-         TestBed.configureTestingModule({declarations: [Cmp]});
+          cmp.disableExp = false;
+          cmp.exp = '2';
+          fixture.detectChanges();
 
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
+          players = getLog();
+          expect(players.length).toEqual(1);
+          expect(players[0].totalTime).toEqual(1234);
+        });
 
-         cmp.exp1 = 'a';
-         cmp.exp2 = true;
-         fixture.detectChanges();
-         engine.flush();
-         resetLog();
+        it('should ensure state() values are applied when an animation is disabled', () => {
+          @Component({
+            selector: 'if-cmp',
+            template: `
+              <div [@.disabled]="disableExp">
+                <div [@myAnimation]="exp" #elm></div>
+              </div>
+            `,
+            animations: [
+              trigger('myAnimation', [
+                state('1', style({height: '100px'})),
+                state('2', style({height: '200px'})),
+                state('3', style({height: '300px'})),
+                transition('* => *', animate(500)),
+              ]),
+            ],
+          })
+          class Cmp {
+            exp: any = false;
+            disableExp = false;
 
-         cmp.exp1 = 'b';
-         fixture.detectChanges();
-         engine.flush();
+            @ViewChild('elm', {static: true}) public element: any;
+          }
 
-         const player = getLog()[0];
-         const p = cmp.parent.nativeElement;
-         const c = cmp.child.nativeElement;
+          TestBed.configureTestingModule({declarations: [Cmp]});
 
-         expect(p.contains(c)).toBeTruthy();
+          const fixture = TestBed.createComponent(Cmp);
+          const engine = TestBed.inject(ɵAnimationEngine);
 
-         cmp.exp2 = false;
-         fixture.detectChanges();
-         engine.flush();
+          function assertHeight(element: any, height: string) {
+            expect(element.style['height']).toEqual(height);
+          }
 
-         expect(p.contains(c)).toBeFalsy();
+          fixture.detectChanges();
 
-         player.finish();
+          const cmp = fixture.componentInstance;
+          const element = cmp.element.nativeElement;
+          fixture.detectChanges();
 
-         expect(p.contains(c)).toBeFalsy();
-       });
+          cmp.disableExp = true;
+          cmp.exp = '1';
+          fixture.detectChanges();
+          assertHeight(element, '100px');
 
-    it('should make inner removals wait until a parent based removal animation has finished',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-            <div #parent *ngIf="exp1" @parent class="parent">
-              <div #child1 *ngIf="exp2" class="child1"></div>
-              <div #child2 *ngIf="exp2" class="child2"></div>
-            </div>
-          `,
-           animations: [trigger(
-               'parent',
-               [transition(':leave', [style({opacity: 0}), animate(1000, style({opacity: 1}))])])]
-         })
-         class Cmp {
-           public exp1: any;
-           public exp2: any;
+          cmp.exp = '2';
+          fixture.detectChanges();
+          assertHeight(element, '200px');
 
-           @ViewChild('parent') public parent: any;
+          cmp.exp = '3';
+          fixture.detectChanges();
+          assertHeight(element, '300px');
+        });
 
-           @ViewChild('child1') public child1Elm: any;
+        it('should disable animations for the element that they are disabled on', () => {
+          @Component({
+            selector: 'if-cmp',
+            template: `
+              <div [@.disabled]="disableExp" [@myAnimation]="exp"></div>
+            `,
+            animations: [
+              trigger('myAnimation', [
+                transition('* => 1, * => 2', [animate(1234, style({width: '100px'}))]),
+              ]),
+            ],
+          })
+          class Cmp {
+            exp: any = false;
+            disableExp = false;
+          }
 
-           @ViewChild('child2') public child2Elm: any;
-         }
+          TestBed.configureTestingModule({declarations: [Cmp]});
 
-         TestBed.configureTestingModule({declarations: [Cmp]});
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          fixture.detectChanges();
+          resetLog();
 
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
+          cmp.disableExp = true;
+          cmp.exp = '1';
+          fixture.detectChanges();
 
-         cmp.exp1 = true;
-         cmp.exp2 = true;
-         fixture.detectChanges();
-         engine.flush();
-         resetLog();
+          let players = getLog();
+          expect(players.length).toEqual(0);
+          resetLog();
 
-         const p = cmp.parent.nativeElement;
-         const c1 = cmp.child1Elm.nativeElement;
-         const c2 = cmp.child2Elm.nativeElement;
+          cmp.disableExp = false;
+          cmp.exp = '2';
+          fixture.detectChanges();
 
-         cmp.exp1 = false;
-         cmp.exp2 = false;
-         fixture.detectChanges();
-         engine.flush();
+          players = getLog();
+          expect(players.length).toEqual(1);
+          expect(players[0].totalTime).toEqual(1234);
+        });
 
-         expect(p.contains(c1)).toBeTruthy();
-         expect(p.contains(c2)).toBeTruthy();
+        it('should respect inner disabled nodes once a parent becomes enabled', () => {
+          @Component({
+            selector: 'if-cmp',
+            template: `
+              <div [@.disabled]="disableParentExp">
+                <div [@.disabled]="disableChildExp">
+                  <div [@myAnimation]="exp"></div>
+                </div>
+              </div>
+            `,
+            animations: [
+              trigger('myAnimation', [
+                transition('* => 1, * => 2, * => 3', [animate(1234, style({width: '100px'}))]),
+              ]),
+            ],
+          })
+          class Cmp {
+            disableParentExp = false;
+            disableChildExp = false;
+            exp = '';
+          }
 
-         cmp.exp2 = false;
-         fixture.detectChanges();
-         engine.flush();
+          TestBed.configureTestingModule({declarations: [Cmp]});
 
-         expect(p.contains(c1)).toBeTruthy();
-         expect(p.contains(c2)).toBeTruthy();
-       });
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          fixture.detectChanges();
+          resetLog();
 
-    it('should detect trigger changes based on object.value properties', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
-            <div [@myAnimation]="{value:exp}"></div>
-          `,
-        animations: [
-          trigger(
-              'myAnimation',
-              [
-                transition('* => 1', [animate(1234, style({opacity: 0}))]),
-                transition('* => 2', [animate(5678, style({opacity: 0}))]),
-              ]),
-        ]
-      })
-      class Cmp {
-        public exp: any;
-      }
+          cmp.disableParentExp = true;
+          cmp.disableChildExp = true;
+          cmp.exp = '1';
+          fixture.detectChanges();
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+          let players = getLog();
+          expect(players.length).toEqual(0);
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+          cmp.disableParentExp = false;
+          cmp.exp = '2';
+          fixture.detectChanges();
 
-      cmp.exp = '1';
-      fixture.detectChanges();
-      engine.flush();
-      let players = getLog();
-      expect(players.length).toEqual(1);
-      expect(players[0].duration).toEqual(1234);
-      resetLog();
+          players = getLog();
+          expect(players.length).toEqual(0);
 
-      cmp.exp = '2';
-      fixture.detectChanges();
-      engine.flush();
-      players = getLog();
-      expect(players.length).toEqual(1);
-      expect(players[0].duration).toEqual(5678);
-    });
+          cmp.disableChildExp = false;
+          cmp.exp = '3';
+          fixture.detectChanges();
 
-    it('should not render animations when the object expression value is the same as it was previously',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-            <div [@myAnimation]="{value:exp,params:params}"></div>
-          `,
-           animations: [
-             trigger(
-                 'myAnimation',
-                 [
-                   transition('* => *', [animate(1234, style({opacity: 0}))]),
-                 ]),
-           ]
-         })
-         class Cmp {
-           public exp: any;
-           public params: any;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = '1';
-         cmp.params = {};
-         fixture.detectChanges();
-         engine.flush();
-         let players = getLog();
-         expect(players.length).toEqual(1);
-         expect(players[0].duration).toEqual(1234);
-         resetLog();
-
-         cmp.exp = '1';
-         cmp.params = {};
-         fixture.detectChanges();
-         engine.flush();
-         players = getLog();
-         expect(players.length).toEqual(0);
-       });
-
-    it('should update the final state styles when params update even if the expression hasn\'t changed',
-       fakeAsync(() => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-            <div [@myAnimation]="{value:exp,params:{color:color}}"></div>
-          `,
-           animations: [
-             trigger(
-                 'myAnimation',
-                 [
-                   state('*', style({color: '{{ color }}'}), {params: {color: 'black'}}),
-                   transition('* => 1', animate(500))
-                 ]),
-           ]
-         })
-         class Cmp {
-           public exp: any;
-           public color: string|null|undefined;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = '1';
-         cmp.color = 'red';
-         fixture.detectChanges();
-         const player = getLog()[0]!;
-         const element = player.element;
-         player.finish();
-
-         flushMicrotasks();
-         expect(hasStyle(element, 'color', 'red')).toBeTruthy();
-
-         cmp.exp = '1';
-         cmp.color = 'blue';
-         fixture.detectChanges();
-         resetLog();
-
-         flushMicrotasks();
-         expect(hasStyle(element, 'color', 'blue')).toBeTruthy();
-
-         cmp.exp = '1';
-         cmp.color = null;
-         fixture.detectChanges();
-         resetLog();
-
-         flushMicrotasks();
-         expect(hasStyle(element, 'color', 'black')).toBeTruthy();
-       }));
-
-    it('should substitute in values if the provided state match is an object with values', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
-            <div [@myAnimation]="exp"></div>
-          `,
-        animations: [trigger(
-            'myAnimation',
-            [transition(
-                'a => b',
-                [style({opacity: '{{ start }}'}), animate(1000, style({opacity: '{{ end }}'}))],
-                buildParams({start: '0', end: '1'}))])]
-      })
-      class Cmp {
-        public exp: any;
-      }
+          players = getLog();
+          expect(players.length).toEqual(1);
+        });
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        it('should properly handle dom operations when disabled', () => {
+          @Component({
+            selector: 'if-cmp',
+            template: `
+              <div [@.disabled]="disableExp" #parent>
+                <div *ngIf="exp" @myAnimation></div>
+              </div>
+            `,
+            animations: [
+              trigger('myAnimation', [
+                transition(':enter', [style({opacity: 0}), animate(1234, style({opacity: 1}))]),
+                transition(':leave', [animate(1234, style({opacity: 0}))]),
+              ]),
+            ],
+          })
+          class Cmp {
+            @ViewChild('parent') public parentElm: any;
+            disableExp = false;
+            exp = false;
+          }
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+          TestBed.configureTestingModule({declarations: [Cmp]});
 
-      cmp.exp = {value: 'a'};
-      fixture.detectChanges();
-      engine.flush();
-      resetLog();
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          cmp.disableExp = true;
+          fixture.detectChanges();
+          resetLog();
 
-      cmp.exp = {value: 'b', params: {start: .3, end: .6}};
-      fixture.detectChanges();
-      engine.flush();
-      const player = getLog().pop()!;
-      expect(player.keyframes).toEqual([
-        new Map<string, string|number>([['opacity', '0.3'], ['offset', 0]]),
-        new Map<string, string|number>([['opacity', '0.6'], ['offset', 1]])
-      ]);
-    });
+          const parent = cmp.parentElm.nativeElement;
 
-    it('should retain substituted styles on the element once the animation is complete if referenced in the final state',
-       fakeAsync(() => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-            <div [@myAnimation]="{value:exp, params: { color: color }}"></div>
-          `,
-           animations: [
-             trigger(
-                 'myAnimation',
-                 [
-                   state(
-                       'start', style({
-                         color: '{{ color }}',
-                         fontSize: '{{ fontSize }}px',
-                         width: '{{ width }}'
-                       }),
-                       {params: {color: 'red', fontSize: '200', width: '10px'}}),
-
-                   state(
-                       'final',
-                       style({color: '{{ color }}', fontSize: '{{ fontSize }}px', width: '888px'}),
-                       {params: {color: 'green', fontSize: '50', width: '100px'}}),
-
-                   transition('start => final', animate(500)),
-                 ]),
-           ]
-         })
-         class Cmp {
-           public exp: any;
-           public color: any;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = 'start';
-         cmp.color = 'red';
-         fixture.detectChanges();
-         resetLog();
-
-         cmp.exp = 'final';
-         cmp.color = 'blue';
-         fixture.detectChanges();
-
-         const players = getLog();
-         expect(players.length).toEqual(1);
-         const [p1] = players;
-
-         expect(p1.keyframes).toEqual([
-           new Map<string, string|number>(
-               [['color', 'red'], ['fontSize', '200px'], ['width', '10px'], ['offset', 0]]),
-           new Map<string, string|number>(
-               [['color', 'blue'], ['fontSize', '50px'], ['width', '888px'], ['offset', 1]])
-         ]);
-
-         const element = p1.element;
-         p1.finish();
-         flushMicrotasks();
-
-         expect(hasStyle(element, 'color', 'blue')).toBeTruthy();
-         expect(hasStyle(element, 'fontSize', '50px')).toBeTruthy();
-         expect(hasStyle(element, 'width', '888px')).toBeTruthy();
-       }));
-
-    it('should only evaluate final state param substitutions from the expression and state values and not from the transition options ',
-       fakeAsync(() => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-            <div [@myAnimation]="exp"></div>
-          `,
-           animations: [
-             trigger(
-                 'myAnimation',
-                 [
-                   state(
-                       'start', style({
-                         width: '{{ width }}',
-                         height: '{{ height }}',
-                       }),
-                       {params: {width: '0px', height: '0px'}}),
-
-                   state(
-                       'final', style({
-                         width: '{{ width }}',
-                         height: '{{ height }}',
-                       }),
-                       {params: {width: '100px', height: '100px'}}),
-
-                   transition(
-                       'start => final', [animate(500)],
-                       {params: {width: '333px', height: '666px'}}),
-                 ]),
-           ]
-         })
-         class Cmp {
-           public exp: any;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = 'start';
-         fixture.detectChanges();
-         resetLog();
-
-         cmp.exp = 'final';
-         fixture.detectChanges();
-
-         const players = getLog();
-         expect(players.length).toEqual(1);
-         const [p1] = players;
-
-         expect(p1.keyframes).toEqual([
-           new Map<string, string|number>([['width', '0px'], ['height', '0px'], ['offset', 0]]),
-           new Map<string, string|number>([['width', '100px'], ['height', '100px'], ['offset', 1]]),
-         ]);
-
-         const element = p1.element;
-         p1.finish();
-         flushMicrotasks();
-
-         expect(hasStyle(element, 'width', '100px')).toBeTruthy();
-         expect(hasStyle(element, 'height', '100px')).toBeTruthy();
-       }));
-
-    it('should apply default params when resolved animation value is null or undefined', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `<div [@myAnimation]="exp"></div>`,
-        animations: [trigger(
-            'myAnimation',
-            [transition(
-                'a => b',
-                [style({opacity: '{{ start }}'}), animate(1000, style({opacity: '{{ end }}'}))],
-                buildParams({start: '0.4', end: '0.7'}))])]
-      })
-      class Cmp {
-        public exp: any;
-      }
+          cmp.exp = true;
+          fixture.detectChanges();
+          expect(getLog().length).toEqual(0);
+          expect(parent.childElementCount).toEqual(1);
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+          cmp.exp = false;
+          fixture.detectChanges();
+          expect(getLog().length).toEqual(0);
+          expect(parent.childElementCount).toEqual(0);
+        });
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+        it('should properly resolve animation event listeners when disabled', fakeAsync(() => {
+          @Component({
+            selector: 'if-cmp',
+            template: `
+              <div [@.disabled]="disableExp">
+                <div [@myAnimation]="exp" (@myAnimation.start)="startEvent=$event" (@myAnimation.done)="doneEvent=$event"></div>
+              </div>
+            `,
+            animations: [
+              trigger('myAnimation', [
+                transition('* => 1, * => 2', [
+                  style({opacity: 0}),
+                  animate(9876, style({opacity: 1})),
+                ]),
+              ]),
+            ],
+          })
+          class Cmp {
+            disableExp = false;
+            exp = '';
+            startEvent: AnimationEvent | undefined;
+            doneEvent: AnimationEvent | undefined;
+          }
 
-      cmp.exp = {value: 'a'};
-      fixture.detectChanges();
-      engine.flush();
-      resetLog();
+          TestBed.configureTestingModule({declarations: [Cmp]});
 
-      cmp.exp = {value: 'b', params: {start: undefined, end: null}};
-      fixture.detectChanges();
-      engine.flush();
-      const player = getLog().pop()!;
-      expect(player.keyframes).toEqual([
-        new Map<string, string|number>([['opacity', '0.4'], ['offset', 0]]),
-        new Map<string, string|number>([['opacity', '0.7'], ['offset', 1]])
-      ]);
-    });
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          cmp.disableExp = true;
+          fixture.detectChanges();
+          resetLog();
+          expect(cmp.startEvent).toBeFalsy();
+          expect(cmp.doneEvent).toBeFalsy();
 
-    it('should not flush animations twice when an inner component runs change detection', () => {
-      @Component({
-        selector: 'outer-cmp',
-        template: `
-            <div *ngIf="exp" @outer></div>
-            <inner-cmp #inner></inner-cmp>
-          `,
-        animations: [trigger(
-            'outer',
-            [transition(':enter', [style({opacity: 0}), animate('1s', style({opacity: 1}))])])]
-      })
-      class OuterCmp {
-        @ViewChild('inner') public inner: any;
-        public exp: any = null;
+          cmp.exp = '1';
+          fixture.detectChanges();
+          flushMicrotasks();
+          expect(cmp.startEvent?.totalTime).toEqual(9876);
+          expect(cmp.startEvent?.disabled).toBeTruthy();
+          expect(cmp.doneEvent?.totalTime).toEqual(9876);
+          expect(cmp.doneEvent?.disabled).toBeTruthy();
+
+          cmp.exp = '2';
+          cmp.disableExp = false;
+          fixture.detectChanges();
+          flushMicrotasks();
+          expect(cmp.startEvent?.totalTime).toEqual(9876);
+          expect(cmp.startEvent?.disabled).toBeFalsy();
+          // the done event isn't fired because it's an actual animation
+        }));
 
-        update() {
-          this.exp = 'go';
-        }
+        it('should work when there are no animations on the component handling the disable/enable flag', () => {
+          @Component({
+            selector: 'parent-cmp',
+            template: `
+              <div [@.disabled]="disableExp">
+                <child-cmp #child></child-cmp>
+              </div>
+                `,
+          })
+          class ParentCmp {
+            @ViewChild('child') public child: ChildCmp | null = null;
+            disableExp = false;
+          }
 
-        ngDoCheck() {
-          if (this.exp == 'go') {
-            this.inner.update();
+          @Component({
+            selector: 'child-cmp',
+            template: `
+                <div [@myAnimation]="exp"></div>
+                `,
+            animations: [
+              trigger('myAnimation', [
+                transition('* => go, * => goAgain', [
+                  style({opacity: 0}),
+                  animate('1s', style({opacity: 1})),
+                ]),
+              ]),
+            ],
+          })
+          class ChildCmp {
+            public exp = '';
           }
-        }
-      }
 
-      @Component({
-        selector: 'inner-cmp',
-        template: `
-            <div *ngIf="exp" @inner></div>
-          `,
-        animations: [trigger('inner', [transition(
-                                          ':enter',
-                                          [
-                                            style({opacity: 0}),
-                                            animate('1s', style({opacity: 1})),
-                                          ])])]
-      })
-      class InnerCmp {
-        public exp: any;
-        constructor(private _ref: ChangeDetectorRef) {}
-        update() {
-          this.exp = 'go';
-          this._ref.detectChanges();
-        }
-      }
+          TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
 
-      TestBed.configureTestingModule({declarations: [OuterCmp, InnerCmp]});
+          const fixture = TestBed.createComponent(ParentCmp);
+          const cmp = fixture.componentInstance;
+          cmp.disableExp = true;
+          fixture.detectChanges();
+          resetLog();
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(OuterCmp);
-      const cmp = fixture.componentInstance;
-      fixture.detectChanges();
-      expect(getLog()).toEqual([]);
+          const child = cmp.child!;
+          child.exp = 'go';
+          fixture.detectChanges();
 
-      cmp.update();
-      fixture.detectChanges();
+          expect(getLog().length).toEqual(0);
+          resetLog();
 
-      const players = getLog();
-      expect(players.length).toEqual(2);
-    });
+          cmp.disableExp = false;
+          child.exp = 'goAgain';
+          fixture.detectChanges();
+          expect(getLog().length).toEqual(1);
+        });
 
-    describe('transition aliases', () => {
-      describe(':increment', () => {
-        it('should detect when a value has incremented', () => {
+        it('should treat the property as true when the expression is missing', () => {
           @Component({
-            selector: 'if-cmp',
-            template: `
-          <div [@myAnimation]="exp"></div>
-        `,
+            selector: 'parent-cmp',
             animations: [
-              trigger(
-                  'myAnimation',
-                  [
-                    transition(
-                        ':increment',
-                        [
-                          animate(1234, style({background: 'red'})),
-                        ]),
-                  ]),
-            ]
+              trigger('myAnimation', [
+                transition('* => go', [style({opacity: 0}), animate(500, style({opacity: 1}))]),
+              ]),
+            ],
+            template: `
+              <div @.disabled>
+                <div [@myAnimation]="exp"></div>
+              </div>
+                `,
           })
           class Cmp {
-            exp: number = 0;
+            exp = '';
           }
 
           TestBed.configureTestingModule({declarations: [Cmp]});
+
           const fixture = TestBed.createComponent(Cmp);
           const cmp = fixture.componentInstance;
           fixture.detectChanges();
-          let players = getLog();
-          expect(players.length).toEqual(0);
-
-          cmp.exp++;
-          fixture.detectChanges();
-          players = getLog();
-          expect(players.length).toEqual(1);
-          expect(players[0].duration).toEqual(1234);
           resetLog();
 
-          cmp.exp = 5;
+          cmp.exp = 'go';
           fixture.detectChanges();
-          players = getLog();
-          expect(players.length).toEqual(1);
-          expect(players[0].duration).toEqual(1234);
+          expect(getLog().length).toEqual(0);
         });
-      });
 
-      describe(':decrement', () => {
-        it('should detect when a value has decremented', () => {
+        it('should respect parent/sub animations when the respective area in the DOM is disabled', fakeAsync(() => {
           @Component({
-            selector: 'if-cmp',
-            template: `
-          <div [@myAnimation]="exp"></div>
-        `,
+            selector: 'parent-cmp',
             animations: [
-              trigger(
-                  'myAnimation',
-                  [
-                    transition(
-                        ':decrement',
-                        [
-                          animate(1234, style({background: 'red'})),
-                        ]),
-                  ]),
-            ]
+              trigger('parent', [
+                transition('* => empty', [
+                  style({opacity: 0}),
+                  query('@child', [animateChild()]),
+                  animate('1s', style({opacity: 1})),
+                ]),
+              ]),
+              trigger('child', [transition(':leave', [animate('1s', style({opacity: 0}))])]),
+            ],
+            template: `
+              <div [@.disabled]="disableExp" #container>
+                <div [@parent]="exp" (@parent.done)="onDone($event)">
+                  <div class="item" *ngFor="let item of items" @child (@child.done)="onDone($event)"></div>
+                </div>
+              </div>
+                `,
           })
           class Cmp {
-            exp: number = 5;
+            @ViewChild('container') public container: any;
+
+            disableExp = false;
+            exp = '';
+            items: any[] = [];
+            doneLog: any[] = [];
+
+            onDone(event: any) {
+              this.doneLog.push(event);
+            }
           }
 
           TestBed.configureTestingModule({declarations: [Cmp]});
+          const engine = TestBed.inject(ɵAnimationEngine);
           const fixture = TestBed.createComponent(Cmp);
           const cmp = fixture.componentInstance;
+          cmp.disableExp = true;
+          cmp.items = [0, 1, 2, 3, 4];
           fixture.detectChanges();
-          let players = getLog();
-          expect(players.length).toEqual(0);
-
-          cmp.exp--;
-          fixture.detectChanges();
-          players = getLog();
-          expect(players.length).toEqual(1);
-          expect(players[0].duration).toEqual(1234);
-          resetLog();
+          flushMicrotasks();
 
-          cmp.exp = 0;
+          cmp.exp = 'empty';
+          cmp.items = [];
+          cmp.doneLog = [];
           fixture.detectChanges();
-          players = getLog();
-          expect(players.length).toEqual(1);
-          expect(players[0].duration).toEqual(1234);
-        });
-      });
-    });
-
-    it('should animate nodes properly when they have been re-ordered', () => {
-      @Component({
-        selector: 'if-cmp',
-        template: `
-                <div *ngFor="let item of items" [class]="'class-' + item.value">
-                  <div [@myAnimation]="item.count">
-                    {{ item.value }}
-                  </div>
-                </div>
-              `,
-        animations: [
-          trigger(
-              'myAnimation',
-              [
-                state('0', style({opacity: 0})), state('1', style({opacity: 0.4})),
-                state('2', style({opacity: 0.8})), transition('* => 1, * => 2', [animate(1000)])
-              ]),
-        ]
-      })
-      class Cmp {
-        items = [
-          {value: '1', count: 0},
-          {value: '2', count: 0},
-          {value: '3', count: 0},
-          {value: '4', count: 0},
-          {value: '5', count: 0},
-        ];
-
-        reOrder() {
-          this.items = [
-            this.items[4],
-            this.items[1],
-            this.items[3],
-            this.items[0],
-            this.items[2],
-          ];
-        }
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-      const one = cmp.items[0];
-      const two = cmp.items[1];
-      one.count++;
-      fixture.detectChanges();
+          flushMicrotasks();
 
-      cmp.reOrder();
-      fixture.detectChanges();
-      resetLog();
-
-      one.count++;
-      two.count++;
-      fixture.detectChanges();
+          const elms = cmp.container.nativeElement.querySelectorAll('.item');
+          expect(elms.length).toEqual(0);
 
-      const players = getLog();
-      expect(players.length).toEqual(2);
+          expect(cmp.doneLog.length).toEqual(6);
+        }));
+      });
     });
-  });
-
-  it('should not animate i18n insertBefore', () => {
-    // I18n uses `insertBefore` API to insert nodes in correct order. Animation assumes that
-    // any `insertBefore` is a move and tries to animate it.
-    // NOTE: This test was extracted from `g3`
-    @Component({
-      template: `<div i18n>Hello <span>World</span>!</div>`,
-      animations: [
-        trigger(
-            'myAnimation',
-            [
-              transition('* => *', [animate(1000)]),
-            ]),
-      ]
-    })
-    class Cmp {
-    }
-
-    TestBed.configureTestingModule({declarations: [Cmp]});
-    const fixture = TestBed.createComponent(Cmp);
-    fixture.detectChanges();
-    const players = getLog();
-    const span = fixture.debugElement.nativeElement.querySelector('span');
-    expect(span.innerText).toEqual('World');
-    // We should not insert `ng-star-inserted` into the span class.
-    expect(span.className).not.toContain('ng-star-inserted');
-  });
-
-  describe('animation listeners', () => {
-    it('should trigger a `start` state change listener for when the animation changes state from void => state',
-       fakeAsync(() => {
-         @Component({
-           selector: 'if-cmp',
-           template: `
-          <div *ngIf="exp" [@myAnimation]="exp" (@myAnimation.start)="callback($event)"></div>
-        `,
-           animations: [trigger(
-               'myAnimation',
-               [transition(
-                   'void => *',
-                   [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
-         })
-         class Cmp {
-           exp: any = false;
-           event: AnimationEvent|undefined;
-
-           callback = (event: any) => {
-             this.event = event;
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         cmp.exp = 'true';
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         expect(cmp.event?.triggerName).toEqual('myAnimation');
-         expect(cmp.event?.phaseName).toEqual('start');
-         expect(cmp.event?.totalTime).toEqual(500);
-         expect(cmp.event?.fromState).toEqual('void');
-         expect(cmp.event?.toState).toEqual('true');
-       }));
-
-    it('should trigger a `done` state change listener for when the animation changes state from a => b',
-       fakeAsync(() => {
-         @Component({
-           selector: 'if-cmp',
-           template: `
-          <div *ngIf="exp" [@myAnimation123]="exp" (@myAnimation123.done)="callback($event)"></div>
-        `,
-           animations: [trigger(
-               'myAnimation123',
-               [transition(
-                   '* => b', [style({'opacity': '0'}), animate(999, style({'opacity': '1'}))])])],
-         })
-         class Cmp {
-           exp: any = false;
-           event: AnimationEvent|undefined;
-
-           callback = (event: any) => {
-             this.event = event;
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = 'b';
-         fixture.detectChanges();
-         engine.flush();
-
-         expect(cmp.event).toBeFalsy();
-
-         const player = engine.players.pop()!;
-         player.finish();
-         flushMicrotasks();
-
-         expect(cmp.event?.triggerName).toEqual('myAnimation123');
-         expect(cmp.event?.phaseName).toEqual('done');
-         expect(cmp.event?.totalTime).toEqual(999);
-         expect(cmp.event?.fromState).toEqual('void');
-         expect(cmp.event?.toState).toEqual('b');
-       }));
-
-    it('should handle callbacks for multiple triggers running simultaneously', fakeAsync(() => {
-         @Component({
-           selector: 'if-cmp',
-           template: `
-          <div [@ani1]="exp1" (@ani1.done)="callback1($event)"></div>
-          <div [@ani2]="exp2" (@ani2.done)="callback2($event)"></div>
-        `,
-           animations: [
-             trigger(
-                 'ani1',
-                 [
-                   transition(
-                       '* => a', [style({'opacity': '0'}), animate(999, style({'opacity': '1'}))]),
-                 ]),
-             trigger(
-                 'ani2',
-                 [
-                   transition(
-                       '* => b',
-                       [style({'width': '0px'}), animate(999, style({'width': '100px'}))]),
-                 ])
-           ],
-         })
-         class Cmp {
-           exp1: any = false;
-           exp2: any = false;
-           event1: AnimationEvent|undefined;
-           event2: AnimationEvent|undefined;
-           // tslint:disable:semicolon
-           callback1 = (event: any) => {
-             this.event1 = event;
-           };
-           // tslint:disable:semicolon
-           callback2 = (event: any) => {
-             this.event2 = event;
-           };
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp1 = 'a';
-         cmp.exp2 = 'b';
-         fixture.detectChanges();
-         engine.flush();
-
-         expect(cmp.event1).toBeFalsy();
-         expect(cmp.event2).toBeFalsy();
-
-         const player1 = engine.players[0];
-         const player2 = engine.players[1];
-
-         player1.finish();
-         player2.finish();
-         expect(cmp.event1).toBeFalsy();
-         expect(cmp.event2).toBeFalsy();
-
-         flushMicrotasks();
-         expect(cmp.event1?.triggerName).toBeTruthy('ani1');
-         expect(cmp.event2?.triggerName).toBeTruthy('ani2');
-       }));
-
-    it('should handle callbacks for multiple triggers running simultaneously on the same element',
-       fakeAsync(() => {
-         @Component({
-           selector: 'if-cmp',
-           template: `
-          <div [@ani1]="exp1" (@ani1.done)="callback1($event)" [@ani2]="exp2" (@ani2.done)="callback2($event)"></div>
-        `,
-           animations: [
-             trigger(
-                 'ani1',
-                 [
-                   transition(
-                       '* => a', [style({'opacity': '0'}), animate(999, style({'opacity': '1'}))]),
-                 ]),
-             trigger(
-                 'ani2',
-                 [
-                   transition(
-                       '* => b',
-                       [style({'width': '0px'}), animate(999, style({'width': '100px'}))]),
-                 ])
-           ],
-         })
-         class Cmp {
-           exp1: any = false;
-           exp2: any = false;
-           event1: AnimationEvent|undefined;
-           event2: AnimationEvent|undefined;
-           callback1 = (event: any) => {
-             this.event1 = event;
-           };
-           callback2 = (event: any) => {
-             this.event2 = event;
-           };
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp1 = 'a';
-         cmp.exp2 = 'b';
-         fixture.detectChanges();
-         engine.flush();
-
-         expect(cmp.event1).toBeFalsy();
-         expect(cmp.event2).toBeFalsy();
-
-         const player1 = engine.players[0];
-         const player2 = engine.players[1];
-
-         player1.finish();
-         player2.finish();
-         expect(cmp.event1).toBeFalsy();
-         expect(cmp.event2).toBeFalsy();
-
-         flushMicrotasks();
-         expect(cmp.event1?.triggerName).toBeTruthy('ani1');
-         expect(cmp.event2?.triggerName).toBeTruthy('ani2');
-       }));
-
-    it('should handle a leave animation for multiple triggers even if not all triggers have their own leave transition specified',
-       fakeAsync(() => {
-         @Component({
-           selector: 'if-cmp',
-           template: `
-               <div *ngIf="exp" @foo @bar>123</div>
-             `,
-           animations: [
-             trigger(
-                 'foo',
-                 [
-                   transition(
-                       ':enter',
-                       [
-                         style({opacity: 0}),
-                         animate(1000, style({opacity: 1})),
-                       ]),
-                 ]),
-             trigger(
-                 'bar',
-                 [
-                   transition(
-                       ':leave',
-                       [
-                         animate(1000, style({opacity: 0})),
-                       ]),
-                 ])
-           ],
-         })
-         class Cmp {
-           exp: boolean = false;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-         const fixture = TestBed.createComponent(Cmp);
-         const elm = fixture.elementRef.nativeElement;
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = true;
-         fixture.detectChanges();
-
-         let players = getLog();
-         expect(players.length).toEqual(1);
-         let [p1] = players;
-         p1.finish();
-         flushMicrotasks();
-         expect(elm.innerText.trim()).toEqual('123');
-
-         resetLog();
-         cmp.exp = false;
-         fixture.detectChanges();
-
-         players = getLog();
-         expect(players.length).toEqual(1);
-         [p1] = players;
-         p1.finish();
-         flushMicrotasks();
-         expect(elm.innerText.trim()).toEqual('');
-       }));
-
-    it('should trigger a state change listener for when the animation changes state from void => state on the host element',
-       fakeAsync(() => {
-         @Component({
-           selector: 'my-cmp',
-           template: `...`,
-           animations: [trigger(
-               'myAnimation2',
-               [transition(
-                   'void => *',
-                   [style({'opacity': '0'}), animate(1000, style({'opacity': '1'}))])])],
-         })
-         class Cmp {
-           event: AnimationEvent|undefined;
-
-           @HostBinding('@myAnimation2') exp: any = false;
-
-           @HostListener('@myAnimation2.start', ['$event'])
-           callback = (event: any) => {
-             this.event = event;
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         cmp.exp = 'TRUE';
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         expect(cmp.event?.triggerName).toEqual('myAnimation2');
-         expect(cmp.event?.phaseName).toEqual('start');
-         expect(cmp.event?.totalTime).toEqual(1000);
-         expect(cmp.event?.fromState).toEqual('void');
-         expect(cmp.event?.toState).toEqual('TRUE');
-       }));
-
-    it('should always fire callbacks even when a transition is not detected', fakeAsync(() => {
-         @Component({
-           selector: 'my-cmp',
-           template: `
-              <div [@myAnimation]="exp" (@myAnimation.start)="callback($event)" (@myAnimation.done)="callback($event)"></div>
-            `,
-           animations: [trigger('myAnimation', [])]
-         })
-         class Cmp {
-           exp: string|undefined;
-           log: any[] = [];
-           callback = (event: any) => this.log.push(`${event.phaseName} => ${event.toState}`);
-         }
-
-         TestBed.configureTestingModule({
-           providers: [{provide: AnimationDriver, useClass: NoopAnimationDriver}],
-           declarations: [Cmp]
-         });
-
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = 'a';
-         fixture.detectChanges();
-         flushMicrotasks();
-         expect(cmp.log).toEqual(['start => a', 'done => a']);
-
-         cmp.log = [];
-         cmp.exp = 'b';
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         expect(cmp.log).toEqual(['start => b', 'done => b']);
-       }));
-
-    it('should fire callback events for leave animations even if there is no leave transition',
-       fakeAsync(() => {
-         @Component({
-           selector: 'my-cmp',
-           template: `
-              <div *ngIf="exp" @myAnimation (@myAnimation.start)="callback($event)" (@myAnimation.done)="callback($event)"></div>
-            `,
-           animations: [trigger('myAnimation', [])]
-         })
-         class Cmp {
-           exp: boolean = false;
-           log: any[] = [];
-           callback = (event: any) => {
-             const state = event.toState || '_default_';
-             this.log.push(`${event.phaseName} => ${state}`);
-           }
-         }
-
-         TestBed.configureTestingModule({
-           providers: [{provide: AnimationDriver, useClass: NoopAnimationDriver}],
-           declarations: [Cmp]
-         });
-
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = true;
-         fixture.detectChanges();
-         flushMicrotasks();
-         expect(cmp.log).toEqual(['start => _default_', 'done => _default_']);
-
-         cmp.log = [];
-
-         cmp.exp = false;
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         expect(cmp.log).toEqual(['start => void', 'done => void']);
-       }));
-
-    it('should fire callbacks on a sub animation once it starts and finishes', fakeAsync(() => {
-         @Component({
-           selector: 'my-cmp',
-           template: `
-              <div class="parent"
-                  [@parent]="exp1"
-                  (@parent.start)="cb('parent-start',$event)"
-                  (@parent.done)="cb('parent-done', $event)">
-                <div class="child"
-                  [@child]="exp2"
-                  (@child.start)="cb('child-start',$event)"
-                  (@child.done)="cb('child-done', $event)"></div>
-              </div>
-            `,
-           animations: [
-             trigger(
-                 'parent',
-                 [
-                   transition(
-                       '* => go',
-                       [
-                         style({width: '0px'}),
-                         animate(1000, style({width: '100px'})),
-                         query(
-                             '.child',
-                             [
-                               animateChild({duration: '1s'}),
-                             ]),
-                         animate(1000, style({width: '0px'})),
-                       ]),
-                 ]),
-             trigger(
-                 'child',
-                 [
-                   transition(
-                       '* => go',
-                       [
-                         style({height: '0px'}),
-                         animate(1000, style({height: '100px'})),
-                       ]),
-                 ])
-           ]
-         })
-         class Cmp {
-           log: string[] = [];
-           exp1: string|undefined;
-           exp2: string|undefined;
-
-           cb(name: string, event: AnimationEvent) {
-             this.log.push(name);
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         cmp.exp1 = 'go';
-         cmp.exp2 = 'go';
-         fixture.detectChanges();
-         engine.flush();
-         flushMicrotasks();
-
-         expect(cmp.log).toEqual(['parent-start', 'child-start']);
-         cmp.log = [];
-
-         const players = getLog();
-         expect(players.length).toEqual(4);
-
-         // players:
-         //  - _scp (skipped child player): player for the child animation
-         //  - pp1 (parent player 1): player for parent animation (from 0px to 100px)
-         //  - pcp (parent child player):
-         //     player for child animation executed by parent via query and animateChild
-         //  - pp2 (parent player 2): player for parent animation (from 100px to 0px)
-         const [_scp, pp1, pcp, pp2] = players;
-
-         pp1.finish();
-         flushMicrotasks();
-         expect(cmp.log).toEqual([]);
-
-         pcp.finish();
-         flushMicrotasks();
-         expect(cmp.log).toEqual([]);
-
-         pp2.finish();
-         flushMicrotasks();
-         expect(cmp.log).toEqual(['parent-done', 'child-done']);
-       }));
-
-    it('should fire callbacks and collect the correct the totalTime and element details for any queried sub animations',
-       fakeAsync(() => {
-         @Component({
-           selector: 'my-cmp',
-           template: `
-              <div class="parent" [@parent]="exp" (@parent.done)="cb('all','done', $event)">
-                <div *ngFor="let item of items"
-                     class="item item-{{ item }}"
-                     @child
-                     (@child.start)="cb('c-' + item, 'start', $event)"
-                     (@child.done)="cb('c-' + item, 'done', $event)">
-                  {{ item }}
-                </div>
-              </div>
-            `,
-           animations: [
-             trigger(
-                 'parent',
-                 [transition(
-                     '* => go',
-                     [
-                       style({opacity: 0}), animate('1s', style({opacity: 1})),
-                       query('.item', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
-                       query('.item', [animateChild({duration: '1.8s', delay: '300ms'})])
-                     ])]),
-             trigger(
-                 'child',
-                 [transition(':enter', [style({opacity: 0}), animate(1500, style({opacity: 1}))])])
-           ]
-         })
-         class Cmp {
-           log: string[] = [];
-           events: {[name: string]: any} = {};
-           exp: string|undefined;
-           items: any = [0, 1, 2, 3];
-
-           cb(name: string, phase: string, event: AnimationEvent) {
-             this.log.push(name + '-' + phase);
-             this.events[name] = event;
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         cmp.exp = 'go';
-         fixture.detectChanges();
-         engine.flush();
-         flushMicrotasks();
-
-         expect(cmp.log).toEqual(['c-0-start', 'c-1-start', 'c-2-start', 'c-3-start']);
-         cmp.log = [];
-
-         const players = getLog();
-         expect(players.length).toEqual(13);
-
-         // players:
-         //  - _sc1p, _sc2p, _sc3p, _sc4p (skipped child n (1 to 4) players):
-         //     players for the children animations
-         //  - pp1 (parent player 1): player for parent animation (from opacity 0 to opacity 1)
-         //  - pc1p1, pc2p1, pc3p1, pc4p1 (parent child n (1 to 4) player 1):
-         //     players for children animations executed by parent via query and animate
-         //     (from opacity 0 to opacity 1)
-         //  - pc1p2, pc2p2, pc3p2, pc4p2 (parent child n (1 to 4) player 2):
-         //     players for children animations executed by parent via query and animateChild
-         const [_sc1p, _sc2p, _sc3p, _sc4p, pp1, pc1p1, pc2p1, pc3p1, pc4p1, pc1p2, pc2p2, pc3p2, pc4p2] =
-             getLog();
-         pp1.finish();
-         pc1p1.finish();
-         pc2p1.finish();
-         pc3p1.finish();
-         pc4p1.finish();
-         flushMicrotasks();
-
-         expect(cmp.log).toEqual([]);
-         pc1p2.finish();
-         pc2p2.finish();
-         pc3p2.finish();
-         pc4p2.finish();
-         flushMicrotasks();
-
-         expect(cmp.log).toEqual(['all-done', 'c-0-done', 'c-1-done', 'c-2-done', 'c-3-done']);
-
-         expect(cmp.events['all'].totalTime).toEqual(4100);  // 1000 + 1000 + 1800 + 300
-         expect(cmp.events['all'].element.innerText.trim().replaceAll('\n', ' '))
-             .toEqual('0 1 2 3');
-         expect(cmp.events['c-0'].totalTime).toEqual(1500);
-         expect(cmp.events['c-0'].element.innerText.trim()).toEqual('0');
-         expect(cmp.events['c-1'].totalTime).toEqual(1500);
-         expect(cmp.events['c-1'].element.innerText.trim()).toEqual('1');
-         expect(cmp.events['c-2'].totalTime).toEqual(1500);
-         expect(cmp.events['c-2'].element.innerText.trim()).toEqual('2');
-         expect(cmp.events['c-3'].totalTime).toEqual(1500);
-         expect(cmp.events['c-3'].element.innerText.trim()).toEqual('3');
-       }));
-  });
 
-  describe('animation control flags', () => {
-    describe('[@.disabled]', () => {
-      it('should disable child animations when set to true', () => {
+    describe('animation normalization', () => {
+      it('should convert hyphenated properties to camelcase by default', () => {
         @Component({
-          selector: 'if-cmp',
+          selector: 'cmp',
           template: `
-              <div [@.disabled]="disableExp">
-                <div [@myAnimation]="exp"></div>
-              </div>
-            `,
+               <div [@myAnimation]="exp"></div>
+             `,
           animations: [
-            trigger(
-                'myAnimation',
-                [
-                  transition(
-                      '* => 1, * => 2',
-                      [
-                        animate(1234, style({width: '100px'})),
-                      ]),
-                ]),
-          ]
+            trigger('myAnimation', [
+              transition('* => go', [
+                style({'background-color': 'red', height: '100px', fontSize: '100px'}),
+                animate(
+                  '1s',
+                  style({'background-color': 'blue', height: '200px', fontSize: '200px'}),
+                ),
+              ]),
+            ]),
+          ],
         })
         class Cmp {
           exp: any = false;
-          disableExp = false;
         }
 
         TestBed.configureTestingModule({declarations: [Cmp]});
-
         const fixture = TestBed.createComponent(Cmp);
         const cmp = fixture.componentInstance;
-        fixture.detectChanges();
-        resetLog();
-
-        cmp.disableExp = true;
-        cmp.exp = '1';
-        fixture.detectChanges();
-
-        let players = getLog();
-        expect(players.length).toEqual(0);
-
-        cmp.disableExp = false;
-        cmp.exp = '2';
+        cmp.exp = 'go';
         fixture.detectChanges();
 
-        players = getLog();
+        const players = getLog();
         expect(players.length).toEqual(1);
-        expect(players[0].totalTime).toEqual(1234);
+        expect(players[0].keyframes).toEqual([
+          new Map<string, string | number>([
+            ['backgroundColor', 'red'],
+            ['height', '100px'],
+            ['fontSize', '100px'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['backgroundColor', 'blue'],
+            ['height', '200px'],
+            ['fontSize', '200px'],
+            ['offset', 1],
+          ]),
+        ]);
       });
 
-      it('should ensure state() values are applied when an animation is disabled', () => {
+      it('should convert hyphenated properties to camelCase by default that are auto/pre style properties', () => {
         @Component({
-          selector: 'if-cmp',
+          selector: 'cmp',
           template: `
-              <div [@.disabled]="disableExp">
-                <div [@myAnimation]="exp" #elm></div>
-              </div>
-            `,
+               <div [@myAnimation]="exp"></div>
+             `,
           animations: [
-            trigger(
-                'myAnimation',
-                [
-                  state('1', style({height: '100px'})), state('2', style({height: '200px'})),
-                  state('3', style({height: '300px'})), transition('* => *', animate(500))
-                ]),
-          ]
+            trigger('myAnimation', [
+              transition('* => go', [
+                style({'background-color': AUTO_STYLE, 'font-size': '100px'}),
+                animate('1s', style({'background-color': 'blue', 'font-size': PRE_STYLE})),
+              ]),
+            ]),
+          ],
         })
         class Cmp {
           exp: any = false;
-          disableExp = false;
-
-          @ViewChild('elm', {static: true}) public element: any;
         }
 
         TestBed.configureTestingModule({declarations: [Cmp]});
-
         const fixture = TestBed.createComponent(Cmp);
-        const engine = TestBed.inject(ɵAnimationEngine);
-
-        function assertHeight(element: any, height: string) {
-          expect(element.style['height']).toEqual(height);
-        }
-
-        fixture.detectChanges();
-
         const cmp = fixture.componentInstance;
-        const element = cmp.element.nativeElement;
+        cmp.exp = 'go';
         fixture.detectChanges();
 
-        cmp.disableExp = true;
-        cmp.exp = '1';
-        fixture.detectChanges();
-        assertHeight(element, '100px');
+        const players = getLog();
+        expect(players.length).toEqual(1);
+        expect(players[0].keyframes).toEqual([
+          new Map<string, string | number>([
+            ['backgroundColor', AUTO_STYLE],
+            ['fontSize', '100px'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['backgroundColor', 'blue'],
+            ['fontSize', PRE_STYLE],
+            ['offset', 1],
+          ]),
+        ]);
+      });
+    });
 
-        cmp.exp = '2';
-        fixture.detectChanges();
-        assertHeight(element, '200px');
+    it('should throw neither state() or transition() are used inside of trigger()', () => {
+      @Component({
+        selector: 'if-cmp',
+        template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+        animations: [trigger('myAnimation', [animate(1000, style({width: '100px'}))])],
+      })
+      class Cmp {
+        exp: any = false;
+      }
 
-        cmp.exp = '3';
-        fixture.detectChanges();
-        assertHeight(element, '300px');
-      });
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      expect(() => {
+        TestBed.createComponent(Cmp);
+      }).toThrowError(
+        /only state\(\) and transition\(\) definitions can sit inside of a trigger\(\)/,
+      );
+    });
+
+    describe('animation and useAnimation functions', () => {
+      it('should apply the delay specified in the animation', () => {
+        const animationMetaData = animation(
+          [style({color: 'red'}), animate(1000, style({color: 'green'}))],
+          {delay: 3000},
+        );
 
-      it('should disable animations for the element that they are disabled on', () => {
         @Component({
-          selector: 'if-cmp',
+          selector: 'cmp',
           template: `
-              <div [@.disabled]="disableExp" [@myAnimation]="exp"></div>
-            `,
-          animations: [
-            trigger(
-                'myAnimation',
-                [
-                  transition(
-                      '* => 1, * => 2',
-                      [
-                        animate(1234, style({width: '100px'})),
-                      ]),
-                ]),
-          ]
+         <div @anim *ngIf="exp">
+         </div>
+       `,
+          animations: [trigger('anim', [transition(':enter', useAnimation(animationMetaData))])],
         })
         class Cmp {
-          exp: any = false;
-          disableExp = false;
+          exp: boolean = false;
         }
 
         TestBed.configureTestingModule({declarations: [Cmp]});
 
+        const engine = TestBed.inject(ɵAnimationEngine);
         const fixture = TestBed.createComponent(Cmp);
         const cmp = fixture.componentInstance;
-        fixture.detectChanges();
-        resetLog();
-
-        cmp.disableExp = true;
-        cmp.exp = '1';
-        fixture.detectChanges();
-
-        let players = getLog();
-        expect(players.length).toEqual(0);
-        resetLog();
+        cmp.exp = true;
 
-        cmp.disableExp = false;
-        cmp.exp = '2';
         fixture.detectChanges();
+        engine.flush();
 
-        players = getLog();
+        const players = getLog();
         expect(players.length).toEqual(1);
-        expect(players[0].totalTime).toEqual(1234);
+        const [player] = players;
+        expect(player.delay).toEqual(3000);
+        expect(player.duration).toEqual(1000);
+        expect(player.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['color', 'red'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['color', 'green'],
+            ['offset', 1],
+          ]),
+        ]);
       });
 
-      it('should respect inner disabled nodes once a parent becomes enabled', () => {
+      it('should apply the delay specified in the animation using params', () => {
+        const animationMetaData = animation(
+          [style({color: 'red'}), animate(500, style({color: 'green'}))],
+          {delay: '{{animationDelay}}ms', params: {animationDelay: 5500}},
+        );
+
         @Component({
-          selector: 'if-cmp',
+          selector: 'cmp',
           template: `
-              <div [@.disabled]="disableParentExp">
-                <div [@.disabled]="disableChildExp">
-                  <div [@myAnimation]="exp"></div>
-                </div>
-              </div>
-            `,
-          animations: [trigger(
-              'myAnimation',
-              [transition('* => 1, * => 2, * => 3', [animate(1234, style({width: '100px'}))])])]
+         <div @anim *ngIf="exp">
+         </div>
+       `,
+          animations: [trigger('anim', [transition(':enter', useAnimation(animationMetaData))])],
         })
         class Cmp {
-          disableParentExp = false;
-          disableChildExp = false;
-          exp = '';
+          exp: boolean = false;
         }
 
         TestBed.configureTestingModule({declarations: [Cmp]});
 
+        const engine = TestBed.inject(ɵAnimationEngine);
         const fixture = TestBed.createComponent(Cmp);
         const cmp = fixture.componentInstance;
-        fixture.detectChanges();
-        resetLog();
+        cmp.exp = true;
 
-        cmp.disableParentExp = true;
-        cmp.disableChildExp = true;
-        cmp.exp = '1';
         fixture.detectChanges();
+        engine.flush();
 
-        let players = getLog();
-        expect(players.length).toEqual(0);
+        const players = getLog();
+        expect(players.length).toEqual(1);
+        const [player] = players;
+        expect(player.delay).toEqual(5500);
+        expect(player.duration).toEqual(500);
+        expect(player.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['color', 'red'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['color', 'green'],
+            ['offset', 1],
+          ]),
+        ]);
+      });
 
-        cmp.disableParentExp = false;
-        cmp.exp = '2';
-        fixture.detectChanges();
+      it('should apply the delay specified in the useAnimation call', () => {
+        const animationMetaData = animation([
+          style({color: 'red'}),
+          animate(550, style({color: 'green'})),
+        ]);
 
-        players = getLog();
-        expect(players.length).toEqual(0);
+        @Component({
+          selector: 'cmp',
+          template: `
+         <div @anim *ngIf="exp">
+         </div>
+       `,
+          animations: [
+            trigger('anim', [transition(':enter', useAnimation(animationMetaData, {delay: 1500}))]),
+          ],
+        })
+        class Cmp {
+          exp: boolean = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = true;
 
-        cmp.disableChildExp = false;
-        cmp.exp = '3';
         fixture.detectChanges();
+        engine.flush();
 
-        players = getLog();
+        const players = getLog();
         expect(players.length).toEqual(1);
+        const [player] = players;
+        expect(player.delay).toEqual(1500);
+        expect(player.duration).toEqual(550);
+        expect(player.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['color', 'red'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['color', 'green'],
+            ['offset', 1],
+          ]),
+        ]);
       });
 
-      it('should properly handle dom operations when disabled', () => {
+      it('should apply the delay specified in the useAnimation call using params', () => {
+        const animationMetaData = animation([
+          style({color: 'red'}),
+          animate(700, style({color: 'green'})),
+        ]);
+
         @Component({
-          selector: 'if-cmp',
+          selector: 'cmp',
           template: `
-              <div [@.disabled]="disableExp" #parent>
-                <div *ngIf="exp" @myAnimation></div>
-              </div>
-            `,
+         <div @anim *ngIf="exp">
+         </div>
+       `,
           animations: [
-            trigger(
-                'myAnimation',
-                [
-                  transition(
-                      ':enter',
-                      [
-                        style({opacity: 0}),
-                        animate(1234, style({opacity: 1})),
-                      ]),
-                  transition(
-                      ':leave',
-                      [
-                        animate(1234, style({opacity: 0})),
-                      ]),
-                ]),
-          ]
+            trigger('anim', [
+              transition(
+                ':enter',
+                useAnimation(animationMetaData, {
+                  delay: '{{useAnimationDelay}}ms',
+                  params: {useAnimationDelay: 7500},
+                }),
+              ),
+            ]),
+          ],
         })
         class Cmp {
-          @ViewChild('parent') public parentElm: any;
-          disableExp = false;
-          exp = false;
+          exp: boolean = false;
         }
 
         TestBed.configureTestingModule({declarations: [Cmp]});
 
+        const engine = TestBed.inject(ɵAnimationEngine);
         const fixture = TestBed.createComponent(Cmp);
-        const cmp = fixture.componentInstance;
-        cmp.disableExp = true;
-        fixture.detectChanges();
-        resetLog();
-
-        const parent = cmp.parentElm.nativeElement;
-
+        const cmp = fixture.componentInstance;
         cmp.exp = true;
-        fixture.detectChanges();
-        expect(getLog().length).toEqual(0);
-        expect(parent.childElementCount).toEqual(1);
 
-        cmp.exp = false;
         fixture.detectChanges();
-        expect(getLog().length).toEqual(0);
-        expect(parent.childElementCount).toEqual(0);
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(1);
+        const [player] = players;
+        expect(player.delay).toEqual(7500);
+        expect(player.duration).toEqual(700);
+        expect(player.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['color', 'red'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['color', 'green'],
+            ['offset', 1],
+          ]),
+        ]);
       });
 
-      it('should properly resolve animation event listeners when disabled', fakeAsync(() => {
-           @Component({
-             selector: 'if-cmp',
-             template: `
-              <div [@.disabled]="disableExp">
-                <div [@myAnimation]="exp" (@myAnimation.start)="startEvent=$event" (@myAnimation.done)="doneEvent=$event"></div>
-              </div>
-            `,
-             animations: [
-               trigger(
-                   'myAnimation',
-                   [
-                     transition(
-                         '* => 1, * => 2',
-                         [style({opacity: 0}), animate(9876, style({opacity: 1}))]),
-                   ]),
-             ]
-           })
-           class Cmp {
-             disableExp = false;
-             exp = '';
-             startEvent: AnimationEvent|undefined;
-             doneEvent: AnimationEvent|undefined;
-           }
-
-           TestBed.configureTestingModule({declarations: [Cmp]});
-
-           const fixture = TestBed.createComponent(Cmp);
-           const cmp = fixture.componentInstance;
-           cmp.disableExp = true;
-           fixture.detectChanges();
-           resetLog();
-           expect(cmp.startEvent).toBeFalsy();
-           expect(cmp.doneEvent).toBeFalsy();
-
-           cmp.exp = '1';
-           fixture.detectChanges();
-           flushMicrotasks();
-           expect(cmp.startEvent?.totalTime).toEqual(9876);
-           expect(cmp.startEvent?.disabled).toBeTruthy();
-           expect(cmp.doneEvent?.totalTime).toEqual(9876);
-           expect(cmp.doneEvent?.disabled).toBeTruthy();
-
-           cmp.exp = '2';
-           cmp.disableExp = false;
-           fixture.detectChanges();
-           flushMicrotasks();
-           expect(cmp.startEvent?.totalTime).toEqual(9876);
-           expect(cmp.startEvent?.disabled).toBeFalsy();
-           // the done event isn't fired because it's an actual animation
-         }));
-
-      it('should work when there are no animations on the component handling the disable/enable flag',
-         () => {
-           @Component({
-             selector: 'parent-cmp',
-             template: `
-              <div [@.disabled]="disableExp">
-                <child-cmp #child></child-cmp>
-              </div>
-                `
-           })
-           class ParentCmp {
-             @ViewChild('child') public child: ChildCmp|null = null;
-             disableExp = false;
-           }
-
-           @Component({
-             selector: 'child-cmp',
-             template: `
-                <div [@myAnimation]="exp"></div>
-                `,
-             animations: [trigger(
-                 'myAnimation', [transition(
-                                    '* => go, * => goAgain',
-                                    [style({opacity: 0}), animate('1s', style({opacity: 1}))])])]
-           })
-           class ChildCmp {
-             public exp = '';
-           }
-
-           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-
-           const fixture = TestBed.createComponent(ParentCmp);
-           const cmp = fixture.componentInstance;
-           cmp.disableExp = true;
-           fixture.detectChanges();
-           resetLog();
-
-           const child = cmp.child!;
-           child.exp = 'go';
-           fixture.detectChanges();
-
-           expect(getLog().length).toEqual(0);
-           resetLog();
-
-           cmp.disableExp = false;
-           child.exp = 'goAgain';
-           fixture.detectChanges();
-           expect(getLog().length).toEqual(1);
-         });
-
-      it('should treat the property as true when the expression is missing', () => {
+      it('should combine the delays specified in the animation and the useAnimation with that of the caller', () => {
+        const animationMetaData = animation(
+          [style({color: 'red'}), animate(567, style({color: 'green'}))],
+          {delay: 1000},
+        );
+
         @Component({
-          selector: 'parent-cmp',
+          selector: 'cmp',
+          template: `
+         <div @anim *ngIf="exp">
+         </div>
+       `,
           animations: [
-            trigger(
-                'myAnimation',
-                [
-                  transition(
-                      '* => go',
-                      [
-                        style({opacity: 0}),
-                        animate(500, style({opacity: 1})),
-                      ]),
-                ]),
+            trigger('anim', [
+              transition(':enter', useAnimation(animationMetaData, {delay: 34}), {delay: 200}),
+            ]),
           ],
-          template: `
-              <div @.disabled>
-                <div [@myAnimation]="exp"></div>
-              </div>
-                `
         })
         class Cmp {
-          exp = '';
+          exp: boolean = false;
         }
 
         TestBed.configureTestingModule({declarations: [Cmp]});
 
+        const engine = TestBed.inject(ɵAnimationEngine);
         const fixture = TestBed.createComponent(Cmp);
         const cmp = fixture.componentInstance;
-        fixture.detectChanges();
-        resetLog();
+        cmp.exp = true;
 
-        cmp.exp = 'go';
         fixture.detectChanges();
-        expect(getLog().length).toEqual(0);
-      });
+        engine.flush();
 
-      it('should respect parent/sub animations when the respective area in the DOM is disabled',
-         fakeAsync(() => {
-           @Component({
-             selector: 'parent-cmp',
-             animations: [
-               trigger(
-                   'parent',
-                   [
-                     transition(
-                         '* => empty',
-                         [
-                           style({opacity: 0}),
-                           query(
-                               '@child',
-                               [
-                                 animateChild(),
-                               ]),
-                           animate('1s', style({opacity: 1})),
-                         ]),
-                   ]),
-               trigger(
-                   'child',
-                   [
-                     transition(
-                         ':leave',
-                         [
-                           animate('1s', style({opacity: 0})),
-                         ]),
-                   ]),
-             ],
-             template: `
-              <div [@.disabled]="disableExp" #container>
-                <div [@parent]="exp" (@parent.done)="onDone($event)">
-                  <div class="item" *ngFor="let item of items" @child (@child.done)="onDone($event)"></div>
-                </div>
-              </div>
-                `
-           })
-           class Cmp {
-             @ViewChild('container') public container: any;
-
-             disableExp = false;
-             exp = '';
-             items: any[] = [];
-             doneLog: any[] = [];
-
-             onDone(event: any) {
-               this.doneLog.push(event);
-             }
-           }
-
-           TestBed.configureTestingModule({declarations: [Cmp]});
-           const engine = TestBed.inject(ɵAnimationEngine);
-           const fixture = TestBed.createComponent(Cmp);
-           const cmp = fixture.componentInstance;
-           cmp.disableExp = true;
-           cmp.items = [0, 1, 2, 3, 4];
-           fixture.detectChanges();
-           flushMicrotasks();
-
-           cmp.exp = 'empty';
-           cmp.items = [];
-           cmp.doneLog = [];
-           fixture.detectChanges();
-           flushMicrotasks();
-
-           const elms = cmp.container.nativeElement.querySelectorAll('.item');
-           expect(elms.length).toEqual(0);
-
-           expect(cmp.doneLog.length).toEqual(6);
-         }));
+        const players = getLog();
+        expect(players.length).toEqual(1);
+        const [player] = players;
+        expect(player.delay).toEqual(1234);
+        expect(player.duration).toEqual(567);
+        expect(player.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['color', 'red'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['color', 'green'],
+            ['offset', 1],
+          ]),
+        ]);
+      });
     });
-  });
 
-  describe('animation normalization', () => {
-    it('should convert hyphenated properties to camelcase by default', () => {
+    it('should combine multiple errors together into one exception when an animation fails to be built', () => {
       @Component({
-        selector: 'cmp',
+        selector: 'if-cmp',
         template: `
-               <div [@myAnimation]="exp"></div>
-             `,
-        animations: [
-          trigger(
-              'myAnimation',
-              [
-                transition(
-                    '* => go',
-                    [
-                      style({'background-color': 'red', height: '100px', fontSize: '100px'}),
-                      animate(
-                          '1s',
-                          style({'background-color': 'blue', height: '200px', fontSize: '200px'})),
-                    ]),
-              ]),
-        ]
-      })
-      class Cmp {
-        exp: any = false;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-      cmp.exp = 'go';
-      fixture.detectChanges();
-
-      const players = getLog();
-      expect(players.length).toEqual(1);
-      expect(players[0].keyframes).toEqual([
-        new Map<string, string|number>([
-          ['backgroundColor', 'red'], ['height', '100px'], ['fontSize', '100px'], ['offset', 0]
-        ]),
-        new Map<string, string|number>([
-          ['backgroundColor', 'blue'], ['height', '200px'], ['fontSize', '200px'], ['offset', 1]
-        ]),
-      ]);
-    });
-
-    it('should convert hyphenated properties to camelCase by default that are auto/pre style properties',
-       () => {
-         @Component({
-           selector: 'cmp',
-           template: `
-               <div [@myAnimation]="exp"></div>
-             `,
-           animations: [
-             trigger(
-                 'myAnimation',
-                 [
-                   transition(
-                       '* => go',
-                       [
-                         style({'background-color': AUTO_STYLE, 'font-size': '100px'}),
-                         animate('1s', style({'background-color': 'blue', 'font-size': PRE_STYLE})),
-                       ]),
-                 ]),
-           ]
-         })
-         class Cmp {
-           exp: any = false;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         cmp.exp = 'go';
-         fixture.detectChanges();
-
-         const players = getLog();
-         expect(players.length).toEqual(1);
-         expect(players[0].keyframes).toEqual([
-           new Map<string, string|number>(
-               [['backgroundColor', AUTO_STYLE], ['fontSize', '100px'], ['offset', 0]]),
-           new Map<string, string|number>(
-               [['backgroundColor', 'blue'], ['fontSize', PRE_STYLE], ['offset', 1]]),
-         ]);
-       });
-  });
-
-  it('should throw neither state() or transition() are used inside of trigger()', () => {
-    @Component({
-      selector: 'if-cmp',
-      template: `
-          <div [@myAnimation]="exp"></div>
+          <div [@foo]="fooExp" [@bar]="barExp"></div>
         `,
-      animations: [trigger('myAnimation', [animate(1000, style({width: '100px'}))])]
-    })
-    class Cmp {
-      exp: any = false;
-    }
-
-    TestBed.configureTestingModule({declarations: [Cmp]});
-
-    expect(() => {
-      TestBed.createComponent(Cmp);
-    })
-        .toThrowError(
-            /only state\(\) and transition\(\) definitions can sit inside of a trigger\(\)/);
-  });
-
-  describe('animation and useAnimation functions', () => {
-    it('should apply the delay specified in the animation', () => {
-      const animationMetaData = animation(
-          [
-            style({color: 'red'}),
-            animate(1000, style({color: 'green'})),
-          ],
-          {delay: 3000});
-
-      @Component({
-        selector: 'cmp',
-        template: `
-         <div @anim *ngIf="exp">
-         </div>
-       `,
         animations: [
-          trigger('anim', [transition(
-                              ':enter',
-                              useAnimation(animationMetaData),
-                              )]),
-        ]
+          trigger('foo', [
+            transition(':enter', []),
+            transition('* => *', [query('foo', animate(1000, style({background: 'red'})))]),
+          ]),
+          trigger('bar', [
+            transition(':enter', []),
+            transition('* => *', [query('bar', animate(1000, style({background: 'blue'})))]),
+          ]),
+        ],
       })
       class Cmp {
-        exp: boolean = false;
+        fooExp: any = false;
+        barExp: any = false;
       }
 
       TestBed.configureTestingModule({declarations: [Cmp]});
@@ -3896,86 +4251,84 @@ describe('animation tests', function() {
       const engine = TestBed.inject(ɵAnimationEngine);
       const fixture = TestBed.createComponent(Cmp);
       const cmp = fixture.componentInstance;
-      cmp.exp = true;
-
       fixture.detectChanges();
-      engine.flush();
 
-      const players = getLog();
-      expect(players.length).toEqual(1);
-      const [player] = players;
-      expect(player.delay).toEqual(3000);
-      expect(player.duration).toEqual(1000);
-      expect(player.keyframes).toEqual([
-        new Map<string, string|number>([['color', 'red'], ['offset', 0]]),
-        new Map<string, string|number>([['color', 'green'], ['offset', 1]]),
-      ]);
-    });
+      cmp.fooExp = 'go';
+      cmp.barExp = 'go';
 
-    it('should apply the delay specified in the animation using params', () => {
-      const animationMetaData = animation(
-          [
-            style({color: 'red'}),
-            animate(500, style({color: 'green'})),
-          ],
-          {delay: '{{animationDelay}}ms', params: {animationDelay: 5500}});
+      let errorMsg: string = '';
+      try {
+        fixture.detectChanges();
+      } catch (e) {
+        errorMsg = (e as Error).message;
+      }
+
+      expect(errorMsg).toMatch(/@foo has failed due to:/);
+      expect(errorMsg).toMatch(/`query\("foo"\)` returned zero elements/);
+      expect(errorMsg).toMatch(/@bar has failed due to:/);
+      expect(errorMsg).toMatch(/`query\("bar"\)` returned zero elements/);
+    });
 
+    it('should not throw an error if styles overlap in separate transitions', () => {
       @Component({
-        selector: 'cmp',
+        selector: 'if-cmp',
         template: `
-         <div @anim *ngIf="exp">
-         </div>
-       `,
+          <div [@myAnimation]="exp"></div>
+        `,
         animations: [
-          trigger('anim', [transition(
-                              ':enter',
-                              useAnimation(animationMetaData),
-                              )]),
-        ]
+          trigger('myAnimation', [
+            transition('void => *', [style({opacity: 0}), animate('0.5s 1s', style({opacity: 1}))]),
+            transition('* => void', [
+              animate(1000, style({height: 0})),
+              animate(1000, style({opacity: 0})),
+            ]),
+          ]),
+        ],
       })
       class Cmp {
-        exp: boolean = false;
+        exp: any = false;
       }
 
       TestBed.configureTestingModule({declarations: [Cmp]});
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-      cmp.exp = true;
-
-      fixture.detectChanges();
-      engine.flush();
-
-      const players = getLog();
-      expect(players.length).toEqual(1);
-      const [player] = players;
-      expect(player.delay).toEqual(5500);
-      expect(player.duration).toEqual(500);
-      expect(player.keyframes).toEqual([
-        new Map<string, string|number>([['color', 'red'], ['offset', 0]]),
-        new Map<string, string|number>([['color', 'green'], ['offset', 1]]),
-      ]);
+      expect(() => {
+        TestBed.createComponent(Cmp);
+      }).not.toThrowError();
     });
 
-    it('should apply the delay specified in the useAnimation call', () => {
-      const animationMetaData = animation([
-        style({color: 'red'}),
-        animate(550, style({color: 'green'})),
-      ]);
-
+    it("should add the transition provided delay to all the transition's timelines", () => {
       @Component({
         selector: 'cmp',
         template: `
-         <div @anim *ngIf="exp">
-         </div>
-       `,
+       <div @parent *ngIf="exp">
+         <div @child *ngIf="exp"></div>
+       </div>
+     `,
         animations: [
-          trigger('anim', [transition(
-                              ':enter',
-                              useAnimation(animationMetaData, {delay: 1500}),
-                              )]),
-        ]
+          trigger('parent', [
+            transition(
+              ':enter',
+              [
+                style({background: 'red'}),
+                group(
+                  [
+                    animate('1s 3s ease', style({background: 'green'})),
+                    query('@child', animateChild()),
+                  ],
+                  {delay: 111},
+                ),
+              ],
+              {delay: '2s'},
+            ),
+          ]),
+          trigger('child', [
+            transition(
+              ':enter',
+              [style({color: 'white'}), animate('2s 3s ease', style({color: 'black'}))],
+              {delay: 222},
+            ),
+          ]),
+        ],
       })
       class Cmp {
         exp: boolean = false;
@@ -3992,39 +4345,38 @@ describe('animation tests', function() {
       engine.flush();
 
       const players = getLog();
-      expect(players.length).toEqual(1);
-      const [player] = players;
-      expect(player.delay).toEqual(1500);
-      expect(player.duration).toEqual(550);
-      expect(player.keyframes).toEqual([
-        new Map<string, string|number>([['color', 'red'], ['offset', 0]]),
-        new Map<string, string|number>([['color', 'green'], ['offset', 1]]),
-      ]);
+      expect(players.length).toEqual(4);
+      // players:
+      //  - scp (skipped child player): player for the child animation
+      //  - pp1 (parent player 1): player for parent animation (from background red to red)
+      //  - pp2 (parent player 2): player for parent animation (from background red to green)
+      //  - pcp (parent child player):
+      //     player for child animation executed by parent via query and animateChild
+      const [scp, pp1, pp2, pcp] = players;
+      expect(scp.delay).toEqual(222);
+      expect(pp1.delay).toEqual(2000);
+      expect(pp2.delay).toEqual(2111); // 2000 + 111
+      expect(pcp.delay).toEqual(0); // all the delays are included in the child animation
+      expect(pcp.duration).toEqual(7333); // 2s + 3s + 2000 + 111 + 222
     });
 
-    it('should apply the delay specified in the useAnimation call using params', () => {
-      const animationMetaData = animation(
-          [
-            style({color: 'red'}),
-            animate(700, style({color: 'green'})),
-          ],
-      );
-
+    it('should keep (transition from/to) styles defined in different timelines', () => {
       @Component({
         selector: 'cmp',
-        template: `
-         <div @anim *ngIf="exp">
-         </div>
-       `,
+        template: '<div @animation *ngIf="exp"></div>',
         animations: [
-          trigger('anim', [transition(
-                              ':enter',
-                              useAnimation(animationMetaData, {
-                                delay: '{{useAnimationDelay}}ms',
-                                params: {useAnimationDelay: 7500}
-                              }),
-                              )]),
-        ]
+          trigger('animation', [
+            transition(':enter', [
+              group([
+                style({opacity: 0, color: 'red'}),
+                // Note: the objective of this test is to make sure the animation
+                // transitions from opacity 0 and color red to opacity 1 and color blue,
+                // even though the two styles are defined in different timelines
+                animate(500, style({opacity: 1, color: 'blue'})),
+              ]),
+            ]),
+          ]),
+        ],
       })
       class Cmp {
         exp: boolean = false;
@@ -4042,422 +4394,193 @@ describe('animation tests', function() {
 
       const players = getLog();
       expect(players.length).toEqual(1);
+
       const [player] = players;
-      expect(player.delay).toEqual(7500);
-      expect(player.duration).toEqual(700);
+
       expect(player.keyframes).toEqual([
-        new Map<string, string|number>([['color', 'red'], ['offset', 0]]),
-        new Map<string, string|number>([['color', 'green'], ['offset', 1]]),
+        new Map<string, string | number>([
+          ['opacity', '0'],
+          ['color', 'red'],
+          ['offset', 0],
+        ]),
+        new Map<string, string | number>([
+          ['opacity', '1'],
+          ['color', 'blue'],
+          ['offset', 1],
+        ]),
       ]);
     });
 
-    it('should combine the delays specified in the animation and the useAnimation with that of the caller',
-       () => {
-         const animationMetaData = animation(
-             [
-               style({color: 'red'}),
-               animate(567, style({color: 'green'})),
-             ],
-             {delay: 1000});
-
-         @Component({
-           selector: 'cmp',
-           template: `
-         <div @anim *ngIf="exp">
-         </div>
-       `,
-           animations: [
-             trigger('anim', [transition(
-                                 ':enter', useAnimation(animationMetaData, {delay: 34}),
-                                 {delay: 200})]),
-           ]
-         })
-         class Cmp {
-           exp: boolean = false;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         cmp.exp = true;
-
-         fixture.detectChanges();
-         engine.flush();
-
-         const players = getLog();
-         expect(players.length).toEqual(1);
-         const [player] = players;
-         expect(player.delay).toEqual(1234);
-         expect(player.duration).toEqual(567);
-         expect(player.keyframes).toEqual([
-           new Map<string, string|number>([['color', 'red'], ['offset', 0]]),
-           new Map<string, string|number>([['color', 'green'], ['offset', 1]]),
-         ]);
-       });
-  });
-
-  it('should combine multiple errors together into one exception when an animation fails to be built',
-     () => {
-       @Component({
-         selector: 'if-cmp',
-         template: `
-          <div [@foo]="fooExp" [@bar]="barExp"></div>
-        `,
-         animations: [
-           trigger(
-               'foo',
-               [
-                 transition(':enter', []),
-                 transition(
-                     '* => *',
-                     [
-                       query('foo', animate(1000, style({background: 'red'}))),
-                     ]),
-               ]),
-           trigger(
-               'bar',
-               [
-                 transition(':enter', []),
-                 transition(
-                     '* => *',
-                     [
-                       query('bar', animate(1000, style({background: 'blue'}))),
-                     ]),
-               ]),
-         ]
-       })
-       class Cmp {
-         fooExp: any = false;
-         barExp: any = false;
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp]});
-
-       const engine = TestBed.inject(ɵAnimationEngine);
-       const fixture = TestBed.createComponent(Cmp);
-       const cmp = fixture.componentInstance;
-       fixture.detectChanges();
-
-       cmp.fooExp = 'go';
-       cmp.barExp = 'go';
-
-       let errorMsg: string = '';
-       try {
-         fixture.detectChanges();
-       } catch (e) {
-         errorMsg = (e as Error).message;
-       }
-
-       expect(errorMsg).toMatch(/@foo has failed due to:/);
-       expect(errorMsg).toMatch(/`query\("foo"\)` returned zero elements/);
-       expect(errorMsg).toMatch(/@bar has failed due to:/);
-       expect(errorMsg).toMatch(/`query\("bar"\)` returned zero elements/);
-     });
-
-  it('should not throw an error if styles overlap in separate transitions', () => {
-    @Component({
-      selector: 'if-cmp',
-      template: `
-          <div [@myAnimation]="exp"></div>
-        `,
-      animations: [
-        trigger(
-            'myAnimation',
-            [
-              transition(
-                  'void => *',
-                  [
-                    style({opacity: 0}),
-                    animate('0.5s 1s', style({opacity: 1})),
-                  ]),
-              transition(
-                  '* => void',
-                  [animate(1000, style({height: 0})), animate(1000, style({opacity: 0}))]),
-            ]),
-      ]
-    })
-    class Cmp {
-      exp: any = false;
-    }
-
-    TestBed.configureTestingModule({declarations: [Cmp]});
+    describe('errors for not using the animation module', () => {
+      beforeEach(() => {
+        TestBed.configureTestingModule({
+          providers: [{provide: RendererFactory2, useExisting: ɵDomRendererFactory2}],
+        });
+      });
 
-    expect(() => {
-      TestBed.createComponent(Cmp);
-    }).not.toThrowError();
-  });
+      function syntheticPropError(name: string, nameKind: string) {
+        return `NG05105: Unexpected synthetic ${nameKind} ${name} found. Please make sure that:
+  - Either \`BrowserAnimationsModule\` or \`NoopAnimationsModule\` are imported in your application.
+  - There is corresponding configuration for the animation named \`${name}\` defined in the \`animations\` field of the \`@Component\` decorator (see https://angular.io/api/core/Component#animations).`;
+      }
 
-  it('should add the transition provided delay to all the transition\'s timelines', () => {
-    @Component({
-      selector: 'cmp',
-      template: `
-       <div @parent *ngIf="exp">
-         <div @child *ngIf="exp"></div>
-       </div>
-     `,
-      animations: [
-        trigger('parent', [transition(
-                              ':enter',
-                              [
-                                style({background: 'red'}),
-                                group(
-                                    [
-                                      animate('1s 3s ease', style({background: 'green'})),
-                                      query('@child', animateChild())
-                                    ],
-                                    {delay: 111}),
-                              ],
-                              {delay: '2s'})]),
-        trigger('child', [transition(
-                             ':enter',
-                             [
-                               style({color: 'white'}),
-                               animate('2s 3s ease', style({color: 'black'})),
-                             ],
-                             {delay: 222})]),
-      ]
-    })
-    class Cmp {
-      exp: boolean = false;
-    }
+      describe('when modules are missing', () => {
+        it('should throw when using an @prop binding without the animation module', () => {
+          @Component({template: `<div [@myAnimation]="true"></div>`})
+          class Cmp {}
 
-    TestBed.configureTestingModule({declarations: [Cmp]});
-
-    const engine = TestBed.inject(ɵAnimationEngine);
-    const fixture = TestBed.createComponent(Cmp);
-    const cmp = fixture.componentInstance;
-    cmp.exp = true;
-
-    fixture.detectChanges();
-    engine.flush();
-
-    const players = getLog();
-    expect(players.length).toEqual(4);
-    // players:
-    //  - scp (skipped child player): player for the child animation
-    //  - pp1 (parent player 1): player for parent animation (from background red to red)
-    //  - pp2 (parent player 2): player for parent animation (from background red to green)
-    //  - pcp (parent child player):
-    //     player for child animation executed by parent via query and animateChild
-    const [scp, pp1, pp2, pcp] = players;
-    expect(scp.delay).toEqual(222);
-    expect(pp1.delay).toEqual(2000);
-    expect(pp2.delay).toEqual(2111);     // 2000 + 111
-    expect(pcp.delay).toEqual(0);        // all the delays are included in the child animation
-    expect(pcp.duration).toEqual(7333);  // 2s + 3s + 2000 + 111 + 222
-  });
+          TestBed.configureTestingModule({declarations: [Cmp]});
+          const comp = TestBed.createComponent(Cmp);
+          expect(() => comp.detectChanges()).toThrowError(
+            syntheticPropError('@myAnimation', 'property'),
+          );
+        });
 
-  it('should keep (transition from/to) styles defined in different timelines', () => {
-    @Component({
-      selector: 'cmp',
-      template: '<div @animation *ngIf="exp"></div>',
-      animations: [trigger(
-          'animation',
-          [transition(':enter', [group([
-                        style({opacity: 0, color: 'red'}),
-                        // Note: the objective of this test is to make sure the animation
-                        // transitions from opacity 0 and color red to opacity 1 and color blue,
-                        // even though the two styles are defined in different timelines
-                        animate(500, style({opacity: 1, color: 'blue'})),
-                      ])])])]
-    })
-    class Cmp {
-      exp: boolean = false;
-    }
+        it('should throw when using an @prop listener without the animation module', () => {
+          @Component({template: `<div (@myAnimation.start)="a = true"></div>`})
+          class Cmp {
+            a = false;
+          }
 
-    TestBed.configureTestingModule({declarations: [Cmp]});
+          TestBed.configureTestingModule({declarations: [Cmp]});
 
-    const engine = TestBed.inject(ɵAnimationEngine);
-    const fixture = TestBed.createComponent(Cmp);
-    const cmp = fixture.componentInstance;
-    cmp.exp = true;
+          expect(() => TestBed.createComponent(Cmp)).toThrowError(
+            syntheticPropError('@myAnimation.start', 'listener'),
+          );
+        });
+      });
 
-    fixture.detectChanges();
-    engine.flush();
+      describe('when modules are present, but animations are missing', () => {
+        it('should throw when using an @prop property, BrowserAnimationModule is imported, but there is no animation rule', () => {
+          @Component({template: `<div [@myAnimation]="true"></div>`})
+          class Cmp {}
 
-    const players = getLog();
-    expect(players.length).toEqual(1);
+          TestBed.configureTestingModule({declarations: [Cmp], imports: [BrowserAnimationsModule]});
+          const comp = TestBed.createComponent(Cmp);
+          expect(() => comp.detectChanges()).toThrowError(
+            syntheticPropError('@myAnimation', 'property'),
+          );
+        });
 
-    const [player] = players;
+        it('should throw when using an @prop listener, BrowserAnimationModule is imported, but there is no animation rule', () => {
+          @Component({template: `<div (@myAnimation.start)="true"></div>`})
+          class Cmp {}
 
-    expect(player.keyframes).toEqual([
-      new Map<string, string|number>([['opacity', '0'], ['color', 'red'], ['offset', 0]]),
-      new Map<string, string|number>([['opacity', '1'], ['color', 'blue'], ['offset', 1]]),
-    ]);
-  });
+          TestBed.configureTestingModule({declarations: [Cmp], imports: [BrowserAnimationsModule]});
 
-  describe('errors for not using the animation module', () => {
-    beforeEach(() => {
-      TestBed.configureTestingModule({
-        providers: [{provide: RendererFactory2, useExisting: ɵDomRendererFactory2}],
+          expect(() => TestBed.createComponent(Cmp)).toThrowError(
+            syntheticPropError('@myAnimation.start', 'listener'),
+          );
+        });
       });
     });
 
-
-    function syntheticPropError(name: string, nameKind: string) {
-      return `NG05105: Unexpected synthetic ${nameKind} ${name} found. Please make sure that:
-  - Either \`BrowserAnimationsModule\` or \`NoopAnimationsModule\` are imported in your application.
-  - There is corresponding configuration for the animation named \`${
-          name}\` defined in the \`animations\` field of the \`@Component\` decorator (see https://angular.io/api/core/Component#animations).`;
-    }
-
-    describe('when modules are missing', () => {
-      it('should throw when using an @prop binding without the animation module', () => {
-        @Component({template: `<div [@myAnimation]="true"></div>`})
+    describe('non-animatable css props', () => {
+      function buildAndAnimateSimpleTestComponent(triggerAnimationData: AnimationMetadata[]) {
+        @Component({
+          selector: 'cmp',
+          template: `
+          <div *ngIf="exp" [@myAnimation]="exp">
+            <p *ngIf="exp"></p>
+          </div>
+        `,
+          animations: [trigger('myAnimation', [transition('void => *', triggerAnimationData)])],
+        })
         class Cmp {
+          exp: any = false;
         }
 
         TestBed.configureTestingModule({declarations: [Cmp]});
-        const comp = TestBed.createComponent(Cmp);
-        expect(() => comp.detectChanges())
-            .toThrowError(syntheticPropError('@myAnimation', 'property'));
-      });
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = true;
+        fixture.detectChanges();
+        engine.flush();
+      }
 
-      it('should throw when using an @prop listener without the animation module', () => {
-        @Component({template: `<div (@myAnimation.start)="a = true"></div>`})
-        class Cmp {
-          a = false;
-        }
+      it('should show a warning if the animation tries to transition a non-animatable property', () => {
+        const spyWarn = spyOn(console, 'warn');
+        buildAndAnimateSimpleTestComponent([
+          style({display: 'block'}),
+          animate(500, style({display: 'inline'})),
+        ]);
+        expect(spyWarn).toHaveBeenCalledOnceWith(
+          'Warning: The animation trigger "myAnimation" is attempting to animate the following' +
+            ' not animatable properties: display' +
+            '\n' +
+            '(to check the list of all animatable properties visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)',
+        );
+      });
 
-        TestBed.configureTestingModule({declarations: [Cmp]});
+      it('should not show a warning if the animation tries to transition an animatable property', () => {
+        const spyWarn = spyOn(console, 'warn');
+        buildAndAnimateSimpleTestComponent([
+          style({fontSize: 5}),
+          animate(500, style({fontSize: 15})),
+        ]);
+        expect(spyWarn).not.toHaveBeenCalled();
+      });
 
-        expect(() => TestBed.createComponent(Cmp))
-            .toThrowError(syntheticPropError('@myAnimation.start', 'listener'));
+      it('should show a single warning if the animation tries to transition multiple non-animatable properties', () => {
+        const spyWarn = spyOn(console, 'warn');
+        buildAndAnimateSimpleTestComponent([
+          style({display: 'block', fontStyle: 'normal'}),
+          animate(500, style({display: 'inline', fontStyle: 'italic'})),
+        ]);
+        expect(spyWarn).toHaveBeenCalledOnceWith(
+          'Warning: The animation trigger "myAnimation" is attempting to animate the following' +
+            ' not animatable properties: display, fontStyle' +
+            '\n' +
+            '(to check the list of all animatable properties visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)',
+        );
       });
-    });
 
-    describe('when modules are present, but animations are missing', () => {
-      it('should throw when using an @prop property, BrowserAnimationModule is imported, but there is no animation rule',
-         () => {
-           @Component({template: `<div [@myAnimation]="true"></div>`})
-           class Cmp {
-           }
-
-           TestBed.configureTestingModule(
-               {declarations: [Cmp], imports: [BrowserAnimationsModule]});
-           const comp = TestBed.createComponent(Cmp);
-           expect(() => comp.detectChanges())
-               .toThrowError(syntheticPropError('@myAnimation', 'property'));
-         });
-
-      it('should throw when using an @prop listener, BrowserAnimationModule is imported, but there is no animation rule',
-         () => {
-           @Component({template: `<div (@myAnimation.start)="true"></div>`})
-           class Cmp {
-           }
-
-           TestBed.configureTestingModule(
-               {declarations: [Cmp], imports: [BrowserAnimationsModule]});
-
-           expect(() => TestBed.createComponent(Cmp))
-               .toThrowError(syntheticPropError('@myAnimation.start', 'listener'));
-         });
-    });
-  });
+      it('should only warn on non-animatable properties if the animation tries to transition both animate and non-animatable properties', () => {
+        const spyWarn = spyOn(console, 'warn');
+        buildAndAnimateSimpleTestComponent([
+          style({'flex-direction': 'column', fontSize: 5}),
+          animate(500, style({'flex-direction': 'row', fontSize: 10})),
+        ]);
+        expect(spyWarn).toHaveBeenCalledOnceWith(
+          'Warning: The animation trigger "myAnimation" is attempting to animate the following' +
+            ' not animatable properties: flex-direction' +
+            '\n' +
+            '(to check the list of all animatable properties visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)',
+        );
+      });
 
-  describe('non-animatable css props', () => {
-    function buildAndAnimateSimpleTestComponent(triggerAnimationData: AnimationMetadata[]) {
-      @Component({
-        selector: 'cmp',
-        template: `
-          <div *ngIf="exp" [@myAnimation]="exp">
-            <p *ngIf="exp"></p>
-          </div>
-        `,
-        animations: [trigger('myAnimation', [transition('void => *', triggerAnimationData)])]
-      })
-      class Cmp {
-        exp: any = false;
-      }
+      it('should not show a warning if the animation uses but does not animate a non-animatable property', () => {
+        const spyWarn = spyOn(console, 'warn');
+        buildAndAnimateSimpleTestComponent([transition('void => *', [style({display: 'block'})])]);
+        expect(spyWarn).not.toHaveBeenCalled();
+      });
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-      cmp.exp = true;
-      fixture.detectChanges();
-      engine.flush();
-    }
+      it('should not show a warning if the same non-animatable property is used (with different values) on different elements in the same transition', () => {
+        const spyWarn = spyOn(console, 'warn');
+        buildAndAnimateSimpleTestComponent([
+          style({position: 'relative'}),
+          query(':enter', [
+            style({
+              position: 'absolute',
+            }),
+          ]),
+        ]);
+        expect(spyWarn).not.toHaveBeenCalled();
+      });
 
-    it('should show a warning if the animation tries to transition a non-animatable property', () => {
-      const spyWarn = spyOn(console, 'warn');
-      buildAndAnimateSimpleTestComponent(
-          [style({display: 'block'}), animate(500, style({display: 'inline'}))]);
-      expect(spyWarn).toHaveBeenCalledOnceWith(
-          'Warning: The animation trigger "myAnimation" is attempting to animate the following' +
-          ' not animatable properties: display' +
-          '\n' +
-          '(to check the list of all animatable properties visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)');
+      it('should not show a warning if a different easing function is used in different steps', () => {
+        const spyWarn = spyOn(console, 'warn');
+        buildAndAnimateSimpleTestComponent([
+          sequence([
+            animate('1s ease-in', style({background: 'red'})),
+            animate('1s ease-out', style({background: 'green'})),
+          ]),
+        ]);
+        expect(spyWarn).not.toHaveBeenCalled();
+      });
     });
-
-    it('should not show a warning if the animation tries to transition an animatable property',
-       () => {
-         const spyWarn = spyOn(console, 'warn');
-         buildAndAnimateSimpleTestComponent(
-             [style({fontSize: 5}), animate(500, style({fontSize: 15}))]);
-         expect(spyWarn).not.toHaveBeenCalled();
-       });
-
-    it('should show a single warning if the animation tries to transition multiple non-animatable properties',
-       () => {
-         const spyWarn = spyOn(console, 'warn');
-         buildAndAnimateSimpleTestComponent([
-           style({display: 'block', fontStyle: 'normal'}),
-           animate(500, style({display: 'inline', fontStyle: 'italic'}))
-         ]);
-         expect(spyWarn).toHaveBeenCalledOnceWith(
-             'Warning: The animation trigger "myAnimation" is attempting to animate the following' +
-             ' not animatable properties: display, fontStyle' +
-             '\n' +
-             '(to check the list of all animatable properties visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)');
-       });
-
-    it('should only warn on non-animatable properties if the animation tries to transition both animate and non-animatable properties',
-       () => {
-         const spyWarn = spyOn(console, 'warn');
-         buildAndAnimateSimpleTestComponent([
-           style({'flex-direction': 'column', fontSize: 5}),
-           animate(500, style({'flex-direction': 'row', fontSize: 10}))
-         ]);
-         expect(spyWarn).toHaveBeenCalledOnceWith(
-             'Warning: The animation trigger "myAnimation" is attempting to animate the following' +
-             ' not animatable properties: flex-direction' +
-             '\n' +
-             '(to check the list of all animatable properties visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)');
-       });
-
-    it('should not show a warning if the animation uses but does not animate a non-animatable property',
-       () => {
-         const spyWarn = spyOn(console, 'warn');
-         buildAndAnimateSimpleTestComponent([transition('void => *', [style({display: 'block'})])]);
-         expect(spyWarn).not.toHaveBeenCalled();
-       });
-
-    it('should not show a warning if the same non-animatable property is used (with different values) on different elements in the same transition',
-       () => {
-         const spyWarn = spyOn(console, 'warn');
-         buildAndAnimateSimpleTestComponent([
-           style({position: 'relative'}),
-           query(':enter', [style({
-                   position: 'absolute',
-                 })]),
-         ]);
-         expect(spyWarn).not.toHaveBeenCalled();
-       });
-
-    it('should not show a warning if a different easing function is used in different steps',
-       () => {
-         const spyWarn = spyOn(console, 'warn');
-         buildAndAnimateSimpleTestComponent([sequence([
-           animate('1s ease-in', style({background: 'red'})),
-           animate('1s ease-out', style({background: 'green'})),
-         ])]);
-         expect(spyWarn).not.toHaveBeenCalled();
-       });
   });
-});
 })();
 
 function assertHasParent(element: any, yes: boolean) {
diff --git a/packages/core/test/animation/animation_query_integration_spec.ts b/packages/core/test/animation/animation_query_integration_spec.ts
index 6913cb5f585f2..324443a7b237d 100644
--- a/packages/core/test/animation/animation_query_integration_spec.ts
+++ b/packages/core/test/animation/animation_query_integration_spec.ts
@@ -5,8 +5,26 @@
  * 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
  */
-import {animate, animateChild, AnimationPlayer, AUTO_STYLE, group, query, sequence, stagger, state, style, transition, trigger, ɵAnimationGroupPlayer as AnimationGroupPlayer} from '@angular/animations';
-import {AnimationDriver, ɵAnimationEngine, ɵnormalizeKeyframes as normalizeKeyframes} from '@angular/animations/browser';
+import {
+  animate,
+  animateChild,
+  AnimationPlayer,
+  AUTO_STYLE,
+  group,
+  query,
+  sequence,
+  stagger,
+  state,
+  style,
+  transition,
+  trigger,
+  ɵAnimationGroupPlayer as AnimationGroupPlayer,
+} from '@angular/animations';
+import {
+  AnimationDriver,
+  ɵAnimationEngine,
+  ɵnormalizeKeyframes as normalizeKeyframes,
+} from '@angular/animations/browser';
 import {TransitionAnimationPlayer} from '@angular/animations/browser/src/render/transition_animation_engine';
 import {ENTER_CLASSNAME, LEAVE_CLASSNAME} from '@angular/animations/browser/src/util';
 import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing';
@@ -17,32 +35,32 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 import {HostListener} from '../../src/metadata/directives';
 
-(function() {
-// these tests are only meant to be run within the DOM (for now)
-if (isNode) return;
+(function () {
+  // these tests are only meant to be run within the DOM (for now)
+  if (isNode) return;
 
-describe('animation query tests', function() {
-  function getLog(): MockAnimationPlayer[] {
-    return MockAnimationDriver.log as MockAnimationPlayer[];
-  }
+  describe('animation query tests', function () {
+    function getLog(): MockAnimationPlayer[] {
+      return MockAnimationDriver.log as MockAnimationPlayer[];
+    }
 
-  function resetLog() {
-    MockAnimationDriver.log = [];
-  }
+    function resetLog() {
+      MockAnimationDriver.log = [];
+    }
 
-  beforeEach(() => {
-    resetLog();
-    TestBed.configureTestingModule({
-      providers: [{provide: AnimationDriver, useClass: MockAnimationDriver}],
-      imports: [BrowserAnimationsModule, CommonModule]
+    beforeEach(() => {
+      resetLog();
+      TestBed.configureTestingModule({
+        providers: [{provide: AnimationDriver, useClass: MockAnimationDriver}],
+        imports: [BrowserAnimationsModule, CommonModule],
+      });
     });
-  });
 
-  describe('query()', () => {
-    it('should be able to query all elements that contain animation triggers via @*', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
+    describe('query()', () => {
+      it('should be able to query all elements that contain animation triggers via @*', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div [@parent]="exp0">
               <div class="a" [@a]="exp1"></div>
               <div class="b" [@b]="exp2"></div>
@@ -51,71 +69,53 @@ describe('animation query tests', function() {
               </section>
             </div>
           `,
-        animations: [
-          trigger(
-              'parent',
-              [
-                transition(
-                    '* => go',
-                    [
-                      query(
-                          '@*',
-                          [
-                            style({backgroundColor: 'blue'}),
-                            animate(1000, style({backgroundColor: 'red'})),
-                          ]),
-                    ]),
-              ]),
-          trigger(
-              'a',
-              [
-                transition('* => 1', [animate(1000, style({opacity: 0}))]),
-              ]),
-          trigger(
-              'b',
-              [
-                transition(
-                    '* => 1',
-                    [
-                      animate(1000, style({opacity: 0})),
-                      query('.b-inner', [animate(1000, style({opacity: 0}))]),
-                    ]),
+          animations: [
+            trigger('parent', [
+              transition('* => go', [
+                query('@*', [
+                  style({backgroundColor: 'blue'}),
+                  animate(1000, style({backgroundColor: 'red'})),
+                ]),
               ]),
-          trigger(
-              'c',
-              [
-                transition('* => 1', [animate(1000, style({opacity: 0}))]),
+            ]),
+            trigger('a', [transition('* => 1', [animate(1000, style({opacity: 0}))])]),
+            trigger('b', [
+              transition('* => 1', [
+                animate(1000, style({opacity: 0})),
+                query('.b-inner', [animate(1000, style({opacity: 0}))]),
               ]),
-        ]
-      })
-      class Cmp {
-        public exp0: any;
-        public exp1: any;
-        public exp2: any;
-      }
+            ]),
+            trigger('c', [transition('* => 1', [animate(1000, style({opacity: 0}))])]),
+          ],
+        })
+        class Cmp {
+          public exp0: any;
+          public exp1: any;
+          public exp2: any;
+        }
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-      cmp.exp0 = 'go';
-      fixture.detectChanges();
+        cmp.exp0 = 'go';
+        fixture.detectChanges();
 
-      let players = getLog();
-      expect(players.length).toEqual(3);  // a,b,c
-      resetLog();
+        let players = getLog();
+        expect(players.length).toEqual(3); // a,b,c
+        resetLog();
 
-      const [p1, p2, p3] = players;
-      expect(p1.element.classList.contains('a')).toBeTruthy();
-      expect(p2.element.classList.contains('b')).toBeTruthy();
-      expect(p3.element.classList.contains('c')).toBeTruthy();
-    });
+        const [p1, p2, p3] = players;
+        expect(p1.element.classList.contains('a')).toBeTruthy();
+        expect(p2.element.classList.contains('b')).toBeTruthy();
+        expect(p3.element.classList.contains('c')).toBeTruthy();
+      });
 
-    it('should be able to query currently animating elements via :animating', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
+      it('should be able to query currently animating elements via :animating', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div [@parent]="exp0">
               <div class="a" [@a]="exp1"></div>
               <div class="b" [@b]="exp2">
@@ -124,91 +124,79 @@ describe('animation query tests', function() {
               <div class="c" [@c]="exp3"></div>
             </div>
           `,
-        animations: [
-          trigger(
-              'parent',
-              [
-                transition(
-                    '* => go',
-                    [
-                      query(
-                          ':animating',
-                          [
-                            style({backgroundColor: 'blue'}),
-                            animate(1000, style({backgroundColor: 'red'})),
-                          ]),
-                    ]),
-              ]),
-          trigger(
-              'a',
-              [
-                transition('* => 1', [animate(1000, style({opacity: 0}))]),
-              ]),
-          trigger(
-              'b',
-              [
-                transition(
-                    '* => 1',
-                    [
-                      animate(1000, style({opacity: 0})),
-                      query('.b-inner', [animate(1000, style({opacity: 0}))]),
-                    ]),
+          animations: [
+            trigger('parent', [
+              transition('* => go', [
+                query(':animating', [
+                  style({backgroundColor: 'blue'}),
+                  animate(1000, style({backgroundColor: 'red'})),
+                ]),
               ]),
-          trigger(
-              'c',
-              [
-                transition('* => 1', [animate(1000, style({opacity: 0}))]),
+            ]),
+            trigger('a', [transition('* => 1', [animate(1000, style({opacity: 0}))])]),
+            trigger('b', [
+              transition('* => 1', [
+                animate(1000, style({opacity: 0})),
+                query('.b-inner', [animate(1000, style({opacity: 0}))]),
               ]),
-        ]
-      })
-      class Cmp {
-        public exp0: any;
-        public exp1: any;
-        public exp2: any;
-        public exp3: any;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp0 = '';
-      cmp.exp1 = 1;
-      cmp.exp2 = 1;
-      // note that exp3 is skipped here
-      fixture.detectChanges();
-
-      let players = getLog();
-      expect(players.length).toEqual(3);  // a,b,b-inner and not c
-      resetLog();
+            ]),
+            trigger('c', [transition('* => 1', [animate(1000, style({opacity: 0}))])]),
+          ],
+        })
+        class Cmp {
+          public exp0: any;
+          public exp1: any;
+          public exp2: any;
+          public exp3: any;
+        }
 
-      cmp.exp0 = 'go';
-      fixture.detectChanges();
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      const expectedKeyframes = [
-        new Map<string, string|number>([['backgroundColor', 'blue'], ['offset', 0]]),
-        new Map<string, string|number>([['backgroundColor', 'red'], ['offset', 1]]),
-      ];
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-      players = getLog();
-      expect(players.length).toEqual(3);
-      const [p1, p2, p3] = players;
+        cmp.exp0 = '';
+        cmp.exp1 = 1;
+        cmp.exp2 = 1;
+        // note that exp3 is skipped here
+        fixture.detectChanges();
 
-      expect(p1.element.classList.contains('a')).toBeTruthy();
-      expect(p1.keyframes).toEqual(expectedKeyframes);
+        let players = getLog();
+        expect(players.length).toEqual(3); // a,b,b-inner and not c
+        resetLog();
 
-      expect(p2.element.classList.contains('b')).toBeTruthy();
-      expect(p2.keyframes).toEqual(expectedKeyframes);
+        cmp.exp0 = 'go';
+        fixture.detectChanges();
 
-      expect(p3.element.classList.contains('b-inner')).toBeTruthy();
-      expect(p3.keyframes).toEqual(expectedKeyframes);
-    });
+        const expectedKeyframes = [
+          new Map<string, string | number>([
+            ['backgroundColor', 'blue'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['backgroundColor', 'red'],
+            ['offset', 1],
+          ]),
+        ];
+
+        players = getLog();
+        expect(players.length).toEqual(3);
+        const [p1, p2, p3] = players;
+
+        expect(p1.element.classList.contains('a')).toBeTruthy();
+        expect(p1.keyframes).toEqual(expectedKeyframes);
+
+        expect(p2.element.classList.contains('b')).toBeTruthy();
+        expect(p2.keyframes).toEqual(expectedKeyframes);
+
+        expect(p3.element.classList.contains('b-inner')).toBeTruthy();
+        expect(p3.keyframes).toEqual(expectedKeyframes);
+      });
 
-    it('should be able to query triggers directly by name', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
+      it('should be able to query triggers directly by name', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div [@myAnimation]="exp0">
               <div class="f1" @foo></div>
               <div class="f2" [@foo]></div>
@@ -218,146 +206,115 @@ describe('animation query tests', function() {
               <div class="b3" [@bar]="exp2"></div>
             </div>
           `,
-        animations: [
-          trigger('foo', []),
-          trigger('bar', []),
-          trigger(
-              'myAnimation',
-              [
-                transition(
-                    '* => foo',
-                    [
-                      query(
-                          '@foo',
-                          [
-                            animate(1000, style({color: 'red'})),
-                          ]),
-                    ]),
-                transition(
-                    '* => bar',
-                    [
-                      query(
-                          '@bar',
-                          [
-                            animate(1000, style({color: 'blue'})),
-                          ]),
-                    ])
-              ]),
-        ]
-      })
-      class Cmp {
-        public exp0: any;
-        public exp1: any;
-        public exp2: any;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      fixture.detectChanges();
-      engine.flush();
-      resetLog();
+          animations: [
+            trigger('foo', []),
+            trigger('bar', []),
+            trigger('myAnimation', [
+              transition('* => foo', [query('@foo', [animate(1000, style({color: 'red'}))])]),
+              transition('* => bar', [query('@bar', [animate(1000, style({color: 'blue'}))])]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp0: any;
+          public exp1: any;
+          public exp2: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      cmp.exp0 = 'foo';
-      fixture.detectChanges();
-      engine.flush();
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-      let players = getLog();
-      expect(players.length).toEqual(3);
-      const [p1, p2, p3] = players;
-      resetLog();
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
 
-      expect(p1.element.classList.contains('f1')).toBeTruthy();
-      expect(p2.element.classList.contains('f2')).toBeTruthy();
-      expect(p3.element.classList.contains('f3')).toBeTruthy();
+        cmp.exp0 = 'foo';
+        fixture.detectChanges();
+        engine.flush();
 
-      cmp.exp0 = 'bar';
-      fixture.detectChanges();
-      engine.flush();
+        let players = getLog();
+        expect(players.length).toEqual(3);
+        const [p1, p2, p3] = players;
+        resetLog();
 
-      players = getLog();
-      expect(players.length).toEqual(3);
-      const [p4, p5, p6] = players;
-      resetLog();
+        expect(p1.element.classList.contains('f1')).toBeTruthy();
+        expect(p2.element.classList.contains('f2')).toBeTruthy();
+        expect(p3.element.classList.contains('f3')).toBeTruthy();
 
-      expect(p4.element.classList.contains('b1')).toBeTruthy();
-      expect(p5.element.classList.contains('b2')).toBeTruthy();
-      expect(p6.element.classList.contains('b3')).toBeTruthy();
-    });
+        cmp.exp0 = 'bar';
+        fixture.detectChanges();
+        engine.flush();
+
+        players = getLog();
+        expect(players.length).toEqual(3);
+        const [p4, p5, p6] = players;
+        resetLog();
+
+        expect(p4.element.classList.contains('b1')).toBeTruthy();
+        expect(p5.element.classList.contains('b2')).toBeTruthy();
+        expect(p6.element.classList.contains('b3')).toBeTruthy();
+      });
 
-    it('should be able to query all active animations using :animating in a query', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
+      it('should be able to query all active animations using :animating in a query', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div [@myAnimation]="exp" #parent>
               <div *ngFor="let item of items" class="item e-{{ item }}">
               </div>
             </div>
           `,
-        animations: [
-          trigger(
-              'myAnimation',
-              [
-                transition(
-                    '* => a',
-                    [
-                      query(
-                          '.item:nth-child(odd)',
-                          [
-                            style({opacity: 0}),
-                            animate(1000, style({opacity: 1})),
-                          ]),
-                    ]),
-                transition(
-                    '* => b',
-                    [
-                      query(
-                          '.item:animating',
-                          [
-                            style({opacity: 1}),
-                            animate(1000, style({opacity: 0})),
-                          ]),
-                    ]),
+          animations: [
+            trigger('myAnimation', [
+              transition('* => a', [
+                query('.item:nth-child(odd)', [
+                  style({opacity: 0}),
+                  animate(1000, style({opacity: 1})),
+                ]),
               ]),
-        ]
-      })
-      class Cmp {
-        public exp: any;
-        public items: number[] = [0, 1, 2, 3, 4];
-      }
+              transition('* => b', [
+                query('.item:animating', [style({opacity: 1}), animate(1000, style({opacity: 0}))]),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+          public items: number[] = [0, 1, 2, 3, 4];
+        }
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-      cmp.exp = 'a';
-      fixture.detectChanges();
-      engine.flush();
+        cmp.exp = 'a';
+        fixture.detectChanges();
+        engine.flush();
 
-      let players = getLog();
-      expect(players.length).toEqual(3);
-      resetLog();
+        let players = getLog();
+        expect(players.length).toEqual(3);
+        resetLog();
 
-      cmp.exp = 'b';
-      fixture.detectChanges();
-      engine.flush();
+        cmp.exp = 'b';
+        fixture.detectChanges();
+        engine.flush();
 
-      players = getLog();
-      expect(players.length).toEqual(3);
-      expect(players[0].element.classList.contains('e-0')).toBeTruthy();
-      expect(players[1].element.classList.contains('e-2')).toBeTruthy();
-      expect(players[2].element.classList.contains('e-4')).toBeTruthy();
-    });
+        players = getLog();
+        expect(players.length).toEqual(3);
+        expect(players[0].element.classList.contains('e-0')).toBeTruthy();
+        expect(players[1].element.classList.contains('e-2')).toBeTruthy();
+        expect(players[2].element.classList.contains('e-4')).toBeTruthy();
+      });
 
-    it('should be able to query all actively queued animation triggers via `@*:animating`', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
+      it('should be able to query all actively queued animation triggers via `@*:animating`', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div [@parent]="exp0">
               <div class="c1" [@child]="exp1"></div>
               <div class="c2" [@child]="exp2"></div>
@@ -366,89 +323,80 @@ describe('animation query tests', function() {
               <div class="c5" [@child]="exp5"></div>
             </div>
           `,
-        animations: [
-          trigger(
-              'parent',
-              [
-                transition(
-                    '* => *',
-                    [
-                      query(
-                          '@*:animating', [animate(1000, style({background: 'red'}))],
-                          {optional: true}),
-                    ]),
+          animations: [
+            trigger('parent', [
+              transition('* => *', [
+                query('@*:animating', [animate(1000, style({background: 'red'}))], {
+                  optional: true,
+                }),
               ]),
-          trigger(
-              'child',
-              [
-                transition('* => *', []),
-              ])
-        ]
-      })
-      class Cmp {
-        public exp0: any;
-        public exp1: any;
-        public exp2: any;
-        public exp3: any;
-        public exp4: any;
-        public exp5: any;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp1 = 0;
-      cmp.exp2 = 0;
-      cmp.exp3 = 0;
-      cmp.exp4 = 0;
-      cmp.exp5 = 0;
-      fixture.detectChanges();
-
-      cmp.exp0 = 0;
-      fixture.detectChanges();
-
-      let players = engine.players;
-      cancelAllPlayers(players);
-
-      cmp.exp2 = 1;
-      cmp.exp4 = 1;
-      fixture.detectChanges();
-
-      cmp.exp0 = 1;
-      fixture.detectChanges();
-
-      players = engine.players;
-      cancelAllPlayers(players);
-      expect(players.length).toEqual(3);
-
-      cmp.exp1 = 2;
-      cmp.exp2 = 2;
-      cmp.exp3 = 2;
-      cmp.exp4 = 2;
-      cmp.exp5 = 2;
-      fixture.detectChanges();
-
-      cmp.exp0 = 2;
-      fixture.detectChanges();
-
-      players = engine.players;
-      cancelAllPlayers(players);
-      expect(players.length).toEqual(6);
-
-      cmp.exp0 = 3;
-      fixture.detectChanges();
-
-      players = engine.players;
-      cancelAllPlayers(players);
-      expect(players.length).toEqual(1);
-    });
+            ]),
+            trigger('child', [transition('* => *', [])]),
+          ],
+        })
+        class Cmp {
+          public exp0: any;
+          public exp1: any;
+          public exp2: any;
+          public exp3: any;
+          public exp4: any;
+          public exp5: any;
+        }
 
-    it(
-        'should collect styles for the same elements between queries', () => {
-          @Component({
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = 0;
+        cmp.exp2 = 0;
+        cmp.exp3 = 0;
+        cmp.exp4 = 0;
+        cmp.exp5 = 0;
+        fixture.detectChanges();
+
+        cmp.exp0 = 0;
+        fixture.detectChanges();
+
+        let players = engine.players;
+        cancelAllPlayers(players);
+
+        cmp.exp2 = 1;
+        cmp.exp4 = 1;
+        fixture.detectChanges();
+
+        cmp.exp0 = 1;
+        fixture.detectChanges();
+
+        players = engine.players;
+        cancelAllPlayers(players);
+        expect(players.length).toEqual(3);
+
+        cmp.exp1 = 2;
+        cmp.exp2 = 2;
+        cmp.exp3 = 2;
+        cmp.exp4 = 2;
+        cmp.exp5 = 2;
+        fixture.detectChanges();
+
+        cmp.exp0 = 2;
+        fixture.detectChanges();
+
+        players = engine.players;
+        cancelAllPlayers(players);
+        expect(players.length).toEqual(6);
+
+        cmp.exp0 = 3;
+        fixture.detectChanges();
+
+        players = engine.players;
+        cancelAllPlayers(players);
+        expect(players.length).toEqual(1);
+      });
+
+      it('should collect styles for the same elements between queries', () => {
+        @Component({
           selector: 'ani-cmp',
           template: `
             <div [@myAnimation]="exp">
@@ -461,125 +409,172 @@ describe('animation query tests', function() {
               transition('* => go', [
                 query(':self, header, footer', style({opacity: '0.01'})),
                 animate(1000, style({opacity: '1'})),
-                query('header, footer', [
-                  stagger(500, [
-                    animate(1000, style({opacity: '1'}))
-                  ])
-                ])
-              ])
-            ])
-          ]
+                query('header, footer', [stagger(500, [animate(1000, style({opacity: '1'}))])]),
+              ]),
+            ]),
+          ],
         })
         class Cmp {
-            public exp: any;
-            public items: any[] = [0, 1, 2];
-          }
+          public exp: any;
+          public items: any[] = [0, 1, 2];
+        }
 
-          TestBed.configureTestingModule({declarations: [Cmp]});
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-          const engine = TestBed.inject(ɵAnimationEngine);
-          const fixture = TestBed.createComponent(Cmp);
-          const cmp = fixture.componentInstance;
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-          cmp.exp = 'go';
-          fixture.detectChanges();
-          engine.flush();
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(6);
+
+        const [p1, p2, p3, p4, p5, p6] = players;
+
+        expect(p1.delay).toEqual(0);
+        expect(p1.duration).toEqual(0);
+        expect(p1.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['opacity', '0.01'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['opacity', '0.01'],
+            ['offset', 1],
+          ]),
+        ]);
 
-          const players = getLog();
-          expect(players.length).toEqual(6);
+        expect(p2.delay).toEqual(0);
+        expect(p2.duration).toEqual(0);
+        expect(p2.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['opacity', '0.01'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['opacity', '0.01'],
+            ['offset', 1],
+          ]),
+        ]);
 
-          const [p1, p2, p3, p4, p5, p6] = players;
+        expect(p3.delay).toEqual(0);
+        expect(p3.duration).toEqual(0);
+        expect(p3.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['opacity', '0.01'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['opacity', '0.01'],
+            ['offset', 1],
+          ]),
+        ]);
 
-          expect(p1.delay).toEqual(0);
-          expect(p1.duration).toEqual(0);
-          expect(p1.keyframes).toEqual([
-            new Map<string, string|number>([['opacity', '0.01'], ['offset', 0]]),
-            new Map<string, string|number>([['opacity', '0.01'], ['offset', 1]]),
-          ]);
+        expect(p4.delay).toEqual(0);
+        expect(p4.duration).toEqual(1000);
+        expect(p4.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['opacity', '0.01'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['opacity', '1'],
+            ['offset', 1],
+          ]),
+        ]);
 
-          expect(p2.delay).toEqual(0);
-          expect(p2.duration).toEqual(0);
-          expect(p2.keyframes).toEqual([
-            new Map<string, string|number>([['opacity', '0.01'], ['offset', 0]]),
-            new Map<string, string|number>([['opacity', '0.01'], ['offset', 1]]),
-          ]);
+        expect(p5.delay).toEqual(1000);
+        expect(p5.duration).toEqual(1000);
+        expect(p5.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['opacity', '0.01'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['opacity', '1'],
+            ['offset', 1],
+          ]),
+        ]);
 
-          expect(p3.delay).toEqual(0);
-          expect(p3.duration).toEqual(0);
-          expect(p3.keyframes).toEqual([
-            new Map<string, string|number>([['opacity', '0.01'], ['offset', 0]]),
-            new Map<string, string|number>([['opacity', '0.01'], ['offset', 1]]),
-          ]);
+        expect(p6.delay).toEqual(1500);
+        expect(p6.duration).toEqual(1000);
+        expect(p6.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['opacity', '0.01'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['opacity', '1'],
+            ['offset', 1],
+          ]),
+        ]);
+      });
 
-          expect(p4.delay).toEqual(0);
-          expect(p4.duration).toEqual(1000);
-          expect(p4.keyframes).toEqual([
-            new Map<string, string|number>([['opacity', '0.01'], ['offset', 0]]),
-            new Map<string, string|number>([['opacity', '1'], ['offset', 1]]),
-          ]);
+      it('should retain style values when :self is used inside of a query', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp"></div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              transition('* => go', [
+                query(':self', style({opacity: '0.5'})),
+                animate(1000, style({opacity: '1'})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+        }
 
-          expect(p5.delay).toEqual(1000);
-          expect(p5.duration).toEqual(1000);
-          expect(p5.keyframes).toEqual([
-            new Map<string, string|number>([['opacity', '0.01'], ['offset', 0]]),
-            new Map<string, string|number>([['opacity', '1'], ['offset', 1]]),
-          ]);
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-          expect(p6.delay).toEqual(1500);
-          expect(p6.duration).toEqual(1000);
-          expect(p6.keyframes).toEqual([
-            new Map<string, string|number>([['opacity', '0.01'], ['offset', 0]]),
-            new Map<string, string|number>([['opacity', '1'], ['offset', 1]]),
-          ]);
-        });
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-    it('should retain style values when :self is used inside of a query', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
-            <div [@myAnimation]="exp"></div>
-          `,
-        animations: [trigger(
-            'myAnimation',
-            [transition(
-                '* => go',
-                [query(':self', style({opacity: '0.5'})), animate(1000, style({opacity: '1'}))])])]
-      })
-      class Cmp {
-        public exp: any;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp = 'go';
-      fixture.detectChanges();
-      engine.flush();
-
-      const players = getLog();
-      expect(players.length).toEqual(2);
-
-      const [p1, p2] = players;
-      expect(p1.delay).toEqual(0);
-      expect(p1.duration).toEqual(0);
-      expect(p1.keyframes).toEqual([
-        new Map<string, string|number>([['opacity', '0.5'], ['offset', 0]]),
-        new Map<string, string|number>([['opacity', '0.5'], ['offset', 1]])
-      ]);
-
-      expect(p2.delay).toEqual(0);
-      expect(p2.duration).toEqual(1000);
-      expect(p2.keyframes).toEqual([
-        new Map<string, string|number>([['opacity', '0.5'], ['offset', 0]]),
-        new Map<string, string|number>([['opacity', '1'], ['offset', 1]])
-      ]);
-    });
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(2);
+
+        const [p1, p2] = players;
+        expect(p1.delay).toEqual(0);
+        expect(p1.duration).toEqual(0);
+        expect(p1.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['opacity', '0.5'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['opacity', '0.5'],
+            ['offset', 1],
+          ]),
+        ]);
+
+        expect(p2.delay).toEqual(0);
+        expect(p2.duration).toEqual(1000);
+        expect(p2.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['opacity', '0.5'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['opacity', '1'],
+            ['offset', 1],
+          ]),
+        ]);
+      });
 
-    it('should properly apply stagger after various other steps within a query', () => {
-      @Component({
+      it('should properly apply stagger after various other steps within a query', () => {
+        @Component({
           selector: 'ani-cmp',
           template: `
             <div [@myAnimation]="exp">
@@ -594,112 +589,113 @@ describe('animation query tests', function() {
                   style({opacity: '0'}),
                   animate(1000, style({opacity: '0.3'})),
                   animate(1000, style({opacity: '0.6'})),
-                  stagger(500, [
-                    animate(1000, style({opacity: '1'}))
-                  ])
-                ])
-              ])
-            ])
-          ]
+                  stagger(500, [animate(1000, style({opacity: '1'}))]),
+                ]),
+              ]),
+            ]),
+          ],
         })
         class Cmp {
-        public exp: any;
-        public items: any[] = [0, 1, 2];
-      }
+          public exp: any;
+          public items: any[] = [0, 1, 2];
+        }
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-      cmp.exp = 'go';
-      fixture.detectChanges();
-      engine.flush();
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
 
-      const players = getLog();
-      expect(players.length).toEqual(3);
+        const players = getLog();
+        expect(players.length).toEqual(3);
 
-      const [p1, p2, p3] = players;
+        const [p1, p2, p3] = players;
 
-      expect(p1.delay).toEqual(0);
-      expect(p1.duration).toEqual(3000);
-      expect(p2.delay).toEqual(0);
-      expect(p2.duration).toEqual(3500);
-      expect(p3.delay).toEqual(0);
-      expect(p3.duration).toEqual(4000);
-    });
+        expect(p1.delay).toEqual(0);
+        expect(p1.duration).toEqual(3000);
+        expect(p2.delay).toEqual(0);
+        expect(p2.duration).toEqual(3500);
+        expect(p3.delay).toEqual(0);
+        expect(p3.duration).toEqual(4000);
+      });
 
-    it('should properly apply pre styling before a stagger is issued', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
+      it('should properly apply pre styling before a stagger is issued', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
           <div [@myAnimation]="exp">
             <div *ngFor="let item of items" class="item">
               {{ item }}
             </div>
           </div>
         `,
-        animations: [
-          trigger(
-              'myAnimation',
-              [
-                transition(
-                    '* => go',
-                    [
-                      query(
-                          ':enter',
-                          [
-                            style({opacity: 0}),
-                            stagger(
-                                100,
-                                [
-                                  animate(1000, style({opacity: 1})),
-                                ]),
-                          ]),
-                    ]),
+          animations: [
+            trigger('myAnimation', [
+              transition('* => go', [
+                query(':enter', [
+                  style({opacity: 0}),
+                  stagger(100, [animate(1000, style({opacity: 1}))]),
+                ]),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] = [0, 1, 2, 3, 4];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(5);
+
+        for (let i = 0; i < players.length; i++) {
+          const player = players[i];
+          const kf = player.keyframes;
+          const limit = kf.length - 1;
+          const staggerDelay = 100 * i;
+          const duration = 1000 + staggerDelay;
+
+          expect(kf[0]).toEqual(
+            new Map<string, string | number>([
+              ['opacity', '0'],
+              ['offset', 0],
+            ]),
+          );
+          if (limit > 1) {
+            const offsetAtStaggerDelay = staggerDelay / duration;
+            expect(kf[1]).toEqual(
+              new Map<string, string | number>([
+                ['opacity', '0'],
+                ['offset', offsetAtStaggerDelay],
               ]),
-        ]
-      })
-      class Cmp {
-        public exp: any;
-        public items: any[] = [0, 1, 2, 3, 4];
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp = 'go';
-      fixture.detectChanges();
-      engine.flush();
-
-      const players = getLog();
-      expect(players.length).toEqual(5);
-
-      for (let i = 0; i < players.length; i++) {
-        const player = players[i];
-        const kf = player.keyframes;
-        const limit = kf.length - 1;
-        const staggerDelay = 100 * i;
-        const duration = 1000 + staggerDelay;
-
-        expect(kf[0]).toEqual(new Map<string, string|number>([['opacity', '0'], ['offset', 0]]));
-        if (limit > 1) {
-          const offsetAtStaggerDelay = staggerDelay / duration;
-          expect(kf[1]).toEqual(
-              new Map<string, string|number>([['opacity', '0'], ['offset', offsetAtStaggerDelay]]));
+            );
+          }
+          expect(kf[limit]).toEqual(
+            new Map<string, string | number>([
+              ['opacity', '1'],
+              ['offset', 1],
+            ]),
+          );
+          expect(player.duration).toEqual(duration);
         }
-        expect(kf[limit]).toEqual(
-            new Map<string, string|number>([['opacity', '1'], ['offset', 1]]));
-        expect(player.duration).toEqual(duration);
-      }
-    });
+      });
 
-    it('should apply a full stagger step delay if the timing data is left undefined', () => {
-      @Component({
+      it('should apply a full stagger step delay if the timing data is left undefined', () => {
+        @Component({
           selector: 'ani-cmp',
           template: `
           <div [@myAnimation]="exp">
@@ -708,159 +704,155 @@ describe('animation query tests', function() {
             </div>
           </div>
         `,
-          animations: [trigger(
-              'myAnimation',
-              [transition(
-                  '* => go', [query('.item', [stagger('full',[
-                                         style({opacity: 0}), animate(1000, style({opacity: .5})),
-                                         animate(500, style({opacity: 1}))
-                                       ])])])])]
+          animations: [
+            trigger('myAnimation', [
+              transition('* => go', [
+                query('.item', [
+                  stagger('full', [
+                    style({opacity: 0}),
+                    animate(1000, style({opacity: 0.5})),
+                    animate(500, style({opacity: 1})),
+                  ]),
+                ]),
+              ]),
+            ]),
+          ],
         })
         class Cmp {
-        public exp: any;
-        public items: any[] = [0, 1, 2, 3, 4];
-      }
+          public exp: any;
+          public items: any[] = [0, 1, 2, 3, 4];
+        }
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-      cmp.exp = 'go';
-      fixture.detectChanges();
-      engine.flush();
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
 
-      const players = getLog();
-      expect(players.length).toEqual(5);
+        const players = getLog();
+        expect(players.length).toEqual(5);
 
-      const [p1, p2, p3, p4, p5] = players;
-      expect(p1.delay).toEqual(0);
-      expect(p2.delay).toEqual(1500);
-      expect(p3.delay).toEqual(3000);
-      expect(p4.delay).toEqual(4500);
-      expect(p5.delay).toEqual(6000);
-    });
+        const [p1, p2, p3, p4, p5] = players;
+        expect(p1.delay).toEqual(0);
+        expect(p2.delay).toEqual(1500);
+        expect(p3.delay).toEqual(3000);
+        expect(p4.delay).toEqual(4500);
+        expect(p5.delay).toEqual(6000);
+      });
 
-    it('should persist inner sub trigger styles once their animation is complete', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
+      it('should persist inner sub trigger styles once their animation is complete', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div @parent *ngIf="exp1">
               <div class="child" [@child]="exp2"></div>
             </div>
           `,
-        animations: [
-          trigger(
-              'parent',
-              [
-                transition(
-                    ':enter',
-                    [
-                      query(
-                          '.child',
-                          [
-                            animateChild(),
-                          ]),
-                    ]),
-              ]),
-          trigger(
-              'child',
-              [
-                state('*, void', style({height: '0px'})),
-                state('b', style({height: '444px'})),
-                transition('* => *', animate(500)),
-              ]),
-        ]
-      })
-      class Cmp {
-        public exp1: any;
-        public exp2: any;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp1 = true;
-      cmp.exp2 = 'b';
-      fixture.detectChanges();
-      engine.flush();
-
-      const players = getLog();
-      expect(players.length).toEqual(2);
-      const player = players[1];
-
-      expect(player.keyframes).toEqual([
-        new Map<string, string|number>([['height', '0px'], ['offset', 0]]),
-        new Map<string, string|number>([['height', '444px'], ['offset', 1]])
-      ]);
-      player.finish();
-
-      expect(player.element.style.height).toEqual('444px');
-    });
+          animations: [
+            trigger('parent', [transition(':enter', [query('.child', [animateChild()])])]),
+            trigger('child', [
+              state('*, void', style({height: '0px'})),
+              state('b', style({height: '444px'})),
+              transition('* => *', animate(500)),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+        }
 
-    it('should find newly inserted items in the component via :enter', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
-            <div @myAnimation>
-              <div *ngFor="let item of items" class="child">
-                {{ item }}
-              </div>
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = true;
+        cmp.exp2 = 'b';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(2);
+        const player = players[1];
+
+        expect(player.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['height', '0px'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['height', '444px'],
+            ['offset', 1],
+          ]),
+        ]);
+        player.finish();
+
+        expect(player.element.style.height).toEqual('444px');
+      });
+
+      it('should find newly inserted items in the component via :enter', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div @myAnimation>
+              <div *ngFor="let item of items" class="child">
+                {{ item }}
+              </div>
             </div>
           `,
-        animations: [trigger(
-            'myAnimation',
-            [
-              transition(
-                  ':enter',
-                  [
-                    query(
-                        ':enter',
-                        [
-                          style({opacity: 0}),
-                          animate(1000, style({opacity: .5})),
-                        ]),
-                  ]),
-            ])]
-      })
-      class Cmp {
-        public items: any[] = [0, 1, 2];
-      }
+          animations: [
+            trigger('myAnimation', [
+              transition(':enter', [
+                query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 0.5}))]),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public items: any[] = [0, 1, 2];
+        }
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-      fixture.detectChanges();
-      engine.flush();
+        fixture.detectChanges();
+        engine.flush();
 
-      const players = getLog();
-      expect(players.length).toEqual(3);
+        const players = getLog();
+        expect(players.length).toEqual(3);
 
-      const [p1, p2, p3] = players;
-      expect(p1.element.innerText.trim()).toEqual('0');
-      expect(p2.element.innerText.trim()).toEqual('1');
-      expect(p3.element.innerText.trim()).toEqual('2');
+        const [p1, p2, p3] = players;
+        expect(p1.element.innerText.trim()).toEqual('0');
+        expect(p2.element.innerText.trim()).toEqual('1');
+        expect(p3.element.innerText.trim()).toEqual('2');
 
-      players.forEach(p => {
-        expect(p.keyframes).toEqual([
-          new Map<string, string|number>([['opacity', '0'], ['offset', 0]]),
-          new Map<string, string|number>([['opacity', '0.5'], ['offset', 1]])
-        ]);
+        players.forEach((p) => {
+          expect(p.keyframes).toEqual([
+            new Map<string, string | number>([
+              ['opacity', '0'],
+              ['offset', 0],
+            ]),
+            new Map<string, string | number>([
+              ['opacity', '0.5'],
+              ['offset', 1],
+            ]),
+          ]);
+        });
       });
-    });
 
-    it('should cleanup :enter and :leave artifacts from nodes when any animation sequences fail to be built',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
+      it('should cleanup :enter and :leave artifacts from nodes when any animation sequences fail to be built', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div [@myAnimation]="items.length" class="parent" #container>
               <div *ngFor="let item of items" class="child">
                 {{ item }}
@@ -868,166 +860,159 @@ describe('animation query tests', function() {
               <div *ngIf="items.length == 0" class="child">Leave!</div>
             </div>
           `,
-           animations: [
-             trigger(
-                 'myAnimation',
-                 [
-                   transition('* => 0', []),
-                   transition(
-                       '* => *',
-                       [
-                         query(
-                             '.child:enter',
-                             [
-                               style({opacity: 0}),
-                               animate(1000, style({opacity: 1})),
-                             ]),
-                         query(
-                             '.incorrect-child:leave',
-                             [
-                               animate(1000, style({opacity: 0})),
-                             ]),
-                       ]),
-                 ]),
-           ]
-         })
-         class Cmp {
-           @ViewChild('container') public container: any;
-           public items: any[] = [];
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.items = [];
-         fixture.detectChanges();
-
-         cmp.items = [0, 1, 2, 3, 4];
-
-         expect(() => {
-           fixture.detectChanges();
-         }).toThrow();
-
-         const children = cmp.container.nativeElement.querySelectorAll('.child');
-         expect(children.length).toEqual(5);
-
-         for (let i = 0; i < children.length; i++) {
-           let child = children[i];
-           expect(child.classList.contains(ENTER_CLASSNAME)).toBe(false);
-           expect(child.classList.contains(LEAVE_CLASSNAME)).toBe(false);
-         }
-       });
-
-    it('should find elements that have been removed via :leave', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
+          animations: [
+            trigger('myAnimation', [
+              transition('* => 0', []),
+              transition('* => *', [
+                query('.child:enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+                query('.incorrect-child:leave', [animate(1000, style({opacity: 0}))]),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          @ViewChild('container') public container: any;
+          public items: any[] = [];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.items = [];
+        fixture.detectChanges();
+
+        cmp.items = [0, 1, 2, 3, 4];
+
+        expect(() => {
+          fixture.detectChanges();
+        }).toThrow();
+
+        const children = cmp.container.nativeElement.querySelectorAll('.child');
+        expect(children.length).toEqual(5);
+
+        for (let i = 0; i < children.length; i++) {
+          let child = children[i];
+          expect(child.classList.contains(ENTER_CLASSNAME)).toBe(false);
+          expect(child.classList.contains(LEAVE_CLASSNAME)).toBe(false);
+        }
+      });
+
+      it('should find elements that have been removed via :leave', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div [@myAnimation]="exp" class="parent">
               <div *ngFor="let item of items" class="child">
                 {{ item }}
               </div>
             </div>
           `,
-        animations: [trigger(
-            'myAnimation',
-            [
-              transition(
-                  'a => b',
-                  [query(':leave', [style({opacity: 1}), animate(1000, style({opacity: .5}))])]),
-            ])]
-      })
-      class Cmp {
-        public exp: any;
-        public items: any[] = [4, 2, 0];
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp = 'a';
-      fixture.detectChanges();
-      engine.flush();
-      resetLog();
+          animations: [
+            trigger('myAnimation', [
+              transition('a => b', [
+                query(':leave', [style({opacity: 1}), animate(1000, style({opacity: 0.5}))]),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] = [4, 2, 0];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-      cmp.exp = 'b';
-      cmp.items = [];
-      fixture.detectChanges();
-      engine.flush();
+        cmp.exp = 'a';
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp = 'b';
+        cmp.items = [];
+        fixture.detectChanges();
+        engine.flush();
 
-      const players = getLog();
-      expect(players.length).toEqual(3);
+        const players = getLog();
+        expect(players.length).toEqual(3);
 
-      const [p1, p2, p3] = players;
-      expect(p1.element.innerText.trim()).toEqual('4');
-      expect(p2.element.innerText.trim()).toEqual('2');
-      expect(p3.element.innerText.trim()).toEqual('0');
+        const [p1, p2, p3] = players;
+        expect(p1.element.innerText.trim()).toEqual('4');
+        expect(p2.element.innerText.trim()).toEqual('2');
+        expect(p3.element.innerText.trim()).toEqual('0');
 
-      players.forEach(p => {
-        expect(p.keyframes).toEqual([
-          new Map<string, string|number>([['opacity', '1'], ['offset', 0]]),
-          new Map<string, string|number>([['opacity', '0.5'], ['offset', 1]])
-        ]);
+        players.forEach((p) => {
+          expect(p.keyframes).toEqual([
+            new Map<string, string | number>([
+              ['opacity', '1'],
+              ['offset', 0],
+            ]),
+            new Map<string, string | number>([
+              ['opacity', '0.5'],
+              ['offset', 1],
+            ]),
+          ]);
+        });
       });
-    });
 
-    it('should find :enter nodes that have been inserted around non enter nodes', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
+      it('should find :enter nodes that have been inserted around non enter nodes', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div [@myAnimation]="exp" class="parent">
               <div *ngFor="let item of items" class="child">
                 {{ item }}
               </div>
             </div>
           `,
-        animations: [trigger(
-            'myAnimation',
-            [
-              transition(
-                  '* => go',
-                  [query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))])]),
-            ])]
-      })
-      class Cmp {
-        public exp: any;
-        public items: any[] = [];
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp = 'no';
-      cmp.items = [2];
-      fixture.detectChanges();
-      engine.flush();
-      resetLog();
+          animations: [
+            trigger('myAnimation', [
+              transition('* => go', [
+                query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] = [];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'no';
+        cmp.items = [2];
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
 
-      cmp.exp = 'go';
-      cmp.items = [0, 1, 2, 3, 4];
-      fixture.detectChanges();
-      engine.flush();
+        cmp.exp = 'go';
+        cmp.items = [0, 1, 2, 3, 4];
+        fixture.detectChanges();
+        engine.flush();
 
-      const players = getLog();
-      expect(players.length).toEqual(4);
+        const players = getLog();
+        expect(players.length).toEqual(4);
 
-      const [p1, p2, p3, p4] = players;
-      expect(p1.element.innerText.trim()).toEqual('0');
-      expect(p2.element.innerText.trim()).toEqual('1');
-      expect(p3.element.innerText.trim()).toEqual('3');
-      expect(p4.element.innerText.trim()).toEqual('4');
-    });
+        const [p1, p2, p3, p4] = players;
+        expect(p1.element.innerText.trim()).toEqual('0');
+        expect(p2.element.innerText.trim()).toEqual('1');
+        expect(p3.element.innerText.trim()).toEqual('3');
+        expect(p4.element.innerText.trim()).toEqual('4');
+      });
 
-    it('should find :enter/:leave nodes that are nested inside of ng-container elements', () => {
-      @Component({
+      it('should find :enter/:leave nodes that are nested inside of ng-container elements', () => {
+        @Component({
           selector: 'ani-cmp',
           template: `
             <div [@myAnimation]="items.length" class="parent">
@@ -1039,81 +1024,86 @@ describe('animation query tests', function() {
               </ng-container>
             </div>
           `,
-          animations: [trigger(
-            'myAnimation',
-            [
+          animations: [
+            trigger('myAnimation', [
               transition('0 => 5', [
-                query(':enter', [
-                  style({ opacity: '0' }),
-                  animate(1000, style({ opacity: '1' }))
-                ])
+                query(':enter', [style({opacity: '0'}), animate(1000, style({opacity: '1'}))]),
               ]),
               transition('5 => 0', [
-                query(':leave', [
-                  style({ opacity: '1' }),
-                  animate(1000, style({ opacity: '0' }))
-                ])
+                query(':leave', [style({opacity: '1'}), animate(1000, style({opacity: '0'}))]),
               ]),
-            ])]
+            ]),
+          ],
         })
         class Cmp {
-        public items: any[]|undefined;
-      }
+          public items: any[] | undefined;
+        }
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-      cmp.items = [];
-      fixture.detectChanges();
-      engine.flush();
-      resetLog();
+        cmp.items = [];
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
 
-      cmp.items = [0, 1, 2, 3, 4];
-      fixture.detectChanges();
-      engine.flush();
+        cmp.items = [0, 1, 2, 3, 4];
+        fixture.detectChanges();
+        engine.flush();
 
-      let players = getLog();
-      expect(players.length).toEqual(5);
+        let players = getLog();
+        expect(players.length).toEqual(5);
 
-      for (let i = 0; i < 5; i++) {
-        let player = players[i];
-        expect(player.keyframes).toEqual([
-          new Map<string, string|number>([['opacity', '0'], ['offset', 0]]),
-          new Map<string, string|number>([['opacity', '1'], ['offset', 1]]),
-        ]);
+        for (let i = 0; i < 5; i++) {
+          let player = players[i];
+          expect(player.keyframes).toEqual([
+            new Map<string, string | number>([
+              ['opacity', '0'],
+              ['offset', 0],
+            ]),
+            new Map<string, string | number>([
+              ['opacity', '1'],
+              ['offset', 1],
+            ]),
+          ]);
 
-        let elm = player.element;
-        let text = i % 2 == 0 ? `even ${i}` : `odd ${i}`;
-        expect(elm.innerText.trim()).toEqual(text);
-      }
+          let elm = player.element;
+          let text = i % 2 == 0 ? `even ${i}` : `odd ${i}`;
+          expect(elm.innerText.trim()).toEqual(text);
+        }
 
-      resetLog();
-      cmp.items = [];
-      fixture.detectChanges();
-      engine.flush();
+        resetLog();
+        cmp.items = [];
+        fixture.detectChanges();
+        engine.flush();
 
-      players = getLog();
-      expect(players.length).toEqual(5);
+        players = getLog();
+        expect(players.length).toEqual(5);
 
-      for (let i = 0; i < 5; i++) {
-        let player = players[i];
-        expect(player.keyframes).toEqual([
-          new Map<string, string|number>([['opacity', '1'], ['offset', 0]]),
-          new Map<string, string|number>([['opacity', '0'], ['offset', 1]]),
-        ]);
+        for (let i = 0; i < 5; i++) {
+          let player = players[i];
+          expect(player.keyframes).toEqual([
+            new Map<string, string | number>([
+              ['opacity', '1'],
+              ['offset', 0],
+            ]),
+            new Map<string, string | number>([
+              ['opacity', '0'],
+              ['offset', 1],
+            ]),
+          ]);
 
-        let elm = player.element;
-        let text = i % 2 == 0 ? `even ${i}` : `odd ${i}`;
-        expect(elm.innerText.trim()).toEqual(text);
-      }
-    });
+          let elm = player.element;
+          let text = i % 2 == 0 ? `even ${i}` : `odd ${i}`;
+          expect(elm.innerText.trim()).toEqual(text);
+        }
+      });
 
-    it('should properly cancel items that were queried into a former animation and pass in the associated styles into the follow-up players per element',
-       () => {
-         @Component({
+      it('should properly cancel items that were queried into a former animation and pass in the associated styles into the follow-up players per element', () => {
+        @Component({
           selector: 'ani-cmp',
           template: `
             <div [@myAnimation]="exp" class="parent">
@@ -1122,67 +1112,74 @@ describe('animation query tests', function() {
               </div>
             </div>
           `,
-          animations: [trigger(
-            'myAnimation',
-            [
+          animations: [
+            trigger('myAnimation', [
               transition('* => on', [
                 query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
-                query(':enter', [style({width: 0}), animate(1000, style({height: 200}))])
+                query(':enter', [style({width: 0}), animate(1000, style({height: 200}))]),
               ]),
               transition('* => off', [
                 query(':leave', [animate(1000, style({width: 0}))]),
-                query(':leave', [animate(1000, style({opacity: 0}))])
+                query(':leave', [animate(1000, style({opacity: 0}))]),
               ]),
-            ])]
+            ]),
+          ],
         })
         class Cmp {
-           public exp: any;
-           public items: any[]|undefined;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = 'on';
-         cmp.items = [0, 1, 2, 3, 4];
-         fixture.detectChanges();
-         engine.flush();
-
-         const previousPlayers = getLog();
-         expect(previousPlayers.length).toEqual(10);
-         resetLog();
-
-         cmp.exp = 'off';
-         cmp.items = [0, 1, 2];
-         fixture.detectChanges();
-         engine.flush();
-
-         const players = getLog();
-         expect(players.length).toEqual(4);
-
-         const [p1, p2, p3, p4] = players;
-
-         // p1 && p2 are the starting players for item3 and item4
-         expect(p1.previousStyles).toEqual(new Map([
-           ['opacity', AUTO_STYLE], ['width', AUTO_STYLE], ['height', AUTO_STYLE]
-         ]));
-         expect(p2.previousStyles).toEqual(new Map([
-           ['opacity', AUTO_STYLE], ['width', AUTO_STYLE], ['height', AUTO_STYLE]
-         ]));
-
-         // p3 && p4 are the following players for item3 and item4
-         expect(p3.previousStyles).toEqual(new Map());
-         expect(p4.previousStyles).toEqual(new Map());
-       });
-
-    it('should not remove a parent container if its contents are queried into by an ancestor element',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
+          public exp: any;
+          public items: any[] | undefined;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'on';
+        cmp.items = [0, 1, 2, 3, 4];
+        fixture.detectChanges();
+        engine.flush();
+
+        const previousPlayers = getLog();
+        expect(previousPlayers.length).toEqual(10);
+        resetLog();
+
+        cmp.exp = 'off';
+        cmp.items = [0, 1, 2];
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(4);
+
+        const [p1, p2, p3, p4] = players;
+
+        // p1 && p2 are the starting players for item3 and item4
+        expect(p1.previousStyles).toEqual(
+          new Map([
+            ['opacity', AUTO_STYLE],
+            ['width', AUTO_STYLE],
+            ['height', AUTO_STYLE],
+          ]),
+        );
+        expect(p2.previousStyles).toEqual(
+          new Map([
+            ['opacity', AUTO_STYLE],
+            ['width', AUTO_STYLE],
+            ['height', AUTO_STYLE],
+          ]),
+        );
+
+        // p3 && p4 are the following players for item3 and item4
+        expect(p3.previousStyles).toEqual(new Map());
+        expect(p4.previousStyles).toEqual(new Map());
+      });
+
+      it('should not remove a parent container if its contents are queried into by an ancestor element', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div [@myAnimation]="exp1" class="ancestor" #ancestor>
               <div class="parent" *ngIf="exp2" #parent>
                 <div class="child"></div>
@@ -1190,1047 +1187,1029 @@ describe('animation query tests', function() {
               </div>
             </div>
           `,
-           animations: [
-             trigger(
-                 'myAnimation',
-                 [
-                   transition(
-                       '* => go',
-                       [
-                         query(
-                             '.child',
-                             [
-                               style({opacity: 0}),
-                               animate(1000, style({opacity: 1})),
-                             ]),
-                       ]),
-                 ]),
-           ]
-         })
-         class Cmp {
-           public exp1: any = '';
-           public exp2: any = true;
-
-           @ViewChild('ancestor') public ancestorElm: any;
-
-           @ViewChild('parent') public parentElm: any;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         fixture.detectChanges();
-         engine.flush();
-         resetLog();
-
-         const ancestorElm = cmp.ancestorElm.nativeElement;
-         const parentElm = cmp.parentElm.nativeElement;
-
-         cmp.exp1 = 'go';
-         cmp.exp2 = false;
-         fixture.detectChanges();
-         engine.flush();
-
-         expect(ancestorElm.contains(parentElm)).toBe(true);
-
-         const players = getLog();
-         expect(players.length).toEqual(2);
-         const [p1, p2] = players;
-         expect(parentElm.contains(p1.element)).toBe(true);
-         expect(parentElm.contains(p2.element)).toBe(true);
-
-         cancelAllPlayers(players);
-
-         expect(ancestorElm.contains(parentElm)).toBe(false);
-       });
-
-    it('should only retain a to-be-removed node if the inner queried items are apart of an animation issued by an ancestor',
-       fakeAsync(() => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-            <div [@one]="exp1" [@two]="exp2" class="ancestor" #ancestor>
-              <header>hello</header>
-              <div class="parent" *ngIf="parentExp" #parent>
-                <div class="child">child</div>
-              </div>
-            </div>
-          `,
-           animations: [
-             trigger(
-                 'one',
-                 [
-                   transition(
-                       '* => go',
-                       [
-                         query(
-                             '.child',
-                             [
-                               style({height: '100px'}),
-                               animate(1000, style({height: '0px'})),
-                             ]),
-                       ]),
-                 ]),
-             trigger(
-                 'two',
-                 [
-                   transition('* => go', [query(
-                                             'header',
-                                             [
-                                               style({width: '100px'}),
-                                               animate(1000, style({width: '0px'})),
-                                             ])]),
-                 ]),
-           ]
-         })
-         class Cmp {
-           public exp1: any = '';
-           public exp2: any = '';
-           public parentExp: any = true;
-
-           @ViewChild('ancestor') public ancestorElm: any;
-
-           @ViewChild('parent') public parentElm: any;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         fixture.detectChanges();
-         engine.flush();
-         resetLog();
-
-         const ancestorElm = cmp.ancestorElm.nativeElement;
-         const parentElm = cmp.parentElm.nativeElement;
-         expect(ancestorElm.contains(parentElm)).toBe(true);
-
-         cmp.exp1 = 'go';
-         fixture.detectChanges();
-         engine.flush();
-
-         expect(ancestorElm.contains(parentElm)).toBe(true);
-
-         const onePlayers = getLog();
-         expect(onePlayers.length).toEqual(1);  // element.child
-         const [childPlayer] = onePlayers;
-
-         let childPlayerComplete = false;
-         childPlayer.onDone(() => childPlayerComplete = true);
-         resetLog();
-         flushMicrotasks();
-
-         expect(childPlayerComplete).toBe(false);
-
-         cmp.exp2 = 'go';
-         cmp.parentExp = false;
-         fixture.detectChanges();
-         engine.flush();
-
-         const twoPlayers = getLog();
-         expect(twoPlayers.length).toEqual(1);  // the header element
-         expect(ancestorElm.contains(parentElm)).toBe(false);
-         expect(childPlayerComplete).toBe(true);
-       }));
-
-    it('should finish queried players in an animation when the next animation takes over', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
-            <div [@myAnimation]="exp" class="parent">
-              <div *ngFor="let item of items" class="child">
-                {{ item }}
-              </div>
-            </div>
-          `,
-        animations: [trigger(
-            'myAnimation',
-            [
-              transition(
-                  '* => on',
-                  [
-                    query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
-                  ]),
-              transition('* => off', [])
-            ])]
-      })
-      class Cmp {
-        public exp: any;
-        public items: any[]|undefined;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp = 'on';
-      cmp.items = [0, 1, 2, 3, 4];
-      fixture.detectChanges();
-      engine.flush();
-
-      const players = getLog();
-      expect(players.length).toEqual(5);
-
-      let count = 0;
-      players.forEach(p => {
-        p.onDone(() => count++);
-      });
+          animations: [
+            trigger('myAnimation', [
+              transition('* => go', [
+                query('.child', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp1: any = '';
+          public exp2: any = true;
 
-      expect(count).toEqual(0);
+          @ViewChild('ancestor') public ancestorElm: any;
 
-      cmp.exp = 'off';
-      fixture.detectChanges();
-      engine.flush();
+          @ViewChild('parent') public parentElm: any;
+        }
 
-      expect(count).toEqual(5);
-    });
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-    it('should finish queried players when the previous player is finished', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
-            <div [@myAnimation]="exp" class="parent">
-              <div *ngFor="let item of items" class="child">
-                {{ item }}
-              </div>
-            </div>
-          `,
-        animations: [trigger(
-            'myAnimation',
-            [
-              transition(
-                  '* => on',
-                  [
-                    query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
-                  ]),
-              transition('* => off', [])
-            ])]
-      })
-      class Cmp {
-        public exp: any;
-        public items: any[]|undefined;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp = 'on';
-      cmp.items = [0, 1, 2, 3, 4];
-      fixture.detectChanges();
-      engine.flush();
-
-      const players = getLog();
-      expect(players.length).toEqual(5);
-
-      let count = 0;
-      players.forEach(p => {
-        p.onDone(() => count++);
-      });
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        const ancestorElm = cmp.ancestorElm.nativeElement;
+        const parentElm = cmp.parentElm.nativeElement;
 
-      expect(count).toEqual(0);
+        cmp.exp1 = 'go';
+        cmp.exp2 = false;
+        fixture.detectChanges();
+        engine.flush();
 
-      expect(engine.players.length).toEqual(1);
-      engine.players[0].finish();
+        expect(ancestorElm.contains(parentElm)).toBe(true);
 
-      expect(count).toEqual(5);
-    });
+        const players = getLog();
+        expect(players.length).toEqual(2);
+        const [p1, p2] = players;
+        expect(parentElm.contains(p1.element)).toBe(true);
+        expect(parentElm.contains(p2.element)).toBe(true);
+
+        cancelAllPlayers(players);
 
-    it('should allow multiple triggers to animate on queried elements at the same time', () => {
-      @Component({
+        expect(ancestorElm.contains(parentElm)).toBe(false);
+      });
+
+      it('should only retain a to-be-removed node if the inner queried items are apart of an animation issued by an ancestor', fakeAsync(() => {
+        @Component({
           selector: 'ani-cmp',
           template: `
-            <div [@one]="exp1" [@two]="exp2" class="parent">
-              <div *ngFor="let item of items" class="child">
-                {{ item }}
+            <div [@one]="exp1" [@two]="exp2" class="ancestor" #ancestor>
+              <header>hello</header>
+              <div class="parent" *ngIf="parentExp" #parent>
+                <div class="child">child</div>
               </div>
             </div>
           `,
           animations: [
             trigger('one', [
-              transition('* => on', [
-                query('.child', [
-                  style({width: '0px'}),
-                  animate(1000, style({width: '100px'}))
-                ])
+              transition('* => go', [
+                query('.child', [style({height: '100px'}), animate(1000, style({height: '0px'}))]),
               ]),
-              transition('* => off', [])
             ]),
             trigger('two', [
-              transition('* => on', [
-                query('.child:nth-child(odd)', [
-                  style({height: '0px'}),
-                  animate(1000, style({height: '100px'}))
-                ])
+              transition('* => go', [
+                query('header', [style({width: '100px'}), animate(1000, style({width: '0px'}))]),
               ]),
-              transition('* => off', [])
-            ])
-          ]
+            ]),
+          ],
         })
         class Cmp {
-        public exp1: any;
-        public exp2: any;
-        public items: any[]|undefined;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp1 = 'on';
-      cmp.items = [0, 1, 2, 3, 4];
-      fixture.detectChanges();
-      engine.flush();
+          public exp1: any = '';
+          public exp2: any = '';
+          public parentExp: any = true;
 
-      let players = getLog();
-      expect(players.length).toEqual(5);
+          @ViewChild('ancestor') public ancestorElm: any;
 
-      let count = 0;
-      players.forEach(p => {
-        p.onDone(() => count++);
-      });
+          @ViewChild('parent') public parentElm: any;
+        }
 
-      resetLog();
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-      expect(count).toEqual(0);
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
 
-      cmp.exp2 = 'on';
-      fixture.detectChanges();
-      engine.flush();
+        const ancestorElm = cmp.ancestorElm.nativeElement;
+        const parentElm = cmp.parentElm.nativeElement;
+        expect(ancestorElm.contains(parentElm)).toBe(true);
 
-      expect(count).toEqual(0);
+        cmp.exp1 = 'go';
+        fixture.detectChanges();
+        engine.flush();
 
-      players = getLog();
-      expect(players.length).toEqual(3);
+        expect(ancestorElm.contains(parentElm)).toBe(true);
 
-      players.forEach(p => {
-        p.onDone(() => count++);
-      });
+        const onePlayers = getLog();
+        expect(onePlayers.length).toEqual(1); // element.child
+        const [childPlayer] = onePlayers;
 
-      cmp.exp1 = 'off';
-      fixture.detectChanges();
-      engine.flush();
+        let childPlayerComplete = false;
+        childPlayer.onDone(() => (childPlayerComplete = true));
+        resetLog();
+        flushMicrotasks();
 
-      expect(count).toEqual(5);
+        expect(childPlayerComplete).toBe(false);
 
-      cmp.exp2 = 'off';
-      fixture.detectChanges();
-      engine.flush();
+        cmp.exp2 = 'go';
+        cmp.parentExp = false;
+        fixture.detectChanges();
+        engine.flush();
 
-      expect(count).toEqual(8);
-    });
+        const twoPlayers = getLog();
+        expect(twoPlayers.length).toEqual(1); // the header element
+        expect(ancestorElm.contains(parentElm)).toBe(false);
+        expect(childPlayerComplete).toBe(true);
+      }));
 
-    it('should cancel inner queried animations if a trigger state value changes, but isn\'t detected as a valid transition',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
-            <div [@myAnimation]="exp" class="parent">
-              <div *ngFor="let item of items" class="child">
-                {{ item }}
-              </div>
-            </div>
-          `,
-           animations: [trigger(
-               'myAnimation',
-               [transition(
-                   '* => on',
-                   [
-                     query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
-                   ])])]
-         })
-         class Cmp {
-           public exp: any;
-           public items: any[]|undefined;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = 'on';
-         cmp.items = [0, 1, 2, 3, 4];
-         fixture.detectChanges();
-         engine.flush();
-
-         const players = getLog();
-         expect(players.length).toEqual(5);
-
-         let count = 0;
-         players.forEach(p => {
-           p.onDone(() => count++);
-         });
-
-         expect(count).toEqual(0);
-
-         cmp.exp = 'off';
-         fixture.detectChanges();
-         engine.flush();
-
-         expect(count).toEqual(5);
-       });
-
-    it('should allow for queried items to restore their styling back to the original state via animate(time, "*")',
-       () => {
-         @Component({
-            selector: 'ani-cmp',
-            template: `
+      it('should finish queried players in an animation when the next animation takes over', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div [@myAnimation]="exp" class="parent">
               <div *ngFor="let item of items" class="child">
                 {{ item }}
               </div>
             </div>
           `,
-            animations: [
-              trigger('myAnimation', [
-                transition('* => on', [
-                  query(':enter', [
-                    style({opacity: '0', width: '0px', height: '0px'}),
-                    animate(1000, style({opacity: '1'})),
-                    animate(1000, style(['*', {height: '200px'}]))
-                  ])
-                ])
-              ])
-            ]
-          })
-          class Cmp {
-           public exp: any;
-           public items: any[]|undefined;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = 'on';
-         cmp.items = [0, 1, 2];
-         fixture.detectChanges();
-         engine.flush();
-
-         const players = getLog();
-         expect(players.length).toEqual(3);
-
-         players.forEach(p => {
-           expect(p.keyframes).toEqual([
-             new Map<string, string|number>(
-                 [['opacity', '0'], ['width', '0px'], ['height', '0px'], ['offset', 0]]),
-             new Map<string, string|number>(
-                 [['opacity', '1'], ['width', '0px'], ['height', '0px'], ['offset', .5]]),
-             new Map<string, string|number>([
-               ['opacity', AUTO_STYLE], ['width', AUTO_STYLE], ['height', '200px'], ['offset', 1]
-             ])
-           ]);
-         });
-       });
-
-    it('should query elements in sub components that do not contain animations using the :enter selector',
-       () => {
-         @Component({
-           selector: 'parent-cmp',
-           template: `
-            <div [@myAnimation]="exp">
-              <child-cmp #child></child-cmp>
+          animations: [
+            trigger('myAnimation', [
+              transition('* => on', [
+                query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+              ]),
+              transition('* => off', []),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] | undefined;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'on';
+        cmp.items = [0, 1, 2, 3, 4];
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(5);
+
+        let count = 0;
+        players.forEach((p) => {
+          p.onDone(() => count++);
+        });
+
+        expect(count).toEqual(0);
+
+        cmp.exp = 'off';
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(count).toEqual(5);
+      });
+
+      it('should finish queried players when the previous player is finished', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp" class="parent">
+              <div *ngFor="let item of items" class="child">
+                {{ item }}
+              </div>
             </div>
           `,
-           animations: [trigger(
-               'myAnimation',
-               [transition(
-                   '* => on',
-                   [query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))])])])]
-         })
-         class ParentCmp {
-           public exp: any;
-
-           @ViewChild('child') public child: any;
-         }
-
-         @Component({
-           selector: 'child-cmp',
-           template: `
-            <div *ngFor="let item of items">
-              {{ item }}
-            </div>
-          `
-         })
-         class ChildCmp {
-           public items: any[] = [];
-         }
-
-         TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-         const fixture = TestBed.createComponent(ParentCmp);
-         const cmp = fixture.componentInstance;
-         fixture.detectChanges();
-
-         cmp.exp = 'on';
-         cmp.child.items = [1, 2, 3];
-         fixture.detectChanges();
-
-         const players = getLog() as any[];
-         expect(players.length).toEqual(3);
-
-         expect(players[0].element.innerText.trim()).toEqual('1');
-         expect(players[1].element.innerText.trim()).toEqual('2');
-         expect(players[2].element.innerText.trim()).toEqual('3');
-       });
-
-    it('should query elements in sub components that do not contain animations using the :leave selector',
-       () => {
-         @Component({
-           selector: 'parent-cmp',
-           template: `
-            <div [@myAnimation]="exp">
-              <child-cmp #child></child-cmp>
+          animations: [
+            trigger('myAnimation', [
+              transition('* => on', [
+                query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+              ]),
+              transition('* => off', []),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] | undefined;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'on';
+        cmp.items = [0, 1, 2, 3, 4];
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(5);
+
+        let count = 0;
+        players.forEach((p) => {
+          p.onDone(() => count++);
+        });
+
+        expect(count).toEqual(0);
+
+        expect(engine.players.length).toEqual(1);
+        engine.players[0].finish();
+
+        expect(count).toEqual(5);
+      });
+
+      it('should allow multiple triggers to animate on queried elements at the same time', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@one]="exp1" [@two]="exp2" class="parent">
+              <div *ngFor="let item of items" class="child">
+                {{ item }}
+              </div>
             </div>
           `,
-           animations: [trigger(
-               'myAnimation',
-               [transition('* => on', [query(':leave', [animate(1000, style({opacity: 0}))])])])]
-         })
-         class ParentCmp {
-           public exp: any;
-
-           @ViewChild('child', {static: true}) public child: any;
-         }
-
-         @Component({
-           selector: 'child-cmp',
-           template: `
-            <div *ngFor="let item of items">
-              {{ item }}
+          animations: [
+            trigger('one', [
+              transition('* => on', [
+                query('.child', [style({width: '0px'}), animate(1000, style({width: '100px'}))]),
+              ]),
+              transition('* => off', []),
+            ]),
+            trigger('two', [
+              transition('* => on', [
+                query('.child:nth-child(odd)', [
+                  style({height: '0px'}),
+                  animate(1000, style({height: '100px'})),
+                ]),
+              ]),
+              transition('* => off', []),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+          public items: any[] | undefined;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = 'on';
+        cmp.items = [0, 1, 2, 3, 4];
+        fixture.detectChanges();
+        engine.flush();
+
+        let players = getLog();
+        expect(players.length).toEqual(5);
+
+        let count = 0;
+        players.forEach((p) => {
+          p.onDone(() => count++);
+        });
+
+        resetLog();
+
+        expect(count).toEqual(0);
+
+        cmp.exp2 = 'on';
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(count).toEqual(0);
+
+        players = getLog();
+        expect(players.length).toEqual(3);
+
+        players.forEach((p) => {
+          p.onDone(() => count++);
+        });
+
+        cmp.exp1 = 'off';
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(count).toEqual(5);
+
+        cmp.exp2 = 'off';
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(count).toEqual(8);
+      });
+
+      it("should cancel inner queried animations if a trigger state value changes, but isn't detected as a valid transition", () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp" class="parent">
+              <div *ngFor="let item of items" class="child">
+                {{ item }}
+              </div>
             </div>
-          `
-         })
-         class ChildCmp {
-           public items: any[] = [];
-         }
+          `,
+          animations: [
+            trigger('myAnimation', [
+              transition('* => on', [
+                query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] | undefined;
+        }
 
-         TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-         const fixture = TestBed.createComponent(ParentCmp);
-         const cmp = fixture.componentInstance;
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-         cmp.child.items = [4, 5, 6];
-         fixture.detectChanges();
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-         cmp.exp = 'on';
-         cmp.child.items = [];
-         fixture.detectChanges();
+        cmp.exp = 'on';
+        cmp.items = [0, 1, 2, 3, 4];
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(5);
+
+        let count = 0;
+        players.forEach((p) => {
+          p.onDone(() => count++);
+        });
 
-         const players = getLog() as any[];
-         expect(players.length).toEqual(3);
+        expect(count).toEqual(0);
 
-         expect(players[0].element.innerText.trim()).toEqual('4');
-         expect(players[1].element.innerText.trim()).toEqual('5');
-         expect(players[2].element.innerText.trim()).toEqual('6');
-       });
+        cmp.exp = 'off';
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(count).toEqual(5);
+      });
 
-    describe('options.limit', () => {
-      it('should limit results when a limit value is passed into the query options', () => {
+      it('should allow for queried items to restore their styling back to the original state via animate(time, "*")', () => {
         @Component({
-          selector: 'cmp',
+          selector: 'ani-cmp',
           template: `
-             <div [@myAnimation]="exp">
-              <div *ngFor="let item of items" class="item">
+            <div [@myAnimation]="exp" class="parent">
+              <div *ngFor="let item of items" class="child">
                 {{ item }}
               </div>
-             </div>
+            </div>
           `,
           animations: [
-            trigger(
-                'myAnimation',
-                [
-                  transition(
-                      '* => go',
-                      [
-                        query(
-                            '.item',
-                            [
-                              style({opacity: 0}),
-                              animate('1s', style({opacity: 1})),
-                            ],
-                            {limit: 2}),
-                      ]),
+            trigger('myAnimation', [
+              transition('* => on', [
+                query(':enter', [
+                  style({opacity: '0', width: '0px', height: '0px'}),
+                  animate(1000, style({opacity: '1'})),
+                  animate(1000, style(['*', {height: '200px'}])),
                 ]),
-          ]
+              ]),
+            ]),
+          ],
         })
         class Cmp {
           public exp: any;
-          public items: any[] = [];
+          public items: any[] | undefined;
         }
 
         TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
         const fixture = TestBed.createComponent(Cmp);
         const cmp = fixture.componentInstance;
-        cmp.items = ['a', 'b', 'c', 'd', 'e'];
+
+        cmp.exp = 'on';
+        cmp.items = [0, 1, 2];
         fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(3);
+
+        players.forEach((p) => {
+          expect(p.keyframes).toEqual([
+            new Map<string, string | number>([
+              ['opacity', '0'],
+              ['width', '0px'],
+              ['height', '0px'],
+              ['offset', 0],
+            ]),
+            new Map<string, string | number>([
+              ['opacity', '1'],
+              ['width', '0px'],
+              ['height', '0px'],
+              ['offset', 0.5],
+            ]),
+            new Map<string, string | number>([
+              ['opacity', AUTO_STYLE],
+              ['width', AUTO_STYLE],
+              ['height', '200px'],
+              ['offset', 1],
+            ]),
+          ]);
+        });
+      });
 
-        cmp.exp = 'go';
+      it('should query elements in sub components that do not contain animations using the :enter selector', () => {
+        @Component({
+          selector: 'parent-cmp',
+          template: `
+            <div [@myAnimation]="exp">
+              <child-cmp #child></child-cmp>
+            </div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              transition('* => on', [
+                query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+              ]),
+            ]),
+          ],
+        })
+        class ParentCmp {
+          public exp: any;
+
+          @ViewChild('child') public child: any;
+        }
+
+        @Component({
+          selector: 'child-cmp',
+          template: `
+            <div *ngFor="let item of items">
+              {{ item }}
+            </div>
+          `,
+        })
+        class ChildCmp {
+          public items: any[] = [];
+        }
+
+        TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+        const fixture = TestBed.createComponent(ParentCmp);
+        const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+
+        cmp.exp = 'on';
+        cmp.child.items = [1, 2, 3];
         fixture.detectChanges();
 
         const players = getLog() as any[];
-        expect(players.length).toEqual(2);
-        expect(players[0].element.innerText.trim()).toEqual('a');
-        expect(players[1].element.innerText.trim()).toEqual('b');
+        expect(players.length).toEqual(3);
+
+        expect(players[0].element.innerText.trim()).toEqual('1');
+        expect(players[1].element.innerText.trim()).toEqual('2');
+        expect(players[2].element.innerText.trim()).toEqual('3');
+      });
+
+      it('should query elements in sub components that do not contain animations using the :leave selector', () => {
+        @Component({
+          selector: 'parent-cmp',
+          template: `
+            <div [@myAnimation]="exp">
+              <child-cmp #child></child-cmp>
+            </div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              transition('* => on', [query(':leave', [animate(1000, style({opacity: 0}))])]),
+            ]),
+          ],
+        })
+        class ParentCmp {
+          public exp: any;
+
+          @ViewChild('child', {static: true}) public child: any;
+        }
+
+        @Component({
+          selector: 'child-cmp',
+          template: `
+            <div *ngFor="let item of items">
+              {{ item }}
+            </div>
+          `,
+        })
+        class ChildCmp {
+          public items: any[] = [];
+        }
+
+        TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+        const fixture = TestBed.createComponent(ParentCmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.child.items = [4, 5, 6];
+        fixture.detectChanges();
+
+        cmp.exp = 'on';
+        cmp.child.items = [];
+        fixture.detectChanges();
+
+        const players = getLog() as any[];
+        expect(players.length).toEqual(3);
+
+        expect(players[0].element.innerText.trim()).toEqual('4');
+        expect(players[1].element.innerText.trim()).toEqual('5');
+        expect(players[2].element.innerText.trim()).toEqual('6');
       });
 
-      it('should support negative limit values by pulling in elements from the end of the query',
-         () => {
-           @Component({
-             selector: 'cmp',
-             template: `
+      describe('options.limit', () => {
+        it('should limit results when a limit value is passed into the query options', () => {
+          @Component({
+            selector: 'cmp',
+            template: `
+             <div [@myAnimation]="exp">
+              <div *ngFor="let item of items" class="item">
+                {{ item }}
+              </div>
+             </div>
+          `,
+            animations: [
+              trigger('myAnimation', [
+                transition('* => go', [
+                  query('.item', [style({opacity: 0}), animate('1s', style({opacity: 1}))], {
+                    limit: 2,
+                  }),
+                ]),
+              ]),
+            ],
+          })
+          class Cmp {
+            public exp: any;
+            public items: any[] = [];
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          cmp.items = ['a', 'b', 'c', 'd', 'e'];
+          fixture.detectChanges();
+
+          cmp.exp = 'go';
+          fixture.detectChanges();
+
+          const players = getLog() as any[];
+          expect(players.length).toEqual(2);
+          expect(players[0].element.innerText.trim()).toEqual('a');
+          expect(players[1].element.innerText.trim()).toEqual('b');
+        });
+
+        it('should support negative limit values by pulling in elements from the end of the query', () => {
+          @Component({
+            selector: 'cmp',
+            template: `
              <div [@myAnimation]="exp">
               <div *ngFor="let item of items" class="item">
                 {{ item }}
               </div>
              </div>
           `,
-             animations: [
-               trigger(
-                   'myAnimation',
-                   [
-                     transition(
-                         '* => go',
-                         [
-                           query(
-                               '.item',
-                               [
-                                 style({opacity: 0}),
-                                 animate('1s', style({opacity: 1})),
-                               ],
-                               {limit: -3}),
-                         ]),
-                   ]),
-             ]
-           })
-           class Cmp {
-             public exp: any;
-             public items: any[] = [];
-           }
-
-           TestBed.configureTestingModule({declarations: [Cmp]});
-           const fixture = TestBed.createComponent(Cmp);
-           const cmp = fixture.componentInstance;
-           cmp.items = ['a', 'b', 'c', 'd', 'e'];
-           fixture.detectChanges();
-
-           cmp.exp = 'go';
-           fixture.detectChanges();
-
-           const players = getLog() as any[];
-           expect(players.length).toEqual(3);
-           expect(players[0].element.innerText.trim()).toEqual('c');
-           expect(players[1].element.innerText.trim()).toEqual('d');
-           expect(players[2].element.innerText.trim()).toEqual('e');
-         });
+            animations: [
+              trigger('myAnimation', [
+                transition('* => go', [
+                  query('.item', [style({opacity: 0}), animate('1s', style({opacity: 1}))], {
+                    limit: -3,
+                  }),
+                ]),
+              ]),
+            ],
+          })
+          class Cmp {
+            public exp: any;
+            public items: any[] = [];
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          cmp.items = ['a', 'b', 'c', 'd', 'e'];
+          fixture.detectChanges();
+
+          cmp.exp = 'go';
+          fixture.detectChanges();
+
+          const players = getLog() as any[];
+          expect(players.length).toEqual(3);
+          expect(players[0].element.innerText.trim()).toEqual('c');
+          expect(players[1].element.innerText.trim()).toEqual('d');
+          expect(players[2].element.innerText.trim()).toEqual('e');
+        });
+      });
     });
-  });
 
-  describe('sub triggers', () => {
-    it('should animate a sub trigger that exists in an inner element in the template', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
+    describe('sub triggers', () => {
+      it('should animate a sub trigger that exists in an inner element in the template', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div #parent class="parent" [@parent]="exp1">
               <div #child class="child" [@child]="exp2"></div>
             </div>
           `,
-        animations: [
-          trigger('parent', [transition(
-                                '* => go1',
-                                [
-                                  style({width: '0px'}), animate(1000, style({width: '100px'})),
-                                  query('.child', [animateChild()])
-                                ])]),
-          trigger('child', [transition(
-                               '* => go2',
-                               [
-                                 style({height: '0px'}),
-                                 animate(1000, style({height: '100px'})),
-                               ])])
-        ]
-      })
-      class Cmp {
-        public exp1: any;
-        public exp2: any;
-
-        @ViewChild('parent') public elm1: any;
-
-        @ViewChild('child') public elm2: any;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp1 = 'go1';
-      cmp.exp2 = 'go2';
-      fixture.detectChanges();
-      engine.flush();
-
-      const elm1 = cmp.elm1;
-      const elm2 = cmp.elm2;
-
-      const players = getLog();
-
-      // players:
-      //  - _scp (skipped child player): player for the child animation
-      //  - pp (parent player): player for parent animation (from 0px to 100px)
-      //  - pcp (parent child player):
-      //      player for child animation executed by parent via query and animateChild
-      const [_scp, pp, pcp] = players;
-      expect(pp.delay).toEqual(0);
-      expect(pp.element).toEqual(elm1.nativeElement);
-      expect(pp.duration).toEqual(1000);
-      expect(pp.keyframes).toEqual([
-        new Map<string, string|number>([['width', '0px'], ['offset', 0]]),
-        new Map<string, string|number>([['width', '100px'], ['offset', 1]])
-      ]);
-
-      expect(pcp.delay).toEqual(0);
-      expect(pcp.element).toEqual(elm2.nativeElement);
-      expect(pcp.duration).toEqual(2000);
-      expect(pcp.keyframes).toEqual([
-        new Map<string, string|number>([['height', '0px'], ['offset', 0]]),
-        new Map<string, string|number>([['height', '0px'], ['offset', .5]]),
-        new Map<string, string|number>([['height', '100px'], ['offset', 1]])
-      ]);
-    });
+          animations: [
+            trigger('parent', [
+              transition('* => go1', [
+                style({width: '0px'}),
+                animate(1000, style({width: '100px'})),
+                query('.child', [animateChild()]),
+              ]),
+            ]),
+            trigger('child', [
+              transition('* => go2', [
+                style({height: '0px'}),
+                animate(1000, style({height: '100px'})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+
+          @ViewChild('parent') public elm1: any;
+
+          @ViewChild('child') public elm2: any;
+        }
 
-    it('should run and operate a series of triggers on a list of elements with overridden timing data',
-       () => {
-         @Component({
-             selector: 'ani-cmp',
-             template: `
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = 'go1';
+        cmp.exp2 = 'go2';
+        fixture.detectChanges();
+        engine.flush();
+
+        const elm1 = cmp.elm1;
+        const elm2 = cmp.elm2;
+
+        const players = getLog();
+
+        // players:
+        //  - _scp (skipped child player): player for the child animation
+        //  - pp (parent player): player for parent animation (from 0px to 100px)
+        //  - pcp (parent child player):
+        //      player for child animation executed by parent via query and animateChild
+        const [_scp, pp, pcp] = players;
+        expect(pp.delay).toEqual(0);
+        expect(pp.element).toEqual(elm1.nativeElement);
+        expect(pp.duration).toEqual(1000);
+        expect(pp.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['width', '0px'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['width', '100px'],
+            ['offset', 1],
+          ]),
+        ]);
+
+        expect(pcp.delay).toEqual(0);
+        expect(pcp.element).toEqual(elm2.nativeElement);
+        expect(pcp.duration).toEqual(2000);
+        expect(pcp.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['height', '0px'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['height', '0px'],
+            ['offset', 0.5],
+          ]),
+          new Map<string, string | number>([
+            ['height', '100px'],
+            ['offset', 1],
+          ]),
+        ]);
+      });
+
+      it('should run and operate a series of triggers on a list of elements with overridden timing data', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div #parent class="parent" [@parent]="exp">
               <div class="item" *ngFor="let item of items" @child></div>
             </div>
           `,
-             animations: [
-               trigger('parent', [transition(
-                                     '* => go',
-                                     [
-                                       style({opacity: '0'}), animate(1000, style({opacity: '1'})),
-                                       query('.item', [animateChild({ duration: '2.5s', delay: '500ms' })]),
-                                       animate(1000, style({opacity: '0'}))
-                                     ])]),
-               trigger('child', [transition(
-                                    ':enter',
-                                    [
-                                      style({height: '0px'}),
-                                      animate(1000, style({height: '100px'})),
-                                    ])])
-             ]
-           })
-           class Cmp {
-           public exp: any;
-           public items: any[] = [0, 1, 2, 3, 4];
-
-           @ViewChild('parent') public elm: any;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = 'go';
-         fixture.detectChanges();
-         engine.flush();
-
-         const parent = cmp.elm.nativeElement;
-         const elements = parent.querySelectorAll('.item');
-
-         const players = getLog();
-         expect(players.length).toEqual(12);
-
-         // players:
-         //  - _sc1p, _sc2p, _sc3p, _sc4p (skipped child n (1 to 4) players):
-         //     players for the children animations
-         //  - pp1 (parent player 1): player for parent animation (from opacity 0 to opacity 1)
-         //  - pc1p, pc2p, pc3p, pc4p, pc5p  (parent child n (1 to 4) player):
-         //     players for children animations executed by parent via query and animateChild
-         //  - pp2 (parent player 2): player for parent animation (from opacity 1 to opacity 0)
-         const [_sc1p, _sc2p, _sc3p, _sc4p, _sc5p, pp1, pc1p, pc2p, pc3p, pc4p, pc5p, pp2] =
-             players;
-
-         expect(pp1.element).toEqual(parent);
-         expect(pp1.delay).toEqual(0);
-         expect(pp1.duration).toEqual(1000);
-
-         expect(pc1p.element).toEqual(elements[0]);
-         expect(pc1p.delay).toEqual(0);
-         expect(pc1p.duration).toEqual(4000);
-
-         expect(pc2p.element).toEqual(elements[1]);
-         expect(pc2p.delay).toEqual(0);
-         expect(pc2p.duration).toEqual(4000);
-
-         expect(pc3p.element).toEqual(elements[2]);
-         expect(pc3p.delay).toEqual(0);
-         expect(pc3p.duration).toEqual(4000);
-
-         expect(pc4p.element).toEqual(elements[3]);
-         expect(pc4p.delay).toEqual(0);
-         expect(pc4p.duration).toEqual(4000);
-
-         expect(pc5p.element).toEqual(elements[4]);
-         expect(pc5p.delay).toEqual(0);
-         expect(pc5p.duration).toEqual(4000);
-
-         expect(pp2.element).toEqual(parent);
-         expect(pp2.delay).toEqual(4000);
-         expect(pp2.duration).toEqual(1000);
-       });
-
-    it('should silently continue if a sub trigger is animated that doesn\'t exist', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
+          animations: [
+            trigger('parent', [
+              transition('* => go', [
+                style({opacity: '0'}),
+                animate(1000, style({opacity: '1'})),
+                query('.item', [animateChild({duration: '2.5s', delay: '500ms'})]),
+                animate(1000, style({opacity: '0'})),
+              ]),
+            ]),
+            trigger('child', [
+              transition(':enter', [
+                style({height: '0px'}),
+                animate(1000, style({height: '100px'})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] = [0, 1, 2, 3, 4];
+
+          @ViewChild('parent') public elm: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const parent = cmp.elm.nativeElement;
+        const elements = parent.querySelectorAll('.item');
+
+        const players = getLog();
+        expect(players.length).toEqual(12);
+
+        // players:
+        //  - _sc1p, _sc2p, _sc3p, _sc4p (skipped child n (1 to 4) players):
+        //     players for the children animations
+        //  - pp1 (parent player 1): player for parent animation (from opacity 0 to opacity 1)
+        //  - pc1p, pc2p, pc3p, pc4p, pc5p  (parent child n (1 to 4) player):
+        //     players for children animations executed by parent via query and animateChild
+        //  - pp2 (parent player 2): player for parent animation (from opacity 1 to opacity 0)
+        const [_sc1p, _sc2p, _sc3p, _sc4p, _sc5p, pp1, pc1p, pc2p, pc3p, pc4p, pc5p, pp2] = players;
+
+        expect(pp1.element).toEqual(parent);
+        expect(pp1.delay).toEqual(0);
+        expect(pp1.duration).toEqual(1000);
+
+        expect(pc1p.element).toEqual(elements[0]);
+        expect(pc1p.delay).toEqual(0);
+        expect(pc1p.duration).toEqual(4000);
+
+        expect(pc2p.element).toEqual(elements[1]);
+        expect(pc2p.delay).toEqual(0);
+        expect(pc2p.duration).toEqual(4000);
+
+        expect(pc3p.element).toEqual(elements[2]);
+        expect(pc3p.delay).toEqual(0);
+        expect(pc3p.duration).toEqual(4000);
+
+        expect(pc4p.element).toEqual(elements[3]);
+        expect(pc4p.delay).toEqual(0);
+        expect(pc4p.duration).toEqual(4000);
+
+        expect(pc5p.element).toEqual(elements[4]);
+        expect(pc5p.delay).toEqual(0);
+        expect(pc5p.duration).toEqual(4000);
+
+        expect(pp2.element).toEqual(parent);
+        expect(pp2.delay).toEqual(4000);
+        expect(pp2.duration).toEqual(1000);
+      });
+
+      it("should silently continue if a sub trigger is animated that doesn't exist", () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div #parent class="parent" [@parent]="exp">
               <div class="child"></div>
             </div>
           `,
-        animations:
-            [trigger('parent', [transition(
-                                   '* => go',
-                                   [
-                                     style({opacity: 0}), animate(1000, style({opacity: 1})),
-                                     query('.child', [animateChild({duration: '1s'})]),
-                                     animate(1000, style({opacity: 0}))
-                                   ])])]
-      })
-      class Cmp {
-        public exp: any;
-        public items: any[] = [0, 1, 2, 3, 4];
-
-        @ViewChild('parent') public elm: any;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp = 'go';
-      fixture.detectChanges();
-      engine.flush();
-
-      const parent = cmp.elm.nativeElement;
-      const players = getLog();
-      expect(players.length).toEqual(2);
-
-      const [pA, pZ] = players;
-      expect(pA.element).toEqual(parent);
-      expect(pA.delay).toEqual(0);
-      expect(pA.duration).toEqual(1000);
-
-      expect(pZ.element).toEqual(parent);
-      expect(pZ.delay).toEqual(1000);
-      expect(pZ.duration).toEqual(1000);
-    });
+          animations: [
+            trigger('parent', [
+              transition('* => go', [
+                style({opacity: 0}),
+                animate(1000, style({opacity: 1})),
+                query('.child', [animateChild({duration: '1s'})]),
+                animate(1000, style({opacity: 0})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] = [0, 1, 2, 3, 4];
+
+          @ViewChild('parent') public elm: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const parent = cmp.elm.nativeElement;
+        const players = getLog();
+        expect(players.length).toEqual(2);
+
+        const [pA, pZ] = players;
+        expect(pA.element).toEqual(parent);
+        expect(pA.delay).toEqual(0);
+        expect(pA.duration).toEqual(1000);
 
-    it('should silently continue if a sub trigger is animated that doesn\'t contain a trigger that is setup for animation',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
+        expect(pZ.element).toEqual(parent);
+        expect(pZ.delay).toEqual(1000);
+        expect(pZ.duration).toEqual(1000);
+      });
+
+      it("should silently continue if a sub trigger is animated that doesn't contain a trigger that is setup for animation", () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div #parent class="parent" [@parent]="exp1">
               <div [@child]="exp2" class="child"></div>
             </div>
           `,
-           animations: [
-             trigger(
-                 'child',
-                 [transition('a => z', [style({opacity: 0}), animate(1000, style({opacity: 1}))])]),
-             trigger('parent', [transition(
-                                   'a => z',
-                                   [
-                                     style({opacity: 0}), animate(1000, style({opacity: 1})),
-                                     query('.child', [animateChild({duration: '1s'})]),
-                                     animate(1000, style({opacity: 0}))
-                                   ])])
-           ]
-         })
-         class Cmp {
-           public exp1: any;
-           public exp2: any;
-
-           @ViewChild('parent') public elm: any;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp1 = 'a';
-         cmp.exp2 = 'a';
-         fixture.detectChanges();
-         engine.flush();
-         resetLog();
-
-         cmp.exp1 = 'z';
-         fixture.detectChanges();
-         engine.flush();
-
-         const parent = cmp.elm.nativeElement;
-         const players = getLog();
-         expect(players.length).toEqual(2);
-
-         const [pA, pZ] = players;
-         expect(pA.element).toEqual(parent);
-         expect(pA.delay).toEqual(0);
-         expect(pA.duration).toEqual(1000);
-
-         expect(pZ.element).toEqual(parent);
-         expect(pZ.delay).toEqual(1000);
-         expect(pZ.duration).toEqual(1000);
-       });
-
-    it('should animate all sub triggers on the element at the same time', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
+          animations: [
+            trigger('child', [
+              transition('a => z', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+            ]),
+            trigger('parent', [
+              transition('a => z', [
+                style({opacity: 0}),
+                animate(1000, style({opacity: 1})),
+                query('.child', [animateChild({duration: '1s'})]),
+                animate(1000, style({opacity: 0})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+
+          @ViewChild('parent') public elm: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = 'a';
+        cmp.exp2 = 'a';
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp1 = 'z';
+        fixture.detectChanges();
+        engine.flush();
+
+        const parent = cmp.elm.nativeElement;
+        const players = getLog();
+        expect(players.length).toEqual(2);
+
+        const [pA, pZ] = players;
+        expect(pA.element).toEqual(parent);
+        expect(pA.delay).toEqual(0);
+        expect(pA.duration).toEqual(1000);
+
+        expect(pZ.element).toEqual(parent);
+        expect(pZ.delay).toEqual(1000);
+        expect(pZ.duration).toEqual(1000);
+      });
+
+      it('should animate all sub triggers on the element at the same time', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div #parent class="parent" [@parent]="exp1">
               <div [@w]="exp2" [@h]="exp2" class="child"></div>
             </div>
           `,
-        animations: [
-          trigger(
-              'w',
-              [transition('* => go', [style({width: 0}), animate(1800, style({width: '100px'}))])]),
-          trigger(
-              'h', [transition(
-                       '* => go', [style({height: 0}), animate(1500, style({height: '100px'}))])]),
-          trigger(
-              'parent', [transition(
-                            '* => go',
-                            [
-                              style({opacity: 0}), animate(1000, style({opacity: 1})),
-                              query('.child', [animateChild()]), animate(1000, style({opacity: 0}))
-                            ])])
-        ]
-      })
-      class Cmp {
-        public exp1: any;
-        public exp2: any;
-
-        @ViewChild('parent') public elm: any;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp1 = 'go';
-      cmp.exp2 = 'go';
-      fixture.detectChanges();
-      engine.flush();
-
-      const players = getLog();
-      expect(players.length).toEqual(6);
-
-      // players:
-      //  - _scwp (skipped child w player): player for the child animation (trigger w)
-      //  - _schp (skipped child h player): player for the child animation (trigger h)
-      //  - _pp1 (parent player 1): player for parent animation (from opacity 0 to opacity 1)
-      //  - pcwp (parent child w player):
-      //      player for child w animation executed by parent via query and animateChild
-      //  - pchp (parent child h player):
-      //      player for child w animation executed by parent via query and animateChild
-      //  - pp2 (parent player 2): player for parent animation (from opacity 1 to opacity 0)
-      const [_scwp, _schp, _pp1, pcwp, pchp, pp2] = players;
-
-      expect(pcwp.delay).toEqual(0);
-      expect(pcwp.duration).toEqual(2800);
-
-      expect(pchp.delay).toEqual(0);
-      expect(pchp.duration).toEqual(2500);
-
-      expect(pp2.delay).toEqual(2800);
-      expect(pp2.duration).toEqual(1000);
-    });
+          animations: [
+            trigger('w', [
+              transition('* => go', [style({width: 0}), animate(1800, style({width: '100px'}))]),
+            ]),
+            trigger('h', [
+              transition('* => go', [style({height: 0}), animate(1500, style({height: '100px'}))]),
+            ]),
+            trigger('parent', [
+              transition('* => go', [
+                style({opacity: 0}),
+                animate(1000, style({opacity: 1})),
+                query('.child', [animateChild()]),
+                animate(1000, style({opacity: 0})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+
+          @ViewChild('parent') public elm: any;
+        }
 
-    it('should skip a sub animation when a zero duration value is passed in', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = 'go';
+        cmp.exp2 = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(6);
+
+        // players:
+        //  - _scwp (skipped child w player): player for the child animation (trigger w)
+        //  - _schp (skipped child h player): player for the child animation (trigger h)
+        //  - _pp1 (parent player 1): player for parent animation (from opacity 0 to opacity 1)
+        //  - pcwp (parent child w player):
+        //      player for child w animation executed by parent via query and animateChild
+        //  - pchp (parent child h player):
+        //      player for child w animation executed by parent via query and animateChild
+        //  - pp2 (parent player 2): player for parent animation (from opacity 1 to opacity 0)
+        const [_scwp, _schp, _pp1, pcwp, pchp, pp2] = players;
+
+        expect(pcwp.delay).toEqual(0);
+        expect(pcwp.duration).toEqual(2800);
+
+        expect(pchp.delay).toEqual(0);
+        expect(pchp.duration).toEqual(2500);
+
+        expect(pp2.delay).toEqual(2800);
+        expect(pp2.duration).toEqual(1000);
+      });
+
+      it('should skip a sub animation when a zero duration value is passed in', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div #parent class="parent" [@parent]="exp1">
               <div [@child]="exp2" class="child"></div>
             </div>
           `,
-        animations: [
-          trigger(
-              'child',
-              [transition('* => go', [style({width: 0}), animate(1800, style({width: '100px'}))])]),
-          trigger('parent', [transition(
-                                '* => go',
-                                [
-                                  style({opacity: 0}), animate(1000, style({opacity: 1})),
-                                  query('.child', [animateChild({duration: '0'})]),
-                                  animate(1000, style({opacity: 0}))
-                                ])])
-        ]
-      })
-      class Cmp {
-        public exp1: any;
-        public exp2: any;
-
-        @ViewChild('parent') public elm: any;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp1 = 'go';
-      cmp.exp2 = 'go';
-      fixture.detectChanges();
-      engine.flush();
-
-      const players = getLog();
-      expect(players.length).toEqual(3);
-
-      // players:
-      //  - _scp (skipped child player): player for the child animation
-      //  - pp1 (parent player 1): player for parent animation (from opacity 0 to opacity 1)
-      //  - ( the player for the child animation executed by parent via query
-      //      and animateChild is skipped entirely )
-      //  - pp2 (parent player 2): player for parent animation (from opacity 1 to opacity 0)
-      const [_scp, pp1, pp2] = players;
-
-      expect(pp1.delay).toEqual(0);
-      expect(pp1.duration).toEqual(1000);
-
-      expect(pp2.delay).toEqual(1000);
-      expect(pp2.duration).toEqual(1000);
-    });
+          animations: [
+            trigger('child', [
+              transition('* => go', [style({width: 0}), animate(1800, style({width: '100px'}))]),
+            ]),
+            trigger('parent', [
+              transition('* => go', [
+                style({opacity: 0}),
+                animate(1000, style({opacity: 1})),
+                query('.child', [animateChild({duration: '0'})]),
+                animate(1000, style({opacity: 0})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+
+          @ViewChild('parent') public elm: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
 
-    it('should only allow a sub animation to be used up by a parent trigger once', () => {
-      @Component({
-        selector: 'ani-cmp',
-        template: `
+        cmp.exp1 = 'go';
+        cmp.exp2 = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(3);
+
+        // players:
+        //  - _scp (skipped child player): player for the child animation
+        //  - pp1 (parent player 1): player for parent animation (from opacity 0 to opacity 1)
+        //  - ( the player for the child animation executed by parent via query
+        //      and animateChild is skipped entirely )
+        //  - pp2 (parent player 2): player for parent animation (from opacity 1 to opacity 0)
+        const [_scp, pp1, pp2] = players;
+
+        expect(pp1.delay).toEqual(0);
+        expect(pp1.duration).toEqual(1000);
+
+        expect(pp2.delay).toEqual(1000);
+        expect(pp2.duration).toEqual(1000);
+      });
+
+      it('should only allow a sub animation to be used up by a parent trigger once', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div [@parent]="exp1" class="parent1" #parent>
               <div [@parent]="exp1" class="parent2">
                 <div [@child]="exp2" class="child">
@@ -2238,371 +2217,313 @@ describe('animation query tests', function() {
               </div>
             </div>
           `,
-        animations: [
-          trigger('parent', [transition(
-                                '* => go',
-                                [
-                                  style({opacity: 0}), animate(1000, style({opacity: 1})),
-                                  query('.child', animateChild())
-                                ])]),
-          trigger(
-              'child',
-              [transition('* => go', [style({opacity: 0}), animate(1800, style({opacity: 1}))])])
-        ]
-      })
-      class Cmp {
-        public exp1: any;
-        public exp2: any;
-
-        @ViewChild('parent') public elm: any;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-
-      cmp.exp1 = 'go';
-      cmp.exp2 = 'go';
-      fixture.detectChanges();
-      engine.flush();
-
-      const players = getLog();
-      expect(players.length).toEqual(5);
-
-      // players:
-      //  - _scp (skipped child player): player for the child animation
-      // (note: parent2 is evaluated first because it is inside of parent1)
-      //  - p2p (parent 2 player): player for parent animation (from opacity 0 to opacity 1)
-      //  - p2cp (parent 2 child player):
-      //      player for child animation executed by parent 2 via query and animateChild
-      //  - p1p (parent 1 player): player for parent animation (from opacity 0 to opacity 1)
-      //  - p1cp (parent 1 child player):
-      //      player for child animation executed by parent 1 via query and animateChild
-      const [_scp, p2p, p2cp, p1p, p1cp] = players;
-
-      expect(p2p.element.classList.contains('parent2')).toBeTruthy();
-      expect(p2cp.element.classList.contains('child')).toBeTruthy();
-      expect(p1p.element.classList.contains('parent1')).toBeTruthy();
-      expect(p1cp.element.classList.contains('child')).toBeTruthy();
-    });
+          animations: [
+            trigger('parent', [
+              transition('* => go', [
+                style({opacity: 0}),
+                animate(1000, style({opacity: 1})),
+                query('.child', animateChild()),
+              ]),
+            ]),
+            trigger('child', [
+              transition('* => go', [style({opacity: 0}), animate(1800, style({opacity: 1}))]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+
+          @ViewChild('parent') public elm: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-    it('should emulate a leave animation on the nearest sub host elements when a parent is removed',
-       fakeAsync(() => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = 'go';
+        cmp.exp2 = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(5);
+
+        // players:
+        //  - _scp (skipped child player): player for the child animation
+        // (note: parent2 is evaluated first because it is inside of parent1)
+        //  - p2p (parent 2 player): player for parent animation (from opacity 0 to opacity 1)
+        //  - p2cp (parent 2 child player):
+        //      player for child animation executed by parent 2 via query and animateChild
+        //  - p1p (parent 1 player): player for parent animation (from opacity 0 to opacity 1)
+        //  - p1cp (parent 1 child player):
+        //      player for child animation executed by parent 1 via query and animateChild
+        const [_scp, p2p, p2cp, p1p, p1cp] = players;
+
+        expect(p2p.element.classList.contains('parent2')).toBeTruthy();
+        expect(p2cp.element.classList.contains('child')).toBeTruthy();
+        expect(p1p.element.classList.contains('parent1')).toBeTruthy();
+        expect(p1cp.element.classList.contains('child')).toBeTruthy();
+      });
+
+      it('should emulate a leave animation on the nearest sub host elements when a parent is removed', fakeAsync(() => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div @parent *ngIf="exp" class="parent1" #parent>
               <child-cmp #child @leave (@leave.start)="animateStart($event)"></child-cmp>
             </div>
           `,
-           animations: [
-             trigger(
-                 'leave',
-                 [
-                   transition(':leave', [animate(1000, style({color: 'gold'}))]),
-                 ]),
-             trigger(
-                 'parent',
-                 [
-                   transition(':leave', [query(':leave', animateChild())]),
-                 ]),
-           ]
-         })
-         class ParentCmp {
-           public exp: boolean = true;
-           @ViewChild('child') public childElm: any;
-
-           public childEvent: any;
-
-           animateStart(event: any) {
-             if (event.toState == 'void') {
-               this.childEvent = event;
-             }
-           }
-         }
-
-         @Component({
-           selector: 'child-cmp',
-           template: '...',
-           animations: [
-             trigger(
-                 'child',
-                 [
-                   transition(':leave', [animate(1000, style({color: 'gold'}))]),
-                 ]),
-           ]
-         })
-         class ChildCmp {
-           public childEvent: any;
-
-           @HostBinding('@child') public animate = true;
-
-           @HostListener('@child.start', ['$event'])
-           animateStart(event: any) {
-             if (event.toState == 'void') {
-               this.childEvent = event;
-             }
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-         const fixture = TestBed.createComponent(ParentCmp);
-         const cmp = fixture.componentInstance;
-
-         fixture.detectChanges();
-
-         const childCmp = cmp.childElm;
-
-         cmp.exp = false;
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         expect(cmp.childEvent.toState).toEqual('void');
-         expect(cmp.childEvent.totalTime).toEqual(1000);
-         expect(childCmp.childEvent.toState).toEqual('void');
-         expect(childCmp.childEvent.totalTime).toEqual(1000);
-       }));
-
-    it('should emulate a leave animation on a sub component\'s inner elements when a parent leave animation occurs with animateChild',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
+          animations: [
+            trigger('leave', [transition(':leave', [animate(1000, style({color: 'gold'}))])]),
+            trigger('parent', [transition(':leave', [query(':leave', animateChild())])]),
+          ],
+        })
+        class ParentCmp {
+          public exp: boolean = true;
+          @ViewChild('child') public childElm: any;
+
+          public childEvent: any;
+
+          animateStart(event: any) {
+            if (event.toState == 'void') {
+              this.childEvent = event;
+            }
+          }
+        }
+
+        @Component({
+          selector: 'child-cmp',
+          template: '...',
+          animations: [
+            trigger('child', [transition(':leave', [animate(1000, style({color: 'gold'}))])]),
+          ],
+        })
+        class ChildCmp {
+          public childEvent: any;
+
+          @HostBinding('@child') public animate = true;
+
+          @HostListener('@child.start', ['$event'])
+          animateStart(event: any) {
+            if (event.toState == 'void') {
+              this.childEvent = event;
+            }
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+        const fixture = TestBed.createComponent(ParentCmp);
+        const cmp = fixture.componentInstance;
+
+        fixture.detectChanges();
+
+        const childCmp = cmp.childElm;
+
+        cmp.exp = false;
+        fixture.detectChanges();
+        flushMicrotasks();
+
+        expect(cmp.childEvent.toState).toEqual('void');
+        expect(cmp.childEvent.totalTime).toEqual(1000);
+        expect(childCmp.childEvent.toState).toEqual('void');
+        expect(childCmp.childEvent.totalTime).toEqual(1000);
+      }));
+
+      it("should emulate a leave animation on a sub component's inner elements when a parent leave animation occurs with animateChild", () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div @myAnimation *ngIf="exp" class="parent">
               <child-cmp></child-cmp>
             </div>
           `,
-           animations: [
-             trigger(
-                 'myAnimation',
-                 [
-                   transition(
-                       ':leave',
-                       [
-                         query('@*', animateChild()),
-                       ]),
-                 ]),
-           ]
-         })
-         class ParentCmp {
-           public exp: boolean = true;
-         }
-
-         @Component({
-           selector: 'child-cmp',
-           template: `
+          animations: [
+            trigger('myAnimation', [transition(':leave', [query('@*', animateChild())])]),
+          ],
+        })
+        class ParentCmp {
+          public exp: boolean = true;
+        }
+
+        @Component({
+          selector: 'child-cmp',
+          template: `
                <section>
                  <div class="inner-div" @myChildAnimation></div>
                </section>
              `,
-           animations: [
-             trigger(
-                 'myChildAnimation',
-                 [
-                   transition(
-                       ':leave',
-                       [
-                         style({opacity: 0}),
-                         animate('1s', style({opacity: 1})),
-                       ]),
-                 ]),
-           ]
-         })
-         class ChildCmp {
-         }
-
-         TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(ParentCmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = true;
-         fixture.detectChanges();
-
-         cmp.exp = false;
-         fixture.detectChanges();
-
-         let players = getLog();
-         expect(players.length).toEqual(2);
-
-         // players:
-         //  - _scp (skipped child player): player for the child animation
-         //  - pcp (parent child player):
-         //     player for child animation executed by parent via query and animateChild
-         const [_scp, pcp] = players;
-
-         expect(pcp.element.classList.contains('inner-div')).toBeTruthy();
-         expect(pcp.keyframes).toEqual([
-           new Map<string, string|number>([['opacity', '0'], ['offset', 0]]),
-           new Map<string, string|number>([['opacity', '1'], ['offset', 1]]),
-         ]);
-       });
-
-    it(`should emulate a leave animation on a nested sub component's inner elements when a parent leave animation occurs with animateChild`,
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
+          animations: [
+            trigger('myChildAnimation', [
+              transition(':leave', [style({opacity: 0}), animate('1s', style({opacity: 1}))]),
+            ]),
+          ],
+        })
+        class ChildCmp {}
+
+        TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(ParentCmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = true;
+        fixture.detectChanges();
+
+        cmp.exp = false;
+        fixture.detectChanges();
+
+        let players = getLog();
+        expect(players.length).toEqual(2);
+
+        // players:
+        //  - _scp (skipped child player): player for the child animation
+        //  - pcp (parent child player):
+        //     player for child animation executed by parent via query and animateChild
+        const [_scp, pcp] = players;
+
+        expect(pcp.element.classList.contains('inner-div')).toBeTruthy();
+        expect(pcp.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['opacity', '0'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['opacity', '1'],
+            ['offset', 1],
+          ]),
+        ]);
+      });
+
+      it(`should emulate a leave animation on a nested sub component's inner elements when a parent leave animation occurs with animateChild`, () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div @myAnimation *ngIf="exp" class="parent">
               <child-cmp></child-cmp>
             </div>
           `,
-           animations: [
-             trigger(
-                 'myAnimation',
-                 [
-                   transition(
-                       ':leave',
-                       [
-                         query('@*', animateChild()),
-                       ]),
-                 ]),
-           ]
-         })
-         class ParentCmp {
-           public exp: boolean = true;
-         }
-
-         @Component({
-           selector: 'child-cmp',
-           template: `
+          animations: [
+            trigger('myAnimation', [transition(':leave', [query('@*', animateChild())])]),
+          ],
+        })
+        class ParentCmp {
+          public exp: boolean = true;
+        }
+
+        @Component({
+          selector: 'child-cmp',
+          template: `
                <nested-child-cmp></nested-child-cmp>
-             `
-         })
-         class ChildCmp {
-         }
-
-         @Component({
-           selector: 'nested-child-cmp',
-           template: `
+             `,
+        })
+        class ChildCmp {}
+
+        @Component({
+          selector: 'nested-child-cmp',
+          template: `
                <section>
                  <div class="inner-div" @myChildAnimation></div>
                </section>
              `,
-           animations: [
-             trigger(
-                 'myChildAnimation',
-                 [
-                   transition(
-                       ':leave',
-                       [
-                         style({opacity: 0}),
-                         animate('1s', style({opacity: 1})),
-                       ]),
-                 ]),
-           ]
-         })
-         class NestedChildCmp {
-         }
-
-         TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp, NestedChildCmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(ParentCmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = true;
-         fixture.detectChanges();
-
-         cmp.exp = false;
-         fixture.detectChanges();
-
-         // Inspect the players of the AnimationEngine and not those from getLog. The latter only
-         // returns the actual animation players, which the parent leave animation is not part
-         // of given that it does not have animation instructions of its own.
-         const players = engine.players;
-         expect(players.length).toEqual(1);
-         const player = players[0] as TransitionAnimationPlayer;
-         const realPlayer = player.getRealPlayer() as MockAnimationPlayer;
-
-         expect(player.element.classList.contains('parent')).toBeTruthy();
-         expect(realPlayer.element.classList.contains('inner-div')).toBeTruthy();
-         expect(realPlayer.keyframes).toEqual([
-           new Map<string, string|number>([['opacity', '0'], ['offset', 0]]),
-           new Map<string, string|number>([['opacity', '1'], ['offset', 1]]),
-         ]);
-       });
-
-    it('should not cause a removal of inner @trigger DOM nodes when a parent animation occurs',
-       fakeAsync(() => {
-         @Component({
-           selector: 'ani-cmp',
-           template: `
+          animations: [
+            trigger('myChildAnimation', [
+              transition(':leave', [style({opacity: 0}), animate('1s', style({opacity: 1}))]),
+            ]),
+          ],
+        })
+        class NestedChildCmp {}
+
+        TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp, NestedChildCmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(ParentCmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = true;
+        fixture.detectChanges();
+
+        cmp.exp = false;
+        fixture.detectChanges();
+
+        // Inspect the players of the AnimationEngine and not those from getLog. The latter only
+        // returns the actual animation players, which the parent leave animation is not part
+        // of given that it does not have animation instructions of its own.
+        const players = engine.players;
+        expect(players.length).toEqual(1);
+        const player = players[0] as TransitionAnimationPlayer;
+        const realPlayer = player.getRealPlayer() as MockAnimationPlayer;
+
+        expect(player.element.classList.contains('parent')).toBeTruthy();
+        expect(realPlayer.element.classList.contains('inner-div')).toBeTruthy();
+        expect(realPlayer.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['opacity', '0'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['opacity', '1'],
+            ['offset', 1],
+          ]),
+        ]);
+      });
+
+      it('should not cause a removal of inner @trigger DOM nodes when a parent animation occurs', fakeAsync(() => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
             <div @parent *ngIf="exp" class="parent">
               this <div @child>child</div>
             </div>
           `,
-           animations: [
-             trigger(
-                 'parent',
-                 [
-                   transition(
-                       ':leave',
-                       [
-                         style({opacity: 0}),
-                         animate('1s', style({opacity: 1})),
-                       ]),
-                 ]),
-             trigger(
-                 'child',
-                 [
-                   transition(
-                       '* => something',
-                       [
-                         style({opacity: 0}),
-                         animate('1s', style({opacity: 1})),
-                       ]),
-                 ]),
-           ]
-         })
-         class Cmp {
-           public exp: boolean = true;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = true;
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         cmp.exp = false;
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         const players = getLog();
-         expect(players.length).toEqual(1);
-
-         const element = players[0].element;
-         expect(element.innerText.trim()).toMatch(/this\s+child/mg);
-       }));
-
-    it('should only mark outermost *directive nodes :enter and :leave when inserts and removals occur',
-       () => {
-         @Component({
-           selector: 'ani-cmp',
-           animations: [
-             trigger(
-                 'anim',
-                 [
-                   transition(
-                       '* => enter',
-                       [
-                         query(':enter', [animate(1000, style({color: 'red'}))]),
-                       ]),
-                   transition(
-                       '* => leave',
-                       [
-                         query(':leave', [animate(1000, style({color: 'blue'}))]),
-                       ]),
-                 ]),
-           ],
-           template: `
+          animations: [
+            trigger('parent', [
+              transition(':leave', [style({opacity: 0}), animate('1s', style({opacity: 1}))]),
+            ]),
+            trigger('child', [
+              transition('* => something', [
+                style({opacity: 0}),
+                animate('1s', style({opacity: 1})),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp: boolean = true;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = true;
+        fixture.detectChanges();
+        flushMicrotasks();
+
+        cmp.exp = false;
+        fixture.detectChanges();
+        flushMicrotasks();
+
+        const players = getLog();
+        expect(players.length).toEqual(1);
+
+        const element = players[0].element;
+        expect(element.innerText.trim()).toMatch(/this\s+child/gm);
+      }));
+
+      it('should only mark outermost *directive nodes :enter and :leave when inserts and removals occur', () => {
+        @Component({
+          selector: 'ani-cmp',
+          animations: [
+            trigger('anim', [
+              transition('* => enter', [query(':enter', [animate(1000, style({color: 'red'}))])]),
+              transition('* => leave', [query(':leave', [animate(1000, style({color: 'blue'}))])]),
+            ]),
+          ],
+          template: `
             <section class="container" [@anim]="exp ? 'enter' : 'leave'">
               <div class="a" *ngIf="exp">
                 <div class="b" *ngIf="exp">
@@ -2617,59 +2538,57 @@ describe('animation query tests', function() {
                 </div>
               </div>
             </section>
-          `
-         })
-         class Cmp {
-           public exp: boolean|undefined;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         const container = fixture.elementRef.nativeElement;
-
-         cmp.exp = true;
-         fixture.detectChanges();
-         engine.flush();
-
-         let players = getLog();
-         resetLog();
-         expect(players.length).toEqual(2);
-         const [p1, p2] = players;
-
-         expect(p1.element.classList.contains('a')).toBeTrue();
-         expect(p2.element.classList.contains('d')).toBeTrue();
-
-         cmp.exp = false;
-         fixture.detectChanges();
-         engine.flush();
-
-         players = getLog();
-         resetLog();
-         expect(players.length).toEqual(2);
-         const [p3, p4] = players;
-
-         expect(p3.element.classList.contains('a')).toBeTrue();
-         expect(p4.element.classList.contains('d')).toBeTrue();
-       });
-
-    it('should collect multiple root levels of :enter and :leave nodes', () => {
-      @Component({
-        selector: 'ani-cmp',
-        animations: [trigger(
-            'pageAnimation',
-            [
+          `,
+        })
+        class Cmp {
+          public exp: boolean | undefined;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        const container = fixture.elementRef.nativeElement;
+
+        cmp.exp = true;
+        fixture.detectChanges();
+        engine.flush();
+
+        let players = getLog();
+        resetLog();
+        expect(players.length).toEqual(2);
+        const [p1, p2] = players;
+
+        expect(p1.element.classList.contains('a')).toBeTrue();
+        expect(p2.element.classList.contains('d')).toBeTrue();
+
+        cmp.exp = false;
+        fixture.detectChanges();
+        engine.flush();
+
+        players = getLog();
+        resetLog();
+        expect(players.length).toEqual(2);
+        const [p3, p4] = players;
+
+        expect(p3.element.classList.contains('a')).toBeTrue();
+        expect(p4.element.classList.contains('d')).toBeTrue();
+      });
+
+      it('should collect multiple root levels of :enter and :leave nodes', () => {
+        @Component({
+          selector: 'ani-cmp',
+          animations: [
+            trigger('pageAnimation', [
               transition(':enter', []),
-              transition(
-                  '* => *',
-                  [
-                    query(':leave', [animate('1s', style({opacity: 0}))], {optional: true}),
-                    query(':enter', [animate('1s', style({opacity: 1}))], {optional: true})
-                  ])
-            ])],
-        template: `
+              transition('* => *', [
+                query(':leave', [animate('1s', style({opacity: 0}))], {optional: true}),
+                query(':enter', [animate('1s', style({opacity: 1}))], {optional: true}),
+              ]),
+            ]),
+          ],
+          template: `
             <div [@pageAnimation]="status">
               <header>
                 <div *ngIf="!loading" class="title">{{ title }}</div>
@@ -2686,577 +2605,546 @@ describe('animation query tests', function() {
                 </div>
               </section>
             </div>
-          `
-      })
-      class Cmp {
-        get title() {
-          if (this.page1) {
-            return 'hello from page1';
+          `,
+        })
+        class Cmp {
+          get title() {
+            if (this.page1) {
+              return 'hello from page1';
+            }
+            return 'greetings from page2';
+          }
+
+          page1 = false;
+          page2 = false;
+          loading = false;
+
+          get status() {
+            if (this.loading) return 'loading';
+            if (this.page1) return 'page1';
+            if (this.page2) return 'page2';
+            return '';
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.loading = true;
+        fixture.detectChanges();
+        engine.flush();
+
+        let players = getLog();
+        resetLog();
+        cancelAllPlayers(players);
+
+        cmp.page1 = true;
+        cmp.loading = false;
+        fixture.detectChanges();
+        engine.flush();
+
+        let p1: MockAnimationPlayer;
+        let p2: MockAnimationPlayer;
+        let p3: MockAnimationPlayer;
+
+        players = getLog();
+        expect(players.length).toEqual(3);
+        [p1, p2, p3] = players;
+
+        expect(p1.element.classList.contains('loading')).toBe(true);
+        expect(p2.element.classList.contains('title')).toBe(true);
+        expect(p3.element.classList.contains('page1')).toBe(true);
+
+        resetLog();
+        cancelAllPlayers(players);
+
+        cmp.page1 = false;
+        cmp.loading = true;
+        fixture.detectChanges();
+
+        players = getLog();
+        cancelAllPlayers(players);
+
+        expect(players.length).toEqual(3);
+        [p1, p2, p3] = players;
+
+        expect(p1.element.classList.contains('title')).toBe(true);
+        expect(p2.element.classList.contains('page1')).toBe(true);
+        expect(p3.element.classList.contains('loading')).toBe(true);
+
+        resetLog();
+        cancelAllPlayers(players);
+
+        cmp.page2 = true;
+        cmp.loading = false;
+        fixture.detectChanges();
+        engine.flush();
+
+        players = getLog();
+        expect(players.length).toEqual(3);
+        [p1, p2, p3] = players;
+
+        expect(p1.element.classList.contains('loading')).toBe(true);
+        expect(p2.element.classList.contains('title')).toBe(true);
+        expect(p3.element.classList.contains('page2')).toBe(true);
+      });
+
+      it('should emulate leave animation callbacks for all sub elements that have leave triggers within the component', fakeAsync(() => {
+        @Component({
+          selector: 'ani-cmp',
+          animations: [
+            trigger('parent', []),
+            trigger('child', []),
+            trigger('childWithAnimation', [
+              transition(':leave', [animate(1000, style({background: 'red'}))]),
+            ]),
+          ],
+          template: `
+            <div data-name="p" class="parent" @parent *ngIf="exp" (@parent.start)="callback($event)" (@parent.done)="callback($event)">
+              <div data-name="c1" @child (@child.start)="callback($event)" (@child.done)="callback($event)"></div>
+              <div data-name="c2" @child (@child.start)="callback($event)" (@child.done)="callback($event)"></div>
+              <div data-name="c3" @childWithAnimation (@childWithAnimation.start)="callback($event)" (@childWithAnimation.done)="callback($event)"></div>
+            </div>
+          `,
+        })
+        class Cmp {
+          public exp: boolean | undefined;
+          public log: string[] = [];
+          callback(event: any) {
+            this.log.push(event.element.getAttribute('data-name') + '-' + event.phaseName);
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = true;
+        fixture.detectChanges();
+        flushMicrotasks();
+        cmp.log = [];
+
+        cmp.exp = false;
+        fixture.detectChanges();
+        flushMicrotasks();
+        expect(cmp.log).toEqual([
+          'c1-start',
+          'c1-done',
+          'c2-start',
+          'c2-done',
+          'p-start',
+          'c3-start',
+          'c3-done',
+          'p-done',
+        ]);
+      }));
+
+      it('should build, but not run sub triggers when a parent animation is scheduled', () => {
+        @Component({
+          selector: 'parent-cmp',
+          animations: [
+            trigger('parent', [transition('* => *', [animate(1000, style({opacity: 0}))])]),
+          ],
+          template: '<div [@parent]="exp"><child-cmp #child></child-cmp></div>',
+        })
+        class ParentCmp {
+          public exp: any;
+
+          @ViewChild('child') public childCmp: any;
+        }
+
+        @Component({
+          selector: 'child-cmp',
+          animations: [
+            trigger('child', [transition('* => *', [animate(1000, style({color: 'red'}))])]),
+          ],
+          template: '<div [@child]="exp"></div>',
+        })
+        class ChildCmp {
+          public exp: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(ParentCmp);
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        const cmp = fixture.componentInstance;
+        const childCmp = cmp.childCmp;
+
+        cmp.exp = 1;
+        childCmp.exp = 1;
+        fixture.detectChanges();
+        engine.flush();
+
+        // we have 2 players, but the child is not used even though
+        // it is created.
+        const players = getLog();
+        expect(players.length).toEqual(2);
+        expect(engine.players.length).toEqual(1);
+
+        expect((engine.players[0] as TransitionAnimationPlayer).getRealPlayer()).toBe(players[1]);
+      });
+
+      it('should fire and synchronize the start/done callbacks on sub triggers even if they are not allowed to animate within the animation', fakeAsync(() => {
+        @Component({
+          selector: 'parent-cmp',
+          animations: [
+            trigger('parent', [
+              transition('* => go', [
+                style({height: '0px'}),
+                animate(1000, style({height: '100px'})),
+              ]),
+            ]),
+          ],
+          template: `
+            <div *ngIf="!remove"
+                 [@parent]="exp"
+                 (@parent.start)="track($event)"
+                 (@parent.done)="track($event)">
+                 <child-cmp #child></child-cmp>
+            </div>
+          `,
+        })
+        class ParentCmp {
+          @ViewChild('child') public childCmp: any;
+
+          public exp: any;
+          public log: string[] = [];
+          public remove = false;
+
+          track(event: any) {
+            this.log.push(`${event.triggerName}-${event.phaseName}`);
+          }
+        }
+
+        @Component({
+          selector: 'child-cmp',
+          animations: [
+            trigger('child', [
+              transition('* => go', [
+                style({width: '0px'}),
+                animate(1000, style({width: '100px'})),
+              ]),
+            ]),
+          ],
+          template: `
+            <div [@child]="exp"
+                 (@child.start)="track($event)"
+                 (@child.done)="track($event)"></div>
+          `,
+        })
+        class ChildCmp {
+          public exp: any;
+          public log: string[] = [];
+          track(event: any) {
+            this.log.push(`${event.triggerName}-${event.phaseName}`);
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(ParentCmp);
+        fixture.detectChanges();
+        flushMicrotasks();
+
+        const cmp = fixture.componentInstance;
+        const child = cmp.childCmp;
+
+        expect(cmp.log).toEqual(['parent-start', 'parent-done']);
+        expect(child.log).toEqual(['child-start', 'child-done']);
+
+        cmp.log = [];
+        child.log = [];
+        cmp.exp = 'go';
+        cmp.childCmp.exp = 'go';
+        fixture.detectChanges();
+        flushMicrotasks();
+
+        expect(cmp.log).toEqual(['parent-start']);
+        expect(child.log).toEqual(['child-start']);
+
+        const players = engine.players;
+        expect(players.length).toEqual(1);
+        players[0].finish();
+
+        expect(cmp.log).toEqual(['parent-start', 'parent-done']);
+        expect(child.log).toEqual(['child-start', 'child-done']);
+
+        cmp.log = [];
+        child.log = [];
+        cmp.remove = true;
+        fixture.detectChanges();
+        flushMicrotasks();
+
+        expect(cmp.log).toEqual(['parent-start', 'parent-done']);
+        expect(child.log).toEqual(['child-start', 'child-done']);
+      }));
+
+      it('should fire and synchronize the start/done callbacks on multiple blocked sub triggers', fakeAsync(() => {
+        @Component({
+          selector: 'cmp',
+          animations: [
+            trigger('parent1', [
+              transition('* => go, * => go-again', [
+                style({opacity: 0}),
+                animate('1s', style({opacity: 1})),
+              ]),
+            ]),
+            trigger('parent2', [
+              transition('* => go, * => go-again', [
+                style({lineHeight: '0px'}),
+                animate('1s', style({lineHeight: '10px'})),
+              ]),
+            ]),
+            trigger('child1', [
+              transition('* => go, * => go-again', [
+                style({width: '0px'}),
+                animate('1s', style({width: '100px'})),
+              ]),
+            ]),
+            trigger('child2', [
+              transition('* => go, * => go-again', [
+                style({height: '0px'}),
+                animate('1s', style({height: '100px'})),
+              ]),
+            ]),
+          ],
+          template: `
+               <div [@parent1]="parent1Exp" (@parent1.start)="track($event)"
+                    [@parent2]="parent2Exp" (@parent2.start)="track($event)">
+                 <div [@child1]="child1Exp" (@child1.start)="track($event)"
+                      [@child2]="child2Exp" (@child2.start)="track($event)"></div>
+               </div>
+          `,
+        })
+        class Cmp {
+          public parent1Exp = '';
+          public parent2Exp = '';
+          public child1Exp = '';
+          public child2Exp = '';
+          public log: string[] = [];
+
+          track(event: any) {
+            this.log.push(`${event.triggerName}-${event.phaseName}`);
           }
-          return 'greetings from page2';
         }
 
-        page1 = false;
-        page2 = false;
-        loading = false;
+        TestBed.configureTestingModule({declarations: [Cmp]});
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        fixture.detectChanges();
+        flushMicrotasks();
 
-        get status() {
-          if (this.loading) return 'loading';
-          if (this.page1) return 'page1';
-          if (this.page2) return 'page2';
-          return '';
-        }
-      }
+        const cmp = fixture.componentInstance;
+        cmp.log = [];
+        cmp.parent1Exp = 'go';
+        cmp.parent2Exp = 'go';
+        cmp.child1Exp = 'go';
+        cmp.child2Exp = 'go';
+        fixture.detectChanges();
+        flushMicrotasks();
 
-      TestBed.configureTestingModule({declarations: [Cmp]});
+        expect(cmp.log).toEqual(['parent1-start', 'parent2-start', 'child1-start', 'child2-start']);
 
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-      cmp.loading = true;
-      fixture.detectChanges();
-      engine.flush();
+        cmp.parent1Exp = 'go-again';
+        cmp.parent2Exp = 'go-again';
+        cmp.child1Exp = 'go-again';
+        cmp.child2Exp = 'go-again';
+        fixture.detectChanges();
+        flushMicrotasks();
+      }));
 
-      let players = getLog();
-      resetLog();
-      cancelAllPlayers(players);
+      it('should stretch the starting keyframe of a child animation queries are issued by the parent', () => {
+        @Component({
+          selector: 'parent-cmp',
+          animations: [
+            trigger('parent', [
+              transition('* => *', [
+                animate(1000, style({color: 'red'})),
+                query('@child', animateChild()),
+              ]),
+            ]),
+          ],
+          template: '<div [@parent]="exp"><child-cmp #child></child-cmp></div>',
+        })
+        class ParentCmp {
+          public exp: any;
 
-      cmp.page1 = true;
-      cmp.loading = false;
-      fixture.detectChanges();
-      engine.flush();
+          @ViewChild('child') public childCmp: any;
+        }
 
-      let p1: MockAnimationPlayer;
-      let p2: MockAnimationPlayer;
-      let p3: MockAnimationPlayer;
+        @Component({
+          selector: 'child-cmp',
+          animations: [
+            trigger('child', [
+              transition('* => *', [style({color: 'blue'}), animate(1000, style({color: 'red'}))]),
+            ]),
+          ],
+          template: '<div [@child]="exp" class="child"></div>',
+        })
+        class ChildCmp {
+          public exp: any;
+        }
 
-      players = getLog();
-      expect(players.length).toEqual(3);
-      [p1, p2, p3] = players;
+        TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
 
-      expect(p1.element.classList.contains('loading')).toBe(true);
-      expect(p2.element.classList.contains('title')).toBe(true);
-      expect(p3.element.classList.contains('page1')).toBe(true);
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(ParentCmp);
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
 
-      resetLog();
-      cancelAllPlayers(players);
+        const cmp = fixture.componentInstance;
+        const childCmp = cmp.childCmp;
 
-      cmp.page1 = false;
-      cmp.loading = true;
-      fixture.detectChanges();
+        cmp.exp = 1;
+        childCmp.exp = 1;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(engine.players.length).toEqual(1); // child player, parent cover, parent player
+        const groupPlayer = (
+          engine.players[0] as TransitionAnimationPlayer
+        ).getRealPlayer() as AnimationGroupPlayer;
+        const childPlayer = groupPlayer.players.find((player) => {
+          if (player instanceof MockAnimationPlayer) {
+            return player.element.classList.contains('child');
+          }
+          return false;
+        }) as MockAnimationPlayer;
 
-      players = getLog();
-      cancelAllPlayers(players);
+        const keyframes = normalizeKeyframes(childPlayer.keyframes).map((kf) => {
+          kf.delete('offset');
+          return kf;
+        });
 
-      expect(players.length).toEqual(3);
-      [p1, p2, p3] = players;
+        expect(keyframes.length).toEqual(3);
 
-      expect(p1.element.classList.contains('title')).toBe(true);
-      expect(p2.element.classList.contains('page1')).toBe(true);
-      expect(p3.element.classList.contains('loading')).toBe(true);
+        const [k1, k2, k3] = keyframes;
+        expect(k1).toEqual(k2);
+      });
 
-      resetLog();
-      cancelAllPlayers(players);
+      it('should allow a parent trigger to control child triggers across multiple template boundaries even if there are no animations in between', () => {
+        @Component({
+          selector: 'parent-cmp',
+          animations: [
+            trigger('parentAnimation', [
+              transition('* => go', [
+                query(':self, @grandChildAnimation', style({opacity: 0})),
+                animate(1000, style({opacity: 1})),
+                query('@grandChildAnimation', [animate(1000, style({opacity: 1})), animateChild()]),
+              ]),
+            ]),
+          ],
+          template: '<div [@parentAnimation]="exp"><child-cmp #child></child-cmp></div>',
+        })
+        class ParentCmp {
+          public exp: any;
 
-      cmp.page2 = true;
-      cmp.loading = false;
-      fixture.detectChanges();
-      engine.flush();
+          @ViewChild('child') public innerCmp: any;
+        }
 
-      players = getLog();
-      expect(players.length).toEqual(3);
-      [p1, p2, p3] = players;
+        @Component({
+          selector: 'child-cmp',
+          template: '<grandchild-cmp #grandchild></grandchild-cmp>',
+        })
+        class ChildCmp {
+          @ViewChild('grandchild') public innerCmp: any;
+        }
 
-      expect(p1.element.classList.contains('loading')).toBe(true);
-      expect(p2.element.classList.contains('title')).toBe(true);
-      expect(p3.element.classList.contains('page2')).toBe(true);
-    });
+        @Component({
+          selector: 'grandchild-cmp',
+          animations: [
+            trigger('grandChildAnimation', [
+              transition('* => go', [
+                style({width: '0px'}),
+                animate(1000, style({width: '200px'})),
+              ]),
+            ]),
+          ],
+          template: '<div [@grandChildAnimation]="exp"></div>',
+        })
+        class GrandChildCmp {
+          public exp: any;
+        }
 
-    it('should emulate leave animation callbacks for all sub elements that have leave triggers within the component',
-       fakeAsync(() => {
-         @Component({
-           selector: 'ani-cmp',
-           animations: [
-             trigger('parent', []), trigger('child', []),
-             trigger(
-                 'childWithAnimation',
-                 [
-                   transition(
-                       ':leave',
-                       [
-                         animate(1000, style({background: 'red'})),
-                       ]),
-                 ])
-           ],
-           template: `
-            <div data-name="p" class="parent" @parent *ngIf="exp" (@parent.start)="callback($event)" (@parent.done)="callback($event)">
-              <div data-name="c1" @child (@child.start)="callback($event)" (@child.done)="callback($event)"></div>
-              <div data-name="c2" @child (@child.start)="callback($event)" (@child.done)="callback($event)"></div>
-              <div data-name="c3" @childWithAnimation (@childWithAnimation.start)="callback($event)" (@childWithAnimation.done)="callback($event)"></div>
-            </div>
-          `
-         })
-         class Cmp {
-           public exp: boolean|undefined;
-           public log: string[] = [];
-           callback(event: any) {
-             this.log.push(event.element.getAttribute('data-name') + '-' + event.phaseName);
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-
-         cmp.exp = true;
-         fixture.detectChanges();
-         flushMicrotasks();
-         cmp.log = [];
-
-         cmp.exp = false;
-         fixture.detectChanges();
-         flushMicrotasks();
-         expect(cmp.log).toEqual([
-           'c1-start', 'c1-done', 'c2-start', 'c2-done', 'p-start', 'c3-start', 'c3-done', 'p-done'
-         ]);
-       }));
-
-    it('should build, but not run sub triggers when a parent animation is scheduled', () => {
-      @Component({
-        selector: 'parent-cmp',
-        animations:
-            [trigger('parent', [transition('* => *', [animate(1000, style({opacity: 0}))])])],
-        template: '<div [@parent]="exp"><child-cmp #child></child-cmp></div>'
-      })
-      class ParentCmp {
-        public exp: any;
-
-        @ViewChild('child') public childCmp: any;
-      }
-
-      @Component({
-        selector: 'child-cmp',
-        animations:
-            [trigger('child', [transition('* => *', [animate(1000, style({color: 'red'}))])])],
-        template: '<div [@child]="exp"></div>'
-      })
-      class ChildCmp {
-        public exp: any;
-      }
-
-      TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-
-      const engine = TestBed.inject(ɵAnimationEngine);
-      const fixture = TestBed.createComponent(ParentCmp);
-      fixture.detectChanges();
-      engine.flush();
-      resetLog();
+        TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp, GrandChildCmp]});
 
-      const cmp = fixture.componentInstance;
-      const childCmp = cmp.childCmp;
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(ParentCmp);
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
 
-      cmp.exp = 1;
-      childCmp.exp = 1;
-      fixture.detectChanges();
-      engine.flush();
+        const cmp = fixture.componentInstance;
+        const grandChildCmp = cmp.innerCmp.innerCmp;
 
-      // we have 2 players, but the child is not used even though
-      // it is created.
-      const players = getLog();
-      expect(players.length).toEqual(2);
-      expect(engine.players.length).toEqual(1);
+        cmp.exp = 'go';
+        grandChildCmp.exp = 'go';
 
-      expect((engine.players[0] as TransitionAnimationPlayer).getRealPlayer()).toBe(players[1]);
-    });
+        fixture.detectChanges();
+        engine.flush();
+        const players = getLog();
+        expect(players.length).toEqual(6);
+
+        // players:
+        //  - _sgcp (skipped grand child player): player for the grand child animation
+        //  - _psp (parent self player): player for parent self animation (opacity 0)
+        //  - _pgcp1 (parent grand child player 1):
+        //     player for child animation executed by parent via query (opacity 0)
+        //  - _pp1 (parent player 1): player for parent animation (from opacity 0 to opacity 1)
+        //  - _pgcp2 (parent grand child player 2):
+        //     player for child animation executed by parent via query and animate
+        //     (from opacity 0 to opacity 1)
+        //  - pgcp3 (parent grand child player 3):
+        //     player for child animation executed by parent via query and animateChild
+        //     (from 0px to 200px)
+        const [_sgcp, _psp, _pgcp1, _pp1, _pgcp2, pgcp3] = players;
+
+        expect(pgcp3.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['offset', 0],
+            ['width', '0px'],
+          ]),
+          new Map<string, string | number>([
+            ['offset', 0.67],
+            ['width', '0px'],
+          ]),
+          new Map<string, string | number>([
+            ['offset', 1],
+            ['width', '200px'],
+          ]),
+        ]);
+      });
 
-    it('should fire and synchronize the start/done callbacks on sub triggers even if they are not allowed to animate within the animation',
-       fakeAsync(() => {
-         @Component({
-           selector: 'parent-cmp',
-           animations: [
-             trigger(
-                 'parent',
-                 [
-                   transition(
-                       '* => go',
-                       [
-                         style({height: '0px'}),
-                         animate(1000, style({height: '100px'})),
-                       ]),
-                 ]),
-           ],
-           template: `
-            <div *ngIf="!remove"
-                 [@parent]="exp"
-                 (@parent.start)="track($event)"
-                 (@parent.done)="track($event)">
-                 <child-cmp #child></child-cmp>
-            </div>
-          `
-         })
-         class ParentCmp {
-           @ViewChild('child') public childCmp: any;
-
-           public exp: any;
-           public log: string[] = [];
-           public remove = false;
-
-           track(event: any) {
-             this.log.push(`${event.triggerName}-${event.phaseName}`);
-           }
-         }
-
-         @Component({
-           selector: 'child-cmp',
-           animations: [
-             trigger(
-                 'child',
-                 [
-                   transition(
-                       '* => go',
-                       [
-                         style({width: '0px'}),
-                         animate(1000, style({width: '100px'})),
-                       ]),
-                 ]),
-           ],
-           template: `
-            <div [@child]="exp"
-                 (@child.start)="track($event)"
-                 (@child.done)="track($event)"></div>
-          `
-         })
-         class ChildCmp {
-           public exp: any;
-           public log: string[] = [];
-           track(event: any) {
-             this.log.push(`${event.triggerName}-${event.phaseName}`);
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(ParentCmp);
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         const cmp = fixture.componentInstance;
-         const child = cmp.childCmp;
-
-         expect(cmp.log).toEqual(['parent-start', 'parent-done']);
-         expect(child.log).toEqual(['child-start', 'child-done']);
-
-         cmp.log = [];
-         child.log = [];
-         cmp.exp = 'go';
-         cmp.childCmp.exp = 'go';
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         expect(cmp.log).toEqual(['parent-start']);
-         expect(child.log).toEqual(['child-start']);
-
-         const players = engine.players;
-         expect(players.length).toEqual(1);
-         players[0].finish();
-
-         expect(cmp.log).toEqual(['parent-start', 'parent-done']);
-         expect(child.log).toEqual(['child-start', 'child-done']);
-
-         cmp.log = [];
-         child.log = [];
-         cmp.remove = true;
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         expect(cmp.log).toEqual(['parent-start', 'parent-done']);
-         expect(child.log).toEqual(['child-start', 'child-done']);
-       }));
-
-    it('should fire and synchronize the start/done callbacks on multiple blocked sub triggers',
-       fakeAsync(() => {
-         @Component({
-           selector: 'cmp',
-           animations: [
-             trigger(
-                 'parent1',
-                 [
-                   transition(
-                       '* => go, * => go-again',
-                       [
-                         style({opacity: 0}),
-                         animate('1s', style({opacity: 1})),
-                       ]),
-                 ]),
-             trigger(
-                 'parent2',
-                 [
-                   transition(
-                       '* => go, * => go-again',
-                       [
-                         style({lineHeight: '0px'}),
-                         animate('1s', style({lineHeight: '10px'})),
-                       ]),
-                 ]),
-             trigger(
-                 'child1',
-                 [
-                   transition(
-                       '* => go, * => go-again',
-                       [
-                         style({width: '0px'}),
-                         animate('1s', style({width: '100px'})),
-                       ]),
-                 ]),
-             trigger(
-                 'child2',
-                 [
-                   transition(
-                       '* => go, * => go-again',
-                       [
-                         style({height: '0px'}),
-                         animate('1s', style({height: '100px'})),
-                       ]),
-                 ]),
-           ],
-           template: `
-               <div [@parent1]="parent1Exp" (@parent1.start)="track($event)"
-                    [@parent2]="parent2Exp" (@parent2.start)="track($event)">
-                 <div [@child1]="child1Exp" (@child1.start)="track($event)"
-                      [@child2]="child2Exp" (@child2.start)="track($event)"></div>
-               </div>
-          `
-         })
-         class Cmp {
-           public parent1Exp = '';
-           public parent2Exp = '';
-           public child1Exp = '';
-           public child2Exp = '';
-           public log: string[] = [];
-
-           track(event: any) {
-             this.log.push(`${event.triggerName}-${event.phaseName}`);
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         const cmp = fixture.componentInstance;
-         cmp.log = [];
-         cmp.parent1Exp = 'go';
-         cmp.parent2Exp = 'go';
-         cmp.child1Exp = 'go';
-         cmp.child2Exp = 'go';
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         expect(cmp.log).toEqual(
-             ['parent1-start', 'parent2-start', 'child1-start', 'child2-start']);
-
-         cmp.parent1Exp = 'go-again';
-         cmp.parent2Exp = 'go-again';
-         cmp.child1Exp = 'go-again';
-         cmp.child2Exp = 'go-again';
-         fixture.detectChanges();
-         flushMicrotasks();
-       }));
-
-    it('should stretch the starting keyframe of a child animation queries are issued by the parent',
-       () => {
-         @Component({
-           selector: 'parent-cmp',
-           animations: [trigger(
-               'parent',
-               [transition(
-                   '* => *',
-                   [animate(1000, style({color: 'red'})), query('@child', animateChild())])])],
-           template: '<div [@parent]="exp"><child-cmp #child></child-cmp></div>'
-         })
-         class ParentCmp {
-           public exp: any;
-
-           @ViewChild('child') public childCmp: any;
-         }
-
-         @Component({
-           selector: 'child-cmp',
-           animations: [trigger(
-               'child',
-               [transition(
-                   '* => *', [style({color: 'blue'}), animate(1000, style({color: 'red'}))])])],
-           template: '<div [@child]="exp" class="child"></div>'
-         })
-         class ChildCmp {
-           public exp: any;
-         }
-
-         TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(ParentCmp);
-         fixture.detectChanges();
-         engine.flush();
-         resetLog();
-
-         const cmp = fixture.componentInstance;
-         const childCmp = cmp.childCmp;
-
-         cmp.exp = 1;
-         childCmp.exp = 1;
-         fixture.detectChanges();
-         engine.flush();
-
-         expect(engine.players.length).toEqual(1);  // child player, parent cover, parent player
-         const groupPlayer = (engine.players[0] as TransitionAnimationPlayer).getRealPlayer() as
-             AnimationGroupPlayer;
-         const childPlayer = groupPlayer.players.find(player => {
-           if (player instanceof MockAnimationPlayer) {
-             return player.element.classList.contains('child');
-           }
-           return false;
-         }) as MockAnimationPlayer;
-
-         const keyframes = normalizeKeyframes(childPlayer.keyframes).map(kf => {
-           kf.delete('offset');
-           return kf;
-         });
-
-         expect(keyframes.length).toEqual(3);
-
-         const [k1, k2, k3] = keyframes;
-         expect(k1).toEqual(k2);
-       });
-
-    it('should allow a parent trigger to control child triggers across multiple template boundaries even if there are no animations in between',
-       () => {
-         @Component({
-           selector: 'parent-cmp',
-           animations: [
-             trigger(
-                 'parentAnimation',
-                 [
-                   transition(
-                       '* => go',
-                       [
-                         query(':self, @grandChildAnimation', style({opacity: 0})),
-                         animate(1000, style({opacity: 1})),
-                         query(
-                             '@grandChildAnimation',
-                             [
-                               animate(1000, style({opacity: 1})),
-                               animateChild(),
-                             ]),
-                       ]),
-                 ]),
-           ],
-           template: '<div [@parentAnimation]="exp"><child-cmp #child></child-cmp></div>'
-         })
-         class ParentCmp {
-           public exp: any;
-
-           @ViewChild('child') public innerCmp: any;
-         }
-
-         @Component(
-             {selector: 'child-cmp', template: '<grandchild-cmp #grandchild></grandchild-cmp>'})
-         class ChildCmp {
-           @ViewChild('grandchild') public innerCmp: any;
-         }
-
-         @Component({
-           selector: 'grandchild-cmp',
-           animations: [
-             trigger(
-                 'grandChildAnimation',
-                 [
-                   transition(
-                       '* => go',
-                       [
-                         style({width: '0px'}),
-                         animate(1000, style({width: '200px'})),
-                       ]),
-                 ]),
-           ],
-           template: '<div [@grandChildAnimation]="exp"></div>'
-         })
-         class GrandChildCmp {
-           public exp: any;
-         }
-
-         TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp, GrandChildCmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(ParentCmp);
-         fixture.detectChanges();
-         engine.flush();
-         resetLog();
-
-         const cmp = fixture.componentInstance;
-         const grandChildCmp = cmp.innerCmp.innerCmp;
-
-         cmp.exp = 'go';
-         grandChildCmp.exp = 'go';
-
-         fixture.detectChanges();
-         engine.flush();
-         const players = getLog();
-         expect(players.length).toEqual(6);
-
-         // players:
-         //  - _sgcp (skipped grand child player): player for the grand child animation
-         //  - _psp (parent self player): player for parent self animation (opacity 0)
-         //  - _pgcp1 (parent grand child player 1):
-         //     player for child animation executed by parent via query (opacity 0)
-         //  - _pp1 (parent player 1): player for parent animation (from opacity 0 to opacity 1)
-         //  - _pgcp2 (parent grand child player 2):
-         //     player for child animation executed by parent via query and animate
-         //     (from opacity 0 to opacity 1)
-         //  - pgcp3 (parent grand child player 3):
-         //     player for child animation executed by parent via query and animateChild
-         //     (from 0px to 200px)
-         const [_sgcp, _psp, _pgcp1, _pp1, _pgcp2, pgcp3] = players;
-
-         expect(pgcp3.keyframes).toEqual([
-           new Map<string, string|number>([['offset', 0], ['width', '0px']]),
-           new Map<string, string|number>([['offset', .67], ['width', '0px']]),
-           new Map<string, string|number>([['offset', 1], ['width', '200px']]),
-         ]);
-       });
-
-    it('should scope :enter queries between sub animations', () => {
-      @Component({
-        selector: 'cmp',
-        animations: [
-          trigger(
-              'parent',
-              [
-                transition(':enter', group([
-                             sequence([
-                               style({opacity: 0}),
-                               animate(1000, style({opacity: 1})),
-                             ]),
-                             query(':enter @child', animateChild()),
-                           ])),
-              ]),
-          trigger(
-              'child',
-              [
-                transition(
-                    ':enter',
-                    [
-                      query(
-                          ':enter .item',
-                          [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
-                    ]),
+      it('should scope :enter queries between sub animations', () => {
+        @Component({
+          selector: 'cmp',
+          animations: [
+            trigger('parent', [
+              transition(
+                ':enter',
+                group([
+                  sequence([style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+                  query(':enter @child', animateChild()),
+                ]),
+              ),
+            ]),
+            trigger('child', [
+              transition(':enter', [
+                query(':enter .item', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
               ]),
-        ],
-        template: `
+            ]),
+          ],
+          template: `
                <div @parent *ngIf="exp1" class="container">
                  <div *ngIf="exp2">
                    <div @child>
@@ -3266,67 +3154,59 @@ describe('animation query tests', function() {
                    </div>
                  </div>
                </div>
-             `
-      })
-      class Cmp {
-        public exp1: any;
-        public exp2: any;
-        public exp3: any;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const fixture = TestBed.createComponent(Cmp);
-      fixture.detectChanges();
-      resetLog();
+             `,
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+          public exp3: any;
+        }
 
-      const cmp = fixture.componentInstance;
-      cmp.exp1 = true;
-      cmp.exp2 = true;
-      cmp.exp3 = true;
-      fixture.detectChanges();
-
-      const players = getLog();
-      expect(players.length).toEqual(3);
-
-      // players:
-      //  - _scp (skipped child player): player for the child animation
-      //  - pp (parent player): player for parent animation (from opacity 0 to opacity 1)
-      //  - pcp (parent child player):
-      //      player for child animation executed by parent via query and animateChild
-      const [_scp, pp, pcp] = players;
-      expect(pp.element.classList.contains('container')).toBeTruthy();
-      expect(pcp.element.classList.contains('item')).toBeTruthy();
-    });
+        TestBed.configureTestingModule({declarations: [Cmp]});
 
-    it('should scope :leave queries between sub animations', () => {
-      @Component({
-        selector: 'cmp',
-        animations: [
-          trigger(
-              'parent',
-              [
-                transition(':leave', group([
-                             sequence([
-                               style({opacity: 0}),
-                               animate(1000, style({opacity: 1})),
-                             ]),
-                             query(':leave @child', animateChild()),
-                           ])),
-              ]),
-          trigger(
-              'child',
-              [
-                transition(
-                    ':leave',
-                    [
-                      query(
-                          ':leave .item',
-                          [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
-                    ]),
+        const fixture = TestBed.createComponent(Cmp);
+        fixture.detectChanges();
+        resetLog();
+
+        const cmp = fixture.componentInstance;
+        cmp.exp1 = true;
+        cmp.exp2 = true;
+        cmp.exp3 = true;
+        fixture.detectChanges();
+
+        const players = getLog();
+        expect(players.length).toEqual(3);
+
+        // players:
+        //  - _scp (skipped child player): player for the child animation
+        //  - pp (parent player): player for parent animation (from opacity 0 to opacity 1)
+        //  - pcp (parent child player):
+        //      player for child animation executed by parent via query and animateChild
+        const [_scp, pp, pcp] = players;
+        expect(pp.element.classList.contains('container')).toBeTruthy();
+        expect(pcp.element.classList.contains('item')).toBeTruthy();
+      });
+
+      it('should scope :leave queries between sub animations', () => {
+        @Component({
+          selector: 'cmp',
+          animations: [
+            trigger('parent', [
+              transition(
+                ':leave',
+                group([
+                  sequence([style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+                  query(':leave @child', animateChild()),
+                ]),
+              ),
+            ]),
+            trigger('child', [
+              transition(':leave', [
+                query(':leave .item', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
               ]),
-        ],
-        template: `
+            ]),
+          ],
+          template: `
                <div @parent *ngIf="exp1" class="container">
                  <div *ngIf="exp2">
                    <div @child>
@@ -3336,207 +3216,211 @@ describe('animation query tests', function() {
                    </div>
                  </div>
                </div>
-             `
-      })
-      class Cmp {
-        public exp1: any;
-        public exp2: any;
-        public exp3: any;
-      }
-
-      TestBed.configureTestingModule({declarations: [Cmp]});
-
-      const fixture = TestBed.createComponent(Cmp);
-      const cmp = fixture.componentInstance;
-      cmp.exp1 = true;
-      cmp.exp2 = true;
-      cmp.exp3 = true;
-      fixture.detectChanges();
-      resetLog();
+             `,
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+          public exp3: any;
+        }
 
-      cmp.exp1 = false;
-      fixture.detectChanges();
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp1 = true;
+        cmp.exp2 = true;
+        cmp.exp3 = true;
+        fixture.detectChanges();
+        resetLog();
 
-      const players = getLog();
-      expect(players.length).toEqual(3);
+        cmp.exp1 = false;
+        fixture.detectChanges();
 
-      // players:
-      //  - _scp (skipped child player): player for the child animation
-      //  - pp (parent player): player for parent animation (from opacity 0 to opacity 1)
-      //  - pcp (parent child player):
-      //      player for child animation executed by parent via query and animateChild
-      const [_scp, pp, pcp] = players;
-      expect(pp.element.classList.contains('container')).toBeTruthy();
-      expect(pcp.element.classList.contains('item')).toBeTruthy();
-    });
+        const players = getLog();
+        expect(players.length).toEqual(3);
+
+        // players:
+        //  - _scp (skipped child player): player for the child animation
+        //  - pp (parent player): player for parent animation (from opacity 0 to opacity 1)
+        //  - pcp (parent child player):
+        //      player for child animation executed by parent via query and animateChild
+        const [_scp, pp, pcp] = players;
+        expect(pp.element.classList.contains('container')).toBeTruthy();
+        expect(pcp.element.classList.contains('item')).toBeTruthy();
+      });
 
-    it('should correctly remove a leaving element queried/animated by a parent queried via animateChild',
-       fakeAsync(() => {
-         @Component({
-           selector: 'cmp',
-           template: `
+      it('should correctly remove a leaving element queried/animated by a parent queried via animateChild', fakeAsync(() => {
+        @Component({
+          selector: 'cmp',
+          template: `
             <div class="grand-parent" [@grandParentAnimation]="childPresent">
               <div class="parent" [@parentAnimation]="childPresent">
               <div *ngIf="childPresent" class="child"></div>
               </div>
             </div>
           `,
-           animations: [
-             trigger(
-                 'grandParentAnimation',
-                 [transition('true <=> false', query('@parentAnimation', animateChild()))]),
-             trigger(
-                 'parentAnimation',
-                 [transition(
-                     'true => false', query(':leave.child', animate('.2s', style({opacity: 0}))))])
-           ]
-         })
-         class Cmp {
-           public childPresent = true;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         fixture.detectChanges();
-
-         let children = fixture.debugElement.nativeElement.querySelectorAll('.child');
-         expect(children.length).toEqual(1);
-
-         cmp.childPresent = false;
-         fixture.detectChanges();
-         flushMicrotasks();
-
-         engine.players.forEach(player => player.finish());
-
-         children = fixture.debugElement.nativeElement.querySelectorAll('.child');
-         expect(children.length).toEqual(0);
-       }));
-
-    it('should correctly animate state styles of the root element applied via animate inside a group (independently of the order)',
-       () => {
-         @Component({
-        selector: 'cmp',
-        template: `
+          animations: [
+            trigger('grandParentAnimation', [
+              transition('true <=> false', query('@parentAnimation', animateChild())),
+            ]),
+            trigger('parentAnimation', [
+              transition(
+                'true => false',
+                query(':leave.child', animate('.2s', style({opacity: 0}))),
+              ),
+            ]),
+          ],
+        })
+        class Cmp {
+          public childPresent = true;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.inject(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+
+        let children = fixture.debugElement.nativeElement.querySelectorAll('.child');
+        expect(children.length).toEqual(1);
+
+        cmp.childPresent = false;
+        fixture.detectChanges();
+        flushMicrotasks();
+
+        engine.players.forEach((player) => player.finish());
+
+        children = fixture.debugElement.nativeElement.querySelectorAll('.child');
+        expect(children.length).toEqual(0);
+      }));
+
+      it('should correctly animate state styles of the root element applied via animate inside a group (independently of the order)', () => {
+        @Component({
+          selector: 'cmp',
+          template: `
           <div class="parent" [@parent]="exp">
             <div class="child" *ngIf="exp"></div>
           </div>
         `,
-        animations: [
-          trigger('parent', [
-            state('true', style({ backgroundColor: 'red' })),
-            state('false', style({ backgroundColor: 'blue' })),
-            transition('true <=> false', [
-              group([
-                animate(500),
-                query(':leave', [
-                  animate(500, style({ opacity: 0 }))
-                ], { optional: true }),
-                query(':enter', [
-                  style({ opacity: 0 }),
-                  animate(500, style({ opacity: '*' }))
-                ], { optional: true }),
-              ])
-            ])
-          ])
-        ]
-      })
-      class Cmp {
-           public exp = true;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         fixture.detectChanges();
-
-         cmp.exp = false;
-         fixture.detectChanges();
-
-         const players = getLog();
-         expect(players.length).toEqual(3);
-         // players:
-         //  - _pp1 (parent player 1): player for parent animation (from background red to red)
-         //  - pp2 (parent player 2): player for parent animation (from background red to blue)
-         //  - _cp (child player): player for child animation (from current opacity to 0)
-         const [_pp1, pp2, _cp] = players;
-
-         expect(pp2.element.classList.contains('parent')).toBeTruthy();
-         const expectedKeyframes = [
-           new Map<string, string|number>([['backgroundColor', 'red'], ['offset', 0]]),
-           new Map<string, string|number>([['backgroundColor', 'blue'], ['offset', 1]])
-         ];
-         expect(pp2.keyframes).toEqual(expectedKeyframes);
-       });
-
-    it('should correctly animate state styles of the root element applied via animate inside a sequence (independently of the order)',
-       () => {
-         @Component({
-        selector: 'cmp',
-        template: `
+          animations: [
+            trigger('parent', [
+              state('true', style({backgroundColor: 'red'})),
+              state('false', style({backgroundColor: 'blue'})),
+              transition('true <=> false', [
+                group([
+                  animate(500),
+                  query(':leave', [animate(500, style({opacity: 0}))], {optional: true}),
+                  query(':enter', [style({opacity: 0}), animate(500, style({opacity: '*'}))], {
+                    optional: true,
+                  }),
+                ]),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp = true;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+
+        cmp.exp = false;
+        fixture.detectChanges();
+
+        const players = getLog();
+        expect(players.length).toEqual(3);
+        // players:
+        //  - _pp1 (parent player 1): player for parent animation (from background red to red)
+        //  - pp2 (parent player 2): player for parent animation (from background red to blue)
+        //  - _cp (child player): player for child animation (from current opacity to 0)
+        const [_pp1, pp2, _cp] = players;
+
+        expect(pp2.element.classList.contains('parent')).toBeTruthy();
+        const expectedKeyframes = [
+          new Map<string, string | number>([
+            ['backgroundColor', 'red'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['backgroundColor', 'blue'],
+            ['offset', 1],
+          ]),
+        ];
+        expect(pp2.keyframes).toEqual(expectedKeyframes);
+      });
+
+      it('should correctly animate state styles of the root element applied via animate inside a sequence (independently of the order)', () => {
+        @Component({
+          selector: 'cmp',
+          template: `
           <div class="parent" [@parent]="exp">
             <div class="child" *ngIf="exp"></div>
           </div>
         `,
-        animations: [
-          trigger('parent', [
-            state('true', style({ backgroundColor: 'red' })),
-            state('false', style({ backgroundColor: 'blue' })),
-            transition('true <=> false', [
-              sequence([
-                query(':enter', [
-                  style({ opacity: 0 }),
-                  animate(500, style({ opacity: '*' }))
-                ], { optional: true }),
-                animate(500),
-                query(':leave', [
-                  animate(500, style({ opacity: 0 }))
-                ], { optional: true }),
-              ])
-            ])
-          ])
-        ]
-      })
-      class Cmp {
-           public exp = false;
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
-
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
-         fixture.detectChanges();
-
-         cmp.exp = true;
-         fixture.detectChanges();
-
-         const players = getLog();
-         expect(players.length).toEqual(3);
-         // players:
-         //  - _pp1 (parent player 1): player for parent animation (from background blue to blue)
-         //  - _cp (child player): player for child animation (from opacity 0 to *)
-         //  - pp2 (parent player 2): player for parent animation (from background blue to red)
-         const [_pp1, _cp, pp2] = players;
-
-         expect(pp2.element.classList.contains('parent')).toBeTruthy();
-         const expectedKeyframes = [
-           new Map<string, string|number>([['backgroundColor', 'blue'], ['offset', 0]]),
-           new Map<string, string|number>([['backgroundColor', 'red'], ['offset', 1]]),
-         ];
-         expect(pp2.keyframes).toEqual(expectedKeyframes);
-       });
-  });
+          animations: [
+            trigger('parent', [
+              state('true', style({backgroundColor: 'red'})),
+              state('false', style({backgroundColor: 'blue'})),
+              transition('true <=> false', [
+                sequence([
+                  query(':enter', [style({opacity: 0}), animate(500, style({opacity: '*'}))], {
+                    optional: true,
+                  }),
+                  animate(500),
+                  query(':leave', [animate(500, style({opacity: 0}))], {optional: true}),
+                ]),
+              ]),
+            ]),
+          ],
+        })
+        class Cmp {
+          public exp = false;
+        }
 
-  describe('animation control flags', () => {
-    describe('[@.disabled]', () => {
-      it('should allow a parent animation to query and animate inner nodes that are in a disabled region',
-         () => {
-           @Component({
-             selector: 'some-cmp',
-             template: `
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+
+        cmp.exp = true;
+        fixture.detectChanges();
+
+        const players = getLog();
+        expect(players.length).toEqual(3);
+        // players:
+        //  - _pp1 (parent player 1): player for parent animation (from background blue to blue)
+        //  - _cp (child player): player for child animation (from opacity 0 to *)
+        //  - pp2 (parent player 2): player for parent animation (from background blue to red)
+        const [_pp1, _cp, pp2] = players;
+
+        expect(pp2.element.classList.contains('parent')).toBeTruthy();
+        const expectedKeyframes = [
+          new Map<string, string | number>([
+            ['backgroundColor', 'blue'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['backgroundColor', 'red'],
+            ['offset', 1],
+          ]),
+        ];
+        expect(pp2.keyframes).toEqual(expectedKeyframes);
+      });
+    });
+
+    describe('animation control flags', () => {
+      describe('[@.disabled]', () => {
+        it('should allow a parent animation to query and animate inner nodes that are in a disabled region', () => {
+          @Component({
+            selector: 'some-cmp',
+            template: `
               <div [@myAnimation]="exp">
                 <div [@.disabled]="disabledExp">
                   <div class="header"></div>
@@ -3544,160 +3428,143 @@ describe('animation query tests', function() {
                 </div>
               </div>
             `,
-             animations: [
-               trigger(
-                   'myAnimation',
-                   [
-                     transition(
-                         '* => go',
-                         [
-                           query('.header', animate(750, style({opacity: 0}))),
-                           query('.footer', animate(250, style({opacity: 0}))),
-                         ]),
-                   ]),
-             ]
-           })
-           class Cmp {
-             exp: any = '';
-             disabledExp = false;
-           }
-
-           TestBed.configureTestingModule({declarations: [Cmp]});
-
-           const fixture = TestBed.createComponent(Cmp);
-           const cmp = fixture.componentInstance;
-           cmp.disabledExp = true;
-           fixture.detectChanges();
-           resetLog();
-
-           cmp.exp = 'go';
-           fixture.detectChanges();
-           const players = getLog();
-           expect(players.length).toEqual(2);
-
-           const [p1, p2] = players;
-           expect(p1.duration).toEqual(750);
-           expect(p1.element.classList.contains('header')).toBeTrue();
-           expect(p2.duration).toEqual(250);
-           expect(p2.element.classList.contains('footer')).toBeTrue();
-         });
-
-      it('should allow a parent animation to query and animate sub animations that are in a disabled region',
-         () => {
-           @Component({
-             selector: 'some-cmp',
-             template: `
+            animations: [
+              trigger('myAnimation', [
+                transition('* => go', [
+                  query('.header', animate(750, style({opacity: 0}))),
+                  query('.footer', animate(250, style({opacity: 0}))),
+                ]),
+              ]),
+            ],
+          })
+          class Cmp {
+            exp: any = '';
+            disabledExp = false;
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          cmp.disabledExp = true;
+          fixture.detectChanges();
+          resetLog();
+
+          cmp.exp = 'go';
+          fixture.detectChanges();
+          const players = getLog();
+          expect(players.length).toEqual(2);
+
+          const [p1, p2] = players;
+          expect(p1.duration).toEqual(750);
+          expect(p1.element.classList.contains('header')).toBeTrue();
+          expect(p2.duration).toEqual(250);
+          expect(p2.element.classList.contains('footer')).toBeTrue();
+        });
+
+        it('should allow a parent animation to query and animate sub animations that are in a disabled region', () => {
+          @Component({
+            selector: 'some-cmp',
+            template: `
               <div class="parent" [@parentAnimation]="exp">
                 <div [@.disabled]="disabledExp">
                   <div class="child" [@childAnimation]="exp"></div>
                 </div>
               </div>
             `,
-             animations: [
-               trigger(
-                   'parentAnimation',
-                   [
-                     transition(
-                         '* => go',
-                         [
-                           query('@childAnimation', animateChild()),
-                           animate(1000, style({opacity: 0}))
-                         ]),
-                   ]),
-               trigger(
-                   'childAnimation',
-                   [
-                     transition('* => go', [animate(500, style({opacity: 0}))]),
-                   ]),
-             ]
-           })
-           class Cmp {
-             exp: any = '';
-             disabledExp = false;
-           }
-
-           TestBed.configureTestingModule({declarations: [Cmp]});
-
-           const fixture = TestBed.createComponent(Cmp);
-           const cmp = fixture.componentInstance;
-           cmp.disabledExp = true;
-           fixture.detectChanges();
-           resetLog();
-
-           cmp.exp = 'go';
-           fixture.detectChanges();
-
-           const players = getLog();
-           expect(players.length).toEqual(2);
-
-           const [p1, p2] = players;
-           expect(p1.duration).toEqual(500);
-           expect(p1.element.classList.contains('child')).toBeTrue();
-           expect(p2.duration).toEqual(1000);
-           expect(p2.element.classList.contains('parent')).toBeTrue();
-         });
-
-      it('should disable the animation for the given element regardless of existing parent element animation queries or child element animation queries',
-         () => {
-           @Component({
-             selector: 'some-cmp',
-             template: `
+            animations: [
+              trigger('parentAnimation', [
+                transition('* => go', [
+                  query('@childAnimation', animateChild()),
+                  animate(1000, style({opacity: 0})),
+                ]),
+              ]),
+              trigger('childAnimation', [
+                transition('* => go', [animate(500, style({opacity: 0}))]),
+              ]),
+            ],
+          })
+          class Cmp {
+            exp: any = '';
+            disabledExp = false;
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          cmp.disabledExp = true;
+          fixture.detectChanges();
+          resetLog();
+
+          cmp.exp = 'go';
+          fixture.detectChanges();
+
+          const players = getLog();
+          expect(players.length).toEqual(2);
+
+          const [p1, p2] = players;
+          expect(p1.duration).toEqual(500);
+          expect(p1.element.classList.contains('child')).toBeTrue();
+          expect(p2.duration).toEqual(1000);
+          expect(p2.element.classList.contains('parent')).toBeTrue();
+        });
+
+        it('should disable the animation for the given element regardless of existing parent element animation queries or child element animation queries', () => {
+          @Component({
+            selector: 'some-cmp',
+            template: `
               <div class="parent" [@parentAnimation]="exp">
                 <div class="child" [@.disabled]="disabledExp" [@childAnimation]="exp">
                   <div class="grand-child" [@grandChildAnimation]="exp"></div>
                 </div>
               </div>
             `,
-             animations: [
-               trigger(
-                   'parentAnimation',
-                   [
-                     transition(
-                         '* => go',
-                         [query('@*', animateChild()), animate(1500, style({opacity: 0}))]),
-                   ]),
-               trigger(
-                   'childAnimation',
-                   [
-                     transition('* => go', [animate(1000, style({opacity: 0}))]),
-                   ]),
-               trigger(
-                   'grandChildAnimation',
-                   [
-                     transition('* => go', [animate(500, style({opacity: 0}))]),
-                   ]),
-             ]
-           })
-           class Cmp {
-             exp: any = '';
-             disabledExp = false;
-           }
-
-           TestBed.configureTestingModule({declarations: [Cmp]});
-
-           const fixture = TestBed.createComponent(Cmp);
-           const cmp = fixture.componentInstance;
-           cmp.disabledExp = true;
-           fixture.detectChanges();
-           resetLog();
-
-           cmp.exp = 'go';
-           fixture.detectChanges();
-
-           const players = getLog();
-           expect(players.length).toEqual(2);
-
-           const [p1, p2] = players;
-           expect(p1.duration).toEqual(500);
-           expect(p1.element.classList.contains('grand-child')).toBeTrue();
-           expect(p2.duration).toEqual(1500);
-           expect(p2.element.classList.contains('parent')).toBeTrue();
-         });
+            animations: [
+              trigger('parentAnimation', [
+                transition('* => go', [
+                  query('@*', animateChild()),
+                  animate(1500, style({opacity: 0})),
+                ]),
+              ]),
+              trigger('childAnimation', [
+                transition('* => go', [animate(1000, style({opacity: 0}))]),
+              ]),
+              trigger('grandChildAnimation', [
+                transition('* => go', [animate(500, style({opacity: 0}))]),
+              ]),
+            ],
+          })
+          class Cmp {
+            exp: any = '';
+            disabledExp = false;
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          cmp.disabledExp = true;
+          fixture.detectChanges();
+          resetLog();
+
+          cmp.exp = 'go';
+          fixture.detectChanges();
+
+          const players = getLog();
+          expect(players.length).toEqual(2);
+
+          const [p1, p2] = players;
+          expect(p1.duration).toEqual(500);
+          expect(p1.element.classList.contains('grand-child')).toBeTrue();
+          expect(p2.duration).toEqual(1500);
+          expect(p2.element.classList.contains('parent')).toBeTrue();
+        });
+      });
     });
   });
-});
 })();
 
 function cancelAllPlayers(players: AnimationPlayer[]) {
-  players.forEach(p => p.destroy());
+  players.forEach((p) => p.destroy());
 }
diff --git a/packages/core/test/animation/animation_router_integration_spec.ts b/packages/core/test/animation/animation_router_integration_spec.ts
index b515dbf65b261..78b761e2dbbc4 100644
--- a/packages/core/test/animation/animation_router_integration_spec.ts
+++ b/packages/core/test/animation/animation_router_integration_spec.ts
@@ -5,7 +5,17 @@
  * 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
  */
-import {animate, animateChild, group, query, sequence, style, transition, trigger, ɵAnimationGroupPlayer as AnimationGroupPlayer} from '@angular/animations';
+import {
+  animate,
+  animateChild,
+  group,
+  query,
+  sequence,
+  style,
+  transition,
+  trigger,
+  ɵAnimationGroupPlayer as AnimationGroupPlayer,
+} from '@angular/animations';
 import {AnimationDriver, ɵAnimationEngine} from '@angular/animations/browser';
 import {TransitionAnimationPlayer} from '@angular/animations/browser/src/render/transition_animation_engine';
 import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing';
@@ -14,372 +24,387 @@ import {fakeAsync, flushMicrotasks, TestBed, tick} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ActivatedRoute, Router, RouterModule, RouterOutlet} from '@angular/router';
 
-(function() {
-// these tests are only meant to be run within the DOM (for now)
-if (isNode) return;
-
-describe('Animation Router Tests', function() {
-  function getLog(): MockAnimationPlayer[] {
-    return MockAnimationDriver.log as MockAnimationPlayer[];
-  }
-
-  function resetLog() {
-    MockAnimationDriver.log = [];
-  }
-
-  beforeEach(() => {
-    resetLog();
-    TestBed.configureTestingModule({
-      imports: [RouterModule.forRoot([]), BrowserAnimationsModule],
-      providers: [{provide: AnimationDriver, useClass: MockAnimationDriver}]
+(function () {
+  // these tests are only meant to be run within the DOM (for now)
+  if (isNode) return;
+
+  describe('Animation Router Tests', function () {
+    function getLog(): MockAnimationPlayer[] {
+      return MockAnimationDriver.log as MockAnimationPlayer[];
+    }
+
+    function resetLog() {
+      MockAnimationDriver.log = [];
+    }
+
+    beforeEach(() => {
+      resetLog();
+      TestBed.configureTestingModule({
+        imports: [RouterModule.forRoot([]), BrowserAnimationsModule],
+        providers: [{provide: AnimationDriver, useClass: MockAnimationDriver}],
+      });
     });
-  });
 
-  it('should query the old and new routes via :leave and :enter', fakeAsync(() => {
-       @Component({
-         animations: [
-           trigger(
-               'routerAnimations',
-               [
-                 transition(
-                     'page1 => page2',
-                     [
-                       query(':leave', animateChild()),
-                       query(':enter', animateChild()),
-                     ]),
-               ]),
-         ],
-         template: `
+    it('should query the old and new routes via :leave and :enter', fakeAsync(() => {
+      @Component({
+        animations: [
+          trigger('routerAnimations', [
+            transition('page1 => page2', [
+              query(':leave', animateChild()),
+              query(':enter', animateChild()),
+            ]),
+          ]),
+        ],
+        template: `
           <div [@routerAnimations]="prepareRouteAnimation(r)">
             <router-outlet #r="outlet"></router-outlet>
           </div>
-        `
-       })
-       class ContainerCmp {
-         constructor(public router: Router) {}
-
-         prepareRouteAnimation(r: RouterOutlet) {
-           const animation = r.activatedRouteData['animation'];
-           const value = animation ? animation['value'] : null;
-           return value;
-         }
-       }
-
-       @Component({
-         selector: 'page1',
-         template: `page1`,
-         animations: [
-           trigger(
-               'page1Animation',
-               [
-                 transition(
-                     ':leave',
-                     [
-                       style({width: '200px'}),
-                       animate(1000, style({width: '0px'})),
-                     ]),
-               ]),
-         ]
-       })
-       class Page1Cmp {
-         @HostBinding('@page1Animation') public doAnimate = true;
-       }
-
-       @Component({
-         selector: 'page2',
-         template: `page2`,
-         animations: [
-           trigger(
-               'page2Animation',
-               [
-                 transition(
-                     ':enter',
-                     [
-                       style({opacity: 0}),
-                       animate(1000, style({opacity: 1})),
-                     ]),
-               ]),
-         ]
-       })
-       class Page2Cmp {
-         @HostBinding('@page2Animation') public doAnimate = true;
-       }
-
-       TestBed.configureTestingModule({
-         declarations: [Page1Cmp, Page2Cmp, ContainerCmp],
-         imports: [RouterModule.forRoot([
-           {path: 'page1', component: Page1Cmp, data: makeAnimationData('page1')},
-           {path: 'page2', component: Page2Cmp, data: makeAnimationData('page2')}
-         ])]
-       });
-
-       const engine = TestBed.inject(ɵAnimationEngine);
-       const fixture = TestBed.createComponent(ContainerCmp);
-       const cmp = fixture.componentInstance;
-       cmp.router.initialNavigation();
-       tick();
-       fixture.detectChanges();
-       engine.flush();
-
-       cmp.router.navigateByUrl('/page1');
-       tick();
-       fixture.detectChanges();
-       engine.flush();
-
-       cmp.router.navigateByUrl('/page2');
-       tick();
-       fixture.detectChanges();
-       engine.flush();
-
-       const player = engine.players[0]!;
-       const groupPlayer =
-           (player as TransitionAnimationPlayer).getRealPlayer() as AnimationGroupPlayer;
-       const players = groupPlayer.players as MockAnimationPlayer[];
-
-       expect(players.length).toEqual(2);
-       const [p1, p2] = players;
-
-       expect(p1.duration).toEqual(1000);
-       expect(p1.keyframes).toEqual([
-         new Map<string, string|number>([['offset', 0], ['width', '200px']]),
-         new Map<string, string|number>([['offset', 1], ['width', '0px']]),
-       ]);
-
-       expect(p2.duration).toEqual(2000);
-       expect(p2.keyframes).toEqual([
-         new Map<string, string|number>([['offset', 0], ['opacity', '0']]),
-         new Map<string, string|number>([['offset', .5], ['opacity', '0']]),
-         new Map<string, string|number>([['offset', 1], ['opacity', '1']]),
-       ]);
-     }));
-
-  it('should allow inner enter animations to be emulated within a routed item', fakeAsync(() => {
-       @Component({
-         animations: [
-           trigger(
-               'routerAnimations',
-               [
-                 transition(
-                     'page1 => page2',
-                     [
-                       query(':enter', animateChild()),
-                     ]),
-               ]),
-         ],
-         template: `
+        `,
+      })
+      class ContainerCmp {
+        constructor(public router: Router) {}
+
+        prepareRouteAnimation(r: RouterOutlet) {
+          const animation = r.activatedRouteData['animation'];
+          const value = animation ? animation['value'] : null;
+          return value;
+        }
+      }
+
+      @Component({
+        selector: 'page1',
+        template: `page1`,
+        animations: [
+          trigger('page1Animation', [
+            transition(':leave', [style({width: '200px'}), animate(1000, style({width: '0px'}))]),
+          ]),
+        ],
+      })
+      class Page1Cmp {
+        @HostBinding('@page1Animation') public doAnimate = true;
+      }
+
+      @Component({
+        selector: 'page2',
+        template: `page2`,
+        animations: [
+          trigger('page2Animation', [
+            transition(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+          ]),
+        ],
+      })
+      class Page2Cmp {
+        @HostBinding('@page2Animation') public doAnimate = true;
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [Page1Cmp, Page2Cmp, ContainerCmp],
+        imports: [
+          RouterModule.forRoot([
+            {path: 'page1', component: Page1Cmp, data: makeAnimationData('page1')},
+            {path: 'page2', component: Page2Cmp, data: makeAnimationData('page2')},
+          ]),
+        ],
+      });
+
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(ContainerCmp);
+      const cmp = fixture.componentInstance;
+      cmp.router.initialNavigation();
+      tick();
+      fixture.detectChanges();
+      engine.flush();
+
+      cmp.router.navigateByUrl('/page1');
+      tick();
+      fixture.detectChanges();
+      engine.flush();
+
+      cmp.router.navigateByUrl('/page2');
+      tick();
+      fixture.detectChanges();
+      engine.flush();
+
+      const player = engine.players[0]!;
+      const groupPlayer = (
+        player as TransitionAnimationPlayer
+      ).getRealPlayer() as AnimationGroupPlayer;
+      const players = groupPlayer.players as MockAnimationPlayer[];
+
+      expect(players.length).toEqual(2);
+      const [p1, p2] = players;
+
+      expect(p1.duration).toEqual(1000);
+      expect(p1.keyframes).toEqual([
+        new Map<string, string | number>([
+          ['offset', 0],
+          ['width', '200px'],
+        ]),
+        new Map<string, string | number>([
+          ['offset', 1],
+          ['width', '0px'],
+        ]),
+      ]);
+
+      expect(p2.duration).toEqual(2000);
+      expect(p2.keyframes).toEqual([
+        new Map<string, string | number>([
+          ['offset', 0],
+          ['opacity', '0'],
+        ]),
+        new Map<string, string | number>([
+          ['offset', 0.5],
+          ['opacity', '0'],
+        ]),
+        new Map<string, string | number>([
+          ['offset', 1],
+          ['opacity', '1'],
+        ]),
+      ]);
+    }));
+
+    it('should allow inner enter animations to be emulated within a routed item', fakeAsync(() => {
+      @Component({
+        animations: [
+          trigger('routerAnimations', [
+            transition('page1 => page2', [query(':enter', animateChild())]),
+          ]),
+        ],
+        template: `
           <div [@routerAnimations]="prepareRouteAnimation(r)">
             <router-outlet #r="outlet"></router-outlet>
           </div>
-        `
-       })
-       class ContainerCmp {
-         constructor(public router: Router) {}
-
-         prepareRouteAnimation(r: RouterOutlet) {
-           const animation = r.activatedRouteData['animation'];
-           const value = animation ? animation['value'] : null;
-           return value;
-         }
-       }
-
-       @Component({selector: 'page1', template: `page1`, animations: []})
-       class Page1Cmp {
-       }
-
-       @Component({
-         selector: 'page2',
-         template: `
+        `,
+      })
+      class ContainerCmp {
+        constructor(public router: Router) {}
+
+        prepareRouteAnimation(r: RouterOutlet) {
+          const animation = r.activatedRouteData['animation'];
+          const value = animation ? animation['value'] : null;
+          return value;
+        }
+      }
+
+      @Component({selector: 'page1', template: `page1`, animations: []})
+      class Page1Cmp {}
+
+      @Component({
+        selector: 'page2',
+        template: `
           <h1>Page 2</h1>
           <div *ngIf="exp" class="if-one" @ifAnimation></div>
           <div *ngIf="exp" class="if-two" @ifAnimation></div>
         `,
-         animations: [
-           trigger(
-               'page2Animation',
-               [
-                 transition(
-                     ':enter',
-                     [query('.if-one', animateChild()), query('.if-two', animateChild())]),
-               ]),
-           trigger(
-               'ifAnimation',
-               [transition(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))])])
-         ]
-       })
-       class Page2Cmp {
-         @HostBinding('@page2Animation') public doAnimate = true;
-
-         public exp = true;
-       }
-
-       TestBed.configureTestingModule({
-         declarations: [Page1Cmp, Page2Cmp, ContainerCmp],
-         imports: [RouterModule.forRoot([
-           {path: 'page1', component: Page1Cmp, data: makeAnimationData('page1')},
-           {path: 'page2', component: Page2Cmp, data: makeAnimationData('page2')}
-         ])]
-       });
-
-       const engine = TestBed.inject(ɵAnimationEngine);
-       const fixture = TestBed.createComponent(ContainerCmp);
-       const cmp = fixture.componentInstance;
-       cmp.router.initialNavigation();
-       tick();
-       fixture.detectChanges();
-       engine.flush();
-
-       cmp.router.navigateByUrl('/page1');
-       tick();
-       fixture.detectChanges();
-       engine.flush();
-
-       cmp.router.navigateByUrl('/page2');
-       tick();
-       fixture.detectChanges();
-       engine.flush();
-
-       const player = engine.players[0]!;
-       const groupPlayer =
-           (player as TransitionAnimationPlayer).getRealPlayer() as AnimationGroupPlayer;
-       const players = groupPlayer.players as MockAnimationPlayer[];
-
-       expect(players.length).toEqual(2);
-       const [p1, p2] = players;
-
-       expect(p1.keyframes).toEqual([
-         new Map<string, string|number>([['offset', 0], ['opacity', '0']]),
-         new Map<string, string|number>([['offset', 1], ['opacity', '1']]),
-       ]);
-
-       expect(p2.keyframes).toEqual([
-         new Map<string, string|number>([['offset', 0], ['opacity', '0']]),
-         new Map<string, string|number>([['offset', .5], ['opacity', '0']]),
-         new Map<string, string|number>([['offset', 1], ['opacity', '1']]),
-       ]);
-     }));
-
-  it('should allow inner leave animations to be emulated within a routed item', fakeAsync(() => {
-       @Component({
-         animations: [
-           trigger(
-               'routerAnimations',
-               [
-                 transition(
-                     'page1 => page2',
-                     [
-                       query(':leave', animateChild()),
-                     ]),
-               ]),
-         ],
-         template: `
+        animations: [
+          trigger('page2Animation', [
+            transition(':enter', [
+              query('.if-one', animateChild()),
+              query('.if-two', animateChild()),
+            ]),
+          ]),
+          trigger('ifAnimation', [
+            transition(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+          ]),
+        ],
+      })
+      class Page2Cmp {
+        @HostBinding('@page2Animation') public doAnimate = true;
+
+        public exp = true;
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [Page1Cmp, Page2Cmp, ContainerCmp],
+        imports: [
+          RouterModule.forRoot([
+            {path: 'page1', component: Page1Cmp, data: makeAnimationData('page1')},
+            {path: 'page2', component: Page2Cmp, data: makeAnimationData('page2')},
+          ]),
+        ],
+      });
+
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(ContainerCmp);
+      const cmp = fixture.componentInstance;
+      cmp.router.initialNavigation();
+      tick();
+      fixture.detectChanges();
+      engine.flush();
+
+      cmp.router.navigateByUrl('/page1');
+      tick();
+      fixture.detectChanges();
+      engine.flush();
+
+      cmp.router.navigateByUrl('/page2');
+      tick();
+      fixture.detectChanges();
+      engine.flush();
+
+      const player = engine.players[0]!;
+      const groupPlayer = (
+        player as TransitionAnimationPlayer
+      ).getRealPlayer() as AnimationGroupPlayer;
+      const players = groupPlayer.players as MockAnimationPlayer[];
+
+      expect(players.length).toEqual(2);
+      const [p1, p2] = players;
+
+      expect(p1.keyframes).toEqual([
+        new Map<string, string | number>([
+          ['offset', 0],
+          ['opacity', '0'],
+        ]),
+        new Map<string, string | number>([
+          ['offset', 1],
+          ['opacity', '1'],
+        ]),
+      ]);
+
+      expect(p2.keyframes).toEqual([
+        new Map<string, string | number>([
+          ['offset', 0],
+          ['opacity', '0'],
+        ]),
+        new Map<string, string | number>([
+          ['offset', 0.5],
+          ['opacity', '0'],
+        ]),
+        new Map<string, string | number>([
+          ['offset', 1],
+          ['opacity', '1'],
+        ]),
+      ]);
+    }));
+
+    it('should allow inner leave animations to be emulated within a routed item', fakeAsync(() => {
+      @Component({
+        animations: [
+          trigger('routerAnimations', [
+            transition('page1 => page2', [query(':leave', animateChild())]),
+          ]),
+        ],
+        template: `
           <div [@routerAnimations]="prepareRouteAnimation(r)">
             <router-outlet #r="outlet"></router-outlet>
           </div>
-        `
-       })
-       class ContainerCmp {
-         constructor(public router: Router) {}
-
-         prepareRouteAnimation(r: RouterOutlet) {
-           const animation = r.activatedRouteData['animation'];
-           const value = animation ? animation['value'] : null;
-           return value;
-         }
-       }
-
-       @Component({
-         selector: 'page1',
-         template: `
+        `,
+      })
+      class ContainerCmp {
+        constructor(public router: Router) {}
+
+        prepareRouteAnimation(r: RouterOutlet) {
+          const animation = r.activatedRouteData['animation'];
+          const value = animation ? animation['value'] : null;
+          return value;
+        }
+      }
+
+      @Component({
+        selector: 'page1',
+        template: `
           <h1>Page 1</h1>
           <div *ngIf="exp" class="if-one" @ifAnimation></div>
           <div *ngIf="exp" class="if-two" @ifAnimation></div>
         `,
-         animations: [
-           trigger(
-               'page1Animation',
-               [
-                 transition(
-                     ':leave',
-                     [query('.if-one', animateChild()), query('.if-two', animateChild())]),
-               ]),
-           trigger(
-               'ifAnimation',
-               [transition(':leave', [style({opacity: 1}), animate(1000, style({opacity: 0}))])]),
-         ]
-       })
-       class Page1Cmp {
-         @HostBinding('@page1Animation') public doAnimate = true;
-
-         public exp = true;
-       }
-
-       @Component({selector: 'page2', template: `page2`, animations: []})
-       class Page2Cmp {
-       }
-
-       TestBed.configureTestingModule({
-         declarations: [Page1Cmp, Page2Cmp, ContainerCmp],
-         imports: [RouterModule.forRoot([
-           {path: 'page1', component: Page1Cmp, data: makeAnimationData('page1')},
-           {path: 'page2', component: Page2Cmp, data: makeAnimationData('page2')}
-         ])]
-       });
-
-       const engine = TestBed.inject(ɵAnimationEngine);
-       const fixture = TestBed.createComponent(ContainerCmp);
-       const cmp = fixture.componentInstance;
-       cmp.router.initialNavigation();
-       tick();
-       fixture.detectChanges();
-       engine.flush();
-
-       cmp.router.navigateByUrl('/page1');
-       tick();
-       fixture.detectChanges();
-       engine.flush();
-
-       cmp.router.navigateByUrl('/page2');
-       tick();
-       fixture.detectChanges();
-       engine.flush();
-
-       const player = engine.players[0]!;
-       const groupPlayer =
-           (player as TransitionAnimationPlayer).getRealPlayer() as AnimationGroupPlayer;
-       const players = groupPlayer.players as MockAnimationPlayer[];
-
-       expect(players.length).toEqual(2);
-       const [p1, p2] = players;
-
-       expect(p1.keyframes).toEqual([
-         new Map<string, string|number>([['offset', 0], ['opacity', '1']]),
-         new Map<string, string|number>([['offset', 1], ['opacity', '0']]),
-       ]);
-
-       expect(p2.keyframes).toEqual([
-         new Map<string, string|number>([['offset', 0], ['opacity', '1']]),
-         new Map<string, string|number>([['offset', .5], ['opacity', '1']]),
-         new Map<string, string|number>([['offset', 1], ['opacity', '0']]),
-       ]);
-     }));
-
-  it('should properly collect :enter / :leave router nodes even when another non-router *template component is within the trigger boundaries',
-     fakeAsync(() => {
-       @Component({
-         selector: 'ani-cmp',
-         animations: [
-           trigger(
-               'pageAnimation',
-               [
-                 transition(
-                     'page1 => page2',
-                     [
-                       query('.router-container :leave', animate('1s', style({opacity: 0}))),
-                       query('.router-container :enter', animate('1s', style({opacity: 1}))),
-                     ]),
-               ]),
-         ],
-         template: `
+        animations: [
+          trigger('page1Animation', [
+            transition(':leave', [
+              query('.if-one', animateChild()),
+              query('.if-two', animateChild()),
+            ]),
+          ]),
+          trigger('ifAnimation', [
+            transition(':leave', [style({opacity: 1}), animate(1000, style({opacity: 0}))]),
+          ]),
+        ],
+      })
+      class Page1Cmp {
+        @HostBinding('@page1Animation') public doAnimate = true;
+
+        public exp = true;
+      }
+
+      @Component({selector: 'page2', template: `page2`, animations: []})
+      class Page2Cmp {}
+
+      TestBed.configureTestingModule({
+        declarations: [Page1Cmp, Page2Cmp, ContainerCmp],
+        imports: [
+          RouterModule.forRoot([
+            {path: 'page1', component: Page1Cmp, data: makeAnimationData('page1')},
+            {path: 'page2', component: Page2Cmp, data: makeAnimationData('page2')},
+          ]),
+        ],
+      });
+
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(ContainerCmp);
+      const cmp = fixture.componentInstance;
+      cmp.router.initialNavigation();
+      tick();
+      fixture.detectChanges();
+      engine.flush();
+
+      cmp.router.navigateByUrl('/page1');
+      tick();
+      fixture.detectChanges();
+      engine.flush();
+
+      cmp.router.navigateByUrl('/page2');
+      tick();
+      fixture.detectChanges();
+      engine.flush();
+
+      const player = engine.players[0]!;
+      const groupPlayer = (
+        player as TransitionAnimationPlayer
+      ).getRealPlayer() as AnimationGroupPlayer;
+      const players = groupPlayer.players as MockAnimationPlayer[];
+
+      expect(players.length).toEqual(2);
+      const [p1, p2] = players;
+
+      expect(p1.keyframes).toEqual([
+        new Map<string, string | number>([
+          ['offset', 0],
+          ['opacity', '1'],
+        ]),
+        new Map<string, string | number>([
+          ['offset', 1],
+          ['opacity', '0'],
+        ]),
+      ]);
+
+      expect(p2.keyframes).toEqual([
+        new Map<string, string | number>([
+          ['offset', 0],
+          ['opacity', '1'],
+        ]),
+        new Map<string, string | number>([
+          ['offset', 0.5],
+          ['opacity', '1'],
+        ]),
+        new Map<string, string | number>([
+          ['offset', 1],
+          ['opacity', '0'],
+        ]),
+      ]);
+    }));
+
+    it('should properly collect :enter / :leave router nodes even when another non-router *template component is within the trigger boundaries', fakeAsync(() => {
+      @Component({
+        selector: 'ani-cmp',
+        animations: [
+          trigger('pageAnimation', [
+            transition('page1 => page2', [
+              query('.router-container :leave', animate('1s', style({opacity: 0}))),
+              query('.router-container :enter', animate('1s', style({opacity: 1}))),
+            ]),
+          ]),
+        ],
+        template: `
           <div [@pageAnimation]="prepRoute(outlet)">
             <header>
               <div class="inner">
@@ -391,145 +416,149 @@ describe('Animation Router Tests', function() {
               <router-outlet #outlet="outlet"></router-outlet>
             </section>
           </div>
-        `
-       })
-       class ContainerCmp {
-         loading = false;
-
-         constructor(public router: Router) {}
-
-         prepRoute(outlet: any) {
-           return outlet.activatedRouteData['animation'];
-         }
-       }
-
-       @Component({selector: 'page1', template: `page1`})
-       class Page1Cmp {
-       }
-
-       @Component({selector: 'page2', template: `page2`})
-       class Page2Cmp {
-       }
-
-       TestBed.configureTestingModule({
-         declarations: [Page1Cmp, Page2Cmp, ContainerCmp],
-         imports: [RouterModule.forRoot([
-           {path: 'page1', component: Page1Cmp, data: makeAnimationData('page1')},
-           {path: 'page2', component: Page2Cmp, data: makeAnimationData('page2')}
-         ])]
-       });
-
-       const engine = TestBed.inject(ɵAnimationEngine);
-       const fixture = TestBed.createComponent(ContainerCmp);
-       const cmp = fixture.componentInstance;
-       cmp.router.initialNavigation();
-       tick();
-       fixture.detectChanges();
-       engine.flush();
-
-       cmp.router.navigateByUrl('/page1');
-       tick();
-       cmp.loading = true;
-       fixture.detectChanges();
-       engine.flush();
-
-       cmp.router.navigateByUrl('/page2');
-       tick();
-       cmp.loading = false;
-       fixture.detectChanges();
-       engine.flush();
-
-       const players = engine.players;
-       expect(players.length).toEqual(1);
-       const [p1] = players;
-
-       const innerPlayers =
-           ((p1 as TransitionAnimationPlayer).getRealPlayer() as AnimationGroupPlayer).players;
-       expect(innerPlayers.length).toEqual(2);
-
-       const [ip1, ip2] = innerPlayers as any;
-       expect(ip1.element.innerText).toEqual('page1');
-       expect(ip2.element.innerText).toEqual('page2');
-     }));
-
-  it('should allow a recursive set of :leave animations to occur for nested routes',
-     fakeAsync(() => {
-       @Component({selector: 'ani-cmp', template: '<router-outlet name="recur"></router-outlet>'})
-       class ContainerCmp {
-         constructor(private _router: Router) {}
-         log: string[] = [];
-
-         enter() {
-           this._router.navigateByUrl('/(recur:recur/nested)');
-         }
-
-         leave() {
-           this._router.navigateByUrl('/');
-         }
-       }
-
-       @Component({
-         selector: 'recur-page',
-         template: 'Depth: {{ depth }} \n <router-outlet></router-outlet>',
-         animations: [
-           trigger(
-               'pageAnimations',
-               [
-                 transition(':leave', [group([
-                              sequence([style({opacity: 1}), animate('1s', style({opacity: 0}))]),
-                              query('@*', animateChild(), {optional: true})
-                            ])]),
-               ]),
-         ]
-       })
-       class RecurPageCmp {
-         @HostBinding('@pageAnimations') public animatePage = true;
-
-         @HostBinding('attr.data-depth') public depth = 0;
-
-         constructor(private container: ContainerCmp, private route: ActivatedRoute) {
-           this.route.data.subscribe(data => {
-             this.container.log.push(`DEPTH ${data['depth']}`);
-             this.depth = data['depth'];
-           });
-         }
-       }
-
-       TestBed.configureTestingModule({
-         declarations: [ContainerCmp, RecurPageCmp],
-         imports: [RouterModule.forRoot([{
-           path: 'recur',
-           component: RecurPageCmp,
-           outlet: 'recur',
-           data: {depth: 0},
-           children: [{path: 'nested', component: RecurPageCmp, data: {depth: 1}}]
-         }])]
-       });
-
-       const fixture = TestBed.createComponent(ContainerCmp);
-       const cmp = fixture.componentInstance;
-       cmp.enter();
-       tick();
-       fixture.detectChanges();
-       flushMicrotasks();
-
-       expect(cmp.log).toEqual([
-         'DEPTH 0',
-         'DEPTH 1',
-       ]);
-
-       cmp.leave();
-       tick();
-       fixture.detectChanges();
-
-       const players = getLog();
-       expect(players.length).toEqual(2);
-
-       const [p1, p2] = players;
-       expect(p1.element.getAttribute('data-depth')).toEqual('0');
-       expect(p2.element.getAttribute('data-depth')).toEqual('1');
-     }));
-});
+        `,
+      })
+      class ContainerCmp {
+        loading = false;
+
+        constructor(public router: Router) {}
+
+        prepRoute(outlet: any) {
+          return outlet.activatedRouteData['animation'];
+        }
+      }
+
+      @Component({selector: 'page1', template: `page1`})
+      class Page1Cmp {}
+
+      @Component({selector: 'page2', template: `page2`})
+      class Page2Cmp {}
+
+      TestBed.configureTestingModule({
+        declarations: [Page1Cmp, Page2Cmp, ContainerCmp],
+        imports: [
+          RouterModule.forRoot([
+            {path: 'page1', component: Page1Cmp, data: makeAnimationData('page1')},
+            {path: 'page2', component: Page2Cmp, data: makeAnimationData('page2')},
+          ]),
+        ],
+      });
+
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(ContainerCmp);
+      const cmp = fixture.componentInstance;
+      cmp.router.initialNavigation();
+      tick();
+      fixture.detectChanges();
+      engine.flush();
+
+      cmp.router.navigateByUrl('/page1');
+      tick();
+      cmp.loading = true;
+      fixture.detectChanges();
+      engine.flush();
+
+      cmp.router.navigateByUrl('/page2');
+      tick();
+      cmp.loading = false;
+      fixture.detectChanges();
+      engine.flush();
+
+      const players = engine.players;
+      expect(players.length).toEqual(1);
+      const [p1] = players;
+
+      const innerPlayers = (
+        (p1 as TransitionAnimationPlayer).getRealPlayer() as AnimationGroupPlayer
+      ).players;
+      expect(innerPlayers.length).toEqual(2);
+
+      const [ip1, ip2] = innerPlayers as any;
+      expect(ip1.element.innerText).toEqual('page1');
+      expect(ip2.element.innerText).toEqual('page2');
+    }));
+
+    it('should allow a recursive set of :leave animations to occur for nested routes', fakeAsync(() => {
+      @Component({selector: 'ani-cmp', template: '<router-outlet name="recur"></router-outlet>'})
+      class ContainerCmp {
+        constructor(private _router: Router) {}
+        log: string[] = [];
+
+        enter() {
+          this._router.navigateByUrl('/(recur:recur/nested)');
+        }
+
+        leave() {
+          this._router.navigateByUrl('/');
+        }
+      }
+
+      @Component({
+        selector: 'recur-page',
+        template: 'Depth: {{ depth }} \n <router-outlet></router-outlet>',
+        animations: [
+          trigger('pageAnimations', [
+            transition(':leave', [
+              group([
+                sequence([style({opacity: 1}), animate('1s', style({opacity: 0}))]),
+                query('@*', animateChild(), {optional: true}),
+              ]),
+            ]),
+          ]),
+        ],
+      })
+      class RecurPageCmp {
+        @HostBinding('@pageAnimations') public animatePage = true;
+
+        @HostBinding('attr.data-depth') public depth = 0;
+
+        constructor(
+          private container: ContainerCmp,
+          private route: ActivatedRoute,
+        ) {
+          this.route.data.subscribe((data) => {
+            this.container.log.push(`DEPTH ${data['depth']}`);
+            this.depth = data['depth'];
+          });
+        }
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [ContainerCmp, RecurPageCmp],
+        imports: [
+          RouterModule.forRoot([
+            {
+              path: 'recur',
+              component: RecurPageCmp,
+              outlet: 'recur',
+              data: {depth: 0},
+              children: [{path: 'nested', component: RecurPageCmp, data: {depth: 1}}],
+            },
+          ]),
+        ],
+      });
+
+      const fixture = TestBed.createComponent(ContainerCmp);
+      const cmp = fixture.componentInstance;
+      cmp.enter();
+      tick();
+      fixture.detectChanges();
+      flushMicrotasks();
+
+      expect(cmp.log).toEqual(['DEPTH 0', 'DEPTH 1']);
+
+      cmp.leave();
+      tick();
+      fixture.detectChanges();
+
+      const players = getLog();
+      expect(players.length).toEqual(2);
+
+      const [p1, p2] = players;
+      expect(p1.element.getAttribute('data-depth')).toEqual('0');
+      expect(p2.element.getAttribute('data-depth')).toEqual('1');
+    }));
+  });
 });
 
 function makeAnimationData(value: string, params: {[key: string]: any} = {}): {[key: string]: any} {
diff --git a/packages/core/test/animation/animations_with_web_animations_integration_spec.ts b/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
index 37003cc5a1f11..3489a11c44891 100644
--- a/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
+++ b/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
@@ -6,30 +6,35 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {animate, query, state, style, transition, trigger} from '@angular/animations';
-import {AnimationDriver, ɵAnimationEngine, ɵWebAnimationsDriver, ɵWebAnimationsPlayer} from '@angular/animations/browser';
+import {
+  AnimationDriver,
+  ɵAnimationEngine,
+  ɵWebAnimationsDriver,
+  ɵWebAnimationsPlayer,
+} from '@angular/animations/browser';
 import {TransitionAnimationPlayer} from '@angular/animations/browser/src/render/transition_animation_engine';
 import {AnimationGroupPlayer} from '@angular/animations/src/players/animation_group_player';
 import {Component, ViewChild} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
-(function() {
-// these tests are only meant to be run within the DOM (for now)
-// Buggy in Chromium 39, see https://github.com/angular/angular/issues/15793
-if (isNode) return;
-
-describe('animation integration tests using web animations', function() {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [{provide: AnimationDriver, useClass: ɵWebAnimationsDriver}],
-      imports: [BrowserAnimationsModule]
+(function () {
+  // these tests are only meant to be run within the DOM (for now)
+  // Buggy in Chromium 39, see https://github.com/angular/angular/issues/15793
+  if (isNode) return;
+
+  describe('animation integration tests using web animations', function () {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [{provide: AnimationDriver, useClass: ɵWebAnimationsDriver}],
+        imports: [BrowserAnimationsModule],
+      });
     });
-  });
 
-  it('should compute (*) animation styles for a container that is being removed', () => {
-    @Component({
-      selector: 'ani-cmp',
-      template: `
+    it('should compute (*) animation styles for a container that is being removed', () => {
+      @Component({
+        selector: 'ani-cmp',
+        template: `
           <div @auto *ngIf="exp">
             <div style="line-height:20px;">1</div>
             <div style="line-height:20px;">2</div>
@@ -38,55 +43,70 @@ describe('animation integration tests using web animations', function() {
             <div style="line-height:20px;">5</div>
           </div>
         `,
-      animations: [trigger(
-          'auto',
-          [
-            state('void', style({height: '0px'})), state('*', style({height: '*'})),
-            transition('* => *', animate(1000))
-          ])]
-    })
-    class Cmp {
-      public exp: boolean = false;
-    }
-
-    TestBed.configureTestingModule({declarations: [Cmp]});
-
-    const engine = TestBed.inject(ɵAnimationEngine);
-    const fixture = TestBed.createComponent(Cmp);
-    const cmp = fixture.componentInstance;
-
-    cmp.exp = true;
-    fixture.detectChanges();
-
-    expect(engine.players.length).toEqual(1);
-    let webPlayer =
-        (engine.players[0] as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer;
-
-    expect(webPlayer.keyframes).toEqual([
-      new Map<string, string|number>([['height', '0px'], ['offset', 0]]),
-      new Map<string, string|number>([['height', '100px'], ['offset', 1]])
-    ]);
-
-    webPlayer.finish();
-
-    cmp.exp = false;
-    fixture.detectChanges();
-    engine.flush();
-
-    expect(engine.players.length).toEqual(1);
-    webPlayer =
-        (engine.players[0] as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer;
-
-    expect(webPlayer.keyframes).toEqual([
-      new Map<string, string|number>([['height', '100px'], ['offset', 0]]),
-      new Map<string, string|number>([['height', '0px'], ['offset', 1]])
-    ]);
-  });
+        animations: [
+          trigger('auto', [
+            state('void', style({height: '0px'})),
+            state('*', style({height: '*'})),
+            transition('* => *', animate(1000)),
+          ]),
+        ],
+      })
+      class Cmp {
+        public exp: boolean = false;
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      cmp.exp = true;
+      fixture.detectChanges();
+
+      expect(engine.players.length).toEqual(1);
+      let webPlayer = (
+        engine.players[0] as TransitionAnimationPlayer
+      ).getRealPlayer() as ɵWebAnimationsPlayer;
+
+      expect(webPlayer.keyframes).toEqual([
+        new Map<string, string | number>([
+          ['height', '0px'],
+          ['offset', 0],
+        ]),
+        new Map<string, string | number>([
+          ['height', '100px'],
+          ['offset', 1],
+        ]),
+      ]);
+
+      webPlayer.finish();
+
+      cmp.exp = false;
+      fixture.detectChanges();
+      engine.flush();
+
+      expect(engine.players.length).toEqual(1);
+      webPlayer = (
+        engine.players[0] as TransitionAnimationPlayer
+      ).getRealPlayer() as ɵWebAnimationsPlayer;
+
+      expect(webPlayer.keyframes).toEqual([
+        new Map<string, string | number>([
+          ['height', '100px'],
+          ['offset', 0],
+        ]),
+        new Map<string, string | number>([
+          ['height', '0px'],
+          ['offset', 1],
+        ]),
+      ]);
+    });
 
-  it('should compute (!) animation styles for a container that is being inserted', () => {
-    @Component({
-      selector: 'ani-cmp',
-      template: `
+    it('should compute (!) animation styles for a container that is being inserted', () => {
+      @Component({
+        selector: 'ani-cmp',
+        template: `
           <div @auto *ngIf="exp">
             <div style="line-height:20px;">1</div>
             <div style="line-height:20px;">2</div>
@@ -95,96 +115,120 @@ describe('animation integration tests using web animations', function() {
             <div style="line-height:20px;">5</div>
           </div>
         `,
-      animations: [trigger(
-          'auto',
-          [transition(':enter', [style({height: '!'}), animate(1000, style({height: '120px'}))])])]
-    })
-    class Cmp {
-      public exp: boolean = false;
-    }
-
-    TestBed.configureTestingModule({declarations: [Cmp]});
-
-    const engine = TestBed.inject(ɵAnimationEngine);
-    const fixture = TestBed.createComponent(Cmp);
-    const cmp = fixture.componentInstance;
-
-    cmp.exp = true;
-    fixture.detectChanges();
-    engine.flush();
-
-    expect(engine.players.length).toEqual(1);
-    let webPlayer =
-        (engine.players[0] as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer;
-
-    expect(webPlayer.keyframes).toEqual([
-      new Map<string, string|number>([['height', '100px'], ['offset', 0]]),
-      new Map<string, string|number>([['height', '120px'], ['offset', 1]])
-    ]);
-  });
+        animations: [
+          trigger('auto', [
+            transition(':enter', [style({height: '!'}), animate(1000, style({height: '120px'}))]),
+          ]),
+        ],
+      })
+      class Cmp {
+        public exp: boolean = false;
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      cmp.exp = true;
+      fixture.detectChanges();
+      engine.flush();
+
+      expect(engine.players.length).toEqual(1);
+      let webPlayer = (
+        engine.players[0] as TransitionAnimationPlayer
+      ).getRealPlayer() as ɵWebAnimationsPlayer;
+
+      expect(webPlayer.keyframes).toEqual([
+        new Map<string, string | number>([
+          ['height', '100px'],
+          ['offset', 0],
+        ]),
+        new Map<string, string | number>([
+          ['height', '120px'],
+          ['offset', 1],
+        ]),
+      ]);
+    });
 
-  it('should compute pre (!) and post (*) animation styles with different dom states', () => {
-    @Component({
-      selector: 'ani-cmp',
-      template: `
+    it('should compute pre (!) and post (*) animation styles with different dom states', () => {
+      @Component({
+        selector: 'ani-cmp',
+        template: `
             <div [@myAnimation]="exp" #parent>
               <div *ngFor="let item of items" class="child" style="line-height:20px">
                 - {{ item }}
               </div>
             </div>
           `,
-      animations: [trigger(
-          'myAnimation',
-          [transition('* => *', [style({height: '!'}), animate(1000, style({height: '*'}))])])]
-    })
-    class Cmp {
-      public exp!: number;
-      public items = [0, 1, 2, 3, 4];
-    }
-
-    TestBed.configureTestingModule({declarations: [Cmp]});
-
-    const engine = TestBed.inject(ɵAnimationEngine);
-    const fixture = TestBed.createComponent(Cmp);
-    const cmp = fixture.componentInstance;
-
-    cmp.exp = 1;
-    fixture.detectChanges();
-    engine.flush();
-
-    expect(engine.players.length).toEqual(1);
-    let player = engine.players[0];
-    let webPlayer = (player as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer;
-
-    expect(webPlayer.keyframes).toEqual([
-      new Map<string, string|number>([['height', '0px'], ['offset', 0]]),
-      new Map<string, string|number>([['height', '100px'], ['offset', 1]])
-    ]);
-
-    // we destroy the player because since it has started and is
-    // at 0ms duration a height value of `0px` will be extracted
-    // from the element and passed into the follow-up animation.
-    player.destroy();
-
-    cmp.exp = 2;
-    cmp.items = [0, 1, 2, 6];
-    fixture.detectChanges();
-    engine.flush();
-
-    expect(engine.players.length).toEqual(1);
-    player = engine.players[0];
-    webPlayer = (player as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer;
-
-    expect(webPlayer.keyframes).toEqual([
-      new Map<string, string|number>([['height', '100px'], ['offset', 0]]),
-      new Map<string, string|number>([['height', '80px'], ['offset', 1]])
-    ]);
-  });
+        animations: [
+          trigger('myAnimation', [
+            transition('* => *', [style({height: '!'}), animate(1000, style({height: '*'}))]),
+          ]),
+        ],
+      })
+      class Cmp {
+        public exp!: number;
+        public items = [0, 1, 2, 3, 4];
+      }
 
-  it('should treat * styles as ! when a removal animation is being rendered', () => {
-    @Component({
-      selector: 'ani-cmp',
-      styles: [`
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      cmp.exp = 1;
+      fixture.detectChanges();
+      engine.flush();
+
+      expect(engine.players.length).toEqual(1);
+      let player = engine.players[0];
+      let webPlayer = (player as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer;
+
+      expect(webPlayer.keyframes).toEqual([
+        new Map<string, string | number>([
+          ['height', '0px'],
+          ['offset', 0],
+        ]),
+        new Map<string, string | number>([
+          ['height', '100px'],
+          ['offset', 1],
+        ]),
+      ]);
+
+      // we destroy the player because since it has started and is
+      // at 0ms duration a height value of `0px` will be extracted
+      // from the element and passed into the follow-up animation.
+      player.destroy();
+
+      cmp.exp = 2;
+      cmp.items = [0, 1, 2, 6];
+      fixture.detectChanges();
+      engine.flush();
+
+      expect(engine.players.length).toEqual(1);
+      player = engine.players[0];
+      webPlayer = (player as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer;
+
+      expect(webPlayer.keyframes).toEqual([
+        new Map<string, string | number>([
+          ['height', '100px'],
+          ['offset', 0],
+        ]),
+        new Map<string, string | number>([
+          ['height', '80px'],
+          ['offset', 1],
+        ]),
+      ]);
+    });
+
+    it('should treat * styles as ! when a removal animation is being rendered', () => {
+      @Component({
+        selector: 'ani-cmp',
+        styles: [
+          `
             .box {
               width: 500px;
               overflow:hidden;
@@ -193,63 +237,76 @@ describe('animation integration tests using web animations', function() {
               font-size:100px;
               text-align:center;
             }
-          `],
-      template: `
+          `,
+        ],
+        template: `
             <button (click)="toggle()">Open / Close</button>
             <hr />
             <div *ngIf="exp" @slide class="box">
             ...
             </div>
           `,
-      animations: [trigger(
-          'slide',
-          [
+        animations: [
+          trigger('slide', [
             state('void', style({height: '0px'})),
             state('*', style({height: '*'})),
             transition('* => *', animate('500ms')),
-          ])]
-    })
-    class Cmp {
-      exp = false;
-
-      toggle() {
-        this.exp = !this.exp;
+          ]),
+        ],
+      })
+      class Cmp {
+        exp = false;
+
+        toggle() {
+          this.exp = !this.exp;
+        }
       }
-    }
-
-    TestBed.configureTestingModule({declarations: [Cmp]});
-
-    const engine = TestBed.inject(ɵAnimationEngine);
-    const fixture = TestBed.createComponent(Cmp);
-    const cmp = fixture.componentInstance;
-
-    cmp.exp = true;
-    fixture.detectChanges();
-
-    let player = engine.players[0];
-    let webPlayer = (player as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer;
-    expect(webPlayer.keyframes).toEqual([
-      new Map<string, string|number>([['height', '0px'], ['offset', 0]]),
-      new Map<string, string|number>([['height', '300px'], ['offset', 1]]),
-    ]);
-    player.finish();
-
-    cmp.exp = false;
-    fixture.detectChanges();
-
-    player = engine.players[0];
-    webPlayer = (player as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer;
-    expect(webPlayer.keyframes).toEqual([
-      new Map<string, string|number>([['height', '300px'], ['offset', 0]]),
-      new Map<string, string|number>([['height', '0px'], ['offset', 1]]),
-    ]);
-  });
 
-  it('should treat * styles as ! for queried items that are collected in a container that is being removed',
-     () => {
-       @Component({
-          selector: 'my-app',
-          styles: [`
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      cmp.exp = true;
+      fixture.detectChanges();
+
+      let player = engine.players[0];
+      let webPlayer = (player as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer;
+      expect(webPlayer.keyframes).toEqual([
+        new Map<string, string | number>([
+          ['height', '0px'],
+          ['offset', 0],
+        ]),
+        new Map<string, string | number>([
+          ['height', '300px'],
+          ['offset', 1],
+        ]),
+      ]);
+      player.finish();
+
+      cmp.exp = false;
+      fixture.detectChanges();
+
+      player = engine.players[0];
+      webPlayer = (player as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer;
+      expect(webPlayer.keyframes).toEqual([
+        new Map<string, string | number>([
+          ['height', '300px'],
+          ['offset', 0],
+        ]),
+        new Map<string, string | number>([
+          ['height', '0px'],
+          ['offset', 1],
+        ]),
+      ]);
+    });
+
+    it('should treat * styles as ! for queried items that are collected in a container that is being removed', () => {
+      @Component({
+        selector: 'my-app',
+        styles: [
+          `
               .list .outer {
                 overflow:hidden;
               }
@@ -257,8 +314,9 @@ describe('animation integration tests using web animations', function() {
                 box-sizing: border-box;
                 height: 50px;
               }
-            `],
-          template: `
+            `,
+        ],
+        template: `
               <button (click)="empty()">Empty</button>
               <button (click)="middle()">Middle</button>
               <button (click)="full()">Full</button>
@@ -271,365 +329,368 @@ describe('animation integration tests using web animations', function() {
                 </div>
               </div>
             `,
-          animations: [
-            trigger('list', [
-              transition(':enter', []),
-              transition('* => empty', [
-                query(':leave', [
-                  animate(500, style({height: '0px'}))
-                ])
-              ]),
-              transition('* => full', [
-                query(':enter', [
-                  style({height: '0px'}),
-                  animate(500, style({height: '*'}))
-                ])
-              ]),
-            ])
-          ]
-        })
-        class Cmp {
-         items: any[] = [];
-
-         get exp() {
-           return this.items.length ? 'full' : 'empty';
-         }
-
-         empty() {
-           this.items = [];
-         }
-
-         full() {
-           this.items = [0, 1, 2, 3, 4];
-         }
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp]});
-
-       const engine = TestBed.inject(ɵAnimationEngine);
-       const fixture = TestBed.createComponent(Cmp);
-       const cmp = fixture.componentInstance;
-
-       cmp.empty();
-       fixture.detectChanges();
-       let player = engine.players[0] as TransitionAnimationPlayer;
-       player.finish();
-
-       cmp.full();
-       fixture.detectChanges();
-
-       player = engine.players[0] as TransitionAnimationPlayer;
-       let queriedPlayers =
-           ((player as TransitionAnimationPlayer).getRealPlayer() as AnimationGroupPlayer).players;
-       expect(queriedPlayers.length).toEqual(5);
-
-       let i = 0;
-       for (i = 0; i < queriedPlayers.length; i++) {
-         let player = queriedPlayers[i] as ɵWebAnimationsPlayer;
-         expect(player.keyframes).toEqual([
-           new Map<string, string|number>([['height', '0px'], ['offset', 0]]),
-           new Map<string, string|number>([['height', '50px'], ['offset', 1]]),
-         ]);
-         player.finish();
-       }
-
-       cmp.empty();
-       fixture.detectChanges();
-
-       player = engine.players[0] as TransitionAnimationPlayer;
-       queriedPlayers =
-           ((player as TransitionAnimationPlayer).getRealPlayer() as AnimationGroupPlayer).players;
-       expect(queriedPlayers.length).toEqual(5);
-
-       for (i = 0; i < queriedPlayers.length; i++) {
-         let player = queriedPlayers[i] as ɵWebAnimationsPlayer;
-         expect(player.keyframes).toEqual([
-           new Map<string, string|number>([['height', '50px'], ['offset', 0]]),
-           new Map<string, string|number>([['height', '0px'], ['offset', 1]]),
-         ]);
-       }
-     });
-
-  it('should compute intermediate styles properly when an animation is cancelled', () => {
-    @Component({
-      selector: 'ani-cmp',
-      template: `
+        animations: [
+          trigger('list', [
+            transition(':enter', []),
+            transition('* => empty', [query(':leave', [animate(500, style({height: '0px'}))])]),
+            transition('* => full', [
+              query(':enter', [style({height: '0px'}), animate(500, style({height: '*'}))]),
+            ]),
+          ]),
+        ],
+      })
+      class Cmp {
+        items: any[] = [];
+
+        get exp() {
+          return this.items.length ? 'full' : 'empty';
+        }
+
+        empty() {
+          this.items = [];
+        }
+
+        full() {
+          this.items = [0, 1, 2, 3, 4];
+        }
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      cmp.empty();
+      fixture.detectChanges();
+      let player = engine.players[0] as TransitionAnimationPlayer;
+      player.finish();
+
+      cmp.full();
+      fixture.detectChanges();
+
+      player = engine.players[0] as TransitionAnimationPlayer;
+      let queriedPlayers = (
+        (player as TransitionAnimationPlayer).getRealPlayer() as AnimationGroupPlayer
+      ).players;
+      expect(queriedPlayers.length).toEqual(5);
+
+      let i = 0;
+      for (i = 0; i < queriedPlayers.length; i++) {
+        let player = queriedPlayers[i] as ɵWebAnimationsPlayer;
+        expect(player.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['height', '0px'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['height', '50px'],
+            ['offset', 1],
+          ]),
+        ]);
+        player.finish();
+      }
+
+      cmp.empty();
+      fixture.detectChanges();
+
+      player = engine.players[0] as TransitionAnimationPlayer;
+      queriedPlayers = (
+        (player as TransitionAnimationPlayer).getRealPlayer() as AnimationGroupPlayer
+      ).players;
+      expect(queriedPlayers.length).toEqual(5);
+
+      for (i = 0; i < queriedPlayers.length; i++) {
+        let player = queriedPlayers[i] as ɵWebAnimationsPlayer;
+        expect(player.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['height', '50px'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['height', '0px'],
+            ['offset', 1],
+          ]),
+        ]);
+      }
+    });
+
+    it('should compute intermediate styles properly when an animation is cancelled', () => {
+      @Component({
+        selector: 'ani-cmp',
+        template: `
           <div [@myAnimation]="exp" style="background-color: blue;">...</div>
         `,
-      animations: [
-        trigger(
-            'myAnimation',
-            [
-              transition(
-                  '* => a',
-                  [
-                    style({width: 0, height: 0}),
-                    animate('1s', style({width: '300px', height: '600px'})),
-                  ]),
-              transition('* => b', [animate('1s', style({opacity: 0}))]),
+        animations: [
+          trigger('myAnimation', [
+            transition('* => a', [
+              style({width: 0, height: 0}),
+              animate('1s', style({width: '300px', height: '600px'})),
             ]),
-      ]
-    })
-    class Cmp {
-      public exp: string|undefined;
-    }
-
-    TestBed.configureTestingModule({declarations: [Cmp]});
-
-    const engine = TestBed.inject(ɵAnimationEngine);
-    const fixture = TestBed.createComponent(Cmp);
-    const cmp = fixture.componentInstance;
-
-    cmp.exp = 'a';
-    fixture.detectChanges();
-
-    const player1 = engine.players[0];
-    const webPlayer1 =
-        (player1 as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer;
-    webPlayer1.setPosition(0.5);
-
-    cmp.exp = 'b';
-    fixture.detectChanges();
-
-    const player2 = engine.players[0];
-    const webPlayer2 =
-        (player2 as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer;
-    expect(approximate(parseFloat(webPlayer2.keyframes[0].get('width') as string), 150))
-        .toBeLessThan(0.05);
-    expect(approximate(parseFloat(webPlayer2.keyframes[0].get('height') as string), 300))
-        .toBeLessThan(0.05);
-  });
+            transition('* => b', [animate('1s', style({opacity: 0}))]),
+          ]),
+        ],
+      })
+      class Cmp {
+        public exp: string | undefined;
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      cmp.exp = 'a';
+      fixture.detectChanges();
+
+      const player1 = engine.players[0];
+      const webPlayer1 = (
+        player1 as TransitionAnimationPlayer
+      ).getRealPlayer() as ɵWebAnimationsPlayer;
+      webPlayer1.setPosition(0.5);
+
+      cmp.exp = 'b';
+      fixture.detectChanges();
+
+      const player2 = engine.players[0];
+      const webPlayer2 = (
+        player2 as TransitionAnimationPlayer
+      ).getRealPlayer() as ɵWebAnimationsPlayer;
+      expect(
+        approximate(parseFloat(webPlayer2.keyframes[0].get('width') as string), 150),
+      ).toBeLessThan(0.05);
+      expect(
+        approximate(parseFloat(webPlayer2.keyframes[0].get('height') as string), 300),
+      ).toBeLessThan(0.05);
+    });
 
-  it('should compute intermediate styles properly for multiple queried elements when an animation is cancelled',
-     () => {
-       @Component({
-         selector: 'ani-cmp',
-         template: `
+    it('should compute intermediate styles properly for multiple queried elements when an animation is cancelled', () => {
+      @Component({
+        selector: 'ani-cmp',
+        template: `
           <div [@myAnimation]="exp">
             <div *ngFor="let item of items" class="target"></div>
           </div>
         `,
-         animations: [
-           trigger(
-               'myAnimation',
-               [
-                 transition(
-                     '* => full', [query(
-                                      '.target',
-                                      [
-                                        style({width: 0, height: 0}),
-                                        animate('1s', style({width: '500px', height: '1000px'})),
-                                      ])]),
-                 transition('* => empty', [query('.target', [animate('1s', style({opacity: 0}))])]),
-               ]),
-         ]
-       })
-       class Cmp {
-         public exp: string|undefined;
-         public items: any[] = [];
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp]});
-
-       const engine = TestBed.inject(ɵAnimationEngine);
-       const fixture = TestBed.createComponent(Cmp);
-       const cmp = fixture.componentInstance;
-
-       cmp.exp = 'full';
-       cmp.items = [0, 1, 2, 3, 4];
-       fixture.detectChanges();
-
-       let player = engine.players[0];
-       let groupPlayer =
-           (player as TransitionAnimationPlayer).getRealPlayer() as AnimationGroupPlayer;
-       let players = groupPlayer.players;
-       expect(players.length).toEqual(5);
-
-       for (let i = 0; i < players.length; i++) {
-         const p = players[i] as ɵWebAnimationsPlayer;
-         p.setPosition(0.5);
-       }
-
-       cmp.exp = 'empty';
-       cmp.items = [];
-       fixture.detectChanges();
-
-       player = engine.players[0];
-       groupPlayer = (player as TransitionAnimationPlayer).getRealPlayer() as AnimationGroupPlayer;
-       players = groupPlayer.players;
-
-       expect(players.length).toEqual(5);
-       for (let i = 0; i < players.length; i++) {
-         const p = players[i] as ɵWebAnimationsPlayer;
-         expect(approximate(parseFloat(p.keyframes[0].get('width') as string), 250))
-             .toBeLessThan(0.05);
-         expect(approximate(parseFloat(p.keyframes[0].get('height') as string), 500))
-             .toBeLessThan(0.05);
-       }
-     });
-
-  it('should apply the `display` and `position` styles as regular inline styles for the duration of the animation',
-     () => {
-       @Component({
-         selector: 'ani-cmp',
-         template: `
+        animations: [
+          trigger('myAnimation', [
+            transition('* => full', [
+              query('.target', [
+                style({width: 0, height: 0}),
+                animate('1s', style({width: '500px', height: '1000px'})),
+              ]),
+            ]),
+            transition('* => empty', [query('.target', [animate('1s', style({opacity: 0}))])]),
+          ]),
+        ],
+      })
+      class Cmp {
+        public exp: string | undefined;
+        public items: any[] = [];
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      cmp.exp = 'full';
+      cmp.items = [0, 1, 2, 3, 4];
+      fixture.detectChanges();
+
+      let player = engine.players[0];
+      let groupPlayer = (
+        player as TransitionAnimationPlayer
+      ).getRealPlayer() as AnimationGroupPlayer;
+      let players = groupPlayer.players;
+      expect(players.length).toEqual(5);
+
+      for (let i = 0; i < players.length; i++) {
+        const p = players[i] as ɵWebAnimationsPlayer;
+        p.setPosition(0.5);
+      }
+
+      cmp.exp = 'empty';
+      cmp.items = [];
+      fixture.detectChanges();
+
+      player = engine.players[0];
+      groupPlayer = (player as TransitionAnimationPlayer).getRealPlayer() as AnimationGroupPlayer;
+      players = groupPlayer.players;
+
+      expect(players.length).toEqual(5);
+      for (let i = 0; i < players.length; i++) {
+        const p = players[i] as ɵWebAnimationsPlayer;
+        expect(approximate(parseFloat(p.keyframes[0].get('width') as string), 250)).toBeLessThan(
+          0.05,
+        );
+        expect(approximate(parseFloat(p.keyframes[0].get('height') as string), 500)).toBeLessThan(
+          0.05,
+        );
+      }
+    });
+
+    it('should apply the `display` and `position` styles as regular inline styles for the duration of the animation', () => {
+      @Component({
+        selector: 'ani-cmp',
+        template: `
           <div #elm [@myAnimation]="myAnimationExp" style="display:table; position:fixed"></div>
         `,
-         animations: [
-           trigger(
-               'myAnimation',
-               [
-                 state('go', style({display: 'inline-block'})),
-                 transition(
-                     '* => go',
-                     [
-                       style({display: 'inline', position: 'absolute', opacity: 0}),
-                       animate('1s', style({display: 'inline', opacity: 1, position: 'static'})),
-                       animate('1s', style({display: 'flexbox', opacity: 0})),
-                     ])
-               ]),
-         ]
-       })
-       class Cmp {
-         @ViewChild('elm', {static: true}) public element: any;
-
-         public myAnimationExp = '';
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp]});
-
-       const engine = TestBed.inject(ɵAnimationEngine);
-       const fixture = TestBed.createComponent(Cmp);
-       const cmp = fixture.componentInstance;
-
-       const elm = cmp.element.nativeElement;
-       expect(elm.style.getPropertyValue('display')).toEqual('table');
-       expect(elm.style.getPropertyValue('position')).toEqual('fixed');
-
-       cmp.myAnimationExp = 'go';
-       fixture.detectChanges();
-
-       expect(elm.style.getPropertyValue('display')).toEqual('inline');
-       expect(elm.style.getPropertyValue('position')).toEqual('absolute');
-
-       const player = engine.players.pop()!;
-       player.finish();
-       player.destroy();
-
-       expect(elm.style.getPropertyValue('display')).toEqual('inline-block');
-       expect(elm.style.getPropertyValue('position')).toEqual('fixed');
-     });
-
-  it('should set normalized style property values on animation end', () => {
-    @Component({
-      selector: 'ani-cmp',
-      template: `
-          <div #elm [@myAnimation]="myAnimationExp" style="width: 100%; font-size: 2rem"></div>
-        `,
-      animations: [
-        trigger(
-            'myAnimation',
-            [
-              state('go', style({width: 300, 'font-size': 14})),
-              transition('* => go', [animate('1s')])
+        animations: [
+          trigger('myAnimation', [
+            state('go', style({display: 'inline-block'})),
+            transition('* => go', [
+              style({display: 'inline', position: 'absolute', opacity: 0}),
+              animate('1s', style({display: 'inline', opacity: 1, position: 'static'})),
+              animate('1s', style({display: 'flexbox', opacity: 0})),
             ]),
-      ]
-    })
-    class Cmp {
-      @ViewChild('elm', {static: true}) public element: any;
+          ]),
+        ],
+      })
+      class Cmp {
+        @ViewChild('elm', {static: true}) public element: any;
+
+        public myAnimationExp = '';
+      }
 
-      public myAnimationExp = '';
-    }
+      TestBed.configureTestingModule({declarations: [Cmp]});
 
-    TestBed.configureTestingModule({declarations: [Cmp]});
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
 
-    const engine = TestBed.inject(ɵAnimationEngine);
-    const fixture = TestBed.createComponent(Cmp);
-    const cmp = fixture.componentInstance;
+      const elm = cmp.element.nativeElement;
+      expect(elm.style.getPropertyValue('display')).toEqual('table');
+      expect(elm.style.getPropertyValue('position')).toEqual('fixed');
 
-    const elm = cmp.element.nativeElement;
-    expect(elm.style.getPropertyValue('width')).toEqual('100%');
-    expect(elm.style.getPropertyValue('font-size')).toEqual('2rem');
+      cmp.myAnimationExp = 'go';
+      fixture.detectChanges();
 
-    cmp.myAnimationExp = 'go';
-    fixture.detectChanges();
+      expect(elm.style.getPropertyValue('display')).toEqual('inline');
+      expect(elm.style.getPropertyValue('position')).toEqual('absolute');
 
-    const player = engine.players.pop()!;
-    player.finish();
-    player.destroy();
+      const player = engine.players.pop()!;
+      player.finish();
+      player.destroy();
 
-    expect(elm.style.getPropertyValue('width')).toEqual('300px');
-    expect(elm.style.getPropertyValue('font-size')).toEqual('14px');
-  });
+      expect(elm.style.getPropertyValue('display')).toEqual('inline-block');
+      expect(elm.style.getPropertyValue('position')).toEqual('fixed');
+    });
+
+    it('should set normalized style property values on animation end', () => {
+      @Component({
+        selector: 'ani-cmp',
+        template: `
+          <div #elm [@myAnimation]="myAnimationExp" style="width: 100%; font-size: 2rem"></div>
+        `,
+        animations: [
+          trigger('myAnimation', [
+            state('go', style({width: 300, 'font-size': 14})),
+            transition('* => go', [animate('1s')]),
+          ]),
+        ],
+      })
+      class Cmp {
+        @ViewChild('elm', {static: true}) public element: any;
+
+        public myAnimationExp = '';
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      const elm = cmp.element.nativeElement;
+      expect(elm.style.getPropertyValue('width')).toEqual('100%');
+      expect(elm.style.getPropertyValue('font-size')).toEqual('2rem');
+
+      cmp.myAnimationExp = 'go';
+      fixture.detectChanges();
 
-  it('should apply correct state transitions for both CamelCase and kebab-case CSS properties',
-     () => {
-       @Component({
-         selector: 'ani-cmp',
-         template: `
+      const player = engine.players.pop()!;
+      player.finish();
+      player.destroy();
+
+      expect(elm.style.getPropertyValue('width')).toEqual('300px');
+      expect(elm.style.getPropertyValue('font-size')).toEqual('14px');
+    });
+
+    it('should apply correct state transitions for both CamelCase and kebab-case CSS properties', () => {
+      @Component({
+        selector: 'ani-cmp',
+        template: `
           <div id="camelCaseDiv" [@camelCaseTrigger]="status"></div>
           <div id="kebab-case-div" [@kebab-case-trigger]="status"></div>
         `,
-         animations: [
-           trigger(
-               'camelCaseTrigger',
-               [
-                 state('active', style({
-                         'backgroundColor': 'green',
-                       })),
-                 transition(
-                     'inactive => active',
-                     [
-                       style({
-                         'backgroundColor': 'red',
-                       }),
-                       animate(500),
-                     ]),
-               ]),
-           trigger(
-               'kebab-case-trigger',
-               [
-                 state('active', style({
-                         'background-color': 'green',
-                       })),
-                 transition(
-                     'inactive => active',
-                     [
-                       style({
-                         'background-color': 'red',
-                       }),
-                       animate(500),
-                     ]),
-               ]),
-         ]
-       })
-       class Cmp {
-         public status: 'active'|'inactive' = 'inactive';
-       }
-
-       TestBed.configureTestingModule({declarations: [Cmp]});
-
-       const engine = TestBed.inject(ɵAnimationEngine);
-       const fixture = TestBed.createComponent(Cmp);
-       const cmp = fixture.componentInstance;
-       fixture.detectChanges();
-
-       cmp.status = 'active';
-       fixture.detectChanges();
-       engine.flush();
-
-       expect(engine.players.length).toEqual(2);
-       const [camelCaseWebPlayer, kebabCaseWebPlayer] = engine.players.map(
-           player => (player as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer);
-
-       [camelCaseWebPlayer, kebabCaseWebPlayer].forEach(webPlayer => {
-         expect(webPlayer.keyframes).toEqual([
-           new Map<string, string|number>([['backgroundColor', 'red'], ['offset', 0]]),
-           new Map<string, string|number>([['backgroundColor', 'green'], ['offset', 1]])
-         ]);
-       });
-     });
-});
+        animations: [
+          trigger('camelCaseTrigger', [
+            state(
+              'active',
+              style({
+                'backgroundColor': 'green',
+              }),
+            ),
+            transition('inactive => active', [
+              style({
+                'backgroundColor': 'red',
+              }),
+              animate(500),
+            ]),
+          ]),
+          trigger('kebab-case-trigger', [
+            state(
+              'active',
+              style({
+                'background-color': 'green',
+              }),
+            ),
+            transition('inactive => active', [
+              style({
+                'background-color': 'red',
+              }),
+              animate(500),
+            ]),
+          ]),
+        ],
+      })
+      class Cmp {
+        public status: 'active' | 'inactive' = 'inactive';
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+      fixture.detectChanges();
+
+      cmp.status = 'active';
+      fixture.detectChanges();
+      engine.flush();
+
+      expect(engine.players.length).toEqual(2);
+      const [camelCaseWebPlayer, kebabCaseWebPlayer] = engine.players.map(
+        (player) => (player as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer,
+      );
+
+      [camelCaseWebPlayer, kebabCaseWebPlayer].forEach((webPlayer) => {
+        expect(webPlayer.keyframes).toEqual([
+          new Map<string, string | number>([
+            ['backgroundColor', 'red'],
+            ['offset', 0],
+          ]),
+          new Map<string, string | number>([
+            ['backgroundColor', 'green'],
+            ['offset', 1],
+          ]),
+        ]);
+      });
+    });
+  });
 })();
 
 function approximate(value: number, target: number) {
diff --git a/packages/core/test/application_config_spec.ts b/packages/core/test/application_config_spec.ts
index 911d7aa551bd0..0304e7d21ef2e 100644
--- a/packages/core/test/application_config_spec.ts
+++ b/packages/core/test/application_config_spec.ts
@@ -22,7 +22,7 @@ describe('ApplicationConfig', () => {
         {provide: FOO_TOKEN, useValue: 'foo'},
         {provide: BAR_TOKEN, useValue: 'bar'},
         {provide: BUZ_TOKEN, useValue: 'buz'},
-      ]
+      ],
     };
 
     it('should merge 2 configs from left to right', () => {
@@ -39,14 +39,10 @@ describe('ApplicationConfig', () => {
 
     it('should merge more than 2 configs from left to right', () => {
       const extraConfigOne: ApplicationConfig = {
-        providers: [
-          {provide: BAR_TOKEN, useValue: 'bar'},
-        ],
+        providers: [{provide: BAR_TOKEN, useValue: 'bar'}],
       };
       const extraConfigTwo: ApplicationConfig = {
-        providers: [
-          {provide: BUZ_TOKEN, useValue: 'buz'},
-        ],
+        providers: [{provide: BUZ_TOKEN, useValue: 'buz'}],
       };
 
       const config = mergeApplicationConfig(BASE_CONFIG, extraConfigOne, extraConfigTwo);
diff --git a/packages/core/test/application_init_spec.ts b/packages/core/test/application_init_spec.ts
index 43be438fbc0dc..a20a0b226507b 100644
--- a/packages/core/test/application_init_spec.ts
+++ b/packages/core/test/application_init_spec.ts
@@ -5,7 +5,10 @@
  * 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
  */
-import {APP_INITIALIZER, ApplicationInitStatus} from '@angular/core/src/application/application_init';
+import {
+  APP_INITIALIZER,
+  ApplicationInitStatus,
+} from '@angular/core/src/application/application_init';
 import {EMPTY, Observable, Subscriber} from 'rxjs';
 
 import {TestBed} from '../testing';
@@ -13,8 +16,8 @@ import {TestBed} from '../testing';
 describe('ApplicationInitStatus', () => {
   let status: ApplicationInitStatus;
   const runInitializers = () =>
-      // Cast to `any` to access an internal function for testing purposes.
-      (status as any).runInitializers();
+    // Cast to `any` to access an internal function for testing purposes.
+    (status as any).runInitializers();
 
   describe('no initializers', () => {
     beforeEach(() => {
@@ -45,8 +48,9 @@ describe('ApplicationInitStatus', () => {
         resolve = res;
         reject = rej;
       });
-      TestBed.configureTestingModule(
-          {providers: [{provide: APP_INITIALIZER, useValue: [() => promise]}]});
+      TestBed.configureTestingModule({
+        providers: [{provide: APP_INITIALIZER, useValue: [() => promise]}],
+      });
       status = TestBed.inject(ApplicationInitStatus);
     });
 
@@ -91,62 +95,61 @@ describe('ApplicationInitStatus', () => {
         subscriber = res;
       });
 
-      TestBed.configureTestingModule(
-          {providers: [{provide: APP_INITIALIZER, useValue: [() => observable]}]});
+      TestBed.configureTestingModule({
+        providers: [{provide: APP_INITIALIZER, useValue: [() => observable]}],
+      });
       status = TestBed.inject(ApplicationInitStatus);
     });
 
-    it('should update the status once all async observable initializers are completed',
-       async () => {
-         runInitializers();
-
-         setTimeout(() => {
-           initFnInvoked = true;
-           subscriber.complete();
-         });
-
-         expect(status.done).toBe(false);
-         await status.donePromise;
-         expect(status.done).toBe(true);
-         expect(initFnInvoked).toBe(true);
-       });
-
-    it('should update the status once all async observable initializers emitted and completed',
-       async () => {
-         runInitializers();
-
-         subscriber.next('one');
-         subscriber.next('two');
-
-         setTimeout(() => {
-           initFnInvoked = true;
-           subscriber.complete();
-         });
-
-         await status.donePromise;
-         expect(status.done).toBe(true);
-         expect(initFnInvoked).toBe(true);
-       });
-
-    it('should update the status if all async observable initializers are completed synchronously',
-       async () => {
-         // Create a status instance using an initializer that returns the `EMPTY` Observable
-         // which completes synchronously upon subscription.
-         TestBed.resetTestingModule();
-         TestBed.configureTestingModule(
-             {providers: [{provide: APP_INITIALIZER, useValue: [() => EMPTY]}]});
-         status = TestBed.inject(ApplicationInitStatus);
-
-         runInitializers();
-
-         // Although the Observable completes synchronously, we still queue a promise for
-         // simplicity. This means that the `done` flag will not be `true` immediately, even
-         // though there was not actually any asynchronous activity.
-         expect(status.done).toBe(false);
-
-         await status.donePromise;
-         expect(status.done).toBe(true);
-       });
+    it('should update the status once all async observable initializers are completed', async () => {
+      runInitializers();
+
+      setTimeout(() => {
+        initFnInvoked = true;
+        subscriber.complete();
+      });
+
+      expect(status.done).toBe(false);
+      await status.donePromise;
+      expect(status.done).toBe(true);
+      expect(initFnInvoked).toBe(true);
+    });
+
+    it('should update the status once all async observable initializers emitted and completed', async () => {
+      runInitializers();
+
+      subscriber.next('one');
+      subscriber.next('two');
+
+      setTimeout(() => {
+        initFnInvoked = true;
+        subscriber.complete();
+      });
+
+      await status.donePromise;
+      expect(status.done).toBe(true);
+      expect(initFnInvoked).toBe(true);
+    });
+
+    it('should update the status if all async observable initializers are completed synchronously', async () => {
+      // Create a status instance using an initializer that returns the `EMPTY` Observable
+      // which completes synchronously upon subscription.
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        providers: [{provide: APP_INITIALIZER, useValue: [() => EMPTY]}],
+      });
+      status = TestBed.inject(ApplicationInitStatus);
+
+      runInitializers();
+
+      // Although the Observable completes synchronously, we still queue a promise for
+      // simplicity. This means that the `done` flag will not be `true` immediately, even
+      // though there was not actually any asynchronous activity.
+      expect(status.done).toBe(false);
+
+      await status.donePromise;
+      expect(status.done).toBe(true);
+    });
 
     it('should handle a case when observable emits an error', async () => {
       runInitializers();
@@ -170,18 +173,18 @@ describe('ApplicationInitStatus', () => {
 
   describe('wrong initializers', () => {
     beforeEach(() => {
-      TestBed.configureTestingModule(
-          {providers: [{provide: APP_INITIALIZER, useValue: 'notAnArray'}]});
+      TestBed.configureTestingModule({
+        providers: [{provide: APP_INITIALIZER, useValue: 'notAnArray'}],
+      });
     });
 
     it('should throw', () => {
-      expect(() => TestBed.inject(ApplicationInitStatus))
-          .toThrowError(
-              'NG0209: Unexpected type of the `APP_INITIALIZER` token value ' +
-                  `(expected an array, but got string). ` +
-                  'Please check that the `APP_INITIALIZER` token is configured as a ' +
-                  '`multi: true` provider. Find more at https://angular.io/errors/NG0209',
-          );
+      expect(() => TestBed.inject(ApplicationInitStatus)).toThrowError(
+        'NG0209: Unexpected type of the `APP_INITIALIZER` token value ' +
+          `(expected an array, but got string). ` +
+          'Please check that the `APP_INITIALIZER` token is configured as a ' +
+          '`multi: true` provider. Find more at https://angular.io/errors/NG0209',
+      );
     });
   });
 });
diff --git a/packages/core/test/application_module_spec.ts b/packages/core/test/application_module_spec.ts
index 083d489bb8532..54ce6d816b239 100644
--- a/packages/core/test/application_module_spec.ts
+++ b/packages/core/test/application_module_spec.ts
@@ -20,13 +20,15 @@ describe('Application module', () => {
   });
 
   it('should set the default locale to "en-US"', inject([LOCALE_ID], (defaultLocale: string) => {
-       expect(defaultLocale).toEqual('en-US');
-     }));
+    expect(defaultLocale).toEqual('en-US');
+  }));
 
-  it('should set the default currency code to "USD"',
-     inject([DEFAULT_CURRENCY_CODE], (defaultCurrencyCode: string) => {
-       expect(defaultCurrencyCode).toEqual('USD');
-     }));
+  it('should set the default currency code to "USD"', inject(
+    [DEFAULT_CURRENCY_CODE],
+    (defaultCurrencyCode: string) => {
+      expect(defaultCurrencyCode).toEqual('USD');
+    },
+  ));
 
   it('should set the ivy locale with the configured LOCALE_ID', () => {
     TestBed.configureTestingModule({providers: [{provide: LOCALE_ID, useValue: 'fr'}]});
@@ -49,13 +51,12 @@ describe('Application module', () => {
       expect(getLocaleId()).toEqual('de');
     });
 
-    it('should set the ivy locale to an application provided LOCALE_ID even if `$localize.locale` is defined',
-       () => {
-         TestBed.configureTestingModule({providers: [{provide: LOCALE_ID, useValue: 'fr'}]});
-         const locale = TestBed.inject(LOCALE_ID);
-         expect(locale).toEqual('fr');
-         expect(getLocaleId()).toEqual('fr');
-       });
+    it('should set the ivy locale to an application provided LOCALE_ID even if `$localize.locale` is defined', () => {
+      TestBed.configureTestingModule({providers: [{provide: LOCALE_ID, useValue: 'fr'}]});
+      const locale = TestBed.inject(LOCALE_ID);
+      expect(locale).toEqual('fr');
+      expect(getLocaleId()).toEqual('fr');
+    });
   });
 });
 
diff --git a/packages/core/test/application_ref_integration_spec.ts b/packages/core/test/application_ref_integration_spec.ts
index ab6c7ffd62269..5cb3c3cf57a95 100644
--- a/packages/core/test/application_ref_integration_spec.ts
+++ b/packages/core/test/application_ref_integration_spec.ts
@@ -7,7 +7,14 @@
  */
 
 import {DOCUMENT} from '@angular/common';
-import {ApplicationRef, Component, DoCheck, NgModule, OnInit, TestabilityRegistry} from '@angular/core';
+import {
+  ApplicationRef,
+  Component,
+  DoCheck,
+  NgModule,
+  OnInit,
+  TestabilityRegistry,
+} from '@angular/core';
 import {getTestBed} from '@angular/core/testing';
 import {BrowserModule} from '@angular/platform-browser';
 import {withBody} from '@angular/private/testing';
@@ -35,42 +42,48 @@ describe('ApplicationRef bootstrap', () => {
     declarations: [HelloWorldComponent],
     bootstrap: [HelloWorldComponent],
     imports: [BrowserModule],
-    providers: [{provide: DOCUMENT, useFactory: () => document}]
+    providers: [{provide: DOCUMENT, useFactory: () => document}],
   })
-  class MyAppModule {
-  }
+  class MyAppModule {}
 
-  it('should bootstrap hello world', withBody('<hello-world></hello-world>', async () => {
-       const MyAppModuleFactory = new NgModuleFactory(MyAppModule);
-       const moduleRef =
-           await getTestBed().platform.bootstrapModuleFactory(MyAppModuleFactory, {ngZone: 'noop'});
-       const appRef = moduleRef.injector.get(ApplicationRef);
-       const helloWorldComponent = appRef.components[0].instance as HelloWorldComponent;
-       expect(document.body.innerHTML)
-           .toEqual(
-               '<hello-world ng-version="0.0.0-PLACEHOLDER"><div>Hello World</div></hello-world>');
-       expect(helloWorldComponent.log).toEqual(['OnInit', 'DoCheck']);
+  it(
+    'should bootstrap hello world',
+    withBody('<hello-world></hello-world>', async () => {
+      const MyAppModuleFactory = new NgModuleFactory(MyAppModule);
+      const moduleRef = await getTestBed().platform.bootstrapModuleFactory(MyAppModuleFactory, {
+        ngZone: 'noop',
+      });
+      const appRef = moduleRef.injector.get(ApplicationRef);
+      const helloWorldComponent = appRef.components[0].instance as HelloWorldComponent;
+      expect(document.body.innerHTML).toEqual(
+        '<hello-world ng-version="0.0.0-PLACEHOLDER"><div>Hello World</div></hello-world>',
+      );
+      expect(helloWorldComponent.log).toEqual(['OnInit', 'DoCheck']);
 
-       helloWorldComponent.name = 'Mundo';
-       appRef.tick();
-       expect(document.body.innerHTML)
-           .toEqual(
-               '<hello-world ng-version="0.0.0-PLACEHOLDER"><div>Hello Mundo</div></hello-world>');
-       expect(helloWorldComponent.log).toEqual(['OnInit', 'DoCheck', 'DoCheck']);
+      helloWorldComponent.name = 'Mundo';
+      appRef.tick();
+      expect(document.body.innerHTML).toEqual(
+        '<hello-world ng-version="0.0.0-PLACEHOLDER"><div>Hello Mundo</div></hello-world>',
+      );
+      expect(helloWorldComponent.log).toEqual(['OnInit', 'DoCheck', 'DoCheck']);
 
-       // Cleanup TestabilityRegistry
-       const registry: TestabilityRegistry = getTestBed().get(TestabilityRegistry);
-       registry.unregisterAllApplications();
-     }));
+      // Cleanup TestabilityRegistry
+      const registry: TestabilityRegistry = getTestBed().get(TestabilityRegistry);
+      registry.unregisterAllApplications();
+    }),
+  );
 
-  it('should expose the `window.ng` global utilities',
-     withBody('<hello-world></hello-world>', async () => {
-       const MyAppModuleFactory = new NgModuleFactory(MyAppModule);
-       const moduleRef =
-           await getTestBed().platform.bootstrapModuleFactory(MyAppModuleFactory, {ngZone: 'noop'});
+  it(
+    'should expose the `window.ng` global utilities',
+    withBody('<hello-world></hello-world>', async () => {
+      const MyAppModuleFactory = new NgModuleFactory(MyAppModule);
+      const moduleRef = await getTestBed().platform.bootstrapModuleFactory(MyAppModuleFactory, {
+        ngZone: 'noop',
+      });
 
-       const glob = typeof global !== 'undefined' ? global : window;
-       const ngUtils = (glob as any).ng;
-       expect(ngUtils.getComponent).toBeTruthy();
-     }));
+      const glob = typeof global !== 'undefined' ? global : window;
+      const ngUtils = (glob as any).ng;
+      expect(ngUtils.getComponent).toBeTruthy();
+    }),
+  );
 });
diff --git a/packages/core/test/application_ref_spec.ts b/packages/core/test/application_ref_spec.ts
index e69dc78b38175..9acb34226032e 100644
--- a/packages/core/test/application_ref_spec.ts
+++ b/packages/core/test/application_ref_spec.ts
@@ -8,13 +8,36 @@
 
 import {DOCUMENT, ɵgetDOM as getDOM} from '@angular/common';
 import {ResourceLoader} from '@angular/compiler';
-import {APP_BOOTSTRAP_LISTENER, APP_INITIALIZER, ChangeDetectionStrategy, Compiler, CompilerFactory, Component, EnvironmentInjector, InjectionToken, LOCALE_ID, NgModule, NgZone, PlatformRef, provideZoneChangeDetection, RendererFactory2, TemplateRef, Type, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  APP_BOOTSTRAP_LISTENER,
+  APP_INITIALIZER,
+  ChangeDetectionStrategy,
+  Compiler,
+  CompilerFactory,
+  Component,
+  EnvironmentInjector,
+  InjectionToken,
+  LOCALE_ID,
+  NgModule,
+  NgZone,
+  PlatformRef,
+  provideZoneChangeDetection,
+  RendererFactory2,
+  TemplateRef,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {ErrorHandler} from '@angular/core/src/error_handler';
 import {ComponentRef} from '@angular/core/src/linker/component_factory';
 import {createEnvironmentInjector, getLocaleId} from '@angular/core/src/render3';
 import {BrowserModule} from '@angular/platform-browser';
 import {DomRendererFactory2} from '@angular/platform-browser/src/dom/dom_renderer';
-import {createTemplate, dispatchEvent, getContent} from '@angular/platform-browser/testing/src/browser_util';
+import {
+  createTemplate,
+  dispatchEvent,
+  getContent,
+} from '@angular/platform-browser/testing/src/browser_util';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 import type {ServerModule} from '@angular/platform-server';
 
@@ -23,16 +46,15 @@ import {NoopNgZone} from '../src/zone/ng_zone';
 import {ComponentFixtureNoNgZone, inject, TestBed, waitForAsync, withModule} from '../testing';
 import {take} from 'rxjs/operators';
 
-let serverPlatformModule: Promise<Type<ServerModule>>|null = null;
+let serverPlatformModule: Promise<Type<ServerModule>> | null = null;
 if (isNode) {
   // Only when we are in Node, we load the platform-server module. It will
   // be required later in specs for declaring the platform module.
-  serverPlatformModule = import('@angular/platform-server').then(m => m.ServerModule);
+  serverPlatformModule = import('@angular/platform-server').then((m) => m.ServerModule);
 }
 
 @Component({selector: 'bootstrap-app', template: 'hello'})
-class SomeComponent {
-}
+class SomeComponent {}
 
 describe('bootstrap', () => {
   let mockConsole: MockConsole;
@@ -43,8 +65,9 @@ describe('bootstrap', () => {
 
   function createRootEl(selector = 'bootstrap-app') {
     const doc = TestBed.inject(DOCUMENT);
-    const rootEl =
-        <HTMLElement>getContent(createTemplate(`<${selector}></${selector}>`)).firstChild;
+    const rootEl = <HTMLElement>(
+      getContent(createTemplate(`<${selector}></${selector}>`)).firstChild
+    );
     const oldRoots = doc.querySelectorAll(selector);
     for (let i = 0; i < oldRoots.length; i++) {
       getDOM().remove(oldRoots[i]);
@@ -52,13 +75,18 @@ describe('bootstrap', () => {
     doc.body.appendChild(rootEl);
   }
 
-  type CreateModuleOptions =
-      {providers?: any[], ngDoBootstrap?: any, bootstrap?: any[], component?: Type<any>};
+  type CreateModuleOptions = {
+    providers?: any[];
+    ngDoBootstrap?: any;
+    bootstrap?: any[];
+    component?: Type<any>;
+  };
 
   async function createModule(providers?: any[]): Promise<Type<any>>;
   async function createModule(options: CreateModuleOptions): Promise<Type<any>>;
-  async function createModule(providersOrOptions: any[]|CreateModuleOptions|
-                              undefined): Promise<Type<any>> {
+  async function createModule(
+    providersOrOptions: any[] | CreateModuleOptions | undefined,
+  ): Promise<Type<any>> {
     let options: CreateModuleOptions = {};
     if (Array.isArray(providersOrOptions)) {
       options = {providers: providersOrOptions};
@@ -74,71 +102,68 @@ describe('bootstrap', () => {
       providers: [{provide: ErrorHandler, useValue: errorHandler}, options.providers || []],
       imports: [platformModule],
       declarations: [options.component || SomeComponent],
-      bootstrap: options.bootstrap || []
+      bootstrap: options.bootstrap || [],
     })
-    class MyModule {
-    }
+    class MyModule {}
     if (options.ngDoBootstrap !== false) {
       (<any>MyModule.prototype).ngDoBootstrap = options.ngDoBootstrap || (() => {});
     }
     return MyModule;
   }
 
-  it('should bootstrap a component from a child module',
-     waitForAsync(inject([ApplicationRef, Compiler], (app: ApplicationRef, compiler: Compiler) => {
-       @Component({
-         selector: 'bootstrap-app',
-         template: '',
-       })
-       class SomeComponent {
-       }
-
-       const helloToken = new InjectionToken<string>('hello');
-
-       @NgModule({
-         providers: [{provide: helloToken, useValue: 'component'}],
-         declarations: [SomeComponent],
-       })
-       class SomeModule {
-       }
-
-       createRootEl();
-       const modFactory = compiler.compileModuleSync(SomeModule);
-       const module = modFactory.create(TestBed);
-       const cmpFactory = module.componentFactoryResolver.resolveComponentFactory(SomeComponent);
-       const component = app.bootstrap(cmpFactory);
-
-       // The component should see the child module providers
-       expect(component.injector.get(helloToken)).toEqual('component');
-     })));
-
-  it('should bootstrap a component with a custom selector',
-     waitForAsync(inject([ApplicationRef, Compiler], (app: ApplicationRef, compiler: Compiler) => {
-       @Component({
-         selector: 'bootstrap-app',
-         template: '',
-       })
-       class SomeComponent {
-       }
-
-       const helloToken = new InjectionToken<string>('hello');
-
-       @NgModule({
-         providers: [{provide: helloToken, useValue: 'component'}],
-         declarations: [SomeComponent],
-       })
-       class SomeModule {
-       }
-
-       createRootEl('custom-selector');
-       const modFactory = compiler.compileModuleSync(SomeModule);
-       const module = modFactory.create(TestBed);
-       const cmpFactory = module.componentFactoryResolver.resolveComponentFactory(SomeComponent);
-       const component = app.bootstrap(cmpFactory, 'custom-selector');
-
-       // The component should see the child module providers
-       expect(component.injector.get(helloToken)).toEqual('component');
-     })));
+  it('should bootstrap a component from a child module', waitForAsync(
+    inject([ApplicationRef, Compiler], (app: ApplicationRef, compiler: Compiler) => {
+      @Component({
+        selector: 'bootstrap-app',
+        template: '',
+      })
+      class SomeComponent {}
+
+      const helloToken = new InjectionToken<string>('hello');
+
+      @NgModule({
+        providers: [{provide: helloToken, useValue: 'component'}],
+        declarations: [SomeComponent],
+      })
+      class SomeModule {}
+
+      createRootEl();
+      const modFactory = compiler.compileModuleSync(SomeModule);
+      const module = modFactory.create(TestBed);
+      const cmpFactory = module.componentFactoryResolver.resolveComponentFactory(SomeComponent);
+      const component = app.bootstrap(cmpFactory);
+
+      // The component should see the child module providers
+      expect(component.injector.get(helloToken)).toEqual('component');
+    }),
+  ));
+
+  it('should bootstrap a component with a custom selector', waitForAsync(
+    inject([ApplicationRef, Compiler], (app: ApplicationRef, compiler: Compiler) => {
+      @Component({
+        selector: 'bootstrap-app',
+        template: '',
+      })
+      class SomeComponent {}
+
+      const helloToken = new InjectionToken<string>('hello');
+
+      @NgModule({
+        providers: [{provide: helloToken, useValue: 'component'}],
+        declarations: [SomeComponent],
+      })
+      class SomeModule {}
+
+      createRootEl('custom-selector');
+      const modFactory = compiler.compileModuleSync(SomeModule);
+      const module = modFactory.create(TestBed);
+      const cmpFactory = module.componentFactoryResolver.resolveComponentFactory(SomeComponent);
+      const component = app.bootstrap(cmpFactory, 'custom-selector');
+
+      // The component should see the child module providers
+      expect(component.injector.get(helloToken)).toEqual('component');
+    }),
+  ));
 
   describe('ApplicationRef', () => {
     beforeEach(async () => {
@@ -164,13 +189,15 @@ describe('bootstrap', () => {
         }
       }
 
-      const fixture = TestBed.configureTestingModule({declarations: [ReenteringComponent]})
-                          .createComponent(ReenteringComponent);
+      const fixture = TestBed.configureTestingModule({
+        declarations: [ReenteringComponent],
+      }).createComponent(ReenteringComponent);
       const appRef = TestBed.inject(ApplicationRef);
       appRef.attachView(fixture.componentRef.hostView);
       appRef.tick();
-      expect(fixture.componentInstance.reenterErr.message)
-          .toBe('NG0101: ApplicationRef.tick is called recursively');
+      expect(fixture.componentInstance.reenterErr.message).toBe(
+        'NG0101: ApplicationRef.tick is called recursively',
+      );
     });
 
     describe('APP_BOOTSTRAP_LISTENER', () => {
@@ -178,37 +205,45 @@ describe('bootstrap', () => {
       beforeEach(() => {
         capturedCompRefs = [];
         TestBed.configureTestingModule({
-          providers: [{
-            provide: APP_BOOTSTRAP_LISTENER,
-            multi: true,
-            useValue: (compRef: any) => {
-              capturedCompRefs.push(compRef);
-            }
-          }]
+          providers: [
+            {
+              provide: APP_BOOTSTRAP_LISTENER,
+              multi: true,
+              useValue: (compRef: any) => {
+                capturedCompRefs.push(compRef);
+              },
+            },
+          ],
         });
       });
 
-      it('should be called when a component is bootstrapped',
-         inject([ApplicationRef], (ref: ApplicationRef) => {
-           createRootEl();
-           const compRef = ref.bootstrap(SomeComponent);
-           expect(capturedCompRefs).toEqual([compRef]);
-         }));
+      it('should be called when a component is bootstrapped', inject(
+        [ApplicationRef],
+        (ref: ApplicationRef) => {
+          createRootEl();
+          const compRef = ref.bootstrap(SomeComponent);
+          expect(capturedCompRefs).toEqual([compRef]);
+        },
+      ));
     });
 
     describe('bootstrap', () => {
-      it('should throw if an APP_INITIIALIZER is not yet resolved',
-         withModule(
-             {
-               providers:
-                   [{provide: APP_INITIALIZER, useValue: () => new Promise(() => {}), multi: true}]
-             },
-             inject([ApplicationRef], (ref: ApplicationRef) => {
-               createRootEl();
-               expect(() => ref.bootstrap(SomeComponent))
-                   .toThrowError(
-                       'NG0405: Cannot bootstrap as there are still asynchronous initializers running. Bootstrap components in the `ngDoBootstrap` method of the root module.');
-             })));
+      it(
+        'should throw if an APP_INITIIALIZER is not yet resolved',
+        withModule(
+          {
+            providers: [
+              {provide: APP_INITIALIZER, useValue: () => new Promise(() => {}), multi: true},
+            ],
+          },
+          inject([ApplicationRef], (ref: ApplicationRef) => {
+            createRootEl();
+            expect(() => ref.bootstrap(SomeComponent)).toThrowError(
+              'NG0405: Cannot bootstrap as there are still asynchronous initializers running. Bootstrap components in the `ngDoBootstrap` method of the root module.',
+            );
+          }),
+        ),
+      );
     });
   });
 
@@ -236,126 +271,159 @@ describe('bootstrap', () => {
       return injector.get(ApplicationRef);
     }
 
-    it('should cleanup the DOM',
-       withModule(
-           {providers},
-           waitForAsync(inject(
-               [EnvironmentInjector, DOCUMENT],
-               (parentInjector: EnvironmentInjector, doc: Document) => {
-                 createRootEl();
-
-                 const appRef = createApplicationRef(parentInjector);
-                 appRef.bootstrap(SomeComponent);
-
-                 // The component template content (`hello`) is present in the document body.
-                 expect(doc.body.textContent!.indexOf('hello') > -1).toBeTrue();
-
-                 appRef.destroy();
-
-                 // The component template content (`hello`) is *not* present in the document
-                 // body, i.e. the DOM has been cleaned up.
-                 expect(doc.body.textContent!.indexOf('hello') === -1).toBeTrue();
-               }))));
-
-    it('should throw when trying to call `destroy` method on already destroyed ApplicationRef',
-       withModule(
-           {providers},
-           waitForAsync(inject([EnvironmentInjector], (parentInjector: EnvironmentInjector) => {
-             createRootEl();
-             const appRef = createApplicationRef(parentInjector);
-             appRef.bootstrap(SomeComponent);
-             appRef.destroy();
-
-             expect(() => appRef.destroy())
-                 .toThrowError(
-                     'NG0406: This instance of the `ApplicationRef` has already been destroyed.');
-           }))));
-
-    it('should invoke all registered `onDestroy` callbacks (internal API)',
-       withModule(
-           {providers},
-           waitForAsync(inject([EnvironmentInjector], (parentInjector: EnvironmentInjector) => {
-             const onDestroyA = jasmine.createSpy('onDestroyA');
-             const onDestroyB = jasmine.createSpy('onDestroyB');
-             createRootEl();
-
-             const appRef = createApplicationRef(parentInjector) as unknown as ApplicationRef &
-                 {onDestroy: Function};
-             appRef.bootstrap(SomeComponent);
-             appRef.onDestroy(onDestroyA);
-             appRef.onDestroy(onDestroyB);
-             appRef.destroy();
-
-             expect(onDestroyA).toHaveBeenCalledTimes(1);
-             expect(onDestroyB).toHaveBeenCalledTimes(1);
-           }))));
-
-    it('should allow to unsubscribe a registered `onDestroy` callback (internal API)',
-       withModule(
-           {providers},
-           waitForAsync(inject([EnvironmentInjector], (parentInjector: EnvironmentInjector) => {
-             createRootEl();
-
-             const appRef = createApplicationRef(parentInjector) as unknown as ApplicationRef &
-                 {onDestroy: Function};
-             appRef.bootstrap(SomeComponent);
-
-             const onDestroyA = jasmine.createSpy('onDestroyA');
-             const onDestroyB = jasmine.createSpy('onDestroyB');
-             const unsubscribeOnDestroyA = appRef.onDestroy(onDestroyA);
-             const unsubscribeOnDestroyB = appRef.onDestroy(onDestroyB);
-
-             // Unsubscribe registered listeners.
-             unsubscribeOnDestroyA();
-             unsubscribeOnDestroyB();
-
-             appRef.destroy();
-
-             expect(onDestroyA).not.toHaveBeenCalled();
-             expect(onDestroyB).not.toHaveBeenCalled();
-           }))));
-
-    it('should correctly update the `destroyed` flag',
-       withModule(
-           {providers},
-           waitForAsync(inject([EnvironmentInjector], (parentInjector: EnvironmentInjector) => {
-             createRootEl();
-
-             const appRef = createApplicationRef(parentInjector);
-             appRef.bootstrap(SomeComponent);
-
-             expect(appRef.destroyed).toBeFalse();
-
-             appRef.destroy();
-
-             expect(appRef.destroyed).toBeTrue();
-           }))));
-
-    it('should also destroy underlying injector',
-       withModule(
-           {providers},
-           waitForAsync(inject([EnvironmentInjector], (parentInjector: EnvironmentInjector) => {
-             // This is a temporary type to represent an instance of an R3Injector, which
-             // can be destroyed.
-             // The type will be replaced with a different one once destroyable injector
-             // type is available.
-             type DestroyableInjector = EnvironmentInjector&{destroyed?: boolean};
-
-             createRootEl();
-
-             const injector = createApplicationRefInjector(parentInjector) as DestroyableInjector;
-
-             const appRef = injector.get(ApplicationRef);
-             appRef.bootstrap(SomeComponent);
-
-             expect(appRef.destroyed).toBeFalse();
-             expect(injector.destroyed).toBeFalse();
-
-             appRef.destroy();
-
-             expect(appRef.destroyed).toBeTrue();
-             expect(injector.destroyed).toBeTrue();
-           }))));
+    it(
+      'should cleanup the DOM',
+      withModule(
+        {providers},
+        waitForAsync(
+          inject(
+            [EnvironmentInjector, DOCUMENT],
+            (parentInjector: EnvironmentInjector, doc: Document) => {
+              createRootEl();
+
+              const appRef = createApplicationRef(parentInjector);
+              appRef.bootstrap(SomeComponent);
+
+              // The component template content (`hello`) is present in the document body.
+              expect(doc.body.textContent!.indexOf('hello') > -1).toBeTrue();
+
+              appRef.destroy();
+
+              // The component template content (`hello`) is *not* present in the document
+              // body, i.e. the DOM has been cleaned up.
+              expect(doc.body.textContent!.indexOf('hello') === -1).toBeTrue();
+            },
+          ),
+        ),
+      ),
+    );
+
+    it(
+      'should throw when trying to call `destroy` method on already destroyed ApplicationRef',
+      withModule(
+        {providers},
+        waitForAsync(
+          inject([EnvironmentInjector], (parentInjector: EnvironmentInjector) => {
+            createRootEl();
+            const appRef = createApplicationRef(parentInjector);
+            appRef.bootstrap(SomeComponent);
+            appRef.destroy();
+
+            expect(() => appRef.destroy()).toThrowError(
+              'NG0406: This instance of the `ApplicationRef` has already been destroyed.',
+            );
+          }),
+        ),
+      ),
+    );
+
+    it(
+      'should invoke all registered `onDestroy` callbacks (internal API)',
+      withModule(
+        {providers},
+        waitForAsync(
+          inject([EnvironmentInjector], (parentInjector: EnvironmentInjector) => {
+            const onDestroyA = jasmine.createSpy('onDestroyA');
+            const onDestroyB = jasmine.createSpy('onDestroyB');
+            createRootEl();
+
+            const appRef = createApplicationRef(parentInjector) as unknown as ApplicationRef & {
+              onDestroy: Function;
+            };
+            appRef.bootstrap(SomeComponent);
+            appRef.onDestroy(onDestroyA);
+            appRef.onDestroy(onDestroyB);
+            appRef.destroy();
+
+            expect(onDestroyA).toHaveBeenCalledTimes(1);
+            expect(onDestroyB).toHaveBeenCalledTimes(1);
+          }),
+        ),
+      ),
+    );
+
+    it(
+      'should allow to unsubscribe a registered `onDestroy` callback (internal API)',
+      withModule(
+        {providers},
+        waitForAsync(
+          inject([EnvironmentInjector], (parentInjector: EnvironmentInjector) => {
+            createRootEl();
+
+            const appRef = createApplicationRef(parentInjector) as unknown as ApplicationRef & {
+              onDestroy: Function;
+            };
+            appRef.bootstrap(SomeComponent);
+
+            const onDestroyA = jasmine.createSpy('onDestroyA');
+            const onDestroyB = jasmine.createSpy('onDestroyB');
+            const unsubscribeOnDestroyA = appRef.onDestroy(onDestroyA);
+            const unsubscribeOnDestroyB = appRef.onDestroy(onDestroyB);
+
+            // Unsubscribe registered listeners.
+            unsubscribeOnDestroyA();
+            unsubscribeOnDestroyB();
+
+            appRef.destroy();
+
+            expect(onDestroyA).not.toHaveBeenCalled();
+            expect(onDestroyB).not.toHaveBeenCalled();
+          }),
+        ),
+      ),
+    );
+
+    it(
+      'should correctly update the `destroyed` flag',
+      withModule(
+        {providers},
+        waitForAsync(
+          inject([EnvironmentInjector], (parentInjector: EnvironmentInjector) => {
+            createRootEl();
+
+            const appRef = createApplicationRef(parentInjector);
+            appRef.bootstrap(SomeComponent);
+
+            expect(appRef.destroyed).toBeFalse();
+
+            appRef.destroy();
+
+            expect(appRef.destroyed).toBeTrue();
+          }),
+        ),
+      ),
+    );
+
+    it(
+      'should also destroy underlying injector',
+      withModule(
+        {providers},
+        waitForAsync(
+          inject([EnvironmentInjector], (parentInjector: EnvironmentInjector) => {
+            // This is a temporary type to represent an instance of an R3Injector, which
+            // can be destroyed.
+            // The type will be replaced with a different one once destroyable injector
+            // type is available.
+            type DestroyableInjector = EnvironmentInjector & {destroyed?: boolean};
+
+            createRootEl();
+
+            const injector = createApplicationRefInjector(parentInjector) as DestroyableInjector;
+
+            const appRef = injector.get(ApplicationRef);
+            appRef.bootstrap(SomeComponent);
+
+            expect(appRef.destroyed).toBeFalse();
+            expect(injector.destroyed).toBeFalse();
+
+            appRef.destroy();
+
+            expect(appRef.destroyed).toBeTrue();
+            expect(injector.destroyed).toBeTrue();
+          }),
+        ),
+      ),
+    );
   });
 
   describe('bootstrapModule', () => {
@@ -366,124 +434,138 @@ describe('bootstrap', () => {
     }));
 
     it('should wait for asynchronous app initializers', waitForAsync(async () => {
-         let resolve: (result: any) => void;
-         const promise: Promise<any> = new Promise((res) => {
-           resolve = res;
-         });
-         let initializerDone = false;
-         setTimeout(() => {
-           resolve(true);
-           initializerDone = true;
-         }, 1);
-
-         defaultPlatform
-             .bootstrapModule(await createModule(
-                 [{provide: APP_INITIALIZER, useValue: () => promise, multi: true}]))
-             .then(_ => {
-               expect(initializerDone).toBe(true);
-             });
-       }));
-
-    it('should rethrow sync errors even if the exceptionHandler is not rethrowing',
-       waitForAsync(async () => {
-         defaultPlatform
-             .bootstrapModule(await createModule([{
-               provide: APP_INITIALIZER,
-               useValue: () => {
-                 throw 'Test';
-               },
-               multi: true
-             }]))
-             .then(() => expect(false).toBe(true), (e) => {
-               expect(e).toBe('Test');
-               // Error rethrown will be seen by the exception handler since it's after
-               // construction.
-               expect(mockConsole.res[0].join('#')).toEqual('ERROR#Test');
-             });
-       }));
-
-    it('should rethrow promise errors even if the exceptionHandler is not rethrowing',
-       waitForAsync(async () => {
-         defaultPlatform
-             .bootstrapModule(await createModule(
-                 [{provide: APP_INITIALIZER, useValue: () => Promise.reject('Test'), multi: true}]))
-             .then(() => expect(false).toBe(true), (e) => {
-               expect(e).toBe('Test');
-               expect(mockConsole.res[0].join('#')).toEqual('ERROR#Test');
-             });
-       }));
+      let resolve: (result: any) => void;
+      const promise: Promise<any> = new Promise((res) => {
+        resolve = res;
+      });
+      let initializerDone = false;
+      setTimeout(() => {
+        resolve(true);
+        initializerDone = true;
+      }, 1);
+
+      defaultPlatform
+        .bootstrapModule(
+          await createModule([{provide: APP_INITIALIZER, useValue: () => promise, multi: true}]),
+        )
+        .then((_) => {
+          expect(initializerDone).toBe(true);
+        });
+    }));
+
+    it('should rethrow sync errors even if the exceptionHandler is not rethrowing', waitForAsync(async () => {
+      defaultPlatform
+        .bootstrapModule(
+          await createModule([
+            {
+              provide: APP_INITIALIZER,
+              useValue: () => {
+                throw 'Test';
+              },
+              multi: true,
+            },
+          ]),
+        )
+        .then(
+          () => expect(false).toBe(true),
+          (e) => {
+            expect(e).toBe('Test');
+            // Error rethrown will be seen by the exception handler since it's after
+            // construction.
+            expect(mockConsole.res[0].join('#')).toEqual('ERROR#Test');
+          },
+        );
+    }));
+
+    it('should rethrow promise errors even if the exceptionHandler is not rethrowing', waitForAsync(async () => {
+      defaultPlatform
+        .bootstrapModule(
+          await createModule([
+            {provide: APP_INITIALIZER, useValue: () => Promise.reject('Test'), multi: true},
+          ]),
+        )
+        .then(
+          () => expect(false).toBe(true),
+          (e) => {
+            expect(e).toBe('Test');
+            expect(mockConsole.res[0].join('#')).toEqual('ERROR#Test');
+          },
+        );
+    }));
 
     it('should throw useful error when ApplicationRef is not configured', waitForAsync(() => {
-         @NgModule()
-         class EmptyModule {
-         }
-
-         return defaultPlatform.bootstrapModule(EmptyModule)
-             .then(() => fail('expecting error'), (error) => {
-               expect(error.message).toMatch(/NG0402/);
-             });
-       }));
-
-    it('should call the `ngDoBootstrap` method with `ApplicationRef` on the main module',
-       waitForAsync(async () => {
-         const ngDoBootstrap = jasmine.createSpy('ngDoBootstrap');
-         defaultPlatform.bootstrapModule(await createModule({ngDoBootstrap: ngDoBootstrap}))
-             .then((moduleRef) => {
-               const appRef = moduleRef.injector.get(ApplicationRef);
-               expect(ngDoBootstrap).toHaveBeenCalledWith(appRef);
-             });
-       }));
+      @NgModule()
+      class EmptyModule {}
+
+      return defaultPlatform.bootstrapModule(EmptyModule).then(
+        () => fail('expecting error'),
+        (error) => {
+          expect(error.message).toMatch(/NG0402/);
+        },
+      );
+    }));
+
+    it('should call the `ngDoBootstrap` method with `ApplicationRef` on the main module', waitForAsync(async () => {
+      const ngDoBootstrap = jasmine.createSpy('ngDoBootstrap');
+      defaultPlatform
+        .bootstrapModule(await createModule({ngDoBootstrap: ngDoBootstrap}))
+        .then((moduleRef) => {
+          const appRef = moduleRef.injector.get(ApplicationRef);
+          expect(ngDoBootstrap).toHaveBeenCalledWith(appRef);
+        });
+    }));
 
     it('should auto bootstrap components listed in @NgModule.bootstrap', waitForAsync(async () => {
-         defaultPlatform.bootstrapModule(await createModule({bootstrap: [SomeComponent]}))
-             .then((moduleRef) => {
-               const appRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
-               expect(appRef.componentTypes).toEqual([SomeComponent]);
-             });
-       }));
-
-    it('should error if neither `ngDoBootstrap` nor @NgModule.bootstrap was specified',
-       waitForAsync(async () => {
-         defaultPlatform.bootstrapModule(await createModule({ngDoBootstrap: false}))
-             .then(() => expect(false).toBe(true), (e) => {
-               const expectedErrMsg = `NG0403: The module MyModule was bootstrapped, ` +
-                   `but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. ` +
-                   `Please define one of these. ` +
-                   `Find more at https://angular.io/errors/NG0403`;
-               expect(e.message).toEqual(expectedErrMsg);
-               expect(mockConsole.res[0].join('#')).toEqual('ERROR#Error: ' + expectedErrMsg);
-             });
-       }));
+      defaultPlatform
+        .bootstrapModule(await createModule({bootstrap: [SomeComponent]}))
+        .then((moduleRef) => {
+          const appRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
+          expect(appRef.componentTypes).toEqual([SomeComponent]);
+        });
+    }));
+
+    it('should error if neither `ngDoBootstrap` nor @NgModule.bootstrap was specified', waitForAsync(async () => {
+      defaultPlatform.bootstrapModule(await createModule({ngDoBootstrap: false})).then(
+        () => expect(false).toBe(true),
+        (e) => {
+          const expectedErrMsg =
+            `NG0403: The module MyModule was bootstrapped, ` +
+            `but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. ` +
+            `Please define one of these. ` +
+            `Find more at https://angular.io/errors/NG0403`;
+          expect(e.message).toEqual(expectedErrMsg);
+          expect(mockConsole.res[0].join('#')).toEqual('ERROR#Error: ' + expectedErrMsg);
+        },
+      );
+    }));
 
     it('should add bootstrapped module into platform modules list', waitForAsync(async () => {
-         defaultPlatform.bootstrapModule(await createModule({bootstrap: [SomeComponent]}))
-             .then(module => expect((<any>defaultPlatform)._modules).toContain(module));
-       }));
+      defaultPlatform
+        .bootstrapModule(await createModule({bootstrap: [SomeComponent]}))
+        .then((module) => expect((<any>defaultPlatform)._modules).toContain(module));
+    }));
 
     it('should bootstrap with NoopNgZone', waitForAsync(async () => {
-         defaultPlatform
-             .bootstrapModule(await createModule({bootstrap: [SomeComponent]}), {ngZone: 'noop'})
-             .then((module) => {
-               const ngZone = module.injector.get(NgZone);
-               expect(ngZone instanceof NoopNgZone).toBe(true);
-             });
-       }));
+      defaultPlatform
+        .bootstrapModule(await createModule({bootstrap: [SomeComponent]}), {ngZone: 'noop'})
+        .then((module) => {
+          const ngZone = module.injector.get(NgZone);
+          expect(ngZone instanceof NoopNgZone).toBe(true);
+        });
+    }));
 
     it('should resolve component resources when creating module factory', async () => {
       @Component({
         selector: 'with-templates-app',
         templateUrl: '/test-template.html',
       })
-      class WithTemplateUrlComponent {
-      }
+      class WithTemplateUrlComponent {}
 
       const loadResourceSpy = jasmine.createSpy('load resource').and.returnValue('fakeContent');
       const testModule = await createModule({component: WithTemplateUrlComponent});
 
       await defaultPlatform.bootstrapModule(testModule, {
-        providers: [
-          {provide: ResourceLoader, useValue: {get: loadResourceSpy}},
-        ]
+        providers: [{provide: ResourceLoader, useValue: {get: loadResourceSpy}}],
       });
 
       expect(loadResourceSpy).toHaveBeenCalledTimes(1);
@@ -495,11 +577,12 @@ describe('bootstrap', () => {
         selector: 'i18n-app',
         templateUrl: '',
       })
-      class I18nComponent {
-      }
+      class I18nComponent {}
 
-      const testModule = await createModule(
-          {component: I18nComponent, providers: [{provide: LOCALE_ID, useValue: 'ro'}]});
+      const testModule = await createModule({
+        component: I18nComponent,
+        providers: [{provide: LOCALE_ID, useValue: 'ro'}],
+      });
       await defaultPlatform.bootstrapModule(testModule);
 
       expect(getLocaleId()).toEqual('ro');
@@ -510,9 +593,9 @@ describe('bootstrap', () => {
 
       const testModule = await createModule({
         providers: [
-          {provide: APP_INITIALIZER, useValue: () => locale = 'fr-FR', multi: true},
-          {provide: LOCALE_ID, useFactory: () => locale}
-        ]
+          {provide: APP_INITIALIZER, useValue: () => (locale = 'fr-FR'), multi: true},
+          {provide: LOCALE_ID, useFactory: () => locale},
+        ],
       });
       const app = await defaultPlatform.bootstrapModule(testModule);
       expect(app.injector.get(LOCALE_ID)).toEqual('fr-FR');
@@ -526,58 +609,63 @@ describe('bootstrap', () => {
       defaultPlatform = _platform;
     }));
     it('should wait for asynchronous app initializers', waitForAsync(async () => {
-         let resolve: (result: any) => void;
-         const promise: Promise<any> = new Promise((res) => {
-           resolve = res;
-         });
-         let initializerDone = false;
-         setTimeout(() => {
-           resolve(true);
-           initializerDone = true;
-         }, 1);
-
-         const compilerFactory: CompilerFactory =
-             defaultPlatform.injector.get(CompilerFactory, null)!;
-         const moduleFactory =
-             compilerFactory.createCompiler().compileModuleSync(await createModule(
-                 [{provide: APP_INITIALIZER, useValue: () => promise, multi: true}]));
-         defaultPlatform.bootstrapModuleFactory(moduleFactory).then(_ => {
-           expect(initializerDone).toBe(true);
-         });
-       }));
-
-    it('should rethrow sync errors even if the exceptionHandler is not rethrowing',
-       waitForAsync(async () => {
-         const compilerFactory: CompilerFactory =
-             defaultPlatform.injector.get(CompilerFactory, null)!;
-         const moduleFactory =
-             compilerFactory.createCompiler().compileModuleSync(await createModule([{
-               provide: APP_INITIALIZER,
-               useValue: () => {
-                 throw 'Test';
-               },
-               multi: true
-             }]));
-         expect(() => defaultPlatform.bootstrapModuleFactory(moduleFactory)).toThrow('Test');
-         // Error rethrown will be seen by the exception handler since it's after
-         // construction.
-         expect(mockConsole.res[0].join('#')).toEqual('ERROR#Test');
-       }));
-
-    it('should rethrow promise errors even if the exceptionHandler is not rethrowing',
-       waitForAsync(async () => {
-         const compilerFactory: CompilerFactory =
-             defaultPlatform.injector.get(CompilerFactory, null)!;
-         const moduleFactory =
-             compilerFactory.createCompiler().compileModuleSync(await createModule([
-               {provide: APP_INITIALIZER, useValue: () => Promise.reject('Test'), multi: true}
-             ]));
-         defaultPlatform.bootstrapModuleFactory(moduleFactory)
-             .then(() => expect(false).toBe(true), (e) => {
-               expect(e).toBe('Test');
-               expect(mockConsole.res[0].join('#')).toEqual('ERROR#Test');
-             });
-       }));
+      let resolve: (result: any) => void;
+      const promise: Promise<any> = new Promise((res) => {
+        resolve = res;
+      });
+      let initializerDone = false;
+      setTimeout(() => {
+        resolve(true);
+        initializerDone = true;
+      }, 1);
+
+      const compilerFactory: CompilerFactory = defaultPlatform.injector.get(CompilerFactory, null)!;
+      const moduleFactory = compilerFactory
+        .createCompiler()
+        .compileModuleSync(
+          await createModule([{provide: APP_INITIALIZER, useValue: () => promise, multi: true}]),
+        );
+      defaultPlatform.bootstrapModuleFactory(moduleFactory).then((_) => {
+        expect(initializerDone).toBe(true);
+      });
+    }));
+
+    it('should rethrow sync errors even if the exceptionHandler is not rethrowing', waitForAsync(async () => {
+      const compilerFactory: CompilerFactory = defaultPlatform.injector.get(CompilerFactory, null)!;
+      const moduleFactory = compilerFactory.createCompiler().compileModuleSync(
+        await createModule([
+          {
+            provide: APP_INITIALIZER,
+            useValue: () => {
+              throw 'Test';
+            },
+            multi: true,
+          },
+        ]),
+      );
+      expect(() => defaultPlatform.bootstrapModuleFactory(moduleFactory)).toThrow('Test');
+      // Error rethrown will be seen by the exception handler since it's after
+      // construction.
+      expect(mockConsole.res[0].join('#')).toEqual('ERROR#Test');
+    }));
+
+    it('should rethrow promise errors even if the exceptionHandler is not rethrowing', waitForAsync(async () => {
+      const compilerFactory: CompilerFactory = defaultPlatform.injector.get(CompilerFactory, null)!;
+      const moduleFactory = compilerFactory
+        .createCompiler()
+        .compileModuleSync(
+          await createModule([
+            {provide: APP_INITIALIZER, useValue: () => Promise.reject('Test'), multi: true},
+          ]),
+        );
+      defaultPlatform.bootstrapModuleFactory(moduleFactory).then(
+        () => expect(false).toBe(true),
+        (e) => {
+          expect(e).toBe('Test');
+          expect(mockConsole.res[0].join('#')).toEqual('ERROR#Test');
+        },
+      );
+    }));
   });
 
   describe('attachView / detachView', () => {
@@ -599,7 +687,7 @@ describe('bootstrap', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
         declarations: [MyComp, ContainerComp, EmbeddedViewComp],
-        providers: [{provide: ComponentFixtureNoNgZone, useValue: true}]
+        providers: [{provide: ComponentFixtureNoNgZone, useValue: true}],
       });
     });
 
@@ -637,7 +725,7 @@ describe('bootstrap', () => {
         template: '',
         host: {'[class]': 'clazz'},
         standalone: true,
-        changeDetection: ChangeDetectionStrategy.OnPush
+        changeDetection: ChangeDetectionStrategy.OnPush,
       })
       class HostBindingComp {
         clazz = 'initial';
@@ -680,7 +768,6 @@ describe('bootstrap', () => {
       expect(appRef.viewCount).toBe(0);
     });
 
-
     it('should not allow to attach a view to both, a view container and the ApplicationRef', () => {
       const comp = TestBed.createComponent(MyComp);
       let hostView = comp.componentRef.hostView;
@@ -690,13 +777,15 @@ describe('bootstrap', () => {
       const appRef: ApplicationRef = TestBed.inject(ApplicationRef);
 
       vc.insert(hostView);
-      expect(() => appRef.attachView(hostView))
-          .toThrowError('NG0902: This view is already attached to a ViewContainer!');
+      expect(() => appRef.attachView(hostView)).toThrowError(
+        'NG0902: This view is already attached to a ViewContainer!',
+      );
       hostView = vc.detach(0)!;
 
       appRef.attachView(hostView);
-      expect(() => vc.insert(hostView))
-          .toThrowError('NG0902: This view is already attached directly to the ApplicationRef!');
+      expect(() => vc.insert(hostView)).toThrowError(
+        'NG0902: This view is already attached directly to the ApplicationRef!',
+      );
     });
   });
 });
@@ -773,7 +862,12 @@ describe('AppRef', () => {
     TestBed.configureTestingModule({
       providers: [provideZoneChangeDetection({ignoreChangesOutsideZone: true})],
       declarations: [
-        SyncComp, MicroTaskComp, MacroTaskComp, MicroMacroTaskComp, MacroMicroTaskComp, ClickComp
+        SyncComp,
+        MicroTaskComp,
+        MacroTaskComp,
+        MicroMacroTaskComp,
+        MacroMicroTaskComp,
+        ClickComp,
       ],
     });
   });
@@ -797,31 +891,29 @@ describe('AppRef', () => {
           expect(fixture.nativeElement).toHaveText(expected[i++]);
           stableCalled = true;
         }
-      }
+      },
     });
   }
 
   it('isStable should fire on synchronous component loading', waitForAsync(() => {
-       expectStableTexts(SyncComp, ['1']);
-     }));
+    expectStableTexts(SyncComp, ['1']);
+  }));
 
   it('isStable should fire after a microtask on init is completed', waitForAsync(() => {
-       expectStableTexts(MicroTaskComp, ['11']);
-     }));
+    expectStableTexts(MicroTaskComp, ['11']);
+  }));
 
   it('isStable should fire after a macrotask on init is completed', waitForAsync(() => {
-       expectStableTexts(MacroTaskComp, ['11']);
-     }));
+    expectStableTexts(MacroTaskComp, ['11']);
+  }));
 
-  it('isStable should fire only after chain of micro and macrotasks on init are completed',
-     waitForAsync(() => {
-       expectStableTexts(MicroMacroTaskComp, ['111']);
-     }));
+  it('isStable should fire only after chain of micro and macrotasks on init are completed', waitForAsync(() => {
+    expectStableTexts(MicroMacroTaskComp, ['111']);
+  }));
 
-  it('isStable should fire only after chain of macro and microtasks on init are completed',
-     waitForAsync(() => {
-       expectStableTexts(MacroMicroTaskComp, ['111']);
-     }));
+  it('isStable should fire only after chain of macro and microtasks on init are completed', waitForAsync(() => {
+    expectStableTexts(MacroMicroTaskComp, ['111']);
+  }));
 
   it('isStable can be subscribed to many times', async () => {
     const appRef: ApplicationRef = TestBed.inject(ApplicationRef);
@@ -847,23 +939,23 @@ describe('AppRef', () => {
           if (!stable) {
             unstableCalled = true;
           }
-        }
+        },
       });
     }
 
     it('should be fired after app becomes unstable', waitForAsync(() => {
-         const fixture = TestBed.createComponent(ClickComp);
-         const appRef: ApplicationRef = TestBed.inject(ApplicationRef);
-         const zone: NgZone = TestBed.inject(NgZone);
-         appRef.attachView(fixture.componentRef.hostView);
-         zone.run(() => appRef.tick());
-
-         fixture.whenStable().then(() => {
-           expectUnstable(appRef);
-           const element = fixture.debugElement.children[0];
-           dispatchEvent(element.nativeElement, 'click');
-         });
-       }));
+      const fixture = TestBed.createComponent(ClickComp);
+      const appRef: ApplicationRef = TestBed.inject(ApplicationRef);
+      const zone: NgZone = TestBed.inject(NgZone);
+      appRef.attachView(fixture.componentRef.hostView);
+      zone.run(() => appRef.tick());
+
+      fixture.whenStable().then(() => {
+        expectUnstable(appRef);
+        const element = fixture.debugElement.children[0];
+        dispatchEvent(element.nativeElement, 'click');
+      });
+    }));
   });
 });
 
diff --git a/packages/core/test/authoring/model_input_spec.ts b/packages/core/test/authoring/model_input_spec.ts
index 7277a1b4541cf..cec4a95f57545 100644
--- a/packages/core/test/authoring/model_input_spec.ts
+++ b/packages/core/test/authoring/model_input_spec.ts
@@ -28,10 +28,10 @@ describe('model signal', () => {
   it('should allow updates based on the previous value', () => {
     const signal = TestBed.runInInjectionContext(() => model(2));
 
-    signal.update(value => value * 3);
+    signal.update((value) => value * 3);
     expect(signal()).toBe(6);
 
-    signal.update(value => value * 3);
+    signal.update((value) => value * 3);
     expect(signal()).toBe(18);
   });
 
@@ -49,12 +49,12 @@ describe('model signal', () => {
     const signal = TestBed.runInInjectionContext(() => model(1));
     const values: number[] = [];
 
-    signal.subscribe(value => values.push(value));
+    signal.subscribe((value) => values.push(value));
 
     signal.set(2);
     expect(values).toEqual([2]);
 
-    signal.update(previous => previous * 2);
+    signal.update((previous) => previous * 2);
     expect(values).toEqual([2, 4]);
 
     signal.set(5);
@@ -65,18 +65,19 @@ describe('model signal', () => {
     const signal = TestBed.runInInjectionContext(() => model(1));
     const values: number[] = [];
 
-    signal.subscribe(value => values.push(value));
+    signal.subscribe((value) => values.push(value));
 
     TestBed.resetTestingModule();
 
-    expect(() => signal.subscribe(() => {}))
-        .toThrowError(/Unexpected subscription to destroyed `OutputRef`/);
+    expect(() => signal.subscribe(() => {})).toThrowError(
+      /Unexpected subscription to destroyed `OutputRef`/,
+    );
   });
 
   it('should stop emitting after unsubscribing', () => {
     const signal = TestBed.runInInjectionContext(() => model(0));
     const values: number[] = [];
-    const subscription = signal.subscribe(value => values.push(value));
+    const subscription = signal.subscribe((value) => values.push(value));
 
     signal.set(1);
     expect(values).toEqual([1]);
@@ -89,16 +90,16 @@ describe('model signal', () => {
   it('should not emit if the value does not change', () => {
     const signal = TestBed.runInInjectionContext(() => model(0));
     const values: number[] = [];
-    signal.subscribe(value => values.push(value));
+    signal.subscribe((value) => values.push(value));
 
     signal.set(1);
     expect(values).toEqual([1]);
     signal.set(1);
     expect(values).toEqual([1]);
 
-    signal.update(previous => previous * 2);
+    signal.update((previous) => previous * 2);
     expect(values).toEqual([1, 2]);
-    signal.update(previous => previous * 1);
+    signal.update((previous) => previous * 1);
     expect(values).toEqual([1, 2]);
   });
 
diff --git a/packages/core/test/authoring/signal_input_signature_test.ts b/packages/core/test/authoring/signal_input_signature_test.ts
index 6316b56e5a5cc..e2f7d1a3c97dc 100644
--- a/packages/core/test/authoring/signal_input_signature_test.ts
+++ b/packages/core/test/authoring/signal_input_signature_test.ts
@@ -36,28 +36,34 @@ export class InputSignatureTest {
   __explicitWriteTWithoutTransformForbidden = input<string, string>('bla__');
 
   /** number, string | number */
-  noInitialValueWithTransform = input.required({transform: (_v: number|string) => 0});
+  noInitialValueWithTransform = input.required({transform: (_v: number | string) => 0});
 
   /** number, string | number  */
-  initialValueWithTransform = input(0, {transform: (_v: number|string) => 0});
+  initialValueWithTransform = input(0, {transform: (_v: number | string) => 0});
 
   /** boolean | undefined, string | boolean  */
-  undefinedInitialValueWithTransform = input(undefined, {transform: (_v: boolean|string) => true});
+  undefinedInitialValueWithTransform = input(undefined, {
+    transform: (_v: boolean | string) => true,
+  });
 
   /** {works: boolean;}, string | boolean  */
-  complexTransformWithInitialValue = input({works: true}, {
-    transform: (_v: boolean|string) => ({works: !!_v}),
-  });
+  complexTransformWithInitialValue = input(
+    {works: true},
+    {
+      transform: (_v: boolean | string) => ({works: !!_v}),
+    },
+  );
 
   /** RegExp */
   nonPrimitiveInitialValue = input(/default regex/);
 
   /** string, string | null */
-  requiredExplicitReadAndWriteButNoTransform =
-      input.required<string, string|null>({transform: _v => ''});
+  requiredExplicitReadAndWriteButNoTransform = input.required<string, string | null>({
+    transform: (_v) => '',
+  });
 
   /** string, string | null */
-  withInitialValueExplicitReadAndWrite = input<string, string|null>('', {transform: bla => ''});
+  withInitialValueExplicitReadAndWrite = input<string, string | null>('', {transform: (bla) => ''});
 
   /** string | undefined */
   withNoInitialValue = input<string>();
@@ -65,21 +71,23 @@ export class InputSignatureTest {
   /** string */
   requiredNoInitialValue = input.required<string>();
   /** string | undefined */
-  requiredNoInitialValueExplicitUndefined = input.required<string|undefined>();
+  requiredNoInitialValueExplicitUndefined = input.required<string | undefined>();
 
   /** string, string | boolean */
-  requiredWithTransform =
-      input.required<string, string|boolean>({transform: (v: string|boolean) => ''});
+  requiredWithTransform = input.required<string, string | boolean>({
+    transform: (v: string | boolean) => '',
+  });
 
   /** @internal */
   __requiredWithTransformButNoWriteT = input.required<string>({
     // @ts-expect-error
-    transform: (v: string|boolean) => ''
+    transform: (v: string | boolean) => '',
   });
 
   /** string, string | boolean */
-  requiredWithTransformInferenceNoExplicitGeneric =
-      input.required({transform: (v: string|boolean) => ''});
+  requiredWithTransformInferenceNoExplicitGeneric = input.required({
+    transform: (v: string | boolean) => '',
+  });
 
   // Unknown as `WriteT` is acceptable because the user explicitly opted into handling
   // the transform- so they will need to work with the `unknown` values.
diff --git a/packages/core/test/authoring/signal_model_signature_test.ts b/packages/core/test/authoring/signal_model_signature_test.ts
index dfd427d4f298c..f71b226e9dcf2 100644
--- a/packages/core/test/authoring/signal_model_signature_test.ts
+++ b/packages/core/test/authoring/signal_model_signature_test.ts
@@ -46,7 +46,7 @@ export class SignalModelSignatureTest {
   requiredNoInitialValue = model.required<string>();
 
   /** string | undefined */
-  requiredNoInitialValueExplicitUndefined = model.required<string|undefined>();
+  requiredNoInitialValueExplicitUndefined = model.required<string | undefined>();
 
   /** unknown */
   noInitialValueNoType = model();
diff --git a/packages/core/test/authoring/signal_queries_signature_test.ts b/packages/core/test/authoring/signal_queries_signature_test.ts
index db1153e8ccaf8..cf02b6e0b9175 100644
--- a/packages/core/test/authoring/signal_queries_signature_test.ts
+++ b/packages/core/test/authoring/signal_queries_signature_test.ts
@@ -6,7 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {contentChild, contentChildren, ElementRef, forwardRef, InjectionToken, Signal, viewChild, viewChildren} from '@angular/core';
+import {
+  contentChild,
+  contentChildren,
+  ElementRef,
+  forwardRef,
+  InjectionToken,
+  Signal,
+  viewChild,
+  viewChildren,
+} from '@angular/core';
 
 class QueryType {
   // a random field to brand the type
@@ -21,7 +30,7 @@ class ReadType {
 const QUERY_TYPE_TOKEN = new InjectionToken<QueryType>('QueryTypeToken');
 
 // A const to reference the Signal type import
-const _import: Signal<unknown>|undefined = undefined;
+const _import: Signal<unknown> | undefined = undefined;
 
 export class SignalQuerySignatureTest {
   // optional view child
@@ -34,8 +43,9 @@ export class SignalQuerySignatureTest {
 
   // any due to https://github.com/angular/angular/issues/53894
   /** ElementRef<any> | undefined */
-  viewChildStringLocatorWithElementRefRead =
-      viewChild('ref', {read: ElementRef<HTMLAnchorElement>});
+  viewChildStringLocatorWithElementRefRead = viewChild('ref', {
+    read: ElementRef<HTMLAnchorElement>,
+  });
 
   /** ReadType | undefined */
   viewChildStringLocatorWithRead = viewChild('ref', {read: ReadType});
@@ -54,19 +64,21 @@ export class SignalQuerySignatureTest {
 
   // any due to https://github.com/angular/angular/issues/53894
   /** ElementRef<any> | undefined */
-  viewChildTypeLocatorAndElementRefRead =
-      viewChild(QueryType, {read: ElementRef<HTMLAnchorElement>});
+  viewChildTypeLocatorAndElementRefRead = viewChild(QueryType, {
+    read: ElementRef<HTMLAnchorElement>,
+  });
 
   // required view child
 
   /** ElementRef<HTMLAnchorElement> */
   viewChildStringLocatorNoReadElementRefTypeHintReq =
-      viewChild.required<ElementRef<HTMLAnchorElement>>('ref');
+    viewChild.required<ElementRef<HTMLAnchorElement>>('ref');
 
   // any due to https://github.com/angular/angular/issues/53894
   /** ElementRef<any> */
-  viewChildStringLocatorWithElementRefReadReq =
-      viewChild.required('ref', {read: ElementRef<HTMLAnchorElement>});
+  viewChildStringLocatorWithElementRefReadReq = viewChild.required('ref', {
+    read: ElementRef<HTMLAnchorElement>,
+  });
 
   /** ReadType */
   viewChildStringLocatorWithReadReq = viewChild.required('ref', {read: ReadType});
@@ -79,8 +91,9 @@ export class SignalQuerySignatureTest {
 
   // any due to https://github.com/angular/angular/issues/53894
   /** ElementRef<any> */
-  viewChildTypeLocatorAndElementRefReadReq =
-      viewChild.required(QueryType, {read: ElementRef<HTMLAnchorElement>});
+  viewChildTypeLocatorAndElementRefReadReq = viewChild.required(QueryType, {
+    read: ElementRef<HTMLAnchorElement>,
+  });
 
   // view children
 
@@ -89,15 +102,16 @@ export class SignalQuerySignatureTest {
 
   /** readonly ElementRef<HTMLAnchorElement>[] */
   viewChildrenStringLocatorNoReadElementRefTypeHint =
-      viewChildren<ElementRef<HTMLAnchorElement>>('ref');
+    viewChildren<ElementRef<HTMLAnchorElement>>('ref');
 
   /** readonly ReadType[] */
   viewChildrenStringLocatorWithTypeRead = viewChildren('ref', {read: ReadType});
 
   // any due to https://github.com/angular/angular/issues/53894
   /** readonly ElementRef<any>[] */
-  viewChildrenStringLocatorWithElementRefRead =
-      viewChildren('ref', {read: ElementRef<HTMLAnchorElement>});
+  viewChildrenStringLocatorWithElementRefRead = viewChildren('ref', {
+    read: ElementRef<HTMLAnchorElement>,
+  });
 
   /** readonly QueryType[]*/
   viewChildrenTypeLocatorNoRead = viewChildren(QueryType);
@@ -113,8 +127,9 @@ export class SignalQuerySignatureTest {
 
   // any due to https://github.com/angular/angular/issues/53894
   /** readonly ElementRef<any>[] */
-  viewChildrenTypeLocatorAndElementRefRead =
-      viewChildren(QueryType, {read: ElementRef<HTMLAnchorElement>});
+  viewChildrenTypeLocatorAndElementRefRead = viewChildren(QueryType, {
+    read: ElementRef<HTMLAnchorElement>,
+  });
 
   // optional content child
 
@@ -123,12 +138,13 @@ export class SignalQuerySignatureTest {
 
   /** ElementRef<HTMLAnchorElement> | undefined */
   contentChildStringLocatorNoReadElementRefTypeHint =
-      contentChild<ElementRef<HTMLAnchorElement>>('ref');
+    contentChild<ElementRef<HTMLAnchorElement>>('ref');
 
   // any due to https://github.com/angular/angular/issues/53894
   /** ElementRef<any> | undefined */
-  contentChildStringLocatorWithElementRefRead =
-      contentChild('ref', {read: ElementRef<HTMLAnchorElement>});
+  contentChildStringLocatorWithElementRefRead = contentChild('ref', {
+    read: ElementRef<HTMLAnchorElement>,
+  });
 
   /** ReadType | undefined */
   contentChildStringLocatorWithRead = contentChild('ref', {read: ReadType});
@@ -147,19 +163,21 @@ export class SignalQuerySignatureTest {
 
   // any due to https://github.com/angular/angular/issues/53894
   /** ElementRef<any> | undefined */
-  contentChildTypeLocatorAndElementRefRead =
-      contentChild(QueryType, {read: ElementRef<HTMLAnchorElement>});
+  contentChildTypeLocatorAndElementRefRead = contentChild(QueryType, {
+    read: ElementRef<HTMLAnchorElement>,
+  });
 
   // required content child
 
   /** ElementRef<HTMLAnchorElement> */
   contentChildStringLocatorNoReadElementRefTypeHintReq =
-      contentChild.required<ElementRef<HTMLAnchorElement>>('ref');
+    contentChild.required<ElementRef<HTMLAnchorElement>>('ref');
 
   // any due to https://github.com/angular/angular/issues/53894
   /** ElementRef<any> */
-  contentChildStringLocatorWithElementRefReadReq =
-      contentChild.required('ref', {read: ElementRef<HTMLAnchorElement>});
+  contentChildStringLocatorWithElementRefReadReq = contentChild.required('ref', {
+    read: ElementRef<HTMLAnchorElement>,
+  });
 
   /** ReadType */
   contentChildStringLocatorWithReadReq = contentChild.required('ref', {read: ReadType});
@@ -172,8 +190,9 @@ export class SignalQuerySignatureTest {
 
   // any due to https://github.com/angular/angular/issues/53894
   /** ElementRef<any> */
-  contentChildTypeLocatorAndElementRefReadReq =
-      contentChild.required(QueryType, {read: ElementRef<HTMLAnchorElement>});
+  contentChildTypeLocatorAndElementRefReadReq = contentChild.required(QueryType, {
+    read: ElementRef<HTMLAnchorElement>,
+  });
 
   // view children
 
@@ -182,15 +201,16 @@ export class SignalQuerySignatureTest {
 
   /** readonly ElementRef<HTMLAnchorElement>[] */
   contentChildrenStringLocatorNoReadElementRefTypeHint =
-      contentChildren<ElementRef<HTMLAnchorElement>>('ref');
+    contentChildren<ElementRef<HTMLAnchorElement>>('ref');
 
   /** readonly ReadType[] */
   contentChildrenStringLocatorWithTypeRead = contentChildren('ref', {read: ReadType});
 
   // any due to https://github.com/angular/angular/issues/53894
   /** readonly ElementRef<any>[] */
-  contentChildrenStringLocatorWithElementRefRead =
-      contentChildren('ref', {read: ElementRef<HTMLAnchorElement>});
+  contentChildrenStringLocatorWithElementRefRead = contentChildren('ref', {
+    read: ElementRef<HTMLAnchorElement>,
+  });
 
   /** readonly QueryType[]*/
   contentChildrenTypeLocatorNoRead = contentChildren(QueryType);
@@ -206,6 +226,7 @@ export class SignalQuerySignatureTest {
 
   // any due to https://github.com/angular/angular/issues/53894
   /** readonly ElementRef<any>[] */
-  contentChildrenTypeLocatorAndElementRefRead =
-      contentChildren(QueryType, {read: ElementRef<HTMLAnchorElement>});
+  contentChildrenTypeLocatorAndElementRefRead = contentChildren(QueryType, {
+    read: ElementRef<HTMLAnchorElement>,
+  });
 }
diff --git a/packages/core/test/authoring/type_tester.ts b/packages/core/test/authoring/type_tester.ts
index 5a703bb612b3d..d11dee3c6c675 100644
--- a/packages/core/test/authoring/type_tester.ts
+++ b/packages/core/test/authoring/type_tester.ts
@@ -15,11 +15,11 @@ import url from 'url';
 const TESTS = new Map<string, (value: string) => string>([
   [
     'signal_input_signature_test',
-    v => v.includes(',') ? `InputSignalWithTransform<${v}>` : `InputSignal<${v}>`
+    (v) => (v.includes(',') ? `InputSignalWithTransform<${v}>` : `InputSignal<${v}>`),
   ],
-  ['signal_queries_signature_test', v => `Signal<${v}>`],
-  ['signal_model_signature_test', v => `ModelSignal<${v}>`],
-  ['unwrap_writable_signal_signature_test', v => v]
+  ['signal_queries_signature_test', (v) => `Signal<${v}>`],
+  ['signal_model_signature_test', (v) => `ModelSignal<${v}>`],
+  ['unwrap_writable_signal_signature_test', (v) => v],
 ]);
 
 const containingDir = path.dirname(url.fileURLToPath(import.meta.url));
@@ -36,7 +36,8 @@ function testFile(testFileName: string, getType: (v: string) => string): boolean
   const fileContent = fs.readFileSync(path.join(containingDir, `${testFileName}.d.ts`), 'utf8');
   const sourceFile = ts.createSourceFile('test.ts', fileContent, ts.ScriptTarget.ESNext, true);
   const testClazz = sourceFile.statements.find(
-      (s): s is ts.ClassDeclaration => ts.isClassDeclaration(s) && isTestClass(s));
+    (s): s is ts.ClassDeclaration => ts.isClassDeclaration(s) && isTestClass(s),
+  );
 
   if (testClazz === undefined) {
     return false;
@@ -49,7 +50,9 @@ function testFile(testFileName: string, getType: (v: string) => string): boolean
     }
 
     const leadingCommentRanges = ts.getLeadingCommentRanges(sourceFile.text, member.getFullStart());
-    const leadingComments = leadingCommentRanges?.map(r => sourceFile.text.substring(r.pos, r.end));
+    const leadingComments = leadingCommentRanges?.map((r) =>
+      sourceFile.text.substring(r.pos, r.end),
+    );
 
     if (leadingComments === undefined || leadingComments.length === 0) {
       throw new Error(`No expected type for: ${member.name.getText()}`);
@@ -73,14 +76,14 @@ function testFile(testFileName: string, getType: (v: string) => string): boolean
 async function main() {
   let failing = false;
 
-  TESTS.forEach((callback, filename) => failing ||= testFile(filename, callback));
+  TESTS.forEach((callback, filename) => (failing ||= testFile(filename, callback)));
 
   if (failing) {
     throw new Error('Failing assertions');
   }
 }
 
-main().catch(e => {
+main().catch((e) => {
   console.error(e);
   process.exitCode = 1;
 });
diff --git a/packages/core/test/authoring/unwrap_writable_signal_signature_test.ts b/packages/core/test/authoring/unwrap_writable_signal_signature_test.ts
index 8bf6f0e09de41..20a1b87c65653 100644
--- a/packages/core/test/authoring/unwrap_writable_signal_signature_test.ts
+++ b/packages/core/test/authoring/unwrap_writable_signal_signature_test.ts
@@ -27,7 +27,7 @@ export class SignalModelSignatureTest {
   requiredModel = unwrapWritableSignal(model.required<string>());
 
   /** string | number */
-  writableSignal = unwrapWritableSignal(signal<string|number>(0));
+  writableSignal = unwrapWritableSignal(signal<string | number>(0));
 
   /** InputSignal<string | undefined> */
   optionalReadonlySignal = unwrapWritableSignal(input<string>());
@@ -39,6 +39,7 @@ export class SignalModelSignatureTest {
   primitiveValue = unwrapWritableSignal(123);
 
   /** (value: string | null | undefined) => number */
-  getterFunction =
-      unwrapWritableSignal((value: string|null|undefined) => value ? parseInt(value) : 0);
+  getterFunction = unwrapWritableSignal((value: string | null | undefined) =>
+    value ? parseInt(value) : 0,
+  );
 }
diff --git a/packages/core/test/bundling/animation_world/index.ts b/packages/core/test/bundling/animation_world/index.ts
index d7c31c834e885..c55e971f14311 100644
--- a/packages/core/test/bundling/animation_world/index.ts
+++ b/packages/core/test/bundling/animation_world/index.ts
@@ -6,17 +6,26 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ApplicationRef, ChangeDetectorRef, Component, Directive, ElementRef, HostBinding, HostListener, NgModule} from '@angular/core';
+import {
+  ApplicationRef,
+  ChangeDetectorRef,
+  Component,
+  Directive,
+  ElementRef,
+  HostBinding,
+  HostListener,
+  NgModule,
+} from '@angular/core';
 import {BrowserModule, platformBrowser} from '@angular/platform-browser';
 
 @Directive({
   selector: '[make-color-grey]',
   exportAs: 'makeColorGrey',
-  host: {'style': 'font-family: Times New Roman;'}
+  host: {'style': 'font-family: Times New Roman;'},
 })
 class MakeColorGreyDirective {
-  @HostBinding('style.background-color') private _backgroundColor: string|null = null;
-  @HostBinding('style.color') private _textColor: string|null = null;
+  @HostBinding('style.background-color') private _backgroundColor: string | null = null;
+  @HostBinding('style.color') private _textColor: string | null = null;
 
   on() {
     this._backgroundColor = 'grey';
@@ -96,14 +105,23 @@ class AnimationWorldComponent {
   @HostBinding('class') classVal = 'border';
 
   items: any[] = [
-    {value: 1, active: false}, {value: 2, active: false}, {value: 3, active: false},
-    {value: 4, active: false}, {value: 5, active: false}, {value: 6, active: false},
-    {value: 7, active: false}, {value: 8, active: false}, {value: 9, active: false}
+    {value: 1, active: false},
+    {value: 2, active: false},
+    {value: 3, active: false},
+    {value: 4, active: false},
+    {value: 5, active: false},
+    {value: 6, active: false},
+    {value: 7, active: false},
+    {value: 8, active: false},
+    {value: 9, active: false},
   ];
   private _hostElement: HTMLElement;
-  public styles: {[key: string]: any}|null = null;
+  public styles: {[key: string]: any} | null = null;
 
-  constructor(element: ElementRef, private readonly cdr: ChangeDetectorRef) {
+  constructor(
+    element: ElementRef,
+    private readonly cdr: ChangeDetectorRef,
+  ) {
     this._hostElement = element.nativeElement;
   }
 
diff --git a/packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json b/packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json
index a71ea4f5ff2df..1f2c281772132 100644
--- a/packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json
@@ -554,12 +554,18 @@
   {
     "name": "_CACHED_BODY"
   },
+  {
+    "name": "_ComponentFactoryResolver"
+  },
   {
     "name": "_DOM"
   },
   {
     "name": "_IS_WEBKIT"
   },
+  {
+    "name": "_Injector"
+  },
   {
     "name": "_NullComponentFactoryResolver"
   },
diff --git a/packages/core/test/bundling/animations-standalone/index.ts b/packages/core/test/bundling/animations-standalone/index.ts
index b7606c2ae9be1..b255021f8a712 100644
--- a/packages/core/test/bundling/animations-standalone/index.ts
+++ b/packages/core/test/bundling/animations-standalone/index.ts
@@ -15,8 +15,9 @@ import {BrowserAnimationsModule, provideAnimations} from '@angular/platform-brow
   template: `
     <div [@myAnimation]="exp"></div>
     `,
-  animations:
-      [trigger('myAnimation', [transition('* => on', [animate(1000, style({opacity: 1}))])])],
+  animations: [
+    trigger('myAnimation', [transition('* => on', [animate(1000, style({opacity: 1}))])]),
+  ],
   standalone: true,
 })
 class AnimationsComponent {
@@ -31,8 +32,6 @@ class AnimationsComponent {
   standalone: true,
   imports: [AnimationsComponent],
 })
-class RootComponent {
-}
-
+class RootComponent {}
 
 (window as any).waitForApp = bootstrapApplication(RootComponent, {providers: provideAnimations()});
diff --git a/packages/core/test/bundling/animations/bundle.golden_symbols.json b/packages/core/test/bundling/animations/bundle.golden_symbols.json
index 5c3e55c9bdf71..3cccb70c82c5f 100644
--- a/packages/core/test/bundling/animations/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/animations/bundle.golden_symbols.json
@@ -608,12 +608,18 @@
   {
     "name": "_CACHED_BODY"
   },
+  {
+    "name": "_ComponentFactoryResolver"
+  },
   {
     "name": "_DOM"
   },
   {
     "name": "_IS_WEBKIT"
   },
+  {
+    "name": "_Injector"
+  },
   {
     "name": "_NullComponentFactoryResolver"
   },
diff --git a/packages/core/test/bundling/animations/index.ts b/packages/core/test/bundling/animations/index.ts
index 0299763c8889d..a11bf3a1e2ecc 100644
--- a/packages/core/test/bundling/animations/index.ts
+++ b/packages/core/test/bundling/animations/index.ts
@@ -15,8 +15,9 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
   template: `
     <div [@myAnimation]="exp"></div>
     `,
-  animations:
-      [trigger('myAnimation', [transition('* => on', [animate(1000, style({opacity: 1}))])])]
+  animations: [
+    trigger('myAnimation', [transition('* => on', [animate(1000, style({opacity: 1}))])]),
+  ],
 })
 class AnimationsComponent {
   exp: any = false;
@@ -26,10 +27,9 @@ class AnimationsComponent {
   selector: 'app-root',
   template: `
      <app-animations></app-animations>
-   `
+   `,
 })
-class RootComponent {
-}
+class RootComponent {}
 
 @NgModule({
   declarations: [RootComponent, AnimationsComponent],
@@ -41,5 +41,6 @@ class AnimationsExampleModule {
   }
 }
 
-(window as any).waitForApp =
-    platformBrowser().bootstrapModule(AnimationsExampleModule, {ngZone: 'noop'});
+(window as any).waitForApp = platformBrowser().bootstrapModule(AnimationsExampleModule, {
+  ngZone: 'noop',
+});
diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
index 40dfa4ba40ea0..a2b97adcf7a5f 100644
--- a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
@@ -449,9 +449,15 @@
   {
     "name": "ZoneStablePendingTask"
   },
+  {
+    "name": "_ComponentFactoryResolver"
+  },
   {
     "name": "_DOM"
   },
+  {
+    "name": "_Injector"
+  },
   {
     "name": "_NullComponentFactoryResolver"
   },
diff --git a/packages/core/test/bundling/cyclic_import/index.ts b/packages/core/test/bundling/cyclic_import/index.ts
index d72ff4221f49f..99f5ce4a47a21 100644
--- a/packages/core/test/bundling/cyclic_import/index.ts
+++ b/packages/core/test/bundling/cyclic_import/index.ts
@@ -15,15 +15,13 @@ import {TriggerComponent} from './trigger';
   selector: 'dep',
   template: 'dep',
 })
-export class DepComponent {
-}
+export class DepComponent {}
 
 @NgModule({
   declarations: [DepComponent, TriggerComponent],
   imports: [BrowserModule],
   bootstrap: [TriggerComponent],
 })
-export class Module {
-}
+export class Module {}
 
 (window as any).appReady = platformBrowser().bootstrapModule(Module, {ngZone: 'noop'});
diff --git a/packages/core/test/bundling/cyclic_import/integration_spec.ts b/packages/core/test/bundling/cyclic_import/integration_spec.ts
index 4bdff345c8e25..fa2a92f6ab242 100644
--- a/packages/core/test/bundling/cyclic_import/integration_spec.ts
+++ b/packages/core/test/bundling/cyclic_import/integration_spec.ts
@@ -23,24 +23,31 @@ describe('treeshaking with uglify', () => {
   });
 
   describe('functional test in domino', () => {
-    it('should render hello world when not minified', withBody('<trigger></trigger>', async () => {
-         await import(path.join(PACKAGE, 'bundle.js'));
-         await (window as any).appReady;
-         expect(document.body.textContent).toEqual('dep');
-       }));
+    it(
+      'should render hello world when not minified',
+      withBody('<trigger></trigger>', async () => {
+        await import(path.join(PACKAGE, 'bundle.js'));
+        await (window as any).appReady;
+        expect(document.body.textContent).toEqual('dep');
+      }),
+    );
 
-    it('should render hello world when debug minified',
-       withBody('<trigger></trigger>', async () => {
-         await import(path.join(PACKAGE, 'bundle.debug.min.js'));
-         await (window as any).appReady;
-         expect(document.body.textContent).toEqual('dep');
-       }));
+    it(
+      'should render hello world when debug minified',
+      withBody('<trigger></trigger>', async () => {
+        await import(path.join(PACKAGE, 'bundle.debug.min.js'));
+        await (window as any).appReady;
+        expect(document.body.textContent).toEqual('dep');
+      }),
+    );
 
-    it('should render hello world when fully minified',
-       withBody('<trigger></trigger>', async () => {
-         await import(path.join(PACKAGE, 'bundle.min.js'));
-         await (window as any).appReady;
-         expect(document.body.textContent).toEqual('dep');
-       }));
+    it(
+      'should render hello world when fully minified',
+      withBody('<trigger></trigger>', async () => {
+        await import(path.join(PACKAGE, 'bundle.min.js'));
+        await (window as any).appReady;
+        expect(document.body.textContent).toEqual('dep');
+      }),
+    );
   });
 });
diff --git a/packages/core/test/bundling/cyclic_import/trigger.ts b/packages/core/test/bundling/cyclic_import/trigger.ts
index a5c11768ca3d0..e62454ebc7097 100644
--- a/packages/core/test/bundling/cyclic_import/trigger.ts
+++ b/packages/core/test/bundling/cyclic_import/trigger.ts
@@ -12,5 +12,4 @@ import {Component} from '@angular/core';
   selector: 'trigger',
   template: '<dep></dep>',
 })
-export class TriggerComponent {
-}
+export class TriggerComponent {}
diff --git a/packages/core/test/bundling/defer/bundle.golden_symbols.json b/packages/core/test/bundling/defer/bundle.golden_symbols.json
index 744b8fb30ead4..932ef3b764402 100644
--- a/packages/core/test/bundling/defer/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/defer/bundle.golden_symbols.json
@@ -503,9 +503,15 @@
   {
     "name": "ZoneStablePendingTask"
   },
+  {
+    "name": "_ComponentFactoryResolver"
+  },
   {
     "name": "_DOM"
   },
+  {
+    "name": "_Injector"
+  },
   {
     "name": "_NullComponentFactoryResolver"
   },
diff --git a/packages/core/test/bundling/defer/defer.component.ts b/packages/core/test/bundling/defer/defer.component.ts
index 563f343c48696..51c3a994c93b2 100644
--- a/packages/core/test/bundling/defer/defer.component.ts
+++ b/packages/core/test/bundling/defer/defer.component.ts
@@ -15,5 +15,4 @@ import {Component} from '@angular/core';
     <h2>Defer-loaded component</h2>
   `,
 })
-export class DeferComponent {
-}
+export class DeferComponent {}
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
index d342e9162dd07..5de5cfba8ca3e 100644
--- a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
@@ -617,6 +617,9 @@
   {
     "name": "ZoneStablePendingTask"
   },
+  {
+    "name": "_ComponentFactoryResolver"
+  },
   {
     "name": "_DOM"
   },
@@ -626,6 +629,9 @@
   {
     "name": "_DuplicateMap"
   },
+  {
+    "name": "_Injector"
+  },
   {
     "name": "_NullComponentFactoryResolver"
   },
diff --git a/packages/core/test/bundling/forms_reactive/forms_e2e_spec.ts b/packages/core/test/bundling/forms_reactive/forms_e2e_spec.ts
index 141b4c476d7eb..5c85f4220a2b5 100644
--- a/packages/core/test/bundling/forms_reactive/forms_e2e_spec.ts
+++ b/packages/core/test/bundling/forms_reactive/forms_e2e_spec.ts
@@ -17,33 +17,36 @@ const BUNDLES = ['bundle.js', 'bundle.debug.min.js', 'bundle.min.js'];
 describe('functional test for reactive forms', () => {
   BUNDLES.forEach((bundle) => {
     describe(`using ${bundle} bundle`, () => {
-      it('should render template form', withBody('<app-root></app-root>', async () => {
-           // load the bundle
-           await import(path.join(PACKAGE, bundle));
-           // the bundle attaches the following fields to the `window` global.
-           const {bootstrapApp} = window as any;
-
-           await bootstrapApp();
-
-           // Reactive forms
-           const reactiveFormsComponent = (window as any).reactiveFormsComponent;
-           const reactiveForm = document.querySelector('app-reactive-forms')!;
-
-           // Check for inputs
-           const inputs = reactiveForm.querySelectorAll('input');
-           expect(inputs.length).toBe(5);
-
-           // Check for button
-           const reactiveButtons = reactiveForm.querySelectorAll('button');
-           expect(reactiveButtons.length).toBe(1);
-           expect(reactiveButtons[0]).toBeDefined();
-
-           // Make sure button click works
-           const reactiveFormSpy = spyOn(reactiveFormsComponent, 'addCity').and.callThrough();
-           reactiveButtons[0].click();
-           expect(reactiveFormSpy).toHaveBeenCalled();
-           expect(reactiveFormsComponent.addresses.length).toBe(2);
-         }));
+      it(
+        'should render template form',
+        withBody('<app-root></app-root>', async () => {
+          // load the bundle
+          await import(path.join(PACKAGE, bundle));
+          // the bundle attaches the following fields to the `window` global.
+          const {bootstrapApp} = window as any;
+
+          await bootstrapApp();
+
+          // Reactive forms
+          const reactiveFormsComponent = (window as any).reactiveFormsComponent;
+          const reactiveForm = document.querySelector('app-reactive-forms')!;
+
+          // Check for inputs
+          const inputs = reactiveForm.querySelectorAll('input');
+          expect(inputs.length).toBe(5);
+
+          // Check for button
+          const reactiveButtons = reactiveForm.querySelectorAll('button');
+          expect(reactiveButtons.length).toBe(1);
+          expect(reactiveButtons[0]).toBeDefined();
+
+          // Make sure button click works
+          const reactiveFormSpy = spyOn(reactiveFormsComponent, 'addCity').and.callThrough();
+          reactiveButtons[0].click();
+          expect(reactiveFormSpy).toHaveBeenCalled();
+          expect(reactiveFormsComponent.addresses.length).toBe(2);
+        }),
+      );
     });
   });
 });
diff --git a/packages/core/test/bundling/forms_reactive/index.ts b/packages/core/test/bundling/forms_reactive/index.ts
index 875b0fdd625e5..3d7c2b2c24126 100644
--- a/packages/core/test/bundling/forms_reactive/index.ts
+++ b/packages/core/test/bundling/forms_reactive/index.ts
@@ -6,7 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {Component, NgModule} from '@angular/core';
-import {FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {
+  FormArray,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
 import {BrowserModule, platformBrowser} from '@angular/platform-browser';
 
 @Component({
@@ -35,7 +42,7 @@ import {BrowserModule, platformBrowser} from '@angular/platform-browser';
       </div>
       <button (click)="addCity()">Add City</button>
     </form>
-  `
+  `,
 })
 class ReactiveFormsComponent {
   profileForm!: FormGroup;
@@ -78,14 +85,13 @@ class ReactiveFormsComponent {
   selector: 'app-root',
   template: `
     <app-reactive-forms></app-reactive-forms>
-  `
+  `,
 })
-class RootComponent {
-}
+class RootComponent {}
 
 @NgModule({
   declarations: [RootComponent, ReactiveFormsComponent],
-  imports: [BrowserModule, ReactiveFormsModule]
+  imports: [BrowserModule, ReactiveFormsModule],
 })
 class FormsExampleModule {
   ngDoBootstrap(app: any) {
diff --git a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json b/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json
index 0b03f9a38886d..df5cb7b58894f 100644
--- a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json
@@ -608,6 +608,9 @@
   {
     "name": "ZoneStablePendingTask"
   },
+  {
+    "name": "_ComponentFactoryResolver"
+  },
   {
     "name": "_DOM"
   },
@@ -617,6 +620,9 @@
   {
     "name": "_DuplicateMap"
   },
+  {
+    "name": "_Injector"
+  },
   {
     "name": "_NullComponentFactoryResolver"
   },
diff --git a/packages/core/test/bundling/forms_template_driven/forms_e2e_spec.ts b/packages/core/test/bundling/forms_template_driven/forms_e2e_spec.ts
index c4bad529f97cc..5e84f8b037df3 100644
--- a/packages/core/test/bundling/forms_template_driven/forms_e2e_spec.ts
+++ b/packages/core/test/bundling/forms_template_driven/forms_e2e_spec.ts
@@ -17,32 +17,35 @@ const BUNDLES = ['bundle.js', 'bundle.debug.min.js', 'bundle.min.js'];
 describe('functional test for forms', () => {
   BUNDLES.forEach((bundle) => {
     describe(`using ${bundle} bundle`, () => {
-      it('should render template form', withBody('<app-root></app-root>', async () => {
-           // load the bundle
-           await import(path.join(PACKAGE, bundle));
-           // the bundle attaches the following fields to the `window` global.
-           const {bootstrapApp} = window as any;
-
-           await bootstrapApp();
-
-           // Template forms
-           const templateFormsComponent = (window as any).templateFormsComponent;
-           const templateForm = document.querySelector('app-template-forms')!;
-
-           // Check for inputs
-           const iputs = templateForm.querySelectorAll('input');
-           expect(iputs.length).toBe(5);
-
-           // Check for button
-           const templateButtons = templateForm.querySelectorAll('button');
-           expect(templateButtons.length).toBe(1);
-           expect(templateButtons[0]).toBeDefined();
-
-           // Make sure button click works
-           const templateFormSpy = spyOn(templateFormsComponent, 'addCity');
-           templateButtons[0].click();
-           expect(templateFormSpy).toHaveBeenCalled();
-         }));
+      it(
+        'should render template form',
+        withBody('<app-root></app-root>', async () => {
+          // load the bundle
+          await import(path.join(PACKAGE, bundle));
+          // the bundle attaches the following fields to the `window` global.
+          const {bootstrapApp} = window as any;
+
+          await bootstrapApp();
+
+          // Template forms
+          const templateFormsComponent = (window as any).templateFormsComponent;
+          const templateForm = document.querySelector('app-template-forms')!;
+
+          // Check for inputs
+          const iputs = templateForm.querySelectorAll('input');
+          expect(iputs.length).toBe(5);
+
+          // Check for button
+          const templateButtons = templateForm.querySelectorAll('button');
+          expect(templateButtons.length).toBe(1);
+          expect(templateButtons[0]).toBeDefined();
+
+          // Make sure button click works
+          const templateFormSpy = spyOn(templateFormsComponent, 'addCity');
+          templateButtons[0].click();
+          expect(templateFormSpy).toHaveBeenCalled();
+        }),
+      );
     });
   });
 });
diff --git a/packages/core/test/bundling/forms_template_driven/index.ts b/packages/core/test/bundling/forms_template_driven/index.ts
index be6525c2167a5..d74fa9ef64aa8 100644
--- a/packages/core/test/bundling/forms_template_driven/index.ts
+++ b/packages/core/test/bundling/forms_template_driven/index.ts
@@ -36,7 +36,7 @@ import {BrowserModule, platformBrowser} from '@angular/platform-browser';
         <button (click)="addCity()">Add City</button>
       </div>
     </form>
-  `
+  `,
 })
 class TemplateFormsComponent {
   name = {first: 'Nancy', last: 'Drew', subscribed: true};
@@ -55,10 +55,9 @@ class TemplateFormsComponent {
   selector: 'app-root',
   template: `
     <app-template-forms></app-template-forms>
-  `
+  `,
 })
-class RootComponent {
-}
+class RootComponent {}
 
 @NgModule({
   declarations: [RootComponent, TemplateFormsComponent],
diff --git a/packages/core/test/bundling/hello_world/bundle.golden_symbols.json b/packages/core/test/bundling/hello_world/bundle.golden_symbols.json
index 09a51d2ee8d0b..c0ab8223b0bc8 100644
--- a/packages/core/test/bundling/hello_world/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/hello_world/bundle.golden_symbols.json
@@ -341,9 +341,15 @@
   {
     "name": "ZoneStablePendingTask"
   },
+  {
+    "name": "_ComponentFactoryResolver"
+  },
   {
     "name": "_DOM"
   },
+  {
+    "name": "_Injector"
+  },
   {
     "name": "_NullComponentFactoryResolver"
   },
diff --git a/packages/core/test/bundling/hello_world/index.ts b/packages/core/test/bundling/hello_world/index.ts
index 725802d4deac7..489ab78cda757 100644
--- a/packages/core/test/bundling/hello_world/index.ts
+++ b/packages/core/test/bundling/hello_world/index.ts
@@ -9,11 +9,9 @@ import {Component, NgModule} from '@angular/core';
 import {platformBrowser} from '@angular/platform-browser';
 
 @Component({selector: 'hello-world', template: 'Hello World!'})
-export class HelloWorldComponent {
-}
+export class HelloWorldComponent {}
 
 @NgModule({declarations: [HelloWorldComponent]})
-export class HelloWorldModule {
-}
+export class HelloWorldModule {}
 
 platformBrowser().bootstrapModule(HelloWorldModule);
diff --git a/packages/core/test/bundling/hello_world_i18n/index.ts b/packages/core/test/bundling/hello_world_i18n/index.ts
index 14bd29664e216..cd607e5078cb6 100644
--- a/packages/core/test/bundling/hello_world_i18n/index.ts
+++ b/packages/core/test/bundling/hello_world_i18n/index.ts
@@ -12,17 +12,15 @@ import {BrowserModule, platformBrowser} from '@angular/platform-browser';
 
 @Component({
   selector: 'hello-world',
-  template: `<div i18n i18n-title title="Hello Title!">Hello World!</div>`
+  template: `<div i18n i18n-title title="Hello Title!">Hello World!</div>`,
 })
-export class HelloWorld {
-}
+export class HelloWorld {}
 
 @NgModule({
   declarations: [HelloWorld],
   imports: [BrowserModule],
   bootstrap: [HelloWorld],
 })
-export class Module {
-}
+export class Module {}
 
 platformBrowser().bootstrapModule(Module, {ngZone: 'noop'});
diff --git a/packages/core/test/bundling/hydration/bundle.golden_symbols.json b/packages/core/test/bundling/hydration/bundle.golden_symbols.json
index 2fb7455eb229d..fda5235d87629 100644
--- a/packages/core/test/bundling/hydration/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/hydration/bundle.golden_symbols.json
@@ -500,9 +500,15 @@
   {
     "name": "ZoneStablePendingTask"
   },
+  {
+    "name": "_ComponentFactoryResolver"
+  },
   {
     "name": "_DOM"
   },
+  {
+    "name": "_Injector"
+  },
   {
     "name": "_NullComponentFactoryResolver"
   },
diff --git a/packages/core/test/bundling/hydration/index.ts b/packages/core/test/bundling/hydration/index.ts
index d2524bf0eb58c..b0935f18c39e9 100644
--- a/packages/core/test/bundling/hydration/index.ts
+++ b/packages/core/test/bundling/hydration/index.ts
@@ -14,7 +14,6 @@ import {bootstrapApplication, provideClientHydration} from '@angular/platform-br
   selector: 'hello-world',
   template: 'Hello World!',
 })
-class HelloWorld {
-}
+class HelloWorld {}
 
 bootstrapApplication(HelloWorld, {providers: [provideClientHydration()]});
diff --git a/packages/core/test/bundling/image-directive/e2e/basic/basic.ts b/packages/core/test/bundling/image-directive/e2e/basic/basic.ts
index ace941af07770..17f0e7498add0 100644
--- a/packages/core/test/bundling/image-directive/e2e/basic/basic.ts
+++ b/packages/core/test/bundling/image-directive/e2e/basic/basic.ts
@@ -14,10 +14,11 @@ import {Component} from '@angular/core';
   standalone: true,
   imports: [NgOptimizedImage],
   template: `<img ngSrc="/e2e/a.png" width="150" height="150" priority>`,
-  providers: [{
-    provide: IMAGE_LOADER,
-    useValue: () => 'https://angular.io/assets/images/logos/angular/angular.svg'
-  }],
+  providers: [
+    {
+      provide: IMAGE_LOADER,
+      useValue: () => 'https://angular.io/assets/images/logos/angular/angular.svg',
+    },
+  ],
 })
-export class BasicComponent {
-}
+export class BasicComponent {}
diff --git a/packages/core/test/bundling/image-directive/e2e/browser-logs-util.ts b/packages/core/test/bundling/image-directive/e2e/browser-logs-util.ts
index 0c730f2853118..c88aaea53ca62 100644
--- a/packages/core/test/bundling/image-directive/e2e/browser-logs-util.ts
+++ b/packages/core/test/bundling/image-directive/e2e/browser-logs-util.ts
@@ -11,18 +11,21 @@ import {browser} from 'protractor';
 import {logging} from 'selenium-webdriver';
 
 export async function collectBrowserLogs(
-    loggingLevel: logging.Level,
-    collectMoreSevereErrors: boolean = false): Promise<logging.Entry[]> {
+  loggingLevel: logging.Level,
+  collectMoreSevereErrors: boolean = false,
+): Promise<logging.Entry[]> {
   const browserLog = await browser.manage().logs().get('browser');
   const collectedLogs: logging.Entry[] = [];
 
-  browserLog.forEach(logEntry => {
+  browserLog.forEach((logEntry) => {
     const msg = logEntry.message;
 
     console.log('>> ' + msg, logEntry);
 
-    if ((!collectMoreSevereErrors && logEntry.level.value === loggingLevel.value) ||
-        (collectMoreSevereErrors && logEntry.level.value >= loggingLevel.value)) {
+    if (
+      (!collectMoreSevereErrors && logEntry.level.value === loggingLevel.value) ||
+      (collectMoreSevereErrors && logEntry.level.value >= loggingLevel.value)
+    ) {
       collectedLogs.push(logEntry);
     }
   });
@@ -30,7 +33,9 @@ export async function collectBrowserLogs(
 }
 
 export async function verifyNoBrowserErrors() {
-  const logs =
-      await collectBrowserLogs(logging.Level.INFO, true /* collect more severe errors too */);
+  const logs = await collectBrowserLogs(
+    logging.Level.INFO,
+    true /* collect more severe errors too */,
+  );
   expect(logs).toEqual([]);
 }
diff --git a/packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.e2e-spec.ts b/packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.e2e-spec.ts
index ed5f7f5306ddc..6dace372f9835 100644
--- a/packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.e2e-spec.ts
+++ b/packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.e2e-spec.ts
@@ -27,19 +27,22 @@ describe('NgOptimizedImage directive', () => {
     // Image loading order is not guaranteed, so all logs, rather than single entry
     // needs to be checked in order to test whether a given error message is present.
     const expectErrorMessageInLogs = (logs: logging.Entry[], message: string) => {
-      expect(logs.some((log) => {
-        return log.message.includes(message);
-      })).toBeTruthy();
+      expect(
+        logs.some((log) => {
+          return log.message.includes(message);
+        }),
+      ).toBeTruthy();
     };
 
     expectErrorMessageInLogs(
-        logs,
-        'NG02952: The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
-            'with the `ngSrc=\\"/e2e/logo-500w.jpg\\"`) has detected that the height ' +
-            'of the fill-mode image is zero. This is likely because the containing element ' +
-            'does not have the CSS \'position\' property set to one of the following: ' +
-            '\\"relative\\", \\"fixed\\", or \\"absolute\\". To fix this problem, ' +
-            'make sure the container element has the CSS \'position\' ' +
-            'property defined and the height of the element is not zero.');
+      logs,
+      'NG02952: The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
+        'with the `ngSrc=\\"/e2e/logo-500w.jpg\\"`) has detected that the height ' +
+        'of the fill-mode image is zero. This is likely because the containing element ' +
+        "does not have the CSS 'position' property set to one of the following: " +
+        '\\"relative\\", \\"fixed\\", or \\"absolute\\". To fix this problem, ' +
+        "make sure the container element has the CSS 'position' " +
+        'property defined and the height of the element is not zero.',
+    );
   });
 });
diff --git a/packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.ts b/packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.ts
index 83202d045a9b0..6fcc094e22461 100644
--- a/packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.ts
+++ b/packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.ts
@@ -20,8 +20,7 @@ import {Component} from '@angular/core';
     </div>
   `,
 })
-export class FillModePassingComponent {
-}
+export class FillModePassingComponent {}
 @Component({
   selector: 'fill-mode-failing',
   standalone: true,
@@ -32,5 +31,4 @@ export class FillModePassingComponent {
     </div>
   `,
 })
-export class FillModeFailingComponent {
-}
+export class FillModeFailingComponent {}
diff --git a/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts b/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts
index 99af2b1927568..4cf68b654d51c 100644
--- a/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts
+++ b/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts
@@ -27,85 +27,94 @@ describe('NgOptimizedImage directive', () => {
     // Image loading order is not guaranteed, so all logs, rather than single entry
     // needs to be checked in order to test whether a given error message is present.
     const expectErrorMessageInLogs = (logs: logging.Entry[], message: string) => {
-      expect(logs.some((log) => {
-        return log.message.includes(message);
-      })).toBeTruthy();
+      expect(
+        logs.some((log) => {
+          return log.message.includes(message);
+        }),
+      ).toBeTruthy();
     };
 
     // Images with incorrect width/height attributes
     expectErrorMessageInLogs(
-        logs,
-        'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
-            'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
-            'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
-            '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
-            '\\nSupplied width and height attributes: 26w x 30h (aspect-ratio: 0.87). ' +
-            '\\nTo fix this, update the width and height attributes.');
+      logs,
+      'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
+        'with the `ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
+        'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
+        '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
+        '\\nSupplied width and height attributes: 26w x 30h (aspect-ratio: 0.87). ' +
+        '\\nTo fix this, update the width and height attributes.',
+    );
 
     expectErrorMessageInLogs(
-        logs,
-        'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
-            'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
-            'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
-            '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
-            '\\nSupplied width and height attributes: 24w x 240h (aspect-ratio: 0.10). ' +
-            '\\nTo fix this, update the width and height attributes.');
+      logs,
+      'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
+        'with the `ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
+        'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
+        '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
+        '\\nSupplied width and height attributes: 24w x 240h (aspect-ratio: 0.10). ' +
+        '\\nTo fix this, update the width and height attributes.',
+    );
 
     // Images with incorrect styling
     expectErrorMessageInLogs(
-        logs,
-        'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
-            'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
-            'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' +
-            '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
-            '\\nRendered image size: 250w x 30h (aspect-ratio: 8.33). ' +
-            '\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
-            'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
-            'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.');
+      logs,
+      'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
+        'with the `ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
+        "the aspect ratio of the rendered image does not match the image's intrinsic aspect ratio. " +
+        '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
+        '\\nRendered image size: 250w x 30h (aspect-ratio: 8.33). ' +
+        '\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
+        'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
+        'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.',
+    );
 
     expectErrorMessageInLogs(
-        logs,
-        'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
-            'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
-            'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' +
-            '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
-            '\\nRendered image size: 30w x 250h (aspect-ratio: 0.12). ' +
-            '\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
-            'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
-            'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.');
+      logs,
+      'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
+        'with the `ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
+        "the aspect ratio of the rendered image does not match the image's intrinsic aspect ratio. " +
+        '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
+        '\\nRendered image size: 30w x 250h (aspect-ratio: 0.12). ' +
+        '\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
+        'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
+        'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.',
+    );
 
     // Padding is used on <img>
     expectErrorMessageInLogs(
-        logs,
-        'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
-            'with the \`ngSrc=\\"/e2e/logo-500w.jpg\\"`) has detected that ' +
-            'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' +
-            '\\nIntrinsic image size: 500w x 500h (aspect-ratio: 1). ' +
-            '\\nRendered image size: 100w x 500h (aspect-ratio: 0.20). ' +
-            '\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
-            'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
-            'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.');
+      logs,
+      'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
+        'with the `ngSrc=\\"/e2e/logo-500w.jpg\\"`) has detected that ' +
+        "the aspect ratio of the rendered image does not match the image's intrinsic aspect ratio. " +
+        '\\nIntrinsic image size: 500w x 500h (aspect-ratio: 1). ' +
+        '\\nRendered image size: 100w x 500h (aspect-ratio: 0.20). ' +
+        '\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
+        'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
+        'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.',
+    );
     expectErrorMessageInLogs(
-        logs,
-        'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
-            'with the \`ngSrc=\\"/e2e/logo-500w.jpg\\"`) has detected that ' +
-            'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' +
-            '\\nIntrinsic image size: 500w x 500h (aspect-ratio: 1). ' +
-            '\\nRendered image size: 200w x 400h (aspect-ratio: 0.50). ' +
-            '\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
-            'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
-            'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.');
+      logs,
+      'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
+        'with the `ngSrc=\\"/e2e/logo-500w.jpg\\"`) has detected that ' +
+        "the aspect ratio of the rendered image does not match the image's intrinsic aspect ratio. " +
+        '\\nIntrinsic image size: 500w x 500h (aspect-ratio: 1). ' +
+        '\\nRendered image size: 200w x 400h (aspect-ratio: 0.50). ' +
+        '\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
+        'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
+        'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.',
+    );
 
     // Image with incorrect width/height attributes AND incorrect styling
     // This only generate only one error to ensure that users first fix the width and height
     // attributes.
     expectErrorMessageInLogs(
-        logs,
-        'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
-            'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
-            'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
-            '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
-            '\\nSupplied width and height attributes: 150w x 250h (aspect-ratio: 0.60). ' +
-            '\\nTo fix this, update the width and height attributes.');
+      logs,
+      'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
+        'with the `ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
+        'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
+        '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
+        '\\nSupplied width and height attributes: 150w x 250h (aspect-ratio: 0.60). ' +
+        '\\nTo fix this, update the width and height attributes.',
+    );
   });
 });
diff --git a/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.ts b/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.ts
index a3226c00979df..b54bd2e156576 100644
--- a/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.ts
+++ b/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.ts
@@ -63,8 +63,7 @@ import {Component} from '@angular/core';
      <br>
     `,
 })
-export class ImageDistortionPassingComponent {
-}
+export class ImageDistortionPassingComponent {}
 @Component({
   selector: 'image-distortion-failing',
   standalone: true,
@@ -105,5 +104,4 @@ export class ImageDistortionPassingComponent {
        style="width: 400px; height: 400px; padding-left: 200px; box-sizing: border-box">
      `,
 })
-export class ImageDistortionFailingComponent {
-}
+export class ImageDistortionFailingComponent {}
diff --git a/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-lazy/image-perf-warnings-lazy.e2e-spec.ts b/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-lazy/image-perf-warnings-lazy.e2e-spec.ts
index f1a32552d2a59..5c42549d0395b 100644
--- a/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-lazy/image-perf-warnings-lazy.e2e-spec.ts
+++ b/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-lazy/image-perf-warnings-lazy.e2e-spec.ts
@@ -16,7 +16,7 @@ describe('Image performance warnings', () => {
   it('should log a warning when a LCP image is loaded lazily', async () => {
     await browser.get('/e2e/image-perf-warnings-lazy');
     // Wait for load event
-    await new Promise(resolve => setTimeout(resolve, 600));
+    await new Promise((resolve) => setTimeout(resolve, 600));
     // Verify that both images were rendered.
     const imgs = element.all(by.css('img'));
     let srcA = await imgs.get(0).getAttribute('src');
diff --git a/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-lazy/image-perf-warnings-lazy.ts b/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-lazy/image-perf-warnings-lazy.ts
index 61c1f8cf067ea..02bf99ff24c46 100644
--- a/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-lazy/image-perf-warnings-lazy.ts
+++ b/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-lazy/image-perf-warnings-lazy.ts
@@ -24,5 +24,4 @@ import {Component} from '@angular/core';
     <img src="/e2e/b.png" width="10" height="10">
   `,
 })
-export class ImagePerfWarningsLazyComponent {
-}
+export class ImagePerfWarningsLazyComponent {}
diff --git a/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-oversized/image-perf-warnings-oversized.e2e-spec.ts b/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-oversized/image-perf-warnings-oversized.e2e-spec.ts
index d0f8b279732bf..444db0ccca7ba 100644
--- a/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-oversized/image-perf-warnings-oversized.e2e-spec.ts
+++ b/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-oversized/image-perf-warnings-oversized.e2e-spec.ts
@@ -16,7 +16,7 @@ describe('Image performance warnings', () => {
   it('should warn if rendered image size is much smaller than intrinsic size', async () => {
     await browser.get('/e2e/image-perf-warnings-oversized');
     // Wait for load event
-    await new Promise(resolve => setTimeout(resolve, 600));
+    await new Promise((resolve) => setTimeout(resolve, 600));
     const logs = await collectBrowserLogs(logging.Level.WARNING);
 
     expect(logs.length).toEqual(1);
diff --git a/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-oversized/image-perf-warnings-oversized.ts b/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-oversized/image-perf-warnings-oversized.ts
index f494b592e8e1e..5f9b4310b3649 100644
--- a/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-oversized/image-perf-warnings-oversized.ts
+++ b/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-oversized/image-perf-warnings-oversized.ts
@@ -18,5 +18,4 @@ import {Component} from '@angular/core';
        </div>
       `,
 })
-export class ImagePerfWarningsOversizedComponent {
-}
+export class ImagePerfWarningsOversizedComponent {}
diff --git a/packages/core/test/bundling/image-directive/e2e/lcp-check/lcp-check.e2e-spec.ts b/packages/core/test/bundling/image-directive/e2e/lcp-check/lcp-check.e2e-spec.ts
index f44a44191aef0..4dce10c87a3f8 100644
--- a/packages/core/test/bundling/image-directive/e2e/lcp-check/lcp-check.e2e-spec.ts
+++ b/packages/core/test/bundling/image-directive/e2e/lcp-check/lcp-check.e2e-spec.ts
@@ -16,7 +16,7 @@ describe('NgOptimizedImage directive', () => {
   it('should log a warning when a `priority` is missing on an LCP image', async () => {
     await browser.get('/e2e/lcp-check');
     // Wait for ngSrc to be modified
-    await new Promise(resolve => setTimeout(resolve, 600));
+    await new Promise((resolve) => setTimeout(resolve, 600));
     // Verify that both images were rendered.
     const imgs = element.all(by.css('img'));
     let srcB = await imgs.get(0).getAttribute('src');
diff --git a/packages/core/test/bundling/image-directive/e2e/oversized-image/oversized-image.ts b/packages/core/test/bundling/image-directive/e2e/oversized-image/oversized-image.ts
index fa03e4416a5a5..c852d844787fb 100644
--- a/packages/core/test/bundling/image-directive/e2e/oversized-image/oversized-image.ts
+++ b/packages/core/test/bundling/image-directive/e2e/oversized-image/oversized-image.ts
@@ -11,7 +11,7 @@ import {Component} from '@angular/core';
 
 const imageLoader = {
   provide: IMAGE_LOADER,
-  useFactory: () => (config: ImageLoaderConfig) => config.src
+  useFactory: () => (config: ImageLoaderConfig) => config.src,
 };
 
 @Component({
@@ -31,9 +31,7 @@ const imageLoader = {
       </div>
      `,
 })
-export class OversizedImageComponentPassing {
-}
-
+export class OversizedImageComponentPassing {}
 
 @Component({
   selector: 'oversized-image-failing',
@@ -47,5 +45,4 @@ export class OversizedImageComponentPassing {
        </div>
       `,
 })
-export class OversizedImageComponentFailing {
-}
+export class OversizedImageComponentFailing {}
diff --git a/packages/core/test/bundling/image-directive/e2e/preconnect-check/preconnect-check.e2e-spec.ts b/packages/core/test/bundling/image-directive/e2e/preconnect-check/preconnect-check.e2e-spec.ts
index 4e17e3ef14f65..da20be0f29e41 100644
--- a/packages/core/test/bundling/image-directive/e2e/preconnect-check/preconnect-check.e2e-spec.ts
+++ b/packages/core/test/bundling/image-directive/e2e/preconnect-check/preconnect-check.e2e-spec.ts
@@ -38,14 +38,13 @@ describe('NgOptimizedImage directive', () => {
     expect(logs[0].message).toMatch(/NG02956.*?a\.png/);
   });
 
-  it('should not produce any warnings in the console when a preconnect tag is present',
-     async () => {
-       await browser.get('/e2e/preconnect-check?preconnect');
+  it('should not produce any warnings in the console when a preconnect tag is present', async () => {
+    await browser.get('/e2e/preconnect-check?preconnect');
 
-       await verifyImagesPresent(element);
+    await verifyImagesPresent(element);
 
-       // Make sure there are no browser logs.
-       const logs = await collectBrowserLogs(logging.Level.WARNING);
-       expect(logs.length).toEqual(0);
-     });
+    // Make sure there are no browser logs.
+    const logs = await collectBrowserLogs(logging.Level.WARNING);
+    expect(logs.length).toEqual(0);
+  });
 });
diff --git a/packages/core/test/bundling/image-directive/e2e/preconnect-check/preconnect-check.ts b/packages/core/test/bundling/image-directive/e2e/preconnect-check/preconnect-check.ts
index 8d122f7dc1b23..0b2ad08ca770b 100644
--- a/packages/core/test/bundling/image-directive/e2e/preconnect-check/preconnect-check.ts
+++ b/packages/core/test/bundling/image-directive/e2e/preconnect-check/preconnect-check.ts
@@ -18,10 +18,12 @@ import {Component, Inject} from '@angular/core';
     <img ngSrc="/e2e/b.png" width="50" height="50" priority>
     <img ngSrc="/e2e/c.png" width="50" height="50">
   `,
-  providers: [{
-    provide: IMAGE_LOADER,
-    useValue: (config: {src: string}) => `https://angular.io/assets/images/${config.src}`
-  }],
+  providers: [
+    {
+      provide: IMAGE_LOADER,
+      useValue: (config: {src: string}) => `https://angular.io/assets/images/${config.src}`,
+    },
+  ],
 })
 export class PreconnectCheckComponent {
   constructor(@Inject(DOCUMENT) private doc: Document) {
diff --git a/packages/core/test/bundling/image-directive/e2e/start-server.js b/packages/core/test/bundling/image-directive/e2e/start-server.js
index 706091a753cf1..53f5576637a4c 100644
--- a/packages/core/test/bundling/image-directive/e2e/start-server.js
+++ b/packages/core/test/bundling/image-directive/e2e/start-server.js
@@ -13,7 +13,7 @@ const protractor = require('protractor');
  * Helper function to start up a server for testing using Protractor utils.
  * Used as a part of the `protractor_web_test_suite` rule configuration.
  */
-module.exports = async function(config) {
+module.exports = async function (config) {
   const {port} = await protractorUtils.runServer(config.workspace, config.server, '--port', []);
   const serverUrl = `http://localhost:${port}`;
 
diff --git a/packages/core/test/bundling/image-directive/index.ts b/packages/core/test/bundling/image-directive/index.ts
index 61c0d91c2f9b9..4ba515d688891 100644
--- a/packages/core/test/bundling/image-directive/index.ts
+++ b/packages/core/test/bundling/image-directive/index.ts
@@ -12,11 +12,17 @@ import {RouterModule} from '@angular/router';
 
 import {BasicComponent} from './e2e/basic/basic';
 import {FillModeFailingComponent, FillModePassingComponent} from './e2e/fill-mode/fill-mode';
-import {ImageDistortionFailingComponent, ImageDistortionPassingComponent} from './e2e/image-distortion/image-distortion';
+import {
+  ImageDistortionFailingComponent,
+  ImageDistortionPassingComponent,
+} from './e2e/image-distortion/image-distortion';
 import {ImagePerfWarningsLazyComponent} from './e2e/image-perf-warnings-lazy/image-perf-warnings-lazy';
 import {ImagePerfWarningsOversizedComponent} from './e2e/image-perf-warnings-oversized/image-perf-warnings-oversized';
 import {LcpCheckComponent} from './e2e/lcp-check/lcp-check';
-import {OversizedImageComponentFailing, OversizedImageComponentPassing} from './e2e/oversized-image/oversized-image';
+import {
+  OversizedImageComponentFailing,
+  OversizedImageComponentPassing,
+} from './e2e/oversized-image/oversized-image';
 import {PreconnectCheckComponent} from './e2e/preconnect-check/preconnect-check';
 import {PlaygroundComponent} from './playground';
 
@@ -26,8 +32,7 @@ import {PlaygroundComponent} from './playground';
   imports: [RouterModule],
   template: '<router-outlet></router-outlet>',
 })
-export class RootComponent {
-}
+export class RootComponent {}
 
 const ROUTES = [
   // Paths that contain components for test/demo purposes:
@@ -49,7 +54,7 @@ const ROUTES = [
 
 bootstrapApplication(RootComponent, {
   providers: [
-    provideProtractorTestingSupport(),  //
-    importProvidersFrom(RouterModule.forRoot(ROUTES))
+    provideProtractorTestingSupport(), //
+    importProvidersFrom(RouterModule.forRoot(ROUTES)),
   ],
 });
diff --git a/packages/core/test/bundling/image-directive/playground.ts b/packages/core/test/bundling/image-directive/playground.ts
index f0cf7c5a03a22..c44fc9ab46750 100644
--- a/packages/core/test/bundling/image-directive/playground.ts
+++ b/packages/core/test/bundling/image-directive/playground.ts
@@ -11,7 +11,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'basic',
-  styles: [`
+  styles: [
+    `
     h1 {
       display: flex;
       align-items: center;
@@ -31,7 +32,8 @@ import {Component} from '@angular/core';
       width: 100%;
       height: auto;
     }
-  `],
+  `,
+  ],
   template: `
     <h1> 
       <img ngSrc="a.png" width="50" height="50" priority ngSrcset="1x, 2x">
@@ -46,5 +48,4 @@ import {Component} from '@angular/core';
   imports: [NgOptimizedImage],
   providers: [provideImgixLoader('https://aurora-project.imgix.net')],
 })
-export class PlaygroundComponent {
-}
+export class PlaygroundComponent {}
diff --git a/packages/core/test/bundling/injection/bundle.golden_symbols.json b/packages/core/test/bundling/injection/bundle.golden_symbols.json
index a603fd170ab82..28083b2c66477 100644
--- a/packages/core/test/bundling/injection/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/injection/bundle.golden_symbols.json
@@ -74,6 +74,9 @@
   {
     "name": "USE_VALUE"
   },
+  {
+    "name": "_Injector"
+  },
   {
     "name": "__forward_ref__"
   },
diff --git a/packages/core/test/bundling/injection/treeshaking_spec.ts b/packages/core/test/bundling/injection/treeshaking_spec.ts
index 7ffc7afacc340..a0185239832e7 100644
--- a/packages/core/test/bundling/injection/treeshaking_spec.ts
+++ b/packages/core/test/bundling/injection/treeshaking_spec.ts
@@ -9,7 +9,6 @@
 import '@angular/compiler';
 import {INJECTOR, ScopedService} from './usage';
 
-
 describe('functional test for injection system bundling', () => {
   it('should be able to inject the scoped service', () => {
     expect(INJECTOR.get(ScopedService) instanceof ScopedService).toBe(true);
diff --git a/packages/core/test/bundling/injection/usage.ts b/packages/core/test/bundling/injection/usage.ts
index bc79a90866226..dfa84753d4a1c 100644
--- a/packages/core/test/bundling/injection/usage.ts
+++ b/packages/core/test/bundling/injection/usage.ts
@@ -6,7 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵcreateInjector as createInjector, ɵɵdefineInjectable, ɵɵdefineInjector} from '@angular/core';
+import {
+  ɵcreateInjector as createInjector,
+  ɵɵdefineInjectable,
+  ɵɵdefineInjector,
+} from '@angular/core';
 
 export class RootService {
   static ɵprov = ɵɵdefineInjectable({
@@ -25,7 +29,7 @@ export class ScopedService {
 
   doSomething(): void {
     // tslint:disable-next-line:no-console
-    console.log('Ensure this isn\'t tree-shaken.');
+    console.log("Ensure this isn't tree-shaken.");
   }
 }
 
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
index 67af613f89771..319d372835ca4 100644
--- a/packages/core/test/bundling/router/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -764,9 +764,15 @@
   {
     "name": "ZoneStablePendingTask"
   },
+  {
+    "name": "_ComponentFactoryResolver"
+  },
   {
     "name": "_DOM"
   },
+  {
+    "name": "_Injector"
+  },
   {
     "name": "_NullComponentFactoryResolver"
   },
diff --git a/packages/core/test/bundling/router/index.ts b/packages/core/test/bundling/router/index.ts
index c6f9b3a4c14ee..d76bade2955c5 100644
--- a/packages/core/test/bundling/router/index.ts
+++ b/packages/core/test/bundling/router/index.ts
@@ -9,7 +9,15 @@
 import {APP_BASE_HREF} from '@angular/common';
 import {Component, OnInit} from '@angular/core';
 import {bootstrapApplication} from '@angular/platform-browser';
-import {ActivatedRoute, provideRouter, Router, RouterLink, RouterLinkActive, RouterOutlet, Routes} from '@angular/router';
+import {
+  ActivatedRoute,
+  provideRouter,
+  Router,
+  RouterLink,
+  RouterLinkActive,
+  RouterOutlet,
+  Routes,
+} from '@angular/router';
 
 @Component({
   selector: 'app-list',
@@ -23,8 +31,7 @@ import {ActivatedRoute, provideRouter, Router, RouterLink, RouterLinkActive, Rou
   standalone: true,
   imports: [RouterLink, RouterLinkActive],
 })
-class ListComponent {
-}
+class ListComponent {}
 
 @Component({
   selector: 'app-item',
@@ -35,10 +42,13 @@ class ListComponent {
 })
 class ItemComponent implements OnInit {
   id = -1;
-  constructor(private activatedRoute: ActivatedRoute, private router: Router) {}
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private router: Router,
+  ) {}
 
   ngOnInit() {
-    this.activatedRoute.paramMap.subscribe(paramsMap => {
+    this.activatedRoute.paramMap.subscribe((paramsMap) => {
       this.id = +paramsMap.get('id')!;
     });
   }
@@ -54,17 +64,14 @@ class ItemComponent implements OnInit {
   standalone: true,
   imports: [RouterOutlet],
 })
-class RootComponent {
-}
+class RootComponent {}
 
 const ROUTES: Routes = [
-  {path: '', redirectTo: '/list', pathMatch: 'full'}, {path: 'list', component: ListComponent},
-  {path: 'item/:id', component: ItemComponent}
+  {path: '', redirectTo: '/list', pathMatch: 'full'},
+  {path: 'list', component: ListComponent},
+  {path: 'item/:id', component: ItemComponent},
 ];
 
 (window as any).waitForApp = bootstrapApplication(RootComponent, {
-  providers: [
-    provideRouter(ROUTES),
-    {provide: APP_BASE_HREF, useValue: ''},
-  ]
+  providers: [provideRouter(ROUTES), {provide: APP_BASE_HREF, useValue: ''}],
 });
diff --git a/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json b/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json
index 5212c035751e1..5b3d5017331ad 100644
--- a/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json
@@ -401,9 +401,15 @@
   {
     "name": "ZoneStablePendingTask"
   },
+  {
+    "name": "_ComponentFactoryResolver"
+  },
   {
     "name": "_DOM"
   },
+  {
+    "name": "_Injector"
+  },
   {
     "name": "_NullComponentFactoryResolver"
   },
diff --git a/packages/core/test/bundling/standalone_bootstrap/index.ts b/packages/core/test/bundling/standalone_bootstrap/index.ts
index 469a6e6af31ee..4dc772e4640b3 100644
--- a/packages/core/test/bundling/standalone_bootstrap/index.ts
+++ b/packages/core/test/bundling/standalone_bootstrap/index.ts
@@ -14,7 +14,6 @@ import {bootstrapApplication} from '@angular/platform-browser';
   selector: 'hello-world',
   template: 'Hello World!',
 })
-class HelloWorld {
-}
+class HelloWorld {}
 
 bootstrapApplication(HelloWorld);
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
index f8109ea290a93..865f1f37dfe5b 100644
--- a/packages/core/test/bundling/todo/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/todo/bundle.golden_symbols.json
@@ -521,6 +521,9 @@
   {
     "name": "ZoneStablePendingTask"
   },
+  {
+    "name": "_ComponentFactoryResolver"
+  },
   {
     "name": "_DOM"
   },
@@ -530,6 +533,9 @@
   {
     "name": "_DuplicateMap"
   },
+  {
+    "name": "_Injector"
+  },
   {
     "name": "_NullComponentFactoryResolver"
   },
diff --git a/packages/core/test/bundling/todo/index.ts b/packages/core/test/bundling/todo/index.ts
index 7815d24d45621..35244f8a8ad1e 100644
--- a/packages/core/test/bundling/todo/index.ts
+++ b/packages/core/test/bundling/todo/index.ts
@@ -21,7 +21,10 @@ class Todo {
     this._title = value.trim();
   }
 
-  constructor(title: string, public completed: boolean = false) {
+  constructor(
+    title: string,
+    public completed: boolean = false,
+  ) {
     this.editing = false;
     this.title = title;
   }
@@ -46,7 +49,7 @@ class TodoStore {
   }
 
   setAllTo(completed: boolean) {
-    this.todos.forEach((t: Todo) => t.completed = completed);
+    this.todos.forEach((t: Todo) => (t.completed = completed));
   }
 
   removeCompleted() {
@@ -77,13 +80,15 @@ class TodoStore {
 @Component({
   selector: 'todo-app',
   // TODO(misko): make this work with `[(ngModel)]`
-  styles: [`
+  styles: [
+    `
     .todo-list li.completed label {
       color: #d9d9d9;
       text-decoration: line-through;
       font-weight:bold;
     }
-  `],
+  `,
+  ],
   template: `
   <section class="todoapp">
     <header class="header">
diff --git a/packages/core/test/bundling/todo/todo_e2e_spec.ts b/packages/core/test/bundling/todo/todo_e2e_spec.ts
index 84c7b44a83df1..f7a3d07449cf0 100644
--- a/packages/core/test/bundling/todo/todo_e2e_spec.ts
+++ b/packages/core/test/bundling/todo/todo_e2e_spec.ts
@@ -15,22 +15,23 @@ const PACKAGE = 'angular/packages/core/test/bundling/todo';
 const BUNDLES = ['bundle.js', 'bundle.debug.min.js', 'bundle.min.js'];
 
 describe('functional test for todo', () => {
-  BUNDLES.forEach(bundle => {
+  BUNDLES.forEach((bundle) => {
     describe(bundle, () => {
-      it('should place styles on the elements within the component',
-         withBody('<todo-app></todo-app>', async () => {
-           // load the bundle
-           await import(path.join(PACKAGE, bundle));
-           // the bundle attaches the following fields to the `window` global.
-           const {bootstrapApp} = window as any;
-
-           await bootstrapApp();
-
-           const styleContent =
-               findStyleTextForSelector('.todo-list\\\[_ngcontent-[a-z]+-\\\w+\\\]');
-           expect(styleContent).toMatch(/font-weight:\s*bold;/);
-           expect(styleContent).toMatch(/color:\s*#d9d9d9;/);
-         }));
+      it(
+        'should place styles on the elements within the component',
+        withBody('<todo-app></todo-app>', async () => {
+          // load the bundle
+          await import(path.join(PACKAGE, bundle));
+          // the bundle attaches the following fields to the `window` global.
+          const {bootstrapApp} = window as any;
+
+          await bootstrapApp();
+
+          const styleContent = findStyleTextForSelector('.todo-list\\[_ngcontent-[a-z]+-\\w+\\]');
+          expect(styleContent).toMatch(/font-weight:\s*bold;/);
+          expect(styleContent).toMatch(/color:\s*#d9d9d9;/);
+        }),
+      );
     });
   });
 });
diff --git a/packages/core/test/bundling/todo_i18n/index.ts b/packages/core/test/bundling/todo_i18n/index.ts
index d9d5f8088e120..79b64322d3222 100644
--- a/packages/core/test/bundling/todo_i18n/index.ts
+++ b/packages/core/test/bundling/todo_i18n/index.ts
@@ -22,7 +22,10 @@ class Todo {
     this._title = value.trim();
   }
 
-  constructor(private _title: string, public completed: boolean = false) {
+  constructor(
+    private _title: string,
+    public completed: boolean = false,
+  ) {
     this.editing = false;
   }
 }
@@ -47,7 +50,7 @@ class TodoStore {
   }
 
   setAllTo(completed: boolean) {
-    this.todos.forEach((t: Todo) => t.completed = completed);
+    this.todos.forEach((t: Todo) => (t.completed = completed));
   }
 
   removeCompleted() {
@@ -129,7 +132,10 @@ class TodoStore {
 class ToDoAppComponent {
   newTodoText = '';
 
-  constructor(public todoStore: TodoStore, private readonly cdr: ChangeDetectorRef) {
+  constructor(
+    public todoStore: TodoStore,
+    private readonly cdr: ChangeDetectorRef,
+  ) {
     (window as any).todoAppComponent = this;
   }
 
@@ -198,8 +204,7 @@ class ToDoAppComponent {
   imports: [BrowserModule],
   bootstrap: [ToDoAppComponent],
 })
-class ToDoAppModule {
-}
+class ToDoAppModule {}
 
 loadTranslations(translations);
 
diff --git a/packages/core/test/bundling/todo_i18n/todo_e2e_spec.ts b/packages/core/test/bundling/todo_i18n/todo_e2e_spec.ts
index 91f5626767a13..8f822f80e19a3 100644
--- a/packages/core/test/bundling/todo_i18n/todo_e2e_spec.ts
+++ b/packages/core/test/bundling/todo_i18n/todo_e2e_spec.ts
@@ -16,24 +16,28 @@ const PACKAGE = 'angular/packages/core/test/bundling/todo_i18n';
 const BUNDLES = ['bundle.js', 'bundle.debug.min.js', 'bundle.min.js'];
 
 describe('functional test for todo i18n', () => {
-  BUNDLES.forEach(bundle => {
+  BUNDLES.forEach((bundle) => {
     describe(bundle, () => {
-      it('should render todo i18n', withBody('<todo-app></todo-app>', async () => {
-           clearTranslations();
-           // load the bundle
-           await import(path.join(PACKAGE, bundle));
-           // the bundle attaches the following fields to the `window` global.
-           const {appReady} = window as any;
-           await appReady;
-           expect(document.body.textContent).toContain('liste de tâches');
-           expect(document.body.textContent).toContain('Démontrer les components');
-           expect(document.body.textContent).toContain('Démontrer NgModules');
-           expect(document.body.textContent).toContain('4 tâches restantes');
-           expect(document.querySelector('.new-todo')!.getAttribute('placeholder'))
-               .toEqual(`Qu'y a-t-il à faire ?`);
-           document.querySelector('button')!.click();
-           expect(document.body.textContent).toContain('3 tâches restantes');
-         }));
+      it(
+        'should render todo i18n',
+        withBody('<todo-app></todo-app>', async () => {
+          clearTranslations();
+          // load the bundle
+          await import(path.join(PACKAGE, bundle));
+          // the bundle attaches the following fields to the `window` global.
+          const {appReady} = window as any;
+          await appReady;
+          expect(document.body.textContent).toContain('liste de tâches');
+          expect(document.body.textContent).toContain('Démontrer les components');
+          expect(document.body.textContent).toContain('Démontrer NgModules');
+          expect(document.body.textContent).toContain('4 tâches restantes');
+          expect(document.querySelector('.new-todo')!.getAttribute('placeholder')).toEqual(
+            `Qu'y a-t-il à faire ?`,
+          );
+          document.querySelector('button')!.click();
+          expect(document.body.textContent).toContain('3 tâches restantes');
+        }),
+      );
     });
   });
 });
diff --git a/packages/core/test/bundling/todo_i18n/translations.ts b/packages/core/test/bundling/todo_i18n/translations.ts
index f7fc39734a258..61476cf9523c5 100644
--- a/packages/core/test/bundling/todo_i18n/translations.ts
+++ b/packages/core/test/bundling/todo_i18n/translations.ts
@@ -14,16 +14,16 @@ import {computeMsgId} from '@angular/compiler';
 export const translations = {
   [computeMsgId('What needs to be done?', '')]: `Qu'y a-t-il à faire ?`,
   [computeMsgId('{$START_HEADING_LEVEL1}todos{$CLOSE_HEADING_LEVEL1}{$TAG_INPUT}', '')]:
-      '{$START_HEADING_LEVEL1}liste de tâches{$CLOSE_HEADING_LEVEL1}{$TAG_INPUT}',
+    '{$START_HEADING_LEVEL1}liste de tâches{$CLOSE_HEADING_LEVEL1}{$TAG_INPUT}',
   [computeMsgId('{VAR_PLURAL, plural, =1 {item left} other {items left}}', '')]:
-      '{VAR_PLURAL, plural, =1 {tâche restante} other {tâches restantes}}',
+    '{VAR_PLURAL, plural, =1 {tâche restante} other {tâches restantes}}',
   [computeMsgId('{$START_TAG_STRONG}{$INTERPOLATION}{$CLOSE_TAG_STRONG}{$ICU}', '')]:
-      '{$START_TAG_STRONG}{$INTERPOLATION}{$CLOSE_TAG_STRONG} {$ICU}',
+    '{$START_TAG_STRONG}{$INTERPOLATION}{$CLOSE_TAG_STRONG} {$ICU}',
   [computeMsgId('Clear Completed', '')]: ' Effacer terminés ',
   [computeMsgId('Demonstrate Components', '')]: ' Démontrer les components',
   [computeMsgId('Demonstrate Structural Directives', '')]: 'Démontrer les directives structurelles',
   [computeMsgId('Demonstrate {$value}', '')]: 'Démontrer {$value}',
   [computeMsgId('Demonstrate zoneless change detection', '')]:
-      'Démontrer la détection des changements sans zonejs',
-  [computeMsgId('Demonstrate internationalization', '')]: `Démontrer l'internationalisation`
+    'Démontrer la détection des changements sans zonejs',
+  [computeMsgId('Demonstrate internationalization', '')]: `Démontrer l'internationalisation`,
 };
diff --git a/packages/core/test/change_detection/differs/default_iterable_differ_spec.ts b/packages/core/test/change_detection/differs/default_iterable_differ_spec.ts
index ed0c253705bd7..669ba2d595ec3 100644
--- a/packages/core/test/change_detection/differs/default_iterable_differ_spec.ts
+++ b/packages/core/test/change_detection/differs/default_iterable_differ_spec.ts
@@ -6,7 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {DefaultIterableDiffer, DefaultIterableDifferFactory} from '@angular/core/src/change_detection/differs/default_iterable_differ';
+import {
+  DefaultIterableDiffer,
+  DefaultIterableDifferFactory,
+} from '@angular/core/src/change_detection/differs/default_iterable_differ';
 
 import {TestIterable} from '../../util/iterable';
 import {iterableChangesAsString, iterableDifferToString} from '../util';
@@ -20,7 +23,10 @@ class ItemWithId {
 }
 
 class ComplexItem {
-  constructor(private id: string, private color: string) {}
+  constructor(
+    private id: string,
+    private color: string,
+  ) {}
 
   toString() {
     return `{id: ${this.id}, color: ${this.color}}`;
@@ -28,8 +34,8 @@ class ComplexItem {
 }
 
 // TODO(vicb): UnmodifiableListView / frozen object when implemented
-describe('iterable differ', function() {
-  describe('DefaultIterableDiffer', function() {
+describe('iterable differ', function () {
+  describe('DefaultIterableDiffer', function () {
     let differ: DefaultIterableDiffer<any>;
 
     beforeEach(() => {
@@ -52,18 +58,20 @@ describe('iterable differ', function() {
 
       l.list = [1];
       differ.check(l);
-      expect(iterableDifferToString(differ))
-          .toEqual(
-              iterableChangesAsString({collection: ['1[null->0]'], additions: ['1[null->0]']}));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({collection: ['1[null->0]'], additions: ['1[null->0]']}),
+      );
 
       l.list = [2, 1];
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['2[null->0]', '1[0->1]'],
-        previous: ['1[0->1]'],
-        additions: ['2[null->0]'],
-        moves: ['1[0->1]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['2[null->0]', '1[0->1]'],
+          previous: ['1[0->1]'],
+          additions: ['2[null->0]'],
+          moves: ['1[0->1]'],
+        }),
+      );
     });
 
     it('should detect additions', () => {
@@ -73,15 +81,19 @@ describe('iterable differ', function() {
 
       l.push('a');
       differ.check(l);
-      expect(iterableDifferToString(differ))
-          .toEqual(
-              iterableChangesAsString({collection: ['a[null->0]'], additions: ['a[null->0]']}));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({collection: ['a[null->0]'], additions: ['a[null->0]']}),
+      );
 
       l.push('b');
       differ.check(l);
-      expect(iterableDifferToString(differ))
-          .toEqual(iterableChangesAsString(
-              {collection: ['a', 'b[null->1]'], previous: ['a'], additions: ['b[null->1]']}));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['a', 'b[null->1]'],
+          previous: ['a'],
+          additions: ['b[null->1]'],
+        }),
+      );
     });
 
     it('should support changing the reference', () => {
@@ -90,21 +102,25 @@ describe('iterable differ', function() {
 
       l = [1, 0];
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['1[null->0]', '0[0->1]'],
-        previous: ['0[0->1]'],
-        additions: ['1[null->0]'],
-        moves: ['0[0->1]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['1[null->0]', '0[0->1]'],
+          previous: ['0[0->1]'],
+          additions: ['1[null->0]'],
+          moves: ['0[0->1]'],
+        }),
+      );
 
       l = [2, 1, 0];
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['2[null->0]', '1[0->1]', '0[1->2]'],
-        previous: ['1[0->1]', '0[1->2]'],
-        additions: ['2[null->0]'],
-        moves: ['1[0->1]', '0[1->2]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['2[null->0]', '1[0->1]', '0[1->2]'],
+          previous: ['1[0->1]', '0[1->2]'],
+          additions: ['2[null->0]'],
+          moves: ['1[0->1]', '0[1->2]'],
+        }),
+      );
     });
 
     it('should handle swapping element', () => {
@@ -115,11 +131,13 @@ describe('iterable differ', function() {
       l.push(2);
       l.push(1);
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['2[1->0]', '1[0->1]'],
-        previous: ['1[0->1]', '2[1->0]'],
-        moves: ['2[1->0]', '1[0->1]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['2[1->0]', '1[0->1]'],
+          previous: ['1[0->1]', '2[1->0]'],
+          moves: ['2[1->0]', '1[0->1]'],
+        }),
+      );
     });
 
     it('should handle incremental swapping element', () => {
@@ -129,20 +147,24 @@ describe('iterable differ', function() {
       l.splice(1, 1);
       l.splice(0, 0, 'b');
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['b[1->0]', 'a[0->1]', 'c'],
-        previous: ['a[0->1]', 'b[1->0]', 'c'],
-        moves: ['b[1->0]', 'a[0->1]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['b[1->0]', 'a[0->1]', 'c'],
+          previous: ['a[0->1]', 'b[1->0]', 'c'],
+          moves: ['b[1->0]', 'a[0->1]'],
+        }),
+      );
 
       l.splice(1, 1);
       l.push('a');
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['b', 'c[2->1]', 'a[1->2]'],
-        previous: ['b', 'a[1->2]', 'c[2->1]'],
-        moves: ['c[2->1]', 'a[1->2]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['b', 'c[2->1]', 'a[1->2]'],
+          previous: ['b', 'a[1->2]', 'c[2->1]'],
+          moves: ['c[2->1]', 'a[1->2]'],
+        }),
+      );
     });
 
     it('should detect changes in list', () => {
@@ -151,33 +173,41 @@ describe('iterable differ', function() {
 
       l.push('a');
       differ.check(l);
-      expect(iterableDifferToString(differ))
-          .toEqual(
-              iterableChangesAsString({collection: ['a[null->0]'], additions: ['a[null->0]']}));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({collection: ['a[null->0]'], additions: ['a[null->0]']}),
+      );
 
       l.push('b');
       differ.check(l);
-      expect(iterableDifferToString(differ))
-          .toEqual(iterableChangesAsString(
-              {collection: ['a', 'b[null->1]'], previous: ['a'], additions: ['b[null->1]']}));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['a', 'b[null->1]'],
+          previous: ['a'],
+          additions: ['b[null->1]'],
+        }),
+      );
 
       l.push('c');
       l.push('d');
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['a', 'b', 'c[null->2]', 'd[null->3]'],
-        previous: ['a', 'b'],
-        additions: ['c[null->2]', 'd[null->3]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['a', 'b', 'c[null->2]', 'd[null->3]'],
+          previous: ['a', 'b'],
+          additions: ['c[null->2]', 'd[null->3]'],
+        }),
+      );
 
       l.splice(2, 1);
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['a', 'b', 'd[3->2]'],
-        previous: ['a', 'b', 'c[2->null]', 'd[3->2]'],
-        moves: ['d[3->2]'],
-        removals: ['c[2->null]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['a', 'b', 'd[3->2]'],
+          previous: ['a', 'b', 'c[2->null]', 'd[3->2]'],
+          moves: ['d[3->2]'],
+          removals: ['c[2->null]'],
+        }),
+      );
 
       l.length = 0;
       l.push('d');
@@ -185,20 +215,23 @@ describe('iterable differ', function() {
       l.push('b');
       l.push('a');
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['d[2->0]', 'c[null->1]', 'b[1->2]', 'a[0->3]'],
-        previous: ['a[0->3]', 'b[1->2]', 'd[2->0]'],
-        additions: ['c[null->1]'],
-        moves: ['d[2->0]', 'b[1->2]', 'a[0->3]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['d[2->0]', 'c[null->1]', 'b[1->2]', 'a[0->3]'],
+          previous: ['a[0->3]', 'b[1->2]', 'd[2->0]'],
+          additions: ['c[null->1]'],
+          moves: ['d[2->0]', 'b[1->2]', 'a[0->3]'],
+        }),
+      );
     });
 
     it('should ignore [NaN] != [NaN]', () => {
       const l = [NaN];
       differ.check(l);
       differ.check(l);
-      expect(iterableDifferToString(differ))
-          .toEqual(iterableChangesAsString({collection: [NaN], previous: [NaN]}));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({collection: [NaN], previous: [NaN]}),
+      );
     });
 
     it('should detect [NaN] moves', () => {
@@ -207,12 +240,14 @@ describe('iterable differ', function() {
 
       l.unshift('foo');
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['foo[null->0]', 'NaN[0->1]', 'NaN[1->2]'],
-        previous: ['NaN[0->1]', 'NaN[1->2]'],
-        additions: ['foo[null->0]'],
-        moves: ['NaN[0->1]', 'NaN[1->2]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['foo[null->0]', 'NaN[0->1]', 'NaN[1->2]'],
+          previous: ['NaN[0->1]', 'NaN[1->2]'],
+          additions: ['foo[null->0]'],
+          moves: ['NaN[0->1]', 'NaN[1->2]'],
+        }),
+      );
     });
 
     it('should remove and add same item', () => {
@@ -221,36 +256,41 @@ describe('iterable differ', function() {
 
       l.splice(1, 1);
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['a', 'c[2->1]'],
-        previous: ['a', 'b[1->null]', 'c[2->1]'],
-        moves: ['c[2->1]'],
-        removals: ['b[1->null]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['a', 'c[2->1]'],
+          previous: ['a', 'b[1->null]', 'c[2->1]'],
+          moves: ['c[2->1]'],
+          removals: ['b[1->null]'],
+        }),
+      );
 
       l.splice(1, 0, 'b');
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['a', 'b[null->1]', 'c[1->2]'],
-        previous: ['a', 'c[1->2]'],
-        additions: ['b[null->1]'],
-        moves: ['c[1->2]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['a', 'b[null->1]', 'c[1->2]'],
+          previous: ['a', 'c[1->2]'],
+          additions: ['b[null->1]'],
+          moves: ['c[1->2]'],
+        }),
+      );
     });
 
-
     it('should support duplicates', () => {
       const l = ['a', 'a', 'a', 'b', 'b'];
       differ.check(l);
 
       l.splice(0, 1);
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['a', 'a', 'b[3->2]', 'b[4->3]'],
-        previous: ['a', 'a', 'a[2->null]', 'b[3->2]', 'b[4->3]'],
-        moves: ['b[3->2]', 'b[4->3]'],
-        removals: ['a[2->null]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['a', 'a', 'b[3->2]', 'b[4->3]'],
+          previous: ['a', 'a', 'a[2->null]', 'b[3->2]', 'b[4->3]'],
+          moves: ['b[3->2]', 'b[4->3]'],
+          removals: ['a[2->null]'],
+        }),
+      );
     });
 
     it('should support insertions/moves', () => {
@@ -259,12 +299,14 @@ describe('iterable differ', function() {
 
       l.splice(0, 0, 'b');
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['b[2->0]', 'a[0->1]', 'a[1->2]', 'b', 'b[null->4]'],
-        previous: ['a[0->1]', 'a[1->2]', 'b[2->0]', 'b'],
-        additions: ['b[null->4]'],
-        moves: ['b[2->0]', 'a[0->1]', 'a[1->2]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['b[2->0]', 'a[0->1]', 'a[1->2]', 'b', 'b[null->4]'],
+          previous: ['a[0->1]', 'a[1->2]', 'b[2->0]', 'b'],
+          additions: ['b[null->4]'],
+          moves: ['b[2->0]', 'a[0->1]', 'a[1->2]'],
+        }),
+      );
     });
 
     it('should not report unnecessary moves', () => {
@@ -276,11 +318,13 @@ describe('iterable differ', function() {
       l.push('a');
       l.push('c');
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['b[1->0]', 'a[0->1]', 'c'],
-        previous: ['a[0->1]', 'b[1->0]', 'c'],
-        moves: ['b[1->0]', 'a[0->1]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['b[1->0]', 'a[0->1]', 'c'],
+          previous: ['a[0->1]', 'b[1->0]', 'c'],
+          moves: ['b[1->0]', 'a[0->1]'],
+        }),
+      );
     });
 
     // https://github.com/angular/angular/issues/17852
@@ -290,18 +334,24 @@ describe('iterable differ', function() {
       l[1] = 'b';
       l[5] = 'c';
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['a', 'b[null->1]', '*[1->2]', 'd', '-', 'c[null->5]', '-[5->6]', 'e'],
-        previous: ['a', '*[1->2]', '*[2->null]', 'd', '-', '-[5->6]', '-[6->null]', 'e'],
-        additions: ['b[null->1]', 'c[null->5]'],
-        moves: ['*[1->2]', '-[5->6]'],
-        removals: ['*[2->null]', '-[6->null]'],
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['a', 'b[null->1]', '*[1->2]', 'd', '-', 'c[null->5]', '-[5->6]', 'e'],
+          previous: ['a', '*[1->2]', '*[2->null]', 'd', '-', '-[5->6]', '-[6->null]', 'e'],
+          additions: ['b[null->1]', 'c[null->5]'],
+          moves: ['*[1->2]', '-[5->6]'],
+          removals: ['*[2->null]', '-[6->null]'],
+        }),
+      );
     });
 
     describe('forEachOperation', () => {
       function stringifyItemChange(
-          record: any, p: number|null, c: number|null, originalIndex: number) {
+        record: any,
+        p: number | null,
+        c: number | null,
+        originalIndex: number,
+      ) {
         const suffix = originalIndex == null ? '' : ' [o=' + originalIndex + ']';
         const value = record.item;
         if (record.currentIndex == null) {
@@ -314,7 +364,11 @@ describe('iterable differ', function() {
       }
 
       function modifyArrayUsingOperation(
-          arr: number[], endData: any[], prev: number|null, next: number|null) {
+        arr: number[],
+        endData: any[],
+        prev: number | null,
+        next: number | null,
+      ) {
         let value: number = null!;
         if (prev == null) {
           // "next" index is guaranteed to be set since the previous index is
@@ -332,49 +386,53 @@ describe('iterable differ', function() {
         return value;
       }
 
-      it('should trigger a series of insert/move/remove changes for inputs that have been diffed',
-         () => {
-           const startData = [0, 1, 2, 3, 4, 5];
-           const endData = [6, 2, 7, 0, 4, 8];
+      it('should trigger a series of insert/move/remove changes for inputs that have been diffed', () => {
+        const startData = [0, 1, 2, 3, 4, 5];
+        const endData = [6, 2, 7, 0, 4, 8];
 
-           differ = differ.diff(startData)!;
-           differ = differ.diff(endData)!;
+        differ = differ.diff(startData)!;
+        differ = differ.diff(endData)!;
 
-           const operations: string[] = [];
-           differ.forEachOperation((item: any, prev: number|null, next: number|null) => {
-             const value = modifyArrayUsingOperation(startData, endData, prev, next);
-             operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
-           });
+        const operations: string[] = [];
+        differ.forEachOperation((item: any, prev: number | null, next: number | null) => {
+          const value = modifyArrayUsingOperation(startData, endData, prev, next);
+          operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
+        });
 
-           expect(operations).toEqual([
-             'INSERT 6 (VOID -> 0)', 'MOVE 2 (3 -> 1) [o=2]', 'INSERT 7 (VOID -> 2)',
-             'REMOVE 1 (4 -> VOID) [o=1]', 'REMOVE 3 (4 -> VOID) [o=3]',
-             'REMOVE 5 (5 -> VOID) [o=5]', 'INSERT 8 (VOID -> 5)'
-           ]);
+        expect(operations).toEqual([
+          'INSERT 6 (VOID -> 0)',
+          'MOVE 2 (3 -> 1) [o=2]',
+          'INSERT 7 (VOID -> 2)',
+          'REMOVE 1 (4 -> VOID) [o=1]',
+          'REMOVE 3 (4 -> VOID) [o=3]',
+          'REMOVE 5 (5 -> VOID) [o=5]',
+          'INSERT 8 (VOID -> 5)',
+        ]);
 
-           expect(startData).toEqual(endData);
-         });
+        expect(startData).toEqual(endData);
+      });
 
-      it('should consider inserting/removing/moving items with respect to items that have not moved at all',
-         () => {
-           const startData = [0, 1, 2, 3];
-           const endData = [2, 1];
+      it('should consider inserting/removing/moving items with respect to items that have not moved at all', () => {
+        const startData = [0, 1, 2, 3];
+        const endData = [2, 1];
 
-           differ = differ.diff(startData)!;
-           differ = differ.diff(endData)!;
+        differ = differ.diff(startData)!;
+        differ = differ.diff(endData)!;
 
-           const operations: string[] = [];
-           differ.forEachOperation((item: any, prev: number|null, next: number|null) => {
-             modifyArrayUsingOperation(startData, endData, prev, next);
-             operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
-           });
+        const operations: string[] = [];
+        differ.forEachOperation((item: any, prev: number | null, next: number | null) => {
+          modifyArrayUsingOperation(startData, endData, prev, next);
+          operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
+        });
 
-           expect(operations).toEqual([
-             'REMOVE 0 (0 -> VOID) [o=0]', 'MOVE 2 (1 -> 0) [o=2]', 'REMOVE 3 (2 -> VOID) [o=3]'
-           ]);
+        expect(operations).toEqual([
+          'REMOVE 0 (0 -> VOID) [o=0]',
+          'MOVE 2 (1 -> 0) [o=2]',
+          'REMOVE 3 (2 -> VOID) [o=3]',
+        ]);
 
-           expect(startData).toEqual(endData);
-         });
+        expect(startData).toEqual(endData);
+      });
 
       it('should be able to manage operations within a criss/cross of move operations', () => {
         const startData = [1, 2, 3, 4, 5, 6];
@@ -384,14 +442,17 @@ describe('iterable differ', function() {
         differ = differ.diff(endData)!;
 
         const operations: string[] = [];
-        differ.forEachOperation((item: any, prev: number|null, next: number|null) => {
+        differ.forEachOperation((item: any, prev: number | null, next: number | null) => {
           modifyArrayUsingOperation(startData, endData, prev, next);
           operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
         });
 
         expect(operations).toEqual([
-          'MOVE 3 (2 -> 0) [o=2]', 'MOVE 6 (5 -> 1) [o=5]', 'MOVE 4 (4 -> 2) [o=3]',
-          'INSERT 9 (VOID -> 3)', 'REMOVE 5 (6 -> VOID) [o=4]'
+          'MOVE 3 (2 -> 0) [o=2]',
+          'MOVE 6 (5 -> 1) [o=5]',
+          'MOVE 4 (4 -> 2) [o=3]',
+          'INSERT 9 (VOID -> 3)',
+          'REMOVE 5 (6 -> VOID) [o=4]',
         ]);
 
         expect(startData).toEqual(endData);
@@ -405,14 +466,17 @@ describe('iterable differ', function() {
         differ = differ.diff(endData)!;
 
         const operations: string[] = [];
-        differ.forEachOperation((item: any, prev: number|null, next: number|null) => {
+        differ.forEachOperation((item: any, prev: number | null, next: number | null) => {
           modifyArrayUsingOperation(startData, endData, prev, next);
           operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
         });
 
         expect(operations).toEqual([
-          'MOVE 4 (4 -> 0) [o=4]', 'MOVE 1 (2 -> 1) [o=1]', 'MOVE 2 (3 -> 2) [o=2]',
-          'MOVE 3 (4 -> 3) [o=3]', 'INSERT 5 (VOID -> 5)'
+          'MOVE 4 (4 -> 0) [o=4]',
+          'MOVE 1 (2 -> 1) [o=1]',
+          'MOVE 2 (3 -> 2) [o=2]',
+          'MOVE 3 (4 -> 3) [o=3]',
+          'INSERT 5 (VOID -> 5)',
         ]);
 
         expect(startData).toEqual(endData);
@@ -426,39 +490,44 @@ describe('iterable differ', function() {
         differ = differ.diff(endData)!;
 
         const operations: string[] = [];
-        differ.forEachOperation((item: any, prev: number|null, next: number|null) => {
+        differ.forEachOperation((item: any, prev: number | null, next: number | null) => {
           modifyArrayUsingOperation(startData, endData, prev, next);
           operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
         });
 
         expect(operations).toEqual([
-          'MOVE 10 (10 -> 0) [o=10]', 'MOVE 11 (11 -> 1) [o=11]', 'MOVE 1 (3 -> 2) [o=1]',
-          'MOVE 5 (7 -> 3) [o=5]', 'MOVE 7 (9 -> 4) [o=7]', 'MOVE 8 (10 -> 5) [o=8]',
-          'REMOVE 2 (7 -> VOID) [o=2]', 'INSERT 5 (VOID -> 7)', 'REMOVE 4 (9 -> VOID) [o=4]',
-          'REMOVE 9 (10 -> VOID) [o=9]'
+          'MOVE 10 (10 -> 0) [o=10]',
+          'MOVE 11 (11 -> 1) [o=11]',
+          'MOVE 1 (3 -> 2) [o=1]',
+          'MOVE 5 (7 -> 3) [o=5]',
+          'MOVE 7 (9 -> 4) [o=7]',
+          'MOVE 8 (10 -> 5) [o=8]',
+          'REMOVE 2 (7 -> VOID) [o=2]',
+          'INSERT 5 (VOID -> 7)',
+          'REMOVE 4 (9 -> VOID) [o=4]',
+          'REMOVE 9 (10 -> VOID) [o=9]',
         ]);
 
         expect(startData).toEqual(endData);
       });
 
-      it('should trigger nothing when the list is completely full of replaced items that are tracked by the index',
-         () => {
-           differ = new DefaultIterableDiffer((index: number) => index);
+      it('should trigger nothing when the list is completely full of replaced items that are tracked by the index', () => {
+        differ = new DefaultIterableDiffer((index: number) => index);
 
-           const startData = [1, 2, 3, 4];
-           const endData = [5, 6, 7, 8];
+        const startData = [1, 2, 3, 4];
+        const endData = [5, 6, 7, 8];
 
-           differ = differ.diff(startData)!;
-           differ = differ.diff(endData)!;
+        differ = differ.diff(startData)!;
+        differ = differ.diff(endData)!;
 
-           const operations: string[] = [];
-           differ.forEachOperation((item: any, prev: number|null, next: number|null) => {
-             const value = modifyArrayUsingOperation(startData, endData, prev, next);
-             operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
-           });
+        const operations: string[] = [];
+        differ.forEachOperation((item: any, prev: number | null, next: number | null) => {
+          const value = modifyArrayUsingOperation(startData, endData, prev, next);
+          operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
+        });
 
-           expect(operations).toEqual([]);
-         });
+        expect(operations).toEqual([]);
+      });
     });
 
     describe('diff', () => {
@@ -473,10 +542,12 @@ describe('iterable differ', function() {
 
       it('should treat null as an empty list', () => {
         differ.diff(['a', 'b']);
-        expect(iterableDifferToString(differ.diff(null!)!)).toEqual(iterableChangesAsString({
-          previous: ['a[0->null]', 'b[1->null]'],
-          removals: ['a[0->null]', 'b[1->null]']
-        }));
+        expect(iterableDifferToString(differ.diff(null!)!)).toEqual(
+          iterableChangesAsString({
+            previous: ['a[0->null]', 'b[1->null]'],
+            removals: ['a[0->null]', 'b[1->null]'],
+          }),
+        );
       });
 
       it('should throw when given an invalid collection', () => {
@@ -485,7 +556,7 @@ describe('iterable differ', function() {
     });
   });
 
-  describe('trackBy function by id', function() {
+  describe('trackBy function by id', function () {
     let differ: any;
 
     const trackByItemId = (index: number, item: any): any => item.id;
@@ -504,18 +575,22 @@ describe('iterable differ', function() {
     it('should treat seen records as identity changes, not additions', () => {
       let l = buildItemList(['a', 'b', 'c']);
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: [`{id: a}[null->0]`, `{id: b}[null->1]`, `{id: c}[null->2]`],
-        additions: [`{id: a}[null->0]`, `{id: b}[null->1]`, `{id: c}[null->2]`]
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: [`{id: a}[null->0]`, `{id: b}[null->1]`, `{id: c}[null->2]`],
+          additions: [`{id: a}[null->0]`, `{id: b}[null->1]`, `{id: c}[null->2]`],
+        }),
+      );
 
       l = buildItemList(['a', 'b', 'c']);
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: [`{id: a}`, `{id: b}`, `{id: c}`],
-        identityChanges: [`{id: a}`, `{id: b}`, `{id: c}`],
-        previous: [`{id: a}`, `{id: b}`, `{id: c}`]
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: [`{id: a}`, `{id: b}`, `{id: c}`],
+          identityChanges: [`{id: a}`, `{id: b}`, `{id: c}`],
+          previous: [`{id: a}`, `{id: b}`, `{id: c}`],
+        }),
+      );
     });
 
     it('should have updated properties in identity change collection', () => {
@@ -524,11 +599,13 @@ describe('iterable differ', function() {
 
       l = [new ComplexItem('a', 'orange'), new ComplexItem('b', 'red')];
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: [`{id: a, color: orange}`, `{id: b, color: red}`],
-        identityChanges: [`{id: a, color: orange}`, `{id: b, color: red}`],
-        previous: [`{id: a, color: orange}`, `{id: b, color: red}`]
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: [`{id: a, color: orange}`, `{id: b, color: red}`],
+          identityChanges: [`{id: a, color: orange}`, `{id: b, color: red}`],
+          previous: [`{id: a, color: orange}`, `{id: b, color: red}`],
+        }),
+      );
     });
 
     it('should track moves normally', () => {
@@ -537,12 +614,14 @@ describe('iterable differ', function() {
 
       l = buildItemList(['b', 'a', 'c']);
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['{id: b}[1->0]', '{id: a}[0->1]', '{id: c}'],
-        identityChanges: ['{id: b}[1->0]', '{id: a}[0->1]', '{id: c}'],
-        previous: ['{id: a}[0->1]', '{id: b}[1->0]', '{id: c}'],
-        moves: ['{id: b}[1->0]', '{id: a}[0->1]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['{id: b}[1->0]', '{id: a}[0->1]', '{id: c}'],
+          identityChanges: ['{id: b}[1->0]', '{id: a}[0->1]', '{id: c}'],
+          previous: ['{id: a}[0->1]', '{id: b}[1->0]', '{id: c}'],
+          moves: ['{id: b}[1->0]', '{id: a}[0->1]'],
+        }),
+      );
     });
 
     it('should track duplicate reinsertion normally', () => {
@@ -551,13 +630,15 @@ describe('iterable differ', function() {
 
       l = buildItemList(['b', 'a', 'a']);
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['{id: b}[null->0]', '{id: a}[0->1]', '{id: a}[1->2]'],
-        identityChanges: ['{id: a}[0->1]', '{id: a}[1->2]'],
-        previous: ['{id: a}[0->1]', '{id: a}[1->2]'],
-        moves: ['{id: a}[0->1]', '{id: a}[1->2]'],
-        additions: ['{id: b}[null->0]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['{id: b}[null->0]', '{id: a}[0->1]', '{id: a}[1->2]'],
+          identityChanges: ['{id: a}[0->1]', '{id: a}[1->2]'],
+          previous: ['{id: a}[0->1]', '{id: a}[1->2]'],
+          moves: ['{id: a}[0->1]', '{id: a}[1->2]'],
+          additions: ['{id: b}[null->0]'],
+        }),
+      );
     });
 
     it('should keep the order of duplicates', () => {
@@ -577,21 +658,29 @@ describe('iterable differ', function() {
       ];
       differ.check(l2);
 
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: [
-          '{id: b, color: yellow}[1->0]', '{id: a, color: blue}[0->1]', '{id: c, color: orange}',
-          '{id: a, color: red}'
-        ],
-        identityChanges: [
-          '{id: b, color: yellow}[1->0]', '{id: a, color: blue}[0->1]', '{id: c, color: orange}',
-          '{id: a, color: red}'
-        ],
-        previous: [
-          '{id: a, color: blue}[0->1]', '{id: b, color: yellow}[1->0]', '{id: c, color: orange}',
-          '{id: a, color: red}'
-        ],
-        moves: ['{id: b, color: yellow}[1->0]', '{id: a, color: blue}[0->1]'],
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: [
+            '{id: b, color: yellow}[1->0]',
+            '{id: a, color: blue}[0->1]',
+            '{id: c, color: orange}',
+            '{id: a, color: red}',
+          ],
+          identityChanges: [
+            '{id: b, color: yellow}[1->0]',
+            '{id: a, color: blue}[0->1]',
+            '{id: c, color: orange}',
+            '{id: a, color: red}',
+          ],
+          previous: [
+            '{id: a, color: blue}[0->1]',
+            '{id: b, color: yellow}[1->0]',
+            '{id: c, color: orange}',
+            '{id: a, color: red}',
+          ],
+          moves: ['{id: b, color: yellow}[1->0]', '{id: a, color: blue}[0->1]'],
+        }),
+      );
     });
 
     it('should not have identity changed', () => {
@@ -606,17 +695,23 @@ describe('iterable differ', function() {
       const l2 = [l1[1], l1[0], l1[2], l1[3]];
       differ.check(l2);
 
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: [
-          '{id: b, color: yellow}[1->0]', '{id: a, color: blue}[0->1]', '{id: c, color: orange}',
-          '{id: a, color: red}'
-        ],
-        previous: [
-          '{id: a, color: blue}[0->1]', '{id: b, color: yellow}[1->0]', '{id: c, color: orange}',
-          '{id: a, color: red}'
-        ],
-        moves: ['{id: b, color: yellow}[1->0]', '{id: a, color: blue}[0->1]'],
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: [
+            '{id: b, color: yellow}[1->0]',
+            '{id: a, color: blue}[0->1]',
+            '{id: c, color: orange}',
+            '{id: a, color: red}',
+          ],
+          previous: [
+            '{id: a, color: blue}[0->1]',
+            '{id: b, color: yellow}[1->0]',
+            '{id: c, color: orange}',
+            '{id: a, color: red}',
+          ],
+          moves: ['{id: b, color: yellow}[1->0]', '{id: a, color: blue}[0->1]'],
+        }),
+      );
     });
 
     it('should track removals normally', () => {
@@ -625,15 +720,17 @@ describe('iterable differ', function() {
 
       l.splice(2, 1);
       differ.check(l);
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['{id: a}', '{id: b}'],
-        previous: ['{id: a}', '{id: b}', '{id: c}[2->null]'],
-        removals: ['{id: c}[2->null]']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['{id: a}', '{id: b}'],
+          previous: ['{id: a}', '{id: b}', '{id: c}[2->null]'],
+          removals: ['{id: c}[2->null]'],
+        }),
+      );
     });
   });
 
-  describe('trackBy function by index', function() {
+  describe('trackBy function by index', function () {
     let differ: DefaultIterableDiffer<string>;
 
     const trackByIndex = (index: number, item: any): number => index;
@@ -647,12 +744,14 @@ describe('iterable differ', function() {
       differ.check(['e', 'f', 'g', 'h']);
       differ.check(['e', 'f', 'h']);
 
-      expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
-        collection: ['e', 'f', 'h'],
-        previous: ['e', 'f', 'h', 'h[3->null]'],
-        removals: ['h[3->null]'],
-        identityChanges: ['h']
-      }));
+      expect(iterableDifferToString(differ)).toEqual(
+        iterableChangesAsString({
+          collection: ['e', 'f', 'h'],
+          previous: ['e', 'f', 'h', 'h[3->null]'],
+          removals: ['h[3->null]'],
+          identityChanges: ['h'],
+        }),
+      );
     });
   });
 });
diff --git a/packages/core/test/change_detection/differs/default_keyvalue_differ_spec.ts b/packages/core/test/change_detection/differs/default_keyvalue_differ_spec.ts
index acb925dcb8953..b407d57a81557 100644
--- a/packages/core/test/change_detection/differs/default_keyvalue_differ_spec.ts
+++ b/packages/core/test/change_detection/differs/default_keyvalue_differ_spec.ts
@@ -6,14 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {DefaultKeyValueDiffer, DefaultKeyValueDifferFactory} from '@angular/core/src/change_detection/differs/default_keyvalue_differ';
+import {
+  DefaultKeyValueDiffer,
+  DefaultKeyValueDifferFactory,
+} from '@angular/core/src/change_detection/differs/default_keyvalue_differ';
 
 import {kvChangesAsString, testChangesAsString} from '../util';
 
-
 // TODO(vicb): Update the code & tests for object equality
-describe('keyvalue differ', function() {
-  describe('DefaultKeyValueDiffer', function() {
+describe('keyvalue differ', function () {
+  describe('DefaultKeyValueDiffer', function () {
     let differ: DefaultKeyValueDiffer<any, any>;
     let m: Map<any, any>;
 
@@ -31,14 +33,15 @@ describe('keyvalue differ', function() {
 
       m.set('a', 1);
       differ.check(m);
-      expect(kvChangesAsString(differ))
-          .toEqual(testChangesAsString({map: ['a[null->1]'], additions: ['a[null->1]']}));
+      expect(kvChangesAsString(differ)).toEqual(
+        testChangesAsString({map: ['a[null->1]'], additions: ['a[null->1]']}),
+      );
 
       m.set('b', 2);
       differ.check(m);
-      expect(kvChangesAsString(differ))
-          .toEqual(testChangesAsString(
-              {map: ['a', 'b[null->2]'], previous: ['a'], additions: ['b[null->2]']}));
+      expect(kvChangesAsString(differ)).toEqual(
+        testChangesAsString({map: ['a', 'b[null->2]'], previous: ['a'], additions: ['b[null->2]']}),
+      );
     });
 
     it('should handle changing key/values correctly', () => {
@@ -49,11 +52,13 @@ describe('keyvalue differ', function() {
       m.set(2, 10);
       m.set(1, 20);
       differ.check(m);
-      expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
-        map: ['1[10->20]', '2[20->10]'],
-        previous: ['1[10->20]', '2[20->10]'],
-        changes: ['1[10->20]', '2[20->10]']
-      }));
+      expect(kvChangesAsString(differ)).toEqual(
+        testChangesAsString({
+          map: ['1[10->20]', '2[20->10]'],
+          previous: ['1[10->20]', '2[20->10]'],
+          changes: ['1[10->20]', '2[20->10]'],
+        }),
+      );
     });
 
     it('should expose previous and current value', () => {
@@ -74,37 +79,46 @@ describe('keyvalue differ', function() {
 
       m.set('a', 'A');
       differ.check(m);
-      expect(kvChangesAsString(differ))
-          .toEqual(testChangesAsString({map: ['a[null->A]'], additions: ['a[null->A]']}));
+      expect(kvChangesAsString(differ)).toEqual(
+        testChangesAsString({map: ['a[null->A]'], additions: ['a[null->A]']}),
+      );
 
       m.set('b', 'B');
       differ.check(m);
-      expect(kvChangesAsString(differ))
-          .toEqual(testChangesAsString(
-              {map: ['a', 'b[null->B]'], previous: ['a'], additions: ['b[null->B]']}));
+      expect(kvChangesAsString(differ)).toEqual(
+        testChangesAsString({map: ['a', 'b[null->B]'], previous: ['a'], additions: ['b[null->B]']}),
+      );
 
       m.set('b', 'BB');
       m.set('d', 'D');
       differ.check(m);
-      expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
-        map: ['a', 'b[B->BB]', 'd[null->D]'],
-        previous: ['a', 'b[B->BB]'],
-        additions: ['d[null->D]'],
-        changes: ['b[B->BB]']
-      }));
+      expect(kvChangesAsString(differ)).toEqual(
+        testChangesAsString({
+          map: ['a', 'b[B->BB]', 'd[null->D]'],
+          previous: ['a', 'b[B->BB]'],
+          additions: ['d[null->D]'],
+          changes: ['b[B->BB]'],
+        }),
+      );
 
       m.delete('b');
       differ.check(m);
-      expect(kvChangesAsString(differ))
-          .toEqual(testChangesAsString(
-              {map: ['a', 'd'], previous: ['a', 'b[BB->null]', 'd'], removals: ['b[BB->null]']}));
+      expect(kvChangesAsString(differ)).toEqual(
+        testChangesAsString({
+          map: ['a', 'd'],
+          previous: ['a', 'b[BB->null]', 'd'],
+          removals: ['b[BB->null]'],
+        }),
+      );
 
       m.clear();
       differ.check(m);
-      expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
-        previous: ['a[A->null]', 'd[D->null]'],
-        removals: ['a[A->null]', 'd[D->null]']
-      }));
+      expect(kvChangesAsString(differ)).toEqual(
+        testChangesAsString({
+          previous: ['a[A->null]', 'd[D->null]'],
+          removals: ['a[A->null]', 'd[D->null]'],
+        }),
+      );
     });
 
     it('should not see a NaN value as a change', () => {
@@ -112,8 +126,9 @@ describe('keyvalue differ', function() {
       differ.check(m);
 
       differ.check(m);
-      expect(kvChangesAsString(differ))
-          .toEqual(testChangesAsString({map: ['foo'], previous: ['foo']}));
+      expect(kvChangesAsString(differ)).toEqual(
+        testChangesAsString({map: ['foo'], previous: ['foo']}),
+      );
     });
 
     it('should work regardless key order', () => {
@@ -126,11 +141,13 @@ describe('keyvalue differ', function() {
       m.set('a', 1);
       differ.check(m);
 
-      expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
-        map: ['b[0->1]', 'a[0->1]'],
-        previous: ['a[0->1]', 'b[0->1]'],
-        changes: ['b[0->1]', 'a[0->1]']
-      }));
+      expect(kvChangesAsString(differ)).toEqual(
+        testChangesAsString({
+          map: ['b[0->1]', 'a[0->1]'],
+          previous: ['a[0->1]', 'b[0->1]'],
+          changes: ['b[0->1]', 'a[0->1]'],
+        }),
+      );
     });
 
     describe('JsObject changes', () => {
@@ -148,50 +165,65 @@ describe('keyvalue differ', function() {
 
         m['a'] = 'A';
         differ.check(m);
-        expect(kvChangesAsString(differ))
-            .toEqual(testChangesAsString({map: ['a[null->A]'], additions: ['a[null->A]']}));
+        expect(kvChangesAsString(differ)).toEqual(
+          testChangesAsString({map: ['a[null->A]'], additions: ['a[null->A]']}),
+        );
 
         m['b'] = 'B';
         differ.check(m);
-        expect(kvChangesAsString(differ))
-            .toEqual(testChangesAsString(
-                {map: ['a', 'b[null->B]'], previous: ['a'], additions: ['b[null->B]']}));
+        expect(kvChangesAsString(differ)).toEqual(
+          testChangesAsString({
+            map: ['a', 'b[null->B]'],
+            previous: ['a'],
+            additions: ['b[null->B]'],
+          }),
+        );
 
         m['b'] = 'BB';
         m['d'] = 'D';
         differ.check(m);
-        expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
-          map: ['a', 'b[B->BB]', 'd[null->D]'],
-          previous: ['a', 'b[B->BB]'],
-          additions: ['d[null->D]'],
-          changes: ['b[B->BB]']
-        }));
+        expect(kvChangesAsString(differ)).toEqual(
+          testChangesAsString({
+            map: ['a', 'b[B->BB]', 'd[null->D]'],
+            previous: ['a', 'b[B->BB]'],
+            additions: ['d[null->D]'],
+            changes: ['b[B->BB]'],
+          }),
+        );
 
         m = {};
         m['a'] = 'A';
         m['d'] = 'D';
         differ.check(m);
-        expect(kvChangesAsString(differ))
-            .toEqual(testChangesAsString(
-                {map: ['a', 'd'], previous: ['a', 'b[BB->null]', 'd'], removals: ['b[BB->null]']}));
+        expect(kvChangesAsString(differ)).toEqual(
+          testChangesAsString({
+            map: ['a', 'd'],
+            previous: ['a', 'b[BB->null]', 'd'],
+            removals: ['b[BB->null]'],
+          }),
+        );
 
         m = {};
         differ.check(m);
-        expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
-          previous: ['a[A->null]', 'd[D->null]'],
-          removals: ['a[A->null]', 'd[D->null]']
-        }));
+        expect(kvChangesAsString(differ)).toEqual(
+          testChangesAsString({
+            previous: ['a[A->null]', 'd[D->null]'],
+            removals: ['a[A->null]', 'd[D->null]'],
+          }),
+        );
       });
 
       it('should work regardless key order', () => {
         differ.check({a: 0, b: 0});
         differ.check({b: 1, a: 1});
 
-        expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
-          map: ['b[0->1]', 'a[0->1]'],
-          previous: ['a[0->1]', 'b[0->1]'],
-          changes: ['b[0->1]', 'a[0->1]']
-        }));
+        expect(kvChangesAsString(differ)).toEqual(
+          testChangesAsString({
+            map: ['b[0->1]', 'a[0->1]'],
+            previous: ['a[0->1]', 'b[0->1]'],
+            changes: ['b[0->1]', 'a[0->1]'],
+          }),
+        );
       });
 
       // https://github.com/angular/angular/issues/14997
@@ -200,23 +232,27 @@ describe('keyvalue differ', function() {
         differ.check({b: 3, a: 2});
         differ.check({a: 1, b: 2});
 
-        expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
-          map: ['a[2->1]', 'b[3->2]'],
-          previous: ['b[3->2]', 'a[2->1]'],
-          changes: ['a[2->1]', 'b[3->2]']
-        }));
+        expect(kvChangesAsString(differ)).toEqual(
+          testChangesAsString({
+            map: ['a[2->1]', 'b[3->2]'],
+            previous: ['b[3->2]', 'a[2->1]'],
+            changes: ['a[2->1]', 'b[3->2]'],
+          }),
+        );
       });
 
       it('should when the first item is moved', () => {
         differ.check({a: 'a', b: 'b'});
         differ.check({c: 'c', a: 'a'});
 
-        expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
-          map: ['c[null->c]', 'a'],
-          previous: ['a', 'b[b->null]'],
-          additions: ['c[null->c]'],
-          removals: ['b[b->null]']
-        }));
+        expect(kvChangesAsString(differ)).toEqual(
+          testChangesAsString({
+            map: ['c[null->c]', 'a'],
+            previous: ['a', 'b[b->null]'],
+            additions: ['c[null->c]'],
+            removals: ['b[b->null]'],
+          }),
+        );
       });
     });
 
@@ -235,8 +271,9 @@ describe('keyvalue differ', function() {
       it('should treat null as an empty list', () => {
         m.set('a', 'A');
         differ.diff(m);
-        expect(kvChangesAsString(differ.diff(null)))
-            .toEqual(testChangesAsString({previous: ['a[A->null]'], removals: ['a[A->null]']}));
+        expect(kvChangesAsString(differ.diff(null))).toEqual(
+          testChangesAsString({previous: ['a[A->null]'], removals: ['a[A->null]']}),
+        );
       });
 
       it('should throw when given an invalid collection', () => {
diff --git a/packages/core/test/change_detection/differs/iterable_differs_spec.ts b/packages/core/test/change_detection/differs/iterable_differs_spec.ts
index fb7389efa65a8..a49dca3907204 100644
--- a/packages/core/test/change_detection/differs/iterable_differs_spec.ts
+++ b/packages/core/test/change_detection/differs/iterable_differs_spec.ts
@@ -6,10 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injector, IterableDiffer, IterableDifferFactory, IterableDiffers, NgModule, TrackByFunction} from '@angular/core';
+import {
+  Injector,
+  IterableDiffer,
+  IterableDifferFactory,
+  IterableDiffers,
+  NgModule,
+  TrackByFunction,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
-describe('IterableDiffers', function() {
+describe('IterableDiffers', function () {
   let factory1: jasmine.SpyObj<IterableDifferFactory>;
   let factory2: jasmine.SpyObj<IterableDifferFactory>;
   let factory3: jasmine.SpyObj<IterableDifferFactory>;
@@ -23,8 +30,9 @@ describe('IterableDiffers', function() {
 
   it('should throw when no suitable implementation found', () => {
     const differs = new IterableDiffers([]);
-    expect(() => differs.find('some object'))
-        .toThrowError(/Cannot find a differ supporting object 'some object'/);
+    expect(() => differs.find('some object')).toThrowError(
+      /Cannot find a differ supporting object 'some object'/,
+    );
   });
 
   it('should return the first suitable implementation', () => {
@@ -51,15 +59,18 @@ describe('IterableDiffers', function() {
     it('should extend di-inherited differs', () => {
       const differ = new IterableDiffers([factory1]);
       const injector = Injector.create({providers: [{provide: IterableDiffers, useValue: differ}]});
-      const childInjector =
-          Injector.create({providers: [IterableDiffers.extend([factory2])], parent: injector});
+      const childInjector = Injector.create({
+        providers: [IterableDiffers.extend([factory2])],
+        parent: injector,
+      });
 
       // @ts-expect-error factories is a private member
       expect(injector.get<IterableDiffers>(IterableDiffers).factories).toEqual([factory1]);
 
       // @ts-expect-error factories is a private member
       expect(childInjector.get<IterableDiffers>(IterableDiffers).factories).toEqual([
-        factory2, factory1
+        factory2,
+        factory1,
       ]);
     });
 
@@ -77,10 +88,8 @@ describe('IterableDiffers', function() {
         }
       }
 
-
       @NgModule({providers: [IterableDiffers.extend([new MyIterableDifferFactory()])]})
-      class MyModule {
-      }
+      class MyModule {}
 
       TestBed.configureTestingModule({imports: [MyModule]});
       const differs = TestBed.inject(IterableDiffers);
diff --git a/packages/core/test/change_detection/differs/keyvalue_differs_spec.ts b/packages/core/test/change_detection/differs/keyvalue_differs_spec.ts
index 4e96b3ad0e7ad..d53a5da3691b4 100644
--- a/packages/core/test/change_detection/differs/keyvalue_differs_spec.ts
+++ b/packages/core/test/change_detection/differs/keyvalue_differs_spec.ts
@@ -9,8 +9,7 @@
 import {KeyValueDiffer, KeyValueDifferFactory, KeyValueDiffers, NgModule} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
-
-describe('KeyValueDiffers', function() {
+describe('KeyValueDiffers', function () {
   it('should support .extend in root NgModule', () => {
     const DIFFER: KeyValueDiffer<any, any> = {} as any;
     const log: string[] = [];
@@ -25,10 +24,8 @@ describe('KeyValueDiffers', function() {
       }
     }
 
-
     @NgModule({providers: [KeyValueDiffers.extend([new MyKeyValueDifferFactory()])]})
-    class MyModule {
-    }
+    class MyModule {}
 
     TestBed.configureTestingModule({imports: [MyModule]});
     const differs = TestBed.inject(KeyValueDiffers);
diff --git a/packages/core/test/change_detection/util.ts b/packages/core/test/change_detection/util.ts
index 8e351957da8bf..d27373210ae46 100644
--- a/packages/core/test/change_detection/util.ts
+++ b/packages/core/test/change_detection/util.ts
@@ -6,44 +6,67 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {IterableChangeRecord, IterableChanges} from '@angular/core/src/change_detection/differs/iterable_differs';
-import {KeyValueChangeRecord, KeyValueChanges} from '@angular/core/src/change_detection/differs/keyvalue_differs';
+import {
+  IterableChangeRecord,
+  IterableChanges,
+} from '@angular/core/src/change_detection/differs/iterable_differs';
+import {
+  KeyValueChangeRecord,
+  KeyValueChanges,
+} from '@angular/core/src/change_detection/differs/keyvalue_differs';
 
 import {stringify} from '../../src/util/stringify';
 
 export function iterableDifferToString<V>(iterableChanges: IterableChanges<V>) {
   const collection: string[] = [];
-  iterableChanges.forEachItem(
-      (record: IterableChangeRecord<V>) => collection.push(icrAsString(record)));
+  iterableChanges.forEachItem((record: IterableChangeRecord<V>) =>
+    collection.push(icrAsString(record)),
+  );
 
   const previous: string[] = [];
-  iterableChanges.forEachPreviousItem(
-      (record: IterableChangeRecord<V>) => previous.push(icrAsString(record)));
+  iterableChanges.forEachPreviousItem((record: IterableChangeRecord<V>) =>
+    previous.push(icrAsString(record)),
+  );
 
   const additions: string[] = [];
-  iterableChanges.forEachAddedItem(
-      (record: IterableChangeRecord<V>) => additions.push(icrAsString(record)));
+  iterableChanges.forEachAddedItem((record: IterableChangeRecord<V>) =>
+    additions.push(icrAsString(record)),
+  );
 
   const moves: string[] = [];
-  iterableChanges.forEachMovedItem(
-      (record: IterableChangeRecord<V>) => moves.push(icrAsString(record)));
+  iterableChanges.forEachMovedItem((record: IterableChangeRecord<V>) =>
+    moves.push(icrAsString(record)),
+  );
 
   const removals: string[] = [];
-  iterableChanges.forEachRemovedItem(
-      (record: IterableChangeRecord<V>) => removals.push(icrAsString(record)));
+  iterableChanges.forEachRemovedItem((record: IterableChangeRecord<V>) =>
+    removals.push(icrAsString(record)),
+  );
 
   const identityChanges: string[] = [];
-  iterableChanges.forEachIdentityChange(
-      (record: IterableChangeRecord<V>) => identityChanges.push(icrAsString(record)));
-
-  return iterableChangesAsString(
-      {collection, previous, additions, moves, removals, identityChanges});
+  iterableChanges.forEachIdentityChange((record: IterableChangeRecord<V>) =>
+    identityChanges.push(icrAsString(record)),
+  );
+
+  return iterableChangesAsString({
+    collection,
+    previous,
+    additions,
+    moves,
+    removals,
+    identityChanges,
+  });
 }
 
 function icrAsString<V>(icr: IterableChangeRecord<V>): string {
-  return icr.previousIndex === icr.currentIndex ? stringify(icr.item) :
-                                                  stringify(icr.item) + '[' +
-          stringify(icr.previousIndex) + '->' + stringify(icr.currentIndex) + ']';
+  return icr.previousIndex === icr.currentIndex
+    ? stringify(icr.item)
+    : stringify(icr.item) +
+        '[' +
+        stringify(icr.previousIndex) +
+        '->' +
+        stringify(icr.currentIndex) +
+        ']';
 }
 
 export function iterableChangesAsString({
@@ -52,21 +75,39 @@ export function iterableChangesAsString({
   additions = [] as any,
   moves = [] as any,
   removals = [] as any,
-  identityChanges = [] as any
+  identityChanges = [] as any,
 }): string {
-  return 'collection: ' + collection.join(', ') + '\n' +
-      'previous: ' + previous.join(', ') + '\n' +
-      'additions: ' + additions.join(', ') + '\n' +
-      'moves: ' + moves.join(', ') + '\n' +
-      'removals: ' + removals.join(', ') + '\n' +
-      'identityChanges: ' + identityChanges.join(', ') + '\n';
+  return (
+    'collection: ' +
+    collection.join(', ') +
+    '\n' +
+    'previous: ' +
+    previous.join(', ') +
+    '\n' +
+    'additions: ' +
+    additions.join(', ') +
+    '\n' +
+    'moves: ' +
+    moves.join(', ') +
+    '\n' +
+    'removals: ' +
+    removals.join(', ') +
+    '\n' +
+    'identityChanges: ' +
+    identityChanges.join(', ') +
+    '\n'
+  );
 }
 
 function kvcrAsString(kvcr: KeyValueChangeRecord<string, any>) {
-  return Object.is(kvcr.previousValue, kvcr.currentValue) ?
-      stringify(kvcr.key) :
-      (stringify(kvcr.key) + '[' + stringify(kvcr.previousValue) + '->' +
-       stringify(kvcr.currentValue) + ']');
+  return Object.is(kvcr.previousValue, kvcr.currentValue)
+    ? stringify(kvcr.key)
+    : stringify(kvcr.key) +
+        '[' +
+        stringify(kvcr.previousValue) +
+        '->' +
+        stringify(kvcr.currentValue) +
+        ']';
 }
 
 export function kvChangesAsString(kvChanges: KeyValueChanges<string, any>) {
@@ -76,28 +117,49 @@ export function kvChangesAsString(kvChanges: KeyValueChanges<string, any>) {
   const additions: string[] = [];
   const removals: string[] = [];
 
-  kvChanges.forEachItem(r => map.push(kvcrAsString(r)));
-  kvChanges.forEachPreviousItem(r => previous.push(kvcrAsString(r)));
-  kvChanges.forEachChangedItem(r => changes.push(kvcrAsString(r)));
-  kvChanges.forEachAddedItem(r => additions.push(kvcrAsString(r)));
-  kvChanges.forEachRemovedItem(r => removals.push(kvcrAsString(r)));
+  kvChanges.forEachItem((r) => map.push(kvcrAsString(r)));
+  kvChanges.forEachPreviousItem((r) => previous.push(kvcrAsString(r)));
+  kvChanges.forEachChangedItem((r) => changes.push(kvcrAsString(r)));
+  kvChanges.forEachAddedItem((r) => additions.push(kvcrAsString(r)));
+  kvChanges.forEachRemovedItem((r) => removals.push(kvcrAsString(r)));
 
   return testChangesAsString({map, previous, additions, changes, removals});
 }
 
-export function testChangesAsString(
-    {map, previous, additions, changes, removals}:
-        {map?: any[], previous?: any[], additions?: any[], changes?: any[], removals?: any[]}):
-    string {
+export function testChangesAsString({
+  map,
+  previous,
+  additions,
+  changes,
+  removals,
+}: {
+  map?: any[];
+  previous?: any[];
+  additions?: any[];
+  changes?: any[];
+  removals?: any[];
+}): string {
   if (!map) map = [];
   if (!previous) previous = [];
   if (!additions) additions = [];
   if (!changes) changes = [];
   if (!removals) removals = [];
 
-  return 'map: ' + map.join(', ') + '\n' +
-      'previous: ' + previous.join(', ') + '\n' +
-      'additions: ' + additions.join(', ') + '\n' +
-      'changes: ' + changes.join(', ') + '\n' +
-      'removals: ' + removals.join(', ') + '\n';
+  return (
+    'map: ' +
+    map.join(', ') +
+    '\n' +
+    'previous: ' +
+    previous.join(', ') +
+    '\n' +
+    'additions: ' +
+    additions.join(', ') +
+    '\n' +
+    'changes: ' +
+    changes.join(', ') +
+    '\n' +
+    'removals: ' +
+    removals.join(', ') +
+    '\n'
+  );
 }
diff --git a/packages/core/test/change_detection_scheduler_spec.ts b/packages/core/test/change_detection_scheduler_spec.ts
index ffc009dde5127..b5cc8752aecf2 100644
--- a/packages/core/test/change_detection_scheduler_spec.ts
+++ b/packages/core/test/change_detection_scheduler_spec.ts
@@ -8,7 +8,32 @@
 
 import {AsyncPipe} from '@angular/common';
 import {PLATFORM_BROWSER_ID} from '@angular/common/src/platform_id';
-import {afterNextRender, afterRender, ApplicationRef, ChangeDetectorRef, Component, createComponent, destroyPlatform, Directive, ElementRef, EnvironmentInjector, ErrorHandler, EventEmitter, inject, Input, NgZone, Output, PLATFORM_ID, provideExperimentalZonelessChangeDetection as provideZonelessChangeDetection, provideZoneChangeDetection, signal, TemplateRef, Type, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  afterNextRender,
+  afterRender,
+  ApplicationRef,
+  ChangeDetectorRef,
+  Component,
+  createComponent,
+  destroyPlatform,
+  Directive,
+  ElementRef,
+  EnvironmentInjector,
+  ErrorHandler,
+  EventEmitter,
+  inject,
+  Input,
+  NgZone,
+  Output,
+  PLATFORM_ID,
+  provideExperimentalZonelessChangeDetection as provideZonelessChangeDetection,
+  provideZoneChangeDetection,
+  signal,
+  TemplateRef,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {ComponentFixture, ComponentFixtureAutoDetect, TestBed} from '@angular/core/testing';
 import {bootstrapApplication} from '@angular/platform-browser';
@@ -17,7 +42,6 @@ import {BehaviorSubject, firstValueFrom} from 'rxjs';
 import {filter, take, tap} from 'rxjs/operators';
 
 import {RuntimeError, RuntimeErrorCode} from '../src/errors';
-import {handleError} from '../src/render3/instructions/shared';
 import {scheduleCallbackWithRafRace} from '../src/util/callback_scheduler';
 import {global} from '../src/util/global';
 
@@ -36,7 +60,7 @@ describe('Angular with zoneless enabled', () => {
       providers: [
         provideZonelessChangeDetection(),
         {provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID},
-      ]
+      ],
     });
   });
 
@@ -123,8 +147,9 @@ describe('Angular with zoneless enabled', () => {
       const fixture = await createFixture(TestComponent);
       expect(fixture.nativeElement.innerText).toEqual('initial');
 
-      fixture.debugElement.query(p => p.nativeElement.tagName === 'DIV')
-          .triggerEventHandler('click');
+      fixture.debugElement
+        .query((p) => p.nativeElement.tagName === 'DIV')
+        .triggerEventHandler('click');
       expect(fixture.isStable()).toBe(false);
       await fixture.whenStable();
       expect(fixture.nativeElement.innerText).toEqual('new');
@@ -204,8 +229,9 @@ describe('Angular with zoneless enabled', () => {
 
       const fixture = await createFixture(TestComponent);
 
-      const otherComponent =
-          createComponent(DynamicCmp, {environmentInjector: TestBed.inject(EnvironmentInjector)});
+      const otherComponent = createComponent(DynamicCmp, {
+        environmentInjector: TestBed.inject(EnvironmentInjector),
+      });
       fixture.componentInstance.viewContainer.insert(otherComponent.hostView);
       expect(fixture.isStable()).toBe(false);
       await fixture.whenStable();
@@ -229,8 +255,9 @@ describe('Angular with zoneless enabled', () => {
       }
 
       const fixture = await createFixture(TestComponent);
-      const component =
-          createComponent(DynamicCmp, {environmentInjector: TestBed.inject(EnvironmentInjector)});
+      const component = createComponent(DynamicCmp, {
+        environmentInjector: TestBed.inject(EnvironmentInjector),
+      });
 
       fixture.componentInstance.viewContainer.insert(component.hostView);
       await fixture.whenStable();
@@ -239,8 +266,9 @@ describe('Angular with zoneless enabled', () => {
       await fixture.whenStable();
       expect(fixture.nativeElement.innerText).toEqual('');
 
-      const component2 =
-          createComponent(DynamicCmp, {environmentInjector: TestBed.inject(EnvironmentInjector)});
+      const component2 = createComponent(DynamicCmp, {
+        environmentInjector: TestBed.inject(EnvironmentInjector),
+      });
       fixture.componentInstance.viewContainer.insert(component2.hostView);
       await fixture.whenStable();
       expect(fixture.nativeElement.innerText).toEqual('binding');
@@ -250,67 +278,70 @@ describe('Angular with zoneless enabled', () => {
     });
 
     function whenStable(applicationRef = TestBed.inject(ApplicationRef)): Promise<boolean> {
-      return firstValueFrom(applicationRef.isStable.pipe(filter(stable => stable)));
+      return firstValueFrom(applicationRef.isStable.pipe(filter((stable) => stable)));
     }
 
+    it(
+      'when destroying a view (*no* animations)',
+      withBody('<app></app>', async () => {
+        destroyPlatform();
+        let doCheckCount = 0;
+        let renderHookCalls = 0;
+        @Component({
+          template: '{{"binding"}}',
+          standalone: true,
+        })
+        class DynamicCmp {
+          elementRef = inject(ElementRef);
+        }
+        @Component({
+          selector: 'app',
+          template: '<ng-template #ref></ng-template>',
+          standalone: true,
+        })
+        class App {
+          @ViewChild('ref', {read: ViewContainerRef}) viewContainer!: ViewContainerRef;
+          unused = afterRender(() => {
+            renderHookCalls++;
+          });
+
+          ngDoCheck() {
+            doCheckCount++;
+          }
+        }
+        const applicationRef = await bootstrapApplication(App, {
+          providers: [
+            provideZonelessChangeDetection(),
+            {provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID},
+          ],
+        });
+        const appViewRef = (applicationRef as any)._views[0] as {context: App; rootNodes: any[]};
+        await whenStable(applicationRef);
 
-    it('when destroying a view (*no* animations)', withBody('<app></app>', async () => {
-         destroyPlatform();
-         let doCheckCount = 0;
-         let renderHookCalls = 0;
-         @Component({
-           template: '{{"binding"}}',
-           standalone: true,
-         })
-         class DynamicCmp {
-           elementRef = inject(ElementRef);
-         }
-         @Component({
-           selector: 'app',
-           template: '<ng-template #ref></ng-template>',
-           standalone: true,
-         })
-         class App {
-           @ViewChild('ref', {read: ViewContainerRef}) viewContainer!: ViewContainerRef;
-           unused = afterRender(() => {
-             renderHookCalls++;
-           });
-
-           ngDoCheck() {
-             doCheckCount++;
-           }
-         }
-         const applicationRef = await bootstrapApplication(App, {
-           providers: [
-             provideZonelessChangeDetection(),
-             {provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID},
-           ]
-         });
-         const appViewRef = (applicationRef as any)._views[0] as {context: App, rootNodes: any[]};
-         await whenStable(applicationRef);
-
-         const component2 =
-             createComponent(DynamicCmp, {environmentInjector: applicationRef.injector});
-         appViewRef.context.viewContainer.insert(component2.hostView);
-         expect(isStable(applicationRef.injector)).toBe(false);
-         await whenStable(applicationRef);
-         component2.destroy();
-
-         // destroying the view synchronously removes element from DOM when not using animations
-         expect(appViewRef.rootNodes[0].innerText).toEqual('');
-         // Destroying the view notifies scheduler because render hooks need to run
-         expect(isStable(applicationRef.injector)).toBe(false);
-
-         let checkCountBeforeStable = doCheckCount;
-         let renderCountBeforeStable = renderHookCalls;
-         await whenStable(applicationRef);
-         // The view should not have refreshed
-         expect(doCheckCount).toEqual(checkCountBeforeStable);
-         // but render hooks should have run
-         expect(renderHookCalls).toEqual(renderCountBeforeStable + 1);
-
-         destroyPlatform();
-       }));
+        const component2 = createComponent(DynamicCmp, {
+          environmentInjector: applicationRef.injector,
+        });
+        appViewRef.context.viewContainer.insert(component2.hostView);
+        expect(isStable(applicationRef.injector)).toBe(false);
+        await whenStable(applicationRef);
+        component2.destroy();
+
+        // destroying the view synchronously removes element from DOM when not using animations
+        expect(appViewRef.rootNodes[0].innerText).toEqual('');
+        // Destroying the view notifies scheduler because render hooks need to run
+        expect(isStable(applicationRef.injector)).toBe(false);
+
+        let checkCountBeforeStable = doCheckCount;
+        let renderCountBeforeStable = renderHookCalls;
+        await whenStable(applicationRef);
+        // The view should not have refreshed
+        expect(doCheckCount).toEqual(checkCountBeforeStable);
+        // but render hooks should have run
+        expect(renderHookCalls).toEqual(renderCountBeforeStable + 1);
+
+        destroyPlatform();
+      }),
+    );
 
     it('when attaching view to ApplicationRef', async () => {
       @Component({
@@ -361,20 +392,19 @@ describe('Angular with zoneless enabled', () => {
 
       val.set('new');
       await TestBed.inject(ApplicationRef)
-          .isStable
-          .pipe(
-              filter(stable => stable),
-              take(1),
-              tap(() => val.set('newer')),
-              )
-          .toPromise();
+        .isStable.pipe(
+          filter((stable) => stable),
+          take(1),
+          tap(() => val.set('newer')),
+        )
+        .toPromise();
       await fixture.whenStable();
       expect(fixture.nativeElement.innerText).toEqual('newer');
     });
 
     it('executes render hooks when a new one is registered', async () => {
       let resolveFn: Function;
-      let calledPromise = new Promise(resolve => {
+      let calledPromise = new Promise((resolve) => {
         resolveFn = resolve;
       });
       TestBed.runInInjectionContext(() => {
@@ -402,7 +432,7 @@ describe('Angular with zoneless enabled', () => {
       expect(checks).toBe(1);
 
       let resolveFn: Function;
-      let calledPromise = new Promise(resolve => {
+      let calledPromise = new Promise((resolve) => {
         resolveFn = resolve;
       });
       TestBed.runInInjectionContext(() => {
@@ -433,13 +463,14 @@ describe('Angular with zoneless enabled', () => {
     TestBed.configureTestingModule({
       providers: [
         {
-          provide: ErrorHandler, useClass: class extends ErrorHandler {
+          provide: ErrorHandler,
+          useClass: class extends ErrorHandler {
             override handleError(error: any): void {
               throw error;
             }
-          }
+          },
         },
-      ]
+      ],
     });
 
     const fixture = await createFixture(TestComponent);
@@ -457,65 +488,62 @@ describe('Angular with zoneless enabled', () => {
     expect(fixture.nativeElement.innerText).toEqual('new');
   });
 
-  it('change detects embedded view when attached to a host on ApplicationRef and declaration is marked for check',
-     async () => {
-       @Component({
-         template: '<ng-template #template><div>{{thing}}</div></ng-template>',
-         standalone: true,
-       })
-       class DynamicCmp {
-         @ViewChild('template') templateRef!: TemplateRef<{}>;
-         thing = 'initial';
-       }
-       @Component({
-         template: '',
-         standalone: true,
-       })
-       class Host {
-         readonly vcr = inject(ViewContainerRef);
-       }
-
-       const fixture = TestBed.createComponent(DynamicCmp);
-       const host =
-           createComponent(Host, {environmentInjector: TestBed.inject(EnvironmentInjector)});
-       TestBed.inject(ApplicationRef).attachView(host.hostView);
-       await fixture.whenStable();
-
-       const embeddedViewRef = fixture.componentInstance.templateRef.createEmbeddedView({});
-       host.instance.vcr.insert(embeddedViewRef);
-       await fixture.whenStable();
-       expect(embeddedViewRef.rootNodes[0].innerHTML).toContain('initial');
-
-       fixture.componentInstance.thing = 'new';
-       fixture.changeDetectorRef.markForCheck();
-       await fixture.whenStable();
-       expect(embeddedViewRef.rootNodes[0].innerHTML).toContain('new');
-     });
-
-  it('change detects embedded view when attached directly to ApplicationRef and declaration is marked for check',
-     async () => {
-       @Component({
-         template: '<ng-template #template><div>{{thing}}</div></ng-template>',
-         standalone: true,
-       })
-       class DynamicCmp {
-         @ViewChild('template') templateRef!: TemplateRef<{}>;
-         thing = 'initial';
-       }
-
-       const fixture = TestBed.createComponent(DynamicCmp);
-       await fixture.whenStable();
-
-       const embeddedViewRef = fixture.componentInstance.templateRef.createEmbeddedView({});
-       TestBed.inject(ApplicationRef).attachView(embeddedViewRef);
-       await fixture.whenStable();
-       expect(embeddedViewRef.rootNodes[0].innerHTML).toContain('initial');
-
-       fixture.componentInstance.thing = 'new';
-       fixture.changeDetectorRef.markForCheck();
-       await fixture.whenStable();
-       expect(embeddedViewRef.rootNodes[0].innerHTML).toContain('new');
-     });
+  it('change detects embedded view when attached to a host on ApplicationRef and declaration is marked for check', async () => {
+    @Component({
+      template: '<ng-template #template><div>{{thing}}</div></ng-template>',
+      standalone: true,
+    })
+    class DynamicCmp {
+      @ViewChild('template') templateRef!: TemplateRef<{}>;
+      thing = 'initial';
+    }
+    @Component({
+      template: '',
+      standalone: true,
+    })
+    class Host {
+      readonly vcr = inject(ViewContainerRef);
+    }
+
+    const fixture = TestBed.createComponent(DynamicCmp);
+    const host = createComponent(Host, {environmentInjector: TestBed.inject(EnvironmentInjector)});
+    TestBed.inject(ApplicationRef).attachView(host.hostView);
+    await fixture.whenStable();
+
+    const embeddedViewRef = fixture.componentInstance.templateRef.createEmbeddedView({});
+    host.instance.vcr.insert(embeddedViewRef);
+    await fixture.whenStable();
+    expect(embeddedViewRef.rootNodes[0].innerHTML).toContain('initial');
+
+    fixture.componentInstance.thing = 'new';
+    fixture.changeDetectorRef.markForCheck();
+    await fixture.whenStable();
+    expect(embeddedViewRef.rootNodes[0].innerHTML).toContain('new');
+  });
+
+  it('change detects embedded view when attached directly to ApplicationRef and declaration is marked for check', async () => {
+    @Component({
+      template: '<ng-template #template><div>{{thing}}</div></ng-template>',
+      standalone: true,
+    })
+    class DynamicCmp {
+      @ViewChild('template') templateRef!: TemplateRef<{}>;
+      thing = 'initial';
+    }
+
+    const fixture = TestBed.createComponent(DynamicCmp);
+    await fixture.whenStable();
+
+    const embeddedViewRef = fixture.componentInstance.templateRef.createEmbeddedView({});
+    TestBed.inject(ApplicationRef).attachView(embeddedViewRef);
+    await fixture.whenStable();
+    expect(embeddedViewRef.rootNodes[0].innerHTML).toContain('initial');
+
+    fixture.componentInstance.thing = 'new';
+    fixture.changeDetectorRef.markForCheck();
+    await fixture.whenStable();
+    expect(embeddedViewRef.rootNodes[0].innerHTML).toContain('new');
+  });
 
   it('does not fail when global timing functions are patched and unpatched', async () => {
     @Component({template: '', standalone: true})
@@ -544,31 +572,30 @@ describe('Angular with zoneless enabled', () => {
     await fixture.whenStable();
   });
 
-  it('should not run change detection twice if manual tick called when CD was scheduled',
-     async () => {
-       let changeDetectionRuns = 0;
-       TestBed.runInInjectionContext(() => {
-         afterRender(() => {
-           changeDetectionRuns++;
-         });
-       });
-       @Component({template: '', standalone: true})
-       class MyComponent {
-         cdr = inject(ChangeDetectorRef);
-       }
-       const fixture = TestBed.createComponent(MyComponent);
-       await fixture.whenStable();
-       expect(changeDetectionRuns).toEqual(1);
-
-       // notify the scheduler
-       fixture.componentInstance.cdr.markForCheck();
-       // call tick manually
-       TestBed.inject(ApplicationRef).tick();
-       await fixture.whenStable();
-       // ensure we only ran render hook 1 more time rather than once for tick and once for the
-       // scheduled run
-       expect(changeDetectionRuns).toEqual(2);
-     });
+  it('should not run change detection twice if manual tick called when CD was scheduled', async () => {
+    let changeDetectionRuns = 0;
+    TestBed.runInInjectionContext(() => {
+      afterRender(() => {
+        changeDetectionRuns++;
+      });
+    });
+    @Component({template: '', standalone: true})
+    class MyComponent {
+      cdr = inject(ChangeDetectorRef);
+    }
+    const fixture = TestBed.createComponent(MyComponent);
+    await fixture.whenStable();
+    expect(changeDetectionRuns).toEqual(1);
+
+    // notify the scheduler
+    fixture.componentInstance.cdr.markForCheck();
+    // call tick manually
+    TestBed.inject(ApplicationRef).tick();
+    await fixture.whenStable();
+    // ensure we only ran render hook 1 more time rather than once for tick and once for the
+    // scheduled run
+    expect(changeDetectionRuns).toEqual(2);
+  });
 
   it('coalesces microtasks that happen during change detection into a single paint', async () => {
     if (!isBrowser) {
@@ -589,39 +616,38 @@ describe('Angular with zoneless enabled', () => {
       }
     }
     const fixture = TestBed.createComponent(App);
-    await new Promise<void>(resolve => scheduleCallbackWithRafRace(resolve));
+    await new Promise<void>((resolve) => scheduleCallbackWithRafRace(resolve));
     expect(fixture.nativeElement.innerText).toContain('new');
   });
 
-  it('throws a nice error when notifications prevent exiting the event loop (infinite CD)',
-     async () => {
-       let caughtError: unknown;
-       let previousHandle = (Zone.root as any)._zoneDelegate.handleError;
-       (Zone.root as any)._zoneDelegate.handleError = (zone: ZoneSpec, e: unknown) => {
-         caughtError = e;
-       };
-       @Component({
-         template: '',
-         standalone: true,
-       })
-       class App {
-         cdr = inject(ChangeDetectorRef);
-         ngDoCheck() {
-           queueMicrotask(() => {
-             this.cdr.markForCheck();
-           });
-         }
-       }
-       const fixture = TestBed.createComponent(App);
-       await fixture.whenStable();
-       expect(caughtError).toBeInstanceOf(RuntimeError);
-       const runtimeError = caughtError as RuntimeError;
-       expect(runtimeError.code).toEqual(RuntimeErrorCode.INFINITE_CHANGE_DETECTION);
-       expect(runtimeError.message).toContain('markForCheck');
-       expect(runtimeError.message).toContain('notify');
-
-       (Zone.root as any)._zoneDelegate.handleError = previousHandle;
-     });
+  it('throws a nice error when notifications prevent exiting the event loop (infinite CD)', async () => {
+    let caughtError: unknown;
+    let previousHandle = (Zone.root as any)._zoneDelegate.handleError;
+    (Zone.root as any)._zoneDelegate.handleError = (zone: ZoneSpec, e: unknown) => {
+      caughtError = e;
+    };
+    @Component({
+      template: '',
+      standalone: true,
+    })
+    class App {
+      cdr = inject(ChangeDetectorRef);
+      ngDoCheck() {
+        queueMicrotask(() => {
+          this.cdr.markForCheck();
+        });
+      }
+    }
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    expect(caughtError).toBeInstanceOf(RuntimeError);
+    const runtimeError = caughtError as RuntimeError;
+    expect(runtimeError.code).toEqual(RuntimeErrorCode.INFINITE_CHANGE_DETECTION);
+    expect(runtimeError.message).toContain('markForCheck');
+    expect(runtimeError.message).toContain('notify');
+
+    (Zone.root as any)._zoneDelegate.handleError = previousHandle;
+  });
 });
 
 describe('Angular with scheduler and ZoneJS', () => {
@@ -630,13 +656,14 @@ describe('Angular with scheduler and ZoneJS', () => {
       providers: [
         {provide: ComponentFixtureAutoDetect, useValue: true},
         {provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID},
-      ]
+      ],
     });
   });
 
   it('requires updates inside Angular zone when using ngZoneOnly', async () => {
-    TestBed.configureTestingModule(
-        {providers: [provideZoneChangeDetection({ignoreChangesOutsideZone: true})]});
+    TestBed.configureTestingModule({
+      providers: [provideZoneChangeDetection({ignoreChangesOutsideZone: true})],
+    });
     @Component({template: '{{thing()}}', standalone: true})
     class App {
       thing = signal('initial');
@@ -670,7 +697,7 @@ describe('Angular with scheduler and ZoneJS', () => {
     @Component({
       standalone: true,
       imports: [ComponentWithOutput],
-      template: '<component-with-output (out)="onOut()" />'
+      template: '<component-with-output (out)="onOut()" />',
     })
     class App {
       onOut() {
@@ -679,10 +706,9 @@ describe('Angular with scheduler and ZoneJS', () => {
     }
     const fixture = TestBed.createComponent(App);
     await fixture.whenStable();
-    const outComponent =
-        fixture.debugElement
-            .query((debugNode) => debugNode.providerTokens!.indexOf(ComponentWithOutput) !== -1)
-            .componentInstance as ComponentWithOutput;
+    const outComponent = fixture.debugElement.query(
+      (debugNode) => debugNode.providerTokens!.indexOf(ComponentWithOutput) !== -1,
+    ).componentInstance as ComponentWithOutput;
     TestBed.inject(NgZone).runOutsideAngular(() => {
       outComponent.out.emit();
     });
@@ -716,7 +742,7 @@ describe('Angular with scheduler and ZoneJS', () => {
       providers: [
         provideZoneChangeDetection({ignoreChangesOutsideZone: false}),
         {provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID},
-      ]
+      ],
     });
 
     let changeDetectionRuns = 0;
@@ -751,8 +777,9 @@ describe('Angular with scheduler and ZoneJS', () => {
     }
 
     TestBed.configureTestingModule({
-      providers:
-          [provideZoneChangeDetection({runCoalescing: true, ignoreChangesOutsideZone: false})]
+      providers: [
+        provideZoneChangeDetection({runCoalescing: true, ignoreChangesOutsideZone: false}),
+      ],
     });
     @Component({template: '{{thing()}}', standalone: true})
     class App {
@@ -772,34 +799,34 @@ describe('Angular with scheduler and ZoneJS', () => {
     expect(ticks).toBe(1);
   });
 
-  it('does not cause double change detection with run coalescing when both schedulers are notified',
-     async () => {
-       if (isNode) {
-         return;
-       }
-
-       TestBed.configureTestingModule({
-         providers:
-             [provideZoneChangeDetection({runCoalescing: true, ignoreChangesOutsideZone: false})]
-       });
-       @Component({template: '{{thing()}}', standalone: true})
-       class App {
-         thing = signal('initial');
-       }
-       const fixture = TestBed.createComponent(App);
-       await fixture.whenStable();
-
-       let ticks = 0;
-       TestBed.runInInjectionContext(() => {
-         afterRender(() => {
-           ticks++;
-         });
-       });
-       // notifies the zoneless scheduler
-       fixture.componentInstance.thing.set('new');
-       // notifies the zone scheduler
-       TestBed.inject(NgZone).run(() => {});
-       await fixture.whenStable();
-       expect(ticks).toBe(1);
-     });
+  it('does not cause double change detection with run coalescing when both schedulers are notified', async () => {
+    if (isNode) {
+      return;
+    }
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideZoneChangeDetection({runCoalescing: true, ignoreChangesOutsideZone: false}),
+      ],
+    });
+    @Component({template: '{{thing()}}', standalone: true})
+    class App {
+      thing = signal('initial');
+    }
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+
+    let ticks = 0;
+    TestBed.runInInjectionContext(() => {
+      afterRender(() => {
+        ticks++;
+      });
+    });
+    // notifies the zoneless scheduler
+    fixture.componentInstance.thing.set('new');
+    // notifies the zone scheduler
+    TestBed.inject(NgZone).run(() => {});
+    await fixture.whenStable();
+    expect(ticks).toBe(1);
+  });
 });
diff --git a/packages/core/test/compiler/compiler_facade_spec.ts b/packages/core/test/compiler/compiler_facade_spec.ts
index 399a3301a206f..89f92daebf468 100644
--- a/packages/core/test/compiler/compiler_facade_spec.ts
+++ b/packages/core/test/compiler/compiler_facade_spec.ts
@@ -20,32 +20,35 @@ describe('getCompilerFacade', () => {
         getCompilerFacade({usage: JitCompilerUsage.Decorator, kind: 'directive', type: TestClass});
         fail('Error expected as compiler facade is not available');
       } catch (e) {
-        expect((e as Error).message)
-            .toEqual(
-                `The directive 'TestClass' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
+        expect((e as Error).message).toEqual(
+          `The directive 'TestClass' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
 
 JIT compilation is discouraged for production use-cases! Consider using AOT mode instead.
 Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
-or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.`);
+or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.`,
+        );
       }
     });
 
     it('reports an error when requested for a partial declaration', () => {
       try {
-        getCompilerFacade(
-            {usage: JitCompilerUsage.PartialDeclaration, kind: 'directive', type: TestClass});
+        getCompilerFacade({
+          usage: JitCompilerUsage.PartialDeclaration,
+          kind: 'directive',
+          type: TestClass,
+        });
         fail('Error expected as compiler facade is not available');
       } catch (e) {
-        expect((e as Error).message)
-            .toEqual(
-                `The directive 'TestClass' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
+        expect((e as Error).message).toEqual(
+          `The directive 'TestClass' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
 
 The directive is part of a library that has been partially compiled.
 However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.
 
 Ideally, the library is processed using the Angular Linker to become fully AOT compiled.
 Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
-or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.`);
+or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.`,
+        );
       }
     });
   });
@@ -53,7 +56,7 @@ or manually provide the compiler with 'import "@angular/compiler";' before boots
 
 class TestClass {}
 
-let ɵcompilerFacade: CompilerFacade|null = null;
+let ɵcompilerFacade: CompilerFacade | null = null;
 
 function clearCompilerFacade() {
   const ng: ExportedCompilerFacade = global.ng;
diff --git a/packages/core/test/component_fixture_spec.ts b/packages/core/test/component_fixture_spec.ts
index 7fe300974adac..d28c6b0baca27 100644
--- a/packages/core/test/component_fixture_spec.ts
+++ b/packages/core/test/component_fixture_spec.ts
@@ -6,8 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ErrorHandler, Injectable, Input, provideExperimentalZonelessChangeDetection, signal} from '@angular/core';
-import {ComponentFixtureAutoDetect, ComponentFixtureNoNgZone, TestBed, waitForAsync, withModule} from '@angular/core/testing';
+import {
+  Component,
+  ErrorHandler,
+  Injectable,
+  Input,
+  provideExperimentalZonelessChangeDetection,
+  signal,
+} from '@angular/core';
+import {
+  ComponentFixtureAutoDetect,
+  ComponentFixtureNoNgZone,
+  TestBed,
+  waitForAsync,
+  withModule,
+} from '@angular/core/testing';
 import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
@@ -25,16 +38,14 @@ class SimpleComp {
   standalone: true,
   template: `<div>Deferred Component</div>`,
 })
-class DeferredComp {
-}
+class DeferredComp {}
 
 @Component({
   selector: 'second-deferred-comp',
   standalone: true,
   template: `<div>More Deferred Component</div>`,
 })
-class SecondDeferredComp {
-}
+class SecondDeferredComp {}
 
 @Component({
   selector: 'my-if-comp',
@@ -79,7 +90,7 @@ class AsyncChildComp {
 
 @Component({
   selector: 'async-change-comp',
-  template: `<async-child-comp (click)='click()' [text]="text"></async-child-comp>`
+  template: `<async-child-comp (click)='click()' [text]="text"></async-child-comp>`,
 })
 class AsyncChangeComp {
   text: string = '1';
@@ -100,8 +111,10 @@ class AsyncTimeoutComp {
   }
 }
 
-@Component(
-    {selector: 'nested-async-timeout-comp', template: `<span (click)='click()'>{{text}}</span>`})
+@Component({
+  selector: 'nested-async-timeout-comp',
+  template: `<span (click)='click()'>{{text}}</span>`,
+})
 class NestedAsyncTimeoutComp {
   text: string = '1';
 
@@ -118,9 +131,15 @@ describe('ComponentFixture', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
-        AutoDetectComp, AsyncComp, AsyncTimeoutComp, NestedAsyncTimeoutComp, AsyncChangeComp,
-        MyIfComp, SimpleComp, AsyncChildComp
-      ]
+        AutoDetectComp,
+        AsyncComp,
+        AsyncTimeoutComp,
+        NestedAsyncTimeoutComp,
+        AsyncChangeComp,
+        MyIfComp,
+        SimpleComp,
+        AsyncChildComp,
+      ],
     });
   }));
 
@@ -136,178 +155,183 @@ describe('ComponentFixture', () => {
     expect(componentFixture.nativeElement).toHaveText('11');
   });
 
-  it('should auto detect changes if ComponentFixtureAutoDetect is provided as true',
-     withModule({providers: [{provide: ComponentFixtureAutoDetect, useValue: true}]}, () => {
-       const componentFixture = TestBed.createComponent(AutoDetectComp);
-       expect(componentFixture.nativeElement).toHaveText('1');
-
-       const element = componentFixture.debugElement.children[0];
-       dispatchEvent(element.nativeElement, 'click');
-
-       expect(componentFixture.nativeElement).toHaveText('11');
-     }));
-
-  it('should signal through whenStable when the fixture is stable (autoDetectChanges)',
-     waitForAsync(() => {
-       const componentFixture = TestBed.createComponent(AsyncComp);
-       componentFixture.autoDetectChanges();
-       expect(componentFixture.nativeElement).toHaveText('1');
-
-       const element = componentFixture.debugElement.children[0];
-       dispatchEvent(element.nativeElement, 'click');
-       expect(componentFixture.nativeElement).toHaveText('1');
-
-       // Component is updated asynchronously. Wait for the fixture to become stable
-       // before checking for new value.
-       expect(componentFixture.isStable()).toBe(false);
-       componentFixture.whenStable().then((waited) => {
-         expect(waited).toBe(true);
-         expect(componentFixture.nativeElement).toHaveText('11');
-       });
-     }));
-
-  it('should signal through isStable when the fixture is stable (no autoDetectChanges)',
-     waitForAsync(() => {
-       const componentFixture = TestBed.createComponent(AsyncComp);
-
-       componentFixture.detectChanges();
-       expect(componentFixture.nativeElement).toHaveText('1');
-
-       const element = componentFixture.debugElement.children[0];
-       dispatchEvent(element.nativeElement, 'click');
-       expect(componentFixture.nativeElement).toHaveText('1');
-
-       // Component is updated asynchronously. Wait for the fixture to become stable
-       // before checking.
-       componentFixture.whenStable().then((waited) => {
-         expect(waited).toBe(true);
-         componentFixture.detectChanges();
-         expect(componentFixture.nativeElement).toHaveText('11');
-       });
-     }));
-
-  it('should wait for macroTask(setTimeout) while checking for whenStable ' +
-         '(autoDetectChanges)',
-     waitForAsync(() => {
-       const componentFixture = TestBed.createComponent(AsyncTimeoutComp);
-       componentFixture.autoDetectChanges();
-       expect(componentFixture.nativeElement).toHaveText('1');
-
-       const element = componentFixture.debugElement.children[0];
-       dispatchEvent(element.nativeElement, 'click');
-       expect(componentFixture.nativeElement).toHaveText('1');
-
-       // Component is updated asynchronously. Wait for the fixture to become
-       // stable before checking for new value.
-       expect(componentFixture.isStable()).toBe(false);
-       componentFixture.whenStable().then((waited) => {
-         expect(waited).toBe(true);
-         expect(componentFixture.nativeElement).toHaveText('11');
-       });
-     }));
-
-  it('should wait for macroTask(setTimeout) while checking for whenStable ' +
-         '(no autoDetectChanges)',
-     waitForAsync(() => {
-       const componentFixture = TestBed.createComponent(AsyncTimeoutComp);
-       componentFixture.detectChanges();
-       expect(componentFixture.nativeElement).toHaveText('1');
-
-       const element = componentFixture.debugElement.children[0];
-       dispatchEvent(element.nativeElement, 'click');
-       expect(componentFixture.nativeElement).toHaveText('1');
-
-       // Component is updated asynchronously. Wait for the fixture to become
-       // stable before checking for new value.
-       expect(componentFixture.isStable()).toBe(false);
-       componentFixture.whenStable().then((waited) => {
-         expect(waited).toBe(true);
-         componentFixture.detectChanges();
-         expect(componentFixture.nativeElement).toHaveText('11');
-       });
-     }));
-
-  it('should wait for nested macroTasks(setTimeout) while checking for whenStable ' +
-         '(autoDetectChanges)',
-     waitForAsync(() => {
-       const componentFixture = TestBed.createComponent(NestedAsyncTimeoutComp);
-
-       componentFixture.autoDetectChanges();
-       expect(componentFixture.nativeElement).toHaveText('1');
-
-       const element = componentFixture.debugElement.children[0];
-       dispatchEvent(element.nativeElement, 'click');
-       expect(componentFixture.nativeElement).toHaveText('1');
-
-       // Component is updated asynchronously. Wait for the fixture to become
-       // stable before checking for new value.
-       expect(componentFixture.isStable()).toBe(false);
-       componentFixture.whenStable().then((waited) => {
-         expect(waited).toBe(true);
-         expect(componentFixture.nativeElement).toHaveText('11');
-       });
-     }));
-
-  it('should wait for nested macroTasks(setTimeout) while checking for whenStable ' +
-         '(no autoDetectChanges)',
-     waitForAsync(() => {
-       const componentFixture = TestBed.createComponent(NestedAsyncTimeoutComp);
-       componentFixture.detectChanges();
-       expect(componentFixture.nativeElement).toHaveText('1');
-
-       const element = componentFixture.debugElement.children[0];
-       dispatchEvent(element.nativeElement, 'click');
-       expect(componentFixture.nativeElement).toHaveText('1');
-
-       // Component is updated asynchronously. Wait for the fixture to become
-       // stable before checking for new value.
-       expect(componentFixture.isStable()).toBe(false);
-       componentFixture.whenStable().then((waited) => {
-         expect(waited).toBe(true);
-         componentFixture.detectChanges();
-         expect(componentFixture.nativeElement).toHaveText('11');
-       });
-     }));
-
-  it('should stabilize after async task in change detection (autoDetectChanges)',
-     waitForAsync(() => {
-       const componentFixture = TestBed.createComponent(AsyncChangeComp);
-
-       componentFixture.autoDetectChanges();
-       componentFixture.whenStable().then((_) => {
-         expect(componentFixture.nativeElement).toHaveText('1');
-
-         const element = componentFixture.debugElement.children[0];
-         dispatchEvent(element.nativeElement, 'click');
-
-         componentFixture.whenStable().then((_) => {
-           expect(componentFixture.nativeElement).toHaveText('11');
-         });
-       });
-     }));
-
-  it('should stabilize after async task in change detection(no autoDetectChanges)',
-     waitForAsync(() => {
-       const componentFixture = TestBed.createComponent(AsyncChangeComp);
-       componentFixture.detectChanges();
-       componentFixture.whenStable().then((_) => {
-         // Run detectChanges again so that stabilized value is reflected in the
-         // DOM.
-         componentFixture.detectChanges();
-         expect(componentFixture.nativeElement).toHaveText('1');
-
-         const element = componentFixture.debugElement.children[0];
-         dispatchEvent(element.nativeElement, 'click');
-         componentFixture.detectChanges();
-
-         componentFixture.whenStable().then((_) => {
-           // Run detectChanges again so that stabilized value is reflected in
-           // the DOM.
-           componentFixture.detectChanges();
-           expect(componentFixture.nativeElement).toHaveText('11');
-         });
-       });
-     }));
+  it(
+    'should auto detect changes if ComponentFixtureAutoDetect is provided as true',
+    withModule({providers: [{provide: ComponentFixtureAutoDetect, useValue: true}]}, () => {
+      const componentFixture = TestBed.createComponent(AutoDetectComp);
+      expect(componentFixture.nativeElement).toHaveText('1');
+
+      const element = componentFixture.debugElement.children[0];
+      dispatchEvent(element.nativeElement, 'click');
+
+      expect(componentFixture.nativeElement).toHaveText('11');
+    }),
+  );
+
+  it('should signal through whenStable when the fixture is stable (autoDetectChanges)', waitForAsync(() => {
+    const componentFixture = TestBed.createComponent(AsyncComp);
+    componentFixture.autoDetectChanges();
+    expect(componentFixture.nativeElement).toHaveText('1');
+
+    const element = componentFixture.debugElement.children[0];
+    dispatchEvent(element.nativeElement, 'click');
+    expect(componentFixture.nativeElement).toHaveText('1');
+
+    // Component is updated asynchronously. Wait for the fixture to become stable
+    // before checking for new value.
+    expect(componentFixture.isStable()).toBe(false);
+    componentFixture.whenStable().then((waited) => {
+      expect(waited).toBe(true);
+      expect(componentFixture.nativeElement).toHaveText('11');
+    });
+  }));
+
+  it('should signal through isStable when the fixture is stable (no autoDetectChanges)', waitForAsync(() => {
+    const componentFixture = TestBed.createComponent(AsyncComp);
+
+    componentFixture.detectChanges();
+    expect(componentFixture.nativeElement).toHaveText('1');
+
+    const element = componentFixture.debugElement.children[0];
+    dispatchEvent(element.nativeElement, 'click');
+    expect(componentFixture.nativeElement).toHaveText('1');
+
+    // Component is updated asynchronously. Wait for the fixture to become stable
+    // before checking.
+    componentFixture.whenStable().then((waited) => {
+      expect(waited).toBe(true);
+      componentFixture.detectChanges();
+      expect(componentFixture.nativeElement).toHaveText('11');
+    });
+  }));
+
+  it(
+    'should wait for macroTask(setTimeout) while checking for whenStable ' + '(autoDetectChanges)',
+    waitForAsync(() => {
+      const componentFixture = TestBed.createComponent(AsyncTimeoutComp);
+      componentFixture.autoDetectChanges();
+      expect(componentFixture.nativeElement).toHaveText('1');
+
+      const element = componentFixture.debugElement.children[0];
+      dispatchEvent(element.nativeElement, 'click');
+      expect(componentFixture.nativeElement).toHaveText('1');
+
+      // Component is updated asynchronously. Wait for the fixture to become
+      // stable before checking for new value.
+      expect(componentFixture.isStable()).toBe(false);
+      componentFixture.whenStable().then((waited) => {
+        expect(waited).toBe(true);
+        expect(componentFixture.nativeElement).toHaveText('11');
+      });
+    }),
+  );
+
+  it(
+    'should wait for macroTask(setTimeout) while checking for whenStable ' +
+      '(no autoDetectChanges)',
+    waitForAsync(() => {
+      const componentFixture = TestBed.createComponent(AsyncTimeoutComp);
+      componentFixture.detectChanges();
+      expect(componentFixture.nativeElement).toHaveText('1');
+
+      const element = componentFixture.debugElement.children[0];
+      dispatchEvent(element.nativeElement, 'click');
+      expect(componentFixture.nativeElement).toHaveText('1');
+
+      // Component is updated asynchronously. Wait for the fixture to become
+      // stable before checking for new value.
+      expect(componentFixture.isStable()).toBe(false);
+      componentFixture.whenStable().then((waited) => {
+        expect(waited).toBe(true);
+        componentFixture.detectChanges();
+        expect(componentFixture.nativeElement).toHaveText('11');
+      });
+    }),
+  );
+
+  it(
+    'should wait for nested macroTasks(setTimeout) while checking for whenStable ' +
+      '(autoDetectChanges)',
+    waitForAsync(() => {
+      const componentFixture = TestBed.createComponent(NestedAsyncTimeoutComp);
+
+      componentFixture.autoDetectChanges();
+      expect(componentFixture.nativeElement).toHaveText('1');
+
+      const element = componentFixture.debugElement.children[0];
+      dispatchEvent(element.nativeElement, 'click');
+      expect(componentFixture.nativeElement).toHaveText('1');
+
+      // Component is updated asynchronously. Wait for the fixture to become
+      // stable before checking for new value.
+      expect(componentFixture.isStable()).toBe(false);
+      componentFixture.whenStable().then((waited) => {
+        expect(waited).toBe(true);
+        expect(componentFixture.nativeElement).toHaveText('11');
+      });
+    }),
+  );
+
+  it(
+    'should wait for nested macroTasks(setTimeout) while checking for whenStable ' +
+      '(no autoDetectChanges)',
+    waitForAsync(() => {
+      const componentFixture = TestBed.createComponent(NestedAsyncTimeoutComp);
+      componentFixture.detectChanges();
+      expect(componentFixture.nativeElement).toHaveText('1');
+
+      const element = componentFixture.debugElement.children[0];
+      dispatchEvent(element.nativeElement, 'click');
+      expect(componentFixture.nativeElement).toHaveText('1');
+
+      // Component is updated asynchronously. Wait for the fixture to become
+      // stable before checking for new value.
+      expect(componentFixture.isStable()).toBe(false);
+      componentFixture.whenStable().then((waited) => {
+        expect(waited).toBe(true);
+        componentFixture.detectChanges();
+        expect(componentFixture.nativeElement).toHaveText('11');
+      });
+    }),
+  );
+
+  it('should stabilize after async task in change detection (autoDetectChanges)', waitForAsync(() => {
+    const componentFixture = TestBed.createComponent(AsyncChangeComp);
+
+    componentFixture.autoDetectChanges();
+    componentFixture.whenStable().then((_) => {
+      expect(componentFixture.nativeElement).toHaveText('1');
+
+      const element = componentFixture.debugElement.children[0];
+      dispatchEvent(element.nativeElement, 'click');
+
+      componentFixture.whenStable().then((_) => {
+        expect(componentFixture.nativeElement).toHaveText('11');
+      });
+    });
+  }));
+
+  it('should stabilize after async task in change detection(no autoDetectChanges)', waitForAsync(() => {
+    const componentFixture = TestBed.createComponent(AsyncChangeComp);
+    componentFixture.detectChanges();
+    componentFixture.whenStable().then((_) => {
+      // Run detectChanges again so that stabilized value is reflected in the
+      // DOM.
+      componentFixture.detectChanges();
+      expect(componentFixture.nativeElement).toHaveText('1');
+
+      const element = componentFixture.debugElement.children[0];
+      dispatchEvent(element.nativeElement, 'click');
+      componentFixture.detectChanges();
+
+      componentFixture.whenStable().then((_) => {
+        // Run detectChanges again so that stabilized value is reflected in
+        // the DOM.
+        componentFixture.detectChanges();
+        expect(componentFixture.nativeElement).toHaveText('11');
+      });
+    });
+  }));
 
   describe('defer', () => {
     it('should return all defer blocks in the component', async () => {
@@ -322,10 +346,9 @@ describe('ComponentFixture', () => {
             @defer (on idle) {
               <SecondDeferredComp />
             }
-          </div>`
+          </div>`,
       })
-      class DeferComp {
-      }
+      class DeferComp {}
 
       const componentFixture = TestBed.createComponent(DeferComp);
       const deferBlocks = await componentFixture.getDeferBlocks();
@@ -335,8 +358,9 @@ describe('ComponentFixture', () => {
 
   describe('No NgZone', () => {
     beforeEach(() => {
-      TestBed.configureTestingModule(
-          {providers: [{provide: ComponentFixtureNoNgZone, useValue: true}]});
+      TestBed.configureTestingModule({
+        providers: [{provide: ComponentFixtureNoNgZone, useValue: true}],
+      });
     });
 
     it('calling autoDetectChanges raises an error', () => {
@@ -347,23 +371,23 @@ describe('ComponentFixture', () => {
     });
 
     it('should instantiate a component with valid DOM', waitForAsync(() => {
-         const componentFixture = TestBed.createComponent(SimpleComp);
+      const componentFixture = TestBed.createComponent(SimpleComp);
 
-         expect(componentFixture.ngZone).toBeNull();
-         componentFixture.detectChanges();
-         expect(componentFixture.nativeElement).toHaveText('Original Simple');
-       }));
+      expect(componentFixture.ngZone).toBeNull();
+      componentFixture.detectChanges();
+      expect(componentFixture.nativeElement).toHaveText('Original Simple');
+    }));
 
     it('should allow changing members of the component', waitForAsync(() => {
-         const componentFixture = TestBed.createComponent(MyIfComp);
+      const componentFixture = TestBed.createComponent(MyIfComp);
 
-         componentFixture.detectChanges();
-         expect(componentFixture.nativeElement).toHaveText('MyIf()');
+      componentFixture.detectChanges();
+      expect(componentFixture.nativeElement).toHaveText('MyIf()');
 
-         componentFixture.componentInstance.showMore = true;
-         componentFixture.detectChanges();
-         expect(componentFixture.nativeElement).toHaveText('MyIf(More)');
-       }));
+      componentFixture.componentInstance.showMore = true;
+      componentFixture.detectChanges();
+      expect(componentFixture.nativeElement).toHaveText('MyIf(More)');
+    }));
   });
 });
 
@@ -373,7 +397,7 @@ describe('ComponentFixture with zoneless', () => {
       providers: [
         provideExperimentalZonelessChangeDetection(),
         {provide: ErrorHandler, useValue: {handleError: () => {}}},
-      ]
+      ],
     });
     @Component({standalone: true, template: '{{signalThing()}}|{{regularThing}}'})
     class CheckAlwaysCmp {
diff --git a/packages/core/test/debug/debug_node_spec.ts b/packages/core/test/debug/debug_node_spec.ts
index bd5da73a6a222..6faa4053feb90 100644
--- a/packages/core/test/debug/debug_node_spec.ts
+++ b/packages/core/test/debug/debug_node_spec.ts
@@ -6,9 +6,27 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {CommonModule, NgIfContext, ɵgetDOM as getDOM} from '@angular/common';
-import {Component, DebugElement, DebugNode, Directive, ElementRef, EmbeddedViewRef, EventEmitter, HostBinding, Injectable, Input, NgZone, NO_ERRORS_SCHEMA, OnInit, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  Component,
+  DebugElement,
+  DebugNode,
+  Directive,
+  ElementRef,
+  EmbeddedViewRef,
+  EventEmitter,
+  HostBinding,
+  Injectable,
+  Input,
+  NgZone,
+  NO_ERRORS_SCHEMA,
+  OnInit,
+  Output,
+  Renderer2,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {createMouseEvent, hasClass} from '@angular/platform-browser/testing/src/browser_util';
@@ -148,8 +166,7 @@ class UsingFor {
 }
 
 @Directive({selector: '[mydir]', exportAs: 'mydir'})
-class MyDir {
-}
+class MyDir {}
 
 @Component({
   selector: 'locals-comp',
@@ -157,8 +174,7 @@ class MyDir {
    <div mydir #alice="mydir"></div>
  `,
 })
-class LocalsComp {
-}
+class LocalsComp {}
 
 @Component({
   selector: 'bank-account',
@@ -173,16 +189,16 @@ class LocalsComp {
   },
 })
 class BankAccount {
-  @Input() bank: string|undefined;
-  @Input('account') id: string|undefined;
+  @Input() bank: string | undefined;
+  @Input('account') id: string | undefined;
 
-  normalizedBankName: string|undefined;
+  normalizedBankName: string | undefined;
 }
 
 @Component({
   template: `
     <div class="content" #content>Some content</div>
- `
+ `,
 })
 class SimpleContentComp {
   @ViewChild('content') content!: ElementRef;
@@ -207,8 +223,7 @@ class TestApp {
 }
 
 @Component({selector: 'test-cmpt', template: ``})
-class TestCmpt {
-}
+class TestCmpt {}
 
 @Component({selector: 'test-cmpt-renderer', template: ``})
 class TestCmptWithRenderer {
@@ -231,7 +246,7 @@ class TestCmptWithViewContainerRef {
     [disabled]="disabled"
     [tabIndex]="tabIndex"
     [title]="title">Click me</button>
-`
+`,
 })
 class TestCmptWithPropBindings {
   disabled = true;
@@ -251,10 +266,9 @@ class TestCmptWithPropBindings {
   <button title="a{{1}}b{{2}}c{{3}}d{{4}}e{{5}}f{{6}}g{{7}}h"></button>
   <button title="a{{1}}b{{2}}c{{3}}d{{4}}e{{5}}f{{6}}g{{7}}h{{8}}i"></button>
   <button title="a{{1}}b{{2}}c{{3}}d{{4}}e{{5}}f{{6}}g{{7}}h{{8}}i{{9}}j"></button>
-`
+`,
 })
-class TestCmptWithPropInterpolation {
-}
+class TestCmptWithPropInterpolation {}
 
 describe('debug element', () => {
   let fixture: ComponentFixture<any>;
@@ -378,10 +392,13 @@ describe('debug element', () => {
     fixture.detectChanges();
     const debugElement = fixture.debugElement.children[0];
 
-    expect(debugElement.classes['present-class'])
-        .toBe(true, 'Expected bound host CSS class "present-class" to be present');
-    expect(debugElement.classes['absent-class'])
-        .toBeFalsy('Expected bound host CSS class "absent-class" to be absent');
+    expect(debugElement.classes['present-class']).toBe(
+      true,
+      'Expected bound host CSS class "present-class" to be present',
+    );
+    expect(debugElement.classes['absent-class']).toBeFalsy(
+      'Expected bound host CSS class "absent-class" to be absent',
+    );
   });
 
   it('should list classes on SVG nodes', () => {
@@ -434,29 +451,27 @@ describe('debug element', () => {
 
   it('should query projected child elements by directive', () => {
     @Directive({selector: 'example-directive-a'})
-    class ExampleDirectiveA {
-    }
+    class ExampleDirectiveA {}
 
     @Component({
       selector: 'wrapper-component',
       template: `
           <ng-content select="example-directive-a"></ng-content>
-        `
+        `,
     })
-    class WrapperComponent {
-    }
+    class WrapperComponent {}
 
     TestBed.configureTestingModule({
-      declarations: [
-        WrapperComponent,
-        ExampleDirectiveA,
-      ]
+      declarations: [WrapperComponent, ExampleDirectiveA],
     });
 
-    TestBed.overrideTemplate(TestApp, `<wrapper-component>
+    TestBed.overrideTemplate(
+      TestApp,
+      `<wrapper-component>
         <div></div>
         <example-directive-a></example-directive-a>
-       </wrapper-component>`);
+       </wrapper-component>`,
+    );
 
     const fixture = TestBed.createComponent(TestApp);
     fixture.detectChanges();
@@ -467,17 +482,15 @@ describe('debug element', () => {
 
   it('should query re-projected child elements by directive', () => {
     @Directive({selector: 'example-directive-a'})
-    class ExampleDirectiveA {
-    }
+    class ExampleDirectiveA {}
 
     @Component({
       selector: 'proxy-component',
       template: `
           <ng-content></ng-content>
-        `
+        `,
     })
-    class ProxyComponent {
-    }
+    class ProxyComponent {}
 
     @Component({
       selector: 'wrapper-component',
@@ -486,23 +499,21 @@ describe('debug element', () => {
             <ng-content select="div"></ng-content>
             <ng-content select="example-directive-a"></ng-content>
           </proxy-component>
-        `
+        `,
     })
-    class WrapperComponent {
-    }
+    class WrapperComponent {}
 
     TestBed.configureTestingModule({
-      declarations: [
-        ProxyComponent,
-        WrapperComponent,
-        ExampleDirectiveA,
-      ]
+      declarations: [ProxyComponent, WrapperComponent, ExampleDirectiveA],
     });
 
-    TestBed.overrideTemplate(TestApp, `<wrapper-component>
+    TestBed.overrideTemplate(
+      TestApp,
+      `<wrapper-component>
         <div></div>
         <example-directive-a></example-directive-a>
-       </wrapper-component>`);
+       </wrapper-component>`,
+    );
 
     const fixture = TestBed.createComponent(TestApp);
     fixture.detectChanges();
@@ -514,12 +525,14 @@ describe('debug element', () => {
   it('should query directives on containers before directives in a view', () => {
     @Directive({selector: '[text]'})
     class TextDirective {
-      @Input() text: string|undefined;
+      @Input() text: string | undefined;
     }
 
     TestBed.configureTestingModule({declarations: [TextDirective]});
     TestBed.overrideTemplate(
-        TestApp, `<ng-template text="first" [ngIf]="true"><div text="second"></div></ng-template>`);
+      TestApp,
+      `<ng-template text="first" [ngIf]="true"><div text="second"></div></ng-template>`,
+    );
 
     const fixture = TestBed.createComponent(TestApp);
     fixture.detectChanges();
@@ -533,12 +546,15 @@ describe('debug element', () => {
   it('should query directives on views moved in the DOM', () => {
     @Directive({selector: '[text]'})
     class TextDirective {
-      @Input() text: string|undefined;
+      @Input() text: string | undefined;
     }
 
     @Directive({selector: '[moveView]'})
     class ViewManipulatingDirective {
-      constructor(private _vcRef: ViewContainerRef, private _tplRef: TemplateRef<any>) {}
+      constructor(
+        private _vcRef: ViewContainerRef,
+        private _tplRef: TemplateRef<any>,
+      ) {}
 
       insert() {
         this._vcRef.createEmbeddedView(this._tplRef);
@@ -546,7 +562,7 @@ describe('debug element', () => {
 
       removeFromTheDom() {
         const viewRef = this._vcRef.get(0) as EmbeddedViewRef<any>;
-        viewRef.rootNodes.forEach(rootNode => {
+        viewRef.rootNodes.forEach((rootNode) => {
           getDOM().remove(rootNode);
         });
       }
@@ -554,14 +570,16 @@ describe('debug element', () => {
 
     TestBed.configureTestingModule({declarations: [TextDirective, ViewManipulatingDirective]});
     TestBed.overrideTemplate(
-        TestApp, `<ng-template text="first" moveView><div text="second"></div></ng-template>`);
+      TestApp,
+      `<ng-template text="first" moveView><div text="second"></div></ng-template>`,
+    );
 
     const fixture = TestBed.createComponent(TestApp);
     fixture.detectChanges();
 
-    const viewMover =
-        fixture.debugElement.queryAllNodes(By.directive(ViewManipulatingDirective))[0].injector.get(
-            ViewManipulatingDirective);
+    const viewMover = fixture.debugElement
+      .queryAllNodes(By.directive(ViewManipulatingDirective))[0]
+      .injector.get(ViewManipulatingDirective);
 
     let debugNodes = fixture.debugElement.queryAllNodes(By.directive(TextDirective));
 
@@ -589,7 +607,7 @@ describe('debug element', () => {
       selector: '[dir]',
     })
     class MyDir {
-      @Input('dir') dir: number|undefined;
+      @Input('dir') dir: number | undefined;
 
       constructor(renderer: Renderer2, element: ElementRef) {
         const div = renderer.createElement('div');
@@ -602,8 +620,7 @@ describe('debug element', () => {
       selector: 'app-test',
       template: '<div dir></div>',
     })
-    class MyComponent {
-    }
+    class MyComponent {}
 
     TestBed.configureTestingModule({declarations: [MyComponent, MyDir]});
     const fixture = TestBed.createComponent(MyComponent);
@@ -635,7 +652,7 @@ describe('debug element', () => {
         selector: '[dir]',
       })
       class MyDir {
-        @Input('dir') dir: number|undefined;
+        @Input('dir') dir: number | undefined;
 
         constructor(renderer: Renderer2, element: ElementRef) {
           const outerDiv = renderer.createElement('div');
@@ -655,8 +672,7 @@ describe('debug element', () => {
         selector: 'app-test',
         template: '<div dir></div>',
       })
-      class MyComponent {
-      }
+      class MyComponent {}
 
       TestBed.configureTestingModule({declarations: [MyComponent, MyDir]});
       fixture = TestBed.createComponent(MyComponent);
@@ -674,7 +690,7 @@ describe('debug element', () => {
     });
   });
 
-  describe('DebugElement.query doesn\'t fail on elements outside Angular context', () => {
+  describe("DebugElement.query doesn't fail on elements outside Angular context", () => {
     @Component({template: '<div></div>'})
     class NativeEl {
       constructor(private elementRef: ElementRef) {}
@@ -688,54 +704,55 @@ describe('debug element', () => {
 
     let el: DebugElement;
     beforeEach(() => {
-      const fixture =
-          TestBed.configureTestingModule({declarations: [NativeEl]}).createComponent(NativeEl);
+      const fixture = TestBed.configureTestingModule({declarations: [NativeEl]}).createComponent(
+        NativeEl,
+      );
       fixture.detectChanges();
       el = fixture.debugElement;
     });
 
     it('when searching for elements by name', () => {
-      expect(() => el.query(e => e.name === 'any search text')).not.toThrow();
+      expect(() => el.query((e) => e.name === 'any search text')).not.toThrow();
     });
 
     it('when searching for elements by their attributes', () => {
-      expect(() => el.query(e => e.attributes!['name'] === 'any attribute')).not.toThrow();
+      expect(() => el.query((e) => e.attributes!['name'] === 'any attribute')).not.toThrow();
     });
 
     it('when searching for elements by their classes', () => {
-      expect(() => el.query(e => e.classes['any class'] === true)).not.toThrow();
+      expect(() => el.query((e) => e.classes['any class'] === true)).not.toThrow();
     });
 
     it('when searching for elements by their styles', () => {
-      expect(() => el.query(e => e.styles['any style'] === 'any value')).not.toThrow();
+      expect(() => el.query((e) => e.styles['any style'] === 'any value')).not.toThrow();
     });
 
     it('when searching for elements by their properties', () => {
-      expect(() => el.query(e => e.properties['any prop'] === 'any value')).not.toThrow();
+      expect(() => el.query((e) => e.properties['any prop'] === 'any value')).not.toThrow();
     });
 
     it('when searching by componentInstance', () => {
-      expect(() => el.query(e => e.componentInstance === null)).not.toThrow();
+      expect(() => el.query((e) => e.componentInstance === null)).not.toThrow();
     });
 
     it('when searching by context', () => {
-      expect(() => el.query(e => e.context === null)).not.toThrow();
+      expect(() => el.query((e) => e.context === null)).not.toThrow();
     });
 
     it('when searching by listeners', () => {
-      expect(() => el.query(e => e.listeners.length === 0)).not.toThrow();
+      expect(() => el.query((e) => e.listeners.length === 0)).not.toThrow();
     });
 
     it('when searching by references', () => {
-      expect(() => el.query(e => e.references === null)).not.toThrow();
+      expect(() => el.query((e) => e.references === null)).not.toThrow();
     });
 
     it('when searching by providerTokens', () => {
-      expect(() => el.query(e => e.providerTokens.length === 0)).not.toThrow();
+      expect(() => el.query((e) => e.providerTokens.length === 0)).not.toThrow();
     });
 
     it('when searching by injector', () => {
-      expect(() => el.query(e => e.injector === null)).not.toThrow();
+      expect(() => el.query((e) => e.injector === null)).not.toThrow();
     });
 
     it('when using the out-of-context element as the DebugElement query root', () => {
@@ -745,36 +762,34 @@ describe('debug element', () => {
     });
   });
 
-  it('DebugElement.queryAll should pick up both elements inserted via the view and through Renderer2',
-     () => {
-       @Directive({
-         selector: '[dir]',
-       })
-       class MyDir {
-         @Input('dir') dir: number|undefined;
-
-         constructor(renderer: Renderer2, element: ElementRef) {
-           const div = renderer.createElement('div');
-           div.classList.add('myclass');
-           renderer.appendChild(element.nativeElement, div);
-         }
-       }
-
-       @Component({
-         selector: 'app-test',
-         template: '<div dir></div><span class="myclass"></span>',
-       })
-       class MyComponent {
-       }
-
-       TestBed.configureTestingModule({declarations: [MyComponent, MyDir]});
-       const fixture = TestBed.createComponent(MyComponent);
-       fixture.detectChanges();
-
-       const results = fixture.debugElement.queryAll(By.css('.myclass'));
-
-       expect(results.map(r => r.nativeElement.nodeName.toLowerCase())).toEqual(['div', 'span']);
-     });
+  it('DebugElement.queryAll should pick up both elements inserted via the view and through Renderer2', () => {
+    @Directive({
+      selector: '[dir]',
+    })
+    class MyDir {
+      @Input('dir') dir: number | undefined;
+
+      constructor(renderer: Renderer2, element: ElementRef) {
+        const div = renderer.createElement('div');
+        div.classList.add('myclass');
+        renderer.appendChild(element.nativeElement, div);
+      }
+    }
+
+    @Component({
+      selector: 'app-test',
+      template: '<div dir></div><span class="myclass"></span>',
+    })
+    class MyComponent {}
+
+    TestBed.configureTestingModule({declarations: [MyComponent, MyDir]});
+    const fixture = TestBed.createComponent(MyComponent);
+    fixture.detectChanges();
+
+    const results = fixture.debugElement.queryAll(By.css('.myclass'));
+
+    expect(results.map((r) => r.nativeElement.nodeName.toLowerCase())).toEqual(['div', 'span']);
+  });
 
   it('should list providerTokens', () => {
     fixture = TestBed.createComponent(ParentComp);
@@ -794,8 +809,11 @@ describe('debug element', () => {
     fixture = TestBed.createComponent(ParentComp);
     fixture.detectChanges();
 
-    expect((<Logger>(fixture.debugElement.children[0].injector.get(Logger))).logs).toEqual([
-      'parent', 'nestedparent', 'child', 'nestedchild'
+    expect((<Logger>fixture.debugElement.children[0].injector.get(Logger)).logs).toEqual([
+      'parent',
+      'nestedparent',
+      'child',
+      'nestedchild',
     ]);
   });
 
@@ -872,7 +890,9 @@ describe('debug element', () => {
 
     it('should not include directive-shadowed properties in the properties map', () => {
       TestBed.overrideTemplate(
-          TestCmptWithPropInterpolation, `<button with-title [title]="'goes to input'"></button>`);
+        TestCmptWithPropInterpolation,
+        `<button with-title [title]="'goes to input'"></button>`,
+      );
       const fixture = TestBed.createComponent(TestCmptWithPropInterpolation);
       fixture.detectChanges();
 
@@ -891,16 +911,18 @@ describe('debug element', () => {
 
     it('should not include patched properties (starting with __) and on* properties', () => {
       TestBed.overrideTemplate(
-          TestCmptWithPropInterpolation, `<button title="myTitle" (click)="true;"></button>`);
+        TestCmptWithPropInterpolation,
+        `<button title="myTitle" (click)="true;"></button>`,
+      );
       const fixture = TestBed.createComponent(TestCmptWithPropInterpolation);
       fixture.detectChanges();
 
       const host = fixture.debugElement;
       const button = fixture.debugElement.query(By.css('button'));
-      expect(Object.keys(host.properties).filter(key => key.startsWith('__'))).toEqual([]);
-      expect(Object.keys(host.properties).filter(key => key.startsWith('on'))).toEqual([]);
-      expect(Object.keys(button.properties).filter(key => key.startsWith('__'))).toEqual([]);
-      expect(Object.keys(button.properties).filter(key => key.startsWith('on'))).toEqual([]);
+      expect(Object.keys(host.properties).filter((key) => key.startsWith('__'))).toEqual([]);
+      expect(Object.keys(host.properties).filter((key) => key.startsWith('on'))).toEqual([]);
+      expect(Object.keys(button.properties).filter((key) => key.startsWith('__'))).toEqual([]);
+      expect(Object.keys(button.properties).filter((key) => key.startsWith('on'))).toEqual([]);
     });
 
     it('should pickup all of the element properties', () => {
@@ -922,7 +944,10 @@ describe('debug element', () => {
       eventObj1: any;
       eventObj2: any;
       constructor(
-          private renderer: Renderer2, private elementRef: ElementRef, private ngZone: NgZone) {}
+        private renderer: Renderer2,
+        private elementRef: ElementRef,
+        private ngZone: NgZone,
+      ) {}
 
       ngOnInit() {
         this.renderer.listen(this.elementRef.nativeElement, 'click', (event: any) => {
@@ -987,90 +1012,84 @@ describe('debug element', () => {
       expect(debugEl.componentInstance).toBeInstanceOf(ParentComp);
     });
 
-    it('should return component associated with a node if a node is a component host (content projection)',
-       () => {
-         TestBed.overrideTemplate(TestCmpt, `<parent-comp><child-comp></child-comp></parent-comp>`);
-         fixture = TestBed.createComponent(TestCmpt);
+    it('should return component associated with a node if a node is a component host (content projection)', () => {
+      TestBed.overrideTemplate(TestCmpt, `<parent-comp><child-comp></child-comp></parent-comp>`);
+      fixture = TestBed.createComponent(TestCmpt);
 
-         const debugEl = fixture.debugElement.query(By.directive(ChildComp));
-         expect(debugEl.componentInstance).toBeInstanceOf(ChildComp);
-       });
+      const debugEl = fixture.debugElement.query(By.directive(ChildComp));
+      expect(debugEl.componentInstance).toBeInstanceOf(ChildComp);
+    });
 
-    it('should return host component instance if a node has no associated component and there is no component projecting this node',
-       () => {
-         TestBed.overrideTemplate(TestCmpt, `<div></div>`);
-         fixture = TestBed.createComponent(TestCmpt);
+    it('should return host component instance if a node has no associated component and there is no component projecting this node', () => {
+      TestBed.overrideTemplate(TestCmpt, `<div></div>`);
+      fixture = TestBed.createComponent(TestCmpt);
 
-         const debugEl = fixture.debugElement.children[0];
-         expect(debugEl.componentInstance).toBeInstanceOf(TestCmpt);
-       });
+      const debugEl = fixture.debugElement.children[0];
+      expect(debugEl.componentInstance).toBeInstanceOf(TestCmpt);
+    });
 
-    it('should return host component instance if a node has no associated component and there is no component projecting this node (nested embedded views)',
-       () => {
-         TestBed.overrideTemplate(TestCmpt, `
+    it('should return host component instance if a node has no associated component and there is no component projecting this node (nested embedded views)', () => {
+      TestBed.overrideTemplate(
+        TestCmpt,
+        `
                 <ng-template [ngIf]="true">
                   <ng-template [ngIf]="true">
                     <div mydir></div>
                   </ng-template>
-                </ng-template>`);
-         fixture = TestBed.createComponent(TestCmpt);
-         fixture.detectChanges();
-
-         const debugEl = fixture.debugElement.query(By.directive(MyDir));
-         expect(debugEl.componentInstance).toBeInstanceOf(TestCmpt);
-       });
-
-    it('should return component instance that projects a given node if a node has no associated component',
-       () => {
-         TestBed.overrideTemplate(TestCmpt, `<parent-comp><span><div></div></span></parent-comp>`);
-         fixture = TestBed.createComponent(TestCmpt);
-
-         const debugEl = fixture.debugElement.children[0].children[0].children[0];  // <div>
-         expect(debugEl.componentInstance).toBeInstanceOf(ParentComp);
-       });
+                </ng-template>`,
+      );
+      fixture = TestBed.createComponent(TestCmpt);
+      fixture.detectChanges();
+
+      const debugEl = fixture.debugElement.query(By.directive(MyDir));
+      expect(debugEl.componentInstance).toBeInstanceOf(TestCmpt);
+    });
+
+    it('should return component instance that projects a given node if a node has no associated component', () => {
+      TestBed.overrideTemplate(TestCmpt, `<parent-comp><span><div></div></span></parent-comp>`);
+      fixture = TestBed.createComponent(TestCmpt);
+
+      const debugEl = fixture.debugElement.children[0].children[0].children[0]; // <div>
+      expect(debugEl.componentInstance).toBeInstanceOf(ParentComp);
+    });
   });
 
   describe('context on DebugNode', () => {
-    it('should return component associated with the node if both a structural directive and a component match the node',
-       () => {
-         @Component({selector: 'example-component', template: ''})
-         class ExampleComponent {
-         }
-
-         TestBed.configureTestingModule(
-             {imports: [CommonModule], declarations: [ExampleComponent]});
-         TestBed.overrideTemplate(TestApp, '<example-component *ngIf="true"></example-component>');
-
-         const fixture = TestBed.createComponent(TestApp);
-         fixture.detectChanges();
-         const debugNode = fixture.debugElement.query(By.directive(ExampleComponent));
-
-         expect(debugNode.context instanceof ExampleComponent).toBe(true);
-       });
-
-    it('should return structural directive context if there is a structural directive on the node',
-       () => {
-         TestBed.configureTestingModule({imports: [CommonModule]});
-         TestBed.overrideTemplate(TestApp, '<span *ngIf="true"></span>');
-
-         const fixture = TestBed.createComponent(TestApp);
-         fixture.detectChanges();
-         const debugNode = fixture.debugElement.query(By.css('span'));
-
-         expect(debugNode.context instanceof NgIfContext).toBe(true);
-       });
-
-    it('should return the containing component if there is no structural directive or component on the node',
-       () => {
-         TestBed.configureTestingModule({declarations: [MyDir]});
-         TestBed.overrideTemplate(TestApp, '<span mydir></span>');
-
-         const fixture = TestBed.createComponent(TestApp);
-         fixture.detectChanges();
-         const debugNode = fixture.debugElement.query(By.directive(MyDir));
-
-         expect(debugNode.context instanceof TestApp).toBe(true);
-       });
+    it('should return component associated with the node if both a structural directive and a component match the node', () => {
+      @Component({selector: 'example-component', template: ''})
+      class ExampleComponent {}
+
+      TestBed.configureTestingModule({imports: [CommonModule], declarations: [ExampleComponent]});
+      TestBed.overrideTemplate(TestApp, '<example-component *ngIf="true"></example-component>');
+
+      const fixture = TestBed.createComponent(TestApp);
+      fixture.detectChanges();
+      const debugNode = fixture.debugElement.query(By.directive(ExampleComponent));
+
+      expect(debugNode.context instanceof ExampleComponent).toBe(true);
+    });
+
+    it('should return structural directive context if there is a structural directive on the node', () => {
+      TestBed.configureTestingModule({imports: [CommonModule]});
+      TestBed.overrideTemplate(TestApp, '<span *ngIf="true"></span>');
+
+      const fixture = TestBed.createComponent(TestApp);
+      fixture.detectChanges();
+      const debugNode = fixture.debugElement.query(By.css('span'));
+
+      expect(debugNode.context instanceof NgIfContext).toBe(true);
+    });
+
+    it('should return the containing component if there is no structural directive or component on the node', () => {
+      TestBed.configureTestingModule({declarations: [MyDir]});
+      TestBed.overrideTemplate(TestApp, '<span mydir></span>');
+
+      const fixture = TestBed.createComponent(TestApp);
+      fixture.detectChanges();
+      const debugNode = fixture.debugElement.query(By.directive(MyDir));
+
+      expect(debugNode.context instanceof TestApp).toBe(true);
+    });
   });
 
   it('should be able to query for elements that are not in the same DOM tree anymore', () => {
@@ -1148,10 +1167,9 @@ describe('debug element', () => {
               <span class="span.8">span.8</span>
             </p>
           </div>
-        `
+        `,
     })
-    class MyComp {
-    }
+    class MyComp {}
 
     TestBed.configureTestingModule({declarations: [MyComp]});
     const fixture = TestBed.createComponent(MyComp);
@@ -1160,8 +1178,11 @@ describe('debug element', () => {
     const firstDiv = fixture.debugElement.query(By.css('div'));
     const firstDivChildren = firstDiv.queryAll(By.css('span'));
 
-    expect(firstDivChildren.map(child => child.nativeNode.textContent.trim())).toEqual([
-      'span.1', 'span.2', 'span.3', 'span.4'
+    expect(firstDivChildren.map((child) => child.nativeNode.textContent.trim())).toEqual([
+      'span.1',
+      'span.2',
+      'span.3',
+      'span.4',
     ]);
   });
 
@@ -1171,8 +1192,7 @@ describe('debug element', () => {
       @Input() svgIcon: any = '';
     }
     @Component({template: `<my-icon svgIcon="test"></my-icon>`})
-    class App {
-    }
+    class App {}
 
     TestBed.configureTestingModule({declarations: [App, Icon]});
     const fixture = TestBed.createComponent(App);
@@ -1186,13 +1206,11 @@ describe('debug element', () => {
     expect(element.attributes['svgicon']).toBeFalsy();
   });
 
-
   it('should include namespaced attributes in DebugNode.attributes', () => {
     @Component({
       template: `<div xlink:href="foo"></div>`,
     })
-    class Comp {
-    }
+    class Comp {}
 
     TestBed.configureTestingModule({declarations: [Comp]});
     const fixture = TestBed.createComponent(Comp);
@@ -1257,11 +1275,11 @@ describe('debug element', () => {
 
   it('should not error when accessing node name', () => {
     @Component({template: ''})
-    class EmptyComponent {
-    }
+    class EmptyComponent {}
 
-    const fixture = TestBed.configureTestingModule({declarations: [EmptyComponent]})
-                        .createComponent(EmptyComponent);
+    const fixture = TestBed.configureTestingModule({
+      declarations: [EmptyComponent],
+    }).createComponent(EmptyComponent);
     let node = fixture.debugElement;
     let superParentName = '';
     // Traverse upwards, all the way to #document, which is not a
@@ -1275,17 +1293,16 @@ describe('debug element', () => {
 
   it('should match node name with declared casing', () => {
     @Component({template: `<div></div><myComponent></myComponent>`})
-    class Wrapper {
-    }
+    class Wrapper {}
 
     @Component({selector: 'myComponent', template: ''})
-    class MyComponent {
-    }
+    class MyComponent {}
 
-    const fixture = TestBed.configureTestingModule({declarations: [Wrapper, MyComponent]})
-                        .createComponent(Wrapper);
-    expect(fixture.debugElement.query(e => e.name === 'myComponent')).toBeTruthy();
-    expect(fixture.debugElement.query(e => e.name === 'div')).toBeTruthy();
+    const fixture = TestBed.configureTestingModule({
+      declarations: [Wrapper, MyComponent],
+    }).createComponent(Wrapper);
+    expect(fixture.debugElement.query((e) => e.name === 'myComponent')).toBeTruthy();
+    expect(fixture.debugElement.query((e) => e.name === 'div')).toBeTruthy();
   });
 
   it('does not call event listeners added outside angular context', () => {
@@ -1296,15 +1313,19 @@ describe('debug element', () => {
     }
     @Component({template: ''})
     class MyComp {
-      constructor(private readonly zone: NgZone, private readonly element: ElementRef) {}
+      constructor(
+        private readonly zone: NgZone,
+        private readonly element: ElementRef,
+      ) {}
       ngOnInit() {
         this.zone.runOutsideAngular(() => {
           this.element.nativeElement.addEventListener('mouseenter', listener);
         });
       }
     }
-    const fixture =
-        TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+    const fixture = TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(
+      MyComp,
+    );
     fixture.detectChanges();
     fixture.debugElement.triggerEventHandler('mouseenter', eventToTrigger);
     expect(listenerCalled).toBe(false);
diff --git a/packages/core/test/defer_fixture_spec.ts b/packages/core/test/defer_fixture_spec.ts
index b4c52d20376da..d53636806bb1a 100644
--- a/packages/core/test/defer_fixture_spec.ts
+++ b/packages/core/test/defer_fixture_spec.ts
@@ -16,12 +16,10 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
   standalone: true,
   template: `<div class="more">More Deferred Component</div>`,
 })
-class SecondDeferredComp {
-}
+class SecondDeferredComp {}
 
 const COMMON_PROVIDERS = [{provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID}];
 
-
 describe('DeferFixture', () => {
   it('should start in manual behavior mode', async () => {
     @Component({
@@ -34,16 +32,12 @@ describe('DeferFixture', () => {
             <second-deferred-comp />
           }
         </div>
-      `
+      `,
     })
-    class DeferComp {
-    }
+    class DeferComp {}
 
     TestBed.configureTestingModule({
-      imports: [
-        DeferComp,
-        SecondDeferredComp,
-      ],
+      imports: [DeferComp, SecondDeferredComp],
       providers: COMMON_PROVIDERS,
       deferBlockBehavior: DeferBlockBehavior.Manual,
       teardown: {destroyAfterEach: true},
@@ -65,16 +59,12 @@ describe('DeferFixture', () => {
             <second-deferred-comp />
           }
         </div>
-        `
+        `,
     })
-    class DeferComp {
-    }
+    class DeferComp {}
 
     TestBed.configureTestingModule({
-      imports: [
-        DeferComp,
-        SecondDeferredComp,
-      ],
+      imports: [DeferComp, SecondDeferredComp],
       providers: COMMON_PROVIDERS,
     });
 
@@ -94,17 +84,14 @@ describe('DeferFixture', () => {
             <second-deferred-comp />
           }
         </div>
-      `
+      `,
     })
     class DeferComp {
       shouldLoad = false;
     }
 
     TestBed.configureTestingModule({
-      imports: [
-        DeferComp,
-        SecondDeferredComp,
-      ],
+      imports: [DeferComp, SecondDeferredComp],
       providers: COMMON_PROVIDERS,
     });
 
@@ -115,7 +102,7 @@ describe('DeferFixture', () => {
     componentFixture.componentInstance.shouldLoad = true;
     componentFixture.detectChanges();
 
-    await componentFixture.whenStable();  // await loading of deps
+    await componentFixture.whenStable(); // await loading of deps
 
     expect(el.querySelector('.more')).toBeDefined();
   });
@@ -131,17 +118,14 @@ describe('DeferFixture', () => {
             <second-deferred-comp />
           }
         </div>
-      `
+      `,
     })
     class DeferComp {
       shouldLoad = false;
     }
 
     TestBed.configureTestingModule({
-      imports: [
-        DeferComp,
-        SecondDeferredComp,
-      ],
+      imports: [DeferComp, SecondDeferredComp],
       providers: COMMON_PROVIDERS,
       deferBlockBehavior: DeferBlockBehavior.Manual,
     });
@@ -153,7 +137,7 @@ describe('DeferFixture', () => {
     componentFixture.componentInstance.shouldLoad = true;
     componentFixture.detectChanges();
 
-    await componentFixture.whenStable();  // await loading of deps
+    await componentFixture.whenStable(); // await loading of deps
 
     expect(el.querySelectorAll('.more').length).toBe(0);
   });
@@ -169,16 +153,12 @@ describe('DeferFixture', () => {
             <second-deferred-comp />
           }
         </div>
-      `
+      `,
     })
-    class DeferComp {
-    }
+    class DeferComp {}
 
     TestBed.configureTestingModule({
-      imports: [
-        DeferComp,
-        SecondDeferredComp,
-      ],
+      imports: [DeferComp, SecondDeferredComp],
       providers: COMMON_PROVIDERS,
       deferBlockBehavior: DeferBlockBehavior.Manual,
     });
@@ -201,7 +181,7 @@ describe('DeferFixture', () => {
             <second-deferred-comp />
           }
         </div>
-      `
+      `,
     })
     class DeferComp {
       constructor(taskService: PendingTasks) {
@@ -211,10 +191,7 @@ describe('DeferFixture', () => {
     }
 
     TestBed.configureTestingModule({
-      imports: [
-        DeferComp,
-        SecondDeferredComp,
-      ],
+      imports: [DeferComp, SecondDeferredComp],
       providers: COMMON_PROVIDERS,
       deferBlockBehavior: DeferBlockBehavior.Manual,
     });
@@ -238,16 +215,12 @@ describe('DeferFixture', () => {
             <second-deferred-comp />
           }
         </div>
-      `
+      `,
     })
-    class DeferComp {
-    }
+    class DeferComp {}
 
     TestBed.configureTestingModule({
-      imports: [
-        DeferComp,
-        SecondDeferredComp,
-      ],
+      imports: [DeferComp, SecondDeferredComp],
       providers: COMMON_PROVIDERS,
       deferBlockBehavior: DeferBlockBehavior.Manual,
     });
@@ -272,16 +245,12 @@ describe('DeferFixture', () => {
             <span class="ph">This is placeholder content</span>
           }
         </div>
-      `
+      `,
     })
-    class DeferComp {
-    }
+    class DeferComp {}
 
     TestBed.configureTestingModule({
-      imports: [
-        DeferComp,
-        SecondDeferredComp,
-      ],
+      imports: [DeferComp, SecondDeferredComp],
       providers: COMMON_PROVIDERS,
       deferBlockBehavior: DeferBlockBehavior.Manual,
     });
@@ -309,16 +278,12 @@ describe('DeferFixture', () => {
             <span class="loading">Loading...</span>
           }w
         </div>
-      `
+      `,
     })
-    class DeferComp {
-    }
+    class DeferComp {}
 
     TestBed.configureTestingModule({
-      imports: [
-        DeferComp,
-        SecondDeferredComp,
-      ],
+      imports: [DeferComp, SecondDeferredComp],
       providers: COMMON_PROVIDERS,
       deferBlockBehavior: DeferBlockBehavior.Manual,
     });
@@ -346,16 +311,12 @@ describe('DeferFixture', () => {
             <span class="error">Flagrant Error!</span>
           }
         </div>
-      `
+      `,
     })
-    class DeferComp {
-    }
+    class DeferComp {}
 
     TestBed.configureTestingModule({
-      imports: [
-        DeferComp,
-        SecondDeferredComp,
-      ],
+      imports: [DeferComp, SecondDeferredComp],
       providers: COMMON_PROVIDERS,
       deferBlockBehavior: DeferBlockBehavior.Manual,
     });
@@ -381,16 +342,12 @@ describe('DeferFixture', () => {
             <second-deferred-comp />
           }
         </div>
-      `
+      `,
     })
-    class DeferComp {
-    }
+    class DeferComp {}
 
     TestBed.configureTestingModule({
-      imports: [
-        DeferComp,
-        SecondDeferredComp,
-      ],
+      imports: [DeferComp, SecondDeferredComp],
       providers: COMMON_PROVIDERS,
       deferBlockBehavior: DeferBlockBehavior.Manual,
     });
@@ -400,10 +357,10 @@ describe('DeferFixture', () => {
     try {
       await deferBlock.render(DeferBlockState.Placeholder);
     } catch (er: any) {
-      expect(er.message)
-          .toBe(
-              'Tried to render this defer block in the `Placeholder` state, but' +
-              ' there was no @placeholder block defined in a template.');
+      expect(er.message).toBe(
+        'Tried to render this defer block in the `Placeholder` state, but' +
+          ' there was no @placeholder block defined in a template.',
+      );
     }
   });
 
@@ -422,16 +379,12 @@ describe('DeferFixture', () => {
             Placeholder
           }
         </div>
-      `
+      `,
     })
-    class DeferComp {
-    }
+    class DeferComp {}
 
     TestBed.configureTestingModule({
-      imports: [
-        DeferComp,
-        SecondDeferredComp,
-      ],
+      imports: [DeferComp, SecondDeferredComp],
       providers: COMMON_PROVIDERS,
       deferBlockBehavior: DeferBlockBehavior.Manual,
     });
@@ -462,8 +415,7 @@ describe('DeferFixture', () => {
         </div>
       `,
     })
-    class DeferredComp {
-    }
+    class DeferredComp {}
 
     @Component({
       selector: 'defer-comp',
@@ -475,18 +427,13 @@ describe('DeferFixture', () => {
             <deferred-comp />
           }
         </div>
-      `
+      `,
     })
-    class DeferComp {
-    }
+    class DeferComp {}
 
     TestBed.configureTestingModule({
-      imports: [
-        DeferComp,
-        DeferredComp,
-        SecondDeferredComp,
-      ],
-      providers: COMMON_PROVIDERS
+      imports: [DeferComp, DeferredComp, SecondDeferredComp],
+      providers: COMMON_PROVIDERS,
     });
 
     const componentFixture = TestBed.createComponent(DeferComp);
diff --git a/packages/core/test/di/injector_spec.ts b/packages/core/test/di/injector_spec.ts
index 6b6d490bf6b68..0e990fb20218c 100644
--- a/packages/core/test/di/injector_spec.ts
+++ b/packages/core/test/di/injector_spec.ts
@@ -6,18 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 import {Injector} from '@angular/core';
 
 describe('Injector.NULL', () => {
   it('should throw if no arg is given', () => {
-    expect(() => Injector.NULL.get('someToken'))
-        .toThrowError('NullInjectorError: No provider for someToken!');
+    expect(() => Injector.NULL.get('someToken')).toThrowError(
+      'NullInjectorError: No provider for someToken!',
+    );
   });
 
   it('should throw if THROW_IF_NOT_FOUND is given', () => {
-    expect(() => Injector.NULL.get('someToken', Injector.THROW_IF_NOT_FOUND))
-        .toThrowError('NullInjectorError: No provider for someToken!');
+    expect(() => Injector.NULL.get('someToken', Injector.THROW_IF_NOT_FOUND)).toThrowError(
+      'NullInjectorError: No provider for someToken!',
+    );
   });
 
   it('should return the default value', () => {
diff --git a/packages/core/test/di/r3_injector_spec.ts b/packages/core/test/di/r3_injector_spec.ts
index 8fb92fb23afb5..ec7c54ca69ae9 100644
--- a/packages/core/test/di/r3_injector_spec.ts
+++ b/packages/core/test/di/r3_injector_spec.ts
@@ -6,7 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InjectFlags, InjectionToken, INJECTOR, Injector, Optional, ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵinject} from '@angular/core';
+import {
+  InjectFlags,
+  InjectionToken,
+  INJECTOR,
+  Injector,
+  Optional,
+  ɵɵdefineInjectable,
+  ɵɵdefineInjector,
+  ɵɵinject,
+} from '@angular/core';
 import {createInjector} from '@angular/core/src/di/create_injector';
 import {R3Injector} from '@angular/core/src/di/r3_injector';
 
@@ -64,12 +73,12 @@ describe('InjectorDef-based createInjector()', () => {
       providedIn: null,
       // ChildService is derived from ServiceWithDep, so the factory function here must do the right
       // thing and create an instance of the requested type if one is given.
-      factory: (t?: any) => new(t || ServiceWithDep)(ɵɵinject(Service)),
+      factory: (t?: any) => new (t || ServiceWithDep)(ɵɵinject(Service)),
     });
   }
 
   class ServiceWithOptionalDep {
-    constructor(@Optional() readonly service: OptionalService|null) {}
+    constructor(@Optional() readonly service: OptionalService | null) {}
 
     static ɵprov = ɵɵdefineInjectable({
       token: ServiceWithOptionalDep,
@@ -141,17 +150,15 @@ describe('InjectorDef-based createInjector()', () => {
     static ɵfac = () => new DeepModule(ɵɵinject(EagerService));
     static ɵinj = ɵɵdefineInjector({
       imports: undefined,
-      providers:
-          [
-            EagerService,
-            {
-              provide: DeepService,
-              useFactory:
-                  () => {
-                    throw new Error('Not overridden!');
-                  }
-            },
-          ],
+      providers: [
+        EagerService,
+        {
+          provide: DeepService,
+          useFactory: () => {
+            throw new Error('Not overridden!');
+          },
+        },
+      ],
     });
 
     static safe() {
@@ -190,32 +197,33 @@ describe('InjectorDef-based createInjector()', () => {
   class Module {
     static ɵinj = ɵɵdefineInjector({
       imports: [IntermediateModule],
-      providers:
-          [
-            ChildService,
-            ServiceWithDep,
-            ServiceWithOptionalDep,
-            ServiceWithMultiDep,
-            {provide: LOCALE, multi: true, useValue: 'en'},
-            {provide: LOCALE, multi: true, useValue: 'es'},
-            {provide: PRIMITIVE_VALUE, useValue: 'foo'},
-            {provide: UNDEFINED_VALUE, useValue: undefined},
-            Service,
-            {provide: SERVICE_TOKEN, useExisting: Service},
-            CircularA,
-            CircularB,
-            {provide: STATIC_TOKEN, useClass: StaticService, deps: [Service]},
-            InjectorWithDep,
-            AbstractService,
-          ],
+      providers: [
+        ChildService,
+        ServiceWithDep,
+        ServiceWithOptionalDep,
+        ServiceWithMultiDep,
+        {provide: LOCALE, multi: true, useValue: 'en'},
+        {provide: LOCALE, multi: true, useValue: 'es'},
+        {provide: PRIMITIVE_VALUE, useValue: 'foo'},
+        {provide: UNDEFINED_VALUE, useValue: undefined},
+        Service,
+        {provide: SERVICE_TOKEN, useExisting: Service},
+        CircularA,
+        CircularB,
+        {provide: STATIC_TOKEN, useClass: StaticService, deps: [Service]},
+        InjectorWithDep,
+        AbstractService,
+      ],
     });
   }
 
-  const ABSTRACT_SERVICE_TOKEN_WITH_FACTORY =
-      new InjectionToken<AbstractService>('ABSTRACT_SERVICE_TOKEN', {
-        providedIn: Module,
-        factory: () => ɵɵinject(AbstractService),
-      });
+  const ABSTRACT_SERVICE_TOKEN_WITH_FACTORY = new InjectionToken<AbstractService>(
+    'ABSTRACT_SERVICE_TOKEN',
+    {
+      providedIn: Module,
+      factory: () => ɵɵinject(AbstractService),
+    },
+  );
 
   class OtherModule {
     static ɵinj = ɵɵdefineInjector({
@@ -277,7 +285,7 @@ describe('InjectorDef-based createInjector()', () => {
     static ɵinj = ɵɵdefineInjector({
       imports: [
         {ngModule: MultiProviderA, providers: [{provide: LOCALE, multi: true, useValue: 'C'}]},
-        MultiProviderB
+        MultiProviderB,
       ],
       providers: [],
     });
@@ -322,31 +330,30 @@ describe('InjectorDef-based createInjector()', () => {
     expect(injector.get(Service)).toBe(instance);
   });
 
-  it('returns the default value if a provider isn\'t present', () => {
+  it("returns the default value if a provider isn't present", () => {
     expect(injector.get(ServiceTwo, null)).toBeNull();
   });
 
   it('should throw when no provider defined', () => {
-    expect(() => injector.get(ServiceTwo))
-        .toThrowError(
-            `R3InjectorError(Module)[ServiceTwo]: \n` +
-            `  NullInjectorError: No provider for ServiceTwo!`);
+    expect(() => injector.get(ServiceTwo)).toThrowError(
+      `R3InjectorError(Module)[ServiceTwo]: \n` +
+        `  NullInjectorError: No provider for ServiceTwo!`,
+    );
   });
 
   it('should throw without the module name when no module', () => {
     const injector = createInjector([ServiceTwo]);
-    expect(() => injector.get(ServiceTwo))
-        .toThrowError(
-            `R3InjectorError[ServiceTwo]: \n` +
-            `  NullInjectorError: No provider for ServiceTwo!`);
+    expect(() => injector.get(ServiceTwo)).toThrowError(
+      `R3InjectorError[ServiceTwo]: \n` + `  NullInjectorError: No provider for ServiceTwo!`,
+    );
   });
 
   it('should throw with the full path when no provider', () => {
     const injector = createInjector(ModuleWithMissingDep);
-    expect(() => injector.get(ServiceWithMissingDep))
-        .toThrowError(
-            `R3InjectorError(ModuleWithMissingDep)[ServiceWithMissingDep -> Service]: \n` +
-            `  NullInjectorError: No provider for Service!`);
+    expect(() => injector.get(ServiceWithMissingDep)).toThrowError(
+      `R3InjectorError(ModuleWithMissingDep)[ServiceWithMissingDep -> Service]: \n` +
+        `  NullInjectorError: No provider for Service!`,
+    );
   });
 
   it('injects a service with dependencies', () => {
@@ -447,14 +454,16 @@ describe('InjectorDef-based createInjector()', () => {
 
   it('does not allow injection after destroy', () => {
     (injector as R3Injector).destroy();
-    expect(() => injector.get(DeepService))
-        .toThrowError('NG0205: Injector has already been destroyed.');
+    expect(() => injector.get(DeepService)).toThrowError(
+      'NG0205: Injector has already been destroyed.',
+    );
   });
 
   it('does not allow double destroy', () => {
     (injector as R3Injector).destroy();
-    expect(() => (injector as R3Injector).destroy())
-        .toThrowError('NG0205: Injector has already been destroyed.');
+    expect(() => (injector as R3Injector).destroy()).toThrowError(
+      'NG0205: Injector has already been destroyed.',
+    );
   });
 
   it('should not crash when importing something that has no ɵinj', () => {
@@ -483,15 +492,16 @@ describe('InjectorDef-based createInjector()', () => {
       expect(() => injector.get(CircularA)).toThrow();
     });
 
-    it('should throw when it can\'t resolve all arguments', () => {
+    it("should throw when it can't resolve all arguments", () => {
       class MissingArgumentType {
         constructor(missingType: any) {}
       }
       class ErrorModule {
         static ɵinj = ɵɵdefineInjector({providers: [MissingArgumentType]});
       }
-      expect(() => createInjector(ErrorModule).get(MissingArgumentType))
-          .toThrowError('NG0204: Can\'t resolve all parameters for MissingArgumentType: (?).');
+      expect(() => createInjector(ErrorModule).get(MissingArgumentType)).toThrowError(
+        "NG0204: Can't resolve all parameters for MissingArgumentType: (?).",
+      );
     });
   });
 });
diff --git a/packages/core/test/di/static_injector_spec.ts b/packages/core/test/di/static_injector_spec.ts
index c398385f1c6bf..a043f2c6e5eb3 100644
--- a/packages/core/test/di/static_injector_spec.ts
+++ b/packages/core/test/di/static_injector_spec.ts
@@ -45,14 +45,13 @@ describe('child', () => {
     expect(engineFromChild).toBe(engineFromParent);
   });
 
-  it('should not use the child providers when resolving the dependencies of a parent provider',
-     () => {
-       const parent = Injector.create({providers: [Car.PROVIDER, Engine.PROVIDER]});
-       const child = Injector.create({providers: [TurboEngine.PROVIDER], parent});
+  it('should not use the child providers when resolving the dependencies of a parent provider', () => {
+    const parent = Injector.create({providers: [Car.PROVIDER, Engine.PROVIDER]});
+    const child = Injector.create({providers: [TurboEngine.PROVIDER], parent});
 
-       const carFromChild = child.get<Car>(Car);
-       expect(carFromChild.engine).toBeInstanceOf(Engine);
-     });
+    const carFromChild = child.get<Car>(Car);
+    expect(carFromChild.engine).toBeInstanceOf(Engine);
+  });
 
   it('should create new instance in a child injector', () => {
     const parent = Injector.create({providers: [Engine.PROVIDER]});
@@ -72,7 +71,6 @@ describe('child', () => {
   });
 });
 
-
 describe('instantiate', () => {
   it('should instantiate an object in the context of the injector', () => {
     const inj = Injector.create({providers: [Engine.PROVIDER]});
@@ -89,8 +87,8 @@ describe('dependency resolution', () => {
       const inj = Injector.create({
         providers: [
           Engine.PROVIDER,
-          {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [[Engine, new Self()]]}
-        ]
+          {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [[Engine, new Self()]]},
+        ],
       });
 
       expect(inj.get(Car)).toBeInstanceOf(Car);
@@ -99,43 +97,44 @@ describe('dependency resolution', () => {
     it('should throw when not requested provider on self', () => {
       const parent = Injector.create({providers: [Engine.PROVIDER]});
       const child = Injector.create({
-        providers:
-            [{provide: Car, useFactory: (e: Engine) => new Car(e), deps: [[Engine, new Self()]]}],
-        parent
+        providers: [
+          {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [[Engine, new Self()]]},
+        ],
+        parent,
       });
 
-      expect(() => child.get(Car))
-          .toThrowError(
-              `R3InjectorError[${stringify(Car)} -> ${stringify(Engine)}]: \n` +
-              '  NullInjectorError: No provider for Engine!');
+      expect(() => child.get(Car)).toThrowError(
+        `R3InjectorError[${stringify(Car)} -> ${stringify(Engine)}]: \n` +
+          '  NullInjectorError: No provider for Engine!',
+      );
     });
 
     it('should return a default value when not requested provider on self', () => {
       const car = new SportsCar(new Engine());
       const injector = Injector.create({providers: []});
-      expect(injector.get<Car|null>(Car, null, InjectFlags.Self)).toBeNull();
+      expect(injector.get<Car | null>(Car, null, InjectFlags.Self)).toBeNull();
       expect(injector.get<Car>(Car, car, InjectFlags.Self)).toBe(car);
     });
 
     it('should return a default value when not requested provider on self and optional', () => {
       const flags = InjectFlags.Self | InjectFlags.Optional;
       const injector = Injector.create({providers: []});
-      expect(injector.get<Car|null>(Car, null, InjectFlags.Self)).toBeNull();
-      expect(injector.get<Car|number>(Car, 0, flags)).toBe(0);
+      expect(injector.get<Car | null>(Car, null, InjectFlags.Self)).toBeNull();
+      expect(injector.get<Car | number>(Car, 0, flags)).toBe(0);
     });
 
     it(`should return null when not requested provider on self and optional`, () => {
       const flags = InjectFlags.Self | InjectFlags.Optional;
       const injector = Injector.create({providers: []});
-      expect(injector.get<Car|null>(Car, undefined, flags)).toBeNull();
+      expect(injector.get<Car | null>(Car, undefined, flags)).toBeNull();
     });
 
     it('should throw error when not requested provider on self', () => {
       const injector = Injector.create({providers: []});
-      expect(() => injector.get(Car, undefined, InjectFlags.Self))
-          .toThrowError(
-              `R3InjectorError[${stringify(Car)}]: \n` +
-              `  NullInjectorError: No provider for ${stringify(Car)}!`);
+      expect(() => injector.get(Car, undefined, InjectFlags.Self)).toThrowError(
+        `R3InjectorError[${stringify(Car)}]: \n` +
+          `  NullInjectorError: No provider for ${stringify(Car)}!`,
+      );
     });
   });
 
@@ -145,9 +144,9 @@ describe('dependency resolution', () => {
       const child = Injector.create({
         providers: [
           TurboEngine.PROVIDER,
-          {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [[SkipSelf, Engine]]}
+          {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [[SkipSelf, Engine]]},
         ],
-        parent
+        parent,
       });
 
       expect(child.get<Car>(Car).engine).toBeInstanceOf(Engine);
@@ -158,25 +157,30 @@ describe('dependency resolution', () => {
 describe('resolve', () => {
   it('should throw when mixing multi providers with regular providers', () => {
     expect(() => {
-      Injector.create(
-          [{provide: Engine, useClass: BrokenEngine, deps: [], multi: true}, Engine.PROVIDER]);
+      Injector.create([
+        {provide: Engine, useClass: BrokenEngine, deps: [], multi: true},
+        Engine.PROVIDER,
+      ]);
     }).toThrowError(/Cannot mix multi providers and regular providers/);
 
     expect(() => {
-      Injector.create(
-          [Engine.PROVIDER, {provide: Engine, useClass: BrokenEngine, deps: [], multi: true}]);
+      Injector.create([
+        Engine.PROVIDER,
+        {provide: Engine, useClass: BrokenEngine, deps: [], multi: true},
+      ]);
     }).toThrowError(/Cannot mix multi providers and regular providers/);
   });
 
   it('should resolve forward references', () => {
     const injector = Injector.create({
       providers: [
-        [{provide: forwardRef(() => BrokenEngine), useClass: forwardRef(() => Engine), deps: []}], {
+        [{provide: forwardRef(() => BrokenEngine), useClass: forwardRef(() => Engine), deps: []}],
+        {
           provide: forwardRef(() => String),
           useFactory: (e: any) => e,
-          deps: [forwardRef(() => BrokenEngine)]
-        }
-      ]
+          deps: [forwardRef(() => BrokenEngine)],
+        },
+      ],
     });
     expect(injector.get(String)).toBeInstanceOf(Engine);
     expect(injector.get(BrokenEngine)).toBeInstanceOf(Engine);
@@ -185,8 +189,9 @@ describe('resolve', () => {
   it('should support overriding factory dependencies with dependency annotations', () => {
     const injector = Injector.create({
       providers: [
-        Engine.PROVIDER, {provide: 'token', useFactory: (e: any) => e, deps: [[new Inject(Engine)]]}
-      ]
+        Engine.PROVIDER,
+        {provide: 'token', useFactory: (e: any) => e, deps: [[new Inject(Engine)]]},
+      ],
     });
 
     expect(injector.get('token')).toBeInstanceOf(Engine);
@@ -195,9 +200,12 @@ describe('resolve', () => {
 
 describe('displayName', () => {
   it('should work', () => {
-    expect(Injector.create({providers: [Engine.PROVIDER, {provide: BrokenEngine, useValue: null}]})
-               .toString())
-        .toEqual(
-            'R3Injector[Engine, BrokenEngine, InjectionToken INJECTOR, InjectionToken INJECTOR_DEF_TYPES, InjectionToken ENVIRONMENT_INITIALIZER]');
+    expect(
+      Injector.create({
+        providers: [Engine.PROVIDER, {provide: BrokenEngine, useValue: null}],
+      }).toString(),
+    ).toEqual(
+      'R3Injector[Engine, BrokenEngine, InjectionToken INJECTOR, InjectionToken INJECTOR_DEF_TYPES, InjectionToken ENVIRONMENT_INITIALIZER]',
+    );
   });
 });
diff --git a/packages/core/test/directive_lifecycle_integration_spec.ts b/packages/core/test/directive_lifecycle_integration_spec.ts
index 0f59cdf6eb57d..6c0998dc4b760 100644
--- a/packages/core/test/directive_lifecycle_integration_spec.ts
+++ b/packages/core/test/directive_lifecycle_integration_spec.ts
@@ -6,7 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, Directive, DoCheck, OnChanges, OnInit} from '@angular/core';
+import {
+  AfterContentChecked,
+  AfterContentInit,
+  AfterViewChecked,
+  AfterViewInit,
+  Component,
+  Directive,
+  DoCheck,
+  OnChanges,
+  OnInit,
+} from '@angular/core';
 import {inject, TestBed} from '@angular/core/testing';
 import {Log} from '@angular/core/testing/src/testing_internal';
 
@@ -14,41 +24,34 @@ describe('directive lifecycle integration spec', () => {
   let log: Log;
 
   beforeEach(() => {
-    TestBed
-        .configureTestingModule({
-          declarations: [
-            LifecycleCmp,
-            LifecycleDir,
-            MyComp5,
-          ],
-          providers: [Log]
-        })
-        .overrideComponent(MyComp5, {set: {template: '<div [field]="123" lifecycle></div>'}});
+    TestBed.configureTestingModule({
+      declarations: [LifecycleCmp, LifecycleDir, MyComp5],
+      providers: [Log],
+    }).overrideComponent(MyComp5, {set: {template: '<div [field]="123" lifecycle></div>'}});
   });
 
   beforeEach(inject([Log], (_log: any) => {
     log = _log;
   }));
 
-  it('should invoke lifecycle methods ngOnChanges > ngOnInit > ngDoCheck > ngAfterContentChecked',
-     () => {
-       const fixture = TestBed.createComponent(MyComp5);
-       fixture.detectChanges();
+  it('should invoke lifecycle methods ngOnChanges > ngOnInit > ngDoCheck > ngAfterContentChecked', () => {
+    const fixture = TestBed.createComponent(MyComp5);
+    fixture.detectChanges();
 
-       expect(log.result())
-           .toEqual(
-               'ngOnChanges; ngOnInit; ngDoCheck; ngAfterContentInit; ngAfterContentChecked; child_ngDoCheck; ' +
-               'ngAfterViewInit; ngAfterViewChecked');
+    expect(log.result()).toEqual(
+      'ngOnChanges; ngOnInit; ngDoCheck; ngAfterContentInit; ngAfterContentChecked; child_ngDoCheck; ' +
+        'ngAfterViewInit; ngAfterViewChecked',
+    );
 
-       log.clear();
-       fixture.detectChanges();
+    log.clear();
+    fixture.detectChanges();
 
-       expect(log.result())
-           .toEqual('ngDoCheck; ngAfterContentChecked; child_ngDoCheck; ngAfterViewChecked');
-     });
+    expect(log.result()).toEqual(
+      'ngDoCheck; ngAfterContentChecked; child_ngDoCheck; ngAfterViewChecked',
+    );
+  });
 });
 
-
 @Directive({selector: '[lifecycle-dir]'})
 class LifecycleDir implements DoCheck {
   constructor(private _log: Log) {}
@@ -62,8 +65,16 @@ class LifecycleDir implements DoCheck {
   inputs: ['field'],
   template: `<div lifecycle-dir></div>`,
 })
-class LifecycleCmp implements OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked,
-                              AfterViewInit, AfterViewChecked {
+class LifecycleCmp
+  implements
+    OnChanges,
+    OnInit,
+    DoCheck,
+    AfterContentInit,
+    AfterContentChecked,
+    AfterViewInit,
+    AfterViewChecked
+{
   field: number = 0;
   constructor(private _log: Log) {}
 
@@ -97,5 +108,4 @@ class LifecycleCmp implements OnChanges, OnInit, DoCheck, AfterContentInit, Afte
 }
 
 @Component({selector: 'my-comp'})
-class MyComp5 {
-}
+class MyComp5 {}
diff --git a/packages/core/test/dom/shim_spec.ts b/packages/core/test/dom/shim_spec.ts
index 4fd52dbf3720c..1a1154f609190 100644
--- a/packages/core/test/dom/shim_spec.ts
+++ b/packages/core/test/dom/shim_spec.ts
@@ -12,7 +12,7 @@ import '@angular/core/testing';
 
 describe('Shim', () => {
   it('should provide correct function.name ', () => {
-    const functionWithoutName = identity(() => function() {});
+    const functionWithoutName = identity(() => function () {});
     function foo() {}
 
     expect(functionWithoutName.name).toBeFalsy();
diff --git a/packages/core/test/error_handler_spec.ts b/packages/core/test/error_handler_spec.ts
index 0c2b571a11394..09afdf83c974e 100644
--- a/packages/core/test/error_handler_spec.ts
+++ b/packages/core/test/error_handler_spec.ts
@@ -21,7 +21,7 @@ function errorToString(error: any) {
   const errorHandler = new ErrorHandler();
   (errorHandler as any)._console = logger as any;
   errorHandler.handleError(error);
-  return logger.res.map(line => line.map(x => `${x}`).join('#')).join('\n');
+  return logger.res.map((line) => line.map((x) => `${x}`).join('#')).join('\n');
 }
 
 describe('ErrorHandler', () => {
diff --git a/packages/core/test/event_emitter_spec.ts b/packages/core/test/event_emitter_spec.ts
index 062e8346d62b0..0b502de5d3c71 100644
--- a/packages/core/test/event_emitter_spec.ts
+++ b/packages/core/test/event_emitter_spec.ts
@@ -17,7 +17,7 @@ describe('EventEmitter', () => {
     emitter = new EventEmitter();
   });
 
-  it('should call the next callback', done => {
+  it('should call the next callback', (done) => {
     emitter.subscribe((value: number) => {
       expect(value).toEqual(99);
       done();
@@ -25,34 +25,34 @@ describe('EventEmitter', () => {
     emitter.emit(99);
   });
 
-  it('should call the throw callback', done => {
+  it('should call the throw callback', (done) => {
     emitter.subscribe({
       next: () => {},
       error: (error: any) => {
         expect(error).toEqual('Boom');
         done();
-      }
+      },
     });
     emitter.error('Boom');
   });
 
-  it('should work when no throw callback is provided', done => {
+  it('should work when no throw callback is provided', (done) => {
     emitter.subscribe({
       next: () => {},
       error: () => {
         done();
-      }
+      },
     });
     emitter.error('Boom');
   });
 
-  it('should call the return callback', done => {
+  it('should call the return callback', (done) => {
     emitter.subscribe({
       next: () => {},
       error: () => {},
       complete: () => {
         done();
-      }
+      },
     });
     emitter.complete();
   });
@@ -62,26 +62,27 @@ describe('EventEmitter', () => {
     emitter.subscribe({
       next: () => {
         called = true;
-      }
+      },
     });
     emitter.emit(99);
 
     expect(called).toBe(true);
   });
 
-  it('delivers next and error events synchronously', done => {
+  it('delivers next and error events synchronously', (done) => {
     const log: number[] = [];
 
     emitter.subscribe(
-        (x: number) => {
-          log.push(x);
-          expect(log).toEqual([1, 2]);
-        },
-        (err: any) => {
-          log.push(err);
-          expect(log).toEqual([1, 2, 3, 4]);
-          done();
-        });
+      (x: number) => {
+        log.push(x);
+        expect(log).toEqual([1, 2]);
+      },
+      (err: any) => {
+        log.push(err);
+        expect(log).toEqual([1, 2, 3, 4]);
+        done();
+      },
+    );
     log.push(1);
     emitter.emit(2);
     log.push(3);
@@ -101,7 +102,7 @@ describe('EventEmitter', () => {
       complete: () => {
         log.push(4);
         expect(log).toEqual([1, 2, 3, 4]);
-      }
+      },
     });
     log.push(1);
     emitter.emit(2);
@@ -111,7 +112,7 @@ describe('EventEmitter', () => {
     expect(log).toEqual([1, 2, 3, 4, 5]);
   });
 
-  it('delivers events asynchronously when forced to async mode', done => {
+  it('delivers events asynchronously when forced to async mode', (done) => {
     const e = new EventEmitter<number>(true);
     const log: number[] = [];
     e.subscribe((x) => {
@@ -145,46 +146,43 @@ describe('EventEmitter', () => {
     expect(emitter.observers.length).toBe(0);
   });
 
-  it('unsubscribing a subscriber invokes the dispose method', done => {
+  it('unsubscribing a subscriber invokes the dispose method', (done) => {
     const sub = emitter.subscribe();
     sub.add(() => done());
     sub.unsubscribe();
   });
 
-  it('unsubscribing a subscriber after applying operators with pipe() invokes the dispose method',
-     done => {
-       const sub = emitter.pipe(filter(() => true)).subscribe();
-       sub.add(() => done());
-       sub.unsubscribe();
-     });
-
-  it('error thrown inside an Rx chain propagates to the error handler and disposes the chain',
-     () => {
-       let errorPropagated = false;
-       emitter
-           .pipe(
-               filter(() => {
-                 throw new Error();
-               }),
-               )
-           .subscribe(
-               () => {},
-               err => errorPropagated = true,
-           );
-
-       emitter.next(1);
-
-       expect(errorPropagated).toBe(true);
-       expect(emitter.observers.length).toBe(0);
-     });
+  it('unsubscribing a subscriber after applying operators with pipe() invokes the dispose method', (done) => {
+    const sub = emitter.pipe(filter(() => true)).subscribe();
+    sub.add(() => done());
+    sub.unsubscribe();
+  });
+
+  it('error thrown inside an Rx chain propagates to the error handler and disposes the chain', () => {
+    let errorPropagated = false;
+    emitter
+      .pipe(
+        filter(() => {
+          throw new Error();
+        }),
+      )
+      .subscribe(
+        () => {},
+        (err) => (errorPropagated = true),
+      );
+
+    emitter.next(1);
+
+    expect(errorPropagated).toBe(true);
+    expect(emitter.observers.length).toBe(0);
+  });
 
   it('error sent by EventEmitter should dispose the Rx chain and remove subscribers', () => {
     let errorPropagated = false;
-    emitter.pipe(filter(() => true))
-        .subscribe(
-            () => {},
-            () => errorPropagated = true,
-        );
+    emitter.pipe(filter(() => true)).subscribe(
+      () => {},
+      () => (errorPropagated = true),
+    );
 
     emitter.error(1);
 
diff --git a/packages/core/test/fake_async_spec.ts b/packages/core/test/fake_async_spec.ts
index 100e40370e1b4..78f4f82c2f1ca 100644
--- a/packages/core/test/fake_async_spec.ts
+++ b/packages/core/test/fake_async_spec.ts
@@ -6,7 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {discardPeriodicTasks, fakeAsync, flush, flushMicrotasks, inject, tick} from '@angular/core/testing';
+import {
+  discardPeriodicTasks,
+  fakeAsync,
+  flush,
+  flushMicrotasks,
+  inject,
+  tick,
+} from '@angular/core/testing';
 import {Log} from '@angular/core/testing/src/testing_internal';
 import {EventManager} from '@angular/platform-browser';
 
@@ -30,9 +37,11 @@ describe('fake async', () => {
     })('foo', 'bar');
   });
 
-  it('should work with inject()', fakeAsync(inject([EventManager], (eventManager: EventManager) => {
-       expect(eventManager).toBeInstanceOf(EventManager);
-     })));
+  it('should work with inject()', fakeAsync(
+    inject([EventManager], (eventManager: EventManager) => {
+      expect(eventManager).toBeInstanceOf(EventManager);
+    }),
+  ));
 
   it('should throw on nested calls', () => {
     expect(() => {
@@ -46,7 +55,7 @@ describe('fake async', () => {
     let thenRan = false;
 
     fakeAsync(() => {
-      resolvedPromise.then(_ => {
+      resolvedPromise.then((_) => {
         thenRan = true;
       });
     })();
@@ -54,48 +63,47 @@ describe('fake async', () => {
     expect(thenRan).toEqual(true);
   });
 
-
   it('should propagate the return value', () => {
     expect(fakeAsync(() => 'foo')()).toEqual('foo');
   });
 
   describe('Promise', () => {
     it('should run asynchronous code', fakeAsync(() => {
-         let thenRan = false;
-         resolvedPromise.then((_) => {
-           thenRan = true;
-         });
+      let thenRan = false;
+      resolvedPromise.then((_) => {
+        thenRan = true;
+      });
 
-         expect(thenRan).toEqual(false);
+      expect(thenRan).toEqual(false);
 
-         flushMicrotasks();
-         expect(thenRan).toEqual(true);
-       }));
+      flushMicrotasks();
+      expect(thenRan).toEqual(true);
+    }));
 
     it('should run chained thens', fakeAsync(() => {
-         const log = new Log<number>();
+      const log = new Log<number>();
 
-         resolvedPromise.then((_) => log.add(1)).then((_) => log.add(2));
+      resolvedPromise.then((_) => log.add(1)).then((_) => log.add(2));
 
-         expect(log.result()).toEqual('');
+      expect(log.result()).toEqual('');
 
-         flushMicrotasks();
-         expect(log.result()).toEqual('1; 2');
-       }));
+      flushMicrotasks();
+      expect(log.result()).toEqual('1; 2');
+    }));
 
     it('should run Promise created in Promise', fakeAsync(() => {
-         const log = new Log<number>();
+      const log = new Log<number>();
 
-         resolvedPromise.then((_) => {
-           log.add(1);
-           resolvedPromise.then((_) => log.add(2));
-         });
+      resolvedPromise.then((_) => {
+        log.add(1);
+        resolvedPromise.then((_) => log.add(2));
+      });
 
-         expect(log.result()).toEqual('');
+      expect(log.result()).toEqual('');
 
-         flushMicrotasks();
-         expect(log.result()).toEqual('1; 2');
-       }));
+      flushMicrotasks();
+      expect(log.result()).toEqual('1; 2');
+    }));
 
     it('should complain if the test throws an exception during async calls', () => {
       expect(() => {
@@ -119,82 +127,80 @@ describe('fake async', () => {
 
   describe('timers', () => {
     it('should run queued zero duration timer on zero tick', fakeAsync(() => {
-         let ran = false;
-         setTimeout(() => {
-           ran = true;
-         }, 0);
-
-         expect(ran).toEqual(false);
+      let ran = false;
+      setTimeout(() => {
+        ran = true;
+      }, 0);
 
-         tick();
-         expect(ran).toEqual(true);
-       }));
+      expect(ran).toEqual(false);
 
+      tick();
+      expect(ran).toEqual(true);
+    }));
 
     it('should run queued timer after sufficient clock ticks', fakeAsync(() => {
-         let ran = false;
-         setTimeout(() => {
-           ran = true;
-         }, 10);
+      let ran = false;
+      setTimeout(() => {
+        ran = true;
+      }, 10);
 
-         tick(6);
-         expect(ran).toEqual(false);
+      tick(6);
+      expect(ran).toEqual(false);
 
-         tick(6);
-         expect(ran).toEqual(true);
-       }));
+      tick(6);
+      expect(ran).toEqual(true);
+    }));
 
     it('should run new macro tasks created by timer callback', fakeAsync(() => {
-         function nestedTimer(callback: () => any): void {
-           setTimeout(() => setTimeout(() => callback()));
-         }
-         const callback = jasmine.createSpy('callback');
-         nestedTimer(callback);
-         expect(callback).not.toHaveBeenCalled();
-         tick(0);
-         expect(callback).toHaveBeenCalled();
-       }));
-
-    it('should not queue nested timer on tick with processNewMacroTasksSynchronously=false',
-       fakeAsync(() => {
-         function nestedTimer(callback: () => any): void {
-           setTimeout(() => setTimeout(() => callback()));
-         }
-         const callback = jasmine.createSpy('callback');
-         nestedTimer(callback);
-         expect(callback).not.toHaveBeenCalled();
-         tick(0, {processNewMacroTasksSynchronously: false});
-         expect(callback).not.toHaveBeenCalled();
-         flush();
-         expect(callback).toHaveBeenCalled();
-       }));
+      function nestedTimer(callback: () => any): void {
+        setTimeout(() => setTimeout(() => callback()));
+      }
+      const callback = jasmine.createSpy('callback');
+      nestedTimer(callback);
+      expect(callback).not.toHaveBeenCalled();
+      tick(0);
+      expect(callback).toHaveBeenCalled();
+    }));
+
+    it('should not queue nested timer on tick with processNewMacroTasksSynchronously=false', fakeAsync(() => {
+      function nestedTimer(callback: () => any): void {
+        setTimeout(() => setTimeout(() => callback()));
+      }
+      const callback = jasmine.createSpy('callback');
+      nestedTimer(callback);
+      expect(callback).not.toHaveBeenCalled();
+      tick(0, {processNewMacroTasksSynchronously: false});
+      expect(callback).not.toHaveBeenCalled();
+      flush();
+      expect(callback).toHaveBeenCalled();
+    }));
 
     it('should run queued timer only once', fakeAsync(() => {
-         let cycles = 0;
-         setTimeout(() => {
-           cycles++;
-         }, 10);
+      let cycles = 0;
+      setTimeout(() => {
+        cycles++;
+      }, 10);
 
-         tick(10);
-         expect(cycles).toEqual(1);
+      tick(10);
+      expect(cycles).toEqual(1);
 
-         tick(10);
-         expect(cycles).toEqual(1);
+      tick(10);
+      expect(cycles).toEqual(1);
 
-         tick(10);
-         expect(cycles).toEqual(1);
-       }));
+      tick(10);
+      expect(cycles).toEqual(1);
+    }));
 
     it('should not run cancelled timer', fakeAsync(() => {
-         let ran = false;
-         const id = setTimeout(() => {
-           ran = true;
-         }, 10);
-         clearTimeout(id);
-
-         tick(10);
-         expect(ran).toEqual(false);
-       }));
+      let ran = false;
+      const id = setTimeout(() => {
+        ran = true;
+      }, 10);
+      clearTimeout(id);
+
+      tick(10);
+      expect(ran).toEqual(false);
+    }));
 
     it('should throw an error on dangling timers', () => {
       expect(() => {
@@ -213,154 +219,153 @@ describe('fake async', () => {
     });
 
     it('should run periodic timers', fakeAsync(() => {
-         let cycles = 0;
-         const id = setInterval(() => {
-           cycles++;
-         }, 10);
+      let cycles = 0;
+      const id = setInterval(() => {
+        cycles++;
+      }, 10);
 
-         tick(10);
-         expect(cycles).toEqual(1);
+      tick(10);
+      expect(cycles).toEqual(1);
 
-         tick(10);
-         expect(cycles).toEqual(2);
+      tick(10);
+      expect(cycles).toEqual(2);
 
-         tick(10);
-         expect(cycles).toEqual(3);
-         clearInterval(id);
-       }));
+      tick(10);
+      expect(cycles).toEqual(3);
+      clearInterval(id);
+    }));
 
     it('should not run cancelled periodic timer', fakeAsync(() => {
-         let ran = false;
-         const id = setInterval(() => {
-           ran = true;
-         }, 10);
-         clearInterval(id);
-
-         tick(10);
-         expect(ran).toEqual(false);
-       }));
+      let ran = false;
+      const id = setInterval(() => {
+        ran = true;
+      }, 10);
+      clearInterval(id);
+
+      tick(10);
+      expect(ran).toEqual(false);
+    }));
 
     it('should be able to cancel periodic timers from a callback', fakeAsync(() => {
-         let cycles = 0;
-         const id = setInterval(() => {
-           cycles++;
-           clearInterval(id);
-         }, 10);
+      let cycles = 0;
+      const id = setInterval(() => {
+        cycles++;
+        clearInterval(id);
+      }, 10);
 
-         tick(10);
-         expect(cycles).toEqual(1);
+      tick(10);
+      expect(cycles).toEqual(1);
 
-         tick(10);
-         expect(cycles).toEqual(1);
-       }));
+      tick(10);
+      expect(cycles).toEqual(1);
+    }));
 
     it('should clear periodic timers', fakeAsync(() => {
-         let cycles = 0;
-         setInterval(() => {
-           cycles++;
-         }, 10);
+      let cycles = 0;
+      setInterval(() => {
+        cycles++;
+      }, 10);
 
-         tick(10);
-         expect(cycles).toEqual(1);
+      tick(10);
+      expect(cycles).toEqual(1);
 
-         discardPeriodicTasks();
+      discardPeriodicTasks();
 
-         // Tick once to clear out the timer which already started.
-         tick(10);
-         expect(cycles).toEqual(2);
+      // Tick once to clear out the timer which already started.
+      tick(10);
+      expect(cycles).toEqual(2);
 
-         tick(10);
-         // Nothing should change
-         expect(cycles).toEqual(2);
-       }));
+      tick(10);
+      // Nothing should change
+      expect(cycles).toEqual(2);
+    }));
 
     it('should process microtasks before timers', fakeAsync(() => {
-         const log = new Log();
+      const log = new Log();
 
-         resolvedPromise.then((_) => log.add('microtask'));
+      resolvedPromise.then((_) => log.add('microtask'));
 
-         setTimeout(() => log.add('timer'), 9);
+      setTimeout(() => log.add('timer'), 9);
 
-         const id = setInterval(() => log.add('periodic timer'), 10);
+      const id = setInterval(() => log.add('periodic timer'), 10);
 
-         expect(log.result()).toEqual('');
+      expect(log.result()).toEqual('');
 
-         tick(10);
-         expect(log.result()).toEqual('microtask; timer; periodic timer');
-         clearInterval(id);
-       }));
+      tick(10);
+      expect(log.result()).toEqual('microtask; timer; periodic timer');
+      clearInterval(id);
+    }));
 
     it('should process micro-tasks created in timers before next timers', fakeAsync(() => {
-         const log = new Log();
+      const log = new Log();
 
-         resolvedPromise.then((_) => log.add('microtask'));
+      resolvedPromise.then((_) => log.add('microtask'));
 
-         setTimeout(() => {
-           log.add('timer');
-           resolvedPromise.then((_) => log.add('t microtask'));
-         }, 9);
+      setTimeout(() => {
+        log.add('timer');
+        resolvedPromise.then((_) => log.add('t microtask'));
+      }, 9);
 
-         const id = setInterval(() => {
-           log.add('periodic timer');
-           resolvedPromise.then((_) => log.add('pt microtask'));
-         }, 10);
+      const id = setInterval(() => {
+        log.add('periodic timer');
+        resolvedPromise.then((_) => log.add('pt microtask'));
+      }, 10);
 
-         tick(10);
-         expect(log.result())
-             .toEqual('microtask; timer; t microtask; periodic timer; pt microtask');
+      tick(10);
+      expect(log.result()).toEqual('microtask; timer; t microtask; periodic timer; pt microtask');
 
-         tick(10);
-         expect(log.result())
-             .toEqual(
-                 'microtask; timer; t microtask; periodic timer; pt microtask; periodic timer; pt microtask');
-         clearInterval(id);
-       }));
+      tick(10);
+      expect(log.result()).toEqual(
+        'microtask; timer; t microtask; periodic timer; pt microtask; periodic timer; pt microtask',
+      );
+      clearInterval(id);
+    }));
 
     it('should flush tasks', fakeAsync(() => {
-         let ran = false;
-         setTimeout(() => {
-           ran = true;
-         }, 10);
+      let ran = false;
+      setTimeout(() => {
+        ran = true;
+      }, 10);
 
-         flush();
-         expect(ran).toEqual(true);
-       }));
+      flush();
+      expect(ran).toEqual(true);
+    }));
 
     it('should flush multiple tasks', fakeAsync(() => {
-         let ran = false;
-         let ran2 = false;
-         setTimeout(() => {
-           ran = true;
-         }, 10);
-         setTimeout(() => {
-           ran2 = true;
-         }, 30);
-
-         let elapsed = flush();
-
-         expect(ran).toEqual(true);
-         expect(ran2).toEqual(true);
-         expect(elapsed).toEqual(30);
-       }));
+      let ran = false;
+      let ran2 = false;
+      setTimeout(() => {
+        ran = true;
+      }, 10);
+      setTimeout(() => {
+        ran2 = true;
+      }, 30);
+
+      let elapsed = flush();
+
+      expect(ran).toEqual(true);
+      expect(ran2).toEqual(true);
+      expect(elapsed).toEqual(30);
+    }));
 
     it('should move periodic tasks', fakeAsync(() => {
-         let ran = false;
-         let count = 0;
-         setInterval(() => {
-           count++;
-         }, 10);
-         setTimeout(() => {
-           ran = true;
-         }, 35);
-
-         let elapsed = flush();
-
-         expect(count).toEqual(3);
-         expect(ran).toEqual(true);
-         expect(elapsed).toEqual(35);
-
-         discardPeriodicTasks();
-       }));
+      let ran = false;
+      let count = 0;
+      setInterval(() => {
+        count++;
+      }, 10);
+      setTimeout(() => {
+        ran = true;
+      }, 35);
+
+      let elapsed = flush();
+
+      expect(count).toEqual(3);
+      expect(ran).toEqual(true);
+      expect(elapsed).toEqual(35);
+
+      discardPeriodicTasks();
+    }));
   });
 
   describe('outside of the fakeAsync zone', () => {
@@ -397,9 +402,9 @@ describe('fake async', () => {
     }));
 
     it('should use the same zone as in beforeEach', fakeAsync(() => {
-         zoneInTest1 = Zone.current;
-         expect(zoneInTest1).toBe(zoneInBeforeEach);
-       }));
+      zoneInTest1 = Zone.current;
+      expect(zoneInTest1).toBe(zoneInBeforeEach);
+    }));
   });
 });
 
@@ -416,14 +421,14 @@ describe('ProxyZone', () => {
     ProxyZoneSpec.assertPresent();
     let state: string = 'not run';
     const testZone = Zone.current.fork({name: 'test-zone'});
-    (fakeAsync(() => {
+    fakeAsync(() => {
       testZone.run(() => {
-        Promise.resolve('works').then((v) => state = v);
+        Promise.resolve('works').then((v) => (state = v));
         expect(state).toEqual('not run');
         flushMicrotasks();
         expect(state).toEqual('works');
       });
-    }))();
+    })();
     expect(state).toEqual('works');
   });
 });
diff --git a/packages/core/test/forward_ref_integration_spec.ts b/packages/core/test/forward_ref_integration_spec.ts
index 9cd004d9964a0..e16879af8e17e 100644
--- a/packages/core/test/forward_ref_integration_spec.ts
+++ b/packages/core/test/forward_ref_integration_spec.ts
@@ -7,7 +7,17 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {asNativeElements, Component, ContentChildren, Directive, forwardRef, Inject, NgModule, NO_ERRORS_SCHEMA, QueryList} from '@angular/core';
+import {
+  asNativeElements,
+  Component,
+  ContentChildren,
+  Directive,
+  forwardRef,
+  Inject,
+  NgModule,
+  NO_ERRORS_SCHEMA,
+  QueryList,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
@@ -19,7 +29,7 @@ class ModuleFrame {
   name: string = 'moduleFram';
 }
 
-describe('forwardRef integration', function() {
+describe('forwardRef integration', function () {
   beforeEach(() => {
     TestBed.configureTestingModule({imports: [Module], declarations: [App]});
   });
@@ -36,18 +46,16 @@ describe('forwardRef integration', function() {
   imports: [CommonModule],
   providers: [forwardRef(() => ModuleFrame)],
   declarations: [forwardRef(() => Door), forwardRef(() => Lock)],
-  exports: [forwardRef(() => Door), forwardRef(() => Lock)]
+  exports: [forwardRef(() => Door), forwardRef(() => Lock)],
 })
-class Module {
-}
+class Module {}
 
 @Component({
   selector: 'app',
   viewProviders: [forwardRef(() => Frame)],
   template: `<door><lock></lock></door>`,
 })
-class App {
-}
+class App {}
 
 @Component({
   selector: 'door',
diff --git a/packages/core/test/hydration/compression_spec.ts b/packages/core/test/hydration/compression_spec.ts
index 88ac0ec72d2df..761bcd96f397f 100644
--- a/packages/core/test/hydration/compression_spec.ts
+++ b/packages/core/test/hydration/compression_spec.ts
@@ -7,7 +7,11 @@
  */
 
 import {compressNodeLocation, decompressNodeLocation} from '../../src/hydration/compression';
-import {NodeNavigationStep, REFERENCE_NODE_BODY, REFERENCE_NODE_HOST} from '../../src/hydration/interfaces';
+import {
+  NodeNavigationStep,
+  REFERENCE_NODE_BODY,
+  REFERENCE_NODE_HOST,
+} from '../../src/hydration/interfaces';
 
 describe('compression of node location', () => {
   it('should handle basic cases', () => {
diff --git a/packages/core/test/i18n/locale_data_api_spec.ts b/packages/core/test/i18n/locale_data_api_spec.ts
index b56c3abebbc89..09e465f847083 100644
--- a/packages/core/test/i18n/locale_data_api_spec.ts
+++ b/packages/core/test/i18n/locale_data_api_spec.ts
@@ -5,7 +5,13 @@
  * 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
  */
-import {findLocaleData, getLocaleCurrencyCode, LocaleDataIndex, registerLocaleData, unregisterAllLocaleData} from '../../src/i18n/locale_data_api';
+import {
+  findLocaleData,
+  getLocaleCurrencyCode,
+  LocaleDataIndex,
+  registerLocaleData,
+  unregisterAllLocaleData,
+} from '../../src/i18n/locale_data_api';
 import {global} from '../../src/util/global';
 
 describe('locale data api', () => {
@@ -46,11 +52,11 @@ describe('locale data api', () => {
   });
 
   describe('findLocaleData', () => {
-    it('should throw if the LOCALE_DATA for the chosen locale or its parent locale is not available',
-       () => {
-         expect(() => findLocaleData('pt-AO'))
-             .toThrowError(/Missing locale data for the locale "pt-AO"/);
-       });
+    it('should throw if the LOCALE_DATA for the chosen locale or its parent locale is not available', () => {
+      expect(() => findLocaleData('pt-AO')).toThrowError(
+        /Missing locale data for the locale "pt-AO"/,
+      );
+    });
 
     it('should return english data if the locale is en-US', () => {
       expect(findLocaleData('en-US')).toEqual(localeEn);
@@ -60,10 +66,9 @@ describe('locale data api', () => {
       expect(findLocaleData('fr-CA')).toEqual(localeFrCA);
     });
 
-    it('should return the parent LOCALE_DATA if it exists and exact locale is not available',
-       () => {
-         expect(findLocaleData('fr-BE')).toEqual(localeFr);
-       });
+    it('should return the parent LOCALE_DATA if it exists and exact locale is not available', () => {
+      expect(findLocaleData('fr-BE')).toEqual(localeFr);
+    });
 
     it(`should find the LOCALE_DATA even if the locale id is badly formatted`, () => {
       expect(findLocaleData('ca-ES-VALENCIA')).toEqual(localeCaESVALENCIA);
@@ -80,15 +85,13 @@ describe('locale data api', () => {
       expect(findLocaleData('de-CH')).toEqual(localeDeCH);
     });
 
-    it('should find the parent LOCALE_DATA if the exact locale is not available and the parent locale is on the global object',
-       () => {
-         expect(findLocaleData('de-BE')).toEqual(localeDe);
-       });
+    it('should find the parent LOCALE_DATA if the exact locale is not available and the parent locale is on the global object', () => {
+      expect(findLocaleData('de-BE')).toEqual(localeDe);
+    });
 
-    it('should find the registered LOCALE_DATA even if the same locale is on the global object',
-       () => {
-         expect(findLocaleData('fr')).not.toBe(fakeGlobalFr);
-       });
+    it('should find the registered LOCALE_DATA even if the same locale is on the global object', () => {
+      expect(findLocaleData('fr')).not.toBe(fakeGlobalFr);
+    });
   });
 
   describe('getLocaleCurrencyCode()', () => {
@@ -96,9 +99,8 @@ describe('locale data api', () => {
       expect(getLocaleCurrencyCode('de')).toBe(null);
     });
 
-    it('should return the code at the `LocaleDataIndex.CurrencyCode` of the given locale`s data',
-       () => {
-         expect(getLocaleCurrencyCode('fr')).toEqual('EUR');
-       });
+    it('should return the code at the `LocaleDataIndex.CurrencyCode` of the given locale`s data', () => {
+      expect(getLocaleCurrencyCode('fr')).toEqual('EUR');
+    });
   });
 });
diff --git a/packages/core/test/linker/change_detection_integration_spec.ts b/packages/core/test/linker/change_detection_integration_spec.ts
index 805399e073e92..fe3ea4fd48d8b 100644
--- a/packages/core/test/linker/change_detection_integration_spec.ts
+++ b/packages/core/test/linker/change_detection_integration_spec.ts
@@ -7,7 +7,38 @@
  */
 
 import {ResourceLoader} from '@angular/compiler';
-import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, DebugElement, Directive, DoCheck, EventEmitter, HostBinding, Injectable, Input, OnChanges, OnDestroy, OnInit, Output, Pipe, PipeTransform, Provider, RendererFactory2, RendererType2, SimpleChange, SimpleChanges, TemplateRef, Type, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  AfterContentChecked,
+  AfterContentInit,
+  AfterViewChecked,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  DebugElement,
+  Directive,
+  DoCheck,
+  EventEmitter,
+  HostBinding,
+  Injectable,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  Pipe,
+  PipeTransform,
+  Provider,
+  RendererFactory2,
+  RendererType2,
+  SimpleChange,
+  SimpleChanges,
+  TemplateRef,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {ComponentFixture, fakeAsync, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {isTextNode} from '@angular/platform-browser/testing/src/browser_util';
@@ -15,1589 +46,1634 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
 
 import {MockResourceLoader} from './resource_loader_mock';
 
-
 const TEST_COMPILER_PROVIDERS: Provider[] = [
   {provide: ResourceLoader, useClass: MockResourceLoader, deps: []},
 ];
 
+(function () {
+  let renderLog: RenderLog;
+  let directiveLog: DirectiveLog;
 
-(function() {
-let renderLog: RenderLog;
-let directiveLog: DirectiveLog;
-
-function createCompFixture<T>(template: string): ComponentFixture<TestComponent>;
-function createCompFixture<T>(template: string, compType: Type<T>): ComponentFixture<T>;
-function createCompFixture<T>(
-    template: string, compType: Type<T> = <any>TestComponent): ComponentFixture<T> {
-  TestBed.overrideComponent(compType, {set: new Component({template})});
+  function createCompFixture<T>(template: string): ComponentFixture<TestComponent>;
+  function createCompFixture<T>(template: string, compType: Type<T>): ComponentFixture<T>;
+  function createCompFixture<T>(
+    template: string,
+    compType: Type<T> = <any>TestComponent,
+  ): ComponentFixture<T> {
+    TestBed.overrideComponent(compType, {set: new Component({template})});
 
-  initHelpers();
+    initHelpers();
 
-  return TestBed.createComponent(compType);
-}
+    return TestBed.createComponent(compType);
+  }
 
-function initHelpers(): void {
-  renderLog = TestBed.inject(RenderLog);
-  directiveLog = TestBed.inject(DirectiveLog);
-  patchLoggingRenderer2(TestBed.inject(RendererFactory2), renderLog);
-}
+  function initHelpers(): void {
+    renderLog = TestBed.inject(RenderLog);
+    directiveLog = TestBed.inject(DirectiveLog);
+    patchLoggingRenderer2(TestBed.inject(RendererFactory2), renderLog);
+  }
 
-function queryDirs(el: DebugElement, dirType: Type<any>): any {
-  const nodes = el.queryAllNodes(By.directive(dirType));
-  return nodes.map(node => node.injector.get(dirType));
-}
+  function queryDirs(el: DebugElement, dirType: Type<any>): any {
+    const nodes = el.queryAllNodes(By.directive(dirType));
+    return nodes.map((node) => node.injector.get(dirType));
+  }
 
-function _bindSimpleProp<T>(bindAttr: string): ComponentFixture<TestComponent>;
-function _bindSimpleProp<T>(bindAttr: string, compType: Type<T>): ComponentFixture<T>;
-function _bindSimpleProp<T>(
-    bindAttr: string, compType: Type<T> = <any>TestComponent): ComponentFixture<T> {
-  const template = `<div ${bindAttr}></div>`;
-  return createCompFixture(template, compType);
-}
+  function _bindSimpleProp<T>(bindAttr: string): ComponentFixture<TestComponent>;
+  function _bindSimpleProp<T>(bindAttr: string, compType: Type<T>): ComponentFixture<T>;
+  function _bindSimpleProp<T>(
+    bindAttr: string,
+    compType: Type<T> = <any>TestComponent,
+  ): ComponentFixture<T> {
+    const template = `<div ${bindAttr}></div>`;
+    return createCompFixture(template, compType);
+  }
 
-function _bindSimpleValue(expression: any): ComponentFixture<TestComponent>;
-function _bindSimpleValue<T>(expression: any, compType: Type<T>): ComponentFixture<T>;
-function _bindSimpleValue<T>(
-    expression: any, compType: Type<T> = <any>TestComponent): ComponentFixture<T> {
-  return _bindSimpleProp(`[id]='${expression}'`, compType);
-}
+  function _bindSimpleValue(expression: any): ComponentFixture<TestComponent>;
+  function _bindSimpleValue<T>(expression: any, compType: Type<T>): ComponentFixture<T>;
+  function _bindSimpleValue<T>(
+    expression: any,
+    compType: Type<T> = <any>TestComponent,
+  ): ComponentFixture<T> {
+    return _bindSimpleProp(`[id]='${expression}'`, compType);
+  }
 
-function _bindAndCheckSimpleValue(expression: any, compType: Type<any> = TestComponent): string[] {
-  const ctx = _bindSimpleValue(expression, compType);
-  ctx.detectChanges(false);
-  return renderLog.log;
-}
+  function _bindAndCheckSimpleValue(
+    expression: any,
+    compType: Type<any> = TestComponent,
+  ): string[] {
+    const ctx = _bindSimpleValue(expression, compType);
+    ctx.detectChanges(false);
+    return renderLog.log;
+  }
 
-describe(`ChangeDetection`, () => {
-  beforeEach(() => {
-    TestBed.configureCompiler({providers: TEST_COMPILER_PROVIDERS});
-    TestBed.configureTestingModule({
-      declarations: [
-        TestData,
-        TestDirective,
-        TestComponent,
-        AnotherComponent,
-        TestLocals,
-        CompWithRef,
-        WrapCompWithRef,
-        EmitterDirective,
-        PushComp,
-        OnDestroyDirective,
-        OrderCheckDirective2,
-        OrderCheckDirective0,
-        OrderCheckDirective1,
-        Gh9882,
-        Uninitialized,
-        Person,
-        PersonHolder,
-        PersonHolderHolder,
-        CountingPipe,
-        CountingImpurePipe,
-        MultiArgPipe,
-        PipeWithOnDestroy,
-        IdentityPipe,
-      ],
-      providers: [
-        RenderLog,
-        DirectiveLog,
-      ],
+  describe(`ChangeDetection`, () => {
+    beforeEach(() => {
+      TestBed.configureCompiler({providers: TEST_COMPILER_PROVIDERS});
+      TestBed.configureTestingModule({
+        declarations: [
+          TestData,
+          TestDirective,
+          TestComponent,
+          AnotherComponent,
+          TestLocals,
+          CompWithRef,
+          WrapCompWithRef,
+          EmitterDirective,
+          PushComp,
+          OnDestroyDirective,
+          OrderCheckDirective2,
+          OrderCheckDirective0,
+          OrderCheckDirective1,
+          Gh9882,
+          Uninitialized,
+          Person,
+          PersonHolder,
+          PersonHolderHolder,
+          CountingPipe,
+          CountingImpurePipe,
+          MultiArgPipe,
+          PipeWithOnDestroy,
+          IdentityPipe,
+        ],
+        providers: [RenderLog, DirectiveLog],
+      });
     });
-  });
 
-  describe('expressions', () => {
-    it('should support literals', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue(10)).toEqual(['id=10']);
-       }));
+    describe('expressions', () => {
+      it('should support literals', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue(10)).toEqual(['id=10']);
+      }));
 
-    it('should strip quotes from literals', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('"str"')).toEqual(['id=str']);
-       }));
+      it('should strip quotes from literals', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('"str"')).toEqual(['id=str']);
+      }));
 
-    it('should support newlines in literals', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('"a\n\nb"')).toEqual(['id=a\n\nb']);
-       }));
+      it('should support newlines in literals', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('"a\n\nb"')).toEqual(['id=a\n\nb']);
+      }));
 
-    it('should support + operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('10 + 2')).toEqual(['id=12']);
-       }));
+      it('should support + operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('10 + 2')).toEqual(['id=12']);
+      }));
 
-    it('should support - operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('10 - 2')).toEqual(['id=8']);
-       }));
+      it('should support - operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('10 - 2')).toEqual(['id=8']);
+      }));
 
-    it('should support * operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('10 * 2')).toEqual(['id=20']);
-       }));
+      it('should support * operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('10 * 2')).toEqual(['id=20']);
+      }));
 
-    it('should support / operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('10 / 2')).toEqual([`id=5`]);
-       }));
+      it('should support / operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('10 / 2')).toEqual([`id=5`]);
+      }));
 
-    it('should support % operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('11 % 2')).toEqual(['id=1']);
-       }));
+      it('should support % operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('11 % 2')).toEqual(['id=1']);
+      }));
 
-    it('should support == operations on identical', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('1 == 1')).toEqual(['id=true']);
-       }));
+      it('should support == operations on identical', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('1 == 1')).toEqual(['id=true']);
+      }));
 
-    it('should support != operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('1 != 1')).toEqual(['id=false']);
-       }));
+      it('should support != operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('1 != 1')).toEqual(['id=false']);
+      }));
 
-    it('should support == operations on coerceible', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('1 == true')).toEqual([`id=true`]);
-       }));
+      it('should support == operations on coerceible', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('1 == true')).toEqual([`id=true`]);
+      }));
 
-    it('should support === operations on identical', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('1 === 1')).toEqual(['id=true']);
-       }));
+      it('should support === operations on identical', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('1 === 1')).toEqual(['id=true']);
+      }));
 
-    it('should support !== operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('1 !== 1')).toEqual(['id=false']);
-       }));
-
-    it('should support === operations on coerceible', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('1 === true')).toEqual(['id=false']);
-       }));
-
-    it('should support true < operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('1 < 2')).toEqual(['id=true']);
-       }));
-
-    it('should support false < operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('2 < 1')).toEqual(['id=false']);
-       }));
-
-    it('should support false > operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('1 > 2')).toEqual(['id=false']);
-       }));
-
-    it('should support true > operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('2 > 1')).toEqual(['id=true']);
-       }));
-
-    it('should support true <= operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('1 <= 2')).toEqual(['id=true']);
-       }));
-
-    it('should support equal <= operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('2 <= 2')).toEqual(['id=true']);
-       }));
-
-    it('should support false <= operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('2 <= 1')).toEqual(['id=false']);
-       }));
-
-    it('should support true >= operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('2 >= 1')).toEqual(['id=true']);
-       }));
-
-    it('should support equal >= operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('2 >= 2')).toEqual(['id=true']);
-       }));
-
-    it('should support false >= operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('1 >= 2')).toEqual(['id=false']);
-       }));
-
-    it('should support true && operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('true && true')).toEqual(['id=true']);
-       }));
-
-    it('should support false && operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('true && false')).toEqual(['id=false']);
-       }));
-
-    it('should support true || operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('true || false')).toEqual(['id=true']);
-       }));
-
-    it('should support false || operations', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('false || false')).toEqual(['id=false']);
-       }));
-
-    it('should support negate', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('!true')).toEqual(['id=false']);
-       }));
-
-    it('should support double negate', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('!!true')).toEqual(['id=true']);
-       }));
-
-    it('should support true conditionals', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('1 < 2 ? 1 : 2')).toEqual(['id=1']);
-       }));
-
-    it('should support false conditionals', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('1 > 2 ? 1 : 2')).toEqual(['id=2']);
-       }));
-
-    it('should support keyed access to a list item', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('["foo", "bar"][0]')).toEqual(['id=foo']);
-       }));
-
-    it('should support keyed access to a map item', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('{"foo": "bar"}["foo"]')).toEqual(['id=bar']);
-       }));
-
-    it('should report all changes on the first run including uninitialized values',
-       fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('value', Uninitialized)).toEqual(['id=null']);
-       }));
-
-    it('should report all changes on the first run including null values', fakeAsync(() => {
-         const ctx = _bindSimpleValue('a', TestData);
-         ctx.componentInstance.a = null;
-         ctx.detectChanges(false);
-         expect(renderLog.log).toEqual(['id=null']);
-       }));
-
-    it('should support simple chained property access', fakeAsync(() => {
-         const ctx = _bindSimpleValue('address.city', Person);
-         ctx.componentInstance.name = 'Victor';
-         ctx.componentInstance.address = new Address('Grenoble');
-         ctx.detectChanges(false);
-         expect(renderLog.log).toEqual(['id=Grenoble']);
-       }));
-
-    describe('safe navigation operator', () => {
-      it('should support reading properties of nulls', fakeAsync(() => {
-           const ctx = _bindSimpleValue('address?.city', Person);
-           ctx.componentInstance.address = null!;
-           ctx.detectChanges(false);
-           expect(renderLog.log).toEqual(['id=null']);
-         }));
-
-      it('should support calling methods on nulls', fakeAsync(() => {
-           const ctx = _bindSimpleValue('address?.toString()', Person);
-           ctx.componentInstance.address = null!;
-           ctx.detectChanges(false);
-           expect(renderLog.log).toEqual(['id=null']);
-         }));
-
-      it('should support reading properties on non nulls', fakeAsync(() => {
-           const ctx = _bindSimpleValue('address?.city', Person);
-           ctx.componentInstance.address = new Address('MTV');
-           ctx.detectChanges(false);
-           expect(renderLog.log).toEqual(['id=MTV']);
-         }));
-
-      it('should support calling methods on non nulls', fakeAsync(() => {
-           const ctx = _bindSimpleValue('address?.toString()', Person);
-           ctx.componentInstance.address = new Address('MTV');
-           ctx.detectChanges(false);
-           expect(renderLog.log).toEqual(['id=MTV']);
-         }));
-
-      it('should support short-circuting safe navigation', fakeAsync(() => {
-           const ctx = _bindSimpleValue('value?.address.city', PersonHolder);
-           ctx.componentInstance.value = null!;
-           ctx.detectChanges(false);
-           expect(renderLog.log).toEqual(['id=null']);
-         }));
-
-      it('should support nested short-circuting safe navigation', fakeAsync(() => {
-           const ctx = _bindSimpleValue('value.value?.address.city', PersonHolderHolder);
-           ctx.componentInstance.value = new PersonHolder();
-           ctx.detectChanges(false);
-           expect(renderLog.log).toEqual(['id=null']);
-         }));
-
-      it('should support chained short-circuting safe navigation', fakeAsync(() => {
-           const ctx = _bindSimpleValue('value?.value?.address.city', PersonHolderHolder);
-           ctx.detectChanges(false);
-           expect(renderLog.log).toEqual(['id=null']);
-         }));
-
-      it('should support short-circuting array index operations', fakeAsync(() => {
-           const ctx = _bindSimpleValue('value?.phones[0]', PersonHolder);
-           ctx.detectChanges(false);
-           expect(renderLog.log).toEqual(['id=null']);
-         }));
-
-      it('should still throw if right-side would throw', fakeAsync(() => {
-           expect(() => {
-             const ctx = _bindSimpleValue('value?.address.city', PersonHolder);
-             const person = new Person();
-             person.address = null!;
-             ctx.componentInstance.value = person;
-             ctx.detectChanges(false);
-           }).toThrow();
-         }));
-    });
+      it('should support !== operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('1 !== 1')).toEqual(['id=false']);
+      }));
 
-    it('should support method calls', fakeAsync(() => {
-         const ctx = _bindSimpleValue('sayHi("Jim")', Person);
-         ctx.detectChanges(false);
-         expect(renderLog.log).toEqual(['id=Hi, Jim']);
-       }));
-
-    it('should support function calls', fakeAsync(() => {
-         const ctx = _bindSimpleValue('a()(99)', TestData);
-         ctx.componentInstance.a = () => (a: any) => a;
-         ctx.detectChanges(false);
-         expect(renderLog.log).toEqual(['id=99']);
-       }));
-
-    it('should support chained method calls', fakeAsync(() => {
-         const ctx = _bindSimpleValue('address.toString()', Person);
-         ctx.componentInstance.address = new Address('MTV');
-         ctx.detectChanges(false);
-         expect(renderLog.log).toEqual(['id=MTV']);
-       }));
-
-    it('should support NaN', fakeAsync(() => {
-         const ctx = _bindSimpleValue('age', Person);
-         ctx.componentInstance.age = NaN;
-         ctx.detectChanges(false);
-
-         expect(renderLog.log).toEqual(['id=NaN']);
-         renderLog.clear();
-
-         ctx.detectChanges(false);
-         expect(renderLog.log).toEqual([]);
-       }));
-
-    it('should do simple watching', fakeAsync(() => {
-         const ctx = _bindSimpleValue('name', Person);
-         ctx.componentInstance.name = 'misko';
-
-         ctx.detectChanges(false);
-         expect(renderLog.log).toEqual(['id=misko']);
-         renderLog.clear();
-
-         ctx.detectChanges(false);
-         expect(renderLog.log).toEqual([]);
-         renderLog.clear();
-
-         ctx.componentInstance.name = 'Misko';
-         ctx.detectChanges(false);
-         expect(renderLog.log).toEqual(['id=Misko']);
-       }));
-
-    it('should support literal array made of literals', fakeAsync(() => {
-         const ctx = _bindSimpleValue('[1, 2]');
-         ctx.detectChanges(false);
-         expect(renderLog.loggedValues).toEqual([[1, 2]]);
-       }));
-
-    it('should support empty literal array', fakeAsync(() => {
-         const ctx = _bindSimpleValue('[]');
-         ctx.detectChanges(false);
-         expect(renderLog.loggedValues).toEqual([[]]);
-       }));
-
-    it('should support literal array made of expressions', fakeAsync(() => {
-         const ctx = _bindSimpleValue('[1, a]', TestData);
-         ctx.componentInstance.a = 2;
-         ctx.detectChanges(false);
-         expect(renderLog.loggedValues).toEqual([[1, 2]]);
-       }));
-
-    it('should not recreate literal arrays unless their content changed', fakeAsync(() => {
-         const ctx = _bindSimpleValue('[1, a]', TestData);
-         ctx.componentInstance.a = 2;
-         ctx.detectChanges(false);
-         ctx.detectChanges(false);
-         ctx.componentInstance.a = 3;
-         ctx.detectChanges(false);
-         ctx.detectChanges(false);
-         expect(renderLog.loggedValues).toEqual([[1, 2], [1, 3]]);
-       }));
-
-    it('should support literal maps made of literals', fakeAsync(() => {
-         const ctx = _bindSimpleValue('{z: 1}');
-         ctx.detectChanges(false);
-         expect(renderLog.loggedValues[0]['z']).toEqual(1);
-       }));
-
-    it('should support empty literal map', fakeAsync(() => {
-         const ctx = _bindSimpleValue('{}');
-         ctx.detectChanges(false);
-         expect(renderLog.loggedValues).toEqual([{}]);
-       }));
-
-    it('should support literal maps made of expressions', fakeAsync(() => {
-         const ctx = _bindSimpleValue('{z: a}');
-         ctx.componentInstance.a = 1;
-         ctx.detectChanges(false);
-         expect(renderLog.loggedValues[0]['z']).toEqual(1);
-       }));
-
-    it('should not recreate literal maps unless their content changed', fakeAsync(() => {
-         const ctx = _bindSimpleValue('{z: a}');
-         ctx.componentInstance.a = 1;
-         ctx.detectChanges(false);
-         ctx.detectChanges(false);
-         ctx.componentInstance.a = 2;
-         ctx.detectChanges(false);
-         ctx.detectChanges(false);
-         expect(renderLog.loggedValues.length).toBe(2);
-         expect(renderLog.loggedValues[0]['z']).toEqual(1);
-         expect(renderLog.loggedValues[1]['z']).toEqual(2);
-       }));
-
-
-    it('should ignore empty bindings', fakeAsync(() => {
-         const ctx = _bindSimpleProp('[id]', TestData);
-         ctx.componentInstance.a = 'value';
-         ctx.detectChanges(false);
-
-         expect(renderLog.log).toEqual([]);
-       }));
-
-    it('should support interpolation', fakeAsync(() => {
-         const ctx = _bindSimpleProp('id="B{{a}}A"', TestData);
-         ctx.componentInstance.a = 'value';
-         ctx.detectChanges(false);
-
-         expect(renderLog.log).toEqual(['id=BvalueA']);
-       }));
-
-    it('should output empty strings for null values in interpolation', fakeAsync(() => {
-         const ctx = _bindSimpleProp('id="B{{a}}A"', TestData);
-         ctx.componentInstance.a = null;
-         ctx.detectChanges(false);
-
-         expect(renderLog.log).toEqual(['id=BA']);
-       }));
-
-    it('should escape values in literals that indicate interpolation', fakeAsync(() => {
-         expect(_bindAndCheckSimpleValue('"$"')).toEqual(['id=$']);
-       }));
-
-    it('should read locals', fakeAsync(() => {
-         const ctx = createCompFixture(
-             '<ng-template testLocals let-local="someLocal">{{local}}</ng-template>');
-         ctx.detectChanges(false);
-
-         expect(renderLog.log).toEqual(['{{someLocalValue}}']);
-       }));
-
-    describe('pipes', () => {
-      it('should use the return value of the pipe', fakeAsync(() => {
-           const ctx = _bindSimpleValue('name | countingPipe', Person);
-           ctx.componentInstance.name = 'bob';
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual(['bob state:0']);
-         }));
-
-      it('should support arguments in pipes', fakeAsync(() => {
-           const ctx = _bindSimpleValue('name | multiArgPipe:"one":address.city', Person);
-           ctx.componentInstance.name = 'value';
-           ctx.componentInstance.address = new Address('two');
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual(['value one two default']);
-         }));
-
-      it('should associate pipes right-to-left', fakeAsync(() => {
-           const ctx = _bindSimpleValue('name | multiArgPipe:"a":"b" | multiArgPipe:0:1', Person);
-           ctx.componentInstance.name = 'value';
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual(['value a b default 0 1 default']);
-         }));
-
-      it('should support calling pure pipes with different number of arguments', fakeAsync(() => {
-           const ctx = _bindSimpleValue('name | multiArgPipe:"a":"b" | multiArgPipe:0:1:2', Person);
-           ctx.componentInstance.name = 'value';
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual(['value a b default 0 1 2']);
-         }));
-
-      it('should do nothing when no change', fakeAsync(() => {
-           const ctx = _bindSimpleValue('"Megatron" | identityPipe', Person);
-
-           ctx.detectChanges(false);
-
-           expect(renderLog.log).toEqual(['id=Megatron']);
-
-           renderLog.clear();
-           ctx.detectChanges(false);
-
-           expect(renderLog.log).toEqual([]);
-         }));
-
-      it('should call pure pipes only if the arguments change', fakeAsync(() => {
-           const ctx = _bindSimpleValue('name | countingPipe', Person);
-           // change from undefined -> null
-           ctx.componentInstance.name = null!;
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual(['null state:0']);
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual(['null state:0']);
-
-           // change from null -> some value
-           ctx.componentInstance.name = 'bob';
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual(['null state:0', 'bob state:1']);
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual(['null state:0', 'bob state:1']);
-
-           // change from some value -> some other value
-           ctx.componentInstance.name = 'bart';
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual(['null state:0', 'bob state:1', 'bart state:2']);
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual(['null state:0', 'bob state:1', 'bart state:2']);
-         }));
-
-      it('should call pure pipes that are used multiple times only when the arguments change',
-         fakeAsync(() => {
-           const ctx = createCompFixture(
-               `<div [id]="name | countingPipe"></div><div [id]="age | countingPipe"></div>` +
-                   '<div *ngFor="let x of [1,2]" [id]="address.city | countingPipe"></div>',
-               Person);
-           ctx.componentInstance.name = 'a';
-           ctx.componentInstance.age = 10;
-           ctx.componentInstance.address = new Address('mtv');
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual([
-             'a state:0', '10 state:0', 'mtv state:0', 'mtv state:0'
-           ]);
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual([
-             'a state:0', '10 state:0', 'mtv state:0', 'mtv state:0'
-           ]);
-           ctx.componentInstance.age = 11;
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual([
-             'a state:0', '10 state:0', 'mtv state:0', 'mtv state:0', '11 state:1'
-           ]);
-         }));
-
-      it('should call impure pipes on each change detection run', fakeAsync(() => {
-           const ctx = _bindSimpleValue('name | countingImpurePipe', Person);
-           ctx.componentInstance.name = 'bob';
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual(['bob state:0']);
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual(['bob state:0', 'bob state:1']);
-         }));
-    });
+      it('should support === operations on coerceible', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('1 === true')).toEqual(['id=false']);
+      }));
 
-    describe('event expressions', () => {
-      it('should support field assignments', fakeAsync(() => {
-           const ctx = _bindSimpleProp('(event)="b=a=$event"');
-           const childEl = ctx.debugElement.children[0];
-           const evt = 'EVENT';
-           childEl.triggerEventHandler('event', evt);
-
-           expect(ctx.componentInstance.a).toEqual(evt);
-           expect(ctx.componentInstance.b).toEqual(evt);
-         }));
-
-      it('should support keyed assignments', fakeAsync(() => {
-           const ctx = _bindSimpleProp('(event)="a[0]=$event"');
-           const childEl = ctx.debugElement.children[0];
-           ctx.componentInstance.a = ['OLD'];
-           const evt = 'EVENT';
-           childEl.triggerEventHandler('event', evt);
-           expect(ctx.componentInstance.a).toEqual([evt]);
-         }));
-
-      it('should support chains', fakeAsync(() => {
-           const ctx = _bindSimpleProp('(event)="a=a+1; a=a+1;"');
-           const childEl = ctx.debugElement.children[0];
-           ctx.componentInstance.a = 0;
-           childEl.triggerEventHandler('event', 'EVENT');
-           expect(ctx.componentInstance.a).toEqual(2);
-         }));
-
-      it('should support empty literals', fakeAsync(() => {
-           const ctx = _bindSimpleProp('(event)="a=[{},[]]"');
-           const childEl = ctx.debugElement.children[0];
-           childEl.triggerEventHandler('event', 'EVENT');
-
-           expect(ctx.componentInstance.a).toEqual([{}, []]);
-         }));
-
-      xit('should throw when trying to assign to a local', fakeAsync(() => {
-            expect(() => {
-              _bindSimpleProp('(event)="$event=1"');
-            })
-                .toThrowError(new RegExp(
-                    'Cannot assign value (.*) to template variable (.*). Template variables are read-only.'));
-          }));
-
-      it('should support short-circuiting', fakeAsync(() => {
-           const ctx = _bindSimpleProp('(event)="true ? a = a + 1 : a = a + 1"');
-           const childEl = ctx.debugElement.children[0];
-           ctx.componentInstance.a = 0;
-           childEl.triggerEventHandler('event', 'EVENT');
-           expect(ctx.componentInstance.a).toEqual(1);
-         }));
-    });
-  });
+      it('should support true < operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('1 < 2')).toEqual(['id=true']);
+      }));
 
-  describe('RendererFactory', () => {
-    it('should call the begin and end methods on the renderer factory when change detection is called',
-       fakeAsync(() => {
-         const ctx = createCompFixture('<div testDirective [a]="42"></div>');
-         const rf = TestBed.inject(RendererFactory2);
-         // TODO: @JiaLiPassion, need to wait @types/jasmine to fix the
-         // optional method infer issue.
-         // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/43486
-         spyOn(rf as any, 'begin');
-         spyOn(rf as any, 'end');
-         expect(rf.begin).not.toHaveBeenCalled();
-         expect(rf.end).not.toHaveBeenCalled();
-
-         ctx.detectChanges(false);
-         expect(rf.begin).toHaveBeenCalled();
-         expect(rf.end).toHaveBeenCalled();
-       }));
-  });
+      it('should support false < operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('2 < 1')).toEqual(['id=false']);
+      }));
 
-  describe('change notification', () => {
-    describe('updating directives', () => {
-      it('should happen without invoking the renderer', fakeAsync(() => {
-           const ctx = createCompFixture('<div testDirective [a]="42"></div>');
-           ctx.detectChanges(false);
-           expect(renderLog.log).toEqual([]);
-           expect(queryDirs(ctx.debugElement, TestDirective)[0].a).toEqual(42);
-         }));
-    });
+      it('should support false > operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('1 > 2')).toEqual(['id=false']);
+      }));
 
-    describe('reading directives', () => {
-      it('should read directive properties', fakeAsync(() => {
-           const ctx = createCompFixture(
-               '<div testDirective [a]="42" ref-dir="testDirective" [id]="dir.a"></div>');
-           ctx.detectChanges(false);
-           expect(renderLog.loggedValues).toEqual([42]);
-         }));
-    });
+      it('should support true > operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('2 > 1')).toEqual(['id=true']);
+      }));
 
-    describe('ngOnChanges', () => {
-      it('should notify the directive when a group of records changes', fakeAsync(() => {
-           const ctx = createCompFixture(
-               '<div [testDirective]="\'aName\'" [a]="1" [b]="2"></div><div [testDirective]="\'bName\'" [a]="4"></div>');
-           ctx.detectChanges(false);
-
-           const dirs = <TestDirective[]>queryDirs(ctx.debugElement, TestDirective);
-           expect(dirs[0].changes).toEqual({
-             'a': new SimpleChange(undefined, 1, true),
-             'b': new SimpleChange(undefined, 2, true),
-             'name': new SimpleChange(undefined, 'aName', true)
-           });
-           expect(dirs[1].changes).toEqual({
-             'a': new SimpleChange(undefined, 4, true),
-             'name': new SimpleChange(undefined, 'bName', true)
-           });
-         }));
-    });
-  });
+      it('should support true <= operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('1 <= 2')).toEqual(['id=true']);
+      }));
 
-  describe('lifecycle', () => {
-    function createCompWithContentAndViewChild(): ComponentFixture<any> {
-      TestBed.overrideComponent(AnotherComponent, {
-        set: new Component({
-          selector: 'other-cmp',
-          template: '<div testDirective="viewChild"></div>',
-        })
-      });
+      it('should support equal <= operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('2 <= 2')).toEqual(['id=true']);
+      }));
 
-      return createCompFixture(
-          '<div testDirective="parent"><div *ngIf="true" testDirective="contentChild"></div><other-cmp></other-cmp></div>',
-          TestComponent);
-    }
+      it('should support false <= operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('2 <= 1')).toEqual(['id=false']);
+      }));
 
-    describe('ngOnInit', () => {
-      it('should be called after ngOnChanges', fakeAsync(() => {
-           const ctx = createCompFixture('<div testDirective="dir"></div>');
-           expect(directiveLog.filter(['ngOnInit', 'ngOnChanges'])).toEqual([]);
+      it('should support true >= operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('2 >= 1')).toEqual(['id=true']);
+      }));
 
-           ctx.detectChanges(false);
+      it('should support equal >= operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('2 >= 2')).toEqual(['id=true']);
+      }));
 
-           expect(directiveLog.filter(['ngOnInit', 'ngOnChanges'])).toEqual([
-             'dir.ngOnChanges', 'dir.ngOnInit'
-           ]);
-           directiveLog.clear();
+      it('should support false >= operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('1 >= 2')).toEqual(['id=false']);
+      }));
 
-           ctx.detectChanges(false);
+      it('should support true && operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('true && true')).toEqual(['id=true']);
+      }));
+
+      it('should support false && operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('true && false')).toEqual(['id=false']);
+      }));
 
-           expect(directiveLog.filter(['ngOnInit'])).toEqual([]);
-         }));
+      it('should support true || operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('true || false')).toEqual(['id=true']);
+      }));
 
-      it('should only be called only once', fakeAsync(() => {
-           const ctx = createCompFixture('<div testDirective="dir"></div>');
+      it('should support false || operations', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('false || false')).toEqual(['id=false']);
+      }));
 
-           ctx.detectChanges(false);
+      it('should support negate', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('!true')).toEqual(['id=false']);
+      }));
 
-           expect(directiveLog.filter(['ngOnInit'])).toEqual(['dir.ngOnInit']);
+      it('should support double negate', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('!!true')).toEqual(['id=true']);
+      }));
 
-           // reset directives
-           directiveLog.clear();
+      it('should support true conditionals', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('1 < 2 ? 1 : 2')).toEqual(['id=1']);
+      }));
 
-           // Verify that checking should not call them.
-           ctx.checkNoChanges();
+      it('should support false conditionals', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('1 > 2 ? 1 : 2')).toEqual(['id=2']);
+      }));
 
-           expect(directiveLog.filter(['ngOnInit'])).toEqual([]);
+      it('should support keyed access to a list item', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('["foo", "bar"][0]')).toEqual(['id=foo']);
+      }));
 
-           // re-verify that changes should not call them
-           ctx.detectChanges(false);
+      it('should support keyed access to a map item', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('{"foo": "bar"}["foo"]')).toEqual(['id=bar']);
+      }));
 
-           expect(directiveLog.filter(['ngOnInit'])).toEqual([]);
-         }));
+      it('should report all changes on the first run including uninitialized values', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('value', Uninitialized)).toEqual(['id=null']);
+      }));
 
-      it('should not call ngOnInit again if it throws', fakeAsync(() => {
-           const ctx = createCompFixture('<div testDirective="dir" throwOn="ngOnInit"></div>');
+      it('should report all changes on the first run including null values', fakeAsync(() => {
+        const ctx = _bindSimpleValue('a', TestData);
+        ctx.componentInstance.a = null;
+        ctx.detectChanges(false);
+        expect(renderLog.log).toEqual(['id=null']);
+      }));
 
-           let errored = false;
-           // First pass fails, but ngOnInit should be called.
-           try {
-             ctx.detectChanges(false);
-           } catch (e) {
-             expect((e as Error).message).toBe('Boom!');
-             errored = true;
-           }
-           expect(errored).toBe(true);
+      it('should support simple chained property access', fakeAsync(() => {
+        const ctx = _bindSimpleValue('address.city', Person);
+        ctx.componentInstance.name = 'Victor';
+        ctx.componentInstance.address = new Address('Grenoble');
+        ctx.detectChanges(false);
+        expect(renderLog.log).toEqual(['id=Grenoble']);
+      }));
+
+      describe('safe navigation operator', () => {
+        it('should support reading properties of nulls', fakeAsync(() => {
+          const ctx = _bindSimpleValue('address?.city', Person);
+          ctx.componentInstance.address = null!;
+          ctx.detectChanges(false);
+          expect(renderLog.log).toEqual(['id=null']);
+        }));
+
+        it('should support calling methods on nulls', fakeAsync(() => {
+          const ctx = _bindSimpleValue('address?.toString()', Person);
+          ctx.componentInstance.address = null!;
+          ctx.detectChanges(false);
+          expect(renderLog.log).toEqual(['id=null']);
+        }));
+
+        it('should support reading properties on non nulls', fakeAsync(() => {
+          const ctx = _bindSimpleValue('address?.city', Person);
+          ctx.componentInstance.address = new Address('MTV');
+          ctx.detectChanges(false);
+          expect(renderLog.log).toEqual(['id=MTV']);
+        }));
+
+        it('should support calling methods on non nulls', fakeAsync(() => {
+          const ctx = _bindSimpleValue('address?.toString()', Person);
+          ctx.componentInstance.address = new Address('MTV');
+          ctx.detectChanges(false);
+          expect(renderLog.log).toEqual(['id=MTV']);
+        }));
+
+        it('should support short-circuting safe navigation', fakeAsync(() => {
+          const ctx = _bindSimpleValue('value?.address.city', PersonHolder);
+          ctx.componentInstance.value = null!;
+          ctx.detectChanges(false);
+          expect(renderLog.log).toEqual(['id=null']);
+        }));
+
+        it('should support nested short-circuting safe navigation', fakeAsync(() => {
+          const ctx = _bindSimpleValue('value.value?.address.city', PersonHolderHolder);
+          ctx.componentInstance.value = new PersonHolder();
+          ctx.detectChanges(false);
+          expect(renderLog.log).toEqual(['id=null']);
+        }));
+
+        it('should support chained short-circuting safe navigation', fakeAsync(() => {
+          const ctx = _bindSimpleValue('value?.value?.address.city', PersonHolderHolder);
+          ctx.detectChanges(false);
+          expect(renderLog.log).toEqual(['id=null']);
+        }));
+
+        it('should support short-circuting array index operations', fakeAsync(() => {
+          const ctx = _bindSimpleValue('value?.phones[0]', PersonHolder);
+          ctx.detectChanges(false);
+          expect(renderLog.log).toEqual(['id=null']);
+        }));
+
+        it('should still throw if right-side would throw', fakeAsync(() => {
+          expect(() => {
+            const ctx = _bindSimpleValue('value?.address.city', PersonHolder);
+            const person = new Person();
+            person.address = null!;
+            ctx.componentInstance.value = person;
+            ctx.detectChanges(false);
+          }).toThrow();
+        }));
+      });
 
-           expect(directiveLog.filter(['ngOnInit'])).toEqual(['dir.ngOnInit']);
-           directiveLog.clear();
+      it('should support method calls', fakeAsync(() => {
+        const ctx = _bindSimpleValue('sayHi("Jim")', Person);
+        ctx.detectChanges(false);
+        expect(renderLog.log).toEqual(['id=Hi, Jim']);
+      }));
 
-           // Second change detection also fails, but this time ngOnInit should not be called.
-           try {
-             ctx.detectChanges(false);
-           } catch (e) {
-             expect((e as Error).message).toBe('Boom!');
-             throw new Error('Second detectChanges() should not have called ngOnInit.');
-           }
-           expect(directiveLog.filter(['ngOnInit'])).toEqual([]);
-         }));
-    });
+      it('should support function calls', fakeAsync(() => {
+        const ctx = _bindSimpleValue('a()(99)', TestData);
+        ctx.componentInstance.a = () => (a: any) => a;
+        ctx.detectChanges(false);
+        expect(renderLog.log).toEqual(['id=99']);
+      }));
 
-    describe('ngDoCheck', () => {
-      it('should be called after ngOnInit', fakeAsync(() => {
-           const ctx = createCompFixture('<div testDirective="dir"></div>');
+      it('should support chained method calls', fakeAsync(() => {
+        const ctx = _bindSimpleValue('address.toString()', Person);
+        ctx.componentInstance.address = new Address('MTV');
+        ctx.detectChanges(false);
+        expect(renderLog.log).toEqual(['id=MTV']);
+      }));
 
-           ctx.detectChanges(false);
-           expect(directiveLog.filter(['ngDoCheck', 'ngOnInit'])).toEqual([
-             'dir.ngOnInit', 'dir.ngDoCheck'
-           ]);
-         }));
+      it('should support NaN', fakeAsync(() => {
+        const ctx = _bindSimpleValue('age', Person);
+        ctx.componentInstance.age = NaN;
+        ctx.detectChanges(false);
 
-      it('should be called on every detectChanges run, except for checkNoChanges', fakeAsync(() => {
-           const ctx = createCompFixture('<div testDirective="dir"></div>');
+        expect(renderLog.log).toEqual(['id=NaN']);
+        renderLog.clear();
 
-           ctx.detectChanges(false);
+        ctx.detectChanges(false);
+        expect(renderLog.log).toEqual([]);
+      }));
 
-           expect(directiveLog.filter(['ngDoCheck'])).toEqual(['dir.ngDoCheck']);
+      it('should do simple watching', fakeAsync(() => {
+        const ctx = _bindSimpleValue('name', Person);
+        ctx.componentInstance.name = 'misko';
 
-           // reset directives
-           directiveLog.clear();
+        ctx.detectChanges(false);
+        expect(renderLog.log).toEqual(['id=misko']);
+        renderLog.clear();
 
-           // Verify that checking should not call them.
-           ctx.checkNoChanges();
+        ctx.detectChanges(false);
+        expect(renderLog.log).toEqual([]);
+        renderLog.clear();
 
-           expect(directiveLog.filter(['ngDoCheck'])).toEqual([]);
+        ctx.componentInstance.name = 'Misko';
+        ctx.detectChanges(false);
+        expect(renderLog.log).toEqual(['id=Misko']);
+      }));
 
-           // re-verify that changes are still detected
-           ctx.detectChanges(false);
+      it('should support literal array made of literals', fakeAsync(() => {
+        const ctx = _bindSimpleValue('[1, 2]');
+        ctx.detectChanges(false);
+        expect(renderLog.loggedValues).toEqual([[1, 2]]);
+      }));
 
-           expect(directiveLog.filter(['ngDoCheck'])).toEqual(['dir.ngDoCheck']);
-         }));
-    });
+      it('should support empty literal array', fakeAsync(() => {
+        const ctx = _bindSimpleValue('[]');
+        ctx.detectChanges(false);
+        expect(renderLog.loggedValues).toEqual([[]]);
+      }));
 
-    describe('ngAfterContentInit', () => {
-      it('should be called after processing the content children but before the view children',
-         fakeAsync(() => {
-           const ctx = createCompWithContentAndViewChild();
-           ctx.detectChanges(false);
+      it('should support literal array made of expressions', fakeAsync(() => {
+        const ctx = _bindSimpleValue('[1, a]', TestData);
+        ctx.componentInstance.a = 2;
+        ctx.detectChanges(false);
+        expect(renderLog.loggedValues).toEqual([[1, 2]]);
+      }));
 
-           expect(directiveLog.filter(['ngDoCheck', 'ngAfterContentInit'])).toEqual([
-             'parent.ngDoCheck', 'contentChild.ngDoCheck', 'contentChild.ngAfterContentInit',
-             'parent.ngAfterContentInit', 'viewChild.ngDoCheck', 'viewChild.ngAfterContentInit'
-           ]);
-         }));
+      it('should not recreate literal arrays unless their content changed', fakeAsync(() => {
+        const ctx = _bindSimpleValue('[1, a]', TestData);
+        ctx.componentInstance.a = 2;
+        ctx.detectChanges(false);
+        ctx.detectChanges(false);
+        ctx.componentInstance.a = 3;
+        ctx.detectChanges(false);
+        ctx.detectChanges(false);
+        expect(renderLog.loggedValues).toEqual([
+          [1, 2],
+          [1, 3],
+        ]);
+      }));
+
+      it('should support literal maps made of literals', fakeAsync(() => {
+        const ctx = _bindSimpleValue('{z: 1}');
+        ctx.detectChanges(false);
+        expect(renderLog.loggedValues[0]['z']).toEqual(1);
+      }));
 
-      it('should only be called only once', fakeAsync(() => {
-           const ctx = createCompFixture('<div testDirective="dir"></div>');
+      it('should support empty literal map', fakeAsync(() => {
+        const ctx = _bindSimpleValue('{}');
+        ctx.detectChanges(false);
+        expect(renderLog.loggedValues).toEqual([{}]);
+      }));
 
-           ctx.detectChanges(false);
+      it('should support literal maps made of expressions', fakeAsync(() => {
+        const ctx = _bindSimpleValue('{z: a}');
+        ctx.componentInstance.a = 1;
+        ctx.detectChanges(false);
+        expect(renderLog.loggedValues[0]['z']).toEqual(1);
+      }));
 
-           expect(directiveLog.filter(['ngAfterContentInit'])).toEqual(['dir.ngAfterContentInit']);
+      it('should not recreate literal maps unless their content changed', fakeAsync(() => {
+        const ctx = _bindSimpleValue('{z: a}');
+        ctx.componentInstance.a = 1;
+        ctx.detectChanges(false);
+        ctx.detectChanges(false);
+        ctx.componentInstance.a = 2;
+        ctx.detectChanges(false);
+        ctx.detectChanges(false);
+        expect(renderLog.loggedValues.length).toBe(2);
+        expect(renderLog.loggedValues[0]['z']).toEqual(1);
+        expect(renderLog.loggedValues[1]['z']).toEqual(2);
+      }));
+
+      it('should ignore empty bindings', fakeAsync(() => {
+        const ctx = _bindSimpleProp('[id]', TestData);
+        ctx.componentInstance.a = 'value';
+        ctx.detectChanges(false);
 
-           // reset directives
-           directiveLog.clear();
+        expect(renderLog.log).toEqual([]);
+      }));
 
-           // Verify that checking should not call them.
-           ctx.checkNoChanges();
+      it('should support interpolation', fakeAsync(() => {
+        const ctx = _bindSimpleProp('id="B{{a}}A"', TestData);
+        ctx.componentInstance.a = 'value';
+        ctx.detectChanges(false);
 
-           expect(directiveLog.filter(['ngAfterContentInit'])).toEqual([]);
+        expect(renderLog.log).toEqual(['id=BvalueA']);
+      }));
 
-           // re-verify that changes should not call them
-           ctx.detectChanges(false);
+      it('should output empty strings for null values in interpolation', fakeAsync(() => {
+        const ctx = _bindSimpleProp('id="B{{a}}A"', TestData);
+        ctx.componentInstance.a = null;
+        ctx.detectChanges(false);
 
-           expect(directiveLog.filter(['ngAfterContentInit'])).toEqual([]);
-         }));
+        expect(renderLog.log).toEqual(['id=BA']);
+      }));
 
-      it('should not call ngAfterContentInit again if it throws', fakeAsync(() => {
-           const ctx =
-               createCompFixture('<div testDirective="dir" throwOn="ngAfterContentInit"></div>');
+      it('should escape values in literals that indicate interpolation', fakeAsync(() => {
+        expect(_bindAndCheckSimpleValue('"$"')).toEqual(['id=$']);
+      }));
 
-           let errored = false;
-           // First pass fails, but ngAfterContentInit should be called.
-           try {
-             ctx.detectChanges(false);
-           } catch (e) {
-             errored = true;
-           }
-           expect(errored).toBe(true);
+      it('should read locals', fakeAsync(() => {
+        const ctx = createCompFixture(
+          '<ng-template testLocals let-local="someLocal">{{local}}</ng-template>',
+        );
+        ctx.detectChanges(false);
 
-           expect(directiveLog.filter(['ngAfterContentInit'])).toEqual(['dir.ngAfterContentInit']);
-           directiveLog.clear();
+        expect(renderLog.log).toEqual(['{{someLocalValue}}']);
+      }));
+
+      describe('pipes', () => {
+        it('should use the return value of the pipe', fakeAsync(() => {
+          const ctx = _bindSimpleValue('name | countingPipe', Person);
+          ctx.componentInstance.name = 'bob';
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual(['bob state:0']);
+        }));
+
+        it('should support arguments in pipes', fakeAsync(() => {
+          const ctx = _bindSimpleValue('name | multiArgPipe:"one":address.city', Person);
+          ctx.componentInstance.name = 'value';
+          ctx.componentInstance.address = new Address('two');
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual(['value one two default']);
+        }));
+
+        it('should associate pipes right-to-left', fakeAsync(() => {
+          const ctx = _bindSimpleValue('name | multiArgPipe:"a":"b" | multiArgPipe:0:1', Person);
+          ctx.componentInstance.name = 'value';
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual(['value a b default 0 1 default']);
+        }));
+
+        it('should support calling pure pipes with different number of arguments', fakeAsync(() => {
+          const ctx = _bindSimpleValue('name | multiArgPipe:"a":"b" | multiArgPipe:0:1:2', Person);
+          ctx.componentInstance.name = 'value';
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual(['value a b default 0 1 2']);
+        }));
+
+        it('should do nothing when no change', fakeAsync(() => {
+          const ctx = _bindSimpleValue('"Megatron" | identityPipe', Person);
+
+          ctx.detectChanges(false);
+
+          expect(renderLog.log).toEqual(['id=Megatron']);
+
+          renderLog.clear();
+          ctx.detectChanges(false);
+
+          expect(renderLog.log).toEqual([]);
+        }));
+
+        it('should call pure pipes only if the arguments change', fakeAsync(() => {
+          const ctx = _bindSimpleValue('name | countingPipe', Person);
+          // change from undefined -> null
+          ctx.componentInstance.name = null!;
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual(['null state:0']);
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual(['null state:0']);
+
+          // change from null -> some value
+          ctx.componentInstance.name = 'bob';
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual(['null state:0', 'bob state:1']);
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual(['null state:0', 'bob state:1']);
+
+          // change from some value -> some other value
+          ctx.componentInstance.name = 'bart';
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual(['null state:0', 'bob state:1', 'bart state:2']);
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual(['null state:0', 'bob state:1', 'bart state:2']);
+        }));
+
+        it('should call pure pipes that are used multiple times only when the arguments change', fakeAsync(() => {
+          const ctx = createCompFixture(
+            `<div [id]="name | countingPipe"></div><div [id]="age | countingPipe"></div>` +
+              '<div *ngFor="let x of [1,2]" [id]="address.city | countingPipe"></div>',
+            Person,
+          );
+          ctx.componentInstance.name = 'a';
+          ctx.componentInstance.age = 10;
+          ctx.componentInstance.address = new Address('mtv');
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual([
+            'a state:0',
+            '10 state:0',
+            'mtv state:0',
+            'mtv state:0',
+          ]);
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual([
+            'a state:0',
+            '10 state:0',
+            'mtv state:0',
+            'mtv state:0',
+          ]);
+          ctx.componentInstance.age = 11;
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual([
+            'a state:0',
+            '10 state:0',
+            'mtv state:0',
+            'mtv state:0',
+            '11 state:1',
+          ]);
+        }));
+
+        it('should call impure pipes on each change detection run', fakeAsync(() => {
+          const ctx = _bindSimpleValue('name | countingImpurePipe', Person);
+          ctx.componentInstance.name = 'bob';
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual(['bob state:0']);
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual(['bob state:0', 'bob state:1']);
+        }));
+      });
 
-           // Second change detection also fails, but this time ngAfterContentInit should not be
-           // called.
-           try {
-             ctx.detectChanges(false);
-           } catch (e) {
-             throw new Error('Second detectChanges() should not have run detection.');
-           }
-           expect(directiveLog.filter(['ngAfterContentInit'])).toEqual([]);
-         }));
+      describe('event expressions', () => {
+        it('should support field assignments', fakeAsync(() => {
+          const ctx = _bindSimpleProp('(event)="b=a=$event"');
+          const childEl = ctx.debugElement.children[0];
+          const evt = 'EVENT';
+          childEl.triggerEventHandler('event', evt);
+
+          expect(ctx.componentInstance.a).toEqual(evt);
+          expect(ctx.componentInstance.b).toEqual(evt);
+        }));
+
+        it('should support keyed assignments', fakeAsync(() => {
+          const ctx = _bindSimpleProp('(event)="a[0]=$event"');
+          const childEl = ctx.debugElement.children[0];
+          ctx.componentInstance.a = ['OLD'];
+          const evt = 'EVENT';
+          childEl.triggerEventHandler('event', evt);
+          expect(ctx.componentInstance.a).toEqual([evt]);
+        }));
+
+        it('should support chains', fakeAsync(() => {
+          const ctx = _bindSimpleProp('(event)="a=a+1; a=a+1;"');
+          const childEl = ctx.debugElement.children[0];
+          ctx.componentInstance.a = 0;
+          childEl.triggerEventHandler('event', 'EVENT');
+          expect(ctx.componentInstance.a).toEqual(2);
+        }));
+
+        it('should support empty literals', fakeAsync(() => {
+          const ctx = _bindSimpleProp('(event)="a=[{},[]]"');
+          const childEl = ctx.debugElement.children[0];
+          childEl.triggerEventHandler('event', 'EVENT');
+
+          expect(ctx.componentInstance.a).toEqual([{}, []]);
+        }));
+
+        xit('should throw when trying to assign to a local', fakeAsync(() => {
+          expect(() => {
+            _bindSimpleProp('(event)="$event=1"');
+          }).toThrowError(
+            new RegExp(
+              'Cannot assign value (.*) to template variable (.*). Template variables are read-only.',
+            ),
+          );
+        }));
+
+        it('should support short-circuiting', fakeAsync(() => {
+          const ctx = _bindSimpleProp('(event)="true ? a = a + 1 : a = a + 1"');
+          const childEl = ctx.debugElement.children[0];
+          ctx.componentInstance.a = 0;
+          childEl.triggerEventHandler('event', 'EVENT');
+          expect(ctx.componentInstance.a).toEqual(1);
+        }));
+      });
     });
 
-    describe('ngAfterContentChecked', () => {
-      it('should be called after the content children but before the view children',
-         fakeAsync(() => {
-           const ctx = createCompWithContentAndViewChild();
+    describe('RendererFactory', () => {
+      it('should call the begin and end methods on the renderer factory when change detection is called', fakeAsync(() => {
+        const ctx = createCompFixture('<div testDirective [a]="42"></div>');
+        const rf = TestBed.inject(RendererFactory2);
+        // TODO: @JiaLiPassion, need to wait @types/jasmine to fix the
+        // optional method infer issue.
+        // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/43486
+        spyOn(rf as any, 'begin');
+        spyOn(rf as any, 'end');
+        expect(rf.begin).not.toHaveBeenCalled();
+        expect(rf.end).not.toHaveBeenCalled();
 
-           ctx.detectChanges(false);
+        ctx.detectChanges(false);
+        expect(rf.begin).toHaveBeenCalled();
+        expect(rf.end).toHaveBeenCalled();
+      }));
+    });
 
-           expect(directiveLog.filter(['ngDoCheck', 'ngAfterContentChecked'])).toEqual([
-             'parent.ngDoCheck', 'contentChild.ngDoCheck', 'contentChild.ngAfterContentChecked',
-             'parent.ngAfterContentChecked', 'viewChild.ngDoCheck',
-             'viewChild.ngAfterContentChecked'
-           ]);
-         }));
+    describe('change notification', () => {
+      describe('updating directives', () => {
+        it('should happen without invoking the renderer', fakeAsync(() => {
+          const ctx = createCompFixture('<div testDirective [a]="42"></div>');
+          ctx.detectChanges(false);
+          expect(renderLog.log).toEqual([]);
+          expect(queryDirs(ctx.debugElement, TestDirective)[0].a).toEqual(42);
+        }));
+      });
 
-      it('should be called on every detectChanges run, except for checkNoChanges', fakeAsync(() => {
-           const ctx = createCompFixture('<div testDirective="dir"></div>');
+      describe('reading directives', () => {
+        it('should read directive properties', fakeAsync(() => {
+          const ctx = createCompFixture(
+            '<div testDirective [a]="42" ref-dir="testDirective" [id]="dir.a"></div>',
+          );
+          ctx.detectChanges(false);
+          expect(renderLog.loggedValues).toEqual([42]);
+        }));
+      });
 
-           ctx.detectChanges(false);
+      describe('ngOnChanges', () => {
+        it('should notify the directive when a group of records changes', fakeAsync(() => {
+          const ctx = createCompFixture(
+            '<div [testDirective]="\'aName\'" [a]="1" [b]="2"></div><div [testDirective]="\'bName\'" [a]="4"></div>',
+          );
+          ctx.detectChanges(false);
+
+          const dirs = <TestDirective[]>queryDirs(ctx.debugElement, TestDirective);
+          expect(dirs[0].changes).toEqual({
+            'a': new SimpleChange(undefined, 1, true),
+            'b': new SimpleChange(undefined, 2, true),
+            'name': new SimpleChange(undefined, 'aName', true),
+          });
+          expect(dirs[1].changes).toEqual({
+            'a': new SimpleChange(undefined, 4, true),
+            'name': new SimpleChange(undefined, 'bName', true),
+          });
+        }));
+      });
+    });
 
-           expect(directiveLog.filter(['ngAfterContentChecked'])).toEqual([
-             'dir.ngAfterContentChecked'
-           ]);
+    describe('lifecycle', () => {
+      function createCompWithContentAndViewChild(): ComponentFixture<any> {
+        TestBed.overrideComponent(AnotherComponent, {
+          set: new Component({
+            selector: 'other-cmp',
+            template: '<div testDirective="viewChild"></div>',
+          }),
+        });
 
-           // reset directives
-           directiveLog.clear();
+        return createCompFixture(
+          '<div testDirective="parent"><div *ngIf="true" testDirective="contentChild"></div><other-cmp></other-cmp></div>',
+          TestComponent,
+        );
+      }
 
-           // Verify that checking should not call them.
-           ctx.checkNoChanges();
+      describe('ngOnInit', () => {
+        it('should be called after ngOnChanges', fakeAsync(() => {
+          const ctx = createCompFixture('<div testDirective="dir"></div>');
+          expect(directiveLog.filter(['ngOnInit', 'ngOnChanges'])).toEqual([]);
 
-           expect(directiveLog.filter(['ngAfterContentChecked'])).toEqual([]);
+          ctx.detectChanges(false);
 
-           // re-verify that changes are still detected
-           ctx.detectChanges(false);
+          expect(directiveLog.filter(['ngOnInit', 'ngOnChanges'])).toEqual([
+            'dir.ngOnChanges',
+            'dir.ngOnInit',
+          ]);
+          directiveLog.clear();
 
-           expect(directiveLog.filter(['ngAfterContentChecked'])).toEqual([
-             'dir.ngAfterContentChecked'
-           ]);
-         }));
+          ctx.detectChanges(false);
 
-      it('should be called in reverse order so the child is always notified before the parent',
-         fakeAsync(() => {
-           const ctx = createCompFixture(
-               '<div testDirective="parent"><div testDirective="child"></div></div><div testDirective="sibling"></div>');
+          expect(directiveLog.filter(['ngOnInit'])).toEqual([]);
+        }));
 
-           ctx.detectChanges(false);
+        it('should only be called only once', fakeAsync(() => {
+          const ctx = createCompFixture('<div testDirective="dir"></div>');
 
-           expect(directiveLog.filter(['ngAfterContentChecked'])).toEqual([
-             'child.ngAfterContentChecked', 'parent.ngAfterContentChecked',
-             'sibling.ngAfterContentChecked'
-           ]);
-         }));
-    });
+          ctx.detectChanges(false);
 
+          expect(directiveLog.filter(['ngOnInit'])).toEqual(['dir.ngOnInit']);
 
-    describe('ngAfterViewInit', () => {
-      it('should be called after processing the view children', fakeAsync(() => {
-           const ctx = createCompWithContentAndViewChild();
+          // reset directives
+          directiveLog.clear();
 
-           ctx.detectChanges(false);
+          // Verify that checking should not call them.
+          ctx.checkNoChanges();
 
-           expect(directiveLog.filter(['ngDoCheck', 'ngAfterViewInit'])).toEqual([
-             'parent.ngDoCheck', 'contentChild.ngDoCheck', 'contentChild.ngAfterViewInit',
-             'viewChild.ngDoCheck', 'viewChild.ngAfterViewInit', 'parent.ngAfterViewInit'
-           ]);
-         }));
+          expect(directiveLog.filter(['ngOnInit'])).toEqual([]);
 
-      it('should only be called only once', fakeAsync(() => {
-           const ctx = createCompFixture('<div testDirective="dir"></div>');
+          // re-verify that changes should not call them
+          ctx.detectChanges(false);
 
-           ctx.detectChanges(false);
+          expect(directiveLog.filter(['ngOnInit'])).toEqual([]);
+        }));
 
-           expect(directiveLog.filter(['ngAfterViewInit'])).toEqual(['dir.ngAfterViewInit']);
+        it('should not call ngOnInit again if it throws', fakeAsync(() => {
+          const ctx = createCompFixture('<div testDirective="dir" throwOn="ngOnInit"></div>');
 
-           // reset directives
-           directiveLog.clear();
+          let errored = false;
+          // First pass fails, but ngOnInit should be called.
+          try {
+            ctx.detectChanges(false);
+          } catch (e) {
+            expect((e as Error).message).toBe('Boom!');
+            errored = true;
+          }
+          expect(errored).toBe(true);
 
-           // Verify that checking should not call them.
-           ctx.checkNoChanges();
+          expect(directiveLog.filter(['ngOnInit'])).toEqual(['dir.ngOnInit']);
+          directiveLog.clear();
 
-           expect(directiveLog.filter(['ngAfterViewInit'])).toEqual([]);
+          // Second change detection also fails, but this time ngOnInit should not be called.
+          try {
+            ctx.detectChanges(false);
+          } catch (e) {
+            expect((e as Error).message).toBe('Boom!');
+            throw new Error('Second detectChanges() should not have called ngOnInit.');
+          }
+          expect(directiveLog.filter(['ngOnInit'])).toEqual([]);
+        }));
+      });
 
-           // re-verify that changes should not call them
-           ctx.detectChanges(false);
+      describe('ngDoCheck', () => {
+        it('should be called after ngOnInit', fakeAsync(() => {
+          const ctx = createCompFixture('<div testDirective="dir"></div>');
 
-           expect(directiveLog.filter(['ngAfterViewInit'])).toEqual([]);
-         }));
+          ctx.detectChanges(false);
+          expect(directiveLog.filter(['ngDoCheck', 'ngOnInit'])).toEqual([
+            'dir.ngOnInit',
+            'dir.ngDoCheck',
+          ]);
+        }));
 
-      it('should not call ngAfterViewInit again if it throws', fakeAsync(() => {
-           const ctx =
-               createCompFixture('<div testDirective="dir" throwOn="ngAfterViewInit"></div>');
+        it('should be called on every detectChanges run, except for checkNoChanges', fakeAsync(() => {
+          const ctx = createCompFixture('<div testDirective="dir"></div>');
 
-           let errored = false;
-           // First pass fails, but ngAfterViewInit should be called.
-           try {
-             ctx.detectChanges(false);
-           } catch (e) {
-             errored = true;
-           }
-           expect(errored).toBe(true);
+          ctx.detectChanges(false);
 
-           expect(directiveLog.filter(['ngAfterViewInit'])).toEqual(['dir.ngAfterViewInit']);
-           directiveLog.clear();
+          expect(directiveLog.filter(['ngDoCheck'])).toEqual(['dir.ngDoCheck']);
 
-           // Second change detection also fails, but this time ngAfterViewInit should not be
-           // called.
-           try {
-             ctx.detectChanges(false);
-           } catch (e) {
-             throw new Error('Second detectChanges() should not have run detection.');
-           }
-           expect(directiveLog.filter(['ngAfterViewInit'])).toEqual([]);
-         }));
-    });
+          // reset directives
+          directiveLog.clear();
 
-    describe('ngAfterViewChecked', () => {
-      it('should be called after processing the view children', fakeAsync(() => {
-           const ctx = createCompWithContentAndViewChild();
+          // Verify that checking should not call them.
+          ctx.checkNoChanges();
 
-           ctx.detectChanges(false);
+          expect(directiveLog.filter(['ngDoCheck'])).toEqual([]);
 
-           expect(directiveLog.filter(['ngDoCheck', 'ngAfterViewChecked'])).toEqual([
-             'parent.ngDoCheck', 'contentChild.ngDoCheck', 'contentChild.ngAfterViewChecked',
-             'viewChild.ngDoCheck', 'viewChild.ngAfterViewChecked', 'parent.ngAfterViewChecked'
-           ]);
-         }));
+          // re-verify that changes are still detected
+          ctx.detectChanges(false);
 
-      it('should be called on every detectChanges run, except for checkNoChanges', fakeAsync(() => {
-           const ctx = createCompFixture('<div testDirective="dir"></div>');
+          expect(directiveLog.filter(['ngDoCheck'])).toEqual(['dir.ngDoCheck']);
+        }));
+      });
 
-           ctx.detectChanges(false);
+      describe('ngAfterContentInit', () => {
+        it('should be called after processing the content children but before the view children', fakeAsync(() => {
+          const ctx = createCompWithContentAndViewChild();
+          ctx.detectChanges(false);
 
-           expect(directiveLog.filter(['ngAfterViewChecked'])).toEqual(['dir.ngAfterViewChecked']);
+          expect(directiveLog.filter(['ngDoCheck', 'ngAfterContentInit'])).toEqual([
+            'parent.ngDoCheck',
+            'contentChild.ngDoCheck',
+            'contentChild.ngAfterContentInit',
+            'parent.ngAfterContentInit',
+            'viewChild.ngDoCheck',
+            'viewChild.ngAfterContentInit',
+          ]);
+        }));
 
-           // reset directives
-           directiveLog.clear();
+        it('should only be called only once', fakeAsync(() => {
+          const ctx = createCompFixture('<div testDirective="dir"></div>');
 
-           // Verify that checking should not call them.
-           ctx.checkNoChanges();
+          ctx.detectChanges(false);
 
-           expect(directiveLog.filter(['ngAfterViewChecked'])).toEqual([]);
+          expect(directiveLog.filter(['ngAfterContentInit'])).toEqual(['dir.ngAfterContentInit']);
 
-           // re-verify that changes are still detected
-           ctx.detectChanges(false);
+          // reset directives
+          directiveLog.clear();
 
-           expect(directiveLog.filter(['ngAfterViewChecked'])).toEqual(['dir.ngAfterViewChecked']);
-         }));
+          // Verify that checking should not call them.
+          ctx.checkNoChanges();
 
-      it('should be called in reverse order so the child is always notified before the parent',
-         fakeAsync(() => {
-           const ctx = createCompFixture(
-               '<div testDirective="parent"><div testDirective="child"></div></div><div testDirective="sibling"></div>');
+          expect(directiveLog.filter(['ngAfterContentInit'])).toEqual([]);
 
-           ctx.detectChanges(false);
+          // re-verify that changes should not call them
+          ctx.detectChanges(false);
 
-           expect(directiveLog.filter(['ngAfterViewChecked'])).toEqual([
-             'child.ngAfterViewChecked', 'parent.ngAfterViewChecked', 'sibling.ngAfterViewChecked'
-           ]);
-         }));
-    });
+          expect(directiveLog.filter(['ngAfterContentInit'])).toEqual([]);
+        }));
 
-    describe('ngOnDestroy', () => {
-      it('should be called on view destruction', fakeAsync(() => {
-           const ctx = createCompFixture('<div testDirective="dir"></div>');
-           ctx.detectChanges(false);
+        it('should not call ngAfterContentInit again if it throws', fakeAsync(() => {
+          const ctx = createCompFixture(
+            '<div testDirective="dir" throwOn="ngAfterContentInit"></div>',
+          );
 
-           ctx.destroy();
+          let errored = false;
+          // First pass fails, but ngAfterContentInit should be called.
+          try {
+            ctx.detectChanges(false);
+          } catch (e) {
+            errored = true;
+          }
+          expect(errored).toBe(true);
 
-           expect(directiveLog.filter(['ngOnDestroy'])).toEqual(['dir.ngOnDestroy']);
-         }));
+          expect(directiveLog.filter(['ngAfterContentInit'])).toEqual(['dir.ngAfterContentInit']);
+          directiveLog.clear();
 
-      it('should be called after processing the content and view children', fakeAsync(() => {
-           TestBed.overrideComponent(AnotherComponent, {
-             set: new Component(
-                 {selector: 'other-cmp', template: '<div testDirective="viewChild"></div>'})
-           });
+          // Second change detection also fails, but this time ngAfterContentInit should not be
+          // called.
+          try {
+            ctx.detectChanges(false);
+          } catch (e) {
+            throw new Error('Second detectChanges() should not have run detection.');
+          }
+          expect(directiveLog.filter(['ngAfterContentInit'])).toEqual([]);
+        }));
+      });
 
-           const ctx = createCompFixture(
-               '<div testDirective="parent"><div *ngFor="let x of [0,1]" testDirective="contentChild{{x}}"></div>' +
-                   '<other-cmp></other-cmp></div>',
-               TestComponent);
+      describe('ngAfterContentChecked', () => {
+        it('should be called after the content children but before the view children', fakeAsync(() => {
+          const ctx = createCompWithContentAndViewChild();
 
-           ctx.detectChanges(false);
-           ctx.destroy();
+          ctx.detectChanges(false);
 
-           expect(directiveLog.filter(['ngOnDestroy'])).toEqual([
-             'contentChild0.ngOnDestroy', 'contentChild1.ngOnDestroy', 'viewChild.ngOnDestroy',
-             'parent.ngOnDestroy'
-           ]);
-         }));
+          expect(directiveLog.filter(['ngDoCheck', 'ngAfterContentChecked'])).toEqual([
+            'parent.ngDoCheck',
+            'contentChild.ngDoCheck',
+            'contentChild.ngAfterContentChecked',
+            'parent.ngAfterContentChecked',
+            'viewChild.ngDoCheck',
+            'viewChild.ngAfterContentChecked',
+          ]);
+        }));
 
-      it('should be called in reverse order so the child is always notified before the parent',
-         fakeAsync(() => {
-           const ctx = createCompFixture(
-               '<div testDirective="parent"><div testDirective="child"></div></div><div testDirective="sibling"></div>');
+        it('should be called on every detectChanges run, except for checkNoChanges', fakeAsync(() => {
+          const ctx = createCompFixture('<div testDirective="dir"></div>');
 
-           ctx.detectChanges(false);
-           ctx.destroy();
+          ctx.detectChanges(false);
 
-           expect(directiveLog.filter(['ngOnDestroy'])).toEqual([
-             'child.ngOnDestroy', 'parent.ngOnDestroy', 'sibling.ngOnDestroy'
-           ]);
-         }));
+          expect(directiveLog.filter(['ngAfterContentChecked'])).toEqual([
+            'dir.ngAfterContentChecked',
+          ]);
 
-      it('should deliver synchronous events to parent', fakeAsync(() => {
-           const ctx = createCompFixture('<div (destroy)="a=$event" onDestroyDirective></div>');
+          // reset directives
+          directiveLog.clear();
 
-           ctx.detectChanges(false);
-           ctx.destroy();
+          // Verify that checking should not call them.
+          ctx.checkNoChanges();
 
-           expect(ctx.componentInstance.a).toEqual('destroyed');
-         }));
+          expect(directiveLog.filter(['ngAfterContentChecked'])).toEqual([]);
 
+          // re-verify that changes are still detected
+          ctx.detectChanges(false);
 
-      it('should call ngOnDestroy on pipes', fakeAsync(() => {
-           const ctx = createCompFixture('{{true | pipeWithOnDestroy }}');
+          expect(directiveLog.filter(['ngAfterContentChecked'])).toEqual([
+            'dir.ngAfterContentChecked',
+          ]);
+        }));
 
-           ctx.detectChanges(false);
-           ctx.destroy();
+        it('should be called in reverse order so the child is always notified before the parent', fakeAsync(() => {
+          const ctx = createCompFixture(
+            '<div testDirective="parent"><div testDirective="child"></div></div><div testDirective="sibling"></div>',
+          );
 
-           expect(directiveLog.filter(['ngOnDestroy'])).toEqual(['pipeWithOnDestroy.ngOnDestroy']);
-         }));
+          ctx.detectChanges(false);
 
-      it('should call ngOnDestroy on an injectable class', fakeAsync(() => {
-           TestBed.overrideDirective(TestDirective, {set: {providers: [InjectableWithLifecycle]}});
+          expect(directiveLog.filter(['ngAfterContentChecked'])).toEqual([
+            'child.ngAfterContentChecked',
+            'parent.ngAfterContentChecked',
+            'sibling.ngAfterContentChecked',
+          ]);
+        }));
+      });
 
-           const ctx = createCompFixture('<div testDirective="dir"></div>', TestComponent);
+      describe('ngAfterViewInit', () => {
+        it('should be called after processing the view children', fakeAsync(() => {
+          const ctx = createCompWithContentAndViewChild();
 
-           ctx.debugElement.children[0].injector.get(InjectableWithLifecycle);
-           ctx.detectChanges(false);
+          ctx.detectChanges(false);
 
-           ctx.destroy();
+          expect(directiveLog.filter(['ngDoCheck', 'ngAfterViewInit'])).toEqual([
+            'parent.ngDoCheck',
+            'contentChild.ngDoCheck',
+            'contentChild.ngAfterViewInit',
+            'viewChild.ngDoCheck',
+            'viewChild.ngAfterViewInit',
+            'parent.ngAfterViewInit',
+          ]);
+        }));
 
-           // We don't care about the exact order in this test.
-           expect(directiveLog.filter(['ngOnDestroy']).sort()).toEqual([
-             'dir.ngOnDestroy', 'injectable.ngOnDestroy'
-           ]);
-         }));
-    });
-  });
+        it('should only be called only once', fakeAsync(() => {
+          const ctx = createCompFixture('<div testDirective="dir"></div>');
 
-  describe('enforce no new changes', () => {
-    it('should throw when a record gets changed after it has been checked', fakeAsync(() => {
-         @Directive({selector: '[changed]'})
-         class ChangingDirective {
-           @Input() changed: any;
-         }
+          ctx.detectChanges(false);
 
-         TestBed.configureTestingModule({declarations: [ChangingDirective]});
+          expect(directiveLog.filter(['ngAfterViewInit'])).toEqual(['dir.ngAfterViewInit']);
 
-         const ctx = createCompFixture('<div [id]="a" [changed]="b"></div>', TestData);
+          // reset directives
+          directiveLog.clear();
 
-         ctx.componentInstance.b = 1;
-         const errMsgRegExp = /Previous value: 'undefined'\. Current value: '1'/g;
-         expect(() => ctx.checkNoChanges()).toThrowError(errMsgRegExp);
-       }));
+          // Verify that checking should not call them.
+          ctx.checkNoChanges();
 
+          expect(directiveLog.filter(['ngAfterViewInit'])).toEqual([]);
 
-    it('should throw when a record gets changed after the first change detection pass',
-       fakeAsync(() => {
-         @Directive({selector: '[changed]'})
-         class ChangingDirective {
-           @Input() changed: any;
-         }
+          // re-verify that changes should not call them
+          ctx.detectChanges(false);
 
-         TestBed.configureTestingModule({declarations: [ChangingDirective]});
+          expect(directiveLog.filter(['ngAfterViewInit'])).toEqual([]);
+        }));
 
-         const ctx = createCompFixture('<div [id]="a" [changed]="b"></div>', TestData);
+        it('should not call ngAfterViewInit again if it throws', fakeAsync(() => {
+          const ctx = createCompFixture(
+            '<div testDirective="dir" throwOn="ngAfterViewInit"></div>',
+          );
 
-         ctx.componentInstance.b = 1;
-         ctx.detectChanges();
+          let errored = false;
+          // First pass fails, but ngAfterViewInit should be called.
+          try {
+            ctx.detectChanges(false);
+          } catch (e) {
+            errored = true;
+          }
+          expect(errored).toBe(true);
 
-         ctx.componentInstance.b = 2;
-         const errMsgRegExp = /Previous value: '1'\. Current value: '2'/g;
-         expect(() => ctx.checkNoChanges()).toThrowError(errMsgRegExp);
-       }));
+          expect(directiveLog.filter(['ngAfterViewInit'])).toEqual(['dir.ngAfterViewInit']);
+          directiveLog.clear();
 
-    it('should allow view to be created in a cd hook', () => {
-      const ctx = createCompFixture('<div *gh9882>{{ a }}</div>', TestData);
-      ctx.componentInstance.a = 1;
-      ctx.detectChanges();
-      expect(ctx.nativeElement.innerText).toEqual('1');
-    });
+          // Second change detection also fails, but this time ngAfterViewInit should not be
+          // called.
+          try {
+            ctx.detectChanges(false);
+          } catch (e) {
+            throw new Error('Second detectChanges() should not have run detection.');
+          }
+          expect(directiveLog.filter(['ngAfterViewInit'])).toEqual([]);
+        }));
+      });
 
-    it('should not throw when two arrays are structurally the same', fakeAsync(() => {
-         const ctx = _bindSimpleValue('a', TestData);
-         ctx.componentInstance.a = ['value'];
-         ctx.detectChanges(false);
-         ctx.componentInstance.a = ['value'];
-         expect(() => ctx.checkNoChanges()).not.toThrow();
-       }));
+      describe('ngAfterViewChecked', () => {
+        it('should be called after processing the view children', fakeAsync(() => {
+          const ctx = createCompWithContentAndViewChild();
 
-    it('should not break the next run', fakeAsync(() => {
-         const ctx = _bindSimpleValue('a', TestData);
-         ctx.componentInstance.a = 'value';
-         expect(() => ctx.checkNoChanges()).toThrow();
+          ctx.detectChanges(false);
 
-         ctx.detectChanges();
-         expect(renderLog.loggedValues).toEqual(['value']);
-       }));
+          expect(directiveLog.filter(['ngDoCheck', 'ngAfterViewChecked'])).toEqual([
+            'parent.ngDoCheck',
+            'contentChild.ngDoCheck',
+            'contentChild.ngAfterViewChecked',
+            'viewChild.ngDoCheck',
+            'viewChild.ngAfterViewChecked',
+            'parent.ngAfterViewChecked',
+          ]);
+        }));
 
-    it('should not break the next run (view engine and ivy)', fakeAsync(() => {
-         const ctx = _bindSimpleValue('a', TestData);
+        it('should be called on every detectChanges run, except for checkNoChanges', fakeAsync(() => {
+          const ctx = createCompFixture('<div testDirective="dir"></div>');
 
-         ctx.detectChanges();
-         renderLog.clear();
+          ctx.detectChanges(false);
 
-         ctx.componentInstance.a = 'value';
-         expect(() => ctx.checkNoChanges()).toThrow();
+          expect(directiveLog.filter(['ngAfterViewChecked'])).toEqual(['dir.ngAfterViewChecked']);
 
-         ctx.detectChanges();
-         expect(renderLog.loggedValues).toEqual(['value']);
-       }));
-  });
+          // reset directives
+          directiveLog.clear();
 
-  describe('mode', () => {
-    it('Detached', fakeAsync(() => {
-         const ctx = createCompFixture('<comp-with-ref></comp-with-ref>');
-         const cmp: CompWithRef = queryDirs(ctx.debugElement, CompWithRef)[0];
-         cmp.value = 'hello';
-         cmp.changeDetectorRef.detach();
+          // Verify that checking should not call them.
+          ctx.checkNoChanges();
 
-         ctx.detectChanges();
+          expect(directiveLog.filter(['ngAfterViewChecked'])).toEqual([]);
 
-         expect(renderLog.log).toEqual([]);
-       }));
+          // re-verify that changes are still detected
+          ctx.detectChanges(false);
 
-    it('Detached should disable OnPush', fakeAsync(() => {
-         const ctx = createCompFixture('<push-cmp [value]="value"></push-cmp>');
-         ctx.componentInstance.value = 0;
-         ctx.detectChanges();
-         renderLog.clear();
+          expect(directiveLog.filter(['ngAfterViewChecked'])).toEqual(['dir.ngAfterViewChecked']);
+        }));
 
-         const cmp: CompWithRef = queryDirs(ctx.debugElement, PushComp)[0];
-         cmp.changeDetectorRef.detach();
+        it('should be called in reverse order so the child is always notified before the parent', fakeAsync(() => {
+          const ctx = createCompFixture(
+            '<div testDirective="parent"><div testDirective="child"></div></div><div testDirective="sibling"></div>',
+          );
 
-         ctx.componentInstance.value = 1;
-         ctx.detectChanges();
+          ctx.detectChanges(false);
 
-         expect(renderLog.log).toEqual([]);
-       }));
+          expect(directiveLog.filter(['ngAfterViewChecked'])).toEqual([
+            'child.ngAfterViewChecked',
+            'parent.ngAfterViewChecked',
+            'sibling.ngAfterViewChecked',
+          ]);
+        }));
+      });
 
-    it('Detached view can be checked locally', fakeAsync(() => {
-         const ctx = createCompFixture('<wrap-comp-with-ref></wrap-comp-with-ref>');
-         const cmp: CompWithRef = queryDirs(ctx.debugElement, CompWithRef)[0];
-         cmp.value = 'hello';
-         cmp.changeDetectorRef.detach();
-         expect(renderLog.log).toEqual([]);
+      describe('ngOnDestroy', () => {
+        it('should be called on view destruction', fakeAsync(() => {
+          const ctx = createCompFixture('<div testDirective="dir"></div>');
+          ctx.detectChanges(false);
 
-         ctx.detectChanges();
+          ctx.destroy();
 
-         expect(renderLog.log).toEqual([]);
+          expect(directiveLog.filter(['ngOnDestroy'])).toEqual(['dir.ngOnDestroy']);
+        }));
 
-         cmp.changeDetectorRef.detectChanges();
+        it('should be called after processing the content and view children', fakeAsync(() => {
+          TestBed.overrideComponent(AnotherComponent, {
+            set: new Component({
+              selector: 'other-cmp',
+              template: '<div testDirective="viewChild"></div>',
+            }),
+          });
 
-         expect(renderLog.log).toEqual(['{{hello}}']);
-       }));
+          const ctx = createCompFixture(
+            '<div testDirective="parent"><div *ngFor="let x of [0,1]" testDirective="contentChild{{x}}"></div>' +
+              '<other-cmp></other-cmp></div>',
+            TestComponent,
+          );
 
+          ctx.detectChanges(false);
+          ctx.destroy();
 
-    it('Reattaches', fakeAsync(() => {
-         const ctx = createCompFixture('<comp-with-ref></comp-with-ref>');
-         const cmp: CompWithRef = queryDirs(ctx.debugElement, CompWithRef)[0];
+          expect(directiveLog.filter(['ngOnDestroy'])).toEqual([
+            'contentChild0.ngOnDestroy',
+            'contentChild1.ngOnDestroy',
+            'viewChild.ngOnDestroy',
+            'parent.ngOnDestroy',
+          ]);
+        }));
 
-         cmp.value = 'hello';
-         cmp.changeDetectorRef.detach();
+        it('should be called in reverse order so the child is always notified before the parent', fakeAsync(() => {
+          const ctx = createCompFixture(
+            '<div testDirective="parent"><div testDirective="child"></div></div><div testDirective="sibling"></div>',
+          );
 
-         ctx.detectChanges();
+          ctx.detectChanges(false);
+          ctx.destroy();
 
-         expect(renderLog.log).toEqual([]);
+          expect(directiveLog.filter(['ngOnDestroy'])).toEqual([
+            'child.ngOnDestroy',
+            'parent.ngOnDestroy',
+            'sibling.ngOnDestroy',
+          ]);
+        }));
 
-         cmp.changeDetectorRef.reattach();
+        it('should deliver synchronous events to parent', fakeAsync(() => {
+          const ctx = createCompFixture('<div (destroy)="a=$event" onDestroyDirective></div>');
 
-         ctx.detectChanges();
+          ctx.detectChanges(false);
+          ctx.destroy();
 
-         expect(renderLog.log).toEqual(['{{hello}}']);
-       }));
+          expect(ctx.componentInstance.a).toEqual('destroyed');
+        }));
 
-    it('Reattaches in the original cd mode', fakeAsync(() => {
-         const ctx = createCompFixture('<push-cmp></push-cmp>');
-         const cmp: PushComp = queryDirs(ctx.debugElement, PushComp)[0];
-         cmp.changeDetectorRef.detach();
-         cmp.changeDetectorRef.reattach();
+        it('should call ngOnDestroy on pipes', fakeAsync(() => {
+          const ctx = createCompFixture('{{true | pipeWithOnDestroy }}');
 
-         // renderCount should NOT be incremented with each CD as CD mode
-         // should be resetted to
-         // on-push
-         ctx.detectChanges();
-         expect(cmp.renderCount).toBeGreaterThan(0);
-         const count = cmp.renderCount;
+          ctx.detectChanges(false);
+          ctx.destroy();
 
-         ctx.detectChanges();
-         expect(cmp.renderCount).toBe(count);
-       }));
-  });
+          expect(directiveLog.filter(['ngOnDestroy'])).toEqual(['pipeWithOnDestroy.ngOnDestroy']);
+        }));
 
-  describe('nested view recursion', () => {
-    it('should recurse into nested components even if there are no bindings in the component view',
-       () => {
-         @Component({selector: 'nested', template: '{{name}}'})
-         class Nested {
-           name = 'Tom';
-         }
-
-         TestBed.configureTestingModule({declarations: [Nested]});
-
-         const ctx = createCompFixture('<nested></nested>');
-         ctx.detectChanges();
-         expect(renderLog.loggedValues).toEqual(['Tom']);
-       });
-
-    it('should recurse into nested view containers even if there are no bindings in the component view',
-       () => {
-         @Component({template: '<ng-template #vc>{{name}}</ng-template>'})
-         class Comp {
-           name = 'Tom';
-           @ViewChild('vc', {read: ViewContainerRef, static: true}) vc!: ViewContainerRef;
-           @ViewChild(TemplateRef, {static: true}) template!: TemplateRef<any>;
-         }
-
-         TestBed.configureTestingModule({declarations: [Comp]});
-         initHelpers();
-
-         const ctx = TestBed.createComponent(Comp);
-         ctx.detectChanges();
-         expect(renderLog.loggedValues).toEqual([]);
-
-         ctx.componentInstance.vc.createEmbeddedView(ctx.componentInstance.template);
-         ctx.detectChanges();
-         expect(renderLog.loggedValues).toEqual(['Tom']);
-       });
-
-    describe('projected views', () => {
-      let log: string[];
-
-      @Directive({selector: '[i]'})
-      class DummyDirective {
-        @Input() i: any;
-      }
+        it('should call ngOnDestroy on an injectable class', fakeAsync(() => {
+          TestBed.overrideDirective(TestDirective, {set: {providers: [InjectableWithLifecycle]}});
 
-      @Component({
-        selector: 'main-cmp',
-        template:
-            `<span [i]="log('start')"></span><outer-cmp><ng-template><span [i]="log('tpl')"></span></ng-template></outer-cmp>`
-      })
-      class MainComp {
-        constructor(public cdRef: ChangeDetectorRef) {}
-        log(id: string) {
-          log.push(`main-${id}`);
-        }
-      }
+          const ctx = createCompFixture('<div testDirective="dir"></div>', TestComponent);
+
+          ctx.debugElement.children[0].injector.get(InjectableWithLifecycle);
+          ctx.detectChanges(false);
 
-      @Component({
-        selector: 'outer-cmp',
-        template:
-            `<span [i]="log('start')"></span><inner-cmp [outerTpl]="tpl"><ng-template><span [i]="log('tpl')"></span></ng-template></inner-cmp>`
-      })
-      class OuterComp {
-        @ContentChild(TemplateRef, {static: true}) tpl!: TemplateRef<any>;
-
-        constructor(public cdRef: ChangeDetectorRef) {}
-        log(id: string) {
-          log.push(`outer-${id}`);
+          ctx.destroy();
+
+          // We don't care about the exact order in this test.
+          expect(directiveLog.filter(['ngOnDestroy']).sort()).toEqual([
+            'dir.ngOnDestroy',
+            'injectable.ngOnDestroy',
+          ]);
+        }));
+      });
+    });
+
+    describe('enforce no new changes', () => {
+      it('should throw when a record gets changed after it has been checked', fakeAsync(() => {
+        @Directive({selector: '[changed]'})
+        class ChangingDirective {
+          @Input() changed: any;
         }
-      }
 
-      @Component({
-        selector: 'inner-cmp',
-        template:
-            `<span [i]="log('start')"></span>><ng-container [ngTemplateOutlet]="outerTpl"></ng-container><ng-container [ngTemplateOutlet]="tpl"></ng-container>`
-      })
-      class InnerComp {
-        @ContentChild(TemplateRef, {static: true}) tpl!: TemplateRef<any>;
-        @Input() outerTpl: TemplateRef<any>|undefined;
-
-        constructor(public cdRef: ChangeDetectorRef) {}
-        log(id: string) {
-          log.push(`inner-${id}`);
+        TestBed.configureTestingModule({declarations: [ChangingDirective]});
+
+        const ctx = createCompFixture('<div [id]="a" [changed]="b"></div>', TestData);
+
+        ctx.componentInstance.b = 1;
+        const errMsgRegExp = /Previous value: 'undefined'\. Current value: '1'/g;
+        expect(() => ctx.checkNoChanges()).toThrowError(errMsgRegExp);
+      }));
+
+      it('should throw when a record gets changed after the first change detection pass', fakeAsync(() => {
+        @Directive({selector: '[changed]'})
+        class ChangingDirective {
+          @Input() changed: any;
         }
-      }
 
-      let ctx: ComponentFixture<MainComp>;
-      let mainComp: MainComp;
-      let outerComp: OuterComp;
-      let innerComp: InnerComp;
+        TestBed.configureTestingModule({declarations: [ChangingDirective]});
 
-      beforeEach(() => {
-        log = [];
-        ctx = TestBed
-                  .configureTestingModule(
-                      {declarations: [MainComp, OuterComp, InnerComp, DummyDirective]})
-                  .createComponent(MainComp);
-        mainComp = ctx.componentInstance;
-        outerComp = ctx.debugElement.query(By.directive(OuterComp)).injector.get(OuterComp);
-        innerComp = ctx.debugElement.query(By.directive(InnerComp)).injector.get(InnerComp);
+        const ctx = createCompFixture('<div [id]="a" [changed]="b"></div>', TestData);
+
+        ctx.componentInstance.b = 1;
+        ctx.detectChanges();
+
+        ctx.componentInstance.b = 2;
+        const errMsgRegExp = /Previous value: '1'\. Current value: '2'/g;
+        expect(() => ctx.checkNoChanges()).toThrowError(errMsgRegExp);
+      }));
+
+      it('should allow view to be created in a cd hook', () => {
+        const ctx = createCompFixture('<div *gh9882>{{ a }}</div>', TestData);
+        ctx.componentInstance.a = 1;
+        ctx.detectChanges();
+        expect(ctx.nativeElement.innerText).toEqual('1');
       });
 
-      it('should dirty check projected views in regular order', () => {
+      it('should not throw when two arrays are structurally the same', fakeAsync(() => {
+        const ctx = _bindSimpleValue('a', TestData);
+        ctx.componentInstance.a = ['value'];
         ctx.detectChanges(false);
-        expect(log).toEqual(['main-start', 'outer-start', 'inner-start', 'main-tpl', 'outer-tpl']);
+        ctx.componentInstance.a = ['value'];
+        expect(() => ctx.checkNoChanges()).not.toThrow();
+      }));
 
-        log = [];
-        ctx.detectChanges(false);
-        expect(log).toEqual(['main-start', 'outer-start', 'inner-start', 'main-tpl', 'outer-tpl']);
-      });
+      it('should not break the next run', fakeAsync(() => {
+        const ctx = _bindSimpleValue('a', TestData);
+        ctx.componentInstance.a = 'value';
+        expect(() => ctx.checkNoChanges()).toThrow();
 
-      it('should not dirty check projected views if neither the declaration nor the insertion place is dirty checked',
-         () => {
-           ctx.detectChanges(false);
-           log = [];
-           mainComp.cdRef.detach();
-           ctx.detectChanges(false);
+        ctx.detectChanges();
+        expect(renderLog.loggedValues).toEqual(['value']);
+      }));
 
-           expect(log).toEqual([]);
-         });
+      it('should not break the next run (view engine and ivy)', fakeAsync(() => {
+        const ctx = _bindSimpleValue('a', TestData);
 
-      it('should dirty check projected views if the insertion place is dirty checked', () => {
-        ctx.detectChanges(false);
-        log = [];
+        ctx.detectChanges();
+        renderLog.clear();
 
-        innerComp.cdRef.detectChanges();
-        expect(log).toEqual(['inner-start', 'main-tpl', 'outer-tpl']);
-      });
+        ctx.componentInstance.a = 'value';
+        expect(() => ctx.checkNoChanges()).toThrow();
 
-      it('should not dirty check views that are inserted into a detached tree, even if the declaration place is dirty checked',
-         () => {
-           ctx.detectChanges(false);
-           log = [];
-           innerComp.cdRef.detach();
-           mainComp.cdRef.detectChanges();
+        ctx.detectChanges();
+        expect(renderLog.loggedValues).toEqual(['value']);
+      }));
+    });
 
-           expect(log).toEqual(['main-start', 'outer-start']);
+    describe('mode', () => {
+      it('Detached', fakeAsync(() => {
+        const ctx = createCompFixture('<comp-with-ref></comp-with-ref>');
+        const cmp: CompWithRef = queryDirs(ctx.debugElement, CompWithRef)[0];
+        cmp.value = 'hello';
+        cmp.changeDetectorRef.detach();
 
-           log = [];
-           outerComp.cdRef.detectChanges();
+        ctx.detectChanges();
 
-           expect(log).toEqual(['outer-start']);
+        expect(renderLog.log).toEqual([]);
+      }));
 
-           log = [];
-           outerComp.cdRef.detach();
-           mainComp.cdRef.detectChanges();
+      it('Detached should disable OnPush', fakeAsync(() => {
+        const ctx = createCompFixture('<push-cmp [value]="value"></push-cmp>');
+        ctx.componentInstance.value = 0;
+        ctx.detectChanges();
+        renderLog.clear();
 
-           expect(log).toEqual(['main-start']);
-         });
-    });
-  });
+        const cmp: CompWithRef = queryDirs(ctx.debugElement, PushComp)[0];
+        cmp.changeDetectorRef.detach();
 
-  describe('class binding', () => {
-    it('should coordinate class attribute and class host binding', () => {
-      @Component({template: `<div class="{{initClasses}}" someDir></div>`})
-      class Comp {
-        initClasses = 'init';
-      }
+        ctx.componentInstance.value = 1;
+        ctx.detectChanges();
 
-      @Directive({selector: '[someDir]'})
-      class SomeDir {
-        @HostBinding('class.foo') fooClass = true;
-      }
+        expect(renderLog.log).toEqual([]);
+      }));
 
-      const ctx =
-          TestBed.configureTestingModule({declarations: [Comp, SomeDir]}).createComponent(Comp);
+      it('Detached view can be checked locally', fakeAsync(() => {
+        const ctx = createCompFixture('<wrap-comp-with-ref></wrap-comp-with-ref>');
+        const cmp: CompWithRef = queryDirs(ctx.debugElement, CompWithRef)[0];
+        cmp.value = 'hello';
+        cmp.changeDetectorRef.detach();
+        expect(renderLog.log).toEqual([]);
 
-      ctx.detectChanges();
+        ctx.detectChanges();
 
-      const divEl = ctx.debugElement.children[0];
-      expect(divEl.nativeElement).toHaveCssClass('init');
-      expect(divEl.nativeElement).toHaveCssClass('foo');
-    });
-  });
+        expect(renderLog.log).toEqual([]);
 
-  describe('lifecycle asserts', () => {
-    let logged: string[];
+        cmp.changeDetectorRef.detectChanges();
 
-    function log(value: string) {
-      logged.push(value);
-    }
-    function clearLog() {
-      logged = [];
-    }
+        expect(renderLog.log).toEqual(['{{hello}}']);
+      }));
 
-    function expectOnceAndOnlyOnce(log: string) {
-      expect(logged.indexOf(log) >= 0)
-          .toBeTruthy(`'${log}' not logged. Log was ${JSON.stringify(logged)}`);
-      expect(logged.lastIndexOf(log) === logged.indexOf(log))
-          .toBeTruthy(`'${log}' logged more than once. Log was ${JSON.stringify(logged)}`);
-    }
+      it('Reattaches', fakeAsync(() => {
+        const ctx = createCompFixture('<comp-with-ref></comp-with-ref>');
+        const cmp: CompWithRef = queryDirs(ctx.debugElement, CompWithRef)[0];
 
-    beforeEach(() => {
-      clearLog();
+        cmp.value = 'hello';
+        cmp.changeDetectorRef.detach();
+
+        ctx.detectChanges();
+
+        expect(renderLog.log).toEqual([]);
+
+        cmp.changeDetectorRef.reattach();
+
+        ctx.detectChanges();
+
+        expect(renderLog.log).toEqual(['{{hello}}']);
+      }));
+
+      it('Reattaches in the original cd mode', fakeAsync(() => {
+        const ctx = createCompFixture('<push-cmp></push-cmp>');
+        const cmp: PushComp = queryDirs(ctx.debugElement, PushComp)[0];
+        cmp.changeDetectorRef.detach();
+        cmp.changeDetectorRef.reattach();
+
+        // renderCount should NOT be incremented with each CD as CD mode
+        // should be resetted to
+        // on-push
+        ctx.detectChanges();
+        expect(cmp.renderCount).toBeGreaterThan(0);
+        const count = cmp.renderCount;
+
+        ctx.detectChanges();
+        expect(cmp.renderCount).toBe(count);
+      }));
     });
 
-    enum LifetimeMethods {
-      None = 0,
-      ngOnInit = 1 << 0,
-      ngOnChanges = 1 << 1,
-      ngAfterViewInit = 1 << 2,
-      ngAfterContentInit = 1 << 3,
-      ngDoCheck = 1 << 4,
-      InitMethods = ngOnInit | ngAfterViewInit | ngAfterContentInit,
-      InitMethodsAndChanges = InitMethods | ngOnChanges,
-      All = InitMethodsAndChanges | ngDoCheck,
-    }
+    describe('nested view recursion', () => {
+      it('should recurse into nested components even if there are no bindings in the component view', () => {
+        @Component({selector: 'nested', template: '{{name}}'})
+        class Nested {
+          name = 'Tom';
+        }
 
-    function forEachMethod(methods: LifetimeMethods, cb: (method: LifetimeMethods) => void) {
-      if (methods & LifetimeMethods.ngOnInit) cb(LifetimeMethods.ngOnInit);
-      if (methods & LifetimeMethods.ngOnChanges) cb(LifetimeMethods.ngOnChanges);
-      if (methods & LifetimeMethods.ngAfterContentInit) cb(LifetimeMethods.ngAfterContentInit);
-      if (methods & LifetimeMethods.ngAfterViewInit) cb(LifetimeMethods.ngAfterViewInit);
-      if (methods & LifetimeMethods.ngDoCheck) cb(LifetimeMethods.ngDoCheck);
-    }
+        TestBed.configureTestingModule({declarations: [Nested]});
 
-    interface Options {
-      childRecursion: LifetimeMethods;
-      childThrows: LifetimeMethods;
-    }
+        const ctx = createCompFixture('<nested></nested>');
+        ctx.detectChanges();
+        expect(renderLog.loggedValues).toEqual(['Tom']);
+      });
 
-    describe('calling init', () => {
-      function initialize(options: Options) {
-        @Component({selector: 'my-child', template: ''})
-        class MyChild {
-          private thrown = LifetimeMethods.None;
+      it('should recurse into nested view containers even if there are no bindings in the component view', () => {
+        @Component({template: '<ng-template #vc>{{name}}</ng-template>'})
+        class Comp {
+          name = 'Tom';
+          @ViewChild('vc', {read: ViewContainerRef, static: true}) vc!: ViewContainerRef;
+          @ViewChild(TemplateRef, {static: true}) template!: TemplateRef<any>;
+        }
 
-          @Input() inp: boolean|undefined;
-          @Output() outp = new EventEmitter<any>();
+        TestBed.configureTestingModule({declarations: [Comp]});
+        initHelpers();
 
-          constructor() {}
+        const ctx = TestBed.createComponent(Comp);
+        ctx.detectChanges();
+        expect(renderLog.loggedValues).toEqual([]);
 
-          ngDoCheck() {
-            this.check(LifetimeMethods.ngDoCheck);
-          }
-          ngOnInit() {
-            this.check(LifetimeMethods.ngOnInit);
-          }
-          ngOnChanges() {
-            this.check(LifetimeMethods.ngOnChanges);
-          }
-          ngAfterViewInit() {
-            this.check(LifetimeMethods.ngAfterViewInit);
-          }
-          ngAfterContentInit() {
-            this.check(LifetimeMethods.ngAfterContentInit);
-          }
+        ctx.componentInstance.vc.createEmbeddedView(ctx.componentInstance.template);
+        ctx.detectChanges();
+        expect(renderLog.loggedValues).toEqual(['Tom']);
+      });
 
-          private check(method: LifetimeMethods) {
-            log(`MyChild::${LifetimeMethods[method]}()`);
+      describe('projected views', () => {
+        let log: string[];
 
-            if ((options.childRecursion & method) !== 0) {
-              if (logged.length < 20) {
-                this.outp.emit(null);
-              } else {
-                fail(`Unexpected MyChild::${LifetimeMethods[method]} recursion`);
-              }
-            }
-            if ((options.childThrows & method) !== 0) {
-              if ((this.thrown & method) === 0) {
-                this.thrown |= method;
-                log(`<THROW from MyChild::${LifetimeMethods[method]}>()`);
-                throw new Error(`Throw from MyChild::${LifetimeMethods[method]}`);
-              }
-            }
-          }
+        @Directive({selector: '[i]'})
+        class DummyDirective {
+          @Input() i: any;
         }
 
         @Component({
-          selector: 'my-component',
-          template: `<my-child [inp]='true' (outp)='onOutp()'></my-child>`
+          selector: 'main-cmp',
+          template: `<span [i]="log('start')"></span><outer-cmp><ng-template><span [i]="log('tpl')"></span></ng-template></outer-cmp>`,
         })
-        class MyComponent {
-          constructor(private changeDetectionRef: ChangeDetectorRef) {}
-          ngDoCheck() {
-            this.check(LifetimeMethods.ngDoCheck);
-          }
-          ngOnInit() {
-            this.check(LifetimeMethods.ngOnInit);
-          }
-          ngAfterViewInit() {
-            this.check(LifetimeMethods.ngAfterViewInit);
-          }
-          ngAfterContentInit() {
-            this.check(LifetimeMethods.ngAfterContentInit);
-          }
-          onOutp() {
-            log('<RECURSION START>');
-            this.changeDetectionRef.detectChanges();
-            log('<RECURSION DONE>');
+        class MainComp {
+          constructor(public cdRef: ChangeDetectorRef) {}
+          log(id: string) {
+            log.push(`main-${id}`);
           }
+        }
 
-          private check(method: LifetimeMethods) {
-            log(`MyComponent::${LifetimeMethods[method]}()`);
+        @Component({
+          selector: 'outer-cmp',
+          template: `<span [i]="log('start')"></span><inner-cmp [outerTpl]="tpl"><ng-template><span [i]="log('tpl')"></span></ng-template></inner-cmp>`,
+        })
+        class OuterComp {
+          @ContentChild(TemplateRef, {static: true}) tpl!: TemplateRef<any>;
+
+          constructor(public cdRef: ChangeDetectorRef) {}
+          log(id: string) {
+            log.push(`outer-${id}`);
           }
         }
 
-        TestBed.configureTestingModule({declarations: [MyChild, MyComponent]});
+        @Component({
+          selector: 'inner-cmp',
+          template: `<span [i]="log('start')"></span>><ng-container [ngTemplateOutlet]="outerTpl"></ng-container><ng-container [ngTemplateOutlet]="tpl"></ng-container>`,
+        })
+        class InnerComp {
+          @ContentChild(TemplateRef, {static: true}) tpl!: TemplateRef<any>;
+          @Input() outerTpl: TemplateRef<any> | undefined;
 
-        return createCompFixture(`<my-component></my-component>`);
-      }
+          constructor(public cdRef: ChangeDetectorRef) {}
+          log(id: string) {
+            log.push(`inner-${id}`);
+          }
+        }
 
-      function ensureOneInit(options: Options) {
-        const ctx = initialize(options);
+        let ctx: ComponentFixture<MainComp>;
+        let mainComp: MainComp;
+        let outerComp: OuterComp;
+        let innerComp: InnerComp;
+
+        beforeEach(() => {
+          log = [];
+          ctx = TestBed.configureTestingModule({
+            declarations: [MainComp, OuterComp, InnerComp, DummyDirective],
+          }).createComponent(MainComp);
+          mainComp = ctx.componentInstance;
+          outerComp = ctx.debugElement.query(By.directive(OuterComp)).injector.get(OuterComp);
+          innerComp = ctx.debugElement.query(By.directive(InnerComp)).injector.get(InnerComp);
+        });
+
+        it('should dirty check projected views in regular order', () => {
+          ctx.detectChanges(false);
+          expect(log).toEqual([
+            'main-start',
+            'outer-start',
+            'inner-start',
+            'main-tpl',
+            'outer-tpl',
+          ]);
+
+          log = [];
+          ctx.detectChanges(false);
+          expect(log).toEqual([
+            'main-start',
+            'outer-start',
+            'inner-start',
+            'main-tpl',
+            'outer-tpl',
+          ]);
+        });
+
+        it('should not dirty check projected views if neither the declaration nor the insertion place is dirty checked', () => {
+          ctx.detectChanges(false);
+          log = [];
+          mainComp.cdRef.detach();
+          ctx.detectChanges(false);
+
+          expect(log).toEqual([]);
+        });
+
+        it('should dirty check projected views if the insertion place is dirty checked', () => {
+          ctx.detectChanges(false);
+          log = [];
+
+          innerComp.cdRef.detectChanges();
+          expect(log).toEqual(['inner-start', 'main-tpl', 'outer-tpl']);
+        });
+
+        it('should not dirty check views that are inserted into a detached tree, even if the declaration place is dirty checked', () => {
+          ctx.detectChanges(false);
+          log = [];
+          innerComp.cdRef.detach();
+          mainComp.cdRef.detectChanges();
+
+          expect(log).toEqual(['main-start', 'outer-start']);
+
+          log = [];
+          outerComp.cdRef.detectChanges();
+
+          expect(log).toEqual(['outer-start']);
+
+          log = [];
+          outerComp.cdRef.detach();
+          mainComp.cdRef.detectChanges();
+
+          expect(log).toEqual(['main-start']);
+        });
+      });
+    });
 
+    describe('class binding', () => {
+      it('should coordinate class attribute and class host binding', () => {
+        @Component({template: `<div class="{{initClasses}}" someDir></div>`})
+        class Comp {
+          initClasses = 'init';
+        }
 
-        const throws = options.childThrows != LifetimeMethods.None;
-        if (throws) {
-          log(`<CYCLE 0 START>`);
-          expect(() => {
-            // Expect child to throw.
-            ctx.detectChanges();
-          }).toThrow();
-          log(`<CYCLE 0 END>`);
-          log(`<CYCLE 1 START>`);
+        @Directive({selector: '[someDir]'})
+        class SomeDir {
+          @HostBinding('class.foo') fooClass = true;
         }
+
+        const ctx = TestBed.configureTestingModule({declarations: [Comp, SomeDir]}).createComponent(
+          Comp,
+        );
+
         ctx.detectChanges();
-        if (throws) log(`<CYCLE 1 DONE>`);
-        expectOnceAndOnlyOnce('MyComponent::ngOnInit()');
-        expectOnceAndOnlyOnce('MyChild::ngOnInit()');
-        expectOnceAndOnlyOnce('MyComponent::ngAfterViewInit()');
-        expectOnceAndOnlyOnce('MyComponent::ngAfterContentInit()');
-        expectOnceAndOnlyOnce('MyChild::ngAfterViewInit()');
-        expectOnceAndOnlyOnce('MyChild::ngAfterContentInit()');
+
+        const divEl = ctx.debugElement.children[0];
+        expect(divEl.nativeElement).toHaveCssClass('init');
+        expect(divEl.nativeElement).toHaveCssClass('foo');
+      });
+    });
+
+    describe('lifecycle asserts', () => {
+      let logged: string[];
+
+      function log(value: string) {
+        logged.push(value);
+      }
+      function clearLog() {
+        logged = [];
+      }
+
+      function expectOnceAndOnlyOnce(log: string) {
+        expect(logged.indexOf(log) >= 0).toBeTruthy(
+          `'${log}' not logged. Log was ${JSON.stringify(logged)}`,
+        );
+        expect(logged.lastIndexOf(log) === logged.indexOf(log)).toBeTruthy(
+          `'${log}' logged more than once. Log was ${JSON.stringify(logged)}`,
+        );
       }
 
-      forEachMethod(LifetimeMethods.InitMethodsAndChanges, method => {
-        it(`should ensure that init hooks are called once an only once with recursion in ${
-               LifetimeMethods[method]} `,
-           () => {
-             // Ensure all the init methods are called once.
-             ensureOneInit({childRecursion: method, childThrows: LifetimeMethods.None});
-           });
+      beforeEach(() => {
+        clearLog();
       });
-      forEachMethod(LifetimeMethods.All, method => {
-        it(`should ensure that init hooks are called once an only once with a throw in ${
-               LifetimeMethods[method]} `,
-           () => {
-             // Ensure all the init methods are called once.
-             // the first cycle throws but the next cycle should complete the inits.
-             ensureOneInit({childRecursion: LifetimeMethods.None, childThrows: method});
-           });
+
+      enum LifetimeMethods {
+        None = 0,
+        ngOnInit = 1 << 0,
+        ngOnChanges = 1 << 1,
+        ngAfterViewInit = 1 << 2,
+        ngAfterContentInit = 1 << 3,
+        ngDoCheck = 1 << 4,
+        InitMethods = ngOnInit | ngAfterViewInit | ngAfterContentInit,
+        InitMethodsAndChanges = InitMethods | ngOnChanges,
+        All = InitMethodsAndChanges | ngDoCheck,
+      }
+
+      function forEachMethod(methods: LifetimeMethods, cb: (method: LifetimeMethods) => void) {
+        if (methods & LifetimeMethods.ngOnInit) cb(LifetimeMethods.ngOnInit);
+        if (methods & LifetimeMethods.ngOnChanges) cb(LifetimeMethods.ngOnChanges);
+        if (methods & LifetimeMethods.ngAfterContentInit) cb(LifetimeMethods.ngAfterContentInit);
+        if (methods & LifetimeMethods.ngAfterViewInit) cb(LifetimeMethods.ngAfterViewInit);
+        if (methods & LifetimeMethods.ngDoCheck) cb(LifetimeMethods.ngDoCheck);
+      }
+
+      interface Options {
+        childRecursion: LifetimeMethods;
+        childThrows: LifetimeMethods;
+      }
+
+      describe('calling init', () => {
+        function initialize(options: Options) {
+          @Component({selector: 'my-child', template: ''})
+          class MyChild {
+            private thrown = LifetimeMethods.None;
+
+            @Input() inp: boolean | undefined;
+            @Output() outp = new EventEmitter<any>();
+
+            constructor() {}
+
+            ngDoCheck() {
+              this.check(LifetimeMethods.ngDoCheck);
+            }
+            ngOnInit() {
+              this.check(LifetimeMethods.ngOnInit);
+            }
+            ngOnChanges() {
+              this.check(LifetimeMethods.ngOnChanges);
+            }
+            ngAfterViewInit() {
+              this.check(LifetimeMethods.ngAfterViewInit);
+            }
+            ngAfterContentInit() {
+              this.check(LifetimeMethods.ngAfterContentInit);
+            }
+
+            private check(method: LifetimeMethods) {
+              log(`MyChild::${LifetimeMethods[method]}()`);
+
+              if ((options.childRecursion & method) !== 0) {
+                if (logged.length < 20) {
+                  this.outp.emit(null);
+                } else {
+                  fail(`Unexpected MyChild::${LifetimeMethods[method]} recursion`);
+                }
+              }
+              if ((options.childThrows & method) !== 0) {
+                if ((this.thrown & method) === 0) {
+                  this.thrown |= method;
+                  log(`<THROW from MyChild::${LifetimeMethods[method]}>()`);
+                  throw new Error(`Throw from MyChild::${LifetimeMethods[method]}`);
+                }
+              }
+            }
+          }
+
+          @Component({
+            selector: 'my-component',
+            template: `<my-child [inp]='true' (outp)='onOutp()'></my-child>`,
+          })
+          class MyComponent {
+            constructor(private changeDetectionRef: ChangeDetectorRef) {}
+            ngDoCheck() {
+              this.check(LifetimeMethods.ngDoCheck);
+            }
+            ngOnInit() {
+              this.check(LifetimeMethods.ngOnInit);
+            }
+            ngAfterViewInit() {
+              this.check(LifetimeMethods.ngAfterViewInit);
+            }
+            ngAfterContentInit() {
+              this.check(LifetimeMethods.ngAfterContentInit);
+            }
+            onOutp() {
+              log('<RECURSION START>');
+              this.changeDetectionRef.detectChanges();
+              log('<RECURSION DONE>');
+            }
+
+            private check(method: LifetimeMethods) {
+              log(`MyComponent::${LifetimeMethods[method]}()`);
+            }
+          }
+
+          TestBed.configureTestingModule({declarations: [MyChild, MyComponent]});
+
+          return createCompFixture(`<my-component></my-component>`);
+        }
+
+        function ensureOneInit(options: Options) {
+          const ctx = initialize(options);
+
+          const throws = options.childThrows != LifetimeMethods.None;
+          if (throws) {
+            log(`<CYCLE 0 START>`);
+            expect(() => {
+              // Expect child to throw.
+              ctx.detectChanges();
+            }).toThrow();
+            log(`<CYCLE 0 END>`);
+            log(`<CYCLE 1 START>`);
+          }
+          ctx.detectChanges();
+          if (throws) log(`<CYCLE 1 DONE>`);
+          expectOnceAndOnlyOnce('MyComponent::ngOnInit()');
+          expectOnceAndOnlyOnce('MyChild::ngOnInit()');
+          expectOnceAndOnlyOnce('MyComponent::ngAfterViewInit()');
+          expectOnceAndOnlyOnce('MyComponent::ngAfterContentInit()');
+          expectOnceAndOnlyOnce('MyChild::ngAfterViewInit()');
+          expectOnceAndOnlyOnce('MyChild::ngAfterContentInit()');
+        }
+
+        forEachMethod(LifetimeMethods.InitMethodsAndChanges, (method) => {
+          it(`should ensure that init hooks are called once an only once with recursion in ${LifetimeMethods[method]} `, () => {
+            // Ensure all the init methods are called once.
+            ensureOneInit({childRecursion: method, childThrows: LifetimeMethods.None});
+          });
+        });
+        forEachMethod(LifetimeMethods.All, (method) => {
+          it(`should ensure that init hooks are called once an only once with a throw in ${LifetimeMethods[method]} `, () => {
+            // Ensure all the init methods are called once.
+            // the first cycle throws but the next cycle should complete the inits.
+            ensureOneInit({childRecursion: LifetimeMethods.None, childThrows: method});
+          });
+        });
       });
     });
   });
-});
 })();
 
 @Injectable()
@@ -1622,7 +1698,10 @@ class RenderLog {
 }
 
 class DirectiveLogEntry {
-  constructor(public directiveName: string, public method: string) {}
+  constructor(
+    public directiveName: string,
+    public method: string,
+  ) {}
 }
 
 function patchLoggingRenderer2(rendererFactory: RendererFactory2, log: RenderLog) {
@@ -1631,7 +1710,7 @@ function patchLoggingRenderer2(rendererFactory: RendererFactory2, log: RenderLog
   }
   (<any>rendererFactory).__patchedForLogging = true;
   const origCreateRenderer = rendererFactory.createRenderer;
-  rendererFactory.createRenderer = function(element: any, type: RendererType2|null) {
+  rendererFactory.createRenderer = function (element: any, type: RendererType2 | null) {
     const renderer = origCreateRenderer.call(this, element, type);
     if ((<any>renderer).__patchedForLogging) {
       return renderer;
@@ -1639,11 +1718,11 @@ function patchLoggingRenderer2(rendererFactory: RendererFactory2, log: RenderLog
     (<any>renderer).__patchedForLogging = true;
     const origSetProperty = renderer.setProperty;
     const origSetValue = renderer.setValue;
-    renderer.setProperty = function(el: any, name: string, value: any): void {
+    renderer.setProperty = function (el: any, name: string, value: any): void {
       log.setElementProperty(el, name, value);
       origSetProperty.call(renderer, el, name, value);
     };
-    renderer.setValue = function(node: any, value: string): void {
+    renderer.setValue = function (node: any, value: string): void {
       if (isTextNode(node)) {
         log.setText(node, value);
       }
@@ -1666,12 +1745,12 @@ class DirectiveLog {
   }
 
   filter(methods: string[]): string[] {
-    return this.entries.filter((entry) => methods.indexOf(entry.method) !== -1)
-        .map(entry => `${entry.directiveName}.${entry.method}`);
+    return this.entries
+      .filter((entry) => methods.indexOf(entry.method) !== -1)
+      .map((entry) => `${entry.directiveName}.${entry.method}`);
   }
 }
 
-
 @Pipe({name: 'countingPipe'})
 class CountingPipe implements PipeTransform {
   state: number = 0;
@@ -1723,13 +1802,12 @@ class TestComponent {
 }
 
 @Component({selector: 'other-cmp', template: 'empty'})
-class AnotherComponent {
-}
+class AnotherComponent {}
 
 @Component({
   selector: 'comp-with-ref',
   template: '<div (event)="noop()" emitterDirective></div>{{value}}',
-  host: {'event': 'noop()'}
+  host: {'event': 'noop()'},
 })
 class CompWithRef {
   @Input() public value: any;
@@ -1748,7 +1826,7 @@ class WrapCompWithRef {
   selector: 'push-cmp',
   template: '<div (event)="noop()" emitterDirective></div>{{value}}{{renderIncrement}}',
   host: {'(event)': 'noop()'},
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 class PushComp {
   @Input() public value: any;
@@ -1771,8 +1849,10 @@ class EmitterDirective {
 
 @Directive({selector: '[gh9882]'})
 class Gh9882 implements AfterContentInit {
-  constructor(private _viewContainer: ViewContainerRef, private _templateRef: TemplateRef<Object>) {
-  }
+  constructor(
+    private _viewContainer: ViewContainerRef,
+    private _templateRef: TemplateRef<Object>,
+  ) {}
 
   ngAfterContentInit(): any {
     this._viewContainer.createEmbeddedView(this._templateRef);
@@ -1780,17 +1860,26 @@ class Gh9882 implements AfterContentInit {
 }
 
 @Directive({selector: '[testDirective]', exportAs: 'testDirective'})
-class TestDirective implements OnInit, DoCheck, OnChanges, AfterContentInit, AfterContentChecked,
-                               AfterViewInit, AfterViewChecked, OnDestroy {
+class TestDirective
+  implements
+    OnInit,
+    DoCheck,
+    OnChanges,
+    AfterContentInit,
+    AfterContentChecked,
+    AfterViewInit,
+    AfterViewChecked,
+    OnDestroy
+{
   @Input() a: any;
   @Input() b: any;
-  changes: SimpleChanges|undefined;
+  changes: SimpleChanges | undefined;
   event: any;
   eventEmitter: EventEmitter<string> = new EventEmitter<string>();
 
   @Input('testDirective') name: string = '';
 
-  @Input() throwOn: string|undefined;
+  @Input() throwOn: string | undefined;
 
   constructor(public log: DirectiveLog) {}
 
@@ -1874,7 +1963,7 @@ class OnDestroyDirective implements OnDestroy {
 
 @Directive({selector: '[orderCheck0]'})
 class OrderCheckDirective0 {
-  private _name: string|undefined;
+  private _name: string | undefined;
 
   @Input('orderCheck0')
   set name(value: string) {
@@ -1887,7 +1976,7 @@ class OrderCheckDirective0 {
 
 @Directive({selector: '[orderCheck1]'})
 class OrderCheckDirective1 {
-  private _name: string|undefined;
+  private _name: string | undefined;
 
   @Input('orderCheck1')
   set name(value: string) {
@@ -1895,12 +1984,15 @@ class OrderCheckDirective1 {
     this.log.add(this._name, 'set');
   }
 
-  constructor(public log: DirectiveLog, _check0: OrderCheckDirective0) {}
+  constructor(
+    public log: DirectiveLog,
+    _check0: OrderCheckDirective0,
+  ) {}
 }
 
 @Directive({selector: '[orderCheck2]'})
 class OrderCheckDirective2 {
-  private _name: string|undefined;
+  private _name: string | undefined;
 
   @Input('orderCheck2')
   set name(value: string) {
@@ -1908,7 +2000,10 @@ class OrderCheckDirective2 {
     this.log.add(this._name, 'set');
   }
 
-  constructor(public log: DirectiveLog, _check1: OrderCheckDirective1) {}
+  constructor(
+    public log: DirectiveLog,
+    _check1: OrderCheckDirective1,
+  ) {}
 }
 
 class TestLocalsContext {
@@ -1924,12 +2019,12 @@ class TestLocals {
 
 @Component({selector: 'root', template: 'empty'})
 class Person {
-  age: number|undefined;
-  name: string|undefined;
-  address: Address|null = null;
-  phones: number[]|undefined;
+  age: number | undefined;
+  name: string | undefined;
+  address: Address | null = null;
+  phones: number[] | undefined;
 
-  init(name: string, address: Address|null = null) {
+  init(name: string, address: Address | null = null) {
     this.name = name;
     this.address = address;
   }
@@ -1953,7 +2048,10 @@ class Address {
   cityGetterCalls: number = 0;
   zipCodeGetterCalls: number = 0;
 
-  constructor(public _city: string, public _zipcode: any = null) {}
+  constructor(
+    public _city: string,
+    public _zipcode: any = null,
+  ) {}
 
   get city() {
     this.cityGetterCalls++;
@@ -1990,13 +2088,11 @@ class TestData {
 }
 
 class Holder<T> {
-  value: T|undefined;
+  value: T | undefined;
 }
 
 @Component({selector: 'root', template: 'empty'})
-class PersonHolder extends Holder<Person> {
-}
+class PersonHolder extends Holder<Person> {}
 
 @Component({selector: 'root', template: 'empty'})
-class PersonHolderHolder extends Holder<Holder<Person>> {
-}
+class PersonHolderHolder extends Holder<Holder<Person>> {}
diff --git a/packages/core/test/linker/inheritance_integration_spec.ts b/packages/core/test/linker/inheritance_integration_spec.ts
index eaa1d538035f0..4afa01eb35beb 100644
--- a/packages/core/test/linker/inheritance_integration_spec.ts
+++ b/packages/core/test/linker/inheritance_integration_spec.ts
@@ -10,8 +10,7 @@ import {Component, Directive, HostBinding} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 @Directive({selector: '[directiveA]'})
-class DirectiveA {
-}
+class DirectiveA {}
 
 @Directive({selector: '[directiveB]'})
 class DirectiveB {
@@ -19,13 +18,13 @@ class DirectiveB {
 }
 
 @Component({selector: 'component-a', template: 'ComponentA Template'})
-class ComponentA {
-}
+class ComponentA {}
 
-@Component(
-    {selector: 'component-extends-directive', template: 'ComponentExtendsDirective Template'})
-class ComponentExtendsDirective extends DirectiveA {
-}
+@Component({
+  selector: 'component-extends-directive',
+  template: 'ComponentExtendsDirective Template',
+})
+class ComponentExtendsDirective extends DirectiveA {}
 
 class ComponentWithNoAnnotation extends ComponentA {}
 
@@ -37,8 +36,7 @@ class DirectiveExtendsComponent extends ComponentA {
 class DirectiveWithNoAnnotation extends DirectiveB {}
 
 @Component({selector: 'my-app', template: '...'})
-class App {
-}
+class App {}
 
 describe('Inheritance logic', () => {
   it('should handle Components that extend Directives', () => {
@@ -72,8 +70,8 @@ describe('Inheritance logic', () => {
     TestBed.configureTestingModule({declarations: [DirectiveExtendsComponent, App]});
     const template = '<div directiveExtendsComponent>Some content</div>';
     TestBed.overrideComponent(App, {set: {template}});
-    expect(() => TestBed.createComponent(App))
-        .toThrowError(
-            'NG0903: Directives cannot inherit Components. Directive DirectiveExtendsComponent is attempting to extend component ComponentA');
+    expect(() => TestBed.createComponent(App)).toThrowError(
+      'NG0903: Directives cannot inherit Components. Directive DirectiveExtendsComponent is attempting to extend component ComponentA',
+    );
   });
 });
diff --git a/packages/core/test/linker/integration_spec.ts b/packages/core/test/linker/integration_spec.ts
index b5f5124d73dda..99ee4dd140a4a 100644
--- a/packages/core/test/linker/integration_spec.ts
+++ b/packages/core/test/linker/integration_spec.ts
@@ -7,8 +7,42 @@
  */
 
 import {CommonModule, DOCUMENT, ɵgetDOM as getDOM} from '@angular/common';
-import {Attribute, Compiler, Component, ComponentFactory, ComponentRef, ContentChildren, createComponent, Directive, EnvironmentInjector, EventEmitter, Host, HostBinding, HostListener, Inject, Injectable, InjectionToken, Injector, Input, NgModule, NgModuleRef, NO_ERRORS_SCHEMA, OnDestroy, Output, Pipe, reflectComponentType, SkipSelf, ViewChild, ViewRef, ɵsetClassDebugInfo} from '@angular/core';
-import {ChangeDetectionStrategy, ChangeDetectorRef, PipeTransform} from '@angular/core/src/change_detection/change_detection';
+import {
+  Attribute,
+  Compiler,
+  Component,
+  ComponentFactory,
+  ComponentRef,
+  ContentChildren,
+  createComponent,
+  Directive,
+  EnvironmentInjector,
+  EventEmitter,
+  Host,
+  HostBinding,
+  HostListener,
+  Inject,
+  Injectable,
+  InjectionToken,
+  Injector,
+  Input,
+  NgModule,
+  NgModuleRef,
+  NO_ERRORS_SCHEMA,
+  OnDestroy,
+  Output,
+  Pipe,
+  reflectComponentType,
+  SkipSelf,
+  ViewChild,
+  ViewRef,
+  ɵsetClassDebugInfo,
+} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  PipeTransform,
+} from '@angular/core/src/change_detection/change_detection';
 import {ComponentFactoryResolver} from '@angular/core/src/linker/component_factory_resolver';
 import {ElementRef} from '@angular/core/src/linker/element_ref';
 import {QueryList} from '@angular/core/src/linker/query_list';
@@ -17,15 +51,20 @@ import {ViewContainerRef} from '@angular/core/src/linker/view_container_ref';
 import {EmbeddedViewRef} from '@angular/core/src/linker/view_ref';
 import {fakeAsync, getTestBed, TestBed, tick, waitForAsync} from '@angular/core/testing';
 import {TestBedCompiler} from '@angular/core/testing/src/test_bed_compiler';
-import {createMouseEvent, dispatchEvent, el, isCommentNode} from '@angular/platform-browser/testing/src/browser_util';
+import {
+  createMouseEvent,
+  dispatchEvent,
+  el,
+  isCommentNode,
+} from '@angular/platform-browser/testing/src/browser_util';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
 import {stringify} from '../../src/util/stringify';
 
 const ANCHOR_ELEMENT = new InjectionToken('AnchorElement');
 
-describe('integration tests', function() {
-  describe('react to record changes', function() {
+describe('integration tests', function () {
+  describe('react to record changes', function () {
     it('should consume text node changes', () => {
       TestBed.configureTestingModule({declarations: [MyComp]});
       const template = '<div>{{ctxProp}}</div>';
@@ -51,33 +90,29 @@ describe('integration tests', function() {
     it('should allow both null and undefined in expressions', () => {
       const template = '<div>{{null == undefined}}|{{null === undefined}}</div>';
       const fixture = TestBed.configureTestingModule({declarations: [MyComp]})
-                          .overrideComponent(MyComp, {set: {template}})
-                          .createComponent(MyComp);
+        .overrideComponent(MyComp, {set: {template}})
+        .createComponent(MyComp);
       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('true|false');
     });
 
     it('should support an arbitrary number of interpolations in an element', () => {
       TestBed.configureTestingModule({declarations: [MyComp]});
-      const template =
-          `<div>before{{'0'}}a{{'1'}}b{{'2'}}c{{'3'}}d{{'4'}}e{{'5'}}f{{'6'}}g{{'7'}}h{{'8'}}i{{'9'}}j{{'10'}}after</div>`;
+      const template = `<div>before{{'0'}}a{{'1'}}b{{'2'}}c{{'3'}}d{{'4'}}e{{'5'}}f{{'6'}}g{{'7'}}h{{'8'}}i{{'9'}}j{{'10'}}after</div>`;
       const fixture = TestBed.overrideComponent(MyComp, {set: {template}}).createComponent(MyComp);
 
       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('before0a1b2c3d4e5f6g7h8i9j10after');
     });
 
-    it('should use a blank string when interpolation evaluates to null or undefined with an arbitrary number of interpolations',
-       () => {
-         TestBed.configureTestingModule({declarations: [MyComp]});
-         const template =
-             `<div>0{{null}}a{{undefined}}b{{null}}c{{undefined}}d{{null}}e{{undefined}}f{{null}}g{{undefined}}h{{null}}i{{undefined}}j{{null}}1</div>`;
-         const fixture =
-             TestBed.overrideComponent(MyComp, {set: {template}}).createComponent(MyComp);
+    it('should use a blank string when interpolation evaluates to null or undefined with an arbitrary number of interpolations', () => {
+      TestBed.configureTestingModule({declarations: [MyComp]});
+      const template = `<div>0{{null}}a{{undefined}}b{{null}}c{{undefined}}d{{null}}e{{undefined}}f{{null}}g{{undefined}}h{{null}}i{{undefined}}j{{null}}1</div>`;
+      const fixture = TestBed.overrideComponent(MyComp, {set: {template}}).createComponent(MyComp);
 
-         fixture.detectChanges();
-         expect(fixture.nativeElement).toHaveText('0abcdefghij1');
-       });
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveText('0abcdefghij1');
+    });
 
     it('should consume element binding changes', () => {
       TestBed.configureTestingModule({declarations: [MyComp]});
@@ -99,13 +134,15 @@ describe('integration tests', function() {
 
       fixture.componentInstance.ctxProp = 'Initial aria label';
       fixture.detectChanges();
-      expect(fixture.debugElement.children[0].nativeElement.getAttribute('aria-label'))
-          .toEqual('Initial aria label');
+      expect(fixture.debugElement.children[0].nativeElement.getAttribute('aria-label')).toEqual(
+        'Initial aria label',
+      );
 
       fixture.componentInstance.ctxProp = 'Changed aria label';
       fixture.detectChanges();
-      expect(fixture.debugElement.children[0].nativeElement.getAttribute('aria-label'))
-          .toEqual('Changed aria label');
+      expect(fixture.debugElement.children[0].nativeElement.getAttribute('aria-label')).toEqual(
+        'Changed aria label',
+      );
     });
 
     it('should remove an attribute when attribute expression evaluates to null', () => {
@@ -138,20 +175,19 @@ describe('integration tests', function() {
       expect(fixture.debugElement.children[0].nativeElement.style['height']).toEqual('');
     });
 
-    it('should consume binding to property names where attr name and property name do not match',
-       () => {
-         TestBed.configureTestingModule({declarations: [MyComp]});
-         const template = '<div [tabindex]="ctxNumProp"></div>';
-         TestBed.overrideComponent(MyComp, {set: {template}});
-         const fixture = TestBed.createComponent(MyComp);
+    it('should consume binding to property names where attr name and property name do not match', () => {
+      TestBed.configureTestingModule({declarations: [MyComp]});
+      const template = '<div [tabindex]="ctxNumProp"></div>';
+      TestBed.overrideComponent(MyComp, {set: {template}});
+      const fixture = TestBed.createComponent(MyComp);
 
-         fixture.detectChanges();
-         expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(0);
+      fixture.detectChanges();
+      expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(0);
 
-         fixture.componentInstance.ctxNumProp = 5;
-         fixture.detectChanges();
-         expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(5);
-       });
+      fixture.componentInstance.ctxNumProp = 5;
+      fixture.detectChanges();
+      expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(5);
+    });
 
     it('should consume binding to camel-cased properties', () => {
       TestBed.configureTestingModule({declarations: [MyComp]});
@@ -175,20 +211,22 @@ describe('integration tests', function() {
 
       fixture.componentInstance.ctxProp = 'Some <span>HTML</span>';
       fixture.detectChanges();
-      expect(fixture.debugElement.children[0].nativeElement.innerHTML)
-          .toEqual('Some <span>HTML</span>');
+      expect(fixture.debugElement.children[0].nativeElement.innerHTML).toEqual(
+        'Some <span>HTML</span>',
+      );
 
       fixture.componentInstance.ctxProp = 'Some other <div>HTML</div>';
       fixture.detectChanges();
-      expect(fixture.debugElement.children[0].nativeElement.innerHTML)
-          .toEqual('Some other <div>HTML</div>');
+      expect(fixture.debugElement.children[0].nativeElement.innerHTML).toEqual(
+        'Some other <div>HTML</div>',
+      );
     });
 
     it('should consume binding to htmlFor using for alias', () => {
       const template = '<label [for]="ctxProp"></label>';
       const fixture = TestBed.configureTestingModule({declarations: [MyComp]})
-                          .overrideComponent(MyComp, {set: {template}})
-                          .createComponent(MyComp);
+        .overrideComponent(MyComp, {set: {template}})
+        .createComponent(MyComp);
 
       const nativeEl = fixture.debugElement.children[0].nativeElement;
       fixture.debugElement.componentInstance.ctxProp = 'foo';
@@ -199,12 +237,13 @@ describe('integration tests', function() {
 
     it('should consume directive watch expression change.', () => {
       TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
-      const template = '<span>' +
-          '<div my-dir [elprop]="ctxProp"></div>' +
-          '<div my-dir elprop="Hi there!"></div>' +
-          '<div my-dir elprop="Hi {{\'there!\'}}"></div>' +
-          '<div my-dir elprop="One more {{ctxProp}}"></div>' +
-          '</span>';
+      const template =
+        '<span>' +
+        '<div my-dir [elprop]="ctxProp"></div>' +
+        '<div my-dir elprop="Hi there!"></div>' +
+        '<div my-dir elprop="Hi {{\'there!\'}}"></div>' +
+        '<div my-dir elprop="One more {{ctxProp}}"></div>' +
+        '</span>';
       TestBed.overrideComponent(MyComp, {set: {template}});
       const fixture = TestBed.createComponent(MyComp);
 
@@ -216,8 +255,9 @@ describe('integration tests', function() {
       expect(containerSpan.children[0].injector.get(MyDir).dirProp).toEqual('Hello World!');
       expect(containerSpan.children[1].injector.get(MyDir).dirProp).toEqual('Hi there!');
       expect(containerSpan.children[2].injector.get(MyDir).dirProp).toEqual('Hi there!');
-      expect(containerSpan.children[3].injector.get(MyDir).dirProp)
-          .toEqual('One more Hello World!');
+      expect(containerSpan.children[3].injector.get(MyDir).dirProp).toEqual(
+        'One more Hello World!',
+      );
     });
 
     describe('pipes', () => {
@@ -270,8 +310,9 @@ describe('integration tests', function() {
     });
 
     it('should execute a given directive once, even if specified multiple times', () => {
-      TestBed.configureTestingModule(
-          {declarations: [MyComp, DuplicateDir, DuplicateDir, [DuplicateDir, [DuplicateDir]]]});
+      TestBed.configureTestingModule({
+        declarations: [MyComp, DuplicateDir, DuplicateDir, [DuplicateDir, [DuplicateDir]]],
+      });
       const template = '<p no-duplicate></p>';
       TestBed.overrideComponent(MyComp, {set: {template}});
       const fixture = TestBed.createComponent(MyComp);
@@ -313,12 +354,13 @@ describe('integration tests', function() {
       }
 
       const template =
-          '<my-uninitialized-output (customEvent)="doNothing()"></my-uninitialized-output>';
+        '<my-uninitialized-output (customEvent)="doNothing()"></my-uninitialized-output>';
       TestBed.overrideComponent(MyComp, {set: {template}});
 
       TestBed.configureTestingModule({declarations: [MyComp, UninitializedOutputComp]});
-      expect(() => TestBed.createComponent(MyComp))
-          .toThrowError('@Output customEvent not initialized in \'UninitializedOutputComp\'.');
+      expect(() => TestBed.createComponent(MyComp)).toThrowError(
+        "@Output customEvent not initialized in 'UninitializedOutputComp'.",
+      );
     });
 
     it('should read directives metadata from their binding token', () => {
@@ -331,7 +373,7 @@ describe('integration tests', function() {
     it('should not share empty context for template directives - issue #10045', () => {
       TestBed.configureTestingModule({declarations: [MyComp, PollutedContext, NoContext]});
       const template =
-          '<ng-template pollutedContext let-foo="bar">{{foo}}</ng-template><ng-template noContext let-foo="bar">{{foo}}</ng-template>';
+        '<ng-template pollutedContext let-foo="bar">{{foo}}</ng-template><ng-template noContext let-foo="bar">{{foo}}</ng-template>';
       TestBed.overrideComponent(MyComp, {set: {template}});
       const fixture = TestBed.createComponent(MyComp);
 
@@ -342,7 +384,7 @@ describe('integration tests', function() {
     it('should not detach views in ViewContainers when the parent view is destroyed.', () => {
       TestBed.configureTestingModule({declarations: [MyComp, SomeViewport]});
       const template =
-          '<div *ngIf="ctxBoolProp"><ng-template some-viewport let-greeting="someTmpl"><span>{{greeting}}</span></ng-template></div>';
+        '<div *ngIf="ctxBoolProp"><ng-template some-viewport let-greeting="someTmpl"><span>{{greeting}}</span></ng-template></div>';
       TestBed.overrideComponent(MyComp, {set: {template}});
       const fixture = TestBed.createComponent(MyComp);
 
@@ -350,11 +392,9 @@ describe('integration tests', function() {
       fixture.detectChanges();
 
       const ngIfEl = fixture.debugElement.children[0];
-      const someViewport: SomeViewport =
-          ngIfEl.childNodes
-              .find(
-                  debugElement => debugElement.nativeNode.nodeType ===
-                      Node.COMMENT_NODE)!.injector.get(SomeViewport);
+      const someViewport: SomeViewport = ngIfEl.childNodes
+        .find((debugElement) => debugElement.nativeNode.nodeType === Node.COMMENT_NODE)!
+        .injector.get(SomeViewport);
       expect(someViewport.container.length).toBe(2);
       expect(ngIfEl.children.length).toBe(2);
 
@@ -366,10 +406,9 @@ describe('integration tests', function() {
     });
 
     it('should use a comment while stamping out `<ng-template>` elements.', () => {
-      const fixture =
-          TestBed.configureTestingModule({declarations: [MyComp]})
-              .overrideComponent(MyComp, {set: {template: '<ng-template></ng-template>'}})
-              .createComponent(MyComp);
+      const fixture = TestBed.configureTestingModule({declarations: [MyComp]})
+        .overrideComponent(MyComp, {set: {template: '<ng-template></ng-template>'}})
+        .createComponent(MyComp);
 
       const childNodesOfWrapper = fixture.nativeElement.childNodes;
       expect(childNodesOfWrapper.length).toBe(1);
@@ -379,21 +418,27 @@ describe('integration tests', function() {
     it('should allow to transplant TemplateRefs into other ViewContainers', () => {
       TestBed.configureTestingModule({
         declarations: [
-          MyComp, SomeDirective, CompWithHost, ToolbarComponent, ToolbarViewContainer, ToolbarPart
+          MyComp,
+          SomeDirective,
+          CompWithHost,
+          ToolbarComponent,
+          ToolbarViewContainer,
+          ToolbarPart,
         ],
         imports: [CommonModule],
         schemas: [NO_ERRORS_SCHEMA],
       });
       const template =
-          '<some-directive><toolbar><ng-template toolbarpart let-toolbarProp="toolbarProp">{{ctxProp}},{{toolbarProp}},<cmp-with-host></cmp-with-host></ng-template></toolbar></some-directive>';
+        '<some-directive><toolbar><ng-template toolbarpart let-toolbarProp="toolbarProp">{{ctxProp}},{{toolbarProp}},<cmp-with-host></cmp-with-host></ng-template></toolbar></some-directive>';
       TestBed.overrideComponent(MyComp, {set: {template}});
       const fixture = TestBed.createComponent(MyComp);
 
       fixture.componentInstance.ctxProp = 'From myComp';
       fixture.detectChanges();
 
-      expect(fixture.nativeElement)
-          .toHaveText('TOOLBAR(From myComp,From toolbar,Component with an injected host)');
+      expect(fixture.nativeElement).toHaveText(
+        'TOOLBAR(From myComp,From toolbar,Component with an injected host)',
+      );
     });
 
     describe('reference bindings', () => {
@@ -403,8 +448,9 @@ describe('integration tests', function() {
         TestBed.overrideComponent(MyComp, {set: {template}});
         const fixture = TestBed.createComponent(MyComp);
 
-        expect(fixture.debugElement.children[0].children[0].references!['alice'])
-            .toBeInstanceOf(ChildComp);
+        expect(fixture.debugElement.children[0].children[0].references!['alice']).toBeInstanceOf(
+          ChildComp,
+        );
       });
 
       it('should assign a directive to a ref-', () => {
@@ -413,36 +459,39 @@ describe('integration tests', function() {
         TestBed.overrideComponent(MyComp, {set: {template}});
         const fixture = TestBed.createComponent(MyComp);
 
-        expect(fixture.debugElement.children[0].children[0].references!['localdir'])
-            .toBeInstanceOf(ExportDir);
+        expect(fixture.debugElement.children[0].children[0].references!['localdir']).toBeInstanceOf(
+          ExportDir,
+        );
       });
 
       it('should assign a directive to a ref when it has multiple exportAs names', () => {
-        TestBed.configureTestingModule(
-            {declarations: [MyComp, DirectiveWithMultipleExportAsNames]});
+        TestBed.configureTestingModule({
+          declarations: [MyComp, DirectiveWithMultipleExportAsNames],
+        });
 
         const template = '<div multiple-export-as #x="dirX" #y="dirY"></div>';
         TestBed.overrideComponent(MyComp, {set: {template}});
 
         const fixture = TestBed.createComponent(MyComp);
-        expect(fixture.debugElement.children[0].references!['x'])
-            .toBeInstanceOf(DirectiveWithMultipleExportAsNames);
-        expect(fixture.debugElement.children[0].references!['y'])
-            .toBeInstanceOf(DirectiveWithMultipleExportAsNames);
+        expect(fixture.debugElement.children[0].references!['x']).toBeInstanceOf(
+          DirectiveWithMultipleExportAsNames,
+        );
+        expect(fixture.debugElement.children[0].references!['y']).toBeInstanceOf(
+          DirectiveWithMultipleExportAsNames,
+        );
       });
 
-      it('should make the assigned component accessible in property bindings, even if they were declared before the component',
-         () => {
-           TestBed.configureTestingModule({declarations: [MyComp, ChildComp]});
-           const template =
-               '<ng-template [ngIf]="true">{{alice.ctxProp}}</ng-template>|{{alice.ctxProp}}|<child-cmp ref-alice></child-cmp>';
-           TestBed.overrideComponent(MyComp, {set: {template}});
-           const fixture = TestBed.createComponent(MyComp);
+      it('should make the assigned component accessible in property bindings, even if they were declared before the component', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, ChildComp]});
+        const template =
+          '<ng-template [ngIf]="true">{{alice.ctxProp}}</ng-template>|{{alice.ctxProp}}|<child-cmp ref-alice></child-cmp>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
 
-           fixture.detectChanges();
+        fixture.detectChanges();
 
-           expect(fixture.nativeElement).toHaveText('hello|hello|hello');
-         });
+        expect(fixture.nativeElement).toHaveText('hello|hello|hello');
+      });
 
       it('should assign two component instances each with a ref-', () => {
         TestBed.configureTestingModule({declarations: [MyComp, ChildComp]});
@@ -481,9 +530,8 @@ describe('integration tests', function() {
 
       it('should assign the TemplateRef to a user-defined variable', () => {
         const fixture = TestBed.configureTestingModule({declarations: [MyComp]})
-                            .overrideComponent(
-                                MyComp, {set: {template: '<ng-template ref-alice></ng-template>'}})
-                            .createComponent(MyComp);
+          .overrideComponent(MyComp, {set: {template: '<ng-template ref-alice></ng-template>'}})
+          .createComponent(MyComp);
 
         const value = fixture.debugElement.childNodes[0].references!['alice'];
         expect(value.createEmbeddedView).toBeTruthy();
@@ -495,8 +543,9 @@ describe('integration tests', function() {
         TestBed.overrideComponent(MyComp, {set: {template}});
         const fixture = TestBed.createComponent(MyComp);
 
-        expect(fixture.debugElement.children[0].children[0].references!['superAlice'])
-            .toBeInstanceOf(ChildComp);
+        expect(
+          fixture.debugElement.children[0].children[0].references!['superAlice'],
+        ).toBeInstanceOf(ChildComp);
       });
     });
 
@@ -522,8 +571,10 @@ describe('integration tests', function() {
       });
 
       it('should be checked when its bindings got updated', () => {
-        TestBed.configureTestingModule(
-            {declarations: [MyComp, PushCmp, EventCmp], imports: [CommonModule]});
+        TestBed.configureTestingModule({
+          declarations: [MyComp, PushCmp, EventCmp],
+          imports: [CommonModule],
+        });
         const template = '<push-cmp [prop]="ctxProp" #cmp></push-cmp>';
         TestBed.overrideComponent(MyComp, {set: {template}});
         const fixture = TestBed.createComponent(MyComp);
@@ -541,25 +592,27 @@ describe('integration tests', function() {
 
       if (getDOM().supportsDOMEvents) {
         it('should allow to destroy a component from within a host event handler', fakeAsync(() => {
-             TestBed.configureTestingModule({declarations: [MyComp, [[PushCmpWithHostEvent]]]});
-             const template = '<push-cmp-with-host-event></push-cmp-with-host-event>';
-             TestBed.overrideComponent(MyComp, {set: {template}});
-             const fixture = TestBed.createComponent(MyComp);
+          TestBed.configureTestingModule({declarations: [MyComp, [[PushCmpWithHostEvent]]]});
+          const template = '<push-cmp-with-host-event></push-cmp-with-host-event>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
 
-             tick();
-             fixture.detectChanges();
+          tick();
+          fixture.detectChanges();
 
-             const cmpEl = fixture.debugElement.children[0];
-             const cmp: PushCmpWithHostEvent = cmpEl.injector.get(PushCmpWithHostEvent);
-             cmp.ctxCallback = (_: any) => fixture.destroy();
+          const cmpEl = fixture.debugElement.children[0];
+          const cmp: PushCmpWithHostEvent = cmpEl.injector.get(PushCmpWithHostEvent);
+          cmp.ctxCallback = (_: any) => fixture.destroy();
 
-             expect(() => cmpEl.triggerEventHandler('click', <Event>{})).not.toThrow();
-           }));
+          expect(() => cmpEl.triggerEventHandler('click', <Event>{})).not.toThrow();
+        }));
       }
 
       it('should be checked when an event is fired', () => {
-        TestBed.configureTestingModule(
-            {declarations: [MyComp, PushCmp, EventCmp], imports: [CommonModule]});
+        TestBed.configureTestingModule({
+          declarations: [MyComp, PushCmp, EventCmp],
+          imports: [CommonModule],
+        });
         const template = '<push-cmp [prop]="ctxProp" #cmp></push-cmp>';
         TestBed.overrideComponent(MyComp, {set: {template}});
         const fixture = TestBed.createComponent(MyComp);
@@ -613,28 +666,30 @@ describe('integration tests', function() {
       });
 
       it('should be checked when an async pipe requests a check', fakeAsync(() => {
-           TestBed.configureTestingModule(
-               {declarations: [MyComp, PushCmpWithAsyncPipe], imports: [CommonModule]});
-           const template = '<push-cmp-with-async #cmp></push-cmp-with-async>';
-           TestBed.overrideComponent(MyComp, {set: {template}});
-           const fixture = TestBed.createComponent(MyComp);
+        TestBed.configureTestingModule({
+          declarations: [MyComp, PushCmpWithAsyncPipe],
+          imports: [CommonModule],
+        });
+        const template = '<push-cmp-with-async #cmp></push-cmp-with-async>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
 
-           tick();
+        tick();
 
-           const cmp: PushCmpWithAsyncPipe = fixture.debugElement.children[0].references!['cmp'];
-           fixture.detectChanges();
-           expect(cmp.numberOfChecks).toEqual(1);
+        const cmp: PushCmpWithAsyncPipe = fixture.debugElement.children[0].references!['cmp'];
+        fixture.detectChanges();
+        expect(cmp.numberOfChecks).toEqual(1);
 
-           fixture.detectChanges();
-           fixture.detectChanges();
-           expect(cmp.numberOfChecks).toEqual(1);
+        fixture.detectChanges();
+        fixture.detectChanges();
+        expect(cmp.numberOfChecks).toEqual(1);
 
-           cmp.resolve(2);
-           tick();
+        cmp.resolve(2);
+        tick();
 
-           fixture.detectChanges();
-           expect(cmp.numberOfChecks).toEqual(2);
-         }));
+        fixture.detectChanges();
+        expect(cmp.numberOfChecks).toEqual(2);
+      }));
     });
 
     it('should create a component that injects an @Host', () => {
@@ -652,7 +707,7 @@ describe('integration tests', function() {
       const fixture = TestBed.createComponent(MyComp);
 
       const childComponent =
-          fixture.debugElement.children[0].children[0].children[0].references!['child'];
+        fixture.debugElement.children[0].children[0].children[0].references!['child'];
       expect(childComponent.myHost).toBeInstanceOf(SomeDirective);
     });
 
@@ -679,88 +734,88 @@ describe('integration tests', function() {
     });
 
     it('should support events via EventEmitter on regular elements', waitForAsync(() => {
-         TestBed.configureTestingModule(
-             {declarations: [MyComp, DirectiveEmittingEvent, DirectiveListeningEvent]});
-         const template = '<div emitter listener></div>';
-         TestBed.overrideComponent(MyComp, {set: {template}});
-         const fixture = TestBed.createComponent(MyComp);
-
-         const tc = fixture.debugElement.children[0];
-         const emitter = tc.injector.get(DirectiveEmittingEvent);
-         const listener = tc.injector.get(DirectiveListeningEvent);
-
-         expect(listener.msg).toEqual('');
-         let eventCount = 0;
-
-         emitter.event.subscribe({
-           next: () => {
-             eventCount++;
-             if (eventCount === 1) {
-               expect(listener.msg).toEqual('fired !');
-               fixture.destroy();
-               emitter.fireEvent('fired again !');
-             } else {
-               expect(listener.msg).toEqual('fired !');
-             }
-           }
-         });
-
-         emitter.fireEvent('fired !');
-       }));
+      TestBed.configureTestingModule({
+        declarations: [MyComp, DirectiveEmittingEvent, DirectiveListeningEvent],
+      });
+      const template = '<div emitter listener></div>';
+      TestBed.overrideComponent(MyComp, {set: {template}});
+      const fixture = TestBed.createComponent(MyComp);
+
+      const tc = fixture.debugElement.children[0];
+      const emitter = tc.injector.get(DirectiveEmittingEvent);
+      const listener = tc.injector.get(DirectiveListeningEvent);
+
+      expect(listener.msg).toEqual('');
+      let eventCount = 0;
+
+      emitter.event.subscribe({
+        next: () => {
+          eventCount++;
+          if (eventCount === 1) {
+            expect(listener.msg).toEqual('fired !');
+            fixture.destroy();
+            emitter.fireEvent('fired again !');
+          } else {
+            expect(listener.msg).toEqual('fired !');
+          }
+        },
+      });
+
+      emitter.fireEvent('fired !');
+    }));
 
     it('should support events via EventEmitter on template elements', waitForAsync(() => {
-         const fixture =
-             TestBed
-                 .configureTestingModule(
-                     {declarations: [MyComp, DirectiveEmittingEvent, DirectiveListeningEvent]})
-                 .overrideComponent(MyComp, {
-                   set: {
-                     template:
-                         '<ng-template emitter listener (event)="ctxProp=$event"></ng-template>'
-                   }
-                 })
-                 .createComponent(MyComp);
-         const tc = fixture.debugElement.childNodes.find(
-             debugElement => debugElement.nativeNode.nodeType === Node.COMMENT_NODE)!;
-
-         const emitter = tc.injector.get(DirectiveEmittingEvent);
-         const myComp = fixture.debugElement.injector.get(MyComp);
-         const listener = tc.injector.get(DirectiveListeningEvent);
-
-         myComp.ctxProp = '';
-         expect(listener.msg).toEqual('');
-
-         emitter.event.subscribe({
-           next: () => {
-             expect(listener.msg).toEqual('fired !');
-             expect(myComp.ctxProp).toEqual('fired !');
-           }
-         });
-
-         emitter.fireEvent('fired !');
-       }));
+      const fixture = TestBed.configureTestingModule({
+        declarations: [MyComp, DirectiveEmittingEvent, DirectiveListeningEvent],
+      })
+        .overrideComponent(MyComp, {
+          set: {
+            template: '<ng-template emitter listener (event)="ctxProp=$event"></ng-template>',
+          },
+        })
+        .createComponent(MyComp);
+      const tc = fixture.debugElement.childNodes.find(
+        (debugElement) => debugElement.nativeNode.nodeType === Node.COMMENT_NODE,
+      )!;
+
+      const emitter = tc.injector.get(DirectiveEmittingEvent);
+      const myComp = fixture.debugElement.injector.get(MyComp);
+      const listener = tc.injector.get(DirectiveListeningEvent);
+
+      myComp.ctxProp = '';
+      expect(listener.msg).toEqual('');
+
+      emitter.event.subscribe({
+        next: () => {
+          expect(listener.msg).toEqual('fired !');
+          expect(myComp.ctxProp).toEqual('fired !');
+        },
+      });
+
+      emitter.fireEvent('fired !');
+    }));
 
     it('should support [()] syntax', waitForAsync(() => {
-         TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithTwoWayBinding]});
-         const template = '<div [(control)]="ctxProp" two-way></div>';
-         TestBed.overrideComponent(MyComp, {set: {template}});
-         const fixture = TestBed.createComponent(MyComp);
-         const tc = fixture.debugElement.children[0];
-         const dir = tc.injector.get(DirectiveWithTwoWayBinding);
+      TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithTwoWayBinding]});
+      const template = '<div [(control)]="ctxProp" two-way></div>';
+      TestBed.overrideComponent(MyComp, {set: {template}});
+      const fixture = TestBed.createComponent(MyComp);
+      const tc = fixture.debugElement.children[0];
+      const dir = tc.injector.get(DirectiveWithTwoWayBinding);
 
-         fixture.componentInstance.ctxProp = 'one';
-         fixture.detectChanges();
+      fixture.componentInstance.ctxProp = 'one';
+      fixture.detectChanges();
 
-         expect(dir.control).toEqual('one');
+      expect(dir.control).toEqual('one');
 
-         dir.controlChange.subscribe({
-           next: () => {
-             expect(fixture.componentInstance.ctxProp).toEqual('two');
-           }
-         });
+      dir.controlChange.subscribe({
+        next: () => {
+          expect(fixture.componentInstance.ctxProp).toEqual('two');
+        },
+      });
 
-         dir.triggerChange('two');
-       }));
+      dir.triggerChange('two');
+    }));
 
     it('should support render events', () => {
       TestBed.configureTestingModule({declarations: [MyComp, DirectiveListeningDomEvent]});
@@ -774,7 +829,10 @@ describe('integration tests', function() {
       dispatchEvent(tc.nativeElement, 'domEvent');
 
       expect(listener.eventTypes).toEqual([
-        'domEvent', 'body_domEvent', 'document_domEvent', 'window_domEvent'
+        'domEvent',
+        'body_domEvent',
+        'document_domEvent',
+        'window_domEvent',
       ]);
 
       fixture.destroy();
@@ -807,8 +865,7 @@ describe('integration tests', function() {
 
     it('should support updating host element via hostAttributes on root elements', () => {
       @Component({host: {'role': 'button'}, template: ''})
-      class ComponentUpdatingHostAttributes {
-      }
+      class ComponentUpdatingHostAttributes {}
 
       TestBed.configureTestingModule({declarations: [ComponentUpdatingHostAttributes]});
       const fixture = TestBed.createComponent(ComponentUpdatingHostAttributes);
@@ -852,12 +909,13 @@ describe('integration tests', function() {
         unknownProp = 'unknownProp';
       }
 
-      const fixture =
-          TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithHostProps]})
-              .overrideComponent(
-                  MyComp,
-                  {set: {template: `<div *ngFor="let id of ['forId']" host-properties></div>`}})
-              .createComponent(MyComp);
+      const fixture = TestBed.configureTestingModule({
+        declarations: [MyComp, DirectiveWithHostProps],
+      })
+        .overrideComponent(MyComp, {
+          set: {template: `<div *ngFor="let id of ['forId']" host-properties></div>`},
+        })
+        .createComponent(MyComp);
       fixture.detectChanges();
 
       const tc = fixture.debugElement.children[0];
@@ -867,14 +925,14 @@ describe('integration tests', function() {
 
     it('should not allow pipes in hostProperties', () => {
       @Directive({selector: '[host-properties]', host: {'[id]': 'id | uppercase'}})
-      class DirectiveWithHostProps {
-      }
+      class DirectiveWithHostProps {}
 
       TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithHostProps]});
       const template = '<div host-properties></div>';
       TestBed.overrideComponent(MyComp, {set: {template}});
-      expect(() => TestBed.createComponent(MyComp))
-          .toThrowError(/Host binding expression cannot contain pipes/);
+      expect(() => TestBed.createComponent(MyComp)).toThrowError(
+        /Host binding expression cannot contain pipes/,
+      );
     });
 
     it('should not use template variables for expressions in hostListeners', () => {
@@ -888,12 +946,13 @@ describe('integration tests', function() {
         }
       }
 
-      const fixture =
-          TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithHostListener]})
-              .overrideComponent(
-                  MyComp,
-                  {set: {template: `<div *ngFor="let id of ['forId']" host-listener></div>`}})
-              .createComponent(MyComp);
+      const fixture = TestBed.configureTestingModule({
+        declarations: [MyComp, DirectiveWithHostListener],
+      })
+        .overrideComponent(MyComp, {
+          set: {template: `<div *ngFor="let id of ['forId']" host-listener></div>`},
+        })
+        .createComponent(MyComp);
       fixture.detectChanges();
       const tc = fixture.debugElement.children[0];
       tc.triggerEventHandler('click', {});
@@ -903,26 +962,27 @@ describe('integration tests', function() {
 
     it('should not allow pipes in hostListeners', () => {
       @Directive({selector: '[host-listener]', host: {'(click)': 'doIt() | somePipe'}})
-      class DirectiveWithHostListener {
-      }
+      class DirectiveWithHostListener {}
 
       TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithHostListener]});
       const template = '<div host-listener></div>';
       TestBed.overrideComponent(MyComp, {set: {template}});
-      expect(() => TestBed.createComponent(MyComp))
-          .toThrowError(/Cannot have a pipe in an action expression/);
+      expect(() => TestBed.createComponent(MyComp)).toThrowError(
+        /Cannot have a pipe in an action expression/,
+      );
     });
 
-
-
     if (getDOM().supportsDOMEvents) {
       it('should support preventing default on render events', () => {
         TestBed.configureTestingModule({
-          declarations:
-              [MyComp, DirectiveListeningDomEventPrevent, DirectiveListeningDomEventNoPrevent]
+          declarations: [
+            MyComp,
+            DirectiveListeningDomEventPrevent,
+            DirectiveListeningDomEventNoPrevent,
+          ],
         });
         const template =
-            '<input type="checkbox" listenerprevent><input type="checkbox" listenernoprevent>';
+          '<input type="checkbox" listenerprevent><input type="checkbox" listenernoprevent>';
         TestBed.overrideComponent(MyComp, {set: {template}});
         const fixture = TestBed.createComponent(MyComp);
 
@@ -938,8 +998,9 @@ describe('integration tests', function() {
     }
 
     it('should support render global events from multiple directives', () => {
-      TestBed.configureTestingModule(
-          {declarations: [MyComp, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]});
+      TestBed.configureTestingModule({
+        declarations: [MyComp, DirectiveListeningDomEvent, DirectiveListeningDomEventOther],
+      });
       const template = '<div *ngIf="ctxBoolProp" listener listenerother></div>';
       TestBed.overrideComponent(MyComp, {set: {template}});
       const fixture = TestBed.createComponent(MyComp);
@@ -958,7 +1019,6 @@ describe('integration tests', function() {
       expect(listenerother.eventType).toEqual('other_domEvent');
       expect(globalCounter).toEqual(1);
 
-
       fixture.componentInstance.ctxBoolProp = false;
       fixture.detectChanges();
       dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent');
@@ -975,37 +1035,44 @@ describe('integration tests', function() {
 
     describe('ViewContainerRef', () => {
       beforeEach(() => {
-        TestBed.configureTestingModule(
-            {declarations: [MyComp, DynamicViewport, ChildCompUsingService]});
-        TestBed.overrideComponent(
-            MyComp, {add: {template: '<div><dynamic-vp #dynamic></dynamic-vp></div>'}});
+        TestBed.configureTestingModule({
+          declarations: [MyComp, DynamicViewport, ChildCompUsingService],
+        });
+        TestBed.overrideComponent(MyComp, {
+          add: {template: '<div><dynamic-vp #dynamic></dynamic-vp></div>'},
+        });
       });
 
       describe('.createComponent', () => {
         it('should allow to create a component at any bound location', waitForAsync(() => {
-             const fixture = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
-                                 .createComponent(MyComp);
-             const tc = fixture.debugElement.children[0].children[0];
-             const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
-             dynamicVp.create();
-             fixture.detectChanges();
-             expect(fixture.debugElement.children[0].children[1].nativeElement)
-                 .toHaveText('dynamic greet');
-           }));
+          const fixture = TestBed.configureTestingModule({
+            schemas: [NO_ERRORS_SCHEMA],
+          }).createComponent(MyComp);
+          const tc = fixture.debugElement.children[0].children[0];
+          const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
+          dynamicVp.create();
+          fixture.detectChanges();
+          expect(fixture.debugElement.children[0].children[1].nativeElement).toHaveText(
+            'dynamic greet',
+          );
+        }));
 
         it('should allow to create multiple components at a location', waitForAsync(() => {
-             const fixture = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
-                                 .createComponent(MyComp);
-             const tc = fixture.debugElement.children[0].children[0];
-             const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
-             dynamicVp.create();
-             dynamicVp.create();
-             fixture.detectChanges();
-             expect(fixture.debugElement.children[0].children[1].nativeElement)
-                 .toHaveText('dynamic greet');
-             expect(fixture.debugElement.children[0].children[2].nativeElement)
-                 .toHaveText('dynamic greet');
-           }));
+          const fixture = TestBed.configureTestingModule({
+            schemas: [NO_ERRORS_SCHEMA],
+          }).createComponent(MyComp);
+          const tc = fixture.debugElement.children[0].children[0];
+          const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
+          dynamicVp.create();
+          dynamicVp.create();
+          fixture.detectChanges();
+          expect(fixture.debugElement.children[0].children[1].nativeElement).toHaveText(
+            'dynamic greet',
+          );
+          expect(fixture.debugElement.children[0].children[2].nativeElement).toHaveText(
+            'dynamic greet',
+          );
+        }));
 
         it('should create a component that has been freshly compiled', () => {
           @Component({template: ''})
@@ -1017,8 +1084,7 @@ describe('integration tests', function() {
             declarations: [RootComp],
             providers: [{provide: 'someToken', useValue: 'someRootValue'}],
           })
-          class RootModule {
-          }
+          class RootModule {}
 
           @Component({template: ''})
           class MyComp {
@@ -1029,15 +1095,15 @@ describe('integration tests', function() {
             declarations: [MyComp],
             providers: [{provide: 'someToken', useValue: 'someValue'}],
           })
-          class MyModule {
-          }
+          class MyModule {}
 
-          const compFixture =
-              TestBed.configureTestingModule({imports: [RootModule]}).createComponent(RootComp);
+          const compFixture = TestBed.configureTestingModule({
+            imports: [RootModule],
+          }).createComponent(RootComp);
           const compiler = TestBed.inject(Compiler);
-          const myCompFactory =
-              <ComponentFactory<MyComp>>compiler.compileModuleAndAllComponentsSync(MyModule)
-                  .componentFactories[0];
+          const myCompFactory = <ComponentFactory<MyComp>>(
+            compiler.compileModuleAndAllComponentsSync(MyModule).componentFactories[0]
+          );
 
           // Note: the ComponentFactory was created directly via the compiler, i.e. it
           // does not have an association to an NgModuleRef.
@@ -1061,24 +1127,25 @@ describe('integration tests', function() {
             declarations: [RootComp, MyComp],
             providers: [{provide: 'someToken', useValue: 'someRootValue'}],
           })
-          class RootModule {
-          }
+          class RootModule {}
 
           @NgModule({providers: [{provide: 'someToken', useValue: 'someValue'}]})
-          class MyModule {
-          }
+          class MyModule {}
 
-          const compFixture =
-              TestBed.configureTestingModule({imports: [RootModule]}).createComponent(RootComp);
+          const compFixture = TestBed.configureTestingModule({
+            imports: [RootModule],
+          }).createComponent(RootComp);
           const compiler = TestBed.inject(Compiler);
-          const myModule =
-              compiler.compileModuleSync(MyModule).create(TestBed.inject(NgModuleRef).injector);
+          const myModule = compiler
+            .compileModuleSync(MyModule)
+            .create(TestBed.inject(NgModuleRef).injector);
 
           // Note: MyComp was declared as entryComponent in the RootModule,
           // but we pass MyModule to the createComponent call.
           // -> expect the providers of MyModule!
-          const compRef =
-              compFixture.componentInstance.vc.createComponent(MyComp, {ngModuleRef: myModule});
+          const compRef = compFixture.componentInstance.vc.createComponent(MyComp, {
+            ngModuleRef: myModule,
+          });
           expect(compRef.instance.someToken).toBe('someValue');
         });
 
@@ -1092,8 +1159,7 @@ describe('integration tests', function() {
             declarations: [RootComp],
             providers: [{provide: 'someToken', useValue: 'someRootValue'}],
           })
-          class RootModule {
-          }
+          class RootModule {}
 
           @Component({template: ''})
           class MyComp {
@@ -1104,14 +1170,15 @@ describe('integration tests', function() {
             declarations: [MyComp],
             providers: [{provide: 'someToken', useValue: 'someValue'}],
           })
-          class MyModule {
-          }
+          class MyModule {}
 
-          const compFixture =
-              TestBed.configureTestingModule({imports: [RootModule]}).createComponent(RootComp);
+          const compFixture = TestBed.configureTestingModule({
+            imports: [RootModule],
+          }).createComponent(RootComp);
           const compiler = TestBed.inject(Compiler);
-          const myModule =
-              compiler.compileModuleSync(MyModule).create(TestBed.inject(NgModuleRef).injector);
+          const myModule = compiler
+            .compileModuleSync(MyModule)
+            .create(TestBed.inject(NgModuleRef).injector);
           const myCompFactory = myModule.componentFactoryResolver.resolveComponentFactory(MyComp);
 
           // Note: MyComp was declared as entryComponent in MyModule,
@@ -1124,34 +1191,36 @@ describe('integration tests', function() {
 
       describe('.insert', () => {
         it('should throw with destroyed views', waitForAsync(() => {
-             const fixture = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
-                                 .createComponent(MyComp);
-             const tc = fixture.debugElement.children[0].children[0];
-             const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
-             const ref = dynamicVp.create();
-             fixture.detectChanges();
-
-             ref.destroy();
-             expect(() => {
-               dynamicVp.insert(ref.hostView);
-             }).toThrowError('Cannot insert a destroyed View in a ViewContainer!');
-           }));
+          const fixture = TestBed.configureTestingModule({
+            schemas: [NO_ERRORS_SCHEMA],
+          }).createComponent(MyComp);
+          const tc = fixture.debugElement.children[0].children[0];
+          const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
+          const ref = dynamicVp.create();
+          fixture.detectChanges();
+
+          ref.destroy();
+          expect(() => {
+            dynamicVp.insert(ref.hostView);
+          }).toThrowError('Cannot insert a destroyed View in a ViewContainer!');
+        }));
       });
 
       describe('.move', () => {
         it('should throw with destroyed views', waitForAsync(() => {
-             const fixture = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
-                                 .createComponent(MyComp);
-             const tc = fixture.debugElement.children[0].children[0];
-             const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
-             const ref = dynamicVp.create();
-             fixture.detectChanges();
-
-             ref.destroy();
-             expect(() => {
-               dynamicVp.move(ref.hostView, 1);
-             }).toThrowError('Cannot move a destroyed View in a ViewContainer!');
-           }));
+          const fixture = TestBed.configureTestingModule({
+            schemas: [NO_ERRORS_SCHEMA],
+          }).createComponent(MyComp);
+          const tc = fixture.debugElement.children[0].children[0];
+          const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
+          const ref = dynamicVp.create();
+          fixture.detectChanges();
+
+          ref.destroy();
+          expect(() => {
+            dynamicVp.move(ref.hostView, 1);
+          }).toThrowError('Cannot move a destroyed View in a ViewContainer!');
+        }));
       });
     });
 
@@ -1171,9 +1240,11 @@ describe('integration tests', function() {
     it('should support custom interpolation', () => {
       TestBed.configureTestingModule({
         declarations: [
-          MyComp, ComponentWithCustomInterpolationA, ComponentWithCustomInterpolationB,
-          ComponentWithDefaultInterpolation
-        ]
+          MyComp,
+          ComponentWithCustomInterpolationA,
+          ComponentWithCustomInterpolationB,
+          ComponentWithDefaultInterpolation,
+        ],
       });
       const template = `<div>{{ctxProp}}</div>
 <cmp-with-custom-interpolation-a></cmp-with-custom-interpolation-a>
@@ -1184,9 +1255,9 @@ describe('integration tests', function() {
       fixture.componentInstance.ctxProp = 'Default Interpolation';
 
       fixture.detectChanges();
-      expect(fixture.nativeElement)
-          .toHaveText(
-              'Default InterpolationCustom Interpolation ACustom Interpolation B (Default Interpolation)');
+      expect(fixture.nativeElement).toHaveText(
+        'Default InterpolationCustom Interpolation ACustom Interpolation B (Default Interpolation)',
+      );
     });
   });
 
@@ -1228,8 +1299,10 @@ describe('integration tests', function() {
     it('should support unbounded lookup', () => {
       TestBed.configureTestingModule({
         declarations: [
-          MyComp, DirectiveProvidingInjectable, DirectiveContainingDirectiveConsumingAnInjectable,
-          DirectiveConsumingInjectableUnbounded
+          MyComp,
+          DirectiveProvidingInjectable,
+          DirectiveContainingDirectiveConsumingAnInjectable,
+          DirectiveConsumingInjectableUnbounded,
         ],
         schemas: [NO_ERRORS_SCHEMA],
       });
@@ -1244,8 +1317,8 @@ describe('integration tests', function() {
         set: {
           template: `
             <directive-consuming-injectable-unbounded></directive-consuming-injectable-unbounded>
-          `
-        }
+          `,
+        },
       });
       const fixture = TestBed.createComponent(MyComp);
 
@@ -1255,8 +1328,12 @@ describe('integration tests', function() {
 
     it('should support the event-bus scenario', () => {
       TestBed.configureTestingModule({
-        declarations:
-            [MyComp, GrandParentProvidingEventBus, ParentProvidingEventBus, ChildConsumingEventBus],
+        declarations: [
+          MyComp,
+          GrandParentProvidingEventBus,
+          ParentProvidingEventBus,
+          ChildConsumingEventBus,
+        ],
         schemas: [NO_ERRORS_SCHEMA],
       });
       const template = `
@@ -1322,75 +1399,68 @@ describe('integration tests', function() {
 
     it('should throw when using directives without selector in NgModule declarations', () => {
       @Directive({})
-      class SomeDirective {
-      }
+      class SomeDirective {}
 
       @Component({selector: 'comp', template: ''})
-      class SomeComponent {
-      }
+      class SomeComponent {}
 
       TestBed.configureTestingModule({declarations: [MyComp, SomeDirective, SomeComponent]});
-      expect(() => TestBed.createComponent(MyComp))
-          .toThrowError(`Directive ${stringify(SomeDirective)} has no selector, please add it!`);
+      expect(() => TestBed.createComponent(MyComp)).toThrowError(
+        `Directive ${stringify(SomeDirective)} has no selector, please add it!`,
+      );
     });
 
-    it('should not throw when using directives without selector as base class not in declarations',
-       () => {
-         @Directive({})
-         abstract class Base {
-           constructor(readonly injector: Injector) {}
-         }
+    it('should not throw when using directives without selector as base class not in declarations', () => {
+      @Directive({})
+      abstract class Base {
+        constructor(readonly injector: Injector) {}
+      }
 
-         @Directive()
-         abstract class EmptyDir {
-         }
+      @Directive()
+      abstract class EmptyDir {}
 
-         @Directive({inputs: ['a', 'b']})
-         class TestDirWithInputs {
-         }
+      @Directive({inputs: ['a', 'b']})
+      class TestDirWithInputs {}
 
-         @Component({selector: 'comp', template: ''})
-         class SomeComponent extends Base {
-         }
+      @Component({selector: 'comp', template: ''})
+      class SomeComponent extends Base {}
 
-         @Component({selector: 'comp2', template: ''})
-         class SomeComponent2 extends EmptyDir {
-         }
+      @Component({selector: 'comp2', template: ''})
+      class SomeComponent2 extends EmptyDir {}
 
-         @Component({selector: 'comp3', template: ''})
-         class SomeComponent3 extends TestDirWithInputs {
-         }
+      @Component({selector: 'comp3', template: ''})
+      class SomeComponent3 extends TestDirWithInputs {}
 
-         TestBed.configureTestingModule(
-             {declarations: [MyComp, SomeComponent, SomeComponent2, SomeComponent3]});
-         expect(() => TestBed.createComponent(MyComp)).not.toThrowError();
-       });
+      TestBed.configureTestingModule({
+        declarations: [MyComp, SomeComponent, SomeComponent2, SomeComponent3],
+      });
+      expect(() => TestBed.createComponent(MyComp)).not.toThrowError();
+    });
 
     it('should throw when using directives with empty string selector', () => {
       @Directive({selector: ''})
-      class SomeDirective {
-      }
+      class SomeDirective {}
 
       @Component({selector: 'comp', template: ''})
-      class SomeComponent {
-      }
+      class SomeComponent {}
 
       TestBed.configureTestingModule({declarations: [MyComp, SomeDirective, SomeComponent]});
-      expect(() => TestBed.createComponent(MyComp))
-          .toThrowError(`Directive ${stringify(SomeDirective)} has no selector, please add it!`);
+      expect(() => TestBed.createComponent(MyComp)).toThrowError(
+        `Directive ${stringify(SomeDirective)} has no selector, please add it!`,
+      );
     });
 
     it('should use a default element name for components without selectors', () => {
       @Component({template: '----'})
-      class NoSelectorComponent {
-      }
+      class NoSelectorComponent {}
 
       expect(reflectComponentType(NoSelectorComponent)?.selector).toBe('ng-component');
 
-      expect(createComponent(NoSelectorComponent, {
-               environmentInjector: TestBed.inject(EnvironmentInjector)
-             }).location.nativeElement.nodeName.toLowerCase())
-          .toEqual('ng-component');
+      expect(
+        createComponent(NoSelectorComponent, {
+          environmentInjector: TestBed.inject(EnvironmentInjector),
+        }).location.nativeElement.nodeName.toLowerCase(),
+      ).toEqual('ng-component');
     });
   });
 
@@ -1398,10 +1468,11 @@ describe('integration tests', function() {
     it('should report a meaningful error when a directive is missing annotation', () => {
       TestBed.configureTestingModule({declarations: [MyComp, SomeDirectiveMissingAnnotation]});
 
-      expect(() => TestBed.createComponent(MyComp))
-          .toThrowError(`Unexpected value '${
-              stringify(
-                  SomeDirectiveMissingAnnotation)}' declared by the module 'DynamicTestModule'. Please add a @Pipe/@Directive/@Component annotation.`);
+      expect(() => TestBed.createComponent(MyComp)).toThrowError(
+        `Unexpected value '${stringify(
+          SomeDirectiveMissingAnnotation,
+        )}' declared by the module 'DynamicTestModule'. Please add a @Pipe/@Directive/@Component annotation.`,
+      );
     });
 
     it('should report a meaningful error when a component is missing view annotation', () => {
@@ -1409,8 +1480,9 @@ describe('integration tests', function() {
       try {
         TestBed.createComponent(ComponentWithoutView);
       } catch (e) {
-        expect((e as Error).message)
-            .toContain(`No template specified for component ${stringify(ComponentWithoutView)}`);
+        expect((e as Error).message).toContain(
+          `No template specified for component ${stringify(ComponentWithoutView)}`,
+        );
       }
     });
   });
@@ -1447,12 +1519,11 @@ describe('integration tests', function() {
     expect(fixture.nativeElement).toHaveText('');
   });
 
-
   describe('moving embedded views of projectable nodes in a dynamic component', () => {
     @Component({selector: 'menu-item', template: ''})
     class DynamicMenuItem {
       @ViewChild('templateRef', {static: true}) templateRef!: TemplateRef<any>;
-      itemContent: string|undefined;
+      itemContent: string | undefined;
     }
 
     @Component({selector: 'test', template: `<ng-container #menuItemsContainer></ng-container>`})
@@ -1474,12 +1545,14 @@ describe('integration tests', function() {
 
     it('should support moving embedded views of projectable nodes', () => {
       TestBed.overrideTemplate(
-          DynamicMenuItem, `<ng-template #templateRef><ng-content></ng-content></ng-template>`);
+        DynamicMenuItem,
+        `<ng-template #templateRef><ng-content></ng-content></ng-template>`,
+      );
 
       const fixture = TestBed.createComponent(TestCmp);
       const menuItemsContainer = fixture.componentInstance.menuItemsContainer;
       const dynamicCmptFactory =
-          fixture.componentInstance.cfr.resolveComponentFactory(DynamicMenuItem);
+        fixture.componentInstance.cfr.resolveComponentFactory(DynamicMenuItem);
 
       const cmptRefWithAa = dynamicCmptFactory.create(Injector.NULL, [[createElWithContent('Aa')]]);
       const cmptRefWithBb = dynamicCmptFactory.create(Injector.NULL, [[createElWithContent('Bb')]]);
@@ -1497,20 +1570,27 @@ describe('integration tests', function() {
 
     it('should support moving embedded views of projectable nodes in multiple slots', () => {
       TestBed.overrideTemplate(
-          DynamicMenuItem,
-          `<ng-template #templateRef><ng-content select="span"></ng-content><ng-content select="button"></ng-content></ng-template>`);
+        DynamicMenuItem,
+        `<ng-template #templateRef><ng-content select="span"></ng-content><ng-content select="button"></ng-content></ng-template>`,
+      );
 
       const fixture = TestBed.createComponent(TestCmp);
       const menuItemsContainer = fixture.componentInstance.menuItemsContainer;
       const dynamicCmptFactory =
-          fixture.componentInstance.cfr.resolveComponentFactory(DynamicMenuItem);
+        fixture.componentInstance.cfr.resolveComponentFactory(DynamicMenuItem);
 
-      const cmptRefWithAa = dynamicCmptFactory.create(
-          Injector.NULL, [[createElWithContent('A')], [createElWithContent('a', 'button')]]);
-      const cmptRefWithBb = dynamicCmptFactory.create(
-          Injector.NULL, [[createElWithContent('B')], [createElWithContent('b', 'button')]]);
-      const cmptRefWithCc = dynamicCmptFactory.create(
-          Injector.NULL, [[createElWithContent('C')], [createElWithContent('c', 'button')]]);
+      const cmptRefWithAa = dynamicCmptFactory.create(Injector.NULL, [
+        [createElWithContent('A')],
+        [createElWithContent('a', 'button')],
+      ]);
+      const cmptRefWithBb = dynamicCmptFactory.create(Injector.NULL, [
+        [createElWithContent('B')],
+        [createElWithContent('b', 'button')],
+      ]);
+      const cmptRefWithCc = dynamicCmptFactory.create(Injector.NULL, [
+        [createElWithContent('C')],
+        [createElWithContent('c', 'button')],
+      ]);
 
       menuItemsContainer.insert(cmptRefWithAa.instance.templateRef.createEmbeddedView({}));
       menuItemsContainer.insert(cmptRefWithBb.instance.templateRef.createEmbeddedView({}));
@@ -1522,50 +1602,58 @@ describe('integration tests', function() {
       expect(fixture.nativeElement.textContent).toBe('BbCcAa');
     });
 
-    it('should support moving embedded views of projectable nodes in multiple slots and interpolations',
-       () => {
-         TestBed.overrideTemplate(
-             DynamicMenuItem,
-             `<ng-template #templateRef><ng-content select="span"></ng-content>{{itemContent}}<ng-content select="button"></ng-content></ng-template>`);
+    it('should support moving embedded views of projectable nodes in multiple slots and interpolations', () => {
+      TestBed.overrideTemplate(
+        DynamicMenuItem,
+        `<ng-template #templateRef><ng-content select="span"></ng-content>{{itemContent}}<ng-content select="button"></ng-content></ng-template>`,
+      );
 
-         TestBed.configureTestingModule({declarations: [TestCmp, DynamicMenuItem]});
+      TestBed.configureTestingModule({declarations: [TestCmp, DynamicMenuItem]});
 
-         const fixture = TestBed.createComponent(TestCmp);
-         const menuItemsContainer = fixture.componentInstance.menuItemsContainer;
-         const dynamicCmptFactory =
-             fixture.componentInstance.cfr.resolveComponentFactory(DynamicMenuItem);
+      const fixture = TestBed.createComponent(TestCmp);
+      const menuItemsContainer = fixture.componentInstance.menuItemsContainer;
+      const dynamicCmptFactory =
+        fixture.componentInstance.cfr.resolveComponentFactory(DynamicMenuItem);
 
-         const cmptRefWithAa = dynamicCmptFactory.create(
-             Injector.NULL, [[createElWithContent('A')], [createElWithContent('a', 'button')]]);
-         const cmptRefWithBb = dynamicCmptFactory.create(
-             Injector.NULL, [[createElWithContent('B')], [createElWithContent('b', 'button')]]);
-         const cmptRefWithCc = dynamicCmptFactory.create(
-             Injector.NULL, [[createElWithContent('C')], [createElWithContent('c', 'button')]]);
+      const cmptRefWithAa = dynamicCmptFactory.create(Injector.NULL, [
+        [createElWithContent('A')],
+        [createElWithContent('a', 'button')],
+      ]);
+      const cmptRefWithBb = dynamicCmptFactory.create(Injector.NULL, [
+        [createElWithContent('B')],
+        [createElWithContent('b', 'button')],
+      ]);
+      const cmptRefWithCc = dynamicCmptFactory.create(Injector.NULL, [
+        [createElWithContent('C')],
+        [createElWithContent('c', 'button')],
+      ]);
 
-         menuItemsContainer.insert(cmptRefWithAa.instance.templateRef.createEmbeddedView({}));
-         menuItemsContainer.insert(cmptRefWithBb.instance.templateRef.createEmbeddedView({}));
-         menuItemsContainer.insert(cmptRefWithCc.instance.templateRef.createEmbeddedView({}));
+      menuItemsContainer.insert(cmptRefWithAa.instance.templateRef.createEmbeddedView({}));
+      menuItemsContainer.insert(cmptRefWithBb.instance.templateRef.createEmbeddedView({}));
+      menuItemsContainer.insert(cmptRefWithCc.instance.templateRef.createEmbeddedView({}));
 
-         cmptRefWithAa.instance.itemContent = '0';
-         cmptRefWithBb.instance.itemContent = '1';
-         cmptRefWithCc.instance.itemContent = '2';
+      cmptRefWithAa.instance.itemContent = '0';
+      cmptRefWithBb.instance.itemContent = '1';
+      cmptRefWithCc.instance.itemContent = '2';
 
-         fixture.detectChanges();
+      fixture.detectChanges();
 
-         menuItemsContainer.move(menuItemsContainer.get(0)!, 1);
-         expect(fixture.nativeElement.textContent).toBe('B1bA0aC2c');
-         menuItemsContainer.move(menuItemsContainer.get(2)!, 1);
-         expect(fixture.nativeElement.textContent).toBe('B1bC2cA0a');
-       });
+      menuItemsContainer.move(menuItemsContainer.get(0)!, 1);
+      expect(fixture.nativeElement.textContent).toBe('B1bA0aC2c');
+      menuItemsContainer.move(menuItemsContainer.get(2)!, 1);
+      expect(fixture.nativeElement.textContent).toBe('B1bC2cA0a');
+    });
 
     it('should support moving embedded views with empty projectable slots', () => {
       TestBed.overrideTemplate(
-          DynamicMenuItem, `<ng-template #templateRef><ng-content></ng-content></ng-template>`);
+        DynamicMenuItem,
+        `<ng-template #templateRef><ng-content></ng-content></ng-template>`,
+      );
 
       const fixture = TestBed.createComponent(TestCmp);
       const menuItemsContainer = fixture.componentInstance.menuItemsContainer;
       const dynamicCmptFactory =
-          fixture.componentInstance.cfr.resolveComponentFactory(DynamicMenuItem);
+        fixture.componentInstance.cfr.resolveComponentFactory(DynamicMenuItem);
 
       const cmptRefWithAa = dynamicCmptFactory.create(Injector.NULL, [[]]);
       const cmptRefWithBb = dynamicCmptFactory.create(Injector.NULL, [[createElWithContent('Bb')]]);
@@ -1575,11 +1663,11 @@ describe('integration tests', function() {
       menuItemsContainer.insert(cmptRefWithBb.instance.templateRef.createEmbeddedView({}));
       menuItemsContainer.insert(cmptRefWithCc.instance.templateRef.createEmbeddedView({}));
 
-      menuItemsContainer.move(menuItemsContainer.get(0)!, 1);  // [ Bb, NULL, Cc]
+      menuItemsContainer.move(menuItemsContainer.get(0)!, 1); // [ Bb, NULL, Cc]
       expect(fixture.nativeElement.textContent).toBe('BbCc');
-      menuItemsContainer.move(menuItemsContainer.get(2)!, 1);  // [ Bb, Cc, NULL]
+      menuItemsContainer.move(menuItemsContainer.get(2)!, 1); // [ Bb, Cc, NULL]
       expect(fixture.nativeElement.textContent).toBe('BbCc');
-      menuItemsContainer.move(menuItemsContainer.get(0)!, 1);  // [ Cc, Bb, NULL]
+      menuItemsContainer.move(menuItemsContainer.get(0)!, 1); // [ Cc, Bb, NULL]
       expect(fixture.nativeElement.textContent).toBe('CcBb');
     });
   });
@@ -1593,8 +1681,9 @@ describe('integration tests', function() {
       const spy = spyOn(console, 'error');
       const fixture = TestBed.createComponent(MyComp);
       fixture.detectChanges();
-      expect(spy.calls.mostRecent().args[0])
-          .toMatch(/Can't bind to 'unknown' since it isn't a known property of 'div'./);
+      expect(spy.calls.mostRecent().args[0]).toMatch(
+        /Can't bind to 'unknown' since it isn't a known property of 'div'./,
+      );
     });
 
     it('should throw on bindings to unknown properties', () => {
@@ -1604,17 +1693,17 @@ describe('integration tests', function() {
       const spy = spyOn(console, 'error');
       const fixture = TestBed.createComponent(MyComp);
       fixture.detectChanges();
-      expect(spy.calls.mostRecent().args[0])
-          .toMatch(/Can't bind to 'ngForIn' since it isn't a known property of 'div'./);
+      expect(spy.calls.mostRecent().args[0]).toMatch(
+        /Can't bind to 'ngForIn' since it isn't a known property of 'div'./,
+      );
     });
 
-    it('should not throw for property binding to a non-existing property when there is a matching directive property',
-       () => {
-         TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
-         const template = '<div my-dir [elprop]="ctxProp"></div>';
-         TestBed.overrideComponent(MyComp, {set: {template}});
-         expect(() => TestBed.createComponent(MyComp)).not.toThrow();
-       });
+    it('should not throw for property binding to a non-existing property when there is a matching directive property', () => {
+      TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
+      const template = '<div my-dir [elprop]="ctxProp"></div>';
+      TestBed.overrideComponent(MyComp, {set: {template}});
+      expect(() => TestBed.createComponent(MyComp)).not.toThrow();
+    });
 
     it('should not be created when there is a directive with the same property', () => {
       TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithTitle]});
@@ -1658,8 +1747,9 @@ describe('integration tests', function() {
 
     it('should reflect property values on unbound inputs', () => {
       TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
-      TestBed.overrideComponent(
-          MyComp, {set: {template: `<div my-dir elprop="hello" title="Reflect test"></div>`}});
+      TestBed.overrideComponent(MyComp, {
+        set: {template: `<div my-dir elprop="hello" title="Reflect test"></div>`},
+      });
       const fixture = TestBed.createComponent(MyComp);
       fixture.detectChanges();
 
@@ -1678,11 +1768,11 @@ describe('integration tests', function() {
     });
 
     it('should reflect property values on template comments', () => {
-      const fixture =
-          TestBed.configureTestingModule({declarations: [MyComp]})
-              .overrideComponent(
-                  MyComp, {set: {template: `<ng-template [ngIf]="ctxBoolProp"></ng-template>`}})
-              .createComponent(MyComp);
+      const fixture = TestBed.configureTestingModule({declarations: [MyComp]})
+        .overrideComponent(MyComp, {
+          set: {template: `<ng-template [ngIf]="ctxBoolProp"></ng-template>`},
+        })
+        .createComponent(MyComp);
 
       fixture.componentInstance.ctxBoolProp = true;
       fixture.detectChanges();
@@ -1692,12 +1782,11 @@ describe('integration tests', function() {
     });
 
     it('should reflect property values on ng-containers', () => {
-      const fixture =
-          TestBed.configureTestingModule({declarations: [MyComp]})
-              .overrideComponent(
-                  MyComp,
-                  {set: {template: `<ng-container *ngIf="ctxBoolProp">content</ng-container>`}})
-              .createComponent(MyComp);
+      const fixture = TestBed.configureTestingModule({declarations: [MyComp]})
+        .overrideComponent(MyComp, {
+          set: {template: `<ng-container *ngIf="ctxBoolProp">content</ng-container>`},
+        })
+        .createComponent(MyComp);
 
       fixture.componentInstance.ctxBoolProp = true;
       fixture.detectChanges();
@@ -1708,8 +1797,9 @@ describe('integration tests', function() {
 
     it('should reflect property values of multiple directive bound to the same input name', () => {
       TestBed.configureTestingModule({declarations: [MyComp, MyDir, MyDir2]});
-      TestBed.overrideComponent(
-          MyComp, {set: {template: `<div my-dir my-dir2 [elprop]="ctxProp"></div>`}});
+      TestBed.overrideComponent(MyComp, {
+        set: {template: `<div my-dir my-dir2 [elprop]="ctxProp"></div>`},
+      });
       const fixture = TestBed.createComponent(MyComp);
 
       fixture.componentInstance.ctxProp = 'hello';
@@ -1774,11 +1864,11 @@ describe('integration tests', function() {
     });
 
     it('should not reflect in comment nodes when the value changes to undefined', () => {
-      const fixture =
-          TestBed.configureTestingModule({declarations: [MyComp]})
-              .overrideComponent(
-                  MyComp, {set: {template: `<ng-template [ngIf]="ctxBoolProp"></ng-template>`}})
-              .createComponent(MyComp);
+      const fixture = TestBed.configureTestingModule({declarations: [MyComp]})
+        .overrideComponent(MyComp, {
+          set: {template: `<ng-template [ngIf]="ctxBoolProp"></ng-template>`},
+        })
+        .createComponent(MyComp);
 
       fixture.componentInstance.ctxBoolProp = true;
       fixture.detectChanges();
@@ -1796,11 +1886,11 @@ describe('integration tests', function() {
     });
 
     it('should reflect in comment nodes when the value changes to null', () => {
-      const fixture =
-          TestBed.configureTestingModule({declarations: [MyComp]})
-              .overrideComponent(
-                  MyComp, {set: {template: `<ng-template [ngIf]="ctxBoolProp"></ng-template>`}})
-              .createComponent(MyComp);
+      const fixture = TestBed.configureTestingModule({declarations: [MyComp]})
+        .overrideComponent(MyComp, {
+          set: {template: `<ng-template [ngIf]="ctxBoolProp"></ng-template>`},
+        })
+        .createComponent(MyComp);
 
       fixture.componentInstance.ctxBoolProp = true;
       fixture.detectChanges();
@@ -1852,25 +1942,23 @@ describe('integration tests', function() {
 
     if (getDOM().supportsDOMEvents) {
       it('should support event decorators', fakeAsync(() => {
-           TestBed.configureTestingModule({
-             declarations: [MyComp, DirectiveWithPropDecorators],
-             schemas: [NO_ERRORS_SCHEMA],
-           });
-           const template = `<with-prop-decorators (elEvent)="ctxProp='called'">`;
-           TestBed.overrideComponent(MyComp, {set: {template}});
-           const fixture = TestBed.createComponent(MyComp);
-
-           tick();
+        TestBed.configureTestingModule({
+          declarations: [MyComp, DirectiveWithPropDecorators],
+          schemas: [NO_ERRORS_SCHEMA],
+        });
+        const template = `<with-prop-decorators (elEvent)="ctxProp='called'">`;
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
 
-           const emitter =
-               fixture.debugElement.children[0].injector.get(DirectiveWithPropDecorators);
-           emitter.fireEvent('fired !');
+        tick();
 
-           tick();
+        const emitter = fixture.debugElement.children[0].injector.get(DirectiveWithPropDecorators);
+        emitter.fireEvent('fired !');
 
-           expect(fixture.componentInstance.ctxProp).toEqual('called');
-         }));
+        tick();
 
+        expect(fixture.componentInstance.ctxProp).toEqual('called');
+      }));
 
       it('should support host listener decorators', () => {
         TestBed.configureTestingModule({
@@ -1908,83 +1996,76 @@ describe('integration tests', function() {
 
   describe('whitespaces in templates', () => {
     it('should not remove whitespaces by default', waitForAsync(() => {
-         @Component({
-           selector: 'comp',
-           template: '<span>foo</span>  <span>bar</span>',
-         })
-         class MyCmp {
-         }
+      @Component({
+        selector: 'comp',
+        template: '<span>foo</span>  <span>bar</span>',
+      })
+      class MyCmp {}
 
-         const f = TestBed.configureTestingModule({declarations: [MyCmp]}).createComponent(MyCmp);
-         f.detectChanges();
+      const f = TestBed.configureTestingModule({declarations: [MyCmp]}).createComponent(MyCmp);
+      f.detectChanges();
 
-         expect(f.nativeElement.childNodes.length).toBe(2);
-       }));
+      expect(f.nativeElement.childNodes.length).toBe(2);
+    }));
 
     it('should not remove whitespaces when explicitly requested not to do so', waitForAsync(() => {
-         @Component({
-           selector: 'comp',
-           template: '<span>foo</span>  <span>bar</span>',
-           preserveWhitespaces: true,
-         })
-         class MyCmp {
-         }
+      @Component({
+        selector: 'comp',
+        template: '<span>foo</span>  <span>bar</span>',
+        preserveWhitespaces: true,
+      })
+      class MyCmp {}
 
-         const f = TestBed.configureTestingModule({declarations: [MyCmp]}).createComponent(MyCmp);
-         f.detectChanges();
+      const f = TestBed.configureTestingModule({declarations: [MyCmp]}).createComponent(MyCmp);
+      f.detectChanges();
 
-         expect(f.nativeElement.childNodes.length).toBe(3);
-       }));
+      expect(f.nativeElement.childNodes.length).toBe(3);
+    }));
 
     it('should remove whitespaces when explicitly requested to do so', waitForAsync(() => {
-         @Component({
-           selector: 'comp',
-           template: '<span>foo</span>  <span>bar</span>',
-           preserveWhitespaces: false,
-         })
-         class MyCmp {
-         }
-
-         const f = TestBed.configureTestingModule({declarations: [MyCmp]}).createComponent(MyCmp);
-         f.detectChanges();
-
-         expect(f.nativeElement.childNodes.length).toBe(2);
-       }));
+      @Component({
+        selector: 'comp',
+        template: '<span>foo</span>  <span>bar</span>',
+        preserveWhitespaces: false,
+      })
+      class MyCmp {}
+
+      const f = TestBed.configureTestingModule({declarations: [MyCmp]}).createComponent(MyCmp);
+      f.detectChanges();
+
+      expect(f.nativeElement.childNodes.length).toBe(2);
+    }));
   });
 
   describe('orphan components', () => {
-    it('should display correct error message for orphan component if forbidOrphanRendering option is set',
-       () => {
-         @Component({template: '...'})
-         class MainComp {
-         }
-         ɵsetClassDebugInfo(MainComp, {
-           className: 'MainComp',
-           filePath: 'test.ts',
-           lineNumber: 11,
-           forbidOrphanRendering: true,
-         });
-
-         TestBed.configureTestingModule({declarations: [MainComp]});
-         expect(() => TestBed.createComponent(MainComp))
-             .toThrowError(
-                 /^NG01001: Orphan component found\! Trying to render the component MainComp \(at test\.ts:11\) without first loading the NgModule that declares it/);
-       });
-
-    it('should not throw error for orphan component if forbidOrphanRendering option is not set',
-       () => {
-         @Component({template: '...'})
-         class MainComp {
-         }
-         ɵsetClassDebugInfo(MainComp, {
-           className: 'MainComp',
-           filePath: 'test.ts',
-           lineNumber: 11,
-         });
-
-         TestBed.configureTestingModule({declarations: [MainComp]});
-         expect(() => TestBed.createComponent(MainComp)).not.toThrow();
-       });
+    it('should display correct error message for orphan component if forbidOrphanRendering option is set', () => {
+      @Component({template: '...'})
+      class MainComp {}
+      ɵsetClassDebugInfo(MainComp, {
+        className: 'MainComp',
+        filePath: 'test.ts',
+        lineNumber: 11,
+        forbidOrphanRendering: true,
+      });
+
+      TestBed.configureTestingModule({declarations: [MainComp]});
+      expect(() => TestBed.createComponent(MainComp)).toThrowError(
+        /^NG01001: Orphan component found\! Trying to render the component MainComp \(at test\.ts:11\) without first loading the NgModule that declares it/,
+      );
+    });
+
+    it('should not throw error for orphan component if forbidOrphanRendering option is not set', () => {
+      @Component({template: '...'})
+      class MainComp {}
+      ɵsetClassDebugInfo(MainComp, {
+        className: 'MainComp',
+        filePath: 'test.ts',
+        lineNumber: 11,
+      });
+
+      TestBed.configureTestingModule({declarations: [MainComp]});
+      expect(() => TestBed.createComponent(MainComp)).not.toThrow();
+    });
   });
 
   if (getDOM().supportsDOMEvents) {
@@ -2009,7 +2090,7 @@ describe('integration tests', function() {
       it('should support foreignObjects with document fragments', () => {
         TestBed.configureTestingModule({declarations: [MyComp]});
         const template =
-            '<svg><foreignObject><xhtml:div><p>Test</p></xhtml:div></foreignObject></svg>';
+          '<svg><foreignObject><xhtml:div><p>Test</p></xhtml:div></foreignObject></svg>';
         TestBed.overrideComponent(MyComp, {set: {template}});
         const fixture = TestBed.createComponent(MyComp);
 
@@ -2057,7 +2138,6 @@ describe('integration tests', function() {
   }
 });
 
-
 @Component({selector: 'cmp-with-default-interpolation', template: `{{text}}`})
 class ComponentWithDefaultInterpolation {
   text = 'Default Interpolation';
@@ -2066,7 +2146,7 @@ class ComponentWithDefaultInterpolation {
 @Component({
   selector: 'cmp-with-custom-interpolation-a',
   template: `<div>{%text%}</div>`,
-  interpolation: ['{%', '%}']
+  interpolation: ['{%', '%}'],
 })
 class ComponentWithCustomInterpolationA {
   text = 'Custom Interpolation A';
@@ -2074,9 +2154,8 @@ class ComponentWithCustomInterpolationA {
 
 @Component({
   selector: 'cmp-with-custom-interpolation-b',
-  template:
-      `<div>{**text%}</div> (<cmp-with-default-interpolation></cmp-with-default-interpolation>)`,
-  interpolation: ['{**', '%}']
+  template: `<div>{**text%}</div> (<cmp-with-default-interpolation></cmp-with-default-interpolation>)`,
+  interpolation: ['{**', '%}'],
 })
 class ComponentWithCustomInterpolationB {
   text = 'Custom Interpolation B';
@@ -2107,13 +2186,17 @@ class DynamicViewport {
     const myService = new MyService();
     myService.greeting = 'dynamic greet';
 
-    this.injector = Injector.create(
-        {providers: [{provide: MyService, useValue: myService}], parent: vc.injector});
+    this.injector = Injector.create({
+      providers: [{provide: MyService, useValue: myService}],
+      parent: vc.injector,
+    });
   }
 
   create(): ComponentRef<ChildCompUsingService> {
-    return this.vc.createComponent(
-        ChildCompUsingService, {index: this.vc.length, injector: this.injector});
+    return this.vc.createComponent(ChildCompUsingService, {
+      index: this.vc.length,
+      injector: this.injector,
+    });
   }
 
   insert(viewRef: ViewRef, index?: number): ViewRef {
@@ -2143,12 +2226,12 @@ class MyDir2 {
 
 @Directive({selector: '[title]', inputs: ['title']})
 class DirectiveWithTitle {
-  title: string|undefined;
+  title: string | undefined;
 }
 
 @Directive({selector: '[title]', inputs: ['title'], host: {'[title]': 'title'}})
 class DirectiveWithTitleAndHostProperty {
-  title: string|undefined;
+  title: string | undefined;
 }
 
 @Component({selector: 'event-cmp', template: '<div (click)="noop()"></div>'})
@@ -2162,7 +2245,7 @@ class EventCmp {
   host: {'(click)': 'true'},
   changeDetection: ChangeDetectionStrategy.OnPush,
   template:
-      '{{field}}<div (click)="noop()"></div><div *ngIf="true" (click)="noop()"></div><event-cmp></event-cmp>'
+    '{{field}}<div (click)="noop()"></div><div *ngIf="true" (click)="noop()"></div><event-cmp></event-cmp>',
 })
 class PushCmp {
   numberOfChecks: number;
@@ -2184,7 +2267,7 @@ class PushCmp {
   selector: 'push-cmp-with-ref',
   inputs: ['prop'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '{{field}}'
+  template: '{{field}}',
 })
 class PushCmpWithRef {
   numberOfChecks: number;
@@ -2210,7 +2293,7 @@ class PushCmpWithRef {
   selector: 'push-cmp-with-host-event',
   host: {'(click)': 'ctxCallback($event)'},
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: ''
+  template: '',
 })
 class PushCmpWithHostEvent {
   ctxCallback: Function = (_: any) => {};
@@ -2219,7 +2302,7 @@ class PushCmpWithHostEvent {
 @Component({
   selector: 'push-cmp-with-async',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '{{field | async}}'
+  template: '{{field | async}}',
 })
 class PushCmpWithAsyncPipe {
   numberOfChecks: number = 0;
@@ -2245,9 +2328,9 @@ class MyComp {
   ctxBoolProp: boolean;
   ctxArrProp: number[];
   toStringThrow = {
-    toString: function() {
+    toString: function () {
       throw 'boom';
-    }
+    },
   };
 
   constructor() {
@@ -2266,11 +2349,11 @@ class MyComp {
   selector: 'child-cmp',
   inputs: ['dirProp'],
   viewProviders: [MyService],
-  template: '{{ctxProp}}'
+  template: '{{ctxProp}}',
 })
 class ChildComp {
   ctxProp: string;
-  dirProp: string|null;
+  dirProp: string | null;
   constructor(service: MyService) {
     this.ctxProp = service.greeting;
     this.dirProp = null;
@@ -2291,8 +2374,7 @@ class ChildCompUsingService {
 }
 
 @Directive({selector: 'some-directive'})
-class SomeDirective {
-}
+class SomeDirective {}
 
 class SomeDirectiveMissingAnnotation {}
 
@@ -2310,7 +2392,7 @@ class CompWithHost {
 @Component({selector: '[child-cmp2]', viewProviders: [MyService]})
 class ChildComp2 {
   ctxProp: string;
-  dirProp: string|null;
+  dirProp: string | null;
   constructor(service: MyService) {
     this.ctxProp = service.greeting;
     this.dirProp = null;
@@ -2323,7 +2405,10 @@ class SomeViewportContext {
 
 @Directive({selector: '[some-viewport]'})
 class SomeViewport {
-  constructor(public container: ViewContainerRef, templateRef: TemplateRef<SomeViewportContext>) {
+  constructor(
+    public container: ViewContainerRef,
+    templateRef: TemplateRef<SomeViewportContext>,
+  ) {
     container.createEmbeddedView(templateRef, new SomeViewportContext('hello'));
     container.createEmbeddedView(templateRef, new SomeViewportContext('again'));
   }
@@ -2331,7 +2416,10 @@ class SomeViewport {
 
 @Directive({selector: '[pollutedContext]'})
 class PollutedContext {
-  constructor(private tplRef: TemplateRef<any>, private vcRef: ViewContainerRef) {
+  constructor(
+    private tplRef: TemplateRef<any>,
+    private vcRef: ViewContainerRef,
+  ) {
     const evRef = this.vcRef.createEmbeddedView(this.tplRef);
     evRef.context.bar = 'baz';
   }
@@ -2339,7 +2427,10 @@ class PollutedContext {
 
 @Directive({selector: '[noContext]'})
 class NoContext {
-  constructor(private tplRef: TemplateRef<any>, private vcRef: ViewContainerRef) {
+  constructor(
+    private tplRef: TemplateRef<any>,
+    private vcRef: ViewContainerRef,
+  ) {
     this.vcRef.createEmbeddedView(this.tplRef);
   }
 }
@@ -2368,8 +2459,7 @@ class DirectiveEmittingEvent {
 }
 
 @Directive({selector: '[update-host-attributes]', host: {'role': 'button'}})
-class DirectiveUpdatingHostAttributes {
-}
+class DirectiveUpdatingHostAttributes {}
 
 @Directive({selector: '[update-host-properties]', host: {'[id]': 'id'}})
 class DirectiveUpdatingHostProperties {
@@ -2399,8 +2489,8 @@ class DirectiveListeningEvent {
     '(domEvent)': 'onEvent($event.type)',
     '(window:domEvent)': 'onWindowEvent($event.type)',
     '(document:domEvent)': 'onDocumentEvent($event.type)',
-    '(body:domEvent)': 'onBodyEvent($event.type)'
-  }
+    '(body:domEvent)': 'onBodyEvent($event.type)',
+  },
 })
 class DirectiveListeningDomEvent {
   eventTypes: string[] = [];
@@ -2447,7 +2537,7 @@ class DirectiveListeningDomEventNoPrevent {
 
 @Directive({selector: '[id]', inputs: ['id']})
 class IdDir {
-  id: string|undefined;
+  id: string | undefined;
 }
 
 @Directive({selector: '[customEvent]'})
@@ -2462,8 +2552,10 @@ class NeedsAttribute {
   staticAttribute: string;
   fooAttribute: string;
   constructor(
-      @Attribute('type') typeAttribute: string, @Attribute('static') staticAttribute: string,
-      @Attribute('foo') fooAttribute: string) {
+    @Attribute('type') typeAttribute: string,
+    @Attribute('static') staticAttribute: string,
+    @Attribute('foo') fooAttribute: string,
+  ) {
     this.typeAttribute = typeAttribute;
     this.staticAttribute = staticAttribute;
     this.fooAttribute = fooAttribute;
@@ -2471,15 +2563,13 @@ class NeedsAttribute {
 }
 
 @Injectable()
-class PublicApi {
-}
+class PublicApi {}
 
 @Directive({
   selector: '[public-api]',
-  providers: [{provide: PublicApi, useExisting: PrivateImpl, deps: []}]
+  providers: [{provide: PublicApi, useExisting: PrivateImpl, deps: []}],
 })
-class PrivateImpl extends PublicApi {
-}
+class PrivateImpl extends PublicApi {}
 
 @Directive({selector: '[needs-public-api]'})
 class NeedsPublicApi {
@@ -2531,8 +2621,7 @@ class DirectiveWithTwoWayBinding {
 }
 
 @Injectable()
-class InjectableService {
-}
+class InjectableService {}
 
 function createInjectableWithLogging(inj: Injector) {
   inj.get(ComponentProvidingLoggingInjectable).created = true;
@@ -2541,36 +2630,32 @@ function createInjectableWithLogging(inj: Injector) {
 
 @Component({
   selector: 'component-providing-logging-injectable',
-  providers:
-      [{provide: InjectableService, useFactory: createInjectableWithLogging, deps: [Injector]}],
-  template: ''
+  providers: [
+    {provide: InjectableService, useFactory: createInjectableWithLogging, deps: [Injector]},
+  ],
+  template: '',
 })
 class ComponentProvidingLoggingInjectable {
   created: boolean = false;
 }
 
-
 @Directive({selector: 'directive-providing-injectable', providers: [[InjectableService]]})
-class DirectiveProvidingInjectable {
-}
+class DirectiveProvidingInjectable {}
 
 @Component({
   selector: 'directive-providing-injectable',
   viewProviders: [[InjectableService]],
-  template: ''
+  template: '',
 })
-class DirectiveProvidingInjectableInView {
-}
+class DirectiveProvidingInjectableInView {}
 
 @Component({
   selector: 'directive-providing-injectable',
   providers: [{provide: InjectableService, useValue: 'host'}],
   viewProviders: [{provide: InjectableService, useValue: 'view'}],
-  template: ''
+  template: '',
 })
-class DirectiveProvidingInjectableInHostAndView {
-}
-
+class DirectiveProvidingInjectableInHostAndView {}
 
 @Component({selector: 'directive-consuming-injectable', template: ''})
 class DirectiveConsumingInjectable {
@@ -2581,8 +2666,6 @@ class DirectiveConsumingInjectable {
   }
 }
 
-
-
 @Component({selector: 'directive-containing-directive-consuming-an-injectable'})
 class DirectiveContainingDirectiveConsumingAnInjectable {
   directive: any;
@@ -2593,14 +2676,14 @@ class DirectiveConsumingInjectableUnbounded {
   injectable: any;
 
   constructor(
-      injectable: InjectableService,
-      @SkipSelf() parent: DirectiveContainingDirectiveConsumingAnInjectable) {
+    injectable: InjectableService,
+    @SkipSelf() parent: DirectiveContainingDirectiveConsumingAnInjectable,
+  ) {
     this.injectable = injectable;
     parent.directive = this;
   }
 }
 
-
 class EventBus {
   parentEventBus: EventBus;
   name: string;
@@ -2613,7 +2696,7 @@ class EventBus {
 
 @Directive({
   selector: 'grand-parent-providing-event-bus',
-  providers: [{provide: EventBus, useValue: new EventBus(null!, 'grandparent')}]
+  providers: [{provide: EventBus, useValue: new EventBus(null!, 'grandparent')}],
 })
 class GrandParentProvidingEventBus {
   bus: EventBus;
@@ -2630,7 +2713,7 @@ function createParentBus(peb: EventBus) {
 @Component({
   selector: 'parent-providing-event-bus',
   providers: [{provide: EventBus, useFactory: createParentBus, deps: [[EventBus, new SkipSelf()]]}],
-  template: `<child-consuming-event-bus></child-consuming-event-bus>`
+  template: `<child-consuming-event-bus></child-consuming-event-bus>`,
 })
 class ParentProvidingEventBus {
   bus: EventBus;
@@ -2653,11 +2736,13 @@ class ChildConsumingEventBus {
 
 @Directive({selector: '[someImpvp]', inputs: ['someImpvp']})
 class SomeImperativeViewport {
-  view: EmbeddedViewRef<Object>|null;
+  view: EmbeddedViewRef<Object> | null;
   anchor: any;
   constructor(
-      public vc: ViewContainerRef, public templateRef: TemplateRef<Object>,
-      @Inject(ANCHOR_ELEMENT) anchor: any) {
+    public vc: ViewContainerRef,
+    public templateRef: TemplateRef<Object>,
+    @Inject(ANCHOR_ELEMENT) anchor: any,
+  ) {
     this.view = null;
     this.anchor = anchor;
   }
@@ -2679,16 +2764,13 @@ class SomeImperativeViewport {
 }
 
 @Directive({selector: '[export-dir]', exportAs: 'dir'})
-class ExportDir {
-}
+class ExportDir {}
 
 @Directive({selector: '[multiple-export-as]', exportAs: 'dirX, dirY'})
-export class DirectiveWithMultipleExportAsNames {
-}
+export class DirectiveWithMultipleExportAsNames {}
 
 @Component({selector: 'comp'})
-class ComponentWithoutView {
-}
+class ComponentWithoutView {}
 
 @Directive({selector: '[no-duplicate]'})
 class DuplicateDir {
@@ -2713,7 +2795,7 @@ class DirectiveThrowingAnError {
 
 @Component({
   selector: 'component-with-template',
-  template: `No View Decorator: <div *ngFor="let item of items">{{item}}</div>`
+  template: `No View Decorator: <div *ngFor="let item of items">{{item}}</div>`,
 })
 class ComponentWithTemplate {
   items = [1, 2, 3];
@@ -2723,10 +2805,10 @@ class ComponentWithTemplate {
 class DirectiveWithPropDecorators {
   target: any;
 
-  @Input('elProp') dirProp: string|undefined;
+  @Input('elProp') dirProp: string | undefined;
   @Output('elEvent') event = new EventEmitter();
 
-  @HostBinding('attr.my-attr') myAttr: string|undefined;
+  @HostBinding('attr.my-attr') myAttr: string | undefined;
   @HostListener('click', ['$event.target'])
   onClick(target: any) {
     this.target = target;
@@ -2759,5 +2841,5 @@ class SomeCmpWithInput {
 }
 
 function isPrevented(evt: Event): boolean {
-  return evt.defaultPrevented || evt.returnValue != null && !evt.returnValue;
+  return evt.defaultPrevented || (evt.returnValue != null && !evt.returnValue);
 }
diff --git a/packages/core/test/linker/ng_container_integration_spec.ts b/packages/core/test/linker/ng_container_integration_spec.ts
index d0bab44534671..46ff09926b02f 100644
--- a/packages/core/test/linker/ng_container_integration_spec.ts
+++ b/packages/core/test/linker/ng_container_integration_spec.ts
@@ -9,20 +9,23 @@
 // below. This would normally be done inside the application `polyfills.ts` file.
 import '@angular/localize/init';
 
-import {AfterContentInit, AfterViewInit, Component, ContentChildren, Directive, Input, QueryList, ViewChildren} from '@angular/core';
+import {
+  AfterContentInit,
+  AfterViewInit,
+  Component,
+  ContentChildren,
+  Directive,
+  Input,
+  QueryList,
+  ViewChildren,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
-describe('<ng-container>', function() {
+describe('<ng-container>', function () {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        MyComp,
-        NeedsContentChildren,
-        NeedsViewChildren,
-        TextDirective,
-        Simple,
-      ],
+      declarations: [MyComp, NeedsContentChildren, NeedsViewChildren, TextDirective, Simple],
     });
   });
 
@@ -76,13 +79,13 @@ describe('<ng-container>', function() {
 
 @Directive({selector: '[text]'})
 class TextDirective {
-  @Input() public text: string|null = null;
+  @Input() public text: string | null = null;
 }
 
 @Component({selector: 'needs-content-children', template: ''})
 class NeedsContentChildren implements AfterContentInit {
   @ContentChildren(TextDirective) textDirChildren!: QueryList<TextDirective>;
-  numberOfChildrenAfterContentInit: number|undefined;
+  numberOfChildrenAfterContentInit: number | undefined;
 
   ngAfterContentInit() {
     this.numberOfChildrenAfterContentInit = this.textDirChildren.length;
@@ -92,7 +95,7 @@ class NeedsContentChildren implements AfterContentInit {
 @Component({selector: 'needs-view-children', template: '<div text></div>'})
 class NeedsViewChildren implements AfterViewInit {
   @ViewChildren(TextDirective) textDirChildren!: QueryList<TextDirective>;
-  numberOfChildrenAfterViewInit: number|undefined;
+  numberOfChildrenAfterViewInit: number | undefined;
 
   ngAfterViewInit() {
     this.numberOfChildrenAfterViewInit = this.textDirChildren.length;
@@ -100,8 +103,7 @@ class NeedsViewChildren implements AfterViewInit {
 }
 
 @Component({selector: 'simple', template: 'SIMPLE(<ng-content></ng-content>)'})
-class Simple {
-}
+class Simple {}
 
 @Component({selector: 'my-comp', template: ''})
 class MyComp {
diff --git a/packages/core/test/linker/ng_module_integration_spec.ts b/packages/core/test/linker/ng_module_integration_spec.ts
index 2ac539c24c985..d7b7d2bf25669 100644
--- a/packages/core/test/linker/ng_module_integration_spec.ts
+++ b/packages/core/test/linker/ng_module_integration_spec.ts
@@ -6,14 +6,38 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Compiler, Component, CUSTOM_ELEMENTS_SCHEMA, Directive, forwardRef, getModuleFactory, getNgModuleById, HostBinding, Inject, Injectable, InjectionToken, Injector, Input, NgModule, NgModuleRef, Optional, Pipe, Provider, Self, Type} from '@angular/core';
+import {
+  Compiler,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  Directive,
+  forwardRef,
+  getModuleFactory,
+  getNgModuleById,
+  HostBinding,
+  Inject,
+  Injectable,
+  InjectionToken,
+  Injector,
+  Input,
+  NgModule,
+  NgModuleRef,
+  Optional,
+  Pipe,
+  Provider,
+  Self,
+  Type,
+} from '@angular/core';
 import {ɵɵdefineInjectable} from '@angular/core/src/di/interface/defs';
 import {NgModuleType} from '@angular/core/src/render3';
 import {getNgModuleDef} from '@angular/core/src/render3/definition';
 import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
 
 import {InternalNgModuleRef, NgModuleFactory} from '../../src/linker/ng_module_factory';
-import {clearModulesForTest, setAllowDuplicateNgModuleIdsForTest} from '../../src/linker/ng_module_registration';
+import {
+  clearModulesForTest,
+  setAllowDuplicateNgModuleIdsForTest,
+} from '../../src/linker/ng_module_registration';
 import {stringify} from '../../src/util/stringify';
 
 class Engine {}
@@ -53,12 +77,11 @@ class NoAnnotations {
 }
 
 @Component({selector: 'comp', template: ''})
-class SomeComp {
-}
+class SomeComp {}
 
 @Directive({selector: '[someDir]'})
 class SomeDirective {
-  @HostBinding('title') @Input() someDir: string|undefined;
+  @HostBinding('title') @Input() someDir: string | undefined;
 }
 
 @Pipe({name: 'somePipe'})
@@ -69,8 +92,7 @@ class SomePipe {
 }
 
 @Component({selector: 'comp', template: `<div  [someDir]="'someValue' | somePipe"></div>`})
-class CompUsingModuleDirectiveAndPipe {
-}
+class CompUsingModuleDirectiveAndPipe {}
 
 describe('NgModule', () => {
   let compiler: Compiler;
@@ -85,7 +107,7 @@ describe('NgModule', () => {
     return compiler.compileModuleSync(moduleType);
   }
 
-  function createModule<T>(moduleType: Type<T>, parentInjector?: Injector|null): NgModuleRef<T> {
+  function createModule<T>(moduleType: Type<T>, parentInjector?: Injector | null): NgModuleRef<T> {
     // Read the `ngModuleDef` to cause it to be compiled and any errors thrown.
     getNgModuleDef(moduleType);
     return createModuleFactory(moduleType).create(parentInjector || null);
@@ -109,121 +131,118 @@ describe('NgModule', () => {
   describe('errors', () => {
     it('should error when exporting a directive that was neither declared nor imported', () => {
       @NgModule({exports: [SomeDirective]})
-      class SomeModule {
-      }
+      class SomeModule {}
 
-      expect(() => createModule(SomeModule))
-          .toThrowError(`Can't export directive ${stringify(SomeDirective)} from ${
-              stringify(SomeModule)} as it was neither declared nor imported!`);
+      expect(() => createModule(SomeModule)).toThrowError(
+        `Can't export directive ${stringify(SomeDirective)} from ${stringify(
+          SomeModule,
+        )} as it was neither declared nor imported!`,
+      );
     });
 
     it('should error when exporting a pipe that was neither declared nor imported', () => {
       @NgModule({exports: [SomePipe]})
-      class SomeModule {
-      }
+      class SomeModule {}
 
-      expect(() => createModule(SomeModule))
-          .toThrowError(`Can't export pipe ${stringify(SomePipe)} from ${
-              stringify(SomeModule)} as it was neither declared nor imported!`);
+      expect(() => createModule(SomeModule)).toThrowError(
+        `Can't export pipe ${stringify(SomePipe)} from ${stringify(
+          SomeModule,
+        )} as it was neither declared nor imported!`,
+      );
     });
 
     it('should error if a directive is declared in more than 1 module', () => {
       @NgModule({declarations: [SomeDirective]})
-      class Module1 {
-      }
+      class Module1 {}
 
       @NgModule({declarations: [SomeDirective]})
-      class Module2 {
-      }
+      class Module2 {}
 
       createModule(Module1);
 
-      expect(() => createModule(Module2))
-          .toThrowError(
-              `Type ${stringify(SomeDirective)} is part of the declarations of 2 modules: ${
-                  stringify(Module1)} and ${stringify(Module2)}! ` +
-              `Please consider moving ${stringify(SomeDirective)} to a higher module that imports ${
-                  stringify(Module1)} and ${stringify(Module2)}. ` +
-              `You can also create a new NgModule that exports and includes ${
-                  stringify(SomeDirective)} then import that NgModule in ${
-                  stringify(Module1)} and ${stringify(Module2)}.`);
+      expect(() => createModule(Module2)).toThrowError(
+        `Type ${stringify(SomeDirective)} is part of the declarations of 2 modules: ${stringify(
+          Module1,
+        )} and ${stringify(Module2)}! ` +
+          `Please consider moving ${stringify(SomeDirective)} to a higher module that imports ${stringify(
+            Module1,
+          )} and ${stringify(Module2)}. ` +
+          `You can also create a new NgModule that exports and includes ${stringify(
+            SomeDirective,
+          )} then import that NgModule in ${stringify(Module1)} and ${stringify(Module2)}.`,
+      );
     });
 
-    it('should error if a directive is declared in more than 1 module also if the module declaring it is imported',
-       () => {
-         @NgModule({declarations: [SomeDirective], exports: [SomeDirective]})
-         class Module1 {
-         }
-
-         @NgModule({declarations: [SomeDirective], imports: [Module1]})
-         class Module2 {
-         }
-
-         expect(() => createModule(Module2))
-             .toThrowError(
-                 `Type ${stringify(SomeDirective)} is part of the declarations of 2 modules: ${
-                     stringify(Module1)} and ${stringify(Module2)}! ` +
-                 `Please consider moving ${
-                     stringify(SomeDirective)} to a higher module that imports ${
-                     stringify(Module1)} and ${stringify(Module2)}. ` +
-                 `You can also create a new NgModule that exports and includes ${
-                     stringify(SomeDirective)} then import that NgModule in ${
-                     stringify(Module1)} and ${stringify(Module2)}.`);
-       });
+    it('should error if a directive is declared in more than 1 module also if the module declaring it is imported', () => {
+      @NgModule({declarations: [SomeDirective], exports: [SomeDirective]})
+      class Module1 {}
+
+      @NgModule({declarations: [SomeDirective], imports: [Module1]})
+      class Module2 {}
+
+      expect(() => createModule(Module2)).toThrowError(
+        `Type ${stringify(SomeDirective)} is part of the declarations of 2 modules: ${stringify(
+          Module1,
+        )} and ${stringify(Module2)}! ` +
+          `Please consider moving ${stringify(
+            SomeDirective,
+          )} to a higher module that imports ${stringify(Module1)} and ${stringify(Module2)}. ` +
+          `You can also create a new NgModule that exports and includes ${stringify(
+            SomeDirective,
+          )} then import that NgModule in ${stringify(Module1)} and ${stringify(Module2)}.`,
+      );
+    });
 
     it('should error if a pipe is declared in more than 1 module', () => {
       @NgModule({declarations: [SomePipe]})
-      class Module1 {
-      }
+      class Module1 {}
 
       @NgModule({declarations: [SomePipe]})
-      class Module2 {
-      }
+      class Module2 {}
 
       createModule(Module1);
 
-      expect(() => createModule(Module2))
-          .toThrowError(
-              `Type ${stringify(SomePipe)} is part of the declarations of 2 modules: ${
-                  stringify(Module1)} and ${stringify(Module2)}! ` +
-              `Please consider moving ${stringify(SomePipe)} to a higher module that imports ${
-                  stringify(Module1)} and ${stringify(Module2)}. ` +
-              `You can also create a new NgModule that exports and includes ${
-                  stringify(SomePipe)} then import that NgModule in ${stringify(Module1)} and ${
-                  stringify(Module2)}.`);
+      expect(() => createModule(Module2)).toThrowError(
+        `Type ${stringify(SomePipe)} is part of the declarations of 2 modules: ${stringify(
+          Module1,
+        )} and ${stringify(Module2)}! ` +
+          `Please consider moving ${stringify(SomePipe)} to a higher module that imports ${stringify(
+            Module1,
+          )} and ${stringify(Module2)}. ` +
+          `You can also create a new NgModule that exports and includes ${stringify(
+            SomePipe,
+          )} then import that NgModule in ${stringify(Module1)} and ${stringify(Module2)}.`,
+      );
     });
 
-    it('should error if a pipe is declared in more than 1 module also if the module declaring it is imported',
-       () => {
-         @NgModule({declarations: [SomePipe], exports: [SomePipe]})
-         class Module1 {
-         }
-
-         @NgModule({declarations: [SomePipe], imports: [Module1]})
-         class Module2 {
-         }
-
-         expect(() => createModule(Module2))
-             .toThrowError(
-                 `Type ${stringify(SomePipe)} is part of the declarations of 2 modules: ${
-                     stringify(Module1)} and ${stringify(Module2)}! ` +
-                 `Please consider moving ${stringify(SomePipe)} to a higher module that imports ${
-                     stringify(Module1)} and ${stringify(Module2)}. ` +
-                 `You can also create a new NgModule that exports and includes ${
-                     stringify(SomePipe)} then import that NgModule in ${stringify(Module1)} and ${
-                     stringify(Module2)}.`);
-       });
+    it('should error if a pipe is declared in more than 1 module also if the module declaring it is imported', () => {
+      @NgModule({declarations: [SomePipe], exports: [SomePipe]})
+      class Module1 {}
+
+      @NgModule({declarations: [SomePipe], imports: [Module1]})
+      class Module2 {}
+
+      expect(() => createModule(Module2)).toThrowError(
+        `Type ${stringify(SomePipe)} is part of the declarations of 2 modules: ${stringify(
+          Module1,
+        )} and ${stringify(Module2)}! ` +
+          `Please consider moving ${stringify(SomePipe)} to a higher module that imports ${stringify(
+            Module1,
+          )} and ${stringify(Module2)}. ` +
+          `You can also create a new NgModule that exports and includes ${stringify(
+            SomePipe,
+          )} then import that NgModule in ${stringify(Module1)} and ${stringify(Module2)}.`,
+      );
+    });
   });
 
   describe('schemas', () => {
     it('should error on unknown bound properties on custom elements by default', () => {
       @Component({template: '<div [someUnknownProp]="true"></div>'})
-      class ComponentUsingInvalidProperty {
-      }
+      class ComponentUsingInvalidProperty {}
 
       @NgModule({declarations: [ComponentUsingInvalidProperty]})
-      class SomeModule {
-      }
+      class SomeModule {}
 
       const spy = spyOn(console, 'error');
       const fixture = createComp(ComponentUsingInvalidProperty, SomeModule);
@@ -231,24 +250,21 @@ describe('NgModule', () => {
       expect(spy.calls.mostRecent().args[0]).toMatch(/Can't bind to 'someUnknownProp'/);
     });
 
-    it('should not error on unknown bound properties on custom elements when using the CUSTOM_ELEMENTS_SCHEMA',
-       () => {
-         @Component({template: '<some-element [someUnknownProp]="true"></some-element>'})
-         class ComponentUsingInvalidProperty {
-         }
-
-         @NgModule({
-           schemas: [CUSTOM_ELEMENTS_SCHEMA],
-           declarations: [ComponentUsingInvalidProperty],
-         })
-         class SomeModule {
-         }
-
-         expect(() => {
-           const fixture = createComp(ComponentUsingInvalidProperty, SomeModule);
-           fixture.detectChanges();
-         }).not.toThrow();
-       });
+    it('should not error on unknown bound properties on custom elements when using the CUSTOM_ELEMENTS_SCHEMA', () => {
+      @Component({template: '<some-element [someUnknownProp]="true"></some-element>'})
+      class ComponentUsingInvalidProperty {}
+
+      @NgModule({
+        schemas: [CUSTOM_ELEMENTS_SCHEMA],
+        declarations: [ComponentUsingInvalidProperty],
+      })
+      class SomeModule {}
+
+      expect(() => {
+        const fixture = createComp(ComponentUsingInvalidProperty, SomeModule);
+        fixture.detectChanges();
+      }).not.toThrow();
+    });
   });
 
   describe('id', () => {
@@ -258,8 +274,7 @@ describe('NgModule', () => {
 
     it('should register loaded modules', () => {
       @NgModule({id: token})
-      class SomeModule {
-      }
+      class SomeModule {}
       createModule(SomeModule);
 
       const moduleType = getNgModuleById(token);
@@ -276,13 +291,11 @@ describe('NgModule', () => {
       setAllowDuplicateNgModuleIdsForTest(false);
 
       @NgModule({id: token})
-      class SomeModule {
-      }
+      class SomeModule {}
       createModule(SomeModule);
       expect(() => {
         @NgModule({id: token})
-        class SomeOtherModule {
-        }
+        class SomeOtherModule {}
         createModule(SomeOtherModule);
       }).toThrowError(/Duplicate module registered/);
 
@@ -290,44 +303,40 @@ describe('NgModule', () => {
       setAllowDuplicateNgModuleIdsForTest(true);
     });
 
-    it('should register a module even if not importing the .ngfactory file or calling create()',
-       () => {
-         @NgModule({id: 'child'})
-         class ChildModule {
-         }
-
-         @NgModule({
-           id: 'test',
-           imports: [ChildModule],
-         })
-         class Module {
-         }
-
-         // Verify that we can retrieve NgModule factory by id.
-         expect(getModuleFactory('child')).toBeInstanceOf(NgModuleFactory);
-
-         // Verify that we can also retrieve NgModule class by id.
-         const moduleType = getNgModuleById('child');
-         expect(moduleType).toBeTruthy();
-         expect(moduleType).toBe(ChildModule as NgModuleType);
-       });
+    it('should register a module even if not importing the .ngfactory file or calling create()', () => {
+      @NgModule({id: 'child'})
+      class ChildModule {}
+
+      @NgModule({
+        id: 'test',
+        imports: [ChildModule],
+      })
+      class Module {}
+
+      // Verify that we can retrieve NgModule factory by id.
+      expect(getModuleFactory('child')).toBeInstanceOf(NgModuleFactory);
+
+      // Verify that we can also retrieve NgModule class by id.
+      const moduleType = getNgModuleById('child');
+      expect(moduleType).toBeTruthy();
+      expect(moduleType).toBe(ChildModule as NgModuleType);
+    });
   });
 
   describe('bootstrap components', () => {
     it('should create ComponentFactories', () => {
       @NgModule({declarations: [SomeComp], bootstrap: [SomeComp]})
-      class SomeModule {
-      }
+      class SomeModule {}
 
       const ngModule = createModule(SomeModule);
-      expect(ngModule.componentFactoryResolver.resolveComponentFactory(SomeComp).componentType)
-          .toBe(SomeComp);
+      expect(
+        ngModule.componentFactoryResolver.resolveComponentFactory(SomeComp).componentType,
+      ).toBe(SomeComp);
     });
 
     it('should store the ComponentFactories in the NgModuleInjector', () => {
       @NgModule({declarations: [SomeComp], bootstrap: [SomeComp]})
-      class SomeModule {
-      }
+      class SomeModule {}
 
       const ngModule = <InternalNgModuleRef<any>>createModule(SomeModule);
       expect(ngModule._bootstrapComponents.length).toBe(1);
@@ -339,157 +348,143 @@ describe('NgModule', () => {
     describe('declarations', () => {
       it('should be supported in root modules', () => {
         @NgModule({declarations: [CompUsingModuleDirectiveAndPipe, SomeDirective, SomePipe]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const compFixture = createComp(CompUsingModuleDirectiveAndPipe, SomeModule);
 
         compFixture.detectChanges();
-        expect(compFixture.debugElement.children[0].properties['title'])
-            .toBe('transformed someValue');
+        expect(compFixture.debugElement.children[0].properties['title']).toBe(
+          'transformed someValue',
+        );
       });
 
       it('should be supported in imported modules', () => {
         @NgModule({declarations: [CompUsingModuleDirectiveAndPipe, SomeDirective, SomePipe]})
-        class SomeImportedModule {
-        }
+        class SomeImportedModule {}
 
         @NgModule({imports: [SomeImportedModule]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const compFixture = createComp(CompUsingModuleDirectiveAndPipe, SomeModule);
         compFixture.detectChanges();
-        expect(compFixture.debugElement.children[0].properties['title'])
-            .toBe('transformed someValue');
+        expect(compFixture.debugElement.children[0].properties['title']).toBe(
+          'transformed someValue',
+        );
       });
 
-
       it('should be supported in nested components', () => {
         @Component({
           selector: 'parent',
           template: '<comp></comp>',
         })
-        class ParentCompUsingModuleDirectiveAndPipe {
-        }
+        class ParentCompUsingModuleDirectiveAndPipe {}
 
         @NgModule({
           declarations: [
-            ParentCompUsingModuleDirectiveAndPipe, CompUsingModuleDirectiveAndPipe, SomeDirective,
-            SomePipe
-          ]
+            ParentCompUsingModuleDirectiveAndPipe,
+            CompUsingModuleDirectiveAndPipe,
+            SomeDirective,
+            SomePipe,
+          ],
         })
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const compFixture = createComp(ParentCompUsingModuleDirectiveAndPipe, SomeModule);
         compFixture.detectChanges();
-        expect(compFixture.debugElement.children[0].children[0].properties['title'])
-            .toBe('transformed someValue');
+        expect(compFixture.debugElement.children[0].children[0].properties['title']).toBe(
+          'transformed someValue',
+        );
       });
     });
 
     describe('import/export', () => {
       it('should support exported directives and pipes', () => {
         @NgModule({declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
-        class SomeImportedModule {
-        }
+        class SomeImportedModule {}
 
         @NgModule({declarations: [CompUsingModuleDirectiveAndPipe], imports: [SomeImportedModule]})
-        class SomeModule {
-        }
-
+        class SomeModule {}
 
         const compFixture = createComp(CompUsingModuleDirectiveAndPipe, SomeModule);
         compFixture.detectChanges();
-        expect(compFixture.debugElement.children[0].properties['title'])
-            .toBe('transformed someValue');
+        expect(compFixture.debugElement.children[0].properties['title']).toBe(
+          'transformed someValue',
+        );
       });
 
-      it('should support exported directives and pipes if the module is wrapped into an `ModuleWithProviders`',
-         () => {
-           @NgModule({declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
-           class SomeImportedModule {
-           }
-
-           @NgModule({
-             declarations: [CompUsingModuleDirectiveAndPipe],
-             imports: [{ngModule: SomeImportedModule}]
-           })
-           class SomeModule {
-           }
+      it('should support exported directives and pipes if the module is wrapped into an `ModuleWithProviders`', () => {
+        @NgModule({declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
+        class SomeImportedModule {}
 
+        @NgModule({
+          declarations: [CompUsingModuleDirectiveAndPipe],
+          imports: [{ngModule: SomeImportedModule}],
+        })
+        class SomeModule {}
 
-           const compFixture = createComp(CompUsingModuleDirectiveAndPipe, SomeModule);
-           compFixture.detectChanges();
-           expect(compFixture.debugElement.children[0].properties['title'])
-               .toBe('transformed someValue');
-         });
+        const compFixture = createComp(CompUsingModuleDirectiveAndPipe, SomeModule);
+        compFixture.detectChanges();
+        expect(compFixture.debugElement.children[0].properties['title']).toBe(
+          'transformed someValue',
+        );
+      });
 
       it('should support reexported modules', () => {
         @NgModule({declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
-        class SomeReexportedModule {
-        }
+        class SomeReexportedModule {}
 
         @NgModule({exports: [SomeReexportedModule]})
-        class SomeImportedModule {
-        }
+        class SomeImportedModule {}
 
         @NgModule({declarations: [CompUsingModuleDirectiveAndPipe], imports: [SomeImportedModule]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const compFixture = createComp(CompUsingModuleDirectiveAndPipe, SomeModule);
         compFixture.detectChanges();
-        expect(compFixture.debugElement.children[0].properties['title'])
-            .toBe('transformed someValue');
+        expect(compFixture.debugElement.children[0].properties['title']).toBe(
+          'transformed someValue',
+        );
       });
 
       it('should support exporting individual directives of an imported module', () => {
         @NgModule({declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
-        class SomeReexportedModule {
-        }
+        class SomeReexportedModule {}
 
         @NgModule({imports: [SomeReexportedModule], exports: [SomeDirective, SomePipe]})
-        class SomeImportedModule {
-        }
+        class SomeImportedModule {}
 
         @NgModule({declarations: [CompUsingModuleDirectiveAndPipe], imports: [SomeImportedModule]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const compFixture = createComp(CompUsingModuleDirectiveAndPipe, SomeModule);
         compFixture.detectChanges();
-        expect(compFixture.debugElement.children[0].properties['title'])
-            .toBe('transformed someValue');
+        expect(compFixture.debugElement.children[0].properties['title']).toBe(
+          'transformed someValue',
+        );
       });
 
       it('should not use non exported pipes of an imported module', () => {
         @NgModule({
           declarations: [SomePipe],
         })
-        class SomeImportedModule {
-        }
+        class SomeImportedModule {}
 
         @NgModule({declarations: [CompUsingModuleDirectiveAndPipe], imports: [SomeImportedModule]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
-        expect(() => createComp(CompUsingModuleDirectiveAndPipe, SomeModule))
-            .toThrowError(/The pipe 'somePipe' could not be found/);
+        expect(() => createComp(CompUsingModuleDirectiveAndPipe, SomeModule)).toThrowError(
+          /The pipe 'somePipe' could not be found/,
+        );
       });
     });
   });
 
-
-  describe('providers', function() {
+  describe('providers', function () {
     let moduleType: any = null;
 
-
-    function createInjector(providers: Provider[], parent?: Injector|null): Injector {
+    function createInjector(providers: Provider[], parent?: Injector | null): Injector {
       @NgModule({providers: providers})
-      class SomeModule {
-      }
+      class SomeModule {}
 
       moduleType = SomeModule;
 
@@ -524,8 +519,9 @@ describe('NgModule', () => {
     });
 
     it('should throw when no type and not @Inject (class case)', () => {
-      expect(() => createInjector([NoAnnotations]))
-          .toThrowError('NG0204: Can\'t resolve all parameters for NoAnnotations: (?).');
+      expect(() => createInjector([NoAnnotations])).toThrowError(
+        "NG0204: Can't resolve all parameters for NoAnnotations: (?).",
+      );
     });
 
     it('should cache instances', () => {
@@ -549,8 +545,10 @@ describe('NgModule', () => {
         return new SportsCar(e);
       }
 
-      const injector =
-          createInjector([Engine, {provide: Car, useFactory: sportsCarFactory, deps: [Engine]}]);
+      const injector = createInjector([
+        Engine,
+        {provide: Car, useFactory: sportsCarFactory, deps: [Engine]},
+      ]);
 
       const car = injector.get(Car);
       expect(car).toBeInstanceOf(SportsCar);
@@ -565,7 +563,9 @@ describe('NgModule', () => {
 
     it('should provide to an alias', () => {
       const injector = createInjector([
-        Engine, {provide: SportsCar, useClass: SportsCar}, {provide: Car, useExisting: SportsCar}
+        Engine,
+        {provide: SportsCar, useClass: SportsCar},
+        {provide: Car, useExisting: SportsCar},
       ]);
 
       const car = injector.get(Car);
@@ -576,8 +576,9 @@ describe('NgModule', () => {
 
     it('should support multiProviders', () => {
       const injector = createInjector([
-        Engine, {provide: CARS, useClass: SportsCar, multi: true},
-        {provide: CARS, useClass: CarWithOptionalEngine, multi: true}
+        Engine,
+        {provide: CARS, useClass: SportsCar, multi: true},
+        {provide: CARS, useClass: CarWithOptionalEngine, multi: true},
       ]);
 
       const cars = injector.get(CARS);
@@ -587,8 +588,11 @@ describe('NgModule', () => {
     });
 
     it('should support multiProviders that are created using useExisting', () => {
-      const injector =
-          createInjector([Engine, SportsCar, {provide: CARS, useExisting: SportsCar, multi: true}]);
+      const injector = createInjector([
+        Engine,
+        SportsCar,
+        {provide: CARS, useExisting: SportsCar, multi: true},
+      ]);
 
       const cars = injector.get(CARS);
       expect(cars.length).toEqual(1);
@@ -597,22 +601,25 @@ describe('NgModule', () => {
 
     it('should throw when the aliased provider does not exist', () => {
       const injector = createInjector([{provide: 'car', useExisting: SportsCar}]);
-      const errorMsg = `R3InjectorError(SomeModule)[car -> ${stringify(SportsCar)}]: \n  ` +
-          `NullInjectorError: No provider for ${stringify(SportsCar)}!`;
+      const errorMsg =
+        `R3InjectorError(SomeModule)[car -> ${stringify(SportsCar)}]: \n  ` +
+        `NullInjectorError: No provider for ${stringify(SportsCar)}!`;
       expect(() => injector.get('car')).toThrowError(errorMsg);
     });
 
     it('should handle forwardRef in useExisting', () => {
       const injector = createInjector([
         {provide: 'originalEngine', useClass: forwardRef(() => Engine)},
-        {provide: 'aliasedEngine', useExisting: <any>forwardRef(() => 'originalEngine')}
+        {provide: 'aliasedEngine', useExisting: <any>forwardRef(() => 'originalEngine')},
       ]);
       expect(injector.get('aliasedEngine')).toBeInstanceOf(Engine);
     });
 
     it('should support overriding factory dependencies', () => {
-      const injector = createInjector(
-          [Engine, {provide: Car, useFactory: (e: Engine) => new SportsCar(e), deps: [Engine]}]);
+      const injector = createInjector([
+        Engine,
+        {provide: Car, useFactory: (e: Engine) => new SportsCar(e), deps: [Engine]},
+      ]);
 
       const car = injector.get(Car);
       expect(car).toBeInstanceOf(SportsCar);
@@ -634,8 +641,10 @@ describe('NgModule', () => {
     });
 
     it('should use the last provider when there are multiple providers for same token', () => {
-      const injector = createInjector(
-          [{provide: Engine, useClass: Engine}, {provide: Engine, useClass: TurboEngine}]);
+      const injector = createInjector([
+        {provide: Engine, useClass: Engine},
+        {provide: Engine, useClass: TurboEngine},
+      ]);
 
       expect(injector.get(Engine)).toBeInstanceOf(TurboEngine);
     });
@@ -647,15 +656,15 @@ describe('NgModule', () => {
     });
 
     it('should throw when given invalid providers', () => {
-      expect(() => createInjector(<any>['blah']))
-          .toThrowError(
-              `Invalid provider for the NgModule 'SomeModule' - only instances of Provider and Type are allowed, got: [?blah?]`);
+      expect(() => createInjector(<any>['blah'])).toThrowError(
+        `Invalid provider for the NgModule 'SomeModule' - only instances of Provider and Type are allowed, got: [?blah?]`,
+      );
     });
 
     it('should throw when given blank providers', () => {
-      expect(() => createInjector(<any>[null, {provide: 'token', useValue: 'value'}]))
-          .toThrowError(
-              `Invalid provider for the NgModule 'SomeModule' - only instances of Provider and Type are allowed, got: [?null?, ...]`);
+      expect(() => createInjector(<any>[null, {provide: 'token', useValue: 'value'}])).toThrowError(
+        `Invalid provider for the NgModule 'SomeModule' - only instances of Provider and Type are allowed, got: [?null?, ...]`,
+      );
     });
 
     it('should provide itself', () => {
@@ -668,13 +677,15 @@ describe('NgModule', () => {
     it('should provide undefined', () => {
       let factoryCounter = 0;
 
-      const injector = createInjector([{
-        provide: 'token',
-        useFactory: () => {
-          factoryCounter++;
-          return undefined;
-        }
-      }]);
+      const injector = createInjector([
+        {
+          provide: 'token',
+          useFactory: () => {
+            factoryCounter++;
+            return undefined;
+          },
+        },
+      ]);
 
       expect(injector.get('token')).toBeUndefined();
       expect(injector.get('token')).toBeUndefined();
@@ -689,9 +700,9 @@ describe('NgModule', () => {
             {
               provide: 'eager',
               useFactory: (i: Injector) => `eagerValue: ${i.get('lazy')}`,
-              deps: [Injector]
+              deps: [Injector],
             },
-          ]
+          ],
         })
         class MyModule {
           // NgModule is eager, which makes all of its deps eager
@@ -707,10 +718,10 @@ describe('NgModule', () => {
             {
               provide: 'eager',
               useFactory: (i: Injector) => `eagerValue: ${i.get('lazy')}`,
-              deps: [Injector]
+              deps: [Injector],
             },
             {provide: 'lazy', useFactory: () => 'lazyValue'},
-          ]
+          ],
         })
         class MyModule {
           // NgModule is eager, which makes all of its deps eager
@@ -729,9 +740,9 @@ describe('NgModule', () => {
             {
               provide: 'eager2',
               useFactory: (i: Injector) => `v2: ${i.get('eager1')}`,
-              deps: [Injector]
+              deps: [Injector],
             },
-          ]
+          ],
         })
         class MyModule {
           // NgModule is eager, which makes all of its deps eager
@@ -747,10 +758,10 @@ describe('NgModule', () => {
             {
               provide: 'eager1',
               useFactory: (i: Injector) => `v1: ${i.get('eager2')}`,
-              deps: [Injector]
+              deps: [Injector],
             },
             {provide: 'eager2', useFactory: () => 'v2'},
-          ]
+          ],
         })
         class MyModule {
           // NgModule is eager, which makes all of its deps eager
@@ -779,7 +790,10 @@ describe('NgModule', () => {
           providers: [MyService1, MyService2],
         })
         class TestModule {
-          constructor(public service1: MyService1, public service2: MyService2) {}
+          constructor(
+            public service1: MyService1,
+            public service2: MyService2,
+          ) {}
         }
 
         const moduleRef = createModule(TestModule, injector);
@@ -792,14 +806,16 @@ describe('NgModule', () => {
 
     it('should throw when no provider defined', () => {
       const injector = createInjector([]);
-      const errorMsg = `R3InjectorError(SomeModule)[NonExisting]: \n  ` +
-          'NullInjectorError: No provider for NonExisting!';
+      const errorMsg =
+        `R3InjectorError(SomeModule)[NonExisting]: \n  ` +
+        'NullInjectorError: No provider for NonExisting!';
       expect(() => injector.get('NonExisting')).toThrowError(errorMsg);
     });
 
     it('should throw when trying to instantiate a cyclic dependency', () => {
-      expect(() => createInjector([Car, {provide: Engine, useClass: CyclicEngine}]).get(Car))
-          .toThrowError(/NG0200: Circular dependency in DI detected for Car/g);
+      expect(() =>
+        createInjector([Car, {provide: Engine, useClass: CyclicEngine}]).get(Car),
+      ).toThrowError(/NG0200: Circular dependency in DI detected for Car/g);
     });
 
     it('should support null values', () => {
@@ -807,7 +823,6 @@ describe('NgModule', () => {
       expect(injector.get('null')).toBe(null);
     });
 
-
     describe('child', () => {
       it('should load instances from parent injector', () => {
         const parent = createInjector([Engine]);
@@ -819,14 +834,13 @@ describe('NgModule', () => {
         expect(engineFromChild).toBe(engineFromParent);
       });
 
-      it('should not use the child providers when resolving the dependencies of a parent provider',
-         () => {
-           const parent = createInjector([Car, Engine]);
-           const child = createInjector([{provide: Engine, useClass: TurboEngine}], parent);
+      it('should not use the child providers when resolving the dependencies of a parent provider', () => {
+        const parent = createInjector([Car, Engine]);
+        const child = createInjector([{provide: Engine, useClass: TurboEngine}], parent);
 
-           const carFromChild = child.get(Car);
-           expect(carFromChild.engine).toBeInstanceOf(Engine);
-         });
+        const carFromChild = child.get(Car);
+        expect(carFromChild.engine).toBeInstanceOf(Engine);
+      });
 
       it('should create new instance in a child injector', () => {
         const parent = createInjector([Engine]);
@@ -845,7 +859,7 @@ describe('NgModule', () => {
         it('should return a dependency from self', () => {
           const inj = createInjector([
             Engine,
-            {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [[Engine, new Self()]]}
+            {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [[Engine, new Self()]]},
           ]);
 
           expect(inj.get(Car)).toBeInstanceOf(Car);
@@ -856,11 +870,12 @@ describe('NgModule', () => {
         it('should not skip self', () => {
           const parent = createInjector([Engine]);
           const child = createInjector(
-              [
-                {provide: Engine, useClass: TurboEngine},
-                {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [Engine]}
-              ],
-              parent);
+            [
+              {provide: Engine, useClass: TurboEngine},
+              {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [Engine]},
+            ],
+            parent,
+          );
 
           expect(child.get(Car).engine).toBeInstanceOf(TurboEngine);
         });
@@ -879,8 +894,7 @@ describe('NgModule', () => {
         }
 
         @NgModule({imports: [ImportedModule]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         createModule(SomeModule);
 
@@ -890,13 +904,15 @@ describe('NgModule', () => {
       it('should instantiate providers that are not used by a module lazily', () => {
         let created = false;
 
-        createInjector([{
-          provide: 'someToken',
-          useFactory: () => {
-            created = true;
-            return true;
-          }
-        }]);
+        createInjector([
+          {
+            provide: 'someToken',
+            useFactory: () => {
+              created = true;
+              return true;
+            },
+          },
+        ]);
 
         expect(created).toBe(false);
       });
@@ -936,8 +952,7 @@ describe('NgModule', () => {
         }
 
         @NgModule({providers: [SomeInjectable]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         let moduleRef = createModule(SomeModule);
         expect(created).toBe(false);
@@ -959,12 +974,10 @@ describe('NgModule', () => {
     describe('imported and exported modules', () => {
       it('should add the providers of imported modules', () => {
         @NgModule({providers: [{provide: 'token1', useValue: 'imported'}]})
-        class ImportedModule {
-        }
+        class ImportedModule {}
 
         @NgModule({imports: [ImportedModule]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const injector = createModule(SomeModule).injector;
 
@@ -973,18 +986,16 @@ describe('NgModule', () => {
         expect(injector.get('token1')).toBe('imported');
       });
 
-
       it('should add the providers of imported ModuleWithProviders', () => {
         @NgModule()
-        class ImportedModule {
-        }
+        class ImportedModule {}
 
         @NgModule({
-          imports:
-              [{ngModule: ImportedModule, providers: [{provide: 'token1', useValue: 'imported'}]}]
+          imports: [
+            {ngModule: ImportedModule, providers: [{provide: 'token1', useValue: 'imported'}]},
+          ],
         })
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const injector = createModule(SomeModule).injector;
 
@@ -995,30 +1006,26 @@ describe('NgModule', () => {
 
       it('should overwrite the providers of imported modules', () => {
         @NgModule({providers: [{provide: 'token1', useValue: 'imported'}]})
-        class ImportedModule {
-        }
+        class ImportedModule {}
 
         @NgModule({providers: [{provide: 'token1', useValue: 'direct'}], imports: [ImportedModule]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const injector = createModule(SomeModule).injector;
         expect(injector.get('token1')).toBe('direct');
       });
 
-
       it('should overwrite the providers of imported ModuleWithProviders', () => {
         @NgModule()
-        class ImportedModule {
-        }
+        class ImportedModule {}
 
         @NgModule({
           providers: [{provide: 'token1', useValue: 'direct'}],
-          imports:
-              [{ngModule: ImportedModule, providers: [{provide: 'token1', useValue: 'imported'}]}]
+          imports: [
+            {ngModule: ImportedModule, providers: [{provide: 'token1', useValue: 'imported'}]},
+          ],
         })
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const injector = createModule(SomeModule).injector;
         expect(injector.get('token1')).toBe('direct');
@@ -1026,17 +1033,16 @@ describe('NgModule', () => {
 
       it('should overwrite the providers of imported modules on the second import level', () => {
         @NgModule({providers: [{provide: 'token1', useValue: 'imported'}]})
-        class ImportedModuleLevel2 {
-        }
+        class ImportedModuleLevel2 {}
 
-        @NgModule(
-            {providers: [{provide: 'token1', useValue: 'direct'}], imports: [ImportedModuleLevel2]})
-        class ImportedModuleLevel1 {
-        }
+        @NgModule({
+          providers: [{provide: 'token1', useValue: 'direct'}],
+          imports: [ImportedModuleLevel2],
+        })
+        class ImportedModuleLevel1 {}
 
         @NgModule({imports: [ImportedModuleLevel1]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const injector = createModule(SomeModule).injector;
         expect(injector.get('token1')).toBe('direct');
@@ -1044,12 +1050,10 @@ describe('NgModule', () => {
 
       it('should add the providers of exported modules', () => {
         @NgModule({providers: [{provide: 'token1', useValue: 'exported'}]})
-        class ExportedValue {
-        }
+        class ExportedValue {}
 
         @NgModule({exports: [ExportedValue]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const injector = createModule(SomeModule).injector;
 
@@ -1060,12 +1064,10 @@ describe('NgModule', () => {
 
       it('should overwrite the providers of exported modules', () => {
         @NgModule({providers: [{provide: 'token1', useValue: 'exported'}]})
-        class ExportedModule {
-        }
+        class ExportedModule {}
 
         @NgModule({providers: [{provide: 'token1', useValue: 'direct'}], exports: [ExportedModule]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const injector = createModule(SomeModule).injector;
         expect(injector.get('token1')).toBe('direct');
@@ -1073,16 +1075,13 @@ describe('NgModule', () => {
 
       it('should overwrite the providers of imported modules by following imported modules', () => {
         @NgModule({providers: [{provide: 'token1', useValue: 'imported1'}]})
-        class ImportedModule1 {
-        }
+        class ImportedModule1 {}
 
         @NgModule({providers: [{provide: 'token1', useValue: 'imported2'}]})
-        class ImportedModule2 {
-        }
+        class ImportedModule2 {}
 
         @NgModule({imports: [ImportedModule1, ImportedModule2]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const injector = createModule(SomeModule).injector;
         expect(injector.get('token1')).toBe('imported2');
@@ -1090,16 +1089,13 @@ describe('NgModule', () => {
 
       it('should overwrite the providers of exported modules by following exported modules', () => {
         @NgModule({providers: [{provide: 'token1', useValue: 'exported1'}]})
-        class ExportedModule1 {
-        }
+        class ExportedModule1 {}
 
         @NgModule({providers: [{provide: 'token1', useValue: 'exported2'}]})
-        class ExportedModule2 {
-        }
+        class ExportedModule2 {}
 
         @NgModule({exports: [ExportedModule1, ExportedModule2]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const injector = createModule(SomeModule).injector;
         expect(injector.get('token1')).toBe('exported2');
@@ -1107,55 +1103,44 @@ describe('NgModule', () => {
 
       it('should overwrite the providers of imported modules by exported modules', () => {
         @NgModule({providers: [{provide: 'token1', useValue: 'imported'}]})
-        class ImportedModule {
-        }
+        class ImportedModule {}
 
         @NgModule({providers: [{provide: 'token1', useValue: 'exported'}]})
-        class ExportedModule {
-        }
+        class ExportedModule {}
 
         @NgModule({imports: [ImportedModule], exports: [ExportedModule]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const injector = createModule(SomeModule).injector;
         expect(injector.get('token1')).toBe('exported');
       });
 
-      it('should not overwrite the providers if a module was already used on the same level',
-         () => {
-           @NgModule({providers: [{provide: 'token1', useValue: 'imported1'}]})
-           class ImportedModule1 {
-           }
+      it('should not overwrite the providers if a module was already used on the same level', () => {
+        @NgModule({providers: [{provide: 'token1', useValue: 'imported1'}]})
+        class ImportedModule1 {}
 
-           @NgModule({providers: [{provide: 'token1', useValue: 'imported2'}]})
-           class ImportedModule2 {
-           }
+        @NgModule({providers: [{provide: 'token1', useValue: 'imported2'}]})
+        class ImportedModule2 {}
 
-           @NgModule({imports: [ImportedModule1, ImportedModule2, ImportedModule1]})
-           class SomeModule {
-           }
+        @NgModule({imports: [ImportedModule1, ImportedModule2, ImportedModule1]})
+        class SomeModule {}
 
-           const injector = createModule(SomeModule).injector;
-           expect(injector.get('token1')).toBe('imported2');
-         });
+        const injector = createModule(SomeModule).injector;
+        expect(injector.get('token1')).toBe('imported2');
+      });
 
       it('should not overwrite the providers if a module was already used on a child level', () => {
         @NgModule({providers: [{provide: 'token1', useValue: 'imported1'}]})
-        class ImportedModule1 {
-        }
+        class ImportedModule1 {}
 
         @NgModule({imports: [ImportedModule1]})
-        class ImportedModule3 {
-        }
+        class ImportedModule3 {}
 
         @NgModule({providers: [{provide: 'token1', useValue: 'imported2'}]})
-        class ImportedModule2 {
-        }
+        class ImportedModule2 {}
 
         @NgModule({imports: [ImportedModule3, ImportedModule2, ImportedModule1]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
         const injector = createModule(SomeModule).injector;
         expect(injector.get('token1')).toBe('imported2');
@@ -1163,24 +1148,21 @@ describe('NgModule', () => {
 
       it('should throw when given invalid providers in an imported ModuleWithProviders', () => {
         @NgModule()
-        class ImportedModule1 {
-        }
+        class ImportedModule1 {}
 
         @NgModule({imports: [{ngModule: ImportedModule1, providers: [<any>'broken']}]})
-        class SomeModule {
-        }
+        class SomeModule {}
 
-        expect(() => createModule(SomeModule).injector)
-            .toThrowError(
-                `Invalid provider for the NgModule 'ImportedModule1' - only instances of Provider and Type are allowed, got: [?broken?]`);
+        expect(() => createModule(SomeModule).injector).toThrowError(
+          `Invalid provider for the NgModule 'ImportedModule1' - only instances of Provider and Type are allowed, got: [?broken?]`,
+        );
       });
     });
 
     describe('tree shakable providers', () => {
       it('definition should not persist across NgModuleRef instances', () => {
         @NgModule()
-        class SomeModule {
-        }
+        class SomeModule {}
 
         class Bar {
           static ɵprov = ɵɵdefineInjectable({
diff --git a/packages/core/test/linker/projection_integration_spec.ts b/packages/core/test/linker/projection_integration_spec.ts
index fcb64b1d21d20..5834fd5f81798 100644
--- a/packages/core/test/linker/projection_integration_spec.ts
+++ b/packages/core/test/linker/projection_integration_spec.ts
@@ -7,7 +7,24 @@
  */
 
 import {ɵgetDOM as getDOM} from '@angular/common';
-import {Component, ComponentRef, createComponent, Directive, ElementRef, EnvironmentInjector, Injector, Input, NgModule, NO_ERRORS_SCHEMA, OnInit, reflectComponentType, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation} from '@angular/core';
+import {
+  Component,
+  ComponentRef,
+  createComponent,
+  Directive,
+  ElementRef,
+  EnvironmentInjector,
+  Injector,
+  Input,
+  NgModule,
+  NO_ERRORS_SCHEMA,
+  OnInit,
+  reflectComponentType,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+  ViewEncapsulation,
+} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
@@ -24,9 +41,7 @@ describe('projection', () => {
   });
 
   it('should support simple components with text interpolation as direct children', () => {
-    const template = '{{\'START(\'}}<simple>' +
-        '{{text}}' +
-        '</simple>{{\')END\'}}';
+    const template = "{{'START('}}<simple>" + '{{text}}' + "</simple>{{')END'}}";
     TestBed.overrideComponent(MainComp, {set: {template}});
     const main = TestBed.createComponent(MainComp);
 
@@ -36,8 +51,9 @@ describe('projection', () => {
   });
 
   it('should support projecting text interpolation to a non bound element', () => {
-    TestBed.overrideComponent(
-        Simple, {set: {template: 'SIMPLE(<div><ng-content></ng-content></div>)'}});
+    TestBed.overrideComponent(Simple, {
+      set: {template: 'SIMPLE(<div><ng-content></ng-content></div>)'},
+    });
     TestBed.overrideComponent(MainComp, {set: {template: '<simple>{{text}}</simple>'}});
     const main = TestBed.createComponent(MainComp);
 
@@ -46,22 +62,22 @@ describe('projection', () => {
     expect(main.nativeElement).toHaveText('SIMPLE(A)');
   });
 
-  it('should support projecting text interpolation to a non bound element with other bound elements after it',
-     () => {
-       TestBed.overrideComponent(Simple, {
-         set: {template: 'SIMPLE(<div><ng-content></ng-content></div><div [tabIndex]="0">EL</div>)'}
-       });
-       TestBed.overrideComponent(MainComp, {set: {template: '<simple>{{text}}</simple>'}});
-       const main = TestBed.createComponent(MainComp);
+  it('should support projecting text interpolation to a non bound element with other bound elements after it', () => {
+    TestBed.overrideComponent(Simple, {
+      set: {template: 'SIMPLE(<div><ng-content></ng-content></div><div [tabIndex]="0">EL</div>)'},
+    });
+    TestBed.overrideComponent(MainComp, {set: {template: '<simple>{{text}}</simple>'}});
+    const main = TestBed.createComponent(MainComp);
 
-       main.componentInstance.text = 'A';
-       main.detectChanges();
-       expect(main.nativeElement).toHaveText('SIMPLE(AEL)');
-     });
+    main.componentInstance.text = 'A';
+    main.detectChanges();
+    expect(main.nativeElement).toHaveText('SIMPLE(AEL)');
+  });
 
   it('should project content components', () => {
-    TestBed.overrideComponent(
-        Simple, {set: {template: 'SIMPLE({{0}}|<ng-content></ng-content>|{{2}})'}});
+    TestBed.overrideComponent(Simple, {
+      set: {template: 'SIMPLE({{0}}|<ng-content></ng-content>|{{2}})'},
+    });
     TestBed.overrideComponent(OtherComp, {set: {template: '{{1}}'}});
     TestBed.overrideComponent(MainComp, {set: {template: '<simple><other></other></simple>'}});
     const main = TestBed.createComponent(MainComp);
@@ -82,10 +98,11 @@ describe('projection', () => {
     TestBed.configureTestingModule({declarations: [SingleContentTagComponent]});
     TestBed.overrideComponent(MainComp, {
       set: {
-        template: '<single-content-tag>' +
-            '<div class="target">I AM PROJECTED</div>' +
-            '</single-content-tag>'
-      }
+        template:
+          '<single-content-tag>' +
+          '<div class="target">I AM PROJECTED</div>' +
+          '</single-content-tag>',
+      },
     });
     const main = TestBed.createComponent(MainComp);
 
@@ -96,12 +113,13 @@ describe('projection', () => {
     TestBed.configureTestingModule({declarations: [MultipleContentTagsComponent]});
     TestBed.overrideComponent(MainComp, {
       set: {
-        template: '<multiple-content-tags>' +
-            '<div>B</div>' +
-            '<div>C</div>' +
-            '<div class="left">A</div>' +
-            '</multiple-content-tags>'
-      }
+        template:
+          '<multiple-content-tags>' +
+          '<div>B</div>' +
+          '<div>C</div>' +
+          '<div class="left">A</div>' +
+          '</multiple-content-tags>',
+      },
     });
     const main = TestBed.createComponent(MainComp);
 
@@ -113,22 +131,21 @@ describe('projection', () => {
       selector: 'multiple-content-tags',
       template: '(<ng-content SELECT="h1"></ng-content>, <ng-content></ng-content>)',
     })
-    class MultipleContentTagsComponent {
-    }
+    class MultipleContentTagsComponent {}
 
     TestBed.configureTestingModule({declarations: [MultipleContentTagsComponent]});
     const injector: Injector = TestBed.inject(Injector);
 
     expect(reflectComponentType(MultipleContentTagsComponent)?.ngContentSelectors).toEqual([
-      'h1', '*'
+      'h1',
+      '*',
     ]);
 
-
     const nodeOne = getDOM().getDefaultDocument().createTextNode('one');
     const nodeTwo = getDOM().getDefaultDocument().createTextNode('two');
     const component = createComponent(MultipleContentTagsComponent, {
       environmentInjector: injector as EnvironmentInjector,
-      projectableNodes: [[nodeOne], [nodeTwo]]
+      projectableNodes: [[nodeOne], [nodeTwo]],
     });
     expect(component.location.nativeElement).toHaveText('(one, two)');
   });
@@ -137,11 +154,12 @@ describe('projection', () => {
     TestBed.configureTestingModule({declarations: [MultipleContentTagsComponent]});
     TestBed.overrideComponent(MainComp, {
       set: {
-        template: '<multiple-content-tags>' +
-            '<div>B<div class="left">A</div></div>' +
-            '<div>C</div>' +
-            '</multiple-content-tags>'
-      }
+        template:
+          '<multiple-content-tags>' +
+          '<div>B<div class="left">A</div></div>' +
+          '<div>C</div>' +
+          '</multiple-content-tags>',
+      },
     });
     const main = TestBed.createComponent(MainComp);
 
@@ -149,29 +167,31 @@ describe('projection', () => {
   });
 
   it('should redistribute direct child viewcontainers when the light dom changes', () => {
-    TestBed.configureTestingModule(
-        {declarations: [MultipleContentTagsComponent, ManualViewportDirective]});
+    TestBed.configureTestingModule({
+      declarations: [MultipleContentTagsComponent, ManualViewportDirective],
+    });
     TestBed.overrideComponent(MainComp, {
       set: {
-        template: '<multiple-content-tags>' +
-            '<ng-template manual class="left"><div>A1</div></ng-template>' +
-            '<div>B</div>' +
-            '</multiple-content-tags>'
-      }
+        template:
+          '<multiple-content-tags>' +
+          '<ng-template manual class="left"><div>A1</div></ng-template>' +
+          '<div>B</div>' +
+          '</multiple-content-tags>',
+      },
     });
     const main = TestBed.createComponent(MainComp);
 
-    const viewportDirectives = main.debugElement.children[0]
-                                   .childNodes.filter(By.directive(ManualViewportDirective))
-                                   .map(de => de.injector.get(ManualViewportDirective));
+    const viewportDirectives = main.debugElement.children[0].childNodes
+      .filter(By.directive(ManualViewportDirective))
+      .map((de) => de.injector.get(ManualViewportDirective));
 
     expect(main.nativeElement).toHaveText('(, B)');
 
-    viewportDirectives.forEach(d => d.show());
+    viewportDirectives.forEach((d) => d.show());
     main.detectChanges();
     expect(main.nativeElement).toHaveText('(A1, B)');
 
-    viewportDirectives.forEach(d => d.hide());
+    viewportDirectives.forEach((d) => d.hide());
     main.detectChanges();
     expect(main.nativeElement).toHaveText('(, B)');
   });
@@ -180,11 +200,12 @@ describe('projection', () => {
     TestBed.configureTestingModule({declarations: [OuterWithIndirectNestedComponent]});
     TestBed.overrideComponent(MainComp, {
       set: {
-        template: '<outer-with-indirect-nested>' +
-            '<div>A</div>' +
-            '<div>B</div>' +
-            '</outer-with-indirect-nested>'
-      }
+        template:
+          '<outer-with-indirect-nested>' +
+          '<div>A</div>' +
+          '<div>B</div>' +
+          '</outer-with-indirect-nested>',
+      },
     });
     const main = TestBed.createComponent(MainComp);
 
@@ -193,22 +214,23 @@ describe('projection', () => {
 
   it('should support nesting with content being direct child of a nested component', () => {
     TestBed.configureTestingModule({
-      declarations: [InnerComponent, InnerInnerComponent, OuterComponent, ManualViewportDirective]
+      declarations: [InnerComponent, InnerInnerComponent, OuterComponent, ManualViewportDirective],
     });
     TestBed.overrideComponent(MainComp, {
       set: {
-        template: '<outer>' +
-            '<ng-template manual class="left"><div>A</div></ng-template>' +
-            '<div>B</div>' +
-            '<div>C</div>' +
-            '</outer>'
-      }
+        template:
+          '<outer>' +
+          '<ng-template manual class="left"><div>A</div></ng-template>' +
+          '<div>B</div>' +
+          '<div>C</div>' +
+          '</outer>',
+      },
     });
     const main = TestBed.createComponent(MainComp);
 
-    const viewportDirective =
-        main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
-            ManualViewportDirective);
+    const viewportDirective = main.debugElement
+      .queryAllNodes(By.directive(ManualViewportDirective))[0]
+      .injector.get(ManualViewportDirective);
 
     expect(main.nativeElement).toHaveText('OUTER(INNER(INNERINNER(,BC)))');
     viewportDirective.show();
@@ -217,22 +239,24 @@ describe('projection', () => {
   });
 
   it('should redistribute when the shadow dom changes', () => {
-    TestBed.configureTestingModule(
-        {declarations: [ConditionalContentComponent, ManualViewportDirective]});
+    TestBed.configureTestingModule({
+      declarations: [ConditionalContentComponent, ManualViewportDirective],
+    });
     TestBed.overrideComponent(MainComp, {
       set: {
-        template: '<conditional-content>' +
-            '<div class="left">A</div>' +
-            '<div>B</div>' +
-            '<div>C</div>' +
-            '</conditional-content>'
-      }
+        template:
+          '<conditional-content>' +
+          '<div class="left">A</div>' +
+          '<div>B</div>' +
+          '<div>C</div>' +
+          '</conditional-content>',
+      },
     });
     const main = TestBed.createComponent(MainComp);
 
-    const viewportDirective =
-        main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
-            ManualViewportDirective);
+    const viewportDirective = main.debugElement
+      .queryAllNodes(By.directive(ManualViewportDirective))[0]
+      .injector.get(ManualViewportDirective);
 
     expect(main.nativeElement).toHaveText('(, BC)');
 
@@ -248,8 +272,7 @@ describe('projection', () => {
   it('should redistribute non-continuous blocks of nodes when the shadow dom changes', () => {
     @Component({
       selector: 'child',
-      template:
-          `<ng-content></ng-content>(<ng-template [ngIf]="showing"><ng-content select="div"></ng-content></ng-template>)`
+      template: `<ng-content></ng-content>(<ng-template [ngIf]="showing"><ng-content select="div"></ng-content></ng-template>)`,
     })
     class Child {
       @Input() showing!: boolean;
@@ -262,7 +285,7 @@ describe('projection', () => {
         <span>B</span>
         <div>A</div>
         <span>B</span>
-      </child>`
+      </child>`,
     })
     class App {
       showing = false;
@@ -288,8 +311,9 @@ describe('projection', () => {
   // which could skrew up text node indices.
   it('should support text nodes after content tags', () => {
     TestBed.overrideComponent(MainComp, {set: {template: '<simple stringProp="text"></simple>'}});
-    TestBed.overrideComponent(
-        Simple, {set: {template: '<ng-content></ng-content><p>P,</p>{{stringProp}}'}});
+    TestBed.overrideComponent(Simple, {
+      set: {template: '<ng-content></ng-content><p>P,</p>{{stringProp}}'},
+    });
     const main = TestBed.createComponent(MainComp);
 
     main.detectChanges();
@@ -318,21 +342,23 @@ describe('projection', () => {
       }
     }
 
-    TestBed.configureTestingModule(
-        {declarations: [Empty, ProjectDirective, ManualViewportDirective]});
+    TestBed.configureTestingModule({
+      declarations: [Empty, ProjectDirective, ManualViewportDirective],
+    });
     TestBed.overrideComponent(MainComp, {
       set: {
-        template: '<empty>' +
-            ' <ng-template manual><div>A</div></ng-template>' +
-            '</empty>' +
-            'START(<div project></div>)END'
-      }
+        template:
+          '<empty>' +
+          ' <ng-template manual><div>A</div></ng-template>' +
+          '</empty>' +
+          'START(<div project></div>)END',
+      },
     });
     const main = TestBed.createComponent(MainComp);
 
-    const projectDirective: ProjectDirective =
-        main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get(
-            ProjectDirective);
+    const projectDirective: ProjectDirective = main.debugElement
+      .queryAllNodes(By.directive(ProjectDirective))[0]
+      .injector.get(ProjectDirective);
 
     expect(main.nativeElement).toHaveText('START()END');
 
@@ -341,22 +367,24 @@ describe('projection', () => {
   });
 
   it('should support moving projected light dom around', () => {
-    TestBed.configureTestingModule(
-        {declarations: [Empty, ProjectDirective, ManualViewportDirective]});
+    TestBed.configureTestingModule({
+      declarations: [Empty, ProjectDirective, ManualViewportDirective],
+    });
     TestBed.overrideComponent(MainComp, {
       set: {
-        template: '<simple><ng-template manual><div>A</div></ng-template></simple>' +
-            'START(<div project></div>)END'
-      }
+        template:
+          '<simple><ng-template manual><div>A</div></ng-template></simple>' +
+          'START(<div project></div>)END',
+      },
     });
     const main = TestBed.createComponent(MainComp);
 
-    const sourceDirective: ManualViewportDirective =
-        main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
-            ManualViewportDirective);
-    const projectDirective: ProjectDirective =
-        main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get(
-            ProjectDirective);
+    const sourceDirective: ManualViewportDirective = main.debugElement
+      .queryAllNodes(By.directive(ManualViewportDirective))[0]
+      .injector.get(ManualViewportDirective);
+    const projectDirective: ProjectDirective = main.debugElement
+      .queryAllNodes(By.directive(ProjectDirective))[0]
+      .injector.get(ProjectDirective);
     expect(main.nativeElement).toHaveText('SIMPLE()START()END');
 
     projectDirective.show(sourceDirective.templateRef);
@@ -364,25 +392,27 @@ describe('projection', () => {
   });
 
   it('should support moving ng-content around', () => {
-    TestBed.configureTestingModule(
-        {declarations: [ConditionalContentComponent, ProjectDirective, ManualViewportDirective]});
+    TestBed.configureTestingModule({
+      declarations: [ConditionalContentComponent, ProjectDirective, ManualViewportDirective],
+    });
     TestBed.overrideComponent(MainComp, {
       set: {
-        template: '<conditional-content>' +
-            '<div class="left">A</div>' +
-            '<div>B</div>' +
-            '</conditional-content>' +
-            'START(<div project></div>)END'
-      }
+        template:
+          '<conditional-content>' +
+          '<div class="left">A</div>' +
+          '<div>B</div>' +
+          '</conditional-content>' +
+          'START(<div project></div>)END',
+      },
     });
     const main = TestBed.createComponent(MainComp);
 
-    const sourceDirective: ManualViewportDirective =
-        main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
-            ManualViewportDirective);
-    const projectDirective: ProjectDirective =
-        main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get(
-            ProjectDirective);
+    const sourceDirective: ManualViewportDirective = main.debugElement
+      .queryAllNodes(By.directive(ManualViewportDirective))[0]
+      .injector.get(ManualViewportDirective);
+    const projectDirective: ProjectDirective = main.debugElement
+      .queryAllNodes(By.directive(ProjectDirective))[0]
+      .injector.get(ProjectDirective);
     expect(main.nativeElement).toHaveText('(, B)START()END');
 
     projectDirective.show(sourceDirective.templateRef);
@@ -403,9 +433,9 @@ describe('projection', () => {
     const main = TestBed.createComponent(MainComp);
 
     main.detectChanges();
-    const manualDirective: ManualViewportDirective =
-        main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
-            ManualViewportDirective);
+    const manualDirective: ManualViewportDirective = main.debugElement
+      .queryAllNodes(By.directive(ManualViewportDirective))[0]
+      .injector.get(ManualViewportDirective);
     expect(main.nativeElement).toHaveText('TREE(0:)');
     manualDirective.show();
     main.detectChanges();
@@ -418,8 +448,9 @@ describe('projection', () => {
   it('should still allow to implement a recursive trees via multiple components', () => {
     TestBed.configureTestingModule({declarations: [Tree, Tree2, ManualViewportDirective]});
     TestBed.overrideComponent(MainComp, {set: {template: '<tree></tree>'}});
-    TestBed.overrideComponent(
-        Tree, {set: {template: 'TREE({{depth}}:<tree2 *manual [depth]="depth+1"></tree2>)'}});
+    TestBed.overrideComponent(Tree, {
+      set: {template: 'TREE({{depth}}:<tree2 *manual [depth]="depth+1"></tree2>)'},
+    });
     const main = TestBed.createComponent(MainComp);
 
     main.detectChanges();
@@ -427,15 +458,17 @@ describe('projection', () => {
     expect(main.nativeElement).toHaveText('TREE(0:)');
 
     const tree = main.debugElement.query(By.directive(Tree));
-    let manualDirective: ManualViewportDirective = tree.queryAllNodes(By.directive(
-        ManualViewportDirective))[0].injector.get(ManualViewportDirective);
+    let manualDirective: ManualViewportDirective = tree
+      .queryAllNodes(By.directive(ManualViewportDirective))[0]
+      .injector.get(ManualViewportDirective);
     manualDirective.show();
     main.detectChanges();
     expect(main.nativeElement).toHaveText('TREE(0:TREE2(1:))');
 
     const tree2 = main.debugElement.query(By.directive(Tree2));
-    manualDirective = tree2.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
-        ManualViewportDirective);
+    manualDirective = tree2
+      .queryAllNodes(By.directive(ManualViewportDirective))[0]
+      .injector.get(ManualViewportDirective);
     manualDirective.show();
     main.detectChanges();
     expect(main.nativeElement).toHaveText('TREE(0:TREE2(1:TREE(2:)))');
@@ -446,9 +479,10 @@ describe('projection', () => {
       TestBed.configureTestingModule({declarations: [SimpleShadowDom1, SimpleShadowDom2]});
       TestBed.overrideComponent(MainComp, {
         set: {
-          template: '<simple-shadow-dom1><div>A</div></simple-shadow-dom1>' +
-              '<simple-shadow-dom2><div>B</div></simple-shadow-dom2>'
-        }
+          template:
+            '<simple-shadow-dom1><div>A</div></simple-shadow-dom1>' +
+            '<simple-shadow-dom2><div>B</div></simple-shadow-dom2>',
+        },
       });
       const main = TestBed.createComponent(MainComp);
 
@@ -467,7 +501,7 @@ describe('projection', () => {
           template: '<div class="redStyle"></div>',
           styles: ['.redStyle { color: red}'],
           encapsulation: ViewEncapsulation.None,
-        }
+        },
       });
       const main = TestBed.createComponent(MainComp);
 
@@ -487,7 +521,7 @@ describe('projection', () => {
           template: '<div></div>',
           styles: ['div { color: red}'],
           encapsulation: ViewEncapsulation.Emulated,
-        }
+        },
       });
       const main = TestBed.createComponent(MainComp);
 
@@ -501,10 +535,12 @@ describe('projection', () => {
   }
 
   it('should support nested conditionals that contain ng-contents', () => {
-    TestBed.configureTestingModule(
-        {declarations: [ConditionalTextComponent, ManualViewportDirective]});
-    TestBed.overrideComponent(
-        MainComp, {set: {template: `<conditional-text>a</conditional-text>`}});
+    TestBed.configureTestingModule({
+      declarations: [ConditionalTextComponent, ManualViewportDirective],
+    });
+    TestBed.overrideComponent(MainComp, {
+      set: {template: `<conditional-text>a</conditional-text>`},
+    });
     const main = TestBed.createComponent(MainComp);
 
     expect(main.nativeElement).toHaveText('MAIN()');
@@ -524,10 +560,9 @@ describe('projection', () => {
     const main = TestBed.createComponent(MainComp);
 
     main.detectChanges();
-    expect(main.nativeElement.innerHTML)
-        .toEqual(
-            '<cmp-a><cmp-b><cmp-d><i>cmp-d</i></cmp-d></cmp-b>' +
-            '<cmp-c><b>cmp-c</b></cmp-c></cmp-a>');
+    expect(main.nativeElement.innerHTML).toEqual(
+      '<cmp-a><cmp-b><cmp-d><i>cmp-d</i></cmp-d></cmp-b>' + '<cmp-c><b>cmp-c</b></cmp-c></cmp-a>',
+    );
   });
 
   it('should create nested components in the right order', () => {
@@ -536,57 +571,50 @@ describe('projection', () => {
     const main = TestBed.createComponent(MainComp);
 
     main.detectChanges();
-    expect(main.nativeElement.innerHTML)
-        .toEqual(
-            '<cmp-a1>a1<cmp-b11>b11</cmp-b11><cmp-b12>b12</cmp-b12></cmp-a1>' +
-            '<cmp-a2>a2<cmp-b21>b21</cmp-b21><cmp-b22>b22</cmp-b22></cmp-a2>');
+    expect(main.nativeElement.innerHTML).toEqual(
+      '<cmp-a1>a1<cmp-b11>b11</cmp-b11><cmp-b12>b12</cmp-b12></cmp-a1>' +
+        '<cmp-a2>a2<cmp-b21>b21</cmp-b21><cmp-b22>b22</cmp-b22></cmp-a2>',
+    );
   });
 
-  it('should project nodes into nested templates when the main template doesn\'t have <ng-content>',
-     () => {
-       @Component({
-         selector: 'content-in-template',
-         template:
-             `(<ng-template manual><ng-content select="[id=left]"></ng-content></ng-template>)`
-       })
-       class ContentInATemplateComponent {
-       }
-
+  it("should project nodes into nested templates when the main template doesn't have <ng-content>", () => {
+    @Component({
+      selector: 'content-in-template',
+      template: `(<ng-template manual><ng-content select="[id=left]"></ng-content></ng-template>)`,
+    })
+    class ContentInATemplateComponent {}
 
-       TestBed.configureTestingModule(
-           {declarations: [ContentInATemplateComponent, ManualViewportDirective]});
-       TestBed.overrideComponent(
-           MainComp,
-           {set: {template: `<content-in-template><div id="left">A</div></content-in-template>`}});
+    TestBed.configureTestingModule({
+      declarations: [ContentInATemplateComponent, ManualViewportDirective],
+    });
+    TestBed.overrideComponent(MainComp, {
+      set: {template: `<content-in-template><div id="left">A</div></content-in-template>`},
+    });
 
-       const main = TestBed.createComponent(MainComp);
+    const main = TestBed.createComponent(MainComp);
 
-       main.detectChanges();
-       expect(main.nativeElement).toHaveText('()');
+    main.detectChanges();
+    expect(main.nativeElement).toHaveText('()');
 
-       let viewportElement =
-           main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0];
-       viewportElement.injector.get(ManualViewportDirective).show();
-       expect(main.nativeElement).toHaveText('(A)');
-     });
+    let viewportElement = main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0];
+    viewportElement.injector.get(ManualViewportDirective).show();
+    expect(main.nativeElement).toHaveText('(A)');
+  });
 
   it('should project nodes into nested templates and the main template', () => {
     @Component({
       selector: 'content-in-main-and-template',
-      template:
-          `<ng-content></ng-content>(<ng-template manual><ng-content select="[id=left]"></ng-content></ng-template>)`
+      template: `<ng-content></ng-content>(<ng-template manual><ng-content select="[id=left]"></ng-content></ng-template>)`,
     })
-    class ContentInMainAndTemplateComponent {
-    }
-
+    class ContentInMainAndTemplateComponent {}
 
-    TestBed.configureTestingModule(
-        {declarations: [ContentInMainAndTemplateComponent, ManualViewportDirective]});
+    TestBed.configureTestingModule({
+      declarations: [ContentInMainAndTemplateComponent, ManualViewportDirective],
+    });
     TestBed.overrideComponent(MainComp, {
       set: {
-        template:
-            `<content-in-main-and-template><div id="left">A</div>B</content-in-main-and-template>`
-      }
+        template: `<content-in-main-and-template><div id="left">A</div>B</content-in-main-and-template>`,
+      },
     });
 
     const main = TestBed.createComponent(MainComp);
@@ -600,22 +628,24 @@ describe('projection', () => {
   });
 
   it('should project view containers', () => {
-    TestBed.configureTestingModule(
-        {declarations: [SingleContentTagComponent, ManualViewportDirective]});
+    TestBed.configureTestingModule({
+      declarations: [SingleContentTagComponent, ManualViewportDirective],
+    });
     TestBed.overrideComponent(MainComp, {
       set: {
-        template: '<single-content-tag>' +
-            '<div class="target">A</div>' +
-            '<ng-template manual class="target">B</ng-template>' +
-            '<div class="target">C</div>' +
-            '</single-content-tag>'
-      }
+        template:
+          '<single-content-tag>' +
+          '<div class="target">A</div>' +
+          '<ng-template manual class="target">B</ng-template>' +
+          '<div class="target">C</div>' +
+          '</single-content-tag>',
+      },
     });
 
     const main = TestBed.createComponent(MainComp);
-    const manualDirective =
-        main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
-            ManualViewportDirective);
+    const manualDirective = main.debugElement
+      .queryAllNodes(By.directive(ManualViewportDirective))[0]
+      .injector.get(ManualViewportDirective);
 
     expect(main.nativeElement).toHaveText('AC');
 
@@ -625,25 +655,27 @@ describe('projection', () => {
   });
 
   it('should project filled view containers into a view container', () => {
-    TestBed.configureTestingModule(
-        {declarations: [ConditionalContentComponent, ManualViewportDirective]});
+    TestBed.configureTestingModule({
+      declarations: [ConditionalContentComponent, ManualViewportDirective],
+    });
     TestBed.overrideComponent(MainComp, {
       set: {
-        template: '<conditional-content>' +
-            '<div class="left">A</div>' +
-            '<ng-template manual class="left">B</ng-template>' +
-            '<div class="left">C</div>' +
-            '<div>D</div>' +
-            '</conditional-content>'
-      }
+        template:
+          '<conditional-content>' +
+          '<div class="left">A</div>' +
+          '<ng-template manual class="left">B</ng-template>' +
+          '<div class="left">C</div>' +
+          '<div>D</div>' +
+          '</conditional-content>',
+      },
     });
     const main = TestBed.createComponent(MainComp);
 
     const conditionalComp = main.debugElement.query(By.directive(ConditionalContentComponent));
 
-    const viewViewportDir =
-        conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
-            ManualViewportDirective);
+    const viewViewportDir = conditionalComp
+      .queryAllNodes(By.directive(ManualViewportDirective))[0]
+      .injector.get(ManualViewportDirective);
 
     expect(main.nativeElement).toHaveText('(, D)');
     expect(main.nativeElement).toHaveText('(, D)');
@@ -652,9 +684,9 @@ describe('projection', () => {
     main.detectChanges();
     expect(main.nativeElement).toHaveText('(AC, D)');
 
-    const contentViewportDir =
-        conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[1].injector.get(
-            ManualViewportDirective);
+    const contentViewportDir = conditionalComp
+      .queryAllNodes(By.directive(ManualViewportDirective))[1]
+      .injector.get(ManualViewportDirective);
 
     contentViewportDir.show();
     main.detectChanges();
@@ -679,12 +711,14 @@ describe('projection', () => {
     }
 
     @Component({selector: 're-project', template: '<ng-content></ng-content>'})
-    class ReProjectCmpt {
-    }
+    class ReProjectCmpt {}
 
     @Directive({selector: '[insert]'})
     class InsertTplRef implements OnInit {
-      constructor(private _vcRef: ViewContainerRef, private _tplRef: TemplateRef<{}>) {}
+      constructor(
+        private _vcRef: ViewContainerRef,
+        private _tplRef: TemplateRef<{}>,
+      ) {}
 
       ngOnInit() {
         this._vcRef.createEmbeddedView(this._tplRef);
@@ -693,7 +727,10 @@ describe('projection', () => {
 
     @Directive({selector: '[delayedInsert]', exportAs: 'delayedInsert'})
     class DelayedInsertTplRef {
-      constructor(public vc: ViewContainerRef, public templateRef: TemplateRef<Object>) {}
+      constructor(
+        public vc: ViewContainerRef,
+        public templateRef: TemplateRef<Object>,
+      ) {}
       show() {
         this.vc.createEmbeddedView(this.templateRef);
       }
@@ -705,17 +742,26 @@ describe('projection', () => {
     let fixture: ComponentFixture<TestComponent>;
 
     function createCmptInstance(
-        tpl: string, projectableNodes: any[][]): ComponentRef<WithContentCmpt> {
+      tpl: string,
+      projectableNodes: any[][],
+    ): ComponentRef<WithContentCmpt> {
       TestBed.configureTestingModule({
-        declarations:
-            [WithContentCmpt, InsertTplRef, DelayedInsertTplRef, ReProjectCmpt, TestComponent],
+        declarations: [
+          WithContentCmpt,
+          InsertTplRef,
+          DelayedInsertTplRef,
+          ReProjectCmpt,
+          TestComponent,
+        ],
       });
       TestBed.overrideTemplate(WithContentCmpt, tpl);
 
       fixture = TestBed.createComponent(TestComponent);
       const vcr = fixture.componentInstance.vcr;
-      const cmptRef =
-          vcr.createComponent(WithContentCmpt, {injector: Injector.NULL, projectableNodes});
+      const cmptRef = vcr.createComponent(WithContentCmpt, {
+        injector: Injector.NULL,
+        projectableNodes,
+      });
 
       cmptRef.changeDetectorRef.detectChanges();
 
@@ -723,45 +769,52 @@ describe('projection', () => {
     }
 
     it('should pass nodes to the default ng-content without selectors', () => {
-      const cmptRef = createCmptInstance(
-          '<div>(<ng-content></ng-content>)</div>', [[document.createTextNode('A')]]);
+      const cmptRef = createCmptInstance('<div>(<ng-content></ng-content>)</div>', [
+        [document.createTextNode('A')],
+      ]);
       expect(cmptRef.location.nativeElement).toHaveText('(A)');
     });
 
     it('should pass nodes to the default ng-content at the root', () => {
-      const cmptRef =
-          createCmptInstance('<ng-content></ng-content>', [[document.createTextNode('A')]]);
+      const cmptRef = createCmptInstance('<ng-content></ng-content>', [
+        [document.createTextNode('A')],
+      ]);
       expect(cmptRef.location.nativeElement).toHaveText('A');
     });
 
     it('should pass nodes to multiple ng-content tags', () => {
       const cmptRef = createCmptInstance(
-          'A:(<ng-content></ng-content>)B:(<ng-content select="b"></ng-content>)C:(<ng-content select="c"></ng-content>)',
-          [
-            [document.createTextNode('A')], [document.createTextNode('B')],
-            [document.createTextNode('C')]
-          ]);
+        'A:(<ng-content></ng-content>)B:(<ng-content select="b"></ng-content>)C:(<ng-content select="c"></ng-content>)',
+        [
+          [document.createTextNode('A')],
+          [document.createTextNode('B')],
+          [document.createTextNode('C')],
+        ],
+      );
       expect(cmptRef.location.nativeElement).toHaveText('A:(A)B:(B)C:(C)');
     });
 
     it('should pass nodes to the default ng-content inside ng-container', () => {
       const cmptRef = createCmptInstance(
-          'A<ng-container>(<ng-content></ng-content>)</ng-container>C',
-          [[document.createTextNode('B')]]);
+        'A<ng-container>(<ng-content></ng-content>)</ng-container>C',
+        [[document.createTextNode('B')]],
+      );
       expect(cmptRef.location.nativeElement).toHaveText('A(B)C');
     });
 
     it('should pass nodes to the default ng-content inside an embedded view', () => {
       const cmptRef = createCmptInstance(
-          'A<ng-template insert>(<ng-content></ng-content>)</ng-template>C',
-          [[document.createTextNode('B')]]);
+        'A<ng-template insert>(<ng-content></ng-content>)</ng-template>C',
+        [[document.createTextNode('B')]],
+      );
       expect(cmptRef.location.nativeElement).toHaveText('A(B)C');
     });
 
     it('should pass nodes to the default ng-content inside a delayed embedded view', () => {
       const cmptRef = createCmptInstance(
-          'A(<ng-template #ref="delayedInsert" delayedInsert>[<ng-content></ng-content>]</ng-template>)C',
-          [[document.createTextNode('B')]]);
+        'A(<ng-template #ref="delayedInsert" delayedInsert>[<ng-content></ng-content>]</ng-template>)C',
+        [[document.createTextNode('B')]],
+      );
       expect(cmptRef.location.nativeElement).toHaveText('A()C');
 
       const delayedInsert = cmptRef.instance.directiveRef as DelayedInsertTplRef;
@@ -777,8 +830,9 @@ describe('projection', () => {
 
     it('should re-project at the root', () => {
       const cmptRef = createCmptInstance(
-          'A[<re-project>(<ng-content></ng-content>)</re-project>]C',
-          [[document.createTextNode('B')]]);
+        'A[<re-project>(<ng-content></ng-content>)</re-project>]C',
+        [[document.createTextNode('B')]],
+      );
       expect(cmptRef.location.nativeElement).toHaveText('A[(B)]C');
     });
   });
@@ -807,41 +861,39 @@ class Simple {
   selector: 'simple-shadow-dom1',
   template: 'SIMPLE1(<slot></slot>)',
   encapsulation: ViewEncapsulation.ShadowDom,
-  styles: ['div {color: red}']
+  styles: ['div {color: red}'],
 })
-class SimpleShadowDom1 {
-}
+class SimpleShadowDom1 {}
 
 @Component({
   selector: 'simple-shadow-dom2',
   template: 'SIMPLE2(<slot></slot>)',
   encapsulation: ViewEncapsulation.ShadowDom,
-  styles: ['div {color: blue}']
+  styles: ['div {color: blue}'],
 })
-class SimpleShadowDom2 {
-}
+class SimpleShadowDom2 {}
 
 @Component({selector: 'empty', template: ''})
-class Empty {
-}
+class Empty {}
 
 @Component({
   selector: 'multiple-content-tags',
   template: '(<ng-content SELECT=".left"></ng-content>, <ng-content></ng-content>)',
 })
-class MultipleContentTagsComponent {
-}
+class MultipleContentTagsComponent {}
 
 @Component({
   selector: 'single-content-tag',
   template: '<ng-content SELECT=".target"></ng-content>',
 })
-class SingleContentTagComponent {
-}
+class SingleContentTagComponent {}
 
 @Directive({selector: '[manual]'})
 class ManualViewportDirective {
-  constructor(public vc: ViewContainerRef, public templateRef: TemplateRef<Object>) {}
+  constructor(
+    public vc: ViewContainerRef,
+    public templateRef: TemplateRef<Object>,
+  ) {}
   show() {
     this.vc.createEmbeddedView(this.templateRef);
   }
@@ -865,54 +917,47 @@ class ProjectDirective {
   selector: 'outer-with-indirect-nested',
   template: 'OUTER(<simple><div><ng-content></ng-content></div></simple>)',
 })
-class OuterWithIndirectNestedComponent {
-}
+class OuterWithIndirectNestedComponent {}
 
 @Component({
   selector: 'outer',
   template:
-      'OUTER(<inner><ng-content select=".left" class="left"></ng-content><ng-content></ng-content></inner>)',
+    'OUTER(<inner><ng-content select=".left" class="left"></ng-content><ng-content></ng-content></inner>)',
 })
-class OuterComponent {
-}
+class OuterComponent {}
 
 @Component({
   selector: 'inner',
   template:
-      'INNER(<innerinner><ng-content select=".left" class="left"></ng-content><ng-content></ng-content></innerinner>)',
+    'INNER(<innerinner><ng-content select=".left" class="left"></ng-content><ng-content></ng-content></innerinner>)',
 })
-class InnerComponent {
-}
+class InnerComponent {}
 
 @Component({
   selector: 'innerinner',
   template: 'INNERINNER(<ng-content select=".left"></ng-content>,<ng-content></ng-content>)',
 })
-class InnerInnerComponent {
-}
+class InnerInnerComponent {}
 
 @Component({
   selector: 'conditional-content',
   template:
-      '<div>(<div *manual><ng-content select=".left"></ng-content></div>, <ng-content></ng-content>)</div>',
+    '<div>(<div *manual><ng-content select=".left"></ng-content></div>, <ng-content></ng-content>)</div>',
 })
-class ConditionalContentComponent {
-}
+class ConditionalContentComponent {}
 
 @Component({
   selector: 'conditional-text',
   template:
-      'MAIN(<ng-template manual>FIRST(<ng-template manual>SECOND(<ng-content></ng-content>)</ng-template>)</ng-template>)',
+    'MAIN(<ng-template manual>FIRST(<ng-template manual>SECOND(<ng-content></ng-content>)</ng-template>)</ng-template>)',
 })
-class ConditionalTextComponent {
-}
+class ConditionalTextComponent {}
 
 @Component({
   selector: 'tab',
   template: '<div><div *manual>TAB(<ng-content></ng-content>)</div></div>',
 })
-class Tab {
-}
+class Tab {}
 
 @Component({
   selector: 'tree2',
@@ -932,7 +977,6 @@ class Tree {
   depth = 0;
 }
 
-
 @Component({selector: 'cmp-d', template: `<i>{{tagName}}</i>`})
 class CmpD {
   tagName: string;
@@ -941,7 +985,6 @@ class CmpD {
   }
 }
 
-
 @Component({selector: 'cmp-c', template: `<b>{{tagName}}</b>`})
 class CmpC {
   tagName: string;
@@ -950,42 +993,32 @@ class CmpC {
   }
 }
 
-
 @Component({selector: 'cmp-b', template: `<ng-content></ng-content><cmp-d></cmp-d>`})
-class CmpB {
-}
-
+class CmpB {}
 
 @Component({selector: 'cmp-a', template: `<ng-content></ng-content><cmp-c></cmp-c>`})
-class CmpA {
-}
+class CmpA {}
 
 @Component({selector: 'cmp-b11', template: `{{'b11'}}`})
-class CmpB11 {
-}
+class CmpB11 {}
 
 @Component({selector: 'cmp-b12', template: `{{'b12'}}`})
-class CmpB12 {
-}
+class CmpB12 {}
 
 @Component({selector: 'cmp-b21', template: `{{'b21'}}`})
-class CmpB21 {
-}
+class CmpB21 {}
 
 @Component({selector: 'cmp-b22', template: `{{'b22'}}`})
-class CmpB22 {
-}
+class CmpB22 {}
 
 @Component({
   selector: 'cmp-a1',
   template: `{{'a1'}}<cmp-b11></cmp-b11><cmp-b12></cmp-b12>`,
 })
-class CmpA1 {
-}
+class CmpA1 {}
 
 @Component({
   selector: 'cmp-a2',
   template: `{{'a2'}}<cmp-b21></cmp-b21><cmp-b22></cmp-b22>`,
 })
-class CmpA2 {
-}
+class CmpA2 {}
diff --git a/packages/core/test/linker/query_integration_spec.ts b/packages/core/test/linker/query_integration_spec.ts
index fc5e0ce9c057e..cdec12d495e34 100644
--- a/packages/core/test/linker/query_integration_spec.ts
+++ b/packages/core/test/linker/query_integration_spec.ts
@@ -6,7 +6,23 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, asNativeElements, Component, ContentChild, ContentChildren, Directive, QueryList, TemplateRef, Type, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
+import {
+  AfterContentChecked,
+  AfterContentInit,
+  AfterViewChecked,
+  AfterViewInit,
+  asNativeElements,
+  Component,
+  ContentChild,
+  ContentChildren,
+  Directive,
+  QueryList,
+  TemplateRef,
+  Type,
+  ViewChild,
+  ViewChildren,
+  ViewContainerRef,
+} from '@angular/core';
 import {ElementRef} from '@angular/core/src/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
@@ -15,42 +31,44 @@ import {Subject} from 'rxjs';
 import {stringify} from '../../src/util/stringify';
 
 describe('Query API', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    declarations: [
-      MyComp0,
-      NeedsQuery,
-      NeedsQueryDesc,
-      NeedsQueryByLabel,
-      NeedsQueryByTwoLabels,
-      NeedsQueryAndProject,
-      NeedsViewQuery,
-      NeedsViewQueryIf,
-      NeedsViewQueryNestedIf,
-      NeedsViewQueryOrder,
-      NeedsViewQueryByLabel,
-      NeedsViewQueryOrderWithParent,
-      NeedsContentChildren,
-      NeedsViewChildren,
-      NeedsViewChild,
-      NeedsStaticContentAndViewChild,
-      NeedsContentChild,
-      DirectiveNeedsContentChild,
-      NeedsTpl,
-      NeedsNamedTpl,
-      TextDirective,
-      InertDirective,
-      NeedsFourQueries,
-      NeedsContentChildrenWithRead,
-      NeedsContentChildWithRead,
-      NeedsViewChildrenWithRead,
-      NeedsViewChildWithRead,
-      NeedsContentChildrenShallow,
-      NeedsContentChildTemplateRef,
-      NeedsContentChildTemplateRefApp,
-      NeedsViewContainerWithRead,
-      ManualProjecting
-    ]
-  }));
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      declarations: [
+        MyComp0,
+        NeedsQuery,
+        NeedsQueryDesc,
+        NeedsQueryByLabel,
+        NeedsQueryByTwoLabels,
+        NeedsQueryAndProject,
+        NeedsViewQuery,
+        NeedsViewQueryIf,
+        NeedsViewQueryNestedIf,
+        NeedsViewQueryOrder,
+        NeedsViewQueryByLabel,
+        NeedsViewQueryOrderWithParent,
+        NeedsContentChildren,
+        NeedsViewChildren,
+        NeedsViewChild,
+        NeedsStaticContentAndViewChild,
+        NeedsContentChild,
+        DirectiveNeedsContentChild,
+        NeedsTpl,
+        NeedsNamedTpl,
+        TextDirective,
+        InertDirective,
+        NeedsFourQueries,
+        NeedsContentChildrenWithRead,
+        NeedsContentChildWithRead,
+        NeedsViewChildrenWithRead,
+        NeedsViewChildWithRead,
+        NeedsContentChildrenShallow,
+        NeedsContentChildTemplateRef,
+        NeedsContentChildTemplateRefApp,
+        NeedsViewContainerWithRead,
+        ManualProjecting,
+      ],
+    }),
+  );
 
   describe('querying by directive type', () => {
     it('should contain all direct child directives in the light dom (constructor)', () => {
@@ -81,23 +99,30 @@ describe('Query API', () => {
 
     it('should contain the first content child', () => {
       const template =
-          '<needs-content-child #q><div *ngIf="shouldShow" text="foo"></div></needs-content-child>';
+        '<needs-content-child #q><div *ngIf="shouldShow" text="foo"></div></needs-content-child>';
       const view = createTestCmp(MyComp0, template);
       view.componentInstance.shouldShow = true;
       view.detectChanges();
       const q: NeedsContentChild = view.debugElement.children[0].references!['q'];
-      expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
+      expect(q.logs).toEqual([
+        ['setter', 'foo'],
+        ['init', 'foo'],
+        ['check', 'foo'],
+      ]);
 
       view.componentInstance.shouldShow = false;
       view.detectChanges();
       expect(q.logs).toEqual([
-        ['setter', 'foo'], ['init', 'foo'], ['check', 'foo'], ['setter', null], ['check', null]
+        ['setter', 'foo'],
+        ['init', 'foo'],
+        ['check', 'foo'],
+        ['setter', null],
+        ['check', null],
       ]);
     });
 
-    it('should contain the first content child when target is on <ng-template> with embedded view (issue #16568)',
-       () => {
-         const template = `
+    it('should contain the first content child when target is on <ng-template> with embedded view (issue #16568)', () => {
+      const template = `
           <div directive-needs-content-child>
             <ng-template text="foo" [ngIf]="true">
               <div text="bar"></div>
@@ -109,63 +134,84 @@ describe('Query API', () => {
               </ng-template>
            </needs-content-child>
          `;
-         const view = createTestCmp(MyComp0, template);
-         view.detectChanges();
-         const q: NeedsContentChild = view.debugElement.children[1].references!['q'];
-         expect(q.child?.text).toEqual('foo');
-         const directive: DirectiveNeedsContentChild =
-             view.debugElement.children[0].injector.get(DirectiveNeedsContentChild);
-         expect(directive.child.text).toEqual('foo');
-       });
+      const view = createTestCmp(MyComp0, template);
+      view.detectChanges();
+      const q: NeedsContentChild = view.debugElement.children[1].references!['q'];
+      expect(q.child?.text).toEqual('foo');
+      const directive: DirectiveNeedsContentChild = view.debugElement.children[0].injector.get(
+        DirectiveNeedsContentChild,
+      );
+      expect(directive.child.text).toEqual('foo');
+    });
 
     it('should contain the first view child', () => {
       const template = '<needs-view-child #q></needs-view-child>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
 
       const q: NeedsViewChild = view.debugElement.children[0].references!['q'];
-      expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
+      expect(q.logs).toEqual([
+        ['setter', 'foo'],
+        ['init', 'foo'],
+        ['check', 'foo'],
+      ]);
 
       q.shouldShow = false;
       view.detectChanges();
       expect(q.logs).toEqual([
-        ['setter', 'foo'], ['init', 'foo'], ['check', 'foo'], ['setter', null], ['check', null]
+        ['setter', 'foo'],
+        ['init', 'foo'],
+        ['check', 'foo'],
+        ['setter', null],
+        ['check', null],
       ]);
     });
 
     it('should contain the first view child across embedded views', () => {
-      TestBed.overrideComponent(
-          MyComp0, {set: {template: '<needs-view-child #q></needs-view-child>'}});
+      TestBed.overrideComponent(MyComp0, {
+        set: {template: '<needs-view-child #q></needs-view-child>'},
+      });
       TestBed.overrideComponent(NeedsViewChild, {
         set: {
           template:
-              '<div *ngIf="true"><div *ngIf="shouldShow" text="foo"></div></div><div *ngIf="shouldShow2" text="bar"></div>'
-        }
+            '<div *ngIf="true"><div *ngIf="shouldShow" text="foo"></div></div><div *ngIf="shouldShow2" text="bar"></div>',
+        },
       });
       const view = TestBed.createComponent(MyComp0);
 
       view.detectChanges();
       const q: NeedsViewChild = view.debugElement.children[0].references!['q'];
-      expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
+      expect(q.logs).toEqual([
+        ['setter', 'foo'],
+        ['init', 'foo'],
+        ['check', 'foo'],
+      ]);
 
       q.shouldShow = false;
       q.shouldShow2 = true;
       q.logs = [];
       view.detectChanges();
-      expect(q.logs).toEqual([['setter', 'bar'], ['check', 'bar']]);
+      expect(q.logs).toEqual([
+        ['setter', 'bar'],
+        ['check', 'bar'],
+      ]);
 
       q.shouldShow = false;
       q.shouldShow2 = false;
       q.logs = [];
       view.detectChanges();
-      expect(q.logs).toEqual([['setter', null], ['check', null]]);
+      expect(q.logs).toEqual([
+        ['setter', null],
+        ['check', null],
+      ]);
     });
 
     it('should contain all directives in the light dom when descendants flag is used', () => {
-      const template = '<div text="1"></div>' +
-          '<needs-query-desc text="2"><div text="3">' +
-          '<div text="4"></div>' +
-          '</div></needs-query-desc>' +
-          '<div text="5"></div>';
+      const template =
+        '<div text="1"></div>' +
+        '<needs-query-desc text="2"><div text="3">' +
+        '<div text="4"></div>' +
+        '</div></needs-query-desc>' +
+        '<div text="5"></div>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
 
       // Queries don't match host nodes of a directive that defines a content query.
@@ -173,9 +219,10 @@ describe('Query API', () => {
     });
 
     it('should contain all directives in the light dom', () => {
-      const template = '<div text="1"></div>' +
-          '<needs-query text="2"><div text="3"></div></needs-query>' +
-          '<div text="4"></div>';
+      const template =
+        '<div text="1"></div>' +
+        '<needs-query text="2"><div text="3"></div></needs-query>' +
+        '<div text="4"></div>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
 
       // Queries don't match host nodes of a directive that defines a content query.
@@ -183,9 +230,10 @@ describe('Query API', () => {
     });
 
     it('should reflect dynamically inserted directives', () => {
-      const template = '<div text="1"></div>' +
-          '<needs-query text="2"><div *ngIf="shouldShow" [text]="\'3\'"></div></needs-query>' +
-          '<div text="4"></div>';
+      const template =
+        '<div text="1"></div>' +
+        '<needs-query text="2"><div *ngIf="shouldShow" [text]="\'3\'"></div></needs-query>' +
+        '<div text="4"></div>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
       // Queries don't match host nodes of a directive that defines a content query.
       expect(asNativeElements(view.debugElement.children)).toHaveText('');
@@ -197,9 +245,10 @@ describe('Query API', () => {
     });
 
     it('should be cleanly destroyed when a query crosses view boundaries', () => {
-      const template = '<div text="1"></div>' +
-          '<needs-query text="2"><div *ngIf="shouldShow" [text]="\'3\'"></div></needs-query>' +
-          '<div text="4"></div>';
+      const template =
+        '<div text="1"></div>' +
+        '<needs-query text="2"><div *ngIf="shouldShow" [text]="\'3\'"></div></needs-query>' +
+        '<div text="4"></div>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
 
       view.componentInstance.shouldShow = true;
@@ -208,9 +257,10 @@ describe('Query API', () => {
     });
 
     it('should reflect moved directives', () => {
-      const template = '<div text="1"></div>' +
-          '<needs-query text="2"><div *ngFor="let  i of list" [text]="i"></div></needs-query>' +
-          '<div text="4"></div>';
+      const template =
+        '<div text="1"></div>' +
+        '<needs-query text="2"><div *ngFor="let  i of list" [text]="i"></div></needs-query>' +
+        '<div text="4"></div>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
       // Queries don't match host nodes of a directive that defines a content query.
       expect(asNativeElements(view.debugElement.children)).toHaveText('1d|2d|3d|');
@@ -225,9 +275,11 @@ describe('Query API', () => {
       TestBed.configureTestingModule({declarations: [MyCompBroken0, HasNullQueryCondition]});
       const template = '<has-null-query-condition></has-null-query-condition>';
       TestBed.overrideComponent(MyCompBroken0, {set: {template}});
-      expect(() => TestBed.createComponent(MyCompBroken0))
-          .toThrowError(`Can't construct a query for the property "errorTrigger" of "${
-              stringify(HasNullQueryCondition)}" since the query selector wasn't defined.`);
+      expect(() => TestBed.createComponent(MyCompBroken0)).toThrowError(
+        `Can't construct a query for the property "errorTrigger" of "${stringify(
+          HasNullQueryCondition,
+        )}" since the query selector wasn't defined.`,
+      );
     });
   });
 
@@ -238,13 +290,14 @@ describe('Query API', () => {
       const needsTpl: NeedsTpl = view.debugElement.children[0].injector.get(NeedsTpl);
 
       expect(needsTpl.vc.createEmbeddedView(needsTpl.query.first).rootNodes[0]).toHaveText('light');
-      expect(needsTpl.vc.createEmbeddedView(needsTpl.viewQuery.first).rootNodes[0])
-          .toHaveText('shadow');
+      expect(needsTpl.vc.createEmbeddedView(needsTpl.viewQuery.first).rootNodes[0]).toHaveText(
+        'shadow',
+      );
     });
 
     it('should find named TemplateRefs', () => {
       const template =
-          '<needs-named-tpl><ng-template #tpl><div>light</div></ng-template></needs-named-tpl>';
+        '<needs-named-tpl><ng-template #tpl><div>light</div></ng-template></needs-named-tpl>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
       const needsTpl: NeedsNamedTpl = view.debugElement.children[0].injector.get(NeedsNamedTpl);
       expect(needsTpl.vc.createEmbeddedView(needsTpl.contentTpl).rootNodes[0]).toHaveText('light');
@@ -255,22 +308,23 @@ describe('Query API', () => {
   describe('read a different token', () => {
     it('should contain the first content child', () => {
       const template =
-          '<needs-content-child-read><div #q text="ca"></div></needs-content-child-read>';
+        '<needs-content-child-read><div #q text="ca"></div></needs-content-child-read>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
 
       const comp: NeedsContentChildWithRead =
-          view.debugElement.children[0].injector.get(NeedsContentChildWithRead);
+        view.debugElement.children[0].injector.get(NeedsContentChildWithRead);
       expect(comp.textDirChild.text).toEqual('ca');
     });
 
     it('should contain the first descendant content child', () => {
-      const template = '<needs-content-child-read>' +
-          '<div dir><div #q text="ca"></div></div>' +
-          '</needs-content-child-read>';
+      const template =
+        '<needs-content-child-read>' +
+        '<div dir><div #q text="ca"></div></div>' +
+        '</needs-content-child-read>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
 
       const comp: NeedsContentChildWithRead =
-          view.debugElement.children[0].injector.get(NeedsContentChildWithRead);
+        view.debugElement.children[0].injector.get(NeedsContentChildWithRead);
       expect(comp.textDirChild.text).toEqual('ca');
     });
 
@@ -284,44 +338,39 @@ describe('Query API', () => {
       expect(comp.children.length).toBe(1);
     });
 
-    it('should contain the first descendant content child in an embedded template for shallow queries',
-       () => {
-         const template = `<needs-content-children-shallow>
+    it('should contain the first descendant content child in an embedded template for shallow queries', () => {
+      const template = `<needs-content-children-shallow>
                           <ng-template [ngIf]="true">
                             <div #q></div>
                           </ng-template>
                         </needs-content-children-shallow>`;
-         const view = createTestCmpAndDetectChanges(MyComp0, template);
-
-         const comp = view.debugElement.children[0].injector.get(NeedsContentChildrenShallow);
-         expect(comp.children.length).toBe(1);
-       });
+      const view = createTestCmpAndDetectChanges(MyComp0, template);
 
+      const comp = view.debugElement.children[0].injector.get(NeedsContentChildrenShallow);
+      expect(comp.children.length).toBe(1);
+    });
 
-    it('should contain the first descendant content child in an embedded template for shallow queries and additional directive',
-       () => {
-         const template = `<needs-content-children-shallow>
+    it('should contain the first descendant content child in an embedded template for shallow queries and additional directive', () => {
+      const template = `<needs-content-children-shallow>
                           <ng-template [ngIf]="true">
                             <div #q directive-needs-content-child></div>
                           </ng-template>
                         </needs-content-children-shallow>`;
-         const view = createTestCmpAndDetectChanges(MyComp0, template);
+      const view = createTestCmpAndDetectChanges(MyComp0, template);
 
-         const comp = view.debugElement.children[0].injector.get(NeedsContentChildrenShallow);
-         expect(comp.children.length).toBe(1);
-       });
+      const comp = view.debugElement.children[0].injector.get(NeedsContentChildrenShallow);
+      expect(comp.children.length).toBe(1);
+    });
 
-    it('should contain the first descendant content child in an embedded template for shallow queries and additional directive (star syntax)',
-       () => {
-         const template = `<needs-content-children-shallow>
+    it('should contain the first descendant content child in an embedded template for shallow queries and additional directive (star syntax)', () => {
+      const template = `<needs-content-children-shallow>
                             <div *ngIf="true" #q directive-needs-content-child></div>
                         </needs-content-children-shallow>`;
-         const view = createTestCmpAndDetectChanges(MyComp0, template);
-
-         const comp = view.debugElement.children[0].injector.get(NeedsContentChildrenShallow);
-         expect(comp.children.length).toBe(1);
-       });
+      const view = createTestCmpAndDetectChanges(MyComp0, template);
 
+      const comp = view.debugElement.children[0].injector.get(NeedsContentChildrenShallow);
+      expect(comp.children.length).toBe(1);
+    });
 
     it('should not cross ng-container boundaries with shallow queries', () => {
       const template = `<needs-content-children-shallow>
@@ -336,8 +385,8 @@ describe('Query API', () => {
     });
 
     it('should contain the first descendant content child templateRef', () => {
-      const template = '<needs-content-child-template-ref-app>' +
-          '</needs-content-child-template-ref-app>';
+      const template =
+        '<needs-content-child-template-ref-app>' + '</needs-content-child-template-ref-app>';
       const view = createTestCmp(MyComp0, template);
 
       // can't execute checkNoChanges as our view modifies our content children (via a query).
@@ -350,7 +399,7 @@ describe('Query API', () => {
       const view = createTestCmpAndDetectChanges(MyComp0, template);
 
       const comp: NeedsViewChildWithRead =
-          view.debugElement.children[0].injector.get(NeedsViewChildWithRead);
+        view.debugElement.children[0].injector.get(NeedsViewChildWithRead);
       expect(comp.textDirChild.text).toEqual('va');
     });
 
@@ -359,17 +408,18 @@ describe('Query API', () => {
       const view = createTestCmpAndDetectChanges(MyComp0, template);
 
       const comp: NeedsViewChildrenWithRead =
-          view.debugElement.children[0].injector.get(NeedsViewChildrenWithRead);
-      expect(comp.textDirChildren.map(textDirective => textDirective.text)).toEqual(['va', 'vb']);
+        view.debugElement.children[0].injector.get(NeedsViewChildrenWithRead);
+      expect(comp.textDirChildren.map((textDirective) => textDirective.text)).toEqual(['va', 'vb']);
     });
 
     it('should support reading a ViewContainer', () => {
       const template =
-          '<needs-viewcontainer-read><ng-template>hello</ng-template></needs-viewcontainer-read>';
+        '<needs-viewcontainer-read><ng-template>hello</ng-template></needs-viewcontainer-read>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
 
-      const comp: NeedsViewContainerWithRead =
-          view.debugElement.children[0].injector.get(NeedsViewContainerWithRead);
+      const comp: NeedsViewContainerWithRead = view.debugElement.children[0].injector.get(
+        NeedsViewContainerWithRead,
+      );
       comp.createView();
       expect(view.debugElement.children[0].nativeElement).toHaveText('hello');
     });
@@ -377,77 +427,82 @@ describe('Query API', () => {
 
   describe('changes', () => {
     it('should notify query on change', waitForAsync(() => {
-         const template = '<needs-query #q>' +
-             '<div text="1"></div>' +
-             '<div *ngIf="shouldShow" text="2"></div>' +
-             '</needs-query>';
-         const view = createTestCmpAndDetectChanges(MyComp0, template);
-
-         const q = view.debugElement.children[0].references!['q'];
-
-         q.query.changes.subscribe({
-           next: () => {
-             expect(q.query.first.text).toEqual('1');
-             expect(q.query.last.text).toEqual('2');
-           }
-         });
-
-         view.componentInstance.shouldShow = true;
-         view.detectChanges();
-       }));
-
-    it('should correctly clean-up when destroyed together with the directives it is querying',
-       () => {
-         const template = '<needs-query #q *ngIf="shouldShow"><div text="foo"></div></needs-query>';
-         const view = createTestCmpAndDetectChanges(MyComp0, template);
-         view.componentInstance.shouldShow = true;
-         view.detectChanges();
-
-         let isQueryListCompleted = false;
-
-         const q: NeedsQuery = view.debugElement.children[0].references!['q'];
-         const changes = <Subject<any>>q.query.changes;
-         expect(q.query.length).toEqual(1);
-         expect(changes.closed).toBeFalsy();
-         changes.subscribe(() => {}, () => {}, () => {
-           isQueryListCompleted = true;
-         });
-
-         view.componentInstance.shouldShow = false;
-         view.detectChanges();
-         expect(changes.closed).toBeTruthy();
-         expect(isQueryListCompleted).toBeTruthy();
-
-         view.componentInstance.shouldShow = true;
-         view.detectChanges();
-         const q2: NeedsQuery = view.debugElement.children[0].references!['q'];
-
-         expect(q2.query.length).toEqual(1);
-         expect(changes.closed).toBeTruthy();
-         expect((<Subject<any>>q2.query.changes).closed).toBeFalsy();
-       });
+      const template =
+        '<needs-query #q>' +
+        '<div text="1"></div>' +
+        '<div *ngIf="shouldShow" text="2"></div>' +
+        '</needs-query>';
+      const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+      const q = view.debugElement.children[0].references!['q'];
+
+      q.query.changes.subscribe({
+        next: () => {
+          expect(q.query.first.text).toEqual('1');
+          expect(q.query.last.text).toEqual('2');
+        },
+      });
+
+      view.componentInstance.shouldShow = true;
+      view.detectChanges();
+    }));
+
+    it('should correctly clean-up when destroyed together with the directives it is querying', () => {
+      const template = '<needs-query #q *ngIf="shouldShow"><div text="foo"></div></needs-query>';
+      const view = createTestCmpAndDetectChanges(MyComp0, template);
+      view.componentInstance.shouldShow = true;
+      view.detectChanges();
+
+      let isQueryListCompleted = false;
+
+      const q: NeedsQuery = view.debugElement.children[0].references!['q'];
+      const changes = <Subject<any>>q.query.changes;
+      expect(q.query.length).toEqual(1);
+      expect(changes.closed).toBeFalsy();
+      changes.subscribe(
+        () => {},
+        () => {},
+        () => {
+          isQueryListCompleted = true;
+        },
+      );
+
+      view.componentInstance.shouldShow = false;
+      view.detectChanges();
+      expect(changes.closed).toBeTruthy();
+      expect(isQueryListCompleted).toBeTruthy();
+
+      view.componentInstance.shouldShow = true;
+      view.detectChanges();
+      const q2: NeedsQuery = view.debugElement.children[0].references!['q'];
+
+      expect(q2.query.length).toEqual(1);
+      expect(changes.closed).toBeTruthy();
+      expect((<Subject<any>>q2.query.changes).closed).toBeFalsy();
+    });
   });
 
   describe('querying by var binding', () => {
-    it('should contain all the child directives in the light dom with the given var binding',
-       () => {
-         const template = '<needs-query-by-ref-binding #q>' +
-             '<div *ngFor="let item of list" [text]="item" #textLabel="textDir"></div>' +
-             '</needs-query-by-ref-binding>';
-         const view = createTestCmpAndDetectChanges(MyComp0, template);
-         const q = view.debugElement.children[0].references!['q'];
-
-         view.componentInstance.list = ['1d', '2d'];
-         view.detectChanges();
-         expect(q.query.first.text).toEqual('1d');
-         expect(q.query.last.text).toEqual('2d');
-       });
+    it('should contain all the child directives in the light dom with the given var binding', () => {
+      const template =
+        '<needs-query-by-ref-binding #q>' +
+        '<div *ngFor="let item of list" [text]="item" #textLabel="textDir"></div>' +
+        '</needs-query-by-ref-binding>';
+      const view = createTestCmpAndDetectChanges(MyComp0, template);
+      const q = view.debugElement.children[0].references!['q'];
+
+      view.componentInstance.list = ['1d', '2d'];
+      view.detectChanges();
+      expect(q.query.first.text).toEqual('1d');
+      expect(q.query.last.text).toEqual('2d');
+    });
 
     it('should support querying by multiple var bindings', () => {
-      const template = '<needs-query-by-ref-bindings #q>' +
-          '<div text="one" #textLabel1="textDir"></div>' +
-          '<div text="two" #textLabel2="textDir"></div>' +
-          '</needs-query-by-ref-bindings>';
+      const template =
+        '<needs-query-by-ref-bindings #q>' +
+        '<div text="one" #textLabel1="textDir"></div>' +
+        '<div text="two" #textLabel2="textDir"></div>' +
+        '</needs-query-by-ref-bindings>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
       const q = view.debugElement.children[0].references!['q'];
 
@@ -456,9 +511,10 @@ describe('Query API', () => {
     });
 
     it('should support dynamically inserted directives', () => {
-      const template = '<needs-query-by-ref-binding #q>' +
-          '<div *ngFor="let item of list" [text]="item" #textLabel="textDir"></div>' +
-          '</needs-query-by-ref-binding>';
+      const template =
+        '<needs-query-by-ref-binding #q>' +
+        '<div *ngFor="let item of list" [text]="item" #textLabel="textDir"></div>' +
+        '</needs-query-by-ref-binding>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
       const q = view.debugElement.children[0].references!['q'];
 
@@ -470,11 +526,12 @@ describe('Query API', () => {
     });
 
     it('should contain all the elements in the light dom with the given var binding', () => {
-      const template = '<needs-query-by-ref-binding #q>' +
-          '<div *ngFor="let item of list">' +
-          '<div #textLabel>{{item}}</div>' +
-          '</div>' +
-          '</needs-query-by-ref-binding>';
+      const template =
+        '<needs-query-by-ref-binding #q>' +
+        '<div *ngFor="let item of list">' +
+        '<div #textLabel>{{item}}</div>' +
+        '</div>' +
+        '</needs-query-by-ref-binding>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
       const q = view.debugElement.children[0].references!['q'];
 
@@ -485,9 +542,10 @@ describe('Query API', () => {
     });
 
     it('should contain all the elements in the light dom even if they get projected', () => {
-      const template = '<needs-query-and-project #q>' +
-          '<div text="hello"></div><div text="world"></div>' +
-          '</needs-query-and-project>';
+      const template =
+        '<needs-query-and-project #q>' +
+        '<div text="hello"></div><div text="world"></div>' +
+        '</needs-query-and-project>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
 
       expect(asNativeElements(view.debugElement.children)).toHaveText('hello|world|');
@@ -551,30 +609,28 @@ describe('Query API', () => {
       expect(q.query.first.text).toEqual('1');
     });
 
-    it('should maintain directives in pre-order depth-first DOM order after dynamic insertion',
-       () => {
-         const template = '<needs-view-query-order #q></needs-view-query-order>';
-         const view = createTestCmpAndDetectChanges(MyComp0, template);
-         const q: NeedsViewQueryOrder = view.debugElement.children[0].references!['q'];
+    it('should maintain directives in pre-order depth-first DOM order after dynamic insertion', () => {
+      const template = '<needs-view-query-order #q></needs-view-query-order>';
+      const view = createTestCmpAndDetectChanges(MyComp0, template);
+      const q: NeedsViewQueryOrder = view.debugElement.children[0].references!['q'];
 
-         expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
+      expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
 
-         q.list = ['-3', '2'];
-         view.detectChanges();
-         expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '-3', '2', '4']);
-       });
+      q.list = ['-3', '2'];
+      view.detectChanges();
+      expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '-3', '2', '4']);
+    });
 
-    it('should maintain directives in pre-order depth-first DOM order after dynamic insertion',
-       () => {
-         const template = '<needs-view-query-order-with-p #q></needs-view-query-order-with-p>';
-         const view = createTestCmpAndDetectChanges(MyComp0, template);
-         const q: NeedsViewQueryOrderWithParent = view.debugElement.children[0].references!['q'];
-         expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
+    it('should maintain directives in pre-order depth-first DOM order after dynamic insertion', () => {
+      const template = '<needs-view-query-order-with-p #q></needs-view-query-order-with-p>';
+      const view = createTestCmpAndDetectChanges(MyComp0, template);
+      const q: NeedsViewQueryOrderWithParent = view.debugElement.children[0].references!['q'];
+      expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
 
-         q.list = ['-3', '2'];
-         view.detectChanges();
-         expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '-3', '2', '4']);
-       });
+      q.list = ['-3', '2'];
+      view.detectChanges();
+      expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '-3', '2', '4']);
+    });
 
     it('should handle long ngFor cycles', () => {
       const template = '<needs-view-query-order #q></needs-view-query-order>';
@@ -604,7 +660,7 @@ describe('Query API', () => {
   describe('query over moved templates', () => {
     it('should include manually projected templates in queries', () => {
       const template =
-          '<manual-projecting #q><ng-template><div text="1"></div></ng-template></manual-projecting>';
+        '<manual-projecting #q><ng-template><div text="1"></div></ng-template></manual-projecting>';
       const view = createTestCmpAndDetectChanges(MyComp0, template);
       const q = view.debugElement.children[0].references!['q'];
       expect(q.query.length).toBe(0);
@@ -672,30 +728,27 @@ describe('Query API', () => {
       expect(q.query.length).toBe(0);
     });
 
-    it('should not throw if a content template is queried and created in the view during change detection - fixed in ivy',
-       () => {
-         @Component(
-             {selector: 'auto-projecting', template: '<div *ngIf="true; then: content"></div>'})
-         class AutoProjecting {
-           @ContentChild(TemplateRef) content!: TemplateRef<any>;
-           @ContentChildren(TextDirective) query!: QueryList<TextDirective>;
-         }
+    it('should not throw if a content template is queried and created in the view during change detection - fixed in ivy', () => {
+      @Component({selector: 'auto-projecting', template: '<div *ngIf="true; then: content"></div>'})
+      class AutoProjecting {
+        @ContentChild(TemplateRef) content!: TemplateRef<any>;
+        @ContentChildren(TextDirective) query!: QueryList<TextDirective>;
+      }
 
-         TestBed.configureTestingModule({declarations: [AutoProjecting]});
-         const template =
-             '<auto-projecting #q><ng-template><div text="1"></div></ng-template></auto-projecting>';
-         const view = createTestCmpAndDetectChanges(MyComp0, template);
+      TestBed.configureTestingModule({declarations: [AutoProjecting]});
+      const template =
+        '<auto-projecting #q><ng-template><div text="1"></div></ng-template></auto-projecting>';
+      const view = createTestCmpAndDetectChanges(MyComp0, template);
 
-         const q = view.debugElement.children[0].references!['q'];
-         expect(q.query.length).toBe(1);
-       });
+      const q = view.debugElement.children[0].references!['q'];
+      expect(q.query.length).toBe(1);
+    });
   });
 });
 
-
 @Directive({selector: '[text]', inputs: ['text'], exportAs: 'textDir'})
 class TextDirective {
-  text: string|undefined;
+  text: string | undefined;
 }
 
 @Component({selector: 'needs-content-children', template: ''})
@@ -720,7 +773,7 @@ class NeedsViewChildren implements AfterViewInit {
 
 @Component({selector: 'needs-content-child', template: ''})
 class NeedsContentChild implements AfterContentInit, AfterContentChecked {
-  private _child: TextDirective|undefined;
+  private _child: TextDirective | undefined;
 
   @ContentChild(TextDirective)
   set child(value) {
@@ -731,7 +784,7 @@ class NeedsContentChild implements AfterContentInit, AfterContentChecked {
   get child() {
     return this._child;
   }
-  logs: (string|null)[][] = [];
+  logs: (string | null)[][] = [];
 
   ngAfterContentInit() {
     this.logs.push(['init', this.child?.text ?? null]);
@@ -752,7 +805,7 @@ class NeedsViewChild implements AfterViewInit, AfterViewChecked {
   shouldShow: boolean = true;
   shouldShow2: boolean = false;
 
-  private _child: TextDirective|undefined;
+  private _child: TextDirective | undefined;
 
   @ViewChild(TextDirective)
   set child(value) {
@@ -763,7 +816,7 @@ class NeedsViewChild implements AfterViewInit, AfterViewChecked {
   get child() {
     return this._child;
   }
-  logs: (string|null)[][] = [];
+  logs: (string | null)[][] = [];
 
   ngAfterViewInit() {
     this.logs.push(['init', this.child?.text ?? null]);
@@ -779,7 +832,6 @@ function createTestCmp<T>(type: Type<T>, template: string): ComponentFixture<T>
   return view;
 }
 
-
 function createTestCmpAndDetectChanges<T>(type: Type<T>, template: string): ComponentFixture<T> {
   const view = createTestCmp(type, template);
   view.detectChanges();
@@ -793,12 +845,11 @@ class NeedsStaticContentAndViewChild {
 }
 
 @Directive({selector: '[dir]'})
-class InertDirective {
-}
+class InertDirective {}
 
 @Component({
   selector: 'needs-query',
-  template: '<div text="ignoreme"></div><b *ngFor="let  dir of query">{{dir.text}}|</b>'
+  template: '<div text="ignoreme"></div><b *ngFor="let  dir of query">{{dir.text}}|</b>',
 })
 class NeedsQuery {
   @ContentChildren(TextDirective) query!: QueryList<TextDirective>;
@@ -814,7 +865,7 @@ class NeedsFourQueries {
 
 @Component({
   selector: 'needs-query-desc',
-  template: '<ng-content></ng-content><div *ngFor="let  dir of query">{{dir.text}}|</div>'
+  template: '<ng-content></ng-content><div *ngFor="let  dir of query">{{dir.text}}|</div>',
 })
 class NeedsQueryDesc {
   @ContentChildren(TextDirective, {descendants: true}) query!: QueryList<TextDirective>;
@@ -837,7 +888,7 @@ class NeedsQueryByTwoLabels {
 
 @Component({
   selector: 'needs-query-and-project',
-  template: '<div *ngFor="let  dir of query">{{dir.text}}|</div><ng-content></ng-content>'
+  template: '<div *ngFor="let  dir of query">{{dir.text}}|</div><ng-content></ng-content>',
 })
 class NeedsQueryAndProject {
   @ContentChildren(TextDirective) query!: QueryList<TextDirective>;
@@ -845,7 +896,7 @@ class NeedsQueryAndProject {
 
 @Component({
   selector: 'needs-view-query',
-  template: '<div text="1"><div text="2"></div></div><div text="3"></div><div text="4"></div>'
+  template: '<div text="1"><div text="2"></div></div><div text="3"></div><div text="4"></div>',
 })
 class NeedsViewQuery {
   @ViewChildren(TextDirective) query!: QueryList<TextDirective>;
@@ -859,7 +910,7 @@ class NeedsViewQueryIf {
 
 @Component({
   selector: 'needs-view-query-nested-if',
-  template: '<div text="1"><div *ngIf="show"><div dir></div></div></div>'
+  template: '<div text="1"><div *ngIf="show"><div dir></div></div></div>',
 })
 class NeedsViewQueryNestedIf {
   show: boolean = true;
@@ -868,9 +919,10 @@ class NeedsViewQueryNestedIf {
 
 @Component({
   selector: 'needs-view-query-order',
-  template: '<div text="1"></div>' +
-      '<div *ngFor="let  i of list" [text]="i"></div>' +
-      '<div text="4"></div>'
+  template:
+    '<div text="1"></div>' +
+    '<div *ngFor="let  i of list" [text]="i"></div>' +
+    '<div text="4"></div>',
 })
 class NeedsViewQueryOrder {
   @ViewChildren(TextDirective) query!: QueryList<TextDirective>;
@@ -879,9 +931,10 @@ class NeedsViewQueryOrder {
 
 @Component({
   selector: 'needs-view-query-order-with-p',
-  template: '<div dir><div text="1"></div>' +
-      '<div *ngFor="let  i of list" [text]="i"></div>' +
-      '<div text="4"></div></div>'
+  template:
+    '<div dir><div text="1"></div>' +
+    '<div *ngFor="let  i of list" [text]="i"></div>' +
+    '<div text="4"></div></div>',
 })
 class NeedsViewQueryOrderWithParent {
   @ViewChildren(TextDirective) query!: QueryList<TextDirective>;
@@ -895,8 +948,10 @@ class NeedsTpl {
   constructor(public vc: ViewContainerRef) {}
 }
 
-@Component(
-    {selector: 'needs-named-tpl', template: '<ng-template #tpl><div>shadow</div></ng-template>'})
+@Component({
+  selector: 'needs-named-tpl',
+  template: '<ng-template #tpl><div>shadow</div></ng-template>',
+})
 class NeedsNamedTpl {
   @ViewChild('tpl', {static: true}) viewTpl!: TemplateRef<Object>;
   @ContentChild('tpl', {static: true}) contentTpl!: TemplateRef<Object>;
@@ -922,7 +977,7 @@ class NeedsContentChildrenShallow {
 
 @Component({
   selector: 'needs-content-child-template-ref',
-  template: '<div [ngTemplateOutlet]="templateRef"></div>'
+  template: '<div [ngTemplateOutlet]="templateRef"></div>',
 })
 class NeedsContentChildTemplateRef {
   @ContentChild(TemplateRef, {static: true}) templateRef!: TemplateRef<any>;
@@ -930,12 +985,12 @@ class NeedsContentChildTemplateRef {
 
 @Component({
   selector: 'needs-content-child-template-ref-app',
-  template: '<needs-content-child-template-ref>' +
-      '<ng-template>OUTER<ng-template>INNER</ng-template></ng-template>' +
-      '</needs-content-child-template-ref>'
+  template:
+    '<needs-content-child-template-ref>' +
+    '<ng-template>OUTER<ng-template>INNER</ng-template></ng-template>' +
+    '</needs-content-child-template-ref>',
 })
-class NeedsContentChildTemplateRefApp {
-}
+class NeedsContentChildTemplateRefApp {}
 
 @Component({
   selector: 'needs-view-children-read',
@@ -978,8 +1033,7 @@ class MyComp0 {
 }
 
 @Component({selector: 'my-comp', template: ''})
-class MyCompBroken0 {
-}
+class MyCompBroken0 {}
 
 @Component({selector: 'manual-projecting', template: '<div #vc></div>'})
 class ManualProjecting {
diff --git a/packages/core/test/linker/query_list_spec.ts b/packages/core/test/linker/query_list_spec.ts
index 7a0120970367b..63b66020b81b6 100644
--- a/packages/core/test/linker/query_list_spec.ts
+++ b/packages/core/test/linker/query_list_spec.ts
@@ -67,14 +67,14 @@ describe('QueryList', () => {
   it('should support forEach', () => {
     queryList.reset(['one', 'two']);
     let join = '';
-    queryList.forEach((x) => join = join + x);
+    queryList.forEach((x) => (join = join + x));
     expect(join).toEqual('onetwo');
   });
 
   it('should support forEach with index', () => {
     queryList.reset(['one', 'two']);
     let join = '';
-    queryList.forEach((x, i) => join = join + x + i);
+    queryList.forEach((x, i) => (join = join + x + i));
     expect(join).toEqual('one0two1');
   });
 
@@ -105,8 +105,9 @@ describe('QueryList', () => {
 
   it('should support reduce with index', () => {
     queryList.reset(['one', 'two']);
-    expect(queryList.reduce((a: string, x: string, i: number) => a + x + i, 'start:'))
-        .toEqual('start:one0two1');
+    expect(queryList.reduce((a: string, x: string, i: number) => a + x + i, 'start:')).toEqual(
+      'start:one0two1',
+    );
   });
 
   it('should support toArray', () => {
@@ -134,12 +135,12 @@ describe('QueryList', () => {
 
   it('should support some', () => {
     queryList.reset(['one', 'two', 'three']);
-    expect(queryList.some(item => item === 'one')).toEqual(true);
-    expect(queryList.some(item => item === 'four')).toEqual(false);
+    expect(queryList.some((item) => item === 'one')).toEqual(true);
+    expect(queryList.some((item) => item === 'four')).toEqual(false);
   });
 
   it('should support guards on filter', () => {
-    const qList = new QueryList<'foo'|'bar'>();
+    const qList = new QueryList<'foo' | 'bar'>();
     qList.reset(['foo']);
     const foos: Array<'foo'> = queryList.filter((item): item is 'foo' => item === 'foo');
     expect(qList.length).toEqual(1);
@@ -164,38 +165,38 @@ describe('QueryList', () => {
   if (getDOM().supportsDOMEvents) {
     describe('simple observable interface', () => {
       it('should fire callbacks on change', fakeAsync(() => {
-           let fires = 0;
-           queryList.changes.subscribe({
-             next: (_) => {
-               fires += 1;
-             }
-           });
+        let fires = 0;
+        queryList.changes.subscribe({
+          next: (_) => {
+            fires += 1;
+          },
+        });
 
-           queryList.notifyOnChanges();
-           tick();
+        queryList.notifyOnChanges();
+        tick();
 
-           expect(fires).toEqual(1);
+        expect(fires).toEqual(1);
 
-           queryList.notifyOnChanges();
-           tick();
+        queryList.notifyOnChanges();
+        tick();
 
-           expect(fires).toEqual(2);
-         }));
+        expect(fires).toEqual(2);
+      }));
 
       it('should provides query list as an argument', fakeAsync(() => {
-           let recorded!: QueryList<string>;
-           queryList.changes.subscribe({
-             next: (v: QueryList<string>) => {
-               recorded = v;
-             }
-           });
-
-           queryList.reset(['one']);
-           queryList.notifyOnChanges();
-           tick();
-
-           expect(recorded).toBe(queryList);
-         }));
+        let recorded!: QueryList<string>;
+        queryList.changes.subscribe({
+          next: (v: QueryList<string>) => {
+            recorded = v;
+          },
+        });
+
+        queryList.reset(['one']);
+        queryList.notifyOnChanges();
+        tick();
+
+        expect(recorded).toBe(queryList);
+      }));
     });
   }
 });
diff --git a/packages/core/test/linker/regression_integration_spec.ts b/packages/core/test/linker/regression_integration_spec.ts
index ed9a8be17b9c0..f7a8edfe71008 100644
--- a/packages/core/test/linker/regression_integration_spec.ts
+++ b/packages/core/test/linker/regression_integration_spec.ts
@@ -7,7 +7,34 @@
  */
 
 import {DOCUMENT, ɵgetDOM as getDOM} from '@angular/common';
-import {ApplicationRef, Component, ComponentRef, ContentChild, createComponent, destroyPlatform, Directive, EnvironmentInjector, ErrorHandler, EventEmitter, HostListener, InjectionToken, Injector, Input, NgModule, NgZone, Output, Pipe, PipeTransform, Provider, QueryList, Renderer2, SimpleChanges, TemplateRef, ViewChildren, ViewContainerRef} from '@angular/core';
+import {
+  ApplicationRef,
+  Component,
+  ComponentRef,
+  ContentChild,
+  createComponent,
+  destroyPlatform,
+  Directive,
+  EnvironmentInjector,
+  ErrorHandler,
+  EventEmitter,
+  HostListener,
+  InjectionToken,
+  Injector,
+  Input,
+  NgModule,
+  NgZone,
+  Output,
+  Pipe,
+  PipeTransform,
+  Provider,
+  QueryList,
+  Renderer2,
+  SimpleChanges,
+  TemplateRef,
+  ViewChildren,
+  ViewContainerRef,
+} from '@angular/core';
 import {fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
 import {BrowserModule, By} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@@ -62,47 +89,47 @@ describe('regressions', () => {
     });
 
     it('should only update the bound property when using asyncPipe - #15205', fakeAsync(() => {
-         @Component({template: '<div myDir [a]="p | async" [b]="2"></div>'})
-         class MyComp {
-           p = Promise.resolve(1);
-         }
-
-         @Directive({selector: '[myDir]'})
-         class MyDir {
-           setterCalls: {[key: string]: any} = {};
-           changes: SimpleChanges|undefined;
-
-           @Input()
-           set a(v: number) {
-             this.setterCalls['a'] = v;
-           }
-           @Input()
-           set b(v: number) {
-             this.setterCalls['b'] = v;
-           }
-
-           ngOnChanges(changes: SimpleChanges) {
-             this.changes = changes;
-           }
-         }
-
-         TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
-         const fixture = TestBed.createComponent(MyComp);
-         const dir = fixture.debugElement.query(By.directive(MyDir)).injector.get(MyDir) as MyDir;
-
-         fixture.detectChanges();
-         expect(dir.setterCalls).toEqual({'a': null, 'b': 2});
-         expect(Object.keys(dir.changes ?? {})).toEqual(['a', 'b']);
-
-         dir.setterCalls = {};
-         dir.changes = {};
-
-         tick();
-         fixture.detectChanges();
-
-         expect(dir.setterCalls).toEqual({'a': 1});
-         expect(Object.keys(dir.changes)).toEqual(['a']);
-       }));
+      @Component({template: '<div myDir [a]="p | async" [b]="2"></div>'})
+      class MyComp {
+        p = Promise.resolve(1);
+      }
+
+      @Directive({selector: '[myDir]'})
+      class MyDir {
+        setterCalls: {[key: string]: any} = {};
+        changes: SimpleChanges | undefined;
+
+        @Input()
+        set a(v: number) {
+          this.setterCalls['a'] = v;
+        }
+        @Input()
+        set b(v: number) {
+          this.setterCalls['b'] = v;
+        }
+
+        ngOnChanges(changes: SimpleChanges) {
+          this.changes = changes;
+        }
+      }
+
+      TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
+      const fixture = TestBed.createComponent(MyComp);
+      const dir = fixture.debugElement.query(By.directive(MyDir)).injector.get(MyDir) as MyDir;
+
+      fixture.detectChanges();
+      expect(dir.setterCalls).toEqual({'a': null, 'b': 2});
+      expect(Object.keys(dir.changes ?? {})).toEqual(['a', 'b']);
+
+      dir.setterCalls = {};
+      dir.changes = {};
+
+      tick();
+      fixture.detectChanges();
+
+      expect(dir.setterCalls).toEqual({'a': 1});
+      expect(Object.keys(dir.changes)).toEqual(['a']);
+    }));
 
     it('should only evaluate methods once - #10639', () => {
       TestBed.configureTestingModule({declarations: [MyCountingComp]});
@@ -119,7 +146,7 @@ describe('regressions', () => {
     it('should evaluate a conditional in a statement binding', () => {
       @Component({selector: 'some-comp', template: '<p (click)="nullValue?.click()"></p>'})
       class SomeComponent {
-        nullValue: SomeReferencedClass|undefined;
+        nullValue: SomeReferencedClass | undefined;
       }
 
       class SomeReferencedClass {
@@ -127,8 +154,9 @@ describe('regressions', () => {
       }
 
       expect(() => {
-        const fixture = TestBed.configureTestingModule({declarations: [SomeComponent]})
-                            .createComponent(SomeComponent);
+        const fixture = TestBed.configureTestingModule({
+          declarations: [SomeComponent],
+        }).createComponent(SomeComponent);
 
         fixture.detectChanges(/* checkNoChanges */ false);
       }).not.toThrow();
@@ -169,8 +197,10 @@ describe('regressions', () => {
       const token2 = new InjectionToken('someToken');
       const tokenValue1 = {'a': 1};
       const tokenValue2 = {'a': 1};
-      const injector = createInjector(
-          [{provide: token1, useValue: tokenValue1}, {provide: token2, useValue: tokenValue2}]);
+      const injector = createInjector([
+        {provide: token1, useValue: tokenValue1},
+        {provide: token2, useValue: tokenValue2},
+      ]);
 
       expect(injector.get(token1)).toEqual(tokenValue1);
       expect(injector.get(token2)).toEqual(tokenValue2);
@@ -216,17 +246,19 @@ describe('regressions', () => {
   it('should generate the correct output when constructors have the same name', () => {
     function ComponentFactory(selector: string, template: string) {
       @Component({selector, template})
-      class MyComponent {
-      }
+      class MyComponent {}
       return MyComponent;
     }
     const HeroComponent = ComponentFactory('my-hero', 'my hero');
     const VillainComponent = ComponentFactory('a-villain', 'a villain');
     const MainComponent = ComponentFactory(
-        'my-app', 'I was saved by <my-hero></my-hero> from <a-villain></a-villain>.');
+      'my-app',
+      'I was saved by <my-hero></my-hero> from <a-villain></a-villain>.',
+    );
 
-    TestBed.configureTestingModule(
-        {declarations: [HeroComponent, VillainComponent, MainComponent]});
+    TestBed.configureTestingModule({
+      declarations: [HeroComponent, VillainComponent, MainComponent],
+    });
     const fixture = TestBed.createComponent(MainComponent);
     expect(fixture.nativeElement).toHaveText('I was saved by my hero from a villain.');
   });
@@ -246,16 +278,16 @@ describe('regressions', () => {
 
   it('should not recreate TemplateRef references during dirty checking', () => {
     @Component({template: '<div [someDir]="someRef"></div><ng-template #someRef></ng-template>'})
-    class MyComp {
-    }
+    class MyComp {}
 
     @Directive({selector: '[someDir]'})
     class MyDir {
-      @Input('someDir') template: TemplateRef<any>|undefined;
+      @Input('someDir') template: TemplateRef<any> | undefined;
     }
 
-    const ctx =
-        TestBed.configureTestingModule({declarations: [MyComp, MyDir]}).createComponent(MyComp);
+    const ctx = TestBed.configureTestingModule({declarations: [MyComp, MyDir]}).createComponent(
+      MyComp,
+    );
     const dir = <MyDir>ctx.debugElement.query(By.directive(MyDir)).injector.get(MyDir);
 
     expect(dir.template).toBeUndefined();
@@ -299,11 +331,11 @@ describe('regressions', () => {
   describe('empty templates - #15143', () => {
     it('should allow empty components', () => {
       @Component({template: ''})
-      class MyComp {
-      }
+      class MyComp {}
 
-      const fixture =
-          TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+      const fixture = TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(
+        MyComp,
+      );
       fixture.detectChanges();
 
       expect(fixture.debugElement.childNodes.length).toBe(0);
@@ -313,12 +345,11 @@ describe('regressions', () => {
   it('should throw if @ContentChild and @Input are on the same property', () => {
     @Directive({selector: 'test'})
     class Test {
-      @Input() @ContentChild(TemplateRef, {static: true}) tpl: TemplateRef<any>|undefined;
+      @Input() @ContentChild(TemplateRef, {static: true}) tpl: TemplateRef<any> | undefined;
     }
 
     @Component({selector: 'my-app', template: `<test></test>`})
-    class App {
-    }
+    class App {}
 
     expect(() => {
       TestBed.configureTestingModule({declarations: [App, Test]}).createComponent(App);
@@ -327,11 +358,11 @@ describe('regressions', () => {
 
   it('should not add ng-version for dynamically created components', () => {
     @Component({template: ''})
-    class App {
-    }
+    class App {}
 
-    const compRef =
-        createComponent(App, {environmentInjector: TestBed.inject(EnvironmentInjector)});
+    const compRef = createComponent(App, {
+      environmentInjector: TestBed.inject(EnvironmentInjector),
+    });
 
     expect(compRef.location.nativeElement.hasAttribute('ng-version')).toBe(false);
   });
@@ -371,7 +402,7 @@ describe('regressions using bootstrap', () => {
       @Component({
         selector: COMP_SELECTOR,
         template:
-            '<button (click)="next()"></button><button (click)="nextAndThrow()"></button><button (dirClick)="nextAndThrow()"></button><span>Value:{{value}}</span><span>{{throwIfNeeded()}}</span>'
+          '<button (click)="next()"></button><button (click)="nextAndThrow()"></button><button (dirClick)="nextAndThrow()"></button><span>Value:{{value}}</span><span>{{throwIfNeeded()}}</span>',
       })
       class ErrorComp {
         value = 0;
@@ -408,46 +439,47 @@ describe('regressions using bootstrap', () => {
         bootstrap: [ErrorComp],
         providers: [{provide: ErrorHandler, useValue: errorHandler}],
       })
-      class TestModule {
-      }
-
-      platformBrowserDynamic().bootstrapModule(TestModule).then((ref) => {
-        NgZone.assertNotInAngularZone();
-        const appRef = ref.injector.get(ApplicationRef) as ApplicationRef;
-        const compRef = appRef.components[0] as ComponentRef<ErrorComp>;
-        const compEl = compRef.location.nativeElement;
-        const nextBtn = compEl.children[0];
-        const nextAndThrowBtn = compEl.children[1];
-        const nextAndThrowDirBtn = compEl.children[2];
-
-        const errorDelta = 1;
-        let currentErrorIndex = 0;
-
-        nextBtn.click();
-        assertValueAndErrors(compEl, 1, currentErrorIndex);
-        currentErrorIndex += errorDelta;
-        nextBtn.click();
-        assertValueAndErrors(compEl, 2, currentErrorIndex);
-        currentErrorIndex += errorDelta;
-
-        nextAndThrowBtn.click();
-        assertValueAndErrors(compEl, 3, currentErrorIndex);
-        currentErrorIndex += errorDelta;
-        nextAndThrowBtn.click();
-        assertValueAndErrors(compEl, 4, currentErrorIndex);
-        currentErrorIndex += errorDelta;
-
-        nextAndThrowDirBtn.click();
-        assertValueAndErrors(compEl, 5, currentErrorIndex);
-        currentErrorIndex += errorDelta;
-        nextAndThrowDirBtn.click();
-        assertValueAndErrors(compEl, 6, currentErrorIndex);
-        currentErrorIndex += errorDelta;
-
-        // Assert that there were no more errors
-        expect(logger.errors.length).toBe(currentErrorIndex);
-        done();
-      });
+      class TestModule {}
+
+      platformBrowserDynamic()
+        .bootstrapModule(TestModule)
+        .then((ref) => {
+          NgZone.assertNotInAngularZone();
+          const appRef = ref.injector.get(ApplicationRef) as ApplicationRef;
+          const compRef = appRef.components[0] as ComponentRef<ErrorComp>;
+          const compEl = compRef.location.nativeElement;
+          const nextBtn = compEl.children[0];
+          const nextAndThrowBtn = compEl.children[1];
+          const nextAndThrowDirBtn = compEl.children[2];
+
+          const errorDelta = 1;
+          let currentErrorIndex = 0;
+
+          nextBtn.click();
+          assertValueAndErrors(compEl, 1, currentErrorIndex);
+          currentErrorIndex += errorDelta;
+          nextBtn.click();
+          assertValueAndErrors(compEl, 2, currentErrorIndex);
+          currentErrorIndex += errorDelta;
+
+          nextAndThrowBtn.click();
+          assertValueAndErrors(compEl, 3, currentErrorIndex);
+          currentErrorIndex += errorDelta;
+          nextAndThrowBtn.click();
+          assertValueAndErrors(compEl, 4, currentErrorIndex);
+          currentErrorIndex += errorDelta;
+
+          nextAndThrowDirBtn.click();
+          assertValueAndErrors(compEl, 5, currentErrorIndex);
+          currentErrorIndex += errorDelta;
+          nextAndThrowDirBtn.click();
+          assertValueAndErrors(compEl, 6, currentErrorIndex);
+          currentErrorIndex += errorDelta;
+
+          // Assert that there were no more errors
+          expect(logger.errors.length).toBe(currentErrorIndex);
+          done();
+        });
 
       function assertValueAndErrors(compEl: any, value: number, errorIndex: number) {
         expect(compEl).toHaveText(`Value:${value}`);
@@ -481,12 +513,11 @@ class CustomPipe implements PipeTransform {
 }
 
 @Component({selector: 'cmp-content', template: `<ng-content></ng-content>`})
-class CmpWithNgContent {
-}
+class CmpWithNgContent {}
 
 @Component({selector: 'counting-cmp', template: ''})
 class MyCountingComp {
-  method(): {value: string}|undefined {
+  method(): {value: string} | undefined {
     MyCountingComp.calls++;
     return {value: 'counting method value'};
   }
@@ -513,19 +544,16 @@ class CountingPipe implements PipeTransform {
   selector: 'left',
   template: `L<right *ngIf="false"></right>`,
 })
-class LeftComp {
-}
+class LeftComp {}
 
 @Component({
   selector: 'right',
   template: `R<left *ngIf="false"></left>`,
 })
-class RightComp {
-}
+class RightComp {}
 
 @Component({
   selector: 'fakeRecursiveComp',
   template: `[<left *ngIf="false"></left><right *ngIf="false"></right>]`,
 })
-export class FakeRecursiveComp {
-}
+export class FakeRecursiveComp {}
diff --git a/packages/core/test/linker/resource_loader_mock.ts b/packages/core/test/linker/resource_loader_mock.ts
index 4824adcc7f78f..46d5dfe4fa3e9 100644
--- a/packages/core/test/linker/resource_loader_mock.ts
+++ b/packages/core/test/linker/resource_loader_mock.ts
@@ -116,7 +116,7 @@ class _PendingRequest {
     });
   }
 
-  complete(response: string|null) {
+  complete(response: string | null) {
     if (response == null) {
       this.reject(`Failed to load ${this.url}`);
     } else {
diff --git a/packages/core/test/linker/security_integration_spec.ts b/packages/core/test/linker/security_integration_spec.ts
index 0641c1c99d132..533b8e94273e5 100644
--- a/packages/core/test/linker/security_integration_spec.ts
+++ b/packages/core/test/linker/security_integration_spec.ts
@@ -21,13 +21,10 @@ class OnPrefixDir {
   @Input() onclick: any;
 }
 
-describe('security integration tests', function() {
+describe('security integration tests', function () {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        SecuredComponent,
-        OnPrefixDir,
-      ]
+      declarations: [SecuredComponent, OnPrefixDir],
     });
   });
 
@@ -46,9 +43,9 @@ describe('security integration tests', function() {
       expect(() => {
         const cmp = TestBed.createComponent(SecuredComponent);
         cmp.detectChanges();
-      })
-          .toThrowError(
-              /Binding to event attribute 'onclick' is disallowed for security reasons, please use \(click\)=.../);
+      }).toThrowError(
+        /Binding to event attribute 'onclick' is disallowed for security reasons, please use \(click\)=.../,
+      );
     });
 
     // this test is similar to the previous one, but since on-prefixed attributes validation now
@@ -56,29 +53,29 @@ describe('security integration tests', function() {
     it('should disallow binding to on* with NO_ERRORS_SCHEMA', () => {
       const template = `<div [onclick]="ctxProp"></div>`;
       TestBed.overrideComponent(SecuredComponent, {set: {template}}).configureTestingModule({
-        schemas: [NO_ERRORS_SCHEMA]
+        schemas: [NO_ERRORS_SCHEMA],
       });
 
       expect(() => {
         const cmp = TestBed.createComponent(SecuredComponent);
         cmp.detectChanges();
-      })
-          .toThrowError(
-              /Binding to event property 'onclick' is disallowed for security reasons, please use \(click\)=.../);
+      }).toThrowError(
+        /Binding to event property 'onclick' is disallowed for security reasons, please use \(click\)=.../,
+      );
     });
 
     it('should disallow binding to on* unless it is consumed by a directive', () => {
       const template = `<div [onPrefixedProp]="ctxProp" [onclick]="ctxProp"></div>`;
       TestBed.overrideComponent(SecuredComponent, {set: {template}}).configureTestingModule({
-        schemas: [NO_ERRORS_SCHEMA]
+        schemas: [NO_ERRORS_SCHEMA],
       });
 
       // should not throw for inputs starting with "on"
       let cmp: ComponentFixture<SecuredComponent> = undefined!;
-      expect(() => cmp = TestBed.createComponent(SecuredComponent)).not.toThrow();
+      expect(() => (cmp = TestBed.createComponent(SecuredComponent))).not.toThrow();
 
       // must bind to the directive not to the property of the div
-      const value = cmp.componentInstance.ctxProp = {};
+      const value = (cmp.componentInstance.ctxProp = {});
       cmp.detectChanges();
       const div = cmp.debugElement.children[0];
       expect(div.injector.get(OnPrefixDir).onclick).toBe(value);
@@ -87,7 +84,7 @@ describe('security integration tests', function() {
     });
   });
 
-  describe('safe HTML values', function() {
+  describe('safe HTML values', function () {
     it('should not escape values marked as trusted', () => {
       const template = `<a [href]="ctxProp">Link Title</a>`;
       TestBed.overrideComponent(SecuredComponent, {set: {template}});
@@ -161,7 +158,7 @@ describe('security integration tests', function() {
     it('should escape unsafe properties if they are used in host bindings', () => {
       @Directive({selector: '[dirHref]'})
       class HrefDirective {
-        @HostBinding('href') @Input() dirHref: string|undefined;
+        @HostBinding('href') @Input() dirHref: string | undefined;
       }
 
       const template = `<a [dirHref]="ctxProp">Link Title</a>`;
@@ -175,7 +172,7 @@ describe('security integration tests', function() {
     it('should escape unsafe attributes if they are used in host bindings', () => {
       @Directive({selector: '[dirHref]'})
       class HrefDirective {
-        @HostBinding('attr.href') @Input() dirHref: string|undefined;
+        @HostBinding('attr.href') @Input() dirHref: string | undefined;
       }
 
       const template = `<a [dirHref]="ctxProp">Link Title</a>`;
@@ -227,24 +224,27 @@ describe('security integration tests', function() {
       const template = `<iframe srcdoc="foo" i18n-srcdoc></iframe>`;
       TestBed.overrideComponent(SecuredComponent, {set: {template}});
 
-      expect(() => TestBed.createComponent(SecuredComponent))
-          .toThrowError(/Translating attribute 'srcdoc' is disallowed for security reasons./);
+      expect(() => TestBed.createComponent(SecuredComponent)).toThrowError(
+        /Translating attribute 'srcdoc' is disallowed for security reasons./,
+      );
     });
 
     it('should throw error on security-sensitive attributes with interpolated values', () => {
       const template = `<object i18n-data data="foo{{bar}}baz"></object>`;
       TestBed.overrideComponent(SecuredComponent, {set: {template}});
 
-      expect(() => TestBed.createComponent(SecuredComponent))
-          .toThrowError(/Translating attribute 'data' is disallowed for security reasons./);
+      expect(() => TestBed.createComponent(SecuredComponent)).toThrowError(
+        /Translating attribute 'data' is disallowed for security reasons./,
+      );
     });
 
     it('should throw error on security-sensitive attributes with bound values', () => {
       const template = `<div [innerHTML]="foo" i18n-innerHTML></div>`;
       TestBed.overrideComponent(SecuredComponent, {set: {template}});
 
-      expect(() => TestBed.createComponent(SecuredComponent))
-          .toThrowError(/Translating attribute 'innerHTML' is disallowed for security reasons./);
+      expect(() => TestBed.createComponent(SecuredComponent)).toThrowError(
+        /Translating attribute 'innerHTML' is disallowed for security reasons./,
+      );
     });
   });
 });
diff --git a/packages/core/test/linker/source_map_integration_node_only_spec.ts b/packages/core/test/linker/source_map_integration_node_only_spec.ts
index 02e0927df4ddd..78cbaf0ef107b 100644
--- a/packages/core/test/linker/source_map_integration_node_only_spec.ts
+++ b/packages/core/test/linker/source_map_integration_node_only_spec.ts
@@ -34,8 +34,8 @@ describe('jit source mapping', () => {
         {
           provide: JitEvaluator,
           useValue: jitEvaluator,
-        }
-      ]
+        },
+      ],
     });
   });
 
@@ -68,19 +68,18 @@ describe('jit source mapping', () => {
       it('should use the right source url in html parse errors', async () => {
         const template = '<div>\n  </error>';
         @Component({...templateDecorator(template)})
-        class MyComp {
-        }
+        class MyComp {}
 
-        await expectAsync(resolveCompileAndCreateComponent(MyComp, template))
-            .toBeRejectedWithError(new RegExp(`${escapeRegExp(ngUrl)}@1:2`));
+        await expectAsync(resolveCompileAndCreateComponent(MyComp, template)).toBeRejectedWithError(
+          new RegExp(`${escapeRegExp(ngUrl)}@1:2`),
+        );
       });
 
       it('should create a sourceMap for templates', async () => {
         const template = `Hello World!`;
 
         @Component({...templateDecorator(template)})
-        class MyComp {
-        }
+        class MyComp {}
 
         await resolveCompileAndCreateComponent(MyComp, template);
 
@@ -89,13 +88,11 @@ describe('jit source mapping', () => {
         expect(sourceMap.sourcesContent).toEqual([' ', template]);
       });
 
-
       xit('should report source location for di errors', async () => {
         const template = `<div>\n    <div   someDir></div></div>`;
 
         @Component({...templateDecorator(template)})
-        class MyComp {
-        }
+        class MyComp {}
 
         @Directive({selector: '[someDir]'})
         class SomeDir {
@@ -123,8 +120,7 @@ describe('jit source mapping', () => {
         const template = `<div someDir></div>|<div someDir="throw"></div>`;
 
         @Component({...templateDecorator(template)})
-        class MyComp {
-        }
+        class MyComp {}
 
         @Directive({selector: '[someDir]'})
         class SomeDir {
@@ -190,7 +186,7 @@ describe('jit source mapping', () => {
 
         let error: any;
         const errorHandler = TestBed.inject(ErrorHandler);
-        spyOn(errorHandler, 'handleError').and.callFake((e: any) => error = e);
+        spyOn(errorHandler, 'handleError').and.callFake((e: any) => (error = e));
         try {
           comp.debugElement.children[0].children[0].triggerEventHandler('click', 'EVENT');
         } catch (e) {
@@ -246,14 +242,14 @@ describe('jit source mapping', () => {
   interface TestConfig {
     ngUrl: string;
     templateDecorator: (template: string) => {
-      [key: string]: any
+      [key: string]: any;
     };
   }
 
   interface SourcePos {
-    source: string|null;
-    line: number|null;
-    column: number|null;
+    source: string | null;
+    line: number | null;
+    column: number | null;
   }
 
   /**
@@ -274,21 +270,23 @@ describe('jit source mapping', () => {
      * @param genFile the URL of the file whose source-map we want.
      */
     getSourceMap(genFile: string): SourceMap {
-      return this.sources.map(source => extractSourceMap(source))
-          .find(map => !!(map && map.file === genFile))!;
+      return this.sources
+        .map((source) => extractSourceMap(source))
+        .find((map) => !!(map && map.file === genFile))!;
     }
 
     async getSourcePositionForStack(stack: string, genFile: string): Promise<SourcePos> {
       const urlRegexp = new RegExp(`(${escapeRegExp(genFile)}):(\\d+):(\\d+)`);
-      const pos = stack.split('\n')
-                      .map(line => urlRegexp.exec(line))
-                      .filter(match => !!match)
-                      .map(match => ({
-                             file: match![1],
-                             line: parseInt(match![2], 10),
-                             column: parseInt(match![3], 10)
-                           }))
-                      .shift();
+      const pos = stack
+        .split('\n')
+        .map((line) => urlRegexp.exec(line))
+        .filter((match) => !!match)
+        .map((match) => ({
+          file: match![1],
+          line: parseInt(match![2], 10),
+          column: parseInt(match![3], 10),
+        }))
+        .shift();
       if (!pos) {
         throw new Error(`${genFile} was not mentioned in this stack:\n${stack}`);
       }
diff --git a/packages/core/test/linker/source_map_util.ts b/packages/core/test/linker/source_map_util.ts
index 1d19fb3cc8fd0..955f4ba5d17ac 100644
--- a/packages/core/test/linker/source_map_util.ts
+++ b/packages/core/test/linker/source_map_util.ts
@@ -10,13 +10,15 @@ import {SourceMap} from '@angular/compiler';
 import {SourceMapConsumer} from 'source-map';
 
 export interface SourceLocation {
-  line: number|null;
-  column: number|null;
-  source: string|null;
+  line: number | null;
+  column: number | null;
+  source: string | null;
 }
 
 export async function originalPositionFor(
-    sourceMap: SourceMap, genPosition: {line: number, column: number}): Promise<SourceLocation> {
+  sourceMap: SourceMap,
+  genPosition: {line: number; column: number},
+): Promise<SourceLocation> {
   // Note: The `SourceMap` type from the compiler is different to `RawSourceMap`
   // from the `source-map` package, but the method we rely on works as expected.
   const smc = await new SourceMapConsumer(sourceMap as any);
@@ -26,10 +28,10 @@ export async function originalPositionFor(
   return {line, column, source};
 }
 
-export function extractSourceMap(source: string): SourceMap|null {
+export function extractSourceMap(source: string): SourceMap | null {
   let idx = source.lastIndexOf('\n//#');
   if (idx == -1) return null;
   const smComment = source.slice(idx).split('\n', 2)[1].trim();
   const smB64 = smComment.split('sourceMappingURL=data:application/json;base64,')[1];
-  return smB64 ? JSON.parse(Buffer.from(smB64, 'base64').toString()) as SourceMap : null;
+  return smB64 ? (JSON.parse(Buffer.from(smB64, 'base64').toString()) as SourceMap) : null;
 }
diff --git a/packages/core/test/linker/view_injector_integration_spec.ts b/packages/core/test/linker/view_injector_integration_spec.ts
index ba3c02307429d..5de7d48b92f39 100644
--- a/packages/core/test/linker/view_injector_integration_spec.ts
+++ b/packages/core/test/linker/view_injector_integration_spec.ts
@@ -6,7 +6,34 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Attribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, createComponent as coreCreateComponent, createEnvironmentInjector, DebugElement, Directive, ElementRef, EmbeddedViewRef, EnvironmentInjector, Host, Inject, InjectionToken, Injector, Input, NgModule, Optional, Pipe, PipeTransform, Provider, Self, SkipSelf, TemplateRef, Type, ViewContainerRef} from '@angular/core';
+import {
+  Attribute,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  createComponent as coreCreateComponent,
+  createEnvironmentInjector,
+  DebugElement,
+  Directive,
+  ElementRef,
+  EmbeddedViewRef,
+  EnvironmentInjector,
+  Host,
+  Inject,
+  InjectionToken,
+  Injector,
+  Input,
+  NgModule,
+  Optional,
+  Pipe,
+  PipeTransform,
+  Provider,
+  Self,
+  SkipSelf,
+  TemplateRef,
+  Type,
+  ViewContainerRef,
+} from '@angular/core';
 import {ComponentFixture, fakeAsync, TestBed} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
@@ -16,12 +43,10 @@ class SimpleDirective {
 }
 
 @Component({selector: '[simpleComponent]', template: ''})
-class SimpleComponent {
-}
+class SimpleComponent {}
 
 @Directive({selector: '[someOtherDirective]'})
-class SomeOtherDirective {
-}
+class SomeOtherDirective {}
 
 @Directive({selector: '[cycleDirective]'})
 class CycleDirective {
@@ -114,8 +139,10 @@ class NeedsAttribute {
   titleAttribute: any;
   fooAttribute: any;
   constructor(
-      @Attribute('type') typeAttribute: String, @Attribute('title') titleAttribute: String,
-      @Attribute('foo') fooAttribute: String) {
+    @Attribute('type') typeAttribute: String,
+    @Attribute('title') titleAttribute: String,
+    @Attribute('foo') fooAttribute: String,
+  ) {
     this.typeAttribute = typeAttribute;
     this.titleAttribute = titleAttribute;
     this.fooAttribute = fooAttribute;
@@ -155,7 +182,7 @@ class DirectiveNeedsChangeDetectorRef {
 @Component({
   selector: '[componentNeedsChangeDetectorRef]',
   template: '{{counter}}',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 class PushComponentNeedsChangeDetectorRef {
   counter: number = 0;
@@ -212,11 +239,13 @@ export class DuplicatePipe2 implements PipeTransform {
 }
 
 @Component({selector: 'root', template: ''})
-class TestComp {
-}
+class TestComp {}
 
 function createComponentFixture<T>(
-    template: string, providers?: Provider[]|null, comp?: Type<T>): ComponentFixture<T> {
+  template: string,
+  providers?: Provider[] | null,
+  comp?: Type<T>,
+): ComponentFixture<T> {
   if (!comp) {
     comp = <any>TestComp;
   }
@@ -286,32 +315,36 @@ describe('View injector', () => {
 
     it('should instantiate providers that have dependencies with SkipSelf', () => {
       TestBed.configureTestingModule({declarations: [SimpleDirective, SomeOtherDirective]});
-      TestBed.overrideDirective(
-          SimpleDirective, {add: {providers: [{provide: 'injectable1', useValue: 'injectable1'}]}});
+      TestBed.overrideDirective(SimpleDirective, {
+        add: {providers: [{provide: 'injectable1', useValue: 'injectable1'}]},
+      });
       TestBed.overrideDirective(SomeOtherDirective, {
         add: {
           providers: [
-            {provide: 'injectable1', useValue: 'new-injectable1'}, {
+            {provide: 'injectable1', useValue: 'new-injectable1'},
+            {
               provide: 'injectable2',
               useFactory: (val: any) => `${val}-injectable2`,
-              deps: [[new Inject('injectable1'), new SkipSelf()]]
-            }
-          ]
-        }
+              deps: [[new Inject('injectable1'), new SkipSelf()]],
+            },
+          ],
+        },
       });
       const el = createComponent('<div simpleDirective><span someOtherDirective></span></div>');
-      expect(el.children[0].children[0].injector.get('injectable2'))
-          .toEqual('injectable1-injectable2');
+      expect(el.children[0].children[0].injector.get('injectable2')).toEqual(
+        'injectable1-injectable2',
+      );
     });
 
     it('should instantiate providers that have dependencies', () => {
       TestBed.configureTestingModule({declarations: [SimpleDirective]});
       const providers = [
-        {provide: 'injectable1', useValue: 'injectable1'}, {
+        {provide: 'injectable1', useValue: 'injectable1'},
+        {
           provide: 'injectable2',
           useFactory: (val: any) => `${val}-injectable2`,
-          deps: ['injectable1']
-        }
+          deps: ['injectable1'],
+        },
       ];
       TestBed.overrideDirective(SimpleDirective, {add: {providers}});
       const el = createComponent('<div simpleDirective></div>');
@@ -321,11 +354,12 @@ describe('View injector', () => {
     it('should instantiate viewProviders that have dependencies', () => {
       TestBed.configureTestingModule({declarations: [SimpleComponent]});
       const viewProviders = [
-        {provide: 'injectable1', useValue: 'injectable1'}, {
+        {provide: 'injectable1', useValue: 'injectable1'},
+        {
           provide: 'injectable2',
           useFactory: (val: any) => `${val}-injectable2`,
-          deps: ['injectable1']
-        }
+          deps: ['injectable1'],
+        },
       ];
       TestBed.overrideComponent(SimpleComponent, {set: {viewProviders}});
       const el = createComponent('<div simpleComponent></div>');
@@ -334,8 +368,9 @@ describe('View injector', () => {
 
     it('should instantiate components that depend on viewProviders providers', () => {
       TestBed.configureTestingModule({declarations: [NeedsServiceComponent]});
-      TestBed.overrideComponent(
-          NeedsServiceComponent, {set: {providers: [{provide: 'service', useValue: 'service'}]}});
+      TestBed.overrideComponent(NeedsServiceComponent, {
+        set: {providers: [{provide: 'service', useValue: 'service'}]},
+      });
       const el = createComponent('<div needsServiceComponent></div>');
       expect(el.children[0].injector.get(NeedsServiceComponent).service).toEqual('service');
     });
@@ -344,7 +379,7 @@ describe('View injector', () => {
       TestBed.configureTestingModule({declarations: [SimpleDirective]});
       const providers = [
         {provide: 'injectable1', useValue: 'injectable11', multi: true},
-        {provide: 'injectable1', useValue: 'injectable12', multi: true}
+        {provide: 'injectable1', useValue: 'injectable12', multi: true},
       ];
       TestBed.overrideDirective(SimpleDirective, {set: {providers}});
       const el = createComponent('<div simpleDirective></div>');
@@ -355,9 +390,9 @@ describe('View injector', () => {
       TestBed.configureTestingModule({declarations: [SimpleDirective]});
 
       let created = false;
-      TestBed.overrideDirective(
-          SimpleDirective,
-          {set: {providers: [{provide: 'service', useFactory: () => created = true}]}});
+      TestBed.overrideDirective(SimpleDirective, {
+        set: {providers: [{provide: 'service', useFactory: () => (created = true)}]},
+      });
       const el = createComponent('<div simpleDirective></div>');
 
       expect(created).toBe(false);
@@ -370,13 +405,15 @@ describe('View injector', () => {
     it('should provide undefined', () => {
       let factoryCounter = 0;
 
-      const el = createComponent('', [{
-                                   provide: 'token',
-                                   useFactory: () => {
-                                     factoryCounter++;
-                                     return undefined;
-                                   }
-                                 }]);
+      const el = createComponent('', [
+        {
+          provide: 'token',
+          useFactory: () => {
+            factoryCounter++;
+            return undefined;
+          },
+        },
+      ]);
 
       expect(el.injector.get('token')).toBeUndefined();
       expect(el.injector.get('token')).toBeUndefined();
@@ -392,17 +429,18 @@ describe('View injector', () => {
             {
               provide: 'eager',
               useFactory: (i: Injector) => `eagerValue: ${i.get('lazy')}`,
-              deps: [Injector]
+              deps: [Injector],
             },
-          ]
+          ],
         })
         class MyComp {
           // Component is eager, which makes all of its deps eager
           constructor(@Inject('eager') eager: any) {}
         }
 
-        const ctx =
-            TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+        const ctx = TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(
+          MyComp,
+        );
         expect(ctx.debugElement.injector.get('eager')).toBe('eagerValue: lazyValue');
       });
 
@@ -413,18 +451,19 @@ describe('View injector', () => {
             {
               provide: 'eager',
               useFactory: (i: Injector) => `eagerValue: ${i.get('lazy')}`,
-              deps: [Injector]
+              deps: [Injector],
             },
             {provide: 'lazy', useFactory: () => 'lazyValue'},
-          ]
+          ],
         })
         class MyComp {
           // Component is eager, which makes all of its deps eager
           constructor(@Inject('eager') eager: any) {}
         }
 
-        const ctx =
-            TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+        const ctx = TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(
+          MyComp,
+        );
         expect(ctx.debugElement.injector.get('eager')).toBe('eagerValue: lazyValue');
       });
     });
@@ -438,17 +477,18 @@ describe('View injector', () => {
             {
               provide: 'eager2',
               useFactory: (i: Injector) => `v2: ${i.get('eager1')}`,
-              deps: [Injector]
+              deps: [Injector],
             },
-          ]
+          ],
         })
         class MyComp {
           // Component is eager, which makes all of its deps eager
           constructor(@Inject('eager1') eager1: any, @Inject('eager2') eager2: any) {}
         }
 
-        const ctx =
-            TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+        const ctx = TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(
+          MyComp,
+        );
         expect(ctx.debugElement.injector.get('eager2')).toBe('v2: v1');
       });
 
@@ -459,36 +499,37 @@ describe('View injector', () => {
             {
               provide: 'eager1',
               useFactory: (i: Injector) => `v1: ${i.get('eager2')}`,
-              deps: [Injector]
+              deps: [Injector],
             },
             {provide: 'eager2', useFactory: () => 'v2'},
-          ]
+          ],
         })
         class MyComp {
           // Component is eager, which makes all of its deps eager
           constructor(@Inject('eager1') eager1: any, @Inject('eager2') eager2: any) {}
         }
 
-        const ctx =
-            TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+        const ctx = TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(
+          MyComp,
+        );
         expect(ctx.debugElement.injector.get('eager1')).toBe('v1: v2');
       });
     });
 
-    it('should allow injecting lazy providers via Injector.get from an eager provider that is declared earlier',
-       () => {
-         @Component({providers: [{provide: 'a', useFactory: () => 'aValue'}], template: ''})
-         class SomeComponent {
-           public a: string;
-           constructor(injector: Injector) {
-             this.a = injector.get('a');
-           }
-         }
+    it('should allow injecting lazy providers via Injector.get from an eager provider that is declared earlier', () => {
+      @Component({providers: [{provide: 'a', useFactory: () => 'aValue'}], template: ''})
+      class SomeComponent {
+        public a: string;
+        constructor(injector: Injector) {
+          this.a = injector.get('a');
+        }
+      }
 
-         const comp = TestBed.configureTestingModule({declarations: [SomeComponent]})
-                          .createComponent(SomeComponent);
-         expect(comp.componentInstance.a).toBe('aValue');
-       });
+      const comp = TestBed.configureTestingModule({declarations: [SomeComponent]}).createComponent(
+        SomeComponent,
+      );
+      expect(comp.componentInstance.a).toBe('aValue');
+    });
 
     it('should support ngOnDestroy for lazy providers', () => {
       let created = false;
@@ -504,12 +545,10 @@ describe('View injector', () => {
       }
 
       @Component({providers: [SomeInjectable], template: ''})
-      class SomeComp {
-      }
+      class SomeComp {}
 
       TestBed.configureTestingModule({declarations: [SomeComp]});
 
-
       let compRef = TestBed.createComponent(SomeComp).componentRef;
       expect(created).toBe(false);
       expect(destroyed).toBe(false);
@@ -529,9 +568,9 @@ describe('View injector', () => {
     it('should instantiate view providers lazily', () => {
       let created = false;
       TestBed.configureTestingModule({declarations: [SimpleComponent]});
-      TestBed.overrideComponent(
-          SimpleComponent,
-          {set: {viewProviders: [{provide: 'service', useFactory: () => created = true}]}});
+      TestBed.overrideComponent(SimpleComponent, {
+        set: {viewProviders: [{provide: 'service', useFactory: () => (created = true)}]},
+      });
       const el = createComponent('<div simpleComponent></div>');
 
       expect(created).toBe(false);
@@ -541,48 +580,56 @@ describe('View injector', () => {
       expect(created).toBe(true);
     });
 
-    it('should not instantiate other directives that depend on viewProviders providers (same element)',
-       () => {
-         TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsService]});
-         TestBed.overrideComponent(
-             SimpleComponent, {set: {viewProviders: [{provide: 'service', useValue: 'service'}]}});
-         expect(() => createComponent('<div simpleComponent needsService></div>'))
-             .toThrowError(/No provider for service!/);
-       });
-
-    it('should not instantiate other directives that depend on viewProviders providers (child element)',
-       () => {
-         TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsService]});
-         TestBed.overrideComponent(
-             SimpleComponent, {set: {viewProviders: [{provide: 'service', useValue: 'service'}]}});
-         expect(() => createComponent('<div simpleComponent><div needsService></div></div>'))
-             .toThrowError(/No provider for service!/);
-       });
+    it('should not instantiate other directives that depend on viewProviders providers (same element)', () => {
+      TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsService]});
+      TestBed.overrideComponent(SimpleComponent, {
+        set: {viewProviders: [{provide: 'service', useValue: 'service'}]},
+      });
+      expect(() => createComponent('<div simpleComponent needsService></div>')).toThrowError(
+        /No provider for service!/,
+      );
+    });
+
+    it('should not instantiate other directives that depend on viewProviders providers (child element)', () => {
+      TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsService]});
+      TestBed.overrideComponent(SimpleComponent, {
+        set: {viewProviders: [{provide: 'service', useValue: 'service'}]},
+      });
+      expect(() =>
+        createComponent('<div simpleComponent><div needsService></div></div>'),
+      ).toThrowError(/No provider for service!/);
+    });
 
     it('should instantiate directives that depend on providers of other directives', () => {
       TestBed.configureTestingModule({declarations: [SimpleDirective, NeedsService]});
-      TestBed.overrideDirective(
-          SimpleDirective, {set: {providers: [{provide: 'service', useValue: 'parentService'}]}});
+      TestBed.overrideDirective(SimpleDirective, {
+        set: {providers: [{provide: 'service', useValue: 'parentService'}]},
+      });
 
       const el = createComponent('<div simpleDirective><div needsService></div></div>');
-      expect(el.children[0].children[0].injector.get(NeedsService).service)
-          .toEqual('parentService');
+      expect(el.children[0].children[0].injector.get(NeedsService).service).toEqual(
+        'parentService',
+      );
     });
 
     it('should instantiate directives that depend on providers in a parent view', () => {
       TestBed.configureTestingModule({declarations: [SimpleDirective, NeedsService]});
-      TestBed.overrideDirective(
-          SimpleDirective, {set: {providers: [{provide: 'service', useValue: 'parentService'}]}});
+      TestBed.overrideDirective(SimpleDirective, {
+        set: {providers: [{provide: 'service', useValue: 'parentService'}]},
+      });
       const el = createComponent(
-          '<div simpleDirective><ng-container *ngIf="true"><div *ngIf="true" needsService></div></ng-container></div>');
-      expect(el.children[0].children[0].injector.get(NeedsService).service)
-          .toEqual('parentService');
+        '<div simpleDirective><ng-container *ngIf="true"><div *ngIf="true" needsService></div></ng-container></div>',
+      );
+      expect(el.children[0].children[0].injector.get(NeedsService).service).toEqual(
+        'parentService',
+      );
     });
 
     it('should instantiate directives that depend on providers of a component', () => {
       TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsService]});
-      TestBed.overrideComponent(
-          SimpleComponent, {set: {providers: [{provide: 'service', useValue: 'hostService'}]}});
+      TestBed.overrideComponent(SimpleComponent, {
+        set: {providers: [{provide: 'service', useValue: 'hostService'}]},
+      });
       TestBed.overrideComponent(SimpleComponent, {set: {template: '<div needsService></div>'}});
       const el = createComponent('<div simpleComponent></div>');
       expect(el.children[0].children[0].injector.get(NeedsService).service).toEqual('hostService');
@@ -590,24 +637,25 @@ describe('View injector', () => {
 
     it('should instantiate directives that depend on view providers of a component', () => {
       TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsService]});
-      TestBed.overrideComponent(
-          SimpleComponent, {set: {providers: [{provide: 'service', useValue: 'hostService'}]}});
+      TestBed.overrideComponent(SimpleComponent, {
+        set: {providers: [{provide: 'service', useValue: 'hostService'}]},
+      });
       TestBed.overrideComponent(SimpleComponent, {set: {template: '<div needsService></div>'}});
       const el = createComponent('<div simpleComponent></div>');
       expect(el.children[0].children[0].injector.get(NeedsService).service).toEqual('hostService');
     });
 
-    it('should instantiate directives in a root embedded view that depend on view providers of a component',
-       () => {
-         TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsService]});
-         TestBed.overrideComponent(
-             SimpleComponent, {set: {providers: [{provide: 'service', useValue: 'hostService'}]}});
-         TestBed.overrideComponent(
-             SimpleComponent, {set: {template: '<div *ngIf="true" needsService></div>'}});
-         const el = createComponent('<div simpleComponent></div>');
-         expect(el.children[0].children[0].injector.get(NeedsService).service)
-             .toEqual('hostService');
-       });
+    it('should instantiate directives in a root embedded view that depend on view providers of a component', () => {
+      TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsService]});
+      TestBed.overrideComponent(SimpleComponent, {
+        set: {providers: [{provide: 'service', useValue: 'hostService'}]},
+      });
+      TestBed.overrideComponent(SimpleComponent, {
+        set: {template: '<div *ngIf="true" needsService></div>'},
+      });
+      const el = createComponent('<div simpleComponent></div>');
+      expect(el.children[0].children[0].injector.get(NeedsService).service).toEqual('hostService');
+    });
 
     it('should instantiate directives that depend on instances in the app injector', () => {
       TestBed.configureTestingModule({declarations: [NeedsAppService]});
@@ -617,64 +665,76 @@ describe('View injector', () => {
 
     it('should not instantiate a directive with cyclic dependencies', () => {
       TestBed.configureTestingModule({declarations: [CycleDirective]});
-      expect(() => createComponent('<div cycleDirective></div>'))
-          .toThrowError(
-              'NG0200: Circular dependency in DI detected for CycleDirective. Find more at https://angular.io/errors/NG0200');
-    });
-
-    it('should not instantiate a directive in a view that has a host dependency on providers' +
-           ' of the component',
-       () => {
-         TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsServiceFromHost]});
-         TestBed.overrideComponent(
-             SimpleComponent, {set: {providers: [{provide: 'service', useValue: 'hostService'}]}});
-         TestBed.overrideComponent(
-             SimpleComponent, {set: {template: '<div needsServiceFromHost><div>'}});
-
-         expect(() => createComponent('<div simpleComponent></div>'))
-             .toThrowError(
-                 'NG0201: No provider for service found in NodeInjector. Find more at https://angular.io/errors/NG0201');
-       });
-
-    it('should not instantiate a directive in a view that has a host dependency on providers' +
-           ' of a decorator directive',
-       () => {
-         TestBed.configureTestingModule(
-             {declarations: [SimpleComponent, SomeOtherDirective, NeedsServiceFromHost]});
-         TestBed.overrideComponent(
-             SimpleComponent, {set: {providers: [{provide: 'service', useValue: 'hostService'}]}});
-         TestBed.overrideComponent(
-             SimpleComponent, {set: {template: '<div needsServiceFromHost><div>'}});
-
-         expect(() => createComponent('<div simpleComponent someOtherDirective></div>'))
-             .toThrowError(
-                 'NG0201: No provider for service found in NodeInjector. Find more at https://angular.io/errors/NG0201');
-       });
-
-    it('should not instantiate a directive in a view that has a self dependency on a parent directive',
-       () => {
-         TestBed.configureTestingModule({declarations: [SimpleDirective, NeedsDirectiveFromSelf]});
-         expect(
-             () => createComponent('<div simpleDirective><div needsDirectiveFromSelf></div></div>'))
-             .toThrowError(
-                 'NG0201: No provider for SimpleDirective found in NodeInjector. Find more at https://angular.io/errors/NG0201');
-       });
+      expect(() => createComponent('<div cycleDirective></div>')).toThrowError(
+        'NG0200: Circular dependency in DI detected for CycleDirective. Find more at https://angular.io/errors/NG0200',
+      );
+    });
+
+    it(
+      'should not instantiate a directive in a view that has a host dependency on providers' +
+        ' of the component',
+      () => {
+        TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsServiceFromHost]});
+        TestBed.overrideComponent(SimpleComponent, {
+          set: {providers: [{provide: 'service', useValue: 'hostService'}]},
+        });
+        TestBed.overrideComponent(SimpleComponent, {
+          set: {template: '<div needsServiceFromHost><div>'},
+        });
+
+        expect(() => createComponent('<div simpleComponent></div>')).toThrowError(
+          'NG0201: No provider for service found in NodeInjector. Find more at https://angular.io/errors/NG0201',
+        );
+      },
+    );
+
+    it(
+      'should not instantiate a directive in a view that has a host dependency on providers' +
+        ' of a decorator directive',
+      () => {
+        TestBed.configureTestingModule({
+          declarations: [SimpleComponent, SomeOtherDirective, NeedsServiceFromHost],
+        });
+        TestBed.overrideComponent(SimpleComponent, {
+          set: {providers: [{provide: 'service', useValue: 'hostService'}]},
+        });
+        TestBed.overrideComponent(SimpleComponent, {
+          set: {template: '<div needsServiceFromHost><div>'},
+        });
+
+        expect(() =>
+          createComponent('<div simpleComponent someOtherDirective></div>'),
+        ).toThrowError(
+          'NG0201: No provider for service found in NodeInjector. Find more at https://angular.io/errors/NG0201',
+        );
+      },
+    );
+
+    it('should not instantiate a directive in a view that has a self dependency on a parent directive', () => {
+      TestBed.configureTestingModule({declarations: [SimpleDirective, NeedsDirectiveFromSelf]});
+      expect(() =>
+        createComponent('<div simpleDirective><div needsDirectiveFromSelf></div></div>'),
+      ).toThrowError(
+        'NG0201: No provider for SimpleDirective found in NodeInjector. Find more at https://angular.io/errors/NG0201',
+      );
+    });
 
     it('should instantiate directives that depend on other directives', fakeAsync(() => {
-         TestBed.configureTestingModule({declarations: [SimpleDirective, NeedsDirective]});
-         const el = createComponent('<div simpleDirective><div needsDirective></div></div>');
-         const d = el.children[0].children[0].injector.get(NeedsDirective);
+      TestBed.configureTestingModule({declarations: [SimpleDirective, NeedsDirective]});
+      const el = createComponent('<div simpleDirective><div needsDirective></div></div>');
+      const d = el.children[0].children[0].injector.get(NeedsDirective);
 
-         expect(d).toBeInstanceOf(NeedsDirective);
-         expect(d.dependency).toBeInstanceOf(SimpleDirective);
-       }));
+      expect(d).toBeInstanceOf(NeedsDirective);
+      expect(d.dependency).toBeInstanceOf(SimpleDirective);
+    }));
 
     it('should throw when a dependency cannot be resolved', fakeAsync(() => {
-         TestBed.configureTestingModule({declarations: [NeedsService]});
+      TestBed.configureTestingModule({declarations: [NeedsService]});
 
-         expect(() => createComponent('<div needsService></div>'))
-             .toThrowError(/No provider for service!/);
-       }));
+      expect(() => createComponent('<div needsService></div>')).toThrowError(
+        /No provider for service!/,
+      );
+    }));
 
     it('should inject null when an optional dependency cannot be resolved', () => {
       TestBed.configureTestingModule({declarations: [OptionallyNeedsDirective]});
@@ -685,39 +745,39 @@ describe('View injector', () => {
 
     it('should instantiate directives that depends on the host component', () => {
       TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsComponentFromHost]});
-      TestBed.overrideComponent(
-          SimpleComponent, {set: {template: '<div needsComponentFromHost></div>'}});
+      TestBed.overrideComponent(SimpleComponent, {
+        set: {template: '<div needsComponentFromHost></div>'},
+      });
       const el = createComponent('<div simpleComponent></div>');
       const d = el.children[0].children[0].injector.get(NeedsComponentFromHost);
       expect(d.dependency).toBeInstanceOf(SimpleComponent);
     });
 
     it('should not instantiate directives that depend on other directives on the host element', () => {
-      TestBed.configureTestingModule(
-          {declarations: [SimpleComponent, SimpleDirective, NeedsDirectiveFromHost]});
-      TestBed.overrideComponent(
-          SimpleComponent, {set: {template: '<div needsDirectiveFromHost></div>'}});
-      expect(() => createComponent('<div simpleComponent simpleDirective></div>'))
-          .toThrowError(
-              'NG0201: No provider for SimpleDirective found in NodeInjector. Find more at https://angular.io/errors/NG0201');
-    });
-
-    it('should allow to use the NgModule injector from a root ViewContainerRef.parentInjector',
-       () => {
-         @Component({template: ''})
-         class MyComp {
-           constructor(public vc: ViewContainerRef) {}
-         }
-
-         const compFixture = TestBed
-                                 .configureTestingModule({
-                                   declarations: [MyComp],
-                                   providers: [{provide: 'someToken', useValue: 'someValue'}]
-                                 })
-                                 .createComponent(MyComp);
-
-         expect(compFixture.componentInstance.vc.parentInjector.get('someToken')).toBe('someValue');
-       });
+      TestBed.configureTestingModule({
+        declarations: [SimpleComponent, SimpleDirective, NeedsDirectiveFromHost],
+      });
+      TestBed.overrideComponent(SimpleComponent, {
+        set: {template: '<div needsDirectiveFromHost></div>'},
+      });
+      expect(() => createComponent('<div simpleComponent simpleDirective></div>')).toThrowError(
+        'NG0201: No provider for SimpleDirective found in NodeInjector. Find more at https://angular.io/errors/NG0201',
+      );
+    });
+
+    it('should allow to use the NgModule injector from a root ViewContainerRef.parentInjector', () => {
+      @Component({template: ''})
+      class MyComp {
+        constructor(public vc: ViewContainerRef) {}
+      }
+
+      const compFixture = TestBed.configureTestingModule({
+        declarations: [MyComp],
+        providers: [{provide: 'someToken', useValue: 'someValue'}],
+      }).createComponent(MyComp);
+
+      expect(compFixture.componentInstance.vc.parentInjector.get('someToken')).toBe('someValue');
+    });
   });
 
   describe('static attributes', () => {
@@ -744,11 +804,12 @@ describe('View injector', () => {
     it('should inject ElementRef', () => {
       TestBed.configureTestingModule({declarations: [NeedsElementRef]});
       const el = createComponent('<div needsElementRef></div>');
-      expect(el.children[0].injector.get(NeedsElementRef).elementRef.nativeElement)
-          .toBe(el.children[0].nativeElement);
+      expect(el.children[0].injector.get(NeedsElementRef).elementRef.nativeElement).toBe(
+        el.children[0].nativeElement,
+      );
     });
 
-    it('should inject ChangeDetectorRef of the component\'s view into the component', () => {
+    it("should inject ChangeDetectorRef of the component's view into the component", () => {
       TestBed.configureTestingModule({declarations: [PushComponentNeedsChangeDetectorRef]});
       const cf = createComponentFixture('<div componentNeedsChangeDetectorRef></div>');
       cf.detectChanges();
@@ -763,19 +824,21 @@ describe('View injector', () => {
     });
 
     it('should inject ChangeDetectorRef of the containing component into directives', () => {
-      TestBed.configureTestingModule(
-          {declarations: [PushComponentNeedsChangeDetectorRef, DirectiveNeedsChangeDetectorRef]});
+      TestBed.configureTestingModule({
+        declarations: [PushComponentNeedsChangeDetectorRef, DirectiveNeedsChangeDetectorRef],
+      });
       TestBed.overrideComponent(PushComponentNeedsChangeDetectorRef, {
         set: {
           template:
-              '{{counter}}<div directiveNeedsChangeDetectorRef></div><div *ngIf="true" directiveNeedsChangeDetectorRef></div>'
-        }
+            '{{counter}}<div directiveNeedsChangeDetectorRef></div><div *ngIf="true" directiveNeedsChangeDetectorRef></div>',
+        },
       });
       const cf = createComponentFixture('<div componentNeedsChangeDetectorRef></div>');
       cf.detectChanges();
       const compEl = cf.debugElement.children[0];
-      const comp: PushComponentNeedsChangeDetectorRef =
-          compEl.injector.get(PushComponentNeedsChangeDetectorRef);
+      const comp: PushComponentNeedsChangeDetectorRef = compEl.injector.get(
+        PushComponentNeedsChangeDetectorRef,
+      );
       comp.counter = 1;
       cf.detectChanges();
       expect(compEl.nativeElement).toHaveText('0');
@@ -790,11 +853,13 @@ describe('View injector', () => {
       }
 
       _compareChangeDetectorRefs(
-          compEl.children[0].injector.get(DirectiveNeedsChangeDetectorRef).changeDetectorRef,
-          comp.changeDetectorRef);
+        compEl.children[0].injector.get(DirectiveNeedsChangeDetectorRef).changeDetectorRef,
+        comp.changeDetectorRef,
+      );
       _compareChangeDetectorRefs(
-          compEl.children[1].injector.get(DirectiveNeedsChangeDetectorRef).changeDetectorRef,
-          comp.changeDetectorRef);
+        compEl.children[1].injector.get(DirectiveNeedsChangeDetectorRef).changeDetectorRef,
+        comp.changeDetectorRef,
+      );
 
       comp.changeDetectorRef.markForCheck();
       cf.detectChanges();
@@ -802,10 +867,12 @@ describe('View injector', () => {
     });
 
     it('should inject ChangeDetectorRef of a same element component into a directive', () => {
-      TestBed.configureTestingModule(
-          {declarations: [PushComponentNeedsChangeDetectorRef, DirectiveNeedsChangeDetectorRef]});
+      TestBed.configureTestingModule({
+        declarations: [PushComponentNeedsChangeDetectorRef, DirectiveNeedsChangeDetectorRef],
+      });
       const cf = createComponentFixture(
-          '<div componentNeedsChangeDetectorRef directiveNeedsChangeDetectorRef></div>');
+        '<div componentNeedsChangeDetectorRef directiveNeedsChangeDetectorRef></div>',
+      );
       cf.detectChanges();
       const compEl = cf.debugElement.children[0];
       const comp = compEl.injector.get(PushComponentNeedsChangeDetectorRef);
@@ -819,15 +886,14 @@ describe('View injector', () => {
     });
 
     it(`should not inject ChangeDetectorRef of a parent element's component into a directive`, () => {
-      TestBed
-          .configureTestingModule({
-            declarations: [PushComponentNeedsChangeDetectorRef, DirectiveNeedsChangeDetectorRef]
-          })
-          .overrideComponent(
-              PushComponentNeedsChangeDetectorRef,
-              {set: {template: '<ng-content></ng-content>{{counter}}'}});
+      TestBed.configureTestingModule({
+        declarations: [PushComponentNeedsChangeDetectorRef, DirectiveNeedsChangeDetectorRef],
+      }).overrideComponent(PushComponentNeedsChangeDetectorRef, {
+        set: {template: '<ng-content></ng-content>{{counter}}'},
+      });
       const cf = createComponentFixture(
-          '<div componentNeedsChangeDetectorRef><div directiveNeedsChangeDetectorRef></div></div>');
+        '<div componentNeedsChangeDetectorRef><div directiveNeedsChangeDetectorRef></div></div>',
+      );
       cf.detectChanges();
       const compEl = cf.debugElement.children[0];
       const comp = compEl.injector.get(PushComponentNeedsChangeDetectorRef);
@@ -844,8 +910,9 @@ describe('View injector', () => {
     it('should inject ViewContainerRef', () => {
       TestBed.configureTestingModule({declarations: [NeedsViewContainerRef]});
       const el = createComponent('<div needsViewContainerRef></div>');
-      expect(el.children[0].injector.get(NeedsViewContainerRef).viewContainer.element.nativeElement)
-          .toBe(el.children[0].nativeElement);
+      expect(
+        el.children[0].injector.get(NeedsViewContainerRef).viewContainer.element.nativeElement,
+      ).toBe(el.children[0].nativeElement);
     });
 
     it('should inject ViewContainerRef', () => {
@@ -856,7 +923,9 @@ describe('View injector', () => {
 
       TestBed.configureTestingModule({declarations: [TestComp]});
       const environmentInjector = createEnvironmentInjector(
-          [{provide: 'someToken', useValue: 'someNewValue'}], TestBed.inject(EnvironmentInjector));
+        [{provide: 'someToken', useValue: 'someNewValue'}],
+        TestBed.inject(EnvironmentInjector),
+      );
 
       const component = coreCreateComponent(TestComp, {environmentInjector});
       expect(component.instance.vcr.parentInjector.get('someToken')).toBe('someNewValue');
@@ -864,16 +933,19 @@ describe('View injector', () => {
 
     it('should inject TemplateRef', () => {
       TestBed.configureTestingModule({declarations: [NeedsViewContainerRef, NeedsTemplateRef]});
-      const el =
-          createComponent('<ng-template needsViewContainerRef needsTemplateRef></ng-template>');
-      expect(el.childNodes[0].injector.get(NeedsTemplateRef).templateRef.elementRef)
-          .toEqual(el.childNodes[0].injector.get(NeedsViewContainerRef).viewContainer.element);
+      const el = createComponent(
+        '<ng-template needsViewContainerRef needsTemplateRef></ng-template>',
+      );
+      expect(el.childNodes[0].injector.get(NeedsTemplateRef).templateRef.elementRef).toEqual(
+        el.childNodes[0].injector.get(NeedsViewContainerRef).viewContainer.element,
+      );
     });
 
     it('should throw if there is no TemplateRef', () => {
       TestBed.configureTestingModule({declarations: [NeedsTemplateRef]});
-      expect(() => createComponent('<div needsTemplateRef></div>'))
-          .toThrowError(/No provider for TemplateRef/);
+      expect(() => createComponent('<div needsTemplateRef></div>')).toThrowError(
+        /No provider for TemplateRef/,
+      );
     });
 
     it('should inject null if there is no TemplateRef when the dependency is optional', () => {
@@ -888,25 +960,31 @@ describe('View injector', () => {
     it('should instantiate pipes that have dependencies', () => {
       TestBed.configureTestingModule({declarations: [SimpleDirective, PipeNeedsService]});
 
-      const el = createComponent(
-          '<div [simpleDirective]="true | pipeNeedsService"></div>',
-          [{provide: 'service', useValue: 'pipeService'}]);
+      const el = createComponent('<div [simpleDirective]="true | pipeNeedsService"></div>', [
+        {provide: 'service', useValue: 'pipeService'},
+      ]);
       expect(el.children[0].injector.get(SimpleDirective).value.service).toEqual('pipeService');
     });
 
     it('should overwrite pipes with later entry in the pipes array', () => {
-      TestBed.configureTestingModule(
-          {declarations: [SimpleDirective, DuplicatePipe1, DuplicatePipe2]});
+      TestBed.configureTestingModule({
+        declarations: [SimpleDirective, DuplicatePipe1, DuplicatePipe2],
+      });
       const el = createComponent('<div [simpleDirective]="true | duplicatePipe"></div>');
       expect(el.children[0].injector.get(SimpleDirective).value).toBeInstanceOf(DuplicatePipe2);
     });
 
     it('should inject ChangeDetectorRef into pipes', () => {
       TestBed.configureTestingModule({
-        declarations: [SimpleDirective, PipeNeedsChangeDetectorRef, DirectiveNeedsChangeDetectorRef]
+        declarations: [
+          SimpleDirective,
+          PipeNeedsChangeDetectorRef,
+          DirectiveNeedsChangeDetectorRef,
+        ],
       });
       const el = createComponent(
-          '<div [simpleDirective]="true | pipeNeedsChangeDetectorRef" directiveNeedsChangeDetectorRef></div>');
+        '<div [simpleDirective]="true | pipeNeedsChangeDetectorRef" directiveNeedsChangeDetectorRef></div>',
+      );
       const cdRef = el.children[0].injector.get(DirectiveNeedsChangeDetectorRef).changeDetectorRef;
       expect(el.children[0].injector.get(SimpleDirective).value.changeDetectorRef).toEqual(cdRef);
     });
@@ -914,8 +992,9 @@ describe('View injector', () => {
     it('should not cache impure pipes', () => {
       TestBed.configureTestingModule({declarations: [SimpleDirective, ImpurePipe]});
       const el = createComponent(
-          '<div [simpleDirective]="true | impurePipe"></div><div [simpleDirective]="true | impurePipe"></div>' +
-          '<div *ngFor="let x of [1,2]" [simpleDirective]="true | impurePipe"></div>');
+        '<div [simpleDirective]="true | impurePipe"></div><div [simpleDirective]="true | impurePipe"></div>' +
+          '<div *ngFor="let x of [1,2]" [simpleDirective]="true | impurePipe"></div>',
+      );
       const impurePipe1 = el.children[0].injector.get(SimpleDirective).value;
       const impurePipe2 = el.children[1].injector.get(SimpleDirective).value;
       const impurePipe3 = el.children[2].injector.get(SimpleDirective).value;
@@ -932,8 +1011,7 @@ describe('View injector', () => {
 
   describe('view destruction', () => {
     @Component({selector: 'some-component', template: ''})
-    class SomeComponent {
-    }
+    class SomeComponent {}
 
     @Component({selector: 'listener-and-on-destroy', template: ''})
     class ComponentThatLoadsAnotherComponentThenMovesIt {
@@ -941,12 +1019,13 @@ describe('View injector', () => {
 
       ngOnInit() {
         // Dynamically load some component.
-        const componentRef = this.viewContainerRef.createComponent(
-            SomeComponent, {index: this.viewContainerRef.length});
+        const componentRef = this.viewContainerRef.createComponent(SomeComponent, {
+          index: this.viewContainerRef.length,
+        });
 
         // Manually move the loaded component to some arbitrary DOM node.
-        const componentRootNode =
-            (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+        const componentRootNode = (componentRef.hostView as EmbeddedViewRef<any>)
+          .rootNodes[0] as HTMLElement;
         document.createElement('div').appendChild(componentRootNode);
 
         // Destroy the component we just moved to ensure that it does not error during
diff --git a/packages/core/test/metadata/di_spec.ts b/packages/core/test/metadata/di_spec.ts
index c02910b862ed8..78042aa7e6ec8 100644
--- a/packages/core/test/metadata/di_spec.ts
+++ b/packages/core/test/metadata/di_spec.ts
@@ -6,7 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, ElementRef, Input, NO_ERRORS_SCHEMA, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {
+  Component,
+  Directive,
+  ElementRef,
+  Input,
+  NO_ERRORS_SCHEMA,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 describe('ViewChild', () => {
@@ -18,9 +27,9 @@ describe('ViewChild', () => {
   });
 
   it('should support type selector', () => {
-    TestBed.overrideComponent(
-        ViewChildTypeSelectorComponent,
-        {set: {template: `<simple [marker]="'1'"></simple><simple [marker]="'2'"></simple>`}});
+    TestBed.overrideComponent(ViewChildTypeSelectorComponent, {
+      set: {template: `<simple [marker]="'1'"></simple><simple [marker]="'2'"></simple>`},
+    });
     const view = TestBed.createComponent(ViewChildTypeSelectorComponent);
 
     view.detectChanges();
@@ -29,8 +38,9 @@ describe('ViewChild', () => {
   });
 
   it('should support string selector', () => {
-    TestBed.overrideComponent(
-        ViewChildStringSelectorComponent, {set: {template: `<simple #child></simple>`}});
+    TestBed.overrideComponent(ViewChildStringSelectorComponent, {
+      set: {template: `<simple #child></simple>`},
+    });
     const view = TestBed.createComponent(ViewChildStringSelectorComponent);
 
     view.detectChanges();
@@ -41,15 +51,19 @@ describe('ViewChild', () => {
 describe('ViewChildren', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations:
-          [ViewChildrenTypeSelectorComponent, ViewChildrenStringSelectorComponent, Simple],
+      declarations: [
+        ViewChildrenTypeSelectorComponent,
+        ViewChildrenStringSelectorComponent,
+        Simple,
+      ],
       schemas: [NO_ERRORS_SCHEMA],
     });
   });
 
   it('should support type selector', () => {
-    TestBed.overrideComponent(
-        ViewChildrenTypeSelectorComponent, {set: {template: `<simple></simple><simple></simple>`}});
+    TestBed.overrideComponent(ViewChildrenTypeSelectorComponent, {
+      set: {template: `<simple></simple><simple></simple>`},
+    });
 
     const view = TestBed.createComponent(ViewChildrenTypeSelectorComponent);
     view.detectChanges();
@@ -58,21 +72,21 @@ describe('ViewChildren', () => {
   });
 
   it('should support string selector', () => {
-    TestBed.overrideComponent(
-        ViewChildrenStringSelectorComponent,
-        {set: {template: `<simple #child1></simple><simple #child2></simple>`}});
-    const view = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
-                     .createComponent(ViewChildrenStringSelectorComponent);
+    TestBed.overrideComponent(ViewChildrenStringSelectorComponent, {
+      set: {template: `<simple #child1></simple><simple #child2></simple>`},
+    });
+    const view = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]}).createComponent(
+      ViewChildrenStringSelectorComponent,
+    );
     view.detectChanges();
     expect(view.componentInstance.children).toBeDefined();
     expect(view.componentInstance.children.length).toBe(2);
   });
 });
 
-
 @Directive({selector: 'simple'})
 class Simple {
-  @Input() marker: string|undefined;
+  @Input() marker: string | undefined;
 }
 
 @Component({selector: 'view-child-type-selector', template: ''})
diff --git a/packages/core/test/metadata/resource_loading_spec.ts b/packages/core/test/metadata/resource_loading_spec.ts
index 24bbf6f916ff3..96e8221063453 100644
--- a/packages/core/test/metadata/resource_loading_spec.ts
+++ b/packages/core/test/metadata/resource_loading_spec.ts
@@ -7,7 +7,11 @@
  */
 
 import {Component} from '../../src/core';
-import {clearResolutionOfComponentResourcesQueue, isComponentResourceResolutionQueueEmpty, resolveComponentResources} from '../../src/metadata/resource_loading';
+import {
+  clearResolutionOfComponentResourcesQueue,
+  isComponentResourceResolutionQueueEmpty,
+  resolveComponentResources,
+} from '../../src/metadata/resource_loading';
 import {ComponentType} from '../../src/render3/interfaces/definition';
 import {compileComponent} from '../../src/render3/jit/directive';
 
@@ -16,34 +20,38 @@ describe('resource_loading', () => {
 
   describe('error handling', () => {
     it('should throw an error when compiling component that has unresolved templateUrl', () => {
-      const MyComponent: ComponentType<any> = (class MyComponent {}) as any;
+      const MyComponent: ComponentType<any> = class MyComponent {} as any;
       compileComponent(MyComponent, {templateUrl: 'someUrl'});
-      expect(() => MyComponent.ɵcmp).toThrowError(`
+      expect(() => MyComponent.ɵcmp).toThrowError(
+        `
 Component 'MyComponent' is not resolved:
  - templateUrl: someUrl
-Did you run and wait for 'resolveComponentResources()'?`.trim());
+Did you run and wait for 'resolveComponentResources()'?`.trim(),
+      );
     });
 
     it('should throw an error when compiling component that has unresolved styleUrls', () => {
-      const MyComponent: ComponentType<any> = (class MyComponent {}) as any;
+      const MyComponent: ComponentType<any> = class MyComponent {} as any;
       compileComponent(MyComponent, {styleUrls: ['someUrl1', 'someUrl2']});
-      expect(() => MyComponent.ɵcmp).toThrowError(`
+      expect(() => MyComponent.ɵcmp).toThrowError(
+        `
 Component 'MyComponent' is not resolved:
  - styleUrls: ["someUrl1","someUrl2"]
-Did you run and wait for 'resolveComponentResources()'?`.trim());
+Did you run and wait for 'resolveComponentResources()'?`.trim(),
+      );
     });
 
-    it('should throw an error when compiling component that has unresolved templateUrl and styleUrls',
-       () => {
-         const MyComponent: ComponentType<any> = (class MyComponent {}) as any;
-         compileComponent(
-             MyComponent, {templateUrl: 'someUrl', styleUrls: ['someUrl1', 'someUrl2']});
-         expect(() => MyComponent.ɵcmp).toThrowError(`
+    it('should throw an error when compiling component that has unresolved templateUrl and styleUrls', () => {
+      const MyComponent: ComponentType<any> = class MyComponent {} as any;
+      compileComponent(MyComponent, {templateUrl: 'someUrl', styleUrls: ['someUrl1', 'someUrl2']});
+      expect(() => MyComponent.ɵcmp).toThrowError(
+        `
 Component 'MyComponent' is not resolved:
  - templateUrl: someUrl
  - styleUrls: ["someUrl1","someUrl2"]
-Did you run and wait for 'resolveComponentResources()'?`.trim());
-       });
+Did you run and wait for 'resolveComponentResources()'?`.trim(),
+      );
+    });
   });
 
   describe('resolution', () => {
@@ -58,10 +66,10 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
       resourceFetchCount++;
       return URLS[url] || Promise.reject('NOT_FOUND: ' + url);
     }
-    beforeEach(() => resourceFetchCount = 0);
+    beforeEach(() => (resourceFetchCount = 0));
 
     it('should resolve template', async () => {
-      const MyComponent: ComponentType<any> = (class MyComponent {}) as any;
+      const MyComponent: ComponentType<any> = class MyComponent {} as any;
       const metadata: Component = {templateUrl: 'test://content'};
       compileComponent(MyComponent, metadata);
       await resolveComponentResources(testResolver);
@@ -71,7 +79,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
     });
 
     it('should resolve styleUrls', async () => {
-      const MyComponent: ComponentType<any> = (class MyComponent {}) as any;
+      const MyComponent: ComponentType<any> = class MyComponent {} as any;
       const metadata: Component = {template: '', styleUrls: ['test://style1', 'test://style2']};
       compileComponent(MyComponent, metadata);
       await resolveComponentResources(testResolver);
@@ -82,7 +90,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
     });
 
     it('should cache multiple resolution to same URL', async () => {
-      const MyComponent: ComponentType<any> = (class MyComponent {}) as any;
+      const MyComponent: ComponentType<any> = class MyComponent {} as any;
       const metadata: Component = {template: '', styleUrls: ['test://style1', 'test://style1']};
       compileComponent(MyComponent, metadata);
       await resolveComponentResources(testResolver);
@@ -93,16 +101,17 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
     });
 
     it('should keep order even if the resolution is out of order', async () => {
-      const MyComponent: ComponentType<any> = (class MyComponent {}) as any;
+      const MyComponent: ComponentType<any> = class MyComponent {} as any;
       const metadata: Component = {
         template: '',
         styles: ['existing'],
-        styleUrls: ['test://style1', 'test://style2']
+        styleUrls: ['test://style1', 'test://style2'],
       };
       compileComponent(MyComponent, metadata);
       const resolvers: any[] = [];
       const resolved = resolveComponentResources(
-          (url) => new Promise((resolve, response) => resolvers.push(url, resolve)));
+        (url) => new Promise((resolve, response) => resolvers.push(url, resolve)),
+      );
       // Out of order resolution
       expect(resolvers[0]).toEqual('test://style1');
       expect(resolvers[2]).toEqual('test://style2');
@@ -114,8 +123,8 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
     });
 
     it('should not add components without external resources to resolution queue', () => {
-      const MyComponent: ComponentType<any> = (class MyComponent {}) as any;
-      const MyComponent2: ComponentType<any> = (class MyComponent {}) as any;
+      const MyComponent: ComponentType<any> = class MyComponent {} as any;
+      const MyComponent2: ComponentType<any> = class MyComponent {} as any;
 
       compileComponent(MyComponent, {template: ''});
       expect(isComponentResourceResolutionQueueEmpty()).toBe(true);
@@ -125,7 +134,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
     });
 
     it('should resolve styles passed in as a string', async () => {
-      const MyComponent: ComponentType<any> = (class MyComponent {}) as any;
+      const MyComponent: ComponentType<any> = class MyComponent {} as any;
       const metadata: Component = {template: '', styles: 'existing'};
       compileComponent(MyComponent, metadata);
       await resolveComponentResources(testResolver);
@@ -136,7 +145,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
     });
 
     it('should resolve styleUrl', async () => {
-      const MyComponent: ComponentType<any> = (class MyComponent {}) as any;
+      const MyComponent: ComponentType<any> = class MyComponent {} as any;
       const metadata: Component = {template: '', styleUrl: 'test://style'};
       compileComponent(MyComponent, metadata);
       await resolveComponentResources(testResolver);
@@ -147,7 +156,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
     });
 
     it('should resolve both styles passed in as a string together with styleUrl', async () => {
-      const MyComponent: ComponentType<any> = (class MyComponent {}) as any;
+      const MyComponent: ComponentType<any> = class MyComponent {} as any;
       const metadata: Component = {template: '', styleUrl: 'test://style', styles: 'existing'};
       compileComponent(MyComponent, metadata);
       await resolveComponentResources(testResolver);
@@ -158,13 +167,17 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
     });
 
     it('should throw if both styleUrls and styleUrl are passed in', async () => {
-      const MyComponent: ComponentType<any> = (class MyComponent {}) as any;
-      const metadata:
-          Component = {template: '', styleUrl: 'test://style1', styleUrls: ['test://style2']};
+      const MyComponent: ComponentType<any> = class MyComponent {} as any;
+      const metadata: Component = {
+        template: '',
+        styleUrl: 'test://style1',
+        styleUrls: ['test://style2'],
+      };
       compileComponent(MyComponent, metadata);
 
-      expect(() => resolveComponentResources(testResolver))
-          .toThrowError(/@Component cannot define both `styleUrl` and `styleUrls`/);
+      expect(() => resolveComponentResources(testResolver)).toThrowError(
+        /@Component cannot define both `styleUrl` and `styleUrls`/,
+      );
     });
   });
 
@@ -173,12 +186,12 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
       return Promise.resolve({
         text() {
           return 'response for ' + url;
-        }
+        },
       } as any as Response);
     }
 
     it('should work with fetch', async () => {
-      const MyComponent: ComponentType<any> = (class MyComponent {}) as any;
+      const MyComponent: ComponentType<any> = class MyComponent {} as any;
       const metadata: Component = {templateUrl: 'test://content'};
       compileComponent(MyComponent, metadata);
       await resolveComponentResources(fetch);
diff --git a/packages/core/test/playground/zone-signal-input/index.ts b/packages/core/test/playground/zone-signal-input/index.ts
index 1c5bb76f89dee..a3d25c2385bc6 100644
--- a/packages/core/test/playground/zone-signal-input/index.ts
+++ b/packages/core/test/playground/zone-signal-input/index.ts
@@ -23,7 +23,7 @@ import {bootstrapApplication} from '@angular/platform-browser';
 })
 export class Greet<T> {
   counter = input(0);
-  bla = input();  // TODO: should be a diagnostic. no type & no value
+  bla = input(); // TODO: should be a diagnostic. no type & no value
   bla2 = input<string>();
   bla3 = input.required<string>();
   bla4 = input(0, {alias: 'bla4Public'});
@@ -41,7 +41,7 @@ export class Greet<T> {
 
   // Eventually in signal components, a mix not allowed. For now, this is
   // supported though.
-  @Input() oldInput: string|undefined;
+  @Input() oldInput: string | undefined;
 }
 
 @Component({
@@ -70,7 +70,7 @@ export class MyApp {
   twoWay = false;
 
   protected updateName() {
-    this.name.update(n => `${n}-`);
+    this.name.update((n) => `${n}-`);
   }
 
   onClickFromChild() {
diff --git a/packages/core/test/render3/change_detection_spec.ts b/packages/core/test/render3/change_detection_spec.ts
index a5df6ed34179b..4cd5fca1c4e1a 100644
--- a/packages/core/test/render3/change_detection_spec.ts
+++ b/packages/core/test/render3/change_detection_spec.ts
@@ -11,37 +11,38 @@ import {withBody} from '@angular/private/testing';
 
 import {Component, RendererFactory2} from '../../src/core';
 
-
 describe('change detection', () => {
-  it('should call begin and end when the renderer factory implements them',
-     withBody('<my-comp></my-comp>', () => {
-       const log: string[] = [];
-       @Component({
-         selector: 'my-comp',
-         standalone: true,
-         template: '{{ value }}',
-       })
-       class MyComponent {
-         get value(): string {
-           log.push('detect changes');
-           return 'works';
-         }
-       }
-
-       const rendererFactory = TestBed.inject(RendererFactory2);
-       rendererFactory.begin = () => log.push('begin');
-       rendererFactory.end = () => log.push('end');
-
-       const fixture = TestBed.createComponent(MyComponent);
-       fixture.detectChanges();
-
-       expect(fixture.nativeElement.innerHTML).toEqual('works');
-
-       expect(log).toEqual([
-         'begin',
-         'detect changes',  // regular change detection cycle
-         'end',
-         'detect changes'  // check no changes cycle
-       ]);
-     }));
+  it(
+    'should call begin and end when the renderer factory implements them',
+    withBody('<my-comp></my-comp>', () => {
+      const log: string[] = [];
+      @Component({
+        selector: 'my-comp',
+        standalone: true,
+        template: '{{ value }}',
+      })
+      class MyComponent {
+        get value(): string {
+          log.push('detect changes');
+          return 'works';
+        }
+      }
+
+      const rendererFactory = TestBed.inject(RendererFactory2);
+      rendererFactory.begin = () => log.push('begin');
+      rendererFactory.end = () => log.push('end');
+
+      const fixture = TestBed.createComponent(MyComponent);
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.innerHTML).toEqual('works');
+
+      expect(log).toEqual([
+        'begin',
+        'detect changes', // regular change detection cycle
+        'end',
+        'detect changes', // check no changes cycle
+      ]);
+    }),
+  );
 });
diff --git a/packages/core/test/render3/component_ref_spec.ts b/packages/core/test/render3/component_ref_spec.ts
index cf9d73d4284f8..5ce10fcaa4c1f 100644
--- a/packages/core/test/render3/component_ref_spec.ts
+++ b/packages/core/test/render3/component_ref_spec.ts
@@ -12,7 +12,20 @@ import {Renderer} from '@angular/core/src/render3/interfaces/renderer';
 import {RElement} from '@angular/core/src/render3/interfaces/renderer_dom';
 import {TestBed} from '@angular/core/testing';
 
-import {ChangeDetectionStrategy, Component, Injector, Input, NgModuleRef, OnChanges, Output, RendererType2, SimpleChanges, ViewChild, ViewContainerRef, ViewEncapsulation} from '../../src/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Injector,
+  Input,
+  NgModuleRef,
+  OnChanges,
+  Output,
+  RendererType2,
+  SimpleChanges,
+  ViewChild,
+  ViewContainerRef,
+  ViewEncapsulation,
+} from '../../src/core';
 import {ComponentFactory} from '../../src/linker/component_factory';
 import {RendererFactory2} from '../../src/render/api';
 import {Sanitizer} from '../../src/sanitization/sanitizer';
@@ -24,8 +37,8 @@ const THROWING_RENDERER_FACTOR2_PROVIDER = {
   useValue: {
     createRenderer: () => {
       throw new Error('Incorrect injector for Renderer2');
-    }
-  }
+    },
+  },
 };
 
 describe('ComponentFactory', () => {
@@ -38,8 +51,7 @@ describe('ComponentFactory', () => {
         standalone: true,
         template: '',
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       const cf = cfr.resolveComponentFactory(TestComponent);
 
@@ -103,10 +115,9 @@ describe('ComponentFactory', () => {
         host: {
           'class': 'HOST_COMPONENT',
         },
-        encapsulation: ViewEncapsulation.None
+        encapsulation: ViewEncapsulation.None,
       })
-      class TestComponent {
-      }
+      class TestComponent {}
 
       cf = cfr.resolveComponentFactory(TestComponent);
     });
@@ -114,9 +125,7 @@ describe('ComponentFactory', () => {
     describe('(when `ngModuleRef` is not provided)', () => {
       it('should retrieve `RendererFactory2` from the specified injector', () => {
         const injector = Injector.create({
-          providers: [
-            {provide: RendererFactory2, useValue: rendererFactorySpy},
-          ]
+          providers: [{provide: RendererFactory2, useValue: rendererFactorySpy}],
         });
 
         cf.create(injector);
@@ -130,7 +139,7 @@ describe('ComponentFactory', () => {
           providers: [
             {provide: RendererFactory2, useValue: rendererFactorySpy},
             {provide: Sanitizer, useFactory: sanitizerFactorySpy, deps: []},
-          ]
+          ],
         });
 
         cf.create(injector);
@@ -142,9 +151,7 @@ describe('ComponentFactory', () => {
     describe('(when `ngModuleRef` is provided)', () => {
       it('should retrieve `RendererFactory2` from the specified injector first', () => {
         const injector = Injector.create({
-          providers: [
-            {provide: RendererFactory2, useValue: rendererFactorySpy},
-          ]
+          providers: [{provide: RendererFactory2, useValue: rendererFactorySpy}],
         });
         const mInjector = Injector.create({providers: [THROWING_RENDERER_FACTOR2_PROVIDER]});
 
@@ -153,36 +160,33 @@ describe('ComponentFactory', () => {
         expect(rendererFactorySpy.wasCalled).toBeTrue();
       });
 
-      it('should retrieve `RendererFactory2` from the `ngModuleRef` if not provided by the injector',
-         () => {
-           const injector = Injector.create({providers: []});
-           const mInjector = Injector.create({
-             providers: [
-               {provide: RendererFactory2, useValue: rendererFactorySpy},
-             ]
-           });
+      it('should retrieve `RendererFactory2` from the `ngModuleRef` if not provided by the injector', () => {
+        const injector = Injector.create({providers: []});
+        const mInjector = Injector.create({
+          providers: [{provide: RendererFactory2, useValue: rendererFactorySpy}],
+        });
 
-           cf.create(injector, undefined, undefined, {injector: mInjector} as NgModuleRef<any>);
+        cf.create(injector, undefined, undefined, {injector: mInjector} as NgModuleRef<any>);
 
-           expect(rendererFactorySpy.wasCalled).toBeTrue();
-         });
+        expect(rendererFactorySpy.wasCalled).toBeTrue();
+      });
 
       it('should retrieve `Sanitizer` from the specified injector first', () => {
-        const iSanitizerFactorySpy =
-            jasmine.createSpy('Injector#sanitizerFactory').and.returnValue({});
+        const iSanitizerFactorySpy = jasmine
+          .createSpy('Injector#sanitizerFactory')
+          .and.returnValue({});
         const injector = Injector.create({
-          providers: [
-            {provide: Sanitizer, useFactory: iSanitizerFactorySpy, deps: []},
-          ]
+          providers: [{provide: Sanitizer, useFactory: iSanitizerFactorySpy, deps: []}],
         });
 
-        const mSanitizerFactorySpy =
-            jasmine.createSpy('NgModuleRef#sanitizerFactory').and.returnValue({});
+        const mSanitizerFactorySpy = jasmine
+          .createSpy('NgModuleRef#sanitizerFactory')
+          .and.returnValue({});
         const mInjector = Injector.create({
           providers: [
             {provide: RendererFactory2, useValue: rendererFactorySpy},
             {provide: Sanitizer, useFactory: mSanitizerFactorySpy, deps: []},
-          ]
+          ],
         });
 
         cf.create(injector, undefined, undefined, {injector: mInjector} as NgModuleRef<any>);
@@ -191,35 +195,32 @@ describe('ComponentFactory', () => {
         expect(mSanitizerFactorySpy).not.toHaveBeenCalled();
       });
 
-      it('should retrieve `Sanitizer` from the `ngModuleRef` if not provided by the injector',
-         () => {
-           const injector = Injector.create({providers: []});
-
-           const mSanitizerFactorySpy =
-               jasmine.createSpy('NgModuleRef#sanitizerFactory').and.returnValue({});
-           const mInjector = Injector.create({
-             providers: [
-               {provide: RendererFactory2, useValue: rendererFactorySpy},
-               {provide: Sanitizer, useFactory: mSanitizerFactorySpy, deps: []},
-             ]
-           });
+      it('should retrieve `Sanitizer` from the `ngModuleRef` if not provided by the injector', () => {
+        const injector = Injector.create({providers: []});
 
+        const mSanitizerFactorySpy = jasmine
+          .createSpy('NgModuleRef#sanitizerFactory')
+          .and.returnValue({});
+        const mInjector = Injector.create({
+          providers: [
+            {provide: RendererFactory2, useValue: rendererFactorySpy},
+            {provide: Sanitizer, useFactory: mSanitizerFactorySpy, deps: []},
+          ],
+        });
 
-           cf.create(injector, undefined, undefined, {injector: mInjector} as NgModuleRef<any>);
+        cf.create(injector, undefined, undefined, {injector: mInjector} as NgModuleRef<any>);
 
-           expect(mSanitizerFactorySpy).toHaveBeenCalled();
-         });
+        expect(mSanitizerFactorySpy).toHaveBeenCalled();
+      });
     });
 
     describe('(when the factory is bound to a `ngModuleRef`)', () => {
       it('should retrieve `RendererFactory2` from the specified injector first', () => {
         const injector = Injector.create({
-          providers: [
-            {provide: RendererFactory2, useValue: rendererFactorySpy},
-          ]
+          providers: [{provide: RendererFactory2, useValue: rendererFactorySpy}],
         });
         (cf as any).ngModule = {
-          injector: Injector.create({providers: [THROWING_RENDERER_FACTOR2_PROVIDER]})
+          injector: Injector.create({providers: [THROWING_RENDERER_FACTOR2_PROVIDER]}),
         };
 
         cf.create(injector);
@@ -227,40 +228,37 @@ describe('ComponentFactory', () => {
         expect(rendererFactorySpy.wasCalled).toBeTrue();
       });
 
-      it('should retrieve `RendererFactory2` from the `ngModuleRef` if not provided by the injector',
-         () => {
-           const injector = Injector.create({providers: []});
-           (cf as any).ngModule = {
-             injector: Injector.create({
-               providers: [
-                 {provide: RendererFactory2, useValue: rendererFactorySpy},
-               ]
-             })
-           };
+      it('should retrieve `RendererFactory2` from the `ngModuleRef` if not provided by the injector', () => {
+        const injector = Injector.create({providers: []});
+        (cf as any).ngModule = {
+          injector: Injector.create({
+            providers: [{provide: RendererFactory2, useValue: rendererFactorySpy}],
+          }),
+        };
 
-           cf.create(injector);
+        cf.create(injector);
 
-           expect(rendererFactorySpy.wasCalled).toBeTrue();
-         });
+        expect(rendererFactorySpy.wasCalled).toBeTrue();
+      });
 
       it('should retrieve `Sanitizer` from the specified injector first', () => {
-        const iSanitizerFactorySpy =
-            jasmine.createSpy('Injector#sanitizerFactory').and.returnValue({});
+        const iSanitizerFactorySpy = jasmine
+          .createSpy('Injector#sanitizerFactory')
+          .and.returnValue({});
         const injector = Injector.create({
           providers: [
             {provide: RendererFactory2, useValue: rendererFactorySpy},
             {provide: Sanitizer, useFactory: iSanitizerFactorySpy, deps: []},
-          ]
+          ],
         });
 
-        const mSanitizerFactorySpy =
-            jasmine.createSpy('NgModuleRef#sanitizerFactory').and.returnValue({});
+        const mSanitizerFactorySpy = jasmine
+          .createSpy('NgModuleRef#sanitizerFactory')
+          .and.returnValue({});
         (cf as any).ngModule = {
           injector: Injector.create({
-            providers: [
-              {provide: Sanitizer, useFactory: mSanitizerFactorySpy, deps: []},
-            ]
-          })
+            providers: [{provide: Sanitizer, useFactory: mSanitizerFactorySpy, deps: []}],
+          }),
         };
 
         cf.create(injector);
@@ -269,32 +267,33 @@ describe('ComponentFactory', () => {
         expect(mSanitizerFactorySpy).not.toHaveBeenCalled();
       });
 
-      it('should retrieve `Sanitizer` from the `ngModuleRef` if not provided by the injector',
-         () => {
-           const injector = Injector.create({providers: []});
-
-           const mSanitizerFactorySpy =
-               jasmine.createSpy('NgModuleRef#sanitizerFactory').and.returnValue({});
-           (cf as any).ngModule = {
-             injector: Injector.create({
-               providers: [
-                 {provide: RendererFactory2, useValue: rendererFactorySpy},
-                 {provide: Sanitizer, useFactory: mSanitizerFactorySpy, deps: []},
-               ]
-             })
-           };
+      it('should retrieve `Sanitizer` from the `ngModuleRef` if not provided by the injector', () => {
+        const injector = Injector.create({providers: []});
 
+        const mSanitizerFactorySpy = jasmine
+          .createSpy('NgModuleRef#sanitizerFactory')
+          .and.returnValue({});
+        (cf as any).ngModule = {
+          injector: Injector.create({
+            providers: [
+              {provide: RendererFactory2, useValue: rendererFactorySpy},
+              {provide: Sanitizer, useFactory: mSanitizerFactorySpy, deps: []},
+            ],
+          }),
+        };
 
-           cf.create(injector);
+        cf.create(injector);
 
-           expect(mSanitizerFactorySpy).toHaveBeenCalled();
-         });
+        expect(mSanitizerFactorySpy).toHaveBeenCalled();
+      });
     });
 
     it('should ensure that rendererFactory is called after initial styling is set', () => {
       class TestMockRendererFactory extends MockRendererFactory {
-        override createRenderer(hostElement: RElement|null, rendererType: RendererType2|null):
-            Renderer {
+        override createRenderer(
+          hostElement: RElement | null,
+          rendererType: RendererType2 | null,
+        ): Renderer {
           if (hostElement) {
             hostElement.classList.add('HOST_RENDERER');
           }
@@ -305,7 +304,7 @@ describe('ComponentFactory', () => {
       const injector = Injector.create({
         providers: [
           {provide: RendererFactory2, useFactory: () => new TestMockRendererFactory(), deps: []},
-        ]
+        ],
       });
 
       const hostNode = document.createElement('div');
@@ -323,10 +322,11 @@ describe('ComponentFactory', () => {
         ngOnChanges(changes: SimpleChanges): void {
           const inChange = changes['in'];
           inputChangesLog.push(
-              `${inChange.previousValue}:${inChange.currentValue}:${inChange.firstChange}`);
+            `${inChange.previousValue}:${inChange.currentValue}:${inChange.firstChange}`,
+          );
         }
 
-        @Input() in : string|undefined;
+        @Input() in: string | undefined;
       }
 
       const fixture = TestBed.createComponent(DynamicCmp);
@@ -349,7 +349,7 @@ describe('ComponentFactory', () => {
     it('should allow setting mapped inputs on the ComponentRef', () => {
       @Component({template: `{{in}}`})
       class DynamicCmp {
-        @Input('publicName') in : string|undefined;
+        @Input('publicName') in: string | undefined;
       }
 
       const fixture = TestBed.createComponent(DynamicCmp);
@@ -369,8 +369,7 @@ describe('ComponentFactory', () => {
 
     it('should log or throw error on unknown inputs', () => {
       @Component({template: ``})
-      class NoInputsCmp {
-      }
+      class NoInputsCmp {}
 
       const fixture = TestBed.createComponent(NoInputsCmp);
       fixture.detectChanges();
@@ -378,10 +377,8 @@ describe('ComponentFactory', () => {
       spyOn(console, 'error');
       fixture.componentRef.setInput('doesNotExist', '');
 
-      const msgL1 =
-          `NG0303: Can't set value of the 'doesNotExist' input on the 'NoInputsCmp' component. `;
-      const msgL2 =
-          `Make sure that the 'doesNotExist' property is annotated with @Input() or a mapped @Input('doesNotExist') exists.`;
+      const msgL1 = `NG0303: Can't set value of the 'doesNotExist' input on the 'NoInputsCmp' component. `;
+      const msgL2 = `Make sure that the 'doesNotExist' property is annotated with @Input() or a mapped @Input('doesNotExist') exists.`;
       expect(console.error).toHaveBeenCalledWith(msgL1 + msgL2);
     });
 
@@ -391,7 +388,7 @@ describe('ComponentFactory', () => {
         changeDetection: ChangeDetectionStrategy.OnPush,
       })
       class DynamicCmp {
-        @Input() in : string|undefined;
+        @Input() in: string | undefined;
       }
 
       const fixture = TestBed.createComponent(DynamicCmp);
@@ -412,7 +409,7 @@ describe('ComponentFactory', () => {
       })
       class DynamicCmp {
         @Input()
-            set in(v: string) {
+        set in(v: string) {
           log.push(v);
         }
       }
diff --git a/packages/core/test/render3/deps_tracker_spec.ts b/packages/core/test/render3/deps_tracker_spec.ts
index c9a6b7add3e1b..d019eff682b4e 100644
--- a/packages/core/test/render3/deps_tracker_spec.ts
+++ b/packages/core/test/render3/deps_tracker_spec.ts
@@ -9,7 +9,12 @@
 import {Component, Directive, forwardRef, NgModule, Pipe} from '@angular/core';
 
 import {NgModuleDef} from '../../src/r3_symbols';
-import {ComponentType, NgModuleType, ɵsetClassDebugInfo, ɵɵdefineComponent} from '../../src/render3';
+import {
+  ComponentType,
+  NgModuleType,
+  ɵsetClassDebugInfo,
+  ɵɵdefineComponent,
+} from '../../src/render3';
 import {TEST_ONLY} from '../../src/render3/deps_tracker/deps_tracker';
 
 const {DepsTracker} = TEST_ONLY;
@@ -24,8 +29,7 @@ describe('runtime dependency tracker', () => {
   describe('getNgModuleScope method', () => {
     it('should include empty scope for a module without any import/declarations/exports', () => {
       @NgModule({})
-      class MainModule {
-      }
+      class MainModule {}
 
       const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
 
@@ -48,16 +52,13 @@ describe('runtime dependency tracker', () => {
     describe('exports specs', () => {
       it('should include the exported components/directives/pipes in exported scope', () => {
         @Directive({})
-        class Directive1 {
-        }
+        class Directive1 {}
 
         @Pipe({name: 'pipe1'})
-        class Pipe1 {
-        }
+        class Pipe1 {}
 
         @Component({})
-        class Component1 {
-        }
+        class Component1 {}
 
         // No ɵcmp added yet.
         class AsyncComponent {}
@@ -65,8 +66,7 @@ describe('runtime dependency tracker', () => {
         @NgModule({
           exports: [Directive1, Pipe1, Component1, AsyncComponent],
         })
-        class MainModule {
-        }
+        class MainModule {}
 
         const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
 
@@ -76,119 +76,123 @@ describe('runtime dependency tracker', () => {
         });
       });
 
-      it('should include the exported scope of an exported module in the exported scope and compilation scope',
-         () => {
-           @Directive({})
-           class Directive1 {
-           }
-
-           @Pipe({name: 'pipe1'})
-           class Pipe1 {
-           }
-
-           @Component({})
-           class Component1 {
-           }
-
-           @NgModule({
-             exports: [Directive1, Pipe1, Component1],
-           })
-           class SubModule {
-           }
-
-           @NgModule({
-             exports: [SubModule],
-           })
-           class MainModule {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.exported).toEqual({
-             pipes: new Set([Pipe1]),
-             directives: new Set([Directive1, Component1]),
-           });
-
-           expect(ans.compilation).toEqual({
-             pipes: new Set([Pipe1]),
-             directives: new Set([Directive1, Component1]),
-           });
-         });
-
-      it('should combine the directly exported elements with the exported scope of exported module in both exported and compilation scopes',
-         () => {
-           @Directive({})
-           class Directive1 {
-           }
-
-           @Pipe({name: 'pipe1'})
-           class Pipe1 {
-           }
-
-           @Component({})
-           class Component1 {
-           }
-
-           @NgModule({
-             exports: [Directive1, Pipe1, Component1],
-           })
-           class SubModule {
-           }
-
-           @Component({})
-           class MainComponent {
-           }
-
-           @NgModule({
-             exports: [SubModule, MainComponent],
-           })
-           class MainModule {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.exported).toEqual({
-             pipes: new Set([Pipe1]),
-             directives: new Set([Directive1, Component1, MainComponent]),
-           });
-
-           expect(ans.compilation).toEqual({
-             pipes: new Set([Pipe1]),
-             directives: new Set([Directive1, Component1]),
-           });
-         });
+      it('should include the exported scope of an exported module in the exported scope and compilation scope', () => {
+        @Directive({})
+        class Directive1 {}
+
+        @Pipe({name: 'pipe1'})
+        class Pipe1 {}
+
+        @Component({})
+        class Component1 {}
+
+        @NgModule({
+          exports: [Directive1, Pipe1, Component1],
+        })
+        class SubModule {}
+
+        @NgModule({
+          exports: [SubModule],
+        })
+        class MainModule {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.exported).toEqual({
+          pipes: new Set([Pipe1]),
+          directives: new Set([Directive1, Component1]),
+        });
+
+        expect(ans.compilation).toEqual({
+          pipes: new Set([Pipe1]),
+          directives: new Set([Directive1, Component1]),
+        });
+      });
+
+      it('should combine the directly exported elements with the exported scope of exported module in both exported and compilation scopes', () => {
+        @Directive({})
+        class Directive1 {}
+
+        @Pipe({name: 'pipe1'})
+        class Pipe1 {}
+
+        @Component({})
+        class Component1 {}
+
+        @NgModule({
+          exports: [Directive1, Pipe1, Component1],
+        })
+        class SubModule {}
+
+        @Component({})
+        class MainComponent {}
+
+        @NgModule({
+          exports: [SubModule, MainComponent],
+        })
+        class MainModule {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.exported).toEqual({
+          pipes: new Set([Pipe1]),
+          directives: new Set([Directive1, Component1, MainComponent]),
+        });
+
+        expect(ans.compilation).toEqual({
+          pipes: new Set([Pipe1]),
+          directives: new Set([Directive1, Component1]),
+        });
+      });
     });
 
     describe('import specs', () => {
       it('should contain the exported scope of an imported module in compilation scope', () => {
         @Directive({})
-        class Directive1 {
-        }
+        class Directive1 {}
 
         @Pipe({name: 'pipe1'})
-        class Pipe1 {
-        }
+        class Pipe1 {}
 
         @Component({})
-        class Component1 {
-        }
+        class Component1 {}
 
         @Component({})
-        class PrivateComponent {
-        }
+        class PrivateComponent {}
 
         @NgModule({
           exports: [Directive1, Component1, Pipe1],
           declarations: [PrivateComponent],
         })
-        class SubModule {
-        }
+        class SubModule {}
 
         @NgModule({
           imports: [SubModule],
         })
-        class MainModule {
-        }
+        class MainModule {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.compilation).toEqual({
+          directives: new Set([Directive1, Component1]),
+          pipes: new Set([Pipe1]),
+        });
+      });
+
+      it('should contain imported standalone components/directive/pipes in compilation scope', () => {
+        @Directive({standalone: true})
+        class Directive1 {}
+
+        @Pipe({name: 'pipe1', standalone: true})
+        class Pipe1 {}
+
+        @Component({standalone: true})
+        class Component1 {}
+
+        @NgModule({
+          imports: [Directive1, Pipe1, Component1],
+        })
+        class MainModule {}
 
         const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
 
@@ -198,106 +202,65 @@ describe('runtime dependency tracker', () => {
         });
       });
 
-      it('should contain imported standalone components/directive/pipes in compilation scope',
-         () => {
-           @Directive({standalone: true})
-           class Directive1 {
-           }
-
-           @Pipe({name: 'pipe1', standalone: true})
-           class Pipe1 {
-           }
-
-           @Component({standalone: true})
-           class Component1 {
-           }
-
-           @NgModule({
-             imports: [Directive1, Pipe1, Component1],
-           })
-           class MainModule {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.compilation).toEqual({
-             directives: new Set([Directive1, Component1]),
-             pipes: new Set([Pipe1]),
-           });
-         });
-
-      it('should contain the exported scope of a depth-2 transitively imported module in compilation scope',
-         () => {
-           @Directive({})
-           class Directive1 {
-           }
-
-           @Pipe({name: 'pipe1'})
-           class Pipe1 {
-           }
-
-           @Component({})
-           class Component1 {
-           }
-
-           @Component({})
-           class PrivateComponent {
-           }
-
-           @NgModule({
-             exports: [Directive1, Component1, Pipe1],
-             declarations: [PrivateComponent],
-           })
-           class SubSubModule {
-           }
-
-           @NgModule({exports: [SubSubModule]})
-           class SubModule {
-           }
-
-           @NgModule({
-             imports: [SubModule],
-           })
-           class MainModule {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.compilation).toEqual({
-             directives: new Set([Directive1, Component1]),
-             pipes: new Set([Pipe1]),
-           });
-         });
-
-      it('should poison compilation scope if an import is neither a NgModule nor a standalone component',
-         () => {
-           class RandomClass {}
-
-           @NgModule({
-             imports: [RandomClass],
-           })
-           class MainModule {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.compilation.isPoisoned).toBeTrue();
-         });
+      it('should contain the exported scope of a depth-2 transitively imported module in compilation scope', () => {
+        @Directive({})
+        class Directive1 {}
+
+        @Pipe({name: 'pipe1'})
+        class Pipe1 {}
+
+        @Component({})
+        class Component1 {}
+
+        @Component({})
+        class PrivateComponent {}
+
+        @NgModule({
+          exports: [Directive1, Component1, Pipe1],
+          declarations: [PrivateComponent],
+        })
+        class SubSubModule {}
+
+        @NgModule({exports: [SubSubModule]})
+        class SubModule {}
+
+        @NgModule({
+          imports: [SubModule],
+        })
+        class MainModule {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.compilation).toEqual({
+          directives: new Set([Directive1, Component1]),
+          pipes: new Set([Pipe1]),
+        });
+      });
+
+      it('should poison compilation scope if an import is neither a NgModule nor a standalone component', () => {
+        class RandomClass {}
+
+        @NgModule({
+          imports: [RandomClass],
+        })
+        class MainModule {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.compilation.isPoisoned).toBeTrue();
+      });
     });
 
     describe('declarations specs', () => {
       it('should include declared components/directives/pipes as part of compilation scope', () => {
         @Directive({})
-        class Directive1 {
-        }
+        class Directive1 {}
 
         @Pipe({name: 'pipe1'})
-        class Pipe1 {
-        }
+        class Pipe1 {}
 
         @Component({})
-        class Component1 {
-        }
+        class Component1 {}
 
         // No ɵcmp added yet.
         class AsyncComponent {}
@@ -305,8 +268,7 @@ describe('runtime dependency tracker', () => {
         @NgModule({
           declarations: [Directive1, Pipe1, Component1, AsyncComponent],
         })
-        class MainModule {
-        }
+        class MainModule {}
 
         const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
 
@@ -322,14 +284,12 @@ describe('runtime dependency tracker', () => {
 
       it('should poison the compilation scope if a standalone component is declared', () => {
         @Component({standalone: true})
-        class Component1 {
-        }
+        class Component1 {}
 
         @NgModule({
           declarations: [Component1],
         })
-        class MainModule {
-        }
+        class MainModule {}
 
         const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
 
@@ -338,14 +298,12 @@ describe('runtime dependency tracker', () => {
 
       it('should poison compilation scope if declare a module', () => {
         @NgModule({})
-        class SubModule {
-        }
+        class SubModule {}
 
         @NgModule({
           declarations: [SubModule],
         })
-        class MainModule {
-        }
+        class MainModule {}
 
         const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
 
@@ -356,14 +314,12 @@ describe('runtime dependency tracker', () => {
     describe('cache specs', () => {
       it('should use cache for re-calculation', () => {
         @Component({})
-        class Component1 {
-        }
+        class Component1 {}
 
         @NgModule({
           declarations: [Component1],
         })
-        class MainModule {
-        }
+        class MainModule {}
 
         let ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
 
@@ -385,14 +341,12 @@ describe('runtime dependency tracker', () => {
 
       it('should bust the cache correctly', () => {
         @Component({})
-        class Component1 {
-        }
+        class Component1 {}
 
         @NgModule({
           declarations: [Component1],
         })
-        class MainModule {
-        }
+        class MainModule {}
 
         let ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
 
@@ -415,389 +369,341 @@ describe('runtime dependency tracker', () => {
     });
 
     describe('forward ref specs', () => {
-      it('should include the exported scope of a forward ref imported module in the compilation scope when compiling in JIT mode',
-         () => {
-           @NgModule({imports: [forwardRef(() => SubModule)]})
-           class MainModule {
-           }
-
-           @Component({})
-           class Component1 {
-           }
-
-           @Directive({})
-           class Directive1 {
-           }
-
-           @Pipe({name: 'pipe1'})
-           class Pipe1 {
-           }
-
-           @NgModule({exports: [Component1, Directive1, Pipe1]})
-           class SubModule {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.compilation).toEqual({
-             pipes: new Set([Pipe1]),
-             directives: new Set([Component1, Directive1]),
-           });
-         });
-
-      it('should include the exported scope of a forward ref imported module in the compilation scope when compiling in AOT mode',
-         () => {
-           class MainModule {}
-           (MainModule as NgModuleType).ɵmod = createNgModuleDef({imports: () => ([SubModule])});
-
-           @Component({})
-           class Component1 {
-           }
-
-           @Directive({})
-           class Directive1 {
-           }
-
-           @Pipe({name: 'pipe1'})
-           class Pipe1 {
-           }
-
-           @NgModule({exports: [Component1, Directive1, Pipe1]})
-           class SubModule {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.compilation).toEqual({
-             pipes: new Set([Pipe1]),
-             directives: new Set([Component1, Directive1]),
-           });
-         });
-
-      it('should include forward ref imported standalone component in the compilation scope when compiling in JIT mode',
-         () => {
-           @NgModule({imports: [forwardRef(() => Component1)]})
-           class MainModule {
-           }
-
-           @Component({standalone: true})
-           class Component1 {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.compilation).toEqual({
-             pipes: new Set([]),
-             directives: new Set([Component1]),
-           });
-         });
-
-      it('should include forward ref imported standalone component in the compilation scope when compiling in AOT mode',
-         () => {
-           class MainModule {}
-           (MainModule as NgModuleType).ɵmod = createNgModuleDef({imports: () => ([Component1])});
-
-           @Component({standalone: true})
-           class Component1 {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.compilation).toEqual({
-             pipes: new Set([]),
-             directives: new Set([Component1]),
-           });
-         });
-
-      it('should include the forward ref declarations in the compilation scope when compiling in JIT mode',
-         () => {
-           @NgModule({
-             declarations: [
-               forwardRef(() => Component1), forwardRef(() => Directive1), forwardRef(() => Pipe1)
-             ],
-           })
-           class MainModule {
-           }
-
-           @Component({})
-           class Component1 {
-           }
-
-           @Directive({})
-           class Directive1 {
-           }
-
-           @Pipe({name: 'pipe1'})
-           class Pipe1 {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.compilation).toEqual({
-             pipes: new Set([Pipe1]),
-             directives: new Set([Component1, Directive1]),
-           });
-         });
-
-      it('should include the forward ref declarations in the compilation scope when compiling in AOT mode',
-         () => {
-           class MainModule {}
-           (MainModule as NgModuleType).ɵmod =
-               createNgModuleDef({declarations: () => ([Component1, Directive1, Pipe1])});
-
-           @Component({})
-           class Component1 {
-           }
-
-           @Directive({})
-           class Directive1 {
-           }
-
-           @Pipe({name: 'pipe1'})
-           class Pipe1 {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.compilation).toEqual({
-             pipes: new Set([Pipe1]),
-             directives: new Set([Component1, Directive1]),
-           });
-         });
-
-      it('should include the exported forward ref components/directives/pipes in exported scope when compiling in JIT mode',
-         () => {
-           @NgModule({
-             exports: [
-               forwardRef(() => Component1), forwardRef(() => Directive1), forwardRef(() => Pipe1)
-             ],
-           })
-           class MainModule {
-           }
-
-           @Component({})
-           class Component1 {
-           }
-
-           @Directive({})
-           class Directive1 {
-           }
-
-           @Pipe({name: 'pipe1'})
-           class Pipe1 {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.exported).toEqual({
-             pipes: new Set([Pipe1]),
-             directives: new Set([Component1, Directive1]),
-           });
-         });
-
-      it('should include the exported forward ref components/directives/pipes in exported scope when compiling in AOT mode',
-         () => {
-           class MainModule {}
-           (MainModule as NgModuleType).ɵmod =
-               createNgModuleDef({exports: () => ([Component1, Directive1, Pipe1])});
-
-           @Component({})
-           class Component1 {
-           }
-
-           @Directive({})
-           class Directive1 {
-           }
-
-           @Pipe({name: 'pipe1'})
-           class Pipe1 {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.exported).toEqual({
-             pipes: new Set([Pipe1]),
-             directives: new Set([Component1, Directive1]),
-           });
-         });
-
-      it('should include the exported scope of an exported forward ref module in the exported and compilation scope when compiling in JIT mode',
-         () => {
-           @NgModule({exports: [forwardRef(() => SubModule)]})
-           class MainModule {
-           }
-
-           @Component({})
-           class Component1 {
-           }
-
-           @Directive({})
-           class Directive1 {
-           }
-
-           @Pipe({name: 'pipe1'})
-           class Pipe1 {
-           }
-
-           @NgModule({exports: [Component1, Directive1, Pipe1]})
-           class SubModule {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.compilation).toEqual({
-             pipes: new Set([Pipe1]),
-             directives: new Set([Component1, Directive1]),
-           });
-           expect(ans.exported).toEqual({
-             pipes: new Set([Pipe1]),
-             directives: new Set([Component1, Directive1]),
-           });
-         });
-
-      it('should include the exported scope of an exported forward ref module in the exported and compilation scopes when compiling in AOT mode',
-         () => {
-           class MainModule {}
-           (MainModule as NgModuleType).ɵmod = createNgModuleDef({exports: () => ([SubModule])});
-
-           @Component({})
-           class Component1 {
-           }
-
-           @Directive({})
-           class Directive1 {
-           }
-
-           @Pipe({name: 'pipe1'})
-           class Pipe1 {
-           }
-
-           @NgModule({exports: [Component1, Directive1, Pipe1]})
-           class SubModule {
-           }
-
-           const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
-
-           expect(ans.compilation).toEqual({
-             pipes: new Set([Pipe1]),
-             directives: new Set([Component1, Directive1]),
-           });
-           expect(ans.exported).toEqual({
-             pipes: new Set([Pipe1]),
-             directives: new Set([Component1, Directive1]),
-           });
-         });
+      it('should include the exported scope of a forward ref imported module in the compilation scope when compiling in JIT mode', () => {
+        @NgModule({imports: [forwardRef(() => SubModule)]})
+        class MainModule {}
+
+        @Component({})
+        class Component1 {}
+
+        @Directive({})
+        class Directive1 {}
+
+        @Pipe({name: 'pipe1'})
+        class Pipe1 {}
+
+        @NgModule({exports: [Component1, Directive1, Pipe1]})
+        class SubModule {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.compilation).toEqual({
+          pipes: new Set([Pipe1]),
+          directives: new Set([Component1, Directive1]),
+        });
+      });
+
+      it('should include the exported scope of a forward ref imported module in the compilation scope when compiling in AOT mode', () => {
+        class MainModule {}
+        (MainModule as NgModuleType).ɵmod = createNgModuleDef({imports: () => [SubModule]});
+
+        @Component({})
+        class Component1 {}
+
+        @Directive({})
+        class Directive1 {}
+
+        @Pipe({name: 'pipe1'})
+        class Pipe1 {}
+
+        @NgModule({exports: [Component1, Directive1, Pipe1]})
+        class SubModule {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.compilation).toEqual({
+          pipes: new Set([Pipe1]),
+          directives: new Set([Component1, Directive1]),
+        });
+      });
+
+      it('should include forward ref imported standalone component in the compilation scope when compiling in JIT mode', () => {
+        @NgModule({imports: [forwardRef(() => Component1)]})
+        class MainModule {}
+
+        @Component({standalone: true})
+        class Component1 {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.compilation).toEqual({
+          pipes: new Set([]),
+          directives: new Set([Component1]),
+        });
+      });
+
+      it('should include forward ref imported standalone component in the compilation scope when compiling in AOT mode', () => {
+        class MainModule {}
+        (MainModule as NgModuleType).ɵmod = createNgModuleDef({imports: () => [Component1]});
+
+        @Component({standalone: true})
+        class Component1 {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.compilation).toEqual({
+          pipes: new Set([]),
+          directives: new Set([Component1]),
+        });
+      });
+
+      it('should include the forward ref declarations in the compilation scope when compiling in JIT mode', () => {
+        @NgModule({
+          declarations: [
+            forwardRef(() => Component1),
+            forwardRef(() => Directive1),
+            forwardRef(() => Pipe1),
+          ],
+        })
+        class MainModule {}
+
+        @Component({})
+        class Component1 {}
+
+        @Directive({})
+        class Directive1 {}
+
+        @Pipe({name: 'pipe1'})
+        class Pipe1 {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.compilation).toEqual({
+          pipes: new Set([Pipe1]),
+          directives: new Set([Component1, Directive1]),
+        });
+      });
+
+      it('should include the forward ref declarations in the compilation scope when compiling in AOT mode', () => {
+        class MainModule {}
+        (MainModule as NgModuleType).ɵmod = createNgModuleDef({
+          declarations: () => [Component1, Directive1, Pipe1],
+        });
+
+        @Component({})
+        class Component1 {}
+
+        @Directive({})
+        class Directive1 {}
+
+        @Pipe({name: 'pipe1'})
+        class Pipe1 {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.compilation).toEqual({
+          pipes: new Set([Pipe1]),
+          directives: new Set([Component1, Directive1]),
+        });
+      });
+
+      it('should include the exported forward ref components/directives/pipes in exported scope when compiling in JIT mode', () => {
+        @NgModule({
+          exports: [
+            forwardRef(() => Component1),
+            forwardRef(() => Directive1),
+            forwardRef(() => Pipe1),
+          ],
+        })
+        class MainModule {}
+
+        @Component({})
+        class Component1 {}
+
+        @Directive({})
+        class Directive1 {}
+
+        @Pipe({name: 'pipe1'})
+        class Pipe1 {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.exported).toEqual({
+          pipes: new Set([Pipe1]),
+          directives: new Set([Component1, Directive1]),
+        });
+      });
+
+      it('should include the exported forward ref components/directives/pipes in exported scope when compiling in AOT mode', () => {
+        class MainModule {}
+        (MainModule as NgModuleType).ɵmod = createNgModuleDef({
+          exports: () => [Component1, Directive1, Pipe1],
+        });
+
+        @Component({})
+        class Component1 {}
+
+        @Directive({})
+        class Directive1 {}
+
+        @Pipe({name: 'pipe1'})
+        class Pipe1 {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.exported).toEqual({
+          pipes: new Set([Pipe1]),
+          directives: new Set([Component1, Directive1]),
+        });
+      });
+
+      it('should include the exported scope of an exported forward ref module in the exported and compilation scope when compiling in JIT mode', () => {
+        @NgModule({exports: [forwardRef(() => SubModule)]})
+        class MainModule {}
+
+        @Component({})
+        class Component1 {}
+
+        @Directive({})
+        class Directive1 {}
+
+        @Pipe({name: 'pipe1'})
+        class Pipe1 {}
+
+        @NgModule({exports: [Component1, Directive1, Pipe1]})
+        class SubModule {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.compilation).toEqual({
+          pipes: new Set([Pipe1]),
+          directives: new Set([Component1, Directive1]),
+        });
+        expect(ans.exported).toEqual({
+          pipes: new Set([Pipe1]),
+          directives: new Set([Component1, Directive1]),
+        });
+      });
+
+      it('should include the exported scope of an exported forward ref module in the exported and compilation scopes when compiling in AOT mode', () => {
+        class MainModule {}
+        (MainModule as NgModuleType).ɵmod = createNgModuleDef({exports: () => [SubModule]});
+
+        @Component({})
+        class Component1 {}
+
+        @Directive({})
+        class Directive1 {}
+
+        @Pipe({name: 'pipe1'})
+        class Pipe1 {}
+
+        @NgModule({exports: [Component1, Directive1, Pipe1]})
+        class SubModule {}
+
+        const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
+
+        expect(ans.compilation).toEqual({
+          pipes: new Set([Pipe1]),
+          directives: new Set([Component1, Directive1]),
+        });
+        expect(ans.exported).toEqual({
+          pipes: new Set([Pipe1]),
+          directives: new Set([Component1, Directive1]),
+        });
+      });
     });
   });
 
   describe('getStandaloneComponentScope method', () => {
-    it('should only include the component itself in the compilation scope when there is no imports',
-       () => {
-         class MainComponent {}
-
-         const ans =
-             depsTracker.getStandaloneComponentScope(MainComponent as ComponentType<any>, []);
-
-         expect(ans.compilation).toEqual({
-           pipes: new Set([]),
-           directives: new Set([MainComponent]),
-           ngModules: new Set([]),
-         });
-       });
-
-    it('should include the imported standalone component/directive/pipes in the compilation scope',
-       () => {
-         @Component({standalone: true})
-         class Component1 {
-         }
-
-         @Directive({standalone: true})
-         class Directive1 {
-         }
-
-         @Pipe({name: 'pipe1', standalone: true})
-         class Pipe1 {
-         }
-
-         class MainComponent {}
-
-         const ans = depsTracker.getStandaloneComponentScope(
-             MainComponent as ComponentType<any>, [Component1, Directive1, Pipe1]);
-
-         expect(ans.compilation).toEqual({
-           pipes: new Set([Pipe1]),
-           directives: new Set([MainComponent, Component1, Directive1]),
-           ngModules: new Set([]),
-         });
-       });
-
-    it('should include the imported standalone component/directive/pipes in the compilation scope - nested array case',
-       () => {
-         @Component({standalone: true})
-         class Component1 {
-         }
-
-         @Directive({standalone: true})
-         class Directive1 {
-         }
-
-         @Pipe({name: 'pipe1', standalone: true})
-         class Pipe1 {
-         }
-
-         class MainComponent {}
-
-         const ans = depsTracker.getStandaloneComponentScope(
-             MainComponent as ComponentType<any>, [[[Component1], Directive1], [[[Pipe1]]]]);
-
-         expect(ans.compilation).toEqual({
-           pipes: new Set([Pipe1]),
-           directives: new Set([MainComponent, Component1, Directive1]),
-           ngModules: new Set([]),
-         });
-       });
+    it('should only include the component itself in the compilation scope when there is no imports', () => {
+      class MainComponent {}
+
+      const ans = depsTracker.getStandaloneComponentScope(MainComponent as ComponentType<any>, []);
+
+      expect(ans.compilation).toEqual({
+        pipes: new Set([]),
+        directives: new Set([MainComponent]),
+        ngModules: new Set([]),
+      });
+    });
+
+    it('should include the imported standalone component/directive/pipes in the compilation scope', () => {
+      @Component({standalone: true})
+      class Component1 {}
+
+      @Directive({standalone: true})
+      class Directive1 {}
+
+      @Pipe({name: 'pipe1', standalone: true})
+      class Pipe1 {}
+
+      class MainComponent {}
+
+      const ans = depsTracker.getStandaloneComponentScope(MainComponent as ComponentType<any>, [
+        Component1,
+        Directive1,
+        Pipe1,
+      ]);
+
+      expect(ans.compilation).toEqual({
+        pipes: new Set([Pipe1]),
+        directives: new Set([MainComponent, Component1, Directive1]),
+        ngModules: new Set([]),
+      });
+    });
+
+    it('should include the imported standalone component/directive/pipes in the compilation scope - nested array case', () => {
+      @Component({standalone: true})
+      class Component1 {}
+
+      @Directive({standalone: true})
+      class Directive1 {}
+
+      @Pipe({name: 'pipe1', standalone: true})
+      class Pipe1 {}
+
+      class MainComponent {}
+
+      const ans = depsTracker.getStandaloneComponentScope(MainComponent as ComponentType<any>, [
+        [[Component1], Directive1],
+        [[[Pipe1]]],
+      ]);
+
+      expect(ans.compilation).toEqual({
+        pipes: new Set([Pipe1]),
+        directives: new Set([MainComponent, Component1, Directive1]),
+        ngModules: new Set([]),
+      });
+    });
 
     it('should poison the compilation scope if an import is not standalone', () => {
       @Component({})
-      class Component1 {
-      }
+      class Component1 {}
 
       class MainComponent {}
 
-      const ans = depsTracker.getStandaloneComponentScope(
-          MainComponent as ComponentType<any>, [Component1]);
+      const ans = depsTracker.getStandaloneComponentScope(MainComponent as ComponentType<any>, [
+        Component1,
+      ]);
 
       expect(ans.compilation.isPoisoned).toBeTrue();
     });
 
     it('should include the imported module and its exported scope in the compilation scope', () => {
       @Directive({})
-      class Directive1 {
-      }
+      class Directive1 {}
 
       @Pipe({name: 'pipe1'})
-      class Pipe1 {
-      }
+      class Pipe1 {}
 
       @Component({})
-      class Component1 {
-      }
+      class Component1 {}
 
       @Component({})
-      class PrivateComponent {
-      }
+      class PrivateComponent {}
 
       @NgModule({
         exports: [Directive1, Component1, Pipe1],
         declarations: [PrivateComponent],
       })
-      class SubSubModule {
-      }
+      class SubSubModule {}
 
       class MainComponent {}
 
-      const ans = depsTracker.getStandaloneComponentScope(
-          MainComponent as ComponentType<any>, [SubSubModule]);
+      const ans = depsTracker.getStandaloneComponentScope(MainComponent as ComponentType<any>, [
+        SubSubModule,
+      ]);
 
       expect(ans.compilation).toEqual({
         pipes: new Set([Pipe1]),
@@ -806,149 +712,143 @@ describe('runtime dependency tracker', () => {
       });
     });
 
-    it('should include the imported module and its exported scope in the compilation scope - case of nested array imports',
-       () => {
-         @Directive({})
-         class Directive1 {
-         }
+    it('should include the imported module and its exported scope in the compilation scope - case of nested array imports', () => {
+      @Directive({})
+      class Directive1 {}
 
-         @Pipe({name: 'pipe1'})
-         class Pipe1 {
-         }
+      @Pipe({name: 'pipe1'})
+      class Pipe1 {}
 
-         @Component({})
-         class Component1 {
-         }
+      @Component({})
+      class Component1 {}
 
-         @Component({})
-         class PrivateComponent {
-         }
+      @Component({})
+      class PrivateComponent {}
 
-         @NgModule({
-           exports: [Directive1, Component1, Pipe1],
-           declarations: [PrivateComponent],
-         })
-         class SubSubModule {
-         }
+      @NgModule({
+        exports: [Directive1, Component1, Pipe1],
+        declarations: [PrivateComponent],
+      })
+      class SubSubModule {}
 
-         class MainComponent {}
+      class MainComponent {}
 
-         const ans = depsTracker.getStandaloneComponentScope(
-             MainComponent as ComponentType<any>, [[SubSubModule]]);
+      const ans = depsTracker.getStandaloneComponentScope(MainComponent as ComponentType<any>, [
+        [SubSubModule],
+      ]);
 
-         expect(ans.compilation).toEqual({
-           pipes: new Set([Pipe1]),
-           directives: new Set([MainComponent, Component1, Directive1]),
-           ngModules: new Set([SubSubModule]),
-         });
-       });
+      expect(ans.compilation).toEqual({
+        pipes: new Set([Pipe1]),
+        directives: new Set([MainComponent, Component1, Directive1]),
+        ngModules: new Set([SubSubModule]),
+      });
+    });
 
     it('should resolve the imported forward refs and include them in the compilation scope', () => {
       @Component({standalone: true})
-      class Component1 {
-      }
+      class Component1 {}
 
       @Directive({standalone: true})
-      class Directive1 {
-      }
+      class Directive1 {}
 
       @Pipe({name: 'pipe1', standalone: true})
-      class Pipe1 {
-      }
+      class Pipe1 {}
 
       @Component({})
-      class SubModuleComponent {
-      }
+      class SubModuleComponent {}
 
       @Directive({})
-      class SubModuleDirective {
-      }
+      class SubModuleDirective {}
 
       @Pipe({name: 'submodule pipe'})
-      class SubModulePipe {
-      }
+      class SubModulePipe {}
 
       @NgModule({exports: [SubModuleComponent, SubModulePipe, SubModuleDirective]})
-      class SubModule {
-      }
+      class SubModule {}
 
       class MainComponent {}
 
       const ans = depsTracker.getStandaloneComponentScope(MainComponent as ComponentType<any>, [
-        forwardRef(() => Component1), forwardRef(() => Directive1), forwardRef(() => Pipe1),
-        forwardRef(() => SubModule)
+        forwardRef(() => Component1),
+        forwardRef(() => Directive1),
+        forwardRef(() => Pipe1),
+        forwardRef(() => SubModule),
       ]);
 
       expect(ans.compilation).toEqual({
         pipes: new Set([Pipe1, SubModulePipe]),
-        directives: new Set(
-            [MainComponent, Component1, Directive1, SubModuleComponent, SubModuleDirective]),
+        directives: new Set([
+          MainComponent,
+          Component1,
+          Directive1,
+          SubModuleComponent,
+          SubModuleDirective,
+        ]),
         ngModules: new Set([SubModule]),
       });
     });
 
-    it('should resolve the imported forward refs and include them in the compilation scope - case of nested array imports',
-       () => {
-         @Component({standalone: true})
-         class Component1 {
-         }
+    it('should resolve the imported forward refs and include them in the compilation scope - case of nested array imports', () => {
+      @Component({standalone: true})
+      class Component1 {}
 
-         @Directive({standalone: true})
-         class Directive1 {
-         }
+      @Directive({standalone: true})
+      class Directive1 {}
 
-         @Pipe({name: 'pipe1', standalone: true})
-         class Pipe1 {
-         }
+      @Pipe({name: 'pipe1', standalone: true})
+      class Pipe1 {}
 
-         @Component({})
-         class SubModuleComponent {
-         }
+      @Component({})
+      class SubModuleComponent {}
 
-         @Directive({})
-         class SubModuleDirective {
-         }
+      @Directive({})
+      class SubModuleDirective {}
 
-         @Pipe({name: 'submodule pipe'})
-         class SubModulePipe {
-         }
+      @Pipe({name: 'submodule pipe'})
+      class SubModulePipe {}
 
-         @NgModule({exports: [SubModuleComponent, SubModulePipe, SubModuleDirective]})
-         class SubModule {
-         }
+      @NgModule({exports: [SubModuleComponent, SubModulePipe, SubModuleDirective]})
+      class SubModule {}
 
-         class MainComponent {}
+      class MainComponent {}
 
-         const ans = depsTracker.getStandaloneComponentScope(MainComponent as ComponentType<any>, [
-           [forwardRef(() => Component1)], [forwardRef(() => Directive1)],
-           [forwardRef(() => Pipe1)], [forwardRef(() => SubModule)]
-         ]);
+      const ans = depsTracker.getStandaloneComponentScope(MainComponent as ComponentType<any>, [
+        [forwardRef(() => Component1)],
+        [forwardRef(() => Directive1)],
+        [forwardRef(() => Pipe1)],
+        [forwardRef(() => SubModule)],
+      ]);
 
-         expect(ans.compilation).toEqual({
-           pipes: new Set([Pipe1, SubModulePipe]),
-           directives: new Set(
-               [MainComponent, Component1, Directive1, SubModuleComponent, SubModuleDirective]),
-           ngModules: new Set([SubModule]),
-         });
-       });
+      expect(ans.compilation).toEqual({
+        pipes: new Set([Pipe1, SubModulePipe]),
+        directives: new Set([
+          MainComponent,
+          Component1,
+          Directive1,
+          SubModuleComponent,
+          SubModuleDirective,
+        ]),
+        ngModules: new Set([SubModule]),
+      });
+    });
 
     it('should cache the computed scopes', () => {
       @Component({standalone: true})
-      class Component1 {
-      }
+      class Component1 {}
 
       @Directive({standalone: true})
-      class Directive1 {
-      }
+      class Directive1 {}
 
       @Pipe({name: 'pipe1', standalone: true})
-      class Pipe1 {
-      }
+      class Pipe1 {}
 
       class MainComponent {}
 
-      let ans = depsTracker.getStandaloneComponentScope(
-          MainComponent as ComponentType<any>, [Component1, Directive1, Pipe1]);
+      let ans = depsTracker.getStandaloneComponentScope(MainComponent as ComponentType<any>, [
+        Component1,
+        Directive1,
+        Pipe1,
+      ]);
 
       expect(ans.compilation).toEqual({
         pipes: new Set([Pipe1]),
@@ -967,23 +867,22 @@ describe('runtime dependency tracker', () => {
 
     it('should clear the cache correctly', () => {
       @Component({standalone: true})
-      class Component1 {
-      }
+      class Component1 {}
 
       @Directive({standalone: true})
-      class Directive1 {
-      }
+      class Directive1 {}
 
       @Pipe({name: 'pipe1', standalone: true})
-      class Pipe1 {
-      }
+      class Pipe1 {}
 
       @Component({})
-      class MainComponent {
-      }
+      class MainComponent {}
 
-      let ans = depsTracker.getStandaloneComponentScope(
-          MainComponent as ComponentType<any>, [Component1, Directive1, Pipe1]);
+      let ans = depsTracker.getStandaloneComponentScope(MainComponent as ComponentType<any>, [
+        Component1,
+        Directive1,
+        Pipe1,
+      ]);
 
       expect(ans.compilation).toEqual({
         pipes: new Set([Pipe1]),
@@ -1006,69 +905,59 @@ describe('runtime dependency tracker', () => {
     describe('for non-standalone component', () => {
       it('should include the compilation scope of the declaring module', () => {
         @Component({})
-        class Component1 {
-        }
+        class Component1 {}
 
         @Directive({})
-        class Directive1 {
-        }
+        class Directive1 {}
 
         @Pipe({name: 'pipe1'})
-        class Pipe1 {
-        }
+        class Pipe1 {}
 
         @Component({})
-        class MainComponent {
-        }
+        class MainComponent {}
 
         @NgModule({
           declarations: [MainComponent, Component1, Directive1, Pipe1],
         })
-        class MainModule {
-        }
+        class MainModule {}
         depsTracker.registerNgModule(MainModule as NgModuleType, {});
 
         const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>);
 
-        expect(ans.dependencies).toEqual(jasmine.arrayWithExactContents([
-          MainComponent, Component1, Directive1, Pipe1
-        ]));
+        expect(ans.dependencies).toEqual(
+          jasmine.arrayWithExactContents([MainComponent, Component1, Directive1, Pipe1]),
+        );
       });
 
-      it('should include the compilation scope of the declaring module when it is forward referenced',
-         () => {
-           @Component({})
-           class Component1 {
-           }
+      it('should include the compilation scope of the declaring module when it is forward referenced', () => {
+        @Component({})
+        class Component1 {}
 
-           @Directive({})
-           class Directive1 {
-           }
+        @Directive({})
+        class Directive1 {}
 
-           @Pipe({name: 'pipe1'})
-           class Pipe1 {
-           }
+        @Pipe({name: 'pipe1'})
+        class Pipe1 {}
 
-           @Component({})
-           class MainComponent {
-           }
+        @Component({})
+        class MainComponent {}
 
-           class MainModule {}
-           (MainModule as NgModuleType).ɵmod = createNgModuleDef(
-               {declarations: () => ([MainComponent, Component1, Directive1, Pipe1])});
-           depsTracker.registerNgModule(MainModule as NgModuleType, {});
+        class MainModule {}
+        (MainModule as NgModuleType).ɵmod = createNgModuleDef({
+          declarations: () => [MainComponent, Component1, Directive1, Pipe1],
+        });
+        depsTracker.registerNgModule(MainModule as NgModuleType, {});
 
-           const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>);
+        const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>);
 
-           expect(ans.dependencies).toEqual(jasmine.arrayWithExactContents([
-             MainComponent, Component1, Directive1, Pipe1
-           ]));
-         });
+        expect(ans.dependencies).toEqual(
+          jasmine.arrayWithExactContents([MainComponent, Component1, Directive1, Pipe1]),
+        );
+      });
 
       it('should return empty dependencies if component has no registered module', () => {
         @Component({})
-        class MainComponent {
-        }
+        class MainComponent {}
         ɵsetClassDebugInfo(MainComponent, {
           className: 'MainComponent',
           filePath: 'main.ts',
@@ -1080,33 +969,30 @@ describe('runtime dependency tracker', () => {
         expect(ans.dependencies).toEqual([]);
       });
 
-      it('should return empty deps if the compilation scope of the declaring module is corrupted',
-         () => {
-           class RandomClass {}
+      it('should return empty deps if the compilation scope of the declaring module is corrupted', () => {
+        class RandomClass {}
 
-           @Component({})
-           class MainComponent {
-           }
+        @Component({})
+        class MainComponent {}
 
-           class MainModule {}
-           (MainModule as NgModuleType).ɵmod = createNgModuleDef({
-             declarations: [MainComponent],
-             // Importing an invalid class makes the compilation scope corrupted.
-             imports: [RandomClass],
-           });
-           depsTracker.registerNgModule(MainModule as NgModuleType, {});
+        class MainModule {}
+        (MainModule as NgModuleType).ɵmod = createNgModuleDef({
+          declarations: [MainComponent],
+          // Importing an invalid class makes the compilation scope corrupted.
+          imports: [RandomClass],
+        });
+        depsTracker.registerNgModule(MainModule as NgModuleType, {});
 
-           const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>);
+        const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>);
 
-           expect(ans.dependencies).toEqual([]);
-         });
+        expect(ans.dependencies).toEqual([]);
+      });
     });
 
     describe('for standalone component', () => {
       it('should always return self (even if component has empty imports)', () => {
         @Component({standalone: true})
-        class MainComponent {
-        }
+        class MainComponent {}
 
         const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>);
 
@@ -1115,45 +1001,40 @@ describe('runtime dependency tracker', () => {
 
       it('should include imported standalone component/directive/pipe', () => {
         @Component({standalone: true})
-        class Component1 {
-        }
+        class Component1 {}
 
         @Directive({standalone: true})
-        class Directive1 {
-        }
+        class Directive1 {}
 
         @Pipe({name: 'pipe1', standalone: true})
-        class Pipe1 {
-        }
+        class Pipe1 {}
 
         @Component({standalone: true})
-        class MainComponent {
-        }
+        class MainComponent {}
 
-        const ans = depsTracker.getComponentDependencies(
-            MainComponent as ComponentType<any>, [Component1, Directive1, Pipe1]);
+        const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [
+          Component1,
+          Directive1,
+          Pipe1,
+        ]);
 
-        expect(ans.dependencies).toEqual(jasmine.arrayWithExactContents([
-          MainComponent, Component1, Directive1, Pipe1
-        ]));
+        expect(ans.dependencies).toEqual(
+          jasmine.arrayWithExactContents([MainComponent, Component1, Directive1, Pipe1]),
+        );
       });
 
       it('should include imported forward ref standalone component/directive/pipe', () => {
         @Component({standalone: true})
-        class Component1 {
-        }
+        class Component1 {}
 
         @Directive({standalone: true})
-        class Directive1 {
-        }
+        class Directive1 {}
 
         @Pipe({name: 'pipe1', standalone: true})
-        class Pipe1 {
-        }
+        class Pipe1 {}
 
         @Component({standalone: true})
-        class MainComponent {
-        }
+        class MainComponent {}
 
         const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [
           forwardRef(() => Component1),
@@ -1161,122 +1042,109 @@ describe('runtime dependency tracker', () => {
           forwardRef(() => Pipe1),
         ]);
 
-        expect(ans.dependencies).toEqual(jasmine.arrayWithExactContents([
-          MainComponent, Component1, Directive1, Pipe1
-        ]));
+        expect(ans.dependencies).toEqual(
+          jasmine.arrayWithExactContents([MainComponent, Component1, Directive1, Pipe1]),
+        );
       });
 
       it('should ignore imported non-standalone component/directive/pipe', () => {
         @Component({})
-        class Component1 {
-        }
+        class Component1 {}
 
         @Directive({})
-        class Directive1 {
-        }
+        class Directive1 {}
 
         @Pipe({name: 'pipe1'})
-        class Pipe1 {
-        }
+        class Pipe1 {}
 
         @Component({standalone: true})
-        class MainComponent {
-        }
+        class MainComponent {}
 
-        const ans = depsTracker.getComponentDependencies(
-            MainComponent as ComponentType<any>, [Component1, Directive1, Pipe1]);
+        const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [
+          Component1,
+          Directive1,
+          Pipe1,
+        ]);
 
         expect(ans.dependencies).toEqual([]);
       });
 
       it('should include the imported module and its exported scope', () => {
         @Component({})
-        class Component1 {
-        }
+        class Component1 {}
 
         @Directive({})
-        class Directive1 {
-        }
+        class Directive1 {}
 
         @Pipe({name: 'pipe1'})
-        class Pipe1 {
-        }
+        class Pipe1 {}
 
         @NgModule({
           exports: [Component1, Directive1, Pipe1],
         })
-        class SubModule {
-        }
+        class SubModule {}
 
         @Component({standalone: true})
-        class MainComponent {
-        }
+        class MainComponent {}
 
-        const ans =
-            depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [SubModule]);
-
-        expect(ans.dependencies).toEqual(jasmine.arrayWithExactContents([
-          MainComponent,
-          Component1,
-          Directive1,
-          Pipe1,
+        const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [
           SubModule,
-        ]));
+        ]);
+
+        expect(ans.dependencies).toEqual(
+          jasmine.arrayWithExactContents([MainComponent, Component1, Directive1, Pipe1, SubModule]),
+        );
       });
 
       it('should include the imported forward ref module and its exported scope', () => {
         @Component({})
-        class Component1 {
-        }
+        class Component1 {}
 
         @Directive({})
-        class Directive1 {
-        }
+        class Directive1 {}
 
         @Pipe({name: 'pipe1'})
-        class Pipe1 {
-        }
+        class Pipe1 {}
 
         @NgModule({
           exports: [Component1, Directive1, Pipe1],
         })
-        class SubModule {
-        }
+        class SubModule {}
 
         @Component({standalone: true})
-        class MainComponent {
-        }
+        class MainComponent {}
 
-        const ans = depsTracker.getComponentDependencies(
-            MainComponent as ComponentType<any>, [forwardRef(() => SubModule)]);
+        const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [
+          forwardRef(() => SubModule),
+        ]);
 
-        expect(ans.dependencies).toEqual(jasmine.arrayWithExactContents([
-          MainComponent, Component1, Directive1, Pipe1, SubModule
-        ]));
+        expect(ans.dependencies).toEqual(
+          jasmine.arrayWithExactContents([MainComponent, Component1, Directive1, Pipe1, SubModule]),
+        );
       });
 
       it('should use cache for re-calculation', () => {
         @Component({standalone: true})
-        class Component1 {
-        }
+        class Component1 {}
 
         @Component({standalone: true})
-        class MainComponent {
-        }
+        class MainComponent {}
 
-        let ans =
-            depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [Component1]);
+        let ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [
+          Component1,
+        ]);
 
-        expect(ans.dependencies).toEqual(jasmine.arrayWithExactContents([
-          MainComponent, Component1
-        ]));
+        expect(ans.dependencies).toEqual(
+          jasmine.arrayWithExactContents([MainComponent, Component1]),
+        );
 
-        ans =
-            depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [Component1]);
+        ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [
+          Component1,
+        ]);
 
-        expect(ans.dependencies).toEqual(jasmine.arrayWithExactContents([
-          MainComponent, Component1
-        ]));
+        expect(ans.dependencies).toEqual(
+          jasmine.arrayWithExactContents([MainComponent, Component1]),
+        );
       });
     });
   });
@@ -1284,8 +1152,7 @@ describe('runtime dependency tracker', () => {
   describe('isOrphanComponent method', () => {
     it('should return true for non-standalone component without NgModule', () => {
       @Component({})
-      class MainComponent {
-      }
+      class MainComponent {}
 
       expect(depsTracker.isOrphanComponent(MainComponent as ComponentType<any>)).toBeTrue();
     });
@@ -1294,22 +1161,19 @@ describe('runtime dependency tracker', () => {
       @Component({
         standalone: true,
       })
-      class MainComponent {
-      }
+      class MainComponent {}
 
       expect(depsTracker.isOrphanComponent(MainComponent as ComponentType<any>)).toBeFalse();
     });
 
     it('should return false for non-standalone component with its NgModule', () => {
       @Component({})
-      class MainComponent {
-      }
+      class MainComponent {}
 
       @NgModule({
         declarations: [MainComponent],
       })
-      class MainModule {
-      }
+      class MainModule {}
       depsTracker.registerNgModule(MainModule as NgModuleType, {});
 
       expect(depsTracker.isOrphanComponent(MainComponent as ComponentType<any>)).toBeFalse();
diff --git a/packages/core/test/render3/di_spec.ts b/packages/core/test/render3/di_spec.ts
index de3e8c37ffe1b..46d364b81b30a 100644
--- a/packages/core/test/render3/di_spec.ts
+++ b/packages/core/test/render3/di_spec.ts
@@ -7,11 +7,20 @@
  */
 
 import {Component, Directive, Self} from '@angular/core';
-import {createLView, createTView, getOrCreateTNode} from '@angular/core/src/render3/instructions/shared';
+import {
+  createLView,
+  createTView,
+  getOrCreateTNode,
+} from '@angular/core/src/render3/instructions/shared';
 import {NodeInjectorOffset} from '@angular/core/src/render3/interfaces/injector';
 import {TestBed} from '@angular/core/testing';
 
-import {bloomAdd, bloomHashBitOrFactory as bloomHash, bloomHasToken, getOrCreateNodeInjectorForNode} from '../../src/render3/di';
+import {
+  bloomAdd,
+  bloomHashBitOrFactory as bloomHash,
+  bloomHasToken,
+  getOrCreateNodeInjectorForNode,
+} from '../../src/render3/di';
 import {TNodeType} from '../../src/render3/interfaces/node';
 import {HEADER_OFFSET, LViewFlags, TVIEW, TViewType} from '../../src/render3/interfaces/view';
 import {enterView, leaveView} from '../../src/render3/state';
@@ -21,8 +30,7 @@ describe('di', () => {
     describe('flags', () => {
       it('should check only the current node with @Self even with false positive', () => {
         @Directive({selector: '[notOnSelf]', standalone: true})
-        class DirNotOnSelf {
-        }
+        class DirNotOnSelf {}
 
         @Directive({selector: '[tryInjectFromSelf]', standalone: true})
         class DirTryInjectFromSelf {
@@ -38,13 +46,12 @@ describe('di', () => {
           standalone: true,
           imports: [DirNotOnSelf, DirTryInjectFromSelf],
         })
-        class App {
-        }
+        class App {}
         expect(() => {
           TestBed.createComponent(App).detectChanges();
-        })
-            .toThrowError(
-                'NG0201: No provider for DirNotOnSelf found in NodeInjector. Find more at https://angular.io/errors/NG0201');
+        }).toThrowError(
+          'NG0201: No provider for DirNotOnSelf found in NodeInjector. Find more at https://angular.io/errors/NG0201',
+        );
       });
     });
   });
@@ -140,20 +147,33 @@ describe('di', () => {
   describe('getOrCreateNodeInjector', () => {
     it('should handle initial undefined state', () => {
       const contentView = createLView(
-          null,
-          createTView(TViewType.Component, null, null, 1, 0, null, null, null, null, null, null),
-          {}, LViewFlags.CheckAlways, null, null, {
-            rendererFactory: {} as any,
-            sanitizer: null,
-            inlineEffectRunner: null,
-            afterRenderEventManager: null,
-            changeDetectionScheduler: null,
-          },
-          {} as any, null, null, null);
+        null,
+        createTView(TViewType.Component, null, null, 1, 0, null, null, null, null, null, null),
+        {},
+        LViewFlags.CheckAlways,
+        null,
+        null,
+        {
+          rendererFactory: {} as any,
+          sanitizer: null,
+          inlineEffectRunner: null,
+          afterRenderEventManager: null,
+          changeDetectionScheduler: null,
+        },
+        {} as any,
+        null,
+        null,
+        null,
+      );
       enterView(contentView);
       try {
-        const parentTNode =
-            getOrCreateTNode(contentView[TVIEW], HEADER_OFFSET, TNodeType.Element, null, null);
+        const parentTNode = getOrCreateTNode(
+          contentView[TVIEW],
+          HEADER_OFFSET,
+          TNodeType.Element,
+          null,
+          null,
+        );
         // Simulate the situation where the previous parent is not initialized.
         // This happens on first bootstrap because we don't init existing values
         // so that we have smaller HelloWorld.
diff --git a/packages/core/test/render3/global_utils_spec.ts b/packages/core/test/render3/global_utils_spec.ts
index fc8e9adc4801f..3d3423f9b24ff 100644
--- a/packages/core/test/render3/global_utils_spec.ts
+++ b/packages/core/test/render3/global_utils_spec.ts
@@ -9,8 +9,23 @@
 import {setProfiler} from '@angular/core/src/render3/profiler';
 
 import {applyChanges} from '../../src/render3/util/change_detection_utils';
-import {getComponent, getContext, getDirectiveMetadata, getDirectives, getHostElement, getInjector, getListeners, getOwningComponent, getRootComponents} from '../../src/render3/util/discovery_utils';
-import {GLOBAL_PUBLISH_EXPANDO_KEY, GlobalDevModeUtils, publishDefaultGlobalUtils, publishGlobalUtil} from '../../src/render3/util/global_utils';
+import {
+  getComponent,
+  getContext,
+  getDirectiveMetadata,
+  getDirectives,
+  getHostElement,
+  getInjector,
+  getListeners,
+  getOwningComponent,
+  getRootComponents,
+} from '../../src/render3/util/discovery_utils';
+import {
+  GLOBAL_PUBLISH_EXPANDO_KEY,
+  GlobalDevModeUtils,
+  publishDefaultGlobalUtils,
+  publishGlobalUtil,
+} from '../../src/render3/util/global_utils';
 import {global} from '../../src/util/global';
 
 type GlobalUtilFunctions = keyof GlobalDevModeUtils['ng'];
diff --git a/packages/core/test/render3/i18n/i18n_insert_before_index_spec.ts b/packages/core/test/render3/i18n/i18n_insert_before_index_spec.ts
index 7817f24003fc8..e0f2955f8b376 100644
--- a/packages/core/test/render3/i18n/i18n_insert_before_index_spec.ts
+++ b/packages/core/test/render3/i18n/i18n_insert_before_index_spec.ts
@@ -12,19 +12,18 @@ import {TNode, TNodeType} from '@angular/core/src/render3/interfaces/node';
 import {HEADER_OFFSET} from '@angular/core/src/render3/interfaces/view';
 import {matchTNode} from '../matchers';
 
-
 describe('addTNodeAndUpdateInsertBeforeIndex', () => {
-  function tNode(index: number, type: TNodeType, insertBeforeIndex: number|null = null): TNode {
+  function tNode(index: number, type: TNodeType, insertBeforeIndex: number | null = null): TNode {
     const tNode = createTNode(null!, null, type, index, null, null);
     tNode.insertBeforeIndex = insertBeforeIndex;
     return tNode;
   }
 
-  function tPlaceholderElementNode(index: number, insertBeforeIndex: number|null = null) {
+  function tPlaceholderElementNode(index: number, insertBeforeIndex: number | null = null) {
     return tNode(index, TNodeType.Placeholder, insertBeforeIndex);
   }
 
-  function tI18NTextNode(index: number, insertBeforeIndex: number|null = null) {
+  function tI18NTextNode(index: number, insertBeforeIndex: number | null = null) {
     return tNode(index, TNodeType.Element, insertBeforeIndex);
   }
 
@@ -44,7 +43,9 @@ describe('addTNodeAndUpdateInsertBeforeIndex', () => {
           tPlaceholderElementNode(HEADER_OFFSET + 1),
         ];
         addTNodeAndUpdateInsertBeforeIndex(
-            previousTNodes, tPlaceholderElementNode(HEADER_OFFSET + 2));
+          previousTNodes,
+          tPlaceholderElementNode(HEADER_OFFSET + 2),
+        );
         expect(previousTNodes).toEqual([
           matchTNode({index: HEADER_OFFSET + 0, insertBeforeIndex: null}),
           matchTNode({index: HEADER_OFFSET + 1, insertBeforeIndex: null}),
@@ -60,7 +61,9 @@ describe('addTNodeAndUpdateInsertBeforeIndex', () => {
           tPlaceholderElementNode(HEADER_OFFSET + 2),
         ];
         addTNodeAndUpdateInsertBeforeIndex(
-            previousTNodes, tPlaceholderElementNode(HEADER_OFFSET + 0));
+          previousTNodes,
+          tPlaceholderElementNode(HEADER_OFFSET + 0),
+        );
         expect(previousTNodes).toEqual([
           matchTNode({index: HEADER_OFFSET + 1, insertBeforeIndex: HEADER_OFFSET + 0}),
           matchTNode({index: HEADER_OFFSET + 2, insertBeforeIndex: HEADER_OFFSET + 0}),
@@ -75,7 +78,9 @@ describe('addTNodeAndUpdateInsertBeforeIndex', () => {
           tPlaceholderElementNode(HEADER_OFFSET + 1),
         ];
         addTNodeAndUpdateInsertBeforeIndex(
-            previousTNodes, tPlaceholderElementNode(HEADER_OFFSET + 0));
+          previousTNodes,
+          tPlaceholderElementNode(HEADER_OFFSET + 0),
+        );
         expect(previousTNodes).toEqual([
           matchTNode({index: HEADER_OFFSET + 2, insertBeforeIndex: HEADER_OFFSET + 1}),
           matchTNode({index: HEADER_OFFSET + 3, insertBeforeIndex: HEADER_OFFSET + 1}),
@@ -91,7 +96,9 @@ describe('addTNodeAndUpdateInsertBeforeIndex', () => {
           tPlaceholderElementNode(HEADER_OFFSET + 0),
         ];
         addTNodeAndUpdateInsertBeforeIndex(
-            previousTNodes, tPlaceholderElementNode(HEADER_OFFSET + 3));
+          previousTNodes,
+          tPlaceholderElementNode(HEADER_OFFSET + 3),
+        );
         expect(previousTNodes).toEqual([
           matchTNode({index: HEADER_OFFSET + 5, insertBeforeIndex: HEADER_OFFSET + 0}),
           matchTNode({index: HEADER_OFFSET + 6, insertBeforeIndex: HEADER_OFFSET + 0}),
@@ -168,18 +175,30 @@ describe('addTNodeAndUpdateInsertBeforeIndex', () => {
     it('should rearrange the nodes', () => {
       const previousTNodes: TNode[] = [];
       addTNodeAndUpdateInsertBeforeIndex(
-          previousTNodes, tPlaceholderElementNode(HEADER_OFFSET + 2));
+        previousTNodes,
+        tPlaceholderElementNode(HEADER_OFFSET + 2),
+      );
       addTNodeAndUpdateInsertBeforeIndex(
-          previousTNodes, tPlaceholderElementNode(HEADER_OFFSET + 8));
+        previousTNodes,
+        tPlaceholderElementNode(HEADER_OFFSET + 8),
+      );
       addTNodeAndUpdateInsertBeforeIndex(
-          previousTNodes, tPlaceholderElementNode(HEADER_OFFSET + 4));
+        previousTNodes,
+        tPlaceholderElementNode(HEADER_OFFSET + 4),
+      );
       addTNodeAndUpdateInsertBeforeIndex(
-          previousTNodes, tPlaceholderElementNode(HEADER_OFFSET + 5));
+        previousTNodes,
+        tPlaceholderElementNode(HEADER_OFFSET + 5),
+      );
       addTNodeAndUpdateInsertBeforeIndex(previousTNodes, tI18NTextNode(HEADER_OFFSET + 9));
       addTNodeAndUpdateInsertBeforeIndex(
-          previousTNodes, tPlaceholderElementNode(HEADER_OFFSET + 3));
+        previousTNodes,
+        tPlaceholderElementNode(HEADER_OFFSET + 3),
+      );
       addTNodeAndUpdateInsertBeforeIndex(
-          previousTNodes, tPlaceholderElementNode(HEADER_OFFSET + 7));
+        previousTNodes,
+        tPlaceholderElementNode(HEADER_OFFSET + 7),
+      );
       expect(previousTNodes).toEqual([
         matchTNode({index: HEADER_OFFSET + 2, insertBeforeIndex: HEADER_OFFSET + 9}),
         matchTNode({index: HEADER_OFFSET + 8, insertBeforeIndex: HEADER_OFFSET + 4}),
diff --git a/packages/core/test/render3/i18n/i18n_parse_spec.ts b/packages/core/test/render3/i18n/i18n_parse_spec.ts
index c3631b6f77fd3..825274a5bfe42 100644
--- a/packages/core/test/render3/i18n/i18n_parse_spec.ts
+++ b/packages/core/test/render3/i18n/i18n_parse_spec.ts
@@ -19,18 +19,20 @@ import {ViewFixture} from '../view_fixture';
 
 describe('i18n_parse', () => {
   let fixture: ViewFixture;
-  beforeEach(() => fixture = new ViewFixture({decls: 1, vars: 1}));
+  beforeEach(() => (fixture = new ViewFixture({decls: 1, vars: 1})));
 
   describe('icu', () => {
     it('should parse simple text', () => {
       const tI18n = toT18n('some text');
-      expect(tI18n).toEqual(matchTI18n({
-        create: matchDebug([
-          `lView[${HEADER_OFFSET + 2}] = document.createText("some text");`,
-          `parent.appendChild(lView[${HEADER_OFFSET + 2}]);`,
-        ]),
-        update: [] as unknown as I18nUpdateOpCodes,
-      }));
+      expect(tI18n).toEqual(
+        matchTI18n({
+          create: matchDebug([
+            `lView[${HEADER_OFFSET + 2}] = document.createText("some text");`,
+            `parent.appendChild(lView[${HEADER_OFFSET + 2}]);`,
+          ]),
+          update: [] as unknown as I18nUpdateOpCodes,
+        }),
+      );
 
       fixture.apply(() => applyCreateOpCodes(fixture.lView, tI18n.create, fixture.host, null));
       expect(fixture.host.innerHTML).toEqual('some text');
@@ -55,43 +57,44 @@ describe('i18n_parse', () => {
             A {caseA}
             other {otherCase}
         }|after`);
-      expect(tI18n).toEqual(matchTI18n({
-        create: matchDebug([
-          `lView[${HEADER_OFFSET + 2}] = document.createText("before|");`,
-          `parent.appendChild(lView[${HEADER_OFFSET + 2}]);`,
-          `lView[${HEADER_OFFSET + 3}] = document.createComment("ICU ${HEADER_OFFSET + 0}:0");`,
-          `parent.appendChild(lView[${HEADER_OFFSET + 3}]);`,
-          `lView[${HEADER_OFFSET + 7}] = document.createText("|after");`,
-          `parent.appendChild(lView[${HEADER_OFFSET + 7}]);`,
-        ]),
-        update: matchDebug([
-          `if (mask & 0b1) { icuSwitchCase(${HEADER_OFFSET + 3}, \`\${lView[i-1]}\`); }`,
-        ])
-      }));
-      expect(getTIcu(fixture.tView, HEADER_OFFSET + 3)).toEqual(matchTIcu({
-        type: IcuType.select,
-        anchorIdx: HEADER_OFFSET + 3,
-        currentCaseLViewIndex: HEADER_OFFSET + 4,
-        cases: ['A', 'other'],
-        create: [
-          matchDebug([
-            `lView[${HEADER_OFFSET + 5}] = document.createTextNode("caseA")`,
-            `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 5}])`
+      expect(tI18n).toEqual(
+        matchTI18n({
+          create: matchDebug([
+            `lView[${HEADER_OFFSET + 2}] = document.createText("before|");`,
+            `parent.appendChild(lView[${HEADER_OFFSET + 2}]);`,
+            `lView[${HEADER_OFFSET + 3}] = document.createComment("ICU ${HEADER_OFFSET + 0}:0");`,
+            `parent.appendChild(lView[${HEADER_OFFSET + 3}]);`,
+            `lView[${HEADER_OFFSET + 7}] = document.createText("|after");`,
+            `parent.appendChild(lView[${HEADER_OFFSET + 7}]);`,
+          ]),
+          update: matchDebug([
+            `if (mask & 0b1) { icuSwitchCase(${HEADER_OFFSET + 3}, \`\${lView[i-1]}\`); }`,
           ]),
-          matchDebug([
-            `lView[${HEADER_OFFSET + 6}] = document.createTextNode("otherCase")`,
-            `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 6}])`,
-          ])
-        ],
-        update: [
-          matchDebug([]),
-          matchDebug([]),
-        ],
-        remove: [
-          matchDebug([`remove(lView[${HEADER_OFFSET + 5}])`]),
-          matchDebug([`remove(lView[${HEADER_OFFSET + 6}])`]),
-        ],
-      }));
+        }),
+      );
+      expect(getTIcu(fixture.tView, HEADER_OFFSET + 3)).toEqual(
+        matchTIcu({
+          type: IcuType.select,
+          anchorIdx: HEADER_OFFSET + 3,
+          currentCaseLViewIndex: HEADER_OFFSET + 4,
+          cases: ['A', 'other'],
+          create: [
+            matchDebug([
+              `lView[${HEADER_OFFSET + 5}] = document.createTextNode("caseA")`,
+              `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 5}])`,
+            ]),
+            matchDebug([
+              `lView[${HEADER_OFFSET + 6}] = document.createTextNode("otherCase")`,
+              `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 6}])`,
+            ]),
+          ],
+          update: [matchDebug([]), matchDebug([])],
+          remove: [
+            matchDebug([`remove(lView[${HEADER_OFFSET + 5}])`]),
+            matchDebug([`remove(lView[${HEADER_OFFSET + 6}])`]),
+          ],
+        }),
+      );
 
       fixture.apply(() => {
         applyCreateOpCodes(fixture.lView, tI18n.create, fixture.host, null);
@@ -100,20 +103,23 @@ describe('i18n_parse', () => {
       fixture.apply(() => {
         ɵɵi18nExp('A');
         ɵɵi18nApply(0);
-        expect(fixture.host.innerHTML)
-            .toEqual(`before|caseA<!--ICU ${HEADER_OFFSET + 0}:0-->|after`);
+        expect(fixture.host.innerHTML).toEqual(
+          `before|caseA<!--ICU ${HEADER_OFFSET + 0}:0-->|after`,
+        );
       });
       fixture.apply(() => {
         ɵɵi18nExp('x');
         ɵɵi18nApply(0);
-        expect(fixture.host.innerHTML)
-            .toEqual(`before|otherCase<!--ICU ${HEADER_OFFSET + 0}:0-->|after`);
+        expect(fixture.host.innerHTML).toEqual(
+          `before|otherCase<!--ICU ${HEADER_OFFSET + 0}:0-->|after`,
+        );
       });
       fixture.apply(() => {
         ɵɵi18nExp('A');
         ɵɵi18nApply(0);
-        expect(fixture.host.innerHTML)
-            .toEqual(`before|caseA<!--ICU ${HEADER_OFFSET + 0}:0-->|after`);
+        expect(fixture.host.innerHTML).toEqual(
+          `before|caseA<!--ICU ${HEADER_OFFSET + 0}:0-->|after`,
+        );
       });
     });
 
@@ -130,24 +136,26 @@ describe('i18n_parse', () => {
       fixture.apply(() => {
         ɵɵi18nExp('A');
         ɵɵi18nApply(0);
-        expect(fixture.host.innerHTML)
-            .toEqual(`Hello <b>world<i>!</i></b><!--ICU ${HEADER_OFFSET + 0}:0-->`);
+        expect(fixture.host.innerHTML).toEqual(
+          `Hello <b>world<i>!</i></b><!--ICU ${HEADER_OFFSET + 0}:0-->`,
+        );
       });
       fixture.apply(() => {
         ɵɵi18nExp('x');
         ɵɵi18nApply(0);
-        expect(fixture.host.innerHTML)
-            .toEqual(`<div>nestedOther<!--nested ICU 0--></div><!--ICU ${HEADER_OFFSET + 0}:0-->`);
+        expect(fixture.host.innerHTML).toEqual(
+          `<div>nestedOther<!--nested ICU 0--></div><!--ICU ${HEADER_OFFSET + 0}:0-->`,
+        );
       });
       fixture.apply(() => {
         ɵɵi18nExp('A');
         ɵɵi18nApply(0);
-        expect(fixture.host.innerHTML)
-            .toEqual(`Hello <b>world<i>!</i></b><!--ICU ${HEADER_OFFSET + 0}:0-->`);
+        expect(fixture.host.innerHTML).toEqual(
+          `Hello <b>world<i>!</i></b><!--ICU ${HEADER_OFFSET + 0}:0-->`,
+        );
       });
     });
 
-
     it('should parse nested ICU', () => {
       fixture = new ViewFixture({decls: 1, vars: 3});
       //     TData                  | LView
@@ -173,80 +181,82 @@ describe('i18n_parse', () => {
             A {parentA {�1�, select, 0 {nested0} other {�2�}}!}
             other {parentOther}
         }`);
-      expect(tI18n).toEqual(matchTI18n({
-        create: matchDebug([
-          `lView[${HEADER_OFFSET + 4}] = document.createComment("ICU ${HEADER_OFFSET + 0}:0");`,
-          `parent.appendChild(lView[${HEADER_OFFSET + 4}]);`,
-        ]),
-        update: matchDebug([
-          `if (mask & 0b1) { icuSwitchCase(${HEADER_OFFSET + 4}, \`\${lView[i-1]}\`); }`,
-          `if (mask & 0b10) { icuSwitchCase(${HEADER_OFFSET + 7}, \`\${lView[i-2]}\`); }`,
-          `if (mask & 0b100) { icuUpdateCase(${HEADER_OFFSET + 7}); }`,
-        ]),
-      }));
-      expect(getTIcu(fixture.tView, HEADER_OFFSET + 4)).toEqual(matchTIcu({
-        type: IcuType.select,
-        anchorIdx: HEADER_OFFSET + 4,
-        currentCaseLViewIndex: HEADER_OFFSET + 5,
-        cases: ['A', 'other'],
-        create: [
-          matchDebug([
-            `lView[${HEADER_OFFSET + 6}] = document.createTextNode("parentA ")`,
-            `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 6}])`,
-            `lView[${HEADER_OFFSET + 7}] = document.createComment("nested ICU 0")`,
-            `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 7}])`,
-            `lView[${HEADER_OFFSET + 11}] = document.createTextNode("!")`,
-            `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 11}])`,
+      expect(tI18n).toEqual(
+        matchTI18n({
+          create: matchDebug([
+            `lView[${HEADER_OFFSET + 4}] = document.createComment("ICU ${HEADER_OFFSET + 0}:0");`,
+            `parent.appendChild(lView[${HEADER_OFFSET + 4}]);`,
           ]),
-          matchDebug([
-            `lView[${HEADER_OFFSET + 12}] = document.createTextNode("parentOther")`,
-            `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 12}])`,
-          ])
-        ],
-        update: [
-          matchDebug([]),
-          matchDebug([]),
-        ],
-        remove: [
-          matchDebug([
-            `remove(lView[${HEADER_OFFSET + 6}])`,
-            `removeNestedICU(${HEADER_OFFSET + 7})`,
-            `remove(lView[${HEADER_OFFSET + 7}])`,
-            `remove(lView[${HEADER_OFFSET + 11}])`,
+          update: matchDebug([
+            `if (mask & 0b1) { icuSwitchCase(${HEADER_OFFSET + 4}, \`\${lView[i-1]}\`); }`,
+            `if (mask & 0b10) { icuSwitchCase(${HEADER_OFFSET + 7}, \`\${lView[i-2]}\`); }`,
+            `if (mask & 0b100) { icuUpdateCase(${HEADER_OFFSET + 7}); }`,
           ]),
-          matchDebug([
-            `remove(lView[${HEADER_OFFSET + 12}])`,
-          ])
-        ],
-      }));
+        }),
+      );
+      expect(getTIcu(fixture.tView, HEADER_OFFSET + 4)).toEqual(
+        matchTIcu({
+          type: IcuType.select,
+          anchorIdx: HEADER_OFFSET + 4,
+          currentCaseLViewIndex: HEADER_OFFSET + 5,
+          cases: ['A', 'other'],
+          create: [
+            matchDebug([
+              `lView[${HEADER_OFFSET + 6}] = document.createTextNode("parentA ")`,
+              `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 6}])`,
+              `lView[${HEADER_OFFSET + 7}] = document.createComment("nested ICU 0")`,
+              `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 7}])`,
+              `lView[${HEADER_OFFSET + 11}] = document.createTextNode("!")`,
+              `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 11}])`,
+            ]),
+            matchDebug([
+              `lView[${HEADER_OFFSET + 12}] = document.createTextNode("parentOther")`,
+              `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 12}])`,
+            ]),
+          ],
+          update: [matchDebug([]), matchDebug([])],
+          remove: [
+            matchDebug([
+              `remove(lView[${HEADER_OFFSET + 6}])`,
+              `removeNestedICU(${HEADER_OFFSET + 7})`,
+              `remove(lView[${HEADER_OFFSET + 7}])`,
+              `remove(lView[${HEADER_OFFSET + 11}])`,
+            ]),
+            matchDebug([`remove(lView[${HEADER_OFFSET + 12}])`]),
+          ],
+        }),
+      );
 
-      expect(getTIcu(fixture.tView, HEADER_OFFSET + 7)).toEqual(matchTIcu({
-        type: IcuType.select,
-        anchorIdx: HEADER_OFFSET + 7,
-        currentCaseLViewIndex: HEADER_OFFSET + 8,
-        cases: ['0', 'other'],
-        create: [
-          matchDebug([
-            `lView[${HEADER_OFFSET + 9}] = document.createTextNode("nested0")`,
-            `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 9}])`
-          ]),
-          matchDebug([
-            `lView[${HEADER_OFFSET + 10}] = document.createTextNode("")`,
-            `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 10}])`,
-          ])
-        ],
-        update: [
-          matchDebug([]),
-          matchDebug([
-            `if (mask & 0b100) { (lView[${
-                HEADER_OFFSET + 10}] as Text).textContent = \`\${lView[i-3]}\`; }`,
-          ]),
-        ],
-        remove: [
-          matchDebug([`remove(lView[${HEADER_OFFSET + 9}])`]),
-          matchDebug([`remove(lView[${HEADER_OFFSET + 10}])`]),
-        ],
-      }));
+      expect(getTIcu(fixture.tView, HEADER_OFFSET + 7)).toEqual(
+        matchTIcu({
+          type: IcuType.select,
+          anchorIdx: HEADER_OFFSET + 7,
+          currentCaseLViewIndex: HEADER_OFFSET + 8,
+          cases: ['0', 'other'],
+          create: [
+            matchDebug([
+              `lView[${HEADER_OFFSET + 9}] = document.createTextNode("nested0")`,
+              `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 9}])`,
+            ]),
+            matchDebug([
+              `lView[${HEADER_OFFSET + 10}] = document.createTextNode("")`,
+              `(lView[${HOST}] as Element).appendChild(lView[${HEADER_OFFSET + 10}])`,
+            ]),
+          ],
+          update: [
+            matchDebug([]),
+            matchDebug([
+              `if (mask & 0b100) { (lView[${
+                HEADER_OFFSET + 10
+              }] as Text).textContent = \`\${lView[i-3]}\`; }`,
+            ]),
+          ],
+          remove: [
+            matchDebug([`remove(lView[${HEADER_OFFSET + 9}])`]),
+            matchDebug([`remove(lView[${HEADER_OFFSET + 10}])`]),
+          ],
+        }),
+      );
 
       fixture.apply(() => {
         applyCreateOpCodes(fixture.lView, tI18n.create, fixture.host, null);
@@ -257,16 +267,18 @@ describe('i18n_parse', () => {
         ɵɵi18nExp('0');
         ɵɵi18nExp('value1');
         ɵɵi18nApply(0);
-        expect(fixture.host.innerHTML)
-            .toEqual(`parentA nested0<!--nested ICU 0-->!<!--ICU ${HEADER_OFFSET + 0}:0-->`);
+        expect(fixture.host.innerHTML).toEqual(
+          `parentA nested0<!--nested ICU 0-->!<!--ICU ${HEADER_OFFSET + 0}:0-->`,
+        );
       });
       fixture.apply(() => {
         ɵɵi18nExp('A');
         ɵɵi18nExp('x');
         ɵɵi18nExp('value1');
         ɵɵi18nApply(0);
-        expect(fixture.host.innerHTML)
-            .toEqual(`parentA value1<!--nested ICU 0-->!<!--ICU ${HEADER_OFFSET + 0}:0-->`);
+        expect(fixture.host.innerHTML).toEqual(
+          `parentA value1<!--nested ICU 0-->!<!--ICU ${HEADER_OFFSET + 0}:0-->`,
+        );
       });
       fixture.apply(() => {
         ɵɵi18nExp('x');
@@ -280,8 +292,9 @@ describe('i18n_parse', () => {
         ɵɵi18nExp('A');
         ɵɵi18nExp('value2');
         ɵɵi18nApply(0);
-        expect(fixture.host.innerHTML)
-            .toEqual(`parentA value2<!--nested ICU 0-->!<!--ICU ${HEADER_OFFSET + 0}:0-->`);
+        expect(fixture.host.innerHTML).toEqual(
+          `parentA value2<!--nested ICU 0-->!<!--ICU ${HEADER_OFFSET + 0}:0-->`,
+        );
       });
     });
   });
diff --git a/packages/core/test/render3/i18n/i18n_spec.ts b/packages/core/test/render3/i18n/i18n_spec.ts
index 9c5dcd7591cc7..edf05f0efdc80 100644
--- a/packages/core/test/render3/i18n/i18n_spec.ts
+++ b/packages/core/test/render3/i18n/i18n_spec.ts
@@ -8,19 +8,25 @@
 
 import {ɵɵi18nAttributes, ɵɵi18nPostprocess, ɵɵi18nStart} from '@angular/core';
 import {ɵɵi18n} from '@angular/core/src/core';
-import {getTranslationForTemplate, i18nStartFirstCreatePass} from '@angular/core/src/render3/i18n/i18n_parse';
+import {
+  getTranslationForTemplate,
+  i18nStartFirstCreatePass,
+} from '@angular/core/src/render3/i18n/i18n_parse';
 import {getTIcu} from '@angular/core/src/render3/i18n/i18n_util';
 import {TNodeType} from '@angular/core/src/render3/interfaces/node';
 
 import {ɵɵelementEnd, ɵɵelementStart} from '../../../src/render3/instructions/all';
-import {I18nCreateOpCode, I18nUpdateOpCodes, TI18n, TIcu} from '../../../src/render3/interfaces/i18n';
+import {
+  I18nCreateOpCode,
+  I18nUpdateOpCodes,
+  TI18n,
+  TIcu,
+} from '../../../src/render3/interfaces/i18n';
 import {HEADER_OFFSET, TView} from '../../../src/render3/interfaces/view';
 import {matchTNode} from '../matchers';
 import {matchDebug} from '../utils';
 import {ViewFixture} from '../view_fixture';
 
-
-
 describe('Runtime i18n', () => {
   describe('getTranslationForTemplate', () => {
     it('should crop messages for the selected template', () => {
@@ -40,10 +46,10 @@ describe('Runtime i18n', () => {
       expect(getTranslationForTemplate(message, 2)).toEqual('middle');
 
       // Embedded & sibling sub-templates
-      message =
-          `�0� is rendered as: �*2:1�before�*1:2�middle�/*1:2�after�/*2:1� and also �*4:3�before�*1:4�middle�/*1:4�after�/*4:3�!`;
-      expect(getTranslationForTemplate(message, -1))
-          .toEqual('�0� is rendered as: �*2:1��/*2:1� and also �*4:3��/*4:3�!');
+      message = `�0� is rendered as: �*2:1�before�*1:2�middle�/*1:2�after�/*2:1� and also �*4:3�before�*1:4�middle�/*1:4�after�/*4:3�!`;
+      expect(getTranslationForTemplate(message, -1)).toEqual(
+        '�0� is rendered as: �*2:1��/*2:1� and also �*4:3��/*4:3�!',
+      );
       expect(getTranslationForTemplate(message, 1)).toEqual('before�*1:2��/*1:2�after');
       expect(getTranslationForTemplate(message, 2)).toEqual('middle');
       expect(getTranslationForTemplate(message, 3)).toEqual('before�*1:4��/*1:4�after');
@@ -59,8 +65,11 @@ describe('Runtime i18n', () => {
   let tView: TView;
 
   function getOpCodes(
-      messageOrAtrs: string|string[], createTemplate: () => void, decls: number,
-      index: number): TI18n|I18nUpdateOpCodes {
+    messageOrAtrs: string | string[],
+    createTemplate: () => void,
+    decls: number,
+    index: number,
+  ): TI18n | I18nUpdateOpCodes {
     const fixture = new ViewFixture({decls, consts: [messageOrAtrs]});
     fixture.enterView();
     createTemplate();
@@ -78,11 +87,16 @@ describe('Runtime i18n', () => {
       const message = 'simple text';
       const nbConsts = 1;
       const index = 1;
-      const opCodes = getOpCodes(message, () => {
-                        ɵɵelementStart(0, 'div');
-                        ɵɵi18nStart(index, 0);
-                        ɵɵelementEnd();
-                      }, nbConsts, HEADER_OFFSET + index) as TI18n;
+      const opCodes = getOpCodes(
+        message,
+        () => {
+          ɵɵelementStart(0, 'div');
+          ɵɵi18nStart(index, 0);
+          ɵɵelementEnd();
+        },
+        nbConsts,
+        HEADER_OFFSET + index,
+      ) as TI18n;
 
       expect(opCodes).toEqual({
         create: matchDebug([
@@ -100,11 +114,16 @@ describe('Runtime i18n', () => {
       // 3 consts for the 2 divs and 1 span + 1 const for `i18nStart` = 4 consts
       const nbConsts = 4;
       const index = 1;
-      const opCodes = getOpCodes(message, () => {
-        ɵɵelementStart(0, 'div');
-        ɵɵi18nStart(index, 0);
-        ɵɵelementEnd();
-      }, nbConsts, HEADER_OFFSET + index);
+      const opCodes = getOpCodes(
+        message,
+        () => {
+          ɵɵelementStart(0, 'div');
+          ɵɵi18nStart(index, 0);
+          ɵɵelementEnd();
+        },
+        nbConsts,
+        HEADER_OFFSET + index,
+      );
 
       expect(opCodes).toEqual({
         create: matchDebug([
@@ -124,14 +143,14 @@ describe('Runtime i18n', () => {
             kind: 2,
             index: HEADER_OFFSET + 2,
             children: [{kind: 0, index: HEADER_OFFSET + 5}],
-            type: 0
+            type: 0,
           },
           {kind: 0, index: HEADER_OFFSET + 6},
           {
             kind: 2,
             index: HEADER_OFFSET + 3,
             children: [{kind: 0, index: HEADER_OFFSET + 7}],
-            type: 0
+            type: 0,
           },
           {kind: 0, index: HEADER_OFFSET + 8},
         ],
@@ -142,14 +161,22 @@ describe('Runtime i18n', () => {
       const message = `Hello �0�!`;
       const nbConsts = 2;
       const index = 1;
-      const opCodes = getOpCodes(message, () => {
-        ɵɵelementStart(0, 'div');
-        ɵɵi18nStart(index, 0);
-        ɵɵelementEnd();
-      }, nbConsts, HEADER_OFFSET + index);
-
-      expect((opCodes as any).update.debug).toEqual([`if (mask & 0b1) { (lView[${
-          HEADER_OFFSET + 2}] as Text).textContent = \`Hello \${lView[i-1]}!\`; }`]);
+      const opCodes = getOpCodes(
+        message,
+        () => {
+          ɵɵelementStart(0, 'div');
+          ɵɵi18nStart(index, 0);
+          ɵɵelementEnd();
+        },
+        nbConsts,
+        HEADER_OFFSET + index,
+      );
+
+      expect((opCodes as any).update.debug).toEqual([
+        `if (mask & 0b1) { (lView[${
+          HEADER_OFFSET + 2
+        }] as Text).textContent = \`Hello \${lView[i-1]}!\`; }`,
+      ]);
 
       expect(opCodes).toEqual({
         create: matchDebug([
@@ -158,7 +185,8 @@ describe('Runtime i18n', () => {
         ]),
         update: matchDebug([
           `if (mask & 0b1) { (lView[${
-              HEADER_OFFSET + 2}] as Text).textContent = \`Hello \${lView[i-1]}!\`; }`,
+            HEADER_OFFSET + 2
+          }] as Text).textContent = \`Hello \${lView[i-1]}!\`; }`,
         ]),
         ast: [{kind: 0, index: HEADER_OFFSET + 2}],
       });
@@ -168,11 +196,16 @@ describe('Runtime i18n', () => {
       const message = `Hello �0� and �1�, again �0�!`;
       const nbConsts = 2;
       const index = 1;
-      const opCodes = getOpCodes(message, () => {
-        ɵɵelementStart(0, 'div');
-        ɵɵi18nStart(index, 0);
-        ɵɵelementEnd();
-      }, nbConsts, HEADER_OFFSET + index);
+      const opCodes = getOpCodes(
+        message,
+        () => {
+          ɵɵelementStart(0, 'div');
+          ɵɵi18nStart(index, 0);
+          ɵɵelementEnd();
+        },
+        nbConsts,
+        HEADER_OFFSET + index,
+      );
 
       expect(opCodes).toEqual({
         create: matchDebug([
@@ -181,8 +214,8 @@ describe('Runtime i18n', () => {
         ]),
         update: matchDebug([
           `if (mask & 0b11) { (lView[${
-              HEADER_OFFSET +
-              2}] as Text).textContent = \`Hello \${lView[i-1]} and \${lView[i-2]}, again \${lView[i-1]}!\`; }`,
+            HEADER_OFFSET + 2
+          }] as Text).textContent = \`Hello \${lView[i-1]} and \${lView[i-2]}, again \${lView[i-1]}!\`; }`,
         ]),
         ast: [{kind: 0, index: HEADER_OFFSET + 2}],
       });
@@ -197,18 +230,22 @@ describe('Runtime i18n', () => {
       //   </span>
       //   !
       // </div>
-      const message =
-          `�0� is rendered as: �*2:1��#1:1�before�*2:2��#1:2�middle�/#1:2��/*2:2�after�/#1:1��/*2:1�!`;
+      const message = `�0� is rendered as: �*2:1��#1:1�before�*2:2��#1:2�middle�/#1:2��/*2:2�after�/#1:1��/*2:1�!`;
 
       /**** Root template ****/
       // �0� is rendered as: �*2:1��/*2:1�!
       let nbConsts = 3;
       let index = 1;
-      let opCodes = getOpCodes(message, () => {
-        ɵɵelementStart(0, 'div');
-        ɵɵi18nStart(index, 0);
-        ɵɵelementEnd();
-      }, nbConsts, HEADER_OFFSET + index);
+      let opCodes = getOpCodes(
+        message,
+        () => {
+          ɵɵelementStart(0, 'div');
+          ɵɵi18nStart(index, 0);
+          ɵɵelementEnd();
+        },
+        nbConsts,
+        HEADER_OFFSET + index,
+      );
 
       expect(opCodes).toEqual({
         create: matchDebug([
@@ -219,24 +256,29 @@ describe('Runtime i18n', () => {
         ]),
         update: matchDebug([
           `if (mask & 0b1) { (lView[${
-              HEADER_OFFSET + 3}] as Text).textContent = \`\${lView[i-1]} is rendered as: \`; }`,
+            HEADER_OFFSET + 3
+          }] as Text).textContent = \`\${lView[i-1]} is rendered as: \`; }`,
         ]),
         ast: [
           {kind: 0, index: HEADER_OFFSET + 3},
           {kind: 2, index: HEADER_OFFSET + 2, children: [], type: 1},
-          {kind: 0, index: HEADER_OFFSET + 4}
+          {kind: 0, index: HEADER_OFFSET + 4},
         ],
       });
 
-
       /**** First sub-template ****/
       // �#1:1�before�*2:2�middle�/*2:2�after�/#1:1�
       nbConsts = 3;
       index = 1;
-      opCodes = getOpCodes(message, () => {
-        ɵɵelementStart(0, 'div');
-        ɵɵi18nStart(index, 0, 1);
-      }, nbConsts, index + HEADER_OFFSET);
+      opCodes = getOpCodes(
+        message,
+        () => {
+          ɵɵelementStart(0, 'div');
+          ɵɵi18nStart(index, 0, 1);
+        },
+        nbConsts,
+        index + HEADER_OFFSET,
+      );
 
       expect(opCodes).toEqual({
         create: matchDebug([
@@ -244,39 +286,45 @@ describe('Runtime i18n', () => {
           `lView[${HEADER_OFFSET + 4}] = document.createText("after");`,
         ]),
         update: [] as unknown as I18nUpdateOpCodes,
-        ast: [{
-          kind: 2,
-          index: HEADER_OFFSET + 1,
-          children: [
-            {kind: 0, index: HEADER_OFFSET + 3},
-            {kind: 2, index: HEADER_OFFSET + 2, children: [], type: 1},
-            {kind: 0, index: HEADER_OFFSET + 4}
-          ],
-          type: 0
-        }],
+        ast: [
+          {
+            kind: 2,
+            index: HEADER_OFFSET + 1,
+            children: [
+              {kind: 0, index: HEADER_OFFSET + 3},
+              {kind: 2, index: HEADER_OFFSET + 2, children: [], type: 1},
+              {kind: 0, index: HEADER_OFFSET + 4},
+            ],
+            type: 0,
+          },
+        ],
       });
 
-
       /**** Second sub-template ****/
       // middle
       nbConsts = 2;
       index = 1;
-      opCodes = getOpCodes(message, () => {
-        ɵɵelementStart(0, 'div');
-        ɵɵi18nStart(index, 0, 2);
-      }, nbConsts, index + HEADER_OFFSET);
+      opCodes = getOpCodes(
+        message,
+        () => {
+          ɵɵelementStart(0, 'div');
+          ɵɵi18nStart(index, 0, 2);
+        },
+        nbConsts,
+        index + HEADER_OFFSET,
+      );
 
       expect(opCodes).toEqual({
-        create: matchDebug([
-          `lView[${HEADER_OFFSET + 2}] = document.createText("middle");`,
-        ]),
+        create: matchDebug([`lView[${HEADER_OFFSET + 2}] = document.createText("middle");`]),
         update: [] as unknown as I18nUpdateOpCodes,
-        ast: [{
-          kind: 2,
-          index: HEADER_OFFSET + 1,
-          children: [{kind: 0, index: HEADER_OFFSET + 2}],
-          type: 0
-        }],
+        ast: [
+          {
+            kind: 2,
+            index: HEADER_OFFSET + 1,
+            children: [{kind: 0, index: HEADER_OFFSET + 2}],
+            type: 0,
+          },
+        ],
       });
     });
 
@@ -288,11 +336,16 @@ describe('Runtime i18n', () => {
       }`;
       const nbConsts = 2;
       const index = 1;
-      const opCodes = getOpCodes(message, () => {
-                        ɵɵelementStart(0, 'div');
-                        ɵɵi18nStart(index, 0);
-                        ɵɵelementEnd();
-                      }, nbConsts, HEADER_OFFSET + index) as TI18n;
+      const opCodes = getOpCodes(
+        message,
+        () => {
+          ɵɵelementStart(0, 'div');
+          ɵɵi18nStart(index, 0);
+          ɵɵelementEnd();
+        },
+        nbConsts,
+        HEADER_OFFSET + index,
+      ) as TI18n;
 
       expect(opCodes).toEqual({
         create: matchDebug([
@@ -303,26 +356,40 @@ describe('Runtime i18n', () => {
           `if (mask & 0b1) { icuSwitchCase(${HEADER_OFFSET + 2}, \`\${lView[i-1]}\`); }`,
           `if (mask & 0b1) { icuUpdateCase(${HEADER_OFFSET + 2}); }`,
         ]),
-        ast: [{
-          kind: 3,
-          index: HEADER_OFFSET + 2,
-          cases: [
-            [
-              {kind: 0, index: HEADER_OFFSET + 4},
-              {kind: 1, index: HEADER_OFFSET + 5, children: [{kind: 0, index: HEADER_OFFSET + 6}]},
-              {kind: 0, index: HEADER_OFFSET + 7}
-            ],
-            [
-              {kind: 0, index: HEADER_OFFSET + 8},
-              {kind: 1, index: HEADER_OFFSET + 9, children: [{kind: 0, index: HEADER_OFFSET + 10}]}
+        ast: [
+          {
+            kind: 3,
+            index: HEADER_OFFSET + 2,
+            cases: [
+              [
+                {kind: 0, index: HEADER_OFFSET + 4},
+                {
+                  kind: 1,
+                  index: HEADER_OFFSET + 5,
+                  children: [{kind: 0, index: HEADER_OFFSET + 6}],
+                },
+                {kind: 0, index: HEADER_OFFSET + 7},
+              ],
+              [
+                {kind: 0, index: HEADER_OFFSET + 8},
+                {
+                  kind: 1,
+                  index: HEADER_OFFSET + 9,
+                  children: [{kind: 0, index: HEADER_OFFSET + 10}],
+                },
+              ],
+              [
+                {kind: 0, index: HEADER_OFFSET + 11},
+                {
+                  kind: 1,
+                  index: HEADER_OFFSET + 12,
+                  children: [{kind: 0, index: HEADER_OFFSET + 13}],
+                },
+              ],
             ],
-            [
-              {kind: 0, index: HEADER_OFFSET + 11},
-              {kind: 1, index: HEADER_OFFSET + 12, children: [{kind: 0, index: HEADER_OFFSET + 13}]}
-            ]
-          ],
-          currentCaseLViewIndex: HEADER_OFFSET + 3
-        }],
+            currentCaseLViewIndex: HEADER_OFFSET + 3,
+          },
+        ],
       });
       expect(getTIcu(tView, HEADER_OFFSET + 2)).toEqual(<TIcu>{
         type: 1,
@@ -378,11 +445,13 @@ describe('Runtime i18n', () => {
           matchDebug([]),
           matchDebug([
             `if (mask & 0b1) { (lView[${
-                HEADER_OFFSET + 11}] as Text).textContent = \`\${lView[i-1]} \`; }`,
+              HEADER_OFFSET + 11
+            }] as Text).textContent = \`\${lView[i-1]} \`; }`,
             `if (mask & 0b10) { (lView[${
-                HEADER_OFFSET + 12}] as Element).setAttribute('title', \`\${lView[i-2]}\`); }`,
+              HEADER_OFFSET + 12
+            }] as Element).setAttribute('title', \`\${lView[i-2]}\`); }`,
           ]),
-        ]
+        ],
       });
     });
 
@@ -397,11 +466,16 @@ describe('Runtime i18n', () => {
       }`;
       const nbConsts = 2;
       const index = 1;
-      const opCodes = getOpCodes(message, () => {
-        ɵɵelementStart(0, 'div');
-        ɵɵi18n(index, 0);
-        ɵɵelementEnd();
-      }, nbConsts, HEADER_OFFSET + index);
+      const opCodes = getOpCodes(
+        message,
+        () => {
+          ɵɵelementStart(0, 'div');
+          ɵɵi18n(index, 0);
+          ɵɵelementEnd();
+        },
+        nbConsts,
+        HEADER_OFFSET + index,
+      );
 
       expect(opCodes).toEqual({
         create: matchDebug([
@@ -413,23 +487,30 @@ describe('Runtime i18n', () => {
           `if (mask & 0b10) { icuSwitchCase(${HEADER_OFFSET + 6}, \`\${lView[i-2]}\`); }`,
           `if (mask & 0b1) { icuUpdateCase(${HEADER_OFFSET + 2}); }`,
         ]),
-        ast: [{
-          kind: 3,
-          index: HEADER_OFFSET + 2,
-          cases: [
-            [{kind: 0, index: HEADER_OFFSET + 4}],
-            [
-              {kind: 0, index: HEADER_OFFSET + 5}, {
-                kind: 3,
-                index: HEADER_OFFSET + 6,
-                cases: [[{kind: 0, index: HEADER_OFFSET + 8}], [{kind: 0, index: HEADER_OFFSET + 9}], [{kind: 0, index: HEADER_OFFSET + 10}]],
-                currentCaseLViewIndex: HEADER_OFFSET + 7
-              },
-              {kind: 0, index: HEADER_OFFSET + 11}
-            ]
-          ],
-          currentCaseLViewIndex: HEADER_OFFSET + 3
-        }],
+        ast: [
+          {
+            kind: 3,
+            index: HEADER_OFFSET + 2,
+            cases: [
+              [{kind: 0, index: HEADER_OFFSET + 4}],
+              [
+                {kind: 0, index: HEADER_OFFSET + 5},
+                {
+                  kind: 3,
+                  index: HEADER_OFFSET + 6,
+                  cases: [
+                    [{kind: 0, index: HEADER_OFFSET + 8}],
+                    [{kind: 0, index: HEADER_OFFSET + 9}],
+                    [{kind: 0, index: HEADER_OFFSET + 10}],
+                  ],
+                  currentCaseLViewIndex: HEADER_OFFSET + 7,
+                },
+                {kind: 0, index: HEADER_OFFSET + 11},
+              ],
+            ],
+            currentCaseLViewIndex: HEADER_OFFSET + 3,
+          },
+        ],
       });
       expect(getTIcu(tView, HEADER_OFFSET + 2)).toEqual({
         type: 1,
@@ -454,13 +535,12 @@ describe('Runtime i18n', () => {
           matchDebug([]),
           matchDebug([
             `if (mask & 0b1) { (lView[${
-                HEADER_OFFSET + 5}] as Text).textContent = \`\${lView[i-1]} \`; }`,
+              HEADER_OFFSET + 5
+            }] as Text).textContent = \`\${lView[i-1]} \`; }`,
           ]),
         ],
         remove: [
-          matchDebug([
-            `remove(lView[${HEADER_OFFSET + 4}])`,
-          ]),
+          matchDebug([`remove(lView[${HEADER_OFFSET + 4}])`]),
           matchDebug([
             `remove(lView[${HEADER_OFFSET + 5}])`,
             `removeNestedICU(${HEADER_OFFSET + 6})`,
@@ -488,11 +568,7 @@ describe('Runtime i18n', () => {
             `(lView[${HEADER_OFFSET + 0}] as Element).appendChild(lView[${HEADER_OFFSET + 10}])`,
           ]),
         ],
-        update: [
-          matchDebug([]),
-          matchDebug([]),
-          matchDebug([]),
-        ],
+        update: [matchDebug([]), matchDebug([]), matchDebug([])],
         remove: [
           matchDebug([`remove(lView[${HEADER_OFFSET + 8}])`]),
           matchDebug([`remove(lView[${HEADER_OFFSET + 9}])`]),
@@ -508,16 +584,24 @@ describe('Runtime i18n', () => {
       const attrs = ['title', message];
       const nbConsts = 2;
       const index = 1;
-      const opCodes = getOpCodes(attrs, () => {
-        ɵɵelementStart(0, 'div');
-        ɵɵi18nAttributes(index, 0);
-        ɵɵelementEnd();
-      }, nbConsts, HEADER_OFFSET + index);
-
-      expect(opCodes).toEqual(matchDebug([
-        `if (mask & 0b1) { (lView[${
-            HEADER_OFFSET + 0}] as Element).setAttribute('title', \`Hello \$\{lView[i-1]}!\`); }`,
-      ]));
+      const opCodes = getOpCodes(
+        attrs,
+        () => {
+          ɵɵelementStart(0, 'div');
+          ɵɵi18nAttributes(index, 0);
+          ɵɵelementEnd();
+        },
+        nbConsts,
+        HEADER_OFFSET + index,
+      );
+
+      expect(opCodes).toEqual(
+        matchDebug([
+          `if (mask & 0b1) { (lView[${
+            HEADER_OFFSET + 0
+          }] as Element).setAttribute('title', \`Hello \$\{lView[i-1]}!\`); }`,
+        ]),
+      );
     });
 
     it('for multiple bindings', () => {
@@ -525,17 +609,24 @@ describe('Runtime i18n', () => {
       const attrs = ['title', message];
       const nbConsts = 2;
       const index = 1;
-      const opCodes = getOpCodes(attrs, () => {
-        ɵɵelementStart(0, 'div');
-        ɵɵi18nAttributes(index, 0);
-        ɵɵelementEnd();
-      }, nbConsts, HEADER_OFFSET + index);
-
-      expect(opCodes).toEqual(matchDebug([
-        `if (mask & 0b11) { (lView[${
-            HEADER_OFFSET +
-            0}] as Element).setAttribute('title', \`Hello \$\{lView[i-1]} and \$\{lView[i-2]}, again \$\{lView[i-1]}!\`); }`,
-      ]));
+      const opCodes = getOpCodes(
+        attrs,
+        () => {
+          ɵɵelementStart(0, 'div');
+          ɵɵi18nAttributes(index, 0);
+          ɵɵelementEnd();
+        },
+        nbConsts,
+        HEADER_OFFSET + index,
+      );
+
+      expect(opCodes).toEqual(
+        matchDebug([
+          `if (mask & 0b11) { (lView[${
+            HEADER_OFFSET + 0
+          }] as Element).setAttribute('title', \`Hello \$\{lView[i-1]} and \$\{lView[i-2]}, again \$\{lView[i-1]}!\`); }`,
+        ]),
+      );
     });
 
     it('for multiple attributes', () => {
@@ -544,18 +635,25 @@ describe('Runtime i18n', () => {
       const attrs = ['title', message1, 'aria-label', message2];
       const nbConsts = 4;
       const index = 1;
-      const opCodes = getOpCodes(attrs, () => {
-        ɵɵelementStart(0, 'div');
-        ɵɵi18nAttributes(index, 0);
-        ɵɵelementEnd();
-      }, nbConsts, HEADER_OFFSET + index);
-
-      expect(opCodes).toEqual(matchDebug([
-        `if (mask & 0b11) { (lView[${HEADER_OFFSET + 0}] as Element).` +
-            'setAttribute(\'title\', `Hello ${lView[i-1]} - ${lView[i-2]}!`); }',
-        `if (mask & 0b1100) { (lView[${HEADER_OFFSET + 0}] as Element).` +
-            'setAttribute(\'aria-label\', `Bye ${lView[i-3]} - ${lView[i-4]}!`); }',
-      ]));
+      const opCodes = getOpCodes(
+        attrs,
+        () => {
+          ɵɵelementStart(0, 'div');
+          ɵɵi18nAttributes(index, 0);
+          ɵɵelementEnd();
+        },
+        nbConsts,
+        HEADER_OFFSET + index,
+      );
+
+      expect(opCodes).toEqual(
+        matchDebug([
+          `if (mask & 0b11) { (lView[${HEADER_OFFSET + 0}] as Element).` +
+            "setAttribute('title', `Hello ${lView[i-1]} - ${lView[i-2]}!`); }",
+          `if (mask & 0b1100) { (lView[${HEADER_OFFSET + 0}] as Element).` +
+            "setAttribute('aria-label', `Bye ${lView[i-3]} - ${lView[i-4]}!`); }",
+        ]),
+      );
     });
   });
 
@@ -573,56 +671,62 @@ describe('Runtime i18n', () => {
 
         // multi-value cases
         [
-          `Start: ${str}, ${str} and ${str}, ${str} end.`, {},
-          `Start: ${arr[0]}, ${arr[1]} and ${arr[2]}, ${arr[3]} end.`
+          `Start: ${str}, ${str} and ${str}, ${str} end.`,
+          {},
+          `Start: ${arr[0]}, ${arr[1]} and ${arr[2]}, ${arr[3]} end.`,
         ],
 
         // replace VAR_SELECT
         [
-          'My ICU: {VAR_SELECT, select, =1 {one} other {other}}', {VAR_SELECT: '�1:2�'},
-          'My ICU: {�1:2�, select, =1 {one} other {other}}'
+          'My ICU: {VAR_SELECT, select, =1 {one} other {other}}',
+          {VAR_SELECT: '�1:2�'},
+          'My ICU: {�1:2�, select, =1 {one} other {other}}',
         ],
 
         [
           'My ICU: {\n\n\tVAR_SELECT_1 \n\n, select, =1 {one} other {other}}',
-          {VAR_SELECT_1: '�1:2�'}, 'My ICU: {\n\n\t�1:2� \n\n, select, =1 {one} other {other}}'
+          {VAR_SELECT_1: '�1:2�'},
+          'My ICU: {\n\n\t�1:2� \n\n, select, =1 {one} other {other}}',
         ],
 
         // replace VAR_PLURAL
         [
-          'My ICU: {VAR_PLURAL, plural, one {1} other {other}}', {VAR_PLURAL: '�1:2�'},
-          'My ICU: {�1:2�, plural, one {1} other {other}}'
+          'My ICU: {VAR_PLURAL, plural, one {1} other {other}}',
+          {VAR_PLURAL: '�1:2�'},
+          'My ICU: {�1:2�, plural, one {1} other {other}}',
         ],
 
         [
           'My ICU: {\n\n\tVAR_PLURAL_1 \n\n, select, =1 {one} other {other}}',
-          {VAR_PLURAL_1: '�1:2�'}, 'My ICU: {\n\n\t�1:2� \n\n, select, =1 {one} other {other}}'
+          {VAR_PLURAL_1: '�1:2�'},
+          'My ICU: {\n\n\t�1:2� \n\n, select, =1 {one} other {other}}',
         ],
 
         // do not replace VAR_* anywhere else in a string (only in ICU)
         [
           'My ICU: {VAR_PLURAL, plural, one {1} other {other}} VAR_PLURAL and VAR_SELECT',
           {VAR_PLURAL: '�1:2�'},
-          'My ICU: {�1:2�, plural, one {1} other {other}} VAR_PLURAL and VAR_SELECT'
+          'My ICU: {�1:2�, plural, one {1} other {other}} VAR_PLURAL and VAR_SELECT',
         ],
 
         // replace VAR_*'s in nested ICUs
         [
           'My ICU: {VAR_PLURAL, plural, one {1 - {VAR_SELECT, age, 50 {fifty} other {other}}} other {other}}',
           {VAR_PLURAL: '�1:2�', VAR_SELECT: '�5�'},
-          'My ICU: {�1:2�, plural, one {1 - {�5�, age, 50 {fifty} other {other}}} other {other}}'
+          'My ICU: {�1:2�, plural, one {1 - {�5�, age, 50 {fifty} other {other}}} other {other}}',
         ],
 
         [
           'My ICU: {VAR_PLURAL, plural, one {1 - {VAR_PLURAL_1, age, 50 {fifty} other {other}}} other {other}}',
           {VAR_PLURAL: '�1:2�', VAR_PLURAL_1: '�5�'},
-          'My ICU: {�1:2�, plural, one {1 - {�5�, age, 50 {fifty} other {other}}} other {other}}'
+          'My ICU: {�1:2�, plural, one {1 - {�5�, age, 50 {fifty} other {other}}} other {other}}',
         ],
 
         // ICU replacement
         [
           'My ICU #1: �I18N_EXP_ICU�, My ICU #2: �I18N_EXP_ICU�',
-          {ICU: ['ICU_VALUE_1', 'ICU_VALUE_2']}, 'My ICU #1: ICU_VALUE_1, My ICU #2: ICU_VALUE_2'
+          {ICU: ['ICU_VALUE_1', 'ICU_VALUE_2']},
+          'My ICU #1: ICU_VALUE_1, My ICU #2: ICU_VALUE_2',
         ],
 
         // mixed case
@@ -691,10 +795,11 @@ describe('Runtime i18n', () => {
     });
 
     it('should throw in case we have invalid string', () => {
-      expect(
-          () => ɵɵi18nPostprocess(
-              'My ICU #1: �I18N_EXP_ICU�, My ICU #2: �I18N_EXP_ICU�', {ICU: ['ICU_VALUE_1']}))
-          .toThrowError();
+      expect(() =>
+        ɵɵi18nPostprocess('My ICU #1: �I18N_EXP_ICU�, My ICU #2: �I18N_EXP_ICU�', {
+          ICU: ['ICU_VALUE_1'],
+        }),
+      ).toThrowError();
     });
   });
 
@@ -715,8 +820,9 @@ describe('Runtime i18n', () => {
     }
 
     function i18nRangeOffsetOpcode(
-        offset: number,
-        {appendLater, comment}: {appendLater?: boolean, comment?: boolean} = {}): number {
+      offset: number,
+      {appendLater, comment}: {appendLater?: boolean; comment?: boolean} = {},
+    ): number {
       let index = i18nRangeOffset(offset) << I18nCreateOpCode.SHIFT;
       if (!appendLater) {
         index |= I18nCreateOpCode.APPEND_EAGERLY;
@@ -729,78 +835,126 @@ describe('Runtime i18n', () => {
 
     it('should process text node with no siblings and no children', () => {
       i18nStartFirstCreatePass(
-          fixture.tView, 0, fixture.lView, HEADER_OFFSET + 1, 'Hello World!', -1);
+        fixture.tView,
+        0,
+        fixture.lView,
+        HEADER_OFFSET + 1,
+        'Hello World!',
+        -1,
+      );
       const ti18n = fixture.tView.data[HEADER_OFFSET + 1] as TI18n;
       // Expect that we only create the `Hello World!` text node and nothing else.
       expect(ti18n.create).toEqual([
-        i18nRangeOffsetOpcode(0), 'Hello World!',  //
+        i18nRangeOffsetOpcode(0),
+        'Hello World!', //
       ]);
     });
 
     it('should process text with a child node', () => {
       i18nStartFirstCreatePass(
-          fixture.tView, 0, fixture.lView, HEADER_OFFSET + 1, 'Hello �#2��/#2�!', -1);
+        fixture.tView,
+        0,
+        fixture.lView,
+        HEADER_OFFSET + 1,
+        'Hello �#2��/#2�!',
+        -1,
+      );
       const ti18n = fixture.tView.data[HEADER_OFFSET + 1] as TI18n;
       expect(ti18n.create).toEqual([
-        i18nRangeOffsetOpcode(0), 'Hello ',  //
-        i18nRangeOffsetOpcode(1), '!',       //
+        i18nRangeOffsetOpcode(0),
+        'Hello ', //
+        i18nRangeOffsetOpcode(1),
+        '!', //
       ]);
       // Leave behind `Placeholder` to be picked up by `TNode` creation.
-      expect(fixture.tView.data[HEADER_OFFSET + 2]).toEqual(matchTNode({
-        type: TNodeType.Placeholder,
-        // It should insert itself in front of "!"
-        insertBeforeIndex: i18nRangeOffset(1),
-      }));
+      expect(fixture.tView.data[HEADER_OFFSET + 2]).toEqual(
+        matchTNode({
+          type: TNodeType.Placeholder,
+          // It should insert itself in front of "!"
+          insertBeforeIndex: i18nRangeOffset(1),
+        }),
+      );
     });
 
     it('should process text with a child node that has text', () => {
       i18nStartFirstCreatePass(
-          fixture.tView, 0, fixture.lView, HEADER_OFFSET + 1, 'Hello �#2�World�/#2�!', -1);
+        fixture.tView,
+        0,
+        fixture.lView,
+        HEADER_OFFSET + 1,
+        'Hello �#2�World�/#2�!',
+        -1,
+      );
       const ti18n = fixture.tView.data[HEADER_OFFSET + 1] as TI18n;
       expect(ti18n.create).toEqual([
-        i18nRangeOffsetOpcode(0), 'Hello ',                      //
-        i18nRangeOffsetOpcode(1, {appendLater: true}), 'World',  //
-        i18nRangeOffsetOpcode(2), '!',                           //
+        i18nRangeOffsetOpcode(0),
+        'Hello ', //
+        i18nRangeOffsetOpcode(1, {appendLater: true}),
+        'World', //
+        i18nRangeOffsetOpcode(2),
+        '!', //
       ]);
       // Leave behind `Placeholder` to be picked up by `TNode` creation.
-      expect(fixture.tView.data[HEADER_OFFSET + 2]).toEqual(matchTNode({
-        type: TNodeType.Placeholder,
-        insertBeforeIndex: [
-          i18nRangeOffset(2),  // It should insert itself in front of "!"
-          i18nRangeOffset(1),  // It should append "World"
-        ]
-      }));
+      expect(fixture.tView.data[HEADER_OFFSET + 2]).toEqual(
+        matchTNode({
+          type: TNodeType.Placeholder,
+          insertBeforeIndex: [
+            i18nRangeOffset(2), // It should insert itself in front of "!"
+            i18nRangeOffset(1), // It should append "World"
+          ],
+        }),
+      );
     });
 
     it('should process text with a child node that has text and with bindings', () => {
       i18nStartFirstCreatePass(
-          fixture.tView, 0, fixture.lView, HEADER_OFFSET + 1,
-          '�0� �#2��1��/#2�!' /* {{salutation}} <b>{{name}}</b>! */, -1);
+        fixture.tView,
+        0,
+        fixture.lView,
+        HEADER_OFFSET + 1,
+        '�0� �#2��1��/#2�!' /* {{salutation}} <b>{{name}}</b>! */,
+        -1,
+      );
       const ti18n = fixture.tView.data[HEADER_OFFSET + 1] as TI18n;
       expect(ti18n.create).toEqual([
-        i18nRangeOffsetOpcode(0), '',                       // 1 is saved for binding
-        i18nRangeOffsetOpcode(1, {appendLater: true}), '',  // 3 is saved for binding
-        i18nRangeOffsetOpcode(2), '!',                      //
+        i18nRangeOffsetOpcode(0),
+        '', // 1 is saved for binding
+        i18nRangeOffsetOpcode(1, {appendLater: true}),
+        '', // 3 is saved for binding
+        i18nRangeOffsetOpcode(2),
+        '!', //
       ]);
       // Leave behind `insertBeforeIndex` to be picked up by `TNode` creation.
-      expect(fixture.tView.data[HEADER_OFFSET + 2]).toEqual(matchTNode({
-        type: TNodeType.Placeholder,
-        insertBeforeIndex: [
-          i18nRangeOffset(2),  // It should insert itself in front of "!"
-          i18nRangeOffset(1),  // It should append child text node "{{name}}"
-        ],
-      }));
-      expect(ti18n.update).toEqual(matchDebug([
-        `if (mask & 0b1) { (lView[${
-            HEADER_OFFSET + 30}] as Text).textContent = \`\${lView[i-1]} \`; }`,
-        `if (mask & 0b10) { (lView[${
-            HEADER_OFFSET + 31}] as Text).textContent = \`\${lView[i-2]}\`; }`
-      ]));
+      expect(fixture.tView.data[HEADER_OFFSET + 2]).toEqual(
+        matchTNode({
+          type: TNodeType.Placeholder,
+          insertBeforeIndex: [
+            i18nRangeOffset(2), // It should insert itself in front of "!"
+            i18nRangeOffset(1), // It should append child text node "{{name}}"
+          ],
+        }),
+      );
+      expect(ti18n.update).toEqual(
+        matchDebug([
+          `if (mask & 0b1) { (lView[${
+            HEADER_OFFSET + 30
+          }] as Text).textContent = \`\${lView[i-1]} \`; }`,
+          `if (mask & 0b10) { (lView[${
+            HEADER_OFFSET + 31
+          }] as Text).textContent = \`\${lView[i-2]}\`; }`,
+        ]),
+      );
     });
 
     it('should process text with a child template', () => {
       i18nStartFirstCreatePass(
-          fixture.tView, 0, fixture.lView, HEADER_OFFSET + 1, 'Hello �*2:1�World�/*2:1�!', -1);
+        fixture.tView,
+        0,
+        fixture.lView,
+        HEADER_OFFSET + 1,
+        'Hello �*2:1�World�/*2:1�!',
+        -1,
+      );
       const ti18n = fixture.tView.data[HEADER_OFFSET + 1] as TI18n;
       expect(ti18n.create.debug).toEqual([
         `lView[${HEADER_OFFSET + 30}] = document.createText("Hello ");`,
@@ -810,10 +964,12 @@ describe('Runtime i18n', () => {
       ]);
       // Leave behind `Placeholder` to be picked up by `TNode` creation.
       // It should insert itself in front of "!"
-      expect(fixture.tView.data[HEADER_OFFSET + 2]).toEqual(matchTNode({
-        type: TNodeType.Placeholder,
-        insertBeforeIndex: HEADER_OFFSET + 31,
-      }));
+      expect(fixture.tView.data[HEADER_OFFSET + 2]).toEqual(
+        matchTNode({
+          type: TNodeType.Placeholder,
+          insertBeforeIndex: HEADER_OFFSET + 31,
+        }),
+      );
     });
   });
 });
diff --git a/packages/core/test/render3/i18n_debug_spec.ts b/packages/core/test/render3/i18n_debug_spec.ts
index 5ddcf7151fdc8..51deaf4efa33e 100644
--- a/packages/core/test/render3/i18n_debug_spec.ts
+++ b/packages/core/test/render3/i18n_debug_spec.ts
@@ -6,8 +6,22 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {i18nCreateOpCodesToString, i18nRemoveOpCodesToString, i18nUpdateOpCodesToString, icuCreateOpCodesToString} from '@angular/core/src/render3/i18n/i18n_debug';
-import {ELEMENT_MARKER, I18nCreateOpCode, I18nCreateOpCodes, I18nRemoveOpCodes, I18nUpdateOpCode, I18nUpdateOpCodes, ICU_MARKER, IcuCreateOpCode} from '@angular/core/src/render3/interfaces/i18n';
+import {
+  i18nCreateOpCodesToString,
+  i18nRemoveOpCodesToString,
+  i18nUpdateOpCodesToString,
+  icuCreateOpCodesToString,
+} from '@angular/core/src/render3/i18n/i18n_debug';
+import {
+  ELEMENT_MARKER,
+  I18nCreateOpCode,
+  I18nCreateOpCodes,
+  I18nRemoveOpCodes,
+  I18nUpdateOpCode,
+  I18nUpdateOpCodes,
+  ICU_MARKER,
+  IcuCreateOpCode,
+} from '@angular/core/src/render3/interfaces/i18n';
 
 describe('i18n debug', () => {
   describe('i18nUpdateOpCodesToString', () => {
@@ -16,57 +30,76 @@ describe('i18n debug', () => {
     });
 
     it('should print text opCode', () => {
-      expect(i18nUpdateOpCodesToString([
-        0b11,
-        4,
-        'pre ',
-        -4,
-        ' post',
-        1 << I18nUpdateOpCode.SHIFT_REF | I18nUpdateOpCode.Text,
-      ] as unknown as I18nUpdateOpCodes))
-          .toEqual(
-              ['if (mask & 0b11) { (lView[1] as Text).textContent = `pre ${lView[i-4]} post`; }']);
+      expect(
+        i18nUpdateOpCodesToString([
+          0b11,
+          4,
+          'pre ',
+          -4,
+          ' post',
+          (1 << I18nUpdateOpCode.SHIFT_REF) | I18nUpdateOpCode.Text,
+        ] as unknown as I18nUpdateOpCodes),
+      ).toEqual([
+        'if (mask & 0b11) { (lView[1] as Text).textContent = `pre ${lView[i-4]} post`; }',
+      ]);
     });
 
     it('should print Attribute opCode', () => {
       // The `sanitizeFn` is written as actual function, compared to it being an arrow function.
       // This is done to make this test less reluctant to build process changes where e.g. an
       // arrow function might be transformed to a function declaration in ES5.
-      const sanitizeFn = function(v: any) {
+      const sanitizeFn = function (v: any) {
         return v;
       };
 
-      expect(i18nUpdateOpCodesToString([
-        0b01,    8,
-        'pre ',  -4,
-        ' in ',  -3,
-        ' post', 1 << I18nUpdateOpCode.SHIFT_REF | I18nUpdateOpCode.Attr,
-        'title', null,
-        0b10,    8,
-        'pre ',  -4,
-        ' in ',  -3,
-        ' post', 1 << I18nUpdateOpCode.SHIFT_REF | I18nUpdateOpCode.Attr,
-        'title', sanitizeFn,
-      ] as unknown as I18nUpdateOpCodes))
-          .toEqual([
-            'if (mask & 0b1) { (lView[1] as Element).setAttribute(\'title\', `pre ${lView[i-4]} in ${lView[i-3]} post`); }',
-            `if (mask & 0b10) { (lView[1] as Element).setAttribute('title', (${
-                sanitizeFn.toString()})(\`pre $\{lView[i-4]} in $\{lView[i-3]} post\`)); }`
-          ]);
+      expect(
+        i18nUpdateOpCodesToString([
+          0b01,
+          8,
+          'pre ',
+          -4,
+          ' in ',
+          -3,
+          ' post',
+          (1 << I18nUpdateOpCode.SHIFT_REF) | I18nUpdateOpCode.Attr,
+          'title',
+          null,
+          0b10,
+          8,
+          'pre ',
+          -4,
+          ' in ',
+          -3,
+          ' post',
+          (1 << I18nUpdateOpCode.SHIFT_REF) | I18nUpdateOpCode.Attr,
+          'title',
+          sanitizeFn,
+        ] as unknown as I18nUpdateOpCodes),
+      ).toEqual([
+        "if (mask & 0b1) { (lView[1] as Element).setAttribute('title', `pre ${lView[i-4]} in ${lView[i-3]} post`); }",
+        `if (mask & 0b10) { (lView[1] as Element).setAttribute('title', (${sanitizeFn.toString()})(\`pre $\{lView[i-4]} in $\{lView[i-3]} post\`)); }`,
+      ]);
     });
 
     it('should print icuSwitch opCode', () => {
-      expect(i18nUpdateOpCodesToString(
-                 [0b100, 2, -5, 12 << I18nUpdateOpCode.SHIFT_REF | I18nUpdateOpCode.IcuSwitch] as
-                 unknown as I18nUpdateOpCodes))
-          .toEqual(['if (mask & 0b100) { icuSwitchCase(12, `${lView[i-5]}`); }']);
+      expect(
+        i18nUpdateOpCodesToString([
+          0b100,
+          2,
+          -5,
+          (12 << I18nUpdateOpCode.SHIFT_REF) | I18nUpdateOpCode.IcuSwitch,
+        ] as unknown as I18nUpdateOpCodes),
+      ).toEqual(['if (mask & 0b100) { icuSwitchCase(12, `${lView[i-5]}`); }']);
     });
 
     it('should print icuUpdate opCode', () => {
-      expect(i18nUpdateOpCodesToString(
-                 [0b1000, 1, 13 << I18nUpdateOpCode.SHIFT_REF | I18nUpdateOpCode.IcuUpdate] as
-                 unknown as I18nUpdateOpCodes))
-          .toEqual(['if (mask & 0b1000) { icuUpdateCase(13); }']);
+      expect(
+        i18nUpdateOpCodesToString([
+          0b1000,
+          1,
+          (13 << I18nUpdateOpCode.SHIFT_REF) | I18nUpdateOpCode.IcuUpdate,
+        ] as unknown as I18nUpdateOpCodes),
+      ).toEqual(['if (mask & 0b1000) { icuUpdateCase(13); }']);
     });
   });
 
@@ -76,58 +109,71 @@ describe('i18n debug', () => {
     });
 
     it('should print text AppendChild', () => {
-      expect(icuCreateOpCodesToString([
-        'xyz', 0,
-        1 << IcuCreateOpCode.SHIFT_PARENT | 0 << IcuCreateOpCode.SHIFT_REF |
-            IcuCreateOpCode.AppendChild
-      ] as unknown as I18nCreateOpCodes))
-          .toEqual([
-            'lView[0] = document.createTextNode("xyz")',
-            '(lView[1] as Element).appendChild(lView[0])'
-          ]);
+      expect(
+        icuCreateOpCodesToString([
+          'xyz',
+          0,
+          (1 << IcuCreateOpCode.SHIFT_PARENT) |
+            (0 << IcuCreateOpCode.SHIFT_REF) |
+            IcuCreateOpCode.AppendChild,
+        ] as unknown as I18nCreateOpCodes),
+      ).toEqual([
+        'lView[0] = document.createTextNode("xyz")',
+        '(lView[1] as Element).appendChild(lView[0])',
+      ]);
     });
 
-
     it('should print element AppendChild', () => {
-      expect(icuCreateOpCodesToString([
-        ELEMENT_MARKER, 'xyz', 0,
-        1 << IcuCreateOpCode.SHIFT_PARENT | 0 << IcuCreateOpCode.SHIFT_REF |
-            IcuCreateOpCode.AppendChild
-      ] as unknown as I18nCreateOpCodes))
-          .toEqual([
-            'lView[0] = document.createElement("xyz")',
-            '(lView[1] as Element).appendChild(lView[0])'
-          ]);
+      expect(
+        icuCreateOpCodesToString([
+          ELEMENT_MARKER,
+          'xyz',
+          0,
+          (1 << IcuCreateOpCode.SHIFT_PARENT) |
+            (0 << IcuCreateOpCode.SHIFT_REF) |
+            IcuCreateOpCode.AppendChild,
+        ] as unknown as I18nCreateOpCodes),
+      ).toEqual([
+        'lView[0] = document.createElement("xyz")',
+        '(lView[1] as Element).appendChild(lView[0])',
+      ]);
     });
 
     it('should print comment AppendChild', () => {
-      expect(icuCreateOpCodesToString([
-        ICU_MARKER, 'xyz', 0,
-        1 << IcuCreateOpCode.SHIFT_PARENT | 0 << IcuCreateOpCode.SHIFT_REF |
-            IcuCreateOpCode.AppendChild
-      ] as unknown as I18nCreateOpCodes))
-          .toEqual([
-            'lView[0] = document.createComment("xyz")',
-            '(lView[1] as Element).appendChild(lView[0])'
-          ]);
+      expect(
+        icuCreateOpCodesToString([
+          ICU_MARKER,
+          'xyz',
+          0,
+          (1 << IcuCreateOpCode.SHIFT_PARENT) |
+            (0 << IcuCreateOpCode.SHIFT_REF) |
+            IcuCreateOpCode.AppendChild,
+        ] as unknown as I18nCreateOpCodes),
+      ).toEqual([
+        'lView[0] = document.createComment("xyz")',
+        '(lView[1] as Element).appendChild(lView[0])',
+      ]);
     });
 
     it('should print Remove', () => {
       expect(i18nRemoveOpCodesToString([123] as unknown as I18nRemoveOpCodes)).toEqual([
-        'remove(lView[123])'
+        'remove(lView[123])',
       ]);
     });
 
     it('should print Attr', () => {
-      expect(icuCreateOpCodesToString(
-                 [1 << IcuCreateOpCode.SHIFT_REF | IcuCreateOpCode.Attr, 'attr', 'value'] as
-                 unknown as I18nCreateOpCodes))
-          .toEqual(['(lView[1] as Element).setAttribute("attr", "value")']);
+      expect(
+        icuCreateOpCodesToString([
+          (1 << IcuCreateOpCode.SHIFT_REF) | IcuCreateOpCode.Attr,
+          'attr',
+          'value',
+        ] as unknown as I18nCreateOpCodes),
+      ).toEqual(['(lView[1] as Element).setAttribute("attr", "value")']);
     });
 
     it('should print RemoveNestedIcu', () => {
       expect(i18nRemoveOpCodesToString([~123] as unknown as I18nRemoveOpCodes)).toEqual([
-        'removeNestedICU(123)'
+        'removeNestedICU(123)',
       ]);
     });
   });
@@ -138,21 +184,27 @@ describe('i18n debug', () => {
     });
 
     it('should print text/comment creation', () => {
-      expect(i18nCreateOpCodesToString([
-        10 << I18nCreateOpCode.SHIFT, 'text at 10',                                            //
-        11 << I18nCreateOpCode.SHIFT | I18nCreateOpCode.APPEND_EAGERLY, 'text at 11, append',  //
-        12 << I18nCreateOpCode.SHIFT | I18nCreateOpCode.COMMENT, 'comment at 12',              //
-        13 << I18nCreateOpCode.SHIFT | I18nCreateOpCode.COMMENT | I18nCreateOpCode.APPEND_EAGERLY,
-        'comment at 13, append',  //
-      ] as unknown as I18nCreateOpCodes))
-          .toEqual([
-            'lView[10] = document.createText("text at 10");',
-            'lView[11] = document.createText("text at 11, append");',
-            'parent.appendChild(lView[11]);',
-            'lView[12] = document.createComment("comment at 12");',
-            'lView[13] = document.createComment("comment at 13, append");',
-            'parent.appendChild(lView[13]);',
-          ]);
+      expect(
+        i18nCreateOpCodesToString([
+          10 << I18nCreateOpCode.SHIFT,
+          'text at 10', //
+          (11 << I18nCreateOpCode.SHIFT) | I18nCreateOpCode.APPEND_EAGERLY,
+          'text at 11, append', //
+          (12 << I18nCreateOpCode.SHIFT) | I18nCreateOpCode.COMMENT,
+          'comment at 12', //
+          (13 << I18nCreateOpCode.SHIFT) |
+            I18nCreateOpCode.COMMENT |
+            I18nCreateOpCode.APPEND_EAGERLY,
+          'comment at 13, append', //
+        ] as unknown as I18nCreateOpCodes),
+      ).toEqual([
+        'lView[10] = document.createText("text at 10");',
+        'lView[11] = document.createText("text at 11, append");',
+        'parent.appendChild(lView[11]);',
+        'lView[12] = document.createComment("comment at 12");',
+        'lView[13] = document.createComment("comment at 13, append");',
+        'parent.appendChild(lView[13]);',
+      ]);
     });
   });
 });
diff --git a/packages/core/test/render3/imported_renderer2.ts b/packages/core/test/render3/imported_renderer2.ts
index 4ab8d20f12beb..481a942451216 100644
--- a/packages/core/test/render3/imported_renderer2.ts
+++ b/packages/core/test/render3/imported_renderer2.ts
@@ -37,10 +37,16 @@ export function getRendererFactory2(document: any): RendererFactory2 {
   const eventManager = new EventManager([new SimpleDomEventsPlugin(document)], fakeNgZone);
   const appId = 'appid';
   const rendererFactory = new ɵDomRendererFactory2(
-      eventManager, new ɵSharedStylesHost(document, appId), appId, true, document,
-      isNode ? PLATFORM_SERVER_ID : PLATFORM_BROWSER_ID, fakeNgZone);
+    eventManager,
+    new ɵSharedStylesHost(document, appId),
+    appId,
+    true,
+    document,
+    isNode ? PLATFORM_SERVER_ID : PLATFORM_BROWSER_ID,
+    fakeNgZone,
+  );
   const origCreateRenderer = rendererFactory.createRenderer;
-  rendererFactory.createRenderer = function(element: any, type: RendererType2|null) {
+  rendererFactory.createRenderer = function (element: any, type: RendererType2 | null) {
     const renderer = origCreateRenderer.call(this, element, type);
     renderer.destroyNode = () => {};
     return renderer;
diff --git a/packages/core/test/render3/instructions/mock_renderer_factory.ts b/packages/core/test/render3/instructions/mock_renderer_factory.ts
index a5239e050f84c..9851887a39dd0 100644
--- a/packages/core/test/render3/instructions/mock_renderer_factory.ts
+++ b/packages/core/test/render3/instructions/mock_renderer_factory.ts
@@ -12,7 +12,7 @@ import {RElement} from '@angular/core/src/render3/interfaces/renderer_dom';
 
 export class MockRendererFactory implements RendererFactory {
   wasCalled = false;
-  createRenderer(hostElement: RElement|null, rendererType: RendererType2|null): Renderer {
+  createRenderer(hostElement: RElement | null, rendererType: RendererType2 | null): Renderer {
     this.wasCalled = true;
     return new MockRenderer();
   }
@@ -21,15 +21,16 @@ export class MockRendererFactory implements RendererFactory {
 class MockRenderer implements Renderer {
   data = {};
 
-  destroyNode: ((node: any) => void)|null = null;
+  destroyNode: ((node: any) => void) | null = null;
 
   destroy(): void {}
   createComment(value: string): Comment {
     return document.createComment(value);
   }
-  createElement(name: string, namespace?: string|null): RElement {
-    return namespace ? document.createElementNS(namespace, name) as unknown as RElement :
-                       document.createElement(name);
+  createElement(name: string, namespace?: string | null): RElement {
+    return namespace
+      ? (document.createElementNS(namespace, name) as unknown as RElement)
+      : document.createElement(name);
   }
   createText(value: string): Text {
     return document.createTextNode(value);
@@ -37,23 +38,24 @@ class MockRenderer implements Renderer {
   appendChild(parent: RElement, newChild: Node): void {
     parent.appendChild(newChild);
   }
-  insertBefore(parent: Node, newChild: Node, refChild: Node|null): void {
+  insertBefore(parent: Node, newChild: Node, refChild: Node | null): void {
     parent.insertBefore(newChild, refChild);
   }
   removeChild(parent: RElement, oldChild: Node): void {
     parent.removeChild(oldChild);
   }
-  selectRootElement(selectorOrNode: string|any): RElement {
-    return typeof selectorOrNode === 'string' ? document.querySelector(selectorOrNode) :
-                                                selectorOrNode;
+  selectRootElement(selectorOrNode: string | any): RElement {
+    return typeof selectorOrNode === 'string'
+      ? document.querySelector(selectorOrNode)
+      : selectorOrNode;
   }
-  parentNode(node: Node): RElement|null {
+  parentNode(node: Node): RElement | null {
     return node.parentNode as RElement | null;
   }
-  nextSibling(node: Node): Node|null {
+  nextSibling(node: Node): Node | null {
     return node.nextSibling;
   }
-  setAttribute(el: RElement, name: string, value: string, namespace?: string|null): void {
+  setAttribute(el: RElement, name: string, value: string, namespace?: string | null): void {
     // set all synthetic attributes as properties
     if (name[0] === '@') {
       this.setProperty(el, name, value);
@@ -61,7 +63,7 @@ class MockRenderer implements Renderer {
       el.setAttribute(name, value);
     }
   }
-  removeAttribute(el: RElement, name: string, namespace?: string|null): void {}
+  removeAttribute(el: RElement, name: string, namespace?: string | null): void {}
   addClass(el: RElement, name: string): void {
     el.classList.add(name);
   }
diff --git a/packages/core/test/render3/instructions/shared_spec.ts b/packages/core/test/render3/instructions/shared_spec.ts
index b6167687ed77d..0a0dbdaa34ff1 100644
--- a/packages/core/test/render3/instructions/shared_spec.ts
+++ b/packages/core/test/render3/instructions/shared_spec.ts
@@ -8,12 +8,22 @@
 
 import {createLView, createTNode, createTView} from '@angular/core/src/render3/instructions/shared';
 import {TNodeType} from '@angular/core/src/render3/interfaces/node';
-import {HEADER_OFFSET, LViewFlags, TVIEW, TViewType} from '@angular/core/src/render3/interfaces/view';
-import {enterView, getBindingRoot, getLView, setBindingIndex, setSelectedIndex} from '@angular/core/src/render3/state';
+import {
+  HEADER_OFFSET,
+  LViewFlags,
+  TVIEW,
+  TViewType,
+} from '@angular/core/src/render3/interfaces/view';
+import {
+  enterView,
+  getBindingRoot,
+  getLView,
+  setBindingIndex,
+  setSelectedIndex,
+} from '@angular/core/src/render3/state';
 
 import {MockRendererFactory} from './mock_renderer_factory';
 
-
 /**
  * Setups a simple `LView` so that it is possible to do unit tests on instructions.
  *
@@ -34,22 +44,43 @@ export function enterViewWithOneDiv() {
   const renderer = rendererFactory.createRenderer(null, null);
   const div = renderer.createElement('div');
   const consts = 1;
-  const vars = 60;  // Space for directive expando,  template, component + 3 directives if we assume
-                    // that each consume 10 slots.
+  const vars = 60; // Space for directive expando,  template, component + 3 directives if we assume
+  // that each consume 10 slots.
   const tView = createTView(
-      TViewType.Component, null, emptyTemplate, consts, vars, null, null, null, null, null, null);
+    TViewType.Component,
+    null,
+    emptyTemplate,
+    consts,
+    vars,
+    null,
+    null,
+    null,
+    null,
+    null,
+    null,
+  );
   // Just assume that the expando starts after 10 initial bindings.
   tView.expandoStartIndex = HEADER_OFFSET + 10;
-  const tNode = tView.firstChild = createTNode(tView, null!, TNodeType.Element, 0, 'div', null);
+  const tNode = (tView.firstChild = createTNode(tView, null!, TNodeType.Element, 0, 'div', null));
   const lView = createLView(
-      null, tView, null, LViewFlags.CheckAlways, null, null, {
-        rendererFactory,
-        sanitizer: null,
-        inlineEffectRunner: null,
-        afterRenderEventManager: null,
-        changeDetectionScheduler: null
-      },
-      renderer, null, null, null);
+    null,
+    tView,
+    null,
+    LViewFlags.CheckAlways,
+    null,
+    null,
+    {
+      rendererFactory,
+      sanitizer: null,
+      inlineEffectRunner: null,
+      afterRenderEventManager: null,
+      changeDetectionScheduler: null,
+    },
+    renderer,
+    null,
+    null,
+    null,
+  );
   lView[HEADER_OFFSET] = div;
   tView.data[HEADER_OFFSET] = tNode;
   enterView(lView);
diff --git a/packages/core/test/render3/instructions/styling_spec.ts b/packages/core/test/render3/instructions/styling_spec.ts
index 0308b69d48156..12f7d6cded81c 100644
--- a/packages/core/test/render3/instructions/styling_spec.ts
+++ b/packages/core/test/render3/instructions/styling_spec.ts
@@ -8,9 +8,27 @@
 
 import {AttributeMarker, DirectiveDef} from '@angular/core/src/render3';
 import {ɵɵdefineDirective} from '@angular/core/src/render3/definition';
-import {classStringParser, styleStringParser, toStylingKeyValueArray, ɵɵclassProp, ɵɵstyleMap, ɵɵstyleProp} from '@angular/core/src/render3/instructions/styling';
+import {
+  classStringParser,
+  styleStringParser,
+  toStylingKeyValueArray,
+  ɵɵclassProp,
+  ɵɵstyleMap,
+  ɵɵstyleProp,
+} from '@angular/core/src/render3/instructions/styling';
 import {TAttributes} from '@angular/core/src/render3/interfaces/node';
-import {getTStylingRangeNext, getTStylingRangeNextDuplicate, getTStylingRangePrev, getTStylingRangePrevDuplicate, setTStylingRangeNext, setTStylingRangePrev, StylingRange, toTStylingRange, TStylingKey, TStylingRange} from '@angular/core/src/render3/interfaces/styling';
+import {
+  getTStylingRangeNext,
+  getTStylingRangeNextDuplicate,
+  getTStylingRangePrev,
+  getTStylingRangePrevDuplicate,
+  setTStylingRangeNext,
+  setTStylingRangePrev,
+  StylingRange,
+  toTStylingRange,
+  TStylingKey,
+  TStylingRange,
+} from '@angular/core/src/render3/interfaces/styling';
 import {HEADER_OFFSET, TVIEW} from '@angular/core/src/render3/interfaces/view';
 import {getLView, leaveView, setBindingRootForHostBindings} from '@angular/core/src/render3/state';
 import {getNativeByIndex} from '@angular/core/src/render3/util/view_utils';
@@ -25,7 +43,7 @@ describe('styling', () => {
   afterEach(leaveView);
 
   let div!: HTMLElement;
-  beforeEach(() => div = getNativeByIndex(HEADER_OFFSET, getLView()) as HTMLElement);
+  beforeEach(() => (div = getNativeByIndex(HEADER_OFFSET, getLView()) as HTMLElement));
 
   it('should do set basic style', () => {
     ɵɵstyleProp('color', 'red');
@@ -63,7 +81,7 @@ describe('styling', () => {
   it('should set style based on priority', () => {
     ngDevModeResetPerfCounters();
     ɵɵstyleProp('color', 'red');
-    ɵɵstyleProp('color', 'blue');  // Higher priority, should win.
+    ɵɵstyleProp('color', 'blue'); // Higher priority, should win.
     expectStyle(div).toEqual({color: 'blue'});
     // The intermediate value has to set since it does not know if it is last one.
     expect(ngDevMode!.rendererSetStyle).toEqual(2);
@@ -71,28 +89,28 @@ describe('styling', () => {
 
     clearFirstUpdatePass();
     rewindBindingIndex();
-    ɵɵstyleProp('color', 'red');    // no change
-    ɵɵstyleProp('color', 'green');  // change to green
+    ɵɵstyleProp('color', 'red'); // no change
+    ɵɵstyleProp('color', 'green'); // change to green
     expectStyle(div).toEqual({color: 'green'});
     expect(ngDevMode!.rendererSetStyle).toEqual(1);
     ngDevModeResetPerfCounters();
 
     rewindBindingIndex();
-    ɵɵstyleProp('color', 'black');               // First binding update
-    expectStyle(div).toEqual({color: 'green'});  // Green still has priority.
+    ɵɵstyleProp('color', 'black'); // First binding update
+    expectStyle(div).toEqual({color: 'green'}); // Green still has priority.
     expect(ngDevMode!.rendererSetStyle).toEqual(0);
     ngDevModeResetPerfCounters();
 
     rewindBindingIndex();
-    ɵɵstyleProp('color', 'black');               // no change
-    ɵɵstyleProp('color', undefined);             // Clear second binding
-    expectStyle(div).toEqual({color: 'black'});  // default to first binding
+    ɵɵstyleProp('color', 'black'); // no change
+    ɵɵstyleProp('color', undefined); // Clear second binding
+    expectStyle(div).toEqual({color: 'black'}); // default to first binding
     expect(ngDevMode!.rendererSetStyle).toEqual(1);
     ngDevModeResetPerfCounters();
 
     rewindBindingIndex();
     ɵɵstyleProp('color', null);
-    expectStyle(div).toEqual({});  // default to first binding
+    expectStyle(div).toEqual({}); // default to first binding
     expect(ngDevMode!.rendererSetStyle).toEqual(0);
     expect(ngDevMode!.rendererRemoveStyle).toEqual(1);
   });
@@ -100,28 +118,28 @@ describe('styling', () => {
   it('should set class based on priority', () => {
     ngDevModeResetPerfCounters();
     ɵɵclassProp('foo', false);
-    ɵɵclassProp('foo', true);  // Higher priority, should win.
+    ɵɵclassProp('foo', true); // Higher priority, should win.
     expectClass(div).toEqual({foo: true});
     expect(ngDevMode!.rendererAddClass).toEqual(1);
     ngDevModeResetPerfCounters();
 
     clearFirstUpdatePass();
     rewindBindingIndex();
-    ɵɵclassProp('foo', false);      // no change
-    ɵɵclassProp('foo', undefined);  // change (have no opinion)
+    ɵɵclassProp('foo', false); // no change
+    ɵɵclassProp('foo', undefined); // change (have no opinion)
     expectClass(div).toEqual({});
     expect(ngDevMode!.rendererAddClass).toEqual(0);
     expect(ngDevMode!.rendererRemoveClass).toEqual(1);
     ngDevModeResetPerfCounters();
 
     rewindBindingIndex();
-    ɵɵclassProp('foo', false);  // no change
+    ɵɵclassProp('foo', false); // no change
     ɵɵclassProp('foo', 'truthy' as any);
     expectClass(div).toEqual({foo: true});
 
     rewindBindingIndex();
-    ɵɵclassProp('foo', true);       // change
-    ɵɵclassProp('foo', undefined);  // change
+    ɵɵclassProp('foo', true); // change
+    ɵɵclassProp('foo', undefined); // change
     expectClass(div).toEqual({foo: true});
   });
 
@@ -252,16 +270,19 @@ describe('styling', () => {
 
         ɵɵstyleProp('content', '"dynamic"');
         expectTStylingKeys('style').toEqual([
-          ['', 'content', 'content', '"TEMPLATE"'], 'prev',  // contains statics
-          null                                               // residual
+          ['', 'content', 'content', '"TEMPLATE"'],
+          'prev', // contains statics
+          null, // residual
         ]);
         expectStyle(div).toEqual({content: '"dynamic"'});
 
         ɵɵstyleProp('content', undefined);
         expectTStylingKeys('style').toEqual([
-          ['', 'content', 'content', '"TEMPLATE"'], 'both',  // contains statics
-          'content', 'prev',  // Making sure that second instruction does not have statics again.
-          null                // residual
+          ['', 'content', 'content', '"TEMPLATE"'],
+          'both', // contains statics
+          'content',
+          'prev', // Making sure that second instruction does not have statics again.
+          null, // residual
         ]);
         expectStyle(div).toEqual({content: '"dynamic"'});
       });
@@ -270,35 +291,41 @@ describe('styling', () => {
     describe('directives only', () => {
       it('should update residual on second directive', () => {
         givenDirectiveAttrs([
-          [AttributeMarker.Styles, 'content', '"lowest"'],  // 0
-          [AttributeMarker.Styles, 'content', '"middle"'],  // 1
+          [AttributeMarker.Styles, 'content', '"lowest"'], // 0
+          [AttributeMarker.Styles, 'content', '"middle"'], // 1
         ]);
         expectStyle(div).toEqual({content: '"middle"'});
 
         activateHostBindings(0);
         ɵɵstyleProp('content', '"dynamic"');
         expectTStylingKeys('style').toEqual([
-          ['', 'content', 'content', '"lowest"'], 'both',  // 1: contains statics
-          ['content', '"middle"'],                         // residual
+          ['', 'content', 'content', '"lowest"'],
+          'both', // 1: contains statics
+          ['content', '"middle"'], // residual
         ]);
         expectStyle(div).toEqual({content: '"middle"'});
 
         // second binding should not get statics
         ɵɵstyleProp('content', '"dynamic2"');
         expectTStylingKeys('style').toEqual([
-          ['', 'content', 'content', '"lowest"'], 'both',  // 1: contains statics
-          'content', 'both',                               // 1: Should not get statics
-          ['content', '"middle"']                          // residual
+          ['', 'content', 'content', '"lowest"'],
+          'both', // 1: contains statics
+          'content',
+          'both', // 1: Should not get statics
+          ['content', '"middle"'], // residual
         ]);
         expectStyle(div).toEqual({content: '"middle"'});
 
         activateHostBindings(1);
         ɵɵstyleProp('content', '"dynamic3"');
         expectTStylingKeys('style').toEqual([
-          ['', 'content', 'content', '"lowest"'], 'both',  // 1: contains statics
-          'content', 'both',                               // 1: Should not get statics
-          ['', 'content', 'content', '"middle"'], 'prev',  // 0: contains statics
-          null                                             // residual
+          ['', 'content', 'content', '"lowest"'],
+          'both', // 1: contains statics
+          'content',
+          'both', // 1: Should not get statics
+          ['', 'content', 'content', '"middle"'],
+          'prev', // 0: contains statics
+          null, // residual
         ]);
         expectStyle(div).toEqual({content: '"dynamic3"'});
       });
@@ -307,8 +334,8 @@ describe('styling', () => {
     describe('template and directives', () => {
       it('should combine property and map', () => {
         givenDirectiveAttrs([
-          [AttributeMarker.Styles, 'content', '"lowest"', 'color', 'blue'],   // 0
-          [AttributeMarker.Styles, 'content', '"middle"', 'width', '100px'],  // 1
+          [AttributeMarker.Styles, 'content', '"lowest"', 'color', 'blue'], // 0
+          [AttributeMarker.Styles, 'content', '"middle"', 'width', '100px'], // 1
         ]);
         givenTemplateAttrs([AttributeMarker.Styles, 'content', '"TEMPLATE"', 'color', 'red']);
 
@@ -316,9 +343,10 @@ describe('styling', () => {
         ɵɵstyleProp('content', undefined);
         expectTStylingKeys('style').toEqual([
           // TEMPLATE
-          ['', 'content', 'color', 'red', 'content', '"TEMPLATE"', 'width', '100px'], 'prev',
+          ['', 'content', 'color', 'red', 'content', '"TEMPLATE"', 'width', '100px'],
+          'prev',
           // RESIDUAL
-          null
+          null,
         ]);
         expectStyle(div).toEqual({content: '"TEMPLATE"', color: 'red', width: '100px'});
 
@@ -327,36 +355,49 @@ describe('styling', () => {
         ɵɵstyleMap('color: red; width: 0px; height: 50px');
         expectTStylingKeys('style').toEqual([
           // Host Binding 0
-          ['', null, 'color', 'blue', 'content', '"lowest"'], 'both',
+          ['', null, 'color', 'blue', 'content', '"lowest"'],
+          'both',
           // TEMPLATE
-          ['', 'content', 'color', 'red', 'content', '"TEMPLATE"', 'width', '100px'], 'prev',
+          ['', 'content', 'color', 'red', 'content', '"TEMPLATE"', 'width', '100px'],
+          'prev',
           // RESIDUAL
-          null
+          null,
         ]);
-        expectStyle(div).toEqual(
-            {content: '"TEMPLATE"', color: 'red', width: '100px', height: '50px'});
+        expectStyle(div).toEqual({
+          content: '"TEMPLATE"',
+          color: 'red',
+          width: '100px',
+          height: '50px',
+        });
 
         // Directive 1
         activateHostBindings(1);
         ɵɵstyleMap('color: red; width: 0px; height: 50px');
         expectTStylingKeys('style').toEqual([
           // Host Binding 0
-          ['', null, 'color', 'blue', 'content', '"lowest"'], 'both',
+          ['', null, 'color', 'blue', 'content', '"lowest"'],
+          'both',
           // Host Binding 1
-          ['', null, 'content', '"middle"', 'width', '100px'], 'both',
+          ['', null, 'content', '"middle"', 'width', '100px'],
+          'both',
           // TEMPLATE
-          ['', 'content', 'color', 'red', 'content', '"TEMPLATE"'], 'prev',
+          ['', 'content', 'color', 'red', 'content', '"TEMPLATE"'],
+          'prev',
           // RESIDUAL
-          null
+          null,
         ]);
-        expectStyle(div).toEqual(
-            {content: '"TEMPLATE"', color: 'red', width: '0px', height: '50px'});
+        expectStyle(div).toEqual({
+          content: '"TEMPLATE"',
+          color: 'red',
+          width: '0px',
+          height: '50px',
+        });
       });
 
       it('should read value from residual', () => {
         givenDirectiveAttrs([
-          [AttributeMarker.Styles, 'content', '"lowest"', 'color', 'blue'],   // 0
-          [AttributeMarker.Styles, 'content', '"middle"', 'width', '100px'],  // 1
+          [AttributeMarker.Styles, 'content', '"lowest"', 'color', 'blue'], // 0
+          [AttributeMarker.Styles, 'content', '"middle"', 'width', '100px'], // 1
         ]);
         givenTemplateAttrs([AttributeMarker.Styles, 'content', '"TEMPLATE"', 'color', 'red']);
 
@@ -365,16 +406,16 @@ describe('styling', () => {
         ɵɵstyleProp('color', 'white');
         expectTStylingKeys('style').toEqual([
           // Host Binding 0 + 1
-          ['', 'color', 'color', 'blue', 'content', '"middle"', 'width', '100px'], 'both',
+          ['', 'color', 'color', 'blue', 'content', '"middle"', 'width', '100px'],
+          'both',
           // RESIDUAL
-          ['color', 'red', 'content', '"TEMPLATE"']
+          ['color', 'red', 'content', '"TEMPLATE"'],
         ]);
         expectStyle(div).toEqual({content: '"TEMPLATE"', color: 'red', width: '100px'});
       });
     });
   });
 
-
   describe('toStylingArray', () => {
     describe('falsy', () => {
       it('should return empty KeyValueArray', () => {
@@ -386,38 +427,51 @@ describe('styling', () => {
       });
       describe('string', () => {
         it('should parse classes', () => {
-          expect(toStylingKeyValueArray(keyValueArraySet, classStringParser, '  '))
-              .toEqual([] as any);
+          expect(toStylingKeyValueArray(keyValueArraySet, classStringParser, '  ')).toEqual(
+            [] as any,
+          );
           expect(toStylingKeyValueArray(keyValueArraySet, classStringParser, ' X A ')).toEqual([
-            'A', true, 'X', true
+            'A',
+            true,
+            'X',
+            true,
           ] as any);
         });
         it('should parse styles', () => {
-          expect(toStylingKeyValueArray(keyValueArraySet, styleStringParser, '  '))
-              .toEqual([] as any);
+          expect(toStylingKeyValueArray(keyValueArraySet, styleStringParser, '  ')).toEqual(
+            [] as any,
+          );
           expect(toStylingKeyValueArray(keyValueArraySet, styleStringParser, 'B:b;A:a')).toEqual([
-            'A', 'a', 'B', 'b'
+            'A',
+            'a',
+            'B',
+            'b',
           ] as any);
         });
       });
       describe('array', () => {
         it('should parse', () => {
           expect(toStylingKeyValueArray(keyValueArraySet, null!, ['X', 'A'])).toEqual([
-            'A', true, 'X', true
+            'A',
+            true,
+            'X',
+            true,
           ] as any);
         });
       });
       describe('object', () => {
         it('should parse', () => {
           expect(toStylingKeyValueArray(keyValueArraySet, null!, {X: 'x', A: 'a'})).toEqual([
-            'A', 'a', 'X', 'x'
+            'A',
+            'a',
+            'X',
+            'x',
           ] as any);
         });
       });
     });
   });
 
-
   describe('TStylingRange', () => {
     const MAX_VALUE = StylingRange.UNSIGNED_MASK;
 
@@ -453,7 +507,6 @@ describe('styling', () => {
   });
 });
 
-
 function expectStyle(element: HTMLElement) {
   return expect(getElementStyles(element));
 }
@@ -491,7 +544,7 @@ function givenDirectiveAttrs(tAttrs: TAttributes[]) {
   }
 }
 
-function applyTAttributes(attrs: TAttributes|null) {
+function applyTAttributes(attrs: TAttributes | null) {
   if (attrs === null) return;
   const div: HTMLElement = getLView()[HEADER_OFFSET];
   let mode: AttributeMarker = AttributeMarker.ImplicitAttributes;
@@ -524,15 +577,15 @@ function getBindingRootIndexFromDirectiveIndex(index: number) {
 }
 
 function getTDataIndexFromDirectiveIndex(index: number) {
-  return HEADER_OFFSET + index + 10;  // offset to give template bindings space.
+  return HEADER_OFFSET + index + 10; // offset to give template bindings space.
 }
 
-function expectTStylingKeys(styling: 'style'|'class') {
+function expectTStylingKeys(styling: 'style' | 'class') {
   const tNode = getTNode();
   const tData = getTData();
   const isClassBased = styling === 'class';
   const headIndex = getTStylingRangePrev(isClassBased ? tNode.classBindings : tNode.styleBindings);
-  const tStylingKeys: (string|(null | string)[]|null)[] = [];
+  const tStylingKeys: (string | (null | string)[] | null)[] = [];
   let index = headIndex;
   let prevIndex = index;
   // rewind to beginning of list.
@@ -546,11 +599,12 @@ function expectTStylingKeys(styling: 'style'|'class') {
     const prevDup = getTStylingRangePrevDuplicate(tData[index + 1] as TStylingRange);
     const nextDup = getTStylingRangeNextDuplicate(tData[index + 1] as TStylingRange);
     tStylingKeys.push(tStylingKey as string[] | string | null);
-    tStylingKeys.push(prevDup ? (nextDup ? 'both' : 'prev') : (nextDup ? 'next' : ''));
+    tStylingKeys.push(prevDup ? (nextDup ? 'both' : 'prev') : nextDup ? 'next' : '');
     index = getTStylingRangeNext(tData[index + 1] as TStylingRange);
   }
   tStylingKeys.push(
-      (isClassBased ? tNode.residualClasses : tNode.residualStyles) as null | string[]);
+    (isClassBased ? tNode.residualClasses : tNode.residualStyles) as null | string[],
+  );
 
   return expect(tStylingKeys);
 }
diff --git a/packages/core/test/render3/instructions_spec.ts b/packages/core/test/render3/instructions_spec.ts
index 5d32ce7e0dd52..a63c18e6dd19f 100644
--- a/packages/core/test/render3/instructions_spec.ts
+++ b/packages/core/test/render3/instructions_spec.ts
@@ -12,10 +12,33 @@ import {ngDevModeResetPerfCounters} from '@angular/core/src/util/ng_dev_mode';
 import {TestBed} from '@angular/core/testing';
 import {getSortedClassName} from '@angular/core/testing/src/styling';
 
-import {ɵɵadvance, ɵɵattribute, ɵɵclassMap, ɵɵelement, ɵɵproperty, ɵɵstyleMap, ɵɵstyleProp} from '../../src/render3/index';
+import {
+  ɵɵadvance,
+  ɵɵattribute,
+  ɵɵclassMap,
+  ɵɵelement,
+  ɵɵproperty,
+  ɵɵstyleMap,
+  ɵɵstyleProp,
+} from '../../src/render3/index';
 import {AttributeMarker} from '../../src/render3/interfaces/attribute_marker';
-import {bypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript, bypassSanitizationTrustStyle, bypassSanitizationTrustUrl, getSanitizationBypassType, SafeValue, unwrapSafeValue} from '../../src/sanitization/bypass';
-import {ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl} from '../../src/sanitization/sanitization';
+import {
+  bypassSanitizationTrustHtml,
+  bypassSanitizationTrustResourceUrl,
+  bypassSanitizationTrustScript,
+  bypassSanitizationTrustStyle,
+  bypassSanitizationTrustUrl,
+  getSanitizationBypassType,
+  SafeValue,
+  unwrapSafeValue,
+} from '../../src/sanitization/bypass';
+import {
+  ɵɵsanitizeHtml,
+  ɵɵsanitizeResourceUrl,
+  ɵɵsanitizeScript,
+  ɵɵsanitizeStyle,
+  ɵɵsanitizeUrl,
+} from '../../src/sanitization/sanitization';
 import {Sanitizer} from '../../src/sanitization/sanitizer';
 import {SecurityContext} from '../../src/sanitization/security';
 
@@ -67,37 +90,44 @@ describe('instructions', () => {
         ɵɵproperty('title', 'World');
       });
       expect(t.html).toEqual('<a title="World"></a>');
-      expect(ngDevMode).toEqual(jasmine.objectContaining({
-        firstCreatePass: 1,
-        tNode: 2,  // 1 for hostElement + 1 for the template under test
-        tView: 2,  // 1 for rootView + 1 for the template view
-        rendererCreateElement: 1,
-        rendererSetProperty: 2
-      }));
+      expect(ngDevMode).toEqual(
+        jasmine.objectContaining({
+          firstCreatePass: 1,
+          tNode: 2, // 1 for hostElement + 1 for the template under test
+          tView: 2, // 1 for rootView + 1 for the template view
+          rendererCreateElement: 1,
+          rendererSetProperty: 2,
+        }),
+      );
     });
 
-    it('should not update bindings when value does not change, with the correct perf counters',
-       () => {
-         ngDevModeResetPerfCounters();
-         const idempotentUpdate = () => {
-           ɵɵproperty('title', 'Hello');
-         };
-         const t =
-             new ViewFixture({create: createAnchor, update: idempotentUpdate, decls: 1, vars: 1});
-
-         t.update();
-         expect(t.html).toEqual('<a title="Hello"></a>');
-
-         t.update();
-         expect(t.html).toEqual('<a title="Hello"></a>');
-         expect(ngDevMode).toEqual(jasmine.objectContaining({
-           firstCreatePass: 1,
-           tNode: 2,  // 1 for hostElement + 1 for the template under test
-           tView: 2,  // 1 for rootView + 1 for the template view
-           rendererCreateElement: 1,
-           rendererSetProperty: 1
-         }));
-       });
+    it('should not update bindings when value does not change, with the correct perf counters', () => {
+      ngDevModeResetPerfCounters();
+      const idempotentUpdate = () => {
+        ɵɵproperty('title', 'Hello');
+      };
+      const t = new ViewFixture({
+        create: createAnchor,
+        update: idempotentUpdate,
+        decls: 1,
+        vars: 1,
+      });
+
+      t.update();
+      expect(t.html).toEqual('<a title="Hello"></a>');
+
+      t.update();
+      expect(t.html).toEqual('<a title="Hello"></a>');
+      expect(ngDevMode).toEqual(
+        jasmine.objectContaining({
+          firstCreatePass: 1,
+          tNode: 2, // 1 for hostElement + 1 for the template under test
+          tView: 2, // 1 for rootView + 1 for the template view
+          rendererCreateElement: 1,
+          rendererSetProperty: 1,
+        }),
+      );
+    });
   });
 
   describe('element', () => {
@@ -109,18 +139,20 @@ describe('instructions', () => {
         },
         decls: 1,
         vars: 0,
-        consts: [['id', 'test', 'title', 'Hello']]
+        consts: [['id', 'test', 'title', 'Hello']],
       });
 
       const div = (t.host as HTMLElement).querySelector('div')!;
       expect(div.id).toEqual('test');
       expect(div.title).toEqual('Hello');
-      expect(ngDevMode).toEqual(jasmine.objectContaining({
-        firstCreatePass: 1,
-        tNode: 2,  // 1 for div, 1 for host element
-        tView: 2,  // 1 for rootView + 1 for the template view
-        rendererCreateElement: 1,
-      }));
+      expect(ngDevMode).toEqual(
+        jasmine.objectContaining({
+          firstCreatePass: 1,
+          tNode: 2, // 1 for div, 1 for host element
+          tView: 2, // 1 for rootView + 1 for the template view
+          rendererCreateElement: 1,
+        }),
+      );
     });
 
     it('should instantiate nodes at high indices', () => {
@@ -174,13 +206,15 @@ describe('instructions', () => {
         ɵɵattribute('title', bypassSanitizationTrustUrl('javascript:true'), ɵɵsanitizeUrl);
       });
       expect(t.html).toEqual('<div title="javascript:true"></div>');
-      expect(ngDevMode).toEqual(jasmine.objectContaining({
-        firstCreatePass: 1,
-        tNode: 2,  // 1 for div, 1 for host element
-        tView: 2,  // 1 for rootView + 1 for the template view
-        rendererCreateElement: 1,
-        rendererSetAttribute: 2
-      }));
+      expect(ngDevMode).toEqual(
+        jasmine.objectContaining({
+          firstCreatePass: 1,
+          tNode: 2, // 1 for div, 1 for host element
+          tView: 2, // 1 for rootView + 1 for the template view
+          rendererCreateElement: 1,
+          rendererSetAttribute: 2,
+        }),
+      );
     });
   });
 
@@ -202,19 +236,21 @@ describe('instructions', () => {
         ɵɵproperty('title', 'two')('accessKey', 'B');
       });
       expect(t.html).toEqual('<div accesskey="B" title="two"></div>');
-      expect(ngDevMode).toEqual(jasmine.objectContaining({
-        firstCreatePass: 1,
-        tNode: 2,  // 1 for div, 1 for host element
-        tView: 2,  // 1 for rootView + 1 for the template view
-        rendererCreateElement: 1,
-        rendererSetProperty: 4,
-      }));
+      expect(ngDevMode).toEqual(
+        jasmine.objectContaining({
+          firstCreatePass: 1,
+          tNode: 2, // 1 for div, 1 for host element
+          tView: 2, // 1 for rootView + 1 for the template view
+          rendererCreateElement: 1,
+          rendererSetProperty: 4,
+        }),
+      );
     });
   });
 
   describe('styleProp', () => {
     it('should allow values even if a bypass operation is applied', () => {
-      let backgroundImage: string|SafeValue = 'url("http://server")';
+      let backgroundImage: string | SafeValue = 'url("http://server")';
       const t = new ViewFixture({
         create: () => {
           return createDiv();
@@ -223,18 +259,20 @@ describe('instructions', () => {
           ɵɵstyleProp('background-image', backgroundImage);
         },
         decls: 2,
-        vars: 2
+        vars: 2,
       });
       t.update();
 
       // nothing is set because sanitizer suppresses it.
-      expect((t.host.firstChild as HTMLElement).style.getPropertyValue('background-image'))
-          .toEqual('url("http://server")');
+      expect((t.host.firstChild as HTMLElement).style.getPropertyValue('background-image')).toEqual(
+        'url("http://server")',
+      );
 
       backgroundImage = bypassSanitizationTrustStyle('url("http://server2")');
       t.update();
-      expect((t.host.firstChild as HTMLElement).style.getPropertyValue('background-image'))
-          .toEqual('url("http://server2")');
+      expect((t.host.firstChild as HTMLElement).style.getPropertyValue('background-image')).toEqual(
+        'url("http://server2")',
+      );
     });
   });
 
@@ -253,7 +291,7 @@ describe('instructions', () => {
         },
         decls: 1,
         vars: 2,
-        consts: attrs
+        consts: attrs,
       });
       fixture.update();
       expect(fixture.html).toEqual('<div style="background-color: red; height: 10px;"></div>');
@@ -272,7 +310,7 @@ describe('instructions', () => {
           ɵɵclassMap('multiple classes');
         },
         decls: 1,
-        vars: 2
+        vars: 2,
       });
       fixture.update();
 
@@ -294,20 +332,27 @@ describe('instructions', () => {
         imports: [CommonModule],
       })
       class NestedLoops {
-        rows = [['a', 'b'], ['A', 'B'], ['a', 'b'], ['A', 'B']];
+        rows = [
+          ['a', 'b'],
+          ['A', 'B'],
+          ['a', 'b'],
+          ['A', 'B'],
+        ];
       }
       ngDevModeResetPerfCounters();
       TestBed.createComponent(NestedLoops);
-      expect(ngDevMode).toEqual(jasmine.objectContaining({
-        // Expect: component view + ngFor(row) + ngFor(col)
-        tView: 3,  // should be: 3
-      }));
+      expect(ngDevMode).toEqual(
+        jasmine.objectContaining({
+          // Expect: component view + ngFor(row) + ngFor(col)
+          tView: 3, // should be: 3
+        }),
+      );
     });
   });
 
   describe('sanitization injection compatibility', () => {
     it('should work for url sanitization', () => {
-      const s = new LocalMockSanitizer(value => `${value}-sanitized`);
+      const s = new LocalMockSanitizer((value) => `${value}-sanitized`);
       const t = new ViewFixture({create: createAnchor, decls: 1, vars: 1, sanitizer: s});
       const inputValue = 'http://foo';
       const outputValue = 'http://foo-sanitized';
@@ -320,7 +365,7 @@ describe('instructions', () => {
     });
 
     it('should bypass url sanitization if marked by the service', () => {
-      const s = new LocalMockSanitizer(value => '');
+      const s = new LocalMockSanitizer((value) => '');
       const t = new ViewFixture({create: createAnchor, decls: 1, vars: 1, sanitizer: s});
       const inputValue = s.bypassSecurityTrustUrl('http://foo');
       const outputValue = 'http://foo';
@@ -333,7 +378,7 @@ describe('instructions', () => {
     });
 
     it('should bypass ivy-level url sanitization if a custom sanitizer is used', () => {
-      const s = new LocalMockSanitizer(value => '');
+      const s = new LocalMockSanitizer((value) => '');
       const t = new ViewFixture({create: createAnchor, decls: 1, vars: 1, sanitizer: s});
       const inputValue = bypassSanitizationTrustUrl('http://foo');
       const outputValue = 'http://foo-ivy';
@@ -346,7 +391,7 @@ describe('instructions', () => {
     });
 
     it('should work for style sanitization', () => {
-      const s = new LocalMockSanitizer(value => `color:blue`);
+      const s = new LocalMockSanitizer((value) => `color:blue`);
       const t = new ViewFixture({create: createDiv, decls: 1, vars: 1, sanitizer: s});
       const inputValue = 'color:red';
       const outputValue = 'color:blue';
@@ -359,7 +404,7 @@ describe('instructions', () => {
     });
 
     it('should bypass style sanitization if marked by the service', () => {
-      const s = new LocalMockSanitizer(value => '');
+      const s = new LocalMockSanitizer((value) => '');
       const t = new ViewFixture({create: createDiv, decls: 1, vars: 1, sanitizer: s});
       const inputValue = s.bypassSecurityTrustStyle('color:maroon');
       const outputValue = 'color:maroon';
@@ -372,7 +417,7 @@ describe('instructions', () => {
     });
 
     it('should bypass ivy-level style sanitization if a custom sanitizer is used', () => {
-      const s = new LocalMockSanitizer(value => '');
+      const s = new LocalMockSanitizer((value) => '');
       const t = new ViewFixture({create: createDiv, decls: 1, vars: 1, sanitizer: s});
       const inputValue = bypassSanitizationTrustStyle('font-family:foo');
       const outputValue = 'font-family:foo-ivy';
@@ -385,7 +430,7 @@ describe('instructions', () => {
     });
 
     it('should work for resourceUrl sanitization', () => {
-      const s = new LocalMockSanitizer(value => `${value}-sanitized`);
+      const s = new LocalMockSanitizer((value) => `${value}-sanitized`);
       const t = new ViewFixture({create: createScript, decls: 1, vars: 1, sanitizer: s});
       const inputValue = 'http://resource';
       const outputValue = 'http://resource-sanitized';
@@ -398,7 +443,7 @@ describe('instructions', () => {
     });
 
     it('should bypass resourceUrl sanitization if marked by the service', () => {
-      const s = new LocalMockSanitizer(value => '');
+      const s = new LocalMockSanitizer((value) => '');
       const t = new ViewFixture({create: createScript, decls: 1, vars: 1, sanitizer: s});
       const inputValue = s.bypassSecurityTrustResourceUrl('file://all-my-secrets.pdf');
       const outputValue = 'file://all-my-secrets.pdf';
@@ -411,7 +456,7 @@ describe('instructions', () => {
     });
 
     it('should bypass ivy-level resourceUrl sanitization if a custom sanitizer is used', () => {
-      const s = new LocalMockSanitizer(value => '');
+      const s = new LocalMockSanitizer((value) => '');
       const t = new ViewFixture({create: createScript, decls: 1, vars: 1, sanitizer: s});
       const inputValue = bypassSanitizationTrustResourceUrl('file://all-my-secrets.pdf');
       const outputValue = 'file://all-my-secrets.pdf-ivy';
@@ -424,7 +469,7 @@ describe('instructions', () => {
     });
 
     it('should work for script sanitization', () => {
-      const s = new LocalMockSanitizer(value => `${value} //sanitized`);
+      const s = new LocalMockSanitizer((value) => `${value} //sanitized`);
       const t = new ViewFixture({create: createScript, decls: 1, vars: 1, sanitizer: s});
       const inputValue = 'fn();';
       const outputValue = 'fn(); //sanitized';
@@ -437,7 +482,7 @@ describe('instructions', () => {
     });
 
     it('should bypass script sanitization if marked by the service', () => {
-      const s = new LocalMockSanitizer(value => '');
+      const s = new LocalMockSanitizer((value) => '');
       const t = new ViewFixture({create: createScript, decls: 1, vars: 1, sanitizer: s});
       const inputValue = s.bypassSecurityTrustScript('alert("bar")');
       const outputValue = 'alert("bar")';
@@ -450,7 +495,7 @@ describe('instructions', () => {
     });
 
     it('should bypass ivy-level script sanitization if a custom sanitizer is used', () => {
-      const s = new LocalMockSanitizer(value => '');
+      const s = new LocalMockSanitizer((value) => '');
       const t = new ViewFixture({create: createScript, decls: 1, vars: 1, sanitizer: s});
       const inputValue = bypassSanitizationTrustScript('alert("bar")');
       const outputValue = 'alert("bar")-ivy';
@@ -463,7 +508,7 @@ describe('instructions', () => {
     });
 
     it('should work for html sanitization', () => {
-      const s = new LocalMockSanitizer(value => `${value} <!--sanitized-->`);
+      const s = new LocalMockSanitizer((value) => `${value} <!--sanitized-->`);
       const t = new ViewFixture({create: createDiv, decls: 1, vars: 1, sanitizer: s});
       const inputValue = '<header></header>';
       const outputValue = '<header></header> <!--sanitized-->';
@@ -476,7 +521,7 @@ describe('instructions', () => {
     });
 
     it('should bypass html sanitization if marked by the service', () => {
-      const s = new LocalMockSanitizer(value => '');
+      const s = new LocalMockSanitizer((value) => '');
       const t = new ViewFixture({create: createDiv, decls: 1, vars: 1, sanitizer: s});
       const inputValue = s.bypassSecurityTrustHtml('<div onclick="alert(123)"></div>');
       const outputValue = '<div onclick="alert(123)"></div>';
@@ -489,7 +534,7 @@ describe('instructions', () => {
     });
 
     it('should bypass ivy-level script sanitization if a custom sanitizer is used', () => {
-      const s = new LocalMockSanitizer(value => '');
+      const s = new LocalMockSanitizer((value) => '');
       const t = new ViewFixture({create: createDiv, decls: 1, vars: 1, sanitizer: s});
       const inputValue = bypassSanitizationTrustHtml('<div onclick="alert(123)"></div>');
       const outputValue = '<div onclick="alert(123)"></div>-ivy';
@@ -513,11 +558,14 @@ class LocalSanitizedValue {
 
 class LocalMockSanitizer implements Sanitizer {
   // using a non-null assertion because it's (re)set by sanitize()
-  public lastSanitizedValue!: string|null;
+  public lastSanitizedValue!: string | null;
 
-  constructor(private _interceptor: (value: string|null|any) => string) {}
+  constructor(private _interceptor: (value: string | null | any) => string) {}
 
-  sanitize(context: SecurityContext, value: LocalSanitizedValue|string|null|any): string|null {
+  sanitize(
+    context: SecurityContext,
+    value: LocalSanitizedValue | string | null | any,
+  ): string | null {
     if (getSanitizationBypassType(value) != null) {
       return unwrapSafeValue(value) + '-ivy';
     }
@@ -526,7 +574,7 @@ class LocalMockSanitizer implements Sanitizer {
       return value.toString();
     }
 
-    return this.lastSanitizedValue = this._interceptor(value);
+    return (this.lastSanitizedValue = this._interceptor(value));
   }
 
   bypassSecurityTrustHtml(value: string) {
@@ -551,13 +599,16 @@ class LocalMockSanitizer implements Sanitizer {
 }
 
 class MockSanitizerInterceptor {
-  public lastValue: string|null = null;
-  constructor(private _interceptorFn?: ((value: any) => any)|null) {}
-  sanitize(context: SecurityContext, value: LocalSanitizedValue|string|null|any): string|null {
+  public lastValue: string | null = null;
+  constructor(private _interceptorFn?: ((value: any) => any) | null) {}
+  sanitize(
+    context: SecurityContext,
+    value: LocalSanitizedValue | string | null | any,
+  ): string | null {
     if (this._interceptorFn) {
       this._interceptorFn(value);
     }
-    return this.lastValue = value;
+    return (this.lastValue = value);
   }
 }
 
diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts
index 3234f6bd10fe6..97c6b397d028e 100644
--- a/packages/core/test/render3/integration_spec.ts
+++ b/packages/core/test/render3/integration_spec.ts
@@ -15,15 +15,13 @@ import {CONTEXT, HEADER_OFFSET} from '../../src/render3/interfaces/view';
 import {Sanitizer} from '../../src/sanitization/sanitizer';
 import {SecurityContext} from '../../src/sanitization/security';
 
-
 describe('element discovery', () => {
   it('should only monkey-patch immediate child nodes in a component', () => {
     @Component({
       standalone: true,
       template: '<div><p></p></div>',
     })
-    class StructuredComp {
-    }
+    class StructuredComp {}
 
     const fixture = TestBed.createComponent(StructuredComp);
     fixture.detectChanges();
@@ -46,8 +44,7 @@ describe('element discovery', () => {
         <div></div>
       `,
     })
-    class ChildComp {
-    }
+    class ChildComp {}
 
     @Component({
       selector: 'parent-comp',
@@ -59,8 +56,7 @@ describe('element discovery', () => {
         </section>
       `,
     })
-    class ParentComp {
-    }
+    class ParentComp {}
 
     const fixture = TestBed.createComponent(ParentComp);
     fixture.detectChanges();
@@ -89,15 +85,15 @@ describe('element discovery', () => {
         </section>
       `,
     })
-    class StructuredComp {
-    }
+    class StructuredComp {}
 
     const fixture = TestBed.createComponent(StructuredComp);
     fixture.detectChanges();
 
     const host = fixture.nativeElement;
-    const [section, div1, p, div2] =
-        Array.from<HTMLElement>(host.querySelectorAll('section, div, p'));
+    const [section, div1, p, div2] = Array.from<HTMLElement>(
+      host.querySelectorAll('section, div, p'),
+    );
 
     expect(section.nodeName.toLowerCase()).toBe('section');
     expect(readPatchedData(section)).toBeTruthy();
@@ -121,8 +117,7 @@ describe('element discovery', () => {
         <div></div>
       `,
     })
-    class StructuredComp {
-    }
+    class StructuredComp {}
 
     const fixture = TestBed.createComponent(StructuredComp);
     fixture.detectChanges();
@@ -150,8 +145,7 @@ describe('element discovery', () => {
         <section></section>
       `,
     })
-    class StructuredComp {
-    }
+    class StructuredComp {}
 
     const fixture = TestBed.createComponent(StructuredComp);
     fixture.detectChanges();
@@ -168,66 +162,61 @@ describe('element discovery', () => {
     expect(result2.lView).toBe(result1);
   });
 
-  it('should cache the element context on an intermediate element that isn\'t preemptively monkey-patched',
-     () => {
-       @Component({
-         selector: 'structured-comp',
-         standalone: true,
-         template: `
+  it("should cache the element context on an intermediate element that isn't preemptively monkey-patched", () => {
+    @Component({
+      selector: 'structured-comp',
+      standalone: true,
+      template: `
             <section>
               <p></p>
             </section>
           `,
-       })
-       class StructuredComp {
-       }
-
-       const fixture = TestBed.createComponent(StructuredComp);
-       fixture.detectChanges();
-
-       const section = fixture.nativeElement.querySelector('section')! as any;
-       expect(readPatchedData(section)).toBeTruthy();
-
-       const p = fixture.nativeElement.querySelector('p')! as any;
-       expect(readPatchedData(p)).toBeFalsy();
-
-       const pContext = getLContext(p)!;
-       expect(pContext.native).toBe(p);
-       expect(readPatchedData(p)).toBe(pContext);
-     });
-
-  it('should be able to pull in element context data even if the element is decorated using styling',
-     () => {
-       @Component({
-         selector: 'structured-comp',
-         standalone: true,
-         template: `
+    })
+    class StructuredComp {}
+
+    const fixture = TestBed.createComponent(StructuredComp);
+    fixture.detectChanges();
+
+    const section = fixture.nativeElement.querySelector('section')! as any;
+    expect(readPatchedData(section)).toBeTruthy();
+
+    const p = fixture.nativeElement.querySelector('p')! as any;
+    expect(readPatchedData(p)).toBeFalsy();
+
+    const pContext = getLContext(p)!;
+    expect(pContext.native).toBe(p);
+    expect(readPatchedData(p)).toBe(pContext);
+  });
+
+  it('should be able to pull in element context data even if the element is decorated using styling', () => {
+    @Component({
+      selector: 'structured-comp',
+      standalone: true,
+      template: `
             <section></section>
           `,
-       })
-       class StructuredComp {
-       }
+    })
+    class StructuredComp {}
 
-       const fixture = TestBed.createComponent(StructuredComp);
-       fixture.detectChanges();
+    const fixture = TestBed.createComponent(StructuredComp);
+    fixture.detectChanges();
 
-       const section = fixture.nativeElement.querySelector('section')! as any;
-       const result1 = readPatchedData(section) as any;
-       expect(Array.isArray(result1)).toBeTruthy();
+    const section = fixture.nativeElement.querySelector('section')! as any;
+    const result1 = readPatchedData(section) as any;
+    expect(Array.isArray(result1)).toBeTruthy();
 
-       const elementResult = result1[HEADER_OFFSET];  // first element
-       expect(elementResult).toBe(section);
+    const elementResult = result1[HEADER_OFFSET]; // first element
+    expect(elementResult).toBe(section);
 
-       const context = getLContext(section)!;
-       const result2 = readPatchedData(section);
-       expect(Array.isArray(result2)).toBeFalsy();
+    const context = getLContext(section)!;
+    const result2 = readPatchedData(section);
+    expect(Array.isArray(result2)).toBeFalsy();
 
-       expect(context.native).toBe(section);
-     });
+    expect(context.native).toBe(section);
+  });
 
-  it('should monkey-patch immediate child nodes in a content-projected region with a reference to the parent component',
-     () => {
-       /*
+  it('should monkey-patch immediate child nodes in a content-projected region with a reference to the parent component', () => {
+    /*
          <!-- DOM view -->
          <section>
            <projection-comp>
@@ -241,10 +230,10 @@ describe('element discovery', () => {
            </projection-comp>
          </section>
        */
-       @Component({
-         selector: 'projector-comp',
-         standalone: true,
-         template: `
+    @Component({
+      selector: 'projector-comp',
+      standalone: true,
+      template: `
             welcome
             <header>
               <h1>
@@ -252,15 +241,14 @@ describe('element discovery', () => {
               </h1>
             </header>
           `,
-       })
-       class ProjectorComp {
-       }
-
-       @Component({
-         selector: 'parent-comp',
-         standalone: true,
-         imports: [ProjectorComp],
-         template: `
+    })
+    class ProjectorComp {}
+
+    @Component({
+      selector: 'parent-comp',
+      standalone: true,
+      imports: [ProjectorComp],
+      template: `
             <section>
               <projector-comp>
                 <p>this content is projected</p>
@@ -268,81 +256,77 @@ describe('element discovery', () => {
               </projector-comp>
             </section>
           `,
-       })
-       class ParentComp {
-       }
-
-       const fixture = TestBed.createComponent(ParentComp);
-       fixture.detectChanges();
-
-       const host = fixture.nativeElement;
-       const textNode = host.firstChild as any;
-       const section = host.querySelector('section')! as any;
-       const projectorComp = host.querySelector('projector-comp')! as any;
-       const header = host.querySelector('header')! as any;
-       const h1 = host.querySelector('h1')! as any;
-       const p = host.querySelector('p')! as any;
-       const pText = p.firstChild as any;
-       const projectedTextNode = p.nextSibling;
-
-       expect(projectorComp.children).toContain(header);
-       expect(h1.children).toContain(p);
-
-       expect(readPatchedData(textNode)).toBeTruthy();
-       expect(readPatchedData(section)).toBeTruthy();
-       expect(readPatchedData(projectorComp)).toBeTruthy();
-       expect(readPatchedData(header)).toBeTruthy();
-       expect(readPatchedData(h1)).toBeFalsy();
-       expect(readPatchedData(p)).toBeTruthy();
-       expect(readPatchedData(pText)).toBeFalsy();
-       expect(readPatchedData(projectedTextNode)).toBeTruthy();
-
-       const parentContext = getLContext(section)!;
-       const shadowContext = getLContext(header)!;
-       const projectedContext = getLContext(p)!;
-
-       const parentComponentData = parentContext.lView;
-       const shadowComponentData = shadowContext.lView;
-       const projectedComponentData = projectedContext.lView;
-
-       expect(projectedComponentData).toBe(parentComponentData);
-       expect(shadowComponentData).not.toBe(parentComponentData);
-     });
-
-  it('should return `null` when an element context is retrieved that isn\'t situated in Angular',
-     () => {
-       const elm1 = document.createElement('div');
-       const context1 = getLContext(elm1);
-       expect(context1).toBeFalsy();
-
-       const elm2 = document.createElement('div');
-       document.body.appendChild(elm2);
-       const context2 = getLContext(elm2);
-       expect(context2).toBeFalsy();
-     });
-
-  it('should return `null` when an element context is retrieved that is a DOM node that was not created by Angular',
-     () => {
-       @Component({
-         selector: 'structured-comp',
-         standalone: true,
-         template: `
+    })
+    class ParentComp {}
+
+    const fixture = TestBed.createComponent(ParentComp);
+    fixture.detectChanges();
+
+    const host = fixture.nativeElement;
+    const textNode = host.firstChild as any;
+    const section = host.querySelector('section')! as any;
+    const projectorComp = host.querySelector('projector-comp')! as any;
+    const header = host.querySelector('header')! as any;
+    const h1 = host.querySelector('h1')! as any;
+    const p = host.querySelector('p')! as any;
+    const pText = p.firstChild as any;
+    const projectedTextNode = p.nextSibling;
+
+    expect(projectorComp.children).toContain(header);
+    expect(h1.children).toContain(p);
+
+    expect(readPatchedData(textNode)).toBeTruthy();
+    expect(readPatchedData(section)).toBeTruthy();
+    expect(readPatchedData(projectorComp)).toBeTruthy();
+    expect(readPatchedData(header)).toBeTruthy();
+    expect(readPatchedData(h1)).toBeFalsy();
+    expect(readPatchedData(p)).toBeTruthy();
+    expect(readPatchedData(pText)).toBeFalsy();
+    expect(readPatchedData(projectedTextNode)).toBeTruthy();
+
+    const parentContext = getLContext(section)!;
+    const shadowContext = getLContext(header)!;
+    const projectedContext = getLContext(p)!;
+
+    const parentComponentData = parentContext.lView;
+    const shadowComponentData = shadowContext.lView;
+    const projectedComponentData = projectedContext.lView;
+
+    expect(projectedComponentData).toBe(parentComponentData);
+    expect(shadowComponentData).not.toBe(parentComponentData);
+  });
+
+  it("should return `null` when an element context is retrieved that isn't situated in Angular", () => {
+    const elm1 = document.createElement('div');
+    const context1 = getLContext(elm1);
+    expect(context1).toBeFalsy();
+
+    const elm2 = document.createElement('div');
+    document.body.appendChild(elm2);
+    const context2 = getLContext(elm2);
+    expect(context2).toBeFalsy();
+  });
+
+  it('should return `null` when an element context is retrieved that is a DOM node that was not created by Angular', () => {
+    @Component({
+      selector: 'structured-comp',
+      standalone: true,
+      template: `
              <section></section>
            `,
-       })
-       class StructuredComp {
-       }
+    })
+    class StructuredComp {}
 
-       const fixture = TestBed.createComponent(StructuredComp);
-       fixture.detectChanges();
+    const fixture = TestBed.createComponent(StructuredComp);
+    fixture.detectChanges();
 
-       const section = fixture.nativeElement.querySelector('section')! as any;
-       const manuallyCreatedElement = document.createElement('div');
-       section.appendChild(manuallyCreatedElement);
+    const section = fixture.nativeElement.querySelector('section')! as any;
+    const manuallyCreatedElement = document.createElement('div');
+    section.appendChild(manuallyCreatedElement);
 
-       const context = getLContext(manuallyCreatedElement);
-       expect(context).toBeFalsy();
-     });
+    const context = getLContext(manuallyCreatedElement);
+    expect(context).toBeFalsy();
+  });
 
   it('should by default monkey-patch the bootstrap component with context details', () => {
     @Component({
@@ -350,8 +334,7 @@ describe('element discovery', () => {
       standalone: true,
       template: ``,
     })
-    class StructuredComp {
-    }
+    class StructuredComp {}
 
     const fixture = TestBed.createComponent(StructuredComp);
     fixture.detectChanges();
@@ -375,238 +358,231 @@ describe('element discovery', () => {
     expect(context2.native).toEqual(hostElm);
   });
 
-  it('should by default monkey-patch the directives with LView so that they can be examined',
-     () => {
-       let myDir1Instance: MyDir1|null = null;
-       let myDir2Instance: MyDir2|null = null;
-       let myDir3Instance: MyDir2|null = null;
-
-       @Directive({
-         selector: '[my-dir-1]',
-         standalone: true,
-       })
-       class MyDir1 {
-         constructor() {
-           myDir1Instance = this;
-         }
-       }
-
-       @Directive({
-         selector: '[my-dir-2]',
-         standalone: true,
-       })
-       class MyDir2 {
-         constructor() {
-           myDir2Instance = this;
-         }
-       }
-
-       @Directive({
-         selector: '[my-dir-3]',
-         standalone: true,
-       })
-       class MyDir3 {
-         constructor() {
-           myDir3Instance = this;
-         }
-       }
-
-       @Component({
-         selector: 'structured-comp',
-         standalone: true,
-         imports: [MyDir1, MyDir2, MyDir3],
-         template: `
+  it('should by default monkey-patch the directives with LView so that they can be examined', () => {
+    let myDir1Instance: MyDir1 | null = null;
+    let myDir2Instance: MyDir2 | null = null;
+    let myDir3Instance: MyDir2 | null = null;
+
+    @Directive({
+      selector: '[my-dir-1]',
+      standalone: true,
+    })
+    class MyDir1 {
+      constructor() {
+        myDir1Instance = this;
+      }
+    }
+
+    @Directive({
+      selector: '[my-dir-2]',
+      standalone: true,
+    })
+    class MyDir2 {
+      constructor() {
+        myDir2Instance = this;
+      }
+    }
+
+    @Directive({
+      selector: '[my-dir-3]',
+      standalone: true,
+    })
+    class MyDir3 {
+      constructor() {
+        myDir3Instance = this;
+      }
+    }
+
+    @Component({
+      selector: 'structured-comp',
+      standalone: true,
+      imports: [MyDir1, MyDir2, MyDir3],
+      template: `
             <div my-dir-1 my-dir-2></div>
             <div my-dir-3></div>
           `,
-       })
-       class StructuredComp {
-       }
-
-       const fixture = TestBed.createComponent(StructuredComp);
-       fixture.detectChanges();
-
-       const hostElm = fixture.nativeElement;
-       const div1 = hostElm.querySelector('div:first-child')! as any;
-       const div2 = hostElm.querySelector('div:last-child')! as any;
-       const context = getLContext(hostElm)!;
-       const componentView = context.lView![context.nodeIndex];
-
-       expect(componentView).toContain(myDir1Instance);
-       expect(componentView).toContain(myDir2Instance);
-       expect(componentView).toContain(myDir3Instance);
-
-       expect(Array.isArray(readPatchedData(myDir1Instance))).toBeTruthy();
-       expect(Array.isArray(readPatchedData(myDir2Instance))).toBeTruthy();
-       expect(Array.isArray(readPatchedData(myDir3Instance))).toBeTruthy();
-
-       const d1Context = getLContext(myDir1Instance)!;
-       const d2Context = getLContext(myDir2Instance)!;
-       const d3Context = getLContext(myDir3Instance)!;
-
-       expect(d1Context.lView).toEqual(componentView);
-       expect(d2Context.lView).toEqual(componentView);
-       expect(d3Context.lView).toEqual(componentView);
-
-       expect(readPatchedData(myDir1Instance)).toBe(d1Context);
-       expect(readPatchedData(myDir2Instance)).toBe(d2Context);
-       expect(readPatchedData(myDir3Instance)).toBe(d3Context);
-
-       expect(d1Context.nodeIndex).toEqual(HEADER_OFFSET);
-       expect(d1Context.native).toBe(div1);
-       expect(d1Context.directives as any[]).toEqual([myDir1Instance, myDir2Instance]);
-
-       expect(d2Context.nodeIndex).toEqual(HEADER_OFFSET);
-       expect(d2Context.native).toBe(div1);
-       expect(d2Context.directives as any[]).toEqual([myDir1Instance, myDir2Instance]);
-
-       expect(d3Context.nodeIndex).toEqual(HEADER_OFFSET + 1);
-       expect(d3Context.native).toBe(div2);
-       expect(d3Context.directives as any[]).toEqual([myDir3Instance]);
-     });
-
-  it('should monkey-patch the exact same context instance of the DOM node, component and any directives on the same element',
-     () => {
-       let myDir1Instance: MyDir1|null = null;
-       let myDir2Instance: MyDir2|null = null;
-       let childComponentInstance: ChildComp|null = null;
-
-       @Directive({
-         selector: '[my-dir-1]',
-         standalone: true,
-       })
-       class MyDir1 {
-         constructor() {
-           myDir1Instance = this;
-         }
-       }
-
-       @Directive({
-         selector: '[my-dir-2]',
-         standalone: true,
-       })
-       class MyDir2 {
-         constructor() {
-           myDir2Instance = this;
-         }
-       }
-
-       @Component({
-         selector: 'child-comp',
-         standalone: true,
-         template: `
+    })
+    class StructuredComp {}
+
+    const fixture = TestBed.createComponent(StructuredComp);
+    fixture.detectChanges();
+
+    const hostElm = fixture.nativeElement;
+    const div1 = hostElm.querySelector('div:first-child')! as any;
+    const div2 = hostElm.querySelector('div:last-child')! as any;
+    const context = getLContext(hostElm)!;
+    const componentView = context.lView![context.nodeIndex];
+
+    expect(componentView).toContain(myDir1Instance);
+    expect(componentView).toContain(myDir2Instance);
+    expect(componentView).toContain(myDir3Instance);
+
+    expect(Array.isArray(readPatchedData(myDir1Instance))).toBeTruthy();
+    expect(Array.isArray(readPatchedData(myDir2Instance))).toBeTruthy();
+    expect(Array.isArray(readPatchedData(myDir3Instance))).toBeTruthy();
+
+    const d1Context = getLContext(myDir1Instance)!;
+    const d2Context = getLContext(myDir2Instance)!;
+    const d3Context = getLContext(myDir3Instance)!;
+
+    expect(d1Context.lView).toEqual(componentView);
+    expect(d2Context.lView).toEqual(componentView);
+    expect(d3Context.lView).toEqual(componentView);
+
+    expect(readPatchedData(myDir1Instance)).toBe(d1Context);
+    expect(readPatchedData(myDir2Instance)).toBe(d2Context);
+    expect(readPatchedData(myDir3Instance)).toBe(d3Context);
+
+    expect(d1Context.nodeIndex).toEqual(HEADER_OFFSET);
+    expect(d1Context.native).toBe(div1);
+    expect(d1Context.directives as any[]).toEqual([myDir1Instance, myDir2Instance]);
+
+    expect(d2Context.nodeIndex).toEqual(HEADER_OFFSET);
+    expect(d2Context.native).toBe(div1);
+    expect(d2Context.directives as any[]).toEqual([myDir1Instance, myDir2Instance]);
+
+    expect(d3Context.nodeIndex).toEqual(HEADER_OFFSET + 1);
+    expect(d3Context.native).toBe(div2);
+    expect(d3Context.directives as any[]).toEqual([myDir3Instance]);
+  });
+
+  it('should monkey-patch the exact same context instance of the DOM node, component and any directives on the same element', () => {
+    let myDir1Instance: MyDir1 | null = null;
+    let myDir2Instance: MyDir2 | null = null;
+    let childComponentInstance: ChildComp | null = null;
+
+    @Directive({
+      selector: '[my-dir-1]',
+      standalone: true,
+    })
+    class MyDir1 {
+      constructor() {
+        myDir1Instance = this;
+      }
+    }
+
+    @Directive({
+      selector: '[my-dir-2]',
+      standalone: true,
+    })
+    class MyDir2 {
+      constructor() {
+        myDir2Instance = this;
+      }
+    }
+
+    @Component({
+      selector: 'child-comp',
+      standalone: true,
+      template: `
              <div></div>
            `,
-       })
-       class ChildComp {
-         constructor() {
-           childComponentInstance = this;
-         }
-       }
-
-       @Component({
-         selector: 'parent-comp',
-         standalone: true,
-         imports: [ChildComp, MyDir1, MyDir2],
-         template: `
+    })
+    class ChildComp {
+      constructor() {
+        childComponentInstance = this;
+      }
+    }
+
+    @Component({
+      selector: 'parent-comp',
+      standalone: true,
+      imports: [ChildComp, MyDir1, MyDir2],
+      template: `
              <child-comp my-dir-1 my-dir-2></child-comp>
            `,
-       })
-       class ParentComp {
-       }
-
-       const fixture = TestBed.createComponent(ParentComp);
-       fixture.detectChanges();
-
-       const childCompHostElm = fixture.nativeElement.querySelector('child-comp')! as any;
-
-       const lView = readPatchedData(childCompHostElm);
-       expect(Array.isArray(lView)).toBeTruthy();
-       expect(readPatchedData(myDir1Instance)).toBe(lView);
-       expect(readPatchedData(myDir2Instance)).toBe(lView);
-       expect(readPatchedData(childComponentInstance)).toBe(lView);
-
-       const childNodeContext = getLContext(childCompHostElm)!;
-       expect(childNodeContext.component).toBeFalsy();
-       expect(childNodeContext.directives).toBeFalsy();
-       assertMonkeyPatchValueIsLView(myDir1Instance);
-       assertMonkeyPatchValueIsLView(myDir2Instance);
-       assertMonkeyPatchValueIsLView(childComponentInstance);
-
-       expect(getLContext(myDir1Instance)).toBe(childNodeContext);
-       expect(childNodeContext.component).toBeFalsy();
-       expect(childNodeContext.directives!.length).toEqual(2);
-       assertMonkeyPatchValueIsLView(myDir1Instance, false);
-       assertMonkeyPatchValueIsLView(myDir2Instance, false);
-       assertMonkeyPatchValueIsLView(childComponentInstance);
-
-       expect(getLContext(myDir2Instance)).toBe(childNodeContext);
-       expect(childNodeContext.component).toBeFalsy();
-       expect(childNodeContext.directives!.length).toEqual(2);
-       assertMonkeyPatchValueIsLView(myDir1Instance, false);
-       assertMonkeyPatchValueIsLView(myDir2Instance, false);
-       assertMonkeyPatchValueIsLView(childComponentInstance);
-
-       expect(getLContext(childComponentInstance)).toBe(childNodeContext);
-       expect(childNodeContext.component).toBeTruthy();
-       expect(childNodeContext.directives!.length).toEqual(2);
-       assertMonkeyPatchValueIsLView(myDir1Instance, false);
-       assertMonkeyPatchValueIsLView(myDir2Instance, false);
-       assertMonkeyPatchValueIsLView(childComponentInstance, false);
-
-       function assertMonkeyPatchValueIsLView(value: any, yesOrNo = true) {
-         expect(Array.isArray(readPatchedData(value))).toBe(yesOrNo);
-       }
-     });
-
-  it('should monkey-patch sub components with the view data and then replace them with the context result once a lookup occurs',
-     () => {
-       @Component({
-         selector: 'child-comp',
-         standalone: true,
-         template: `
+    })
+    class ParentComp {}
+
+    const fixture = TestBed.createComponent(ParentComp);
+    fixture.detectChanges();
+
+    const childCompHostElm = fixture.nativeElement.querySelector('child-comp')! as any;
+
+    const lView = readPatchedData(childCompHostElm);
+    expect(Array.isArray(lView)).toBeTruthy();
+    expect(readPatchedData(myDir1Instance)).toBe(lView);
+    expect(readPatchedData(myDir2Instance)).toBe(lView);
+    expect(readPatchedData(childComponentInstance)).toBe(lView);
+
+    const childNodeContext = getLContext(childCompHostElm)!;
+    expect(childNodeContext.component).toBeFalsy();
+    expect(childNodeContext.directives).toBeFalsy();
+    assertMonkeyPatchValueIsLView(myDir1Instance);
+    assertMonkeyPatchValueIsLView(myDir2Instance);
+    assertMonkeyPatchValueIsLView(childComponentInstance);
+
+    expect(getLContext(myDir1Instance)).toBe(childNodeContext);
+    expect(childNodeContext.component).toBeFalsy();
+    expect(childNodeContext.directives!.length).toEqual(2);
+    assertMonkeyPatchValueIsLView(myDir1Instance, false);
+    assertMonkeyPatchValueIsLView(myDir2Instance, false);
+    assertMonkeyPatchValueIsLView(childComponentInstance);
+
+    expect(getLContext(myDir2Instance)).toBe(childNodeContext);
+    expect(childNodeContext.component).toBeFalsy();
+    expect(childNodeContext.directives!.length).toEqual(2);
+    assertMonkeyPatchValueIsLView(myDir1Instance, false);
+    assertMonkeyPatchValueIsLView(myDir2Instance, false);
+    assertMonkeyPatchValueIsLView(childComponentInstance);
+
+    expect(getLContext(childComponentInstance)).toBe(childNodeContext);
+    expect(childNodeContext.component).toBeTruthy();
+    expect(childNodeContext.directives!.length).toEqual(2);
+    assertMonkeyPatchValueIsLView(myDir1Instance, false);
+    assertMonkeyPatchValueIsLView(myDir2Instance, false);
+    assertMonkeyPatchValueIsLView(childComponentInstance, false);
+
+    function assertMonkeyPatchValueIsLView(value: any, yesOrNo = true) {
+      expect(Array.isArray(readPatchedData(value))).toBe(yesOrNo);
+    }
+  });
+
+  it('should monkey-patch sub components with the view data and then replace them with the context result once a lookup occurs', () => {
+    @Component({
+      selector: 'child-comp',
+      standalone: true,
+      template: `
             <div></div>
             <div></div>
             <div></div>
           `,
-       })
-       class ChildComp {
-       }
-
-       @Component({
-         selector: 'parent-comp',
-         standalone: true,
-         imports: [ChildComp],
-         template: `
+    })
+    class ChildComp {}
+
+    @Component({
+      selector: 'parent-comp',
+      standalone: true,
+      imports: [ChildComp],
+      template: `
             <section>
               <child-comp></child-comp>
             </section>
           `,
-       })
-       class ParentComp {
-       }
-
-       const fixture = TestBed.createComponent(ParentComp);
-       fixture.detectChanges();
-
-       const host = fixture.nativeElement;
-       const child = host.querySelector('child-comp') as any;
-       expect(readPatchedData(child)).toBeTruthy();
-
-       const context = getLContext(child)!;
-       expect(readPatchedData(child)).toBeTruthy();
-
-       const componentData = context.lView![context.nodeIndex];
-       const component = componentData[CONTEXT];
-       expect(component instanceof ChildComp).toBeTruthy();
-       expect(readPatchedData(component)).toBe(context.lView);
-
-       const componentContext = getLContext(component)!;
-       expect(readPatchedData(component)).toBe(componentContext);
-       expect(componentContext.nodeIndex).toEqual(context.nodeIndex);
-       expect(componentContext.native).toEqual(context.native);
-       expect(componentContext.lView).toEqual(context.lView);
-     });
+    })
+    class ParentComp {}
+
+    const fixture = TestBed.createComponent(ParentComp);
+    fixture.detectChanges();
+
+    const host = fixture.nativeElement;
+    const child = host.querySelector('child-comp') as any;
+    expect(readPatchedData(child)).toBeTruthy();
+
+    const context = getLContext(child)!;
+    expect(readPatchedData(child)).toBeTruthy();
+
+    const componentData = context.lView![context.nodeIndex];
+    const component = componentData[CONTEXT];
+    expect(component instanceof ChildComp).toBeTruthy();
+    expect(readPatchedData(component)).toBe(context.lView);
+
+    const componentContext = getLContext(component)!;
+    expect(readPatchedData(component)).toBe(componentContext);
+    expect(componentContext.nodeIndex).toEqual(context.nodeIndex);
+    expect(componentContext.native).toEqual(context.native);
+    expect(componentContext.lView).toEqual(context.lView);
+  });
 });
 
 describe('sanitization', () => {
@@ -631,10 +607,12 @@ describe('sanitization', () => {
     });
 
     TestBed.configureTestingModule({
-      providers: [{
-        provide: Sanitizer,
-        useValue: sanitizer,
-      }]
+      providers: [
+        {
+          provide: Sanitizer,
+          useValue: sanitizer,
+        },
+      ],
     });
     const fixture = TestBed.createComponent(SanitizationComp);
     fixture.componentInstance.updateLink('http://foo');
@@ -672,16 +650,17 @@ describe('sanitization', () => {
         <blockquote unsafeUrlHostBindingDir></blockquote>
       `,
     })
-    class SimpleComp {
-    }
+    class SimpleComp {}
 
     const sanitizer = new LocalSanitizer((value) => 'http://bar');
 
     TestBed.configureTestingModule({
-      providers: [{
-        provide: Sanitizer,
-        useValue: sanitizer,
-      }]
+      providers: [
+        {
+          provide: Sanitizer,
+          useValue: sanitizer,
+        },
+      ],
     });
     const fixture = TestBed.createComponent(SimpleComp);
     hostBindingDir!.cite = 'http://foo';
@@ -705,9 +684,9 @@ class LocalSanitizedValue {
 }
 
 class LocalSanitizer implements Sanitizer {
-  constructor(private _interceptor: (value: string|null|any) => string) {}
+  constructor(private _interceptor: (value: string | null | any) => string) {}
 
-  sanitize(context: SecurityContext, value: LocalSanitizedValue|string|null): string|null {
+  sanitize(context: SecurityContext, value: LocalSanitizedValue | string | null): string | null {
     if (value instanceof LocalSanitizedValue) {
       return value.toString();
     }
diff --git a/packages/core/test/render3/interfaces/node_spec.ts b/packages/core/test/render3/interfaces/node_spec.ts
index d00cd3b6a2902..6de813f30e2d9 100644
--- a/packages/core/test/render3/interfaces/node_spec.ts
+++ b/packages/core/test/render3/interfaces/node_spec.ts
@@ -19,10 +19,15 @@ describe('node interfaces', () => {
       expect(toTNodeTypeAsString(TNodeType.Icu)).toEqual('IcuContainer');
       expect(toTNodeTypeAsString(TNodeType.Placeholder)).toEqual('Placeholder');
 
-      expect(toTNodeTypeAsString(
-                 TNodeType.Container | TNodeType.Projection | TNodeType.Element |
-                 TNodeType.ElementContainer | TNodeType.Icu))
-          .toEqual('Element|Container|ElementContainer|Projection|IcuContainer');
+      expect(
+        toTNodeTypeAsString(
+          TNodeType.Container |
+            TNodeType.Projection |
+            TNodeType.Element |
+            TNodeType.ElementContainer |
+            TNodeType.Icu,
+        ),
+      ).toEqual('Element|Container|ElementContainer|Projection|IcuContainer');
     });
   });
 });
diff --git a/packages/core/test/render3/is_shape_of.ts b/packages/core/test/render3/is_shape_of.ts
index 527e721bef3b4..b7ce9d5f9c150 100644
--- a/packages/core/test/render3/is_shape_of.ts
+++ b/packages/core/test/render3/is_shape_of.ts
@@ -79,7 +79,6 @@ const ShapeOfTI18n: ShapeOf<TI18n> = {
   ast: true,
 };
 
-
 /**
  * Determines if `obj` matches the shape `TIcu`.
  * @param obj
@@ -94,10 +93,9 @@ const ShapeOfTIcu: ShapeOf<TIcu> = {
   cases: true,
   create: true,
   remove: true,
-  update: true
+  update: true,
 };
 
-
 /**
  * Determines if `obj` matches the shape `TView`.
  * @param obj
@@ -139,7 +137,6 @@ const ShapeOfTView: ShapeOf<TView> = {
   ssrId: true,
 };
 
-
 /**
  * Determines if `obj` matches the shape `TI18n`.
  * @param obj
diff --git a/packages/core/test/render3/is_shape_of_spec.ts b/packages/core/test/render3/is_shape_of_spec.ts
index b757cffb7e8c0..5198f10e06c10 100644
--- a/packages/core/test/render3/is_shape_of_spec.ts
+++ b/packages/core/test/render3/is_shape_of_spec.ts
@@ -31,7 +31,8 @@ describe('isShapeOf', () => {
 
   it('should not match if missing property', () => {
     expect(isShapeOf({required: 1}, {required: true, missing: true})).toBeFalse();
-    expect(isShapeOf({required: true, extra: 'is ok'}, {required: true, missing: true}))
-        .toBeFalse();
+    expect(
+      isShapeOf({required: true, extra: 'is ok'}, {required: true, missing: true}),
+    ).toBeFalse();
   });
 });
diff --git a/packages/core/test/render3/ivy/jit_spec.ts b/packages/core/test/render3/ivy/jit_spec.ts
index ebf9883dbe9f5..93ee66a67507a 100644
--- a/packages/core/test/render3/ivy/jit_spec.ts
+++ b/packages/core/test/render3/ivy/jit_spec.ts
@@ -6,14 +6,30 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ContentChild, ContentChildren, Directive, ElementRef, forwardRef, getNgModuleById, HostBinding, HostListener, Input, NgModule, Pipe, QueryList, ViewChild, ViewChildren, ɵNgModuleDef as NgModuleDef, ɵɵngDeclareComponent as ngDeclareComponent} from '@angular/core';
+import {
+  Component,
+  ContentChild,
+  ContentChildren,
+  Directive,
+  ElementRef,
+  forwardRef,
+  getNgModuleById,
+  HostBinding,
+  HostListener,
+  Input,
+  NgModule,
+  Pipe,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+  ɵNgModuleDef as NgModuleDef,
+  ɵɵngDeclareComponent as ngDeclareComponent,
+} from '@angular/core';
 import {Injectable} from '@angular/core/src/di/injectable';
 import {setCurrentInjector, ɵɵinject} from '@angular/core/src/di/injector_compatibility';
 import {ɵɵdefineInjectable, ɵɵInjectorDef} from '@angular/core/src/di/interface/defs';
 import {FactoryFn} from '@angular/core/src/render3/definition_factory';
-import {ComponentDef, PipeDef,} from '@angular/core/src/render3/interfaces/definition';
-
-
+import {ComponentDef, PipeDef} from '@angular/core/src/render3/interfaces/definition';
 
 describe('render3 jit', () => {
   let injector: any;
@@ -30,8 +46,7 @@ describe('render3 jit', () => {
       template: 'test',
       selector: 'test-cmp',
     })
-    class SomeCmp {
-    }
+    class SomeCmp {}
     const SomeCmpAny = SomeCmp as any;
 
     expect(SomeCmpAny.ɵcmp).toBeDefined();
@@ -43,61 +58,61 @@ describe('render3 jit', () => {
       selector: 'inner-cmp',
       template: 'Inner!',
     })
-    class InnerCmp {
-    }
+    class InnerCmp {}
 
     class OuterCmp {
       static ɵcmp = ngDeclareComponent({
         template: '<inner-cmp></inner-cmp>',
         type: OuterCmp,
-        components: [{
-          type: InnerCmp,
-          selector: 'inner-cmp',
-        }],
+        components: [
+          {
+            type: InnerCmp,
+            selector: 'inner-cmp',
+          },
+        ],
       });
     }
 
     const rawDirectiveDefs = (OuterCmp.ɵcmp as ComponentDef<OuterCmp>).directiveDefs;
     expect(rawDirectiveDefs).not.toBeNull();
     const directiveDefs =
-        rawDirectiveDefs! instanceof Function ? rawDirectiveDefs!() : rawDirectiveDefs!;
+      rawDirectiveDefs! instanceof Function ? rawDirectiveDefs!() : rawDirectiveDefs!;
     expect(directiveDefs.length).toBe(1);
     expect(directiveDefs[0].type).toBe(InnerCmp);
   });
 
-
   it('compiles a partially compiled component with unified dependencies', () => {
     @Component({
       selector: 'inner-cmp',
       template: 'Inner!',
     })
-    class InnerCmp {
-    }
+    class InnerCmp {}
 
     class OuterCmp {
       static ɵcmp = ngDeclareComponent({
         template: '<inner-cmp></inner-cmp>',
         type: OuterCmp,
-        dependencies: [{
-          kind: 'component',
-          type: InnerCmp,
-          selector: 'inner-cmp',
-        }],
+        dependencies: [
+          {
+            kind: 'component',
+            type: InnerCmp,
+            selector: 'inner-cmp',
+          },
+        ],
       });
     }
 
     const rawDirectiveDefs = (OuterCmp.ɵcmp as ComponentDef<OuterCmp>).directiveDefs;
     expect(rawDirectiveDefs).not.toBeNull();
     const directiveDefs =
-        rawDirectiveDefs! instanceof Function ? rawDirectiveDefs!() : rawDirectiveDefs!;
+      rawDirectiveDefs! instanceof Function ? rawDirectiveDefs!() : rawDirectiveDefs!;
     expect(directiveDefs.length).toBe(1);
     expect(directiveDefs[0].type).toBe(InnerCmp);
   });
 
   it('compiles an injectable with a type provider', () => {
     @Injectable({providedIn: 'root'})
-    class Service {
-    }
+    class Service {}
     const ServiceAny = Service as any;
 
     expect(ServiceAny.ɵprov).toBeDefined();
@@ -107,48 +122,41 @@ describe('render3 jit', () => {
 
   it('compiles an injectable with a useValue provider', () => {
     @Injectable({providedIn: 'root', useValue: 'test'})
-    class Service {
-    }
+    class Service {}
 
     expect(ɵɵinject(Service)).toBe('test');
   });
 
   it('compiles an injectable with a useExisting provider', () => {
     @Injectable({providedIn: 'root', useValue: 'test'})
-    class Existing {
-    }
+    class Existing {}
 
     @Injectable({providedIn: 'root', useExisting: Existing})
-    class Service {
-    }
+    class Service {}
 
     expect(ɵɵinject(Service)).toBe('test');
   });
 
   it('compiles an injectable with a useFactory provider, without deps', () => {
     @Injectable({providedIn: 'root', useFactory: () => 'test'})
-    class Service {
-    }
+    class Service {}
 
     expect(ɵɵinject(Service)).toBe('test');
   });
 
   it('compiles an injectable with a useFactory provider, with deps', () => {
     @Injectable({providedIn: 'root', useValue: 'test'})
-    class Existing {
-    }
+    class Existing {}
 
     @Injectable({providedIn: 'root', useFactory: (existing: any) => existing, deps: [Existing]})
-    class Service {
-    }
+    class Service {}
 
     expect(ɵɵinject(Service)).toBe('test');
   });
 
   it('compiles an injectable with a useClass provider, with deps', () => {
     @Injectable({providedIn: 'root', useValue: 'test'})
-    class Existing {
-    }
+    class Existing {}
 
     class Other {
       constructor(public value: any) {}
@@ -187,8 +195,7 @@ describe('render3 jit', () => {
 
   it('compiles an injectable with an inherited constructor', () => {
     @Injectable({providedIn: 'root'})
-    class Dep {
-    }
+    class Dep {}
 
     @Injectable()
     class Base {
@@ -196,8 +203,7 @@ describe('render3 jit', () => {
     }
 
     @Injectable({providedIn: 'root'})
-    class Child extends Base {
-    }
+    class Child extends Base {}
 
     expect(ɵɵinject(Child).dep instanceof Dep).toBe(true);
   });
@@ -207,14 +213,12 @@ describe('render3 jit', () => {
       template: 'foo',
       selector: 'foo',
     })
-    class Cmp {
-    }
+    class Cmp {}
 
     @NgModule({
       declarations: [Cmp],
     })
-    class Module {
-    }
+    class Module {}
 
     const moduleDef: NgModuleDef<Module> = (Module as any).ɵmod;
     expect(moduleDef).toBeDefined();
@@ -229,15 +233,13 @@ describe('render3 jit', () => {
     @NgModule({
       declarations: [forwardRef(() => Cmp)],
     })
-    class Module {
-    }
+    class Module {}
 
     @Component({
       template: 'foo',
       selector: 'foo',
     })
-    class Cmp {
-    }
+    class Cmp {}
 
     const componentDef: ComponentDef<Module> = (Cmp as any).ɵcmp;
     expect(componentDef).toBeDefined();
@@ -248,8 +250,7 @@ describe('render3 jit', () => {
     @NgModule({
       id: 'test',
     })
-    class Module {
-    }
+    class Module {}
 
     const moduleDef: NgModuleDef<Module> = (Module as any).ɵmod;
     expect(moduleDef).toBeDefined();
@@ -292,8 +293,7 @@ describe('render3 jit', () => {
       template: 'foo',
       selector: 'foo',
     })
-    class Cmp {
-    }
+    class Cmp {}
     const cmpDef: ComponentDef<Cmp> = (Cmp as any).ɵcmp;
 
     expect(cmpDef.directiveDefs).toBeNull();
@@ -301,8 +301,7 @@ describe('render3 jit', () => {
     @NgModule({
       declarations: [Cmp],
     })
-    class Module {
-    }
+    class Module {}
 
     const moduleDef: NgModuleDef<Module> = (Module as any).ɵmod;
     // directive defs are still null, since no directives were in that component
@@ -322,8 +321,7 @@ describe('render3 jit', () => {
       @HostBinding('class.green') green: boolean = false;
 
       @HostListener('change', ['$event'])
-      onChange(event: any): void {
-      }
+      onChange(event: any): void {}
     }
 
     const cmpDef = (Cmp as any).ɵcmp as ComponentDef<Cmp>;
@@ -334,21 +332,21 @@ describe('render3 jit', () => {
 
   it('should compile @Pipes without errors', () => {
     @Pipe({name: 'test-pipe', pure: false})
-    class P {
-    }
+    class P {}
 
     const pipeDef = (P as any).ɵpipe as PipeDef<P>;
     const pipeFactory = (P as any).ɵfac as FactoryFn<P>;
     expect(pipeDef.name).toBe('test-pipe');
     expect(pipeDef.pure).toBe(false, 'pipe should not be pure');
-    expect(pipeFactory() instanceof P)
-        .toBe(true, 'factory() should create an instance of the pipe');
+    expect(pipeFactory() instanceof P).toBe(
+      true,
+      'factory() should create an instance of the pipe',
+    );
   });
 
   it('should default @Pipe to pure: true', () => {
     @Pipe({name: 'test-pipe'})
-    class P {
-    }
+    class P {}
 
     const pipeDef = (P as any).ɵpipe as PipeDef<P>;
     expect(pipeDef.pure).toBe(true, 'pipe should be pure');
@@ -384,7 +382,7 @@ describe('render3 jit', () => {
   it('should compile ContentChildren query with string predicate on a directive', () => {
     @Directive({selector: '[test]'})
     class TestDirective {
-      @ContentChildren('foo') foos: QueryList<ElementRef>|undefined;
+      @ContentChildren('foo') foos: QueryList<ElementRef> | undefined;
     }
 
     expect((TestDirective as any).ɵdir.contentQueries).not.toBeNull();
@@ -393,7 +391,7 @@ describe('render3 jit', () => {
   it('should compile ContentChild query with string predicate on a directive', () => {
     @Directive({selector: '[test]'})
     class TestDirective {
-      @ContentChild('foo') foo: ElementRef|undefined;
+      @ContentChild('foo') foo: ElementRef | undefined;
     }
 
     expect((TestDirective as any).ɵdir.contentQueries).not.toBeNull();
@@ -404,7 +402,7 @@ describe('render3 jit', () => {
 
     @Directive({selector: '[test]'})
     class TestDirective {
-      @ContentChildren(SomeDir) dirs: QueryList<SomeDir>|undefined;
+      @ContentChildren(SomeDir) dirs: QueryList<SomeDir> | undefined;
     }
 
     expect((TestDirective as any).ɵdir.contentQueries).not.toBeNull();
@@ -415,7 +413,7 @@ describe('render3 jit', () => {
 
     @Directive({selector: '[test]'})
     class TestDirective {
-      @ContentChild(SomeDir) dir: SomeDir|undefined;
+      @ContentChild(SomeDir) dir: SomeDir | undefined;
     }
 
     expect((TestDirective as any).ɵdir.contentQueries).not.toBeNull();
@@ -424,7 +422,7 @@ describe('render3 jit', () => {
   it('should compile ViewChild query on a component', () => {
     @Component({selector: 'test', template: ''})
     class TestComponent {
-      @ViewChild('foo') foo: ElementRef|undefined;
+      @ViewChild('foo') foo: ElementRef | undefined;
     }
 
     expect((TestComponent as any).ɵcmp.foo).not.toBeNull();
@@ -433,7 +431,7 @@ describe('render3 jit', () => {
   it('should compile ViewChildren query on a component', () => {
     @Component({selector: 'test', template: ''})
     class TestComponent {
-      @ViewChildren('foo') foos: QueryList<ElementRef>|undefined;
+      @ViewChildren('foo') foos: QueryList<ElementRef> | undefined;
     }
 
     expect((TestComponent as any).ɵcmp.viewQuery).not.toBeNull();
@@ -442,9 +440,7 @@ describe('render3 jit', () => {
   describe('invalid parameters', () => {
     it('should error when creating an @Injectable that extends a class with a faulty parameter', () => {
       @Injectable({providedIn: 'root'})
-      class Legit {
-      }
-
+      class Legit {}
 
       @Injectable()
       class Base {
@@ -452,39 +448,35 @@ describe('render3 jit', () => {
       }
 
       @Injectable({providedIn: 'root'})
-      class Service extends Base {
-      }
+      class Service extends Base {}
 
       const ServiceAny = Service as any;
 
       expect(ServiceAny.ɵprov).toBeDefined();
       expect(ServiceAny.ɵprov.providedIn).toBe('root');
-      expect(() => ɵɵinject(Service))
-          .toThrowError(
-              /constructor is not compatible with Angular Dependency Injection because its dependency at index 1 of the parameter list is invalid/);
+      expect(() => ɵɵinject(Service)).toThrowError(
+        /constructor is not compatible with Angular Dependency Injection because its dependency at index 1 of the parameter list is invalid/,
+      );
     });
 
-    it('should error when creating an @Directive that extends an undecorated class with parameters',
-       () => {
-         @Injectable({providedIn: 'root'})
-         class Legit {
-         }
+    it('should error when creating an @Directive that extends an undecorated class with parameters', () => {
+      @Injectable({providedIn: 'root'})
+      class Legit {}
 
-         class BaseDir {
-           constructor(first: Legit) {}
-         }
+      class BaseDir {
+        constructor(first: Legit) {}
+      }
 
-         @Directive({selector: 'test'})
-         class TestDir extends BaseDir {
-         }
+      @Directive({selector: 'test'})
+      class TestDir extends BaseDir {}
 
-         const TestDirAny = TestDir as any;
+      const TestDirAny = TestDir as any;
 
-         expect(TestDirAny.ɵfac).toBeDefined();
-         expect(() => TestDirAny.ɵfac())
-             .toThrowError(
-                 /constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid/);
-       });
+      expect(TestDirAny.ɵfac).toBeDefined();
+      expect(() => TestDirAny.ɵfac()).toThrowError(
+        /constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid/,
+      );
+    });
   });
 });
 
diff --git a/packages/core/test/render3/jit/declare_classmetadata_spec.ts b/packages/core/test/render3/jit/declare_classmetadata_spec.ts
index 69ac25e5b94db..eacad367931c6 100644
--- a/packages/core/test/render3/jit/declare_classmetadata_spec.ts
+++ b/packages/core/test/render3/jit/declare_classmetadata_spec.ts
@@ -29,10 +29,12 @@ describe('class metadata declaration jit compilation', () => {
     const TestClass: WithMetadata = class TestClass {};
     ɵɵngDeclareClassMetadata({
       type: TestClass,
-      decorators: [{
-        type: Injectable,
-        args: [],
-      }],
+      decorators: [
+        {
+          type: Injectable,
+          args: [],
+        },
+      ],
     });
 
     expect(TestClass.decorators!.length).toBe(1);
@@ -45,10 +47,12 @@ describe('class metadata declaration jit compilation', () => {
     const TestClass: WithMetadata = class TestClass {};
     ɵɵngDeclareClassMetadata({
       type: TestClass,
-      decorators: [{
-        type: Injectable,
-        args: [],
-      }],
+      decorators: [
+        {
+          type: Injectable,
+          args: [],
+        },
+      ],
       propDecorators: {
         test: [{type: Input, args: []}],
       },
@@ -66,10 +70,12 @@ describe('class metadata declaration jit compilation', () => {
     const TestClass: WithMetadata = class TestClass {};
     ɵɵngDeclareClassMetadata({
       type: TestClass,
-      decorators: [{
-        type: Injectable,
-        args: [],
-      }],
+      decorators: [
+        {
+          type: Injectable,
+          args: [],
+        },
+      ],
       ctorParameters: () => [{type: String}],
     });
 
diff --git a/packages/core/test/render3/jit/declare_component_spec.ts b/packages/core/test/render3/jit/declare_component_spec.ts
index c77bef1b7e328..8dba8f50af8c3 100644
--- a/packages/core/test/render3/jit/declare_component_spec.ts
+++ b/packages/core/test/render3/jit/declare_component_spec.ts
@@ -7,18 +7,34 @@
  */
 
 import {InputFlags} from '@angular/compiler/src/core';
-import {ChangeDetectionStrategy, Component, Directive, ElementRef, forwardRef, Pipe, Type, ViewEncapsulation, ɵɵngDeclareComponent} from '@angular/core';
-
-import {AttributeMarker, ComponentDef, ɵɵInheritDefinitionFeature, ɵɵInputTransformsFeature, ɵɵNgOnChangesFeature} from '../../../src/render3';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Directive,
+  ElementRef,
+  forwardRef,
+  Pipe,
+  Type,
+  ViewEncapsulation,
+  ɵɵngDeclareComponent,
+} from '@angular/core';
+
+import {
+  AttributeMarker,
+  ComponentDef,
+  ɵɵInheritDefinitionFeature,
+  ɵɵInputTransformsFeature,
+  ɵɵNgOnChangesFeature,
+} from '../../../src/render3';
 
 import {functionContaining} from './matcher';
 
 describe('component declaration jit compilation', () => {
   it('should compile a minimal component declaration', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: `<div></div>`,
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: `<div></div>`,
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       template: functionContaining([/element[^(]*\(0,'div'\)/]),
@@ -26,9 +42,11 @@ describe('component declaration jit compilation', () => {
   });
 
   it('should compile a selector', () => {
-    const def =
-        ɵɵngDeclareComponent({type: TestClass, template: '<div></div>', selector: '[dir], test'}) as
-        ComponentDef<TestClass>;
+    const def = ɵɵngDeclareComponent({
+      type: TestClass,
+      template: '<div></div>',
+      selector: '[dir], test',
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       selectors: [['', 'dir', ''], ['test']],
@@ -37,16 +55,16 @@ describe('component declaration jit compilation', () => {
 
   it('should compile inputs and outputs', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div></div>',
-                  inputs: {
-                    minifiedProperty: 'property',
-                    minifiedClassProperty: ['bindingName', 'classProperty'],
-                  },
-                  outputs: {
-                    minifiedEventName: 'eventBindingName',
-                  },
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div></div>',
+      inputs: {
+        minifiedProperty: 'property',
+        minifiedClassProperty: ['bindingName', 'classProperty'],
+      },
+      outputs: {
+        minifiedEventName: 'eventBindingName',
+      },
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       inputs: {
@@ -66,12 +84,12 @@ describe('component declaration jit compilation', () => {
   it('should compile input with a transform function', () => {
     const transformFn = () => 1;
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div></div>',
-                  inputs: {
-                    minifiedClassProperty: ['bindingName', 'classProperty', transformFn],
-                  }
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div></div>',
+      inputs: {
+        minifiedClassProperty: ['bindingName', 'classProperty', transformFn],
+      },
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       inputs: {
@@ -89,10 +107,10 @@ describe('component declaration jit compilation', () => {
 
   it('should compile exportAs', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div></div>',
-                  exportAs: ['a', 'b'],
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div></div>',
+      exportAs: ['a', 'b'],
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       exportAs: ['a', 'b'],
@@ -101,12 +119,10 @@ describe('component declaration jit compilation', () => {
 
   it('should compile providers', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div></div>',
-                  providers: [
-                    {provide: 'token', useValue: 123},
-                  ],
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div></div>',
+      providers: [{provide: 'token', useValue: 123}],
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       features: [jasmine.any(Function)],
@@ -116,12 +132,10 @@ describe('component declaration jit compilation', () => {
 
   it('should compile view providers', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div></div>',
-                  viewProviders: [
-                    {provide: 'token', useValue: 123},
-                  ],
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div></div>',
+      viewProviders: [{provide: 'token', useValue: 123}],
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       features: [jasmine.any(Function)],
@@ -131,24 +145,24 @@ describe('component declaration jit compilation', () => {
 
   it('should compile content queries', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div></div>',
-                  queries: [
-                    {
-                      propertyName: 'byRef',
-                      predicate: ['ref'],
-                    },
-                    {
-                      propertyName: 'byToken',
-                      predicate: String,
-                      descendants: true,
-                      static: true,
-                      first: true,
-                      read: ElementRef,
-                      emitDistinctChangesOnly: false,
-                    }
-                  ],
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div></div>',
+      queries: [
+        {
+          propertyName: 'byRef',
+          predicate: ['ref'],
+        },
+        {
+          propertyName: 'byToken',
+          predicate: String,
+          descendants: true,
+          static: true,
+          first: true,
+          read: ElementRef,
+          emitDistinctChangesOnly: false,
+        },
+      ],
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       contentQueries: functionContaining([
@@ -168,24 +182,24 @@ describe('component declaration jit compilation', () => {
 
   it('should compile view queries', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div></div>',
-                  viewQueries: [
-                    {
-                      propertyName: 'byRef',
-                      predicate: ['ref'],
-                    },
-                    {
-                      propertyName: 'byToken',
-                      predicate: String,
-                      descendants: true,
-                      static: true,
-                      first: true,
-                      read: ElementRef,
-                      emitDistinctChangesOnly: false,
-                    }
-                  ],
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div></div>',
+      viewQueries: [
+        {
+          propertyName: 'byRef',
+          predicate: ['ref'],
+        },
+        {
+          propertyName: 'byToken',
+          predicate: String,
+          descendants: true,
+          static: true,
+          first: true,
+          read: ElementRef,
+          emitDistinctChangesOnly: false,
+        },
+      ],
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       viewQuery: functionContaining([
@@ -205,28 +219,34 @@ describe('component declaration jit compilation', () => {
 
   it('should compile host bindings', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div></div>',
-                  host: {
-                    attributes: {
-                      'attr': 'value',
-                    },
-                    listeners: {
-                      'event': 'handleEvent($event)',
-                    },
-                    properties: {
-                      'foo': 'foo.prop',
-                      'attr.bar': 'bar.prop',
-                    },
-                    classAttribute: 'foo bar',
-                    styleAttribute: 'width: 100px;',
-                  },
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div></div>',
+      host: {
+        attributes: {
+          'attr': 'value',
+        },
+        listeners: {
+          'event': 'handleEvent($event)',
+        },
+        properties: {
+          'foo': 'foo.prop',
+          'attr.bar': 'bar.prop',
+        },
+        classAttribute: 'foo bar',
+        styleAttribute: 'width: 100px;',
+      },
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       hostAttrs: [
-        'attr', 'value', AttributeMarker.Classes, 'foo', 'bar', AttributeMarker.Styles, 'width',
-        '100px'
+        'attr',
+        'value',
+        AttributeMarker.Classes,
+        'foo',
+        'bar',
+        AttributeMarker.Styles,
+        'width',
+        '100px',
       ],
       hostBindings: functionContaining([
         'return ctx.handleEvent($event)',
@@ -239,10 +259,10 @@ describe('component declaration jit compilation', () => {
 
   it('should compile components with inheritance', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div></div>',
-                  usesInheritance: true,
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div></div>',
+      usesInheritance: true,
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       features: [ɵɵInheritDefinitionFeature],
@@ -251,10 +271,10 @@ describe('component declaration jit compilation', () => {
 
   it('should compile components with onChanges lifecycle hook', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div></div>',
-                  usesOnChanges: true,
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div></div>',
+      usesOnChanges: true,
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       features: [ɵɵNgOnChangesFeature],
@@ -263,10 +283,10 @@ describe('component declaration jit compilation', () => {
 
   it('should compile components with OnPush change detection strategy', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div></div>',
-                  changeDetection: ChangeDetectionStrategy.OnPush,
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div></div>',
+      changeDetection: ChangeDetectionStrategy.OnPush,
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       onPush: true,
@@ -275,10 +295,10 @@ describe('component declaration jit compilation', () => {
 
   it('should compile components with styles', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div></div>',
-                  styles: ['div {}'],
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div></div>',
+      styles: ['div {}'],
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       styles: ['div[_ngcontent-%COMP%] {}'],
@@ -288,11 +308,11 @@ describe('component declaration jit compilation', () => {
 
   it('should compile components with view encapsulation', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div></div>',
-                  styles: ['div {}'],
-                  encapsulation: ViewEncapsulation.ShadowDom,
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div></div>',
+      styles: ['div {}'],
+      encapsulation: ViewEncapsulation.ShadowDom,
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       styles: ['div {}'],
@@ -302,10 +322,10 @@ describe('component declaration jit compilation', () => {
 
   it('should compile components with animations', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div></div>',
-                  animations: [{type: 'trigger'}],
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div></div>',
+      animations: [{type: 'trigger'}],
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       data: {
@@ -317,14 +337,14 @@ describe('component declaration jit compilation', () => {
   it('should honor preserveWhitespaces', () => {
     const template = '<div>    Foo    </div>';
     const whenTrue = ɵɵngDeclareComponent({
-                       type: TestClass,
-                       template,
-                       preserveWhitespaces: true,
-                     }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template,
+      preserveWhitespaces: true,
+    }) as ComponentDef<TestClass>;
     const whenOmitted = ɵɵngDeclareComponent({
-                          type: TestClass,
-                          template,
-                        }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template,
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(whenTrue, {
       template: functionContaining([
@@ -333,36 +353,33 @@ describe('component declaration jit compilation', () => {
       ]),
     });
     expectComponentDef(whenOmitted, {
-      template: functionContaining([
-        /elementStart[^(]*\(0,'div'\)/,
-        /text[^(]*\(1,' Foo '\)/,
-      ]),
+      template: functionContaining([/elementStart[^(]*\(0,'div'\)/, /text[^(]*\(1,' Foo '\)/]),
     });
   });
 
   it('should honor custom interpolation config', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '{% foo %}',
-                  interpolation: ['{%', '%}'],
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '{% foo %}',
+      interpolation: ['{%', '%}'],
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
-      template: functionContaining([
-        /textInterpolate[^(]*\(ctx.foo\)/,
-      ]),
+      template: functionContaining([/textInterpolate[^(]*\(ctx.foo\)/]),
     });
   });
 
   it('should compile used components', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<cmp></cmp>',
-                  components: [{
-                    type: TestCmp,
-                    selector: 'cmp',
-                  }],
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<cmp></cmp>',
+      components: [
+        {
+          type: TestCmp,
+          selector: 'cmp',
+        },
+      ],
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       directives: [TestCmp],
@@ -371,13 +388,15 @@ describe('component declaration jit compilation', () => {
 
   it('should compile used directives', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div dir></div>',
-                  directives: [{
-                    type: TestDir,
-                    selector: '[dir]',
-                  }],
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div dir></div>',
+      directives: [
+        {
+          type: TestDir,
+          selector: '[dir]',
+        },
+      ],
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       directives: [TestDir],
@@ -386,17 +405,21 @@ describe('component declaration jit compilation', () => {
 
   it('should compile used directives together with used components', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<cmp dir></cmp>',
-                  components: [{
-                    type: TestCmp,
-                    selector: 'cmp',
-                  }],
-                  directives: [{
-                    type: TestDir,
-                    selector: '[dir]',
-                  }],
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<cmp dir></cmp>',
+      components: [
+        {
+          type: TestCmp,
+          selector: 'cmp',
+        },
+      ],
+      directives: [
+        {
+          type: TestDir,
+          selector: '[dir]',
+        },
+      ],
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       directives: [TestCmp, TestDir],
@@ -405,19 +428,20 @@ describe('component declaration jit compilation', () => {
 
   it('should compile forward declared directives', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div forward></div>',
-                  directives: [{
-                    type: forwardRef(function() {
-                      return ForwardDir;
-                    }),
-                    selector: '[forward]',
-                  }],
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div forward></div>',
+      directives: [
+        {
+          type: forwardRef(function () {
+            return ForwardDir;
+          }),
+          selector: '[forward]',
+        },
+      ],
+    }) as ComponentDef<TestClass>;
 
     @Directive({selector: '[forward]'})
-    class ForwardDir {
-    }
+    class ForwardDir {}
 
     expectComponentDef(def, {
       directives: [ForwardDir],
@@ -426,25 +450,24 @@ describe('component declaration jit compilation', () => {
 
   it('should compile mixed forward and direct declared directives', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '<div dir forward></div>',
-                  directives: [
-                    {
-                      type: TestDir,
-                      selector: '[dir]',
-                    },
-                    {
-                      type: forwardRef(function() {
-                        return ForwardDir;
-                      }),
-                      selector: '[forward]',
-                    }
-                  ],
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '<div dir forward></div>',
+      directives: [
+        {
+          type: TestDir,
+          selector: '[dir]',
+        },
+        {
+          type: forwardRef(function () {
+            return ForwardDir;
+          }),
+          selector: '[forward]',
+        },
+      ],
+    }) as ComponentDef<TestClass>;
 
     @Directive({selector: '[forward]'})
-    class ForwardDir {
-    }
+    class ForwardDir {}
 
     expectComponentDef(def, {
       directives: [TestDir, ForwardDir],
@@ -453,12 +476,12 @@ describe('component declaration jit compilation', () => {
 
   it('should compile used pipes', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '{{ expr | test }}',
-                  pipes: {
-                    'test': TestPipe,
-                  },
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '{{ expr | test }}',
+      pipes: {
+        'test': TestPipe,
+      },
+    }) as ComponentDef<TestClass>;
 
     expectComponentDef(def, {
       pipes: [TestPipe],
@@ -467,18 +490,17 @@ describe('component declaration jit compilation', () => {
 
   it('should compile forward declared pipes', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '{{ expr | forward }}',
-                  pipes: {
-                    'forward': forwardRef(function() {
-                      return ForwardPipe;
-                    }),
-                  },
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '{{ expr | forward }}',
+      pipes: {
+        'forward': forwardRef(function () {
+          return ForwardPipe;
+        }),
+      },
+    }) as ComponentDef<TestClass>;
 
     @Pipe({name: 'forward'})
-    class ForwardPipe {
-    }
+    class ForwardPipe {}
 
     expectComponentDef(def, {
       pipes: [ForwardPipe],
@@ -487,19 +509,18 @@ describe('component declaration jit compilation', () => {
 
   it('should compile mixed forward and direct declared pipes', () => {
     const def = ɵɵngDeclareComponent({
-                  type: TestClass,
-                  template: '{{ expr | forward | test }}',
-                  pipes: {
-                    'test': TestPipe,
-                    'forward': forwardRef(function() {
-                      return ForwardPipe;
-                    }),
-                  },
-                }) as ComponentDef<TestClass>;
+      type: TestClass,
+      template: '{{ expr | forward | test }}',
+      pipes: {
+        'test': TestPipe,
+        'forward': forwardRef(function () {
+          return ForwardPipe;
+        }),
+      },
+    }) as ComponentDef<TestClass>;
 
     @Pipe({name: 'forward'})
-    class ForwardPipe {
-    }
+    class ForwardPipe {}
 
     expectComponentDef(def, {
       pipes: [TestPipe, ForwardPipe],
@@ -507,23 +528,42 @@ describe('component declaration jit compilation', () => {
   });
 });
 
-type ComponentDefExpectations = jasmine.Expected<Pick<
+type ComponentDefExpectations = jasmine.Expected<
+  Pick<
     ComponentDef<unknown>,
-    'selectors'|'template'|'inputs'|'declaredInputs'|'outputs'|'features'|'hostAttrs'|
-    'hostBindings'|'hostVars'|'contentQueries'|'viewQuery'|'exportAs'|'providersResolver'|
-    'encapsulation'|'onPush'|'styles'|'data'|'inputTransforms'>>&{
-  directives: Type<unknown>[]|null;
-  pipes: Type<unknown>[]|null;
+    | 'selectors'
+    | 'template'
+    | 'inputs'
+    | 'declaredInputs'
+    | 'outputs'
+    | 'features'
+    | 'hostAttrs'
+    | 'hostBindings'
+    | 'hostVars'
+    | 'contentQueries'
+    | 'viewQuery'
+    | 'exportAs'
+    | 'providersResolver'
+    | 'encapsulation'
+    | 'onPush'
+    | 'styles'
+    | 'data'
+    | 'inputTransforms'
+  >
+> & {
+  directives: Type<unknown>[] | null;
+  pipes: Type<unknown>[] | null;
 };
 
-
 /**
  * Asserts that the provided component definition is according to the provided expectation.
  * Definition fields for which no expectation is present are verified to be initialized to their
  * default value.
  */
 function expectComponentDef(
-    actual: ComponentDef<unknown>, expected: Partial<ComponentDefExpectations>): void {
+  actual: ComponentDef<unknown>,
+  expected: Partial<ComponentDefExpectations>,
+): void {
   const expectation: ComponentDefExpectations = {
     selectors: [],
     template: jasmine.any(Function),
@@ -556,8 +596,8 @@ function expectComponentDef(
   expect(actual.inputs).withContext('inputs').toEqual(expectation.inputs);
   expect(actual.declaredInputs).withContext('declaredInputs').toEqual(expectation.declaredInputs);
   expect(actual.inputTransforms)
-      .withContext('inputTransforms')
-      .toEqual(expectation.inputTransforms);
+    .withContext('inputTransforms')
+    .toEqual(expectation.inputTransforms);
   expect(actual.outputs).withContext('outputs').toEqual(expectation.outputs);
   expect(actual.features).withContext('features').toEqual(expectation.features);
   expect(actual.hostAttrs).withContext('hostAttrs').toEqual(expectation.hostAttrs);
@@ -567,36 +607,33 @@ function expectComponentDef(
   expect(actual.viewQuery).withContext('viewQuery').toEqual(expectation.viewQuery);
   expect(actual.exportAs).withContext('exportAs').toEqual(expectation.exportAs);
   expect(actual.providersResolver)
-      .withContext('providersResolver')
-      .toEqual(expectation.providersResolver);
+    .withContext('providersResolver')
+    .toEqual(expectation.providersResolver);
   expect(actual.encapsulation).withContext('encapsulation').toEqual(expectation.encapsulation);
   expect(actual.onPush).withContext('onPush').toEqual(expectation.onPush);
   expect(actual.styles).withContext('styles').toEqual(expectation.styles);
   expect(actual.data).withContext('data').toEqual(expectation.data);
 
-  const convertNullToEmptyArray = <T extends Type<any>[]|null>(arr: T): T =>
-      arr ?? ([] as unknown as T);
+  const convertNullToEmptyArray = <T extends Type<any>[] | null>(arr: T): T =>
+    arr ?? ([] as unknown as T);
 
   const directiveDefs =
-      typeof actual.directiveDefs === 'function' ? actual.directiveDefs() : actual.directiveDefs;
-  const directiveTypes = directiveDefs !== null ? directiveDefs.map(def => def.type) : null;
+    typeof actual.directiveDefs === 'function' ? actual.directiveDefs() : actual.directiveDefs;
+  const directiveTypes = directiveDefs !== null ? directiveDefs.map((def) => def.type) : null;
   expect(convertNullToEmptyArray(directiveTypes)).toEqual(expectation.directives);
 
   const pipeDefs = typeof actual.pipeDefs === 'function' ? actual.pipeDefs() : actual.pipeDefs;
-  const pipeTypes = pipeDefs !== null ? pipeDefs.map(def => def.type) : null;
+  const pipeTypes = pipeDefs !== null ? pipeDefs.map((def) => def.type) : null;
   expect(convertNullToEmptyArray(pipeTypes)).toEqual(expectation.pipes);
 }
 
 class TestClass {}
 
 @Directive({selector: '[dir]'})
-class TestDir {
-}
+class TestDir {}
 
 @Component({selector: 'cmp', template: ''})
-class TestCmp {
-}
+class TestCmp {}
 
 @Pipe({name: 'test'})
-class TestPipe {
-}
+class TestPipe {}
diff --git a/packages/core/test/render3/jit/declare_directive_spec.ts b/packages/core/test/render3/jit/declare_directive_spec.ts
index db2c66576e79f..efed18ae03705 100644
--- a/packages/core/test/render3/jit/declare_directive_spec.ts
+++ b/packages/core/test/render3/jit/declare_directive_spec.ts
@@ -8,22 +8,29 @@
 
 import {ElementRef, forwardRef, ɵɵngDeclareDirective} from '@angular/core';
 
-import {AttributeMarker, DirectiveDef, ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature} from '../../../src/render3';
+import {
+  AttributeMarker,
+  DirectiveDef,
+  ɵɵInheritDefinitionFeature,
+  ɵɵNgOnChangesFeature,
+} from '../../../src/render3';
 
 import {functionContaining} from './matcher';
 
 describe('directive declaration jit compilation', () => {
   it('should compile a minimal directive declaration', () => {
     const def = ɵɵngDeclareDirective({
-                  type: TestClass,
-                }) as DirectiveDef<TestClass>;
+      type: TestClass,
+    }) as DirectiveDef<TestClass>;
 
     expectDirectiveDef(def, {});
   });
 
   it('should compile a selector', () => {
-    const def =
-        ɵɵngDeclareDirective({type: TestClass, selector: '[dir], test'}) as DirectiveDef<TestClass>;
+    const def = ɵɵngDeclareDirective({
+      type: TestClass,
+      selector: '[dir], test',
+    }) as DirectiveDef<TestClass>;
 
     expectDirectiveDef(def, {
       selectors: [['', 'dir', ''], ['test']],
@@ -32,15 +39,15 @@ describe('directive declaration jit compilation', () => {
 
   it('should compile inputs and outputs', () => {
     const def = ɵɵngDeclareDirective({
-                  type: TestClass,
-                  inputs: {
-                    minifiedProperty: 'property',
-                    minifiedClassProperty: ['bindingName', 'classProperty'],
-                  },
-                  outputs: {
-                    minifiedEventName: 'eventBindingName',
-                  },
-                }) as DirectiveDef<TestClass>;
+      type: TestClass,
+      inputs: {
+        minifiedProperty: 'property',
+        minifiedClassProperty: ['bindingName', 'classProperty'],
+      },
+      outputs: {
+        minifiedEventName: 'eventBindingName',
+      },
+    }) as DirectiveDef<TestClass>;
 
     expectDirectiveDef(def, {
       inputs: {
@@ -59,9 +66,9 @@ describe('directive declaration jit compilation', () => {
 
   it('should compile exportAs', () => {
     const def = ɵɵngDeclareDirective({
-                  type: TestClass,
-                  exportAs: ['a', 'b'],
-                }) as DirectiveDef<TestClass>;
+      type: TestClass,
+      exportAs: ['a', 'b'],
+    }) as DirectiveDef<TestClass>;
 
     expectDirectiveDef(def, {
       exportAs: ['a', 'b'],
@@ -70,11 +77,9 @@ describe('directive declaration jit compilation', () => {
 
   it('should compile providers', () => {
     const def = ɵɵngDeclareDirective({
-                  type: TestClass,
-                  providers: [
-                    {provide: 'token', useValue: 123},
-                  ],
-                }) as DirectiveDef<TestClass>;
+      type: TestClass,
+      providers: [{provide: 'token', useValue: 123}],
+    }) as DirectiveDef<TestClass>;
 
     expectDirectiveDef(def, {
       features: [jasmine.any(Function)],
@@ -84,23 +89,23 @@ describe('directive declaration jit compilation', () => {
 
   it('should compile content queries', () => {
     const def = ɵɵngDeclareDirective({
-                  type: TestClass,
-                  queries: [
-                    {
-                      propertyName: 'byRef',
-                      predicate: ['ref'],
-                    },
-                    {
-                      propertyName: 'byToken',
-                      predicate: String,
-                      descendants: true,
-                      static: true,
-                      first: true,
-                      read: ElementRef,
-                      emitDistinctChangesOnly: false,
-                    }
-                  ],
-                }) as DirectiveDef<TestClass>;
+      type: TestClass,
+      queries: [
+        {
+          propertyName: 'byRef',
+          predicate: ['ref'],
+        },
+        {
+          propertyName: 'byToken',
+          predicate: String,
+          descendants: true,
+          static: true,
+          first: true,
+          read: ElementRef,
+          emitDistinctChangesOnly: false,
+        },
+      ],
+    }) as DirectiveDef<TestClass>;
 
     expectDirectiveDef(def, {
       contentQueries: functionContaining([
@@ -120,14 +125,14 @@ describe('directive declaration jit compilation', () => {
 
   it('should compile content queries with forwardRefs', () => {
     const def = ɵɵngDeclareDirective({
-                  type: TestClass,
-                  queries: [
-                    {
-                      propertyName: 'byRef',
-                      predicate: forwardRef(() => Child),
-                    },
-                  ],
-                }) as DirectiveDef<TestClass>;
+      type: TestClass,
+      queries: [
+        {
+          propertyName: 'byRef',
+          predicate: forwardRef(() => Child),
+        },
+      ],
+    }) as DirectiveDef<TestClass>;
 
     class Child {}
 
@@ -141,23 +146,23 @@ describe('directive declaration jit compilation', () => {
 
   it('should compile view queries', () => {
     const def = ɵɵngDeclareDirective({
-                  type: TestClass,
-                  viewQueries: [
-                    {
-                      propertyName: 'byRef',
-                      predicate: ['ref'],
-                    },
-                    {
-                      propertyName: 'byToken',
-                      predicate: String,
-                      descendants: true,
-                      static: true,
-                      first: true,
-                      read: ElementRef,
-                      emitDistinctChangesOnly: false,
-                    }
-                  ],
-                }) as DirectiveDef<TestClass>;
+      type: TestClass,
+      viewQueries: [
+        {
+          propertyName: 'byRef',
+          predicate: ['ref'],
+        },
+        {
+          propertyName: 'byToken',
+          predicate: String,
+          descendants: true,
+          static: true,
+          first: true,
+          read: ElementRef,
+          emitDistinctChangesOnly: false,
+        },
+      ],
+    }) as DirectiveDef<TestClass>;
 
     expectDirectiveDef(def, {
       viewQuery: functionContaining([
@@ -177,14 +182,14 @@ describe('directive declaration jit compilation', () => {
 
   it('should compile view queries with forwardRefs', () => {
     const def = ɵɵngDeclareDirective({
-                  type: TestClass,
-                  viewQueries: [
-                    {
-                      propertyName: 'byRef',
-                      predicate: forwardRef(() => Child),
-                    },
-                  ],
-                }) as DirectiveDef<TestClass>;
+      type: TestClass,
+      viewQueries: [
+        {
+          propertyName: 'byRef',
+          predicate: forwardRef(() => Child),
+        },
+      ],
+    }) as DirectiveDef<TestClass>;
 
     class Child {}
 
@@ -198,27 +203,33 @@ describe('directive declaration jit compilation', () => {
 
   it('should compile host bindings', () => {
     const def = ɵɵngDeclareDirective({
-                  type: TestClass,
-                  host: {
-                    attributes: {
-                      'attr': 'value',
-                    },
-                    listeners: {
-                      'event': 'handleEvent($event)',
-                    },
-                    properties: {
-                      'foo': 'foo.prop',
-                      'attr.bar': 'bar.prop',
-                    },
-                    classAttribute: 'foo bar',
-                    styleAttribute: 'width: 100px;',
-                  },
-                }) as DirectiveDef<TestClass>;
+      type: TestClass,
+      host: {
+        attributes: {
+          'attr': 'value',
+        },
+        listeners: {
+          'event': 'handleEvent($event)',
+        },
+        properties: {
+          'foo': 'foo.prop',
+          'attr.bar': 'bar.prop',
+        },
+        classAttribute: 'foo bar',
+        styleAttribute: 'width: 100px;',
+      },
+    }) as DirectiveDef<TestClass>;
 
     expectDirectiveDef(def, {
       hostAttrs: [
-        'attr', 'value', AttributeMarker.Classes, 'foo', 'bar', AttributeMarker.Styles, 'width',
-        '100px'
+        'attr',
+        'value',
+        AttributeMarker.Classes,
+        'foo',
+        'bar',
+        AttributeMarker.Styles,
+        'width',
+        '100px',
       ],
       hostBindings: functionContaining([
         'return ctx.handleEvent($event)',
@@ -231,9 +242,9 @@ describe('directive declaration jit compilation', () => {
 
   it('should compile directives with inheritance', () => {
     const def = ɵɵngDeclareDirective({
-                  type: TestClass,
-                  usesInheritance: true,
-                }) as DirectiveDef<TestClass>;
+      type: TestClass,
+      usesInheritance: true,
+    }) as DirectiveDef<TestClass>;
 
     expectDirectiveDef(def, {
       features: [ɵɵInheritDefinitionFeature],
@@ -242,9 +253,9 @@ describe('directive declaration jit compilation', () => {
 
   it('should compile directives with onChanges lifecycle hook', () => {
     const def = ɵɵngDeclareDirective({
-                  type: TestClass,
-                  usesOnChanges: true,
-                }) as DirectiveDef<TestClass>;
+      type: TestClass,
+      usesOnChanges: true,
+    }) as DirectiveDef<TestClass>;
 
     expectDirectiveDef(def, {
       features: [ɵɵNgOnChangesFeature],
@@ -252,10 +263,23 @@ describe('directive declaration jit compilation', () => {
   });
 });
 
-type DirectiveDefExpectations = jasmine.Expected<Pick<
+type DirectiveDefExpectations = jasmine.Expected<
+  Pick<
     DirectiveDef<unknown>,
-    'selectors'|'inputs'|'declaredInputs'|'outputs'|'features'|'hostAttrs'|'hostBindings'|
-    'hostVars'|'contentQueries'|'viewQuery'|'exportAs'|'providersResolver'>>;
+    | 'selectors'
+    | 'inputs'
+    | 'declaredInputs'
+    | 'outputs'
+    | 'features'
+    | 'hostAttrs'
+    | 'hostBindings'
+    | 'hostVars'
+    | 'contentQueries'
+    | 'viewQuery'
+    | 'exportAs'
+    | 'providersResolver'
+  >
+>;
 
 /**
  * Asserts that the provided directive definition is according to the provided expectation.
@@ -263,7 +287,9 @@ type DirectiveDefExpectations = jasmine.Expected<Pick<
  * default value.
  */
 function expectDirectiveDef(
-    actual: DirectiveDef<unknown>, expected: Partial<DirectiveDefExpectations>): void {
+  actual: DirectiveDef<unknown>,
+  expected: Partial<DirectiveDefExpectations>,
+): void {
   const expectation: DirectiveDefExpectations = {
     selectors: [],
     inputs: {},
@@ -293,8 +319,8 @@ function expectDirectiveDef(
   expect(actual.viewQuery).withContext('viewQuery').toEqual(expectation.viewQuery);
   expect(actual.exportAs).withContext('exportAs').toEqual(expectation.exportAs);
   expect(actual.providersResolver)
-      .withContext('providersResolver')
-      .toEqual(expectation.providersResolver);
+    .withContext('providersResolver')
+    .toEqual(expectation.providersResolver);
 }
 
 class TestClass {}
diff --git a/packages/core/test/render3/jit/declare_factory_spec.ts b/packages/core/test/render3/jit/declare_factory_spec.ts
index a73b7b82ecc38..1aa8df8cf22c3 100644
--- a/packages/core/test/render3/jit/declare_factory_spec.ts
+++ b/packages/core/test/render3/jit/declare_factory_spec.ts
@@ -6,12 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injector, ɵcreateInjector, ɵInjectorProfilerContext, ɵsetInjectorProfilerContext, ɵɵFactoryTarget, ɵɵngDeclareFactory} from '@angular/core';
+import {
+  Injector,
+  ɵcreateInjector,
+  ɵInjectorProfilerContext,
+  ɵsetInjectorProfilerContext,
+  ɵɵFactoryTarget,
+  ɵɵngDeclareFactory,
+} from '@angular/core';
 import {ɵɵdefineInjector} from '@angular/core/src/di';
 import {setCurrentInjector} from '@angular/core/src/di/injector_compatibility';
 
 describe('Factory declaration jit compilation', () => {
-  let previousInjector: Injector|null|undefined;
+  let previousInjector: Injector | null | undefined;
   let previousInjectorProfilerContext: ɵInjectorProfilerContext;
   beforeEach(() => {
     const injector = ɵcreateInjector(TestInjector);
@@ -65,13 +72,19 @@ class DependingClass {
 }
 
 class ChildClass extends DependingClass {
-  static override ɵfac =
-      ɵɵngDeclareFactory({type: ChildClass, deps: null, target: ɵɵFactoryTarget.Injectable});
+  static override ɵfac = ɵɵngDeclareFactory({
+    type: ChildClass,
+    deps: null,
+    target: ɵɵFactoryTarget.Injectable,
+  });
 }
 
 class InvalidDepsClass {
-  static ɵfac = ɵɵngDeclareFactory(
-      {type: InvalidDepsClass, deps: 'invalid', target: ɵɵFactoryTarget.Injectable});
+  static ɵfac = ɵɵngDeclareFactory({
+    type: InvalidDepsClass,
+    deps: 'invalid',
+    target: ɵɵFactoryTarget.Injectable,
+  });
 }
 
 class TestInjector {
diff --git a/packages/core/test/render3/jit/declare_injectable_spec.ts b/packages/core/test/render3/jit/declare_injectable_spec.ts
index 223a16835e77d..1984ab79b5c7a 100644
--- a/packages/core/test/render3/jit/declare_injectable_spec.ts
+++ b/packages/core/test/render3/jit/declare_injectable_spec.ts
@@ -6,10 +6,23 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {forwardRef, InjectionToken, Injector, ɵcreateInjector, ɵInjectorProfilerContext, ɵsetCurrentInjector, ɵsetInjectorProfilerContext, ɵɵdefineInjector, ɵɵInjectableDeclaration, ɵɵngDeclareInjectable, ɵɵngDeclareInjector, ɵɵngDeclareNgModule} from '@angular/core';
+import {
+  forwardRef,
+  InjectionToken,
+  Injector,
+  ɵcreateInjector,
+  ɵInjectorProfilerContext,
+  ɵsetCurrentInjector,
+  ɵsetInjectorProfilerContext,
+  ɵɵdefineInjector,
+  ɵɵInjectableDeclaration,
+  ɵɵngDeclareInjectable,
+  ɵɵngDeclareInjector,
+  ɵɵngDeclareNgModule,
+} from '@angular/core';
 
 describe('Injectable declaration jit compilation', () => {
-  let previousInjector: Injector|null|undefined;
+  let previousInjector: Injector | null | undefined;
   let previousInjectorProfilerContext: ɵInjectorProfilerContext;
   beforeEach(() => {
     const injector = ɵcreateInjector(TestInjector);
@@ -78,9 +91,9 @@ describe('Injectable declaration jit compilation', () => {
     class TestClass {
       static ɵprov = ɵɵngDeclareInjectable({
         type: TestClass,
-        useClass: forwardRef(function() {
+        useClass: forwardRef(function () {
           return FutureClass;
-        })
+        }),
       });
     }
     class FutureClass {
@@ -121,8 +134,10 @@ class UseClass {
 
 class UseFactory {
   constructor(readonly msg: string) {}
-  static ɵprov =
-      ɵɵngDeclareInjectable({type: UseFactory, useFactory: () => new UseFactory('from factory')});
+  static ɵprov = ɵɵngDeclareInjectable({
+    type: UseFactory,
+    useFactory: () => new UseFactory('from factory'),
+  });
 }
 
 class UseValue {
@@ -138,8 +153,11 @@ class UseExisting {
 
 class DependingClass {
   constructor(readonly testClass: UseClass) {}
-  static ɵprov = ɵɵngDeclareInjectable(
-      {type: DependingClass, useClass: DependingClass, deps: [{token: UseClass}]});
+  static ɵprov = ɵɵngDeclareInjectable({
+    type: DependingClass,
+    useClass: DependingClass,
+    deps: [{token: UseClass}],
+  });
 }
 
 class DependingFactory {
@@ -147,7 +165,7 @@ class DependingFactory {
   static ɵprov = ɵɵngDeclareInjectable({
     type: DependingFactory,
     useFactory: (dep: UseClass) => new DependingFactory(dep),
-    deps: [{token: UseClass}]
+    deps: [{token: UseClass}],
   });
 }
 
diff --git a/packages/core/test/render3/jit/declare_injector_spec.ts b/packages/core/test/render3/jit/declare_injector_spec.ts
index f7bdbad87afb3..83d20f11e38ee 100644
--- a/packages/core/test/render3/jit/declare_injector_spec.ts
+++ b/packages/core/test/render3/jit/declare_injector_spec.ts
@@ -21,9 +21,9 @@ describe('Injector declaration jit compilation', () => {
     const TestToken = new InjectionToken('TestToken');
     const testTokenValue = {};
     const def = ɵɵngDeclareInjector({
-                  type: TestClass,
-                  providers: [OtherClass, {provide: TestToken, useValue: testTokenValue}]
-                }) as ɵɵInjectorDef<TestClass>;
+      type: TestClass,
+      providers: [OtherClass, {provide: TestToken, useValue: testTokenValue}],
+    }) as ɵɵInjectorDef<TestClass>;
 
     expect(def.providers).toEqual([OtherClass, {provide: TestToken, useValue: testTokenValue}]);
     expect(def.imports).toEqual([]);
@@ -31,8 +31,10 @@ describe('Injector declaration jit compilation', () => {
 
   it('should compile an Injector declaration with imports', () => {
     const OtherInjector: any = {};
-    const def = ɵɵngDeclareInjector({type: TestClass, imports: [OtherInjector]}) as
-        ɵɵInjectorDef<TestClass>;
+    const def = ɵɵngDeclareInjector({
+      type: TestClass,
+      imports: [OtherInjector],
+    }) as ɵɵInjectorDef<TestClass>;
 
     expect(def.providers).toEqual([]);
     expect(def.imports).toEqual([OtherInjector]);
diff --git a/packages/core/test/render3/jit/declare_ng_module_spec.ts b/packages/core/test/render3/jit/declare_ng_module_spec.ts
index a15f0671d0486..f90832c87f053 100644
--- a/packages/core/test/render3/jit/declare_ng_module_spec.ts
+++ b/packages/core/test/render3/jit/declare_ng_module_spec.ts
@@ -6,7 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NO_ERRORS_SCHEMA, SchemaMetadata, Type, ɵNgModuleDef, ɵɵngDeclareNgModule} from '@angular/core';
+import {
+  NO_ERRORS_SCHEMA,
+  SchemaMetadata,
+  Type,
+  ɵNgModuleDef,
+  ɵɵngDeclareNgModule,
+} from '@angular/core';
 
 describe('NgModule declaration jit compilation', () => {
   it('should compile a minimal NgModule declaration', () => {
@@ -15,58 +21,75 @@ describe('NgModule declaration jit compilation', () => {
   });
 
   it('should compile an NgModule declaration with bootstrap classes', () => {
-    const def = ɵɵngDeclareNgModule({type: TestClass, bootstrap: [TestComponent]}) as
-        ɵNgModuleDef<TestClass>;
+    const def = ɵɵngDeclareNgModule({
+      type: TestClass,
+      bootstrap: [TestComponent],
+    }) as ɵNgModuleDef<TestClass>;
     expectNgModuleDef(def, {bootstrap: [TestComponent]});
   });
 
   it('should compile an NgModule declaration with forward referenced bootstrap classes', () => {
-    const def = ɵɵngDeclareNgModule({type: TestClass, bootstrap: () => [ForwardRef]}) as
-        ɵNgModuleDef<TestClass>;
+    const def = ɵɵngDeclareNgModule({
+      type: TestClass,
+      bootstrap: () => [ForwardRef],
+    }) as ɵNgModuleDef<TestClass>;
     class ForwardRef {}
     expectNgModuleDef(def, {bootstrap: [ForwardRef]});
   });
 
   it('should compile an NgModule declaration with declarations classes', () => {
-    const def = ɵɵngDeclareNgModule({type: TestClass, declarations: [TestComponent]}) as
-        ɵNgModuleDef<TestClass>;
+    const def = ɵɵngDeclareNgModule({
+      type: TestClass,
+      declarations: [TestComponent],
+    }) as ɵNgModuleDef<TestClass>;
     expectNgModuleDef(def, {declarations: [TestComponent]});
   });
 
   it('should compile an NgModule declaration with forward referenced declarations classes', () => {
-    const def = ɵɵngDeclareNgModule({type: TestClass, declarations: () => [TestComponent]}) as
-        ɵNgModuleDef<TestClass>;
+    const def = ɵɵngDeclareNgModule({
+      type: TestClass,
+      declarations: () => [TestComponent],
+    }) as ɵNgModuleDef<TestClass>;
     expectNgModuleDef(def, {declarations: [TestComponent]});
   });
 
   it('should compile an NgModule declaration with imports classes', () => {
-    const def =
-        ɵɵngDeclareNgModule({type: TestClass, imports: [TestModule]}) as ɵNgModuleDef<TestClass>;
+    const def = ɵɵngDeclareNgModule({
+      type: TestClass,
+      imports: [TestModule],
+    }) as ɵNgModuleDef<TestClass>;
     expectNgModuleDef(def, {imports: [TestModule]});
   });
 
   it('should compile an NgModule declaration with forward referenced imports classes', () => {
-    const def = ɵɵngDeclareNgModule({type: TestClass, imports: () => [TestModule]}) as
-        ɵNgModuleDef<TestClass>;
+    const def = ɵɵngDeclareNgModule({
+      type: TestClass,
+      imports: () => [TestModule],
+    }) as ɵNgModuleDef<TestClass>;
     expectNgModuleDef(def, {imports: [TestModule]});
   });
 
   it('should compile an NgModule declaration with exports classes', () => {
-    const def = ɵɵngDeclareNgModule({type: TestClass, exports: [TestComponent, TestModule]}) as
-        ɵNgModuleDef<TestClass>;
+    const def = ɵɵngDeclareNgModule({
+      type: TestClass,
+      exports: [TestComponent, TestModule],
+    }) as ɵNgModuleDef<TestClass>;
     expectNgModuleDef(def, {exports: [TestComponent, TestModule]});
   });
 
   it('should compile an NgModule declaration with forward referenced exports classes', () => {
-    const def =
-        ɵɵngDeclareNgModule({type: TestClass, exports: () => [TestComponent, TestModule]}) as
-        ɵNgModuleDef<TestClass>;
+    const def = ɵɵngDeclareNgModule({
+      type: TestClass,
+      exports: () => [TestComponent, TestModule],
+    }) as ɵNgModuleDef<TestClass>;
     expectNgModuleDef(def, {exports: [TestComponent, TestModule]});
   });
 
   it('should compile an NgModule declaration with schemas', () => {
-    const def = ɵɵngDeclareNgModule({type: TestClass, schemas: [NO_ERRORS_SCHEMA]}) as
-        ɵNgModuleDef<TestClass>;
+    const def = ɵɵngDeclareNgModule({
+      type: TestClass,
+      schemas: [NO_ERRORS_SCHEMA],
+    }) as ɵNgModuleDef<TestClass>;
     expectNgModuleDef(def, {schemas: [NO_ERRORS_SCHEMA]});
   });
 
@@ -82,7 +105,9 @@ class TestComponent {}
 class TestModule {}
 
 type NgModuleDefExpectations = jasmine.Expected<{
-  schemas: SchemaMetadata[] | null; id: string | null; bootstrap: Type<unknown>[];
+  schemas: SchemaMetadata[] | null;
+  id: string | null;
+  bootstrap: Type<unknown>[];
   declarations: Type<unknown>[];
   imports: Type<unknown>[];
   exports: Type<unknown>[];
@@ -94,7 +119,9 @@ type NgModuleDefExpectations = jasmine.Expected<{
  * default value.
  */
 function expectNgModuleDef(
-    actual: ɵNgModuleDef<unknown>, expected: Partial<NgModuleDefExpectations>): void {
+  actual: ɵNgModuleDef<unknown>,
+  expected: Partial<NgModuleDefExpectations>,
+): void {
   const expectation: NgModuleDefExpectations = {
     bootstrap: [],
     declarations: [],
@@ -114,6 +141,6 @@ function expectNgModuleDef(
   expect(actual.id).toEqual(expectation.id);
 }
 
-function unwrap(values: Type<any>[]|(() => Type<any>[])): Type<any>[] {
+function unwrap(values: Type<any>[] | (() => Type<any>[])): Type<any>[] {
   return typeof values === 'function' ? values() : values;
 }
diff --git a/packages/core/test/render3/jit/directive_spec.ts b/packages/core/test/render3/jit/directive_spec.ts
index 4ab01109457ce..ac4309b46ef57 100644
--- a/packages/core/test/render3/jit/directive_spec.ts
+++ b/packages/core/test/render3/jit/directive_spec.ts
@@ -8,7 +8,11 @@
 
 import {Directive, HostListener, Input} from '@angular/core';
 
-import {convertToR3QueryMetadata, directiveMetadata, extendsDirectlyFromObject} from '../../../src/render3/jit/directive';
+import {
+  convertToR3QueryMetadata,
+  directiveMetadata,
+  extendsDirectlyFromObject,
+} from '../../../src/render3/jit/directive';
 import {setClassMetadata} from '../../../src/render3/metadata';
 
 describe('jit directive helper functions', () => {
@@ -20,7 +24,7 @@ describe('jit directive helper functions', () => {
     // Inheritance Example using Function
     const Parent5 = function Parent5() {} as any as {new (): {}};
     const Child5 = function Child5() {} as any as {new (): {}};
-    Child5.prototype = new Parent5;
+    Child5.prototype = new Parent5();
     Child5.prototype.constructor = Child5;
 
     it('should correctly behave with instanceof', () => {
@@ -44,15 +48,17 @@ describe('jit directive helper functions', () => {
 
   describe('convertToR3QueryMetadata', () => {
     it('should convert decorator with a single string selector', () => {
-      expect(convertToR3QueryMetadata('propName', {
-        selector: 'localRef',
-        descendants: false,
-        first: false,
-        isViewQuery: false,
-        read: undefined,
-        static: false,
-        emitDistinctChangesOnly: false,
-      })).toEqual({
+      expect(
+        convertToR3QueryMetadata('propName', {
+          selector: 'localRef',
+          descendants: false,
+          first: false,
+          isViewQuery: false,
+          read: undefined,
+          static: false,
+          emitDistinctChangesOnly: false,
+        }),
+      ).toEqual({
         propertyName: 'propName',
         predicate: ['localRef'],
         descendants: false,
@@ -65,15 +71,17 @@ describe('jit directive helper functions', () => {
     });
 
     it('should convert decorator with multiple string selectors', () => {
-      expect(convertToR3QueryMetadata('propName', {
-        selector: 'foo, bar,baz',
-        descendants: true,
-        first: true,
-        isViewQuery: true,
-        read: undefined,
-        static: false,
-        emitDistinctChangesOnly: false,
-      })).toEqual({
+      expect(
+        convertToR3QueryMetadata('propName', {
+          selector: 'foo, bar,baz',
+          descendants: true,
+          first: true,
+          isViewQuery: true,
+          read: undefined,
+          static: false,
+          emitDistinctChangesOnly: false,
+        }),
+      ).toEqual({
         propertyName: 'propName',
         predicate: ['foo', 'bar', 'baz'],
         descendants: true,
@@ -106,9 +114,9 @@ describe('jit directive helper functions', () => {
   describe('directiveMetadata', () => {
     it('should not inherit propMetadata from super class', () => {
       class SuperDirective {}
-      setClassMetadata(
-          SuperDirective, [{type: Directive, args: []}], null,
-          {handleClick: [{type: HostListener, args: ['click']}]});
+      setClassMetadata(SuperDirective, [{type: Directive, args: []}], null, {
+        handleClick: [{type: HostListener, args: ['click']}],
+      });
 
       class SubDirective extends SuperDirective {}
       setClassMetadata(SubDirective, [{type: Directive, args: []}], null, null);
@@ -119,9 +127,9 @@ describe('jit directive helper functions', () => {
 
     it('should not inherit propMetadata from grand super class', () => {
       class SuperSuperDirective {}
-      setClassMetadata(
-          SuperSuperDirective, [{type: Directive, args: []}], null,
-          {handleClick: [{type: HostListener, args: ['click']}]});
+      setClassMetadata(SuperSuperDirective, [{type: Directive, args: []}], null, {
+        handleClick: [{type: HostListener, args: ['click']}],
+      });
 
       class SuperDirective {}
       setClassMetadata(SuperDirective, [{type: Directive, args: []}], null, null);
@@ -135,27 +143,25 @@ describe('jit directive helper functions', () => {
       expect(directiveMetadata(SubDirective, {}).propMetadata['handleClick']).toBeFalsy();
     });
 
-    it('should not inherit propMetadata from super class when sub class has its own propMetadata',
-       () => {
-         class SuperDirective {}
-         setClassMetadata(SuperDirective, [{type: Directive}], null, {
-           someInput: [{type: Input}],
-           handleClick: [{type: HostListener, args: ['click', ['$event']]}]
-         });
+    it('should not inherit propMetadata from super class when sub class has its own propMetadata', () => {
+      class SuperDirective {}
+      setClassMetadata(SuperDirective, [{type: Directive}], null, {
+        someInput: [{type: Input}],
+        handleClick: [{type: HostListener, args: ['click', ['$event']]}],
+      });
 
-         class SubDirective extends SuperDirective {}
-         setClassMetadata(
-             SubDirective, [{type: Directive}], null, {someOtherInput: [{type: Input}]});
+      class SubDirective extends SuperDirective {}
+      setClassMetadata(SubDirective, [{type: Directive}], null, {someOtherInput: [{type: Input}]});
 
-         const superPropMetadata = directiveMetadata(SuperDirective, {}).propMetadata;
-         const subPropMetadata = directiveMetadata(SubDirective, {}).propMetadata;
+      const superPropMetadata = directiveMetadata(SuperDirective, {}).propMetadata;
+      const subPropMetadata = directiveMetadata(SubDirective, {}).propMetadata;
 
-         expect(superPropMetadata['handleClick']).toBeTruthy();
-         expect(superPropMetadata['someInput']).toBeTruthy();
+      expect(superPropMetadata['handleClick']).toBeTruthy();
+      expect(superPropMetadata['someInput']).toBeTruthy();
 
-         expect(subPropMetadata['handleClick']).toBeFalsy();
-         expect(subPropMetadata['someInput']).toBeFalsy();
-         expect(subPropMetadata['someOtherInput']).toBeTruthy();
-       });
+      expect(subPropMetadata['handleClick']).toBeFalsy();
+      expect(subPropMetadata['someInput']).toBeFalsy();
+      expect(subPropMetadata['someOtherInput']).toBeTruthy();
+    });
   });
 });
diff --git a/packages/core/test/render3/jit/matcher.ts b/packages/core/test/render3/jit/matcher.ts
index f179347f96997..37243ca2f6f36 100644
--- a/packages/core/test/render3/jit/matcher.ts
+++ b/packages/core/test/render3/jit/matcher.ts
@@ -9,11 +9,12 @@
 /**
  * Jasmine matcher to verify that a function contains the provided code fragments.
  */
-export function functionContaining(expectedFragments: Array<string|RegExp>):
-    jasmine.AsymmetricMatcher<Function> {
-  let _actual: Function|null = null;
+export function functionContaining(
+  expectedFragments: Array<string | RegExp>,
+): jasmine.AsymmetricMatcher<Function> {
+  let _actual: Function | null = null;
 
-  const matches = (code: string, fragment: string|RegExp): boolean => {
+  const matches = (code: string, fragment: string | RegExp): boolean => {
     if (typeof fragment === 'string') {
       return code.includes(fragment);
     } else {
@@ -38,19 +39,21 @@ export function functionContaining(expectedFragments: Array<string|RegExp>):
     },
     jasmineToString(pp: (value: any) => string): string {
       if (typeof _actual !== 'function') {
-        return `Expected function to contain code fragments ${pp(expectedFragments)} but got ${
-            pp(_actual)}`;
+        return `Expected function to contain code fragments ${pp(expectedFragments)} but got ${pp(
+          _actual,
+        )}`;
       }
       const errors: string[] = [];
       const code = _actual.toString();
       errors.push(
-          `The actual function with code:\n${code}\n\ndid not contain the following fragments:`);
+        `The actual function with code:\n${code}\n\ndid not contain the following fragments:`,
+      );
       for (const fragment of expectedFragments) {
         if (!matches(code, fragment)) {
           errors.push(`- ${fragment}`);
         }
       }
       return errors.join('\n');
-    }
+    },
   };
 }
diff --git a/packages/core/test/render3/jit_environment_spec.ts b/packages/core/test/render3/jit_environment_spec.ts
index b1bf6ed669465..972fecaf1ecdc 100644
--- a/packages/core/test/render3/jit_environment_spec.ts
+++ b/packages/core/test/render3/jit_environment_spec.ts
@@ -62,23 +62,29 @@ describe('r3 jit environment', () => {
   // in JIT mode.
   it('should support all r3 symbols', () => {
     Object
-        // Map over the static properties of Identifiers.
-        .values(Identifiers)
-        // A few such properties are string constants. Ignore them, and focus on ExternalReferences.
-        .filter(isExternalReference)
-        // Some references are to interface types. Only take properties which have runtime values.
-        .filter(
-            sym => !INTERFACE_EXCEPTIONS.has(sym.name) && !AOT_ONLY.has(sym.name) &&
-                !PARTIAL_ONLY.has(sym.name))
-        .forEach(sym => {
-          // Assert that angularCoreEnv has a reference to the runtime symbol.
-          expect(angularCoreEnv.hasOwnProperty(sym.name))
-              .toBe(true, `Missing symbol ${sym.name} in render3/jit/environment`);
-        });
+      // Map over the static properties of Identifiers.
+      .values(Identifiers)
+      // A few such properties are string constants. Ignore them, and focus on ExternalReferences.
+      .filter(isExternalReference)
+      // Some references are to interface types. Only take properties which have runtime values.
+      .filter(
+        (sym) =>
+          !INTERFACE_EXCEPTIONS.has(sym.name) &&
+          !AOT_ONLY.has(sym.name) &&
+          !PARTIAL_ONLY.has(sym.name),
+      )
+      .forEach((sym) => {
+        // Assert that angularCoreEnv has a reference to the runtime symbol.
+        expect(angularCoreEnv.hasOwnProperty(sym.name)).toBe(
+          true,
+          `Missing symbol ${sym.name} in render3/jit/environment`,
+        );
+      });
   });
 });
 
-function isExternalReference(sym: ExternalReference|string): sym is ExternalReference&
-    {name: string} {
+function isExternalReference(
+  sym: ExternalReference | string,
+): sym is ExternalReference & {name: string} {
   return typeof sym === 'object' && sym.name !== null && sym.moduleName !== null;
 }
diff --git a/packages/core/test/render3/list_reconciliation_spec.ts b/packages/core/test/render3/list_reconciliation_spec.ts
index 6a8c6816b7272..048d6a220258b 100644
--- a/packages/core/test/render3/list_reconciliation_spec.ts
+++ b/packages/core/test/render3/list_reconciliation_spec.ts
@@ -35,7 +35,9 @@ class LoggingLiveCollection<T, V> extends LiveCollection<T, V> {
   private logs: any[][] = [];
 
   constructor(
-      private arr: T[], private itemFactory: ItemAdapter<T, V> = new NoopItemFactory<T, V>()) {
+    private arr: T[],
+    private itemFactory: ItemAdapter<T, V> = new NoopItemFactory<T, V>(),
+  ) {
     super();
   }
 
@@ -109,7 +111,10 @@ describe('list reconciliation', () => {
       reconcile(pc, ['a', 'b', 'c'], trackByIdentity);
 
       expect(pc.getCollection()).toEqual(['a', 'b', 'c']);
-      expect(pc.getLogs()).toEqual([['create', 2, 'c'], ['attach', 2, 'c']]);
+      expect(pc.getLogs()).toEqual([
+        ['create', 2, 'c'],
+        ['attach', 2, 'c'],
+      ]);
     });
 
     it('should swap items', () => {
@@ -148,7 +153,6 @@ describe('list reconciliation', () => {
       ]);
     });
 
-
     it('should delete items in the middle', () => {
       const pc = new LoggingLiveCollection(['a', 'x', 'b', 'c']);
       reconcile(pc, ['a', 'b', 'c'], trackByIdentity);
@@ -262,8 +266,12 @@ describe('list reconciliation', () => {
 
     it('should create / reuse duplicated items as needed', () => {
       const trackByKey = (idx: number, item: {k: number}) => item.k;
-      const pc =
-          new LoggingLiveCollection<{k: number}, {k: number}>([{k: 1}, {k: 1}, {k: 2}, {k: 3}]);
+      const pc = new LoggingLiveCollection<{k: number}, {k: number}>([
+        {k: 1},
+        {k: 1},
+        {k: 2},
+        {k: 3},
+      ]);
       reconcile(pc, [{k: 2}, {k: 3}, {k: 1}, {k: 1}, {k: 1}, {k: 4}], trackByKey);
 
       expect(pc.getCollection()).toEqual([{k: 2}, {k: 3}, {k: 1}, {k: 1}, {k: 1}, {k: 4}]);
@@ -294,7 +302,10 @@ describe('list reconciliation', () => {
       reconcile(pc, new Set(['a', 'b', 'c']), trackByIdentity);
 
       expect(pc.getCollection()).toEqual(['a', 'b', 'c']);
-      expect(pc.getLogs()).toEqual([['create', 2, 'c'], ['attach', 2, 'c']]);
+      expect(pc.getLogs()).toEqual([
+        ['create', 2, 'c'],
+        ['attach', 2, 'c'],
+      ]);
     });
 
     it('should add multiple items in the middle', () => {
@@ -411,14 +422,21 @@ describe('list reconciliation', () => {
 
     it('should update when tracking by key - fast path from the end', () => {
       const pc = new LoggingLiveCollection(
-          [], new RepeaterLikeItemFactory<KeyValueItem<string, string>>());
+        [],
+        new RepeaterLikeItemFactory<KeyValueItem<string, string>>(),
+      );
 
       reconcile(pc, [{k: 'o', v: 'o'}], trackByKey);
-      expect(pc.getCollection()).toEqual([
-        {index: 0, implicit: {k: 'o', v: 'o'}},
-      ]);
+      expect(pc.getCollection()).toEqual([{index: 0, implicit: {k: 'o', v: 'o'}}]);
 
-      reconcile(pc, [{k: 'n', v: 'n'}, {k: 'o', v: 'oo'}], trackByKey);
+      reconcile(
+        pc,
+        [
+          {k: 'n', v: 'n'},
+          {k: 'o', v: 'oo'},
+        ],
+        trackByKey,
+      );
       expect(pc.getCollection()).toEqual([
         {index: 0, implicit: {k: 'n', v: 'n'}},
         // TODO: this scenario shows situation where the index is not correctly updated
@@ -428,60 +446,73 @@ describe('list reconciliation', () => {
 
     it('should update when swapping on the fast path', () => {
       const pc = new LoggingLiveCollection(
-          [], new RepeaterLikeItemFactory<KeyValueItem<number, string>>());
-
-      reconcile(pc, [{k: 0, v: 'a'}, {k: 1, v: 'b'}, {k: 2, v: 'c'}], trackByKey as any);
-      expect(pc.getCollection())
-          .toEqual(
-              [
-                {index: 0, implicit: {k: 0, v: 'a'}},
-                {index: 1, implicit: {k: 1, v: 'b'}},
-                {index: 2, implicit: {k: 2, v: 'c'}},
-              ],
-          );
-
-      reconcile(pc, [{k: 2, v: 'cc'}, {k: 1, v: 'bb'}, {k: 0, v: 'aa'}], trackByKey as any);
-      expect(pc.getCollection())
-          .toEqual(
-              [
-                {index: 0, implicit: {k: 2, v: 'cc'}},
-                {index: 1, implicit: {k: 1, v: 'bb'}},
-                {index: 2, implicit: {k: 0, v: 'aa'}},
-              ],
-          );
+        [],
+        new RepeaterLikeItemFactory<KeyValueItem<number, string>>(),
+      );
+
+      reconcile(
+        pc,
+        [
+          {k: 0, v: 'a'},
+          {k: 1, v: 'b'},
+          {k: 2, v: 'c'},
+        ],
+        trackByKey as any,
+      );
+      expect(pc.getCollection()).toEqual([
+        {index: 0, implicit: {k: 0, v: 'a'}},
+        {index: 1, implicit: {k: 1, v: 'b'}},
+        {index: 2, implicit: {k: 2, v: 'c'}},
+      ]);
+
+      reconcile(
+        pc,
+        [
+          {k: 2, v: 'cc'},
+          {k: 1, v: 'bb'},
+          {k: 0, v: 'aa'},
+        ],
+        trackByKey as any,
+      );
+      expect(pc.getCollection()).toEqual([
+        {index: 0, implicit: {k: 2, v: 'cc'}},
+        {index: 1, implicit: {k: 1, v: 'bb'}},
+        {index: 2, implicit: {k: 0, v: 'aa'}},
+      ]);
     });
 
     it('should update when moving forward on the fast path', () => {
       const pc = new LoggingLiveCollection(
-          [], new RepeaterLikeItemFactory<KeyValueItem<number, string>>());
+        [],
+        new RepeaterLikeItemFactory<KeyValueItem<number, string>>(),
+      );
       reconcile(
-          pc,
-          [
-            {k: 0, v: 'a'},
-            {k: 1, v: 'b'},
-            {k: 2, v: 'c'},
-            {k: 3, v: 'd'},
-          ],
-          trackByKey as any);
-      expect(pc.getCollection())
-          .toEqual(
-              [
-                {index: 0, implicit: {k: 0, v: 'a'}},
-                {index: 1, implicit: {k: 1, v: 'b'}},
-                {index: 2, implicit: {k: 2, v: 'c'}},
-                {index: 3, implicit: {k: 3, v: 'd'}},
-              ],
-          );
+        pc,
+        [
+          {k: 0, v: 'a'},
+          {k: 1, v: 'b'},
+          {k: 2, v: 'c'},
+          {k: 3, v: 'd'},
+        ],
+        trackByKey as any,
+      );
+      expect(pc.getCollection()).toEqual([
+        {index: 0, implicit: {k: 0, v: 'a'}},
+        {index: 1, implicit: {k: 1, v: 'b'}},
+        {index: 2, implicit: {k: 2, v: 'c'}},
+        {index: 3, implicit: {k: 3, v: 'd'}},
+      ]);
 
       reconcile(
-          pc,
-          [
-            {k: 0, v: 'aa'},
-            {k: 3, v: 'dd'},
-            {k: 1, v: 'bb'},
-            {k: 2, v: 'cc'},
-          ],
-          trackByKey as any);
+        pc,
+        [
+          {k: 0, v: 'aa'},
+          {k: 3, v: 'dd'},
+          {k: 1, v: 'bb'},
+          {k: 2, v: 'cc'},
+        ],
+        trackByKey as any,
+      );
       expect(pc.getCollection()).toEqual([
         {index: 0, implicit: {k: 0, v: 'aa'}},
         {index: 1, implicit: {k: 3, v: 'dd'}},
diff --git a/packages/core/test/render3/matchers.ts b/packages/core/test/render3/matchers.ts
index de2d47708dfd3..e4116d7831254 100644
--- a/packages/core/test/render3/matchers.ts
+++ b/packages/core/test/render3/matchers.ts
@@ -12,7 +12,6 @@ import {TView} from '@angular/core/src/render3/interfaces/view';
 
 import {isDOMElement, isDOMText, isTI18n, isTIcu, isTNode, isTView} from './is_shape_of';
 
-
 /**
  * Generic matcher which asserts that an object is of a given shape (`shapePredicate`) and that it
  * contains a subset of properties.
@@ -22,13 +21,15 @@ import {isDOMElement, isDOMText, isTI18n, isTIcu, isTNode, isTView} from './is_s
  * @param expected Expected set of properties to be found on the object.
  */
 export function matchObjectShape<T>(
-    name: string, shapePredicate: (obj: any) => obj is T,
-    expected: Partial<T> = {}): jasmine.AsymmetricMatcher<T> {
-  const matcher = function() {};
+  name: string,
+  shapePredicate: (obj: any) => obj is T,
+  expected: Partial<T> = {},
+): jasmine.AsymmetricMatcher<T> {
+  const matcher = function () {};
   let _actual: any = null;
   let _matcherUtils: jasmine.MatchersUtil = null!;
 
-  matcher.asymmetricMatch = function(actual: any, matcherUtils: jasmine.MatchersUtil) {
+  matcher.asymmetricMatch = function (actual: any, matcherUtils: jasmine.MatchersUtil) {
     _actual = actual;
     _matcherUtils = matcherUtils;
     if (!shapePredicate(actual)) return false;
@@ -39,7 +40,7 @@ export function matchObjectShape<T>(
     }
     return true;
   };
-  matcher.jasmineToString = function(pp: (value: any) => string) {
+  matcher.jasmineToString = function (pp: (value: any) => string) {
     let errors: string[] = [];
     if (!_actual || typeof _actual !== 'object') {
       return `Expecting ${pp(expect)} got ${pp(_actual)}`;
@@ -54,7 +55,6 @@ export function matchObjectShape<T>(
   return matcher;
 }
 
-
 /**
  * Asymmetric matcher which matches a `TView` of a given shape.
  *
@@ -93,7 +93,6 @@ export function matchTNode(expected?: Partial<TNode>): jasmine.AsymmetricMatcher
   return matchObjectShape('TNode', isTNode, expected);
 }
 
-
 /**
  * Asymmetric matcher which matches a `T18n` of a given shape.
  *
@@ -113,7 +112,6 @@ export function matchTI18n(expected?: Partial<TI18n>): jasmine.AsymmetricMatcher
   return matchObjectShape('TI18n', isTI18n, expected);
 }
 
-
 /**
  * Asymmetric matcher which matches a `T1cu` of a given shape.
  *
@@ -133,8 +131,6 @@ export function matchTIcu(expected?: Partial<TIcu>): jasmine.AsymmetricMatcher<T
   return matchObjectShape('TIcu', isTIcu, expected);
 }
 
-
-
 /**
  * Asymmetric matcher which matches a DOM Element.
  *
@@ -152,15 +148,16 @@ export function matchTIcu(expected?: Partial<TIcu>): jasmine.AsymmetricMatcher<T
  * @param expectedAttributes optional DOM element properties.
  */
 export function matchDomElement(
-    expectedTagName: string|undefined = undefined,
-    expectedAttrs: {[key: string]: string|null} = {}): jasmine.AsymmetricMatcher<Element> {
-  const matcher = function() {};
+  expectedTagName: string | undefined = undefined,
+  expectedAttrs: {[key: string]: string | null} = {},
+): jasmine.AsymmetricMatcher<Element> {
+  const matcher = function () {};
   let _actual: any = null;
 
-  matcher.asymmetricMatch = function(actual: any) {
+  matcher.asymmetricMatch = function (actual: any) {
     _actual = actual;
     if (!isDOMElement(actual)) return false;
-    if (expectedTagName && (expectedTagName.toUpperCase() !== actual.tagName.toUpperCase())) {
+    if (expectedTagName && expectedTagName.toUpperCase() !== actual.tagName.toUpperCase()) {
       return false;
     }
     if (expectedAttrs) {
@@ -176,11 +173,13 @@ export function matchDomElement(
     }
     return true;
   };
-  matcher.jasmineToString = function() {
-    let actualStr = isDOMElement(_actual) ? `<${_actual.tagName}${toString(_actual.attributes)}>` :
-                                            JSON.stringify(_actual);
-    let expectedStr = `<${expectedTagName || '*'}${
-        Object.entries(expectedAttrs).map(([key, value]) => ` ${key}=${JSON.stringify(value)}`)}>`;
+  matcher.jasmineToString = function () {
+    let actualStr = isDOMElement(_actual)
+      ? `<${_actual.tagName}${toString(_actual.attributes)}>`
+      : JSON.stringify(_actual);
+    let expectedStr = `<${expectedTagName || '*'}${Object.entries(expectedAttrs).map(
+      ([key, value]) => ` ${key}=${JSON.stringify(value)}`,
+    )}>`;
     return `[${actualStr} != ${expectedStr}]`;
   };
 
@@ -193,7 +192,6 @@ export function matchDomElement(
     return text;
   }
 
-
   return matcher;
 }
 
@@ -212,22 +210,24 @@ export function matchDomElement(
  *
  * @param expectedText optional DOM text.
  */
-export function matchDomText(expectedText: string|undefined = undefined):
-    jasmine.AsymmetricMatcher<Text> {
-  const matcher = function() {};
+export function matchDomText(
+  expectedText: string | undefined = undefined,
+): jasmine.AsymmetricMatcher<Text> {
+  const matcher = function () {};
   let _actual: any = null;
 
-  matcher.asymmetricMatch = function(actual: any) {
+  matcher.asymmetricMatch = function (actual: any) {
     _actual = actual;
     if (!isDOMText(actual)) return false;
-    if (expectedText && (expectedText !== actual.textContent)) {
+    if (expectedText && expectedText !== actual.textContent) {
       return false;
     }
     return true;
   };
-  matcher.jasmineToString = function() {
-    let actualStr = isDOMText(_actual) ? `#TEXT: ${JSON.stringify(_actual.textContent)}` :
-                                         JSON.stringify(_actual);
+  matcher.jasmineToString = function () {
+    let actualStr = isDOMText(_actual)
+      ? `#TEXT: ${JSON.stringify(_actual.textContent)}`
+      : JSON.stringify(_actual);
     let expectedStr = `#TEXT: ${JSON.stringify(expectedText)}`;
     return `[${actualStr} != ${expectedStr}]`;
   };
@@ -235,21 +235,22 @@ export function matchDomText(expectedText: string|undefined = undefined):
   return matcher;
 }
 
-export function matchI18nMutableOpCodes(expectedMutableOpCodes: string[]):
-    jasmine.AsymmetricMatcher<IcuCreateOpCodes> {
-  const matcher = function() {};
+export function matchI18nMutableOpCodes(
+  expectedMutableOpCodes: string[],
+): jasmine.AsymmetricMatcher<IcuCreateOpCodes> {
+  const matcher = function () {};
   let _actual: any = null;
 
-  matcher.asymmetricMatch = function(actual: any, matchersUtil: jasmine.MatchersUtil) {
+  matcher.asymmetricMatch = function (actual: any, matchersUtil: jasmine.MatchersUtil) {
     _actual = actual;
     if (!Array.isArray(actual)) return false;
     const debug = (actual as I18nDebug).debug as undefined | string[];
-    if (expectedMutableOpCodes && (!matchersUtil.equals(debug, expectedMutableOpCodes))) {
+    if (expectedMutableOpCodes && !matchersUtil.equals(debug, expectedMutableOpCodes)) {
       return false;
     }
     return true;
   };
-  matcher.jasmineToString = function() {
+  matcher.jasmineToString = function () {
     const debug = (_actual as I18nDebug).debug as undefined | string[];
     return `[${JSON.stringify(debug)} != ${expectedMutableOpCodes}]`;
   };
diff --git a/packages/core/test/render3/matchers_spec.ts b/packages/core/test/render3/matchers_spec.ts
index 8372645137111..0835580dfebe4 100644
--- a/packages/core/test/render3/matchers_spec.ts
+++ b/packages/core/test/render3/matchers_spec.ts
@@ -41,8 +41,9 @@ describe('render3 matchers', () => {
     it('should produce human readable errors', () => {
       const matcher = matchMyShape({propA: 'different'});
       expect(matcher.asymmetricMatch(myShape, fakeMatcherUtil)).toEqual(false);
-      expect(matcher.jasmineToString!((value: any) => value + ''))
-          .toEqual('\n  property obj.propA to equal different but got value');
+      expect(matcher.jasmineToString!((value: any) => value + '')).toEqual(
+        '\n  property obj.propA to equal different but got value',
+      );
     });
   });
 
@@ -76,8 +77,9 @@ describe('render3 matchers', () => {
     it('should produce human readable error', () => {
       const matcher = matchDomElement('div', {name: 'other'});
       expect(matcher.asymmetricMatch(div, fakeMatcherUtil)).toEqual(false);
-      expect(matcher.jasmineToString!((value: any) => value + ''))
-          .toEqual(`[<DIV name="Name"> != <div name="other">]`);
+      expect(matcher.jasmineToString!((value: any) => value + '')).toEqual(
+        `[<DIV name="Name"> != <div name="other">]`,
+      );
     });
   });
 
@@ -91,8 +93,9 @@ describe('render3 matchers', () => {
     it('should produce human readable error', () => {
       const matcher = matchDomText('other text');
       expect(matcher.asymmetricMatch(text, fakeMatcherUtil)).toEqual(false);
-      expect(matcher.jasmineToString!((value: any) => value + ''))
-          .toEqual(`[#TEXT: "myText" != #TEXT: "other text"]`);
+      expect(matcher.jasmineToString!((value: any) => value + '')).toEqual(
+        `[#TEXT: "myText" != #TEXT: "other text"]`,
+      );
     });
   });
 });
diff --git a/packages/core/test/render3/metadata_spec.ts b/packages/core/test/render3/metadata_spec.ts
index 1ea37a795f208..ab3912b026505 100644
--- a/packages/core/test/render3/metadata_spec.ts
+++ b/packages/core/test/render3/metadata_spec.ts
@@ -60,7 +60,9 @@ describe('render3 setClassMetadata()', () => {
     const Foo = metadataOf(class Foo {});
     Foo.propDecorators = {initial: [{type: 'first'}]};
     setClassMetadata(Foo, null, null, {field: [{type: 'test', args: ['arg']}]});
-    expect(Foo.propDecorators)
-        .toEqual({field: [{type: 'test', args: ['arg']}], initial: [{type: 'first'}]});
+    expect(Foo.propDecorators).toEqual({
+      field: [{type: 'test', args: ['arg']}],
+      initial: [{type: 'first'}],
+    });
   });
 });
diff --git a/packages/core/test/render3/multi_map_spec.ts b/packages/core/test/render3/multi_map_spec.ts
index 316ed8cfd1886..610113a7781e4 100644
--- a/packages/core/test/render3/multi_map_spec.ts
+++ b/packages/core/test/render3/multi_map_spec.ts
@@ -48,7 +48,11 @@ describe('MultiMap', () => {
     const items: string[][] = [];
 
     map.forEach((v, k) => items.push([v, k]));
-    expect(items).toEqual([['v1', 'km'], ['v2', 'km'], ['v', 'ks']]);
+    expect(items).toEqual([
+      ['v1', 'km'],
+      ['v2', 'km'],
+      ['v', 'ks'],
+    ]);
   });
 
   it('should throw upon detecting duplicate values', () => {
diff --git a/packages/core/test/render3/node_selector_matcher_spec.ts b/packages/core/test/render3/node_selector_matcher_spec.ts
index 14e8e902682b3..d4e35a06c0424 100644
--- a/packages/core/test/render3/node_selector_matcher_spec.ts
+++ b/packages/core/test/render3/node_selector_matcher_spec.ts
@@ -11,29 +11,41 @@ import {createTNode} from '@angular/core/src/render3/instructions/shared';
 import {AttributeMarker} from '../../src/render3/interfaces/attribute_marker';
 import {TAttributes, TNode, TNodeType} from '../../src/render3/interfaces/node';
 import {CssSelector, CssSelectorList, SelectorFlags} from '../../src/render3/interfaces/projection';
-import {extractAttrsAndClassesFromSelector, getProjectAsAttrValue, isNodeMatchingSelector, isNodeMatchingSelectorList, stringifyCSSSelectorList} from '../../src/render3/node_selector_matcher';
-
-function testLStaticData(tagName: string, attrs: TAttributes|null): TNode {
+import {
+  extractAttrsAndClassesFromSelector,
+  getProjectAsAttrValue,
+  isNodeMatchingSelector,
+  isNodeMatchingSelectorList,
+  stringifyCSSSelectorList,
+} from '../../src/render3/node_selector_matcher';
+
+function testLStaticData(tagName: string, attrs: TAttributes | null): TNode {
   return createTNode(null!, null, TNodeType.Element, 0, tagName, attrs);
 }
 
 describe('css selector matching', () => {
   function isMatching(
-      tagName: string, attrsOrTNode: TAttributes|TNode|null, selector: CssSelector): boolean {
-    const tNode = (!attrsOrTNode || Array.isArray(attrsOrTNode)) ?
-        createTNode(null!, null, TNodeType.Element, 0, tagName, attrsOrTNode as TAttributes) :
-        (attrsOrTNode as TNode);
+    tagName: string,
+    attrsOrTNode: TAttributes | TNode | null,
+    selector: CssSelector,
+  ): boolean {
+    const tNode =
+      !attrsOrTNode || Array.isArray(attrsOrTNode)
+        ? createTNode(null!, null, TNodeType.Element, 0, tagName, attrsOrTNode as TAttributes)
+        : (attrsOrTNode as TNode);
     return isNodeMatchingSelector(tNode, selector, true);
   }
 
   describe('isNodeMatchingSimpleSelector', () => {
     describe('element matching', () => {
       it('should match element name only if names are the same', () => {
-        expect(isMatching('span', null, ['span']))
-            .toBeTruthy(`Selector 'span' should match <span>`);
+        expect(isMatching('span', null, ['span'])).toBeTruthy(
+          `Selector 'span' should match <span>`,
+        );
 
-        expect(isMatching('span', null, ['div']))
-            .toBeFalsy(`Selector 'div' should NOT match <span>`);
+        expect(isMatching('span', null, ['div'])).toBeFalsy(
+          `Selector 'div' should NOT match <span>`,
+        );
       });
 
       /**
@@ -41,10 +53,12 @@ describe('css selector matching', () => {
        * and in a selector.
        */
       it('should match element name case-sensitively', () => {
-        expect(isMatching('span', null, ['SPAN']))
-            .toBeFalsy(`Selector 'SPAN' should NOT match <span>`);
-        expect(isMatching('SPAN', null, ['span']))
-            .toBeFalsy(`Selector 'span' should NOT match <SPAN>'`);
+        expect(isMatching('span', null, ['SPAN'])).toBeFalsy(
+          `Selector 'SPAN' should NOT match <span>`,
+        );
+        expect(isMatching('SPAN', null, ['span'])).toBeFalsy(
+          `Selector 'span' should NOT match <SPAN>'`,
+        );
       });
 
       it('should never match empty string selector', () => {
@@ -56,64 +70,66 @@ describe('css selector matching', () => {
       // TODO: do we need to differentiate no value and empty value? that is: title vs. title="" ?
 
       it('should match single attribute without value', () => {
-        expect(isMatching('span', ['title', ''], [
-          '', 'title', ''
-        ])).toBeTruthy(`Selector '[title]' should match <span title>`);
+        expect(isMatching('span', ['title', ''], ['', 'title', ''])).toBeTruthy(
+          `Selector '[title]' should match <span title>`,
+        );
 
-        expect(isMatching('span', ['title', 'my title'], [
-          '', 'title', ''
-        ])).toBeTruthy(`Selector '[title]' should match <span title="my title">`);
+        expect(isMatching('span', ['title', 'my title'], ['', 'title', ''])).toBeTruthy(
+          `Selector '[title]' should match <span title="my title">`,
+        );
 
-        expect(isMatching('span', ['name', 'name'], [
-          '', 'title', ''
-        ])).toBeFalsy(`Selector '[title]' should NOT match <span name="name">`);
+        expect(isMatching('span', ['name', 'name'], ['', 'title', ''])).toBeFalsy(
+          `Selector '[title]' should NOT match <span name="name">`,
+        );
 
-        expect(isMatching('span', null, [
-          '', 'title', ''
-        ])).toBeFalsy(`Selector '[title]' should NOT match <span>`);
+        expect(isMatching('span', null, ['', 'title', ''])).toBeFalsy(
+          `Selector '[title]' should NOT match <span>`,
+        );
 
-        expect(isMatching('span', ['title', ''], [
-          '', 'other', ''
-        ])).toBeFalsy(`Selector '[other]' should NOT match <span title="">'`);
+        expect(isMatching('span', ['title', ''], ['', 'other', ''])).toBeFalsy(
+          `Selector '[other]' should NOT match <span title="">'`,
+        );
       });
 
       // TODO: this case will not work, need more discussion
       // https://github.com/angular/angular/pull/34625#discussion_r401791275
       xit('should match namespaced attributes', () => {
-        expect(isMatching(
-                   'span', [AttributeMarker.NamespaceURI, 'http://some/uri', 'title', 'name'],
-                   ['', 'title', '']))
-            .toBeTruthy();
+        expect(
+          isMatching(
+            'span',
+            [AttributeMarker.NamespaceURI, 'http://some/uri', 'title', 'name'],
+            ['', 'title', ''],
+          ),
+        ).toBeTruthy();
       });
 
-      it('should match selector with one attribute without value when element has several attributes',
-         () => {
-           expect(isMatching('span', ['id', 'my_id', 'title', 'test_title'], [
-             '', 'title', ''
-           ])).toBeTruthy(`Selector '[title]' should match <span id="my_id" title="test_title">`);
-         });
+      it('should match selector with one attribute without value when element has several attributes', () => {
+        expect(
+          isMatching('span', ['id', 'my_id', 'title', 'test_title'], ['', 'title', '']),
+        ).toBeTruthy(`Selector '[title]' should match <span id="my_id" title="test_title">`);
+      });
 
       /**
        * We assume that compiler will lower-case all selectors when generating code
        */
       it('should match single attribute with value', () => {
-        expect(isMatching('span', ['title', 'My Title'], [
-          '', 'title', 'my title'
-        ])).toBeTruthy(`Selector '[title="My Title"]' should match <span title="My Title">'`);
+        expect(isMatching('span', ['title', 'My Title'], ['', 'title', 'my title'])).toBeTruthy(
+          `Selector '[title="My Title"]' should match <span title="My Title">'`,
+        );
 
-        expect(isMatching('span', ['title', 'My Title'], [
-          '', 'title', 'other title'
-        ])).toBeFalsy(`Selector '[title="Other Title"]' should NOT match <span title="My Title">`);
+        expect(isMatching('span', ['title', 'My Title'], ['', 'title', 'other title'])).toBeFalsy(
+          `Selector '[title="Other Title"]' should NOT match <span title="My Title">`,
+        );
       });
 
       it('should not match attribute when element name does not match', () => {
-        expect(isMatching('span', ['title', 'My Title'], [
-          'div', 'title', ''
-        ])).toBeFalsy(`Selector 'div[title]' should NOT match <span title="My Title">`);
+        expect(isMatching('span', ['title', 'My Title'], ['div', 'title', ''])).toBeFalsy(
+          `Selector 'div[title]' should NOT match <span title="My Title">`,
+        );
 
-        expect(isMatching('span', ['title', 'My Title'], [
-          'div', 'title', 'my title'
-        ])).toBeFalsy(`Selector 'div[title="My Title"]' should NOT match <span title="My Title">`);
+        expect(isMatching('span', ['title', 'My Title'], ['div', 'title', 'my title'])).toBeFalsy(
+          `Selector 'div[title="My Title"]' should NOT match <span title="My Title">`,
+        );
       });
 
       it('should match multiple attributes', () => {
@@ -121,17 +137,19 @@ describe('css selector matching', () => {
         const selector = ['', 'title', 'title', 'name', 'name'];
 
         // <span title="title" name="name">
-        expect(isMatching('span', ['title', 'title', 'name', 'name'], selector))
-            .toBeTruthy(
-                `Selector '[title=title][name=name]' should NOT match <span title="title" name="name">`);
+        expect(isMatching('span', ['title', 'title', 'name', 'name'], selector)).toBeTruthy(
+          `Selector '[title=title][name=name]' should NOT match <span title="title" name="name">`,
+        );
 
         // <span title="title">
-        expect(isMatching('span', ['title', 'title'], selector))
-            .toBeFalsy(`Selector '[title=title][name=name]' should NOT match <span title="title">`);
+        expect(isMatching('span', ['title', 'title'], selector)).toBeFalsy(
+          `Selector '[title=title][name=name]' should NOT match <span title="title">`,
+        );
 
         // <span name="name">
-        expect(isMatching('span', ['name', 'name'], selector))
-            .toBeFalsy(`Selector '[title=title][name=name]' should NOT match <span name="name">`);
+        expect(isMatching('span', ['name', 'name'], selector)).toBeFalsy(
+          `Selector '[title=title][name=name]' should NOT match <span name="name">`,
+        );
       });
 
       it('should handle attribute values that match attribute names', () => {
@@ -139,12 +157,14 @@ describe('css selector matching', () => {
         const selector = ['', 'name', 'name'];
 
         // <span title="name">
-        expect(isMatching('span', ['title', 'name'], selector))
-            .toBeFalsy(`Selector '[name=name]' should NOT match <span title="name">`);
+        expect(isMatching('span', ['title', 'name'], selector)).toBeFalsy(
+          `Selector '[name=name]' should NOT match <span title="name">`,
+        );
 
         // <span title="name" name="name">
-        expect(isMatching('span', ['title', 'name', 'name', 'name'], selector))
-            .toBeTruthy(`Selector '[name=name]' should match <span title="name" name="name">`);
+        expect(isMatching('span', ['title', 'name', 'name', 'name'], selector)).toBeTruthy(
+          `Selector '[name=name]' should match <span title="name" name="name">`,
+        );
       });
 
       /**
@@ -152,146 +172,161 @@ describe('css selector matching', () => {
        * code
        */
       it('should match attribute name case-sensitively', () => {
-        expect(isMatching('span', ['foo', ''], [
-          '', 'foo', ''
-        ])).toBeTruthy(`Selector '[foo]' should match <span foo>`);
+        expect(isMatching('span', ['foo', ''], ['', 'foo', ''])).toBeTruthy(
+          `Selector '[foo]' should match <span foo>`,
+        );
 
-        expect(isMatching('span', ['foo', ''], [
-          '', 'Foo', ''
-        ])).toBeFalsy(`Selector '[Foo]' should NOT match <span foo>`);
+        expect(isMatching('span', ['foo', ''], ['', 'Foo', ''])).toBeFalsy(
+          `Selector '[Foo]' should NOT match <span foo>`,
+        );
       });
 
       it('should match attribute values case-insensitively', () => {
-        expect(isMatching('span', ['foo', 'Bar'], [
-          '', 'foo', 'bar'
-        ])).toBeTruthy(`Selector '[foo="bar"]' should match <span foo="Bar">`);
+        expect(isMatching('span', ['foo', 'Bar'], ['', 'foo', 'bar'])).toBeTruthy(
+          `Selector '[foo="bar"]' should match <span foo="Bar">`,
+        );
       });
 
       it('should match class as an attribute', () => {
-        expect(isMatching('span', ['class', 'foo'], [
-          '', 'class', ''
-        ])).toBeTruthy(`Selector '[class]' should match <span class="foo">`);
+        expect(isMatching('span', ['class', 'foo'], ['', 'class', ''])).toBeTruthy(
+          `Selector '[class]' should match <span class="foo">`,
+        );
 
-        expect(isMatching('span', ['class', 'foo'], [
-          '', 'class', 'foo'
-        ])).toBeTruthy(`Selector '[class="foo"]' should match <span class="foo">`);
+        expect(isMatching('span', ['class', 'foo'], ['', 'class', 'foo'])).toBeTruthy(
+          `Selector '[class="foo"]' should match <span class="foo">`,
+        );
       });
 
       it('should take optional binding attribute names into account', () => {
-        expect(isMatching('span', [AttributeMarker.Bindings, 'directive'], [
-          '', 'directive', ''
-        ])).toBeTruthy(`Selector '[directive]' should match <span [directive]="exp">`);
+        expect(
+          isMatching('span', [AttributeMarker.Bindings, 'directive'], ['', 'directive', '']),
+        ).toBeTruthy(`Selector '[directive]' should match <span [directive]="exp">`);
+      });
+
+      it('should not match optional binding attribute names if attribute selector has value', () => {
+        expect(
+          isMatching('span', [AttributeMarker.Bindings, 'directive'], ['', 'directive', 'value']),
+        ).toBeFalsy(`Selector '[directive=value]' should not match <span [directive]="exp">`);
       });
 
-      it('should not match optional binding attribute names if attribute selector has value',
-         () => {
-           expect(isMatching('span', [AttributeMarker.Bindings, 'directive'], [
-             '', 'directive', 'value'
-           ])).toBeFalsy(`Selector '[directive=value]' should not match <span [directive]="exp">`);
-         });
-
-      it('should not match optional binding attribute names if attribute selector has value and next name equals to value',
-         () => {
-           expect(isMatching(
-                      'span', [AttributeMarker.Bindings, 'directive', 'value'],
-                      ['', 'directive', 'value']))
-               .toBeFalsy(
-                   `Selector '[directive=value]' should not match <span [directive]="exp" [value]="otherExp">`);
-         });
+      it('should not match optional binding attribute names if attribute selector has value and next name equals to value', () => {
+        expect(
+          isMatching(
+            'span',
+            [AttributeMarker.Bindings, 'directive', 'value'],
+            ['', 'directive', 'value'],
+          ),
+        ).toBeFalsy(
+          `Selector '[directive=value]' should not match <span [directive]="exp" [value]="otherExp">`,
+        );
+      });
 
       it('should match bound attributes that come after classes', () => {
-        expect(isMatching(
-                   'span',
-                   [
-                     AttributeMarker.Classes, 'my-class', 'other-class', AttributeMarker.Bindings,
-                     'title', 'directive'
-                   ],
-                   ['', 'directive', '']))
-            .toBeTruthy(
-                `Selector '[directive]' should match <span class="my-class other-class" [title]="title" [directive]="exp">`);
+        expect(
+          isMatching(
+            'span',
+            [
+              AttributeMarker.Classes,
+              'my-class',
+              'other-class',
+              AttributeMarker.Bindings,
+              'title',
+              'directive',
+            ],
+            ['', 'directive', ''],
+          ),
+        ).toBeTruthy(
+          `Selector '[directive]' should match <span class="my-class other-class" [title]="title" [directive]="exp">`,
+        );
       });
 
       it('should match NOT match classes when looking for directives', () => {
-        expect(isMatching(
-                   'span',
-                   [
-                     AttributeMarker.Classes, 'directive', 'other-class', AttributeMarker.Bindings,
-                     'title'
-                   ],
-                   ['', 'directive', '']))
-            .toBeFalsy(
-                `Selector '[directive]' should NOT match <span class="directive other-class" [title]="title">`);
+        expect(
+          isMatching(
+            'span',
+            [
+              AttributeMarker.Classes,
+              'directive',
+              'other-class',
+              AttributeMarker.Bindings,
+              'title',
+            ],
+            ['', 'directive', ''],
+          ),
+        ).toBeFalsy(
+          `Selector '[directive]' should NOT match <span class="directive other-class" [title]="title">`,
+        );
       });
     });
 
     describe('class matching', () => {
       it('should match with a class selector when an element has multiple classes', () => {
-        expect(isMatching('span', ['class', 'foo bar'], [
-          '', SelectorFlags.CLASS, 'foo'
-        ])).toBeTruthy(`Selector '.foo' should match <span class="foo bar">`);
+        expect(
+          isMatching('span', ['class', 'foo bar'], ['', SelectorFlags.CLASS, 'foo']),
+        ).toBeTruthy(`Selector '.foo' should match <span class="foo bar">`);
 
-        expect(isMatching('span', ['class', 'foo bar'], [
-          '', SelectorFlags.CLASS, 'bar'
-        ])).toBeTruthy(`Selector '.bar' should match <span class="foo bar">`);
+        expect(
+          isMatching('span', ['class', 'foo bar'], ['', SelectorFlags.CLASS, 'bar']),
+        ).toBeTruthy(`Selector '.bar' should match <span class="foo bar">`);
 
-        expect(isMatching('span', ['class', 'foo bar'], [
-          '', SelectorFlags.CLASS, 'baz'
-        ])).toBeFalsy(`Selector '.baz' should NOT match <span class="foo bar">`);
+        expect(
+          isMatching('span', ['class', 'foo bar'], ['', SelectorFlags.CLASS, 'baz']),
+        ).toBeFalsy(`Selector '.baz' should NOT match <span class="foo bar">`);
       });
 
       it('should not match on partial class name', () => {
-        expect(isMatching('span', ['class', 'foobar'], [
-          '', SelectorFlags.CLASS, 'foo'
-        ])).toBeFalsy(`Selector '.foo' should NOT match <span class="foobar">`);
+        expect(isMatching('span', ['class', 'foobar'], ['', SelectorFlags.CLASS, 'foo'])).toBeFalsy(
+          `Selector '.foo' should NOT match <span class="foobar">`,
+        );
 
-        expect(isMatching('span', ['class', 'foobar'], [
-          '', SelectorFlags.CLASS, 'bar'
-        ])).toBeFalsy(`Selector '.bar' should NOT match <span class="foobar">`);
+        expect(isMatching('span', ['class', 'foobar'], ['', SelectorFlags.CLASS, 'bar'])).toBeFalsy(
+          `Selector '.bar' should NOT match <span class="foobar">`,
+        );
 
-        expect(isMatching('span', ['class', 'foobar'], [
-          '', SelectorFlags.CLASS, 'ob'
-        ])).toBeFalsy(`Selector '.ob' should NOT match <span class="foobar">`);
+        expect(isMatching('span', ['class', 'foobar'], ['', SelectorFlags.CLASS, 'ob'])).toBeFalsy(
+          `Selector '.ob' should NOT match <span class="foobar">`,
+        );
 
-        expect(isMatching('span', ['class', 'foobar'], [
-          '', SelectorFlags.CLASS, 'foobar'
-        ])).toBeTruthy(`Selector '.foobar' should match <span class="foobar">`);
+        expect(
+          isMatching('span', ['class', 'foobar'], ['', SelectorFlags.CLASS, 'foobar']),
+        ).toBeTruthy(`Selector '.foobar' should match <span class="foobar">`);
       });
 
       it('should support selectors with multiple classes', () => {
-        expect(isMatching('span', ['class', 'foo bar'], [
-          '', SelectorFlags.CLASS, 'foo', 'bar'
-        ])).toBeTruthy(`Selector '.foo.bar' should match <span class="foo bar">`);
+        expect(
+          isMatching('span', ['class', 'foo bar'], ['', SelectorFlags.CLASS, 'foo', 'bar']),
+        ).toBeTruthy(`Selector '.foo.bar' should match <span class="foo bar">`);
 
-        expect(isMatching('span', ['class', 'foo'], [
-          '', SelectorFlags.CLASS, 'foo', 'bar'
-        ])).toBeFalsy(`Selector '.foo.bar' should NOT match <span class="foo">`);
+        expect(
+          isMatching('span', ['class', 'foo'], ['', SelectorFlags.CLASS, 'foo', 'bar']),
+        ).toBeFalsy(`Selector '.foo.bar' should NOT match <span class="foo">`);
 
-        expect(isMatching('span', ['class', 'bar'], [
-          '', SelectorFlags.CLASS, 'foo', 'bar'
-        ])).toBeFalsy(`Selector '.foo.bar' should NOT match <span class="bar">`);
+        expect(
+          isMatching('span', ['class', 'bar'], ['', SelectorFlags.CLASS, 'foo', 'bar']),
+        ).toBeFalsy(`Selector '.foo.bar' should NOT match <span class="bar">`);
       });
 
       it('should support selectors with multiple classes regardless of class name order', () => {
-        expect(isMatching('span', ['class', 'foo bar'], [
-          '', SelectorFlags.CLASS, 'bar', 'foo'
-        ])).toBeTruthy(`Selector '.bar.foo' should match <span class="foo bar">`);
+        expect(
+          isMatching('span', ['class', 'foo bar'], ['', SelectorFlags.CLASS, 'bar', 'foo']),
+        ).toBeTruthy(`Selector '.bar.foo' should match <span class="foo bar">`);
 
-        expect(isMatching('span', ['class', 'bar foo'], [
-          '', SelectorFlags.CLASS, 'foo', 'bar'
-        ])).toBeTruthy(`Selector '.foo.bar' should match <span class="bar foo">`);
+        expect(
+          isMatching('span', ['class', 'bar foo'], ['', SelectorFlags.CLASS, 'foo', 'bar']),
+        ).toBeTruthy(`Selector '.foo.bar' should match <span class="bar foo">`);
 
-        expect(isMatching('span', ['class', 'bar foo'], [
-          '', SelectorFlags.CLASS, 'bar', 'foo'
-        ])).toBeTruthy(`Selector '.bar.foo' should match <span class="bar foo">`);
+        expect(
+          isMatching('span', ['class', 'bar foo'], ['', SelectorFlags.CLASS, 'bar', 'foo']),
+        ).toBeTruthy(`Selector '.bar.foo' should match <span class="bar foo">`);
       });
 
       /**
        * We assume that compiler will lower-case all selectors when generating code
        */
       it('should match class name case-insensitively', () => {
-        expect(isMatching('span', ['class', 'Foo'], [
-          '', SelectorFlags.CLASS, 'foo'
-        ])).toBeTruthy(`Selector '.Foo' should match <span class="Foo">`);
+        expect(isMatching('span', ['class', 'Foo'], ['', SelectorFlags.CLASS, 'foo'])).toBeTruthy(
+          `Selector '.Foo' should match <span class="Foo">`,
+        );
       });
 
       it('should work without a class attribute', () => {
@@ -299,12 +334,14 @@ describe('css selector matching', () => {
         const selector = ['', SelectorFlags.CLASS, 'foo'];
 
         // <div title="title">
-        expect(isMatching('div', ['title', 'title'], selector))
-            .toBeFalsy(`Selector '.foo' should NOT match <div title="title">`);
+        expect(isMatching('div', ['title', 'title'], selector)).toBeFalsy(
+          `Selector '.foo' should NOT match <div title="title">`,
+        );
 
         // <div>
-        expect(isMatching('div', null, selector))
-            .toBeFalsy(`Selector '.foo' should NOT match <div>`);
+        expect(isMatching('div', null, selector)).toBeFalsy(
+          `Selector '.foo' should NOT match <div>`,
+        );
       });
 
       it('should work with elements, attributes, and classes', () => {
@@ -329,13 +366,17 @@ describe('css selector matching', () => {
     });
 
     it('should not match when negation part does not match', () => {
-      expect(isMatching('span', ['foo', ''], [
-        '', SelectorFlags.NOT | SelectorFlags.ELEMENT, 'span'
-      ])).toBeFalsy(`Selector ':not(span)' should NOT match <span foo="">`);
-
-      expect(isMatching('span', ['foo', ''], [
-        'span', SelectorFlags.NOT | SelectorFlags.ATTRIBUTE, 'foo', ''
-      ])).toBeFalsy(`Selector 'span:not([foo])' should NOT match <span foo="">`);
+      expect(
+        isMatching('span', ['foo', ''], ['', SelectorFlags.NOT | SelectorFlags.ELEMENT, 'span']),
+      ).toBeFalsy(`Selector ':not(span)' should NOT match <span foo="">`);
+
+      expect(
+        isMatching(
+          'span',
+          ['foo', ''],
+          ['span', SelectorFlags.NOT | SelectorFlags.ATTRIBUTE, 'foo', ''],
+        ),
+      ).toBeFalsy(`Selector 'span:not([foo])' should NOT match <span foo="">`);
     });
 
     it('should not match negative selector with tag name and attributes', () => {
@@ -366,7 +407,12 @@ describe('css selector matching', () => {
     it('should not match negative selector with classes and attributes', () => {
       // selector: ':not(.baz[title])
       const selector = [
-        '', SelectorFlags.NOT | SelectorFlags.ATTRIBUTE, 'title', '', SelectorFlags.CLASS, 'baz'
+        '',
+        SelectorFlags.NOT | SelectorFlags.ATTRIBUTE,
+        'title',
+        '',
+        SelectorFlags.CLASS,
+        'baz',
       ];
 
       // <div class="baz">
@@ -382,8 +428,15 @@ describe('css selector matching', () => {
     it('should not match negative selector with attribute selector after', () => {
       // selector: ':not(.baz[title]):not([foo])'
       const selector = [
-        '', SelectorFlags.NOT | SelectorFlags.ATTRIBUTE, 'title', '', SelectorFlags.CLASS, 'baz',
-        SelectorFlags.NOT | SelectorFlags.ATTRIBUTE, 'foo', ''
+        '',
+        SelectorFlags.NOT | SelectorFlags.ATTRIBUTE,
+        'title',
+        '',
+        SelectorFlags.CLASS,
+        'baz',
+        SelectorFlags.NOT | SelectorFlags.ATTRIBUTE,
+        'foo',
+        '',
       ];
 
       // <div class="baz">
@@ -399,8 +452,12 @@ describe('css selector matching', () => {
     it('should not match with multiple negative selectors', () => {
       // selector: ':not(span):not([foo])'
       const selector = [
-        '', SelectorFlags.NOT | SelectorFlags.ELEMENT, 'span',
-        SelectorFlags.NOT | SelectorFlags.ATTRIBUTE, 'foo', ''
+        '',
+        SelectorFlags.NOT | SelectorFlags.ELEMENT,
+        'span',
+        SelectorFlags.NOT | SelectorFlags.ATTRIBUTE,
+        'foo',
+        '',
       ];
 
       // <div foo="">
@@ -416,9 +473,17 @@ describe('css selector matching', () => {
     it('should evaluate complex selector with negative selectors', () => {
       // selector: 'div.foo.bar[name=name]:not(.baz):not([title])'
       const selector = [
-        'div', 'name', 'name', SelectorFlags.CLASS, 'foo', 'bar',
-        SelectorFlags.NOT | SelectorFlags.ATTRIBUTE, 'title', '',
-        SelectorFlags.NOT | SelectorFlags.CLASS, 'baz'
+        'div',
+        'name',
+        'name',
+        SelectorFlags.CLASS,
+        'foo',
+        'bar',
+        SelectorFlags.NOT | SelectorFlags.ATTRIBUTE,
+        'title',
+        '',
+        SelectorFlags.NOT | SelectorFlags.CLASS,
+        'baz',
       ];
 
       // <div name="name" class="foo bar">
@@ -428,57 +493,64 @@ describe('css selector matching', () => {
       expect(isMatching('div', ['name', 'name', 'class', 'foo bar baz'], selector)).toBeFalsy();
 
       // <div name="name" title class="foo bar">
-      expect(isMatching('div', ['name', 'name', 'title', '', 'class', 'foo bar'], selector))
-          .toBeFalsy();
+      expect(
+        isMatching('div', ['name', 'name', 'title', '', 'class', 'foo bar'], selector),
+      ).toBeFalsy();
     });
   });
 
   describe('isNodeMatchingSelectorList', () => {
     function isAnyMatching(
-        tagName: string, attrs: string[]|null, selector: CssSelectorList): boolean {
+      tagName: string,
+      attrs: string[] | null,
+      selector: CssSelectorList,
+    ): boolean {
       return isNodeMatchingSelectorList(testLStaticData(tagName, attrs), selector, false);
     }
 
     it('should match when there is only one simple selector without negations', () => {
-      expect(isAnyMatching('span', null, [['span']]))
-          .toBeTruthy(`Selector 'span' should match <span>`);
+      expect(isAnyMatching('span', null, [['span']])).toBeTruthy(
+        `Selector 'span' should match <span>`,
+      );
 
-      expect(isAnyMatching('span', null, [['div']]))
-          .toBeFalsy(`Selector 'div' should NOT match <span>`);
+      expect(isAnyMatching('span', null, [['div']])).toBeFalsy(
+        `Selector 'div' should NOT match <span>`,
+      );
     });
 
     it('should match when there are multiple parts and only one is matching', () => {
-      expect(isAnyMatching('span', ['foo', 'bar'], [
-        ['div'], ['', 'foo', 'bar']
-      ])).toBeTruthy(`Selector 'div, [foo=bar]' should match <span foo="bar">`);
+      expect(isAnyMatching('span', ['foo', 'bar'], [['div'], ['', 'foo', 'bar']])).toBeTruthy(
+        `Selector 'div, [foo=bar]' should match <span foo="bar">`,
+      );
     });
 
     it('should not match when there are multiple parts and none is matching', () => {
-      expect(isAnyMatching('span', ['foo', 'bar'], [
-        ['div'], ['', 'foo', 'baz']
-      ])).toBeFalsy(`Selector 'div, [foo=baz]' should NOT match <span foo="bar">`);
+      expect(isAnyMatching('span', ['foo', 'bar'], [['div'], ['', 'foo', 'baz']])).toBeFalsy(
+        `Selector 'div, [foo=baz]' should NOT match <span foo="bar">`,
+      );
     });
   });
 
-  describe('reading the ngProjectAs attribute value', function() {
-    function testTNode(attrs: TAttributes|null) {
+  describe('reading the ngProjectAs attribute value', function () {
+    function testTNode(attrs: TAttributes | null) {
       return testLStaticData('tag', attrs);
     }
 
-    it('should get ngProjectAs value if present', function() {
-      expect(getProjectAsAttrValue(testTNode([AttributeMarker.ProjectAs, ['tag', 'foo', 'bar']])))
-          .toEqual(['tag', 'foo', 'bar']);
+    it('should get ngProjectAs value if present', function () {
+      expect(
+        getProjectAsAttrValue(testTNode([AttributeMarker.ProjectAs, ['tag', 'foo', 'bar']])),
+      ).toEqual(['tag', 'foo', 'bar']);
     });
 
-    it('should return null if there are no attributes', function() {
+    it('should return null if there are no attributes', function () {
       expect(getProjectAsAttrValue(testTNode(null))).toBe(null);
     });
 
-    it('should return if ngProjectAs is not present', function() {
+    it('should return if ngProjectAs is not present', function () {
       expect(getProjectAsAttrValue(testTNode(['foo', 'bar']))).toBe(null);
     });
 
-    it('should not accidentally identify ngProjectAs in attribute values', function() {
+    it('should not accidentally identify ngProjectAs in attribute values', function () {
       expect(getProjectAsAttrValue(testTNode(['foo', AttributeMarker.ProjectAs]))).toBe(null);
     });
   });
@@ -493,85 +565,136 @@ describe('stringifyCSSSelectorList', () => {
     expect(stringifyCSSSelectorList([['', 'id', '']])).toBe('[id]');
     expect(stringifyCSSSelectorList([['button', 'id', '']])).toBe('button[id]');
     expect(stringifyCSSSelectorList([['button', 'id', 'value']])).toBe('button[id="value"]');
-    expect(stringifyCSSSelectorList([['button', 'id', 'value', 'title', 'other']]))
-        .toBe('button[id="value"][title="other"]');
+    expect(stringifyCSSSelectorList([['button', 'id', 'value', 'title', 'other']])).toBe(
+      'button[id="value"][title="other"]',
+    );
   });
 
   it('should stringify selector with class names', () => {
     expect(stringifyCSSSelectorList([['', SelectorFlags.CLASS, 'foo']])).toBe('.foo');
     expect(stringifyCSSSelectorList([['button', SelectorFlags.CLASS, 'foo']])).toBe('button.foo');
 
-    expect(stringifyCSSSelectorList([['button', SelectorFlags.CLASS, 'foo', 'bar']]))
-        .toBe('button.foo.bar');
+    expect(stringifyCSSSelectorList([['button', SelectorFlags.CLASS, 'foo', 'bar']])).toBe(
+      'button.foo.bar',
+    );
 
-    expect(stringifyCSSSelectorList([
-      ['button', 'id', 'value', 'title', 'other', SelectorFlags.CLASS, 'foo', 'bar']
-    ])).toBe('button[id="value"][title="other"].foo.bar');
+    expect(
+      stringifyCSSSelectorList([
+        ['button', 'id', 'value', 'title', 'other', SelectorFlags.CLASS, 'foo', 'bar'],
+      ]),
+    ).toBe('button[id="value"][title="other"].foo.bar');
   });
 
   it('should stringify selector with `:not()` rules', () => {
-    expect(stringifyCSSSelectorList([['', SelectorFlags.CLASS | SelectorFlags.NOT, 'foo', 'bar']]))
-        .toBe(':not(.foo.bar)');
-
-    expect(stringifyCSSSelectorList([
-      ['button', SelectorFlags.ATTRIBUTE | SelectorFlags.NOT, 'foo', 'bar']
-    ])).toBe('button:not([foo="bar"])');
-
-    expect(stringifyCSSSelectorList([['', SelectorFlags.ELEMENT | SelectorFlags.NOT, 'foo']]))
-        .toBe(':not(foo)');
-
-    expect(stringifyCSSSelectorList([
-      ['span', SelectorFlags.CLASS, 'foo', SelectorFlags.CLASS | SelectorFlags.NOT, 'bar', 'baz']
-    ])).toBe('span.foo:not(.bar.baz)');
-
-    expect(stringifyCSSSelectorList([
-      ['span', 'id', 'value', SelectorFlags.ATTRIBUTE | SelectorFlags.NOT, 'title', 'other']
-    ])).toBe('span[id="value"]:not([title="other"])');
-
-    expect(stringifyCSSSelectorList([[
-      '', SelectorFlags.CLASS, 'bar', SelectorFlags.ATTRIBUTE | SelectorFlags.NOT, 'foo', '',
-      SelectorFlags.ELEMENT | SelectorFlags.NOT, 'div'
-    ]])).toBe('.bar:not([foo]):not(div)');
-
-    expect(stringifyCSSSelectorList([[
-      'div', SelectorFlags.ATTRIBUTE | SelectorFlags.NOT, 'foo', '', SelectorFlags.CLASS, 'bar',
-      SelectorFlags.CLASS | SelectorFlags.NOT, 'baz'
-    ]])).toBe('div:not([foo].bar):not(.baz)');
-
-    expect(stringifyCSSSelectorList([[
-      'div', SelectorFlags.ELEMENT | SelectorFlags.NOT, 'p', SelectorFlags.CLASS, 'bar',
-      SelectorFlags.CLASS | SelectorFlags.NOT, 'baz'
-    ]])).toBe('div:not(p.bar):not(.baz)');
+    expect(
+      stringifyCSSSelectorList([['', SelectorFlags.CLASS | SelectorFlags.NOT, 'foo', 'bar']]),
+    ).toBe(':not(.foo.bar)');
+
+    expect(
+      stringifyCSSSelectorList([
+        ['button', SelectorFlags.ATTRIBUTE | SelectorFlags.NOT, 'foo', 'bar'],
+      ]),
+    ).toBe('button:not([foo="bar"])');
+
+    expect(stringifyCSSSelectorList([['', SelectorFlags.ELEMENT | SelectorFlags.NOT, 'foo']])).toBe(
+      ':not(foo)',
+    );
+
+    expect(
+      stringifyCSSSelectorList([
+        ['span', SelectorFlags.CLASS, 'foo', SelectorFlags.CLASS | SelectorFlags.NOT, 'bar', 'baz'],
+      ]),
+    ).toBe('span.foo:not(.bar.baz)');
+
+    expect(
+      stringifyCSSSelectorList([
+        ['span', 'id', 'value', SelectorFlags.ATTRIBUTE | SelectorFlags.NOT, 'title', 'other'],
+      ]),
+    ).toBe('span[id="value"]:not([title="other"])');
+
+    expect(
+      stringifyCSSSelectorList([
+        [
+          '',
+          SelectorFlags.CLASS,
+          'bar',
+          SelectorFlags.ATTRIBUTE | SelectorFlags.NOT,
+          'foo',
+          '',
+          SelectorFlags.ELEMENT | SelectorFlags.NOT,
+          'div',
+        ],
+      ]),
+    ).toBe('.bar:not([foo]):not(div)');
+
+    expect(
+      stringifyCSSSelectorList([
+        [
+          'div',
+          SelectorFlags.ATTRIBUTE | SelectorFlags.NOT,
+          'foo',
+          '',
+          SelectorFlags.CLASS,
+          'bar',
+          SelectorFlags.CLASS | SelectorFlags.NOT,
+          'baz',
+        ],
+      ]),
+    ).toBe('div:not([foo].bar):not(.baz)');
+
+    expect(
+      stringifyCSSSelectorList([
+        [
+          'div',
+          SelectorFlags.ELEMENT | SelectorFlags.NOT,
+          'p',
+          SelectorFlags.CLASS,
+          'bar',
+          SelectorFlags.CLASS | SelectorFlags.NOT,
+          'baz',
+        ],
+      ]),
+    ).toBe('div:not(p.bar):not(.baz)');
   });
 
   it('should stringify multiple comma-separated selectors', () => {
-    expect(stringifyCSSSelectorList([
-      ['', 'id', ''], ['button', 'id', 'value']
-    ])).toBe('[id],button[id="value"]');
-
-    expect(stringifyCSSSelectorList([
-      ['', 'id', ''], ['button', 'id', 'value'],
-      ['div', SelectorFlags.ATTRIBUTE | SelectorFlags.NOT, 'foo', '']
-    ])).toBe('[id],button[id="value"],div:not([foo])');
-
-    expect(stringifyCSSSelectorList([
-      ['', 'id', ''], ['button', 'id', 'value'],
-      ['div', SelectorFlags.ATTRIBUTE | SelectorFlags.NOT, 'foo', ''],
-      [
-        'div', SelectorFlags.ELEMENT | SelectorFlags.NOT, 'p', SelectorFlags.CLASS, 'bar',
-        SelectorFlags.CLASS | SelectorFlags.NOT, 'baz'
-      ]
-    ])).toBe('[id],button[id="value"],div:not([foo]),div:not(p.bar):not(.baz)');
+    expect(
+      stringifyCSSSelectorList([
+        ['', 'id', ''],
+        ['button', 'id', 'value'],
+      ]),
+    ).toBe('[id],button[id="value"]');
+
+    expect(
+      stringifyCSSSelectorList([
+        ['', 'id', ''],
+        ['button', 'id', 'value'],
+        ['div', SelectorFlags.ATTRIBUTE | SelectorFlags.NOT, 'foo', ''],
+      ]),
+    ).toBe('[id],button[id="value"],div:not([foo])');
+
+    expect(
+      stringifyCSSSelectorList([
+        ['', 'id', ''],
+        ['button', 'id', 'value'],
+        ['div', SelectorFlags.ATTRIBUTE | SelectorFlags.NOT, 'foo', ''],
+        [
+          'div',
+          SelectorFlags.ELEMENT | SelectorFlags.NOT,
+          'p',
+          SelectorFlags.CLASS,
+          'bar',
+          SelectorFlags.CLASS | SelectorFlags.NOT,
+          'baz',
+        ],
+      ]),
+    ).toBe('[id],button[id="value"],div:not([foo]),div:not(p.bar):not(.baz)');
   });
 });
 
 describe('extractAttrsAndClassesFromSelector', () => {
   const cases = [
-    [
-      ['div', '', ''],
-      [],
-      [],
-    ],
+    [['div', '', ''], [], []],
     [
       ['div', 'attr-a', 'a', 'attr-b', 'b', 'attr-c', ''],
       ['attr-a', 'a', 'attr-b', 'b', 'attr-c', ''],
@@ -589,16 +712,28 @@ describe('extractAttrsAndClassesFromSelector', () => {
     ],
     [
       [
-        '', '', '', SelectorFlags.ATTRIBUTE, 'attr-a', 'a',
-        (SelectorFlags.CLASS | SelectorFlags.NOT), 'class-b'
+        '',
+        '',
+        '',
+        SelectorFlags.ATTRIBUTE,
+        'attr-a',
+        'a',
+        SelectorFlags.CLASS | SelectorFlags.NOT,
+        'class-b',
       ],
       ['attr-a', 'a'],
       [],
     ],
     [
       [
-        '', '', '', (SelectorFlags.CLASS | SelectorFlags.NOT), 'class-a',
-        (SelectorFlags.ATTRIBUTE | SelectorFlags.NOT), 'attr-b', 'b'
+        '',
+        '',
+        '',
+        SelectorFlags.CLASS | SelectorFlags.NOT,
+        'class-a',
+        SelectorFlags.ATTRIBUTE | SelectorFlags.NOT,
+        'attr-b',
+        'b',
       ],
       [],
       [],
diff --git a/packages/core/test/render3/providers_helper.ts b/packages/core/test/render3/providers_helper.ts
index b2e8f615718a1..3214c5ede69f3 100644
--- a/packages/core/test/render3/providers_helper.ts
+++ b/packages/core/test/render3/providers_helper.ts
@@ -19,11 +19,11 @@ export interface ComponentTest {
 }
 
 export function expectProvidersScenario(defs: {
-  app?: ComponentTest,
-  parent?: ComponentTest,
-  viewChild?: ComponentTest,
-  contentChild?: ComponentTest,
-  ngModule?: Type<any>,
+  app?: ComponentTest;
+  parent?: ComponentTest;
+  viewChild?: ComponentTest;
+  contentChild?: ComponentTest;
+  ngModule?: Type<any>;
 }): void {
   @Component({
     standalone: true,
@@ -33,7 +33,6 @@ export function expectProvidersScenario(defs: {
     providers: defs.viewChild?.providers ?? [],
     viewProviders: defs.viewChild?.viewProviders ?? [],
   })
-
   class ViewChildComponent {
     constructor() {
       defs.viewChild?.componentAssertion?.();
@@ -45,7 +44,6 @@ export function expectProvidersScenario(defs: {
     selector: 'view-child',
     providers: defs.viewChild?.directiveProviders ?? [],
   })
-
   class ViewChildDirective {
     constructor() {
       defs.viewChild?.directiveAssertion?.();
@@ -77,7 +75,6 @@ export function expectProvidersScenario(defs: {
     }
   }
 
-
   @Component({
     standalone: true,
     imports: [ViewChildComponent, ViewChildDirective],
@@ -129,7 +126,6 @@ export function expectProvidersScenario(defs: {
     providers: defs.app?.providers ?? [],
     viewProviders: defs.app?.viewProviders ?? [],
   })
-
   class App {
     constructor() {
       defs.app?.componentAssertion?.();
@@ -141,7 +137,8 @@ export function expectProvidersScenario(defs: {
   });
   const fixture = TestBed.createComponent(App);
   fixture.detectChanges();
-  expect(fixture.nativeElement.innerHTML)
-      .toEqual('<parent><view-child>view-child</view-child></parent>');
+  expect(fixture.nativeElement.innerHTML).toEqual(
+    '<parent><view-child>view-child</view-child></parent>',
+  );
   fixture.destroy();
 }
diff --git a/packages/core/test/render3/providers_spec.ts b/packages/core/test/render3/providers_spec.ts
index 316e07b1bd5d8..277aac5555653 100644
--- a/packages/core/test/render3/providers_spec.ts
+++ b/packages/core/test/render3/providers_spec.ts
@@ -8,7 +8,24 @@
 
 import {TestBed} from '@angular/core/testing';
 
-import {Component, createEnvironmentInjector, ElementRef, EnvironmentInjector, inject, Injectable, InjectFlags, InjectionToken, NgModule, RendererFactory2, Type, ViewContainerRef, ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵdefineNgModule, ɵɵinject} from '../../src/core';
+import {
+  Component,
+  createEnvironmentInjector,
+  ElementRef,
+  EnvironmentInjector,
+  inject,
+  Injectable,
+  InjectFlags,
+  InjectionToken,
+  NgModule,
+  RendererFactory2,
+  Type,
+  ViewContainerRef,
+  ɵɵdefineInjectable,
+  ɵɵdefineInjector,
+  ɵɵdefineNgModule,
+  ɵɵinject,
+} from '../../src/core';
 import {forwardRef} from '../../src/di/forward_ref';
 import {ɵɵgetInheritedFactory} from '../../src/render3/index';
 import {getInjector} from '../../src/render3/util/discovery_utils';
@@ -38,7 +55,10 @@ describe('providers', () => {
 
     class GreeterBuiltInDeps implements Greeter {
       public greet: string;
-      constructor(private message: string, private elementRef: ElementRef) {
+      constructor(
+        private message: string,
+        private elementRef: ElementRef,
+      ) {
         this.greet = this.message + ' from ' + this.elementRef.nativeElement.tagName;
       }
     }
@@ -68,8 +88,8 @@ describe('providers', () => {
           providers: [GreeterClass],
           componentAssertion: () => {
             expect(inject(GreeterClass).greet).toEqual('Class');
-          }
-        }
+          },
+        },
       });
     });
 
@@ -79,8 +99,8 @@ describe('providers', () => {
           providers: [{provide: GREETER, useValue: {greet: 'Value'}}],
           componentAssertion: () => {
             expect(inject(GREETER).greet).toEqual('Value');
-          }
-        }
+          },
+        },
       });
     });
 
@@ -90,8 +110,8 @@ describe('providers', () => {
           providers: [{provide: GREETER, useClass: GreeterClass}],
           componentAssertion: () => {
             expect(inject(GREETER).greet).toEqual('Class');
-          }
-        }
+          },
+        },
       });
     });
 
@@ -101,8 +121,8 @@ describe('providers', () => {
           providers: [GreeterClass, {provide: GREETER, useExisting: GreeterClass}],
           componentAssertion: () => {
             expect(inject(GREETER).greet).toEqual('Class');
-          }
-        }
+          },
+        },
       });
     });
 
@@ -112,8 +132,8 @@ describe('providers', () => {
           providers: [GreeterClass, {provide: GREETER, useFactory: () => new GreeterClass()}],
           componentAssertion: () => {
             expect(inject(GREETER).greet).toEqual('Class');
-          }
-        }
+          },
+        },
       });
     });
 
@@ -124,12 +144,12 @@ describe('providers', () => {
         parent: {
           providers: [
             {provide: MESSAGE, useValue: 'Message'},
-            {provide: GREETER, useClass: GreeterDeps, deps: [MESSAGE]}
+            {provide: GREETER, useClass: GreeterDeps, deps: [MESSAGE]},
           ],
           componentAssertion: () => {
             expect(inject(GREETER).greet).toEqual('Message');
-          }
-        }
+          },
+        },
       });
     });
 
@@ -138,12 +158,12 @@ describe('providers', () => {
         parent: {
           providers: [
             {provide: MESSAGE, useValue: 'Message'},
-            {provide: GREETER, useClass: GreeterBuiltInDeps, deps: [MESSAGE, ElementRef]}
+            {provide: GREETER, useClass: GreeterBuiltInDeps, deps: [MESSAGE, ElementRef]},
           ],
           componentAssertion: () => {
             expect(inject(GREETER).greet).toEqual('Message from PARENT');
-          }
-        }
+          },
+        },
       });
     });
 
@@ -152,12 +172,12 @@ describe('providers', () => {
         parent: {
           providers: [
             {provide: MESSAGE, useValue: 'Message'},
-            {provide: GREETER, useFactory: (msg: string) => new GreeterDeps(msg), deps: [MESSAGE]}
+            {provide: GREETER, useFactory: (msg: string) => new GreeterDeps(msg), deps: [MESSAGE]},
           ],
           componentAssertion: () => {
             expect(inject(GREETER).greet).toEqual('Message');
-          }
-        }
+          },
+        },
       });
     });
 
@@ -165,17 +185,18 @@ describe('providers', () => {
       expectProvidersScenario({
         parent: {
           providers: [
-            {provide: MESSAGE, useValue: 'Message'}, {
+            {provide: MESSAGE, useValue: 'Message'},
+            {
               provide: GREETER,
               useFactory: (msg: string, elementRef: ElementRef) =>
-                  new GreeterBuiltInDeps(msg, elementRef),
-              deps: [MESSAGE, ElementRef]
-            }
+                new GreeterBuiltInDeps(msg, elementRef),
+              deps: [MESSAGE, ElementRef],
+            },
           ],
           componentAssertion: () => {
             expect(inject(GREETER).greet).toEqual('Message from PARENT');
-          }
-        }
+          },
+        },
       });
     });
 
@@ -185,8 +206,8 @@ describe('providers', () => {
           providers: [GreeterProvider, {provide: GREETER, useClass: GreeterInj}],
           componentAssertion: () => {
             expect(inject(GREETER).greet).toEqual('Provided');
-          }
-        }
+          },
+        },
       });
     });
 
@@ -198,8 +219,8 @@ describe('providers', () => {
               providers: [forwardRef(() => ForLater)],
               componentAssertion: () => {
                 expect(inject(ForLater) instanceof ForLater).toBeTruthy();
-              }
-            }
+              },
+            },
           });
           done();
         }, 0);
@@ -211,21 +232,23 @@ describe('providers', () => {
       it('ValueProvider wrapped in forwardRef', () => {
         expectProvidersScenario({
           parent: {
-            providers: [{
-              provide: GREETER,
-              useValue: forwardRef(() => {
-                return {greet: 'Value'};
-              })
-            }],
+            providers: [
+              {
+                provide: GREETER,
+                useValue: forwardRef(() => {
+                  return {greet: 'Value'};
+                }),
+              },
+            ],
             componentAssertion: () => {
               expect(inject(GREETER).greet).toEqual('Value');
-            }
-          }
+            },
+          },
         });
       });
 
       it('ClassProvider wrapped in forwardRef', () => {
-        let greeterInstance: GreeterClass|null = null;
+        let greeterInstance: GreeterClass | null = null;
 
         expectProvidersScenario({
           parent: {
@@ -233,8 +256,8 @@ describe('providers', () => {
             componentAssertion: () => {
               greeterInstance = inject(GREETER) as GreeterClass;
               expect(greeterInstance.greet).toEqual('Class');
-            }
-          }
+            },
+          },
         });
 
         expect(greeterInstance).not.toBeNull();
@@ -244,12 +267,14 @@ describe('providers', () => {
       it('ExistingProvider wrapped in forwardRef', () => {
         expectProvidersScenario({
           parent: {
-            providers:
-                [GreeterClass, {provide: GREETER, useExisting: forwardRef(() => GreeterClass)}],
+            providers: [
+              GreeterClass,
+              {provide: GREETER, useExisting: forwardRef(() => GreeterClass)},
+            ],
             componentAssertion: () => {
               expect(inject(GREETER).greet).toEqual('Class');
-            }
-          }
+            },
+          },
         });
       });
 
@@ -260,8 +285,8 @@ describe('providers', () => {
             providers: [{provide: GREETER, useValue: {greet: 'Value'}}],
             componentAssertion: () => {
               expect(inject(forwardRef(() => GREETER)).greet).toEqual('Value');
-            }
-          }
+            },
+          },
         });
       });
     });
@@ -289,8 +314,8 @@ describe('providers', () => {
           directiveProviders: [{provide: String, useValue: 'Message 2'}],
           componentAssertion: () => {
             expect(inject(String)).toEqual('Message 2');
-          }
-        }
+          },
+        },
       });
     });
 
@@ -301,8 +326,8 @@ describe('providers', () => {
           viewProviders: [{provide: String, useValue: 'Message 2'}],
           componentAssertion: () => {
             expect(inject(String)).toEqual('Message 2');
-          }
-        }
+          },
+        },
       });
     });
 
@@ -313,8 +338,8 @@ describe('providers', () => {
           viewProviders: [{provide: String, useValue: 'Message 2'}],
           componentAssertion: () => {
             expect(inject(String)).toEqual('Message 2');
-          }
-        }
+          },
+        },
       });
     });
 
@@ -325,44 +350,50 @@ describe('providers', () => {
           directiveProviders: [{provide: String, useValue: 'Message 2'}],
           componentAssertion: () => {
             expect(inject(String)).toEqual('Message 2');
-          }
-        }
+          },
+        },
       });
     });
 
     it('last provider should override previous one in component providers', () => {
       expectProvidersScenario({
         parent: {
-          providers:
-              [{provide: String, useValue: 'Message 1'}, {provide: String, useValue: 'Message 2'}],
+          providers: [
+            {provide: String, useValue: 'Message 1'},
+            {provide: String, useValue: 'Message 2'},
+          ],
           componentAssertion: () => {
             expect(inject(String)).toEqual('Message 2');
-          }
-        }
+          },
+        },
       });
     });
 
     it('last provider should override previous one in component view providers', () => {
       expectProvidersScenario({
         parent: {
-          viewProviders:
-              [{provide: String, useValue: 'Message 1'}, {provide: String, useValue: 'Message 2'}],
+          viewProviders: [
+            {provide: String, useValue: 'Message 1'},
+            {provide: String, useValue: 'Message 2'},
+          ],
           componentAssertion: () => {
             expect(inject(String)).toEqual('Message 2');
-          }
-        }
+          },
+        },
       });
     });
 
     it('last provider should override previous one in directive providers', () => {
       expectProvidersScenario({
         parent: {
-          directiveProviders:
-              [{provide: String, useValue: 'Message 1'}, {provide: String, useValue: 'Message 2'}],
+          directiveProviders: [
+            {provide: String, useValue: 'Message 1'},
+            {provide: String, useValue: 'Message 2'},
+          ],
           componentAssertion: () => {
             expect(inject(String)).toEqual('Message 2');
-          }
-        }
+          },
+        },
       });
     });
   });
@@ -371,8 +402,7 @@ describe('providers', () => {
     @NgModule({
       providers: [{provide: String, useValue: 'From module'}],
     })
-    class MyModule {
-    }
+    class MyModule {}
 
     describe('without directives', () => {
       it('should work without providers nor viewProviders in component', () => {
@@ -383,7 +413,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From module');
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
@@ -391,7 +421,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From module');
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
@@ -399,9 +429,9 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From module');
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
 
@@ -414,7 +444,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From providers');
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
@@ -422,7 +452,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From providers');
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
@@ -430,9 +460,9 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From providers');
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
 
@@ -445,7 +475,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From module');
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
@@ -453,7 +483,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From viewProviders');
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
@@ -461,9 +491,9 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From module');
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
 
@@ -477,7 +507,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From providers');
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
@@ -485,7 +515,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From viewProviders');
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
@@ -493,9 +523,9 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From providers');
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
     });
@@ -511,7 +541,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From directive');
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
@@ -519,7 +549,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From directive');
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
@@ -527,9 +557,9 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From directive');
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
 
@@ -544,7 +574,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From directive');
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
@@ -552,7 +582,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From directive');
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
@@ -560,9 +590,9 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From directive');
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
 
@@ -577,7 +607,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From directive');
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
@@ -585,7 +615,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From viewProviders');
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
@@ -593,9 +623,9 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From directive');
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
 
@@ -611,7 +641,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From directive');
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
@@ -619,7 +649,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From viewProviders');
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
@@ -627,9 +657,9 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual('From directive');
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
     });
@@ -639,8 +669,7 @@ describe('providers', () => {
     @NgModule({
       providers: [{provide: String, useValue: 'From module', multi: true}],
     })
-    class MyModule {
-    }
+    class MyModule {}
 
     describe('without directives', () => {
       it('should work without providers nor viewProviders in component', () => {
@@ -651,7 +680,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From module']);
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
@@ -659,7 +688,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From module']);
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
@@ -667,9 +696,9 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From module']);
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
 
@@ -682,7 +711,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From providers']);
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
@@ -690,7 +719,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From providers']);
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
@@ -698,9 +727,9 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From providers']);
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
 
@@ -713,7 +742,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From module']);
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
@@ -721,7 +750,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From viewProviders']);
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
@@ -729,9 +758,9 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From module']);
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
 
@@ -745,7 +774,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From providers']);
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
@@ -753,7 +782,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From providers', 'From viewProviders']);
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
@@ -761,9 +790,9 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From providers']);
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
     });
@@ -779,7 +808,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From directive 2', 'From directive 1']);
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
@@ -787,7 +816,7 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From directive 2', 'From directive 1']);
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
@@ -795,9 +824,9 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From directive 2', 'From directive 1']);
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
 
@@ -809,40 +838,52 @@ describe('providers', () => {
             directive2Providers: [{provide: String, useValue: 'From directive 2', multi: true}],
             componentAssertion: () => {
               expect(inject(String)).toEqual([
-                'From providers', 'From directive 2', 'From directive 1'
+                'From providers',
+                'From directive 2',
+                'From directive 1',
               ]);
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual([
-                'From providers', 'From directive 2', 'From directive 1'
+                'From providers',
+                'From directive 2',
+                'From directive 1',
               ]);
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
               expect(inject(String)).toEqual([
-                'From providers', 'From directive 2', 'From directive 1'
+                'From providers',
+                'From directive 2',
+                'From directive 1',
               ]);
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual([
-                'From providers', 'From directive 2', 'From directive 1'
+                'From providers',
+                'From directive 2',
+                'From directive 1',
               ]);
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
               expect(inject(String)).toEqual([
-                'From providers', 'From directive 2', 'From directive 1'
+                'From providers',
+                'From directive 2',
+                'From directive 1',
               ]);
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual([
-                'From providers', 'From directive 2', 'From directive 1'
+                'From providers',
+                'From directive 2',
+                'From directive 1',
               ]);
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
 
@@ -854,24 +895,30 @@ describe('providers', () => {
             directive2Providers: [{provide: String, useValue: 'From directive 2', multi: true}],
             componentAssertion: () => {
               expect(inject(String)).toEqual([
-                'From viewProviders', 'From directive 2', 'From directive 1'
+                'From viewProviders',
+                'From directive 2',
+                'From directive 1',
               ]);
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From directive 2', 'From directive 1']);
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
               expect(inject(String)).toEqual([
-                'From viewProviders', 'From directive 2', 'From directive 1'
+                'From viewProviders',
+                'From directive 2',
+                'From directive 1',
               ]);
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual([
-                'From viewProviders', 'From directive 2', 'From directive 1'
+                'From viewProviders',
+                'From directive 2',
+                'From directive 1',
               ]);
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
@@ -879,9 +926,9 @@ describe('providers', () => {
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual(['From directive 2', 'From directive 1']);
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
 
@@ -894,40 +941,55 @@ describe('providers', () => {
             directive2Providers: [{provide: String, useValue: 'From directive 2', multi: true}],
             componentAssertion: () => {
               expect(inject(String)).toEqual([
-                'From providers', 'From viewProviders', 'From directive 2', 'From directive 1'
+                'From providers',
+                'From viewProviders',
+                'From directive 2',
+                'From directive 1',
               ]);
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual([
-                'From providers', 'From directive 2', 'From directive 1'
+                'From providers',
+                'From directive 2',
+                'From directive 1',
               ]);
-            }
+            },
           },
           viewChild: {
             componentAssertion: () => {
               expect(inject(String)).toEqual([
-                'From providers', 'From viewProviders', 'From directive 2', 'From directive 1'
+                'From providers',
+                'From viewProviders',
+                'From directive 2',
+                'From directive 1',
               ]);
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual([
-                'From providers', 'From viewProviders', 'From directive 2', 'From directive 1'
+                'From providers',
+                'From viewProviders',
+                'From directive 2',
+                'From directive 1',
               ]);
-            }
+            },
           },
           contentChild: {
             componentAssertion: () => {
               expect(inject(String)).toEqual([
-                'From providers', 'From directive 2', 'From directive 1'
+                'From providers',
+                'From directive 2',
+                'From directive 1',
               ]);
             },
             directiveAssertion: () => {
               expect(inject(String)).toEqual([
-                'From providers', 'From directive 2', 'From directive 1'
+                'From providers',
+                'From directive 2',
+                'From directive 1',
               ]);
-            }
+            },
           },
-          ngModule: MyModule
+          ngModule: MyModule,
         });
       });
     });
@@ -948,8 +1010,8 @@ describe('providers', () => {
         parent: {
           componentAssertion: () => {
             expect(inject(FooForRoot) instanceof FooForRoot).toBeTruthy();
-          }
-        }
+          },
+        },
       });
     });
 
@@ -957,8 +1019,7 @@ describe('providers', () => {
       @NgModule({
         providers: [{provide: String, useValue: 'From module'}],
       })
-      class MyModule {
-      }
+      class MyModule {}
 
       @Injectable({providedIn: MyModule})
       class FooForModule {
@@ -973,15 +1034,15 @@ describe('providers', () => {
         parent: {
           componentAssertion: () => {
             expect(inject(FooForModule) instanceof FooForModule).toBeTruthy();
-          }
+          },
         },
-        ngModule: MyModule
+        ngModule: MyModule,
       });
     });
   });
 
   describe('- dynamic components dependency resolution', () => {
-    let hostComponent: HostComponent|null = null;
+    let hostComponent: HostComponent | null = null;
 
     @Component({
       standalone: true,
@@ -1014,7 +1075,7 @@ describe('providers', () => {
       constructor() {}
     }
 
-    afterEach(() => hostComponent = null);
+    afterEach(() => (hostComponent = null));
 
     it('should not cross the root view boundary, and use the root view injector', () => {
       const fixture = TestBed.createComponent(AppComponent);
@@ -1025,70 +1086,66 @@ describe('providers', () => {
         injector: {
           get: (token: any, notFoundValue?: any) => {
             return token === String ? 'From custom root view injector' : notFoundValue;
-          }
+          },
         },
       });
       fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(
-              '<host-cmp>foo</host-cmp><embedded-cmp>From custom root view injector</embedded-cmp><!--container-->');
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        '<host-cmp>foo</host-cmp><embedded-cmp>From custom root view injector</embedded-cmp><!--container-->',
+      );
     });
 
-    it('should not cross the root view boundary, and use the module injector if no root view injector',
-       () => {
-         const fixture = TestBed.createComponent(AppComponent);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.innerHTML)
-             .toEqual('<host-cmp>foo</host-cmp><!--container-->');
-
-         const environmentInjector = createEnvironmentInjector(
-             [{provide: String, useValue: 'From module injector'}],
-             TestBed.get(EnvironmentInjector));
-
-         hostComponent!.vcref.createComponent(EmbeddedComponent, {
-           injector: {get: (token: any, notFoundValue?: any) => notFoundValue},
-           environmentInjector: environmentInjector
-         });
-         fixture.detectChanges();
-         expect(fixture.nativeElement.innerHTML)
-             .toEqual(
-                 '<host-cmp>foo</host-cmp><embedded-cmp>From module injector</embedded-cmp><!--container-->');
-       });
-
-    it('should cross the root view boundary to the parent of the host, thanks to the default root view injector',
-       () => {
-         const fixture = TestBed.createComponent(AppComponent);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.innerHTML)
-             .toEqual('<host-cmp>foo</host-cmp><!--container-->');
-
-         hostComponent!.vcref.createComponent(EmbeddedComponent);
-         fixture.detectChanges();
-         expect(fixture.nativeElement.innerHTML)
-             .toEqual(
-                 '<host-cmp>foo</host-cmp><embedded-cmp>From app component</embedded-cmp><!--container-->');
-       });
+    it('should not cross the root view boundary, and use the module injector if no root view injector', () => {
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.innerHTML).toEqual('<host-cmp>foo</host-cmp><!--container-->');
+
+      const environmentInjector = createEnvironmentInjector(
+        [{provide: String, useValue: 'From module injector'}],
+        TestBed.get(EnvironmentInjector),
+      );
+
+      hostComponent!.vcref.createComponent(EmbeddedComponent, {
+        injector: {get: (token: any, notFoundValue?: any) => notFoundValue},
+        environmentInjector: environmentInjector,
+      });
+      fixture.detectChanges();
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        '<host-cmp>foo</host-cmp><embedded-cmp>From module injector</embedded-cmp><!--container-->',
+      );
+    });
+
+    it('should cross the root view boundary to the parent of the host, thanks to the default root view injector', () => {
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.innerHTML).toEqual('<host-cmp>foo</host-cmp><!--container-->');
+
+      hostComponent!.vcref.createComponent(EmbeddedComponent);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.innerHTML).toEqual(
+        '<host-cmp>foo</host-cmp><embedded-cmp>From app component</embedded-cmp><!--container-->',
+      );
+    });
   });
 
   describe('deps boundary:', () => {
-    it('the deps of a token declared in providers should not be resolved with tokens from viewProviders',
-       () => {
-         @Injectable()
-         class MyService {
-           constructor(public value: String) {}
-         }
-
-         expectProvidersScenario({
-           parent: {
-             providers: [MyService, {provide: String, useValue: 'providers'}],
-             viewProviders: [{provide: String, useValue: 'viewProviders'}],
-             componentAssertion: () => {
-               expect(inject(String)).toEqual('viewProviders');
-               expect(inject(MyService).value).toEqual('providers');
-             }
-           }
-         });
-       });
+    it('the deps of a token declared in providers should not be resolved with tokens from viewProviders', () => {
+      @Injectable()
+      class MyService {
+        constructor(public value: String) {}
+      }
+
+      expectProvidersScenario({
+        parent: {
+          providers: [MyService, {provide: String, useValue: 'providers'}],
+          viewProviders: [{provide: String, useValue: 'viewProviders'}],
+          componentAssertion: () => {
+            expect(inject(String)).toEqual('viewProviders');
+            expect(inject(MyService).value).toEqual('providers');
+          },
+        },
+      });
+    });
 
     it('should make sure that parent service does not see overrides in child directives', () => {
       @Injectable()
@@ -1114,8 +1171,7 @@ describe('providers', () => {
     @NgModule({
       providers: [{provide: String, useValue: 'Module'}],
     })
-    class MyModule {
-    }
+    class MyModule {}
     it('should not fall through to ModuleInjector if flags limit the scope', () => {
       expectProvidersScenario({
         ngModule: MyModule,
@@ -1124,8 +1180,8 @@ describe('providers', () => {
             expect(inject(String)).toEqual('Module');
             expect(inject(String, InjectFlags.Optional | InjectFlags.Self)).toBeNull();
             expect(inject(String, InjectFlags.Optional | InjectFlags.Host)).toBeNull();
-          }
-        }
+          },
+        },
       });
     });
   });
@@ -1145,20 +1201,20 @@ describe('providers', () => {
       selector: 'my-cmp',
       template: `<p></p>`,
       providers: [{provide: String, useValue: 'From my component'}],
-      viewProviders: [{provide: Number, useValue: 123}]
+      viewProviders: [{provide: Number, useValue: 123}],
     })
-    class MyComponent {
-    }
+    class MyComponent {}
 
     @Component({
       standalone: true,
       imports: [MyComponent],
       template: `<my-cmp></my-cmp>`,
-      providers:
-          [{provide: String, useValue: 'From app component'}, {provide: Some, useClass: SomeInj}]
+      providers: [
+        {provide: String, useValue: 'From app component'},
+        {provide: Some, useClass: SomeInj},
+      ],
     })
-    class AppComponent {
-    }
+    class AppComponent {}
 
     it('should work from within the template', () => {
       const fixture = TestBed.createComponent(AppComponent);
@@ -1276,25 +1332,24 @@ describe('providers', () => {
       expect(ɵɵgetInheritedFactory(GrandParent).name).toBeFalsy();
     });
 
-    it('should find the correct factories if parent and grandparent classes have a custom decorator',
-       () => {
-         @addFoo()
-         class GrandParent {
-           static ɵfac = function GrandParent_Factory() {};
-         }
-
-         @addFoo()
-         class Parent extends GrandParent {
-           static override ɵfac = function Parent_Factory() {};
-         }
-
-         class Child extends Parent {
-           static override ɵfac = function Child_Factory() {};
-         }
-
-         expect(ɵɵgetInheritedFactory(Child).name).toBe('Parent_Factory');
-         expect(ɵɵgetInheritedFactory(Parent).name).toBe('GrandParent_Factory');
-         expect(ɵɵgetInheritedFactory(GrandParent).name).toBeFalsy();
-       });
+    it('should find the correct factories if parent and grandparent classes have a custom decorator', () => {
+      @addFoo()
+      class GrandParent {
+        static ɵfac = function GrandParent_Factory() {};
+      }
+
+      @addFoo()
+      class Parent extends GrandParent {
+        static override ɵfac = function Parent_Factory() {};
+      }
+
+      class Child extends Parent {
+        static override ɵfac = function Child_Factory() {};
+      }
+
+      expect(ɵɵgetInheritedFactory(Child).name).toBe('Parent_Factory');
+      expect(ɵɵgetInheritedFactory(Parent).name).toBe('GrandParent_Factory');
+      expect(ɵɵgetInheritedFactory(GrandParent).name).toBeFalsy();
+    });
   });
 });
diff --git a/packages/core/test/render3/query_spec.ts b/packages/core/test/render3/query_spec.ts
index 3d3742493b05d..c7e368981039f 100644
--- a/packages/core/test/render3/query_spec.ts
+++ b/packages/core/test/render3/query_spec.ts
@@ -6,30 +6,33 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, Injectable, QueryList, TemplateRef, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
+import {
+  Component,
+  Directive,
+  Injectable,
+  QueryList,
+  TemplateRef,
+  ViewChild,
+  ViewChildren,
+  ViewContainerRef,
+} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
-
 describe('query', () => {
   describe('predicate', () => {
     describe('providers', () => {
       @Injectable()
-      class Service {
-      }
+      class Service {}
 
       @Injectable()
-      class Alias {
-      }
+      class Alias {}
 
-      let directive: MyDirective|null = null;
+      let directive: MyDirective | null = null;
 
       @Directive({
         selector: '[myDir]',
         standalone: true,
-        providers: [
-          Service,
-          {provide: Alias, useExisting: Service},
-        ],
+        providers: [Service, {provide: Alias, useExisting: Service}],
       })
       class MyDirective {
         constructor(public service: Service) {
@@ -37,7 +40,7 @@ describe('query', () => {
         }
       }
 
-      beforeEach(() => directive = null);
+      beforeEach(() => (directive = null));
 
       // https://stackblitz.com/edit/ng-viewengine-viewchild-providers?file=src%2Fapp%2Fapp.component.ts
       it('should query for providers that are present on a directive', () => {
@@ -85,7 +88,10 @@ describe('query', () => {
       standalone: true,
     })
     class SomeDir {
-      constructor(public vcr: ViewContainerRef, public temp: TemplateRef<any>) {
+      constructor(
+        public vcr: ViewContainerRef,
+        public temp: TemplateRef<any>,
+      ) {
         this.vcr.createEmbeddedView(this.temp);
       }
     }
diff --git a/packages/core/test/render3/reactive_safety_spec.ts b/packages/core/test/render3/reactive_safety_spec.ts
index 33c37b4382e77..80e929733eeed 100644
--- a/packages/core/test/render3/reactive_safety_spec.ts
+++ b/packages/core/test/render3/reactive_safety_spec.ts
@@ -6,7 +6,24 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ComponentFactoryResolver, createComponent, createEnvironmentInjector, effect, ENVIRONMENT_INITIALIZER, EnvironmentInjector, EventEmitter, inject, Injectable, InjectionToken, NgModule, Output, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  Component,
+  ComponentFactoryResolver,
+  createComponent,
+  createEnvironmentInjector,
+  effect,
+  ENVIRONMENT_INITIALIZER,
+  EnvironmentInjector,
+  EventEmitter,
+  inject,
+  Injectable,
+  InjectionToken,
+  NgModule,
+  Output,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {getActiveConsumer} from '@angular/core/primitives/signals';
 import {createInjector} from '@angular/core/src/di/create_injector';
 import {TestBed} from '@angular/core/testing';
@@ -146,28 +163,33 @@ describe('reactive safety', () => {
     it('should be safe to inject a token provided with a factory', () => {
       const token = new InjectionToken<string>('');
       const injector = createEnvironmentInjector(
-          [
-            {
-              provide: token,
-              useFactory: () => {
-                expect(getActiveConsumer()).toBe(null);
-                return '';
-              },
+        [
+          {
+            provide: token,
+            useFactory: () => {
+              expect(getActiveConsumer()).toBe(null);
+              return '';
             },
-          ],
-          TestBed.inject(EnvironmentInjector));
+          },
+        ],
+        TestBed.inject(EnvironmentInjector),
+      );
       expectNotToThrowInReactiveContext(() => injector.get(token));
     });
 
     it('should be safe to use an ENVIRONMENT_INITIALIZER', () => {
-      expectNotToThrowInReactiveContext(
-          () => createEnvironmentInjector(
-              [{
-                provide: ENVIRONMENT_INITIALIZER,
-                useValue: () => expect(getActiveConsumer()).toBe(null),
-                multi: true,
-              }],
-              TestBed.inject(EnvironmentInjector)));
+      expectNotToThrowInReactiveContext(() =>
+        createEnvironmentInjector(
+          [
+            {
+              provide: ENVIRONMENT_INITIALIZER,
+              useValue: () => expect(getActiveConsumer()).toBe(null),
+              multi: true,
+            },
+          ],
+          TestBed.inject(EnvironmentInjector),
+        ),
+      );
     });
 
     it('should be safe to use an NgModule initializer', () => {
@@ -177,8 +199,9 @@ describe('reactive safety', () => {
           expect(getActiveConsumer()).toBe(null);
         }
       }
-      expectNotToThrowInReactiveContext(
-          () => createInjector(TestModule, TestBed.inject(EnvironmentInjector)));
+      expectNotToThrowInReactiveContext(() =>
+        createInjector(TestModule, TestBed.inject(EnvironmentInjector)),
+      );
     });
 
     it('should be safe to destroy an injector', () => {
@@ -215,8 +238,11 @@ describe('reactive safety', () => {
 
 function expectNotToThrowInReactiveContext(fn: () => void): void {
   const injector = TestBed.inject(EnvironmentInjector);
-  effect(() => {
-    expect(fn).not.toThrow();
-  }, {injector});
+  effect(
+    () => {
+      expect(fn).not.toThrow();
+    },
+    {injector},
+  );
   TestBed.flushEffects();
 }
diff --git a/packages/core/test/render3/reactivity_spec.ts b/packages/core/test/render3/reactivity_spec.ts
index ac4d4c4982c94..af400bf37d372 100644
--- a/packages/core/test/render3/reactivity_spec.ts
+++ b/packages/core/test/render3/reactivity_spec.ts
@@ -7,7 +7,30 @@
  */
 
 import {AsyncPipe} from '@angular/common';
-import {AfterViewInit, ApplicationRef, Component, computed, ContentChildren, createComponent, createEnvironmentInjector, destroyPlatform, effect, EnvironmentInjector, ErrorHandler, inject, Injectable, Injector, Input, NgZone, OnChanges, QueryList, signal, SimpleChanges, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+  AfterViewInit,
+  ApplicationRef,
+  Component,
+  computed,
+  ContentChildren,
+  createComponent,
+  createEnvironmentInjector,
+  destroyPlatform,
+  effect,
+  EnvironmentInjector,
+  ErrorHandler,
+  inject,
+  Injectable,
+  Injector,
+  Input,
+  NgZone,
+  OnChanges,
+  QueryList,
+  signal,
+  SimpleChanges,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import {toObservable} from '@angular/core/rxjs-interop';
 import {TestBed} from '@angular/core/testing';
 import {bootstrapApplication} from '@angular/platform-browser';
@@ -18,32 +41,34 @@ describe('effects', () => {
   beforeEach(destroyPlatform);
   afterEach(destroyPlatform);
 
-  it('should run effects in the zone in which they get created',
-     withBody('<test-cmp></test-cmp>', async () => {
-       const log: string[] = [];
-       @Component({
-         selector: 'test-cmp',
-         standalone: true,
-         template: '',
-       })
-       class Cmp {
-         constructor(ngZone: NgZone) {
-           effect(() => {
-             log.push(Zone.current.name);
-           });
-
-           ngZone.runOutsideAngular(() => {
-             effect(() => {
-               log.push(Zone.current.name);
-             });
-           });
-         }
-       }
-
-       await bootstrapApplication(Cmp);
-
-       expect(log).not.toEqual(['angular', 'angular']);
-     }));
+  it(
+    'should run effects in the zone in which they get created',
+    withBody('<test-cmp></test-cmp>', async () => {
+      const log: string[] = [];
+      @Component({
+        selector: 'test-cmp',
+        standalone: true,
+        template: '',
+      })
+      class Cmp {
+        constructor(ngZone: NgZone) {
+          effect(() => {
+            log.push(Zone.current.name);
+          });
+
+          ngZone.runOutsideAngular(() => {
+            effect(() => {
+              log.push(Zone.current.name);
+            });
+          });
+        }
+      }
+
+      await bootstrapApplication(Cmp);
+
+      expect(log).not.toEqual(['angular', 'angular']);
+    }),
+  );
 
   it('should contribute to application stableness when an effect is pending', async () => {
     const someSignal = signal('initial');
@@ -57,19 +82,23 @@ describe('effects', () => {
     }
 
     const appRef = TestBed.inject(ApplicationRef);
-    const componentRef =
-        createComponent(App, {environmentInjector: TestBed.inject(EnvironmentInjector)});
+    const componentRef = createComponent(App, {
+      environmentInjector: TestBed.inject(EnvironmentInjector),
+    });
     // Effect is not scheduled until change detection runs for the component
     await expectAsync(firstValueFrom(appRef.isStable)).toBeResolvedTo(true);
 
     componentRef.changeDetectorRef.detectChanges();
     const stableEmits: boolean[] = [];
-    const p = firstValueFrom(appRef.isStable.pipe(
-        map(stable => {
+    const p = firstValueFrom(
+      appRef.isStable.pipe(
+        map((stable) => {
           stableEmits.push(stable);
           return stableEmits;
         }),
-        filter(emits => emits.length === 2)));
+        filter((emits) => emits.length === 2),
+      ),
+    );
     await expectAsync(p).toBeResolvedTo([false, true]);
   });
 
@@ -84,12 +113,16 @@ describe('effects', () => {
     }
 
     const injector = createEnvironmentInjector(
-        [{provide: ErrorHandler, useFactory: () => new FakeErrorHandler()}],
-        TestBed.inject(EnvironmentInjector));
-    effect(() => {
-      run = true;
-      throw new Error('fail!');
-    }, {injector});
+      [{provide: ErrorHandler, useFactory: () => new FakeErrorHandler()}],
+      TestBed.inject(EnvironmentInjector),
+    );
+    effect(
+      () => {
+        run = true;
+        throw new Error('fail!');
+      },
+      {injector},
+    );
     expect(() => TestBed.flushEffects()).not.toThrow();
     expect(run).toBeTrue();
     expect(lastError.message).toBe('fail!');
@@ -117,7 +150,7 @@ describe('effects', () => {
     @Component({
       standalone: true,
       template: '',
-      providers: [{provide: ErrorHandler, useClass: FakeErrorHandler}]
+      providers: [{provide: ErrorHandler, useClass: FakeErrorHandler}],
     })
     class App {
       errorHandler = inject(ErrorHandler);
@@ -184,9 +217,12 @@ describe('effects', () => {
       injector = inject(Injector);
 
       ngAfterViewInit(): void {
-        effect(() => {
-          didRun = true;
-        }, {injector: this.injector});
+        effect(
+          () => {
+            didRun = true;
+          },
+          {injector: this.injector},
+        );
       }
     }
 
@@ -196,24 +232,26 @@ describe('effects', () => {
     expect(didRun).toBeTrue();
   });
 
-  it('should disallow writing to signals within effects by default',
-     withBody('<test-cmp></test-cmp>', async () => {
-       @Component({
-         selector: 'test-cmp',
-         standalone: true,
-         template: '',
-       })
-       class Cmp {
-         counter = signal(0);
-         constructor() {
-           effect(() => {
-             expect(() => this.counter.set(1)).toThrow();
-           });
-         }
-       }
-
-       await bootstrapApplication(Cmp);
-     }));
+  it(
+    'should disallow writing to signals within effects by default',
+    withBody('<test-cmp></test-cmp>', async () => {
+      @Component({
+        selector: 'test-cmp',
+        standalone: true,
+        template: '',
+      })
+      class Cmp {
+        counter = signal(0);
+        constructor() {
+          effect(() => {
+            expect(() => this.counter.set(1)).toThrow();
+          });
+        }
+      }
+
+      await bootstrapApplication(Cmp);
+    }),
+  );
 
   it('should allow writing to signals within effects when option set', () => {
     const counter = signal(0);
@@ -230,8 +268,8 @@ describe('effects', () => {
       template: '{{inSignal()}}',
     })
     class WithInput implements OnChanges {
-      inSignal = signal<string|undefined>(undefined);
-      @Input() in : string|undefined;
+      inSignal = signal<string | undefined>(undefined);
+      @Input() in: string | undefined;
 
       ngOnChanges(changes: SimpleChanges): void {
         if (changes['in']) {
@@ -246,8 +284,7 @@ describe('effects', () => {
       imports: [WithInput],
       template: `<with-input [in]="'A'" />|<with-input [in]="'B'" />`,
     })
-    class Cmp {
-    }
+    class Cmp {}
 
     const fixture = TestBed.createComponent(Cmp);
     fixture.detectChanges();
@@ -274,8 +311,7 @@ describe('effects', () => {
       imports: [WithConstructor],
       template: `<with-constructor />`,
     })
-    class Cmp {
-    }
+    class Cmp {}
 
     const fixture = TestBed.createComponent(Cmp);
     fixture.detectChanges();
@@ -305,8 +341,7 @@ describe('effects', () => {
           <with-input-setter [testInput]="'binding'" />|<with-input-setter testInput="static" />
       `,
     })
-    class Cmp {
-    }
+    class Cmp {}
 
     const fixture = TestBed.createComponent(Cmp);
     fixture.detectChanges();
@@ -334,8 +369,7 @@ describe('effects', () => {
       imports: [WithQuery],
       template: `<with-query><div #item></div></with-query>`,
     })
-    class Cmp {
-    }
+    class Cmp {}
 
     const fixture = TestBed.createComponent(Cmp);
     fixture.detectChanges();
@@ -349,7 +383,6 @@ describe('effects', () => {
       selector: 'with-query-setter',
       standalone: true,
       template: '<div #el></div>',
-
     })
     class WithQuerySetter {
       el: unknown;
@@ -592,8 +625,9 @@ describe('effects', () => {
       }
 
       const fixture = TestBed.createComponent(Cmp);
-      expect(() => fixture.detectChanges(true))
-          .toThrowError(/effect\(\) cannot be called from within a reactive context./);
+      expect(() => fixture.detectChanges(true)).toThrowError(
+        /effect\(\) cannot be called from within a reactive context./,
+      );
     });
 
     it('inside computed', () => {
@@ -623,18 +657,20 @@ describe('effects', () => {
       TestBed.configureTestingModule({
         providers: [
           {
-            provide: ErrorHandler, useClass: class extends ErrorHandler{
+            provide: ErrorHandler,
+            useClass: class extends ErrorHandler {
               override handleError(e: Error) {
                 throw e;
               }
             },
           },
-        ]
+        ],
       });
       const fixture = TestBed.createComponent(Cmp);
 
-      expect(() => fixture.detectChanges())
-          .toThrowError(/effect\(\) cannot be called from within a reactive context./);
+      expect(() => fixture.detectChanges()).toThrowError(
+        /effect\(\) cannot be called from within a reactive context./,
+      );
     });
   });
 });
diff --git a/packages/core/test/render3/styling_next/static_styling_spec.ts b/packages/core/test/render3/styling_next/static_styling_spec.ts
index 3c2ff9a52fab6..e83b7b8badd7f 100644
--- a/packages/core/test/render3/styling_next/static_styling_spec.ts
+++ b/packages/core/test/render3/styling_next/static_styling_spec.ts
@@ -28,9 +28,12 @@ describe('static styling', () => {
 
   it('should initialize from attrs', () => {
     const tAttrs: TAttributes = [
-      'ignore',                               //
-      AttributeMarker.Classes, 'my-class',    //
-      AttributeMarker.Styles, 'color', 'red'  //
+      'ignore', //
+      AttributeMarker.Classes,
+      'my-class', //
+      AttributeMarker.Styles,
+      'color',
+      'red', //
     ];
     computeStaticStyling(tNode, tAttrs, true);
     expect(tNode.classes).toEqual('my-class');
@@ -39,9 +42,15 @@ describe('static styling', () => {
 
   it('should initialize from attrs when multiple', () => {
     const tAttrs: TAttributes = [
-      'ignore',                                                 //
-      AttributeMarker.Classes, 'my-class', 'other',             //
-      AttributeMarker.Styles, 'color', 'red', 'width', '100px'  //
+      'ignore', //
+      AttributeMarker.Classes,
+      'my-class',
+      'other', //
+      AttributeMarker.Styles,
+      'color',
+      'red',
+      'width',
+      '100px', //
     ];
     computeStaticStyling(tNode, tAttrs, true);
     expect(tNode.classes).toEqual('my-class other');
diff --git a/packages/core/test/render3/styling_next/style_binding_list_spec.ts b/packages/core/test/render3/styling_next/style_binding_list_spec.ts
index 6454bd432c1c7..a4bb92361e91a 100644
--- a/packages/core/test/render3/styling_next/style_binding_list_spec.ts
+++ b/packages/core/test/render3/styling_next/style_binding_list_spec.ts
@@ -8,7 +8,14 @@
 
 import {createTNode} from '@angular/core/src/render3/instructions/shared';
 import {TNode, TNodeType} from '@angular/core/src/render3/interfaces/node';
-import {getTStylingRangeNext, getTStylingRangeNextDuplicate, getTStylingRangePrev, getTStylingRangePrevDuplicate, TStylingKey, TStylingRange} from '@angular/core/src/render3/interfaces/styling';
+import {
+  getTStylingRangeNext,
+  getTStylingRangeNextDuplicate,
+  getTStylingRangePrev,
+  getTStylingRangePrevDuplicate,
+  TStylingKey,
+  TStylingRange,
+} from '@angular/core/src/render3/interfaces/styling';
 import {LView, TData} from '@angular/core/src/render3/interfaces/view';
 import {enterView, leaveView} from '@angular/core/src/render3/state';
 import {insertTStylingBinding} from '@angular/core/src/render3/styling/style_binding_list';
@@ -26,35 +33,49 @@ describe('TNode styling linked list', () => {
       insertTStylingBinding(tData, tNode, 'tmpl1', 2, false, true);
       expectRange(tNode.classBindings).toEqual([2, 2]);
       expectTData(tData).toEqual([
-        null, null,                     // 0
-        'tmpl1', [false, 0, false, 0],  // 2
+        null,
+        null, // 0
+        'tmpl1',
+        [false, 0, false, 0], // 2
       ]);
 
       insertTStylingBinding(tData, tNode, 'tmpl2', 4, false, true);
       expectRange(tNode.classBindings).toEqual([2, 4]);
       expectTData(tData).toEqual([
-        null, null,                     // 0
-        'tmpl1', [false, 0, false, 4],  // 2
-        'tmpl2', [false, 2, false, 0],  // 4
+        null,
+        null, // 0
+        'tmpl1',
+        [false, 0, false, 4], // 2
+        'tmpl2',
+        [false, 2, false, 0], // 4
       ]);
 
       insertTStylingBinding(tData, tNode, 'host1', 6, true, true);
       expectRange(tNode.classBindings).toEqual([2, 4]);
       expectTData(tData).toEqual([
-        null, null,                     // 0
-        'tmpl1', [false, 6, false, 4],  // 2
-        'tmpl2', [false, 2, false, 0],  // 4
-        'host1', [false, 0, false, 2],  // 6
+        null,
+        null, // 0
+        'tmpl1',
+        [false, 6, false, 4], // 2
+        'tmpl2',
+        [false, 2, false, 0], // 4
+        'host1',
+        [false, 0, false, 2], // 6
       ]);
 
       insertTStylingBinding(tData, tNode, 'host2', 8, true, true);
       expectRange(tNode.classBindings).toEqual([2, 4]);
       expectTData(tData).toEqual([
-        null, null,                     // 0
-        'tmpl1', [false, 8, false, 4],  // 2
-        'tmpl2', [false, 2, false, 0],  // 4
-        'host1', [false, 0, false, 8],  // 6
-        'host2', [false, 6, false, 2],  // 8
+        null,
+        null, // 0
+        'tmpl1',
+        [false, 8, false, 4], // 2
+        'tmpl2',
+        [false, 2, false, 0], // 4
+        'host1',
+        [false, 0, false, 8], // 6
+        'host2',
+        [false, 6, false, 2], // 8
       ]);
     });
 
@@ -65,16 +86,21 @@ describe('TNode styling linked list', () => {
       insertTStylingBinding(tData, tNode, 'host1', 2, true, true);
       expectRange(tNode.classBindings).toEqual([2, 0 /* no template binding */]);
       expectTData(tData).toEqual([
-        null, null,                     // 0
-        'host1', [false, 0, false, 0],  // 2
+        null,
+        null, // 0
+        'host1',
+        [false, 0, false, 0], // 2
       ]);
 
       insertTStylingBinding(tData, tNode, 'host2', 4, true, true);
       expectRange(tNode.classBindings).toEqual([4, 0 /* no template binding */]);
       expectTData(tData).toEqual([
-        null, null,                     // 0
-        'host1', [false, 0, false, 4],  // 2
-        'host2', [false, 2, false, 0],  // 4
+        null,
+        null, // 0
+        'host1',
+        [false, 0, false, 4], // 2
+        'host2',
+        [false, 2, false, 0], // 4
       ]);
     });
 
@@ -85,20 +111,25 @@ describe('TNode styling linked list', () => {
       insertTStylingBinding(tData, tNode, 'tmpl1', 2, false, true);
       expectRange(tNode.classBindings).toEqual([2, 2]);
       expectTData(tData).toEqual([
-        null, null,                     // 0
-        'tmpl1', [false, 0, false, 0],  // 2
+        null,
+        null, // 0
+        'tmpl1',
+        [false, 0, false, 0], // 2
       ]);
 
       insertTStylingBinding(tData, tNode, 'host1', 4, true, true);
       expectRange(tNode.classBindings).toEqual([2, 2]);
       expectTData(tData).toEqual([
-        null, null,                     // 0
-        'tmpl1', [false, 4, false, 0],  // 2
-        'host1', [false, 0, false, 2],  // 4
+        null,
+        null, // 0
+        'tmpl1',
+        [false, 4, false, 0], // 2
+        'host1',
+        [false, 0, false, 2], // 4
       ]);
     });
 
-    it('should support example in \'tnode_linked_list.ts\' documentation', () => {
+    it("should support example in 'tnode_linked_list.ts' documentation", () => {
       // See: `tnode_linked_list.ts` file description for this example.
       // Template: (ExampleComponent)
       //   ɵɵstyleMap({color: '#001'});   // Binding index: 10
@@ -120,181 +151,243 @@ describe('TNode styling linked list', () => {
       insertTStylingBinding(tData, tNode, null, 10, false, false);
       expectRange(tNode.styleBindings).toEqual([10, 10]);
       expectTData(tData).toEqual([
-        ...empty_0_through_9,        //
-        null, [false, 0, false, 0],  // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        null, null,                  // 12
-        ...empty_14_through_19,      // 14-19
-        null, null,                  // 20
-        null, null,                  // 22
-        null, null,                  // 24
-        null, null,                  // 26
-        null, null,                  // 28
-        null, null,                  // 30
+        ...empty_0_through_9, //
+        null,
+        [false, 0, false, 0], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        null,
+        null, // 12
+        ...empty_14_through_19, // 14-19
+        null,
+        null, // 20
+        null,
+        null, // 22
+        null,
+        null, // 24
+        null,
+        null, // 26
+        null,
+        null, // 28
+        null,
+        null, // 30
       ]);
       expectPriorityOrder(tData, tNode, false).toEqual([
-        [10, null, false, false],  // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        [10, null, false, false], // 10 - Template:  ɵɵstyleMap({color: '#001'});
       ]);
 
-
       insertTStylingBinding(tData, tNode, 'color', 12, false, false);
       expectRange(tNode.styleBindings).toEqual([10, 12]);
       expectTData(tData).toEqual([
-        ...empty_0_through_9,            //
-        null, [false, 0, false, 12],     // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        'color', [false, 10, false, 0],  // 12 - Template:  ɵɵstyleProp('color', '#002'});
-        ...empty_14_through_19,          // 14-19
-        null, null,                      // 20
-        null, null,                      // 22
-        null, null,                      // 24
-        null, null,                      // 26
-        null, null,                      // 28
-        null, null,                      // 30
+        ...empty_0_through_9, //
+        null,
+        [false, 0, false, 12], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        'color',
+        [false, 10, false, 0], // 12 - Template:  ɵɵstyleProp('color', '#002'});
+        ...empty_14_through_19, // 14-19
+        null,
+        null, // 20
+        null,
+        null, // 22
+        null,
+        null, // 24
+        null,
+        null, // 26
+        null,
+        null, // 28
+        null,
+        null, // 30
       ]);
       expectPriorityOrder(tData, tNode, false).toEqual([
-        [10, null, false, true],     // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        [12, 'color', true, false],  // 12 - Template:  ɵɵstyleProp('color', '#002'});
+        [10, null, false, true], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        [12, 'color', true, false], // 12 - Template:  ɵɵstyleProp('color', '#002'});
       ]);
 
       insertTStylingBinding(tData, tNode, null, 20, true, false);
       expectRange(tNode.styleBindings).toEqual([10, 12]);
       expectTData(tData).toEqual([
-        ...empty_0_through_9,            //
-        null, [false, 20, false, 12],    // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        'color', [false, 10, false, 0],  // 12 - Template:  ɵɵstyleProp('color', '#002'});
-        ...empty_14_through_19,          // 14-19
-        null, [false, 0, false, 10],     // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
-        null, null,                      // 22
-        null, null,                      // 24
-        null, null,                      // 26
-        null, null,                      // 28
-        null, null,                      // 30
+        ...empty_0_through_9, //
+        null,
+        [false, 20, false, 12], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        'color',
+        [false, 10, false, 0], // 12 - Template:  ɵɵstyleProp('color', '#002'});
+        ...empty_14_through_19, // 14-19
+        null,
+        [false, 0, false, 10], // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
+        null,
+        null, // 22
+        null,
+        null, // 24
+        null,
+        null, // 26
+        null,
+        null, // 28
+        null,
+        null, // 30
       ]);
       expectPriorityOrder(tData, tNode, false).toEqual([
-        [20, null, false, true],     // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
-        [10, null, true, true],      // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        [12, 'color', true, false],  // 12 - Template:  ɵɵstyleProp('color', '#002'});
+        [20, null, false, true], // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
+        [10, null, true, true], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        [12, 'color', true, false], // 12 - Template:  ɵɵstyleProp('color', '#002'});
       ]);
 
       insertTStylingBinding(tData, tNode, 'color', 22, true, false);
       expectRange(tNode.styleBindings).toEqual([10, 12]);
       expectTData(tData).toEqual([
-        ...empty_0_through_9,             // 00-09
-        null, [false, 22, false, 12],     // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        'color', [false, 10, false, 0],   // 12 - Template:  ɵɵstyleProp('color', '#002'});
-        ...empty_14_through_19,           // 14-19
-        null, [false, 0, false, 22],      // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
-        'color', [false, 20, false, 10],  // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
-        null, null,                       // 24
-        null, null,                       // 26
-        null, null,                       // 28
-        null, null,                       // 30
+        ...empty_0_through_9, // 00-09
+        null,
+        [false, 22, false, 12], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        'color',
+        [false, 10, false, 0], // 12 - Template:  ɵɵstyleProp('color', '#002'});
+        ...empty_14_through_19, // 14-19
+        null,
+        [false, 0, false, 22], // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
+        'color',
+        [false, 20, false, 10], // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
+        null,
+        null, // 24
+        null,
+        null, // 26
+        null,
+        null, // 28
+        null,
+        null, // 30
       ]);
       expectPriorityOrder(tData, tNode, false).toEqual([
-        [20, null, false, true],     // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
-        [22, 'color', true, true],   // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
-        [10, null, true, true],      // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        [12, 'color', true, false],  // 12 - Template:  ɵɵstyleProp('color', '#002'});
+        [20, null, false, true], // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
+        [22, 'color', true, true], // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
+        [10, null, true, true], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        [12, 'color', true, false], // 12 - Template:  ɵɵstyleProp('color', '#002'});
       ]);
 
       insertTStylingBinding(tData, tNode, null, 24, true, false);
       expectRange(tNode.styleBindings).toEqual([10, 12]);
       expectTData(tData).toEqual([
-        ...empty_0_through_9,             //
-        null, [false, 24, false, 12],     // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        'color', [false, 10, false, 0],   // 12 - Template:  ɵɵstyleProp('color', '#002'});
-        ...empty_14_through_19,           // 14-19
-        null, [false, 0, false, 22],      // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
-        'color', [false, 20, false, 24],  // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
-        null, [false, 22, false, 10],     // 24 - Style1Directive:  ɵɵstyleMap({color: '#003'});
-        null, null,                       // 26
-        null, null,                       // 28
-        null, null,                       // 30
+        ...empty_0_through_9, //
+        null,
+        [false, 24, false, 12], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        'color',
+        [false, 10, false, 0], // 12 - Template:  ɵɵstyleProp('color', '#002'});
+        ...empty_14_through_19, // 14-19
+        null,
+        [false, 0, false, 22], // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
+        'color',
+        [false, 20, false, 24], // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
+        null,
+        [false, 22, false, 10], // 24 - Style1Directive:  ɵɵstyleMap({color: '#003'});
+        null,
+        null, // 26
+        null,
+        null, // 28
+        null,
+        null, // 30
       ]);
       expectPriorityOrder(tData, tNode, false).toEqual([
-        [20, null, false, true],     // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
-        [22, 'color', true, true],   // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
-        [24, null, true, true],      // 24 - Style1Directive:  ɵɵstyleMap({color: '#003'});
-        [10, null, true, true],      // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        [12, 'color', true, false],  // 12 - Template:  ɵɵstyleProp('color', '#002'});
+        [20, null, false, true], // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
+        [22, 'color', true, true], // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
+        [24, null, true, true], // 24 - Style1Directive:  ɵɵstyleMap({color: '#003'});
+        [10, null, true, true], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        [12, 'color', true, false], // 12 - Template:  ɵɵstyleProp('color', '#002'});
       ]);
 
       insertTStylingBinding(tData, tNode, 'color', 26, true, false);
       expectRange(tNode.styleBindings).toEqual([10, 12]);
       expectTData(tData).toEqual([
-        ...empty_0_through_9,             // 00-09
-        null, [false, 26, false, 12],     // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        'color', [false, 10, false, 0],   // 12 - Template:  ɵɵstyleProp('color', '#002'});
-        ...empty_14_through_19,           // 14-19
-        null, [false, 0, false, 22],      // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
-        'color', [false, 20, false, 24],  // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
-        null, [false, 22, false, 26],     // 24 - Style1Directive:  ɵɵstyleMap({color: '#005'});
-        'color', [false, 24, false, 10],  // 26 - Style1Directive:  ɵɵstyleProp('color', '#006'});
-        null, null,                       // 28
-        null, null,                       // 30
+        ...empty_0_through_9, // 00-09
+        null,
+        [false, 26, false, 12], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        'color',
+        [false, 10, false, 0], // 12 - Template:  ɵɵstyleProp('color', '#002'});
+        ...empty_14_through_19, // 14-19
+        null,
+        [false, 0, false, 22], // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
+        'color',
+        [false, 20, false, 24], // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
+        null,
+        [false, 22, false, 26], // 24 - Style1Directive:  ɵɵstyleMap({color: '#005'});
+        'color',
+        [false, 24, false, 10], // 26 - Style1Directive:  ɵɵstyleProp('color', '#006'});
+        null,
+        null, // 28
+        null,
+        null, // 30
       ]);
       expectPriorityOrder(tData, tNode, false).toEqual([
-        [20, null, false, true],     // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
-        [22, 'color', true, true],   // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
-        [24, null, true, true],      // 24 - Style1Directive:  ɵɵstyleMap({color: '#003'});
-        [26, 'color', true, true],   // 26 - Style1Directive:  ɵɵstyleProp('color', '#006'});
-        [10, null, true, true],      // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        [12, 'color', true, false],  // 12 - Template:  ɵɵstyleProp('color', '#002'});
+        [20, null, false, true], // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
+        [22, 'color', true, true], // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
+        [24, null, true, true], // 24 - Style1Directive:  ɵɵstyleMap({color: '#003'});
+        [26, 'color', true, true], // 26 - Style1Directive:  ɵɵstyleProp('color', '#006'});
+        [10, null, true, true], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        [12, 'color', true, false], // 12 - Template:  ɵɵstyleProp('color', '#002'});
       ]);
 
-
       insertTStylingBinding(tData, tNode, null, 28, true, false);
       expectRange(tNode.styleBindings).toEqual([10, 12]);
       expectTData(tData).toEqual([
-        ...empty_0_through_9,             //
-        null, [false, 28, false, 12],     // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        'color', [false, 10, false, 0],   // 12 - Template:  ɵɵstyleProp('color', '#002'});
-        ...empty_14_through_19,           // 14-19
-        null, [false, 0, false, 22],      // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
-        'color', [false, 20, false, 24],  // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
-        null, [false, 22, false, 26],     // 24 - Style1Directive:  ɵɵstyleMap({color: '#005'});
-        'color', [false, 24, false, 28],  // 26 - Style1Directive:  ɵɵstyleProp('color', '#006'});
-        null, [false, 26, false, 10],     // 28 - Style2Directive:  ɵɵstyleMap({color: '#007'});
-        null, null,                       // 30
+        ...empty_0_through_9, //
+        null,
+        [false, 28, false, 12], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        'color',
+        [false, 10, false, 0], // 12 - Template:  ɵɵstyleProp('color', '#002'});
+        ...empty_14_through_19, // 14-19
+        null,
+        [false, 0, false, 22], // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
+        'color',
+        [false, 20, false, 24], // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
+        null,
+        [false, 22, false, 26], // 24 - Style1Directive:  ɵɵstyleMap({color: '#005'});
+        'color',
+        [false, 24, false, 28], // 26 - Style1Directive:  ɵɵstyleProp('color', '#006'});
+        null,
+        [false, 26, false, 10], // 28 - Style2Directive:  ɵɵstyleMap({color: '#007'});
+        null,
+        null, // 30
       ]);
       expectPriorityOrder(tData, tNode, false).toEqual([
-        [20, null, false, true],     // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
-        [22, 'color', true, true],   // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
-        [24, null, true, true],      // 24 - Style1Directive:  ɵɵstyleMap({color: '#003'});
-        [26, 'color', true, true],   // 26 - Style1Directive:  ɵɵstyleProp('color', '#006'});
-        [28, null, true, true],      // 28 - Style2Directive:  ɵɵstyleMap({color: '#007'});
-        [10, null, true, true],      // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        [12, 'color', true, false],  // 12 - Template:  ɵɵstyleProp('color', '#002'});
+        [20, null, false, true], // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
+        [22, 'color', true, true], // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
+        [24, null, true, true], // 24 - Style1Directive:  ɵɵstyleMap({color: '#003'});
+        [26, 'color', true, true], // 26 - Style1Directive:  ɵɵstyleProp('color', '#006'});
+        [28, null, true, true], // 28 - Style2Directive:  ɵɵstyleMap({color: '#007'});
+        [10, null, true, true], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        [12, 'color', true, false], // 12 - Template:  ɵɵstyleProp('color', '#002'});
       ]);
 
       insertTStylingBinding(tData, tNode, 'color', 30, true, false);
       expectRange(tNode.styleBindings).toEqual([10, 12]);
       expectTData(tData).toEqual([
-        ...empty_0_through_9,             // 00-09
-        null, [false, 30, false, 12],     // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        'color', [false, 10, false, 0],   // 12 - Template:  ɵɵstyleProp('color', '#002'});
-        ...empty_14_through_19,           // 14-19
-        null, [false, 0, false, 22],      // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
-        'color', [false, 20, false, 24],  // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
-        null, [false, 22, false, 26],     // 24 - Style1Directive:  ɵɵstyleMap({color: '#005'});
-        'color', [false, 24, false, 28],  // 26 - Style1Directive:  ɵɵstyleProp('color', '#006'});
-        null, [false, 26, false, 30],     // 28 - Style2Directive:  ɵɵstyleMap({color: '#007'});
-        'color', [false, 28, false, 10],  // 30 - Style2Directive:  ɵɵstyleProp('color', '#008'});
+        ...empty_0_through_9, // 00-09
+        null,
+        [false, 30, false, 12], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        'color',
+        [false, 10, false, 0], // 12 - Template:  ɵɵstyleProp('color', '#002'});
+        ...empty_14_through_19, // 14-19
+        null,
+        [false, 0, false, 22], // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
+        'color',
+        [false, 20, false, 24], // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
+        null,
+        [false, 22, false, 26], // 24 - Style1Directive:  ɵɵstyleMap({color: '#005'});
+        'color',
+        [false, 24, false, 28], // 26 - Style1Directive:  ɵɵstyleProp('color', '#006'});
+        null,
+        [false, 26, false, 30], // 28 - Style2Directive:  ɵɵstyleMap({color: '#007'});
+        'color',
+        [false, 28, false, 10], // 30 - Style2Directive:  ɵɵstyleProp('color', '#008'});
       ]);
       expectPriorityOrder(tData, tNode, false).toEqual([
-        [20, null, false, true],     // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
-        [22, 'color', true, true],   // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
-        [24, null, true, true],      // 24 - Style1Directive:  ɵɵstyleMap({color: '#005'});
-        [26, 'color', true, true],   // 26 - Style1Directive:  ɵɵstyleProp('color', '#006'});
-        [28, null, true, true],      // 28 - Style2Directive:  ɵɵstyleMap({color: '#007'});
-        [30, 'color', true, true],   // 30 - Style2Directive:  ɵɵstyleProp('color', '#008'});
-        [10, null, true, true],      // 10 - Template:  ɵɵstyleMap({color: '#001'});
-        [12, 'color', true, false],  // 12 - Template:  ɵɵstyleProp('color', '#002'});
+        [20, null, false, true], // 20 - MyComponent:  ɵɵstyleMap({color: '#003'});
+        [22, 'color', true, true], // 22 - MyComponent:  ɵɵstyleProp('color', '#004'});
+        [24, null, true, true], // 24 - Style1Directive:  ɵɵstyleMap({color: '#005'});
+        [26, 'color', true, true], // 26 - Style1Directive:  ɵɵstyleProp('color', '#006'});
+        [28, null, true, true], // 28 - Style2Directive:  ɵɵstyleMap({color: '#007'});
+        [30, 'color', true, true], // 30 - Style2Directive:  ɵɵstyleProp('color', '#008'});
+        [10, null, true, true], // 10 - Template:  ɵɵstyleMap({color: '#001'});
+        [12, 'color', true, false], // 12 - Template:  ɵɵstyleProp('color', '#002'});
       ]);
     });
   });
 
   describe('markDuplicates', () => {
-    it('should not mark items as duplicate if names don\'t match', () => {
+    it("should not mark items as duplicate if names don't match", () => {
       const tNode = createTNode(null!, null!, TNodeType.Element, 0, '', null);
       const tData: TData = [null, null];
       insertTStylingBinding(tData, tNode, 'color', 2, false, false);
@@ -437,43 +530,44 @@ const empty_14_through_19 = [null, null, null, null, null, null];
 
 function expectRange(tStylingRange: TStylingRange) {
   return expect([
-    getTStylingRangePrev(tStylingRange),  //
-    getTStylingRangeNext(tStylingRange),  //
+    getTStylingRangePrev(tStylingRange), //
+    getTStylingRangeNext(tStylingRange), //
   ]);
 }
 
 function expectTData(tData: TData) {
-  return expect(tData.map((tStylingRange: any) => {
-    return typeof tStylingRange === 'number' ?
-        [
-          false,
-          getTStylingRangePrev(tStylingRange as any),  //
-          false,
-          getTStylingRangeNext(tStylingRange as any),  //
-        ] :
-        tStylingRange;
-  }));
+  return expect(
+    tData.map((tStylingRange: any) => {
+      return typeof tStylingRange === 'number'
+        ? [
+            false,
+            getTStylingRangePrev(tStylingRange as any), //
+            false,
+            getTStylingRangeNext(tStylingRange as any), //
+          ]
+        : tStylingRange;
+    }),
+  );
 }
 
 function expectPriorityOrder(tData: TData, tNode: TNode, isClassBinding: boolean) {
   // first find head.
   let index = getStylingBindingHead(tData, tNode, isClassBinding);
-  const indexes: [number, string|null, boolean, boolean][] = [];
+  const indexes: [number, string | null, boolean, boolean][] = [];
   while (index !== 0) {
     let key = tData[index] as TStylingKey | null;
     const tStylingRange = tData[index + 1] as TStylingRange;
     indexes.push([
-      index,                                         //
-      key as string,                                 //
-      getTStylingRangePrevDuplicate(tStylingRange),  //
-      getTStylingRangeNextDuplicate(tStylingRange),  //
+      index, //
+      key as string, //
+      getTStylingRangePrevDuplicate(tStylingRange), //
+      getTStylingRangeNextDuplicate(tStylingRange), //
     ]);
     index = getTStylingRangeNext(tStylingRange);
   }
   return expect(indexes);
 }
 
-
 /**
  * Find the head of the styling binding linked list.
  */
diff --git a/packages/core/test/render3/testing_spec.ts b/packages/core/test/render3/testing_spec.ts
index e7319d7af887e..052281f5a119e 100644
--- a/packages/core/test/render3/testing_spec.ts
+++ b/packages/core/test/render3/testing_spec.ts
@@ -12,27 +12,35 @@ describe('testing', () => {
   describe('withBody', () => {
     let passed: boolean;
 
-    beforeEach(() => passed = false);
+    beforeEach(() => (passed = false));
     afterEach(() => expect(passed).toEqual(true));
 
-    it('should set up body', withBody('<span>works!</span>', () => {
-         expect(document.body.innerHTML).toEqual('<span>works!</span>');
-         passed = true;
-       }));
-
-    it('should support promises', withBody('<span>works!</span>', () => {
-         return Promise.resolve(true).then(() => {
-           passed = true;
-         });
-       }));
-
-    it('should support async and await', withBody('<span>works!</span>', async () => {
-         await Promise.resolve(true);
-         passed = true;
-       }));
+    it(
+      'should set up body',
+      withBody('<span>works!</span>', () => {
+        expect(document.body.innerHTML).toEqual('<span>works!</span>');
+        passed = true;
+      }),
+    );
+
+    it(
+      'should support promises',
+      withBody('<span>works!</span>', () => {
+        return Promise.resolve(true).then(() => {
+          passed = true;
+        });
+      }),
+    );
+
+    it(
+      'should support async and await',
+      withBody('<span>works!</span>', async () => {
+        await Promise.resolve(true);
+        passed = true;
+      }),
+    );
   });
 
-
   describe('domino', () => {
     it('should have document present', () => {
       // In Browser this tests passes, bun we also want to make sure we pass in node.js
diff --git a/packages/core/test/render3/util/attr_util_spec.ts b/packages/core/test/render3/util/attr_util_spec.ts
index 8502b9ffd96aa..d0a632db4532c 100644
--- a/packages/core/test/render3/util/attr_util_spec.ts
+++ b/packages/core/test/render3/util/attr_util_spec.ts
@@ -67,38 +67,95 @@ describe('attr_util', () => {
 
       mergeHostAttribute(attrs, AttributeMarker.Styles, 'Style', null, 'v1');
       expect(attrs).toEqual([
-        'Key', 'value', AttributeMarker.Classes, 'CLASS', AttributeMarker.Styles, 'Style', 'v1'
+        'Key',
+        'value',
+        AttributeMarker.Classes,
+        'CLASS',
+        AttributeMarker.Styles,
+        'Style',
+        'v1',
       ]);
 
       mergeHostAttribute(attrs, -1, 'Key2', null, 'value2');
       expect(attrs).toEqual([
-        'Key', 'value', 'Key2', 'value2', AttributeMarker.Classes, 'CLASS', AttributeMarker.Styles,
-        'Style', 'v1'
+        'Key',
+        'value',
+        'Key2',
+        'value2',
+        AttributeMarker.Classes,
+        'CLASS',
+        AttributeMarker.Styles,
+        'Style',
+        'v1',
       ]);
 
       mergeHostAttribute(attrs, AttributeMarker.Classes, 'CLASS2', null, null);
       expect(attrs).toEqual([
-        'Key', 'value', 'Key2', 'value2', AttributeMarker.Classes, 'CLASS', 'CLASS2',
-        AttributeMarker.Styles, 'Style', 'v1'
+        'Key',
+        'value',
+        'Key2',
+        'value2',
+        AttributeMarker.Classes,
+        'CLASS',
+        'CLASS2',
+        AttributeMarker.Styles,
+        'Style',
+        'v1',
       ]);
 
       mergeHostAttribute(attrs, AttributeMarker.Styles, 'Style2', null, 'v2');
       expect(attrs).toEqual([
-        'Key', 'value', 'Key2', 'value2', AttributeMarker.Classes, 'CLASS', 'CLASS2',
-        AttributeMarker.Styles, 'Style', 'v1', 'Style2', 'v2'
+        'Key',
+        'value',
+        'Key2',
+        'value2',
+        AttributeMarker.Classes,
+        'CLASS',
+        'CLASS2',
+        AttributeMarker.Styles,
+        'Style',
+        'v1',
+        'Style2',
+        'v2',
       ]);
 
       mergeHostAttribute(attrs, AttributeMarker.NamespaceURI, 'uri', 'key', 'value');
       expect(attrs).toEqual([
-        'Key', 'value', 'Key2', 'value2', AttributeMarker.NamespaceURI, 'uri', 'key', 'value',
-        AttributeMarker.Classes, 'CLASS', 'CLASS2', AttributeMarker.Styles, 'Style', 'v1', 'Style2',
-        'v2'
+        'Key',
+        'value',
+        'Key2',
+        'value2',
+        AttributeMarker.NamespaceURI,
+        'uri',
+        'key',
+        'value',
+        AttributeMarker.Classes,
+        'CLASS',
+        'CLASS2',
+        AttributeMarker.Styles,
+        'Style',
+        'v1',
+        'Style2',
+        'v2',
       ]);
       mergeHostAttribute(attrs, AttributeMarker.NamespaceURI, 'uri', 'key', 'new value');
       expect(attrs).toEqual([
-        'Key', 'value', 'Key2', 'value2', AttributeMarker.NamespaceURI, 'uri', 'key', 'new value',
-        AttributeMarker.Classes, 'CLASS', 'CLASS2', AttributeMarker.Styles, 'Style', 'v1', 'Style2',
-        'v2'
+        'Key',
+        'value',
+        'Key2',
+        'value2',
+        AttributeMarker.NamespaceURI,
+        'uri',
+        'key',
+        'new value',
+        AttributeMarker.Classes,
+        'CLASS',
+        'CLASS2',
+        AttributeMarker.Styles,
+        'Style',
+        'v1',
+        'Style2',
+        'v2',
       ]);
     });
   });
diff --git a/packages/core/test/render3/util/stringify_util_spec.ts b/packages/core/test/render3/util/stringify_util_spec.ts
index 3bd65ce18e5ec..2e6c84e98b1ca 100644
--- a/packages/core/test/render3/util/stringify_util_spec.ts
+++ b/packages/core/test/render3/util/stringify_util_spec.ts
@@ -11,19 +11,18 @@ import {debugStringifyTypeForError} from '@angular/core/src/render3/util/stringi
 
 describe('stringify utils', () => {
   describe('stringifyTypeForError util', () => {
-    it('should include the file path and line number for component if debug info includes them',
-       () => {
-         class Comp {
-           static ɵcmp = ɵɵdefineComponent({type: Comp, decls: 0, vars: 0, template: () => ''});
-         }
-         ɵsetClassDebugInfo(Comp, {
-           className: 'Comp',
-           filePath: 'comp.ts',
-           lineNumber: 11,
-         });
+    it('should include the file path and line number for component if debug info includes them', () => {
+      class Comp {
+        static ɵcmp = ɵɵdefineComponent({type: Comp, decls: 0, vars: 0, template: () => ''});
+      }
+      ɵsetClassDebugInfo(Comp, {
+        className: 'Comp',
+        filePath: 'comp.ts',
+        lineNumber: 11,
+      });
 
-         expect(debugStringifyTypeForError(Comp)).toBe('Comp (at comp.ts:11)');
-       });
+      expect(debugStringifyTypeForError(Comp)).toBe('Comp (at comp.ts:11)');
+    });
 
     it('should include only the class name if debug info does not contain file path', () => {
       class Comp {
@@ -37,13 +36,12 @@ describe('stringify utils', () => {
       expect(debugStringifyTypeForError(Comp)).toBe('Comp');
     });
 
-    it('should default to showing just the class name for component if debug info is not available',
-       () => {
-         class Comp {
-           static ɵcmp = ɵɵdefineComponent({type: Comp, decls: 0, vars: 0, template: () => ''});
-         }
+    it('should default to showing just the class name for component if debug info is not available', () => {
+      class Comp {
+        static ɵcmp = ɵɵdefineComponent({type: Comp, decls: 0, vars: 0, template: () => ''});
+      }
 
-         expect(debugStringifyTypeForError(Comp)).toBe('Comp');
-       });
+      expect(debugStringifyTypeForError(Comp)).toBe('Comp');
+    });
   });
 });
diff --git a/packages/core/test/render3/utils.ts b/packages/core/test/render3/utils.ts
index ff2d797f30386..7872fdcf0956a 100644
--- a/packages/core/test/render3/utils.ts
+++ b/packages/core/test/render3/utils.ts
@@ -1,4 +1,3 @@
-
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -7,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 /** Template string function that can be used to strip indentation from a given string literal. */
 export function dedent(strings: TemplateStringsArray, ...values: any[]) {
   let joinedString = '';
@@ -23,7 +21,9 @@ export function dedent(strings: TemplateStringsArray, ...values: any[]) {
     lines.pop();
   }
   let minWhitespacePrefix = lines.reduce(
-      (min, line) => Math.min(min, numOfWhiteSpaceLeadingChars(line)), Number.MAX_SAFE_INTEGER);
+    (min, line) => Math.min(min, numOfWhiteSpaceLeadingChars(line)),
+    Number.MAX_SAFE_INTEGER,
+  );
   return lines.map((line) => line.substring(minWhitespacePrefix)).join('\n');
 }
 
@@ -46,7 +46,6 @@ function numOfWhiteSpaceLeadingChars(text: string): number {
   return text.match(/^\s*/)![0].length;
 }
 
-
 /**
  * Jasmine AsymmetricMatcher which can be used to assert `.debug` properties.
  *
@@ -61,13 +60,13 @@ function numOfWhiteSpaceLeadingChars(text: string): number {
  * @param expected Expected value.
  */
 export function matchDebug<T>(expected: T): any {
-  const matcher = function() {};
+  const matcher = function () {};
   let actual: any = matchDebug;
 
-  matcher.asymmetricMatch = function(objectWithDebug: any, matchersUtil: jasmine.MatchersUtil) {
-    return matchersUtil.equals(actual = objectWithDebug.debug, expected);
+  matcher.asymmetricMatch = function (objectWithDebug: any, matchersUtil: jasmine.MatchersUtil) {
+    return matchersUtil.equals((actual = objectWithDebug.debug), expected);
   };
-  matcher.jasmineToString = function(pp: (value: any) => string) {
+  matcher.jasmineToString = function (pp: (value: any) => string) {
     if (actual === matchDebug) {
       // `asymmetricMatch` never got called hence no error to display
       return '';
@@ -78,15 +77,23 @@ export function matchDebug<T>(expected: T): any {
 }
 
 export function buildFailureMessage(
-    actual: any, expected: any, pp: (value: any) => string): string {
+  actual: any,
+  expected: any,
+  pp: (value: any) => string,
+): string {
   const diffs: string[] = [];
   listPropertyDifferences(diffs, '', actual, expected, 5, pp);
   return '\n  ' + diffs.join('\n  ');
 }
 
 function listPropertyDifferences(
-    diffs: string[], path: string, actual: any, expected: any, depth: number,
-    pp: (value: any) => string) {
+  diffs: string[],
+  path: string,
+  actual: any,
+  expected: any,
+  depth: number,
+  pp: (value: any) => string,
+) {
   if (actual === expected) return;
   if (typeof actual !== typeof expected) {
     diffs.push(`${path}: Expected ${pp(actual)} to be ${pp(expected)}`);
@@ -96,16 +103,33 @@ function listPropertyDifferences(
     } else {
       const maxLength = Math.max(actual.length, expected.length);
       listPropertyDifferences(
-          diffs, path + '.length', expected.length, actual.length, depth - 1, pp);
+        diffs,
+        path + '.length',
+        expected.length,
+        actual.length,
+        depth - 1,
+        pp,
+      );
       for (let i = 0; i < maxLength; i++) {
         const actualItem = actual[i];
         const expectedItem = expected[i];
         listPropertyDifferences(
-            diffs, path + '[' + i + ']', actualItem, expectedItem, depth - 1, pp);
+          diffs,
+          path + '[' + i + ']',
+          actualItem,
+          expectedItem,
+          depth - 1,
+          pp,
+        );
       }
     }
   } else if (
-      depth && expected && typeof expected === 'object' && actual && typeof actual === 'object') {
+    depth &&
+    expected &&
+    typeof expected === 'object' &&
+    actual &&
+    typeof actual === 'object'
+  ) {
     new Set(Object.keys(expected).concat(Object.keys(actual))).forEach((key) => {
       const actualItem = actual[key];
       const expectedItem = expected[key];
diff --git a/packages/core/test/render3/view_fixture.ts b/packages/core/test/render3/view_fixture.ts
index b20aec610b5a5..7ae9e86bd1df5 100644
--- a/packages/core/test/render3/view_fixture.ts
+++ b/packages/core/test/render3/view_fixture.ts
@@ -13,9 +13,23 @@ import {extractDirectiveDef} from '../../src/render3/definition';
 import {refreshView} from '../../src/render3/instructions/change_detection';
 import {renderView} from '../../src/render3/instructions/render';
 import {createLView, createTNode, createTView} from '../../src/render3/instructions/shared';
-import {DirectiveDef, DirectiveDefList, DirectiveTypesOrFactory, PipeDef, PipeDefList, PipeTypesOrFactory, RenderFlags} from '../../src/render3/interfaces/definition';
+import {
+  DirectiveDef,
+  DirectiveDefList,
+  DirectiveTypesOrFactory,
+  PipeDef,
+  PipeDefList,
+  PipeTypesOrFactory,
+  RenderFlags,
+} from '../../src/render3/interfaces/definition';
 import {TConstants, TElementNode, TNodeType} from '../../src/render3/interfaces/node';
-import {HEADER_OFFSET, LView, LViewFlags, TView, TViewType} from '../../src/render3/interfaces/view';
+import {
+  HEADER_OFFSET,
+  LView,
+  LViewFlags,
+  TView,
+  TViewType,
+} from '../../src/render3/interfaces/view';
 import {enterView, leaveView, specOnlyIsInstructionStateEmpty} from '../../src/render3/state';
 import {noop} from '../../src/util/noop';
 
@@ -49,36 +63,66 @@ export class ViewFixture {
 
   lView: LView;
 
-  constructor({create, update, decls, vars, consts, context, directives, sanitizer}: {
-    create?: () => void,
-    update?: () => void,
-    decls?: number,
-    vars?: number,
-    consts?: TConstants,
-    context?: {},
-    directives?: any[],
-    sanitizer?: Sanitizer
+  constructor({
+    create,
+    update,
+    decls,
+    vars,
+    consts,
+    context,
+    directives,
+    sanitizer,
+  }: {
+    create?: () => void;
+    update?: () => void;
+    decls?: number;
+    vars?: number;
+    consts?: TConstants;
+    context?: {};
+    directives?: any[];
+    sanitizer?: Sanitizer;
   } = {}) {
     this.context = context;
     this.createFn = create;
     this.updateFn = update;
 
-    const document = ((typeof global == 'object' && global || window) as any).document;
+    const document = (((typeof global == 'object' && global) || window) as any).document;
     const rendererFactory = getRendererFactory2(document);
 
     const hostRenderer = rendererFactory.createRenderer(null, null);
     this.host = hostRenderer.createElement('host-element') as HTMLElement;
-    const hostTView =
-        createTView(TViewType.Root, null, null, 1, 0, null, null, null, null, null, null);
+    const hostTView = createTView(
+      TViewType.Root,
+      null,
+      null,
+      1,
+      0,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+    );
     const hostLView = createLView(
-        null, hostTView, {}, LViewFlags.CheckAlways | LViewFlags.IsRoot, null, null, {
-          rendererFactory,
-          sanitizer: sanitizer || null,
-          afterRenderEventManager: new AfterRenderEventManager(),
-          inlineEffectRunner: null,
-          changeDetectionScheduler: null,
-        },
-        hostRenderer, null, null, null);
+      null,
+      hostTView,
+      {},
+      LViewFlags.CheckAlways | LViewFlags.IsRoot,
+      null,
+      null,
+      {
+        rendererFactory,
+        sanitizer: sanitizer || null,
+        afterRenderEventManager: new AfterRenderEventManager(),
+        inlineEffectRunner: null,
+        changeDetectionScheduler: null,
+      },
+      hostRenderer,
+      null,
+      null,
+      null,
+    );
 
     let template = noop;
     if (create) {
@@ -94,16 +138,41 @@ export class ViewFixture {
     }
 
     this.tView = createTView(
-        TViewType.Component, null, template, decls || 0, vars || 0,
-        directives ? toDefs(directives, dir => extractDirectiveDef(dir)!) : null, null, null, null,
-        consts || null, null);
-    const hostTNode =
-        createTNode(hostTView, null, TNodeType.Element, 0, 'host-element', null) as TElementNode;
+      TViewType.Component,
+      null,
+      template,
+      decls || 0,
+      vars || 0,
+      directives ? toDefs(directives, (dir) => extractDirectiveDef(dir)!) : null,
+      null,
+      null,
+      null,
+      consts || null,
+      null,
+    );
+    const hostTNode = createTNode(
+      hostTView,
+      null,
+      TNodeType.Element,
+      0,
+      'host-element',
+      null,
+    ) as TElementNode;
     // Store TNode at the first slot right after the header part
     hostTView.data[HEADER_OFFSET] = hostTNode;
     this.lView = createLView(
-        hostLView, this.tView, context || {}, LViewFlags.CheckAlways, this.host, hostTNode, null,
-        hostRenderer, null, null, null);
+      hostLView,
+      this.tView,
+      context || {},
+      LViewFlags.CheckAlways,
+      this.host,
+      hostTNode,
+      null,
+      hostRenderer,
+      null,
+      null,
+      null,
+    );
 
     if (this.createFn) {
       renderView(this.tView, this.lView, this.context);
@@ -124,9 +193,10 @@ export class ViewFixture {
     updateFn ||= this.updateFn;
     if (!updateFn) {
       throw new Error(
-          'The `ViewFixture.update` was invoked, but there was no `update` function ' +
+        'The `ViewFixture.update` was invoked, but there was no `update` function ' +
           'provided during the `ViewFixture` instantiation or specified as an argument ' +
-          'in this call.');
+          'in this call.',
+      );
     }
     refreshView(this.tView, this.lView, updateFn, this.context);
   }
@@ -154,13 +224,17 @@ export class ViewFixture {
 }
 
 function toDefs(
-    types: DirectiveTypesOrFactory|undefined|null,
-    mapFn: (type: Type<any>) => DirectiveDef<any>): DirectiveDefList|null;
-function toDefs(types: PipeTypesOrFactory|undefined|null, mapFn: (type: Type<any>) => PipeDef<any>):
-    PipeDefList|null;
+  types: DirectiveTypesOrFactory | undefined | null,
+  mapFn: (type: Type<any>) => DirectiveDef<any>,
+): DirectiveDefList | null;
 function toDefs(
-    types: Type<any>[]|(() => Type<any>[])|undefined|null,
-    mapFn: (type: Type<any>) => PipeDef<any>| DirectiveDef<any>): any {
+  types: PipeTypesOrFactory | undefined | null,
+  mapFn: (type: Type<any>) => PipeDef<any>,
+): PipeDefList | null;
+function toDefs(
+  types: Type<any>[] | (() => Type<any>[]) | undefined | null,
+  mapFn: (type: Type<any>) => PipeDef<any> | DirectiveDef<any>,
+): any {
   if (!types) return null;
   if (typeof types == 'function') {
     types = types();
@@ -173,16 +247,18 @@ function toHtml(element: Element, keepNgReflect = false): string {
     let html = stringifyElement(element);
 
     if (!keepNgReflect) {
-      html = html.replace(/\sng-reflect-\S*="[^"]*"/g, '')
-                 .replace(/<!--bindings=\{(\W.*\W\s*)?\}-->/g, '');
+      html = html
+        .replace(/\sng-reflect-\S*="[^"]*"/g, '')
+        .replace(/<!--bindings=\{(\W.*\W\s*)?\}-->/g, '');
     }
 
-    html = html.replace(/^<div host="">(.*)<\/div>$/, '$1')
-               .replace(/^<div fixture="mark">(.*)<\/div>$/, '$1')
-               .replace(/^<div host="mark">(.*)<\/div>$/, '$1')
-               .replace(' style=""', '')
-               .replace(/<!--container-->/g, '')
-               .replace(/<!--ng-container-->/g, '');
+    html = html
+      .replace(/^<div host="">(.*)<\/div>$/, '$1')
+      .replace(/^<div fixture="mark">(.*)<\/div>$/, '$1')
+      .replace(/^<div host="mark">(.*)<\/div>$/, '$1')
+      .replace(' style=""', '')
+      .replace(/<!--container-->/g, '')
+      .replace(/<!--ng-container-->/g, '');
     return html;
   } else {
     return '';
diff --git a/packages/core/test/render3/view_utils_spec.ts b/packages/core/test/render3/view_utils_spec.ts
index f5d38a0adf04c..3ad8460ce769b 100644
--- a/packages/core/test/render3/view_utils_spec.ts
+++ b/packages/core/test/render3/view_utils_spec.ts
@@ -14,8 +14,12 @@ describe('view_utils', () => {
   it('should verify unwrap methods (isLView and isLContainer)', () => {
     const viewFixture = new ViewFixture();
     const tNode = createTNode(null!, null, 3, 0, 'div', []);
-    const lContainer =
-        createLContainer(viewFixture.lView, viewFixture.lView, viewFixture.host, tNode);
+    const lContainer = createLContainer(
+      viewFixture.lView,
+      viewFixture.lView,
+      viewFixture.host,
+      tNode,
+    );
 
     expect(isLView(viewFixture.lView)).toBe(true);
     expect(isLView(lContainer)).toBe(false);
diff --git a/packages/core/test/runtime_error_spec.ts b/packages/core/test/runtime_error_spec.ts
index a2cde2a9b6243..dccb7de4d04af 100644
--- a/packages/core/test/runtime_error_spec.ts
+++ b/packages/core/test/runtime_error_spec.ts
@@ -26,20 +26,21 @@ describe('RuntimeError utils', () => {
 
   it('should correctly format an error with both an error message and an aio guide', () => {
     const error = new RuntimeError(RuntimeErrorCode.EXPORT_NOT_FOUND, 'Some error message');
-    expect(error.toString())
-        .toBe('Error: NG0301: Some error message. Find more at https://angular.io/errors/NG0301');
+    expect(error.toString()).toBe(
+      'Error: NG0301: Some error message. Find more at https://angular.io/errors/NG0301',
+    );
   });
 
-  ['.', ',', ';', '!', '?'].forEach(
-      character => it(
-          `should not add a period between the error message and the aio guide suffix if the message ends with '${
-              character}'`,
-          () => {
-            const errorMessage = `Pipe not found${character}`;
-            const error =
-                new RuntimeError<RuntimeErrorCode>(RuntimeErrorCode.PIPE_NOT_FOUND, errorMessage);
-            expect(error.toString())
-                .toBe(`Error: NG0302: Pipe not found${
-                    character} Find more at https://angular.io/errors/NG0302`);
-          }));
+  ['.', ',', ';', '!', '?'].forEach((character) =>
+    it(`should not add a period between the error message and the aio guide suffix if the message ends with '${character}'`, () => {
+      const errorMessage = `Pipe not found${character}`;
+      const error = new RuntimeError<RuntimeErrorCode>(
+        RuntimeErrorCode.PIPE_NOT_FOUND,
+        errorMessage,
+      );
+      expect(error.toString()).toBe(
+        `Error: NG0302: Pipe not found${character} Find more at https://angular.io/errors/NG0302`,
+      );
+    }),
+  );
 });
diff --git a/packages/core/test/sanitization/html_sanitizer_spec.ts b/packages/core/test/sanitization/html_sanitizer_spec.ts
index f9784343eec16..83cf8c3da6c86 100644
--- a/packages/core/test/sanitization/html_sanitizer_spec.ts
+++ b/packages/core/test/sanitization/html_sanitizer_spec.ts
@@ -21,7 +21,7 @@ describe('HTML sanitizer', () => {
   beforeEach(() => {
     defaultDoc = document;
     logMsgs = [];
-    originalLog = console.warn;  // Monkey patch DOM.log.
+    originalLog = console.warn; // Monkey patch DOM.log.
     console.warn = (msg: any) => logMsgs.push(msg);
   });
 
@@ -30,8 +30,9 @@ describe('HTML sanitizer', () => {
   });
 
   it('serializes nested structures', () => {
-    expect(sanitizeHtml(defaultDoc, '<div alt="x"><p>a</p>b<b>c<a alt="more">d</a></b>e</div>'))
-        .toEqual('<div alt="x"><p>a</p>b<b>c<a alt="more">d</a></b>e</div>');
+    expect(
+      sanitizeHtml(defaultDoc, '<div alt="x"><p>a</p>b<b>c<a alt="more">d</a></b>e</div>'),
+    ).toEqual('<div alt="x"><p>a</p>b<b>c<a alt="more">d</a></b>e</div>');
     expect(logMsgs).toEqual([]);
   });
 
@@ -44,35 +45,43 @@ describe('HTML sanitizer', () => {
   });
 
   it('supports namespaced attributes', () => {
-    expect(sanitizeHtml(defaultDoc, '<a xlink:href="something">t</a>'))
-        .toEqual('<a xlink:href="something">t</a>');
+    expect(sanitizeHtml(defaultDoc, '<a xlink:href="something">t</a>')).toEqual(
+      '<a xlink:href="something">t</a>',
+    );
     expect(sanitizeHtml(defaultDoc, '<a xlink:evil="something">t</a>')).toEqual('<a>t</a>');
-    expect(sanitizeHtml(defaultDoc, '<a xlink:href="javascript:foo()">t</a>'))
-        .toEqual('<a xlink:href="unsafe:javascript:foo()">t</a>');
+    expect(sanitizeHtml(defaultDoc, '<a xlink:href="javascript:foo()">t</a>')).toEqual(
+      '<a xlink:href="unsafe:javascript:foo()">t</a>',
+    );
   });
 
   it('supports HTML5 elements', () => {
-    expect(sanitizeHtml(defaultDoc, '<main><summary>Works</summary></main>'))
-        .toEqual('<main><summary>Works</summary></main>');
+    expect(sanitizeHtml(defaultDoc, '<main><summary>Works</summary></main>')).toEqual(
+      '<main><summary>Works</summary></main>',
+    );
   });
 
   it('supports ARIA attributes', () => {
-    expect(sanitizeHtml(defaultDoc, '<h1 role="presentation" aria-haspopup="true">Test</h1>'))
-        .toEqual('<h1 role="presentation" aria-haspopup="true">Test</h1>');
-    expect(sanitizeHtml(defaultDoc, '<i aria-label="Info">Info</i>'))
-        .toEqual('<i aria-label="Info">Info</i>');
-    expect(sanitizeHtml(defaultDoc, '<img src="pteranodon.jpg" aria-details="details">'))
-        .toEqual('<img src="pteranodon.jpg" aria-details="details">');
+    expect(
+      sanitizeHtml(defaultDoc, '<h1 role="presentation" aria-haspopup="true">Test</h1>'),
+    ).toEqual('<h1 role="presentation" aria-haspopup="true">Test</h1>');
+    expect(sanitizeHtml(defaultDoc, '<i aria-label="Info">Info</i>')).toEqual(
+      '<i aria-label="Info">Info</i>',
+    );
+    expect(sanitizeHtml(defaultDoc, '<img src="pteranodon.jpg" aria-details="details">')).toEqual(
+      '<img src="pteranodon.jpg" aria-details="details">',
+    );
   });
 
   it('ignores srcset attributes', () => {
     // Modern browsers can handle `srcset` safely without any additional sanitization.
-    expect(sanitizeHtml(defaultDoc, '<img srcset="/foo.png 400px, javascript:evil() 23px">'))
-        .toEqual('<img srcset="/foo.png 400px, javascript:evil() 23px">');
+    expect(
+      sanitizeHtml(defaultDoc, '<img srcset="/foo.png 400px, javascript:evil() 23px">'),
+    ).toEqual('<img srcset="/foo.png 400px, javascript:evil() 23px">');
 
     // Verify that complex `srcset` with URLs that contain commas are retained as is.
-    const content = '<img src="https://localhost/h_450,w_450/logo.jpg" ' +
-        'srcset="https://localhost/h_450,w_450/logo.jpg 450w, https://localhost/h_300,w_300/logo.jpg 300w">';
+    const content =
+      '<img src="https://localhost/h_450,w_450/logo.jpg" ' +
+      'srcset="https://localhost/h_450,w_450/logo.jpg 450w, https://localhost/h_300,w_300/logo.jpg 300w">';
     expect(sanitizeHtml(defaultDoc, content)).toEqual(content);
   });
 
@@ -99,19 +108,13 @@ describe('HTML sanitizer', () => {
   it('escapes entities', () => {
     expect(sanitizeHtml(defaultDoc, '<p>Hello &lt; World</p>')).toEqual('<p>Hello &lt; World</p>');
     expect(sanitizeHtml(defaultDoc, '<p>Hello < World</p>')).toEqual('<p>Hello &lt; World</p>');
-    expect(sanitizeHtml(defaultDoc, '<p alt="% &amp; &quot; !">Hello</p>'))
-        .toEqual('<p alt="% &amp; &#34; !">Hello</p>');  // NB: quote encoded as ASCII &#34;.
+    expect(sanitizeHtml(defaultDoc, '<p alt="% &amp; &quot; !">Hello</p>')).toEqual(
+      '<p alt="% &amp; &#34; !">Hello</p>',
+    ); // NB: quote encoded as ASCII &#34;.
   });
 
   describe('should strip dangerous elements (but potentially traverse their content)', () => {
-    const dangerousTags = [
-      'form',
-      'object',
-      'textarea',
-      'button',
-      'option',
-      'select',
-    ];
+    const dangerousTags = ['form', 'object', 'textarea', 'button', 'option', 'select'];
     for (const tag of dangerousTags) {
       it(tag, () => {
         expect(sanitizeHtml(defaultDoc, `<${tag}>evil!</${tag}>`)).toEqual('evil!');
@@ -133,11 +136,7 @@ describe('HTML sanitizer', () => {
       });
     }
 
-    const dangerousSkipContentTags = [
-      'script',
-      'style',
-      'template',
-    ];
+    const dangerousSkipContentTags = ['script', 'style', 'template'];
     for (const tag of dangerousSkipContentTags) {
       it(tag, () => {
         expect(sanitizeHtml(defaultDoc, `<${tag}>evil!</${tag}>`)).toEqual('');
@@ -164,16 +163,18 @@ describe('HTML sanitizer', () => {
 
   it('ignores content of script elements', () => {
     expect(sanitizeHtml(defaultDoc, '<script>var foo="<p>bar</p>"</script>')).toEqual('');
-    expect(sanitizeHtml(defaultDoc, '<script>var foo="<p>bar</p>"</script><div>hi</div>'))
-        .toEqual('<div>hi</div>');
-    expect(sanitizeHtml(defaultDoc, '<style>\<\!-- something--\>hi</style>')).toEqual('');
+    expect(sanitizeHtml(defaultDoc, '<script>var foo="<p>bar</p>"</script><div>hi</div>')).toEqual(
+      '<div>hi</div>',
+    );
+    expect(sanitizeHtml(defaultDoc, '<style><!-- something-->hi</style>')).toEqual('');
   });
 
   it('ignores content of style elements', () => {
-    expect(sanitizeHtml(defaultDoc, '<style><!-- foobar --></style><div>hi</div>'))
-        .toEqual('<div>hi</div>');
+    expect(sanitizeHtml(defaultDoc, '<style><!-- foobar --></style><div>hi</div>')).toEqual(
+      '<div>hi</div>',
+    );
     expect(sanitizeHtml(defaultDoc, '<style><!-- foobar --></style>')).toEqual('');
-    expect(sanitizeHtml(defaultDoc, '<style>\<\!-- something--\>hi</style>')).toEqual('');
+    expect(sanitizeHtml(defaultDoc, '<style><!-- something-->hi</style>')).toEqual('');
     expect(logMsgs.join('\n')).toMatch(/sanitizing HTML stripped some content/);
   });
 
@@ -182,12 +183,12 @@ describe('HTML sanitizer', () => {
     expect([
       '&lt;iframe&gt;',
       // Double-escaped on IE
-      '&amp;lt;iframe&amp;gt;'
+      '&amp;lt;iframe&amp;gt;',
     ]).toContain(sanitizeHtml(defaultDoc, '<iframe><iframe>'));
     expect([
       '&lt;script&gt;evil();&lt;/script&gt;',
       // Double-escaped on IE
-      '&amp;lt;script&amp;gt;evil();&amp;lt;/script&amp;gt;'
+      '&amp;lt;script&amp;gt;evil();&amp;lt;/script&amp;gt;',
     ]).toContain(sanitizeHtml(defaultDoc, '<iframe><script>evil();</script>'));
   });
 
@@ -232,9 +233,9 @@ describe('HTML sanitizer', () => {
 
   it('should sanitize the content when `nextSibling` or `firstChild` were clobbered', () => {
     const nextSibling = () =>
-        sanitizeHtml(defaultDoc, '<input name="nextSibling" form="a">A<form id="a"></form>');
+      sanitizeHtml(defaultDoc, '<input name="nextSibling" form="a">A<form id="a"></form>');
     const firstChild = () =>
-        sanitizeHtml(defaultDoc, '<object form="a" id="firstChild"></object>B<form id="a"></form>');
+      sanitizeHtml(defaultDoc, '<object form="a" id="firstChild"></object>B<form id="a"></form>');
 
     // Note: we have a different behavior here in a real browser and when running in Node,
     // when Domino is used to emulate DOM:
@@ -275,22 +276,23 @@ describe('HTML sanitizer', () => {
   });
 
   // See https://github.com/cure53/DOMPurify/releases/tag/0.6.7
-  it('should not allow JavaScript hidden in badly formed HTML to get through sanitization (Firefox bug)',
-     () => {
-       expect(sanitizeHtml(
-                  defaultDoc, '<svg><p><style><img src="</style><img src=x onerror=alert(1)//">'))
-           .toEqual(
-               isDOMParserAvailable() ?
-                   // PlatformBrowser output
-                   '<p><img src="x"></p>' :
-                   // PlatformServer output
-                   '<p></p>');
-     });
-
-  it('should prevent mXSS attacks', function() {
+  it('should not allow JavaScript hidden in badly formed HTML to get through sanitization (Firefox bug)', () => {
+    expect(
+      sanitizeHtml(defaultDoc, '<svg><p><style><img src="</style><img src=x onerror=alert(1)//">'),
+    ).toEqual(
+      isDOMParserAvailable()
+        ? // PlatformBrowser output
+          '<p><img src="x"></p>'
+        : // PlatformServer output
+          '<p></p>',
+    );
+  });
+
+  it('should prevent mXSS attacks', function () {
     // In Chrome Canary 62, the ideographic space character is kept as a stringified HTML entity
-    expect(sanitizeHtml(defaultDoc, '<a href="&#x3000;javascript:alert(1)">CLICKME</a>'))
-        .toMatch(/<a href="unsafe:(&#12288;)?javascript:alert\(1\)">CLICKME<\/a>/);
+    expect(sanitizeHtml(defaultDoc, '<a href="&#x3000;javascript:alert(1)">CLICKME</a>')).toMatch(
+      /<a href="unsafe:(&#12288;)?javascript:alert\(1\)">CLICKME<\/a>/,
+    );
   });
 
   if (isDOMParserAvailable()) {
diff --git a/packages/core/test/sanitization/sanitization_spec.ts b/packages/core/test/sanitization/sanitization_spec.ts
index da76dc768470a..c5bbb10322977 100644
--- a/packages/core/test/sanitization/sanitization_spec.ts
+++ b/packages/core/test/sanitization/sanitization_spec.ts
@@ -1,4 +1,3 @@
-
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -11,8 +10,24 @@ import {SECURITY_SCHEMA} from '@angular/compiler/src/schema/dom_security_schema'
 import {ENVIRONMENT, LView} from '@angular/core/src/render3/interfaces/view';
 import {enterView, leaveView} from '@angular/core/src/render3/state';
 
-import {bypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript, bypassSanitizationTrustStyle, bypassSanitizationTrustUrl} from '../../src/sanitization/bypass';
-import {getUrlSanitizer, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl, ɵɵsanitizeUrlOrResourceUrl, ɵɵtrustConstantHtml, ɵɵtrustConstantResourceUrl} from '../../src/sanitization/sanitization';
+import {
+  bypassSanitizationTrustHtml,
+  bypassSanitizationTrustResourceUrl,
+  bypassSanitizationTrustScript,
+  bypassSanitizationTrustStyle,
+  bypassSanitizationTrustUrl,
+} from '../../src/sanitization/bypass';
+import {
+  getUrlSanitizer,
+  ɵɵsanitizeHtml,
+  ɵɵsanitizeResourceUrl,
+  ɵɵsanitizeScript,
+  ɵɵsanitizeStyle,
+  ɵɵsanitizeUrl,
+  ɵɵsanitizeUrlOrResourceUrl,
+  ɵɵtrustConstantHtml,
+  ɵɵtrustConstantResourceUrl,
+} from '../../src/sanitization/sanitization';
 import {SecurityContext} from '../../src/sanitization/security';
 
 function fakeLView(): LView {
@@ -33,14 +48,18 @@ describe('sanitization', () => {
   it('should sanitize html', () => {
     expect(ɵɵsanitizeHtml('<div></div>').toString()).toEqual('<div></div>');
     expect(ɵɵsanitizeHtml(new Wrap('<div></div>')).toString()).toEqual('<div></div>');
-    expect(ɵɵsanitizeHtml('<img src="javascript:true">').toString())
-        .toEqual('<img src="unsafe:javascript:true">');
-    expect(ɵɵsanitizeHtml(new Wrap('<img src="javascript:true">')).toString())
-        .toEqual('<img src="unsafe:javascript:true">');
-    expect(() => ɵɵsanitizeHtml(bypassSanitizationTrustUrl('<img src="javascript:true">')))
-        .toThrowError(/Required a safe HTML, got a URL/);
-    expect(ɵɵsanitizeHtml(bypassSanitizationTrustHtml('<img src="javascript:true">')).toString())
-        .toEqual('<img src="javascript:true">');
+    expect(ɵɵsanitizeHtml('<img src="javascript:true">').toString()).toEqual(
+      '<img src="unsafe:javascript:true">',
+    );
+    expect(ɵɵsanitizeHtml(new Wrap('<img src="javascript:true">')).toString()).toEqual(
+      '<img src="unsafe:javascript:true">',
+    );
+    expect(() =>
+      ɵɵsanitizeHtml(bypassSanitizationTrustUrl('<img src="javascript:true">')),
+    ).toThrowError(/Required a safe HTML, got a URL/);
+    expect(
+      ɵɵsanitizeHtml(bypassSanitizationTrustHtml('<img src="javascript:true">')).toString(),
+    ).toEqual('<img src="javascript:true">');
   });
 
   it('should sanitize url', () => {
@@ -48,8 +67,9 @@ describe('sanitization', () => {
     expect(ɵɵsanitizeUrl(new Wrap('http://server'))).toEqual('http://server');
     expect(ɵɵsanitizeUrl('javascript:true')).toEqual('unsafe:javascript:true');
     expect(ɵɵsanitizeUrl(new Wrap('javascript:true'))).toEqual('unsafe:javascript:true');
-    expect(() => ɵɵsanitizeUrl(bypassSanitizationTrustHtml('javascript:true')))
-        .toThrowError(/Required a safe URL, got a HTML/);
+    expect(() => ɵɵsanitizeUrl(bypassSanitizationTrustHtml('javascript:true'))).toThrowError(
+      /Required a safe URL, got a HTML/,
+    );
     expect(ɵɵsanitizeUrl(bypassSanitizationTrustUrl('javascript:true'))).toEqual('javascript:true');
   });
 
@@ -57,10 +77,12 @@ describe('sanitization', () => {
     const ERROR = /NG0904: unsafe value used in a resource URL context.*/;
     expect(() => ɵɵsanitizeResourceUrl('http://server')).toThrowError(ERROR);
     expect(() => ɵɵsanitizeResourceUrl('javascript:true')).toThrowError(ERROR);
-    expect(() => ɵɵsanitizeResourceUrl(bypassSanitizationTrustHtml('javascript:true')))
-        .toThrowError(/Required a safe ResourceURL, got a HTML/);
-    expect(ɵɵsanitizeResourceUrl(bypassSanitizationTrustResourceUrl('javascript:true')).toString())
-        .toEqual('javascript:true');
+    expect(() =>
+      ɵɵsanitizeResourceUrl(bypassSanitizationTrustHtml('javascript:true')),
+    ).toThrowError(/Required a safe ResourceURL, got a HTML/);
+    expect(
+      ɵɵsanitizeResourceUrl(bypassSanitizationTrustResourceUrl('javascript:true')).toString(),
+    ).toEqual('javascript:true');
   });
 
   it('should sanitize style', () => {
@@ -68,18 +90,21 @@ describe('sanitization', () => {
     expect(ɵɵsanitizeStyle(new Wrap('red'))).toEqual('red');
     expect(ɵɵsanitizeStyle('url("http://server")')).toEqual('url("http://server")');
     expect(ɵɵsanitizeStyle(new Wrap('url("http://server")'))).toEqual('url("http://server")');
-    expect(() => ɵɵsanitizeStyle(bypassSanitizationTrustHtml('url("http://server")')))
-        .toThrowError(/Required a safe Style, got a HTML/);
-    expect(ɵɵsanitizeStyle(bypassSanitizationTrustStyle('url("http://server")')))
-        .toEqual('url("http://server")');
+    expect(() => ɵɵsanitizeStyle(bypassSanitizationTrustHtml('url("http://server")'))).toThrowError(
+      /Required a safe Style, got a HTML/,
+    );
+    expect(ɵɵsanitizeStyle(bypassSanitizationTrustStyle('url("http://server")'))).toEqual(
+      'url("http://server")',
+    );
   });
 
   it('should sanitize script', () => {
     const ERROR = 'NG0905: unsafe value used in a script context';
     expect(() => ɵɵsanitizeScript('true')).toThrowError(ERROR);
     expect(() => ɵɵsanitizeScript('true')).toThrowError(ERROR);
-    expect(() => ɵɵsanitizeScript(bypassSanitizationTrustHtml('true')))
-        .toThrowError(/Required a safe Script, got a HTML/);
+    expect(() => ɵɵsanitizeScript(bypassSanitizationTrustHtml('true'))).toThrowError(
+      /Required a safe Script, got a HTML/,
+    );
     expect(ɵɵsanitizeScript(bypassSanitizationTrustScript('true')).toString()).toEqual('true');
   });
 
@@ -89,7 +114,8 @@ describe('sanitization', () => {
     const schema = SECURITY_SCHEMA();
     const contextsByProp: Map<string, Set<number>> = new Map();
     const sanitizerNameByContext: Map<number, Function> = new Map([
-      [SecurityContext.URL, ɵɵsanitizeUrl], [SecurityContext.RESOURCE_URL, ɵɵsanitizeResourceUrl]
+      [SecurityContext.URL, ɵɵsanitizeUrl],
+      [SecurityContext.RESOURCE_URL, ɵɵsanitizeResourceUrl],
     ]);
     Object.entries(schema).forEach(([key, context]) => {
       if (context === SecurityContext.URL || SecurityContext.RESOURCE_URL) {
@@ -108,40 +134,48 @@ describe('sanitization', () => {
   it('should sanitize resourceUrls via sanitizeUrlOrResourceUrl', () => {
     const ERROR = /NG0904: unsafe value used in a resource URL context.*/;
     expect(() => ɵɵsanitizeUrlOrResourceUrl('http://server', 'iframe', 'src')).toThrowError(ERROR);
-    expect(() => ɵɵsanitizeUrlOrResourceUrl('javascript:true', 'iframe', 'src'))
-        .toThrowError(ERROR);
+    expect(() => ɵɵsanitizeUrlOrResourceUrl('javascript:true', 'iframe', 'src')).toThrowError(
+      ERROR,
+    );
+    expect(() =>
+      ɵɵsanitizeUrlOrResourceUrl(bypassSanitizationTrustHtml('javascript:true'), 'iframe', 'src'),
+    ).toThrowError(/Required a safe ResourceURL, got a HTML/);
     expect(
-        () => ɵɵsanitizeUrlOrResourceUrl(
-            bypassSanitizationTrustHtml('javascript:true'), 'iframe', 'src'))
-        .toThrowError(/Required a safe ResourceURL, got a HTML/);
-    expect(ɵɵsanitizeUrlOrResourceUrl(
-               bypassSanitizationTrustResourceUrl('javascript:true'), 'iframe', 'src')
-               .toString())
-        .toEqual('javascript:true');
+      ɵɵsanitizeUrlOrResourceUrl(
+        bypassSanitizationTrustResourceUrl('javascript:true'),
+        'iframe',
+        'src',
+      ).toString(),
+    ).toEqual('javascript:true');
   });
 
   it('should sanitize urls via sanitizeUrlOrResourceUrl', () => {
     expect(ɵɵsanitizeUrlOrResourceUrl('http://server', 'a', 'href')).toEqual('http://server');
-    expect(ɵɵsanitizeUrlOrResourceUrl(new Wrap('http://server'), 'a', 'href'))
-        .toEqual('http://server');
-    expect(ɵɵsanitizeUrlOrResourceUrl('javascript:true', 'a', 'href'))
-        .toEqual('unsafe:javascript:true');
-    expect(ɵɵsanitizeUrlOrResourceUrl(new Wrap('javascript:true'), 'a', 'href'))
-        .toEqual('unsafe:javascript:true');
+    expect(ɵɵsanitizeUrlOrResourceUrl(new Wrap('http://server'), 'a', 'href')).toEqual(
+      'http://server',
+    );
+    expect(ɵɵsanitizeUrlOrResourceUrl('javascript:true', 'a', 'href')).toEqual(
+      'unsafe:javascript:true',
+    );
+    expect(ɵɵsanitizeUrlOrResourceUrl(new Wrap('javascript:true'), 'a', 'href')).toEqual(
+      'unsafe:javascript:true',
+    );
+    expect(() =>
+      ɵɵsanitizeUrlOrResourceUrl(bypassSanitizationTrustHtml('javascript:true'), 'a', 'href'),
+    ).toThrowError(/Required a safe URL, got a HTML/);
     expect(
-        () =>
-            ɵɵsanitizeUrlOrResourceUrl(bypassSanitizationTrustHtml('javascript:true'), 'a', 'href'))
-        .toThrowError(/Required a safe URL, got a HTML/);
-    expect(ɵɵsanitizeUrlOrResourceUrl(bypassSanitizationTrustUrl('javascript:true'), 'a', 'href'))
-        .toEqual('javascript:true');
+      ɵɵsanitizeUrlOrResourceUrl(bypassSanitizationTrustUrl('javascript:true'), 'a', 'href'),
+    ).toEqual('javascript:true');
   });
 
   it('should only trust constant strings from template literal tags without interpolation', () => {
     expect(ɵɵtrustConstantHtml`<h1>good</h1>`.toString()).toEqual('<h1>good</h1>');
     expect(ɵɵtrustConstantResourceUrl`http://good.com`.toString()).toEqual('http://good.com');
-    expect(() => (ɵɵtrustConstantHtml as any) `<h1>${'evil'}</h1>`)
-        .toThrowError(/Unexpected interpolation in trusted HTML constant/);
-    expect(() => (ɵɵtrustConstantResourceUrl as any) `http://${'evil'}.com`)
-        .toThrowError(/Unexpected interpolation in trusted URL constant/);
+    expect(() => (ɵɵtrustConstantHtml as any)`<h1>${'evil'}</h1>`).toThrowError(
+      /Unexpected interpolation in trusted HTML constant/,
+    );
+    expect(() => (ɵɵtrustConstantResourceUrl as any)`http://${'evil'}.com`).toThrowError(
+      /Unexpected interpolation in trusted URL constant/,
+    );
   });
 });
diff --git a/packages/core/test/sanitization/url_sanitizer_spec.ts b/packages/core/test/sanitization/url_sanitizer_spec.ts
index 3490ce3dd0d88..f3b75972e9af3 100644
--- a/packages/core/test/sanitization/url_sanitizer_spec.ts
+++ b/packages/core/test/sanitization/url_sanitizer_spec.ts
@@ -14,7 +14,7 @@ describe('URL sanitizer', () => {
 
   beforeEach(() => {
     logMsgs = [];
-    originalLog = console.warn;  // Monkey patch DOM.log.
+    originalLog = console.warn; // Monkey patch DOM.log.
     console.warn = (msg: any) => logMsgs.push(msg);
   });
 
@@ -43,7 +43,7 @@ describe('URL sanitizer', () => {
       '#anchor',
       '/page1.md',
       'http://JavaScript/my.js',
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',  // Truncated.
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/', // Truncated.
       'data:video/webm;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',
       'data:audio/opus;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',
       'unknown-scheme:abc',
diff --git a/packages/core/test/signals/computed_spec.ts b/packages/core/test/signals/computed_spec.ts
index 8f5b06451a7cf..700dee7bf39e2 100644
--- a/packages/core/test/signals/computed_spec.ts
+++ b/packages/core/test/signals/computed_spec.ts
@@ -35,18 +35,17 @@ describe('computed', () => {
     expect(c()).toEqual(1);
   });
 
-  it('should not re-compute if the dependency is a primitive value and the value did not change',
-     () => {
-       const counter = signal(0);
+  it('should not re-compute if the dependency is a primitive value and the value did not change', () => {
+    const counter = signal(0);
 
-       let computedRunCount = 0;
-       const double = computed(() => `${counter() * 2}:${++computedRunCount}`);
+    let computedRunCount = 0;
+    const double = computed(() => `${counter() * 2}:${++computedRunCount}`);
 
-       expect(double()).toEqual('0:1');
+    expect(double()).toEqual('0:1');
 
-       counter.set(0);
-       expect(double()).toEqual('0:1');
-     });
+    counter.set(0);
+    expect(double()).toEqual('0:1');
+  });
 
   it('should chain computed', () => {
     const name = signal('abc');
@@ -65,8 +64,9 @@ describe('computed', () => {
     const show = signal(true);
 
     let computeCount = 0;
-    const displayName =
-        computed(() => `${show() ? `${name()} aged ${age()}` : 'anonymous'}:${++computeCount}`);
+    const displayName = computed(
+      () => `${show() ? `${name()} aged ${age()}` : 'anonymous'}:${++computeCount}`,
+    );
 
     expect(displayName()).toEqual('John aged 25:1');
 
@@ -108,7 +108,7 @@ describe('computed', () => {
     expect(c()).toEqual('OK');
   });
 
-  it('should not update dependencies of computations when dependencies don\'t change', () => {
+  it("should not update dependencies of computations when dependencies don't change", () => {
     const source = signal(0);
     const isEven = computed(() => source() % 2 === 0);
     let updateCounter = 0;
@@ -140,13 +140,14 @@ describe('computed', () => {
 
     let watchCount = 0;
     const w = createWatch(
-        () => {
-          derived();
-        },
-        () => {
-          watchCount++;
-        },
-        false);
+      () => {
+        derived();
+      },
+      () => {
+        watchCount++;
+      },
+      false,
+    );
 
     w.run();
     expect(watchCount).toEqual(0);
diff --git a/packages/core/test/signals/effect_util.ts b/packages/core/test/signals/effect_util.ts
index 5412dbe5384dc..a033f0fa37b90 100644
--- a/packages/core/test/signals/effect_util.ts
+++ b/packages/core/test/signals/effect_util.ts
@@ -13,8 +13,9 @@ let queue = new Set<Watch>();
 /**
  * A wrapper around `Watch` that emulates the `effect` API and allows for more streamlined testing.
  */
-export function testingEffect(effectFn: (onCleanup: (cleanupFn: WatchCleanupFn) => void) => void):
-    void {
+export function testingEffect(
+  effectFn: (onCleanup: (cleanupFn: WatchCleanupFn) => void) => void,
+): void {
   const w = createWatch(effectFn, queue.add.bind(queue), true);
 
   // Effects start dirty.
diff --git a/packages/core/test/signals/signal_spec.ts b/packages/core/test/signals/signal_spec.ts
index 6d45ee51ebb94..5fa09f0c38db5 100644
--- a/packages/core/test/signals/signal_spec.ts
+++ b/packages/core/test/signals/signal_spec.ts
@@ -21,7 +21,7 @@ describe('signals', () => {
     const counter = signal(0);
     expect(counter()).toEqual(0);
 
-    counter.update(c => c + 1);
+    counter.update((c) => c + 1);
     expect(counter()).toEqual(1);
   });
 
@@ -61,32 +61,31 @@ describe('signals', () => {
     expect(upper()).toEqual('D');
   });
 
-  it('should consider objects as equal based on their identity with the default equality function',
-     () => {
-       let stateValue: unknown = {};
-       const state = signal(stateValue);
-       let computeCount = 0;
-       const derived = computed(() => `${typeof state()}:${++computeCount}`);
-       expect(derived()).toEqual('object:1');
-
-       // reset signal value to the same object instance, expect NO change notification
-       state.set(stateValue);
-       expect(derived()).toEqual('object:1');
-
-       // reset signal value to a different object instance, expect change notification
-       stateValue = {};
-       state.set(stateValue);
-       expect(derived()).toEqual('object:2');
-
-       // reset signal value to a different object type, expect change notification
-       stateValue = [];
-       state.set(stateValue);
-       expect(derived()).toEqual('object:3');
-
-       // reset signal value to the same array instance, expect NO change notification
-       state.set(stateValue);
-       expect(derived()).toEqual('object:3');
-     });
+  it('should consider objects as equal based on their identity with the default equality function', () => {
+    let stateValue: unknown = {};
+    const state = signal(stateValue);
+    let computeCount = 0;
+    const derived = computed(() => `${typeof state()}:${++computeCount}`);
+    expect(derived()).toEqual('object:1');
+
+    // reset signal value to the same object instance, expect NO change notification
+    state.set(stateValue);
+    expect(derived()).toEqual('object:1');
+
+    // reset signal value to a different object instance, expect change notification
+    stateValue = {};
+    state.set(stateValue);
+    expect(derived()).toEqual('object:2');
+
+    // reset signal value to a different object type, expect change notification
+    stateValue = [];
+    state.set(stateValue);
+    expect(derived()).toEqual('object:3');
+
+    // reset signal value to the same array instance, expect NO change notification
+    state.set(stateValue);
+    expect(derived()).toEqual('object:3');
+  });
 
   it('should invoke custom equality function even if old / new references are the same', () => {
     const state = {value: 0};
@@ -103,7 +102,7 @@ describe('signals', () => {
     expect(derived()).toBe('0:2');
 
     // updating signal with the same reference should propagate change as well
-    stateSignal.update(state => state);
+    stateSignal.update((state) => state);
     expect(derived()).toBe('0:3');
   });
 
@@ -162,7 +161,7 @@ describe('signals', () => {
   });
 
   describe('post-signal-set functions', () => {
-    let prevPostSignalSetFn: (() => void)|null = null;
+    let prevPostSignalSetFn: (() => void) | null = null;
     let log: number;
     beforeEach(() => {
       log = 0;
@@ -183,11 +182,11 @@ describe('signals', () => {
     it('should call the post-signal-set fn when invoking .update()', () => {
       const counter = signal(0);
 
-      counter.update(c => c + 2);
+      counter.update((c) => c + 2);
       expect(log).toBe(1);
     });
 
-    it('should not call the post-signal-set fn when the value doesn\'t change', () => {
+    it("should not call the post-signal-set fn when the value doesn't change", () => {
       const counter = signal(0);
 
       counter.set(0);
diff --git a/packages/core/test/signals/watch_spec.ts b/packages/core/test/signals/watch_spec.ts
index 7e119c7767ef8..56d8fc60d9996 100644
--- a/packages/core/test/signals/watch_spec.ts
+++ b/packages/core/test/signals/watch_spec.ts
@@ -77,7 +77,7 @@ describe('watchers', () => {
     expect(runLog).toEqual([0, 1, 101]);
   });
 
-  it('should not update dependencies when dependencies don\'t change', () => {
+  it("should not update dependencies when dependencies don't change", () => {
     const source = signal(0);
     const isEven = computed(() => source() % 2 === 0);
     let updateCounter = 0;
@@ -120,11 +120,11 @@ describe('watchers', () => {
     flushEffects();
     expect(seenCounterValues).toEqual([0]);
 
-    source.update(c => c + 1);
+    source.update((c) => c + 1);
     flushEffects();
     expect(seenCounterValues).toEqual([0, 1]);
 
-    source.update(c => c + 1);
+    source.update((c) => c + 1);
     flushEffects();
     // cleanup (array trim) should have run before executing effect
     expect(seenCounterValues).toEqual([2]);
@@ -165,14 +165,15 @@ describe('watchers', () => {
     const source = signal(0);
     let ranScheduler = false;
     const w = createWatch(
-        () => {
-          source();
-        },
-        () => {
-          ranScheduler = true;
-          expect(() => source()).toThrow();
-        },
-        false);
+      () => {
+        source();
+      },
+      () => {
+        ranScheduler = true;
+        expect(() => source()).toThrow();
+      },
+      false,
+    );
 
     // Run the effect manually to initiate dependency tracking.
     w.run();
@@ -185,9 +186,13 @@ describe('watchers', () => {
   describe('destroy', () => {
     it('should not run destroyed watchers', () => {
       let watchRuns = 0;
-      const watchRef = createWatch(() => {
-        watchRuns++;
-      }, NOOP_FN, false);
+      const watchRef = createWatch(
+        () => {
+          watchRuns++;
+        },
+        NOOP_FN,
+        false,
+      );
 
       watchRef.run();
       expect(watchRuns).toBe(1);
@@ -201,7 +206,11 @@ describe('watchers', () => {
       const counter = signal(0);
 
       let scheduleCount = 0;
-      const watchRef = createWatch(() => counter(), () => scheduleCount++, false);
+      const watchRef = createWatch(
+        () => counter(),
+        () => scheduleCount++,
+        false,
+      );
 
       // watches are _not_ scheduled by default, run it for the first time to capture
       // dependencies
@@ -231,10 +240,14 @@ describe('watchers', () => {
     it('should not run cleanup functions after destroy', () => {
       const counter = signal(0);
       let cleanupRuns = 0;
-      const watchRef = createWatch((onCleanup) => {
-        counter();
-        onCleanup(() => cleanupRuns++);
-      }, NOOP_FN, false);
+      const watchRef = createWatch(
+        (onCleanup) => {
+          counter();
+          onCleanup(() => cleanupRuns++);
+        },
+        NOOP_FN,
+        false,
+      );
 
       // initial run to register cleanup function
       watchRef.run();
diff --git a/packages/core/test/test_bed_effect_spec.ts b/packages/core/test/test_bed_effect_spec.ts
index df58eae7eb359..eda71e7088b5c 100644
--- a/packages/core/test/test_bed_effect_spec.ts
+++ b/packages/core/test/test_bed_effect_spec.ts
@@ -61,9 +61,12 @@ describe('effects in TestBed', () => {
       }
 
       ngOnInit() {
-        effect(() => {
-          log.push('Effect');
-        }, {injector: this.injector});
+        effect(
+          () => {
+            log.push('Effect');
+          },
+          {injector: this.injector},
+        );
       }
 
       ngDoCheck() {
diff --git a/packages/core/test/test_bed_spec.ts b/packages/core/test/test_bed_spec.ts
index d4d63225a27d0..7a372cf870642 100644
--- a/packages/core/test/test_bed_spec.ts
+++ b/packages/core/test/test_bed_spec.ts
@@ -7,7 +7,40 @@
  */
 
 import {PLATFORM_BROWSER_ID} from '@angular/common/src/platform_id';
-import {APP_INITIALIZER, ChangeDetectorRef, Compiler, Component, Directive, ElementRef, ErrorHandler, getNgModuleById, inject, Inject, Injectable, InjectFlags, InjectionToken, InjectOptions, Injector, Input, LOCALE_ID, ModuleWithProviders, NgModule, Optional, Pipe, PLATFORM_ID, Type, ViewChild, ɵsetClassMetadata as setClassMetadata, ɵɵdefineComponent as defineComponent, ɵɵdefineInjector as defineInjector, ɵɵdefineNgModule as defineNgModule, ɵɵelementEnd as elementEnd, ɵɵelementStart as elementStart, ɵɵsetNgModuleScope as setNgModuleScope, ɵɵtext as text} from '@angular/core';
+import {
+  APP_INITIALIZER,
+  ChangeDetectorRef,
+  Compiler,
+  Component,
+  Directive,
+  ElementRef,
+  ErrorHandler,
+  getNgModuleById,
+  inject,
+  Inject,
+  Injectable,
+  InjectFlags,
+  InjectionToken,
+  InjectOptions,
+  Injector,
+  Input,
+  LOCALE_ID,
+  ModuleWithProviders,
+  NgModule,
+  Optional,
+  Pipe,
+  PLATFORM_ID,
+  Type,
+  ViewChild,
+  ɵsetClassMetadata as setClassMetadata,
+  ɵɵdefineComponent as defineComponent,
+  ɵɵdefineInjector as defineInjector,
+  ɵɵdefineNgModule as defineNgModule,
+  ɵɵelementEnd as elementEnd,
+  ɵɵelementStart as elementStart,
+  ɵɵsetNgModuleScope as setNgModuleScope,
+  ɵɵtext as text,
+} from '@angular/core';
 import {DeferBlockBehavior} from '@angular/core/testing';
 import {TestBed, TestBedImpl} from '@angular/core/testing/src/test_bed';
 import {By} from '@angular/platform-browser';
@@ -16,7 +49,11 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
 import {NgModuleType} from '../src/render3';
 import {depsTracker} from '../src/render3/deps_tracker/deps_tracker';
 import {setClassMetadataAsync} from '../src/render3/metadata';
-import {TEARDOWN_TESTING_MODULE_ON_DESTROY_DEFAULT, THROW_ON_UNKNOWN_ELEMENTS_DEFAULT, THROW_ON_UNKNOWN_PROPERTIES_DEFAULT} from '../testing/src/test_bed_common';
+import {
+  TEARDOWN_TESTING_MODULE_ON_DESTROY_DEFAULT,
+  THROW_ON_UNKNOWN_ELEMENTS_DEFAULT,
+  THROW_ON_UNKNOWN_PROPERTIES_DEFAULT,
+} from '../testing/src/test_bed_common';
 
 const NAME = new InjectionToken<string>('name');
 
@@ -34,8 +71,7 @@ class SimpleService {
   selector: 'hello-world',
   template: '<greeting-cmp></greeting-cmp>',
 })
-export class HelloWorld {
-}
+export class HelloWorld {}
 
 // -- module: Greeting
 @Component({
@@ -46,8 +82,9 @@ export class GreetingCmp {
   name: string;
 
   constructor(
-      @Inject(NAME) @Optional() name: string,
-      @Inject(SimpleService) @Optional() service: SimpleService) {
+    @Inject(NAME) @Optional() name: string,
+    @Inject(SimpleService) @Optional() service: SimpleService,
+  ) {
     this.name = name || 'nobody!';
   }
 }
@@ -56,31 +93,26 @@ export class GreetingCmp {
   selector: 'cmp-with-providers',
   template: '<hello-world></hello-world>',
   providers: [
-    SimpleService,  //
-    {provide: NAME, useValue: `from Component`}
-  ]
+    SimpleService, //
+    {provide: NAME, useValue: `from Component`},
+  ],
 })
-class CmpWithProviders {
-}
+class CmpWithProviders {}
 
 @NgModule({
   declarations: [GreetingCmp],
   exports: [GreetingCmp],
 })
-export class GreetingModule {
-}
+export class GreetingModule {}
 
 @Component({selector: 'simple-cmp', template: '<b>simple</b>'})
-export class SimpleCmp {
-}
+export class SimpleCmp {}
 
 @Component({selector: 'with-refs-cmp', template: '<div #firstDiv></div>'})
-export class WithRefsCmp {
-}
+export class WithRefsCmp {}
 
 @Component({selector: 'inherited-cmp', template: 'inherited'})
-export class InheritedCmp extends SimpleCmp {
-}
+export class InheritedCmp extends SimpleCmp {}
 
 @Directive({selector: '[hostBindingDir]', host: {'[id]': 'id'}})
 export class HostBindingDir {
@@ -93,7 +125,7 @@ export class HostBindingDir {
     <div hostBindingDir [title]="title" [attr.aria-label]="label"></div>
     <p title="( {{ label }} - {{ title }} )" [attr.aria-label]="label" id="[ {{ label }} ] [ {{ title }} ]">
     </p>
-  `
+  `,
 })
 export class ComponentWithPropBindings {
   title = 'some title';
@@ -104,27 +136,28 @@ export class ComponentWithPropBindings {
   selector: 'simple-app',
   template: `
     <simple-cmp></simple-cmp> - <inherited-cmp></inherited-cmp>
-  `
+  `,
 })
-export class SimpleApp {
-}
+export class SimpleApp {}
 
 @Component({selector: 'inline-template', template: '<p>Hello</p>'})
-export class ComponentWithInlineTemplate {
-}
+export class ComponentWithInlineTemplate {}
 
 @NgModule({
   declarations: [
-    HelloWorld, SimpleCmp, WithRefsCmp, InheritedCmp, SimpleApp, ComponentWithPropBindings,
-    HostBindingDir, CmpWithProviders
+    HelloWorld,
+    SimpleCmp,
+    WithRefsCmp,
+    InheritedCmp,
+    SimpleApp,
+    ComponentWithPropBindings,
+    HostBindingDir,
+    CmpWithProviders,
   ],
   imports: [GreetingModule],
-  providers: [
-    {provide: NAME, useValue: 'World!'},
-  ]
+  providers: [{provide: NAME, useValue: 'World!'}],
 })
-export class HelloWorldModule {
-}
+export class HelloWorldModule {}
 
 describe('TestBed', () => {
   // This test is extracted to an individual `describe` block to avoid any extra TestBed
@@ -138,22 +171,19 @@ describe('TestBed', () => {
       selector: 'root',
       template: '<div dirA></div>',
     })
-    class Root {
-    }
+    class Root {}
     @Directive({
       selector: '[dirA]',
       host: {'title': 'Test title'},
     })
-    class DirA {
-    }
+    class DirA {}
 
     // Note: this module is not directly reference in the test intentionally.
     // Its presence triggers a side-effect of patching correct scopes on the declared components.
     @NgModule({
       declarations: [Root, DirA],
     })
-    class Module {
-    }
+    class Module {}
 
     TestBed.configureTestingModule({});
     // Trigger TestBed initialization.
@@ -182,16 +212,14 @@ describe('TestBed with Standalone types', () => {
       standalone: true,
       template: 'main dep',
     })
-    class MainDep {
-    }
+    class MainDep {}
 
     @Component({
       selector: 'dep',
       standalone: true,
       template: 'mock dep',
     })
-    class MockDep {
-    }
+    class MockDep {}
 
     @Component({
       selector: 'app-root',
@@ -199,8 +227,7 @@ describe('TestBed with Standalone types', () => {
       imports: [MainDep],
       template: '<dep />',
     })
-    class AppComponent {
-    }
+    class AppComponent {}
 
     TestBed.configureTestingModule({imports: [AppComponent]});
 
@@ -225,7 +252,6 @@ describe('TestBed with Standalone types', () => {
     expect(fixture.nativeElement.innerHTML).toBe('<dep>mock dep</dep>');
   });
 
-
   it('should override providers on standalone component itself', () => {
     const A = new InjectionToken('A');
 
@@ -275,8 +301,7 @@ describe('TestBed with Standalone types', () => {
       template: '<dep />',
       imports: [Dep],
     })
-    class MyStandaloneComp {
-    }
+    class MyStandaloneComp {}
 
     TestBed.configureTestingModule({imports: [MyStandaloneComp]});
     TestBed.overrideProvider(Service, {useFactory: () => new MockService()});
@@ -305,8 +330,7 @@ describe('TestBed with Standalone types', () => {
     @NgModule({
       providers: [{provide: A, useValue: 'A'}],
     })
-    class ComponentDependenciesModule {
-    }
+    class ComponentDependenciesModule {}
 
     @Component({
       standalone: true,
@@ -333,8 +357,7 @@ describe('TestBed with Standalone types', () => {
     @NgModule({
       providers: [{provide: A, useValue: 'A'}],
     })
-    class ComponentDependenciesModule {
-    }
+    class ComponentDependenciesModule {}
 
     @Component({
       standalone: true,
@@ -347,8 +370,9 @@ describe('TestBed with Standalone types', () => {
 
     // NOTE: the `TestBed.configureTestingModule` is *not* needed here, since the TestBed
     // knows which NgModule was overridden and needs re-compilation.
-    TestBed.overrideModule(
-        ComponentDependenciesModule, {set: {providers: [{provide: A, useValue: 'Overridden A'}]}});
+    TestBed.overrideModule(ComponentDependenciesModule, {
+      set: {providers: [{provide: A, useValue: 'Overridden A'}]},
+    });
 
     const fixture = TestBed.createComponent(MyStandaloneComp);
     fixture.detectChanges();
@@ -361,8 +385,7 @@ describe('TestBed with Standalone types', () => {
       standalone: true,
       template: 'Original',
     })
-    class MyStandaloneComp {
-    }
+    class MyStandaloneComp {}
 
     // NOTE: the `TestBed.configureTestingModule` call is *not* required here, since TestBed already
     // knows that the `MyStandaloneComp` should be overridden/recompiled.
@@ -374,60 +397,60 @@ describe('TestBed with Standalone types', () => {
     expect(fixture.nativeElement.innerHTML).toBe('Overridden');
   });
 
-  it('should allow overriding the set of directives and pipes used in a standalone component',
-     () => {
-       @Directive({
-         selector: '[dir]',
-         standalone: true,
-         host: {'[id]': 'id'},
-       })
-       class MyStandaloneDirectiveA {
-         id = 'A';
-       }
-
-       @Directive({
-         selector: '[dir]',
-         standalone: true,
-         host: {'[id]': 'id'},
-       })
-       class MyStandaloneDirectiveB {
-         id = 'B';
-       }
-
-       @Pipe({name: 'pipe', standalone: true})
-       class MyStandalonePipeA {
-         transform(value: string): string {
-           return `transformed ${value} (A)`;
-         }
-       }
-       @Pipe({name: 'pipe', standalone: true})
-       class MyStandalonePipeB {
-         transform(value: string): string {
-           return `transformed ${value} (B)`;
-         }
-       }
-
-       @Component({
-         standalone: true,
-         template: '<div dir>{{ name | pipe }}</div>',
-         imports: [MyStandalonePipeA, MyStandaloneDirectiveA],
-       })
-       class MyStandaloneComp {
-         name = 'MyStandaloneComp';
-       }
-
-       // NOTE: the `TestBed.configureTestingModule` call is *not* required here, since TestBed
-       // already knows that the `MyStandaloneComp` should be overridden/recompiled.
-       TestBed.overrideComponent(
-           MyStandaloneComp, {set: {imports: [MyStandalonePipeB, MyStandaloneDirectiveB]}});
-
-       const fixture = TestBed.createComponent(MyStandaloneComp);
-       fixture.detectChanges();
-
-       const rootElement = fixture.nativeElement.firstChild;
-       expect(rootElement.id).toBe('B');
-       expect(rootElement.innerHTML).toBe('transformed MyStandaloneComp (B)');
-     });
+  it('should allow overriding the set of directives and pipes used in a standalone component', () => {
+    @Directive({
+      selector: '[dir]',
+      standalone: true,
+      host: {'[id]': 'id'},
+    })
+    class MyStandaloneDirectiveA {
+      id = 'A';
+    }
+
+    @Directive({
+      selector: '[dir]',
+      standalone: true,
+      host: {'[id]': 'id'},
+    })
+    class MyStandaloneDirectiveB {
+      id = 'B';
+    }
+
+    @Pipe({name: 'pipe', standalone: true})
+    class MyStandalonePipeA {
+      transform(value: string): string {
+        return `transformed ${value} (A)`;
+      }
+    }
+    @Pipe({name: 'pipe', standalone: true})
+    class MyStandalonePipeB {
+      transform(value: string): string {
+        return `transformed ${value} (B)`;
+      }
+    }
+
+    @Component({
+      standalone: true,
+      template: '<div dir>{{ name | pipe }}</div>',
+      imports: [MyStandalonePipeA, MyStandaloneDirectiveA],
+    })
+    class MyStandaloneComp {
+      name = 'MyStandaloneComp';
+    }
+
+    // NOTE: the `TestBed.configureTestingModule` call is *not* required here, since TestBed
+    // already knows that the `MyStandaloneComp` should be overridden/recompiled.
+    TestBed.overrideComponent(MyStandaloneComp, {
+      set: {imports: [MyStandalonePipeB, MyStandaloneDirectiveB]},
+    });
+
+    const fixture = TestBed.createComponent(MyStandaloneComp);
+    fixture.detectChanges();
+
+    const rootElement = fixture.nativeElement.firstChild;
+    expect(rootElement.id).toBe('B');
+    expect(rootElement.innerHTML).toBe('transformed MyStandaloneComp (B)');
+  });
 
   it('should reflect overrides on imported standalone directive', () => {
     @Directive({
@@ -453,14 +476,14 @@ describe('TestBed with Standalone types', () => {
       template: '<standalone-cmp dir>Hello world!</standalone-cmp>',
       imports: [DepStandaloneDirective, DepStandaloneComponent],
     })
-    class RootStandaloneComp {
-    }
+    class RootStandaloneComp {}
 
     // NOTE: the `TestBed.configureTestingModule` call is *not* required here, since TestBed
     // already knows which Components/Directives are overridden and should be recompiled.
-    TestBed.overrideComponent(
-        DepStandaloneComponent, {set: {template: 'Overridden MyStandaloneComponent'}});
-    TestBed.overrideDirective(DepStandaloneDirective, {set: {host: {'[id]': '\'Overridden\''}}});
+    TestBed.overrideComponent(DepStandaloneComponent, {
+      set: {template: 'Overridden MyStandaloneComponent'},
+    });
+    TestBed.overrideDirective(DepStandaloneDirective, {set: {host: {'[id]': "'Overridden'"}}});
 
     const fixture = TestBed.createComponent(RootStandaloneComp);
     fixture.detectChanges();
@@ -489,17 +512,15 @@ describe('TestBed with Standalone types', () => {
       exports: [TestPipe],
       providers: [{provide: TOKEN_A, useValue: 'A'}],
     })
-    class TestNgModule {
-    }
+    class TestNgModule {}
 
     @Component({
       selector: 'test-component',
       standalone: true,
       imports: [TestNgModule],
-      template: `{{ 'original value' | testPipe }}`
+      template: `{{ 'original value' | testPipe }}`,
     })
-    class TestComponent {
-    }
+    class TestComponent {}
 
     TestBed.configureTestingModule({
       imports: [TestComponent],
@@ -534,8 +555,7 @@ describe('TestBed with Standalone types', () => {
       declarations: [TestComponent],
       exports: [TestComponent],
     })
-    class TestModule {
-    }
+    class TestModule {}
 
     @Component({
       standalone: true,
@@ -551,7 +571,7 @@ describe('TestBed with Standalone types', () => {
       // replace TestComponent with MockTestComponent
       TestBed.overrideModule(TestModule, {
         remove: {declarations: [TestComponent], exports: [TestComponent]},
-        add: {declarations: [MockTestComponent], exports: [MockTestComponent]}
+        add: {declarations: [MockTestComponent], exports: [MockTestComponent]},
       });
       const fixture = TestBed.createComponent(AppComponent);
       fixture.detectChanges();
@@ -566,14 +586,12 @@ describe('TestBed with Standalone types', () => {
       @NgModule({
         providers: [{provide: fooToken, useValue: 'FOO'}],
       })
-      class ImportedModule {
-      }
+      class ImportedModule {}
 
       @NgModule({
         imports: [ImportedModule],
       })
-      class ImportingModule {
-      }
+      class ImportingModule {}
 
       TestBed.configureTestingModule({
         imports: [ImportingModule],
@@ -619,35 +637,29 @@ describe('TestBed', () => {
       selector: 'standalone-comp',
       template: '...',
     })
-    class StandaloneComponent {
-    }
+    class StandaloneComponent {}
 
     @Component({
       selector: 'non-standalone-comp',
       template: '...',
     })
-    class NonStandaloneComponent {
-    }
+    class NonStandaloneComponent {}
 
     @Directive({standalone: true})
-    class StandaloneDirective {
-    }
+    class StandaloneDirective {}
 
     @Directive({})
-    class NonStandaloneDirective {
-    }
+    class NonStandaloneDirective {}
 
     @Pipe({standalone: true, name: 'test'})
-    class StandalonePipe {
-    }
+    class StandalonePipe {}
 
     @Pipe({name: 'test'})
-    class NonStandalonePipe {
-    }
+    class NonStandalonePipe {}
 
     const getExpectedError = (typeName: string) =>
-        `An override for the ${typeName} class has the \`standalone\` flag. ` +
-        `Changing the \`standalone\` flag via TestBed overrides is not supported.`;
+      `An override for the ${typeName} class has the \`standalone\` flag. ` +
+      `Changing the \`standalone\` flag via TestBed overrides is not supported.`;
 
     const overrides = [
       {set: {standalone: false}},
@@ -658,15 +670,17 @@ describe('TestBed', () => {
     const scenarios = [
       [TestBed.overrideComponent, StandaloneComponent, NonStandaloneComponent],
       [TestBed.overrideDirective, StandaloneDirective, NonStandaloneDirective],
-      [TestBed.overridePipe, StandalonePipe, NonStandalonePipe]
+      [TestBed.overridePipe, StandalonePipe, NonStandalonePipe],
     ];
 
-    overrides.forEach(override => {
+    overrides.forEach((override) => {
       scenarios.forEach(([fn, standaloneType, nonStandaloneType]) => {
-        expect(() => (fn as Function)(standaloneType, override))
-            .toThrowError(getExpectedError(standaloneType.name));
-        expect(() => (fn as Function)(nonStandaloneType, override))
-            .toThrowError(getExpectedError(nonStandaloneType.name));
+        expect(() => (fn as Function)(standaloneType, override)).toThrowError(
+          getExpectedError(standaloneType.name),
+        );
+        expect(() => (fn as Function)(nonStandaloneType, override)).toThrowError(
+          getExpectedError(nonStandaloneType.name),
+        );
       });
     });
   });
@@ -766,15 +780,13 @@ describe('TestBed', () => {
   it('should allow duplicate NgModule registrations with the same id', () => {
     const id = 'registered';
     @NgModule({id})
-    class ModuleA {
-    }
+    class ModuleA {}
 
     expect(getNgModuleById(id)).toBe(ModuleA);
 
     // This would ordinarily error, if not in a test scenario.
     @NgModule({id})
-    class ModuleB {
-    }
+    class ModuleB {}
     expect(getNgModuleById(id)).toBe(ModuleB);
   });
 
@@ -801,34 +813,32 @@ describe('TestBed', () => {
   });
 
   // https://github.com/angular/angular/issues/42734
-  it('should override a component which is declared in an NgModule which is imported as a `ModuleWithProviders`',
-     () => {
-       // This test verifies that an overridden component that is declared in an NgModule that has
-       // been imported as a `ModuleWithProviders` continues to have access to the declaration scope
-       // of the NgModule.
-       TestBed.resetTestingModule();
-
-       const moduleWithProviders:
-           ModuleWithProviders<HelloWorldModule> = {ngModule: HelloWorldModule};
-       TestBed.configureTestingModule({imports: [moduleWithProviders]});
-       TestBed.overrideComponent(
-           HelloWorld, {set: {template: 'Overridden <greeting-cmp></greeting-cmp>'}});
-
-       const hello = TestBed.createComponent(HelloWorld);
-       hello.detectChanges();
-       expect(hello.nativeElement).toHaveText('Overridden Hello World!');
-     });
+  it('should override a component which is declared in an NgModule which is imported as a `ModuleWithProviders`', () => {
+    // This test verifies that an overridden component that is declared in an NgModule that has
+    // been imported as a `ModuleWithProviders` continues to have access to the declaration scope
+    // of the NgModule.
+    TestBed.resetTestingModule();
+
+    const moduleWithProviders: ModuleWithProviders<HelloWorldModule> = {ngModule: HelloWorldModule};
+    TestBed.configureTestingModule({imports: [moduleWithProviders]});
+    TestBed.overrideComponent(HelloWorld, {
+      set: {template: 'Overridden <greeting-cmp></greeting-cmp>'},
+    });
+
+    const hello = TestBed.createComponent(HelloWorld);
+    hello.detectChanges();
+    expect(hello.nativeElement).toHaveText('Overridden Hello World!');
+  });
 
   it('should run `APP_INITIALIZER` before accessing `LOCALE_ID` provider', () => {
     let locale: string = '';
     @NgModule({
       providers: [
-        {provide: APP_INITIALIZER, useValue: () => locale = 'fr-FR', multi: true},
-        {provide: LOCALE_ID, useFactory: () => locale}
-      ]
+        {provide: APP_INITIALIZER, useValue: () => (locale = 'fr-FR'), multi: true},
+        {provide: LOCALE_ID, useFactory: () => locale},
+      ],
     })
-    class TestModule {
-    }
+    class TestModule {}
 
     TestBed.configureTestingModule({imports: [TestModule]});
     expect(TestBed.inject(LOCALE_ID)).toBe('fr-FR');
@@ -852,9 +862,7 @@ describe('TestBed', () => {
   it('overrides a providers in an array', () => {
     TestBed.configureTestingModule({
       imports: [HelloWorldModule],
-      providers: [
-        [{provide: NAME, useValue: 'injected World!'}],
-      ]
+      providers: [[{provide: NAME, useValue: 'injected World!'}]],
     });
     TestBed.overrideProvider(NAME, {useValue: 'injected World a second time!'});
     const hello = TestBed.createComponent(HelloWorld);
@@ -886,16 +894,14 @@ describe('TestBed', () => {
       constructor(@Inject(token) public _token: number) {}
     }
 
-    TestBed.resetTestingModule();  // Reset the state from `beforeEach`.
+    TestBed.resetTestingModule(); // Reset the state from `beforeEach`.
 
     function compile(tokenValue: number) {
-      return TestBed
-          .configureTestingModule({
-            declarations: [TestComponent],
-            providers: [{provide: token, useValue: tokenValue}],
-            teardown: {destroyAfterEach: true}
-          })
-          .compileComponents();
+      return TestBed.configureTestingModule({
+        declarations: [TestComponent],
+        providers: [{provide: token, useValue: tokenValue}],
+        teardown: {destroyAfterEach: true},
+      }).compileComponents();
     }
 
     const initialCompilation = compile(1);
@@ -920,8 +926,7 @@ describe('TestBed', () => {
       declarations: [TestComponent],
       exports: [TestComponent],
     })
-    class TestModule {
-    }
+    class TestModule {}
 
     @Component({
       selector: 'app-root',
@@ -935,8 +940,7 @@ describe('TestBed', () => {
       declarations: [AppComponent],
       imports: [TestModule],
     })
-    class AppModule {
-    }
+    class AppModule {}
     @Component({
       selector: 'test-cmp',
       template: '...',
@@ -952,7 +956,7 @@ describe('TestBed', () => {
       // replace TestComponent with MockTestComponent
       TestBed.overrideModule(TestModule, {
         remove: {declarations: [TestComponent], exports: [TestComponent]},
-        add: {declarations: [MockTestComponent], exports: [MockTestComponent]}
+        add: {declarations: [MockTestComponent], exports: [MockTestComponent]},
       });
       const fixture = TestBed.createComponent(AppComponent);
       const app = fixture.componentInstance;
@@ -971,22 +975,19 @@ describe('TestBed', () => {
       selector: 'comp-a',
       template: 'comp-a content',
     })
-    class CompA {
-    }
+    class CompA {}
 
     @Component({
       selector: 'comp-a',
       template: 'comp-a mock content',
     })
-    class MockCompA {
-    }
+    class MockCompA {}
 
     @NgModule({
       declarations: [CompA],
       exports: [CompA],
     })
-    class ModuleA {
-    }
+    class ModuleA {}
 
     // ModuleB content:
 
@@ -994,23 +995,20 @@ describe('TestBed', () => {
       selector: 'comp-b',
       template: 'comp-b content',
     })
-    class CompB {
-    }
+    class CompB {}
 
     @Component({
       selector: 'comp-b',
       template: 'comp-b mock content',
     })
-    class MockCompB {
-    }
+    class MockCompB {}
 
     @NgModule({
       imports: [ModuleA],
       declarations: [CompB],
       exports: [CompB, ModuleA],
     })
-    class ModuleB {
-    }
+    class ModuleB {}
 
     // AppModule content:
 
@@ -1021,28 +1019,25 @@ describe('TestBed', () => {
         <comp-b></comp-b>
       `,
     })
-    class App {
-    }
+    class App {}
 
     @NgModule({
       imports: [ModuleB],
       exports: [ModuleB],
     })
-    class AppModule {
-    }
+    class AppModule {}
 
     it('should detect nested module override', () => {
-      TestBed
-          .configureTestingModule({
-            declarations: [App],
-            // AppModule -> ModuleB -> ModuleA (to be overridden)
-            imports: [AppModule],
-          })
-          .overrideModule(ModuleA, {
-            remove: {declarations: [CompA], exports: [CompA]},
-            add: {declarations: [MockCompA], exports: [MockCompA]}
-          })
-          .compileComponents();
+      TestBed.configureTestingModule({
+        declarations: [App],
+        // AppModule -> ModuleB -> ModuleA (to be overridden)
+        imports: [AppModule],
+      })
+        .overrideModule(ModuleA, {
+          remove: {declarations: [CompA], exports: [CompA]},
+          add: {declarations: [MockCompA], exports: [MockCompA]},
+        })
+        .compileComponents();
 
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -1055,21 +1050,20 @@ describe('TestBed', () => {
     });
 
     it('should detect chained modules override', () => {
-      TestBed
-          .configureTestingModule({
-            declarations: [App],
-            // AppModule -> ModuleB (to be overridden) -> ModuleA (to be overridden)
-            imports: [AppModule],
-          })
-          .overrideModule(ModuleA, {
-            remove: {declarations: [CompA], exports: [CompA]},
-            add: {declarations: [MockCompA], exports: [MockCompA]}
-          })
-          .overrideModule(ModuleB, {
-            remove: {declarations: [CompB], exports: [CompB]},
-            add: {declarations: [MockCompB], exports: [MockCompB]}
-          })
-          .compileComponents();
+      TestBed.configureTestingModule({
+        declarations: [App],
+        // AppModule -> ModuleB (to be overridden) -> ModuleA (to be overridden)
+        imports: [AppModule],
+      })
+        .overrideModule(ModuleA, {
+          remove: {declarations: [CompA], exports: [CompA]},
+          add: {declarations: [MockCompA], exports: [MockCompA]},
+        })
+        .overrideModule(ModuleB, {
+          remove: {declarations: [CompB], exports: [CompB]},
+          add: {declarations: [MockCompB], exports: [MockCompB]},
+        })
+        .compileComponents();
 
       const fixture = TestBed.createComponent(App);
       fixture.detectChanges();
@@ -1083,34 +1077,36 @@ describe('TestBed', () => {
   describe('multi providers', () => {
     const multiToken = new InjectionToken<string[]>('multiToken');
     const singleToken = new InjectionToken<string>('singleToken');
-    const multiTokenToOverrideAtModuleLevel =
-        new InjectionToken<string[]>('moduleLevelMultiOverride');
+    const multiTokenToOverrideAtModuleLevel = new InjectionToken<string[]>(
+      'moduleLevelMultiOverride',
+    );
     @NgModule({providers: [{provide: multiToken, useValue: 'valueFromModule', multi: true}]})
-    class MyModule {
-    }
+    class MyModule {}
 
     @NgModule({
       providers: [
-        {provide: singleToken, useValue: 't1'}, {
+        {provide: singleToken, useValue: 't1'},
+        {
           provide: multiTokenToOverrideAtModuleLevel,
           useValue: 'multiTokenToOverrideAtModuleLevelOriginal',
-          multi: true
+          multi: true,
         },
         {provide: multiToken, useValue: 'valueFromModule2', multi: true},
-        {provide: multiToken, useValue: 'secondValueFromModule2', multi: true}
-      ]
+        {provide: multiToken, useValue: 'secondValueFromModule2', multi: true},
+      ],
     })
-    class MyModule2 {
-    }
+    class MyModule2 {}
 
     beforeEach(() => {
       TestBed.configureTestingModule({
         imports: [
-          MyModule, {
+          MyModule,
+          {
             ngModule: MyModule2,
-            providers:
-                [{provide: multiTokenToOverrideAtModuleLevel, useValue: 'override', multi: true}]
-          }
+            providers: [
+              {provide: multiTokenToOverrideAtModuleLevel, useValue: 'override', multi: true},
+            ],
+          },
         ],
       });
     });
@@ -1120,7 +1116,8 @@ describe('TestBed', () => {
       expect(TestBed.inject(multiToken).length).toEqual(3);
       expect(TestBed.inject(multiTokenToOverrideAtModuleLevel).length).toEqual(2);
       expect(TestBed.inject(multiTokenToOverrideAtModuleLevel)).toEqual([
-        'multiTokenToOverrideAtModuleLevelOriginal', 'override'
+        'multiTokenToOverrideAtModuleLevelOriginal',
+        'override',
       ]);
     });
 
@@ -1154,18 +1151,17 @@ describe('TestBed', () => {
       static forRoot() {
         return {
           ngModule: MyMod,
-          providers: [{provide: TOKEN, multi: MyMod.multi, useValue: 'forRootValue'}]
+          providers: [{provide: TOKEN, multi: MyMod.multi, useValue: 'forRootValue'}],
         };
       }
     }
 
-    beforeEach(() => MyMod.multi = true);
+    beforeEach(() => (MyMod.multi = true));
 
     it('when provider is a "regular" provider', () => {
       MyMod.multi = false;
       @NgModule({imports: [MyMod.forRoot()]})
-      class MyMod2 {
-      }
+      class MyMod2 {}
       TestBed.configureTestingModule({imports: [MyMod2]});
       TestBed.overrideProvider(TOKEN, {useValue: ['override']});
       expect(TestBed.inject(TOKEN)).toEqual(['override']);
@@ -1173,8 +1169,7 @@ describe('TestBed', () => {
 
     it('when provider is multi', () => {
       @NgModule({imports: [MyMod.forRoot()]})
-      class MyMod2 {
-      }
+      class MyMod2 {}
       TestBed.configureTestingModule({imports: [MyMod2]});
       TestBed.overrideProvider(TOKEN, {useValue: ['override']});
       expect(TestBed.inject(TOKEN)).toEqual(['override']);
@@ -1182,8 +1177,7 @@ describe('TestBed', () => {
 
     it('restores the original value', () => {
       @NgModule({imports: [MyMod.forRoot()]})
-      class MyMod2 {
-      }
+      class MyMod2 {}
       TestBed.configureTestingModule({imports: [MyMod2]});
       TestBed.overrideProvider(TOKEN, {useValue: ['override']});
       expect(TestBed.inject(TOKEN)).toEqual(['override']);
@@ -1194,38 +1188,37 @@ describe('TestBed', () => {
     });
   });
 
-  it('should allow overriding a provider defined via ModuleWithProviders (using TestBed.overrideProvider)',
-     () => {
-       const serviceOverride = {
-         get() {
-           return 'override';
-         },
-       };
-
-       @Injectable({providedIn: 'root'})
-       class MyService {
-         get() {
-           return 'original';
-         }
-       }
-
-       @NgModule({})
-       class MyModule {
-         static forRoot(): ModuleWithProviders<MyModule> {
-           return {
-             ngModule: MyModule,
-             providers: [MyService],
-           };
-         }
-       }
-       TestBed.overrideProvider(MyService, {useValue: serviceOverride});
-       TestBed.configureTestingModule({
-         imports: [MyModule.forRoot()],
-       });
-
-       const service = TestBed.inject(MyService);
-       expect(service.get()).toEqual('override');
-     });
+  it('should allow overriding a provider defined via ModuleWithProviders (using TestBed.overrideProvider)', () => {
+    const serviceOverride = {
+      get() {
+        return 'override';
+      },
+    };
+
+    @Injectable({providedIn: 'root'})
+    class MyService {
+      get() {
+        return 'original';
+      }
+    }
+
+    @NgModule({})
+    class MyModule {
+      static forRoot(): ModuleWithProviders<MyModule> {
+        return {
+          ngModule: MyModule,
+          providers: [MyService],
+        };
+      }
+    }
+    TestBed.overrideProvider(MyService, {useValue: serviceOverride});
+    TestBed.configureTestingModule({
+      imports: [MyModule.forRoot()],
+    });
+
+    const service = TestBed.inject(MyService);
+    expect(service.get()).toEqual('override');
+  });
 
   it('should handle overrides for a provider that has `ChangeDetectorRef` as a dependency', () => {
     @Injectable({providedIn: 'root'})
@@ -1241,38 +1234,37 @@ describe('TestBed', () => {
     expect(service.token).toBe('override');
   });
 
-  it('should allow overriding a provider defined via ModuleWithProviders (using TestBed.configureTestingModule)',
-     () => {
-       const serviceOverride = {
-         get() {
-           return 'override';
-         },
-       };
-
-       @Injectable({providedIn: 'root'})
-       class MyService {
-         get() {
-           return 'original';
-         }
-       }
-
-       @NgModule({})
-       class MyModule {
-         static forRoot(): ModuleWithProviders<MyModule> {
-           return {
-             ngModule: MyModule,
-             providers: [MyService],
-           };
-         }
-       }
-       TestBed.configureTestingModule({
-         imports: [MyModule.forRoot()],
-         providers: [{provide: MyService, useValue: serviceOverride}],
-       });
-
-       const service = TestBed.inject(MyService);
-       expect(service.get()).toEqual('override');
-     });
+  it('should allow overriding a provider defined via ModuleWithProviders (using TestBed.configureTestingModule)', () => {
+    const serviceOverride = {
+      get() {
+        return 'override';
+      },
+    };
+
+    @Injectable({providedIn: 'root'})
+    class MyService {
+      get() {
+        return 'original';
+      }
+    }
+
+    @NgModule({})
+    class MyModule {
+      static forRoot(): ModuleWithProviders<MyModule> {
+        return {
+          ngModule: MyModule,
+          providers: [MyService],
+        };
+      }
+    }
+    TestBed.configureTestingModule({
+      imports: [MyModule.forRoot()],
+      providers: [{provide: MyService, useValue: serviceOverride}],
+    });
+
+    const service = TestBed.inject(MyService);
+    expect(service.get()).toEqual('override');
+  });
 
   it('should allowing overriding a module with a cyclic structure in its metadata', () => {
     class Cyclic {
@@ -1289,45 +1281,39 @@ describe('TestBed', () => {
         {provide: CYCLES, useValue: new Cyclic('b'), multi: true},
       ],
     })
-    class TestModule {
-    }
+    class TestModule {}
 
-    TestBed
-        .configureTestingModule({
-          imports: [TestModule],
-        })
-        .overrideModule(TestModule, {
-          remove: {
-            providers: [
-              // Removing the cycle named "a" should result in removing the provider for "a".
-              // Note: although this removes a different instance than the one provided, metadata
-              // overrides compare objects by value, not by reference.
-              {provide: CYCLES, useValue: new Cyclic('a'), multi: true},
-
-              // Also attempt to remove a cycle named "B" (which does not exist) to verify that
-              // objects are correctly compared by value.
-              {provide: CYCLES, useValue: new Cyclic('B'), multi: true},
-            ],
-          },
-          add: {
-            providers: [
-              {provide: CYCLES, useValue: new Cyclic('c'), multi: true},
-            ],
-          },
-        })
-        .compileComponents();
+    TestBed.configureTestingModule({
+      imports: [TestModule],
+    })
+      .overrideModule(TestModule, {
+        remove: {
+          providers: [
+            // Removing the cycle named "a" should result in removing the provider for "a".
+            // Note: although this removes a different instance than the one provided, metadata
+            // overrides compare objects by value, not by reference.
+            {provide: CYCLES, useValue: new Cyclic('a'), multi: true},
+
+            // Also attempt to remove a cycle named "B" (which does not exist) to verify that
+            // objects are correctly compared by value.
+            {provide: CYCLES, useValue: new Cyclic('B'), multi: true},
+          ],
+        },
+        add: {
+          providers: [{provide: CYCLES, useValue: new Cyclic('c'), multi: true}],
+        },
+      })
+      .compileComponents();
 
     const values = TestBed.inject(CYCLES);
-    expect(values.map(v => v.name)).toEqual(['b', 'c']);
+    expect(values.map((v) => v.name)).toEqual(['b', 'c']);
   });
 
   it('overrides injectable that is using providedIn: AModule', () => {
     @NgModule()
-    class ServiceModule {
-    }
+    class ServiceModule {}
     @Injectable({providedIn: ServiceModule})
-    class Service {
-    }
+    class Service {}
 
     const fake = 'fake';
     TestBed.overrideProvider(Service, {useValue: fake});
@@ -1350,7 +1336,7 @@ describe('TestBed', () => {
 
     TestBed.configureTestingModule({
       declarations: [MyComp],
-      providers: [{provide: MY_TOKEN, useValue: {value: 'old provider'}, multi: true}]
+      providers: [{provide: MY_TOKEN, useValue: {value: 'old provider'}, multi: true}],
     });
 
     const multiOverride = {useValue: [{value: 'new provider'}], multi: true};
@@ -1367,60 +1353,58 @@ describe('TestBed', () => {
     expect(simpleApp.nativeElement).toHaveText('simple - inherited');
   });
 
-  it('should not trigger change detection for ComponentA while calling TestBed.createComponent for ComponentB',
-     () => {
-       const log: string[] = [];
-       @Component({
-         selector: 'comp-a',
-         template: '...',
-       })
-       class CompA {
-         @Input() inputA: string = '';
-         ngOnInit() {
-           log.push('CompA:ngOnInit', this.inputA);
-         }
-       }
-
-       @Component({
-         selector: 'comp-b',
-         template: '...',
-       })
-       class CompB {
-         @Input() inputB: string = '';
-         ngOnInit() {
-           log.push('CompB:ngOnInit', this.inputB);
-         }
-       }
-
-       TestBed.configureTestingModule({declarations: [CompA, CompB]});
-
-       log.length = 0;
-       const appA = TestBed.createComponent(CompA);
-       appA.componentInstance.inputA = 'a';
-       appA.autoDetectChanges();
-       expect(log).toEqual(['CompA:ngOnInit', 'a']);
-
-       log.length = 0;
-       const appB = TestBed.createComponent(CompB);
-       appB.componentInstance.inputB = 'b';
-       appB.autoDetectChanges();
-       expect(log).toEqual(['CompB:ngOnInit', 'b']);
-     });
+  it('should not trigger change detection for ComponentA while calling TestBed.createComponent for ComponentB', () => {
+    const log: string[] = [];
+    @Component({
+      selector: 'comp-a',
+      template: '...',
+    })
+    class CompA {
+      @Input() inputA: string = '';
+      ngOnInit() {
+        log.push('CompA:ngOnInit', this.inputA);
+      }
+    }
+
+    @Component({
+      selector: 'comp-b',
+      template: '...',
+    })
+    class CompB {
+      @Input() inputB: string = '';
+      ngOnInit() {
+        log.push('CompB:ngOnInit', this.inputB);
+      }
+    }
+
+    TestBed.configureTestingModule({declarations: [CompA, CompB]});
+
+    log.length = 0;
+    const appA = TestBed.createComponent(CompA);
+    appA.componentInstance.inputA = 'a';
+    appA.autoDetectChanges();
+    expect(log).toEqual(['CompA:ngOnInit', 'a']);
+
+    log.length = 0;
+    const appB = TestBed.createComponent(CompB);
+    appB.componentInstance.inputB = 'b';
+    appB.autoDetectChanges();
+    expect(log).toEqual(['CompB:ngOnInit', 'b']);
+  });
 
   it('should resolve components without async resources synchronously', (done) => {
-    TestBed
-        .configureTestingModule({
-          declarations: [ComponentWithInlineTemplate],
-        })
-        .compileComponents()
-        .then(done)
-        .catch(error => {
-          // This should not throw any errors. If an error is thrown, the test will fail.
-          // Specifically use `catch` here to mark the test as done and *then* throw the error
-          // so that the test isn't treated as a timeout.
-          done();
-          throw error;
-        });
+    TestBed.configureTestingModule({
+      declarations: [ComponentWithInlineTemplate],
+    })
+      .compileComponents()
+      .then(done)
+      .catch((error) => {
+        // This should not throw any errors. If an error is thrown, the test will fail.
+        // Specifically use `catch` here to mark the test as done and *then* throw the error
+        // so that the test isn't treated as a timeout.
+        done();
+        throw error;
+      });
 
     // Intentionally call `createComponent` before `compileComponents` is resolved. We want this to
     // work for components that don't have any async resources (templateUrl, styleUrls).
@@ -1431,8 +1415,7 @@ describe('TestBed', () => {
     class CustomErrorHandler {}
 
     @NgModule({providers: [{provide: ErrorHandler, useClass: CustomErrorHandler}]})
-    class ProvidesErrorHandler {
-    }
+    class ProvidesErrorHandler {}
 
     TestBed.resetTestingModule();
     TestBed.configureTestingModule({imports: [ProvidesErrorHandler, HelloWorldModule]});
@@ -1502,28 +1485,24 @@ describe('TestBed', () => {
       selector: 'inner',
       template: 'Inner',
     })
-    class Inner {
-    }
+    class Inner {}
 
     @Component({
       selector: 'outer',
       template: '<inner></inner>',
     })
-    class Outer {
-    }
+    class Outer {}
 
     @NgModule({
       declarations: [Inner, Outer],
     })
-    class Module {
-    }
+    class Module {}
 
     @Component({
       template: '<outer></outer>',
       selector: 'fixture',
     })
-    class Fixture {
-    }
+    class Fixture {}
 
     TestBed.configureTestingModule({
       declarations: [Outer, Fixture],
@@ -1541,12 +1520,10 @@ describe('TestBed', () => {
     @Directive({
       selector: 'my-dir',
     })
-    class MyDir {
-    }
+    class MyDir {}
 
     @NgModule()
-    class MyModule {
-    }
+    class MyModule {}
 
     // [decorator, type, overrideFn]
     const cases: [string, Type<any>, string][] = [
@@ -1581,52 +1558,62 @@ describe('TestBed', () => {
      * This is needed to closer match the behavior of AOT pre-compiled components (compiled
      * outside of TestBed) for cases when defer blocks are used.
      */
-    const getAOTCompiledComponent =
-        (selector: string, dependencies: Array<Type<unknown>> = [],
-         deferrableDependencies: Array<Type<unknown>> = []) => {
-          class ComponentClass {
-            static ɵfac = () => new ComponentClass();
-            static ɵcmp = defineComponent({
-              standalone: true,
-              type: ComponentClass,
-              selectors: [[selector]],
-              decls: 2,
-              vars: 0,
-              dependencies,
-              consts: [['dir']],
-              template:
-                  (rf: any, ctx: any) => {
-                    if (rf & 1) {
-                      elementStart(0, 'div', 0);
-                      text(1, `${selector} cmp!`);
-                      elementEnd();
-                    }
-                  }
-            });
-          }
-          setClassMetadataAsync(
-              ComponentClass,
-              function() {
-                const promises: Array<Promise<Type<unknown>>> = deferrableDependencies.map(
-                    // Emulates a dynamic import, e.g. `import('./cmp-a').then(m => m.CmpA)`
-                    dep => new Promise((resolve) => setTimeout(() => resolve(dep))));
-                return promises;
+    const getAOTCompiledComponent = (
+      selector: string,
+      dependencies: Array<Type<unknown>> = [],
+      deferrableDependencies: Array<Type<unknown>> = [],
+    ) => {
+      class ComponentClass {
+        static ɵfac = () => new ComponentClass();
+        static ɵcmp = defineComponent({
+          standalone: true,
+          type: ComponentClass,
+          selectors: [[selector]],
+          decls: 2,
+          vars: 0,
+          dependencies,
+          consts: [['dir']],
+          template: (rf: any, ctx: any) => {
+            if (rf & 1) {
+              elementStart(0, 'div', 0);
+              text(1, `${selector} cmp!`);
+              elementEnd();
+            }
+          },
+        });
+      }
+      setClassMetadataAsync(
+        ComponentClass,
+        function () {
+          const promises: Array<Promise<Type<unknown>>> = deferrableDependencies.map(
+            // Emulates a dynamic import, e.g. `import('./cmp-a').then(m => m.CmpA)`
+            (dep) => new Promise((resolve) => setTimeout(() => resolve(dep))),
+          );
+          return promises;
+        },
+        function (...deferrableSymbols) {
+          setClassMetadata(
+            ComponentClass,
+            [
+              {
+                type: Component,
+                args: [
+                  {
+                    selector,
+                    standalone: true,
+                    imports: [...dependencies, ...deferrableSymbols],
+                    template: `<div>root cmp!</div>`,
+                  },
+                ],
               },
-              function(...deferrableSymbols) {
-                setClassMetadata(
-                    ComponentClass, [{
-                      type: Component,
-                      args: [{
-                        selector,
-                        standalone: true,
-                        imports: [...dependencies, ...deferrableSymbols],
-                        template: `<div>root cmp!</div>`,
-                      }]
-                    }],
-                    null, null);
-              });
-          return ComponentClass;
-        };
+            ],
+            null,
+            null,
+          );
+        },
+      );
+      return ComponentClass;
+    };
 
     it('should handle async metadata on root and nested components', async () => {
       @Component({
@@ -1634,26 +1621,28 @@ describe('TestBed', () => {
         selector: 'cmp-a',
         template: 'CmpA!',
       })
-      class CmpA {
-      }
+      class CmpA {}
 
       const NestedAotComponent = getAOTCompiledComponent('nested-cmp', [], [CmpA]);
       const RootAotComponent = getAOTCompiledComponent('root', [], [NestedAotComponent]);
 
       TestBed.configureTestingModule({imports: [RootAotComponent]});
 
-      TestBed.overrideComponent(
-          RootAotComponent, {set: {template: `Override of a root template! <nested-cmp />`}});
-      TestBed.overrideComponent(
-          NestedAotComponent, {set: {template: `Override of a nested template! <cmp-a />`}});
+      TestBed.overrideComponent(RootAotComponent, {
+        set: {template: `Override of a root template! <nested-cmp />`},
+      });
+      TestBed.overrideComponent(NestedAotComponent, {
+        set: {template: `Override of a nested template! <cmp-a />`},
+      });
 
       await TestBed.compileComponents();
 
       const fixture = TestBed.createComponent(RootAotComponent);
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.textContent)
-          .toBe('Override of a root template! Override of a nested template! CmpA!');
+      expect(fixture.nativeElement.textContent).toBe(
+        'Override of a root template! Override of a nested template! CmpA!',
+      );
     });
 
     it('should override providers on dependencies of dynamically loaded components', async () => {
@@ -1671,8 +1660,7 @@ describe('TestBed', () => {
       @NgModule({
         providers: [ImportantService],
       })
-      class ThisModuleProvidesService {
-      }
+      class ThisModuleProvidesService {}
 
       @Component({
         standalone: true,
@@ -1695,31 +1683,39 @@ describe('TestBed', () => {
           }
         `,
       })
-      class ParentCmp {
-      }
+      class ParentCmp {}
 
       const deferrableDependencies = [ChildCmp];
       setClassMetadataAsync(
-          ParentCmp,
-          function() {
-            const promises: Array<Promise<Type<unknown>>> = deferrableDependencies.map(
-                // Emulates a dynamic import, e.g. `import('./cmp-a').then(m => m.CmpA)`
-                dep => new Promise((resolve) => setTimeout(() => resolve(dep))));
-            return promises;
-          },
-          function(...deferrableSymbols) {
-            setClassMetadata(
-                ParentCmp, [{
-                  type: Component,
-                  args: [{
+        ParentCmp,
+        function () {
+          const promises: Array<Promise<Type<unknown>>> = deferrableDependencies.map(
+            // Emulates a dynamic import, e.g. `import('./cmp-a').then(m => m.CmpA)`
+            (dep) => new Promise((resolve) => setTimeout(() => resolve(dep))),
+          );
+          return promises;
+        },
+        function (...deferrableSymbols) {
+          setClassMetadata(
+            ParentCmp,
+            [
+              {
+                type: Component,
+                args: [
+                  {
                     selector: 'parent',
                     standalone: true,
                     imports: [...deferrableSymbols],
                     template: `<div>root cmp!</div>`,
-                  }]
-                }],
-                null, null);
-          });
+                  },
+                ],
+              },
+            ],
+            null,
+            null,
+          );
+        },
+      );
 
       // Set `PLATFORM_ID` to a browser platform value to trigger defer loading
       // while running tests in Node.
@@ -1750,7 +1746,7 @@ describe('TestBed', () => {
           // Adding an import that was not present originally
           imports: [NestedAotComponent],
           template: `Override of a root template! <nested-cmp />`,
-        }
+        },
       });
 
       await TestBed.compileComponents();
@@ -1758,8 +1754,9 @@ describe('TestBed', () => {
       const fixture = TestBed.createComponent(RootAotComponent);
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.textContent)
-          .toBe('Override of a root template! nested-cmp cmp!');
+      expect(fixture.nativeElement.textContent).toBe(
+        'Override of a root template! nested-cmp cmp!',
+      );
     });
   });
 
@@ -1791,29 +1788,35 @@ describe('TestBed', () => {
           vars: 0,
           dependencies,
           consts: [['dir']],
-          template:
-              (rf: any, ctx: any) => {
-                if (rf & 1) {
-                  elementStart(0, 'div', 0);
-                  text(1, 'Some template');
-                  elementEnd();
-                }
-              },
-          styles: ['body { margin: 0; }']
+          template: (rf: any, ctx: any) => {
+            if (rf & 1) {
+              elementStart(0, 'div', 0);
+              text(1, 'Some template');
+              elementEnd();
+            }
+          },
+          styles: ['body { margin: 0; }'],
         });
       }
       setClassMetadata(
-          ComponentClass, [{
+        ComponentClass,
+        [
+          {
             type: Component,
-            args: [{
-              standalone,
-              imports: dependencies,
-              selector: 'comp',
-              templateUrl: './template.ng.html',
-              styleUrls: ['./style.css'],
-            }]
-          }],
-          null, null);
+            args: [
+              {
+                standalone,
+                imports: dependencies,
+                selector: 'comp',
+                templateUrl: './template.ng.html',
+                styleUrls: ['./style.css'],
+              },
+            ],
+          },
+        ],
+        null,
+        null,
+      );
       return ComponentClass;
     };
 
@@ -1825,7 +1828,10 @@ describe('TestBed', () => {
         providers: [{provide: A, useValue: 'A'}],
       })
       class SomeDir {
-        constructor(@Inject(A) private tokenA: string, private elementRef: ElementRef) {}
+        constructor(
+          @Inject(A) private tokenA: string,
+          private elementRef: ElementRef,
+        ) {}
 
         ngAfterViewInit() {
           this.elementRef.nativeElement.innerHTML = this.tokenA;
@@ -1873,8 +1879,7 @@ describe('TestBed', () => {
 
         selector: 'fixture',
       })
-      class TestFixture {
-      }
+      class TestFixture {}
 
       TestBed.configureTestingModule({
         // Here, SomeComponent is both declared, and then the module which declares it is
@@ -1890,8 +1895,9 @@ describe('TestBed', () => {
       });
       const fixture = TestBed.createComponent(TestFixture);
       // The regex avoids any issues with styling attributes.
-      expect(fixture.nativeElement.innerHTML)
-          .toMatch(/<comp[^>]*><div[^>]*>Some template<\/div><\/comp>/);
+      expect(fixture.nativeElement.innerHTML).toMatch(
+        /<comp[^>]*><div[^>]*>Some template<\/div><\/comp>/,
+      );
     });
   });
 
@@ -1910,25 +1916,25 @@ describe('TestBed', () => {
       }
 
       @Component({selector: 'comp', template: 'someText'})
-      class SomeComponent {
-      }
+      class SomeComponent {}
 
       @NgModule({declarations: [SomeComponent]})
-      class SomeModule {
-      }
+      class SomeModule {}
 
       TestBed.configureTestingModule({imports: [SomeModule]});
 
       // adding Pipe and Directive via metadata override
-      TestBed.overrideModule(
-          SomeModule, {set: {declarations: [SomeComponent, SomePipe, SomeDirective]}});
-      TestBed.overrideComponent(
-          SomeComponent, {set: {template: `<span someDirective>{{'hello' | somePipe}}</span>`}});
+      TestBed.overrideModule(SomeModule, {
+        set: {declarations: [SomeComponent, SomePipe, SomeDirective]},
+      });
+      TestBed.overrideComponent(SomeComponent, {
+        set: {template: `<span someDirective>{{'hello' | somePipe}}</span>`},
+      });
       TestBed.createComponent(SomeComponent);
 
       const cmpDefBeforeReset = (SomeComponent as any).ɵcmp;
       expect(cmpDefBeforeReset.pipeDefs().length).toEqual(1);
-      expect(cmpDefBeforeReset.directiveDefs().length).toEqual(2);  // directive + component
+      expect(cmpDefBeforeReset.directiveDefs().length).toEqual(2); // directive + component
 
       const scopeBeforeReset = depsTracker.getNgModuleScope(SomeModule as NgModuleType);
       expect(scopeBeforeReset.compilation.pipes.size).toEqual(1);
@@ -1950,32 +1956,32 @@ describe('TestBed', () => {
         exported: {
           pipes: new Set(),
           directives: new Set(),
-        }
+        },
       });
     });
 
     it('should cleanup ng defs for classes with no ng annotations (in case of inheritance)', () => {
       @Component({selector: 'someDirective', template: '...'})
-      class SomeComponent {
-      }
+      class SomeComponent {}
 
       class ComponentWithNoAnnotations extends SomeComponent {}
 
       @Directive({selector: 'some-directive'})
-      class SomeDirective {
-      }
+      class SomeDirective {}
 
       class DirectiveWithNoAnnotations extends SomeDirective {}
 
       @Pipe({name: 'some-pipe'})
-      class SomePipe {
-      }
+      class SomePipe {}
 
       class PipeWithNoAnnotations extends SomePipe {}
 
       TestBed.configureTestingModule({
-        declarations:
-            [ComponentWithNoAnnotations, DirectiveWithNoAnnotations, PipeWithNoAnnotations]
+        declarations: [
+          ComponentWithNoAnnotations,
+          DirectiveWithNoAnnotations,
+          PipeWithNoAnnotations,
+        ],
       });
       TestBed.createComponent(ComponentWithNoAnnotations);
 
@@ -2001,67 +2007,64 @@ describe('TestBed', () => {
       expect(SomePipe.hasOwnProperty('ɵpipe')).toBeTruthy();
     });
 
-    it('should cleanup scopes (configured via `TestBed.configureTestingModule`) between tests',
-       () => {
-         @Component({
-           selector: 'child',
-           template: 'Child comp',
-         })
-         class ChildCmp {
-         }
-
-         @Component({
-           selector: 'root',
-           template: '<child></child>',
-         })
-         class RootCmp {
-         }
-
-         // Case #1: `RootCmp` and `ChildCmp` are both included in the `declarations` field of
-         // the testing module, so `ChildCmp` is in the scope of `RootCmp`.
-         TestBed.configureTestingModule({
-           declarations: [RootCmp, ChildCmp],
-         });
-
-         let fixture = TestBed.createComponent(RootCmp);
-         fixture.detectChanges();
-
-         let childCmpInstance = fixture.debugElement.query(By.directive(ChildCmp));
-         expect(childCmpInstance.componentInstance).toBeInstanceOf(ChildCmp);
-         expect(fixture.nativeElement.textContent).toBe('Child comp');
-
-         TestBed.resetTestingModule();
-
-         const spy = spyOn(console, 'error');
-
-         // Case #2: the `TestBed.configureTestingModule` was not invoked, thus the `ChildCmp`
-         // should not be available in the `RootCmp` scope and no child content should be
-         // rendered.
-         fixture = TestBed.createComponent(RootCmp);
-         // also an error should be logged to the user informing them that
-         // the child component is not part of the module
-         expect(spy).toHaveBeenCalledTimes(1);
-         fixture.detectChanges();
-
-         childCmpInstance = fixture.debugElement.query(By.directive(ChildCmp));
-         expect(childCmpInstance).toBeNull();
-         expect(fixture.nativeElement.textContent).toBe('');
-
-         TestBed.resetTestingModule();
-
-         // Case #3: `ChildCmp` is included in the `declarations` field, but `RootCmp` is not,
-         // so `ChildCmp` is NOT in the scope of `RootCmp` component.
-         TestBed.configureTestingModule({
-           declarations: [ChildCmp],
-         });
-
-         fixture = TestBed.createComponent(RootCmp);
-         fixture.detectChanges();
-
-         childCmpInstance = fixture.debugElement.query(By.directive(ChildCmp));
-         expect(childCmpInstance).toBeNull();
-         expect(fixture.nativeElement.textContent).toBe('');
-       });
+    it('should cleanup scopes (configured via `TestBed.configureTestingModule`) between tests', () => {
+      @Component({
+        selector: 'child',
+        template: 'Child comp',
+      })
+      class ChildCmp {}
+
+      @Component({
+        selector: 'root',
+        template: '<child></child>',
+      })
+      class RootCmp {}
+
+      // Case #1: `RootCmp` and `ChildCmp` are both included in the `declarations` field of
+      // the testing module, so `ChildCmp` is in the scope of `RootCmp`.
+      TestBed.configureTestingModule({
+        declarations: [RootCmp, ChildCmp],
+      });
+
+      let fixture = TestBed.createComponent(RootCmp);
+      fixture.detectChanges();
+
+      let childCmpInstance = fixture.debugElement.query(By.directive(ChildCmp));
+      expect(childCmpInstance.componentInstance).toBeInstanceOf(ChildCmp);
+      expect(fixture.nativeElement.textContent).toBe('Child comp');
+
+      TestBed.resetTestingModule();
+
+      const spy = spyOn(console, 'error');
+
+      // Case #2: the `TestBed.configureTestingModule` was not invoked, thus the `ChildCmp`
+      // should not be available in the `RootCmp` scope and no child content should be
+      // rendered.
+      fixture = TestBed.createComponent(RootCmp);
+      // also an error should be logged to the user informing them that
+      // the child component is not part of the module
+      expect(spy).toHaveBeenCalledTimes(1);
+      fixture.detectChanges();
+
+      childCmpInstance = fixture.debugElement.query(By.directive(ChildCmp));
+      expect(childCmpInstance).toBeNull();
+      expect(fixture.nativeElement.textContent).toBe('');
+
+      TestBed.resetTestingModule();
+
+      // Case #3: `ChildCmp` is included in the `declarations` field, but `RootCmp` is not,
+      // so `ChildCmp` is NOT in the scope of `RootCmp` component.
+      TestBed.configureTestingModule({
+        declarations: [ChildCmp],
+      });
+
+      fixture = TestBed.createComponent(RootCmp);
+      fixture.detectChanges();
+
+      childCmpInstance = fixture.debugElement.query(By.directive(ChildCmp));
+      expect(childCmpInstance).toBeNull();
+      expect(fixture.nativeElement.textContent).toBe('');
+    });
 
     it('should clean up overridden providers for modules that are imported more than once', () => {
       @Injectable()
@@ -2072,8 +2075,7 @@ describe('TestBed', () => {
       @NgModule({
         providers: [Token],
       })
-      class Module {
-      }
+      class Module {}
 
       TestBed.configureTestingModule({imports: [Module, Module]});
       TestBed.overrideProvider(Token, {useValue: {name: 'fake'}});
@@ -2087,40 +2089,37 @@ describe('TestBed', () => {
       expect((Module as any).ɵinj.providers).toEqual([Token]);
     });
 
-    it('should clean up overridden providers on components whose modules are compiled more than once',
-       async () => {
-         @Injectable()
-         class SomeInjectable {
-           id: string|undefined;
-         }
+    it('should clean up overridden providers on components whose modules are compiled more than once', async () => {
+      @Injectable()
+      class SomeInjectable {
+        id: string | undefined;
+      }
 
-         @Component({providers: [SomeInjectable]})
-         class ComponentWithProvider {
-           constructor(readonly injectable: SomeInjectable) {}
-         }
+      @Component({providers: [SomeInjectable]})
+      class ComponentWithProvider {
+        constructor(readonly injectable: SomeInjectable) {}
+      }
 
-         @NgModule({declarations: [ComponentWithProvider]})
-         class MyModule {
-         }
+      @NgModule({declarations: [ComponentWithProvider]})
+      class MyModule {}
 
-         TestBed.configureTestingModule({imports: [MyModule]});
-         const originalResolver = (ComponentWithProvider as any).ɵcmp.providersResolver;
-         TestBed.overrideProvider(SomeInjectable, {useValue: {id: 'fake'}});
+      TestBed.configureTestingModule({imports: [MyModule]});
+      const originalResolver = (ComponentWithProvider as any).ɵcmp.providersResolver;
+      TestBed.overrideProvider(SomeInjectable, {useValue: {id: 'fake'}});
 
-         const compiler = TestBed.inject(Compiler);
-         await compiler.compileModuleAsync(MyModule);
-         compiler.compileModuleSync(MyModule);
+      const compiler = TestBed.inject(Compiler);
+      await compiler.compileModuleAsync(MyModule);
+      compiler.compileModuleSync(MyModule);
 
-         TestBed.resetTestingModule();
-         expect((ComponentWithProvider as any).ɵcmp.providersResolver).toEqual(originalResolver);
-       });
+      TestBed.resetTestingModule();
+      expect((ComponentWithProvider as any).ɵcmp.providersResolver).toEqual(originalResolver);
+    });
   });
 
   describe('overrides provider', () => {
     it('with empty provider object', () => {
       @Injectable()
-      class Service {
-      }
+      class Service {}
       TestBed.overrideProvider(Service, {});
       // Should be able to get a Service instance because it has no dependencies that can't be
       // resolved
@@ -2139,8 +2138,7 @@ describe('TestBed', () => {
     }
 
     @NgModule({})
-    class DependencyModule {
-    }
+    class DependencyModule {}
 
     // We need to write the compiler output manually here,
     // because it depends on code generated by ngcc.
@@ -2150,13 +2148,11 @@ describe('TestBed', () => {
     }
     setNgModuleScope(TestingModule, {imports: () => [DependencyModule]});
 
-    TestBed
-        .configureTestingModule({
-          imports: [TestingModule],
-          declarations: [AppComponent],
-          providers: [{provide: InjectedString, useValue: {value: 'initial'}}],
-        })
-        .compileComponents();
+    TestBed.configureTestingModule({
+      imports: [TestingModule],
+      declarations: [AppComponent],
+      providers: [{provide: InjectedString, useValue: {value: 'initial'}}],
+    }).compileComponents();
 
     TestBed.overrideProvider(InjectedString, {useValue: {value: 'changed'}}).compileComponents();
 
@@ -2199,8 +2195,9 @@ describe('TestBed', () => {
         expect(TestBed.inject(TOKEN)).toBe('from TestBed');
 
         expect(TestBed.inject(TOKEN, undefined, {skipSelf: true, optional: true})).toBeNull();
-        expect(TestBed.inject(TOKEN, undefined, InjectFlags.SkipSelf | InjectFlags.Optional))
-            .toBeNull();
+        expect(
+          TestBed.inject(TOKEN, undefined, InjectFlags.SkipSelf | InjectFlags.Optional),
+        ).toBeNull();
       });
     });
   });
@@ -2268,7 +2265,7 @@ describe('TestBed module teardown', () => {
     TestBed.configureTestingModule({
       providers: [SimpleService],
       declarations: [GreetingCmp],
-      teardown: {destroyAfterEach: true}
+      teardown: {destroyAfterEach: true},
     });
     TestBed.createComponent(GreetingCmp);
 
@@ -2305,8 +2302,9 @@ describe('TestBed module teardown', () => {
     TestBed.createComponent(ThrowsOnDestroy);
 
     const spy = spyOn(console, 'error');
-    expect(() => TestBed.resetTestingModule())
-        .toThrowError('1 component threw errors during cleanup');
+    expect(() => TestBed.resetTestingModule()).toThrowError(
+      '1 component threw errors during cleanup',
+    );
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
@@ -2328,8 +2326,9 @@ describe('TestBed module teardown', () => {
     }
 
     const spy = spyOn(console, 'error');
-    expect(() => TestBed.resetTestingModule())
-        .toThrowError('3 components threw errors during cleanup');
+    expect(() => TestBed.resetTestingModule()).toThrowError(
+      '3 components threw errors during cleanup',
+    );
     expect(spy).toHaveBeenCalledTimes(3);
   });
 
@@ -2381,43 +2380,36 @@ describe('TestBed module teardown', () => {
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
-  it('should remove the styles associated with a test component when the test module is torn down',
-     () => {
-       @Component({
-         template: '<span>Hello</span>',
-         styles: [`span {color: hotpink;}`],
-       })
-       class StyledComp1 {
-       }
-
-       @Component({
-         template: '<div>Hello</div>',
-         styles: [`div {color: red;}`],
-       })
-       class StyledComp2 {
-       }
-
-       TestBed.configureTestingModule({
-         declarations: [StyledComp1, StyledComp2],
-         teardown: {destroyAfterEach: true},
-       });
-
-       const fixtures = [
-         TestBed.createComponent(StyledComp1),
-         TestBed.createComponent(StyledComp2),
-       ];
-       const fixtureDocument = fixtures[0].nativeElement.ownerDocument;
-       const styleCountBefore = fixtureDocument.querySelectorAll('style').length;
-
-       // Note that we can only assert that the behavior works as expected by checking that the
-       // number of stylesheets has decreased. We can't expect that they'll be zero, because there
-       // may by stylesheets leaking in from other tests that don't use the module teardown
-       // behavior.
-       expect(styleCountBefore).toBeGreaterThan(0);
-       TestBed.resetTestingModule();
-       expect(fixtureDocument.querySelectorAll('style').length).toBeLessThan(styleCountBefore);
-     });
+  it('should remove the styles associated with a test component when the test module is torn down', () => {
+    @Component({
+      template: '<span>Hello</span>',
+      styles: [`span {color: hotpink;}`],
+    })
+    class StyledComp1 {}
 
+    @Component({
+      template: '<div>Hello</div>',
+      styles: [`div {color: red;}`],
+    })
+    class StyledComp2 {}
+
+    TestBed.configureTestingModule({
+      declarations: [StyledComp1, StyledComp2],
+      teardown: {destroyAfterEach: true},
+    });
+
+    const fixtures = [TestBed.createComponent(StyledComp1), TestBed.createComponent(StyledComp2)];
+    const fixtureDocument = fixtures[0].nativeElement.ownerDocument;
+    const styleCountBefore = fixtureDocument.querySelectorAll('style').length;
+
+    // Note that we can only assert that the behavior works as expected by checking that the
+    // number of stylesheets has decreased. We can't expect that they'll be zero, because there
+    // may by stylesheets leaking in from other tests that don't use the module teardown
+    // behavior.
+    expect(styleCountBefore).toBeGreaterThan(0);
+    TestBed.resetTestingModule();
+    expect(fixtureDocument.querySelectorAll('style').length).toBeLessThan(styleCountBefore);
+  });
 
   it('should remove the fixture root element from the DOM when module teardown is enabled', () => {
     TestBed.configureTestingModule({
@@ -2433,8 +2425,9 @@ describe('TestBed module teardown', () => {
   });
 
   it('should rethrow errors based on the default teardown behavior', () => {
-    expect(TestBedImpl.INSTANCE.shouldRethrowTeardownErrors())
-        .toBe(TEARDOWN_TESTING_MODULE_ON_DESTROY_DEFAULT);
+    expect(TestBedImpl.INSTANCE.shouldRethrowTeardownErrors()).toBe(
+      TEARDOWN_TESTING_MODULE_ON_DESTROY_DEFAULT,
+    );
   });
 
   it('should rethrow errors if the option is omitted and test teardown is enabled', () => {
@@ -2464,8 +2457,9 @@ describe('TestBed module `errorOnUnknownElements`', () => {
   });
 
   it('should not throw based on the default behavior', () => {
-    expect(TestBedImpl.INSTANCE.shouldThrowErrorOnUnknownElements())
-        .toBe(THROW_ON_UNKNOWN_ELEMENTS_DEFAULT);
+    expect(TestBedImpl.INSTANCE.shouldThrowErrorOnUnknownElements()).toBe(
+      THROW_ON_UNKNOWN_ELEMENTS_DEFAULT,
+    );
   });
 
   it('should not throw if the option is omitted', () => {
@@ -2492,8 +2486,9 @@ describe('TestBed module `errorOnUnknownProperties`', () => {
   });
 
   it('should not throw based on the default behavior', () => {
-    expect(TestBedImpl.INSTANCE.shouldThrowErrorOnUnknownProperties())
-        .toBe(THROW_ON_UNKNOWN_PROPERTIES_DEFAULT);
+    expect(TestBedImpl.INSTANCE.shouldThrowErrorOnUnknownProperties()).toBe(
+      THROW_ON_UNKNOWN_PROPERTIES_DEFAULT,
+    );
   });
 
   it('should not throw if the option is omitted', () => {
diff --git a/packages/core/test/testability/testability_spec.ts b/packages/core/test/testability/testability_spec.ts
index cc5d0f59ac33c..487f96106e285 100644
--- a/packages/core/test/testability/testability_spec.ts
+++ b/packages/core/test/testability/testability_spec.ts
@@ -8,7 +8,12 @@
 
 import {EventEmitter} from '@angular/core';
 import {Injectable} from '@angular/core/src/di';
-import {GetTestability, PendingMacrotask, Testability, TestabilityRegistry,} from '@angular/core/src/testability/testability';
+import {
+  GetTestability,
+  PendingMacrotask,
+  Testability,
+  TestabilityRegistry,
+} from '@angular/core/src/testability/testability';
 import {NgZone} from '@angular/core/src/zone/ng_zone';
 import {fakeAsync, tick, waitForAsync} from '@angular/core/testing';
 
@@ -26,10 +31,10 @@ function microTask(fn: Function): void {
 class NoopGetTestability implements GetTestability {
   addToWindow(registry: TestabilityRegistry): void {}
   findTestabilityInTree(
-      registry: TestabilityRegistry,
-      elem: any,
-      findInAncestors: boolean,
-      ): Testability|null {
+    registry: TestabilityRegistry,
+    elem: any,
+    findInAncestors: boolean,
+  ): Testability | null {
     return null;
   }
 }
@@ -84,97 +89,97 @@ describe('Testability', () => {
   describe('NgZone callback logic', () => {
     describe('whenStable with timeout', () => {
       it('should fire if Angular is already stable', waitForAsync(() => {
-           testability.whenStable(execute, 200);
+        testability.whenStable(execute, 200);
 
-           microTask(() => {
-             expect(execute).toHaveBeenCalled();
-           });
-         }));
+        microTask(() => {
+          expect(execute).toHaveBeenCalled();
+        });
+      }));
 
       it('should fire when macroTasks are cancelled', fakeAsync(() => {
-           const id = ngZone.run(() => setTimeout(() => {}, 1000));
-           testability.whenStable(execute, 500);
+        const id = ngZone.run(() => setTimeout(() => {}, 1000));
+        testability.whenStable(execute, 500);
 
-           tick(200);
-           ngZone.run(() => clearTimeout(id));
-           // fakeAsync doesn't trigger NgZones whenStable
-           ngZone.stable();
+        tick(200);
+        ngZone.run(() => clearTimeout(id));
+        // fakeAsync doesn't trigger NgZones whenStable
+        ngZone.stable();
 
-           tick(1);
-           expect(execute).toHaveBeenCalled();
-         }));
+        tick(1);
+        expect(execute).toHaveBeenCalled();
+      }));
 
       it('calls the done callback when angular is stable', fakeAsync(() => {
-           let timeout1Done = false;
-           ngZone.run(() => setTimeout(() => (timeout1Done = true), 500));
-           testability.whenStable(execute, 1000);
+        let timeout1Done = false;
+        ngZone.run(() => setTimeout(() => (timeout1Done = true), 500));
+        testability.whenStable(execute, 1000);
 
-           tick(600);
-           ngZone.stable();
-           tick();
+        tick(600);
+        ngZone.stable();
+        tick();
 
-           expect(timeout1Done).toEqual(true);
-           expect(execute).toHaveBeenCalled();
+        expect(timeout1Done).toEqual(true);
+        expect(execute).toHaveBeenCalled();
 
-           // Should cancel the done timeout.
-           tick(500);
-           ngZone.stable();
-           tick();
-           expect(execute.calls.count()).toEqual(1);
-         }));
+        // Should cancel the done timeout.
+        tick(500);
+        ngZone.stable();
+        tick();
+        expect(execute.calls.count()).toEqual(1);
+      }));
 
       it('calls update when macro tasks change', fakeAsync(() => {
-           let timeout1Done = false;
-           let timeout2Done = false;
-           ngZone.run(() => setTimeout(() => (timeout1Done = true), 500));
-           tick();
-           testability.whenStable(execute, 1000, updateCallback);
-
-           tick(100);
-           ngZone.run(() => setTimeout(() => (timeout2Done = true), 300));
-           expect(updateCallback.calls.count()).toEqual(1);
-           tick(600);
-
-           expect(timeout1Done).toEqual(true);
-           expect(timeout2Done).toEqual(true);
-           expect(updateCallback.calls.count()).toEqual(3);
-           expect(execute).toHaveBeenCalled();
-
-           const update1 = updateCallback.calls.all()[0].args[0] as PendingMacrotask[];
-           expect(update1[0].data!.delay).toEqual(500);
-
-           const update2 = updateCallback.calls.all()[1].args[0] as PendingMacrotask[];
-           expect(update2[0].data!.delay).toEqual(500);
-           expect(update2[1].data!.delay).toEqual(300);
-         }));
+        let timeout1Done = false;
+        let timeout2Done = false;
+        ngZone.run(() => setTimeout(() => (timeout1Done = true), 500));
+        tick();
+        testability.whenStable(execute, 1000, updateCallback);
+
+        tick(100);
+        ngZone.run(() => setTimeout(() => (timeout2Done = true), 300));
+        expect(updateCallback.calls.count()).toEqual(1);
+        tick(600);
+
+        expect(timeout1Done).toEqual(true);
+        expect(timeout2Done).toEqual(true);
+        expect(updateCallback.calls.count()).toEqual(3);
+        expect(execute).toHaveBeenCalled();
+
+        const update1 = updateCallback.calls.all()[0].args[0] as PendingMacrotask[];
+        expect(update1[0].data!.delay).toEqual(500);
+
+        const update2 = updateCallback.calls.all()[1].args[0] as PendingMacrotask[];
+        expect(update2[0].data!.delay).toEqual(500);
+        expect(update2[1].data!.delay).toEqual(300);
+      }));
 
       it('cancels the done callback if the update callback returns true', fakeAsync(() => {
-           let timeoutDone = false;
-           ngZone.unstable();
-           execute2.and.returnValue(true);
-           testability.whenStable(execute, 1000, execute2);
-
-           tick(100);
-           ngZone.run(() => setTimeout(() => (timeoutDone = true), 500));
-           ngZone.stable();
-           expect(execute2).toHaveBeenCalled();
-
-           tick(500);
-           ngZone.stable();
-           tick();
-
-           expect(execute).not.toHaveBeenCalled();
-         }));
+        let timeoutDone = false;
+        ngZone.unstable();
+        execute2.and.returnValue(true);
+        testability.whenStable(execute, 1000, execute2);
+
+        tick(100);
+        ngZone.run(() => setTimeout(() => (timeoutDone = true), 500));
+        ngZone.stable();
+        expect(execute2).toHaveBeenCalled();
+
+        tick(500);
+        ngZone.stable();
+        tick();
+
+        expect(execute).not.toHaveBeenCalled();
+      }));
     });
 
     it('should fire whenstable callback if event is already finished', fakeAsync(() => {
-         ngZone.unstable();
-         ngZone.stable();
-         testability.whenStable(execute);
+      ngZone.unstable();
+      ngZone.stable();
+      testability.whenStable(execute);
 
-         tick();
-         expect(execute).toHaveBeenCalled();
-       }));
+      tick();
+      expect(execute).toHaveBeenCalled();
+    }));
 
     it('should not fire whenstable callbacks synchronously if event is already finished', () => {
       ngZone.unstable();
@@ -185,16 +190,16 @@ describe('Testability', () => {
     });
 
     it('should fire whenstable callback when event finishes', fakeAsync(() => {
-         ngZone.unstable();
-         testability.whenStable(execute);
+      ngZone.unstable();
+      testability.whenStable(execute);
 
-         tick();
-         expect(execute).not.toHaveBeenCalled();
-         ngZone.stable();
+      tick();
+      expect(execute).not.toHaveBeenCalled();
+      ngZone.stable();
 
-         tick();
-         expect(execute).toHaveBeenCalled();
-       }));
+      tick();
+      expect(execute).toHaveBeenCalled();
+    }));
 
     it('should not fire whenstable callbacks synchronously when event finishes', () => {
       ngZone.unstable();
@@ -204,34 +209,33 @@ describe('Testability', () => {
       expect(execute).not.toHaveBeenCalled();
     });
 
-    it('should fire whenstable callback with didWork if event is already finished',
-       fakeAsync(() => {
-         ngZone.unstable();
-         ngZone.stable();
-         testability.whenStable(execute);
+    it('should fire whenstable callback with didWork if event is already finished', fakeAsync(() => {
+      ngZone.unstable();
+      ngZone.stable();
+      testability.whenStable(execute);
 
-         tick();
-         expect(execute).toHaveBeenCalled();
-         testability.whenStable(execute2);
+      tick();
+      expect(execute).toHaveBeenCalled();
+      testability.whenStable(execute2);
 
-         tick();
-         expect(execute2).toHaveBeenCalled();
-       }));
+      tick();
+      expect(execute2).toHaveBeenCalled();
+    }));
 
     it('should fire whenstable callback with didwork when event finishes', fakeAsync(() => {
-         ngZone.unstable();
-         testability.whenStable(execute);
+      ngZone.unstable();
+      testability.whenStable(execute);
 
-         tick();
-         ngZone.stable();
+      tick();
+      ngZone.stable();
 
-         tick();
-         expect(execute).toHaveBeenCalled();
-         testability.whenStable(execute2);
+      tick();
+      expect(execute).toHaveBeenCalled();
+      testability.whenStable(execute2);
 
-         tick();
-         expect(execute2).toHaveBeenCalled();
-       }));
+      tick();
+      expect(execute2).toHaveBeenCalled();
+    }));
   });
 });
 
diff --git a/packages/core/test/transfer_state_spec.ts b/packages/core/test/transfer_state_spec.ts
index 2e46f23260e27..b35a55bcae1b5 100644
--- a/packages/core/test/transfer_state_spec.ts
+++ b/packages/core/test/transfer_state_spec.ts
@@ -19,7 +19,7 @@ function removeScriptTag(doc: Document, id: string) {
   }
 }
 
-function addScriptTag(doc: Document, appId: string, data: object|string) {
+function addScriptTag(doc: Document, appId: string, data: object | string) {
   const script = doc.createElement('script');
   const id = appId + '-state';
   script.id = id;
@@ -43,8 +43,10 @@ describe('TransferState', () => {
   beforeEach(() => {
     doc = getDocument();
     TestBed.configureTestingModule({
-      providers:
-          [{provide: APP_ID_TOKEN, useValue: APP_ID}, {provide: PLATFORM_ID, useValue: 'browser'}],
+      providers: [
+        {provide: APP_ID_TOKEN, useValue: APP_ID},
+        {provide: PLATFORM_ID, useValue: 'browser'},
+      ],
     });
   });
 
@@ -70,21 +72,21 @@ describe('TransferState', () => {
     expect(transferState.hasKey(TEST_KEY)).toBe(true);
   });
 
-  it('supports setting and accessing value \'0\' via get', () => {
+  it("supports setting and accessing value '0' via get", () => {
     const transferState: TransferState = TestBed.inject(TransferState);
     transferState.set(TEST_KEY, 0);
     expect(transferState.get(TEST_KEY, 20)).toBe(0);
     expect(transferState.hasKey(TEST_KEY)).toBe(true);
   });
 
-  it('supports setting and accessing value \'false\' via get', () => {
+  it("supports setting and accessing value 'false' via get", () => {
     const transferState: TransferState = TestBed.inject(TransferState);
     transferState.set(BOOLEAN_KEY, false);
     expect(transferState.get(BOOLEAN_KEY, true)).toBe(false);
     expect(transferState.hasKey(BOOLEAN_KEY)).toBe(true);
   });
 
-  it('supports setting and accessing value \'null\' via get', () => {
+  it("supports setting and accessing value 'null' via get", () => {
     const transferState: TransferState = TestBed.inject(TransferState);
     transferState.set(TEST_KEY, null);
     expect(transferState.get(TEST_KEY, 20 as any)).toBe(null);
@@ -136,18 +138,19 @@ describe('TransferState', () => {
     expect(transferState.isEmpty).toBeTrue();
 
     transferState.set(DELAYED_KEY, '</script><script>alert(\'Hello&\' + "World");');
-    expect(transferState.toJson())
-        .toBe(`{"delayed":"\\u003C/script>\\u003Cscript>alert('Hello&' + \\"World\\");"}`);
+    expect(transferState.toJson()).toBe(
+      `{"delayed":"\\u003C/script>\\u003Cscript>alert('Hello&' + \\"World\\");"}`,
+    );
   });
 
   it('should decode `\\u003C` (<) when restoring stating', () => {
-    const encodedState =
-        `{"delayed":"\\u003C/script>\\u003Cscript>alert('Hello&' + \\"World\\");"}`;
+    const encodedState = `{"delayed":"\\u003C/script>\\u003Cscript>alert('Hello&' + \\"World\\");"}`;
     addScriptTag(doc, APP_ID, encodedState);
     const transferState = TestBed.inject(TransferState);
 
     expect(transferState.toJson()).toBe(encodedState);
-    expect(transferState.get(DELAYED_KEY, null))
-        .toBe('</script><script>alert(\'Hello&\' + "World");');
+    expect(transferState.get(DELAYED_KEY, null)).toBe(
+      '</script><script>alert(\'Hello&\' + "World");',
+    );
   });
 });
diff --git a/packages/core/test/util/array_utils_spec.ts b/packages/core/test/util/array_utils_spec.ts
index a9707cffbe5e4..5cdcb646366d4 100644
--- a/packages/core/test/util/array_utils_spec.ts
+++ b/packages/core/test/util/array_utils_spec.ts
@@ -6,7 +6,18 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {arrayIndexOfSorted, arrayInsert, arrayInsert2, arraySplice, flatten, KeyValueArray, keyValueArrayDelete, keyValueArrayGet, keyValueArrayIndexOf, keyValueArraySet} from '../../src/util/array_utils';
+import {
+  arrayIndexOfSorted,
+  arrayInsert,
+  arrayInsert2,
+  arraySplice,
+  flatten,
+  KeyValueArray,
+  keyValueArrayDelete,
+  keyValueArrayGet,
+  keyValueArrayIndexOf,
+  keyValueArraySet,
+} from '../../src/util/array_utils';
 
 describe('array_utils', () => {
   describe('flatten', () => {
@@ -71,7 +82,12 @@ describe('array_utils', () => {
       expectArrayInsert2([0, 1, 2], 2, 'A', 'B').toEqual([0, 1, 'A', 'B', 2]);
       expectArrayInsert2([0, 1, 2], 3, 'A', 'B').toEqual([0, 1, 2, 'A', 'B']);
       expectArrayInsert2(['height', '1px', 'width', '2000px'], 0, 'color', 'red').toEqual([
-        'color', 'red', 'height', '1px', 'width', '2000px'
+        'color',
+        'red',
+        'height',
+        '1px',
+        'width',
+        '2000px',
       ]);
     });
   });
diff --git a/packages/core/test/util/decorators_spec.ts b/packages/core/test/util/decorators_spec.ts
index c491003e0ef89..f88539aa37434 100644
--- a/packages/core/test/util/decorators_spec.ts
+++ b/packages/core/test/util/decorators_spec.ts
@@ -12,10 +12,16 @@ import {ANNOTATIONS, makeDecorator, makePropDecorator} from '../../src/util/deco
 class DecoratedParent {}
 class DecoratedChild extends DecoratedParent {}
 
-const TerminalDecorator =
-    makeDecorator('TerminalDecorator', (data: any) => ({terminal: true, ...data}));
+const TerminalDecorator = makeDecorator('TerminalDecorator', (data: any) => ({
+  terminal: true,
+  ...data,
+}));
 const TestDecorator = makeDecorator(
-    'TestDecorator', (data: any) => data, Object, (fn: any) => fn.Terminal = TerminalDecorator);
+  'TestDecorator',
+  (data: any) => data,
+  Object,
+  (fn: any) => (fn.Terminal = TerminalDecorator),
+);
 
 describe('Property decorators', () => {
   // https://github.com/angular/angular/issues/12224
@@ -57,7 +63,7 @@ describe('decorators', () => {
     expect(annotation.marker).toEqual('WORKS');
   });
 
-  it('should not apply decorators from the prototype chain', function() {
+  it('should not apply decorators from the prototype chain', function () {
     TestDecorator({marker: 'parent'})(DecoratedParent);
     TestDecorator({marker: 'child'})(DecoratedChild);
 
diff --git a/packages/core/test/util/dom_spec.ts b/packages/core/test/util/dom_spec.ts
index c62618f01707a..fb5394b6688eb 100644
--- a/packages/core/test/util/dom_spec.ts
+++ b/packages/core/test/util/dom_spec.ts
@@ -26,8 +26,9 @@ describe('comment node text escaping', () => {
     });
 
     it('should escape multiple markers', () => {
-      expect(escapeCommentText('before-->inline-->after'))
-          .toEqual('before--\u200b>\u200binline--\u200b>\u200bafter');
+      expect(escapeCommentText('before-->inline-->after')).toEqual(
+        'before--\u200b>\u200binline--\u200b>\u200bafter',
+      );
     });
 
     it('should caver the spec', () => {
diff --git a/packages/core/test/util/lang_spec.ts b/packages/core/test/util/lang_spec.ts
index 753b2e71ff045..6d4e245c73501 100644
--- a/packages/core/test/util/lang_spec.ts
+++ b/packages/core/test/util/lang_spec.ts
@@ -11,17 +11,17 @@ import {of} from 'rxjs';
 describe('isSubscribable', () => {
   it('should be true for an Observable', () => expect(isSubscribable(of(true))).toEqual(true));
 
-  it('should be true if the argument is the object with subscribe function',
-     () => expect(isSubscribable({subscribe: () => {}})).toEqual(true));
+  it('should be true if the argument is the object with subscribe function', () =>
+    expect(isSubscribable({subscribe: () => {}})).toEqual(true));
 
-  it('should be false if the argument is undefined',
-     () => expect(isSubscribable(undefined)).toEqual(false));
+  it('should be false if the argument is undefined', () =>
+    expect(isSubscribable(undefined)).toEqual(false));
 
   it('should be false if the argument is null', () => expect(isSubscribable(null)).toEqual(false));
 
-  it('should be false if the argument is an object',
-     () => expect(isSubscribable({})).toEqual(false));
+  it('should be false if the argument is an object', () =>
+    expect(isSubscribable({})).toEqual(false));
 
-  it('should be false if the argument is a function',
-     () => expect(isSubscribable(() => {})).toEqual(false));
+  it('should be false if the argument is a function', () =>
+    expect(isSubscribable(() => {})).toEqual(false));
 });
diff --git a/packages/core/test/util_spec.ts b/packages/core/test/util_spec.ts
index b80b851bcf044..bab4edd5acef8 100644
--- a/packages/core/test/util_spec.ts
+++ b/packages/core/test/util_spec.ts
@@ -9,9 +9,9 @@
 import {stringify} from '../src/util/stringify';
 
 describe('stringify', () => {
-  it('should return string undefined when toString returns undefined',
-     () => expect(stringify({toString: (): any => undefined})).toBe('undefined'));
+  it('should return string undefined when toString returns undefined', () =>
+    expect(stringify({toString: (): any => undefined})).toBe('undefined'));
 
-  it('should return string null when toString returns null',
-     () => expect(stringify({toString: (): any => null})).toBe('null'));
+  it('should return string null when toString returns null', () =>
+    expect(stringify({toString: (): any => null})).toBe('null'));
 });
diff --git a/packages/core/test/zone/async-tagging-console.spec.ts b/packages/core/test/zone/async-tagging-console.spec.ts
index 70dc2989572b4..c8882121d4d7f 100644
--- a/packages/core/test/zone/async-tagging-console.spec.ts
+++ b/packages/core/test/zone/async-tagging-console.spec.ts
@@ -28,9 +28,11 @@ describe('AsyncTaggingConsoleTest', () => {
       scheduleAsyncTaskSpy.calls.reset();
       startAsyncTaskSpy.calls.reset();
       finishAsyncTaskSpy.calls.reset();
-      asyncStackTaggingZone = Zone.current.fork(new AsyncStackTaggingZoneSpec('test', {
-        createTask: scheduleAsyncTaskSpy,
-      }));
+      asyncStackTaggingZone = Zone.current.fork(
+        new AsyncStackTaggingZoneSpec('test', {
+          createTask: scheduleAsyncTaskSpy,
+        }),
+      );
     });
 
     it('setTimeout', (done: DoneFn) => {
@@ -114,8 +116,11 @@ describe('AsyncTaggingConsoleTest', () => {
     }
 
     // Only run test when addEventListener is patched by zone.js
-    if (document && document.addEventListener &&
-        (document.addEventListener as any)[Zone.__symbol__('OriginalDelegate')]) {
+    if (
+      document &&
+      document.addEventListener &&
+      (document.addEventListener as any)[Zone.__symbol__('OriginalDelegate')]
+    ) {
       it('button click', () => {
         asyncStackTaggingZone.run(() => {
           const button = document.createElement('button');
@@ -127,8 +132,9 @@ describe('AsyncTaggingConsoleTest', () => {
           button.dispatchEvent(clickEvent);
           button.dispatchEvent(clickEvent);
           button.removeEventListener('click', handler);
-          expect(scheduleAsyncTaskSpy)
-              .toHaveBeenCalledWith('Zone - HTMLButtonElement.addEventListener:click');
+          expect(scheduleAsyncTaskSpy).toHaveBeenCalledWith(
+            'Zone - HTMLButtonElement.addEventListener:click',
+          );
           expect(startAsyncTaskSpy.calls.count()).toBe(2);
           expect(finishAsyncTaskSpy.calls.count()).toBe(2);
         });
diff --git a/packages/core/test/zone/ng_zone_spec.ts b/packages/core/test/zone/ng_zone_spec.ts
index ff426b8b57ad5..652950c093e43 100644
--- a/packages/core/test/zone/ng_zone_spec.ts
+++ b/packages/core/test/zone/ng_zone_spec.ts
@@ -36,7 +36,7 @@ function logOnError() {
       NgZone.assertNotInAngularZone();
       _errors.push(error);
       _traces.push(error.stack);
-    }
+    },
   });
 }
 
@@ -62,7 +62,6 @@ function runNgZoneNoLog(fn: () => any) {
   }
 }
 
-
 describe('NgZone', () => {
   function createZone(enableLongStackTrace: boolean) {
     return new NgZone({enableLongStackTrace: enableLongStackTrace});
@@ -85,7 +84,7 @@ describe('NgZone', () => {
 
     commonTests();
 
-    it('should produce long stack traces', done => {
+    it('should produce long stack traces', (done) => {
       macroTask(() => {
         let resolve: (result: any) => void;
         const promise: Promise<any> = new Promise((res) => {
@@ -109,7 +108,7 @@ describe('NgZone', () => {
       });
     });
 
-    it('should produce long stack traces (when using microtasks)', done => {
+    it('should produce long stack traces (when using microtasks)', (done) => {
       macroTask(() => {
         let resolve: (result: any) => void;
         const promise: Promise<any> = new Promise((res) => {
@@ -145,7 +144,7 @@ describe('NgZone', () => {
 
     commonTests();
 
-    it('should disable long stack traces', done => {
+    it('should disable long stack traces', (done) => {
       macroTask(() => {
         let resolve: (result: any) => void;
         const promise: Promise<any> = new Promise((res) => {
@@ -195,19 +194,27 @@ describe('NoopNgZone', () => {
     let applyArgsArray: any[] = [];
     const testContext = {};
     const testArgs = ['args'];
-    ngZone.run(function(this: any, arg: any) {
-      applyThisArray.push(this);
-      applyArgsArray.push([arg]);
-      ngZone.runGuarded(function(this: any, argGuarded: any) {
+    ngZone.run(
+      function (this: any, arg: any) {
         applyThisArray.push(this);
-        applyArgsArray.push([argGuarded]);
-        ngZone.runOutsideAngular(function(this: any, argOutsideAngular: any) {
-          applyThisArray.push(this);
-          applyArgsArray.push([argOutsideAngular]);
-          runs = true;
-        });
-      }, this, [arg]);
-    }, testContext, testArgs);
+        applyArgsArray.push([arg]);
+        ngZone.runGuarded(
+          function (this: any, argGuarded: any) {
+            applyThisArray.push(this);
+            applyArgsArray.push([argGuarded]);
+            ngZone.runOutsideAngular(function (this: any, argOutsideAngular: any) {
+              applyThisArray.push(this);
+              applyArgsArray.push([argOutsideAngular]);
+              runs = true;
+            });
+          },
+          this,
+          [arg],
+        );
+      },
+      testContext,
+      testArgs,
+    );
     expect(runs).toBe(true);
     expect(applyThisArray.length).toBe(3);
     expect(applyArgsArray.length).toBe(3);
@@ -227,7 +234,6 @@ describe('NoopNgZone', () => {
   });
 });
 
-
 function commonTests() {
   describe('hasPendingMicrotasks', () => {
     it('should be false', () => {
@@ -285,7 +291,7 @@ function commonTests() {
   });
 
   describe('run', () => {
-    it('should return the body return value from run', done => {
+    it('should return the body return value from run', (done) => {
       macroTask(() => {
         expect(_zone.run(() => 6)).toEqual(6);
       });
@@ -295,7 +301,7 @@ function commonTests() {
       });
     });
 
-    it('should return the body return value from runTask', done => {
+    it('should return the body return value from runTask', (done) => {
       macroTask(() => {
         expect(_zone.runTask(() => 6)).toEqual(6);
       });
@@ -305,7 +311,7 @@ function commonTests() {
       });
     });
 
-    it('should call onUnstable and onMicrotaskEmpty', done => {
+    it('should call onUnstable and onMicrotaskEmpty', (done) => {
       runNgZoneNoLog(() => macroTask(_log.fn('run')));
       macroTask(() => {
         expect(_log.result()).toEqual('onUnstable; run; onMicrotaskEmpty; onStable');
@@ -313,7 +319,7 @@ function commonTests() {
       });
     });
 
-    it('should call onStable once at the end of event', done => {
+    it('should call onStable once at the end of event', (done) => {
       // The test is set up in a way that causes the zone loop to run onMicrotaskEmpty twice
       // then verified that onStable is only called once at the end
 
@@ -330,19 +336,19 @@ function commonTests() {
               queueMicrotask(() => {});
             });
           }
-        }
+        },
       });
 
       macroTask(() => {
-        expect(_log.result())
-            .toEqual(
-                'onUnstable; run; onMicrotaskEmpty; onMicrotaskEmpty 1; ' +
-                'onMicrotaskEmpty; onMicrotaskEmpty 2; onStable');
+        expect(_log.result()).toEqual(
+          'onUnstable; run; onMicrotaskEmpty; onMicrotaskEmpty 1; ' +
+            'onMicrotaskEmpty; onMicrotaskEmpty 2; onStable',
+        );
         done();
       }, resultTimer);
     });
 
-    it('should call standalone onStable', done => {
+    it('should call standalone onStable', (done) => {
       runNgZoneNoLog(() => macroTask(_log.fn('run')));
 
       macroTask(() => {
@@ -351,7 +357,7 @@ function commonTests() {
       }, resultTimer);
     });
 
-    xit('should run subscriber listeners in the subscription zone (outside)', done => {
+    xit('should run subscriber listeners in the subscription zone (outside)', (done) => {
       // Each subscriber fires a microtask outside the Angular zone. The test
       // then verifies that those microtasks do not cause additional digests.
 
@@ -362,7 +368,7 @@ function commonTests() {
           _log.add('onUnstable');
           queueMicrotask(() => {});
           turnStart = true;
-        }
+        },
       });
 
       let turnDone = false;
@@ -372,7 +378,7 @@ function commonTests() {
           _log.add('onMicrotaskEmpty');
           queueMicrotask(() => {});
           turnDone = true;
-        }
+        },
       });
 
       let eventDone = false;
@@ -382,7 +388,7 @@ function commonTests() {
           _log.add('onStable');
           queueMicrotask(() => {});
           eventDone = true;
-        }
+        },
       });
 
       macroTask(() => {
@@ -395,7 +401,7 @@ function commonTests() {
       }, resultTimer);
     });
 
-    it('should run subscriber listeners in the subscription zone (inside)', done => {
+    it('should run subscriber listeners in the subscription zone (inside)', (done) => {
       runNgZoneNoLog(() => macroTask(_log.fn('run')));
 
       // the only practical use-case to run a callback inside the zone is
@@ -409,26 +415,26 @@ function commonTests() {
             queueMicrotask(() => {});
           });
           turnDone = true;
-        }
+        },
       });
 
       macroTask(() => {
-        expect(_log.result())
-            .toEqual(
-                'onUnstable; run; onMicrotaskEmpty; onMyMicrotaskEmpty; ' +
-                'onMicrotaskEmpty; onMyMicrotaskEmpty; onStable');
+        expect(_log.result()).toEqual(
+          'onUnstable; run; onMicrotaskEmpty; onMyMicrotaskEmpty; ' +
+            'onMicrotaskEmpty; onMyMicrotaskEmpty; onStable',
+        );
         done();
       }, resultTimer);
     });
 
-    it('should run async tasks scheduled inside onStable outside Angular zone', done => {
+    it('should run async tasks scheduled inside onStable outside Angular zone', (done) => {
       runNgZoneNoLog(() => macroTask(_log.fn('run')));
 
       _zone.onStable.subscribe({
         next: () => {
           NgZone.assertNotInAngularZone();
           _log.add('onMyTaskDone');
-        }
+        },
       });
 
       macroTask(() => {
@@ -437,25 +443,25 @@ function commonTests() {
       });
     });
 
-    it('should call onUnstable once before a turn and onMicrotaskEmpty once after the turn',
-       done => {
-         runNgZoneNoLog(() => {
-           macroTask(() => {
-             _log.add('run start');
-             queueMicrotask(_log.fn('async'));
-             _log.add('run end');
-           });
-         });
-
-         macroTask(() => {
-           // The microtask (async) is executed after the macrotask (run)
-           expect(_log.result())
-               .toEqual('onUnstable; run start; run end; async; onMicrotaskEmpty; onStable');
-           done();
-         }, resultTimer);
-       });
-
-    it('should not run onUnstable and onMicrotaskEmpty for nested Zone.run', done => {
+    it('should call onUnstable once before a turn and onMicrotaskEmpty once after the turn', (done) => {
+      runNgZoneNoLog(() => {
+        macroTask(() => {
+          _log.add('run start');
+          queueMicrotask(_log.fn('async'));
+          _log.add('run end');
+        });
+      });
+
+      macroTask(() => {
+        // The microtask (async) is executed after the macrotask (run)
+        expect(_log.result()).toEqual(
+          'onUnstable; run start; run end; async; onMicrotaskEmpty; onStable',
+        );
+        done();
+      }, resultTimer);
+    });
+
+    it('should not run onUnstable and onMicrotaskEmpty for nested Zone.run', (done) => {
       runNgZoneNoLog(() => {
         macroTask(() => {
           _log.add('start run');
@@ -468,46 +474,45 @@ function commonTests() {
       });
 
       macroTask(() => {
-        expect(_log.result())
-            .toEqual(
-                'onUnstable; start run; nested run; end run; nested run microtask; onMicrotaskEmpty; onStable');
+        expect(_log.result()).toEqual(
+          'onUnstable; start run; nested run; end run; nested run microtask; onMicrotaskEmpty; onStable',
+        );
+        done();
+      }, resultTimer);
+    });
+
+    it('should not run onUnstable and onMicrotaskEmpty for nested Zone.run invoked from onMicrotaskEmpty', (done) => {
+      runNgZoneNoLog(() => macroTask(_log.fn('start run')));
+
+      _zone.onMicrotaskEmpty.subscribe({
+        next: () => {
+          _log.add('onMicrotaskEmpty:started');
+          _zone.run(() => _log.add('nested run'));
+          _log.add('onMicrotaskEmpty:finished');
+        },
+      });
+
+      macroTask(() => {
+        expect(_log.result()).toEqual(
+          'onUnstable; start run; onMicrotaskEmpty; onMicrotaskEmpty:started; nested run; onMicrotaskEmpty:finished; onStable',
+        );
         done();
       }, resultTimer);
     });
 
-    it('should not run onUnstable and onMicrotaskEmpty for nested Zone.run invoked from onMicrotaskEmpty',
-       done => {
-         runNgZoneNoLog(() => macroTask(_log.fn('start run')));
-
-         _zone.onMicrotaskEmpty.subscribe({
-           next: () => {
-             _log.add('onMicrotaskEmpty:started');
-             _zone.run(() => _log.add('nested run'));
-             _log.add('onMicrotaskEmpty:finished');
-           }
-         });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual(
-                   'onUnstable; start run; onMicrotaskEmpty; onMicrotaskEmpty:started; nested run; onMicrotaskEmpty:finished; onStable');
-           done();
-         }, resultTimer);
-       });
-
-    it('should call onUnstable and onMicrotaskEmpty before and after each top-level run', done => {
+    it('should call onUnstable and onMicrotaskEmpty before and after each top-level run', (done) => {
       runNgZoneNoLog(() => macroTask(_log.fn('run1')));
       runNgZoneNoLog(() => macroTask(_log.fn('run2')));
 
       macroTask(() => {
-        expect(_log.result())
-            .toEqual(
-                'onUnstable; run1; onMicrotaskEmpty; onStable; onUnstable; run2; onMicrotaskEmpty; onStable');
+        expect(_log.result()).toEqual(
+          'onUnstable; run1; onMicrotaskEmpty; onStable; onUnstable; run2; onMicrotaskEmpty; onStable',
+        );
         done();
       }, resultTimer);
     });
 
-    it('should call onUnstable and onMicrotaskEmpty before and after each turn', done => {
+    it('should call onUnstable and onMicrotaskEmpty before and after each turn', (done) => {
       let aResolve: (result: string) => void;
       let aPromise: Promise<string>;
       let bResolve: (result: string) => void;
@@ -515,10 +520,10 @@ function commonTests() {
 
       runNgZoneNoLog(() => {
         macroTask(() => {
-          aPromise = new Promise(res => {
+          aPromise = new Promise((res) => {
             aResolve = res;
           });
-          bPromise = new Promise(res => {
+          bPromise = new Promise((res) => {
             bResolve = res;
           });
 
@@ -536,14 +541,14 @@ function commonTests() {
       });
 
       macroTask(() => {
-        expect(_log.result())
-            .toEqual(
-                'onUnstable; run start; onMicrotaskEmpty; onStable; onUnstable; a then; b then; onMicrotaskEmpty; onStable');
+        expect(_log.result()).toEqual(
+          'onUnstable; run start; onMicrotaskEmpty; onStable; onUnstable; a then; b then; onMicrotaskEmpty; onStable',
+        );
         done();
       }, resultTimer);
     });
 
-    it('should run a function outside of the angular zone', done => {
+    it('should run a function outside of the angular zone', (done) => {
       macroTask(() => {
         _zone.runOutsideAngular(_log.fn('run'));
       });
@@ -554,128 +559,131 @@ function commonTests() {
       });
     });
 
-    it('should call onUnstable and onMicrotaskEmpty when an inner microtask is scheduled from outside angular',
-       done => {
-         let resolve: (result: string|null) => void;
-         let promise: Promise<string|null>;
-
-         macroTask(() => {
-           NgZone.assertNotInAngularZone();
-           promise = new Promise<string|null>(res => {
-             resolve = res;
-           });
-         });
-
-         runNgZoneNoLog(() => {
-           macroTask(() => {
-             NgZone.assertInAngularZone();
-             promise.then(_log.fn('executedMicrotask'));
-           });
-         });
-
-         macroTask(() => {
-           NgZone.assertNotInAngularZone();
-           _log.add('scheduling a microtask');
-           resolve(null);
-         });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual(
-                   // First VM turn => setup Promise then
-                   'onUnstable; onMicrotaskEmpty; onStable; ' +
-                   // Second VM turn (outside of angular)
-                   'scheduling a microtask; onUnstable; ' +
-                   // Third VM Turn => execute the microtask (inside angular)
-                   // No onUnstable;  because we don't own the task which started the turn.
-                   'executedMicrotask; onMicrotaskEmpty; onStable');
-           done();
-         }, resultTimer);
-       });
-
-    it('should call onUnstable only before executing a microtask scheduled in onMicrotaskEmpty ' +
-           'and not onMicrotaskEmpty after executing the task',
-       done => {
-         runNgZoneNoLog(() => macroTask(_log.fn('run')));
-
-         let ran = false;
-         _zone.onMicrotaskEmpty.subscribe({
-           next: () => {
-             _log.add('onMicrotaskEmpty(begin)');
-
-             if (!ran) {
-               _zone.run(() => {
-                 queueMicrotask(() => {
-                   ran = true;
-                   _log.add('executedMicrotask');
-                 });
-               });
-             }
-
-             _log.add('onMicrotaskEmpty(end)');
-           }
-         });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual(
-                   // First VM turn => 'run' macrotask
-                   'onUnstable; run; onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(end); ' +
-                   // Second microtaskDrain Turn => microtask enqueued from onMicrotaskEmpty
-                   'executedMicrotask; onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(end); onStable');
-           done();
-         }, resultTimer);
-       });
-
-    it('should call onUnstable and onMicrotaskEmpty for a queueMicrotask in onMicrotaskEmpty triggered by ' +
-           'a queueMicrotask in run',
-       done => {
-         runNgZoneNoLog(() => {
-           macroTask(() => {
-             _log.add('queueMicrotask');
-             queueMicrotask(_log.fn('run(executeMicrotask)'));
-           });
-         });
-
-         let ran = false;
-         _zone.onMicrotaskEmpty.subscribe({
-           next: () => {
-             _log.add('onMicrotaskEmpty(begin)');
-             if (!ran) {
-               _log.add('onMicrotaskEmpty(queueMicrotask)');
-               _zone.run(() => {
-                 queueMicrotask(() => {
-                   ran = true;
-                   _log.add('onMicrotaskEmpty(executeMicrotask)');
-                 });
-               });
-             }
-             _log.add('onMicrotaskEmpty(end)');
-           }
-         });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual(
-                   // First VM Turn => a macrotask + the microtask it enqueues
-                   'onUnstable; queueMicrotask; run(executeMicrotask); onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(queueMicrotask); onMicrotaskEmpty(end); ' +
-                   // Second VM Turn => the microtask enqueued from onMicrotaskEmpty
-                   'onMicrotaskEmpty(executeMicrotask); onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(end); onStable');
-           done();
-         }, resultTimer);
-       });
-
-    it('should execute promises scheduled in onUnstable before promises scheduled in run', done => {
+    it('should call onUnstable and onMicrotaskEmpty when an inner microtask is scheduled from outside angular', (done) => {
+      let resolve: (result: string | null) => void;
+      let promise: Promise<string | null>;
+
+      macroTask(() => {
+        NgZone.assertNotInAngularZone();
+        promise = new Promise<string | null>((res) => {
+          resolve = res;
+        });
+      });
+
+      runNgZoneNoLog(() => {
+        macroTask(() => {
+          NgZone.assertInAngularZone();
+          promise.then(_log.fn('executedMicrotask'));
+        });
+      });
+
+      macroTask(() => {
+        NgZone.assertNotInAngularZone();
+        _log.add('scheduling a microtask');
+        resolve(null);
+      });
+
+      macroTask(() => {
+        expect(_log.result()).toEqual(
+          // First VM turn => setup Promise then
+          'onUnstable; onMicrotaskEmpty; onStable; ' +
+            // Second VM turn (outside of angular)
+            'scheduling a microtask; onUnstable; ' +
+            // Third VM Turn => execute the microtask (inside angular)
+            // No onUnstable;  because we don't own the task which started the turn.
+            'executedMicrotask; onMicrotaskEmpty; onStable',
+        );
+        done();
+      }, resultTimer);
+    });
+
+    it(
+      'should call onUnstable only before executing a microtask scheduled in onMicrotaskEmpty ' +
+        'and not onMicrotaskEmpty after executing the task',
+      (done) => {
+        runNgZoneNoLog(() => macroTask(_log.fn('run')));
+
+        let ran = false;
+        _zone.onMicrotaskEmpty.subscribe({
+          next: () => {
+            _log.add('onMicrotaskEmpty(begin)');
+
+            if (!ran) {
+              _zone.run(() => {
+                queueMicrotask(() => {
+                  ran = true;
+                  _log.add('executedMicrotask');
+                });
+              });
+            }
+
+            _log.add('onMicrotaskEmpty(end)');
+          },
+        });
+
+        macroTask(() => {
+          expect(_log.result()).toEqual(
+            // First VM turn => 'run' macrotask
+            'onUnstable; run; onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(end); ' +
+              // Second microtaskDrain Turn => microtask enqueued from onMicrotaskEmpty
+              'executedMicrotask; onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(end); onStable',
+          );
+          done();
+        }, resultTimer);
+      },
+    );
+
+    it(
+      'should call onUnstable and onMicrotaskEmpty for a queueMicrotask in onMicrotaskEmpty triggered by ' +
+        'a queueMicrotask in run',
+      (done) => {
+        runNgZoneNoLog(() => {
+          macroTask(() => {
+            _log.add('queueMicrotask');
+            queueMicrotask(_log.fn('run(executeMicrotask)'));
+          });
+        });
+
+        let ran = false;
+        _zone.onMicrotaskEmpty.subscribe({
+          next: () => {
+            _log.add('onMicrotaskEmpty(begin)');
+            if (!ran) {
+              _log.add('onMicrotaskEmpty(queueMicrotask)');
+              _zone.run(() => {
+                queueMicrotask(() => {
+                  ran = true;
+                  _log.add('onMicrotaskEmpty(executeMicrotask)');
+                });
+              });
+            }
+            _log.add('onMicrotaskEmpty(end)');
+          },
+        });
+
+        macroTask(() => {
+          expect(_log.result()).toEqual(
+            // First VM Turn => a macrotask + the microtask it enqueues
+            'onUnstable; queueMicrotask; run(executeMicrotask); onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(queueMicrotask); onMicrotaskEmpty(end); ' +
+              // Second VM Turn => the microtask enqueued from onMicrotaskEmpty
+              'onMicrotaskEmpty(executeMicrotask); onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(end); onStable',
+          );
+          done();
+        }, resultTimer);
+      },
+    );
+
+    it('should execute promises scheduled in onUnstable before promises scheduled in run', (done) => {
       runNgZoneNoLog(() => {
         macroTask(() => {
           _log.add('run start');
           resolvedPromise
-              .then((_) => {
-                _log.add('promise then');
-                resolvedPromise.then(_log.fn('promise foo'));
-                return Promise.resolve(null);
-              })
-              .then(_log.fn('promise bar'));
+            .then((_) => {
+              _log.add('promise then');
+              resolvedPromise.then(_log.fn('promise foo'));
+              return Promise.resolve(null);
+            })
+            .then(_log.fn('promise bar'));
           _log.add('run end');
         });
       });
@@ -694,7 +702,7 @@ function commonTests() {
             startPromiseRan = true;
           }
           _log.add('onUnstable(end)');
-        }
+        },
       });
 
       _zone.onMicrotaskEmpty.subscribe({
@@ -708,120 +716,117 @@ function commonTests() {
             donePromiseRan = true;
           }
           _log.add('onMicrotaskEmpty(end)');
-        }
+        },
+      });
+
+      macroTask(() => {
+        expect(_log.result()).toEqual(
+          // First VM turn: enqueue a microtask in onUnstable
+          'onUnstable; onUnstable(begin); onUnstable(schedulePromise); onUnstable(end); ' +
+            // First VM turn: execute the macrotask which enqueues microtasks
+            'run start; run end; ' +
+            // First VM turn: execute enqueued microtasks
+            'onUnstable(executePromise); promise then; promise foo; promise bar; onMicrotaskEmpty; ' +
+            // First VM turn: onTurnEnd, enqueue a microtask
+            'onMicrotaskEmpty(begin); onMicrotaskEmpty(schedulePromise); onMicrotaskEmpty(end); ' +
+            // Second VM turn: execute the microtask from onTurnEnd
+            'onMicrotaskEmpty(executePromise); onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(end); onStable',
+        );
+        done();
+      }, resultTimer);
+    });
+
+    it('should call onUnstable and onMicrotaskEmpty before and after each turn, respectively', (done) => {
+      let aResolve: (result: string | null) => void;
+      let aPromise: Promise<string | null>;
+      let bResolve: (result: string | null) => void;
+      let bPromise: Promise<string | null>;
+
+      runNgZoneNoLog(() => {
+        macroTask(() => {
+          aPromise = new Promise<string | null>((res) => {
+            aResolve = res;
+          });
+          bPromise = new Promise<string | null>((res) => {
+            bResolve = res;
+          });
+          aPromise.then(_log.fn('a then'));
+          bPromise.then(_log.fn('b then'));
+          _log.add('run start');
+        });
+      });
+
+      runNgZoneNoLog(() => {
+        macroTask(() => {
+          aResolve(null);
+        }, 10);
+      });
+
+      runNgZoneNoLog(() => {
+        macroTask(() => {
+          bResolve(null);
+        }, 20);
+      });
+
+      macroTask(() => {
+        expect(_log.result()).toEqual(
+          // First VM turn
+          'onUnstable; run start; onMicrotaskEmpty; onStable; ' +
+            // Second VM turn
+            'onUnstable; a then; onMicrotaskEmpty; onStable; ' +
+            // Third VM turn
+            'onUnstable; b then; onMicrotaskEmpty; onStable',
+        );
+        done();
+      }, resultTimer);
+    });
+
+    it('should call onUnstable and onMicrotaskEmpty before and after (respectively) all turns in a chain', (done) => {
+      runNgZoneNoLog(() => {
+        macroTask(() => {
+          _log.add('run start');
+          queueMicrotask(() => {
+            _log.add('async1');
+            queueMicrotask(_log.fn('async2'));
+          });
+          _log.add('run end');
+        });
       });
 
       macroTask(() => {
-        expect(_log.result())
-            .toEqual(
-                // First VM turn: enqueue a microtask in onUnstable
-                'onUnstable; onUnstable(begin); onUnstable(schedulePromise); onUnstable(end); ' +
-                // First VM turn: execute the macrotask which enqueues microtasks
-                'run start; run end; ' +
-                // First VM turn: execute enqueued microtasks
-                'onUnstable(executePromise); promise then; promise foo; promise bar; onMicrotaskEmpty; ' +
-                // First VM turn: onTurnEnd, enqueue a microtask
-                'onMicrotaskEmpty(begin); onMicrotaskEmpty(schedulePromise); onMicrotaskEmpty(end); ' +
-                // Second VM turn: execute the microtask from onTurnEnd
-                'onMicrotaskEmpty(executePromise); onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(end); onStable');
+        expect(_log.result()).toEqual(
+          'onUnstable; run start; run end; async1; async2; onMicrotaskEmpty; onStable',
+        );
         done();
       }, resultTimer);
     });
 
-    it('should call onUnstable and onMicrotaskEmpty before and after each turn, respectively',
-       done => {
-         let aResolve: (result: string|null) => void;
-         let aPromise: Promise<string|null>;
-         let bResolve: (result: string|null) => void;
-         let bPromise: Promise<string|null>;
-
-         runNgZoneNoLog(() => {
-           macroTask(() => {
-             aPromise = new Promise<string|null>(res => {
-               aResolve = res;
-             });
-             bPromise = new Promise<string|null>(res => {
-               bResolve = res;
-             });
-             aPromise.then(_log.fn('a then'));
-             bPromise.then(_log.fn('b then'));
-             _log.add('run start');
-           });
-         });
-
-         runNgZoneNoLog(() => {
-           macroTask(() => {
-             aResolve(null);
-           }, 10);
-         });
-
-         runNgZoneNoLog(() => {
-           macroTask(() => {
-             bResolve(null);
-           }, 20);
-         });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual(
-                   // First VM turn
-                   'onUnstable; run start; onMicrotaskEmpty; onStable; ' +
-                   // Second VM turn
-                   'onUnstable; a then; onMicrotaskEmpty; onStable; ' +
-                   // Third VM turn
-                   'onUnstable; b then; onMicrotaskEmpty; onStable');
-           done();
-         }, resultTimer);
-       });
-
-    it('should call onUnstable and onMicrotaskEmpty before and after (respectively) all turns in a chain',
-       done => {
-         runNgZoneNoLog(() => {
-           macroTask(() => {
-             _log.add('run start');
-             queueMicrotask(() => {
-               _log.add('async1');
-               queueMicrotask(_log.fn('async2'));
-             });
-             _log.add('run end');
-           });
-         });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual(
-                   'onUnstable; run start; run end; async1; async2; onMicrotaskEmpty; onStable');
-           done();
-         }, resultTimer);
-       });
-
-    it('should call onUnstable and onMicrotaskEmpty for promises created outside of run body',
-       done => {
-         let promise: Promise<any>;
-
-         runNgZoneNoLog(() => {
-           macroTask(() => {
-             _zone.runOutsideAngular(() => {
-               promise = Promise.resolve(4).then((x) => Promise.resolve(x));
-             });
-
-             promise.then(_log.fn('promise then'));
-             _log.add('zone run');
-           });
-         });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual(
-                   'onUnstable; zone run; onMicrotaskEmpty; onStable; ' +
-                   'onUnstable; promise then; onMicrotaskEmpty; onStable');
-           done();
-         }, resultTimer);
-       });
+    it('should call onUnstable and onMicrotaskEmpty for promises created outside of run body', (done) => {
+      let promise: Promise<any>;
+
+      runNgZoneNoLog(() => {
+        macroTask(() => {
+          _zone.runOutsideAngular(() => {
+            promise = Promise.resolve(4).then((x) => Promise.resolve(x));
+          });
+
+          promise.then(_log.fn('promise then'));
+          _log.add('zone run');
+        });
+      });
+
+      macroTask(() => {
+        expect(_log.result()).toEqual(
+          'onUnstable; zone run; onMicrotaskEmpty; onStable; ' +
+            'onUnstable; promise then; onMicrotaskEmpty; onStable',
+        );
+        done();
+      }, resultTimer);
+    });
   });
 
   describe('exceptions', () => {
-    it('should call the on error callback when it is invoked via zone.runGuarded', done => {
+    it('should call the on error callback when it is invoked via zone.runGuarded', (done) => {
       macroTask(() => {
         const exception = new Error('sync');
 
@@ -835,20 +840,21 @@ function commonTests() {
       });
     });
 
-    it('should not call the on error callback but rethrow when it is invoked via zone.run',
-       done => {
-         macroTask(() => {
-           const exception = new Error('sync');
-           expect(() => _zone.run(() => {
-             throw exception;
-           })).toThrowError('sync');
+    it('should not call the on error callback but rethrow when it is invoked via zone.run', (done) => {
+      macroTask(() => {
+        const exception = new Error('sync');
+        expect(() =>
+          _zone.run(() => {
+            throw exception;
+          }),
+        ).toThrowError('sync');
 
-           expect(_errors.length).toBe(0);
-           done();
-         });
-       });
+        expect(_errors.length).toBe(0);
+        done();
+      });
+    });
 
-    it('should call onError for errors from microtasks', done => {
+    it('should call onError for errors from microtasks', (done) => {
       const exception = new Error('async');
 
       macroTask(() => {
@@ -877,14 +883,14 @@ function commonTests() {
       }));
 
       it('should fakeAsync even if the NgZone was created outside.', fakeAsync(() => {
-           let result: string = null!;
-           // try to escape the current fakeAsync zone by using NgZone which was created outside.
-           ngZone.run(() => {
-             Promise.resolve('works').then((v) => result = v);
-             flushMicrotasks();
-           });
-           expect(result).toEqual('works');
-         }));
+        let result: string = null!;
+        // try to escape the current fakeAsync zone by using NgZone which was created outside.
+        ngZone.run(() => {
+          Promise.resolve('works').then((v) => (result = v));
+          flushMicrotasks();
+        });
+        expect(result).toEqual('works');
+      }));
 
       describe('async', () => {
         let asyncResult: string;
@@ -895,13 +901,13 @@ function commonTests() {
         });
 
         it('should async even if the NgZone was created outside.', waitForAsync(() => {
-             // try to escape the current async zone by using NgZone which was created outside.
-             ngZone.run(() => {
-               setTimeout(() => {
-                 Promise.resolve('works').then((v) => asyncResult = v);
-               }, waitLongerThenTestFrameworkAsyncTimeout);
-             });
-           }));
+          // try to escape the current async zone by using NgZone which was created outside.
+          ngZone.run(() => {
+            setTimeout(() => {
+              Promise.resolve('works').then((v) => (asyncResult = v));
+            }, waitLongerThenTestFrameworkAsyncTimeout);
+          });
+        }));
 
         afterEach(() => {
           expect(asyncResult).toEqual('works');
@@ -911,77 +917,98 @@ function commonTests() {
   });
 
   describe('coalescing', () => {
-    it('should execute callback when a view transition is waiting for the callback to complete',
-       async () => {
-         if (!(document as any).startViewTransition) {
-           return;
-         }
-
-         const startTime = performance.now();
-         // When there is a pending view transition, `requestAnimationFrame` is blocked
-         // because the browser is waiting to take a screenshot. This test ensures that
-         // the scheduler does not block completion of the transition for too long.
-         // This test would fail if the scheduling function _only_ used `rAF`
-         // but works if there is another mechanism as well (i.e. race with setTimeout).
-         // https://github.com/angular/angular/issues/54544
-         const transition = (document as any).startViewTransition(() => {
-           return new Promise<void>(resolve => {
-             scheduler(() => {
-               resolve();
-             });
-           });
-         });
-         await transition.finished;
-         expect(performance.now() - startTime).toBeLessThan(1000);
-       });
-
-    describe(
-        'shouldCoalesceRunChangeDetection = false, shouldCoalesceEventChangeDetection = false',
-        () => {
-          let notCoalesceZone: NgZone;
-          let logs: string[] = [];
-
-          beforeEach(() => {
-            notCoalesceZone = new NgZone({});
-            logs = [];
-            notCoalesceZone.onMicrotaskEmpty.subscribe(() => {
-              logs.push('microTask empty');
-            });
+    it('should execute callback when a view transition is waiting for the callback to complete', async () => {
+      if (!(document as any).startViewTransition) {
+        return;
+      }
+
+      const startTime = performance.now();
+      // When there is a pending view transition, `requestAnimationFrame` is blocked
+      // because the browser is waiting to take a screenshot. This test ensures that
+      // the scheduler does not block completion of the transition for too long.
+      // This test would fail if the scheduling function _only_ used `rAF`
+      // but works if there is another mechanism as well (i.e. race with setTimeout).
+      // https://github.com/angular/angular/issues/54544
+      const transition = (document as any).startViewTransition(() => {
+        return new Promise<void>((resolve) => {
+          scheduler(() => {
+            resolve();
           });
+        });
+      });
+      await transition.finished;
+      expect(performance.now() - startTime).toBeLessThan(1000);
+    });
 
-          it('should run sync', () => {
-            notCoalesceZone.run(() => {});
-            expect(logs).toEqual(['microTask empty']);
-          });
+    describe('shouldCoalesceRunChangeDetection = false, shouldCoalesceEventChangeDetection = false', () => {
+      let notCoalesceZone: NgZone;
+      let logs: string[] = [];
+
+      beforeEach(() => {
+        notCoalesceZone = new NgZone({});
+        logs = [];
+        notCoalesceZone.onMicrotaskEmpty.subscribe(() => {
+          logs.push('microTask empty');
+        });
+      });
+
+      it('should run sync', () => {
+        notCoalesceZone.run(() => {});
+        expect(logs).toEqual(['microTask empty']);
+      });
 
-          it('should emit onMicroTaskEmpty multiple times within the same event loop for multiple ngZone.run',
-             () => {
-               notCoalesceZone.run(() => {});
-               notCoalesceZone.run(() => {});
-               expect(logs).toEqual(['microTask empty', 'microTask empty']);
-             });
-
-          it('should emit onMicroTaskEmpty multiple times within the same event loop for multiple tasks',
-             () => {
-               const tasks: Task[] = [];
-               notCoalesceZone.run(() => {
-                 tasks.push(Zone.current.scheduleEventTask('myEvent', () => {
-                   logs.push('eventTask1');
-                 }, undefined, () => {}));
-                 tasks.push(Zone.current.scheduleEventTask('myEvent', () => {
-                   logs.push('eventTask2');
-                 }, undefined, () => {}));
-                 tasks.push(Zone.current.scheduleMacroTask('myMacro', () => {
-                   logs.push('macroTask');
-                 }, undefined, () => {}));
-               });
-               tasks.forEach(t => t.invoke());
-               expect(logs).toEqual([
-                 'microTask empty', 'eventTask1', 'microTask empty', 'eventTask2',
-                 'microTask empty', 'macroTask', 'microTask empty'
-               ]);
-             });
+      it('should emit onMicroTaskEmpty multiple times within the same event loop for multiple ngZone.run', () => {
+        notCoalesceZone.run(() => {});
+        notCoalesceZone.run(() => {});
+        expect(logs).toEqual(['microTask empty', 'microTask empty']);
+      });
+
+      it('should emit onMicroTaskEmpty multiple times within the same event loop for multiple tasks', () => {
+        const tasks: Task[] = [];
+        notCoalesceZone.run(() => {
+          tasks.push(
+            Zone.current.scheduleEventTask(
+              'myEvent',
+              () => {
+                logs.push('eventTask1');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+          tasks.push(
+            Zone.current.scheduleEventTask(
+              'myEvent',
+              () => {
+                logs.push('eventTask2');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+          tasks.push(
+            Zone.current.scheduleMacroTask(
+              'myMacro',
+              () => {
+                logs.push('macroTask');
+              },
+              undefined,
+              () => {},
+            ),
+          );
         });
+        tasks.forEach((t) => t.invoke());
+        expect(logs).toEqual([
+          'microTask empty',
+          'eventTask1',
+          'microTask empty',
+          'eventTask2',
+          'microTask empty',
+          'macroTask',
+          'microTask empty',
+        ]);
+      });
+    });
 
     describe('shouldCoalesceEventChangeDetection = true, shouldCoalesceRunChangeDetection = false', () => {
       let nativeSetTimeout: any = global[Zone.__symbol__('setTimeout')];
@@ -1003,12 +1030,17 @@ function commonTests() {
         global.setImmediate = patchedImmediate;
       });
 
-      it('should run in requestAnimationFrame async', done => {
-        let task: Task|undefined = undefined;
+      it('should run in requestAnimationFrame async', (done) => {
+        let task: Task | undefined = undefined;
         coalesceZone.run(() => {
-          task = Zone.current.scheduleEventTask('myEvent', () => {
-            logs.push('myEvent');
-          }, undefined, () => {});
+          task = Zone.current.scheduleEventTask(
+            'myEvent',
+            () => {
+              logs.push('myEvent');
+            },
+            undefined,
+            () => {},
+          );
         });
         task!.invoke();
         expect(logs).toEqual(['microTask empty', 'myEvent']);
@@ -1018,100 +1050,183 @@ function commonTests() {
         });
       });
 
-      it('should only emit onMicroTaskEmpty once within the same event loop for multiple event tasks',
-         done => {
-           const tasks: Task[] = [];
-           coalesceZone.run(() => {
-             tasks.push(Zone.current.scheduleEventTask('myEvent', () => {
-               logs.push('eventTask1');
-             }, undefined, () => {}));
-             tasks.push(Zone.current.scheduleEventTask('myEvent', () => {
-               logs.push('eventTask2');
-             }, undefined, () => {}));
-           });
-           tasks.forEach(t => t.invoke());
-           expect(logs).toEqual(['microTask empty', 'eventTask1', 'eventTask2']);
-           scheduler(() => {
-             expect(logs).toEqual(
-                 ['microTask empty', 'eventTask1', 'eventTask2', 'microTask empty']);
-             done();
-           });
-         });
-
-      it('should only emit onMicroTaskEmpty once within the same event loop for ngZone.run in onMicrotaskEmpty subscription',
-         done => {
-           const tasks: Task[] = [];
-           coalesceZone.onMicrotaskEmpty.subscribe(() => {
-             coalesceZone.run(() => {});
-           });
-           coalesceZone.run(() => {
-             tasks.push(Zone.current.scheduleEventTask('myEvent', () => {
-               logs.push('eventTask1');
-             }, undefined, () => {}));
-           });
-           coalesceZone.run(() => {
-             tasks.push(Zone.current.scheduleEventTask('myEvent', () => {
-               logs.push('eventTask2');
-             }, undefined, () => {}));
-           });
-           tasks.forEach(t => t.invoke());
-           expect(logs).toEqual(['microTask empty', 'microTask empty', 'eventTask1', 'eventTask2']);
-           nativeSetTimeout(() => {
-             expect(logs).toEqual([
-               'microTask empty', 'microTask empty', 'eventTask1', 'eventTask2', 'microTask empty'
-             ]);
-             done();
-           }, 100);
-         });
-
-      it('should emit onMicroTaskEmpty once within the same event loop for not only event tasks, but event tasks are before other tasks',
-         done => {
-           const tasks: Task[] = [];
-           coalesceZone.run(() => {
-             tasks.push(Zone.current.scheduleEventTask('myEvent', () => {
-               logs.push('eventTask1');
-             }, undefined, () => {}));
-             tasks.push(Zone.current.scheduleEventTask('myEvent', () => {
-               logs.push('eventTask2');
-             }, undefined, () => {}));
-             tasks.push(Zone.current.scheduleMacroTask('myMacro', () => {
-               logs.push('macroTask');
-             }, undefined, () => {}));
-           });
-           tasks.forEach(t => t.invoke());
-           expect(logs).toEqual(['microTask empty', 'eventTask1', 'eventTask2', 'macroTask']);
-           scheduler(() => {
-             expect(logs).toEqual(
-                 ['microTask empty', 'eventTask1', 'eventTask2', 'macroTask', 'microTask empty']);
-             done();
-           });
-         });
-
-      it('should emit multiple onMicroTaskEmpty within the same event loop for not only event tasks, but event tasks are after other tasks',
-         done => {
-           const tasks: Task[] = [];
-           coalesceZone.run(() => {
-             tasks.push(Zone.current.scheduleMacroTask('myMacro', () => {
-               logs.push('macroTask');
-             }, undefined, () => {}));
-             tasks.push(Zone.current.scheduleEventTask('myEvent', () => {
-               logs.push('eventTask1');
-             }, undefined, () => {}));
-             tasks.push(Zone.current.scheduleEventTask('myEvent', () => {
-               logs.push('eventTask2');
-             }, undefined, () => {}));
-           });
-           tasks.forEach(t => t.invoke());
-           expect(logs).toEqual(
-               ['microTask empty', 'macroTask', 'microTask empty', 'eventTask1', 'eventTask2']);
-           scheduler(() => {
-             expect(logs).toEqual([
-               'microTask empty', 'macroTask', 'microTask empty', 'eventTask1', 'eventTask2',
-               'microTask empty'
-             ]);
-             done();
-           });
-         });
+      it('should only emit onMicroTaskEmpty once within the same event loop for multiple event tasks', (done) => {
+        const tasks: Task[] = [];
+        coalesceZone.run(() => {
+          tasks.push(
+            Zone.current.scheduleEventTask(
+              'myEvent',
+              () => {
+                logs.push('eventTask1');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+          tasks.push(
+            Zone.current.scheduleEventTask(
+              'myEvent',
+              () => {
+                logs.push('eventTask2');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+        });
+        tasks.forEach((t) => t.invoke());
+        expect(logs).toEqual(['microTask empty', 'eventTask1', 'eventTask2']);
+        scheduler(() => {
+          expect(logs).toEqual(['microTask empty', 'eventTask1', 'eventTask2', 'microTask empty']);
+          done();
+        });
+      });
+
+      it('should only emit onMicroTaskEmpty once within the same event loop for ngZone.run in onMicrotaskEmpty subscription', (done) => {
+        const tasks: Task[] = [];
+        coalesceZone.onMicrotaskEmpty.subscribe(() => {
+          coalesceZone.run(() => {});
+        });
+        coalesceZone.run(() => {
+          tasks.push(
+            Zone.current.scheduleEventTask(
+              'myEvent',
+              () => {
+                logs.push('eventTask1');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+        });
+        coalesceZone.run(() => {
+          tasks.push(
+            Zone.current.scheduleEventTask(
+              'myEvent',
+              () => {
+                logs.push('eventTask2');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+        });
+        tasks.forEach((t) => t.invoke());
+        expect(logs).toEqual(['microTask empty', 'microTask empty', 'eventTask1', 'eventTask2']);
+        nativeSetTimeout(() => {
+          expect(logs).toEqual([
+            'microTask empty',
+            'microTask empty',
+            'eventTask1',
+            'eventTask2',
+            'microTask empty',
+          ]);
+          done();
+        }, 100);
+      });
+
+      it('should emit onMicroTaskEmpty once within the same event loop for not only event tasks, but event tasks are before other tasks', (done) => {
+        const tasks: Task[] = [];
+        coalesceZone.run(() => {
+          tasks.push(
+            Zone.current.scheduleEventTask(
+              'myEvent',
+              () => {
+                logs.push('eventTask1');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+          tasks.push(
+            Zone.current.scheduleEventTask(
+              'myEvent',
+              () => {
+                logs.push('eventTask2');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+          tasks.push(
+            Zone.current.scheduleMacroTask(
+              'myMacro',
+              () => {
+                logs.push('macroTask');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+        });
+        tasks.forEach((t) => t.invoke());
+        expect(logs).toEqual(['microTask empty', 'eventTask1', 'eventTask2', 'macroTask']);
+        scheduler(() => {
+          expect(logs).toEqual([
+            'microTask empty',
+            'eventTask1',
+            'eventTask2',
+            'macroTask',
+            'microTask empty',
+          ]);
+          done();
+        });
+      });
+
+      it('should emit multiple onMicroTaskEmpty within the same event loop for not only event tasks, but event tasks are after other tasks', (done) => {
+        const tasks: Task[] = [];
+        coalesceZone.run(() => {
+          tasks.push(
+            Zone.current.scheduleMacroTask(
+              'myMacro',
+              () => {
+                logs.push('macroTask');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+          tasks.push(
+            Zone.current.scheduleEventTask(
+              'myEvent',
+              () => {
+                logs.push('eventTask1');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+          tasks.push(
+            Zone.current.scheduleEventTask(
+              'myEvent',
+              () => {
+                logs.push('eventTask2');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+        });
+        tasks.forEach((t) => t.invoke());
+        expect(logs).toEqual([
+          'microTask empty',
+          'macroTask',
+          'microTask empty',
+          'eventTask1',
+          'eventTask2',
+        ]);
+        scheduler(() => {
+          expect(logs).toEqual([
+            'microTask empty',
+            'macroTask',
+            'microTask empty',
+            'eventTask1',
+            'eventTask2',
+            'microTask empty',
+          ]);
+          done();
+        });
+      });
     });
 
     describe('shouldCoalesceRunChangeDetection = true', () => {
@@ -1134,7 +1249,7 @@ function commonTests() {
         global.setImmediate = patchedImmediate;
       });
 
-      it('should run in requestAnimationFrame async', done => {
+      it('should run in requestAnimationFrame async', (done) => {
         coalesceZone.run(() => {});
         expect(logs).toEqual([]);
         scheduler(() => {
@@ -1143,60 +1258,90 @@ function commonTests() {
         });
       });
 
-      it('should only emit onMicroTaskEmpty once within the same event loop for multiple ngZone.run',
-         done => {
-           coalesceZone.run(() => {});
-           coalesceZone.run(() => {});
-           expect(logs).toEqual([]);
-           scheduler(() => {
-             expect(logs).toEqual(['microTask empty']);
-             done();
-           });
-         });
-
-      it('should only emit onMicroTaskEmpty once within the same event loop for ngZone.run in onMicrotaskEmpty subscription',
-         done => {
-           coalesceZone.onMicrotaskEmpty.subscribe(() => {
-             coalesceZone.run(() => {});
-           });
-           coalesceZone.run(() => {});
-           coalesceZone.run(() => {});
-           expect(logs).toEqual([]);
-           nativeSetTimeout(() => {
-             expect(logs).toEqual(['microTask empty']);
-             done();
-           }, 100);
-         });
-
-      it('should only emit onMicroTaskEmpty once within the same event loop for multiple tasks',
-         done => {
-           const tasks: Task[] = [];
-           coalesceZone.run(() => {
-             tasks.push(Zone.current.scheduleMacroTask('myMacro', () => {
-               logs.push('macroTask');
-             }, undefined, () => {}));
-             tasks.push(Zone.current.scheduleEventTask('myEvent', () => {
-               logs.push('eventTask1');
-             }, undefined, () => {}));
-             tasks.push(Zone.current.scheduleEventTask('myEvent', () => {
-               logs.push('eventTask2');
-             }, undefined, () => {}));
-             tasks.push(Zone.current.scheduleMacroTask('myMacro', () => {
-               logs.push('macroTask');
-             }, undefined, () => {}));
-           });
-           tasks.forEach(t => t.invoke());
-           expect(logs).toEqual(['macroTask', 'eventTask1', 'eventTask2', 'macroTask']);
-           scheduler(() => {
-             expect(logs).toEqual(
-                 ['macroTask', 'eventTask1', 'eventTask2', 'macroTask', 'microTask empty']);
-             done();
-           });
-         });
+      it('should only emit onMicroTaskEmpty once within the same event loop for multiple ngZone.run', (done) => {
+        coalesceZone.run(() => {});
+        coalesceZone.run(() => {});
+        expect(logs).toEqual([]);
+        scheduler(() => {
+          expect(logs).toEqual(['microTask empty']);
+          done();
+        });
+      });
+
+      it('should only emit onMicroTaskEmpty once within the same event loop for ngZone.run in onMicrotaskEmpty subscription', (done) => {
+        coalesceZone.onMicrotaskEmpty.subscribe(() => {
+          coalesceZone.run(() => {});
+        });
+        coalesceZone.run(() => {});
+        coalesceZone.run(() => {});
+        expect(logs).toEqual([]);
+        nativeSetTimeout(() => {
+          expect(logs).toEqual(['microTask empty']);
+          done();
+        }, 100);
+      });
+
+      it('should only emit onMicroTaskEmpty once within the same event loop for multiple tasks', (done) => {
+        const tasks: Task[] = [];
+        coalesceZone.run(() => {
+          tasks.push(
+            Zone.current.scheduleMacroTask(
+              'myMacro',
+              () => {
+                logs.push('macroTask');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+          tasks.push(
+            Zone.current.scheduleEventTask(
+              'myEvent',
+              () => {
+                logs.push('eventTask1');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+          tasks.push(
+            Zone.current.scheduleEventTask(
+              'myEvent',
+              () => {
+                logs.push('eventTask2');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+          tasks.push(
+            Zone.current.scheduleMacroTask(
+              'myMacro',
+              () => {
+                logs.push('macroTask');
+              },
+              undefined,
+              () => {},
+            ),
+          );
+        });
+        tasks.forEach((t) => t.invoke());
+        expect(logs).toEqual(['macroTask', 'eventTask1', 'eventTask2', 'macroTask']);
+        scheduler(() => {
+          expect(logs).toEqual([
+            'macroTask',
+            'eventTask1',
+            'eventTask2',
+            'macroTask',
+            'microTask empty',
+          ]);
+          done();
+        });
+      });
 
       it('does not throw when apply args array has `undefined`', async () => {
         expect(() => {
-          coalesceZone.run(function(this: any, arg: any) {}, undefined, [undefined]);
+          coalesceZone.run(function (this: any, arg: any) {}, undefined, [undefined]);
         }).not.toThrow();
         // wait for the zone to stabilize after the task above. Needed to prevent this from leaking
         // into a follow-up test
diff --git a/packages/core/testing/src/async.ts b/packages/core/testing/src/async.ts
index 1b9c0dc96ec40..92be3f578894c 100644
--- a/packages/core/testing/src/async.ts
+++ b/packages/core/testing/src/async.ts
@@ -25,19 +25,21 @@
 export function waitForAsync(fn: Function): (done: any) => any {
   const _Zone: any = typeof Zone !== 'undefined' ? Zone : null;
   if (!_Zone) {
-    return function() {
+    return function () {
       return Promise.reject(
-          'Zone is needed for the waitForAsync() test helper but could not be found. ' +
-          'Please make sure that your environment includes zone.js');
+        'Zone is needed for the waitForAsync() test helper but could not be found. ' +
+          'Please make sure that your environment includes zone.js',
+      );
     };
   }
   const asyncTest = _Zone && _Zone[_Zone.__symbol__('asyncTest')];
   if (typeof asyncTest === 'function') {
     return asyncTest(fn);
   }
-  return function() {
+  return function () {
     return Promise.reject(
-        'zone-testing.js is needed for the async() test helper but could not be found. ' +
-        'Please make sure that your environment includes zone.js/testing');
+      'zone-testing.js is needed for the async() test helper but could not be found. ' +
+        'Please make sure that your environment includes zone.js/testing',
+    );
   };
 }
diff --git a/packages/core/testing/src/component_fixture.ts b/packages/core/testing/src/component_fixture.ts
index 8bb47528fd21f..df72cc6a2f797 100644
--- a/packages/core/testing/src/component_fixture.ts
+++ b/packages/core/testing/src/component_fixture.ts
@@ -6,7 +6,24 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ApplicationRef, ChangeDetectorRef, ComponentRef, DebugElement, ElementRef, getDebugNode, inject, NgZone, RendererFactory2, ViewRef, ɵDeferBlockDetails as DeferBlockDetails, ɵdetectChangesInViewIfRequired, ɵEffectScheduler as EffectScheduler, ɵgetDeferBlocks as getDeferBlocks, ɵNoopNgZone as NoopNgZone, ɵPendingTasks as PendingTasks} from '@angular/core';
+import {
+  ApplicationRef,
+  ChangeDetectorRef,
+  ComponentRef,
+  DebugElement,
+  ElementRef,
+  getDebugNode,
+  inject,
+  NgZone,
+  RendererFactory2,
+  ViewRef,
+  ɵDeferBlockDetails as DeferBlockDetails,
+  ɵdetectChangesInViewIfRequired,
+  ɵEffectScheduler as EffectScheduler,
+  ɵgetDeferBlocks as getDeferBlocks,
+  ɵNoopNgZone as NoopNgZone,
+  ɵPendingTasks as PendingTasks,
+} from '@angular/core';
 import {Subject, Subscription} from 'rxjs';
 import {first} from 'rxjs/operators';
 
@@ -44,7 +61,7 @@ export abstract class ComponentFixture<T> {
    */
   changeDetectorRef: ChangeDetectorRef;
 
-  private _renderer: RendererFactory2|null|undefined;
+  private _renderer: RendererFactory2 | null | undefined;
   private _isDestroyed: boolean = false;
   /** @internal */
   protected readonly _noZoneOptionIsSet = inject(ComponentFixtureNoNgZone, {optional: true});
@@ -114,7 +131,7 @@ export abstract class ComponentFixture<T> {
     if (this.isStable()) {
       return Promise.resolve(false);
     }
-    return this._appRef.isStable.pipe(first(stable => stable)).toPromise();
+    return this._appRef.isStable.pipe(first((stable) => stable)).toPromise();
   }
 
   /**
@@ -182,8 +199,8 @@ export class ScheduledComponentFixture<T> extends ComponentFixture<T> {
   override detectChanges(checkNoChanges: boolean = true): void {
     if (!checkNoChanges) {
       throw new Error(
-          'Cannot disable `checkNoChanges` in this configuration. ' +
-              'Use `fixture.componentRef.hostView.changeDetectorRef.detectChanges()` instead.',
+        'Cannot disable `checkNoChanges` in this configuration. ' +
+          'Use `fixture.componentRef.hostView.changeDetectorRef.detectChanges()` instead.',
       );
     }
     this._effectRunner.flush();
@@ -191,11 +208,12 @@ export class ScheduledComponentFixture<T> extends ComponentFixture<T> {
     this._effectRunner.flush();
   }
 
-  override autoDetectChanges(autoDetect?: boolean|undefined): void {
+  override autoDetectChanges(autoDetect?: boolean | undefined): void {
     if (!autoDetect) {
       throw new Error(
-          'Cannot disable autoDetect after it has been enabled when using the zoneless scheduler. ' +
-          'To disable autoDetect, add `{provide: ComponentFixtureAutoDetect, useValue: false}` to the TestBed providers.');
+        'Cannot disable autoDetect after it has been enabled when using the zoneless scheduler. ' +
+          'To disable autoDetect, add `{provide: ComponentFixtureAutoDetect, useValue: false}` to the TestBed providers.',
+      );
     } else if (!this._autoDetect) {
       this._autoDetect = autoDetect;
       this._appRef.attachView(this.componentRef.hostView);
@@ -216,8 +234,8 @@ interface TestAppRef {
 export class PseudoApplicationComponentFixture<T> extends ComponentFixture<T> {
   private _subscriptions = new Subscription();
   private _autoDetect = inject(ComponentFixtureAutoDetect, {optional: true}) ?? false;
-  private afterTickSubscription: Subscription|undefined = undefined;
-  private beforeRenderSubscription: Subscription|undefined = undefined;
+  private afterTickSubscription: Subscription | undefined = undefined;
+  private beforeRenderSubscription: Subscription | undefined = undefined;
 
   initialize(): void {
     if (this._autoDetect) {
@@ -230,11 +248,11 @@ export class PseudoApplicationComponentFixture<T> extends ComponentFixture<T> {
     // of NgZone.
     this._ngZone.runOutsideAngular(() => {
       this._subscriptions.add(
-          this._ngZone.onError.subscribe({
-            next: (error: any) => {
-              throw error;
-            },
-          }),
+        this._ngZone.onError.subscribe({
+          next: (error: any) => {
+            throw error;
+          },
+        }),
       );
     });
   }
@@ -279,10 +297,10 @@ export class PseudoApplicationComponentFixture<T> extends ComponentFixture<T> {
       this.beforeRenderSubscription = this._testAppRef.beforeRender.subscribe((isFirstPass) => {
         try {
           ɵdetectChangesInViewIfRequired(
-              (this.componentRef.hostView as any)._lView,
-              (this.componentRef.hostView as any).notifyErrorHandler,
-              isFirstPass,
-              false /** zoneless enabled */,
+            (this.componentRef.hostView as any)._lView,
+            (this.componentRef.hostView as any).notifyErrorHandler,
+            isFirstPass,
+            false /** zoneless enabled */,
           );
         } catch (e: unknown) {
           // If an error occurred during change detection, remove the test view from the application
diff --git a/packages/core/testing/src/defer.ts b/packages/core/testing/src/defer.ts
index c30efa37e1d19..5fda04433bae1 100644
--- a/packages/core/testing/src/defer.ts
+++ b/packages/core/testing/src/defer.ts
@@ -6,7 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵCONTAINER_HEADER_OFFSET as CONTAINER_HEADER_OFFSET, ɵDeferBlockDetails as DeferBlockDetails, ɵDeferBlockState as DeferBlockState, ɵgetDeferBlocks as getDeferBlocks, ɵrenderDeferBlockState as renderDeferBlockState, ɵtriggerResourceLoading as triggerResourceLoading} from '@angular/core';
+import {
+  ɵCONTAINER_HEADER_OFFSET as CONTAINER_HEADER_OFFSET,
+  ɵDeferBlockDetails as DeferBlockDetails,
+  ɵDeferBlockState as DeferBlockState,
+  ɵgetDeferBlocks as getDeferBlocks,
+  ɵrenderDeferBlockState as renderDeferBlockState,
+  ɵtriggerResourceLoading as triggerResourceLoading,
+} from '@angular/core';
 
 import type {ComponentFixture} from './component_fixture';
 
@@ -19,7 +26,9 @@ import type {ComponentFixture} from './component_fixture';
 export class DeferBlockFixture {
   /** @nodoc */
   constructor(
-      private block: DeferBlockDetails, private componentFixture: ComponentFixture<unknown>) {}
+    private block: DeferBlockDetails,
+    private componentFixture: ComponentFixture<unknown>,
+  ) {}
 
   /**
    * Renders the specified state of the defer fixture.
@@ -29,8 +38,9 @@ export class DeferBlockFixture {
     if (!hasStateTemplate(state, this.block)) {
       const stateAsString = getDeferBlockStateNameFromEnum(state);
       throw new Error(
-          `Tried to render this defer block in the \`${stateAsString}\` state, ` +
-          `but there was no @${stateAsString.toLowerCase()} block defined in a template.`);
+        `Tried to render this defer block in the \`${stateAsString}\` state, ` +
+          `but there was no @${stateAsString.toLowerCase()} block defined in a template.`,
+      );
     }
     if (state === DeferBlockState.Complete) {
       await triggerResourceLoading(this.block.tDetails, this.block.lView, this.block.tNode);
diff --git a/packages/core/testing/src/fake_async.ts b/packages/core/testing/src/fake_async.ts
index cfe82ec6012a8..32b78cf61f80d 100644
--- a/packages/core/testing/src/fake_async.ts
+++ b/packages/core/testing/src/fake_async.ts
@@ -8,8 +8,7 @@
 const _Zone: any = typeof Zone !== 'undefined' ? Zone : null;
 const fakeAsyncTestModule = _Zone && _Zone[_Zone.__symbol__('fakeAsyncTest')];
 
-const fakeAsyncTestModuleNotLoadedErrorMessage =
-    `zone-testing.js is needed for the fakeAsync() test helper but could not be found.
+const fakeAsyncTestModuleNotLoadedErrorMessage = `zone-testing.js is needed for the fakeAsync() test helper but could not be found.
         Please make sure that your environment includes zone.js/testing`;
 
 /**
@@ -126,9 +125,11 @@ export function fakeAsync(fn: Function): (...args: any[]) => any {
  * @publicApi
  */
 export function tick(
-    millis: number = 0, tickOptions: {processNewMacroTasksSynchronously: boolean} = {
-      processNewMacroTasksSynchronously: true
-    }): void {
+  millis: number = 0,
+  tickOptions: {processNewMacroTasksSynchronously: boolean} = {
+    processNewMacroTasksSynchronously: true,
+  },
+): void {
   if (fakeAsyncTestModule) {
     return fakeAsyncTestModule.tick(millis, tickOptions);
   }
diff --git a/packages/core/testing/src/metadata_override.ts b/packages/core/testing/src/metadata_override.ts
index 6e90bee62212b..ac59a643541da 100644
--- a/packages/core/testing/src/metadata_override.ts
+++ b/packages/core/testing/src/metadata_override.ts
@@ -12,7 +12,7 @@
  * @publicApi
  */
 export type MetadataOverride<T> = {
-  add?: Partial<T>,
-  remove?: Partial<T>,
-  set?: Partial<T>
+  add?: Partial<T>;
+  remove?: Partial<T>;
+  set?: Partial<T>;
 };
diff --git a/packages/core/testing/src/metadata_overrider.ts b/packages/core/testing/src/metadata_overrider.ts
index 8866ff25e5a13..e4004edabf83c 100644
--- a/packages/core/testing/src/metadata_overrider.ts
+++ b/packages/core/testing/src/metadata_overrider.ts
@@ -11,7 +11,7 @@ import {ɵstringify as stringify} from '@angular/core';
 import {MetadataOverride} from './metadata_override';
 
 type StringMap = {
-  [key: string]: any
+  [key: string]: any;
 };
 
 let _nextReferenceId = 0;
@@ -23,10 +23,13 @@ export class MetadataOverrider {
    * based on an old instance and overrides.
    */
   overrideMetadata<C extends T, T>(
-      metadataClass: {new(options: T): C;}, oldMetadata: C, override: MetadataOverride<T>): C {
+    metadataClass: {new (options: T): C},
+    oldMetadata: C,
+    override: MetadataOverride<T>,
+  ): C {
     const props: StringMap = {};
     if (oldMetadata) {
-      _valueProps(oldMetadata).forEach((prop) => props[prop] = (<any>oldMetadata)[prop]);
+      _valueProps(oldMetadata).forEach((prop) => (props[prop] = (<any>oldMetadata)[prop]));
     }
 
     if (override.set) {
@@ -62,7 +65,8 @@ function removeMetadata(metadata: StringMap, remove: any, references: Map<any, s
     const propValue = metadata[prop];
     if (Array.isArray(propValue)) {
       metadata[prop] = propValue.filter(
-          (value: any) => !removeObjects.has(_propHashKey(prop, value, references)));
+        (value: any) => !removeObjects.has(_propHashKey(prop, value, references)),
+      );
     } else {
       if (removeObjects.has(_propHashKey(prop, propValue, references))) {
         metadata[prop] = undefined;
@@ -121,7 +125,6 @@ function _serializeReference(ref: any, references: Map<any, string>): string {
   return id;
 }
 
-
 function _valueProps(obj: any): string[] {
   const props: string[] = [];
   // regular public props
@@ -133,7 +136,7 @@ function _valueProps(obj: any): string[] {
 
   // getters
   let proto = obj;
-  while (proto = Object.getPrototypeOf(proto)) {
+  while ((proto = Object.getPrototypeOf(proto))) {
     Object.keys(proto).forEach((protoProp) => {
       const desc = Object.getOwnPropertyDescriptor(proto, protoProp);
       if (!protoProp.startsWith('_') && desc && 'get' in desc) {
diff --git a/packages/core/testing/src/resolvers.ts b/packages/core/testing/src/resolvers.ts
index 2c0af4d074e1a..f4d578c28eb44 100644
--- a/packages/core/testing/src/resolvers.ts
+++ b/packages/core/testing/src/resolvers.ts
@@ -6,7 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, NgModule, Pipe, Type, ɵReflectionCapabilities as ReflectionCapabilities} from '@angular/core';
+import {
+  Component,
+  Directive,
+  NgModule,
+  Pipe,
+  Type,
+  ɵReflectionCapabilities as ReflectionCapabilities,
+} from '@angular/core';
 
 import {MetadataOverride} from './metadata_override';
 import {MetadataOverrider} from './metadata_overrider';
@@ -19,7 +26,7 @@ const reflection = new ReflectionCapabilities();
 export interface Resolver<T> {
   addOverride(type: Type<any>, override: MetadataOverride<T>): void;
   setOverrides(overrides: Array<[Type<any>, MetadataOverride<T>]>): void;
-  resolve(type: Type<any>): T|null;
+  resolve(type: Type<any>): T | null;
 }
 
 /**
@@ -27,7 +34,7 @@ export interface Resolver<T> {
  */
 abstract class OverrideResolver<T> implements Resolver<T> {
   private overrides = new Map<Type<any>, MetadataOverride<T>[]>();
-  private resolved = new Map<Type<any>, T|null>();
+  private resolved = new Map<Type<any>, T | null>();
 
   abstract get type(): any;
 
@@ -45,7 +52,7 @@ abstract class OverrideResolver<T> implements Resolver<T> {
     });
   }
 
-  getAnnotation(type: Type<any>): T|null {
+  getAnnotation(type: Type<any>): T | null {
     const annotations = reflection.annotations(type);
     // Try to find the nearest known Type annotation and make sure that this annotation is an
     // instance of the type we are looking for, so we can use it for resolution. Note: there might
@@ -54,17 +61,20 @@ abstract class OverrideResolver<T> implements Resolver<T> {
     // annotation has the right type.
     for (let i = annotations.length - 1; i >= 0; i--) {
       const annotation = annotations[i];
-      const isKnownType = annotation instanceof Directive || annotation instanceof Component ||
-          annotation instanceof Pipe || annotation instanceof NgModule;
+      const isKnownType =
+        annotation instanceof Directive ||
+        annotation instanceof Component ||
+        annotation instanceof Pipe ||
+        annotation instanceof NgModule;
       if (isKnownType) {
-        return annotation instanceof this.type ? annotation as unknown as T : null;
+        return annotation instanceof this.type ? (annotation as unknown as T) : null;
       }
     }
     return null;
   }
 
-  resolve(type: Type<any>): T|null {
-    let resolved: T|null = this.resolved.get(type) || null;
+  resolve(type: Type<any>): T | null {
+    let resolved: T | null = this.resolved.get(type) || null;
 
     if (!resolved) {
       resolved = this.getAnnotation(type);
@@ -72,7 +82,7 @@ abstract class OverrideResolver<T> implements Resolver<T> {
         const overrides = this.overrides.get(type);
         if (overrides) {
           const overrider = new MetadataOverrider();
-          overrides.forEach(override => {
+          overrides.forEach((override) => {
             resolved = overrider.overrideMetadata(this.type, resolved!, override);
           });
         }
@@ -84,7 +94,6 @@ abstract class OverrideResolver<T> implements Resolver<T> {
   }
 }
 
-
 export class DirectiveResolver extends OverrideResolver<Directive> {
   override get type() {
     return Directive;
diff --git a/packages/core/testing/src/styling.ts b/packages/core/testing/src/styling.ts
index e3ac11ebda43c..c6d1de8ba5e2d 100644
--- a/packages/core/testing/src/styling.ts
+++ b/packages/core/testing/src/styling.ts
@@ -47,7 +47,7 @@ export function getSortedStyle(element: Element): string {
   const names: string[] = Object.keys(styles);
   names.sort();
   let sorted = '';
-  names.forEach(key => {
+  names.forEach((key) => {
     const value = styles[key];
     if (value != null && value !== '') {
       if (sorted !== '') sorted += ' ';
diff --git a/packages/core/testing/src/test_bed.ts b/packages/core/testing/src/test_bed.ts
index da4461d2a2d00..e2602002c7a79 100644
--- a/packages/core/testing/src/test_bed.ts
+++ b/packages/core/testing/src/test_bed.ts
@@ -45,11 +45,23 @@ import {
 
 /* clang-format on */
 
-
-
-import {ComponentFixture, PseudoApplicationComponentFixture, ScheduledComponentFixture} from './component_fixture';
+import {
+  ComponentFixture,
+  PseudoApplicationComponentFixture,
+  ScheduledComponentFixture,
+} from './component_fixture';
 import {MetadataOverride} from './metadata_override';
-import {ComponentFixtureNoNgZone, DEFER_BLOCK_DEFAULT_BEHAVIOR, ModuleTeardownOptions, TEARDOWN_TESTING_MODULE_ON_DESTROY_DEFAULT, TestComponentRenderer, TestEnvironmentOptions, TestModuleMetadata, THROW_ON_UNKNOWN_ELEMENTS_DEFAULT, THROW_ON_UNKNOWN_PROPERTIES_DEFAULT} from './test_bed_common';
+import {
+  ComponentFixtureNoNgZone,
+  DEFER_BLOCK_DEFAULT_BEHAVIOR,
+  ModuleTeardownOptions,
+  TEARDOWN_TESTING_MODULE_ON_DESTROY_DEFAULT,
+  TestComponentRenderer,
+  TestEnvironmentOptions,
+  TestModuleMetadata,
+  THROW_ON_UNKNOWN_ELEMENTS_DEFAULT,
+  THROW_ON_UNKNOWN_PROPERTIES_DEFAULT,
+} from './test_bed_common';
 import {TestBedCompiler} from './test_bed_compiler';
 
 /**
@@ -58,7 +70,7 @@ import {TestBedCompiler} from './test_bed_compiler';
  * @publicApi
  */
 export interface TestBedStatic extends TestBed {
-  new(...args: any[]): TestBed;
+  new (...args: any[]): TestBed;
 }
 
 /**
@@ -67,7 +79,7 @@ export interface TestBedStatic extends TestBed {
 export interface TestBed {
   get platform(): PlatformRef;
 
-  get ngModule(): Type<any>|Type<any>[];
+  get ngModule(): Type<any> | Type<any>[];
 
   /**
    * Initialize the environment for testing with a compiler factory, a PlatformRef, and an
@@ -81,8 +93,10 @@ export interface TestBed {
    * '@angular/<platform_name>/testing'.
    */
   initTestEnvironment(
-      ngModule: Type<any>|Type<any>[], platform: PlatformRef,
-      options?: TestEnvironmentOptions): void;
+    ngModule: Type<any> | Type<any>[],
+    platform: PlatformRef,
+    options?: TestEnvironmentOptions,
+  ): void;
 
   /**
    * Reset the providers for the test injector.
@@ -91,21 +105,29 @@ export interface TestBed {
 
   resetTestingModule(): TestBed;
 
-  configureCompiler(config: {providers?: any[], useJit?: boolean}): void;
+  configureCompiler(config: {providers?: any[]; useJit?: boolean}): void;
 
   configureTestingModule(moduleDef: TestModuleMetadata): TestBed;
 
   compileComponents(): Promise<any>;
 
-  inject<T>(token: ProviderToken<T>, notFoundValue: undefined, options: InjectOptions&{
-    optional?: false
-  }): T;
-  inject<T>(token: ProviderToken<T>, notFoundValue: null|undefined, options: InjectOptions): T|null;
+  inject<T>(
+    token: ProviderToken<T>,
+    notFoundValue: undefined,
+    options: InjectOptions & {
+      optional?: false;
+    },
+  ): T;
+  inject<T>(
+    token: ProviderToken<T>,
+    notFoundValue: null | undefined,
+    options: InjectOptions,
+  ): T | null;
   inject<T>(token: ProviderToken<T>, notFoundValue?: T, options?: InjectOptions): T;
   /** @deprecated use object-based flags (`InjectOptions`) instead. */
   inject<T>(token: ProviderToken<T>, notFoundValue?: T, flags?: InjectFlags): T;
   /** @deprecated use object-based flags (`InjectOptions`) instead. */
-  inject<T>(token: ProviderToken<T>, notFoundValue: null, flags?: InjectFlags): T|null;
+  inject<T>(token: ProviderToken<T>, notFoundValue: null, flags?: InjectFlags): T | null;
 
   /** @deprecated from v9.0.0 use TestBed.inject */
   get<T>(token: ProviderToken<T>, notFoundValue?: T, flags?: InjectFlags): any;
@@ -134,18 +156,20 @@ export interface TestBed {
   /**
    * Overwrites all providers for the given token with the given provider definition.
    */
-  overrideProvider(token: any, provider: {useFactory: Function, deps: any[], multi?: boolean}):
-      TestBed;
-  overrideProvider(token: any, provider: {useValue: any, multi?: boolean}): TestBed;
   overrideProvider(
-      token: any,
-      provider: {useFactory?: Function, useValue?: any, deps?: any[], multi?: boolean}): TestBed;
+    token: any,
+    provider: {useFactory: Function; deps: any[]; multi?: boolean},
+  ): TestBed;
+  overrideProvider(token: any, provider: {useValue: any; multi?: boolean}): TestBed;
+  overrideProvider(
+    token: any,
+    provider: {useFactory?: Function; useValue?: any; deps?: any[]; multi?: boolean},
+  ): TestBed;
 
   overrideTemplateUsingTestingModule(component: Type<any>, template: string): TestBed;
 
   createComponent<T>(component: Type<T>): ComponentFixture<T>;
 
-
   /**
    * Execute any pending effects.
    *
@@ -173,35 +197,35 @@ export function getTestBed(): TestBed {
  * TestBed is the primary api for writing unit tests for Angular applications and libraries.
  */
 export class TestBedImpl implements TestBed {
-  private static _INSTANCE: TestBedImpl|null = null;
+  private static _INSTANCE: TestBedImpl | null = null;
 
   static get INSTANCE(): TestBedImpl {
-    return TestBedImpl._INSTANCE = TestBedImpl._INSTANCE || new TestBedImpl();
+    return (TestBedImpl._INSTANCE = TestBedImpl._INSTANCE || new TestBedImpl());
   }
 
   /**
    * Teardown options that have been configured at the environment level.
    * Used as a fallback if no instance-level options have been provided.
    */
-  private static _environmentTeardownOptions: ModuleTeardownOptions|undefined;
+  private static _environmentTeardownOptions: ModuleTeardownOptions | undefined;
 
   /**
    * "Error on unknown elements" option that has been configured at the environment level.
    * Used as a fallback if no instance-level option has been provided.
    */
-  private static _environmentErrorOnUnknownElementsOption: boolean|undefined;
+  private static _environmentErrorOnUnknownElementsOption: boolean | undefined;
 
   /**
    * "Error on unknown properties" option that has been configured at the environment level.
    * Used as a fallback if no instance-level option has been provided.
    */
-  private static _environmentErrorOnUnknownPropertiesOption: boolean|undefined;
+  private static _environmentErrorOnUnknownPropertiesOption: boolean | undefined;
 
   /**
    * Teardown options that have been configured at the `TestBed` instance level.
    * These options take precedence over the environment-level ones.
    */
-  private _instanceTeardownOptions: ModuleTeardownOptions|undefined;
+  private _instanceTeardownOptions: ModuleTeardownOptions | undefined;
 
   /**
    * Defer block behavior option that specifies whether defer blocks will be triggered manually
@@ -213,25 +237,25 @@ export class TestBedImpl implements TestBed {
    * "Error on unknown elements" option that has been configured at the `TestBed` instance level.
    * This option takes precedence over the environment-level one.
    */
-  private _instanceErrorOnUnknownElementsOption: boolean|undefined;
+  private _instanceErrorOnUnknownElementsOption: boolean | undefined;
 
   /**
    * "Error on unknown properties" option that has been configured at the `TestBed` instance level.
    * This option takes precedence over the environment-level one.
    */
-  private _instanceErrorOnUnknownPropertiesOption: boolean|undefined;
+  private _instanceErrorOnUnknownPropertiesOption: boolean | undefined;
 
   /**
    * Stores the previous "Error on unknown elements" option value,
    * allowing to restore it in the reset testing module logic.
    */
-  private _previousErrorOnUnknownElementsOption: boolean|undefined;
+  private _previousErrorOnUnknownElementsOption: boolean | undefined;
 
   /**
    * Stores the previous "Error on unknown properties" option value,
    * allowing to restore it in the reset testing module logic.
    */
-  private _previousErrorOnUnknownPropertiesOption: boolean|undefined;
+  private _previousErrorOnUnknownPropertiesOption: boolean | undefined;
 
   /**
    * Initialize the environment for testing with a compiler factory, a PlatformRef, and an
@@ -247,8 +271,10 @@ export class TestBedImpl implements TestBed {
    * @publicApi
    */
   static initTestEnvironment(
-      ngModule: Type<any>|Type<any>[], platform: PlatformRef,
-      options?: TestEnvironmentOptions): TestBed {
+    ngModule: Type<any> | Type<any>[],
+    platform: PlatformRef,
+    options?: TestEnvironmentOptions,
+  ): TestBed {
     const testBed = TestBedImpl.INSTANCE;
     testBed.initTestEnvironment(ngModule, platform, options);
     return testBed;
@@ -263,7 +289,7 @@ export class TestBedImpl implements TestBed {
     TestBedImpl.INSTANCE.resetTestEnvironment();
   }
 
-  static configureCompiler(config: {providers?: any[]; useJit?: boolean;}): TestBed {
+  static configureCompiler(config: {providers?: any[]; useJit?: boolean}): TestBed {
     return TestBedImpl.INSTANCE.configureCompiler(config);
   }
 
@@ -314,31 +340,47 @@ export class TestBedImpl implements TestBed {
     return TestBedImpl.INSTANCE.overrideTemplateUsingTestingModule(component, template);
   }
 
-  static overrideProvider(token: any, provider: {
-    useFactory: Function,
-    deps: any[],
-  }): TestBed;
-  static overrideProvider(token: any, provider: {useValue: any;}): TestBed;
-  static overrideProvider(token: any, provider: {
-    useFactory?: Function,
-    useValue?: any,
-    deps?: any[],
-  }): TestBed {
+  static overrideProvider(
+    token: any,
+    provider: {
+      useFactory: Function;
+      deps: any[];
+    },
+  ): TestBed;
+  static overrideProvider(token: any, provider: {useValue: any}): TestBed;
+  static overrideProvider(
+    token: any,
+    provider: {
+      useFactory?: Function;
+      useValue?: any;
+      deps?: any[];
+    },
+  ): TestBed {
     return TestBedImpl.INSTANCE.overrideProvider(token, provider);
   }
 
-  static inject<T>(token: ProviderToken<T>, notFoundValue: undefined, options: InjectOptions&{
-    optional?: false
-  }): T;
-  static inject<T>(token: ProviderToken<T>, notFoundValue: null|undefined, options: InjectOptions):
-      T|null;
+  static inject<T>(
+    token: ProviderToken<T>,
+    notFoundValue: undefined,
+    options: InjectOptions & {
+      optional?: false;
+    },
+  ): T;
+  static inject<T>(
+    token: ProviderToken<T>,
+    notFoundValue: null | undefined,
+    options: InjectOptions,
+  ): T | null;
   static inject<T>(token: ProviderToken<T>, notFoundValue?: T, options?: InjectOptions): T;
   /** @deprecated use object-based flags (`InjectOptions`) instead. */
   static inject<T>(token: ProviderToken<T>, notFoundValue?: T, flags?: InjectFlags): T;
   /** @deprecated use object-based flags (`InjectOptions`) instead. */
-  static inject<T>(token: ProviderToken<T>, notFoundValue: null, flags?: InjectFlags): T|null;
+  static inject<T>(token: ProviderToken<T>, notFoundValue: null, flags?: InjectFlags): T | null;
   static inject<T>(
-      token: ProviderToken<T>, notFoundValue?: T|null, flags?: InjectFlags|InjectOptions): T|null {
+    token: ProviderToken<T>,
+    notFoundValue?: T | null,
+    flags?: InjectFlags | InjectOptions,
+  ): T | null {
     return TestBedImpl.INSTANCE.inject(token, notFoundValue, convertToBitFlags(flags));
   }
 
@@ -348,8 +390,10 @@ export class TestBedImpl implements TestBed {
   static get(token: any, notFoundValue?: any): any;
   /** @deprecated from v9.0.0 use TestBed.inject */
   static get(
-      token: any, notFoundValue: any = Injector.THROW_IF_NOT_FOUND,
-      flags: InjectFlags = InjectFlags.Default): any {
+    token: any,
+    notFoundValue: any = Injector.THROW_IF_NOT_FOUND,
+    flags: InjectFlags = InjectFlags.Default,
+  ): any {
     return TestBedImpl.INSTANCE.inject(token, notFoundValue, flags);
   }
 
@@ -378,7 +422,7 @@ export class TestBedImpl implements TestBed {
     return TestBedImpl.INSTANCE.platform;
   }
 
-  static get ngModule(): Type<any>|Type<any>[] {
+  static get ngModule(): Type<any> | Type<any>[] {
     return TestBedImpl.INSTANCE.ngModule;
   }
 
@@ -389,10 +433,10 @@ export class TestBedImpl implements TestBed {
   // Properties
 
   platform: PlatformRef = null!;
-  ngModule: Type<any>|Type<any>[] = null!;
+  ngModule: Type<any> | Type<any>[] = null!;
 
-  private _compiler: TestBedCompiler|null = null;
-  private _testModuleRef: NgModuleRef<any>|null = null;
+  private _compiler: TestBedCompiler | null = null;
+  private _testModuleRef: NgModuleRef<any> | null = null;
 
   private _activeFixtures: ComponentFixture<any>[] = [];
 
@@ -417,8 +461,10 @@ export class TestBedImpl implements TestBed {
    * @publicApi
    */
   initTestEnvironment(
-      ngModule: Type<any>|Type<any>[], platform: PlatformRef,
-      options?: TestEnvironmentOptions): void {
+    ngModule: Type<any> | Type<any>[],
+    platform: PlatformRef,
+    options?: TestEnvironmentOptions,
+  ): void {
     if (this.platform || this.ngModule) {
       throw new Error('Cannot set base providers because it has already been called');
     }
@@ -463,10 +509,12 @@ export class TestBedImpl implements TestBed {
     this._compiler = new TestBedCompiler(this.platform, this.ngModule);
     // Restore the previous value of the "error on unknown elements" option
     setUnknownElementStrictMode(
-        this._previousErrorOnUnknownElementsOption ?? THROW_ON_UNKNOWN_ELEMENTS_DEFAULT);
+      this._previousErrorOnUnknownElementsOption ?? THROW_ON_UNKNOWN_ELEMENTS_DEFAULT,
+    );
     // Restore the previous value of the "error on unknown properties" option
     setUnknownPropertyStrictMode(
-        this._previousErrorOnUnknownPropertiesOption ?? THROW_ON_UNKNOWN_PROPERTIES_DEFAULT);
+      this._previousErrorOnUnknownPropertiesOption ?? THROW_ON_UNKNOWN_PROPERTIES_DEFAULT,
+    );
 
     // We have to chain a couple of try/finally blocks, because each step can
     // throw errors and we don't want it to interrupt the next step and we also
@@ -489,7 +537,7 @@ export class TestBedImpl implements TestBed {
     return this;
   }
 
-  configureCompiler(config: {providers?: any[]; useJit?: boolean;}): this {
+  configureCompiler(config: {providers?: any[]; useJit?: boolean}): this {
     if (config.useJit != null) {
       throw new Error('JIT compiler is not configurable via TestBed APIs.');
     }
@@ -529,24 +577,32 @@ export class TestBedImpl implements TestBed {
     return this.compiler.compileComponents();
   }
 
-  inject<T>(token: ProviderToken<T>, notFoundValue: undefined, options: InjectOptions&{
-    optional: true
-  }): T|null;
+  inject<T>(
+    token: ProviderToken<T>,
+    notFoundValue: undefined,
+    options: InjectOptions & {
+      optional: true;
+    },
+  ): T | null;
   inject<T>(token: ProviderToken<T>, notFoundValue?: T, options?: InjectOptions): T;
-  inject<T>(token: ProviderToken<T>, notFoundValue: null, options?: InjectOptions): T|null;
+  inject<T>(token: ProviderToken<T>, notFoundValue: null, options?: InjectOptions): T | null;
   /** @deprecated use object-based flags (`InjectOptions`) instead. */
   inject<T>(token: ProviderToken<T>, notFoundValue?: T, flags?: InjectFlags): T;
   /** @deprecated use object-based flags (`InjectOptions`) instead. */
-  inject<T>(token: ProviderToken<T>, notFoundValue: null, flags?: InjectFlags): T|null;
-  inject<T>(token: ProviderToken<T>, notFoundValue?: T|null, flags?: InjectFlags|InjectOptions): T
-      |null {
-    if (token as unknown === TestBed) {
+  inject<T>(token: ProviderToken<T>, notFoundValue: null, flags?: InjectFlags): T | null;
+  inject<T>(
+    token: ProviderToken<T>,
+    notFoundValue?: T | null,
+    flags?: InjectFlags | InjectOptions,
+  ): T | null {
+    if ((token as unknown) === TestBed) {
       return this as any;
     }
     const UNDEFINED = {} as unknown as T;
     const result = this.testModuleRef.injector.get(token, UNDEFINED, convertToBitFlags(flags));
-    return result === UNDEFINED ? this.compiler.injector.get(token, notFoundValue, flags) as any :
-                                  result;
+    return result === UNDEFINED
+      ? (this.compiler.injector.get(token, notFoundValue, flags) as any)
+      : result;
   }
 
   /** @deprecated from v9.0.0 use TestBed.inject */
@@ -554,8 +610,11 @@ export class TestBedImpl implements TestBed {
   /** @deprecated from v9.0.0 use TestBed.inject */
   get(token: any, notFoundValue?: any): any;
   /** @deprecated from v9.0.0 use TestBed.inject */
-  get(token: any, notFoundValue: any = Injector.THROW_IF_NOT_FOUND,
-      flags: InjectFlags = InjectFlags.Default): any {
+  get(
+    token: any,
+    notFoundValue: any = Injector.THROW_IF_NOT_FOUND,
+    flags: InjectFlags = InjectFlags.Default,
+  ): any {
     return this.inject(token, notFoundValue, flags);
   }
 
@@ -564,7 +623,7 @@ export class TestBedImpl implements TestBed {
   }
 
   execute(tokens: any[], fn: Function, context?: any): any {
-    const params = tokens.map(t => this.inject(t));
+    const params = tokens.map((t) => this.inject(t));
     return fn.apply(context, params);
   }
 
@@ -582,8 +641,9 @@ export class TestBedImpl implements TestBed {
 
   overrideTemplateUsingTestingModule(component: Type<any>, template: string): this {
     this.assertNotInstantiated(
-        'TestBed.overrideTemplateUsingTestingModule',
-        'Cannot override template when the test module has already been instantiated');
+      'TestBed.overrideTemplateUsingTestingModule',
+      'Cannot override template when the test module has already been instantiated',
+    );
     this.compiler.overrideTemplateUsingTestingModule(component, template);
     return this;
   }
@@ -603,8 +663,10 @@ export class TestBedImpl implements TestBed {
   /**
    * Overwrites all providers for the given token with the given provider definition.
    */
-  overrideProvider(token: any, provider: {useFactory?: Function, useValue?: any, deps?: any[]}):
-      this {
+  overrideProvider(
+    token: any,
+    provider: {useFactory?: Function; useValue?: any; deps?: any[]},
+  ): this {
     this.assertNotInstantiated('overrideProvider', 'override provider');
     this.compiler.overrideProvider(token, provider);
     return this;
@@ -621,8 +683,9 @@ export class TestBedImpl implements TestBed {
 
     if (getAsyncClassMetadataFn(type)) {
       throw new Error(
-          `Component '${type.name}' has unresolved metadata. ` +
-          `Please call \`await TestBed.compileComponents()\` before running this test.`);
+        `Component '${type.name}' has unresolved metadata. ` +
+          `Please call \`await TestBed.compileComponents()\` before running this test.`,
+      );
     }
 
     const componentDef = (type as any).ɵcmp;
@@ -633,13 +696,17 @@ export class TestBedImpl implements TestBed {
 
     const componentFactory = new ComponentFactory(componentDef);
     const initComponent = () => {
-      const componentRef =
-          componentFactory.create(Injector.NULL, [], `#${rootElId}`, this.testModuleRef) as
-          ComponentRef<T>;
+      const componentRef = componentFactory.create(
+        Injector.NULL,
+        [],
+        `#${rootElId}`,
+        this.testModuleRef,
+      ) as ComponentRef<T>;
       return this.runInInjectionContext(() => {
         const isZoneless = this.inject(ZONELESS_ENABLED);
-        const fixture = isZoneless ? new ScheduledComponentFixture(componentRef) :
-                                     new PseudoApplicationComponentFixture(componentRef);
+        const fixture = isZoneless
+          ? new ScheduledComponentFixture(componentRef)
+          : new PseudoApplicationComponentFixture(componentRef);
         fixture.initialize();
         return fixture;
       });
@@ -676,8 +743,9 @@ export class TestBedImpl implements TestBed {
   private assertNotInstantiated(methodName: string, methodDescription: string) {
     if (this._testModuleRef !== null) {
       throw new Error(
-          `Cannot ${methodDescription} when the test module has already been instantiated. ` +
-          `Make sure you are not using \`inject\` before \`${methodName}\`.`);
+        `Cannot ${methodDescription} when the test module has already been instantiated. ` +
+          `Make sure you are not using \`inject\` before \`${methodName}\`.`,
+      );
     }
   }
 
@@ -719,8 +787,9 @@ export class TestBedImpl implements TestBed {
 
     if (errorCount > 0 && this.shouldRethrowTeardownErrors()) {
       throw Error(
-          `${errorCount} ${(errorCount === 1 ? 'component' : 'components')} ` +
-          `threw errors during cleanup`);
+        `${errorCount} ${errorCount === 1 ? 'component' : 'components'} ` +
+          `threw errors during cleanup`,
+      );
     }
   }
 
@@ -734,27 +803,37 @@ export class TestBedImpl implements TestBed {
     }
 
     // Otherwise use the configured behavior or default to rethrowing.
-    return instanceOptions?.rethrowErrors ?? environmentOptions?.rethrowErrors ??
-        this.shouldTearDownTestingModule();
+    return (
+      instanceOptions?.rethrowErrors ??
+      environmentOptions?.rethrowErrors ??
+      this.shouldTearDownTestingModule()
+    );
   }
 
   shouldThrowErrorOnUnknownElements(): boolean {
     // Check if a configuration has been provided to throw when an unknown element is found
-    return this._instanceErrorOnUnknownElementsOption ??
-        TestBedImpl._environmentErrorOnUnknownElementsOption ?? THROW_ON_UNKNOWN_ELEMENTS_DEFAULT;
+    return (
+      this._instanceErrorOnUnknownElementsOption ??
+      TestBedImpl._environmentErrorOnUnknownElementsOption ??
+      THROW_ON_UNKNOWN_ELEMENTS_DEFAULT
+    );
   }
 
   shouldThrowErrorOnUnknownProperties(): boolean {
     // Check if a configuration has been provided to throw when an unknown property is found
-    return this._instanceErrorOnUnknownPropertiesOption ??
-        TestBedImpl._environmentErrorOnUnknownPropertiesOption ??
-        THROW_ON_UNKNOWN_PROPERTIES_DEFAULT;
+    return (
+      this._instanceErrorOnUnknownPropertiesOption ??
+      TestBedImpl._environmentErrorOnUnknownPropertiesOption ??
+      THROW_ON_UNKNOWN_PROPERTIES_DEFAULT
+    );
   }
 
   shouldTearDownTestingModule(): boolean {
-    return this._instanceTeardownOptions?.destroyAfterEach ??
-        TestBedImpl._environmentTeardownOptions?.destroyAfterEach ??
-        TEARDOWN_TESTING_MODULE_ON_DESTROY_DEFAULT;
+    return (
+      this._instanceTeardownOptions?.destroyAfterEach ??
+      TestBedImpl._environmentTeardownOptions?.destroyAfterEach ??
+      TEARDOWN_TESTING_MODULE_ON_DESTROY_DEFAULT
+    );
   }
 
   getDeferBlockBehavior(): DeferBlockBehavior {
@@ -831,7 +910,7 @@ export const TestBed: TestBedStatic = TestBedImpl;
 export function inject(tokens: any[], fn: Function): () => any {
   const testBed = TestBedImpl.INSTANCE;
   // Not using an arrow function to preserve context passed from call site
-  return function(this: unknown) {
+  return function (this: unknown) {
     return testBed.execute(tokens, fn, this);
   };
 }
@@ -852,7 +931,7 @@ export class InjectSetupWrapper {
   inject(tokens: any[], fn: Function): () => any {
     const self = this;
     // Not using an arrow function to preserve context passed from call site
-    return function(this: unknown) {
+    return function (this: unknown) {
       self._addModule();
       return inject(tokens, fn).call(this);
     };
@@ -864,11 +943,13 @@ export class InjectSetupWrapper {
  */
 export function withModule(moduleDef: TestModuleMetadata): InjectSetupWrapper;
 export function withModule(moduleDef: TestModuleMetadata, fn: Function): () => any;
-export function withModule(moduleDef: TestModuleMetadata, fn?: Function|null): (() => any)|
-    InjectSetupWrapper {
+export function withModule(
+  moduleDef: TestModuleMetadata,
+  fn?: Function | null,
+): (() => any) | InjectSetupWrapper {
   if (fn) {
     // Not using an arrow function to preserve context passed from call site
-    return function(this: unknown) {
+    return function (this: unknown) {
       const testBed = TestBedImpl.INSTANCE;
       if (moduleDef) {
         testBed.configureTestingModule(moduleDef);
diff --git a/packages/core/testing/src/test_bed_common.ts b/packages/core/testing/src/test_bed_common.ts
index ead472e7e56a6..3b5d2f2ea025d 100644
--- a/packages/core/testing/src/test_bed_common.ts
+++ b/packages/core/testing/src/test_bed_common.ts
@@ -6,8 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InjectionToken, SchemaMetadata, ɵDeferBlockBehavior as DeferBlockBehavior} from '@angular/core';
-
+import {
+  InjectionToken,
+  SchemaMetadata,
+  ɵDeferBlockBehavior as DeferBlockBehavior,
+} from '@angular/core';
 
 /** Whether test modules should be torn down by default. */
 export const TEARDOWN_TESTING_MODULE_ON_DESTROY_DEFAULT = true;
@@ -48,7 +51,7 @@ export interface TestModuleMetadata {
   providers?: any[];
   declarations?: any[];
   imports?: any[];
-  schemas?: Array<SchemaMetadata|any[]>;
+  schemas?: Array<SchemaMetadata | any[]>;
   teardown?: ModuleTeardownOptions;
   /**
    * Whether NG0304 runtime errors should be thrown when unknown elements are present in component's
diff --git a/packages/core/testing/src/test_bed_compiler.ts b/packages/core/testing/src/test_bed_compiler.ts
index 9df7e6a3743cf..2c4090cabbe0e 100644
--- a/packages/core/testing/src/test_bed_compiler.ts
+++ b/packages/core/testing/src/test_bed_compiler.ts
@@ -7,12 +7,72 @@
  */
 
 import {ResourceLoader} from '@angular/compiler';
-import {ApplicationInitStatus, Compiler, COMPILER_OPTIONS, Component, Directive, Injector, InjectorType, LOCALE_ID, ModuleWithComponentFactories, ModuleWithProviders, NgModule, NgModuleFactory, NgZone, Pipe, PlatformRef, Provider, provideZoneChangeDetection, resolveForwardRef, StaticProvider, Type, ɵclearResolutionOfComponentResourcesQueue, ɵcompileComponent as compileComponent, ɵcompileDirective as compileDirective, ɵcompileNgModuleDefs as compileNgModuleDefs, ɵcompilePipe as compilePipe, ɵDEFAULT_LOCALE_ID as DEFAULT_LOCALE_ID, ɵDEFER_BLOCK_CONFIG as DEFER_BLOCK_CONFIG, ɵDeferBlockBehavior as DeferBlockBehavior, ɵdepsTracker as depsTracker, ɵDirectiveDef as DirectiveDef, ɵgenerateStandaloneInDeclarationsError, ɵgetAsyncClassMetadataFn as getAsyncClassMetadataFn, ɵgetInjectableDef as getInjectableDef, ɵInternalEnvironmentProviders as InternalEnvironmentProviders, ɵisComponentDefPendingResolution, ɵisEnvironmentProviders as isEnvironmentProviders, ɵNG_COMP_DEF as NG_COMP_DEF, ɵNG_DIR_DEF as NG_DIR_DEF, ɵNG_INJ_DEF as NG_INJ_DEF, ɵNG_MOD_DEF as NG_MOD_DEF, ɵNG_PIPE_DEF as NG_PIPE_DEF, ɵNgModuleFactory as R3NgModuleFactory, ɵNgModuleTransitiveScopes as NgModuleTransitiveScopes, ɵNgModuleType as NgModuleType, ɵpatchComponentDefWithScope as patchComponentDefWithScope, ɵRender3ComponentFactory as ComponentFactory, ɵRender3NgModuleRef as NgModuleRef, ɵresolveComponentResources, ɵrestoreComponentResolutionQueue, ɵsetLocaleId as setLocaleId, ɵtransitiveScopesFor as transitiveScopesFor, ɵUSE_RUNTIME_DEPS_TRACKER_FOR_JIT as USE_RUNTIME_DEPS_TRACKER_FOR_JIT, ɵɵInjectableDeclaration as InjectableDeclaration} from '@angular/core';
+import {
+  ApplicationInitStatus,
+  Compiler,
+  COMPILER_OPTIONS,
+  Component,
+  Directive,
+  Injector,
+  InjectorType,
+  LOCALE_ID,
+  ModuleWithComponentFactories,
+  ModuleWithProviders,
+  NgModule,
+  NgModuleFactory,
+  NgZone,
+  Pipe,
+  PlatformRef,
+  Provider,
+  provideZoneChangeDetection,
+  resolveForwardRef,
+  StaticProvider,
+  Type,
+  ɵclearResolutionOfComponentResourcesQueue,
+  ɵcompileComponent as compileComponent,
+  ɵcompileDirective as compileDirective,
+  ɵcompileNgModuleDefs as compileNgModuleDefs,
+  ɵcompilePipe as compilePipe,
+  ɵDEFAULT_LOCALE_ID as DEFAULT_LOCALE_ID,
+  ɵDEFER_BLOCK_CONFIG as DEFER_BLOCK_CONFIG,
+  ɵDeferBlockBehavior as DeferBlockBehavior,
+  ɵdepsTracker as depsTracker,
+  ɵDirectiveDef as DirectiveDef,
+  ɵgenerateStandaloneInDeclarationsError,
+  ɵgetAsyncClassMetadataFn as getAsyncClassMetadataFn,
+  ɵgetInjectableDef as getInjectableDef,
+  ɵInternalEnvironmentProviders as InternalEnvironmentProviders,
+  ɵisComponentDefPendingResolution,
+  ɵisEnvironmentProviders as isEnvironmentProviders,
+  ɵNG_COMP_DEF as NG_COMP_DEF,
+  ɵNG_DIR_DEF as NG_DIR_DEF,
+  ɵNG_INJ_DEF as NG_INJ_DEF,
+  ɵNG_MOD_DEF as NG_MOD_DEF,
+  ɵNG_PIPE_DEF as NG_PIPE_DEF,
+  ɵNgModuleFactory as R3NgModuleFactory,
+  ɵNgModuleTransitiveScopes as NgModuleTransitiveScopes,
+  ɵNgModuleType as NgModuleType,
+  ɵpatchComponentDefWithScope as patchComponentDefWithScope,
+  ɵRender3ComponentFactory as ComponentFactory,
+  ɵRender3NgModuleRef as NgModuleRef,
+  ɵresolveComponentResources,
+  ɵrestoreComponentResolutionQueue,
+  ɵsetLocaleId as setLocaleId,
+  ɵtransitiveScopesFor as transitiveScopesFor,
+  ɵUSE_RUNTIME_DEPS_TRACKER_FOR_JIT as USE_RUNTIME_DEPS_TRACKER_FOR_JIT,
+  ɵɵInjectableDeclaration as InjectableDeclaration,
+} from '@angular/core';
 
 import {ComponentDef, ComponentType} from '../../src/render3';
 
 import {MetadataOverride} from './metadata_override';
-import {ComponentResolver, DirectiveResolver, NgModuleResolver, PipeResolver, Resolver} from './resolvers';
+import {
+  ComponentResolver,
+  DirectiveResolver,
+  NgModuleResolver,
+  PipeResolver,
+  Resolver,
+} from './resolvers';
 import {DEFER_BLOCK_DEFAULT_BEHAVIOR, TestModuleMetadata} from './test_bed_common';
 
 enum TestingModuleOverride {
@@ -21,13 +81,17 @@ enum TestingModuleOverride {
 }
 
 function isTestingModuleOverride(value: unknown): value is TestingModuleOverride {
-  return value === TestingModuleOverride.DECLARATION ||
-      value === TestingModuleOverride.OVERRIDE_TEMPLATE;
+  return (
+    value === TestingModuleOverride.DECLARATION || value === TestingModuleOverride.OVERRIDE_TEMPLATE
+  );
 }
 
 function assertNoStandaloneComponents(
-    types: Type<any>[], resolver: Resolver<any>, location: string) {
-  types.forEach(type => {
+  types: Type<any>[],
+  resolver: Resolver<any>,
+  location: string,
+) {
+  types.forEach((type) => {
     if (!getAsyncClassMetadataFn(type)) {
       const component = resolver.resolve(type);
       if (component && component.standalone) {
@@ -39,10 +103,10 @@ function assertNoStandaloneComponents(
 
 // Resolvers for Angular decorators
 type Resolvers = {
-  module: Resolver<NgModule>,
-  component: Resolver<Directive>,
-  directive: Resolver<Component>,
-  pipe: Resolver<Pipe>,
+  module: Resolver<NgModule>;
+  component: Resolver<Directive>;
+  directive: Resolver<Component>;
+  pipe: Resolver<Pipe>;
 };
 
 interface CleanupOperation {
@@ -52,7 +116,7 @@ interface CleanupOperation {
 }
 
 export class TestBedCompiler {
-  private originalComponentResolutionQueue: Map<Type<any>, Component>|null = null;
+  private originalComponentResolutionQueue: Map<Type<any>, Component> | null = null;
 
   // Testing module configuration
   private declarations: Type<any>[] = [];
@@ -89,21 +153,21 @@ export class TestBedCompiler {
   // - when a component is declared in `TestBed.configureTestingModule()` call or
   //   a component's template is overridden via `TestBed.overrideTemplateUsingTestingModule()`.
   //   we use a special value from the `TestingModuleOverride` enum.
-  private componentToModuleScope = new Map<Type<any>, Type<any>|TestingModuleOverride|null>();
+  private componentToModuleScope = new Map<Type<any>, Type<any> | TestingModuleOverride | null>();
 
   // Map that keeps initial version of component/directive/pipe defs in case
   // we compile a Type again, thus overriding respective static fields. This is
   // required to make sure we restore defs to their initial states between test runs.
   // Note: one class may have multiple defs (for example: ɵmod and ɵinj in case of an
   // NgModule), store all of them in a map.
-  private initialNgDefs = new Map<Type<any>, Map<string, PropertyDescriptor|undefined>>();
+  private initialNgDefs = new Map<Type<any>, Map<string, PropertyDescriptor | undefined>>();
 
   // Array that keeps cleanup operations for initial versions of component/directive/pipe/module
   // defs in case TestBed makes changes to the originals.
   private defCleanupOps: CleanupOperation[] = [];
 
-  private _injector: Injector|null = null;
-  private compilerProviders: Provider[]|null = null;
+  private _injector: Injector | null = null;
+  private compilerProviders: Provider[] | null = null;
 
   private providerOverrides: Provider[] = [];
   private rootProviderOverrides: Provider[] = [];
@@ -114,16 +178,19 @@ export class TestBedCompiler {
   private scopesWithOverriddenProviders = new Set<Type<any>>();
 
   private testModuleType: NgModuleType<any>;
-  private testModuleRef: NgModuleRef<any>|null = null;
+  private testModuleRef: NgModuleRef<any> | null = null;
 
   private deferBlockBehavior = DEFER_BLOCK_DEFAULT_BEHAVIOR;
 
-  constructor(private platform: PlatformRef, private additionalModuleTypes: Type<any>|Type<any>[]) {
+  constructor(
+    private platform: PlatformRef,
+    private additionalModuleTypes: Type<any> | Type<any>[],
+  ) {
     class DynamicTestModule {}
     this.testModuleType = DynamicTestModule as any;
   }
 
-  setCompilerProviders(providers: Provider[]|null): void {
+  setCompilerProviders(providers: Provider[] | null): void {
     this.compilerProviders = providers;
     this._injector = null;
   }
@@ -133,8 +200,10 @@ export class TestBedCompiler {
     if (moduleDef.declarations !== undefined) {
       // Verify that there are no standalone components
       assertNoStandaloneComponents(
-          moduleDef.declarations, this.resolvers.component,
-          '"TestBed.configureTestingModule" call');
+        moduleDef.declarations,
+        this.resolvers.component,
+        '"TestBed.configureTestingModule" call',
+      );
       this.queueTypeArray(moduleDef.declarations, TestingModuleOverride.DECLARATION);
       this.declarations.push(...moduleDef.declarations);
     }
@@ -200,25 +269,32 @@ export class TestBedCompiler {
   }
 
   private verifyNoStandaloneFlagOverrides(
-      type: Type<any>, override: MetadataOverride<Component|Directive|Pipe>) {
-    if (override.add?.hasOwnProperty('standalone') || override.set?.hasOwnProperty('standalone') ||
-        override.remove?.hasOwnProperty('standalone')) {
+    type: Type<any>,
+    override: MetadataOverride<Component | Directive | Pipe>,
+  ) {
+    if (
+      override.add?.hasOwnProperty('standalone') ||
+      override.set?.hasOwnProperty('standalone') ||
+      override.remove?.hasOwnProperty('standalone')
+    ) {
       throw new Error(
-          `An override for the ${type.name} class has the \`standalone\` flag. ` +
-          `Changing the \`standalone\` flag via TestBed overrides is not supported.`);
+        `An override for the ${type.name} class has the \`standalone\` flag. ` +
+          `Changing the \`standalone\` flag via TestBed overrides is not supported.`,
+      );
     }
   }
 
   overrideProvider(
-      token: any,
-      provider: {useFactory?: Function, useValue?: any, deps?: any[], multi?: boolean}): void {
+    token: any,
+    provider: {useFactory?: Function; useValue?: any; deps?: any[]; multi?: boolean},
+  ): void {
     let providerDef: Provider;
     if (provider.useFactory !== undefined) {
       providerDef = {
         provide: token,
         useFactory: provider.useFactory,
         deps: provider.deps || [],
-        multi: provider.multi
+        multi: provider.multi,
       };
     } else if (provider.useValue !== undefined) {
       providerDef = {provide: token, useValue: provider.useValue, multi: provider.multi};
@@ -226,11 +302,11 @@ export class TestBedCompiler {
       providerDef = {provide: token};
     }
 
-    const injectableDef: InjectableDeclaration<any>|null =
-        typeof token !== 'string' ? getInjectableDef(token) : null;
+    const injectableDef: InjectableDeclaration<any> | null =
+      typeof token !== 'string' ? getInjectableDef(token) : null;
     const providedIn = injectableDef === null ? null : resolveForwardRef(injectableDef.providedIn);
     const overridesBucket =
-        providedIn === 'root' ? this.rootProviderOverrides : this.providerOverrides;
+      providedIn === 'root' ? this.rootProviderOverrides : this.providerOverrides;
     overridesBucket.push(providerDef);
 
     // Keep overrides grouped by token as well for fast lookups using token
@@ -260,8 +336,9 @@ export class TestBedCompiler {
     // resolution). In order to avoid this, we preemptively set styleUrls to an empty array,
     // preserve current styles available on Component def and restore styles back once compilation
     // is complete.
-    const override =
-        overrideStyleUrls ? {template, styles: [], styleUrls: [], styleUrl: undefined} : {template};
+    const override = overrideStyleUrls
+      ? {template, styles: [], styleUrls: [], styleUrl: undefined}
+      : {template};
     this.overrideComponent(type, {set: override});
 
     if (overrideStyleUrls && def.styles && def.styles.length > 0) {
@@ -308,7 +385,10 @@ export class TestBedCompiler {
     // to the logic in the `configureTestingModule` function, since at this point we have
     // all async metadata resolved.
     assertNoStandaloneComponents(
-        this.declarations, this.resolvers.component, '"TestBed.configureTestingModule" call');
+      this.declarations,
+      this.resolvers.component,
+      '"TestBed.configureTestingModule" call',
+    );
 
     // Run compilers for all queued types.
     let needsAsyncResources = this.compileTypesSync();
@@ -404,11 +484,12 @@ export class TestBedCompiler {
   private compileTypesSync(): boolean {
     // Compile all queued components, directives, pipes.
     let needsAsyncResources = false;
-    this.pendingComponents.forEach(declaration => {
+    this.pendingComponents.forEach((declaration) => {
       if (getAsyncClassMetadataFn(declaration)) {
         throw new Error(
-            `Component '${declaration.name}' has unresolved metadata. ` +
-            `Please call \`await TestBed.compileComponents()\` before running this test.`);
+          `Component '${declaration.name}' has unresolved metadata. ` +
+            `Please call \`await TestBed.compileComponents()\` before running this test.`,
+        );
       }
 
       needsAsyncResources = needsAsyncResources || ɵisComponentDefPendingResolution(declaration);
@@ -426,7 +507,7 @@ export class TestBedCompiler {
     });
     this.pendingComponents.clear();
 
-    this.pendingDirectives.forEach(declaration => {
+    this.pendingDirectives.forEach((declaration) => {
       const metadata = this.resolvers.directive.resolve(declaration);
       if (metadata === null) {
         throw invalidTypeError(declaration.name, 'Directive');
@@ -436,7 +517,7 @@ export class TestBedCompiler {
     });
     this.pendingDirectives.clear();
 
-    this.pendingPipes.forEach(declaration => {
+    this.pendingPipes.forEach((declaration) => {
       const metadata = this.resolvers.pipe.resolve(declaration);
       if (metadata === null) {
         throw invalidTypeError(declaration.name, 'Pipe');
@@ -457,7 +538,7 @@ export class TestBedCompiler {
       const testingModuleDef = (this.testModuleType as any)[NG_MOD_DEF];
       const affectedModules = this.collectModulesAffectedByOverrides(testingModuleDef.imports);
       if (affectedModules.size > 0) {
-        affectedModules.forEach(moduleType => {
+        affectedModules.forEach((moduleType) => {
           if (!USE_RUNTIME_DEPS_TRACKER_FOR_JIT) {
             this.storeFieldOfDefOnType(moduleType as any, NG_MOD_DEF, 'transitiveCompileScopes');
             (moduleType as any)[NG_MOD_DEF].transitiveCompileScopes = null;
@@ -468,16 +549,17 @@ export class TestBedCompiler {
       }
     }
 
-    const moduleToScope = new Map<Type<any>|TestingModuleOverride, NgModuleTransitiveScopes>();
-    const getScopeOfModule =
-        (moduleType: Type<any>|TestingModuleOverride): NgModuleTransitiveScopes => {
-          if (!moduleToScope.has(moduleType)) {
-            const isTestingModule = isTestingModuleOverride(moduleType);
-            const realType = isTestingModule ? this.testModuleType : moduleType as Type<any>;
-            moduleToScope.set(moduleType, transitiveScopesFor(realType));
-          }
-          return moduleToScope.get(moduleType)!;
-        };
+    const moduleToScope = new Map<Type<any> | TestingModuleOverride, NgModuleTransitiveScopes>();
+    const getScopeOfModule = (
+      moduleType: Type<any> | TestingModuleOverride,
+    ): NgModuleTransitiveScopes => {
+      if (!moduleToScope.has(moduleType)) {
+        const isTestingModule = isTestingModuleOverride(moduleType);
+        const realType = isTestingModule ? this.testModuleType : (moduleType as Type<any>);
+        moduleToScope.set(moduleType, transitiveScopesFor(realType));
+      }
+      return moduleToScope.get(moduleType)!;
+    };
 
     this.componentToModuleScope.forEach((moduleType, componentType) => {
       if (moduleType !== null) {
@@ -514,7 +596,6 @@ export class TestBedCompiler {
     this.seenDirectives.clear();
   }
 
-
   /**
    * Applies provider overrides to a given type (either an NgModule or a standalone component)
    * and all imported NgModules and standalone components recursively.
@@ -549,9 +630,9 @@ export class TestBedCompiler {
         this.applyProviderOverridesInScope(dependency);
       }
     } else {
-      const providers: Array<Provider|InternalEnvironmentProviders> = [
+      const providers: Array<Provider | InternalEnvironmentProviders> = [
         ...injectorDef.providers,
-        ...(this.providerOverridesByModule.get(type as InjectorType<any>) || [])
+        ...(this.providerOverridesByModule.get(type as InjectorType<any>) || []),
       ];
       if (this.hasProviderOverrides(providers)) {
         this.maybeStoreNgDef(NG_INJ_DEF, type);
@@ -573,10 +654,11 @@ export class TestBedCompiler {
           this.defCleanupOps.push({
             object: importedModule,
             fieldName: 'providers',
-            originalValue: importedModule.providers
+            originalValue: importedModule.providers,
           });
           importedModule.providers = this.getOverriddenProviders(
-              importedModule.providers as Array<Provider|InternalEnvironmentProviders>);
+            importedModule.providers as Array<Provider | InternalEnvironmentProviders>,
+          );
         }
       }
     }
@@ -584,11 +666,12 @@ export class TestBedCompiler {
 
   private patchComponentsWithExistingStyles(): void {
     this.existingComponentStyles.forEach(
-        (styles, type) => (type as any)[NG_COMP_DEF].styles = styles);
+      (styles, type) => ((type as any)[NG_COMP_DEF].styles = styles),
+    );
     this.existingComponentStyles.clear();
   }
 
-  private queueTypeArray(arr: any[], moduleType: Type<any>|TestingModuleOverride): void {
+  private queueTypeArray(arr: any[], moduleType: Type<any> | TestingModuleOverride): void {
     for (const value of arr) {
       if (Array.isArray(value)) {
         this.queueTypeArray(value, moduleType);
@@ -613,7 +696,7 @@ export class TestBedCompiler {
     }
   }
 
-  private queueType(type: Type<any>, moduleType: Type<any>|TestingModuleOverride|null): void {
+  private queueType(type: Type<any>, moduleType: Type<any> | TestingModuleOverride | null): void {
     // If this is a component with async metadata (i.e. a component with a `@defer` block
     // in a template) - store it for future processing.
     this.maybeRegisterComponentWithAsyncMetadata(type);
@@ -643,8 +726,10 @@ export class TestBedCompiler {
       // real module, which was imported. This pattern is understood to mean that the component
       // should use its original scope, but that the testing module should also contain the
       // component in its scope.
-      if ((!this.componentToModuleScope.has(type) ||
-           this.componentToModuleScope.get(type) === TestingModuleOverride.DECLARATION)) {
+      if (
+        !this.componentToModuleScope.has(type) ||
+        this.componentToModuleScope.get(type) === TestingModuleOverride.DECLARATION
+      ) {
         this.componentToModuleScope.set(type, moduleType);
       }
       return;
@@ -738,13 +823,13 @@ export class TestBedCompiler {
             // the whole path that leads to that module as affected, but do not descend into its
             // imports, since we already examined them before.
             if (affectedModules.has(value)) {
-              path.forEach(item => affectedModules.add(item));
+              path.forEach((item) => affectedModules.add(item));
             }
             continue;
           }
           seenModules.add(value);
           if (this.overriddenModules.has(value)) {
-            path.forEach(item => affectedModules.add(item));
+            path.forEach((item) => affectedModules.add(item));
           }
           // Examine module imports recursively to look for overridden modules.
           const moduleDef = (value as any)[NG_MOD_DEF];
@@ -788,8 +873,9 @@ export class TestBedCompiler {
     if (this.originalComponentResolutionQueue === null) {
       this.originalComponentResolutionQueue = new Map();
     }
-    ɵclearResolutionOfComponentResourcesQueue().forEach(
-        (value, key) => this.originalComponentResolutionQueue!.set(key, value));
+    ɵclearResolutionOfComponentResourcesQueue().forEach((value, key) =>
+      this.originalComponentResolutionQueue!.set(key, value),
+    );
   }
 
   /*
@@ -812,24 +898,25 @@ export class TestBedCompiler {
     });
     // Restore initial component/directive/pipe defs
     this.initialNgDefs.forEach(
-        (defs: Map<string, PropertyDescriptor|undefined>, type: Type<any>) => {
-          if (USE_RUNTIME_DEPS_TRACKER_FOR_JIT) {
-            depsTracker.clearScopeCacheFor(type);
+      (defs: Map<string, PropertyDescriptor | undefined>, type: Type<any>) => {
+        if (USE_RUNTIME_DEPS_TRACKER_FOR_JIT) {
+          depsTracker.clearScopeCacheFor(type);
+        }
+        defs.forEach((descriptor, prop) => {
+          if (!descriptor) {
+            // Delete operations are generally undesirable since they have performance
+            // implications on objects they were applied to. In this particular case, situations
+            // where this code is invoked should be quite rare to cause any noticeable impact,
+            // since it's applied only to some test cases (for example when class with no
+            // annotations extends some @Component) when we need to clear 'ɵcmp' field on a given
+            // class to restore its original state (before applying overrides and running tests).
+            delete (type as any)[prop];
+          } else {
+            Object.defineProperty(type, prop, descriptor);
           }
-          defs.forEach((descriptor, prop) => {
-            if (!descriptor) {
-              // Delete operations are generally undesirable since they have performance
-              // implications on objects they were applied to. In this particular case, situations
-              // where this code is invoked should be quite rare to cause any noticeable impact,
-              // since it's applied only to some test cases (for example when class with no
-              // annotations extends some @Component) when we need to clear 'ɵcmp' field on a given
-              // class to restore its original state (before applying overrides and running tests).
-              delete (type as any)[prop];
-            } else {
-              Object.defineProperty(type, prop, descriptor);
-            }
-          });
         });
+      },
+    );
     this.initialNgDefs.clear();
     this.scopesWithOverriddenProviders.clear();
     this.restoreComponentResolutionQueue();
@@ -853,12 +940,16 @@ export class TestBedCompiler {
     const imports = [RootScopeModule, this.additionalModuleTypes, this.imports || []];
 
     // clang-format off
-    compileNgModuleDefs(this.testModuleType, {
-      declarations: this.declarations,
-      imports,
-      schemas: this.schemas,
-      providers,
-    }, /* allowDuplicateDeclarationsInRoot */ true);
+    compileNgModuleDefs(
+      this.testModuleType,
+      {
+        declarations: this.declarations,
+        imports,
+        schemas: this.schemas,
+        providers,
+      },
+      /* allowDuplicateDeclarationsInRoot */ true,
+    );
     // clang-format on
 
     this.applyProviderOverridesInScope(this.testModuleType);
@@ -871,13 +962,13 @@ export class TestBedCompiler {
 
     const providers: StaticProvider[] = [];
     const compilerOptions = this.platform.injector.get(COMPILER_OPTIONS);
-    compilerOptions.forEach(opts => {
+    compilerOptions.forEach((opts) => {
       if (opts.providers) {
         providers.push(opts.providers);
       }
     });
     if (this.compilerProviders !== null) {
-      providers.push(...this.compilerProviders as StaticProvider[]);
+      providers.push(...(this.compilerProviders as StaticProvider[]));
     }
 
     this._injector = Injector.create({providers, parent: this.platform.injector});
@@ -885,25 +976,31 @@ export class TestBedCompiler {
   }
 
   // get overrides for a specific provider (if any)
-  private getSingleProviderOverrides(provider: Provider): Provider|null {
+  private getSingleProviderOverrides(provider: Provider): Provider | null {
     const token = getProviderToken(provider);
     return this.providerOverridesByToken.get(token) || null;
   }
 
-  private getProviderOverrides(providers?: Array<Provider|InternalEnvironmentProviders>):
-      Provider[] {
+  private getProviderOverrides(
+    providers?: Array<Provider | InternalEnvironmentProviders>,
+  ): Provider[] {
     if (!providers || !providers.length || this.providerOverridesByToken.size === 0) return [];
     // There are two flattening operations here. The inner flattenProviders() operates on the
     // metadata's providers and applies a mapping function which retrieves overrides for each
     // incoming provider. The outer flatten() then flattens the produced overrides array. If this is
     // not done, the array can contain other empty arrays (e.g. `[[], []]`) which leak into the
     // providers array and contaminate any error messages that might be generated.
-    return flatten(flattenProviders(
-        providers, (provider: Provider) => this.getSingleProviderOverrides(provider) || []));
+    return flatten(
+      flattenProviders(
+        providers,
+        (provider: Provider) => this.getSingleProviderOverrides(provider) || [],
+      ),
+    );
   }
 
-  private getOverriddenProviders(providers?: Array<Provider|InternalEnvironmentProviders>):
-      Provider[] {
+  private getOverriddenProviders(
+    providers?: Array<Provider | InternalEnvironmentProviders>,
+  ): Provider[] {
     if (!providers || !providers.length || this.providerOverridesByToken.size === 0) return [];
 
     const flattenedProviders = flattenProviders(providers);
@@ -933,7 +1030,9 @@ export class TestBedCompiler {
     return final;
   }
 
-  private hasProviderOverrides(providers?: Array<Provider|InternalEnvironmentProviders>): boolean {
+  private hasProviderOverrides(
+    providers?: Array<Provider | InternalEnvironmentProviders>,
+  ): boolean {
     return this.getProviderOverrides(providers).length > 0;
   }
 
@@ -955,7 +1054,7 @@ function initResolvers(): Resolvers {
     module: new NgModuleResolver(),
     component: new ComponentResolver(),
     directive: new DirectiveResolver(),
-    pipe: new PipeResolver()
+    pipe: new PipeResolver(),
   };
 }
 
@@ -965,8 +1064,8 @@ function isStandaloneComponent<T>(value: Type<T>): value is ComponentType<T> {
 }
 
 function getComponentDef(value: ComponentType<unknown>): ComponentDef<unknown>;
-function getComponentDef(value: Type<unknown>): ComponentDef<unknown>|null;
-function getComponentDef(value: Type<unknown>): ComponentDef<unknown>|null {
+function getComponentDef(value: Type<unknown>): ComponentDef<unknown> | null;
+function getComponentDef(value: Type<unknown>): ComponentDef<unknown> | null {
   return (value as any).ɵcmp ?? null;
 }
 
@@ -978,13 +1077,13 @@ function isNgModule<T>(value: Type<T>): boolean {
   return hasNgModuleDef(value);
 }
 
-function maybeUnwrapFn<T>(maybeFn: (() => T)|T): T {
+function maybeUnwrapFn<T>(maybeFn: (() => T) | T): T {
   return maybeFn instanceof Function ? maybeFn() : maybeFn;
 }
 
 function flatten<T>(values: any[]): T[] {
   const out: T[] = [];
-  values.forEach(value => {
+  values.forEach((value) => {
     if (Array.isArray(value)) {
       out.push(...flatten<T>(value));
     } else {
@@ -999,11 +1098,14 @@ function identityFn<T>(value: T): T {
 }
 
 function flattenProviders<T>(
-    providers: Array<Provider|InternalEnvironmentProviders>, mapFn: (provider: Provider) => T): T[];
-function flattenProviders(providers: Array<Provider|InternalEnvironmentProviders>): Provider[];
+  providers: Array<Provider | InternalEnvironmentProviders>,
+  mapFn: (provider: Provider) => T,
+): T[];
+function flattenProviders(providers: Array<Provider | InternalEnvironmentProviders>): Provider[];
 function flattenProviders(
-    providers: Array<Provider|InternalEnvironmentProviders>,
-    mapFn: (provider: Provider) => any = identityFn): any[] {
+  providers: Array<Provider | InternalEnvironmentProviders>,
+  mapFn: (provider: Provider) => any = identityFn,
+): any[] {
   const out: any[] = [];
   for (let provider of providers) {
     if (isEnvironmentProviders(provider)) {
@@ -1059,8 +1161,9 @@ class R3TestCompiler implements Compiler {
     return new ModuleWithComponentFactories(ngModuleFactory, componentFactories);
   }
 
-  async compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>):
-      Promise<ModuleWithComponentFactories<T>> {
+  async compileModuleAndAllComponentsAsync<T>(
+    moduleType: Type<T>,
+  ): Promise<ModuleWithComponentFactories<T>> {
     const ngModuleFactory = await this.compileModuleAsync(moduleType);
     const componentFactories = this.testBed._getComponentFactories(moduleType as NgModuleType<T>);
     return new ModuleWithComponentFactories(ngModuleFactory, componentFactories);
@@ -1070,8 +1173,8 @@ class R3TestCompiler implements Compiler {
 
   clearCacheFor(type: Type<any>): void {}
 
-  getModuleId(moduleType: Type<any>): string|undefined {
+  getModuleId(moduleType: Type<any>): string | undefined {
     const meta = this.testBed._getModuleResolver().resolve(moduleType);
-    return meta && meta.id || undefined;
+    return (meta && meta.id) || undefined;
   }
 }
diff --git a/packages/core/testing/src/testing.ts b/packages/core/testing/src/testing.ts
index 3bd4cf77f8e15..1ec0b6b0c30bb 100644
--- a/packages/core/testing/src/testing.ts
+++ b/packages/core/testing/src/testing.ts
@@ -14,11 +14,35 @@
 
 export * from './async';
 export {ComponentFixture} from './component_fixture';
-export {resetFakeAsyncZone, discardPeriodicTasks, fakeAsync, flush, flushMicrotasks, tick} from './fake_async';
-export {TestBed, getTestBed, TestBedStatic, inject, InjectSetupWrapper, withModule} from './test_bed';
-export {TestComponentRenderer, ComponentFixtureAutoDetect, ComponentFixtureNoNgZone, TestModuleMetadata, TestEnvironmentOptions, ModuleTeardownOptions} from './test_bed_common';
+export {
+  resetFakeAsyncZone,
+  discardPeriodicTasks,
+  fakeAsync,
+  flush,
+  flushMicrotasks,
+  tick,
+} from './fake_async';
+export {
+  TestBed,
+  getTestBed,
+  TestBedStatic,
+  inject,
+  InjectSetupWrapper,
+  withModule,
+} from './test_bed';
+export {
+  TestComponentRenderer,
+  ComponentFixtureAutoDetect,
+  ComponentFixtureNoNgZone,
+  TestModuleMetadata,
+  TestEnvironmentOptions,
+  ModuleTeardownOptions,
+} from './test_bed_common';
 export * from './test_hooks';
 export * from './metadata_override';
 export {MetadataOverrider as ɵMetadataOverrider} from './metadata_overrider';
-export {ɵDeferBlockBehavior as DeferBlockBehavior, ɵDeferBlockState as DeferBlockState} from '@angular/core';
+export {
+  ɵDeferBlockBehavior as DeferBlockBehavior,
+  ɵDeferBlockState as DeferBlockState,
+} from '@angular/core';
 export {DeferBlockFixture} from './defer';