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 fromng update
has been removed without replacement--prod
option has been removed from all builders.--configuration production
/-c production
should be used instead.showCircularDependencies
option fromng build
has been removed without replacementdefaultProject
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!