2021-12-10

What's new in Angular CLI 13.1?

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

Visual Studio Code

New CLI projects now come with .vscode folder, with some configuration files:

extensions.json to recommend the Angular Language Service extension
launch.json and tasks.json with pre-configured ng serve and ng test tasks.

You can now directly click on the ng serve or ng test button in VSCode, and it will launch the corresponding command in the terminal.

ng build

ng build now outputs the estimated “transfer size” of the generated bundles:

Initial Chunk Files           | Names              |  Raw Size | Estimated Transfer Size
main.536fb80615f25015.js      | main               | 336.99 kB |                89.09 kB

The estimated transfer size is determined by calculating the compressed size of the file using brotli’s default settings. This gives you a more accurate view of how much a user would have to download when the application is served in production with compression enabled.

There is another improvement if you use budgets and one of the bundles is failing the requirement you defined. The file will now be colorized in the output of the command (yellow for warnings, red for errors).

i18n

The HTML dir attribute is now automatically set by the CLI when you build localized versions of the application.

The CLI will attempt to read this information from the locale data embedded in Angular (@angular/common/locales), and will add dir="ltr" or dir="rtl" to the html element, based on the locale.

ng build --localize

ng serve also has an improvement for the internationalization support, as it now watches the translation files. It used to be painful, as you had to restart the server every time you changed a translation. This is now much easier, as the CLI reloads the application when you change a translation file!

ng serve

The proxy config now accepts comments in the proxy.conf.json file.

ng new

The CLI has relaxed the constraints on the name of a new project. It used to be quite restrictive, but it now follows the same restrictions that NPM has for package names. So you can now use nearly any name you want, as long as it does not start by a number. Names like @ninjasquad/hello are also allowed, but will create a directory named ninjasquad/hello.

ng lint

As you may recall, there is no linter anymore in Angular CLI by default. So you have to set one up manually, and everybody is using angular-eslint these days.

The CLI improved the error message when running ng lint in a project without linter configured. The lint command will now ask if you want to install @angular-eslint/schematics. If you agree, then the CLI runs ng add @angular-eslint/schematics automatically.

ng update

You now get an error if you try to update across multiple major versions. So if your application is using Angular 11 and you try to update to Angular 13, you’ll see:

Updating multiple major versions of '@angular/core' at once is not supported. Please migrate each major version individually.
Run 'ng update @angular/core@12' in your workspace directory to update to latest '12.x' version of '@angular/core'.

For more information about the update process, see https://update.angular.io/?v=11.0-12.0

You then have to update first to Angular 12, then to Angular 13.

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