Angular just released version 13, and it comes with all kinds of new features and updates. In this article, we will talk about all the new features that are available in Angular 13. Here’s everything you need to know about Angular 13 and its new features.
What’s new in Angular 13?
Here are some of the biggest changes in Angular 13, simplified for you to skim through:
- Angular rendering updates – View Engine has been replaced by the Angular Ivy Engine.
- Older output formats like View Engine specific metadata have been removed. APF now uses modern formats like ES2020.
- Component API has been simplified.
- Support for Internet Explorer has been stopped
- Support for TypeScript 4.4 has been added
- Node.js versions older than v12.20 are not supported
- Reactive Extensions for JavaScript (rxjs) v7 is supported
- Angular v13 supports the use of persistent build cache resulting in68% improvement in build speed.
- TestBed has been improved
- MDC-based components meet all accessibility standards
- v13 now supports Adobe Fonts
Angular v13 Features in Detail
Angular rendering updates
View Engine has been removed from Angular as of v13. View Engine has been removed.
It has been replaced by the Angular Ivy Engine, which is better and more reliable. It is said to be Angular’s next-generation compilation and rendering pipeline. This update has made Angular a little bit more lightweight.
By removing View Engine, Angular can also reduce reliance on ngcc in the near future. This results in a faster compilation in Angular 13, because metadata and summary files are not included.
Changes to Angular Package Format
Angular Package Format has been streamlined and modernized. V13 of Angular Package Format has been introduced, removing View Engine-specific code from packages. The APF also now uses modern JS formats like ES2020. This effectively ensures that library developers can expect leaner package output and faster execution. The APF has also been updated to support Node Package Exports. This can ultimately help you from relying on internal APIs.
Updates to Component API
The Ivy Engine will change the way you dynamically create components. Component API has been simplified. Before the changes, dynamically creating components required a lot of boilerplate code. The code can be drastically decreased with the new API.
Support for IE has been removed
This makes sure that apps will be smaller in size and can load faster since IE-specific polyfills and code paths. Angular 13 supports the use of persistent build cache by default, which improves speed by 68%.
This allows Angular to now support modern browser features such as CSS variables, web animations via native web APIs and more. The apps built with v13 will also be smaller and faster since IE-specific polyfills and code paths can be removed. There’s no need of differential loading. Developers and users get the best experience.
Changes to the framework
RxJS 7.4 is now default in Angular 13. Existing apps will have to be manually updated to 7.4. Additionally, support for TypeScript 4.4 has also been added since October 5. Versions older than 4.4.2 are not supported anymore. You can check this in package.json by searching for “typescript” to see the version.
Angular CLI improvements
A persistent build cache by default capability will now improve builds with Angular 13. Angular now supports the use of persistent build cache by default for new v13 projects which results in up to 68% improvement in build speed. To know more about how to enable this feature, check out the documentation.
Changes to Angular tests
TestBed has been improved. You can now expect faster results that are not as memory intensive, less independent, and more optimized.
Accessibility standards
The MDC-based components now meet all accessibility standards, especially in areas like contrast, touch targets, and more.
Other changes in Angular v13
Just like their support for inlining Google Fonts was introduced in Angular v11, Angular v13 now supports Adobe Fonts. This is great for improving the First Contentful Paint, which is one of the important factors of Google’s Core Web Vitals, a minor ranking requirement introduced in 2021.
Developers can get more insights into localization API thanks to the updated docs on angular.io. It has been made simpler to follow, we highly recommend you to check it out.
You can also dynamically enable or disable validators. The built-in validators can be disabled by setting the value to null. This is great when you build dynamic forms.
You can also restore history after canceled navigation. This new community feature allows the canceledNavigationResolution router flag to restore the computed value of the browser’s history when set to compute.
Other minor community contributions have also been added. The SwUpdate API is now more ergonomic. Language Service config can enable auto-apply optional changing on nullable symbol. For a complete list of community contributions, check out the full documentation.
How to update to Angular 13?
You can get Angular 13 by running ng update in your project. Angular has an update guide that you can use to get detailed instructions on updating to angular as well.
Our templates for Angular 13
Currently, we do not have templates that are built with Angular 13, but we shall update this article when we do. We will have some angular admin templates ready in the coming months, so check back if you’re interested. In the meantime check out these free Angular templates (older than v13).
Conclusion:
We hope this article was helpful. We’ve tried to make the features more simple to understand. For more details, you can always check out the complete Angular changelog here. For a detailed update guide, you can check out https://update.angular.io/
That’s it for now, until next time, happy coding!