Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

misleading error message: Cannot use Javascript or TypeScript file in styleUrl #12693

Closed
lygaret opened this issue Oct 22, 2018 · 1 comment · Fixed by #12911
Closed

misleading error message: Cannot use Javascript or TypeScript file in styleUrl #12693

lygaret opened this issue Oct 22, 2018 · 1 comment · Fixed by #12911
Labels
area: ngtools/webpack freq1: low Only reported by a handful of users who observe it rarely severity1: confusing type: bug/fix
Milestone
Backlog

Comments

@lygaret
Copy link

lygaret commented Oct 22, 2018

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

When the templateUrl option in a component is accidentally pointing at a typescript file, the error message says that there's an issue in a styleUrl option somewhere, which causes confusion and way more time tracking down the issue than should be given the simple-typo nature of the mistake.

Command (mark with an x)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Angular CLI: 6.2.0
Node: 10.0.0
OS: linux x64
Angular: 6.1.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.8.0
@angular-devkit/build-angular      0.8.0
@angular-devkit/build-optimizer    0.8.0
@angular-devkit/build-webpack      0.8.0
@angular-devkit/core               0.8.0
@angular-devkit/schematics         0.8.0
@angular/cdk                       6.4.7
@angular/cli                       6.2.0
@angular/flex-layout               6.0.0-beta.18
@angular/material                  6.4.7
@angular/material-moment-adapter   6.4.7
@ngtools/webpack                   6.2.0
@schematics/angular                0.8.0
@schematics/update                 0.8.0
rxjs                               6.3.2
typescript                         2.9.2
webpack                            4.17.2

Repro steps

  1. Create a component,
  2. List a '.ts' file as the templateUrl (accidentally).
  3. ng serve fails with ERROR in Cannot use JavaScript or TypeScript file in styleUrl.

Note that the error message says the issue is in a styleUrl option somewhere, when the actual issue is in the templateUrl option.

import { Component } from '@angular/core';

@Component({
    selector: 'client-profile-profile-page',
    templateUrl: './profile.component.ts',    // <-- TYPO
    styleUrls: ['./profile.component.scss']
})
export class ProfilePage {
  // ...
}

The log given by the failure

ℹ ｢wdm｣: Compiling...
                                                                                          
Date: 2018-10-22T15:32:18.117Z - Hash: 2169e807308f48ead471 - Time: 2074ms
5 unchanged chunks

ERROR in Cannot use a JavaScript or TypeScript file for styleUrl.
ℹ ｢wdm｣: Failed to compile.

Desired functionality

  1. Compile fails with ERROR in Cannot use JavaScript or TypeScript file in templateUrl or styleUrl

I lost about 45 minutes trying to figure out which styleUrls declaration had the typo, and eventually figured it out due to being given a circular dependency warning on a file to itself.

Mention any other details that might be useful

angular-cli/packages/ngtools/webpack/src/resource_loader.ts

Line 52 in 8bbba9d

return Promise.reject('Cannot use a JavaScript or TypeScript file for styleUrl.');

@lygaret lygaret mentioned this issue Oct 22, 2018
Closed
@alan-agius4 alan-agius4 added type: bug/fix freq1: low Only reported by a handful of users who observe it rarely severity1: confusing area: ngtools/webpack labels Oct 22, 2018
@ngbot ngbot bot added this to the Backlog milestone Oct 22, 2018
@alan-agius4 alan-agius4 mentioned this issue Nov 9, 2018
Merged
kyliau pushed a commit that referenced this issue Nov 14, 2018
@alan-agius4
fix(@ngtools/webpack): update error message to reference templateUrl
747b751 
Fixes #12693
kyliau pushed a commit to kyliau/angular-cli that referenced this issue Nov 14, 2018
@alan-agius4 @kyliau
fix(@ngtools/webpack): update error message to reference templateUrl
7a643b1 
Fixes angular#12693
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
ikjelle pushed a commit to ikjelle/angular-cli that referenced this issue Mar 26, 2024
@alan-agius4
fix(@ngtools/webpack): update error message to reference templateUrl
a7f8de5 
Fixes angular#12693
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: ngtools/webpack freq1: low Only reported by a handful of users who observe it rarely severity1: confusing type: bug/fix
Projects
None yet
Milestone
Backlog
2 participants
@lygaret @alan-agius4