fix(core): prevent stash listener conflicts [patch] (#61063)

arturovt · mmalerba · commit 2e140a136a04 · 2025-04-30T09:23:19.000-07:00
Patch version of #59635. PR Close #61063
diff --git a/packages/core/src/hydration/event_replay.ts b/packages/core/src/hydration/event_replay.ts
@@ -22,7 +22,7 @@ import {APP_BOOTSTRAP_LISTENER, ApplicationRef} from '../application/application
 import {ENVIRONMENT_INITIALIZER, Injector} from '../di';
 import {inject} from '../di/injector_compatibility';
 import {Provider} from '../di/interface/provider';
-import {setStashFn} from '../render3/instructions/listener';
+import {clearStashFn, setStashFn} from '../render3/instructions/listener';
 import {RElement, RNode} from '../render3/interfaces/renderer_dom';
 import {CLEANUP, LView, TView} from '../render3/interfaces/view';
 import {unwrapRNode} from '../render3/util/view_utils';
@@ -106,7 +106,8 @@ export function withEventReplay(): Provider[] {
           if (!appsWithEventReplay.has(appRef)) {
             const jsActionMap = inject(JSACTION_BLOCK_ELEMENT_MAP);
             if (shouldEnableEventReplay(injector)) {
-              setStashFn((rEl: RNode, eventName: string, listenerFn: VoidFunction) => {
+              const appId = injector.get(APP_ID);
+              setStashFn(appId, (rEl: RNode, eventName: string, listenerFn: VoidFunction) => {
                 // If a user binds to a ng-container and uses a directive that binds using a host listener,
                 // this element could be a comment node. So we need to ensure we have an actual element
                 // node before stashing anything.
@@ -122,7 +123,6 @@ export function withEventReplay(): Provider[] {
       {
         provide: APP_BOOTSTRAP_LISTENER,
         useFactory: () => {
-          const appId = inject(APP_ID);
           const appRef = inject(ApplicationRef);
           const {injector} = appRef;
 
@@ -140,14 +140,15 @@ export function withEventReplay(): Provider[] {
               appsWithEventReplay.delete(appRef);
               // Ensure that we're always safe calling this in the browser.
               if (typeof ngServerMode !== 'undefined' && !ngServerMode) {
+                const appId = injector.get(APP_ID);
                 // `_ejsa` should be deleted when the app is destroyed, ensuring that
                 // no elements are still captured in the global list and are not prevented
                 // from being garbage collected.
                 clearAppScopedEarlyEventContract(appId);
                 // Clean up the reference to the function set by the environment initializer,
                 // as the function closure may capture injected elements and prevent them
                 // from being properly garbage collected.
-                setStashFn(() => {});
+                clearStashFn(appId);
               }
             });
 
diff --git a/packages/core/src/render3/instructions/listener.ts b/packages/core/src/render3/instructions/listener.ts
@@ -6,11 +6,12 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {APP_ID} from '../../application/application_tokens';
 import {TNode, TNodeType} from '../interfaces/node';
 import {GlobalTargetResolver, Renderer} from '../interfaces/renderer';
 import {RElement, RNode} from '../interfaces/renderer_dom';
 import {isDirectiveHost} from '../interfaces/type_checks';
-import {CLEANUP, CONTEXT, LView, RENDERER, TView} from '../interfaces/view';
+import {CLEANUP, CONTEXT, INJECTOR, LView, RENDERER, TView} from '../interfaces/view';
 import {assertTNodeType} from '../node_assert';
 import {getCurrentDirectiveDef, getCurrentTNode, getLView, getTView} from '../state';
 import {
@@ -25,15 +26,21 @@ import {wrapListener} from '../view/listeners';
 import {loadComponentRenderer} from './shared';
 
 /**
- * Contains a reference to a function that disables event replay feature
+ * Represents a signature of a function that disables event replay feature
  * for server-side rendered applications. This function is overridden with
  * an actual implementation when the event replay feature is enabled via
  * `withEventReplay()` call.
  */
-let stashEventListener = (el: RNode, eventName: string, listenerFn: (e?: any) => any) => {};
+type StashEventListener = (el: RNode, eventName: string, listenerFn: (e?: any) => any) => void;
 
-export function setStashFn(fn: typeof stashEventListener) {
-  stashEventListener = fn;
+const stashEventListeners = new Map<string, StashEventListener>();
+
+export function setStashFn(appId: string, fn: StashEventListener) {
+  stashEventListeners.set(appId, fn);
+}
+
+export function clearStashFn(appId: string) {
+  stashEventListeners.delete(appId);
 }
 
 /**
@@ -211,7 +218,9 @@ export function listenerInternal(
       processOutputs = false;
     } else {
       listenerFn = wrapListener(tNode, lView, listenerFn);
-      stashEventListener(target as RElement, eventName, listenerFn);
+      const appId = lView[INJECTOR].get(APP_ID);
+      const stashEventListener = stashEventListeners.get(appId);
+      stashEventListener?.(target as RElement, eventName, listenerFn);
       const cleanupFn = renderer.listen(target as RElement, eventName, listenerFn);
       ngDevMode && ngDevMode.rendererAddEventListener++;
 
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
@@ -611,6 +611,7 @@
   "signal",
   "signalAsReadonlyFn",
   "signalSetFn",
+  "stashEventListeners",
   "storeLViewOnDestroy",
   "stringify",
   "stringifyCSSSelector",
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
@@ -606,6 +606,7 @@
   "signal",
   "signalAsReadonlyFn",
   "signalSetFn",
+  "stashEventListeners",
   "storeLViewOnDestroy",
   "stringify",
   "stringifyCSSSelector",
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -690,6 +690,7 @@
   "split",
   "squashSegmentGroup",
   "standardizeConfig",
+  "stashEventListeners",
   "storeLViewOnDestroy",
   "stringify",
   "stringify12",
diff --git a/packages/platform-server/test/event_replay_spec.ts b/packages/platform-server/test/event_replay_spec.ts
@@ -18,7 +18,11 @@ import {
   PLATFORM_ID,
 } from '@angular/core';
 import {isPlatformBrowser} from '@angular/common';
-import {withEventReplay} from '@angular/platform-browser';
+import {
+  bootstrapApplication,
+  provideClientHydration,
+  withEventReplay,
+} from '@angular/platform-browser';
 
 import {EventPhase} from '@angular/core/primitives/event-dispatch';
 
@@ -111,6 +115,71 @@ describe('event replay', () => {
     expect(onClickSpy).toHaveBeenCalled();
   });
 
+  it('stash event listeners should not conflict when multiple apps are bootstrapped', async () => {
+    const onClickSpy = jasmine.createSpy();
+
+    @Component({
+      selector: 'app',
+      standalone: true,
+      template: `
+        <button id="btn-1" (click)="onClick()"></button>
+      `,
+    })
+    class AppComponent_1 {
+      onClick = onClickSpy;
+    }
+
+    @Component({
+      selector: 'app-2',
+      standalone: true,
+      template: `
+        <button id="btn-2" (click)="onClick()"></button>
+      `,
+    })
+    class AppComponent_2 {
+      onClick() {}
+    }
+
+    const hydrationFeatures = () => [withEventReplay()];
+    const docHtml = `
+      <html>
+      <head></head>
+      <body>
+        ${EVENT_DISPATCH_SCRIPT}
+        <app></app>
+        <app-2></app-2>
+      </body>
+      </html>
+    `;
+    const html = await ssr(AppComponent_1, {hydrationFeatures, doc: docHtml});
+    const ssrContents = getAppContents(html);
+    const doc = getDocument();
+
+    prepareEnvironment(doc, ssrContents);
+    resetTViewsFor(AppComponent_1);
+
+    const btn = doc.getElementById('btn-1')!;
+    btn.click();
+
+    // It's hard to server-side render multiple applications in this
+    // particular unit test and hydrate them on the client, so instead,
+    // let's render the application with `provideClientHydration` to enable
+    // event replay features and ensure the stash event listener is set.
+    await bootstrapApplication(AppComponent_2, {
+      providers: [
+        provideClientHydration(withEventReplay()),
+        {provide: APP_ID, useValue: 'random_name'},
+      ],
+    });
+
+    // Now let's hydrate the second application and ensure that the
+    // button click event has been replayed.
+    const appRef = await hydrate(doc, AppComponent_1, {hydrationFeatures});
+    appRef.tick();
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
   it('should cleanup `window._ejsas[appId]` once app is destroyed', async () => {
     @Component({
       selector: 'app',
