styleUrls resolve issue (when building with AoT & have custom naming)

[playerx]

Versions

Angular CLI: 1.5.5
Node: 8.9.1
OS: win32 x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.5
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.41
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.5
@schematics/angular: 0.1.10
@schematics/schematics: 0.0.10
typescript: 2.4.2
webpack: 3.8.1

Repro steps

• Create a new app using angular cli ng new test
• Change app.component.css -> app.component.ts.css (filename & styleUrls in ts file)
• Build with AoT, ng build --prod or ng build --aot

Observed behavior

Build process just stops, without any error, after few seconds.

$ ng build --prod
Done in 6.07s.
$ 

$  ng build --aot
10% building modules 7/7 modules 0 active
$ 

Desired behavior

Build for production and get output files in dist folder

Mention any other details that might be useful (optional)

Also tried -v parameter but didn't get any other output, same result.

[clydin]

The observed behavior is definitely incorrect. Out of curiosity, what is the use case for adding a .ts extension to the .css filename?
Also, to further investigate, what is the content of the file in question; or were no other changes done to the new project?

[playerx]

Hi @clydin, we use Visual Studio and it makes file nesting out of the box if one file name contains another file name. So there are two reasons why we want to keep such naming:

1. File nesting really helps us (and vs code doesn't have file nesting yet)
2. Code base is big and we don't want to change names to all files

content of css file is empty, no other changes are needed, right now I've tried in macOS and same issue:

Green:xx ez$ ng build --prod
 10% building modules 5/5 modules 0 activeGreen:xx ez$
Green:xx ez$ ng -v

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

Angular CLI: 1.6.0
Node: 8.9.0
OS: darwin x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.0
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.41
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.10
@schematics/schematics: 0.0.10
typescript: 2.4.2
webpack: 3.10.0

[oguimbal]

For the record (i'm closing #8904): this happens with all files that require a loader.
i.e:

• Does NOT happen on styleUrls with .ts.css files
• DOES happen on templateUrl with .ts.pug files (if you use pug template files... i do)

And @clydin for me, i'm naming like that because .ts.pug & .ts.scss files pop below their .ts counterpart in vscode (sorted alphabetically).
And because I wanted to make sure that .scss & .pug files would nest under .ts when vscode will support file nesting (and not the other way around, as .ts is last in alphabetical order)

Full 1-click step to reproduce the issue:

ng new tsbug --style=scss
cd tsbug
mv src/app/app.component.scss src/app/app.component.ts.scss
sed -i 's/.scss/.ts.scss/g' src/app/app.component.ts
ng build --aot

[pit1188]

I have same problem and can't update my project to latest angular version. It will be perfect to fix this issue in 6.0

[filipesilva]

Just tried with app.component.ts.scss and it seems like the build finishes successfully now.

[angular-automatic-lock-bot]

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.}