What’s new in Angular 13

Version 13 of the popular TypeScript-based web framework is now available as a production release.

What’s new in Angular 13
nolimit46 / Getty Images

Angular 13, the latest upgrade to Google’s popular TypeScript-based web framework that promises to be “100 percent Ivy,” is now available as a production release.

Ivy is the Angular next-generation compilation and rendering engine, which Angular has been supporting in recent releases while maintaining support for the predecessor View Engine. Support for the Ivy library is being completed in Angular 13, and support for View Engine is being removed. Performance updates also are being highlighted in Angular 13, impacting areas such as Adobe Fonts and the ESBuild JavaScript bundler, with ESBuild now supporting CSS sourcemaps, enabling optimized global CSS.

Code for the production release can be found on GitHub. Developers can run ng update in their projects to get Angular 13. Changes cited in Angular 13 release notes, and in a bulletin announcing the production release, include the following:

  • TypeScript 4.4 support has been added; as of October 5, versions older than TypeScript 4.4.2 are no longer supported in the core.
  • Node.js versions older than v12.20 are no longer supported, due to Angular packages using the Node.js package exports feature with subpath patterns.
  • The rxjs (Reactive Extensions for JavaScript) v7 reactive programming library is supported.
  • Built-in validators such as min, max, and minLength can be disabled or enabled dynamically.
  • A simplified ViewContainerRef.createComponent API allows for dynamic creation of components.
  • Error messaging has been improved.
  • A persistent “build cache by default” capability has improved builds.
  • Angular Package Format 13 is introduced, removing View Engine-specific code from packages. APF has been streamlined and modernized.
  • $localize is a stable API, for internationalization.
  • Custom conditions can be set in ng_package.
  • The router no longer replaces the browser URL when a new navigation cancels an ongoing navigation. This had caused URL flicker and served only to support some AngularJS hybrid applications. Hybrid apps that rely on navigationId to the router instead should subscribe to NavigationCancel events and conduct the replaceState themselves to add navigationId to the router state.
  • The wrappedValue class no longer can be supported from @angular/core, which could result in compile errors or failures at runtime if libraries using wrappedValue are used. Usage of wrappedValue should be removed.
  • The behavior of the SpyLocation used by the RouterTestingModule has been changed to match the behavior of browsers.
  • For the core, pure annotations are being added to static property initializers. Class properties with initializers that cause code execution can have side effects at module evaluation, similar in effect to module level code. Thus, optimizers cannot safely remove a class with such a static property, as potential side effects may impact application execution. To allow classes with these types of static properties to be optimized and removed if unused, the initializer expressions for the static properties can be annotated as pure.
  • Service worker cache is cleared in the safety worker to ensure stale or broken contents are not served in future requests.
  • For the platform-browser, the error message has been improved for a missing animation trigger.
  • For forms, Angular 13 debuts a new type, FormControlStatus, which is a union of all possible status strings for form controls. Also, AbstractControl.status has been narrowed from string to FormControlStatus and StatusChanges have been narrowed from Observable<any> to Observable<FormControlStatus>. Most applications should consume these new types seamlessly, according the Angular changelog.
  • For the router, a change has been proposed to fix a situation in which the default URL serializer would drop everything afterward, including a question mark in query parameters, resulting in incorrect parsing for a navigation to /path?q=hello?&other=123. This change provides for correct parsing.
  • The Angular CLI has been improved.
  • Improvements to TestBed enable a better job of tearing down test modules and environments after each test.
  • IE11 (Internet Explorer) support is being removed.
  • For the compiler-cli, analysis would be skipped for incremental builds for files without Angular behavior. In an incremental build, the compiler tries to reuse as much analysis data from a prior compilation as possible to avoid doing the analysis work again. For source files without Angular behavior, however, no analysis data would be recorded, with the result that the source file would be reanalyzed each build, even if nothing had changed. This commit avoids the analysis of such source files.
  • For the language service, support would be offered for autocomplete string literal union types in templates.
  • For the router, missing outlet events would be added to RouterOutletContract. This will be needed when components are rendered dynamically via the module federation at some point in the future.

Production releases of Angular are targeted for every six months. The predecessor Angular 12 release arrived May 12.

Copyright © 2021 IDG Communications, Inc.