From 6c8b09468a05a80cba3960861f0ab8d3bae80415 Mon Sep 17 00:00:00 2001 From: Payam Valadkhan Date: Sat, 3 Feb 2024 02:21:53 -0500 Subject: [PATCH] fix(compiler-cli): highlight the unresolved element in the @Component.styles array for the error LOCAL_COMPILATION_UNRESOLVED_CONST (#54230) Currently the whole array is highlighted. PR Close #54230 --- .../src/ngtsc/annotations/directive/src/shared.ts | 2 +- packages/compiler-cli/test/ngtsc/local_compilation_spec.ts | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts b/packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts index 42f852bf25ec0..f98d1be705bfe 100644 --- a/packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts +++ b/packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts @@ -500,7 +500,7 @@ export function parseDirectiveStyles( throw new FatalDiagnosticError( ErrorCode.LOCAL_COMPILATION_UNRESOLVED_CONST, - expression, + entry.node, 'Unresolved identifier found for @Component.styles 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 styles, 3) Move the styles into separate files and include it using @Component.styleUrls'); } } diff --git a/packages/compiler-cli/test/ngtsc/local_compilation_spec.ts b/packages/compiler-cli/test/ngtsc/local_compilation_spec.ts index 67f8336336143..82dbf6ad14666 100644 --- a/packages/compiler-cli/test/ngtsc/local_compilation_spec.ts +++ b/packages/compiler-cli/test/ngtsc/local_compilation_spec.ts @@ -1228,8 +1228,10 @@ runInEachFileSystem( import {Component} from '@angular/core'; import {ExternalString} from './some-where'; + const InternalStyle = "p{color:blue}"; + @Component({ - styles: [ExternalString], + styles: [InternalStyle, ExternalString], template: '', }) @@ -1241,10 +1243,11 @@ runInEachFileSystem( expect(errors.length).toBe(1); - const {code, messageText, relatedInformation} = errors[0]; + 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');