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

…argument 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

@@ -383,6 +383,14 @@ export function extractHostBindings(
             }
 
             const resolved = evaluator.evaluate(decorator.args[0]);
+
+            // Specific error for local compilation mode if the argument cannot be resolved
+            assertLocalCompilationUnresolvedConst(compilationMode, resolved, null, 
+              'Unresolved identifier found for @HostBinding\'s 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.node, resolved, `@HostBinding's argument must be a string`);

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

@@ -1383,6 +1383,66 @@ runInEachFileSystem(
                        `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 component @HostBinding\'s argument',
+                 () => {
+                   env.write('test.ts', `
+          import {Component, HostBinding} from '@angular/core';
+          import {ExternalString} from './some-where';
+
+          @Component({template: ''})
+          export class Main {
+            @HostBinding(ExternalString) id = 'some thing';
+          }
+          `);
+
+                   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 @HostBinding's 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 @HostBinding\'s argument',
+                 () => {
+                   env.write('test.ts', `
+          import {Directive, HostBinding} from '@angular/core';
+          import {ExternalString} from './some-where';
+
+          @Directive({selector: '[test]'})
+          export class Main {
+            @HostBinding(ExternalString) id = 'some thing';
+          }
+          `);
+
+                   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 @HostBinding's 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', () => {