angular · arturovt · Jan 20, 2025 · AndrewKushnir · Apr 30, 2025 · arturovt
diff --git a/packages/core/src/hydration/event_replay.ts b/packages/core/src/hydration/event_replay.ts
@@ -44,7 +44,7 @@ import {APP_ID} from '../application/application_tokens';
 import {performanceMarkFeature} from '../util/performance';
 import {triggerHydrationFromBlockName} from '../defer/triggering';
 import {isIncrementalHydrationEnabled} from './utils';
-import {setStashFn} from '../render3/view/listeners';
+import {clearStashFn, setStashFn} from '../render3/view/listeners';
 
 /** Apps in which we've enabled event replay.
  *  This is to prevent initializing event replay more than once per app.
@@ -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/view/listeners.ts b/packages/core/src/render3/view/listeners.ts
@@ -26,6 +26,7 @@ import {RElement, RNode} from '../interfaces/renderer_dom';
 import {GlobalTargetResolver, Renderer} from '../interfaces/renderer';
 import {assertNotSame} from '../../util/assert';
 import {handleUncaughtError} from '../instructions/shared';
+import {APP_ID} from '../../application/application_tokens';
 
 /** Shorthand for an event listener callback function to reduce duplication. */
 export type EventCallback = (event?: any) => any;
@@ -34,15 +35,21 @@ export type EventCallback = (event?: any) => any;
 export type WrappedEventCallback = EventCallback & {__wrapped: boolean};
 
 /**
- * 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: EventCallback) => {};
+type StashEventListener = (el: RNode, eventName: string, listenerFn: EventCallback) => 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);
 }
 
 /**
@@ -172,7 +179,9 @@ export function listenToDomEvent(
   } else {
     const native = getNativeByTNode(tNode, lView) as RElement;
     const target = eventTargetResolver ? eventTargetResolver(native) : native;
-    stashEventListener(target as RElement, eventName, wrappedListener);
+    const appId = lView[INJECTOR].get(APP_ID);
+    const stashEventListener = stashEventListeners.get(appId);
+    stashEventListener?.(target as RElement, eventName, wrappedListener);
 
     const cleanupFn = renderer.listen(target as RElement, eventName, wrappedListener);
     const idxOrTargetGetter = eventTargetResolver

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",
   "storeListenerCleanup",
   "stringify",

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",
   "storeListenerCleanup",
   "stringify",

diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -692,6 +692,7 @@
   "split",
   "squashSegmentGroup",
   "standardizeConfig",
+  "stashEventListeners",
   "storeLViewOnDestroy",
   "storeListenerCleanup",
   "stringify",

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',