Introducing Angular 13

Google recently announced the release of Angular 13, their popular single-page application framework, continuing the steady stream of small improvements we have seen since the release of the Ivy engine in Angular 9.

Angular 13 provides an update to the component API removing the need to use the ComponentFactoryResolver factory. Instead, new components can now be created using the ViewContainerRef.createComponent, reducing the boilerplate code needed to create components dynamically.

In addition, the legacy "View Engine" that was replaced by Ivy in Angular 9 is finally phased out. The process was initially delayed in order to give library maintainers a chance to migrate to the new engine. The move will reduce dependency on the angular compatibility compiler, which should enable faster builds in the future.

Angular 13 also sees the deprecation of Internet Explorer 11. While the official end-of-life date for Internet Explorer is still several months away, the low usage statistics coupled with the maintenance overhead spurred the Angular team to proceed with an earlier deprecation.

Projects that still support IE11 are advised to continue to use Angular 12, which will receive support past the planned end-of-life date of IE11.

On the compilation front, the Angular CLI will now use persistent build-cache by default for new Angular 13 projects. In most cases, this change should provide build time improvements of up to 68%.

Existing projects can enable the feature by making the following change to the cli.cache configuration:

"cli": {
    "cache": {
        "enabled": true,
        "path": ".cache",
        "environment": "all"
    }
}

Angular 13 also enables the new tear-down process for TestBed by default. This feature was introduced in Angular 12.1.0. The new process clears the DOM after every test, resulting in more independent tests and a lower memory footprint.

Existing projects can enable this feature by updating the TestBed.initTestEnvironment method with the following code:

beforeEach(() => {
    TestBed.resetTestEnvironment();
    TestBed.initTestEnvironment(
        BrowserDynamicTestingModule,
        platformBrowserDynamicTesting(),
        {
            teardown: { destroyAfterEach: true }
        }
    );
});

Finally, Angular 13 adopts TypeScript 4.4 and RxJS to 7.4. While TypeScript will be updated automatically for existing applications, RxJS will need to be upgraded manually as it includes some breaking changes.

While upgrading Angular projects is often straightforward, developers are advised to use the interactive upgrade guide at https://update.angular.io/.

For the full release announcement, head to the official Angular blog post.

Angular is open-source software available under the MIT license. Contributions are welcome via the Angular GitHub repository.