fix(core): async EventEmitter should contribute to app stability (#56308

)

async `EventEmitter` should contribute to app stability.

fixes #56290

PR Close #56308

goldens/public-api/core/index.api.md

@@ -679,9 +679,7 @@ export interface ExistingSansProvider {
 export class ExperimentalPendingTasks {
     add(): () => void;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ExperimentalPendingTasks, never>;
-    // (undocumented)
-    static ɵprov: i0.ɵɵInjectableDeclaration<ExperimentalPendingTasks>;
+    static ɵprov: unknown;
 }
 
 // @public

packages/core/src/event_emitter.ts

@@ -13,6 +13,7 @@ import {OutputRef} from './authoring/output/output_ref';
 import {isInInjectionContext} from './di/contextual';
 import {inject} from './di/injector_compatibility';
 import {DestroyRef} from './linker/destroy_ref';
+import {PendingTasks} from './pending_tasks';
 
 /**
  * Use in components with the `@Output` directive to emit custom events
@@ -111,6 +112,7 @@ export interface EventEmitter<T> extends Subject<T>, OutputRef<T> {
 class EventEmitter_ extends Subject<any> implements OutputRef<any> {
   __isAsync: boolean; // tslint:disable-line
   destroyRef: DestroyRef | undefined = undefined;
+  private readonly pendingTasks: PendingTasks | undefined = undefined;
 
   constructor(isAsync: boolean = false) {
     super();
@@ -120,6 +122,7 @@ class EventEmitter_ extends Subject<any> implements OutputRef<any> {
     // For backwards compatibility reasons, this cannot be required
     if (isInInjectionContext()) {
       this.destroyRef = inject(DestroyRef, {optional: true}) ?? undefined;
+      this.pendingTasks = inject(PendingTasks);
     }
   }
 
@@ -145,14 +148,14 @@ class EventEmitter_ extends Subject<any> implements OutputRef<any> {
     }
 
     if (this.__isAsync) {
-      errorFn = _wrapInTimeout(errorFn);
+      errorFn = this.wrapInTimeout(errorFn);
 
       if (nextFn) {
-        nextFn = _wrapInTimeout(nextFn);
+        nextFn = this.wrapInTimeout(nextFn);
       }
 
       if (completeFn) {
-        completeFn = _wrapInTimeout(completeFn);
+        completeFn = this.wrapInTimeout(completeFn);
       }
     }
 
@@ -164,12 +167,18 @@ class EventEmitter_ extends Subject<any> implements OutputRef<any> {
 
     return sink;
   }
-}
 
-function _wrapInTimeout(fn: (value: unknown) => any) {
-  return (value: unknown) => {
-    setTimeout(fn, undefined, value);
-  };
+  private wrapInTimeout(fn: (value: unknown) => any) {
+    return (value: unknown) => {
+      const taskId = this.pendingTasks?.add();
+      setTimeout(() => {
+        fn(value);
+        if (taskId !== undefined) {
+          this.pendingTasks?.remove(taskId);
+        }
+      });
+    };
+  }
 }
 
 /**

packages/core/src/pending_tasks.ts

@@ -8,16 +8,13 @@
 
 import {BehaviorSubject} from 'rxjs';
 
-import {inject} from './di';
-import {Injectable} from './di/injectable';
+import {inject} from './di/injector_compatibility';
+import {ɵɵdefineInjectable} from './di/interface/defs';
 import {OnDestroy} from './interface/lifecycle_hooks';
 
 /**
  * Internal implementation of the pending tasks service.
  */
-@Injectable({
-  providedIn: 'root',
-})
 export class PendingTasks implements OnDestroy {
   private taskId = 0;
   private pendingTasks = new Set<number>();
@@ -48,6 +45,13 @@ export class PendingTasks implements OnDestroy {
       this.hasPendingTasks.next(false);
     }
   }
+
+  /** @nocollapse */
+  static ɵprov = /** @pureOrBreakMyCode */ ɵɵdefineInjectable({
+    token: PendingTasks,
+    providedIn: 'root',
+    factory: () => new PendingTasks(),
+  });
 }
 
 /**
@@ -76,9 +80,6 @@ export class PendingTasks implements OnDestroy {
  * @publicApi
  * @experimental
  */
-@Injectable({
-  providedIn: 'root',
-})
 export class ExperimentalPendingTasks {
   private internalPendingTasks = inject(PendingTasks);
   /**
@@ -89,4 +90,11 @@ export class ExperimentalPendingTasks {
     const taskId = this.internalPendingTasks.add();
     return () => this.internalPendingTasks.remove(taskId);
   }
+
+  /** @nocollapse */
+  static ɵprov = /** @pureOrBreakMyCode */ ɵɵdefineInjectable({
+    token: ExperimentalPendingTasks,
+    providedIn: 'root',
+    factory: () => new ExperimentalPendingTasks(),
+  });
 }

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

@@ -629,9 +629,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },

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

@@ -686,9 +686,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },

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

@@ -515,9 +515,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },

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

@@ -581,9 +581,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },

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

@@ -716,9 +716,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },

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

@@ -698,9 +698,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },

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

@@ -389,9 +389,6 @@
   {
     "name": "_retrieveHydrationInfoImpl"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },

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

@@ -569,9 +569,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },

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

@@ -842,9 +842,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },

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

@@ -464,9 +464,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },

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

@@ -605,9 +605,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },

packages/core/test/event_emitter_spec.ts

@@ -6,9 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {filter} from 'rxjs/operators';
+import {TestBed} from '@angular/core/testing';
+import {filter, tap} from 'rxjs/operators';
 
 import {EventEmitter} from '../src/event_emitter';
+import {ApplicationRef} from '../public_api';
+import {firstValueFrom} from 'rxjs';
+import {PendingTasks} from '../src/pending_tasks';
 
 describe('EventEmitter', () => {
   let emitter: EventEmitter<number>;
@@ -190,6 +194,20 @@ describe('EventEmitter', () => {
     expect(emitter.observers.length).toBe(0);
   });
 
+  it('contributes to app stability', async () => {
+    const emitter = TestBed.runInInjectionContext(() => new EventEmitter<number>(true));
+    let emitValue: number;
+    emitter.subscribe({
+      next: (v: number) => {
+        emitValue = v;
+      },
+    });
+    emitter.emit(1);
+    await firstValueFrom(TestBed.inject(ApplicationRef).isStable.pipe(filter((stable) => stable)));
+    expect(emitValue!).toBeDefined();
+    expect(emitValue!).toEqual(1);
+  });
+
   // TODO: vsavkin: add tests cases
   // should call dispose on the subscription if generator returns {done:true}
   // should call dispose on the subscription on throw