What Is New In Angular 13

Angular 13 has arrived in the market with some exciting features and updates. It focuses more on “Ivy” and they call it the “Ivy Everywhere” approach. Let’s dive into the tutorial and see what is new in Angular 13 and how it affects the performance.

Angular 13 Features TL;DR

Angular v13 updates will not only speed up the website performance but also increase productivity. It will help Angular developers to do less coding to achieve the same result as previously. It has reduced production bundle build size. Here are Angular 13 features in brief.

  • View Engine is removed
  • Easily create components dynamically
  • IE11 Support ended
  • Persistent build cache is enabled by default
  • ESBuild performance improvements
  • RxJS 7.4 is used as the default
  • TypeScript 4.4 supported
  • Improvements to Angular Tests
  • Improvements to Angular Material
  • Adobe Fonts supported
  • Dynamically enable/disable validators
  • Restore history after canceled navigation
  • Community PR contributions
  • Docs updated

Upgrade existing application to Angular 13

Upgrade from v12 to v13 doesn’t require much effort. Running the update command will take care of all the things.

Follow the instructions here to upgrade from any previous version to the latest.


What’s new in Angular v13 release with examples

We have seen the new features and updates in v13 in short. Let’s implement it one by one and understand with examples.

State of View Engine

View Engine has been removed from Angular v13. It will use Ivy-based features that will enhance productivity. Removing View Engine means it reduces its dependency with ngcc (Angular compatibility compiler). The compilation will be faster because metadata and summary files are no longer included.

Create Dynamic Components

Developers are easily able to create dynamic components by the changes it has made in Ivy. The new API removes the need for ComponentFactoryResolver being injected into the constructor. Ivy creates the opportunity to instantiate the component with ViewContainerRef.createComponent without creating an associated factory.

Here is how you can create a dynamic component with the new API:

Ivy enables many of the API improvements like this.

End of IE11 support

The angular team removed the IE11 support from the feedback of community contributors. Removing the IE11 support removes IE-specific polyfills and code paths. It helps in faster application loading and an improved user experience.

It also removes the need for differential loading. Differential loading is a strategy that allows the web application to support multiple browsers. It bundles files based on the supported browsers. Basically, two types of browsers- modern and legacy. When users access the web application, they get the legacy or modern bundle automatically based on their browser.

ng update will automatically drop these IE-specific polyfills and reduce bundle size during project migration.

Persistent build cache

Angular v13 has enabled the persistent build cache by default based on the community feedback. It is a feature that will help persist the build on disk. It reuses the persisted data in subsequent build pipelines via ng build, ng serve, and other ng commands. The improvements in the build speed by this feature is up to 68%.

Developers can easily opt-in or opt-out for persistent build cache.

Enable the persistent build cache in the existing project by adding the configuration to angular.json:

ESBuild performance improvements

esbuild along with terser is used to optimize global scripts and global CSS. It improves the build speed and bundles the file faster than the previous versions.

ESBuild is a tool that makes the bundling of client-side scripts fast. It can link scripts and CSS dependencies as deployable assets for the web.

Terser is a JavaScript minifier module. It processes JavaScript files, compiled outputs from CoffeeScript, TypeScript, and Babel transpilers.

Minify your JavaScript code before using it in Production.

RxJS 7.4 in Angular 13

Angular 13 uses RxJS 7.4 by default for apps created with ng new. Existing apps using RxJS v6.x will have to manually update using the npm install rxjs@7.4 command. Follow the instructions to migrate from version 6 to 7.

TypeScript 4.4 Support

Angular v13 will support TypeScript 4.4. It was released in August 2021.

Improvements to Angular tests

Angular 13 has made some important improvements to TestBed that now does a better job of tearing down test modules and environments after each test.

Here is how to configure for the entire test:

Configure it for each module:

It clears the DOM after every test and developers can expect faster, less memory-intensive, less interdependent, and more optimized tests.

Improvements to Angular Material

Angular v13 improves accessibility (a11y) in areas such as contrast, touch, targets, and more.

Angular 13 a11y
Old Controls in left and new controls in the right

Adobe Fonts

Angular v13 extends support for Adobe Fonts that will improve app performance by speeding up the First Contentful Paint (FCP). Get the change by running ng update command.

Dynamically enable/disable validators

Built-in validators can be enabled/disabled by setting the value to null. It will be helpful in building dynamic forms.

Restore history after canceled navigation

canceledNavigationResolution flag can be set to computed that will restore the computed value of the browser history.

Community PR contributions

There are many community contributions done for Angular v13. This article covers many of them but still, there are many features left.

Docs updated

Last but not the least, Angular v13 has updated its docs. It will have all the instructions on the latest version.

Conclusions

Angular v13 has a lot of exciting features and updates that will not only improve the website speed but also help developers to easily build scalable applications. It is a well-growing JavaScript framework that focuses on building large scalable and lightweight applications.

This article covers most of the top features provided by Angular 13. Upgrade your older version to the latest now and enjoy all the exciting features of it.

Also Read:

Leave a Reply

Your email address will not be published. Required fields are marked *