fix(core): run ApplicationRef.prototype.bootstrap in NgZone (#60720)

dgp1130 · atscott · commit 0ae18895605e · 2025-04-07T11:32:31.000-07:00
`bootstrapApplication` always creates the root component in the `NgZone`, however `ApplicationRef.prototype.bootstrap` historically did not, meaning that if users did not go out of their way to call `ngZone.run(() => appRef.bootstrap(SomeComp))`, components would not run change detection correctly. This commit updates `ApplicationRef.prototype.bootstrap` to _always_ run within `NgZone`, removing this hazard and ensuring components always run CD as expected. PR Close #60720
diff --git a/packages/core/src/application/application_ref.ts b/packages/core/src/application/application_ref.ts
@@ -510,59 +510,62 @@ export class ApplicationRef {
     rootSelectorOrNode?: string | any,
     injector: Injector = Injector.NULL,
   ): ComponentRef<C> {
-    profiler(ProfilerEvent.BootstrapComponentStart);
+    const ngZone = this._injector.get(NgZone);
+    return ngZone.run(() => {
+      profiler(ProfilerEvent.BootstrapComponentStart);
+
+      (typeof ngDevMode === 'undefined' || ngDevMode) && warnIfDestroyed(this._destroyed);
+      const isComponentFactory = componentOrFactory instanceof ComponentFactory;
+      const initStatus = this._injector.get(ApplicationInitStatus);
+
+      if (!initStatus.done) {
+        let errorMessage = '';
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+          const standalone = !isComponentFactory && isStandalone(componentOrFactory);
+          errorMessage =
+            '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);
+      }
 
-    (typeof ngDevMode === 'undefined' || ngDevMode) && warnIfDestroyed(this._destroyed);
-    const isComponentFactory = componentOrFactory instanceof ComponentFactory;
-    const initStatus = this._injector.get(ApplicationInitStatus);
+      let componentFactory: ComponentFactory<C>;
+      if (isComponentFactory) {
+        componentFactory = componentOrFactory;
+      } else {
+        const resolver = this._injector.get(ComponentFactoryResolver);
+        componentFactory = resolver.resolveComponentFactory(componentOrFactory)!;
+      }
+      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 selectorOrNode = rootSelectorOrNode || componentFactory.selector;
+      const compRef = componentFactory.create(injector, [], selectorOrNode, ngModule);
+      const nativeElement = compRef.location.nativeElement;
+      const testability = compRef.injector.get(TESTABILITY, null);
+      testability?.registerApplication(nativeElement);
+
+      compRef.onDestroy(() => {
+        this.detachView(compRef.hostView);
+        remove(this.components, compRef);
+        testability?.unregisterApplication(nativeElement);
+      });
 
-    if (!initStatus.done) {
-      let errorMessage = '';
+      this._loadComponent(compRef);
       if (typeof ngDevMode === 'undefined' || ngDevMode) {
-        const standalone = !isComponentFactory && isStandalone(componentOrFactory);
-        errorMessage =
-          'Cannot bootstrap as there are still asynchronous initializers running.' +
-          (standalone
-            ? ''
-            : ' Bootstrap components in the `ngDoBootstrap` method of the root module.');
+        const _console = this._injector.get(Console);
+        _console.log(`Angular is running in development mode.`);
       }
-      throw new RuntimeError(RuntimeErrorCode.ASYNC_INITIALIZERS_STILL_RUNNING, errorMessage);
-    }
 
-    let componentFactory: ComponentFactory<C>;
-    if (isComponentFactory) {
-      componentFactory = componentOrFactory;
-    } else {
-      const resolver = this._injector.get(ComponentFactoryResolver);
-      componentFactory = resolver.resolveComponentFactory(componentOrFactory)!;
-    }
-    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 selectorOrNode = rootSelectorOrNode || componentFactory.selector;
-    const compRef = componentFactory.create(injector, [], selectorOrNode, ngModule);
-    const nativeElement = compRef.location.nativeElement;
-    const testability = compRef.injector.get(TESTABILITY, null);
-    testability?.registerApplication(nativeElement);
-
-    compRef.onDestroy(() => {
-      this.detachView(compRef.hostView);
-      remove(this.components, compRef);
-      testability?.unregisterApplication(nativeElement);
-    });
-
-    this._loadComponent(compRef);
-    if (typeof ngDevMode === 'undefined' || ngDevMode) {
-      const _console = this._injector.get(Console);
-      _console.log(`Angular is running in development mode.`);
-    }
-
-    profiler(ProfilerEvent.BootstrapComponentEnd, compRef);
+      profiler(ProfilerEvent.BootstrapComponentEnd, compRef);
 
-    return compRef;
+      return compRef;
+    });
   }
 
   /**
diff --git a/packages/core/test/application_ref_spec.ts b/packages/core/test/application_ref_spec.ts
@@ -256,6 +256,22 @@ describe('bootstrap', () => {
           }),
         ),
       );
+
+      it('runs in `NgZone`', inject([ApplicationRef], async (ref: ApplicationRef) => {
+        @Component({
+          selector: 'zone-comp',
+          template: `
+            <div>{{ name }}</div>
+          `,
+        })
+        class ZoneComp {
+          readonly inNgZone = NgZone.isInAngularZone();
+        }
+
+        createRootEl('zone-comp');
+        const comp = ref.bootstrap(ZoneComp);
+        expect(comp.instance.inNgZone).toBeTrue();
+      }));
     });
 
     describe('bootstrapImpl', () => {
