DEV Community

Discussion on: Build Angular Like An Architect (Part 1)

View post
Collapse
 
milky2028 profile image
Tyler •

I would REALLY love to use this, but the builds keep failing because apparently it's not possible to hook into the CSS preprocessor's path resolver? This is a bummer. I hope someone other than me is able to figure this out.

Also, a question. Are these optimizations the same as what's in Ivy? Are they similar?

Collapse
 
steveblue profile image
Stephen Belovarich • • Edited

1) If you want to use a CSS preprocessor with a custom build it's a fairly DIY process, meaning you should write another build step just for that task. You have to run the preprocessor prior to the other build steps so ngc can build with the compiled css for production.

 concatMap( results => postCSS(options, context) ),
 concatMap( results => ngc(options, context) ),
 concatMap( results => closure(options, context) )

While the angular-rollup project doesn't conform to the Architect CLI yet, there are examples of how to use PostCSS and SASS respective API programmatically here. What I've done in the past is copy the src directory to a temporary directory, then run the css preprocessor, and then compile AOT for production. The compiler takes care of inlining the css in the AOT compiled code. It will inline whatever is in the css file each component is pointing to, minified or not.

2) No. IVY and Closure Compiler are mutually exclusive concepts. IVY is the codename for the compiler that outputs highly optimized code compared to the AOT compiler. Closure Compiler is a tool for optimizing the JavaScript either AOT or IVY spits out. Closure Compiler can be used with any JavaScript project and is essential for optimizing applications for production at Google. A project minified with Closure Compiler in ADVANCED_OPTIMIZATIONS mode will most likely produce a smaller bundle than a comparable tool like Uglify.