feat(core): bootstrapModule can configure NgZone in providers (angular#57060)

This commit allows configuring `NgZone` through the providers for
`bootstrapModule`. Prior to this change, developers had to configure
`NgZone` in the `BootstrapOptions`.

PR Close angular#57060

Author: atscott

packages/core/src/application/application_ref.ts

@@ -101,7 +101,7 @@ export class NgProbeToken {
  */
 export interface BootstrapOptions {
   /**
-   * Optionally specify which `NgZone` should be used.
+   * Optionally specify which `NgZone` should be used when not configured in the providers.
    *
    * - Provide your own `NgZone` instance.
    * - `zone.js` - Use default `NgZone` which requires `Zone.js`.

packages/core/src/linker/ng_module_factory.ts

@@ -7,7 +7,7 @@
  */
 
 import {Injector} from '../di/injector';
-import {EnvironmentInjector} from '../di/r3_injector';
+import {EnvironmentInjector, R3Injector} from '../di/r3_injector';
 import {Type} from '../interface/type';
 
 import {ComponentFactoryResolver} from './component_factory_resolver';
@@ -56,6 +56,7 @@ export interface InternalNgModuleRef<T> extends NgModuleRef<T> {
   // Note: we are using the prefix _ as NgModuleData is an NgModuleRef and therefore directly
   // exposed to the user.
   _bootstrapComponents: Type<any>[];
+  resolveInjectorInitializers(): void;
 }
 
 /**

packages/core/src/platform/platform_ref.ts

@@ -22,7 +22,7 @@ import {
 } from '../change_detection/scheduling/ng_zone_scheduling';
 import {
   ChangeDetectionScheduler,
-  ZONELESS_ENABLED,
+  PROVIDED_ZONELESS,
 } from '../change_detection/scheduling/zoneless_scheduling';
 import {ChangeDetectionSchedulerImpl} from '../change_detection/scheduling/zoneless_scheduling_impl';
 import {Injectable, InjectionToken, Injector} from '../di';
@@ -36,7 +36,7 @@ import {InternalNgModuleRef, NgModuleFactory, NgModuleRef} from '../linker/ng_mo
 import {setLocaleId} from '../render3';
 import {createNgModuleRefWithProviders} from '../render3/ng_module_ref';
 import {stringify} from '../util/stringify';
-import {getNgZone} from '../zone/ng_zone';
+import {getNgZone, NgZone, NoopNgZone} from '../zone/ng_zone';
 
 /**
  * Internal token that allows to register extra callbacks that should be invoked during the
@@ -76,54 +76,49 @@ export class PlatformRef {
     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 ngZoneFactory = () =>
+      getNgZone(
+        options?.ngZone,
+        getNgZoneOptions({
+          eventCoalescing: options?.ngZoneEventCoalescing,
+          runCoalescing: options?.ngZoneRunCoalescing,
+        }),
+      );
+    const ignoreChangesOutsideZone = options?.ignoreChangesOutsideZone;
+    const allAppProviders = [
+      internalProvideZoneChangeDetection({
+        ngZoneFactory,
+        ignoreChangesOutsideZone,
       }),
+      {provide: ChangeDetectionScheduler, useExisting: ChangeDetectionSchedulerImpl},
+    ];
+    const moduleRef = createNgModuleRefWithProviders(
+      moduleFactory.moduleType,
+      this.injector,
+      allAppProviders,
     );
-    // Note: Create ngZoneInjector within ngZone.run so that all of the instantiated services are
-    // created within the Angular zone
-    // Do not try to replace ngZone.run with ApplicationRef#run because ApplicationRef would then be
-    // created outside of the Angular zone.
-    return ngZone.run(() => {
-      const ignoreChangesOutsideZone = options?.ignoreChangesOutsideZone;
-      const moduleRef = createNgModuleRefWithProviders(moduleFactory.moduleType, this.injector, [
-        ...internalProvideZoneChangeDetection({
-          ngZoneFactory: () => ngZone,
-          ignoreChangesOutsideZone,
-        }),
-        {provide: ChangeDetectionScheduler, useExisting: ChangeDetectionSchedulerImpl},
-      ]);
+    const envInjector = moduleRef.injector;
+    const ngZone = envInjector.get(NgZone);
 
+    return ngZone.run(() => {
+      moduleRef.resolveInjectorInitializers();
+      const exceptionHandler = envInjector.get(ErrorHandler, null);
       if (typeof ngDevMode === 'undefined' || ngDevMode) {
-        if (moduleRef.injector.get(PROVIDED_NG_ZONE)) {
+        if (exceptionHandler === null) {
           throw new RuntimeError(
-            RuntimeErrorCode.PROVIDER_IN_WRONG_CONTEXT,
-            '`bootstrapModule` does not support `provideZoneChangeDetection`. Use `BootstrapOptions` instead.',
+            RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP,
+            'No ErrorHandler. Is platform module (BrowserModule) included?',
           );
         }
-        if (moduleRef.injector.get(ZONELESS_ENABLED) && options?.ngZone !== 'noop') {
+        if (envInjector.get(PROVIDED_ZONELESS) && envInjector.get(PROVIDED_NG_ZONE)) {
           throw new RuntimeError(
             RuntimeErrorCode.PROVIDED_BOTH_ZONE_AND_ZONELESS,
             'Invalid change detection configuration: ' +
-              "`ngZone: 'noop'` must be set in `BootstrapOptions` with provideExperimentalZonelessChangeDetection.",
+              'provideZoneChangeDetection and provideExperimentalZonelessChangeDetection cannot be used together.',
           );
         }
       }
 
-      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?',
-        );
-      }
       ngZone.runOutsideAngular(() => {
         const subscription = ngZone.onError.subscribe({
           next: (error: any) => {
@@ -136,11 +131,12 @@ export class PlatformRef {
         });
       });
       return _callAndReportToErrorHandler(exceptionHandler!, ngZone, () => {
-        const initStatus: ApplicationInitStatus = moduleRef.injector.get(ApplicationInitStatus);
+        const initStatus = envInjector.get(ApplicationInitStatus);
         initStatus.runInitializers();
+
         return initStatus.donePromise.then(() => {
           // If the `LOCALE_ID` provider is defined at bootstrap then we set the value for ivy
-          const localeId = moduleRef.injector.get(LOCALE_ID, DEFAULT_LOCALE_ID);
+          const localeId = envInjector.get(LOCALE_ID, DEFAULT_LOCALE_ID);
           setLocaleId(localeId || DEFAULT_LOCALE_ID);
           this._moduleDoBootstrap(moduleRef);
           return moduleRef;

packages/core/src/render3/ng_module_ref.ts

@@ -52,8 +52,8 @@ export class NgModuleRef<T> extends viewEngine_NgModuleRef<T> implements Interna
   // tslint:disable-next-line:require-internal-with-underscore
   _bootstrapComponents: Type<any>[] = [];
   // tslint:disable-next-line:require-internal-with-underscore
-  _r3Injector: R3Injector;
-  override instance: T;
+  private readonly _r3Injector: R3Injector;
+  override instance!: T;
   destroyCbs: (() => void)[] | null = [];
 
   // When bootstrapping a module we have a dependency graph that looks like this:
@@ -66,9 +66,10 @@ export class NgModuleRef<T> extends viewEngine_NgModuleRef<T> implements Interna
     new ComponentFactoryResolver(this);
 
   constructor(
-    ngModuleType: Type<T>,
+    private readonly ngModuleType: Type<T>,
     public _parent: Injector | null,
     additionalProviders: StaticProvider[],
+    runInjectorInitializers = true,
   ) {
     super();
     const ngModuleDef = getNgModuleDef(ngModuleType);
@@ -97,8 +98,14 @@ export class NgModuleRef<T> extends viewEngine_NgModuleRef<T> implements Interna
     // We need to resolve the injector types separately from the injector creation, because
     // the module might be trying to use this ref in its constructor for DI which will cause a
     // circular error that will eventually error out, because the injector isn't created yet.
+    if (runInjectorInitializers) {
+      this.resolveInjectorInitializers();
+    }
+  }
+
+  resolveInjectorInitializers() {
     this._r3Injector.resolveInjectorInitializers();
-    this.instance = this._r3Injector.get(ngModuleType);
+    this.instance = this._r3Injector.get(this.ngModuleType);
   }
 
   override get injector(): EnvironmentInjector {
@@ -133,7 +140,7 @@ export function createNgModuleRefWithProviders<T>(
   parentInjector: Injector | null,
   additionalProviders: StaticProvider[],
 ): InternalNgModuleRef<T> {
-  return new NgModuleRef(moduleType, parentInjector, additionalProviders);
+  return new NgModuleRef(moduleType, parentInjector, additionalProviders, false);
 }
 
 export class EnvironmentNgModuleRefAdapter extends viewEngine_NgModuleRef<null> {

packages/core/test/acceptance/bootstrap_spec.ts

@@ -15,9 +15,12 @@ import {
   NgModule,
   NgZone,
   provideExperimentalZonelessChangeDetection,
+  provideZoneChangeDetection,
   TestabilityRegistry,
   ViewContainerRef,
   ViewEncapsulation,
+  ɵNoopNgZone,
+  ɵZONELESS_ENABLED,
 } from '@angular/core';
 import {bootstrapApplication, BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@@ -329,34 +332,47 @@ describe('bootstrap', () => {
       );
 
       it(
-        'should throw when using zoneless without ngZone: "noop"',
+        'can configure zone with provideZoneChangeDetection',
         withBody('<my-app></my-app>', async () => {
           @Component({
+            selector: 'my-app',
             template: '...',
           })
           class App {}
 
           @NgModule({
             declarations: [App],
-            providers: [provideExperimentalZonelessChangeDetection()],
+            providers: [provideZoneChangeDetection({eventCoalescing: true})],
             imports: [BrowserModule],
             bootstrap: [App],
           })
           class MyModule {}
 
-          try {
-            await platformBrowserDynamic().bootstrapModule(MyModule);
+          const {injector} = await platformBrowserDynamic().bootstrapModule(MyModule);
+          expect((injector.get(NgZone) as any).shouldCoalesceEventChangeDetection).toBe(true);
+        }),
+      );
 
-            // 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 =
-              "Invalid change detection configuration: `ngZone: 'noop'` must be set in `BootstrapOptions`";
-            expect(e).toBeInstanceOf(Error);
-            expect((e as Error).message).toContain(expectedErrorMessage);
-          }
+      it(
+        'can configure zoneless correctly without `ngZone: "noop"`',
+        withBody('<my-app></my-app>', async () => {
+          @Component({
+            selector: 'my-app',
+            template: '...',
+          })
+          class App {}
+
+          @NgModule({
+            declarations: [App],
+            providers: [provideExperimentalZonelessChangeDetection()],
+            imports: [BrowserModule],
+            bootstrap: [App],
+          })
+          class MyModule {}
+
+          const {injector} = await platformBrowserDynamic().bootstrapModule(MyModule);
+          expect(injector.get(NgZone)).toBeInstanceOf(ɵNoopNgZone);
+          expect(injector.get(ɵZONELESS_ENABLED)).toBeTrue();
         }),
       );
 

packages/platform-browser/test/browser/bootstrap_spec.ts

@@ -718,13 +718,13 @@ describe('bootstrap factory method', () => {
     })();
   });
 
-  it('should not allow provideZoneChangeDetection in bootstrapModule', async () => {
+  it('should allow provideZoneChangeDetection in bootstrapModule', async () => {
     @NgModule({imports: [BrowserModule], providers: [provideZoneChangeDetection()]})
-    class SomeModule {}
+    class SomeModule {
+      ngDoBootstrap(){}
+    }
 
-    await expectAsync(platformBrowserDynamic().bootstrapModule(SomeModule)).toBeRejectedWithError(
-      /provideZoneChangeDetection.*BootstrapOptions/,
-    );
+    await expectAsync(platformBrowserDynamic().bootstrapModule(SomeModule)).toBeResolved();
   });
 
   it('should register each application with the testability registry', async () => {

packages/router/test/router_preloader.spec.ts

@@ -17,9 +17,8 @@ import {
   NgModuleFactory,
   NgModuleRef,
   Type,
+  EnvironmentInjector,
 } from '@angular/core';
-import {R3Injector} from '@angular/core/src/di/r3_injector';
-import {NgModuleRef as R3NgModuleRef} from '@angular/core/src/render3';
 import {fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
 import {
   PreloadAllModules,
@@ -127,7 +126,11 @@ describe('RouterPreloader', () => {
     it('should work', fakeAsync(
       inject(
         [RouterPreloader, Router, NgModuleRef],
-        (preloader: RouterPreloader, router: Router, testModule: R3NgModuleRef<unknown>) => {
+        (
+          preloader: RouterPreloader,
+          router: Router,
+          testModule: {_r3Injector: EnvironmentInjector},
+        ) => {
           const events: Array<RouteConfigLoadStart | RouteConfigLoadEnd> = [];
           @NgModule({
             declarations: [LazyLoadedCmp],
@@ -238,7 +241,7 @@ describe('RouterPreloader', () => {
         (
           preloader: RouterPreloader,
           router: Router,
-          testModule: R3NgModuleRef<unknown>,
+          testModule: {_r3Injector: EnvironmentInjector},
           compiler: Compiler,
         ) => {
           @NgModule()
@@ -270,13 +273,15 @@ describe('RouterPreloader', () => {
 
           const c = router.config;
 
-          const injector = getLoadedInjector(c[0]) as R3Injector;
+          const injector = getLoadedInjector(c[0]) as unknown as {parent: EnvironmentInjector};
 
           const loadedRoutes = getLoadedRoutes(c[0])!;
           expect(injector.parent).toBe(testModule._r3Injector);
 
           const loadedRoutes2: Route[] = getLoadedRoutes(loadedRoutes[0])!;
-          const injector3 = getLoadedInjector(loadedRoutes2[0]) as R3Injector;
+          const injector3 = getLoadedInjector(loadedRoutes2[0]) as unknown as {
+            parent: EnvironmentInjector;
+          };
           expect(injector3.parent).toBe(module2.injector);
         },
       ),