Issues feeding precompiled css into ngc to support aot unit testing

[J-Swift]

Not sure if this should be opened in the angular repo or here, so I apologize if I picked the wrong one!

Bug Report or Feature Request (mark with an x)

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

Area

- [x] devkit
- [ ] schematics

Versions

node: v8.11.2
npm: 5.6.0
macOS: v10.13.5

Repro steps

repo: https://github.com/J-Swift/sass-repro

run sh ./test-aot.sh in sass-repro

The log given by the failure

[11:43:49] Using gulpfile [...]/gulpfile.js
[11:43:49] Starting 'compile-sass'...
[11:43:49] Finished 'compile-sass' after 7.44 ms
: Couldn't resolve resource variables from [...]/src/app/app.component.scss

Desired functionality

I'm trying to add aot support for unit tests. I've read the relevant conversations on github that have come to the conclusion that official support is not ready to go live:

#6650
#8007
#8259

So, I've adapted an example from @Quramy (the author of the PR to add aot unit test support) found here:

https://github.com/Quramy/test-with-aot-summary

The problem I'm running into is that (as you know) ngc does not support sass compilation, and so you need to run this manually before invoking the ts compilation. I've seen your team say in multiple conversations on github that compiling the sass before ngc is the intended workflow, but I can't figure out how that is supposed to work to get ngc to then use the compiled css files instead of the scss files specified in a component's styleUrls.

Is the manner which I'm going about the preprocessing in line with how your team thinks I should be manually compiling my sass? Is there something I'm missing that I need to be doing to feed the output of sass compilation into ngc? Any help / further guidance on this is much appreciated!

[filipesilva]

Heya, the right place to post this type of issue (ngc related) is the https://github.com/angular/angular repo.

That being said, the problem you're experiencing is intended I think. The components themselves still list the scss in styleUrls, which is something Angular CLI supports but ngc does not.

So if you wanted your approach to work, you'd have to manually go and change all the styleUrls to reference .css files instead of .scss each time you wanted to run your unit tests.

That's obviously not great, but the approach you're taking doesn't really have a good way to deal with this.

At the end of the day the real issue is that Angular CLI does not support testing with AOT, and the reason we don't support that is because there is no official support. I'm sorry to say that until there is official support I don't really see us trying to make these approaches work.

[J-Swift]

Thank you for taking the time, even though as you point out, you aren't the one responsible for the issue @filipesilva!

That's really unfortunate that its not planned to be supported. I'll keep an ear out for any updates on that front.

Thanks again.

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