refactor(core): Rename InitialRenderPendingTasks and restructure isStable observable (angular#53534)

The InitialRenderPendingTasks currently attempts to only contribute to
ApplicationRef stableness one time to support SSR. This isn't actually
how the switchMap works in reality. This commit updates
the isStable observable to be more clear that it's always a combination
of the zone stableness and pending tasks.

In addition, this commit renames the service to just be PendingTasks
because it doesn't directly relate to rendering. While the purpose is
to track things that might cause rendering to happen, we don't know if the
tasks will affect rendering at all.

PR Close angular#53534

Author: atscott

packages/common/http/src/interceptor.ts

@@ -7,7 +7,7 @@
  */
 
 import {isPlatformServer} from '@angular/common';
-import {EnvironmentInjector, inject, Injectable, InjectionToken, PLATFORM_ID, runInInjectionContext, ɵConsole as Console, ɵformatRuntimeError as formatRuntimeError, ɵInitialRenderPendingTasks as InitialRenderPendingTasks} from '@angular/core';
+import {EnvironmentInjector, inject, Injectable, InjectionToken, PLATFORM_ID, runInInjectionContext, ɵConsole as Console, ɵformatRuntimeError as formatRuntimeError, ɵPendingTasks as PendingTasks} from '@angular/core';
 import {Observable} from 'rxjs';
 import {finalize} from 'rxjs/operators';
 
@@ -217,7 +217,7 @@ export function legacyInterceptorFnFactory(): HttpInterceptorFn {
           adaptLegacyInterceptorToChain, interceptorChainEndFn as ChainedInterceptorFn<any>);
     }
 
-    const pendingTasks = inject(InitialRenderPendingTasks);
+    const pendingTasks = inject(PendingTasks);
     const taskId = pendingTasks.add();
     return chain(req, handler).pipe(finalize(() => pendingTasks.remove(taskId)));
   };
