{"record":{"id":"3e6f40656149a547","repo":"angular/angular","slug":"local-compilation-unresolved-const","errorCode":"LOCAL_COMPILATION_UNRESOLVED_CONST","errorMessage":"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","messagePattern":"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","errorType":"exception","errorClass":"FatalDiagnosticError","httpStatus":null,"severity":"error","filePath":"packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts","lineNumber":900,"sourceCode":"  }\n\n  const evaluated = evaluator.evaluate(expression);\n  const value = typeof evaluated === 'string' ? [evaluated] : evaluated;\n\n  // Check if the identifier used for @Component.styles cannot be resolved in local compilation\n  // mode. if the case, an error specific to this situation is generated.\n  if (compilationMode === CompilationMode.LOCAL) {\n    let unresolvedNode: ts.Node | null = null;\n    if (Array.isArray(value)) {\n      const entry = value.find((e) => e instanceof DynamicValue && e.isFromUnknownIdentifier()) as\n        DynamicValue | undefined;\n      unresolvedNode = entry?.node ?? null;\n    } else if (value instanceof DynamicValue && value.isFromUnknownIdentifier()) {\n      unresolvedNode = value.node;\n    }\n\n    if (unresolvedNode !== null) {\n      throw new FatalDiagnosticError(\n        ErrorCode.LOCAL_COMPILATION_UNRESOLVED_CONST,\n        unresolvedNode,\n        'Unresolved identifier found for @Component.styles field! Did you import ' +\n          'this identifier from a file outside of the compilation unit? This is ' +\n          'not allowed when Angular compiler runs in local mode. Possible ' +\n          'solutions: 1) Move the declarations into a file within the compilation ' +\n          'unit, 2) Inline the styles, 3) Move the styles into separate files and ' +\n          'include it using @Component.styleUrls',\n      );\n    }\n  }\n\n  if (!isStringArrayOrDie(value, 'styles', expression)) {\n    throw createValueHasWrongTypeError(\n      expression,\n      value,\n      `Failed to resolve @Component.styles to a string or an array of strings`,\n    );","sourceCodeStart":882,"sourceCodeEnd":918,"githubUrl":"https://github.com/angular/angular/blob/51cb07e98081ab7e4e84a9e0949266a8e19cca84/packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts#L882-L918","documentation":"Thrown only when angularCompilerOptions.compilationMode is 'local' and the @Component.styles field evaluates to a DynamicValue produced by an unknown identifier. In local mode ngtsc compiles each compilation unit without the full program, so style constants imported from other files cannot be evaluated; the check scans the styles array (or single value) for DynamicValue.isFromUnknownIdentifier() and reports LOCAL_COMPILATION_UNRESOLVED_CONST on that identifier. The message itself lists the supported workarounds.","triggerScenarios":"`import {STYLES} from './styles';` with `@Component({styles: [STYLES]})` while tsconfig sets `\"angularCompilerOptions\": {\"compilationMode\": \"local\"}`; also `styles: [THEMES.panel]` with an imported THEMES object.","commonSituations":"Enabling local compilation mode for faster builds in codebases that share style constants across files; monorepos with central style/token modules; libraries migrating Angular versions where local mode restrictions first apply.","solutions":["Inline the styles into the decorator: `styles: ['.panel { color: red; }']`.","Move the styles into their own file and load via `styleUrls: ['./comp.css']` (or `styleUrl` for a single file).","Move the style constant's declaration into the same compilation unit (the same file) so it can be evaluated.","If none are workable, opt back to full compilation: set `\"compilationMode\": \"full\"` in angularCompilerOptions."],"exampleFix":"// before\n// styles.ts\nexport const PANEL_STYLES = ['.panel { color: red; }'];\n// comp.ts\nimport {PANEL_STYLES} from './styles';\n@Component({selector: 'app-panel', template: '', styles: [PANEL_STYLES]})\n\n// after\n@Component({selector: 'app-panel', template: '', styles: ['.panel { color: red; }']})\n// or\n@Component({selector: 'app-panel', template: '', styleUrl: './panel.css'})","handlingStrategy":"fallback","validationCode":"// before enabling local compilation, scan for imported style constants\nconst re = /styles\\s*:\\s*\\[?\\s*([A-Za-z_$][\\w$]*)/g;\nfor (const m of src.matchAll(re)) {\n  const ident = m[1];\n  if (new RegExp(`import[^;]*\\\\b${ident}\\\\b`).test(src)) {\n    throw new Error(`${ident} is imported — styles must be inline or use styleUrls in local mode`);\n  }\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Keep decorator styles as literal strings; externalize shared styles into .css/.scss files loaded via styleUrl/styleUrls.","Audit for `styles: [` referencing imported identifiers before switching compilationMode to 'local'.","When local mode blocks a pattern, fall back to styleUrls (or 'full' mode) rather than fighting the restriction."],"tags":["angular","compiler-cli","local-compilation","styles","aot"],"backgroundTag":"angular-local-compilation-unresolved-const","analyzedSha":"51cb07e98081ab7e4e84a9e0949266a8e19cca84","analyzedAt":"2026-08-22T07:04:54.531Z","schemaVersion":2},"datasetVersion":"2026-08-22T09:17:25.309Z"}