What's new in Angular CLI 14.1?

Angular CLI 14.1.0 is out!✨

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

npm init / yarn create

It is now possible to create a new Angular CLI project by using:

npm init @angular
yarn create @angular

Using this avoids the need to install the Angular CLI package globally. The commands support the same options as ng new.

esbuild builder improvements

The new experimental builder that uses esbuild has been introduced in v14, but with some missing features.

Even if it is still not feature complete, the esbuild builder now supports service workers and Sass files.

It also allows declaring external dependencies with the new externalDependencies option. When dependencies are listed in this option, they are excluded from the generated bundle. Instead, the created bundle relies on these dependencies to be available during runtime.

So for example if you define externalDependencies: ['@angular/core'], then the @angular/core package will not be bundled, and you’ll need to include it on your page in another way.

This is useful if you want to run several Angular applications on the same page, and use import maps to load Angular itself just once (instead of loading it in every bundle).

You’ll find more interesting features in our article about the framework v14.1.0 release.

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