fix(core): properly handle app stabilization with defer blocks

alan-agius4 · alan-agius4 · commit de649c9cfd94 · 2025-04-29T15:49:26.000Z
Previously, the app was marked as stable prematurely. For more details, see #61038 (comment) Closes: #61038
diff --git a/integration/platform-server-zoneless/e2e/src/defer-spec.ts b/integration/platform-server-zoneless/e2e/src/defer-spec.ts
@@ -1,8 +1,7 @@
 import {browser, by, element} from 'protractor';
 import {bootstrapClientApp, navigateTo, verifyNoBrowserErrors} from './util';
 
-// TODO: this does not work with zoneless
-xdescribe('Defer E2E Tests', () => {
+describe('Defer E2E Tests', () => {
   beforeEach(async () => {
     // Don't wait for Angular since it is not bootstrapped automatically.
     await browser.waitForAngularEnabled(false);
diff --git a/integration/platform-server-zoneless/e2e/src/http-transferstate-lazy-on-init-spec.ts b/integration/platform-server-zoneless/e2e/src/http-transferstate-lazy-on-init-spec.ts
@@ -10,7 +10,7 @@ import {browser, by, element} from 'protractor';
 import {bootstrapClientApp, navigateTo, verifyNoBrowserErrors} from './util';
 
 // TODO: this does not work with zoneless
-xdescribe('Http TransferState Lazy On Init', () => {
+describe('Http TransferState Lazy On Init', () => {
   beforeEach(async () => {
     // Don't wait for Angular since it is not bootstrapped automatically.
     await browser.waitForAngularEnabled(false);
diff --git a/integration/platform-server-zoneless/e2e/src/http-transferstate-lazy-spec.ts b/integration/platform-server-zoneless/e2e/src/http-transferstate-lazy-spec.ts
@@ -10,7 +10,7 @@ import {browser, by, element} from 'protractor';
 import {bootstrapClientApp, navigateTo, verifyNoBrowserErrors} from './util';
 
 // TODO: this does not work with zoneless
-xdescribe('Http TransferState Lazy', () => {
+describe('Http TransferState Lazy', () => {
   beforeEach(async () => {
     // Don't wait for Angular since it is not bootstrapped automatically.
     await browser.waitForAngularEnabled(false);
diff --git a/integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy-on-init/http-transfer-state-on-init.component.ts b/integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy-on-init/http-transfer-state-on-init.component.ts
@@ -7,23 +7,25 @@
  */
 
 import {HttpClient} from '@angular/common/http';
-import {Component, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit} from '@angular/core';
 
 @Component({
   selector: 'transfer-state-http',
   standalone: true,
   template: ` <div class="one">{{ responseOne }}</div> `,
   providers: [HttpClient],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TransferStateOnInitComponent implements OnInit {
   responseOne: string = '';
-
-  constructor(private readonly httpClient: HttpClient) {}
+  private readonly httpClient: HttpClient = inject(HttpClient);
+  private readonly cdr: ChangeDetectorRef = inject(ChangeDetectorRef);
 
   ngOnInit(): void {
     // Test that HTTP cache works when HTTP call is made in a lifecycle hook.
     this.httpClient.get<any>('http://localhost:4206/api').subscribe((response) => {
       this.responseOne = response.data;
+      this.cdr.markForCheck();
     });
   }
 }
diff --git a/integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy/http-transfer-state.component.ts b/integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy/http-transfer-state.component.ts
@@ -7,7 +7,7 @@
  */
 
 import {HttpClient} from '@angular/common/http';
-import {Component, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit} from '@angular/core';
 
 @Component({
   selector: 'transfer-state-http',
@@ -17,22 +17,27 @@ import {Component, OnInit} from '@angular/core';
     <div class="two">{{ responseTwo }}</div>
   `,
   providers: [HttpClient],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TransferStateComponent implements OnInit {
   responseOne: string = '';
   responseTwo: string = '';
+  private readonly httpClient: HttpClient = inject(HttpClient);
+  private readonly cdr: ChangeDetectorRef = inject(ChangeDetectorRef);
 
-  constructor(private readonly httpClient: HttpClient) {
+  constructor() {
     // Test that HTTP cache works when HTTP call is made in the constructor.
     this.httpClient.get<any>('http://localhost:4206/api').subscribe((response) => {
       this.responseOne = response.data;
+      this.cdr.markForCheck();
     });
   }
 
   ngOnInit(): void {
     // Test that HTTP cache works when HTTP call is made in a lifecycle hook.
     this.httpClient.get<any>('/api-2').subscribe((response) => {
       this.responseTwo = response.data;
+      this.cdr.markForCheck();
     });
   }
 }
diff --git a/packages/core/src/defer/triggering.ts b/packages/core/src/defer/triggering.ts
@@ -21,7 +21,7 @@ import {
   getParentBlockHydrationQueue,
   isIncrementalHydrationEnabled,
 } from '../hydration/utils';
-import {PendingTasksInternal} from '../pending_tasks';
+import {PendingTasks, PendingTasksInternal} from '../pending_tasks';
 import {assertLContainer} from '../render3/assert';
 import {getComponentDef, getDirectiveDef, getPipeDef} from '../render3/def_getters';
 import {getTemplateLocationDetails} from '../render3/instructions/element_validation';
@@ -205,8 +205,7 @@ export function triggerResourceLoading(
   }
 
   // Indicate that an application is not stable and has a pending task.
-  const pendingTasks = injector.get(PendingTasksInternal);
-  const taskId = pendingTasks.add();
+  const removeTask = injector.get(PendingTasks).add();
 
   // The `dependenciesFn` might be `null` when all dependencies within
   // a given defer block were eagerly referenced elsewhere in a file,
@@ -215,7 +214,7 @@ export function triggerResourceLoading(
     tDetails.loadingPromise = Promise.resolve().then(() => {
       tDetails.loadingPromise = null;
       tDetails.loadingState = DeferDependenciesLoadingState.COMPLETE;
-      pendingTasks.remove(taskId);
+      removeTask();
     });
     return tDetails.loadingPromise;
   }
@@ -244,11 +243,6 @@ export function triggerResourceLoading(
       }
     }
 
-    // Loading is completed, we no longer need the loading Promise
-    // and a pending task should also be removed.
-    tDetails.loadingPromise = null;
-    pendingTasks.remove(taskId);
-
     if (failed) {
       tDetails.loadingState = DeferDependenciesLoadingState.FAILED;
 
@@ -288,7 +282,13 @@ export function triggerResourceLoading(
       }
     }
   });
-  return tDetails.loadingPromise;
+
+  return tDetails.loadingPromise.finally(() => {
+    // Loading is completed, we no longer need the loading Promise
+    // and a pending task should also be removed.
+    tDetails.loadingPromise = null;
+    removeTask();
+  });
 }
 
 /**
