fix(compiler-cli): show specific error for unresolved @HostListener's…

… event name in local compilation mode (#54230)

Currently the error is a generic error "selector must be a string ...". This commit makes the error more specific to local compilation and adds some action items.

PR Close #54230

packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts

@@ -142,7 +142,7 @@ export function extractDirectiveMetadata(
     }
   }
 
-  const host = extractHostBindings(decoratedElements, evaluator, coreModule, directive);
+  const host = extractHostBindings(decoratedElements, evaluator, coreModule, compilationMode, directive);
 
   const providers: Expression|null = directive.has('providers') ?
       new WrappedNodeExpr(
@@ -362,8 +362,7 @@ export function extractDecoratorQueryMetadata(
 
 
 export function extractHostBindings(
-    members: ClassMember[], evaluator: PartialEvaluator, coreModule: string|undefined,
-    metadata?: Map<string, ts.Expression>): ParsedHostBindings {
+    members: ClassMember[], evaluator: PartialEvaluator, coreModule: string|undefined, compilationMode: CompilationMode, metadata?: Map<string, ts.Expression>): ParsedHostBindings {
   let bindings: ParsedHostBindings;
   if (metadata && metadata.has('host')) {
     bindings = evaluateHostExpressionBindings(metadata.get('host')!, evaluator);
@@ -413,6 +412,15 @@ export function extractHostBindings(
             }
 
             const resolved = evaluator.evaluate(decorator.args[0]);
+
+            // Specific error for local compilation mode if the event name cannot be resolved
+            assertLocalCompilationUnresolvedConst(compilationMode, resolved, null, 
+              'Unresolved identifier found for @HostListener\'s event name ' + 
+              'argument! Did you import this identifier from a file outside of ' + 
+              'the compilation unit? This is not allowed when Angular compiler ' + 
+              'runs in local mode. Possible solutions: 1) Move the declaration ' + 
+              'into a file within the compilation unit, 2) Inline the argument');
+
             if (typeof resolved !== 'string') {
               throw createValueHasWrongTypeError(
                   decorator.args[0], resolved,

packages/compiler-cli/test/ngtsc/local_compilation_spec.ts

@@ -1319,6 +1319,70 @@ runInEachFileSystem(
                    expect(text).toEqual(
                        'Unresolved identifier found for @Component.selector field! Did you import this identifier from a file outside of the compilation unit? This is not allowed when Angular compiler runs in local mode. Possible solutions: 1) Move the declarations into a file within the compilation unit, 2) Inline the selector');                   
                  });
+
+                 it('should show correct error message when using an external symbol for component @HostListener\'s event name argument',
+                 () => {
+                   env.write('test.ts', `
+          import {Component, HostListener} from '@angular/core';
+          import {ExternalString} from './some-where';
+
+          @Component({
+            template: '',
+          })
+          export class Main {
+            @HostListener(ExternalString, ['$event'])
+            handle() {}
+          }
+          `);
+
+                   const errors = env.driveDiagnostics();
+
+                   expect(errors.length).toBe(1);
+
+                   const {code, messageText, relatedInformation, length} = errors[0];
+
+                   expect(code).toBe(
+                       ngErrorCode(ErrorCode.LOCAL_COMPILATION_UNRESOLVED_CONST));
+                   expect(length).toBe(14),
+                   expect(relatedInformation).toBeUndefined();
+
+                   const text = ts.flattenDiagnosticMessageText(messageText, '\n');
+
+                   expect(text).toEqual(
+                       `Unresolved identifier found for @HostListener's event name argument! Did you import this identifier from a file outside of the compilation unit? This is not allowed when Angular compiler runs in local mode. Possible solutions: 1) Move the declaration into a file within the compilation unit, 2) Inline the argument`
+                      );                      
+                 });
+
+                 it('should show correct error message when using an external symbol for directive @HostListener\'s event name argument',
+                 () => {
+                   env.write('test.ts', `
+          import {Directive, HostListener} from '@angular/core';
+          import {ExternalString} from './some-where';
+
+          @Directive({selector: '[test]'})
+          export class Main {
+            @HostListener(ExternalString, ['$event'])
+            handle() {}
+          }
+          `);
+
+                   const errors = env.driveDiagnostics();
+
+                   expect(errors.length).toBe(1);
+
+                   const {code, messageText, relatedInformation, length} = errors[0];
+
+                   expect(code).toBe(
+                       ngErrorCode(ErrorCode.LOCAL_COMPILATION_UNRESOLVED_CONST));
+                   expect(length).toBe(14),
+                   expect(relatedInformation).toBeUndefined();
+
+                   const text = ts.flattenDiagnosticMessageText(messageText, '\n');
+
+                   expect(text).toEqual(
+                       `Unresolved identifier found for @HostListener's event name argument! Did you import this identifier from a file outside of the compilation unit? This is not allowed when Angular compiler runs in local mode. Possible solutions: 1) Move the declaration into a file within the compilation unit, 2) Inline the argument`
+                      );                      
+                 });
             });
 
             describe('ng module bootstrap def', () => {