Skip to content

Style URL pointing to a TypeScript file gives a confusing error #32193

@HazzMan2409

Description

@HazzMan2409

Command

build

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I was doing something silly and accidentally pointed to my components TypeScript file instead of its CSS file.

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.ts'
})

And I got a bunch of TypeScript compilation errors to do with rxjs:

✘ [ERROR] Could not resolve "./internal/operators/skipUntil" [plugin angular-compiler]

    node_modules/rxjs/dist/esm5/index.js:140:26:
      140 │ export { skipUntil } from './internal/operators/skipUntil';
          ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] Could not resolve "./internal/operators/skipWhile" [plugin angular-compiler]

    node_modules/rxjs/dist/esm5/index.js:141:26:
      141 │ export { skipWhile } from './internal/operators/skipWhile';
          ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] Could not resolve "./internal/operators/startWith" [plugin angular-compiler]

    node_modules/rxjs/dist/esm5/index.js:142:26:
      142 │ export { startWith } from './internal/operators/startWith';

I think this error message is confusing (and because I had a large diff at this point it took me a long time to figure out what I'd done wrong).

Can we not assert the file extension is what is expected for URL properties in a component decorator and give a better error message?

Minimal Reproduction

Point a components styleURL to its TypeScript file.

Exception or Error


Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI       : 21.0.4
Angular           : 21.0.6
Node.js           : 22.17.1
Package Manager   : npm 10.9.2
Operating System  : darwin arm64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 21.0.4            │ ^21.0.4           │
│ @angular/cli              │ 21.0.4            │ ^21.0.4           │
│ @angular/common           │ 21.0.6            │ ^21.0.0           │
│ @angular/compiler         │ 21.0.6            │ ^21.0.0           │
│ @angular/compiler-cli     │ 21.0.6            │ ^21.0.0           │
│ @angular/core             │ 21.0.6            │ ^21.0.0           │
│ @angular/forms            │ 21.0.6            │ ^21.0.0           │
│ @angular/platform-browser │ 21.0.6            │ ^21.0.0           │
│ @angular/router           │ 21.0.6            │ ^21.0.0           │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 5.9.3             │ ~5.9.2            │
│ vitest                    │ 4.0.16            │ ^4.0.8            │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else relevant?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions