fix(core): check whether application is destroyed before printing hydration stats (#59716)

arturovt · alxhub · commit 544b9ee7ca00 · 2025-01-29T08:43:34.000-08:00
In this commit, we check whether the application is destroyed before printing hydration stats. The application may be destroyed before it becomes stable, so when the `whenStableWithTimeout` resolves, the injector might already be in a destroyed state. As a result, calling `injector.get` would throw an error indicating that the injector has already been destroyed. PR Close #59716
diff --git a/packages/core/src/hydration/api.ts b/packages/core/src/hydration/api.ts
@@ -156,12 +156,12 @@ function printHydrationStats(injector: Injector) {
 /**
  * Returns a Promise that is resolved when an application becomes stable.
  */
-function whenStableWithTimeout(appRef: ApplicationRef, injector: Injector): Promise<void> {
+function whenStableWithTimeout(appRef: ApplicationRef): Promise<void> {
   const whenStablePromise = appRef.whenStable();
   if (typeof ngDevMode !== 'undefined' && ngDevMode) {
     const timeoutTime = APPLICATION_IS_STABLE_TIMEOUT;
-    const console = injector.get(Console);
-    const ngZone = injector.get(NgZone);
+    const console = appRef.injector.get(Console);
+    const ngZone = appRef.injector.get(NgZone);
 
     // The following call should not and does not prevent the app to become stable
     // We cannot use RxJS timer here because the app would remain unstable.
@@ -274,7 +274,7 @@ export function withDomHydration(): EnvironmentProviders {
         useFactory: () => {
           if (inject(IS_HYDRATION_DOM_REUSE_ENABLED)) {
             const appRef = inject(ApplicationRef);
-            const injector = inject(Injector);
+
             return () => {
               // Wait until an app becomes stable and cleanup all views that
               // were not claimed during the application bootstrap process.
@@ -283,11 +283,21 @@ export function withDomHydration(): EnvironmentProviders {
               //
               // Note: the cleanup task *MUST* be scheduled within the Angular zone in Zone apps
               // to ensure that change detection is properly run afterward.
-              whenStableWithTimeout(appRef, injector).then(() => {
+              whenStableWithTimeout(appRef).then(() => {
+                // Note: we have to check whether the application is destroyed before
+                // performing other operations with the `injector`.
+                // The application may be destroyed **before** it becomes stable, so when
+                // the `whenStableWithTimeout` resolves, the injector might already be in
+                // a destroyed state. Thus, calling `injector.get` would throw an error
+                // indicating that the injector has already been destroyed.
+                if (appRef.destroyed) {
+                  return;
+                }
+
                 cleanupDehydratedViews(appRef);
                 if (typeof ngDevMode !== 'undefined' && ngDevMode) {
-                  countBlocksSkippedByHydration(injector);
-                  printHydrationStats(injector);
+                  countBlocksSkippedByHydration(appRef.injector);
+                  printHydrationStats(appRef.injector);
                 }
               });
             };
diff --git a/packages/platform-server/test/full_app_hydration_spec.ts b/packages/platform-server/test/full_app_hydration_spec.ts
@@ -11,6 +11,7 @@ import '@angular/localize/init';
 import {
   CommonModule,
   DOCUMENT,
+  isPlatformBrowser,
   isPlatformServer,
   NgComponentOutlet,
   NgFor,
@@ -35,6 +36,7 @@ import {
   inject,
   Input,
   NgZone,
+  PendingTasks,
   Pipe,
   PipeTransform,
   PLATFORM_ID,
@@ -7023,6 +7025,63 @@ describe('platform-server full application hydration integration', () => {
           expect(clientRootNode.textContent).toContain('Hi!');
         },
       );
+
+      it('should not throw an error when app is destroyed before becoming stable', async () => {
+        // Spy manually, because we may not be able to retrieve the `DebugConsole`
+        // after we destroy the application, but we still want to ensure that
+        // no error is thrown in the console.
+        const errorSpy = spyOn(console, 'error').and.callThrough();
+        const logs: string[] = [];
+
+        @Component({
+          standalone: true,
+          selector: 'app',
+          template: `Hi!`,
+        })
+        class SimpleComponent {
+          constructor() {
+            const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+
+            if (isBrowser) {
+              const pendingTasks = inject(PendingTasks);
+              // Given that, in a real-world scenario, some APIs add a pending
+              // task and don't remove it until the app is destroyed.
+              // This could be an HTTP request that contributes to app stability
+              // and does not respond until the app is destroyed.
+              pendingTasks.add();
+            }
+          }
+        }
+
+        const html = await ssr(SimpleComponent);
+
+        resetTViewsFor(SimpleComponent);
+
+        const appRef = await prepareEnvironmentAndHydrate(doc, html, SimpleComponent);
+
+        appRef.isStable.subscribe((isStable) => {
+          logs.push(`isStable=${isStable}`);
+        });
+
+        // Destroy the application before it becomes stable, because we added
+        // a task and didn't remove it explicitly.
+        appRef.destroy();
+
+        expect(logs).toEqual([
+          'isStable=false',
+          'isStable=true',
+          'isStable=false',
+          // In the end, the application became stable while being destroyed.
+          'isStable=true',
+        ]);
+
+        // Wait for a microtask so that `whenStableWithTimeout` resolves.
+        await Promise.resolve();
+
+        // Ensure no error has been logged in the console,
+        // such as "injector has already been destroyed."
+        expect(errorSpy).not.toHaveBeenCalled();
+      });
     });
 
     describe('@if', () => {
