What's new in Angular CLI 15.1?
Angular CLI 15.1.0 is out!✨
If you want to upgrade to 15.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 (14.2.0 for example), and the target version (15.1.0 for example), and it gives you a diff of all files created by the CLI: angular-cli-diff/compare/14.2.0…15.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.
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 is making progress.
It now supports Sass inline styles. Less is not supported yet.
It also supports the --stats-json
option
which is useful to generate a JSON file with the build stats.
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 🤯.
ng generate environments
A new schematic has been added to add environment files to an application. If you are a returning reader, you know that the environment files have been removed from a new application in v15, and you now have to add them yourself.
The new schematic can be used to simplify the task:
ng generate environments
This will create the environments
folder with the environment.ts
and environment.development.ts
files, and update the angular.json
file to use the development
environment file when using the development configuration:
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.development.ts"
}
]
Notice that this is different from what the CLI used to generate by default,
where the environment.ts
file was used for the development configuration,
and an environment.prod.ts
file was used for the production configuration.
The CLI team thinks this is more aligned with the current naming choices,
as prod
is not a configuration.
ng generate config
Another new schematic has been added to generate the configuration files that are now hidden by default since v15.
You can use:
ng generate config karma
to generate the karma.conf.js
file, and:
ng generate config browserslist
to generate the .browserslistrc
file.
ng generate interceptor
ng generate interceptor
can now generate an interceptor with the --functional
option.
This will generate a functional interceptor, which is a new feature in Angular v15.
ng generate interceptor --functional authentication
ng generate guard
ng generate guard
now supports the --guardType
option, which is the same as --implements
,
but makes more sense when you’re generating a functional guard (as they are not implementing an interface).
ng generate guard --functional --guardType CanActivate logged-in
The guards as classes are probably going to be deprecated really soon,
so --functional
will be the default and --implements
will be removed.
Summary
That’s all for the CLI v15.1 release! You’ll find more interesting features in our article about the framework v15.1.0 release.
All our materials (ebook, online training and training) are up-to-date with these changes if you want to learn more!