Angular 13: Top new features and updates

Angular software has been the basic web-based open-source framework for developing web applications. Advancements and upgrades in the software provide flexibility for web developers to create more appealing websites.

From working with “Ivy Everywhere” to the complete exclusion of the view engine, this is how the transition goes as we get introduced to the newer version of Angular i.e. Angular 13!

Since its advent in 2010, the Angular developer community is constantly engaged in providing the latest upgrades and enhancements in the angular framework.

After Angular 12, Angular released v13 on November 3, 2021, which is now available as an active version till May 04, 2022. Notable changes and significant new features are observed in this latest version of Angular.

Advancements in Typescript, NodeJs, Angular CLI versions, removal of IE11, and view engine are some of the updates that distinguish the newer version from the older one.

Let’s have a brief overview of the essential updates and top Angular 13 features:

Angular 13 Features

1. Typescript Update

Previously 4.4.2 version of Typescript was supported, now Typescript 4.4 support has been added in Angular 13. Typescript 4.4.2 and older than that is no longer supported. This update can be seen in the package.json files.

Here’s a screenshot of the same:

Control Flow Analysis, performance boost, new flags, and better IntelliSense are some of the key highlights Typescript 4.4 version.

2. Removal of View Engine

This is one of the most notable Angular 13 features leading to faster compilation and increased productivity in the framework. The view-engine angular 13 feature has been completely removed to reduce the complexity of the Angular 13 codebase.

Angular 13 has completely shifted to Ivy which makes it easier for developers to improvise the dynamic components easily.

To ensure that this transition goes well, the framework has converted all internal tools to Ivy beforehand.

3. NodeJS Support

Versions older than v12.20.0 are no longer supported by the Angular framework. Web developers might face certain issues while installing different packages if working with the older versions.

16.14.2 is the current stable version of NodeJs. For ensuring seamless deployment of your project, it is recommended to install the latest versions of NodeJs.

4. Angular CLI Improvements

Angular CLI stands out to be one of the most crucial aspects of the overall angular architecture. By reducing complexities on a broad scale, Angular CLI helps standardize the process of handling the challenges of the present web development ecosystem.

With the release of Angular 13, significant changes to the Angular CLI are introduced for performance improvement.

Built-in support of persistent build cache
Easy enabling and disabling options for the build cache by the angular.json file
Up to 68% increase in speed of build-cache leading to faster deployment activities.

These are the notable Angular CLI improvements that are introduced in the new Angular 13 features and updates.

5. Validation Improvements

They have now introduced the new type 'Form Control Status' in angular forms. The main aim of this is to have a better check on form controls.

Form control status includes all possible values like ‘Valid’, ‘Invalid’, ‘Pending’, and ‘Disabled’.

For example, instead of string, the type of AbstractControl.status is now FormControlStatus.

Angular v12

Angular 13

These are some of the changes observed regarding the Updating Validators:

abstractControl.setValidators

abstractControl.addValidators

abstractControl.removeValidators

abstractControl.hasValidtors

It is now easier to enable and disable validations like min, max, email, etc.

6. Removal of IE 11 Support

This stands out to be one of the significant Angular 13 features. Angular 13 no longer supports IE11. CSS code paths, build passes, polyfills, special JS, and other parameters that were previously required for IE 11 have now been completely dropped off.

As a result, Angular has grown faster, and it is now easier for Angular to use new browser features like CSS variables and web animations using native web APIs.

Developers need to focus more on Web APIs, web notifications, WebRTC, WebGL, etc.,

7. Changes in the Angular Package Format (APF)

The Angular Package Format (APF) describes how Angular Framework packages and View Engine information should be formatted and assembled. Some substantial improvements are seen in the new edition of APF.

Older output formats that include View Engine-specific Metadata have been dropped off.
Standardization of modern JS formats such as ES2020.
Libraries built with the latest version of the APF no longer require the use of ngcc.

8. Framework Modifications and Dependency Updates

RxJS 7.4 is now available as the version for apps created with ng-new. Existing apps using RxJS v6.x need to be manually updated it using the npm install rxjs@7.4

Some other Angular 13 features

In Angular v12, TestBed configuration was included to make it easier to unzip test modules and environments. TestBed teardown is now the default feature. You can easily enable and disable it as and when required.
Validation error messaging has been removed.
The introduction of Inline support for Adobe Fonts helps to increase the functionality of an app.
Improvements in Localization such as the introduction of stable API – $localize. This offers a convenient way to process i18n and tag messages.
In templates, the Angular language enables autocompletion for union types.

How to upgrade

To avail of the benefits of Angular 13 features make sure you upgrade to the latest version of Angular 13. Developers can run ng update in their projects.

ng update @angular/cli @angular/core

Or you can refer to update.angular.io for further guidance and instructions regarding the installation of Angular 13.

Future of Angular

These were some of the noteworthy changes in the latest version of Angular 13.

The Angular developer community strives to make sure that web developers get better versions of the framework allowing them to stay updated with the rest of the online ecosystem and users' needs.

Newer versions of Angular are released on a consistent basis to enhance the web development process so that web developers could create awesome apps tailored to meet the modern web development standards.

Hope this new feature will enhance the development process and will serve as an aid to build better applications in the future.