DEV Community

Build Angular Like An Architect (Part 1)

Stephen Belovarich on April 02, 2019

I 🤓 out on build tooling. Since Angular 2 was in released I've been experimenting with different ways to build apps. Most developers don't need to...

Read full post

Miloš Stevanović • Jul 20 '22 • Edited

Is it still possible to build angular with closure, or this is no longer valid since they decommissioned advanced optimization support in version 10: github.com/angular/angular/issues/... ? Are you still using closure, or some other custom builder or you are just relying only on default angular ivy build optimizer and no need for additional tree shaking and minification? Sorry if I'm missing something, but I didn't see a followup anywhere on this topic since angular 10 release, neither on dev.to or in your ngr github project.

Stephen Belovarich • Jul 21 '22

I haven’t tested closure with later versions of Angular since this post. tsickle was the tool that enabled TypeScript to emit what was necessary for closure compiler to receive the annotations it needed for ADVANCED. Since this post was written the Angular team has lost and gained members, reprioritized certain initiatives. AFAIK closure compiler is still used at Google so there has to be some level of support for it internally, but I haven’t kept up with what changes are needed to the configuration of a project, if any. Sorry I can’t be if more help. The methods in this tutorial should overlap with getting other build tools to work.

David Camdzic • Apr 7 '19 • Edited

Great post :) Much appreciated for spreading the knowledge :) This architect API couldn't have come at a better time.

Just a side note. With the latest ng cli I also needed to npm i -g @angular-devkit/core@next as otherwise the build was complaining of missing includes.

Also build.sh was missing the following at the last line (from github repo master branch):
cp src/closure/schema.json dist/src/closure/schema.json

Stephen Belovarich • Apr 8 '19 • Edited

Added @angular-devkit/core to the install instructions and issue fixed on the master branch. You were totally right!

Tyler • Sep 4 '19

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?

Stephen Belovarich • Sep 5 '19 • 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.

Sebastián Duque G • Apr 23 '20

Sir, this is GOLD!

Ville M. Vainio • Jul 2 '19

Fyi, referred to the article (and namely one snippet) from my post dev.to/vivainio/rxjs-and-angular-i...

Yuri Katkov • Oct 15 '19

Oh man, such a pile of crotches so far... Thanks for putting it all together. Also I have a question: did you notice the performance increase on scripting time when you applied Closure compilation?

Stephen Belovarich • Oct 29 '19 • Edited

It depends on the complexity of the app. It's not so easy to code split an application in order to lazy load with closure compiler, but it is possible. No matter what build I've thrown at closure, it always outperforms other tools, even if its only 5%-10% size reduction. 10% size reduction for the bundle can go a long way for some users on mobile.

Negreanu Calin • Oct 27 '21

Nice one

Subodh Kumar • Oct 29 '19

thanks a lot for such a detailed blog!!!!

Stephen Belovarich • Oct 29 '19

You're very welcome. I know how frustrating it can be when some of the pieces of the puzzle are missing.