What's new in Angular CLI 12.2?

Angular CLI 12.2.0 is out!✨

If you want to upgrade to 12.2.0 without pain (or to any other version, by the way), I have created a Github project to help: angular-cli-diff. Choose the version you’re currently using (12.0.0 for example), and the target version (12.2.0 for example), and it gives you a diff of all files created by the CLI: angular-cli-diff/compare/12.0.0…12.2.0. It can be a great help along with the official ng update @angular/core @angular/cli command. You have no excuse for staying behind anymore!

Let’s see what we’ve got in this release.

ng build is faster than ever thanks to esbuild

The CLI now leverages esbuild to build your Angular application. esbuild is the new hot thing in web development, with its unmatched speed of compilation, and we start to see some popular tools, like vite, built on top of it.

The CLI now uses esbuild to optimize the built code, in combination with terser. esbuild is way faster than terser, but does not cover all the optimizations that terser does. So the CLI now optimizes the code in two phases:

• first, it runs esbuild (to remove useless code, and shorten identifiers)
• then, it runs terser on the optimized code from esbuild (hence on a smaller input size, and with less optimizations to do)

The CLI also uses esbuild to optimize the CSS of component stylesheets. esbuild is way faster than CSSNano, and usually produces smaller outputs. The global stylesheets are still optimized with CSSNano though, but may be migrated to esbuild as well in the future if sourcemap support is implemented.

How faster is it then? As a quick benchmark, I built one of the largest project I work on:

• CLI v12.1: 1min57s for ng build
• CLI v12.2: 1min35s for ng build

This is a 20% improvement on the total build time! 🚀 It does output slightly bigger JS files for me though (~1-2% larger main bundle).

Sass deprecation warnings

If you’re using the scss style, you may have noticed that dart-sass (that the CLI uses under the hood) now shows warnings for Sass files than are using the deprecated / operator.

And boy, oh boy, does it output a lot of warnings. We’re using Font Awesome in some projects, and the CLI is logging hundreds and hundreds of lines.

Good news: the CLI v12.2 hides the warning for third party stylesheets (like Font Awesome). You can still see them with the --verbose flag.

That’s all for this release! You can check what’s new in the framework for this v12.2 release in our other blog post.

All our materials (ebook, online training and training) are up-to-date with these changes if you want to learn more!