fix(ivy): sanitize tag name while generating listener function name (#26237)

PR Close #26237

packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts

@@ -60,6 +60,51 @@ describe('compiler compliance: listen()', () => {
     expectEmit(result.source, template, 'Incorrect template');
   });
 
+  it('should create listener instruction on other components', () => {
+    const files = {
+      app: {
+        'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-app',
+                template: \`<div>My App</div>\`
+              })
+              export class MyApp {}
+
+              @Component({
+                selector: 'my-component',
+                template: \`<my-app (click)="onClick($event);"></my-app>\`
+              })
+              export class MyComponent {
+                onClick(event: any) {}
+              }
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+      }
+    };
+
+    const template = `
+        const $e0_attrs$ = [${AttributeMarker.SelectOnly}, "click"];
+        …
+        template: function MyComponent_Template(rf, ctx) {
+          if (rf & 1) {
+            $r3$.ɵelementStart(0, "my-app", $e0_attrs$);
+            $r3$.ɵlistener("click", function MyComponent_Template_my_app_click_listener($event) {
+              return ctx.onClick($event);
+            });
+            $r3$.ɵelementEnd();
+          }
+        }
+        `;
+
+    const result = compile(files, angularFiles);
+
+    expectEmit(result.source, template, 'Incorrect template');
+  });
+
   it('should create multiple listener instructions that share a view snapshot', () => {
     const files = {
       app: {

packages/compiler/src/render3/view/template.ts

@@ -940,8 +940,9 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
   }
 
   private prepareListenerParameter(tagName: string, outputAst: t.BoundEvent): () => o.Expression[] {
-    const evName = sanitizeIdentifier(outputAst.name);
+    const evNameSanitized = sanitizeIdentifier(outputAst.name);
-    const functionName = `${this.templateName}_${tagName}_${evName}_listener`;
+    const tagNameSanitized = sanitizeIdentifier(tagName);
+    const functionName = `${this.templateName}_${tagNameSanitized}_${evNameSanitized}_listener`;
 
     return () => {