AOT generated scss.shim imported path && scss brackets bugs

[fisherspy]

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Following angular.io docs:

Using node_modules/.bin/ngc command to generate AOT code into /aot dir,

Include Path Bugs:

For example in home.ngfatory.ts it shows :

Actually the structure in AOT dir is:

The structure in App dir is :

SCSS brackets bugs:

In AOT mode, styles became a mess,

in component.scss.shim shows:



It has a pair of needless brackets compared to JIT mode, if I delete the brackets in head styles，all became normal

Expected behavior

SCSS Include expected behavior

SCSS brackets expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

AOT shows the same as JIT mode

Please tell us about your environment:

MacOS Serria, Visual Studio Code, NPM

• Angular version: 2.1.1
• Browser: [all ]
• Language: [TypeScript 2.0.3]
• Node (for AoT issues): 6.8.1
• Webpack: 2.1.0-beta.25

[DzmitryShylovich]

Hi. Can u pls provide a minimal repository with reproduction?

[robwormald]

Also, how are you running the SCSS compilation? do your components point to foo.css or foo.scss ?

[fisherspy]

@DzmitryShylovich I will try to make a demo, but I don't think aot files could be generated online,
@robwormald , my webpack configuration runs well in JIT mode, I'm using angular2-template-loader, and the scss compilation is:

the component code is:

[fisherspy]

@robwormald @DzmitryShylovich I know why now, I use scss in styleUrls, and with webpack sass-loader, app runs well in JIT mode using webpack. In AOT mode, I have to run ngc command first, and ngc compiled scss files to scss.shim.ts directly without any scss compilation. The scss.shim.ts include path is wrong, also In scss.shim.ts scss grammer exists(I thought 'shim' means scss is compiled).

[vicb]

@zhaxi does it means this issue can be closed ?

[fisherspy]

@vicb , I think it's a bug, cause ngc realize scss is style files, and add shim to scss files, but the include path and style code are not correct.

[0cv]

This is a dupe of #11688

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