AOT: SCSS files are imported in GenDir but linking is wrong

[0cv]

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

[ x ] bug report => search github for a similar issue or PR before submitting

Current behavior
when running AOT, files are successfully generated in the dist directory. However, the imports are wrong as we can see on this picture:

We can see that the file *.scss.shim.ts is located in the same directory, but instead the compiler expects to find this file in my original directory, i.e. not under dist, but under src

Expected behavior
the line above shall be written instead
import * as import16 from './edit-audience.scss.shim';

Reproduction of the problem
This is how my source file is looking:

@Component({
  selector: 'edit-audience',
  styleUrls: [ './edit-audience.scss' ],
  templateUrl:  './edit-audience.html'
})

What is the motivation / use case for changing the behavior?
Currently not working. It seems that only inline CSS (or is this because it's SCSS?) is working.

Please tell us about your environment:
Mac, latest version of the compiler-cli: 0.6.2

• Angular version: 2.0.0
  2.0.0 (but compiler cli 0.6.2)
• Language: TypeScript
• Node (for AoT issues): node --version = 6.2.0

[vicb]

Please include a repro.
What version of typescript do you use?

[0cv]

Typescript version is 2.0.2. Will try to reduce to just the necessary and post it when it's reproducible.

[0cv]

OK: Archive.zip
1- npm run install
2- npm run ngc

Compilation will actually fail but you will see in the generated files that the path is incorrect like shown above

[aedensixty]

I get this same problem. Is there a solution yet?

[0cv]

@IgorMinar , Just seen you have flagged the issue with "need: repro", but it's available in the comment just above, as a zip file #11688 (comment).

@aedensixty , I have not tried further as I'm running in other issues when doing AOT but, it seems that .css files are not affected, hence renaming scss to css and then changing your webpack config accordingly could make the trick...

[aedensixty]

@Krisa I am just doing a gulp-sass build to create css and refer to them to begin with as a workaround for the moment until there is a fix.

[daniele-zurico]

Any news on that? I'm experiencing the same problem. Here a repro

[BrainCrumbz]

Have no proper repro, but we too are hitting this same issue. Loaders order for .scss files is:

loaders: ['raw-loader', 'postcss-loader', 'sass-loader'],

As for others, .shim.ts file is generated under my codegen directory subtree, but generated .directive.ngfactory.ts component is trying to import that from the original src subtree.

The original .directive.ts component is including the SCSS file through styleUrls.

HTH

[Reiss-Cashmore]

The Relevant error you will receive in the console for this bug looks like this

Error: Error at */aot/app/app.component.ngfactory.ts:16:26: Cannot find module '../../app/app.style.scss.shim'. at check (*/node_modules/@angular/tsc-wrapped/src/tsc.js:31:15) at Tsc.typeCheck (*/node_modules/@angular/tsc-wrapped/src/tsc.js:86:9) at */node_modules/@angular/tsc-wrapped/src/main.js:33:23 at process._tickCallback (internal/process/next_tick.js:103:7) at Function.Module.runMain (module.js:577:11) at startup (node.js:159:18) at node.js:444:3 Compilation failed

Still struggling with this and have come to the same conclusion as @aedensixty . I am running a task with Gulp ( Can be done with Webpack also) that Processes all .scss files in the project and outputs a .css in the same directory. Then in your Component reference the generated .css file.

@Component({
    moduleId: module.id,
  selector: 'app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.style.css']
})

Then after this you can run ngc.

This is strange though because you can use the angular-cli to build a project in AoT mode:

ng build --prod --aot

with scss files in the styleUrls:[] field. If you call this beforehand:

ng set defaults.styleExt scss

This build will complete fine with the Tour of Heroes - 6 example from the angular.io repo. I don't know how angular-cli is achieving this. Probably a custom workflow where webpack is perhaps doing what is described above and processing the SCSS into CSS and changing/removing the reference in the styleUrls (Maybe by inlining the styles instead) before ngc runs.

One of the reasons I am not using angular-cli to build my app is because it produces a 800Kb non-gzipped bundle when run in --prod and --aot mode. When I build my project with pre-processed SCSS -> CSS using ngc & rollup as in the docs I get a 200Kb bundle. I'm going to guess the cause of this is inferior Tree Shaking. The angular-cli project says in its readme that it performs tree-shaking but I believe it uses Uglify which I've read does a "dumb" tree shake versus rollup's more intricate and better-suited tree shake. This is me speculating based off my limited knowledge and is no way based on an intricate understanding of angular-cli, uglify or rollup. Just what I have read.

Such a shame as this is a reason making me apprehensive me using Angular 2 in a production build for a client. AoT Compilation seems so fragile and buggy and Angular 2 is not really viable in the big bad world of development world without a stable AoT Compilation pipeline when there are much more stable competitors. Please set a milestone. I will happily try to fix this problem but I think my competency and knowledge of the compiler is miles away from where it would need to be. If someone wants to direct a dumb pair of monkey hands to where the problem / lack of support for SASS/SCSS might be I'll definitely take a look and if I make any progress submit a PR.

As for now I'll be processing my .SCSS in a custom workflow in gulp.

I am just putting my experiences and error log here to help anyone who comes across this. As trying to find info about this issue is practically impossible. I have been contending with it for a good 10-15 hours of solid time before finally finding this after an intense session with google and realising it's not my setup or config.

[DzmitryShylovich]

@Krisa is this still valid in angular 4? can you please update your example? thanks

[0cv]

@DzmitryShylovich Thanks for coming back on this one. To be honest, I'm not sure whether it's still relevant. I've now switched to the Angular CLI which handles well SCSS. So I'm going to close it.

[mchambaud]

It's still happening. CLI Handles SCSS well so ng serve works fine, but if you throw in ngc in the loop the error comes back

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