fix(compiler-cli): show specific error for unresolved @Directive.expo…

…rtAs in local compilation mode (#54230)

    Currently the error is a generic error "exportAs 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

@@ -161,6 +161,14 @@ export function extractDirectiveMetadata(
   if (directive.has('exportAs')) {
     const expr = directive.get('exportAs')!;
     const resolved = evaluator.evaluate(expr);
+
+    assertLocalCompilationUnresolvedConst(compilationMode, resolved, null, 
+      'Unresolved identifier found for exportAs 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');
+
     if (typeof resolved !== 'string') {
       throw createValueHasWrongTypeError(expr, resolved, `exportAs must be a string`);
     }

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

@@ -1443,6 +1443,35 @@ runInEachFileSystem(
                        `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.exportAs argument',
+                 () => {
+                   env.write('test.ts', `
+          import {Directive} from '@angular/core';
+          import {ExternalString} from './some-where';
+
+          @Directive({selector: '[test]', exportAs: ExternalString})
+          export class Main {
+          }
+          `);
+
+                   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 exportAs 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`
+                      );                      
+                 });
             });
 
             describe('ng module bootstrap def', () => {