fix(core): Ensure application remains unstable during bootstrap (#62631)

atscott · AndrewKushnir · commit 26ade4a33709 · 2025-07-15T07:52:36.000-07:00
This commit ensures the application remains unstable during the entire bootstrap process. This ensures all bootstrap listeners and app initializers observe the application as being unstable until each one has gotten a chance to execute the synchronous block (potentially adding more pending tasks). Prior to this commit, application initializers or bootstrap listeners may observe the application as being stable, even though other initializers/listeners had not yet executed. This created an ordering issue whereby the hydration bootstrap listener would observe the application as stable prior to the router performing its initial navigation. fixes #62592 PR Close #62631
diff --git a/packages/core/src/platform/bootstrap.ts b/packages/core/src/platform/bootstrap.ts
@@ -26,6 +26,7 @@ import {InjectionToken, Injector} from '../di';
 import {InternalNgModuleRef, NgModuleRef} from '../linker/ng_module_factory';
 import {stringify} from '../util/stringify';
 import {isPromise} from '../util/lang';
+import {PendingTasksInternal} from '../pending_tasks';
 
 /**
  * InjectionToken to control root component bootstrap behavior.
@@ -132,38 +133,47 @@ export function bootstrap<M>(
     }
 
     return _callAndReportToErrorHandler(exceptionHandler, ngZone, () => {
+      const pendingTasks = envInjector.get(PendingTasksInternal);
+      const taskId = pendingTasks.add();
       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 = envInjector.get(LOCALE_ID, DEFAULT_LOCALE_ID);
-        setLocaleId(localeId || DEFAULT_LOCALE_ID);
-
-        const enableRootComponentBoostrap = envInjector.get(ENABLE_ROOT_COMPONENT_BOOTSTRAP, true);
-        if (!enableRootComponentBoostrap) {
-          if (isApplicationBootstrapConfig(config)) {
-            return envInjector.get(ApplicationRef);
+        try {
+          // If the `LOCALE_ID` provider is defined at bootstrap then we set the value for ivy
+          const localeId = envInjector.get(LOCALE_ID, DEFAULT_LOCALE_ID);
+          setLocaleId(localeId || DEFAULT_LOCALE_ID);
+
+          const enableRootComponentBoostrap = envInjector.get(
+            ENABLE_ROOT_COMPONENT_BOOTSTRAP,
+            true,
+          );
+          if (!enableRootComponentBoostrap) {
+            if (isApplicationBootstrapConfig(config)) {
+              return envInjector.get(ApplicationRef);
+            }
+
+            config.allPlatformModules.push(config.moduleRef);
+            return config.moduleRef;
           }
 
-          config.allPlatformModules.push(config.moduleRef);
-          return config.moduleRef;
-        }
-
-        if (typeof ngDevMode === 'undefined' || ngDevMode) {
-          const imagePerformanceService = envInjector.get(ImagePerformanceWarning);
-          imagePerformanceService.start();
-        }
+          if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            const imagePerformanceService = envInjector.get(ImagePerformanceWarning);
+            imagePerformanceService.start();
+          }
 
-        if (isApplicationBootstrapConfig(config)) {
-          const appRef = envInjector.get(ApplicationRef);
-          if (config.rootComponent !== undefined) {
-            appRef.bootstrap(config.rootComponent);
+          if (isApplicationBootstrapConfig(config)) {
+            const appRef = envInjector.get(ApplicationRef);
+            if (config.rootComponent !== undefined) {
+              appRef.bootstrap(config.rootComponent);
+            }
+            return appRef;
+          } else {
+            moduleBootstrapImpl?.(config.moduleRef, config.allPlatformModules);
+            return config.moduleRef;
           }
-          return appRef;
-        } else {
-          moduleBootstrapImpl?.(config.moduleRef, config.allPlatformModules);
-          return config.moduleRef;
+        } finally {
+          pendingTasks.remove(taskId);
         }
       });
     });
diff --git a/packages/platform-server/test/dom_utils.ts b/packages/platform-server/test/dom_utils.ts
@@ -110,10 +110,10 @@ export function hydrate(
   global.document = doc;
 
   const providers = [
-    ...envProviders,
     {provide: PLATFORM_ID, useValue: 'browser'},
     {provide: DOCUMENT, useFactory: () => doc},
     provideClientHydration(...hydrationFeatures()),
+    ...envProviders,
   ];
 
   return bootstrapApplication(component, {providers});
