What's new in Angular CLI 14?

Angular CLI 14.0.0 is out!✨

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

Autocompletion

The first time you’re going to run an ng command in your terminal, you’ll see that Angular CLI will ask about setting up the autocompletion. If you accept, then pressing <TAB> after typing ng will list the available commands and options. However, this works only for Bash and Zsh shells on macOS and Linux operating systems.

If you don’t want to enable it and then change your mind, you can run ng completion to set it up manually.

esbuild builder

A new experimental builder that uses esbuild instead of Webpack has been introduced.

You can give it a try by replacing @angular-devkit/build-angular:browser with @angular-devkit/build-angular:browser-esbuild in your angular.json file. Note that the new builder is far from being complete. It does not support a bunch of options (and does not understand Sass for example).

These are very early days of course, but you can give it a try if you’re curious. It looks very promising, and we can hope for a faster builder in the future that would rely on esbuild. And, who knows, a CLI that uses Vite instead of Webpack (check out our article about Vite to learn more).

ng cache

A new ng cache command has been added to manage the cache system introduced in CLI v13 (see our article).

This new command has 4 subcommands:

• ng cache enable to enable the cache.
• ng cache disable to disable the cache.
• ng cache clean to delete the cache from disk (useful when switching branches and Webpack gets lost).
• ng cache info which will print statistics and information about the cache.

ng generate

ng generate has a new --standalone flag to generate standalone components/pipes/directives.

It is now also possible to specify multiple schematics collections with schematicCollections in your angular.json file (instead of the now deprecated defaultCollection).

"cli": {
  "schematicCollections": ["@schematics/angular", "@angular/material"]
}

The CLI will then look for schematics in the specified list, following the order of priority (the first schematic wins).

ng e2e, lint and deploy

The ng e2e, ng lint, and ng deploy don’t come with an implementation as you may know. All these commands now ask you what implementation you’d like to add when you run them for the first time. ng lint only offers ESLint, but ng e2e lets you pick between Cypress/Nightwatch/WebdriverIO, and ng deploy between Amazon S3/Azure/Firebase/Netlify/NPM/GitHub Pages.

Fun with flags

Some deprecated options have been removed and a schematic will automatically take care of migrating your project:

• --all option from ng update has been removed without replacement
• --prod option has been removed from all builders. --configuration production/-c production should be used instead.
• showCircularDependencies option from ng build has been removed without replacement
• defaultProject workspace option has been deprecated (the default is now the current working directory)

Note that the flag parser of the CLI changed and that camelCase arguments are no longer supported: for example, you need to write ng g c hello --skip-selector instead of ng g c hello --skipSelector.

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

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