What's new in Angular CLI 16.0?

Angular CLI 16.0.0 is out!✨

If you want to upgrade to 16.0.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 (14.2.0 for example), and the target version (16.0.0 for example), and it gives you a diff of all files created by the CLI: angular-cli-diff/compare/14.2.0…16.0.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.

Standalone applications!

It is now possible to generate standalone applications with the CLI, thanks to the --standalone flag!

ng new my-app --standalone

This is great to start new projects 😍

now that the option is available, we switched all the exercises of our Angular training to use a standalone application with standalone components.

We also re-wrote our ebook entirely to now introduce standalone concepts from the beginning, and add the concept of modules only when it makes sense!

esbuild builder is now in developer preview!

The new builder that uses esbuild has been introduced in v14 but was experimental. It is now in developer preview, so you can give it a try. Even if some options are still unsupported, most of them are now available (autoprefixer and tailwind support have been added), and the builder should be usable.

To check it out in your project, replace @angular-devkit/build-angular:browser with @angular-devkit/build-angular:browser-esbuild, and run ng build. For a small application, on a cold production build (after ng cache clean), the build time went from 13s to 6s on my machine. For a larger application, the build time went from 1m12s to 32s 🤯.

Note that the esbuild builder now uses Vite under the hood for the development server. Even if the integration is not 100% complete and optimized, it is promising to see this Webpack alternative being used in the Angular ecosystem.

Functional guards and resolvers by default

The CLI now generates functional guards and resolvers by default, without the need to specify --functional anymore. Class-based guards and resolvers are still available with the --no-functional option, but as they are now deprecated, you’re encouraged to use the functional ones.

Jest experimental support

The CLI now supports Jest as a test runner, but it is still experimental.

To check it out in your project, replace @angular-devkit/build-angular:karma with @angular-devkit/build-angular:jest, and run ng test.

The support is far from being complete, but it is promising. It uses the new esbuild builder under the hood, and the support should improve in the next releases.

Jest does not run in a browser and uses JSDOM instead. That means that you don’t have the same experience that you can have with Karma, but as Karma is now deprecated, an alternative is welcome.

The Angular team also announced that they are working on the support of Web Test Runner, to have an alternative to Karma that runs in a browser.

Bye-bye compileComponents!

The compileComponents call generated in the unit tests of the CLI is now gone, as it was useless since the very beginning if you were running your tests with the CLI. My PR to remove it was merged in the framework, and the CLI now generates tests without it 🤓.

Optional migrations

The CLI now supports optional migrations and will ask you if you want to run them when you upgrade to a new version.

SSR support

A ton of work has been done to improve the SSR story with the CLI, along with what the framework team did with the progressive hydration.

For example, it is now possible to add universal or to generate an app-shell with the CLI for a standalone application.

Summary

That’s all for the CLI v16.0 release! You’ll find more interesting features in our article about the framework v16.0.0 release.

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