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

atscott · AndrewKushnir · commit dbd0fa00f8c7 · 2024-06-11T15:10:21.000-07:00
async `EventEmitter` should contribute to app stability. fixes #56290 PR Close #56308
diff --git a/goldens/public-api/core/index.api.md b/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
diff --git a/packages/core/src/event_emitter.ts b/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);
+        }
+      });
+    };
+  }
 }
 
 /**
diff --git a/packages/core/src/pending_tasks.ts b/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(),
+  });
 }
diff --git a/packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json b/packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json
@@ -629,9 +629,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },
diff --git a/packages/core/test/bundling/animations/bundle.golden_symbols.json b/packages/core/test/bundling/animations/bundle.golden_symbols.json
@@ -686,9 +686,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },
diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
@@ -515,9 +515,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },
diff --git a/packages/core/test/bundling/defer/bundle.golden_symbols.json b/packages/core/test/bundling/defer/bundle.golden_symbols.json
@@ -581,9 +581,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
@@ -716,9 +716,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },
diff --git a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json b/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json
@@ -698,9 +698,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },
diff --git a/packages/core/test/bundling/hello_world/bundle.golden_symbols.json b/packages/core/test/bundling/hello_world/bundle.golden_symbols.json
@@ -389,9 +389,6 @@
   {
     "name": "_retrieveHydrationInfoImpl"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },
diff --git a/packages/core/test/bundling/hydration/bundle.golden_symbols.json b/packages/core/test/bundling/hydration/bundle.golden_symbols.json
@@ -569,9 +569,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -842,9 +842,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },
diff --git a/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json b/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json
@@ -464,9 +464,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
@@ -605,9 +605,6 @@
   {
     "name": "_wasLastNodeCreated"
   },
-  {
-    "name": "_wrapInTimeout"
-  },
   {
     "name": "activeConsumer"
   },
diff --git a/packages/core/test/event_emitter_spec.ts b/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

Original file line number	Diff line number	Diff line change
`@@ -629,9 +629,6 @@`
`629`	`629`	`{`
`630`	`630`	`"name": "_wasLastNodeCreated"`
`631`	`631`	`},`
`632`		`- {`
`633`		`- "name": "_wrapInTimeout"`
`634`		`- },`
`635`	`632`	`{`
`636`	`633`	`"name": "activeConsumer"`
`637`	`634`	`},`
Original file line number	Diff line number	Diff line change
`@@ -686,9 +686,6 @@`
`686`	`686`	`{`
`687`	`687`	`"name": "_wasLastNodeCreated"`
`688`	`688`	`},`
`689`		`- {`
`690`		`- "name": "_wrapInTimeout"`
`691`		`- },`
`692`	`689`	`{`
`693`	`690`	`"name": "activeConsumer"`
`694`	`691`	`},`
Original file line number	Diff line number	Diff line change
`@@ -515,9 +515,6 @@`
`515`	`515`	`{`
`516`	`516`	`"name": "_wasLastNodeCreated"`
`517`	`517`	`},`
`518`		`- {`
`519`		`- "name": "_wrapInTimeout"`
`520`		`- },`
`521`	`518`	`{`
`522`	`519`	`"name": "activeConsumer"`
`523`	`520`	`},`
Original file line number	Diff line number	Diff line change
`@@ -581,9 +581,6 @@`
`581`	`581`	`{`
`582`	`582`	`"name": "_wasLastNodeCreated"`
`583`	`583`	`},`
`584`		`- {`
`585`		`- "name": "_wrapInTimeout"`
`586`		`- },`
`587`	`584`	`{`
`588`	`585`	`"name": "activeConsumer"`
`589`	`586`	`},`
Original file line number	Diff line number	Diff line change
`@@ -716,9 +716,6 @@`
`716`	`716`	`{`
`717`	`717`	`"name": "_wasLastNodeCreated"`
`718`	`718`	`},`
`719`		`- {`
`720`		`- "name": "_wrapInTimeout"`
`721`		`- },`
`722`	`719`	`{`
`723`	`720`	`"name": "activeConsumer"`
`724`	`721`	`},`
Original file line number	Diff line number	Diff line change
`@@ -698,9 +698,6 @@`
`698`	`698`	`{`
`699`	`699`	`"name": "_wasLastNodeCreated"`
`700`	`700`	`},`
`701`		`- {`
`702`		`- "name": "_wrapInTimeout"`
`703`		`- },`
`704`	`701`	`{`
`705`	`702`	`"name": "activeConsumer"`
`706`	`703`	`},`
Original file line number	Diff line number	Diff line change
`@@ -389,9 +389,6 @@`
`389`	`389`	`{`
`390`	`390`	`"name": "_retrieveHydrationInfoImpl"`
`391`	`391`	`},`
`392`		`- {`
`393`		`- "name": "_wrapInTimeout"`
`394`		`- },`
`395`	`392`	`{`
`396`	`393`	`"name": "activeConsumer"`
`397`	`394`	`},`