What's new in Angular CLI 13.1?
Angular CLI 13.1.0 is out!✨
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.jsonto recommend the Angular Language Service extension
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 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).
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="rtl" to the
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!
The proxy config now accepts comments in the
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.
@ninjasquad/hello are also allowed, but will create a directory named
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
If you agree, then the CLI runs
ng add @angular-eslint/schematics automatically.
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.