angular/angular-cli · error

Cannot use a JavaScript or TypeScript file (${filePath}) in

Error message

Cannot use a JavaScript or TypeScript file (${filePath}) in a component's styleUrls or templateUrl.

What it means

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.

Source

Thrown at packages/ngtools/webpack/src/resource_loader.ts:150

          // app.component.ts-2.css?ngResource!=!@ngtools/webpack/src/loaders/inline-resource.js!app.component.ts
          `${containingFile}-${this.outputPathCounter}.${fileExtension}` +
          `?${NG_COMPONENT_RESOURCE_QUERY}!=!${this.inlineDataLoaderPath}!${containingFile}`
        );
      } else if (data) {
        // Create a special URL for reading the resource from memory
        return `angular-resource:${resourceType},${createHash('xxhash64')
          .update(data)
          .digest('hex')}`;
      }

      throw new Error(`"filePath", "resourceType" or "data" must be specified.`);
    };

    const entry = getEntry();

    // Simple sanity check.
    if (filePath?.match(/\.[jt]s$/)) {
      throw new Error(
        `Cannot use a JavaScript or TypeScript file (${filePath}) in a component's styleUrls or templateUrl.`,
      );
    }

    const outputFilePath =
      filePath ||
      `${containingFile}-angular-inline--${this.outputPathCounter++}.${
        resourceType === 'template' ? 'html' : 'css'
      }`;
    const outputOptions = {
      filename: outputFilePath,
      library: {
        type: 'var',
        name: 'resource',
      },
    };

    const childCompiler = this._parentCompilation.createChildCompiler(

View on GitHub (pinned to bb72145f9a)

Solutions

1. Correct the decorator path to point at an actual template (.html) or stylesheet (.css/.scss/.less) file
2. If you import CSS from a TS file, import the CSS file directly in styleUrls instead of the TS wrapper
3. Verify resolved paths for typos/extension mistakes in @Component metadata

Example fix

// before
@Component({ templateUrl: './app.component.ts' })
// after
@Component({ templateUrl: './app.component.html' })

function assertComponentResource(path) {
  if (/\.[jt]s$/.test(path)) {
    throw new Error(`${path} is a JS/TS file; use an .html template or .css/.scss style`);
  }
}
assertComponentResource(component.templateUrl);

try {
  await loader.get(resourcePath);
} catch (e) {
  if (e.message.startsWith('Cannot use a JavaScript or TypeScript file')) {
    console.error('Fix @Component templateUrl/styleUrls: ' + e.message);
  }
  throw e;
}

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• Invalid redirect status code: ${status}. Please use one of t
• Header "${headerName}" with value "${headerValue}" is not al
• Header "x-forwarded-port" must be a numeric value.
• Header "x-forwarded-proto" must be either "http" or "https".
• Header "x-forwarded-prefix" is invalid. It must start with a

AI-assisted analysis of angular/angular-cli@bb72145f9a (2026-08-30). Data as JSON: /api/errors/a56a7d225dd50ac5. Report an issue: GitHub.