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!



blog comments powered by Disqus