@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:' + VcapsEventType.onExchangeRateTrigger, ['$event'])
handleExchangeRateTrigger(e: CustomEvent) {

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


In JSP/JSF side:

function openExchangeRateWarn(ProgramId) {

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

Continue reading...