What's new in Angular 13.3?
Angular 13.3.0 is here!
This is a minor release, mainly to support TS v4.6. But it also comes with a few improvements that are worth exploring: let’s dive in!
TypeScript 4.6
The reason of this v13.3 release is the support of TypeScript v4.6. TS v4.6 was released in February, and the Angular team did not wanted to wait for the v14 release to support it (scheduled in May).
If you want to use the new es2022
target, the improved control flow analysis or
the possibility to call code before super()
in constructors, you now can.
Here are the full release notes if you want to learn more about the new TypeScript version.
Bundle size
The team refactored the codebase to make some errors, providers and tokens tree-shakable and removed a few useless classes (now that IE is no longer supported). This should lead to slightly lighter bundles.
The code generated by the compiler has also been improved to allow chaining some instructions.
For example, consider a template like <div><div><a>Hello</a></div></div>
.
Angular v13.2 generated:
// simplified compiled template in ng v13.2
elementStart(0, "div");
elementStart(1, "div");
element(2, "a");
elementEnd();
elementEnd();
Now, Angular v13.3 generates:
// simplified compiled template in ng v13.3
elementStart(0, "div")(1, "div")
element(2, "a");
elementEnd()();
This can make a little difference depending on your templates, but not that much, as the code that was previously generated was compressing very well.
Forms
It is listed as a fix rather than a new feature, but I think this is noteworthy if you’re using ngModel
in forms: you can use a non-null assertion in the “banana-in-box” syntax:
<input [(ngModel)]="user.name!" />
<!-- same as -->
<input [ngModel]="user.name!" (ngModelChange)="user.name = $event">
This of course works for the “banana-in-box” syntax in general,
not only with ngModel
.
That’s all for this release, stay tuned!
All our materials (ebook, online training and training) are up-to-date with these changes if you want to learn more!