@HostListener doesn't work in a complicated page

I have many Angular components; They all have a method with @HostListener And I converted them into web components on @angular/elements and embedded them in some legacy JSP/JSF pages.

This approach works very well and many web components are working properly in those legacy pages.

But now I find one component is not listening the event for @HostListener.

So I tried those:

• Embedded this component into a simple JSP/JSF page and it works
• Embedded another component with @HostListener method into this page and it works
• Try to find big difference between those two components and found nothing
• Debug the code in complicated JSP/JSF page and found the component is created and initialized.

My versions:

"@angular/core": "^15.2.9",
"@angular/elements": "^15.2.9",

A part of my code:

  @HostListener('window:onExchangeRateTrigger', ['$event'])
  handleExchangeRateTrigger(e: CustomEvent) {

    console.log(" never get here");
  }

In JSP/JSF side:

        function openExchangeRateWarn(ProgramId) {

            var event = new CustomEvent("onExchangeRateTrigger", {
                detail: {
                    currencyCode: "CAD",
                    currencyRate: 0.32,
                    duration: 8000,
                    programId: ProgramId,
                }
            });
            window.dispatchEvent(event);
        }

Finally I figured out the root cause:

Some parts of my JSP page are dynamically loaded in the client Side within iFrame , which cut my single JSP page into multiple JS context. The trigger and its related component fell into different JS context.

The fixing is simple, I just put them together.