AoT build using preprocessor for CSS

[maxailloud]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [] feature request

Versions.

@angular/cli: 1.0.0
node: 7.9.0
os: darwin x64
@angular/animations: 4.1.1
@angular/common: 4.1.1
@angular/compiler: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/platform-server: 4.1.1
@angular/router: 4.1.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.1.1

Repro steps.

Basically just trying to do an AoT build while using sass files in components.
Here is the issue on the angular repository to show you.

Desired functionality.

It's not really a bug, it's more a need of documentation update.
Maybe warn people that using preprocessors for css in their component will make their app not available for AoT build, and will need additional step to build this way.
Except if I miss something, like a specific option or something in angular-cli to handle this case. If that's the case sorry to bother.

And maybe point out a solution for dealing with this case, if there is one already done of course. And I mean in the documentation near the AoT section.

As preprocessors are supported by angular-cli I find it a little bit weird that AoT build doesn't support it. There is a good reason for ngc to not support it, can't do it for every preprocessor that exist, but angular-cli can provide something to bypass this limitation.

[clydin]

The CLI supports CSS, LESS, stylus, SASS/SCSS in both JIT and AOT mode.
ng build --prod is all that is needed to create an AOT build with the CLI. It will process the stylesheets, compile in AOT mode, bundle/minify/etc.

The ngc tool is not needed when using the CLI. The ngc tool is meant to be a focused utility that can be integrated into a larger custom build setup.

[maxailloud]

Ok great, makes sense.
So the cookbook about AoT is useless if we use CLI, right?
Because I found this issue when making the boostrap of my app AoT compliant.

So I may have to find why I'm having trouble making i18n work.

Thank you for your answer.

[clydin]

Correct.
A new CLI based project (ng new) supports AOT with no additional changes. It handles the bootstrapping and configuration for you.

[maxailloud]

Ok cool thanks.

Closing now.

[mmathys]

@clydin A few questions:

• Does version 1.0.3 support this?
• When running ng build --prod, how do I run the AOT server?

[clydin]

Yes, this is supported in 1.0.3. Initial AOT support was introduced in 1.0.0-beta.16.

There is no AOT server. You can deploy the files produced in your output directory ("dist" by default) as you would normally.

[clydin]

If by AOT server you mean for development via 'ng serve', you can run it in production mode or with just AOT enabled via the '--aot' command option.
Note that rebuild times will be significantly increased in this configuration currently. It is recommended to not run this way for development purposes at this time and use AOT as a production optimization.

[mmathys]

So, executing these commands should produce a working AOT app?

ng new test && cd test

ng serve --prod --aot

For me, this only results in a JIT build. :( any ideas @clydin?

[clydin]

The only major difference from a user perspective will be faster bootstrapping time. Bundles should in most cases be smaller as well.

Also note that '--prod' includes '--aot'.

[mmathys]

Oh, so Angular AOT != Angular Universal?

[deebloo]

@mmathys correct. AOT stands for Ahead of Time, so running the template compiler at build time.

[mchambaud]

How do you make this work for sass files which are in node_modules..?

What if you aren't using angular-cli (which forces the use of webpack)?