This blog discusses the Angular framework feature changes release as part of Angular Version 13.

Snippet from GitHub

The section mentions the key metrics (as of the date of writing this document) from GitHub. A probable indicator of platform adoption and stability.

Star   – 79.4k   Fork – 20.9k      Open Issues – 1.6k   Closed Issues – 21k

Source URL–  https://github.com/angular/angular

New Features

IE 11 Support removal

Removal of IE 11 support enables angular to leverage modern browser features (for example – CSS variable, usage of modern browser API, etc.). Removal of IE 11 supports also resulted in the removal of IE 11 specific code from framework and polyfills, resulting in the smaller bundle and improved application performance.

Note for Developers – This change is a breaking change for organizations supporting IE 11 browser.

Reference URL – https://github.com/angular/angular/issues/41840

Component API update

One of the major changes in Angular 13 is the way the component is loaded dynamically. New component API has reduced a lot of boiler plate code. The new API uses ViewContainerRef.createComponent to dynamically load a component (without requiring an associated factory)

Example

View Engine Removal

Angular 13 mandates it to build application/library using IVY engine i.e. no more you can use view engine as rendering engine it has to be IVY or partial-ivy for libraries.

How does it impact?

Angular 13 still supports libraries published with a view engine. For view engine libraries NGCC still exists. Change is seamless for the application developer. For example, while migrating from Angular 12 to 13 applications should still be able to consume libraries developed using the view engine.

The change impacts the library developers. The libraries developed being Angular 13 and to be published to NPM needs to be published with Partial Ivy (recommended) or Fully Ivy option.

Dependency Update

Angular 13 has a dependency on the upgraded version of RxJS, TypeScript & NodeJS.

• RxJS RxJS 7.4 is the default for Angular 13 i.e. when new projects are created, they are created using RxJS 7.4. While migrating existing projects they remain on RxJS 6.x version, which needs to be manually upgraded to Version 7.4
• TypeScript Versions older than 4.4.2 are no longer supported
• NodeJS Versions older than v12.20.0 are no longer supported. The Angular packages now use the NodeJS package exports feature (Angular package format change). It requires NodeJS version above 14.15.0 or 16.10.0.

Note for developers – This could be a breaking change in the existing application being migrated from the lower version of angular to Angular 13. Refer to the RxJS and TypeScript documentation for any breaking changes.

Reference URLs –
https://github.com/angular/angular/pull/43642
https://github.com/angular/angular/pull/43740

Angular Package Format (APF) Change

The angular package format is an angular-specific structure and format for NPM packages. Angular package format not only ensures packages work under the common scenario, but it is also compatible with toolchains available in a wider JavaScript ecosystem.

APF changes are at the framework level and are seamless for the developer. The change results in leaner output and faster execution, optimizing overall application performance.

To highlight a few of the changes –
– APF has removed older output format & view engine specific metadata
– Libraries built with the latest version of APF do not need NGCC (resulting in optimum output)
– Latest APF supports Node Package exports, prevents accidental dependency on internal APIs. Internal APIs might change at any time

Testing module teardown is default now

Angular 12.1 added ModuleTeardownOptions (https://angular.io/api/core/testing/ModuleTeardownOptions) options object.

interface ModuleTeardownOptions {
destroyAfterEach: Boolean //Default value to false prior to Angular 13
rethrowErrors?: boolean
}

Setting the property “DestroyAfterEach” to true makes sure DOM is cleaned after every test. Resulting in faster, memory-optimized, optimized tests. The above configuration could be set for, the entire testbed via TestBed.initTestEnvironment method or for induvial module via TestBed.configureTestingModule Method.
Before Angular 13 it was an opt-in option, with Angular 13 it’s made default option. It can be customized per application need.

Note for Developers – Angular migration until carrying forwards the previous configuration i.e. if DestroyAfterEach has opted out-migration would not change the configuration it needs to be opted in manually.

Support to Inline Adobe fonts

Post Angular 11, framework supported in-lining google font. Angular 13 now supports inline Adobe fonts into index.html.
In-lining font helps to improve page performance by speeding up the First contentful paint.
Reference URL – https://github.com/angular/angular-cli/issues/21186

• Router Improvements
  RouterLink directive with value as “null” or “undefined” disables the navigation.
  Reference URL – https://github.com/angular/angular/pull/43087
• RouterLink allows question mark in query parameter value.
  Example – /path?param1=value1?&param2=value2 will be parsed as {param1: “value1?”, param2: “value2”}
  Reference URL – https://github.com/angular/angular/pull/31187

This section describes few of the component libraries and its compatibility with Angular 13

Library Name – Ng-bootstrap          Supports Angular 13 – Y          Reference URL – https://ng-bootstrap.github.io/#/getting-started

Library Name – Ngx-bootstrap          Supports Angular 13 – Y        Reference URL – https://ng-bootstrap.github.io/#/getting-started

Library Name – Angular Material     Supports Angular 13 – Y

Library Name – Prime NG          Supports Angular 13 – Y        Reference URL – https://ng-bootstrap.github.io/#/getting-started

Upgrade to Angular 13

Refer to the Angular upgrade guide URL – https://update.angular.io/. It provides a step-by-step guide to migrate the existing angular applications from lower version to a later version

Reference URLs –

https://angular.io/guide/update-to-latest-version

https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

https://chriskohler.dev/angular-view-engine-was-removed-what-you-need-to-know

https://dev.to/this-is-angular/improving-angular-tests-by-enabling-angular-testing-module-teardown-38kh