@@ -233,7 +233,7 @@ export function resetFetchBackendWarningFlag() {
 @Injectable()
 export class HttpInterceptorHandler extends HttpHandler {
   private chain: ChainedInterceptorFn<unknown>|null = null;
-  private readonly pendingTasks = inject(InitialRenderPendingTasks);
+  private readonly pendingTasks = inject(PendingTasks);
 
   constructor(private backend: HttpBackend, private injector: EnvironmentInjector) {
     super();

packages/core/src/application/application_ref.ts

@@ -9,8 +9,8 @@
 import '../util/ng_jit_mode';
 
 import {setThrowInvalidWriteToSignalError} from '@angular/core/primitives/signals';
-import {Observable, of} from 'rxjs';
-import {distinctUntilChanged, first, switchMap} from 'rxjs/operators';
+import {combineLatest, Observable} from 'rxjs';
+import {distinctUntilChanged, first, map} from 'rxjs/operators';
 
 import {getCompilerFacade, JitCompilerUsage} from '../compiler/compiler_facade';
 import {Console} from '../console';
@@ -21,14 +21,14 @@ import {Injector} from '../di/injector';
 import {EnvironmentInjector} from '../di/r3_injector';
 import {ErrorHandler, INTERNAL_APPLICATION_ERROR_HANDLER} from '../error_handler';
 import {formatRuntimeError, RuntimeError, RuntimeErrorCode} from '../errors';
-import {InitialRenderPendingTasks} from '../initial_render_pending_tasks';
 import {Type} from '../interface/type';
 import {COMPILER_OPTIONS, CompilerOptions} from '../linker/compiler';
 import {ComponentFactory, ComponentRef} from '../linker/component_factory';
 import {ComponentFactoryResolver} from '../linker/component_factory_resolver';
 import {NgModuleFactory, NgModuleRef} from '../linker/ng_module_factory';
 import {ViewRef} from '../linker/view_ref';
 import {isComponentResourceResolutionQueueEmpty, resolveComponentResources} from '../metadata/resource_loading';
+import {PendingTasks} from '../pending_tasks';
 import {assertNgModuleType} from '../render3/assert';
 import {ComponentFactory as R3ComponentFactory} from '../render3/component_ref';
 import {isStandalone} from '../render3/definition';
@@ -324,6 +324,8 @@ export class ApplicationRef {
   _views: InternalViewRef<unknown>[] = [];
   private readonly internalErrorHandler = inject(INTERNAL_APPLICATION_ERROR_HANDLER);
   private readonly zoneIsStable = inject(ZONE_IS_STABLE_OBSERVABLE);
+  private readonly noPendingTasks =
+      inject(PendingTasks).hasPendingTasks.pipe(map(pending => !pending));
 
   /**
    * Indicates whether this instance was destroyed.
@@ -347,9 +349,9 @@ export class ApplicationRef {
    * Returns an Observable that indicates when the application is stable or unstable.
    */
   public readonly isStable: Observable<boolean> =
-      inject(InitialRenderPendingTasks)
-          .hasPendingTasks.pipe(
-              switchMap(hasPendingTasks => hasPendingTasks ? of(false) : this.zoneIsStable),
+      combineLatest([this.zoneIsStable, this.noPendingTasks])
+          .pipe(
+              map(indicators => indicators.every(stable => stable)),
               distinctUntilChanged(),
           );
 

packages/core/src/core_private_export.ts

@@ -28,10 +28,10 @@ export {IS_HYDRATION_DOM_REUSE_ENABLED as ɵIS_HYDRATION_DOM_REUSE_ENABLED} from
 export {SSR_CONTENT_INTEGRITY_MARKER as ɵSSR_CONTENT_INTEGRITY_MARKER} from './hydration/utils';
 export {CurrencyIndex as ɵCurrencyIndex, ExtraLocaleDataIndex as ɵExtraLocaleDataIndex, findLocaleData as ɵfindLocaleData, getLocaleCurrencyCode as ɵgetLocaleCurrencyCode, getLocalePluralCase as ɵgetLocalePluralCase, LocaleDataIndex as ɵLocaleDataIndex, registerLocaleData as ɵregisterLocaleData, unregisterAllLocaleData as ɵunregisterLocaleData} from './i18n/locale_data_api';
 export {DEFAULT_LOCALE_ID as ɵDEFAULT_LOCALE_ID} from './i18n/localization';
-export {InitialRenderPendingTasks as ɵInitialRenderPendingTasks} from './initial_render_pending_tasks';
 export {Writable as ɵWritable} from './interface/type';
 export {ComponentFactory as ɵComponentFactory} from './linker/component_factory';
 export {clearResolutionOfComponentResourcesQueue as ɵclearResolutionOfComponentResourcesQueue, isComponentDefPendingResolution as ɵisComponentDefPendingResolution, resolveComponentResources as ɵresolveComponentResources, restoreComponentResolutionQueue as ɵrestoreComponentResolutionQueue} from './metadata/resource_loading';
+export {PendingTasks as ɵPendingTasks} from './pending_tasks';
 export {ALLOW_MULTIPLE_PLATFORMS as ɵALLOW_MULTIPLE_PLATFORMS} from './platform/platform';
 export {ReflectionCapabilities as ɵReflectionCapabilities} from './reflection/reflection_capabilities';
 export {AnimationRendererType as ɵAnimationRendererType} from './render/api';

packages/core/src/initial_render_pending_tasks.ts renamed to packages/core/src/pending_tasks.ts

@@ -12,16 +12,17 @@ import {Injectable} from './di';
 import {OnDestroy} from './interface/lifecycle_hooks';
 
 /**
- * *Internal* service that keeps track of pending tasks happening in the system
- * during the initial rendering. No tasks are tracked after an initial
- * rendering.
+ * *Internal* service that keeps track of pending tasks happening in the system.
  *
  * This information is needed to make sure that the serialization on the server
  * is delayed until all tasks in the queue (such as an initial navigation or a
  * pending HTTP request) are completed.
+ *
+ * Pending tasks continue to contribute to the stableness of `ApplicationRef`
+ * throughout the lifetime of the application.
  */
 @Injectable({providedIn: 'root'})
-export class InitialRenderPendingTasks implements OnDestroy {
+export class PendingTasks implements OnDestroy {
   private taskId = 0;
   private pendingTasks = new Set<number>();
   hasPendingTasks = new BehaviorSubject<boolean>(false);

packages/core/test/acceptance/initial_render_pending_tasks_spec.ts renamed to packages/core/test/acceptance/pending_tasks_spec.ts

@@ -8,13 +8,14 @@
 
 import {TestBed} from '@angular/core/testing';
 import {EMPTY, of} from 'rxjs';
-import {map, withLatestFrom} from 'rxjs/operators';
+import {map, take, withLatestFrom} from 'rxjs/operators';
 
-import {InitialRenderPendingTasks} from '../../src/initial_render_pending_tasks';
+import {ApplicationRef} from '../../src/application/application_ref';
+import {PendingTasks} from '../../src/pending_tasks';
 
-describe('InitialRenderPendingTasks', () => {
+describe('PendingTasks', () => {
   it('should wait until all tasks are completed', async () => {
-    const pendingTasks = TestBed.inject(InitialRenderPendingTasks);
+    const pendingTasks = TestBed.inject(PendingTasks);
     const taskA = pendingTasks.add();
     const taskB = pendingTasks.add();
     const taskC = pendingTasks.add();
@@ -26,7 +27,7 @@ describe('InitialRenderPendingTasks', () => {
   });
 
   it('should allow calls to remove the same task multiple times', async () => {
-    const pendingTasks = TestBed.inject(InitialRenderPendingTasks);
+    const pendingTasks = TestBed.inject(PendingTasks);
     expect(await hasPendingTasks(pendingTasks)).toBeFalse();
 
     const taskA = pendingTasks.add();
@@ -40,7 +41,7 @@ describe('InitialRenderPendingTasks', () => {
   });
 
   it('should be tolerant to removal of non-existent ids', async () => {
-    const pendingTasks = TestBed.inject(InitialRenderPendingTasks);
+    const pendingTasks = TestBed.inject(PendingTasks);
     expect(await hasPendingTasks(pendingTasks)).toBeFalse();
 
     pendingTasks.remove(Math.random());
@@ -49,9 +50,28 @@ describe('InitialRenderPendingTasks', () => {
 
     expect(await hasPendingTasks(pendingTasks)).toBeFalse();
   });
+
+  it('contributes to applicationRef stableness', async () => {
+    const appRef = TestBed.inject(ApplicationRef);
+    const pendingTasks = TestBed.inject(PendingTasks);
+
+    const taskA = pendingTasks.add();
+    await expectAsync(applicationRefIsStable(appRef)).toBeResolvedTo(false);
+    pendingTasks.remove(taskA);
+    await expectAsync(applicationRefIsStable(appRef)).toBeResolvedTo(true);
+
+    const taskB = pendingTasks.add();
+    await expectAsync(applicationRefIsStable(appRef)).toBeResolvedTo(false);
+    pendingTasks.remove(taskB);
+    await expectAsync(applicationRefIsStable(appRef)).toBeResolvedTo(true);
+  });
 });
 
-function hasPendingTasks(pendingTasks: InitialRenderPendingTasks): Promise<boolean> {
+function applicationRefIsStable(applicationRef: ApplicationRef) {
+  return applicationRef.isStable.pipe(take(1)).toPromise();
+}
+
+function hasPendingTasks(pendingTasks: PendingTasks): Promise<boolean> {
   return of(EMPTY)
              .pipe(
                  withLatestFrom(pendingTasks.hasPendingTasks),

packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json

@@ -254,9 +254,6 @@
   {
     "name": "INTERNAL_BROWSER_PLATFORM_PROVIDERS"
   },
-  {
-    "name": "InitialRenderPendingTasks"
-  },
   {
     "name": "InjectFlags"
   },
@@ -410,6 +407,9 @@
   {
     "name": "PRESERVE_HOST_CONTENT"
   },
+  {
+    "name": "PendingTasks"
+  },
   {
     "name": "R3Injector"
   },
@@ -689,6 +689,9 @@
   {
     "name": "collectNativeNodesInLContainer"
   },
+  {
+    "name": "combineLatest"
+  },
   {
     "name": "computeStaticStyling"
   },
@@ -1187,6 +1190,9 @@
   {
     "name": "makeTimingAst"
   },
+  {
+    "name": "map"
+  },
   {
     "name": "markAncestorsForTraversal"
   },
@@ -1202,9 +1208,15 @@
   {
     "name": "markedFeatures"
   },
+  {
+    "name": "maybeSchedule"
+  },
   {
     "name": "maybeWrapInNotSelector"
   },
+  {
+    "name": "merge"
+  },
   {
     "name": "mergeHostAttribute"
   },
@@ -1463,6 +1475,15 @@
   {
     "name": "writeToDirectiveInput"
   },
+  {
+    "name": "{getPrototypeOf:getPrototypeOf,prototype:objectProto,keys:getKeys}"
+  },
+  {
+    "name": "{isArray:isArray2}"
+  },
+  {
+    "name": "{isArray:isArray}"
+  },
   {
     "name": "ɵɵStandaloneFeature"
   },

packages/core/test/bundling/animations/bundle.golden_symbols.json

@@ -275,9 +275,6 @@
   {
     "name": "INTERNAL_APPLICATION_ERROR_HANDLER"
   },
-  {
-    "name": "InitialRenderPendingTasks"
-  },
   {
     "name": "InjectFlags"
   },
@@ -449,6 +446,9 @@
   {
     "name": "PRESERVE_HOST_CONTENT"
   },
+  {
+    "name": "PendingTasks"
+  },
   {
     "name": "PlatformRef"
   },
@@ -749,6 +749,9 @@
   {
     "name": "collectNativeNodesInLContainer"
   },
+  {
+    "name": "combineLatest"
+  },
   {
     "name": "computeStaticStyling"
   },
@@ -1256,6 +1259,9 @@
   {
     "name": "makeTimingAst"
   },
+  {
+    "name": "map"
+  },
   {
     "name": "markAncestorsForTraversal"
   },
@@ -1268,9 +1274,15 @@
   {
     "name": "markViewForRefresh"
   },
+  {
+    "name": "maybeSchedule"
+  },
   {
     "name": "maybeWrapInNotSelector"
   },
+  {
+    "name": "merge"
+  },
   {
     "name": "mergeHostAttribute"
   },
@@ -1535,6 +1547,15 @@
   {
     "name": "writeToDirectiveInput"
   },
+  {
+    "name": "{getPrototypeOf:getPrototypeOf,prototype:objectProto,keys:getKeys}"
+  },
+  {
+    "name": "{isArray:isArray2}"
+  },
+  {
+    "name": "{isArray:isArray}"
+  },
   {
     "name": "ɵɵdefineComponent"
   },

packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json

@@ -179,9 +179,6 @@
   {
     "name": "INTERNAL_APPLICATION_ERROR_HANDLER"
   },
-  {
-    "name": "InitialRenderPendingTasks"
-  },
   {
     "name": "InjectFlags"
   },
@@ -335,6 +332,9 @@
   {
     "name": "PRESERVE_HOST_CONTENT"
   },
+  {
+    "name": "PendingTasks"
+  },
   {
     "name": "PlatformRef"
   },
@@ -557,6 +557,9 @@
   {
     "name": "collectNativeNodesInLContainer"
   },
+  {
+    "name": "combineLatest"
+  },
   {
     "name": "computeStaticStyling"
   },
@@ -1004,6 +1007,9 @@
   {
     "name": "makeRecord"
   },
+  {
+    "name": "map"
+  },
   {
     "name": "markAncestorsForTraversal"
   },
@@ -1016,9 +1022,15 @@
   {
     "name": "markViewForRefresh"
   },
+  {
+    "name": "maybeSchedule"
+  },
   {
     "name": "maybeWrapInNotSelector"
   },
+  {
+    "name": "merge"
+  },
   {
     "name": "mergeHostAttribute"
   },
@@ -1241,6 +1253,15 @@
   {
     "name": "writeToDirectiveInput"
   },
+  {
+    "name": "{getPrototypeOf:getPrototypeOf,prototype:objectProto,keys:getKeys}"
+  },
+  {
+    "name": "{isArray:isArray2}"
+  },
+  {
+    "name": "{isArray:isArray}"
+  },
   {
     "name": "ɵɵdefineComponent"
   },