Angular v13 new features

Bulruno
2 min readNov 10, 2021

--

Get angular 13 by running ng update in your project.

Update guide available at update.angular.io on how to update angular applications in details.

Expansion of Ivy-based features and optimizations, partnering with our excellent Angular community and continuing to provide a smooth, stable update process.

State of View Engine

View Engine is no longer available in Angular as of v13. This is great news because Angular can continue to create ivy-based features that bolster your productivity with the platform, this also means angular can reduce its dependency on ngcc (Angular compatibility compiler) in the future, teams can look forward to faster compilation because metadata and summary files are no longer included.

Changes to Angular Package format (APF)

Background: APF is an angular specific specification for the structure and format of npm packages that is used by all first-party Angular packages and most third-party libraries.

package.json contains important package metadata (declares, exports, keys, side-effects)

APF has been streamlined and modernized to better service developers. To streamline APF in v13 we’ve removed older output formats, including view engine specific metadata.

To modernize it, we’ve standardized on more modern JS formats such as ES2020. Libraries built with latest version of APF will no longer require the use of ngcc. As a result of these changes library developers can expect leaner package output and faster execution.

We’ve also updated the APF to support Node package exports. This will help developers from inadvertently relying on internal API that may change.

Component API updates

Ivy also enables quality of life improvements to the way developers can dynamically create components. This API has been simplified.

constructor(private viewContainerRef: ViewContainerRef) {} createMyComponent() { this.viewContainerRef.createComponent(MyComponent); }

End of IE11 support

Removing IE11 support allows Angular to leverage modern browser features such as CSS variables and web animations via native web APIs. Removing IE11 polyfills and code paths, bundle will become smaller

Improvements to Angular CLI

On the updates to Angular’s tooling, Angular now supports the use of persistent build cache by default for new v13 projects. The valueable feedback from RFC persistent build cache by

Framework changes and dependency updates

RxJS 7.4

TypeScript 4.4

Improvements to Karma tests

Improvements to testbed have been made, it does a better job of tearing down after each test

Accessibility

Accessibility has to be foundation of everything we build inside and out of Angular community. We take this responsibility seriously, and the work we’ve done has resulted in meaningful improvements and changes to Angular Material components.

Other Updates

Inline Google Fonts. Now extended support to Adobe Fonts. Remember, inlining fonts can improve your app performance. Inlining fonts improve your app performance by First Contentful Paint (FCP).

--

--