Angular 13 Is Now Available

Angular 13 expands Ivy-based features and optimizations, and brings helpful dependency updates and important Framework changes.

The latest version of Angular, version 13 is available now publicly. Built on TypeScript, Angular is a component-based framework for building scalable web applications and is one of the most popular front-end frameworks for building Web applications. Angular 13 brings several updates to the framework and libraries. 

       

Announced via a blog post, this release focuses mainly on the expansion of Ivy-based features and optimizations. Ivy is Angular's next-generation compilation and rendering engine. Here are major updates and changes:

State of View Engine: Version 13 of the framework is 100 percent Ivy, also meaning that the View Engine compiler is no longer available. This will reduce Angular's reliance on ngcc (Angular compatibility compiler) and you will get faster compilation because metadata and summary files are no longer included.

To streamline the Angular Package Format(APF) version 13 has removed older output formats, including View Engine specific metadata. And to modernize it, the angular team has standardized on more modern JS formats like ES2020. So, libraries built with the latest APF version will no longer need ngcc. This will result in leaner package output and faster execution.

Component API updates: In version 13 the new API do away with the need for ComponentFactoryResolver being injected into the constructor. Ivy enables instantiation of the component with ViewContainerRef.createComponent without creating an associated factory.

End of IE11 support: Version 13 also ends IE11 support, which will enable the framework to leverage modern browser features like CSS variables and web animations via native web APIs. Apps will become smaller and load faster since there is no need of IE specific polyfills and code paths. Differential loading will also not required now. So, with v13 Developers/programmers will benefit from improved APIs and build infrastructure while users will get faster loading and an improved user experience.

If you still need to support IE11 for existing projects you can continue to use Angular v12 which will be supported until November 2022.

Improvements to the Angular CLI: Now, for new v13 projects, Angular supports the use of persistent build cache by default. This change results in up to 68% improvement in build speed and more ergonomic options. To enable this features for existing projects that have been upgrading to v13, you can add below configuration to angular.json:

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

The release also introduces esbuild, which works with terser to optimize global scripts. esbuild supports CSS sourcemaps and can optimize global CSS.

Framework changes and dependency updates: The release also features some helpful dependency updates and important Framework changes. For example, RxJS 7.4 is now the default for apps created with ng new. Version 13 also brings support for TypeScript 4.4.

Improvements to Angular tests: The DOM is now cleaned after every test and you can expect faster, less interdependent, less memory-intensive, and more optimized tests. Though this feature has been opt-in since 12.1, now it’ll be the default while remaining customizable.

Accessibility (A11y): Angular team said that all of the MDC-based components have been evaluated to match elevated a11y standards on areas like contrast, touch targets, ARIA, and more.

Source: Angular

 

New Type for Forms: The release introduces a new type called FormControlStatus, which is a union of all possible status strings for form controls.  The type of AbstractControl.status is now FormControlStatus instead of string, same way StatusChanges has been narrowed from Observable<any> to Observable<FormControlStatus>.

Inline Support for Adobe Fonts: In v11 Angular introduced support for inlining Google Fonts. Now, v13 is extending support to Adobe Fonts. Inlining fonts are helpful in improving your app performance by speeding up the FCP - First Contentful Paint. The update is now enabled for everyone by default. You can check out the below video on font inlining that can be helpful.

The release brings improvement for the router so that it will now not replace the browser URL when new navigation cancels ongoing navigation. Other changes in v13 release include changes to the localization API documentation, and more.  

To learn more you can visit the official announcement here.



Next Recommended Reading Java 13 Is Now Generally Available