On November 3, 2021, Angular released its latest production version, Angular 13, more than five months after the preceding upgrade. To access the new version, developers must execute the command ‘ng update’ in their projects.
Angular developers, often referred to as Angularites, had been eagerly awaiting the release of this Angular upgrade, as it promises to revolutionise the way components are designed by eliminating the view engine completely and offering a simpler approach.
This tutorial delves further into the important enhancements included in Angular’s most recent version.
Angular 13 is now fully Ivy
Angular 13 has made a significant advancement by eliminating the view engine, thus making the framework entirely Ivy-based. This has resulted in a faster compilation process and increased productivity.
Developers who create libraries using Angular must ensure that their code is kept up-to-date in order to remain current with the Angular upgrade. This necessitates switching from “enableIvy:false” to “compilationMode:partial” in order to ensure that their libraries remain compatible with the latest version of Angular.
The API in Angular 13 has been simplified
Previously, developers were required to employ a generic template to create code. With Angular 13’s IVY everywhere strategy, developers now have the ability to construct code dynamically.
Previously, in order to construct a component, developers had to inject ComponentFactoryResolver into the constructor. However, it is now possible to do so without constructing an associated factory by utilising ViewContainerRef.createComponent.
Here’s an illustration:
Angular v13 enhancements – Angular CLI enhancements
In Angular 13, all new projects will have persistent build-cache enabled by default.
As a consequence, construction speed has increased by 68 percent, with more ergonomic solutions available.
To activate this functionality, developers who are updating their applications to v13 must add the following code to angular.json.
Angular package format (APF) modifications
The Angular package structure has undergone significant changes in Angular 13, with older output forms such as View Engine-specific Metadata being phased out and current JavaScript formats such as ES2020 being standardised. This shift will ensure that the Angular package structure is compliant with the latest standards and technologies available.
Furthermore, APF has been modified in Angular 13 to facilitate node package exports, minimising developers’ dependency on internal APIs.
Furthermore, libraries in Angular 13 do not need ngcc, allowing developers to execute code quicker and provide leaner package output.
Internet Explorer 11 is no longer supported
Angular 13 has finally removed support for IE11 in response to significant comments received in the team’s RFC.
CSS code paths, build passes, polyfills, custom JS, and other IE11 infrastructure will be decommissioned.
Angular can now easily associate with evergreen browsers and Web APIs thanks to this upgrade.
Moreover, developers will take advantage of features such as CSS variables and web animations, while consumers will reap the rewards of faster loading speeds and an improved user experience.
Component enhancements in Angular 13
Accessibility (ay11) is at the heart of all modifications to the Angular material components in Angular 13.
These are some examples:
- Improved ARIA descriptions
- Touch target sizes that are larger
- Icon button style mode with high contrast
- Mat that is more accessible
- ChipRemove
- Datepicker enhancements
- ‘table’ now has a default role.
- Stepper changes
- Slider with a strong focus option
Furthermore, bogus mouse down events from screen readers are accurately identified by FocusMonitor in this Angular release.
As a result, anytime focus and click events occur on the screen, your apps will correctly understand them in v13.
Angular 13 enhancements – Testbed upgrades
The most recent Angular release dramatically improves the testbed by cleaning the DOM after each test.
Furthermore, the testbed more effectively deconstructs test modules and contexts.
In addition, Angular testing module teardown is enabled by default in v13.
As a result, Angular 13 developers will benefit from speedier, less interdependent, memory-intensive, and optimised tests.
What additional changes have occurred?
Inline support for Adobe typefaces is a popular Angular upgrade among community members.
With this update, we are pleased to announce improved speed and performance for our app. Additionally, a noteworthy feature has been added – $localise documentation. This provides an effortless way to manage internationalisation and tag messages.
Angular 13 also includes the following important updates:
- Typescript 4.4 compatibility
- Error messaging has been improved
- RxJS 7.4 is the default for applications built using ngnew
- Dynamic activation and deactivation of the built-in validator
- FormControlStatus for forms is now available
- Language service now has new type support
Summary
Angular 13 has been released, bringing with it a variety of major updates and modifications. Most notably, this version fulfills the “Ivy Everywhere” promise that was made in Angular 12, as well as completely eliminating the View Engine. This is sure to have an impact on the overall performance of Angular applications.
The framework has been optimised with the incorporation of Adobe fonts, an improved API, a comprehensive $localise documentation, component updates, and CLI upgrades, allowing for greater efficiency.
The most impressive aspect of the Angular framework is that the team is continuously striving to improve upon it, with plans to add independent directives, pipelines, and components in the forthcoming v14 and v15 releases, in addition to the current version.
Despite its widespread popularity, Angular remains a highly competitive web development framework. Even experienced Angular engineers face difficulty in securing their desired job roles due to the sheer number of candidates vying for similar positions.
At Works, we are offering long-term, remote Angular developer positions with some of the top companies in the United States. Not only do we provide competitive salaries, but our positions also offer exceptional career development opportunities. To learn more, please visit our Jobs page.
