{"record":{"id":"a56a7d225dd50ac5","repo":"angular/angular-cli","slug":"cannot-use-a-javascript-or-typescript-file-file","errorCode":null,"errorMessage":"Cannot use a JavaScript or TypeScript file (${filePath}) in a component's styleUrls or templateUrl.","messagePattern":"Cannot use a JavaScript or TypeScript file \\((.+?)\\) in a component's styleUrls or templateUrl\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/ngtools/webpack/src/resource_loader.ts","lineNumber":150,"sourceCode":"          // app.component.ts-2.css?ngResource!=!@ngtools/webpack/src/loaders/inline-resource.js!app.component.ts\n          `${containingFile}-${this.outputPathCounter}.${fileExtension}` +\n          `?${NG_COMPONENT_RESOURCE_QUERY}!=!${this.inlineDataLoaderPath}!${containingFile}`\n        );\n      } else if (data) {\n        // Create a special URL for reading the resource from memory\n        return `angular-resource:${resourceType},${createHash('xxhash64')\n          .update(data)\n          .digest('hex')}`;\n      }\n\n      throw new Error(`\"filePath\", \"resourceType\" or \"data\" must be specified.`);\n    };\n\n    const entry = getEntry();\n\n    // Simple sanity check.\n    if (filePath?.match(/\\.[jt]s$/)) {\n      throw new Error(\n        `Cannot use a JavaScript or TypeScript file (${filePath}) in a component's styleUrls or templateUrl.`,\n      );\n    }\n\n    const outputFilePath =\n      filePath ||\n      `${containingFile}-angular-inline--${this.outputPathCounter++}.${\n        resourceType === 'template' ? 'html' : 'css'\n      }`;\n    const outputOptions = {\n      filename: outputFilePath,\n      library: {\n        type: 'var',\n        name: 'resource',\n      },\n    };\n\n    const childCompiler = this._parentCompilation.createChildCompiler(","sourceCodeStart":132,"sourceCodeEnd":168,"githubUrl":"https://github.com/angular/angular-cli/blob/bb72145f9ab45aee29f523236b3a25cd0813a841/packages/ngtools/webpack/src/resource_loader.ts#L132-L168","documentation":"Component resources (styleUrls/templateUrl) must be stylesheets or templates, not JS/TS source. The loader performs a sanity check on the resolved filePath and rejects `.js`/`.ts` files, since compiling them as a resource would produce nonsense (or circular) results.","triggerScenarios":"A component decorator references a `.ts` or `.js` file via templateUrl or styleUrls, e.g. `templateUrl: './app.component.ts'` or `styleUrls: ['./styles.ts']`, causing `get()`/`_compile()` to be called with that path.","commonSituations":"Copy-paste mistakes between templateUrl and the class file path; global stylesheet routed through a barrel .ts file that re-exports CSS imports; refactorings that renamed a .scss to .ts or vice versa.","solutions":["Correct the decorator path to point at an actual template (.html) or stylesheet (.css/.scss/.less) file","If you import CSS from a TS file, import the CSS file directly in styleUrls instead of the TS wrapper","Verify resolved paths for typos/extension mistakes in @Component metadata"],"exampleFix":"// before\n@Component({ templateUrl: './app.component.ts' })\n// after\n@Component({ templateUrl: './app.component.html' })","handlingStrategy":"validation","validationCode":"function assertComponentResource(path) {\n  if (/\\.[jt]s$/.test(path)) {\n    throw new Error(`${path} is a JS/TS file; use an .html template or .css/.scss style`);\n  }\n}\nassertComponentResource(component.templateUrl);","typeGuard":null,"tryCatchPattern":"try {\n  await loader.get(resourcePath);\n} catch (e) {\n  if (e.message.startsWith('Cannot use a JavaScript or TypeScript file')) {\n    console.error('Fix @Component templateUrl/styleUrls: ' + e.message);\n  }\n  throw e;\n}","preventionTips":["Never point templateUrl/styleUrls at .ts/.js files","Import CSS files directly in styleUrls, not TS barrels that re-export CSS","Double-check decorator paths after renames or refactors"],"tags":["angular","decorator","validation","template"],"backgroundTag":"invalid-component-resource-path","analyzedSha":"bb72145f9ab45aee29f523236b3a25cd0813a841","analyzedAt":"2026-08-30T02:47:34.745Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}